/* ==========================================================================
   Ja & Nein — Stil im gemeinsamen AssistUK-Familiendesign
   (Tokens und Statusbar wie GazeTo/SpellTo/PartnerTo; Schriften aus fonts.css).
   Bewusst eine Datei: die App ist klein und soll klein bleiben.

   Drei Darstellungen über body-Klassen: t-hell (Standard), t-dunkel, t-kontrast.
   Schriftgröße über f-normal / f-gross / f-sehr.
   ========================================================================== */

:root {
  /* Primär (AssistUK-Blau) */
  --color-primary:        #4b698c;
  --color-primary-light:  #6388ad;
  --color-primary-dark:   #3a5a7c;
  --color-primary-bg:     #eef2f7;
  --color-on-primary:     #ffffff;

  /* Neutral */
  --color-bg:             #fafafa;
  --color-surface:        #ffffff;
  --color-surface-alt:    #f5f5f5;
  --color-border:         #e0e0e0;
  --color-border-strong:  #bdbdbd;

  --color-text:           #1a1a1a;
  --color-text-muted:     #545a63;   /* 6,9:1 auf #fafafa */

  /* Ja/Nein bewusst NICHT nur über Farbe: jede Fläche trägt zusätzlich Wort
     und Zeichenform (Haken/Kreuz/Fragezeichen). Grün/Rot allein wäre für
     Rot-Grün-Schwäche und für Menschen mit CVI keine Unterscheidung. */
  --color-ja:             #1b7f4d;
  --color-ja-bg:          #e6f4ec;
  --color-nein:           #b3261e;
  --color-nein-bg:        #fbeae9;
  --color-weiss:          #5b5560;
  --color-weiss-bg:       #f0eef2;

  /* Typografie (Familie: Oswald Überschriften, DM Sans Fließtext) */
  --font-headline: 'Oswald', 'Segoe UI Semibold', 'Segoe UI', system-ui, sans-serif;
  --font-body:     'DM Sans', 'Segoe UI', system-ui, -apple-system, sans-serif;

  /* Radien und Schatten (Familienwerte) */
  --radius-sm:   0.375rem;
  --radius-md:   0.5rem;
  --radius-lg:   0.75rem;
  --radius-xl:   1rem;
  --shadow-sm:   0 1px 2px rgba(0,0,0,0.05);
  --shadow-md:   0 4px 6px rgba(0,0,0,0.07);
  --shadow-lg:   0 10px 15px rgba(0,0,0,0.10);

  --fs:   1rem;
  --gap:  16px;
}

body.t-dunkel {
  --color-primary:        #7ba3cc;
  --color-primary-light:  #9ec0e4;
  --color-primary-dark:   #9ec0e4;
  --color-primary-bg:     #23303f;
  --color-on-primary:     #10131a;

  --color-bg:             #14161a;
  --color-surface:        #1e2126;
  --color-surface-alt:    #262a31;
  --color-border:         #3a3f47;
  --color-border-strong:  #6b727c;

  --color-text:           #f2f3f5;
  --color-text-muted:     #b6bcc4;  /* 8,1:1 auf #14161a */

  --color-ja:             #6ede9f;
  --color-ja-bg:          #16301f;
  --color-nein:           #ff9b93;
  --color-nein-bg:        #331917;
  --color-weiss:          #cfc7d6;
  --color-weiss-bg:       #2a2530;

  --shadow-sm:   0 1px 2px rgba(0,0,0,0.4);
  --shadow-md:   0 4px 6px rgba(0,0,0,0.5);
  --shadow-lg:   0 10px 15px rgba(0,0,0,0.6);
}

body.t-kontrast {
  --color-primary:        #ffff00;
  --color-primary-light:  #ffff00;
  --color-primary-dark:   #ffff00;
  --color-primary-bg:     #000000;
  --color-on-primary:     #000000;

  --color-bg:             #000000;
  --color-surface:        #000000;
  --color-surface-alt:    #000000;
  --color-border:         #ffffff;
  --color-border-strong:  #ffffff;

  --color-text:           #ffffff;
  --color-text-muted:     #ffffff;

  --color-ja:             #00ff66;
  --color-ja-bg:          #000000;
  --color-nein:           #ff5b52;
  --color-nein-bg:        #000000;
  --color-weiss:          #ffffff;
  --color-weiss-bg:       #000000;

  --radius-sm: 2px; --radius-md: 3px; --radius-lg: 4px; --radius-xl: 4px;
  --shadow-sm: none; --shadow-md: none; --shadow-lg: none;
}

body.f-gross { --fs: 1.2rem; }
body.f-sehr  { --fs: 1.45rem; }

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--fs);
  line-height: 1.6;
}

/* Programmische Fokusse (Router setzt den Fokus auf main) ohne Rahmen um die
   ganze Seite; Tastatur-Fokus auf Bedienelementen bleibt sichtbar. */
main:focus { outline: none; }

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--color-primary);
  color: var(--color-on-primary);
  padding: 10px 16px;
  z-index: 100;
}
.skip:focus { left: 0; }

/* --- Statusbar (Familienkopf wie SpellTo/PartnerTo) ---------------------- */
.statusbar {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 8px 12px;
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
}
.statusbar__brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-headline);
  font-weight: 600;
  font-size: 1.25em;
  color: var(--color-primary-dark);
  padding: 4px 8px;
  border-radius: var(--radius-md);
  background: none;
  border: none;
  cursor: pointer;
}
.statusbar__logo {
  width: 34px;
  height: 34px;
  border-radius: var(--radius-md);
  display: block;
  flex: none;
}
.statusbar__spacer { flex: 1; }
.statusbar__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 10px;
  min-width: 48px;
  min-height: 48px;
  border-radius: var(--radius-md);
  color: var(--color-text-muted);
  font: inherit;
  font-size: 0.88em;
  font-weight: 500;
  background: none;
  border: none;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.statusbar__btn:hover { background: var(--color-surface-alt); color: var(--color-text); }
.statusbar__btn:focus-visible,
.statusbar__brand:focus-visible {
  outline: 3px solid var(--color-primary);
  outline-offset: 2px;
}
.statusbar__btn svg { flex: none; }
.statusbar__btn[hidden] { display: none; }
/* Eingeschaltete Werkzeuge (Vorlesen läuft, Kontrast an) tragen aria-pressed —
   kein zusätzlicher Klassen-Zustand nötig. */
.statusbar__btn[aria-pressed="true"] {
  background: var(--color-primary-bg);
  color: var(--color-primary-dark);
}
.statusbar__btn--font { font-weight: 700; font-size: 1em; }
body.t-kontrast .statusbar__btn { color: #fff; border: 1px solid #fff; }
body.t-kontrast .statusbar__btn[aria-pressed="true"] { background: #ffff00; color: #000; }

/* Viele Werkzeuge, wenig Platz: nie stauchen, notfalls umbrechen.

   Nachgemessen von 1440 bis 860 px: Mit Aufschriften braucht die Leiste
   1078 px. Unter 861 px fallen die Aufschriften weg (Regel darunter), dann
   passt wieder alles — dazwischen aber nicht: Bei 1024 px lag
   „Einstellungen" bei 1066 px, also hinter dem rechten Rand, bei 900 px
   zusätzlich „Hilfe". Der Band 861–1024 px ist genau der von Tablets und
   kleinen Notebooks. Aufgefallen ist es erst mit Fassung 2.0: Der neue
   Knopf „Einfache Sprache" hat die Reihe um ein Ziel verlängert, die
   860-px-Schwelle stammt noch von davor.

   `overflow-x: auto` bleibt als letztes Netz stehen, ist aber KEINE Lösung:
   SignalTo wird mit Verweilen und Tastern bedient, und ein Ziel, das man
   erst seitwärts heranschieben muss, ist für diese Bedienung verloren.
   Deshalb bricht die Leiste jetzt um — `flex-wrap` greift von allein erst,
   wenn eine Zeile nicht mehr reicht, breite Schirme bleiben unverändert. */
.statusbar {
  flex-wrap: wrap;
  row-gap: 6px;
  overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.statusbar::-webkit-scrollbar { display: none; }
.statusbar__brand, .statusbar__btn { flex: 0 0 auto; }

@media (max-width: 860px) {
  .statusbar__label { display: none; }
}
@media (max-width: 560px) {
  .statusbar { gap: 2px; padding-left: 8px; padding-right: 8px; }
  .statusbar__btn { min-width: 44px; min-height: 44px; padding: 6px; }
  .statusbar__btn svg { width: 20px; height: 20px; }
  /* Nur das Zeichen behalten — der Name steht ohnehin als Überschrift im Inhalt. */
  .statusbar__brand span:not(.dwell-dot) { display: none; }
}
/* Schmale Geräte: Werkzeuge stufenweise weglassen, damit die Einstellungen —
   in denen ALLES noch einmal steht — sichtbar bleiben und niemand die Leiste
   seitwärts schieben muss. Reihenfolge nach Verzichtbarkeit. */
@media (max-width: 620px) {
  #sb-font-dec, #sb-font-inc { display: none; }
}
@media (max-width: 460px) {
  #sb-theme { display: none; }
}
@media (max-width: 400px) {
  #sb-contrast { display: none; }
}

/* --- Feste untere Leiste: die fünf Schritte ------------------------------ */
.bottom-nav {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 30;              /* unter Panel (60) und Sprungmarke (100) */
  display: flex;
  justify-content: space-around;
  align-items: stretch;
  /* Mitwachsend statt fest: „Fiche descriptive" (fr) und „Συνοπτικά στοιχεία"
     (el) brauchen zwei Zeilen — bei fester Höhe liefen sie aus der Leiste. */
  min-height: 64px;
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.bottom-nav__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 4px 4px;
  /* Gleiche Breite je Eintrag: Sonst wandern die Trennlinien mit der Wortlänge
     der jeweiligen Sprache — im Französischen klebten „S'entraîner" und
     „Entretien" aneinander, während daneben Platz frei blieb. */
  flex: 1 1 0;
  min-width: 0;
  min-height: 56px;
  text-align: center;
  color: var(--color-text-muted);
  background: none;
  border: none;
  border-radius: var(--radius-sm);
  font: inherit;
  cursor: pointer;
  position: relative;       /* trägt den Verweil-Punkt */
  transition: color 150ms ease;
}
/* Bewusst KEIN overflow:hidden — sonst wäre der herausragende Kreis beschnitten. */
.bottom-nav__item:hover { color: var(--color-text); }
.bottom-nav__item:focus-visible { outline: 3px solid var(--color-primary); outline-offset: -2px; }
.bottom-nav__item.ist-aktiv { color: var(--color-primary-dark); }
.bottom-nav__item svg { width: 24px; height: 24px; flex: none; }
.bottom-nav__label {
  /* Bewusst in px und nur maßvoll wachsend: Bei „Sehr groß" würde eine mit
     --fs skalierte Beschriftung die 64-px-Leiste sprengen. Ganz starr wäre
     aber auch falsch — wer große Schrift braucht, braucht sie hier auch. */
  font-size: 13px;
  font-weight: 500;
  line-height: 1.2;
  /* Lange Übersetzungen brechen um statt überzulaufen — höchstens zwei Zeilen,
     damit eine ausufernde Übersetzung die Leiste nicht beliebig hoch macht. */
  overflow-wrap: anywhere;
  hyphens: auto;
  max-width: 100%;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* Schmale Geräte: ein Deut kleiner, damit lange Übersetzungen („Fiche
   descriptive", „Συνοπτικά στοιχεία") vollständig in zwei Zeilen passen und
   nicht mitten im Wort abgeschnitten werden. */
@media (max-width: 430px) {
  .bottom-nav__label { font-size: 12px; }
}
body.f-gross .bottom-nav        { min-height: 70px; }
body.f-gross .bottom-nav__label { font-size: 14px; }
body.f-sehr  .bottom-nav        { min-height: 78px; }
body.f-sehr  .bottom-nav__label { font-size: 16px; }
body.f-sehr  .bottom-nav__item svg { width: 26px; height: 26px; }
/* Die Reserve unter dem Inhalt und die Kurzmeldung wandern mit. */
body.f-gross .wrap { padding-bottom: calc(94px + env(safe-area-inset-bottom, 0px)); }
body.f-sehr  .wrap { padding-bottom: calc(102px + env(safe-area-inset-bottom, 0px)); }
body.f-gross .melder, body.f-gross .pwa-karte { bottom: calc(90px + env(safe-area-inset-bottom, 0px)); }
body.f-sehr  .melder, body.f-sehr  .pwa-karte { bottom: calc(98px + env(safe-area-inset-bottom, 0px)); }
.bottom-nav__item--primary .bottom-nav__disc {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  margin-top: -22px;
  margin-bottom: -6px;
  border-radius: 50%;
  background: var(--color-primary);
  color: var(--color-on-primary);
  box-shadow: var(--shadow-lg);
  border: 3px solid var(--color-surface);
}
.bottom-nav__item--primary.ist-aktiv .bottom-nav__disc { background: var(--color-primary-dark); }
body.t-kontrast .bottom-nav { border-top-width: 2px; }
body.t-kontrast .bottom-nav__item.ist-aktiv { color: #ffff00; }
body.t-kontrast .bottom-nav__item--primary .bottom-nav__disc { border-color: #fff; }

/* Der Platz für diese Leiste steht bei .wrap (Abschnitt „Grundgerüst") —
   dort als Kurzform, sonst überschriebe sie eine Regel an dieser Stelle. */

/* --- Einfache Sprache ----------------------------------------------------
   Gleiches Muster wie auf assistuk.net: Beide Fassungen stehen im Markup als
   GESCHWISTER, das Attribut am <html>-Element schaltet um. Kein Nachladen,
   kein Umbau — das Vorlesen und die Suche finden immer nur eine Fassung. */
.leicht { display: none; }
[data-language="easy"] .leicht { display: block; }
[data-language="easy"] .standard { display: none; }
/* In Einfacher Sprache steht jede Aussage auf einer eigenen Zeile (<br>);
   etwas mehr Zeilenabstand macht das lesbarer. */
[data-language="easy"] .leicht { line-height: 1.75; }

/* --- Sprachmenü aus der Kopfleiste --------------------------------------- */
.langmenu {
  position: fixed;
  z-index: 70;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 8px;
  max-height: 60vh;
  overflow-y: auto;
  min-width: 220px;
  max-width: min(92vw, 440px);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
}
@media (max-width: 420px) { .langmenu { grid-template-columns: 1fr; } }
.langmenu__item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  min-height: 44px;
  border: 0;
  background: none;
  border-radius: var(--radius-md);
  font: inherit;
  font-size: 0.95em;
  color: var(--color-text);
  text-align: left;
  cursor: pointer;
  position: relative;
}
.langmenu__item:hover { background: var(--color-surface-alt); }
.langmenu__item[aria-checked="true"] { background: var(--color-primary); color: var(--color-on-primary); font-weight: 700; }
.langmenu__item:focus-visible { outline: 3px solid var(--color-primary); outline-offset: -2px; }
.langmenu__item[dir="rtl"] { flex-direction: row-reverse; text-align: right; }
.langmenu__flagge {
  width: 26px;
  height: 18px;
  object-fit: cover;
  border-radius: 3px;
  flex: none;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.08);
}
.langmenu__hinweis {
  grid-column: 1 / -1;
  padding: 8px 12px 2px;
  font-size: 0.85em;
  color: var(--color-text-muted);
  border-top: 1px solid var(--color-border);
}

/* --- Vorlesen: gerade gelesene Stelle ------------------------------------ */
.liest {
  background: var(--color-primary-bg) !important;
  box-shadow: 0 0 0 3px var(--color-primary);
  border-radius: var(--radius-sm);
  scroll-margin-top: 90px;
  scroll-margin-bottom: 100px;
}
body.t-kontrast .liest { background: #000 !important; box-shadow: 0 0 0 3px #ffff00; }

/* --- Kurzmeldung (Darstellung gewechselt o. Ä.) --------------------------- */
.melder {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(84px + env(safe-area-inset-bottom, 0px));
  z-index: 80;
  background: var(--color-text);
  color: var(--color-bg);
  padding: 10px 18px;
  border-radius: 999px;
  font-size: 0.95em;
  box-shadow: var(--shadow-lg);
  max-width: 88vw;
  text-align: center;
}
body.t-kontrast .melder { background: #000; color: #fff; border: 2px solid #fff; }

/* --- PWA: Installations- und Aktualisierungs-Karte ----------------------- */
.pwa-karte {
  position: fixed;
  right: 16px;
  bottom: calc(84px + env(safe-area-inset-bottom, 0px));
  z-index: 80;
  width: min(340px, calc(100vw - 32px));
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 16px;
}
.pwa-karte__t { font-weight: 700; display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.pwa-karte__d { color: var(--color-text-muted); font-size: 0.93em; margin: 0 0 12px; }
.pwa-karte__reihe { display: flex; gap: 8px; }
.pwa-karte__reihe .btn { flex: 1; min-height: 48px; padding: 10px 12px; }
.pwa-neu {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  top: 12px;
  z-index: 90;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--color-primary);
  color: var(--color-on-primary);
  border: none;
  border-radius: 999px;
  padding: 10px 18px;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  box-shadow: var(--shadow-lg);
  max-width: 92vw;
}
body.t-kontrast .pwa-neu { background: #ffff00; color: #000; border: 2px solid #fff; }

/* --- Grundgerüst --------------------------------------------------------- */
main { display: block; }
.wrap {
  max-width: 960px;
  margin: 0 auto;
  /* Unten Platz für die feste Navigationsleiste (64 px) plus Luft — bewusst
     in px, damit die Reserve bei „Sehr groß" nicht mitwächst und bei kleiner
     Schrift nicht unter die Leiste rutscht. */
  padding: 26px 18px calc(88px + env(safe-area-inset-bottom, 0px));
}
.lead { font-size: 1.06em; margin: 0 0 14px; max-width: 62ch; }
.lead--small { color: var(--color-text-muted); font-size: 1em; }
.hint { color: var(--color-text-muted); font-size: 0.93em; margin: 6px 0 14px; max-width: 68ch; }
.hint--rule {
  background: var(--color-primary-bg);
  border-left: 4px solid var(--color-primary);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  padding: 11px 14px;
  color: var(--color-text);
}
.note { color: var(--color-text-muted); font-size: 0.9em; margin-top: 22px; }
.note--privacy {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 13px 15px;
}
.warn {
  background: var(--color-nein-bg);
  border: 2px solid var(--color-nein);
  color: var(--color-text);
  border-radius: var(--radius-md);
  padding: 12px 15px;
  margin: 16px 0;
  font-weight: 600;
}
.h2 {
  font-family: var(--font-headline);
  font-weight: 600;
  font-size: 1.45em;
  line-height: 1.25;
  margin: 30px 0 10px;
}
.page-h {
  font-family: var(--font-headline);
  font-weight: 600;
  font-size: 1.7em;
  line-height: 1.2;
  margin: 0 0 14px;
}

/* --- Startseite: Hero ---------------------------------------------------- */
.hero {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 26px;
  align-items: center;
  margin: 6px 0 18px;
}
.hero__text h2 {
  font-family: var(--font-headline);
  font-weight: 600;
  font-size: 1.7em;
  line-height: 1.2;
  margin: 0 0 12px;
}
.hero__img {
  width: 100%;
  max-height: 240px;
  object-fit: contain;
  display: block;
}
@media (max-width: 640px) {
  .hero { grid-template-columns: 1fr; gap: 10px; }
  .hero__img { max-height: 150px; order: -1; }
}
body.t-kontrast .hero__img { background: #fff; border-radius: var(--radius-md); }

/* --- Startkacheln (Weg in fünf Schritten) -------------------------------- */
.tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr));
  gap: var(--gap);
  margin: 22px 0;
}
.tile {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  text-align: left;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: box-shadow .15s, transform .1s, border-color .15s;
}
.tile:hover {
  border-color: var(--color-primary-light);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}
.tile:focus-visible { outline: 3px solid var(--color-primary); outline-offset: 2px; }
.tile__bild {
  width: 100%;
  height: 120px;
  object-fit: contain;
  background: var(--color-primary-bg);
  padding: 10px;
  display: block;
}
body.t-kontrast .tile__bild { background: #fff; }
.tile__body {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 14px 16px 16px;
}
.tile__kopf { display: flex; align-items: baseline; gap: 10px; }
.tile__n {
  font-family: var(--font-headline);
  font-size: 1.05em;
  font-weight: 600;
  color: var(--color-on-primary);
  background: var(--color-primary);
  border-radius: 999px;
  width: 1.8em;
  height: 1.8em;
  line-height: 1.8em;
  text-align: center;
  flex: none;
}
.tile__t {
  font-family: var(--font-headline);
  font-weight: 600;
  font-size: 1.18em;
  line-height: 1.3;
}
.tile__d { color: var(--color-text-muted); font-size: 0.93em; }

/* --- Verstehen: die Treppe ----------------------------------------------- */
.ladder { display: grid; gap: var(--gap); margin: 20px 0; }
.lstep {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: 14px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 16px;
  box-shadow: var(--shadow-sm);
}
.lstep__n {
  font-family: var(--font-headline);
  font-weight: 600;
  font-size: 1.4em;
  color: var(--color-primary-dark);
  background: var(--color-primary-bg);
  border-radius: var(--radius-md);
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
}
body.t-kontrast .lstep__n { border: 2px solid #fff; }
.lstep__h {
  font-family: var(--font-headline);
  font-weight: 600;
  font-size: 1.15em;
  margin: 4px 0 6px;
}
.lstep__l {
  font-weight: 700;
  font-size: 0.88em;
  letter-spacing: 0.02em;
  color: var(--color-primary-dark);
  display: block;
  margin-top: 9px;
}
.lstep__p { margin: 2px 0 0; color: var(--color-text-muted); font-size: 0.95em; }
@media (max-width: 480px) {
  .lstep { grid-template-columns: 1fr; }
  .lstep__n { width: 44px; height: 44px; }
}

/* --- Im Gespräch: Regeln ------------------------------------------------- */
.rules {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr));
  gap: var(--gap);
  margin: 16px 0 8px;
}
.rule {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 13px 15px;
  box-shadow: var(--shadow-sm);
}
.rule__h {
  font-family: var(--font-headline);
  font-weight: 600;
  font-size: 1.02em;
  margin: 0 0 4px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.rule__n {
  font-family: var(--font-headline);
  color: var(--color-primary-dark);
  background: var(--color-primary-bg);
  border-radius: 999px;
  width: 1.7em;
  height: 1.7em;
  line-height: 1.7em;
  text-align: center;
  font-size: 0.92em;
  flex: none;
}
body.t-kontrast .rule__n { border: 2px solid #fff; }
.rule__p { margin: 0; color: var(--color-text-muted); font-size: 0.93em; }

/* --- Im Gespräch: Fragebaum ---------------------------------------------- */
.baum {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 18px;
  margin: 18px 0;
  box-shadow: var(--shadow-sm);
}
.baum__kopf { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.crumbs { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; flex: 1; min-height: 36px; }
.crumb {
  display: inline-block;
  background: var(--color-primary-bg);
  color: var(--color-primary-dark);
  border: 1px solid var(--color-primary-light);
  border-radius: 999px;
  padding: 4px 12px;
  font-weight: 600;
  font-size: 0.92em;
}
body.t-kontrast .crumb { background: #000; color: #ffff00; border-color: #ffff00; }
.baum__frage {
  font-family: var(--font-headline);
  font-weight: 600;
  font-size: 1.25em;
  margin: 4px 0 14px;
}
.tree {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 215px), 1fr));
  gap: 10px;
}
.tbtn {
  font: inherit;
  font-weight: 600;
  text-align: left;
  padding: 14px 16px;
  min-height: 58px;
  border: 2px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text);
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.tbtn:hover { border-color: var(--color-primary); background: var(--color-primary-bg); }
.tbtn:focus-visible { outline: 3px solid var(--color-primary); outline-offset: 2px; }
.tbtn--andere { border-style: dashed; font-weight: 500; color: var(--color-text-muted); }
.gefunden {
  background: var(--color-primary-bg);
  border: 2px solid var(--color-primary);
  border-radius: var(--radius-lg);
  padding: 18px 20px;
  margin-top: 6px;
}
.gefunden__t {
  font-family: var(--font-headline);
  font-weight: 600;
  font-size: 1.35em;
  margin: 0 0 8px;
}
.gefunden__p { margin: 0; color: var(--color-text-muted); font-size: 0.95em; }
body.t-kontrast .gefunden { background: #000; }

/* Verweis-Karte (z. B. auf die Übung „Der falsche Vorschlag") */
.querverweis {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  text-align: left;
  font: inherit;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 14px 16px;
  margin: 18px 0;
  cursor: pointer;
  color: inherit;
  box-shadow: var(--shadow-sm);
  position: relative;
  overflow: hidden;
}
.querverweis:hover { border-color: var(--color-primary-light); box-shadow: var(--shadow-md); }
.querverweis:focus-visible { outline: 3px solid var(--color-primary); outline-offset: 2px; }
.querverweis__bild {
  width: 64px;
  height: 64px;
  object-fit: contain;
  background: var(--color-primary-bg);
  border-radius: var(--radius-md);
  padding: 6px;
  flex: none;
}
body.t-kontrast .querverweis__bild { background: #fff; }
.querverweis__t { font-weight: 700; display: block; }
.querverweis__d { color: var(--color-text-muted); font-size: 0.92em; display: block; }

/* --- Formularteile ------------------------------------------------------- */
.field { margin: 20px 0; }
.field__l { display: block; font-weight: 600; margin-bottom: 7px; }
.field__l--sm { font-weight: 500; font-size: 0.92em; margin-top: 12px; }
.field__opt { font-weight: 400; color: var(--color-text-muted); font-size: 0.88em; }
.field__out { font-weight: 400; color: var(--color-primary-dark); }
.field__i {
  width: 100%;
  font: inherit;
  padding: 13px 14px;
  border: 2px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text);
  min-height: 50px;
}
.field__i:focus-visible { outline: 3px solid var(--color-primary); outline-offset: 1px; }
.field__i--range { padding: 0; min-height: 44px; accent-color: var(--color-primary); }
textarea.field__i { min-height: 84px; resize: vertical; }
.field__row {
  display: flex;
  align-items: center;
  gap: 11px;
  min-height: 48px;
  cursor: pointer;
  font-weight: 600;
}
.field__row input { width: 24px; height: 24px; accent-color: var(--color-primary); }

/* --- Code festlegen ------------------------------------------------------ */
.codegrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: var(--gap);
  margin: 20px 0;
}
.codecol {
  background: var(--color-surface);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 16px;
  box-shadow: var(--shadow-sm);
}
.codecol--ja    { border-color: var(--color-ja); }
.codecol--nein  { border-color: var(--color-nein); }
.codecol--weiss { border-color: var(--color-border-strong); margin: 20px 0; }
.codecol__h { font-size: 1.05em; margin: 0 0 12px; display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.codecol__badge {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 999px;
  font-weight: 700;
  border: 2px solid currentColor;
}
.codecol--ja    .codecol__badge { color: var(--color-ja);    background: var(--color-ja-bg); }
.codecol--nein  .codecol__badge { color: var(--color-nein);  background: var(--color-nein-bg); }
.codecol--weiss .codecol__badge { color: var(--color-weiss); background: var(--color-weiss-bg); }

.opts { display: flex; flex-wrap: wrap; gap: 8px; }
.opt {
  font: inherit;
  font-size: 0.94em;
  padding: 11px 14px;
  min-height: 48px;
  border: 2px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text);
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.opt:hover { border-color: var(--color-primary); }
.opt:focus-visible { outline: 3px solid var(--color-primary); outline-offset: 2px; }
/* Gewählt nicht nur farbig: Häkchen davor, damit es ohne Farbsehen trägt. */
.opt[aria-pressed="true"] {
  border-color: var(--color-primary);
  background: var(--color-primary);
  color: var(--color-on-primary);
  font-weight: 700;
}
.opt[aria-pressed="true"]::before { content: "\2713\00a0"; }

/* --- Üben ---------------------------------------------------------------- */
.stufen { display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: 6px; }
.stufe {
  font: inherit;
  padding: 12px 16px;
  min-height: 48px;
  border: 2px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text);
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.stufe[aria-pressed="true"] {
  background: var(--color-primary);
  color: var(--color-on-primary);
  border-color: var(--color-primary);
  font-weight: 700;
}
.stufe:focus-visible { outline: 3px solid var(--color-primary); outline-offset: 2px; }

.frage {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 26px 20px;
  margin: 18px 0;
  text-align: center;
  box-shadow: var(--shadow-sm);
}
.frage__t {
  font-family: var(--font-headline);
  font-size: clamp(1.3em, 3.4vw, 2em);
  font-weight: 600;
  margin: 0 0 16px;
  min-height: 1.4em;
}
.frage__wait {
  height: 14px;
  background: var(--color-surface-alt);
  border: 1px solid var(--color-border-strong);
  border-radius: 999px;
  overflow: hidden;
}
.frage__wait span {
  display: block;
  height: 100%;
  width: 0;
  background: var(--color-primary);
}
.frage__waitl { color: var(--color-text-muted); font-size: 0.9em; margin: 8px 0 0; }

.answers {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
  gap: var(--gap);
  margin: 18px 0;
}
.ans {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  /* Große Ziele: für Blick und Scanning ist ein kleiner Knopf kein Ziel. */
  min-height: 156px;
  font: inherit;
  border: 4px solid;
  border-radius: var(--radius-lg);
  cursor: pointer;
  padding: 16px;
  position: relative;
  overflow: hidden;
  color: var(--color-text);
}
.ans__form { display: block; }
.ans__w { font-family: var(--font-headline); font-size: 1.6em; font-weight: 700; }
.ans__z { font-size: 0.92em; color: var(--color-text-muted); text-align: center; }
.ans--ja    { border-color: var(--color-ja);    background: var(--color-ja-bg); }
.ans--nein  { border-color: var(--color-nein);  background: var(--color-nein-bg); }
.ans--weiss { border-color: var(--color-weiss); background: var(--color-weiss-bg); }
.ans--ja    .ans__form { color: var(--color-ja); }
.ans--nein  .ans__form { color: var(--color-nein); }
.ans--weiss .ans__form { color: var(--color-weiss); }
.ans:focus-visible { outline: 4px solid var(--color-primary); outline-offset: 3px; }
.ans:active { transform: scale(0.985); }
.ans[disabled] { opacity: 0.45; cursor: default; }

.rueck { font-size: 1.05em; font-weight: 600; min-height: 1.6em; margin: 8px 0; }
.rueck--gut  { color: var(--color-ja); }
.rueck--soso { color: var(--color-text); }

.bilanz {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 16px 18px;
  margin-top: 20px;
  box-shadow: var(--shadow-sm);
}
.bilanz h2 { font-family: var(--font-headline); font-size: 1.15em; margin: 0 0 8px; }
.bilanz p { margin: 0 0 8px; }

/* --- Der falsche Vorschlag ----------------------------------------------- */
.steps { margin: 20px 0; padding-left: 1.3em; }
.steps li { margin-bottom: 13px; }
.reflect {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 16px 18px;
  margin-top: 20px;
  box-shadow: var(--shadow-sm);
}
.reflect__h { font-family: var(--font-headline); font-size: 1.1em; margin: 0 0 12px; }

/* --- Knöpfe -------------------------------------------------------------- */
.actions { display: flex; flex-wrap: wrap; gap: 11px; margin: 22px 0; }
.btn {
  font: inherit;
  font-weight: 600;
  padding: 14px 20px;
  min-height: 52px;
  border: 2px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text);
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.btn:hover { border-color: var(--color-primary); }
.btn:focus-visible { outline: 3px solid var(--color-primary); outline-offset: 2px; }
.btn--primary {
  background: var(--color-primary);
  color: var(--color-on-primary);
  border-color: var(--color-primary);
}
.btn--primary:hover { background: var(--color-primary-dark); border-color: var(--color-primary-dark); }
body.t-kontrast .btn--primary:hover { background: var(--color-primary); border-color: var(--color-primary); }
.linkbtn {
  font: inherit;
  background: none;
  border: none;
  color: var(--color-primary-dark);
  text-decoration: underline;
  cursor: pointer;
  padding: 8px 0;
  min-height: 44px;
}
body.t-dunkel .linkbtn, body.t-kontrast .linkbtn { color: var(--color-primary); }

/* --- Einstellungen ------------------------------------------------------- */
.panel {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  z-index: 60;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 20px;
  overflow-y: auto;
}
.panel[hidden] { display: none; }
.panel__box {
  background: var(--color-bg);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-lg);
  padding: 22px;
  max-width: 560px;
  width: 100%;
  margin: auto;
  box-shadow: var(--shadow-lg);
}
.panel__h { font-family: var(--font-headline); font-weight: 600; margin: 0 0 14px; }
.segs { display: flex; flex-wrap: wrap; gap: 8px; }
.seg {
  font: inherit;
  padding: 11px 15px;
  min-height: 48px;
  border: 2px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text);
  cursor: pointer;
}
.seg[aria-pressed="true"] {
  background: var(--color-primary);
  color: var(--color-on-primary);
  border-color: var(--color-primary);
  font-weight: 700;
}
.seg:focus-visible { outline: 3px solid var(--color-primary); outline-offset: 2px; }

/* --- Fußzeile ------------------------------------------------------------ */
.legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  padding: 14px 16px 22px;
  background: var(--color-surface-alt);
  border-top: 1px solid var(--color-border);
  color: var(--color-text-muted);
  font-size: 0.86em;
}
.legal a { color: inherit; }

/* --- Steckbrief ---------------------------------------------------------- */
.sheet {
  background: #fff;
  color: #111;
  border: 1px solid #c9ccd1;
  border-radius: var(--radius-lg);
  padding: 26px;
  margin-top: 18px;
}
.sheet h2 {
  font-family: var(--font-headline);
  font-size: 1.5em;
  margin: 0 0 4px;
}
.sheet__sub { color: #555; margin: 0 0 18px; font-size: 0.94em; }
.sheet__row {
  display: flex;
  gap: 14px;
  padding: 13px 0;
  border-top: 1px solid #d8dade;
  align-items: baseline;
}
.sheet__k { flex: 0 0 34%; font-weight: 700; }
.sheet__v { flex: 1; }
.sheet__v--big { font-size: 1.2em; font-weight: 600; }
.sheet__foot { margin-top: 20px; border-top: 2px solid #111; padding-top: 12px; font-size: 0.86em; color: #444; }

@media print {
  /* Nur das Blatt drucken. Alles andere ist Bildschirm-Bedienung. */
  .statusbar, .bottom-nav, .legal, .actions, .lead, .panel, .querverweis,
  .langmenu, .melder, .pwa-karte, .pwa-neu, .skip { display: none !important; }
  /* padding:0 nimmt auch die Reserve für die untere Leiste weg — sonst bliebe
     unter dem Steckbrief ein leerer Streifen stehen. */
  .wrap { padding: 0; max-width: none; }
  .sheet { border: none; padding: 0; border-radius: 0; }
  body { background: #fff; color: #000; font-size: 11.5pt; }
  @page { size: A4 portrait; margin: 18mm; }
}

/* --- Rechtliches (in der App, nicht als Link nach draußen) --------------- */
.rtabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: var(--gap);
}
.rtab {
  font: inherit;
  padding: 10px 16px;
  min-height: 48px;
  border: 2px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text);
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.rtab[aria-pressed="true"] {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-on-primary);
}
.rbody { max-width: 62ch; }
.rbody__h {
  font-family: var(--font-headline);
  font-weight: 600;
  font-size: 1.4rem;
  margin: 0 0 12px;
}
.rbody__sh {
  font-size: 1.05rem;
  font-weight: 700;
  margin: 20px 0 4px;
}
.rbody__p {
  margin: 0;
  line-height: 1.65;
  color: var(--color-text-muted);
}
.rbody__p code {
  font-family: ui-monospace, Consolas, monospace;
  background: var(--color-surface-alt);
  padding: 1px 5px;
  border-radius: 4px;
}

/* --- Erststart ----------------------------------------------------------- */
.intro__h {
  font-family: var(--font-headline);
  font-weight: 600;
  font-size: 1.2rem;
  margin: 0 0 8px;
}
.intro__s p {
  margin: 0;
  line-height: 1.65;
  color: var(--color-text-muted);
}
.intro__steps { min-height: 9.5em; }
.intro__dots {
  letter-spacing: 0.35em;
  color: var(--color-text-muted);
  margin: 12px 0 0;
}

/* Sprachwahl: dasselbe Feldbild wie die übrigen Eingaben, damit die
   Einstellungen nicht auseinanderfallen. */
select.field__i {
  min-height: 48px;
  cursor: pointer;
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* --- Fragen-Werkstatt ------------------------------------------------------
   Aufklappbare Faelle. Bewusst ruhig gehalten: Das ist kein Test, sondern eine
   Sammlung. Die Zielflaechen sind gross genug fuer Verweilen und Taster —
   deshalb der ganze Knopf, nicht nur ein Pfeil am Rand. */
.werkstatt { display: grid; gap: 10px; margin: 18px 0 26px; }
.werk { border: 1px solid var(--color-border); border-radius: 12px; overflow: hidden;
  background: var(--color-surface); }
.werk__q { display: flex; align-items: center; gap: 12px; width: 100%;
  min-height: 60px; padding: 14px 16px; border: 0; background: none; cursor: pointer;
  font: inherit; font-size: 1.02rem; text-align: left; color: var(--color-text);
  position: relative; }
.werk__q:hover, .werk__q:focus-visible { background: var(--color-surface-alt); }
.werk__zeichen { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center; font-weight: 700;
  background: var(--color-primary-bg); color: var(--color-primary-dark); }
.werk__text { flex: 1 1 auto; }
.werk__q[aria-expanded="true"] { background: var(--color-surface-alt); }
.werk__a { padding: 4px 16px 16px 58px; }
.werk__label { margin: 8px 0 2px; font-size: .8rem; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase; color: var(--color-text-muted); }
.werk__label--gut { color: var(--color-primary-dark); }
.werk__p { margin: 0; line-height: 1.65; }
.werk__p--gut { font-weight: 600; }
@media (max-width: 480px) { .werk__a { padding-left: 16px; } }

/* --- Gute Fragen (Regeln) + Uebung "Frage umbauen" (16.08.2026) -----------
   Bewusst dieselben Bausteine wie die Fragen-Werkstatt daneben: gleiche
   Rahmen, gleiche Flaechen, gleiche Mindesthoehen. Ein zweites Aussehen fuer
   dieselbe Sache waere nur eine zusaetzliche Huerde. */
.regeln { display: grid; gap: 12px; }
.regel { border: 1px solid var(--color-border); border-radius: 12px;
  background: var(--color-surface); padding: 14px 16px; }
.regel__h { margin: 0 0 6px; font-size: 1.02rem; }
/* Das Beispiel steht optisch vor der Erklaerung: Wer nur ueberfliegt, soll die
   gute Frage mitnehmen, nicht die Begruendung. */
.regel__b { margin: 0 0 8px; font-weight: 600; line-height: 1.5;
  color: var(--color-primary-dark); }
.regel__p { margin: 0; line-height: 1.65; }

.umbau { border: 1px solid var(--color-border); border-radius: 12px;
  background: var(--color-surface); padding: 16px; }
.umbau__zaehler { margin: 0 0 4px; font-size: .92rem; color: var(--color-text-muted, inherit);
  opacity: .8; }
.umbau__frage { margin: 0 0 14px; font-weight: 700; font-size: 1.08rem; line-height: 1.5; }
.umbau__wahl { display: grid; gap: 10px; }
/* Nach der Wahl bleiben die Knoepfe stehen (disabled) statt zu verschwinden -
   die Begruendung soll neben der Fassung stehen, auf die sie sich bezieht. */
.umbau__opt[disabled] { cursor: default; opacity: 1; }
.umbau__r { margin: -4px 0 6px; padding: 0 4px; line-height: 1.6; font-size: .98rem; }
.umbau__r--gut { color: var(--color-primary-dark); font-weight: 600; }
.umbau__r--nein { opacity: .85; }

/* Zeigt an, dass hinter dieser Frage noch eine Ebene liegt. */
.tbtn__mehr { margin-left: auto; padding-left: 10px; font-weight: 700; opacity: .7; }