/* Die Echt-Prüfung (L98). Ergänzt /hey-omi/css/site.css. */
.sp-bereich{padding:8px var(--rand) 48px}
.spiel{max-width:880px;margin:0 auto;scroll-margin-top:84px}
.spiel:fullscreen{max-width:none;overflow:auto;background:var(--papier);padding:16px}
.spiel-ohne-js{max-width:880px;margin:0 auto;background:var(--weiss);border:2px solid var(--linie);border-radius:18px;padding:24px;display:grid;gap:12px}
.spiel.ist-bereit+.spiel-ohne-js{display:none}
.sp-status{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.sp-bereich>.klein{max-width:880px;margin:14px auto 0}
#sp-druckbereich{display:none}

/* Karten */
.sp-karte{background:var(--weiss);border:2px solid var(--linie);border-radius:24px;padding:clamp(20px,4vw,38px);display:grid;gap:18px;box-shadow:0 14px 40px rgba(17,53,82,.10);animation:sp-rein .35s ease-out}
@keyframes sp-rein{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.sp-karte h2{font-size:clamp(27px,3.8vw,36px)}
.sp-karte .dach{margin:0}
.sp-text{font-size:21px;max-width:58ch}
.sp-grafik{width:120px;height:120px;justify-self:start}
.sp-gross{font-size:20px;padding:16px 30px;margin:0}
.knopf.sp-gross,.sp-knoepfe .knopf{width:auto;margin:0}
.sp-karte>.knopf{justify-self:start}
.sp-knoepfe{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.knopf:disabled{opacity:.45;cursor:not-allowed}
.sp-puls{animation:sp-puls 1.8s ease-in-out infinite}
@keyframes sp-puls{0%,100%{box-shadow:0 0 0 0 rgba(209,58,34,.45)}50%{box-shadow:0 0 0 14px rgba(209,58,34,0)}}
.sp-quelle{font-size:15px;color:var(--graphit)}

/* Start */
.sp-start{background:linear-gradient(160deg,#113552 0%,#0b2439 100%);border-color:#0b2439;color:#fff;text-align:center;justify-items:center;overflow:hidden;position:relative}
.sp-start::before{content:"";position:absolute;inset:-40% -20% auto;height:80%;background:radial-gradient(closest-side,rgba(220,235,247,.18),transparent);pointer-events:none}
.sp-start .dach{color:#f3b2a6;justify-content:center}
.sp-start-titel{color:#fff!important;font-size:clamp(40px,7vw,68px)!important;letter-spacing:-1px;line-height:1}
.sp-start .sp-text{color:#dcebf7;max-width:46ch}
.sp-start .klein{color:#b9cbdc;max-width:52ch}
.sp-start-bild{background:#f6f1e7;border-radius:50%;width:min(300px,70vw);aspect-ratio:1;display:grid;place-items:center;box-shadow:0 0 0 10px rgba(255,255,255,.06),0 0 0 22px rgba(255,255,255,.04)}
.sp-titelbild{width:92%;height:auto}
.sp-fakten{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.sp-fakten li{border:1.5px solid rgba(220,235,247,.5);border-radius:999px;padding:6px 14px;font-family:var(--display);font-weight:600;font-size:15px;color:#fff}
.sp-start .knopf{justify-self:center}

/* Anmeldung */
.sp-name{display:grid;gap:6px;font-family:var(--display);font-weight:600;color:var(--navy);font-size:15px}
.sp-name input{font:inherit;font-family:var(--text);font-size:21px;font-weight:400;padding:12px 14px;border:2px solid var(--navy);border-radius:12px;background:#fff;color:var(--tinte);min-width:0}
.sp-namen{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.sp-teambox{display:grid;gap:12px;padding:16px;border-radius:18px;background:var(--papier);border-top:6px solid var(--navy)}
.sp-teambox-1{border-top-color:var(--rot)}
.sp-teamrolle{font-family:var(--display);font-weight:700;color:var(--navy)}
.sp-teambox-1 .sp-teamrolle{color:var(--rot-text)}

/* Punktetafel */
.sp-tafel{display:grid;grid-template-columns:1fr 1fr auto;gap:10px;margin:0 -6px 14px;padding:8px 6px;position:sticky;top:64px;z-index:5;background:var(--papier);align-items:center}
.sp-team{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 16px;border-radius:14px;color:#fff;font-family:var(--display);font-weight:600;min-width:0}
.sp-team-0{background:var(--navy)}
.sp-team-1{background:var(--rot)}
.sp-tname{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:16px}
.sp-tpunkte{font-size:26px;font-weight:700;min-width:1.4em;text-align:right;display:inline-block}
.sp-tpunkte.ist-plus{animation:sp-plus .6s ease-out}
@keyframes sp-plus{0%{transform:scale(1)}35%{transform:scale(1.6)}100%{transform:scale(1)}}
.sp-ton{font-family:var(--display);font-weight:600;font-size:14px;border:2px solid var(--navy);background:#fff;color:var(--navy);border-radius:999px;padding:8px 12px;cursor:pointer}
.sp-ton.ist-aus{background:var(--karton);color:var(--graphit);border-color:var(--graphit)}
.sp-fort{grid-column:1/-1;display:flex;gap:8px;justify-content:center}
.sp-punkt{width:34px;height:8px;border-radius:4px;background:var(--linie)}
.sp-punkt.ist-fertig{background:var(--navy)}
.sp-punkt.ist-jetzt{background:var(--rot)}

/* Prüfungsbogen */
.sp-stationen{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px}
.sp-station{position:relative;display:grid;grid-template-columns:64px 1fr;gap:12px;align-items:center;padding:12px 14px;border-radius:16px;border:2px solid var(--linie);background:#fff}
.sp-station.ist-naechste{border-color:var(--rot);box-shadow:0 0 0 4px rgba(209,58,34,.12)}
.sp-station.ist-fertig{background:var(--papier)}
.sp-st-bild{width:64px;height:64px}
.sp-st-text{display:grid;gap:1px;min-width:0}
.sp-st-nr{font-family:var(--display);font-size:13px;font-weight:600;color:var(--graphit);letter-spacing:.6px;text-transform:uppercase}
.sp-st-text strong{font-family:var(--display);color:var(--navy);font-size:19px}
.sp-st-kurz{font-size:16px;color:var(--graphit)}
.sp-stempel{position:absolute;left:4px;top:50%;margin-top:-14px;font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:2px;font-size:12px;color:var(--rot);border:3px solid var(--rot);border-radius:8px;padding:1px 6px;transform:rotate(-12deg);opacity:.9;background:rgba(255,253,248,.7)}
.sp-stempel.ist-neu{animation:sp-stempel .55s cubic-bezier(.2,1.6,.4,1) .3s both}
@keyframes sp-stempel{0%{transform:rotate(-12deg) scale(3.2);opacity:0}60%{transform:rotate(-12deg) scale(.9);opacity:1}100%{transform:rotate(-12deg) scale(1);opacity:.9}}

/* Fragen */
.sp-frage-text{font-size:clamp(23px,3vw,29px)!important;line-height:1.3;font-weight:600}
.sp-wer{font-size:20px;padding:10px 14px;border-radius:12px;background:var(--papier)}
.sp-wer-0{border-left:6px solid var(--navy)}
.sp-wer-1{border-left:6px solid var(--rot)}
.sp-zug{display:grid;gap:14px}
.sp-zug>.knopf,.sp-a-text>.knopf{justify-self:start;width:auto}
.sp-a-text>.knopf{justify-self:center}
.sp-wahl{display:grid;gap:12px}
.sp-option{width:100%;margin:0;justify-content:flex-start;text-align:left;font-family:var(--text);font-weight:700;font-size:21px;padding:16px 20px;border-radius:16px;border:2px solid var(--navy);background:#fff;color:var(--navy);transition:transform .1s,background .15s}
.sp-option:hover{background:var(--navy-l)}
.sp-option:active{transform:scale(.98)}
.sp-verdeckt{font-size:21px}
.sp-spannung{font-family:var(--display);font-weight:600;font-size:23px;color:var(--navy)}
.sp-spannung::after{content:"";display:inline-block;width:1.4em;text-align:left;animation:sp-punkte 1.2s steps(4) infinite}
@keyframes sp-punkte{0%{content:""}25%{content:"."}50%{content:".."}75%{content:"..."}}
.sp-richtig{display:flex;gap:12px;align-items:center;font-family:var(--display);font-weight:700;font-size:22px;color:var(--navy);background:var(--navy-l);padding:14px 18px;border-radius:16px;animation:sp-auf .4s cubic-bezier(.2,1.5,.4,1)}
.sp-haken{flex:none;width:38px;height:38px;border-radius:50%;background:var(--navy);color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:19px}
@keyframes sp-auf{from{transform:scale(.9);opacity:0}to{transform:none;opacity:1}}
.sp-ergebnis{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px}
.sp-erg{display:grid;gap:3px;padding:12px 14px;border-radius:14px;border:2px solid var(--linie);font-size:18px;background:#fff;animation:sp-auf .4s ease-out both}
.sp-erg:nth-child(2){animation-delay:.15s}
.sp-erg strong{font-family:var(--display);font-size:16px}
.sp-erg-0 strong{color:var(--navy)}
.sp-erg-1 strong{color:var(--rot-text)}
.sp-erg.ist-ok{border-color:var(--navy)}
.sp-erg-1.ist-ok{border-color:var(--rot)}
.sp-erg-punkte{font-weight:700}
.sp-erg.ist-ok .sp-erg-punkte{color:var(--navy)}
.sp-erg.ist-falsch{opacity:.85}
.sp-erg.ist-falsch .sp-erg-punkte{color:var(--graphit);font-weight:400}
.sp-erkl{font-size:20px}

/* Medien */
.sp-medien video{width:100%;height:auto;border-radius:16px;background:#000}
.sp-hoer{display:grid;gap:10px;background:var(--papier);border-radius:16px;padding:16px}
.sp-hoer audio{width:100%}
.sp-ki{justify-self:start;background:var(--navy);color:#fff;font-family:var(--display);font-weight:600;font-size:14px;padding:4px 12px;border-radius:999px}
.sp-keine-ki{justify-self:start;display:inline-block;background:#fff;color:var(--navy);border:2px solid var(--navy);font-family:var(--display);font-weight:600;font-size:14px;padding:3px 12px;border-radius:999px}
.sp-vergleich{font-style:italic}

/* Papagei */
.sp-vorlagen{display:flex;flex-wrap:wrap;gap:8px}
.sp-chip{font:inherit;font-size:16px;border:1.5px solid var(--navy);background:var(--navy-l);color:var(--navy);border-radius:999px;padding:6px 14px;cursor:pointer;text-align:left}
.sp-papagei-text{font:inherit;font-size:21px;padding:14px;border:2px solid var(--navy);border-radius:14px;resize:vertical;width:100%;background:#fff;color:var(--tinte)}
.sp-erklbox{background:var(--papier);border-left:6px solid var(--rot);border-radius:12px;padding:14px 16px;display:grid;gap:8px;font-size:19px}
.sp-erklbox[hidden]{display:none}

/* Schätz-Duell */
.sp-schaetz-wert{font-family:var(--display);font-weight:700;font-size:clamp(30px,6vw,44px);color:var(--navy);text-align:center}
.sp-regler{width:100%;accent-color:var(--rot);height:44px}
.sp-skala{display:flex;justify-content:space-between;font-size:15px;color:var(--graphit)}

/* Spurensuche: Brief */
.sp-brief{position:relative;max-width:560px;width:100%;margin:0 auto;border-radius:10px;overflow:hidden;box-shadow:0 6px 24px rgba(17,53,82,.18);cursor:crosshair;-webkit-user-select:none;user-select:none}
.sp-brief img{width:100%;height:auto;pointer-events:none}
.ist-daneben{animation:sp-wackel .35s}
@keyframes sp-wackel{25%{transform:translateX(-7px)}75%{transform:translateX(7px)}}
.sp-ziel{position:absolute;background:transparent;border:0;padding:0;margin:0;cursor:crosshair;border-radius:8px}
.sp-ziel.ist-gefunden{outline:4px solid var(--navy);background:rgba(17,53,82,.12);cursor:default;animation:sp-auf .3s}
.sp-ziel.ist-gefunden::after{content:attr(data-nr);position:absolute;right:-4px;top:-8px;width:26px;height:26px;border-radius:50%;background:var(--navy);color:#fff;font-family:var(--display);font-weight:700;font-size:15px;display:flex;align-items:center;justify-content:center}
.sp-ziel.ist-verpasst{outline:4px dashed var(--rot);background:rgba(209,58,34,.12)}
.ist-fertig.sp-brief{cursor:default}
.sp-funde{display:grid;gap:10px;padding-left:1.4em;margin:0}
.sp-funde li{display:grid;gap:2px;animation:sp-auf .3s}
.sp-wer-klein{font-size:15px;color:var(--graphit)}

/* Spurensuche: Handy mit Nachricht */
.sp-handy{width:min(380px,100%);margin:0 auto;border:10px solid #1f2a36;border-radius:36px;background:#fff;overflow:hidden;display:grid;box-shadow:0 10px 30px rgba(17,53,82,.25)}
.sp-dm-kopf{display:flex;align-items:center;gap:10px;padding:14px;border:0;border-bottom:1px solid #e3e3e3;background:#fafafa;text-align:left;font:inherit;cursor:pointer;width:100%}
.sp-dm-avatar{width:44px;height:44px;border-radius:50%;background:linear-gradient(135deg,#f58529,#dd2a7b,#8134af);display:grid;place-items:center;font-size:22px;flex:none}
.sp-dm-name{display:grid;line-height:1.25}
.sp-dm-name strong{font-size:16px;color:#111}
.sp-dm-name small{font-size:13px;color:#777}
.sp-dm-verlauf{display:grid;gap:8px;padding:14px;background:#fff;min-height:300px;align-content:start}
.sp-dm-blase{justify-self:start;max-width:86%;text-align:left;font:inherit;font-size:17px;line-height:1.35;background:#efefef;color:#111;border:0;border-radius:18px 18px 18px 6px;padding:10px 14px;cursor:pointer}
.sp-dm-eingabe{margin:0 12px 12px;border:1px solid #ddd;border-radius:999px;padding:8px 14px;color:#999;font-size:15px}
.sp-dm-blase.ist-gefunden,.sp-dm-kopf.ist-gefunden{outline:4px solid var(--navy);outline-offset:-2px;cursor:default}
.sp-dm-blase.ist-verpasst,.sp-dm-kopf.ist-verpasst{outline:4px dashed var(--rot);outline-offset:-2px}
.sp-dm-blase.ist-gefunden::before,.sp-dm-kopf.ist-gefunden::before{content:attr(data-nr) " ";font-family:var(--display);font-weight:700;color:var(--navy)}

/* Überlagerung: Anrufe und Druck */
.sp-ueber-offen{overflow:hidden}
.sp-ueber{position:fixed;inset:0;z-index:1000;background:radial-gradient(circle at 50% 20%,#1d4d73 0%,#0b2439 60%,#06131f 100%);color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:max(28px,env(safe-area-inset-top)) 22px max(28px,env(safe-area-inset-bottom));text-align:center;overflow:auto;animation:sp-ein .3s ease-out}
@keyframes sp-ein{from{opacity:0}to{opacity:1}}
.sp-a-oben{display:grid;gap:6px}
.sp-a-klein{font-family:var(--display);font-size:15px;color:#b9cbdc;letter-spacing:1px}
.sp-a-name{font-family:var(--display);font-weight:700;font-size:clamp(30px,7vw,44px)}
.sp-a-tag{justify-self:center;font-size:13px;border:1px solid rgba(255,255,255,.35);border-radius:999px;padding:3px 10px;color:#dcebf7}
.sp-a-avatar{width:150px;height:150px;border-radius:50%;background:rgba(220,235,247,.14);display:grid;place-items:center;font-family:var(--display);font-weight:700;font-size:70px;color:#dcebf7;animation:sp-wellen 1.6s ease-out infinite}
@keyframes sp-wellen{0%{box-shadow:0 0 0 0 rgba(220,235,247,.45),0 0 0 0 rgba(220,235,247,.25)}100%{box-shadow:0 0 0 36px rgba(220,235,247,0),0 0 0 70px rgba(220,235,247,0)}}
.sp-a-unten{display:flex;justify-content:space-around;width:min(420px,100%)}
.sp-a-wahl{display:grid;gap:8px;justify-items:center;font-family:var(--display);font-size:16px}
.sp-a-rund{width:78px;height:78px;border-radius:50%;border:0;cursor:pointer;display:grid;place-items:center}
.sp-a-an{background:#2e9e4f;animation:sp-wackeln 1.2s ease-in-out infinite}
.sp-a-ab{background:#d13a22}
@keyframes sp-wackeln{0%,60%,100%{transform:rotate(0)}70%{transform:rotate(-14deg)}80%{transform:rotate(14deg)}90%{transform:rotate(-8deg)}}
.sp-a-hoerer{width:38px;height:16px;border-radius:10px 10px 4px 4px;border:6px solid #fff;border-bottom:0;display:block;transform:translateY(4px)}
.sp-a-ab .sp-a-hoerer{transform:translateY(4px) rotate(180deg)}
.sp-a-welle{display:flex;gap:5px;align-items:center;height:90px}
.sp-a-welle i{width:6px;border-radius:3px;background:#dcebf7;animation:sp-welle .9s ease-in-out infinite}
.sp-a-welle i:nth-child(3n){animation-delay:.15s;background:#f3b2a6}
.sp-a-welle i:nth-child(4n){animation-delay:.3s}
.sp-a-welle i:nth-child(5n){animation-delay:.45s}
@keyframes sp-welle{0%,100%{height:12px}50%{height:80px}}
.sp-a-satz{font-family:var(--display);font-weight:600;font-size:clamp(26px,6vw,38px);color:#fff}
.sp-a-ende{justify-content:center}
.sp-a-text{display:grid;gap:16px;max-width:560px;font-size:21px;color:#dcebf7;justify-items:center}
.sp-a-text .knopf{justify-self:center}
.sp-a-gross{font-family:var(--display);font-weight:700;font-size:clamp(32px,7vw,50px);line-height:1.1;color:#fff}
.sp-a-punkte{font-family:var(--display);font-weight:700;font-size:22px;color:#f3b2a6}
.ist-gut .sp-a-punkte{color:#8fe0a8}

/* Glitch */
.sp-glitch{animation:sp-glitch .9s steps(2) both}
@keyframes sp-glitch{0%{transform:none;filter:none}10%{transform:translate(-8px,3px) skewX(8deg);filter:hue-rotate(90deg) contrast(1.6)}20%{transform:translate(9px,-4px);filter:invert(1)}30%{transform:translate(-4px,0) skewX(-12deg);filter:none}45%{transform:translate(6px,5px);filter:saturate(4) hue-rotate(-60deg)}60%{transform:none;filter:invert(1) contrast(2)}75%{transform:translate(-10px,-2px) skewX(6deg)}100%{transform:none;filter:none}}
.sp-glitch-text{position:relative}
.sp-glitch-text::before,.sp-glitch-text::after{content:attr(data-text);position:absolute;inset:0;pointer-events:none}
.sp-glitch-text::before{color:#f3b2a6;animation:sp-g1 2.4s infinite steps(1);clip-path:inset(0 0 60% 0)}
.sp-glitch-text::after{color:#8fd3ff;animation:sp-g2 2.4s infinite steps(1);clip-path:inset(55% 0 0 0)}
@keyframes sp-g1{0%,88%,100%{transform:none;opacity:0}90%{transform:translate(-5px,-2px);opacity:1}94%{transform:translate(4px,1px);opacity:1}}
@keyframes sp-g2{0%,86%,100%{transform:none;opacity:0}89%{transform:translate(5px,2px);opacity:1}95%{transform:translate(-3px,-1px);opacity:1}}

/* Druck */
.sp-druck{justify-content:flex-start;gap:16px}
.sp-druck.ist-knapp{animation:sp-alarm .5s ease-in-out infinite alternate}
@keyframes sp-alarm{from{box-shadow:inset 0 0 0 0 rgba(209,58,34,0)}to{box-shadow:inset 0 0 120px 30px rgba(209,58,34,.75)}}
.sp-d-kopf{display:grid;gap:10px;justify-items:center}
.sp-d-uhr{position:relative;width:96px;height:96px}
.sp-d-ring{width:96px;height:96px;transform:rotate(-90deg)}
.sp-d-ring-grund{fill:none;stroke:rgba(255,255,255,.18);stroke-width:8}
.sp-d-ring-zeit{fill:none;stroke:#d13a22;stroke-width:8;stroke-linecap:round;stroke-dasharray:276.5;stroke-dashoffset:0}
.sp-d-zahl{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--display);font-weight:700;font-size:36px}
.sp-d-verlauf{display:grid;gap:8px;width:min(520px,100%);max-height:34vh;overflow:auto;align-content:start}
.sp-d-blase{justify-self:start;text-align:left;background:rgba(255,255,255,.95);color:#111;border-radius:18px 18px 18px 6px;padding:10px 16px;font-size:clamp(18px,4.4vw,22px);font-weight:700;animation:sp-auf .25s ease-out;max-width:92%}
.sp-druck-anruf .sp-d-blase{background:transparent;color:#fff;border:0;padding:2px 0;font-family:var(--display);font-weight:600;font-size:clamp(20px,5vw,26px)}
.sp-d-wahl{display:grid;gap:10px;width:min(520px,100%)}
.sp-d-gross{width:100%;margin:0;background:#fff;color:var(--navy);font-size:20px;padding:16px;border-radius:16px}
.sp-d-fuss{display:grid;justify-items:center;padding-top:4px}
.sp-d-rett{width:52px;height:52px;animation:none}
.sp-d-rett .sp-a-hoerer{width:26px;height:11px;border-width:4px}
.sp-d-link{background:none;border:0;color:#b9cbdc;font:inherit;font-size:14px;text-decoration:underline;cursor:pointer;padding:6px}

/* Rollenspiel */
.sp-buehne{background:linear-gradient(160deg,#113552,#0b2439);color:#fff;border-radius:20px;padding:22px;display:grid;gap:10px;min-height:170px;align-content:center}
.sp-buehne.ist-neu{animation:sp-auf .35s ease-out}
.sp-zeilen-nr{font-family:var(--display);font-size:14px;letter-spacing:.8px;color:#f3b2a6;text-transform:uppercase}
.sp-zeile{font-family:var(--display);font-weight:600;font-size:clamp(23px,4.4vw,30px);line-height:1.3}
.sp-regie{background:var(--papier);border-radius:14px;padding:12px 16px;font-size:18px}
.sp-regie summary{cursor:pointer;font-family:var(--display);font-weight:600;color:var(--navy)}
.sp-regie ul{margin:8px 0 0;padding-left:1.2em;display:grid;gap:6px}
.sp-checks{display:grid;gap:10px}
.sp-check{display:grid;grid-template-columns:34px 1fr auto;gap:12px;align-items:center;text-align:left;font:inherit;font-size:20px;padding:14px 16px;border:2px solid var(--navy);border-radius:14px;background:#fff;color:var(--tinte);cursor:pointer}
.sp-check-box{width:30px;height:30px;border:3px solid var(--navy);border-radius:8px;display:grid;place-items:center}
.sp-check.ist-an{background:var(--navy-l)}
.sp-check.ist-an .sp-check-box{background:var(--navy)}
.sp-check.ist-an .sp-check-box::after{content:"✓";color:#fff;font-weight:700}
.sp-check-p{font-family:var(--display);font-weight:700;color:var(--rot-text)}

/* Siegel */
.sp-zwei{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.sp-gut,.sp-schlecht{border-radius:16px;padding:14px 16px;background:var(--papier)}
.sp-gut{border-top:6px solid var(--navy)}
.sp-schlecht{border-top:6px solid var(--rot)}
.sp-zwei ul{margin:8px 0 0;padding-left:1.2em;display:grid;gap:4px;font-size:19px}
.sp-warn{font-family:var(--display);font-weight:600;color:var(--rot-text);font-size:18px}
.sp-schwur{margin:0;font-family:var(--display);font-weight:700;color:var(--navy);font-size:clamp(24px,4.4vw,32px);line-height:1.3;border-left:8px solid var(--rot);padding:8px 0 8px 18px}
.sp-siegelfeld{display:grid;grid-template-columns:1fr auto 1fr;gap:14px;align-items:center}
.sp-siegelfeld.ist-einzeln{grid-template-columns:auto 1fr}
.sp-pad{min-height:150px;border-radius:24px;border:3px dashed var(--navy);background:var(--navy-l);display:grid;place-content:center;gap:6px;cursor:pointer;font:inherit;color:var(--navy);touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;transition:transform .1s,background .15s}
.sp-pad-1{border-color:var(--rot);background:#fbe3de;color:var(--rot-text)}
.sp-pad.ist-gedrueckt{transform:scale(.96);border-style:solid;background:var(--navy);color:#fff}
.sp-pad-1.ist-gedrueckt{background:var(--rot)}
.sp-pad-name{font-family:var(--display);font-weight:700;font-size:20px}
.sp-pad-hinweis{font-size:15px}
.sp-siegel-mitte{position:relative;width:132px;height:132px}
.sp-s-ring{position:absolute;inset:0;width:132px;height:132px;transform:rotate(-90deg)}
.sp-s-grund{fill:none;stroke:var(--linie);stroke-width:8}
.sp-s-fort{fill:none;stroke:var(--rot);stroke-width:8;stroke-linecap:round;stroke-dasharray:326.7;stroke-dashoffset:326.7}
.sp-s-bild{position:absolute;inset:16px;width:100px;height:100px;opacity:.35;transition:opacity .2s,transform .2s}
.sp-siegel-mitte.ist-aktiv .sp-s-bild{opacity:.7;transform:scale(1.05)}
.sp-siegel-mitte.ist-besiegelt .sp-s-bild{opacity:1;animation:sp-stempel2 .6s cubic-bezier(.2,1.6,.4,1)}
@keyframes sp-stempel2{0%{transform:scale(2.6) rotate(-20deg);opacity:0}100%{transform:none;opacity:1}}
.sp-s-info{text-align:center;font-family:var(--display);font-weight:700;font-size:22px;color:var(--navy)}
.ist-besiegelt .sp-pad{opacity:.5}

/* Auswertung */
.sp-auswert{display:grid;gap:4px}
.sp-aw-zeile{display:grid;grid-template-columns:1fr 110px 110px;gap:8px;padding:9px 12px;border-radius:10px;font-size:19px}
.sp-aw-zeile span:not(:first-child){text-align:right;font-variant-numeric:tabular-nums}
.sp-aw-zeile.ist-neu{animation:sp-auf .3s ease-out;background:var(--papier)}
.sp-aw-kopf{font-family:var(--display);font-weight:700;font-size:15px;color:var(--navy)}
.sp-aw-summe{font-family:var(--display);font-weight:700;background:var(--navy);color:#fff;font-size:21px}
.sp-urteil{text-align:center;display:grid;gap:6px;padding:18px;border-radius:20px;background:var(--navy-l);animation:sp-auf .5s cubic-bezier(.2,1.5,.4,1)}
.sp-urteil-gross{font-family:var(--display);font-weight:700;font-size:clamp(30px,6vw,46px);color:var(--rot-text);line-height:1.1}
.sp-urteil-klein{font-size:19px;color:var(--navy)}
.sp-urkunde-vorschau{border-radius:12px;overflow:hidden;box-shadow:0 12px 34px rgba(17,53,82,.22);animation:sp-auf .6s ease-out .2s both}
.sp-urkunde-vorschau svg{display:block;width:100%;height:auto}
.sp-auftrag{background:var(--papier);border-radius:16px;padding:18px 20px;display:grid;gap:10px}
.sp-auftrag ol{margin:0;padding-left:1.3em;display:grid;gap:8px}

.sp-konfetti{position:fixed;inset:0;pointer-events:none;z-index:1100}

/* Erklärteil unter dem Spiel */
.sp-erklaer{display:grid;gap:22px}
.sp-schritte{list-style:none;margin:0;padding:0;display:grid;gap:16px;counter-reset:s}
.sp-schritte li{display:grid;grid-template-columns:44px 1fr;gap:14px;align-items:start;counter-increment:s}
.sp-schritte li::before{content:counter(s);width:40px;height:40px;border-radius:50%;background:var(--rot);color:#fff;font-family:var(--display);font-weight:700;display:flex;align-items:center;justify-content:center}
.sp-kacheln{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:16px;list-style:none;padding:0;margin:26px 0}
.sp-kacheln li{background:var(--weiss);border:2px solid var(--linie);border-radius:18px;padding:18px;display:grid;gap:8px;align-content:start}
.sp-kacheln img{width:84px;height:84px}
.sp-kacheln a{font-weight:700;color:var(--rot-text)}
.sp-kacheln span{font-size:18px}
.sp-hinweis{border-left:6px solid var(--rot);padding:4px 0 4px 16px}

@media (max-width:640px){
  .sp-namen,.sp-zwei{grid-template-columns:1fr}
  .sp-tafel{top:69px;grid-template-columns:1fr 1fr}
  .sp-tname{font-size:14px}
  .sp-ton{grid-column:1/-1;justify-self:center;padding:4px 12px;font-size:13px}
  .sp-grafik{width:96px;height:96px}
  .sp-option{font-size:19px;padding:14px 16px}
  .sp-siegelfeld{grid-template-columns:1fr 1fr}
  .sp-siegelfeld.ist-einzeln{grid-template-columns:1fr}
  .sp-siegel-mitte{grid-column:1/-1;grid-row:1;justify-self:center}
  .sp-aw-zeile{grid-template-columns:1fr 70px 70px;font-size:17px}
  .sp-a-avatar{width:120px;height:120px;font-size:56px}
}
@media (prefers-reduced-motion:reduce){
  .sp-karte,.sp-puls,.sp-a-avatar,.sp-a-an,.sp-a-welle i,.sp-glitch,.sp-glitch-text::before,.sp-glitch-text::after,.sp-druck.ist-knapp,.sp-stempel.ist-neu{animation:none!important}
}

@media print{
  @page{size:A4 landscape;margin:0}
  body>*:not(#sp-druckbereich){display:none!important}
  #sp-druckbereich{display:block!important;width:297mm;height:209mm;overflow:hidden}
  #sp-druckbereich svg{width:297mm;height:209mm;display:block}
  html,body{background:#fff!important;margin:0;padding:0}
}