/* ==========================================================================
   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}
/* Stepper unter dem Zahlenraster: freie Personenzahl per +/- oder Eintippen.
   Das Feld färbt sich candy, sobald die Zahl aus dem Stepper stammt und nicht
   aus dem Raster darüber. */
.rv-more{display:grid;gap:8px;margin-top:10px;padding-top:12px;
  border-top:1px solid rgba(0,0,0,.12)}
.rv-more-lab{font-family:var(--font-tech);font-size:11px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;opacity:.55}
.rv-stepper{display:grid;grid-template-columns:44px 1fr 44px;gap:4px}
.rv-stepbtn{border:0;background:var(--moon);cursor:pointer;color:inherit;
  font-family:var(--font-tech);font-size:19px;font-weight:600;line-height:1;height:44px;
  transition:background .15s,color .15s}
.rv-stepbtn:hover:not(:disabled){background:var(--black);color:var(--candy)}
.rv-stepbtn:disabled{opacity:.35;cursor:default}
/* Native Spinner raus — gesteuert wird über die beiden Buttons */
.rv-stepin{border:0;background:var(--moon);height:44px;width:100%;text-align:center;
  color:inherit;font-family:var(--font-tech);font-weight:600;font-size:15px;
  letter-spacing:.06em;-moz-appearance:textfield;appearance:textfield}
.rv-stepin::-webkit-outer-spin-button,.rv-stepin::-webkit-inner-spin-button{
  -webkit-appearance:none;margin:0}
.rv-stepin:focus{outline:none;background:#e7e7e7}
.rv-more.is-on .rv-stepin{background:var(--candy)}
.rv-more-hint{margin:0;font-size:12px;line-height:1.45;opacity:.7}
.rv-more-hint a{text-decoration:underline;text-decoration-color:var(--candy);
  text-decoration-thickness:2px;text-underline-offset:3px}

/* 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,.f input.time-native{display:none}
/* Uhrzeit-Popup: zwei scrollbare Spalten (Stunde · Minute) im Look der
   Options-Raster. Höhe so gewählt, dass ein angeschnittener Eintrag unten
   sichtbar bleibt — das zeigt, dass die Spalte scrollt. */
.rv-timepop{width:min(300px,92vw)}
.rv-timecols{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.rv-timelab{display:block;font-family:var(--font-tech);font-weight:600;font-size:11px;
  letter-spacing:.2em;text-transform:uppercase;opacity:.55;margin-bottom:8px}
.rv-timelist{display:grid;gap:4px;max-height:212px;overflow-y:auto;padding-right:4px;
  scrollbar-width:thin}
.rv-timelist .rv-opt{text-align:center;padding:11px 0;font-size:14px}
.rv-timedone{width:100%;margin-top:14px;justify-content:center}
.f-selbtn{position:relative;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)}
/* Pflichtfeld-Fehler am Kalender-Button (das native Datumsfeld ist unsichtbar,
   Browser-Validierungsblasen können dort nicht andocken) */
.f-selbtn.is-invalid,
.f input.is-invalid,.f select.is-invalid,.f textarea.is-invalid,
.f-selbtn.is-invalid:focus,
.f input.is-invalid:focus,.f select.is-invalid:focus,.f textarea.is-invalid:focus{
  border-bottom-color:#c22525;background:#fdecec}
.f-select.open .f-selbtn::after{transform:rotate(180deg)}
.f-select .f-selbtn::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}
/* Textspalte der Angebotszeile: Name, Beschreibung und Chips stehen
   linksbündig untereinander, der Preis bleibt als eigene Spalte rechts.
   min-width:0, damit lange Beschreibungen umbrechen statt die Zeile zu
   sprengen. */
.rv-offer-main{display:flex;flex-direction:column;align-items:flex-start;gap:5px;
  flex:1 1 auto;min-width:0}
.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-desc{font-size:13.5px;line-height:1.45;opacity:.75;white-space:pre-line;max-width:52ch}
.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;flex:0 0 auto}
.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}

/* Upselling: mehr Spielzeit gegen Aufpreis (im Extras-Schritt) */
.rv-extend{box-shadow:inset 0 0 0 1.5px var(--candy);padding:16px;margin-bottom:22px}
.rv-extend-hint{margin:2px 0 10px;font-size:13px;opacity:.7}
.rv-extend-opts{display:flex;gap:8px;flex-wrap:wrap}

/* 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-Schritt: Karten im Angebots-Look (an-/abwählbar), Preise immer sichtbar */
.rv-extra-card{cursor:pointer;user-select:none}
.rv-extra-card:not(.rv-locked):hover{box-shadow:inset 0 0 0 2px var(--candy)}
/* Zu wenige Personen für dieses Extra/Paket: sichtbar, aber nicht wählbar */
.rv-offer.rv-locked{opacity:.45;cursor:default;pointer-events:none}
.rv-extra-qty{display:flex;align-items:center;gap:10px;width:100%;margin-top:6px;font-size:13px}
.rv-extra-qty label{font-family:var(--font-tech);font-weight:600;font-size:11px;
  letter-spacing:.2em;text-transform:uppercase;opacity:.6}
.rv-extra-qty input{width:80px;background:var(--white);border:0;
  box-shadow:inset 0 0 0 1.5px rgba(0,0,0,.25);padding:8px 10px;font:inherit;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}
/* „Wann möchtet ihr essen?“ — statt nativer Radios (die sich nicht gestalten
   lassen und in Systemfarbe erscheinen) Chips im Look der übrigen Auswahlen.
   Das Radio bleibt im Markup und trägt weiter den Formularwert, ist aber nur
   noch für Tastatur und Screenreader da. */
/* Gleiches Chip-Muster auch für die Spieleauswahl in den Anfrage-Formularen
   (.chip-opt), dort als Mehrfachauswahl. */
.rv-radio,.chip-opt{display:inline-flex;cursor:pointer;position:relative}
.rv-radio input,.chip-opt input{position:absolute;opacity:0;pointer-events:none;width:1px;height:1px}
.rv-radio span,.chip-opt span{font-family:var(--font-tech);font-weight:600;font-size:11px;
  letter-spacing:.16em;text-transform:uppercase;padding:11px 15px;background:var(--moon);
  color:inherit;box-shadow:inset 0 0 0 2px transparent;transition:background .2s,box-shadow .2s}
.rv-radio:hover span,.chip-opt:hover span{background:#e4e4e4}
.rv-radio input:checked + span,.chip-opt input:checked + span{
  background:var(--candy);box-shadow:inset 0 0 0 2px var(--black)}
.rv-radio input:focus-visible + span,.chip-opt input:focus-visible + span{
  outline:2px solid var(--black);outline-offset:2px}
/* Zeitfeld gehört zu „Vorher um“ — solange „Nach dem Spiel“ aktiv ist, wird
   der Wert ohnehin verworfen, also hier auch sichtbar inaktiv. */
.rv-krow input[type="time"]:disabled{opacity:.4;cursor:not-allowed}
.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)}
/* Zusammenfassung im Beleg-Stil: schwarzes Panel mit Candy-Akzenten
   (wie .card-black) — dort leuchtet die Candy-Überschrift, auf hellem
   Grund wäre sie zu kontrastarm. */
.rv-summary{display:grid;grid-template-columns:auto 1fr;gap:8px 18px;align-items:baseline;
  font-size:14px;line-height:1.45;background:var(--black);color:var(--white);
  padding:clamp(16px,1.8vw,22px) clamp(18px,2vw,26px);min-width:min(380px,100%)}
.rv-sum-title{grid-column:1/-1;font-family:var(--font-head);font-size:clamp(18px,1.6vw,23px);
  letter-spacing:-.01em;text-transform:uppercase;color:var(--candy);
  margin-bottom:6px;padding-bottom:8px;border-bottom:1px solid rgba(255,255,255,.16)}
.rv-sum-k{font-family:var(--font-tech);font-weight:600;font-size:10px;letter-spacing:.2em;
  text-transform:uppercase;opacity:.5;white-space:nowrap}
.rv-sum-v{min-width:0}
.rv-summary .rv-total{font-family:var(--font-head);font-size:clamp(24px,2.2vw,34px);
  letter-spacing:-.01em;line-height:1}
.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}
/* Pfeil am Ersatz-Button verankern, nicht an der Grid-Zelle: Zellen einer
   Reihe wachsen gemeinsam (z. B. bei Hinweistext unterm Datum) — am Button
   bleibt der Pfeil immer im Feld stehen. */
.f-select .f-selbtn::after{content:"";position:absolute;right:14px;top:calc(50% - 3px);
  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:16px;text-decoration:underline;
  text-decoration-color:var(--candy);text-decoration-thickness:2px;text-underline-offset:4px}
.linkbtn:hover{color:var(--graphite)}
/* Ausstieg aus dem Angebot: Die Formulare der Unterseiten sind auf ihr Angebot
   festgelegt — wer etwas anderes buchen will, kommt hier zum offenen Panel auf
   der Startseite. Steht außerhalb der Schritt-Sections, ist also in jedem
   Schritt sichtbar. */
.form-alt{margin-top:clamp(18px,2vw,26px);padding-top:clamp(14px,1.6vw,20px);
  border-top:1px solid rgba(0,0,0,.12);opacity:.85}

/* 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)}