/* IBS-Plattform: Look aus dem abgenommenen Prototyp (Variante A), Marke dunkel/Mint. */
@font-face { font-family: "Space Grotesk"; src: url("/static/fonts/space-grotesk-v22.woff2") format("woff2"); font-weight: 400 700; font-display: swap; }
:root {
  color-scheme: dark;
  --void: #02070A; --pane: #060F12; --karte: #0A1517;
  --mint: #6BD3AA; --mint-hell: #93E9C8; --mint-tief: #1E4A3D;
  --ink: #E9F2EF; --dim: #8FA3A0; --leise: #6E817E;
  --linie: rgba(233,242,239,.12); --linie-2: rgba(233,242,239,.2); --soft: rgba(233,242,239,.05);
  --krit: #E8837A; --warn: #E8C26A;
  --f-body: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --f-display: "Space Grotesk", var(--f-body);
}
* { box-sizing: border-box; }
html, body { background: var(--void); color: var(--ink); margin: 0; }
body { font-family: var(--f-body); font-size: 16px; line-height: 1.55; min-height: 100vh; display: flex; flex-direction: column; }
a { color: var(--mint); }
button, input, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--mint); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }
.wrap { max-width: 1180px; margin: 0 auto; padding-inline: 16px; width: 100%; }
h1, h2, h3 { font-family: var(--f-display); font-weight: 500; text-wrap: balance; margin: 0; }
h1 { font-size: clamp(1.7rem, 4vw, 2.3rem); }
.eyebrow { font-family: var(--f-display); font-size: .72rem; letter-spacing: .26em; text-transform: uppercase; font-weight: 600; color: var(--mint); margin: 0 0 .6rem; }
.dim { color: var(--dim); } .klein { font-size: .85rem; } .num { font-variant-numeric: tabular-nums; }
.kopf { border-bottom: 1px solid var(--linie); padding-top: env(safe-area-inset-top, 0px); }
.kopf-innen { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .8rem; padding-block: .9rem; }
.logo { font-family: var(--f-display); font-weight: 600; letter-spacing: .2em; font-size: .8rem; text-transform: uppercase; color: var(--ink); text-decoration: none; }
.haupt { flex: 1; padding-block: 2rem 4rem; }
.fuss { border-top: 1px solid var(--linie); color: var(--leise); font-size: .85rem; padding-bottom: env(safe-area-inset-bottom, 0px); }
.fuss-innen { display: flex; flex-wrap: wrap; gap: 1.2rem; padding-block: 1.2rem; }
.fuss a { color: var(--dim); }
.btn { display: inline-block; border: 1px solid var(--mint); background: var(--mint); color: #03201A; border-radius: 999px; padding: .7rem 1.3rem; font-family: var(--f-display); font-weight: 600; text-decoration: none; }
.btn:hover { background: var(--mint-hell); }
.btn.zweit { background: transparent; color: var(--mint); }
.btn.zweit:hover { background: var(--soft); }
.btn.klein { padding: .45rem .9rem; font-size: .88rem; }
.btn.gefahr { background: transparent; border-color: var(--krit); color: var(--krit); }
.btn.an { background: var(--mint-tief); color: var(--mint-hell); }
.schmal { max-width: 560px; margin: 0 auto; }
.mitte { max-width: 560px; margin: 2rem auto; display: grid; gap: 1rem; }
.icon { width: 56px; height: 56px; border-radius: 50%; border: 1px solid var(--mint); display: grid; place-items: center; color: var(--mint); font-size: 1.4rem; }
.formkarte { background: var(--karte); border: 1px solid var(--linie); border-radius: 16px; padding: 1.6rem; display: grid; gap: 1rem; }
.feld { display: grid; gap: .35rem; }
.feld label { font-size: .88rem; color: var(--dim); }
.feld input, textarea { background: var(--pane); border: 1px solid var(--linie-2); border-radius: 8px; padding: .7rem .8rem; width: 100%; }
.feld input:focus, textarea:focus { border-color: var(--mint); outline: none; }
.check { display: grid; grid-template-columns: 1.3rem 1fr; gap: .6rem; align-items: start; font-size: .92rem; }
.check input { width: 1.1rem; height: 1.1rem; margin-top: .2rem; accent-color: var(--mint); }
/* F8: zwei gleichwertige Knöpfe der Anmeldung, gleich breit; am Handy untereinander */
.knopfpaar { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); gap: .6rem; }
.knopfpaar .btn { width: 100%; }
.zustimmung { margin: 0; }
.lockfeld { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.fehler { color: var(--krit); margin: 0; }
.pill { display: inline-flex; align-items: center; border-radius: 999px; padding: .15rem .6rem; font-size: .78rem; border: 1px solid var(--linie-2); color: var(--dim); }
.pill.gut { border-color: rgba(107,211,170,.5); color: var(--mint); }
.pill.warn { border-color: rgba(232,194,106,.5); color: var(--warn); }
.bar { height: 6px; background: var(--soft); border-radius: 99px; overflow: hidden; }
.bar > i { display: block; height: 100%; background: var(--mint); border-radius: 99px; }
.badge { display: inline-grid; place-items: center; min-width: 1.25rem; height: 1.25rem; border-radius: 99px; background: var(--mint); color: #03201A; font-size: .72rem; font-weight: 700; padding: 0 .3rem; margin-left: .3rem; }
/* Mitgliederbereich */
.mnav { display: flex; flex-wrap: wrap; gap: .3rem; }
.mnav a { border: 1px solid transparent; border-radius: 999px; padding: .4rem .85rem; color: var(--dim); text-decoration: none; }
.mnav a[aria-current="page"] { border-color: var(--linie-2); color: var(--ink); }
.kurs { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 2rem; align-items: start; }
/* Im Seitenaufbau steht die Lektion vor der Liste (am Handy Video zuerst); am Rechner Liste links */
.kurs > .lektion { grid-column: 2; grid-row: 1; min-width: 0; }
.kurs > .leiste { grid-column: 1; grid-row: 1; }
.leiste { background: var(--pane); border: 1px solid var(--linie); border-radius: 14px; padding: 1rem; position: sticky; top: 1rem; max-height: calc(100vh - 2rem); overflow: auto; }
.leiste details { border-top: 1px solid var(--linie); }
.leiste details:first-of-type { border-top: 0; }
.leiste summary { list-style: none; cursor: pointer; padding: .75rem .2rem; display: grid; grid-template-columns: 1fr auto; gap: .5rem; font-family: var(--f-display); font-size: .94rem; }
.leiste summary::-webkit-details-marker { display: none; }
.lek { display: grid; grid-template-columns: 1.3rem 1fr auto; gap: .5rem; border-radius: 8px; padding: .45rem .4rem; color: var(--dim); font-size: .9rem; text-decoration: none; }
.lek[aria-current="page"] { background: var(--soft); color: var(--ink); }
.ok { color: var(--mint); } .offen { color: var(--leise); }
.player { width: 100%; max-width: 100%; aspect-ratio: 16 / 9; border-radius: 12px; background: #000; border: 1px solid var(--linie); display: block; }
.player-leer { display: grid; place-items: center; color: var(--dim); background: var(--karte); }
.lekkopf { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 1rem; margin-top: 1.1rem; }
.lekkopf h2 { font-size: 1.5rem; margin-top: .3rem; }
.aktionen { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.aktionen form { margin: 0; }
.stapel { display: grid; gap: 1rem; max-width: 720px; }
.karte { background: var(--karte); border: 1px solid var(--linie); border-radius: 14px; padding: 1.3rem; display: grid; gap: .7rem; }
.karte.neu { border-color: rgba(107,211,170,.55); }
.karte p { margin: 0; white-space: pre-wrap; }
.karte .inhalt { display: grid; gap: .6rem; overflow-wrap: anywhere; }
.karte .inhalt p { white-space: normal; } .karte .inhalt h3 { margin: .4rem 0 0; font-size: 1.05rem; }
.karte .inhalt ul, .karte .inhalt ol { margin: 0; padding-left: 1.3rem; display: grid; gap: .25rem; }
.zeilen { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: .4rem 1.2rem; margin: 0; }
.zeilen dt { color: var(--dim); } .zeilen dd { margin: 0; overflow-wrap: anywhere; }
.bestaetigen { border: 1px solid var(--krit); border-radius: 10px; padding: 1rem; display: grid; gap: .7rem; }
.meldung { background: var(--mint-tief); border: 1px solid rgba(107,211,170,.4); border-radius: 12px; padding: .8rem 1rem; }
@media (max-width: 900px) {
  .kurs { grid-template-columns: minmax(0, 1fr); }
  .kurs > .lektion, .kurs > .leiste { grid-column: 1; grid-row: auto; }
  .leiste { position: static; max-height: none; }
}
.lernstand { display: grid; gap: .4rem; margin-bottom: .8rem; }
.material { margin-top: 1.5rem; }
.material h3 { font-size: 1.05rem; }
.tabelle { overflow-x: auto; max-width: 100%; }
table { width: 100%; border-collapse: collapse; font-size: .9rem; }
th { text-align: left; font-weight: 500; color: var(--dim); font-size: .8rem; padding: .5rem .6rem; border-bottom: 1px solid var(--linie); white-space: nowrap; }
td { padding: .55rem .6rem; border-bottom: 1px solid var(--linie); }
/* Bezahlschalter (F5): Freischalt-Karte statt Video, Schloss an gesperrten Modulen */
.schloss { width: .95em; height: .95em; vertical-align: -.12em; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.leiste summary .zu { color: var(--leise); }
.freischalten { aspect-ratio: 16 / 9; border-radius: 12px; border: 1px solid rgba(107,211,170,.35); padding: clamp(1.2rem, 4vw, 2.4rem);
  background: radial-gradient(120% 90% at 0% 0%, rgba(107,211,170,.14), transparent 60%), var(--karte); display: grid; align-content: center; gap: .9rem; }
.freischalten > * { margin: 0; }
.freischalten h2 { font-size: clamp(1.25rem, 2.6vw, 1.7rem); }
.freischalten ul { padding: 0; list-style: none; display: grid; gap: .2rem; color: var(--dim); font-size: .92rem; }
.freischalten li::before { content: "·"; color: var(--mint); margin-right: .5rem; }
.freischalten .hinweis { font-size: .85rem; color: var(--dim); }
@media (max-width: 900px) { .freischalten { aspect-ratio: auto; } }
/* Danke-Seite nach dem Kauf (F6, Prototyp von Alwin am 13.10.2026 freigegeben) */
.danke { display: grid; gap: 1.4rem; padding-top: .8rem; }
.danke > :not(.buehne) { width: 100%; max-width: 680px; margin-inline: auto; }
.buehne { position: relative; height: clamp(220px, 36vw, 440px); border-radius: 20px; overflow: hidden; background: #0b1210; }
.buehne img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 8%; display: block; transition: filter 1.6s ease;
  animation: danke-heran 2.6s cubic-bezier(.2,.8,.2,1) both; }
.buehne::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(2,7,10,0) 30%, rgba(2,7,10,.7) 72%, var(--void) 100%); }
.danke[data-fall="wartet"] .buehne img { filter: saturate(.2) brightness(.45); }
.danke-kopf { position: relative; z-index: 1; margin-top: clamp(-170px, -13vw, -84px); display: grid; gap: .9rem; justify-items: start; }
.danke h1 { font-size: clamp(1.9rem, 5vw, 2.7rem); line-height: 1.12; }
.danke h1 .zweit { display: block; color: var(--dim); }
.haken { position: relative; width: 64px; height: 64px; border-radius: 50%; background: rgba(2,7,10,.55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.haken svg { width: 64px; height: 64px; fill: none; stroke: var(--mint); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.haken .kreis { stroke: rgba(107,211,170,.55); }
.haken .zug { stroke-width: 2.4; stroke-dasharray: 30; stroke-dashoffset: 30; animation: danke-zeichnen .5s cubic-bezier(.2,.8,.2,1) .25s forwards; }
.haken::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 1px solid var(--mint); opacity: 0; animation: danke-welle 1s ease-out .55s 1; }
.status { display: inline-flex; align-items: center; gap: .5rem; border-radius: 999px; padding: .25rem .75rem; font-size: .8rem; margin: 0;
  border: 1px solid rgba(107,211,170,.5); color: var(--mint); }
.status i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.status.laeuft { border-color: rgba(232,194,106,.5); color: var(--warn); }
.status.laeuft i { animation: danke-puls 1.4s ease-in-out infinite; }
.brief { grid-template-columns: 112px minmax(0, 1fr); gap: 1.3rem; align-items: start; padding: 1.5rem; }
.brief img { width: 112px; height: 112px; border-radius: 50%; object-fit: cover; border: 1px solid var(--linie-2); }
.brief .text { display: grid; gap: .75rem; }
.brief .text p { white-space: normal; }
.unterschrift { font-family: var(--f-display); font-size: 1.15rem; color: var(--ink); }
.unterschrift span { display: block; font-family: var(--f-body); font-size: .8rem; color: var(--leise); }
.freikarte, .wegekarte { padding: 1.4rem 1.5rem; gap: 1rem; }
.freikarte p, .wegekarte p { white-space: normal; }
.frei-kopf { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: .3rem 1rem; }
.frei-kopf h2 { font-size: 1.2rem; }
.module { list-style: none; margin: 0; padding: 0; display: grid; }
.module li { display: grid; grid-template-columns: 1.6rem minmax(0, 1fr) auto; gap: .8rem; align-items: center; padding: .75rem 0;
  border-top: 1px solid var(--linie); color: var(--dim); }
.module li:first-child { border-top: 0; }
.m-name { font-family: var(--f-display); font-size: 1rem; }
.m-nr { display: block; font-family: var(--f-body); font-size: .76rem; color: var(--leise); }
.m-umfang { font-size: .82rem; color: var(--leise); white-space: nowrap; }
.sym { width: 1.35rem; height: 1.35rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
.sym g, .sym .buegel { transform-box: fill-box; transform-origin: center; }
.sym .buegel { transform-origin: 100% 100%; }
.sym .zu-sym { color: var(--leise); }
.sym .auf-sym { opacity: 0; color: var(--mint); stroke: var(--mint); }
/* Freigeschaltet: Endzustand als Grundlage (gilt auch ohne Bewegung), die Animation spielt ihn einmal vor:
   Bügel springt auf, aus dem Schloss wird ein Haken, Zeile für Zeile */
.danke[data-fall="frei"] .module li { color: var(--ink); animation: danke-hell .35s ease calc(var(--i) * 110ms + 700ms) both; }
.danke[data-fall="frei"] .sym .buegel { transform: translateY(-3px) rotate(18deg); animation: danke-aufspringen .25s cubic-bezier(.3,1.4,.5,1) calc(var(--i) * 110ms + 450ms) both; }
.danke[data-fall="frei"] .sym .zu-sym { opacity: 0; animation: danke-weg .25s ease calc(var(--i) * 110ms + 680ms) both; }
.danke[data-fall="frei"] .sym .auf-sym { opacity: 1; animation: danke-da .3s cubic-bezier(.2,.8,.2,1) calc(var(--i) * 110ms + 710ms) both; }
.warte { margin: 0; font-size: .9rem; color: var(--warn); }
.warte[hidden] { display: none; }
.weiter { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1.1rem; }
.btn.gross { padding: .9rem 1.6rem; font-size: 1.05rem; transition: background .2s, opacity .3s; }
.btn[aria-disabled="true"] { opacity: .35; pointer-events: none; }
.wohin { font-size: .88rem; color: var(--dim); }
.beleg { margin: 0; font-size: .85rem; color: var(--leise); border-top: 1px solid var(--linie); padding-top: 1.1rem; }
.wege { list-style: none; margin: 0; padding: 0; display: grid; gap: .9rem; }
.wege li { display: grid; grid-template-columns: 2.2rem minmax(0, 1fr); gap: .8rem; align-items: start; }
.wege .rund { width: 2.2rem; height: 2.2rem; border-radius: 50%; border: 1px solid rgba(107,211,170,.45); display: grid; place-items: center; color: var(--mint); }
.wege .rund svg { width: 1.05rem; height: 1.05rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.wege p { margin: .3rem 0 0; }
@keyframes danke-heran { from { transform: scale(1.05); } to { transform: scale(1); } }
@keyframes danke-zeichnen { to { stroke-dashoffset: 0; } }
@keyframes danke-welle { from { opacity: .6; transform: scale(1); } to { opacity: 0; transform: scale(1.7); } }
@keyframes danke-puls { 50% { opacity: .25; } }
@keyframes danke-hell { from { color: var(--dim); } }
@keyframes danke-aufspringen { from { transform: none; } }
@keyframes danke-weg { from { opacity: 1; transform: scale(1); } to { opacity: 0; transform: scale(.7); } }
@keyframes danke-da { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: scale(1); } }
@media (max-width: 560px) {
  .brief { grid-template-columns: 64px minmax(0, 1fr); gap: 1rem; padding: 1.2rem; }
  .brief img { width: 64px; height: 64px; }
  .freikarte, .wegekarte { padding: 1.2rem; }
  .module li { grid-template-columns: 1.6rem minmax(0, 1fr); }
  .m-umfang { grid-column: 2; margin-top: -.45rem; }
}
@media (prefers-reduced-motion: reduce) {
  .danke *, .danke *::after { animation: none !important; }
  .haken .zug { stroke-dashoffset: 0; }
}