@charset "UTF-8";
:root {
  
  /* Grundfarben OKLCH Hue, zum Kopieren in die SVG-Dateien */
  --hue1: 235; /* blau */
  --hue2: 92; /* gelb */
  --hue3: 125; /* grün */
  --hue4: 28; /* braun */
  --hue5: 108; /* gelber Schein */
  
  /* Seite */
  --text: oklch(0.4 0.1 28);
  --bg-outside: oklch(0.92 0.02 var(--hue1));
  --bg-inside: oklch(1 0 0);

  /* blau */
  --link-default: oklch(0.5 0.1 var(--hue1));
  --link-hover: oklch(0.9 0.04 var(--hue1));
  --colorCurrent: oklch(0.7 0.1 var(--hue1));

  /* nav gelb */
  --nav-bg: oklch(0.95 0.1 var(--hue2));
  --nav-border: oklch(0.77 0.15 var(--hue2));
  --shadow-highlight: oklch(1 0 0 / .6);
  --shadow-inner: oklch(0 0 0 / .15);
  --shadow-mid: oklch(0.68 0 0);
  --shadow-dark: oklch(0.55 0 0);
  --shadow-pressed-inner: oklch(0 0 0 / 0.25);
  --shadow-pressed-highlight: oklch(1 0 0 / 0.3);

  /* grau */
  --shadow-elements: oklch(0.6 0 0);
  
  /* grün, für light + dark */
  --accent-first: oklch(0.6 0.1 var(--hue3));
  --accent-secondary: oklch(0.5 0.1 var(--hue3));
  --bg-box: oklch(0.6 0.1 var(--hue3));
  --text-box: oklch(1 0 0);
}

/* DARK MODE */

@media (prefers-color-scheme: dark) {
  :root {
    /* Seite */
    --text: oklch(1 0 0);
    --bg-outside: oklch(0.3 0.05 var(--hue1));
    --bg-inside: oklch(0 0 0);

    /* blau */
    --link-default: oklch(0.8 0.1 var(--hue1));
    --link-hover: oklch(0.9 0.04 var(--hue1));
    --colorCurrent: oklch(0.6 0.1 var(--hue1));

    /* nav dunkelbraun */
    --nav-bg: oklch(0.4 0.1 var(--hue4));
    --nav-border: oklch(0.6 0.1 var(--hue4));
    --shadow-highlight: oklch(1 0 var(--hue5) / 0.2);
    --shadow-inner: oklch(0 0 var(--hue5) / 0.5);
    --shadow-mid: oklch(0.52 0 var(--hue5));
    --shadow-dark: oklch(0.32 0 var(--hue5));
    --shadow-pressed-inner: oklch(0 0 var(--hue5) / 0.7);
    --shadow-pressed-highlight: oklch(1 0 var(--hue5) / 0.2);

    /* gelb */
    --shadow-elements: oklch(0.7 0.19 var(--hue5));
  }
}

/* Grundsätzliches */

* {
  box-sizing: border-box;
}

body {
  margin: 0 auto;
  max-width: 70em;
  font-family: sans-serif;
  line-height: 1.3;
  color: var(--text);
}

a,
button {
  color: var(--link-default);
  box-shadow: inset 0 -.2em 0 -.1em var(--link-default);
  padding: .2em 0;
  text-decoration: none;
  transition: all .3s;
}

.current a {
  color: var(--colorCurrent);
}

a:hover,
a:focus {
  box-shadow: inset 0 -2em 0 var(--link-hover);
}

header,
nav,
article,
aside,
footer {
  padding: .5em;
}

header {
  position: relative;
}

header h1, 
nav h2 {
  margin: 0;
}

/* Logo und Titel */

header {
  display: flex;
  flex-wrap: wrap;
  align-content: stretch;
  justify-content: center;
  gap: .5em;
  text-align: center;
}

header a {
  box-shadow: none;
}

img#logo {
  width: 10em;
  max-width: 35vw;
  display: block;
  float: left;
}

header h1 {
  flex: 1;
  flex-basis: 13em;
  align-self: center;
  max-width: 22em;
  margin: 0 auto;
}

#titel {
  display: block;
  font-size: 1.2em;
  -webkit-text-stroke-color: #333;
	text-stroke-color: #333;
	-webkit-text-stroke-width: 1px;
	text-stroke-width: 1px;
}

#untertitel {
  display: block;
  font-size: .8em;
  font-weight: normal;
}


/* Navigation & Button */

nav li,
nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

nav a,
button {
  display: block;
  border-radius: 0.5em;
  margin-bottom: 0.5em;
  white-space: nowrap;
  text-decoration: none;
  font-weight: bold;
}

nav a,
button {
  padding: 0.7em 1.5em 0.5em 1.5em;
  background: var(--nav-bg);
  border: thin solid var(--nav-border);
  box-shadow:
    inset var(--shadow-highlight) 0 0.3em .3em,
    inset var(--shadow-inner) 0 -0.1em .3em,
    var(--shadow-mid) 0 .1em .2em,
    var(--shadow-dark) 0 .3em .1em,
    var(--shadow-dark) 0 .5em .4em;
}

nav a:hover,
nav a:focus-visible,
button:hover {
  box-shadow:
    inset var(--shadow-pressed-inner) 0 0.1em 0.3em,
    inset var(--shadow-pressed-highlight) 0 -0.05em .2em;
  transform: translateY(.1em);
}

nav li:first-of-type a {
  border-top-left-radius: 3em;
}

nav li:last-of-type a {
  border-bottom-right-radius: 3em;
}

button {
  font-size: 1.25em;
  padding: 0.5em;
  width: min-content;
  border-radius: 50% / 40%;
  margin-inline: auto;
}

/* Inhalt */

article {
  padding-bottom: 2em;
}

aside {
  border: medium dashed var(--accent-first);
  border-radius: 0 0.5em 0.5em;
  margin-block: 1em;
}

aside h2 {
  --ribbonsize: 1.5rem;
  --ribbonpadding: .25rem;
  background: var(--bg-box);
  color: var(--text-box);
  border: thin solid var(--accent-secondary);
  border-radius: 0 .5em;
  font-size: var(--ribbonsize);
  width: min-content;
  margin-inline: auto;
  padding-inline: 0.5em;
  padding-block: var(--ribbonpadding);
  white-space: nowrap;
  position: relative;
  top: calc(-1.9 * var(--ribbonsize) );
}

aside p:first-of-type,
aside li:first-of-type {
  margin-top: -2em;
}

ul {
  padding-left: 1.3em;
}
li {
  line-height: 1.5;
  padding-bottom: .5em;
  margin-left: 0;
}

/* Nur für Bildschirm */

@media screen {
  html {
    background: radial-gradient(circle, var(--bg-inside) 20%, var(--bg-outside));
  }
  
  #banner,
  #logo,
  aside h2 {
    filter: drop-shadow(.1em .1em .3em var(--shadow-elements));
  }
}

/* Layout für etwas breitere Fenster */

@media (width > 25em) {
  body {
    display: grid;
    grid-template-columns: 1fr 3fr;
    grid-template-rows: min-content 1fr min-content min-content min-content;;
    gap: 0 .5em;
    min-height: 100vh;
  }

  header {
    grid-column: 1 / -1;
  }

  nav {
    grid-column: 1;
    grid-row: 2 / 3;
  }
  

  article {
    grid-column: 2;
    grid-row: 2 / 3;
    border-left: thin solid var(--colorCurrent);
  }

  aside {
    grid-column: 1 / -1;
  }

  footer {
    grid-column: 1 / -1;
    grid-row: 5;
    text-align: right;
  }
  
  nav h2 {
    margin: .83em 0;
  }
}

/* Layout für breite Fenster */

@media (width > 45em) {
  body {
    grid-template-columns: 1fr 3fr 1.5fr;
    grid-template-rows: min-content 1fr 1fr min-content;
    gap: 0 1em;
  }

  nav {
    grid-column: 1;
    grid-row: 2 / 4;
  }

  article {
    grid-column: 2;
    grid-row: 2 / 4;
  }

  aside {
    grid-column: 3;
  }

  footer {
    border-top: thin solid var(--colorCurrent);
    grid-row: 4;
    text-align: right;
  }
}

/* Grössere Schrift für sehr breite Fenster */
@media (width > 70em) {
  html {
    font-size: 112.5%;
  }
}

/* Druck */
@media print {

  nav,
  aside button {
    display: none;
  }
  
  * {
    box-shadow: none !important;
    filter: none !important;
  }
  
  :root {
    font-size: 80%;
  }

  html {
     margin-left: 30pt; 
  }

  body {
    grid-template-columns: 3fr 1.5fr;
    grid-template-rows: auto;
    min-height: auto;
  }

  header {
    grid-column: 1 / -1;
  }

  article {
    grid-column: 1;
    grid-row: 2 / 4;
  }

  aside {
    grid-column: 2;
  }

  footer {
    grid-column: 1;
    grid-row: 5;
    text-align: left;
  }

 #banner {
    max-width: 18em;
  }

  article,
  footer {
    border: none;
  }
  
  aside h2 {
    border: none;
  }
}