/* Seite /7 · aus entwurf-ablauf/ (7.css + Bausteine), nur Wand-Tokens. Mobil zuerst. */
[hidden]{display:none!important}
/* Teilnahmeseite /7 · Bausteine aus wand.css, nur Tokens. Mobil zuerst. */
.j7-schritte{display:grid;gap:var(--s-3);counter-reset:s;max-width:42rem;list-style:none;padding:0}
.j7-schritte li{counter-increment:s;display:grid;grid-template-columns:2.5rem 1fr;gap:var(--s-3);align-items:start;padding:var(--s-3) var(--s-4);border:var(--kontur) solid var(--tusche);border-radius:8px 18px 8px 8px;background:var(--wand)}
.j7-schritte li::before{content:counter(s);display:grid;place-content:center;width:2.5rem;height:2.5rem;background:var(--mint);border:var(--kontur) solid var(--tusche);border-radius:50%;font-weight:800;font-stretch:75%;font-size:var(--t-name);line-height:1}
.info__text .j7-schritte{padding-left:0;list-style:none}
.j7-form [hidden]{display:none!important}
.j7-form{max-width:34rem}
.j7-form select{display:block;width:100%;min-height:3rem;margin-top:var(--s-1);padding:.625rem .875rem;background:var(--wand);border:var(--kontur) solid var(--tusche);border-radius:8px}
.j7-form input[type=text],.j7-form input[type=email],.j7-form input[type=tel]{display:block;width:100%;min-height:3rem;margin-top:var(--s-1);padding:.625rem .875rem;background:var(--wand);border:var(--kontur) solid var(--tusche);border-radius:8px}
.j7-form label.feld+input,.j7-form label.feld+select{margin-top:calc(var(--s-1) - var(--s-4))}
.j7-form input:focus-visible,.j7-form select:focus-visible{outline:3px solid var(--tusche);outline-offset:3px;background:var(--mint)}
.j7-form altcha-widget{display:block;max-width:100%;--altcha-border-width:3px;--altcha-border-radius:8px;--altcha-max-width:100%;--altcha-color-base:var(--wand);--altcha-color-border:var(--tusche);--altcha-color-border-focus:var(--tusche);--altcha-color-text:var(--tusche);--altcha-color-error-text:var(--tusche);--altcha-color-footer-bg:transparent;--altcha-color-active:var(--mint)}
.j7-form altcha-widget:not(:defined){min-height:3.25rem;border:var(--kontur) solid var(--tusche);border-radius:8px}
.j7-form altcha-widget:not(:defined)::before{content:'Ich bin kein Roboter';padding:.75rem 1rem;display:block;font-weight:600}
.j7-form .knopf{justify-self:start}
.j7-form .knopf[disabled]{cursor:wait}
.j7-ergebnis{max-width:34rem;margin-top:var(--s-5)}
.j7-ergebnis .hinweis__titel{font-size:var(--t-h3)}
.j7-ergebnis[hidden]{display:none}
.j7-ergebnis p+p{margin-top:var(--s-2)}
.j7-zu{max-width:34rem}
.j7-platzhalter{display:inline-block;padding:0 .35rem;background:var(--lachs);border:2px solid var(--tusche);border-radius:4px;font-weight:700}
.j7-aus{max-width:34rem}
.j7-aus[hidden]{display:none}
.j7-pflicht{max-width:46rem;font-size:var(--t-text);line-height:1.45;margin-top:var(--s-3)}
.j7-pflicht a{font-weight:600;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px}
.j7-stand{max-width:46rem;margin-top:var(--s-4)}
.j7-stand[hidden]{display:none}
.j7-recht h3{margin-top:var(--s-6);font-size:var(--t-name)}
.j7-recht h3:first-child{margin-top:0}
.j7-recht p{max-width:42rem}
.j7-form .feld__hilfe{margin-top:var(--s-1)}
.j7-form>div>.feld__hilfe{margin-top:var(--s-2)}
.j7-form [hidden]{display:none!important}
.j7-mail{margin-top:var(--s-3)}
/* Felder liegen in eigenen Blöcken (kein Gitterabstand): Label und Feld sauber stapeln */
.j7-form .nl-form label.feld+input,.j7-form label.feld+input,.j7-form label.feld+select{margin-top:var(--s-1)}
.j7-form[hidden],.j7-ergebnis[hidden],.j7-mail[hidden]{display:none!important}
.j7-form>div{display:block}
.j7-form label.feld{margin-top:0}
/* ── Umbau mobil 14.11. (Vorgabe Mohamed): 7. + Pill Lachs, Headline, Sternzeile, gleich danach Formular ── */
.j7-kopf.seitenkopf{padding-block:var(--s-4) var(--s-6)}
.j7-held{display:flex;align-items:flex-end;gap:var(--s-3)}
.j7-ziffer{font-weight:800;font-stretch:75%;font-size:clamp(6.5rem,30vw,12rem);line-height:.74;letter-spacing:-.02em;margin:0 0 0 -.03em;white-space:nowrap}
.j7-pill{margin-bottom:.2rem}
.j7-h{font-size:clamp(2.25rem,10vw,var(--t-h1));line-height:.95;margin-top:var(--s-3);text-wrap:balance}
.j7-stern{font-size:var(--t-text);line-height:1.4;max-width:46rem;margin-top:var(--s-3);overflow-wrap:break-word}
.j7-stern a,.j7-pflicht a{font-weight:600;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px}
.j7-teilnahme{margin-top:var(--s-4);max-width:34rem}
.j7-teilnahme .j7-form{display:grid;gap:var(--s-3)}
.j7-teilnahme .feld__hilfe{font-size:.9375rem}
.j7-gratis{padding-top:var(--s-3);border-top:2px dashed var(--tusche)}
.j7-teilnahme .knopf#j7-knopf{width:100%;text-align:center}
#bedingungen .j7-pflicht{margin-top:0}
@media (min-width:30em){.j7-teilnahme .knopf#j7-knopf{width:auto}}
@media (min-width:48em){.j7-ziffer{font-size:12rem}.j7-held{gap:var(--s-5)}}

/* ── Bausteine (nur Wand-Tokens) ── */
.n-feldblock{display:grid;gap:var(--s-1)}
.n-form{display:grid;gap:var(--s-4);max-width:34rem}
.n-form input[type=text],.n-form input[type=email]{display:block;width:100%;min-height:3rem;padding:.625rem .875rem;background:var(--wand);border:var(--kontur) solid var(--tusche);border-radius:8px;font:inherit;font-size:var(--t-text);color:var(--tusche)}
.n-form input:focus-visible{outline:3px solid var(--tusche);outline-offset:3px;background:var(--mint)}
.n-zwei{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-3)}
.n-check{display:grid;grid-template-columns:1.75rem 1fr;gap:var(--s-3);align-items:start;font-size:var(--t-text);line-height:1.4;cursor:pointer}
.n-check input{width:1.75rem;height:1.75rem;margin:0;accent-color:var(--tusche);cursor:pointer}
.n-check a{font-weight:600;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px}
.n-check small{display:block;font-size:.9375rem;margin-top:2px}
.n-umschalter{display:grid;grid-template-columns:1fr 1fr;border:var(--kontur) solid var(--tusche);border-radius:999px;overflow:hidden}
.n-umschalter button{font:inherit;font-weight:700;font-size:.9375rem;min-height:var(--hoehe-knopf);background:var(--wand);color:var(--tusche);border:0;cursor:pointer}
.n-umschalter button[aria-pressed=true]{background:var(--tusche);color:var(--wand)}
.n-captcha{display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);min-height:4.75rem;padding:.75rem 1rem;border:2px solid #d5d5d5;border-radius:6px;background:#fafafa;color:#333;font-size:15px}
.n-captcha label{display:flex;align-items:center;gap:.75rem;cursor:pointer}
.n-captcha input{width:1.75rem;height:1.75rem;margin:0}
.n-captcha .hc{display:grid;justify-items:center;font-size:10px;line-height:1.2;color:#666}
.n-captcha--altcha{border:var(--kontur) solid var(--tusche);border-radius:8px;background:var(--wand);color:var(--tusche);min-height:3.25rem}
.n-captcha .hc i{display:block;width:30px;height:30px;border-radius:6px;background:conic-gradient(#0074bf 0 25%,#00838f 0 50%,#4de1d2 0 75%,#0074bf 0)}
.n-stern{font-size:var(--t-text);line-height:1.4;padding:var(--s-3) var(--s-4);border:2px solid var(--tusche);border-radius:8px}
.n-stern a{font-weight:600;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px}
.n-knopf{width:100%}
.n-klein{font-size:.9375rem;line-height:1.4}

.n-status{padding-block:var(--s-5) var(--s-7)}
.n-status h1{font-size:clamp(2.25rem,10vw,var(--t-h1));line-height:.95;text-wrap:balance;margin-top:var(--s-4)}
.n-status h2{font-size:var(--t-h3);line-height:1}
.n-status .lead{font-size:var(--t-lead);line-height:1.4;margin-top:var(--s-4)}
.n-status .hinweis{margin-top:var(--s-5)}
.n-status .hinweis p+p{margin-top:var(--s-2)}

.n-pruef{list-style:none;padding:0;margin-top:var(--s-5);display:grid;gap:var(--s-3)}
.n-pruef li{display:grid;grid-template-columns:2rem 1fr;gap:var(--s-3);align-items:center;font-size:var(--t-lead);font-weight:600;opacity:.35;transition:opacity .3s}
.n-pruef li.an{opacity:1}
.n-pruef li i{display:grid;place-content:center;width:2rem;height:2rem;border:var(--kontur) solid var(--tusche);border-radius:50%;font-style:normal;font-weight:800;background:var(--wand)}
.n-pruef li.ok i{background:var(--mint)}
.n-pruef li.ok i::before{content:"✓"}
.n-pruef li.laeuft i::before{content:"";width:12px;height:12px;border:3px solid var(--tusche);border-right-color:transparent;border-radius:50%;animation:dreh .8s linear infinite}
@keyframes dreh{to{transform:rotate(360deg)}}

.n-uhr{margin-top:var(--s-5);padding:var(--s-5) var(--s-4);background:var(--lachs);border:var(--kontur) solid var(--tusche);border-radius:10px 36px 10px 10px;text-align:center}
.n-uhr__zahl{font-weight:800;font-stretch:75%;font-size:5.5rem;line-height:.9;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.n-uhr__um{font-size:var(--t-lead);font-weight:700;margin-top:var(--s-2)}
.n-uhr__balken{height:12px;border:var(--kontur) solid var(--tusche);border-radius:999px;margin-top:var(--s-4);overflow:hidden;background:var(--wand)}
.n-uhr__balken span{display:block;height:100%;background:var(--tusche);transition:width 1s linear}

.n-held{padding-block:var(--s-5) var(--s-6);border-bottom:var(--linie) solid var(--tusche);overflow:hidden}
.n-held--lachs{background:var(--lachs)}
.n-held--mint{background:var(--mint)}
.n-held .j7-ziffer{font-size:clamp(6.5rem,30vw,12rem);display:inline-block;transform-origin:50% 90%}
.n-held h1{font-size:clamp(2.25rem,10vw,var(--t-h1));line-height:.95;text-wrap:balance;margin-top:var(--s-3)}
.n-held .lead{font-size:var(--t-lead);line-height:1.4;margin-top:var(--s-3)}
.pill--wand{background:var(--wand)}

/* Gewinn: die 7. springt, Konfetti im Canvas */
.n-held.spiel .j7-ziffer{animation:sprung 900ms cubic-bezier(.2,1.4,.4,1) both}
@keyframes sprung{0%{transform:scale(.2) rotate(-25deg);opacity:0}60%{transform:scale(1.15) rotate(6deg);opacity:1}100%{transform:none}}
/* Niete: die 7. kippt um, wackelt nach, „Bis zum nächsten Mal“ winkt */
.n-held.kipp .j7-ziffer{animation:kipp 1400ms cubic-bezier(.3,.1,.3,1) both}
@keyframes kipp{0%{transform:none}35%{transform:rotate(-14deg) translateY(4px)}55%{transform:rotate(-8deg)}75%{transform:rotate(-12deg)}100%{transform:rotate(-10deg) translateY(2px)}}
.n-held.kipp .n-wink{animation:wink 1200ms 600ms ease-out both}
@keyframes wink{0%{opacity:0;transform:translateY(12px)}100%{opacity:1;transform:none}}
.plopp .n-code{animation:plopp 600ms cubic-bezier(.2,1.4,.4,1) both}
@keyframes plopp{0%{transform:scale(.6);opacity:0}100%{transform:none;opacity:1}}
#konfetti{position:fixed;inset:0;pointer-events:none;z-index:60}
@media (prefers-reduced-motion:reduce){.n-held .j7-ziffer,.n-wink{animation:none!important}}

.n-schritte{list-style:none;padding:0;display:grid;gap:var(--s-3);margin-top:var(--s-4);counter-reset:s}
.n-schritte li{counter-increment:s;display:grid;grid-template-columns:2.5rem 1fr;gap:var(--s-3);align-items:start;padding:var(--s-3) var(--s-4);border:var(--kontur) solid var(--tusche);border-radius:10px;background:var(--wand)}
.n-schritte li::before{content:counter(s);display:grid;place-content:center;width:2.5rem;height:2.5rem;background:var(--mint);border:var(--kontur) solid var(--tusche);border-radius:50%;font-weight:800}
.n-schritte li.erledigt::before{content:"✓"}
.n-wahl{display:grid;gap:var(--s-3)}
.n-wahl label{display:grid;grid-template-columns:1.75rem 1fr;gap:var(--s-3);align-items:start;padding:var(--s-3) var(--s-4);border:var(--kontur) solid var(--tusche);border-radius:10px;cursor:pointer;background:var(--wand)}
.n-wahl input{width:1.5rem;height:1.5rem;margin:.1rem 0 0;accent-color:var(--tusche)}
.n-wahl b{display:block;font-size:var(--t-name)}

.n-chance{margin-top:var(--s-6);padding:var(--s-5) var(--s-4);border:var(--kontur) solid var(--tusche);border-radius:10px 36px 10px 10px;background:var(--wand)}
.n-chance h2{font-size:var(--t-h3);line-height:1;margin-top:var(--s-3)}
.n-chance p{margin-top:var(--s-3);line-height:1.45}
.n-chance .n-form{margin-top:var(--s-4)}
.n-ziehung{display:flex;justify-content:center;gap:8px;margin-top:var(--s-5)}
.n-ziehung span{display:grid;place-content:center;width:38px;height:52px;border:var(--kontur) solid var(--tusche);border-radius:8px;font-weight:800;font-stretch:75%;font-size:2rem;background:var(--wand)}
.n-ziehung.dreht span{animation:roll .12s linear infinite}
.n-ziehung span:nth-child(2){animation-delay:.03s}.n-ziehung span:nth-child(3){animation-delay:.06s}
@keyframes roll{50%{transform:translateY(-4px)}}
.n-code{display:inline-block;margin-top:var(--s-3);padding:var(--s-2) var(--s-4);border:var(--kontur) dashed var(--tusche);border-radius:8px;font-weight:800;font-size:1.5rem;letter-spacing:.06em;background:var(--wand)}

.n-topf{margin-top:var(--s-4);padding:var(--s-3) var(--s-4);border:var(--kontur) solid var(--tusche);border-radius:10px;max-width:34rem}
.n-topf__zeile{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s-3);font-size:var(--t-text);line-height:1.3}
.n-topf__zeile b{font-weight:800}
.n-topf__balken{height:14px;border:2px solid var(--tusche);border-radius:999px;margin-top:var(--s-2);overflow:hidden;background:var(--wand)}
.n-topf__balken span{display:block;height:100%;background:var(--lachs);border-right:2px solid var(--tusche)}
.n-topf__neu{font-size:.9375rem;margin-top:var(--s-2)}
.n-chancezeile{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-2);margin-top:var(--s-3);font-size:var(--t-text);font-weight:600}

.j7-zahl-aus{font-variant-numeric:tabular-nums}
.n-qr{display:block;width:12rem;height:12rem;margin-top:var(--s-3);border:var(--kontur) solid var(--tusche);border-radius:8px;background:#fff;image-rendering:pixelated}
.n-fehler{padding:var(--s-3) var(--s-4);background:var(--lachs);border:var(--kontur) solid var(--tusche);border-radius:8px 16px 8px 8px;font-weight:700}
.n-fehler:empty{display:none}
.n-topf--voll .n-topf__balken span{background:var(--tusche)}
.j7-bed-link{margin-top:var(--s-3)}

/* Platzhalter vor dem Start */
.j7-startbox{max-width:46rem;margin-top:var(--s-4);font-size:var(--t-h3);line-height:1.3}
.j7-vorher[hidden]{display:none}
.j7-vorher__text{max-width:46rem;margin-top:var(--s-4)}
.j7-vorher__text h2{margin-top:var(--s-4)}
.j7-vorher__text .knopf{margin:var(--s-2) var(--s-2) 0 0}

/* Mehrere Knöpfe nebeneinander: Abstand statt Überlappen (Claude, 14.11.) */
.n-knoepfe{display:flex;flex-wrap:wrap;gap:var(--s-3);align-items:center}
.n-knoepfe .knopf{margin:0}
.j7-nhinweis{max-width:46rem;margin-top:var(--s-3)}
.j7-nhinweis[hidden]{display:none}
.n-bedingung{max-width:46rem;font-size:.9rem;line-height:1.4;margin:var(--s-3) 0 0}
.n-bedingung[hidden]{display:none}

.j7-kicker{font-weight:700;font-stretch:75%;font-size:.9375rem;letter-spacing:.14em;text-transform:uppercase;margin:0 0 var(--s-2);white-space:nowrap}