/* 10x Netto Playbook – Steuerguide-Landingpage
   Palette „Midnight Navy × Muted Gold“ (Vorgabe 27.10.2026), Schrift Schibsted Grotesk (OFL, selbst gehostet).
   Animationen nach dem Vorbild der Vorlage (Lichtstreifen, drehende Kante, Puls, gestaffeltes Einblenden, Knopf-Glanz). */

:root{
  --grund:#070b14; --grund-2:#0b1322; --grund-3:#0f1a2e;
  --feld:#141f36; --feld-2:#1b2a44;
  --linie:#243354; --linie-2:#3a4c6e; --linie-leise:#1c2a44;
  --text:#f7f5f0; --text-2:#a3b0c6; --text-3:#7f90ab;
  --gold:#c6a27a; --gold-hell:#d9bc96; --gold-dunkel:#bf9a70; --gold-licht:#f3e6cf;
  --fuss:#05080f;
  --weich:cubic-bezier(.16,1,.3,1);
  --radius:8px;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{background:var(--grund);overflow-x:clip;scroll-behavior:smooth}
body{margin:0;min-height:100dvh;display:flex;flex-direction:column;background:linear-gradient(180deg,var(--grund) 0%,var(--grund-2) 45%,var(--grund-3) 100%);color:var(--text);font-family:"Schibsted Grotesk",Arial,sans-serif;font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased}
a{color:var(--text-2);text-decoration:none}
a:hover{color:var(--text)}
h1,h2{margin:0;font-weight:500;letter-spacing:-.03em}
[hidden]{display:none!important}
.spalte{width:100%;max-width:1200px;margin:0 auto;padding-inline:20px}
@media (min-width:720px){.spalte{padding-inline:32px}}
.skip{position:absolute;left:-9999px;top:8px;padding:8px 12px;background:var(--gold);color:var(--grund-2);border-radius:var(--radius);z-index:100}
.skip:focus{left:8px}

/* Verlaufswort (Freigabe Dennis 27.10.2026) */
.verlauf{background:linear-gradient(100deg,var(--gold-licht) 0%,var(--gold-hell) 40%,#b08a5e 75%,var(--gold-hell) 100%);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:var(--gold-hell);animation:fliess 9s ease-in-out infinite}
@keyframes fliess{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}

/* Kopf */
.kopf-reihe{display:flex;align-items:center;justify-content:space-between;padding-block:24px 20px}
.marke{display:flex;align-items:center;color:var(--gold)}
.kopf-label{font-size:15px;color:var(--text-2)}
.goldlinie{height:1px;width:100%;background:linear-gradient(90deg,rgba(198,162,122,0) 0%,rgba(198,162,122,.55) 50%,rgba(198,162,122,0) 100%)}

/* Bühne */
.buehne{flex:1 1 auto;display:flex;align-items:center;justify-content:center;padding:48px 0 72px;background:radial-gradient(60% 40% at 50% 0%,rgba(198,162,122,.08) 0%,rgba(198,162,122,0) 100%)}
@media (min-width:720px){.buehne{padding:64px 0 88px}}
.hero{display:flex;flex-direction:column;align-items:center;text-align:center;max-width:760px}
.etikett{display:inline-flex;align-items:center;gap:10px;max-width:100%;margin:0 0 22px;padding:8px 16px;border-radius:999px;background:rgba(198,162,122,.08);box-shadow:inset 0 0 0 1px rgba(198,162,122,.24),0 10px 30px -18px rgba(198,162,122,.6);font-size:12px;line-height:1.4;letter-spacing:.06em;text-transform:uppercase;color:var(--gold-hell);text-align:left}
.etikett b{flex:0 0 auto;width:6px;height:6px;border-radius:50%;background:var(--gold-hell);box-shadow:0 0 10px var(--gold-hell);animation:punkt 2.6s ease-in-out infinite}
@keyframes punkt{0%,100%{opacity:.75;transform:scale(.9)}50%{opacity:1;transform:scale(1.15)}}
@media (min-width:720px){.etikett{font-size:13px;padding:8px 18px}}
.hero h1{font-size:clamp(2.6rem,7vw,4.5rem);line-height:1;margin-bottom:18px}
.unter{margin:0 0 30px;max-width:46ch;font-size:clamp(1.05rem,2vw,1.25rem);line-height:1.5;color:var(--text-2)}
@media (min-width:720px){.unter{margin-bottom:36px}}

/* Zeichen-Kachel */
.kachel{position:relative;width:84px;height:84px;border-radius:var(--radius);display:flex;align-items:center;justify-content:center;margin-bottom:32px;isolation:isolate;color:var(--gold-hell)}
.kachel .zeichen{position:relative;z-index:1}
.schein{position:absolute;inset:-34px;z-index:-2;border-radius:50%;background:radial-gradient(closest-side,rgba(198,162,122,.42),rgba(198,162,122,.12) 60%,rgba(198,162,122,0));filter:blur(8px);opacity:.8;animation:puls 5s ease-in-out 2.7s infinite}
@keyframes puls{0%,100%{opacity:.5;transform:scale(.94)}50%{opacity:.95;transform:scale(1.05)}}
.glas{position:absolute;inset:0;z-index:-1;border-radius:inherit;overflow:hidden;background:linear-gradient(160deg,#22304d,var(--grund-2) 70%);box-shadow:inset 0 1px 0 rgba(217,188,150,.28),0 24px 60px -24px rgba(198,162,122,.55)}
.glas:after{content:"";position:absolute;inset:-20%;background:linear-gradient(115deg,transparent 38%,rgba(217,188,150,.38) 50%,transparent 62%);transform:translateX(-120%);animation:streif 6s var(--weich) 1.9s infinite}
@keyframes streif{0%{transform:translateX(-120%)}35%,100%{transform:translateX(120%)}}
@property --w{syntax:"<angle>";initial-value:0deg;inherits:false}
.kante{position:absolute;inset:0;border-radius:inherit;padding:1.2px;background:conic-gradient(from var(--w),transparent 0 70%,rgba(217,188,150,.95) 82%,transparent 94%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);animation:kante 5s linear infinite}
@keyframes kante{to{--w:360deg}}
.ring{position:absolute;inset:0;border-radius:inherit;z-index:-1;pointer-events:none;box-shadow:0 0 0 1.5px rgba(217,188,150,.7);opacity:0}

/* Eintritt – nur wenn JS die Seite startet (html.an), sonst alles sofort sichtbar */
.an .kachel{animation:landen 1.1s cubic-bezier(.2,1.3,.4,1) .1s both}
@keyframes landen{0%{opacity:0;transform:translateY(30px) scale(.6);filter:blur(10px)}100%{opacity:1;transform:none;filter:blur(0)}}
.an .schein{animation:schein-auf 1.6s ease-out 1.1s both,puls 5s ease-in-out 2.7s infinite}
@keyframes schein-auf{0%{opacity:0;transform:scale(.5)}60%{opacity:1;transform:scale(1.2)}100%{opacity:.8;transform:scale(1)}}
.an .ring{animation:ring 1.8s var(--weich) 1.3s both}
@keyframes ring{0%{opacity:.9;transform:scale(1)}100%{opacity:0;transform:scale(2.4)}}
.an .zieh{stroke-dasharray:60;stroke-dashoffset:60;animation:zieh 1.1s cubic-bezier(.2,.8,.2,1) .9s forwards}
.an .zieh.k{animation-delay:.6s}
.an .zeichen-klein .zieh{animation-delay:.3s}
.an .zeichen-klein .zieh.k{animation-delay:.1s}
@keyframes zieh{to{stroke-dashoffset:0}}
.an .rein{opacity:0;transform:translateY(20px);animation:rein 1.1s var(--weich) forwards}
.an .rein.d1{animation-delay:.3s}.an .rein.d2{animation-delay:.4s}.an .rein.d3{animation-delay:.5s}.an .rein.d4{animation-delay:.65s}.an .rein.d5{animation-delay:.75s}
@keyframes rein{to{opacity:1;transform:none}}

/* Knöpfe */
.knopf-bereich{width:100%;max-width:460px}
.knopf{position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;width:100%;height:58px;border:0;border-radius:var(--radius);background:linear-gradient(180deg,var(--gold-hell) 0%,var(--gold-dunkel) 100%);color:var(--grund-2);font-family:inherit;font-size:17px;font-weight:600;letter-spacing:-.01em;cursor:pointer;transition:transform .3s var(--weich),filter .3s}
.knopf:hover{filter:brightness(1.06);transform:translateY(-1px)}
.knopf:focus-visible{outline:2px solid var(--gold-hell);outline-offset:3px}
.knopf.gedrueckt{transform:scale(.97)}
.glanz:after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.5) 50%,transparent 70%);transform:translateX(-120%);animation:glanz 3.6s var(--weich) 1.4s infinite}
@keyframes glanz{0%{transform:translateX(-120%)}40%,100%{transform:translateX(120%)}}
.echo{position:relative}
.echo:before,.echo:after{content:"";position:absolute;inset:0;border-radius:var(--radius);box-shadow:0 0 0 1.5px rgba(217,188,150,.7);opacity:0;pointer-events:none;animation:echo 3400ms var(--weich) 1.6s infinite}
.echo:after{animation-delay:2500ms}
@keyframes echo{0%{transform:scale(1);opacity:.7}60%{transform:scale(1.06,1.3);opacity:0}100%{opacity:0}}
.fortschritt{position:relative;display:flex;align-items:center;justify-content:center;width:100%;height:58px;border-radius:var(--radius);border:1px solid var(--gold);background:var(--grund-2);color:var(--gold-hell);font-size:17px;font-weight:500;overflow:hidden}
.fortschritt.still{border-color:var(--linie);color:var(--text-2);font-size:16px;font-weight:400}
.lauf{position:absolute;left:0;bottom:0;height:3px;background:linear-gradient(90deg,var(--gold),var(--gold-hell));animation:lauf .9s cubic-bezier(.4,0,.2,1) both}
@keyframes lauf{from{width:0}to{width:100%}}
.vertrauen{margin:16px 0 0;font-size:14px;color:var(--text-3)}

/* Tafeln: Formular + Danke */
.tafel{width:100%;max-width:520px;margin-top:40px;padding:26px 22px 24px;border-radius:var(--radius);background:linear-gradient(180deg,var(--feld) 0%,#0d1526 100%);border:1px solid #2c3c5a;text-align:left;display:flex;flex-direction:column;gap:16px;animation:auf .7s cubic-bezier(.2,.8,.2,1) both}
@media (min-width:720px){.tafel{padding:28px 28px 26px}}
@keyframes auf{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.tafel-kopf{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.tafel h2{font-size:clamp(1.5rem,4vw,1.75rem);line-height:1.2;letter-spacing:-.02em}
.schritt{font-size:13px;color:var(--text-3);white-space:nowrap}
.tafel-text{margin:-6px 0 0;font-size:16px;color:var(--text-2)}
.felder{display:grid;grid-template-columns:1fr;gap:16px}
@media (min-width:520px){.felder{grid-template-columns:repeat(2,minmax(0,1fr))}}
.feld{display:flex;flex-direction:column;gap:8px}
.feld label{font-size:15px;font-weight:500}
.leise{font-weight:400;color:var(--text-2)}
.feld input{width:100%;height:50px;padding:0 16px;border-radius:var(--radius);border:1px solid var(--linie-2);background:var(--grund-2);color:var(--text);font-size:16px;font-family:inherit;transition:border-color .25s,box-shadow .25s}
.feld input::placeholder{color:#6f8099}
.feld input:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(198,162,122,.18)}
.feld input.tippt{border-color:var(--gold);box-shadow:0 0 0 3px rgba(198,162,122,.18);caret-color:var(--gold-hell)}
.einwilligung{display:flex;gap:12px;align-items:flex-start}
.einwilligung input{width:20px;height:20px;margin:2px 0 0;accent-color:var(--gold);flex:0 0 auto}
.einwilligung input.pop{animation:pop .45s var(--weich)}
@keyframes pop{0%{transform:scale(1)}40%{transform:scale(1.35)}100%{transform:scale(1)}}
.einwilligung label{font-size:14px;line-height:1.5;color:var(--text-2)}
.einwilligung a{color:var(--gold-hell);text-decoration:underline}
.klein{margin:0;font-size:13px;color:var(--text-3)}

.danke{align-items:center;text-align:center}
.danke .kachel{margin-bottom:4px}
.danke h2{font-size:clamp(2rem,6vw,2.75rem);line-height:1.05}
.danke .tafel-text{margin-top:-8px}
.schritte{list-style:none;margin:8px 0 0;padding:0;width:100%;display:flex;flex-direction:column;text-align:left;border-top:1px solid var(--linie)}
.schritte li{display:grid;grid-template-columns:40px minmax(0,1fr);gap:12px;padding:16px 0;border-bottom:1px solid var(--linie)}
.schritte .nr{font-size:20px;font-weight:500;color:var(--gold-hell)}
.schritte strong{display:block;font-size:17px;font-weight:500}
.schritte span:not(.nr){font-size:15px;line-height:1.5;color:var(--text-2)}
.insta{width:100%;margin-top:6px;padding:16px 18px;border-radius:var(--radius);background:rgba(27,42,68,.6);border:1px solid var(--linie);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;text-align:left}
.insta span{font-size:15px;color:var(--text-2)}
.insta a{font-size:15px;font-weight:500;color:var(--text);text-decoration:underline;text-decoration-color:var(--gold)}
.haken{stroke-dasharray:40;stroke-dashoffset:40;animation:zieh .9s cubic-bezier(.2,.8,.2,1) .7s forwards}
.danke .kachel{animation:landen 1s cubic-bezier(.2,1.3,.4,1) .05s both}
.danke .schein{animation:schein-auf 1.4s ease-out .8s both,puls 5s ease-in-out 2.4s infinite}
.danke .ring{animation:ring 1.8s var(--weich) 1s both}
.danke .rein{opacity:0;transform:translateY(14px);animation:rein .9s var(--weich) forwards}
.danke .schritte li:nth-child(1){animation-delay:.45s}.danke .schritte li:nth-child(2){animation-delay:.6s}.danke .schritte li:nth-child(3){animation-delay:.75s}.danke .insta{animation-delay:.9s}

/* Fuß */
.fuss{border-top:1px solid var(--linie-leise);background:var(--fuss)}
.fuss-reihe{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 24px;padding-block:40px calc(34px + env(safe-area-inset-bottom,0px))}
.fuss-marke{display:flex;align-items:center;gap:10px;font-size:16px;font-weight:500;letter-spacing:-.01em;color:var(--text)}
.fuss-marke svg{color:var(--gold)}
.fuss nav{display:flex;flex-wrap:wrap;gap:12px 20px;font-size:14px}
.fuss-hinweis{margin:0;width:100%;font-size:14px;line-height:1.5;color:var(--text-3);max-width:72ch}

/* Unterseiten */
.seite{flex:1 1 auto;padding:48px 0 80px}
.seite .text{max-width:72ch}
.seite h1{font-size:clamp(2rem,5vw,3rem);line-height:1.05;margin-bottom:20px}
.seite p{color:var(--text-2)}
.hinweis-offen{display:inline-block;padding:10px 14px;border-radius:var(--radius);border:1px dashed var(--linie-2);color:var(--text-2);font-size:15px}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .an .rein,.danke .rein{opacity:1;transform:none}
  .an .zieh,.haken{stroke-dashoffset:0}
  .ring{display:none}
}