/* Cocos Weihnachtskalender (/advent/), 26.10.2026 – nur diese Seite lädt die Datei; bestehende Seiten bleiben unberührt.
 * 🔑 Bühne: 1:1 nach dem freigegebenen Mockup (1672 × 941). Jedes Maß dort steht als calc(var(--u)*N) – N sind die Pixel
 * des Mockups, --u = Breite der Seite / 1672 (höchstens 1 px). So wächst und schrumpft die ganze Komposition gleichmäßig.
 * Die Story-Karte (unten) und der Fließtext darunter nutzen echte Pixel. Tablet und Handy (Phase D) kommen als eigene Regeln. */
@font-face{font-family:'Playfair Display';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/playfair-display-700-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Playfair Display';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/playfair-display-700-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Caveat';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/caveat-600-latin.woff2') format('woff2')}

:root{--advent-gold:#f3d58a;--advent-gold-deep:#d9b25a;--advent-cream:#f7f0dc;--advent-panel:#0d1746;--advent-chip:#152055;--advent-chip-rand:#2c3a7e;--advent-text:#d8d6e4;--advent-text2:#b9bcd3;--advent-rot:#e23b3b;--advent-fokus:#f6dc9a}

.advent{--u:calc(min(100cqw,1672px)/1672);container-type:inline-size;position:relative;background:#0a1238;color:#fff;font-family:'Inter',system-ui,sans-serif;overflow-x:clip}
.advent::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#060b26 0%,#0b1540 30%,#16255f 48%,#0b1540 62%,#0a1238 100%)}
/* Bühne (Nachbesserung 31.10.): ein Raster statt absolut gesetzter Teile – Text · Coco · Notiz · Heute-Karte, darunter die Welt, darunter
   Themen und Tageskarte. Maße weiter in Mockup-Pixeln (calc(var(--u)*N)), damit die Komposition bis 1280 px gleichmäßig mitschrumpft. */
.advent-buehne{position:relative;z-index:1;width:calc(var(--u)*1672);margin-inline:auto;overflow:hidden;display:grid;column-gap:calc(var(--u)*24);row-gap:0;
  padding:max(80px,calc(var(--u)*75)) calc(var(--u)*60) 0;grid-template-columns:minmax(360px,1fr) auto auto minmax(400px,1fr);
  grid-template-areas:"hero coco notiz heute" "band band band band" "unten unten unten unten"}
.advent-buehne>*{position:relative}
/* Hintergrundbild (Thommy 31.10., wie im Original-Entwurf): die Winterlandschaft liegt hinter der ganzen Bühne. Desktop: füllt die Bühne;
   Tablet/Handy: nur oben, läuft nach unten in den Nachthimmel aus (siehe advent-tablet). Dunkler Schleier hält den Text lesbar. */
.advent-buehne::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:linear-gradient(90deg,rgba(6,11,38,.62) 0%,rgba(6,11,38,.34) 30%,rgba(6,11,38,0) 52%),linear-gradient(180deg,rgba(6,11,38,.28) 0%,rgba(6,11,38,.06) 45%,rgba(6,11,38,.3) 100%),url(/assets/advent/hintergrund.webp) 50% 0/cover no-repeat}
.advent b{font-weight:700}
.advent [hidden],.a-overlay[hidden],.a-overlay [hidden]{display:none!important}

.advent-buehne>.a-sterne{position:absolute;inset:0;width:100%;height:100%;opacity:.35}
/* Schnee (Wunsch Thommy 31.10.): mehr Flocken, dazu Schneesterne in mehreren Größen; liegt über allem, fängt aber keine Klicks ab. */
.advent-buehne>.a-schnee{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:4}
.a-flocke{position:absolute;top:-30px;border-radius:50%;background:#fff;pointer-events:none;width:calc(var(--u)*var(--s));height:calc(var(--u)*var(--s));will-change:transform;animation:a-fall linear infinite}
.a-flocke.a-schneestern{border-radius:0;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round'%3E%3Cpath d='M12 1.5v21M2.9 6.75l18.2 10.5M2.9 17.25l18.2-10.5'/%3E%3Cpath d='M12 5.2 9.6 2.8M12 5.2l2.4-2.4M12 18.8l-2.4 2.4M12 18.8l2.4 2.4M6.1 8.6 2.8 9.5M6.1 8.6 5.2 5.3M17.9 15.4l3.3-.9M17.9 15.4l.9 3.3M6.1 15.4l-3.3-.9M6.1 15.4l-.9 3.3M17.9 8.6l3.3.9M17.9 8.6l.9-3.3'/%3E%3C/g%3E%3Ccircle cx='12' cy='12' r='1.6' fill='%23000'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round'%3E%3Cpath d='M12 1.5v21M2.9 6.75l18.2 10.5M2.9 17.25l18.2-10.5'/%3E%3Cpath d='M12 5.2 9.6 2.8M12 5.2l2.4-2.4M12 18.8l-2.4 2.4M12 18.8l2.4 2.4M6.1 8.6 2.8 9.5M6.1 8.6 5.2 5.3M17.9 15.4l3.3-.9M17.9 15.4l.9 3.3M6.1 15.4l-3.3-.9M6.1 15.4l-.9 3.3M17.9 8.6l3.3.9M17.9 8.6l.9-3.3'/%3E%3C/g%3E%3Ccircle cx='12' cy='12' r='1.6' fill='%23000'/%3E%3C/svg%3E") center/contain no-repeat;filter:drop-shadow(0 0 3px rgba(255,255,255,.75))}
@keyframes a-fall{from{transform:translate3d(0,0,0) rotate(0)}to{transform:translate3d(var(--drift,-12px),var(--fall,1000px),0) rotate(var(--dreh,0deg))}}
/* Schnee sammelt sich (Wunsch Thommy 31.10.): Kappen auf den Türchen – advent.js versetzt jedes zweite um einen halben Takt,
   so wechseln sie sich ab – und eine Wehe am unteren Rand der Landschaft. Beide wachsen langsam, schmelzen weg und kommen wieder. */
.a-kappe{position:absolute;left:10%;top:-23%;width:80%;height:39%;pointer-events:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='10 -23 80 39'%3E %3Cdefs%3E%3CclipPath id='k'%3E%3Cpath d='M14 15.3C10 9 15 2 22 1.5C23 -7 32 -12 39 -9C42 -19 56 -21 60 -12C66 -18 77 -13 76 -5C84 -4 90 5 86 15.3A50 50 0 0 0 14 15.3Z'/%3E%3C/clipPath%3E%3C/defs%3E %3Cg clip-path='url(%23k)'%3E%3Cpath d='M0 -30H100V20H0Z' fill='%23fff'/%3E%3Ccircle cx='50' cy='50' r='52.5' fill='none' stroke='%23d3def7' stroke-width='3'/%3E%3C/g%3E%3C/svg%3E") center/100% 100% no-repeat;filter:drop-shadow(0 .05em .08em rgba(4,10,40,.45));transform-origin:50% 90%;opacity:0;animation:a-kappe 44s ease-in-out infinite}
.a-geschenk .a-kappe{left:4%;top:-25%;width:68%;height:27%;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 30'%3E %3Cdefs%3E%3CclipPath id='k'%3E%3Cpath d='M0 30C4 26 8 20 15 19C18 9 30 5 38 11C44 1 60 0 66 9C73 4 85 7 86 16C93 17 99 24 100 30Z'/%3E%3C/clipPath%3E%3C/defs%3E %3Cg clip-path='url(%23k)'%3E%3Cpath d='M0 0H100V30H0Z' fill='%23fff'/%3E%3Cpath d='M0 28.5H100' stroke='%23d3def7' stroke-width='4'/%3E%3C/g%3E%3C/svg%3E")}
@keyframes a-kappe{0%{opacity:0;transform:scale(.5,.08)}6%{opacity:1;transform:scale(.65,.2)}44%,50%{opacity:1;transform:none}57%{opacity:0;transform:translateY(8%) scale(.92,.55)}100%{opacity:0;transform:scale(.5,.08)}}
.a-wehe{left:0;right:0;bottom:0;height:3cqw;pointer-events:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 40' preserveAspectRatio='none'%3E %3Cdefs%3E%3ClinearGradient id='w' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23fff'/%3E%3Cstop offset='1' stop-color='%23cfdbf6'/%3E%3C/linearGradient%3E%3C/defs%3E %3Cpath d='M0 40V22C20 14 40 12 62 17C84 22 104 9 132 11C160 13 176 25 202 22C218 20 230 26 240 22V40Z' fill='url(%23w)'/%3E%3C/svg%3E") 0 100%/auto 100% repeat-x,url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 40' preserveAspectRatio='none'%3E %3Cdefs%3E%3ClinearGradient id='w' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23fff'/%3E%3Cstop offset='1' stop-color='%23cfdbf6'/%3E%3C/linearGradient%3E%3C/defs%3E %3Cpath d='M0 40V22C20 14 40 12 62 17C84 22 104 9 132 11C160 13 176 25 202 22C218 20 230 26 240 22V40Z' fill='url(%23w)'/%3E%3C/svg%3E") 41% 100%/auto 70% repeat-x;transform-origin:50% 100%;opacity:0;animation:a-wehe 60s ease-in-out -32s infinite}
@keyframes a-wehe{0%{opacity:0;transform:scaleY(0)}5%{opacity:1;transform:scaleY(.1)}68%,78%{opacity:1;transform:none}88%{opacity:0;transform:scaleY(.6)}100%{opacity:0;transform:scaleY(0)}}

/* Hero links: eigene Rasterspalte (mind. 360 px), Coco und Notiz haben eigene Spalten → Text und Kennzahlen laufen nie in Coco (Befund 5).
   ⚠️ Kein container-type hier: --u rechnet mit cqw und würde sich sonst auf diese Spalte statt auf die Seite beziehen. */
.a-hero{grid-area:hero;align-self:start;margin-top:calc(var(--u)*13);display:flex;flex-direction:column;min-width:0}
.a-augenbraue{font-size:calc(var(--u)*12.5);font-weight:500;letter-spacing:.22em;color:var(--advent-gold);text-transform:uppercase}
.a-hero h1{margin-top:calc(var(--u)*14);font-family:'Playfair Display',Georgia,serif;font-weight:700;font-size:calc(var(--u)*74);line-height:.98;color:var(--advent-cream);letter-spacing:-.01em}
.a-hero h1 span{display:block;margin-top:calc(var(--u)*-2);font-size:calc(var(--u)*56);line-height:1.05;color:#f0cf7e}
.a-lede{margin-top:calc(var(--u)*18);font-size:calc(var(--u)*16.5);line-height:1.5;color:var(--advent-text)}
.a-lede b{color:#fff}
/* Kennzahlen: drei Spalten ohne Umbruch; sie schrumpfen mit der Bühne (bis 1280 px), statt abzuschneiden. Maße in em (1em = 14 px im Mockup). */
.a-zahlen{list-style:none;display:flex;align-items:center;margin-top:calc(var(--u)*26);font-size:calc(var(--u)*14)}
.a-zahl{display:flex;align-items:center;gap:.857em;white-space:nowrap}
.a-zahl+.a-zahl{position:relative;margin-left:2.9em}
.a-zahl+.a-zahl::before{content:"";position:absolute;left:-1.45em;top:50%;width:1px;height:3.143em;margin-top:-1.571em;background:rgba(255,255,255,.3)}
.a-zahl-icon{width:2.857em;height:2.857em;border-radius:50%;border:.107em solid #e9c66e;display:flex;align-items:center;justify-content:center;color:var(--advent-gold);flex:none}
.a-zahl-icon svg{width:1.43em;height:1.43em}
.a-zahl-text{display:block}
.a-zahl-text b{display:block;font-size:1.571em;color:#fff;line-height:1.1}
.a-zahl-text span{display:block;font-size:1em;color:var(--advent-text);line-height:1.3}
.a-knoepfe{display:flex;flex-wrap:wrap;gap:calc(var(--u)*16);margin-top:calc(var(--u)*28)}
.a-gold,.a-linie{display:inline-flex;align-items:center;gap:calc(var(--u)*10);height:calc(var(--u)*44);padding:0 calc(var(--u)*26);border-radius:999px;font-size:calc(var(--u)*17);cursor:pointer;white-space:nowrap}
.a-gold{background:linear-gradient(180deg,#f6dc8e,var(--advent-gold-deep));color:#1a1a1a;font-weight:700;box-shadow:0 calc(var(--u)*10) calc(var(--u)*26) rgba(246,220,142,.25)}
.a-gold{text-decoration:none}
.a-gold svg,.a-linie svg{width:calc(var(--u)*18);height:calc(var(--u)*18);flex:none}
.a-linie{gap:calc(var(--u)*12);color:#f1eee6;font-weight:600;border:calc(var(--u)*1.5) solid rgba(255,255,255,.55);background:rgba(8,14,48,.6)}
.a-linie svg{width:calc(var(--u)*16);height:calc(var(--u)*16)}

/* Coco: ragt mit den Füßen in die Welt (negativer Rand unten). Der Platzhalter ist nicht freigestellt → weicher Rand per Maske, bis coco-santa.webp da ist. */
/* Coco steht HINTER dem Reiseweg (Thommy 31.10.): die Füße ragen in die Landschaft, nach unten läuft er zu einem blassen Wasserzeichen aus – die Türchen stehen im Vordergrund. */
.a-coco{grid-area:coco;align-self:end;justify-self:center;width:auto;height:calc(var(--u)*470);max-width:none;margin-bottom:calc(var(--u)*-165);z-index:1;-webkit-mask-image:linear-gradient(180deg,#000 50%,rgba(0,0,0,.3) 76%,rgba(0,0,0,.1) 100%);mask-image:linear-gradient(180deg,#000 50%,rgba(0,0,0,.3) 76%,rgba(0,0,0,.1) 100%)}
.a-coco-tmp{-webkit-mask-image:radial-gradient(ellipse 58% 54% at 50% 46%,#000 62%,transparent 100%);mask-image:radial-gradient(ellipse 58% 54% at 50% 46%,#000 62%,transparent 100%)}
/* Handschrift rechts neben Coco, eigene Spalte → überlappt weder Coco noch die Heute-Karte */
.a-notiz{grid-area:notiz;align-self:end;width:calc(var(--u)*132);margin-bottom:calc(var(--u)*8);transform:rotate(-8deg);font-family:'Caveat',cursive;font-weight:600;font-size:calc(var(--u)*22);line-height:1.15;color:#f3ecdc;text-shadow:0 calc(var(--u)*1) calc(var(--u)*4) rgba(4,8,30,.95),0 calc(var(--u)*2) calc(var(--u)*12) rgba(0,0,0,.8);z-index:3}

/* Heute-Karte */
.a-heute{grid-area:heute;align-self:start;border-radius:calc(var(--u)*20);overflow:hidden;background:#0f1a4d;box-shadow:0 calc(var(--u)*24) calc(var(--u)*60) rgba(0,0,0,.55),inset 0 0 0 calc(var(--u)*1) rgba(255,255,255,.08)}
/* Ohne Bild: weicher Nachtblau-Verlauf mit Stern – nie ein leeres Rechteck mit Play-Knopf */
.a-deko-stern{position:absolute;left:50%;top:46%;width:calc(var(--u)*44);height:calc(var(--u)*44);transform:translate(-50%,-50%);color:rgba(243,213,138,.55);filter:drop-shadow(0 0 12px rgba(243,213,138,.6))}
.a-plakette{align-self:flex-start;display:inline-flex;align-items:center;height:calc(var(--u)*26);padding:0 calc(var(--u)*12);border-radius:999px;background:var(--advent-gold);color:#1a1a1a;font-size:calc(var(--u)*12);line-height:calc(var(--u)*26);font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.a-heute-text{display:flex;flex-direction:column;gap:calc(var(--u)*6);min-width:0}
/* Heute-Karte als kompakter Teaser (Thommy 31.10.): links das runde Ortsbild des Tages mit goldenem Ring, rechts Plakette, Datum, Titel, Ort, Dauer und der Knopf. */
.a-heute{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:calc(var(--u)*22);padding:calc(var(--u)*24)}
.a-heute-bild{position:relative;overflow:hidden;width:calc(var(--u)*124);height:calc(var(--u)*124);border-radius:50%;background:radial-gradient(ellipse at 50% 30%,#2a3a80 0%,#0a1030 70%);box-shadow:0 0 0 calc(var(--u)*3) rgba(255,236,180,.95),0 0 calc(var(--u)*26) rgba(255,214,122,.45)}
.a-heute-bild img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;max-width:none}
.a-heute-datum{font-size:calc(var(--u)*15);font-weight:500;color:var(--advent-gold)}
.a-heute-text h2{font-size:calc(var(--u)*22);font-weight:700;color:#fff;line-height:1.2}
.a-heute-meta{display:flex;flex-wrap:wrap;align-items:center;gap:calc(var(--u)*8) calc(var(--u)*26);margin-top:calc(var(--u)*10);font-size:calc(var(--u)*14);color:#e6e3f0}
.a-meta{display:inline-flex;align-items:center;gap:calc(var(--u)*8);min-width:0;white-space:nowrap}
.a-meta svg{flex:none}
.a-link{margin-left:auto;display:inline-flex;align-items:center;gap:calc(var(--u)*8);padding:0;color:#fff;font-size:calc(var(--u)*15);font-weight:700;white-space:nowrap}
.a-link svg{width:calc(var(--u)*16);height:calc(var(--u)*16)}

/* Landschaft mit Reiseweg */
.a-band-box{grid-area:band;margin:0 calc(var(--u)*-60);z-index:2}
.a-band-scroll{position:relative;aspect-ratio:1920/420}
.a-fortschritt{display:none}
.a-band{position:relative;width:100%;height:100%}
.a-band>*{position:absolute}
/* Welt (Nachbesserung 31.10.): Panorama nur, wenn geliefert (advent-weg.mjs bindet es dann ein); sonst trägt dieser Verlauf.
   Pfad, Schilder und Türchen liegen in Prozent der Welt darüber. --advent-d = Türchen-Durchmesser (72 px bei 1672 px Breite). */
.a-welt{container-type:inline-size;--advent-d:4.3062cqw;background:linear-gradient(180deg,rgba(11,21,64,0) 0%,rgba(11,21,64,.18) 100%)}
.a-welt-bild{inset:0;width:100%;height:100%;object-fit:cover;max-width:none}
.a-welt-hoch,.a-pfad-hoch{display:none}
.a-pfad{inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;filter:drop-shadow(0 0 3px rgba(255,226,150,.95)) drop-shadow(0 0 10px rgba(255,200,100,.55))}
.a-pfad path{fill:none;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.a-pfad-schein{stroke:rgba(255,214,122,.35);stroke-width:9}
.a-pfad-linie{stroke:#fff1c4;stroke-width:2.5}
/* Schilder (Wunsch Thommy 31.10.): richtiges Holzschild mit Pfahl. Das Brett (span) hat Maserung, Nägel und eine Schneehaube und dreht sich leicht;
   der Pfahl (::before) bleibt gerade und steht in einem Schneehaufen (::after). Text ist immer DOM. Geliefertes Bild (a-schild-bild) ersetzt das CSS-Brett. */
.a-schild{left:calc(var(--x)*1%);top:calc(var(--y)*1%);width:calc(var(--w)*1%);transform:translate(-50%,-50%);display:block;font-family:'Inter',system-ui,sans-serif;font-weight:700;font-size:max(11px,calc(var(--advent-d)*.22));line-height:1.12;color:#f6e4b4;text-align:center;pointer-events:none;z-index:1;--advent-pfahl:125%}
.a-schild::before{content:"";position:absolute;left:50%;top:70%;width:max(.95em,15%);height:var(--advent-pfahl);transform:translateX(-50%);z-index:-1;border-radius:.12em .12em 0 0;background:repeating-linear-gradient(90deg,rgba(0,0,0,.2) 0 1px,transparent 1px 5px),linear-gradient(90deg,#4a2f19,#8a5d33 42%,#5a3a1f 70%,#3f2814);box-shadow:.1em 0 .3em rgba(0,0,0,.55)}
.a-schild::after{content:"";position:absolute;left:50%;top:calc(70% + var(--advent-pfahl) - .6em);width:max(3em,62%);height:1em;transform:translateX(-50%);z-index:-1;background:radial-gradient(ellipse at 50% 58%,#fff 0,#e3ebfb 52%,rgba(227,235,251,0) 71%)}
.a-schild>span{display:block;position:relative;transform:rotate(var(--r));padding:.62em 1.05em .72em;border-radius:.32em;border:.11em solid #2a190c;
  background:radial-gradient(circle at .6em .6em,#e6cf9b 0 .1em,#4c3a1d .11em .17em,transparent .18em),radial-gradient(circle at calc(100% - .6em) .6em,#e6cf9b 0 .1em,#4c3a1d .11em .17em,transparent .18em),
    repeating-linear-gradient(0deg,rgba(0,0,0,.15) 0 1px,transparent 1px 7px),repeating-linear-gradient(0deg,rgba(255,235,190,.07) 0 2px,transparent 2px 13px),linear-gradient(180deg,#98683c,#744a28 55%,#5d3c1f);
  box-shadow:inset 0 .07em 0 rgba(255,222,165,.4),inset 0 -.16em .32em rgba(0,0,0,.38),0 .38em .8em rgba(0,0,0,.5);
  text-shadow:0 .06em .12em rgba(0,0,0,.85),0 -.03em 0 rgba(255,228,175,.22)}
.a-schild>span::before{content:"";position:absolute;left:3%;right:7%;top:-.58em;height:.74em;border-radius:.8em .9em .25em .25em / 1em 1em .25em .25em;background:linear-gradient(180deg,#fff,#dbe6fa);box-shadow:inset 0 -.12em .16em rgba(120,150,210,.55),0 .05em .12em rgba(0,0,0,.3)}
.a-schild-bild::before,.a-schild-bild::after,.a-schild-bild>span::before{display:none}
.a-schild-bild>span{background:center/contain no-repeat;border:0;box-shadow:none;text-shadow:0 1px 3px rgba(0,0,0,.7);padding:1.4em .8em 2.2em}
.a-schild-start.a-schild-bild>span{background-image:url('../advent/schild-start.webp')}
.a-schild-ende.a-schild-bild>span{background-image:url('../advent/schild-ende.webp')}
.a-weg{inset:0;list-style:none;z-index:2}
/* Türchen-Zustände (Auftrag 31.10. §2.3): genau EINE Zahl je Tür. Maße in em = Durchmesser/3. */
.a-pos{position:absolute;left:calc(var(--x)*1%);top:calc(var(--y)*1%);width:var(--advent-d);height:var(--advent-d);font-size:calc(var(--advent-d)/3);transform:translate(-50%,-50%);transition:opacity .25s}
.a-pos.a-geschenk{width:calc(var(--advent-d)*1.14);height:calc(var(--advent-d)*1.14)}
.a-tuer{position:absolute;inset:0;width:100%;height:100%;padding:0;border-radius:50%;font-size:1em}
.a-tuer:disabled{cursor:default}
.a-tuer:focus-visible{outline:3px solid var(--advent-fokus);outline-offset:3px;border-radius:50%}
.a-geschenk .a-tuer:focus-visible{border-radius:.6em}
.a-ring{position:absolute;inset:0;border-radius:50%;overflow:hidden;background:radial-gradient(circle at 50% 35%,#24357a,#0b1340);box-shadow:0 0 0 .125em rgba(255,236,180,.95),0 0 .9em rgba(255,214,122,.75),0 .33em .75em rgba(0,0,0,.45)}
.a-ring img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .25s;max-width:none}
.a-tuer:hover:not(:disabled) .a-ring img{transform:scale(1.08)}
.a-sperre{position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle at 50% 32%,#22327a,#0b1340 72%);box-shadow:0 0 0 .083em rgba(243,213,138,.45),inset 0 0 .75em rgba(0,0,0,.55),0 .25em .6em rgba(0,0,0,.4);display:flex;align-items:center;justify-content:center;font-weight:700;color:var(--advent-gold);font-size:1em;line-height:1}
.a-geschenk .a-ring,.a-geschenk .a-sperre{border-radius:.6em}
/* Gesperrtes Türchen mit Coco (Entscheidung Thommy 31.10.): Coco nur als blasses Wasserzeichen auf dem dunklen Grund, die Nummer bleibt klar lesbar. */
.a-sperre.a-mit-coco{isolation:isolate;overflow:hidden;text-shadow:0 .04em .2em rgba(4,8,30,.85)}
.a-coco-tuer{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;z-index:-1;opacity:.32;filter:saturate(.6)}
.a-geschenk .a-ring{box-shadow:0 0 0 .125em rgba(255,236,180,.95),0 0 1.25em rgba(255,214,122,.85)}
.a-zahlmarke{position:absolute;left:-.3em;bottom:-.3em;min-width:1.9em;height:1.9em;padding:0 .25em;border-radius:999px;background:#0f1a4a;border:.11em solid #f2f4ff;color:#fff;font-size:.75em;font-weight:700;line-height:1;display:flex;align-items:center;justify-content:center;box-shadow:0 .2em .5em rgba(0,0,0,.45)}
.a-stern{position:absolute;right:-.6em;top:-.7em;width:1.3em;height:1.3em;color:#fff6c9;filter:drop-shadow(0 0 10px #ffe9a3);pointer-events:none}
/* Heute: wie offen, rote Plakette, ein Schein beim Laden (einmal, kein Dauerpulsieren). */
.a-pos.a-heutig .a-zahlmarke{background:var(--advent-rot);border-color:#ffd4d4}
.a-pos.a-heutig::before{content:"";position:absolute;inset:-.9em;border-radius:50%;background:radial-gradient(circle,rgba(255,214,122,.65),rgba(255,214,122,0) 68%);opacity:.35;animation:a-glow 2.4s ease-out 1 both;pointer-events:none}
@keyframes a-glow{0%{opacity:0;transform:scale(.7)}40%{opacity:1;transform:scale(1.12)}100%{opacity:.35;transform:none}}
.a-pos.a-gedimmt{opacity:.4}

/* Unterer Bereich: Themen | Geschichte des Tages (Breiten wie Mockup 738 : 856) */
.a-unten{grid-area:unten;display:grid;grid-template-columns:738fr 856fr;gap:calc(var(--u)*20);margin:calc(var(--u)*20) calc(var(--u)*-38) 0;align-items:start}
.a-themen,.a-tag{border-radius:calc(var(--u)*18);background:var(--advent-panel);box-shadow:inset 0 0 0 calc(var(--u)*1) rgba(255,255,255,.07)}
.a-themen{padding:calc(var(--u)*16) calc(var(--u)*20) calc(var(--u)*22)}
.a-themen-kopf{display:flex;align-items:center;justify-content:space-between;gap:calc(var(--u)*12);margin-bottom:calc(var(--u)*14)}
.a-themen h2{font-size:calc(var(--u)*20);font-weight:700;color:#fff}
.a-filter-weg{flex:none;display:inline-flex;align-items:center;gap:calc(var(--u)*7);height:calc(var(--u)*30);padding:0 calc(var(--u)*14);border-radius:999px;border:calc(var(--u)*1) solid var(--advent-chip-rand);background:#141f55;color:#fff;font-size:calc(var(--u)*12.5);font-weight:600;cursor:pointer;white-space:nowrap}
.a-filter-weg:hover:not(:disabled){border-color:var(--advent-gold);color:var(--advent-gold)}
.a-filter-weg:disabled{opacity:.4;cursor:default}
.a-filter-weg:focus-visible{outline:3px solid var(--advent-fokus);outline-offset:2px}
.a-kacheln{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:calc(var(--u)*12) calc(var(--u)*16)}
.a-kachel{display:flex;flex-direction:column;gap:calc(var(--u)*8);width:100%;padding:0;text-align:left}
.a-kachel-bild{position:relative;display:block;width:100%;aspect-ratio:170/122;border-radius:calc(var(--u)*12);overflow:hidden;box-shadow:0 calc(var(--u)*6) calc(var(--u)*16) rgba(0,0,0,.4)}
.a-kachel-bild img{width:100%;height:100%;object-fit:cover;display:block;max-width:none}
.a-kachel-icon{position:absolute;left:calc(var(--u)*10);bottom:calc(var(--u)*10);width:calc(var(--u)*28);height:calc(var(--u)*28);border-radius:50%;background:var(--advent-gold);color:#1a1a1a;display:flex;align-items:center;justify-content:center}
.a-kachel-icon svg{width:calc(var(--u)*15);height:calc(var(--u)*15)}
.a-kachel b{font-size:calc(var(--u)*15);font-weight:700;color:#fff;line-height:1.2}
.a-kachel>span:last-child{font-size:calc(var(--u)*12.5);color:var(--advent-text2);line-height:1.35}
.a-kachel[aria-pressed="true"] .a-kachel-bild{box-shadow:0 0 0 2px var(--advent-gold),0 calc(var(--u)*6) calc(var(--u)*16) rgba(0,0,0,.4)}

/* Geschichte des Tages: Bild 40 % · Text 60 %, darunter die drei Karten als eigene Zeile (nie absolut, nichts überlappt) */
.a-tag{display:grid;grid-template-columns:repeat(15,minmax(0,1fr));gap:calc(var(--u)*14) calc(var(--u)*18);padding:calc(var(--u)*18)}
/* Tageskarte links: erweiterte Infos aus dem Film statt eines Bildes (Thommy 31.10.) */
.a-tag-nav{grid-column:1/-1;display:flex;align-items:center;gap:calc(var(--u)*12)}
.a-tag-nav[hidden]{display:none}
.a-tag-pfeil{flex:none;width:calc(var(--u)*34);height:calc(var(--u)*34);border-radius:50%;display:inline-flex;align-items:center;justify-content:center;border:calc(var(--u)*1) solid var(--advent-chip-rand);background:#141f55;color:#fff;cursor:pointer}
.a-tag-pfeil:hover:not(:disabled){border-color:var(--advent-gold);color:var(--advent-gold)}
.a-tag-pfeil:disabled{opacity:.3;cursor:default}
.a-tag-pfeil:focus-visible{outline:3px solid var(--advent-fokus);outline-offset:2px}
.a-tag-stand{flex:1 1 auto;min-width:0;font-size:calc(var(--u)*12.5);letter-spacing:.04em;color:var(--advent-text2);text-align:center}
.a-tag-info{grid-column:1/7;position:relative;border-radius:calc(var(--u)*14);padding:calc(var(--u)*46) calc(var(--u)*18) calc(var(--u)*16);min-height:calc(var(--u)*150);background:radial-gradient(ellipse at 50% 20%,#2a3a80 0%,#0a1030 78%)}
.a-tag-info h3{font-size:calc(var(--u)*12);font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--advent-gold);margin-bottom:calc(var(--u)*8)}
.a-tag-punkte{list-style:none;display:flex;flex-direction:column;gap:calc(var(--u)*8)}
.a-tag-punkte li{position:relative;padding-left:calc(var(--u)*17);font-size:calc(var(--u)*13);line-height:1.4;color:var(--advent-text)}
.a-tag-punkte li::before{content:"✦";position:absolute;left:0;top:calc(var(--u)*2);font-size:calc(var(--u)*11);color:var(--advent-gold)}
.a-tag-datum{position:absolute;left:calc(var(--u)*14);top:calc(var(--u)*10);z-index:1;height:calc(var(--u)*26);padding:0 calc(var(--u)*12);border-radius:999px;background:var(--advent-rot);color:#fff;font-size:calc(var(--u)*13);font-weight:600;line-height:calc(var(--u)*26)}
.a-tag-text{grid-column:7/16;display:flex;flex-direction:column;gap:calc(var(--u)*8);min-width:0}
.a-tag-text h2{font-size:calc(var(--u)*20);font-weight:700;color:#fff;line-height:1.25}
.a-tag-text>p:not(.a-chips){font-size:calc(var(--u)*14);line-height:1.45;color:var(--advent-text)}
.a-chips{display:flex;flex-wrap:wrap;gap:calc(var(--u)*8) calc(var(--u)*10);margin-top:calc(var(--u)*4)}
.a-chip{display:inline-flex;align-items:center;gap:calc(var(--u)*7);min-height:calc(var(--u)*30);padding:calc(var(--u)*4) calc(var(--u)*12);border-radius:999px;background:var(--advent-chip);border:calc(var(--u)*1) solid var(--advent-chip-rand);color:#e6e3f0;font-size:calc(var(--u)*12.5);font-weight:500}
.a-chip svg{flex:none}
#a-mini-tipp{grid-column:1/8}
#a-mini-app{grid-column:8/16}
.a-mini{grid-column:span 5;min-height:calc(var(--u)*70);border-radius:calc(var(--u)*14);display:flex;align-items:center;gap:calc(var(--u)*12);padding:calc(var(--u)*10) calc(var(--u)*14);text-align:left;text-decoration:none}
.a-mini-text{display:flex;flex-direction:column;gap:calc(var(--u)*3);flex:1 1 auto;min-width:0}
.a-mini-text b{font-size:calc(var(--u)*12.5);font-weight:700}
.a-mini-text span{font-size:calc(var(--u)*11.5);line-height:1.3}
.a-mini svg:first-child{width:calc(var(--u)*30);height:calc(var(--u)*30);flex:none}
.a-chevron{width:calc(var(--u)*14);height:calc(var(--u)*14);flex:none}
.a-hell{background:#f6f3ea;color:#1c1c2a}.a-hell .a-mini-text span{color:#4a4c60}
.a-dunkel{background:#141f55;color:#fff;border:calc(var(--u)*1) solid var(--advent-chip-rand)}.a-dunkel .a-mini-text span{color:var(--advent-text2)}

.a-hinweis{position:relative;z-index:1;max-width:1100px;margin:0 auto;padding:26px 24px 4px;text-align:center;font-size:13px;line-height:1.5;color:var(--advent-text2)}
.a-hinweis+.a-hinweis{padding-top:0;padding-bottom:36px}

/* ---------- Story-Karte (echte Pixel, nicht skaliert) ---------- */
.a-overlay{position:fixed;inset:0;z-index:200;display:flex;padding:24px;overflow-y:auto;background:rgba(3,6,22,.8);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);font-family:'Inter',system-ui,sans-serif;color:#fff}
.a-karte{display:grid;grid-template-columns:360px minmax(0,1fr);width:1040px;max-width:100%;margin:auto;background:#0b1232;border-radius:26px;box-shadow:0 40px 120px rgba(0,0,0,.7),inset 0 0 0 1px rgba(228,195,114,.25);animation:a-steigen .3s ease-out}
.a-karte:focus{outline:none}
@keyframes a-steigen{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.a-karte a{color:#f3e2a8}.a-karte a:hover{color:#fff}
.a-s-links{padding:28px 0 28px 28px;display:flex;flex-direction:column;gap:10px}
.a-s-player{position:relative;aspect-ratio:9/16;border-radius:20px;overflow:hidden;background:radial-gradient(ellipse at 50% 30%,#2a3a80 0%,#0a1030 70%);display:flex;align-items:center;justify-content:center;box-shadow:0 20px 50px rgba(0,0,0,.6)}
.a-s-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;max-width:none;opacity:.55;filter:blur(2px) saturate(1.1)}
.a-s-poster.a-echt{opacity:1;filter:none}
.a-s-schleier{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.1) 40%,rgba(5,8,26,.9) 100%);pointer-events:none}
.a-s-folgt{position:absolute;top:16px;left:16px;font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--advent-gold);background:rgba(5,8,26,.6);padding:6px 10px;border-radius:999px}
.a-s-play{position:relative;width:80px;height:80px;border-radius:50%;background:var(--advent-gold);display:flex;align-items:center;justify-content:center;box-shadow:0 0 40px rgba(243,213,138,.6)}
.a-s-fuss{position:absolute;left:16px;right:16px;bottom:16px;display:flex;justify-content:space-between;font-size:12px;color:#cfc8b6;pointer-events:none}
.a-s-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#000}
.a-s-hinweis{font-size:12px;color:#8089ad;text-align:center}
.a-s-rechts{padding:32px 32px 28px 28px;display:flex;flex-direction:column;gap:16px;min-width:0}
.a-s-kopf{display:flex;justify-content:space-between;gap:16px;align-items:flex-start}
.a-s-kopf>div{display:flex;flex-direction:column;gap:8px;min-width:0}
.a-s-augenbraue{font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--advent-gold)}
.a-s-kopf h2{font-family:'Playfair Display',Georgia,serif;font-weight:700;font-size:38px;line-height:1.08;color:var(--advent-cream);overflow-wrap:anywhere}
.a-geist{display:inline-flex;align-items:center;justify-content:center;background:transparent;border:1px solid #3a4780;color:#e9e2d0;border-radius:999px;padding:9px 16px;font-size:13px;font-weight:500;cursor:pointer;text-decoration:none;white-space:nowrap}
.a-karte a.a-geist{color:#e9e2d0}
.a-geist:hover:not(:disabled){border-color:var(--advent-gold)}
.a-geist:disabled{opacity:.35;cursor:default}
.a-s-zu{flex:none;width:44px;height:44px;padding:0}
.a-s-abzeichen{display:flex;gap:8px;flex-wrap:wrap}
.a-badge{display:inline-block;font-size:11px;font-weight:600;line-height:1;letter-spacing:.04em;text-transform:uppercase;padding:7px 10px;border-radius:999px}
.a-s-teaser{font-size:16px;line-height:1.6;color:#d9d4c7}
.a-s-wissen{display:flex;flex-direction:column;gap:10px;padding:16px 18px;border-radius:16px;background:#0f1740;border:1px solid #1e2a63}
.a-s-wissen h3,.a-s-info h3{font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--advent-gold)}
.a-s-wissen-zeile{display:flex;gap:10px;font-size:14px;line-height:1.5;color:#cfc8b6}
.a-s-wissen-zeile>span:first-child{color:var(--advent-gold)}
.a-s-info{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.a-s-info>div{padding:12px 14px;border-radius:14px;background:#0f1740;min-width:0}
.a-s-info h3{font-size:11px;color:#9aa3c9}
.a-s-info p{font-size:14px;color:#f6f0e1;margin-top:4px;overflow-wrap:anywhere}
.a-s-info a{font-weight:500}
.a-s-fuss-zeile{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:auto;padding-top:4px;flex-wrap:wrap}
.a-s-nav{display:flex;gap:8px;flex-wrap:wrap}

@media (prefers-reduced-motion:reduce){
  .a-flocke,.a-karte,.a-pos.a-heutig::before{animation:none}
  .a-schnee,.a-kappe,.a-wehe{display:none}
  .a-ring img,.a-pos{transition:none}
}

/* ---------- Tablet und Handy (Phase D) ----------
 * Unter 1280 px gibt es kein Mockup. Vorgabe: dieselben Bausteine, Farben und Reihenfolge, nichts weglassen.
 * Die Bühne wird zum Raster aus echten Pixeln (--u = 1px); nur die Landschaft mit den Türchen behält ihre Skalierung (Tablet quer)
 * bzw. ihre volle Breite von 1672 px, die man seitlich wischt (Tablet hoch, Handy). */
@media (max-width:1279px){
  .advent{--u:1px}
  .a-unten{display:contents}
  .advent-buehne{width:auto;height:auto;overflow:hidden;display:grid;gap:28px;padding:92px 32px 8px;
    grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"hero coco" "hero notiz" "heute heute" "band band" "themen themen" "tag tag"}
  .advent-buehne>*{position:relative;left:auto;top:auto}
  .advent-buehne>.a-sterne,.advent-buehne>.a-schnee{position:absolute;inset:0;width:100%;height:100%}
  .a-hero{grid-area:hero;width:auto;align-self:center}
  .a-coco{grid-area:coco;justify-self:end;align-self:end;width:auto;height:408px;margin-bottom:-110px}
  .a-notiz{grid-area:notiz;align-self:start;justify-self:center;margin:-6px 0 0;width:auto;transform:rotate(-4deg)}
  .a-notiz br{display:none}
  .a-hero{margin-top:0}
  .a-heute{padding:18px;gap:16px}
  .a-heute-bild{width:88px;height:88px}
  .a-heute-meta{flex-wrap:wrap;gap:10px 26px}
  /* Landschaft: Tablet quer = proportional skaliert, Treffer-Fläche der Türchen auf mindestens 48 px angehoben */
  .a-band-box{margin:0 -32px}
  .a-tuer::after{content:"";position:absolute;inset:-8px;border-radius:50%}
  .a-themen{grid-area:themen}
  .a-tag{grid-area:tag}
}

@media (max-width:1023px){
  .advent-buehne{grid-template-columns:minmax(0,1fr);grid-template-areas:"hero" "heute" "band" "themen" "tag";gap:24px;padding:88px 16px 8px}
  .a-hero{z-index:1;text-shadow:0 1px 8px rgba(6,11,38,.9)}
  .advent-buehne::before{bottom:auto;height:1100px;background-image:linear-gradient(180deg,rgba(6,11,38,.5) 0%,rgba(6,11,38,.3) 50%,rgba(6,11,38,.4) 100%),url(/assets/advent/hintergrund.webp);background-position:0 0,70% 0;-webkit-mask-image:linear-gradient(#000 62%,transparent);mask-image:linear-gradient(#000 62%,transparent)}
  .advent-buehne>.a-coco{position:absolute;right:8px;top:84px;width:auto;height:168px;z-index:0;grid-area:auto;opacity:.9;margin-bottom:0;-webkit-mask-image:none;mask-image:none}
  .advent-buehne>.a-notiz{display:none}
  .a-hero h1{font-size:clamp(44px,12vw,74px)}
  .a-hero h1 span{font-size:clamp(33px,9vw,56px)}
  .a-lede{font-size:16px}
  .a-zahlen{flex-wrap:wrap;gap:14px 20px}
  .a-zahl+.a-zahl{margin-left:0}
  .a-zahl+.a-zahl::before{display:none}
  .a-knoepfe{flex-wrap:wrap}
  .a-gold,.a-linie{flex:1 1 auto;justify-content:center;font-size:16px;white-space:normal;text-align:center}
  /* Landschaft: das Desktop-Band (1672 px) bleibt ganz, man wischt seitlich; Rasten auf das Türchen, Fortschrittsbalken darunter */
  .a-band-box{margin:0 -16px;--u:1px}
  .a-band-scroll{aspect-ratio:auto;height:330px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;scrollbar-width:none}
  .a-band-scroll::-webkit-scrollbar{display:none}
  .a-band{width:1440px;height:315px;margin-top:6px}
  .a-pos{scroll-snap-align:center}
  .a-tuer::after{inset:-2px}
  .a-fortschritt{display:block;position:relative;height:4px;margin:6px 16px 0;border-radius:999px;background:rgba(255,255,255,.16)}
  .a-fortschritt span{position:absolute;top:0;bottom:0;left:0;width:30%;border-radius:inherit;background:var(--advent-gold)}
  .a-band-scroll:focus-visible{outline:3px solid var(--advent-fokus);outline-offset:-3px;border-radius:0}
  .a-kacheln{grid-template-columns:repeat(2,minmax(0,1fr))}
  .a-tag{grid-template-columns:minmax(0,1fr)}
  .a-tag-info,.a-tag-text,.a-mini,#a-mini-tipp,#a-mini-app{grid-column:1/-1}
  .a-tag-pfeil{width:44px;height:44px}
  .a-filter-weg{height:44px;padding:0 16px;font-size:13px}
  .a-themen-kopf{flex-wrap:wrap}
  .a-tag-stand{font-size:13px}
  .a-tag-info{min-height:0}
}

/* Handy (< 768 px): eigener, senkrechter Reiseweg (Entscheidung Thommy 31.10.) – sechs Windungen à vier Türchen, Türchen ≥ 48 px. */
@media (max-width:767px){
  .advent-buehne::before{background-image:linear-gradient(180deg,rgba(6,11,38,.5) 0%,rgba(6,11,38,.3) 50%,rgba(6,11,38,.4) 100%),url(/assets/advent/hintergrund-klein.webp);height:900px}
  .a-band-box{margin:0 -16px}
  .a-band-scroll{height:auto;overflow:visible;scroll-snap-type:none}
  .a-band{width:100%;height:auto;aspect-ratio:430/1500;margin-top:0;--advent-d:14.884cqw}
  .a-welt-quer,.a-pfad-quer{display:none}
  .a-welt-hoch,.a-pfad-hoch{display:block}
  .a-pos{left:calc(var(--mx)*1%);top:calc(var(--my)*1%);scroll-snap-align:none}
  .a-schild{left:calc(var(--mx)*1%);top:calc(var(--my)*1%);width:calc(var(--mw)*1%);transform:translate(-50%,-50%);font-size:calc(var(--advent-d)*.27);--advent-pfahl:60%}
  .a-schild>span{transform:rotate(var(--mr))}
  .a-fortschritt{display:none}
  .a-tuer::after{inset:-4px}
  .a-wehe{height:6cqw}
  .a-kacheln{grid-template-columns:minmax(0,1fr);gap:12px}
  .a-kachel{display:grid;grid-template-columns:118px minmax(0,1fr);grid-template-rows:auto auto;column-gap:14px;row-gap:2px;align-items:center}
  .a-kachel-bild{grid-row:1/3}
  .a-kachel b{align-self:end}
  .a-kachel>span:last-child{align-self:start}
}

@media (max-width:700px){
  .a-heute-text h2{font-size:20px}
  .a-link{margin-left:0}
}

/* Story-Karte unter 900 px: Vollbild, Film oben (höchstens 70 vh), Text darunter, Schließen oben rechts, Vor/Zurück als feste Leiste unten */
@media (max-width:899px){
  .a-overlay{padding:0;background:#0b1232;-webkit-backdrop-filter:none;backdrop-filter:none}
  .a-karte{display:flex;flex-direction:column;width:100%;min-height:100%;margin:0;border-radius:0;box-shadow:none;animation:none}
  .a-s-links{padding:56px 16px 0;align-items:center}
  .a-s-player{width:min(100%,calc(70vh*9/16));max-height:70vh}
  .a-s-hinweis{margin-top:2px}
  .a-s-rechts{padding:16px 16px 0;flex:1 1 auto}
  .a-s-kopf{gap:12px}
  .a-s-kopf h2{font-size:30px}
  .a-s-zu{position:fixed;top:10px;right:10px;z-index:3;background:rgba(11,18,50,.85)}
  .a-s-info{grid-template-columns:minmax(0,1fr)}
  .a-s-fuss-zeile{position:sticky;bottom:0;z-index:2;margin:auto -16px 0;padding:10px 16px calc(10px + env(safe-area-inset-bottom));background:#0b1232;border-top:1px solid #1e2a63}
  .a-geist{padding:11px 16px;min-height:44px}
}