/* Grundlage: Token, Grundtypografie, Kopfzeile.
   Diese Datei wird auf jeder Seite geladen und ist die einzige Stelle,
   an der Farben und Größen definiert werden. Alle weiteren Stylesheets
   greifen ausschließlich über var(--…) darauf zu, damit eine Farbe nur
   an einer Stelle geändert werden muss.

   Die Gestaltung folgt seit dem 10. September 2026 der Design-Sprache
   "Aurora": helles Fundament, ein einziger Signaturverlauf von Indigo
   nach Teal, runde Formen, weite weiche Schatten. Glanz ist Akzent und
   nie Grundierung — pro Ansicht höchstens ein Leuchten unter der
   Hauptaktion und eine Karte mit Verlaufsrand. Einen Schimmer gibt es
   nirgends; warum, steht im Kopf von formular.css.

   Zwei Ebenen von Namen:

   1. Die Aurora-Token (--accent, --surface, --r-md …). Sie sind die
      Quelle der Wahrheit und werden für den Dunkelmodus neu belegt.
   2. Die deutschen Hausnamen (--flaeche, --blau, --rund …). Sie zeigen
      auf die Aurora-Token und halten die übrigen Stylesheets lesbar.
      Hier steht kein eigener Farbwert, sonst liefe der Dunkelmodus
      auseinander. */

/* ==== Schriften ======================================================
   Inter und JetBrains Mono, selbst ausgeliefert aus
   /static/schriften/. Sie kamen bis zum 10. September 2026 von Google
   Fonts; das war der einzige Fremdinhalt der Seite und hat eine
   Einwilligung verlangt, die es nicht gab. Selbst ausliefern sieht
   identisch aus und stellt die Frage gar nicht erst.

   Es sind variable Schriften: eine Datei je Schnittmenge deckt den
   ganzen Gewichtsbereich ab (Inter 400-700, JetBrains Mono 400-600).
   Vier Dateien, zusammen rund 176 KB.

   'unicode-range' sorgt dafuer, dass die erweiterte lateinische Fassung
   nur geladen wird, wenn die Seite ein Zeichen daraus braucht. Deutscher
   Text kommt fast immer mit 'latin' aus.

   'font-display: swap' zeigt sofort die Systemschrift und tauscht erst,
   wenn die Datei da ist. Der Text ist also nie unsichtbar.

   Erneuern: Die Dateien stammen aus der Google-Fonts-API (Inter v20,
   JetBrains Mono v24, beide SIL Open Font License 1.1). Die genauen
   Herkuenfte stehen in web/static/schriften/LIZENZ.md.
   ==================================================================== */

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('/static/schriften/inter-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('/static/schriften/inter-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'JetBrains Mono';
    font-style: normal;
    font-weight: 400 600;
    font-display: swap;
    src: url('/static/schriften/jetbrains-mono-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'JetBrains Mono';
    font-style: normal;
    font-weight: 400 600;
    font-display: swap;
    src: url('/static/schriften/jetbrains-mono-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ==== Aurora-Token, helle Fassung ==================================== */

:root {
    color-scheme: light dark;

    /* Akzent. Zwei Verläufe mit verschiedener Aufgabe: --gradient trägt
       weißen Text, --gradient-deco leuchtet nur und darf niemals Text
       tragen. Das Cyan erreicht auf Weiß bloß 1,8:1. */
    --accent:          #4453e0;
    --accent-strong:   #3a46c8;
    --accent-soft:     #eef0ff;
    --accent-2:        #0e7490;
    --accent-deco:     #22d3ee;
    --gradient:        linear-gradient(135deg, var(--accent), var(--accent-2));
    --gradient-deco:   linear-gradient(135deg, #5b6cff, var(--accent-deco));

    /* Flächen */
    --bg:              #f7f8fd;
    --bg-2:            #eef1fa;
    --bg-gradient:     linear-gradient(165deg, var(--bg), var(--bg-2));
    --surface:         #ffffffcc;
    --surface-solid:   #ffffff;
    --surface-sunken:  #e9ecf6;

    /* Linien. --border-input erfüllt die 3:1-Grenze, die WCAG 1.4.11
       für erkennbare Bedienelemente verlangt. */
    --border:          #dfe3ee;
    --border-strong:   #d3d8e8;
    --border-input:    #8189a8;

    /* Text */
    --text:            #12141c;
    --text-muted:      #5c6274;
    --text-on-accent:  #ffffff;

    /* Semantik */
    --success:         #15803d;
    --warning:         #b45309;
    --error:           #dc2626;   /* Rand und Marke                       */
    --error-text:      #a11616;   /* Fehlertext — 6,9:1 auf --error-soft  */
    --error-soft:      #fdeaea;

    /* Glanz */
    --glow:            0 6px 20px -6px #4453e099;
    --glow-soft:       radial-gradient(circle, #5b6cff22 0%, transparent 70%);
    --sheen:           linear-gradient(115deg, transparent 35%, #ffffffcc 50%, transparent 65%);
    --blur:            14px;

    /* Schatten */
    --shadow-sm:       0 1px 2px 0 #3a45a014;
    --shadow-md:       0 8px 24px -12px #3a45a055;
    --shadow-lg:       0 20px 48px -20px #3a45a066;

    /* Radien */
    --r-sm:            12px;
    --r-md:            20px;
    --r-lg:            28px;
    --r-pill:          50px;

    /* Typografie. Inter und JetBrains Mono liegen unter
       /static/schriften/ und werden oben in dieser Datei eingebunden.
       Die Systemschriften stehen als Rückfall dahinter, falls eine Datei
       fehlt. */
    --font-sans:       "Inter", system-ui, -apple-system, "Segoe UI", Roboto,
                       "Helvetica Neue", Arial, sans-serif;
    --font-mono:       "JetBrains Mono", ui-monospace, SFMono-Regular,
                       Menlo, Consolas, "Liberation Mono", monospace;
    --tracking-tight:  -0.02em;
    --tracking-wide:   0.12em;
    --leading-body:    1.6;

    /* Abstände, 4er-Raster */
    --space-1:  4px; --space-2:  8px; --space-3: 12px; --space-4: 16px;
    --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px;

    /* Bewegung */
    --ease:            cubic-bezier(.4, 0, .2, 1);
    --t-fast:          .15s var(--ease);
    --t-base:          .25s var(--ease);

    /* Rubrikfarben, helle Fassung. Der Index kommt aus der Vorlage; sie
       zaehlt alle konfigurierten Rubriken aller aktiven Themen durch,
       damit eine Rubrik ihre Farbe behaelt, auch wenn nach Thema
       gefiltert wird.

       Zwoelf Toene, weil die drei Themen zusammen zwoelf verschiedene
       Rubriken haben. Zwoelf blasse Toene allein liessen sich nicht
       auseinanderhalten — benachbarte Farbtoene unterscheiden sich
       deshalb zusaetzlich im Tonwert: eine Marke ist blass, die
       naechste kraeftiger. Alle Paare liegen ueber 5:1.

       Zwei bekannte Grenzen:

       Kommen je mehr als zwoelf Rubriken zusammen, wiederholen sich die
       Farben. Dann muss die Palette wachsen — oder die Marken muessen
       ein anderes Merkmal tragen als die Farbe.

       Und der Index ist alphabetisch. Eine NEU hinzugefuegte Rubrik
       schiebt alle nachfolgenden weiter, die also ihre Farbe wechseln.
       Stabil ist die Zuordnung nur gegenueber dem Themenfilter, nicht
       gegenueber Aenderungen am Rubrikbestand. Wer das braucht, muesste
       die Farbe je Rubrik festhalten statt sie auszurechnen. */
    --r0-flaeche:  #e0ecf7; --r0-text:  #144473;
    --r1-flaeche:  #c8c8ec; --r1-text:  #101063;
    --r2-flaeche:  #ece0f7; --r2-text:  #441473;
    --r3-flaeche:  #ecc8ec; --r3-text:  #631063;
    --r4-flaeche:  #f7e0ec; --r4-text:  #731444;
    --r5-flaeche:  #ecc8c8; --r5-text:  #631010;
    --r6-flaeche:  #f7ece0; --r6-text:  #734414;
    --r7-flaeche:  #ececc8; --r7-text:  #636310;
    --r8-flaeche:  #ecf7e0; --r8-text:  #447314;
    --r9-flaeche:  #c8ecc8; --r9-text:  #106310;
    --r10-flaeche: #e0f7ec; --r10-text: #147344;
    --r11-flaeche: #c8ecec; --r11-text: #106363;
}

/* ==== Aurora-Token, dunkle Fassung ==================================
   Nur Werte werden neu belegt, nie neue Namen eingefuehrt. Der Block
   gilt fuer die Systemvorgabe; eine ausdrueckliche Wahl gibt es in
   dieser Oberflaeche nicht, deshalb steht hier auch kein
   data-theme-Zwilling. Wer ihn spaeter braucht, ergaenzt ihn hier.

   Die Rubrikmarken kehren sich mit um: dunkle Flaeche, heller Text.
   Alle zwoelf Paare liegen ueber 7:1 und wechseln wie in der hellen
   Fassung zwischen blass und kraeftig, damit benachbarte Rubriken
   unterscheidbar bleiben. */

@media (prefers-color-scheme: dark) {
    :root {
        --accent:          #7c8cff;
        --accent-strong:   #98a5ff;
        --accent-soft:     #1b2036;
        --accent-2:        #5ee3f5;
        --accent-deco:     #5ee3f5;
        --gradient:        linear-gradient(135deg, var(--accent), var(--accent-2));
        --gradient-deco:   linear-gradient(135deg, #7c8cff, #5ee3f5);

        --bg:              #0e1016;
        --bg-2:            #0a0c11;
        --surface:         #161a23cc;
        --surface-solid:   #161a23;
        --surface-sunken:  #11141c;

        --border:          #262c3a;
        --border-strong:   #333b4d;
        --border-input:    #666f8c;

        --text:            #e6e8f0;
        --text-muted:      #9aa2b8;
        --text-on-accent:  #0a0c11;

        --success:         #4ade80;
        --warning:         #fbbf24;
        --error:           #f87171;
        --error-text:      #f87171;
        --error-soft:      #2a1416;

        --glow:            0 6px 24px -6px #7c8cffaa;
        --glow-soft:       radial-gradient(circle, #7c8cff2e 0%, transparent 70%);
        --sheen:           linear-gradient(115deg, transparent 35%, #ffffff40 50%, transparent 65%);

        --shadow-sm:       0 1px 2px 0 #00000059;
        --shadow-md:       0 8px 24px -12px #000000b3;
        --shadow-lg:       0 20px 48px -20px #000000cc;

        --r0-flaeche:  #172838; --r0-text:  #b5cce3;
        --r1-flaeche:  #242449; --r1-text:  #c8c8ef;
        --r2-flaeche:  #281738; --r2-text:  #ccb5e3;
        --r3-flaeche:  #492449; --r3-text:  #efc8ef;
        --r4-flaeche:  #381728; --r4-text:  #e3b5cc;
        --r5-flaeche:  #492424; --r5-text:  #efc8c8;
        --r6-flaeche:  #382817; --r6-text:  #e3ccb5;
        --r7-flaeche:  #494924; --r7-text:  #efefc8;
        --r8-flaeche:  #283817; --r8-text:  #cce3b5;
        --r9-flaeche:  #244924; --r9-text:  #c8efc8;
        --r10-flaeche: #173828; --r10-text: #b5e3cc;
        --r11-flaeche: #244949; --r11-text: #c8efef;
    }
}

/* ==== Hausnamen ======================================================
   Die uebrigen Stylesheets sprechen weiter deutsch. Jeder Name zeigt
   auf genau ein Aurora-Token, damit der Dunkelmodus mitwandert. */

:root {
    --flaeche:          var(--surface-solid);
    --glas:             var(--surface);
    --leise:            var(--text-muted);
    --linie:            var(--border);
    --linie-kraeftig:   var(--border-strong);
    --linie-bedienbar:  var(--border-input);
    --hover:            var(--surface-sunken);

    --blau:             var(--accent);
    --blau-tief:        var(--accent-strong);
    --blau-blass:       var(--accent-soft);
    --fokus:            var(--accent);
    --auf-farbe:        var(--text-on-accent);

    --fehler-flaeche:   var(--error-soft);
    --fehler-linie:     var(--error);
    --fehler-text:      var(--error-text);
    --warnung:          var(--warning);

    --rund:             var(--r-md);
    --rund-klein:       var(--r-sm);
    --rund-gross:       var(--r-lg);
    --rund-marke:       var(--r-pill);

    --schatten:         var(--shadow-md);
    --schatten-stark:   var(--shadow-lg);

    --schrift:          var(--font-sans);
    --zahl:             var(--font-mono);

    /* --artikel-groesse steuert nur den Fließtext der Beiträge und wird
       über die Klassen .schrift-16/18/21 am <body> gesetzt. */
    --artikel-groesse:  18px;

    --luft:      var(--space-4);
    --luft-halb: var(--space-2);
    --luft-viel: var(--space-6);

    --breite: 1360px;
    --kopf-hoehe: 66px;
}

.schrift-16 { --artikel-groesse: 16px; }
.schrift-18 { --artikel-groesse: 18px; }
.schrift-21 { --artikel-groesse: 21px; }

* { box-sizing: border-box; }

html {
    /* Der Verlauf traegt die ganze Seite, auch wenn der Inhalt kurz ist.
       Er ist bewusst kaum sichtbar — ein Verlauf auf grosser Flaeche ist
       in dieser Sprache Grundierung, nicht Schmuck. */
    min-height: 100%;
    background: var(--bg-gradient) fixed;
    color: var(--text);
    font-family: var(--schrift);
    -webkit-font-smoothing: antialiased;
}

body {
    margin: 0;
    line-height: var(--leading-body);
}

h1, h2, h3 {
    letter-spacing: var(--tracking-tight);
    font-weight: 700;
    line-height: 1.12;
}

a {
    color: var(--blau);
    text-underline-offset: 3px;
}

a:hover { color: var(--blau-tief); }

/* Fokus wird nie ohne Ersatz entfernt: Rand in der Akzentfarbe plus
   weicher Ring. */
:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: var(--rund-klein);
}

/* Sprungmarke: nur sichtbar, solange sie den Fokus hat. */
.sprung {
    position: fixed;
    top: -80px;
    left: var(--luft);
    z-index: 100;
    padding: 10px var(--luft);
    border-radius: var(--rund-marke);
    background: var(--gradient);
    color: var(--auf-farbe);
    /* Bewusst der normale Schatten und nicht --glow: Das Leuchten ist der
       Hauptaktion einer Ansicht vorbehalten, und die Sprungmarke steht
       auf jeder Seite. */
    box-shadow: var(--schatten-stark);
    text-decoration: none;
}

.sprung:focus {
    top: var(--luft-halb);
    color: var(--auf-farbe);
}

/* --- Kopfzeile ------------------------------------------------------
   Glas statt Farbband: eine helle, halbdurchsichtige Leiste, durch die
   der Seitengrund schimmert. Sie traegt keinen eigenen Kontrast, das
   uebernimmt die duenne Linie an ihrem unteren Rand. Wo backdrop-filter
   fehlt, greift die deckende Flaeche darunter — das Layout bleibt
   gleich. */

.kopf {
    position: sticky;
    top: 0;
    z-index: 20;
    height: var(--kopf-hoehe);
    background: var(--glas);
    backdrop-filter: blur(var(--blur));
    -webkit-backdrop-filter: blur(var(--blur));
    border-bottom: 1px solid var(--linie);
    color: var(--text);
}

.kopf-innen {
    max-width: var(--breite);
    height: 100%;
    margin: auto;
    padding: 0 var(--space-5);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--luft);
}

/* Wortmarke. Der Balken traegt den Signaturverlauf — er ist die einzige
   Stelle der Kopfzeile, an der Farbe gross auftritt, deshalb bleibt der
   Schriftzug daneben einfarbig. */
.wortmarke {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: var(--tracking-tight);
    color: var(--text);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
}

.wortmarke:hover { color: var(--text); }

.wortmarke::before {
    content: "";
    display: inline-block;
    width: 6px;
    height: 25px;
    margin-right: 11px;
    border-radius: var(--rund-marke);
    background: var(--gradient-deco);
}

.werkzeuge {
    display: flex;
    align-items: center;
    gap: var(--luft);
}

.werkzeuge > a {
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
}

.werkzeuge > a:hover { text-decoration: underline; }

/* --- Textgröße ------------------------------------------------------
   Drei Knöpfe, deren Beschriftung die Wirkung zeigt: ein kleines, ein
   normales und ein großes A. Die Vorlesehilfe bekommt zusätzlich einen
   ausgeschriebenen Namen über aria-label. */

/* Kein 'overflow: hidden' zum Runden der Enden: Es schnitt den Fokusring
   der aeusseren Knoepfe an. Stattdessen runden die beiden Randknoepfe
   selbst. */
.schriftwahl {
    display: flex;
    margin: 0;
    padding: 0;
    border: 1px solid var(--linie-bedienbar);
    border-radius: var(--rund-marke);
}

.schriftwahl legend {
    position: absolute;
    clip-path: inset(50%);
}

.schriftwahl form {
    display: flex;
    margin: 0;
}

.schriftknopf {
    width: 38px;
    height: 34px;
    border: 0;
    border-left: 1px solid var(--linie);
    background: var(--flaeche);
    color: var(--text);
    font-family: inherit;
    line-height: 1;
    cursor: pointer;
    transition: background var(--t-fast), color var(--t-fast);
}

.schriftwahl form:first-of-type .schriftknopf {
    border-left: 0;
    border-radius: var(--rund-marke) 0 0 var(--rund-marke);
}

.schriftwahl form:last-of-type .schriftknopf {
    border-radius: 0 var(--rund-marke) var(--rund-marke) 0;
}

.schriftknopf.s16 { font-size: 13px; }
.schriftknopf.s18 { font-size: 16px; }
.schriftknopf.s21 { font-size: 20px; }

.schriftknopf:hover { background: var(--hover); }

/* Der gewaehlte Knopf traegt den Verlauf. Zusaetzlich zum Farbwechsel
   sagt aria-pressed den Zustand an — Farbe allein traegt hier keine
   Bedeutung. */
.schriftknopf[aria-pressed="true"] {
    background: var(--gradient);
    color: var(--auf-farbe);
    font-weight: 650;
}

.abmelden { margin: 0; }

.abmelden button {
    height: 36px;
    padding: 0 var(--space-4);
    border: 1px solid var(--linie-bedienbar);
    border-radius: var(--rund-marke);
    background: var(--flaeche);
    color: var(--text);
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--t-fast);
}

.abmelden button:hover { background: var(--hover); }

/* --- Inhaltsverzeichnis einer Tagesfolge -----------------------------

   Steht in der Leseansicht unter dem Player und im Admin-Bereich beim
   Skript. Deshalb hier und nicht in strom.css: Dieselben Regeln in zwei
   Dateien laufen frueher oder spaeter auseinander.

   Die Zeit ordnet die Liste. Eine zusaetzliche Nummerierung waere doppelt
   gemoppelt, und Messwerte stehen im Haus in der Ziffernschrift. */
.kapitelbox {
    border-top: 1px solid var(--linie);
    padding-top: var(--space-3);
}

.kapitelbox > summary {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--luft);
    cursor: pointer;
    list-style: none;
    font-size: 14px;
}

.kapitelbox > summary::-webkit-details-marker { display: none; }

.kapitelbox-titel { font-weight: 650; }

.kapitelbox-zahl {
    color: var(--leise);
    font-family: var(--zahl);
    font-size: 12px;
}

.kapitel {
    margin: var(--space-3) 0 0;
    padding: 0;
    list-style: none;
}

.kapitel-zeile,
.kapitel-knopf {
    display: grid;
    grid-template-columns: 4.5em minmax(0, 1fr) auto;
    align-items: baseline;
    gap: var(--luft);
    padding: 5px var(--space-2);
    font-size: 14px;
}

.kapitel-zeit {
    color: var(--leise);
    font-family: var(--zahl);
    font-size: 12px;
}

.kapitel-titel {
    min-width: 0;
    overflow-wrap: anywhere;
}

.kapitel-rubrik {
    color: var(--leise);
    font-size: 12px;
}

@media (max-width: 760px) {
    .kapitel-rubrik { display: none; }

    .kapitel-zeile,
    .kapitel-knopf { grid-template-columns: 4.5em minmax(0, 1fr); }
}

@media (max-width: 760px) {
    .kopf-innen { padding: 0 var(--luft); }
    .werkzeuge { gap: var(--luft-halb); }
}

/* --- Handy ----------------------------------------------------------
   Unter etwa 560px passt die Kopfzeile nicht mehr in eine Zeile: Die
   drei Schriftknoepfe, der Admin-Verweis und der Abmeldeknopf brauchen
   zusammen rund 280px, die Wortmarke weitere 120px, dazu die Innenraender.
   Auf einem iPhone (375 bis 430px) lief die Zeile deshalb rechts aus dem
   Bild — die Knoepfe waren abgeschnitten und die Seite liess sich seitlich
   schieben. Keiner der Teile kann schrumpfen: Die Knoepfe haben feste
   Breiten, der Rest seine Textbreite.

   Sie bricht hier also um: Wortmarke oben, Werkzeuge darunter. Zwei
   feststehende Zeilen wuerden auf einem Handydisplay zu viel Hoehe
   dauerhaft belegen, deshalb scrollt die Kopfzeile in dieser Breite mit
   weg. Der Filter der Leseansicht steht ab 760px ohnehin schon fest im
   Fluss, --kopf-hoehe wird hier also von niemandem mehr gebraucht. */
@media (max-width: 560px) {
    .kopf {
        position: static;
        height: auto;
    }

    .kopf-innen {
        flex-wrap: wrap;
        justify-content: flex-start;
        gap: 10px;
        padding: 10px var(--luft);
    }

    .wortmarke { font-size: 20px; }

    .wortmarke::before {
        height: 22px;
        margin-right: 9px;
    }

    /* Die Werkzeuge nehmen die zweite Zeile ganz ein und verteilen sich
       darin, statt links zusammenzudraengen. */
    .werkzeuge {
        width: 100%;
        justify-content: space-between;
    }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}