/* Time Keeper Live · Gestaltung «Bahn»
   Gemeinsame Grundlage für Bedienung (tkl-nacht), Website und Ausdruck (tkl-tag) und Liveansicht (tkl-live).
   Alles trägt das Präfix tkl-; ohne Themenklasse verändert diese Datei keine bestehende Seite.
   Regeln und Verwendung: DESIGN.md in der Projektwurzel. */

/* ===== Schriften (SIL OFL 1.1, Lizenz in OFL-Barlow.txt) ===== */
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 400; font-display: swap; src: url("schrift/barlow-latin-400-normal.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: "Barlow"; font-style: normal; font-weight: 400; font-display: swap; src: url("schrift/barlow-latin-ext-400-normal.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: "Barlow"; font-style: normal; font-weight: 600; font-display: swap; src: url("schrift/barlow-latin-600-normal.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: "Barlow"; font-style: normal; font-weight: 600; font-display: swap; src: url("schrift/barlow-latin-ext-600-normal.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: "Barlow Semi Condensed"; font-style: normal; font-weight: 600; font-display: swap; src: url("schrift/barlow-semi-condensed-latin-600-normal.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: "Barlow Semi Condensed"; font-style: normal; font-weight: 600; font-display: swap; src: url("schrift/barlow-semi-condensed-latin-ext-600-normal.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: "Barlow Semi Condensed"; font-style: normal; font-weight: 700; font-display: swap; src: url("schrift/barlow-semi-condensed-latin-700-normal.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: "Barlow Semi Condensed"; font-style: normal; font-weight: 700; font-display: swap; src: url("schrift/barlow-semi-condensed-latin-ext-700-normal.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; }

/* ===== Grundwerte, gelten in allen Themen ===== */
:root {
  --tkl-text-schrift: "Barlow", "Segoe UI", Roboto, Arial, sans-serif;
  --tkl-titel-schrift: "Barlow Semi Condensed", "Barlow", "Segoe UI", Arial, sans-serif;
  /* Systemschrift, nichts aus dem Netz: Adressen, Schlüssel, Hex, JSON */
  --tkl-code-schrift: ui-monospace, "Cascadia Mono", "Cascadia Code", Consolas, "SF Mono", Menlo, monospace;

  /* Abstandsraster 4 px */
  --tkl-a1: 4px; --tkl-a2: 8px; --tkl-a3: 12px; --tkl-a4: 16px; --tkl-a5: 24px;
  --tkl-a6: 32px; --tkl-a7: 48px; --tkl-a8: 64px; --tkl-a9: 96px;
  --tkl-ecke: 3px;
  --tkl-ecke-innen: 2px;
  --tkl-dauer: 120ms;
  --tkl-kurve: cubic-bezier(0.22, 1, 0.36, 1);

  /* Rohfarben aus dem Becken; Seiten benutzen die Rollen der Themen, nicht diese Werte */
  --tkl-kachel: #F2F6F7;
  --tkl-fuge: #E3EBEE;
  --tkl-weiss: #FFFFFF;
  --tkl-linienschwarz: #0E1B24;
  --tkl-nachtbecken: #0E1419;
  --tkl-beckenblau: #0B3756;
  --tkl-beckenblau-tief: #072A43;
  --tkl-linie-unter-wasser: #03182A;
  --tkl-türkis: #2EC4B6;
  --tkl-türkis-hell: #4ED3C6;
  --tkl-türkis-tief: #0B6E66;
  --tkl-türkis-tinte: #06201D;
  --tkl-türkis-hauch: #DDF2EF;
  --tkl-leuchtstift: #FFE433;
  --tkl-leuchtstift-tinte: #111518;
  --tkl-leuchtstift-spur: #B89F12;
  /* Medaillen und Anzeigetafel: feste Farben der Ausgaben, keine Statusfarben */
  --tkl-gold: #D9B44A;
  --tkl-silber: #C5CDD4;
  --tkl-bronze: #C98B57;
  --tkl-medaille-tinte: #0B0F12;
  --tkl-tafel-grund: #05080B;
  --tkl-tafel-text: #F4F7F9;
  --tkl-tafel-gelb: #F2C230;
  /* Geräte im Verkabelungstest: dieselben festen Farben wie der Testschirm der Anzeigetafel, nur als Feld neben dem Wort */
  --tkl-qt-platte: #F5C542;
  --tkl-qt-block: #4E9CFF;
  --tkl-qt-knopf: #E04A3A;
  --tkl-qt-start: #C5CDD4;
}

/* ===== Themen =====
   Die Themenklasse sitzt auf <body> (oder einem Wrapper) und setzt alle Rollen. Jede Fläche setzt jede Rolle. */

/* Bedienung «Nachtbecken»: dunkel-neutral, ohne Leuchten */
.tkl-nacht,
.tkl-live.tkl-dunkel {
  --tkl-grund: #0E1419;
  --tkl-fläche: #141B21;
  --tkl-fläche-2: #1B242C;
  --tkl-fläche-3: #243039;
  --tkl-text: #E6ECF0;
  --tkl-text-2: #A3B0BA;
  --tkl-text-3: #8C99A4;
  --tkl-text-aus: #7A8692;
  --tkl-rand: #2B3742;
  --tkl-rand-feld: #6B7C8A;
  --tkl-knopf-rand: #6B7C8A;
  --tkl-knopf-rand-breite: 1px;
  --tkl-knopf-grund: #1B242C;
  --tkl-knopf-hover: #243039;
  --tkl-eingabe-grund: #0E1419;
  --tkl-zeile: #141B21;
  --tkl-spur: #34424E;
  --tkl-spur-stark: #5D6E7C;
  --tkl-weg: #DCE4EA;
  --tkl-linie: #DCE4EA;
  --tkl-plakette: #DCE4EA;
  --tkl-plakette-text: #0E1419;
  --tkl-haupt: #2EC4B6;
  --tkl-haupt-hover: #4ED3C6;
  --tkl-haupt-text: #06201D;
  --tkl-auswahl: #2EC4B6;
  --tkl-auswahl-hauch: #1A4D48;
  --tkl-ok: #45C277; --tkl-ok-hauch: #11261A;
  --tkl-warn: #E8A93A; --tkl-warn-hauch: #2C2311;
  --tkl-bad: #F2706C; --tkl-bad-hauch: #351819;
  --tkl-neutral: #8C99A4; --tkl-neutral-hauch: #1B242C;
  --tkl-gefahr: #C93A35;
  --tkl-gefahr-hover: #BE342F;
  --tkl-gefahr-text: #FFFFFF;
  --tkl-gefahr-rand: #F2706C;
  --tkl-fokus: #E6ECF0;
  --tkl-fokus-gegen: #0E1419;
  --tkl-schleier: rgba(4, 8, 11, 0.66);
  --tkl-schatten: 0 16px 48px rgba(0, 0, 0, 0.5);
  --tkl-knopf-höhe: 40px;
  --tkl-ziel-klein: 32px;
  --tkl-s-klein: 14px; --tkl-s-text: 16px; --tkl-s-gross: 20px; --tkl-s-titel: 28px; --tkl-s-held: 28px;
}

/* Website und Ausdruck «Tag»: Kachelweiss, Linienschwarz */
.tkl-tag,
.tkl-live {
  --tkl-grund: #F2F6F7;
  --tkl-fläche: #FFFFFF;
  --tkl-fläche-2: #E3EBEE;
  --tkl-fläche-3: #D5E0E4;
  --tkl-text: #0E1B24;
  --tkl-text-2: #44535E;
  --tkl-text-3: #5A6A75;
  --tkl-text-aus: #7A8892;
  --tkl-rand: #C3D1D7;
  --tkl-rand-feld: #6E7F89;
  --tkl-knopf-rand: #0E1B24;
  --tkl-knopf-rand-breite: 2px;
  --tkl-knopf-grund: transparent;
  --tkl-knopf-hover: #E3EBEE;
  --tkl-eingabe-grund: #FFFFFF;
  --tkl-zeile: #FFFFFF;
  --tkl-spur: #BCCAD1;
  --tkl-spur-stark: #7E909A;
  --tkl-weg: #0E1B24;
  --tkl-linie: #0E1B24;
  --tkl-plakette: #0E1B24;
  --tkl-plakette-text: #FFFFFF;
  --tkl-haupt: #0B6E66;
  --tkl-haupt-hover: #095A53;
  --tkl-haupt-text: #FFFFFF;
  --tkl-auswahl: #0B6E66;
  --tkl-auswahl-hauch: #A9DCD5;
  --tkl-ok: #1E6B3D; --tkl-ok-hauch: #DDF1E4;
  --tkl-warn: #7A4B00; --tkl-warn-hauch: #FBEFD5;
  --tkl-bad: #A3201E; --tkl-bad-hauch: #FBE3E2;
  --tkl-neutral: #44535E; --tkl-neutral-hauch: #E3EBEE;
  --tkl-gefahr: #B42A27;
  --tkl-gefahr-hover: #9C2220;
  --tkl-gefahr-text: #FFFFFF;
  --tkl-gefahr-rand: #B42A27;
  --tkl-fokus: #0E1B24;
  --tkl-fokus-gegen: #FFFFFF;
  --tkl-schleier: rgba(14, 27, 36, 0.45);
  --tkl-schatten: 0 12px 40px rgba(14, 27, 36, 0.2);
  --tkl-knopf-höhe: 44px;
  --tkl-ziel-klein: 44px;
  --tkl-s-klein: 14px; --tkl-s-text: 17px; --tkl-s-gross: 22px;
  --tkl-s-titel: clamp(32px, 3.5vw, 52px); --tkl-s-held: clamp(44px, 5vw, 72px);
}

/* Liveansicht: hell wie die Website, Schrift und Ziele für das Handy */
.tkl-live,
.tkl-live.tkl-dunkel {
  --tkl-knopf-höhe: 44px;
  --tkl-ziel-klein: 44px;
  --tkl-s-klein: 14px; --tkl-s-text: 16px; --tkl-s-gross: 20px; --tkl-s-titel: 32px; --tkl-s-held: 32px;
}

/* Liveansicht dunkel, wenn das Handy es verlangt (Werte wie .tkl-nacht; tkl-hell erzwingt hell) */
@media (prefers-color-scheme: dark) {
  .tkl-live:not(.tkl-hell) {
    --tkl-grund: #0E1419;
    --tkl-fläche: #141B21;
    --tkl-fläche-2: #1B242C;
    --tkl-fläche-3: #243039;
    --tkl-text: #E6ECF0;
    --tkl-text-2: #A3B0BA;
    --tkl-text-3: #8C99A4;
    --tkl-text-aus: #7A8692;
    --tkl-rand: #2B3742;
    --tkl-rand-feld: #6B7C8A;
    --tkl-knopf-rand: #6B7C8A;
    --tkl-knopf-rand-breite: 1px;
    --tkl-knopf-grund: #1B242C;
    --tkl-knopf-hover: #243039;
    --tkl-eingabe-grund: #0E1419;
    --tkl-zeile: #141B21;
    --tkl-spur: #34424E;
    --tkl-spur-stark: #5D6E7C;
    --tkl-weg: #DCE4EA;
    --tkl-linie: #DCE4EA;
    --tkl-plakette: #DCE4EA;
    --tkl-plakette-text: #0E1419;
    --tkl-haupt: #2EC4B6;
    --tkl-haupt-hover: #4ED3C6;
    --tkl-haupt-text: #06201D;
    --tkl-auswahl: #2EC4B6;
    --tkl-auswahl-hauch: #1A4D48;
    --tkl-ok: #45C277; --tkl-ok-hauch: #11261A;
    --tkl-warn: #E8A93A; --tkl-warn-hauch: #2C2311;
    --tkl-bad: #F2706C; --tkl-bad-hauch: #351819;
    --tkl-neutral: #8C99A4; --tkl-neutral-hauch: #1B242C;
    --tkl-gefahr: #C93A35;
    --tkl-gefahr-hover: #BE342F;
    --tkl-gefahr-text: #FFFFFF;
    --tkl-gefahr-rand: #F2706C;
    --tkl-fokus: #E6ECF0;
    --tkl-fokus-gegen: #0E1419;
    --tkl-schleier: rgba(4, 8, 11, 0.66);
    --tkl-schatten: 0 16px 48px rgba(0, 0, 0, 0.5);
  }
}

/* Die Wand: Fusszeile der Website, dunkel innerhalb von «Tag» */
.tkl-wand {
  --tkl-grund: #0E1B24;
  --tkl-fläche: #16252F;
  --tkl-fläche-2: #1E2F3A;
  --tkl-fläche-3: #283B47;
  --tkl-text: #E6ECF0;
  --tkl-text-2: #B4C1CA;
  --tkl-text-3: #A1AEB8;
  --tkl-text-aus: #7F8D98;
  --tkl-rand: #2A3A46;
  --tkl-rand-feld: #7A8C98;
  --tkl-knopf-rand: #E6ECF0;
  --tkl-knopf-rand-breite: 2px;
  --tkl-knopf-grund: transparent;
  --tkl-knopf-hover: #1E2F3A;
  --tkl-eingabe-grund: #0E1B24;
  --tkl-zeile: #16252F;
  --tkl-spur: #3A4B57;
  --tkl-spur-stark: #7A8C98;
  --tkl-weg: #E6ECF0;
  --tkl-linie: #E6ECF0;
  --tkl-plakette: #E6ECF0;
  --tkl-plakette-text: #0E1B24;
  --tkl-haupt: #2EC4B6;
  --tkl-haupt-hover: #4ED3C6;
  --tkl-haupt-text: #06201D;
  --tkl-auswahl: #2EC4B6;
  --tkl-auswahl-hauch: #1A4D48;
  --tkl-ok: #45C277; --tkl-ok-hauch: #12301F;
  --tkl-warn: #E8A93A; --tkl-warn-hauch: #33290F;
  --tkl-bad: #F2706C; --tkl-bad-hauch: #3A1B1E;
  --tkl-neutral: #A1AEB8; --tkl-neutral-hauch: #1E2F3A;
  --tkl-gefahr: #C93A35;
  --tkl-gefahr-hover: #BE342F;
  --tkl-gefahr-text: #FFFFFF;
  --tkl-gefahr-rand: #F2706C;
  --tkl-fokus: #E6ECF0;
  --tkl-fokus-gegen: #0E1B24;
  --tkl-schleier: rgba(4, 8, 11, 0.66);
  --tkl-schatten: 0 16px 48px rgba(0, 0, 0, 0.5);
}

/* Wasser: nur der Abschnitt «Rennen» der Website. Hauptaktion weiss, nie Türkis auf Blau; die Linie läuft dunkel unter Wasser */
.tkl-wasser {
  --tkl-grund: #0B3756;
  --tkl-fläche: #072A43;
  --tkl-fläche-2: #11486F;
  --tkl-fläche-3: #185580;
  --tkl-text: #EAF2F6;
  --tkl-text-2: #B9CFDD;
  --tkl-text-3: #B9CFDD;
  --tkl-text-aus: #8FAEC4;
  --tkl-rand: #1D4C6E;
  --tkl-rand-feld: #8FB0C6;
  --tkl-knopf-rand: #EAF2F6;
  --tkl-knopf-rand-breite: 2px;
  --tkl-knopf-grund: transparent;
  --tkl-knopf-hover: #11486F;
  --tkl-eingabe-grund: #072A43;
  --tkl-zeile: #072A43;
  --tkl-spur: #2A5675;
  --tkl-spur-stark: #8FB0C6;
  --tkl-weg: #EAF2F6;
  --tkl-linie: #03182A;
  --tkl-plakette: #EAF2F6;
  --tkl-plakette-text: #0B3756;
  --tkl-haupt: #FFFFFF;
  --tkl-haupt-hover: #DDEBF3;
  --tkl-haupt-text: #0B3756;
  --tkl-auswahl: #FFFFFF;
  --tkl-auswahl-hauch: #1E6596;
  --tkl-ok: #72D99B; --tkl-ok-hauch: #0F3A3E;
  --tkl-warn: #F2BC5E; --tkl-warn-hauch: #3A3A33;
  --tkl-bad: #FF9A95; --tkl-bad-hauch: #43263A;
  --tkl-neutral: #B9CFDD; --tkl-neutral-hauch: #11486F;
  --tkl-gefahr: #B42A27;
  --tkl-gefahr-hover: #9C2220;
  --tkl-gefahr-text: #FFFFFF;
  --tkl-gefahr-rand: #FF9A95;
  --tkl-fokus: #FFFFFF;
  --tkl-fokus-gegen: #03182A;
  --tkl-schleier: rgba(3, 24, 42, 0.66);
  --tkl-schatten: 0 16px 48px rgba(0, 0, 0, 0.45);
}

/* Fläche, Schriftfarbe und Schrift des Themas; Spezifität null, damit bestehende Seiten beim Umbau gewinnen */
:where(.tkl-nacht, .tkl-tag, .tkl-live, .tkl-wand, .tkl-wasser) {
  background-color: var(--tkl-grund);
  color: var(--tkl-text);
  font-family: var(--tkl-text-schrift);
}
:where(.tkl-tag, .tkl-live) { color-scheme: light; }
:where(.tkl-nacht, .tkl-live.tkl-dunkel, .tkl-wand, .tkl-wasser) { color-scheme: dark; }
@media (prefers-color-scheme: dark) {
  :where(.tkl-live:not(.tkl-hell)) { color-scheme: dark; }
}

/* ===== Grundschicht: nur mit .tkl-grund (auf <body>), überall Spezifität null ===== */
:where(.tkl-grund) {
  margin: 0;
  font-size: var(--tkl-s-text);
  line-height: 1.5;
  font-kerning: normal;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  scrollbar-color: var(--tkl-rand-feld) var(--tkl-grund);
}
:where(.tkl-grund) :where(*, *::before, *::after) { box-sizing: border-box; }
:where(.tkl-grund) :where(h1, h2, h3, h4, p, ol, ul, dl, dd, figure, blockquote, pre) { margin: 0; }
:where(.tkl-grund) :where(h1, h2, h3, h4) { font-family: var(--tkl-titel-schrift); font-weight: 600; line-height: 1.2; text-wrap: balance; }
:where(.tkl-grund) :where(p, li, dd) { text-wrap: pretty; }
:where(.tkl-grund) :where(strong, b, th) { font-weight: 600; }
:where(.tkl-grund) :where(button, input, select, textarea) { font: inherit; color: inherit; }
:where(.tkl-grund) :where(code, kbd, samp, pre) { font-family: var(--tkl-code-schrift); font-variant-ligatures: none; }
:where(.tkl-grund) :where(img, svg, video) { max-width: 100%; }
:where(.tkl-grund) :where(img) { display: block; height: auto; }
:where(.tkl-grund) :where(a) { color: inherit; text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
:where(.tkl-grund) :where(a:hover) { text-decoration-thickness: 2px; }
:where(.tkl-grund) :where(table) { border-collapse: collapse; }
:where(.tkl-grund) ::selection { background: var(--tkl-haupt); color: var(--tkl-haupt-text); }
:where(.tkl-grund) :where(input, textarea) { caret-color: var(--tkl-text); }
/* Bausteine mit eigenem display heben «hidden» sonst auf */
:where(.tkl-nacht, .tkl-tag, .tkl-live, .tkl-grund) [hidden]:not([hidden="until-found"]) { display: none !important; }
/* Sprungziele (Zum Inhalt) bekommen den Fokus nur zum Weiterlesen, ohne Ring um die ganze Seite */
:where(.tkl-nacht, .tkl-tag, .tkl-live, .tkl-grund) :is(main, section, [id="inhalt"])[tabindex="-1"]:focus { outline: none; }

/* Fokus: zweifarbiger Ring in Textfarbe (aussen Fokus, innen Gegenfarbe); Türkis bleibt der Auswahl */
:where(.tkl-nacht, .tkl-tag, .tkl-live, .tkl-wand, .tkl-wasser) :focus-visible,
.tkl-ist-fokus {
  outline: 2px solid var(--tkl-fokus);
  outline-offset: 2px;
  box-shadow: 0 0 0 2px var(--tkl-fokus-gegen);
}
/* In Scrollbehältern nach innen, sonst schneidet der Behälter den Ring ab */
:where(.tkl-arbeitsplätze, .tkl-tabellenrahmen, .tkl-fahrplan-rahmen, .tkl-seitenleiste, .tkl-codeblock, .tkl-web-menü-feld, .tkl-liste, .tkl-ereignisliste) :is(:focus-visible, .tkl-ist-fokus) {
  outline-offset: -4px;
  box-shadow: inset 0 0 0 2px var(--tkl-fokus-gegen);
}
:is(.tkl-tabellenrahmen, .tkl-fahrplan-rahmen, .tkl-codeblock):focus-visible { outline-offset: -2px; box-shadow: none; }

/* ===== Schrift ===== */
.tkl-klein { font-size: var(--tkl-s-klein); line-height: 1.45; }
.tkl-text { font-size: var(--tkl-s-text); line-height: 1.5; }
.tkl-gross { font-family: var(--tkl-titel-schrift); font-size: var(--tkl-s-gross); font-weight: 600; line-height: 1.3; }
.tkl-titel { font-family: var(--tkl-titel-schrift); font-size: var(--tkl-s-titel); font-weight: 600; line-height: 1.1; letter-spacing: -0.01em; }
.tkl-held { font-family: var(--tkl-titel-schrift); font-size: var(--tkl-s-held); font-weight: 600; line-height: 1; letter-spacing: -0.018em; }
.tkl-neben { color: var(--tkl-text-2); }
/* Ziffern gleich breit, keine Ligaturen: «---.--» bleibt so stehen */
.tkl-zahl { font-variant-numeric: tabular-nums; font-variant-ligatures: none; font-feature-settings: "tnum" 1, "calt" 0, "liga" 0; }
.tkl-zeit { font-family: var(--tkl-titel-schrift); font-weight: 600; font-variant-numeric: tabular-nums; font-variant-ligatures: none; font-feature-settings: "tnum" 1, "calt" 0, "liga" 0; white-space: nowrap; }
.tkl-lesbreite { max-width: 60ch; }
.tkl-unsichtbar {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
/* Code und Adressen: Systemschrift mit fester Breite, auf Fläche 2 */
.tkl-code {
  padding: 1px 5px; border-radius: var(--tkl-ecke-innen); background: var(--tkl-fläche-2); color: var(--tkl-text);
  font-family: var(--tkl-code-schrift); font-size: max(14px, 0.9em); font-variant-ligatures: none; overflow-wrap: anywhere;
}
.tkl-codeblock {
  display: block; max-width: 100%; margin: 0; padding: var(--tkl-a3) var(--tkl-a4); overflow: auto;
  border: 1px solid var(--tkl-rand); border-radius: var(--tkl-ecke); background: var(--tkl-eingabe-grund); color: var(--tkl-text);
  font-family: var(--tkl-code-schrift); font-size: 14px; line-height: 1.5; white-space: pre; tab-size: 2; font-variant-ligatures: none;
}

/* ===== Symbole ===== */
.tkl-symbol { display: inline-block; width: 20px; height: 20px; flex: none; vertical-align: middle; }
.tkl-symbol-klein { width: 18px; height: 18px; }
.tkl-symbol-gross { width: 24px; height: 24px; }

/* ===== Knöpfe ===== */
.tkl-knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--tkl-a2);
  min-height: var(--tkl-knopf-höhe); padding: 0 var(--tkl-a4); margin: 0;
  border: var(--tkl-knopf-rand-breite) solid var(--tkl-knopf-rand); border-radius: var(--tkl-ecke);
  background: var(--tkl-knopf-grund); color: var(--tkl-text);
  font-family: var(--tkl-text-schrift); font-size: var(--tkl-s-text); font-weight: 600; line-height: 1.1;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background-color var(--tkl-dauer) ease-out, border-color var(--tkl-dauer) ease-out, color var(--tkl-dauer) ease-out;
}
/* .tkl-ist-hover und .tkl-ist-fokus sind Musterhilfen der Musterseite, nicht in Seiten verwenden */
.tkl-knopf:hover, .tkl-knopf.tkl-ist-hover { background: var(--tkl-knopf-hover); }
.tkl-knopf:active { transform: translateY(1px); }
.tkl-knopf-haupt { background: var(--tkl-haupt); border-color: var(--tkl-haupt); color: var(--tkl-haupt-text); }
.tkl-knopf-haupt:hover, .tkl-knopf-haupt.tkl-ist-hover { background: var(--tkl-haupt-hover); border-color: var(--tkl-haupt-hover); }
.tkl-knopf-gefahr { background: var(--tkl-gefahr); border-color: var(--tkl-gefahr); color: var(--tkl-gefahr-text); }
.tkl-knopf-gefahr:hover, .tkl-knopf-gefahr.tkl-ist-hover { background: var(--tkl-gefahr-hover); border-color: var(--tkl-gefahr-hover); }
.tkl-knopf-leise { background: transparent; border-color: transparent; }
.tkl-knopf-leise:hover, .tkl-knopf-leise.tkl-ist-hover { background: var(--tkl-knopf-hover); }
/* Schmale Handys: lange Beschriftungen (fr, it) umbrechen statt über den Rand laufen */
@media (max-width: 400px) { .tkl-tag .tkl-knopf { padding-block: var(--tkl-a2); white-space: normal; line-height: 1.2; text-align: center; } }
.tkl-knopf-klein { min-height: var(--tkl-ziel-klein); padding: 0 var(--tkl-a3); font-size: var(--tkl-s-klein); }
.tkl-knopf-klein .tkl-symbol { width: 18px; height: 18px; }
.tkl-knopf-gross { min-height: 48px; padding: 0 var(--tkl-a5); }
.tkl-knopf-symbol { width: var(--tkl-knopf-höhe); padding: 0; }
.tkl-knopf-klein.tkl-knopf-symbol { width: var(--tkl-ziel-klein); }
.tkl-knopf:disabled, .tkl-knopf[aria-disabled="true"] {
  background: transparent; border-color: var(--tkl-rand); color: var(--tkl-text-aus);
  cursor: not-allowed; transform: none;
}
.tkl-knopf[aria-busy="true"] { cursor: progress; }
.tkl-knopf[aria-busy="true"] .tkl-symbol, .tkl-lädt > .tkl-symbol { animation: tkl-drehen 900ms linear infinite; }
@keyframes tkl-drehen { to { transform: rotate(1turn); } }
.tkl-knopfreihe { display: flex; flex-wrap: wrap; align-items: center; gap: var(--tkl-a2); }

/* Grund am gesperrten Knopf: sagt, wann es wieder geht */
.tkl-sperrgrund { display: flex; align-items: center; gap: 6px; font-size: var(--tkl-s-klein); color: var(--tkl-text-2); }
.tkl-sperrgrund .tkl-symbol { width: 18px; height: 18px; }

/* ===== Not-Aus ===== */
/* Auslöser in der Kopfleiste: umrandet, damit die Kopfleiste nur bei Störungen rot wird */
.tkl-notaus {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--tkl-a2);
  min-height: var(--tkl-knopf-höhe); padding: 0 var(--tkl-a3); margin: 0;
  border: 2px solid var(--tkl-gefahr-rand); border-radius: var(--tkl-ecke);
  background: transparent; color: var(--tkl-gefahr-rand);
  font-family: var(--tkl-text-schrift); font-size: var(--tkl-s-text); font-weight: 600; line-height: 1.1;
  white-space: nowrap; cursor: pointer;
  transition: background-color var(--tkl-dauer) ease-out, color var(--tkl-dauer) ease-out;
}
.tkl-notaus:hover, .tkl-notaus.tkl-ist-hover { background: var(--tkl-gefahr); border-color: var(--tkl-gefahr); color: var(--tkl-gefahr-text); }
/* Gesperrt (keine Verbindung zum Server): sichtbar, aber erkennbar ohne Wirkung; der Grund steht im Band */
.tkl-notaus:disabled { border-color: var(--tkl-rand); background: transparent; color: var(--tkl-text-aus); cursor: not-allowed; }
.tkl-notaus-band {
  display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; align-items: center; gap: var(--tkl-a2) var(--tkl-a3);
  padding: var(--tkl-a2) var(--tkl-a5);
  border-top: 1px solid var(--tkl-bad); border-bottom: 1px solid var(--tkl-bad);
  background: var(--tkl-bad-hauch); color: var(--tkl-text);
}
.tkl-notaus-band > .tkl-symbol { width: 24px; height: 24px; color: var(--tkl-bad); }
.tkl-notaus-band p { margin: 0; }
.tkl-notaus-band strong { font-weight: 600; }

/* ===== Rahmen der Bedienung: Kopfleiste ===== */
.tkl-kopf {
  position: sticky; top: 0; z-index: 20;
  display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--tkl-a4);
  min-height: 56px; padding: 0 var(--tkl-a5);
  background: var(--tkl-fläche); border-bottom: 1px solid var(--tkl-rand);
}
.tkl-kopf-marke { display: flex; align-items: center; gap: var(--tkl-a3); min-width: 0; color: var(--tkl-text); text-decoration: none; }
.tkl-kopf-marke > .tkl-symbol { width: 24px; height: 24px; }
.tkl-kopf-anlass { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.tkl-kopf-anlass strong { overflow: hidden; font-size: var(--tkl-s-text); font-weight: 600; white-space: nowrap; text-overflow: ellipsis; }
.tkl-kopf-anlass span { overflow: hidden; font-size: var(--tkl-s-klein); color: var(--tkl-text-2); white-space: nowrap; text-overflow: ellipsis; }
.tkl-arbeitsplätze { display: flex; align-self: stretch; gap: 2px; }
.tkl-arbeitsplätze a {
  display: flex; align-items: center; gap: var(--tkl-a2); height: 100%; min-height: 48px; padding: 0 var(--tkl-a3);
  border-top: 3px solid transparent; border-bottom: 3px solid transparent;
  color: var(--tkl-text-2); font-size: var(--tkl-s-text); font-weight: 600; text-decoration: none; white-space: nowrap;
}
.tkl-arbeitsplätze a:hover { color: var(--tkl-text); background: var(--tkl-fläche-2); }
.tkl-arbeitsplätze a[aria-current="page"] { color: var(--tkl-text); border-bottom-color: var(--tkl-text); }
.tkl-kopf-rechts { display: flex; align-items: center; gap: var(--tkl-a3); margin-left: auto; }
/* Gerätekennung: welches Gerät, welche Stufe, damit niemand am falschen Rechner schaltet */
.tkl-gerät { display: inline-flex; align-items: center; gap: var(--tkl-a2); font-size: var(--tkl-s-klein); color: var(--tkl-text-2); white-space: nowrap; }
.tkl-gerät strong { color: var(--tkl-text); font-weight: 600; }
.tkl-zustände {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--tkl-a2) var(--tkl-a3);
  padding: var(--tkl-a2) var(--tkl-a5);
}
.tkl-zustände-rechts { display: flex; flex-wrap: wrap; align-items: center; gap: var(--tkl-a2) var(--tkl-a4); margin-left: auto; font-size: var(--tkl-s-klein); color: var(--tkl-text-2); }
.tkl-zustände-rechts strong { color: var(--tkl-text); font-weight: 600; }

/* Kopflinie: Bodenlinie des Führenden, nur in der Regie, immer beschriftet */
.tkl-kopflinie { display: flex; align-items: center; gap: var(--tkl-a3); padding: 0 var(--tkl-a5) var(--tkl-a2); font-size: var(--tkl-s-klein); color: var(--tkl-text-2); }
.tkl-kopflinie-text { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.tkl-kopflinie-text strong { color: var(--tkl-text); font-weight: 600; }
.tkl-kopflinie .tkl-bodenlinie { flex: 1; }

/* ===== Rahmen der Bedienung: Kopfbereich, Gerät, Bänder (baut overlay/gestaltung/rahmen.js) ===== */
/* Kopfleiste, Zustände und Bänder stehen gemeinsam fest, damit eine Störung beim Scrollen sichtbar bleibt */
.tkl-kopfbereich { position: sticky; top: 0; z-index: 20; background: var(--tkl-grund); border-bottom: 1px solid var(--tkl-rand); }
.tkl-kopfbereich > .tkl-kopf { position: static; }
.tkl-kopfbereich > :is(.tkl-notaus-band, .tkl-band) { border-bottom: 0; }
.tkl-kopfbereich > .tkl-zustände { position: relative; }
.tkl-kopfbereich [hidden] { display: none !important; }
/* Geteilter Knopf: «Speaker öffnen» und «in eigenem Fenster» als ein Paar */
.tkl-geteilt { display: inline-flex; }
.tkl-geteilt > .tkl-knopf:first-child { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.tkl-geteilt > .tkl-knopf + .tkl-knopf { margin-left: -1px; border-top-left-radius: 0; border-bottom-left-radius: 0; }
.tkl-geteilt > .tkl-knopf:is(:hover, :focus-visible) { position: relative; z-index: 1; }
/* Menü der Arbeitsplätze: nur auf dem Handy sichtbar */
.tkl-kopf-menü { display: none; }
/* Gerätekennung als Knopf: öffnet das Feld «Dieses Gerät» */
.tkl-gerät-knopf {
  min-height: var(--tkl-ziel-klein); padding: 0 var(--tkl-a2); margin: 0 calc(-1 * var(--tkl-a2)) 0 0;
  border: 1px solid transparent; border-radius: var(--tkl-ecke); background: transparent;
  font-family: var(--tkl-text-schrift); line-height: 1.3; cursor: pointer;
}
.tkl-gerät-knopf:hover { background: var(--tkl-fläche-2); color: var(--tkl-text); }
.tkl-gerät-knopf > .tkl-symbol:last-child { width: 16px; height: 16px; transition: transform var(--tkl-dauer) ease-out; }
.tkl-gerät-knopf[aria-expanded="true"] { border-color: var(--tkl-rand-feld); background: var(--tkl-fläche); }
.tkl-gerät-knopf[aria-expanded="true"] > .tkl-symbol:last-child { transform: rotate(180deg); }
/* Noch nicht festgelegt: das Wort steht unterstrichen in Textfarbe, damit es auffällt, ohne Statusfarbe */
.tkl-gerät-knopf[data-zustand="offen"] strong { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
/* Feld «Dieses Gerät»: schwebt unter der Gerätekennung, kein Dialog; schliesst mit Escape oder einem Klick daneben */
.tkl-gerät-feld {
  position: absolute; z-index: 30; right: var(--tkl-a5); top: calc(100% - 2px);
  display: grid; gap: var(--tkl-a4); width: min(27rem, calc(100vw - 2 * var(--tkl-a4)));
  padding: var(--tkl-a4) var(--tkl-a5) var(--tkl-a5);
  border: 1px solid var(--tkl-rand-feld); border-radius: var(--tkl-ecke);
  background: var(--tkl-fläche); color: var(--tkl-text); box-shadow: var(--tkl-schatten);
}
.tkl-gerät-feld[hidden] { display: none; }
.tkl-gerät-feld h2 { margin: 0; font-family: var(--tkl-titel-schrift); font-size: var(--tkl-s-gross); font-weight: 600; line-height: 1.2; }
.tkl-gerät-feld .tkl-feld + .tkl-feld { margin-top: 0; }
.tkl-plätze { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--tkl-a4); min-width: 0; margin: 0; padding: 0; border: 0; }
.tkl-plätze legend { padding: 0 0 var(--tkl-a1); font-size: var(--tkl-s-klein); font-weight: 600; color: var(--tkl-text-2); }
.tkl-gerät-stufe { display: flex; flex-wrap: wrap; align-items: center; gap: var(--tkl-a2) var(--tkl-a3); padding-top: var(--tkl-a3); border-top: 1px solid var(--tkl-rand); font-size: var(--tkl-s-klein); color: var(--tkl-text-2); }
.tkl-gerät-stufe strong { color: var(--tkl-text); font-weight: 600; }
.tkl-gerät-stufe .tkl-knopfreihe { margin-left: auto; }
.tkl-gerät-feld > .tkl-knopfreihe { justify-content: flex-end; }
/* Bleibendes Band unter der Kopfleiste für Zustände der ganzen Seite (keine Verbindung, Lizenz) */
.tkl-band {
  --tkl-status: var(--tkl-neutral);
  display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; align-items: center; gap: var(--tkl-a2) var(--tkl-a3);
  padding: var(--tkl-a2) var(--tkl-a5); border-top: 1px solid var(--tkl-status); background: var(--tkl-neutral-hauch); color: var(--tkl-text);
}
.tkl-band > .tkl-symbol { width: 24px; height: 24px; color: var(--tkl-status); }
.tkl-band p { margin: 0; }
.tkl-band strong { font-weight: 600; }
.tkl-band[data-status="warn"] { --tkl-status: var(--tkl-warn); background: var(--tkl-warn-hauch); }
.tkl-band[data-status="bad"] { --tkl-status: var(--tkl-bad); background: var(--tkl-bad-hauch); }
/* Ohne Verbindung zum Server: Werte bleiben stehen, wirken aber erkennbar alt */
.tkl-offline .tkl-zustände .tkl-pille-wert { color: var(--tkl-text-2); }
/* Sprungmarke für die Tastatur: erst beim Fokus sichtbar, überspringt den Rahmen */
.tkl-sprung {
  position: absolute; z-index: 50; left: var(--tkl-a3); top: -60px; padding: var(--tkl-a2) var(--tkl-a3);
  border-radius: var(--tkl-ecke); background: var(--tkl-fläche); color: var(--tkl-text); font-weight: 600; text-decoration: none;
}
.tkl-sprung:focus-visible { top: var(--tkl-a2); }
/* Eine Zeile Zustände: lange Werte kürzen (ganzer Text im Tooltip), statt den festen Kopf zweizeilig zu machen */
@media (min-width: 761px) {
  .tkl-zustände { flex-wrap: nowrap; }
  .tkl-zustände > .tkl-pille { flex-wrap: nowrap; min-width: 0; }
  .tkl-zustände > .tkl-pille :is(.tkl-pille-name, .tkl-pille-seit, .tkl-knopf) { flex: none; white-space: nowrap; }
  .tkl-zustände > .tkl-pille .tkl-pille-wert { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  /* Zuerst weicht «Tafel und Stream» (steht in der Regie ohnehin), dann erst die Werte der Pillen */
  .tkl-zustände-rechts { display: contents; }
  .tkl-zustände-rechts > [data-teil="modus"] { flex: 0 1000 auto; min-width: 0; margin-left: auto; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  .tkl-zustände-rechts > .tkl-gerät-knopf { flex: none; }
}
/* Bis 1600 px trägt nur der Tooltip das «seit», sonst reicht die Zeile für drei Störungen nicht */
@media (min-width: 761px) and (max-width: 1599px) {
  .tkl-zustände > .tkl-pille .tkl-pille-seit { display: none; }
}

/* Seite mit Unternavigation (Einrichten, Anleitung): Seitenleiste links, auf dem Handy aufklappbar */
.tkl-mit-seitenleiste { display: grid; grid-template-columns: minmax(13rem, 16rem) minmax(0, 1fr); align-items: start; gap: var(--tkl-a6); }
.tkl-seitenleiste { position: sticky; top: calc(var(--tkl-kopf-höhe, 0px) + var(--tkl-a4)); max-height: calc(100vh - var(--tkl-kopf-höhe, 0px) - 2 * var(--tkl-a4)); overflow-y: auto; scrollbar-width: thin; }
.tkl-seitenleiste > summary { display: none; }
.tkl-seitenleiste nav { display: grid; gap: var(--tkl-a4); padding: 2px; }
.tkl-seitenleiste-gruppe { display: grid; gap: 2px; }
.tkl-seitenleiste-titel { padding: 0 var(--tkl-a3) var(--tkl-a1); font-size: var(--tkl-s-klein); font-weight: 600; color: var(--tkl-text-2); }
.tkl-seitenleiste a {
  --tkl-status: var(--tkl-neutral);
  display: flex; align-items: center; gap: var(--tkl-a2); min-height: max(36px, var(--tkl-ziel-klein)); padding: var(--tkl-a1) var(--tkl-a3);
  border: 2px solid transparent; border-radius: var(--tkl-ecke);
  color: var(--tkl-text-2); font-weight: 400; text-decoration: none;
}
.tkl-seitenleiste a:hover { background: var(--tkl-fläche-2); color: var(--tkl-text); }
.tkl-seitenleiste a[aria-current="page"] { border-color: var(--tkl-auswahl); background: var(--tkl-auswahl-hauch); color: var(--tkl-text); font-weight: 600; }
.tkl-seitenleiste a[data-status] > .tkl-symbol:last-child { margin-left: auto; color: var(--tkl-status); }
.tkl-seitenleiste a[data-status="ok"] { --tkl-status: var(--tkl-ok); }
.tkl-seitenleiste a:is([data-status="warn"], [data-status="sim"]) { --tkl-status: var(--tkl-warn); }
.tkl-seitenleiste a[data-status="bad"] { --tkl-status: var(--tkl-bad); }
/* In der Bedienung auf Zielgrösse klein, damit die Seitenleiste von Einrichten bei 1366 × 768 ganz Platz hat */
.tkl-nacht .tkl-seitenleiste a { min-height: var(--tkl-ziel-klein); padding-top: 2px; padding-bottom: 2px; }
.tkl-nacht .tkl-seitenleiste nav { gap: var(--tkl-a3); }

@media (max-width: 1599px) {
  .tkl-arbeitsplätze .tkl-symbol { display: none; }
}
@media (max-width: 760px) {
  .tkl-kopf { padding: 0 var(--tkl-a4); gap: 0 var(--tkl-a3); }
  .tkl-kopf-rechts { gap: var(--tkl-a2); }
  .tkl-arbeitsplätze {
    order: 10; flex: 1 0 100%; margin: 0 calc(-1 * var(--tkl-a4)); padding: 0 var(--tkl-a2);
    overflow-x: auto; scrollbar-width: none; border-top: 1px solid var(--tkl-rand);
  }
  .tkl-arbeitsplätze .tkl-symbol { display: inline-block; }
  /* Mit rahmen.js: oben Marke und Not-Aus, darunter der Menü-Knopf mit dem aktuellen Platz; aufgeklappt die Plätze untereinander */
  .tkl-nacht { --tkl-ziel-klein: 44px; --tkl-knopf-höhe: 44px; }
  .tkl-sprung { min-height: 44px; display: inline-flex; align-items: center; }
  .tkl-kopf-klappbar > .tkl-kopf-marke { flex: 1 1 auto; min-height: 44px; }
  .tkl-kopf-klappbar > .tkl-kopf-rechts { flex: none; }
  .tkl-kopf-klappbar .tkl-notaus { min-height: 44px; }
  .tkl-kopf-klappbar > .tkl-kopf-menü {
    display: flex; order: 9; flex: 1 0 100%; justify-content: flex-start; min-height: 44px;
    margin: 0 calc(-1 * var(--tkl-a4)); padding: 0 var(--tkl-a4);
    border: 0; border-top: 1px solid var(--tkl-rand); border-radius: 0;
  }
  .tkl-kopf-menü > .tkl-symbol:last-child { margin-left: auto; width: 16px; height: 16px; transition: transform var(--tkl-dauer) ease-out; }
  .tkl-kopf-menü[aria-expanded="true"] > .tkl-symbol:last-child { transform: rotate(180deg); }
  .tkl-kopf-menü:focus-visible { outline-offset: -4px; box-shadow: inset 0 0 0 2px var(--tkl-fokus-gegen); }
  .tkl-kopf-klappbar > .tkl-arbeitsplätze { display: none; }
  /* Der Kopf steht fest: ein langes Menü rollt in sich, sonst bleiben untere Plätze unerreichbar */
  .tkl-kopf-klappbar.tkl-menü-offen > .tkl-arbeitsplätze { display: grid; gap: 2px; padding: var(--tkl-a2) var(--tkl-a2) var(--tkl-a3);
    max-height: calc(100vh - var(--tkl-menü-rest, 7rem)); max-height: calc(100dvh - var(--tkl-menü-rest, 7rem)); overflow-y: auto; overscroll-behavior: contain; }
  .tkl-kopf-klappbar > .tkl-arbeitsplätze a { height: auto; min-height: 44px; padding: 0 var(--tkl-a3); border: 2px solid transparent; border-radius: var(--tkl-ecke); }
  .tkl-kopf-klappbar > .tkl-arbeitsplätze a[aria-current="page"] { border-color: var(--tkl-auswahl); background: var(--tkl-auswahl-hauch); }
  /* Nur die Kopfleiste steht fest, die Zustände rollen mit */
  .tkl-kopfbereich { display: contents; }
  .tkl-kopfbereich > .tkl-kopf { position: sticky; }
  .tkl-kopfbereich > .tkl-zustände { border-bottom: 1px solid var(--tkl-rand); }
  .tkl-gerät-feld { right: var(--tkl-a4); left: var(--tkl-a4); width: auto; }
  /* Bei ok nur Zeichen und Name, Störungen behalten ihren Text */
  .tkl-zustände { gap: var(--tkl-a2); }
  .tkl-zustände .tkl-pille[data-status="ok"] .tkl-pille-wert { display: none; }
  /* Am Beckenrand zählt der Inhalt: Störungen einzeilig, gesunde und abgeschaltete Dienste nur ohne Störung, Tafel und Gerät im Menü */
  .tkl-zustände > .tkl-pille { flex-wrap: nowrap; min-width: 0; max-width: 100%; }
  .tkl-zustände > .tkl-pille :is(.tkl-pille-name, .tkl-knopf) { flex: none; white-space: nowrap; }
  .tkl-zustände > .tkl-pille .tkl-pille-wert { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  .tkl-zustände > .tkl-pille .tkl-pille-seit { display: none; }
  .tkl-zustände:has(> .tkl-pille:is([data-status="warn"], [data-status="sim"], [data-status="bad"])) > .tkl-pille:is([data-status="ok"], [data-status="neutral"]) { display: none; }
  .tkl-kopf-klappbar:not(.tkl-menü-offen) ~ .tkl-zustände > .tkl-zustände-rechts { display: none; }
  .tkl-zustände-rechts { margin-left: 0; width: 100%; justify-content: space-between; gap: var(--tkl-a1) var(--tkl-a2); }
  .tkl-gerät-knopf > .tkl-symbol:first-child { display: none; }
  /* Am Beckenrand mit nassen Fingern: alles im Rahmen mindestens 44 px */
  .tkl-gerät-knopf { min-height: 44px; margin: 0 calc(-1 * var(--tkl-a2)); }
  .tkl-kopfbereich .tkl-pille .tkl-knopf { min-height: 44px; }
  .tkl-zustände, .tkl-kopflinie { padding-left: var(--tkl-a4); padding-right: var(--tkl-a4); }
  .tkl-breit { display: none !important; }
  .tkl-nacht .tkl-seitenleiste a { min-height: 44px; }
  .tkl-notaus-band, .tkl-band { grid-template-columns: 24px minmax(0, 1fr); padding-left: var(--tkl-a4); padding-right: var(--tkl-a4); }
  :is(.tkl-notaus-band, .tkl-band) > :last-child:not(p) { grid-column: 2; justify-self: start; }
  .tkl-mit-seitenleiste { grid-template-columns: minmax(0, 1fr); gap: var(--tkl-a4); }
  .tkl-seitenleiste { position: static; max-height: none; overflow: visible; border: 1px solid var(--tkl-rand-feld); border-radius: var(--tkl-ecke); background: var(--tkl-fläche); }
  .tkl-seitenleiste > summary {
    display: flex; align-items: center; gap: var(--tkl-a2); min-height: 44px; padding: 0 var(--tkl-a3);
    font-weight: 600; list-style: none; cursor: pointer;
  }
  .tkl-seitenleiste > summary::-webkit-details-marker { display: none; }
  .tkl-seitenleiste > summary > .tkl-symbol:last-child { margin-left: auto; transition: transform var(--tkl-dauer) ease-out; }
  .tkl-seitenleiste[open] > summary > .tkl-symbol:last-child { transform: rotate(180deg); }
  .tkl-seitenleiste nav { padding: 0 var(--tkl-a2) var(--tkl-a3); }
  .tkl-seitenleiste a { min-height: 44px; }
}

/* ===== Status-Pille: Farbe nur am Zeichen (und als Hauch bei warn/bad), der Text bleibt neutral ===== */
.tkl-pille {
  --tkl-status: var(--tkl-neutral);
  display: inline-flex; align-items: center; flex-wrap: wrap; gap: var(--tkl-a1) var(--tkl-a2);
  min-height: 36px; padding: var(--tkl-a1) var(--tkl-a3) var(--tkl-a1) var(--tkl-a2);
  border: 1px solid var(--tkl-rand); border-radius: var(--tkl-ecke);
  background: var(--tkl-fläche); color: var(--tkl-text);
  font-size: var(--tkl-s-klein); line-height: 1.3;
}
.tkl-pille > .tkl-symbol { color: var(--tkl-status); }
.tkl-pille-name { font-weight: 600; }
.tkl-pille-wert, .tkl-pille-seit { color: var(--tkl-text-2); font-variant-numeric: tabular-nums; }
/* rahmen.js fasst Wert und «seit» zusammen, damit es beim Nachführen nur einen Teil ersetzt */
.tkl-pille > [data-wert] { display: contents; }
.tkl-pille .tkl-knopf { min-height: var(--tkl-ziel-klein); margin-left: var(--tkl-a1); padding: 0 var(--tkl-a2); font-size: var(--tkl-s-klein); }
.tkl-pille[data-status="ok"] { --tkl-status: var(--tkl-ok); }
.tkl-pille[data-status="neutral"] { --tkl-status: var(--tkl-neutral); }
.tkl-pille[data-status="warn"], .tkl-pille[data-status="sim"] { --tkl-status: var(--tkl-warn); background: var(--tkl-warn-hauch); border-color: var(--tkl-warn); }
.tkl-pille[data-status="bad"] { --tkl-status: var(--tkl-bad); background: var(--tkl-bad-hauch); border-color: var(--tkl-bad); }
.tkl-pille:is([data-status="warn"], [data-status="sim"], [data-status="bad"]) :is(.tkl-pille-wert, .tkl-pille-seit) { color: var(--tkl-text); }

/* Zustandswort (inoffiziell, offiziell) und Marken (Rekord, PB) */
.tkl-zustand {
  --tkl-status: var(--tkl-neutral);
  display: inline-flex; align-items: center; gap: 4px; min-height: 24px; padding: 0 var(--tkl-a2);
  border-radius: var(--tkl-ecke-innen); background: var(--tkl-neutral-hauch); color: var(--tkl-status);
  font-size: var(--tkl-s-klein); font-weight: 600; line-height: 1; white-space: nowrap;
}
.tkl-zustand[data-status="ok"] { --tkl-status: var(--tkl-ok); background: var(--tkl-ok-hauch); }
.tkl-zustand:is([data-status="warn"], [data-status="sim"]) { --tkl-status: var(--tkl-warn); background: var(--tkl-warn-hauch); }
.tkl-zustand[data-status="bad"] { --tkl-status: var(--tkl-bad); background: var(--tkl-bad-hauch); }
.tkl-zustand[data-status="neutral"] { color: var(--tkl-text); }
.tkl-marke {
  display: inline-flex; align-items: center; min-height: 24px; padding: 0 6px;
  border: 2px solid var(--tkl-text); border-radius: var(--tkl-ecke-innen); color: var(--tkl-text);
  font-family: var(--tkl-titel-schrift); font-size: var(--tkl-s-klein); font-weight: 600; line-height: 1; white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.tkl-marke-voll { background: var(--tkl-text); color: var(--tkl-grund); }
.tkl-medaille {
  display: inline-grid; place-items: center; flex: none; width: 26px; height: 26px; border-radius: 50%;
  background: var(--tkl-gold); color: var(--tkl-medaille-tinte); box-shadow: inset 0 0 0 1px rgba(11, 15, 18, 0.35);
  font-family: var(--tkl-titel-schrift); font-size: 14px; font-weight: 700; line-height: 1;
}
.tkl-medaille[data-platz="2"] { background: var(--tkl-silber); }
.tkl-medaille[data-platz="3"] { background: var(--tkl-bronze); }

/* ===== Abschnitt mit Titel und «?» ===== */
.tkl-abschnitt { min-width: 0; }
.tkl-abschnitt + .tkl-abschnitt { margin-top: var(--tkl-a7); }
.tkl-abschnitt-kopf { display: flex; flex-wrap: wrap; align-items: center; gap: var(--tkl-a1) var(--tkl-a2); min-height: 32px; margin-bottom: var(--tkl-a3); }
.tkl-abschnitt-kopf :is(h1, h2, h3) { margin: 0; font-family: var(--tkl-titel-schrift); font-size: var(--tkl-s-gross); font-weight: 600; line-height: 1.2; }
.tkl-abschnitt-neben { font-size: var(--tkl-s-klein); color: var(--tkl-text-2); }
.tkl-abschnitt-kopf > :last-child:not(:first-child):not(.tkl-hilfe) { margin-left: auto; }
.tkl-hilfe {
  display: inline-grid; place-items: center; width: var(--tkl-ziel-klein); height: var(--tkl-ziel-klein); padding: 0; margin: 0;
  border: 0; border-radius: var(--tkl-ecke); background: transparent; color: var(--tkl-text-2);
  text-decoration: none; cursor: pointer;
}
.tkl-hilfe:hover, .tkl-hilfe.tkl-ist-hover { color: var(--tkl-text); background: var(--tkl-fläche-2); }

/* Klappe «Erweitert»: Mächtigkeit kommt erst hier */
.tkl-erweitert { margin-top: var(--tkl-a3); border-top: 1px solid var(--tkl-rand); }
.tkl-erweitert > summary {
  display: flex; align-items: center; gap: var(--tkl-a2); min-height: var(--tkl-ziel-klein); padding: var(--tkl-a1) 0;
  color: var(--tkl-text-2); font-weight: 600; list-style: none; cursor: pointer;
}
.tkl-erweitert > summary::-webkit-details-marker { display: none; }
.tkl-erweitert > summary:hover { color: var(--tkl-text); }
.tkl-erweitert > summary > .tkl-symbol:first-child { transition: transform var(--tkl-dauer) ease-out; }
.tkl-erweitert[open] > summary > .tkl-symbol:first-child { transform: rotate(90deg); }
.tkl-erweitert-zahl { margin-left: auto; font-size: var(--tkl-s-klein); font-weight: 400; }
.tkl-erweitert-inhalt { display: grid; gap: var(--tkl-a4); padding: var(--tkl-a2) 0 var(--tkl-a3); }

/* ===== Felder ===== */
.tkl-feld { display: grid; align-content: start; gap: var(--tkl-a1); min-width: 0; }
.tkl-feld + .tkl-feld { margin-top: var(--tkl-a4); }
.tkl-feld > label, .tkl-feld-titel { display: flex; align-items: center; gap: 6px; font-size: var(--tkl-s-klein); font-weight: 600; color: var(--tkl-text-2); }
.tkl-feld-hilfe { font-size: var(--tkl-s-klein); color: var(--tkl-text-2); }
.tkl-feld-fehler { display: flex; align-items: flex-start; gap: 6px; font-size: var(--tkl-s-klein); font-weight: 600; color: var(--tkl-bad); }
.tkl-feld-fehler .tkl-symbol { width: 18px; height: 18px; margin-top: 1px; }
.tkl-feld-reihe { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--tkl-a2); }
.tkl-feld-reihe > .tkl-eingabe, .tkl-feld-reihe > .tkl-auswahl { flex: 1 1 12rem; }
.tkl-eingabe, .tkl-auswahl {
  display: block; width: 100%; min-width: 0; min-height: var(--tkl-knopf-höhe); margin: 0;
  padding: var(--tkl-a2) var(--tkl-a3);
  border: 1px solid var(--tkl-rand-feld); border-radius: var(--tkl-ecke);
  background-color: var(--tkl-eingabe-grund); color: var(--tkl-text);
  font-family: var(--tkl-text-schrift); font-size: var(--tkl-s-text); line-height: 1.35;
  transition: border-color var(--tkl-dauer) ease-out;
}
.tkl-eingabe.tkl-code-feld { font-family: var(--tkl-code-schrift); font-variant-ligatures: none; }
textarea.tkl-eingabe { resize: vertical; min-height: calc(var(--tkl-knopf-höhe) * 2); }
.tkl-eingabe::placeholder { color: var(--tkl-text-2); opacity: 1; }
.tkl-eingabe:hover, .tkl-auswahl:hover { border-color: var(--tkl-text-2); }
.tkl-eingabe:focus-visible, .tkl-auswahl:focus-visible, .tkl-eingabe.tkl-ist-fokus, .tkl-auswahl.tkl-ist-fokus { border-color: var(--tkl-fokus); }
.tkl-eingabe[aria-invalid="true"], .tkl-auswahl[aria-invalid="true"] { border-color: var(--tkl-bad); box-shadow: inset 0 0 0 1px var(--tkl-bad); }
.tkl-eingabe:disabled, .tkl-auswahl:disabled {
  border-color: var(--tkl-rand); background-color: var(--tkl-fläche-2); color: var(--tkl-text-aus); cursor: not-allowed;
}
.tkl-auswahl {
  appearance: none; -webkit-appearance: none; padding-right: 40px; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 20px) 52%, calc(100% - 14px) 52%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}
.tkl-auswahl option { background: var(--tkl-fläche); color: var(--tkl-text); }

/* Häkchen und Optionen */
.tkl-haken { display: inline-flex; align-items: center; gap: var(--tkl-a2); min-height: var(--tkl-ziel-klein); cursor: pointer; }
.tkl-haken input {
  appearance: none; -webkit-appearance: none; display: inline-grid; place-content: center; flex: none;
  width: 20px; height: 20px; margin: 0;
  border: 2px solid var(--tkl-rand-feld); border-radius: var(--tkl-ecke-innen);
  background: var(--tkl-eingabe-grund); cursor: pointer;
}
.tkl-haken input[type="radio"] { border-radius: 50%; }
.tkl-haken input::before {
  content: ""; width: 12px; height: 12px; background: var(--tkl-haupt-text); transform: scale(0);
  clip-path: polygon(14% 44%, 0 59%, 39% 100%, 100% 22%, 86% 8%, 38% 70%);
}
.tkl-haken input[type="radio"]::before { width: 8px; height: 8px; border-radius: 50%; clip-path: none; }
.tkl-haken input:checked { background: var(--tkl-haupt); border-color: var(--tkl-haupt); }
.tkl-haken input:checked::before { transform: scale(1); }
.tkl-haken input:disabled { border-color: var(--tkl-rand); background: var(--tkl-fläche-2); cursor: not-allowed; }
.tkl-haken:has(input:disabled) { color: var(--tkl-text-aus); cursor: not-allowed; }

/* ===== Knopfgruppe / Segment ===== */
.tkl-segment {
  display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 2px;
  border: 1px solid var(--tkl-rand-feld); border-radius: var(--tkl-ecke); background: var(--tkl-fläche);
}
.tkl-segment > :is(button, a) {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--tkl-a2);
  min-height: max(var(--tkl-ziel-klein), calc(var(--tkl-knopf-höhe) - 6px)); padding: 0 var(--tkl-a3); margin: 0;
  border: 2px solid transparent; border-radius: var(--tkl-ecke-innen);
  background: transparent; color: var(--tkl-text-2);
  font-family: var(--tkl-text-schrift); font-size: var(--tkl-s-text); font-weight: 400; line-height: 1.1;
  text-decoration: none; white-space: nowrap; cursor: pointer;
}
.tkl-segment > :is(button, a):hover, .tkl-segment > .tkl-ist-hover { background: var(--tkl-fläche-2); color: var(--tkl-text); }
/* Auswahl: türkiser Rand, kräftiger Hauch, Schrift 600; der Fokus ist ein Ring in Textfarbe ausserhalb */
.tkl-segment > :is([aria-checked="true"], [aria-pressed="true"], [aria-selected="true"], [aria-current="true"], [aria-current="page"]) {
  border-color: var(--tkl-auswahl); background: var(--tkl-auswahl-hauch); color: var(--tkl-text); font-weight: 600;
}
.tkl-segment > :is(button:disabled, [aria-disabled="true"]) { color: var(--tkl-text-aus); background: transparent; cursor: not-allowed; }
/* «läuft»: was auf der Anzeige ist, als Wort, nicht nur als Zeichen */
.tkl-läuft {
  display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 6px;
  border-radius: var(--tkl-ecke-innen); background: var(--tkl-weg); color: var(--tkl-grund);
  font-size: var(--tkl-s-klein); font-weight: 600; line-height: 1; white-space: nowrap;
}
.tkl-läuft .tkl-symbol { width: 16px; height: 16px; }
.tkl-bereit {
  display: inline-flex; align-items: center; height: 22px; padding: 0 6px;
  border: 1px solid var(--tkl-auswahl); border-radius: var(--tkl-ecke-innen); background: var(--tkl-auswahl-hauch); color: var(--tkl-text);
  font-size: var(--tkl-s-klein); font-weight: 600; line-height: 1; white-space: nowrap;
}

/* ===== Schaltmodell: «Auf der Anzeige | Vorbereitet», dann «Auf die Anzeige» ===== */
.tkl-schalten { display: grid; gap: var(--tkl-a3); min-width: 0; }
.tkl-schalt-paar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--tkl-a3); }
.tkl-schirm { display: flex; flex-direction: column; gap: var(--tkl-a2); min-width: 0; padding: var(--tkl-a2) var(--tkl-a3) var(--tkl-a3); border: 2px solid var(--tkl-rand); border-radius: var(--tkl-ecke); }
.tkl-schirm[data-rolle="sendung"] { border-color: var(--tkl-weg); }
.tkl-schirm[data-rolle="bereit"] { border-color: var(--tkl-auswahl); }
.tkl-schirm-kopf { display: flex; align-items: center; justify-content: space-between; gap: var(--tkl-a2); min-height: 28px; }
.tkl-schirm-kopf :is(h2, h3) { margin: 0; font-family: var(--tkl-text-schrift); font-size: var(--tkl-s-text); font-weight: 600; }
.tkl-schirm-fuss { font-size: var(--tkl-s-klein); color: var(--tkl-text-2); }
.tkl-schirm-fuss strong { color: var(--tkl-text); font-weight: 600; }
.tkl-schalt-aktion { display: flex; flex-wrap: wrap; align-items: center; gap: var(--tkl-a2); }
.tkl-schalt-folge { margin: 0 auto 0 0; max-width: 52ch; font-size: var(--tkl-s-klein); color: var(--tkl-text-2); }
/* Vorschau im Bild der unveränderten Anzeigetafel (feste Farben der Ausgabe) */
.tkl-vorschau { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--tkl-tafel-grund); color: var(--tkl-tafel-text); }
.tkl-vorschau > iframe { display: block; width: 100%; height: 100%; border: 0; pointer-events: none; }
.tkl-vorschau-leer { display: grid; place-content: center; gap: var(--tkl-a1); height: 100%; padding: var(--tkl-a3); font-size: var(--tkl-s-klein); text-align: center; }
.tkl-tafel { display: flex; flex-direction: column; gap: 6px; height: 100%; padding: var(--tkl-a2) var(--tkl-a3); font-family: var(--tkl-titel-schrift); font-weight: 600; font-variant-numeric: tabular-nums; }
.tkl-tafel-kopf { display: flex; align-items: baseline; gap: var(--tkl-a2); padding-bottom: 4px; border-bottom: 2px solid var(--tkl-tafel-text); font-size: 16px; font-weight: 700; line-height: 1.2; }
.tkl-tafel-kopf > :first-child { color: var(--tkl-tafel-gelb); }
.tkl-tafel-kopf > :last-child { margin-left: auto; }
.tkl-tafel-zeilen { display: grid; margin: 0; padding: 0; list-style: none; font-size: 14px; line-height: 1.22; }
.tkl-tafel-zeilen li { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto 22px; gap: var(--tkl-a2); }
.tkl-tafel-zeilen li > :first-child, .tkl-tafel-zeilen li > :last-child { color: var(--tkl-tafel-gelb); }
.tkl-tafel-zeilen li > :last-child { text-align: right; }
.tkl-tafel-zeilen li > :nth-child(2) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tkl-tafel-podest { flex: 1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; gap: var(--tkl-a2); margin: 0; padding: 0; list-style: none; font-size: 14px; line-height: 1.25; }
.tkl-tafel-podest li { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 0; text-align: center; }
.tkl-tafel-podest li > span:not(.tkl-medaille) { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tkl-tafel-podest li::after { content: ""; display: block; width: 100%; height: 20px; margin-top: var(--tkl-a1); background: #1F2B35; }
.tkl-tafel-podest li[data-platz="1"]::after { height: 48px; }
.tkl-tafel-podest li[data-platz="2"]::after { height: 32px; }
.tkl-tafel-gelb { color: var(--tkl-tafel-gelb); }
@media (max-width: 760px) {
  .tkl-schalt-paar { grid-template-columns: minmax(0, 1fr); }
}

/* ===== Rückmeldung nach einer Aktion ===== */
.tkl-meldungen {
  position: fixed; z-index: 40; right: var(--tkl-a5); bottom: var(--tkl-a5);
  display: grid; gap: var(--tkl-a2); width: min(26rem, calc(100vw - 2 * var(--tkl-a4))); pointer-events: none;
  background: none;
}
.tkl-meldungen > * { pointer-events: auto; }
.tkl-meldung {
  --tkl-status: var(--tkl-neutral);
  display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; align-items: center; gap: 2px var(--tkl-a3);
  padding: var(--tkl-a2) var(--tkl-a2) var(--tkl-a2) var(--tkl-a4);
  border: 1px solid var(--tkl-rand-feld); border-radius: var(--tkl-ecke);
  background: var(--tkl-fläche); color: var(--tkl-text); box-shadow: var(--tkl-schatten);
  animation: tkl-erscheinen 200ms var(--tkl-kurve);
}
.tkl-meldung > .tkl-symbol { width: 24px; height: 24px; color: var(--tkl-status); }
.tkl-meldung-text { min-width: 0; }
.tkl-meldung-text strong { font-weight: 600; }
.tkl-meldung-aktion { display: flex; gap: var(--tkl-a1); }
.tkl-meldung[data-status="ok"] { --tkl-status: var(--tkl-ok); }
.tkl-meldung:is([data-status="warn"], [data-status="sim"]) { --tkl-status: var(--tkl-warn); border-color: var(--tkl-warn); }
.tkl-meldung[data-status="bad"] { --tkl-status: var(--tkl-bad); border-color: var(--tkl-bad); }
@keyframes tkl-erscheinen { from { opacity: 0; transform: translateY(8px); } }
.tkl-live .tkl-meldungen { right: var(--tkl-a4); left: var(--tkl-a4); bottom: calc(76px + env(safe-area-inset-bottom)); width: auto; }
@media (max-width: 760px) {
  .tkl-meldungen { right: var(--tkl-a4); left: var(--tkl-a4); bottom: var(--tkl-a4); width: auto; }
}
/* Über einer offenen Speicherleiste, sonst deckt eine stehende Meldung «Speichern» zu */
body:has(.tkl-speicherleiste:not([hidden])) .tkl-meldungen { bottom: calc(var(--tkl-speicherleiste-höhe, 72px) + var(--tkl-a3)); }

/* ===== Speicherleiste: erscheint nur bei ungespeicherten Änderungen ===== */
.tkl-speicherleiste {
  position: sticky; bottom: 0; z-index: 15;
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--tkl-a2) var(--tkl-a3);
  padding: var(--tkl-a3) var(--tkl-a5);
  border-top: 1px solid var(--tkl-rand-feld); background: var(--tkl-fläche);
}
.tkl-speicherleiste[hidden] { display: none; }
.tkl-speicherleiste-text { display: flex; align-items: center; gap: var(--tkl-a2); margin-right: auto; font-weight: 600; }
.tkl-speicherleiste-text span { font-weight: 400; color: var(--tkl-text-2); }

/* ===== Fortschritt und Laden ===== */
.tkl-fortschritt { display: grid; gap: var(--tkl-a1); min-width: 0; }
.tkl-fortschritt-kopf { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0 var(--tkl-a3); font-size: var(--tkl-s-klein); }
.tkl-fortschritt-kopf > :first-child { font-weight: 600; }
.tkl-fortschritt-kopf > :last-child { color: var(--tkl-text-2); font-variant-numeric: tabular-nums; }
.tkl-fortschritt progress {
  appearance: none; -webkit-appearance: none; display: block; width: 100%; height: 6px; margin: 0;
  border: 0; border-radius: 3px; background: var(--tkl-spur); color: var(--tkl-weg); overflow: hidden;
}
.tkl-fortschritt progress::-webkit-progress-bar { background: var(--tkl-spur); border-radius: 3px; }
.tkl-fortschritt progress::-webkit-progress-value { background: var(--tkl-weg); border-radius: 3px; }
.tkl-fortschritt progress::-moz-progress-bar { background: var(--tkl-weg); border-radius: 3px; }
.tkl-fortschritt progress:indeterminate {
  background: linear-gradient(90deg, var(--tkl-spur) 0 35%, var(--tkl-weg) 35% 65%, var(--tkl-spur) 65%) 0 0 / 300% 100%;
  animation: tkl-laufen 1.4s linear infinite;
}
.tkl-fortschritt progress:indeterminate::-webkit-progress-bar { background: transparent; }
.tkl-fortschritt progress:indeterminate::-moz-progress-bar { background: transparent; }
@keyframes tkl-laufen { from { background-position: 100% 0; } to { background-position: 0 0; } }
.tkl-fortschritt[data-status="bad"] progress::-webkit-progress-value { background: var(--tkl-bad); }
.tkl-fortschritt[data-status="bad"] progress::-moz-progress-bar { background: var(--tkl-bad); }
.tkl-fortschritt[data-status="bad"] .tkl-fortschritt-kopf > :last-child { color: var(--tkl-bad); font-weight: 600; }
.tkl-lädt { display: inline-flex; align-items: center; gap: var(--tkl-a2); color: var(--tkl-text-2); }
/* Schritte eines geführten Ablaufs (Assistent): die Reihenfolge trägt Information */
.tkl-schritte { display: flex; flex-wrap: wrap; gap: var(--tkl-a2) var(--tkl-a4); margin: 0; padding: 0; list-style: none; }
.tkl-schritte li { display: inline-flex; align-items: center; gap: var(--tkl-a2); color: var(--tkl-text-2); }
.tkl-schritte li > .tkl-plakette { width: 24px; height: 24px; font-size: 14px; }
.tkl-schritte li > .tkl-plakette .tkl-symbol { width: 16px; height: 16px; }
.tkl-schritte li:not([data-zustand="erledigt"]):not([aria-current]) > .tkl-plakette { background: transparent; box-shadow: inset 0 0 0 2px var(--tkl-rand-feld); color: var(--tkl-text-2); }
.tkl-schritte li[aria-current] { color: var(--tkl-text); font-weight: 600; }
.tkl-schritte li[data-zustand="erledigt"] { color: var(--tkl-text); }

/* ===== Tabelle ===== */
.tkl-tabelle { width: 100%; border-collapse: collapse; font-size: var(--tkl-s-text); line-height: 1.4; }
.tkl-tabelle caption { padding-bottom: var(--tkl-a2); font-family: var(--tkl-titel-schrift); font-size: var(--tkl-s-gross); font-weight: 600; text-align: left; }
.tkl-tabelle th {
  padding: 0 var(--tkl-a3) var(--tkl-a2); border-bottom: 1px solid var(--tkl-rand-feld);
  font-size: var(--tkl-s-klein); font-weight: 600; color: var(--tkl-text-2); text-align: left; vertical-align: bottom; white-space: nowrap;
}
.tkl-tabelle td { padding: var(--tkl-a2) var(--tkl-a3); border-bottom: 1px solid var(--tkl-rand); vertical-align: baseline; }
.tkl-tabelle :is(th, td):first-child { padding-left: 0; }
.tkl-tabelle :is(th, td):last-child { padding-right: 0; }
.tkl-tabellenrahmen .tkl-tabelle :is(th, td):first-child { padding-left: var(--tkl-a1); }
.tkl-tabellenrahmen .tkl-tabelle :is(th, td):last-child { padding-right: var(--tkl-a1); }
.tkl-tabelle .tkl-r { text-align: right; }
.tkl-tabelle tbody th { font-size: var(--tkl-s-text); color: var(--tkl-text); vertical-align: baseline; border-bottom-color: var(--tkl-rand); white-space: normal; }
.tkl-nacht .tkl-tabelle tbody tr:hover > * { background: var(--tkl-fläche-2); }
.tkl-tabelle tr[aria-current] > * { background: var(--tkl-fläche-2); }
.tkl-tabelle tr[aria-current] > :first-child::before { content: ""; display: inline-block; width: 8px; height: 8px; margin: 0 var(--tkl-a2); background: var(--tkl-text); vertical-align: 0.08em; }
.tkl-tabellenrahmen { max-width: 100%; overflow-x: auto; }
/* Sortierbarer Kopf: Knopf im th, Richtung über aria-sort */
.tkl-sortieren {
  display: inline-flex; align-items: center; gap: 4px; min-height: var(--tkl-ziel-klein); margin: 0 -4px; padding: 0 4px;
  border: 0; border-radius: var(--tkl-ecke-innen); background: transparent; color: inherit;
  font: inherit; font-weight: 600; text-align: inherit; cursor: pointer;
}
.tkl-sortieren:hover { background: var(--tkl-fläche-2); color: var(--tkl-text); }
.tkl-sortieren .tkl-symbol { width: 16px; height: 16px; visibility: hidden; }
.tkl-tabelle th.tkl-r .tkl-sortieren { flex-direction: row-reverse; }
.tkl-tabelle th:is([aria-sort="ascending"], [aria-sort="descending"]) { color: var(--tkl-text); }
.tkl-tabelle th:is([aria-sort="ascending"], [aria-sort="descending"]) .tkl-symbol { visibility: visible; }
.tkl-tabelle th[aria-sort="ascending"] .tkl-symbol { transform: rotate(180deg); }
/* Leere Zustände: was fehlt und wann es kommt */
.tkl-leer { display: flex; align-items: center; gap: var(--tkl-a2); padding: var(--tkl-a4) 0; color: var(--tkl-text-2); }
.tkl-leer .tkl-symbol { color: var(--tkl-neutral); }
.tkl-leer-block { display: grid; justify-items: start; gap: var(--tkl-a2); padding: var(--tkl-a5) 0; max-width: 46ch; }
.tkl-leer-block > .tkl-symbol { width: 24px; height: 24px; color: var(--tkl-neutral); }
.tkl-leer-block p { margin: 0; color: var(--tkl-text-2); }
.tkl-leer-block strong { font-weight: 600; color: var(--tkl-text); }

/* ===== Startblock-Plakette ===== */
.tkl-plakette {
  display: inline-grid; place-items: center; flex: none;
  width: 28px; height: 28px; border-radius: var(--tkl-ecke);
  background: var(--tkl-plakette); color: var(--tkl-plakette-text);
  font-family: var(--tkl-titel-schrift); font-size: 16px; font-weight: 700; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.tkl-plakette-klein { width: 20px; height: 20px; font-size: 14px; }
.tkl-plakette-gross { width: 44px; height: 44px; font-size: 24px; }
.tkl-plakette-leer { background: transparent; box-shadow: inset 0 0 0 2px var(--tkl-spur-stark); color: var(--tkl-text-2); }

/* ===== Bodenlinie mit T: Spur = Bahn, Weg = gemessene Strecke, Querstrich = Wende, T = Wand ===== */
.tkl-bodenlinie { display: block; width: 100%; height: 12px; overflow: visible; }
.tkl-bodenlinie line { fill: none; vector-effect: non-scaling-stroke; }
.tkl-bl-spur { stroke: var(--tkl-spur); stroke-width: 1.5; }
.tkl-bl-wende { stroke: var(--tkl-spur-stark); stroke-width: 1.5; }
.tkl-bl-weg { stroke: var(--tkl-weg); stroke-width: 3; stroke-linecap: round; }
.tkl-bl-t { stroke: var(--tkl-spur-stark); stroke-width: 3; }
.tkl-bodenlinie.tkl-angeschlagen .tkl-bl-t { stroke: var(--tkl-weg); }

/* ===== Bahnzeile: jede Zeile eine Bahn, Fugen wie Bahnleinen ===== */
.tkl-bahnen { display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 0; list-style: none; container-type: inline-size; }
.tkl-bahnzeile {
  display: grid; align-items: center; column-gap: var(--tkl-a3);
  grid-template-columns: 28px minmax(8rem, 15rem) minmax(4rem, 1fr) 5.5rem 2.25rem;
  grid-template-areas: "bahn wer linie zeit rang";
  min-height: 44px; padding: var(--tkl-a1) var(--tkl-a3);
  background: var(--tkl-zeile);
}
.tkl-bahnzeile:has(.tkl-stern) { grid-template-columns: 28px minmax(8rem, 15rem) minmax(4rem, 1fr) 5.5rem 2.25rem 44px; grid-template-areas: "bahn wer linie zeit rang stern"; padding-right: 0; }
.tkl-bahnzeile > .tkl-plakette { grid-area: bahn; }
.tkl-bahn-wer { grid-area: wer; display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.tkl-bahn-name { display: flex; align-items: center; gap: 6px; overflow: hidden; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; }
.tkl-bahn-verein { overflow: hidden; font-size: var(--tkl-s-klein); color: var(--tkl-text-2); white-space: nowrap; text-overflow: ellipsis; }
.tkl-bahnzeile > .tkl-bodenlinie, .tkl-bahn-linie { grid-area: linie; }
.tkl-bahn-zeit { grid-area: zeit; display: flex; flex-direction: column; align-items: flex-end; line-height: 1.15; }
.tkl-bahn-zeit b { font-family: var(--tkl-titel-schrift); font-size: var(--tkl-s-gross); font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tkl-bahn-zeit > span { font-size: var(--tkl-s-klein); color: var(--tkl-text-2); white-space: nowrap; }
.tkl-bahn-rang { grid-area: rang; font-family: var(--tkl-titel-schrift); font-size: var(--tkl-s-gross); font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; }
.tkl-bahn-hinweis { grid-area: linie; font-size: var(--tkl-s-klein); color: var(--tkl-text-2); }
.tkl-stern {
  grid-area: stern; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; margin: 0;
  border: 0; border-radius: var(--tkl-ecke); background: transparent; color: var(--tkl-text-2); cursor: pointer;
}
.tkl-stern .tkl-symbol { width: 22px; height: 22px; }
.tkl-stern[aria-pressed="true"] { color: var(--tkl-text); }
.tkl-bahnzeile[data-zustand="ziel"] .tkl-bl-t { stroke: var(--tkl-weg); }
.tkl-bahnzeile[data-zustand="dns"] > .tkl-plakette { background: transparent; box-shadow: inset 0 0 0 2px var(--tkl-spur-stark); color: var(--tkl-text-2); }
.tkl-bahnzeile[data-zustand="dns"] .tkl-bahn-name { color: var(--tkl-text-2); text-decoration: line-through; text-decoration-thickness: 2px; }
.tkl-bahnzeile[data-zustand="dns"] .tkl-bahn-zeit b { font-size: var(--tkl-s-text); color: var(--tkl-text-2); }
.tkl-bahnzeile[data-zustand="dsq"] .tkl-bahn-zeit b { font-size: var(--tkl-s-text); color: var(--tkl-bad); }

/* Schmal (Handy, Seitenleiste): Linie wandert unter den Namen */
@container (max-width: 34rem) {
  .tkl-bahnzeile, .tkl-bahnzeile:has(.tkl-stern) {
    grid-template-columns: 28px minmax(0, 1fr) auto 2rem;
    grid-template-areas: "bahn wer zeit rang" ". linie linie linie";
    row-gap: 2px; padding-top: 6px; padding-bottom: 4px;
  }
  .tkl-bahnzeile:has(.tkl-stern) {
    grid-template-columns: 28px minmax(0, 1fr) auto 2rem 44px;
    grid-template-areas: "bahn wer zeit rang stern" ". linie linie linie stern";
  }
  .tkl-bahnzeile > .tkl-bodenlinie { height: 10px; }
}

/* ===== Leuchtstift: Favoriten, nur in der Liveansicht; immer zusammen mit dem vollen Stern ===== */
.tkl-live .tkl-leuchtstift { position: relative; isolation: isolate; color: var(--tkl-leuchtstift-tinte); }
.tkl-live .tkl-leuchtstift::before {
  content: ""; position: absolute; z-index: -1; inset: 4px 6px 4px 3px;
  background: var(--tkl-leuchtstift);
}
.tkl-live .tkl-leuchtstift :is(.tkl-bahn-verein, .tkl-bahn-zeit > span, .tkl-bahn-hinweis, .tkl-stern, .tkl-bahn-name) { color: var(--tkl-leuchtstift-tinte); }
.tkl-live .tkl-leuchtstift > .tkl-plakette { background: var(--tkl-leuchtstift-tinte); color: #FFFFFF; }
.tkl-live .tkl-leuchtstift .tkl-bl-spur, .tkl-live .tkl-leuchtstift .tkl-bl-wende { stroke: var(--tkl-leuchtstift-spur); }
.tkl-live .tkl-leuchtstift :is(.tkl-bl-weg, .tkl-bl-t) { stroke: var(--tkl-leuchtstift-tinte); }
.tkl-live .tkl-leuchtstift :is(:focus-visible, .tkl-ist-fokus) { --tkl-fokus: var(--tkl-leuchtstift-tinte); --tkl-fokus-gegen: var(--tkl-leuchtstift); }

/* ===== Fahrplan des Abschnitts: die Bodenlinie der Zeit (nur Regie) ===== */
.tkl-fahrplan {
  display: grid; grid-template-columns: minmax(11rem, 13rem) minmax(0, 1fr); align-items: center; gap: var(--tkl-a5);
  padding: var(--tkl-a3) var(--tkl-a5) var(--tkl-a2);
}
.tkl-fahrplan-titel { display: grid; gap: 2px; line-height: 1.3; }
.tkl-fahrplan-titel strong { font-size: var(--tkl-s-text); font-weight: 600; }
.tkl-fahrplan-titel > span { font-size: var(--tkl-s-klein); color: var(--tkl-text-2); }
.tkl-fahrplan-rahmen { min-width: 0; overflow-x: auto; scrollbar-width: thin; }
/* Alle Lagen in Minuten ab Abschnittsbeginn: --dauer, --von/--bis (WK), --m (jetzt), --plan (Planzeit des laufenden Laufs) */
.tkl-fahrplan-achse { --dauer: 120; position: relative; min-width: 40rem; height: 64px; }
.tkl-fp-spur, .tkl-fp-weg { position: absolute; left: 0; top: 30px; height: 2px; }
.tkl-fp-spur { right: 0; background: var(--tkl-spur); }
.tkl-fp-weg { top: 29px; height: 4px; width: calc(var(--m) / var(--dauer) * 100%); border-radius: 2px; background: var(--tkl-weg); }
/* Abschnittsende als T: Querstrich an der Wand */
.tkl-fp-spur::after { content: ""; position: absolute; right: 0; top: -7px; width: 3px; height: 16px; background: var(--tkl-spur-stark); }
.tkl-fp-wk {
  position: absolute; top: 0; height: 22px;
  left: calc(var(--von) / var(--dauer) * 100%); width: calc((var(--bis) - var(--von)) / var(--dauer) * 100% - 2px);
  overflow: hidden; padding: 0 var(--tkl-a1); border-radius: var(--tkl-ecke-innen);
  background: var(--tkl-fläche-3); color: var(--tkl-text-2);
  font-size: var(--tkl-s-klein); font-weight: 600; line-height: 22px; white-space: nowrap; text-overflow: clip; font-variant-numeric: tabular-nums;
}
.tkl-fp-wk[data-zeit="vorbei"] { background: var(--tkl-fläche); color: var(--tkl-text-3); box-shadow: inset 0 0 0 1px var(--tkl-rand); }
.tkl-fp-wk[data-zeit="läuft"] { background: var(--tkl-weg); color: var(--tkl-grund); }
.tkl-fp-uhr {
  position: absolute; bottom: 0; left: calc(var(--m) / var(--dauer) * 100%); transform: translateX(-50%);
  font-size: var(--tkl-s-klein); line-height: 18px; color: var(--tkl-text-2); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.tkl-fp-uhr::before { content: ""; position: absolute; left: 50%; bottom: 22px; width: 1px; height: 8px; background: var(--tkl-spur-stark); }
.tkl-fp-uhr.tkl-fp-erste { transform: none; }
.tkl-fp-uhr.tkl-fp-erste::before { left: 0; }
/* Abstand zwischen Plan und jetzt: links das frühere, rechts das spätere, gleich ob Verzug oder Vorsprung */
.tkl-fp-abstand {
  position: absolute; top: 26px; height: 10px; border-radius: 2px;
  left: calc(min(var(--plan), var(--m)) / var(--dauer) * 100%);
  width: calc((max(var(--plan), var(--m)) - min(var(--plan), var(--m))) / var(--dauer) * 100%);
  background: var(--tkl-neutral);
}
.tkl-fp-abstand[data-stufe="warn"] { background: var(--tkl-warn); }
.tkl-fp-abstand[data-stufe="bad"] { background: var(--tkl-bad); }
.tkl-fp-jetzt { position: absolute; top: -4px; bottom: 20px; left: calc(var(--m) / var(--dauer) * 100% - 1px); width: 2px; background: var(--tkl-text); }
.tkl-fp-jetzt span {
  position: absolute; bottom: -20px; left: 50%; transform: translateX(-50%); padding: 0 var(--tkl-a1);
  border-radius: var(--tkl-ecke-innen); background: var(--tkl-text); color: var(--tkl-grund);
  font-size: var(--tkl-s-klein); font-weight: 600; line-height: 20px; font-variant-numeric: tabular-nums; white-space: nowrap;
}
/* Stand zum Plan: «+» Vorsprung, «−» Verzug; Farbe nach Stufe der angezeigten Minute, das Wort steht immer dabei */
.tkl-stand { display: inline-flex; align-items: baseline; flex-wrap: wrap; gap: 0 6px; font-size: var(--tkl-s-klein); color: var(--tkl-text-2); }
.tkl-stand b { font-family: var(--tkl-titel-schrift); font-size: var(--tkl-s-gross); font-weight: 600; color: var(--tkl-text); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tkl-stand-wort { font-weight: 600; color: var(--tkl-text); }
.tkl-stand[data-stufe="warn"] :is(b, .tkl-stand-wort) { color: var(--tkl-warn); }
.tkl-stand[data-stufe="bad"] :is(b, .tkl-stand-wort) { color: var(--tkl-bad); }
@media (max-width: 760px) {
  .tkl-fahrplan { grid-template-columns: minmax(0, 1fr); gap: var(--tkl-a2); padding-left: var(--tkl-a4); padding-right: var(--tkl-a4); }
}

/* ===== Bausteine der Arbeitsplätze ===== */
/* Inhalt unter dem Rahmen und Seitenkopf (Titel, Kennzahlen im Satz, Aktionen rechts) */
.tkl-inhalt { padding: var(--tkl-a5) var(--tkl-a5) var(--tkl-a7); }
.tkl-seitenkopf { display: flex; flex-wrap: wrap; align-items: center; gap: var(--tkl-a2) var(--tkl-a5); margin-bottom: var(--tkl-a5); }
.tkl-seitenkopf :is(h1, h2, h3, h4) { margin: 0; font-family: var(--tkl-titel-schrift); font-size: var(--tkl-s-titel); font-weight: 600; line-height: 1.1; }
.tkl-seitenkopf > .tkl-knopfreihe { margin-left: auto; }
.tkl-kennzahlen { display: flex; flex-wrap: wrap; gap: 2px var(--tkl-a4); margin: 0; font-size: var(--tkl-s-klein); color: var(--tkl-text-2); }
.tkl-kennzahlen div { display: flex; gap: 6px; }
.tkl-kennzahlen dt { font-weight: 400; }
.tkl-kennzahlen dd { margin: 0; color: var(--tkl-text); font-weight: 600; font-variant-numeric: tabular-nums; }
/* Kleine Auswahl im Fliesstext (Abschnitt im Fahrplan, Tag im Archiv) */
.tkl-auswahl.tkl-auswahl-klein { width: auto; min-height: var(--tkl-ziel-klein); padding: 2px 36px 2px var(--tkl-a2); font-weight: 600; background-position: calc(100% - 18px) 52%, calc(100% - 12px) 52%; }
.tkl-fahrplan-titel .tkl-auswahl-klein { justify-self: start; margin-left: -1px; }
/* Regie: Modi über die ganze Breite, Siegerehrungen neben «Vorbereitet», darunter Lauf und Einblendungen */
.tkl-regie-modi { display: flex; flex-wrap: wrap; align-items: center; gap: var(--tkl-a2) var(--tkl-a5); }
.tkl-regie-modi .tkl-abschnitt-kopf { margin-bottom: 0; }
.tkl-regie-laufkopf { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--tkl-a2) var(--tkl-a4); margin-bottom: var(--tkl-a3); }
.tkl-regie-laufkopf .tkl-gross { display: block; }
@media (min-width: 1100px) {
  .tkl-regie {
    display: grid; align-items: start; gap: var(--tkl-a3) var(--tkl-a5);
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(19rem, 0.92fr);
    grid-template-areas: "modi modi modi" "paar paar ehrung" "aktion aktion ehrung" "lauf lauf einbl";
  }
  .tkl-regie > .tkl-schalten { display: contents; }
  .tkl-regie .tkl-regie-modi { grid-area: modi; }
  .tkl-regie .tkl-schalt-paar { grid-area: paar; }
  .tkl-regie .tkl-schalt-aktion { grid-area: aktion; }
  .tkl-regie > .tkl-regie-ehrung { grid-area: ehrung; margin-top: 0; }
  .tkl-regie > .tkl-regie-lauf { grid-area: lauf; margin-top: var(--tkl-a6); }
  .tkl-regie > .tkl-regie-einbl { grid-area: einbl; margin-top: var(--tkl-a6); }
}
@media (max-width: 1099px) {
  .tkl-regie > .tkl-schalten { margin-bottom: var(--tkl-a7); }
}
/* Zeilenliste: Text links, Aktion rechts, getrennt durch Fugen wie die Bahnzeilen (Warteschlange, Aufträge) */
.tkl-liste { display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 0; list-style: none; }
.tkl-liste > li {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 2px var(--tkl-a3);
  min-height: 52px; padding: var(--tkl-a2) var(--tkl-a3); background: var(--tkl-zeile);
  border: 2px solid transparent; border-radius: var(--tkl-ecke-innen);
}
.tkl-liste > li[data-zustand="bereit"] { border-color: var(--tkl-auswahl); background: var(--tkl-auswahl-hauch); }
.tkl-liste > li[data-zustand="erledigt"] { background: transparent; border-color: var(--tkl-rand); }
.tkl-liste > li[data-zustand="erledigt"] :is(strong, span) { color: var(--tkl-text-3); }
.tkl-liste > li > .tkl-sperrgrund { grid-column: 1 / -1; }
.tkl-eintrag { display: grid; gap: 2px; min-width: 0; line-height: 1.3; }
.tkl-eintrag strong { overflow: hidden; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.tkl-eintrag > span { font-size: var(--tkl-s-klein); color: var(--tkl-text-2); }
.tkl-liste > li[data-zustand="bereit"] .tkl-eintrag > span { color: var(--tkl-text); }
/* Dienstliste: Zustand je Verbindung und Gerät untereinander (Kontrolle, Bereitschaft) */
.tkl-dienste { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.tkl-dienste > li {
  --tkl-status: var(--tkl-neutral);
  display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; align-items: start; gap: 0 var(--tkl-a2);
  padding: var(--tkl-a2) 0; border-bottom: 1px solid var(--tkl-rand);
}
.tkl-dienste > li > .tkl-symbol { margin-top: 1px; color: var(--tkl-status); }
.tkl-dienste > li[data-status="ok"] { --tkl-status: var(--tkl-ok); }
.tkl-dienste > li:is([data-status="warn"], [data-status="sim"]) { --tkl-status: var(--tkl-warn); }
.tkl-dienste > li[data-status="bad"] { --tkl-status: var(--tkl-bad); }
.tkl-dienste > li > .tkl-knopf { align-self: center; }
.tkl-dienst { min-width: 0; margin: 0; line-height: 1.35; }
.tkl-dienst strong { margin-right: 6px; font-weight: 600; }
.tkl-dienst strong + span { font-size: var(--tkl-s-klein); color: var(--tkl-text-2); font-variant-numeric: tabular-nums; }
.tkl-dienste > li:is([data-status="warn"], [data-status="sim"], [data-status="bad"]) .tkl-dienst strong + span { color: var(--tkl-text); }
/* Kontrolle: Ausgaben als Kacheln mit Kopf, rechts die Zustände; zwei Reihen teilen sich die Höhe unter dem Kopfbereich */
.tkl-kontrolle {
  display: grid; gap: var(--tkl-a3) var(--tkl-a5);
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(18rem, 21rem); grid-template-rows: repeat(2, minmax(0, 1fr));
  height: max(36rem, calc(100dvh - var(--tkl-kopf-höhe, 112px)));
}
.tkl-kontrolle > .tkl-seitenteil { grid-column: 3; grid-row: 1 / span 2; }
.tkl-inhalt.tkl-kontrolle { padding-bottom: var(--tkl-a5); }
.tkl-ausgabe { display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 6px; min-width: 0; min-height: 0; margin: 0; }
.tkl-ausgabe-kopf { display: flex; flex-wrap: wrap; align-items: center; gap: 2px var(--tkl-a2); min-height: 32px; font-size: var(--tkl-s-klein); color: var(--tkl-text-2); }
.tkl-ausgabe-kopf strong { color: var(--tkl-text); font-size: var(--tkl-s-text); font-weight: 600; }
.tkl-ausgabe-kopf > :last-child { margin-left: auto; }
/* Bildplatz einer echten Ausgabe: hier steht die Seite selbst im iframe, unverändert */
.tkl-bildplatz { position: relative; display: grid; place-items: center; min-height: 0; overflow: hidden; background: var(--tkl-tafel-grund); color: var(--tkl-tafel-text); outline: 1px solid var(--tkl-rand); }
.tkl-bildplatz > iframe { display: block; width: 100%; height: 100%; border: 0; }
.tkl-bildplatz > .tkl-vorschau { height: 100%; aspect-ratio: 4 / 3; }
.tkl-bildplatz-leer { display: grid; justify-items: center; gap: var(--tkl-a1); padding: var(--tkl-a3); text-align: center; font-size: var(--tkl-s-klein); color: var(--tkl-tafel-text); }
.tkl-bildplatz-leer .tkl-symbol { width: 24px; height: 24px; }
.tkl-bildplatz-leer strong { font-size: var(--tkl-s-text); font-weight: 600; color: var(--tkl-tafel-text); }
.tkl-bildplatz-leer code { font-family: var(--tkl-code-schrift); font-size: 14px; }
/* Ereignisliste in Kachelgrösse (Kontrolle) */
.tkl-ereignisliste { min-height: 0; overflow: hidden; padding: var(--tkl-a2) var(--tkl-a3) 0; background: var(--tkl-fläche); outline: 1px solid var(--tkl-rand); }
.tkl-ereignisliste .tkl-tabelle { font-size: var(--tkl-s-klein); }
.tkl-ereignisliste .tkl-tabelle td { padding-top: 5px; padding-bottom: 5px; }
@media (max-width: 1099px) {
  .tkl-kontrolle { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: none; height: auto; }
  .tkl-bildplatz, .tkl-ereignisliste { aspect-ratio: 16 / 9; }
  .tkl-kontrolle > .tkl-seitenteil { grid-column: 1 / -1; grid-row: auto; }
}
@media (max-width: 760px) { .tkl-kontrolle { grid-template-columns: minmax(0, 1fr); } }
/* Seitenteil mit gestapelten Abschnitten (Kontrolle rechts, Einblendungen in der Regie) */
.tkl-seitenteil { display: grid; gap: var(--tkl-a5); align-content: start; min-width: 0; }
.tkl-seitenteil > .tkl-abschnitt + .tkl-abschnitt { margin-top: 0; }
/* Zeilenhinweis unter einer Tabellenzeile («Ablösung erwägen» unter der Bahn) */
.tkl-tabelle tr.tkl-zeilenhinweis > td { padding-top: 0; font-size: var(--tkl-s-klein); }
.tkl-tabelle tr:has(+ tr.tkl-zeilenhinweis) > * { border-bottom-color: transparent; }
.tkl-zeilenhinweis p { display: flex; flex-wrap: wrap; align-items: center; gap: var(--tkl-a1) var(--tkl-a2); margin: 0; }
.tkl-zustand .tkl-symbol { width: 16px; height: 16px; }
/* Gerätefarbe im Verkabelungstest: ein Feld neben dem Wort, nie allein */
.tkl-gerätefarbe { display: inline-block; flex: none; width: 12px; height: 12px; border-radius: 1px; background: var(--tkl-qt-start); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.35); vertical-align: -1px; }
.tkl-gerätefarbe[data-gerät="platte"] { background: var(--tkl-qt-platte); }
.tkl-gerätefarbe[data-gerät="block"] { background: var(--tkl-qt-block); }
.tkl-gerätefarbe[data-gerät="knopf"] { background: var(--tkl-qt-knopf); }
/* Grosser letzter Impuls (Verkabelungstest) */
.tkl-impuls { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: var(--tkl-a1) var(--tkl-a4); padding: var(--tkl-a4); border: 2px solid var(--tkl-weg); border-radius: var(--tkl-ecke); }
.tkl-impuls > .tkl-plakette { grid-row: span 2; width: 64px; height: 64px; font-size: 36px; }
.tkl-impuls strong { display: block; font-family: var(--tkl-titel-schrift); font-size: var(--tkl-s-gross); font-weight: 600; line-height: 1.2; }
.tkl-impuls > span:last-child { font-size: var(--tkl-s-klein); color: var(--tkl-text-2); }
.tkl-impuls .tkl-gerätefarbe { margin: 0 2px 0 4px; }
/* Zähler mit Minus und Plus (Bahn wählen am Beckenrand) */
.tkl-zähler { display: inline-flex; align-items: stretch; }
.tkl-zähler > .tkl-knopf { width: var(--tkl-knopf-höhe); padding: 0; }
.tkl-zähler > .tkl-knopf:first-child { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.tkl-zähler > .tkl-knopf:last-child { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.tkl-zähler > .tkl-eingabe { width: 4.5rem; margin: 0 -1px; border-radius: 0; text-align: center; font-family: var(--tkl-titel-schrift); font-size: var(--tkl-s-gross); font-weight: 600; font-variant-numeric: tabular-nums; }
/* Verlauf als Balken (Halbautomat): Höhe = Abweichung, neutral; die Bewertung steht als Wort daneben */
.tkl-verlauf { display: block; width: 100%; height: 26px; }
.tkl-verlauf rect { fill: var(--tkl-text-2); }
.tkl-verlauf line { stroke: var(--tkl-spur-stark); stroke-width: 1; vector-effect: non-scaling-stroke; }
.tkl-verlauf .tkl-ausreisser { fill: none; stroke: var(--tkl-text); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
/* Zwei gleich breite Spalten (Start-/Zielseite neben Wendeseite), Felder nebeneinander, Stapel */
.tkl-zwei { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--tkl-a5) var(--tkl-a6); align-items: start; }
.tkl-zwei > .tkl-abschnitt + .tkl-abschnitt { margin-top: 0; }
@media (max-width: 1099px) { .tkl-zwei { grid-template-columns: minmax(0, 1fr); } }
.tkl-felder { display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: var(--tkl-a4) var(--tkl-a5); }
.tkl-felder .tkl-feld + .tkl-feld { margin-top: 0; }
.tkl-stapel { display: grid; gap: var(--tkl-a4); justify-items: start; }
.tkl-stapel > * { max-width: 100%; }
.tkl-stapel > .tkl-feld { justify-self: stretch; }
/* Anmeldung: schmale Spalte in der Mitte, ohne Arbeitsplätze */
.tkl-anmelden { display: grid; gap: var(--tkl-a4); width: min(26rem, 100%); margin: clamp(32px, 10vh, 96px) auto var(--tkl-a7); }
.tkl-anmelden :is(h1, h2, h3, h4) { margin: 0; font-family: var(--tkl-titel-schrift); font-size: var(--tkl-s-titel); font-weight: 600; line-height: 1.1; }
.tkl-anmelden .tkl-knopf-haupt { width: 100%; }
@media (max-width: 760px) {
  .tkl-inhalt { padding: var(--tkl-a4) var(--tkl-a4) var(--tkl-a6); }
  .tkl-seitenkopf { gap: var(--tkl-a2) var(--tkl-a3); margin-bottom: var(--tkl-a4); }
  .tkl-seitenkopf :is(h1, h2, h3, h4) { font-size: var(--tkl-s-gross); }
  .tkl-seitenkopf > .tkl-knopfreihe { margin-left: 0; }
}

/* ===== Hinweis und Fehler: Problem, Folge, Abhilfe ===== */
.tkl-hinweis {
  --tkl-status: var(--tkl-neutral);
  display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; align-items: start; gap: 2px var(--tkl-a3);
  padding: var(--tkl-a3) var(--tkl-a4);
  border: 1px solid var(--tkl-rand); border-radius: var(--tkl-ecke);
  background: var(--tkl-fläche); color: var(--tkl-text);
}
.tkl-hinweis > .tkl-symbol { grid-row: 1 / span 3; width: 24px; height: 24px; color: var(--tkl-status); }
.tkl-hinweis-titel { grid-column: 2; margin: 0; font-weight: 600; }
.tkl-hinweis-text { grid-column: 2; margin: 0; color: var(--tkl-text-2); }
.tkl-hinweis-seit { grid-column: 2; margin: 0; font-size: var(--tkl-s-klein); color: var(--tkl-text-2); font-variant-numeric: tabular-nums; }
.tkl-hinweis-aktion { grid-column: 3; grid-row: 1 / span 3; align-self: center; display: flex; flex-wrap: wrap; gap: var(--tkl-a2); }
.tkl-hinweis[data-status="ok"] { --tkl-status: var(--tkl-ok); }
.tkl-hinweis[data-status="warn"], .tkl-hinweis[data-status="sim"] { --tkl-status: var(--tkl-warn); background: var(--tkl-warn-hauch); border-color: var(--tkl-warn); }
.tkl-hinweis[data-status="bad"] { --tkl-status: var(--tkl-bad); background: var(--tkl-bad-hauch); border-color: var(--tkl-bad); }
.tkl-hinweis:is([data-status="warn"], [data-status="sim"], [data-status="bad"]) :is(.tkl-hinweis-text, .tkl-hinweis-seit) { color: var(--tkl-text); }
@media (max-width: 760px) {
  .tkl-hinweis { grid-template-columns: 24px minmax(0, 1fr); }
  .tkl-hinweis-aktion { grid-column: 2; grid-row: auto; margin-top: var(--tkl-a2); }
}

/* ===== Dialog ===== */
.tkl-dialog {
  width: min(34rem, calc(100vw - 2 * var(--tkl-a4))); max-height: calc(100vh - 2 * var(--tkl-a5));
  padding: 0; border: 1px solid var(--tkl-rand-feld); border-radius: var(--tkl-ecke);
  background: var(--tkl-fläche); color: var(--tkl-text); box-shadow: var(--tkl-schatten);
  font-family: var(--tkl-text-schrift); font-size: var(--tkl-s-text); line-height: 1.5;
}
.tkl-dialog::backdrop { background: var(--tkl-schleier); }
.tkl-dialog-kopf { display: flex; align-items: center; gap: var(--tkl-a3); padding: var(--tkl-a4) var(--tkl-a4) 0 var(--tkl-a5); }
.tkl-dialog-kopf > .tkl-symbol { width: 24px; height: 24px; }
.tkl-dialog-kopf :is(h1, h2) { margin: 0; font-family: var(--tkl-titel-schrift); font-size: var(--tkl-s-gross); font-weight: 600; line-height: 1.2; }
.tkl-dialog-kopf .tkl-knopf-symbol { margin-left: auto; }
.tkl-dialog-inhalt { display: grid; gap: var(--tkl-a3); padding: var(--tkl-a3) var(--tkl-a5) var(--tkl-a4); }
.tkl-dialog-inhalt p { margin: 0; }
.tkl-dialog-fuss { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--tkl-a2); padding: var(--tkl-a3) var(--tkl-a5) var(--tkl-a5); }
.tkl-dialog[data-status="bad"] .tkl-dialog-kopf > .tkl-symbol { color: var(--tkl-bad); }

/* ===== Rahmen der Website: Kopf, Menü, Seitenlinie, Bild, Fuss ===== */
.tkl-web-kopf { position: sticky; top: 0; z-index: 20; background: var(--tkl-grund); border-bottom: 1px solid var(--tkl-rand); }
.tkl-web-kopf-innen { position: relative; display: flex; align-items: center; gap: var(--tkl-a4); max-width: 1280px; min-height: 72px; margin: 0 auto; padding: 0 var(--tkl-a6); }
.tkl-web-marke { display: flex; align-items: center; flex: none; min-height: 44px; color: var(--tkl-text); }
.tkl-web-marke img, .tkl-web-marke svg { width: auto; height: 30px; }
.tkl-web-nav { display: flex; gap: 2px; margin-left: auto; }
.tkl-web-nav a, .tkl-sprachen a {
  display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 var(--tkl-a3);
  border-radius: var(--tkl-ecke); color: var(--tkl-text); font-weight: 600; text-decoration: none;
}
.tkl-web-nav a:hover, .tkl-sprachen a:hover { background: var(--tkl-fläche-2); }
.tkl-web-nav a[aria-current="page"], .tkl-sprachen a[aria-current] { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 8px; }
.tkl-sprachen { display: flex; gap: 2px; }
.tkl-sprachen a { min-width: 44px; padding: 0 var(--tkl-a1); font-size: var(--tkl-s-klein); color: var(--tkl-text-2); }
.tkl-sprachen a[aria-current] { color: var(--tkl-text); }
.tkl-web-menü { display: none; margin-left: auto; }
.tkl-web-menü > summary {
  display: inline-flex; align-items: center; gap: var(--tkl-a2); min-height: 44px; padding: 0 var(--tkl-a3);
  border: var(--tkl-knopf-rand-breite) solid var(--tkl-knopf-rand); border-radius: var(--tkl-ecke);
  font-weight: 600; list-style: none; cursor: pointer;
}
.tkl-web-menü > summary::-webkit-details-marker { display: none; }
.tkl-web-menü-feld {
  position: absolute; left: 0; right: 0; top: 100%; z-index: 21;
  display: grid; gap: 2px; padding: var(--tkl-a2) var(--tkl-a4) var(--tkl-a5);
  background: var(--tkl-grund); border-bottom: 1px solid var(--tkl-rand-feld);
}
.tkl-web-menü-feld a { display: flex; align-items: center; min-height: 48px; font-family: var(--tkl-titel-schrift); font-size: var(--tkl-s-gross); font-weight: 600; text-decoration: none; }
.tkl-web-menü-feld .tkl-sprachen { margin-top: var(--tkl-a2); }
@media (max-width: 1200px) {
  .tkl-web-kopf-innen > .tkl-web-nav, .tkl-web-kopf-innen > .tkl-sprachen { display: none; }
  .tkl-web-menü { display: block; }
}
@media (max-width: 720px) {
  .tkl-web-kopf-innen { min-height: 64px; padding: 0 var(--tkl-a4); }
  .tkl-web-marke img, .tkl-web-marke svg { height: 26px; }
}

/* Seitenlinie: die Website ist eine Bahn. Senkrechte Linie, Querstrich mit Phasenwort je Abschnitt, T am Anfang und Ende */
.tkl-bahnseite { --tkl-schiene: 176px; --tkl-linie-x: 40px; --tkl-linie-b: 4px; --tkl-seitenrand: var(--tkl-a6); }
.tkl-phase-innen {
  position: relative; display: grid; grid-template-columns: var(--tkl-schiene) minmax(0, 1fr);
  max-width: 1280px; margin: 0 auto; padding: var(--tkl-a9) var(--tkl-seitenrand);
}
.tkl-phase-innen::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: calc(var(--tkl-seitenrand) + var(--tkl-linie-x));
  width: var(--tkl-linie-b); background: var(--tkl-linie);
}
.tkl-phase-wort {
  position: relative; margin: 0; padding: 10px 0 0 calc(var(--tkl-linie-x) + 36px);
  font-family: var(--tkl-titel-schrift); font-size: var(--tkl-s-text); font-weight: 600; line-height: 1.2;
}
.tkl-phase-wort::before { content: ""; position: absolute; top: 16px; left: calc(var(--tkl-linie-x) - 12px); width: 28px; height: var(--tkl-linie-b); background: var(--tkl-linie); }
.tkl-phase-inhalt { min-width: 0; }
.tkl-bahnseite > .tkl-phase:first-child .tkl-phase-innen::before { top: calc(var(--tkl-a9) + 16px); }
.tkl-bahnseite > .tkl-phase:first-child .tkl-phase-wort::before { left: calc(var(--tkl-linie-x) - 22px); width: 48px; }
.tkl-bahnseite > .tkl-phase:last-child .tkl-phase-innen::before { bottom: var(--tkl-a8); }
.tkl-bahnseite > .tkl-phase:last-child .tkl-phase-innen::after {
  content: ""; position: absolute; bottom: var(--tkl-a8); left: calc(var(--tkl-seitenrand) + var(--tkl-linie-x) - 22px);
  width: 48px; height: var(--tkl-linie-b); background: var(--tkl-linie);
}
@media (max-width: 720px) {
  .tkl-bahnseite { --tkl-schiene: 0px; --tkl-linie-x: 0px; --tkl-linie-b: 3px; --tkl-seitenrand: var(--tkl-a4); }
  .tkl-phase-innen { grid-template-columns: minmax(0, 1fr); padding-top: var(--tkl-a8); padding-bottom: var(--tkl-a8); padding-left: calc(var(--tkl-seitenrand) + 20px); }
  .tkl-phase-wort { margin-bottom: var(--tkl-a5); padding: 0; }
  .tkl-phase-wort::before { top: 7px; left: -27px; width: 17px; }
  .tkl-bahnseite > .tkl-phase:first-child .tkl-phase-innen::before { top: calc(var(--tkl-a8) + 7px); }
  .tkl-bahnseite > .tkl-phase:first-child .tkl-phase-wort::before { left: -32px; width: 27px; }
  .tkl-bahnseite > .tkl-phase:last-child .tkl-phase-innen::after { left: calc(var(--tkl-seitenrand) - 12px); width: 27px; }
}
/* Bild ohne Rahmen und ohne Schatten; Platzhalter, bis echte Fotos da sind */
.tkl-bild { margin: 0; }
.tkl-bild img { display: block; width: 100%; height: auto; }
.tkl-bild figcaption { margin-top: var(--tkl-a2); font-size: var(--tkl-s-klein); color: var(--tkl-text-2); }
.tkl-bild-platz {
  display: grid; place-content: center; justify-items: center; gap: var(--tkl-a2); aspect-ratio: 3 / 2; padding: var(--tkl-a4);
  border: 1px dashed var(--tkl-rand-feld); background: var(--tkl-fläche-2); color: var(--tkl-text-2); text-align: center;
}
.tkl-bild-platz .tkl-symbol { width: 24px; height: 24px; }
/* Fuss = die Wand (mit .tkl-wand) */
.tkl-web-fuss-innen {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: var(--tkl-a5) var(--tkl-a7);
  max-width: 1280px; margin: 0 auto; padding: var(--tkl-a7) var(--tkl-a6) var(--tkl-a6);
  font-size: var(--tkl-s-klein); line-height: 1.6;
}
.tkl-web-fuss-innen p { margin: 0; color: var(--tkl-text-2); }
.tkl-fusslinks { display: flex; flex-wrap: wrap; align-content: flex-start; gap: 0 var(--tkl-a4); margin: 0; padding: 0; list-style: none; }
.tkl-fusslinks a { display: inline-flex; align-items: center; min-height: 44px; color: var(--tkl-text); }
.tkl-web-fuss-recht { grid-column: 1 / -1; }
@media (max-width: 720px) {
  .tkl-web-fuss-innen { grid-template-columns: minmax(0, 1fr); padding: var(--tkl-a6) var(--tkl-a4); }
}

/* ===== Rahmen der Liveansicht: Kopf, Lauf, Reiter unten ===== */
.tkl-app-kopf {
  position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: var(--tkl-a2);
  min-height: 56px; padding: 0 var(--tkl-a4) 0 var(--tkl-a1); background: var(--tkl-fläche); border-bottom: 1px solid var(--tkl-rand);
}
.tkl-app-anlass { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.tkl-app-anlass strong { overflow: hidden; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; }
.tkl-app-anlass span { overflow: hidden; font-size: var(--tkl-s-klein); color: var(--tkl-text-2); white-space: nowrap; text-overflow: ellipsis; }
.tkl-frisch { --tkl-status: var(--tkl-ok); display: inline-flex; align-items: center; gap: 6px; margin-left: auto; font-size: var(--tkl-s-klein); color: var(--tkl-text-2); white-space: nowrap; font-variant-numeric: tabular-nums; }
.tkl-frisch .tkl-symbol { width: 18px; height: 18px; color: var(--tkl-status); }
.tkl-frisch[data-status="warn"] { --tkl-status: var(--tkl-warn); }
.tkl-frisch[data-status="bad"] { --tkl-status: var(--tkl-bad); }
.tkl-frisch[data-status="neutral"] { --tkl-status: var(--tkl-neutral); }
.tkl-frisch:is([data-status="warn"], [data-status="bad"]) { color: var(--tkl-text); font-weight: 600; }
.tkl-lauf-kopf { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--tkl-a3); padding: var(--tkl-a3) var(--tkl-a4); }
.tkl-lauf-kopf :is(h1, h2) { margin: 0; font-family: var(--tkl-titel-schrift); font-size: var(--tkl-s-gross); font-weight: 600; line-height: 1.2; }
.tkl-lauf-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px var(--tkl-a2); margin-top: 6px; font-size: var(--tkl-s-klein); color: var(--tkl-text-2); }
.tkl-app-reiter {
  position: fixed; right: 0; bottom: 0; left: 0; z-index: 10;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  padding-bottom: env(safe-area-inset-bottom); background: var(--tkl-fläche); border-top: 1px solid var(--tkl-rand-feld);
}
.tkl-app-reiter a {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 60px;
  border-top: 3px solid transparent; color: var(--tkl-text-2); font-size: var(--tkl-s-klein); font-weight: 600; text-decoration: none;
}
.tkl-app-reiter a .tkl-symbol { width: 24px; height: 24px; }
.tkl-app-reiter a[aria-current="page"] { border-top-color: var(--tkl-text); color: var(--tkl-text); }
.tkl-app-reiter a:is(:focus-visible, .tkl-ist-fokus) { outline-offset: -4px; box-shadow: inset 0 0 0 2px var(--tkl-fokus-gegen); }
.tkl-app-platz { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }

/* ===== Lesespalte der Anleitung: Prosa aus Markdown ohne Klassen ===== */
.tkl-prosa { max-width: 60ch; font-size: var(--tkl-s-text); line-height: 1.6; }
.tkl-prosa :where(h1) { margin: 0 0 var(--tkl-a4); font-family: var(--tkl-titel-schrift); font-size: var(--tkl-s-titel); font-weight: 600; line-height: 1.1; }
.tkl-prosa :where(h2) { margin: var(--tkl-a7) 0 var(--tkl-a3); font-family: var(--tkl-titel-schrift); font-size: var(--tkl-s-gross); font-weight: 600; line-height: 1.25; }
.tkl-prosa :where(h3) { margin: var(--tkl-a5) 0 var(--tkl-a2); font-family: var(--tkl-titel-schrift); font-size: var(--tkl-s-text); font-weight: 700; line-height: 1.3; }
.tkl-prosa :where(p, ul, ol, table, figure, pre, blockquote, dl) { margin: 0 0 var(--tkl-a4); }
.tkl-prosa :where(ul, ol) { padding-left: 1.4em; }
.tkl-prosa :where(li + li) { margin-top: var(--tkl-a1); }
.tkl-prosa :where(a) { color: var(--tkl-text); text-decoration: underline; text-underline-offset: 0.18em; }
.tkl-prosa :where(code) { padding: 1px 5px; border-radius: var(--tkl-ecke-innen); background: var(--tkl-fläche-2); font-family: var(--tkl-code-schrift); font-size: max(14px, 0.9em); }
.tkl-prosa :where(pre) { padding: var(--tkl-a3) var(--tkl-a4); overflow-x: auto; border: 1px solid var(--tkl-rand); border-radius: var(--tkl-ecke); background: var(--tkl-eingabe-grund); font-size: 14px; line-height: 1.5; }
.tkl-prosa :where(pre code) { padding: 0; background: none; }
.tkl-prosa :where(kbd) { padding: 0 5px; border: 1px solid var(--tkl-rand-feld); border-bottom-width: 2px; border-radius: var(--tkl-ecke-innen); font-family: var(--tkl-code-schrift); font-size: 14px; }
.tkl-prosa :where(table) { width: 100%; border-collapse: collapse; font-size: var(--tkl-s-klein); line-height: 1.45; }
.tkl-prosa :where(th) { padding: 0 var(--tkl-a3) var(--tkl-a2) 0; border-bottom: 1px solid var(--tkl-rand-feld); color: var(--tkl-text-2); text-align: left; vertical-align: bottom; }
.tkl-prosa :where(td) { padding: var(--tkl-a2) var(--tkl-a3) var(--tkl-a2) 0; border-bottom: 1px solid var(--tkl-rand); vertical-align: top; }
.tkl-prosa :where(img) { display: block; max-width: 100%; height: auto; outline: 1px solid var(--tkl-rand); }
.tkl-prosa :where(figcaption) { margin-top: var(--tkl-a2); font-size: var(--tkl-s-klein); color: var(--tkl-text-2); }
.tkl-prosa :where(blockquote) { padding: var(--tkl-a3) var(--tkl-a4); border: 1px solid var(--tkl-rand-feld); border-radius: var(--tkl-ecke); background: var(--tkl-fläche); }
.tkl-prosa :where(blockquote > :last-child) { margin-bottom: 0; }
/* Legende zu einem Bild mit Markierungen (A, B, 1, 2 …) */
.tkl-legende { display: grid; gap: var(--tkl-a2); margin: var(--tkl-a3) 0 var(--tkl-a4); padding: 0; list-style: none; font-size: var(--tkl-s-klein); }
.tkl-legende li { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: var(--tkl-a2); align-items: baseline; margin: 0; }
.tkl-legende .tkl-plakette { width: 22px; height: 22px; font-size: 14px; }

/* ===== Ausdruck: A4 hell, gleich welches Thema am Bildschirm gilt ===== */
@page tkl-a4 { size: A4; margin: 16mm 14mm 18mm; }
.tkl-druck { page: tkl-a4; }
.tkl-druck-kopf { display: flex; align-items: flex-end; gap: var(--tkl-a3); padding-bottom: var(--tkl-a2); margin-bottom: var(--tkl-a4); border-bottom: 2px solid var(--tkl-text); }
.tkl-druck-kopf img, .tkl-druck-kopf svg { width: 28px; height: 28px; flex: none; }
.tkl-druck-kopf h1 { margin: 0; font-family: var(--tkl-titel-schrift); font-size: var(--tkl-s-titel); font-weight: 600; line-height: 1.1; }
.tkl-druck-meta { margin: 0 0 0 auto; font-size: var(--tkl-s-klein); color: var(--tkl-text-2); text-align: right; }
.tkl-druck-fuss { margin-top: var(--tkl-a5); padding-top: var(--tkl-a2); border-top: 1px solid var(--tkl-rand-feld); font-size: var(--tkl-s-klein); color: var(--tkl-text-2); }
/* Vorschau eines Blatts am Bildschirm */
.tkl-blatt {
  --tkl-s-klein: 12px; --tkl-s-text: 14px; --tkl-s-gross: 17px; --tkl-s-titel: 24px; --tkl-s-held: 24px;
  width: min(210mm, 100%); padding: 14mm 12mm; background: #FFFFFF; color: #0E1B24;
  outline: 1px solid var(--tkl-rand);
}
@media (max-width: 760px) { .tkl-blatt { padding: var(--tkl-a5) var(--tkl-a4); } }

@media print {
  .tkl-nacht, .tkl-tag, .tkl-live, .tkl-wand, .tkl-wasser {
    --tkl-grund: #FFFFFF; --tkl-fläche: #FFFFFF; --tkl-fläche-2: #EEF2F4; --tkl-fläche-3: #E3EBEE;
    --tkl-text: #0E1B24; --tkl-text-2: #44535E; --tkl-text-3: #5A6A75; --tkl-text-aus: #7A8892;
    --tkl-rand: #C3D1D7; --tkl-rand-feld: #6E7F89; --tkl-zeile: #FFFFFF;
    --tkl-spur: #BCCAD1; --tkl-spur-stark: #7E909A; --tkl-weg: #0E1B24; --tkl-linie: #0E1B24;
    --tkl-plakette: #0E1B24; --tkl-plakette-text: #FFFFFF;
    --tkl-ok: #1E6B3D; --tkl-ok-hauch: #DDF1E4; --tkl-warn: #7A4B00; --tkl-warn-hauch: #FBEFD5;
    --tkl-bad: #A3201E; --tkl-bad-hauch: #FBE3E2; --tkl-neutral: #44535E; --tkl-neutral-hauch: #EEF2F4;
    --tkl-auswahl: #0B6E66; --tkl-auswahl-hauch: #A9DCD5;
    --tkl-knopf-rand: #0E1B24; --tkl-knopf-rand-breite: 1px; --tkl-knopf-grund: transparent; --tkl-knopf-hover: transparent;
    --tkl-eingabe-grund: #FFFFFF;
    --tkl-haupt: #0B6E66; --tkl-haupt-hover: #0B6E66; --tkl-haupt-text: #FFFFFF;
    --tkl-gefahr: #B42A27; --tkl-gefahr-hover: #B42A27; --tkl-gefahr-text: #FFFFFF; --tkl-gefahr-rand: #B42A27;
    --tkl-fokus: #0E1B24; --tkl-fokus-gegen: #FFFFFF;
    color-scheme: light;
    background: #FFFFFF;
    color: #0E1B24;
  }
  .tkl-druck, .tkl-blatt {
    --tkl-s-klein: 9pt; --tkl-s-text: 10.5pt; --tkl-s-gross: 13pt; --tkl-s-titel: 18pt; --tkl-s-held: 18pt;
    font-size: var(--tkl-s-text); line-height: 1.4;
  }
  .tkl-blatt { width: auto; padding: 0; outline: 0; }
  /* Bedienelemente haben auf Papier keinen Sinn, ausser ein Ausdruck verlangt es ausdrücklich */
  :is(.tkl-knopf, .tkl-notaus, .tkl-hilfe, .tkl-sortieren .tkl-symbol, .tkl-speicherleiste, .tkl-meldungen, .tkl-app-reiter, .tkl-web-menü, .tkl-stern, .tkl-seitenleiste, .tkl-segment):not(.tkl-druck *),
  .tkl-nicht-drucken, .tkl-kopf .tkl-arbeitsplätze, .tkl-kopfbereich, .tkl-sprung { display: none !important; }
  .tkl-kopf, .tkl-web-kopf, .tkl-app-kopf { position: static; }
  .tkl-tabelle thead { display: table-header-group; }
  .tkl-tabelle tr, .tkl-bahnzeile, .tkl-hinweis, .tkl-pille { break-inside: avoid; }
  .tkl-abschnitt-kopf, .tkl-druck :is(h1, h2, h3), .tkl-prosa :is(h1, h2, h3) { break-after: avoid; }
  .tkl-plakette, .tkl-pille, .tkl-bodenlinie, .tkl-hinweis, .tkl-läuft, .tkl-fp-wk, .tkl-medaille, .tkl-zustand { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .tkl-nacht .tkl-tabelle tbody tr:hover > * { background: none; }
  .tkl-knopf, .tkl-notaus, .tkl-eingabe, .tkl-auswahl { transition: none; }
}

/* ===== Bewegung und Kontrastmodus ===== */
@media (prefers-reduced-motion: reduce) {
  .tkl-knopf, .tkl-notaus, .tkl-eingabe, .tkl-auswahl, .tkl-erweitert > summary > .tkl-symbol, .tkl-seitenleiste > summary > .tkl-symbol, .tkl-gerät-knopf > .tkl-symbol, .tkl-kopf-menü > .tkl-symbol { transition: none; }
  .tkl-knopf[aria-busy="true"] .tkl-symbol, .tkl-lädt > .tkl-symbol, .tkl-meldung { animation: none; }
  .tkl-fortschritt progress:indeterminate { animation: none; background: var(--tkl-spur); }
  .tkl-knopf:active { transform: none; }
}
@media (forced-colors: active) {
  .tkl-plakette, .tkl-läuft, .tkl-fp-wk, .tkl-fp-jetzt span, .tkl-medaille, .tkl-zustand { border: 1px solid CanvasText; }
  :is(.tkl-segment > *, .tkl-seitenleiste a):is([aria-checked="true"], [aria-pressed="true"], [aria-selected="true"], [aria-current="true"], [aria-current="page"]) { border-color: Highlight; }
  .tkl-live .tkl-leuchtstift::before { background: Mark; }
  .tkl-bl-weg, .tkl-bl-t { stroke: CanvasText; }
}