/* ============================================================
   schule.yanikroesti.ch — Klemmenleiste
   ------------------------------------------------------------
   Die Welt ist eine Hutschiene. Der Schultag ist die Schiene,
   jede Lektion eine Reihenklemme darauf: gleiches Rastermass,
   beschriftetes Markierungsschild, und die Farbe bedeutet eine
   Funktion, statt zu schmuecken.

   Regeln, die diese Datei durchhaelt:
   - Flach. Keine Schlagschatten. Ein Verteilkasten wirft keine.
     Erhoehung wird genau einmal erklaert: durch Linie, nie zusaetzlich
     durch Schatten.
   - Kleine Radien (2-3px), wie Polyamid-Gehaeuse. Keine Pillen ausser
     an echten kleinen Bedienelementen.
   - Monospace nur fuer Messwerte: Zeiten, Countdown, Noten, Raum- und
     Klemmennummern. Nirgends als technisches Kostuem.
   - Feste rem-Stufen. Kein clamp() auf Ueberschriften: das hier ist
     ein Werkzeug, keine Kampagnenseite.

   Fachfarben sind auch in data/subjects.json gespiegelt (fuer SVG/JS).
   Beide Orte gleich halten.
   ============================================================ */

:root {
  /* ---- Faecher: gesaettigte Klemmenfarben, kein Pastell ----
     Angelehnt an die Konvention echter Reihenklemmen, wo die Farbe
     die Funktion nennt: orange = abgesichert/trennbar, blau = Neutral,
     gruen = Schutz, violett = Sonderfunktion, rot = geschaltet.      */
  --s-abt:   #9a4a12;   /* orange  — hier laufen alle Pruefungen */
  --s-htog:  #1b4677;   /* blau    — das Arbeitspferd */
  --s-atd:   #25623f;   /* gruen   — Dokumentation und Telekom */
  --s-abu:   #5b3e8a;   /* violett — Allgemeinbildung */
  --s-sport: #9c3327;   /* rot     — Sport */

  /* ---- Grundflaechen: Innenraum eines Verteilkastens ----
     Kuehles Hellgrau statt warmem Papier. Das ist eine bewusste
     Abkehr: die Vorgaengerversion war cremefarben, und Creme ist
     genau die Voreinstellung, in die dieses Genre immer faellt.  */
  --ground:   #e8eaee;   /* Gehaeuse-Innenseite */
  --plate:    #f6f7f9;   /* Montageplatte — die helle Flaeche */
  --plate-2:  #eef0f3;   /* zweite Ebene: Kopfleiste, Panels */
  --rail:     #97a1ad;   /* verzinkte Hutschiene */
  --rail-2:   #b9c1cb;   /* Schiene, zurueckgenommen */

  --ink:      #14181d;
  --ink-2:    #39414d;
  /* Gemessen: --faint stand auf #69727f und trug auf --ground nur
     4.04:1, auf --plate-2 4.26:1 — beides unter 4.5:1. Geprueft war
     es offenbar nur gegen --plate (4.54:1). Jetzt 5.43 / 4.83 / 5.09. */
  --muted:    #4e5865;   /* 6.74 auf --plate, 6.00 auf --ground */
  --faint:    #5c6674;   /* 5.43 auf --plate, 4.83 auf --ground */
  --line:     #d2d7de;
  --line-2:   #bcc3cd;

  --accent:   #14181d;   /* primaere Aktion, aktive Auswahl */
  --live:     #1d7a4d;   /* laeuft gerade — als Flaeche/Rahmen */
  --live-ink: #155a39;   /* dieselbe Bedeutung als Schrift auf gruen getoentem Grund */
  --warn:     #a8620c;   /* unbestaetigt, offen — als Flaeche/Rahmen */
  --warn-ink: #8a5009;   /* dieselbe Bedeutung als Schrift auf warm getoentem Grund */
  --alert:    #b02a1e;   /* faellig, ungenuegend */

  /* Radien wie Polyamid-Gehaeuse: klein, nicht rund */
  --r-s: 2px;
  --r:   3px;
  --r-l: 4px;

  --pitch: 0.5rem;       /* Rastermass zwischen Klemmen */
  --foot:  3rem;         /* Breite des farbigen Klemmenfusses */
  --strip: 4.5rem;       /* Breite des Markierungsschilds (Zeitspalte) —
                            gemessen am laengsten Label "21.08.": 48px */

  --ease: cubic-bezier(.2, 0, 0, 1);

  /* Eine Familie fuer alles, Mono ausschliesslich fuer Messwerte. */
  --f-ui:   Archivo, "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif;
  --f-data: "Azeret Mono", ui-monospace, SFMono-Regular, Consolas, monospace;

  /* Feste Typo-Stufen, Verhaeltnis ~1.15-1.2
     --t-b stand bis zum 12.09.2026 auf 0.9375rem (15px). Apples Vorgabe
     fuer die Grundschrift auf dem Telefon ist 17 pt, das Minimum 11 pt
     (typography.md > Specifications). 15px liegt dazwischen, aber die
     Seite wird muede, einhaendig und bei schlechtem Licht gelesen — da
     ist die Grundschrift der falsche Ort zum Sparen. Jetzt 16px, auf
     groben Zeigern (Finger) 17px. Die Stufen darueber bleiben. */
  --t-xs:  0.75rem;
  --t-s:   0.8125rem;
  --t-b:   1rem;
  --t-m:   1.0625rem;
  --t-l:   1.25rem;
  --t-xl:  1.5rem;
  --t-2xl: 1.875rem;
  --t-3xl: 2.5rem;

  /* 8px-Basis, damit senkrechter Rhythmus entsteht statt Zufall. */
  --sp-1: 0.5rem;  --sp-2: 0.75rem; --sp-3: 1rem;
  --sp-4: 1.5rem;  --sp-5: 2rem;    --sp-6: 3rem;

  /* Der Pruefungstext lief ueber die volle Klemmenbreite — auf
     1120px sind das ueber 110 Zeichen je Zeile. */
  --measure: 62ch;

  /* Liquid Glass, ausschliesslich fuer die Kopfleiste. Apples Modell
     kennt zwei Ebenen; Glas gehoert nur in die schwebende obere:
     "Don't use Liquid Glass in the content layer" (Materials).
     Die Klemmen sind Inhalt und bleiben flach und deckend. */
  --glass-blur: 24px;
  --glass-sat:  1.4;
  --glass-bg:   rgba(246, 247, 249, 0.72);
  --glass-line: rgba(20, 24, 29, 0.10);
  --glass-hi:   rgba(255, 255, 255, 0.65);

  --wrap: 1120px;
  color-scheme: light;
}

/* ---- Dunkelmodus: derselbe Kasten bei Nacht ----
   Warum hell die Vorgabe ist: die Seite wird im Treppenhaus des BZI
   und im Zug bei Tageslicht einhaendig gelesen. Der Abendtisch ist der
   zweite Fall, nicht der erste.                                        */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground:   #10131a;
    --plate:    #181c24;
    --plate-2:  #1f242d;
    --rail:     #55606e;
    --rail-2:   #3c4552;
    --ink:      #e7eaef;
    --ink-2:    #b6bdc8;
    --muted:    #8792a1;
    --faint:    #7b8697;
    --line:     #2a303a;
    --line-2:   #3a4250;
    --accent:   #e7eaef;
    --live:     #4bbd85;
    --live-ink: #4bbd85;
    --warn:     #d99a3a;
    --warn-ink: #d99a3a;
    --alert:    #e5695c;
    --s-abt:   #e08034;
    --s-htog:  #5a95d8;
    --s-atd:   #4aa872;
    --s-abu:   #9b7ad0;
    --s-sport: #dd6355;
    /* Glas bei Nacht. Muss in BEIDEN Dunkelbloecken stehen, sonst
       traegt die Leiste im System-Dunkelmodus den hellen Fond. */
    --glass-bg:   rgba(24, 28, 36, 0.72);
    --glass-line: rgba(231, 234, 239, 0.12);
    --glass-hi:   rgba(231, 234, 239, 0.10);
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --ground:   #10131a;
  --plate:    #181c24;
  --plate-2:  #1f242d;
  --rail:     #55606e;
  --rail-2:   #3c4552;
  --ink:      #e7eaef;
  --ink-2:    #b6bdc8;
  --muted:    #8792a1;
  --faint:    #7b8697;
  --line:     #2a303a;
  --line-2:   #3a4250;
  --accent:   #e7eaef;
  --live:     #4bbd85;
  --live-ink: #4bbd85;
  --warn:     #d99a3a;
  --warn-ink: #d99a3a;
  --alert:    #e5695c;
  --s-abt:   #e08034;
  --s-htog:  #5a95d8;
  --s-atd:   #4aa872;
  --s-abu:   #9b7ad0;
  --s-sport: #dd6355;
  /* Glas bei Nacht. Muss in BEIDEN Dunkelbloecken stehen, sonst
     traegt die Leiste im System-Dunkelmodus den hellen Fond. */
  --glass-bg:   rgba(24, 28, 36, 0.72);
  --glass-line: rgba(231, 234, 239, 0.12);
  --glass-hi:   rgba(231, 234, 239, 0.10);
  color-scheme: dark;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--f-ui);
  font-size: var(--t-b);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--f-ui);
  font-weight: 700;
  line-height: 1.2;
  margin: 0;
  letter-spacing: -0.015em;
}
h1 { font-size: var(--t-2xl); }
h2 { font-size: var(--t-xl); }
h3 { font-size: var(--t-l); }
h4 { font-size: var(--t-m); }
p { margin: 0 0 0.9em; }
a { color: inherit; text-underline-offset: 0.22em; text-decoration-thickness: 1px; }
img, svg { max-width: 100%; }
table { border-collapse: collapse; width: 100%; }
button { font: inherit; color: inherit; }
code, kbd {
  font-family: var(--f-data); font-size: 0.9em;
  background: var(--plate-2); border: 1px solid var(--line);
  border-radius: var(--r-s); padding: 0.05em 0.32em;
}

/* ---------- Browser-Oberflaechen ----------
   Auswahl, Cursor, Fokusring, Bildlaufleiste: Teile, die man nicht
   selbst zeichnet und die sonst mit Browser-Standards ausliefern, die
   zu keinem Entwurf gehoeren. Hier gehoeren sie dazu.               */
::selection { background: color-mix(in srgb, var(--s-htog) 26%, transparent); color: var(--ink); }
:root { caret-color: var(--s-abt); scrollbar-color: var(--rail-2) transparent; scrollbar-width: thin; }
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--rail-2); border-radius: 0;
  border: 3px solid var(--ground); background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background: var(--rail); }

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--s-abt);
  outline-offset: 2px;
  border-radius: var(--r-s);
}

/* Sprachumschaltung: nur die aktive Sprache zeigen */
:root[data-l="de"] [lang="en"],
:root[data-l="en"] [lang="de"] { display: none; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 clamp(0.9rem, 3.5vw, 1.75rem); }
.data { font-family: var(--f-data); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.nowrap { white-space: nowrap; }
.muted { color: var(--muted); }

/* ============================================================
   Kopfleiste — flach, eine Haarlinie, kein Glas
   ============================================================ */
.topbar {
  position: sticky; top: 0; z-index: 60;
  background: var(--plate);
  border-bottom: 1px solid var(--line-2);
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .topbar {
    background: var(--glass-bg);
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
    backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
    border-bottom: 1px solid var(--glass-line);
    box-shadow: inset 0 1px 0 var(--glass-hi);
  }
}
/* Scroll-Edge: der Inhalt verlaeuft unter der Leiste, statt anzustossen. */
.topbar::after {
  content: ""; position: absolute; left: 0; right: 0; top: 100%;
  height: 18px; pointer-events: none;
  background: linear-gradient(to bottom,
    color-mix(in srgb, var(--ground) 72%, transparent), transparent);
}
@media (prefers-reduced-transparency: reduce) {
  .topbar { background: var(--plate); -webkit-backdrop-filter: none;
            backdrop-filter: none; border-bottom-color: var(--line-2); box-shadow: none; }
  .topbar::after { display: none; }
}
@media (prefers-contrast: more) {
  .topbar { background: var(--plate); -webkit-backdrop-filter: none;
            backdrop-filter: none; border-bottom: 1px solid var(--ink-2); box-shadow: none; }
  .topbar::after { display: none; }
}
/* Aufteilung wie bei Apple: Zeichen links, Navigation mittig, Werkzeuge
   rechts. Gilt nur oben — unter 660px traegt .botnav die Navigation. */
.topbar .brand { flex: 1 1 0; }
.topbar .tools { flex: 1 1 0; justify-content: flex-end; margin-left: 0; }
.topbar .nav   { margin: 0 auto; gap: 0.15rem; }
.topbar .wrap { display: flex; align-items: center; gap: 1rem; min-height: 54px; }

.brand {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-weight: 700; font-size: var(--t-b); text-decoration: none;
  letter-spacing: -0.02em; min-height: 24px;
}
/* Das Markenzeichen ist ein Schienenstueck mit einer Klemme darauf. */
/* --rail traegt 2.44:1 gegen --plate. Fuer eine Flaeche reicht das, fuer
   eine bedeutungstragende Grafik nicht: WCAG 1.4.11 will 3:1. --muted
   liegt bei 5.68:1 und bleibt trotzdem zurueckgenommen. */
.brand .mk { display: block; width: 18px; height: 18px; color: var(--muted); flex: none; }
.brand i {
  font-style: normal; color: var(--muted); font-weight: 500;
  font-size: var(--t-xs); font-family: var(--f-data); letter-spacing: 0;
}

.nav { display: flex; gap: 0.1rem; margin-left: auto; align-items: center; }
.nav a {
  text-decoration: none; font-size: var(--t-s); font-weight: 500; color: var(--ink-2);
  padding: 0.4rem 0.65rem; border-radius: var(--r-s);
  transition: background 0.14s var(--ease), color 0.14s var(--ease);
}
.nav a:hover { background: var(--plate-2); color: var(--ink); }
.nav a:active { background: var(--line); }
.nav a[aria-current="page"] { background: var(--accent); color: var(--plate); }

/* ============================================================
   Fussschiene — dieselbe Klemmenleiste, an die Daumenkante gelegt
   ------------------------------------------------------------
   Bis zum 12.09.2026 verschwand die obere Leiste unter 660 px
   ersatzlos, und die gesamte Navigation lag im Verteiler hinter
   einem 30x30-Knopf oben rechts. Das ist auf dem Telefon die am
   schwersten erreichbare Ecke; designing-for-ios.md > Best
   practices nennt "the middle or bottom area of the display" als
   den bequemen Bereich. Die Seite wird genau so gelesen:
   einhaendig, stehend, muede.

   Statt eine fremde Tab-Leiste zu importieren, kippt hier das
   eigene Signaturbauteil um 90 Grad: die Schiene liegt als Linie
   an der Oberkante, fuenf Klemmen haengen daran, die aktive traegt
   ihren Fuss unten. Gleiches Rastermass, gleiche Farbregel — die
   Seiten dieser Site haben keine Fachfarbe, darum Akzent statt
   Klemmenfarbe, wie im Verteiler auch.
   ============================================================ */
.botnav {
  display: none;
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 65;
  background: var(--plate);
  border-top: 2px solid var(--rail);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.botnav ul {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(5, 1fr);
}
.botnav a {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 0.16rem; min-height: 56px; padding: 0.3rem 0.15rem 0;
  text-decoration: none; color: var(--muted);
  position: relative;
  transition: color 0.14s var(--ease);
}
.botnav a svg { width: 21px; height: 21px; flex: none; }
.botnav a span {
  font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.01em;
  line-height: 1.1; text-align: center;
}
/* Der Fuss: dasselbe Bauteil wie an der Klemme, nur unten statt links. */
.botnav a::after {
  content: ""; position: absolute; left: 50%; bottom: 0;
  width: 0; height: 3px; background: var(--accent);
  transform: translateX(-50%);
  transition: width 0.16s var(--ease);
}
.botnav a[aria-current="page"] { color: var(--ink); }
.botnav a[aria-current="page"]::after { width: 2.1rem; }
.botnav a:active { background: var(--plate-2); }

@media (max-width: 660px) {
  .botnav { display: block; }
  /* Die Schiene liegt ueber dem Inhalt — sonst endet die letzte Zeile
     jeder Seite darunter. 56 px Leiste plus Geraeterand. */
  body { padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px)); }
}

.tools { display: flex; gap: 0.4rem; align-items: center; margin-left: 0.4rem; }

/* Kleine Bedienelemente duerfen Pillen sein — echte Schalter sind rund. */
.langswitch, .wk-toggle { display: inline-flex; border: 1px solid var(--line-2); border-radius: 999px; overflow: hidden; }
.langswitch button, .wk-toggle button {
  border: 0; background: transparent; cursor: pointer; padding: 0.3rem 0.62rem;
  font-family: var(--f-data); font-size: var(--t-xs); font-weight: 500;
  color: var(--muted); transition: background 0.14s var(--ease), color 0.14s var(--ease);
}
.langswitch button:hover, .wk-toggle button:hover { background: var(--plate-2); color: var(--ink); }
.langswitch button[aria-pressed="true"], .wk-toggle button[aria-pressed="true"] {
  background: var(--accent); color: var(--plate);
}

/* Zeitzonen-Waehler. Ein echtes <select>, kein nachgebautes Menue —
   auf dem Handy oeffnet das die Systemauswahl, und die bedient sich
   einhaendig besser als alles Selbstgebaute. */
.tzpick {
  font: inherit; font-size: var(--t-xs); font-family: var(--f-data);
  color: var(--ink-2); background: var(--plate);
  border: 1px solid var(--line-2); border-radius: var(--r-s);
  padding: 0.28rem 0.4rem; max-width: 9.5rem; cursor: pointer;
}
.tzpick:hover { border-color: var(--rail); }
@media (pointer: coarse) { .tzpick { padding: 0.45rem 0.5rem; font-size: var(--t-s); } }
@media (max-width: 480px) {
  .tzpick { max-width: 6.5rem; }
  /* Auf schmalen Schirmen zaehlt jeder Millimeter in der Kopfleiste.
     Die Klasse steht ohnehin auf jeder Seite im Text. */
  .brand i { display: none; }
}

/* Hinweis, wenn die gewaehlte Zone von der Geraetezeit abweicht. Ohne
   den wuerde die Seite still eine andere Zeit zeigen als die Uhr daneben. */
.tzwarn {
  display: flex; align-items: center; gap: 0.45rem;
  font-size: var(--t-s); color: var(--warn-ink);
  border: 1px solid color-mix(in srgb, var(--warn) 40%, transparent);
  background: color-mix(in srgb, var(--warn) 8%, var(--plate));
  border-radius: var(--r); padding: 0.5rem 0.7rem; margin-bottom: 1rem;
}
.tzwarn b { font-weight: 600; }

.iconbtn {
  border: 1px solid var(--line-2); background: transparent; cursor: pointer;
  width: 30px; height: 30px; border-radius: var(--r); display: grid; place-items: center;
  color: var(--muted); transition: color 0.14s var(--ease), border-color 0.14s var(--ease), background 0.14s var(--ease);
}
.iconbtn:hover { color: var(--ink); border-color: var(--line-2); background: var(--plate-2); }
.iconbtn:active { background: var(--line); }
.iconbtn svg { width: 16px; height: 16px; }

/* Der Knopf zeigt, wohin er schaltet, nicht wo man steht: im Hellen
   den Mond, im Dunkeln die Sonne. Vorher stand in beiden Zustaenden
   dieselbe Sonne — ein Schalter, der seinen Zustand verschweigt. */
.iconbtn .ico-sun  { display: none; }
.iconbtn .ico-moon { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .iconbtn .ico-sun  { display: block; }
  :root:not([data-theme="light"]) .iconbtn .ico-moon { display: none; }
}
:root[data-theme="dark"]  .iconbtn .ico-sun  { display: block; }
:root[data-theme="dark"]  .iconbtn .ico-moon { display: none; }
:root[data-theme="light"] .iconbtn .ico-sun  { display: none; }
:root[data-theme="light"] .iconbtn .ico-moon { display: block; }

/* ---- Verteiler ----
   Von dieser Schiene gehen die anderen ab. Das ist kein Menue im
   ueblichen Sinn, sondern eine Abzweigdose: eine kurze Liste eigener
   Seiten, jede mit beschriftetem Fuss in ihrer Farbe — dasselbe
   Bauteil wie ueberall, nur kleiner.                                 */
.vert { position: relative; }
.vertbtn {
  border: 1px solid var(--line-2); background: transparent; cursor: pointer;
  width: 30px; height: 30px; border-radius: var(--r); display: grid; place-items: center;
  color: var(--muted);
  transition: color 0.14s var(--ease), border-color 0.14s var(--ease), background 0.14s var(--ease);
}
.vertbtn:hover { color: var(--ink); border-color: var(--line-2); background: var(--plate-2); }
.vertbtn svg { width: 15px; height: 15px; }
.vertbtn[aria-expanded="true"] {
  background: var(--plate-2); color: var(--ink); border-color: var(--rail);
}

.vertliste {
  position: absolute; top: calc(100% + 7px); right: 0; z-index: 70;
  min-width: 17rem; max-width: min(21rem, calc(100vw - 1.5rem));
  background: var(--plate); border: 1px solid var(--line-2);
  border-radius: var(--r-s); padding: 0.3rem;
  /* Auf dem Handy ist das die ganze Navigation — neun Zeilen passen im
     Querformat nicht mehr aufs Bild. Dann scrollt die Liste selbst,
     statt unten abgeschnitten zu werden. */
  max-height: calc(100vh - 5rem); overflow-y: auto;
  overscroll-behavior: contain;
}
.vertliste[hidden] { display: none; }
.verth {
  font-family: var(--f-data); font-size: 0.625rem; color: var(--ink-2);
  text-transform: uppercase; letter-spacing: 0.06em;
  padding: 0.4rem 0.45rem 0.45rem;
  border-bottom: 1px solid var(--line); margin-bottom: 0.3rem;
}
.verth.zweite { margin-top: 0.5rem; }

/* Die Seiten dieser Site brauchen keinen Farbfuss — sie haben keine
   Fachfarbe. Schmalere Zeile, gleiche Hoehe fuer den Finger. */
.vertz.klein {
  grid-template-columns: minmax(0, 1fr) auto;
  min-height: 40px; padding-top: 0.3rem; padding-bottom: 0.3rem;
}
.vertz.klein .vt b { font-weight: 500; }
.vertz.klein[aria-current="page"] .vt b { font-weight: 700; }

/* Die Zeitzone im Verteiler: eine Zeile, volle Breite, nicht anklickbar
   als Ganzes — das Auswahlfeld darin macht die Arbeit. */
.vertz.zeile { display: block; padding: 0.3rem 0.45rem 0.45rem; }
.vertz.zeile:hover { background: transparent; }
.vertz.zeile .tzpick { width: 100%; max-width: none; }
.vertz {
  display: grid; grid-template-columns: 2.7rem minmax(0, 1fr) auto; gap: 0.55rem;
  align-items: center; text-decoration: none; color: inherit;
  padding: 0.42rem 0.45rem; border-radius: var(--r-s); min-height: 44px;
  transition: background 0.12s var(--ease);
}
.vertz:hover { background: var(--plate-2); }
.vertz .fuss {
  font-family: var(--f-data); font-size: 0.625rem; font-weight: 600;
  color: #fff; background: var(--c, var(--rail));
  border-radius: var(--r-s); padding: 0.18rem 0; text-align: center;
  letter-spacing: 0.02em;
}
:root[data-theme="dark"] .vertz .fuss { color: var(--ground); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .vertz .fuss { color: var(--ground); }
}
.vertz .vt { min-width: 0; }
.vertz .vt b {
  display: block; font-size: var(--t-s); font-weight: 600; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.vertz .vt span {
  display: block; font-size: var(--t-xs); color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.vertz .ext { color: var(--ink-2); font-size: var(--t-xs); font-family: var(--f-data); }
.vertz[aria-current="page"] { background: var(--plate-2); }
.vertz[aria-current="page"] .ext { color: var(--live-ink); font-weight: 600; }

@media (max-width: 480px) {
  .vertliste { right: -0.4rem; min-width: 15rem; }
}

/* ============================================================
   DIE SCHIENE — das tragende Element
   ------------------------------------------------------------
   .rail   Ein Abschnitt Hutschiene. Die senkrechte Linie ist die
           Schiene selbst; alles klemmt daran.
   .term   Eine Reihenklemme. Kein Kaertchen: sie hat einen farbigen
           Fuss, der das Fach nennt, ein Markierungsschild mit der
           Zeit, und einen Koerper.
   ============================================================ */

.rail {
  position: relative;
  padding-left: var(--strip);
  margin: 0;
}
/* Die Schiene mit ihren Endhaltern in einem Element:
   die 2px-Linie sitzt als Hintergrund in der Mitte der Box, die
   Endhalter sind deren Ober- und Unterkante. Die Box ist so gelegt,
   dass die Linie genau dort landet, wo die Klemmfuesse ankommen. */
.rail::before {
  content: "";
  position: absolute;
  left: calc(var(--strip) - 1.15rem);
  top: 0; bottom: 0;
  width: 0.8rem;
  border-top: 2px solid var(--rail);
  border-bottom: 2px solid var(--rail);
  background: linear-gradient(var(--rail), var(--rail)) no-repeat center / 2px 100%;
}
/* Fortlaufende Schiene ohne sichtbares Ende (z. B. gestueckelte Ansicht). */
.rail.no-cap::before { border-top: 0; border-bottom: 0; }

.rail > * + * { margin-top: var(--pitch); }

/* Schmale Schiene: fuer Klemmen ohne Uhrzeit, damit keine tote
   Spalte stehen bleibt (Lernpakete, Material). */
.rail.tight { --strip: 1.2rem; }

/* ---- Eine Klemme ---- */
.term {
  position: relative;
  display: grid;
  grid-template-columns: var(--foot) minmax(0, 1fr) auto;
  align-items: stretch;
  background: var(--plate);
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  min-height: 3.1rem;
  text-decoration: none;
  color: inherit;
}
/* Der Klemmfuss greift die Schiene: kurze Verbindung nach links. */
.term::before {
  content: "";
  position: absolute;
  left: -0.76rem; top: 50%;
  width: 0.75rem; height: 2px;
  background: var(--rail);
  transform: translateY(-50%);
}
/* Das Markierungsschild liegt links neben der Schiene, in der Zeitspalte. */
.term > .strip {
  position: absolute;
  left: calc(-1 * var(--strip));
  top: 0;
  width: calc(var(--strip) - 1.35rem);
  padding-top: 0.62rem;
  text-align: right;
  font-family: var(--f-data);
  font-variant-numeric: tabular-nums;
  font-size: var(--t-xs);
  color: var(--muted);
  letter-spacing: -0.02em;
}
.term > .strip b { display: block; font-weight: 600; color: var(--ink-2); }
.term > .strip span { display: block; font-size: 0.7rem; color: var(--muted); }

/* Der farbige Fuss — traegt das Fachkuerzel. Das ist ein Bauteil,
   kein Zierstreifen: er ist beschriftet und traegt die Funktion. */
.term > .fuss {
  background: var(--c, var(--rail));
  color: #fff;
  border-radius: calc(var(--r) - 1px) 0 0 calc(var(--r) - 1px);
  display: grid;
  place-items: center;
  font-family: var(--f-data);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  padding: 0.3rem 0.15rem;
  text-align: center;
  line-height: 1.1;
  overflow: hidden;
}

.term > .body {
  padding: 0.6rem 0.85rem;
  min-width: 0;
  display: flex; flex-direction: column; justify-content: center; gap: 0.1rem;
}
/* Deutsche Komposita sind laenger als die Spalte: Werkstoffkunde,
   Arbeitssicherheit, Telekommunikation, Allgemeinbildung. Ohne
   Trennung schiebt ein einzelnes Wort ueber den Rand. */
.term .tt, .term .sub, .bare, .index a b {
  overflow-wrap: break-word;
  hyphens: auto;
}
.term .tt { font-weight: 600; font-size: var(--t-b); letter-spacing: -0.01em; line-height: 1.35; }
/* Die Nebenzeile traegt bei Pruefungen den ganzen Stoff — auf 1120px
   waren das ueber 110 Zeichen in einer Zeile. */
.term .sub {
  font-size: var(--t-s); color: var(--muted);
  max-width: var(--measure); line-height: 1.5; margin-top: 0.15rem;
}
.term .sub b { color: var(--ink-2); font-weight: 500; }

.term > .aside {
  padding: 0.6rem 0.85rem 0.6rem 0.5rem;
  display: flex; flex-direction: column; align-items: flex-end; justify-content: center;
  gap: 0.15rem; text-align: right;
  border-left: 1px solid var(--line);
}
.term .rm {
  font-family: var(--f-data); font-size: var(--t-xs); color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.term .val {
  font-family: var(--f-data); font-variant-numeric: tabular-nums;
  font-size: var(--t-m); font-weight: 600; letter-spacing: -0.03em; white-space: nowrap;
}
.term .val u { text-decoration: none; font-size: var(--t-xs); font-weight: 400; color: var(--muted); }

/* Zustaende */
a.term, button.term { cursor: pointer; transition: border-color 0.14s var(--ease), background 0.14s var(--ease); }
a.term:hover, button.term:hover { border-color: var(--rail); background: var(--plate-2); }
a.term:active, button.term:active { background: var(--line); }

.term.live { border-color: var(--live); }
.term.live .val { color: var(--live-ink); }
.term.soon .val { color: var(--alert); }
.term.warn .val { color: var(--warn-ink); }
.term.done { opacity: 0.55; }
.term.done .tt { text-decoration: line-through; text-decoration-color: var(--faint); }
/* Faellig gewesen: nimmt sich zurueck, ohne durchgestrichen zu sein —
   erledigt ist etwas anderes als vorbei. Trifft nur den Kalender; die
   Schienen filtern Vergangenes weg. */
.term.vorbei { opacity: 0.6; }
.term[aria-disabled="true"] { opacity: 0.5; pointer-events: none; }

/* Die dominante Klemme: die naechste Lektion.
   Das ist die Anleihe bei der Abfahrtstafel — eine Zeile beherrscht
   die Tafel, waehrend eine echte Klemmleiste alle gleich behandelt. */
.term.lead { min-height: 6.4rem; border-width: 2px; border-color: var(--ink-2); }
.term.lead > .fuss { font-size: var(--t-s); }
.term.lead .tt { font-size: var(--t-xl); font-weight: 700; }
.term.lead .sub { font-size: var(--t-b); }
.term.lead .val { font-size: var(--t-3xl); font-weight: 700; }
.term.lead.live { border-color: var(--live); }

/* ---- Querbruecker: zwei Klemmen am selben Knoten ----
   Fachlich: aufeinanderfolgende Lektionen derselben Lehrperson.
   Die Bruecke sitzt in der Luecke zwischen beiden Klemmen und
   verbindet sie sichtbar, statt sie nur nebeneinander zu legen.   */
.rail > .bridge { margin-top: 0; }
.rail > .bridge + * { margin-top: 0; }
.bridge {
  position: relative;
  height: var(--pitch);
}
.bridge::before {
  content: "";
  position: absolute;
  left: calc(var(--foot) / 2 - 1.5px);
  top: -2px; bottom: -2px;
  border-left: 3px solid var(--c, var(--rail-2));
}

/* ---- Trennplatte: Gruppenwechsel (andere Lehrperson) ----
   Die Beschriftung sitzt links, die gestrichelte Platte laeuft
   nach rechts aus. Ein kurzer Steg links bindet sie an die Schiene. */
.part {
  position: relative;
  display: flex; align-items: center; gap: 0.6rem;
  margin: 1.1rem 0 0.15rem;
}
.rail > .part:first-child { margin-top: 0; }
.part::before {
  content: "";
  position: absolute;
  left: -0.76rem; top: 50%;
  width: 0.75rem; height: 1px;
  background: var(--rail-2);
}
.part::after { content: ""; flex: 1; border-top: 1px dashed var(--line-2); }
.part > span { flex: none; }
.part a { display: inline-flex; align-items: center; min-height: 24px; }
/* 0.6875rem (11px) war genau das Minimum aus typography.md; fuer eine
   anklickbare Grossbuchstaben-Zeile ist das der falsche Ort dafuer. */
.part a, .part > span > span {
  font-size: var(--t-xs); font-weight: 600;
  letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--muted); text-decoration: none;
}
.part a:hover { color: var(--ink); text-decoration: underline; }

/* ---- Leere Schiene: Ferien, Feiertag, nichts faellig ----
   Lehrt die Oberflaeche, statt "nichts da" zu sagen. */
.bare {
  position: relative;
  padding: 1.5rem 0.85rem 1.5rem 0;
  color: var(--muted);
  font-size: var(--t-s);
}
.bare b { display: block; color: var(--ink-2); font-size: var(--t-b); font-weight: 600; margin-bottom: 0.15rem; }
.bare::before {
  content: "";
  position: absolute;
  left: -0.76rem; top: 50%;
  width: 0.75rem; height: 2px;
  background: var(--rail-2);
  transform: translateY(-50%);
}

/* ============================================================
   Abschnitte
   ============================================================ */
/* Luft zwischen den Abschnitten. Die Dichte *innerhalb* einer Schiene
   bleibt — sie ist das Werkzeug. */
.sect { margin: var(--sp-6) 0; }
.sect-h {
  display: flex; align-items: baseline; gap: 0.7rem;
  margin-bottom: var(--sp-4); padding-bottom: var(--sp-2);
  border-bottom: 1px solid var(--line);
}
.sect-h h2 { font-size: var(--t-l); }
/* Anzahl ist Information, keine Ziffernverzierung. */
.sect-h .count {
  font-family: var(--f-data); font-size: var(--t-xs); color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.sect-h .spacer { flex: 1; }

/* ---------- Panel: ruhige Flaeche fuer Tabellen und Text ---------- */
.panel {
  background: var(--plate);
  border: 1px solid var(--line-2);
  border-radius: var(--r);
}
.panel > .ph {
  padding: 0.7rem 0.95rem;
  border-bottom: 1px solid var(--line);
  background: var(--plate-2);
  border-radius: calc(var(--r) - 1px) calc(var(--r) - 1px) 0 0;
  font-weight: 600; font-size: var(--t-s);
  display: flex; align-items: center; gap: 0.6rem;
}
.panel > .pb { padding: 0.95rem; }

/* ---------- Tabellen ---------- */
.tbl { font-size: var(--t-s); }
.tbl th {
  text-align: left; font-weight: 600; color: var(--muted);
  font-size: var(--t-xs); padding: 0.5rem 0.7rem;
  border-bottom: 1px solid var(--line-2); white-space: nowrap;
}
.tbl td { padding: 0.55rem 0.7rem; border-bottom: 1px solid var(--line); vertical-align: top; }
.tbl tr:last-child td { border-bottom: 0; }
.tbl .num { font-family: var(--f-data); font-variant-numeric: tabular-nums; text-align: right; }
.tbl-scroll { overflow-x: auto; }

/* ---------- Marke fuer Unbestaetigtes ----------
   Unbekannt ist ein Zustand, kein leeres Feld. */
.unconf {
  display: inline-flex; align-items: center; gap: 0.28rem;
  font-size: 0.6875rem; font-weight: 600;
  color: var(--warn-ink);
  border: 1px solid color-mix(in srgb, var(--warn) 45%, transparent);
  border-radius: var(--r-s);
  padding: 0.05rem 0.32rem;
  white-space: nowrap;
}
.unconf::before { content: ""; width: 5px; height: 5px; border-radius: 999px; background: var(--warn); }

/* ---------- Kennzeichnung: Fach als kleine Marke ----------
   Nur dort, wo kein Klemmenfuss zur Verfuegung steht. */
.mark {
  display: inline-flex; align-items: center;
  font-family: var(--f-data); font-size: 0.6875rem; font-weight: 600;
  color: #fff; background: var(--c, var(--rail));
  padding: 0.1rem 0.36rem; border-radius: var(--r-s);
  white-space: nowrap;
}

/* Neutraler Fuss fuer Klemmen ohne Fach (Kennzahlen, Summen). */
.s-neutral { --c: var(--ink-2); }

/* Lernpaket-Status. Stand frueher nur im <style> der Startseite —
   lernpakete.js rendert ihn aber auch auf den Lehrerseiten, wo er
   dadurch voellig unformatiert erschien. Dasselbe Bauteil darf nicht
   an zwei Orten verschieden aussehen. */
.lp-state {
  font-family: var(--f-data); font-size: 0.6875rem; font-weight: 500;
  border: 1px solid var(--line-2); border-radius: var(--r-s);
  padding: 0.02rem 0.3rem; color: var(--muted); white-space: nowrap;
}
.lp-state.aktiv { color: var(--live-ink); border-color: color-mix(in srgb, var(--live) 45%, transparent); }
.lp-state.geplant { color: var(--warn-ink); border-color: color-mix(in srgb, var(--warn) 45%, transparent); }

.s-abt   { --c: var(--s-abt); }
.s-htog  { --c: var(--s-htog); }
.s-atd   { --c: var(--s-atd); }
.s-abu   { --c: var(--s-abu); }
.s-sport { --c: var(--s-sport); }

/* ---- Schrift auf farbigem Grund ----
   Im Hellmodus sind die Fachfarben dunkel genug fuer weisse Schrift.
   Im Dunkelmodus sind sie aufgehellt, damit sie auf dem dunklen Grund
   ueberhaupt lesbar sind — dann traegt weisse Schrift nur noch 2.9:1.
   Dort kehrt die Schrift um und wird dunkel: 5.3:1 bis 6.5:1.        */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .term > .fuss,
  :root:not([data-theme="light"]) .mark { color: var(--ground); }
}
:root[data-theme="dark"] .term > .fuss,
:root[data-theme="dark"] .mark { color: var(--ground); }

/* ---------- Ladezustand: Skelett, kein Kreisel ---------- */
.skel {
  background: var(--plate-2);
  border: 1px solid var(--line);
  border-radius: var(--r);
  min-height: 3.1rem;
  position: relative; overflow: hidden;
}
.skel::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--plate) 70%, transparent), transparent);
  transform: translateX(-100%);
  animation: sweep 1.3s var(--ease) infinite;
}
@keyframes sweep { to { transform: translateX(100%); } }

/* ---------- Fehlerzustand ---------- */
.err {
  border: 1px solid color-mix(in srgb, var(--alert) 45%, transparent);
  background: color-mix(in srgb, var(--alert) 7%, var(--plate));
  border-radius: var(--r);
  padding: 0.8rem 0.95rem;
  font-size: var(--t-s);
}
.err b { display: block; color: var(--alert); margin-bottom: 0.15rem; }

/* ============================================================
   Fusszeile
   ============================================================ */
.foot {
  border-top: 1px solid var(--line-2);
  margin-top: 3.5rem;
  padding: 2.25rem 0 3rem;
  background: var(--plate);
}
.foot .wrap { display: flex; flex-wrap: wrap; gap: 1.75rem 2.75rem; }
.foot .col { min-width: 145px; }
.foot h4 {
  font-size: var(--t-xs); font-weight: 700; color: var(--muted);
  margin-bottom: 0.55rem; letter-spacing: 0.02em;
}
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.3rem; }
.foot a {
  color: var(--ink-2); text-decoration: none; font-size: var(--t-s);
  display: inline-flex; align-items: center; min-height: 24px;
}
.foot a:hover { color: var(--ink); text-decoration: underline; }
.colophon {
  margin-top: 1.75rem; padding-top: 1rem; border-top: 1px solid var(--line);
  font-size: var(--t-xs); color: var(--muted); width: 100%;
}
.colophon b { color: var(--ink-2); font-weight: 600; }

/* ---------- Logo-Leiste ----------
   Die gelieferten Logos sind farblich gemischt: bzi.svg ist weiss,
   Electrosuisse und Etavis sind dunkel. brightness(0) macht jedes zu
   einer flachen Silhouette (Transparenz bleibt), invert(1) dreht sie
   im Dunkelmodus. Einzelne Marke in Originalfarbe: Klasse keep-color. */
.logos { width: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem 2.25rem; margin-top: 1.75rem; }
.logos > * { line-height: 0; display: block; }
.logos img {
  height: 22px; width: auto; display: block;
  filter: brightness(0); opacity: 0.42;
  transition: opacity 0.16s var(--ease);
}
.logos a:hover img { opacity: 0.8; }
.logos .keep-color img { filter: none; opacity: 0.85; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .logos img { filter: brightness(0) invert(1); }
  :root:not([data-theme="light"]) .logos .keep-color img { filter: none; }
}
:root[data-theme="dark"] .logos img { filter: brightness(0) invert(1); }
:root[data-theme="dark"] .logos .keep-color img { filter: none; }

/* ============================================================
   Schmale Schirme
   ============================================================ */
@media (max-width: 660px) {
  :root { --strip: 3.9rem; --foot: 2.6rem; }
  .topbar .wrap {
    flex-wrap: wrap; min-height: 0; gap: 0.45rem;
    padding-top: 0.5rem; padding-bottom: 0.4rem;
  }
  .brand { order: 1; }
  .tools { order: 2; margin-left: auto; }
  /* Die obere Leiste passte auf dem Handy nicht mehr ins Bild: Marke,
     fuenf Reiter, Zeitzone, Sprache und Hell/Dunkel auf 375 px. Die
     Reiter wandern deshalb in den Verteiler — dort stehen sie
     untereinander, lesbar, und die Leiste bleibt eine Zeile. */
  .nav { display: none; }

  .term { grid-template-columns: var(--foot) minmax(0, 1fr); }
  .term > .strip { width: calc(var(--strip) - 1.05rem); font-size: 0.6875rem; }
  .term > .strip span { font-size: 0.625rem; }
  .term > .aside {
    grid-column: 1 / -1;
    border-left: 0; border-top: 1px solid var(--line);
    flex-direction: row; align-items: baseline; justify-content: space-between;
    text-align: left; padding-top: 0.42rem; padding-bottom: 0.42rem;
    /* Countdown und Raumzeile passen bei 375 px nicht nebeneinander.
       Ohne Umbruch schob sich die Raumzeile rechts aus der Klemme und
       die ganze Seite liess sich waagrecht schieben. Lieber zwei Zeilen
       als eine, die aus dem Bild laeuft. */
    flex-wrap: wrap; gap: 0.15rem 0.6rem;
  }
  .term > .aside > * { min-width: 0; }
  .term.lead .val { font-size: var(--t-2xl); }
  .foot .wrap { gap: 1.4rem 2rem; }
}

/* ---------- Touch ----------
   Apples Vorgabe fuer Bedienelemente am Finger ist 44x44 pt, das
   Minimum 28x28 pt (accessibility.md > Controls). Am Zeiger gilt 28x28
   als Vorgabe — darum stehen die kleinen Masse oben und werden erst
   hier angehoben. Bis zum 12.09.2026 endete das bei 32-40 px; das ist
   ueber dem Minimum, aber unter der Vorgabe, und diese Seite wird
   einhaendig im Treppenhaus bedient. Jetzt durchgehend 44. */
@media (pointer: coarse) {
  :root { --t-b: 1.0625rem; }
  .nav a { padding: 0.52rem 0.75rem; font-size: var(--t-b); }
  .part a { display: inline-flex; align-items: center; min-height: 44px; }
  .brand { min-height: 44px; }
  .langswitch button, .wk-toggle button { padding: 0.62rem 0.9rem; font-size: var(--t-s); }
  .iconbtn, .vertbtn { width: 44px; height: 44px; }
  .iconbtn svg, .vertbtn svg { width: 18px; height: 18px; }
  .foot a { display: inline-flex; align-items: center; min-height: 44px; font-size: var(--t-b); }
  .logos img { height: 20px; }
}

/* ---- Druckantwort ----
   Jedes Bedienelement gibt beim Druecken nach: 3 %, 90 ms, eine Achse.
   Grosse Flaechen skalieren NICHT — eine 3 rem hohe Klemme, die
   schrumpft, sieht aus wie ein Fehler; sie wechselt die Tonstufe. */
:root { --press: 0.97; --press-t: 90ms; }

.nav a, .botnav a, .iconbtn, .vertbtn, .langswitch button, .wk-toggle button,
.tinybtn, .knopf, .index a, .term[href], .vertliste a, .tier {
  -webkit-tap-highlight-color: transparent;
  transition: transform var(--press-t) var(--ease),
              background 0.14s var(--ease), color 0.14s var(--ease),
              border-color 0.14s var(--ease);
}
.nav a:active, .botnav a:active, .iconbtn:active, .vertbtn:active,
.langswitch button:active, .wk-toggle button:active,
.tinybtn:active, .knopf:active, .vertliste a:active {
  transform: scale(var(--press));
}
.index a:active, .term[href]:active { transform: none; background: var(--plate-2); }

/* Der Verteiler dreht seine Leitungen, solange er offen ist — die eine
   orchestrierte Bewegung der Seite, und sie sagt etwas. */
.vertbtn svg { transition: transform 0.18s var(--ease); }
.vertbtn[aria-expanded="true"] svg { transform: rotate(90deg); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
  .nav a:active, .botnav a:active, .iconbtn:active, .vertbtn:active,
  .langswitch button:active, .wk-toggle button:active,
  .tinybtn:active, .knopf:active, .vertliste a:active { transform: none; }
  .vertbtn[aria-expanded="true"] svg { transform: none; }
}

@media print {
  .topbar, .foot, .iconbtn, .langswitch, .wk-toggle, .botnav { display: none !important; }
  body { padding-bottom: 0 !important; }
  body { background: #fff; }
  .term, .panel { border-color: #999; break-inside: avoid; }
  .rail::before, .term::before { background: #999; }
}