/* Lerneinheiten-Spieler. Nur Tokens aus ehbs-web.css. Handy zuerst, große Klickflächen (mind. 44 px).
   Dunkle Darstellung: überschreibt nur die Tokens, die Komponenten bleiben gleich. */

@media (prefers-color-scheme: dark) {
  :root:not([data-hell]) {
    --ehbs-white: #181c33; --ehbs-bg-soft: #0f1222; --ehbs-bg-light: #232846; --ehbs-line: #3b4266;
    --ehbs-text: #f1f2f8; --ehbs-text-sek: #bcc0d6;
    --ehbs-primary: #aab6ff; --ehbs-primary-dark: #cbd2ff; --ehbs-primary-tint: #232a54;
    --ehbs-text-on-dark: #10132a; --ehbs-focus: #ffd27a;
    --ehbs-red: #ff9a93; --ehbs-red-dark: #ffb7b1;
    --ehbs-tint-hinweis: #3a3322; --ehbs-tint-warnung: #402628;
    --ampel-green: #7bd88f; --ampel-yellow: #f2c35c; --ampel-red: #ff8a7d;
  }
  :root:not([data-hell]) .ehbs-logo img { background: #fff; border-radius: var(--radius); padding: 4px; }
  :root:not([data-hell]) .portal-sprachwahl select, :root:not([data-hell]) textarea, :root:not([data-hell]) select { background: var(--ehbs-white); color: var(--ehbs-text); }
}

/* Übersicht */
.lp-kopfkarte { display: grid; gap: var(--space-4); padding: var(--space-4); background: var(--ehbs-primary-tint); border-radius: var(--radius); border-inline-start: 6px solid var(--ehbs-primary); margin: var(--space-4) 0 var(--space-6); }
.lp-kopfkarte__zahl { font-size: var(--fs-h2); font-weight: 700; margin: 0 0 var(--space-2); }
.lp-kopfkarte__zahl span { font-size: var(--fs-base); font-weight: 400; }
.lp-weiter { margin-top: 0; }
@media (min-width: 720px) { .lp-kopfkarte { grid-template-columns: 1fr auto; align-items: end; } }
.lp-kapitel { margin-top: var(--space-6); }
.lp-kapitel .portal-h2 { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); margin-top: 0; }
.lp-kapitel__stand { margin-inline-start: auto; }
.lp-einheiten { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.lp-einheit { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; padding: var(--space-3) var(--space-4); border: 1px solid var(--ehbs-line); border-inline-start: 6px solid var(--ehbs-line); border-radius: var(--radius); min-height: 52px; }
.lp-einheit--aktuell { border-inline-start-color: var(--ehbs-primary); background: var(--ehbs-primary-tint); }
.lp-einheit--fertig { border-inline-start-color: var(--ampel-green); }
.lp-einheit--gesperrt { color: var(--ehbs-text-sek); }
.lp-einheit__titel { flex: 1 1 14rem; font-weight: 700; }
.lp-testkarte { padding: var(--space-4); border: 2px dashed var(--ehbs-line); border-radius: var(--radius); }
.lp-testkarte.ist-frei { border-style: solid; border-color: var(--ehbs-primary); }
.lp-gruende { margin: 0; padding-inline-start: 1.2rem; }

/* Einheit */
.lp-krume { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; font-size: var(--fs-small); margin-bottom: var(--space-3); }
.lp-krume__zeit { margin-inline-start: auto; font-weight: 700; color: var(--ehbs-text-sek); }
.lp-zaehler { margin-top: var(--space-2); }
.lp-lernziel { background: var(--ehbs-primary-tint); padding: var(--space-3) var(--space-4); border-radius: var(--radius); border-inline-start: 6px solid var(--ehbs-primary); }
.lp-einheit-seite > * + * { margin-top: var(--space-6); }
.lp-text { display: grid; gap: var(--space-4); }
.lp-text p:last-child, .lp-text ul:last-child { margin-bottom: 0; }
@media (min-width: 720px) { .lp-text--bild { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; } }
.lp-bild { margin: 0; }
.lp-bild img, .lp-suchbild img, .lp-szenario__bild { display: block; width: 100%; height: auto; border-radius: var(--radius); background: var(--ehbs-bg-light); }
.lp-bild figcaption, .lp-video figcaption { font-size: var(--fs-small); color: var(--ehbs-text-sek); margin-top: var(--space-2); }
.lp-galerie { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.lp-hintergrund { border: 1px solid var(--ehbs-line); border-radius: var(--radius); }
.lp-hintergrund summary { cursor: pointer; padding: var(--space-3) var(--space-4); font-weight: 700; min-height: 44px; display: flex; align-items: center; }
.lp-hintergrund > div { padding: 0 var(--space-4) var(--space-2); }
.lp-merk p:last-child { margin-bottom: 0; }
.lp-video__platzhalter { position: absolute; inset: 0; display: grid; place-content: center; gap: var(--space-2); text-align: center; padding: var(--space-4); color: var(--ehbs-text-on-dark); }

/* Übungen */
.lp-uebung { border: 2px solid var(--ehbs-primary); border-radius: var(--radius); padding: var(--space-4); background: var(--ehbs-white); }
.lp-uebung.ist-erledigt { border-color: var(--ampel-green); }
.lp-uebung__kopf { font-weight: 700; }
.lp-marke { display: inline-block; background: var(--ehbs-primary); color: var(--ehbs-text-on-dark); padding: 2px var(--space-2); border-radius: var(--radius); font-size: var(--fs-small); margin-inline-end: var(--space-2); }
.ist-erledigt .lp-marke { background: var(--ampel-green); }
.lp-knopf { margin-top: var(--space-3); min-height: 48px; }
.lp-frage-text { font-weight: 700; }
.lp-optionen { display: grid; gap: var(--space-2); }
.lp-option { display: flex; gap: var(--space-3); align-items: flex-start; padding: var(--space-3); border: 2px solid var(--ehbs-line); border-radius: var(--radius); cursor: pointer; min-height: 48px; background: var(--ehbs-white); text-align: start; font: inherit; color: inherit; width: 100%; }
.lp-option input { width: 24px; height: 24px; flex: none; margin: 0; }
.lp-option:hover { border-color: var(--ehbs-primary); }
.lp-option.ist-richtig, .lp-chip.ist-richtig, select.ist-richtig, .lp-reihe .ist-richtig { border-color: var(--ampel-green); background: color-mix(in srgb, var(--ampel-green) 16%, var(--ehbs-white)); }
.lp-option.ist-falsch, .lp-chip.ist-falsch, select.ist-falsch, .lp-reihe .ist-falsch { border-color: var(--ampel-red); background: color-mix(in srgb, var(--ampel-red) 16%, var(--ehbs-white)); }
.lp-rueck { margin-top: var(--space-3); padding: var(--space-3) var(--space-4); border-radius: var(--radius); border-inline-start: 6px solid var(--ehbs-line); background: var(--ehbs-bg-soft); }
.lp-rueck p { margin: var(--space-1) 0 0; }
.lp-rueck--ok { border-inline-start-color: var(--ampel-green); }
.lp-rueck--falsch { border-inline-start-color: var(--ampel-red); }
.lp-rueck--mid { border-inline-start-color: var(--ampel-yellow); }
.lp-rueck .lp-knopf { margin-top: var(--space-3); }
.lp-zweier { display: grid; gap: var(--space-3); grid-template-columns: 1fr 1fr; }
.lp-zweier .lp-knopf { margin-top: var(--space-3); }
.lp-aussage { padding: var(--space-4); background: var(--ehbs-bg-soft); border-radius: var(--radius); }
.lp-aussage__text { font-size: var(--fs-lg); font-weight: 700; margin-bottom: 0; }

/* Zuordnen */
.lp-vorrat { display: flex; flex-wrap: wrap; gap: var(--space-2); min-height: 52px; padding: var(--space-2); background: var(--ehbs-bg-soft); border-radius: var(--radius); }
.lp-chip { font: inherit; color: var(--ehbs-text); background: var(--ehbs-white); border: 2px solid var(--ehbs-primary); border-radius: 999px; padding: var(--space-2) var(--space-4); min-height: 44px; cursor: pointer; text-align: start; }
.lp-chip.ist-gewaehlt { background: var(--ehbs-primary); color: var(--ehbs-text-on-dark); }
.lp-gruppen { display: grid; gap: var(--space-3); margin-top: var(--space-4); }
@media (min-width: 720px) { .lp-gruppen { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); } }
.lp-gruppe { border: 2px dashed var(--ehbs-line); border-radius: var(--radius); }
.lp-gruppe__kopf { width: 100%; font: inherit; font-weight: 700; color: var(--ehbs-text); background: var(--ehbs-primary-tint); border: 0; padding: var(--space-3); min-height: 48px; text-align: start; cursor: pointer; border-radius: var(--radius) var(--radius) 0 0; }
.lp-gruppe__inhalt { display: flex; flex-wrap: wrap; gap: var(--space-2); padding: var(--space-2); min-height: 56px; }

/* Suchbild und Beschriften */
.lp-suchbild { position: relative; line-height: 0; }
.lp-suchbild img { cursor: crosshair; }
.lp-treffer { position: absolute; width: 32px; height: 32px; margin: -16px 0 0 -16px; border-radius: 50%; background: var(--ampel-green); color: #fff; display: grid; place-items: center; font: 700 14px/1 var(--ehbs-font); border: 3px solid #fff; box-shadow: var(--shadow); pointer-events: none; }
.lp-treffer.ist-gezeigt { background: var(--ampel-yellow); color: #000; }
.lp-nummer { background: var(--ehbs-primary); color: var(--ehbs-text-on-dark); }
.lp-zaehler-gross { font-weight: 700; font-size: var(--fs-lg); margin: var(--space-3) 0 var(--space-2); }
.lp-funde { padding-inline-start: 1.2rem; margin: 0; }
.lp-funde li { margin-bottom: var(--space-2); }
.lp-felder { list-style: none; padding: 0; margin: var(--space-4) 0 0; display: grid; gap: var(--space-2); }
.lp-felder li { display: flex; gap: var(--space-2); align-items: center; }
select { font: inherit; min-height: 44px; border: 2px solid var(--ehbs-primary); border-radius: var(--radius); padding: 0 var(--space-2); background: var(--ehbs-white); color: var(--ehbs-text); max-width: 100%; }
.lp-lueckentext { font-size: var(--fs-lg); line-height: 2.4; }
.lp-lueckentext select { margin: 0 var(--space-1); }
textarea { width: 100%; font: inherit; border: 2px solid var(--ehbs-line); border-radius: var(--radius); padding: var(--space-3); background: var(--ehbs-white); color: var(--ehbs-text); }

/* Reihenfolge */
.lp-reihe { list-style: decimal; padding-inline-start: 2rem; display: grid; gap: var(--space-2); }
.lp-reihe li { display: flex; gap: var(--space-3); align-items: center; padding: var(--space-2) var(--space-3); border: 2px solid var(--ehbs-line); border-radius: var(--radius); }
.lp-reihe__text { flex: 1; }
.lp-reihe__knoepfe { display: flex; gap: var(--space-1); }
.lp-pfeil { width: 44px; height: 44px; font-size: 1.25rem; border: 2px solid var(--ehbs-primary); background: var(--ehbs-white); color: var(--ehbs-primary); border-radius: var(--radius); cursor: pointer; }
.lp-pfeil:disabled { opacity: .35; cursor: default; }

/* Lernkarten */
.lp-karte-huelle { max-width: 34rem; }
.lp-karte { display: grid; gap: var(--space-3); align-content: center; text-align: center; width: 100%; min-height: 12rem; padding: var(--space-6); font: inherit; color: var(--ehbs-text); background: var(--ehbs-white); border: 2px solid var(--ehbs-primary); border-radius: 12px; box-shadow: var(--shadow); cursor: pointer; }
.lp-karte--hinten { background: var(--ehbs-primary-tint); cursor: default; }
.lp-karte__seite { font-size: var(--fs-small); text-transform: uppercase; letter-spacing: .06em; color: var(--ehbs-text-sek); }
.lp-karte__text { font-size: var(--fs-lg); font-weight: 700; }

/* Szenario */
.lp-szenario { display: grid; gap: var(--space-3); }
.lp-lage { padding: var(--space-4); background: var(--ehbs-bg-soft); border-radius: var(--radius); border-inline-start: 6px solid var(--ehbs-red); margin: 0; }
.lp-option--knopf { cursor: pointer; }

/* Fuß der Einheit */
.lp-abschluss { position: sticky; bottom: 0; background: var(--ehbs-white); border-top: 2px solid var(--ehbs-line); padding: var(--space-3) 0 var(--space-3); margin-top: var(--space-8); z-index: 5; }
.lp-abschluss__stand { margin: 0 0 var(--space-2); font-weight: 700; }
.lp-abschluss__knoepfe { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }
.lp-abschluss .portal-gross { margin-top: 0; flex: 1 1 14rem; }
.lp-abschluss button:disabled { opacity: .55; cursor: not-allowed; }

/* Abschlusstest */
.lp-test { display: grid; gap: var(--space-6); }
.lp-frage { border: 1px solid var(--ehbs-line); border-radius: var(--radius); padding: var(--space-4); margin: 0; }
.lp-frage legend { font-weight: 700; padding: 0 var(--space-2); }
.lp-antwort { display: flex; gap: var(--space-3); align-items: flex-start; padding: var(--space-3); border: 2px solid var(--ehbs-line); border-radius: var(--radius); margin-top: var(--space-2); cursor: pointer; min-height: 48px; }
.lp-antwort input { width: 24px; height: 24px; flex: none; margin: 0; }
.lp-antwort:has(input:checked) { border-color: var(--ehbs-primary); background: var(--ehbs-primary-tint); }
.lp-auswertung { list-style: none; padding: 0; display: grid; gap: var(--space-3); }
.lp-auswertung li { border: 1px solid var(--ehbs-line); border-inline-start: 6px solid var(--ehbs-line); padding: var(--space-3) var(--space-4); border-radius: var(--radius); }
.lp-auswertung .ist-richtig { border-inline-start-color: var(--ampel-green); }
.lp-auswertung .ist-falsch { border-inline-start-color: var(--ampel-red); }
.lp-praxis { margin-top: var(--space-8); padding: var(--space-4); background: var(--ehbs-primary-tint); border-radius: var(--radius); border-inline-start: 6px solid var(--ehbs-primary); }

@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; transition: none !important; } }