@charset "UTF-8";
:root {
  
  /* Grundfarben OKLCH Hue */
  
  --hue-blu-d:                    262; /* stahlblau */
  --clr-blu-d:    oklch(0.38 0.07 var(--hue-blu-d));
  --clr-blu-k:    oklch(0.43 0.28 var(--hue-blu-d));
  --clr-blu-h:    oklch(0.63 0.07 var(--hue-blu-d));
  
  --hue-rot-d:                     26; /* dunkelrot */
  --clr-rot-d:    oklch(0.48 0.16 var(--hue-rot-d));
  
  --hue-ora-d:                     66;  /* orange */
  --clr-ora-d:    oklch(0.70 0.18 var(--hue-ora-d));
  
  --hue-gel-d:                    104; /* gelb */
  --clr-gel-d:    oklch(0.89 0.19 var(--hue-gel-d));
  
  --hue-ock-d:                     84; /* ocker */
  --clr-ock-d:    oklch(0.86 0.05 var(--hue-ock-d));
  
  --hue-vlt-d:                    311; /* violett */
  --clr-vlt-d:    oklch(0.35 0.15 var(--hue-vlt-d));
  
  --hue-weiss:                     19;  /* weiss */
  --clr-weiss:    oklch(1.00 0.00 var(--hue-weiss));
  
  --hue-schwz:                      0;   /* schwarz */
  --clr-schwz:    oklch(0,10 0.00 var(--hue-schwz));
  
  /* Seite */
  --text:         oklch(0.32 0.07 var(--hue-blu-d)); 
  --bg-outside:   oklch(0.92 0.02 var(--hue-ora-d));
  --bg-inside:    oklch(1.00 0.00 var(--hue-weiss));

  /* blau */
  --colorCurrent: oklch(0.6  0.1  var(--hue-blu-d));
  --link-default: oklch(0.3  0.28 var(--hue-blu-d));
  --link-hover:   oklch(0.9  0.04 var(--hue-blu-d));

  /* nav gelb */
  --nav-bg:       oklch(0.86 0.05 var(--hue-ock-d));
  --nav-border:   oklch(0.70 0.10 var(--hue-ock-d));
  
  --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);
  
  /* orange für light + dark */
  --accent-first:      oklch(0.48 0.16 var(--hue-ora-d));
  --accent-secondary:  oklch(0.56 0.18 var(--hue-ora-d));
  --bg-box:            oklch(0.64 0.18 var(--hue-ora-d));
  --text-box:          oklch(1 0 0);
  
    /* table */
  --bg-line-even:      oklch(0.95 0.04 var(--hue-ora-d));
  --text-akt:          oklch(0.40 0.16 var(--hue-rot-d));
}

/* DARK MODE */

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

    /* link */
    --link-default:    oklch(0.8  0.1  var(--hue-ora-d));
    --link-hover:      oklch(0.9  0.04 var(--hue-ora-d));
    --colorCurrent:    oklch(0.6  0.1  var(--hue-ora-d));

    /* nav */
    --nav-bg:                   oklch(0.35 0.1  var(--hue-blu-d));
    --nav-border:               oklch(0.55 0.1  var(--hue-blu-d));
    --shadow-highlight:         oklch(1    0    var(--hue-blu-d) / 0.2);
    --shadow-inner:             oklch(0    0    var(--hue-blu-d) / 0.5);
    --shadow-mid:               oklch(0.45 0    var(--hue-blu-d));
    --shadow-dark:              oklch(0.25 0    var(--hue-blu-d));
    --shadow-pressed-inner:     oklch(0    0    var(--hue-blu-d) / 0.7);
    --shadow-pressed-highlight: oklch(1    0    var(--hue-blu-d) / 0.2);

    /* allg */
    --shadow-elements:          oklch(0.7  0.2  var(--hue-blu-d));

    /* table */
    --bg-line-even:             oklch(0.25 0.05 var(--hue-ora-d));
    --text-akt:                 oklch(0.80 0.05 var(--hue-gel-d));
  }
}

/* Grundsätzliches */

* {
  box-sizing: border-box;
}

body {
  margin: 0 auto;
  max-width: 70em;
  font-family: "Aptos", "Trebuchet MS", 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,
footer {
  padding:    .5em;
}
aside {
  padding:    .5em;
  padding-top: 2em
}

header {
  position:   relative;
  
  color:      white;
  background: oklch(0.38 0.07 var(--hue-blu-d));
  font-size:  1.15em;
}

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 {
    max-width: 100%;
    height: auto;
}

img#logo {
  width: 2em;
  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.6em 1.0em 0.3em 1.0em;
  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:     1.5em;
}
nav li:last-of-type a {
  border-bottom-right-radius: 1.5em;
}

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

nav h2 {
  font-size: 1.2rem;
}

/* Inhalt */

article {
  padding-bottom: 2em;
}

article h2 {
  font-size: 1.2rem;
}

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

aside h2 {
  --ribbonsize: 1.25rem;
  --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;
}

p.cr {
  font-size: 0.75rem;
  text-align: right;
}

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

table.ban {
  width: 100%;
  padding-left:   0em;
  padding-right:  0em;
  padding-top:    0.25em;
  padding-bottom: 0em;
}

table.akt {
  padding-top:    1em;
  padding-bottom: 0em;
}

td.akt {
  color: var(--text-akt);
}


/* 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 > 30em) {
  body {
    display: grid;
    grid-template-columns: 1fr 4fr;
    grid-template-rows: min-content 1fr min-content min-content min-content;
    gap: 0 .5em;
    min-height: 100vh;
  }

  header {
    grid-column: 1 / -1;
    font-size:  1.5em;
}


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

  aside {
    grid-column: 1 / -1;
    align-self: start;
  }

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

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

/* Layout für breite Fenster */

@media (width > 60em) {
  body {
    grid-template-columns: 1fr 3.75fr 1.25fr;
    grid-template-rows: min-content 1fr 1fr min-content;
    gap: 0 1em;
  }

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

  aside {
    grid-column: 3;
  }

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

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

/* Grössere Schrift für sehr breite Fenster */
@media (width > 75em) {
  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: 3.75fr 1.25fr;
    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;
  }
}



/* Grundstyling für die Tabelle */
.striped-table {
  width: 100%;
  border-collapse: collapse;
}

.striped-table th, 
.striped-table td {
  padding: 6px 12px;
  text-align: left;
  border-bottom: 1px solid oklch(0.38 0.07 var(--hue-blu-d));
}

/* Kopfzeile hervorheben */
.striped-table thead tr {
  background-color:        oklch(0.38 0.11 var(--hue-rot-d));
  color:                   oklch(0.99 0.11 var(--hue-gel-d));
}

/* 💡 Das Design Pattern für abwechselnde Farben */
.striped-table tbody tr:nth-child(even) {
  background-color:        var(--bg-line-even);