/* ============================================================
   wld-flat.css — Auswahl- und Funktionsbuttons gefüllt statt umrandet.
   TT 2026-10-04 (PLAN J1/K5). Muss als LETZTES Stylesheet im <head>
   stehen, damit es die seiteneigenen Regeln überstimmt.

   Umrandet bleiben: Übungsbox, Fortschrittsbalken, Eingabefelder und
   die Antwortknöpfe im Übungsfeld (.choice-btn trägt Richtig/Falsch
   über die Randfarbe).

   Zurücknehmen: diese Datei aus dem <head> nehmen.
   ============================================================ */

/* 1. Ränder weg (Breite bleibt, damit nichts springt) */
.aid-btn, .btn-utility, .btn-filter, .btn-hard-v, .back-nav-btn, .btn-back, .btn-next, .next-btn,
.btn-mix, .btn-en, .btn-hard, .btn-flat, .mini, .wld-chip, .deck, .wld-hdr-back,
.mode-btn2, .mode-btn2.lv-btn, #setupView.filter-mode .mode-btn2.lv-btn,
.wldf-opt, .wldf-chip, .wldf-segb, .wldf-cancel,
.opt, .segb, .tile, .th-row,
.wlds-opt, .wlds-mini, .wlds-flat, .wlds-g, .wlds-row {
  border-color: transparent !important;
}
.segb.own, .wldf-segb.own { border-style: solid !important; }

/* 2. Ruhend: vorher durchsichtige Knöpfe bekommen eine Fläche */
.aid-btn:not(.active):not(.sel):not(.on),
.btn-utility:not(.active):not(.sel):not(.on),
.btn-filter:not(.active):not(.sel):not(.on),
.back-nav-btn:not(.active):not(.sel):not(.on),
.btn-back:not(.active):not(.sel):not(.on),
.btn-flat:not(.active):not(.sel):not(.on),
.btn-mix:not(.active):not(.sel):not(.on),
.btn-en:not(.active):not(.sel):not(.on),
.mini:not(.active):not(.sel):not(.on),
.wldf-cancel:not(.active):not(.sel):not(.on),
.wlds-mini:not(.active):not(.sel):not(.on),
.wlds-flat:not(.active):not(.sel):not(.on) {
  background-color: var(--paper) !important;
}

/* 3. Hover: ohne Rand zeigt die Fläche, dass der Knopf reagiert */
.aid-btn:hover:not(.active):not(.sel):not(.on):not(:disabled),
.btn-utility:hover:not(.active):not(.sel):not(.on):not(:disabled),
.btn-filter:hover:not(.active):not(.sel):not(.on):not(:disabled),
.btn-hard-v:hover:not(.active):not(.sel):not(.on):not(:disabled),
.back-nav-btn:hover:not(.sel):not(:disabled),
.btn-back:hover:not(.sel):not(:disabled),
.btn-flat:hover:not(.sel):not(:disabled),
.btn-mix:hover:not(:disabled), .btn-en:hover:not(.active):not(:disabled),
.wld-chip:hover:not(.sel):not(.on),
.wldf-opt:hover:not(.sel), .wldf-chip:hover:not(.on), .wldf-segb:hover:not(.sel), .wldf-cancel:hover,
.opt:hover:not(.sel), .segb:hover:not(.sel), .tile:hover, .th-row:hover:not(.sel),
.wlds-opt:hover:not(.sel) {
  background-color: var(--paper-dk) !important;
}

/* 3b. Anzahl-/Sekunden-Auswahl: „gewählt“ darf nicht nur an Hell/Dunkel hängen.
   Auf Android-Browsern mit erzwungenem Dunkelmodus (z. B. Brave) werden weiße Felder dunkel
   und das schwarze gewählte Feld ist dann nicht mehr zu unterscheiden. Der gelbe Innenring
   und die größere Schrift bleiben in jedem Fall sichtbar. */
.segb.sel, .wldf-segb.sel { box-shadow: inset 0 0 0 3px var(--yellow) !important; font-size: 1.02rem !important; }

/* 4. Kopfzeile (dunkel): „← Module“ als helle Fläche statt Rahmen */
.wld-hdr-back { background-color: rgba(255,255,255,.14) !important; }
.wld-hdr-back:hover { background-color: rgba(255,255,255,.24) !important; }

/* ============================================================
   Modus-Kacheln: 10 % Füllung in der Farbe des Modus (PLAN D6, TT 04.10.2026, zweite Korrektur)
   Die Farben sind die vorhandenen der App, keine neuen:
     Schritt-für-Schritt = --ok (grün wie „richtig“)
     Mittel              = --yellow (Orange/Gelb von „Trainer-App“ in der Kopfzeile)
     Schwer              = --err (rot wie „falsch“)
     Experten            = --das (Dunkelblau von „das“)
   Ruhend: 10 % Füllung in der Modusfarbe (90 % transparent), kein Rahmen. Gewählt: volle
   Fläche in der Modusfarbe. Dark Mode folgt über die Tokens.
   Kontraste gewählt (Schrift auf Fläche): hell ≥ 5,0 (Mittel 10,5), dunkel ≥ 5,9.
   ============================================================ */
[data-md="0"], [data-fm="easy"], [data-lv="easy"] { --mt-c: var(--ok); --mt-fg: #ffffff; }
[data-md="1"], [data-fm="mittel"], [data-lv="mittel"] { --mt-c: var(--yellow); --mt-fg: #0e0e0d; }
[data-md="2"], [data-fm="schwer"], [data-lv="schwer"] { --mt-c: var(--err); --mt-fg: #ffffff; }
[data-md="3"], [data-fm="turbo"], [data-fm="experte"], [data-lv="turbo"], [data-lv="experte"] { --mt-c: var(--das); --mt-fg: #ffffff; }
html[data-theme="dark"] [data-md], html[data-theme="dark"] [data-fm], html[data-theme="dark"] [data-lv="easy"],
html[data-theme="dark"] [data-lv="mittel"], html[data-theme="dark"] [data-lv="schwer"],
html[data-theme="dark"] [data-lv="turbo"], html[data-theme="dark"] [data-lv="experte"] { --mt-fg: #14130f; }

.opt[data-md], .wldf-opt[data-fm], .mode-btn2[data-lv], .lvw-btn[data-lv], .mode-btn[data-lv] {
  background-color: color-mix(in srgb, var(--mt-c) 10%, transparent) !important; color: var(--ink) !important;
  border: 2px solid transparent !important; }
.opt[data-md] .opt-ttl, .wldf-opt[data-fm] .wldf-t, .mode-btn2[data-lv] .mode-t2,
.lvw-btn[data-lv] .lvw-t, .mode-btn[data-lv] .mode-lbl { color: var(--ink) !important; }
.opt[data-md] .opt-desc2, .wldf-opt[data-fm] .wldf-s, .mode-btn2[data-lv] .mode-s2,
.lvw-btn[data-lv] .lvw-s, .mode-btn[data-lv] .mode-sub { color: var(--mute) !important; }
.opt[data-md]:hover, .wldf-opt[data-fm]:hover, .mode-btn2[data-lv]:hover, .lvw-btn[data-lv]:hover, .mode-btn[data-lv]:hover {
  background-color: color-mix(in srgb, var(--mt-c) 18%, transparent) !important; }

.opt[data-md].sel, .wldf-opt[data-fm].sel, .mode-btn2[data-lv].sel, .lvw-btn[data-lv].sel, .mode-btn[data-lv].sel {
  background-color: var(--mt-c) !important; color: var(--mt-fg) !important; }
.opt[data-md].sel .opt-ttl, .wldf-opt[data-fm].sel .wldf-t, .mode-btn2[data-lv].sel .mode-t2,
.lvw-btn[data-lv].sel .lvw-t, .mode-btn[data-lv].sel .mode-lbl { color: var(--mt-fg) !important; }
.opt[data-md].sel .opt-desc2, .wldf-opt[data-fm].sel .wldf-s, .mode-btn2[data-lv].sel .mode-s2,
.lvw-btn[data-lv].sel .lvw-s, .mode-btn[data-lv].sel .mode-sub { color: var(--mt-fg) !important; opacity: .88; }

/* Verbentrainer-Filter: Zweitzeile der Modi immer zeigen (A1/A2 hatten sie ausgeblendet) */
#setupView.filter-mode .lv-btn .mode-s2 { display: block !important; }

/* Rahmen um die Modus-Gruppe (Verbentrainer) entfällt ebenfalls */
.lv-grid { border-color: transparent !important; background-color: transparent !important; }

/* Fokus-Modus: Der Fokus-Knopf sitzt fest rechts oben. Damit er die Anzeige der
   richtigen/falschen Antworten nicht überdeckt, wird die Fortschrittszeile
   schmaler (Platz für den Knopf rechts). PLAN E5. */
body.focus-mode .prog-row,
body.focus-mode .ctrl-row,
body.focus-mode #prog-row { padding-right: 84px !important; box-sizing: border-box; }
body.focus-mode .focus-toggle { top: 8px !important; right: 8px !important; }

/* ============================================================
   Funktionsknöpfe einheitlich (PLAN J1b, TT 04.10.2026)
   Gilt für die Funktionszeile in Artikel-, Plural- und Verbentrainer:
   Filter, Tipp, Fokus, Artikel, Konj, Mischen, Schwierige.
   • gleiche Fläche, Schrift immer Ink in voller Tönung (auch „ausgewählt“)
   • „ausgewählt“: Schrift +15 % und fett, Fläche leicht grau, Knopfgröße bleibt (nicht mehr blau)
   • die ○/●-Punkte vor Artikel und Tipp entfallen
   ============================================================ */
.aid-btn, .btn-en, .btn-filter, .btn-hard-v, .btn-hard, .btn-mix, .btn-drill, .tg, .wld-tg, .tg-redo,
.toggle-row > button, .fn-row > button, .btn-row > button {
  background-color: var(--paper) !important; color: var(--ink) !important;
  border-color: transparent !important; border-radius: 0 !important;
  font-family: var(--mono); font-weight: 500; text-transform: uppercase;
  transition: background-color .12s ease;
}
.wld-tg::before, .wld-tg.on::before { content: none !important; }
.aid-btn *, .btn-en *, .btn-filter *, .btn-hard-v *, .btn-hard *, .btn-mix *, .tg *, .wld-tg *, .tg-redo *,
.toggle-row > button *, .fn-row > button *, .btn-row > button * { color: inherit !important; }

.aid-btn.active, .btn-en.active, .btn-filter.active, .btn-hard-v.active, .btn-hard.active, .btn-mix.active,
.btn-drill.active, .tg.active, .wld-tg.on, .wld-tg.active, .tg-redo.active {
  /* „ausgewählt“: nur die Schrift wird 15 % größer und fett, die Fläche wird leicht grau.
     Der Knopf selbst behält seine Größe (min-/max-width werden vom Skript unten fixiert). */
  font-size: calc(var(--fs-micro) * 1.15) !important; font-weight: 700 !important;
  background-color: var(--paper-dk) !important; color: var(--ink) !important; border-color: transparent !important; opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
  .aid-btn, .btn-en, .btn-filter, .btn-hard-v, .btn-hard, .btn-mix, .btn-drill, .tg, .wld-tg, .tg-redo,
  .toggle-row > button, .fn-row > button, .btn-row > button { transition: none; }
}

/* Gleich breite Funktionsknöpfe auch im Verbentrainer: so bleibt jeder Knopf beim
   „Ausgewählt“ (größere, fette Schrift) exakt gleich groß. */
.fn-row > button { flex: 1 1 0; min-width: 0; }

/* ============================================================
   Tastenziffer im Knopf (PLAN J2, nur Desktop): data-key="1" zeigt eine kleine Ziffer
   oben rechts. Auf Touch-Geräten und schmalen Bildschirmen ausgeblendet.
   ============================================================ */
[data-key] { position: relative; }
[data-key]::after {
  content: attr(data-key); position: absolute; top: 3px; right: 6px;
  font: 700 .72rem/1 var(--mono); opacity: .7; pointer-events: none;
}
.wld-kbd-hint[hidden], .kbd-hint[hidden] { display: none !important; }
@media (hover: none), (max-width: 479px) { [data-key]::after { display: none; } }

/* ============================================================
   Verbentrainer: Wortkacheln ganz zart umrandet (J17) und ziehbar (J16)
   ============================================================ */
.tile:not(.placed-in-answer) { border: 1px solid var(--paper-dk) !important; }
.tile:not(.placed-in-answer):hover { border-color: var(--mute) !important; }
.tile.placed-in-answer { border-width: 1px !important; }
.tile { touch-action: none; -webkit-user-select: none; user-select: none; }
.tile.dragging { opacity: .3; }
.drag-ghost { position: fixed !important; z-index: 9999; pointer-events: none; margin: 0 !important;
  box-shadow: 0 6px 18px rgba(0,0,0,.2); background: var(--card); }
.tile.drop-before { box-shadow: inset 3px 0 0 var(--ink); }
.answer-area.drop-end { box-shadow: inset -3px 0 0 var(--ink); }

/* ============================================================
   „Schwierige“-Knöpfe: wieder im typischen Rot, 20 % Füllung (TT 04.10.2026)
   ============================================================ */
.btn-hard, .btn-hard-v, .tg-redo, .btn-weak-btn {
  background-color: color-mix(in srgb, var(--err) 20%, transparent) !important;
  color: var(--ink) !important; border-color: transparent !important;
}

/* ============================================================
   Fokus-Knopf im Fokus-Modus (TT 04.10.2026): 6 px Rundung, Schrift 50 % grau, nicht fett.
   Er sitzt fest rechts oben, die Fortschrittszeile endet sauber links davor.
   ============================================================ */
body.focus-mode .focus-toggle, body.focus-mode .focus-toggle.active {
  border-radius: 6px !important; font-weight: 400 !important; font-size: var(--fs-micro) !important;
  color: color-mix(in srgb, var(--ink) 50%, transparent) !important;
  background-color: var(--paper) !important; opacity: 1 !important;
  position: fixed !important; top: 8px !important; z-index: 100;
  right: 8px !important; width: 64px; min-width: 64px; padding: 6px 8px !important;
}
@media (min-width: 560px) { body.focus-mode .focus-toggle, body.focus-mode .focus-toggle.active { right: max(8px, calc(50vw - 228px)) !important; } }
/* Der Balken (samt Rahmen) endet 3 mm (~11 px) vor dem Knopf: Knopf 64 px + 11 px Abstand. */
body.focus-mode .prog-row, body.focus-mode .ctrl-row, body.focus-mode #prog-row,
body.focus-mode .progress-wrap { padding-right: 75px !important; box-sizing: border-box; }
@media (min-width: 560px) { body.focus-mode:has(.progress-wrap) .focus-toggle, body.focus-mode:has(.progress-wrap) .focus-toggle.active { right: max(8px, calc(50vw - 244px)) !important; } }

/* Ziffern nur dort, wo die Taste noch aktiv ist: beantwortete oder gesperrte Knöpfe zeigen keine */
.choice-btn:disabled::after, .choice-btn.correct::after, .choice-btn.wrong::after, .choice-btn.dimmed::after,
.choice-btn.ready::after, .mc-btn.ok::after, .mc-btn.bad::after, .ab:disabled::after { display: none; }

/* ============================================================
   Verbentrainer: Lösungssatz als Linie statt blauer Box (TT 04.10.2026)
   ============================================================ */
#answerArea {
  background: transparent !important; border: none !important;
  border-bottom: 2px solid var(--mute) !important; padding: 10px 2px 6px !important; min-height: 52px;
}
#answerArea.locked { border-bottom-color: var(--ink) !important; }

/* Fokus-Knopf: 32 px hoch, senkrecht mittig zwischen Seitenrand und Übungsfeld (--fk-top setzt wld-hints.js) */
body.focus-mode .focus-toggle, body.focus-mode .focus-toggle.active {
  top: var(--fk-top, 8px) !important; height: 32px !important; min-height: 32px !important;
  padding-top: 0 !important; padding-bottom: 0 !important; display: inline-flex; align-items: center; justify-content: center;
}

/* Fokus-Modus: etwas Luft über dem Inhalt, damit der Knopf zwischen Seitenrand und Übungsfeld Platz hat */
body.focus-mode { padding-top: 14px !important; }

/* ============================================================
   Touch-Mindestgroesse (TT 05.10.2026, PLAN J44): jede Tippflaeche >= 48 x 48 px
   (Material 48 dp, Apple 44 pt, WCAG 2.5.5 44 px). Sichtbare Zeichen duerfen kleiner sein.
   ============================================================ */
.aid-btn, .btn-utility, .btn-filter, .btn-hard-v, .back-nav-btn, .btn-back, .btn-next, .next-btn,
.btn-mix, .btn-en, .btn-hard, .btn-flat, .mini, .wld-chip, .wld-tg, .tg, .tg-redo, .dp, .deck,
.wld-hdr-back, .wld-theme-btn, .wld-lang-sel, .wldf-chip, .wldf-segb, .wldf-cancel, .wlds-mini, .wlds-flat,
.btn-sec, .btn-weak-btn, .tsec, .typ {
  min-height: 48px; min-width: 48px; box-sizing: border-box;
}
/* Textknoepfe/Links: Inhalt mittig (Knoepfe tun das ohnehin, Anker nicht) */
a.wld-hdr-back, a.btn-utility, a.btn-back, a.back-nav-btn, a.btn-sec { display: inline-flex; align-items: center; justify-content: center; }
/* Kopfzeile: Logo und Marke als Tippflaeche */
.wld-hdr { padding-top: 3px; padding-bottom: 3px; }
.wld-hdr-logo, .wld-hdr > a:has(> img) { display: flex; align-items: center; justify-content: center; min-width: 48px; min-height: 48px; margin-left: -11px; }
.wld-hdr-brand { min-height: 48px; justify-content: center; }
/* Fokus-Knopf: optisch 64 x 32, Tippflaeche 64 x 48 */
body.focus-mode .focus-toggle::before, body.focus-mode .focus-toggle.active::before {
  content: ''; position: absolute; left: 0; right: 0; top: -8px; bottom: -8px; }
footer a { display: inline-block; padding: 16px 4px; margin: -16px 0; }   /* Tippflaeche >= 48 px */
.tile-pool .tile, #answerArea .tile { min-height: 48px; min-width: 48px; display: inline-flex; align-items: center; justify-content: center; }   /* Satzkacheln im Verbentrainer */
.tile-pool { gap: 6px !important; }

/* ============================================================
   Fortschrittsbalken (TT 05.10.2026, PLAN J45): Fuellung gruen, fehlendes Stueck als --track
   (im Dunkelmodus heller). Gilt fuer Modulkarte, Themenblatt, Uebungsbalken, Verben, Decks.
   ============================================================ */
.cp-bar i, .th-prog i, .pbar-fill, .progress-fill, .deck-prog i { background: var(--ok) !important; }
.cp-bar, .th-prog, .pbar, .progress-bar, .deck-prog { background: var(--track, var(--paper)) !important; }
.th-row.sel .th-prog { background: var(--track, var(--paper-dk)) !important; }

/* ============================================================
   Themenseite der Trainer („Zu den Themen“, PLAN J56): wie die Modulkarten der Startseite —
   1 px unbunter Navy-Rand (~28 %) statt starker Umrandung, Schwierige-Zeile rot getoent.
   ============================================================ */
/* Themenseite wie die Auswahl vorne: keine Box um die Modi, Themen als flache weisse Zeilen ohne Rand */
#topic-picker .lvw-card, .mode-choose {
  border: none !important; background: transparent !important; padding: 0 !important; box-shadow: none !important; }
#tpick-list > div, .deck { border: none !important; background: var(--card) !important; }
#tpick-list > div { min-height: 50px; }
#tpick-list > div:hover { background: var(--paper) !important; }
#tpick-list div[style*="overflow:hidden"] { background: var(--track, var(--paper)) !important; }
#tpick-list div[style*="overflow:hidden"] > div { background: var(--ok) !important; }
#tpick-weak, .hard-banner {
  background: color-mix(in srgb, var(--err) 12%, var(--paper)) !important;
  border: none !important; border-left: 3px solid var(--err) !important;
}
#tpick-weak:hover, .hard-banner:hover { background: color-mix(in srgb, var(--err) 20%, var(--paper)) !important; }

/* Verbentrainer (TT 05.10.2026, PLAN J60): Satzkacheln 10 % groesser, „Bestaetigen“ Schrift 15 % groesser */
.tile-pool .tile, #answerArea .tile { font-size: 16.5px; padding: 9px 11px; }
.confirm-btn { font-size: .98rem; }

/* ============================================================
   Ruhige Ansicht (TT 05.10.2026, PLAN J58/J64): html.calm — nur Balken, Zeichen und Zahlen.
   Texte bleiben im DOM (Screenreader), werden nur optisch ausgeblendet.
   ============================================================ */
/* Zahlen vor/hinter dem Fortschrittsbalken */
html.calm .prog-txt, html.calm .score-txt, html.calm .progress-meta, html.calm .vscore { display: none !important; }
/* Untertitel der Modi, Themenzaehler */
html.calm .lvw-s, html.calm .mode-sub, html.calm .mode-s2, html.calm .wldf-s, html.calm .opt-desc2 { display: none !important; }
html.calm .deck .ct, html.calm #tpick-list > div > div > div:nth-child(2) { display: none !important; }
/* Anweisungen im Uebungsfeld */
html.calm .mc-head, html.calm .answer-placeholder, html.calm .lvw-lbl, html.calm .lvw-note { visibility: hidden; height: 0; margin: 0; overflow: hidden; display: block; }
html.calm .answer-placeholder { visibility: hidden; height: auto; }
/* Knoepfe: nur Zeichen */
html.calm .confirm-btn, html.calm .btn-back, html.calm .btn-next, html.calm .back-nav-btn, html.calm .next-btn, html.calm .btn-reveal { font-size: 0 !important; }
html.calm .confirm-btn::before, html.calm .btn-back::before, html.calm .btn-next::before, html.calm .back-nav-btn::before, html.calm .next-btn::before, html.calm .btn-reveal::before {
  font-family: var(--body); font-size: 1.5rem; font-weight: 700; line-height: 1; }
html.calm .confirm-btn::before { content: '✓'; }
html.calm .btn-back::before, html.calm .back-nav-btn::before { content: '←'; }
html.calm .btn-next::before, html.calm .next-btn::before { content: '→'; }
html.calm .btn-reveal::before { content: '?'; }

/* Verbentrainer A2: vorgegebener Satzteil steht buendig in einer Zeile mit den Kacheln, gleiche Schrift (PLAN J65) */
#answerArea .sentence-prefix { display: inline-flex; align-items: center; margin: 0 6px 0 0; padding: 0;
  font-family: var(--body); font-size: 16.5px; font-weight: 500; font-style: normal; text-align: left; line-height: 1.2; color: var(--ink); }
/* Richtiger Loesungssatz (Verben): gruene Schrift in der Hintergrundfarbe der Box (kein Schwarz), ohne Rand/Balken, 21 px
   (19 px + 10 %), richtig wie falsch gleich; Plural: Beispielsatz 10 % groesser, Box-Hintergrund (TT 05.10.2026) */
.result-sentence, .result-sentence.ok, .result-sentence.err {
  background: var(--card) !important; color: var(--ok) !important; border: none !important; font-size: 21px !important; }
.fb { background: var(--card) !important; }
.fb-ex { font-size: calc((.88rem + 2px) * 1.32) !important; }
.result-sentence .sentence-prefix { display: inline !important; color: inherit !important; font-style: normal !important; font-size: inherit !important; font-weight: inherit !important; margin: 0 !important; }

/* ============================================================
   Pluraltrainer-Startseite (TT 05.10.2026): wie die Auswahl auf der Startseite —
   eckige Modus-Kacheln (= .opt), Themen als Zeilen mit Haekchen (= .th-row), Pluraltypen wie die Chips im Filter (.wldf-chip), Schrift +30 %.
   ============================================================ */
#start-screen .mode-choose { display: flex !important; flex-direction: column; gap: 9px; border: none !important; padding: 0 !important; background: transparent !important; }
#start-screen .mode-btn { display: flex !important; flex-direction: column; align-items: flex-start; justify-content: center; gap: 0 !important;
  width: 100%; min-height: 58px; padding: 13px 16px !important; border-radius: 0 !important; text-align: left; cursor: pointer; }
#start-screen .mode-btn .mode-lbl { display: block; font-family: var(--body); font-size: 1rem; font-weight: 600; text-transform: none; letter-spacing: 0; line-height: 1.5; }
#start-screen .mode-btn .mode-sub { display: block; margin-top: 4px; font-family: var(--body); font-size: .82rem; font-weight: 400; line-height: 1.5; letter-spacing: 0; text-transform: none; }
#start-screen .pl-secs, #start-screen .pl-count { margin-top: 14px; }

#start-screen .th-head, #filter-th-list .th-head { display: flex; align-items: center; gap: 10px; padding: 0 0 12px; border-bottom: 1px solid var(--paper-dk); }
#start-screen .th-head .lbl, #filter-th-list .th-head .lbl { flex: 1; font-family: var(--mono); font-size: .7rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ocker-ink); }
#start-screen .th-list, #filter-th-list .th-list { display: flex; flex-direction: column; gap: 7px; padding: 12px 0 6px; }
#start-screen .th-row, #filter-th-list .th-row { display: flex; align-items: center; gap: 12px; min-height: 50px; padding: 0 14px; width: 100%; background: var(--card) !important;
  color: var(--ink); cursor: pointer; text-align: left; font-family: var(--body); font-size: .92rem; font-weight: 500; border-radius: 0 !important; }
#start-screen .th-row.sel, #filter-th-list .th-row.sel { background: var(--paper) !important; }
#start-screen .th-box, #filter-th-list .th-box { width: 20px; height: 20px; flex-shrink: 0; border: 1.5px solid var(--paper-dk); display: inline-flex; align-items: center; justify-content: center; color: var(--ink); }
#start-screen .th-row.sel .th-box, #filter-th-list .th-row.sel .th-box { background: transparent; border-color: transparent; }
#start-screen .th-row.sel .th-box svg, #filter-th-list .th-row.sel .th-box svg { width: 20px; height: 20px; stroke-width: 2.6; }
#start-screen .th-row .th-lbl, #filter-th-list .th-row .th-lbl { flex: 1; line-height: 1.25; }
#start-screen .th-prog, #filter-th-list .th-prog { display: block; height: 3px; margin-top: 7px; background: var(--track, var(--paper)); overflow: hidden; }
#start-screen .th-prog i, #filter-th-list .th-prog i { display: block; height: 100%; background: var(--ok); }
#start-screen .th-row.sel .th-prog, #filter-th-list .th-row.sel .th-prog { background: var(--track, var(--paper-dk)); }
#start-screen .th-n, #filter-th-list .th-n { font-family: var(--mono); font-size: .66rem; color: var(--faint); flex-shrink: 0; align-self: flex-start; padding-top: 2px; }
#start-screen .th-gowrap, #filter-th-list .th-gowrap { margin-top: 12px; }
#start-screen .th-gowrap .go, #filter-th-list .th-gowrap .go { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 58px; background: var(--ink); border: 1.5px solid var(--ink);
  color: var(--bg); font-family: var(--display); font-size: 1.05rem; letter-spacing: .05em; text-transform: uppercase; cursor: pointer; border-radius: 0; }

/* Pluraltypen: Chips wie im Filter, Schrift 30 % groesser, ausfuehrlicher Text bleibt */
#start-screen .typ-grid#typ-grid, #start-screen .typ-grid#same-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
#start-screen .typ { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; min-height: 48px; padding: 8px 14px;
  background: var(--card) !important; color: var(--ink) !important; border: 1.5px solid var(--paper-dk) !important; border-radius: 0 !important; text-align: left; cursor: pointer;
  font-family: var(--mono); font-size: 1.014rem; font-weight: 600; letter-spacing: .04em; }
#start-screen .typ:hover { border-color: var(--mute) !important; background: var(--card) !important; color: var(--ink) !important; }
#start-screen .typ .td { display: block; font-family: var(--body); font-size: calc(var(--fs-micro) * 1.3); font-weight: 500; color: var(--mute); margin-top: 3px; line-height: 1.25; letter-spacing: 0; }
#start-screen .typ .tn { display: block; font-size: calc(var(--fs-micro) * 1.3); font-weight: 400; color: var(--mute); margin-top: 2px; opacity: .85; }
#start-screen .typ:hover .td, #start-screen .typ:hover .tn { color: var(--mute); }
#start-screen .deck-grid { display: block !important; }

/* Pluraltypen mehrfach waehlbar: gewaehlt = gefuellt wie im Filter (.wldf-chip.on); Los-Knopf klebt unten (J72) */
#start-screen .typ.sel { background: var(--ink) !important; border-color: var(--ink) !important; color: var(--bg) !important; }
#start-screen .typ.sel .td, #start-screen .typ.sel .tn { color: var(--paper-dk) !important; }
#start-screen > .th-gowrap { position: sticky; bottom: 0; z-index: 20; padding: 10px 0 14px; margin-top: 12px; background: var(--bg); }
/* Ruhige Ansicht: Startseite des Pluraltrainers ohne Lead und Zwischenueberschriften */
html.calm #start-lead, html.calm #start-screen .lvw-or, html.calm #start-screen .sec-note { display: none !important; }

/* Filter (Pluraltrainer): Themen-Zeile + Typ-Kacheln mit Langtext, gleiche Optik wie die Startseite (J72) */
.wldf-row { display: flex; align-items: center; width: 100%; min-height: 50px; padding: 0 14px; background: var(--card); border: 1.5px solid var(--paper-dk); color: var(--ink);
  font-family: var(--body); font-size: .92rem; font-weight: 500; text-align: left; cursor: pointer; border-radius: 0; }
.wldf-row:hover { border-color: var(--mute); }
#filter-th-list { display: flex; flex-direction: column; gap: 7px; margin-top: 8px; padding: 0 0 6px; }
#filter-th-list[hidden] { display: none; }
#filter-typ { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
#filter-typ .wldf-chip { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; min-height: 48px; padding: 8px 14px; text-align: left;
  font-size: 1.014rem; border-radius: 0; }
#filter-typ .wldf-chip[data-t="__all"] { grid-column: 1 / -1; align-items: center; }
#filter-typ .td { display: block; font-family: var(--body); font-size: calc(var(--fs-micro) * 1.3); font-weight: 500; color: var(--mute); margin-top: 3px; line-height: 1.25; letter-spacing: 0; }
#filter-typ .tn { display: block; font-size: calc(var(--fs-micro) * 1.3); font-weight: 400; color: var(--mute); margin-top: 2px; opacity: .85; }
#filter-typ .wldf-chip.on .td, #filter-typ .wldf-chip.on .tn { color: var(--paper-dk); }