/* AP Events / babushka's: Nachtblau, Champagner, große Unbounded-Schrift, Bewegung beim Scrollen.
   Scroll-Werte setzt site.js als CSS-Variablen: --h (Hero), --v (pro [data-scroll]), --p (Mitternacht), --seite, --tempo.
   Ohne JS und bei „Bewegung reduzieren“ steht alles ruhig und vollständig sichtbar. */

/* Schriften lokal (OFL): Manrope für Text, Unbounded für Überschriften, Cormorant kursiv für Akzente.
   „Unbounded Kontur“ ist Unbounded 900 mit verschmolzenen Teilformen, nur für Umriss-Schrift (text-stroke). */
@font-face{font-family:'Manrope';font-style:normal;font-weight:200 800;font-display:swap;src:url(../fonts/manrope-cyrillic.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Manrope';font-style:normal;font-weight:200 800;font-display:swap;src:url(../fonts/manrope-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:'Cormorant Garamond';font-style:italic;font-weight:500;font-display:swap;src:url(../fonts/cormorant-italic-cyrillic.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:500;font-display:swap;src:url(../fonts/cormorant-italic-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:'Unbounded';font-style:normal;font-weight:200 900;font-display:swap;src:url(../fonts/unbounded-cyrillic-ext-497409.woff2) format('woff2');unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}
@font-face{font-family:'Unbounded';font-style:normal;font-weight:200 900;font-display:swap;src:url(../fonts/unbounded-cyrillic-cb504d.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Unbounded';font-style:normal;font-weight:200 900;font-display:swap;src:url(../fonts/unbounded-latin-ext-936fcc.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-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Unbounded';font-style:normal;font-weight:200 900;font-display:swap;src:url(../fonts/unbounded-latin-37e641.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:'Unbounded Kontur';font-style:normal;font-weight:100 1000;font-display:swap;src:url(../fonts/unbounded-kontur.woff2) format('woff2')}

/* Raster: Abstände in 4-px-Stufen, Zielgrößen mind. 44 px auf Touch */
:root{
  --nacht:#0b0d1d; --tinte:#14172f; --tinte2:#1a1e3c; --linie:#272b4f; --kante:#4b5084;
  --text:#f4f0e6; --nebel:#c9cbe0; --leise:#9a9dbd;
  --champ:#e4c88d; --gold:#c9a15a; --funke:#ff5b3a;
  --display:"Unbounded", "Arial Black", system-ui, sans-serif;
  --body:"Manrope", -apple-system, "Segoe UI", Roboto, sans-serif;
  --serif:"Cormorant Garamond", Georgia, serif;
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:64px; --s9:96px;
  --gut:clamp(16px,4vw,56px); --sek:clamp(88px,12vw,176px); --spalte:clamp(32px,5vw,80px); --kopf:72px;
  --r:4px; --r2:8px; --r3:20px; --r4:28px; --wrap:1440px;
  color-scheme:dark;
}
@media (min-width:861px){:root{--kopf:80px}}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:var(--kopf);-webkit-text-size-adjust:100%;overflow-x:clip}
body{margin:0;background:var(--nacht);color:var(--text);font:400 17px/1.6 var(--body);-webkit-font-smoothing:antialiased;overflow-x:clip}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
button{font:inherit;color:inherit}
p{margin:0;text-wrap:pretty}
figure{margin:0}
:focus-visible{outline:2px solid var(--champ);outline-offset:4px;border-radius:var(--r)}
.skip{position:fixed;left:var(--s4);top:-100px;z-index:80;background:var(--text);color:var(--nacht);padding:var(--s3) var(--s4);border-radius:var(--r);text-decoration:none;font-weight:700}
.skip:focus{top:var(--s3)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gut)}
.eyebrow,.micro{font:700 13px/1.4 var(--body);letter-spacing:.2em;text-transform:uppercase;color:var(--champ)}
h1,h2,h3{font-family:var(--display);font-weight:700;line-height:1.1;margin:0;text-wrap:balance;letter-spacing:-.02em;overflow-wrap:break-word}
h2{font-size:clamp(28px,4.2vw,48px)}
h3{font-size:20px}
.lead{color:var(--nebel);max-width:52ch;font-size:clamp(17px,1.4vw,19px)}
.outline{font-family:"Unbounded Kontur",var(--display);color:transparent;-webkit-text-stroke:1.5px var(--text)}
@supports not (-webkit-text-stroke:1px #000){.outline{color:var(--champ)}}

/* Knöpfe: Pillen, mind. 48 px hoch */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s3);min-height:48px;padding:0 var(--s5);border-radius:999px;font:700 14px/1.2 var(--body);letter-spacing:.06em;text-transform:uppercase;text-decoration:none;border:1px solid transparent;cursor:pointer;transition:background .25s, color .25s, border-color .25s, transform .25s}
.btn-gold{background:var(--champ);color:var(--nacht);border-color:var(--champ)}
.btn-gold:hover{background:var(--text);border-color:var(--text);transform:translateY(-2px)}
.btn-line{border-color:rgba(244,240,230,.4);color:var(--text);background:transparent}
.btn-line:hover{background:var(--text);color:var(--nacht);border-color:var(--text)}
.btn-gross{min-height:60px;padding:0 var(--s6);font-size:15px}
.btn .pfeil{flex:none}
.cta{display:flex;flex-wrap:wrap;gap:var(--s3);align-items:center}

/* Vorverkauf noch nicht offen: Status statt Kaufknopf */
.status{display:inline-flex;align-items:center;gap:var(--s3);min-height:48px;padding:0 var(--s5);border-radius:999px;border:1px solid rgba(228,200,141,.5);background:rgba(228,200,141,.1);color:var(--champ);font:700 14px/1.2 var(--body);letter-spacing:.06em;text-transform:uppercase}
.status i{flex:none;width:8px;height:8px;border-radius:50%;background:var(--champ);box-shadow:0 0 0 4px rgba(228,200,141,.18);animation:puls 2.4s ease-in-out infinite}
@keyframes puls{50%{box-shadow:0 0 0 8px rgba(228,200,141,0)}}
.vorverkauf{display:grid;gap:var(--s4);padding:var(--s5);border:1px solid var(--linie);border-radius:var(--r3);background:var(--tinte)}
.vorverkauf p{font-size:16px;line-height:1.6;color:var(--nebel)}
.vorverkauf .status{justify-self:start}

/* ===== Kopf: fest oben, über dem Hero durchsichtig, beim Scrollen mit Unschärfe ===== */
header.top{position:fixed;inset:0 0 auto;z-index:50;padding-top:env(safe-area-inset-top);transition:background .3s, box-shadow .3s}
header.top.fest,body:not(.start) header.top{background:rgba(11,13,29,.78);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 1px 0 var(--linie)}
.top .wrap{display:flex;align-items:center;gap:var(--s6);height:var(--kopf);max-width:none}
.logo{display:flex;align-items:center;min-height:44px;flex:none}
.logo img{height:48px;width:auto}
@media (min-width:861px){.logo img{height:56px}}
.top nav{margin-left:auto}
.top nav ul{display:flex;gap:var(--s6);list-style:none;margin:0;padding:0}
.top nav a{display:inline-flex;align-items:center;min-height:44px;min-width:44px;text-decoration:none;color:var(--nebel);font-size:15px;font-weight:600;transition:color .2s}
.top nav a:hover,.top nav a[aria-current="page"]{color:var(--champ)}
.top .kopf-cta{min-height:44px;padding:0 var(--s5);font-size:13px}
/* Ticket-Knopf mittig im Kopf, nur auf dem Handy (am Desktop steht dort .kopf-cta) */
.kopf-rechts{display:contents}
.kopf-ticket{display:none;flex:none;align-items:center;justify-content:center;width:48px;height:48px;border-radius:999px;background:var(--champ);color:var(--nacht);box-shadow:0 0 0 1px rgba(244,240,230,.18),0 6px 20px rgba(228,200,141,.28);transition:transform .2s ease}
.kopf-ticket svg{transform:rotate(-12deg)}
.kopf-ticket:active{transform:scale(.94)}
.kopf-ticket:focus-visible{outline:2px solid var(--text);outline-offset:3px}
.fortschritt{position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--champ);transform:scaleX(var(--seite,0));transform-origin:0 50%;pointer-events:none}
body:not(.start) .fortschritt{display:none}
.menue{display:none;flex:none;width:44px;height:44px;padding:0;border:1px solid rgba(244,240,230,.4);border-radius:999px;background:transparent;align-items:center;justify-content:center;cursor:pointer}
.menue span,.menue span::before,.menue span::after{display:block;width:16px;height:2px;background:var(--text);border-radius:2px;position:relative;transition:transform .2s ease}
.menue span::before,.menue span::after{content:"";position:absolute;left:0}
.menue span::before{top:-5px}.menue span::after{top:5px}
.menue[aria-expanded="true"] span{background:transparent}
.menue[aria-expanded="true"] span::before{transform:translateY(5px) rotate(45deg)}
.menue[aria-expanded="true"] span::after{transform:translateY(-5px) rotate(-45deg)}
@media (min-width:861px) and (max-width:1100px){.top .wrap{gap:var(--s4)}.top nav ul{gap:var(--s5)}.top nav a{font-size:14px}}
@media (max-width:860px){
  .top .wrap{gap:var(--s3)}
  .kopf-cta{display:none!important}
  .menue{display:inline-flex}
  .top nav{position:absolute;left:0;right:0;top:100%;background:var(--nacht);border-bottom:1px solid var(--linie);padding:var(--s2) var(--gut) var(--s4);display:none;margin:0}
  .top nav.offen{display:block;box-shadow:0 100vmax 0 100vmax rgba(5,6,16,.72)}
  .top nav ul{flex-direction:column;gap:0}
  .top nav a{min-height:52px;font:700 18px/1.2 var(--display);color:var(--text);width:100%;border-bottom:1px solid var(--linie)}
  .top nav li:last-child a{border-bottom:0}
  .sprache{margin-left:auto}
  .logo{flex:1 1 0;min-width:0}
  .kopf-ticket{display:inline-flex}
  .kopf-rechts{display:flex;flex:1 1 0;justify-content:flex-end;align-items:center;gap:var(--s3)}
}
.admin-bar header.top{top:var(--wp-admin--admin-bar--height,0px)}
@media (max-width:600px){.admin-bar header.top{top:0}}

/* Sprachwahl: im Kopf immer sichtbar, auch auf dem Handy */
.sprache{display:flex;flex:none;border:1px solid rgba(244,240,230,.35);border-radius:999px;padding:0}
.sprache a{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;border-radius:999px;font:700 13px/1 var(--body);letter-spacing:.06em;color:var(--nebel);text-decoration:none}
.sprache a:hover{color:var(--text)}
.sprache a[aria-current]{background:var(--text);color:var(--nacht)}
.sprache.wechselt a[aria-current]:not(.ziel){background:none;color:var(--nebel)}
.sprache a.ziel{background:var(--text);color:var(--nacht)}
.ladebalken{position:absolute;bottom:-2px;left:0;right:0;height:3px;z-index:1;pointer-events:none;opacity:0;background:linear-gradient(90deg,transparent,var(--champ),transparent) no-repeat;background-size:40% 100%}
body.laedt .ladebalken{opacity:1;animation:laden 1.1s ease-in-out infinite}
body>.ladebalken{position:fixed;top:0;bottom:auto;z-index:60}
@keyframes laden{from{background-position:-60% 0}to{background-position:160% 0}}

/* ===== Startseite ===== */
/* Hero: 190svh hoch, der Inhalt bleibt 100svh angeheftet, --h läuft dabei von 0 bis 1 */
.hero{position:relative;height:190svh;background:var(--nacht)}
.hero-pin{position:sticky;top:0;height:100svh;min-height:560px;display:grid;place-items:center;overflow:hidden;padding:calc(var(--kopf) + 24px) var(--gut) 96px}
.hero-bild{position:absolute;inset:0;pointer-events:none;opacity:calc(.3 - var(--h,0) * .2);transform:scale(calc(1.1 + var(--h,0) * .25));filter:saturate(1.15) blur(calc(var(--h,0) * 6px))}
.hero-bild img{width:100%;height:100%;object-fit:cover}
.hero-karte{position:absolute;z-index:2;left:50%;top:54%;width:min(46vw,600px);aspect-ratio:4/3;border-radius:26px;overflow:hidden;box-shadow:0 40px 120px rgba(0,0,0,.6);pointer-events:none;
  transform:translate(calc(-50% + var(--mx,0) * 18px), calc(-50% + var(--my,0) * 14px + var(--h,0) * -40px)) rotate(calc(-9deg + var(--h,0) * 13deg)) scale(calc(.9 + var(--h,0) * .32))}
.hero-karte img{width:100%;height:100%;object-fit:cover;transform:scale(calc(1.25 - var(--h,0) * .2))}
.hero-karte::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(11,13,29,.55),transparent 50%)}
.hero-pin::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:radial-gradient(60% 50% at 50% 45%,transparent 0,var(--nacht) 100%),linear-gradient(to bottom,rgba(11,13,29,.6),transparent 30%,transparent 60%,var(--nacht))}
.hero-inhalt{position:relative;z-index:3;text-align:center;width:100%;pointer-events:none}
.hero .kicker{display:block;margin-bottom:clamp(16px,3vw,36px);color:var(--nebel);opacity:calc(1 - var(--h,0) * 2.5)}
.titel{font:900 clamp(40px,10.6vw,176px)/.86 var(--display);letter-spacing:-.045em;text-transform:uppercase;text-wrap:nowrap}
.titel .z1,.titel .z2{display:block;will-change:transform}
.titel .z1{text-wrap:wrap;overflow-wrap:anywhere;position:relative;z-index:1;transform:translateY(calc(var(--h,0) * -90px)) scale(calc(1 + var(--h,0) * .12))}
.titel .z2{position:relative;z-index:3;display:inline-block;transform:translateX(calc(var(--h,0) * 22vw)) translateY(calc(var(--h,0) * 30px))}
.titel .z2::after{content:"";position:absolute;right:-.28em;bottom:.1em;width:.2em;height:.2em;border-radius:50%;background:var(--funke)}
.lang-ru .titel{font-size:clamp(36px,9.2vw,152px)}
.hero .gruss{font:italic 500 clamp(26px,4vw,52px)/1 var(--serif);color:var(--champ);margin-top:clamp(12px,2vw,24px);transform:translateX(calc(var(--h,0) * -18vw));opacity:calc(1 - var(--h,0) * 1.4)}
.seite-l{position:absolute;left:calc(var(--gut) - 6px);top:50%;z-index:3;transform:translateY(-50%) rotate(180deg);writing-mode:vertical-rl;color:var(--leise)}
.hero-fuss{position:absolute;inset:auto var(--gut) 28px;z-index:3;display:flex;justify-content:space-between;align-items:end;gap:var(--s5);opacity:calc(1 - var(--h,0) * 3);pointer-events:none}
.hero-fuss > *{pointer-events:auto}
.hero-fuss .micro{display:block;margin-bottom:var(--s2)}
.hero-fuss p{max-width:340px;color:var(--nebel);font-size:16px;line-height:1.5}
.hero-fuss .cta{margin-top:var(--s4)}
.runter{display:flex;align-items:center;gap:var(--s3);min-height:44px;text-align:right;color:var(--leise);text-decoration:none}
.runter:hover{color:var(--text)}
.runter svg{animation:wipp 2s ease-in-out infinite}
@keyframes wipp{50%{transform:translateY(5px)}}
.sticker{position:absolute;z-index:3;display:grid;place-items:center;border-radius:50%;text-align:center;text-decoration:none;font:800 13px/1.2 var(--body);letter-spacing:.06em;text-transform:uppercase}
.st-gold{width:clamp(104px,10vw,136px);aspect-ratio:1;background:var(--champ);color:var(--nacht);right:clamp(16px,9vw,150px);top:22%;rotate:12deg;transform:rotate(calc(var(--h,0) * 200deg));padding:var(--s2)}
.st-gold b{display:block;font-size:20px;line-height:1;margin-bottom:4px}
/* Rot mit dunkler Schrift (Kontrast 6:1), weiße Schrift läge bei 3:1 */
.st-rot{width:clamp(96px,9vw,128px);aspect-ratio:1;background:var(--funke);color:var(--nacht);left:clamp(16px,22vw,360px);bottom:16%;rotate:-10deg;transition:transform .3s;pointer-events:auto}
.st-rot:hover{transform:scale(1.08) rotate(4deg)}
.st-rot:focus-visible{outline-offset:6px;border-radius:50%}
@media (max-width:860px){
  .seite-l,.st-rot{display:none}
  .titel{font-size:12.6vw}
  .lang-ru .titel{font-size:11vw}
  .hero-karte{width:82vw;top:52%}
  .st-gold{top:calc(var(--kopf) + 12px);right:16px;width:104px;font-size:12px;letter-spacing:.02em;padding:var(--s1)}
  .st-gold b{font-size:16px}
  .hero-fuss{flex-direction:column;align-items:flex-start;gap:var(--s4)}
  .hero-fuss .runter{display:none}
  .hero-pin{padding-bottom:180px}
}
@media (max-height:620px) and (max-width:860px){.hero-fuss p{display:none}.hero-pin{padding-bottom:120px}}

/* Auftakt: Fakten, Countdown, Kaufknopf und Flyer */
.auftakt{position:relative;padding:var(--s8) 0 var(--sek)}
.auftakt .wrap{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);gap:var(--spalte);align-items:center}
.auftakt .satz{font-size:clamp(26px,3.6vw,48px);font-weight:800;letter-spacing:-.03em;margin:var(--s4) 0 0;max-width:20ch;overflow-wrap:break-word}
.facts{display:grid;grid-template-columns:repeat(3,auto);justify-content:start;gap:var(--s4) var(--s7);margin:var(--s7) 0;padding:var(--s5) 0;border-top:1px solid var(--linie);border-bottom:1px solid var(--linie)}
.facts div{display:grid;gap:var(--s1)}
.facts dt{font:700 13px/1.4 var(--body);letter-spacing:.2em;text-transform:uppercase;color:var(--leise)}
.facts dd{margin:0;font:700 clamp(17px,1.6vw,22px)/1.3 var(--display);letter-spacing:-.01em}
.count{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s5);margin-top:var(--s6);color:var(--nebel);font-size:15px;align-items:baseline}
.count b{font:900 clamp(28px,3vw,40px)/1 var(--display);color:var(--text);font-variant-numeric:tabular-nums;margin-right:var(--s1);letter-spacing:-.03em}
.flyer{justify-self:end;width:min(100%,380px);rotate:3deg}
.flyer button{display:block;width:100%;padding:0;border:0;background:none;cursor:zoom-in;border-radius:var(--r3);overflow:hidden;box-shadow:0 40px 100px -24px rgba(0,0,0,.85),0 0 0 1px rgba(228,200,141,.3)}
.flyer img{width:100%;height:auto;transition:transform .5s ease}
.flyer button:hover img{transform:scale(1.03)}
.flyer figcaption{margin-top:var(--s3);font-size:14px;line-height:20px;color:var(--leise);text-align:center;rotate:-3deg}
@media (max-width:860px){
  .auftakt .wrap{grid-template-columns:minmax(0,1fr)}
  .facts{grid-template-columns:1fr 1fr}
  .facts div:last-child{grid-column:1/-1}
  .flyer{justify-self:center;width:min(78%,340px)}
}

/* Großansicht Flyer und Video */
dialog.gross{padding:0;border:0;background:transparent;max-width:min(92vw,560px);max-height:92vh;max-height:92dvh;color:var(--text)}
dialog.gross::backdrop{background:rgba(5,6,16,.94)}
dialog.gross img{max-height:calc(92dvh - 64px);width:auto;margin:0 auto;border-radius:var(--r3)}
dialog.gross form{display:flex;justify-content:flex-end;margin-bottom:var(--s4)}
dialog.video-gross .rahmen{height:calc(92dvh - 64px);aspect-ratio:9/16;max-width:92vw;margin:0 auto;border-radius:var(--r3);overflow:hidden;background:#000}
dialog.video-gross iframe{display:block;width:100%;height:100%;border:0}

/* Mitternacht: 220vh Scrollweg (5 Sekunden), Uhr, Licht und Feuerwerk folgen --p */
.mitternacht{position:relative;height:220vh;background:var(--nacht)}
.mn-pin{position:sticky;top:0;height:100svh;overflow:hidden;display:grid;place-items:center}
.mn-pin canvas{position:absolute;inset:0;width:100%;height:100%}
.mn-glow{position:absolute;inset:-20%;background:radial-gradient(circle at 50% 55%,rgba(228,200,141,calc(var(--p,0) * .35)),transparent 55%)}
.mn-text{position:relative;z-index:2;text-align:center;padding:0 var(--gut);transition:opacity .4s}
.mn-text .micro{color:var(--leise);margin-bottom:24px}
.uhr{font:900 clamp(44px,13.4vw,220px)/.9 var(--display);letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.uhr .sek{color:var(--champ)}
.mn-zeile{margin:24px auto 0;font-size:clamp(17px,1.6vw,21px);color:var(--nebel);min-height:3.2em;max-width:34ch}
.mn-gruss{position:absolute;inset:0;z-index:3;display:grid;place-content:center;text-align:center;padding:0 var(--gut);pointer-events:none;opacity:0;transform:scale(.9);transition:opacity .6s, transform .8s cubic-bezier(.2,.9,.2,1.2)}
.mn-gruss .gross-gruss{font:900 clamp(36px,9vw,150px)/.9 var(--display);letter-spacing:-.04em;text-transform:uppercase}
.mn-gruss .klein-gruss{font:italic 500 clamp(24px,3.4vw,46px)/1.1 var(--serif);color:var(--champ);margin-top:16px}
.mitternacht.null .mn-gruss{opacity:1;transform:none}
.mitternacht.null .mn-text{opacity:0}
.zaehler{position:absolute;right:var(--gut);bottom:28px;z-index:3;color:var(--leise)}

/* Abschnitte */
.block{position:relative;padding:var(--sek) 0}
.blockkopf{display:grid;grid-template-columns:1.2fr 1fr;gap:var(--s5) var(--s7);align-items:end;margin-bottom:clamp(40px,6vw,88px)}
.blockkopf h2{font:900 clamp(40px,7.4vw,118px)/.88 var(--display);letter-spacing:-.04em;text-transform:uppercase;text-wrap:initial;transform:translateX(calc((var(--v,.5) - .5) * -4vw))}
/* Umriss-Zeile gleitet beim Hereinscrollen ein und steht ab der Bildmitte still (sonst ragt sie auf dem Handy über den Rand) */
.blockkopf h2 .outline{display:inline-block;transform:translateX(calc(max(0, 1 - var(--v,1) * 2) * 12vw))}
.blockkopf .micro{display:block;margin-bottom:20px}
.blockkopf .lead{max-width:460px}
.blockkopf .rechts{display:grid;gap:var(--s5);justify-items:start}
.blockkopf.mittel h2{font-size:clamp(34px,5vw,80px)}
.blockkopf.eins{grid-template-columns:1fr}
@media (max-width:860px){.blockkopf{grid-template-columns:minmax(0,1fr);gap:20px;overflow-wrap:break-word}.blockkopf > *{min-width:0}}
/* Längstes Wort der großen Überschriften muss auf 320 px in die Spalte passen */
@media (max-width:480px){.blockkopf h2{font-size:min(40px,calc((100vw - 32px) / 7.6))}}
/* Russische Wörter wie ПРАЗДНУЕМ sind länger, sonst läuft die Zeile auf dem iPhone SE aus dem Bild */
@media (max-width:480px){.lang-ru .blockkopf h2{font-size:min(40px,calc((100vw - 32px) / 8.6))}}

.js [data-reveal]{opacity:0;transform:translateY(40px);transition:opacity .9s ease, transform .9s cubic-bezier(.2,.8,.2,1)}
.js [data-reveal].in{opacity:1;transform:none}

/* Bühne */
.kueche{display:flex;gap:var(--s4);align-items:center;padding:var(--s3) var(--s5) var(--s3) var(--s3);border:1px solid var(--linie);border-radius:999px;text-decoration:none;transition:border-color .2s, background .2s}
a.kueche:hover{border-color:var(--champ);background:rgba(228,200,141,.06)}
.kueche img{width:56px;height:56px;border-radius:50%;object-fit:contain;background:#fff;padding:8px;flex:none}
.kueche{max-width:100%;min-width:0}
.kueche p{font-size:15px;line-height:1.4;color:var(--nebel);min-width:0;overflow-wrap:break-word}
.kueche strong{color:var(--text);font-weight:700}
.lineup{list-style:none;margin:0;padding:0;border-top:1px solid var(--linie);overflow-x:clip}
.act{display:grid;grid-template-columns:72px minmax(0,1fr) auto;gap:var(--s5);align-items:center;padding:clamp(16px,2.4vw,32px) 0;border-bottom:1px solid var(--linie);position:relative}
.act .nr{color:var(--leise);font:600 13px var(--body);font-variant-numeric:tabular-nums}
.act h3{font:700 clamp(26px,4.4vw,64px)/1 var(--display);letter-spacing:-.03em;transition:color .3s;white-space:nowrap;transform:translateX(calc((var(--v,.5) - .5) * var(--dir,1) * 10vw))}
.act h3 small{display:block;font:600 14px/1.6 var(--body);letter-spacing:.2em;text-transform:uppercase;color:var(--leise);margin-top:4px}
.act .rolle{font:italic 500 clamp(19px,2vw,26px) var(--serif);color:var(--champ);text-align:right}
.act:hover h3{color:var(--champ)}
.act.haupt h3{font-size:clamp(34px,7vw,112px);font-weight:900}
.act-bild{position:absolute;right:22%;top:50%;width:min(300px,26vw);aspect-ratio:4/5;object-fit:cover;border-radius:18px;pointer-events:none;opacity:0;transform:translateY(-50%) rotate(-4deg) scale(.9);transition:opacity .4s, transform .4s;z-index:2}
.act:hover .act-bild{opacity:1;transform:translateY(-50%) rotate(3deg) scale(1)}
@media (max-width:860px){.act{grid-template-columns:1fr;gap:8px}.act .rolle{text-align:left}.act .nr,.act-bild{display:none}.act h3{white-space:normal;transform:translateX(calc((var(--v,.5) - .5) * var(--dir,1) * 3vw))}}
@media (hover:none){.act-bild{display:none}}

.videos{margin-top:clamp(56px,8vw,112px)}
.videos ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,320px));gap:16px;justify-content:center}
.video{position:relative;display:block;width:100%;padding:0;border:0;border-radius:22px;overflow:hidden;aspect-ratio:9/16;background:var(--tinte);cursor:pointer;text-align:left}
.video img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.video:hover img{transform:scale(1.04)}
.video::after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 50%,rgba(0,0,0,.78))}
.video .play{position:absolute;left:50%;top:50%;translate:-50% -50%;width:76px;aspect-ratio:1;border-radius:50%;background:var(--champ);display:grid;place-items:center;z-index:2;transition:scale .3s}
.video .play::after{content:"";margin-left:5px;border-style:solid;border-width:12px 0 12px 20px;border-color:transparent transparent transparent var(--nacht)}
.video:hover .play,.video:focus-visible .play{scale:1.12}
.video .vtitel{position:absolute;left:18px;right:18px;bottom:16px;z-index:2;font-weight:700;font-size:15px;line-height:1.4}
.videos li:only-child{grid-column:1/-1;justify-self:center;width:min(100%,320px)}
.videos .hinweis{margin-top:var(--s4);font-size:14px;line-height:20px;color:var(--leise);text-align:center}
@media (max-width:480px){.videos ul{gap:12px}.video .play{width:60px}.video .play::after{border-width:10px 0 10px 16px}.video .vtitel{left:12px;right:12px;bottom:12px;font-size:13px}}

/* Laufband: kippt mit der Scrollgeschwindigkeit (--tempo) */
.laufband{overflow:hidden;padding:24px 0;background:var(--champ);color:var(--nacht);rotate:-2deg;margin:40px -2vw;white-space:nowrap;transform:skewX(calc(var(--tempo,0) * -1deg))}
.laufband div{display:inline-flex;gap:48px;font:900 clamp(28px,4vw,56px)/1 var(--display);text-transform:uppercase;letter-spacing:-.02em;animation:lauf 32s linear infinite;padding-right:48px}
.laufband i{font:italic 500 1.05em var(--serif);text-transform:none}
@keyframes lauf{to{transform:translateX(-50%)}}

/* Essen */
.essen{display:grid;grid-template-columns:1fr 1fr;gap:var(--spalte);align-items:center}
.essen-bild{position:relative;border-radius:var(--r4);overflow:hidden;aspect-ratio:4/5;clip-path:inset(calc((1 - min(var(--v,1) * 1.8, 1)) * 30%) round 28px)}
.essen-bild img{width:100%;height:100%;object-fit:cover;transform:scale(calc(1.35 - var(--v,0) * .3)) translateY(calc((var(--v,.5) - .5) * -60px))}
.essen-bild .sticker{width:124px;background:var(--funke);color:var(--nacht);right:20px;top:20px;rotate:10deg;aspect-ratio:1;transform:rotate(calc(var(--v,0) * 260deg))}
.essen h2{font:900 clamp(40px,6.4vw,100px)/.88 var(--display);letter-spacing:-.04em;text-transform:uppercase;margin:20px 0 28px;text-wrap:initial}
.essen .text-essen > p{color:var(--nebel);max-width:460px}
.gerichte{display:flex;flex-wrap:wrap;gap:8px;margin:28px 0 0;padding:0;list-style:none}
.gerichte li{border:1px solid var(--linie);border-radius:999px;padding:12px 16px;font-weight:600;font-size:15px}
.essen .cta{margin-top:var(--s6)}
.essen > *{min-width:0}
@media (max-width:860px){.essen{grid-template-columns:1fr}}
@media (max-width:480px){.essen h2{font-size:min(40px,calc((100vw - 32px) / 7.4))}}

/* Tickets: echter Saalplan, kippt beim Hereinscrollen nach hinten */
.saal{background:linear-gradient(var(--nacht),var(--tinte) 30%,var(--tinte) 70%,var(--nacht))}
.tickets{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:var(--spalte);align-items:start}
.plan{display:block;position:relative;text-decoration:none;color:inherit;background:var(--nacht);border:1px solid var(--linie);border-radius:var(--r4);padding:clamp(12px,2.4vw,32px);transition:border-color .2s}
a.plan:hover{border-color:var(--champ)}
.plan svg{width:100%;height:auto;display:block;transform:perspective(900px) rotateX(calc((1 - min(var(--v,1) * 2, 1)) * 38deg)) scale(calc(.88 + min(var(--v,1) * 2, 1) * .12));transform-origin:50% 0}
.plan .wall{fill:none;stroke:#3a3f6e;stroke-width:1.6;stroke-linejoin:round}
.plan .area{fill:#1d2146;stroke:#3a3f6e;stroke-width:.8}
.plan .area.stage{fill:#3a2f4a}
.plan .alabel{font:700 7px var(--body);fill:#8c8fb2;text-anchor:middle;dominant-baseline:middle;letter-spacing:.06em;text-transform:uppercase}
.plan .tisch{transition:opacity .35s, transform .35s;transform-box:fill-box;transform-origin:center}
.plan .tisch circle.t{stroke:rgba(11,13,29,.5);stroke-width:.6}
.plan .tisch text{font:700 7px var(--display);text-anchor:middle;dominant-baseline:central;fill:#0b0d1d;pointer-events:none}
.plan[data-hl] .tisch{opacity:.18}
.plan[data-hl] .tisch.an{opacity:1;transform:scale(1.12)}
@media (hover:hover){.plan .tisch:hover circle.t{stroke:#fff;stroke-width:1.2}}
.plan .tip{position:absolute;pointer-events:none;background:var(--text);color:var(--nacht);font-size:14px;line-height:20px;padding:var(--s2) var(--s3);border-radius:var(--r2);white-space:nowrap;transform:translate(-50%,calc(-100% - 8px));opacity:0;transition:opacity .12s;z-index:2}
.plan .tip.on{opacity:1}
.plan .hinweis{position:absolute;right:var(--s4);bottom:var(--s4);font:700 13px/16px var(--body);letter-spacing:.06em;text-transform:uppercase;padding:var(--s3) var(--s4);border-radius:999px;background:var(--champ);color:var(--nacht)}
@media (max-width:600px){.plan .tisch text,.plan .alabel{display:none}.plan .hinweis{right:var(--s2);bottom:var(--s2);padding:var(--s2) var(--s3)}}
.legende{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s5);margin-top:var(--s4);font-size:14px;line-height:20px;color:var(--leise)}
.legende span{display:inline-flex;align-items:center;gap:var(--s2)}
.legende i{width:12px;height:12px;border-radius:50%;display:inline-block}
.preise{display:grid;gap:16px}
.kat{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:8px var(--s4);align-items:center;width:100%;text-align:left;padding:var(--s5) 24px;border:1px solid var(--linie);border-radius:22px;background:transparent;cursor:pointer;transition:border-color .3s, background .3s}
.kat:hover,.kat[aria-pressed="true"]{border-color:var(--kc);background:color-mix(in srgb,var(--kc) 9%,transparent)}
.kat i{width:14px;height:14px;border-radius:50%;background:var(--kc);grid-row:span 2}
.kat .kname{font:800 clamp(22px,2.4vw,32px)/1 var(--display);letter-spacing:-.02em;text-transform:uppercase}
.kat .preis{font:900 clamp(32px,4vw,56px)/1 var(--display);letter-spacing:-.04em;font-variant-numeric:tabular-nums;grid-row:span 2;text-align:right;white-space:nowrap}
.kat .preis small{display:block;font:600 13px/16px var(--body);letter-spacing:0;color:var(--leise);margin-top:var(--s1)}
.kat .ort{font-size:15px;line-height:1.5;color:var(--nebel)}
.extra{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.extra div{border-radius:22px;padding:24px;background:var(--tinte2)}
.extra b{display:block;font:900 30px/1 var(--display);letter-spacing:-.03em;margin-bottom:8px}
.extra .pk{background:var(--champ);color:var(--nacht)}
/* ungerade Anzahl: Kinderpreis über die volle Breite, Pakete nebeneinander */
.extra div:first-child:nth-last-child(2n+3){grid-column:1/-1}
.extra span{font-size:15px;line-height:1.5}
.preise > .btn{margin-top:var(--s2);justify-self:start}
@media (max-width:960px){.tickets{grid-template-columns:1fr}}
@media (max-width:480px){.extra{grid-template-columns:1fr}.kat{padding:var(--s4) var(--s5)}.kat .kname{grid-column:2/4}.kat .ort{grid-column:2}.kat .preis{grid-column:3;grid-row:2}}

/* Ablauf: Kontur-Ziffern füllen sich beim Scrollen */
.ablauf{margin-top:clamp(80px,10vw,152px)}
.schritte{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s5);counter-reset:s;list-style:none;margin:0;padding:0}
.schritte li{border-top:2px solid var(--champ);padding-top:24px}
.schritte li::before{counter-increment:s;content:"0" counter(s);display:block;font:900 56px/1 "Unbounded Kontur",var(--display);color:transparent;-webkit-text-stroke:1.2px var(--champ);margin-bottom:16px;
  background:linear-gradient(var(--champ),var(--champ)) 0 100%/100% calc(min(var(--v,0) * 1.6, 1) * 100%) no-repeat;-webkit-background-clip:text;background-clip:text}
.schritte h3{font:800 20px/1.2 var(--display);margin-bottom:12px;text-transform:uppercase}
.schritte p{color:var(--nebel);font-size:16px;line-height:1.55}
@media (max-width:860px){.schritte{grid-template-columns:1fr 1fr;row-gap:40px}}
@media (max-width:480px){.schritte{grid-template-columns:1fr}}

/* Rückblick */
.film{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:16px;position:relative}
.film figure{border-radius:24px;overflow:hidden;aspect-ratio:3/4;position:relative;transform:translateY(calc((var(--v,.5) - .5) * var(--tiefe,0) * 1px))}
.film figure:first-of-type{aspect-ratio:auto}
.film img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s cubic-bezier(.2,.8,.2,1)}
.film figure:hover img{transform:scale(1.06)}
.film figcaption{position:absolute;left:18px;bottom:16px;color:var(--text);text-shadow:0 1px 12px rgba(0,0,0,.8)}
.film figure::after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 60%,rgba(0,0,0,.6));pointer-events:none}
.film figcaption{z-index:1}
.film-label{position:absolute;top:50%;left:50%;translate:-50% -50%;z-index:2;font:900 clamp(40px,8vw,128px)/.9 var(--display);text-transform:uppercase;letter-spacing:-.04em;text-align:center;pointer-events:none;mix-blend-mode:difference;white-space:nowrap;scale:calc(.6 + var(--v,.5) * .8)}
.rueckblick{padding:var(--s7) 0 var(--sek)}
@media (max-width:700px){.film{grid-template-columns:1fr 1fr}.film figure:first-of-type{grid-column:span 2;aspect-ratio:16/10}}

/* Anfahrt */
.ort-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--spalte);align-items:start}
.adresse{font:600 clamp(20px,2vw,26px)/1.4 var(--body);margin-bottom:var(--s5)}
.fakten{display:grid;margin:0;border-top:1px solid var(--linie)}
.fakten div{display:grid;grid-template-columns:140px 1fr;gap:var(--s4);padding:16px 0;border-bottom:1px solid var(--linie)}
.fakten dt{color:var(--leise)}
.fakten dd{margin:0}
.fakten dd a{display:inline-flex;align-items:center;min-height:44px;margin:-12px 0;color:var(--champ)}
@media (max-width:860px){.ort-grid{grid-template-columns:1fr}.fakten div{grid-template-columns:110px 1fr}}
@media (max-width:400px){.fakten div{grid-template-columns:1fr;gap:var(--s1)}}

/* Über uns */
.wir-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:var(--spalte);align-items:center}
.wir-bild{border-radius:var(--r4);overflow:hidden;aspect-ratio:4/5;clip-path:inset(calc((1 - min(var(--v,1) * 1.8, 1)) * 20%) round 28px)}
.wir-bild img{width:100%;height:100%;object-fit:cover;transform:scale(calc(1.25 - var(--v,0) * .2))}
.wir figcaption{margin-top:var(--s3);font-size:14px;line-height:20px;color:var(--leise)}
.wir .blockkopf{margin-bottom:var(--s6)}
.wir .blockkopf h2{font-size:clamp(34px,5vw,80px)}
.anlaesse{display:grid;grid-template-columns:1fr 1fr;gap:var(--s5);padding-top:var(--s5);border-top:1px solid var(--linie);margin-bottom:var(--s6)}
.anlaesse h3{font:800 18px/1.2 var(--display);text-transform:uppercase;margin-bottom:var(--s2)}
.anlaesse p{font-size:16px;line-height:1.55;color:var(--nebel)}
@media (max-width:860px){.wir-grid{grid-template-columns:1fr}.wir figure{max-width:440px}}
@media (max-width:520px){.anlaesse{grid-template-columns:1fr}}

/* Partner */
.partner-grid{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:var(--s5)}
.p-karte{display:grid;gap:var(--s4);align-content:start;padding:var(--s5);border:1px solid var(--linie);border-radius:var(--r3);background:var(--tinte);text-decoration:none;color:inherit;transition:border-color .25s, transform .25s}
a.p-karte:hover{border-color:var(--champ);transform:translateY(-3px)}
.p-logo{display:grid;place-items:center;background:#fff;border-radius:14px;padding:var(--s5)}
.p-logo img{width:100%;height:auto;max-height:96px;object-fit:contain}
.p-haupt{grid-row:span 2;grid-template-columns:minmax(0,1fr)}
.p-haupt .p-logo{padding:var(--s6) var(--s5)}
.p-haupt .p-logo img{max-height:220px}
.p-rolle{font:700 13px/1.4 var(--body);letter-spacing:.2em;text-transform:uppercase;color:var(--champ)}
.p-karte h3{font:800 22px/1.15 var(--display);letter-spacing:-.02em}
.p-haupt h3{font-size:clamp(26px,3vw,36px)}
.p-karte p{max-width:52ch;font-size:16px;line-height:1.55;color:var(--nebel)}
.p-link{display:inline-flex;align-items:center;gap:var(--s2);font-weight:700;color:var(--text);min-height:24px}
.p-link::after{content:"→";transition:translate .2s}
a.p-karte:hover .p-link::after{translate:4px 0}
@media (max-width:860px){.partner-grid{grid-template-columns:1fr}.p-haupt{grid-row:auto}}

/* Häufige Fragen */
.fragen-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:var(--spalte);align-items:start}
.fragen-grid .blockkopf{margin-bottom:0}
.fragen-grid .blockkopf h2{font-size:clamp(34px,5vw,80px)}
.fragen-grid .lead a{color:var(--champ);text-underline-offset:3px;overflow-wrap:anywhere}
.faq{border-top:1px solid var(--linie)}
.faq details{border-bottom:1px solid var(--linie)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:20px;align-items:center;min-height:64px;padding:20px 0;font:700 clamp(17px,1.6vw,21px)/1.3 var(--display);letter-spacing:-.01em;transition:color .2s}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";flex:none;font:400 30px/1 var(--body);color:var(--champ);transition:transform .3s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq summary:hover{color:var(--champ)}
.faq details p{padding:0 0 24px;color:var(--nebel);max-width:62ch}
@media (max-width:860px){.fragen-grid{grid-template-columns:1fr}}

/* Schluss */
.schluss{position:relative;text-align:center;padding:clamp(112px,16vw,240px) 0;overflow:hidden;isolation:isolate}
.schluss-bild{position:absolute;inset:0;z-index:-2;opacity:.22;transform:scale(calc(1.3 - var(--v,0) * .3))}
.schluss-bild img{width:100%;height:100%;object-fit:cover}
.schluss::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(var(--nacht),transparent 40%,transparent 60%,var(--nacht))}
.schluss .micro{margin-bottom:var(--s5)}
.schluss h2{font:900 clamp(32px,8.2vw,150px)/.88 var(--display);letter-spacing:-.05em;text-transform:uppercase;text-wrap:initial}
.schluss h2 .outline{display:inline-block;letter-spacing:calc((1 - min(var(--v,1) * 2.2, 1)) * .25em)}
.schluss .lead{margin:28px auto 40px;max-width:560px}
.schluss .cta{justify-content:center}
@media (max-width:480px){.schluss h2{font-size:min(36px,calc((100vw - 32px) / 11))}}

/* ===== Fuß ===== */
footer{position:relative;border-top:1px solid var(--linie);padding:var(--s8) 0 calc(var(--s6) + env(safe-area-inset-bottom));font-size:15px;color:var(--nebel);background:var(--nacht)}
footer .wrap{display:grid;grid-template-columns:1.3fr 1fr .8fr 1fr;gap:var(--s6) var(--s7)}
footer .marke img{height:80px;width:auto;margin-bottom:var(--s4)}
footer .marke p{max-width:32ch}
footer .claim{font:italic 500 24px/1.2 var(--serif);color:var(--champ)}
.fkopf{font:700 13px/1.4 var(--body);letter-spacing:.2em;text-transform:uppercase;color:var(--leise);margin:0 0 var(--s2)}
footer a{text-decoration:none}
footer a:hover{color:var(--champ)}
footer ul{list-style:none;margin:0;padding:0}
footer ul a,.recht a{display:inline-flex;align-items:center;min-height:44px;min-width:44px}
.recht{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;gap:0 var(--s5);padding-top:var(--s4);border-top:1px solid var(--linie);font-size:14px;color:var(--leise)}
.recht a{padding:0 var(--s1);margin:0 calc(-1 * var(--s1));min-width:44px;justify-content:center}
.recht .credit{margin-left:auto}
.recht .credit a{color:var(--nebel)}
.recht .credit a:hover{color:var(--champ)}
@media (max-width:860px){footer .wrap{grid-template-columns:1fr 1fr}footer .marke{grid-column:1/-1}.recht .credit{margin-left:0}}
@media (max-width:520px){footer .wrap{grid-template-columns:1fr}}

/* Leiste unten auf dem Handy: erscheint erst, wenn kein anderer Ticket-Knopf im Bild ist */
.leiste{display:none}
@media (max-width:860px){
  .leiste{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:40;align-items:center;gap:var(--s3);padding:var(--s3) var(--gut) calc(var(--s3) + env(safe-area-inset-bottom));background:rgba(11,13,29,.94);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-top:1px solid var(--linie);transform:translateY(100%);visibility:hidden;transition:transform .25s ease, visibility 0s .25s}
  .leiste.an{transform:none;visibility:visible;transition:transform .25s ease}
  .leiste p{font-size:14px;line-height:20px;color:var(--nebel)}
  .leiste b{display:block;color:var(--text);font-size:16px}
  .leiste .btn{margin-left:auto;flex:none}
  body.mit-leiste{padding-bottom:calc(72px + env(safe-area-inset-bottom))}
}

/* ===== Unterseiten ===== */
main{display:block}
body:not(.start) main{padding-top:calc(var(--kopf) + env(safe-area-inset-top))}
.seite-kopf{position:relative;overflow:hidden;padding:var(--s9) 0 var(--s7);border-bottom:1px solid var(--linie);isolation:isolate}
.seite-kopf::before{content:"";position:absolute;z-index:-1;inset:-60% -20% auto auto;width:70vw;height:70vw;max-width:760px;max-height:760px;background:radial-gradient(closest-side,rgba(228,200,141,.14),transparent 70%)}
.seite-kopf .wrap{display:grid;gap:var(--s4);max-width:1180px}
.seite-kopf .wrap > *{min-width:0}
.seite-kopf h1{font-size:clamp(34px,6vw,80px);font-weight:900;letter-spacing:-.04em;line-height:.95}
.seite-kopf .lead{font-size:18px}
.stand{display:inline-flex;align-items:center;gap:var(--s2);justify-self:start;min-height:32px;padding:0 var(--s3);border:1px solid var(--linie);border-radius:999px;font-size:14px;line-height:20px;color:var(--nebel);font-variant-numeric:tabular-nums}
.stand i{width:8px;height:8px;border-radius:50%;background:#6fcf97;box-shadow:0 0 0 3px rgba(111,207,151,.18)}
.seite{padding:var(--s7) 0 var(--sek)}
.seite .wrap{max-width:1180px}
.text{max-width:72ch;font-size:17px;line-height:1.7}
.text > * + *{margin-top:var(--s4)}
.text h2{font-size:clamp(22px,2.6vw,30px);font-weight:800;margin-top:var(--s7);padding-top:var(--s5);border-top:1px solid var(--linie)}
.text h2:first-child{margin-top:0;padding-top:0;border-top:0}
.text h3{font:700 18px/1.4 var(--body);letter-spacing:0;margin-top:var(--s6);color:var(--text)}
.text h2 + *,.text h3 + *{margin-top:var(--s3)}
.text p,.text li{color:#dcdae6}
/* Zeilen höchstens rund 75 Zeichen, Tabellen behalten die volle Breite */
.text p,.text li,.text address{max-width:54ch}
.text strong{color:var(--text);font-weight:700}
.text ul,.text ol{padding-left:var(--s5);margin:0 0 var(--s4)}
.text li + li{margin-top:var(--s2)}
.text li::marker{color:var(--champ)}
.text a:not(.btn){color:var(--champ);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;overflow-wrap:anywhere}
.text a:not(.btn):hover{color:var(--text)}
.text address{font-style:normal}
.text .tabelle,.text figure.wp-block-table{overflow-x:auto;margin-left:0;margin-right:0}
.text table{border-collapse:collapse;width:100%;font-size:15px;line-height:1.5}
.text th,.text td{border:1px solid var(--linie);padding:var(--s2) var(--s3);text-align:left;vertical-align:top}
.text th{background:var(--tinte);color:var(--text);font-weight:700}
.text .hinweis-box{padding:var(--s4) var(--s5);border:1px solid var(--linie);border-radius:var(--r3);background:var(--tinte)}
.text .fassung{padding:var(--s4) var(--s5);border:1px solid rgba(228,200,141,.45);border-radius:var(--r3);background:rgba(228,200,141,.08);font-size:15px;line-height:24px}
.text .rcb-cookie-policy,.text [class*="rcb-"]{color:inherit}
.text table[class*="rcb"],.text .rcb-cookie-policy table{display:block;overflow-x:auto}
.text .wp-block-button__link{display:inline-flex;align-items:center;min-height:48px;padding:0 var(--s5);border-radius:999px;background:var(--champ);color:var(--nacht);text-decoration:none;font-weight:700}
.text img{border-radius:var(--r3)}
.alignwide,.alignfull{max-width:none}
.daten{display:grid;grid-template-columns:auto 1fr;gap:var(--s2) var(--s5);margin:0}
.daten dt{color:var(--leise)}
.daten dd{margin:0;color:var(--text)}
@media (max-width:520px){.daten{grid-template-columns:1fr;gap:0}.daten dd{margin-bottom:var(--s3)}}

/* Kontakt */
.karten{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s4)}
.karte{display:grid;gap:var(--s2);align-content:start;padding:var(--s5);border:1px solid var(--linie);border-radius:var(--r3);background:var(--tinte);text-decoration:none;color:inherit;transition:border-color .25s, transform .25s}
a.karte:hover{border-color:var(--champ);transform:translateY(-3px)}
.karte .p-rolle{margin-bottom:var(--s1)}
.karte b{font:800 20px/1.3 var(--display);overflow-wrap:anywhere}
.karte span{font-size:15px;line-height:24px;color:var(--nebel)}
.anliegen{display:grid;grid-template-columns:1fr 1fr;gap:var(--s4);margin-top:var(--s7)}
.anliegen > div{display:grid;gap:var(--s3);align-content:start;padding:var(--s5) 0;border-top:1px solid var(--linie)}
.anliegen h2{font-size:clamp(22px,2.4vw,28px);font-weight:800}
.anliegen p{color:var(--nebel)}
.anliegen .cta{margin-top:var(--s2)}
.sozial{display:flex;flex-wrap:wrap;gap:var(--s3);margin-top:var(--s7)}
@media (max-width:860px){.karten{grid-template-columns:1fr}.anliegen{grid-template-columns:1fr}}

/* Buchungsseite: helle Fläche für die Buchungsmaske des Plugins, warm wie Papier statt kühlem Grau.
   Die Maske holt sich Schrift und Farben der Seite über ihre eigenen Variablen, das Plugin selbst bleibt unverändert.
   Kopf deckend, sonst wird er über der hellen Fläche grau. */
body.seite-tickets header.top{background:var(--nacht)}
.seite-tickets .seite-kopf{padding-bottom:var(--s6)}
.buchung{background:var(--text);color:var(--tinte);padding:var(--s6) 0 var(--s8);color-scheme:light}
.buchung :focus-visible{outline-color:#7c5e27}
.buchung > .ape{margin-top:0}
.buchung .ape-soon{max-width:560px;margin:0 auto;padding:var(--s6);border-radius:var(--r3);background:#fffdf8;text-align:center;font-weight:700}
.buchung .ape{--ape-font:var(--body);--ape-ink:var(--tinte);--ape-ink-soft:#55587a;--ape-paper:#fffdf8;--ape-wash:#f1ebdf;--ape-tint:rgba(84,62,22,.08);--ape-line:#e0d8c8;--ape-sep:#ece6da;--ape-gold-lt:var(--champ);--ape-gold-ink:#7c5e27;letter-spacing:0}
.buchung .ape-head h2,.buchung .ape-side h3,.buchung .ape-sheet-head h3{font-family:var(--display);font-weight:800;letter-spacing:-.02em}
.buchung .ape-side h3{font-size:18px}
.buchung .ape-side h3 > *{font-family:var(--body)}
.buchung .ape .ape-btn{border-radius:999px;font-weight:700}
.buchung .ape .ape-btn:hover{background:var(--linie)}
.buchung .ape .ape-btn-ghost,.buchung .ape .ape-btn-ghost:hover{background:var(--ape-tint)}
.buchung .ape .ape-btn-plain,.buchung .ape .ape-btn-plain:hover{background:none}
.buchung .ape .ape-btn-wallet,.buchung .ape .ape-btn-wallet:hover{background:#000}
.buchung .ape .ape-btn:disabled{background:#cdc6b6}
.buchung .ape .ape-help-contact .ape-btn{background:var(--ape-paper)}
.buchung .ape-area{fill:#e9e2d3}
.buchung .ape-area-stage{fill:var(--ape-ink)}
.buchung .ape-area-bar{fill:#e3dcc8}
.buchung .ape-area-dance{fill:#efe9dd}
.buchung .ape-credit{color:#55587a}
/* Handy: Daten- und Statusschritt stehen ohne Karte direkt auf der Fläche, sonst klebt der Text am Rand einer hellen Platte */
@container (max-width:860px){
  .buchung .ape-shell:is([data-step="details"],[data-step="status"],[data-step="confirm"],[data-step="processing"]) .ape-side{background:none}
  .buchung .ape-bar:not(:empty){background:rgba(255,253,248,.92)}
}
.tickets-zu{padding:var(--s7) 0 var(--sek)}
.tickets-zu .vorverkauf{max-width:640px}
.tickets-zu .preisliste{display:grid;gap:var(--s2);margin:var(--s2) 0}
.tickets-zu .preisliste div{display:flex;justify-content:space-between;gap:var(--s4);padding:var(--s2) 0;border-bottom:1px solid var(--linie)}
.tickets-zu .preisliste span{display:inline-flex;align-items:center;gap:var(--s2)}
.tickets-zu .preisliste i{width:12px;height:12px;border-radius:50%}
.tickets-zu .preisliste b{font:800 18px/1.3 var(--display);font-variant-numeric:tabular-nums}

/* 404 */
.leer{padding:var(--s9) 0}
.leer .wrap{display:grid;gap:var(--s5);max-width:1180px}
.leer .zahl{font:900 clamp(96px,22vw,260px)/.85 "Unbounded Kontur",var(--display);letter-spacing:-.04em;color:transparent;-webkit-text-stroke:2px var(--champ)}

/* Lange Wörter (Verbraucherstreitbeilegung, конфиденциальности) dürfen auf schmalen Handys nicht über den Rand */
@media (max-width:480px){.seite-kopf h1,.text h2,.text h3{hyphens:auto;-webkit-hyphens:auto}}

/* Bildunterschrift Flyer: Touch sagt antippen, Maus sagt klicken */
.nur-maus{display:none}
@media (hover:hover) and (pointer:fine){.nur-touch{display:none}.nur-maus{display:inline}}

/* Bewegung reduzieren: alles ruhig, angeheftete Abschnitte normal hoch, Gruß statt Countdown-Sequenz */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
  .js [data-reveal]{opacity:1;transform:none}
  .hero{height:auto}
  .hero-pin{position:relative;height:auto;min-height:100svh}
  .mitternacht{height:auto}
  .mn-pin{position:relative;height:auto;min-height:80svh}
  [data-scroll],.hero{--v:1!important;--h:0!important}
  body.laedt .ladebalken{background-size:100% 100%}
}
main:focus{outline:none}