/* =============================================================================
   Cinematic Landing Page — stylesheet
   Design tokens come straight from the brief. Edit :root to retheme.
   ============================================================================= */

/* ---- tokens --------------------------------------------------------------- */
:root{
  --bg:        #0A0E1A;
  --bg-elev:   #121829;
  --cream:     #F4E7A6;
  --pink-soft: #F7A6CE;       /* heller DS-Bowl-Pink-Ton */
  --pink-hot:  #E6007E;       /* DS BOWL Markenpink (aus Logo) */
  --blue:      #79CFE6;
  --peach:     #F4B79A;
  --green:     #CFE89A;
  --ink:       #14172B;
  --white:     #FFFFFF;
  --text:      #ffffff;                 /* überall reines Weiß */
  --text-dim:  rgba(255,255,255,.84);   /* sekundär, fast weiß */

  --r-pill:  999px;
  --r-card:  clamp(20px, 2vw, 32px);
  --r-input: 16px;
  --shadow-card: 0 30px 80px -30px rgba(0,0,0,.6);

  --ease-ui: cubic-bezier(.22,1,.36,1);

  --nav-h: 84px;
  --pad-x: clamp(18px, 5vw, 96px);
}

/* ---- reset ---------------------------------------------------------------- */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ background:var(--bg); -webkit-text-size-adjust:100%; scrollbar-gutter:stable; }

/* Metric-matched fallback so the Poppins swap doesn't shift the big headlines (CLS) */
@font-face{
  font-family:"Poppins Fallback";
  src:local("Arial"), local("Helvetica Neue"), local("Helvetica");
  size-adjust:112%; ascent-override:92%; descent-override:24%; line-gap-override:0%;
}

body{
  font-family:"Poppins", "Poppins Fallback", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background:transparent;
  color:var(--text);
  line-height:1.45;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:none; cursor:pointer; }
ul{ list-style:none; }
:focus-visible{ outline:3px solid var(--blue); outline-offset:3px; border-radius:6px; }

/* Lenis */
html.lenis,html.lenis body{ height:auto; }
.lenis.lenis-smooth{ scroll-behavior:auto !important; }
.lenis.lenis-stopped{ overflow:hidden; }

/* ---- type helpers --------------------------------------------------------- */
.eyebrow{
  font-size:.85rem; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--blue);
}
.display{
  font-size:clamp(3rem, 8.5vw, 8rem); font-weight:900; line-height:.92;
  letter-spacing:-.02em; text-transform:uppercase;
}
.h2{
  font-size:clamp(2.2rem, 5.5vw, 5rem); font-weight:900; line-height:.95;
  letter-spacing:-.01em; text-transform:uppercase;
}
.card-h{
  font-size:clamp(2rem, 4.8vw, 4.2rem); font-weight:900; line-height:.95;
  letter-spacing:-.01em; text-transform:uppercase;
}
.body{ font-size:clamp(1rem, 1.4vw, 1.35rem); font-weight:400; color:var(--text-dim); }
/* Zeilenumbrüche: Überschriften ausbalancieren (kein einzelnes Wort in der letzten Zeile),
   Fließtext „pretty" (keine Schusterjungen) – gilt überall, auch auf dem Handy. */
.display, .h2, .card-h, .hero__title, .sec-head h2, h1, h2, h3{ text-wrap:balance; }
.body, .sec-head p, p.body{ text-wrap:pretty; }

/* ---- buttons / pills ------------------------------------------------------ */
.btn-pill{
  display:inline-flex; align-items:center; gap:.6em;
  padding:.85em 1.5em; border-radius:var(--r-pill);
  font-size:1rem; font-weight:700; line-height:1; white-space:nowrap;
  background:var(--pink-soft); color:var(--ink);
  transition:transform .4s var(--ease-ui), filter .4s var(--ease-ui), background .4s var(--ease-ui);
  will-change:transform;
}
.btn-pill svg{ width:1.05em; height:1.05em; flex:none; }
.btn-pill--peach{ background:var(--peach); }
.btn-pill--green{ background:var(--green); }
.btn-pill--pink{ background:var(--pink-hot); color:#fff; }   /* DS-Bowl-Pink + Weiß */
.btn-pill--white{ background:#fff; color:#000; }            /* Weiß + Schwarz */
.btn-pill--ghost{ background:rgba(255,255,255,.12); color:var(--white); backdrop-filter:blur(8px); border:1px solid rgba(255,255,255,.25); }
@media (hover:hover){
  .btn-pill:hover{ transform:scale(1.04); filter:brightness(1.06); }
}

/* =============================================================================
   PRELOADER
   ============================================================================= */
/* Cinematic „Strike Reveal"-Preloader — anpassbare Tokens */
:root{ --pl-bg:#0A0E1A; }   /* (Preloader-Tokens vereinfacht) */
/* Einfacher Ladescreen: Logo + duenner Fortschrittsbalken auf dunklem Grund */
.preloader{
  position:fixed; inset:0; z-index:1000;
  display:grid; place-content:center;
  background:radial-gradient(120% 90% at 50% 30%, #12111c 0%, #0A0E1A 62%);
}
.preloader__inner{ display:flex; align-items:center; justify-content:center; }
/* Logo als Maske (nur schwach sichtbar) + heller Lichtstreif als HINTERGRUND-Layer, der drüber „sweept".
   Safari-fest: Mask als Einzel-Properties (nicht Kurzform mit /contain), EXPLIZITE Höhe statt aspect-ratio,
   Sweep als background statt ::before (kein maskiertes Pseudo-Element). 599/2097 = 0,2856. */
.preloader__logo{
  width:min(56vw, 440px); height:calc(min(56vw, 440px) * 0.2856);
  -webkit-mask-image:url(../assets/Bilder/DS_LOGO_White.png); mask-image:url(../assets/Bilder/DS_LOGO_White.png);
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-position:center; mask-position:center;
  -webkit-mask-size:contain; mask-size:contain;
  background-color:rgba(255,255,255,.16);   /* Logo nur ganz dezent sichtbar */
  background-image:linear-gradient(100deg, rgba(255,255,255,0) 20%, rgba(255,255,255,.95) 50%, rgba(255,255,255,0) 80%);
  background-repeat:no-repeat; background-size:45% 100%; background-position:-80% 0;
  animation:plSweep 1.5s cubic-bezier(.45,0,.2,1) infinite;
}
@keyframes plSweep{ 0%{ background-position:-80% 0; } 70%,100%{ background-position:180% 0; } }
@media (max-width:760px){ .preloader__logo{ width:min(74vw, 290px); height:calc(min(74vw, 290px) * 0.2856); } }
body.is-loading{ overflow:hidden; }
.no-js .preloader{ display:none; }
@media (prefers-reduced-motion:reduce){ .preloader__logo{ animation:none; background-image:none; background-color:rgba(255,255,255,.34); } }

/* =============================================================================
   NAV + MENU
   ============================================================================= */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:400; height:var(--nav-h);  /* über dem Menü → Reservieren bleibt sichtbar */
  display:flex; align-items:center; justify-content:space-between;
  padding:0 var(--pad-x);
  transition:background .5s var(--ease-ui), backdrop-filter .5s var(--ease-ui), box-shadow .5s var(--ease-ui);
  /* Safari/iOS: fixe Nav auf eigenen GPU-Layer heben → kein 1–2px-Versatz beim Scrollen (Sub-Pixel-Re-Raster). */
  transform:translateZ(0); -webkit-transform:translateZ(0);
  -webkit-backface-visibility:hidden; backface-visibility:hidden;
  will-change:background, backdrop-filter;
}
.nav.is-scrolled{
  background:rgba(10,14,26,.62); backdrop-filter:blur(14px) saturate(1.2);
  box-shadow:0 1px 0 rgba(255,255,255,.06);
}
.nav__logo{ display:inline-flex; align-items:center; font-weight:900; font-size:1.8rem; letter-spacing:-.04em; color:var(--white); transition:transform .4s var(--ease-ui); }
@media (hover:hover){ .nav__logo:hover{ transform:scale(1.06) rotate(-2deg); } }
.brand-logo-img{ height:clamp(26px,3.4vw,34px); width:auto; display:block; }   /* DS-Bowl-Logo in der Nav */
.nav__progress{ position:absolute; left:0; bottom:0; height:3px; width:100%; transform:scaleX(0); transform-origin:left; background:linear-gradient(90deg,var(--pink-hot),var(--pink-soft)); }
.nav__right{ display:flex; align-items:center; gap:14px; }
.nav__burger{
  width:52px; height:52px; border-radius:var(--r-pill); position:relative;
  display:grid; place-content:center; gap:5px; background:rgba(255,255,255,.08);
  backdrop-filter:blur(8px); transition:background .4s var(--ease-ui);
}
.nav__burger span{ display:block; width:22px; height:2px; background:var(--white); border-radius:2px; transition:transform .4s var(--ease-ui), opacity .3s; }
/* Burger ↔ X — gleiche Animation beim Öffnen & Schließen */
.nav__burger.is-active span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav__burger.is-active span:nth-child(2){ opacity:0; transform:scaleX(.3); }
.nav__burger.is-active span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
@media (hover:hover){ .nav__burger:hover{ background:rgba(255,255,255,.16); } }

.menu{
  position:fixed; inset:0; z-index:300; background:rgba(8,11,20,.97);
  backdrop-filter:blur(12px);
  display:flex; align-items:center;
  padding:calc(var(--nav-h) + 10px) var(--pad-x) 30px; visibility:hidden;
  clip-path:inset(0 0 100% 0);
}
.menu.is-open{ visibility:visible; }
.menu__inner{
  width:100%; display:grid; grid-template-columns:1.05fr .95fr;
  gap:clamp(28px,6vw,90px); align-items:center;
}
.menu__links{ display:flex; flex-direction:column; gap:clamp(2px,.6vw,10px); }
.menu__links a{
  position:relative; width:max-content;
  font-size:clamp(1.6rem,3.6vw,2.9rem); font-weight:900; text-transform:uppercase;
  letter-spacing:-.02em; line-height:1.12; color:var(--white);
  transition:color .3s var(--ease-ui), transform .4s var(--ease-ui); transform-origin:left;
}
@media (hover:hover){ .menu__links a:hover{ color:var(--pink-hot); transform:translateX(10px); } }
/* aktueller Menüpunkt (aktuelle Seite) → dauerhaft in der Seiten-Akzentfarbe */
.menu__links a.is-active{ color:var(--pink-hot); }

/* rechte Spalte: Feature-Karten + Kontakt/Social */
.menu__right{ display:flex; flex-direction:column; gap:18px; width:100%; max-width:460px; justify-self:end; align-self:center; }
.menu__featured{ display:grid; gap:16px; }
.menu__links-feature{ display:none; }   /* Featured: Desktop = Boxen; nur auf dem Handy als Link sichtbar */
.menu__meta{ display:flex; flex-direction:column; gap:14px; padding-top:18px; border-top:1px solid rgba(255,255,255,.1); }
.menu__contact{ display:flex; flex-direction:column; gap:8px; }
.menu__contact a{ display:flex; align-items:center; gap:10px; color:var(--text-dim); font-size:.92rem; transition:color .3s; }
.menu__contact svg{ width:17px; height:17px; flex:none; color:var(--pink-hot); }
@media (hover:hover){ .menu__contact a:hover{ color:#fff; } }
.menu__social{ display:flex; align-items:center; gap:12px; }
.menu__social > a[aria-label]{ width:42px; height:42px; border-radius:var(--r-pill); background:rgba(255,255,255,.08); display:grid; place-content:center; color:#fff; transition:background .3s, transform .3s; }
.menu__social svg{ width:18px; height:18px; }
@media (hover:hover){ .menu__social > a[aria-label]:hover{ background:var(--pink-hot); transform:translateY(-2px); } }
.menu__reserve{ display:inline-flex; align-items:center; gap:.5em; padding:.7em 1.3em; border-radius:var(--r-pill); background:var(--pink-hot); color:#fff; font-weight:700; }
.menu__reserve svg{ width:1.05em; height:1.05em; }
@media (hover:hover){ .menu__reserve:hover{ filter:brightness(1.08); } }
.menu__card{ position:relative; display:block; aspect-ratio:2/1; border-radius:var(--r-card); overflow:hidden; }
.menu__card img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease-ui); }
.menu__card::after{ content:""; position:absolute; inset:0; background:linear-gradient(0deg, rgba(6,8,14,.9), rgba(6,8,14,.05) 72%); }
.menu__card-txt{ position:absolute; left:0; bottom:0; z-index:1; padding:clamp(16px,2vw,24px); }
.menu__card-txt b{ display:block; font-size:clamp(1.2rem,2vw,1.6rem); font-weight:900; text-transform:uppercase; letter-spacing:-.01em; color:#fff; }
.menu__card-txt span{ font-size:.85rem; color:var(--text-dim); }
@media (hover:hover){ .menu__card:hover img{ transform:scale(1.06); } }

.menu__note{ grid-column:1 / -1; margin-top:clamp(16px,2.4vw,32px); color:var(--text-dim); font-weight:500; letter-spacing:.04em; }

/* =============================================================================
   SCENE (fixed video layer behind hero + editions)
   ============================================================================= */
.scene{ position:fixed; inset:0; z-index:0; background:radial-gradient(120% 90% at 50% 10%, #1a1330 0%, var(--bg) 60%);
  transition:filter .5s var(--ease-ui); }
/* sobald die Karten den Fokus übernehmen → Video/Poster weichzeichnen & abdunkeln (weniger Ablenkung) */
.scene--soft{ filter:blur(10px) brightness(.64) saturate(.92); }
.scene__video, .scene__poster{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.scene__poster{ z-index:0; }
.scene__video{ z-index:1; }
.scene::after{ /* readability scrim */
  content:""; position:absolute; inset:0; z-index:2;
  background:linear-gradient(180deg, rgba(10,14,26,.45) 0%, rgba(10,14,26,.15) 30%, rgba(10,14,26,.55) 100%);
}

/* =============================================================================
   PAGE LAYERING
   ============================================================================= */
.page{ position:relative; z-index:1; }
.over-scene{ position:relative; z-index:1; }   /* hero + editions: transparent, video shows */
.rest{ position:relative; z-index:2; background:var(--bg); }  /* covers fixed video as it scrolls up */

/* =============================================================================
   S1 HERO
   ============================================================================= */
.hero{ position:relative; height:260vh; }
/* Hero-Text bleibt FIX auf Position (zentriert), wird von den Karten überdeckt */
.hero__inner{
  position:fixed; inset:0; z-index:1;
  display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center;
  padding:0 var(--pad-x);
  filter:blur(var(--hero-blur,0px)); will-change:filter, opacity;
  pointer-events:none;                 /* Klicks durchlassen … */
}
.hero__inner .btn-pill{ pointer-events:auto; }   /* … außer auf den Buttons */
.hero__eyebrow{ color:var(--pink-soft); margin-bottom:1.1rem; }
.hero__title{ color:var(--white); max-width:18ch; text-shadow:0 10px 50px rgba(0,0,0,.45); }
.hero__title span{ display:block; }
.hero__sub{ margin:1.4rem auto 0; max-width:46ch; color:rgba(255,255,255,.92); }
.hero__buttons{ display:flex; flex-wrap:wrap; gap:14px; justify-content:center; margin-top:1.9rem; }
#erlebnisse{ z-index:2; }   /* Karten scrollen ÜBER den fixen Hero-Text */

/* =============================================================================
   CARDS (shared by editions, content, half)
   ============================================================================= */
.section{ padding:clamp(60px,9vw,140px) var(--pad-x); }
.section--tight{ padding-top:0; }
/* Abstand Content-Boxen → die zwei halben Boxen = gleicher Abstand wie zwischen den Karten */
#angebote{ padding-bottom:clamp(22px,3vw,40px); }

.cards{ display:flex; flex-direction:column; gap:clamp(22px,3vw,40px); }

.card{
  position:relative; border-radius:var(--r-card); overflow:hidden;
  aspect-ratio:16/7;                 /* Querformat — flacher; gleich für ALLE Boxen */
  isolation:isolate;                 /* kein Box-Shadow, kein Overlay-Verlauf */
}
.card__media{ position:absolute; inset:0; overflow:hidden; z-index:0; }
.card__img{
  position:absolute; left:0; top:-10%; width:100%; height:120%;
  object-fit:cover; object-position:72% center; will-change:transform; /* Motiv mittig/rechts zeigen */
}
.card__content{
  position:absolute; inset:0; z-index:1;
  display:flex; flex-direction:column; justify-content:flex-end; /* immer UNTEN */
  gap:.65rem; padding:clamp(22px,3vw,52px); max-width:min(620px, 62%);
}
.card--text-right .card__content{ left:auto; right:0; align-items:flex-end; text-align:right; }
.card__body{ max-width:42ch; color:#ffffff; }   /* reines Weiß (per config überschreibbar) */
.card__cta{ margin-top:.4rem; align-self:flex-start; }
.card--text-right .card__cta{ align-self:flex-end; }
.card[data-detail]{ cursor:pointer; }
/* nur Text-Lesbarkeit auf Platzhaltern (kein Box-Schatten/Overlay) */
.card__content .card-h,
.card__content .card__eyebrow,
.card__content .card__body{ text-shadow:0 1px 16px rgba(0,0,0,.35); }
.card__expand{
  position:absolute; right:16px; bottom:16px; z-index:2;
  width:46px; height:46px; border-radius:var(--r-pill);
  background:rgba(20,23,43,.5); backdrop-filter:blur(8px);
  display:grid; place-content:center; color:#fff;
}
.card__expand svg{ width:19px; height:19px; }

/* =============================================================================
   NEWS-SLIDER (Aktuelles) — eine Karte sichtbar, automatischer Wechsel.
   Gleiche Karten-Optik wie die Content-Boxen; Klick auf die Karte = Link.
   ============================================================================= */
.news-slider{
  position:relative; aspect-ratio:16/7; border-radius:var(--r-card);
  overflow:hidden; isolation:isolate; background:var(--bg-elev);
}
.news-slider .card{
  position:absolute; inset:0; aspect-ratio:auto; border-radius:0; cursor:pointer;
  transform:translateX(100%);                 /* rechts geparkt; JS steuert Ein-/Ausflug */
  transition:transform .7s var(--ease-ui);
  will-change:transform; backface-visibility:hidden;
}
.news-slider .card:first-child{ transform:translateX(0); }   /* Fallback ohne JS: erste News sichtbar */
.news-slider .card.is-active{ transform:translateX(0); z-index:1; }
.news-slider .card:not(.is-active){ pointer-events:none; }    /* nur die sichtbare Karte ist klickbar */
@media (prefers-reduced-motion: reduce){ .news-slider .card{ transition:none; } }
.news-dots{ display:flex; gap:9px; justify-content:center; margin-top:16px; }
.news-dots button{
  width:9px; height:9px; border-radius:var(--r-pill); cursor:pointer;
  background:rgba(255,255,255,.32); transition:width .35s var(--ease-ui), background .35s;
}
.news-dots button.is-active{ width:26px; background:var(--pink-hot); }
@media (hover:hover){ .news-dots button:hover{ background:rgba(255,255,255,.6); } }

/* =============================================================================
   S4 STORY + HOURS
   ============================================================================= */
.story{ display:grid; grid-template-columns:1.3fr .9fr; gap:clamp(28px,5vw,80px); align-items:start; }
.story__eyebrow{ color:#ffffff; margin-bottom:1rem; }
.story__title{ margin-bottom:1.4rem; }
.story__body{ max-width:46ch; }
.story__buttons{ display:flex; flex-wrap:wrap; gap:12px; margin-top:1.7rem; }
.story__buttons:empty{ display:none; margin:0; }
.hours{ background:var(--bg-elev); border:1px solid rgba(255,255,255,.07); border-radius:var(--r-card); padding:clamp(24px,3vw,40px); }
.hours__title{ font-weight:900; text-transform:uppercase; letter-spacing:-.01em; font-size:1.5rem; margin-bottom:1rem; color:#fff; }
/* Umschalter Regulär / Sonderzeiten / Betriebsferien */
.hours__tabs{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:1.1rem; }
.hours__tab{ font-size:.78rem; font-weight:700; letter-spacing:.02em; padding:.5em .9em; border-radius:var(--r-pill); background:rgba(255,255,255,.08); color:var(--text-dim); transition:background .3s var(--ease-ui), color .3s; }
.hours__tab.is-active{ background:var(--pink-hot); color:#fff; }
@media (hover:hover){ .hours__tab:hover{ color:#fff; } }
.hours__list{ display:flex; flex-direction:column; }
.hours__row{ display:flex; justify-content:space-between; gap:18px; padding:.7rem 0; border-bottom:1px solid rgba(255,255,255,.07); font-weight:500; }
.hours__row:last-child{ border-bottom:none; }
.hours__row span:first-child{ color:#fff; }
.hours__row span:last-child{ font-variant-numeric:tabular-nums; color:var(--pink-hot); font-weight:700; }
.hours__text{ color:#fff; padding:.4rem 0 .2rem; }
.hours__note{ margin-top:1.2rem; font-size:.85rem; color:var(--text-dim); }

/* =============================================================================
   S6 HALF CARDS
   ============================================================================= */
.halfs{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(22px,3vw,40px); }
.card--half{ aspect-ratio:16/9; }   /* schmaler → darf höher sein */
.card--half .card__content{ max-width:90%; }

/* =============================================================================
   S7 CONTACT
   ============================================================================= */
.contact{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,5vw,80px); align-items:start; }
.contact__eyebrow{ color:var(--pink-hot); margin-bottom:1rem; }
.contact__title{ margin-bottom:1.2rem; }
.contact__title span{ display:block; }   /* "Fragen?" / "Schreib uns" untereinander */
.contact__body{ max-width:44ch; margin-bottom:2rem; }
.contact__info{ display:flex; flex-direction:column; gap:14px; }
.contact__info a, .contact__info span{ display:flex; align-items:center; gap:14px; color:var(--text); font-weight:500; }
.contact__info svg{ width:20px; height:20px; flex:none; color:var(--pink-hot); }
.contact__info a{ transition:color .3s var(--ease-ui); }
@media (hover:hover){ .contact__info a:hover{ color:var(--pink-hot); } }
.form{ display:flex; flex-direction:column; gap:16px; background:var(--bg-elev); border:1px solid rgba(255,255,255,.07); border-radius:var(--r-card); padding:clamp(24px,3vw,40px); }
.form[hidden]{ display:none; }   /* sonst überschreibt display:flex das [hidden]-Attribut */
.field{ display:flex; flex-direction:column; gap:8px; }
.field label{ font-size:.85rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--text-dim); }
.field input, .field textarea{
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.12);
  border-radius:var(--r-input); padding:14px 16px; color:var(--text); font:inherit; font-size:1rem;
  transition:border-color .3s var(--ease-ui), background .3s var(--ease-ui);
}
.field input:focus, .field textarea:focus{ outline:none; border-color:var(--blue); background:rgba(255,255,255,.07); }
.field textarea{ resize:vertical; min-height:120px; }
.field.is-error input, .field.is-error textarea{ border-color:var(--pink-hot); }
.field__err{ font-size:.8rem; color:var(--pink-hot); min-height:1em; }
.form__submit{ align-self:flex-start; margin-top:6px; }
.form__status{ font-weight:600; min-height:1.4em; }
.form__status.is-ok{ color:var(--green); }
.form__status.is-bad{ color:var(--pink-hot); }

/* Umschalter Kontaktanfrage ↔ Bewerbung */
.form-switch{ display:flex; gap:6px; margin-bottom:18px; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.08); border-radius:var(--r-pill); padding:6px; }
.form-switch__tab{ flex:1; padding:.7em 1em; border-radius:var(--r-pill); font-weight:700; font-size:.92rem; color:var(--text-dim); transition:background .3s var(--ease-ui), color .3s; }
.form-switch__tab.is-active{ background:var(--pink-hot); color:#fff; }
@media (hover:hover){ .form-switch__tab:not(.is-active):hover{ color:#fff; } }
.form__intro{ color:var(--text-dim); font-size:.95rem; }
.field__hint{ text-transform:none; letter-spacing:0; font-weight:500; color:var(--text-dim); font-size:.78rem; }

/* Select wie Inputs (mit Pfeil) */
.field select{ background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.12); border-radius:var(--r-input);
  padding:14px 44px 14px 16px; color:var(--text); font:inherit; font-size:1rem; appearance:none; -webkit-appearance:none; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23E6007E' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 16px center;
  transition:border-color .3s var(--ease-ui), background-color .3s var(--ease-ui); }
.field select:focus{ outline:none; border-color:var(--blue); background-color:rgba(255,255,255,.07); }
.field.is-error select{ border-color:var(--pink-hot); }
.field select option{ color:#000; }

/* Datei-Upload */
.field label.file-field{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; cursor:pointer;
  text-transform:none; letter-spacing:normal; font-weight:400; color:var(--text-dim); }  /* reset .field label-Vererbung (höhere Spezifität) */
.file-field input[type="file"]{ position:absolute; width:1px; height:1px; opacity:0; overflow:hidden; clip:rect(0 0 0 0); }
.file-field__btn{ display:inline-flex; align-items:center; padding:.7em 1.2em; border-radius:var(--r-pill);
  background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.18); color:#fff; font-weight:700; font-size:.9rem; white-space:nowrap;
  transition:background .3s var(--ease-ui); }
.file-field__txt{ color:var(--text-dim); font-size:.88rem; word-break:break-word; }
@media (hover:hover){ .file-field:hover .file-field__btn{ background:rgba(255,255,255,.18); } }
.file-field input[type="file"]:focus-visible + .file-field__btn{ outline:3px solid var(--blue); outline-offset:3px; }

/* =============================================================================
   S8 FAQ
   ============================================================================= */
.faq{ max-width:920px; margin:0 auto; display:flex; flex-direction:column; gap:14px; }
.faq__head{ text-align:center; margin-bottom:clamp(28px,4vw,56px); }
.faq__head .eyebrow{ color:var(--pink-hot); display:block; margin-bottom:1rem; }
.faq__item{ background:var(--bg-elev); border:1px solid rgba(255,255,255,.07); border-radius:var(--r-card); overflow:hidden; }
.faq__q{ width:100%; display:flex; justify-content:space-between; align-items:center; gap:20px; text-align:left; padding:clamp(18px,2.4vw,28px); font-weight:700; font-size:clamp(1.05rem,1.6vw,1.35rem); }
.faq__icon{ flex:none; width:30px; height:30px; position:relative; }
.faq__icon::before,.faq__icon::after{ content:""; position:absolute; left:50%; top:50%; width:16px; height:2px; background:var(--pink-hot); transform:translate(-50%,-50%); transition:transform .4s var(--ease-ui); }
.faq__icon::after{ transform:translate(-50%,-50%) rotate(90deg); }
.faq__item.is-open .faq__icon::after{ transform:translate(-50%,-50%) rotate(0); }
.faq__a{ height:0; overflow:hidden; }
.faq__a-inner{ padding:0 clamp(18px,2.4vw,28px) clamp(18px,2.4vw,28px); color:var(--text-dim); max-width:64ch; }

/* =============================================================================
   S9 FOOTER
   ============================================================================= */
/* Ecke oben rechts folgt der Seiten-Akzentfarbe (--pink-hot): Index=pink, LaserTag=grün, McDonald's=orange … */
.footer{ position:relative; overflow:hidden;
  background:radial-gradient(120% 120% at 80% 0%, color-mix(in srgb, var(--pink-hot, #E6007E) 20%, #07060d) 0%, #070a13 46%, #04060c 100%);
  padding:clamp(48px,6vw,80px) var(--pad-x) 36px; }
/* CTA-Band oben */
.footer__cta{ position:relative; z-index:1; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:24px;
  padding-bottom:clamp(36px,5vw,56px); margin-bottom:clamp(36px,5vw,56px); border-bottom:1px solid rgba(255,255,255,.1); }
.footer__cta-eye{ color:var(--pink-hot); margin-bottom:.6rem; }
.footer__cta-title{ font-size:clamp(1.9rem,4.5vw,3.4rem); font-weight:900; line-height:.98; letter-spacing:-.02em; text-transform:uppercase; color:#fff; }
.footer__cta-btn{ font-size:1.05rem; padding:1em 1.7em; }
/* Grid */
.footer__grid{ position:relative; z-index:1; display:flex; flex-wrap:wrap; gap:48px; justify-content:space-between; align-items:flex-start; }
.footer__brand{ display:flex; flex-direction:column; align-items:flex-start; gap:16px; max-width:34ch; }
.footer__logo{ font-weight:900; font-size:2.4rem; letter-spacing:-.04em; color:#fff; display:inline-flex; margin-bottom:16px; }   /* etwas Luft zwischen Logo und Adresse */
.footer__logo-img{ height:clamp(34px,4.5vw,48px); width:auto; display:block; }   /* DS-Bowl-Logo im Footer */
.footer__tag{ color:var(--text-dim); }
.footer__tag:empty{ display:none; }   /* leere Tagline → kein Abstand, Logo bleibt an Ort */
.footer__contact{ display:flex; flex-direction:column; gap:8px; }
.footer__contact a, .footer__contact span{ display:flex; align-items:center; gap:10px; color:var(--text-dim); font-size:.9rem; transition:color .3s; }
.footer__contact svg{ width:17px; height:17px; flex:none; color:var(--pink-hot); }
@media (hover:hover){ .footer__contact a:hover{ color:#fff; } }
.footer__cols{ display:flex; flex-wrap:wrap; gap:clamp(30px,5vw,72px); }
.footer__col h4{ font-size:.8rem; letter-spacing:.14em; text-transform:uppercase; color:var(--pink-soft); margin-bottom:1rem; }
.footer__col a{ display:block; padding:.35rem 0; color:#fff; transition:color .3s, transform .3s; font-weight:500; }
@media (hover:hover){ .footer__col a:hover{ color:var(--pink-hot); transform:translateX(4px); } }
.footer__social{ display:flex; gap:10px; margin-top:4px; }
.footer__social a{ width:42px; height:42px; border-radius:var(--r-pill); background:rgba(255,255,255,.08); display:grid; place-content:center; color:#fff; transition:background .3s, transform .3s; }
.footer__social svg{ width:18px; height:18px; }
@media (hover:hover){ .footer__social a:hover{ background:var(--pink-hot); transform:translateY(-3px); } }
.footer__bottom{ position:relative; z-index:1; margin-top:clamp(36px,5vw,64px); padding-top:24px; border-top:1px solid rgba(255,255,255,.08); font-size:.82rem; color:var(--text-dim); display:flex; flex-wrap:wrap; gap:10px 24px; justify-content:space-between; }
.footer__credit{ color:inherit; text-decoration:underline; text-underline-offset:2px; transition:color .3s; }
@media (hover:hover){ .footer__credit:hover{ color:var(--pink-hot); } }
/* riesige Wortmarke im Hintergrund – auf Julians Wunsch ausgeblendet */
.footer__wordmark{ display:none; }

/* =============================================================================
   ZAHLEN-BAND
   ============================================================================= */
.stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(16px,3vw,40px); text-align:center;
  background:var(--bg-elev); border:1px solid rgba(255,255,255,.07); border-radius:var(--r-card); padding:clamp(28px,4vw,52px) clamp(20px,3vw,40px); }
.stat__num{ font-size:clamp(2.4rem,6vw,4.6rem); font-weight:900; letter-spacing:-.03em; line-height:1; color:#fff; font-variant-numeric:tabular-nums; }
.stat__label{ margin-top:.5rem; color:var(--text-dim); font-weight:600; font-size:clamp(.82rem,1.2vw,1.05rem); }

/* =============================================================================
   ANLÄSSE / EVENTS
   ============================================================================= */
.events__head{ text-align:center; max-width:62ch; margin:0 auto clamp(28px,4vw,48px); }
.events__head .eyebrow{ color:var(--pink-hot); display:block; margin-bottom:1rem; }
.events__head .body{ margin-top:1rem; }
.events{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(16px,2vw,24px); }
.event{ background:var(--bg-elev); border:1px solid rgba(255,255,255,.07); border-radius:var(--r-card);
  padding:clamp(22px,2.4vw,30px); transition:transform .4s var(--ease-ui), border-color .4s, background .4s; }
.event__icon{ display:inline-grid; place-content:center; width:56px; height:56px; border-radius:16px; margin-bottom:.9rem; background:rgba(230,0,126,.12); color:var(--pink-hot); }
.event__icon svg{ width:28px; height:28px; }
.event__title{ font-size:1.2rem; font-weight:800; margin-bottom:.5rem; color:#fff; }
.event__text{ color:var(--text-dim); font-size:.95rem; }
@media (hover:hover){ .event:hover{ transform:translateY(-5px); border-color:var(--pink-hot); background:#171022; } }

/* =============================================================================
   KOOPERATIONSPARTNER (Logo-Lauf)
   ============================================================================= */
.partners__title{ text-align:center; color:var(--text-dim); font-size:.82rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; margin-bottom:clamp(20px,2.5vw,32px); }
.partners{ overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); }
/* Abstand per margin (nicht flex-gap) → -50% ist exakt ein Satz = nahtlos & flüssig */
.partners__row{ display:flex; width:max-content; align-items:center;
  animation:marquee 40s linear infinite; will-change:transform; }
.partners__logo{ flex:none; margin-right:clamp(48px,7vw,100px); }
.partners__logo img{ height:clamp(30px,4vw,48px); width:auto; opacity:.7; filter:grayscale(1) brightness(1.5); transition:opacity .3s, filter .3s; }
@media (hover:hover){ .partners:hover .partners__row{ animation-play-state:paused; } .partners__logo img:hover{ opacity:1; filter:none; } }
@keyframes marquee{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

/* =============================================================================
   GEMEINSAME SEKTIONS-KÖPFE + NEUE SEKTIONEN
   ============================================================================= */
.sec-head{ text-align:center; max-width:64ch; margin:0 auto clamp(28px,4vw,48px); }
.sec-head .eyebrow{ color:var(--pink-hot); display:block; margin-bottom:1rem; }
.sec-head .body{ margin-top:1rem; }

/* USP-Leiste */
.usps{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(16px,2vw,28px); }
.usp{ text-align:center; padding:clamp(18px,2vw,26px); }
.usp__icon{ display:inline-grid; place-content:center; width:62px; height:62px; border-radius:18px; margin-bottom:1rem;
  background:rgba(230,0,126,.12); color:var(--pink-hot); }
.usp__icon svg{ width:30px; height:30px; }
.usp__title{ font-size:1.2rem; font-weight:800; margin-bottom:.4rem; color:#fff; }
.usp__text{ color:var(--text-dim); font-size:.95rem; }

/* Aktionen / Specials */
.specials{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,2vw,24px); }
.special{ position:relative; border-radius:var(--r-card); padding:clamp(24px,3vw,38px); color:#fff; overflow:hidden;
  border:1px solid rgba(255,255,255,.1); }
.special--bowling{ background:linear-gradient(140deg,#3a1500,#9a1257); }
.special--laser{ background:linear-gradient(140deg,#04130a,#0c7a1e); }
.special--m2{ background:linear-gradient(140deg,#0a0410,#9a0a55); }
.special__tag{ display:inline-block; font-size:.72rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
  background:rgba(255,255,255,.16); padding:.35em .8em; border-radius:var(--r-pill); margin-bottom:1rem; }
.special__title{ font-size:1.5rem; font-weight:900; text-transform:uppercase; letter-spacing:-.01em; }
.special__price{ font-size:1.9rem; font-weight:900; color:#fff; margin:.2rem 0 .6rem; }
.special__text{ color:rgba(255,255,255,.85); font-size:.95rem; }

/* Split (Bar / Anfahrt) */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(24px,4vw,64px); align-items:center; }
.split--reverse .split__media{ order:2; }   /* Bild rechts */
.split__media{ border-radius:var(--r-card); overflow:hidden; aspect-ratio:16/11; display:block; }
.split__media img{ width:100%; height:100%; object-fit:cover; }
.split__body .eyebrow{ color:var(--pink-hot); margin-bottom:1rem; }
.split__body .h2{ margin-bottom:1.1rem; }
.split__body .body{ margin-bottom:1.6rem; }
.split__body .btn-pill{ }
.anfahrt__addr{ display:flex; align-items:center; gap:10px; color:#fff; font-weight:600; margin-bottom:1.4rem; }
.anfahrt__addr svg{ width:20px; height:20px; color:var(--pink-hot); flex:none; }

/* Ablauf */
.steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(20px,3vw,40px); counter-reset:s; }
.step{ position:relative; padding-top:.5rem; }
.step__n{ font-size:clamp(2.4rem,5vw,3.6rem); font-weight:900; color:transparent; -webkit-text-stroke:2px var(--pink-hot); line-height:1; margin-bottom:.6rem; }
.step__title{ font-size:1.3rem; font-weight:800; margin-bottom:.4rem; color:#fff; }
.step__text{ color:var(--text-dim); }

/* Galerie — echtes Masonry via CSS-Columns: keine Lücken, Bilder in Originalform (nicht verzerrt) */
.gallery{ column-count:3; column-gap:clamp(10px,1.4vw,16px); }
.gallery__item{ break-inside:avoid; margin:0 0 clamp(10px,1.4vw,16px); border-radius:var(--r-card); overflow:hidden; }
.gallery__item img{ width:100%; height:auto; display:block; transition:transform .6s var(--ease-ui);
  aspect-ratio: var(--gimg-ar, 3 / 2); }   /* Platz reservieren → kein Kollaps/Reflow vor dem Lazy-Load (Morph startet sauber). touch.js setzt --gimg-ar aufs echte Verhältnis. */
@media (hover:hover){ .gallery__item:hover img{ transform:scale(1.06); } }
/* klickbar → Morph/Lightbox */
.gallery__item.js-gzoom{ position:relative; cursor:pointer; }
.gallery__zoom{ position:absolute; right:12px; bottom:12px; width:40px; height:40px; border-radius:var(--r-pill);
  background:rgba(20,23,43,.5); backdrop-filter:blur(8px); color:#fff; display:grid; place-content:center;
  opacity:0; transform:translateY(6px); transition:opacity .3s var(--ease-ui), transform .3s var(--ease-ui); pointer-events:none; }
.gallery__zoom svg{ width:18px; height:18px; }
@media (hover:hover){ .gallery__item.js-gzoom:hover .gallery__zoom{ opacity:1; transform:translateY(0); } }
@media (hover:none){ .gallery__zoom{ opacity:.85; transform:none; } }

/* Bewertungen */
.reviews{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,2vw,24px); }
.review{ background:var(--bg-elev); border:1px solid rgba(255,255,255,.07); border-radius:var(--r-card); padding:clamp(22px,2.4vw,32px); margin:0; }
.review__stars{ display:flex; gap:3px; margin-bottom:1rem; }
.review__stars .star{ width:18px; height:18px; color:rgba(255,255,255,.2); }
.review__stars .star.is-on{ color:var(--pink-hot); }
.review__stars svg{ width:18px; height:18px; }
.review__text{ color:#fff; font-size:1.02rem; line-height:1.5; margin-bottom:1rem; }
.review__name{ color:var(--text-dim); font-style:normal; font-weight:700; }

/* Gutschein-Banner */
.banner{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:24px;
  border-radius:var(--r-card); padding:clamp(30px,4vw,56px); color:#fff;
  background:linear-gradient(120deg,var(--pink-hot),#7a0344); }
.banner .eyebrow{ color:rgba(255,255,255,.85); margin-bottom:.6rem; }
.banner .body{ color:rgba(255,255,255,.9); max-width:48ch; margin-top:.6rem; }

/* Newsletter */
.newsletter{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:24px;
  background:var(--bg-elev); border:1px solid rgba(255,255,255,.08); border-radius:var(--r-card); padding:clamp(28px,4vw,52px); }
.newsletter .body{ margin-top:.5rem; max-width:46ch; }
.newsletter__form{ display:flex; flex-wrap:wrap; gap:12px; align-items:center; }
.newsletter__form input{ background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.14); border-radius:var(--r-pill);
  padding:14px 20px; color:#fff; font:inherit; min-width:min(280px,70vw); }
.newsletter__form input:focus{ outline:none; border-color:var(--pink-hot); }
.newsletter__status{ flex-basis:100%; font-weight:600; font-size:.9rem; min-height:1em; }

/* Instagram / Social */
.social-grid{ display:grid; grid-template-columns:repeat(6,1fr); gap:clamp(8px,1vw,14px); }
.social-tile{ position:relative; aspect-ratio:1; border-radius:16px; overflow:hidden; display:block; }
.social-tile img{ width:100%; height:100%; object-fit:cover; transition:transform .5s var(--ease-ui); }
.social-tile__ig{ position:absolute; inset:0; display:grid; place-content:center; color:#fff; opacity:0; background:rgba(230,0,126,.55); transition:opacity .3s; }
.social-tile__ig svg{ width:30px; height:30px; }
@media (hover:hover){ .social-tile:hover img{ transform:scale(1.08); } .social-tile:hover .social-tile__ig{ opacity:1; } }
.social-cta{ text-align:center; margin-top:clamp(20px,2.5vw,32px); }

/* hours buttons */
.hours__buttons{ display:flex; flex-wrap:wrap; gap:10px; margin-top:1.3rem; }

/* =============================================================================
   §7 DETAIL OVERLAY
   ============================================================================= */
.overlay{
  position:fixed; inset:0; z-index:500; visibility:hidden; opacity:0;
  background:var(--bg); overflow:hidden;
}
.overlay.is-open{ visibility:visible; opacity:1; }

.overlay__track{ display:flex; height:100%; width:max-content; will-change:transform; }
.panel{
  position:relative; width:100vw; height:100%; flex:none;
  display:grid; grid-template-columns:58% 42%; overflow:hidden;
  background:#05070a; color:var(--p-text, var(--text));
}
.panel__media{ position:relative; overflow:hidden; }
.panel__img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:72% center; } /* bester Ausschnitt: Mitte/rechts */
.panel__content{
  position:relative; display:flex; flex-direction:column; justify-content:center; gap:1.1rem;
  padding:clamp(28px,4vw,80px); padding-top:calc(var(--nav-h) + 10px);
  background:var(--p-bg, var(--bg));   /* volles Themed-Verlaufsfeld (Hell- oder Dunkel-Sektion) */
}
.panel__eyebrow{ color:var(--p-eyebrow, var(--blue)); }
.panel__title{ color:var(--p-headline, var(--white)); }
.panel__title span{ display:block; }
.panel__script{
  display:block; font-family:"Brush Script MT","Segoe Script",cursive; font-weight:400;
  text-transform:none; letter-spacing:0; line-height:1;
  font-size:clamp(2.4rem,6vw,5.5rem); color:var(--p-script, var(--pink-hot));
  transform:rotate(-6deg); transform-origin:left; margin:.1em 0;
}
.panel__body{ color:var(--p-text, var(--text-dim)); max-width:42ch; }
.panel__cta{ margin-top:.5rem; align-self:flex-start; }

/* expand affordance on panel image */
.panel__expand{
  position:absolute; right:18px; bottom:18px; z-index:3;
  width:50px; height:50px; border-radius:var(--r-pill);
  background:rgba(20,23,43,.5); backdrop-filter:blur(8px); color:#fff;
  display:grid; place-content:center;
}
.panel__expand svg{ width:20px; height:20px; }

/* gallery thumbs inside split panels — größer */
.panel__gallery{ display:flex; gap:14px; margin-top:.6rem; flex-wrap:wrap; }
.panel__gallery img{ width:clamp(130px,17vw,210px); aspect-ratio:3/2; height:auto; object-fit:cover; border-radius:16px; cursor:pointer; border:2px solid rgba(255,255,255,.22); transition:transform .35s var(--ease-ui); }
.panel--light .panel__gallery img{ border-color:rgba(0,0,0,.12); }
@media (hover:hover){ .panel__gallery img:hover{ transform:translateY(-4px) scale(1.03); } }

/* Panel-Typ: Bild-Grid – freie Anordnung, jedes Bild behält sein Seitenverhältnis */
.panel--grid{ display:block; }
.panel__gridwrap{ height:100%; display:flex; flex-direction:column; justify-content:center; gap:clamp(14px,2.4vw,30px);
  padding:calc(var(--nav-h) + 24px) clamp(20px,4vw,72px) clamp(24px,4vw,56px); }
.panel__ghead{ flex:none; text-align:center; }
.panel__ghead .panel__eyebrow{ color:var(--p-eyebrow,var(--pink-hot)); }
.panel__ghead .panel__title{ color:var(--p-headline,#fff); }
/* Standard-Masonry: locker verteilt, jedes Bild behält sein Seitenverhältnis (Original-Look) */
.panel__grid{ flex:0 1 auto; min-height:0; display:flex; flex-wrap:wrap; align-content:center; justify-content:center; align-items:center;
  gap:clamp(12px,2.2vw,32px); overflow:hidden; }
.panel__gitem{ position:relative; margin:0; height:clamp(120px,24vh,210px); border-radius:16px; overflow:hidden; cursor:pointer;
  box-shadow:0 18px 40px -24px rgba(0,0,0,.7); }
.panel__gitem img{ display:block; height:100%; width:auto; max-width:none; object-fit:cover; transition:transform .5s var(--ease-ui); }
.panel__gitem:nth-child(3n){ height:clamp(150px,30vh,260px); }
.panel__gitem:nth-child(4n){ height:clamp(100px,19vh,170px); }
.panel__gitem:nth-child(2n){ transform:translateY(-10px); }
.panel__gitem:nth-child(3n+1){ transform:translateY(12px); }
/* Fit-Variante – NUR per Config-Flag fit:true (z. B. M2MAXX „Such dir dein Spiel"):
   Reihen teilen sich die Höhe, contain = jedes Bild voll sichtbar, nichts abgeschnitten.
   Wird NICHT global verwendet – alle anderen Grids bleiben Masonry. */
.panel--gridfit .panel__grid{ flex:1; display:grid; align-content:center;
  grid-template-columns:repeat(auto-fit, minmax(clamp(140px,16vw,210px), 1fr));
  grid-auto-rows:minmax(0, 1fr); gap:clamp(10px,1.6vw,24px); }
.panel--grid.panel--gridfit .panel__gitem{ height:auto; min-width:0; min-height:0; transform:none; border-radius:0; box-shadow:none; }
.panel--grid.panel--gridfit .panel__gitem img{ width:100%; height:100%; object-fit:contain; filter:drop-shadow(0 16px 30px rgba(0,0,0,.55)); }
/* Grid-Item mit Bildunterschrift (z. B. Trade-Island-Sorten): Bild oben, Name darunter */
.panel__gitem--cap{ display:flex; flex-direction:column; }
.panel__gitem--cap img{ flex:1; min-height:0; }
.panel__gcap{ flex:none; text-align:center; font-size:.82rem; font-weight:700; color:var(--p-headline,#fff); padding-top:.45rem; line-height:1.2; }
.panel__gzoom{ position:absolute; right:10px; bottom:10px; width:36px; height:36px; border-radius:var(--r-pill);
  background:rgba(8,10,16,.55); backdrop-filter:blur(8px); color:#fff; display:grid; place-content:center;
  opacity:0; transform:translateY(6px); transition:opacity .3s var(--ease-ui), transform .3s var(--ease-ui); pointer-events:none; }
.panel__gzoom svg{ width:16px; height:16px; }
@media (hover:hover){ .panel__gitem:hover img{ transform:scale(1.05); } .panel__gitem:hover .panel__gzoom{ opacity:1; transform:translateY(0); } }
@media (hover:none){ .panel__gzoom{ opacity:.85; transform:none; } }

/* Panel-Typ: Video – Text als Kopf, Videos füllen den Rest (groß, nicht gequetscht) */
.panel--video{ display:block; }
.panel__vwrap{ height:100%; display:flex; flex-direction:column; justify-content:center; gap:clamp(18px,3vw,36px);
  padding:calc(var(--nav-h) + 24px) clamp(20px,4vw,72px) clamp(24px,4vw,52px); }
.panel__vtext{ flex:none; text-align:center; max-width:68ch; margin:0 auto; }
.panel__vtext .panel__eyebrow{ color:var(--p-eyebrow,var(--pink-hot)); }
.panel__vtext .panel__title{ color:var(--p-headline,#fff); }
.panel__vtext .panel__body{ color:var(--p-text,var(--text-dim)); margin-top:.6rem; }
.panel__vtext .panel__cta{ margin-top:1.1rem; display:inline-flex; }
.panel__videos{ flex:none; display:flex; gap:clamp(16px,2.4vw,32px); justify-content:center; align-items:center; flex-wrap:wrap; }
/* gleiche Höhe für beide → ausgewogen; aspect-ratio hält das Format (kein Verzerren durch Flex-Shrink) */
.panel__video{ flex:none; height:min(46vh,32vw); max-height:480px; border-radius:18px; overflow:hidden; background:#000; box-shadow:0 34px 80px -30px rgba(0,0,0,.75); }
.panel__video iframe{ display:block; width:100%; height:100%; border:0; }
.panel__video--portrait{ aspect-ratio:9/16; }
.panel__video--landscape{ aspect-ratio:16/9; }
/* nur ein Video (z. B. Erklärvideo) → darf größer werden */
.panel__videos:has(.panel__video:only-child) .panel__video--landscape{ height:min(56vh,42vw); max-height:560px; }
.panel__video--ph{ display:grid; place-content:center; border:1px dashed rgba(255,255,255,.25); }
.panel__vph{ display:flex; flex-direction:column; align-items:center; gap:.4rem; color:var(--text-dim); text-align:center; padding:20px; }
.panel__vph svg{ width:34px; height:34px; color:var(--p-eyebrow,var(--pink-hot)); }
.panel__vph b{ color:#fff; font-size:1rem; }
.panel__vph i{ font-style:normal; font-size:.78rem; opacity:.7; }

/* Panel-Typ: Pakete – zentriert (ohne Bild) ODER Split mit Bild links (mit p.image) */
.panel--pkgscenter{ display:block; }
/* Split-Variante nutzt das Standard-Panel-Grid (Bild links, Inhalt rechts) – etwas mehr Platz für die Boxen */
.panel--pkgsplit{ grid-template-columns:46% 54%; }
.panel--pkgsplit .panel__content{ gap:clamp(.7rem,1.4vw,1.1rem); }
.panel__pkgswrap{ height:100%; display:flex; flex-direction:column; justify-content:center; gap:clamp(20px,3vw,38px);
  padding:calc(var(--nav-h) + 24px) clamp(20px,4vw,72px) clamp(24px,4vw,52px); }
.panel__pkgs{ display:flex; gap:clamp(16px,2.4vw,28px); justify-content:center; align-items:stretch; flex-wrap:wrap; }
.panel__pkgs--col{ flex-direction:column; flex-wrap:nowrap; align-items:flex-start; gap:clamp(12px,1.6vw,18px); margin-top:.4rem; }
.panel__pkgs--col .panel__pkg{ flex:none; width:100%; max-width:440px; }
.panel__pkg{ flex:1 1 300px; max-width:380px; display:flex; flex-direction:column; text-align:left;
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.14); border-radius:var(--r-card);
  padding:clamp(20px,2.4vw,30px); }
.panel__pkg-tag{ align-self:flex-start; font-size:.7rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
  color:var(--p-eyebrow,var(--pink-hot)); background:rgba(255,255,255,.1); padding:.32em .8em; border-radius:var(--r-pill); margin-bottom:.8rem; }
.panel__pkg-name{ font-size:1.35rem; font-weight:900; text-transform:uppercase; letter-spacing:-.01em; color:var(--p-headline,#fff); }
.panel__pkg-price{ font-size:1.7rem; font-weight:900; color:var(--p-headline,#fff); margin:.15rem 0 .6rem; }
.panel__pkg-price span{ font-size:.85rem; font-weight:600; color:var(--p-text,var(--text-dim)); }
.panel__pkg-meta{ display:flex; flex-wrap:wrap; gap:.3rem .5rem; margin-bottom:.7rem; }
.panel__pkg-meta span{ font-size:.74rem; font-weight:700; color:var(--p-text,var(--text-dim)); background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.12); padding:.26em .7em; border-radius:var(--r-pill); }
.panel__pkg-text{ color:var(--p-text,var(--text-dim)); font-size:.9rem; flex:1; }
.panel__pkg-btn{ align-self:flex-start; margin-top:1.1rem; }

@media (max-width:760px){
  .panel__gridwrap{ padding:calc(var(--nav-h) + 14px) 20px 20px; gap:12px; }
  /* Masonry-Panels mobil: 2 Spalten, etwas kleinere Reihen + mehr Abstand → luftiger, weniger „Klotz" */
  .panel--grid:not(.panel--gridfit) .panel__grid{ display:grid; flex:0 1 auto; grid-template-columns:repeat(2,1fr);
    grid-auto-rows:19vh; gap:11px; align-content:center; }
  .panel--grid:not(.panel--gridfit) .panel__gitem:nth-child(n){ height:100%; min-height:0; min-width:0; transform:none; border-radius:12px; overflow:hidden; box-shadow:0 14px 30px -20px rgba(0,0,0,.7); }
  .panel--grid:not(.panel--gridfit) .panel__gitem:nth-child(n+7){ display:none; }   /* mobil nur 6 Bilder */
  .panel--grid:not(.panel--gridfit) .panel__gitem img{ width:100%; height:100%; object-fit:cover; }
  /* Fit-Panel (M2MAXX „Such dir dein Spiel") mobil: ALLE Bilder, vollständig sichtbar (contain) */
  .panel--gridfit .panel__grid{ display:grid; flex:0 1 auto; grid-template-columns:repeat(2,1fr); grid-auto-rows:15vh; gap:8px; align-content:center; }
  .panel--grid.panel--gridfit .panel__gitem{ height:100%; min-height:0; min-width:0; }
  .panel--grid.panel--gridfit .panel__gitem img{ width:100%; height:100%; object-fit:contain; }
  .panel__vwrap{ padding:calc(var(--nav-h) + 14px) 16px 18px; gap:16px; }
  .panel__videos{ flex:none; flex-direction:column; }
  .panel__video{ height:auto; }
  .panel__video--portrait{ width:min(52vw,240px); }
  .panel__video--landscape{ width:100%; }
}

/* overlay chrome */
.overlay__back{
  position:fixed; top:24px; left:var(--pad-x); z-index:520;
  background:var(--p-back, var(--pink-soft)); color:var(--p-pill-ink, var(--ink));
}
.overlay__preorder{
  position:fixed; top:24px; right:var(--pad-x); z-index:520;
  background:var(--p-pill, var(--pink-soft)); color:var(--p-pill-ink, var(--ink));
}
/* nur eine komplett abgerundete Pille mit animiertem Strich (keine 1/3-Anzeige) */
.overlay__progress{
  position:fixed; left:var(--pad-x); bottom:26px; z-index:530;
  display:flex; align-items:center;
  background:rgba(0,0,0,.72); backdrop-filter:blur(8px);
  border-radius:999px; padding:4px 5px;
}
.overlay__progress-track{ width:clamp(120px,18vw,220px); height:6px; border-radius:999px; background:rgba(255,255,255,.25); overflow:hidden; }
.overlay__progress-fill{ display:block; height:100%; width:0%; min-width:12px; border-radius:999px; background:#fff; transition:width .14s linear; } /* weiß, immer sichtbar, folgt dem Scrollen */
/* nur 1 Panel → Balken bleibt (voll), nur den Wisch-Hinweis ausblenden */
.overlay--single .overlay__hint{ display:none; }
.overlay__hint{
  position:fixed; right:var(--pad-x); bottom:34px; z-index:520;
  font-size:.74rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase;
  color:rgba(255,255,255,.6); display:flex; align-items:center; gap:10px;
}
/* hint/label colour for light vs dark panels is driven in detail.js (applyChrome) */

/* morph clone layer + lightbox */
.morph-clone{ position:fixed; z-index:540; overflow:hidden; border-radius:var(--r-card); will-change:transform,width,height,top,left; }
.morph-clone img{ width:100%; height:100%; object-fit:cover; object-position:72% center; } /* gleicher Ausschnitt wie Panel → nahtloser Morph */
.lightbox{ position:fixed; inset:0; z-index:560; background:rgba(5,7,12,.92); visibility:hidden; opacity:0; display:grid; place-content:center; backdrop-filter:blur(4px); }
.lightbox.is-open{ visibility:visible; opacity:1; }
.lightbox__close{ position:fixed; top:24px; right:var(--pad-x); width:54px; height:54px; border-radius:var(--r-pill); background:rgba(255,255,255,.16); backdrop-filter:blur(6px); display:grid; place-content:center; font-size:0; color:#fff; z-index:570; transition:background .25s var(--ease-ui); }
@media (hover:hover){ .lightbox__close:hover{ background:rgba(255,255,255,.28); } }
/* sauberes X aus zwei Strichen (statt „✕"-Zeichen, das je nach Font schief wirkt) */
.lightbox__close::before, .lightbox__close::after{ content:""; position:absolute; top:50%; left:50%; width:20px; height:2.5px; border-radius:2px; background:currentColor; }
.lightbox__close::before{ transform:translate(-50%,-50%) rotate(45deg); }
.lightbox__close::after{ transform:translate(-50%,-50%) rotate(-45deg); }

body.is-locked{ overflow:hidden; }

/* =============================================================================
   Scroll-Hinweis unten mittig (touch.js erzeugt .scrollcue auf allen Seiten)
   ============================================================================= */
.scrollcue{
  position:fixed; left:50%; bottom:22px; transform:translateX(-50%); z-index:200;
  display:flex; flex-direction:column; align-items:center; gap:7px;
  color:#fff; opacity:.45; pointer-events:none; text-align:center;
  transition:opacity .5s var(--ease-ui), bottom .45s var(--ease-ui);
}
.scrollcue__label{ font-size:.7rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; white-space:nowrap;
  text-shadow:0 1px 10px rgba(0,0,0,.45); transition:font-size .3s var(--ease-ui); }
.scrollcue__chevron{ width:22px; height:22px; display:block; animation:scrollcueBounce 1.9s var(--ease-ui) infinite;
  filter:drop-shadow(0 1px 6px rgba(0,0,0,.4)); }
.scrollcue__chevron svg{ width:100%; height:100%; }
@keyframes scrollcueBounce{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(6px); } }
.scrollcue.is-hidden{ opacity:0; }                       /* am Seitenende / nicht scrollbar */
/* Inaktivität: als klickbarer Button — fetter, höher, mit Pill-Hintergrund */
.scrollcue.is-nagging{ opacity:1; bottom:40px; pointer-events:auto; cursor:pointer;
  padding:13px 26px 11px; border-radius:22px;
  background:rgba(14,17,30,.82); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.18); box-shadow:0 18px 46px -16px rgba(0,0,0,.6); }
.scrollcue.is-nagging .scrollcue__label{ font-size:.9rem; font-weight:800; letter-spacing:.06em; }
.scrollcue.is-nagging .scrollcue__chevron{ width:24px; height:24px; animation-duration:.9s; }
@media (hover:hover){ .scrollcue.is-nagging:hover{ border-color:color-mix(in srgb, var(--pink-hot,#E6007E) 65%, rgba(255,255,255,.18)); box-shadow:0 20px 50px -14px color-mix(in srgb, var(--pink-hot,#E6007E) 45%, transparent); } }
body.is-locked .scrollcue{ opacity:0 !important; }       /* Menü/Overlay/Lightbox offen → aus */
@media (prefers-reduced-motion: reduce){ .scrollcue__chevron{ animation:none; } }
@media (max-width:760px){ .scrollcue{ bottom:16px; } .scrollcue.is-nagging{ bottom:28px; } }

/* =============================================================================
   Wartungs-/Platzhalterseite (.page-maint — z.B. gutscheine.html vorübergehend)
   ============================================================================= */
.maint{ min-height:100vh; min-height:100svh; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:clamp(28px,5vw,48px); padding:48px 22px; text-align:center;
  background:radial-gradient(120% 120% at 50% -10%, color-mix(in srgb, var(--pink-hot,#E6007E) 18%, #07060d) 0%, #070a13 50%, #04060c 100%); }
.maint__logo img{ height:clamp(30px,4vw,42px); width:auto; display:block; }
.maint__card{ max-width:600px; display:flex; flex-direction:column; align-items:center; gap:18px; }
.maint__badge{ padding:.5em 1.1em; border-radius:var(--r-pill); font-weight:700; font-size:.78rem; letter-spacing:.1em; text-transform:uppercase;
  background:color-mix(in srgb, var(--pink-hot,#E6007E) 20%, transparent); color:var(--pink-hot,#E6007E); }
.maint__title{ font-size:clamp(2.6rem,8vw,4.4rem); font-weight:900; letter-spacing:-.03em; line-height:1; color:#fff; }
.maint__body{ color:var(--text-dim); font-size:clamp(1rem,1.4vw,1.12rem); line-height:1.65; max-width:48ch; }
.maint__body b{ color:#fff; }
.maint__actions{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin-top:6px; }

/* =============================================================================
   RESPONSIVE
   ============================================================================= */
@media (max-width:1024px){
  .story{ grid-template-columns:1fr; }
  .contact{ grid-template-columns:1fr; }
  .panel{ grid-template-columns:54% 46%; }
  .events{ grid-template-columns:1fr 1fr; }
  .specials{ grid-template-columns:1fr; }
  .reviews{ grid-template-columns:1fr; }
  .split{ grid-template-columns:1fr; }
  .usps{ grid-template-columns:1fr 1fr; }
  .steps{ grid-template-columns:1fr; }
}
@media (max-width:760px){
  :root{ --nav-h:66px; --pad-x:clamp(24px, 7vw, 40px); }   /* mehr Luft an den Seiten (war zu eng) */
  .scene--soft{ filter:blur(6px) brightness(.6); }         /* Handy: leichterer Blur → schont Leistung */
  .hero{ height:200vh; }

  /* Logos auf dem Handy klein halten (war viel zu groß) */
  .brand-logo-img{ height:20px !important; }
  .footer__logo-img{ height:26px !important; }
  /* „Vergrößern"-Icons (Kreis mit zwei Pfeilen) kleiner */
  .card__expand{ width:34px; height:34px; right:12px; bottom:12px; }
  .card__expand svg{ width:15px; height:15px; }
  .gallery__zoom{ width:30px; height:30px; right:10px; bottom:10px; }
  .gallery__zoom svg{ width:14px; height:14px; }
  .panel__expand{ width:38px; height:38px; right:12px; bottom:12px; }
  .panel__expand svg{ width:16px; height:16px; }
  .panel__gzoom{ width:28px; height:28px; }
  .panel__gzoom svg{ width:13px; height:13px; }
  .lightbox__close{ width:44px; height:44px; top:16px; }
  .lightbox__close::before, .lightbox__close::after{ width:17px; }

  /* kleinere, weniger fette Typo auf dem Handy */
  .display{ font-size:clamp(2.6rem,11vw,3.6rem); }
  .card-h{ font-size:clamp(1.5rem,6.5vw,2rem); }
  .card__body{ font-size:.95rem; }
  .eyebrow{ font-size:.75rem; }
  .nav__logo{ font-size:1.4rem; }
  .nav__right .btn-pill{ padding:.6em 1em; font-size:.85rem; }   /* Reservieren kleiner */
  .btn-pill{ font-size:.92rem; }
  /* Burger kleiner auf dem Handy */
  .nav__burger{ width:42px; height:42px; gap:4px; }
  .nav__burger span{ width:18px; }
  .nav__burger.is-active span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
  .nav__burger.is-active span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }

  /* Boxen im Hochformat (Handy) — gleiches Verhältnis, nichts abgeschnitten */
  .card, .card--half{ aspect-ratio:4/5; }
  .news-slider{ aspect-ratio:4/5; }   /* News-Slider ebenfalls Hochformat */
  .card__content{ max-width:100%; align-items:flex-start; text-align:left; left:0; right:auto; padding:clamp(18px,5vw,26px); }
  /* auf dem Handy IMMER links */
  .card--text-right .card__content{ left:0; right:auto; align-items:flex-start; text-align:left; }
  .card--text-right .card__cta{ align-self:flex-start; }
  .halfs{ grid-template-columns:1fr; }

  /* Menü: mobil komplett zentriert, NUR Links (Boxen werden zu Links) */
  .menu{ align-items:center; overflow-y:auto; -webkit-overflow-scrolling:touch; padding-top:var(--nav-h); padding-bottom:var(--nav-h); }
  .menu__inner{ grid-template-columns:1fr; gap:18px; align-content:center; justify-items:center; text-align:center; }
  .menu__links{ gap:10px; align-items:center; width:100%; }
  .menu__links a{ width:auto; font-size:clamp(1.9rem,8vw,2.7rem); }
  .menu__links-feature{ display:block; }            /* Featured nur hier sichtbar … */
  .menu__links-feature a{ color:var(--pink-soft); } /* … und farblich abgesetzt */
  .menu__right{ display:none; }                      /* keine Boxen auf dem Handy */
  .menu__note{ display:none; }                       /* Adresse/Claim nur auf Desktop */

  /* neue Sektionen mobil */
  .usps{ grid-template-columns:1fr 1fr; }
  .events{ grid-template-columns:1fr; }
  .gallery{ column-count:2; }
  .social-grid{ grid-template-columns:repeat(3,1fr); }
  .banner, .newsletter{ flex-direction:column; align-items:flex-start; }
  .hero__buttons{ flex-direction:row; flex-wrap:wrap; width:auto; max-width:none; justify-content:center; gap:10px; }
  .hero__buttons .btn-pill{ width:auto; justify-content:center; }

  /* neue Sektionen */
  .stats{ grid-template-columns:repeat(2,1fr); gap:24px 16px; }
  .events{ grid-template-columns:1fr 1fr; }
  .footer__cta{ flex-direction:column; align-items:flex-start; }
  .hero__buttons .btn-pill{ font-size:.8rem; padding:.7em 1.05em; }

  /* overlay → stacked panels, image on top */
  .panel{ grid-template-columns:1fr; grid-template-rows:44% 56%; }
  .panel__media{ width:100%; }
  .panel__content{ padding-top:clamp(18px,4vw,28px); }
  .overlay__progress-track{ width:clamp(110px,40vw,180px); }
  .overlay__hint{ display:none; }

  /* Öffnungszeiten-Umschalter: alles in EINER Reihe (Scroll-Fallback bei sehr schmal) */
  .hours__tabs{ flex-wrap:nowrap; gap:6px; overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch; }
  .hours__tabs::-webkit-scrollbar{ display:none; }
  .hours__tab{ font-size:.68rem; padding:.5em .7em; white-space:nowrap; flex:0 0 auto; letter-spacing:0; }

  /* Öffnungszeiten-Buttons (Preise & Pakete / Reservieren) nur auf Desktop */
  .story__buttons{ display:none; }

  /* Kontaktformular aufgeräumt */
  .contact{ gap:26px; }
  .contact__body{ margin-bottom:1.3rem; }
  .form{ padding:20px; gap:14px; }
  .field input, .field textarea, .field select{ font-size:16px; }   /* kein Auto-Zoom auf iOS */
  .field textarea{ min-height:104px; }
  .form__submit{ align-self:stretch; width:100%; justify-content:center; }

  /* Kontaktdaten klein & einzeilig (Adresse/Tel/Mail bricht nicht um) */
  .contact__info{ gap:9px; align-items:center; }
  .contact__info a, .contact__info span{ font-size:.72rem; gap:8px; font-weight:500; }
  .contact__info a span, .contact__info > span span, .contact__info a, .contact__info > span{ white-space:nowrap; }
  .contact__info a{ justify-content:center; }
  .contact__info svg{ width:14px; height:14px; }
  /* „Kontakt & Anfragen": Text zentriert (Handy) – Formular bleibt wie es ist */
  #kontakt .contact > div:first-child{ text-align:center; }
  /* Willkommen / „Dein Center im Emsland" – Text zentriert (Handy) */
  #story .story > div:first-child{ text-align:center; }
  /* Öffnungszeiten: Titel + Umschalter + Notiz zentriert (NICHT die Tag/Zeit-Liste) */
  .hours__title{ text-align:center; }
  .hours__tabs{ justify-content:center; }
  .hours__note{ text-align:center; }

  /* FAQ: Text etwas kleiner */
  .faq__q{ font-size:.95rem; padding:15px 16px; gap:12px; }
  .faq__icon{ width:24px; height:24px; }
  .faq__a-inner{ font-size:.88rem; }

  /* Footer komplett zentriert */
  .footer{ padding-bottom:30px; text-align:center; }
  .footer__grid{ flex-direction:column; align-items:center; gap:28px; }
  .footer__brand{ align-items:center; text-align:center; max-width:none; }
  .footer__contact{ align-items:center; }
  .footer__contact a{ justify-content:center; }
  .footer__social{ justify-content:center; }
  .footer__cols{ display:flex; flex-direction:column; align-items:center; gap:22px; width:100%; }
  .footer__col{ text-align:center; }
  .footer__bottom{ flex-direction:column; align-items:center; text-align:center; gap:6px; }
  .footer__wordmark{ display:none; }   /* riesige Wortmarke stört die zentrierte Mobil-Ansicht */
}

/* safe-area */
@supports(padding:max(0px)){
  .nav, .menu, .section, .footer{ padding-left:max(var(--pad-x), env(safe-area-inset-left)); padding-right:max(var(--pad-x), env(safe-area-inset-right)); }
}

/* =============================================================================
   REDUCED MOTION
   ============================================================================= */
@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; scroll-behavior:auto !important; }
  .card__img{ position:absolute; top:0; height:100%; }
  .hero{ height:auto; }
  .hero__inner{ position:relative; min-height:100svh; filter:none !important; }
  .partners__row{ animation:none !important; flex-wrap:wrap; justify-content:center; width:auto; }
}

/* JS-disabled / pre-init fallback: reveal everything */
.no-js .preloader{ display:none; }

/* =============================================================================
   BOWLING-UNTERSEITE
   ============================================================================= */
/* Hero schneller → kürzere Scroll-Strecke als auf der Index-Seite */
.page-bowling .hero{ height:170vh; }

/* „Was macht den Unterschied" — pinke Fläche + Glas-Boxen */
.diff{ background:linear-gradient(150deg,#FF1E8E 0%,#E6007E 45%,#b00362 100%); border-radius:var(--r-card);
  padding:clamp(36px,5vw,72px) clamp(20px,4vw,64px); }
.diff__head{ text-align:center; max-width:60ch; margin:0 auto clamp(28px,4vw,48px); }
.diff__head .eyebrow{ color:rgba(255,255,255,.85); display:block; margin-bottom:1rem; }
.diff__head .h2{ color:#fff; font-size:clamp(1.9rem,3.8vw,3.3rem); }   /* kleiner → max. ~2 Zeilen */
.diff__head .body{ color:rgba(255,255,255,.92); margin-top:1rem; }
.diff__grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(14px,2vw,22px); }
.diff__box{ text-align:center; padding:clamp(22px,2.4vw,32px) clamp(16px,2vw,22px); border-radius:var(--r-card);
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.4);
  transition:background .4s var(--ease-ui), box-shadow .4s var(--ease-ui), transform .4s var(--ease-ui); }
.diff__icon{ display:grid; place-content:center; width:58px; height:58px; border-radius:16px; margin:0 auto 1rem;
  background:rgba(255,255,255,.14); color:#fff; }
.diff__icon i{ font-size:26px; line-height:1; }   /* Font Awesome */
.diff__title{ font-size:1.15rem; font-weight:800; color:#fff; margin-bottom:.4rem; }
.diff__text{ color:rgba(255,255,255,.88); font-size:.92rem; }
@media (hover:hover){ .diff__box:hover{ background:rgba(255,255,255,.16);
  box-shadow:0 0 0 1px rgba(255,255,255,.6), 0 22px 55px -20px rgba(255,255,255,.55); transform:translateY(-4px); } }

/* Bowling-Pakete — dunkle Boxen mit leichtem Gradient, weißer Text, Reservieren beim Hovern */
/* Flex statt Grid → eine angebrochene letzte Reihe (z. B. 3 oben, 1 unten) wird ZENTRIERT */
.packages-grid{ display:flex; flex-wrap:wrap; justify-content:center; gap:clamp(16px,2vw,24px); }
.pkg{ flex:1 1 280px; max-width:340px; position:relative; overflow:hidden; border-radius:var(--r-card); padding:clamp(24px,2.6vw,34px); color:#fff;
  background:linear-gradient(180deg,#181b24 0%,#0b0e16 72%); border:1px solid rgba(255,255,255,.09);
  transition:transform .4s var(--ease-ui), border-color .4s var(--ease-ui), box-shadow .4s var(--ease-ui); }
/* Tag-Farbe folgt --pink-hot → pro Paketgruppe via Inline-Var einfärbbar (Bowling=Pink, LaserTag=Grün …) */
.pkg__tag{ display:inline-block; font-size:.7rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
  color:var(--pink-soft); background:color-mix(in srgb, var(--pink-hot) 16%, transparent); padding:.35em .8em; border-radius:var(--r-pill); margin-bottom:1rem; }
.pkg__title{ font-size:clamp(1.05rem,2.6vw,1.4rem); font-weight:900; text-transform:uppercase; letter-spacing:-.01em; color:#fff; white-space:nowrap; }
.pkg__price{ font-size:1.85rem; font-weight:900; color:#fff; margin:.15rem 0 .55rem; }
.pkg__price span{ font-size:.9rem; font-weight:600; color:var(--text-dim); }
.pkg__meta{ display:flex; flex-wrap:wrap; gap:.3rem .5rem; margin-bottom:.7rem; }
.pkg__meta span{ font-size:.74rem; font-weight:700; color:var(--text-dim); background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.1); padding:.28em .7em; border-radius:var(--r-pill); }
.pkg__text{ color:rgba(255,255,255,.8); font-size:.92rem; }
/* Reservieren = runder Icon-Button oben rechts, erscheint beim Hovern */
.pkg__book{ position:absolute; top:14px; right:14px; width:44px; height:44px; border-radius:50%;
  display:grid; place-content:center; background:var(--pink-hot); color:#fff;
  opacity:0; transform:scale(.6); pointer-events:none;
  transition:opacity .3s var(--ease-ui), transform .3s var(--ease-ui); }
.pkg__book i{ font-size:16px; line-height:1; }
@media (hover:hover){
  .pkg:hover{ transform:translateY(-5px); border-color:color-mix(in srgb, var(--pink-hot) 50%, transparent); box-shadow:0 26px 60px -28px color-mix(in srgb, var(--pink-hot) 55%, transparent); }
  .pkg:hover .pkg__book{ opacity:1; transform:scale(1); pointer-events:auto; }
}
@media (hover:none){ /* Touch: runder Reservieren-Button immer sichtbar (oben rechts) */
  .pkg__book{ opacity:1; transform:none; pointer-events:auto; }
}

/* Pakete: Hinweis + CTA zentriert */
.packages__note{ text-align:center; color:var(--text-dim); max-width:62ch; margin:clamp(20px,3vw,32px) auto 0; }
.packages__cta{ text-align:center; margin-top:clamp(18px,2.5vw,26px); }

@media (max-width:1024px){ .diff__grid{ grid-template-columns:1fr 1fr; } .packages-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:760px){
  .page-bowling .hero{ height:130vh; }
  .diff__grid{ grid-template-columns:1fr 1fr; gap:12px; }
  /* Mobile-Karussell (per JS via .is-carousel aktiviert): nur EINE, kompaktere Box sichtbar */
  .diff__grid.is-carousel{ display:block; position:relative; min-height:clamp(196px,54vw,240px); max-width:340px; margin:0 auto; }
  .diff__grid.is-carousel .diff__box{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; }
  .diff__box{ padding:20px 16px; }
  .diff__title{ font-size:1.05rem; }
  .diff__text{ font-size:.86rem; }
  .diff__icon{ width:46px; height:46px; margin-bottom:.7rem; }
  .diff__icon i{ font-size:20px; }
  .packages-grid{ grid-template-columns:1fr; }
}
/* Reduced Motion: Bowling-Hero ebenfalls flach (überschreibt .page-bowling .hero) */
@media (prefers-reduced-motion:reduce){ .page-bowling .hero{ height:auto; } }

/* =============================================================================
   LASERTAG-UNTERSEITE — Neon-Grün-Theme
   ============================================================================= */
.page-lasertag{ --pink-hot:#39FF14; --pink-soft:#A8FF8F; }   /* Akzent global auf Neon-Grün */
.page-lasertag .hero{ height:170vh; }                         /* wie Bowling: etwas schneller */
.page-lasertag .btn-pill--pink{ color:#05140a; }             /* dunkle Schrift auf Neon */
.page-lasertag .pkg__book{ color:#05140a; }
.page-lasertag .pkg__tag{ color:#c7ffba; background:rgba(57,255,20,.16); }
.page-lasertag .pkg:hover{ border-color:rgba(57,255,20,.5); box-shadow:0 26px 60px -28px rgba(57,255,20,.5); }
.page-lasertag .diff{ background:linear-gradient(150deg,#0c3a18 0%,#11792a 48%,#39FF14 132%); }
.page-lasertag .diff__head .eyebrow{ color:rgba(255,255,255,.9); }
.page-lasertag .diff__icon{ background:rgba(255,255,255,.16); }
.page-lasertag .diff__box:hover{ box-shadow:0 0 0 1px rgba(255,255,255,.6), 0 22px 55px -20px rgba(255,255,255,.55); }

/* Operations / Advanced Operations — Umschalter + Modus-Boxen mit Abzeichen */
.ops__tabs{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin-bottom:clamp(20px,2.6vw,32px); }
.ops__tab{ padding:.7em 1.3em; border-radius:var(--r-pill); font-weight:800; font-size:.92rem;
  color:var(--text-dim); background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1);
  transition:background .3s var(--ease-ui), color .3s, border-color .3s; }
.ops__tab.is-active{ background:var(--pink-hot); color:#05140a; border-color:transparent; }
@media (hover:hover){ .ops__tab:not(.is-active):hover{ color:#fff; } }
.ops__grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%,220px),1fr)); gap:clamp(14px,2vw,24px); }
.mode{ position:relative; overflow:hidden; text-align:center; border-radius:var(--r-card);
  padding:clamp(26px,3vw,38px) clamp(18px,2vw,26px) clamp(22px,2.5vw,30px);
  background:linear-gradient(165deg, color-mix(in srgb, var(--mc) 26%, #0b0e16) 0%, #0b0e16 72%);
  border:1px solid color-mix(in srgb, var(--mc) 35%, rgba(255,255,255,.08));
  box-shadow:0 20px 50px -30px color-mix(in srgb, var(--mc) 75%, transparent);
  transition:transform .45s var(--ease-ui), box-shadow .45s var(--ease-ui), border-color .45s var(--ease-ui); }
.mode::before{ content:""; position:absolute; left:50%; top:30%; width:62%; aspect-ratio:1; transform:translate(-50%,-50%);
  background:radial-gradient(circle, color-mix(in srgb, var(--mc) 55%, transparent), transparent 64%);
  opacity:.45; filter:blur(16px); pointer-events:none; transition:opacity .45s var(--ease-ui); }
.mode__badges{ position:relative; width:clamp(116px,42%,158px); margin:0 auto clamp(14px,2vw,20px); aspect-ratio:1; z-index:1; }
.mode__shield, .mode__ghost{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain;
  filter:drop-shadow(0 10px 18px rgba(0,0,0,.5)); transition:transform .5s var(--ease-ui), opacity .5s var(--ease-ui); }
.mode__ghost{ opacity:0; }
.mode__shield{ position:relative; z-index:2; }
.mode__name{ position:relative; z-index:1; font-size:1.3rem; font-weight:900; text-transform:uppercase; letter-spacing:-.01em; color:#fff; }
.mode__desc{ position:relative; z-index:1; color:var(--text-dim); font-size:.9rem; margin-top:.35rem; }
@media (hover:hover){
  .mode:hover{ transform:translateY(-6px); border-color:color-mix(in srgb, var(--mc) 65%, transparent);
    box-shadow:0 0 0 1px color-mix(in srgb, var(--mc) 45%, transparent), 0 38px 80px -26px color-mix(in srgb, var(--mc) 95%, transparent); }
  .mode:hover::before{ opacity:.9; }
  .mode:hover .mode__shield{ transform:scale(1.08) translateY(-4px); }
  .mode:hover .mode__ghost--l{ opacity:.4; transform:translate(-46%,-4%) rotate(-13deg) scale(.92); }
  .mode:hover .mode__ghost--r{ opacity:.4; transform:translate(46%,-4%) rotate(13deg) scale(.92); }
}
/* aktive Karussell-Box (Mobil): Hover-Effekt automatisch – ohne .mode-Transform (GSAP steuert die Slide-Position) */
.mode.is-live{ border-color:color-mix(in srgb, var(--mc) 65%, transparent);
  box-shadow:0 0 0 1px color-mix(in srgb, var(--mc) 45%, transparent), 0 30px 70px -28px color-mix(in srgb, var(--mc) 95%, transparent); }
.mode.is-live::before{ opacity:.9; }
.mode.is-live .mode__shield{ transform:scale(1.08) translateY(-4px); }
.mode.is-live .mode__ghost--l{ opacity:.4; transform:translate(-46%,-4%) rotate(-13deg) scale(.92); }
.mode.is-live .mode__ghost--r{ opacity:.4; transform:translate(46%,-4%) rotate(13deg) scale(.92); }

/* Einverständniserklärung — Split mit Bild (wie „Modernes LaserTag") */
.consent{ display:grid; grid-template-columns:.95fr 1.05fr; gap:clamp(22px,4vw,56px); align-items:center;
  background:var(--bg-elev); border:1px solid rgba(255,255,255,.08); border-radius:var(--r-card);
  padding:clamp(22px,3vw,40px); overflow:hidden; }
.consent__media{ border-radius:var(--r-card); overflow:hidden; aspect-ratio:16/11; }
.consent__media img{ width:100%; height:100%; object-fit:cover; }
.consent__body .eyebrow{ color:var(--pink-hot); display:block; margin-bottom:.8rem; }
.consent__title{ font-size:clamp(1.9rem,3.6vw,3rem); margin-bottom:1rem; }
.consent__title span{ display:block; }
.consent__body .body{ margin-bottom:1.5rem; }
.consent__btn{ align-self:flex-start; }

@media (max-width:760px){
  .page-lasertag .hero{ height:130vh; }
  /* Mehr Luft zwischen den Sektionen (Handy) */
  .page-lasertag #operations,
  .page-lasertag #unterschied{ padding-top:clamp(44px,11vw,80px); }
  /* Operations: Umschalter nebeneinander (kompakt) + mehr Abstand zur Box */
  .ops__tabs{ flex-wrap:nowrap; gap:8px; margin-bottom:clamp(26px,7vw,40px); }
  .ops__tab{ font-size:.78rem; padding:.55em .85em; white-space:nowrap; }
  /* Karussell (eine Box, wechselt automatisch) – Höhe wird per JS exakt gesetzt */
  .ops__grid{ grid-template-columns:1fr; gap:12px; }
  .ops__grid.is-carousel{ display:block; position:relative; min-height:clamp(280px,80vw,340px); max-width:360px; margin:0 auto; }
  .ops__grid.is-carousel .mode{ position:absolute; inset:0; display:flex; flex-direction:column; justify-content:center; }
  .mode{ padding:34px 20px; }                 /* mehr Padding oben/unten im Box-Inneren */
  .mode__name{ font-size:1.15rem; margin-top:.2rem; }
  .mode__desc{ font-size:.86rem; }
  /* Einverständniserklärung: gestapelt + zentriert */
  .consent{ grid-template-columns:1fr; text-align:center; }
  .consent__body .eyebrow{ }
  .consent__btn{ align-self:center; }
  /* „Modernes LaserTag/Bowling"-Intro: Text + Button zentriert */
  .split__body{ text-align:center; }
}
@media (prefers-reduced-motion:reduce){ .page-lasertag .hero{ height:auto; } }

/* =============================================================================
   M2MAXX — Akzent Koralle (#E83B4C) + Spielmodi-Karten + Spiele (Spielfeld)
   ============================================================================= */
.page-m2maxx{ --pink-hot:#E83B4C; --pink-soft:#FF8A98; }   /* Akzent global auf Koralle */
.page-m2maxx .hero{ height:170vh; }
.page-m2maxx .ops__tab.is-active{ color:#fff; }            /* Koralle → weißer Text */
.page-m2maxx .diff{ background:linear-gradient(150deg,#2a0810 0%,#8e1626 46%,#E83B4C 132%); }
.page-m2maxx .diff__head .eyebrow{ color:rgba(255,255,255,.9); }
.page-m2maxx .diff__icon{ background:rgba(255,255,255,.16); }
.page-m2maxx .diff__box:hover{ box-shadow:0 0 0 1px rgba(255,255,255,.6), 0 22px 55px -20px rgba(255,255,255,.55); }
.page-m2maxx .pkg__tag{ color:#ffd2d8; background:rgba(232,59,76,.16); }
.page-m2maxx .pkg:hover{ border-color:rgba(232,59,76,.5); box-shadow:0 26px 60px -28px rgba(232,59,76,.5); }

/* Spielmodi-Karten (4 Modi, Companion = Standard) */
.mmodes{ display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%,250px),1fr)); gap:clamp(14px,2vw,24px); }
.mmode{ position:relative; overflow:hidden; border-radius:var(--r-card);
  background:linear-gradient(165deg, color-mix(in srgb, var(--mc) 22%, #0b0e16) 0%, #0b0e16 74%);
  border:1px solid color-mix(in srgb, var(--mc) 32%, rgba(255,255,255,.08));
  box-shadow:0 20px 50px -30px color-mix(in srgb, var(--mc) 75%, transparent);
  transition:transform .45s var(--ease-ui), box-shadow .45s var(--ease-ui), border-color .45s var(--ease-ui); }
.mmode__media{ aspect-ratio:16/10; overflow:hidden; }
.mmode__media img{ width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease-ui); }
.mmode__body{ padding:clamp(18px,2vw,26px) clamp(18px,2vw,24px) clamp(20px,2.4vw,28px); }
/* Flag im Textfluss ÜBER dem Modus-Namen (alle Karten gleich hoch via align-items:stretch im Grid) */
.mmode__flag{ display:inline-block; font-size:.7rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase;
  color:#fff; background:var(--mc); padding:.35em .8em; border-radius:var(--r-pill); margin-bottom:.7rem; box-shadow:0 8px 20px -8px rgba(0,0,0,.45); }
.mmode__name{ font-size:1.4rem; font-weight:900; text-transform:uppercase; letter-spacing:-.01em; color:#fff; }
.mmode__desc{ color:var(--text-dim); font-size:.92rem; margin-top:.4rem; }
@media (hover:hover){
  .mmode:hover{ transform:translateY(-6px); border-color:color-mix(in srgb, var(--mc) 60%, transparent);
    box-shadow:0 0 0 1px color-mix(in srgb, var(--mc) 40%, transparent), 0 38px 80px -26px color-mix(in srgb, var(--mc) 90%, transparent); }
  .mmode:hover .mmode__media img{ transform:scale(1.06); }
}
.mmode.is-live{ border-color:color-mix(in srgb, var(--mc) 60%, transparent);
  box-shadow:0 0 0 1px color-mix(in srgb, var(--mc) 40%, transparent), 0 30px 70px -28px color-mix(in srgb, var(--mc) 90%, transparent); }
.mmode.is-live .mmode__media img{ transform:scale(1.06); }
.mmode--featured{ border-color:color-mix(in srgb, var(--mc) 72%, transparent);
  box-shadow:0 0 0 1px color-mix(in srgb, var(--mc) 60%, transparent), 0 34px 74px -26px color-mix(in srgb, var(--mc) 90%, transparent); }

/* Spiele: gleiche Optik wie LaserTag-Modi, aber Spielfeld-Illustration (Querformat) + Klick → groß */
.page-m2maxx .mode--game{ cursor:pointer; }
.page-m2maxx .mode--game .mode__badges{ width:clamp(180px,74%,300px); aspect-ratio:1.55; }
.page-m2maxx .mode--game .mode__shield, .page-m2maxx .mode--game .mode__ghost{ object-fit:contain; border-radius:10px; filter:drop-shadow(0 12px 22px rgba(0,0,0,.55)); }
.mode__zoom{ position:absolute; right:14px; top:14px; width:34px; height:34px; border-radius:var(--r-pill);
  background:rgba(8,10,16,.5); backdrop-filter:blur(8px); color:#fff; display:grid; place-content:center;
  opacity:0; transform:translateY(-4px); transition:opacity .3s var(--ease-ui), transform .3s var(--ease-ui); pointer-events:none; z-index:3; }
.mode__zoom svg{ width:16px; height:16px; }
@media (hover:hover){ .page-m2maxx .mode--game:hover .mode__zoom{ opacity:1; transform:translateY(0); } }
@media (hover:none){ .page-m2maxx .mode--game .mode__zoom{ opacity:.85; transform:none; } }

@media (max-width:760px){
  .page-m2maxx .hero{ height:130vh; }
  .page-m2maxx #modi, .page-m2maxx #spiele, .page-m2maxx #unterschied{ padding-top:clamp(44px,11vw,80px); }
  .mmodes{ grid-template-columns:1fr; gap:12px; }
  .mmodes.is-carousel{ display:block; position:relative; min-height:clamp(300px,90vw,400px); max-width:360px; margin:0 auto; }
  .mmodes.is-carousel .mmode{ position:absolute; inset:0; }
  .page-m2maxx .mode--game .mode__badges{ width:clamp(170px,82%,260px); }
}
@media (prefers-reduced-motion:reduce){ .page-m2maxx .hero{ height:auto; } }

/* =============================================================================
   PREISE & PAKETE — gruppierte Pakete + Preistabelle (Akzent = Default-Pink)
   ============================================================================= */
.page-preise .hero{ height:170vh; }
.pkg-groups{ display:flex; flex-direction:column; gap:clamp(36px,5vw,68px); }
.pkg-group__head{ text-align:center; margin-bottom:clamp(18px,2.4vw,28px); }
.pkg-group__label{ font-size:clamp(1.3rem,3vw,1.9rem); font-weight:900; text-transform:uppercase; letter-spacing:-.01em; color:#fff;
  display:inline-flex; align-items:center; gap:.7rem; }
.pkg-group__label::before, .pkg-group__label::after{ content:""; width:clamp(18px,5vw,54px); height:2px; }
.pkg-group__label::before{ background:linear-gradient(90deg, transparent, var(--pink-hot)); }
.pkg-group__label::after{ background:linear-gradient(90deg, var(--pink-hot), transparent); }
.pkg-group__note{ color:var(--text-dim); font-size:.9rem; margin-top:.5rem; }
/* längere Paketnamen auf der Preise-Seite dürfen umbrechen (statt nowrap) */
.pkg-groups .pkg__title{ white-space:normal; }

/* Preistabelle (Einzelpreise) */
.pricetable{ display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%,300px),1fr)); gap:clamp(16px,2vw,24px); align-items:stretch; }
/* leere Gruppe (z. B. „Specials – aktuell nichts") */
.pkg-empty{ text-align:center; color:var(--text-dim); font-size:1rem; max-width:54ch; margin:0 auto;
  border:1px dashed rgba(255,255,255,.18); border-radius:var(--r-card); padding:clamp(22px,3vw,34px); background:rgba(255,255,255,.02); }
.pricetable__group{ background:linear-gradient(180deg,#181b24 0%,#0b0e16 80%); border:1px solid rgba(255,255,255,.09);
  border-radius:var(--r-card); padding:clamp(20px,2.4vw,30px); }
.pricetable__label{ font-size:1.1rem; font-weight:800; color:#fff; margin-bottom:1rem; padding-bottom:.7rem;
  border-bottom:1px solid rgba(255,255,255,.1); }
.pricetable__rows{ margin:0; }
.pricetable__row{ display:flex; align-items:baseline; justify-content:space-between; gap:1rem; padding:.55em 0; border-bottom:1px dashed rgba(255,255,255,.08); }
.pricetable__row:last-child{ border-bottom:0; }
.pricetable__row dt{ color:var(--text-dim); font-size:.92rem; }
.pricetable__row dd{ margin:0; color:#fff; font-weight:800; white-space:nowrap; font-variant-numeric:tabular-nums; }
.pricetable__note{ text-align:center; color:var(--text-dim); font-size:.85rem; margin:clamp(18px,2.4vw,28px) auto 0; max-width:64ch; }
@media (max-width:760px){ .page-preise .hero{ height:130vh; } }
@media (prefers-reduced-motion:reduce){ .page-preise .hero{ height:auto; } }

/* =============================================================================
   McDONALD'S-KOOPERATION — Akzent Orange (#f56121)
   ============================================================================= */
.page-mcdonalds{ --pink-hot:#f56121; --pink-soft:#FF9E5E; }
.page-mcdonalds .hero{ height:170vh; }
.page-mcdonalds .diff{ background:linear-gradient(150deg,#2a0d02 0%,#9a3408 46%,#f56121 132%); }
.page-mcdonalds .diff__head .eyebrow{ color:rgba(255,255,255,.9); }
.page-mcdonalds .diff__icon{ background:rgba(255,255,255,.16); }
.page-mcdonalds .diff__box:hover{ box-shadow:0 0 0 1px rgba(255,255,255,.6), 0 22px 55px -20px rgba(255,255,255,.55); }
.page-mcdonalds .pkg__tag{ color:#ffd9c2; background:rgba(245,97,33,.16); }
.page-mcdonalds .pkg:hover{ border-color:rgba(245,97,33,.5); box-shadow:0 26px 60px -28px rgba(245,97,33,.5); }
@media (max-width:760px){ .page-mcdonalds .hero{ height:130vh; } }
@media (prefers-reduced-motion:reduce){ .page-mcdonalds .hero{ height:auto; } }

/* =============================================================================
   GUTSCHEINE — schlichte Seite (Hero + 1 Box + iFrame-Platzhalter), Akzent Pink
   ============================================================================= */
.page-gutscheine .hero{ height:170vh; }
.iframe-wrap{ max-width:1000px; margin:0 auto; }
.gutschein-iframe, .iframe-wrap iframe{ width:100%; min-height:70vh; border:0; border-radius:var(--r-card); background:#fff; display:block; }
.iframe-placeholder{ display:flex; flex-direction:column; align-items:center; gap:.7rem; text-align:center;
  border:1px dashed rgba(255,255,255,.22); border-radius:var(--r-card); padding:clamp(34px,6vw,72px) 24px; background:rgba(255,255,255,.02); }
.iframe-placeholder i{ font-size:2.4rem; color:var(--pink-hot); }
.iframe-placeholder b{ font-size:1.1rem; color:#fff; }
.iframe-placeholder span{ color:var(--text-dim); font-size:.9rem; }
.iframe-placeholder code{ font-size:.82rem; color:var(--pink-soft); background:rgba(255,255,255,.06); padding:.4em .7em; border-radius:8px; }
@media (max-width:760px){ .page-gutscheine .hero{ height:130vh; } }
@media (prefers-reduced-motion:reduce){ .page-gutscheine .hero{ height:auto; } }

/* =============================================================================
   SPEISEKARTE — Akzent Rot (#E6332A); nutzt zusätzlich css/speisekarte.css für
   den Karten-/Produkt-Body. Menü-Tokens an das dunkle Seiten-Design angeglichen.
   ============================================================================= */
.page-speisekarte{
  --pink-hot:#E6332A; --pink-soft:#ff7d72;
  /* speisekarte.css (menu)-Tokens an unser Dark-Theme angleichen */
  --m-bg:#0A0E1A; --m-nav-bg:rgba(12,16,26,.82); --header-height:64px;
}
.page-speisekarte .hero{ height:170vh; }
.page-speisekarte .dynamic-menu{ background:var(--bg); }
/* Floating Pill-Nav: Sichtbarkeit robust erzwingen (überschreibt speisekarte.css zuverlässig) */
.page-speisekarte .cat-nav{ opacity:0; transform:translateX(-50%) translateY(52px); pointer-events:none;
  transition:opacity .32s var(--ease-ui), transform .32s var(--ease-ui); }
.page-speisekarte .cat-nav.is-visible{ opacity:1 !important; transform:translateX(-50%) translateY(0) !important; pointer-events:auto !important; }
/* Produkt-Detailseite: versteckte Shell (Hero/Karten/Scene) ausblenden */
.page-produkt .scene,
.page-produkt #hero,
.page-produkt #erlebnisse,
.page-produkt #intro,
.page-produkt .cat-nav{ display:none !important; }
.page-produkt .rest{ background:var(--bg); min-height:100vh; }
@media (max-width:760px){ .page-speisekarte .hero{ height:130vh; } }
@media (prefers-reduced-motion:reduce){ .page-speisekarte .hero{ height:auto; } }

/* =============================================================================
   TOUCH: Hover-/Fokus-Effekte auch per Touch (touch.js vergibt .is-tap)
   Bewusst OHNE transform (GSAP steuert transform auf Karten) → Schatten/Border/
   Helligkeit statt Verschieben. Nur auf Touch-Geräten aktiv.
   ============================================================================= */
@media (hover:none){
  a, button, [role="button"]{ -webkit-tap-highlight-color:transparent; }
  .is-tap{ transition:filter .16s var(--ease-ui), box-shadow .16s var(--ease-ui), border-color .16s var(--ease-ui), background-color .16s var(--ease-ui), color .16s var(--ease-ui); }
  /* Buttons / Icon-Buttons / Tabs → aufhellen */
  a.is-tap, button.is-tap, [role="button"].is-tap, .btn-pill.is-tap, .acc-tab.is-tap,
  .mydsbowl-icon-btn.is-tap, .mydsbowl-mobile-action-item.is-tap, .wb-open-addon.is-tap, .wb-open-booking.is-tap{ filter:brightness(1.15); }
  /* Karten & Boxen → Akzent-Glow + Rahmen (wie Hover, ohne Verschieben) */
  .card.is-tap{ box-shadow:0 26px 60px -26px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.16); }
  .pkg.is-tap, .wb-addon.is-tap, .wb-dcard.is-tap, .wb-pkg.is-tap, .diff__box.is-tap, .mode.is-tap,
  .feature-card.is-tap, .mydsbowl-card.is-tap, .mydsbowl-reward-card.is-tap, .wb-once-card.is-tap,
  .wb-ledtile.is-tap, .gallery__item.is-tap{ border-color:var(--pink-hot); box-shadow:0 22px 55px -24px var(--pink-hot); }
  .menu__card.is-tap{ filter:brightness(1.08); box-shadow:0 0 0 3px var(--pink-hot); }
  /* Text-Links → Akzentfarbe */
  .menu__links a.is-tap, .footer__col a.is-tap, .footer__social a.is-tap, .legal__toc a.is-tap,
  .wb-addon__btn.is-tap, .acc-link.is-tap{ color:var(--pink-hot); }
}
/* Fokus (Tastatur & Touch-Fokus) immer klar sichtbar */
a:focus-visible, button:focus-visible, [role="button"]:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible,
.card:focus-visible, .gallery__item:focus-visible, .js-zoom:focus-visible{
  outline:2px solid var(--pink-hot); outline-offset:3px; border-radius:8px;
}