/* ==========================================================================
   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 waagerecht rollen. */
.statusbar { 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. */

/* --- 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; }
}