/* Layout: Querschnitt durch das Werk. Etagen als Bänder von Dachgeschoss bis Keller, Räume als Türen mit Figur. Bewusst ein festes, helles Spielbild. */
/* Farbschema und Schriften: ALLE Farben und Schriften der Engine stehen in diesem :root-Block, auch die der
   Canvas-Zeichnungen (Räume, Requisiten, Figuren). engine.js, figur.js und praxis.js lesen sie zur Laufzeit über
   window.lwVar (figur.js) und halten sie im Zwischenspeicher. Ein Produkt wechselt sein Farbschema mit einer eigenen
   static/produkt.css, die nach dieser Datei geladen wird und nur Variablen überschreibt (siehe README, Abschnitt
   Farbschema). Abgeleitete Variablen (var(--…)) folgen der Grundfarbe, lassen sich aber einzeln überschreiben.
   Nicht hier: Aussehen der einzelnen Figuren (Haut, Haare, Kleidung) steht als Inhalt in kern.js, produkt.js und den
   Fachdateien; die Farbe der Browserleiste (meta theme-color in index.html) kann keine Variable lesen. */
:root {
  color-scheme: light;
  /* Grundfarben der Oberfläche */
  --himmel: #dfe7e2;
  --wand: #f7f6f0;
  --boden: #e5e2d6;
  --tinte: #26291f;
  --tinte2: #5c6155;
  --holz: #a26a36;
  --holz-hell: #e9d5b8;
  --wald: #2e5a4c;
  --wald-hell: #d5e4dc;
  --gold: #d99a2b;
  --gold-hell: #f7e6c2;
  --fokus: var(--gold);          /* Fokusrahmen der Tastaturbedienung (seit 20.10.2026 eigene Variable) */
  --browserleiste: #dfe7e2;     /* meta theme-color, engine.js setzt sie beim Laden aus dieser Variablen */
  --rot: #b0443a;
  --rot-hell: #f5dcd6;
  --gruen: #3d7a4d;
  --gruen-hell: #dcecdf;
  --keller: #3a3d36;
  --keller-wand: #4a4e45;
  /* Neutrale Töne der Oberfläche */
  --weiss: #fff;
  --zettel: #fffdf5;
  --strich: #cfcab8;
  --grau-hell: #c9c6b8;
  --tinte-aus: #9a9789;
  --holz-fuge: #8f5c2d;
  --stern-leer: #8a8676;
  --stern-voll: #b07a1a;
  --abzeichen-rand: #a9a594;
  --schleier: rgba(38, 41, 31, .55);
  --schleier-sheet: rgba(38, 41, 31, .45);
  --sheet-schatten: rgba(38, 41, 31, .12);
  --vid-schleier: rgba(20, 22, 18, .72);
  --vid-grund: #000;

  /* Schriften (--f-canvas: Beschriftungen in Canvas-Zeichnungen) */
  --f-display: "Bricolage Grotesque", "Trebuchet MS", system-ui, sans-serif;
  --f-text: "Atkinson Hyperlegible", "Segoe UI", system-ui, sans-serif;
  --f-zahl: "JetBrains Mono", ui-monospace, "Consolas", monospace;
  --f-canvas: sans-serif;

  /* Raumhintergründe (Hausansicht, Bühne im Level, Praxisbühne) */
  --raum-bg-archiv: #d9d3c1;
  --raum-bg-halle: #e3dccb;
  --raum-bg-vertrieb: #dde3ec;
  --raum-bg-chef: #e7e1ea;
  --raum-bg-lager: #e0d8c4;
  --raum-bg-laden: #efe3d8;
  --raum-bg-besprechung: #dfe8e4;
  --raum-bg-kanzlei: #e2dbd2;
  --raum-bg-markt: #e6e3d2;
  --raum-bg-buero: var(--wald-hell);
  --raum-bg-lehrwerkstatt: #e6dcc8;
  --raum-bg-schule: #e1e6d6;
  --raum-bg-kammer: #dde2e8;
  --raum-bg-pruefung: #e5e0d4;
  --raum-bg-praxis: #dfe8e4;

  /* Requisiten in den Räumen (Canvas, engine.js und praxis.js) */
  --raum-linie: #34332d;
  --raum-bodenschatten: rgba(52,51,45,.10);
  --raum-holz: var(--holz);
  --raum-holz-dunkel: #6b4a2f;
  --raum-holz-mittel: #8f6a43;
  --raum-holz-kanzlei: #5e3f2a;
  --raum-holz-fuge: var(--holz-fuge);
  --raum-rot: var(--rot);
  --raum-gruen: var(--wald);
  --raum-gold: var(--gold);
  --raum-blau: #3c6479;
  --raum-oliv: #7a6a4f;
  --raum-pflanze: var(--gruen);
  --raum-buch-rot: #6b1f1f;
  --raum-buch-schiefer: #2d3a3a;
  --raum-buch-blau: #3c4a6b;
  --raum-karton: #c9b28a;
  --raum-kiste-hell: #c9a46a;
  --raum-kiste: #b88b4a;
  --raum-metall: #7c8a86;
  --raum-saegeblatt: #c9ccc4;
  --raum-glas: #cfe0e8;
  --raum-glas-hell: #e3eef2;
  --raum-bildschirm: var(--wald-hell);
  --raum-bildschirm-rahmen: var(--tinte);
  --raum-plakat: var(--gold-hell);
  --raum-papier: var(--wand);
  --raum-weiss: var(--weiss);
  --raum-werkzeugwand: #d8c6a0;
  --raum-lochblech: rgba(52,51,45,.25);
  --raum-hobelbank: #c08a4e;
  --raum-werkstueck: #e0b77a;
  --raum-tafel: #2e4a3c;
  --raum-kreide: #f4efe4;
  --raum-kammer-blau: #2f4f7a;

  /* Figuren (Canvas, figur.js): Standardfigur und Details, die für alle Figuren gleich sind */
  --figur-haut: #f1caa2;
  --figur-haare: #5b4636;
  --figur-kleidung: #3c6479;
  --figur-linie: var(--raum-linie);
  --figur-schatten: rgba(74,69,52,.18);
  --figur-hose: #36413d;
  --figur-schuh: #34362d;
  --figur-kontur-kleidung: #333831;
  --figur-kontur-haut: #34372e;
  --figur-kragen: #f4efe4;
  --figur-telefon: #2d2d2d;
  --figur-telefon-kontur: #1a1a1a;
  --figur-braue-hell: #8d887c;
  --figur-auge: #30312a;
  --figur-lid: #302f29;
  --figur-brille: #333b34;
  --figur-falte: #a9785c;
  --figur-falte-stirn: rgba(169,120,92,.5);
  --figur-wange: rgba(226,120,110,.35);
  --figur-mund: #7a3b2e;
  --figur-mund-ruhig: #97674b;
}
html, body { height: auto; }
body { background: var(--himmel); color: var(--tinte); font-family: var(--f-text); font-size: 16px; line-height: 1.5; }
.wrap { max-width: 1080px; margin: 0 auto; padding: 16px 16px 40px; }
button { font: inherit; cursor: pointer; }
:focus-visible { outline: 3px solid var(--fokus); outline-offset: 2px; }

/* Kopfzeile */
.kopf { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: center; justify-content: space-between; padding-block: 8px 16px; }
.marke { display: flex; flex-direction: column; min-width: 0; }
.marke h1 { font-family: var(--f-display); font-weight: 800; font-size: clamp(28px, 5vw, 40px); line-height: 1; margin: 0; letter-spacing: -0.02em; }
.marke h1 span { color: var(--holz); }
.marke p { margin: 4px 0 0; color: var(--tinte2); font-size: 14px; }
.hud { display: flex; align-items: center; gap: 14px; background: var(--wand); border: 2px solid var(--tinte); border-radius: 14px; padding: 8px 14px; box-shadow: 3px 3px 0 var(--tinte); min-width: 0; flex-wrap: wrap; }
.hud .rang { font-family: var(--f-display); font-weight: 700; font-size: 15px; }
.hud .xpzahl { font-family: var(--f-zahl); font-size: 13px; color: var(--tinte2); }
.xpbar { width: 140px; height: 10px; background: var(--boden); border: 1.5px solid var(--tinte); border-radius: 6px; overflow: hidden; }
.xpbar i { display: block; height: 100%; background: var(--gold); width: 0; transition: width .6s; }
.hud .abz { font-family: var(--f-zahl); font-size: 13px; background: var(--gold-hell); border: 1.5px solid var(--tinte); border-radius: 8px; padding: 2px 8px; }

/* Haus */
.haus { position: relative; background: var(--wand); border: 3px solid var(--tinte); border-radius: 6px 6px 10px 10px; box-shadow: 5px 5px 0 var(--tinte); }
.dach { height: 34px; background: repeating-linear-gradient(90deg, var(--holz) 0 22px, var(--holz-fuge) 22px 24px); border-bottom: 3px solid var(--tinte); border-radius: 3px 3px 0 0; display: flex; align-items: center; justify-content: center; }
.dach b { font-family: var(--f-display); font-weight: 800; color: var(--wand); letter-spacing: 0.18em; font-size: 13px; text-transform: uppercase; }
.etage { display: grid; grid-template-columns: 96px 1fr; border-bottom: 3px solid var(--tinte); }
.etage:last-child { border-bottom: 0; }
.schild { background: var(--boden); border-right: 3px solid var(--tinte); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 8px 4px; text-align: center; gap: 2px; }
.schild b { font-family: var(--f-display); font-weight: 800; font-size: 22px; line-height: 1; }
.schild small { font-size: 13px; color: var(--tinte2); line-height: 1.25; letter-spacing: 0; }
.raeume { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; padding: 12px; min-width: 0; }
.etage.ug { background: var(--keller); }
.etage.ug .schild { background: var(--keller-wand); color: var(--wand); }
.etage.ug .schild small { color: var(--grau-hell); }
.raum { position: relative; text-align: left; background: var(--wand); border: 2px solid var(--tinte); border-radius: 12px; padding: 0; overflow: hidden; display: flex; flex-direction: column; transition: transform .15s, box-shadow .15s; box-shadow: 2px 2px 0 var(--tinte); color: var(--tinte); }
.raum:hover { transform: translate(-2px, -2px); box-shadow: 5px 5px 0 var(--tinte); }
.raum canvas { display: block; width: 100%; height: 110px; background: var(--wald-hell); border-bottom: 2px solid var(--tinte); }
.raum[data-raum="archiv"] canvas { background: var(--raum-bg-archiv); }
.raum[data-raum="halle"] canvas { background: var(--raum-bg-halle); }
.raum[data-raum="vertrieb"] canvas { background: var(--raum-bg-vertrieb); }
.raum[data-raum="chef"] canvas { background: var(--raum-bg-chef); }
.raum .info { padding: 8px 10px 10px; display: flex; flex-direction: column; gap: 2px; }
.raum .zeile { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.raum .nr { font-family: var(--f-zahl); font-weight: 700; font-size: 12px; background: var(--tinte); color: var(--wand); border-radius: 6px; padding: 1px 7px; }
.raum.boss .nr { background: var(--gold); color: var(--tinte); }
.raum h3 { font-family: var(--f-display); font-weight: 700; font-size: 17px; margin: 2px 0 0; line-height: 1.2; }
.raum .kurz { font-size: 13px; color: var(--tinte2); line-height: 1.35; }
/* Weiterpfad: Karte „Weiter lernen“ auf dem Campus, Markierung „Start hier“ im Haus */
.weiter-karte { margin: 12px 0 4px; border-width: 3px; box-shadow: 4px 4px 0 var(--tinte); background: linear-gradient(90deg, var(--gold) 0 8px, var(--wand) 8px); padding-left: 24px; }
.weiter-karte h2 { font-family: var(--f-display); font-weight: 800; font-size: 21px; line-height: 1.2; margin: 2px 0 4px; }
.weiter-karte p { margin: 0; }
.weiter-karte .weiter-satz { margin-top: 4px; color: var(--holz); font-weight: 700; }
.weiter-karte .aktionen { margin-top: 10px; }
.raum.start-hier { outline: 4px solid var(--gold); outline-offset: 2px; }
.start-marke { margin-right: auto; background: var(--gold); color: var(--tinte); border: 2px solid var(--tinte); border-radius: 8px; padding: 1px 8px; font-family: var(--f-display); font-weight: 800; font-size: 13px; box-shadow: 2px 2px 0 var(--tinte); }
.ende .weiter-haus { margin: 8px 0 0; color: var(--tinte2); }
.raum .kurz .ziel { color: var(--holz); }
/* Sterne mindestens 3 : 1 gegen die Karte (#f7f6f0): leer 3,37 : 1, voll 3,44 : 1 (vorher 1,92 und 2,25, UX-Test 02.10.2026) */
.sterne { font-size: 15px; letter-spacing: 1px; color: var(--stern-leer); white-space: nowrap; }
.sterne .an { color: var(--stern-voll); }
div.legende { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 16px 2px 0; font-size: 13px; color: var(--tinte2); }
.abzeichen { margin-top: 18px; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.abzeichen div { display: flex; gap: 10px; align-items: center; background: var(--wand); border: 2px dashed var(--abzeichen-rand); border-radius: 12px; padding: 8px 10px; min-width: 0; }
.abzeichen div.hat { border: 2px solid var(--tinte); background: var(--gold-hell); }
.abzeichen .med { flex: none; width: 34px; height: 34px; border-radius: 50%; border: 2px solid var(--tinte); background: var(--boden); display: grid; place-items: center; font-family: var(--f-display); font-weight: 800; font-size: 14px; }
.abzeichen div.hat .med { background: var(--gold); }
.abzeichen b { display: block; font-size: 14px; }
.abzeichen small { color: var(--tinte2); font-size: 12px; line-height: 1.3; display: block; }
h2.sek { font-family: var(--f-display); font-size: 20px; margin: 26px 0 0; }
.fuss { margin-top: 26px; font-size: 13px; color: var(--tinte2); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; align-items: center; }
.link { background: none; border: 0; padding: 0; text-decoration: underline; color: var(--tinte2); }

/* Level */
.level { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 20px; align-items: start; }
.buehne { position: sticky; top: calc(env(safe-area-inset-top, 0px) + 12px); background: var(--wand); border: 3px solid var(--tinte); border-radius: 16px; box-shadow: 4px 4px 0 var(--tinte); overflow: hidden; }
@media (min-width: 601px) { .buehne { overflow: hidden auto; max-height: calc(100vh - 24px - env(safe-area-inset-top, 0px)); overscroll-behavior: contain; } }
.buehne canvas { display: block; width: 100%; height: 230px; background: var(--wald-hell); border-bottom: 3px solid var(--tinte); }
.buehne[data-raum="archiv"] canvas { background: var(--raum-bg-archiv); }
.buehne[data-raum="halle"] canvas { background: var(--raum-bg-halle); }
.buehne[data-raum="vertrieb"] canvas { background: var(--raum-bg-vertrieb); }
.buehne[data-raum="chef"] canvas { background: var(--raum-bg-chef); }
.person { padding: 10px 14px 4px; }
.person b { font-family: var(--f-display); font-size: 18px; display: block; line-height: 1.2; }
.person small { color: var(--tinte2); }
.blase { position: relative; margin: 10px 14px 14px; background: var(--weiss); border: 2px solid var(--tinte); border-radius: 14px; padding: 10px 12px; min-height: 64px; font-size: 15px; }
.blase::before { content: ""; position: absolute; top: -11px; left: 28px; width: 16px; height: 16px; background: var(--weiss); border-left: 2px solid var(--tinte); border-top: 2px solid var(--tinte); transform: rotate(45deg); }
.pult { min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.pult-kopf { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; }
.pult-kopf h2 { font-family: var(--f-display); font-weight: 800; font-size: clamp(22px, 3.5vw, 30px); margin: 0; line-height: 1.1; text-wrap: balance; }
.punkte { display: flex; gap: 6px; }
.punkte i { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--tinte); background: var(--wand); }
.punkte i.jetzt { background: var(--gold-hell); }
.punkte i.gut { background: var(--gruen); }
.punkte i.halb { background: var(--gold); }
.punkte i.aus { background: var(--rot); }
.karte { background: var(--wand); border: 2px solid var(--tinte); border-radius: 14px; padding: 14px 16px; min-width: 0; }
.fall-titel { font-family: var(--f-display); font-weight: 700; font-size: 14px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--holz); margin: 0 0 6px; }
.fall-titel + table { margin-bottom: 4px; }
table.fall { border-collapse: collapse; width: 100%; font-size: 15px; margin-bottom: 10px; }
table.fall th { text-align: left; font-weight: 400; color: var(--tinte2); padding: 4px 12px 4px 0; vertical-align: top; }
table.fall td { font-family: var(--f-zahl); font-variant-numeric: tabular-nums; font-size: 14px; padding: 4px 0; text-align: right; }
table.fall tr + tr { border-top: 1px dashed var(--strich); }
/* Breite Tabellen (H.matrix) umbrechen an Wortgrenzen, Werte linksbündig: rechtsbündiger Langtext rutschte aus dem Sichtfeld */
table.fall.breit th, table.fall.breit td { padding-right: 12px; white-space: normal; overflow-wrap: break-word; hyphens: auto; -webkit-hyphens: auto; }
table.fall.breit td { text-align: left; }
table.fall.breit tr > :last-child { padding-right: 0; }
table.fall.breit tr:first-child th { font-weight: 700; color: var(--tinte); }
.tabelle-scroll { overflow-x: auto; }
.frage { font-size: 17px; font-weight: 700; margin: 0 0 12px; }
.eingabe { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.eingabe input { font-family: var(--f-zahl); font-size: 18px; padding: 10px 12px; border: 2px solid var(--tinte); border-radius: 10px; width: 220px; max-width: 100%; background: var(--weiss); color: var(--tinte); }
.einheit { font-family: var(--f-zahl); color: var(--tinte2); }
/* Rechenaufgabe in der Auswertung der Simulation (seit 20.10.2026) */
.eingabe input.richtig { background: var(--gruen-hell); border-color: var(--gruen); opacity: 1; }
.eingabe input.falsch { background: var(--rot-hell); border-color: var(--rot); opacity: 1; }
.knopf { background: var(--wald); color: var(--weiss); border: 2px solid var(--tinte); border-radius: 10px; padding: 10px 18px; font-weight: 700; box-shadow: 2px 2px 0 var(--tinte); }
.knopf:hover { transform: translate(-1px, -1px); box-shadow: 3px 3px 0 var(--tinte); }
.knopf.zwei { background: var(--wand); color: var(--tinte); }
.knopf.gold { background: var(--gold); color: var(--tinte); }
.knopf:disabled { opacity: .45; cursor: default; transform: none; }
.optionen { display: grid; gap: 8px; }
.optionen button { text-align: left; background: var(--weiss); border: 2px solid var(--tinte); border-radius: 10px; padding: 10px 12px; color: var(--tinte); }
.optionen button:hover:not(:disabled) { background: var(--gold-hell); }
.optionen button.gewaehlt { background: var(--gold-hell); }
.optionen button.richtig { background: var(--gruen-hell); border-color: var(--gruen); }
.optionen button.falsch { background: var(--rot-hell); border-color: var(--rot); }
.sortier { display: grid; gap: 8px; }
.sortier .it { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; justify-content: space-between; border-bottom: 1px dashed var(--strich); padding-bottom: 8px; }
.sortier .it > span { min-width: 0; flex: 1 1 180px; }
.sortier .it.falsch > span { color: var(--rot); font-weight: 700; }
.sortier .it.richtig > span { color: var(--gruen); }
.kats { display: flex; flex-wrap: wrap; gap: 4px; }
.kats button { border: 1.5px solid var(--tinte); background: var(--weiss); border-radius: 8px; padding: 4px 9px; font-size: 13px; color: var(--tinte); }
.kats button.an { background: var(--tinte); color: var(--wand); }
.aktionen { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; align-items: center; }
.weg { margin-top: 14px; border-left: 4px solid var(--wald); background: var(--wald-hell); padding: 10px 12px; border-radius: 0 10px 10px 0; font-size: 15px; }
.weg.aus { border-left-color: var(--rot); background: var(--rot-hell); }
.weg b { display: block; font-family: var(--f-display); margin-bottom: 2px; }
.weg .zahlen { font-family: var(--f-zahl); font-size: 14px; }
.xpflug { font-family: var(--f-zahl); font-weight: 700; color: var(--gruen); }
.xpgrund { font-family: var(--f-text); font-weight: 400; font-size: 14px; color: var(--tinte2); }
.spickknopf { background: var(--keller); color: var(--wand); border: 2px solid var(--tinte); border-radius: 10px; padding: 8px 12px; font-size: 14px; }

/* Spickzettel */
.schleier { position: fixed; inset: 0; background: var(--schleier); display: grid; place-items: center; padding: 16px; z-index: 20; }
.zettel { box-sizing: border-box; background: var(--zettel); border: 3px solid var(--tinte); border-radius: 14px; box-shadow: 6px 6px 0 var(--tinte); max-width: 560px; width: 100%; max-height: 86vh; max-height: 86dvh; overflow: auto; padding: 18px; }
.zettel h3 { font-family: var(--f-display); font-size: 22px; margin: 0 0 4px; }
.zettel .von { color: var(--tinte2); font-size: 13px; margin-bottom: 12px; }
.zettel dl { margin: 0; display: grid; gap: 10px; }
.zettel dt { font-weight: 700; }
.zettel dd { margin: 0; }
.zettel .aktionen { justify-content: flex-end; }

/* Ende */
.ende { text-align: center; padding: 24px 16px; }
.ende .gross { font-size: 44px; letter-spacing: 6px; }
.ende h2 { font-family: var(--f-display); font-weight: 800; font-size: 30px; margin: 6px 0; }
.ende .aktionen { justify-content: center; }
.neu-abz { display: inline-block; margin-top: 10px; background: var(--gold-hell); border: 2px solid var(--tinte); border-radius: 10px; padding: 6px 12px; font-weight: 700; }
.stempel { animation: stempel .5s cubic-bezier(.2, 1.6, .5, 1) both; }
/* Der Stempel startet mit scale(2.2): ohne Einfassung lief die Seite kurz bis 557 px (Handy) bzw. 1.821 px (Desktop) breit (Abnahme N4) */
.karte.ende { overflow: hidden; }
.fk-satz { margin: 4px 0 0; font-weight: 700; }
@keyframes stempel { from { transform: scale(2.2) rotate(-12deg); opacity: 0; } to { transform: scale(1) rotate(0); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .stempel { animation: none; } .raum, .knopf { transition: none; } }

@media (max-width: 760px) {
  .level { grid-template-columns: 1fr; }
  .buehne { position: static; display: grid; grid-template-columns: 120px 1fr; }
  .buehne canvas { height: 150px; grid-row: span 2; border-bottom: 0; border-right: 3px solid var(--tinte); }
  .blase { margin: 6px 10px 10px; font-size: 14px; }
  .blase::before { display: none; }
  .person { padding: 8px 10px 0; }
  .etage { grid-template-columns: 46px 1fr; }
  .schild b { font-size: 16px; }
  .schild small { display: none; }
  .raeume { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); padding: 10px; gap: 10px; }
  .raum canvas { height: 92px; }
  .xpbar { width: 90px; }
}

/* Zusatzerklärung */
.zusatz-box { margin-top: 10px; }
.zusatzknopf { background: var(--weiss); color: var(--tinte); border: 2px solid var(--tinte); border-radius: 10px; padding: 7px 12px; font-size: 14px; font-weight: 700; }
.zusatzknopf[aria-expanded="true"] { background: var(--tinte); color: var(--wand); }
.zusatz { margin-top: 10px; background: var(--zettel); border: 2px dashed var(--tinte2); border-radius: 10px; padding: 12px 14px; font-size: 15px; line-height: 1.5; }
.zusatz > b { display: block; font-family: var(--f-display); margin: 10px 0 4px; }
.zusatz > b:first-child, .zusatz .zusatz-ziel + b { margin-top: 0; }
.zusatz ol, .zusatz ul { margin: 0; padding-left: 22px; display: grid; gap: 6px; }
.zusatz-ziel { margin: 0 0 10px; font-style: italic; }
/* nur die Legende in der Zusatzerklärung (dl), nicht die Hauslegende unter dem Haus (div.legende, Abstand zum Schatten) */
dl.legende { margin: 0; display: grid; gap: 8px; }
dl.legende > div { display: grid; grid-template-columns: minmax(48px, max-content) 1fr; gap: 4px 12px; }
dl.legende dt { font-family: var(--f-zahl); font-weight: 700; }
dl.legende dd { margin: 0; min-width: 0; }
.leg-name { font-weight: 700; }
.leg-abgr { display: block; color: var(--tinte2); font-size: 14px; margin-top: 2px; }

/* Mehrfachauswahl wie in der IHK-Prüfung: „N Antworten sind richtig“, Tippziele mindestens 44 px */
.optionen button { min-height: 44px; }
.anzahl { margin: 0 0 10px; display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; }
.gewaehlt-zahl { font-size: 14px; color: var(--tinte2); }
.gewaehlt-zahl.zuviel { color: var(--rot); font-weight: 700; }
.optionen.mehrfach label.opt { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: center; min-height: 44px; box-sizing: border-box; background: var(--weiss); border: 2px solid var(--tinte); border-radius: 10px; padding: 8px 12px; cursor: pointer; color: var(--tinte); }
.optionen.mehrfach label.opt > span { flex: 1 1 160px; min-width: 0; }
.optionen.mehrfach input { width: 22px; height: 22px; margin: 0; flex: none; accent-color: var(--wald); cursor: pointer; }
.optionen.mehrfach label.opt:hover { background: var(--gold-hell); }
.optionen.mehrfach label.opt.gewaehlt { background: var(--gold-hell); }
.optionen.mehrfach label.opt.richtig { background: var(--gruen-hell); border-color: var(--gruen); }
.optionen.mehrfach label.opt.falsch { background: var(--rot-hell); border-color: var(--rot); }
.optionen.mehrfach label.opt.fehlt { background: var(--weiss); border: 2px dashed var(--gruen); }
.optionen.mehrfach label.opt.neutral { opacity: .75; }
.optionen.mehrfach label.opt:has(input:disabled) { cursor: default; }
.optionen.mehrfach .marke { font-style: normal; font-size: 12px; font-weight: 700; color: var(--gruen); margin-left: auto; }
.optionen.mehrfach .falsch .marke { color: var(--rot); }
.optionen.mehrfach label.opt:focus-within { outline: 3px solid var(--fokus); outline-offset: 2px; }

/* Lückentext mit Auswahlliste je Lücke */
.lueckensatz { font-size: 17px; line-height: 2.3; margin: 0; overflow-wrap: anywhere; }
.lueckensatz select { font: inherit; font-size: 16px; min-height: 40px; max-width: 100%; padding: 4px 8px; margin: 2px 2px; border: 2px solid var(--tinte); border-radius: 8px; background: var(--weiss); color: var(--tinte); vertical-align: middle; }
.lueckensatz select.richtig { background: var(--gruen-hell); border-color: var(--gruen); color: var(--tinte); opacity: 1; }
.lueckensatz select.falsch { background: var(--rot-hell); border-color: var(--rot); color: var(--tinte); opacity: 1; }
.l-loesung { font-size: 14px; font-weight: 700; color: var(--gruen); margin: 0 6px; white-space: normal; }

/* Prüfungszentrum und Simulation */
.klein.bald { color: var(--holz); font-weight: 700; }
.sim-titel { font-family: var(--f-display); font-weight: 800; font-size: 22px; margin: 0 0 8px; }
.sim-hinweis { background: var(--gold-hell); border: 2px solid var(--tinte); border-radius: 10px; padding: 8px 12px; font-size: 14px; margin: 0 0 12px; }
.sim-regeln { padding-left: 20px; display: grid; gap: 4px; margin: 8px 0 12px; }
table.sim-vert td, table.sim-tab td { white-space: nowrap; }
.sim-leiste { position: sticky; top: calc(env(safe-area-inset-top, 0px) + 6px); z-index: 5; display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; background: var(--wand); border: 2px solid var(--tinte); border-radius: 12px; padding: 8px 12px; box-shadow: 3px 3px 0 var(--tinte); margin: 0 0 12px; }
.sim-uhr span { font-size: 13px; color: var(--tinte2); }
.sim-uhr b { font-family: var(--f-zahl); font-size: 22px; font-variant-numeric: tabular-nums; }
.sim-leiste.knapp .sim-uhr b { color: var(--rot); }
.sim-info { font-size: 14px; color: var(--tinte2); }
.sim-knoepfe { display: flex; flex-wrap: wrap; gap: 8px; margin-left: auto; }
.sim-kopf { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 14px; color: var(--tinte2); margin: 0 0 10px; align-items: baseline; }
.sim-kopf b { color: var(--tinte); font-family: var(--f-display); font-size: 17px; }
.sim-unsicher { color: var(--holz); font-weight: 700; }
.sim-fall { margin-bottom: 12px; }
.sim-quelle { color: var(--tinte2); margin-bottom: 6px; }
.sim-nav { justify-content: space-between; }
.mini-knopf { background: var(--wand); border: 1.5px solid var(--tinte); border-radius: 8px; padding: 6px 10px; min-height: 40px; font-size: 14px; color: var(--tinte); }
.mini-knopf.an { background: var(--tinte); color: var(--wand); }
.sim-filter { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.sim-gitter { display: grid; grid-template-columns: repeat(auto-fill, minmax(48px, 1fr)); gap: 8px; margin: 12px 0; }
.sim-hf { grid-column: 1 / -1; font-family: var(--f-display); font-weight: 700; margin-top: 6px; }
.sim-nr { position: relative; min-height: 44px; border: 2px solid var(--tinte); border-radius: 8px; background: var(--weiss); font-family: var(--f-zahl); font-weight: 700; color: var(--tinte); padding: 0; }
.st-beantwortet { background: var(--gruen-hell) !important; }
.st-teilweise { background: var(--gold-hell) !important; }
.sim-nr.mk { outline: 3px solid var(--gold); outline-offset: 1px; }
.sim-nr i { position: absolute; top: 1px; right: 4px; font-size: 11px; font-style: normal; color: var(--holz); }
.sim-legende { display: flex; flex-wrap: wrap; gap: 6px 16px; color: var(--tinte2); }
.sim-legende i { display: inline-block; width: 14px; height: 14px; border: 2px solid var(--tinte); border-radius: 4px; background: var(--weiss); margin-right: 6px; vertical-align: -2px; }
.sim-legende i.mk { outline: 3px solid var(--gold); }
.sim-ergebnis table { text-align: left; margin: 12px 0; }
.sim-loesungen-kopf { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; margin: 22px 0 0; }
.sim-nurfalsch { display: flex; align-items: center; gap: 8px; min-height: 40px; font-weight: 700; cursor: pointer; }
.sim-nurfalsch input { width: 20px; height: 20px; accent-color: var(--wald); }
.sim-loesung { margin-top: 12px; }
.sim-loesung.ok { border-left: 6px solid var(--gruen); }
.sim-loesung.nein { border-left: 6px solid var(--rot); }
.sim-urteil { font-weight: 700; color: var(--tinte); }
.sim-loesung.nein .sim-urteil { color: var(--rot); }
details.sim-fallakte { margin: 0 0 10px; border: 1.5px dashed var(--strich); border-radius: 10px; padding: 0 10px; }
details.sim-fallakte summary { cursor: pointer; font-weight: 700; min-height: 40px; display: flex; align-items: center; }
details.sim-fallakte[open] { padding-bottom: 8px; }
@media (max-width: 520px) {
  /* Leiste kompakt halten, sie klebt beim Scrollen oben */
  .sim-leiste { padding: 6px 10px; gap: 2px 10px; }
  .sim-uhr b { font-size: 18px; }
  .sim-knoepfe { margin-left: 0; width: 100%; flex-wrap: nowrap; gap: 6px; }
  .sim-knoepfe .knopf { flex: 1 1 0; min-width: 0; min-height: 40px; padding: 6px 8px; font-size: 14px; }
}

/* Lange Handlungsfeld-Titel („Ausbildungsvoraussetzungen …“) dürfen die Kachel nicht sprengen.
   Keine Silbentrennung in Titeln („Betriebli-ches Management“), nur in Tabellen und Fließtext; ein einzelnes Wort,
   das gar nicht passt, bricht trotzdem um. */
.geb { min-width: 0; }
/* Spur der Info-Spalte darf schmaler als das längste Wort werden, sonst ragen Titel und Balken über den Kartenrand (Desktop, UX-Test 02.10.2026) */
.geb .info { min-width: 0; grid-template-columns: minmax(0, 1fr); }
.geb h3 { hyphens: manual; -webkit-hyphens: manual; overflow-wrap: break-word; }

/* ---------- Schmale Bildschirme: Tippziele, Fallakten, Etagenschilder ---------- */
/* Tippziele mindestens 44 px (index.html setzt 36 px, daher die höhere Spezifität über .wrap) */
.wrap .hud-knopf, .wrap .ton { min-height: 44px; }
.wrap .brot button { min-height: 44px; display: inline-flex; align-items: center; text-align: left; }
.zusatzknopf, .spickknopf { min-height: 44px; }
.vergessen-link a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 10px; }
.fuss .link { min-height: 44px; display: inline-flex; align-items: center; }
/* Etagenschild: an Silbengrenzen trennen statt mitten im Wort abschneiden */
.etage .schild small { overflow-wrap: break-word; }

/* Breite Fallakten-Tabellen mit drei und mehr Spalten: engine.js setzt .gestapelt, sobald die Tabelle nicht in ihre Spalte passt.
   Dann je Zeile die Zeilenbeschriftung als Überschrift, darunter jeder Wert mit seinem Spaltenkopf (data-label). */
table.fall.breit.gestapelt, table.fall.breit.gestapelt tbody, table.fall.breit.gestapelt tr, table.fall.breit.gestapelt th, table.fall.breit.gestapelt td { display: block; width: auto; }
table.fall.breit.gestapelt tr:first-child { display: none; }
table.fall.breit.gestapelt tr { padding: 8px 0; }
table.fall.breit.gestapelt tr:nth-child(2) { border-top: 0; padding-top: 2px; }
table.fall.breit.gestapelt th { padding: 0 0 4px; font-weight: 700; color: var(--tinte); }
table.fall.breit.gestapelt th[data-label]::before { content: attr(data-label) " "; font-weight: 400; color: var(--tinte2); }
table.fall.breit.gestapelt td { padding: 2px 0 4px; font-family: var(--f-text); font-size: 15px; line-height: 1.4; }
table.fall.breit.gestapelt td[data-label]::before { content: attr(data-label); display: block; font-size: 13px; color: var(--tinte2); line-height: 1.3; }

/* Zweispaltige Fallakten (Schlüssel und Wert) auf Handys im Hochformat: Schlüssel über Wert statt Zeichenumbruch mitten im Wort oder Überlauf */
@media (max-width: 480px) {
  .wrap table.fall:not(.breit):not(.sim-vert):not(.sim-tab), .wrap table.fall:not(.breit):not(.sim-vert):not(.sim-tab) tbody,
  .wrap table.fall:not(.breit):not(.sim-vert):not(.sim-tab) tr { display: block; width: auto; }
  .wrap table.fall:not(.breit):not(.sim-vert):not(.sim-tab) th,
  .wrap table.fall:not(.breit):not(.sim-vert):not(.sim-tab) td { display: block; text-align: left; white-space: normal; overflow-wrap: break-word; hyphens: auto; -webkit-hyphens: auto; }
  .wrap table.fall:not(.breit):not(.sim-vert):not(.sim-tab) th { padding: 6px 0 0; font-size: 14px; }
  .wrap table.fall:not(.breit):not(.sim-vert):not(.sim-tab) td { padding: 0 0 6px; }
}

/* Grund für einen grauen Prüfen-Knopf */
.knopf-hinweis{margin:6px 0 0;font-size:.95rem;color:var(--tinte2)}
.knopf-hinweis:empty{display:none}

/* Levelstand: angefangenes Level im Haus und Hinweis nach dem Neuladen */
.raum .ls-marke{margin-top:4px;font-size:12px;font-weight:700;color:var(--wald);background:var(--gold-hell);border-radius:6px;padding:2px 7px;align-self:flex-start}
.ls-hinweis{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 12px;background:var(--gold-hell);border:2px solid var(--tinte);border-radius:10px;padding:8px 12px;margin:0 0 12px;font-size:.95rem}
.ls-hinweis .link{min-height:44px}
/* ---------- Handyansicht der Aufgabe (UX-Bericht Punkt 3): Frage ohne langes Scrollen, Prüfen in der Daumenzone ----------
   Bis 600 px: Kopfleiste in einer Zeile, Brotkrumen in einer Zeile, Figur und Chat während der Aufgaben als Bottom-Sheet
   („Frag …“, engine.js sheetBinden), Prüfen beziehungsweise Nächste Aufgabe als klebende Leiste am unteren Rand.
   Die Fallakte ist ab der zweiten Aufgabe desselben Falls eingeklappt (engine.js fallakteKlappen, Regeln weiter unten). Darüber hinaus (Desktop, Tablet) gilt nur der erste Block. */
.frag-auf, .sheet-zu, .sheet-schleier { display: none; }
.aktionen > .knopf-hinweis { flex-basis: 100%; margin-top: -4px; }   /* #kh steht in der Knopfzeile: gleicher Abstand wie vorher (gap 10 minus 4) */

@media (max-width: 600px) {
  /* Kopf: Marke kleiner, Untertitel nur außerhalb der Level */
  .kopf { gap: 8px 12px; padding-block: 4px 10px; }
  body:has(.level) .marke h1 { font-size: 24px; }
  body:has(.level) .marke p { display: none; }
  body:has(.level) .logo { height: 28px; }
  /* HUD in einer Zeile: Rang und XP links (XP-Balken darunter), Abzeichen, Mein Stand */
  /* Rang über die ganze linke Spalte, bei Bedarf zweizeilig (Abnahme N7: „Neu im Ausbildun…“ war abgeschnitten);
     XP-Zahl rechts neben dem Balken. Die Höhe bleibt bei der des Knopfs „Mein Stand“. */
  .hud { flex: 1 1 100%; display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; grid-template-rows: auto auto; column-gap: 8px; row-gap: 3px; padding: 6px 8px 6px 12px; box-sizing: border-box; }
  .hud > div:first-child { display: contents; }
  .hud .rang { grid-column: 1 / 3; grid-row: 1; align-self: end; min-width: 0; font-size: 13px; line-height: 1.15; overflow-wrap: break-word; hyphens: auto; -webkit-hyphens: auto; }
  .hud .xpzahl { grid-column: 2; grid-row: 2; align-self: center; white-space: nowrap; font-size: 0; line-height: 1; }
  .hud .xpzahl::before { content: attr(data-kurz); font-size: 11px; }   /* nur „N XP“, der nächste Rang steht im Profil */
  .hud .xpbar { grid-column: 1; grid-row: 2; align-self: center; width: auto; height: 7px; }
  .hud .abz { grid-column: 3; grid-row: 1 / 3; align-self: center; white-space: nowrap; font-size: 12px; }
  .hud .hud-knopf { grid-column: 4; grid-row: 1 / 3; align-self: center; white-space: nowrap; }

  /* Brotkrumen im Level: eine Zeile, langer Haustitel mit Auslassungspunkten, Leveltitel steht ohnehin darunter */
  .brot:has(+ .level) { flex-wrap: nowrap; margin-bottom: 4px; min-width: 0; }
  .brot:has(+ .level) #zh { display: block; min-width: 0; flex: 0 1 auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 44px; }
  .brot:has(+ .level) #zc { flex: none; }
  .brot:has(+ .level) #zh ~ span { display: none; }

  /* Levelkopf: Überschrift, darunter Fortschrittspunkte und „Frag …“ in einer Zeile */
  .level { gap: 14px; }
  .pult { gap: 12px; }
  .pult-kopf { row-gap: 6px; }
  .pult-kopf h2 { flex: 1 1 100%; font-size: 22px; }
  .level:has(#inhalt .frage) .frag-auf { display: inline-flex; align-items: center; min-height: 44px; margin-left: auto; background: var(--wand); color: var(--tinte); border: 2px solid var(--tinte); border-radius: 22px; padding: 6px 16px; font-weight: 700; font-size: 15px; box-shadow: 2px 2px 0 var(--tinte); }
  .frag-auf[aria-expanded="true"] { background: var(--gold-hell); }

  /* Bühne während der Aufgaben: Bottom-Sheet, geschlossen aus dem Bild geschoben */
  .level:has(#inhalt .frage) .buehne {
    position: fixed; top: auto; left: 0; right: 0; bottom: 0; z-index: 30; max-height: 85vh; max-height: 85dvh; overflow: auto; overscroll-behavior: contain;
    border-radius: 18px 18px 0 0; border-bottom: 0; box-shadow: 0 -3px 0 var(--tinte);
    padding-bottom: env(safe-area-inset-bottom, 0px); box-sizing: border-box;
    transform: translateY(105%); visibility: hidden;
  }
  .level:has(#inhalt .frage) .buehne.bewegt { transition: transform .25s ease, visibility 0s linear .25s; }   /* erst nach dem ersten Öffnen, sonst gleitet die Bühne beim Aufgabenstart sichtbar hinaus */
  .level:has(#inhalt .frage) .buehne.offen { transform: none; visibility: visible; transition: transform .25s ease, visibility 0s; }
  .level:has(#inhalt .frage) .sheet-zu { display: flex; align-items: center; justify-content: center; grid-column: 1 / -1; min-height: 44px; background: var(--boden); border: 0; border-bottom: 2px solid var(--tinte); font-weight: 700; color: var(--tinte); }
  .level:has(#inhalt .frage) .sheet-zu::before { content: ""; width: 40px; height: 5px; border-radius: 3px; background: var(--tinte2); margin-right: 10px; }
  .level:has(#inhalt .frage) .buehne.offen ~ .sheet-schleier { display: block; position: fixed; inset: 0; z-index: 29; background: var(--schleier-sheet); }
  .buehne .verlauf { max-height: 34vh; }

  /* Prüfen und Nächste Aufgabe als feste Leiste unten in der Daumenzone. Die Seite bekommt unten so viel Luft,
     dass sich jede Zeile über die Leiste schieben lässt; der Hinweis #kh sitzt in derselben Leiste und bleibt sichtbar. */
  .karte:not(:has(#weiter)) > .aktionen:has(> #pw, > #pm, > #ps), #hilfe:has(> #weiter) {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 15; margin: 0; background: var(--wand);
    padding: 10px max(16px, env(safe-area-inset-right, 0px)) calc(10px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
    border-top: 2px solid var(--tinte); box-shadow: 0 -6px 14px var(--sheet-schatten);
  }
  body:has(#inhalt .frage) .wrap { padding-bottom: calc(150px + env(safe-area-inset-bottom, 0px)); }
  .aktionen > #pw, .aktionen > #pm, .aktionen > #ps, #hilfe > #weiter { flex: 1 1 100%; min-height: 48px; font-size: 17px; }
  .aktionen > .knopf-hinweis { margin: -2px 0 0; font-size: 14px; line-height: 1.35; }

  /* Level-Ende (Abnahme N3): Ergebnis mit Sternen und „Nächstes Level“ zuerst, die Figur klein darunter */
  .level:has(#inhalt .ende) .pult { order: -1; }
  .level:has(#inhalt .ende) .buehne { grid-template-columns: 84px 1fr; }
  .level:has(#inhalt .ende) .buehne canvas { height: 104px; }
  .level:has(#inhalt .ende) .blase { font-size: 13px; }

  /* Simulation (Abnahme N5): Vorige, Markieren und Nächste Aufgabe als feste Leiste unten wie im Level */
  .sim-nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 15; margin: 0; flex-wrap: nowrap; gap: 8px; background: var(--wand);
    padding: 10px max(16px, env(safe-area-inset-right, 0px)) calc(10px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
    border-top: 2px solid var(--tinte); box-shadow: 0 -6px 14px var(--sheet-schatten); }
  .wrap .sim-nav .knopf { flex: 0 0 auto; min-height: 48px; padding: 6px 10px; font-size: 0; }
  .wrap .sim-nav .knopf::before { content: attr(data-kurz); font-size: 14px; }
  .wrap .sim-nav #sim-nach { flex: 1 1 auto; font-size: 17px; }
  .wrap .sim-nav #sim-nach::before { content: none; }
  body:has(.sim-nav) .wrap { padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)); }
  .sim-frage-oben { margin: 0 0 12px; }

  /* Tippziele mindestens 44 px auch bei Zuordnungen und im Seitenfuß */
  .wrap .kats button { min-height: 44px; }
  .wrap .seitenfuss a { display: inline-flex; align-items: center; min-height: 44px; }
  .wrap .fuss a[href="/impressum"] { display: inline-flex; align-items: center; min-height: 44px; vertical-align: middle; }
}
/* Eingeklappte Fallakte (engine.js fallakteKlappen, nur am Handy ab der zweiten Aufgabe desselben Falls) */
.fa-kopf { display: flex; align-items: center; gap: 8px 12px; flex-wrap: wrap; }
.fa-zeile { flex: 1 1 140px; min-width: 0; margin: 0; overflow-wrap: break-word; }
.fa-zeile .sim-quelle { margin: 0; }
.fa-knopf { min-height: 44px; background: var(--weiss); color: var(--tinte); border: 2px solid var(--tinte); border-radius: 10px; padding: 7px 12px; font-size: 14px; font-weight: 700; }
.fa-knopf[aria-expanded="true"] { background: var(--tinte); color: var(--wand); }
.fa-klappbar:not(.fa-zu) .fa-kopf { margin-bottom: 10px; }
.karte.fa-zu { padding-block: 8px; }

/* Sehr schmale Handys: Abzeichen als Kurzform, damit Rang und XP Platz behalten */
@media (max-width: 420px) {
  .hud .abz { font-size: 0; padding: 2px 6px; }
  .hud .abz::before { content: attr(data-kurz); font-size: 12px; }
  .hud .hud-knopf { padding: 3px 8px; }
}
@media (max-width: 600px) and (prefers-reduced-motion: reduce) {
  .level:has(#inhalt .frage) .buehne.bewegt, .level:has(#inhalt .frage) .buehne.offen { transition: none; }
}

/* Rückmeldung nach dem Prüfen (UX-Bericht Punkt 9, 02.10.2026): Lesetype, nur Rechenzahlen in Festbreite */
.weg.rm { font-family: var(--f-text); font-size: 16px; line-height: 1.55; }
.weg.rm b { margin-bottom: 4px; }
.weg.rm p { margin: 0; overflow-wrap: break-word; }
.weg.rm p + p { margin-top: 6px; }
.rm-label { font-weight: 700; }
.weg.rm .rz { font-family: var(--f-zahl); font-size: .92em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.weg.rm .xpflug { font-family: var(--f-zahl); }
.knopf.erledigt:disabled { background: transparent; color: var(--tinte2); border-color: var(--tinte2); border-style: dashed; box-shadow: none; opacity: .6; }

/* Prüfungssimulation am Handy (UX-Bericht Punkt 10): Auswertung ohne Überlauf, Beenden zweitrangig */
.sim-tab-huelle { max-width: 100%; overflow-x: auto; }
table.sim-tab td { padding-left: 16px; }
.sim-knoepfe .knopf.sim-beenden { font-weight: 600; box-shadow: none; }
@media (max-width: 640px) {
  .wrap table.sim-tab, .wrap table.sim-tab tbody, .wrap table.sim-tab tr { display: block; width: auto; }
  .wrap table.sim-tab tr.sim-tab-kopf { display: none; }
  .wrap table.sim-tab tr + tr { border-top: 0; }
  .wrap table.sim-tab tr:not(.sim-tab-kopf) { padding: 8px 0; border-bottom: 1px dashed var(--strich); }
  .wrap table.sim-tab th { display: block; padding: 0 0 2px; color: var(--tinte); font-weight: 700; overflow-wrap: break-word; hyphens: auto; -webkit-hyphens: auto; }
  .wrap table.sim-tab td { display: inline; padding: 0; text-align: left; white-space: normal; }
  .wrap table.sim-tab td::before { content: attr(data-k) ": "; font-family: var(--f-text); color: var(--tinte2); }
  .wrap table.sim-tab td + td::before { content: " · " attr(data-k) ": "; }
}

/* ---------- Erklärvideos (Videothek im Haus, Knopf im Level, Player-Fenster) ---------- */
.videothek { margin-top: 16px; }
.videothek summary { cursor: pointer; display: flex; gap: 10px; align-items: baseline; min-height: 40px; }
.videothek summary small { color: var(--tinte2); }
.videothek h3 { font-family: var(--f-display); margin: 14px 0 8px; font-size: 1.05rem; }
.vid-liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px; }
.vid-zeile { display: flex; gap: 10px; align-items: flex-start; text-align: left; background: var(--wand); border: 2px solid var(--tinte); border-radius: 10px; padding: 10px 12px; min-height: 44px; cursor: pointer; font: inherit; color: var(--tinte); }
.vid-zeile:hover { background: var(--gold-hell); }
.vid-play { flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--wald); color: var(--weiss); display: grid; place-items: center; font-size: .8rem; }
.vid-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.vid-text small { color: var(--tinte2); }
.vid-schleier { position: fixed; inset: 0; background: var(--vid-schleier); z-index: 60; display: grid; place-items: center; padding: 16px; }
.vid-fenster { width: min(720px, 100%); max-height: 92vh; overflow: auto; }
.vid-fenster.vid-gross { width: min(1100px, 100%); }
.vid-kopf { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 10px; }
.vid-fenster video { width: 100%; display: block; background: var(--vid-grund); border-radius: 8px; aspect-ratio: 16 / 9; }
.vid-ziel { margin: 10px 0 0; color: var(--tinte2); }
.vid-kapitel { font-family: var(--f-text); font-size: .95rem; font-weight: 700; color: var(--tinte2); margin: 14px 0 6px; }
/* Unterlagen zum Herunterladen (Campus aufklappbar, im Haus offen); Zeilen wie bei den Erklärvideos */
.unterlagen { margin-top: 16px; }
.unterlagen summary { cursor: pointer; display: flex; gap: 10px; align-items: baseline; min-height: 40px; }
.unterlagen summary small { color: var(--tinte2); }
.unterlagen h3 { font-family: var(--f-display); margin: 0 0 8px; font-size: 1.05rem; }
.dl-zeile { display: flex; gap: 10px; align-items: flex-start; text-align: left; background: var(--wand); border: 2px solid var(--tinte); border-radius: 10px; padding: 10px 12px; min-height: 44px; color: var(--tinte); text-decoration: none; }
.dl-zeile:hover { background: var(--gold-hell); }
.dl-symbol { flex: none; min-width: 36px; height: 28px; padding: 0 4px; border-radius: 6px; background: var(--wald); color: var(--weiss); display: grid; place-items: center; font: 700 .7rem var(--f-zahl); }
.dl-pfeil { flex: none; margin-left: auto; align-self: center; color: var(--wald); font-weight: 700; font-size: 1.1rem; }
#lvideo { display: inline-block; }

/* Mehrere Prüfungssimulationen je Produkt (simulation.varianten, seit 19.10.2026): Auswahl, Gesamtergebnis, Auswertung */
.sim-varianten { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 12px; margin: 14px 0; }
.sim-var { display: flex; flex-direction: column; gap: 6px; min-width: 0; background: var(--wand); border: 2px solid var(--tinte); border-left-width: 6px; border-radius: 12px; padding: 12px 14px; }
.sim-var.ok { border-left-color: var(--gruen); }
.sim-var.nein { border-left-color: var(--rot); }
.sim-var.laeuft { border-left-color: var(--gold); background: var(--gold-hell); }
.sim-var h3 { font-family: var(--f-display); font-size: 18px; margin: 0; overflow-wrap: break-word; hyphens: auto; -webkit-hyphens: auto; }
.sim-var p { margin: 0; }
.sim-var .klein { color: var(--tinte2); }
.sim-var-erg { font-weight: 700; }
.sim-var .aktionen { margin-top: auto; padding-top: 4px; }
.sim-var .knopf, .sim-laeuft .knopf, .sim-auswahl .aktionen .knopf { min-height: 44px; }
.sim-laeuft { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 14px; background: var(--gold-hell); border: 2px solid var(--tinte); border-radius: 12px; padding: 10px 14px; margin: 0 0 12px; }
.sim-laeuft > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sim-laeuft .klein { color: var(--tinte2); }
.sim-gesamt { background: var(--zettel); border: 2px solid var(--tinte); border-left-width: 6px; border-radius: 12px; padding: 12px 14px; margin: 0 0 12px; }
.sim-gesamt.sim-g-bestanden { border-left-color: var(--gruen); }
.sim-gesamt.sim-g-ergaenzung { border-left-color: var(--gold); }
.sim-gesamt.sim-g-nicht_bestanden { border-left-color: var(--rot); }
.sim-gesamt.sim-g-unvollstaendig { border-left-color: var(--strich); }
.sim-gesamt p { margin: 6px 0 0; }
.sim-g-status { display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: baseline; font-size: 17px; }
.sim-g-status span { font-size: 15px; color: var(--tinte2); }
table.sim-g-tab { text-align: left; margin: 8px 0 0; }
table.sim-g-tab tr.sim-g-rot td { color: var(--rot); font-weight: 700; }
table.sim-g-tab tr.sim-g-gelb td { color: var(--holz); font-weight: 700; }
table.sim-g-tab tr.sim-g-gruen td { color: var(--gruen); font-weight: 700; }
.sim-erg-titel { font-family: var(--f-display); font-weight: 700; color: var(--tinte2); margin: 4px 0 0; overflow-wrap: break-word; }
.sim-erg-gesamt { background: var(--wand); border: 1.5px dashed var(--strich); border-radius: 10px; padding: 8px 12px; }
.wrap .brot #zc-pz { min-height: 44px; }