/* ===========================================================================
   stil.css - die Farben und Formen der Kursplattform, an EINER Stelle
   ---------------------------------------------------------------------------
   07.10.2026, Jans Festlegung nach den Stilproben (Vorbild: sein Kalender
   CaleConnect):

     Teilnehmerseiten   wählbar: Bubble oder Chocolate      je hell/dunkel
     Kursplaner,
     Verwaltung,
     Lernstände         fest: Chocolate                     je hell/dunkel
     Zählen, Packen,
     Heute (Lager)      fest: Bubble                        je hell/dunkel

   Zwei Merkmale am <html>, beide setzt thema.js:
     data-thema = "hell" | "dunkel"        (gibt es seit 17.09.2026)
     data-stil  = "bubble" | "chocolate"   (neu)

   WARUM EINE EIGENE DATEI und nicht wie bisher je Seite im <style>:
   Bisher trägt jede Seite ihre Farben selbst - 13 Seiten, 13 :root-Blöcke,
   mit verschiedenen Namen (--txt hier, --kopf da, --gut dort). Bei zwei
   Stilen mal zwei Modi wären das 52 Farbsätze, die auseinanderlaufen. Das
   ist derselbe Grund, aus dem thema.js eine Datei ist und keine sieben
   Kopien.

   WARUM NEUE NAMEN (--st-...) und die alten nicht einfach umdefiniert:
   Die alten Namen bedeuten je Seite Verschiedenes (--prim ist auf der
   Kursseite die Kopffarbe, im Zähler die Knopffarbe). Jede Seite bildet
   deshalb in IHREM :root ihre alten Namen auf diese hier ab - die
   "Brücke", siehe AUFTRAG-STIL.md. So bleibt jede Seite einzeln
   umstellbar, und eine noch nicht umgestellte Seite sieht aus wie vorher.

   Diese Datei setzt KEINE alten Namen und keine Seitenklassen. Sie liefert
   Werte und wenige Bausteine (unten). Was eine Seite daraus macht,
   entscheidet die Seite.

   Vorlage zum Ansehen: die Stilproben (Artifact "Stilproben
   Kursplattform"), Reiter 1 und 3 und "TN: Chocolate hell + Stilwahl".
   ======================================================================== */

/* ---------------------------------------------------------------------------
   Schrift. Lokal, kein CDN (Datenschutz, CLAUDE.md). Die Dateien liegen in
   schrift/ - Barlow, SIL Open Font License.

   Barlow nur für Bubble-Überschriften und große Zahlen. Fließtext,
   Beschriftungen, Felder laufen in der Systemschrift: Dünne Schrift trägt
   keine Liste am Handy im Lager und kein langes Formular. Chocolate braucht
   gar keine eigene Datei - "Roboto Flex" steht nur VORN in der Liste und
   greift, wo sie installiert ist; sonst die Systemschrift. Das ist eine
   bewusste Abweichung vom Kalender (dort Roboto Flex geladen): eine
   variable Schriftdatei kostet ein Vielfaches von Barlow, und Android hat
   Roboto ohnehin. Erst entscheiden, wenn der Unterschied am Rechner stört.

   font-display:swap - lieber eine Zehntelsekunde in der Ersatzschrift als
   eine Kopfzeile ohne Text.
   ------------------------------------------------------------------------ */
@font-face{font-family:"Barlow";font-style:normal;font-weight:300;font-display:swap;src:url("schrift/barlow-300.woff2") format("woff2")}
@font-face{font-family:"Barlow";font-style:normal;font-weight:400;font-display:swap;src:url("schrift/barlow-400.woff2") format("woff2")}
@font-face{font-family:"Barlow";font-style:normal;font-weight:600;font-display:swap;src:url("schrift/barlow-600.woff2") format("woff2")}

/* ---------------------------------------------------------------------------
   Grundwerte = Bubble hell. Sie stehen auf dem nackten :root, damit eine
   Seite auch dann lesbar bleibt, wenn thema.js nicht läuft (gesperrtes
   Skript, Fehler davor). Jeder Name, der unten in einem Merkmal-Block
   umdefiniert wird, steht HIER zuerst - eine Farbe, die es nur im
   Merkmal-Block gibt, fehlt genau in dem Fall, in dem es darauf ankommt.
   ------------------------------------------------------------------------ */
:root{
  /* Formen und Schrift (je Stil, nicht je Modus) */
  --st-schrift-kopf:"Barlow",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --st-gewicht-kopf:300;
  --st-schrift-text:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --st-r-kachel:16px;   /* Kacheln, Kennzahlen, Listenzeilen */
  --st-r-karte:20px;    /* große Karten */
  --st-r-eingabe:14px;  /* Felder, Hinweiskästen */
  --st-r-knopf:999px;   /* Bubble: Kapseln. Chocolate: 12px */
  --st-r-block:9px;     /* Zeitblöcke im Raster */
  --st-blur:blur(10px); /* nur Glas: Kopf, Kapseln, FABs, untere Leiste */

  /* Flächen */
  --st-grund:#e9efed;
  --st-grund-bild:radial-gradient(120% 45% at 10% 0%,rgba(110,170,210,.30),transparent 60%);
  --st-flaeche:#f7faf9;            /* Sheets, Leisten, Schrittknöpfe */
  --st-kachel:rgba(255,255,255,.72);
  --st-kachel-rand:rgba(20,50,50,.08);
  --st-karte:rgba(255,255,255,.60);
  --st-karte-rand:rgba(20,50,50,.08);
  --st-eingabe:rgba(255,255,255,.85);
  --st-spur:rgba(20,45,45,.07);    /* Balkenspur, Segment-Untergrund, Hinweis neutral */
  --st-leiste:rgba(247,250,249,.82); /* schwebende untere Leiste */
  --st-glas:rgba(255,255,255,.66);
  --st-glas-rand:rgba(20,45,45,.12);
  --st-linie:rgba(20,45,45,.13);
  --st-schraffur:rgba(20,45,45,.07);

  /* Schrift */
  --st-text:#17201e;
  --st-gedaempft:#55625f;

  /* Akzent und Knöpfe */
  --st-akzent:#17766a;             /* Türkis, für hell abgedunkelt (Kontrast 4,5:1) */
  --st-haupt:#3a6b5c;              /* Salbeigrün: Speichern, Hauptknopf */
  --st-haupt-text:#ffffff;

  /* Markierung = "das hier ist gewählt / heute". Bubble: Farbring,
     Chocolate: gefüllt. Ein Baustein (.st-markiert) für beide - der Ring
     ist ein Verlauf im Rand, die Füllung ein Verlauf aus einer Farbe. */
  --st-ring:conic-gradient(#2fb3a0,#b3bd45,#2fb3a0);
  --st-markiert-innen:#f7faf9;
  --st-markiert-text:#17201e;

  /* Bedeutung - getrennt vom Akzent. Rot heißt "fehlt/Fehler", Ocker
     heißt "Achtung/nie gezählt". Nie eins für das andere. */
  --st-warn:#94540f; --st-warn-grund:#f6ecdf; --st-warn-linie:#ead6bd;
  --st-fehler:#b0412f;
  --st-gut:#276a47;

  /* Tiefe */
  --st-schatten-kachel:0 1px 2px rgba(20,45,45,.05);
  --st-schatten-block:inset 0 1px 0 rgba(255,255,255,.28),0 2px 5px rgba(20,45,45,.18);
  --st-schatten-schwebend:0 4px 14px rgba(20,45,45,.18);

  /* Themenfarben. --st-f-* als Schrift/Strich/Blockfläche, --st-fb-* als
     ruhiger Grund dahinter. Die Namen folgen den bisherigen Klassen
     .f-prim, .f-blau ... (index.html); Lernfeld A-D (kursplan, planer,
     heute) wird in der Brücke auf prim/blau/rot/lila abgebildet. */
  --st-f-prim:#12514a;--st-fb-prim:#e7eeed; --st-f-blau:#2a5f97;--st-fb-blau:#eaeff5; --st-f-rot:#a63e33;--st-fb-rot:#f6eceb; --st-f-lila:#664f9c;--st-fb-lila:#f0edf5; --st-f-gruen:#33752f;--st-fb-gruen:#ebf1ea; --st-f-ocker:#86601a;--st-fb-ocker:#f3efe8; --st-f-tuerkis:#17737b;--st-fb-tuerkis:#e8f1f2; --st-f-grau:#5f6d6a;--st-fb-grau:#eff0f0;
  /* Seit dem Umbau 07.10.2026 dazu: */
  --st-haupt-tief:#2f5a4d;          /* Hauptfläche gedrückt / Hover */
  --st-sanft:#e8efec;               /* zweite, ruhige Fläche auf einer Karte */
  --st-signal:#9a3412;              /* Fläche mit weißer Schrift: Bearbeiten-Leiste, "wichtig" */
  --st-signal-text:#9a3412;         /* dieselbe Bedeutung als Schrift */
  --st-signal-grund:#f8ebe2;
  --st-gut-grund:#e3efe8; --st-gut-linie:#bcd9c8;
  --st-schatten-karte:0 1px 2px rgba(20,45,45,.05),0 10px 24px -12px rgba(20,45,45,.22);
  /* Blöcke mit weißer Schrift: im Dunkeln wird die Themenfarbe für die
     FLÄCHE abgedunkelt, sonst trägt sie keine weiße Schrift. */
  --st-block-abdunkeln:0%;
}

/* ===================== Bubble ===================== */
:root[data-stil="bubble"]{
  --st-schrift-text:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --st-schrift-kopf:"Barlow",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --st-gewicht-kopf:300;
  --st-r-kachel:16px; --st-r-karte:20px; --st-r-eingabe:14px; --st-r-knopf:999px; --st-r-block:9px;
  --st-blur:blur(10px);
}
/* Bubble hell - neu entworfen, im Kalender gibt es nur dunkel */
:root[data-stil="bubble"][data-thema="hell"]{
  --st-grund:#e9efed;
  --st-grund-bild:radial-gradient(120% 45% at 10% 0%,rgba(110,170,210,.30),transparent 60%);
  --st-flaeche:#f7faf9; --st-kachel:rgba(255,255,255,.72); --st-kachel-rand:rgba(20,50,50,.08);
  --st-karte:rgba(255,255,255,.60); --st-karte-rand:rgba(20,50,50,.08); --st-eingabe:rgba(255,255,255,.85);
  --st-spur:rgba(20,45,45,.07); --st-leiste:rgba(247,250,249,.82);
  --st-glas:rgba(255,255,255,.66); --st-glas-rand:rgba(20,45,45,.12);
  --st-linie:rgba(20,45,45,.13); --st-schraffur:rgba(20,45,45,.07);
  --st-text:#17201e; --st-gedaempft:#55625f;
  --st-akzent:#17766a; --st-haupt:#3a6b5c; --st-haupt-text:#ffffff;
  --st-ring:conic-gradient(#2fb3a0,#b3bd45,#2fb3a0); --st-markiert-innen:#f7faf9; --st-markiert-text:#17201e;
  --st-warn:#94540f; --st-warn-grund:#f6ecdf; --st-warn-linie:#ead6bd; --st-fehler:#b0412f; --st-gut:#276a47;
  --st-schatten-kachel:0 1px 2px rgba(20,45,45,.05);
  --st-schatten-block:inset 0 1px 0 rgba(255,255,255,.28),0 2px 5px rgba(20,45,45,.18);
  --st-schatten-schwebend:0 4px 14px rgba(20,45,45,.18);
  --st-f-prim:#12514a;--st-fb-prim:#e7eeed; --st-f-blau:#2a5f97;--st-fb-blau:#eaeff5; --st-f-rot:#a63e33;--st-fb-rot:#f6eceb; --st-f-lila:#664f9c;--st-fb-lila:#f0edf5; --st-f-gruen:#33752f;--st-fb-gruen:#ebf1ea; --st-f-ocker:#86601a;--st-fb-ocker:#f3efe8; --st-f-tuerkis:#17737b;--st-fb-tuerkis:#e8f1f2; --st-f-grau:#5f6d6a;--st-fb-grau:#eff0f0;
  --st-haupt-tief:#2f5a4d; --st-sanft:#e8efec;
  --st-signal:#9a3412; --st-signal-text:#9a3412; --st-signal-grund:#f8ebe2;
  --st-gut-grund:#e3efe8; --st-gut-linie:#bcd9c8;
  --st-schatten-karte:0 1px 2px rgba(20,45,45,.05),0 10px 24px -12px rgba(20,45,45,.22);
  --st-block-abdunkeln:0%;
}
/* Bubble dunkel - die Werte aus CaleConnect "Bubble Light" */
:root[data-stil="bubble"][data-thema="dunkel"]{
  --st-grund:#14181b;
  --st-grund-bild:radial-gradient(120% 45% at 10% 0%,rgba(40,90,140,.45),transparent 60%);
  --st-flaeche:#1d2327; --st-kachel:rgba(255,255,255,.045); --st-kachel-rand:rgba(255,255,255,.07);
  --st-karte:rgba(255,255,255,.035); --st-karte-rand:rgba(255,255,255,.08); --st-eingabe:rgba(0,0,0,.22);
  --st-spur:rgba(255,255,255,.06); --st-leiste:rgba(26,32,36,.86);
  --st-glas:rgba(20,26,30,.72); --st-glas-rand:rgba(255,255,255,.16);
  --st-linie:rgba(255,255,255,.10); --st-schraffur:rgba(255,255,255,.06);
  --st-text:#eef2f0; --st-gedaempft:#b7c1be;
  --st-akzent:#7fd6c8; --st-haupt:#3a6b5c; --st-haupt-text:#ffffff;
  --st-ring:conic-gradient(#7fd6c8,#c9d27a,#7fd6c8); --st-markiert-innen:#1d2327; --st-markiert-text:#eef2f0;
  --st-warn:#e8b27a; --st-warn-grund:rgba(232,178,122,.09); --st-warn-linie:rgba(232,178,122,.28); --st-fehler:#ef8a7f; --st-gut:#7fcfa3;
  --st-schatten-kachel:none;
  --st-schatten-block:inset 0 1px 0 rgba(255,255,255,.18),0 2px 6px rgba(0,0,0,.35);
  --st-schatten-schwebend:0 4px 14px rgba(0,0,0,.35);
  --st-f-prim:#4fa392;--st-fb-prim:#1c2b2c; --st-f-blau:#6c9bd2;--st-fb-blau:#202a35;
  --st-f-rot:#d9786c;--st-fb-rot:#302526;   --st-f-lila:#a08ac9;--st-fb-lila:#282833;
  --st-f-gruen:#7fbf7a;--st-fb-gruen:#232f28; --st-f-ocker:#d2a85a;--st-fb-ocker:#2f2c24;
  --st-f-tuerkis:#5fc2c9;--st-fb-tuerkis:#1e3033; --st-f-grau:#a9b6b3;--st-fb-grau:#292e30;
  --st-haupt-tief:#2f594c; --st-sanft:#252c30;
  --st-signal:#a8461f; --st-signal-text:#f0906a; --st-signal-grund:rgba(240,144,106,.10);
  --st-gut-grund:rgba(127,207,163,.10); --st-gut-linie:rgba(127,207,163,.30);
  --st-schatten-karte:none;
  --st-block-abdunkeln:40%;
}

/* ===================== Chocolate ===================== */
:root[data-stil="chocolate"]{
  --st-schrift-text:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --st-schrift-kopf:"Roboto Flex",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --st-gewicht-kopf:700;
  --st-r-kachel:12px; --st-r-karte:14px; --st-r-eingabe:12px; --st-r-knopf:12px; --st-r-block:8px;
  --st-blur:none;  /* Chocolate ist plastisch, nicht gläsern */
}
:root[data-stil="chocolate"][data-thema="hell"]{
  --st-grund:#fff8f4;
  --st-grund-bild:linear-gradient(180deg,#f4e3d6 0,#fff8f4 280px);
  --st-flaeche:#f3e6dc; --st-kachel:#f6ebe2; --st-kachel-rand:#e6d5c8;
  --st-karte:#f6ebe2; --st-karte-rand:#e6d5c8; --st-eingabe:#fffaf6;
  --st-spur:#ead9cc; --st-leiste:#f3e6dc;
  --st-glas:#f3e6dc; --st-glas-rand:#e0cfc3;
  --st-linie:#e0cfc3; --st-schraffur:#ead9cc;
  --st-text:#211a15; --st-gedaempft:#6a5d55;
  --st-akzent:#8b5a2b; --st-haupt:#8b5a2b; --st-haupt-text:#fff8f4;
  /* "Heute" gefüllt dunkel wie im Kalender. Offen (Jan): das Kurs-Kürzel
     auf der Startseite hell evtl. im Braun statt fast schwarz - der
     schwarze Kreis ist dort das schwerste Element der Seite. */
  --st-ring:linear-gradient(#211a15,#211a15); --st-markiert-innen:#211a15; --st-markiert-text:#fff8f4;
  --st-warn:#8b5a2b; --st-warn-grund:#f8e9d9; --st-warn-linie:#e9d0b5; --st-fehler:#a23a23; --st-gut:#436a2b;
  --st-schatten-kachel:inset 0 1px 0 rgba(255,255,255,.75),0 1px 2px rgba(90,55,30,.16),0 2px 6px rgba(90,55,30,.06);
  --st-schatten-block:inset 0 1px 0 rgba(255,255,255,.22),0 1px 2px rgba(60,30,10,.28);
  --st-schatten-schwebend:0 4px 14px rgba(90,55,30,.22);
  --st-f-prim:#2f6b5e;--st-fb-prim:#eaf0ef; --st-f-blau:#41648a;--st-fb-blau:#ecf0f3; --st-f-rot:#a84a36;--st-fb-rot:#f6edeb; --st-f-lila:#76598f;--st-fb-lila:#f1eef4; --st-f-gruen:#4c6e2f;--st-fb-gruen:#edf0ea; --st-f-ocker:#86601f;--st-fb-ocker:#f3efe9; --st-f-tuerkis:#356d72;--st-fb-tuerkis:#ebf0f1; --st-f-grau:#6a5d55;--st-fb-grau:#f0efee;
  --st-haupt-tief:#6f4620; --st-sanft:#ecdccf;
  --st-signal:#9a3412; --st-signal-text:#9a3412; --st-signal-grund:#f8e6da;
  --st-gut-grund:#e8eedd; --st-gut-linie:#c8d6b4;
  --st-schatten-karte:inset 0 1px 0 rgba(255,255,255,.75),0 1px 2px rgba(90,55,30,.16),0 6px 16px -6px rgba(90,55,30,.18);
  --st-block-abdunkeln:0%;
}
:root[data-stil="chocolate"][data-thema="dunkel"]{
  --st-grund:#211a15;
  --st-grund-bild:linear-gradient(180deg,#2c221b 0,#211a15 280px);
  --st-flaeche:#2f2620; --st-kachel:#2f2620; --st-kachel-rand:#3a302a;
  --st-karte:#2a221c; --st-karte-rand:#3a302a; --st-eingabe:#120e0b;
  --st-spur:#120e0b; --st-leiste:#2a221c;
  --st-glas:#2f2620; --st-glas-rand:#3a302a;
  --st-linie:#3a302a; --st-schraffur:#2b221c;
  --st-text:#efe0d5; --st-gedaempft:#b4a296;
  --st-akzent:#f2bd8f; --st-haupt:#9a6334; --st-haupt-text:#ffffff;
  /* Die Hauptfläche trägt in ALLEN vier Sätzen Weiß. Im Kalender ist der
     Knopf hier pfirsich mit dunkler Schrift - aber die Seiten haben an
     vielen Stellen "Fläche + color:#fff" in einer Regel, und ein Satz,
     der als einziger dunkle Schrift braucht, wäre der eine, den man beim
     nächsten Knopf vergisst. */
  --st-ring:linear-gradient(#efe0d5,#efe0d5); --st-markiert-innen:#efe0d5; --st-markiert-text:#211a15;
  --st-warn:#f2bd8f; --st-warn-grund:#33271d; --st-warn-linie:#4a3828; --st-fehler:#f08a72; --st-gut:#9cc27a;
  --st-schatten-kachel:inset 0 1px 0 rgba(255,255,255,.05),0 1px 2px rgba(0,0,0,.35);
  --st-schatten-block:inset 0 1px 0 rgba(255,255,255,.08),0 1px 2px rgba(0,0,0,.45);
  --st-schatten-schwebend:0 4px 14px rgba(0,0,0,.45);
  --st-f-prim:#5aa592;--st-fb-prim:#292d26; --st-f-blau:#7c9cc2;--st-fb-blau:#2e2c2d;
  --st-f-rot:#d07f68;--st-fb-rot:#3a2821;   --st-f-lila:#a48bbd;--st-fb-lila:#332a2d;
  --st-f-gruen:#8fae66;--st-fb-gruen:#302f20; --st-f-ocker:#d6a660;--st-fb-ocker:#3a2e20;
  --st-f-tuerkis:#6db2b6;--st-fb-tuerkis:#2c2f2c; --st-f-grau:#b4a296;--st-fb-grau:#362d27;
  --st-haupt-tief:#7d4f27; --st-sanft:#382d26;
  --st-signal:#a8442a; --st-signal-text:#f2a07f; --st-signal-grund:#3a2419;
  --st-gut-grund:#26301d; --st-gut-linie:#43552f;
  --st-schatten-karte:inset 0 1px 0 rgba(255,255,255,.05),0 1px 2px rgba(0,0,0,.35),0 6px 16px -6px rgba(0,0,0,.45);
  --st-block-abdunkeln:35%;
}

/* ===========================================================================
   Bausteine. Wenige, und nur die, die in beiden Stilen gleich gebaut sind
   und sich nur in den Werten oben unterscheiden. Alles andere bleibt in
   der Seite.
   ======================================================================== */

/* Der Seitengrund. Grundfarbe UND Bild: Der Lichtschein (Bubble) bzw. der
   Verlauf (Chocolate) liegt HINTER allem und läuft nicht mit. */
.st-seite{background-color:var(--st-grund);background-image:var(--st-grund-bild);background-repeat:no-repeat;background-attachment:scroll;color:var(--st-text);font-family:var(--st-schrift-text)}

/* Markierung: gewählter Reiter, aktiver Chip, heute, Kurs-Kürzel.
   Bubble: 1,5 px Farbring um eine Fläche. Chocolate: gefüllt. Ein Baustein
   für beides - der Rand ist durchsichtig, darunter liegt im Rand der Ring
   (border-box) und innen die Fläche (padding-box). Bei Chocolate sind
   beide Verläufe dieselbe Farbe, also sieht man eine Füllung.

   Die Schriftfarbe steht in DERSELBEN Regel wie der Grund - siehe
   CLAUDE.md, 29.08.2026: ".reiter button.on{color:#fff}" verlor gegen eine
   spätere Regel gleicher Spezifität, und der GEWÄHLTE Reiter war der
   einzige unlesbare. Deshalb hier mit Vorrang. */
.st-markiert{
  border:1.5px solid transparent !important;
  background:linear-gradient(var(--st-markiert-innen),var(--st-markiert-innen)) padding-box,var(--st-ring) border-box !important;
  color:var(--st-markiert-text) !important;
}

/* Kachel: die "Stundenzelle" des Kalenders - Startseite, Kennzahlen,
   Listenzeilen. */
.st-kachel{background:var(--st-kachel);border:1px solid var(--st-kachel-rand);border-radius:var(--st-r-kachel);box-shadow:var(--st-schatten-kachel)}

/* Glas: NUR für Kopfknöpfe, Kapseln, FABs und die schwebende untere
   Leiste. Nie für Listenzeilen - backdrop-filter je Zeile kostet auf
   älteren Android-Geräten spürbar (Erfahrungswert, nicht gemessen; im
   Testlauf auf dem ältesten Gerät nachsehen). */
.st-glas{background:var(--st-glas);border:1px solid var(--st-glas-rand);-webkit-backdrop-filter:var(--st-blur);backdrop-filter:var(--st-blur)}

/* Ausgegraute Zeit / noch nicht dran: diagonal schraffiert wie "zzZ" im
   Kalender. Pausen im Raster, "schon unterrichtet" im Fortschrittsbalken. */
.st-schraffur{background-image:repeating-linear-gradient(135deg,var(--st-schraffur) 0 2px,transparent 2px 9px)}

/* Zahlen und Titel in der Kopfschrift. Bubble dünn, Chocolate kräftig.
   Nie für Fließtext oder Feldbeschriftungen. */
.st-kopf{font-family:var(--st-schrift-kopf);font-weight:var(--st-gewicht-kopf);font-variant-numeric:tabular-nums;letter-spacing:-.01em}

/* Zeitblock / Themen-Kapsel mit weißer Schrift. Die Seite setzt --st-c
   (z. B. style="--st-c:var(--st-f-blau)"). Im Dunkeln wird die Fläche
   abgedunkelt, damit Weiß darauf lesbar bleibt.
   color-mix: Safari ab 16.2, Chrome ab 111. Für ältere Browser steht die
   reine Farbe davor - dann ist der Block im Dunkeln heller, aber da. */
.st-block{background:var(--st-c);background:color-mix(in srgb,var(--st-c),#000 var(--st-block-abdunkeln));color:#fff;border-radius:var(--st-r-block);box-shadow:var(--st-schatten-block)}

/* ===========================================================================
   Brücke für die Teilnehmerseiten (index, logbuch, kursplan, boegen,
   protokoll, datenschutz, impressum).
   ---------------------------------------------------------------------------
   Die sieben Seiten und die gemeinsamen Skripte (ring.js, kacheln.js,
   mitteilung.js) benutzen seit August dieselben alten Namen in derselben
   Bedeutung: --prim ist Schrift/Strich in der Hauptfarbe, --prim-fl die
   FLÄCHE mit weißer Schrift, --card die Karte, --soft die ruhige zweite
   Fläche. Deshalb steht diese Brücke EINMAL hier und nicht siebenmal in
   den Seiten - die Seite meldet sich mit data-bruecke="tn" am <html> an.

   Die Werkzeuge der Kursleitung (Planer, Zähler …) melden sich NICHT an:
   Dort bedeuten dieselben Namen anderes (im Zähler ist --prim die
   Knopffläche). Sie haben ihre Brücke in der eigenen Seite.

   Was NICHT hier steht, bleibt in der Seite: Farben, die nur eine Seite
   kennt (Stufen --s1…--s5 im Logbuch, --aktiv im Protokoll). Die haben
   dort weiter eine helle und eine dunkle Fassung.
   ======================================================================== */
:root[data-bruecke="tn"]{
  --bg:var(--st-grund); --card:var(--st-flaeche); --soft:var(--st-sanft);
  --line:var(--st-linie); --txt:var(--st-text); --muted:var(--st-gedaempft);
  --prim:var(--st-akzent); --prim-d:var(--st-akzent); --prim-l:var(--st-akzent);
  --prim-fl:var(--st-haupt); --prim-fld:var(--st-haupt-tief);
  /* --accent ist SCHRIFT in der Signalfarbe. Als Fläche mit weißer Schrift
     gibt es --st-signal - im Dunkeln sind das zwei verschiedene Farben,
     derselbe Fall wie --prim/--prim-fl. */
  --accent:var(--st-signal-text); --accent-l:var(--st-signal-grund);
  --warn:var(--st-warn);
  --shadow:var(--st-schatten-kachel); --lift1:var(--st-schatten-kachel);
  --lift2:var(--st-schatten-karte); --lift3:var(--st-schatten-schwebend);
  --ok-b:var(--st-gut-grund); --ok-f:var(--st-gut); --ok-l:var(--st-gut-linie);
  --ext-b:var(--st-fb-blau); --ext-f:var(--st-f-blau); --ext-l:var(--st-f-blau);
  --schwebe:var(--st-leiste);
  /* Der Kopf liegt auf dem Seitengrund wie im Kalender - kein Farbbalken
     mehr. Die Namen bleiben, damit eine übersehene Regel keine Lücke
     reißt, sondern nur unauffällig wird. */
  --kopf1:var(--st-grund); --kopf2:var(--st-grund);
  /* Lernfelder A-D und die Ampel der Bögen auf die Themenfarben.
     Lernfeld B seit 10.10.2026 ocker statt rot (Dozententest): Rot steht
     für "stimmt nicht" - Abweichungen, Konflikte, fehlende Planung. Ein
     Lernfeld in derselben Farbe macht aus jedem B-Block eine Warnung. */
  --lfA:var(--st-f-blau); --lfA-b:var(--st-fb-blau);
  --lfB:var(--st-f-ocker); --lfB-b:var(--st-fb-ocker);
  --lfC:var(--st-f-lila); --lfC-b:var(--st-fb-lila);
  --lfD:var(--st-f-gruen); --lfD-b:var(--st-fb-gruen);
  --ja:var(--st-gut); --ja-b:var(--st-gut-grund);
  --teil:var(--st-f-ocker); --teil-b:var(--st-fb-ocker);
  --nein:var(--st-f-rot); --nein-b:var(--st-fb-rot);
  --aupo:var(--st-f-lila); --aupo-b:var(--st-fb-lila); --aupo-l:var(--st-linie);
}

/* ===========================================================================
   Grundregeln ohne Gewicht. :where() hat die Spezifität 0 - jede Regel
   einer Seite gewinnt. Sie fangen nur, was eine Seite NICHT selbst setzt:
   Am 07.10.2026 stand im Logbuch das PIN-Feld weiß im Dunkeln und der Link
   in der Anmeldung im Browserblau, weil die Seite genau diese beiden nie
   gestaltet hatte. Im alten Petrol-Hell fiel das nicht auf.
   ======================================================================== */
:where(a){color:var(--st-akzent)}
:where(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=button]):not([type=submit]),textarea,select){
  background-color:var(--st-eingabe);color:var(--st-text);border:1px solid var(--st-linie)}
:where(input[type=checkbox],input[type=radio],input[type=range],progress){accent-color:var(--st-haupt)}

/* ===========================================================================
   Brücke für die Lagerseiten (zaehlen, packen, heute) - fester Stil Bubble.
   ---------------------------------------------------------------------------
   Die drei haben dieselben Namen in derselben Bedeutung, aber eine andere
   als die Teilnehmerseiten: Hier ist --prim die FLÄCHE (Kopf, Knopf,
   gewählter Chip) mit weißer Schrift. Wo die Seiten --prim als Schrift
   brauchten, steht seit dem 07.10.2026 --st-akzent direkt in der Regel.
   ======================================================================== */
:root[data-bruecke="lager"]{
  --prim:var(--st-haupt);
  --bg:var(--st-grund); --card:var(--st-flaeche); --soft:var(--st-sanft);
  --line:var(--st-linie); --txt:var(--st-text); --muted:var(--st-gedaempft);
  --warn:var(--st-signal-text); --gut:var(--st-gut);
  --lfA:var(--st-f-blau); --lfA-b:var(--st-fb-blau);
  --lfB:var(--st-f-ocker); --lfB-b:var(--st-fb-ocker);
  --lfC:var(--st-f-lila); --lfC-b:var(--st-fb-lila);
  --lfD:var(--st-f-gruen); --lfD-b:var(--st-fb-gruen);
}

/* ===========================================================================
   Brücke für die Schreibtischseiten (planer, verwaltung, lernstaende) -
   fester Stil Chocolate.
   ---------------------------------------------------------------------------
   Wie im Lager ist hier --prim die FLÄCHE (Kopf, Knopf) mit weißer
   Schrift; wo die Seiten --prim als Schrift oder Strich brauchten, steht
   seit dem 07.10.2026 --st-akzent direkt in der Regel. Der Grund ist
   derselbe wie bei --prim/--prim-fl auf den Teilnehmerseiten: Im Dunkeln
   sind Fläche und Schrift zwei verschiedene Farben.
   ======================================================================== */
:root[data-bruecke="schreibtisch"]{
  --prim:var(--st-haupt); --prim-d:var(--st-haupt-tief);
  --accent:var(--st-signal-text); --accent-l:var(--st-signal-grund);
  --bg:var(--st-grund); --card:var(--st-flaeche); --soft:var(--st-sanft);
  --line:var(--st-linie); --txt:var(--st-text); --muted:var(--st-gedaempft);
  --warn:var(--st-warn);
  --shadow:var(--st-schatten-kachel);
  --lfA:var(--st-f-blau); --lfA-b:var(--st-fb-blau);
  --lfB:var(--st-f-ocker); --lfB-b:var(--st-fb-ocker);
  --lfC:var(--st-f-lila); --lfC-b:var(--st-fb-lila);
  --lfD:var(--st-f-gruen); --lfD-b:var(--st-fb-gruen);
}

/* Der Lichtschein (Bubble) bzw. der warme Verlauf (Chocolate) hinter der
   Seite. Die Seiten setzen ihren Grund mit dem Kurzbefehl
   `background:var(--bg)` - der setzt das Bild auf "none". Diese Regel ist
   spezifischer (html[…] body) und gibt das Bild zurück, ohne dass jede
   Seite einzeln angefasst werden muss. Es läuft nicht mit, sondern steht
   oben, wie im Kalender. */
html[data-bruecke] body{background-image:var(--st-grund-bild);background-repeat:no-repeat;background-attachment:scroll}