/* =========================================================================
   TerraMind Basic · Theorieteil – seitenspezifische Bauteile
   -------------------------------------------------------------------------
   Baut auf shared.css auf (Tokens + Grundbausteine, 1:1 aus TerraMind
   Premium). Hier steht NUR, was es dort noch nicht gibt:
   Kopfbereich, Schichtenlayout, KI-Landkarte, die acht Interaktionen
   und die Unterschiede zwischen Lern- und Präsentationsmodus.
   ========================================================================= */

:root {
  --kopf-h: 132px;          /* wird beim Laden per JS auf den echten Wert gesetzt */
  --lay-abstand: var(--space-9);
}

html { scroll-padding-top: calc(var(--kopf-h) + 16px); }
body { overflow-x: hidden; }

/* ==================== KOPFBEREICH ======================================= */
/* Kopfzeile, Kapitelnavigation und Fortschritt kleben als ein Block oben.  */
.kopf { position: sticky; top: 0; z-index: 30; background: var(--surface-page); }
.kopf .site-header { position: static; border-bottom: 0; }
.kopf__rechts { display: flex; align-items: center; gap: var(--space-4); }

/* --- Runde Knöpfe im Kopf und schwebend ---------------------------------- */
.kopf__knopf {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 50%; cursor: pointer;
  border: 1px solid var(--border-subtle); background: var(--surface-card);
  color: var(--color-forest); padding: 0; flex: 0 0 auto;
  transition: background var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard);
}
.kopf__knopf:hover { background: var(--surface-subtle); border-color: var(--color-leaf); }

.kopf__knopf--breit { width: auto; border-radius: var(--radius-pill); padding: 0 14px; font-family: var(--font-body); font-size: var(--fs-small); font-weight: var(--fw-semibold); }

/* ==================== BEARBEITEN-MODUS ================================== */
/* Werkzeug zum Umformulieren. Kann mit assets/js/bearbeiten.js zusammen
   ersatzlos entfernt werden, sobald die Texte stehen. */
body.ist-bearbeiten [contenteditable] {
  outline: 1px dashed var(--color-grey-100); outline-offset: 3px;
  border-radius: 3px; transition: outline-color var(--duration-fast) var(--ease-standard);
}
body.ist-bearbeiten [contenteditable]:hover { outline-color: var(--color-leaf); }
body.ist-bearbeiten [contenteditable]:focus {
  outline: 2px solid var(--color-violet); outline-offset: 3px;
  background: rgba(216, 194, 236, 0.14);
}
body.ist-bearbeiten [data-bearbeiten] { background: var(--color-forest); color: var(--color-white); border-color: var(--color-forest); }

/* Im Bearbeiten-Modus sind auch die präsentationsexklusiven Blöcke da,
   damit wirklich jeder Text erreichbar ist. */
body.ist-bearbeiten .nur-praesi { display: block; position: relative; }
body.ist-bearbeiten .nur-praesi::before {
  content: 'nur in der Präsentation';
  display: inline-block; margin-bottom: var(--space-3);
  font-size: 10px; font-weight: var(--fw-bold); letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--color-violet-dark);
  background: var(--surface-highlight); padding: 3px 9px; border-radius: var(--radius-pill);
}

.bearbeiten-leiste {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: 16px; z-index: 40;
  display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; justify-content: center;
  background: var(--surface-card); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-pill); padding: 8px 10px 8px var(--space-5);
  box-shadow: var(--shadow-lifted); max-width: calc(100vw - 32px);
}
.bearbeiten-leiste .btn { padding: 8px 16px; font-size: var(--fs-small); }
.bearbeiten-leiste .btn:disabled { opacity: 0.4; cursor: default; }
.bearbeiten-leiste__zahl { font-size: var(--fs-small); font-weight: var(--fw-bold); color: var(--color-forest); white-space: nowrap; }

/* --- Menüleiste ein- und ausklappen -------------------------------------- */
.schweber { position: fixed; top: 12px; right: 16px; z-index: 31; display: flex; gap: 8px; }
.schweber .kopf__knopf { box-shadow: var(--shadow-soft); display: none; }
body[data-menue="zu"] .kopf { display: none; }
body[data-menue="zu"] .menue-auf { display: inline-flex; }
body.ist-vollbild .vollbild-aus { display: inline-flex; }
/* Im Vollbild ist der Vollbild-Knopf im Kopf überflüssig */
body.ist-vollbild [data-vollbild-an] { display: none; }
/* In der veröffentlichten Fassung gibt es nur den Lernmodus, und dort
   ist Vollbild zum ruhigen Lesen genauso willkommen. */

/* --- Blättern im Präsentationsmodus -------------------------------------- */
/* Der Weg, der immer geht – auch wenn der Tastaturfokus verlorengeht. */
.blaettern {
  position: fixed; right: 16px; bottom: 16px; z-index: 31;
  display: none; align-items: center; gap: 6px;
  background: var(--surface-card); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-pill); padding: 5px 8px; box-shadow: var(--shadow-soft);
}
body[data-modus="praesentation"] .blaettern { display: flex; }
.blaettern__btn {
  width: 30px; height: 30px; border-radius: 50%; cursor: pointer; padding: 0;
  border: 0; background: var(--surface-subtle); color: var(--color-forest);
  font-size: 13px; line-height: 1;
  transition: background var(--duration-fast) var(--ease-standard);
}
.blaettern__btn:hover { background: var(--color-forest); color: var(--color-white); }
.blaettern__stand {
  font-size: var(--fs-caption); font-weight: var(--fw-bold); color: var(--text-muted);
  font-variant-numeric: tabular-nums; min-width: 42px; text-align: center;
}

.modus {
  display: inline-flex; padding: 4px; gap: 2px;
  background: var(--surface-subtle); border-radius: var(--radius-pill);
}
.modus__btn {
  font-family: var(--font-body); font-size: var(--fs-small); font-weight: var(--fw-semibold);
  color: var(--text-muted); background: none; border: 0; cursor: pointer;
  padding: 7px 16px; border-radius: var(--radius-pill); white-space: nowrap;
  transition: background var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard);
}
.modus__btn[aria-pressed="true"] { background: var(--color-forest); color: var(--color-white); }

/* --- Kapitelnavigation --------------------------------------------------- */
.kapitelnav {
  display: flex; gap: var(--space-2); align-items: center;
  padding: 0 48px 10px; overflow-x: auto; scrollbar-width: thin;
  border-bottom: 1px solid var(--border-subtle);
}
.kapitelnav a {
  flex: 0 0 auto; font-size: var(--fs-small); font-weight: var(--fw-semibold);
  color: var(--text-muted); text-decoration: none;
  padding: 6px 14px; border-radius: var(--radius-pill);
  transition: background var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard);
}
.kapitelnav a:hover { background: var(--surface-subtle); color: var(--text-brand); text-decoration: none; }
.kapitelnav a.is-hier { background: var(--color-forest); color: var(--color-white); }

/* --- Fortschrittsbalken -------------------------------------------------- */
.fortschritt { height: 3px; background: var(--surface-subtle); }
.fortschritt__fill { height: 100%; width: 0; background: var(--color-leaf); transition: width 90ms linear; }

/* ==================== SCHICHTENLAYOUT =================================== */
/* Schicht 1 = .claim · Schicht 2 = .stage · Schicht 3 = .deep             */

.lay {
  padding: var(--lay-abstand) var(--space-6);
  max-width: 980px; margin: 0 auto;
  scroll-snap-align: start;
}
.lay--weit { max-width: 1180px; }

.lay__num {
  font-size: var(--fs-caption); font-weight: var(--fw-bold);
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--color-leaf); text-align: center; margin-bottom: var(--space-4);
}

/* Schicht 1: die eine Kernaussage */
.claim {
  font-size: var(--fs-h1); font-weight: var(--fw-extrabold);
  color: var(--color-forest); line-height: var(--lh-tight);
  letter-spacing: var(--ls-heading);
  text-align: center; max-width: 20ch; margin: 0 auto;
  text-wrap: balance;
}
.claim--lang { max-width: 30ch; font-size: var(--fs-h2); }
.claim .kw { color: var(--color-violet); }
.claim .zeichen { font-size: 1.35em; font-weight: var(--fw-bold); color: var(--color-violet); vertical-align: -0.06em; padding: 0 0.12em; }

/* Schicht 2: Schaubild oder Interaktion */
.stage { margin-top: var(--space-8); }
.stage__hint {
  text-align: center; font-size: var(--fs-small); color: var(--text-muted);
  margin: 0 0 var(--space-5);
}
/* Kleingedruckte Einordnung unter einer Interaktion */
.stage__notiz {
  text-align: center; font-size: var(--fs-caption); color: var(--text-muted);
  margin: var(--space-4) auto 0; max-width: 560px; line-height: var(--lh-body);
  font-style: italic;
}

/* Schicht 3: die Vertiefung */
.deep { max-width: 760px; margin: var(--space-8) auto 0; }
.deep__label {
  font-size: var(--fs-caption); font-weight: var(--fw-bold);
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted);
  margin-bottom: var(--space-3); text-align: center;
}
.deep .accordion__head { font-size: var(--fs-small); }
.deep .accordion__head b { font-weight: var(--fw-bold); color: var(--color-forest); }
.merksatz {
  display: block; font-size: var(--fs-body-lg); font-weight: var(--fw-semibold);
  color: var(--color-forest); line-height: var(--lh-heading);
}
/* Stehen zwei Merksätze im selben Ausklappfeld, brauchen sie Luft dazwischen. */
.merksatz + .merksatz { margin-top: var(--space-4); }

/* ==================== DIE KI-LANDKARTE ================================== */
.karte { max-width: 560px; margin: 0 auto; text-align: center; }
.karte__box {
  border: 1.5px solid var(--color-grey-100); border-radius: var(--radius-md);
  padding: 12px var(--space-4); background: var(--surface-card);
  transition: opacity var(--duration-base) var(--ease-standard),
              border-color var(--duration-base) var(--ease-standard),
              background var(--duration-base) var(--ease-standard);
}
.karte__name { font-size: var(--fs-small); font-weight: var(--fw-bold); color: var(--text-muted); line-height: 1.3; }
.karte__sub  { font-size: var(--fs-caption); color: var(--text-muted); opacity: 0.85; margin-top: 2px; }
.karte__reihe { display: flex; gap: var(--space-3); justify-content: center; }
.karte__reihe > * { flex: 1 1 0; min-width: 0; }
.karte__pfeil { color: var(--color-grey-100); font-size: 18px; line-height: 1; margin: 7px 0; }

/* Zustände */
.karte__box.is-known { border-color: var(--color-leaf); }
.karte__box.is-known .karte__name { color: var(--color-forest); }
.karte__box.is-active {
  border-color: var(--color-forest); background: var(--color-forest);
  box-shadow: var(--shadow-card);
}
.karte__box.is-active .karte__name,
.karte__box.is-active .karte__sub { color: var(--color-white); }
.karte__box.is-dim { opacity: 0.28; }
.karte[data-leer="ja"] .karte__name,
.karte[data-leer="ja"] .karte__sub { visibility: hidden; }
.karte[data-leer="ja"] .karte__box { opacity: 0.4; }

.karte__legende { font-size: var(--fs-caption); color: var(--text-muted); margin-top: var(--space-4); }

/* Kompakte Variante – überall dort, wo die Landkarte neben etwas anderem
   steht und der Abschnitt in einen Bildschirm passen soll. */
.karte--klein { max-width: 380px; }
.karte--klein .karte__box { padding: 7px var(--space-3); }
.karte--klein .karte__name { font-size: var(--fs-caption); }
.karte--klein .karte__sub { font-size: 10px; }
.karte--klein .karte__pfeil { font-size: 14px; margin: 4px 0; }
.karte--klein .karte__reihe { gap: var(--space-2); }

/* ==================== GEMEINSAME BAUTEILE DER INTERAKTIONEN ============= */
.tm {
  background: var(--surface-card); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-card);
  padding: var(--space-6);
}
.tm__kopf {
  font-size: var(--fs-caption); font-weight: var(--fw-bold);
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-leaf);
  margin-bottom: var(--space-3);
}
.tm__leiste { display: flex; gap: var(--space-3); flex-wrap: wrap; justify-content: center; margin-top: var(--space-5); }
/* Kopfzeile mit Zurücksetzen-Knopf am rechten Rand */
.tm__kopf--reihe { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.tm__reset {
  font-family: var(--font-body); font-size: 11px; font-weight: var(--fw-semibold);
  text-transform: none; letter-spacing: 0; white-space: nowrap;
  border: 1px solid var(--border-subtle); background: var(--surface-card);
  color: var(--text-muted); border-radius: var(--radius-pill);
  padding: 4px 10px; cursor: pointer;
  transition: all var(--duration-fast) var(--ease-standard);
}
.tm__reset:hover { border-color: var(--color-leaf); color: var(--text-brand); }
.zut__aufgabe .tm__reset { background: rgba(255,255,255,0.14); border-color: rgba(255,255,255,0.3); color: var(--color-white); margin-left: var(--space-4); }
.zut__aufgabe .tm__reset:hover { background: rgba(255,255,255,0.26); border-color: rgba(255,255,255,0.5); color: var(--color-white); }
.tm__fuss { font-size: var(--fs-small); color: var(--text-muted); margin: var(--space-5) 0 0; line-height: var(--lh-body); }
.tm__zwei { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); align-items: start; }

.pille {
  font-family: var(--font-body); font-size: var(--fs-small); font-weight: var(--fw-semibold);
  border: 1.5px solid var(--border-subtle); background: var(--surface-card); color: var(--text-muted);
  border-radius: var(--radius-pill); padding: 8px 16px; cursor: pointer;
  transition: all var(--duration-fast) var(--ease-standard);
}
.pille:hover { border-color: var(--color-leaf); color: var(--text-brand); }
.pille[aria-pressed="true"], .pille.is-an { background: var(--color-forest); border-color: var(--color-forest); color: var(--color-white); }

mark { background: var(--surface-highlight); color: var(--color-violet-dark); font-weight: var(--fw-semibold); padding: 1px 4px; border-radius: 4px; }

/* Nur für Screenreader – gibt Schaltern einen vollständigen Namen. */
.sr-nur {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* Sichtbarer Fokus für alle Bedienelemente der Interaktionen */
.tm button:focus-visible, .schicht:focus-visible, .sort__zone:focus-visible,
.blaettern__btn:focus-visible, .kopf__knopf:focus-visible, .modus__btn:focus-visible,
.check__pfeil:focus-visible, .accordion__head:focus-visible {
  outline: 3px solid var(--color-violet); outline-offset: 2px;
}

.blaettern__btn:disabled { opacity: 0.3; cursor: default; }
.blaettern__btn:disabled:hover { background: var(--surface-subtle); color: var(--color-forest); }

/* --- Chat-Blase (für Antwortdarstellungen) ------------------------------ */
.blase {
  background: var(--surface-subtle); border-radius: var(--radius-md);
  padding: var(--space-5); font-size: var(--fs-body); line-height: var(--lh-body);
  color: var(--text-primary);
}
.blase--frage { background: var(--color-forest); color: var(--color-white); font-weight: var(--fw-semibold); }

/* ==================== 1.1 · DREI SCHICHTEN ============================== */
.schichten { max-width: 620px; margin: 0 auto; display: flex; flex-direction: column; gap: var(--space-3); }
.schicht {
  width: 100%; text-align: left; cursor: pointer;
  background: var(--surface-card); border: 1.5px solid var(--border-subtle);
  border-radius: var(--radius-md); padding: var(--space-5);
  font-family: var(--font-body);
  transition: border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard);
}
.schicht:hover { border-color: var(--color-leaf); }
.schicht.is-offen { border-color: var(--color-forest); box-shadow: var(--shadow-card); }
.schicht__zeile { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-4); }
.schicht__name { font-size: var(--fs-h3); font-weight: var(--fw-bold); color: var(--color-forest); }
.schicht__was  { font-size: var(--fs-caption); color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.06em; font-weight: var(--fw-bold); }
.schicht__mehr { display: none; margin-top: var(--space-4); font-size: var(--fs-body); color: var(--text-muted); line-height: var(--lh-body); }
.schicht.is-offen .schicht__mehr { display: block; }
.schicht__mehr strong { color: var(--text-brand); }

/* ==================== 1.2 · WORT FÜR WORT =============================== */
.wfw__satz {
  font-size: var(--fs-h3); line-height: 1.5; color: var(--color-forest);
  font-weight: var(--fw-semibold); text-align: center;
  min-height: 3em; display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap; gap: 0 8px; padding: var(--space-4) 0;
}
.wfw__satz .neu { color: var(--color-violet); }
.wfw__cursor { display: inline-block; width: 2px; height: 1em; background: var(--color-leaf); animation: tmblink 1s steps(1) infinite; vertical-align: -0.12em; }
@keyframes tmblink { 50% { opacity: 0; } }

.wfw__optionen { display: grid; gap: var(--space-3); max-width: 460px; margin: var(--space-5) auto 0; }
.wfw__opt {
  position: relative; overflow: hidden;
  display: flex; justify-content: space-between; align-items: center; gap: var(--space-4);
  background: var(--surface-card); border: 1.5px solid var(--border-subtle);
  border-radius: var(--radius-sm); padding: 11px 16px; cursor: pointer;
  font-family: var(--font-body); font-size: var(--fs-body); color: var(--text-primary);
  transition: border-color var(--duration-fast) var(--ease-standard);
}
.wfw__opt:hover { border-color: var(--color-forest); }
.wfw__balken { position: absolute; inset: 0 auto 0 0; background: var(--surface-subtle); z-index: 0; }
.wfw__opt > span { position: relative; z-index: 1; }
.wfw__wort { font-weight: var(--fw-semibold); }
.wfw__p { font-size: var(--fs-small); color: var(--text-muted); font-variant-numeric: tabular-nums; }

.wfw__ende { max-width: 560px; margin: var(--space-5) auto 0; }
.wfw__ende.is-kippt { background: var(--surface-highlight); }

/* ==================== 1.3 · REGEL GEGEN MUSTER ========================== */
.rm__spalte { text-align: center; }
.rm__titel { font-size: var(--fs-h3); font-weight: var(--fw-bold); color: var(--color-forest); }
.rm__unter { font-size: var(--fs-caption); text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); font-weight: var(--fw-bold); margin-bottom: var(--space-4); }
.rm__frage { font-size: var(--fs-small); color: var(--text-muted); font-style: italic; margin-bottom: var(--space-3); min-height: 3em; }
.rm__ergebnis {
  background: var(--surface-subtle); border-radius: var(--radius-md); padding: var(--space-5);
  font-size: var(--fs-body); color: var(--text-primary); line-height: var(--lh-body); min-height: 7em;
  display: flex; align-items: center; justify-content: center; text-align: left;
}
.rm__zaehler { font-size: var(--fs-caption); color: var(--text-muted); margin-top: var(--space-3); }

/* ==================== 2.1 · DER TRICHTER ================================ */
/* Mit sechs Strömen breiter geworden – sonst wird die Beschriftung, die in
   SVG-Einheiten gesetzt ist, am Beamer zu klein. */
.trichter { max-width: 840px; margin: 0 auto; display: block; }
.trichter .strom { fill: none; stroke: var(--color-leaf); opacity: 0.55; stroke-linecap: round; }
.trichter .rahmen { fill: none; stroke: var(--color-forest); stroke-width: 2; }
.trichter .beschriftung { font-family: var(--font-body); font-size: 12.5px; fill: var(--text-muted); font-weight: 600; }
/* Trainingswissen steckt im Modell selbst und nicht im Kontextfenster –
   deshalb ist dieser eine Strom farblich abgesetzt. */
.trichter .ist-training { fill: var(--color-violet-dark); }
.trichter .ist-training.klein { font-size: 10px; font-weight: 500; }
.trichter .strom--training { stroke: var(--color-violet); opacity: 0.4; }
.trichter .ausgabe { font-family: var(--font-body); font-size: 21px; fill: var(--color-white); font-weight: 700; }
.trichter .topf { fill: var(--color-forest); }

/* ==================== 2.2 · DAS KONTEXT-MISCHPULT ======================= */
/* Zwei Spalten: links die Quellen, rechts Frage über Ergebnis. Der
   Zeilenabstand entspricht dem, was vorher der Innenabstand des rechten
   Blocks war – die Ansicht am Schreibtisch bleibt also unverändert. */
.pult {
  display: grid;
  grid-template-columns: minmax(0,0.9fr) minmax(0,1.1fr);
  grid-template-areas: "quellen frage" "quellen antwort";
  /* Die Quellenspalte ist hoch und spannt beide Zeilen. Ohne feste
     Zeilenhöhen verteilt der Browser ihre Höhe auf beide, und dann klafft
     zwischen Frage und Ergebnis eine Lücke. Erste Zeile so hoch wie die
     Frage, der Rest gehört dem Ergebnis. */
  grid-template-rows: max-content 1fr;
  column-gap: var(--space-6); row-gap: var(--space-4);
  align-items: start;
}
.pult__quellen { grid-area: quellen; }
.pult__frage   { grid-area: frage; display: flex; flex-direction: column; gap: var(--space-4); }
/* .tm__kopf bringt einen eigenen Abstand nach unten mit. In den beiden
   Flex-Blöcken käme der Abstand des Flex-Rasters noch dazu – dann stünde
   „Ergebnis“ deutlich weiter von seiner Blase entfernt als „Kontext“ von
   den Schaltern. Deshalb hier nur der Flex-Abstand. */
.pult__frage > .tm__kopf,
.pult__antwort > .tm__kopf { margin-bottom: 0; }
.pult__schalter { display: flex; flex-direction: column; gap: var(--space-3); }
.pult__zeile {
  display: flex; align-items: flex-start; gap: var(--space-4); width: 100%; text-align: left;
  background: var(--surface-card); border: 1.5px solid var(--border-subtle);
  border-radius: var(--radius-md); padding: 13px 16px; cursor: pointer; font-family: var(--font-body);
  transition: border-color var(--duration-fast) var(--ease-standard), background var(--duration-fast) var(--ease-standard);
}
.pult__zeile:hover:not(:disabled) { border-color: var(--color-leaf); }
.pult__zeile:disabled { cursor: default; background: var(--surface-subtle); border-color: transparent; }
.pult__zeile.is-an { border-color: var(--color-forest); background: var(--surface-subtle); }
.pult__kipp {
  flex: 0 0 auto; width: 38px; height: 22px; border-radius: var(--radius-pill);
  background: var(--color-grey-100); position: relative; margin-top: 2px;
  transition: background var(--duration-base) var(--ease-standard);
}
.pult__kipp::after {
  content: ''; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px;
  border-radius: 50%; background: var(--color-white); box-shadow: var(--shadow-soft);
  transition: transform var(--duration-base) var(--ease-standard);
}
.pult__zeile.is-an .pult__kipp { background: var(--color-forest); }
.pult__zeile.is-an .pult__kipp::after { transform: translateX(16px); }
.pult__name { display: block; font-size: var(--fs-body); font-weight: var(--fw-semibold); color: var(--text-brand); line-height: 1.3; }
.pult__zusatz { display: block; font-size: var(--fs-caption); color: var(--text-muted); margin-top: 2px; line-height: 1.35; }

.pult__antwort { grid-area: antwort; display: flex; flex-direction: column; gap: var(--space-4); }
.pult__ausgabe { min-height: 190px; }
.pult__ausgabe.is-neu { animation: tmfade var(--duration-base) var(--ease-standard); }
@keyframes tmfade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.pult__fuss { font-size: var(--fs-small); color: var(--text-muted); line-height: var(--lh-body); border-left: 3px solid var(--color-leaf); padding-left: var(--space-4); }

/* ==================== 2.4 · KONTEXT IST BEGRENZT ======================== */
.kf { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: var(--space-6); align-items: start; }
.kf__spaltentitel { font-size: var(--fs-caption); font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); margin-bottom: var(--space-3); }
.kf__aufgabe {
  background: var(--color-forest); color: var(--color-white);
  border-radius: var(--radius-md); padding: 13px var(--space-5); margin-bottom: var(--space-5);
  font-size: var(--fs-body); line-height: var(--lh-heading);
}
.kf__aufgabe b { font-weight: var(--fw-bold); opacity: 0.75; margin-right: 6px; }

.kf__vorrat { display: flex; flex-direction: column; gap: var(--space-3); }
.kf__stein {
  display: flex; justify-content: space-between; align-items: center; gap: var(--space-4);
  width: 100%; text-align: left; font-family: var(--font-body); cursor: pointer;
  background: var(--surface-card); border: 1.5px solid var(--border-subtle);
  border-radius: var(--radius-sm); padding: 11px 14px;
  transition: border-color var(--duration-fast) var(--ease-standard), opacity var(--duration-fast) var(--ease-standard);
}
.kf__stein:hover { border-color: var(--color-forest); }
.kf__stein.is-drin { opacity: 0.3; }
.kf__stein--kern { border-left: 4px solid var(--color-violet); }
.kf__steinname { font-size: var(--fs-small); font-weight: var(--fw-semibold); color: var(--text-brand); }
.kf__steininfo { font-size: var(--fs-caption); color: var(--text-muted); }
.kf__gewicht { flex: 0 0 auto; font-size: var(--fs-caption); font-weight: var(--fw-bold); color: var(--text-muted); font-variant-numeric: tabular-nums; }

.kf__fenster {
  border: 1px solid var(--border-subtle); border-radius: var(--radius-md);
  height: 340px; padding: 8px; display: flex; flex-direction: column; gap: 6px;
  background: var(--surface-page); overflow: hidden;
}
.kf__leer { margin: auto; font-size: var(--fs-small); color: var(--text-muted); text-align: center; padding: 0 var(--space-4); }
.kf__drin {
  flex: 0 0 auto; border-radius: var(--radius-sm); padding: 6px 12px; cursor: pointer;
  background: var(--surface-subtle); border: 0; font-family: var(--font-body); text-align: left;
  font-size: var(--fs-caption); font-weight: var(--fw-semibold); color: var(--color-forest);
  display: flex; align-items: center; overflow: hidden;
  transition: background var(--duration-base) var(--ease-standard);
}
.kf__drin.is-kern { background: var(--color-forest); color: var(--color-white); }
/* Ballast: kostet Platz, trägt nichts bei – deshalb schraffiert statt gefüllt */
.kf__drin.is-ballast {
  background: repeating-linear-gradient(-45deg, rgba(157,61,152,0.10) 0 8px, rgba(157,61,152,0.02) 8px 16px);
  color: var(--color-violet-dark); box-shadow: inset 0 0 0 1px var(--color-soft-purple);
}

.kf__anzeige { margin-top: var(--space-5); display: grid; gap: var(--space-4); }
.kf__messkopf {
  display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3);
  font-size: var(--fs-caption); font-weight: var(--fw-bold); text-transform: uppercase;
  letter-spacing: 0.05em; color: var(--text-muted); margin-bottom: 5px;
}
.kf__messkopf span:last-child { font-variant-numeric: tabular-nums; letter-spacing: 0; }
.kf__balken { height: 12px; background: var(--surface-subtle); border-radius: var(--radius-pill); overflow: hidden; }
.kf__fill { height: 100%; width: 0; border-radius: var(--radius-pill); transition: width var(--duration-base) var(--ease-standard), background var(--duration-base) var(--ease-standard); }
.kf__fill--qual { background: var(--color-leaf); }
.kf__fill--qual.is-schlecht { background: var(--color-violet); }
.kf__fill--verb { background: var(--color-forest); }
.kf__fill--verb.is-hoch { background: var(--color-violet); }
.kf__meldung { font-size: var(--fs-small); color: var(--text-muted); margin-top: var(--space-4); line-height: var(--lh-body); min-height: 3em; }

/* ==================== 2.5 · SORTIEREN =================================== */
.sort__stapel { text-align: center; margin-bottom: var(--space-6); }
.sort__karte {
  max-width: 520px; margin: 0 auto; background: var(--surface-card);
  border: 1.5px solid var(--color-forest); border-radius: var(--radius-md);
  box-shadow: var(--shadow-card); padding: var(--space-5) var(--space-6);
  font-size: var(--fs-body-lg); font-weight: var(--fw-semibold); color: var(--color-forest);
  line-height: var(--lh-heading); min-height: 5.4em; display: flex; align-items: center; justify-content: center;
  text-wrap: balance;
}
.sort__rest { font-size: var(--fs-caption); color: var(--text-muted); margin-top: var(--space-3); }

.sort__zonen { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-3); }
.sort__zone {
  min-height: 130px; padding: var(--space-4) var(--space-3); cursor: pointer; font-family: var(--font-body);
  border: 1.5px dashed var(--border-subtle); border-radius: var(--radius-md);
  background: var(--surface-card); text-align: center;
  display: flex; flex-direction: column; gap: 4px;
  transition: border-color var(--duration-fast) var(--ease-standard), background var(--duration-fast) var(--ease-standard);
}
.sort__zone:hover { border-color: var(--color-forest); background: var(--surface-subtle); }
.sort__zone--aus { border-color: var(--color-soft-purple); }
.sort__zone--aus:hover { border-color: var(--color-violet); background: var(--surface-highlight); }
.sort__zonename { font-size: var(--fs-body); font-weight: var(--fw-bold); color: var(--color-forest); }
.sort__zonesub { font-size: var(--fs-caption); color: var(--text-muted); }
.sort__zone--aus .sort__zonename { color: var(--color-violet-dark); }
.sort__abgelegt { display: flex; flex-direction: column; gap: 3px; margin-top: var(--space-3); }
.sort__mini { font-size: 11px; line-height: 1.3; background: var(--surface-subtle); border-radius: 6px; padding: 4px 6px; color: var(--text-muted); }
.sort__mini.is-kritisch { background: var(--surface-highlight); color: var(--color-violet-dark); font-weight: var(--fw-semibold); }

.sort__feedback { margin-top: var(--space-5); }
.sort__feedback .card { padding: var(--space-5); }
.sort__urteil { font-size: var(--fs-small); font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: var(--space-2); }
.sort__urteil--ja   { color: var(--color-leaf); }
.sort__urteil--nein { color: var(--color-violet); }
.sort__urteil--auch { color: var(--color-leaf); }
.sort__fertig { text-align: center; }

/* ==================== 3.1 · ZUTATEN FÜR AGENTISCHES ARBEITEN ============ */
.zut__aufgabe {
  background: var(--color-forest); color: var(--color-white);
  border-radius: var(--radius-md); padding: 13px var(--space-5); margin-bottom: var(--space-6);
  font-size: var(--fs-body); line-height: var(--lh-heading); text-align: center;
}
.zut__aufgabe b { font-weight: var(--fw-bold); opacity: 0.75; margin-right: 6px; }

.zut__reihe { display: flex; align-items: center; gap: var(--space-4); }
.zut__basis {
  flex: 0 0 auto; width: 118px; align-self: stretch;
  border: 2px solid var(--color-forest); border-radius: var(--radius-md);
  background: var(--surface-subtle);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: var(--space-4) var(--space-3); gap: 4px;
}
.zut__basisname { font-size: var(--fs-h3); font-weight: var(--fw-extrabold); color: var(--color-forest); }
.zut__basissub { font-size: 11px; color: var(--text-muted); line-height: 1.3; }
.zut__plus { flex: 0 0 auto; font-size: 26px; font-weight: var(--fw-bold); color: var(--color-leaf); }

.zut__gitter { flex: 1 1 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--space-3); align-items: stretch; }
.zut {
  position: relative; text-align: left; cursor: pointer; font-family: var(--font-body);
  background: var(--surface-card); border: 1.5px solid var(--border-subtle);
  border-radius: var(--radius-md); padding: 12px 14px 12px 34px;
  display: flex; flex-direction: column; gap: 2px; justify-content: flex-start;
  overflow-wrap: anywhere; hyphens: auto;
  transition: border-color var(--duration-fast) var(--ease-standard), background var(--duration-fast) var(--ease-standard);
}
.zut:hover { border-color: var(--color-leaf); }
.zut.is-an { border-color: var(--color-forest); background: var(--surface-subtle); }
.zut__haken {
  position: absolute; left: 12px; top: 14px; width: 14px; height: 14px;
  border: 1.5px solid var(--color-grey-100); border-radius: 4px; background: var(--surface-card);
  transition: all var(--duration-fast) var(--ease-standard);
}
.zut.is-an .zut__haken { background: var(--color-forest); border-color: var(--color-forest); }
.zut.is-an .zut__haken::after {
  content: ''; position: absolute; left: 4px; top: 1px; width: 4px; height: 8px;
  border: solid var(--color-white); border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.zut__name { font-size: var(--fs-small); font-weight: var(--fw-bold); color: var(--text-brand); line-height: 1.25; }
.zut__unter { font-size: 11px; color: var(--text-muted); line-height: 1.3; }
.zut__notiz { font-size: 11px; color: var(--color-violet); font-weight: var(--fw-semibold); line-height: 1.3; margin-top: 2px; }
.zut__hinweis--namen { border-left-color: var(--color-leaf); }

.zut__unten { margin-top: var(--space-6); }
.zut__zustand {
  font-size: var(--fs-h2); font-weight: var(--fw-extrabold); color: var(--color-forest);
  line-height: var(--lh-heading); margin-bottom: var(--space-4);
}
/* Ausgabe: was am Ende tatsächlich herauskommt */
.zut__ausgabe { list-style: none; margin: 0 0 var(--space-4); padding: 0; display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--space-6); row-gap: 6px; }
.zut__ausgabe li {
  position: relative; padding-left: 20px;
  font-size: var(--fs-small); line-height: 1.4; color: var(--text-primary);
}
.zut__ausgabe li::before {
  content: '→'; position: absolute; left: 0; top: 0; color: var(--color-leaf); font-weight: var(--fw-bold);
}
.zut__ausgabe li.ist-basis { color: var(--text-muted); font-style: italic; }

.zut__kann { display: grid; gap: var(--space-3); }
.zut__satz { margin: 0; font-size: var(--fs-body); line-height: var(--lh-body); color: var(--text-primary); }
.zut__satz b { display: block; font-size: var(--fs-caption); text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-leaf); font-weight: var(--fw-bold); }
.zut__detail { margin-top: var(--space-5); }
.zut__paar { font-size: var(--fs-small); color: var(--text-muted); line-height: var(--lh-body); }
/* Nur die eigene Überschrift, nicht die Zutatennamen in den Zeilen darunter */
.zut__paar > b { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-leaf); font-weight: var(--fw-bold); }
.zut__paar--achtung > b { color: var(--color-violet); margin-bottom: var(--space-3); }
.zut__paar--achtung .zut__satz { font-size: var(--fs-small); color: var(--text-muted); }
.zut__paar--achtung .zut__satz + .zut__satz { margin-top: var(--space-3); }
.zut__hinweis {
  margin-top: var(--space-5); padding-left: var(--space-4);
  border-left: 3px solid var(--color-violet);
  font-size: var(--fs-small); color: var(--text-muted); line-height: var(--lh-body);
}

/* ==================== 3.2 · CHAT GEGEN DELEGATION ======================= */
.dele { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6); }
.dele__spalte { display: flex; flex-direction: column; gap: var(--space-3); }
.dele__titel { text-align: center; font-size: var(--fs-h3); font-weight: var(--fw-bold); color: var(--color-forest); margin-bottom: var(--space-3); }
.dele__schritt { font-size: var(--fs-small); border-radius: var(--radius-sm); padding: 9px 14px; line-height: 1.4; }
.dele__schritt--du   { background: var(--color-forest); color: var(--color-white); }
.dele__schritt--ki   { background: var(--surface-subtle); color: var(--text-primary); }
.dele__schritt--auto { background: var(--surface-subtle); color: var(--text-muted); font-style: italic; margin-left: var(--space-5); }
.dele__pruef {
  margin-top: var(--space-3); background: var(--color-violet); color: var(--color-white);
  border-radius: var(--radius-md); padding: var(--space-5); text-align: center;
}
.dele__pruef b { display: block; font-size: var(--fs-h3); font-weight: var(--fw-extrabold); margin-bottom: 4px; }
.dele__pruef span { font-size: var(--fs-small); opacity: 0.92; }

/* ==================== 4.1 · PROMPT-VERGLEICH ============================ */
.pv__prompt { font-size: var(--fs-small); line-height: var(--lh-body); color: var(--text-primary); background: var(--surface-subtle); border-radius: var(--radius-md); padding: var(--space-4); }
.pv__label { font-size: var(--fs-caption); font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); margin-bottom: var(--space-3); }
.pv__ergebnis { display: none; margin-top: var(--space-4); }
.pv.is-offen .pv__ergebnis { display: block; animation: tmfade var(--duration-base) var(--ease-standard); }
.pv__thema {
  text-align: center; background: var(--surface-subtle); border-radius: var(--radius-md);
  padding: 12px var(--space-5); margin-bottom: var(--space-5);
  font-size: var(--fs-body); font-weight: var(--fw-semibold); color: var(--color-forest);
}

/* ==================== ABSCHLUSS · DIE FÜNF FRAGEN ======================= */
.check { list-style: none; counter-reset: check; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.check__zeile {
  counter-increment: check;
  display: flex; align-items: center; gap: var(--space-4);
  border-bottom: 1px solid var(--border-subtle); padding: var(--space-4) 0;
}
.check__zeile:last-child { border-bottom: 0; }
.check__zeile::before {
  content: counter(check); flex: 0 0 auto;
  font-size: var(--fs-caption); font-weight: var(--fw-bold); color: var(--color-leaf);
  width: 20px;
}
.check__frage { flex: 1 1 auto; font-size: var(--fs-body-lg); font-weight: var(--fw-semibold); color: var(--color-forest); line-height: var(--lh-heading); }
.check__pfeil {
  flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--color-violet); background: var(--surface-subtle); text-decoration: none;
  transition: background var(--duration-fast) var(--ease-standard);
}
.check__pfeil:hover { background: var(--surface-highlight); text-decoration: none; }

/* ==================== 4.2 · DIAGNOSE ==================================== */
.diag__fall { font-size: var(--fs-caption); font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-leaf); text-align: center; margin-bottom: var(--space-4); }
.diag__auftrag { font-size: var(--fs-body-lg); font-weight: var(--fw-semibold); }
.diag__ergebnis { margin-top: var(--space-3); }
.diag__frage { text-align: center; font-size: var(--fs-body); font-weight: var(--fw-semibold); color: var(--text-brand); margin: var(--space-6) 0 var(--space-4); }
.diag__wahl { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px,1fr)); gap: var(--space-3); }
.diag__wahl .pille { width: 100%; }
.diag__wahl .pille.is-richtig { background: var(--color-forest); border-color: var(--color-forest); color: var(--color-white); }
.diag__wahl .pille.is-daneben { background: var(--surface-highlight); border-color: var(--color-soft-purple); color: var(--color-violet-dark); }
.diag__wahl .pille:disabled { cursor: default; }
.diag__wahl .pille:disabled:not(.is-richtig):not(.is-daneben) { opacity: 0.4; }
.diag__wahl .pille:disabled:hover { border-color: var(--border-subtle); color: var(--text-muted); }
.diag__wahl .pille.is-richtig:disabled:hover { border-color: var(--color-forest); color: var(--color-white); }
.diag__wahl .pille.is-daneben:disabled:hover { border-color: var(--color-soft-purple); color: var(--color-violet-dark); }
.diag__loesung { display: none; margin-top: var(--space-5); }
.diag.is-geloest .diag__loesung { display: block; animation: tmfade var(--duration-base) var(--ease-standard); }
.diag__nach { margin-top: var(--space-4); }
.diag__nach b { display: block; font-size: var(--fs-caption); text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-violet); margin-bottom: var(--space-2); }
.diag__satz { font-style: italic; color: var(--text-primary); }

/* ==================== 4.3 · BERECHTIGUNGSMATRIX ========================= */
.bm { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); }
.bm__bereich { border: 1px solid var(--border-subtle); border-radius: var(--radius-md); padding: var(--space-5); background: var(--surface-card); }
.bm__name { font-size: var(--fs-h3); font-weight: var(--fw-bold); color: var(--color-forest); text-align: center; margin-bottom: var(--space-4); }
.bm__rechte { display: flex; gap: 6px; justify-content: center; margin-bottom: var(--space-4); flex-wrap: wrap; }
.bm__recht { font-size: var(--fs-caption); padding: 6px 12px; }
.bm__folgen { display: grid; gap: var(--space-3); min-height: 8em; }
.bm__folge { font-size: var(--fs-small); line-height: 1.5; }
.bm__folge b { display: block; font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; font-weight: var(--fw-bold); margin-bottom: 2px; }
.bm__folge--geht  { color: var(--text-primary); }
.bm__folge--geht b { color: var(--color-leaf); }
.bm__folge--schief { color: var(--text-muted); }
.bm__folge--schief b { color: var(--color-violet); }
.bm__nichts { font-size: var(--fs-small); color: var(--text-muted); font-style: italic; }

/* ==================== 4.4 · FÜHRUNGSKREISLAUF =========================== */
.fk { display: flex; flex-direction: column; align-items: center; gap: var(--space-6); }
.fk__ring { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; justify-content: center; }
.fk__station {
  width: 150px; height: 150px; border-radius: 50%; cursor: pointer; font-family: var(--font-body);
  border: 2px solid var(--border-subtle); background: var(--surface-card);
  display: flex; align-items: center; justify-content: center; text-align: center; padding: var(--space-4);
  font-size: var(--fs-body); font-weight: var(--fw-bold); color: var(--text-muted); line-height: 1.25;
  transition: all var(--duration-base) var(--ease-standard);
}
.fk__station:hover { border-color: var(--color-leaf); color: var(--text-brand); }
.fk__station.is-an { background: var(--color-forest); border-color: var(--color-forest); color: var(--color-white); box-shadow: var(--shadow-card); }
.fk__pfeil { color: var(--color-leaf); font-size: 22px; }
.fk__panel { max-width: 560px; width: 100%; }
.fk__fragen { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.fk__fragen li { font-size: var(--fs-body-lg); font-weight: var(--fw-semibold); color: var(--color-forest); }

/* ==================== KAPITELÜBERSICHT (Hero) =========================== */
.uebersicht { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px,1fr)); gap: var(--space-4); max-width: 900px; margin: var(--space-8) auto 0; }
.uebersicht a {
  display: block; text-decoration: none; text-align: left;
  background: var(--surface-card); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md); padding: var(--space-5);
  transition: box-shadow var(--duration-base) var(--ease-standard), border-color var(--duration-base) var(--ease-standard);
}
.uebersicht a:hover { text-decoration: none; box-shadow: var(--shadow-card); border-color: var(--color-leaf); }
.uebersicht__nr { font-size: var(--fs-caption); font-weight: var(--fw-bold); letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-leaf); }
.uebersicht__titel { font-size: var(--fs-body-lg); font-weight: var(--fw-bold); color: var(--color-forest); margin: 6px 0; line-height: var(--lh-heading); }
.uebersicht__satz { font-size: var(--fs-small); color: var(--text-muted); line-height: var(--lh-body); }

/* ==================== KAPITELTRENNER ==================================== */
.hero { scroll-snap-align: start; }
.trenner { background: var(--surface-subtle); scroll-snap-align: start; }
.trenner .part-head { padding-top: var(--space-8); padding-bottom: var(--space-6); }
.trenner__lernziel { text-align: center; font-size: var(--fs-body-lg); color: var(--text-muted); max-width: 620px; margin: 0 auto; padding: 0 var(--space-6) var(--space-5); }
.trenner .karte { padding-bottom: var(--space-8); }

/* ==================== DATENSCHUTZ-ÜBERSICHT (2.6) ======================= */
.ds { max-width: 760px; margin: 0 auto; }
.ds__zeile { display: grid; grid-template-columns: minmax(130px, 1fr) 1.6fr; gap: var(--space-4); padding: 14px 0; border-bottom: 1px solid var(--border-subtle); align-items: baseline; }
.ds__zeile:last-of-type { border-bottom: 0; }
.ds__art { font-size: var(--fs-body); font-weight: var(--fw-bold); color: var(--color-forest); }
.ds__wert { font-size: var(--fs-small); color: var(--text-muted); line-height: var(--lh-body); }
.ds__stand { margin-top: var(--space-5); font-size: var(--fs-small); }

/* ==================== 4.2 · IM PRÄSI-MODUS: NUR DIE VIER URSACHEN ======= */
.ursachen { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--space-4); }
.ursachen div {
  border: 1.5px solid var(--border-subtle); border-radius: var(--radius-md);
  padding: var(--space-6) var(--space-3); text-align: center;
  font-size: var(--fs-h3); font-weight: var(--fw-bold); color: var(--color-forest);
  background: var(--surface-card); line-height: var(--lh-heading);
  display: flex; align-items: center; justify-content: center;
  overflow-wrap: anywhere;
}
.ursachen__merksatz { margin-top: var(--space-6); text-align: center; }

/* Sichtbar nur im Präsi-Modus – Gegenstück zu .nur-lernen */
.nur-praesi { display: none; }
body[data-modus="praesentation"] .nur-praesi { display: block; }

/* ==================== PRÄSENTATIONSMODUS ================================ */
/* Kein zweites Dokument – nur andere Größen, anderer Rhythmus.            */
body[data-modus="praesentation"] {
  --fs-h1: 52px; --fs-h2: 34px; --fs-h3: 25px;
  --fs-body-lg: 21px; --fs-body: 19px; --fs-small: 16px; --fs-caption: 13px;
  --lay-abstand: var(--space-7);
}
body[data-modus="praesentation"] .lay,
body[data-modus="praesentation"] .hero {
  min-height: calc(100vh - var(--kopf-h));
  display: flex; flex-direction: column; justify-content: center;
}
body[data-modus="praesentation"] .fortschritt { display: none; }

/* 3.1 soll im Präsi-Modus ohne Scrollen auf einen Bildschirm passen.
   Deshalb rückt hier alles enger zusammen – die Kernaussage bleibt groß. */
body[data-modus="praesentation"] #k3-1 { padding-top: var(--space-4); padding-bottom: var(--space-4); }
body[data-modus="praesentation"] #k3-1 .lay__num { margin-bottom: var(--space-2); }
body[data-modus="praesentation"] #k3-1 .stage { margin-top: var(--space-3); }
body[data-modus="praesentation"] #k3-1 .zut__reihe { gap: var(--space-3); }
body[data-modus="praesentation"] #k3-1 .zut__basis { padding: var(--space-3) var(--space-2); }
body[data-modus="praesentation"] #k3-1 .tm { padding: var(--space-3); }
body[data-modus="praesentation"] .zut__aufgabe { margin-bottom: var(--space-4); padding: 9px var(--space-4); }
body[data-modus="praesentation"] .zut__gitter { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 8px; }
body[data-modus="praesentation"] .zut { padding: 8px 10px 8px 28px; }
body[data-modus="praesentation"] .zut__haken { top: 10px; }
body[data-modus="praesentation"] .zut__unten { margin-top: var(--space-4); }
body[data-modus="praesentation"] .zut__zustand { font-size: var(--fs-h3); margin-bottom: var(--space-3); }
body[data-modus="praesentation"] .zut__ausgabe { row-gap: 4px; margin-bottom: var(--space-2); }
body[data-modus="praesentation"] .zut__ausgabe li { line-height: 1.35; }
body[data-modus="praesentation"] #k3-1 .tm__kopf { margin-bottom: var(--space-2); }

/* Im Präsi-Modus spricht Silvia – alles, was ihre Stimme ersetzt, ist weg:
   Vertiefungen, Lernziele, Bedienhinweise, Erklärsätze unter Schaubildern. */
body[data-modus="praesentation"] .deep,
body[data-modus="praesentation"] .trenner__lernziel,
body[data-modus="praesentation"] .stage__hint,
body[data-modus="praesentation"] .stage__notiz,
body[data-modus="praesentation"] .nur-lernen,
body[data-modus="praesentation"] [data-praesi="aus"],
body[data-modus="praesentation"] .hero__lead,
body[data-modus="praesentation"] .uebersicht { display: none; }

/* ==================== RESPONSIV ========================================= */
@media (max-width: 900px) {
  .tm__zwei, .pult, .kf, .zut__unten, .dele { grid-template-columns: 1fr; }
  /* Untereinander gilt eine andere Reihenfolge als nebeneinander: erst die
     Frage, dann die Schalter, dann das Ergebnis. Sonst stünden die Schalter
     ganz oben und man wüsste nicht, wozu man sie umlegt. */
  .pult {
    grid-template-areas: "frage" "quellen" "antwort";
    grid-template-rows: auto;      /* untereinander gilt die Zweizeilen-Regel nicht */
    row-gap: var(--space-5);
  }
  .bm { grid-template-columns: 1fr; }
  .sort__zonen { grid-template-columns: 1fr 1fr; }
  .zut__reihe { flex-direction: column; align-items: stretch; }
  .zut__basis { width: auto; flex-direction: row; gap: var(--space-3); padding: var(--space-3); }
  .zut__plus { text-align: center; }
}

@media (max-width: 720px) {
  :root { --lay-abstand: var(--space-7); }
  .lay { padding-left: var(--space-5); padding-right: var(--space-5); }
  .claim { font-size: var(--fs-h2); max-width: none; }
  .claim--lang { font-size: var(--fs-h3); }
  .kapitelnav { padding-left: var(--space-5); padding-right: var(--space-5); }
  .site-header { gap: var(--space-3); }
  .site-header__brand img { height: 38px; }
  .modus__btn { padding: 7px 12px; font-size: 13px; }
  .tm { padding: var(--space-5) var(--space-4); }
  .karte__reihe { flex-direction: column; }
  .fk__station { width: 128px; height: 128px; font-size: var(--fs-small); }
  .fk__pfeil { transform: rotate(90deg); }
  /* Der Trichter ist für sechs Ströme zu breit, um auf ein Handy zu passen.
     Statt die Schrift unlesbar zu schrumpfen, darf er in seinem eigenen
     Kasten seitlich gescrollt werden – die Seite selbst bleibt ruhig. */
  .trichter-rahmen { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 calc(-1 * var(--space-5)); padding: 0 var(--space-5); }
  .trichter { min-width: 620px; }
  .kf__aufgabe, .zut__aufgabe { font-size: var(--fs-small); }
  .zut__zustand { font-size: var(--fs-h3); }
  .sort__karte { font-size: var(--fs-body); }
  body[data-modus="praesentation"] {
    --fs-h1: 34px; --fs-h2: 26px; --fs-h3: 21px; --fs-body-lg: 18px; --fs-body: 17px;
  }
  body[data-modus="praesentation"] .lay { min-height: 0; display: block; }
}

/* ==================== RECHTSSEITEN ====================================== */
/* Impressum und Datenschutz im Fuß, und die Datenschutzseite selbst. Beides
   gibt es nur in der veröffentlichten Fassung, stört hier aber nicht. */
.site-footer__recht { display: flex; gap: var(--space-5); flex-wrap: wrap; }
.site-footer__recht a {
  color: var(--text-muted); text-decoration: none;
  border-bottom: 1px solid var(--border-subtle);
}
.site-footer__recht a:hover { color: var(--color-forest); border-bottom-color: var(--color-forest); }

.recht {
  max-width: 720px; margin: 0 auto;
  padding: var(--space-9) var(--space-5) var(--space-8);
}
.recht h1 { font-size: var(--fs-h1); color: var(--color-forest); line-height: var(--lh-heading); }
.recht h2 {
  font-size: var(--fs-h3); color: var(--color-forest); line-height: var(--lh-heading);
  margin-top: var(--space-8); margin-bottom: var(--space-3);
}
.recht p { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--text-primary); margin: 0 0 var(--space-4); }
.recht__vor { color: var(--text-muted); margin-bottom: var(--space-7); }
.recht a { color: var(--color-violet-dark); }
.recht__liste { margin: 0 0 var(--space-4); padding-left: var(--space-5); }
.recht__liste li {
  font-size: var(--fs-body); line-height: var(--lh-body);
  color: var(--text-primary); margin-bottom: 6px;
}
/* Die Rechtsseite hat keine Kapitelnavigation – der Kopf darf nicht kleben. */
.recht ~ .site-footer, body:has(.recht) .kopf { position: static; }

/* Bewegung nur, wenn sie gewünscht ist */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

/* Druck: Vertiefungen aufgeklappt, Interaktionen als Standbild */
@media print {
  .kopf, .praesi-hinweis { display: none; }
  .lay { page-break-inside: avoid; }
  .accordion__body { grid-template-rows: 1fr !important; }
}