:root{
  --navy:#0A1628; --accent:#5BA4F5; --accent-2:#3E82D6;
  --text:#111E33; --muted:#4A5B76;
  --flaeche:#F5F7FA; --karte:#EEF5FE; --karte-rand:#CFE2FA;
  --weiss:#fff; --linie:#E3E9F2;
}
*{box-sizing:border-box}
body{margin:0;background:var(--flaeche);color:var(--text);
  font-family:'Plus Jakarta Sans',system-ui,sans-serif;font-size:17px;line-height:1.7;
  -webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:'Syne','Plus Jakarta Sans',sans-serif;line-height:1.14;margin:0}
.kursiv{font-family:Georgia,'Times New Roman',serif;font-style:italic;font-weight:400;letter-spacing:0}
a{color:var(--accent-2)}
.wrap{max-width:1000px;margin:0 auto;padding:0 24px}
.eng{max-width:720px;margin:0 auto}

/* ---------- Kopf ---------- */
header{background:var(--navy);color:#fff;position:relative;overflow:hidden;text-align:center}
header .wrap{padding:30px 24px 58px;position:relative;z-index:1}
header::before{content:"";position:absolute;right:-90px;top:-70px;width:420px;height:420px;
  background:url(icon.png) no-repeat center/contain;filter:brightness(0) invert(1);opacity:.10;z-index:0}
.leiste{display:flex;justify-content:space-between;align-items:center;gap:16px;text-align:left;
  font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:#93ACCC}
.leiste img{height:34px;width:auto;display:block}
.leiste a{color:#93ACCC;text-decoration:none}
.leiste a:hover{color:#fff}
.pille{display:inline-flex;align-items:center;gap:9px;background:rgba(91,164,245,.14);
  border:1px solid rgba(91,164,245,.38);color:#C6DEFB;border-radius:999px;padding:7px 17px;
  font-size:13px;letter-spacing:.08em;text-transform:uppercase;margin:44px 0 22px}
.pille::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent)}
header h1{font-size:clamp(32px,5vw,52px);color:#fff;letter-spacing:-.01em}
header h1 span{color:var(--accent)}
header p.unter{color:#B4C7E2;margin:20px auto 0;max-width:58ch;font-size:18px}
.meta{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:32px}
.meta div{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);
  border-radius:999px;padding:8px 18px;font-size:14px;color:#D5E3F4}
.meta div b{color:#fff;font-weight:600}
.kopfknoepfe{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;margin-top:38px}

/* ---------- Abschnitte ---------- */
section{padding:64px 0}
section.getoent{background:var(--weiss);border-top:1px solid var(--linie);border-bottom:1px solid var(--linie)}
.kopfzeile{text-align:center;margin-bottom:34px}
.eyebrow{font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent-2);
  font-weight:700;margin-bottom:14px}
.kopfzeile h2{font-size:clamp(26px,3.6vw,38px);letter-spacing:-.01em}
.kopfzeile p{color:var(--muted);margin:16px auto 0;max-width:62ch}

/* ---------- Video ---------- */
.video{position:relative;padding-top:56.25%;border-radius:18px;overflow:hidden;
  border:1px solid var(--linie);background:var(--navy)}
.video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.video .platzhalter{position:absolute;inset:0;display:grid;place-items:center;text-align:center;
  color:#B4C7E2;padding:24px;font-size:15.5px}

/* ---------- Knöpfe ---------- */
.knopf{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  background:var(--accent-2);color:#fff;text-decoration:none;font-weight:600;font-size:16px;
  padding:14px 28px;border-radius:999px;border:1px solid var(--accent-2);cursor:pointer;
  font-family:inherit}
.knopf:hover{background:#2f6ebc;border-color:#2f6ebc}
.knopf:disabled{opacity:.5;cursor:default}
.knopf.leise{background:transparent;color:var(--accent-2);border-color:var(--karte-rand)}
.knopf.leise:hover{background:var(--karte)}
.knopf.hell{background:rgba(255,255,255,.10);border-color:rgba(255,255,255,.35);color:#fff}
.knopf.hell:hover{background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.55)}

/* ---------- Zeitstrahl ---------- */
ol.zeitstrahl{list-style:none;counter-reset:z;margin:0;padding:0;position:relative}
ol.zeitstrahl::before{content:"";position:absolute;left:19px;top:12px;bottom:12px;width:2px;
  background:linear-gradient(180deg,var(--accent-2),var(--karte-rand))}
ol.zeitstrahl li{counter-increment:z;position:relative;padding:0 0 26px 62px}
ol.zeitstrahl li:last-child{padding-bottom:0}
ol.zeitstrahl li::before{content:counter(z);position:absolute;left:0;top:0;width:40px;height:40px;
  border-radius:50%;background:var(--weiss);border:2px solid var(--accent-2);color:var(--accent-2);
  display:grid;place-items:center;font-family:'Syne',sans-serif;font-weight:700;font-size:16px}
ol.zeitstrahl li.wir::before{background:var(--accent-2);color:#fff}
ol.zeitstrahl b{display:block;font-size:17.5px;font-family:'Syne',sans-serif;letter-spacing:-.005em}
ol.zeitstrahl span{display:block;color:var(--muted);font-size:15.5px;line-height:1.6;margin-top:3px}
ol.zeitstrahl em{font-style:normal;font-size:12px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--accent-2);font-weight:700;display:block;margin-bottom:2px}

/* ---------- Formularschritte ---------- */
.fortschritt{display:flex;align-items:center;gap:14px;margin-bottom:26px}
.balken{flex:1;height:7px;border-radius:999px;background:var(--karte-rand);overflow:hidden}
.balken i{display:block;height:100%;width:0;background:var(--accent-2);border-radius:999px;
  transition:width .35s ease}
.zaehler{font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);
  font-weight:700;white-space:nowrap}
.schritt{display:none}
.schritt.aktiv{display:block;animation:auf .35s ease}
@keyframes auf{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.karte{background:var(--weiss);border:1px solid var(--linie);border-radius:20px;padding:34px 34px 30px}
.karte h2{font-size:clamp(22px,3vw,30px);margin-bottom:8px}
.karte .lead{color:var(--muted);margin:0 0 26px}

/* Block innerhalb eines Schritts */
.block{border-top:1px solid var(--linie);padding-top:22px;margin-top:26px}
.block:first-of-type{border-top:0;padding-top:0;margin-top:0}
.block h3{font-size:18px;margin-bottom:4px}
.block p.dazu{color:var(--muted);font-size:15px;margin:0 0 16px}

.felder{display:grid;grid-template-columns:1fr 1fr;gap:16px 18px}
.feld.voll{grid-column:1/-1}
label{display:block;font-size:12.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);margin-bottom:6px}
input[type=text],input[type=date],input[type=email],input[type=tel],textarea{
  width:100%;padding:13px 15px;border:1px solid var(--karte-rand);border-radius:12px;
  font:inherit;font-size:16px;background:var(--flaeche);color:var(--text)}
textarea{min-height:96px;resize:vertical}
input:focus,textarea:focus{outline:0;border-color:var(--accent-2);background:#fff;
  box-shadow:0 0 0 4px rgba(62,130,214,.13)}
input.fehlt{border-color:#D92D20;background:#FEF3F2}
.hinweis{font-size:13.5px;color:var(--muted);margin-top:6px;line-height:1.5}
.wahl{display:flex;flex-wrap:wrap;gap:10px}
.wahl label{display:inline-flex;align-items:center;gap:9px;margin:0;padding:11px 18px;
  border:1px solid var(--karte-rand);border-radius:999px;background:var(--flaeche);
  font-size:15px;font-weight:500;letter-spacing:0;text-transform:none;color:var(--text);cursor:pointer}
.wahl label:hover{background:var(--karte)}
.wahl input{accent-color:var(--accent-2);margin:0}
.wahl input:checked+span{font-weight:700;color:var(--accent-2)}
.navi{display:flex;justify-content:space-between;gap:14px;margin-top:30px;flex-wrap:wrap}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}

/* Aufzählung in der Zugangs-Karte */
ul.liste{list-style:none;padding:0;margin:0 0 4px;display:grid;gap:10px}
ul.liste li{position:relative;padding-left:30px;font-size:15.5px}
ul.liste li::before{content:"✓";position:absolute;left:0;top:0;width:20px;height:20px;
  border-radius:50%;background:var(--karte);border:1px solid var(--karte-rand);color:var(--accent-2);
  display:grid;place-items:center;font-size:12px;font-weight:700;margin-top:4px}

/* ---------- Fertig ---------- */
.fertig{text-align:center;padding:20px 0 6px}
.haken{width:76px;height:76px;margin:0 auto 22px;border-radius:50%;background:var(--karte);
  border:1px solid var(--karte-rand);display:grid;place-items:center;font-size:36px;color:var(--accent-2)}
.fehlerbox{background:#FEF3F2;border:1px solid #FDA29B;color:#912018;border-radius:12px;
  padding:14px 18px;margin-top:18px;font-size:15px;display:none}
.fehlerbox.an{display:block}

footer{background:var(--navy);color:#93ACCC;text-align:center;padding:40px 24px;font-size:14px}
footer img{height:30px;margin-bottom:16px;opacity:.9}

@media(max-width:640px){
  .felder{grid-template-columns:1fr}
  .karte{padding:26px 22px 24px}
  section{padding:44px 0}
  .kopfknoepfe .knopf{width:100%}
}

/* ---------- Spielregeln ---------- */
.regeln{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px}
.regel{background:var(--weiss);border:1px solid var(--linie);border-radius:18px;padding:24px 22px;
  text-align:center}
section.getoent .regel{background:var(--flaeche)}
.regel .nr{width:36px;height:36px;margin:0 auto 14px;border-radius:50%;background:var(--karte);
  border:1px solid var(--karte-rand);color:var(--accent-2);display:grid;place-items:center;
  font-family:'Syne',sans-serif;font-weight:700;font-size:15px}
.regel h3{font-size:19px;margin-bottom:6px}
.regel span{display:block;color:var(--muted);font-size:15px;line-height:1.55}
.regel b{display:block;margin-top:10px;font-family:'Syne',sans-serif;font-size:20px;color:var(--accent-2)}

.tafel{background:var(--weiss);border:1px solid var(--linie);border-radius:20px;padding:30px 30px 26px;
  margin-top:22px}
section.getoent .tafel{background:var(--flaeche)}
.tafel h3{font-size:21px;margin-bottom:6px}
.tafel p.dazu{color:var(--muted);margin:0 0 18px;font-size:15.5px}

ul.ja,ul.nein{list-style:none;padding:0;margin:0;display:grid;gap:11px}
ul.ja li,ul.nein li{position:relative;padding-left:32px;font-size:15.5px;line-height:1.55}
ul.ja li::before,ul.nein li::before{position:absolute;left:0;top:3px;width:21px;height:21px;
  border-radius:50%;display:grid;place-items:center;font-size:12px;font-weight:800}
ul.ja li::before{content:"✓";background:var(--karte);border:1px solid var(--karte-rand);color:var(--accent-2)}
ul.nein li::before{content:"✕";background:#FEF3F2;border:1px solid #FDA29B;color:#B42318}
ul.nein{margin-top:18px}
.untertitel{font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;
  color:var(--muted);margin:0 0 12px}
.untertitel.rot{color:#B42318}

.preis{display:inline-block;background:#FFE3A8;color:#6B3E00;border:1px solid #E8C170;
  font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;border-radius:999px;padding:3px 12px;
  font-weight:800;margin-left:8px;vertical-align:2px;font-family:'Plus Jakarta Sans',sans-serif}

.tipp{background:var(--karte);border:1px solid var(--karte-rand);border-radius:14px;
  padding:14px 18px;margin-top:16px;font-size:15px;color:var(--text)}
.tipp b{color:var(--accent-2)}

/* ---------- Spielregeln, schrittweise ---------- */
.regelkarte{background:var(--weiss);border:1px solid var(--linie);border-radius:20px;
  padding:30px 30px 26px;margin-top:20px;display:none}
.regelkarte.sichtbar{display:block;animation:auf .4s ease}
.regelkarte.quittiert{border-color:var(--karte-rand);background:var(--karte)}
.regelkarte .oben{display:flex;align-items:flex-start;gap:16px}
.regelkarte .nr{flex:none;width:38px;height:38px;border-radius:50%;background:var(--karte);
  border:1px solid var(--karte-rand);color:var(--accent-2);display:grid;place-items:center;
  font-family:'Syne',sans-serif;font-weight:700;font-size:15px}
.regelkarte.quittiert .nr{background:var(--accent-2);border-color:var(--accent-2);color:#fff}
.regelkarte h3{font-size:21px;margin-bottom:4px}
.regelkarte .ziel{font-family:'Syne',sans-serif;font-size:28px;color:var(--accent-2);
  letter-spacing:-.01em;margin:10px 0 2px}
.regelkarte p.dazu{color:var(--muted);margin:0;font-size:15.5px}
.regelkarte .frage{margin:20px 0 0;font-size:16.5px;font-weight:600}

.quittung{display:inline-flex;align-items:center;gap:12px;margin-top:16px;padding:13px 22px;
  border:1px solid var(--karte-rand);border-radius:999px;background:var(--flaeche);cursor:pointer;
  font-size:15.5px;font-weight:600;user-select:none;transition:background .2s,border-color .2s}
.quittung:hover{background:var(--karte);border-color:var(--accent-2)}
.quittung input{position:absolute;opacity:0;width:0;height:0}
.quittung .kasten{flex:none;width:22px;height:22px;border-radius:6px;border:2px solid var(--karte-rand);
  display:grid;place-items:center;color:#fff;font-size:13px;font-weight:800;transition:all .2s}
.quittung input:checked ~ .kasten{background:var(--accent-2);border-color:var(--accent-2)}
.quittung input:checked ~ .kasten::after{content:"✓"}
.quittung input:checked ~ .text{color:var(--accent-2)}
.quittung input:focus-visible ~ .kasten{box-shadow:0 0 0 4px rgba(62,130,214,.2)}

.regelstand{position:sticky;top:0;z-index:5;background:var(--flaeche);padding:16px 0 14px;
  border-bottom:1px solid var(--linie);margin-bottom:6px}
.regelstand .innen{display:flex;align-items:center;gap:14px}
.abschluss{display:none;text-align:center;margin-top:40px}
.abschluss.sichtbar{display:block;animation:auf .4s ease}

/* ---------- Bild-Upload ---------- */
.upload{display:flex;align-items:center;gap:20px;flex-wrap:wrap;background:var(--flaeche);
  border:1px dashed var(--karte-rand);border-radius:16px;padding:18px 20px}
.upload .vorschau{flex:none;width:84px;height:84px;border-radius:50%;overflow:hidden;
  background:var(--karte);border:1px solid var(--karte-rand);display:grid;place-items:center;
  color:var(--accent-2);font-size:26px}
.upload .vorschau img{width:100%;height:100%;object-fit:cover;display:block}
.upload .rechts{flex:1;min-width:190px}
.upload input[type=file]{display:none}
.upload .waehlen{display:inline-flex;align-items:center;gap:8px;padding:10px 18px;border-radius:999px;
  border:1px solid var(--karte-rand);background:var(--weiss);color:var(--accent-2);cursor:pointer;
  font-size:15px;font-weight:600;letter-spacing:0;text-transform:none;margin:0}
.upload .waehlen:hover{background:var(--karte);border-color:var(--accent-2)}
.upload .status{font-size:13.5px;color:var(--muted);margin-top:8px;display:block}

/* ---------- Intro mit Porträt ---------- */
.intro{display:grid;grid-template-columns:auto 1fr;gap:26px;align-items:center;
  background:var(--weiss);border:1px solid var(--linie);border-radius:20px;padding:26px 30px;
  margin-bottom:26px}
.intro img{width:104px;height:104px;border-radius:50%;object-fit:cover;display:block;
  border:3px solid var(--karte-rand)}
.intro b{display:block;font-family:'Syne',sans-serif;font-size:19px}
.intro span{display:block;color:var(--muted);font-size:15.5px;line-height:1.6;margin-top:4px}
@media(max-width:560px){.intro{grid-template-columns:1fr;justify-items:center;text-align:center}}

/* ---------- Konfetti ---------- */
#konfetti{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:50;display:none}
#konfetti.an{display:block}

/* ---------- Kursmodule ---------- */
.module{display:grid;gap:16px}
.modul{display:grid;grid-template-columns:auto 1fr auto;gap:20px;align-items:center;
  background:var(--weiss);border:1px solid var(--linie);border-radius:18px;padding:22px 24px;
  text-decoration:none;color:inherit;transition:border-color .2s,transform .2s}
section.getoent .modul{background:var(--flaeche)}
.modul:hover{border-color:var(--accent-2);transform:translateY(-2px)}
.modul .nr{flex:none;width:44px;height:44px;border-radius:50%;background:var(--karte);
  border:1px solid var(--karte-rand);color:var(--accent-2);display:grid;place-items:center;
  font-family:'Syne',sans-serif;font-weight:700;font-size:16px}
.modul.fertig .nr{background:var(--accent-2);border-color:var(--accent-2);color:#fff}
.modul.fertig .nr::after{content:"✓";font-size:17px}
.modul.fertig .nr span{display:none}
.modul b{display:block;font-family:'Syne',sans-serif;font-size:19px;letter-spacing:-.005em}
.modul span.was{display:block;color:var(--muted);font-size:15px;margin-top:2px;line-height:1.5}
.modul .dauer{flex:none;font-size:13px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);font-weight:700;white-space:nowrap}
@media(max-width:620px){.modul{grid-template-columns:auto 1fr}.modul .dauer{display:none}}

.kursstand{display:flex;align-items:center;gap:14px;margin-bottom:26px}

/* Modulseite */
.schritte-liste{counter-reset:sl;list-style:none;padding:0;margin:0;display:grid;gap:12px}
.schritte-liste li{counter-increment:sl;position:relative;padding:16px 20px 16px 58px;
  background:var(--weiss);border:1px solid var(--linie);border-radius:14px;font-size:15.5px;
  line-height:1.6}
section.getoent .schritte-liste li{background:var(--flaeche)}
.schritte-liste li::before{content:counter(sl);position:absolute;left:20px;top:16px;width:26px;
  height:26px;border-radius:50%;background:var(--accent-2);color:#fff;display:grid;
  place-items:center;font-size:13px;font-weight:700;font-family:'Syne',sans-serif}
.schritte-liste b{display:block;margin-bottom:2px}

.modulnavi{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-top:44px}