/* Tafel-Präsentation der Schulkurse: dunkle Bühne, große Schrift, eine Folie je Bildschirm. */
:root {
  --tafel: #0F1420; --tafel-2: #171E2E; --kreide: #F4F2EC; --kreide-matt: #B9BCC2;
  --amber: #FCAF3B; --amber-deep: #E39A1F; --gruen: #4CAF7A; --rot: #E25D4B; --blau: #4F8EF7;
}
html, body.deck-body { margin: 0; height: 100%; background: var(--tafel); color: var(--kreide); overflow: hidden; font-family: "Inter", system-ui, sans-serif; }
.deck-body * { box-sizing: border-box; }
.deck { position: fixed; inset: 0; }
.folie { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 5vh 7vw 11vh; opacity: 0; visibility: hidden; pointer-events: none; background: radial-gradient(1200px 700px at 70% 20%, var(--tafel-2), var(--tafel) 70%); }
.folie.aktiv { opacity: 1; visibility: visible; pointer-events: auto; z-index: 2; }
.folie-hintergrund { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: .32; }
.folie-hintergrund::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(15,20,32,.1) 0%, rgba(15,20,32,.75) 70%, var(--tafel) 100%); }
.folie-hintergrund.voll { opacity: 1; }
.folie-hintergrund.voll::after { background: linear-gradient(180deg, rgba(15,20,32,0) 40%, rgba(15,20,32,.85) 100%); }
.folie-inhalt { position: relative; z-index: 1; width: min(1240px, 100%); }
.folie-inhalt.mittig { text-align: center; }
.folie-inhalt.unten { align-self: flex-end; margin-bottom: 2vh; }
.folie-inhalt.geteilt { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 5vw; align-items: center; }
.eyebrow { font-family: var(--font-display, "Archivo", sans-serif); font-size: clamp(13px, 1.3vw, 18px); letter-spacing: .14em; text-transform: uppercase; color: var(--kreide-matt); margin: 0 0 1.2vh; font-weight: 600; }
.eyebrow.hell { color: var(--kreide); opacity: .85; }
.eyebrow.amber { color: var(--amber); }
.haken { color: var(--gruen); }
h1, h2 { font-family: var(--font-display, "Archivo", sans-serif); color: #fff; line-height: 1.08; margin: 0 0 2.4vh; letter-spacing: -.01em; }
h1.riesig { font-size: clamp(40px, 6.4vw, 96px); }
h1.gross { font-size: clamp(34px, 5.2vw, 78px); }
h2 { font-size: clamp(30px, 4vw, 60px); }
h2 .fortsetzung { font-size: .5em; color: var(--kreide-matt); font-weight: 500; }
.lede { font-size: clamp(20px, 2.2vw, 34px); line-height: 1.4; margin: 0 auto; max-width: 980px; }
.lede.hell { color: var(--kreide); }
.hinweis-klein { color: var(--kreide-matt); font-size: clamp(14px, 1.3vw, 18px); margin-top: 5vh; }
.folie-text { font-size: clamp(22px, 2.5vw, 38px); line-height: 1.45; color: var(--kreide); }
.folie-text p, .box-inhalt p { margin: 0 0 1.6vh; }
.folie-text ul, .folie-text ol { margin: 0; padding-left: 1.2em; }
.folie-text li { margin: 0 0 1.4vh; padding-left: .2em; }
.folie-text li::marker { color: var(--amber); }
.folie-text strong, .box-inhalt strong { color: #fff; }
.folie-text a { color: var(--amber); }
.folie-text table { font-size: .72em; border-collapse: collapse; width: 100%; }
.folie-text th, .folie-text td { border: 1px solid rgba(255,255,255,.18); padding: .5em .8em; text-align: left; }
.folie-text th { background: rgba(255,255,255,.06); }
.folie-text blockquote { border-left: 4px solid var(--amber); margin: 0; padding: .2em 1em; color: var(--kreide-matt); }
.folie-text code { background: rgba(255,255,255,.1); padding: .05em .3em; border-radius: 4px; font-size: .85em; }
.folie-text img { max-width: 100%; max-height: 45vh; border-radius: 12px; }
.box-karte { display: inline-block; text-align: left; max-width: 1000px; padding: 4vh 4vw; border-radius: 24px; border: 2px solid; background: rgba(255,255,255,.04); font-size: clamp(24px, 2.9vw, 44px); line-height: 1.35; }
.box-merke { border-color: var(--amber); box-shadow: 0 0 80px rgba(252,175,59,.18); }
.box-tipp { border-color: var(--gruen); box-shadow: 0 0 80px rgba(76,175,122,.18); }
.box-ergaenzung { border-color: var(--blau); box-shadow: 0 0 80px rgba(79,142,247,.18); }
.box-label { display: block; font-family: var(--font-display, sans-serif); font-size: .5em; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 1.4vh; }
.box-merke .box-label { color: var(--amber); } .box-tipp .box-label { color: var(--gruen); } .box-ergaenzung .box-label { color: var(--blau); } .box-loesung .box-label { color: #C79BE6; }
.box-loesung { border-color: #A86FD1; box-shadow: 0 0 80px rgba(168,111,209,.18); min-width: min(1000px, 80vw); }
.loesung-verdeckt { margin: 0; font-size: .6em; color: rgba(255,255,255,.55); font-style: italic; }
.box-loesung:has(.frag.da) .loesung-verdeckt { display: none; }
.bildtext { font-size: clamp(22px, 2.6vw, 40px); color: #fff; max-width: 1000px; text-shadow: 0 2px 20px rgba(0,0,0,.6); margin: 0; }
.optionen { font-size: clamp(22px, 2.5vw, 38px); line-height: 1.4; padding-left: 1.4em; margin: 0 0 3vh; }
.optionen li { margin: 0 0 1.4vh; } .optionen li::marker { color: var(--amber); font-weight: 700; }
.qr-tafel { background: #fff; border-radius: 20px; padding: 2vh 1.5vw; text-align: center; color: var(--tafel); justify-self: center; }
.qr-tafel svg { width: min(300px, 26vw); height: auto; display: block; margin: 0 auto .8vh; }
.qr-tafel span { font-family: var(--font-display, sans-serif); font-weight: 700; font-size: clamp(14px, 1.3vw, 19px); }
.beispiel { font-size: clamp(21px, 2.3vw, 34px); line-height: 1.45; max-width: 1100px; }
.beispiel .szene { margin: 0 0 3vh; color: var(--kreide); }
.beispiel .frage, .beispiel .aufloesung { display: flex; gap: .7em; align-items: flex-start; margin: 0 0 2vh; padding: 1.4vh 1.4vw; border-radius: 16px; background: rgba(255,255,255,.05); }
.beispiel .aufloesung { background: rgba(76,175,122,.12); }
.frage-marke { flex: 0 0 1.5em; height: 1.5em; border-radius: 50%; background: var(--amber); color: var(--tafel); display: inline-flex; align-items: center; justify-content: center; font-weight: 800; }
.frage-marke.gruen { background: var(--gruen); color: #fff; }

/* Fragmente: erscheinen Schritt für Schritt */
.frag { opacity: 0; transform: translateY(14px); transition: opacity .45s ease, transform .45s ease; }
.frag.da { opacity: 1; transform: none; }
.folie-text > ul > li, .folie-text > ol > li, .folie-text > p + p { opacity: 0; transform: translateX(-14px); transition: opacity .45s ease, transform .45s ease; }
.folie.aktiv .folie-text > ul > li.da, .folie.aktiv .folie-text > ol > li.da, .folie.aktiv .folie-text > p + p.da { opacity: 1; transform: none; }

/* Einblend-Arten je Folie */
@keyframes f-zoom { from { opacity: 0; transform: scale(1.08); filter: blur(10px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes f-links { from { opacity: 0; transform: translateX(-70px); } to { opacity: 1; transform: none; } }
@keyframes f-rechts { from { opacity: 0; transform: translateX(70px); } to { opacity: 1; transform: none; } }
@keyframes f-auf { from { opacity: 0; transform: translateY(60px); } to { opacity: 1; transform: none; } }
@keyframes f-wisch { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes f-drehen { from { opacity: 0; transform: perspective(1400px) rotateY(-22deg) translateX(-40px); } to { opacity: 1; transform: none; } }
@keyframes f-klappen { from { opacity: 0; transform: perspective(1400px) rotateX(-28deg) translateY(40px); transform-origin: top; } to { opacity: 1; transform: none; } }
@keyframes f-puls { 0% { opacity: 0; transform: scale(.7); } 60% { opacity: 1; transform: scale(1.04); } 100% { transform: none; } }
@keyframes f-kenburns { from { transform: scale(1.02); } to { transform: scale(1.12); } }
@keyframes f-titelzeile { from { letter-spacing: .3em; opacity: 0; } to { letter-spacing: -.01em; opacity: 1; } }
.folie.aktiv[data-anim="zoom"] .folie-inhalt { animation: f-zoom .9s cubic-bezier(.2,.7,.2,1) both; }
.folie.aktiv[data-anim="links"] .folie-inhalt { animation: f-links .7s cubic-bezier(.2,.7,.2,1) both; }
.folie.aktiv[data-anim="rechts"] .folie-inhalt { animation: f-rechts .7s cubic-bezier(.2,.7,.2,1) both; }
.folie.aktiv[data-anim="auf"] .folie-inhalt { animation: f-auf .7s cubic-bezier(.2,.7,.2,1) both; }
.folie.aktiv[data-anim="wisch"] .folie-inhalt { animation: f-wisch .8s cubic-bezier(.6,0,.2,1) both; }
.folie.aktiv[data-anim="drehen"] .folie-inhalt { animation: f-drehen .9s cubic-bezier(.2,.7,.2,1) both; }
.folie.aktiv[data-anim="klappen"] .folie-inhalt { animation: f-klappen .8s cubic-bezier(.2,.7,.2,1) both; }
.folie.aktiv[data-anim="puls"] .box-karte { animation: f-puls .8s cubic-bezier(.2,.7,.2,1) both; }
.folie.aktiv[data-anim="kenburns"] .folie-hintergrund { animation: f-kenburns 14s linear both; }
.folie.aktiv[data-typ="titel"] h1, .folie.aktiv[data-typ="kurs"] h1 { animation: f-titelzeile 1.1s cubic-bezier(.2,.7,.2,1) both; }
.folie.weg .folie-inhalt { animation: none; }

/* Bedienleiste */
.deck-leiste { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; display: flex; align-items: center; gap: 8px; padding: 10px 16px 14px; background: linear-gradient(180deg, rgba(15,20,32,0), rgba(15,20,32,.9) 60%); opacity: .25; transition: opacity .3s; }
.deck-leiste:hover, .deck-body.zeige-leiste .deck-leiste { opacity: 1; }
.deck-knopf { font: 600 14px var(--font-display, sans-serif); color: var(--kreide); background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18); border-radius: 999px; padding: 8px 14px; cursor: pointer; text-decoration: none; }
.deck-knopf:hover { background: rgba(255,255,255,.16); }
.deck-knopf.klein { display: inline-block; margin-top: 1vh; font-size: clamp(13px, 1.2vw, 16px); }
.deck-lektion { flex: 1; font-size: 13px; color: var(--kreide-matt); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0 10px; }
.deck-zaehler { font: 600 13px var(--font-display, sans-serif); color: var(--kreide-matt); padding: 0 10px; }
.deck-fortschritt { position: fixed; left: 0; right: 0; bottom: 0; height: 4px; background: rgba(255,255,255,.08); z-index: 21; }
.deck-fortschritt span { display: block; height: 100%; width: 0; background: var(--amber); transition: width .4s ease; }
.deck-menue { position: fixed; inset: 0; z-index: 30; background: rgba(15,20,32,.92); display: flex; align-items: center; justify-content: center; padding: 4vh 4vw; }
.deck-menue[hidden] { display: none; }
.deck-menue-karte { background: var(--tafel-2); border: 1px solid rgba(255,255,255,.14); border-radius: 20px; padding: 3vh 3vw; max-width: 900px; width: 100%; max-height: 90vh; overflow: auto; }
.deck-menue-karte h3 { margin: 0 0 2vh; font-family: var(--font-display, sans-serif); font-size: 24px; color: #fff; }
.deck-menue-karte ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); gap: 6px; }
.deck-menue-karte a { display: flex; gap: 12px; align-items: center; padding: 10px 12px; border-radius: 12px; color: var(--kreide); text-decoration: none; font-size: 16px; }
.deck-menue-karte a:hover, .deck-menue-karte a.aktiv { background: rgba(255,255,255,.08); }
.deck-menue-karte a small { display: block; color: var(--kreide-matt); font-size: 12px; }
.deck-menue-karte .marke { flex: 0 0 30px; height: 30px; border-radius: 50%; border: 1px solid rgba(255,255,255,.3); display: inline-flex; align-items: center; justify-content: center; font: 700 13px var(--font-display, sans-serif); }
.deck-menue-karte .marke.fertig { background: var(--gruen); border-color: var(--gruen); color: #fff; }
.deck-hilfe { color: var(--kreide-matt); font-size: 13px; margin: 2vh 0 0; }

/* Simulationen: gemeinsame Bausteine */
.sim { font-size: clamp(17px, 1.6vw, 24px); line-height: 1.4; color: var(--kreide); }
.sim-buehne { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.12); border-radius: 20px; padding: 2.4vh 2vw; min-height: 46vh; position: relative; overflow: hidden; }
.sim-zeile { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin: 1.6vh 0 0; }
.sim-knopf { font: 600 clamp(15px, 1.4vw, 20px) var(--font-display, sans-serif); color: var(--tafel); background: var(--amber); border: 0; border-radius: 999px; padding: .55em 1.2em; cursor: pointer; transition: transform .15s, filter .15s; }
.sim-knopf:hover { filter: brightness(1.08); transform: translateY(-1px); }
.sim-knopf.neben { background: rgba(255,255,255,.1); color: var(--kreide); border: 1px solid rgba(255,255,255,.2); }
.sim-knopf.gruen { background: var(--gruen); color: #fff; }
.sim-knopf.rot { background: var(--rot); color: #fff; }
.sim-knopf:disabled { opacity: .45; cursor: default; transform: none; }
.sim-hinweis { color: var(--kreide-matt); font-size: .85em; margin: 1.2vh 0 0; }
.sim-fazit { margin: 1.6vh 0 0; padding: 1.2vh 1.4vw; border-radius: 14px; background: rgba(76,175,122,.14); border: 1px solid rgba(76,175,122,.4); color: #fff; opacity: 0; transform: translateY(10px); transition: all .5s; }
.sim-fazit.da { opacity: 1; transform: none; }
.sim-fazit.warn { background: rgba(226,93,75,.14); border-color: rgba(226,93,75,.5); }
.sim-zahl { font: 800 clamp(34px, 4.5vw, 70px) var(--font-display, sans-serif); color: var(--amber); line-height: 1; }
.sim-balken { height: 22px; border-radius: 999px; background: rgba(255,255,255,.08); overflow: hidden; }
.sim-balken > span { display: block; height: 100%; width: 0; background: var(--amber); transition: width .7s cubic-bezier(.2,.7,.2,1); }
.sim-karte { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); border-radius: 16px; padding: 1.4vh 1.2vw; transition: transform .35s, opacity .35s, box-shadow .35s; }
.sim-karte.weg { opacity: 0; transform: scale(.6); }
.sim-karte.markiert { box-shadow: 0 0 0 3px var(--amber); }
.sim-chat { display: flex; flex-direction: column; gap: 8px; max-width: 760px; }
.sim-blase { max-width: 80%; padding: .5em .9em; border-radius: 16px; background: rgba(255,255,255,.1); animation: f-auf .4s both; }
.sim-blase.ich { align-self: flex-end; background: var(--blau); color: #fff; }
.sim-blase.boese { background: rgba(226,93,75,.25); border: 1px solid rgba(226,93,75,.5); }
.sim-blase.gut { background: rgba(76,175,122,.25); border: 1px solid rgba(76,175,122,.5); }
.sim-raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin-top: 1.4vh; }
.sim-eingabe { font-size: 1em; padding: .5em .8em; border-radius: 10px; border: 1px solid rgba(255,255,255,.25); background: rgba(0,0,0,.25); color: #fff; min-width: 240px; }
.sim-punkt { position: absolute; width: 18px; height: 18px; border-radius: 50%; background: var(--kreide-matt); transition: background .6s ease, transform .6s cubic-bezier(.34,1.56,.64,1); }
.sim-punkt.falsch { background: var(--rot); transform: scale(1.4); }
.sim-punkt.wahr { background: var(--gruen); transform: scale(1.4); }
.sim-hotspot { position: absolute; padding: 0; border: 3px dashed rgba(252,175,59,.0); border-radius: 12px; background: transparent; cursor: pointer; transition: border-color .3s, background .3s; }
.sim-hotspot:hover { border-color: rgba(252,175,59,.6); }
.sim-hotspot.gefunden { border-color: var(--amber); border-style: solid; background: rgba(252,175,59,.18); }
.sim-hotspot-nr { position: absolute; left: -14px; top: -14px; width: 30px; height: 30px; border-radius: 50%; background: var(--amber); color: var(--tafel); font: 800 16px var(--font-display, sans-serif); display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 0 rgba(252,175,59,.7); animation: hotspot-puls 1.6s ease-out infinite; }
.sim-hotspot.gefunden .sim-hotspot-nr { animation: none; background: var(--gruen); color: #fff; }
@keyframes hotspot-puls { 0% { box-shadow: 0 0 0 0 rgba(252,175,59,.75); } 70% { box-shadow: 0 0 0 14px rgba(252,175,59,0); } 100% { box-shadow: 0 0 0 0 rgba(252,175,59,0); } }
.sim-fundliste { margin: 1.4vh 0; padding-left: 1.4em; font-size: .9em; }
.sim-fundliste li { margin: 0 0 1vh; color: var(--kreide-matt); }
.sim-fundliste li::marker { color: var(--amber); font-weight: 800; }
.sim-fundliste li.gefunden { color: var(--kreide); }
.sim-fundliste li.gefunden b { color: var(--gruen); }
@media (prefers-reduced-motion: reduce) { .sim-hotspot-nr { animation: none; } }
@media (max-width: 900px) {
  .folie { padding: 3vh 5vw 12vh; }
  .folie-inhalt.geteilt { grid-template-columns: 1fr; }
  .qr-tafel { display: none; }
}
@media (prefers-reduced-motion: reduce) { .folie.aktiv .folie-inhalt, .folie.aktiv .box-karte, .folie.aktiv .folie-hintergrund, .folie.aktiv h1 { animation: none !important; } .frag, .folie-text > ul > li { transition: none; } }

/* Live-Mitmachkarte auf der Folie (tafel.js), dunkel gestaltet */
.folie-aktivitaet { background: transparent; border: 0; padding: 0; }
.folie-aktivitaet-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 4vw; align-items: start; }
.folie-aktivitaet .tafel-ergebnis { font-size: clamp(17px, 1.7vw, 26px); color: var(--kreide); }
.folie-aktivitaet .tafel-leer, .folie-aktivitaet .tafel-fuss { color: var(--kreide-matt); }
.folie-aktivitaet .tafel-balken { display: grid; grid-template-columns: minmax(0, 1fr) minmax(120px, 36%) 3em; gap: 12px; align-items: center; margin: 0 0 .6em; }
.folie-aktivitaet .tafel-balken-spur { display: block; height: 16px; border-radius: 999px; background: rgba(255,255,255,.1); overflow: hidden; }
.folie-aktivitaet .tafel-balken-spur i { display: block; height: 100%; background: var(--amber); transition: width .5s; }
.folie-aktivitaet .tafel-balken.richtig .tafel-balken-spur i { background: var(--gruen); }
.folie-aktivitaet .tafel-balken.richtig .tafel-balken-text { color: var(--gruen); font-weight: 700; }
.folie-aktivitaet .tafel-balken.falsch .tafel-balken-text { color: var(--kreide-matt); }
.folie-aktivitaet .tafel-balken-zahl { text-align: right; font-weight: 700; }
.folie-aktivitaet .tafel-wolke { min-height: 24vh; }
.folie-aktivitaet .tafel-wolke span, .folie-aktivitaet .tafel-wolke b { color: inherit; }
.folie-aktivitaet .tafel-tabelle { width: 100%; border-collapse: collapse; }
.folie-aktivitaet .tafel-tabelle th, .folie-aktivitaet .tafel-tabelle td { border-bottom: 1px solid rgba(255,255,255,.14); padding: .3em .5em; text-align: left; }
.folie-aktivitaet .tafel-knoepfe { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 2.4vh; }
.folie-aktivitaet .tafel-status { color: var(--amber); font-weight: 600; }
.folie-aktivitaet .tafel-zaehler { color: var(--kreide-matt); margin-left: auto; font-size: .9em; }
.folie-aktivitaet .optionen { margin-bottom: 1.6vh; }
.folie-aktivitaet .qr-tafel[hidden] { display: none; }
@media (max-width: 900px) { .folie-aktivitaet-grid { grid-template-columns: 1fr; } }