/* Weihnachtsaktion: hervorgehobener Menüpunkt, Pop-up und Spielseite. Gilt auf Startseite und Unterseiten.
   Rot als saisonaler Akzent neben dem Aim-Violett, Auswahl und Hover über die nächst dunklere Stufe. */
:root{--xmas:#c81e33;--xmas-soft:#fde8eb;--xmas-soft-2:#fad3d9}

/* Menüpunkt: steht neben dem Menü und bleibt auch auf dem Handy sichtbar */
.nav-spiel{display:inline-flex;align-items:center;gap:8px;padding:.62em 1em .58em .8em;border-radius:999px;background:var(--xmas-soft);color:var(--xmas);font-family:var(--display);font-weight:600;font-size:.92rem;line-height:1;text-decoration:none;white-space:nowrap;transition:background .2s,color .2s;flex:none}
.nav-spiel:hover,.nav-spiel[aria-current]{background:var(--xmas-soft-2);color:#9e1527}
.nav-spiel .px-geschenk{width:18px;height:auto;display:block;animation:geschenk-wackeln 3.2s ease-in-out infinite;transform-origin:50% 90%}
.nav.dark .nav-spiel{background:#3a1430;color:#ffd0d6}
@keyframes geschenk-wackeln{0%,82%,100%{transform:rotate(0)}86%{transform:rotate(-12deg)}90%{transform:rotate(10deg)}94%{transform:rotate(-6deg)}}
.nav .wrap > nav + .nav-spiel{margin-left:6px}
@media (max-width:860px){.nav-spiel{margin-left:auto}.nav-spiel + .btn{margin-left:8px!important}}
@media (max-width:440px){.nav-spiel .lang{display:none}.nav-spiel{padding:.62em .8em}}
@media (min-width:441px){.nav-spiel .kurz{display:none}}

/* Pop-up: Karte unten rechts, auf dem Handy als Leiste unten. Nicht modal, die Seite bleibt bedienbar. */
.aktion{position:fixed;right:clamp(12px,2.4vw,28px);bottom:clamp(12px,2.4vw,28px);z-index:60;width:min(380px,calc(100vw - 24px));background:#fff;color:#0B0620;border-radius:24px;box-shadow:0 24px 60px -18px rgba(11,6,32,.45);overflow:hidden;font-family:"Baloo Tamma 2",system-ui,sans-serif;opacity:0;transform:translateY(16px);transition:opacity .35s,transform .35s}
.aktion.an{opacity:1;transform:none}
.aktion .px-szene{display:block;width:100%;height:140px;background:#2a1670}
.aktion-text{padding:18px 22px 22px}
.aktion-k{margin:0 0 4px;color:var(--xmas);font-family:"Geom",system-ui,sans-serif;font-weight:600;font-size:.9rem}
.aktion h2{margin:0 0 8px;font-family:"Geom",system-ui,sans-serif;font-weight:700;font-size:1.45rem;line-height:1.1;letter-spacing:-.02em}
.aktion p{margin:0 0 16px;font-size:1rem;line-height:1.5;color:#4f4a68}
.aktion-knoepfe{display:flex;flex-wrap:wrap;gap:10px}
.aktion .btn{font-size:.95rem}
.aktion .btn.ghost{background:#F2F2FA;color:#381d92}
.aktion .btn.ghost:hover{background:#E7E3F6;color:#1C0A63}
.aktion-zu{position:absolute;top:10px;right:10px;width:36px;height:36px;border:0;border-radius:50%;background:rgba(255,255,255,.9);color:#0B0620;font-size:22px;line-height:1;cursor:pointer;display:grid;place-items:center}
.aktion-zu:hover{background:#fff}
.aktion-zu:focus-visible,.aktion .btn:focus-visible{outline:2px solid #381d92;outline-offset:2px}
@media (max-width:520px){.aktion{left:12px;right:12px;width:auto}.aktion .px-szene{height:96px}.aktion-text{padding:14px 18px 18px}.aktion h2{font-size:1.25rem}.aktion p{margin-bottom:12px}}
@media (prefers-reduced-motion:reduce){.aktion{transition:none}.nav-spiel .px-geschenk{animation:none}}

/* Spielseite */
.spiel{margin:8px 0 56px}
.spiel-buehne{position:relative;aspect-ratio:16/10;max-height:82vh;width:100%;border-radius:24px;overflow:hidden;background:#0f1a2e;display:grid;place-items:center}
.spiel-buehne .spiel-poster{position:absolute;inset:-24px;width:calc(100% + 48px);height:calc(100% + 48px);max-width:none;object-fit:cover;filter:blur(10px) saturate(1.1) brightness(.5)}
.spiel-leiste [hidden]{display:none!important}
.spiel-buehne iframe{position:absolute;inset:0;width:100%;height:100%;border:0;background:#0f1a2e}
.spiel-start{position:relative;display:grid;justify-items:center;gap:12px;text-align:center;padding:24px;color:#fff}
.spiel-start h2{margin:0;color:#fff;font-size:clamp(1.8rem,4vw,3rem);letter-spacing:-.03em}
.spiel-start .btn{font-size:1.15rem;padding:1.05em 2em}
.spiel-start p{margin:0;max-width:40ch;font-size:16px;color:#e6e2f5;text-shadow:0 1px 8px rgba(0,0,0,.4)}
.spiel-leiste{display:flex;flex-wrap:wrap;gap:12px;margin-top:14px}
/* Vergrößern: Bühne füllt Bildschirm oder Fenster, Knopf oben mittig über dem Spiel */
.spiel-buehne.gross{position:fixed;inset:0;z-index:200;width:100vw;height:100vh;height:100dvh;max-height:none;aspect-ratio:auto;border-radius:0}
.spiel-buehne:fullscreen{border-radius:0}
body.spiel-gross{overflow:hidden}
.spiel-gross-knopf{position:absolute;top:10px;left:50%;transform:translateX(-50%);z-index:3;width:44px;height:44px;border:0;border-radius:999px;background:rgba(255,255,255,.9);color:#1C0A63;display:grid;place-items:center;cursor:pointer;box-shadow:0 6px 18px rgba(11,6,32,.25);transition:background .2s}
.spiel-gross-knopf:hover{background:#fff}
.spiel-gross-knopf:focus-visible{outline:2px solid #381d92;outline-offset:2px}
.spiel-gross-knopf svg{width:22px;height:22px}
/* Schmale Spielfläche: Uhr reicht bis zur Mitte, deshalb Knopf oben rechts (dort liegt dann nur die Karte) */
@media (max-width:660px){.spiel-gross-knopf{left:auto;right:12px;top:16px;transform:none}}
.spiel-text{margin-top:8px}
.vorteile{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px;margin:28px 0 12px}
.vorteile div{background:var(--tint);border-radius:24px;padding:22px 24px}
.vorteile h3{margin:0 0 8px;font-size:1.2rem}
.vorteile p{margin:0;color:var(--muted);font-size:16px;line-height:1.5}
@media (max-width:720px){.spiel-buehne{aspect-ratio:auto;height:78svh;max-height:none}}