/* ==========================================================================================
   XXL Sportcenter (www.xxl-sportcenter.de), Stylesheet v0.3.0 nach design/DESIGN_SYSTEM.md.
   Mobile first, Haltepunkte 480 / 760 / 1024 / 1280 / 1600. Schriften selbst gehostet
   (Exo 2 variabel, SIL OFL; Roboto), keine Fremdserver, keine Bibliothek.
   Reihenfolge: Tokens · Grundlagen · Bausteine (Knöpfe, Chips, Karten, Tafel) · Kopf · Seitenkopf ·
   Hero + Bühne + Mosaik · Schnellreservierung · Bereiche · Aktuelles · Kennzahlen · Text/Bild · Band ·
   Menü-Karten · Anfahrt · Inhalt der Unterseiten (Chip-Raster, Tafeln) · Weiter-Band · Reservierung · Jobs ·
   Galerie + Lightbox · 4bowl · Fuß · Punktnavigation · Mobile Leiste · Bewegung.
   v0.3.0 (Runde 2, Abschnitt 11): Bühne mit Überblendung, Ken Burns, Laserlinien; Punktnavigation; Kopfband
   mit Bereichsfoto statt orangem Keil; Chip-Raster und Tafeln; Weiter-Band; leuchtende Reservieren-Knöpfe;
   mobile Reservieren-Leiste; --chat-unten am body für den KI-Chat-Knopf.
   bowlxxling-neu v0.2.0 (23.10.2026, Fable): Highlights-Band (Ende der Datei), Logo auf heller Fläche bleibt (Nutzer B).
   Abweichung vom Design-System (dokumentiert in ARBEITSSTAND): kleine orange Schrift auf Weiß
   (Kicker, Textlinks) nutzt --orange-text #9a5f00 (5,3:1), weil --orange-tief nur 3,5:1 erreicht.
   ========================================================================================== */

@font-face { font-family: "Exo 2"; src: url("../fonts/exo2-variabel.ttf") format("truetype"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Roboto"; src: url("../fonts/roboto-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Roboto"; src: url("../fonts/roboto-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }

:root {
  --orange: #f4a117;
  --orange-tief: #c77f06;
  --orange-text: #9a5f00;
  --orange-hell: #fff3dc;
  --schwarz: #111111;
  --anthrazit: #1c1c1c;
  --text: #1e1e1e;
  --text-hell: #f3f3f3;
  --grau-text: #5b5b5b;
  --grau-flaeche: #f4f4f4;
  --linie: #e3e3e3;
  --weiss: #ffffff;
  --magenta: #e6007e;
  --schrift-titel: "Exo 2", "Arial Narrow", Arial, sans-serif;
  --schrift-text: "Roboto", Arial, sans-serif;
  --breite: 1240px;
  --rand: 16px;
  --abstand: clamp(3.5rem, 8vw, 7rem);
  --radius-karte: 14px;
  --radius-knopf: 6px;
  --radius-bild: 10px;
  --schatten-foto: 0 18px 40px rgba(0, 0, 0, .35);
  --schatten-weiss: 0 6px 18px rgba(0, 0, 0, .08);
  --muster-linien: repeating-linear-gradient(93deg, rgba(244, 161, 23, .06) 0 2px, transparent 2px 13px);   /* Karten ohne Foto: feine Linien in Orange, 3° geneigt, 6 % Deckung */
  --t-h1: clamp(2.4rem, 5.2vw, 4.4rem);
  --t-h2: clamp(1.7rem, 3vw, 2.6rem);
  --t-h3: 1.3rem;
  --t-kicker: .875rem;   /* 14px statt .8rem: keine Schrift unter 14px (Design-System 3, Responsive-Prüfung 21.10.2026) */
  --t-zahl: clamp(2.4rem, 4vw, 3.6rem);
  --leiste-h: 56px;
  --kopf-h: 64px;
  --dauer: .5s;
}
@media (min-width: 480px)  { :root { --leiste-h: 36px; } }
@media (min-width: 600px)  { :root { --rand: 24px; } }
@media (min-width: 1024px) { :root { --kopf-h: 88px; } }
@media (min-width: 1200px) { :root { --rand: 40px; } }

/* --- Grundlagen -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
/* Sanftes Scrollen nur bei Klick auf Anker und Punktnavigation (seite.js), nicht global (Design-System 11.2) */
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--kopf-h) + 1rem); }
/* --chat-unten: Abstand von KI-Chat-Knopf und -Fenster vom unteren Rand; der Chat (sportcenterchatbot/embed.js)
   nutzt bottom: var(--chat-unten, 20px). Unter 760 rückt der Knopf über die Reservieren-Leiste (11.7, 76px),
   sobald sie sichtbar ist. Bei offenem Chat setzt der Chat html.chat-offen, dann ist die Leiste weg. */
body { margin: 0; font-family: var(--schrift-text); font-size: 1.0625rem; line-height: 1.6; color: var(--text); background: var(--weiss); overflow-x: hidden; --chat-unten: 20px; }
img, video { max-width: 100%; height: auto; display: block; }
audio { max-width: 100%; width: 100%; }
a { color: var(--orange-text); text-decoration: underline; text-underline-offset: .15em; text-decoration-thickness: 1px; }
a:hover { color: var(--schwarz); }
p { margin: 0 0 1em; }
h1, h2, h3, h4, .h2, .h3 { font-family: var(--schrift-titel); line-height: 1.12; margin: 0 0 .5em; color: inherit; text-wrap: balance; }
h1 { font-size: var(--t-h1); font-weight: 800; letter-spacing: -.01em; line-height: 1.04; }
h2, .h2 { font-size: var(--t-h2); font-weight: 700; }
h3, .h3 { font-size: var(--t-h3); font-weight: 600; line-height: 1.25; }
table { border-collapse: collapse; width: 100%; max-width: 40rem; }
td, th { padding: .55rem .9rem .55rem 0; vertical-align: top; text-align: left; border-bottom: 1px solid var(--linie); }
tr:last-child td { border-bottom: 0; }
ul, ol { padding-left: 1.3em; }
li { margin-bottom: .35em; }
strong { font-weight: 700; }
address { font-style: normal; }
:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; }
::selection { background: var(--orange); color: var(--schwarz); }

.huelle { max-width: var(--breite); margin: 0 auto; padding: 0 var(--rand); }
.sprung { position: absolute; left: -9999px; top: 0; z-index: 200; background: var(--orange); color: var(--schwarz); padding: .6em 1em; font-weight: 700; text-decoration: none; }
.sprung:focus { left: 1rem; top: 1rem; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.nur-vorlesen { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.klein { font-size: .875rem; color: var(--grau-text); }
.symbol { width: 1.5rem; height: 1.5rem; flex: none; vertical-align: -.35em; }
.symbol--klein { width: 1.15rem; height: 1.15rem; vertical-align: -.25em; }
.symbol--gross { width: 2.25rem; height: 2.25rem; }
.symbol--riesig { width: 4rem; height: 4rem; }

/* Kicker: Versalien, Sperrung; auf Weiß dunkles Orange, auf Schwarz Orange mit 4px-Strich links */
.kicker { font-family: var(--schrift-titel); font-weight: 600; font-size: var(--t-kicker); letter-spacing: .16em; text-transform: uppercase; color: var(--orange-text); margin: 0 0 .9rem; display: flex; align-items: center; gap: .7rem; }
.kicker::before { content: ""; width: 1.4rem; height: 3px; background: var(--orange); flex: none; }
.kicker--hell { color: var(--orange); }
.kicker--hell::before { width: 4px; height: 1.1em; }
/* H2 auf Weiß: 3px Orange-Unterstrich, 40px breit */
.block:not(.block--dunkel) h2:not(.schnell-titel)::after, .inhalt h2::after, .block-kopf h2::after { content: ""; display: block; width: 40px; height: 3px; background: var(--orange); margin-top: .45em; border-radius: 2px; }
.block-kopf { max-width: 44rem; margin-bottom: clamp(1.8rem, 4vw, 3rem); }
.block-kopf h2 { margin-bottom: 0; }
.block-kopf p:last-child { margin-top: 1rem; margin-bottom: 0; }

/* --- Knöpfe (7.11) ------------------------------------------------------------------------ */
.knopf { display: inline-flex; align-items: center; justify-content: center; gap: .55rem; min-height: 48px; padding: 0 22px; border-radius: var(--radius-knopf); border: 2px solid var(--orange); background: var(--orange); color: var(--schwarz); font-family: var(--schrift-titel); font-weight: 600; font-size: 1rem; line-height: 1.2; text-decoration: none; cursor: pointer; transition: background .2s, color .2s, border-color .2s, transform .15s, box-shadow .2s; }
.knopf:hover, .knopf:focus-visible { background: var(--orange-tief); border-color: var(--orange-tief); color: var(--schwarz); transform: translateY(-1px); box-shadow: 0 8px 18px rgba(0, 0, 0, .18); }
.knopf:active { transform: none; box-shadow: none; }
.knopf .symbol { transition: transform .2s; }
.knopf:hover .symbol--klein:last-child { transform: translateX(3px); }
.knopf--dunkel { background: var(--schwarz); border-color: var(--schwarz); color: var(--weiss); }
.knopf--dunkel:hover, .knopf--dunkel:focus-visible { background: var(--anthrazit); border-color: var(--anthrazit); color: var(--weiss); }
.knopf--rahmen { background: transparent; border-color: currentColor; color: var(--schwarz); }
.knopf--rahmen:hover, .knopf--rahmen:focus-visible { background: var(--schwarz); border-color: var(--schwarz); color: var(--weiss); }
.knopf--rahmen-hell, .held .knopf--rahmen, .tafel .knopf--rahmen, .menue-fuss .knopf--rahmen { color: var(--weiss); border-color: rgba(255, 255, 255, .75); }
.knopf--rahmen-hell:hover, .held .knopf--rahmen:hover, .tafel .knopf--rahmen:hover, .menue-fuss .knopf--rahmen:hover { background: var(--weiss); border-color: var(--weiss); color: var(--schwarz); }
.knopf--gross { min-height: 54px; padding: 0 26px; font-size: 1.05rem; }
.knopf--voll { width: 100%; }
.knoepfe { display: flex; flex-wrap: wrap; gap: .8rem 1rem; margin-top: 1.6rem; }
/* Reservieren muss auffallen (11.7): pulsierender Leuchtrand plus Lichtstreifen alle 6 s (0,9 s), kein Blinken;
   Pfeil rutscht beim Hover 4 px. Bewegung nur bei no-preference (Block „Bewegung“), sonst statischer Rand. */
.knopf--leuchten { position: relative; overflow: hidden; isolation: isolate; box-shadow: 0 0 12px 2px rgba(244, 161, 23, .35); }
.knopf--leuchten::after { content: ""; position: absolute; top: -30%; bottom: -30%; left: 0; width: 26%; background: linear-gradient(100deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .6) 50%, rgba(255, 255, 255, 0)); transform: translateX(-220%) skewX(-18deg); pointer-events: none; }
.knopf--leuchten:hover .symbol--klein:last-child { transform: translateX(4px); }

/* Chips (7.3): Pille, Rahmen, Icon + Name */
.chips { position: relative; }
.chips-liste { list-style: none; margin: 0; padding: 0; display: flex; gap: .6rem; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; padding: 7px; margin: -7px; }   /* Polster: Fokusring (3px + 3px Abstand) wird von overflow nicht abgeschnitten */
.chips-liste::-webkit-scrollbar { display: none; }
.chips-liste li { margin: 0; flex: none; }
.chips--umbruch .chips-liste { flex-wrap: wrap; overflow: visible; padding: 0; margin: 0; }
.chip { display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; padding: 0 1.1rem 0 .9rem; border: 1px solid var(--linie); border-radius: 999px; background: var(--weiss); color: var(--text); font-family: var(--schrift-titel); font-weight: 600; font-size: .95rem; text-decoration: none; white-space: nowrap; transition: border-color .2s, background .2s, transform .15s, box-shadow .2s; }
.chip .symbol { color: var(--orange-tief); }
.chip:hover, .chip:focus-visible { border-color: var(--orange); background: var(--orange-hell); color: var(--schwarz); transform: translateY(-1px); box-shadow: 0 0 0 4px rgba(244, 161, 23, .18), var(--schatten-weiss); }   /* Hover-Schein (11.7) */
.chip-zahl { font-size: .875rem; color: var(--grau-text); font-weight: 400; }
/* Schattenkanten beim Scrollen (Klassen setzt seite.js) */
.chips::before, .chips::after { content: ""; position: absolute; top: 0; bottom: 0; width: 48px; pointer-events: none; opacity: 0; transition: opacity .25s; z-index: 1; }
.chips::before { left: 0; background: linear-gradient(90deg, var(--weiss), rgba(255, 255, 255, 0)); }
.chips::after { right: 0; background: linear-gradient(270deg, var(--weiss), rgba(255, 255, 255, 0)); }
.chips--links::before, .chips--rechts::after { opacity: 1; }

/* Tafel: schwarze Karte (Jobs, 4bowl, Telefon) */
.tafel { background: var(--schwarz); color: var(--text-hell); border-radius: var(--radius-karte); padding: clamp(1.5rem, 3vw, 2.25rem); position: relative; overflow: hidden; }
/* .tafel::after (Zier-Kugel unten rechts) entfernt 21.10.2026: wirkte wie ein Fleck (Nutzer). */
.tafel h2, .tafel .tafel-titel { color: var(--weiss); font-family: var(--schrift-titel); font-weight: 700; font-size: 1.5rem; margin: 0 0 .6rem; }
.tafel a:not(.knopf) { color: var(--weiss); text-decoration-color: var(--orange); }
.tafel a:not(.knopf):hover { color: var(--orange); }
.tafel-liste { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: .7rem; }
.tafel-liste li { display: flex; gap: .7rem; align-items: flex-start; margin: 0; }
.tafel-liste .symbol { color: var(--orange); margin-top: .15em; }
.tafel-text { color: rgba(243, 243, 243, .78); }
.hinweis { background: var(--orange-hell); border-left: 5px solid var(--orange); border-radius: var(--radius-knopf); padding: 1rem 1.25rem; display: flex; gap: .8rem; align-items: flex-start; margin: 1.5rem 0; max-width: none; }
.hinweis .symbol { color: var(--orange-tief); flex: none; margin-top: .1em; }
/* Radiospot-Player: Browser-Standard in grauer Leiste mit Orange-Kante, Icon in schwarzem Kreis */
.player { display: flex; align-items: center; gap: .8rem; background: var(--grau-flaeche); border: 1px solid var(--linie); border-left: 4px solid var(--orange); border-radius: var(--radius-knopf); padding: .5rem .8rem .5rem .7rem; margin-top: .8rem; }
.player .symbol { color: var(--orange); background: var(--schwarz); border-radius: 50%; width: 36px; height: 36px; padding: 8px; }
.player audio { height: 40px; flex: 1; min-width: 0; }

/* --- Kopf (7.1) --------------------------------------------------------------------------- */
.kopf { position: sticky; top: calc(-1 * var(--leiste-h)); z-index: 90; background: var(--schwarz); color: var(--text-hell); }
.kopf-leiste { height: var(--leiste-h); background: var(--schwarz); border-bottom: 1px solid rgba(255, 255, 255, .08); font-size: .875rem; overflow: hidden; }
.kopf-leiste-innen { display: flex; justify-content: space-between; align-items: center; gap: 1rem 2rem; min-height: var(--leiste-h); }
/* Kopfleiste (11.9 Punkt 5): ruhige Textzeile, Trenner als Punkte statt Icons */
.kopf-kontakt { list-style: none; margin: 0; padding: .35rem 0; display: flex; flex-wrap: wrap; gap: .1rem 0; }
.kopf-kontakt li { margin: 0; display: flex; align-items: center; color: #cfcfcf; line-height: 1.4; }
.kopf-kontakt li + li::before { content: "\00B7"; color: var(--orange); margin: 0 .8rem; font-weight: 700; }
@media (max-width: 599.98px) { .kopf-kontakt { gap: .1rem 1rem; } .kopf-kontakt li + li::before { display: none; } }   /* Zeilen brechen um, Punkt am Zeilenanfang vermeiden */
.kopf-kontakt a { color: #cfcfcf; text-decoration: none; display: inline-flex; align-items: center; }
.kopf-kontakt a:hover, .kopf-kontakt a:focus-visible { color: var(--orange); }
/* Tap-Ziele mobil mindestens 44px: Kopfleiste per Polster mit Gegenrand (Leistenhöhe bleibt), Fuß per Mindesthöhe */
@media (max-width: 759.98px) {
  .kopf-kontakt a { padding: 13px 0; margin: -13px 0; }   /* 19,6px Zeile + 26px = 45,6px */
  .fuss-kontakt a { min-height: 44px; }
  .buchung-anbieter a { display: inline-block; padding: 14px 0; margin: -14px 0; }
}
.service ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 0 1.4rem; }
.service li { margin: 0; }
.service a { color: #cfcfcf; text-decoration: none; font-family: var(--schrift-titel); font-weight: 600; letter-spacing: .04em; }
.service a:hover, .service a:focus-visible, .service a[aria-current="page"] { color: var(--orange); }
@media (max-width: 1023.98px) { .nur-breit { display: none !important; } }
.menue-service { list-style: none; margin: 0; padding: .6rem 0 0; display: flex; flex-wrap: wrap; gap: .4rem .6rem; }
.menue-service li { margin: 0; }
.menue-service a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 1rem; border: 1px solid rgba(255, 255, 255, .25); border-radius: 999px; color: #d9d9d9; text-decoration: none; font-family: var(--schrift-titel); font-weight: 600; }
.menue-service a:hover, .menue-service a[aria-current="page"] { border-color: var(--orange); color: var(--orange); }

.kopf-haupt { background: var(--schwarz); height: var(--kopf-h); transition: height .2s ease, box-shadow .2s; position: relative; z-index: 2; }
.kopf-haupt-innen { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; height: 100%; }
.logo { display: inline-flex; align-items: center; flex: none; }
.logo img { height: 44px; width: auto; transition: height .2s ease; }
@media (min-width: 1024px) { .logo img { height: 64px; } }
body.gescrollt .kopf-haupt { height: 56px; box-shadow: 0 10px 30px rgba(0, 0, 0, .35); }
body.gescrollt .logo img { height: 36px; }

/* Menüschalter (Hamburger -> X) */
.menue-schalter { display: inline-flex; align-items: center; gap: .6rem; min-height: 44px; padding: .4rem .8rem; background: transparent; border: 2px solid rgba(255, 255, 255, .3); border-radius: var(--radius-knopf); color: var(--weiss); font: 600 .95rem var(--schrift-titel); text-transform: uppercase; letter-spacing: .06em; cursor: pointer; }
.menue-schalter:hover { border-color: var(--orange); }
.balken, .balken::before, .balken::after { display: block; width: 22px; height: 2px; background: currentColor; border-radius: 2px; position: relative; transition: transform .25s ease-out, background .2s; }
.balken::before, .balken::after { content: ""; position: absolute; left: 0; }
.balken::before { top: -7px; }
.balken::after { top: 7px; }
.menue-schalter[aria-expanded="true"] .balken { background: transparent; }
.menue-schalter[aria-expanded="true"] .balken::before { transform: translateY(7px) rotate(45deg); }
.menue-schalter[aria-expanded="true"] .balken::after { transform: translateY(-7px) rotate(-45deg); }

/* Menü mobil: Vollbild-Overlay in Schwarz, Akkordeon */
/* Oberkante des Overlays = Unterkante des Hauptkopfs (--menue-oben setzt seite.js beim Öffnen, Rückfall --kopf-h);
   Logo und Schalter liegen über dem Overlay, damit das X sichtbar bleibt */
.menue { position: fixed; top: var(--menue-oben, var(--kopf-h)); left: 0; right: 0; bottom: 0; background: var(--schwarz); overflow-y: auto; overscroll-behavior: contain; padding: 1rem var(--rand) 2rem; visibility: hidden; opacity: 0; transform: translateY(-8px); transition: opacity .25s ease, transform .25s ease, visibility 0s linear .25s; z-index: 1; }
.logo, .menue-schalter { position: relative; z-index: 2; }
body.menue-offen .menue { visibility: visible; opacity: 1; transform: none; transition-delay: 0s; }
body.menue-offen { overflow: hidden; }
.menue-liste { list-style: none; margin: 0; padding: 0; }
.menue-liste > li { margin: 0; border-bottom: 1px solid rgba(255, 255, 255, .1); }
.menue-liste > li > a, .menue-oeffner { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: .95rem .2rem; background: none; border: 0; color: var(--weiss); font: 600 1.05rem var(--schrift-titel); text-transform: uppercase; letter-spacing: .06em; text-decoration: none; text-align: left; cursor: pointer; }
.menue-liste > li > a:hover, .menue-oeffner:hover, .menue-liste > li > a[aria-current="page"] { color: var(--orange); }
/* Mobil: Akkordeon-Pfeil als eigener Strich (kein Icon), Untermenü = Streifen als Liste mit 48-px-Thumbnails (11.9) */
.menue-oeffner::before { content: ""; order: 2; width: 10px; height: 10px; border-right: 2px solid var(--orange); border-bottom: 2px solid var(--orange); transform: rotate(45deg); transition: transform .25s; margin-right: .4rem; }
.menue-gruppe.offen > .menue-oeffner::before { transform: rotate(225deg); }
.streifen { display: none; padding: 0 0 .8rem; }
.menue-gruppe.offen > .streifen { display: block; }
.streifen-liste { list-style: none; margin: 0; padding: 0; }
.streifen-liste li { margin: 0; }
.streifen-kachel { display: flex; align-items: center; gap: .8rem; padding: .45rem .3rem; color: #d9d9d9; text-decoration: none; border-radius: var(--radius-knopf); min-height: 56px; }
.streifen-kachel:hover, .streifen-kachel:focus-visible { color: var(--weiss); background: var(--anthrazit); }
.streifen-bild { position: relative; flex: none; width: 48px; height: 48px; border-radius: 6px; overflow: hidden; background: var(--anthrazit); }
.streifen-foto { width: 100%; height: 100%; object-fit: cover; }
.streifen-muster { display: grid; place-items: center; width: 100%; height: 100%; background: var(--anthrazit) var(--muster-linien); color: var(--orange); }
.streifen-muster .symbol { width: 22px; height: 22px; }
.streifen-pfeil { display: none; }
.streifen-text { display: flex; flex-direction: column; min-width: 0; }
.streifen-text .etikett { position: static; background: none; padding: 0; clip-path: none; font: 600 1rem var(--schrift-titel); letter-spacing: 0; text-transform: none; color: inherit; }
.streifen-domain { font-size: .875rem; color: #9a9a9a; }
.streifen-kachel[aria-current="page"] .etikett { color: var(--orange); }
.menue-aktion { padding: 1.2rem 0 .4rem; border-bottom: 0 !important; }
.menue-aktion .knopf { width: 100%; }
.menue-fuss { margin-top: 1.5rem; display: grid; gap: 1rem; color: #cfcfcf; }
.menue-fuss p { margin: 0; }
.dock { display: none; }

/* Menü ab 1280 (11.9): Programmtafel in Exo 2 700 Versalien, offener Punkt mit 4 px oranger Unterkante über die volle
   Breite des Punkts; Untermenüs als Foto-Streifen über die volle Breite unter dem Kopf; rechts das Reservieren-Dock.
   bowlxxling-neu v0.2.0 (23.10.2026): Schwelle 1024 -> 1280, weil sechs Menüpunkte („Öffnungszeiten“, „Preise &
   Aktionen“, „Speisen & Getränke“ …) plus Logo-Fläche und Dock bei 1024 bis 1279 um rund 260 px überliefen (Messung
   cdp_responsive); dazu Menüschrift 14 px mit engerer Sperrung, Telefon-Pille erst ab 1600. */
@media (min-width: 1280px) {
  .menue-schalter { display: none; }
  .menue { position: static; inset: auto; background: none; overflow: visible; padding: 0; visibility: visible; opacity: 1; transform: none; transition: none; flex: 1; display: flex; justify-content: flex-end; height: 100%; }
  .menue-fuss { display: none; }
  .menue-liste > li.menue-aktion { display: none; }
  .menue-liste { display: flex; align-items: stretch; gap: 0; height: 100%; }
  .menue-liste > li { border-bottom: 0; position: static; display: flex; }
  .menue-liste > li > a, .menue-oeffner { width: auto; height: 100%; padding: 0 .6rem; font-weight: 700; font-size: .875rem; letter-spacing: .04em; gap: 0; position: relative; white-space: nowrap; justify-content: center; }
  .menue-oeffner::before { display: none; }
  .menue-liste > li > a::after, .menue-oeffner::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: var(--orange); transform: scaleY(0); transform-origin: bottom; transition: transform .2s ease-out; }
  .menue-liste > li > a:hover::after, .menue-liste > li > a:focus-visible::after, .menue-liste > li > a[aria-current="page"]::after,
  .menue-gruppe:hover > .menue-oeffner::after, .menue-gruppe:focus-within > .menue-oeffner::after, .menue-gruppe.offen > .menue-oeffner::after, .menue-gruppe--aktiv > .menue-oeffner::after { transform: scaleY(1); }
  .menue-gruppe.zu > .menue-oeffner::after { transform: scaleY(0); }
  /* Streifen: volle Breite unter dem Hauptkopf (Bezug .kopf-haupt), fährt in 240 ms herunter */
  /* Geschlossen display:none (nicht nur unsichtbar), sonst lädt Chrome die lazy-Fotos der Kacheln schon beim Seitenaufbau
     (gemessen 21.10.2026: 18 Bilder, 470 KB); beim Öffnen fährt der Streifen per Animation 240 ms herunter */
  .streifen { display: none; position: absolute; left: 0; right: 0; top: 100%; padding: 1.1rem 0 1.3rem; background: var(--schwarz); border-top: 1px solid rgba(255, 255, 255, .08); box-shadow: 0 30px 60px rgba(0, 0, 0, .5); z-index: 3; }
  .streifen::before { content: ""; position: absolute; left: 0; right: 0; top: -30px; height: 30px; }   /* Brücke für die Maus zwischen Punkt und Streifen */
  .menue-gruppe:hover > .streifen, .menue-gruppe:focus-within > .streifen, .menue-gruppe.offen > .streifen { display: block; animation: streifen-auf .24s ease-out; }
  .menue-gruppe.zu > .streifen { display: none; }
  .streifen-liste { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; padding: 0 var(--rand); margin: 0 auto; }
  .streifen-kachel { position: relative; display: block; padding: 0; min-height: 0; border-radius: var(--radius-bild); overflow: hidden; background: var(--anthrazit); color: var(--weiss); box-shadow: var(--schatten-foto); transition: transform .3s cubic-bezier(.2, .7, .2, 1); }
  .streifen-kachel:hover, .streifen-kachel:focus-visible { background: var(--anthrazit); transform: translateY(-3px); }
  .streifen-bild { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; border-radius: 0; }
  .streifen--gross .streifen-domain { display: none; }   /* Freizeitspaß: nur Etikett und Pfeil (11.9 Punkt 1), Domain nur in den kleinen Streifen */
  .streifen-bild::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, .55) 100%); pointer-events: none; }
  .streifen-foto { transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
  .streifen-kachel:hover .streifen-foto { transform: scale(1.05); }
  .streifen-muster .symbol { width: 32px; height: 32px; }
  .streifen-pfeil { display: grid; place-items: center; position: absolute; right: .6rem; top: .6rem; width: 30px; height: 30px; border-radius: 50%; background: var(--orange); color: var(--schwarz); z-index: 1; }
  .streifen-pfeil .symbol { width: 1rem; height: 1rem; }
  .streifen-text { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; padding: 0 0 10px; align-items: flex-start; pointer-events: none; }
  .streifen-text .etikett { position: static; display: inline-block; padding: .35rem .95rem .35rem .8rem; background: rgba(17, 17, 17, .88); color: var(--weiss); font: 600 .875rem var(--schrift-titel); letter-spacing: .08em; text-transform: uppercase; clip-path: polygon(0 0, 100% 0, calc(100% - 10px) 100%, 0 100%); transition: background .3s, color .3s; }
  .streifen-kachel:hover .etikett, .streifen-kachel[aria-current="page"] .etikett { background: var(--orange); color: var(--schwarz); }
  .streifen-domain { display: inline-block; margin: 2px 0 0 .8rem; padding: .1rem .5rem; font-size: .875rem; color: #d9d9d9; background: rgba(17, 17, 17, .7); border-radius: 3px; }
  .streifen:not(.streifen--gross) .streifen-liste { grid-template-columns: repeat(auto-fit, minmax(190px, 240px)); }
  /* Reservieren-Dock: Knopf plus Telefon-Pille als zusammenhängender Block */
  .dock { display: flex; align-items: center; flex: none; margin-left: .8rem; }
  .dock-knopf { min-height: 46px; padding: 0 18px; font-size: .9rem; border-radius: var(--radius-knopf); }
  .dock-tel { display: none; align-items: center; gap: .45rem; min-height: 46px; padding: 0 16px 0 14px; margin-left: -6px; padding-left: 20px; border-radius: 0 999px 999px 0; background: var(--anthrazit); border: 1px solid rgba(255, 255, 255, .18); color: var(--weiss); text-decoration: none; font: 700 .95rem var(--schrift-titel); letter-spacing: .03em; white-space: nowrap; }
  .dock-tel .symbol { color: var(--orange); }
  .dock-tel:hover, .dock-tel:focus-visible { border-color: var(--orange); color: var(--orange); }
}
@media (min-width: 1280px) {
  .kopf-haupt-innen { gap: 1rem; }
  .streifen--gross .streifen-liste { grid-template-columns: repeat(7, 1fr); }
}
/* 28.10.2026: sechster Menüpunkt „Essen & Trinken“. Der Kopf ist ab 1280 gleich breit (rund 1160 px), deshalb überall engere
   Punkte; die frühere Stufe ab 1700 (15 px, Telefon-Pille) entfällt, sie lief über (Aufnahmen 1280/1440/1700/1920). */
@media (min-width: 1280px) {
  .menue-liste > li > a, .menue-oeffner { padding: 0 .4rem; letter-spacing: .01em; }
}
/* 760 bis 1279 (bowlxxling-neu v0.2.0): Hamburger wie mobil, aber der Reservieren-Knopf steht sichtbar links vom Schalter */
@media (min-width: 760px) and (max-width: 1279.98px) {
  .dock { display: flex; align-items: center; flex: none; order: 2; margin-left: auto; }
  .dock-knopf { min-height: 44px; padding: 0 18px; font-size: .9rem; }
  .dock-tel { display: none; }
  .menue-schalter { order: 3; }
}
/* Kopfleiste: unter 1280 nur Adresse und Telefon links, sonst bricht die Zeile bei 1024 um (Messung 23.10.2026) */
@media (max-width: 1279.98px) { .kopf-kontakt .nur-breit { display: none !important; } }

/* --- Seitenkopf der Unterseiten ---------------------------------------------------------- */
/* Kopfband mit Bereichsfoto (11.4): mobil Foto als 16:9-Band unter dem Titel, ab 1024 rechts 42 % schräg
   angeschnitten mit Verlauf nach links in Schwarz, 300 px hoch. Der orange Keil (v0.2.x) ist entfallen. */
.seitenkopf { background: var(--schwarz); color: var(--text-hell); position: relative; overflow: hidden; }
.seitenkopf-innen { position: relative; z-index: 1; padding-top: 1.5rem; padding-bottom: clamp(2rem, 5vw, 3.5rem); }
.seitenkopf h1 { color: var(--weiss); font-size: clamp(2rem, 4.4vw, 3.6rem); max-width: 18em; margin: 0; }
.seitenkopf .kicker { margin-bottom: .7rem; }
.seitenkopf-bild { position: relative; aspect-ratio: 16 / 9; background: var(--anthrazit); overflow: hidden; }
.seitenkopf-foto, .seitenkopf-karte { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.seitenkopf-bild--muster { aspect-ratio: auto; height: 56px; background: var(--anthrazit) var(--muster-linien); }
/* Karte: Pin liegt bei 45 % / 50 % der SVG (karte_osm.py); vergrößert, damit Straßennamen lesbar bleiben, Pin mittig */
.seitenkopf-bild--karte { background: var(--anthrazit); }
.seitenkopf-bild--karte .seitenkopf-karte { object-position: 45% 50%; transform: scale(1.6); transform-origin: 37% 50%; }
@media (min-width: 1024px) {
  .seitenkopf--foto, .seitenkopf--karte, .seitenkopf--muster { min-height: 300px; }
  .seitenkopf--foto .seitenkopf-innen, .seitenkopf--karte .seitenkopf-innen, .seitenkopf--muster .seitenkopf-innen { min-height: 300px; display: flex; flex-direction: column; justify-content: center; padding-right: max(2rem, calc(42vw - (100vw - var(--breite)) / 2 + 2rem)); padding-top: 1.5rem; padding-bottom: 1.5rem; }   /* 21.10.2026: Abstand nach Fotobreite (42vw) statt 44 % der Fensterbreite; auf breiten Bildschirmen war die Textspalte nur ~350 px */
  .seitenkopf-bild { position: absolute; right: 0; top: 0; bottom: 0; width: 42%; height: auto; aspect-ratio: auto; clip-path: polygon(8% 0, 100% 0, 100% 100%, 0 100%); }
  .seitenkopf-bild::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--schwarz) 0, rgba(17, 17, 17, .55) 28%, rgba(17, 17, 17, 0) 62%); pointer-events: none; }
  .seitenkopf-bild--karte::after { background: linear-gradient(90deg, var(--schwarz) 0, rgba(17, 17, 17, .35) 30%, rgba(17, 17, 17, 0) 60%); }
  .seitenkopf-bild--karte .seitenkopf-karte { transform: scale(1.8); transform-origin: 20% 50%; }   /* Pin landet bei 65 % der Breite, rechts der Verlaufskante */
  .seitenkopf-bild--muster::after { background: linear-gradient(90deg, var(--schwarz), rgba(17, 17, 17, 0) 40%); }
}
.pfad { font-size: .875rem; margin-bottom: 1.4rem; }
.pfad ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .2rem; color: #b5b5b5; }
.pfad li { margin: 0; }
.pfad li + li::before { content: "\203A"; margin: 0 .5em; color: var(--orange); }
.pfad a { color: #d9d9d9; text-decoration: none; }
.pfad a:hover { color: var(--orange); }
.pfad [aria-current] { color: var(--weiss); }

/* --- Hero (7.2) --------------------------------------------------------------------------- */
.held { background: var(--schwarz); color: var(--text-hell); padding: 1.5rem 0 2.5rem; position: relative; overflow: hidden; }
.held::before { content: ""; position: absolute; inset: auto -10% -30% 55%; height: 70%; background: radial-gradient(closest-side, rgba(244, 161, 23, .10), transparent); pointer-events: none; }   /* dezenter Schein, höchstens 12 % (Designer 20.10.2026) */
.held-raster { display: grid; gap: 2rem; position: relative; }
.held-text { padding-top: .5rem; }
/* Hero-Typografie (11.9 Punkt 3): schräges Etikett, H1 in Versalien mit orangem Markerblock im Wort „Dach“,
   darunter die Aufzählung kleiner in normaler Schreibung. Alles liegt in der <h1>. */
.held-h1 { color: var(--weiss); margin-bottom: 1.1rem; font-size: clamp(2.5rem, 5vw, 4.4rem); letter-spacing: 0; }
.held-etikett { display: inline-block; margin: 0 0 1.1rem .2rem; padding: .4rem 1.1rem .4rem .95rem; background: var(--orange); color: var(--schwarz); font: 600 .875rem var(--schrift-titel); letter-spacing: .1em; text-transform: uppercase; transform: rotate(-3deg); transform-origin: left bottom; clip-path: polygon(0 0, 100% 0, calc(100% - 10px) 100%, 0 100%); }
.held-zeile1 { display: block; text-transform: uppercase; font-weight: 800; line-height: 1.02; letter-spacing: .01em; }
.held-marker { position: relative; display: inline-block; isolation: isolate; color: var(--schwarz); padding: 0 .14em; margin: 0 -.04em; }
.held-marker::before { content: ""; position: absolute; inset: .08em -.02em .04em; background: var(--orange); transform: skewX(-7deg) rotate(-1.5deg); border-radius: .06em; z-index: -1; }
.held-zeile2 { display: block; margin-top: .55em; font-weight: 600; font-size: clamp(1.1rem, 1.7vw, 1.5rem); line-height: 1.3; color: #e6e6e6; text-transform: none; letter-spacing: 0; }
.held-absatz { font-size: 1.15rem; line-height: 1.55; color: #d9d9d9; max-width: 32em; }
.held .knoepfe { margin-top: 1.8rem; }

.mosaik { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mosaik-kachel { margin: 0; position: relative; aspect-ratio: 4 / 3; }
.mosaik-kachel a { position: absolute; inset: 0; display: block; border-radius: var(--radius-bild); overflow: hidden; background: var(--anthrazit); box-shadow: var(--schatten-foto); transition: transform .6s cubic-bezier(.2, .7, .2, 1), box-shadow .4s; }
.mosaik-foto { width: 100%; height: 100%; object-fit: cover; transition: transform .7s cubic-bezier(.2, .7, .2, 1), filter .5s; }
.mosaik-kachel a::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, .55) 100%); pointer-events: none; }
.etikett { position: absolute; left: 0; bottom: 12px; z-index: 1; padding: .45rem 1.1rem .45rem .95rem; background: rgba(17, 17, 17, .88); color: var(--weiss); font: 600 .875rem var(--schrift-titel); letter-spacing: .08em; text-transform: uppercase; clip-path: polygon(0 0, 100% 0, calc(100% - 10px) 100%, 0 100%); transition: background .3s, color .3s, transform .4s; }
.mosaik-kachel a:hover .mosaik-foto, .mosaik-kachel a:focus-visible .mosaik-foto { transform: scale(1.04); }
.mosaik-kachel a:hover .etikett, .mosaik-kachel a:focus-visible .etikett { transform: translateY(-6px); background: var(--orange); color: var(--schwarz); }
.mosaik-huelle { position: relative; }

/* Bühne (11.1): drei Motive übereinander, Überblendung 1,2 s über opacity; inaktive Motive sind inert.
   Spotlight (v0.2) entfällt. Videoslot: .buehne--video zeigt das Video statt der Motive. */
.buehne .buehne-motiv { opacity: 0; transition: opacity 1.2s ease-in-out, transform .6s cubic-bezier(.2, .7, .2, 1), box-shadow .4s; pointer-events: none; }
.buehne .buehne-motiv.aktiv { opacity: 1; pointer-events: auto; z-index: 1; }
.buehne-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius-bild); opacity: 0; pointer-events: none; transition: opacity 1.2s ease-in-out; }
.buehne.buehne--video .buehne-video { opacity: 1; z-index: 2; }
.buehne.buehne--video .buehne-motiv .mosaik-foto { animation: none; }
.buehne .etikett { transition: background .3s, color .3s, transform .4s; }
/* Laserlinien (11.1): zwei 1-px-Linien, Verlauf transparent → Orange 70 % → transparent, −18°, nur Desktop */
.laser { display: none; }
@media (min-width: 1024px) {
  .laser { display: block; position: absolute; inset: 0; overflow: hidden; pointer-events: none; mix-blend-mode: screen; z-index: 3; border-radius: var(--radius-bild); }
  .laser-linie { position: absolute; left: -30%; top: 50%; width: 160%; height: 1px; background: linear-gradient(90deg, rgba(244, 161, 23, 0), rgba(244, 161, 23, .7) 50%, rgba(244, 161, 23, 0)); opacity: 0; transform: rotate(-18deg) translateY(-60vh); will-change: transform, opacity; }
}

@media (min-width: 760px) {
  .mosaik { grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); aspect-ratio: 1.15; gap: 12px; }
  .mosaik-kachel { aspect-ratio: auto; }
  .mosaik-kachel--gross { grid-column: 1 / 3; grid-row: 1 / 3; }
}
@media (min-width: 1024px) {
  /* Höhe min(84vh, 820px), Inhalt mittig; unten 40px Band-Überlappung plus 2rem Luft (Designer 20.10.2026) */
  .held { padding: 0; min-height: max(620px, min(84vh, 820px)); display: flex; align-items: center; }
  .held-raster { grid-template-columns: 45fr 55fr; align-items: center; gap: clamp(2rem, 4vw, 4rem); width: 100%; padding-top: 2rem; padding-bottom: 2rem; }   /* Runde 2: kein überlappendes Band mehr */
  .held-text { padding-top: 0; }
  .mosaik { aspect-ratio: 1; }
  .mosaik-kachel--gross .etikett { font-size: 1rem; padding: .55rem 1.3rem .55rem 1.1rem; }
}

/* --- Schnellreservierung (7.3) ----------------------------------------------------------- */
.schnell { position: relative; z-index: 3; margin-top: -40px; }
.schnell-karte { background: var(--weiss); border-radius: var(--radius-karte); box-shadow: 0 24px 60px rgba(0, 0, 0, .18); padding: 1.4rem var(--rand) 1.4rem; }
.schnell-kopf { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .8rem 1.5rem; margin-bottom: 1rem; }
.schnell-titel { font-size: 1.3rem; font-weight: 600; margin: 0; position: relative; padding-bottom: .35rem; align-self: start; }
.schnell-titel::after { content: ""; position: absolute; left: 0; bottom: 0; width: 48px; height: 3px; border-radius: 2px; background: var(--orange); transform-origin: left; }   /* wächst beim Einblenden von links (11.7, Block „Bewegung“) */
.schnell-telefon { min-height: 44px; }
@media (min-width: 760px) { .schnell-karte { padding: 1.6rem 2rem; } .schnell-titel { font-size: 1.5rem; } }
@media (min-width: 1024px) { .schnell-karte { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 1rem 2.5rem; } .schnell-kopf { margin: 0; display: contents; } .schnell-telefon { order: 3; justify-self: end; } .chips { grid-column: 1 / 2; grid-row: 2; } .schnell-karte .chips { grid-column: 1 / -1; } }

/* --- Blöcke ------------------------------------------------------------------------------- */
.block { padding: var(--abstand) 0; }
.abschnitt.block { padding: calc(var(--abstand) * .6) 0; }
.abschnitt.block:first-of-type, .kennzahlen + .abschnitt.block { padding-top: var(--abstand); }
.abschnitt.block + .block--hell, .band + .abschnitt.block { padding-top: var(--abstand); }
.abschnitt.block + .band { margin-top: calc(var(--abstand) * .3); }
.block--hell { background: var(--grau-flaeche); }
.block--dunkel { background: var(--schwarz); color: var(--text-hell); }
.schnell + .block { padding-top: calc(var(--abstand) * .8); }

/* --- Bereiche-Raster (7.4) --------------------------------------------------------------- */
.bereiche-raster { display: grid; gap: 1rem; }
.bereich { position: relative; display: grid; grid-template-columns: 112px 1fr; align-items: center; min-height: 92px; border-radius: var(--radius-karte); overflow: hidden; background: var(--anthrazit); color: var(--weiss); text-decoration: none; box-shadow: var(--schatten-weiss); transition: transform .3s cubic-bezier(.2, .7, .2, 1), box-shadow .3s; --marke: var(--orange); }
.bereich-foto { width: 100%; height: 100%; object-fit: cover; transition: transform .7s cubic-bezier(.2, .7, .2, 1); }
/* Karte ohne Foto: Anthrazit mit Linienmuster, Icon klein (28px) oben links, Name groß unten links */
.bereich-icon { display: grid; place-items: center; height: 100%; color: var(--orange); background: var(--anthrazit) var(--muster-linien); }
.bereich-icon .symbol { width: 28px; height: 28px; }
.bereich--pitpat .bereich-foto { object-position: 88% 50%; filter: brightness(1.15); }   /* rechter Bildteil mit dem rot angestrahlten Dino, Foto 1600×487 */
.bereich-name { display: flex; align-items: center; gap: .6rem; padding: .8rem 3rem .8rem 1rem; }
.bereich-name .h3 { margin: 0; font-size: 1.1rem; }
.bereich-mini { display: none; }
.bereich-pfeil { position: absolute; right: .8rem; top: 50%; transform: translateY(-50%); width: 36px; height: 36px; border-radius: 50%; background: var(--orange); color: var(--schwarz); display: grid; place-items: center; transition: transform .3s, background .3s; }
.bereich-pfeil .symbol { width: 1.1rem; height: 1.1rem; }
.bereich:hover, .bereich:focus-visible { transform: translateY(-4px); box-shadow: 0 16px 36px rgba(0, 0, 0, .18); }
.bereich:hover .bereich-foto { transform: scale(1.05); }
.bereich:hover .bereich-pfeil { transform: translateY(-50%) scale(1.1); }
@media (min-width: 480px) {
  .bereiche-raster { grid-template-columns: repeat(2, 1fr); gap: 1.2rem; }
  .bereich { display: block; aspect-ratio: 4 / 3; min-height: 0; box-shadow: var(--schatten-foto); }
  .bereich-foto, .bereich-icon { position: absolute; inset: 0; width: 100%; height: 100%; }
  .bereich-icon { display: block; }
  .bereich-icon .symbol { position: absolute; left: 1.1rem; top: 1.1rem; width: 28px; height: 28px; }
  .bereich::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, .05) 40%, rgba(0, 0, 0, .78) 100%); }
  .bereich--ohne-foto::after { background: linear-gradient(180deg, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, .35) 100%); }
  .bereich--ohne-foto .bereich-mini { display: none; }
  .bereich--ohne-foto .bereich-name .h3 { font-size: 1.5rem; font-weight: 700; text-shadow: none; }
  .bereich--pitpat::after { background: linear-gradient(180deg, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, .78) 100%); }   /* Verlauf nur unten, Foto bleibt hell */
  .bereich-name { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; padding: 1rem 1.1rem 1rem; }
  .bereich-name .h3 { font-size: 1.25rem; text-shadow: 0 2px 10px rgba(0, 0, 0, .5); }
  .bereich-mini { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: rgba(17, 17, 17, .75); border: 1px solid rgba(255, 255, 255, .25); color: var(--orange); flex: none; }
  .bereich-mini .symbol { width: 1.2rem; height: 1.2rem; }
  .bereich-pfeil { top: .9rem; right: .9rem; transform: none; z-index: 1; }
  .bereich:hover .bereich-pfeil { transform: translate(2px, -2px) scale(1.08); }
  .bereich[style] .bereich-mini { border-color: var(--marke); color: var(--marke); }
  .bereich::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: var(--marke); z-index: 2; opacity: 0; transition: opacity .3s; }
  .bereich[style]::before { opacity: 1; }
  /* Erste Karte (Bowling) als große Kachel: 1 + 12 Karten füllen so 7 Reihen zu 2 bzw. 4 Reihen zu 4 */
  .bereiche-raster > .bereich:first-child { grid-column: span 2; aspect-ratio: 2 / 1; }
}
@media (min-width: 1024px) {
  .bereiche-raster { grid-template-columns: repeat(4, 1fr); gap: 1.4rem; }
  .bereiche-raster > .bereich:first-child { grid-row: span 2; aspect-ratio: auto; }
  .bereiche-raster > .bereich:first-child .bereich-name .h3 { font-size: 1.6rem; }
}

/* --- Aktuelles / Newsletter --------------------------------------------------------------- */
.newsletter { display: grid; gap: 2rem; background: var(--weiss); border-radius: var(--radius-karte); box-shadow: var(--schatten-weiss); padding: clamp(1.4rem, 3vw, 2.5rem); }
.newsletter-text .kicker { margin-top: 1.6rem; }
.radiospot .hervorhebung { border-left: 0; padding: 0; margin: 0; font-size: 1rem; }
.radiospot .hervorhebung p { margin: 0; }
.radiospot .hervorhebung strong { font-family: var(--schrift-titel); font-weight: 600; }
.radiospot .player { margin-top: .5rem; }
.newsletter-text .h2 { font-size: clamp(1.5rem, 2.4vw, 2.1rem); }
.fliesstext--gross { font-size: 1.1rem; color: var(--grau-text); }
.newsletter-bild .bildkarte { max-width: 420px; margin: 0 auto; }
@media (min-width: 760px) { .newsletter { grid-template-columns: 7fr 5fr; align-items: start; } }

/* --- Kennzahlen (7.5): Schwarz, schräge Kante oben ---------------------------------------- */
.kennzahlen { background: var(--schwarz); color: var(--text-hell); padding: calc(var(--abstand) * .9 + 3vw) 0 calc(var(--abstand) * .8); margin-top: -3vw; clip-path: polygon(0 3vw, 100% 0, 100% 100%, 0 100%); position: relative; z-index: 1; }
.kennzahlen-liste { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.6rem 1rem; }
.kennzahl { margin: 0; display: grid; gap: .2rem; padding-left: 1rem; border-left: 3px solid var(--orange); }
.kennzahl-zahl { font-family: var(--schrift-titel); font-weight: 800; font-size: var(--t-zahl); line-height: 1; color: var(--orange); font-variant-numeric: tabular-nums; }
.kennzahl-text { color: #d9d9d9; font-size: .95rem; }
/* 760 bis 1023: 6er-Raster, oben drei, unten zwei gleich breite Felder (keine leere Zelle) */
/* bowlxxling-neu Runde 3: vier Zellen, ab 600 zwei Spalten, ab 1024 vier (Anzeigetafel, Block „Runde 3“) */
@media (min-width: 1024px) { .kennzahlen-liste { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2rem; } }

/* --- Text/Bild-Abschnitte (7.6) ----------------------------------------------------------- */
.abschnitt-raster { display: grid; gap: 2.2rem; align-items: center; }
.abschnitt-text .kicker { margin-bottom: .8rem; }
.fliesstext { max-width: 68ch; }
.fliesstext > :last-child { margin-bottom: 0; }
.fliesstext .knopf { margin-top: .4rem; }
.hervorhebung { font-size: 1.15rem; line-height: 1.55; padding: 0; margin: 0 0 1.2rem; }   /* Randstrich entfernt 22.10.2026 */
.hervorhebung p:last-child { margin-bottom: 0; }
.abschnitt-medien { display: grid; gap: 1.6rem; }
.bildkarte { background: var(--weiss); border-radius: var(--radius-karte); padding: 10px; box-shadow: 0 18px 40px rgba(0, 0, 0, .16); transition: transform .5s cubic-bezier(.2, .7, .2, 1), box-shadow .4s; }
.bildkarte img { border-radius: var(--radius-bild); width: 100%; }
.bildkarte figure, .bildkarte p { margin: 0; }
.bildkarte a { display: block; }
.block--hell .bildkarte { box-shadow: 0 18px 40px rgba(0, 0, 0, .12); }
.abschnitt--pitpat .bildkarte { border-top: 5px solid var(--magenta); }
.abschnitt--pitpat .kicker::before { background: var(--magenta); }
/* Video im Telefonrahmen 9:16 */
.telefon { width: min(100%, 300px); margin: 0 auto; background: var(--schwarz); border-radius: 36px; padding: 12px; box-shadow: 0 24px 60px rgba(0, 0, 0, .35), inset 0 0 0 2px #333; position: relative; }
.telefon::before { content: ""; position: absolute; left: 50%; top: 12px; transform: translateX(-50%); width: 90px; height: 22px; background: var(--schwarz); border-radius: 0 0 14px 14px; z-index: 1; }
.telefon video { aspect-ratio: 9 / 16; width: 100%; height: auto; object-fit: cover; border-radius: 26px; background: var(--anthrazit); }
@media (min-width: 760px) {
  .abschnitt-raster { grid-template-columns: 7fr 5fr; gap: clamp(2.5rem, 5vw, 5rem); }
  .abschnitt--bild-links .abschnitt-text { order: 2; }
  .abschnitt--hochkant .abschnitt-raster { grid-template-columns: 7fr 5fr; }
}
@media (min-width: 1024px) {
  .bildkarte--links { transform: rotate(-1.5deg); }
  .bildkarte--rechts { transform: rotate(1.5deg); }
  .bildkarte:hover { transform: rotate(0) translateY(-4px); }
  .bildkarte--hoch { transform: rotate(1.5deg); }
}

/* --- Band (Brunch, statisch) -------------------------------------------------------------- */
.band { background: var(--orange-hell); border-top: 1px solid #f3dfb6; border-bottom: 1px solid #f3dfb6; }
.band-innen { display: flex; align-items: center; justify-content: center; gap: 1rem; padding-top: 1.4rem; padding-bottom: 1.4rem; text-align: center; font-size: 1.1rem; }
.band-innen p { margin: 0; }
.band-icon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--orange); color: var(--schwarz); flex: none; }
.band strong { font-family: var(--schrift-titel); font-size: 1.25rem; font-weight: 700; }

/* --- Menü-Karten (Körper & Geist, Essen & Trinken, Service) -------------------------------- */
.menue-karten { display: grid; gap: 1.2rem; }
.menue-karte { background: var(--weiss); border-radius: var(--radius-karte); border-top: 4px solid var(--orange); padding: 1.6rem 1.5rem 1.4rem; box-shadow: var(--schatten-weiss); transition: transform .3s, box-shadow .3s; }
.menue-karte:hover { transform: translateY(-4px); box-shadow: 0 16px 36px rgba(0, 0, 0, .12); }
.menue-karte-icon { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--schwarz); color: var(--orange); margin-bottom: 1rem; }
.menue-karte h3 { font-size: 1.35rem; margin-bottom: .6rem; }
.menue-karte ul { list-style: none; margin: 0; padding: 0; }
.menue-karte li { margin: 0; border-top: 1px solid var(--linie); }
.menue-karte a { display: flex; align-items: center; justify-content: space-between; gap: .6rem; padding: .65rem 0; color: var(--text); text-decoration: none; font-weight: 400; }
.menue-karte a .symbol { color: var(--orange-tief); transition: transform .2s; }
.menue-karte a:hover { color: var(--orange-text); }
.menue-karte a:hover .symbol { transform: translateX(3px); }
@media (min-width: 760px) { .menue-karten { grid-template-columns: repeat(3, 1fr); gap: 1.5rem; } }

/* --- Anfahrt-Teaser ----------------------------------------------------------------------- */
.anfahrt-teaser { background: var(--schwarz); color: var(--text-hell); }
.anfahrt-teaser h2 { color: var(--weiss); }
.anfahrt-raster { display: grid; gap: 2.5rem; align-items: center; }
.anfahrt-adresse { font-size: 1.15rem; line-height: 1.5; margin-bottom: 1.2rem; }
.anfahrt-liste { list-style: none; margin: 0 0 .5rem; padding: 0; display: grid; gap: .6rem; color: #d9d9d9; }
.anfahrt-liste li { display: flex; gap: .7rem; align-items: flex-start; margin: 0; }
.anfahrt-liste .symbol { color: var(--orange); margin-top: .2em; }
.anfahrt-liste a { color: var(--weiss); text-decoration-color: var(--orange); }
.anfahrt-liste a:hover { color: var(--orange); }
/* Dekorative Grafik: eigene Inline-SVG (Punktraster, Ringe) ohne Straßen oder Geodaten (Designer 20.10.2026) */
.anfahrt-karte { position: relative; aspect-ratio: 4 / 3; max-width: 520px; width: 100%; justify-self: center; border-radius: var(--radius-karte); overflow: hidden; background-color: var(--anthrazit); box-shadow: var(--schatten-foto); }
.anfahrt-grafik { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.anfahrt-pin { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -100%); color: var(--orange); z-index: 1; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .5)); }
.anfahrt-ring { position: absolute; left: 50%; top: 50%; width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--orange); transform: translate(-50%, -50%); opacity: .8; }
.anfahrt-ring--2 { width: 70px; height: 70px; opacity: .3; }
/* Echte Karte (11.3): statische SVG aus OpenStreetMap-Daten, Link zur Anfahrt; Pin und Hinweis stehen in der Grafik */
a.anfahrt-karte--osm { display: block; transition: transform .4s cubic-bezier(.2, .7, .2, 1), box-shadow .4s; }
a.anfahrt-karte--osm:hover, a.anfahrt-karte--osm:focus-visible { transform: translateY(-4px); box-shadow: 0 24px 50px rgba(0, 0, 0, .5); }
.anfahrt-kartenbild { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
/* Pflichthinweis OpenStreetMap: unten rechts über der Karte (der Text in der SVG ist bei dieser Größe zu klein) */
.karte-quelle { position: absolute; right: 0; bottom: 0; z-index: 1; margin: 0; padding: .2rem .6rem; font-size: .875rem; line-height: 1.3; color: #d9d9d9; background: rgba(17, 17, 17, .75); border-radius: 6px 0 0 0; }
.karte-quelle a { color: var(--weiss); text-decoration-color: var(--orange); }
.karte-quelle a:hover { color: var(--orange); }
.karte-quelle--kopf { right: var(--rand); bottom: .4rem; border-radius: 6px; }
@media (min-width: 760px) { .anfahrt-raster { grid-template-columns: 7fr 5fr; } }

/* --- Inhalt der Unterseiten (Bestandstexte) ----------------------------------------------- */
.inhalt { padding: clamp(2rem, 5vw, 3.5rem) var(--rand) var(--abstand); }
.inhalt > .abschnitt { padding: clamp(1.5rem, 3vw, 2.5rem) 0; border-top: 1px solid var(--linie); }
.inhalt > .abschnitt:first-child { padding-top: 0; border-top: 0; }
.inhalt p, .inhalt li, .inhalt h2, .inhalt h3, .inhalt .hervorhebung { max-width: 68ch; }
.inhalt h2 { margin-top: .2em; }
.inhalt h2 + h3, .inhalt .dachzeile + h2, .inhalt .dachzeile + h3 { margin-top: 0; }
.inhalt .dachzeile { font-family: var(--schrift-titel); font-weight: 600; font-size: var(--t-kicker); letter-spacing: .16em; text-transform: uppercase; color: var(--orange-text); margin: 1.2em 0 .5em; display: flex; align-items: center; gap: .7rem; }
.inhalt .dachzeile::before { content: ""; width: 1.4rem; height: 3px; background: var(--orange); }
.inhalt .abschnitt:first-child .dachzeile:first-child { margin-top: 0; }
.inhalt .spalten { display: grid; gap: 2rem; align-items: start; }
.inhalt .spalte > :first-child { margin-top: 0; }
/* 22.10.2026 (Nutzer: Kasten mit orangem Rand „typisch KI“): Hervorhebung als Leitsatz ohne Kasten.
   Größere, dunklere Schrift; Zahlen und Fettungen bekommen einen schrägen orangen Markerstrich wie „DACH“ im Hero. */
.inhalt .hervorhebung { background: none; border: 0; border-radius: 0; box-shadow: none; padding: 0; margin: 0 0 1.4rem;
    font-size: clamp(1.15rem, 1.6vw, 1.32rem); line-height: 1.5; color: var(--schwarz); font-weight: 500; }
.inhalt .hervorhebung strong { font-weight: 700; background: linear-gradient(176deg, transparent 58%, rgba(244, 161, 23, .55) 58%, rgba(244, 161, 23, .55) 88%, transparent 88%); padding: 0 .08em; }
.inhalt .hervorhebung table, .inhalt .hervorhebung dl { font-size: 1rem; font-weight: 400; }
.inhalt .hervorhebung > :last-child { margin-bottom: 0; }
.inhalt .hervorhebung table { max-width: none; }
.inhalt figure { margin: 0 0 1.2rem; }
.inhalt .spalte figure img, .inhalt .abschnitt > figure img, .inhalt .abschnitt > p > img, .inhalt .abschnitt > p > a > img { border-radius: var(--radius-bild); box-shadow: 0 18px 40px rgba(0, 0, 0, .16); }
.inhalt .abschnitt > figure { max-width: 68ch; }
.inhalt figure + figure { margin-top: 1.2rem; }
.inhalt .galerie figure, .inhalt .galerie figure + figure { margin: 0; }   /* 22.10.2026: in Galerien versetzte der Abstand alle Bilder außer dem ersten (schiefe Reihen) */
.inhalt .knopf { margin: .3rem 0 .6rem; }
.inhalt ul:not(.chips-liste) { padding-left: 0; list-style: none; }
.inhalt ul:not(.chips-liste) > li { position: relative; padding-left: 1.6rem; margin-bottom: .5rem; }
.inhalt ul:not(.chips-liste) > li::before { content: ""; position: absolute; left: 0; top: .6em; width: .9rem; height: 3px; background: var(--orange); border-radius: 2px; }
.inhalt .spielplatz-pfeil { display: none; }
.inhalt .infobox { display: flex; gap: 1rem; align-items: center; }
.inhalt .infobox-bild img { width: 96px; }
.inhalt .slider { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: .8rem; }
.inhalt .karte-link { display: inline-flex; align-items: center; min-height: 48px; padding: 0 22px; border-radius: var(--radius-knopf); background: var(--orange); color: var(--schwarz); font-family: var(--schrift-titel); font-weight: 600; text-decoration: none; transition: background .2s, transform .15s, box-shadow .2s; }
.inhalt .karte-link:hover, .inhalt .karte-link:focus-visible { background: var(--orange-tief); transform: translateY(-1px); box-shadow: 0 8px 18px rgba(0, 0, 0, .18); }
.inhalt .karte-link::after { content: "\2197"; margin-left: .5rem; }
.inhalt--breit p, .inhalt--breit h2, .inhalt--breit h3 { max-width: none; }
.inhalt .telefon { margin: 0 0 1.2rem; }
@media (min-width: 760px) { .inhalt .spalten { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 2.5rem; } }
/* Chip-Raster (11.4): kurze Zeilen (Disziplinen, Behandlungen) als Pillen mit orangem Punkt, Text wörtlich */
.inhalt ul.chip-raster { display: flex; flex-wrap: wrap; gap: .6rem; margin: .4rem 0 1.4rem; max-width: 68ch; }
.inhalt ul.chip-raster > li { display: inline-flex; align-items: center; gap: .6rem; min-height: 44px; margin: 0; padding: 0 1.1rem 0 .9rem; border: 1px solid var(--linie); border-radius: 999px; background: var(--weiss); font-family: var(--schrift-titel); font-weight: 600; font-size: .95rem; color: var(--text); box-shadow: var(--schatten-weiss); }
.inhalt ul.chip-raster > li::before { position: static; width: 8px; height: 8px; border-radius: 50%; background: var(--orange); flex: none; }
/* Tafeln (11.4): Kontakt und Öffnungszeiten als zwei schwarze Tafeln nebeneinander, Telefon als Knopf */
.tafeln { display: grid; gap: 1.2rem; margin: .5rem 0 1rem; }
.tafel--inhalt { display: flex; flex-direction: column; align-items: flex-start; }
.tafel--inhalt > :last-child { margin-bottom: 0; }
.tafel--inhalt .kicker { margin-bottom: .8rem; }
.tafel--inhalt p { max-width: none; color: var(--text-hell); overflow-wrap: anywhere; }
.tafel--inhalt strong { color: var(--weiss); font-family: var(--schrift-titel); font-size: 1.15rem; }
.tafel--inhalt table { max-width: none; color: var(--text-hell); }
.tafel--inhalt td { border-color: rgba(255, 255, 255, .14); }
.tafel--inhalt tr:first-child td { padding-top: 0; }
.tafel--inhalt .tafel-knopf { margin: .3rem 0 .6rem; }
@media (min-width: 760px) { .tafeln { grid-template-columns: 1fr 1fr; gap: 1.5rem; } }
.tafel--inhalt .tafel-knopf { min-height: 44px; padding: 0 16px; margin: .3rem 0 .35rem .3rem; vertical-align: middle; font-size: .95rem; }
.tafel--inhalt p:has(.tafel-knopf) { line-height: 2; }
/* Einzelne Tafel (Ladestation „Betreiber“): ab 760 als breite Leiste, Kicker und Angaben nebeneinander */
@media (min-width: 760px) {
  .tafeln--eins { grid-template-columns: 1fr; }
  .tafeln--eins .tafel--inhalt { flex-direction: row; flex-wrap: wrap; align-items: center; gap: .6rem 3rem; }
  .tafeln--eins .tafel--inhalt > * { margin: 0; }
}

/* --- Blockaufbau der Unterseiten (22.10.2026, unterseite_bloecke() in inc/funktionen.php) ----------------------
   Jeder Bestandsabschnitt ist ein Band über die volle Breite, hell und grau im Wechsel (das letzte hell, davor das
   graue Weiter-Band). Bausteine: Kopf links/Text rechts, Text neben Bildern, Vorspann + Karte, Ankündigung mittig,
   Faktenkarten, Zeilenblöcke, Zwischentitel, Rechtstexte als Dokumentkarte mit Inhaltsverzeichnis. */
.inhalt--bloecke { padding: 0; }
.ublock { padding: clamp(3rem, 6vw, 5.5rem) 0; }
.ublock--grau { background: var(--grau-flaeche); }
.ublock-raster { display: grid; gap: 1.6rem; }
.ublock-text > :first-child, .ublock-kopf > :first-child, .ublock-karte > :first-child { margin-top: 0; }
.ublock-text > :last-child, .ublock-kopf > :last-child, .ublock-karte > :last-child, .ublock-schlicht-text > :last-child, .ublock-roh-text > :last-child { margin-bottom: 0; }
.ublock-kopf h2, .ublock-kopf h3 { margin-bottom: 0; }
.inhalt .ublock-kopf .zwischentitel { font-size: clamp(1.5rem, 2.6vw, 2.2rem); line-height: 1.15; margin: 0; }
.ublock-kopf .zwischentitel::after { content: ""; display: block; width: 40px; height: 3px; background: var(--orange); margin-top: .45em; border-radius: 2px; }
.ublock--einstieg .ublock-raster--kopf .ublock-text > p, .ublock--einstieg .ublock-schlicht-text > p:first-child { font-size: clamp(1.1rem, 1.5vw, 1.25rem); line-height: 1.55; color: var(--schwarz); }
.ublock-text h3:only-child { font-size: clamp(1.25rem, 2vw, 1.6rem); line-height: 1.35; font-weight: 600; max-width: 30em; }   /* Satz als Überschrift (Restaurant 28 Süd) */
.ublock-medien .galerie { margin: 0; }
.ublock-medien .bildkarte { max-width: 560px; margin: 0 auto; }
.ublock-medien--voll .galerie { margin: 0; }
.bildkarte figure { margin: 0; }
.bildkarte--logo { max-width: 300px !important; padding: clamp(1rem, 3vw, 1.75rem); transform: none !important; box-shadow: var(--schatten-weiss); border: 1px solid var(--linie); }
.bildkarte--logo img { border-radius: 0; box-shadow: none !important; }
.inhalt .bildkarte figure img { box-shadow: none; }
.ublock-karte { background: var(--weiss); border: 1px solid var(--linie); border-radius: var(--radius-karte); box-shadow: var(--schatten-weiss); padding: clamp(1.4rem, 3vw, 2.25rem); }
.ublock-karte h2 { font-size: clamp(1.4rem, 2.2vw, 1.85rem); }
.ublock-karte > p + p { border-top: 1px solid var(--linie); padding-top: 1rem; }
.ublock-ankuendigung { text-align: center; max-width: 46rem; margin: 0 auto; }
.ublock-ankuendigung h2::after { margin-left: auto !important; margin-right: auto !important; }
.ublock-ankuendigung h2, .ublock-ankuendigung p { margin-left: auto; margin-right: auto; }
.inhalt h2.unterzeile { font-size: clamp(1.2rem, 2vw, 1.6rem); font-weight: 600; color: var(--orange-text); margin-top: .8rem; }
.inhalt h2.unterzeile::after { display: none; }
.inhalt .zwischentitel { font-family: var(--schrift-titel); font-weight: 700; font-size: 1.15rem; line-height: 1.3; color: var(--schwarz); margin: 1.9em 0 .45em; }
.inhalt .zwischentitel:first-child { margin-top: 0; }
.inhalt .zwischentitel + .zwischentitel { margin-top: -.2em; }
.inhalt .zwischentitel strong { font-weight: 700; }
.zeilen { margin: 0 0 1.2rem; }
.zeilen p { margin: 0 0 .15rem; }
.ublock--zwei .zeilen { font-size: 1.1rem; }
/* Faktenkarten (Ladestation: AC-Laden / DC-Schnellladen) im Stil der Kennzahlen: Schwarz, Zahl in Orange */
.fakten-raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 1rem; margin: 1.6rem 0 0; max-width: 34rem; }
.fakt { background: var(--schwarz); color: var(--text-hell); border-radius: var(--radius-karte); padding: 1.2rem 1.3rem 1.3rem; }
.inhalt .fakt p { margin: 0; }
.fakt-titel { font-family: var(--schrift-titel); font-weight: 600; font-size: var(--t-kicker); letter-spacing: .14em; text-transform: uppercase; color: var(--orange); }
.fakt-wert { font-family: var(--schrift-titel); font-weight: 800; font-size: clamp(2rem, 3.4vw, 2.8rem); line-height: 1.05; color: var(--orange); margin: .35rem 0 .2rem !important; font-variant-numeric: tabular-nums; }
.fakt-text { color: #d9d9d9; }
/* Rechtstexte: Dokumentkarte auf Grau, Inhaltsverzeichnis ab 1024 klebt rechts */
.recht-raster { display: grid; gap: 2rem; align-items: start; }
.recht-karte { background: var(--weiss); border-radius: var(--radius-karte); box-shadow: var(--schatten-weiss); padding: clamp(1.4rem, 4vw, 3.25rem); width: 100%; max-width: 880px; margin: 0 auto; min-width: 0; overflow-wrap: anywhere; }
.recht-karte > :last-child { margin-bottom: 0; }
.recht-karte .zwischentitel { scroll-margin-top: calc(56px + 1.5rem); }
.recht-inhalt { display: none; }
@media (min-width: 1024px) {
  .recht-raster--toc { grid-template-columns: minmax(0, 1fr) 300px; gap: 2.5rem; }
  .recht-raster--toc .recht-karte { margin: 0; max-width: none; }
  .recht-inhalt { display: block; position: sticky; top: calc(56px + 1.5rem); background: var(--weiss); border-radius: var(--radius-karte); box-shadow: var(--schatten-weiss); padding: 1.3rem 1.4rem; max-height: calc(100vh - 56px - 3rem); overflow-y: auto; }
  .recht-inhalt ol { list-style: none; margin: 0; padding: 0; counter-reset: punkt; }
  .recht-inhalt li { margin: 0; counter-increment: punkt; }
  .recht-inhalt a { display: flex; gap: .6rem; padding: .45rem 0; border-top: 1px solid var(--linie); color: var(--text); text-decoration: none; font-size: .9375rem; line-height: 1.35; }
  .recht-inhalt a::before { content: counter(punkt, decimal-leading-zero); font-family: var(--schrift-titel); font-weight: 700; color: var(--orange-text); flex: none; min-width: 1.5em; font-variant-numeric: tabular-nums; }
  .recht-inhalt a:hover, .recht-inhalt a:focus-visible { color: var(--orange-text); }
}
@media (min-width: 900px) {
  .ublock-raster--kopf { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 2rem clamp(2.5rem, 5vw, 5rem); align-items: start; }
  .ublock-raster--kopf:has(.ublock-kopf > .dachzeile:first-child) .ublock-text { padding-top: 2.15rem; }   /* Text beginnt auf Höhe der Überschrift, nicht der Dachzeile */
  .ublock-raster--medien { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2.5rem, 5vw, 5rem); align-items: center; }
  .ublock-raster--zwei { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 4vw, 4rem); align-items: start; }
  /* Zwei Bilder neben dem Text (Kampfkunst, Knetwerk): versetzte Collage statt zwei kleiner Kacheln */
  .ublock-medien .galerie:has(> figure:nth-child(2):last-child) { grid-template-columns: repeat(6, 1fr); gap: 0; }
  .ublock-medien .galerie:has(> figure:nth-child(2):last-child) > figure:first-child { grid-column: 1 / 5; grid-row: 1; }
  .ublock-medien .galerie:has(> figure:nth-child(2):last-child) > figure:last-child { grid-column: 3 / 7; grid-row: 1; margin: 34% 6px 0 0; z-index: 1; }
  .ublock-medien .galerie:has(> figure:nth-child(2):last-child) > figure:last-child .galerie-link { box-shadow: 0 0 0 6px var(--weiss), 0 18px 40px rgba(0, 0, 0, .22); }
  .ublock-medien .galerie:has(> figure:nth-child(2):last-child) > figure:first-child .galerie-link { box-shadow: 0 18px 40px rgba(0, 0, 0, .16); }
}

/* --- YOMARO (11.8): Kreidetafeln, Fliesenkarte, Collage, Kissen-Farbpunkte ----------------------- */
.yomaro { --pink: #e6007e; --limette: #9bcf1a; --cyan: #19b6d9; }
.yomaro-intro { display: grid; gap: 1.6rem; align-items: center; margin-bottom: clamp(2rem, 4vw, 3rem); }
.yomaro-intro h2 { margin-bottom: .4rem; }
.yomaro-intro h2::after { display: none; }
.kissen { display: flex; gap: .45rem; margin: 0 0 1rem; }
.kissen i { width: 12px; height: 12px; border-radius: 3px; transform: rotate(-8deg); background: var(--pink); }
.kissen i:nth-child(2) { background: var(--limette); } .kissen i:nth-child(3) { background: var(--orange); } .kissen i:nth-child(4) { background: var(--cyan); }
.yomaro-satz { font-size: 1.25rem; line-height: 1.5; max-width: 30em; margin: 0; }
.fliesen-karte { display: grid; place-items: center; padding: 1.5rem; border-radius: var(--radius-karte); box-shadow: var(--schatten-weiss); border: 1px solid var(--linie); justify-self: center; width: min(100%, 360px);
  background-color: var(--weiss); background-image: linear-gradient(#e8e8e8 1px, transparent 1px), linear-gradient(90deg, #e8e8e8 1px, transparent 1px), linear-gradient(90deg, #e8e8e8 1px, transparent 1px); background-size: 60px 30px, 60px 60px, 60px 60px; background-position: 0 0, 0 0, 30px 30px; }
.yomaro-logo { width: 220px; height: auto; mix-blend-mode: multiply; }
.yomaro-tafeln { display: grid; gap: 1.2rem; }
.kreide { position: relative; color: var(--weiss); border-radius: var(--radius-karte); padding: 1.4rem 1.3rem 1.5rem; border: 3px solid #2a2a2a; box-shadow: 0 18px 40px rgba(0, 0, 0, .25); transition: border-color .3s;
  background-color: #161616; background-image: radial-gradient(rgba(255, 255, 255, .07) 1px, transparent 1.3px), radial-gradient(rgba(255, 255, 255, .04) 1px, transparent 1.3px); background-size: 7px 7px, 11px 11px; background-position: 0 0, 3px 5px; }
.kreide--pink:hover { border-color: var(--pink); } .kreide--limette:hover { border-color: var(--limette); } .kreide--cyan:hover { border-color: var(--cyan); } .kreide--orange:hover { border-color: var(--orange); }
.kreide-titel { font: 700 1.25rem var(--schrift-titel); letter-spacing: .14em; text-transform: uppercase; text-align: center; color: var(--weiss); margin: 0 0 1.1rem; }
.kreide-gruppe { font: 700 .95rem var(--schrift-titel); letter-spacing: .1em; text-transform: uppercase; margin: 1rem 0 .3rem; color: #f3f3f3; }
.kreide-liste { list-style: none; margin: 0; padding: 0; }
.yomaro .inhalt ul.kreide-liste > li::before, .yomaro ul.kreide-liste > li::before, .yomaro ul.becher-reihe > li::before, .yomaro ul.deals > li::before, .yomaro ul.fakten > li::before { display: none; }
.yomaro ul.kreide-liste > li, .yomaro ul.becher-reihe > li, .yomaro ul.deals > li, .yomaro ul.fakten > li { padding-left: 0; max-width: none; }
.kreide-liste li { display: flex; align-items: baseline; gap: .5rem; margin: 0 0 .45rem; font-family: var(--schrift-titel); font-weight: 600; }
.kreide-text { flex: none; max-width: 75%; }
.kreide-text small { display: block; font-weight: 400; font-size: .875rem; color: #cfcfcf; }   /* eigene Zeile (22.10.2026: brach mitten im Namen um) */
.kreide-liste li::after { content: ""; flex: 1; order: 1; border-bottom: 2px dotted rgba(255, 255, 255, .5); transform: translateY(-.3em); }
.kreide-preis { order: 2; flex: none; font-weight: 700; white-space: nowrap; }
.becher-reihe { list-style: none; margin: 0 0 1rem; padding: 0; display: flex; justify-content: space-between; align-items: flex-end; gap: .4rem; }
.becher-reihe li { display: flex; flex-direction: column; align-items: center; gap: .3rem; margin: 0; }
.becher { display: inline-flex; flex-direction: column; align-items: center; position: relative; }
.becher .symbol { width: var(--b, 36px); height: var(--b, 36px); color: var(--weiss); }
.becher-kuerzel { margin-top: 2px; font: 700 .875rem var(--schrift-titel); line-height: 1; letter-spacing: .06em; color: var(--weiss); }   /* Kürzel unter dem Becher (im Becher war es bei 36 px unleserlich) */
.becher-preis { font: 700 .95rem var(--schrift-titel); }
.deals { list-style: none; margin: 1.2rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem; }
@media (max-width: 419.98px) { .deals { grid-template-columns: 1fr; } }   /* unter 420 px reichen drei Spalten nicht (gemessen 360: 9 px Überlauf) */
.deal { display: flex; flex-direction: column; align-items: center; text-align: center; gap: .25rem; margin: 0; min-width: 0; padding: .7rem .4rem .8rem; border: 2px solid rgba(255, 255, 255, .85); border-radius: 8px; }
.deal-titel { font: 700 .875rem var(--schrift-titel); letter-spacing: .08em; text-transform: uppercase; background: var(--weiss); color: var(--schwarz); padding: .15rem .5rem; margin: -.7rem -.4rem .4rem; width: calc(100% + .8rem); border-radius: 5px 5px 0 0; }
.deal-zeile { font: 600 .875rem var(--schrift-titel); }
.deal-preis { margin-top: .4rem; background: var(--weiss); color: var(--schwarz); font: 700 1.05rem var(--schrift-titel); padding: .2rem .6rem; transform: rotate(-2deg); border-radius: 3px; }
.kreide-mitte { display: flex; justify-content: center; margin: .4rem 0 1rem; }
.fakten { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: .6rem .8rem; }
.fakten li { margin: 0; padding: .5rem .7rem; border: 1px dashed rgba(255, 255, 255, .45); border-radius: 8px; font: 600 .95rem var(--schrift-titel); text-align: center; }
.tafel-beleg { margin: 1rem 0 0; font-size: .95rem; color: var(--grau-text); }
.tafel-beleg summary { cursor: pointer; font-family: var(--schrift-titel); font-weight: 600; color: var(--orange-text); }
.tafel-beleg-bilder { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: .8rem; }
.tafel-beleg-bilder img { width: min(100%, 300px); border-radius: var(--radius-bild); }
.yomaro-karten { display: grid; gap: 1.2rem; margin: clamp(2rem, 4vw, 3rem) 0; padding: clamp(1.2rem, 3vw, 2rem); background: var(--grau-flaeche); border-radius: var(--radius-karte); }
.yomaro-karte { background: var(--weiss); border-radius: var(--radius-karte); padding: 1.4rem 1.5rem; box-shadow: var(--schatten-weiss); }
.yomaro-karte h3 { margin-bottom: .6rem; }
.yomaro-karte .fliesstext p { max-width: none; }
.yomaro-collage.galerie { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; margin: 0 0 clamp(2rem, 4vw, 3rem); }
.yomaro-collage figure:first-child { grid-column: 1 / -1; }
.yomaro-collage .galerie-link img { aspect-ratio: 4 / 3; }
.yomaro-unten { display: grid; gap: 1.6rem; align-items: start; }
.yomaro-info { display: grid; gap: 1.2rem; }
.kreide--zeiten table { max-width: none; color: var(--weiss); font-family: var(--schrift-titel); font-weight: 600; }
.kreide--zeiten td { border-bottom: 1px dotted rgba(255, 255, 255, .4); padding: .5rem .6rem .5rem 0; }
.kreide--zeiten td:last-child { text-align: right; padding-right: 0; white-space: nowrap; }
.yomaro-betreiber { background: var(--weiss); border: 1px solid var(--linie); border-radius: var(--radius-karte); padding: 1.3rem 1.4rem; box-shadow: var(--schatten-weiss); }
.yomaro-betreiber .fliesstext p { max-width: none; }
.yomaro-betreiber .knopf { margin-top: .4rem; }
.yomaro .radiospot .kicker { margin-bottom: .4rem; }
@media (min-width: 600px) { .yomaro-collage figure:first-child { grid-column: auto; grid-row: span 2; height: 100%; } .yomaro-collage.galerie { grid-template-columns: 3fr 2fr; } .yomaro-collage figure:first-child .galerie-link { height: 100%; } .yomaro-collage figure:first-child .galerie-link img { aspect-ratio: auto; height: 100%; object-fit: cover; } }
@media (min-width: 760px) { .yomaro-intro { grid-template-columns: 1fr auto; gap: 3rem; } .yomaro-karten { grid-template-columns: 1fr 1fr; } .yomaro-unten { grid-template-columns: minmax(280px, 340px) 1fr; gap: 2.5rem; } }
@media (min-width: 1024px) { .yomaro-tafeln { grid-template-columns: 1.25fr 1fr 1fr; } .yomaro-collage.galerie { grid-template-columns: 5fr 4fr; } }

/* --- Weiter-Band „Mehr im XXL“ (11.4) ------------------------------------------------------- */
.weiter-kopf { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem 2rem; margin-bottom: clamp(1.5rem, 3vw, 2.5rem); }
.weiter-kopf h2 { margin-bottom: 0; }
.weiter-raster { display: grid; gap: 1rem; }
@media (min-width: 480px) { .weiter-raster { grid-template-columns: repeat(3, 1fr); gap: 1.2rem; } .weiter-raster .bereich-name .h3 { font-size: 1.1rem; } }
@media (min-width: 760px) { .weiter-raster .bereich-name .h3 { font-size: 1.25rem; } }

/* --- Reservierung (7.7) ------------------------------------------------------------------- */
.reservierung-einleitung { max-width: 68ch; margin-bottom: clamp(2rem, 4vw, 3rem); }
.reservierung-einleitung .hinweis { max-width: 68ch; }
.reservierung-einleitung.ublock-raster { max-width: none; }
.reservierung-einleitung .hinweis { margin-bottom: 0; }
.reservierung-bereich { padding: clamp(1.5rem, 3vw, 2.5rem) 0; border-top: 1px solid var(--linie); }
.reservierung-karten { display: grid; gap: 1.4rem; }
.reskarte { background: var(--weiss); border: 1px solid var(--linie); border-radius: var(--radius-karte); overflow: hidden; display: flex; flex-direction: column; box-shadow: var(--schatten-weiss); transition: transform .3s, box-shadow .3s; }
.reskarte:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(0, 0, 0, .14); }
.reskarte-bild { position: relative; aspect-ratio: 16 / 10; background: var(--anthrazit); overflow: hidden; }
.reskarte-bild img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
.reskarte:hover .reskarte-bild img { transform: scale(1.04); }
.reskarte-icon { position: absolute; inset: 0; display: block; color: var(--orange); background: var(--anthrazit) var(--muster-linien); }   /* gleiches Muster wie .bereich--ohne-foto */
.reskarte-icon .symbol { position: absolute; left: 1rem; top: 1rem; width: 28px; height: 28px; }
.reskarte-etikett { position: absolute; left: 0; bottom: 12px; padding: .35rem 1rem .35rem .9rem; background: var(--orange); color: var(--schwarz); font: 600 .875rem var(--schrift-titel); letter-spacing: .1em; text-transform: uppercase; clip-path: polygon(0 0, 100% 0, calc(100% - 9px) 100%, 0 100%); }
.reskarte-text { padding: 1.2rem 1.3rem 1.3rem; display: flex; flex-direction: column; gap: .6rem; flex: 1; }
.reskarte-text h3 { margin: 0; }
.reskarte-hinweis { display: flex; align-items: center; gap: .4rem; margin: 0; font-size: .9rem; color: var(--grau-text); }
.reskarte-hinweis .symbol { color: var(--orange-tief); }
.reskarte-text .knopf { margin-top: auto; text-align: center; }
.telefonkarte { margin-top: clamp(2rem, 4vw, 3rem); background: var(--schwarz); color: var(--text-hell); border-radius: var(--radius-karte); padding: clamp(1.5rem, 3vw, 2.25rem); display: grid; gap: 1.2rem; align-items: center; }
.telefonkarte-icon { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--orange); color: var(--schwarz); }
.telefonkarte .kicker { margin-bottom: .3rem; }
.telefonkarte-text { margin: 0; font-size: 1.15rem; color: var(--weiss); }
@media (min-width: 480px) { .reservierung-karten { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 760px) { .telefonkarte { grid-template-columns: auto 1fr auto; gap: 1.6rem; } }
@media (min-width: 1024px) { .reservierung-karten { grid-template-columns: repeat(3, 1fr); gap: 1.6rem; } }
/* 22.10.2026: keine halb leeren Reihen. 480 bis 1023: ungerade letzte Karte über beide Spalten, Bild links.
   Ab 1024: kleine Gruppen nebeneinander (Spaltenzahl = Kartenzahl), bei 5 Karten 3 + 2 breite. Karte ohne Foto:
   Icon groß in der Mitte statt klein in der Ecke. */
.reskarte-icon .symbol { left: 50%; top: 50%; transform: translate(-50%, -50%); width: 72px; height: 72px; }
@media (min-width: 480px) and (max-width: 1023.98px) {
  .reservierung-karten > .reskarte:last-child:nth-child(odd) { grid-column: 1 / -1; flex-direction: row; }
  .reservierung-karten > .reskarte:last-child:nth-child(odd) .reskarte-bild { flex: 0 0 50%; aspect-ratio: auto; min-height: 200px; }
}
@media (min-width: 1024px) {
  .reservierung-gruppen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 1.6rem; }
  .reservierung-bereich { grid-column: 1 / -1; }
  .reservierung-bereich--n1 { grid-column: span 1; }
  .reservierung-bereich--n2 { grid-column: span 2; }
  .reservierung-bereich--n1 .reservierung-karten { grid-template-columns: 1fr; }
  .reservierung-bereich--n2 .reservierung-karten { grid-template-columns: repeat(2, 1fr); }
  .reservierung-bereich--n5 .reservierung-karten { grid-template-columns: repeat(6, 1fr); }
  .reservierung-bereich--n5 .reskarte { grid-column: span 2; }
  .reservierung-bereich--n5 .reskarte:nth-child(n+4) { grid-column: span 3; }
  .reservierung-bereich--n5 .reskarte:nth-child(n+4) .reskarte-bild { aspect-ratio: 21 / 9; }
}

/* --- Jobs --------------------------------------------------------------------------------- */
.jobs-raster { display: grid; gap: 2rem; align-items: start; }
.jobs-bild figure { margin: 0; }
.jobs-bild img { border-radius: var(--radius-bild); box-shadow: 0 18px 40px rgba(0, 0, 0, .16); }
@media (min-width: 760px) { .jobs-raster { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(2rem, 4vw, 4rem); } .jobs-raster .tafel { position: sticky; top: calc(56px + 1.5rem); } }
.jobs-bild img { max-width: 100%; width: 460px; }   /* 22.10.2026: Plakat war 650 × 920 px und füllte den Bildschirm */
.inhalt ul.tafel-liste > li { padding-left: 0; }
.inhalt ul.tafel-liste > li::before { display: none; }   /* 22.10.2026: Strich der Textlisten stand doppelt vor dem Icon */

/* --- Galerie + Lightbox ------------------------------------------------------------------- */
.galerie-zaehler { color: var(--grau-text); margin-bottom: 1rem; }
.album { padding: clamp(1.5rem, 3vw, 2.5rem) 0; border-top: 1px solid var(--linie); scroll-margin-top: calc(var(--kopf-h) + 1rem); }
.album-zahl { font-family: var(--schrift-text); font-size: .9rem; font-weight: 400; color: var(--grau-text); margin-left: .4rem; }
.galerie { display: grid; grid-template-columns: repeat(2, 1fr); gap: .6rem; margin: 1rem 0; }
.galerie figure { margin: 0; min-width: 0; }
.galerie-link { display: block; border-radius: var(--radius-bild); overflow: hidden; background: var(--grau-flaeche); cursor: zoom-in; position: relative; isolation: isolate; transform: translateZ(0); }   /* isolation: Zoom beim Hover bleibt im Rahmen (Chrome, 21.10.2026) */
.galerie-link img { width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .5s cubic-bezier(.2, .7, .2, 1); box-shadow: none !important; border-radius: 0 !important; }
.galerie-link::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 70%, rgba(0, 0, 0, .25)); opacity: 0; transition: opacity .3s; }
.galerie-link:hover img, .galerie-link:focus-visible img { transform: scale(1.05); }
.galerie-link:hover::after { opacity: 1; }
@media (min-width: 600px) { .galerie { grid-template-columns: repeat(3, 1fr); gap: .8rem; } }
/* Galerien mit genau 2 Bildern (Kampfkunst, Knetwerk): zwei gleich breite Spalten statt leerer dritter Spalte */
@media (min-width: 600px) { .galerie:has(> figure:nth-child(2):last-child) { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .galerie--album { grid-template-columns: repeat(4, 1fr); } }
/* Galerien ohne Lücke in der letzten Reihe (22.10.2026; Sauna 9 Bilder stand mit 1 Bild allein in der Reihe): je nach
   Bildzahl und Spaltenzahl wird das erste Bild breit (2 Spalten) oder groß (2 × 2), bei Bedarf auch das letzte breit.
   Breite Bilder bekommen das Seitenverhältnis 8:3, damit die Reihe ihre Höhe behält. Nur CSS (Mengenabfragen). */
@media (max-width: 599.98px) {
  .galerie > figure:first-child:nth-last-child(2n+3) { grid-column: span 2; }
  .galerie > figure:first-child:nth-last-child(2n+3) .galerie-link img { aspect-ratio: 8 / 3; }
}
@media (min-width: 600px) {
  .galerie:not(.galerie--album) > figure:first-child:nth-last-child(3n+4), .galerie:not(.galerie--album) > figure:last-child:nth-child(3n+4),
  .galerie:not(.galerie--album) > figure:first-child:nth-last-child(3n+5) { grid-column: span 2; }
  .galerie:not(.galerie--album) > figure:first-child:nth-last-child(3n+4) .galerie-link img, .galerie:not(.galerie--album) > figure:last-child:nth-child(3n+4) .galerie-link img,
  .galerie:not(.galerie--album) > figure:first-child:nth-last-child(3n+5) .galerie-link img { aspect-ratio: 8 / 3; }
}
@media (min-width: 600px) and (max-width: 1023.98px) {
  .galerie--album > figure:first-child:nth-last-child(3n+4), .galerie--album > figure:last-child:nth-child(3n+4), .galerie--album > figure:first-child:nth-last-child(3n+5) { grid-column: span 2; }
  .galerie--album > figure:first-child:nth-last-child(3n+4) .galerie-link img, .galerie--album > figure:last-child:nth-child(3n+4) .galerie-link img, .galerie--album > figure:first-child:nth-last-child(3n+5) .galerie-link img { aspect-ratio: 8 / 3; }
}
@media (min-width: 1024px) {
  .galerie--album > figure:first-child:nth-last-child(4n+5), .galerie--album > figure:only-child { grid-column: span 2; grid-row: span 2; }
  .galerie--album > figure:first-child:nth-last-child(4n+6), .galerie--album > figure:last-child:nth-child(4n+6), .galerie--album > figure:first-child:nth-last-child(4n+3) { grid-column: span 2; }
  .galerie--album > figure:first-child:nth-last-child(4n+6) .galerie-link img, .galerie--album > figure:last-child:nth-child(4n+6) .galerie-link img, .galerie--album > figure:first-child:nth-last-child(4n+3) .galerie-link img { aspect-ratio: 8 / 3; }
}
.lightbox { border: 0; padding: 0; background: transparent; max-width: 100vw; max-height: 100vh; width: 100vw; height: 100vh; color: var(--weiss); }
.lightbox::backdrop { background: rgba(0, 0, 0, .94); }
.lightbox-figur { margin: 0; width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 3.5rem 1rem 3rem; gap: .8rem; }
.lightbox-bild { max-width: 100%; max-height: calc(100vh - 7rem); width: auto; height: auto; object-fit: contain; border-radius: var(--radius-knopf); box-shadow: 0 20px 60px rgba(0, 0, 0, .6); opacity: 0; transform: scale(.98); transition: opacity .3s ease-out, transform .3s ease-out; }
.lightbox-bild.ist-da { opacity: 1; transform: none; }
.lightbox-text { font-size: .9rem; color: #d9d9d9; text-align: center; max-width: 60ch; min-height: 1.4em; margin: 0; }
.lightbox-knopf { position: absolute; width: 48px; height: 48px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .12); color: var(--weiss); display: grid; place-items: center; cursor: pointer; transition: background .2s, color .2s; }
.lightbox-knopf:hover, .lightbox-knopf:focus-visible { background: var(--orange); color: var(--schwarz); }
.lightbox-zu { top: .8rem; right: .8rem; }
.lightbox-zurueck { left: .6rem; top: 50%; transform: translateY(-50%); }
.lightbox-weiter { right: .6rem; top: 50%; transform: translateY(-50%); }
.lightbox-zaehler { position: absolute; left: 1rem; top: 1.2rem; margin: 0; font: 600 .9rem var(--schrift-titel); letter-spacing: .08em; color: var(--orange); }
@media (max-width: 600px) { .lightbox-zurueck, .lightbox-weiter { top: auto; bottom: .6rem; transform: none; } }

/* --- 4bowl-Baustein (7.8) ----------------------------------------------------------------- */
.buchung-buehne { display: grid; gap: 1.5rem; margin: 1.5rem 0 .8rem; align-items: start; }
.buchung { background: var(--weiss); border-radius: var(--radius-karte); border-top: 5px solid var(--orange); box-shadow: 0 18px 40px rgba(0, 0, 0, .14); overflow: hidden; transition: box-shadow .3s; }
.buchung:focus-within { box-shadow: 0 0 0 3px rgba(244, 161, 23, .5), 0 18px 40px rgba(0, 0, 0, .14); }
.buchung-rahmen { display: block; width: 100%; height: 760px; border: 0; background: var(--grau-flaeche); }
.buchung-tafel { align-self: start; display: flex; flex-direction: column; position: sticky; top: calc(56px + 1.5rem); }
.buchung-tafel .buchung-tel { margin: .6rem 0 0; padding-top: 1.2rem; border-top: 1px solid rgba(255, 255, 255, .14); }
.buchung-tel .knopf { margin-top: .6rem; }
/* Anbieterhinweis unter dem Kalender, bewusst sehr klein (Nutzer 21.10.2026, Ausnahme von der 14px-Regel);
   steht außerhalb der Bühne und beginnt damit an derselben linken Kante wie die Kalenderkarte */
.buchung-anbieter { font-size: .75rem; line-height: 1.4; margin: .4rem 0 0; padding: 0; }
.buchung-anbieter a { color: var(--grau-text); text-decoration-color: var(--linie); }
.buchung-anbieter a:hover, .buchung-anbieter a:focus-visible { color: var(--schwarz); text-decoration-color: currentColor; }
@media (min-width: 760px) { .buchung-rahmen { height: var(--hoehe, 900px); } }
@media (min-width: 1024px) { .buchung-buehne { grid-template-columns: minmax(0, 2fr) minmax(300px, 1fr); } }

/* --- Fuß (7.9) ---------------------------------------------------------------------------- */
.fuss { background: var(--schwarz); color: #cfcfcf; font-size: .95rem; margin-top: 0; border-top: 4px solid var(--orange); }
.fuss a { color: var(--weiss); text-decoration-color: rgba(255, 255, 255, .35); text-underline-offset: .2em; }
.fuss a:hover { color: var(--orange); text-decoration-color: var(--orange); }
.fuss-kopf { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.2rem 2rem; padding-top: clamp(2rem, 4vw, 3rem); padding-bottom: 1.6rem; border-bottom: 1px solid rgba(255, 255, 255, .12); }
.fuss-logo img { height: 56px; width: auto; }
.fuss-kontakt { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem 1.6rem; }
.fuss-kontakt li { margin: 0; display: flex; align-items: center; gap: .5rem; }
.fuss-kontakt a { text-decoration: none; display: inline-flex; align-items: center; gap: .5rem; }
.fuss-kontakt .symbol { color: var(--orange); }
.fuss-raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 2rem 1.5rem; padding-top: 2.2rem; padding-bottom: clamp(2rem, 4vw, 3rem); }
.fuss-titel { color: var(--orange); font-family: var(--schrift-titel); font-weight: 600; font-size: var(--t-kicker); letter-spacing: .16em; text-transform: uppercase; margin: 0 0 .9rem; }
.fuss-liste { list-style: none; margin: 0; padding: 0; }
.fuss-liste li { margin-bottom: .45em; }
.fuss .zeiten { display: grid; grid-template-columns: auto 1fr; gap: .2rem 1rem; margin: 0; }
.fuss .zeiten dd { margin: 0; }
.fuss-zeile { border-top: 1px solid rgba(255, 255, 255, .12); }
.fuss-zeile-innen { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .4rem 2rem; padding-top: 1rem; padding-bottom: 1rem; font-size: .875rem; color: #a8a8a8; }
.fuss-zeile p { margin: 0; }

/* --- Sprungleiste (11.9 Punkt 4): klebt unter dem Sticky-Kopf (56 px), Chips mit Icon, aktiv Orange ------------ */
.sprung-leiste { position: sticky; top: 56px; z-index: 85; background: var(--schwarz); border-bottom: 1px solid rgba(255, 255, 255, .08); box-shadow: 0 8px 24px rgba(0, 0, 0, .25); margin-top: calc(var(--abstand) * .8); }
.sprung-leiste .chips-liste { padding: 6px 7px; margin: 0 -7px; gap: .4rem; }
.chips--dunkel::before { background: linear-gradient(90deg, var(--schwarz), rgba(17, 17, 17, 0)); }
.chips--dunkel::after { background: linear-gradient(270deg, var(--schwarz), rgba(17, 17, 17, 0)); }
.chip--dunkel { min-height: 32px; padding: 0 .9rem 0 .7rem; border-color: rgba(255, 255, 255, .18); background: transparent; color: #d9d9d9; font-size: .875rem; }
.chip--dunkel .symbol { color: var(--orange); width: 1rem; height: 1rem; }
.chip--dunkel:hover, .chip--dunkel:focus-visible { background: var(--anthrazit); border-color: var(--orange); color: var(--weiss); transform: none; box-shadow: none; }
.chip--dunkel.aktiv { background: var(--orange); border-color: var(--orange); color: var(--schwarz); }
.chip--dunkel.aktiv .symbol { color: var(--schwarz); }
.sprung-leiste + .block { padding-top: var(--abstand); }
@media (max-width: 759.98px) { .sprung-leiste .chip--dunkel { min-height: 44px; } .sprung-leiste .chips-liste { padding: 4px 7px; } }
/* Zielkante beim Klick (16 px unter dem Kopf plus Sprungleiste) berechnet seite.js; Hash-Aufrufe nutzen scroll-padding-top */

/* --- Mobile Reservieren-Leiste (11.7): unter 760, fest unten, 56 px; sichtbar setzt seite.js ------- */
.mobil-leiste { display: none; }
@media (max-width: 759.98px) {
  .mobil-leiste { position: fixed; left: 0; right: 0; bottom: 0; z-index: 80; height: 56px; padding: 6px 12px 6px 16px; display: flex; align-items: center; gap: 10px; background: var(--schwarz); box-shadow: 0 -10px 30px rgba(0, 0, 0, .35); transform: translateY(100%); visibility: hidden; transition: transform .3s ease, visibility 0s linear .3s; }
  html:not(.chat-offen) body.leiste-sichtbar:not(.menue-offen) .mobil-leiste { transform: none; visibility: visible; transition: transform .3s ease, visibility 0s linear 0s; }
  .mobil-leiste-knopf { flex: 1; min-height: 44px; font-size: 1rem; }
  .mobil-leiste-tel { display: grid; place-items: center; width: 44px; height: 44px; flex: none; border-radius: 50%; background: var(--anthrazit); border: 2px solid rgba(255, 255, 255, .35); color: var(--weiss); text-decoration: none; }
  .mobil-leiste-tel .symbol { width: 1.3rem; height: 1.3rem; }
  .mobil-leiste-tel:hover, .mobil-leiste-tel:focus-visible { border-color: var(--orange); color: var(--orange); }
  html:not(.chat-offen) body.leiste-sichtbar:not(.menue-offen) { --chat-unten: 76px; }   /* Knopf über der 56-px-Leiste (11.7) */
}

/* --- Bewegung (8, 11): einmaliges Einblenden, Mosaik gestaffelt, Bühne, Laser, Leuchten; nur transform/opacity -- */
@media screen and (prefers-reduced-motion: no-preference) {
  /* Ken Burns (11.1): scale 1 → 1.08 über 14 s, alternate, je Kachel 2 s versetzt; Hover pausiert; nicht unter 760 */
  @media (min-width: 760px) {
    .mosaik-foto { animation: kenburns 14s ease-in-out calc(var(--n, 0) * 2s) infinite alternate; }
    .buehne .buehne-motiv:nth-child(2) .mosaik-foto { animation-delay: 1s; }
    .buehne .buehne-motiv:nth-child(3) .mosaik-foto { animation-delay: 2s; }
    .mosaik-kachel a:hover .mosaik-foto { animation-play-state: paused; }
  }
  @media (min-width: 1024px) {
    .laser-linie { animation: laserlauf 7.4s linear 2s infinite; }
    .laser-linie--2 { animation: laserlauf 10.4s linear 5.5s infinite; }
  }
  .buehne .etikett.puls { animation: etikettpuls .7s ease-out; }
  .knopf--leuchten { animation: leuchten 2.4s ease-in-out infinite; }
  .knopf--leuchten::after { animation: lichtstreifen 6s linear 1.5s infinite; }
  html.js .schnell-titel::after { animation: wachsen .7s ease-out 1.15s both; }
  html.js .einblenden { opacity: 0; transform: translateY(28px); transition: opacity .75s cubic-bezier(.2, .7, .2, 1), transform .75s cubic-bezier(.2, .7, .2, 1); }   /* Runde 6: weiter und weicher */
  html.js .einblenden.in { opacity: 1; transform: none; }
  html.js .verzoegert.einblenden { transition-delay: .12s; }
  html.js .verzoegerung-1 { transition-delay: .08s; }
  html.js .verzoegerung-2 { transition-delay: .16s; }
  html.js .verzoegerung-3 { transition-delay: .24s; }
  html.js .bildkarte.einblenden.in, html.js .abschnitt-medien.einblenden.in { transform: none; }
  html.js .held-kicker { animation: auftauchen .5s ease-out .05s both; }
  html.js .held-h1 { animation: auftauchen .55s ease-out .18s both; }
  html.js .held-absatz { animation: auftauchen .55s ease-out .32s both; }
  html.js .held .knoepfe { animation: auftauchen .5s ease-out .45s both; }
  html.js .mosaik-kachel { animation: auftauchen .6s cubic-bezier(.2, .7, .2, 1) calc(.25s + var(--n, 0) * 60ms) both; }
  html.js .schnell-karte { animation: tafel .7s cubic-bezier(.2, .7, .2, 1) .55s both; }
  .anfahrt-ring { animation: puls 2.6s ease-out infinite; }
  .anfahrt-ring--2 { animation-delay: .6s; }
}
@keyframes auftauchen { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes tafel { from { opacity: 0; transform: translateY(32px); } to { opacity: 1; transform: none; } }
@keyframes puls { 0% { transform: translate(-50%, -50%) scale(.6); opacity: .9; } 100% { transform: translate(-50%, -50%) scale(2.2); opacity: 0; } }
@keyframes kenburns { from { transform: scale(1); } to { transform: scale(1.08); } }
/* Linie läuft in 1,4 s (18,9 % von 7,4 s bzw. 13,5 % von 10,4 s) quer durch, dann Pause 6 bzw. 9 s */
@keyframes laserlauf {
  0% { transform: rotate(-18deg) translateY(-60vh); opacity: 0; }
  2% { opacity: 1; }
  17% { opacity: 1; }
  18.9% { transform: rotate(-18deg) translateY(60vh); opacity: 0; }
  100% { transform: rotate(-18deg) translateY(60vh); opacity: 0; }
}
@keyframes etikettpuls { 0% { transform: none; } 30% { transform: translateY(-4px) scale(1.06); background: var(--orange); color: var(--schwarz); } 100% { transform: none; } }
@keyframes leuchten { 0%, 100% { box-shadow: 0 0 0 0 rgba(244, 161, 23, 0); } 50% { box-shadow: 0 0 18px 4px rgba(244, 161, 23, .45); } }
@keyframes lichtstreifen { 0% { transform: translateX(-220%) skewX(-18deg); } 15% { transform: translateX(520%) skewX(-18deg); } 100% { transform: translateX(520%) skewX(-18deg); } }
@keyframes wachsen { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes streifen-auf { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .knopf--leuchten { box-shadow: 0 0 12px 2px rgba(244, 161, 23, .35); }   /* Leuchtrand statisch (11.7) */
  .laser { display: none; }
}

/* Logo-Kacheln (22.10.2026, Tigerpadel): weißer Grund, Logo ganz sichtbar; Name unten wie bei Fotokacheln */
.bereich-logo { display: grid; place-items: center; height: 100%; background: var(--weiss); padding: .6rem; }
.bereich-logo img { width: 100%; height: 100%; max-height: 72px; object-fit: contain; }
@media (min-width: 600px) {
  .bereich-logo { position: absolute; inset: 0; width: 100%; height: 100%; padding: 1.6rem 3.6rem 4.2rem 1.6rem; }   /* rechts Platz für den Pfeilkreis */
  .bereich-logo img { max-height: none; transition: transform .5s cubic-bezier(.2, .7, .2, 1); }
  .bereich--logo:hover .bereich-logo img, .bereich--logo:focus-visible .bereich-logo img { transform: scale(1.04); }
  .bereich--logo::after { background: linear-gradient(180deg, rgba(0, 0, 0, 0) 58%, rgba(0, 0, 0, .82) 100%); }
}
.streifen-logo { position: absolute; inset: 0; display: grid; place-items: center; background: var(--weiss); padding: .5rem .6rem 1.8rem; }
.streifen-logo img { width: 100%; height: 100%; object-fit: contain; }

/* Dartpfeil (22.10.2026): fliegt einmal quer durch den Dart-Abschnitt (JS legt .dartbahn an), dann weg.
   Größe relativ zur Breite (70 bis 220 px), Bahn außerhalb des Seitenflusses, kein seitlicher Überlauf. */
.abschnitt--dart { position: relative; overflow: hidden; }
.dartbahn { position: absolute; left: 0; right: 0; top: 30%; height: 0; pointer-events: none; z-index: 3; }
.dartpfeil { position: absolute; left: 0; top: 0; width: clamp(70px, 14vw, 220px); height: auto; transform: translate(-120%, 0) rotate(0deg); filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .35)); }
.dartbahn.fliegt .dartpfeil { animation: dartflug .85s cubic-bezier(.35, .05, .55, 1) forwards; }
@keyframes dartflug {
  0%   { transform: translate(-120%, 40px) rotate(-5deg); }
  50%  { transform: translate(calc(50vw - 50%), -14px) rotate(0deg); }
  100% { transform: translate(calc(100vw + 20%), 30px) rotate(5deg); }
}
@media (prefers-reduced-motion: reduce) { .dartbahn { display: none; } }

/* Ladestation (22.10.2026): Stecker mit Strompulsen im Kopfband, Ladebalken in den Leistungskarten */
.seitenkopf-bild--strom { background: var(--anthrazit) var(--muster-linien); }
.strom-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.strom-kabel { fill: none; stroke: #2e2e2e; stroke-width: 14; stroke-linecap: round; }
.strom-puls { fill: none; stroke: var(--orange); stroke-width: 4; stroke-linecap: round; stroke-dasharray: 18 70; animation: stromfluss 1.6s linear infinite; filter: drop-shadow(0 0 6px rgba(244, 161, 23, .9)); }
.strom-stecker rect, .strom-stecker path { fill: #1a1a1a; stroke: #3a3a3a; stroke-width: 2; }
.strom-pins circle { fill: #111; stroke: var(--orange); stroke-width: 2; }
.strom-blitz { fill: var(--orange); opacity: .9; animation: blitzpuls 2.4s ease-in-out infinite; transform-origin: 520px 80px; }
@keyframes stromfluss { to { stroke-dashoffset: -88; } }
@keyframes blitzpuls { 0%, 100% { opacity: .55; transform: scale(.94); } 50% { opacity: 1; transform: scale(1.04); } }
.fakten-raster .fakt { position: relative; overflow: hidden; padding-bottom: 1.9rem; }
.fakten-raster .fakt::after { content: ""; position: absolute; left: 1.3rem; right: 1.3rem; bottom: 1rem; height: 8px; border-radius: 4px;
    background: rgba(255, 255, 255, .12) linear-gradient(90deg, var(--orange), #ffd27a) no-repeat; background-size: 0% 100%; }
.fakten-raster.laedt .fakt::after { animation: ladebalken 2.2s cubic-bezier(.3, .6, .3, 1) forwards; }
.fakten-raster.laedt .fakt:nth-child(1)::after { --voll: 44%; }
.fakten-raster.laedt .fakt:nth-child(2)::after { --voll: 100%; animation-duration: 1.4s; }   /* Schnellladen ist schneller voll */
@keyframes ladebalken { to { background-size: var(--voll, 100%) 100%; } }
@media (prefers-reduced-motion: reduce) {
  .strom-puls, .strom-blitz { animation: none; }
  .fakten-raster .fakt:nth-child(1)::after { background-size: 44% 100%; }
  .fakten-raster .fakt:nth-child(2)::after { background-size: 100% 100%; }
}

/* YOMARO Topping-Regen (22.10.2026): Streusel fallen beim Hereinscrollen einmal und bleiben am Rand der Einleitung liegen */
.yomaro-intro { position: relative; padding-bottom: 2.6rem; }
.streusel { position: absolute; left: 0; right: 0; top: -1rem; bottom: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.yomaro-intro-text, .yomaro-intro .fliesen-karte { position: relative; z-index: 1; }
.streusel i { position: absolute; left: var(--x); bottom: var(--tief); width: 14px; height: 5px; border-radius: 3px;
    transform: rotate(var(--dreh)); opacity: .9; }
.streusel-pink { background: var(--pink); } .streusel-limette { background: var(--limette); }
.streusel-orange { background: var(--orange); } .streusel-cyan { background: var(--cyan); }
.streusel.regnet i { animation: streusel-fall 1.1s cubic-bezier(.45, .05, .7, 1) var(--verz) both; }
@keyframes streusel-fall {
  0%   { transform: translateY(-360px) rotate(calc(var(--dreh) - 220deg)); opacity: 0; }
  12%  { opacity: 1; }
  82%  { transform: translateY(4px) rotate(var(--dreh)); }
  100% { transform: translateY(0) rotate(var(--dreh)); opacity: .9; }
}
.js-streusel .streusel:not(.regnet) i { opacity: 0; }   /* mit JS erst unsichtbar, dann fallen sie */
@media (prefers-reduced-motion: reduce) { .js-streusel .streusel:not(.regnet) i { opacity: .9; } .streusel.regnet i { animation: none; } }

/* bowlxxling-neu v0.1.0 (23.10.2026): Das Originallogo BowlXXLing hat dunkle Schrift (#1d1d1b) und keine Fassung für
   dunklen Grund. Bis zur Entscheidung (UEBERGABE_DESIGN.md) liegt es auf einer hellen Fläche (Style Guide A2:
   „sonst eine Fläche unterlegen“). Querformat 240 × 32: Höhe kleiner als beim XXL-Logo. */
.logo--platte { background: #fff; padding: 8px 12px; border-radius: 6px; min-height: 44px; box-sizing: border-box; }   /* 44 px: Tap-Ziel (Messung 23.10.2026) */
.logo.logo--platte img, .fuss-logo.logo--platte img { height: 22px; width: auto; }
@media (min-width: 1024px) { .logo.logo--platte img { height: 30px; } }
body.gescrollt .logo.logo--platte img { height: 20px; }
.fuss-logo.logo--platte { display: inline-flex; align-items: center; }
/* --- Highlights (bowlxxling-neu v0.2.0, Schritt 2, 23.10.2026, Fable) ------------------------------------------
   Vier Fototafeln Disco-Bowling, Unreal Bowling, Kindergeburtstag, Brunchbowling auf Hellgrau, dazu die Zeile Sportsbar.
   Foto füllt die Tafel (Hover: Zoom 5 %), Verlauf nach unten, Text unten links; die ganze Tafel ist über den Titel-Link
   klickbar (::after), die Knöpfe und der Video-Link der Unreal-Tafel liegen darüber (z-index). Brunch hat kein Foto im
   Bestand: schwarze Tafel mit Linienmuster und Besteck-Icon, nichts blinkt (Design-System 1, 11.7). Texte wörtlich.
   Raster ab 760: 12 Spalten, Disco 5 / Unreal 7, Kindergeburtstag 7 / Brunch 5, Sportsbar über die volle Breite. */
.highlights-raster { display: grid; gap: 1rem; }
.highlight { position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: clamp(300px, 72vw, 420px); border-radius: var(--radius-karte); overflow: hidden; background: var(--anthrazit); color: var(--text-hell); box-shadow: var(--schatten-foto); isolation: isolate; text-decoration: none; transition: transform .4s cubic-bezier(.2, .7, .2, 1), box-shadow .4s; }
.highlight-foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform .8s cubic-bezier(.2, .7, .2, 1); }
.highlight:not(.highlight--tafel):not(.highlight--zeile)::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(17, 17, 17, .06) 0%, rgba(17, 17, 17, .42) 40%, rgba(17, 17, 17, .94) 100%); }
.highlight-innen { padding: clamp(1.2rem, 3vw, 2rem); display: grid; gap: .55rem; }   /* 27.10.2026 ohne position: relative, sonst deckt a::after nur den Textkasten statt der ganzen Kachel */
.highlight-innen .kicker { margin: 0 0 .15rem; }
.highlight-titel { margin: 0; font-size: clamp(1.55rem, 2.6vw, 2.25rem); line-height: 1.08; color: var(--weiss); }
.highlight-titel a { color: inherit; text-decoration: none; }
.highlight-titel a::after { content: ""; position: absolute; inset: 0; z-index: 1; }   /* ganze Tafel klickbar */
.highlight-titel a:focus-visible { outline: none; }
.highlight:has(.highlight-titel a:focus-visible), .highlight--zeile:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; }
.highlight-text { margin: 0; color: #e6e6e6; font-size: 1.05rem; line-height: 1.5; max-width: 38em; }
.highlight-text p, .highlight-text .hervorhebung { margin: 0; font-size: inherit; line-height: inherit; }
.highlight-knoepfe { position: relative; z-index: 2; margin: .5rem 0 0; gap: .6rem .8rem; }
.highlight-links { position: relative; z-index: 2; margin: 0; }
.highlight-links .video-link { display: inline-flex; align-items: center; gap: .45rem; min-height: 44px; color: var(--weiss); font: 600 .95rem var(--schrift-titel); text-decoration: underline; text-decoration-color: var(--orange); text-underline-offset: .2em; }
.highlight-links .video-link:hover, .highlight-links .video-link:focus-visible { color: var(--orange); }
.highlight-links .symbol { color: var(--orange); }
.highlight-pfeil { position: absolute; right: 1rem; top: 1rem; z-index: 2; width: 44px; height: 44px; border-radius: 50%; background: var(--orange); color: var(--schwarz); display: grid; place-items: center; transition: transform .3s; pointer-events: none; box-shadow: 0 6px 16px rgba(0, 0, 0, .3); }
.highlight-pfeil .symbol { width: 1.3rem; height: 1.3rem; }
.highlight-logo { position: absolute; right: 1rem; top: 1rem; z-index: 2; width: min(44%, 210px); background: var(--weiss); border-radius: var(--radius-bild); padding: .45rem .7rem; box-shadow: 0 8px 20px rgba(0, 0, 0, .3); pointer-events: none; }
.highlight-logo img { display: block; width: 100%; height: auto; }
.highlight:hover, .highlight:focus-within { transform: translateY(-4px); box-shadow: 0 24px 50px rgba(0, 0, 0, .4); }
.highlight:hover .highlight-foto, .highlight:focus-within .highlight-foto { transform: scale(1.05); }
.highlight:hover .highlight-pfeil { transform: scale(1.1); }
/* Unreal: Text oben, Verlauf von oben, Logo-Plakette unten rechts; so bleibt der Feuerschweif (untere Bildhälfte) frei */
.highlight--unreal { justify-content: flex-start; }
.highlight--unreal::before { background: linear-gradient(180deg, rgba(17, 17, 17, .94) 0%, rgba(17, 17, 17, .55) 55%, rgba(17, 17, 17, .12) 100%) !important; }
.highlight--unreal .highlight-foto { object-position: 50% 75%; }
.highlight--unreal .highlight-logo { top: auto; bottom: 1rem; }
@media (max-width: 759.98px) {   /* unter 760 steht die Plakette als erstes Element oben rechts, sonst läge sie auf dem Video-Link */
  .highlight--unreal .highlight-logo { position: relative; inset: auto; width: 150px; margin: 1.2rem 1.2rem 0 auto; }
}
/* Brunch: Tafel ohne Foto */
.highlight--tafel { background: var(--schwarz) var(--muster-linien); justify-content: center; min-height: 240px; }
.highlight--tafel .highlight-innen { gap: 1rem; }
.highlight-icon { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--orange); color: var(--schwarz); }
.highlight-icon .symbol { width: 1.7rem; height: 1.7rem; }
.highlight-band { margin: 0; font-size: 1.1rem; line-height: 1.5; color: #e6e6e6; }
.highlight-band strong { display: block; font: 700 clamp(1.5rem, 2.4vw, 2rem)/1.1 var(--schrift-titel); color: var(--weiss); margin-bottom: .5rem; }
/* Sportsbar als Zeile: Foto oben bzw. links, Text daneben, Pfeil rechts unten */
.highlight--zeile { display: grid; min-height: 0; justify-content: stretch; }
.highlight--zeile .highlight-foto-feld { position: relative; aspect-ratio: 16 / 9; }
.highlight--zeile .highlight-innen { padding-right: 4.5rem; align-content: center; }
.highlight--zeile .highlight-titel { font-size: 1.5rem; }
.highlight--zeile .highlight-text { display: block; }
.highlight--zeile .highlight-pfeil { top: auto; bottom: 1.1rem; }
@media (min-width: 600px) {
  .highlight--zeile { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .highlight--zeile .highlight-foto-feld { aspect-ratio: auto; min-height: 220px; }
  .highlight--zeile .highlight-pfeil { top: 50%; bottom: auto; transform: translateY(-50%); }
  .highlight--zeile:hover .highlight-pfeil { transform: translateY(-50%) scale(1.1); }
}
@media (min-width: 760px) {
  .highlights-raster { grid-template-columns: repeat(12, 1fr); gap: 1.25rem; }
  .highlight { min-height: 400px; }
  .highlight { grid-column: span 6; }   /* Runde 2: vier gleich große Kacheln, Reihenfolge Unreal, Kindergeburtstag, Disco, Sportsbar */
}
@media (min-width: 1024px) {
  .highlight { min-height: 420px; }
  .highlight-innen { padding: 2rem 2.2rem; }
}

/* --- Unterseiten-Feinschliff (bowlxxling-neu v0.2.0, 23.10.2026, Fable) --------------------------------------------
   Preistafeln: eine Spalte des Bestands mit „Zeitraum / H3 / Tabelle / pro Spiel“ (Seite Preise, Standard und Unreal)
   wird zur schwarzen Tafel wie die Faktenkarten der Kindergeburtstage: Zeitraum als Kicker, Preis rechts in Orange.
   Wortlaut und Reihenfolge unverändert. Fotoraster der Startseite (Über uns): gleiche Kachelhöhe, Lightbox zeigt das
   ganze Bild. */
.inhalt--bloecke .spalte:has(> h3 + table) { background: var(--schwarz); color: var(--text-hell); border-radius: var(--radius-karte); padding: 1.4rem 1.5rem 1.5rem; box-shadow: var(--schatten-foto); }
.inhalt--bloecke .spalte:has(> h3 + table) > p { max-width: none; color: #d9d9d9; }
.inhalt--bloecke .spalte:has(> h3 + table) > p:first-child { font-family: var(--schrift-titel); font-weight: 600; font-size: var(--t-kicker); letter-spacing: .14em; text-transform: uppercase; color: var(--orange); margin: 0 0 .35rem; }
.inhalt--bloecke .spalte:has(> h3 + table) > h3 { color: var(--weiss); font-size: 1.5rem; margin: 0 0 .9rem; }
.inhalt--bloecke .spalte:has(> h3 + table) > table { max-width: none; color: var(--text-hell); }
.inhalt--bloecke .spalte:has(> h3 + table) td { border-color: rgba(255, 255, 255, .14); padding: .6rem 0; }
.inhalt--bloecke .spalte:has(> h3 + table) tr:first-child td { padding-top: 0; }
.inhalt--bloecke .spalte:has(> h3 + table) td:last-child { text-align: right; white-space: nowrap; font-family: var(--schrift-titel); font-weight: 800; font-size: 1.35rem; color: var(--orange); font-variant-numeric: tabular-nums; }
.inhalt--bloecke .spalte:has(> h3 + table) > table + p { margin: .7rem 0 0; font-size: .9rem; color: #bdbdbd; }
.abschnitt-medien .galerie figure img { width: 100%; height: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
/* Faktenkarten als Preiskarten (Kindergeburtstage): der Ladebalken der Ladestation-Vorlage entfällt hier (keine Ladestation
   auf dieser Seite), der Wert bleibt auf einer Zeile. */
.fakten-raster .fakt { padding-bottom: 1.3rem; }
.fakten-raster .fakt::after { display: none; }
.fakten-raster { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); max-width: 36rem; }   /* breit genug für „19,95 € / Kind“ auf einer Zeile */
.fakt-wert { font-size: clamp(1.35rem, 1.3vw + .9rem, 1.9rem); }
.inhalt--bloecke .spalten:has(> .spalte > h3 + table) { margin-bottom: 1.8rem; }



/* ==========================================================================================
   bowlxxling-neu Runde 4 „Licht über echten Aufnahmen“ (23.10.2026, Fable, design/KONZEPT_RUNDE4.md).
   Ersetzt die Blöcke der Runden 2 und 3: keine Bahn, keine Kugel, keine Pins, kein Strike-Knopf. Bühne 4:5 mit
   Kundenvideo und Hochkant-Fotos, Lichtschein, UV-Kegel, Laser-Layer auf der Disco-Kachel, Lichtstreifen und
   Leuchtkanten auf Karten, eigener Radiospot-Player, Anzeigetafel. Nur transform/opacity, Reduced Motion steht.
   ========================================================================================== */
/* Bühne 4:5 neben dem Text: Video über den Motiven, feine Leuchtkante, Verlauf unten */
.buehne-huelle { position: relative; }
.buehne--solo { position: relative; aspect-ratio: 4 / 5; max-height: 78vh; margin: 0 auto; border-radius: var(--radius-bild); overflow: hidden; background: var(--anthrazit); box-shadow: var(--schatten-foto), 0 0 0 1px rgba(255, 255, 255, .06); }
.buehne--solo .buehne-motiv { position: absolute; inset: 0; }
.buehne--solo .mosaik-foto { width: 100%; height: 100%; object-fit: cover; display: block; }
.buehne--solo::after { content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; border-radius: inherit;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, .5) 100%); box-shadow: inset 0 0 0 1px rgba(244, 161, 23, .18), inset 0 0 40px rgba(0, 0, 0, .35); }
.buehne--solo .buehne-video { border-radius: 0; }
@media (max-width: 759.98px) { .buehne--solo { aspect-ratio: 4 / 3; max-height: none; } }
@media (min-width: 1024px) { .buehne--solo { max-width: 560px; } }
/* Lichtschein hinter der Bühne (warm, Orange) und UV-Kegel über dem Bild (kühl) */
.buehne-schein { position: absolute; inset: -12% -16%; z-index: -1; pointer-events: none; border-radius: 50%;
  background: radial-gradient(ellipse at 60% 50%, rgba(244, 161, 23, .22), rgba(244, 161, 23, .06) 45%, rgba(244, 161, 23, 0) 70%); filter: blur(10px); }
.uv-kegel { position: absolute; top: -30%; left: -20%; width: 70%; height: 160%; z-index: 2; pointer-events: none; mix-blend-mode: screen; opacity: .7;
  background: radial-gradient(ellipse at 50% 50%, rgba(150, 130, 255, .26) 0%, rgba(150, 130, 255, .1) 35%, rgba(150, 130, 255, 0) 70%); transform: translateX(0) rotate(-12deg); }
.held-etikett, .held-marker::before { box-shadow: 0 0 18px rgba(244, 161, 23, .45); }

/* Intro wie live: links Dachzeile, Titel, Aufzählung, Radiospot; rechts die weiße Reservieren-Karte */
.intro { background: var(--schwarz); color: var(--text-hell); padding: 0 0 clamp(2.5rem, 6vw, 4.5rem); }
.intro-raster { display: grid; gap: 2rem; align-items: center; }
.intro-titel { color: var(--weiss); font-size: clamp(1.9rem, 3.4vw, 2.9rem); line-height: 1.1; margin: 0 0 1rem; }
.intro-aufzaehlung { font: 600 clamp(1.05rem, 1.5vw, 1.3rem) var(--schrift-titel); color: #e6e6e6; margin: 0 0 1.4rem; max-width: 30em; }
.radiospot--dunkel { padding-top: 1.2rem; border-top: 1px solid rgba(255, 255, 255, .14); max-width: 32em; }
.radiospot--dunkel p { margin: 0 0 .5rem; }
.radiospot--dunkel strong { font-family: var(--schrift-titel); font-weight: 600; color: var(--weiss); }
.intro-karte { margin: 0; color: var(--text); }
/* „Heute geöffnet“ (24.10.2026) statt drittem Reservieren-Knopf */
.heute-karte .schnell-titel { margin-bottom: 1rem; }
.heute-status { display: flex; align-items: center; gap: .6rem; margin: 0; font-size: 1.25rem; font-weight: 700; color: var(--text); }
.heute-punkt { width: 14px; height: 14px; border-radius: 50%; background: #9a9a9a; flex: none; }
.heute-status--offen .heute-punkt { background: #2fbf5b; box-shadow: 0 0 0 0 rgba(47, 191, 91, .55); animation: heutePuls 2.2s ease-out infinite; }
@keyframes heutePuls { 0% { box-shadow: 0 0 0 0 rgba(47, 191, 91, .55); } 70%, 100% { box-shadow: 0 0 0 12px rgba(47, 191, 91, 0); } }
.heute-zeit { margin: .3rem 0 0 1.55rem; color: var(--text-leise, #555); }
.heute-disco { margin-top: 1.2rem; padding-top: 1rem; border-top: 1px solid rgba(0, 0, 0, .1); }
.heute-disco p { margin: 0; }
.heute-disco-titel { font-weight: 700; color: var(--orange-dunkel, #a8650a); text-transform: uppercase; letter-spacing: .08em; font-size: .8rem; margin-bottom: .25rem !important; }
.heute-link { margin: 1rem 0 0; }
@media (prefers-reduced-motion: reduce) { .heute-status--offen .heute-punkt { animation: none; } }
@media (min-width: 760px) { .intro-raster { grid-template-columns: 1fr 1fr; gap: clamp(2rem, 4vw, 4rem); } }
@media (min-width: 1024px) { .intro-raster { grid-template-columns: 7fr 5fr; } .intro .schnell-karte { display: block; } .intro .schnell-kopf { margin-bottom: 1rem; } }
.sprung-leiste { margin-top: 0; }
/* Eigener Radiospot-Player (seite.js): Knopf, Fortschritt, Zeit; .player--eigen nur mit JS */
.radiospot--dunkel .player { background: var(--anthrazit); border-color: #333; }
.player--eigen { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .9rem; padding: .55rem .9rem .55rem .55rem; }
.player--eigen audio { display: none; }
.player-knopf { width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--orange); color: var(--schwarz); display: grid; place-items: center; cursor: pointer; box-shadow: 0 0 14px rgba(244, 161, 23, .35); transition: transform .2s, background .2s; }
.player-knopf:hover { background: var(--orange-tief); transform: scale(1.06); }
.player-knopf .symbol { width: 1.3rem; height: 1.3rem; }
.player-knopf .player-pause { display: none; }
.spielt .player-knopf .player-play { display: none; }
.spielt .player-knopf .player-pause { display: block; }
.player-lauf { -webkit-appearance: none; appearance: none; width: 100%; height: 44px; margin: 0; background: transparent; cursor: pointer; --p: 0%; }
.player-lauf::-webkit-slider-runnable-track { height: 6px; border-radius: 3px; background: linear-gradient(90deg, var(--orange) var(--p), rgba(255, 255, 255, .16) var(--p)); }
.player-lauf::-moz-range-track { height: 6px; border-radius: 3px; background: rgba(255, 255, 255, .16); }
.player-lauf::-moz-range-progress { height: 6px; border-radius: 3px; background: var(--orange); }
.player-lauf::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 16px; height: 16px; margin-top: -5px; border-radius: 50%; border: 0; background: var(--orange); box-shadow: 0 0 10px rgba(244, 161, 23, .6); }
.player-lauf::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; border: 0; background: var(--orange); box-shadow: 0 0 10px rgba(244, 161, 23, .6); }
.player-lauf:focus-visible { outline: 3px solid var(--orange); outline-offset: 2px; border-radius: 6px; }
.player-zeit { font: 600 .875rem var(--schrift-titel); color: #d9d9d9; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Brunch-Band: unten Platz für die Schräge des Bands darunter (der Text bleibt frei) */
.band:has(+ .kennzahlen) .band-innen { padding-bottom: calc(1.6rem + 3vw); }

/* Anzeigetafel: dunkle Tafel, Zellen mit oranger Lichtkante, Werte mit Neon-Schein; „Restaurant 28“ in einer Zeile */
.scoreboard { background: #141414; border: 1px solid rgba(255, 255, 255, .1); border-radius: var(--radius-karte); padding: clamp(1rem, 2vw, 1.6rem); gap: 1rem; box-shadow: 0 20px 50px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .06); grid-template-columns: repeat(2, minmax(0, 1fr)); position: relative; overflow: hidden; }
.scoreboard .kennzahl { border-left: 0; padding: .9rem 1rem 1rem; min-width: 0; border-radius: 8px; background: rgba(0, 0, 0, .35); position: relative; gap: .3rem; }
.scoreboard .kennzahl::before { content: ""; position: absolute; left: 1rem; right: 1rem; top: 0; height: 2px; border-radius: 0 0 2px 2px; background: var(--orange); box-shadow: 0 0 12px rgba(244, 161, 23, .7); }
.scoreboard .kennzahl--breit { grid-column: 1 / -1; }
@media (max-width: 599.98px) { .scoreboard .kennzahl:first-child { grid-column: 1 / -1; } }
@media (min-width: 600px) { .scoreboard { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.kennzahl-wert { display: flex; align-items: baseline; gap: .35em; flex-wrap: wrap; min-width: 0; }
.scoreboard .kennzahl-zahl { font-size: clamp(2.4rem, 6vw, 3.6rem); text-shadow: 0 0 14px rgba(244, 161, 23, .55); }
.scoreboard .kennzahl-zahl--wort, .scoreboard .kennzahl-zusatz { font-family: var(--schrift-titel); font-weight: 800; line-height: 1; color: var(--orange); font-size: clamp(1.5rem, 4.6vw, 2.3rem); text-shadow: 0 0 14px rgba(244, 161, 23, .55); }
.scoreboard .kennzahl-text { font-family: var(--schrift-titel); font-weight: 600; font-size: .875rem; letter-spacing: .1em; text-transform: uppercase; color: #c9c9c9; }
@media (min-width: 1024px) { .scoreboard { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.2rem; } .scoreboard .kennzahl--breit { grid-column: auto; } .scoreboard .kennzahl-zahl--wort, .scoreboard .kennzahl-zusatz { font-size: clamp(1.5rem, 1.9vw, 2.1rem); } }
@media (min-width: 1280px) { .scoreboard .kennzahl-zahl--wort, .scoreboard .kennzahl-zusatz { font-size: 2.2rem; } }
.kennzahlen { padding-top: calc(var(--abstand) * .7 + 3vw); padding-bottom: calc(var(--abstand) * .7); }

/* Unreal-Teaser wie live: Orange, links das Foto in dunkler Karte, rechts Logo-Plakette und schwarzer Knopf */
.unreal-teaser { background: var(--orange); color: var(--schwarz); padding: calc(var(--abstand) * .7) 0; }
.unreal-teaser-raster { display: grid; gap: 2rem; align-items: center; }
.bildkarte--dunkel { background: var(--schwarz); box-shadow: 0 18px 40px rgba(0, 0, 0, .3); }
.bildkarte--dunkel img { display: block; width: 100%; height: auto; }
.unreal-teaser-logo { background: var(--weiss); border-radius: var(--radius-karte); padding: 1rem 1.4rem; max-width: 380px; box-shadow: 0 12px 30px rgba(0, 0, 0, .25); }
.unreal-teaser-logo figure, .unreal-teaser-logo p { margin: 0; }
.unreal-teaser-logo img { width: 100%; height: auto; display: block; }
.unreal-teaser .knoepfe { margin-top: 1.4rem; }
@media (min-width: 600px) and (max-width: 1023.98px) { .unreal-teaser-text { display: flex; flex-wrap: wrap; align-items: center; gap: 1.5rem 2.5rem; } .unreal-teaser-logo { flex: 1 1 260px; } .unreal-teaser .knoepfe { margin: 0; } }
@media (min-width: 1024px) { .unreal-teaser-raster { grid-template-columns: 7fr 5fr; gap: clamp(2rem, 5vw, 5rem); } .unreal-teaser .bildkarte--dunkel { transform: rotate(-1.5deg); } .unreal-teaser .bildkarte--dunkel:hover { transform: rotate(0) translateY(-4px); } }

/* Highlights-Kachel Unreal: Plakette unter 1280 oben rechts als Block (sonst läge sie auf dem Video-Link) */
@media (max-width: 1279.98px) { .highlight--unreal .highlight-logo { position: relative; inset: auto; width: 150px; margin: 1.2rem 1.2rem 0 auto; } }

/* --- Laser über der Disco-Kachel (Konzept Punkt 3): Lichtquelle oben links, sechs Strahlen fächern langsam, Nebel ---
   driftet, Farbe wandert über 40 s von Orange nach Magenta und Blau. Alles nur transform/opacity, screen-Blending. */
.lasershow { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; border-radius: inherit; mix-blend-mode: screen; --laser: #f4a117; }
.laser-faecher { position: absolute; left: 6%; top: -4%; width: 1px; height: 1px; transform-origin: 0 0; }
.laser-faecher i { position: absolute; left: 0; top: 0; width: 180%; width: 900px; height: 2px; transform-origin: 0 50%; opacity: .55;
  background: linear-gradient(90deg, rgba(255, 255, 255, .9), var(--laser) 18%, var(--laser) 55%, rgba(0, 0, 0, 0)); box-shadow: 0 0 6px var(--laser), 0 0 14px var(--laser); transform: rotate(calc(var(--w) + var(--d, 0deg))); }
.laser-faecher i:nth-child(1) { --w: 14deg; } .laser-faecher i:nth-child(2) { --w: 23deg; opacity: .4; } .laser-faecher i:nth-child(3) { --w: 33deg; }
.laser-faecher i:nth-child(4) { --w: 44deg; opacity: .4; } .laser-faecher i:nth-child(5) { --w: 56deg; } .laser-faecher i:nth-child(6) { --w: 68deg; opacity: .35; }
.laser-nebel { position: absolute; width: 90%; height: 90%; border-radius: 50%; opacity: .55; filter: blur(2px); }
.laser-nebel--1 { left: -20%; top: 10%; background: radial-gradient(ellipse at 40% 40%, rgba(255, 255, 255, .16), rgba(255, 255, 255, 0) 65%); }
.laser-nebel--2 { left: 30%; top: -30%; background: radial-gradient(ellipse at 50% 60%, rgba(244, 161, 23, .14), rgba(244, 161, 23, 0) 65%); }
.highlight--disco .highlight-innen { z-index: 1; }
.highlight--disco:hover .lasershow { opacity: 1.15; }

/* Lichtstreifen beim Einblenden und Leuchtkante beim Hover auf Karten (Konzept Punkt 4) */
.highlight::after, .intro-karte::after, .newsletter::after { content: ""; position: absolute; top: -40%; bottom: -40%; left: 0; width: 28%; pointer-events: none; z-index: 4;
  background: linear-gradient(100deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .22) 50%, rgba(255, 255, 255, 0)); transform: translateX(-260%) skewX(-18deg); opacity: 0; }
.intro-karte, .newsletter { position: relative; overflow: hidden; }
.highlight { transition: transform .4s cubic-bezier(.2, .7, .2, 1), box-shadow .4s; }
.highlight:hover, .highlight:focus-within { box-shadow: 0 24px 50px rgba(0, 0, 0, .4), 0 0 0 1px rgba(244, 161, 23, .55), 0 0 22px rgba(244, 161, 23, .25); }
.scoreboard .kennzahl { transition: box-shadow .3s; }
.scoreboard .kennzahl:hover { box-shadow: inset 0 0 0 1px rgba(244, 161, 23, .4), 0 0 18px rgba(244, 161, 23, .15); }

/* Öffnungszeiten wie live: Karte links, Tabelle rechts; Adresszeile als schmales dunkles Band */
.zeiten-raster { display: grid; gap: 2.5rem; align-items: start; }
.zeiten-karte .anfahrt-karte { max-width: none; }
.zeiten-kartenlink { margin: 1.2rem 0 0; }
.zeiten-tabelle table { max-width: none; }
.zeiten-tabelle td:last-child { text-align: right; white-space: nowrap; font-family: var(--schrift-titel); font-weight: 700; }
.zeiten-tabelle .kicker { margin-top: 1.6rem; }
.zeiten-tabelle p:has(> a[href^="tel:"]) a { font: 700 1.35rem var(--schrift-titel); color: var(--schwarz); text-decoration-color: var(--orange); }
.zeiten-tabelle p:has(> a[href^="tel:"]) a:hover { color: var(--orange-text); }
@media (min-width: 760px) { .zeiten-raster { grid-template-columns: 6fr 6fr; gap: clamp(2rem, 5vw, 5rem); } }
.adresszeile { background: var(--schwarz); color: #d9d9d9; text-align: center; padding: 1.2rem 0; font: 600 .95rem var(--schrift-titel); letter-spacing: .02em; }
.adresszeile p { margin: 0; max-width: none; }
.adresszeile a { color: var(--orange); text-decoration: none; }
.adresszeile a:hover, .adresszeile a:focus-visible { text-decoration: underline; }

/* Pit-Pat (Markenzitat, live eine zentrierte Magenta-Fläche): hier zentrierter Block mit Magenta-Akzent, ohne Fläche */
.abschnitt--pitpat .abschnitt-raster { grid-template-columns: 1fr; justify-items: center; text-align: center; }
.abschnitt--pitpat .abschnitt-text { max-width: 46rem; }
.abschnitt--pitpat .kicker { justify-content: center; }
.abschnitt--pitpat h2::after { margin-left: auto; margin-right: auto; background: var(--magenta); }
.abschnitt--pitpat .fliesstext { margin: 0 auto; }
.abschnitt--pitpat .fliesstext .knopf { margin-top: .8rem; }

@media screen and (prefers-reduced-motion: no-preference) {
  .uv-kegel { animation: uvwandern 14s ease-in-out infinite alternate; }
  .buehne-schein { animation: scheinatmen 9s ease-in-out infinite alternate; }
  .scoreboard .kennzahl-zahl, .scoreboard .kennzahl-zahl--wort, .scoreboard .kennzahl-zusatz { animation: neonpuls 4s ease-in-out infinite; }
  .held-etikett { animation: auftauchen .5s ease-out .05s both, neonrand 4s ease-in-out 1s infinite; }
  .lasershow { animation: laserfarbe 40s linear infinite; }
  .laser-faecher { animation: laserfaecher 18s ease-in-out infinite alternate; }
  .laser-faecher i:nth-child(odd) { animation: laserwippen 7s ease-in-out infinite alternate; }
  .laser-faecher i:nth-child(even) { animation: laserwippen 9s ease-in-out infinite alternate-reverse; }
  .laser-nebel--1 { animation: nebel1 26s ease-in-out infinite alternate; }
  .laser-nebel--2 { animation: nebel2 31s ease-in-out infinite alternate; }
  html.js .highlight.einblenden.in::after, html.js .intro-karte.einblenden.in::after, html.js .newsletter.einblenden.in::after { animation: lichtstreifen-karte 1.4s cubic-bezier(.3, .6, .3, 1) .25s both; }
}
@keyframes uvwandern { from { transform: translateX(0) rotate(-12deg); } to { transform: translateX(120%) rotate(-12deg); } }
@keyframes scheinatmen { from { opacity: .7; transform: scale(.96); } to { opacity: 1; transform: scale(1.04); } }
@keyframes neonpuls { 0%, 100% { text-shadow: 0 0 10px rgba(244, 161, 23, .35); } 50% { text-shadow: 0 0 22px rgba(244, 161, 23, .8), 0 0 40px rgba(244, 161, 23, .3); } }
@keyframes neonrand { 0%, 100% { box-shadow: 0 0 12px rgba(244, 161, 23, .35); } 50% { box-shadow: 0 0 24px rgba(244, 161, 23, .7); } }
@keyframes laserfarbe { 0%, 100% { --laser: #f4a117; } 33% { --laser: #e6007e; } 66% { --laser: #4f7bff; } }
@keyframes laserfaecher { from { transform: rotate(-4deg); } to { transform: rotate(5deg); } }
@keyframes laserwippen { from { --d: -3deg; } to { --d: 3deg; } }
@keyframes nebel1 { from { transform: translate(0, 0) scale(1); } to { transform: translate(18%, 8%) scale(1.15); } }
@keyframes nebel2 { from { transform: translate(0, 0) scale(1.05); } to { transform: translate(-14%, 14%) scale(.95); } }
@keyframes lichtstreifen-karte { 0% { opacity: 0; transform: translateX(-260%) skewX(-18deg); } 15% { opacity: 1; } 100% { opacity: 0; transform: translateX(520%) skewX(-18deg); } }
@property --laser { syntax: '<color>'; inherits: true; initial-value: #f4a117; }
@property --d { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@media (prefers-reduced-motion: reduce) {
  .uv-kegel, .buehne-video { display: none; }
  .highlight::after, .intro-karte::after, .newsletter::after { display: none; }
  .held-etikett, .held-marker::before, .scoreboard .kennzahl-zahl, .scoreboard .kennzahl-zahl--wort, .scoreboard .kennzahl-zusatz { text-shadow: none; box-shadow: none; }
  .lasershow { opacity: .8; }
}
/* Fuß (Runde 4, Art-Director-Befund): Öffnungszeiten-Spalte breiter, Zeiten auf einer Zeile */
.fuss-raster > .fuss-spalte:last-child { grid-column: span 2; }
.fuss .zeiten dd { white-space: nowrap; }
@media (max-width: 599.98px) { .fuss-raster > .fuss-spalte:last-child { grid-column: 1 / -1; } }

/* ==========================================================================================
   bowlxxling-neu Runde 6 „Motion“ (23.10.2026, Fable): Abschnitte tauchen mit Licht auf, Parallaxe in Fotos,
   horizontale Galerie in zwei gegenläufigen Reihen, Laufband mit Begriffen aus dem Bestand, Neon-Reaktion der Knöpfe,
   Lichtblitz beim Bildwechsel der Bühne. Nur transform/opacity; mobil abgespeckt (keine Parallaxe, Band als
   Wischgalerie); bei prefers-reduced-motion steht alles.
   ========================================================================================== */
/* Abschnitte: Lichtlinie an der Oberkante, die beim Auftauchen von der Mitte aufzieht; dunkle Abschnitte zusätzlich eine
   Lichtwelle, die einmal von links nach rechts läuft (opacity/transform) */
main > section { position: relative; }
main > section::before { content: ""; position: absolute; left: 10%; right: 10%; top: 0; height: 1px; z-index: 2; pointer-events: none; background: linear-gradient(90deg, rgba(244, 161, 23, 0), rgba(244, 161, 23, .9) 50%, rgba(244, 161, 23, 0)); opacity: 0; transform: scaleX(.1); }
main > section.held::before, main > section.intro::before, main > section.band::before { display: none; }
.kennzahlen .lichtwelle, .zeiten-block .lichtwelle { display: none; }
.kennzahlen::after, .unreal-teaser::after { content: ""; position: absolute; top: -20%; bottom: -20%; left: 0; width: 34%; pointer-events: none; z-index: 0; background: linear-gradient(100deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .07) 50%, rgba(255, 255, 255, 0)); transform: translateX(-120%) skewX(-16deg); opacity: 0; }
.unreal-teaser::after { background: linear-gradient(100deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .22) 50%, rgba(255, 255, 255, 0)); }
.kennzahlen > .huelle, .unreal-teaser > .huelle { position: relative; z-index: 1; }
.kennzahlen, .unreal-teaser { overflow: hidden; }   /* Runde 7: die Lichtwelle (translateX 380 %) erzeugte sonst horizontalen Überlauf */
/* Kicker-Strich und H2-Unterstrich wachsen beim Einblenden */
html.js .einblenden .kicker::before, html.js .einblenden h2::after, html.js .block-kopf.einblenden h2::after { transform-origin: left; transform: scaleX(0); }
html.js .einblenden.in .kicker::before { transition: transform .5s cubic-bezier(.2, .7, .2, 1) .25s; transform: scaleX(1); }
html.js .einblenden.in h2::after, html.js .block-kopf.einblenden.in h2::after { transition: transform .6s cubic-bezier(.2, .7, .2, 1) .35s; transform: scaleX(1); }

/* Parallaxe (html.parallaxe, seite.js 14): Fotos füllen ihre Fläche bei 1,12 und bewegen sich ±6 %; Hover-Zoom entfällt dann */
html.parallaxe .highlight-foto, html.parallaxe .seitenkopf-foto, html.parallaxe .galerie-band .galerie-link img { transition: none; will-change: transform; transform: scale(1.12); }
html.parallaxe .highlight:hover .highlight-foto, html.parallaxe .highlight:focus-within .highlight-foto { transform: scale(1.12); }

/* Über uns: Text einspaltig, darunter die Galerie (Runde 7: bündiges Raster mit Flip, Block „Runde 7“) */
.abschnitt--band .abschnitt-raster { grid-template-columns: 1fr; }
.abschnitt--band .abschnitt-text { max-width: 52rem; }
.abschnitt--band.block { padding-bottom: calc(var(--abstand) * .45); }

/* Laufband: Begriffe in Exo 2 800 Versalien, abwechselnd gefüllt und als Kontur, Punkt als Trenner; die Spur ist doppelt
   und wandert um die Hälfte (nahtlos). Hover hält an. */
.laufband { background: var(--schwarz); color: var(--weiss); overflow: hidden; padding: clamp(1rem, 2.2vw, 1.6rem) 0; border-top: 1px solid rgba(255, 255, 255, .08); border-bottom: 1px solid rgba(255, 255, 255, .08); position: relative; }
.laufband::before, .laufband::after { content: ""; position: absolute; top: 0; bottom: 0; width: 12%; z-index: 1; pointer-events: none; }
.laufband::before { left: 0; background: linear-gradient(90deg, var(--schwarz), rgba(17, 17, 17, 0)); }
.laufband::after { right: 0; background: linear-gradient(270deg, var(--schwarz), rgba(17, 17, 17, 0)); }
.laufband-spur { display: flex; align-items: center; gap: clamp(1.2rem, 3vw, 2.6rem); width: max-content; will-change: transform; }
.laufband-wort { font: 800 clamp(1.6rem, 4.2vw, 3.4rem)/1 var(--schrift-titel); text-transform: uppercase; letter-spacing: .02em; white-space: nowrap; color: var(--orange); text-shadow: 0 0 18px rgba(244, 161, 23, .45); }
.laufband-wort--kontur { color: rgba(255, 255, 255, .28); text-shadow: none; }   /* kein text-stroke: die variable Exo 2 zeigt sonst Innenkonturen */
.laufband-punkt { width: 10px; height: 10px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 12px rgba(244, 161, 23, .8); flex: none; }
.laufband:hover .laufband-spur { animation-play-state: paused; }

/* Neon-Reaktion der Knöpfe: beim Hover/Fokus ein Lichtring, der einmal nach außen läuft (transform/opacity), plus heller Schein */
.knopf { position: relative; isolation: isolate; }
.knopf::before { content: ""; position: absolute; inset: -2px; border-radius: inherit; border: 2px solid rgba(244, 161, 23, .9); opacity: 0; transform: scale(1); pointer-events: none; z-index: -1; }
.knopf--dunkel::before { border-color: rgba(255, 255, 255, .8); }
.knopf:hover, .knopf:focus-visible { box-shadow: 0 8px 18px rgba(0, 0, 0, .18), 0 0 26px 4px rgba(244, 161, 23, .45); }
.knopf--dunkel:hover, .knopf--dunkel:focus-visible { box-shadow: 0 8px 18px rgba(0, 0, 0, .18), 0 0 22px 2px rgba(255, 255, 255, .22); }
.knopf--rahmen:hover, .knopf--rahmen:focus-visible { box-shadow: 0 0 22px 2px rgba(244, 161, 23, .35); }
.knopf--leuchten::before { display: none; }   /* hat Leuchtrand und Lichtstreifen (11.7); overflow hidden */
.knopf--leuchten:hover, .knopf--leuchten:focus-visible { box-shadow: 0 0 34px 8px rgba(244, 161, 23, .6); }
.chip--dunkel.aktiv { box-shadow: 0 0 16px rgba(244, 161, 23, .55); }

/* Lichtblitz beim Bildwechsel der Bühne: weiß-orange Fläche, einmal auf und ab (opacity) */
.buehne-blitz { position: absolute; inset: 0; z-index: 4; pointer-events: none; opacity: 0; mix-blend-mode: screen; background: radial-gradient(ellipse at 50% 40%, rgba(255, 245, 220, .95), rgba(244, 161, 23, .45) 45%, rgba(0, 0, 0, 0) 80%); }

@media screen and (prefers-reduced-motion: no-preference) {
  html.js main > section.in::before { animation: lichtlinie 1.4s cubic-bezier(.2, .7, .2, 1) both; }
  html.js .kennzahlen.in::after, html.js .unreal-teaser.in::after { animation: lichtwelle 1.6s cubic-bezier(.3, .6, .3, 1) .2s both; }
  .laufband-spur { animation: laufband 36s linear infinite; }
  .knopf:hover::before, .knopf:focus-visible::before { animation: neonring .7s cubic-bezier(.2, .7, .2, 1) both; }
  .buehne-blitz.an { animation: blitz-bild .7s ease-out both; }
  .buehne .buehne-motiv { transition-duration: .9s; }
}
@keyframes lichtlinie { 0% { opacity: 0; transform: scaleX(.1); } 35% { opacity: 1; } 100% { opacity: .55; transform: scaleX(1); } }
@keyframes lichtwelle { 0% { opacity: 0; transform: translateX(-120%) skewX(-16deg); } 15% { opacity: 1; } 100% { opacity: 0; transform: translateX(380%) skewX(-16deg); } }
@keyframes laufband { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } }
@keyframes neonring { 0% { opacity: .9; transform: scale(1); } 100% { opacity: 0; transform: scale(1.18); } }
@keyframes blitz-bild { 0% { opacity: 0; } 18% { opacity: .85; } 100% { opacity: 0; } }
@media (max-width: 759.98px) { .laufband-spur { animation-duration: 28s; } }
@media (prefers-reduced-motion: reduce) {
  main > section::before { opacity: .45; transform: none; }
  .kennzahlen::after, .unreal-teaser::after, .buehne-blitz, .knopf::before { display: none; }
  .laufband-spur { animation: none; }
  .laufband-spur { width: auto; flex-wrap: wrap; justify-content: center; padding: 0 var(--rand); }
  .laufband::before, .laufband::after { display: none; }
}
/* Lightbox: Lichtblitz beim Blättern (Runde 6) */
.lightbox-figur { position: relative; }
.lightbox-figur::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; background: radial-gradient(ellipse at 50% 50%, rgba(255, 245, 220, .9), rgba(244, 161, 23, .35) 45%, rgba(0, 0, 0, 0) 75%); mix-blend-mode: screen; }
@media screen and (prefers-reduced-motion: no-preference) { .lightbox-figur.blitz::after { animation: blitz-bild .6s ease-out both; } }

/* ==========================================================================================
   bowlxxling-neu Runde 7 (23.10.2026, Fable): Art-Director-Review (design/REVIEW_ART_DIRECTOR.md).
   Hero mit Foto über die volle Breite und Lichtblobs · Reservieren-Karte ragt in den Hero · Galerie als bündiges
   Raster mit 3D-Flip aus der Schwarzlicht-Rückseite · Newsletter-Karte dunkel · Fotospalte auf Unterseiten ·
   Lichtschein im Kopfband. Nur transform/opacity bewegt; Reduced Motion steht.
   ========================================================================================== */
/* Hero: Hintergrundfoto, Verläufe, drei Lichtblobs (radiale Verläufe, screen) */
.held { padding: 2rem 0 2.5rem; }
.held::before { display: none; }
.held-hintergrund { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.held-hintergrund-foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 62% 50%; opacity: .72; transform: scale(1.04); }
.held-hintergrund::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(17, 17, 17, .94) 0%, rgba(17, 17, 17, .82) 32%, rgba(17, 17, 17, .4) 62%, rgba(17, 17, 17, .15) 100%),
              linear-gradient(180deg, rgba(17, 17, 17, .35) 0%, rgba(17, 17, 17, 0) 35%, rgba(17, 17, 17, .95) 100%); }
.held-blob { position: absolute; border-radius: 50%; mix-blend-mode: screen; opacity: .85; }
.held-blob--1 { left: -12%; top: 0; width: 46vw; height: 46vw; background: radial-gradient(circle, rgba(230, 0, 126, .6), rgba(230, 0, 126, 0) 65%); }
.held-blob--2 { right: -8%; bottom: -20%; width: 52vw; height: 52vw; background: radial-gradient(circle, rgba(79, 123, 255, .6), rgba(79, 123, 255, 0) 65%); }
.held-blob--3 { left: 30%; bottom: -30%; width: 44vw; height: 44vw; background: radial-gradient(circle, rgba(244, 161, 23, .4), rgba(244, 161, 23, 0) 65%); }
.held-raster { position: relative; z-index: 1; }
.held-absatz { color: #ececec; text-shadow: 0 2px 12px rgba(0, 0, 0, .6); }
.held-h1 { text-shadow: 0 4px 24px rgba(0, 0, 0, .55); }
.held-tel { display: inline-flex; align-items: center; gap: .55rem; margin-top: 1.2rem; min-height: 44px; color: #e6e6e6; text-decoration: none; font-size: 1rem; }
.held-tel .symbol { color: var(--orange); }
.held-tel strong { font-family: var(--schrift-titel); font-weight: 700; color: var(--weiss); letter-spacing: .02em; }
.held-tel:hover strong, .held-tel:focus-visible strong { color: var(--orange); }
.buehne--solo { box-shadow: var(--schatten-foto), 0 0 0 1px rgba(244, 161, 23, .35), 0 0 60px rgba(244, 161, 23, .25), 0 0 120px rgba(79, 123, 255, .2); }
@media (max-width: 759.98px) { .held-blob--3 { display: none; } .held-hintergrund-foto { opacity: .5; } }
@media (min-width: 1024px) {
  .held { min-height: max(680px, min(90vh, 900px)); }
  .held-raster { padding-bottom: calc(2rem + 64px); }
  .held-hintergrund-foto { object-position: 70% 50%; }
}
/* Intro: Reservieren-Karte ragt in den Hero, Text daneben etwas tiefer; Band etwas heller als der Hero-Fuß */
.intro { background: #141414; }
@media (min-width: 1024px) {
  .intro { padding-top: 0; }
  .intro-raster { align-items: start; }
  .intro-karte { margin-top: -96px; position: relative; z-index: 3; box-shadow: 0 30px 70px rgba(0, 0, 0, .55), 0 0 0 1px rgba(244, 161, 23, .25); }
  .intro-text { padding-top: 2.2rem; }
}
/* Newsletter-Karte: dunkel, Text mittig, Plakat begrenzt */
.newsletter { background: var(--schwarz); color: var(--text-hell); box-shadow: 0 24px 60px rgba(0, 0, 0, .25), 0 0 0 1px rgba(244, 161, 23, .18); align-items: center; }
.newsletter h2, .newsletter .h2 { color: var(--weiss); }
.newsletter .kicker { color: var(--orange); }
.newsletter .fliesstext { color: #d9d9d9; }
.newsletter-bild .bildkarte { max-width: 380px; }
/* Unreal-Teaser: Foto heller, das Licht der Projektion trägt */
.unreal-teaser .bildkarte--dunkel img { filter: brightness(1.14) saturate(1.1); }

/* Galerie-Flip: bündiges Raster über die volle Breite, Kacheln 4:3, Lücke 4 px; Rückseite = Schwarzlicht-Raster mit
   orangem Lichtpunkt; der Link dreht als Ganzes (kein overflow:hidden, sonst flach), Front = Foto, Rückseite = ::before */
.galerie-flip { background: var(--schwarz); padding: 0; overflow: hidden; }
.galerie--flip { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; margin: 0; }
.galerie--flip figure { margin: 0; min-width: 0; }
.galerie--flip .galerie-link img { aspect-ratio: 4 / 3 !important; border-radius: 0 !important; }
.galerie--flip .galerie-link { border-radius: 0; background: #0b0b1a; }
.galerie--flip > figure, .galerie--album > figure { perspective: 1400px; }
.galerie--flip .galerie-link, .galerie--album .galerie-link { position: relative; isolation: auto; }
.galerie--flip .galerie-link::before, .galerie--album .galerie-link::before { content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: 2; opacity: 0; pointer-events: none;
  background: radial-gradient(circle at 50% 58%, rgba(244, 161, 23, .55), rgba(244, 161, 23, 0) 42%),
              repeating-linear-gradient(0deg, rgba(120, 140, 255, .28) 0 1px, transparent 1px 22px),
              repeating-linear-gradient(90deg, rgba(120, 140, 255, .28) 0 1px, transparent 1px 22px), #0b0b1a;
  box-shadow: inset 0 0 0 1px rgba(244, 161, 23, .45), inset 0 0 60px rgba(79, 123, 255, .35); }
html.flip .galerie--flip .galerie-link, html.flip .galerie--album .galerie-link { overflow: visible; transform-style: preserve-3d; transform: rotateY(-180deg); transition: transform .95s cubic-bezier(.2, .7, .2, 1); transition-delay: var(--v, 0ms); will-change: transform; }
html.flip .galerie--flip .galerie-link.in, html.flip .galerie--album .galerie-link.in { transform: none; }
html.flip .galerie--flip .galerie-link img, html.flip .galerie--album .galerie-link img { backface-visibility: hidden; border-radius: inherit; }
html.flip .galerie--flip .galerie-link::before, html.flip .galerie--album .galerie-link::before { opacity: 1; backface-visibility: hidden; transform: rotateY(180deg) translateZ(1px); }
html.flip .galerie--flip .galerie-link::after, html.flip .galerie--album .galerie-link::after { backface-visibility: hidden; border-radius: inherit; }
html.flip .galerie-link:hover img, html.flip .galerie-link:focus-visible img { transform: none; }   /* kein Zoom über die Kante (overflow visible) */
/* Neon-Rand beim Hover (auch ohne Flip) */
.galerie--flip .galerie-link::after, .galerie--album .galerie-link::after { opacity: 1; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 65%, rgba(0, 0, 0, .3)); box-shadow: inset 0 0 0 0 rgba(244, 161, 23, 0); transition: box-shadow .3s, opacity .3s; }
.galerie--flip .galerie-link:hover::after, .galerie--flip .galerie-link:focus-visible::after, .galerie--album .galerie-link:hover::after, .galerie--album .galerie-link:focus-visible::after { box-shadow: inset 0 0 0 2px rgba(244, 161, 23, .9), inset 0 0 40px rgba(244, 161, 23, .25), 0 0 24px rgba(244, 161, 23, .5); }
.galerie--flip .galerie-link:hover, .galerie--album .galerie-link:hover { z-index: 3; }
html.flip .galerie--flip .galerie-link.in:hover, html.flip .galerie--album .galerie-link.in:hover { transform: translateY(-4px); }
@media (max-width: 759.98px) {   /* Wischgalerie */
  .galerie--flip { display: flex; flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; gap: 4px; }
  .galerie--flip::-webkit-scrollbar { display: none; }
  .galerie--flip figure { flex: none; width: 78vw; scroll-snap-align: start; }
}
@media (min-width: 760px) { .galerie--flip { grid-template-columns: repeat(4, minmax(0, 1fr)); } }   /* 24.10.: 8 Fotos = 2 volle Reihen */
.galerie--flip > figure { grid-column: auto !important; grid-row: auto !important; }   /* 24.10.: Lückenregel (erstes Bild breit) gilt hier nicht, alle Kacheln gleich groß */
@media (min-width: 1024px) { .galerie--flip { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* Unterseiten: Fotospalte (Kopfbild der Seite, --kopfbild aus seite.php) neben langen Textblöcken ohne Kopfspalte:
   Rohblock ohne Spalten/Tafeln/Galerie und Schlichtblock mit mindestens vier Kindern; das Foto haftet beim Scrollen */
.ublock-fotospalte { display: none; }
@media (min-width: 900px) {
  .inhalt--bloecke[style*="--kopfbild"] .ublock-roh-innen:not(:has(.spalten, .tafeln, .galerie, .buchung-buehne)):has(.ublock-roh-text > :nth-child(4)),
  .inhalt--bloecke[style*="--kopfbild"] .ublock-schlicht:has(.ublock-schlicht-text > :nth-child(4)) { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 1rem clamp(2.5rem, 5vw, 5rem); align-items: start; }
  .inhalt--bloecke[style*="--kopfbild"] .ublock-roh-innen:not(:has(.spalten, .tafeln, .galerie, .buchung-buehne)):has(.ublock-roh-text > :nth-child(4)) > .ublock-fotospalte,
  .inhalt--bloecke[style*="--kopfbild"] .ublock-schlicht:has(.ublock-schlicht-text > :nth-child(4)) > .ublock-fotospalte { display: block; position: sticky; top: calc(56px + 1.5rem); min-height: 420px; height: min(620px, calc(100vh - 56px - 3rem)); border-radius: var(--radius-karte);
    background: var(--kopfbild) center / cover no-repeat; box-shadow: var(--schatten-foto), 0 0 0 1px rgba(244, 161, 23, .25), 0 0 40px rgba(244, 161, 23, .12); }
  .ublock-roh-innen:has(.ublock-roh-text > :nth-child(4)):not(:has(.spalten, .tafeln, .galerie, .buchung-buehne)) .ublock-roh-text > *, .ublock-schlicht:has(.ublock-schlicht-text > :nth-child(4)) .ublock-schlicht-text > * { max-width: 68ch; }   /* Runde 8: nur neben der Fotospalte; vorher quetschte die Regel die Zweispalten-Fläche der Reservierung auf 68ch und der 4bowl-Kalender bekam 0 px */
}
/* Kopfband: farbiger Lichtschein, langsam wandernd; Lichtlinie auch auf Blöcken der Unterseiten */
.seitenkopf::after { content: ""; position: absolute; left: -10%; top: -60%; width: 55%; height: 220%; z-index: 0; pointer-events: none; border-radius: 50%; mix-blend-mode: screen; opacity: .55;
  background: radial-gradient(ellipse at 50% 50%, rgba(230, 0, 126, .32), rgba(79, 123, 255, .12) 45%, rgba(0, 0, 0, 0) 70%); }
.ublock { position: relative; }
.ublock::before { content: ""; position: absolute; left: 10%; right: 10%; top: 0; height: 1px; z-index: 2; pointer-events: none; background: linear-gradient(90deg, rgba(244, 161, 23, 0), rgba(244, 161, 23, .7) 50%, rgba(244, 161, 23, 0)); opacity: 0; transform: scaleX(.1); }
.ublock:first-child::before { display: none; }

@media screen and (prefers-reduced-motion: no-preference) {
  .held-hintergrund-foto { animation: kenburns-held 26s ease-in-out infinite alternate; }
  .held-blob--1 { animation: blob1 22s ease-in-out infinite alternate; }
  .held-blob--2 { animation: blob2 27s ease-in-out infinite alternate; }
  .held-blob--3 { animation: blob3 31s ease-in-out infinite alternate; }
  .seitenkopf::after { animation: kopfschein 18s ease-in-out infinite alternate; }
  html.js .ublock.in::before { animation: lichtlinie 1.4s cubic-bezier(.2, .7, .2, 1) both; }
}
@keyframes kenburns-held { from { transform: scale(1.04) translateX(0); } to { transform: scale(1.12) translateX(-2%); } }
@keyframes blob1 { from { transform: translate(0, 0) scale(1); } to { transform: translate(16%, 18%) scale(1.15); } }
@keyframes blob2 { from { transform: translate(0, 0) scale(1.05); } to { transform: translate(-14%, -16%) scale(.92); } }
@keyframes blob3 { from { transform: translate(0, 0) scale(.95); } to { transform: translate(-18%, -10%) scale(1.12); } }
@keyframes kopfschein { from { transform: translateX(0); } to { transform: translateX(90%); } }
@media (prefers-reduced-motion: reduce) {
  .held-blob, .seitenkopf::after { animation: none; }
  .ublock::before { opacity: .45; transform: none; }
}

/* --- 4bowl (Runde 8, Pflichtfunktion): Zweispalten-Bestand mit Kalender wird gestapelt, der Kalender bekommt die volle
   Breite (Kalender 2fr + Tafel 300 px ab 1024, darunter untereinander), Höhe aus $BUCHUNG (820), unter 760 760 px. ---- */
.inhalt .spalten:has(.buchung-buehne) { grid-template-columns: 1fr; gap: 1.5rem; max-width: none; }
.inhalt .spalten:has(.buchung-buehne) > .spalte:has(.buchung-buehne) { max-width: none; }
.inhalt .spalten:has(.buchung-buehne) > .spalte:not(:has(.buchung-buehne)) { max-width: 68ch; }
.buchung-rahmen { min-height: 760px; }
@media (min-width: 760px) { .buchung-rahmen { min-height: var(--hoehe, 820px); } }
@media (min-width: 1024px) { .buchung-buehne { grid-template-columns: minmax(560px, 1fr) 300px; } }

/* --- Laserfeld (moonlightminigolf-neu 25.10.2026, Nutzer: „wo Laser ist, Laserstrahlen als Erlebnis“) -----------------
   Rote Strahlen zum Ausweichen, grüne zum Fangen wie bei Catch The Beam. Auf den Kacheln Laser Game und Catch The Beam
   über dem Foto (unter Text und Pfeil), im dunklen Abschnitt Catch the Beam als Hintergrund. Strahlen wandern langsam
   und flackern kurz; beim Hover leuchten die grünen auf. Nur transform/opacity, aus bei reduzierter Bewegung. */
.laserfeld { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; border-radius: inherit; mix-blend-mode: screen; }
.strahl { position: absolute; left: -25%; width: 150%; height: 2px; border-radius: 2px; opacity: .75; transform: rotate(var(--r, 0deg)); }
.strahl--rot { --farbe: #ff2b3d; background: linear-gradient(90deg, rgba(255, 43, 61, 0), #ff2b3d 20%, #ffd0d4 50%, #ff2b3d 80%, rgba(255, 43, 61, 0)); box-shadow: 0 0 6px #ff2b3d, 0 0 16px rgba(255, 43, 61, .7); }
.strahl--gruen { --farbe: #3bff6e; background: linear-gradient(90deg, rgba(59, 255, 110, 0), #3bff6e 25%, #e2ffe9 50%, #3bff6e 75%, rgba(59, 255, 110, 0)); box-shadow: 0 0 6px #3bff6e, 0 0 16px rgba(59, 255, 110, .7); opacity: .6; }
.strahl:nth-child(1) { top: 18%; --r: 9deg; }
.strahl:nth-child(2) { top: 46%; --r: -14deg; }
.strahl:nth-child(3) { top: 30%; --r: 22deg; }
.strahl:nth-child(4) { top: 68%; --r: -6deg; }
.strahl:nth-child(5) { top: 58%; --r: -28deg; }
.strahl:nth-child(6) { top: 84%; --r: 15deg; opacity: .5; }
.strahl:nth-child(7) { top: 10%; --r: -19deg; opacity: .45; }
.laser-punkt { position: absolute; left: 62%; top: 40%; width: 14px; height: 14px; margin: -7px; border-radius: 50%; background: #e2ffe9; box-shadow: 0 0 10px #3bff6e, 0 0 28px #3bff6e, 0 0 60px rgba(59, 255, 110, .5); opacity: .8; }
.highlight--laser .highlight-innen { z-index: 1; }
.highlight--laser:hover .strahl--gruen, .highlight--laser:focus-within .strahl--gruen { opacity: 1; box-shadow: 0 0 8px #3bff6e, 0 0 26px #3bff6e; }
.abschnitt--laser { position: relative; overflow: hidden; isolation: isolate; background: #0d0d0d; }
.abschnitt--laser > .huelle { position: relative; z-index: 1; }
.abschnitt--laser .laserfeld { opacity: .55; }
@media screen and (prefers-reduced-motion: no-preference) {
  .strahl { animation: strahlwandern 9s ease-in-out infinite alternate, strahlflackern 6s steps(1, end) infinite; }
  .strahl:nth-child(2n) { animation-duration: 12s, 7.5s; animation-direction: alternate-reverse, normal; }
  .strahl:nth-child(3n) { animation-duration: 15s, 5.2s; }
  .laser-punkt { animation: punktwandern 11s ease-in-out infinite alternate, punktpuls 2.4s ease-in-out infinite; }
}
@keyframes strahlwandern { from { transform: translateY(-14px) rotate(var(--r, 0deg)); } to { transform: translateY(16px) rotate(calc(var(--r, 0deg) + 4deg)); } }
@keyframes strahlflackern { 0%, 100% { opacity: .75; } 37% { opacity: .2; } 39% { opacity: .85; } 71% { opacity: .35; } 72% { opacity: .75; } }
@keyframes punktwandern { from { transform: translate(-60px, 20px); } to { transform: translate(70px, -30px); } }
@keyframes punktpuls { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .strahl, .laser-punkt { animation: none; }
}

/* === Schwarzlicht (moonlightminigolf-neu 25.10.2026, Nutzer: „Schwarzlicht besser zur Geltung bringen“, „Corporate
   Design bleibt deutlich erkennbar, auch das Menü etc.“) ==========================================================
   Nur der Inhalt in <main> wird dunkel wie die Halle; Kopf, Menü, Fuß, Logo, Orange, Schriften und Aufbau bleiben.
   1. Dunkler Grund: Farbwerte innerhalb von main umgestellt, Karten als dunkle Flächen mit feiner UV-Kante.
   2. UV-Schein: Überschriften mit leichtem violettem Leuchten, Knöpfe beim Hover orange/violett.
   3. „Licht an“: Themenwelt-Kacheln sind gedämpft und schalten das Schwarzlicht ein, sobald sie ins Bild kommen
      (nur mit JavaScript, html.js; ohne Bewegungswunsch sofort hell). */
main#inhalt {
  --text: #ece9f3; --grau-text: #b9b3c6; --linie: rgba(255, 255, 255, .12); --orange-text: var(--orange);
  --grau-flaeche: #141119; --orange-hell: #1e1709; --uv: #8b5cff; --uv-schein: rgba(139, 92, 255, .35);
  --karte: #17141e; --schatten-weiss: 0 14px 34px rgba(0, 0, 0, .45);
  background: #0d0d0d; color: var(--text);
}
main#inhalt a:hover { color: #fff; }
main#inhalt .block--hell, main#inhalt .ublock--grau { background: #121017; }
main#inhalt .schnell-karte, main#inhalt .newsletter, main#inhalt .ublock-karte, main#inhalt .recht-karte, main#inhalt .recht-inhalt,
main#inhalt .buchung, main#inhalt .reskarte, main#inhalt .bildkarte {
  background: var(--karte); box-shadow: 0 0 0 1px rgba(139, 92, 255, .18), var(--schatten-weiss);
}
main#inhalt .band { border-color: rgba(244, 161, 23, .35); }
main#inhalt .player { border-color: rgba(255, 255, 255, .12); }
main#inhalt .chip { border-color: rgba(255, 255, 255, .18); color: var(--text); }
main#inhalt .chip:hover, main#inhalt .chip:focus-visible { color: #fff; }
main#inhalt .chips::before { background: linear-gradient(90deg, #0d0d0d, rgba(13, 13, 13, 0)); }
main#inhalt .chips::after { background: linear-gradient(270deg, #0d0d0d, rgba(13, 13, 13, 0)); }
main#inhalt .inhalt .zwischentitel, main#inhalt .zeiten-tabelle p:has(> a[href^="tel:"]) a,
main#inhalt .inhalt .hervorhebung, main#inhalt .ublock--einstieg .ublock-raster--kopf .ublock-text > p,
main#inhalt .ublock--einstieg .ublock-schlicht-text > p:first-child { color: #fff; }   /* Vorlage setzt dort Schwarz fest */
main#inhalt .zeiten-tabelle p:has(> a[href^="tel:"]) a:hover { color: var(--orange); }
main#inhalt .buchung-anbieter a:hover { color: #fff; }
main#inhalt .galerie-link { background: #141119; }
main#inhalt td, main#inhalt th { border-color: rgba(255, 255, 255, .12); }
main#inhalt .buchung-rahmen { background: #fff; }   /* 4bowl-Formular ist hell gestaltet */
/* 2. UV-Schein */
main#inhalt h2, main#inhalt .h2 { text-shadow: 0 0 22px var(--uv-schein); }
main#inhalt .kicker { text-shadow: 0 0 12px rgba(244, 161, 23, .35); }
main#inhalt .knopf:hover, main#inhalt .knopf:focus-visible { box-shadow: 0 0 0 1px rgba(244, 161, 23, .6), 0 0 18px rgba(244, 161, 23, .45), 0 0 34px var(--uv-schein); }
main#inhalt .highlight:hover, main#inhalt .highlight:focus-within { box-shadow: 0 24px 50px rgba(0, 0, 0, .55), 0 0 0 1px rgba(244, 161, 23, .55), 0 0 30px var(--uv-schein); }
/* 3. Licht an: Themenwelten */
html.js main#inhalt .highlight--welt.einblenden .highlight-foto { filter: brightness(.28) saturate(.35); transition: filter 1.1s ease-out .15s, transform .8s cubic-bezier(.2, .7, .2, 1); }
html.js main#inhalt .highlight--welt.einblenden.in .highlight-foto { filter: none; }
@media screen and (prefers-reduced-motion: no-preference) {
  html.js main#inhalt .highlight--welt.einblenden.in .highlight-foto { animation: uvan 1.4s ease-out .15s 1 both; }
}
@keyframes uvan { 0% { filter: brightness(.28) saturate(.35); } 22% { filter: brightness(1.15) saturate(1.3); } 30% { filter: brightness(.5) saturate(.6); }
  45% { filter: brightness(1.1) saturate(1.25); } 100% { filter: none; } }
@media (prefers-reduced-motion: reduce) {
  html.js main#inhalt .highlight--welt.einblenden .highlight-foto { filter: none; transition: none; }
}

/* --- SEO-Erhalt (25.10.2026, Nutzer: „keine Rankingverluste“): H1 der Startseite wieder wie live das Intro „Moonlight
   Minigolf im XXL – Am Neuen Angerbach 28“; der Willkommenstitel der Bühne ist ein <p> und sieht aus wie zuvor. */
p.held-h1 { font-family: var(--schrift-titel); font-weight: 800; line-height: 1.04; margin-top: 0; max-width: none; }
h1.intro-titel { font-weight: 700; letter-spacing: 0; }
main#inhalt h1.intro-titel { text-shadow: 0 0 22px var(--uv-schein); }