:root {
  --bg: #000000;
  --surface: #1c1c1e;
  --text: #f2f2f2;
  --text-secondary: #8e8e93;
  --divider: #000000;
  --accent: #ffffff;
  --accent-rgb: 255, 255, 255;
  --corner-radius: 14px; /* Build 05: wird von der JS-Theme-Engine überschrieben */
  --font-ui: inherit;
  --font-question: inherit;
  --font-answer: inherit;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-ui), -apple-system, "Helvetica Neue", Arial, sans-serif;
  -webkit-tap-highlight-color: transparent;
}

body {
  display: flex;
  flex-direction: column;
}

#app {
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* -- Reine Textnavigation (Sprachen/Ordner) -- */
.nav-header {
  padding: 18vh 8vw 6vh 8vw;
  text-align: center;
}

.nav-header h1 {
  font-size: clamp(1.6rem, 4vw, 2.4rem);
  font-weight: 400;
  margin: 0;
}

.nav-list {
  display: flex;
  flex-direction: column;
}

.nav-item {
  padding: 2.2rem 8vw;
  font-size: clamp(1.2rem, 3vw, 1.6rem);
  text-align: center;
  cursor: pointer;
  user-select: none;
}

.nav-item:active {
  opacity: 0.55;
}

.nav-item.deck::after {
  content: "";
}

/* Graue Fläche + Trennlinien nur im Admin-/Editing-Kontext (Bibliothek
   verwalten, Papierkorb, Karten-Editor) - signalisiert "das ist eine
   Bearbeitungsebene". Im normalen Lern-/Navigationsmodus ist es reiner
   Text zum Antippen, ohne sichtbaren Container. */
.admin-list .nav-item {
  background: var(--surface);
  border-bottom: 1px solid var(--divider);
}

/* -- Setup / Login (schlichte Formulare, keine Buttons außer Submit) -- */
.form-screen {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 6vh 8vw;
  gap: 1.4rem;
  text-align: center;
}

.form-screen h1 {
  font-weight: 400;
  font-size: 1.6rem;
  margin-bottom: 1rem;
}

.form-screen input {
  width: min(320px, 80vw);
  padding: 0.9rem 1rem;
  background: var(--surface);
  border: none;
  border-radius: var(--corner-radius, 10px);
  color: var(--text);
  font-size: 1rem;
  text-align: center;
}

.form-screen input::placeholder {
  color: var(--text-secondary);
}

.form-screen button {
  width: min(320px, 80vw);
  padding: 0.9rem 1rem;
  background: var(--accent);
  color: #000;
  border: none;
  border-radius: var(--corner-radius, 10px);
  font-size: 1rem;
  cursor: pointer;
}

.form-screen .error {
  color: #ff6b6b;
  font-size: 0.9rem;
  min-height: 1.2rem;
}

.back-link {
  padding: 1.4rem;
  text-align: center;
  color: var(--text-secondary);
  font-size: 0.95rem;
  cursor: pointer;
}

/* Admin-Zugangspunkt: ca. 50% größer als der normale back-link-Text,
   damit er überhaupt zuverlässig zu treffen/zu sehen ist - bleibt aber
   bewusst dezent (kein voller Kontrast). */
.settings-dot {
  font-size: 1.4rem;
  opacity: 0.35;
  line-height: 1;
}
/* Mit dem Controller angewählt (Build 41): volle Deckkraft, sonst würde auch die dezente Markierung mit abgeblendet */
.settings-dot.nav-focus { opacity: 1; }

/* -- Multiple-Choice-Lernmodus (Build 03/04, Pflichtenheft 10/13/17) -- */

/* Kartenindex: bewusst dezent, oberhalb des Settings-Buttons am unteren
   Bildschirmrand (der hat als einziger der beiden eine klickbare Funktion,
   daher sitzt er ganz unten) - lenkt nicht ab, ist aber bei Bedarf ablesbar
   (Pflichtenheft 13.2 "keine unnötigen Statusanzeigen" - hier auf ein
   Minimum reduziert). */
.quiz-progress {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 2.1rem;
  text-align: center;
  color: var(--text-secondary);
  font-size: 0.72rem;
  opacity: 0.45;
  pointer-events: none;
  z-index: 10;
}

/* Die Frage ist jetzt das prominenteste Element oben auf der Stage -
   fett, damit sie klar den Fokuspunkt der Karte bildet. */
.quiz-question {
  padding: 3vh 8vw 4vh 8vw;
  text-align: center;
  font-weight: 700;
  line-height: 1.25;
  max-height: 4.7em;
  overflow: hidden;
  font-family: var(--font-question), -apple-system, "Helvetica Neue", Arial, sans-serif;
}

.option-list {
  display: flex;
  flex-direction: column;
}

/* "Ein Hauch von einem Button" - einzig hier bewusst etwas button-artiger.
   display:flex + align-items:center sorgt für zuverlässige vertikale
   Zentrierung unabhängig von der (dynamisch skalierten) Schriftgröße. */
.option-row {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 4.6rem;
  max-height: 4.6em;
  padding: 0.9rem 8vw;
  text-align: center;
  cursor: pointer;
  background: var(--surface);
  border-radius: var(--corner-radius, 14px);
  margin: 0.55rem 5vw;
  user-select: none;
  line-height: 1.3;
  overflow: hidden;
  transition: background-color 0.15s ease;
  font-family: var(--font-answer), -apple-system, "Helvetica Neue", Arial, sans-serif;
}

.option-row:active {
  opacity: 0.7;
}

.option-row.correct {
  background: rgba(var(--accent-rgb), 0.4);
}

.option-row.wrong {
  background: rgba(var(--accent-rgb), 0.2);
}

/* Nach 3 Fehlversuchen (Build 44): die richtige Antwort bleibt stehen, invertiert zum Theme - auf Dunkel weiße Fläche mit schwarzer Schrift,
   auf Hell umgekehrt (Fläche = Textfarbe des Themes, Schrift = Hintergrundfarbe). */
.option-row.revealed {
  background: var(--text);
  color: var(--bg);
}

/* Sperrt eine Antwort gegen weitere Klicks, OHNE sie sichtbar zu verändern
   - nicht angeklickte Antworten bleiben beim Auflösen einer Karte voll
   sichtbar, einzig die tatsächlich angeklickte(n) Antwort(en) färben sich
   über .correct/.wrong. Keine Transparenz-Übergänge (auf Wunsch). */
.option-row.locked {
  pointer-events: none;
}

/* Schreiben (Build 15): Eingabefeld im Look einer Antwort, Stage oben ausgerichtet,
   damit Prompt und Feld über der Bildschirmtastatur sichtbar bleiben.
   16 px+ verhindert den automatischen Zoom von iOS-Safari beim Fokussieren. */
.learning-stage.is-typing {
  margin: 0 auto auto auto; /* automatischer unterer Rand schiebt die Stage nach oben */
  padding-top: 6vh;
}

.option-row.typing-row {
  cursor: text;
}

.typing-input {
  width: 100%;
  min-width: 0;
  background: transparent;
  border: 0;
  outline: 0;
  padding: 0;
  margin: 0;
  color: inherit;
  font: inherit;
  font-size: 24px;
  text-align: center;
  -webkit-appearance: none;
  appearance: none;
  border-radius: 0;
}

/* Strichlinie ("c _ _ _") unter dem Feld: ab dem 2. Fehler */
.quiz-feedback.typing-pattern {
  white-space: pre;
  font-size: 1.25rem;
  letter-spacing: 0.12em;
}

.typing-input::placeholder {
  color: var(--text-secondary);
  opacity: 0.8;
}

.quiz-feedback {
  text-align: center;
  min-height: 1.4rem;
  color: var(--text-secondary);
  font-size: 0.95rem;
  padding: 0.5rem 0;
}

/* -- Session-Endscreen -- */

.end-stats {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin: 1.2rem 0;
  color: var(--text-secondary);
  font-size: 1rem;
}

.end-stats .stat-row {
  display: flex;
  justify-content: space-between;
  width: min(320px, 80vw);
}

.end-stats .stat-row span:last-child {
  color: var(--text);
}

/* -- Globaler "Nach Hause"-Bereich oben links (immer erreichbar, auch im
   Lernmodus). Unsichtbar per Default; auf echten Desktop-Zeigegeräten
   (nicht bei Touch, um "hängendes" Hover zu vermeiden) blendet sich beim
   Hovern ein dezenter Pfeil ein. -- */
#back-corner,
#forward-corner {
  position: fixed;
  top: 0;
  width: 56px;
  height: calc(56px + env(safe-area-inset-top, 0px));
  padding-top: env(safe-area-inset-top, 0px);
  z-index: 1000;
  cursor: pointer;
  display: flex;
  align-items: flex-start;
  -webkit-tap-highlight-color: transparent;
}

#back-corner { left: 0; justify-content: flex-start; }
#forward-corner { right: 0; justify-content: flex-end; }

#back-corner span,
#forward-corner span {
  padding: 14px;
  opacity: 0;
  color: var(--text-secondary);
  font-size: 1.2rem;
  line-height: 1;
  transition: opacity 0.15s ease;
}

@media (hover: hover) and (pointer: fine) {
  #back-corner:hover span,
  #forward-corner:hover span {
    opacity: 0.55;
  }
}

#back-corner:active span,
#forward-corner:active span {
  opacity: 0.8;
}

/* -- Karten-Settings-Button (unten-mittig, nur im Lernmodus). Gleiches
   Prinzip wie #back-corner: unsichtbar per Default, auf Desktop blendet
   sich beim Hovern ein Punkt ein, auf Touch bleibt er unsichtbar, aber
   tippbar. Sitzt bewusst UNTER dem Kartenindex, da nur er eine klickbare
   Funktion hat (Pflichtenheft 21.3 "Learning Mode"-Einstellungen). -- */
#card-settings-corner {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 44px;
  z-index: 1000;
  cursor: pointer;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 10px;
  -webkit-tap-highlight-color: transparent;
}

#card-settings-corner span {
  opacity: 0;
  color: var(--text-secondary);
  font-size: 1.4rem;
  line-height: 1;
  transition: opacity 0.15s ease;
}

@media (hover: hover) and (pointer: fine) {
  #card-settings-corner:hover span {
    opacity: 0.5;
  }
}

#card-settings-corner:active span {
  opacity: 0.8;
}

/* -- Responsive Learning Stage (Build 04, Pflichtenheft 16.0) --
   Handy: Fläche weitgehend ausnutzen. Tablet/Desktop: zentriert mit
   sinnvoller Maximalbreite, zusätzlicher Platz wird bewusst Leerraum
   ("je größer das Display, desto größer der Leerraum, nicht die UI"). */
#app.is-learning {
  justify-content: center;
}

.learning-stage {
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
  padding: 2vh 0 4vh 0;
}

/* -- Desktop-Pfeile / Touch-Zonen im Lernmodus (Pflichtenheft 14.0/15.0) --
   Exakt dieselbe Optik wie #back-corner: unsichtbar per Default, auf
   echten Zeigegeräten voller Opacity bei Hover, auf Touch bleibt die
   Zone unsichtbar aber weiterhin tippbar. */
.stage-nav {
  position: fixed;
  top: 0;
  width: 64px;
  height: 64px;
  z-index: 500;
  cursor: pointer;
  display: flex;
  align-items: flex-start;
  -webkit-tap-highlight-color: transparent;
}

.stage-nav--left {
  left: 0;
  justify-content: flex-start;
}

.stage-nav--right {
  right: 0;
  justify-content: flex-end;
}

.stage-nav span {
  opacity: 0;
  color: var(--text-secondary);
  font-size: 1.2rem;
  line-height: 1;
  padding: 14px;
  transition: opacity 0.15s ease;
}

@media (hover: hover) and (pointer: fine) {
  .stage-nav:not(.disabled):hover span {
    opacity: 0.55;
  }
}

.stage-nav:not(.disabled):active span {
  opacity: 0.8;
}

.stage-nav.disabled {
  pointer-events: none;
}

/* Historische (bereits beantwortete) Karte beim Zurückblättern - rein
   lesend, keine Interaktion mehr möglich. */
.option-row.readonly {
  pointer-events: none;
}

.option-row.picked-wrong {
  background: rgba(var(--accent-rgb), 0.2);
}

/* -- Theme-Editor Live-Preview (Build 05, Pflichtenheft 19.6) --
   Eigener CSS-Variablen-Scope: überschreibt --bg/--surface/etc. nur für
   dieses Element und seine Kinder, ohne den Rest der Admin-UI zu berühren. */
.theme-preview {
  background: var(--bg);
  color: var(--text);
  border-radius: 12px;
  padding: 1.5rem 0;
  margin: 1rem 5vw;
  overflow: hidden;
}

.theme-preview .quiz-question {
  padding: 1rem 8vw 1.5rem 8vw;
  max-height: none;
}

.theme-preview .option-row {
  min-height: 3.4rem;
  max-height: none;
  padding: 0.7rem 8vw;
}

.color-field {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 8vw;
  background: var(--surface);
  margin: 0.3rem 5vw;
  border-radius: 10px;
}

.color-field label {
  color: var(--text);
  font-size: 0.95rem;
}

.color-field input[type="color"] {
  width: 44px;
  height: 32px;
  border: none;
  border-radius: 6px;
  background: none;
  cursor: pointer;
}

.color-field input[type="number"],
.color-field input[type="text"] {
  width: 100px;
  padding: 0.4rem 0.6rem;
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--divider);
  border-radius: 6px;
  text-align: right;
}

/* Font-Auswahl im Theme-Editor (Build 33): zeigt den Namen des Fonts */
.color-field select.font-select {
  width: 160px;
  padding: 0.4rem 0.6rem;
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--divider);
  border-radius: 6px;
  font-size: 1rem; /* mind. 16 px: kein Safari-Zoom */
  text-overflow: ellipsis;
}

/* -- Karten-Filter / Tag-Cloud (Build 07) --
   Inaktiv: Theme-Farben (--surface/--text), funktioniert in Dark und Light.
   Aktiv: feste Pastellfarben mit schwarzer Schrift, themeunabhängig. */
.tag-cloud {
  padding: 1.6rem 5vw 0.4rem 5vw;
  max-width: 640px;
  margin: 0 auto;
  width: 100%;
}

.tag-cloud-title {
  text-align: center;
  font-size: 1.3rem;
  padding: 0.6rem 0 0.4rem 0;
}

.tag-counter {
  text-align: center;
  color: var(--text-secondary);
  font-size: 0.85rem;
  padding-bottom: 1.2rem;
}

.tag-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.7rem;
  margin-bottom: 1.6rem;
}

.tag-chip {
  width: calc((100% - 3 * 0.7rem) / 4);
  min-width: 4.4rem;
  padding: 0.6rem 0.2rem;
  border-radius: 999px;
  text-align: center;
  font-size: 0.95rem;
  line-height: 1.2;
  cursor: pointer;
  user-select: none;
  background: var(--surface);
  color: var(--text);
}

.tag-chip.active {
  color: #000;
}
.tag-chip.active.tag-pages { background: #a8ffc0; }
.tag-chip.active.tag-sections { background: #f5b8fa; }
.tag-chip.active.tag-parts { background: #a8f0ff; }
.tag-chip.active.tag-words { background: #ffe8a0; }

/* -- "Einfach lernen": quadratische Karteikarte mit Flip (Build 08) --
   Breite = Breite der Antwort-Buttons (Stage max. 640px, links/rechts je 5vw
   Rand), höchstens 70% der Fensterhöhe, damit sie am Desktop nicht zu hoch wird. */
.flip-scene {
  width: min(calc(min(100vw, 640px) - 10vw), 70vh);
  aspect-ratio: 1 / 1;
  margin: 0 auto;
  perspective: 1200px;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
}

.flip-card {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  transition: transform 500ms cubic-bezier(0.4, 0, 0.2, 1);
}

.flip-card.flipped {
  transform: rotateY(180deg);
}

.flip-face {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: var(--surface);
  border-radius: var(--corner-radius, 14px);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  overflow: hidden;
  text-align: center;
  line-height: 1.3;
  font-family: var(--font-answer), -apple-system, "Helvetica Neue", Arial, sans-serif;
}

.flip-back {
  transform: rotateY(180deg);
}

.flip-text {
  max-width: 100%;
  overflow-wrap: break-word;
}

/* Bewegung (Build 42): gesteuert über Klassen am <html> (app.js, applyMotionLevel) statt über die Geräte-Abfrage; "Automatisch" setzt sie
   nach der Geräteeinstellung. Reduziert und Aus: Karte dreht sich nicht, sondern wechselt sofort. */
html.motion-reduced .flip-card, html.motion-off .flip-card {
  transition: none;
}

/* "Mit dieser Auswahl neu starten": auffällige Pille. --accent/--bg sind im
   Dark-Theme weiß/schwarz und im Light-Theme invertiert (schwarz/weiß). */
.restart-pill {
  display: block;
  width: min(320px, 80%);
  margin: 1.4rem auto 0.6rem auto;
  padding: 0.95rem 1rem;
  border-radius: 999px;
  text-align: center;
  font-size: 1rem;
  cursor: pointer;
  user-select: none;
  background: var(--accent);
  color: var(--bg);
}
.restart-pill:active {
  opacity: 0.8;
}

/* -- Home-Button oben mittig (Build 08c) --
   Dezent, aber auffindbar. Sitzt über den Pfeil-Zonen (z-index) und
   respektiert die iOS-Statusleiste (safe-area). Gewünscht unauffälliger?
   -> opacity unten verkleinern (0 = komplett unsichtbar, weiter tippbar). */
#home-button {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 64px;
  height: calc(46px + env(safe-area-inset-top, 0px));
  padding-top: env(safe-area-inset-top, 0px);
  z-index: 1100;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
  opacity: 0; /* unsichtbar, aber tippbar (Build 09) */
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: opacity 0.15s ease;
}

#home-button svg {
  width: 18px;
  height: 18px;
}

@media (hover: hover) and (pointer: fine) {
  #home-button:hover {
    opacity: 0.55; /* nur am Desktop beim Drüberfahren, wie die Pfeile */
  }
}

#home-button:active {
  opacity: 0.8;
}

/* -- Lottie-Animation am Session-Ende (Build 10) --
   Die Stage deckt den ganzen Bildschirm ab (Tippen irgendwo -> Auswertung),
   die Animation selbst läuft in Dauerschleife in einer kleineren, mittigen Box.
   Größe: --lottie-scale (1 = bildschirmfüllend, 0.3333 = ein Drittel).
   z-index unter Home-Button und Zurück-Zone, damit die weiter funktionieren. */
.lottie-stage {
  --lottie-scale: 0.3333;
  position: fixed;
  inset: 0;
  z-index: 900;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.lottie-box {
  width: calc(100% * var(--lottie-scale));
  height: calc(100% * var(--lottie-scale));
}

.lottie-box svg {
  width: 100% !important;
  height: 100% !important;
}

/* -- Hinweise zur Kartendatei im Karten-Editor (Build 11) -- */
.issue-notice {
  white-space: pre-line;
  text-align: left;
  color: var(--text-secondary);
  font-size: 0.85rem;
  line-height: 1.4;
  padding: 0.8rem 8vw 1.2rem 8vw;
}

/* -- Logo (Build 13/14) --
   logo.svg ist das Logo OHNE Hintergrund, auf den Inhalt zugeschnitten, und wird als Maske genutzt:
   die Farbe kommt aus dem Theme (--text), also hell im Dark-Theme und dunkel im Light-Theme.
   Größe: 60 % der Breite, am Desktop höchstens 250 px - das entspricht der Darstellung auf dem
   iPhone, die Wiedererkennung bleibt gleich. --logo-ratio (Breite/Höhe) setzt
   tools/generate-icons.py automatisch aus dem Logo. */
:root {
  /* Build 31: das Logo ist das letzte Bild der Startanimation (tools/generate-start-logo.py setzt --logo-ratio und --intro-k) */
  --logo-w: min(60vw, 250px);
  --logo-ratio: 3.9833;
  --logo-h: calc(var(--logo-w) / var(--logo-ratio));
  --intro-k: 1.0442;
  /* Höhe der Logo-MITTE im Fenster (Build 32). Gilt für die Startscreens UND für das Ende der Startanimation:
     50 % = ganz mittig (Build 31), ca. 22 % = Logo oben (bis Build 30); 36 % = die Mitte dazwischen. */
  --logo-y: 36%;
}
.app-logo {
  width: var(--logo-w);
  aspect-ratio: var(--logo-ratio);
  margin: 0 auto;
  background-color: var(--text);
  -webkit-mask: url(/branding/logo-start.png) center / contain no-repeat;
  mask: url(/branding/logo-start.png) center / contain no-repeat;
}

/* Startscreens (Sprachauswahl, Profilauswahl, Setup): die Mitte des Logos liegt bei --logo-y der Fensterhöhe -
   dort, wo die Startanimation endet; der Inhalt steht darunter. Die Prozentwerte beziehen sich auf die Höhe von #app
   (= Fenster, wie beim fixed-Overlay der Animation). */
.logo-slot { flex: 0 0 calc(var(--logo-y) - var(--logo-h) / 2); }
.form-screen.has-logo {
  justify-content: flex-start;
  padding-top: 0;
  padding-bottom: 0;
}
.form-screen.has-logo .logo-slot { flex-basis: calc(var(--logo-y) - var(--logo-h) / 2 - 1.4rem); } /* minus gap */
.form-screen.has-logo::after { content: ""; flex: 0 0 6vh; }
.nav-header.has-logo { padding: 0 8vw 4vh 8vw; }

/* Vorschalt-Screen (Build 20): reine Text-Zeilen wie die Sprachauswahl */
.scope-sub {
  margin-top: 0.8rem;
  font-size: 1.05rem;
  color: var(--text-secondary);
}

/* Hinweiszeile zwischen Kopf und Menüliste (Build 39), z. B. der Verbindungsstatus unter "Bibliothek" */
.menu-note {
  padding: 0 8vw 3vh 8vw;
  text-align: center;
  font-size: 0.95rem;
  color: var(--text-secondary);
}

/* Statistik-Ansicht (Build 38): Zahlen als ruhiger, zentrierter Text; nur die Menüpunkte darunter sind antippbar */
.nav-header.compact { padding: 9vh 8vw 3vh 8vw; }
.stats-lines {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.1rem;
  padding: 0 8vw 2vh 8vw;
  text-align: center;
}
.stats-line { font-size: clamp(1.05rem, 2.6vw, 1.3rem); }
.stats-deck { display: flex; flex-direction: column; gap: 0.2rem; }
.stats-deck-name { font-size: clamp(1.05rem, 2.6vw, 1.3rem); }
.stats-deck-numbers, .stats-entry-sub { font-size: 0.95rem; color: var(--text-secondary); }
.stats-entry { display: flex; flex-direction: column; gap: 0.2rem; }
.stats-entry-main { font-size: clamp(1.05rem, 2.6vw, 1.3rem); }
.stats-menu { padding-top: 1vh; }

/* Grafische Statistik (Build 44): ruhige Balken in der Akzentfarbe, Zahlen als Text daneben/darunter */
.st-wrap {
  width: min(640px, 100%);
  margin: 0 auto;
  padding: 0 1.1rem 1.2rem;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 1.8rem;
}
.st-rounds { gap: 1.6rem; }
.st-last { text-align: center; font-size: 0.9rem; color: var(--text-secondary); }
.st-h { font-size: 0.85rem; letter-spacing: 0.03em; text-transform: uppercase; color: var(--text-secondary); text-align: center; margin: 0 0 0.6rem; }
.st-week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 0.55rem; align-items: end; height: 130px; }
.st-day { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: 0.3rem; }
.st-bar { width: 100%; max-width: 34px; min-height: 5px; border-radius: 9px 9px 5px 5px; background: var(--accent); }
.st-bar.zero { background: rgba(var(--accent-rgb), 0.16); }
.st-bar.future { background: transparent; border: 1px dashed rgba(var(--accent-rgb), 0.3); }
.st-min { font-size: 0.75rem; color: var(--text-secondary); min-height: 1em; }
.st-lab { font-size: 0.8rem; color: var(--text-secondary); }
.st-day.today .st-lab { color: var(--text); font-weight: 600; }
.st-sum { text-align: center; font-size: 0.95rem; margin-top: 0.8rem; }
.st-decks { display: flex; flex-direction: column; gap: 1.4rem; }
.st-deck { display: flex; flex-direction: column; gap: 0.45rem; }
.st-deckname { display: flex; justify-content: space-between; align-items: baseline; font-size: 1.05rem; }
.st-deckpct { font-size: 0.85rem; color: var(--text-secondary); }
.st-track { display: flex; height: 16px; border-radius: 8px; overflow: hidden; background: rgba(var(--accent-rgb), 0.16); }
.st-done { background: var(--accent); }
.st-tricky { background: rgba(var(--accent-rgb), 0.5); }
.st-note { font-size: 0.85rem; color: var(--text-secondary); }
.st-round { display: flex; flex-direction: column; gap: 0.35rem; }
.st-round-top { display: flex; justify-content: space-between; align-items: baseline; font-size: 1.05rem; }
.st-round-top span:last-child { font-size: 0.85rem; color: var(--text-secondary); }
.st-round-mid { display: flex; align-items: center; gap: 0.8rem; }
.st-pct { font-size: 1.15rem; min-width: 3.4rem; }
.st-pbar { flex: 1; height: 12px; border-radius: 6px; overflow: hidden; background: rgba(var(--accent-rgb), 0.16); }
.st-pbar i { display: block; height: 100%; background: var(--accent); }
.st-info { font-size: 0.8rem; color: var(--text-secondary); }
/* kleine, ruhige Sterne (ohne Füll-Animation) */
.end-stars.end-stars-mini { gap: 4px; margin: 0; justify-content: flex-start; }
.end-stars-mini .end-star { width: 18px; height: 18px; }
.end-stars-mini .end-star.on polygon { animation: none; }

/* Versionszeile ganz unten (Build 21): klein und dezent, nur zur Kontrolle nach einem Update */
.app-version {
  text-align: center;
  font-size: 0.72rem;
  color: var(--text-secondary);
  opacity: 0.55;
  padding: 0.2rem 0 calc(0.9rem + env(safe-area-inset-bottom, 0px));
  min-height: 1.2em;
  user-select: none;
}

/* Endscreen (Build 22): große UNSICHTBARE Tippfläche mittig über der Auswertung ("Nochmal"); die Auswertung
   dahinter bleibt voll sichtbar. Auch am Desktop ohne Hover-Hinweis (Build 25). */
.end-restart-zone {
  position: fixed;
  left: 50%;
  top: 50%;
  width: min(86vw, 460px);
  height: 34vh;
  transform: translate(-50%, -50%);
  z-index: 30;
  background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Auswertung (Build 23): kompakt; der Hauptinhalt steht mittig in einem großen gedachten Quadrat, darunter abgesetzt
   Keine Textlinks (zurück = Ecke oben links, Nochmal = unsichtbare Mitte). Alles auf einem Bildschirm ohne Scrollen. */
.end-page {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4vh;
  padding: 2vh 4vw calc(2vh + env(safe-area-inset-bottom, 0px));
  min-height: 0;
}

.end-square {
  width: min(92vw, 60vh, 520px);
  aspect-ratio: 1 / 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: stretch;
  gap: 0.3rem;
  text-align: center;
}

.end-title {
  font-weight: 400;
  font-size: 1.3rem;
  margin: 0 0 0.3rem;
}

/* Motivierender Satz (Build 43): über der Lottie-Animation (sie bleibt exakt in der Mitte; der Satz wächst bei langen Texten nach oben) ... */
.lottie-headline {
  position: absolute;
  left: 7vw;
  right: 7vw;
  bottom: calc(50% + var(--lottie-scale) * 50% + 3.5vh);
  margin: 0;
  text-align: center;
  font-size: 1.7rem;
  line-height: 1.25;
  font-weight: 400;
  color: var(--text);
}
/* ... bzw. über der Auswertung, wenn keine Animation läuft; der Stapelname steht dann klein darunter */
.end-motto {
  font-weight: 400;
  font-size: 1.55rem;
  line-height: 1.25;
  margin: 0 0 0.9rem;
}
.end-deck {
  font-size: 0.95rem;
  color: var(--text-secondary);
  margin: 0 0 0.4rem;
}

.end-stats .stat-row {
  margin: 0.25rem 0;
}

.end-stars {
  display: flex;
  justify-content: center;
  gap: 7px;
  margin: 0.2rem 0 0.1rem;
}

.end-star {
  width: 30px;
  height: 30px;
}

.end-star polygon {
  fill: none;
  stroke: var(--text-secondary);
  stroke-width: 1.2;
  stroke-linejoin: round;
  opacity: 0.55;
}

@keyframes endStarFill {
  from { fill: transparent; }
  to { fill: var(--accent); }
}

.end-star.on polygon {
  fill: var(--accent);
  stroke: var(--accent);
  opacity: 1;
  animation: endStarFill 380ms ease-out both;
  animation-delay: calc(var(--i) * 170ms);
}

html.motion-off .end-star.on polygon {
  animation: none;
}
/* Aus: auch alle kleinen Übergänge (Ein-/Ausblenden bei Markierung usw.) - nur das Überblenden der Startanimation bleibt (läuft immer) */
html.motion-off *:not(#intro-overlay) {
  transition: none !important;
  animation: none !important;
}

.end-percent {
  font-size: 2.5rem;
  line-height: 1.05;
}

.end-sub {
  font-size: 0.95rem;
  color: var(--text-secondary);
}

/* Balken: Abschnitte direkt aneinander (nur der Farbunterschied trennt), Enden abgerundet, Text steht auf dem Abschnitt */
.end-bar {
  display: flex;
  width: 100%;
  height: 30px;
  margin: 0.8rem 0 0.2rem;
  border-radius: 15px;
  overflow: hidden;
}

.end-seg {
  flex-basis: 0;
  min-width: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  white-space: nowrap;
  overflow: hidden;
}

.seg-1 { background: var(--accent); }
.seg-2 { background: rgba(var(--accent-rgb), 0.6); }
.seg-3 { background: rgba(var(--accent-rgb), 0.32); }
.seg-0 { background: rgba(var(--accent-rgb), 0.16); }

.end-duration {
  font-size: 0.8rem;
  color: var(--text-secondary);
}

.end-review {
  margin-top: 0.8rem;
  padding-top: 0.6rem;
  border-top: 1px solid rgba(var(--accent-rgb), 0.15);
  text-align: center;
}

.end-review-label {
  margin-bottom: 0.35rem;
  font-size: 0.78rem;
  color: var(--text-secondary);
  text-align: center;
}

.end-review-row {
  margin: 0.15rem 0;
  font-size: 0.95rem;
  text-align: center;
}

.end-review-more {
  margin-top: 0.25rem;
  font-size: 0.78rem;
  color: var(--text-secondary);
  text-align: center;
}

/* Querformat/sehr niedrige Fenster: Vorrang hat "alles auf einmal sehen" */
@media (max-height: 520px) {
  .end-review {
    display: none;
  }
  .end-square {
    width: min(92vw, 520px);
    aspect-ratio: auto;
  }
}

/* Zurück-Links unten (Build 28): standardmäßig aus - "zurück" ist die Ecke oben links. Bleiben sichtbar (class "always"): Fehlerseiten,
   Karten-Editor, Bibliothek verwalten, Papierkorb, Karten-Einstellungen. Einstellungen: "Zurück-Links unten: an" entfernt diese Klasse. */
.hide-back-links .back-link.nav-back:not(.always) {
  display: none;
}

/* -- Karten-Editor (Build 29): Karten klappen in der Liste auf -- */
.ce-file {
  padding: calc(4rem + env(safe-area-inset-top, 0px)) 8vw 0 8vw; /* unterhalb der Ecken-/Home-Zonen */
  text-align: center;
  color: var(--text-secondary);
  font-size: 0.95rem;
  cursor: pointer;
  word-break: break-all;
}
.ce-file-edit {
  padding: calc(4rem + env(safe-area-inset-top, 0px)) 8vw 0 8vw;
  text-align: center;
}
.ce-file-row, .cf-file .ce-file-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.2rem;
}
.ce-affix { color: var(--text-secondary); font-size: 1rem; }
.ce-file-input, .cf-file input {
  width: min(220px, 50vw);
  padding: 0.7rem 0.8rem;
  background: var(--surface);
  border: none;
  border-radius: var(--corner-radius, 10px);
  color: var(--text);
  font-size: 1rem; /* mind. 16 px: kein Safari-Zoom */
  text-align: center;
}
.cf-file { display: flex; flex-direction: column; gap: 0.5rem; align-items: center; }
.cf-file-label { color: var(--text-secondary); font-size: 0.85rem; }
.nav-header.ce-header { padding: 1.2rem 8vw 0.6rem 8vw; }
.ce-sub { color: var(--text-secondary); margin-top: 0.4rem; font-size: 0.95rem; }
.ce-filters {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.2rem 1.4rem;
  padding: 0.4rem 8vw 1rem 8vw;
  color: var(--text-secondary);
}
.ce-filter { cursor: pointer; padding: 0.5rem 0; }
.ce-filter.on { color: var(--accent); font-weight: 600; }
.ce-error { color: #ff6b6b; font-size: 0.9rem; min-height: 1.1rem; line-height: 1.35; }
.ce-flash { text-align: center; padding: 0 8vw 0.8rem 8vw; }
/* Karten-Editor (Build 40): zentriert (wie die Lern-Bühne höchstens 640 px), Vorderseite rechtsbündig, Rückseite linksbündig,
   dazwischen der einstellbare Abstand --ce-gap (Griff im Spaltenkopf). Kopf und Zeilen teilen sich dieselbe Spaltenaufteilung. */
#app .ce-list, #app .ce-colhead {
  width: min(640px, 100%);
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}
.ce-colhead[hidden] { display: none; }
.ce-colhead, .admin-list .nav-item.card-row {
  display: grid;
  grid-template-columns: 1fr min(var(--ce-gap, 32px), 40%) 1fr 3.6rem;
  align-items: center;
}
.admin-list .nav-item.card-row {
  padding: 0.5rem 1rem;
  text-align: left;
  font-size: 1.05rem;
}
.cr-front { grid-column: 1; min-width: 0; overflow-wrap: anywhere; text-align: right; padding: 0.4rem 0; }
.cr-back { grid-column: 3; min-width: 0; overflow-wrap: anywhere; text-align: left; color: var(--text-secondary); padding: 0.4rem 0; }
.cr-type {
  grid-column: 4;
  min-height: 2.75rem; /* großzügige Tippfläche (iPhone) */
  display: flex;
  align-items: center;
  justify-content: flex-end;
  color: var(--text-secondary);
  font-size: 0.85rem;
}
.ce-colhead { padding: 0.2rem 1rem 0.5rem 1rem; color: var(--text-secondary); font-size: 0.8rem; letter-spacing: 0.02em; }
.ce-colhead-l { grid-column: 1; text-align: right; }
.ce-colhead-r { grid-column: 3; text-align: left; padding-left: 0.9rem; /* Platz für die halbe Griffbreite */ }
.ce-colhead-mid { grid-column: 2; position: relative; align-self: stretch; min-height: 2rem; }
/* Der Griff sitzt mittig auf dem rechten Rand des Abstands: Er folgt beim Ziehen dem Finger/der Maus 1:1. */
.ce-grip {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translate(50%, -50%);
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 0.35rem 0.45rem;
  border-radius: 999px;
  border: 1px solid rgba(var(--accent-rgb), 0.55);
  background: rgba(var(--accent-rgb), 0.15);
  cursor: ew-resize;
  touch-action: none; /* Ziehen soll nicht scrollen */
  user-select: none;
  -webkit-user-select: none;
}
.ce-grip::before { content: ""; position: absolute; inset: -0.6rem -0.5rem; } /* großzügige Tippfläche */
.ce-grip i { display: block; width: 2px; height: 0.95rem; border-radius: 2px; background: var(--accent); }
.cr-type.empty { opacity: 0.6; }
.cr-note {
  padding: 0.4rem 1rem 0.7rem 1rem;
  background: var(--surface);
  border-bottom: 1px solid var(--divider);
  color: var(--text-secondary);
  font-size: 0.8rem;
  margin-top: -1px;
}
.card-edit {
  /* Hervorgehobene Karte (Build 40): abgerundete Fläche in 35 % Akzentfarbe, wie die Liste zentriert */
  background: rgba(var(--accent-rgb), 0.35);
  border-radius: 26px;
  width: min(640px, calc(100% - 1.2rem));
  box-sizing: border-box;
  margin: 0.7rem auto;
  padding: 1.1rem 1.4rem 1.4rem 1.4rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  text-align: left;
}
.ce-head { display: flex; justify-content: space-between; align-items: baseline; font-size: 0.85rem; }
.ce-dim { color: var(--text-secondary); }
.ce-link { cursor: pointer; font-size: 1rem; padding: 0.4rem 0; }
.ce-link:active { opacity: 0.55; }
.ce-field { display: flex; flex-direction: column; gap: 0.35rem; }
.ce-label { color: var(--text-secondary); font-size: 0.78rem; letter-spacing: 0.02em; }
.card-edit input {
  width: 100%;
  padding: 0.8rem 0.9rem;
  background: var(--bg);
  border: none;
  border-radius: var(--corner-radius, 10px);
  color: var(--text);
  font-size: 1rem; /* mind. 16 px: kein Safari-Zoom */
  font-family: inherit;
}
.ce-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.9rem; }
.ce-type { display: flex; flex-wrap: wrap; gap: 0.2rem 1.4rem; }
.ce-opt { cursor: pointer; color: var(--text-secondary); padding: 0.55rem 0; font-size: 1.05rem; }
.ce-opt.on { color: var(--accent); font-weight: 600; }
.ce-live { font-size: 0.9rem; line-height: 1.45; min-height: 1.3rem; }
.ce-live-head { color: var(--accent); font-weight: 600; }
.ce-actions { display: flex; flex-wrap: wrap; gap: 0.2rem 1.6rem; align-items: baseline; }
.ce-save { color: var(--accent); font-weight: 600; }
/* Auf der Akzentfläche der offenen Karte wäre Akzentfarbe kaum lesbar: aktive Auswahl und Speichern in Textfarbe, fett, unterstrichen */
.card-edit .ce-opt.on, .card-edit .ce-save, .card-edit .ce-live-head {
  color: var(--text);
  font-weight: 600;
}
.card-edit .ce-opt.on, .card-edit .ce-save { text-decoration: underline; text-underline-offset: 0.3em; }

/* -- Startanimation (Build 30): schwarz, mittig, Größe wie die Karte im Modus "Einfach lernen" (.flip-scene) -- */
#intro-overlay {
  position: fixed;
  inset: 0;
  z-index: 5000; /* über Ecken-Zonen und Home-Zone */
  background: #000; /* immer schwarz (weiße Schrift), auch im Light-Theme */
  transition: opacity 0.4s ease;
}
#intro-overlay.fade-out { opacity: 0; pointer-events: none; } /* weich in den Startscreen: das Logo darunter liegt deckungsgleich */
/* Größe: das fertig geschriebene Logo ist exakt so groß wie das Standlogo (--logo-w); die Szene ist um --intro-k größer */
.intro-scene {
  /* Mitte der Szene (= Mitte des Logos) bei --logo-y der Fensterhöhe, waagerecht mittig */
  position: absolute;
  left: 50%;
  top: var(--logo-y);
  transform: translate(-50%, -50%);
  width: calc(var(--logo-w) * var(--intro-k));
  aspect-ratio: 1 / 1;
  /* Die Animation ist reinweiß (255), die Textfarbe im Dark-Theme ist #f2f2f2 (242): angleichen, damit beim Ausblenden
     auch der Farbton des Logos nicht springt (242 / 255 = 0.949). */
  filter: brightness(0.949);
}
.intro-scene svg { display: block; }

/* -- Markierung bei Bedienung per Controller/Pfeiltasten (Build 36, public/focus-nav.js) --
   15 % Fläche + 2 px Kontur (dezent, 35 % sichtbar) in der Akzentfarbe des Themes. Die Fläche liegt als Verlauf ÜBER der
   vorhandenen Hintergrundfarbe (so bleiben die Rückmeldefarben "richtig"/"noch nicht" der Antworten erhalten).
   Stärke ändern: nur diese zwei Werte. */
:root {
  --focus-fill-alpha: 0.15;
  --focus-ring-alpha: 0.35;
}
.nav-focus {
  background-image: linear-gradient(rgba(var(--accent-rgb), var(--focus-fill-alpha)), rgba(var(--accent-rgb), var(--focus-fill-alpha)));
  outline: 2px solid rgba(var(--accent-rgb), var(--focus-ring-alpha));
  outline-offset: -2px;
}
.nav-item.nav-focus, .back-link.nav-focus { border-radius: var(--corner-radius, 14px); }
/* Textzeilen in Menüs füllen die ganze Breite: Markierung mit Rand, der Text bleibt an seiner Stelle (5vw + 3vw = 8vw) */
.nav-list:not(.admin-list) > .nav-item.nav-focus { margin-left: 5vw; margin-right: 5vw; padding-left: 3vw; padding-right: 3vw; }
.back-link.nav-focus { margin-left: 5vw; margin-right: 5vw; }

/* Controller-Modus (Build 37): Mauszeiger ausblenden, solange Controller/Pfeiltasten benutzt werden (erst eine echte Mausbewegung bringt ihn zurück) */
html.nav-mode, html.nav-mode * { cursor: none !important; }
/* Grundregel (Build 38): Wo es nur EINE Aktion gibt (kein Wählen, kein Navigieren), bleibt die Markierung unsichtbar - sie funktioniert
   trotzdem (A löst aus). Überall, wo man auswählt oder in Unteransichten navigiert (Menüs, Vorschalt-Screen, Statistik-Menü, Antworten),
   bleibt sie SICHTBAR. Unsichtbar sind: Lernkarte im Modus "Einfach lernen" (die Szene `.flip-scene` selbst trägt den Klick-Listener, Build 37b),
   Lottie-Animation am Rundenende, Auswertung ("Nochmal"-Fläche) und `.learning-stage` (Schreiben-Modus, Tippen zum Weitermachen nach
   3 Fehlversuchen). Wer einen neuen Screen mit einer einzigen Aktion auf einem Container baut, trägt den Selektor hier ein. */
.flip-scene.nav-focus, .flip-scene .nav-focus, .flip-card.nav-focus, .lottie-stage.nav-focus, .end-restart-zone.nav-focus, .end-page .nav-focus,
.learning-stage.nav-focus {
  background-image: none;
  outline: none;
}
/* iPhone: Die Zonen oben (Home, Zurück, Vor, Karten-Einstellungen) blenden ihr Symbol beim Antippen aus/ein. Dieser Übergang nach
   dem Loslassen kann iOS dazu bringen, das Tippen nicht als Klick zu werten - auf Touch-Geräten daher ohne Übergang. */
@media (hover: none) {
  #home-button, #back-corner span, #forward-corner span, #card-settings-corner span { transition: none; }
}