/* Quizwerkstatt – angelehnt an site-assets/design.css und appearance.css der Website. */
:root {
  color-scheme: light;
  --paper: #f8f6ee; --ink: #252a27; --muted: #535950; --line: #969b8e; --line-weak: #d3d4c9; --input-line: #777d70;
  --surface: #eeeee4; --hover: #e7e9de; --accent: #77540c; --accent-weich: #f1e6cb; --focus: #365d62;
  --button-bg: #365d62; --button-fg: #ffffff;
  --ok: #2f6b3f; --ok-weich: #e1efdf; --falsch: #9a3b2e; --falsch-weich: #f6e2dd; --warn: #7d5200; --warn-weich: #f5ead0;
  --fam-auswahl: #365d62; --fam-eingabe: #77540c; --fam-struktur: #365a45; --fam-graph: #5b4a7a; --fam-inhalt: #535950;
  --kurve-0: #1f5f8b; --kurve-1: #9a3b2e; --kurve-2: #2f6b3f; --kurve-3: #6b4f9a;
  --font: "Segoe UI", system-ui, -apple-system, sans-serif; --serif: Georgia, "Times New Roman", serif; --radius: 3px;
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --paper: #20211f; --ink: #f3f0e7; --muted: #bebfb6; --line: #62665d; --line-weak: #3a3d36; --input-line: #858a7d;
  --surface: #282b25; --hover: #30342e; --accent: #d8bc83; --accent-weich: #3a3325; --focus: #bedbd9;
  --button-bg: #c1d5d1; --button-fg: #202a28;
  --ok: #b2cab0; --ok-weich: #253329; --falsch: #eba89b; --falsch-weich: #3d2824; --warn: #e2c27d; --warn-weich: #3a3222;
  --fam-auswahl: #a8c6c5; --fam-eingabe: #d8bc83; --fam-struktur: #b2cab0; --fam-graph: #c9baf0; --fam-inhalt: #bebfb6;
  --kurve-0: #8cc4ec; --kurve-1: #f0a595; --kurve-2: #a9d6a0; --kurve-3: #cdb6f0;
}

* { box-sizing: border-box; }
html { scroll-padding-top: 1.5rem; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 1rem/1.55 var(--font); min-height: 100vh; display: flex; flex-direction: column; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; }
[hidden] { display: none !important; }
h1, h2, h3, p, li, td, th, label, figcaption { overflow-wrap: anywhere; }
h1 { font: bold clamp(1.8rem, 4vw, 2.5rem)/1.16 var(--serif); letter-spacing: -.025em; margin: 0 0 1rem; }
h2 { font-size: 1.25rem; font-weight: 600; margin: 0 0 .75rem; line-height: 1.25; }
h3 { font-size: 1.05rem; font-weight: 600; margin: 0 0 .5rem; }
p { margin: .5rem 0; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
.skip-link { position: absolute; top: -100px; left: 1rem; padding: .8rem 1rem; background: var(--button-bg); color: var(--button-fg); z-index: 20; }
.skip-link:focus { top: 1rem; }
.icon { flex: none; }

/* Kopf und Fuß */
.kopf, .seite, .fuss-innen { width: 100%; max-width: 920px; margin: 0 auto; padding-left: 2.25rem; padding-right: 2.25rem; }
.seite.seite-breit { max-width: 1180px; }
.kopf-innen { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.25rem; border-bottom: 1px solid var(--line); padding: 1.4rem 0 1.2rem; }
.marke { font: bold 1.55rem/1.2 var(--serif); letter-spacing: -.03em; text-decoration: none; margin-right: auto; }
.kopf-nav { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem 1.1rem; }
.kopf-nav a, .theme-knopf, .textlink { display: inline-flex; align-items: center; gap: .35rem; min-height: 44px; text-decoration: underline; text-underline-offset: 5px; background: none; border: 0; padding: 0; cursor: pointer; }
.kopf-nav a[aria-current="page"] { color: var(--accent); font-weight: 600; }
.kopf-nav a:hover, .textlink:hover, .theme-knopf:hover { color: var(--accent); }
.seite { flex: 1; padding-top: 1.75rem; padding-bottom: 2rem; min-width: 0; }
.seite:focus { outline: none; }
.fuss { border-top: 1px solid var(--line); color: var(--muted); font-size: .875rem; }
.fuss-innen { display: flex; flex-wrap: wrap; gap: .1rem 1.5rem; padding-top: .8rem; padding-bottom: 1.4rem; }
.fuss a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: underline; text-underline-offset: 4px; }

/* Knöpfe und Felder */
.knopf { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 46px; padding: .6rem 1rem; border: 1px solid var(--input-line); border-radius: var(--radius); background: transparent; color: var(--ink); font-weight: 600; cursor: pointer; text-align: center; text-decoration: none; max-width: 100%; }
.knopf:hover { background: var(--hover); }
.knopf span { min-width: 0; overflow-wrap: anywhere; }
.knopf-haupt { background: var(--button-bg); border-color: var(--button-bg); color: var(--button-fg); }
.knopf-haupt:hover { background: var(--button-bg); filter: brightness(.93); }
.knopf-gefahr { border-color: var(--falsch); color: var(--falsch); }
.knopf-klein { min-height: 40px; padding: .35rem .7rem; font-size: .9375rem; }
.knopf:disabled { opacity: .45; cursor: not-allowed; filter: none; }
.knopf-symbol { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 1px solid var(--line); border-radius: var(--radius); background: transparent; cursor: pointer; flex: none; }
.knopf-symbol:hover { background: var(--hover); }
.knopf-symbol:disabled { opacity: .35; cursor: not-allowed; }
.knopfreihe { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; margin: 1rem 0; }
.knopfreihe-rechts { justify-content: flex-end; }
.feld { display: flex; flex-direction: column; gap: .35rem; margin: 0 0 1rem; min-width: 0; }
.feld > label, .feld-label { font-size: .9rem; font-weight: 600; }
.feld-hilfe { font-size: .85rem; color: var(--muted); margin: 0; }
input[type="text"], input[type="search"], input[type="number"], textarea, select {
  width: 100%; min-width: 0; min-height: 46px; padding: .6rem .75rem; border: 1px solid var(--input-line); border-radius: var(--radius); background: var(--paper); color: var(--ink);
}
textarea { min-height: 6.5rem; resize: vertical; line-height: 1.5; }
input::placeholder, textarea::placeholder { color: var(--muted); opacity: 1; }
input[type="checkbox"], input[type="radio"] { width: 1.25rem; height: 1.25rem; accent-color: var(--button-bg); flex: none; margin: .15rem 0 0; }
.code-eingabe { font: 600 1.35rem/1.2 ui-monospace, "Cascadia Mono", Consolas, monospace; letter-spacing: .06em; text-transform: uppercase; max-width: 22rem; }
.code-anzeige { display: inline-block; font: 700 1.5rem/1.3 ui-monospace, "Cascadia Mono", Consolas, monospace; letter-spacing: .06em; padding: .5rem .9rem; border: 2px dashed var(--accent); border-radius: var(--radius); background: var(--accent-weich); overflow-wrap: anywhere; }

math-field.formelfeld {
  display: block; width: 100%; min-height: 46px; padding: .35rem .6rem; font-size: 1.25rem; border: 1px solid var(--input-line); border-radius: var(--radius);
  background: var(--paper); color: var(--ink); --caret-color: var(--accent); --selection-background-color: var(--accent-weich); --primary: var(--button-bg);
}
math-field.formelfeld:focus-within { outline: 3px solid var(--focus); outline-offset: 2px; }
math-field.formelfeld-klein { display: inline-block; width: 7.5rem; min-height: 42px; font-size: 1.1rem; vertical-align: middle; }
math-field.formelfeld-inline { display: inline-block; width: auto; min-width: 5.5rem; min-height: 40px; font-size: 1.05rem; vertical-align: middle; margin: .15rem .1rem; }
math-field[read-only] { opacity: .85; }
.formel { white-space: nowrap; }
.formel-block { display: block; text-align: center; overflow-x: auto; padding: .35rem 0; white-space: normal; }
.formel-fehler { font-family: ui-monospace, Consolas, monospace; color: var(--falsch); border-bottom: 1px dashed var(--falsch); white-space: normal; }
.rich { overflow-wrap: anywhere; }

/* Allgemeine Bausteine */
.laden { display: flex; align-items: center; gap: .75rem; color: var(--muted); padding: 2rem 0; }
.laden-kreis { width: 22px; height: 22px; border: 3px solid var(--line); border-top-color: var(--accent); border-radius: 50%; animation: drehen 0.9s linear infinite; }
@keyframes drehen { to { transform: rotate(360deg); } }
.meldungen { position: fixed; z-index: 30; right: 1rem; bottom: 1rem; left: 1rem; display: flex; flex-direction: column; align-items: flex-end; gap: .5rem; pointer-events: none; }
.meldung { max-width: min(30rem, 100%); padding: .8rem 1rem; border-radius: var(--radius); border: 1px solid var(--line); background: var(--surface); box-shadow: 0 6px 22px rgba(0, 0, 0, .18); pointer-events: auto; transition: opacity .5s; }
.meldung-fehler { border-color: var(--falsch); background: var(--falsch-weich); }
.meldung-erfolg { border-color: var(--ok); background: var(--ok-weich); }
.meldung-weg { opacity: 0; }
.dialog { width: min(34rem, calc(100vw - 2rem)); max-height: calc(100vh - 2rem); border: 1px solid var(--line); border-radius: 6px; background: var(--paper); color: var(--ink); padding: 1.4rem; }
.dialog-breit { width: min(52rem, calc(100vw - 2rem)); }
.dialog::backdrop { background: rgba(0, 0, 0, .55); }
.dialog-titel { font: bold 1.35rem/1.25 var(--serif); margin: 0 0 .8rem; }
.dialog-aktionen { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .6rem; margin-top: 1.2rem; }
.hinweisbox { border-left: 4px solid var(--accent); background: var(--surface); padding: .8rem 1rem; margin: 1rem 0; border-radius: 0 var(--radius) var(--radius) 0; }
.hinweisbox-warn { border-left-color: var(--warn); background: var(--warn-weich); }
.hinweisbox-fehler { border-left-color: var(--falsch); background: var(--falsch-weich); }
.hinweisbox-ok { border-left-color: var(--ok); background: var(--ok-weich); }
.hinweisbox p:first-child { margin-top: 0; }
.hinweisbox p:last-child { margin-bottom: 0; }
.leer { padding: 1.5rem 0; border-top: 1px solid var(--line); color: var(--muted); }
.leer h2 { color: var(--ink); }
.unterzeile { color: var(--muted); font-size: .9375rem; margin: -.4rem 0 1.4rem; }
.abschnitt { margin: 2rem 0; }
.trenner { border: 0; border-top: 1px solid var(--line); margin: 2rem 0; }
.fehlerliste { margin: .5rem 0 0; padding-left: 1.2rem; }
.fehlerliste li { margin: .2rem 0; }
.chips { display: flex; flex-wrap: wrap; gap: .4rem; margin: .5rem 0; padding: 0; list-style: none; }
.chip { display: inline-flex; align-items: center; gap: .3rem; min-height: 34px; padding: .2rem .65rem; border: 1px solid var(--line); border-radius: 999px; font-size: .85rem; background: transparent; color: var(--ink); cursor: default; max-width: 100%; }
button.chip { cursor: pointer; min-height: 40px; }
button.chip:hover, button.chip[aria-pressed="true"] { background: var(--accent-weich); border-color: var(--accent); }
.siegel { display: inline-flex; align-items: center; gap: .3rem; padding: .05rem .5rem; border-radius: var(--radius); font-size: .8rem; font-weight: 600; border: 1px solid currentColor; white-space: nowrap; }
.siegel-geprueft { color: var(--ok); }
.siegel-ungeprueft { color: var(--muted); }
.siegel-lehrkraft { color: var(--accent); }
.siegel-warn { color: var(--warn); }
.siegel-mitschueler { color: var(--fam-struktur); }
.familie { display: inline-block; width: .7rem; height: .7rem; border-radius: 2px; margin-right: .15rem; vertical-align: middle; }
.familie-auswahl { background: var(--fam-auswahl); }
.familie-eingabe { background: var(--fam-eingabe); }
.familie-struktur { background: var(--fam-struktur); }
.familie-graph { background: var(--fam-graph); }
.familie-inhalt { background: var(--fam-inhalt); }

/* Kurscode und Start */
.start-karte { max-width: 36rem; }
.start-karte .knopfreihe { margin-top: .6rem; }
.einstieg-wege { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1rem; margin: 1.5rem 0; }
.einstieg-weg { border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem 1.1rem; display: flex; flex-direction: column; gap: .5rem; min-width: 0; }
.einstieg-weg p { color: var(--muted); margin: 0 0 .4rem; flex: 1; }

/* Bibliothek */
.bibliothek-kopf { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: .75rem 1rem; margin-bottom: 1.2rem; }
.bibliothek-kopf h1 { margin: 0; }
.filterleiste { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: .75rem; align-items: end; margin-bottom: .6rem; }
.filterleiste .feld { margin: 0; }
.schalter { display: inline-flex; align-items: center; gap: .5rem; min-height: 46px; cursor: pointer; }
.quizliste { list-style: none; padding: 0; margin: 1rem 0 0; border-top: 1px solid var(--line); }
.quizkarte { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .4rem 1rem; align-items: center; padding: 1.05rem .3rem; border-bottom: 1px solid var(--line); }
.quizkarte:hover { background: var(--hover); }
.quizkarte-titel { font-size: 1.1rem; font-weight: 600; margin: 0; line-height: 1.35; }
.quizkarte-titel a { text-decoration: none; }
.quizkarte-titel a::after { content: ""; position: absolute; inset: 0; }
.quizkarte-text { position: relative; min-width: 0; }
.quizkarte-beschreibung { color: var(--muted); font-size: .9rem; margin: .2rem 0; }
.quizkarte-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .2rem .8rem; font-size: .85rem; color: var(--muted); }
.quizkarte .chips { margin: .35rem 0 0; position: relative; }
.sterne-anzeige { white-space: nowrap; }

/* Quiz-Start */
.quiz-kopf .unterzeile { margin-top: -.2rem; }
.modus-wahl { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: .8rem; margin: 1.4rem 0; }
.modus { display: flex; flex-direction: column; align-items: flex-start; gap: .35rem; text-align: left; padding: 1rem 1.1rem; min-height: 7rem; border: 1px solid var(--line); border-radius: var(--radius); background: transparent; cursor: pointer; min-width: 0; }
.modus:hover { background: var(--hover); border-color: var(--accent); }
.modus strong { font-size: 1.05rem; }
.modus span { color: var(--muted); font-size: .9rem; }
.modus:disabled { opacity: .5; cursor: not-allowed; }

/* Spieler */
.spieler-kopf { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem; margin-bottom: .6rem; }
.spieler-titel { font: bold 1.2rem/1.3 var(--serif); margin: 0; min-width: 0; }
.fortschritt { height: 8px; border-radius: 4px; background: var(--surface); border: 1px solid var(--line-weak); overflow: hidden; margin: 0 0 1.2rem; }
.fortschritt-balken { height: 100%; background: var(--accent); width: 0; transition: width .3s; }
.fragenpunkte { display: flex; flex-wrap: wrap; gap: .35rem; margin: 0 0 1rem; padding: 0; list-style: none; }
.fragenpunkt { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line); background: transparent; cursor: pointer; font-size: .85rem; font-weight: 600; }
.fragenpunkt[aria-current="step"] { border: 2px solid var(--accent); }
.fragenpunkt.beantwortet { background: var(--surface); }
.fragenpunkt.richtig { background: var(--ok-weich); border-color: var(--ok); }
.fragenpunkt.falsch { background: var(--falsch-weich); border-color: var(--falsch); }
.frage-karte { border: 1px solid var(--line); border-radius: 6px; padding: 1.3rem 1.4rem; background: var(--paper); min-width: 0; }
.frage-nummer { font-size: .85rem; color: var(--muted); margin: 0 0 .5rem; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; }
.frage-inhalt > * + * { margin-top: .9rem; }
.inhalt-text { font-size: 1.075rem; }
.inhalt-formel { font-size: 1.2rem; }
.inhalt-hinweis { display: flex; gap: .6rem; align-items: flex-start; border-left: 4px solid var(--fam-inhalt); background: var(--surface); padding: .6rem .8rem; border-radius: 0 var(--radius) var(--radius) 0; }
.inhalt-graph, .inhalt-bild { margin: 0; }
.tabelle-rahmen { overflow-x: auto; max-width: 100%; }
.inhalt-tabelle { border-collapse: collapse; min-width: 50%; }
.inhalt-tabelle th, .inhalt-tabelle td { border: 1px solid var(--line); padding: .4rem .8rem; text-align: center; }
.inhalt-tabelle th { background: var(--surface); }
.inhalt-bild img { display: block; max-width: 100%; max-height: 420px; height: auto; border-radius: var(--radius); border: 1px solid var(--line-weak); }
.bild-status { font-size: .8rem; color: var(--warn); margin-top: .3rem; }
.bild-platzhalter { display: flex; align-items: center; gap: .5rem; padding: 1rem; border: 1px dashed var(--line); border-radius: var(--radius); color: var(--muted); }
.graph { display: block; width: 100%; max-width: 560px; height: auto; background: var(--paper); border: 1px solid var(--line-weak); border-radius: var(--radius); touch-action: manipulation; }
.graph-klein { max-width: 260px; }
.graph-raster line { stroke: var(--line-weak); stroke-width: 1; }
.graph-achsen line { stroke: var(--muted); stroke-width: 1.5; }
.graph-zahlen text { fill: var(--muted); font: 12px var(--font); }
.graph-kurve { fill: none; stroke-width: 2.6; stroke-linejoin: round; }
.kurve-0 { stroke: var(--kurve-0); } .kurve-1 { stroke: var(--kurve-1); } .kurve-2 { stroke: var(--kurve-2); } .kurve-3 { stroke: var(--kurve-3); }
.graph-name { font: italic 600 14px var(--serif); }
.kurve-text-0 { fill: var(--kurve-0); } .kurve-text-1 { fill: var(--kurve-1); } .kurve-text-2 { fill: var(--kurve-2); } .kurve-text-3 { fill: var(--kurve-3); }
.graph-punkte circle { fill: var(--ink); }
.graph-punkte text { fill: var(--ink); font: 13px var(--font); }
.graph-marker circle { fill: none; stroke: var(--accent); stroke-width: 3; }
.graph-marker .graph-marker-mitte { fill: var(--accent); stroke: none; }
.graph-loesung circle { fill: none; stroke: var(--ok); stroke-width: 3; stroke-dasharray: 5 4; }
.graph-interaktiv { cursor: crosshair; }

.teile > * + * { margin-top: 1.1rem; }
.teile { margin-top: 1.2rem; }
.teil { border-left: 4px solid var(--line-weak); padding: .2rem 0 .2rem 1rem; min-width: 0; }
.teil-richtig { border-left-color: var(--ok); }
.teil-falsch { border-left-color: var(--falsch); }
.teil-offen { border-left-color: var(--warn); }
.teil-auftrag { font-weight: 600; margin: 0 0 .6rem; }
.teil-ergebnis:empty { display: none; }
.teil-ergebnis { margin-top: .6rem; }
.ergebnis { display: flex; align-items: center; gap: .4rem; font-weight: 600; margin: .3rem 0; }
.ergebnis-richtig { color: var(--ok); }
.ergebnis-falsch { color: var(--falsch); }
.loesung { margin: .35rem 0; padding: .45rem .7rem; background: var(--surface); border-radius: var(--radius); }
.loesung-label { font-size: .8rem; color: var(--muted); font-weight: 600; margin-right: .35rem; }
.optionen { display: flex; flex-direction: column; gap: .45rem; }
.option { display: flex; align-items: flex-start; gap: .7rem; padding: .7rem .85rem; min-height: 50px; border: 1px solid var(--line); border-radius: var(--radius); cursor: pointer; flex-wrap: wrap; }
.option:hover { background: var(--hover); }
.option:has(input:checked) { border-color: var(--accent); background: var(--accent-weich); }
.option-text { flex: 1; min-width: 0; }
.option.ist-richtig { border-color: var(--ok); background: var(--ok-weich); }
.option.ist-falsch { border-color: var(--falsch); background: var(--falsch-weich); }
.gesperrt .option, .gesperrt .option input { cursor: default; }
.fehlergrund { flex-basis: 100%; display: flex; gap: .4rem; align-items: flex-start; font-size: .9rem; color: var(--ink); padding-left: 1.95rem; }
.aussage { font-size: 1.05rem; margin: 0 0 .7rem; padding: .6rem .8rem; border: 1px dashed var(--line); border-radius: var(--radius); }
.segment { display: flex; flex-wrap: wrap; gap: .45rem; }
.segment .option { min-height: 46px; flex: 1 1 9rem; align-items: center; }
.begruendung-titel { font-size: .9rem; font-weight: 600; margin: .9rem 0 .45rem; }
.lueckentext { font-size: 1.075rem; line-height: 2.4; margin: 0; }
.luecke { display: inline-block; vertical-align: middle; margin: 0 .15rem; }
.luecke select, .luecke input { width: auto; min-width: 7rem; max-width: 100%; min-height: 42px; padding: .3rem .5rem; }
.luecke.ist-richtig select, .luecke.ist-richtig input, .luecke.ist-richtig math-field { border-color: var(--ok); border-width: 2px; background: var(--ok-weich); }
.luecke.ist-falsch select, .luecke.ist-falsch input, .luecke.ist-falsch math-field { border-color: var(--falsch); border-width: 2px; background: var(--falsch-weich); }
.luecke-loesung { display: inline-block; font-size: .85rem; color: var(--ok); margin-left: .3rem; line-height: 1.3; }
.gelesen { font-size: .9rem; color: var(--muted); margin: .35rem 0 0; min-height: 1.4em; }
.gelesen-fehler { color: var(--falsch); }
.eingabezeile { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.eingabezeile.ist-richtig math-field { border-color: var(--ok); border-width: 2px; }
.eingabezeile.ist-falsch math-field { border-color: var(--falsch); border-width: 2px; }
.punkt-eingabe { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; font: 1.25rem var(--serif); }
.intervalle { display: flex; flex-direction: column; gap: .6rem; }
.intervall-zeile { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; }
.klammer { width: 44px; height: 46px; font: 700 1.6rem/1 var(--serif); border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); cursor: pointer; }
.unendlich { min-width: 52px; height: 46px; border: 1px solid var(--line); border-radius: var(--radius); background: transparent; cursor: pointer; font-size: 1.05rem; }
.unendlich[aria-pressed="true"] { background: var(--accent-weich); border-color: var(--accent); font-weight: 700; }
.vereinigung { font: 1.35rem var(--serif); padding: 0 .3rem; }
.zuordnen { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1rem; }
.zuordnen-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .45rem; }
.zuordnen-rechts li { display: flex; gap: .6rem; align-items: flex-start; padding: .55rem .7rem; border: 1px solid var(--line-weak); border-radius: var(--radius); background: var(--surface); }
.zuordnen-buchstabe { font-weight: 700; color: var(--accent); min-width: 1.4rem; }
.zuordnen-links li { padding: .55rem .7rem; border: 1px solid var(--line); border-radius: var(--radius); }
.zuordnen-links li.ist-richtig, .gruppen-karte.ist-richtig, .schritt.ist-richtig, .fehlerzeile.ist-richtig { border-color: var(--ok); background: var(--ok-weich); }
.zuordnen-links li.ist-falsch, .gruppen-karte.ist-falsch, .schritt.ist-falsch, .fehlerzeile.ist-falsch { border-color: var(--falsch); background: var(--falsch-weich); }
.buchstaben { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .45rem; }
.buchstabe { width: 44px; height: 44px; border: 1px solid var(--line); border-radius: var(--radius); background: transparent; font-weight: 700; cursor: pointer; }
.buchstabe[aria-checked="true"] { background: var(--button-bg); color: var(--button-fg); border-color: var(--button-bg); }
.gruppen-karten { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .5rem; }
.gruppen-karte { padding: .6rem .75rem; border: 1px solid var(--line); border-radius: var(--radius); }
.gruppen-wahl { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .45rem; }
.gruppen-wahl button { min-height: 42px; padding: .3rem .75rem; border: 1px solid var(--line); border-radius: 999px; background: transparent; cursor: pointer; }
.gruppen-wahl button[aria-checked="true"] { background: var(--button-bg); color: var(--button-fg); border-color: var(--button-bg); }
.reihenfolge { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .45rem; }
.schritt { display: flex; align-items: center; gap: .6rem; padding: .45rem .5rem .45rem .8rem; border: 1px solid var(--line); border-radius: var(--radius); }
.schritt-nr { font-weight: 700; color: var(--accent); min-width: 1.6rem; }
.schritt-text { flex: 1; min-width: 0; }
.schritt-knoepfe { display: flex; gap: .3rem; }
.fehlerzeilen { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .4rem; counter-reset: zeile; }
.fehlerzeile { display: flex; align-items: center; gap: .7rem; padding: .55rem .8rem; border: 1px solid var(--line); border-radius: var(--radius); cursor: pointer; }
.fehlerzeile:has(input:checked) { border-color: var(--accent); background: var(--accent-weich); }
.fehlerzeile-nr { font-size: .8rem; color: var(--muted); min-width: 3.2rem; }
.graphen-wahl { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: .7rem; }
.graphen-wahl .option { flex-direction: column; align-items: stretch; }
.graphen-wahl .graph { max-width: none; }
.selbst-einschaetzung { margin-top: .7rem; }

.spieler-aktionen { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin-top: 1.3rem; }
.spieler-aktionen .abstand { flex: 1; }
.tipps { margin-top: 1rem; display: flex; flex-direction: column; gap: .45rem; }
.tipp { display: flex; gap: .5rem; align-items: flex-start; padding: .55rem .8rem; border-left: 4px solid var(--accent); background: var(--accent-weich); border-radius: 0 var(--radius) var(--radius) 0; }
.erklaerung { margin-top: 1.1rem; padding: .8rem 1rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.erklaerung h3 { margin-bottom: .3rem; }
.zusammenfassung-zahl { font: bold clamp(2.4rem, 8vw, 3.6rem)/1 var(--serif); color: var(--accent); margin: .5rem 0; }
.ergebnisliste { list-style: none; margin: 1rem 0; padding: 0; border-top: 1px solid var(--line); }
.ergebnisliste li { display: flex; align-items: center; gap: .7rem; padding: .7rem .2rem; border-bottom: 1px solid var(--line); }
.ergebnisliste .status-richtig { color: var(--ok); }
.ergebnisliste .status-falsch { color: var(--falsch); }
.ergebnisliste .status-offen { color: var(--warn); }
.sterne-wahl { display: flex; gap: .2rem; }
.stern-knopf { width: 48px; height: 48px; border: 0; background: transparent; color: var(--line); cursor: pointer; }
.stern-knopf[aria-checked="true"], .stern-knopf.gefuellt { color: var(--accent); }
.stern-knopf.gefuellt svg path { fill: currentColor; }

/* Abzeichen und Datenschutz */
.abzeichen-liste { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: .8rem; list-style: none; padding: 0; }
.abzeichen { display: flex; gap: .8rem; align-items: flex-start; padding: .9rem 1rem; border: 1px solid var(--line); border-radius: var(--radius); }
.abzeichen-symbol { width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--surface); color: var(--muted); flex: none; }
.abzeichen.erreicht { border-color: var(--accent); }
.abzeichen.erreicht .abzeichen-symbol { background: var(--accent-weich); color: var(--accent); }
.abzeichen p { margin: .15rem 0 0; color: var(--muted); font-size: .9rem; }
.textseite { max-width: 44rem; }
.textseite li { margin: .35rem 0; }

@media (max-width: 760px) {
  .filterleiste { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .filterleiste .feld-suche { grid-column: 1 / -1; }
  .zuordnen { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
  .kopf, .seite, .fuss-innen { padding-left: 1rem; padding-right: 1rem; }
  .kopf-innen { padding: 1rem 0 .9rem; }
  .marke { font-size: 1.35rem; }
  .frage-karte { padding: 1rem .9rem; }
  .teil { padding-left: .7rem; }
  .quizkarte { grid-template-columns: minmax(0, 1fr); }
  .quizkarte .knopf { justify-self: start; }
  .spieler-aktionen .knopf { flex: 1 1 auto; }
}
@media (max-width: 390px) {
  .filterleiste { grid-template-columns: minmax(0, 1fr); }
  .kopf-nav { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
@media print {
  .kopf, .fuss, .spieler-aktionen, .meldungen, .knopfreihe { display: none !important; }
  .seite { max-width: none; padding: 0; }
}

/* ---------- Editor ---------- */
.marke-zusatz { font: 600 .8rem/1 var(--font); color: var(--accent); letter-spacing: .04em; text-transform: uppercase; margin-left: .3rem; }
.editor-kopf { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .3rem 1rem; }
.editor-titel { font-size: clamp(1.4rem, 3vw, 1.9rem); margin: 0 0 .5rem; }
.speicher-status { font-size: .85rem; color: var(--muted); white-space: nowrap; }
.speicher-status.ok { color: var(--ok); }
.speicher-status.fehler { color: var(--falsch); font-weight: 600; }
.editor-schritte { display: flex; flex-wrap: wrap; gap: .4rem; border-bottom: 1px solid var(--line); padding-bottom: .6rem; margin: .5rem 0 1.2rem; }
.schritt-tab { display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; padding: .4rem .9rem; border: 1px solid var(--line); border-radius: 999px; background: transparent; color: var(--ink); cursor: pointer; font-weight: 600; }
.schritt-tab.aktiv { background: var(--button-bg); color: var(--button-fg); border-color: var(--button-bg); }
.schritt-tab .schritt-nr { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: var(--surface); color: var(--ink); font-size: .8rem; }
.schritt-tab.aktiv .schritt-nr { background: var(--paper); }
.editor-rahmen { max-width: 40rem; }
.pflicht { color: var(--falsch); }
.feld-kopf { display: flex; align-items: center; justify-content: space-between; gap: .5rem; flex-wrap: wrap; }
.rich-vorschau { padding: .5rem .75rem; border: 1px dashed var(--line-weak); border-radius: var(--radius); background: var(--surface); font-size: .95rem; }
.rich-vorschau:empty { display: none; }
.zeilen-felder { display: flex; flex-wrap: wrap; gap: .3rem 1rem; align-items: flex-end; }
.zeilen-felder > .feld { flex: 1 1 12rem; margin-bottom: .6rem; }
.zeilen-felder > .feld-klein, .zeilen-felder > .feld-zahl { flex: 0 1 9rem; }
.zahl-eingabe { max-width: 9rem; }
input[aria-invalid="true"] { border-color: var(--falsch); }
.chip-x { border: 0; background: transparent; color: var(--muted); font-size: 1.1rem; line-height: 1; min-width: 28px; min-height: 28px; cursor: pointer; margin-left: .1rem; }
.chip-x:hover { color: var(--falsch); }
.editor-fragen { display: grid; grid-template-columns: 15rem minmax(0, 1fr); gap: 1.5rem; align-items: start; }
.fragen-seite { position: sticky; top: 1rem; }
.fragen-nav { list-style: none; margin: 0 0 .8rem; padding: 0; display: flex; flex-direction: column; gap: .3rem; max-height: 60vh; overflow-y: auto; }
.fragen-nav-knopf { display: flex; align-items: center; gap: .6rem; width: 100%; min-height: 48px; padding: .4rem .6rem; border: 1px solid var(--line); border-radius: var(--radius); background: transparent; color: var(--ink); text-align: left; cursor: pointer; }
.fragen-nav-knopf.aktiv { border-color: var(--accent); background: var(--accent-weich); }
.fragen-nav-nr { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: var(--surface); font-weight: 700; font-size: .85rem; flex: none; }
.fragen-nav-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .9rem; flex: 1; }
.fragen-nav-fam { display: inline-flex; gap: .15rem; margin-left: .4rem; }
.fragen-bereich { min-width: 0; }
.frage-editor-kopf { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .8rem; }
.frage-editor-kopf h2 { margin: 0; }
.frage-editor-kopf .knopfreihe { margin: 0; }
.editor-abschnitt { border: 1px solid var(--line); border-radius: 6px; padding: 1rem 1.1rem; margin: 0 0 1.2rem; }
.editor-abschnitt > h3 { margin-bottom: .2rem; }
.editor-abschnitt > .feld-hilfe { margin-top: 0; margin-bottom: .8rem; }
.baustein-liste { display: flex; flex-direction: column; gap: .8rem; }
.baustein-karte { border-left: 4px solid var(--line); padding: .6rem 0 .6rem 1rem; }
.baustein-auswahl { border-left-color: var(--fam-auswahl); }
.baustein-eingabe { border-left-color: var(--fam-eingabe); }
.baustein-struktur { border-left-color: var(--fam-struktur); }
.baustein-graph { border-left-color: var(--fam-graph); }
.baustein-inhalt { border-left-color: var(--fam-inhalt); }
.baustein-kopf { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .5rem; flex-wrap: wrap; }
.baustein-kopf h3 { margin: 0; font-size: 1rem; }
.listen-editor { margin: .5rem 0 1rem; }
.listen-kopf { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; }
.listen-kopf h4 { margin: 0 0 .4rem; font-size: .95rem; }
.listen-eintraege { list-style: none; margin: 0 0 .6rem; padding: 0; display: flex; flex-direction: column; gap: .5rem; counter-reset: eintrag; }
.listen-eintrag { display: flex; gap: .6rem; align-items: flex-start; border: 1px solid var(--line-weak); border-radius: var(--radius); padding: .6rem .7rem; background: var(--surface); }
.listen-inhalt { flex: 1; min-width: 0; }
.listen-inhalt .feld { margin-bottom: .5rem; }
.listen-knoepfe { display: flex; flex-direction: column; gap: .3rem; }
.option-zusatz { display: flex; flex-wrap: wrap; gap: .3rem 1rem; align-items: center; }
.richtig-marke { display: inline-flex; align-items: center; gap: .45rem; min-height: 40px; font-weight: 600; cursor: pointer; }
.fehlergrund-feld { flex: 1 1 100%; font-size: .9rem; }
.fehlergrund-feld summary { cursor: pointer; color: var(--muted); min-height: 36px; display: flex; align-items: center; }
.fenster-felder { display: flex; flex-wrap: wrap; gap: .5rem; border: 1px solid var(--line-weak); border-radius: var(--radius); padding: .5rem .8rem; margin: .6rem 0; }
.fenster-felder legend { font-size: .9rem; font-weight: 600; padding: 0 .3rem; }
.fenster-felder .feld { margin: 0; flex: 1 1 5rem; }
.fenster-felder input { max-width: 6rem; }
.graph-editor { display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, 300px); gap: 1rem; align-items: start; }
.graph-editor-kompakt { grid-template-columns: minmax(0, 1fr) 200px; }
.graph-vorschau .graph { max-width: 100%; }
.tabelle-bearbeiten input { min-height: 40px; padding: .3rem .4rem; min-width: 5rem; }
.tabelle-bearbeiten th, .tabelle-bearbeiten td { padding: .2rem; }
.bild-editor .inhalt-bild img { max-height: 260px; }
.intervall-bearbeiten .feld { margin: 0; }
.palette-familie { margin: .8rem 0; }
.palette-familie h3 { display: flex; align-items: center; gap: .4rem; margin-bottom: .1rem; }
.palette { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: .5rem; margin: .5rem 0; }
.palette-knopf { display: flex; flex-direction: column; align-items: flex-start; gap: .15rem; text-align: left; min-height: 64px; padding: .6rem .75rem; border: 1px solid var(--line); border-left-width: 4px; border-radius: var(--radius); background: transparent; color: var(--ink); cursor: pointer; }
.palette-knopf:hover { background: var(--hover); }
.palette-knopf span { font-size: .85rem; color: var(--muted); }
.palette-auswahl { border-left-color: var(--fam-auswahl); }
.palette-eingabe { border-left-color: var(--fam-eingabe); }
.palette-struktur { border-left-color: var(--fam-struktur); }
.palette-graph { border-left-color: var(--fam-graph); }
.palette-inhalt { border-left-color: var(--fam-inhalt); }
.checkliste { list-style: none; margin: 1rem 0; padding: 0; display: flex; flex-direction: column; gap: .4rem; }
.checkliste li { display: flex; align-items: center; gap: .6rem; padding: .5rem .7rem; border-radius: var(--radius); background: var(--surface); }
.checkliste li.ok { color: var(--ok); }
.checkliste li.offen { color: var(--warn); }

/* ---------- Lehrkraftbereich ---------- */
.kacheln { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: .8rem; margin: 1rem 0 2rem; }
.kachel { display: flex; flex-direction: column; gap: .2rem; padding: 1rem 1.1rem; border: 1px solid var(--line); border-radius: 6px; text-decoration: none; min-height: 6rem; justify-content: center; }
.kachel strong { font: bold 2.2rem/1 var(--serif); }
.kachel span { color: var(--muted); font-size: .9rem; }
.kachel-aktiv { border-color: var(--accent); background: var(--accent-weich); }
.tabelle-links th, .tabelle-links td { text-align: left; }
.tabelle-links { width: 100%; }
.code-klein { font-size: 1.05rem; padding: .2rem .5rem; }
.filterleiste-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.meldungsliste { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.meldungsliste li { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem 1rem; padding: .8rem .2rem; border-bottom: 1px solid var(--line); }
.meldungsliste li > div:first-child { flex: 1 1 20rem; }
.meldungsliste li p { flex-basis: 100%; margin: .2rem 0; }
.meldungsliste li.erledigt { opacity: .6; }
.bilder-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 1rem; }
.bild-karte { margin: 0; border: 1px solid var(--line); border-radius: 6px; padding: .6rem; }
.bild-karte img { display: block; width: 100%; max-height: 220px; object-fit: contain; background: #fff; border-radius: var(--radius); }
.bild-karte figcaption { font-size: .85rem; color: var(--muted); margin: .4rem 0; }
.kurs-karten { display: grid; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); gap: 1rem; margin-top: 1rem; }
.kurs-karte { border: 1px solid var(--line); border-radius: 6px; padding: 1rem 1.1rem; }
.kurs-karte h2 { margin-bottom: .3rem; }
.startinhalte { list-style: none; padding: 0; margin: .5rem 0 1rem; }
.startinhalte li { padding: .3rem 0; }
.lk-frage { margin-bottom: 1rem; }
.lk-loesung { margin-top: .8rem; }
.lk-loesung summary { cursor: pointer; font-weight: 600; min-height: 40px; display: flex; align-items: center; }
.lk-json { white-space: pre-wrap; font-size: .8rem; background: var(--surface); padding: .6rem; border-radius: var(--radius); overflow-x: auto; max-width: 100%; }
.statistik-tabelle { width: 100%; }
.statistik-tabelle td, .statistik-tabelle th { text-align: left; vertical-align: top; }
.zeile-auffaellig td { background: var(--warn-weich); }

/* ---------- Live und Beamer ---------- */
.live-kopf h1 { margin-bottom: .2rem; }
.live-warten { text-align: center; padding: 2rem 0; }
.live-timer { height: 12px; margin: .4rem 0 1rem; }
.live-timer-balken { background: var(--accent); transition: none; }
.rangliste { list-style: none; margin: .5rem 0; padding: 0; counter-reset: rang; }
.rangliste li { display: flex; justify-content: space-between; gap: 1rem; padding: .5rem .7rem; border-bottom: 1px solid var(--line-weak); }
.beamer-lobby { text-align: center; padding: 2rem 0; }
.beamer-label { font-size: 1.3rem; color: var(--muted); margin: .3rem 0; }
.beamer-pin { font: bold clamp(3rem, 12vw, 7rem)/1.1 ui-monospace, "Cascadia Mono", Consolas, monospace; letter-spacing: .08em; color: var(--accent); margin: .5rem 0; }
.beamer-namen { justify-content: center; margin-top: 1rem; }
.beamer-namen .chip { font-size: 1.05rem; min-height: 40px; }
.beamer-seite .frage-karte, .beamer-inline .frage-karte { font-size: 1.15rem; }
.beamer-frage-kopf { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.beamer-restzeit { font: bold 2.4rem/1 var(--serif); color: var(--accent); min-width: 3rem; text-align: right; }
.beamer-teile .option, .beamer-teile .luecke input, .beamer-teile .luecke select { pointer-events: none; }
.beamer-spalten { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 1.5rem; align-items: start; }
.beamer-balken-liste { display: flex; flex-direction: column; gap: .6rem; margin: .8rem 0 1.5rem; }
.beamer-balken { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) 2.5rem; align-items: center; gap: .6rem; }
.beamer-balken-text { display: flex; align-items: center; gap: .3rem; min-width: 0; overflow-wrap: anywhere; }
.beamer-balken-leiste { height: 22px; background: var(--surface); border-radius: var(--radius); overflow: hidden; }
.beamer-balken-fuellung { height: 100%; background: var(--muted); transition: width .4s; }
.beamer-balken.richtig .beamer-balken-fuellung { background: var(--ok); }
.beamer-balken.richtig .beamer-balken-text { color: var(--ok); font-weight: 600; }
.beamer-ende { text-align: center; }
.beamer-ende .rangliste { max-width: 30rem; margin: 1rem auto; font-size: 1.2rem; }
.beamer-inline { border: 1px solid var(--line); border-radius: 6px; padding: 1rem; margin-top: 1rem; }

@media (max-width: 860px) {
  .editor-fragen { grid-template-columns: minmax(0, 1fr); }
  .fragen-seite { position: static; }
  .fragen-nav { flex-direction: row; flex-wrap: wrap; max-height: none; }
  .fragen-nav li { flex: 1 1 10rem; }
  .graph-editor, .graph-editor-kompakt { grid-template-columns: minmax(0, 1fr); }
  .beamer-spalten { grid-template-columns: minmax(0, 1fr); }
  .filterleiste-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .listen-eintrag { flex-direction: column; }
  .listen-knoepfe { flex-direction: row; }
  .filterleiste-4 { grid-template-columns: minmax(0, 1fr); }
  .beamer-balken { grid-template-columns: minmax(0, 1fr) 2.5rem; }
  .beamer-balken-leiste { grid-column: 1 / -1; }
}

/* ---------- iPad: Touch, Stift, Bildschirmtastatur (1.1) ---------- */
body { min-height: 100dvh; }
.kopf, .seite, .fuss-innen { padding-left: max(2.25rem, env(safe-area-inset-left)); padding-right: max(2.25rem, env(safe-area-inset-right)); }
.fuss-innen { padding-bottom: calc(1.4rem + env(safe-area-inset-bottom)); }
html.tastatur-offen body { padding-bottom: var(--tastatur-hoehe, 0px); }
.meldungen { bottom: calc(1rem + env(safe-area-inset-bottom) + var(--tastatur-hoehe, 0px)); }
.dialog { max-height: calc(100dvh - 2rem); overflow-y: auto; overscroll-behavior: contain; }
html.tastatur-offen .dialog { margin-top: 1rem; max-height: calc(100dvh - var(--tastatur-hoehe, 0px) - 2rem); }

/* Tippflächen mindestens 44 px, kein Doppeltipp-Zoom, keine grauen Tipp-Blitze */
.fragenpunkt { width: 44px; height: 44px; }
.knopf-klein, button.chip, .gruppen-wahl button { min-height: 44px; }
.chip-x { min-width: 44px; min-height: 44px; margin: -.3rem -.55rem -.3rem -.2rem; }
.luecke select, .luecke input, math-field.formelfeld-klein, math-field.formelfeld-inline { min-height: 44px; }
button, a, label, select, .option, .fehlerzeile, math-field { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.graph-interaktiv { touch-action: none; -webkit-user-select: none; user-select: none; }

/* Hover-Stile bleiben auf Touchgeräten nach dem Tippen hängen – dort abschalten */
@media (hover: none) {
  .knopf:hover, .knopf-symbol:hover, .quizkarte:hover, .palette-knopf:hover, .option:hover { background: transparent; }
  .knopf-haupt:hover { background: var(--button-bg); filter: none; }
  .modus:hover { background: transparent; border-color: var(--line); }
  button.chip:hover { background: transparent; border-color: var(--line); }
  button.chip[aria-pressed="true"], button.chip[aria-pressed="true"]:hover { background: var(--accent-weich); border-color: var(--accent); }
  .kopf-nav a:hover, .textlink:hover, .theme-knopf:hover { color: inherit; }
  .kopf-nav a[aria-current="page"]:hover { color: var(--accent); }
  .option.ist-richtig:hover { background: var(--ok-weich); }
  .option.ist-falsch:hover { background: var(--falsch-weich); }
  .option:has(input:checked):hover { background: var(--accent-weich); }
}

/* MathLive-Menü (≡) ausblenden – der Tastatur-Knopf im Feld bleibt, aber schmaler:
   MathLive macht beide Knöpfe auf Touchgeräten 60 px breit, im kleinen Zahlenfeld bliebe kein Platz zum Tippen. */
math-field::part(menu-toggle) { display: none; }
math-field::part(virtual-keyboard-toggle) { min-width: 36px; min-height: 36px; width: 36px; margin-right: 0; }
@media (pointer: coarse) {
  math-field.formelfeld-klein { width: 9.5rem; }
  math-field.formelfeld-inline { min-width: 7.5rem; }
}

/* Angekreuzt und ausgewertet: Grün/Rot muss die Markierung „gewählt“ überstimmen */
.option.ist-richtig:has(input:checked), .option.ist-richtig:has(input:checked):hover { border-color: var(--ok); background: var(--ok-weich); }
.option.ist-falsch:has(input:checked), .option.ist-falsch:has(input:checked):hover { border-color: var(--falsch); background: var(--falsch-weich); }

/* Klebende Aktionsleiste: „Prüfen“ bleibt erreichbar, auch über der Formeltastatur */
.frage-karte .spieler-aktionen { position: sticky; bottom: calc(env(safe-area-inset-bottom) + var(--tastatur-hoehe, 0px)); z-index: 2; background: var(--paper); margin-left: -.4rem; margin-right: -.4rem; padding: .6rem .4rem; border-top: 1px solid var(--line-weak); }

/* Lange Formeln und Texte dürfen nicht über den Rand laufen */
.rich, .option-text, .schritt-text, .aussage, .lueckentext, .formel-block { max-width: 100%; }

/* Graph antippen: Fadenkreuz, Grifffläche, Feinsteuerung */
.graph-marker .graph-marker-griff { fill: transparent; stroke: none; }
.graph-marker .graph-marker-linie { stroke: var(--accent); stroke-width: 1.5; stroke-dasharray: 4 4; }
.graph-unterzeile { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .4rem 1rem; max-width: 560px; margin-top: .4rem; }
.graph-unterzeile .gelesen { margin: 0; }
.feinsteuerung { display: flex; gap: .35rem; }

/* Reihenfolge ziehen */
.schritt-griff { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 34px; min-height: 44px; color: var(--muted); font-size: 1.25rem; line-height: 1; cursor: grab; touch-action: none; -webkit-user-select: none; user-select: none; }
.schritt { padding-left: .3rem; }
.schritt.wird-gezogen { position: relative; z-index: 3; background: var(--surface); box-shadow: 0 8px 24px rgba(0, 0, 0, .28); cursor: grabbing; }
.schritt.einfuege-vor { box-shadow: inset 0 3px 0 var(--accent); }
.schritt.einfuege-nach { box-shadow: inset 0 -3px 0 var(--accent); }

/* Zuordnen: gewählte Antwort direkt unter dem Eintrag */
.zuordnen-gewaehlt { margin: .4rem 0 0; font-size: .9rem; color: var(--muted); }
.zuordnen-gewaehlt:empty { display: none; }

/* Live: große Antwortkacheln */
.live-gross .optionen, .live-gross .graphen-wahl { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: .7rem; }
.live-gross .option { min-height: 72px; font-size: 1.15rem; align-items: center; }
.live-gross .segment .option { min-height: 72px; font-size: 1.2rem; }

/* Mitschüler-Check, Autorencode-Karte, Home-Bildschirm-Hinweis */
.mitschueler-check { border: 1px solid var(--line); border-radius: 6px; padding: 1rem 1.1rem; }
.mitschueler-check h2 { margin-bottom: .3rem; }
.code-karte { margin: .8rem 0; padding: .8rem 1rem; border: 2px dashed var(--accent); border-radius: 6px; text-align: center; background: var(--accent-weich); }
.code-karte .code-anzeige { border: 0; background: transparent; font-size: 1.7rem; padding: .2rem 0; }
.code-karte p { margin: .2rem 0; }
.installhinweis { position: fixed; z-index: 25; left: max(1rem, env(safe-area-inset-left)); right: max(1rem, env(safe-area-inset-right)); bottom: calc(1rem + env(safe-area-inset-bottom)); max-width: 34rem; margin: 0 auto; display: flex; align-items: center; gap: .6rem; padding: .7rem .6rem .7rem 1rem; border: 1px solid var(--accent); border-radius: 6px; background: var(--surface); box-shadow: 0 6px 22px rgba(0, 0, 0, .25); }

/* QR-Codes (immer schwarz auf weiß) */
.qr { display: block; width: 100%; max-width: 280px; height: auto; margin: 0 auto; border-radius: 6px; }
.qr-dialog { text-align: center; }
.qr-dialog .qr { max-width: min(55vh, 420px); }
.qr-adresse { font-size: .85rem; color: var(--muted); overflow-wrap: anywhere; }
.beamer-lobby-raster { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, auto); gap: 2rem; align-items: center; }
.beamer-lobby-raster .qr { width: min(45vh, 380px); max-width: none; }

/* Präsentationsmodus (AirPlay): Beamerbild bildschirmfüllend, Steuerleiste unten */
body.praesentation .kopf, body.praesentation .fuss, body.praesentation .live-einrichtung, body.praesentation .laufend-titel { display: none; }
body.praesentation .seite { max-width: none; padding-top: 1rem; padding-bottom: 7rem; }
body.praesentation .beamer-inline { border: 0; padding: 0; margin: 0; font-size: 1.15rem; }
.praesentation-leiste { position: fixed; z-index: 20; left: 0; right: 0; bottom: 0; justify-content: center; margin: 0; padding: .6rem max(1rem, env(safe-area-inset-right)) calc(.6rem + env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left)); background: var(--surface); border-top: 1px solid var(--line); }

@media (max-width: 760px) {
  .beamer-lobby-raster { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
  .kopf, .seite, .fuss-innen { padding-left: max(1rem, env(safe-area-inset-left)); padding-right: max(1rem, env(safe-area-inset-right)); }
}