/* IBM Plex, self-hosted. Service 2 must never call a font CDN. */
@font-face {
  font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('/static/fonts/plex-mono-400-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: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('/static/fonts/plex-mono-400-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: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('/static/fonts/plex-mono-500-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: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('/static/fonts/plex-mono-500-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;
}
/* The 400-named Sans files are variable (wght 100–700), one face per subset. */
@font-face {
  font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 100 700; font-display: swap;
  src: url('/static/fonts/plex-sans-400-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: 'IBM Plex Sans'; font-style: normal; font-weight: 100 700; font-display: swap;
  src: url('/static/fonts/plex-sans-400-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: 'IBM Plex Serif'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('/static/fonts/plex-serif-400-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: 'IBM Plex Serif'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('/static/fonts/plex-serif-400-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: 'IBM Plex Serif'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('/static/fonts/plex-serif-600-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: 'IBM Plex Serif'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('/static/fonts/plex-serif-600-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;
}
/* ───────────────────────────────────────────────────────────────────────────
   §45 design tokens — shared by service 1 and service 2.

   DER BELEUCHTETE WEG. You can always see one step ahead, and it is warm.
   The user arrives exhausted and sceptical; two minutes later they should want
   to open the next screen. Anticipation is the organising idea, so:

   ONE RULE CARRIES THE SYSTEM: --light is scarce and always means
   "the thing ahead of you". The step you are on is lit. The path behind is
   spent and quiet. The path ahead is drawn but not yet lit. Light is never
   spent on decoration, because then it stops meaning anything.

   KEPT ON MERIT from the superseded Leistungsbescheid doctrine: monospace
   marks the evidentiary layer (--font-record via .record), and money is set as
   fact, not accent (.figure). Everything else of that doctrine is cancelled —
   see assets/DESIGN-RULES.md.

   Palette is the Lingoda rebrand (2026-08-03). Every value below was measured
   against its own ground; the ratio is in the comment. Do not substitute an
   untested hex — most of the brand palette fails as text.
   ─────────────────────────────────────────────────────────────────────────── */

:root {
  --paper:          #f4e9ea;   /* warm paper — the ground             */
  --paper-raised:   #fdfbfb;
  --ink:            #1b0338;   /* 15.84:1 on paper                    */
  --ink-2:          #514e4e;   /*  6.94:1 on paper                    */
  --rule:           #cbc2c3;   /* hairline, decorative only           */
  --rule-strong:    #7a7575;   /*  3.82:1 — boundaries that mean sth. */

  /* The light. Scarce by design: the step ahead, and nothing else. */
  --light:          #ae00ff;   /*  4.17:1 — LARGE TEXT / UI / FILL ONLY */
  --light-text:     #7400aa;   /*  7.62:1 — the body-safe purple        */
  --light-soft:     #efccff;   /* fill behind the lit step              */
  --light-on:       #ffffff;   /*  4.95:1 on --light — text ON the fill */
  --light-hover:    #7400aa;   /*  9.04:1 with --light-on               */

  /* The path. Decoration — never carries text. */
  --path-done:      #a39b9c;
  --path-here:      #ae00ff;
  --path-ahead:     #cbc2c3;

  --highlight:      #d5fd44;   /* "you found it" — background only    */
  --info:           #0a5d69;   /*  6.36:1 on paper                    */
  --positive:       #475417;   /*  6.94:1 on paper                    */
  --negative:       #aa2b33;   /*  5.70:1 on paper                    */

  /* DEPRECATED aliases — the Leistungsbescheid names. Kept so existing call
     sites in views.py / calculator.css keep working. Do not use in new code. */
  --ballpoint:      var(--light-text);
  --ballpoint-soft: var(--light-soft);
  --stamp:          var(--negative);
  --stamp-soft:     #fbf0ed;

  --font-display: 'IBM Plex Serif', Georgia, 'Times New Roman', serif;
  --font-ui:      'IBM Plex Sans', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-record:  'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  /* Brand faces pending: F37 Sonic (display) is TRIAL-licensed and must not
     ship; Open Sans (body) needs subsetting into assets/fonts/ first. Both are
     a one-line swap here when cleared — see DESIGN-RULES.md § Typography.    */

  --step--1: 0.82rem;
  --step-0:  1rem;
  --step-1:  1.15rem;
  --step-2:  1.4rem;
  --step-3:  1.85rem;
  --step-4:  clamp(2.1rem, 5vw, 2.75rem);

  --measure: 62ch;
  --radius:  6px;

  /* Hooks the calculator module reads (funnel/module/calculator.css) —
     namespaced so a HubSpot host page cannot collide. Aliases, not copies:
     the dark redefinitions below flow through var(), one list serves both
     modes. calculator.css keeps hex fallbacks — on HubSpot this file is
     absent and the fallbacks ARE the brand. */
  --p45-paper:        var(--paper);
  --p45-paper-raised: var(--paper-raised);
  --p45-ink:          var(--ink);
  --p45-ink-2:        var(--ink-2);
  --p45-rule:         var(--rule);
  --p45-rule-strong:  var(--rule-strong);
  --p45-light:        var(--light);
  --p45-light-text:   var(--light-text);
  --p45-light-soft:   var(--light-soft);
  --p45-light-on:     var(--light-on);
  --p45-light-hover:  var(--light-hover);
  --p45-path-done:    var(--path-done);
  --p45-path-here:    var(--path-here);
  --p45-path-ahead:   var(--path-ahead);
  --p45-highlight:    var(--highlight);
  --p45-stamp:        var(--stamp);
  --p45-stamp-soft:   var(--stamp-soft);
}

/* Dark mode, twice: the OS preference arrives as a media query, an explicit
   choice as [data-theme] on <html>, and CSS cannot OR the two. The :not()
   guard lets an explicit "light" beat a dark OS. Both bodies must stay
   identical — test_web_homepage compares them. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --paper: #1a1223;
    --paper-raised: #2a1f35;
    --paper-sidebar: #1f1629;
    --paper-row: #342840;
    --paper-top: #40324d;
    --ink: #f4eef8;
    --ink-2: #c7bbd3;
    --rule: #54435f;
    --rule-strong: #95859f;
    --light: #ae00ff;
    --light-text: #d6c2e5;
    --light-soft: #40324d;
    --light-on: #ffffff;
    --light-hover: #9100d4;
    --path-done: #54435f;
    --path-here: #c7bbd3;
    --path-ahead: #95859f;
    --highlight: #b6ccd0;
    --info: #a3ced5;
    --positive: #86d2da;
    --negative: #e4b6ad;
    --stamp-soft: #3b2932;
    --player-filter: brightness(.72) sepia(.14) saturate(.92);
    --shadow-raised: 0 6px 24px rgb(0 0 0 / .22);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --paper: #1a1223;
  --paper-raised: #2a1f35;
  --paper-sidebar: #1f1629;
  --paper-row: #342840;
  --paper-top: #40324d;
  --ink: #f4eef8;
  --ink-2: #c7bbd3;
  --rule: #54435f;
  --rule-strong: #95859f;
  --light: #ae00ff;
  --light-text: #d6c2e5;
  --light-soft: #40324d;
  --light-on: #ffffff;
  --light-hover: #9100d4;
  --path-done: #54435f;
  --path-here: #c7bbd3;
  --path-ahead: #95859f;
  --highlight: #b6ccd0;
  --info: #a3ced5;
  --positive: #86d2da;
  --negative: #e4b6ad;
  --stamp-soft: #3b2932;
  --player-filter: brightness(.72) sepia(.14) saturate(.92);
  --shadow-raised: 0 6px 24px rgb(0 0 0 / .22);
}

/* Cross-document view transitions: the "next step" moment, with no JavaScript.
   This is the one motion lever available under script-src 'none'. */
@view-transition { navigation: auto; }

/* ── base ─────────────────────────────────────────────────────────────────── */
* { box-sizing: border-box; }

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

/* Deutsche Komposita sind länger, als ein Telefon breit ist. Gemessen 17.08. bei
   360px auf /staff/team: „Team und Qualifikationsnachweise" braucht 350px in
   einer 305px-Spalte, läuft aus seiner Box heraus und zieht die ganze SEITE
   25px zur Seite — die Überschrift steht dann links angeschnitten. Sichtbar
   wird das nur im Rendering: die Box selbst ist 305px breit und unauffällig.
   `hyphens: auto` greift, weil jedes Dokument hier lang="de" trägt, und trennt
   nach deutschen Regeln; `overflow-wrap` ist der Notausgang für das, was kein
   Silbentrenner brechen darf (URLs, Aktenzeichen, Pseudonyme). Fließtext
   bekommt nur den Notausgang: dort ist die Spalte breit genug, und eine
   Trennung, die niemand braucht, ändert das Satzbild jeder Seite. */
h1, h2, h3 { font-family: var(--font-display); font-weight: 600; line-height: 1.22;
             overflow-wrap: break-word; hyphens: auto; }
p, li, dd, td, th, label, legend, summary,
span, a { overflow-wrap: break-word; }

/* Eine breite Tabelle darf seitwärts laufen — nur nicht die Seite mitnehmen.
   Die Regel stand bis zum 18.08. nur im Kurs-CSS; seit die Betragstabelle der
   Website denselben Rahmen braucht, steht sie hier, wo sich beide Dienste
   bedienen. Der Kasten scrollt, die Seite steht still. */
.tabelle { overflow-x: auto; }

/* Eine E-Mail-Adresse hat keine Trennstelle, die `hyphens` kennt, und
   `break-word` bricht sie erst, wenn sie allein auf einer Zeile steht — im
   Satz „Fragen? pflegekurse@lingoda.com — wir antworten werktags" tut sie das
   nie. Bei 200 % Schriftgröße schob sie deshalb JEDE Seite 17px zur Seite, in
   beiden Diensten. `anywhere` darf mitten im Wort brechen; in einer Fußzeile
   ist das der richtige Preis. */
.pagefoot a, .pagefoot p, footer a { overflow-wrap: anywhere; }

/* Ein Flex- oder Grid-Kind hat `min-width:auto` und kann damit nicht unter die
   Breite seines längsten Wortes schrumpfen — es dehnt stattdessen seinen
   Container, und der schiebt die ganze Seite. Auf Deutsch ist das längste Wort
   lang, und ab 150 % Schriftgröße ist es breiter als ein Telefon. Gemessen
   18.08.: /register ab 150 %, / ab 160 %, /home ab 175 %.

   **Warum pauschal und nicht aufgezählt.** Der erste Versuch war eine Liste der
   bekannten Container. Sie ist in einem einzigen Nachmittag dreimal gerissen:
   erst fehlte `li` (/kursraum-demo), dann lag sie im falschen Stylesheet
   (`APP_CSS` bedient nur die Hülle, /register hat sie nie gesehen), dann fehlten
   `.entry` und `.facts` der Website. Eine Liste, die bei jedem neuen Bildschirm
   still falsch wird, ist keine Regel, sondern eine Wartungsschuld.

   Der Preis ist benannt und geprüft: `min-width:0` überall überschreibt auch
   absichtliche Mindestbreiten. Es gibt genau eine im Repo — `.pillmenu`
   (`views.py`, 15rem) —, und die steht unten wieder her. Kommt eine zweite dazu,
   gehört sie ebenso dorthin; das ist eine Zeile, keine Liste.

   Ein `inline-flex`-Knopf misst sich an seinem Inhalt und kennt seinen Container
   nicht; `max-width:100%` ist dort die Entsprechung zu `min-width:0`. */
main *, footer * { min-width: 0; }
/* `aside` steht bewusst NICHT dabei. Die Seitenleiste ist auf dem Telefon eine
   gewollte Scrollfläche (`overflow-x:auto`), ihre Links sollen dort ihre
   natürliche Breite behalten und seitwärts laufen. Mit dem Reset schrumpften
   sie von 126px auf 48px und die Beschriftungen brachen mitten im Wort —
   gefunden im Pixelvergleich gegen main, nicht im Lauf: die Seite war dabei
   nirgends zu breit, sie war nur kaputt. Die Rasterspur regelt
   `.hk-rahmen>*{min-width:0}` in views.py, und die genügt. */
.next, .btn { max-width: 100%; }
/* `span` und `a` sind am 18.08. dazugekommen, aus derselben Messung wie oben,
   nur eine Stufe weiter: bei 150 % Schriftgröße auf 360px läuft „Ich pflege
   jemanden aus meiner Familie" aus seiner Auswahlkarte heraus, und der Zusatz
   neben „Termin wählen" aus dem Bild. Beide sitzen in einem `span`, das die
   Liste oben nicht kannte. Die Entscheidung darüber — Notausgang ja,
   Silbentrennung im Fließtext nein — bleibt wie sie ist. */
h1 { font-size: var(--step-3); margin: 0 0 .35rem; letter-spacing: -0.01em; }
h2 { font-size: var(--step-1); margin: 1.6rem 0 .6rem; }
h3 { font-size: var(--step-1); margin: 0 0 .9rem; }

a { color: var(--ballpoint); text-underline-offset: 2px; }

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--ballpoint);
  outline-offset: 2px;
}

/* The evidence layer. Everything that came from a record, and nothing else. */
.record {
  font-family: var(--font-record);
  font-size: var(--step--1);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

/* Figures are facts, not accents: near-black, tabular, tight. */
.figure {
  font-family: var(--font-ui);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.deadline {
  font-family: var(--font-record);
  font-size: var(--step--1);
  color: var(--stamp);
  background: var(--stamp-soft);
  padding: .1rem .4rem;
  border-radius: 3px;
}

/* ── der beleuchtete Weg ───────────────────────────────────────────────────
   The path is decoration and must never be the only carrier of state — the
   step names are real text, and aria-current marks position for assistive
   tech. Colour and dot shape are the visual echo, not the source of truth. */
.path { display: flex; align-items: center; gap: .5rem; list-style: none;
        margin: 0; padding: 0; flex-wrap: wrap; }
.path li { display: flex; align-items: center; gap: .5rem;
           font-size: var(--step--1); color: var(--ink-2); }
.path li::before {
  content: ""; inline-size: .6rem; block-size: .6rem; border-radius: 50%;
  background: var(--path-ahead); flex: none;
}
.path li[data-state="done"]::before { background: var(--path-done); }
.path li[data-state="here"]::before {
  background: var(--path-here); inline-size: .85rem; block-size: .85rem;
  box-shadow: 0 0 0 .25rem var(--light-soft);
}
.path li[data-state="here"] { color: var(--ink); font-weight: 600; }

/* Die Route: der Weg als senkrechtes Rückgrat (Richtung A, 07.09.). Jede
   Station ist ein echter Listeneintrag mit Namen; der Zustand steht in
   data-state UND im Text (aria-current an der Station, an der man ist) —
   Farbe und Punkt sind das Echo, nie die Quelle.
   Kontrast: Ziffer im Punkt --ink-2 auf --paper-raised 7.6:1 (hell) /
   8.9:1 (dunkel); im lit Punkt --light-on auf --light 4.95:1 / 7.54:1;
   im erledigten Punkt --ink auf --path-done 6.5:1 / 5.5:1. */
.route { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.station { position: relative; display: grid; grid-template-columns: 1.7rem minmax(0, 1fr);
           column-gap: .9rem; padding: 0 0 1.1rem; }
.station:last-child { padding-bottom: 0; }
.station::before {
  content: ""; position: absolute; left: calc(.85rem - 1px); top: 1.8rem; bottom: .1rem;
  width: 2px; background: var(--path-ahead);
}
.station:last-child::before { display: none; }
.station__dot {
  inline-size: 1.7rem; block-size: 1.7rem; border-radius: 50%; flex: none;
  border: 2px solid var(--path-ahead); background: var(--paper-raised);
  display: flex; align-items: center; justify-content: center; margin-top: .05rem;
  font-size: var(--step--1); font-weight: 600; color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}
.station[data-state="done"]::before { background: var(--path-done); }
.station[data-state="done"] .station__dot {
  background: var(--path-done); border-color: var(--path-done); color: var(--ink);
}
.station[data-state="here"] .station__dot {
  background: var(--light); border-color: var(--light); color: var(--light-on);
  box-shadow: 0 0 0 .3rem var(--light-soft);
}
.station__name { margin: 0; font-weight: 600; }
.station[data-state="here"] .station__name { color: var(--light-text); }
.station__text { margin: .1rem 0 0; color: var(--ink-2); }
.station__text + .station__text { margin-top: .35rem; }
/* Der Weg im Rahmen (`.route--weg`, gesetzt von page()): unter 60rem eine
   Zeile im Seitenkopf — Punkte, der eigene Name, „danach: …"; die übrigen
   Namen bleiben im Dokument, nur nicht auf dem Schirm. Ab 60rem ist es die
   senkrechte Route in einer linken Spalte (Raster in views.py), und die
   „danach"-Ergänzung fällt weg, weil die nächste Station sichtbar ist. */
.route--weg .station__danach { color: var(--ink-2); font-weight: 400; }
@media (min-width: 60rem) { .route--weg .station__danach { display: none; } }
@media (max-width: 59.99rem) {
  .route--weg { flex-direction: row; flex-wrap: wrap; align-items: center;
                gap: .4rem .5rem; margin: .6rem 0 0; font-size: var(--step--1); }
  .route--weg .station { display: flex; align-items: center; gap: .4rem; padding: 0; }
  .route--weg .station::before { display: none; }
  .route--weg .station__dot { inline-size: .7rem; block-size: .7rem; font-size: 0;
    border: 0; background: var(--path-ahead); margin: 0; box-shadow: none; }
  .route--weg .station[data-state="done"] .station__dot { background: var(--path-done); }
  .route--weg .station[data-state="here"] .station__dot { inline-size: .95rem;
    block-size: .95rem; background: var(--light); box-shadow: 0 0 0 .2rem var(--light-soft); }
  .route--weg .station__text { display: none; }
  .route--weg .station__name { font-size: inherit; color: var(--ink); }
  .route--weg .station:not([data-state="here"]) .station__name {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
  }
  .route--weg .station:not([data-state="here"]) { gap: 0; }
}

/* The next step. Named concretely — "Weiter" is not a next step.
   This is where the light is spent, and almost nowhere else.
   Zwei Zeilen seit 07.09.: der Knopf sagt, was er tut, die Zeile darunter,
   was danach kommt („Als Nächstes: …") — nebeneinander passte das auf kein
   Telefon. */
.next {
  display: inline-flex; flex-direction: column; align-items: flex-start; gap: .1rem;
  min-block-size: 44px; padding: .7rem 1.1rem;      /* 44px: audience floor */
  background: var(--light); color: var(--light-on);
  border: 0; border-radius: var(--radius);
  font: inherit; font-weight: 600; text-decoration: none; cursor: pointer;
  transition: transform 150ms ease-out, background-color 150ms ease-out;
}
.next:hover { background: var(--light-hover); }
.next:active { transform: scale(.97); }
/* No opacity on the label: 85% over the fill measures 1.62:1. Weight and size
   carry the hierarchy instead, so the colour stays at its verified ratio. */
.next .next__label { font-size: var(--step--1); font-weight: 400; display: block; }

/* What is coming, before they are asked for anything. */
.ahead { color: var(--ink-2); font-size: var(--step--1); }
.ahead b { color: var(--light-text); font-weight: 600; }

.found { background: var(--highlight); padding: .05rem .25rem; border-radius: 3px;
         color: #1b0338; }   /* highlighter: background only, never text colour */

.skip { position: absolute; left: -9999px; }
.skip:focus {
  left: 1rem; top: 1rem; z-index: 9;
  background: var(--paper-raised); color: var(--ink);
  padding: .6rem 1rem; border: 1px solid var(--rule-strong); border-radius: var(--radius);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  /* The view transition is motion too — it must obey the same switch. */
  @view-transition { navigation: none; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) {
    animation: none !important;
  }
}

/* ── Kursraum (Welle 2, 07.09.) — Schirme 6–10 ─────────────────────────────
   Farben: ausschließlich vorhandene Tokens, die Kontraste stehen oben. */

/* Terminzeilen. Eine Zeile ist eine Handlung (Formular), kein Kasten: Datum,
   Dauer, ein Ziel rechts — auf 390 px bricht das Ziel unter das Datum. Der
   eigene Termin ist der eine lichte Ort je Live-Class: --light-soft-Füllung,
   Rand --rule-strong (Text --ink darauf: 13.9:1 hell, 12.1:1 dunkel). Kein
   --light-Rand: mit dem .next oben wären das drei Lichtflächen (07.09.). */
.termin{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem 1rem;
  padding:.75rem 0;margin:0;border-top:1px solid var(--rule)}
.termin+.termin,.foldbody .termin:first-child{border-top-color:var(--rule)}
.termin__wann{flex:1 1 13rem}
.termin .check{flex-basis:100%;margin:0}
.termin form{margin:0}
.termin--mein{background:var(--light-soft);border:2px solid var(--rule-strong);
  border-radius:var(--radius);padding:.9rem 1rem;margin:.5rem 0 .75rem}
.termin--mein .hint{flex-basis:100%;margin:0}
.termin--lit{border-top:0;padding-top:.25rem}

/* Lingoda, ruhiger: only dark components. Light presentation is unchanged;
   dark staff navigation, filter chips and check labels have a 44px floor. --light is an action fill; --light-text is readable link ink.
   Both selectors also cover forms, tables and the sandboxed player shell. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .staffnav a { min-height:44px;display:flex;align-items:center; }
  :root:not([data-theme="light"]) .chips a { min-height:44px;min-width:44px;display:inline-flex;align-items:center; }
  :root:not([data-theme="light"]) .check { min-height:44px; }
  :root:not([data-theme="light"]) a.hk-kachel:hover, :root:not([data-theme="light"]) .pille__raus { box-shadow:var(--shadow-raised); }
  :root:not([data-theme="light"]) .hk-seite, :root:not([data-theme="light"]) .staffnav { background:var(--paper-sidebar); }
  :root:not([data-theme="light"]) .hk-tzeile, :root:not([data-theme="light"]) .hk-zitat, :root:not([data-theme="light"]) tbody tr:nth-child(even) { background:var(--paper-row); }
  :root:not([data-theme="light"]) .hk-lesen { background:var(--paper-raised);color:var(--ink);box-shadow:none; }
  :root:not([data-theme="light"]) .hk-lesen h2 { color:var(--ink); }
  :root:not([data-theme="light"]) .hk-lesen .hk-ober { color:var(--ink-2); }
  :root:not([data-theme="light"]) .hk-lesen a.btn, :root:not([data-theme="light"]) .hk-lesen a.next { background:var(--light);color:var(--light-on); }
  :root:not([data-theme="light"]) .btn:not(.secondary) { background:var(--light);color:var(--light-on); }
  :root:not([data-theme="light"]) .btn:not(.secondary), :root:not([data-theme="light"]) .next, :root:not([data-theme="light"]) .pille__tun[data-licht] { box-shadow:inset 0 0 0 1px var(--light-text); }
  :root:not([data-theme="light"]) .btn:not(.secondary):hover, :root:not([data-theme="light"]) .hk-lesen a.next:hover { background:var(--light-hover);filter:none; }
  :root:not([data-theme="light"]) .btn.secondary { color:var(--light-text); }
  :root:not([data-theme="light"]) form[action="/staff/content/reharden"] .btn, :root:not([data-theme="light"]) form[action="/staff/content/reharden"] .btn:hover { background:var(--paper-top);color:var(--ink);box-shadow:inset 0 0 0 1px var(--rule-strong); }
  :root:not([data-theme="light"]) .hk-tzeile:has(.check input:not(:checked)) .btn { opacity:1;filter:none;background:var(--paper-top);color:var(--ink); }
  :root:not([data-theme="light"]) .hk-heft .einheit { color:var(--ink-2);border-color:var(--rule-strong); }
  :root:not([data-theme="light"]) .hk-heft .einheit.voll, :root:not([data-theme="light"]) .hk-heft .live.voll { background:var(--paper-row);color:var(--positive);border-color:var(--positive); }
  :root:not([data-theme="light"]) .hk-heft .einheit.halb { background:linear-gradient(to top,var(--paper-top) 50%,var(--paper-raised) 50%); }
  :root:not([data-theme="light"]) .hk-heft .live { color:var(--ink-2);border-color:var(--rule-strong); }
  :root:not([data-theme="light"]) .hk-stempel { rotate:0deg;background:var(--paper-row);color:var(--positive);border-color:var(--rule-strong); }
  :root:not([data-theme="light"]) .hk-punkte tr.ok .mark { color:var(--positive); }
  :root:not([data-theme="light"]) .confirmed { border-color:var(--positive); }
  :root:not([data-theme="light"]) .hk-chip.jetzt { background:var(--paper-top);color:var(--ink); }
  :root:not([data-theme="light"]) .hk-kachel.dran { border-color:var(--rule-strong); }
  :root:not([data-theme="light"]) .hk-kachel.bald, :root:not([data-theme="light"]) .hk-kachel.bald .bild svg, :root:not([data-theme="light"]) .hk-tzeile.erledigt { opacity:1; }
  :root:not([data-theme="light"]) .hk-kachel .bild { color:var(--ink-2); }
  :root:not([data-theme="light"]) .hk-kachel .bild svg, :root:not([data-theme="light"]) .hk-kachel .bild svg [stroke] { stroke:currentColor; }
  :root:not([data-theme="light"]) .hk-tzeile.naht, :root:not([data-theme="light"]) .hk-tzeile.jetzt { border-color:var(--rule-strong); }
  :root:not([data-theme="light"]) .hk-tzeile.versaeumt { border-left-color:var(--negative); }
  :root:not([data-theme="light"]) .hk-tzeile .frei { background:var(--paper-top); }
  :root:not([data-theme="light"]) .hk-tzeile .frei.voll2 { background:var(--stamp-soft);color:var(--negative); }
  :root:not([data-theme="light"]) .station[data-state="here"] .station__dot { background:var(--paper-top);border-color:var(--rule-strong);color:var(--ink); }
  :root:not([data-theme="light"]) .route--weg .station[data-state="here"] .station__dot { background:var(--path-here); }
  :root:not([data-theme="light"]) .station[data-state="here"] .station__name { color:var(--ink); }
  :root:not([data-theme="light"]) .prose blockquote { border-left-color:var(--rule-strong); }
  :root:not([data-theme="light"]) .ampel-gruen { color:var(--positive); }
  :root:not([data-theme="light"]) .ampel-gelb { color:var(--negative); }
  :root:not([data-theme="light"]) .pille__raus:focus-visible, :root:not([data-theme="light"]) .pille__tun:focus-visible { outline-color:var(--light-text); }
}
:root[data-theme="dark"] .staffnav a { min-height:44px;display:flex;align-items:center; }
:root[data-theme="dark"] .chips a { min-height:44px;min-width:44px;display:inline-flex;align-items:center; }
:root[data-theme="dark"] .check { min-height:44px; }
:root[data-theme="dark"] a.hk-kachel:hover, :root[data-theme="dark"] .pille__raus { box-shadow:var(--shadow-raised); }
:root[data-theme="dark"] .hk-seite, :root[data-theme="dark"] .staffnav { background:var(--paper-sidebar); }
:root[data-theme="dark"] .hk-tzeile, :root[data-theme="dark"] .hk-zitat, :root[data-theme="dark"] tbody tr:nth-child(even) { background:var(--paper-row); }
:root[data-theme="dark"] .hk-lesen { background:var(--paper-raised);color:var(--ink);box-shadow:none; }
:root[data-theme="dark"] .hk-lesen h2 { color:var(--ink); }
:root[data-theme="dark"] .hk-lesen .hk-ober { color:var(--ink-2); }
:root[data-theme="dark"] .hk-lesen a.btn, :root[data-theme="dark"] .hk-lesen a.next { background:var(--light);color:var(--light-on); }
:root[data-theme="dark"] .btn:not(.secondary) { background:var(--light);color:var(--light-on); }
:root[data-theme="dark"] .btn:not(.secondary), :root[data-theme="dark"] .next, :root[data-theme="dark"] .pille__tun[data-licht] { box-shadow:inset 0 0 0 1px var(--light-text); }
:root[data-theme="dark"] .btn:not(.secondary):hover, :root[data-theme="dark"] .hk-lesen a.next:hover { background:var(--light-hover);filter:none; }
:root[data-theme="dark"] .btn.secondary { color:var(--light-text); }
:root[data-theme="dark"] form[action="/staff/content/reharden"] .btn, :root[data-theme="dark"] form[action="/staff/content/reharden"] .btn:hover { background:var(--paper-top);color:var(--ink);box-shadow:inset 0 0 0 1px var(--rule-strong); }
:root[data-theme="dark"] .hk-tzeile:has(.check input:not(:checked)) .btn { opacity:1;filter:none;background:var(--paper-top);color:var(--ink); }
:root[data-theme="dark"] .hk-heft .einheit { color:var(--ink-2);border-color:var(--rule-strong); }
:root[data-theme="dark"] .hk-heft .einheit.voll, :root[data-theme="dark"] .hk-heft .live.voll { background:var(--paper-row);color:var(--positive);border-color:var(--positive); }
:root[data-theme="dark"] .hk-heft .einheit.halb { background:linear-gradient(to top,var(--paper-top) 50%,var(--paper-raised) 50%); }
:root[data-theme="dark"] .hk-heft .live { color:var(--ink-2);border-color:var(--rule-strong); }
:root[data-theme="dark"] .hk-stempel { rotate:0deg;background:var(--paper-row);color:var(--positive);border-color:var(--rule-strong); }
:root[data-theme="dark"] .hk-punkte tr.ok .mark { color:var(--positive); }
:root[data-theme="dark"] .confirmed { border-color:var(--positive); }
:root[data-theme="dark"] .hk-chip.jetzt { background:var(--paper-top);color:var(--ink); }
:root[data-theme="dark"] .hk-kachel.dran { border-color:var(--rule-strong); }
:root[data-theme="dark"] .hk-kachel.bald, :root[data-theme="dark"] .hk-kachel.bald .bild svg, :root[data-theme="dark"] .hk-tzeile.erledigt { opacity:1; }
:root[data-theme="dark"] .hk-kachel .bild { color:var(--ink-2); }
:root[data-theme="dark"] .hk-kachel .bild svg, :root[data-theme="dark"] .hk-kachel .bild svg [stroke] { stroke:currentColor; }
:root[data-theme="dark"] .hk-tzeile.naht, :root[data-theme="dark"] .hk-tzeile.jetzt { border-color:var(--rule-strong); }
:root[data-theme="dark"] .hk-tzeile.versaeumt { border-left-color:var(--negative); }
:root[data-theme="dark"] .hk-tzeile .frei { background:var(--paper-top); }
:root[data-theme="dark"] .hk-tzeile .frei.voll2 { background:var(--stamp-soft);color:var(--negative); }
:root[data-theme="dark"] .station[data-state="here"] .station__dot { background:var(--paper-top);border-color:var(--rule-strong);color:var(--ink); }
:root[data-theme="dark"] .route--weg .station[data-state="here"] .station__dot { background:var(--path-here); }
:root[data-theme="dark"] .station[data-state="here"] .station__name { color:var(--ink); }
:root[data-theme="dark"] .prose blockquote { border-left-color:var(--rule-strong); }
:root[data-theme="dark"] .ampel-gruen { color:var(--positive); }
:root[data-theme="dark"] .ampel-gelb { color:var(--negative); }
:root[data-theme="dark"] .pille__raus:focus-visible, :root[data-theme="dark"] .pille__tun:focus-visible { outline-color:var(--light-text); }