/* ==========================================================================
   BOWLING 2000 — v3 · nach Kundenbriefing
   Basis: Bowling-2000_Styleguide_V02 (PBB GmbH / Forever Design)
   Header übernommen aus v2 (Kundenvorlage assets/header.jpg)

   Leitgedanke aus dem Briefing: Bowling und Social-Darts sind gleichwertig.
   Social-Darts wird nie als „Darts“ bezeichnet und nie als Randprodukt gesetzt.

   Farbwelt:  Deep Black #000000 · Cotton Candy #ffb9ff · Urban Graphite #333333
              Moon Dust #f0f0f0 · Pure White #ffffff · Neo Mint #69d7c8 (nur Störer)
   Typo:      Headlines  Interstate Compressed Black (Versalien, ZAB 0,8, LW -10)
              Fließtext  DM Sans (ZAB 1,5)
              Buttons    Industry Inc Base (nur Buttons & Domains)
              Schmuck    Quentin (nur Cotton Candy, nur mit Headline)
   ========================================================================== */

/* ---------- Fonts ----------
   Originalschnitte aus dem Styleguide (assets/fonts), fürs Web nach woff2 konvertiert
   und auf Latein inkl. deutscher Sonderzeichen reduziert. */
@font-face {
  font-family: "Interstate Compressed";
  src: url("../fonts/interstate-compressed-black.woff2") format("woff2");
  font-weight: 400 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Industry Inc Base";
  src: url("../fonts/industry-inc-base.woff2") format("woff2");
  font-weight: 400 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "DM Sans";
  src: url("../fonts/dm-sans-var.woff2") format("woff2-variations"),
       url("../fonts/dm-sans-var.woff2") format("woff2");
  font-weight: 100 1000; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "DM Sans";
  src: url("../fonts/dm-sans-var-italic.woff2") format("woff2-variations"),
       url("../fonts/dm-sans-var-italic.woff2") format("woff2");
  font-weight: 100 1000; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Quentin";
  src: url("../fonts/quentin.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}

/* ---------- Tokens ---------- */
:root {
  --black:#000; --candy:#ffb9ff; --graphite:#333; --moon:#f0f0f0; --white:#fff; --mint:#69d7c8;

  --font-head:"Interstate Compressed",Impact,"Haettenschweiler",sans-serif;
  --font-body:"DM Sans",system-ui,-apple-system,sans-serif;
  --font-tech:"Industry Inc Base","DM Sans",sans-serif;
  --font-script:"Quentin",cursive;

  --pad-x: clamp(20px,4.5vw,64px);
  --maxw: 1360px;
  --nav-h: 84px;
  --ease: cubic-bezier(.16,1,.3,1);
  --line: rgba(0,0,0,.13);
  --b-mark: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%221001.27 266.67 546.67 546.66%22%3E%3Cpath d=%22M 1287.464844 720.890625 L 1229.390625 720.890625 L 1229.390625 528.691406 L 1285.65625 528.691406 C 1316.359375 580.527344 1343.21875 631 1287.464844 720.890625 M 1277.738281 391.757812 C 1279.664062 408.046875 1273.722656 426.714844 1269.949219 446.996094 C 1269.949219 446.996094 1264.320312 464.328125 1267.070312 481.417969 C 1267.78125 485.839844 1268.769531 490.382812 1269.941406 494.777344 L 1229.390625 494.777344 L 1229.386719 359.175781 C 1229.386719 359.175781 1273.546875 356.191406 1277.738281 391.757812 M 1387.667969 811.332031 C 1475.078125 811.332031 1545.945312 740.472656 1545.945312 653.054688 C 1545.945312 588.558594 1507.347656 533.113281 1452.007812 508.453125 C 1481.777344 483.566406 1500.722656 446.167969 1500.722656 404.332031 C 1500.722656 329.40625 1439.980469 268.667969 1365.054688 268.667969 L 1003.273438 268.667969 L 1003.273438 811.332031 Z M 1387.667969 811.332031 %22 fill=%22%23000%22/%3E%3C/svg%3E");
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
/* hidden-Attribut gewinnt immer — auch gegen display:flex/grid aus Klassen
   (sonst bleiben per JS versteckte Zeilen wie „Wann möchtet ihr essen?" sichtbar) */
[hidden]{display:none!important}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--moon);color:var(--black);font-family:var(--font-body);
  font-size:clamp(16px,1.05vw,17px);line-height:1.5;overflow-x:hidden}
img,svg,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
p{margin:0 0 .5em} p:last-child{margin-bottom:0}
strong,b{font-weight:700}
button,input,select,textarea{font:inherit;color:inherit}
::selection{background:var(--candy);color:var(--black)}
:focus-visible{outline:2px solid var(--black);outline-offset:3px}
.dark :focus-visible{outline-color:var(--candy)}

/* ---------- Typografie ---------- */
.headline{font-family:var(--font-head);font-weight:400;text-transform:uppercase;
  line-height:.84;letter-spacing:-.01em;margin:0}
.h-hero{font-size:clamp(46px,8.6vw,132px)}
.h-display{font-size:clamp(38px,5.6vw,188px)}
.h-section{font-size:clamp(30px,4vw,62px)}
.h-card{font-size:clamp(22px,2vw,32px)}
.h-small{font-size:clamp(19px,1.6vw,25px)}

.eyebrow{font-family:var(--font-tech);font-weight:600;font-size:clamp(14px,1.25vw,19px);
  letter-spacing:.22em;text-transform:uppercase;display:flex;align-items:center;gap:.6em;
  margin-bottom:18px;opacity:.82}
.dark .eyebrow{opacity:1;color:var(--candy)}
.eyebrow::before{content:"";flex:0 0 auto;width:1em;height:1em;background:currentColor;
  -webkit-mask:var(--b-mark) center/contain no-repeat;mask:var(--b-mark) center/contain no-repeat}

.script{font-family:var(--font-script);color:var(--candy);text-transform:none;
  line-height:.8;font-size:var(--ssize,1.45em);display:block;pointer-events:none;white-space:nowrap}
.has-script{position:relative}
.has-script>.script{position:absolute;left:var(--sx,.4em);bottom:var(--sy,-.28em);z-index:2}
/* Zentrierte CTA-Headline: Die Box umschließt den Text, damit die Schmuckschrift
   am Wortende sitzt statt am linken Rand der vollbreiten Überschrift. */
.cta-title{display:inline-block}
.cta-title>.script{left:auto;right:-.4em}
@media (max-width:720px){.script{font-size:var(--ssize-m,1.1em)}}

.lead{/*font-size:clamp(17px,1.3vw,20px)*/}
.muted{opacity:.64}
.dark .muted{opacity:.7}
.tc{text-align:center}

/* ---------- Buttons ---------- */
.btn{font-family:var(--font-tech);font-weight:600;font-size:clamp(12px,1vw,14px);
  letter-spacing:.2em;text-transform:uppercase;line-height:1;display:inline-flex;
  align-items:center;justify-content:center;gap:12px;padding:18px 28px;border:0;
  cursor:pointer;white-space:nowrap;
  transition:background .3s var(--ease),color .3s var(--ease),box-shadow .3s var(--ease),transform .3s var(--ease)}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn-candy{background:var(--candy);color:var(--black)}
.btn-candy:hover{background:var(--white)}
.btn-black{background:var(--black);color:var(--white)}
.btn-black:hover{background:var(--candy);color:var(--black)}
.btn-outline{background:transparent;color:var(--black);box-shadow:inset 0 0 0 2px var(--black)}
.btn-outline:hover{background:var(--black);color:var(--white)}
.dark .btn-outline{color:var(--white);box-shadow:inset 0 0 0 2px rgba(255,255,255,.5)}
/* Hero liegt auf dunklem Bild – Outline-Button dort hell */
.hero-body .btn-outline{color:var(--white);box-shadow:inset 0 0 0 2px rgba(255,255,255,.55)}
.hero-body .btn-outline:hover{background:var(--white);color:var(--black);box-shadow:inset 0 0 0 2px var(--white)}
.dark .btn-outline:hover{background:var(--white);color:var(--black);box-shadow:inset 0 0 0 2px var(--white)}
.btn-lg{padding:22px 36px;font-size:clamp(13px,1.05vw,15px)}
.btn-block{display:flex;width:100%}
.btn-arrow::after{content:"→";font-family:var(--font-body);line-height:0;font-size:1.2em;
  transition:transform .35s var(--ease)}
.btn:hover.btn-arrow::after{transform:translateX(5px)}
.domain{font-family:var(--font-tech);letter-spacing:.2em;text-transform:uppercase}

/* ---------- Layout ---------- */
.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--pad-x)}
.section{padding-block:clamp(64px,8vw,128px);position:relative}
.section-sm{padding-block:clamp(44px,5vw,78px)}
.dark{background:var(--black);color:var(--white)}
.white{background:var(--white)}
[id]{scroll-margin-top:calc(var(--nav-h) + 12px)}
.sec-head{max-width:800px;margin-bottom:clamp(36px,4vw,62px)}
.sec-head.center{margin-inline:auto;text-align:center}

/* Keyvisual */
.kv-dark{background:var(--black) url("../img/pattern-dark.svg") 0 0 repeat}
.kv-moon{background:var(--moon) url("../img/pattern-moon.svg") 0 0 repeat}
.kv-candy{background:var(--candy) url("../img/pattern-candy.svg") 0 0 repeat}
.kv-dark,.kv-moon,.kv-candy{background-size:clamp(68px,6.8vw,108px) auto}
.kv-strip{height:clamp(56px,6vw,92px);background:var(--candy)}

/* ---------- Navigation (aus v2) ---------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:1200;height:var(--nav-h);display:flex;
  align-items:center;gap:clamp(14px,2vw,34px);padding-inline:clamp(18px,3vw,46px);
  color:var(--white);transition:background .35s,height .35s}
/* Bewusst ohne backdrop-filter: Der Blur müsste bei jedem Scroll-Frame neu
   gerechnet werden (Jank), ist bei 96 % Deckung aber ohnehin unsichtbar */
.nav.solid{background:rgba(0,0,0,.96);height:68px}
.nav-logo{flex:0 0 auto;display:flex;align-items:center}
.nav-logo img{height:clamp(34px,3.2vw,44px);width:auto}
.nav>nav{flex:1 1 auto;display:flex;justify-content:center}
.nav-menu{display:flex;align-items:center;gap:clamp(14px,1.9vw,32px);list-style:none;margin:0;padding:0}
.nav-menu a{font-family:var(--font-tech);font-weight:600;font-size:clamp(11px,.92vw,13px);
  letter-spacing:.2em;text-transform:uppercase;padding-block:8px;position:relative;white-space:nowrap}
.nav-menu a::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:2px;
  background:var(--candy);transform:scaleX(0);transform-origin:right;transition:transform .35s var(--ease)}
.nav-menu a:hover::after,.nav-menu a[aria-current]::after{transform:scaleX(1);transform-origin:left}
.nav-actions{flex:0 0 auto;display:flex;align-items:center;gap:14px}
.nav .btn{padding:14px 20px}
.burger{display:flex;flex-direction:column;justify-content:center;gap:5px;width:44px;height:44px;
  background:none;border:0;cursor:pointer;padding:0}
.burger span{display:block;height:3px;width:30px;margin-inline:auto;background:var(--candy);
  transition:transform .35s var(--ease),opacity .2s}
body.menu-open .burger span:nth-child(1){transform:translateY(8px) rotate(45deg)}
body.menu-open .burger span:nth-child(2){opacity:0}
body.menu-open .burger span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}
@media (max-width:1200px){.nav-menu{display:none}.nav-actions .btn{display:none}}

/* ---------- Specials-Dropdown (nur Desktop-Nav; mobil bleibt das Burger-Menü) ----------
   Öffnet per Hover/Fokus und „bowlt“ mit leichtem Überschwinger nach unten,
   die Einträge fallen gestaffelt hinterher. */
.has-drop{position:relative}
.has-drop>a::before{content:"";position:absolute;right:-14px;top:50%;width:6px;height:6px;
  border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:translateY(-70%) rotate(45deg);transition:transform .3s var(--ease)}
.has-drop:hover>a::before,.has-drop:focus-within>a::before{transform:translateY(-35%) rotate(45deg)}
.nav-drop{position:absolute;top:calc(100% + 16px);left:50%;min-width:224px;margin:0;padding:12px 0 14px;
  list-style:none;background:rgba(0,0,0,.96);
  border-top:2px solid var(--candy);
  opacity:0;visibility:hidden;pointer-events:none;transform:translate(-50%,-16px);
  transition:transform .5s cubic-bezier(.34,1.8,.5,1),opacity .25s ease,visibility 0s .35s}
.nav-drop::before{content:"";position:absolute;left:0;right:0;bottom:100%;height:20px} /* Hover-Brücke */
.has-drop:hover>.nav-drop,.has-drop:focus-within>.nav-drop{opacity:1;visibility:visible;pointer-events:auto;
  transform:translate(-50%,0);transition:transform .5s cubic-bezier(.34,1.8,.5,1),opacity .2s ease}
.nav-drop li{opacity:0;transform:translateY(-12px);transition:opacity .18s ease,transform .25s ease}
.has-drop:hover>.nav-drop li,.has-drop:focus-within>.nav-drop li{opacity:1;transform:none;
  transition:opacity .3s ease var(--dd,0s),transform .45s cubic-bezier(.34,1.56,.64,1) var(--dd,0s)}
.nav-drop a{display:block;padding:9px 24px}
.nav-drop a::after{display:none}
.nav-drop a:hover{color:var(--candy)}
@media (prefers-reduced-motion:reduce){
  .nav-drop,.nav-drop li,.has-drop:hover>.nav-drop,.has-drop:hover>.nav-drop li{
    transition:opacity .2s ease;transform:translate(-50%,0)}
  .nav-drop li,.has-drop:hover>.nav-drop li{transform:none}
}

.menu{position:fixed;inset:0;z-index:1150;background:var(--black);color:var(--white);
  display:grid;grid-template-columns:1.2fr 1fr;align-items:center;gap:clamp(30px,6vw,90px);
  padding:calc(var(--nav-h) + 40px) clamp(24px,6vw,100px) 48px;
  clip-path:inset(0 0 100% 0);transition:clip-path .65s var(--ease);overflow-y:auto}
body.menu-open .menu{clip-path:inset(0 0 0 0)}
body.menu-open{overflow:hidden}
.menu-list{list-style:none;margin:0;padding:0}
.menu-list li{border-bottom:1px solid rgba(255,255,255,.16)}
.menu-list a{display:flex;align-items:baseline;gap:18px;padding:clamp(9px,1.2vw,15px) 0;
  font-family:var(--font-head);font-size:clamp(26px,3.6vw,48px);text-transform:uppercase;
  line-height:1;letter-spacing:-.01em;opacity:0;transform:translateY(20px);
  transition:opacity .5s,transform .5s var(--ease),color .25s}
body.menu-open .menu-list a{opacity:1;transform:none}
.menu-list a:hover{color:var(--candy)}
.menu-list .num{font-family:var(--font-tech);font-size:12px;letter-spacing:.2em;color:var(--candy)}
.menu-aside{align-self:center}
.menu-phone{margin-bottom:18px}
.menu-btns{display:grid;gap:14px;justify-items:start;margin-top:26px}
/* Mobiles Menü: Kontaktblock unter der Liste zeigen — kompakt, ohne
   Öffnungszeiten und ohne Reservieren-Button (steht als 07 in der Liste) */
@media (max-width:900px){
  .menu{grid-template-columns:1fr;align-items:start;gap:36px}
  .menu-aside{display:block;padding-top:40px;border-top:0px solid rgba(255,255,255,.18)}
  .menu-aside .menu-hours,.menu-aside .menu-reserve{display:none}
  /* enger zusammen: Titel → Nummer → Adresse */
  .menu-aside .f-head{margin-bottom:8px}
  .menu-aside .menu-phone{margin-bottom:6px}
  /* E-Mail-Button in voller Breite */
  .menu-aside .menu-btns{margin-top:22px;justify-items:stretch}
  .menu-aside .menu-btns .btn{width:100%;justify-content:center}
}

/* ---------- Hero ---------- */
.hero{position:relative;background:var(--moon)}
/* Startseiten-Hero füllt exakt den Viewport – so blitzt im Vollbild unten
   kein heller Streifen der Folgesektion durch. 100svh berücksichtigt die
   ein-/ausblendende Adressleiste mobiler Browser. */
.hero-stage{position:relative;min-height:100svh;display:flex;align-items:flex-end;
  overflow:hidden;background:var(--black)}
@supports not (height:100svh){.hero-stage{min-height:100vh}}
.hero-img{position:absolute;inset:0}
.hero-img img{width:100%;height:100%;object-fit:cover}
.hero-img::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(0,0,0,.9) 0%,rgba(0,0,0,.73) 52%,rgba(0,0,0,.72) 100%)}
/* Rahmen und Störer teilen sich dieselben Bezugswerte, damit ihre Abstände
   zueinander stimmen. Oberkante mit Luft unterhalb der Navigation. */
.hero-stage{--frame-top:calc(var(--nav-h) + 22px);--frame-side:clamp(16px,2vw,30px)}
.hero-stage>.frame{position:absolute;inset:var(--frame-side);top:var(--frame-top);
  bottom:var(--frame-bottom,var(--frame-side));
  border:3px solid var(--candy);z-index:6;pointer-events:none;
  transform:translate(var(--fx,0px),var(--fy,0px));transition:transform .35s var(--ease)}
@media (max-width:720px){
  .hero-stage{--frame-top:calc(var(--nav-h) + 10px);--frame-side:12px}
  .hero-stage>.frame{border-width:2px}
}
.hero-body{position:relative;z-index:3;width:100%;color:var(--white);padding:clamp(28px,4vw,64px);
  padding-top:calc(var(--nav-h) + clamp(30px,5vw,70px));padding-bottom:clamp(48px,5.5vw,86px)}
.page-hero .hero-stage{min-height:clamp(420px,56vh,620px)}
.page-hero .hero-body{padding-bottom:clamp(34px,4vw,64px)}
.hero-sub{max-width:48ch;margin-top:clamp(20px,3.2vw,80px);font-size:clamp(16px,1.15vw,19px)}
.hero-meta{display:flex;flex-wrap:wrap;gap:10px 30px;margin-top:clamp(22px,4.4vw,134px);
  font-family:var(--font-tech);font-size:clamp(12px,1vw,14px);letter-spacing:.2em;text-transform:uppercase}
.hero-meta span{display:flex;align-items:center;gap:10px}
.hero-meta span::before{content:"";width:1em;height:1em;background:var(--candy);
  -webkit-mask:var(--b-mark) center/contain no-repeat;mask:var(--b-mark) center/contain no-repeat}
.hero-ctas{display:flex;flex-wrap:wrap;gap:14px;margin-top:clamp(26px,4.3vw,138px)}
/* Abstand zum Rahmen oben und rechts identisch – Bezug ist --frame-top/--frame-side
   der Bühne, damit beides beim Verschieben des Rahmens synchron bleibt. */
.hero-stoerer{--st-gap:clamp(20px,2.6vw,40px);position:absolute;
  top:calc(var(--frame-top) + var(--st-gap));
  right:calc(var(--frame-side) + var(--st-gap));z-index:4}
.stoerer{display:inline-block;background:var(--mint);color:var(--black);font-family:var(--font-tech);
  font-weight:700;font-size:clamp(12px,1.1vw,16px);letter-spacing:.16em;line-height:1.25;
  text-transform:uppercase;text-align:center;padding:clamp(11px,1.1vw,16px) clamp(16px,1.6vw,24px);
  transform:rotate(-3deg)}
.stoerer strong{display:block;font-size:1.3em;letter-spacing:.08em}

/* ---------- Teaser-Schleier + Taschenlampen-Effekt ----------
   Die Bilder liegen stark verschleiert unter einem dunklen Veil. Beim Hover
   folgt ein Lichtkegel der Maus, in dem das scharfe, farbige Bild durchscheint –
   man entdeckt das neue Design Stück für Stück, ohne dass es gespoilert wird. */
/* Ohne background-Transition: Beim Abschalten des Lichtkegels würden Farbe und
   Verlauf sonst unsynchron animieren — das Bild blitzt dann kurz hell auf */
.cs-veil{position:absolute;inset:0;z-index:1;background:rgba(0,0,0,.86);pointer-events:none}
/* Taschenlampen-Effekt: Der Lichtkegel ist fest in eine übergroße ::after-Ebene
   gemalt und wird nur per transform verschoben (JS setzt --ox/--oy einmal pro
   Frame) — reines GPU-Compositing, kein Neuzeichnen pro Mausbewegung. */
/* Muss auch die spätere .media-tile/.split-media-Regel (94 %) schlagen — sonst
   stapeln sich Schleier UND Kegel-Ebene und das Bild wird doppelt abgedunkelt */
.cs-veil.torch,.media-tile .cs-veil.torch,.split-media .cs-veil.torch{background:none;overflow:hidden}
.cs-veil.torch::after{content:"";position:absolute;left:0;top:0;width:300%;height:300%;
  will-change:transform;transform:translate(var(--ox,-33.33%),var(--oy,-33.33%));
  background:radial-gradient(circle var(--torch-r,90px) at 50% 50%,
    rgba(0,0,0,0) 0%,rgba(0,0,0,.45) 60%,rgba(0,0,0,.86) 100%)}
/* Kleine Bilder (Kacheln, Angebots-Tiles, Split-Bilder): Der Lichtkegel ist
   um 25 % gedimmt — durchgelassenes Licht = (1 − Alpha) × 0,75, der Rand
   bleibt jeweils auf dem Alpha des Basis-Schleiers, damit der Kegel nahtlos
   ausläuft. Nur der Hero behält den vollen, klaren Kegel. */
.tile .cs-veil.torch::after,.pillar .cs-veil.torch::after{
  background:radial-gradient(circle var(--torch-r,90px) at 50% 50%,
    rgba(0,0,0,.25) 0%,rgba(0,0,0,.59) 60%,rgba(0,0,0,.86) 100%)}
.media-tile .cs-veil.torch::after,.split-media .cs-veil.torch::after{
  background:radial-gradient(circle var(--torch-r,90px) at 50% 50%,
    rgba(0,0,0,.36) 0%,rgba(0,0,0,.79) 60%,rgba(0,0,0,.94) 100%)}
/* Touch: Der Finger führt den Lichtkegel — langes Drücken soll dabei nicht
   das System-Kontextmenü ("Bild sichern") oder eine Auswahl auslösen. */
@media (any-pointer:coarse){
  .hero-stage img,.media-tile img,.tile img,.pillar img,.split-media img{
    -webkit-touch-callout:none;-webkit-user-select:none;user-select:none}
}
/* Kleine Taschenlampe als Mauszeiger über den verschleierten Bildern. Der
   Hotspot (7 7) sitzt am Lampenkopf — genau dort, wo das JS den Lichtkegel
   zentriert, die Lampe "leuchtet" also sichtbar in den Kegel hinein. Nur für
   Maus-Geräte; Links im Bild behalten per UA-Stylesheet ihren Pointer. */
@media (pointer:fine){
  .hero-stage,.media-tile,.tile,.pillar,.split-media{
    cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26' viewBox='0 0 24 24'%3E%3Cg transform='rotate(-45 12 12)'%3E%3Cpath d='M12 .9v1.9M7.9 2.1l1.2 1.6M16.1 2.1l-1.2 1.6' stroke='%23ffd76a' stroke-width='1.7' stroke-linecap='round' fill='none'/%3E%3Cpath d='M7.5 4h9v3l-2.2 3v10.5a2.3 2.3 0 0 1-4.6 0V10L7.5 7z' fill='%232a2a2a' stroke='%23fff' stroke-linejoin='round'/%3E%3Crect x='8.4' y='5' width='7.2' height='1.4' rx='.7' fill='%23ffe9a8'/%3E%3Crect x='9.7' y='11.2' width='4.6' height='1.7' fill='%23ffb9ff'/%3E%3C/g%3E%3C/svg%3E") 7 7,auto}
}

/* ---------- Buchungs-Panel (aus v2): weiß, überlappt den Hero ---------- */
.booking{position:relative;z-index:10;margin:calc(var(--panel-overlap) * -1) auto 0;
  max-width:calc(var(--maxw) - 40px);background:var(--white);color:var(--black);
  box-shadow:0 40px 90px -50px rgba(0,0,0,.55)}
.booking-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;
  gap:12px 24px;padding:clamp(20px,2vw,28px) clamp(20px,2.4vw,34px) 0}
.booking-note{font-family:var(--font-tech);font-size:12px;letter-spacing:.2em;
  text-transform:uppercase;opacity:.55}
/* Mobil: Panel startet eingeklappt — nur die Kopfzeile mit Pfeil ist sichtbar,
   damit das Panel beim Einstieg nicht so viel Platz einnimmt (main.js toggelt) */
.bk-toggle{display:none;flex:0 0 auto;width:38px;height:38px;border:0;background:var(--moon);
  cursor:pointer;position:relative;margin-left:auto}
.bk-toggle::before{content:"";position:absolute;left:50%;top:50%;width:9px;height:9px;
  border-right:2px solid var(--black);border-bottom:2px solid var(--black);
  transform:translate(-50%,-68%) rotate(45deg);transition:transform .3s var(--ease)}
.booking.is-open .bk-toggle::before{transform:translate(-50%,-32%) rotate(225deg)}
@media (max-width:720px){
  .bk-toggle{display:block}
  .booking-head{cursor:pointer;align-items:center;gap:20px;
    position:relative;padding-right:72px;padding-bottom: 30px;}
  /* Pfeil rechts, vertikal mittig neben dem Text */
  .bk-toggle{position:absolute;right:20px;top:50%;transform:translateY(-50%);margin:0}
  .bk-body{height:0;overflow:hidden;transition:height .45s var(--ease)}
  .booking.is-open .bk-body{height:auto;overflow:visible}
}
.booking-grid{display:grid;grid-template-columns:repeat(4,1fr) auto;gap:0;
  padding:clamp(16px,1.8vw,24px) clamp(20px,2.4vw,34px) clamp(20px,2.4vw,34px);align-items:end}
/* Spaltenvarianten des Wizards — als Klassen statt Inline-Styles, damit die
   Mobile-Media-Queries unten greifen können (:where hält die Spezifität niedrig) */
.booking-grid:where(.bg-2){grid-template-columns:repeat(2,1fr) auto}
.booking-grid:where(.bg-3){grid-template-columns:repeat(3,1fr) auto}
.bf{padding-right:clamp(16px,1.8vw,26px);position:relative}
.bf + .bf::before{content:"";position:absolute;left:0;top:6px;bottom:6px;width:1px;
  background:var(--line)}
.bf + .bf{padding-left:clamp(16px,1.8vw,26px)}
.bf label{display:block;font-family:var(--font-tech);font-size:11px;letter-spacing:.24em;
  text-transform:uppercase;opacity:.55;margin-bottom:10px}
.bf select,.bf input{width:100%;border:0;background:transparent;font-family:var(--font-head);
  font-size:clamp(20px,1.9vw,30px);text-transform:uppercase;letter-spacing:-.01em;line-height:1;
  padding:0;cursor:pointer;-webkit-appearance:none;appearance:none}
.bf select:focus,.bf input:focus{outline:none}
.bf-select{position:relative}
.bf-select::after{content:"";position:absolute;right:clamp(16px,1.8vw,26px);bottom:9px;
  width:11px;height:7px;background:var(--black);clip-path:polygon(0 0,100% 0,50% 100%);
  pointer-events:none}
.booking-grid .btn{align-self:stretch}
.booking-result{padding:0 clamp(20px,2.4vw,34px) clamp(20px,2.4vw,34px);font-size:15px}
@media (max-width:1080px){
  .booking-grid{grid-template-columns:repeat(2,1fr);gap:22px 0}
  .booking-grid .btn{grid-column:1/-1;margin-top:6px}
  .bf:nth-child(odd){padding-left:0}
  .bf:nth-child(odd)::before{display:none}
}
@media (max-width:560px){
  .booking-grid{grid-template-columns:1fr}
  .bf{padding:0 0 18px;border-bottom:1px solid var(--line)}
  .bf + .bf{padding-left:0;padding-top:18px}
  .bf + .bf::before{display:none}
  .bf:last-of-type{border-bottom:0}
  /* Pfeil im gestapelten Layout: rechtsbündig auf Höhe des Feldes
     (18px Feld-Unterkante + 9px), so liegt er wieder über dem Select */
  .bf-select::after{right:0;bottom:27px}
}
/* Rahmen des Startseiten-Heroes schließt über dem Panel */
/* Startseite: Bühne bekommt Zusatzhöhe, damit der Hero-Inhalt trotz tieferem
   Panel-Eintauchen so großzügig bleibt wie zuvor. Der Rahmen läuft wieder tief –
   seine Unterkante liegt hinter dem weißen Panel. */
.home-hero .hero-stage{min-height:calc(100svh + 64px)}
@supports not (height:100svh){.home-hero .hero-stage{min-height:calc(100vh + 64px)}}
.home-hero .hero-body{padding-bottom:calc(var(--panel-overlap) + 248px)}

/* ---------- Collage + Kennzahlen (aus v1) ---------- */
.collage{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(14px,1.8vw,28px)}
.collage .c1{grid-column:1/8;aspect-ratio:16/10}
.collage .c2{grid-column:8/13;aspect-ratio:4/4.6;margin-top:clamp(30px,6vw,110px)}
.collage .c3{grid-column:2/7;aspect-ratio:4/3;margin-top:calc(clamp(30px,5vw,90px) * -1)}
.collage .c4{grid-column:7/12;aspect-ratio:16/9}
/* Mobil: Collage komplett ausblenden (nur Startseite, 25-Jahre-Sektion) */
@media (max-width:720px){
  .collage{display:none}
}
.media-tile{position:relative;overflow:hidden;background:var(--graphite)}
.media-tile img{width:100%;height:100%;object-fit:cover}
.media-tile::before{content:"";position:absolute;inset:13px;border:2px solid var(--candy);
  z-index:3;pointer-events:none;transform:translate(var(--fx,0px),var(--fy,0px));
  transition:transform .3s var(--ease)}
.media-tile:hover::before{animation:frame-wiggle .65s ease}
/* Collage & Split-Bilder ohne Zusatz-Verlauf: Veil kräftiger als bei Säulen/Kacheln */
.media-tile .cs-veil,.split-media .cs-veil{background:rgba(0,0,0,.94)}

.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,48px)}
@media (max-width:720px){.stats{grid-template-columns:1fr}}
.stat{border-top:3px solid var(--black);padding-top:18px}
.dark .stat{border-color:var(--candy)}
.stat-num{font-family:var(--font-head);font-size:clamp(44px,4.8vw,80px);line-height:.84;
  text-transform:uppercase;letter-spacing:-.01em;white-space:nowrap}
.stat-num [data-count]{display:inline-block;text-align:right}
.stat-label{margin-top:12px;font-weight:500;font-size:15px}

/* ---------- Reservierungs-Wizard (iambowl) ----------
   Kantige Flächen gemäß CI; Orange/Rot sind funktionale Warnfarben des Timers. */
:root{--rv-warn:#ff9425;--rv-crit:#e23636;
  /* Wie tief das Buchungs-Panel ins Hero-Bild ragt: ≈ halbe Panel-Höhe */
  --panel-overlap:clamp(132px,10.5vw,146px)}

/* Schritt-Leiste */
.rv-steps{display:flex;list-style:none;margin:0;padding:clamp(14px,1.6vw,20px) clamp(20px,2.4vw,34px) 0;
  gap:clamp(10px,1.6vw,24px);flex-wrap:wrap;counter-reset:none}
.form-box .rv-steps{padding-top:0}
.rv-steps li{display:flex;align-items:baseline;gap:.55em;opacity:.38;
  transition:opacity .3s;position:relative}
.rv-steps li b{font-family:var(--font-head);font-weight:400;font-size:clamp(20px,1.9vw,30px);
  line-height:1;letter-spacing:-.01em}
.rv-steps li span{font-family:var(--font-tech);font-weight:600;font-size:clamp(10px,.9vw,12px);
  letter-spacing:.2em;text-transform:uppercase}
.rv-steps li.is-active{opacity:1}
.rv-steps li.is-active b{color:transparent;-webkit-text-stroke:0;background:var(--candy);
  background-clip:text;-webkit-background-clip:text}
.rv-steps li.is-active::after{content:"";position:absolute;left:0;right:0;bottom:-8px;height:3px;
  background:var(--candy)}
.rv-steps li.is-done{opacity:.75;cursor:pointer}
.rv-steps li.is-done:hover{opacity:1}
/* Mobil: Schrittleiste kompakt, damit alle vier Schritte in eine Zeile passen */
@media (max-width:560px){
  .rv-steps{gap:8px 14px}
  .rv-steps li{gap:.4em}
  .rv-steps li b{font-size:15px}
  .rv-steps li span{font-size:8.5px;letter-spacing:.1em}
  .rv-steps li.is-active::after{bottom:-5px;height:2px}
}

/* Schritt-Körper — hier saß das fehlende Seitenpadding */
.rv-body{padding:clamp(16px,1.8vw,24px) clamp(20px,2.4vw,34px) clamp(20px,2.4vw,34px)}
.rv-step{display:block}
.rv-step[hidden]{display:none}
.rv-label{display:block;font-family:var(--font-tech);font-weight:600;font-size:clamp(11px,.95vw,13px);
  letter-spacing:.22em;text-transform:uppercase;opacity:.55;margin-bottom:14px}
.rv-nav{display:flex;align-items:center;justify-content:space-between;gap:16px;
  margin-top:clamp(18px,2vw,26px)}
.rv-back{background:none;border:0;padding:0;cursor:pointer;font-family:var(--font-tech);
  font-weight:600;font-size:12px;letter-spacing:.18em;text-transform:uppercase;opacity:.6}
.rv-back:hover{opacity:1}

/* Schritt 1: Auswahlfelder + Kalender */
.rv-cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(14px,1.8vw,26px);
  margin-bottom:clamp(16px,1.8vw,24px)}
@media (max-width:640px){.rv-cols{grid-template-columns:1fr}}
.rv-field label{display:block;font-family:var(--font-tech);font-size:11px;letter-spacing:.24em;
  text-transform:uppercase;opacity:.55;margin-bottom:10px}
.rv-selectwrap{position:relative;border-bottom:2px solid rgba(0,0,0,.2)}
.rv-selectwrap select{width:100%;border:0;background:transparent;font-family:var(--font-head);
  font-size:clamp(20px,1.9vw,28px);text-transform:uppercase;letter-spacing:-.01em;line-height:1.15;
  padding:0 26px 6px 0;cursor:pointer;-webkit-appearance:none;appearance:none}
.rv-selectwrap select:focus{outline:none}
.rv-selectwrap::after{content:"";position:absolute;right:4px;bottom:12px;width:11px;height:7px;
  background:var(--black);clip-path:polygon(0 0,100% 0,50% 100%);pointer-events:none}

/* Datum-Feld + Kalender-Popover */
.rv-datewrap{position:relative}
.rv-datebtn{width:100%;border:0;background:transparent;text-align:left;cursor:pointer;
  font-family:var(--font-head);font-size:clamp(20px,1.9vw,30px);text-transform:uppercase;
  letter-spacing:-.01em;line-height:1;padding:0}
.rv-datebtn:focus{outline:none}
.rv-datebtn.is-empty{opacity:.45}
.rv-pop{position:absolute;top:calc(100% + 14px);left:0;z-index:40;background:var(--white);
  padding:16px;width:min(340px,88vw);
  box-shadow:0 34px 80px -34px rgba(0,0,0,.5),inset 0 0 0 1px rgba(0,0,0,.12)}
.rv-pop::before{content:"";position:absolute;top:-7px;left:26px;width:14px;height:14px;
  background:var(--white);transform:rotate(45deg);box-shadow:inset 1px 1px 0 rgba(0,0,0,.12)}
.rv-cal{max-width:100%}
.rv-cal-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}
.rv-cal-title{font-family:var(--font-head);font-size:clamp(19px,1.7vw,26px);text-transform:uppercase;
  letter-spacing:-.01em}
.rv-cal-nav{width:38px;height:38px;border:0;background:var(--moon);cursor:pointer;font-size:20px;
  line-height:1;display:grid;place-items:center;transition:background .2s,color .2s}
.rv-cal-nav:hover:not(:disabled){background:var(--black);color:var(--candy)}
.rv-cal-nav:disabled{opacity:.3;cursor:default}
.rv-cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.rv-cal-wd{font-family:var(--font-tech);font-weight:600;font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;opacity:.45;text-align:center;padding:6px 0}
.rv-cal-day{position:relative;aspect-ratio:1;border:0;background:var(--moon);cursor:pointer;
  font-family:var(--font-tech);font-weight:600;font-size:clamp(13px,1.1vw,15px);
  display:grid;place-items:center;transition:background .15s,color .15s}
.rv-cal-day:hover:not(:disabled){background:var(--black);color:var(--candy)}
.rv-cal-day.is-sel{background:var(--candy);color:var(--black);
  box-shadow:inset 0 0 0 2px var(--black)}
.rv-cal-day:disabled{cursor:default;color:rgba(0,0,0,.28);background:rgba(0,0,0,.04)}
.rv-cal-day.is-closed::after{content:"";position:absolute;left:22%;right:22%;top:50%;height:2px;
  background:rgba(0,0,0,.35);transform:rotate(-18deg)}
.rv-cal-day.is-full::after{content:"voll";position:absolute;left:0;right:0;bottom:4px;
  font-size:8px;letter-spacing:.1em;text-transform:uppercase;opacity:.7}
.rv-cal-day.is-other{visibility:hidden}
.rv-cal-legend{display:flex;gap:18px;margin-top:12px;font-size:12px;opacity:.65;flex-wrap:wrap}
.rv-cal-legend .lg{display:flex;align-items:center;gap:7px}
.rv-cal-legend .lg::before{content:"";width:13px;height:13px;background:var(--moon)}
.rv-cal-legend .lg-sel::before{background:var(--candy);box-shadow:inset 0 0 0 1.5px var(--black)}
.rv-cal-legend .lg-closed::before{background:linear-gradient(to top right,transparent 44%,rgba(0,0,0,.4) 46%,rgba(0,0,0,.4) 54%,transparent 56%),rgba(0,0,0,.05)}
.rv-cal-legend .lg-full::before{background:rgba(0,0,0,.09)}
.rv-pop .rv-cal-title{font-size:17px}
.rv-pop .rv-cal-nav{width:30px;height:30px;font-size:16px}
.rv-pop .rv-cal-grid{gap:3px}
.rv-pop .rv-cal-wd{font-size:9px;padding:3px 0}
.rv-pop .rv-cal-day{font-size:12px}
.rv-pop .rv-cal-day.is-full::after{font-size:7px;bottom:2px}
.rv-pop .rv-cal-legend{font-size:11px;gap:14px;margin-top:10px}
/* ---------- Custom-Dropdowns für Spiel & Personen — im Look des Kalenders.
   Das native <select> bleibt unsichtbar als Formular-Status erhalten;
   Button + Popup werden von main.js ergänzt. ---------- */
.bf-select select.sel-native{display:none}
.rv-selbtn{width:100%;border:0;background:transparent;text-align:left;cursor:pointer;
  font-family:var(--font-head);font-size:clamp(20px,1.9vw,30px);text-transform:uppercase;
  letter-spacing:-.01em;line-height:1.1;padding:0;color:inherit;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.rv-selbtn:focus{outline:none}
.rv-selbtn:disabled{opacity:.45;cursor:default}
.rv-selpop{width:min(272px,86vw)}
.rv-opts{display:grid;gap:4px;max-height:314px;overflow:auto}
.rv-opts.is-grid{grid-template-columns:repeat(4,1fr);max-height:none}
.rv-opt{border:0;background:var(--moon);cursor:pointer;font-family:var(--font-tech);
  font-weight:600;font-size:13px;letter-spacing:.06em;padding:12px 14px;text-align:left;
  transition:background .15s,color .15s}
.rv-opts.is-grid .rv-opt{aspect-ratio:1;display:grid;place-items:center;padding:0;
  font-size:14px;text-align:center}
.rv-opt:hover{background:var(--black);color:var(--candy)}
.rv-opt.is-sel{background:var(--candy);color:var(--black)}
.bf-select::after{transition:transform .25s var(--ease)}
.bf-select.open::after{transform:rotate(180deg)}
/* breite Option im Zahlen-/Zeiten-Raster (z. B. „mehr als 20“) */
.rv-opts.is-grid .rv-opt.wide{grid-column:1/-1;aspect-ratio:auto;padding:12px 14px}

/* Feld-Variante für die Anfrage-Formulare (Betriebsfeiern, JGA, Schulklassen …):
   Button sieht aus wie die übrigen Formularfelder, Popup wie der Kalender. */
.f select.sel-native,.f input.date-native{display:none}
.f-selbtn{width:100%;background:var(--moon);border:0;border-bottom:2px solid rgba(0,0,0,.2);
  padding:14px 14px;font-size:16px;font-family:inherit;color:inherit;text-align:left;
  cursor:pointer;border-radius:0;transition:background .2s,border-color .2s}
.f-selbtn:focus{outline:none;border-bottom-color:var(--black);background:#e7e7e7}
.f-selbtn.is-empty{color:rgba(0,0,0,.5)}
.f-select.open::after{transform:rotate(180deg)}
.f-select::after{transition:transform .25s var(--ease)}
.f .rv-pop{width:min(320px,92vw)}

/* Kompakte Termin-Zeile: Weiter-Button bündig wie im Ursprungs-Panel */
.rv-step .booking-grid{padding:0}
.rv-step .booking-grid .btn{align-self:stretch}

/* Schritt 2: Angebote */
.rv-offer-list{display:grid;gap:10px}
.rv-offer{display:flex;flex-wrap:wrap;align-items:center;gap:6px 16px;width:100%;text-align:left;
  border:0;box-shadow:inset 0 0 0 1.5px rgba(0,0,0,.16);background:var(--white);
  padding:clamp(14px,1.5vw,18px) clamp(16px,1.8vw,22px);cursor:pointer;font:inherit;
  transition:box-shadow .15s}
.rv-offer:hover:not(:disabled){box-shadow:inset 0 0 0 2px var(--candy)}
.rv-offer.rv-on{box-shadow:inset 0 0 0 2px var(--black);background:var(--candy)}
.rv-offer:disabled{opacity:.5;cursor:default}
.rv-offer-name{font-family:var(--font-head);font-size:clamp(17px,1.5vw,22px);text-transform:uppercase;
  letter-spacing:-.01em}
.rv-offer-name em{font-style:normal;font-family:var(--font-body);font-size:12px;font-weight:700;
  background:var(--mint);padding:3px 8px;margin-left:8px;text-transform:none;letter-spacing:0}
.rv-offer-chips{font-size:13px;opacity:.6}
.rv-offer-price{margin-left:auto;font-family:var(--font-head);font-size:clamp(19px,1.7vw,26px);
  text-transform:uppercase;letter-spacing:-.01em;text-align:right}
.rv-offer-price small{display:block;font-family:var(--font-body);font-size:11px;font-weight:500;
  letter-spacing:0;text-transform:none;opacity:.55}
.rv-durs{display:flex;gap:8px;flex-wrap:wrap;width:100%;margin-top:8px}
.rv-dur{border:0;box-shadow:inset 0 0 0 1.5px rgba(0,0,0,.2);background:var(--white);
  padding:10px 14px;cursor:pointer;font-family:var(--font-tech);font-weight:600;font-size:12px;
  letter-spacing:.1em;text-transform:uppercase;transition:box-shadow .15s,background .15s}
.rv-dur:hover{box-shadow:inset 0 0 0 2px var(--candy)}
.rv-dur.rv-on{background:var(--black);color:var(--candy);box-shadow:none}

/* Schritt 3: Uhrzeiten */
.rv-slots{display:flex;flex-wrap:wrap;gap:8px}
.rv-slot{border:0;box-shadow:inset 0 0 0 1.5px rgba(0,0,0,.2);background:var(--white);
  padding:12px 16px;cursor:pointer;font-family:var(--font-head);font-size:clamp(16px,1.4vw,20px);
  letter-spacing:-.01em;display:grid;gap:2px;justify-items:center;min-width:92px;
  transition:box-shadow .15s,background .15s}
.rv-slot small{font-family:var(--font-body);font-size:11px;font-weight:500;opacity:.55}
.rv-slot:hover{box-shadow:inset 0 0 0 2px var(--candy)}
.rv-slot.rv-on{background:var(--candy);box-shadow:inset 0 0 0 2px var(--black)}

/* Schritt 4: Daten + Zusammenfassung */
.rv-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
@media (max-width:640px){.rv-fields{grid-template-columns:1fr}}
.rv-fields input,.rv-krow input[type="number"],.rv-note,.rv-krow input[type="time"]{
  width:100%;background:var(--moon);border:0;border-bottom:2px solid rgba(0,0,0,.2);
  padding:13px 14px;font-size:15px;border-radius:0;-webkit-appearance:none;appearance:none}
.rv-fields input:focus,.rv-note:focus{outline:none;border-bottom-color:var(--black);background:#e7e7e7}
.rv-krow{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:14px;font-size:14px}
/* Extras-Auswahl im Daten-Schritt (Leihschuhe, Nuggets …) */
.rv-extras{display:grid;gap:10px;margin-top:18px}
.rv-extras .rv-label{margin-bottom:2px}
.rv-extra{display:flex;align-items:center;gap:12px;flex-wrap:wrap;font-size:14px}
.rv-extra label{display:inline-flex;align-items:center;gap:9px;cursor:pointer}
.rv-extra input[type="checkbox"]{width:17px;height:17px;accent-color:var(--candy)}
.rv-extra .xprice{opacity:.6}
.rv-extra input[type="number"]{width:72px;background:var(--moon);border:0;
  border-bottom:2px solid rgba(0,0,0,.2);padding:7px 10px;font-size:14px}
.rv-krow>label:first-child{font-family:var(--font-tech);font-weight:600;font-size:11px;
  letter-spacing:.2em;text-transform:uppercase;opacity:.6}
.rv-krow input[type="number"]{width:90px}
.rv-radio{display:flex;align-items:center;gap:7px;cursor:pointer}
.rv-note{margin-top:14px;min-height:64px;resize:vertical;font:inherit;font-size:15px}
.rv-sumline{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;
  flex-wrap:wrap;margin-top:clamp(16px,1.8vw,24px);padding-top:clamp(14px,1.6vw,20px);
  border-top:1px solid rgba(0,0,0,.12)}
.rv-summary{display:grid;gap:3px;font-size:14px}
.rv-summary .rv-total{font-family:var(--font-head);font-size:clamp(24px,2.2vw,34px);
  letter-spacing:-.01em;margin-top:4px}
.rv-sumside{display:flex;align-items:center;gap:14px;flex-wrap:wrap}

/* Hold-Timer: unsichtbar bis 60 s · 60–30 s orange · unter 30 s rot blinkend */
.rv-hold{font-family:var(--font-tech);font-weight:700;font-size:12px;letter-spacing:.16em;
  text-transform:uppercase;padding:10px 13px;color:var(--white);white-space:nowrap}
.rv-hold.is-warn{background:var(--rv-warn);color:var(--black)}
.rv-hold.is-crit{background:var(--rv-crit);animation:rv-blink 1s steps(2,start) infinite}
@keyframes rv-blink{50%{opacity:.35}}
@media (prefers-reduced-motion:reduce){.rv-hold.is-crit{animation:none}}

.rv-error{margin:14px 0 0;background:#fdecec;color:#8f1f1f;padding:12px 14px;font-size:14px}
.rv-preset{margin:12px 0 0;background:var(--moon);padding:12px 14px;font-size:14px}
.booking .rv-error,.booking .rv-preset{margin:14px 0 0}

/* ---------- Coming-soon-Chip auf allen Teaser-Bildern ---------- */
.cs-chip{position:absolute;top:26px;right:26px;z-index:7;display:inline-flex;
  align-items:center;gap:.55em;background:var(--black);color:var(--candy);
  font-family:var(--font-tech);font-weight:700;font-size:clamp(10px,.85vw,12px);
  letter-spacing:.24em;text-transform:uppercase;padding:9px 13px;
  transform:rotate(-2deg);pointer-events:none}
.cs-chip::before{content:"";width:1em;height:1em;background:var(--candy);
  -webkit-mask:var(--b-mark) center/contain no-repeat;mask:var(--b-mark) center/contain no-repeat}
@media (max-width:720px){.cs-chip{top:20px;right:20px;padding:7px 10px}}

/* ---------- Live-Countdown (ersetzt den statischen Störer; Neo Mint gemäß CI) ---------- */
.countdown{display:inline-block;background:var(--mint);color:var(--black);
  padding:clamp(14px,1.5vw,22px) clamp(18px,2vw,30px);transform:rotate(-3deg);
  text-align:center;box-shadow:0 18px 44px -22px rgba(0,0,0,.75)}
.cd-label{display:block;font-family:var(--font-tech);font-weight:700;
  font-size:clamp(11px,1vw,14px);letter-spacing:.18em;text-transform:uppercase;
  margin-bottom:clamp(6px,.7vw,10px)}
.cd-grid{display:flex;align-items:flex-start;justify-content:center;gap:clamp(6px,.7vw,12px)}
.cd-cell{display:flex;flex-direction:column;align-items:center;gap:3px}
.cd-cell b{font-family:var(--font-head);font-weight:400;font-size:clamp(26px,2.6vw,44px);
  line-height:.9;letter-spacing:0;min-width:2.1ch;text-align:center;
  font-variant-numeric:tabular-nums}
.cd-cell i{font-family:var(--font-tech);font-style:normal;font-weight:600;
  font-size:clamp(9px,.75vw,11px);letter-spacing:.22em;text-transform:uppercase;opacity:.72}
.cd-sep{font-family:var(--font-head);font-size:clamp(20px,2vw,32px);line-height:1.15;opacity:.45}
/* Mobil: kompakter Chip statt dominantem Banner — Label zweizeilig,
   Ziffern deutlich kleiner, damit der Hero-Inhalt die Bühne behält. */
/* Mobil: Countdown als vollbreite Leiste ganz oben (top:0) statt Chip im Hero.
   Die Nav rückt um die Leistenhöhe nach unten — nur auf der Startseite
   (Klasse has-cd-bar am Layout-Wurzelelement, gesetzt in default.vue). */
@media (max-width:720px){
  :root{--cd-bar-h:58px}
  .hero-stoerer{position:fixed;top:0;left:0;right:0;z-index:1210}
  .countdown{display:flex;flex-direction:column;justify-content:center;align-items:center;
    gap:3px;width:100%;height:var(--cd-bar-h);padding:6px 10px;
    transform:none;box-shadow:none}
  .cd-label{font-size:9px;letter-spacing:.12em;margin-bottom:0;line-height:1.2}
  .cd-grid{gap:4px}
  .cd-cell{gap:2px}
  .cd-cell b{font-size:20px;min-width:2ch}
  .cd-cell i{font-size:7px;letter-spacing:.14em}
  .cd-sep{font-size:11px;line-height:1.25;opacity:.35}
  .has-cd-bar .nav{top:var(--cd-bar-h)}
  .home-hero{margin-top:var(--cd-bar-h)}
  /* Kompakter Hero: Inhalt bestimmt die Höhe, statt 100svh + Desktop-Luft —
     unten bleibt nur das Panel-Eintauchen plus etwas Abstand zu den Buttons */
  .home-hero .hero-stage{min-height:0}
  .home-hero .hero-body{padding-bottom:calc(var(--panel-overlap) + 40px)}
  /* … aber mit Luft zwischen den Textblöcken (die clamp-Abstände
     kollabieren auf schmalen Screens sonst alle aufs Minimum) */
  .home-hero .hero-body .eyebrow{margin-bottom:24px}
  .home-hero .hero-meta{margin-top:34px;gap:15px 28px}
  .home-hero .hero-ctas{margin-top:36px;gap:14px}
  /* Rahmen oberhalb des Buchungs-Panels beenden, damit er komplett sichtbar bleibt */
  .home-hero .hero-stage{--frame-bottom:calc(var(--panel-overlap) + 12px)}
  /* Panel muss tiefer reichen, als es in den Hero eintaucht — sonst blitzt zwischen
     Panelunterkante und Keyvisual ein schwarzer Streifen Hero-Rest auf */
  .booking{min-height:calc(var(--panel-overlap) + 28px)}
}

/* ---------- Willkommens-Statement (Startseite; Neo Mint, gemalter Look) ----------
   Unregelmäßige Radien + Gegenrotation des Schattenstrichs lassen die Box wie
   mit dem Marker gemalt wirken; Typo wie .headline (Klasse wird mitgegeben). */
.welcome-note{position:relative;display:inline-block;background:var(--mint);color:var(--black);
  margin-top:clamp(10px,1.2vw,16px);padding:clamp(18px,2vw,28px) clamp(20px,2.4vw,34px);
  font-size:clamp(22px,1.5vw,34px);line-height:.95;
  border-radius:255px 18px 225px 16px/16px 225px 18px 255px;
  transform:rotate(-1.5deg);box-shadow:0 18px 44px -22px rgba(0,0,0,.75)}
.welcome-note::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--mint);
  opacity:.3;border-radius:225px 16px 255px 18px/18px 255px 16px 225px;
  transform:rotate(2deg) translate(6px,8px)}

/* ---------- Zwei-Säulen-Leistungen (Bowling / Social-Darts gleichwertig) ---------- */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2vw,28px)}
@media (max-width:860px){.duo{grid-template-columns:1fr}}
.pillar{position:relative;overflow:hidden;min-height:clamp(420px,52vw,560px);display:flex;
  align-items:flex-end;background:var(--graphite);color:var(--white)}
.pillar img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform .8s var(--ease)}
.pillar::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(0,0,0,.9) 8%,rgba(0,0,0,.45) 62%)}
.pillar:hover img{transform:scale(1.05)}
.pillar::before{content:"";position:absolute;inset:14px;border:2px solid var(--candy);z-index:3;
  pointer-events:none;transform:translate(var(--fx,0px),var(--fy,0px));transition:transform .3s var(--ease)}
.pillar:hover::before{animation:frame-wiggle .65s ease}
@keyframes frame-wiggle{0%{rotate:0deg}30%{rotate:2.2deg}65%{rotate:-1.5deg}100%{rotate:0deg}}
.pillar-body{position:relative;z-index:2;padding:clamp(24px,3vw,44px);width:100%}
.pillar-tag{font-family:var(--font-tech);font-size:clamp(12px,1vw,14px);letter-spacing:.24em;
  text-transform:uppercase;color:var(--candy);display:block;margin-bottom:12px}
.pillar-list{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:7px;font-size:15px}
.pillar-list>*{padding-left:24px;position:relative}
.pillar-list>*::before{content:"";position:absolute;left:0;top:.34em;width:.8em;height:.8em;
  background:var(--candy);-webkit-mask:var(--b-mark) center/contain no-repeat;
  mask:var(--b-mark) center/contain no-repeat}
.pillar .btn{margin-top:22px}

/* ---------- Karten-Raster ---------- */
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.6vw,24px)}
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,1.5vw,22px)}
@media (max-width:1000px){.grid3,.grid4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.grid3,.grid4{grid-template-columns:1fr}}

.tile{position:relative;display:block;overflow:hidden;aspect-ratio:3/4;background:var(--graphite);color:var(--white)}
.tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.tile::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(0,0,0,.9) 6%,rgba(0,0,0,.45) 58%)}
.tile:hover img{transform:scale(1.06)}
.tile::before{content:"";position:absolute;inset:13px;border:2px solid var(--candy);z-index:3;
  pointer-events:none;transform:translate(var(--fx,0px),var(--fy,0px));transition:transform .3s var(--ease)}
.tile:hover::before{animation:frame-wiggle .65s ease}
.tile-body{position:absolute;inset:auto 0 0 0;z-index:2;padding:clamp(20px,2vw,28px)}
.tile-tag{font-family:var(--font-tech);font-size:clamp(11px,.95vw,13px);letter-spacing:.22em;
  text-transform:uppercase;color:var(--candy);display:block;margin-bottom:8px}
.tile-body .headline{display:block;font-size:clamp(21px,1.8vw,28px)}
.tile-more{display:flex;width:fit-content;align-items:center;gap:9px;margin-top:12px;
  font-family:var(--font-tech);font-size:clamp(11px,.95vw,13px);letter-spacing:.2em;
  text-transform:uppercase;color:var(--white)}
.tile-more::after{content:"→";font-family:var(--font-body)}

/* ---------- „Bald verfügbar“-Overlay (NUXT_PUBLIC_BOOKING_LIVE=false) ----------
   html.bk-offline legt über jedes Buchungs- und Anfrage-Panel eine dunkle,
   leicht geblurrte Fläche mit schräger Candy-Schmuckschrift. */
/* overflow:hidden: das rotierte Overlay ragt sonst seitlich über das Panel
   hinaus und erzeugt horizontales Scrollen auf Mobil */
.bk-offline [data-rv],.bk-offline form[data-booking]{position:relative;pointer-events:none;overflow:hidden}
.bk-offline [data-rv]::before,.bk-offline form[data-booking]::before{
  content:"";position:absolute;inset:0;z-index:60;background:rgba(0,0,0,.55);
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.bk-offline [data-rv]::after,.bk-offline form[data-booking]::after{
  content:"Buchungen gehen bald los …";position:absolute;inset:0;z-index:61;
  display:grid;place-items:center;padding:20px;text-align:center;
  font-family:var(--font-script);color:var(--candy);font-size:clamp(26px,3vw,44px);
  line-height:1;transform:rotate(-6deg)}

/* ---------- Specials-Mosaik (Leistungen-Sektion): kompakt, drei pro Reihe ---------- */
.mosaic{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(10px,1.2vw,16px);align-content:start}
.mosaic .tile{aspect-ratio:1/1}
.mosaic .m-w{grid-column:span 2;aspect-ratio:2.1/1}   /* breite Abschlusskachel */
.mosaic .tile::before{inset:8px}
.mosaic .tile-body{padding:clamp(10px,1.1vw,15px)}
.mosaic .tile-body .headline{font-size:clamp(12px,4vw,20px)}
.mosaic .tile-tag{display:block;font-size:10px;letter-spacing:.16em;margin-bottom:4px}
@media (max-width:560px){
  .mosaic{gap:8px;grid-template-columns:repeat(3,1fr)}
  .mosaic .tile::before{inset:6px}
  .mosaic .tile-body{padding:9px}
  /* kleinere Kacheln, aber größere Schrift — sonst kaum lesbar */
  .mosaic .tile-body .headline{font-size:14px; padding: 5px;}
  .mosaic .m-w{grid-column:span 2;aspect-ratio:2.1/1}
  /* Tag-Zeile kompakt, damit sie in die kleinen Kacheln passt */
  .mosaic .tile-tag{font-size:9px;letter-spacing:.08em;margin-bottom:3px;padding-inline:5px}
}

/* ---------- Info-/Preis-Karten ---------- */
.card{background:var(--white);color:var(--black);padding:clamp(22px,2.3vw,34px);display:flex;
  flex-direction:column;gap:13px;transition:transform .4s var(--ease),box-shadow .4s}
.card:hover{transform:translateY(-5px);box-shadow:0 30px 60px -38px rgba(0,0,0,.55)}
.card-candy{background:var(--candy)}
.card-black{background:var(--black);color:var(--white)}
.card-line{box-shadow:inset 0 0 0 1px rgba(0,0,0,.12)}
.card-tag{font-family:var(--font-tech);font-size:clamp(11px,.95vw,13px);letter-spacing:.22em;
  text-transform:uppercase;opacity:.6}
.card-black .card-tag{color:var(--candy);opacity:1}
.card-price{font-family:var(--font-head);font-size:clamp(34px,3.2vw,52px);line-height:.84;letter-spacing:-.01em}
.card-price small{font-family:var(--font-body);font-size:14px;font-weight:700;letter-spacing:0;opacity:.62}
/* Verlinkte Karte: Candy-Pfeil mittig rechts als Klick-Hinweis */
.card-go{position:relative;padding-right:clamp(48px,4vw,66px)}
.card-go::after{content:"→";position:absolute;right:clamp(16px,1.8vw,24px);top:50%;
  transform:translateY(-50%);color:var(--candy);font-family:var(--font-body);
  font-size:clamp(24px,2vw,32px);line-height:1;transition:transform .3s var(--ease)}
.card-go:hover::after{transform:translate(5px,-50%)}
.card ul{list-style:none;margin:0;padding:0;display:grid;gap:8px;font-size:15px}
.card li{padding-left:24px;position:relative}
.card li::before{content:"";position:absolute;left:0;top:.34em;width:.8em;height:.8em;
  background:currentColor;-webkit-mask:var(--b-mark) center/contain no-repeat;
  mask:var(--b-mark) center/contain no-repeat}
.card .btn{margin-top:auto}

/* ---------- Preis-Tabelle ---------- */
.ptable{width:100%;border-collapse:collapse}
.ptable th,.ptable td{text-align:left;padding:15px 12px;border-bottom:1px solid var(--line);vertical-align:middle}
.dark .ptable th,.dark .ptable td{border-color:rgba(255,255,255,.18)}
.ptable th{font-family:var(--font-tech);font-size:clamp(11px,.95vw,13px);letter-spacing:.24em;
  text-transform:uppercase;font-weight:600;opacity:.6}
.ptable .d{font-weight:700;white-space:nowrap}
.ptable .t{opacity:.72}
.ptable .p{font-family:var(--font-head);font-size:clamp(22px,2vw,32px);letter-spacing:-.01em;
  white-space:nowrap;text-align:right}
.pchip{font-family:var(--font-tech);font-size:clamp(10px,.8vw,12px);letter-spacing:.18em;
  text-transform:uppercase;color:var(--candy);margin-left:.7em}
.on-light .pchip{color:var(--black);opacity:.55}
.pnote{font-size:14px;opacity:.66;margin-top:14px}

/* Sternchen-Fußnoten: hängende Candy-Marker, Text in Kleinschrift */
.fn-block{margin-top:clamp(28px,3.4vw,46px);max-width:720px;display:grid;gap:14px}
.fn{position:relative;margin:0;padding-left:46px;font-size:14px;line-height:1.6;
  color:rgba(0,0,0,.62)}
.fn>b{position:absolute;left:0;top:1px;display:inline-flex;align-items:center;justify-content:center;
  min-width:32px;height:20px;padding:0 6px;background:var(--candy);color:var(--black);
  font-family:var(--font-tech);font-weight:600;font-size:10px;letter-spacing:.06em}
.fn strong{color:var(--black)}

/* ---------- Detail-Listen (Infos-Seite): Getränke, Grandbuffet, Upgrades ---------- */
.detail-grid{display:grid;grid-template-columns:1fr 1.7fr;gap:clamp(14px,1.6vw,22px);align-items:start}
.detail-col{display:grid;gap:clamp(14px,1.6vw,22px)}
.buffet-cols{display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,2.2vw,32px) clamp(18px,2vw,28px);margin-top:6px}
.buffet-cols>div{min-width:0}
/* Zwischenüberschriften im Buffet: Tech-Font mit Candy-Unterstrich */
.dg-label{display:block;font-family:var(--font-tech);font-weight:600;font-size:12px;
  letter-spacing:.22em;text-transform:uppercase;margin-bottom:12px;
  padding-bottom:6px;border-bottom:2px solid var(--candy);width:fit-content}
@media (max-width:860px){.detail-grid{grid-template-columns:1fr}}
@media (max-width:560px){.buffet-cols{grid-template-columns:1fr}}

/* ---------- Split ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,72px);align-items:center}
.split.top{align-items:start}
@media (max-width:900px){.split{grid-template-columns:1fr}}
.split-media{position:relative;overflow:hidden;aspect-ratio:4/3}
.split-media img{width:100%;height:100%;object-fit:cover}
.split-media::after{content:"";position:absolute;inset:16px;border:2px solid var(--candy);z-index:3;
  pointer-events:none;transform:translate(var(--fx,0px),var(--fy,0px));transition:transform .3s var(--ease)}
.split-media:hover::after{animation:frame-wiggle .65s ease}

.facts{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.4vw,40px)}
@media (max-width:720px){.facts{grid-template-columns:1fr}}
.fact{border-top:1px solid var(--line);padding-top:16px}
.dark .fact{border-color:rgba(255,255,255,.22)}
.fact-num{font-family:var(--font-head);font-size:clamp(30px,3vw,48px);line-height:.86;
  letter-spacing:-.01em;white-space:nowrap}
.fact p{margin-top:8px;font-size:15px}

/* ---------- Schritte ---------- */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,3vw,52px)}
@media (max-width:820px){.steps{grid-template-columns:1fr}}
.step{border-top:3px solid var(--black);padding-top:20px}
.dark .step{border-color:var(--candy)}
.step-num{font-family:var(--font-tech);font-size:clamp(11px,.95vw,13px);letter-spacing:.24em;
  margin-bottom:14px;display:block;opacity:.55}
.dark .step-num{color:var(--candy);opacity:1}
.step p{margin-top:10px}

/* ---------- Gutschein-Block ---------- */
/* ---------- Gutschein-Sektion: helle Fläche, Gutschein als Candy-Ticket ---------- */
.voucher{display:grid;grid-template-columns:1.15fr 1fr;gap:clamp(30px,4.5vw,72px);align-items:center;
  color:var(--black)}
@media (max-width:860px){.voucher{grid-template-columns:1fr}}

/* Der Gutschein als 3D-Flip-Karte (Nachbau der echten Karte): vorne Candy-Chevrons
   mit schwarzem Logo, hinten QR-Code und Infos. Die Karte schwebt leicht schräg
   über einem Bodenschatten; Hover bzw. Tastatur-Fokus dreht sie auf die Rückseite. */
.gift-wrap{position:relative;width:min(470px,100%);margin-inline:auto}
.gift-wrap::after{content:"";position:absolute;left:8%;right:8%;bottom:-38px;height:26px;
  background:radial-gradient(50% 50% at 50% 50%,rgba(0,0,0,.35),transparent 70%);
  animation:gf-shadow 5s ease-in-out infinite}
.gift-flip{position:relative;display:block;aspect-ratio:8/5;perspective:1200px;
  animation:gf-float 5s ease-in-out infinite}
@keyframes gf-float{0%,100%{transform:rotate(-3.2deg) translateY(0)}50%{transform:rotate(-2.2deg) translateY(-12px)}}
@keyframes gf-shadow{0%,100%{transform:scaleX(1);opacity:1}50%{transform:scaleX(.9);opacity:.7}}
.gf-inner{position:absolute;inset:0;display:block;transform-style:preserve-3d;
  transition:transform .8s var(--ease)}
.gift-flip:hover .gf-inner,.gift-flip:focus-visible .gf-inner{transform:rotateY(180deg)}
.gf-face{position:absolute;inset:0;display:block;overflow:hidden;
  -webkit-backface-visibility:hidden;backface-visibility:hidden;
  box-shadow:0 22px 45px -24px rgba(0,0,0,.45)}
.gf-front{background:var(--candy) url("../img/pattern-candy.svg") 0 0/96px auto repeat}
/* Wasserzeichen wie auf der gedruckten Karte: drei Zeilen "GUTSCHEIN" als
   Outline, per SVG-textLength exakt auf volle Kartenbreite gespannt —
   oberste und unterste Zeile laufen leicht über die Kanten */
.gf-wm{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.gf-wm text{font-family:var(--font-head);font-size:190px;
  fill:none;stroke:rgba(255,255,255,.3);stroke-width:2}
.gf-logo{position:absolute;inset:0;margin:auto;width:74%;height:44%;background:var(--black);
  -webkit-mask:url("../logos/logo-claim.svg") center/contain no-repeat;
  mask:url("../logos/logo-claim.svg") center/contain no-repeat}
.gf-back{background:var(--white);color:var(--black);transform:rotateY(180deg);
  display:flex;flex-direction:column;justify-content:space-between;
  padding:clamp(18px,2.2vw,28px)}
.gf-row{display:flex;gap:clamp(14px,1.6vw,22px);align-items:flex-start}
.gf-qr{flex:0 0 auto;width:clamp(84px,9vw,116px);aspect-ratio:1;background:#2ba6e0;
  display:grid;place-items:center;padding:11px}
.gf-qr svg{width:100%;height:100%;display:block}
.gf-info{display:grid;gap:8px;font-size:clamp(12px,1vw,14px);line-height:1.45;padding-top:4px}
.gf-info b{font-size:clamp(14px,1.2vw,17px);line-height:1.3}
.gf-link{color:#2ba6e0}
.gf-info small{font-size:inherit;opacity:.75}
.gf-foot{display:flex;align-items:flex-end;justify-content:space-between;gap:16px}
.gf-logo-s{flex:0 0 auto;width:clamp(92px,9.5vw,124px);height:36px;background:var(--black);
  -webkit-mask:url("../logos/logo-claim.svg") left center/contain no-repeat;
  mask:url("../logos/logo-claim.svg") left center/contain no-repeat}
.gf-addr{font-size:clamp(11px,.9vw,13px);line-height:1.5}
.gf-addr b{display:block}
@media (prefers-reduced-motion:reduce){
  .gift-flip,.gift-wrap::after{animation:none}
  .gf-inner{transition:none}
}

/* ---------- FAQ ---------- */
.faq{display:grid;gap:2px;background:var(--line)}
.dark .faq{background:rgba(255,255,255,.16)}
.faq details{background:var(--moon);padding:0}
.dark .faq details{background:var(--black)}
.faq summary{cursor:pointer;list-style:none;padding:clamp(18px,1.8vw,24px) clamp(16px,1.8vw,26px);
  font-family:var(--font-head);font-size:clamp(19px,1.7vw,26px);text-transform:uppercase;
  letter-spacing:-.01em;line-height:1.05;display:flex;align-items:center;justify-content:space-between;gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--font-body);font-weight:700;font-size:24px;
  color:var(--candy);flex:0 0 auto;transition:transform .3s var(--ease)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq .faq-body{padding:0 clamp(16px,1.8vw,26px) clamp(20px,2vw,26px);max-width:72ch}

/* ---------- Anfrage-/Buchungsformular ---------- */
.form-box{background:var(--white);color:var(--black);padding:clamp(24px,2.8vw,44px);
  box-shadow:0 40px 90px -55px rgba(0,0,0,.5)}
.form-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;
  gap:10px 22px;margin-bottom:clamp(20px,2.2vw,30px)}
.form-note{font-family:var(--font-tech);font-size:clamp(11px,.95vw,13px);letter-spacing:.2em;
  text-transform:uppercase;opacity:.55}
.fgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(14px,1.6vw,22px)}
.fgrid.three{grid-template-columns:repeat(3,1fr)}
@media (max-width:760px){.fgrid,.fgrid.three{grid-template-columns:1fr}}
.f{display:flex;flex-direction:column;gap:8px;position:relative}
.f.full{grid-column:1/-1}
.f label{font-family:var(--font-tech);font-size:clamp(11px,.9vw,12px);letter-spacing:.22em;
  text-transform:uppercase;opacity:.6}
.f input,.f select,.f textarea{width:100%;background:var(--moon);border:0;
  border-bottom:2px solid rgba(0,0,0,.2);padding:14px 14px;font-size:16px;
  -webkit-appearance:none;appearance:none;border-radius:0}
.f select{cursor:pointer}
.f textarea{min-height:104px;resize:vertical;line-height:1.45}
.f input:focus,.f select:focus,.f textarea:focus{outline:none;border-bottom-color:var(--black);background:#e7e7e7}
.f-select{position:relative}
.f-select::after{content:"";position:absolute;right:14px;bottom:20px;width:11px;height:7px;
  background:var(--black);clip-path:polygon(0 0,100% 0,50% 100%);pointer-events:none}
.f-hint{font-size:13px;opacity:.6}
.form-actions{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin-top:clamp(20px,2.2vw,30px)}
/* Mobil: lange Button-Beschriftungen sprengen sonst die Panelbreite */
@media (max-width:560px){
  .form-actions .btn,.rv-sumside .btn{width:100%;justify-content:center;
    padding-inline:14px;font-size:12px;letter-spacing:.12em}
  .rv-sumside{width:100%}
}
.linkbtn{background:none;border:0;padding:0;cursor:pointer;font-size:14px;text-decoration:underline;
  text-decoration-color:var(--candy);text-decoration-thickness:2px;text-underline-offset:4px}
.linkbtn:hover{color:var(--graphite)}

/* Radio-Auswahl als Chips (Essen vor/nach dem Bowlen) */
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chips input{position:absolute;opacity:0;pointer-events:none}
.chips label{font-family:var(--font-tech);font-size:clamp(11px,.95vw,13px);letter-spacing:.16em;
  text-transform:uppercase;padding:13px 18px;background:var(--moon);cursor:pointer;
  box-shadow:inset 0 0 0 2px transparent;transition:background .25s,box-shadow .25s;opacity:1}
.chips label:hover{background:#e4e4e4}
.chips input:checked + label{background:var(--candy);box-shadow:inset 0 0 0 2px var(--black)}
.chips input:focus-visible + label{outline:2px solid var(--black);outline-offset:2px}

/* Angebotsauswahl (erst nach Tagwahl sichtbar) */
.offer-slot[hidden]{display:none}
.offer-empty{background:var(--moon);padding:clamp(18px,2vw,26px);font-size:15px;opacity:.7;
  display:flex;align-items:center;gap:12px}
.offer-empty::before{content:"";width:1.1em;height:1.1em;flex:0 0 auto;background:currentColor;
  -webkit-mask:var(--b-mark) center/contain no-repeat;mask:var(--b-mark) center/contain no-repeat}
.offer-fixed{background:var(--candy);padding:clamp(16px,1.8vw,24px);display:flex;
  flex-wrap:wrap;align-items:baseline;gap:8px 16px}
.offer-fixed .headline{font-size:clamp(20px,1.8vw,28px)}
.offer-fixed span{font-size:14px;font-weight:700}
.form-done{background:var(--candy);color:var(--black);padding:clamp(20px,2.2vw,30px);margin-top:20px}
.form-done .headline{font-size:clamp(20px,1.8vw,28px);margin-bottom:8px}

/* ---------- Sticky-CTA ---------- */
.stickybar{position:fixed;left:0;right:0;bottom:0;z-index:1100;background:var(--black);
  color:var(--white);transform:translateY(105%);transition:transform .45s var(--ease)}
.stickybar.show{transform:none}
body.menu-open .stickybar{transform:translateY(105%)}
.stickybar-in{max-width:var(--maxw);margin:0 auto;padding:14px var(--pad-x);display:flex;
  align-items:center;justify-content:space-between;gap:18px}
.stickybar-txt{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.stickybar-txt .headline{font-size:clamp(19px,1.7vw,26px)}
.stickybar-txt small{font-family:var(--font-tech);font-size:11px;letter-spacing:.2em;
  text-transform:uppercase;opacity:.6}
@media (max-width:620px){.stickybar-txt small{display:none}.stickybar-in{padding-inline:16px}
  .stickybar .btn{padding:15px 20px}}

/* ---------- Karte ---------- */
.map-wrap{position:relative;height:clamp(360px,52vh,560px);background:var(--graphite);
  isolation:isolate;z-index:0}
.map{position:absolute;inset:0}
.map-wrap::after{content:"";position:absolute;inset:clamp(12px,1.6vw,22px);
  border:3px solid var(--candy);z-index:500;pointer-events:none}
.leaflet-container{background:var(--graphite);font-family:var(--font-body)}
.leaflet-control-zoom a{background:var(--black);color:var(--candy);border:0;
  border-bottom:1px solid rgba(255,185,255,.3);width:38px;height:38px;line-height:38px;font-size:20px}
.leaflet-control-zoom a:hover{background:var(--candy);color:var(--black)}
.leaflet-control-zoom{border:0!important;box-shadow:none!important}
.leaflet-control-attribution{background:rgba(0,0,0,.78)!important;color:rgba(255,255,255,.65);
  font-size:10px;padding:3px 8px}
.leaflet-control-attribution a{color:var(--candy)}
.b-marker{width:54px;height:54px;background:var(--candy);display:grid;place-items:center;
  box-shadow:0 12px 30px -12px rgba(0,0,0,.9)}
.b-marker span{width:60%;height:60%;background:var(--black);
  -webkit-mask:var(--b-mark) center/contain no-repeat;mask:var(--b-mark) center/contain no-repeat}
.b-marker::after{content:"";position:absolute;left:50%;bottom:-9px;width:0;height:0;
  transform:translateX(-50%);border-left:9px solid transparent;border-right:9px solid transparent;
  border-top:10px solid var(--candy)}
.leaflet-popup-content-wrapper,.leaflet-popup-tip{background:var(--black);color:var(--white);
  border-radius:0;box-shadow:0 20px 44px -22px rgba(0,0,0,.9)}
.leaflet-popup-content{margin:16px 20px;font-size:14px;line-height:1.45}
.leaflet-popup-content strong{font-family:var(--font-head);font-size:20px;letter-spacing:-.01em;
  text-transform:uppercase;display:block;margin-bottom:6px}
.leaflet-popup-content a{color:var(--candy);text-decoration:underline}
.leaflet-container a.leaflet-popup-close-button{color:var(--candy)}
.route-list{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:16px}
.route-list li{position:relative;padding-left:30px}
.route-list li::before{content:"";position:absolute;left:0;top:.18em;width:18px;height:18px;
  background:var(--candy);-webkit-mask:var(--b-mark) center/contain no-repeat;
  mask:var(--b-mark) center/contain no-repeat}
.route-list b{display:block;font-size:15px}
.route-list span{font-size:15px;opacity:.68}

/* ---------- Öffnungszeiten ---------- */
.hours{width:100%;border-collapse:collapse}
.hours td{padding:14px 0;border-bottom:1px solid rgba(255,255,255,.16);vertical-align:baseline}
.hours tr:last-child td{border-bottom:0}
.hours .d{font-weight:700;white-space:nowrap;padding-right:24px}
.hours .t{text-align:right;font-family:var(--font-tech);letter-spacing:.14em}
.on-light .hours td{border-color:var(--line)}

/* ---------- Footer ---------- */
.footer{background:var(--black);color:var(--white);padding-top:clamp(56px,6vw,96px)}
.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:clamp(26px,3.4vw,52px);
  padding-bottom:clamp(40px,4.6vw,66px)}
@media (max-width:980px){.footer-grid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.footer-grid{grid-template-columns:1fr}}
.footer-logo img{height:58px;width:auto}
.f-head{font-family:var(--font-tech);font-size:clamp(11px,.95vw,13px);letter-spacing:.26em;
  text-transform:uppercase;color:var(--candy);margin-bottom:16px}
.f-list{list-style:none;margin:0;padding:0;display:grid;gap:9px;font-size:15px}
.f-list a:hover{color:var(--candy)}

/* ---------- Social-Links im Footer ---------- */
.f-social{display:flex;gap:12px;margin-top:28px}
.f-social a{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.5);
  transition:background .3s var(--ease),color .3s var(--ease),box-shadow .3s var(--ease),transform .3s var(--ease)}
.f-social a:hover{background:var(--candy);color:var(--black);box-shadow:inset 0 0 0 2px var(--candy);transform:translateY(-2px)}
.f-social svg{width:21px;height:21px;display:block}
.footer-bottom{border-top:1px solid rgba(255,255,255,.18);padding:20px 0;display:flex;
  flex-wrap:wrap;gap:12px 26px;align-items:center;justify-content:space-between;font-size:13px;opacity:.8}

/* ---------- Reveal ---------- */
.rv{opacity:0;transform:translateY(26px);
  transition:opacity .8s var(--ease),transform .9s var(--ease);transition-delay:var(--d,0s)}
.rv.in{opacity:1;transform:none}
.write{clip-path:inset(-25% 100% -25% -2%);
  transition:clip-path var(--write,2.2s) cubic-bezier(.42,.02,.38,1) .2s}
.write.in{clip-path:inset(-25% -6% -25% -2%)}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
  .rv{opacity:1!important;transform:none!important}
  .write{clip-path:none}
}

/* ---------- Rechtstexte (Impressum, Datenschutz, AGB) ---------- */
.legal-head{padding-top:calc(var(--nav-h) + clamp(40px,7vw,90px));padding-bottom:clamp(36px,5vw,70px)}
.legal{max-width:76ch}
.legal h2{font-family:var(--font-head);font-weight:400;text-transform:uppercase;line-height:.9;
  letter-spacing:-.01em;font-size:clamp(24px,2.2vw,34px);margin:clamp(34px,4vw,54px) 0 14px}
.legal h3{font-size:clamp(18px,1.45vw,22px);font-weight:700;margin:clamp(28px,3.2vw,44px) 0 10px}
.legal h4{font-size:clamp(16px,1.25vw,18px);font-weight:700;margin:clamp(22px,2.6vw,34px) 0 8px}
.legal h2:first-child,.legal h3:first-child{margin-top:0}
.legal p{margin:0 0 12px}
.legal ul,.legal ol{margin:0 0 14px;padding-left:22px}
.legal li{margin-bottom:6px}
.legal a{text-decoration:underline;text-underline-offset:2px}
.legal a:hover{color:var(--candy)}