/* ============================================================
   components.css – einzelne Bausteine
   ============================================================ */

/* ============================================================
   Buttons
   ============================================================ */

.knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--abstand-2);
  min-height: 3rem;            /* gut mit dem Finger zu treffen */
  padding: var(--abstand-3) var(--abstand-5);
  font-family: inherit;
  font-size: var(--text-s);
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;   /* „Kurs starten" soll nicht umbrechen */
  border: 2px solid transparent;
  border-radius: var(--radius-rund);
  cursor: pointer;
  transition: background var(--tempo), border-color var(--tempo),
              transform var(--tempo);
}
.knopf:active { transform: translateY(1px); }

.knopf--haupt {
  background: var(--farbe-marine);
  color: var(--farbe-weiss);
}
.knopf--haupt:hover { background: var(--farbe-marine-hell); color: var(--farbe-weiss); }

.knopf--zweit {
  background: var(--farbe-weiss);
  color: var(--farbe-marine);
  border-color: var(--farbe-marine);
}
.knopf--zweit:hover { background: var(--farbe-marine-zart); color: var(--farbe-marine); }

.knopf--leise {
  background: transparent;
  color: var(--farbe-text-leise);
  border-color: var(--farbe-linie);
  font-weight: 600;
}
.knopf--leise:hover { background: var(--farbe-weiss); color: var(--farbe-text); }

.knopf--gross {
  min-height: 3.5rem;
  font-size: var(--text-l);
  padding: var(--abstand-4) var(--abstand-7);
}

.knopf[disabled] { opacity: 0.5; cursor: not-allowed; }

/* Ohne feste Maße fällt ein inline-SVG im Flex-Container auf 0 × 0
   zusammen – der Pfeil wäre unsichtbar. */
.knopf svg { width: 1.25rem; height: 1.25rem; flex: none; }
.knopf--gross svg { width: 1.5rem; height: 1.5rem; }

/* Runder Symbol-Knopf, z. B. Navigation aufklappen */
.knopf-symbol {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  padding: 0;
  background: transparent;
  border: 2px solid var(--farbe-linie);
  border-radius: var(--radius-rund);
  color: var(--farbe-marine);
  cursor: pointer;
  flex: none;
}
.knopf-symbol:hover { background: var(--farbe-marine-zart); }
.knopf-symbol svg { width: 1.5rem; height: 1.5rem; }

/* ============================================================
   Karten
   ============================================================ */

.karte {
  background: var(--farbe-weiss);
  border-radius: var(--radius-l);
  padding: var(--abstand-5);
  box-shadow: var(--schatten-karte);
  margin-bottom: var(--abstand-5);
}

@media (min-width: 40rem) {
  .karte { padding: var(--abstand-6); }
}

.karte__kopf {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--abstand-4);
  margin-bottom: var(--abstand-4);
}
.karte__kopf h2, .karte__kopf h3 { margin: 0; }

/* Liste mit Häkchen statt Punkten */
.liste-haken {
  list-style: none;
  margin: 0;
  padding: 0;
}
.liste-haken li {
  position: relative;
  padding-left: 2.25rem;
  margin-bottom: var(--abstand-3);
}
.liste-haken li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.35em;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: var(--radius-rund);
  background: var(--farbe-orange-zart)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C9691A' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E")
    center / 0.9rem no-repeat;
}

/* ============================================================
   Cover-Screen
   ============================================================ */

.cover {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  background: var(--farbe-creme);
}

/* Das Cover-Bild wird vollständig gezeigt, nie beschnitten –
   auf deinem Bild steht Text, der nicht wegfallen darf. */
.cover__bild {
  width: 100%;
  max-width: 62rem;
  height: auto;
  margin: 0 auto;
  object-fit: contain;
  background: var(--farbe-creme);
}

.cover__inhalt {
  flex: 1;
  width: 100%;
  max-width: var(--breite-inhalt);
  margin: 0 auto;
  padding: var(--abstand-6) var(--abstand-4) var(--abstand-8);
}

.cover__titel {
  font-size: clamp(2rem, 7vw, 3rem);
  margin-bottom: var(--abstand-2);
}

.cover__untertitel {
  display: inline-block;
  font-size: var(--text-l);
  font-weight: 700;
  color: var(--farbe-weiss);
  background: var(--farbe-orange);
  padding: var(--abstand-1) var(--abstand-4);
  border-radius: var(--radius-s);
  margin-bottom: var(--abstand-5);
}

.cover__eckdaten {
  display: flex;
  flex-wrap: wrap;
  gap: var(--abstand-2) var(--abstand-4);
  list-style: none;
  margin: 0 0 var(--abstand-6);
  padding: 0;
  font-size: var(--text-s);
  color: var(--farbe-text-leise);
}
.cover__eckdaten li {
  display: flex;
  align-items: center;
  gap: var(--abstand-2);
  white-space: nowrap;
}
.cover__eckdaten svg { width: 1.25rem; height: 1.25rem; flex: none; }

.cover__start {
  display: flex;
  flex-wrap: wrap;
  gap: var(--abstand-3);
  align-items: center;
  margin-top: var(--abstand-6);
}

/* ============================================================
   Kapitel-Navigation: Einträge
   ============================================================ */

.navi-eintrag {
  display: flex;
  align-items: center;
  gap: var(--abstand-3);
  width: 100%;
  padding: var(--abstand-3);
  background: transparent;
  border: 0;
  border-radius: var(--radius-m);
  font-family: inherit;
  font-size: var(--text-s);
  line-height: 1.3;
  color: var(--farbe-text);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--tempo);
}
.navi-eintrag:hover { background: var(--farbe-creme); color: var(--farbe-text); }

.navi-eintrag[aria-current="page"] {
  background: var(--farbe-marine-zart);
  font-weight: 700;
}

.navi-eintrag__marke {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--radius-rund);
  background: var(--kapitelfarbe, var(--farbe-marine));
  color: var(--farbe-weiss);
  font-weight: 700;
  font-size: var(--text-s);
}
.navi-eintrag__marke svg { width: 1.1rem; height: 1.1rem; }

/* Erledigt: Marke wird grün mit Häkchen */
.navi-eintrag[data-erledigt="true"] .navi-eintrag__marke {
  background: var(--farbe-gut);
}

.navi-eintrag__text { min-width: 0; }

.navi-eintrag__nummer {
  display: block;
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--farbe-text-leise);
}

/* ============================================================
   Kapitel-Banner und Kopf
   ============================================================ */

.kapitel-banner {
  width: 100%;
  aspect-ratio: 3 / 1;
  object-fit: cover;
  border-radius: var(--radius-l);
  background: var(--farbe-marine-zart);
  margin-bottom: var(--abstand-5);
}

.kapitel-kopf { margin-bottom: var(--abstand-6); }

.kapitel-kopf__nummer {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--farbe-weiss);
  background: var(--kapitelfarbe, var(--farbe-marine));
  padding: var(--abstand-1) var(--abstand-3);
  border-radius: var(--radius-rund);
  margin-bottom: var(--abstand-3);
}

.kapitel-kopf h1 { margin-bottom: 0; }

/* Orangefarbener Pinselstrich unter der Überschrift, wie auf dem Cover */
.kapitel-kopf h1::after {
  content: "";
  display: block;
  width: 4.5rem;
  height: 5px;
  margin-top: var(--abstand-3);
  background: var(--farbe-orange);
  border-radius: var(--radius-rund);
}

/* ============================================================
   Audio-Knopf an Textblöcken
   ============================================================ */

.audio-knopf {
  display: inline-flex;
  align-items: center;
  gap: var(--abstand-2);
  min-height: 2.75rem;
  padding: var(--abstand-2) var(--abstand-4);
  margin-top: var(--abstand-4);
  background: var(--farbe-orange-zart);
  color: var(--farbe-orange-dunkel);
  border: 2px solid transparent;
  border-radius: var(--radius-rund);
  font-family: inherit;
  font-size: var(--text-s);
  font-weight: 700;
  cursor: pointer;
  transition: background var(--tempo);
}
.audio-knopf:hover { background: #F6E0C8; }
.audio-knopf svg { width: 1.25rem; height: 1.25rem; flex: none; }

/* Während des Abspielens */
.audio-knopf[data-laeuft="true"] {
  background: var(--farbe-orange);
  color: var(--farbe-weiss);
}

/* ============================================================
   Mitlesen: Hervorhebung während die Aufnahme läuft
   ============================================================ */

.wort {
  border-radius: 4px;
  /* Die Markierung greift nach rechts über das Leerzeichen hinaus,
     damit die gelesene Spur durchgehend ist und nicht gestreift wirkt.
     Die negativen Ränder halten das Layout dabei unverändert. */
  padding: 0.12em 0.3em 0.12em 0.08em;
  margin: 0 -0.3em 0 -0.08em;
  transition: background-color 120ms linear, color 120ms linear;
}

/* Schon gesprochen – eine ruhige Spur, der man folgen kann */
.wort[data-stand="gelesen"] {
  background: rgba(232, 134, 46, 0.16);
}

/* Genau jetzt – kräftig, aber ohne den Text schlechter lesbar zu machen.
   Dunkler Text auf warmem Sand statt Weiß auf Orange: höherer Kontrast. */
.wort[data-stand="jetzt"] {
  background: #F9CE8E;
  color: var(--farbe-marine);
  font-weight: 700;
}

/* ============================================================
   Video in einem Textblock
   ============================================================ */

.video-huelle {
  margin: 0 0 var(--abstand-5);
}

.video {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-m);
  background: var(--farbe-marine);
}

.video-text {
  margin-top: var(--abstand-3);
  font-size: var(--text-s);
  color: var(--farbe-text-leise);
}

/* ============================================================
   Selbsteinschätzung (Kapitel 1) – kein H5P nötig
   ============================================================ */

.frage { margin: var(--abstand-5) 0 var(--abstand-2); }

.frage__zaehler {
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--farbe-orange-dunkel);
  margin: 0 0 var(--abstand-2);
}

.frage__text {
  font-size: var(--text-l);
  font-weight: 700;
  margin-bottom: var(--abstand-4);
}

.frage__optionen {
  display: flex;
  flex-direction: column;
  gap: var(--abstand-3);
}

.frage__zurueck { margin-top: var(--abstand-5); }

/* Die Antworten sind Knöpfe – ein Tipp genügt, dann kommt
   die nächste Frage. */
.option {
  display: flex;
  align-items: center;
  gap: var(--abstand-3);
  width: 100%;
  padding: var(--abstand-4);
  background: var(--farbe-creme);
  border: 2px solid transparent;
  border-radius: var(--radius-m);
  font-family: inherit;
  font-size: var(--text-m);
  line-height: 1.4;
  color: var(--farbe-text);
  text-align: left;
  cursor: pointer;
  transition: border-color var(--tempo), background var(--tempo);
}
.option:hover:not(:disabled) {
  border-color: var(--farbe-orange);
  background: var(--farbe-weiss);
}

/* Der leere Kreis links */
.option__kreis {
  flex: none;
  width: 1.5rem;
  height: 1.5rem;
  border: 2px solid var(--farbe-text-leise);
  border-radius: var(--radius-rund);
  background: var(--farbe-weiss);
}

/* Gewählte Antwort */
.option[data-gewaehlt="true"] {
  background: var(--farbe-marine-zart);
  border-color: var(--farbe-marine);
  font-weight: 700;
}
.option[data-gewaehlt="true"] .option__kreis {
  border-color: var(--farbe-marine);
  background: var(--farbe-marine);
}

/* Häkchen, das nach dem Antippen erscheint */
.option__haken {
  margin-left: auto;
  display: flex;
  color: var(--farbe-gut);
}
.option__haken svg { width: 1.5rem; height: 1.5rem; }

/* Während der kurzen Pause vor der nächsten Frage */
.option:disabled { cursor: default; }
.option:disabled:not([data-gewaehlt="true"]) { opacity: 0.45; }

/* ---- Ergebnis nach der letzten Frage ---- */

.quiz-ergebnis > h3 { margin-bottom: var(--abstand-2); }

.ergebnis-zeile {
  padding: var(--abstand-4) 0;
  border-top: 1px solid var(--farbe-linie);
}
.ergebnis-zeile:first-of-type { margin-top: var(--abstand-4); }

.ergebnis-frage {
  font-weight: 700;
  margin: 0 0 var(--abstand-1);
}

.ergebnis-antwort {
  font-size: var(--text-s);
  color: var(--farbe-text-leise);
  margin: 0 0 var(--abstand-3);
}

.quiz-ergebnis > .knopf { margin-top: var(--abstand-5); }

.rueckmeldung {
  display: flex;
  align-items: flex-start;
  gap: var(--abstand-3);
  margin-top: var(--abstand-3);
  padding: var(--abstand-4);
  background: var(--farbe-gut-zart);
  border-left: 5px solid var(--farbe-gut);
  border-radius: var(--radius-s);
  font-size: var(--text-s);
}
.rueckmeldung svg { width: 1.4rem; height: 1.4rem; flex: none; color: var(--farbe-gut); }

/* ============================================================
   H5P-Slot
   ============================================================ */

.h5p-slot { margin-bottom: var(--abstand-5); }

.h5p-slot__kopf {
  display: flex;
  align-items: flex-start;
  gap: var(--abstand-3);
  margin-bottom: var(--abstand-4);
}

.h5p-slot__symbol {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--radius-m);
  background: var(--kapitelfarbe, var(--farbe-marine));
  color: var(--farbe-weiss);
}
.h5p-slot__symbol svg { width: 1.5rem; height: 1.5rem; }

.h5p-slot__art {
  font-size: var(--text-xs);
  color: var(--farbe-text-leise);
  margin: 0;
}

.h5p-slot__titel { margin: 0 0 var(--abstand-1); font-size: var(--text-l); }

/* Rahmen, in den die Übung geladen wird */
.h5p-rahmen {
  width: 100%;
  min-height: 28rem;
  border: 0;
  border-radius: var(--radius-m);
  background: var(--farbe-creme);
  display: block;
}

.h5p-ziel {
  border-radius: var(--radius-m);
  overflow: hidden;
}

/* Platzhalter, solange keine Datei da ist */
.h5p-platzhalter {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--abstand-3);
  padding: var(--abstand-7) var(--abstand-5);
  background: var(--farbe-creme);
  border: 2px dashed var(--farbe-linie);
  border-radius: var(--radius-m);
}

.h5p-platzhalter__symbol {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 4rem;
  height: 4rem;
  border-radius: var(--radius-rund);
  background: var(--farbe-orange-zart);
  color: var(--farbe-orange-dunkel);
}
.h5p-platzhalter__symbol svg { width: 2rem; height: 2rem; }

.h5p-platzhalter__titel {
  font-size: var(--text-l);
  font-weight: 700;
  color: var(--farbe-marine);
  margin: 0;
}

.h5p-platzhalter__text {
  max-width: 30rem;
  color: var(--farbe-text-leise);
  font-size: var(--text-s);
  margin: 0;
}

/* Nur für dich sichtbar gedachter Hinweis, welcher Dateiname erwartet wird */
.h5p-platzhalter__pfad {
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: var(--text-xs);
  color: var(--farbe-text-leise);
  background: var(--farbe-weiss);
  padding: var(--abstand-2) var(--abstand-3);
  border-radius: var(--radius-s);
  border: 1px solid var(--farbe-linie);
  word-break: break-all;
}

/* ============================================================
   Merksatz – eine Regel zum Behalten
   ============================================================ */

.merksatz {
  background: var(--farbe-orange-zart);
  border-left: 6px solid var(--farbe-orange);
  box-shadow: none;
}

.merksatz__marke {
  display: flex;
  align-items: center;
  gap: var(--abstand-2);
  margin: 0 0 var(--abstand-4);
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--farbe-orange-dunkel);
}
.merksatz__marke svg { width: 1.4rem; height: 1.4rem; flex: none; }

.merksatz__paar + .merksatz__paar {
  margin-top: var(--abstand-4);
  padding-top: var(--abstand-4);
  border-top: 1px solid rgba(200, 150, 100, 0.35);
}

/* Die Frage darüber macht den Gegensatz sichtbar: Wohin? gegen Wo? */
.merksatz__frage {
  margin: 0 0 var(--abstand-1);
  font-size: var(--text-s);
  font-weight: 700;
  color: var(--farbe-orange-dunkel);
}

.merksatz__satz {
  margin: 0;
  font-size: var(--text-l);
  line-height: 1.5;
}

/* Der eigentliche Lernstoff: die markierte Stelle wird zum Chip.
   Weiß auf Marineblau, damit sie aus dem warmen Grund heraussticht. */
.merksatz__satz strong {
  display: inline-block;
  padding: 0.05em 0.45em;
  border-radius: var(--radius-s);
  background: var(--farbe-marine);
  color: var(--farbe-weiss);
  font-weight: 700;
}

/* Die Leitfrage ist die Überschrift der Regel. */
.merksatz__leitfrage {
  margin: 0 0 var(--abstand-2);
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--farbe-marine);
  line-height: 1.25;
}

.merksatz__einleitung {
  margin: 0 0 var(--abstand-5);
  font-size: var(--text-s);
  color: var(--farbe-text-leise);
}

/* --- Formentabelle: Wort links, Form rechts --- */

.merksatz__formen {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--abstand-3) var(--abstand-5);
  align-items: baseline;
  margin: 0;
}

.merksatz__wort {
  margin: 0;
  font-size: var(--text-s);
  color: var(--farbe-text-leise);
  white-space: nowrap;
}

.merksatz__genus {
  display: block;
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--farbe-orange-dunkel);
}

.merksatz__form {
  margin: 0;
  font-size: var(--text-l);
  line-height: 1.4;
}

/* Trennlinie zwischen den Zeilen, ohne Tabellenrahmen-Optik */
.merksatz__formen > dt:not(:first-of-type),
.merksatz__formen > dd:not(:first-of-type) {
  border-top: 1px solid rgba(200, 150, 100, 0.35);
  padding-top: var(--abstand-3);
}

/* --- Die Regel darunter --- */

.merksatz__hinweis {
  margin: var(--abstand-5) 0 0;
  padding-top: var(--abstand-4);
  border-top: 2px solid var(--farbe-orange);
  font-size: var(--text-s);
}

/* Der Lernstoff: markierte Stellen werden zum Chip.
   Im Hinweistext etwas kleiner, damit der Satz lesbar bleibt. */
.merksatz__form strong,
.merksatz__hinweis strong {
  display: inline-block;
  padding: 0.05em 0.45em;
  border-radius: var(--radius-s);
  background: var(--farbe-marine);
  color: var(--farbe-weiss);
  font-weight: 700;
}
.merksatz__hinweis strong { padding: 0.02em 0.35em; }

/* --- Weiterüben-Knopf --- */

.merksatz__weiter {
  margin-top: var(--abstand-5);
  padding-top: var(--abstand-4);
  border-top: 1px solid rgba(200, 150, 100, 0.5);
}

.merksatz__weiter-hinweis {
  margin: var(--abstand-3) 0 0;
  font-size: var(--text-xs);
  color: var(--farbe-text-leise);
}

/* --- Dialog: „Du verlässt die Demo" --- */

.aussenlink-dialog {
  max-width: min(26rem, calc(100vw - var(--abstand-6)));
  margin: auto;
  padding: var(--abstand-6);
  border: 0;
  border-radius: var(--radius-l);
  background: var(--farbe-weiss);
  box-shadow: var(--schatten-hoch);
}
.aussenlink-dialog::backdrop {
  background: rgba(30, 58, 95, 0.5);
}

.aussenlink-dialog__titel {
  margin: 0 0 var(--abstand-3);
  font-size: var(--text-l);
  color: var(--farbe-orange-dunkel);
}

.aussenlink-dialog__text {
  margin: 0;
  color: var(--farbe-text-leise);
}

.aussenlink-dialog__knoepfe {
  display: flex;
  flex-wrap: wrap;
  gap: var(--abstand-3);
  margin-top: var(--abstand-5);
}

/* Beim Mitlesen soll die Wort-Markierung den Chip nicht überdecken. */
.merksatz__satz strong .wort[data-stand="jetzt"],
.merksatz__form strong .wort[data-stand="jetzt"] {
  background: transparent;
  color: var(--farbe-weiss);
}

/* ============================================================
   Zieh-Übung (Kapitel 2)
   ============================================================ */

.uebung__ansage {
  margin-bottom: var(--abstand-4);
}

.uebung__zaehler {
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--farbe-orange-dunkel);
  margin: 0 0 var(--abstand-2);
}

.uebung__satz {
  font-size: var(--text-l);
  font-weight: 700;
  margin: 0 0 var(--abstand-3);
}

/* --- Das Bild mit den Zielflächen --- */

.uebung__feld {
  position: relative;
  width: 100%;
  border-radius: var(--radius-m);
  overflow: hidden;
  background: var(--farbe-creme);
  touch-action: none;   /* sonst scrollt das Handy statt zu ziehen */
}

.uebung__hintergrund {
  width: 100%;
  height: auto;
  display: block;
}

.uebung__flaechen,
.uebung__abgelegt {
  position: absolute;
  inset: 0;
}

.uebung__abgelegt { pointer-events: none; }

/* Zielflächen sind normal unsichtbar und erscheinen beim Ziehen */
.uebung__zone {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: rgba(255, 255, 255, 0.55);
  border: 3px dashed var(--farbe-marine);
  border-radius: var(--radius-m);
  opacity: 0;
  transition: opacity var(--tempo), background var(--tempo);
  pointer-events: none;
  cursor: pointer;
}

.uebung__feld.zeigt-zonen .uebung__zone {
  opacity: 1;
  pointer-events: auto;
}

.uebung__zone:hover,
.uebung__zone:focus-visible {
  background: var(--farbe-orange-zart);
  border-color: var(--farbe-orange-dunkel);
}

/* Der Name der Stelle steht normalerweise NICHT im Bild: Sonst sucht
   man beim Ziehen nur das Schild, das wie der Satz klingt, statt zu
   verstehen, wo der Tisch steht.

   Sichtbar wird er nur bei Tastaturbedienung, wenn die Fläche den
   Fokus hat – dort ist er unverzichtbar. Screenreader bekommen ihn
   ohnehin über das aria-label des Knopfes. */
.uebung__zone-name {
  font-family: var(--schrift);
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--farbe-marine);
  background: var(--farbe-weiss);
  padding: 0.15rem 0.5rem;
  border-radius: var(--radius-rund);
  visibility: hidden;
}

.uebung__zone:focus-visible .uebung__zone-name { visibility: visible; }

/* Abgelegte Gegenstände: Was steht, setzt mit dem Fuß auf der
   Unterkante seiner Fläche auf – sonst steckt die untere Hälfte
   in der Tischplatte oder im Boden. */
.uebung__gelegt-huelle {
  position: absolute;
  transform: translate(-50%, -100%);
  transform-origin: 50% 100%;
  animation: einrasten-unten 320ms ease both;
}

/* Was hängt (das Bild an der Wand), sitzt mittig. */
.uebung__gelegt-huelle[data-ablage="mitte"] {
  transform: translate(-50%, -50%);
  transform-origin: 50% 50%;
  animation: einrasten-mitte 320ms ease both;
}

.uebung__gelegt {
  width: 100%;
  height: auto;
  display: block;
}

@keyframes einrasten-unten {
  from { transform: translate(-50%, -100%) scale(1.22); opacity: 0; }
  to   { transform: translate(-50%, -100%) scale(1);    opacity: 1; }
}

@keyframes einrasten-mitte {
  from { transform: translate(-50%, -50%) scale(1.22); opacity: 0; }
  to   { transform: translate(-50%, -50%) scale(1);    opacity: 1; }
}

/* --- Vorrat der Gegenstände --- */

/* Ohne diese Zeile würde display:flex das hidden-Attribut aushebeln. */
.uebung__vorrat[hidden] { display: none; }

/* Gleichmäßig auf zwei Zeilen: Die Spaltenzahl setzt dragdrop.js
   auf die Hälfte der Gegenstände – bei sechs Stück also 3 + 3.
   Ein Raster statt Umbruch, damit die letzte Zeile nicht verwaist. */
.uebung__vorrat {
  display: grid;
  grid-template-columns: repeat(var(--spalten, 3), minmax(0, 1fr));
  gap: var(--abstand-3);
  justify-items: center;
  margin-top: var(--abstand-4);
  padding: var(--abstand-4);
  background: var(--farbe-creme);
  border-radius: var(--radius-m);
}

.uebung__objekt {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--abstand-2);
  width: 100%;
  max-width: 8rem;
  min-height: 6.5rem;
  padding: var(--abstand-2);
  background: var(--farbe-weiss);
  border: 2px solid var(--farbe-linie);
  border-radius: var(--radius-m);
  font-family: inherit;
  font-size: var(--text-xs);
  color: var(--farbe-text);
  cursor: grab;
  touch-action: none;
  transition: border-color var(--tempo), box-shadow var(--tempo);
}
.uebung__objekt:hover:not(:disabled) {
  border-color: var(--farbe-orange);
  box-shadow: var(--schatten-karte);
}
.uebung__objekt[aria-pressed="true"] {
  border-color: var(--farbe-marine);
  background: var(--farbe-marine-zart);
}

.uebung__objekt-bild {
  max-width: 100%;
  max-height: 5rem;
  width: auto;
  pointer-events: none;   /* der Knopf fängt die Geste, nicht das Bild */
}

.uebung__objekt-text {
  font-size: var(--text-xs);
  line-height: 1.2;
  text-align: center;
}

/* Während des Ziehens hängt der Gegenstand am Zeiger */
.uebung__objekt.zieht {
  position: fixed;
  max-width: none;
  z-index: 50;
  cursor: grabbing;
  border-color: var(--farbe-orange);
  box-shadow: var(--schatten-hoch);
  transform: scale(1.06);
}

.uebung__objekt.erledigt {
  opacity: 0.35;
  cursor: default;
  border-style: dashed;
}

/* --- Rückmeldungen --- */

.uebung__rueckmeldung { margin-top: var(--abstand-4); }

.uebung__meldung {
  display: flex;
  align-items: flex-start;
  gap: var(--abstand-3);
  padding: var(--abstand-4);
  border-radius: var(--radius-m);
  border-left: 5px solid;
  margin: 0 0 var(--abstand-3);
}
.uebung__meldung svg { width: 1.4rem; height: 1.4rem; flex: none; }

.uebung__meldung--lob {
  background: var(--farbe-gut-zart);
  border-color: var(--farbe-gut);
}
.uebung__meldung--lob svg { color: var(--farbe-gut); }

.uebung__meldung--hinweis {
  background: var(--farbe-orange-zart);
  border-color: var(--farbe-orange);
}
.uebung__meldung--hinweis svg { color: var(--farbe-orange-dunkel); }

.uebung__meldung--neutral {
  background: var(--farbe-marine-zart);
  border-color: var(--farbe-marine);
}
.uebung__meldung--neutral svg { color: var(--farbe-marine); }

.uebung__tastaturhinweis {
  margin-top: var(--abstand-3);
  font-size: var(--text-xs);
  color: var(--farbe-text-leise);
}

/* ============================================================
   Story-Überleitung zwischen den Kapiteln
   ============================================================ */

.story {
  max-width: 34rem;
  margin: var(--abstand-6) auto;
  text-align: center;
  background: var(--farbe-weiss);
  border-radius: var(--radius-l);
  padding: var(--abstand-6) var(--abstand-5) var(--abstand-7);
  box-shadow: var(--schatten-hoch);
}

.story__bild {
  width: 9rem;
  height: 9rem;
  margin: 0 auto var(--abstand-5);
  border-radius: var(--radius-rund);
  object-fit: cover;
  background: var(--farbe-marine-zart);
  border: 5px solid var(--farbe-orange-zart);
}

.story__marke {
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--farbe-orange-dunkel);
  margin-bottom: var(--abstand-3);
}

.story__text {
  font-size: var(--text-l);
  margin-bottom: var(--abstand-6);
  text-wrap: pretty;
}

/* ============================================================
   Schrittweise lesen: der Weiter-Knopf zwischen den Abschnitten
   ============================================================ */

.weiter-huelle {
  display: flex;
  justify-content: center;
  margin: var(--abstand-6) 0 var(--abstand-5);
}

/* Neu freigeschalteter Abschnitt blendet sanft ein.
   Bei „weniger Bewegung" im Betriebssystem entfällt das automatisch. */
.block-neu { animation: einblenden 340ms ease both; }

@keyframes einblenden {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

/* Beim Hinspringen nicht unter der Kopfzeile verschwinden */
.karte,
.kapitel-fuss {
  scroll-margin-top: calc(var(--hoehe-kopf) + var(--abstand-4));
}

/* ============================================================
   Kapitel-Fuß: Zurück / Weiter / Erledigt-Haken
   ============================================================ */

.kapitel-fuss {
  margin-top: var(--abstand-7);
  padding-top: var(--abstand-5);
  border-top: 1px solid var(--farbe-linie);
}

.erledigt-haken {
  display: flex;
  align-items: center;
  gap: var(--abstand-3);
  padding: var(--abstand-4);
  margin-bottom: var(--abstand-5);
  background: var(--farbe-weiss);
  border: 2px solid var(--farbe-linie);
  border-radius: var(--radius-m);
  cursor: pointer;
  font-weight: 700;
  transition: border-color var(--tempo), background var(--tempo);
}
.erledigt-haken:hover { border-color: var(--farbe-gut); }
.erledigt-haken input {
  width: 1.6rem; height: 1.6rem; margin: 0;
  accent-color: var(--farbe-gut);
  cursor: pointer;
  flex: none;
}
.erledigt-haken:has(input:checked),
.erledigt-haken[data-an="true"] {
  background: var(--farbe-gut-zart);
  border-color: var(--farbe-gut);
}

.blaettern {
  display: flex;
  flex-wrap: wrap;
  gap: var(--abstand-3);
  justify-content: space-between;
}

/* ============================================================
   Abschluss: „Das hast du geschafft"
   ============================================================ */

.bilanz-liste {
  list-style: none;
  margin: 0;
  padding: 0;
}

.bilanz-liste li {
  display: flex;
  align-items: center;
  gap: var(--abstand-3);
  padding: var(--abstand-3) 0;
  border-bottom: 1px solid var(--farbe-linie);
}
.bilanz-liste li:last-child { border-bottom: 0; }

.bilanz-marke {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: var(--radius-rund);
  background: var(--farbe-linie);
  color: var(--farbe-weiss);
}
.bilanz-marke svg { width: 1rem; height: 1rem; }
.bilanz-liste li[data-erledigt="true"] .bilanz-marke { background: var(--farbe-gut); }

.bilanz-liste li[data-erledigt="false"] .bilanz-titel { color: var(--farbe-text-leise); }

.bilanz-zaehler {
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--farbe-marine);
  margin-bottom: var(--abstand-4);
}

/* Ressourcenliste */
.ressourcen { list-style: none; margin: 0; padding: 0; }
.ressourcen li { margin-bottom: var(--abstand-4); }
.ressourcen a { font-weight: 700; }
.ressourcen p { margin: var(--abstand-1) 0 0; font-size: var(--text-s); color: var(--farbe-text-leise); }

/* ============================================================
   Einstellungen
   ============================================================ */

.hinweis-box {
  display: flex;
  gap: var(--abstand-3);
  padding: var(--abstand-4);
  background: var(--farbe-orange-zart);
  border-radius: var(--radius-m);
  font-size: var(--text-s);
  margin-bottom: var(--abstand-5);
}
.hinweis-box svg { width: 1.4rem; height: 1.4rem; flex: none; color: var(--farbe-orange-dunkel); }

/* Kurze Einblendung nach einer Aktion */
.meldung {
  position: fixed;
  left: 50%;
  bottom: var(--abstand-5);
  transform: translateX(-50%) translateY(1rem);
  z-index: 60;
  padding: var(--abstand-3) var(--abstand-5);
  background: var(--farbe-marine);
  color: var(--farbe-weiss);
  border-radius: var(--radius-rund);
  font-size: var(--text-s);
  font-weight: 700;
  box-shadow: var(--schatten-hoch);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--tempo), transform var(--tempo);
}
.meldung[data-sichtbar="true"] {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ============================================================
   Nachschlagen: Leiste rechts + Tafel
   ============================================================ */

.hilfe-leiste {
  position: fixed;
  right: var(--abstand-3);
  top: 50%;
  transform: translateY(-50%);
  z-index: 45;
  display: flex;
  flex-direction: column;
  gap: var(--abstand-3);
}
.hilfe-leiste[hidden] { display: none; }

.hilfe-knopf {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  width: 4.25rem;
  min-height: 4.25rem;
  padding: var(--abstand-2);
  background: var(--farbe-weiss);
  border: 2px solid var(--farbe-linie);
  border-radius: var(--radius-m);
  box-shadow: var(--schatten-karte);
  font-family: inherit;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.15;
  color: var(--farbe-marine);
  cursor: pointer;
  transition: border-color var(--tempo), background var(--tempo);
}
.hilfe-knopf:hover { border-color: var(--farbe-orange); background: var(--farbe-orange-zart); }
.hilfe-knopf svg { width: 1.5rem; height: 1.5rem; }

.hilfe-knopf[aria-expanded="true"] {
  background: var(--farbe-marine);
  border-color: var(--farbe-marine);
  color: var(--farbe-weiss);
}

/* --- Die Tafel selbst --- */

.hilfe-huelle {
  position: fixed;
  inset: 0;
  z-index: 60;
  visibility: hidden;
}
.hilfe-huelle[data-offen="true"] { visibility: visible; }

.hilfe-schleier {
  position: absolute;
  inset: 0;
  width: 100%;
  padding: 0;
  border: 0;
  background: rgba(30, 58, 95, 0.4);
  opacity: 0;
  transition: opacity var(--tempo);
  cursor: pointer;
}
.hilfe-huelle[data-offen="true"] .hilfe-schleier { opacity: 1; }

.hilfe-tafel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(30rem, 100%);
  padding: var(--abstand-5);
  background: var(--farbe-weiss);
  box-shadow: var(--schatten-hoch);
  overflow-y: auto;
  overscroll-behavior: contain;
  transform: translateX(100%);
  transition: transform var(--tempo);
}
.hilfe-huelle[data-offen="true"] .hilfe-tafel { transform: translateX(0); }

.hilfe-tafel__kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--abstand-4);
  margin-bottom: var(--abstand-5);
}

.hilfe-tafel__titel { margin: 0; font-size: var(--text-xl); }

.hilfe-thema {
  font-size: var(--text-l);
  font-weight: 700;
  color: var(--farbe-orange-dunkel);
  margin: 0 0 var(--abstand-3);
}

.hilfe-inhalt h3 {
  font-size: var(--text-l);
  margin: var(--abstand-6) 0 var(--abstand-3);
}

/* --- Vokabeln --- */

.vokabel-umschalter {
  display: flex;
  gap: var(--abstand-2);
  margin-bottom: var(--abstand-5);
  padding: var(--abstand-1);
  background: var(--farbe-creme);
  border-radius: var(--radius-rund);
}

.vokabel-umschalter__knopf {
  flex: 1;
  min-height: 2.75rem;
  padding: var(--abstand-2) var(--abstand-4);
  background: transparent;
  border: 0;
  border-radius: var(--radius-rund);
  font-family: inherit;
  font-size: var(--text-s);
  font-weight: 700;
  color: var(--farbe-text-leise);
  cursor: pointer;
}
.vokabel-umschalter__knopf[aria-pressed="true"] {
  background: var(--farbe-weiss);
  color: var(--farbe-marine);
  box-shadow: var(--schatten-karte);
}

.vokabel-liste { list-style: none; margin: 0; padding: 0; }

.vokabel {
  padding: var(--abstand-4) 0;
  border-bottom: 1px solid var(--farbe-linie);
}
.vokabel:last-child { border-bottom: 0; }

.vokabel__wort {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--abstand-3);
  margin: 0 0 var(--abstand-2);
  font-size: var(--text-l);
  font-weight: 700;
  color: var(--farbe-marine);
}

.vokabel__plural {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--farbe-text-leise);
}

.vokabel__bedeutung { margin: 0; font-size: var(--text-s); }

.vokabel__beispiel {
  margin: var(--abstand-2) 0 0;
  padding-left: var(--abstand-4);
  border-left: 3px solid var(--farbe-orange);
  font-size: var(--text-s);
  color: var(--farbe-text-leise);
}

/* --- Sprachwahl --- */

.sprachwahl {
  display: flex;
  align-items: center;
  gap: var(--abstand-3);
  margin-bottom: var(--abstand-5);
  font-size: var(--text-s);
}
.sprachwahl label { font-weight: 700; color: var(--farbe-text-leise); }

.sprachwahl__feld {
  flex: 1;
  min-height: 2.75rem;
  padding: var(--abstand-2) var(--abstand-3);
  font-family: inherit;
  font-size: var(--text-s);
  color: var(--farbe-marine);
  background: var(--farbe-weiss);
  border: 2px solid var(--farbe-linie);
  border-radius: var(--radius-s);
}

.vokabel__uebersetzung {
  margin: 0 0 var(--abstand-1);
  font-size: var(--text-s);
  font-style: italic;
  color: var(--farbe-orange-dunkel);
}

/* --- Flashcards --- */

.flashcard__zaehler {
  display: flex;
  justify-content: space-between;
  gap: var(--abstand-3);
  margin: 0 0 var(--abstand-3);
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--farbe-text-leise);
}
.flashcard__gewusst { color: var(--farbe-gut); }

/* Der Kartenknopf ist die Bühne, .flashcard__innen dreht sich darin. */
.flashcard {
  display: block;
  width: 100%;
  min-height: 15rem;
  padding: 0;
  background: transparent;
  border: 0;
  perspective: 1200px;
  cursor: pointer;
  font-family: inherit;
  color: inherit;
}

.flashcard__innen {
  position: relative;
  width: 100%;
  min-height: 15rem;
  transform-style: preserve-3d;
  transition: transform 480ms cubic-bezier(0.4, 0.1, 0.2, 1);
}
.flashcard.gedreht .flashcard__innen { transform: rotateY(180deg); }

.flashcard__seite {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--abstand-2);
  padding: var(--abstand-5);
  border-radius: var(--radius-l);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  text-align: center;
}

.flashcard__vorn {
  background: var(--farbe-marine);
  color: var(--farbe-weiss);
}

.flashcard__hinten {
  background: var(--farbe-orange-zart);
  border: 2px solid var(--farbe-orange);
  color: var(--farbe-text);
  transform: rotateY(180deg);
  justify-content: center;
  text-align: left;
  align-items: stretch;
  overflow-y: auto;
}

.flashcard__wort {
  margin: 0;
  font-size: var(--text-xxl);
  font-weight: 700;
  line-height: 1.15;
}

.flashcard__plural {
  margin: 0;
  font-size: var(--text-s);
  opacity: 0.75;
}

.flashcard__tipp {
  margin: var(--abstand-4) 0 0;
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  opacity: 0.7;
}

.flashcard__uebersetzung {
  margin: 0 0 var(--abstand-3);
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--farbe-orange-dunkel);
}

.flashcard__bedeutung { margin: 0; font-size: var(--text-s); }

.flashcard__antwort {
  display: flex;
  gap: var(--abstand-3);
  margin-top: var(--abstand-4);
}
.flashcard__antwort[hidden] { display: none; }
.flashcard__antwort .knopf { flex: 1; }

.flashcard-fertig {
  padding: var(--abstand-6) var(--abstand-5);
  background: var(--farbe-gut-zart);
  border-radius: var(--radius-l);
  text-align: center;
}
.flashcard-fertig svg { width: 2.5rem; height: 2.5rem; color: var(--farbe-gut); }

.flashcard-fertig__titel {
  margin: var(--abstand-3) 0 var(--abstand-2);
  font-size: var(--text-l);
  font-weight: 700;
  color: var(--farbe-marine);
}
.flashcard-fertig .knopf { margin-top: var(--abstand-4); }

/* Auf schmalen Bildschirmen kleiner, damit nichts verdeckt wird */
@media (max-width: 64rem) {
  .hilfe-knopf {
    width: 3.25rem;
    min-height: 3.25rem;
    font-size: 0.625rem;
  }
  .hilfe-knopf svg { width: 1.25rem; height: 1.25rem; }
  .haupt { padding-right: 4.5rem; }
}

/* ============================================================
   Reihenfolge-Übung (Kapitel 3)

   Ein Raster statt einer Liste: Sechs gestapelte Karten wären
   eine lange Bahn zum Scrollen. Nebeneinander sieht man die
   ganze Reihenfolge auf einen Blick – und genau darum geht es.
   ============================================================ */

.reihenfolge {
  list-style: none;
  margin: 0 0 var(--abstand-5);
  padding: 0;
  display: grid;
  /* Zwei Spalten auf dem Handy, drei ab Tablet: Bei sechs Schritten
     gibt das gleichmäßige Reihen (3 + 3) statt eines Rests. */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--abstand-3);
}

@media (min-width: 34rem) {
  .reihenfolge { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.reihenfolge__karte {
  display: flex;
  flex-direction: column;
  gap: var(--abstand-2);
  padding: var(--abstand-2);
  background: var(--farbe-weiss);
  border: 2px solid var(--farbe-linie);
  border-radius: var(--radius-m);
  cursor: grab;
  touch-action: none;
  transition: border-color var(--tempo), background var(--tempo),
              box-shadow var(--tempo), transform var(--tempo);
}
.reihenfolge__karte:hover { border-color: var(--farbe-orange); }

.reihenfolge__karte.zieht {
  cursor: grabbing;
  border-color: var(--farbe-orange);
  box-shadow: var(--schatten-hoch);
  transform: scale(1.06) rotate(-1.5deg);
  z-index: 2;
}

/* Während gezogen wird, rücken die anderen Karten sanft zur Seite. */
.reihenfolge.sortiert-gerade .reihenfolge__karte:not(.zieht) {
  transition: transform 160ms ease;
}
.reihenfolge.sortiert-gerade .reihenfolge__karte:not(.zieht):not([data-fest="true"]) {
  border-style: dashed;
}

/* Richtig einsortiert: rastet ein und bleibt stehen */
.reihenfolge__karte[data-fest="true"] {
  background: var(--farbe-gut-zart);
  border-color: var(--farbe-gut);
  cursor: default;
}
.reihenfolge__karte[data-fest="true"]:hover { border-color: var(--farbe-gut); }

/* Die Nummer sitzt in der Ecke auf dem Bild – das spart eine Spalte. */
.reihenfolge__bildhuelle {
  position: relative;
  border-radius: var(--radius-s);
  overflow: hidden;
  background: var(--farbe-creme);
}

.reihenfolge__bild {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  display: block;
  pointer-events: none;
}

.reihenfolge__nummer {
  position: absolute;
  top: var(--abstand-2);
  left: var(--abstand-2);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: var(--radius-rund);
  background: var(--farbe-marine);
  color: var(--farbe-weiss);
  font-weight: 700;
  font-size: var(--text-s);
  box-shadow: 0 2px 6px rgba(30, 58, 95, 0.35);
}
.reihenfolge__karte[data-fest="true"] .reihenfolge__nummer {
  background: var(--farbe-gut);
}
.reihenfolge__nummer svg { width: 1.15rem; height: 1.15rem; }

.reihenfolge__text {
  flex: 1;
  margin: 0;
  font-size: var(--text-xs);
  font-weight: 700;
  line-height: 1.3;
  hyphens: auto;
}

.reihenfolge__pfeile {
  display: flex;
  gap: var(--abstand-2);
}

.reihenfolge__pfeil {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 2.25rem;
  padding: 0;
  background: var(--farbe-creme);
  border: 2px solid var(--farbe-linie);
  border-radius: var(--radius-s);
  color: var(--farbe-marine);
  cursor: pointer;
}
.reihenfolge__pfeil:hover:not(:disabled) {
  background: var(--farbe-marine-zart);
  border-color: var(--farbe-marine);
}
.reihenfolge__pfeil:disabled { opacity: 0.25; cursor: default; }
.reihenfolge__pfeil svg { width: 1.15rem; height: 1.15rem; }

.reihenfolge__fuss {
  display: flex;
  justify-content: center;
  margin-bottom: var(--abstand-4);
}

/* --- Erklärungen am Ende --- */

.reihenfolge__erklaerungen {
  margin: var(--abstand-5) 0 0;
  padding-left: var(--abstand-6);
}
.reihenfolge__erklaerungen li { margin-bottom: var(--abstand-4); }
.reihenfolge__erklaerungen p { font-size: var(--text-s); }

.reihenfolge__erklaerung-titel {
  margin: 0 0 var(--abstand-1);
  font-weight: 700;
  font-size: var(--text-m);
  color: var(--farbe-marine);
}


/* ============================================================
   Gespräch mit Entscheidungen (Kapitel 3, Teil B)
   ============================================================ */

.gespraech__start,
.gespraech__weiter {
  display: flex;
  justify-content: center;
  margin-top: var(--abstand-5);
}

.gespraech__knoten:focus { outline: none; }

/* Handy: Bild oben, flach zugeschnitten. Ein quadratisches Bild
   über die volle Breite wäre so hoch wie der ganze Rest zusammen. */
.gespraech__knoten {
  display: flex;
  flex-direction: column;
  gap: var(--abstand-4);
}

.gespraech__bild {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  /* Die Gesichter sitzen im oberen Drittel – dort wird nicht beschnitten. */
  object-position: center 35%;
  border-radius: var(--radius-m);
  display: block;
}

.gespraech__text { min-width: 0; }

/* Ab Tablet nebeneinander: Bild links, Gespräch rechts.
   So passt ein Knoten auf einen Bildschirm. */
@media (min-width: 38rem) {
  .gespraech__knoten {
    flex-direction: row;
    align-items: flex-start;
    gap: var(--abstand-5);
  }

  .gespraech__medien { flex: 0 0 14rem; }

  .gespraech__bild { aspect-ratio: 4 / 3; }

  .gespraech__text { flex: 1; }

  /* In der schmalen Spalte dürfen die Blasen fast voll ausnutzen. */
  .sprechblase { max-width: 100%; }
}

/* Der Erzähltext steht außerhalb des Gesprächs */
.gespraech__erzaehler {
  margin: 0 0 var(--abstand-4);
  font-style: italic;
  color: var(--farbe-text-leise);
  text-align: center;
}

/* --- Sprechblasen --- */

.sprechblase {
  max-width: 85%;
  margin-bottom: var(--abstand-4);
  padding: var(--abstand-4);
  border-radius: var(--radius-l);
}

/* Die Sachbearbeiterin links, Amir rechts – wie in einem Chat.
   So sieht man auf einen Blick, wer gerade spricht. */
.sprechblase[data-wer="berger"] {
  background: var(--farbe-creme);
  border-bottom-left-radius: var(--radius-s);
  margin-right: auto;
}

.sprechblase[data-wer="amir"] {
  background: var(--farbe-marine-zart);
  border-bottom-right-radius: var(--radius-s);
  margin-left: auto;
}

.sprechblase__name {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--abstand-2);
  margin: 0 0 var(--abstand-1);
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--farbe-marine);
}

/* „spricht schnell", „sucht" – die Regieanweisung */
.sprechblase__ton {
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  font-style: italic;
  color: var(--farbe-orange-dunkel);
}

.sprechblase__text {
  margin: 0;
  font-size: var(--text-m);
  line-height: 1.5;
}
.sprechblase__text strong {
  background: var(--farbe-orange-zart);
  padding: 0.05em 0.3em;
  border-radius: var(--radius-s);
}

/* --- Die Entscheidung --- */

.gespraech__frage { margin-top: var(--abstand-5); }

.gespraech__antworten {
  display: flex;
  flex-direction: column;
  gap: var(--abstand-3);
}

/* --- Abschluss --- */

.gespraech__ende { margin-top: var(--abstand-5); }

.strategien {
  margin-top: var(--abstand-5);
  padding: var(--abstand-5);
  border-radius: var(--radius-l);
}

.strategien__liste {
  list-style: none;
  margin: 0;
  padding: 0;
}
.strategien__liste li {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--abstand-3);
  margin-bottom: var(--abstand-3);
  padding: var(--abstand-3) var(--abstand-4);
  background: var(--farbe-weiss);
  border-left: 4px solid var(--farbe-orange);
  border-radius: var(--radius-s);
  font-size: var(--text-m);
  font-weight: 700;
  color: var(--farbe-marine);
}

.strategien__text { min-width: 0; }

/* Der Anhören-Knopf am einzelnen Satz ist nur ein Symbol –
   die Beschriftung bleibt für Screenreader erhalten. */
.strategien__liste .audio-knopf {
  flex: none;
  width: 2.75rem;
  height: 2.75rem;
  min-height: 0;
  padding: 0;
  margin: 0;
  justify-content: center;
  border-radius: var(--radius-rund);
}
.strategien__liste .audio-knopf > span {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.strategien__liste li:last-child { margin-bottom: 0; }

.gespraech__nochmal {
  margin: var(--abstand-5) 0 var(--abstand-4);
  font-size: var(--text-s);
  color: var(--farbe-text-leise);
}

/* Verweis vom Gesprächsende auf die Redemittel darunter */
.gespraech__verweis {
  display: flex;
  align-items: flex-start;
  gap: var(--abstand-3);
  margin: var(--abstand-4) 0 0;
  padding: var(--abstand-4);
  background: var(--farbe-orange-zart);
  border-radius: var(--radius-m);
  font-size: var(--text-s);
}
.gespraech__verweis svg {
  width: 1.4rem; height: 1.4rem; flex: none;
  color: var(--farbe-orange-dunkel);
}

/* Die Satzliste steht auch als eigener Merksatz-Block im Kapitel */
.merksatz .strategien__liste { margin-top: var(--abstand-4); }

/* ============================================================
   Demo: gesperrte Kapitel und das Ende
   ============================================================ */

/* Gesperrter Eintrag in der Kapitelliste */
.navi-eintrag[data-gesperrt="true"] { opacity: 0.55; }
.navi-eintrag[data-gesperrt="true"] .navi-eintrag__marke {
  background: var(--farbe-linie);
  color: var(--farbe-text-leise);
}
.navi-eintrag[data-gesperrt="true"]:hover { opacity: 0.85; }

/* Hinweis auf dem Cover */
.cover__demo {
  display: flex;
  align-items: flex-start;
  gap: var(--abstand-3);
  margin: 0 0 var(--abstand-5);
  padding: var(--abstand-4);
  background: var(--farbe-orange-zart);
  border-radius: var(--radius-m);
  font-size: var(--text-s);
}
.cover__demo svg {
  width: 1.4rem; height: 1.4rem; flex: none;
  color: var(--farbe-orange-dunkel);
}

/* Der Abschlussbildschirm */
.demo-ende { text-align: center; }

.demo-ende__symbol {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 4rem;
  height: 4rem;
  margin-bottom: var(--abstand-4);
  border-radius: var(--radius-rund);
  background: var(--farbe-orange-zart);
  color: var(--farbe-orange-dunkel);
}
.demo-ende__symbol svg { width: 2rem; height: 2rem; }

.demo-ende__text {
  max-width: 32rem;
  margin: 0 auto var(--abstand-5);
  font-size: var(--text-l);
}

.demo-ende__stand {
  display: inline-flex;
  align-items: center;
  gap: var(--abstand-2);
  margin: 0;
  padding: var(--abstand-2) var(--abstand-4);
  background: var(--farbe-gut-zart);
  border-radius: var(--radius-rund);
  font-weight: 700;
  color: var(--farbe-marine);
}
.demo-ende__stand svg { width: 1.25rem; height: 1.25rem; color: var(--farbe-gut); }

/* Ausblick auf die kommenden Kapitel */
.demo-ende__liste { list-style: none; margin: 0; padding: 0; }

.demo-ende__liste li {
  display: flex;
  align-items: center;
  gap: var(--abstand-4);
  padding: var(--abstand-4) 0;
  border-bottom: 1px solid var(--farbe-linie);
}
.demo-ende__liste li:last-child { border-bottom: 0; }

.demo-ende__marke {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--radius-rund);
  background: var(--kapitelfarbe, var(--farbe-marine));
  color: var(--farbe-weiss);
  opacity: 0.5;
}
.demo-ende__marke svg { width: 1.2rem; height: 1.2rem; }

.demo-ende__nummer {
  display: block;
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--farbe-text-leise);
}
.demo-ende__titel { display: block; font-weight: 700; }
.demo-ende__hinweis {
  display: block;
  font-size: var(--text-s);
  color: var(--farbe-text-leise);
}

/* Anhören-Knopf auf einer Reihenfolge-Karte: sitzt in der freien
   Ecke gegenüber der Nummer und kostet keine zusätzliche Höhe. */
.reihenfolge__bildhuelle .audio-knopf {
  position: absolute;
  top: var(--abstand-2);
  right: var(--abstand-2);
  width: 2.25rem;
  height: 2.25rem;
  min-height: 0;
  padding: 0;
  margin: 0;
  justify-content: center;
  border-radius: var(--radius-rund);
  background: var(--farbe-weiss);
  color: var(--farbe-orange-dunkel);
  box-shadow: 0 2px 6px rgba(30, 58, 95, 0.3);
}
.reihenfolge__bildhuelle .audio-knopf > span {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.reihenfolge__bildhuelle .audio-knopf svg { width: 1.1rem; height: 1.1rem; }

/* Anhören-Knopf unter der Vokabelkarte */
.flashcard__ton {
  display: flex;
  justify-content: center;
  margin-top: var(--abstand-4);
}

/* Bild auf der Vorderseite einer Vokabelkarte */
/* Vollständig zeigen, nicht zuschneiden: Die Vokabelbilder sind
   teils freigestellte Objekte, teils Fotos im Hochformat. Ein
   fester Ausschnitt würde mal den Rand, mal die Hälfte abschneiden.
   Der dunkle Kartengrund trägt beides – auch ein weißes Fenster. */
.flashcard__bild {
  width: 100%;
  max-width: 14rem;
  height: 9rem;
  object-fit: contain;
  margin-bottom: var(--abstand-3);
}

/* Mit Bild braucht die Karte mehr Luft */
.flashcard:has(.flashcard__bild),
.flashcard:has(.flashcard__bild) .flashcard__innen { min-height: 22rem; }

.flashcard__vorn:has(.flashcard__bild) .flashcard__wort { font-size: var(--text-xl); }