/* Schaltpult (/schaltpult): Werkzeuge der Gruppe „Treue und Aktionen“. Präfix spt-.
   Stempelkarte, Reste-Retter, Wetter-Automatik, Gutschein-Studio, Glücksrad. Logik: wwwroot/js/schaltpult-treue.js.
   Farben nur aus dem Siegel (Tokens aus site.css und schaltpult.css; die festen Werte unten sind die Siegel-Farben
   aus site.css in Hell, damit Karten und Bühnen in Hell und Dunkel gleich aussehen). Grafik nur Siegel-Elemente. */

.spt-buehne{--spt-rot:#B0090D;--spt-blau:#2A3FB0;--spt-gruen:#1F5A3A;--spt-lila:#5B1A62;--spt-braun:#A8561B;--spt-gold:#F2A31B;--spt-messing:#C27F0A;--spt-tief:#06150E}

/* ---------- Gemeinsame Bausteine ---------- */
.spt-sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.spt-gruppe{border:0;margin:0;padding:0;min-width:0}
.spt-gruppe>legend,.spt-feldtitel{display:block;font-weight:700;font-size:15px;margin:0 0 8px;padding:0}
.spt-hinweis{margin:0;font-size:13.5px;color:var(--muted)}
.spt-hinweis.ist-warnung{color:var(--warn);font-weight:700}
.spt-haken-text{display:flex;flex-direction:column;gap:1px;line-height:1.25}
.spt-haken-text small{font-weight:400;font-size:13px;color:var(--muted)}
.sp-haken-liste.spt-haken-breit{grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
.sp-haken-liste.spt-haken-tage{grid-template-columns:repeat(auto-fill,minmax(76px,1fr))}
.spt-haken-tage .sp-haken>span{padding-left:40px;min-height:46px}
.sp-haken-liste.spt-haken-foto{grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}
.spt-haken-foto .sp-haken>span{padding-top:6px;padding-bottom:6px}
.spt-haken-foto .sp-haken img,.spt-haken-foto .spt-chip-siegel{flex:none;width:32px;height:32px;border-radius:50%;object-fit:cover;margin:0;box-shadow:0 0 0 2px var(--surface),0 0 0 3.5px var(--logo-gold)}
.spt-segment-eng span{padding:4px 2px;font-size:14.5px}
.spt-segment-sim span{gap:6px;font-size:14px;padding:4px 6px}

/* Siegel statt Foto im Chip */
.spt-chip-siegel{display:inline-block;flex:none;width:28px;height:28px;margin-left:-6px;border-radius:50%;background:var(--logo-gruen) url("../img/logo-klein.webp") center/78% no-repeat;box-shadow:inset 0 0 0 2px var(--logo-gold)}
.spt-chip-siegel.spt-preis-aktion{background-color:var(--logo-lila)}
.spt-chip-siegel.spt-preis-morgen{background:var(--logo-creme);position:relative}
.spt-chip-siegel.spt-preis-morgen::after{content:"";position:absolute;inset:22%;background:var(--spt-messing);-webkit-mask:url("../img/grafik/funkel.svg") center/contain no-repeat;mask:url("../img/grafik/funkel.svg") center/contain no-repeat}
.spt-chips-foto .sp-chip img{box-shadow:0 0 0 2px var(--surface)}

/* Farbkombinationen aus dem Siegel (Stempelkarte, Gutschein) */
.spt-d-gruen{--d-grund:var(--logo-gruen);--d-text:var(--logo-creme);--d-akzent:var(--logo-gold);--d-stempel:var(--logo-gold);--d-stempel-text:var(--logo-gruen)}
.spt-d-lila{--d-grund:var(--logo-lila);--d-text:var(--logo-creme);--d-akzent:var(--logo-gold);--d-stempel:var(--logo-gold);--d-stempel-text:var(--logo-lila)}
.spt-d-creme{--d-grund:var(--logo-creme);--d-text:var(--logo-gruen);--d-akzent:var(--spt-rot);--d-stempel:var(--spt-rot);--d-stempel-text:var(--logo-creme)}
.spt-d-blau{--d-grund:var(--spt-blau);--d-text:var(--logo-creme);--d-akzent:var(--logo-creme);--d-stempel:var(--logo-creme);--d-stempel-text:var(--spt-blau)}
.spt-d-gold{--d-grund:var(--logo-gold);--d-text:var(--logo-gruen);--d-akzent:var(--logo-gruen);--d-stempel:var(--logo-gruen);--d-stempel-text:var(--logo-gold)}
.spt-farbpunkt{display:inline-block;flex:none;width:22px;height:22px;border-radius:50%;background:linear-gradient(135deg,var(--d-grund) 0 52%,var(--d-akzent) 52%);box-shadow:0 0 0 2px var(--surface),0 0 0 3px var(--line)}
.sp-chip input:checked+span .spt-farbpunkt{box-shadow:0 0 0 2px var(--logo-creme)}

/* Bühnen: dunkle Siegel-Fläche mit Funkel-Muster */
.spt-wallet-buehne,.spt-reste-buehne,.spt-gs-buehne,.spt-rad-buehne{position:relative;border-radius:18px;padding:22px 16px;color:var(--logo-creme);overflow:hidden;isolation:isolate;background:
  url("../img/grafik/muster.svg") 0 0/170px,
  radial-gradient(90% 70% at 100% 0%,color-mix(in srgb,var(--sp-farbe,var(--logo-gold)) 34%,transparent),transparent 70%),
  radial-gradient(70% 60% at 0% 100%,color-mix(in srgb,var(--logo-lila) 55%,transparent),transparent 70%),
  linear-gradient(160deg,var(--logo-gruen),var(--spt-tief))}
.spt-knoepfe{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.spt-knopf{min-height:48px}
.spt-wallet-buehne .btn-ghost,.spt-gs-buehne .btn-ghost{color:var(--logo-creme);border-color:color-mix(in srgb,var(--logo-creme) 70%,transparent)}
.spt-wallet-buehne .btn-ghost:hover,.spt-gs-buehne .btn-ghost:hover{background:rgba(249,239,220,.1)}
.spt-knopf:focus-visible,.spt-rechnung summary:focus-visible,.spt-recht summary:focus-visible{outline:3px solid var(--logo-gold);outline-offset:3px}
.spt-merkmale{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.spt-merkmale:empty{display:none}
.spt-merkmale li{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:999px;background:var(--sp-hell);border:1px solid color-mix(in srgb,var(--sp-farbe) 40%,var(--line));font-size:13.5px;font-weight:600}
.spt-merkmale li::before{content:"";width:14px;height:14px;background:var(--sp-farbe);-webkit-mask:url("../img/grafik/zeichen-haken.svg") center/contain no-repeat;mask:url("../img/grafik/zeichen-haken.svg") center/contain no-repeat}

/* =====================================================================================================
   1. Stempelkarte
   ===================================================================================================== */
.spt-tagwahl[hidden]{display:none}
.spt-wallet-buehne{display:flex;flex-direction:column;align-items:center;gap:16px;padding:26px 16px 20px}
.spt-wallet{position:relative;width:100%;max-width:370px;border-radius:24px;padding:16px 16px 14px;color:var(--d-text);overflow:hidden;transform:rotate(-1.2deg);background:
  url("../img/grafik/muster-gold.svg") 0 0/150px,
  radial-gradient(110% 80% at 100% 0%,color-mix(in srgb,var(--d-akzent) 24%,transparent),transparent 62%),
  linear-gradient(155deg,color-mix(in srgb,var(--d-grund) 82%,#fff),var(--d-grund) 42%,color-mix(in srgb,var(--d-grund) 82%,#000));
  box-shadow:0 34px 50px -30px rgba(0,0,0,.85),inset 0 0 0 1.5px color-mix(in srgb,var(--d-akzent) 55%,transparent);
  transition:background-color .4s,color .4s}
.spt-wallet::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(110deg,transparent 30%,rgba(249,239,220,.32) 46%,transparent 62%);transform:translateX(-120%)}
.spt-wallet.ist-glanz::before{animation:spt-glanz 1.1s ease}
@keyframes spt-glanz{to{transform:translateX(120%)}}
.spt-wallet.ist-stoss{animation:spt-stoss .35s ease}
@keyframes spt-stoss{30%{transform:rotate(-1.2deg) translateY(3px) scale(.985)}}
.spt-wallet-kopf{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.spt-wallet-logo{flex:none;width:44px;height:44px;border-radius:50%;background:var(--logo-gruen) url("../img/logo-klein.webp") center/80% no-repeat;box-shadow:0 0 0 2px var(--logo-gold),0 6px 12px -6px rgba(0,0,0,.6)}
.spt-wallet-name{display:flex;flex-direction:column;min-width:0;line-height:1.2}
.spt-wallet-name b{font-family:var(--f-display);font-size:19px;overflow-wrap:anywhere}
.spt-wallet-name small{font-size:12px;opacity:.8}
.spt-wallet-nr{margin-left:auto;align-self:flex-start;padding:3px 8px;border-radius:999px;border:1px solid color-mix(in srgb,var(--d-text) 40%,transparent);font-family:var(--f-mono);font-size:11px;white-space:nowrap}
.spt-zellen{--spalten:6;list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(var(--spalten),minmax(0,1fr));gap:8px}
.spt-zelle{position:relative;display:grid;place-items:center;aspect-ratio:1/1;border-radius:50%;border:2px dashed color-mix(in srgb,var(--d-text) 42%,transparent);font-family:var(--f-mono);font-size:11px;color:color-mix(in srgb,var(--d-text) 62%,transparent)}
.spt-zelle.ist-voll{border-color:transparent}
.spt-zelle.ist-voll .spt-zelle-nr{opacity:0}
.spt-zelle.ist-voll::before,.spt-zelle.ist-voll::after{content:"";position:absolute;pointer-events:none}
.spt-zelle.ist-voll::before{inset:-3px;background:var(--d-stempel);-webkit-mask:url("../img/grafik/plakette.svg") center/contain no-repeat;mask:url("../img/grafik/plakette.svg") center/contain no-repeat;transform:rotate(var(--dreh,-12deg));filter:drop-shadow(0 3px 3px rgba(0,0,0,.25))}
.spt-zelle.ist-voll::after{inset:27% 22% 30%;background:var(--d-stempel-text);-webkit-mask:url("../img/grafik/krone.svg") center/contain no-repeat;mask:url("../img/grafik/krone.svg") center/contain no-repeat;transform:rotate(var(--dreh,-12deg))}
.spt-zelle:nth-child(3n).ist-voll{--dreh:9deg}
.spt-zelle:nth-child(4n+1).ist-voll{--dreh:-20deg}
.spt-zelle.ist-voll.ist-doppelt::before{background:color-mix(in srgb,var(--d-stempel) 70%,var(--spt-rot))}
.spt-zelle.ist-neu::before,.spt-zelle.ist-neu::after{animation:spt-stempeln .5s cubic-bezier(.25,1.5,.45,1) both}
@keyframes spt-stempeln{0%{transform:scale(2.6) rotate(-48deg);opacity:0}55%{opacity:1}100%{transform:scale(1) rotate(var(--dreh,-12deg));opacity:1}}
.spt-zelle.ist-praemie{border:2.5px solid var(--logo-gold);background:color-mix(in srgb,var(--logo-gold) 18%,transparent)}
.spt-zelle.ist-praemie img,.spt-zelle.ist-praemie .sp-ohnefoto{position:absolute;inset:3px;width:calc(100% - 6px);height:calc(100% - 6px);border-radius:50%;object-fit:cover}
.spt-zelle.ist-praemie::after{content:"";position:absolute;left:50%;top:-11px;width:62%;height:42%;transform:translateX(-50%) rotate(-8deg);background:url("../img/grafik/krone.svg") center/contain no-repeat;filter:drop-shadow(0 2px 2px rgba(0,0,0,.35))}
.spt-wallet.ist-voll .spt-zelle.ist-praemie{animation:spt-pochen 1s ease-in-out infinite}
@keyframes spt-pochen{50%{transform:scale(1.12);box-shadow:0 0 0 6px color-mix(in srgb,var(--logo-gold) 35%,transparent)}}
.spt-wallet-stand{margin:14px 0 8px;font-size:14px;line-height:1.35}
.spt-wallet-extras{list-style:none;margin:0 0 12px;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.spt-wallet-extras li{padding:3px 10px;border-radius:999px;font-size:12px;font-weight:700;background:color-mix(in srgb,var(--d-akzent) 22%,transparent);border:1px solid color-mix(in srgb,var(--d-akzent) 50%,transparent)}
.spt-wallet-extras:empty{display:none}
.spt-wallet-fuss{display:flex;align-items:center;gap:10px;padding-top:10px;border-top:1px dashed color-mix(in srgb,var(--d-text) 35%,transparent);font-size:11px;opacity:.85}
.spt-strichcode{flex:none;width:110px;height:24px;border-radius:3px;background:repeating-linear-gradient(90deg,var(--d-text) 0 2px,transparent 2px 4px,var(--d-text) 4px 5px,transparent 5px 8px,var(--d-text) 8px 11px,transparent 11px 12px)}
.spt-praemie-pop{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:16px;text-align:center;border-radius:inherit;background:radial-gradient(circle at 50% 42%,color-mix(in srgb,var(--d-grund) 88%,transparent),var(--d-grund) 72%);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);animation:spt-pop .6s cubic-bezier(.25,1.4,.45,1) both}
.spt-praemie-pop[hidden]{display:none}
.spt-praemie-pop b{font-family:var(--f-display);font-size:26px;color:var(--d-akzent)}
.spt-praemie-pop>span:last-child{font-weight:700}
.spt-pop-krone{width:58px;height:40px;background:url("../img/grafik/krone.svg") center/contain no-repeat;margin-bottom:-14px;position:relative;z-index:1}
.spt-pop-bild{position:relative;display:block;width:104px;height:104px;border-radius:50%;overflow:hidden;box-shadow:0 0 0 4px var(--logo-gold),0 14px 30px -10px rgba(0,0,0,.7)}
.spt-pop-bild img{width:100%;height:100%;object-fit:cover;display:block}
.spt-praemie-pop::before{content:"";position:absolute;left:50%;top:42%;width:260px;height:260px;margin:-130px 0 0 -130px;background:url("../img/grafik/strahlen.svg") center/contain no-repeat;opacity:.8;z-index:-1;animation:spt-drehen 14s linear infinite}
@keyframes spt-pop{from{opacity:0;transform:scale(.6)}}
@keyframes spt-drehen{to{transform:rotate(360deg)}}
.spt-knopf-stempel{width:20px;height:20px;background:currentColor;-webkit-mask:url("../img/grafik/plakette.svg") center/contain no-repeat;mask:url("../img/grafik/plakette.svg") center/contain no-repeat}

/* =====================================================================================================
   2. Reste-Retter
   ===================================================================================================== */
.spt-reste-buehne{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px 22px;padding:20px 16px 18px}
.spt-tuete-platz{position:relative;flex:none;width:176px;height:236px}
.spt-tuete-hinten,.spt-tuete-vorne{position:absolute;left:0;right:0;bottom:0;clip-path:polygon(0 7%,5% 0,10% 7%,15% 0,20% 7%,25% 0,30% 7%,35% 0,40% 7%,45% 0,50% 7%,55% 0,60% 7%,65% 0,70% 7%,75% 0,80% 7%,85% 0,90% 7%,95% 0,100% 7%,100% 100%,0 100%)}
.spt-tuete-hinten{left:12px;right:12px;height:168px;background:color-mix(in srgb,var(--spt-braun) 62%,#000)}
.spt-tuete-vorne{height:132px;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;border-radius:0 0 12px 12px;background:
  linear-gradient(90deg,rgba(0,0,0,.14),transparent 14%,transparent 86%,rgba(0,0,0,.18)),
  repeating-linear-gradient(90deg,transparent 0 22px,rgba(255,255,255,.05) 22px 23px),
  linear-gradient(180deg,color-mix(in srgb,var(--spt-braun) 82%,var(--logo-gold)),var(--spt-braun))}
.spt-tuete-siegel{width:66px;height:61px;background:url("../img/logo-klein.webp") center/contain no-repeat;transform:rotate(-8deg);filter:drop-shadow(0 3px 4px rgba(0,0,0,.35))}
.spt-tuete-schrift{font-family:var(--f-display);font-weight:700;font-size:17px;letter-spacing:.06em;color:var(--logo-creme);text-shadow:0 2px 0 rgba(0,0,0,.25)}
.spt-tuete-fotos{position:absolute;left:8px;right:8px;bottom:94px;height:142px;z-index:1}
.spt-tuete-foto{position:absolute;width:70px;height:70px;border-radius:50%;overflow:hidden;box-shadow:0 0 0 3px var(--logo-creme),0 10px 16px -8px rgba(0,0,0,.7)}
.spt-tuete-foto img,.spt-tuete-foto .sp-ohnefoto{width:100%;height:100%;object-fit:cover;display:block}
.spt-tuete-foto:nth-child(1){left:2px;bottom:0;transform:rotate(-10deg)}
.spt-tuete-foto:nth-child(2){left:50px;bottom:10px;transform:rotate(6deg)}
.spt-tuete-foto:nth-child(3){right:2px;bottom:2px;transform:rotate(12deg)}
.spt-tuete-foto:nth-child(4){left:22px;bottom:44px;transform:rotate(-4deg)}
.spt-tuete-foto:nth-child(5){right:20px;bottom:48px;transform:rotate(8deg)}
.spt-tuete-foto:nth-child(6){left:52px;bottom:72px;transform:rotate(-6deg)}
.spt-tuete-foto.ist-neu{animation:spt-fallen .75s cubic-bezier(.3,1.35,.5,1) both;animation-delay:var(--v,0s)}
@keyframes spt-fallen{from{translate:0 -190px;rotate:-40deg;opacity:0}40%{opacity:1}}
.spt-tuete-platz.ist-einzeln .spt-tuete-foto:nth-child(n+2){display:none}
.spt-tuete-platz.ist-einzeln .spt-tuete-foto:nth-child(1){left:50%;margin-left:-50px;width:100px;height:100px;bottom:0}
.spt-tuete-platz.ist-wackeln{animation:spt-wackeln .6s ease .45s}
@keyframes spt-wackeln{25%{transform:rotate(-3deg)}55%{transform:rotate(2.5deg)}80%{transform:rotate(-1deg)}}
.spt-tafel-marke{position:absolute;right:-12px;top:96px;z-index:3;padding:5px 10px;border-radius:999px;background:var(--gruen);color:#fff;font-size:12px;font-weight:700;box-shadow:0 0 0 2px var(--logo-creme);transform:rotate(8deg)}
.spt-tafel-marke[hidden]{display:none}
.spt-preisschild{position:relative;flex:none;display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:14px 22px 14px 30px;border-radius:14px;background:linear-gradient(160deg,var(--logo-gold),var(--spt-gold));color:var(--logo-gruen);transform:rotate(-4deg);box-shadow:0 14px 24px -14px rgba(0,0,0,.8),inset 0 0 0 2px color-mix(in srgb,var(--spt-messing) 60%,transparent)}
.spt-preisschild::before{content:"";position:absolute;left:11px;top:50%;width:10px;height:10px;margin-top:-5px;border-radius:50%;background:var(--logo-gruen);box-shadow:0 0 0 2px color-mix(in srgb,var(--logo-creme) 60%,transparent)}
.spt-preisschild small{font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap}
.spt-preisschild s{font-size:14px;opacity:.75}
.spt-preisschild b{font-family:var(--f-display);font-size:32px;line-height:1;white-space:nowrap}
.spt-preisschild-rabatt{position:absolute;right:-16px;top:-16px;display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:var(--spt-rot);color:#fff;font-weight:700;font-size:13px;transform:rotate(12deg);box-shadow:0 0 0 2px var(--logo-gold)}
.spt-reste-zeit{flex-basis:100%;max-width:max-content;margin:2px 0 0;display:inline-flex;align-items:center;gap:8px;padding:6px 14px;border-radius:999px;background:rgba(249,239,220,.12);border:1px solid rgba(249,239,220,.3);font-weight:700}
.spt-reste-zeit::before{content:"";width:16px;height:16px;border-radius:50%;border:2px solid var(--logo-gold);background:linear-gradient(var(--logo-gold),var(--logo-gold)) 50% 20%/2px 40% no-repeat}
.spt-werte{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(96px,1fr));gap:8px}
.spt-werte li{position:relative;display:flex;flex-direction:column;gap:2px;padding:12px 12px 10px;border-radius:14px;background:var(--surface);border:1px solid var(--line);overflow:hidden}
.spt-werte li::after{content:"";position:absolute;left:12px;right:12px;bottom:0;height:4px;border-radius:4px 4px 0 0;background:linear-gradient(90deg,var(--sp-farbe),var(--logo-gold))}
.spt-werte b{font-family:var(--f-display);font-size:clamp(22px,4.6vw,30px);line-height:1.05;color:var(--sp-farbe);font-variant-numeric:tabular-nums;white-space:nowrap}
.spt-werte span{font-size:13px;color:var(--muted);line-height:1.25}
.spt-rechnung,.spt-recht details{border-radius:12px;background:var(--paper);border:1px solid var(--line);font-size:14px}
.spt-rechnung summary,.spt-recht summary{cursor:pointer;padding:10px 14px;min-height:44px;display:flex;align-items:center;font-weight:700;border-radius:12px}
.spt-rechnung p{margin:0;padding:0 14px 12px;line-height:1.5}
.spt-sperrbild{position:relative;display:flex;flex-direction:column;align-items:center;gap:10px;padding:16px 14px;border-radius:22px;color:var(--logo-creme);overflow:hidden;background:url("../img/grafik/muster.svg") 0 0/150px,linear-gradient(165deg,var(--logo-lila),var(--logo-gruen))}
.spt-sperrbild[hidden]{display:none}
.spt-sperrbild-uhr{font-family:var(--f-display);font-size:42px;font-weight:500;line-height:1;letter-spacing:.02em}
.spt-push{display:flex;align-items:flex-start;gap:10px;width:100%;max-width:360px;padding:10px 12px;border-radius:16px;background:color-mix(in srgb,var(--logo-creme) 94%,transparent);color:var(--logo-gruen);box-shadow:0 12px 24px -14px rgba(0,0,0,.8)}
.spt-push.ist-neu{animation:spt-push .55s cubic-bezier(.25,1.3,.45,1)}
@keyframes spt-push{from{opacity:0;transform:translateY(-16px) scale(.96)}}
.spt-push-logo{flex:none;width:34px;height:34px;border-radius:9px;background:var(--logo-gruen) url("../img/logo-klein.webp") center/80% no-repeat}
.spt-push-text{display:flex;flex-direction:column;gap:2px;font-size:13.5px;line-height:1.35;min-width:0}
.spt-push-text small{font-size:12px;color:color-mix(in srgb,var(--logo-gruen) 70%,transparent)}

/* =====================================================================================================
   3. Wetter-Automatik
   ===================================================================================================== */
.spt-regel{display:flex;flex-direction:column;gap:8px;padding:10px 12px 12px;border-radius:14px;border:1.5px solid var(--line);background:var(--surface);transition:opacity .25s,border-color .25s}
.spt-regel.ist-aus{opacity:.62}
.spt-regel.ist-aus .spt-aktionen{display:none}
.spt-regel:not(.ist-aus){border-color:color-mix(in srgb,var(--sp-farbe) 45%,var(--line))}
.spt-regel-wenn{display:inline-flex;align-items:center;gap:8px}
.spt-wsymbol{display:inline-block;flex:none;width:22px;height:22px;border-radius:50%;position:relative;vertical-align:middle}
.spt-ws-sonne,.spt-ws-hitze{background:radial-gradient(circle,var(--logo-gold) 0 42%,transparent 44%),url("../img/grafik/funkel.svg") center/100% no-repeat}
.spt-ws-hitze{background:radial-gradient(circle,var(--spt-rot) 0 42%,transparent 44%),radial-gradient(circle,var(--logo-gold) 0 62%,transparent 64%)}
.spt-ws-regen{width:16px;height:16px;margin:3px;border-radius:50% 0 50% 50%;background:var(--blau);transform:rotate(-45deg)}
.spt-ws-kaelte,.spt-ws-frost{background:var(--blau);-webkit-mask:url("../img/grafik/funkel.svg") center/contain no-repeat;mask:url("../img/grafik/funkel.svg") center/contain no-repeat;border-radius:0}
.sp-segment input:checked+span .spt-ws-kaelte,.sp-segment input:checked+span .spt-ws-frost{background:#fff}
.sp-segment input:checked+span .spt-ws-regen{background:#fff}
.sp-regler-kopf .spt-wsymbol{margin-right:8px}
/* Raclette-Tage (Feiertags-Radar): Käsestück mit Löchern; Grillwetter auf Wunsch nur an freien Tagen */
.spt-ws-raclette{border-radius:3px;background:radial-gradient(circle at 58% 70%,var(--surface) 0 2.2px,transparent 2.8px),radial-gradient(circle at 80% 48%,var(--surface) 0 1.8px,transparent 2.4px),radial-gradient(circle at 34% 84%,var(--surface) 0 1.5px,transparent 2px),var(--logo-gold);clip-path:polygon(0 100%,100% 100%,100% 18%)}
.spt-regel.ist-aus .spt-grill-frei{display:none}
.spt-grill-frei>span{min-height:40px;font-size:14px}
.spt-segment-tag{margin-top:2px}
.spt-aktionen{padding-left:2px}

.spt-szene{position:relative;height:230px;border-radius:18px;overflow:hidden;isolation:isolate;box-shadow:inset 0 0 0 1px rgba(0,0,0,.08)}
.spt-himmel{position:absolute;inset:0;z-index:-2;transition:opacity .6s;background:linear-gradient(180deg,color-mix(in srgb,var(--spt-blau) 52%,var(--logo-creme)),var(--logo-creme) 92%)}
.spt-szene.ist-hitze .spt-himmel{background:linear-gradient(180deg,color-mix(in srgb,var(--logo-gold) 70%,var(--spt-rot)),color-mix(in srgb,var(--logo-gold) 40%,var(--logo-creme)) 90%)}
.spt-szene.ist-regen .spt-himmel{background:linear-gradient(180deg,color-mix(in srgb,var(--spt-blau) 45%,var(--logo-gruen)),color-mix(in srgb,var(--spt-blau) 35%,var(--logo-creme)) 95%)}
.spt-szene.ist-frost .spt-himmel{background:linear-gradient(180deg,color-mix(in srgb,var(--logo-lila) 60%,var(--spt-blau)),color-mix(in srgb,var(--logo-creme) 75%,var(--logo-lila)) 95%)}
.spt-sonne{position:absolute;left:38px;top:30px;width:68px;height:68px;border-radius:50%;background:radial-gradient(circle at 38% 34%,var(--logo-creme),var(--logo-gold) 42%,var(--spt-gold));box-shadow:0 0 40px 8px color-mix(in srgb,var(--logo-gold) 55%,transparent);transition:transform .7s cubic-bezier(.3,1.3,.5,1),opacity .5s}
.spt-sonne-strahlen{position:absolute;left:50%;top:50%;width:230px;height:230px;margin:-115px 0 0 -115px;z-index:-1;background:url("../img/grafik/strahlen.svg") center/contain no-repeat;animation:spt-drehen 30s linear infinite}
.spt-szene.ist-hitze .spt-sonne{transform:scale(1.25);background:radial-gradient(circle at 38% 34%,var(--logo-creme),var(--logo-gold) 30%,var(--spt-rot))}
.spt-szene.ist-regen .spt-sonne{transform:translate(30px,10px) scale(.7);opacity:.35}
.spt-szene.ist-frost .spt-sonne{transform:translate(10px,6px) scale(.6);opacity:.55;background:radial-gradient(circle,var(--logo-creme),color-mix(in srgb,var(--logo-creme) 70%,var(--logo-gold)))}
.spt-szene.ist-regen .spt-sonne-strahlen,.spt-szene.ist-frost .spt-sonne-strahlen{opacity:0}
.spt-wolke{position:absolute;height:34px;border-radius:34px;background:var(--logo-creme);box-shadow:0 8px 16px -10px rgba(0,0,0,.35);transition:background .5s,transform .7s,opacity .5s}
.spt-wolke::before,.spt-wolke::after{content:"";position:absolute;bottom:40%;border-radius:50%;background:inherit}
.spt-wolke::before{left:16%;width:44%;aspect-ratio:1}
.spt-wolke::after{left:44%;width:36%;aspect-ratio:1}
.spt-wolke-1{left:44%;top:40px;width:110px;animation:spt-ziehen 18s ease-in-out infinite alternate}
.spt-wolke-2{left:14%;top:78px;width:84px;opacity:.85;animation:spt-ziehen 24s ease-in-out infinite alternate-reverse}
@keyframes spt-ziehen{to{translate:40px 0}}
.spt-szene.ist-sonne .spt-wolke-2,.spt-szene.ist-hitze .spt-wolke{opacity:0}
.spt-szene.ist-regen .spt-wolke{background:color-mix(in srgb,var(--logo-creme) 55%,var(--spt-blau))}
.spt-szene.ist-regen .spt-wolke-1{transform:scale(1.5);left:30%}
.spt-szene.ist-regen .spt-wolke-2{transform:scale(1.25)}
.spt-regen,.spt-schnee{position:absolute;inset:0;opacity:0;transition:opacity .5s}
.spt-szene.ist-regen .spt-regen,.spt-szene.ist-frost .spt-schnee{opacity:1}
.spt-regen i{position:absolute;top:-20px;width:2.5px;height:16px;border-radius:2px;background:color-mix(in srgb,var(--logo-creme) 60%,var(--spt-blau));animation:spt-regnen .75s linear infinite;rotate:12deg}
.spt-schnee i{position:absolute;top:-20px;width:12px;height:12px;background:var(--logo-creme);-webkit-mask:url("../img/grafik/funkel.svg") center/contain no-repeat;mask:url("../img/grafik/funkel.svg") center/contain no-repeat;animation:spt-schneien 4.2s linear infinite}
@keyframes spt-regnen{to{translate:-40px 270px}}
@keyframes spt-schneien{to{translate:-20px 270px;rotate:200deg}}
.spt-regen i:nth-child(1){left:6%;animation-delay:-.1s}.spt-regen i:nth-child(2){left:13%;animation-delay:-.5s}.spt-regen i:nth-child(3){left:20%;animation-delay:-.3s}
.spt-regen i:nth-child(4){left:27%;animation-delay:-.65s}.spt-regen i:nth-child(5){left:34%;animation-delay:-.2s}.spt-regen i:nth-child(6){left:41%;animation-delay:-.45s}
.spt-regen i:nth-child(7){left:48%;animation-delay:-.05s}.spt-regen i:nth-child(8){left:55%;animation-delay:-.55s}.spt-regen i:nth-child(9){left:62%;animation-delay:-.25s}
.spt-regen i:nth-child(10){left:69%;animation-delay:-.7s}.spt-regen i:nth-child(11){left:76%;animation-delay:-.35s}.spt-regen i:nth-child(12){left:83%;animation-delay:-.15s}
.spt-regen i:nth-child(13){left:90%;animation-delay:-.6s}.spt-regen i:nth-child(14){left:97%;animation-delay:-.4s}
.spt-schnee i:nth-child(1){left:5%;animation-delay:-.4s}.spt-schnee i:nth-child(2){left:14%;animation-delay:-2.1s;width:8px;height:8px}.spt-schnee i:nth-child(3){left:23%;animation-delay:-3.3s}
.spt-schnee i:nth-child(4){left:32%;animation-delay:-1.2s;width:16px;height:16px}.spt-schnee i:nth-child(5){left:41%;animation-delay:-2.8s}.spt-schnee i:nth-child(6){left:50%;animation-delay:-.9s;width:8px;height:8px}
.spt-schnee i:nth-child(7){left:59%;animation-delay:-3.8s}.spt-schnee i:nth-child(8){left:68%;animation-delay:-1.7s;width:15px;height:15px}.spt-schnee i:nth-child(9){left:77%;animation-delay:-2.4s}
.spt-schnee i:nth-child(10){left:86%;animation-delay:-.2s;width:9px;height:9px}.spt-schnee i:nth-child(11){left:93%;animation-delay:-3s}.spt-schnee i:nth-child(12){left:46%;animation-delay:-1.5s;width:10px;height:10px}
.spt-huegel{position:absolute;left:-15%;right:-15%;bottom:-36px;height:96px;border-radius:50% 50% 0 0/100% 100% 0 0;background:linear-gradient(180deg,var(--spt-gruen),var(--logo-gruen));transition:background .5s}
.spt-szene.ist-frost .spt-huegel{background:linear-gradient(180deg,var(--logo-creme),color-mix(in srgb,var(--logo-creme) 70%,var(--spt-blau)) 40%,var(--logo-gruen))}
.spt-aehren{position:absolute;left:8%;bottom:20px;display:flex;gap:10px;transition:opacity .5s}
.spt-aehren i{display:block;width:16px;height:46px;background:url("../img/grafik/aehre.svg") center bottom/contain no-repeat;transform-origin:50% 100%;animation:spt-wiegen 3s ease-in-out infinite alternate}
.spt-aehren i:nth-child(2n){height:38px;animation-delay:-1.2s}
.spt-aehren i:nth-child(3n){animation-delay:-2.1s}
@keyframes spt-wiegen{from{rotate:-7deg}to{rotate:7deg}}
.spt-szene.ist-regen .spt-aehren,.spt-szene.ist-frost .spt-aehren{opacity:.35}
.spt-thermo{position:absolute;right:22px;top:26px;width:18px;height:132px;border-radius:9px;background:var(--logo-creme);box-shadow:0 0 0 3px color-mix(in srgb,var(--logo-gruen) 70%,transparent),0 10px 18px -10px rgba(0,0,0,.6)}
.spt-thermo::after{content:"";position:absolute;left:50%;bottom:-14px;width:30px;height:30px;margin-left:-15px;border-radius:50%;background:var(--thermo-farbe,var(--spt-rot));box-shadow:0 0 0 3px color-mix(in srgb,var(--logo-gruen) 70%,transparent)}
.spt-thermo-saeule{position:absolute;left:5px;right:5px;bottom:4px;height:var(--thermo,60%);border-radius:5px;background:var(--thermo-farbe,var(--spt-rot));transition:height .7s cubic-bezier(.3,1.2,.5,1)}
.spt-szene.ist-frost{--thermo-farbe:var(--spt-blau)}
.spt-szene.ist-regen{--thermo-farbe:color-mix(in srgb,var(--spt-rot) 50%,var(--spt-blau))}
.spt-grad{position:absolute;right:54px;top:30px;font-family:var(--f-display);font-size:38px;line-height:1;color:var(--logo-gruen);text-shadow:0 2px 0 rgba(249,239,220,.6)}
.spt-szene.ist-regen .spt-grad,.spt-szene.ist-frost .spt-grad{color:var(--logo-creme);text-shadow:0 2px 6px rgba(0,0,0,.35)}
.spt-szene.ist-wechsel .spt-grad{animation:spt-pop .5s cubic-bezier(.25,1.4,.45,1)}
.spt-simulator{display:flex;flex-direction:column;gap:2px}
.spt-treffer{display:flex;align-items:center;gap:14px;padding:12px;border-radius:16px;background:var(--sp-hell);border:1.5px solid var(--sp-farbe)}
.spt-treffer.ist-neu{animation:spt-pop .45s cubic-bezier(.25,1.4,.45,1)}
.spt-treffer.ist-leer{background:var(--paper);border-style:dashed;border-color:var(--line)}
.spt-treffer-bild{position:relative;flex:none;width:112px;height:80px;border-radius:12px;overflow:hidden;background:var(--sp-hell)}
.spt-treffer-bild img{width:100%;height:100%;object-fit:cover;display:block}
.spt-treffer-text{display:flex;flex-direction:column;gap:3px;min-width:0}
.spt-treffer-text b{font-size:16px;line-height:1.25}
.spt-treffer-text small{color:var(--muted);font-size:13px}
.spt-treffer-marke{align-self:flex-start;padding:2px 10px;border-radius:999px;background:var(--sp-farbe);color:#fff;font-size:12px;font-weight:700;letter-spacing:.04em}
.spt-treffer.ist-leer .spt-treffer-marke{background:var(--muted)}

/* =====================================================================================================
   4. Gutschein-Studio
   ===================================================================================================== */
.spt-gruss[hidden]{display:none}
.spt-gruss{display:flex;flex-direction:column}
.spt-eingabe{min-height:46px;padding:8px 14px;border-radius:12px;border:1.5px solid var(--line);background:var(--surface);color:var(--fg);font:inherit;width:100%}
.spt-eingabe:focus-visible{outline:3px solid var(--brass);outline-offset:2px;border-color:var(--sp-farbe)}
.spt-gs-buehne{display:flex;flex-direction:column;align-items:center;gap:14px;padding:28px 16px 18px}
.spt-gs-karte{position:relative;width:100%;max-width:380px;aspect-ratio:1.58/1;perspective:1300px;container-type:inline-size}
.spt-gs-innen{position:relative;width:100%;height:100%;transform-style:preserve-3d;transition:transform .9s cubic-bezier(.3,1.25,.45,1)}
.spt-gs-karte.ist-gewendet .spt-gs-innen{transform:rotateY(180deg)}
.spt-gs-karte.ist-wackeln .spt-gs-innen{animation:spt-kippen .7s ease}
@keyframes spt-kippen{30%{transform:rotateY(-14deg) rotateX(6deg)}70%{transform:rotateY(8deg)}}
.spt-gs-seite{position:absolute;inset:0;border-radius:18px;overflow:hidden;-webkit-backface-visibility:hidden;backface-visibility:hidden;color:var(--d-text);background:
  radial-gradient(90% 90% at 0% 100%,color-mix(in srgb,var(--d-akzent) 22%,transparent),transparent 60%),
  linear-gradient(150deg,color-mix(in srgb,var(--d-grund) 84%,#fff),var(--d-grund) 45%,color-mix(in srgb,var(--d-grund) 82%,#000));
  box-shadow:0 34px 50px -28px rgba(0,0,0,.85),inset 0 0 0 1.5px color-mix(in srgb,var(--d-akzent) 55%,transparent)}
.spt-gs-hinten{transform:rotateY(180deg);display:flex;align-items:center;gap:5cqw;padding:6cqw;background:url("../img/grafik/muster-gold.svg") 0 0/140px,linear-gradient(150deg,color-mix(in srgb,var(--d-grund) 84%,#fff),var(--d-grund) 45%,color-mix(in srgb,var(--d-grund) 82%,#000))}
.spt-gs-foto{position:absolute;top:0;right:0;bottom:0;width:46%;clip-path:polygon(9% 0,0 5%,9% 10%,0 15%,9% 20%,0 25%,9% 30%,0 35%,9% 40%,0 45%,9% 50%,0 55%,9% 60%,0 65%,9% 70%,0 75%,9% 80%,0 85%,9% 90%,0 95%,9% 100%,100% 100%,100% 0)}
.spt-gs-foto img,.spt-gs-foto .sp-ohnefoto{width:100%;height:100%;object-fit:cover;display:block}
.spt-gs-foto.ist-neu img{animation:spt-einblenden .6s ease}
@keyframes spt-einblenden{from{opacity:0;transform:scale(1.08)}}
.spt-gs-siegel{position:absolute;right:4cqw;top:4cqw;width:17cqw;aspect-ratio:1;display:grid;place-items:center;isolation:isolate}
.spt-gs-siegel::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--gold-rand,var(--logo-gold));-webkit-mask:url("../img/grafik/plakette.svg") center/contain no-repeat;mask:url("../img/grafik/plakette.svg") center/contain no-repeat;filter:drop-shadow(0 4px 6px rgba(0,0,0,.4));animation:spt-drehen 24s linear infinite}
.spt-gs-siegel::after{content:"";width:72%;height:72%;border-radius:50%;background:var(--logo-gruen) url("../img/logo-klein.webp") center/82% no-repeat}
.spt-gs-band{position:absolute;left:-9cqw;top:6cqw;z-index:2;padding:1cqw 10cqw;background:var(--spt-rot);color:var(--logo-creme);font-size:3.6cqw;font-weight:700;letter-spacing:.04em;transform:rotate(-35deg);box-shadow:0 4px 10px rgba(0,0,0,.35)}
.spt-gs-band[hidden]{display:none}
.spt-gs-unten{position:absolute;left:0;top:0;bottom:0;width:60%;display:flex;flex-direction:column;justify-content:center;gap:1.2cqw;padding:5cqw 4cqw 5cqw 6cqw}
.spt-gs-kopf{display:flex;flex-direction:column;line-height:1.15}
.spt-gs-kopf small{font-size:3.2cqw;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--d-akzent)}
.spt-gs-kopf b{font-size:3.8cqw;overflow-wrap:anywhere}
.spt-gs-wert{display:flex;align-items:flex-start;gap:1cqw;font-family:var(--f-display);font-weight:700;line-height:.95;color:var(--d-akzent);text-shadow:0 3px 0 rgba(0,0,0,.18)}
.spt-gs-wert b{font-size:19cqw;font-variant-numeric:tabular-nums}
.spt-gs-wert>span[aria-hidden]{font-size:8cqw;margin-top:1.5cqw}
.spt-gs-anlass{font-family:var(--f-script);font-size:5.4cqw;line-height:1.1}
.spt-gs-qr{flex:none;width:30cqw;aspect-ratio:1;padding:1.5cqw;border-radius:10px;background:var(--logo-creme);box-shadow:0 8px 16px -10px rgba(0,0,0,.6)}
.spt-gs-qr svg{display:block;width:100%;height:100%}
.spt-gs-qr rect{fill:var(--logo-gruen)}
.spt-gs-qr .spt-qr-mitte{fill:var(--logo-gold)}
.spt-gs-qr .spt-qr-grund{fill:var(--logo-creme)}
.spt-gs-daten{display:flex;flex-direction:column;gap:.8cqw;min-width:0;font-size:3.4cqw;line-height:1.25}
.spt-gs-daten small{opacity:.8;font-size:3cqw}
.spt-gs-code{font-family:var(--f-mono);font-size:4.6cqw;letter-spacing:.06em;color:var(--d-akzent);overflow-wrap:anywhere}
.spt-gs-muster{font-weight:700}
.spt-gs-gueltig{font-weight:700}
.spt-gs-gruss{font-family:var(--f-script);font-size:4.4cqw}
.spt-gs-gruss[hidden]{display:none}
.spt-gs-einloesen{opacity:.85}
.spt-wenden-zeichen{width:18px;height:18px;border:2.5px solid currentColor;border-radius:50%;border-right-color:transparent;transition:transform .6s}
.spt-wenden[aria-pressed="true"] .spt-wenden-zeichen{transform:rotate(180deg)}
.spt-gs-summe{margin:0;font-weight:600}
.spt-gs-summe b{color:var(--sp-farbe)}
/* Mini-Gutschein für die Kanal-Vorschau */
.spt-gs-mini{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;gap:2px;padding:10px;color:var(--d-text);background:var(--d-grund);overflow:hidden;container-type:inline-size}
.spt-gs-mini img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.95}
.spt-gs-mini::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,transparent 25%,color-mix(in srgb,var(--d-grund) 92%,transparent) 72%)}
.spt-gs-mini>span{position:relative;z-index:2}
.spt-gs-mini-titel{font-size:10px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--d-akzent)}
.spt-gs-mini-wert{font-family:var(--f-display);font-weight:700;font-size:30cqw;line-height:.9;color:var(--d-akzent)}
.spt-gs-mini-anlass{font-family:var(--f-script);font-size:12px}

/* =====================================================================================================
   5. Glücksrad
   ===================================================================================================== */
.spt-rad-buehne{display:flex;flex-direction:column;align-items:center;gap:14px;padding:26px 16px 18px;background:
  url("../img/grafik/muster-gold.svg") 0 0/170px,
  radial-gradient(70% 60% at 50% 40%,color-mix(in srgb,var(--spt-rot) 40%,transparent),transparent 72%),
  linear-gradient(165deg,var(--logo-lila),var(--spt-tief))}
.spt-rad-rahmen{position:relative;width:min(100%,310px);aspect-ratio:1;margin-top:18px}
.spt-rad-scheibe{position:absolute;inset:0;transform:rotate(var(--drehung,0deg));transition:transform var(--dauer,4.6s) cubic-bezier(.12,.62,.06,1)}
.spt-rad{display:block;width:100%;height:100%;overflow:visible;filter:drop-shadow(0 18px 24px rgba(0,0,0,.55))}
.spt-rad-rand{fill:none;stroke:var(--logo-gold);stroke-width:12}
.spt-rad-rand-innen{fill:none;stroke:var(--spt-messing);stroke-width:2}
.spt-rad-licht{fill:var(--logo-creme)}
.spt-rad-licht.ist-b{fill:var(--logo-gold)}
.spt-rad-buehne:not(.ist-ruhig) .spt-rad-licht{animation:spt-blinken 1.2s steps(2) infinite}
.spt-rad-buehne:not(.ist-ruhig) .spt-rad-licht.ist-b{animation-delay:-.6s}
.spt-rad-buehne.ist-dreht .spt-rad-licht{animation-duration:.3s}
@keyframes spt-blinken{50%{fill:var(--spt-messing)}}
.spt-seg{stroke:var(--logo-creme);stroke-width:1.2}
.spt-seg-gold{fill:var(--logo-gold)}
.spt-seg-rot{fill:var(--spt-rot)}
.spt-seg-lila{fill:var(--spt-lila)}
.spt-seg-blau{fill:var(--spt-blau)}
.spt-seg-gruen{fill:var(--spt-gruen)}
.spt-seg-niete{fill:var(--logo-creme)}
.spt-seg-niete2{fill:color-mix(in srgb,var(--logo-creme) 82%,var(--logo-gold))}
.spt-seg-text{font-family:var(--f-body);font-size:9.5px;font-weight:700;fill:var(--logo-creme);dominant-baseline:central}
.spt-seg-text.ist-dunkel{fill:var(--logo-gruen)}
.spt-seg-bild-rand{fill:none;stroke:var(--logo-creme);stroke-width:2}
.spt-seg.ist-treffer{stroke:var(--logo-gold);stroke-width:3}
.spt-rad-zeiger{position:absolute;left:50%;top:-30px;z-index:2;width:58px;height:62px;margin-left:-29px;filter:drop-shadow(0 6px 6px rgba(0,0,0,.45))}
.spt-rad-zeiger::before{content:"";position:absolute;left:0;right:0;top:0;height:40px;background:url("../img/grafik/krone.svg") center/contain no-repeat}
.spt-rad-zeiger::after{content:"";position:absolute;left:50%;top:34px;width:22px;height:28px;margin-left:-11px;background:var(--logo-gold);clip-path:polygon(0 0,100% 0,50% 100%)}
.spt-rad-nabe{position:absolute;left:50%;top:50%;z-index:1;width:22%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;background:var(--logo-gruen) url("../img/logo-klein.webp") center/80% no-repeat;box-shadow:0 0 0 4px var(--logo-gold),0 0 0 7px var(--logo-gruen),0 8px 16px rgba(0,0,0,.5)}
.spt-drehen{min-width:160px;font-size:18px}
.spt-drehen-zeichen{width:20px;height:20px;border-radius:50%;background:conic-gradient(var(--logo-gruen) 0 25%,transparent 0 50%,var(--logo-gruen) 0 75%,transparent 0);box-shadow:inset 0 0 0 2px var(--logo-gruen)}
.spt-rad-buehne.ist-dreht .spt-drehen-zeichen{animation:spt-drehen .5s linear infinite}
.spt-rad-regel{margin:0;font-size:13px;color:color-mix(in srgb,var(--logo-creme) 82%,transparent);text-align:center}
.spt-rad-ergebnis{margin:0;padding:12px 30px;text-align:center;font-weight:700;font-size:17px;background:var(--logo-gold);color:var(--logo-gruen);clip-path:polygon(0 0,100% 0,calc(100% - 14px) 50%,100% 100%,0 100%,14px 50%);animation:spt-pop .5s cubic-bezier(.25,1.4,.45,1)}
.spt-rad-ergebnis[hidden]{display:none}
.spt-rad-ergebnis.ist-niete{background:var(--logo-creme);color:var(--logo-lila)}
.spt-rad-instagram{margin:0;padding:10px 14px;border-radius:14px;background:color-mix(in srgb,var(--lila) 12%,var(--surface));border:1.5px solid color-mix(in srgb,var(--lila) 45%,var(--line));font-size:14px}
.spt-rad-instagram[hidden]{display:none}
.spt-rad-tabelle{width:100%;border-collapse:collapse;font-size:14px}
.spt-rad-tabelle caption{text-align:left;font-weight:700;padding-bottom:6px}
.spt-rad-tabelle th,.spt-rad-tabelle td{padding:6px 8px;border-bottom:1px solid var(--line);text-align:left}
.spt-rad-tabelle thead th{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.spt-rad-tabelle td{text-align:right;font-family:var(--f-mono);font-variant-numeric:tabular-nums;white-space:nowrap}
.spt-rad-tabelle thead th:last-child{text-align:right}
.spt-rad-tabelle tbody th{font-weight:600}
.spt-rad-tabelle tbody th::before{content:"";display:inline-block;vertical-align:-2px;margin-right:8px;width:14px;height:14px;border-radius:4px;background:var(--logo-creme);box-shadow:inset 0 0 0 1px var(--line)}
.spt-rad-tabelle tr.f-gold th::before{background:var(--logo-gold)}
.spt-rad-tabelle tr.f-rot th::before{background:var(--spt-rot)}
.spt-rad-tabelle tr.f-lila th::before{background:var(--spt-lila)}
.spt-rad-tabelle tr.f-blau th::before{background:var(--spt-blau)}
.spt-rad-tabelle tr.f-gruen th::before{background:var(--spt-gruen)}
.spt-rad-tabelle tr.ist-niete{color:var(--muted)}
.spt-rad-tabelle tr.ist-treffer{background:var(--sp-hell)}
.spt-recht{display:flex;flex-direction:column;gap:8px;font-size:14px}
.spt-recht p{margin:0}
.spt-recht ul{margin:0;padding:0 14px 12px 32px;display:flex;flex-direction:column;gap:4px;line-height:1.45}
.spt-recht li[hidden]{display:none}
/* Mini-Rad für die Kanal-Vorschau */
.spt-rad-mini{position:absolute;inset:0;display:grid;place-items:center;background:radial-gradient(circle at 50% 45%,color-mix(in srgb,var(--spt-rot) 45%,var(--logo-lila)),var(--spt-tief))}
.spt-rad-mini svg{width:86%;height:86%;filter:drop-shadow(0 6px 10px rgba(0,0,0,.5))}
.spt-rad-mini::after{content:"";position:absolute;left:50%;top:5%;width:20%;height:12%;transform:translateX(-50%);background:url("../img/grafik/krone.svg") center/contain no-repeat}

/* ---------- Schmale Bildschirme ---------- */
@media (max-width:560px){
  .spt-treffer{flex-direction:column;align-items:flex-start}
  .spt-treffer-bild{width:100%;height:120px}
  .spt-szene{height:210px}
  .spt-grad{font-size:32px}
}
@media (max-width:420px){
  .sp-haken-liste.spt-haken-tage{grid-template-columns:repeat(auto-fill,minmax(72px,1fr))}
  .spt-segment-sim span{font-size:12.5px;padding:4px 3px}
  .spt-segment-sim .spt-wsymbol{display:none}
  .spt-segment-eng span{font-size:13.5px}
  .spt-wallet{transform:none}
  .spt-zellen{gap:6px}
}

/* ---------- Ohne Bewegung ---------- */
@media (prefers-reduced-motion: reduce){
  .spt-wallet,.spt-wallet::before,.spt-zelle.ist-neu::before,.spt-zelle.ist-neu::after,.spt-wallet.ist-voll .spt-zelle.ist-praemie,
  .spt-praemie-pop,.spt-praemie-pop::before,.spt-tuete-foto.ist-neu,.spt-tuete-platz.ist-wackeln,.spt-push.ist-neu,
  .spt-sonne-strahlen,.spt-wolke,.spt-regen i,.spt-schnee i,.spt-aehren i,.spt-szene.ist-wechsel .spt-grad,.spt-treffer.ist-neu,
  .spt-gs-foto.ist-neu img,.spt-gs-karte.ist-wackeln .spt-gs-innen,.spt-gs-siegel::before,.spt-rad-licht,.spt-rad-ergebnis,
  .spt-rad-buehne.ist-dreht .spt-drehen-zeichen{animation:none!important}
  .spt-gs-innen,.spt-rad-scheibe,.spt-sonne,.spt-thermo-saeule,.spt-wolke{transition:none!important}
  .spt-regen i{top:auto;translate:none}
  .spt-regen i:nth-child(odd){top:40%}.spt-regen i:nth-child(even){top:62%}
  .spt-schnee i:nth-child(odd){top:30%}.spt-schnee i:nth-child(even){top:58%}
}