/* AskForDates – Einladung (Player) im Designsystem „Sonnig“ (DESIGN.md).
   Weiße Karte mit einer Figur der Frag-Bande, die oben herausschaut, dahinter eine flache Theme-Welt mit Partikeln
   (Laub, Schnee, Herzen, Konfetti, Glitzer), die fallen, unten liegen bleiben und sich mit Finger oder Maus aufwirbeln lassen.
   Eine Aktionsfarbe (Blau), Figtree, Caveat nur für Handschrift (Umschlag, Brief, Klebezettel, Zettel, Unterschrift).
   Die Einladung lädt site.css nicht (eigene Klassen wie .btn, .chip, .foot), die Tokens sind deshalb hier gespiegelt.
   ⚠️ Sichtbare Texte, ihre Reihenfolge und Großschreibung (text-transform) gehören zum Test „alte Links“: nicht ändern. */

/* ---------- Tokens (wie site.css) ---------- */
:root{
  --white:#fff;--paper:#faf5f1;--paper-2:#f3ece6;--line:#e6ded8;--line-2:#d9cfc7;
  --ink:#2b2a29;--ink-2:#4a4846;--ink-3:#6e6a66;
  --blue:#1d5bff;--blue-d:#1447d6;--blue-1:#e8efff;
  --sun:#ffcc2e;--sun-1:#fff4cc;--coral:#ff6a3d;--coral-1:#ffe6dc;--pink:#ff9ec7;--pink-1:#ffe8f2;
  --plum:#4a2a8c;--plum-1:#ece6fb;--sky:#3fb0ff;--sky-1:#e3f3ff;--mint:#1f9e5b;--mint-d:#167a46;--mint-1:#dff4e8;--lilac:#b9a6ff;
  --r-xs:8px;--r-sm:16px;--r:32px;--pill:999px;
  --s1:0 8px 20px -14px rgba(43,42,41,.35);--s2:0 24px 48px -28px rgba(43,42,41,.45);
  --f-body:"Figtree",system-ui,-apple-system,"Segoe UI",sans-serif;--f-display:var(--f-body);
  --f-hand:"Caveat","Segoe Print","Bradley Hand",cursive;
  --ease:cubic-bezier(.2,.8,.2,1);--spring:cubic-bezier(.3,1.6,.5,1);--fast:.15s;--mid:.3s;
  --ok:var(--mint);
  --wheel-line:rgba(255,255,255,.9);--wheel-dim:rgba(43,42,41,.38);   /* Glücksrad: Feldkanten · nach dem Landen alle anderen Felder abdunkeln */
  color-scheme:light;
}

/* ---------- Theme-Welten (in die Sonnig-Palette übersetzt) ----------
   --bg-top/--bg-bot Himmel · --disc Sonne/Mond/Herz oben rechts · --hill Boden · --on-bg Text direkt auf dem Himmel
   --fig/--fig-2 Körperfarben der Figuren · --acc Schmuckfarbe (Punkte, &, Zierrat) · --tint helle Fläche
   --band/--band-ink Kopf des Tickets · --los Rubbellos · --w1…--w6 Glücksrad-Felder (Ink-Text darauf ≥ AA) */
:root,[data-theme="herbst"]{
  --bg-top:#fff4d6;--bg-bot:#ffe2bd;--disc:#ffcc2e;--disc-glow:rgba(255,204,46,.28);--hill:#ffb98a;--hill-2:#ff8f5a;
  --on-bg:var(--ink-2);--on-bg-pill:#fffaf0;--dot:rgba(43,42,41,.14);--dot-on:var(--coral);
  --fig:var(--sun);--fig-2:var(--coral);--acc:var(--coral);--tint:var(--sun-1);
  --band:var(--sun);--band-ink:var(--ink);--band-acc:#c94a1e;--los:var(--sun);--note:var(--sun);
  --w1:var(--sun);--w2:var(--coral);--w3:#ffb98a;--w4:var(--pink);--w5:#7fe0ad;--w6:var(--lilac);
  --rim:var(--ink);--bulb:#ffe27a;--pin:var(--ink);
  --card-shadow:0 30px 60px -30px rgba(170,85,20,.5),0 8px 18px -12px rgba(170,85,20,.3);
  --deco:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60'%3E%3Cpath d='M30 4l4 10 9-5-2 11 11-1-7 9 9 6-11 3 4 10-10-5-3 11-4-11-10 5 4-10-11-3 9-6-7-9 11 1-2-11 9 5z' fill='%23ff6a3d'/%3E%3Cpath d='M30 24v30' stroke='%23c94a1e' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E");
}
[data-theme="winter"]{
  --bg-top:#2f7dff;--bg-bot:#8bcbff;--disc:#fff6d6;--disc-glow:rgba(255,246,214,.35);--hill:#ffffff;--hill-2:#e3f3ff;
  --on-bg:#fff;--on-bg-pill:#fff;--dot:rgba(255,255,255,.35);--dot-on:#fff;
  --fig:var(--coral);--fig-2:var(--sun);--acc:var(--blue);--tint:var(--sky-1);
  --band:var(--blue);--band-ink:#fff;--band-acc:var(--sun);--los:var(--sun);--note:var(--sun);
  --w1:var(--sky-1);--w2:var(--sky);--w3:#fff;--w4:var(--coral);--w5:var(--sun);--w6:var(--lilac);
  --rim:#16307a;--bulb:#fff6d6;--pin:#16307a;
  --card-shadow:0 30px 60px -30px rgba(10,40,120,.6),0 8px 18px -12px rgba(10,40,120,.35);
  --deco:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60' fill='none' stroke='%233fb0ff' stroke-width='4' stroke-linecap='round'%3E%3Cpath d='M30 6v48M9 18l42 24M9 42l42-24M24 9l6 6 6-6M24 51l6-6 6 6M9 26l8 2-2 8M51 34l-8-2 2-8M9 34l8-2-2-8M51 26l-8 2 2 8'/%3E%3C/svg%3E");
}
[data-theme="rose"]{
  --bg-top:#ffe8f2;--bg-bot:#ffd0e4;--disc:#ffb3d3;--disc-glow:rgba(255,158,199,.3);--hill:#ff9ec7;--hill-2:#ff7fb3;
  --on-bg:var(--ink-2);--on-bg-pill:#fff6fa;--dot:rgba(43,42,41,.14);--dot-on:#e0457b;
  --fig:var(--pink);--fig-2:var(--coral);--acc:#e0457b;--tint:var(--pink-1);
  --band:var(--pink);--band-ink:var(--ink);--band-acc:#b8285e;--los:var(--sun);--note:var(--sun);
  --w1:var(--pink);--w2:var(--sun);--w3:#ffc2db;--w4:var(--coral);--w5:#fff;--w6:var(--lilac);
  --rim:var(--ink);--bulb:#ffd6e8;--pin:var(--ink);
  --card-shadow:0 30px 60px -30px rgba(190,40,100,.45),0 8px 18px -12px rgba(190,40,100,.25);
  --deco:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M20 35C8 26 3 20 3 13 3 8 7 4 12 4c3.4 0 6.4 2 8 5 1.6-3 4.6-5 8-5 5 0 9 4 9 9 0 7-5 13-17 22z' fill='%23ff4f6d'/%3E%3C/svg%3E");
}
/* Praternacht: Pflaumen-Nacht, bunte Lichterkette, Riesenrad im Hintergrund */
[data-theme="jahrmarkt"]{
  --bg-top:#22124a;--bg-bot:#4a2a8c;--disc:#fff1c2;--disc-glow:rgba(255,241,194,.14);--hill:#2a1660;--hill-2:#3a1f78;
  --on-bg:#fff;--on-bg-pill:#fff;--dot:rgba(255,255,255,.25);--dot-on:var(--sun);
  --fig:var(--sun);--fig-2:var(--pink);--acc:#7a55d6;--tint:var(--plum-1);
  --band:var(--plum);--band-ink:#fff;--band-acc:var(--sun);--los:var(--sun);--note:var(--sun);
  --w1:var(--sun);--w2:var(--pink);--w3:var(--sky);--w4:var(--coral);--w5:var(--lilac);--w6:#7fe0ad;
  --rim:#1a0d3a;--bulb:#ffe27a;--pin:#e8417f;
  --card-shadow:0 34px 70px -30px rgba(5,0,25,.8),0 10px 20px -12px rgba(5,0,25,.5);
  --deco:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M20 2c1.6 9.4 8.6 16.4 18 18-9.4 1.6-16.4 8.6-18 18-1.6-9.4-8.6-16.4-18-18 9.4-1.6 16.4-8.6 18-18z' fill='%23ffcc2e'/%3E%3C/svg%3E");
}
/* Ballnacht: Nachtblau, Silber und Gold, funkelnde Sterne */
[data-theme="ball"]{
  --bg-top:#0f1838;--bg-bot:#24306b;--disc:#eef1ff;--disc-glow:rgba(220,228,255,.18);--hill:#141f4a;--hill-2:#1c2960;
  --on-bg:#fff;--on-bg-pill:#fff;--dot:rgba(255,255,255,.25);--dot-on:#f2d27a;
  --fig:#f2d27a;--fig-2:var(--lilac);--acc:#b8902a;--tint:#f6f1df;
  --band:#14204a;--band-ink:#fff;--band-acc:#f2d27a;--los:#f2d27a;--note:var(--sun);
  --w1:#f2d27a;--w2:#dfe5ff;--w3:#fff;--w4:var(--lilac);--w5:#ffe9a8;--w6:#a9c2ff;
  --rim:#0b1230;--bulb:#fff3c4;--pin:#b8902a;
  --card-shadow:0 34px 70px -30px rgba(0,3,20,.85),0 10px 20px -12px rgba(0,3,20,.5);
  --deco:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M20 2c1.6 9.4 8.6 16.4 18 18-9.4 1.6-16.4 8.6-18 18-1.6-9.4-8.6-16.4-18-18 9.4-1.6 16.4-8.6 18-18z' fill='%23d6a630'/%3E%3C/svg%3E");
}

/* ---------- Basis ---------- */
[hidden]{display:none!important}
*,*::before,*::after{box-sizing:border-box}
html{height:100%;-webkit-text-size-adjust:100%;text-size-adjust:100%;overflow-x:clip}
body{margin:0;min-height:100%;background:var(--bg-bot);color:var(--ink);font:500 16px/1.5 var(--f-body);-webkit-font-smoothing:antialiased;
  overflow-x:clip;-webkit-tap-highlight-color:transparent;transition:background-color .6s}
button{font:inherit;color:inherit}
:focus{outline:none}
:focus-visible{outline:3px solid var(--blue);outline-offset:3px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
/* Emoji-Platzhalter: mit Figuren nur noch für Screenreader-freien Text da (die Figur übernimmt), über file:// sichtbar */
html.figs .pv-emo{position:absolute!important;left:0;top:0;opacity:0;pointer-events:none;font-size:1rem;line-height:1}

/* ---------- Himmel: flache Theme-Welt ---------- */
.sky{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;
  background:
    radial-gradient(circle at calc(100% - 52px) 64px,var(--disc) 0 46px,var(--disc-glow) 47px 76px,transparent 77px),
    radial-gradient(120% 60px at 50% 100%,var(--hill) 0 98%,transparent 100%),
    radial-gradient(70% 90px at 12% 100%,var(--hill-2) 0 98%,transparent 100%),
    linear-gradient(180deg,var(--bg-top) 0%,var(--bg-bot) 100%)}
/* Herbst: zwei Wölkchen · Winter: Wolken · Rosé: großes Herz statt Sonne */
.sky::before,.sky::after{content:"";position:absolute;pointer-events:none}
[data-theme="herbst"] .sky::before,[data-theme="winter"] .sky::before{left:6%;top:15%;width:120px;height:60px;opacity:.95;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 60'%3E%3Cpath d='M30 56C14 56 4 48 4 38s9-17 20-17c3-11 13-19 25-19 13 0 23 8 26 20 2-1 5-2 8-2 11 0 20 8 20 18s-9 18-22 18z' fill='%23fff'/%3E%3C/svg%3E") center/contain no-repeat}
[data-theme="herbst"] .sky::after,[data-theme="winter"] .sky::after{right:18%;top:31%;width:84px;height:42px;opacity:.8;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 60'%3E%3Cpath d='M30 56C14 56 4 48 4 38s9-17 20-17c3-11 13-19 25-19 13 0 23 8 26 20 2-1 5-2 8-2 11 0 20 8 20 18s-9 18-22 18z' fill='%23fff'/%3E%3C/svg%3E") center/contain no-repeat}
[data-theme="herbst"] .sky::after{opacity:.7}
[data-theme="rose"] .sky{background:
    radial-gradient(120% 60px at 50% 100%,var(--hill) 0 98%,transparent 100%),
    radial-gradient(70% 90px at 12% 100%,var(--hill-2) 0 98%,transparent 100%),
    linear-gradient(180deg,var(--bg-top) 0%,var(--bg-bot) 100%)}
[data-theme="rose"] .sky::before{right:-26px;top:20px;width:170px;height:170px;rotate:14deg;opacity:.9;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M20 35C8 26 3 20 3 13 3 8 7 4 12 4c3.4 0 6.4 2 8 5 1.6-3 4.6-5 8-5 5 0 9 4 9 9 0 7-5 13-17 22z' fill='%23ffb3d3'/%3E%3C/svg%3E") center/contain no-repeat}
[data-theme="rose"] .sky::after{left:8%;top:22%;width:44px;height:44px;rotate:-12deg;opacity:.8;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M20 35C8 26 3 20 3 13 3 8 7 4 12 4c3.4 0 6.4 2 8 5 1.6-3 4.6-5 8-5 5 0 9 4 9 9 0 7-5 13-17 22z' fill='%23fff'/%3E%3C/svg%3E") center/contain no-repeat}
/* Praternacht: Lichterkette oben, Riesenrad-Silhouette unten links */
[data-theme="jahrmarkt"] .sky::before{inset:0;animation:twinkle 3.2s ease-in-out infinite alternate;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='70'%3E%3Cpath d='M0 6Q130 60 260 6' fill='none' stroke='%23fff' stroke-opacity='.35' stroke-width='1.6'/%3E%3Cg fill-opacity='.28'%3E%3Ccircle cx='26' cy='20' r='10' fill='%23ffcc2e'/%3E%3Ccircle cx='78' cy='33' r='10' fill='%23ff9ec7'/%3E%3Ccircle cx='130' cy='37' r='10' fill='%233fb0ff'/%3E%3Ccircle cx='182' cy='33' r='10' fill='%23ff6a3d'/%3E%3Ccircle cx='234' cy='20' r='10' fill='%237fe0ad'/%3E%3C/g%3E%3Ccircle cx='26' cy='20' r='4.5' fill='%23ffcc2e'/%3E%3Ccircle cx='78' cy='33' r='4.5' fill='%23ff9ec7'/%3E%3Ccircle cx='130' cy='37' r='4.5' fill='%233fb0ff'/%3E%3Ccircle cx='182' cy='33' r='4.5' fill='%23ff6a3d'/%3E%3Ccircle cx='234' cy='20' r='4.5' fill='%237fe0ad'/%3E%3C/svg%3E") 0 4px/260px 70px repeat-x,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='330' fill='none' stroke='%23b9a6ff' stroke-opacity='.32'%3E%3Ccircle cx='150' cy='150' r='120' stroke-width='5'/%3E%3Ccircle cx='150' cy='150' r='98' stroke-width='2'/%3E%3Ccircle cx='150' cy='150' r='12' stroke-width='4'/%3E%3Cpath d='M30 150H270M150 30V270M46 90L254 210M46 210L254 90M90 46L210 254M90 254L210 46' stroke-width='2'/%3E%3Cpath d='M150 150L78 330M150 150L222 330' stroke-width='6'/%3E%3Cg fill='%23ffcc2e' fill-opacity='.45' stroke='none'%3E%3Ccircle cx='270' cy='150' r='7'/%3E%3Ccircle cx='254' cy='210' r='7'/%3E%3Ccircle cx='210' cy='254' r='7'/%3E%3Ccircle cx='150' cy='270' r='7'/%3E%3Ccircle cx='90' cy='254' r='7'/%3E%3Ccircle cx='46' cy='210' r='7'/%3E%3Ccircle cx='30' cy='150' r='7'/%3E%3Ccircle cx='46' cy='90' r='7'/%3E%3Ccircle cx='90' cy='46' r='7'/%3E%3Ccircle cx='150' cy='30' r='7'/%3E%3Ccircle cx='210' cy='46' r='7'/%3E%3Ccircle cx='254' cy='90' r='7'/%3E%3C/g%3E%3C/svg%3E") -70px calc(100% + 24px)/300px 330px no-repeat}
[data-theme="jahrmarkt"] .sky{background:
    radial-gradient(circle at calc(100% - 52px) 104px,var(--disc) 0 34px,var(--disc-glow) 35px 64px,transparent 65px),
    radial-gradient(120% 60px at 50% 100%,var(--hill) 0 98%,transparent 100%),
    linear-gradient(180deg,var(--bg-top) 0%,var(--bg-bot) 100%)}
@keyframes twinkle{from{opacity:.7}to{opacity:1}}
/* Ballnacht: Sterne und zwei Scheinwerferkegel */
[data-theme="ball"] .sky::before{inset:0;animation:twinkle 2.6s ease-in-out infinite alternate;
  background:
    radial-gradient(1.6px 1.6px at 12% 18%,#fff 98%,transparent),radial-gradient(1.2px 1.2px at 27% 8%,#f2d27a 98%,transparent),
    radial-gradient(2px 2px at 41% 22%,#fff 98%,transparent),radial-gradient(1.2px 1.2px at 58% 12%,#dfe5ff 98%,transparent),
    radial-gradient(1.6px 1.6px at 68% 30%,#f2d27a 98%,transparent),radial-gradient(1.2px 1.2px at 9% 42%,#dfe5ff 98%,transparent),
    radial-gradient(2px 2px at 91% 38%,#fff 98%,transparent),radial-gradient(1.2px 1.2px at 76% 52%,#fff 98%,transparent),
    radial-gradient(1.6px 1.6px at 22% 60%,#f2d27a 98%,transparent),radial-gradient(1.2px 1.2px at 47% 70%,#dfe5ff 98%,transparent),
    radial-gradient(1.2px 1.2px at 86% 72%,#f2d27a 98%,transparent),radial-gradient(1.6px 1.6px at 5% 80%,#fff 98%,transparent)}
[data-theme="ball"] .sky::after{inset:0;opacity:.5;
  background:conic-gradient(from 160deg at 18% -6%,transparent 0 6deg,rgba(220,228,255,.12) 6deg 18deg,transparent 18deg),
             conic-gradient(from 178deg at 84% -6%,transparent 0 6deg,rgba(242,210,122,.1) 6deg 17deg,transparent 17deg)}
canvas{position:fixed;inset:0;width:100%;height:100%;pointer-events:none}
#bg{z-index:1}
#fx{z-index:40}
.fx-under #fx{z-index:1}   /* Ticket: Feier-Partikel fliegen hinter Ticket, Text und Knöpfen */

/* ---------- Kopfleiste: Zurück + Fortschritt (scrollt mit, die Bühne hält ihr den Platz frei) ---------- */
.pv-top{position:absolute;z-index:5;left:0;right:0;top:max(10px,env(safe-area-inset-top));display:flex;align-items:center;gap:10px;
  padding:0 max(12px,env(safe-area-inset-right)) 0 max(12px,env(safe-area-inset-left));height:48px;pointer-events:none}
.preview .pv-top{top:44px}   /* Studio-Vorschau: Platz für die Handy-Kamera */
.pv-back{pointer-events:auto;flex:none;display:grid;place-items:center;width:44px;height:44px;border:0;border-radius:50%;cursor:pointer;
  background:var(--on-bg-pill);color:var(--ink);box-shadow:var(--s1);transition:transform var(--fast) var(--ease),background-color var(--fast);touch-action:manipulation}
.pv-back:hover{background:#fff}
.pv-back:active{transform:scale(.92)}
.pv-back svg{width:20px;height:20px}
.pv-back.off{visibility:hidden}
[data-theme="winter"] .pv-back:focus-visible,[data-theme="jahrmarkt"] .pv-back:focus-visible,[data-theme="ball"] .pv-back:focus-visible,
[data-theme="winter"] .done-actions:focus-within .on-bg:focus-visible{outline-color:#fff}
.pv-dots{flex:1;display:flex;justify-content:center;gap:6px;margin-right:54px;min-width:0}
.pv-dots i{flex:0 1 26px;height:5px;border-radius:5px;background:var(--dot);transition:background-color .4s,flex-basis .4s var(--ease)}
.pv-dots i.on{background:var(--dot-on)}
.pv-dots i.now{flex-basis:38px;background:var(--dot-on)}

/* ---------- Bühne & Karte ---------- */
.stage{position:relative;z-index:2;min-height:100vh;min-height:100dvh;display:grid;place-items:center;
  padding:calc(max(10px,env(safe-area-inset-top)) + 62px) max(16px,env(safe-area-inset-right)) calc(max(12px,env(safe-area-inset-bottom)) + 60px) max(16px,env(safe-area-inset-left))}
.preview .stage{padding-top:104px}
.step{width:min(460px,100%);display:grid;gap:16px;justify-items:center}
.card{--peek:48px;position:relative;width:100%;margin-top:var(--peek);background:var(--white);border-radius:var(--r);
  padding:calc(var(--peek) + 14px) clamp(18px,5.5vw,30px) 24px;text-align:center;box-shadow:var(--card-shadow);
  display:grid;gap:14px;justify-items:center}
/* kleiner Theme-Schmuck an der Kartenecke (Ahornblatt, Schneeflocke, Herz, Funkel) */
.card::before{content:"";position:absolute;top:14px;left:16px;width:26px;height:26px;background:var(--deco) center/contain no-repeat;rotate:-14deg;pointer-events:none;opacity:.9}
.zettel-card::before,.letter-card::before{display:none}
h1{margin:0;font:800 clamp(1.5rem,6.2vw,1.95rem)/1.14 var(--f-body);letter-spacing:-.03em;color:var(--ink);
  text-wrap:balance;overflow-wrap:anywhere;hyphens:auto;-webkit-hyphens:auto;hyphenate-limit-chars:12 5 5}
.shout{text-transform:uppercase;letter-spacing:-.01em;font-size:clamp(1.4rem,5.8vw,1.8rem);line-height:1.12}
.sub{margin:0;color:var(--ink-2);font-size:1rem;line-height:1.5;max-width:36ch;text-wrap:balance;overflow-wrap:anywhere}
.hand{margin:0;font:700 1rem/1.3 var(--f-body);color:var(--ink-3)}
.greet{font-size:1rem;max-width:100%;overflow-wrap:anywhere;margin-bottom:-8px}
/* Fuß „handgemacht von …“ als kleine Pille: auf jedem Himmel lesbar */
.foot{position:relative;z-index:2;display:block;width:max-content;max-width:calc(100% - 32px);margin:-54px auto max(14px,env(safe-area-inset-bottom));
  padding:8px 14px;border-radius:var(--pill);background:var(--on-bg-pill);color:var(--ink-2);font:600 .86rem/1.25 var(--f-body);text-align:center;box-shadow:var(--s1),inset 0 0 0 1.5px rgba(43,42,41,.07)}
.foot:empty{display:none}

/* ---------- Figuren der Frag-Bande ---------- */
.fig{display:block;flex:none;color:var(--fig);overflow:visible}
.fig.alt{color:var(--fig-2)}
.peek{position:absolute;left:50%;top:calc(-1 * var(--peek));width:calc(2 * var(--peek));height:calc(2 * var(--peek));translate:-50% 0;z-index:2;pointer-events:none;
  filter:drop-shadow(0 10px 10px rgba(43,42,41,.16))}
.peek .fig{width:100%;height:100%}
.funk{position:absolute;width:20px;height:20px;color:var(--fig);pointer-events:none}
@media (prefers-reduced-motion:no-preference){
  .bob{animation:bob 4s var(--ease) infinite}
  .wig{animation:wig 2.8s ease-in-out infinite}
  .twk{animation:twk 2.4s ease-in-out infinite}
}
@keyframes bob{50%{transform:translateY(-7px) rotate(-2deg)}}
@keyframes wig{0%,100%{transform:rotate(-5deg)}50%{transform:rotate(5deg) translateY(-3px)}}
@keyframes twk{0%,100%{transform:scale(.7) rotate(0);opacity:.5}50%{transform:scale(1.1) rotate(25deg);opacity:1}}
.fig.boing{animation:boing .5s var(--spring)}
@keyframes boing{0%{transform:scale(1)}35%{transform:scale(1.14,.9)}70%{transform:scale(.95,1.06)}100%{transform:scale(1)}}

/* ---------- Knöpfe: Blau = Hauptaktion, Weiß mit Rand = ruhig ---------- */
.btn{position:relative;font:700 1.05rem/1.15 var(--f-body);border:0;border-radius:var(--pill);padding:15px 26px;cursor:pointer;min-height:52px;
  transition:transform var(--fast) var(--ease),background-color var(--fast),box-shadow var(--fast),opacity .2s,font-size .45s var(--spring),padding .45s var(--spring);
  touch-action:manipulation;user-select:none;-webkit-user-select:none;white-space:nowrap;text-decoration:none;
  display:inline-flex;align-items:center;justify-content:center;gap:.4em;-webkit-tap-highlight-color:transparent}
.btn:active{transform:scale(.97)}
.btn-yes{color:#fff;background:var(--blue);max-width:100%;white-space:normal;text-align:center;text-wrap:balance;
  box-shadow:0 12px 22px -12px rgba(29,91,255,.7)}
.btn-yes:hover{background:var(--blue-d)}
.btn-yes[disabled]{opacity:.38;cursor:not-allowed;box-shadow:none;transform:none}
.btn-no{color:var(--ink);background:#fff;box-shadow:inset 0 0 0 1.5px var(--line-2)}
.btn-no:hover{box-shadow:inset 0 0 0 1.5px var(--ink)}
.btn-no.flee{pointer-events:none}   /* flüchtendes Nein: Maus und Finger erreichen es nie */
.btn-wide{width:100%}
.btn-ghost{color:var(--ink);background:#fff;box-shadow:inset 0 0 0 1.5px var(--line-2)}
.btn-ghost:hover{box-shadow:inset 0 0 0 1.5px var(--ink)}
.btn-maybe{color:var(--ink);background:var(--paper)}
.btn-maybe:hover{background:var(--paper-2)}
.btn:focus-visible,.chip:focus-visible,.food:focus-visible,.link:focus-visible,.answer:focus-visible{outline:3px solid var(--blue);outline-offset:3px}
.beat{animation:beat 1.4s ease-in-out infinite}
@keyframes beat{0%,100%{transform:scale(1)}12%{transform:scale(1.07)}24%{transform:scale(.98)}36%{transform:scale(1.04)}}
/* Ja wächst bei jedem Nein-Versuch: über Schriftgröße statt scale, damit es nichts überdeckt und die Reihe sauber umbricht */
.choices{display:flex;gap:12px;justify-content:center;align-items:center;flex-wrap:wrap;min-height:60px;padding-top:4px;width:100%}
.choices .btn-yes{font-size:calc(1.05rem * var(--grow,1));padding:calc(15px * var(--grow,1)) calc(28px * var(--grow,1))}
.no-ph{display:inline-block;border-radius:var(--pill);box-shadow:inset 0 0 0 2px var(--line);opacity:0;animation:phIn .5s .2s ease forwards}   /* hier stand das Nein */
@keyframes phIn{to{opacity:1}}
.boxes .no-ph{border-radius:10px}
.btn-no.flying{position:fixed;left:0;top:0;z-index:50;margin:0;will-change:transform;transition:scale .3s,opacity .3s;box-shadow:inset 0 0 0 1.5px var(--line-2),0 14px 24px -12px rgba(43,42,41,.45)}
.btn-no.away{opacity:0;scale:.2}
/* lange Nein-Texte (eigene Sprüche, Zettel-Handschrift) bleiben immer im Bild: umbrechen statt hinausragen */
.choices .btn-no,.btn-no.flying{max-width:calc(100vw - 28px);white-space:normal;text-wrap:balance;text-align:center}
.choices .btn-no{max-width:100%}
.btn.box.flying{font-size:clamp(1.35rem,7vw,1.9rem)}
.hint{margin:0;max-width:34ch;padding:8px 16px;border-radius:var(--r-sm);background:var(--sun-1);color:var(--ink);font:700 .95rem/1.35 var(--f-body);text-wrap:balance;
  animation:pop .5s var(--spring)}
@keyframes pop{from{opacity:0;transform:translateY(6px) scale(.9)}}
.link{appearance:none;background:none;border:0;color:var(--ink-3);font:600 .92rem var(--f-body);text-decoration:underline;text-underline-offset:3px;
  cursor:pointer;padding:6px 14px;border-radius:10px;min-height:44px}
.link:hover{color:var(--ink)}
.under{margin-top:-8px}

/* ---------- Umschlag ---------- */
.card:has(> .envelope){--peek:62px}
.envelope{position:absolute;left:50%;top:-62px;width:124px;height:124px;translate:-50% 0;z-index:2;font-size:84px;line-height:124px;
  filter:drop-shadow(0 12px 12px rgba(43,42,41,.18))}
html:not(.figs) .envelope{animation:bob 3.4s ease-in-out infinite}
.envelope .fig:not(.funk){width:100%;height:100%}
.envelope .funk:nth-of-type(2){left:-20px;top:30px}
.envelope .funk:nth-of-type(3){right:-16px;top:6px;width:14px;height:14px;animation-delay:-1.2s}
.for{margin:0;font:700 2.5rem/1 var(--f-hand);color:var(--ink);transform:rotate(-3deg);max-width:100%;text-wrap:balance;overflow-wrap:anywhere;hyphens:auto;-webkit-hyphens:auto;
  padding:0 10px 6px;background:linear-gradient(transparent 62%,var(--tint) 62% 92%,transparent 92%)}

/* ---------- Frage: Avatar (gewähltes Emoji) mit Sprechblase „blubb“ ---------- */
.card:has(> .avatar){--peek:52px}
.avatar{position:absolute;left:50%;top:-52px;translate:-50% 0;width:104px;height:104px;border-radius:50%;z-index:2;display:grid;place-items:center;
  background:var(--tint);box-shadow:0 0 0 6px #fff,0 16px 26px -14px rgba(43,42,41,.45)}
.avatar-emoji{font-size:56px;line-height:1}
.avatar .badge{position:absolute;left:-10px;bottom:-4px;font-size:26px;line-height:1;transform:rotate(-14deg);filter:drop-shadow(0 3px 3px rgba(0,0,0,.15))}
@media (prefers-reduced-motion:no-preference){ .avatar .badge{animation:sway 2.6s ease-in-out infinite} }
@keyframes sway{0%,100%{transform:rotate(-14deg)}50%{transform:rotate(8deg)}}
.avatar .fig{position:absolute;right:-50px;top:-26px;width:66px;height:66px;color:var(--fig-2);filter:drop-shadow(0 6px 8px rgba(43,42,41,.18))}
html:not(.figs) .avatar{animation:bob 3.4s ease-in-out infinite}

/* ---------- Juhu / Vielleicht / Lieber nicht: Emoji in einer Sonnen-Rosette ---------- */
.card:has(> .tile-emoji){--peek:52px}
.tile-emoji{position:absolute;left:50%;top:-52px;translate:-50% 0;width:104px;height:104px;z-index:2;display:grid;place-items:center;font-size:54px;line-height:1;isolation:isolate}
.tile-emoji::before{content:"";position:absolute;inset:-6px;z-index:-1;background:var(--fig);
  clip-path:polygon(50% 0,61% 13%,77% 6%,80% 22%,96% 25%,90% 40%,100% 50%,90% 60%,96% 75%,80% 78%,77% 94%,61% 87%,50% 100%,39% 87%,23% 94%,20% 78%,4% 75%,10% 60%,0 50%,10% 40%,4% 25%,20% 22%,23% 6%,39% 13%)}
@media (prefers-reduced-motion:no-preference){ .tile-emoji::before{animation:rot 24s linear infinite} .tile-emoji{animation:wobble 2.4s ease-in-out infinite} }
@keyframes wobble{0%,100%{rotate:-5deg}50%{rotate:5deg}}
.maybe-card .tile-emoji::before,.decline-card .tile-emoji::before{background:var(--tint);clip-path:circle(50%);animation:none}
.side-fig{position:absolute;right:-6px;top:-30px;width:62px;height:62px;z-index:3;color:var(--fig-2);filter:drop-shadow(0 6px 8px rgba(43,42,41,.18));pointer-events:none}

/* ---------- Termin: Kalli + Abreißkalender ---------- */
.cal{position:absolute;left:calc(50% + 40px);top:-26px;width:58px;border-radius:12px;overflow:hidden;background:#fff;rotate:8deg;z-index:3;
  box-shadow:0 10px 18px -10px rgba(43,42,41,.5),0 0 0 1.5px var(--line)}
.cal-m{display:block;background:var(--coral);color:var(--ink);font:800 .8125rem/1 var(--f-body);letter-spacing:.12em;text-transform:uppercase;padding:6px 0 5px}
.cal-d{display:block;font:800 1.55rem/1 var(--f-body);color:var(--ink);padding:6px 0 7px;font-variant-numeric:tabular-nums;letter-spacing:-.03em}
.cal.flip{animation:flip .5s ease}
@keyframes flip{0%,100%{transform:rotateX(0)}50%{transform:rotateX(80deg)}}
.field{width:100%;display:grid;gap:8px;text-align:left}
.label{font:800 .8125rem/1 var(--f-body);letter-spacing:.09em;text-transform:uppercase;color:var(--ink-2)}
.chips{display:grid;gap:8px}
.days{grid-template-columns:repeat(7,minmax(0,1fr))}
.times{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:440px){.days{grid-template-columns:repeat(5,minmax(0,1fr))}}
@media (max-width:340px){.days{grid-template-columns:repeat(4,minmax(0,1fr))}}
.chip{appearance:none;position:relative;border:0;background:var(--paper);color:var(--ink);border-radius:14px;padding:8px 2px;min-height:48px;
  font:800 .95rem/1.1 var(--f-body);cursor:pointer;display:grid;gap:2px;justify-items:center;align-content:center;font-variant-numeric:tabular-nums;
  transition:transform .25s var(--spring),background-color .2s,color .2s,box-shadow .2s;touch-action:manipulation}
.chip small{font-weight:600;font-size:.8125rem;color:var(--ink-2)}
.chip:hover{background:var(--paper-2);transform:translateY(-2px)}
.chip[aria-pressed="true"]{background:var(--blue);color:#fff;transform:translateY(-2px);box-shadow:0 10px 16px -10px rgba(29,91,255,.8)}
.chip[aria-pressed="true"] small{color:#fff}
.chip.busy{cursor:help;background:var(--coral-1);color:var(--ink-3)}
.chip.busy > span,.chip.busy small{text-decoration:line-through;text-decoration-thickness:1.5px}
.chip .badge{position:absolute;top:-9px;right:-5px;font-size:.95rem;font-style:normal;line-height:1;rotate:12deg;filter:drop-shadow(0 2px 2px rgba(0,0,0,.2))}
.chip.nudge{animation:nudge .45s ease}
@keyframes nudge{0%,100%{transform:translateX(0)}25%{transform:translateX(-4px) rotate(-3deg)}50%{transform:translateX(4px) rotate(3deg)}75%{transform:translateX(-2px)}}
.empty{margin:0;font-size:.95rem;color:var(--ink-2)}
.field .empty{margin-top:4px;padding:12px 14px;border-radius:var(--r-sm);background:var(--sun-1);text-align:center;font-weight:700;text-wrap:balance}

/* Liebes-Popup: dunkle Pille mit Spitze, wie eine kleine Nachricht */
.love{position:fixed;z-index:60;pointer-events:none;width:max-content;max-width:min(300px,calc(100vw - 20px));text-align:center;text-wrap:balance;
  padding:8px 14px;border-radius:16px;background:var(--ink);color:#fff;font:700 .95rem/1.25 var(--f-body);
  box-shadow:0 12px 20px -8px rgba(43,42,41,.5);animation:love 1.7s var(--ease) forwards}
.love::after{content:"";position:absolute;left:var(--tail,50%);bottom:-5px;width:12px;height:12px;translate:-50% 0;rotate:45deg;background:var(--ink);border-radius:2px}
.love.still{animation:none}
@keyframes love{0%{opacity:0;transform:translateY(10px) scale(.6)}14%{opacity:1;transform:translateY(0) scale(1.06)}24%{transform:scale(1)}
  72%{opacity:1;transform:translateY(-8px)}100%{opacity:0;transform:translateY(-26px) scale(.96)}}

/* ---------- Essen & Danach: Kacheln mit Klebezetteln ---------- */
.foods{width:100%;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;align-items:start}
@media (max-width:340px){.foods{grid-template-columns:repeat(2,minmax(0,1fr))}}
.food{appearance:none;position:relative;border:0;background:var(--paper);border-radius:var(--r-sm);padding:12px 6px 10px;cursor:pointer;min-height:48px;
  display:grid;gap:6px;justify-items:center;color:var(--ink);font:700 .9rem/1.15 var(--f-body);hyphens:auto;-webkit-hyphens:auto;overflow-wrap:break-word;
  transition:transform .3s var(--spring),background-color .2s,box-shadow .2s;touch-action:manipulation}
.food span{font-size:1.9rem;line-height:1;transition:transform .3s var(--spring)}
.food:hover{transform:translateY(-3px) rotate(-1.5deg);background:var(--paper-2)}
.food:hover span{transform:scale(1.15) rotate(-8deg)}
.food[aria-pressed="true"]{background:var(--blue-1);box-shadow:inset 0 0 0 2px var(--blue)}
.food[aria-pressed="true"] span{transform:scale(1.12) rotate(-6deg)}
.food.noted{margin-bottom:18px}
/* Zettel gehört zur Kachel: hängt unten über den Rand und schiebt die nächste Reihe passend nach unten */
.sticker{position:relative;z-index:2;justify-self:center;width:calc(100% + 10px);margin:2px -5px -22px;padding:8px 9px 6px;
  background:var(--note);color:var(--ink);font:700 1.08rem/1 var(--f-hand);font-style:normal;text-align:left;rotate:-4deg;border-radius:3px;pointer-events:none;
  box-shadow:0 8px 12px -8px rgba(43,42,41,.55)}
.sticker::before{content:"";position:absolute;top:-7px;left:50%;width:38px;height:13px;translate:-50% 0;rotate:-5deg;background:rgba(255,255,255,.72);box-shadow:0 1px 2px rgba(0,0,0,.06)}
.food:nth-child(3n+2) .sticker{rotate:3deg}
.food:nth-child(3n) .sticker{rotate:-2deg}

/* ---------- Brief: liniertes Papier, Handschrift, Briefmarke ---------- */
.letter-card{text-align:left}
/* Briefmarke: gezackter Rand (Lochung nur im Randstreifen), Theme-Motiv in der Mitte */
.seal{position:absolute;right:18px;top:-22px;width:54px;height:62px;padding:6px;display:grid;place-items:center;font-size:24px;line-height:1;rotate:8deg;z-index:3;
  background:#fff content-box;background-color:#fff;
  -webkit-mask:linear-gradient(#000 0 0) content-box,radial-gradient(circle at 4px 4px,#0000 2.4px,#000 2.9px) -4px -4px/8px 8px;
          mask:linear-gradient(#000 0 0) content-box,radial-gradient(circle at 4px 4px,#0000 2.4px,#000 2.9px) -4px -4px/8px 8px;
  filter:drop-shadow(0 6px 6px rgba(43,42,41,.22))}
.seal::before{content:"";position:absolute;inset:9px;border-radius:3px;background:var(--tint);box-shadow:inset 0 0 0 1.5px var(--line-2);z-index:-1}
.seal{isolation:isolate}
.letter{width:100%;text-align:left;display:grid;gap:10px}
.typed-wrap{display:grid;margin:0;font-family:var(--f-hand);font-weight:700;font-size:1.72rem;line-height:2.15rem;color:var(--ink-2);overflow-wrap:anywhere;
  background:repeating-linear-gradient(to bottom,transparent 0 calc(2.15rem - 1.5px),#dfe9ff calc(2.15rem - 1.5px) 2.15rem)}
.typed-wrap > span{grid-area:1/1}
.ghost{visibility:hidden}
.typed::after{content:"";display:inline-block;width:2px;height:1.1em;background:var(--blue);margin-left:2px;vertical-align:-.12em;animation:blink 1s steps(1) infinite}
.typed.done::after{display:none}
@keyframes blink{50%{opacity:0}}
.sign{font:700 1.75rem/1 var(--f-hand);color:var(--blue);text-align:right;margin:0;rotate:-3deg}
.hearts{display:flex;gap:6px;justify-content:center;margin:2px 0 0;font-size:1.1rem}
.hearts span{animation:hop 1.6s ease-in-out infinite;animation-delay:calc(var(--h)*120ms)}
@keyframes hop{0%,60%,100%{transform:translateY(0)}30%{transform:translateY(-6px)}}

/* ---------- Gebühr: Rechnung mit Zackenrand, Stempel knallt drauf ---------- */
.fee-icon{font-size:44px;line-height:1;transform:rotate(-8deg)}
.bill{position:relative;width:100%;padding:16px 18px 22px;background:var(--paper);display:grid;gap:6px;border-radius:14px 14px 0 0;
  -webkit-mask:linear-gradient(#000 0 0) top/100% calc(100% - 9px) no-repeat,conic-gradient(from 135deg at 50% 0,#000 90deg,#0000 0) bottom/16px 9px repeat-x;
          mask:linear-gradient(#000 0 0) top/100% calc(100% - 9px) no-repeat,conic-gradient(from 135deg at 50% 0,#000 90deg,#0000 0) bottom/16px 9px repeat-x}
.bill-row{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding-bottom:10px;border-bottom:1.5px dashed var(--line-2)}
.bill-name{font-weight:800;text-align:left}
.bill-price{font:800 1.75rem/1 var(--f-body);letter-spacing:-.03em;color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap}
.bill-fine{margin:0;font-size:.875rem;font-weight:600;color:var(--ink-3);text-align:left}
.bill-wrap{position:relative;width:100%}
.stamp{position:absolute;top:50%;left:50%;translate:-50% -54%;rotate:-9deg;z-index:3;width:max-content;max-width:min(92%,300px);
  border:3.5px solid var(--mint);outline:1.5px solid var(--mint);outline-offset:3px;color:var(--mint-d);border-radius:12px;padding:7px 14px 6px;background:rgba(255,255,255,.9);
  font:800 clamp(1.05rem,4.6vw,1.3rem)/1.05 var(--f-body);text-transform:uppercase;letter-spacing:.05em;text-align:center;text-wrap:balance;overflow-wrap:anywhere;
  animation:stamp .45s cubic-bezier(.2,1.5,.4,1) both;box-shadow:0 14px 30px -12px rgba(22,122,70,.45)}
.stamp small{display:block;font:700 1.2rem/1 var(--f-hand);text-transform:none;letter-spacing:0;margin-top:4px;color:var(--ink-2)}
@keyframes stamp{from{opacity:0;scale:2.4}to{opacity:1;scale:1}}
/* Sobald der Stempel sitzt, ist die Rechnung entwertet: blasser, Preis mit einem Korallen-Strich durch, kurzer Ruck beim Aufprall */
.bill{transition:opacity .4s .2s,filter .4s .2s}
.bill-price{position:relative}
.bill-price::after{content:"";position:absolute;left:-6%;right:-6%;top:52%;height:3px;border-radius:3px;background:var(--coral);rotate:-8deg;scale:0 1;transform-origin:0 50%;
  transition:scale .3s .32s var(--ease)}
.bill-wrap:has(> .stamp:not([hidden])) .bill{opacity:.62;filter:saturate(.6)}
.bill-wrap:has(> .stamp:not([hidden])) .bill-price::after{scale:1 1}
@media (prefers-reduced-motion:no-preference){ .bill-wrap:has(> .stamp:not([hidden])) .bill{animation:thud .32s .26s ease-out} }
@keyframes thud{40%{transform:translateY(3px) scale(.99,.97)}}
.shake{animation:shake .45s ease}
@keyframes shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-8px) rotate(-1deg)}40%{transform:translateX(7px) rotate(1deg)}60%{transform:translateX(-5px)}80%{transform:translateX(3px)}}
.spin{display:inline-block;width:1em;height:1em;border-radius:50%;border:2.5px solid rgba(255,255,255,.4);border-top-color:#fff;animation:rot .7s linear infinite}
@keyframes rot{to{transform:rotate(360deg)}}

/* ---------- Ticket: farbiger Kopf, Perforation, Abreißkante ---------- */
.ticket-wrap{position:relative;width:100%;margin-top:60px;filter:drop-shadow(0 26px 30px rgba(43,42,41,.28)) drop-shadow(0 6px 8px rgba(43,42,41,.12))}
.ticket{--stub:86px;position:relative;width:100%;text-align:left;background:#fff;border-radius:24px;padding:0 0 0;display:grid;gap:0;overflow:hidden;
  -webkit-mask:radial-gradient(circle at 0 calc(100% - var(--stub)),#0000 14px,#000 14.5px) left/51% 100% no-repeat,
               radial-gradient(circle at 100% calc(100% - var(--stub)),#0000 14px,#000 14.5px) right/51% 100% no-repeat;
          mask:radial-gradient(circle at 0 calc(100% - var(--stub)),#0000 14px,#000 14.5px) left/51% 100% no-repeat,
               radial-gradient(circle at 100% calc(100% - var(--stub)),#0000 14px,#000 14.5px) right/51% 100% no-repeat}
.eyebrow{margin:0;padding:22px 24px 0;background:var(--band);font:800 .8125rem/1.35 var(--f-body);letter-spacing:.1em;text-transform:uppercase;color:var(--band-ink);opacity:1}
.names{margin:0;padding:6px 24px 22px;background:var(--band);color:var(--band-ink);font-size:clamp(1.65rem,7vw,2.15rem);overflow-wrap:anywhere;hyphens:auto;-webkit-hyphens:auto;
  position:relative}
.names::after{content:"";position:absolute;left:0;right:0;top:100%;height:7px;background:radial-gradient(circle 7px at 50% 0,var(--band) 97%,transparent 100%) 2px 0/18px 7px repeat-x}   /* Wellenkante */
.names i{font-style:normal;color:var(--band-acc)}
.tixi{position:absolute;right:16px;top:-70px;width:86px;height:86px;rotate:10deg;z-index:3;color:var(--fig);filter:drop-shadow(0 8px 10px rgba(43,42,41,.22));pointer-events:none}
.facts{margin:0;display:grid;padding:16px 24px 6px}
.facts div{display:grid;grid-template-columns:7.2em 1fr;gap:10px;padding:10px 0;border-top:1.5px dashed var(--line)}
.facts div:first-child{border-top:0}
.facts dt{font:800 .8125rem/1.55 var(--f-body);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.facts dd{margin:0;font-weight:700;min-width:0;text-wrap:pretty;overflow-wrap:anywhere}
.stub{height:var(--stub);margin:6px 0 0;padding:0 24px;border-top:2px dashed var(--line-2);display:flex;align-items:center;justify-content:space-between;gap:14px;background:var(--paper)}
.stub-txt{font:700 .9rem/1.3 var(--f-body);color:var(--ink-2);max-width:60%}
.barcode{flex:none;width:96px;height:42px;opacity:.85;border-radius:2px;
  background:repeating-linear-gradient(90deg,var(--ink) 0 2px,transparent 2px 4px,var(--ink) 4px 5px,transparent 5px 8px,var(--ink) 8px 11px,transparent 11px 13px)}
/* Antwort-Karte unter dem Ticket */
.done-actions{width:100%;display:grid;gap:10px;justify-items:center;padding:18px 16px 8px;border-radius:24px;background:#fff;box-shadow:var(--card-shadow)}
.done-note{margin:0;font:800 1.05rem/1.25 var(--f-body);color:var(--ink);text-wrap:balance;text-align:center}
.msg{width:100%;margin:0;background:var(--paper);border-radius:14px 14px 14px 4px;padding:12px 14px;font-size:.94rem;line-height:1.45;
  color:var(--ink);user-select:all;-webkit-user-select:all;overflow-wrap:anywhere;text-align:left}
.row{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;width:100%}
.row .btn{flex:1 1 180px;white-space:normal}
.done-actions a.btn-yes{background:#25d366;color:#08331a;box-shadow:0 12px 22px -12px rgba(37,211,102,.9)}
.done-actions a.btn-yes:hover{background:#1fbd5a}
.done-actions a.btn-yes:focus-visible{outline-color:var(--ink)}
.on-bg{color:var(--ink-3)}

/* =========================================================
   Spiele (Geheimcode · Quiz · Rubbellos · Glücksrad)
   ========================================================= */
.game-card{gap:12px;padding-inline:clamp(16px,5vw,30px)}
.pop{animation:popIn .6s var(--spring) both}
.soft{animation:softIn .7s ease both}
@keyframes popIn{from{opacity:0;transform:scale(.6) rotate(-4deg)}}
@keyframes softIn{from{opacity:0}}

/* Geheimcode: das Schloss ist selbst eine Figur der Bande. Bügel in Ink, Körper in Theme-Farbe, Gesicht unter den Rollen. */
.lock{--sw:clamp(104px,calc(var(--n) * 16px + 48px),150px);position:relative;width:min(100%,calc(var(--n) * 62px + 36px));padding-top:calc(var(--sw) * .714 - 24px);margin:4px 0 0}
/* Bügel wächst mit der Zahl der Rollen mit (4 Rollen 112 px, 6 Rollen 144 px), damit das Schloss nicht wie ein Koffer aussieht */
.shackle{position:absolute;left:50%;top:0;width:var(--sw);height:calc(var(--sw) * .714);margin-left:calc(var(--sw) / -2);transform-origin:82% 100%;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 112 80'%3E%3Cpath d='M22 80V48a34 34 0 0 1 68 0v32' fill='none' stroke='%232b2a29' stroke-opacity='.82' stroke-width='15' stroke-linecap='round'/%3E%3Cpath d='M30 54V48a26 26 0 0 1 20-25' fill='none' stroke='%23fff' stroke-opacity='.28' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E") center/100% 100% no-repeat}
.lock-body{position:relative;border-radius:30px;padding:14px clamp(8px,3vw,14px) 58px;background:var(--fig);
  box-shadow:inset 0 -6px 0 rgba(43,42,41,.1),0 22px 30px -18px rgba(43,42,41,.5);transition:box-shadow .5s}
.reels{display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));gap:clamp(4px,1.5vw,9px)}
.game-card:has(.lock.many){padding-inline:12px}
.lock.many .lock-body{padding-inline:6px}
.lock.many .reels{gap:3px}
.reel{display:grid;gap:6px;min-width:0}
.reel-btn{appearance:none;border:0;min-height:44px;min-width:0;border-radius:12px;cursor:pointer;touch-action:manipulation;
  background:rgba(255,255,255,.5);color:var(--ink);font:800 .85rem/1 var(--f-body);transition:background-color .15s,transform .1s}
.reel-btn:hover{background:rgba(255,255,255,.8)}
.reel-btn:active{transform:translateY(2px)}
.reel-win{position:relative;height:78px;border-radius:14px;overflow:hidden;cursor:ns-resize;touch-action:none;user-select:none;-webkit-user-select:none;
  background:linear-gradient(180deg,rgba(43,42,41,.1),transparent 30%,transparent 70%,rgba(43,42,41,.1)),#fff;
  box-shadow:inset 0 3px 6px rgba(43,42,41,.18),0 0 0 2px rgba(43,42,41,.12);transition:background-color .25s}
.reel-win:focus-visible{outline:3px solid var(--blue);outline-offset:3px}
.reel-strip{display:grid;margin-top:-27px}
.reel-strip .d{height:44px;display:grid;place-items:center;font:800 2.1rem/1 var(--f-body);color:var(--ink);font-variant-numeric:tabular-nums}
.reel-strip .dim{opacity:.28;font-size:1.35rem}
.reel-strip.roll-up{animation:rollUp .24s cubic-bezier(.2,.9,.3,1.25)}
.reel-strip.roll-down{animation:rollDown .24s cubic-bezier(.2,.9,.3,1.25)}
@keyframes rollUp{from{transform:translateY(44px)}}
@keyframes rollDown{from{transform:translateY(-44px)}}
.keyhole{position:absolute;left:50%;bottom:16px;width:12px;height:17px;margin-left:-6px;opacity:.4;
  background:radial-gradient(circle at 50% 5px,var(--ink) 0 4.5px,transparent 5px),linear-gradient(var(--ink),var(--ink)) 50% 100%/4px 10px no-repeat}
html.figs .keyhole{display:none}
.lock-face{position:absolute;left:50%;bottom:6px;width:86px;height:48px;margin-left:-43px;pointer-events:none}
.lock.wrong .reel-win{background:linear-gradient(180deg,rgba(43,42,41,.1),transparent 30%,transparent 70%,rgba(43,42,41,.1)),var(--coral-1)}
.lock.jiggle{animation:jiggle .5s ease}
.lock.jiggle .shackle{animation:rattle .5s ease}
@keyframes jiggle{0%,100%{transform:rotate(0)}20%{transform:rotate(-5deg)}40%{transform:rotate(4deg)}60%{transform:rotate(-3deg)}80%{transform:rotate(2deg)}}
@keyframes rattle{30%{transform:translateY(-7px)}60%{transform:translateY(-2px)}}
.lock.open .shackle{animation:unlatch .9s cubic-bezier(.3,1.4,.5,1) forwards}
@keyframes unlatch{0%{transform:perspective(500px) translateY(0)}35%{transform:perspective(500px) translateY(-24px)}100%{transform:perspective(500px) translateY(-24px) rotateY(180deg)}}
.lock.open .lock-body{box-shadow:inset 0 -6px 0 rgba(43,42,41,.1),0 22px 30px -18px rgba(43,42,41,.5),0 0 0 6px rgba(255,255,255,.7),0 0 46px 10px color-mix(in srgb,var(--fig) 55%,transparent)}
.lock.open .reel-strip .d:not(.dim){color:var(--mint-d)}
.lock-msg{margin:0;min-height:1.6rem;font:800 1.15rem/1.25 var(--f-body);color:var(--ink-2);text-wrap:balance}
.lock-msg:empty{min-height:0;margin-top:-12px}
.lock-msg.ok{font-size:1.35rem;color:var(--ink);animation:pop .5s var(--spring)}

/* Quiz: Antwort-Zeilen wie in einer Quizshow, Blubb fiebert mit */
.quiz-title{font:800 1.3rem/1.2 var(--f-body);color:var(--ink);letter-spacing:-.02em;margin-bottom:0}
.quiz-prog{width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:2px}
.quiz-dots{display:flex;gap:6px}
.quiz-dots i{width:22px;height:8px;border-radius:8px;background:var(--paper-2);transition:background-color .3s,width .3s var(--ease)}
.quiz-dots i.now{background:var(--ink);width:30px}
.quiz-dots i.ok{background:var(--mint)}
.quiz-dots i.miss{background:var(--coral)}
.quiz{width:100%;display:grid}
.q{display:grid;gap:14px}
.q-in{animation:qIn .45s cubic-bezier(.2,.9,.3,1.1) both}
@keyframes qIn{from{opacity:0;transform:translateX(30px) rotate(1.5deg)}}
.q-text{font-size:clamp(1.3rem,5.2vw,1.6rem)}
.answers{display:grid;gap:8px;width:100%}
.answer{appearance:none;width:100%;min-height:56px;display:flex;align-items:center;gap:12px;padding:10px 14px 10px 10px;cursor:pointer;
  border:0;border-radius:var(--r-sm);background:var(--paper);color:var(--ink);font:700 1rem/1.25 var(--f-body);text-align:left;overflow-wrap:anywhere;
  touch-action:manipulation;transition:transform .3s var(--spring),background-color .3s,opacity .3s,box-shadow .3s}
.answer:hover{transform:translateY(-2px) rotate(-.6deg);background:var(--paper-2)}
.abc{flex:none;width:36px;height:36px;border-radius:10px;display:grid;place-items:center;font:800 1rem/1 var(--f-body);
  background:#fff;color:var(--ink-2);box-shadow:0 0 0 1.5px var(--line) inset;transition:background-color .3s,color .3s}
.answered .answer{cursor:default;transform:none}
.answered .answer:not(.right):not(.wrong):not(.reveal){opacity:.45}
.answer.right,.answer.reveal{background:var(--mint-1);box-shadow:inset 0 0 0 2px var(--mint)}
.answer.right{animation:hooray .55s var(--spring)}
.answer.reveal{animation:glowPulse .9s ease-in-out 2}
.answer.right .abc,.answer.reveal .abc{background:var(--mint-d);color:#fff;box-shadow:none}
.answer.wrong{animation:nudge .45s ease;background:var(--coral-1);box-shadow:inset 0 0 0 2px var(--coral)}
.answer.wrong .abc{background:var(--coral);color:var(--ink);box-shadow:none}
@keyframes hooray{40%{transform:scale(1.04) rotate(-1deg)}}
@keyframes glowPulse{50%{box-shadow:inset 0 0 0 2px var(--mint),0 0 0 7px rgba(31,158,91,.22)}}
.quiz-fb{margin:0;min-height:1.6rem;font:800 1.15rem/1.25 var(--f-body);color:var(--ink-2);text-wrap:balance}
.quiz-fb.end{font-size:1.3rem;color:var(--ink)}
.quiz-end{display:grid;justify-items:center;gap:14px;padding:6px 0 4px;isolation:isolate}
.medal{position:relative;width:146px;height:146px;border-radius:50%;display:flex;align-items:baseline;justify-content:center;padding-top:40px;
  background:var(--sun);box-shadow:0 0 0 6px #fff,0 0 0 8px var(--line),0 20px 26px -14px rgba(43,42,41,.45),inset 0 -6px 0 rgba(43,42,41,.08)}
.medal::before{content:"";position:absolute;inset:11px;border-radius:50%;border:2.5px dashed rgba(255,255,255,.85)}
.medal::after{content:"";position:absolute;left:50%;bottom:-34px;width:78px;height:52px;margin-left:-39px;z-index:-1;
  background:linear-gradient(90deg,var(--coral) 0 47%,transparent 47% 53%,var(--blue) 53%);
  clip-path:polygon(0 0,100% 0,100% 100%,76% 80%,53% 100%,53% 40%,47% 40%,47% 100%,24% 80%,0 100%)}
.medal b{font:800 4.2rem/1 var(--f-body);letter-spacing:-.05em;color:var(--ink)}
.medal span{font:800 1.6rem/1 var(--f-body);color:var(--ink-2)}
.medal.gold{animation:wobble 2.4s ease-in-out infinite}
.stars{display:flex;gap:4px;font-size:1.7rem;line-height:1;color:var(--paper-2);margin-top:36px}
.stars .on{color:var(--sun);text-shadow:0 2px 0 #e0a800;animation:pop .5s var(--spring) both}
.stars i{font-style:normal}
.stars i:nth-child(2){animation-delay:.12s}.stars i:nth-child(3){animation-delay:.24s}.stars i:nth-child(4){animation-delay:.36s}.stars i:nth-child(5){animation-delay:.48s}

/* Rubbellos: Los mit gestanzten Kerben, Folie (Canvas) über dem Gewinn */
.los{width:100%;max-width:340px;filter:drop-shadow(0 16px 16px rgba(43,42,41,.22));rotate:-1.5deg;margin:4px 0}
.los-in{position:relative;display:grid;gap:8px;padding:12px 16px 11px;border-radius:18px;background:var(--los);
  -webkit-mask:radial-gradient(circle at 0 50%,#0000 11px,#000 11.5px) left/51% 100% no-repeat,radial-gradient(circle at 100% 50%,#0000 11px,#000 11.5px) right/51% 100% no-repeat;
          mask:radial-gradient(circle at 0 50%,#0000 11px,#000 11.5px) left/51% 100% no-repeat,radial-gradient(circle at 100% 50%,#0000 11px,#000 11.5px) right/51% 100% no-repeat}
.los-in::before{content:"";position:absolute;inset:5px;border:2px dashed rgba(255,255,255,.75);border-radius:14px;pointer-events:none}
.los-row{position:relative;display:flex;justify-content:space-between;align-items:center;padding:0 10px;font:800 1.1rem/1 var(--f-body);color:var(--ink)}
.los-row.small{font:800 .8125rem/1 var(--f-body);letter-spacing:.14em;color:var(--ink-2)}
.los-win{position:relative;height:clamp(140px,40vw,164px);border-radius:12px;overflow:hidden;background:#fff;box-shadow:inset 0 2px 8px rgba(43,42,41,.2)}
.prize{position:absolute;inset:0;display:grid;place-items:center;padding:8px;background:radial-gradient(circle at 50% 46%,var(--tint) 0 38%,#fff 70%)}
.prize-in{display:grid;justify-items:center;gap:6px}
.prize-e{font-size:58px;line-height:1;filter:drop-shadow(0 6px 5px rgba(0,0,0,.16))}
.prize-n{font:800 clamp(1.35rem,5.5vw,1.7rem)/1.1 var(--f-body);letter-spacing:-.03em;color:var(--ink);text-align:center;overflow-wrap:anywhere}
canvas.foil{position:absolute;inset:0;width:100%;height:100%;pointer-events:auto;touch-action:none;transition:opacity .8s ease;
  cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Ccircle cx='16' cy='16' r='12' fill='%23ffcc2e' stroke='%232b2a29' stroke-width='2'/%3E%3Ccircle cx='16' cy='16' r='7' fill='none' stroke='%23fff' stroke-width='1.5'/%3E%3C/svg%3E") 16 16,pointer}
canvas.foil.gone{opacity:0;pointer-events:none}
.los-win.won .prize-in{animation:popIn .7s var(--spring) both}
.los-fine{margin:0;font:700 .95rem/1.35 var(--f-body);color:var(--ink-2);text-wrap:balance;animation:pop .5s var(--spring)}

/* Glücksrad: bunte Felder, Glühbirnen-Rand in Ink, Zeiger oben */
.wheel-card{gap:10px}
.wheel-wrap{position:relative;width:min(292px,100%);aspect-ratio:1;margin:10px 0 4px;user-select:none;-webkit-user-select:none}
@media (max-height:700px){.wheel-wrap{width:min(250px,100%)}}
.bulbs{position:absolute;inset:0;border-radius:50%;background:var(--rim);box-shadow:0 22px 30px -16px rgba(43,42,41,.55)}
.bulbs i{position:absolute;left:50%;top:0;width:0;height:50%;transform-origin:50% 100%}
.bulbs i::before{content:"";position:absolute;top:4px;left:-3.5px;width:7px;height:7px;border-radius:50%;background:var(--bulb);
  box-shadow:0 0 6px 2px color-mix(in srgb,var(--bulb) 70%,transparent);animation:bulb 1.2s steps(1) infinite}
.bulbs i:nth-child(even)::before{animation-delay:-.6s}
.wheel-wrap.spinning .bulbs i::before{animation-duration:.32s}
@keyframes bulb{50%{opacity:.35;box-shadow:none}}
.wheel{position:absolute;inset:15px;border-radius:50%;overflow:hidden;touch-action:none;cursor:grab;will-change:transform;box-shadow:0 0 0 3px #fff}
.wheel:active{cursor:grabbing}
.wheel-lines,.wheel-win{position:absolute;inset:0;border-radius:50%;pointer-events:none}
.wheel-win{opacity:0;transition:opacity .6s}
.wheel-win.on{opacity:1;animation:winPulse 1s ease-in-out infinite alternate}
@keyframes winPulse{from{opacity:.7}to{opacity:1}}
.wl{position:absolute;inset:0;pointer-events:none}
.wl span{position:absolute;left:50%;top:6%;width:var(--chord);translate:-50% 0;display:grid;justify-items:center;gap:3px;text-align:center;transition:rotate .45s ease}
.wl.flip span{rotate:180deg}   /* untere Radhälfte: Beschriftung steht aufrecht */
.wl b{font-size:clamp(1.3rem,6.4vw,1.7rem);line-height:1;font-weight:400}
.wl small{max-width:100%;font:800 .8125rem/1.1 var(--f-body);color:var(--ink);overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow-wrap:anywhere;hyphens:auto}
.wheel.many small{display:none}
.wheel-hub{position:absolute;left:50%;top:50%;width:22%;aspect-ratio:1;translate:-50% -50%;border-radius:50%;display:grid;place-items:center;
  font-size:clamp(1.05rem,5.4vw,1.5rem);pointer-events:none;background:#fff;box-shadow:0 6px 12px -4px rgba(43,42,41,.4),0 0 0 4px var(--rim)}
.wheel-pin{position:absolute;left:50%;top:-10px;width:34px;height:48px;margin-left:-17px;z-index:2;pointer-events:none;transform-origin:50% 14px;
  filter:drop-shadow(0 4px 3px rgba(0,0,0,.3))}
.wheel-pin::before{content:"";position:absolute;inset:0;background:var(--pin);
  clip-path:polygon(50% 100%,6% 38%,4% 22%,14% 7%,32% 0,68% 0,86% 7%,96% 22%,94% 38%)}
.wheel-pin::after{content:"";position:absolute;left:50%;top:9px;width:12px;height:12px;margin-left:-6px;border-radius:50%;background:#fff}
.wheel-pin.tick{animation:tick .16s ease-out}
@keyframes tick{35%{transform:rotate(-16deg)}}
.wheel-result{display:grid;justify-items:center;gap:2px}
.wheel-result p:empty{display:none}
.wheel-say{font:700 1rem/1.3 var(--f-body);color:var(--ink-3)}
.wheel-res{margin:0;display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;
  font:800 clamp(1.5rem,6.4vw,1.9rem)/1.1 var(--f-body);letter-spacing:-.03em;color:var(--ink);overflow-wrap:anywhere}
.res-e{font-size:1.3em;line-height:1}

/* ---------- Fehler / leer ---------- */
.oops{font-size:64px;line-height:1}
.card:has(> .oops)::before{display:none}
.card:has(> .oops){--peek:0px;margin-top:0;padding-top:30px}

/* ---------- Kurzlink: Einladung wird geholt (kurz, nur bei langsamer Antwort sichtbar) ---------- */
.card:has(> .loading)::before{display:none}
.card:has(> .loading){--peek:0px;margin-top:0;padding-top:30px}
.loading{display:grid;justify-items:center;gap:14px}
.loading-env{font-size:58px;line-height:1;display:block}
.loading-dots{display:flex;gap:8px}
.loading-dots i{width:9px;height:9px;border-radius:50%;background:var(--blue);opacity:.35}
@media (prefers-reduced-motion:no-preference){
  .loading-env{animation:envHop 1.1s ease-in-out infinite}
  .loading-dots i{animation:dotPulse 1.1s ease-in-out infinite}
  .loading-dots i:nth-child(2){animation-delay:.15s}
  .loading-dots i:nth-child(3){animation-delay:.3s}
}
@keyframes envHop{0%,100%{transform:translateY(0) rotate(-4deg)}50%{transform:translateY(-8px) rotate(4deg)}}
@keyframes dotPulse{0%,100%{opacity:.25;transform:scale(.8)}50%{opacity:1;transform:scale(1)}}

/* ---------- Zettel-Look („Willst du mit mir gehen?“): kariertes Papier, Handschrift, Kästchen zum Ankreuzen ---------- */
.zettel-card{--peek:0px;--grid:rgba(29,91,255,.13);border-radius:6px 8px 12px 5px;rotate:-1deg;padding-top:34px;margin-top:20px;
  background:linear-gradient(var(--grid) 1px,transparent 1px) 0 0/22px 22px,linear-gradient(90deg,var(--grid) 1px,transparent 1px) 0 0/22px 22px,#fffefa}
.zettel-card::after{content:"";position:absolute;top:-12px;left:50%;width:92px;height:26px;translate:-50% 0;rotate:3deg;   /* Klebestreifen */
  background:rgba(255,255,255,.7);box-shadow:0 1px 3px rgba(0,0,0,.1);pointer-events:none}
.zettel{width:100%;display:grid;gap:12px;justify-items:center}
.zettel .greet{font:700 1.6rem/1 var(--f-hand);color:var(--ink-2);rotate:-2deg}
.zettel-q{font:700 clamp(2.3rem,9vw,2.9rem)/1.05 var(--f-hand);letter-spacing:0;color:var(--ink);rotate:-1.5deg}
.zettel-fig{position:absolute;right:-4px;top:-34px;width:70px;height:70px;rotate:10deg;z-index:3;color:var(--fig-2);filter:drop-shadow(0 6px 8px rgba(43,42,41,.18));pointer-events:none}
.choices.boxes{gap:10px 22px;padding-top:8px}
.btn.box,.btn.box:hover,.btn.box:active{color:var(--ink);background:#fffefa;box-shadow:0 1px 0 rgba(0,0,0,.06),0 8px 14px -10px rgba(43,42,41,.5);
  border-radius:10px;padding:.25em .55em .25em .4em;font:700 1.9rem/1 var(--f-hand);gap:.4em;min-height:52px}
.choices .btn.box.btn-yes{font-size:calc(1.9rem * var(--grow,1));padding:.25em .55em .25em .4em}
.btn.box::before{content:"";flex:none;width:30px;height:30px;border:2.5px solid var(--ink);border-radius:5px;rotate:-3deg;
  display:grid;place-items:center;font:700 1.9rem/1 var(--f-hand);color:var(--blue)}
.btn.box:hover::before{border-color:var(--blue)}
.btn.box.ticked::before{content:"✓"}
.btn.box:focus-visible{outline:3px solid var(--blue);outline-offset:3px}

/* Nur ein wählbarer Tag (Valentinstag) · 12-Stunden-Uhrzeiten brauchen mehr Platz */
.days.one{grid-template-columns:minmax(0,200px);justify-content:center}
.times.ampm{grid-template-columns:repeat(3,minmax(0,1fr))}

/* ---------- Übergänge ---------- */
.step.entering > *{animation:cardIn .7s cubic-bezier(.2,.9,.25,1.12) both}
.step.entering .card > *{animation:rise .6s cubic-bezier(.2,.9,.3,1.1) both;animation-delay:calc(var(--i,0) * 60ms + 140ms)}
.step.leaving > *{animation:cardOut .34s cubic-bezier(.5,0,.8,.4) forwards}
@keyframes cardIn{from{opacity:0;transform:translateY(34px) rotate(-2deg) scale(.95)}}
@keyframes cardOut{to{opacity:0;transform:translateY(-26px) rotate(2deg) scale(.96)}}
@keyframes rise{from{opacity:0;transform:translateY(12px)}}
.instant .step.entering > *, .instant .step.entering .card > *{animation:none}

/* Breite Bildschirme: etwas mehr Luft, Karte bleibt handlich */
@media (min-width:700px){
  .card{padding-inline:36px}
  .step{gap:18px}
}
/* Großer Desktop: alles eine Spur größer, damit die Karte nicht verloren wirkt */
@media (min-width:1000px) and (min-height:760px){
  html{font-size:17px}
  .step{width:min(500px,100%)}
  .card{--peek:56px}
  .card:has(> .envelope){--peek:70px}
  .envelope{width:140px;height:140px;top:-70px}
  .avatar{width:116px;height:116px;top:-58px}
  .card:has(> .avatar),.card:has(> .tile-emoji){--peek:58px}
  .tile-emoji{width:116px;height:116px;top:-58px}
  .code-card{--peek:0px}
  .zettel-card{--peek:0px}
  .wheel-wrap{width:min(320px,100%)}
}
/* Sehr große Bildschirme (Full HD und mehr): Karte wächst mit, damit sie nicht verloren wirkt */
@media (min-width:1600px) and (min-height:1000px){
  html{font-size:18px}
  .step{width:min(540px,100%)}
  .wheel-wrap{width:min(340px,100%)}
}
/* Niedrige Bildschirme (568, 640, Querformat): kompakter, nichts überlappt, der Inhalt scrollt */
@media (max-height:700px){
  .stage{padding-top:calc(max(8px,env(safe-area-inset-top)) + 54px)}
  .card{gap:11px;padding-bottom:20px}
  h1{font-size:clamp(1.35rem,5.6vw,1.7rem)}
  .chip{min-height:44px;padding-block:6px}
  .reel-win{height:72px}
  .lock-body{padding-bottom:54px}
  .lock{--sw:clamp(104px,calc(var(--n) * 12px + 64px),128px)}
}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.05s!important}
  .soft,canvas.foil{animation-duration:.7s!important;transition-duration:.7s!important}   /* Spiel-Ergebnis sanft einblenden statt animieren */
}

/* ---------- Kleinigkeiten zu den Figuren ---------- */
.fig.note{color:var(--note)}
.code-card{--peek:0px;padding-top:28px}
.tile-emoji .funk.f1{left:-16px;top:6px}
.tile-emoji .funk.f2{right:-10px;bottom:4px;width:14px;height:14px;animation-delay:-1.1s}