: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}}

/* ---------- Berichts-Vorlagen ---------- */
.vorlage{background:var(--navy);color:#D5E3F4;border-radius:14px;padding:18px 20px;margin:14px 0 0;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:14.5px;line-height:1.7;
  white-space:pre-wrap;overflow-x:auto}
.kopieren{margin-top:14px;font-size:14.5px;padding:10px 20px}

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

/* ---------- Zugänge (Onboarding II) ---------- */
/* Flex statt Grid: zwei je Reihe, und eine unvollständige letzte Reihe rückt in die Mitte
   statt links zu kleben. Bei ungerader Kachelzahl steht die letzte also mittig. */
.zugaenge{display:flex;flex-wrap:wrap;justify-content:center;gap:20px}
.zugang{flex:1 1 300px;max-width:calc(50% - 10px)}
@media (max-width:620px){.zugang{max-width:100%}}

.zugang{position:relative;background:var(--weiss);border:1px solid var(--karte-rand);
  border-radius:20px;padding:30px 26px 26px;display:flex;flex-direction:column;gap:10px;
  overflow:hidden;box-shadow:0 1px 2px rgba(10,22,40,.05);
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
/* Akzentkante oben — gibt der Karte einen Kopf, ohne eine zweite Fläche einzuführen. */
.zugang::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;
  background:linear-gradient(90deg,var(--accent-2),var(--accent))}
.zugang:hover{transform:translateY(-3px);border-color:var(--accent);
  box-shadow:0 14px 30px rgba(10,22,40,.10)}
.zugang h3{margin:0;font-size:20px;letter-spacing:-.01em}
.zugang p{margin:0;flex:1;font-size:15px;line-height:1.6;color:var(--muted)}
.zugang .knopf{align-self:stretch;margin-top:14px;padding:13px 22px;
  box-shadow:0 6px 16px rgba(62,130,214,.28)}
.zugang .knopf:hover{box-shadow:0 8px 20px rgba(62,130,214,.36)}

/* Kasten ohne Ziel: <a> ohne href ist nicht klickbar — sichtbar, aber tot, bis der Link da ist.
   Eigene Optik statt nur blass, sonst liest es sich wie ein kaputter Knopf. */
.zugang:has(.knopf[aria-disabled="true"])::before{background:var(--karte-rand)}
.knopf[aria-disabled="true"]{cursor:default;pointer-events:none;background:transparent;
  color:var(--muted);border:1px dashed var(--karte-rand);box-shadow:none;font-weight:600}
.knopf[aria-disabled="true"]::before{content:"○";margin-right:2px;opacity:.7}

/* ---------- Video mit Thumbnail (Onboarding II) ---------- */
/* Porträt als Vorschaubild, bis das Begrüßungsvideo eingebettet ist. */
/* Pfad ist CSS-relativ, die Datei liegt neben stil.css an der Wurzel — nicht "../".
   Höherer Rahmen (4:3 statt 16:9) und Schnitt weiter oben, sonst wird der Kopf abgeschnitten.
   Beim Einbetten des Videos fällt die Klasse "thumb" weg — dann gilt wieder 16:9. */
.video.thumb{padding-top:75%;
  background:var(--navy) url("florian.jpg") center 8%/cover no-repeat}
.video.thumb .platzhalter{background:linear-gradient(180deg,rgba(10,22,40,.35),rgba(10,22,40,.82));
  align-content:center;gap:14px;color:#EAF2FD;text-shadow:0 1px 12px rgba(0,0,0,.5)}
.video.thumb .platzhalter .spielen{width:74px;height:74px;border-radius:50%;
  background:rgba(255,255,255,.16);border:2px solid rgba(255,255,255,.75);
  display:grid;place-items:center;margin:0 auto}
.video.thumb .platzhalter .spielen::after{content:"";border-style:solid;
  border-width:13px 0 13px 21px;border-color:transparent transparent transparent #fff;
  margin-left:5px}
.video.thumb .platzhalter b{display:block;font-size:18px}

/* Marker für eine Stelle, die auf einen Link wartet — sichtbar, damit sie nicht vergessen wird. */
.fehlt-noch{display:inline-block;background:var(--karte);border:1px dashed var(--karte-rand);
  border-radius:999px;padding:1px 10px;font-size:13px;color:var(--muted);white-space:nowrap}

/* ---------- Begrüßungs-Ladeschirm (nur auf der Startseite) ---------- */
.ladeschirm{position:fixed;inset:0;z-index:60;background:var(--navy);color:#fff;
  display:grid;place-items:center;text-align:center;padding:28px;
  transition:opacity .6s ease,visibility .6s ease}
.ladeschirm.weg{opacity:0;visibility:hidden}
body.laedt{overflow:hidden}
.ladeschirm .marke{height:38px;width:auto;opacity:.9;margin-bottom:34px;
  animation:einblenden .7s ease both}
.ladeschirm .ring{width:66px;height:66px;margin:0 auto 30px;border-radius:50%;
  border:3px solid rgba(255,255,255,.16);border-top-color:var(--accent);
  animation:drehen 1s linear infinite}
.ladeschirm h2{font-size:clamp(24px,4vw,34px);color:#fff;max-width:20ch;margin:0 auto;
  animation:einblenden .7s ease .25s both}
.ladeschirm h2 span{color:var(--accent)}
.ladeschirm p{color:#B4C7E2;margin:14px auto 0;max-width:34ch;font-size:16.5px;
  animation:einblenden .7s ease .55s both}
.ladeschirm .ladebalken{width:min(280px,72vw);height:4px;border-radius:999px;
  background:rgba(255,255,255,.14);margin:32px auto 0;overflow:hidden}
.ladeschirm .ladebalken i{display:block;height:100%;width:0;border-radius:999px;
  background:linear-gradient(90deg,var(--accent-2),var(--accent));animation:fuellen 10s linear forwards}
@keyframes drehen{to{transform:rotate(360deg)}}
@keyframes fuellen{to{width:100%}}
@keyframes einblenden{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
/* Wer Bewegung reduziert haben will, bekommt den Schirm ohne Dreh und ohne langes Warten —
   die Wartezeit kürzt das Skript, hier fällt nur die Bewegung weg. */
@media (prefers-reduced-motion:reduce){
  .ladeschirm .ring{animation:none;border-top-color:rgba(255,255,255,.16)}
  .ladeschirm .ladebalken i{animation:none;width:100%}
  .ladeschirm .marke,.ladeschirm h2,.ladeschirm p{animation:none}
}

/* ---------- Abschlussseite "Los geht's" ---------- */
.hype{background:var(--navy);color:#fff;position:relative;overflow:hidden;padding:70px 0 76px}
.hype::before{content:"";position:absolute;inset:-40% -20% auto -20%;height:120%;
  background:radial-gradient(circle at 30% 20%,rgba(91,164,245,.28),transparent 55%),
             radial-gradient(circle at 78% 62%,rgba(62,130,214,.22),transparent 52%)}
.hype .wrap{position:relative;z-index:1}
.hype h2{font-size:clamp(28px,4.4vw,44px);color:#fff;text-align:center}
.hype h2 span{color:var(--accent)}
.hype .fliess{color:#C6DEFB;max-width:56ch;margin:20px auto 0;text-align:center;font-size:17.5px}

/* Drei oben, zwei mittig darunter — eine angebrochene letzte Reihe wird zentriert. */
.vorfreude{display:flex;flex-wrap:wrap;justify-content:center;gap:16px;margin-top:40px}
.vorfreude div{flex:0 1 200px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);
  border-radius:16px;padding:20px;text-align:center;
  animation:hochkommen .6s ease both}
.vorfreude div:nth-child(2){animation-delay:.1s}
.vorfreude div:nth-child(3){animation-delay:.2s}
.vorfreude div:nth-child(4){animation-delay:.3s}
.vorfreude div:nth-child(5){animation-delay:.4s}
.vorfreude b{display:block;color:#fff;font-family:'Syne',sans-serif;font-size:17px;margin-bottom:4px}
.vorfreude span{color:#9FBBDD;font-size:14.5px;line-height:1.5}
@keyframes hochkommen{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

/* Schieberegler zum Bestätigen */
.schieber{max-width:520px;margin:46px auto 0;background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.18);border-radius:999px;padding:8px;position:relative}
.schieber .schrift{position:absolute;inset:0;display:grid;place-items:center;
  color:#9FBBDD;font-size:15px;letter-spacing:.04em;pointer-events:none;
  animation:pulsen 2.4s ease-in-out infinite}
.schieber input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:52px;
  background:transparent;margin:0;display:block;cursor:grab;position:relative;z-index:1;
  /* Wischen nach oben/unten scrollt weiter die Seite, waagerecht gehört dem Regler —
     ohne das verschluckt der Browser auf dem Handy die Ziehbewegung. */
  touch-action:pan-y}
.schieber input[type=range]:active{cursor:grabbing}
.schieber input[type=range]::-webkit-slider-runnable-track{height:52px;background:transparent}
.schieber input[type=range]::-moz-range-track{height:52px;background:transparent}
.schieber input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:52px;height:52px;
  border-radius:50%;background:linear-gradient(135deg,var(--accent),var(--accent-2));
  box-shadow:0 6px 18px rgba(0,0,0,.35);border:0}
.schieber input[type=range]::-moz-range-thumb{width:52px;height:52px;border-radius:50%;
  background:linear-gradient(135deg,var(--accent),var(--accent-2));border:0;
  box-shadow:0 6px 18px rgba(0,0,0,.35)}
.schieber .pfeil{position:absolute;left:8px;top:8px;width:52px;height:52px;border-radius:50%;
  display:grid;place-items:center;color:#fff;font-size:20px;pointer-events:none;z-index:2;
  transition:transform .05s linear}
.schieber.fertig{border-color:rgba(91,164,245,.6);background:rgba(91,164,245,.16)}
.schieber.fertig .schrift{animation:none;color:#fff}
@keyframes pulsen{0%,100%{opacity:.65}50%{opacity:1}}

.freigeschaltet{display:none;text-align:center;margin-top:38px;
  animation:hochkommen .55s ease both}
.freigeschaltet.an{display:block}
.freigeschaltet h3{font-size:clamp(22px,3.2vw,30px);color:#fff}
.freigeschaltet p{color:#C6DEFB;max-width:48ch;margin:14px auto 26px}

#konfetti{position:fixed;inset:0;pointer-events:none;z-index:70;display:none}
#konfetti.an{display:block}

@media (prefers-reduced-motion:reduce){
  .vorfreude div,.freigeschaltet{animation:none}
  .schieber .schrift{animation:none}
}

/* Jede Kachel ihr eigener Ton — aber innerhalb der CI. Es ist eine Leiter aus dem
   Markenblau bis ins Navy des Kopfbereichs, keine bunten Fremdfarben.
   Der Ton trägt Leiste und Hover-Rand; der Knopf bleibt Markenblau, weil weiße Schrift auf
   den hellen Tönen der Leiter zu schwach steht (Kontrast unter 4,5:1). */
.zugang{--ton:var(--accent-2)}
.zugang:nth-child(1){--ton:#7FBDF9}   /* Postfach   — hellstes Markenblau */
.zugang:nth-child(2){--ton:#5BA4F5}   /* Kalender   — Akzent */
.zugang:nth-child(3){--ton:#3E82D6}   /* CRM        — Markenblau */
.zugang:nth-child(4){--ton:#2F6EBC}   /* Drive */
.zugang:nth-child(5){--ton:#245A9E}   /* Heartbeat */
.zugang:nth-child(6){--ton:#1B4A85}   /* Skript */
.zugang:nth-child(7){--ton:#14396A}   /* Vertrag */
.zugang:nth-child(8){--ton:#0A1628}   /* Doc — Navy, das Nachschlagewerk */
.zugang::before{background:linear-gradient(90deg,var(--ton),rgba(255,255,255,0))}
.zugang:hover{border-color:var(--ton)}
.zugang .knopf{background:var(--accent-2);border-color:var(--accent-2);
  box-shadow:0 6px 16px rgba(62,130,214,.28)}
.zugang .knopf:hover{background:#2f6ebc;border-color:#2f6ebc}
/* Offene Kachel bleibt grau — ein Ton würde einen Knopf versprechen, den es nicht gibt. */
.zugang:has(.knopf[aria-disabled="true"])::before{background:var(--karte-rand)}
.zugang .knopf[aria-disabled="true"]{background:transparent;border-color:var(--karte-rand);
  color:var(--muted);box-shadow:none}

/* ---------- Handy ---------- */
/* Alles, was auf kleinen Schirmen sonst klemmt: zu enge Ränder, zu große Schrift,
   Kacheln nebeneinander, Knöpfe zum Zielen. Geprüft gegen 360 px Breite. */
@media (max-width:560px){
  body{font-size:16px}
  .wrap{padding:0 18px}
  header .wrap{padding:22px 18px 44px}
  header h1{font-size:clamp(26px,7.4vw,34px)}
  .leiste{font-size:11.5px;letter-spacing:.1em}
  .leiste img{height:28px}
  .pille{margin:28px 0 16px;font-size:12px;padding:6px 14px}
  .meta{gap:8px;margin-top:22px}
  .meta div{font-size:13px;padding:7px 14px}
  section{padding:40px 0}
  .kopfzeile{margin-bottom:26px}
  .kopfzeile h2{font-size:clamp(22px,6.2vw,28px)}

  /* Kacheln und Kästen untereinander, mit Luft zum Tippen */
  .zugaenge{gap:14px}
  .zugang{padding:24px 20px 22px}
  .zugang h3{font-size:18px}
  .tafel{padding:22px 18px}
  .tipp{padding:14px 16px;font-size:14.5px}
  .vorlage{font-size:13px;padding:16px 14px}
  ol.zeitstrahl li{padding-left:52px}
  ol.zeitstrahl li::before{width:34px;height:34px;font-size:14px}
  ol.zeitstrahl::before{left:16px}

  /* Ein Knopf je Zeile — nebeneinander wird auf dem Handy zur Rutschpartie */
  .knopf{width:100%}
  .navi{flex-direction:column}

  /* Begrüßungsschirm */
  .ladeschirm{padding:24px 20px}
  .ladeschirm .marke{height:30px;margin-bottom:24px}
  .ladeschirm .ring{width:54px;height:54px;margin-bottom:24px}
  .ladeschirm h2{font-size:clamp(21px,6.4vw,28px)}
  .ladeschirm p{font-size:15.5px}

  /* Abschlussseite */
  .hype{padding:48px 0 56px}
  .hype h2{font-size:clamp(23px,6.4vw,30px)}
  .hype .fliess{font-size:16px}
  .vorfreude div{flex:1 1 100%;padding:16px}
  .schieber{margin-top:34px}
  .schieber .schrift{font-size:13.5px;padding:0 62px}
}
/* Der Schieberegler darf nie breiter werden als der Schirm, sonst rutscht die Seite quer. */
.schieber{max-width:min(520px,100%)}
img,iframe,canvas{max-width:100%}