/* Farben angelehnt an das Original: schwarze Knoepfe, gruene Schrift, gewaehlt = hellgruen */
:root {
  --hg: #111412;
  --flaeche: #1b201c;
  --rand: #2f3a31;
  --text: #e6ece7;
  --leise: #9aa79c;
  --gruen: #39ff14;
  --gruen-dunkel: #1f8f0c;
  --rot: #ff5a4f;
  --gold: #e8c547;
  /* seit 15.10.2026 (helles Farbschema): bisher feste Farben als Variablen */
  --gruen-rgb: 57, 255, 20;
  --gold-rgb: 232, 197, 71;
  --rot-rgb: 255, 90, 79;
  --knopf-hg: #000;
  --kopf-hg: #000;
  --auf-dunkelgruen: #fff;   /* Schrift auf --gruen-dunkel (Hauptknoepfe, Avatar) */
  --auf-gruen: #000;         /* Schrift auf --gruen (gewaehlte Antwort) und --gold */
  --gruen-hover: var(--gruen-hover);
  --rot-rand: var(--rot-rand);
  color-scheme: dark;
}
/* Helles Farbschema - nur wenn von Hand gewaehlt (Umschalter «Farbe»); «Automatisch» bleibt im Lern Tool dunkel */
@media screen {
  :root[data-farbe="hell"] {
    color-scheme: light;
    --hg: #f3f6f3;
    --flaeche: #ffffff;
    --rand: #d3dcd4;
    --text: #1b2a1f;
    --leise: #5b6a5e;
    --gruen: #17790a;
    --gruen-dunkel: #1f8f0c;
    --rot: #c0392b;
    --gold: #946600;
    --gruen-rgb: 23, 121, 10;
    --gold-rgb: 148, 102, 0;
    --rot-rgb: 192, 57, 43;
    --knopf-hg: #ffffff;
    --kopf-hg: #ffffff;
    --auf-dunkelgruen: #fff;
    --auf-gruen: #fff;
    --gruen-hover: #187a09;
    --rot-rand: #e3a7a0;
  }
}
* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--hg);
  color: var(--text);
  font: 1rem/1.5 system-ui, "Segoe UI", sans-serif;  /* rem: folgt der Schriftgroesse A- / A+ */
}
main { max-width: 1100px; margin: 0 auto; padding: 16px; }
h1 { font-size: 1.5rem; margin: 0 0 12px; }
h2 { font-size: 1.05rem; margin: 18px 0 6px; color: var(--leise); }
a { color: var(--gruen); }
kbd {
  font: 0.75rem ui-monospace, monospace;
  border: 1px solid currentColor; border-radius: 4px;
  padding: 0 4px; margin-left: 6px; opacity: 0.7;
}

.statusleiste {
  display: flex; flex-wrap: wrap; gap: 4px 20px; color: var(--leise);
  padding: 6px 16px; background: var(--flaeche); border-bottom: 1px solid var(--rand);
}
.statusleiste b { color: var(--text); }

.karte {
  background: var(--flaeche); border: 1px solid var(--rand);
  border-radius: 10px; padding: 16px; margin-bottom: 16px;
}
.hinweis { background: var(--flaeche); border-left: 4px solid var(--gruen); padding: 8px 12px; border-radius: 6px; }
.hinweis.fehler { border-left-color: var(--rot); }
.hinweis.info { border-left-color: var(--gold); }
.schmal-karte { max-width: 460px; }
.abschnitt { margin-top: 28px; color: var(--text); font-size: 1.2rem; }
.fortschritt { height: 8px; background: var(--hg); border-radius: 4px; overflow: hidden; margin: 6px 0; }
.fortschritt div { height: 100%; background: var(--gruen-dunkel); }
.tabelle-scroll { overflow-x: auto; }
.tabelle { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
.tabelle th, .tabelle td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--rand); white-space: nowrap; }
.tabelle th { color: var(--leise); font-weight: 600; }
.tabelle .zahl { text-align: right; }
.tabelle tr.inaktiv td { color: var(--leise); }
.knopfleiste form { display: inline; }
.knopfleiste { align-items: center; }

.faecher { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.faecher h2 { margin: 0; color: var(--text); font-size: 1.2rem; }
.warnungen { color: var(--gold); margin-bottom: 12px; font-size: 0.9rem; }
.warnungen ul { padding-left: 18px; }

.knopf {
  display: inline-block; cursor: pointer; text-decoration: none; text-align: center;
  font: inherit; font-weight: 600; padding: 12px 20px; border-radius: 8px;
  background: var(--knopf-hg); color: var(--gruen); border: 1px solid var(--gruen-dunkel);
}
.knopf:hover:not(:disabled) { border-color: var(--gruen); }
.knopf.haupt { background: var(--gruen-dunkel); color: var(--auf-dunkelgruen); border-color: var(--gruen-dunkel); }
.knopf.haupt:hover:not(:disabled) { background: var(--gruen-hover); }
.knopf:disabled { opacity: 0.4; cursor: default; }
.link { background: none; border: none; color: var(--leise); text-decoration: underline; cursor: pointer; font: inherit; padding: 0; }

.fragetext { font-size: 1.25rem; white-space: pre-line; margin: 0; }
.fragetext.klein { font-size: 1rem; color: var(--leise); margin-top: 8px; }
.info { color: var(--gold); margin: 10px 0 0; }
.bild { display: block; max-width: 100%; max-height: 50vh; margin: 14px auto 0; border-radius: 6px; }

.steuerung { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; }
.steuerung form, .steuerung .knopf { width: 100%; }
#antwort-form .steuerung:has(#ueberspringen) { grid-template-columns: 1fr 1fr 1fr; }
.antworten { display: grid; gap: 12px; grid-template-columns: repeat(5, 1fr); }
.antwort {
  position: relative; min-height: 96px; padding: 26px 10px 10px; cursor: pointer;
  font: inherit; font-size: 1.05rem; text-align: center; overflow-wrap: anywhere;
  background: var(--knopf-hg); color: var(--gruen); border: 1px solid var(--gruen-dunkel); border-radius: 8px;
}
.antwort:hover { border-color: var(--gruen); }
.antwort.gewaehlt { background: var(--gruen); color: var(--auf-gruen); border-color: var(--gruen); }
.antwort .taste { position: absolute; top: 4px; left: 8px; font-size: 0.8rem; opacity: 0.7; }
.antwort .rang { font-weight: 700; margin-right: 6px; }
.antwort .rang:empty { display: none; }
.antwort.gestrichen { opacity: 0.35; text-decoration: line-through; border-style: dashed; cursor: not-allowed; }
.antwort.gestrichen:hover { border-color: var(--gruen-dunkel); }
.tipp-form { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 10px 0 0; }
.tipp-knopf { border-color: var(--gold); color: var(--gold); }
.tipp-knopf:hover:not(:disabled) { border-color: var(--gold); background: rgba(var(--gold-rgb), 0.1); }
.tipp-info { color: var(--gold); margin: 10px 0 0; font-size: 0.95rem; }
.beenden { margin-top: 20px; text-align: center; }

.ergebnis h1 { font-size: 1.6rem; }
.ergebnis.gut h1 { color: var(--gruen); }
.ergebnis.schlecht h1 { color: var(--rot); }
.spruch { font-size: 1.15rem; font-style: italic; }
.begruendung { white-space: pre-line; }
.ergebnis ul, .ergebnis ol { margin: 0; }
#weiter { margin-top: 20px; }

/* Kopfzeile + Menue (seit 15.10.2026): Reiter mit Symbolen, Konto als Chip.
   Unter 1200 px (Admin-Menue braucht ca. 1150 px) klappt das Menue hinter den Knopf «Menü» (lernen.js setzt .kopf.offen). */
.kopf {
  font-size: 16px;  /* Kopfzeile bleibt gleich gross, nur der Inhalt folgt A- / A+ (em statt rem darin) */
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px;
  padding: 10px 20px; background: var(--kopf-hg); border-bottom: 1px solid var(--rand);
}
.marke {
  display: inline-flex; align-items: center; gap: 10px; white-space: nowrap;
  color: var(--text); font-weight: 700; font-size: 1.1em; text-decoration: none;
}
.marke-zeichen {
  display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px;
  background: rgba(var(--gruen-rgb), 0.1); border: 1px solid rgba(var(--gruen-rgb), 0.35); color: var(--gruen);
}
.marke-zeichen .ic { width: 20px; height: 20px; }
.ic {
  width: 18px; height: 18px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.menue-knopf { display: none; }
.menue-bereich { display: flex; flex: 1; align-items: center; gap: 16px; min-width: 0; }
.menue { display: flex; align-items: center; gap: 4px; }
.menue a {
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 9px;
  color: var(--leise); text-decoration: none; font-weight: 500; white-space: nowrap;
  transition: background-color 0.15s, color 0.15s;
}
.menue a:hover { background: var(--flaeche); color: var(--text); }
.menue a.aktiv { background: rgba(var(--gruen-rgb), 0.1); color: var(--gruen); box-shadow: inset 0 0 0 1px rgba(var(--gruen-rgb), 0.3); }
.menue-trenner { width: 1px; height: 22px; margin: 0 8px; background: var(--rand); }
.menue-trenner span { display: none; }
.konto { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.konto form { margin: 0; }
.konto-chip {
  display: inline-flex; align-items: center; gap: 10px; padding: 4px 14px 4px 4px; border-radius: 999px;
  background: var(--flaeche); border: 1px solid var(--rand); color: var(--text); text-decoration: none;
}
.konto-chip:hover, .konto-chip.aktiv { border-color: var(--gruen-dunkel); }
.avatar {
  display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; flex: none;
  background: var(--gruen-dunkel); color: var(--auf-dunkelgruen); font-weight: 700; font-size: 0.9em;
}
.konto-text { display: flex; flex-direction: column; line-height: 1.15; }
.konto-text b { font-size: 0.9em; font-weight: 600; }
.konto-text small { font-size: 0.72em; color: var(--leise); }
.konto-hinweis { display: none; }
.symbol-knopf {
  display: inline-grid; place-items: center; width: 38px; height: 38px; padding: 0; border-radius: 9px;
  background: none; border: 1px solid transparent; color: var(--leise); font: inherit; text-decoration: none; cursor: pointer;
}
.symbol-knopf:hover { background: var(--flaeche); border-color: var(--rand); color: var(--text); }
.symbol-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.menue a:focus-visible, .konto-chip:focus-visible, .symbol-knopf:focus-visible, .menue-knopf:focus-visible {
  outline: 2px solid var(--gruen); outline-offset: 2px;
}

@media (max-width: 1200px) {
  .kopf { padding: 8px 12px; gap: 0; }
  .menue-knopf {
    display: inline-flex; margin-left: auto; padding: 8px 14px; border-radius: 10px; cursor: pointer;
    background: var(--flaeche); border: 1px solid var(--rand); color: var(--text); font: inherit; font-weight: 600;
  }
  .menue-knopf span { display: inline-flex; align-items: center; gap: 8px; }
  .menue-knopf .wenn-offen, .kopf.offen .menue-knopf .wenn-zu { display: none; }
  .kopf.offen .menue-knopf .wenn-offen { display: inline-flex; }
  .kopf.offen .menue-knopf { border-color: var(--gruen-dunkel); color: var(--gruen); }
  .menue-bereich {
    display: none; flex-basis: 100%; flex-direction: column; align-items: stretch; gap: 12px;
    margin-top: 10px; padding: 10px 0 4px; border-top: 1px solid var(--rand);
  }
  .kopf.offen .menue-bereich { display: flex; }
  .menue { flex-direction: column; align-items: stretch; gap: 2px; }
  .menue a { padding: 12px; font-size: 1.05em; color: var(--text); }
  .menue a .ic { color: var(--leise); }
  .menue a.aktiv .ic { color: var(--gruen); }
  .menue-trenner { width: auto; height: auto; margin: 10px 12px 2px; background: none; }
  .menue-trenner span {
    display: block; font-size: 0.75em; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--leise);
  }
  .konto {
    flex-wrap: wrap; gap: 8px; margin: 0; padding: 12px; border-radius: 12px;
    background: var(--flaeche); border: 1px solid var(--rand);
  }
  .konto-chip { flex: 1 1 100%; padding: 0 0 4px; border: none; border-radius: 0; background: none; }
  .konto-chip .avatar { width: 38px; height: 38px; font-size: 1em; }
  .konto-text b { font-size: 1em; }
  .konto-text small { font-size: 0.8em; }
  .konto-hinweis { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; color: var(--gruen); font-size: 0.9em; }
  .konto form { flex: 1; display: flex; }
  .symbol-knopf {
    display: inline-flex; flex: 1; justify-content: center; gap: 8px; width: auto; height: auto; padding: 10px;
    background: var(--hg); border-color: var(--rand); color: var(--text);
  }
  .symbol-text { position: static; width: auto; height: auto; overflow: visible; clip: auto; }
}

/* Fragen-Editor */
.pfad { color: var(--leise); margin: 0 0 6px; }
.leise { color: var(--leise); font-size: 0.9rem; }
.kopfzeile { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.kopfzeile h1 { margin: 0; }
.kopfzeile small { color: var(--leise); font-weight: 400; font-size: 1rem; }
.fachlink { display: block; color: var(--text); text-decoration: none; }
.fachlink:hover { border-color: var(--gruen); }
.fachlink h2 { margin: 0; color: var(--text); font-size: 1.2rem; }
.unten { margin-top: 24px; }
.faecher form .knopf { margin-top: 4px; }
.knopf.klein { padding: 6px 12px; font-size: 0.9rem; }
.gefahr { color: var(--rot) !important; }
.knopf.gefahr { border-color: var(--rot-rand); }

input, select, textarea {
  font: inherit; color: var(--text); background: var(--hg);
  border: 1px solid var(--rand); border-radius: 6px; padding: 8px 10px; max-width: 100%;
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--gruen-dunkel); border-color: var(--gruen-dunkel); }
textarea { width: 100%; resize: vertical; }
.zeile { display: flex; flex-wrap: wrap; gap: 8px; }
.zeile input, .zeile select { flex: 1 1 160px; }

.liste { display: flex; flex-direction: column; gap: 8px; }
.eintrag {
  display: flex; gap: 12px; align-items: flex-start;
  background: var(--flaeche); border: 1px solid var(--rand); border-radius: 8px; padding: 10px 12px;
}
.eintrag:target { border-color: var(--gruen); }
.eintrag.fehlerhaft { border-color: var(--rot-rand); }
.eintrag .zustand { font-size: 1.2rem; color: var(--gruen); width: 1.2em; }
.eintrag.fehlerhaft .zustand { color: var(--rot); }
.eintrag .inhalt { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.eintrag .inhalt a { color: var(--text); text-decoration: none; }
.eintrag .inhalt a:hover { text-decoration: underline; }
.details { color: var(--leise); font-size: 0.85rem; }
.fehlertext { color: var(--rot); font-size: 0.85rem; }
.hinweistext { color: var(--gold); font-size: 0.85rem; }
.papierkorb-aktionen { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.papierkorb-aktionen .zeile input { flex: 0 1 180px; min-width: 120px; }

/* Ueberordner (seit 15.10.2026): auf Lern- und Editor-Seite volle Breite, Faecher als Raster darunter */
.ordner-gruppe { grid-column: 1 / -1; border: 1px solid var(--rand); border-radius: 12px; background: rgba(255, 255, 255, 0.015); }
.ordner-gruppe > summary {
  display: flex; align-items: center; gap: 10px; padding: 12px 16px; cursor: pointer; list-style: none;
  font-weight: 700; font-size: 1.1rem;
}
.ordner-gruppe > summary::-webkit-details-marker { display: none; }
.ordner-gruppe > summary::before { content: "▸"; color: var(--gruen); transition: transform 0.15s; }
.ordner-gruppe[open] > summary::before { transform: rotate(90deg); }
.ordner-gruppe > summary .ic { color: var(--gruen); }
.ordner-gruppe > summary .leise { font-weight: 400; margin-left: auto; }
.ordner-gruppe > .faecher { padding: 0 16px 16px; }
.ordner-gruppe .ordner-gruppe { background: none; }

/* Faecher ordnen */
.ordnen-leiste { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 14px; }
.ordnen-leiste .neuer-ordner { flex: 1 1 320px; }
.ungespeichert { color: var(--gold); font-weight: 600; margin-left: auto; }
.baum { list-style: none; margin: 0; padding: 0; }
.baum .baum { margin: 6px 0 0 22px; padding-left: 10px; border-left: 2px solid var(--rand); min-height: 14px; }
.baum .baum:empty { min-height: 36px; border: 1px dashed var(--rand); border-radius: 8px; }
.baum .baum:empty::before { content: "leer – Fächer hierher ziehen"; display: block; padding: 7px 12px; color: var(--leise); font-size: 0.85rem; }
.knoten { margin: 6px 0; }
.knoten-zeile {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 10px;
  background: var(--flaeche); border: 1px solid var(--rand); border-radius: 10px;
}
.knoten.ordner > .knoten-zeile { border-color: var(--gruen-dunkel); }
.knoten.ordner > .knoten-zeile .ic { color: var(--gruen); }
.griff { cursor: grab; touch-action: none; user-select: none; color: var(--leise); font-size: 1.2rem; padding: 0 4px; }
.aktionen-knoten { margin-left: auto; display: flex; flex-wrap: wrap; gap: 4px; }
.mini {
  font: inherit; font-size: 0.8rem; padding: 4px 8px; border-radius: 6px; cursor: pointer;
  background: var(--knopf-hg); color: var(--text); border: 1px solid var(--rand);
}
.mini:hover { border-color: var(--gruen); }
a.mini { text-decoration: none; }
.mini.gefahr { color: var(--rot); }
.verschieben-auswahl { font: inherit; font-size: 0.85rem; max-width: 260px; }
.zieh-platz > .knoten-zeile { opacity: 0.4; border-style: dashed; border-color: var(--gruen); }
.zieh-gewaehlt > .knoten-zeile { box-shadow: 0 0 0 2px var(--gruen); }
@media (max-width: 760px) {
  .baum .baum { margin-left: 10px; padding-left: 8px; }
  .aktionen-knoten { width: 100%; margin-left: 0; }
}

/* Faecher-Uebersicht (seit 15.10.2026): kompakte Karten mit Status-Schild, Suche */
.fach-kopfzeile { align-items: flex-end; }
.fach-werkzeuge { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.fach-werkzeuge input { min-width: 220px; padding: 9px 12px; }
.faecher:has(> .fach-karte) { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.fach-karte { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 14px 16px; border-left: 4px solid var(--rand); }
.fach-karte[hidden], .ordner-gruppe[hidden] { display: none; }  /* sonst ueberschreibt display:flex die Suche */
.fach-karte.laeuft { border-left-color: var(--gold); }
.fach-karte.fertig { border-left-color: var(--gruen-dunkel); }
.fach-kopf { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.fach-kopf h2 { font-size: 1.1rem; line-height: 1.3; overflow-wrap: anywhere; }
.fach-meta { margin: 0; color: var(--leise); font-size: 0.9rem; }
.fach-karte .fortschritt { margin: 4px 0 0; }
.fach-karte .warnungen { margin: 0; }
.fach-aktionen { display: flex; gap: 8px; align-items: stretch; margin-top: auto; padding-top: 8px; }
.fach-aktionen > .knopf, .fach-aktionen .haupt-form { flex: 1; }
.fach-aktionen .haupt-form .knopf { width: 100%; margin: 0; }
.fach-aktionen form { display: flex; margin: 0; }
.fach-aktionen .knopf { padding: 10px 14px; }
.karten-symbol {
  display: grid; place-items: center; width: 44px; flex: none; border-radius: 8px; cursor: pointer;
  background: var(--knopf-hg); border: 1px solid var(--rand); color: var(--leise); padding: 0; font: inherit;
}
.karten-symbol:hover { border-color: var(--gruen); color: var(--gruen); }
.chip {
  display: inline-block; flex: none; padding: 2px 9px; border-radius: 999px; font-size: 0.78rem; font-weight: 700;
  white-space: nowrap; border: 1px solid currentColor; line-height: 1.5;
}
.chip-neu { color: var(--leise); }
.fehler-form { display: flex; margin: 2px 0 0; }
.fehler-knopf { flex: 1; padding: 8px 12px; font-size: 0.92rem; color: var(--gold); border-color: rgba(var(--gold-rgb), 0.6); }
.fehler-knopf:hover:not(:disabled) { border-color: var(--gold); background: rgba(var(--gold-rgb), 0.08); }
.chip-laeuft { color: var(--gold); background: rgba(var(--gold-rgb), 0.08); }
.chip-gut { color: var(--gruen); background: rgba(var(--gruen-rgb), 0.08); }
.chip-mittel { color: var(--gold); }
.chip-schwach { color: var(--rot); }
.ordner-gruppe > summary .chip { margin-right: 6px; font-size: 0.72rem; }
@media (max-width: 760px) {
  .fach-werkzeuge { width: 100%; }
  .fach-werkzeuge input { flex: 1 1 100%; min-width: 0; }
  .fach-werkzeuge .knopf { flex: 1; }
}

/* Pruefungsmodus (seit 15.10.2026) */
.pruefung-kopf {
  display: flex; flex-wrap: wrap; gap: 4px 20px; color: var(--leise); margin: 0 0 12px;
  padding: 8px 12px; border: 1px solid var(--rand); border-radius: 10px; background: var(--flaeche);
}
.pruefung-kopf b { color: var(--text); }
.pruefung-nummern { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
.pruefung-nummern .nummer {
  min-width: 36px; height: 36px; border-radius: 8px; cursor: pointer; font: inherit; font-weight: 600;
  background: var(--knopf-hg); color: var(--leise); border: 1px solid var(--rand);
}
.pruefung-nummern .nummer.beantwortet { color: var(--gruen); border-color: var(--gruen-dunkel); background: rgba(var(--gruen-rgb), 0.08); }
.pruefung-nummern .nummer.aktuell { outline: 2px solid var(--gold); outline-offset: 1px; color: var(--text); }
#antwort-form .pruefung-steuerung { grid-template-columns: 1fr 1fr 1.4fr; }
.pruefung-abgabe { display: flex; justify-content: flex-end; margin-top: 16px; }
.pruefung-abgabe .abgeben { background: var(--gold); border-color: var(--gold); color: var(--auf-gruen); }
.pruefung-regeln { margin: 0 0 16px; padding-left: 20px; line-height: 1.7; }
.pruefung-anzahl { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.pruefung-offen { display: block; padding: 8px 12px; font-size: 0.92rem; color: var(--gold); border-color: rgba(var(--gold-rgb), 0.6); }
.richtig-antwort { color: var(--gruen); }
.zeilen-aktionen { display: flex; gap: 14px; align-items: center; }
.zeilen-aktionen form { margin: 0; }
@media (max-width: 760px) {
  /* hoehere Spezifitaet als die allgemeine Handy-Regel fuer #antwort-form .steuerung (weiter unten) */
  #antwort-form[data-pruefung] .steuerung { grid-template-columns: 1fr 1fr 1.3fr; gap: 8px; }
  #antwort-form[data-pruefung] .steuerung .knopf { padding: 14px 4px; font-size: 0.92rem; }
  #antwort-form[data-pruefung] .pruefung-abgabe { order: 3; margin-top: 14px; }
  .pruefung-abgabe .abgeben { width: 100%; }
}

/* Fragen importieren (seit 15.10.2026) */
.import-schritte { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); align-items: start; }
.import-schritte h2 { display: flex; align-items: center; gap: 10px; margin-top: 0; color: var(--text); font-size: 1.1rem; }
.schritt {
  display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; flex: none;
  background: rgba(var(--gruen-rgb), 0.1); border: 1px solid rgba(var(--gruen-rgb), 0.35); color: var(--gruen); font-size: 0.9rem;
}
.import-zahlen { display: flex; flex-wrap: wrap; gap: 12px; margin: 4px 0 16px; }
.kennzahl { padding: 10px 16px; border-radius: 10px; background: var(--flaeche); border: 1px solid var(--rand); color: var(--leise); }
.kennzahl b { display: block; font-size: 1.6rem; line-height: 1.1; color: var(--text); }
.kennzahl.gut b { color: var(--gruen); }
.kennzahl.schlecht b { color: var(--rot); }
.import-knoepfe { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 16px; }
.aktionen { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }

.formular { display: flex; flex-direction: column; gap: 16px; }
.formular fieldset { border: 1px solid var(--rand); border-radius: 10px; padding: 12px 16px; margin: 0; }
.formular legend { color: var(--leise); padding: 0 6px; }
.feld { display: flex; flex-direction: column; gap: 4px; color: var(--leise); }
.feld input, .feld textarea { color: var(--text); }
.feld.schmal input { max-width: 260px; }
.option { display: block; margin: 6px 0; }
.option.warnung { color: var(--gold); }
.vorschau { display: block; max-width: 100%; max-height: 220px; border-radius: 6px; }
.antwortzeile { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; }
.antwortzeile .nr { width: 1.6em; text-align: right; color: var(--leise); }
.antwortzeile input { flex: 1; min-width: 0; }
.richtig-knopf {
  font: inherit; font-size: 0.9rem; cursor: pointer; white-space: nowrap; min-width: 8.5em;
  background: var(--knopf-hg); color: var(--leise); border: 1px solid var(--rand); border-radius: 6px; padding: 8px 10px;
}
.richtig-knopf.gewaehlt { background: var(--gruen); color: var(--auf-gruen); border-color: var(--gruen); font-weight: 600; }
.knopfleiste { display: flex; flex-wrap: wrap; gap: 10px; }

.nur-handy { display: none; }

/* Geraete ohne Maus/Tastatur: Tasten-Hinweise (Esc, Enter, Ziffern) ausblenden */
@media (hover: none) {
  kbd, .antwort .taste { display: none; }
  .antwort { padding-top: 10px; }
}

/* ---- Handy ---- */
@media (max-width: 760px) {
  main { padding: 12px; }
  h1 { font-size: 1.3rem; }
  .nur-handy { display: inline; }
  .nur-gross, kbd, .antwort .taste { display: none; }
  .antwort { padding-top: 10px; }
  .bild { max-height: 32vh; }

  .statusleiste { padding: 6px 12px; gap: 2px 14px; font-size: 0.9rem; }
  .statusleiste span { white-space: nowrap; }

  /* Lernen: erst die Antworten, «Prüfen» gross unten in Daumen-Reichweite */
  .frage.karte { padding: 14px; margin-bottom: 12px; }
  .fragetext { font-size: 1.1rem; }
  #antwort-form { display: flex; flex-direction: column; }
  .antworten { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .antwort { min-height: 64px; font-size: 1rem; }
  #antwort-form .steuerung {
    order: 2; position: sticky; bottom: 0; z-index: 5; grid-template-columns: 1fr 2fr; gap: 10px;
    margin: 12px -12px 0; padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
    background: var(--hg); border-top: 1px solid var(--rand);
  }
  .steuerung .knopf { padding: 14px 10px; }
  #antwort-form .steuerung:has(#ueberspringen) { grid-template-columns: 1fr 1fr 1.4fr; gap: 8px; }
  #antwort-form .steuerung:has(#ueberspringen) .knopf { padding: 14px 4px; font-size: 0.92rem; }
  .beenden { display: flex; flex-direction: column; gap: 14px; font-size: 0.95rem; }

  /* Ergebnis: «Weiter» als breiter Knopf, bleibt unten sichtbar */
  .ergebnis h1 { font-size: 1.35rem; }
  .spruch { font-size: 1.05rem; }
  #weiter { display: block; position: sticky; bottom: calc(12px + env(safe-area-inset-bottom)); padding: 16px; }

  /* Listen, Formulare, Tabellen */
  .eintrag { flex-wrap: wrap; }
  .aktionen { width: 100%; justify-content: flex-start; }
  .formular fieldset { padding: 10px 12px; }
  .richtig-knopf { min-width: 7.2em; font-size: 0.85rem; padding: 8px 6px; }
  .antwortzeile .nr { width: 1.2em; }
  #frage-form .knopfleiste {
    position: sticky; bottom: 0; z-index: 5; margin: 0 -12px; padding: 8px 12px calc(8px + env(safe-area-inset-bottom));
    background: var(--hg); border-top: 1px solid var(--rand); flex-wrap: nowrap; gap: 8px;
  }
  #frage-form .knopfleiste .knopf { padding: 12px 8px; font-size: 0.92rem; white-space: nowrap; }
  #frage-form .knopfleiste .knopf.haupt { flex: 1.4 1 auto; }
  .knopfleiste .knopf { flex: 1 1 auto; }
  .tabelle { font-size: 0.85rem; }
  .tabelle th, .tabelle td { padding: 6px 8px; }
  .feld.schmal input { max-width: 100%; }
}

/* Weiter, wo du aufgehört hast (Startseite, seit 24.10.2026) */
.weiter-karte { padding: 14px 16px; border-left: 4px solid var(--gruen); background: rgba(var(--gruen-rgb), 0.06); }
.weiter-titel { margin: 0 0 4px; color: var(--gruen); font-size: 0.85rem; font-weight: 700; letter-spacing: 0.02em; }
.weiter-karte h2 { font-size: 1.15rem; margin: 0 0 8px; color: var(--text); }
.weiter-karte h2 .chip { margin-left: 6px; vertical-align: middle; }
.weiter-karte .fortschritt { max-width: 360px; }
.weiter-karte .knopf.haupt { margin-top: 4px; }
.weiter-andere { margin: 12px 0 0; font-size: 0.9rem; }

/* Gemischt lernen (Karte auf der Startseite + Auswahlseite) */
.gemischt-karte { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px;
  padding: 14px 16px; border-left: 4px solid var(--gruen); }
.gemischt-karte.laeuft { border-left-color: var(--gold); }
.gemischt-karte h2 { font-size: 1.1rem; margin: 0 0 4px; color: var(--text); }
.gemischt-karte .fach-aktionen { margin: 0; padding: 0; flex-wrap: wrap; }
.gemischt-baum, .gemischt-baum ul { list-style: none; margin: 0; padding: 0; }
.gemischt-baum ul { padding-left: 24px; border-left: 1px solid var(--rand); margin-left: 7px; }
.gemischt-baum .option { margin: 4px 0; }
.frage-herkunft { margin: 0 0 4px; font-size: 0.9rem; }

/* Einladungscodes */
.einladung-inhalt { display: flex; flex-wrap: wrap; gap: 20px; align-items: center; }
.einladung-inhalt .qr { width: 200px; height: 200px; flex: none; border-radius: 6px; }
.einladung-link { overflow-wrap: anywhere; }
.einladung-code { font-size: 1.8rem; font-weight: 700; letter-spacing: 0.12em; font-family: ui-monospace, Consolas, monospace; margin: 4px 0; }
@media print {
  .kopf, .statusleiste, .nicht-drucken, .hinweis { display: none !important; }
  body, main, .einladung-karte { background: #fff !important; color: #000 !important; border: 0 !important; }
  .einladung-karte a { color: #000 !important; }
}

/* Eigene Rueckfrage (ersetzt window.confirm, siehe editor.js) */
.lt-dialog { max-width: min(440px, calc(100vw - 32px)); padding: 20px; border: 1px solid var(--rand); border-radius: 12px;
  background: var(--flaeche); color: var(--text); }
.lt-dialog::backdrop { background: rgba(0, 0, 0, 0.6); }
.lt-dialog p { margin: 0 0 16px; line-height: 1.5; }
.lt-dialog .knopfleiste { justify-content: flex-end; }

/* Gruppen (Liste + Gruppenseite), gestaltet 15.10.2026 */
.gruppen-einleitung { max-width: 760px; margin-top: 0; }
.gruppen-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; margin-top: 16px; }
.gruppen-karte { display: flex; align-items: center; gap: 14px; margin: 0; padding: 16px; color: var(--text); text-decoration: none;
  border-left: 4px solid var(--gruen-dunkel); transition: border-color 0.15s, transform 0.15s; }
a.gruppen-karte:hover { border-color: var(--gruen); transform: translateY(-1px); }
.gruppen-karte-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1; }
.gruppen-karte-text b { font-size: 1.1rem; overflow-wrap: anywhere; }
.gruppen-zahlen { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.gruppen-pfeil { font-size: 1.6rem; color: var(--leise); }
.gruppen-symbol { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 12px;
  background: rgba(var(--gruen-rgb), 0.1); color: var(--gruen); font-weight: 700; font-size: 1.2rem;
  box-shadow: inset 0 0 0 1px rgba(var(--gruen-rgb), 0.3); }
.gruppen-symbol.gross { width: 60px; height: 60px; font-size: 1.6rem; border-radius: 16px; }
.gruppen-neu { border-left: 2px dashed var(--rand); border-style: dashed; background: transparent; }
.gruppen-neu .formular { width: 100%; gap: 8px; }
.gruppen-neu h2 { margin: 0 0 4px; color: var(--text); }

.gruppe-kopf { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; padding: 18px 20px; }
.gruppe-kopf-text { flex: 1; min-width: 200px; }
.gruppe-kopf-text h1 { margin: 0; }
.gruppe-kopf-text p { margin: 2px 0 0; }
.gruppe-kopf-aktionen { display: flex; gap: 8px; align-items: flex-start; }
.gruppe-kopf-aktionen form { margin: 0; }
.gruppe-umbenennen { position: relative; }
.gruppe-umbenennen > summary { list-style: none; }
.gruppe-umbenennen > summary::-webkit-details-marker { display: none; }
.gruppe-umbenennen[open] > summary { border-color: var(--gruen); }
.gruppe-umbenennen > form { position: absolute; right: 0; top: calc(100% + 6px); z-index: 5; width: min(320px, 80vw);
  padding: 14px; background: var(--flaeche); border: 1px solid var(--rand); border-radius: 12px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); }

.gruppe-spalten { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 16px; align-items: start; }
.gruppe-spalte { margin: 0; padding: 0; overflow: hidden; }
.gruppe-spalte form { display: flex; flex-direction: column; }
.gruppe-spalte > form > p, .gruppe-spalte > form > input[type=search] { margin: 0 18px 10px; }
.spalte-kopf { display: flex; align-items: center; gap: 10px; padding: 16px 18px 8px; }
.spalte-kopf h2 { margin: 0; color: var(--text); font-size: 1.1rem; }
.spalte-werkzeuge { margin-left: auto; display: flex; gap: 6px; }
.spalte-liste { max-height: 460px; overflow-y: auto; padding: 4px 18px 12px; border-top: 1px solid var(--rand); }
.spalte-fuss { padding: 12px 18px; border-top: 1px solid var(--rand); background: rgba(0, 0, 0, 0.2); }
.spalte-fuss .knopf { width: 100%; margin: 0; }
.mitglieder-liste { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 6px; }
.mitglieder-liste li[hidden] { display: none; }
.mitglied { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--rand); border-radius: 10px; cursor: pointer; }
.mitglied:hover { border-color: var(--gruen-dunkel); }
.mitglied:has(input:checked) { border-color: var(--gruen-dunkel); background: rgba(var(--gruen-rgb), 0.07); }
.mitglied.inaktiv { opacity: 0.55; }
.mitglied-text { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.mitglied-text b { font-weight: 600; overflow-wrap: anywhere; }
.mitglied-text small { color: var(--leise); font-size: 0.8rem; }
.mitglied .avatar { width: 32px; height: 32px; }
@media (max-width: 800px) {
  .gruppe-spalten { grid-template-columns: 1fr; }
  .spalte-liste { max-height: none; }
}

/* Eigenen Lernfortschritt je Fach loeschen (Seite «Einstellungen»), seit 22.10.2026 */
.fortschritt-liste { list-style: none; margin: 0; padding: 0; }
.fortschritt-liste li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; }
.fortschritt-liste li + li { border-top: 1px solid var(--rand); }
.fortschritt-text { display: flex; flex-direction: column; min-width: 0; overflow-wrap: anywhere; }
.fortschritt-text small { color: var(--leise); font-size: 0.85rem; }

/* Eigenes Konto loeschen (Seite «Einstellungen») */
.konto-loeschen { border-color: rgba(var(--rot-rgb), 0.35); }
.konto-loeschen summary { cursor: pointer; list-style: none; }
.konto-loeschen summary::-webkit-details-marker { display: none; }
.konto-loeschen summary h2 { display: inline; margin: 0; color: var(--rot); }
.konto-loeschen summary::after { content: " ▸"; color: var(--rot); }
.konto-loeschen details[open] summary::after { content: " ▾"; }

/* Darstellung (Schrift + Farbe), seit 15.10.2026: PC = Aufklapp-Fenster am Knopf «Aa», Handy = offen im Menue */
.darstellung { position: relative; }
.darstellung-knopf { font-weight: 700; font-size: 0.95em; }
.darstellung-knopf[aria-expanded="true"] { background: var(--flaeche); border-color: var(--gruen-dunkel); color: var(--gruen); }
.darstellung-inhalt { position: absolute; right: 0; top: calc(100% + 8px); z-index: 20; width: 280px; padding: 12px 14px;
  background: var(--flaeche); border: 1px solid var(--rand); border-radius: 12px; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35); }
.darstellung-titel { margin: 0 0 8px; font-size: 0.75em; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--leise); }
.darstellung-zeile { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 0; color: var(--text); }
.darstellung-zeile + .darstellung-zeile { border-top: 1px solid var(--rand); }
.schrift, .farbwahl { display: inline-flex; padding: 3px; gap: 2px; border: 1px solid var(--rand); border-radius: 999px; background: var(--hg); }
.schrift button, .farbwahl button { padding: 6px 12px; border: 0; border-radius: 999px; background: none; color: var(--leise);
  font: inherit; font-size: 0.9em; font-weight: 600; cursor: pointer; }
.schrift button:hover:not(:disabled), .farbwahl button:hover { color: var(--text); }
.schrift button:disabled { opacity: 0.35; cursor: default; }
.farbwahl button.aktiv { background: var(--gruen-dunkel); color: var(--auf-dunkelgruen); }
@media (max-width: 1200px) {
  .darstellung { flex: 1 1 100%; }
  .darstellung-knopf { display: none; }
  .darstellung-inhalt { display: block !important; position: static; width: auto; padding: 4px 0 8px; background: none; border: 0;
    border-top: 1px solid var(--rand); border-bottom: 1px solid var(--rand); border-radius: 0; box-shadow: none; }
  .darstellung-titel { margin: 8px 0 4px; }
  .darstellung-zeile { padding: 8px 0; }
  .schrift button, .farbwahl button { padding: 8px 14px; font-size: 1em; }
}

/* Hilfe / Anleitungen (seit 24.10.2026, wie im LVS: Übersicht, ein Thema, alle zum Drucken) */
.hilfe-karte-titel { margin-top: 0; color: var(--text); }
.app-schritte { margin: 6px 0 0; padding-left: 22px; color: var(--leise); }
.app-schritte li { margin: 3px 0; }
.app-link { word-break: break-all; }
.hilfe-werkzeuge { flex-wrap: wrap; gap: 10px; margin: 12px 0; }
.hilfe-werkzeuge input[type=search] { flex: 1 1 240px; max-width: 24rem; }
.hilfe-liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.hilfe-kachel { display: flex; flex-direction: column; gap: 4px; margin: 0; color: var(--text); text-decoration: none;
  border-left: 4px solid var(--gruen-dunkel); transition: border-color 0.15s; }
.hilfe-kachel:hover { border-color: var(--gruen); }
.hilfe-kachel b { color: var(--gruen); }
.hilfe-kachel[hidden] { display: none; }
.hilfe-inhalt { max-width: 860px; line-height: 1.55; }
.hilfe-inhalt h1 { margin-bottom: 14px; }
.hilfe-inhalt h3 { margin: 22px 0 6px; color: var(--gruen); font-size: 1.05rem; }
.hilfe-inhalt ol, .hilfe-inhalt ul { margin: 4px 0 10px; padding-left: 1.4rem; }
.hilfe-inhalt li { margin-bottom: 4px; }
.hilfe-inhalt p { margin: 6px 0 10px; }
.hilfe-inhalt .hilfe-kurz { background: rgba(var(--gruen-rgb), 0.08); border-left: 4px solid var(--gruen); padding: 10px 14px; border-radius: 6px; }
.hilfe-inhalt .hilfe-achtung { background: rgba(var(--gold-rgb), 0.1); border-left: 4px solid var(--gold); padding: 10px 14px; border-radius: 6px; margin: 10px 0; }
.hilfe-inhalt table { border-collapse: collapse; width: 100%; margin: 6px 0 12px; font-size: 0.95rem; }
.hilfe-inhalt th, .hilfe-inhalt td { border: 1px solid var(--rand); padding: 6px 9px; text-align: left; vertical-align: top; }
.hilfe-inhalt th { color: var(--leise); }
.hilfe-inhalt .knopfname { font-weight: 600; white-space: nowrap; }
.hilfe-inhalt code { font-family: ui-monospace, Consolas, monospace; background: var(--hg); padding: 0 4px; border-radius: 4px; }
.hilfe-blaettern { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
@media (max-width: 760px) {
  .hilfe-inhalt .knopfname { white-space: normal; }
  .hilfe-inhalt table { font-size: 0.85rem; }
}
@media print {
  .hilfe-inhalt { background: #fff !important; color: #000 !important; border: 0 !important; padding: 0 !important; max-width: none; }
  .hilfe-inhalt h1, .hilfe-inhalt h3, .hilfe-inhalt a { color: #000 !important; }
  .hilfe-inhalt th, .hilfe-inhalt td { border-color: #999 !important; color: #000 !important; }
  .hilfe-inhalt .hilfe-kurz, .hilfe-inhalt .hilfe-achtung { background: #f2f2f2 !important; border-left-color: #666 !important; }
  .hilfe-inhalt code { background: #eee !important; }
  .hilfe-seitenumbruch { break-before: page; }
  .hilfe-inhalt h3 { break-after: avoid; }
  .hilfe-inhalt table, .hilfe-inhalt .hilfe-kurz, .hilfe-inhalt .hilfe-achtung { break-inside: avoid; }
  body, main { background: #fff !important; color: #000 !important; }
}

/* Design der Lernseite seit 24.10.2026 (lernen.html / ergebnis.html / _status.html, Klassen v2-…):
   Retro bleibt (schwarz/grün), Antworten als Zeilen mit Buchstaben, Ergebnis direkt auf den Antworten.
   Die Kachel-Regeln weiter oben (.antworten, .antwort) braucht weiterhin die Prüfung. */
.v2-status { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 22px; padding: 8px 16px;
  background: var(--flaeche); border-bottom: 1px solid var(--rand); color: var(--leise); }
.v2-status b { color: var(--text); }
.v2-fortschritt { display: flex; align-items: center; gap: 10px; flex: 1 1 220px; max-width: 420px; white-space: nowrap; }
.v2-balken { flex: 1; height: 8px; background: var(--hg); border: 1px solid var(--rand); border-radius: 4px; overflow: hidden; }
.v2-balken span { display: block; height: 100%; background: var(--gruen); }
.v2-pause { margin-left: auto; color: var(--leise); text-decoration: none; border: 1px solid var(--rand); border-radius: 6px;
  padding: 3px 10px; white-space: nowrap; }
.v2-pause:hover { color: var(--gruen); border-color: var(--gruen-dunkel); }

.v2-frage { display: flex; gap: 14px; align-items: flex-start; }
.v2-frage .fragetext { flex: 1; }
.v2-tipp { background: var(--knopf-hg); color: var(--gold); border: 1px solid var(--gold); border-radius: 8px;
  padding: 6px 12px; font: inherit; font-weight: 600; font-size: 0.9rem; cursor: pointer; white-space: nowrap; }
.v2-tipp:hover { background: rgba(var(--gold-rgb), 0.1); }

.v2 .antworten.v2-zeilen { grid-template-columns: 1fr; gap: 10px; }
.v2 .v2-zeilen .antwort { display: flex; align-items: center; gap: 14px; min-height: 0; padding: 14px 16px; text-align: left; }
.v2-buchstabe { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 6px;
  border: 1px solid currentColor; font-weight: 700; }
.v2-text { flex: 1; }
.v2-marke { flex: none; font-size: 0.85rem; font-weight: 700; text-align: right; }
.v2 #antwort-form .steuerung { margin: 14px 0 0; grid-template-columns: 1fr 2fr; }
.v2 #antwort-form .steuerung:has(#ueberspringen) { grid-template-columns: 1fr 1fr 2fr; }

.v2-band { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; margin: 0 0 14px; padding: 12px 16px;
  border-radius: 8px; border-left: 5px solid; }
.v2-band.falsch { border-color: var(--rot); background: rgba(var(--rot-rgb), 0.1); }
.v2-band.richtig { border-color: var(--gruen); background: rgba(var(--gruen-rgb), 0.08); }
.v2-band strong { font-size: 1.35rem; }
.v2-band.falsch strong { color: var(--rot); }
.v2-band.richtig strong { color: var(--gruen); }
.v2-band .spruch { font-size: 1rem; margin: 0; color: var(--text); }
.v2-ergebnis .antwort { cursor: default; }
.v2-ergebnis .antwort.v2-ist-richtig { background: rgba(var(--gruen-rgb), 0.16); border: 2px solid var(--gruen); color: var(--gruen); }
.v2-ergebnis .antwort.v2-falsch-gewaehlt { border: 2px solid var(--rot); color: var(--rot); }
.v2-ergebnis .antwort.v2-fehlt { border: 2px dashed var(--gruen); color: var(--gruen); }
.v2-ergebnis .antwort.v2-aus { opacity: 0.35; }
.v2-ergebnis .antwort.v2-aus:hover { border-color: var(--gruen-dunkel); }
.v2-begruendung { margin-top: 14px; padding: 12px 16px; border-left: 4px solid var(--gold); background: var(--flaeche); border-radius: 6px; }
.v2-begruendung b { color: var(--gold); display: block; margin-bottom: 2px; }
.v2 .v2-weiter { display: block; width: 100%; margin-top: 14px; padding: 14px; }

@media (max-width: 760px) {
  .v2-status { padding: 6px 12px; gap: 4px 12px; font-size: 0.9rem; }
  .v2-fortschritt { order: 3; flex-basis: 100%; max-width: none; }
  .v2 .v2-zeilen .antwort { padding: 12px; gap: 10px; min-height: 0; }
  .v2-buchstabe { width: 28px; height: 28px; }
  .v2-tipp { padding: 6px 9px; }
  .v2 #antwort-form .steuerung { margin: 12px -12px 0; }
  .v2 #antwort-form .steuerung:has(#ueberspringen) { grid-template-columns: 1fr 1fr 1.4fr; }
  .v2 .v2-weiter { position: sticky; bottom: 10px; }
}

/* Fragen markieren ★ (seit 24.10.2026) */
.v2-stern { background: var(--knopf-hg); color: var(--leise); border: 1px solid var(--rand); border-radius: 8px;
  padding: 6px 12px; font: inherit; font-weight: 600; font-size: 0.9rem; cursor: pointer; white-space: nowrap; }
.v2-stern:hover { color: var(--gold); border-color: var(--gold); }
.v2-stern .an, .v2-stern[aria-pressed="true"] .aus { display: none; }
.v2-stern[aria-pressed="true"] .an { display: inline; }
.v2-stern[aria-pressed="true"] { color: var(--gold); border-color: var(--gold); background: rgba(var(--gold-rgb), 0.12); }
@media (max-width: 760px) { .v2-stern { padding: 6px 9px; } }

/* Feedback-Sprueche (seit 24.10.2026): Reiter, eine Zeile pro Spruch, feste Speichern-Leiste */
.fb-reiter { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0; }
.fb-reiter a { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 8px; text-decoration: none;
  font-weight: 600; color: var(--leise); background: var(--knopf-hg); border: 1px solid var(--rand); }
.fb-reiter a:hover { border-color: var(--gruen-dunkel); }
.fb-reiter-richtig.aktiv { color: var(--gruen); border-color: var(--gruen); background: rgba(var(--gruen-rgb), 0.08); }
.fb-reiter-falsch.aktiv { color: var(--rot); border-color: var(--rot); background: rgba(var(--rot-rgb), 0.08); }
.fb-werkzeuge { display: grid; gap: 10px; }
.fb-neu, .fb-suche { display: flex; gap: 10px; align-items: flex-start; flex-wrap: wrap; }
.fb-neu textarea, .fb-suche input { flex: 1 1 260px; min-width: 0; }
.fb-form textarea { resize: none; overflow: hidden; font: inherit; line-height: 1.4; }
.fb-doppelt-knopf { color: var(--gold); border-color: var(--gold); }
.fb-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.fb-zeile { display: flex; align-items: flex-start; gap: 10px; padding: 6px 8px 6px 4px; border-radius: 8px;
  background: var(--flaeche); border: 1px solid var(--rand); }
.fb-zeile.neu { border-color: var(--gruen-dunkel); }
.fb-zeile.ist-doppelt { border-color: rgba(var(--gold-rgb), 0.7); }
.fb-nr { flex: none; width: 2.6em; padding-top: 7px; text-align: right; color: var(--leise); font-size: 0.85rem; font-variant-numeric: tabular-nums; }
.fb-zeile textarea { flex: 1; min-width: 0; border: 1px solid transparent; background: transparent; color: var(--text); padding: 6px 8px; border-radius: 6px; }
.fb-zeile textarea:hover { border-color: var(--rand); }
.fb-zeile textarea:focus { border-color: var(--gruen-dunkel); background: var(--hg); outline: none; }
.fb-zeile .fb-doppelt { flex: none; margin-top: 7px; }
.fb-weg { flex: none; width: 34px; height: 34px; border-radius: 6px; border: 1px solid transparent; background: none;
  color: var(--leise); font-size: 1.3rem; line-height: 1; cursor: pointer; }
.fb-weg:hover { color: var(--rot); border-color: var(--rot-rand); }
.fb-leiste { position: sticky; bottom: 0; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px;
  margin: 14px -16px 0; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); background: var(--hg); border-top: 1px solid var(--rand); }
.fb-leiste .knopf { margin-left: auto; }
.fb-ungespeichert { color: var(--gold); font-weight: 600; }
@media (max-width: 760px) {
  .fb-reiter a { flex: 1; justify-content: center; padding: 10px 8px; font-size: 0.92rem; }
  .fb-nr { width: 2em; }
  .fb-leiste { margin: 12px -12px 0; }
}
.fb-form [hidden] { display: none !important; }  /* .knopf/.chip/.fb-zeile setzen display - ausgeblendet bleibt ausgeblendet */

/* Wischen am Handy (seit 24.10.2026, lernen.js): Hinweis nur auf Touch-Geraeten */
.wisch-hinweis { display: none; }
@media (pointer: coarse) {
  .wisch-hinweis { display: block; font-size: 0.75rem; font-weight: 400; opacity: 0.75; margin-top: 2px; }
}

/* Handy: Knopfleiste fest am unteren Rand (Daumenzone), auch wenn die Seite kurz ist (seit 24.10.2026).
   «sticky» allein wirkte nur bei langen Seiten - bei kurzen Fragen hingen die Knöpfe in der Mitte. */
@media (max-width: 760px) {
  .v2 #antwort-form .steuerung, #antwort-form[data-pruefung] .steuerung, .v2 .v2-weiter, #weiter {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; margin: 0;
  }
  .v2 #antwort-form .steuerung, #antwort-form[data-pruefung] .steuerung {
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); background: var(--hg); border-top: 1px solid var(--rand);
    box-shadow: 0 -6px 16px rgba(0, 0, 0, 0.25);
  }
  /* Nebenknöpfe klein mit Symbol, «Prüfen» bzw. «Weiter» gross */
  .v2 #antwort-form .steuerung { grid-template-columns: 1fr 2.2fr; gap: 8px; }
  .v2 #antwort-form .steuerung:has(#ueberspringen) { grid-template-columns: 1fr 1fr 2.2fr; }
  .v2 #antwort-form .steuerung .knopf:not(.haupt) { padding: 6px 2px; font-size: 0.78rem; line-height: 1.2; }
  .v2 #antwort-form .steuerung .knopf.haupt { font-size: 1.05rem; padding: 14px 8px; }
  #zuruecksetzen::before, #ueberspringen::before { display: block; font-size: 1.15rem; line-height: 1.1; }
  .v2 #zuruecksetzen::before { content: "↺"; }
  .v2 #ueberspringen::before { content: "⤳"; }
  /* Ergebnis: «Weiter» als Leiste über die ganze Breite */
  .v2 .v2-weiter, #weiter {
    border-radius: 0; padding: 14px 12px calc(14px + env(safe-area-inset-bottom)); box-shadow: 0 -6px 16px rgba(0, 0, 0, 0.25);
  }
  /* Platz, damit der Inhalt nicht hinter der Leiste verschwindet */
  main:has(#antwort-form .steuerung), main:has(#weiter) { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
  /* «Lernfeld abbrechen» braucht man selten: leiser */
  .v2 .beenden .link.gefahr { color: var(--leise) !important; font-size: 0.85rem; }
}

/* Prüfung im Design der Lernseite (seit 24.10.2026, pruefung_frage.html .v2-pruefung) */
.v2-pruefung .pruefung-kopf { margin: 0 0 12px; border-radius: 10px; }
.v2 #antwort-form .pruefung-steuerung { grid-template-columns: 1fr 1fr 2fr; }
.abgabe-offen { font-weight: 400; opacity: 0.8; }
@media (max-width: 760px) {
  .v2-pruefung .pruefung-kopf { margin: -4px 0 10px; }
  /* Nummern als eine Zeile, waagrecht scrollbar (die aktuelle wird ins Bild geschoben, lernen.js) */
  .v2-pruefung .pruefung-nummern { flex-wrap: nowrap; overflow-x: auto; padding: 3px 3px 6px; margin: 0 -3px 8px;
    scrollbar-width: thin; -webkit-overflow-scrolling: touch; }
  .v2-pruefung .pruefung-nummern .nummer { flex: none; }
  .v2 #antwort-form[data-pruefung] .steuerung { grid-template-columns: 1fr 1fr 2.2fr; }
  .v2-pruefung .pruefung-abgabe { margin-top: 16px; }
}

/* Fach-Karten (seit 24.10.2026): Nebenaktionen in .fach-mehr. PC: wie bisher Symbole neben dem Hauptknopf
   (Hüllen per display:contents durchsichtig). Handy: kompakte Zeile, Nebenaktionen hinter «⋯» (lernen.js). */
.fach-extras, .fach-mehr, .mehr-inhalt { display: contents; }
.mehr-knopf, .mehr-text { display: none; }
@media (max-width: 760px) {
  .faecher, .faecher:has(> .fach-karte) { gap: 10px; }
  .fach-karte { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; align-items: center; padding: 12px 14px; }
  .fach-karte > * { grid-column: 1 / -1; }
  .fach-karte > .fach-kopf, .fach-karte > .fach-kopf + .fach-meta { grid-column: 1; }
  .fach-kopf { justify-content: flex-start; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
  .fach-kopf h2 { font-size: 1.02rem; }
  .fach-meta { font-size: 0.82rem; }
  .fach-karte > .fach-aktionen { grid-column: 2; grid-row: 1 / span 2; margin: 0; padding: 0; gap: 6px; }
  .fach-aktionen > .knopf, .fach-aktionen .haupt-form { flex: none; }
  .fach-aktionen .knopf.haupt { padding: 10px 14px; font-size: 0.95rem; white-space: nowrap; }
  /* «⋯» mit aufklappender Liste */
  .fach-mehr { display: flex; position: relative; }
  .mehr-knopf { display: grid; font-size: 1.3rem; line-height: 1; }
  .mehr-inhalt { display: none; position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; min-width: 210px;
    flex-direction: column; gap: 2px; padding: 6px; background: var(--flaeche); border: 1px solid var(--rand); border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35); }
  .fach-mehr.offen .mehr-inhalt { display: flex; }
  .fach-mehr.offen .mehr-knopf { border-color: var(--gruen); color: var(--gruen); }
  .mehr-inhalt form { display: flex; }
  .mehr-inhalt .karten-symbol { display: flex; align-items: center; gap: 12px; width: 100%; padding: 11px 12px;
    border: none; background: none; color: var(--text); text-decoration: none; text-align: left; font-size: 0.95rem; }
  .mehr-inhalt .karten-symbol:hover { background: var(--knopf-hg); }
  .mehr-inhalt .karten-symbol .ic { color: var(--gruen); }
  .mehr-text { display: inline; }
  /* Fehler wiederholen / markierte / Prüfung fortsetzen: kleine Knöpfe in einer Zeile */
  .fach-extras { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
  .fach-extras .fehler-form { margin: 0; }
  .fach-extras .knopf { flex: none; width: auto; margin: 0; padding: 6px 10px; font-size: 0.82rem; }
  /* Gemischt lernen: schmale Zeile */
  .gemischt-karte { flex-wrap: nowrap; padding: 12px 14px; gap: 12px; }
  .gemischt-karte h2 { font-size: 1.02rem; margin: 0 0 2px; }
  .gemischt-karte .fach-meta { font-size: 0.8rem; }
  .gemischt-karte .fach-aktionen { flex-direction: column; flex-wrap: nowrap; flex: none; }
  .gemischt-karte .fach-aktionen .knopf { padding: 9px 12px; font-size: 0.9rem; white-space: nowrap; text-align: center; }
}
@media (max-width: 760px) {
  /* «Weiter, wo du aufgehört hast»: Knopf rechts neben Name und Fortschritt */
  .weiter-karte { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; align-items: center; padding: 12px 14px; }
  .weiter-karte > * { grid-column: 1 / -1; }
  .weiter-karte > h2, .weiter-karte > .fortschritt, .weiter-karte > .fach-meta { grid-column: 1; }
  .weiter-karte > .knopf.haupt { grid-column: 2; grid-row: 2 / span 3; margin: 0; padding: 10px 14px; white-space: nowrap; }
  .weiter-karte h2 { font-size: 1.02rem; margin: 0; }
  .weiter-karte .fach-meta { font-size: 0.82rem; }
  .weiter-titel { font-size: 0.82rem; margin: 0 0 2px; }
  .weiter-andere { margin-top: 8px; font-size: 0.82rem; }
}

/* Handy: Überordner-Köpfe und Gemischt-Auswahl (seit 24.10.2026) - lange Namen brachen unschön um,
   «2 Fächer» stand zweizeilig daneben, die Einrückung frass die Breite der Fach-Karten */
@media (max-width: 760px) {
  .ordner-gruppe > summary { display: grid; grid-template-columns: auto auto minmax(0, 1fr); align-items: center;
    gap: 2px 8px; padding: 10px 12px; font-size: 0.98rem; }
  .ordner-name { line-height: 1.3; overflow-wrap: anywhere; }
  .ordner-gruppe > summary .leise { grid-column: 3; margin: 0; font-size: 0.78rem; white-space: nowrap; }
  .ordner-gruppe > .faecher { padding: 0 8px 8px; }
  .ordner-gruppe .ordner-gruppe { border-radius: 10px; }
  .gemischt-baum .option { display: flex; align-items: flex-start; gap: 8px; line-height: 1.35; }
  .gemischt-baum .option input { flex: none; margin: 0.2em 0 0; }
  .gemischt-baum ul { padding-left: 14px; }
}
@media (max-width: 760px) {
  /* Namen ohne Leerzeichen brechen nach _ . - / um (Filter «umbruch»), mitten im Wort nur als letzte Not */
  .fach-kopf h2, .ordner-name, .faecher h2 { overflow-wrap: break-word; min-width: 0; }
}

/* Navigationsleiste unten am Handy (seit 24.10.2026, zuerst als Test; body.mit-unten-nav, base.html).
   Beim Lernen/in der Prüfung (eigene Knopfleiste unten) bleibt sie weg, dort gibt es weiter den Knopf «Menü». */
.unten-nav { display: none; }
@media (max-width: 760px) {
  body.mit-unten-nav:not(:has(#antwort-form, #weiter)) .unten-nav {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 25;
    padding: 4px 4px env(safe-area-inset-bottom); background: var(--kopf-hg); border-top: 1px solid var(--rand);
  }
  .unten-nav a, .unten-nav button {
    flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 8px 2px 6px;
    background: none; border: none; border-radius: 10px; color: var(--leise); font: inherit; font-size: 0.7rem; font-weight: 600;
    text-decoration: none; cursor: pointer; white-space: nowrap;
  }
  .unten-nav span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
  .unten-nav .ic { width: 22px; height: 22px; }
  .unten-nav a.aktiv, .kopf.offen ~ .unten-nav .unten-mehr { color: var(--gruen); }
  .unten-nav a.aktiv .ic, .kopf.offen ~ .unten-nav .unten-mehr .ic {
    background: rgba(var(--gruen-rgb), 0.12); border-radius: 999px; padding: 2px 14px; width: 50px; box-sizing: border-box; }
  body.mit-unten-nav:not(:has(#antwort-form, #weiter)) main { padding-bottom: calc(80px + env(safe-area-inset-bottom)); }
  /* oben nur noch das Logo; «Mehr» öffnet das Menü als Blatt über der Leiste */
  body.mit-unten-nav:not(:has(#antwort-form, #weiter)) .menue-knopf { display: none; }
  body.mit-unten-nav:not(:has(#antwort-form, #weiter)) .kopf.offen .menue-bereich {
    position: fixed; left: 0; right: 0; bottom: calc(62px + env(safe-area-inset-bottom)); z-index: 24;
    max-height: calc(100vh - 140px); overflow-y: auto; margin: 0; padding: 14px 12px 12px;
    background: var(--kopf-hg); border: 1px solid var(--rand); border-bottom: none; border-radius: 16px 16px 0 0;
    box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.5);
  }
}
@media (max-width: 760px) {
  /* im Blatt nur, was nicht schon in der Leiste steht; Rest der Seite abgedunkelt */
  body.mit-unten-nav:not(:has(#antwort-form, #weiter)) .kopf.offen .menue a[data-in-leiste] { display: none; }
  body.mit-unten-nav:not(:has(#antwort-form, #weiter)) .kopf.offen .menue-trenner { margin-top: 0; }
  body.mit-unten-nav:not(:has(#antwort-form, #weiter)) .kopf.offen .menue-bereich { box-shadow: 0 0 0 100vmax rgba(0, 0, 0, 0.55); }
}

/* Startseite: alle angefangenen Lernfelder beenden (seit 24.10.2026) */
.alle-beenden { margin: 10px 0 0; font-size: 0.85rem; }