/* xxl-poolbillard.de – Stylesheet 1.3.0. Schriften lokal, keine externen Hosts.
   Bewegung (1.3.0): eigener Abschnitt am Ende. Ausblenden nur unter html.js, das ein Inline-Skript im
   Kopf setzt, wenn der Browser IntersectionObserver kann; ohne JavaScript ist alles sofort sichtbar.
   Gestaltungssystem (siehe CHANGELOG 1.2.0):
   - 8er-Raster: --s1 8px, --s2 16, --s3 24, --s4 32, --s5 48, --s6 64, --s7 96; Abschnitte --abschnitt
   - Typo-Stufen: Dach .8125rem / Klein .875 / Text 1.0625 / Groß 1.25 / H3 1.25 / H2 1.75–2.375 / H1 2.25–3.25 / Hero 2.5–4.5
   - Farbrollen: Orange = Handlung und Hinweis (Knöpfe, Kennzahlen auf Blau, Hinweiskasten), nie als Text auf Weiß;
     Tuch-Blau = Struktur und Motiv (Faktenleiste, Preisblock, Marker vor Überschriften, Karten-Kante, Pillen, Links, Fuß);
     Schwarz = Kopfzeile, Text, Logo.
   - Komponenten: Karte (weiß, Linie, blaue Oberkante), Kasten (Hinweis orange / Adresse blau), Pille, Marker, Platte unter Bildern. */

@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; }
@font-face { font-family: "Eurostile"; src: url("../fonts/eurostile.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }

:root {
  --orange: #f4a117;
  --orange-dunkel: #b86f00;
  --orange-hell: #fff4df;
  --schwarz: #111111;
  --dunkel: #0f161b;
  --tuch: #1590c8;
  --tuch-dunkel: #0b5f86;
  --tuch-nacht: #083e58;
  --tuch-hell: #e6f2f9;
  --tuch-platte: #cfe4f1;
  --hell: #f3f5f7;
  --text: #1f2428;
  --text-weich: #3d444a;
  --grau: #5a6168;
  --linie: #d9dee2;
  --linie-stark: #6f7b85;
  --weiss: #fff;
  --radius: 8px;
  --radius-gross: 14px;
  --breite: 1160px;
  --s1: .5rem; --s2: 1rem; --s3: 1.5rem; --s4: 2rem; --s5: 3rem; --s6: 4rem; --s7: 6rem;
  --abschnitt: clamp(3rem, 2rem + 3.5vw, 6rem);
  --t-dach: .8125rem;
  --t-klein: .875rem;
  --t-text: 1.0625rem;
  --t-gross: 1.25rem;
  --t-h3: 1.25rem;
  --t-h2: clamp(1.75rem, 1.35rem + 1.5vw, 2.375rem);
  --t-h1: clamp(2.25rem, 1.6rem + 2.4vw, 3.25rem);
  --t-hero: clamp(2.5rem, 1.8rem + 3.6vw, 4.5rem);
  --t-zahl: clamp(2rem, 1.5rem + 1.5vw, 2.75rem);
  --schatten: 0 18px 44px rgba(8, 62, 88, .16);
  --schrift-kopf: "Eurostile", "Roboto", Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; font-family: "Roboto", Arial, sans-serif; font-size: var(--t-text); line-height: 1.6; color: var(--text); background: var(--weiss); }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--tuch-dunkel); text-underline-offset: .15em; }
a:hover { color: var(--tuch-nacht); }
h1, h2, h3, .h3 { font-family: var(--schrift-kopf); font-weight: 700; line-height: 1.15; color: var(--schwarz); margin: 0 0 .55em; text-wrap: balance; }
h1 { font-size: var(--t-h1); letter-spacing: -.01em; }
h2 { font-size: var(--t-h2); }
h3, .h3 { font-size: var(--t-h3); line-height: 1.25; }
/* Marker: kurzer Balken in Tuch-Blau über H1 und H2 als durchlaufendes Motiv */
h1::before, h2::before { content: ""; display: block; width: 2.75rem; height: 4px; border-radius: 2px; background: var(--tuch); margin-bottom: .6em; }
.hero h1::before, .fuss h2::before, .h3::before, .lichtkasten h2::before { display: none; }
.block-dunkel h1::before, .block-dunkel h2::before { background: var(--orange); }
.block-orange h2::before { background: var(--schwarz); }
.mitte h1::before, .mitte h2::before { margin-inline: auto; }
p, li, dd { hyphens: auto; }
p, .liste, .vorspann { max-width: 65ch; }
.mitte p, .mitte .vorspann { margin-inline: auto; }
.zeiten, .tabelle, .fakt-zahl, .preis-gross { font-variant-numeric: tabular-nums; }
[id] { scroll-margin-top: 6rem; }
p { margin: 0 0 1em; }
strong { font-weight: 700; }

:focus-visible { outline: 3px solid var(--tuch); outline-offset: 3px; }
.hero :focus-visible, .fakten :focus-visible, .block-dunkel :focus-visible, .fuss :focus-visible, .kopf-info :focus-visible { outline-color: var(--orange); }

.skip { position: absolute; left: -9999px; top: 0; background: var(--orange); color: var(--schwarz); padding: .6em 1em; z-index: 100; font-weight: 700; }
.skip:focus { left: 1em; top: 1em; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.huelle { max-width: var(--breite); margin: 0 auto; padding: 0 var(--s2); }
@media (min-width: 760px) { .huelle { padding: 0 var(--s4); } }
/* Schmale Textspalte: die Hülle bleibt zentriert, ihre Kinder sind auf 48rem begrenzt und
   sitzen an der linken Rasterkante, damit sie mit den vollbreiten Abschnitten fluchten */
.schmal > * { max-width: 48rem; }
.schmal.mitte > * { margin-inline: auto; }
.mitte { text-align: center; }
/* Rechtstexte: H2 als Geschwister der H1 werden kleiner und ohne Marker gesetzt */
h1 ~ h2 { font-size: 1.5rem; margin-top: 1.6em; }
h1 ~ h2::before { display: none; }

/* Kopf */
.kopf-info { background: var(--schwarz); color: #d6d9dc; font-size: var(--t-klein); }
.kopf-info-innen { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .3em 1.5em; padding-top: .5em; padding-bottom: .5em; }
.kopf-info a { color: var(--orange); text-decoration: none; font-weight: 700; }
.kopf-info a:hover { color: var(--weiss); }
/* Service-Links im Kopf (wie auf xxl-lasergame.de): Moonlight Minigolf, Bowling, XXL Sportcenter */
.service ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .3em 1.5em; }
.kopf-info .service a { color: #d6d9dc; font-weight: 400; }
.kopf-info .service a:hover, .kopf-info .service a:focus-visible { color: var(--orange); }
@media (max-width: 760px) { .service { display: none; } }
.kopf-leiste { background: var(--weiss); border-bottom: 3px solid var(--orange); position: sticky; top: 0; z-index: 50; box-shadow: 0 2px 14px rgba(0,0,0,.06); }
.kopf-leiste-innen { display: flex; align-items: center; justify-content: space-between; gap: 1em; padding-top: .6em; padding-bottom: .6em; }
.logo img { width: 156px; height: auto; }
.menue ul { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: .1em; }
.menue li { max-width: none; }
/* Menü in Eurostile wie auf xxl-sportcenter.de (CI); die Schrift hat nur eine Stärke, daher 400 statt fett */
.menue a { display: block; position: relative; padding: .6em .75em; color: var(--schwarz); text-decoration: none; font-family: var(--schrift-kopf); font-weight: 400; font-size: 1rem; letter-spacing: .04em; border-radius: var(--radius); transition: color .15s, background .15s; white-space: nowrap; hyphens: manual; }
.menue a:hover { color: var(--tuch-dunkel); }
.menue li:not(.menue-aktion) a[aria-current="page"] { color: var(--tuch-dunkel); }
/* Unterstreichung läuft beim Überfahren von links ein, beim aktiven Punkt steht sie */
.menue li:not(.menue-aktion) a::after { content: ""; position: absolute; left: .75em; right: .75em; bottom: .3em; height: 3px; border-radius: 2px; background: var(--orange); transform: scaleX(0); transform-origin: left; transition: transform .25s ease-out; }
.menue li:not(.menue-aktion) a:hover::after, .menue li:not(.menue-aktion) a:focus-visible::after, .menue li:not(.menue-aktion) a[aria-current="page"]::after { transform: scaleX(1); }
.menue .menue-aktion a { background: var(--orange); color: var(--schwarz); margin-left: .5em; padding: .6em 1.1em; }
.menue .menue-aktion a:hover { background: var(--schwarz); color: var(--weiss); }
/* Untermenü „Freizeitspaß" (wie auf allen Seiten der XXL-Gruppe): klappt bei Maus und Tastatur auf,
   bleibt display:flex (absolut, kein Layout), unsichtbar über visibility/opacity/transform */
.menue-gruppe { position: relative; }
.menue-gruppe > a > .pfeil { display: inline-block; margin-left: .3em; font-size: .75em; transition: transform .2s; }
.menue-gruppe:hover > a > .pfeil, .menue-gruppe:focus-within > a > .pfeil { transform: rotate(180deg); }
.menue .untermenue { display: flex; position: absolute; left: 0; top: 100%; min-width: 15em; flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 0; padding: .3em 0; background: var(--weiss); border-top: 3px solid var(--orange); box-shadow: 0 12px 24px rgba(0,0,0,.14); z-index: 60; border-radius: 0 0 var(--radius) var(--radius);
  visibility: hidden; opacity: 0; transform: translateY(-8px); pointer-events: none; transition: opacity .18s ease, transform .22s ease-out, visibility 0s linear .22s; }
.menue-gruppe:hover > .untermenue, .menue-gruppe:focus-within > .untermenue { visibility: visible; opacity: 1; transform: none; pointer-events: auto; transition-delay: 0s; }
.menue li .untermenue a { font-size: .95rem; padding: .55em 1.1em; border-radius: 0; white-space: nowrap; }
.menue li .untermenue a::after { content: none; }
.menue li .untermenue a:hover, .menue li .untermenue a:focus-visible { background: var(--orange); color: var(--schwarz); }
.menue-schalter { display: none; background: none; border: 2px solid var(--schwarz); border-radius: var(--radius); padding: .5em .8em; font: inherit; font-weight: 700; cursor: pointer; align-items: center; gap: .5em; }
.balken, .balken::before, .balken::after { display: block; width: 20px; height: 2px; background: var(--schwarz); position: relative; }
.balken::before, .balken::after { content: ""; position: absolute; left: 0; }
.balken::before { top: -6px; } .balken::after { top: 6px; }
.balken, .balken::before, .balken::after { transition: transform .25s ease-out, background .2s; }
.menue-schalter[aria-expanded="true"] .balken { background: transparent; }
.menue-schalter[aria-expanded="true"] .balken::before { transform: translateY(6px) rotate(45deg); }
.menue-schalter[aria-expanded="true"] .balken::after { transform: translateY(-6px) rotate(-45deg); }

/* Umschaltpunkt 1100 px: darunter passt die Menüzeile (6 Punkte + Knopf) nicht mehr neben das Logo
   und Firefox trennte Wörter im Menü (Befund 13.10.2026). Derselbe Wert steht in main.js. */
@media (max-width: 1100px) {
  .menue-schalter { display: inline-flex; }
  .menue { display: none; position: absolute; left: 0; right: 0; top: 100%; background: var(--weiss); border-bottom: 3px solid var(--orange); box-shadow: 0 12px 24px rgba(0,0,0,.14); }
  .menue.offen { display: block; }
  .menue ul { flex-direction: column; align-items: stretch; padding: .5em var(--s2) 1em; }
  .menue a { padding: .8em .5em; border-bottom: 1px solid var(--linie); border-radius: 0; }
  .menue li:not(.menue-aktion) a::after { left: 0; right: auto; top: .9em; bottom: .9em; height: auto; width: 4px; transform: scaleY(0); transform-origin: top; }
  .menue li:not(.menue-aktion) a:hover::after, .menue li:not(.menue-aktion) a:focus-visible::after, .menue li:not(.menue-aktion) a[aria-current="page"]::after { transform: scaleY(1); }
  .menue li:not(.menue-aktion) a[aria-current="page"] { padding-left: 1em; }
  .menue .menue-aktion a { margin: .8em 0 0; text-align: center; border-radius: var(--radius); border: 0; }
  .menue .untermenue { position: static; box-shadow: none; min-width: 0; padding: 0 0 0 1em; border: 0; border-radius: 0; visibility: visible; opacity: 1; transform: none; pointer-events: none; transition: none; }
  .menue li .untermenue a { pointer-events: auto; white-space: normal; }
  .menue-gruppe > a > .pfeil { display: none; }
  .kopf-leiste-innen { position: relative; }
}

/* Hero: Foto über die volle Breite, Text unten, Verlauf von unten für die Lesbarkeit */
.hero { position: relative; min-height: clamp(520px, 72vh, 700px); display: flex; align-items: flex-end; color: var(--weiss); background: var(--dunkel); overflow: hidden; isolation: isolate; }
.hero-bild { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 45%; z-index: -2; }
.hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(15,22,27,.28) 0%, rgba(15,22,27,.42) 45%, rgba(15,22,27,.9) 100%); }
.hero-inhalt { position: relative; padding-top: var(--s7); padding-bottom: calc(var(--s5) + 3.5rem); }
.hero h1 { color: var(--weiss); font-size: var(--t-hero); max-width: 15em; margin: .35em 0 .35em; text-shadow: 0 2px 18px rgba(0,0,0,.45); }
.hero-ort { display: inline-block; background: var(--orange); color: var(--schwarz); font-family: var(--schrift-kopf); font-size: var(--t-dach); text-transform: uppercase; letter-spacing: .08em; padding: .5em .9em; border-radius: 4px; margin: 0; }
.hero-text { max-width: 34em; font-size: var(--t-gross); line-height: 1.5; text-shadow: 0 1px 10px rgba(0,0,0,.6); }
.hero .knoepfe { margin-top: var(--s3); }

/* Knöpfe */
.knoepfe { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s3); max-width: none; }
.knoepfe-mitte { justify-content: center; }
.knopf { display: inline-block; background: var(--orange); color: var(--schwarz); text-decoration: none; padding: .85em 1.5em; border-radius: var(--radius); border: 2px solid var(--orange); font: inherit; font-weight: 700; line-height: 1.3; cursor: pointer; transition: background .2s, color .2s, border-color .2s, transform .15s, box-shadow .2s; }
.knopf:hover { background: var(--schwarz); border-color: var(--schwarz); color: var(--weiss); transform: translateY(-1px); box-shadow: 0 8px 18px rgba(0,0,0,.18); }
.knopf:active { transform: translateY(0); box-shadow: none; }
.knopf-leer { background: transparent; color: inherit; border-color: currentColor; }
.hero .knopf-leer { color: var(--weiss); }
.knopf-leer:hover { background: var(--weiss); color: var(--schwarz); border-color: var(--weiss); }
.block:not(.block-dunkel) .knopf-leer { color: var(--schwarz); }
.block:not(.block-dunkel) .knopf-leer:hover { background: var(--schwarz); color: var(--weiss); border-color: var(--schwarz); }
.knopf-leer-hell { background: transparent; color: var(--weiss); border-color: var(--weiss); }
.knopf-leer-hell:hover { background: var(--weiss); color: var(--schwarz); }
.knopf-voll { display: block; text-align: center; padding-inline: 1em; hyphens: none; }
.knopf-dunkel { background: var(--schwarz); border-color: var(--schwarz); color: var(--weiss); }
.knopf-dunkel:hover { background: var(--weiss); border-color: var(--weiss); color: var(--schwarz); }

/* Fakten: blaue Tafel, die in den Hero hineinragt */
.fakten { position: relative; z-index: 2; margin-top: -3.5rem; }
.fakten-raster { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s2); background: var(--tuch-dunkel); color: var(--weiss); border-radius: var(--radius-gross); padding: var(--s4) var(--s3); box-shadow: var(--schatten); }
.fakt { text-align: center; padding: 0 var(--s2); }
.fakt + .fakt { border-left: 1px solid rgba(255,255,255,.2); }
.fakt-zahl { display: block; font-family: var(--schrift-kopf); font-size: var(--t-zahl); color: var(--orange); line-height: 1.05; margin-bottom: .25em; }
.fakt-text { font-size: var(--t-klein); color: var(--tuch-hell); }
@media (max-width: 700px) {
  .fakten-raster { grid-template-columns: 1fr 1fr; gap: var(--s3) 0; padding: var(--s3) var(--s2); }
  .fakt + .fakt { border-left: 0; }
  .fakt:nth-child(even) { border-left: 1px solid rgba(255,255,255,.2); }
}

/* Kästen: Hinweis (orange, zeitlich) und Adresse (blau, Information) */
.hinweis { background: var(--orange-hell); border-left: 5px solid var(--orange); color: var(--text); padding: var(--s2) var(--s3); border-radius: var(--radius); max-width: none; margin: 0 0 1em; }
.hinweisband { padding-top: var(--s4); }
.hinweisband .hinweis { margin: 0; }
.adresse { background: var(--tuch-hell); border-left: 5px solid var(--tuch); border-radius: var(--radius); padding: var(--s3); margin: var(--s3) 0; }
.adresse p:last-child { margin-bottom: 0; }

/* Blöcke */
.block { padding: var(--abschnitt) 0; }
.block-hell { background: var(--hell); }
.block-dunkel { background: linear-gradient(135deg, var(--tuch-dunkel), var(--tuch-nacht)); color: var(--tuch-hell); }
.block-dunkel h1, .block-dunkel h2, .block-dunkel h3 { color: var(--weiss); }
.block-dunkel a:not(.knopf) { color: var(--weiss); text-decoration-color: var(--orange); text-decoration-thickness: 2px; }
.block-dunkel a:not(.knopf):hover { color: var(--orange); }
.block-orange { background: var(--orange); color: var(--schwarz); }
.block-orange h2 { color: var(--schwarz); }
.block-orange a:not(.knopf) { color: var(--schwarz); }
.vorspann { font-size: var(--t-gross); line-height: 1.55; color: var(--text-weich); max-width: 32em; margin-bottom: 1.2em; }
.block-dunkel .vorspann { color: var(--tuch-hell); }
.gross { font-size: var(--t-gross); line-height: 1.55; }
.klein { font-size: var(--t-klein); color: var(--grau); }
.block-dunkel .klein { color: var(--tuch-platte); }
.zwei-spalten { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s6); align-items: center; }
.zwei-spalten-oben { align-items: start; }
@media (max-width: 860px) { .zwei-spalten { grid-template-columns: 1fr; gap: var(--s4); } }
.bild-rand { border-radius: var(--radius-gross); box-shadow: 14px 14px 0 var(--tuch-platte), 0 18px 40px rgba(8, 62, 88, .18); }
.text-link { font-weight: 700; text-decoration-thickness: 2px; text-underline-offset: .2em; }
.text-link::after { content: " \2192"; }
.preis-gross { font-family: var(--schrift-kopf); font-size: clamp(2.5rem, 2rem + 2vw, 3.5rem); color: var(--orange); line-height: 1.05; margin-bottom: .6em; }
.preis-gross span { display: block; font-family: "Roboto", Arial, sans-serif; font-size: var(--t-text); color: var(--weiss); margin-top: .25em; }

.liste { padding-left: 1.25em; margin: 0 0 1em; }
.liste li { margin-bottom: .5em; padding-left: .2em; }
.liste li::marker { color: var(--tuch); font-weight: 700; }
.block-dunkel .liste li::marker { color: var(--orange); }

/* Zeiten */
.zeiten { display: grid; grid-template-columns: auto 1fr; gap: 0 var(--s3); margin: 0 0 1em; max-width: 30em; }
.zeiten dt, .zeiten dd { padding: .5em 0; border-bottom: 1px solid var(--linie); }
.zeiten dt { font-weight: 700; }
.zeiten dd { margin: 0; }
.block-dunkel .zeiten dt, .block-dunkel .zeiten dd { border-color: rgba(255,255,255,.18); }
.zeiten-klein { font-size: var(--t-klein); gap: 0 var(--s2); }
.zeiten-klein dt, .zeiten-klein dd { padding: .25em 0; border: 0; }
.zeiten-klein dd { white-space: nowrap; }

/* Karten: ein Stil für Reservierungswege und Angebote */
.karten { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s3); }
.karten-schmal { grid-template-columns: repeat(2, 1fr); margin-top: var(--s4); }
.karte-weg, .angebot { background: var(--weiss); border: 1px solid var(--linie); border-top: 4px solid var(--tuch); border-radius: var(--radius-gross); padding: var(--s3); display: flex; flex-direction: column; transition: transform .2s, box-shadow .2s; }
.karte-weg:hover, .angebot:hover { transform: translateY(-3px); box-shadow: var(--schatten); }
.karte-weg h3, .karte-weg .h3, .angebot h3 { margin-bottom: .5em; }
.karte-weg p, .angebot p { margin-bottom: .8em; }
.karte-weg p:last-child, .angebot p:last-child { margin-top: auto; margin-bottom: 0; }
.karte-weg .knopf-voll { margin-top: var(--s2); }
@media (max-width: 860px) { .karten, .karten-schmal { grid-template-columns: 1fr; } }
.angebote { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s3); margin-top: var(--s4); }
@media (max-width: 960px) { .angebote { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .angebote { grid-template-columns: 1fr; } }

/* Tabelle */
.tabelle { width: 100%; border-collapse: collapse; margin-bottom: var(--s3); background: var(--weiss); border: 1px solid var(--linie); }
.tabelle th, .tabelle td { text-align: left; padding: .75em .9em; border-bottom: 1px solid var(--linie); }
.tabelle th { background: var(--tuch-dunkel); color: var(--weiss); font-size: var(--t-klein); text-transform: uppercase; letter-spacing: .06em; }
.tabelle td:last-child { font-weight: 700; white-space: nowrap; }
.tabelle tbody tr:last-child td { border-bottom: 0; }

/* Pillen (Sprungmarken) */
.inhalt-liste ul { list-style: none; padding: 0; margin: var(--s3) 0 0; display: flex; flex-wrap: wrap; gap: var(--s1); max-width: none; }
.inhalt-liste a { display: inline-block; padding: .5em 1em; background: var(--tuch-hell); color: var(--tuch-dunkel); border-radius: 999px; text-decoration: none; font-weight: 700; font-size: .95rem; transition: background .15s, color .15s; }
.inhalt-liste a:hover { background: var(--tuch-dunkel); color: var(--weiss); }

/* Galerie: 4 Spalten, erstes Foto doppelt groß, sechstes doppelt breit */
.galerie { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s2); margin: var(--s4) 0; }
.galerie figure { margin: 0; min-width: 0; }
.galerie figure:first-child { grid-column: span 2; grid-row: span 2; position: relative; }
.galerie figure:nth-child(6) { grid-column: span 2; position: relative; }
.galerie figure:first-child a, .galerie figure:nth-child(6) a { position: absolute; inset: 0; }
.galerie a { display: block; height: 100%; border-radius: var(--radius); overflow: hidden; cursor: zoom-in; background: var(--tuch-hell); }
.galerie img { width: 100%; height: 100%; aspect-ratio: 3 / 2; object-fit: cover; transition: transform .5s cubic-bezier(.2,.7,.2,1), filter .5s; }
.galerie a:hover img, .galerie a:focus-visible img { transform: scale(1.06); filter: brightness(1.06); }
@media (max-width: 900px) {
  .galerie { grid-template-columns: 1fr 1fr; }
  .galerie figure:first-child { grid-row: auto; }
  .galerie figure:first-child, .galerie figure:nth-child(6) { position: static; }
  .galerie figure:first-child a, .galerie figure:nth-child(6) a { position: static; }
  .galerie figure:first-child img, .galerie figure:nth-child(6) img { aspect-ratio: 2 / 1; }
}
@media (max-width: 560px) {
  .galerie { grid-template-columns: 1fr; }
  .galerie figure:first-child, .galerie figure:nth-child(6) { grid-column: auto; }
  .galerie figure:first-child img, .galerie figure:nth-child(6) img { aspect-ratio: 3 / 2; }
}

/* Brotkrumen (sichtbares Gegenstück zum BreadcrumbList-Markup) */
.pfad { font-size: var(--t-klein); color: var(--grau); padding-top: var(--s2); }
.pfad ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .2em; }
.pfad li + li::before { content: "\203A"; margin: 0 .5em; color: var(--linie-stark); }
.pfad a { color: var(--grau); text-decoration: none; }
.pfad a:hover { color: var(--tuch-dunkel); text-decoration: underline; }
.pfad [aria-current] { color: var(--text); font-weight: 700; }
.pfad + .block { padding-top: var(--s5); }

/* Lightbox: Galeriefoto im selben Fenster, ohne JavaScript bleibt der Link */
.lichtkasten { position: fixed; inset: 0; z-index: 200; background: rgba(8, 62, 88, .95); display: flex; align-items: center; justify-content: center; padding: 3.5rem 3.5rem 1.5rem; }
.lichtkasten[hidden] { display: none; }
.lichtkasten figure { margin: 0; max-width: 100%; display: flex; flex-direction: column; align-items: center; gap: .7em; }
.lichtkasten img { max-width: 100%; max-height: calc(100vh - 8rem); width: auto; height: auto; border-radius: var(--radius); box-shadow: 0 20px 60px rgba(0,0,0,.6); }
.lichtkasten figcaption { color: var(--tuch-hell); font-size: var(--t-klein); text-align: center; max-width: 60ch; }
.lichtkasten button { position: absolute; background: rgba(255,255,255,.14); color: #fff; border: 0; border-radius: 50%; width: 2.8rem; height: 2.8rem; font-size: 1.9rem; line-height: 1; cursor: pointer; transition: background .15s, color .15s; }
.lichtkasten button:hover { background: var(--orange); color: var(--schwarz); }
.lichtkasten :focus-visible { outline-color: var(--orange); }
.lk-zu { top: .8rem; right: .8rem; }
.lk-zurueck { left: .6rem; top: 50%; transform: translateY(-50%); }
.lk-weiter { right: .6rem; top: 50%; transform: translateY(-50%); }
@media (max-width: 600px) { .lichtkasten { padding: 3.5rem .5rem 1rem; } .lk-zurueck, .lk-weiter { top: auto; bottom: .6rem; transform: none; } }
.newsletter-bild { margin: var(--s3) auto; border-radius: var(--radius-gross); box-shadow: 14px 14px 0 var(--tuch-platte), 0 18px 40px rgba(8, 62, 88, .18); }

/* Formular */
.formular { margin-top: var(--s3); background: var(--weiss); border: 1px solid var(--linie); border-top: 4px solid var(--tuch); border-radius: var(--radius-gross); padding: var(--s4); }
@media (max-width: 640px) { .formular { padding: var(--s3) var(--s2); } }
.feld { margin-bottom: var(--s2); display: flex; flex-direction: column; }
.feld label { font-weight: 700; margin-bottom: .3em; }
.feld input, .feld select, .feld textarea { font: inherit; padding: .7em .8em; border: 2px solid var(--linie-stark); border-radius: var(--radius); background: var(--weiss); width: 100%; color: var(--text); transition: border-color .2s, box-shadow .25s ease-out; }
/* weicher Fokus-Glow in Tuch-Blau */
.feld input:focus, .feld select:focus, .feld textarea:focus { outline: none; border-color: var(--tuch-dunkel); box-shadow: 0 0 0 4px rgba(21,144,200,.22), 0 0 20px rgba(21,144,200,.35); }
.feld [aria-invalid="true"] { border-color: #b3261e; }
.feld-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--s2); }
.feld-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0 var(--s2); }
.feld-kurz { max-width: 14em; }
@media (max-width: 640px) { .feld-2, .feld-3 { grid-template-columns: 1fr; } }
.feld-fehler { color: #b3261e; font-size: var(--t-klein); margin-top: .3em; display: block; }
.zustimmung { display: flex; gap: .6em; align-items: flex-start; margin: .5em 0 var(--s2); }
.zustimmung input { width: 1.2em; height: 1.2em; margin-top: .25em; flex: none; accent-color: var(--tuch-dunkel); }
.honig { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.meldung { border-radius: var(--radius); padding: var(--s2) var(--s3); margin: var(--s2) 0; }
/* Erfolgsmeldung mit Haken (eigenes SVG als Hintergrund, ohne JavaScript statisch sichtbar) */
.meldung-ok { background: #e6f4ea; border-left: 5px solid #1e7d34; position: relative; padding-left: calc(var(--s3) + 2.6em); }
.meldung-ok::before { content: ""; position: absolute; left: var(--s3); top: 50%; margin-top: -.9em; width: 1.8em; height: 1.8em; border-radius: 50%; background: #1e7d34 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 62% no-repeat; }
.meldung-fehler { background: #fdecea; border-left: 5px solid #b3261e; }

/* Fuß: Logo als Abschluss, dann vier Spalten, dann Zeile */
.fuss { background: var(--tuch-nacht); color: #d6e3ec; font-size: .95rem; }
.fuss a { color: var(--weiss); text-decoration-color: rgba(255,255,255,.4); text-underline-offset: .2em; }
.fuss a:hover { color: var(--orange); text-decoration-color: var(--orange); }
.fuss-kopf { padding-top: var(--s5); padding-bottom: var(--s3); border-bottom: 1px solid rgba(255,255,255,.14); }
.fuss-logo { display: inline-block; }
.fuss-logo img { width: 150px; height: auto; }
.fuss-raster { display: grid; grid-template-columns: 1fr 1.35fr 1fr 1fr; gap: var(--s4); padding-top: var(--s4); padding-bottom: var(--s5); }
.fuss-titel { color: var(--orange); font-family: var(--schrift-kopf); font-size: var(--t-dach); text-transform: uppercase; letter-spacing: .08em; margin-bottom: 1em; }
.fuss-liste { list-style: none; padding: 0; margin: 0; }
.fuss-liste li { margin-bottom: .4em; }
.fuss .zeiten { max-width: none; }
.fuss .zeiten dt { color: var(--weiss); }
.fuss-zeile { border-top: 1px solid rgba(255,255,255,.14); }
.fuss-zeile-innen { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5em 2em; padding-top: var(--s2); padding-bottom: var(--s2); font-size: var(--t-klein); color: var(--tuch-platte); }
.fuss-zeile p { margin: 0; }
@media (max-width: 960px) { .fuss-raster { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .fuss-raster { grid-template-columns: 1fr; } }

/* ============================================================================================
   Bewegung (1.3.0)
   - Startzustände (unsichtbar, verschoben) gelten nur unter html.js UND nur für Bildschirm ohne
     prefers-reduced-motion. Druck, Reduced Motion und Browser ohne JavaScript zeigen alles sofort.
   - Animiert werden ausschließlich opacity, transform, box-shadow, filter und background-position,
     nie Maße oder Abstände: kein Layout-Sprung.
   - Die Auswahl der erscheinenden Teile (SET) steht wortgleich in assets/js/main.js.
   ============================================================================================ */

/* Billard-Motiv: eine Kugel ruht am Ende des Markers und rollt beim Sichtbarwerden heran
   (nur auf zwei Überschriften mit der Klasse motiv-kugel) */
h2.motiv-kugel { position: relative; }
h2.motiv-kugel::after { content: ""; position: absolute; left: calc(2.75rem - 14px); top: -5px; width: 14px; height: 14px; border-radius: 50%;
  background: radial-gradient(circle at 64% 36%, #fff 0 23%, transparent 26%), radial-gradient(circle at 35% 30%, #ffd27a 0 8%, var(--orange) 48%, var(--orange-dunkel) 100%);
  box-shadow: 0 2px 4px rgba(0,0,0,.28); }

/* Lichtstreifen beim Überfahren: Reservierungsknopf im Kopf und Absendeknopf im Formular */
.formular .knopf { position: relative; }
.menue-aktion a::after, .formular .knopf::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(105deg, rgba(255,255,255,0) 35%, rgba(255,255,255,.55) 50%, rgba(255,255,255,0) 65%) no-repeat; background-size: 250% 100%; background-position: 200% 0; }
.menue-aktion a:hover::after, .menue-aktion a:focus-visible::after, .formular .knopf:hover::after, .formular .knopf:focus-visible::after { animation: streifen .7s ease-out both; }
@keyframes streifen { from { background-position: 200% 0; } to { background-position: -100% 0; } }
/* Absendeknopf leuchtet beim Überfahren */
.formular .knopf:hover, .formular .knopf:focus-visible { box-shadow: 0 0 0 4px rgba(244, 161, 23,.28), 0 10px 26px rgba(244, 161, 23,.45); }

/* Sprungmarken: Zielabschnitt leuchtet kurz orange auf (Klasse setzt main.js nach dem Scrollen) */
.leuchtet { animation: aufleuchten 1.4s ease-out both; }
@keyframes aufleuchten { 0% { box-shadow: inset 0 0 0 0 rgba(244, 161, 23,0); } 25% { box-shadow: inset 0 0 0 4px rgba(244, 161, 23,.9); } 100% { box-shadow: inset 0 0 0 4px rgba(244, 161, 23,0); } }

@media screen and (prefers-reduced-motion: no-preference) {
  /* Erscheinen beim Scrollen: Startzustand, bis main.js „sichtbar" setzt */
  .js :is(.block > .huelle:not(.zwei-spalten) > :not(.karten, .angebote, .galerie), .zwei-spalten > *, .karten > *, .angebote > *, .galerie figure, .hinweisband .hinweis):not(.sichtbar) {
    opacity: 0; transform: var(--weg, translateY(18px)); }
  .js .formular { --weg: translateY(32px); }
  .js .galerie figure { --weg: translateY(14px) scale(.96); }

  /* Hero: langsamer Zoom auf dem Foto, Text gestaffelt, Faktentafel schiebt sich von unten herein */
  .js .hero-bild { animation: ken-burns 26s ease-in-out infinite alternate; }
  .js .hero-ort { animation: auftauchen .5s ease-out .1s both; }
  .js .hero h1 { animation: auftauchen .55s ease-out .25s both; }
  .js .hero-text { animation: auftauchen .55s ease-out .4s both; }
  .js .hero .knoepfe { animation: auftauchen .5s ease-out .55s both; }
  .js .fakten-raster { animation: tafel .7s cubic-bezier(.2,.7,.2,1) .6s both; }

  /* Reservierungsknopf im Kopf (1.5.1, Ansage des Nutzers „sollte animiert sein"): alle 3,5 s ein
     Herzschlag (Knopf wächst zweimal kurz), ein orangefarbener Ring läuft nach außen (::before) und ein
     Lichtstreifen zieht von selbst durch (::after). Beim Überfahren bleibt der Streifen von oben. */
  .js .menue-aktion a { animation: herzschlag 3.5s ease-in-out 1.5s infinite; }
  .js .menue-aktion a::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; animation: puls 3.5s ease-out 1.5s infinite; }
  .js .menue-aktion a::after { animation: streifen-auto 3.5s ease-out 1.7s infinite; }

  /* Kugel rollt heran, sobald die Überschrift erscheint */
  .js h2.motiv-kugel.sichtbar::after { animation: kugel-rollt .9s cubic-bezier(.15,.7,.3,1) .15s both; }

  /* Erfolgsmeldung: Haken springt auf */
  .js .meldung-ok::before { animation: haken .55s cubic-bezier(.3,1.6,.5,1) .35s both; }

  /* Lightbox: Öffnen und Bildwechsel mit Fade */
  .js .lichtkasten:not([hidden]) { animation: einblenden .25s ease-out both; }
  .js .lichtkasten img { opacity: 0; transform: scale(.98); transition: opacity .3s ease-out, transform .3s ease-out; }
  .js .lichtkasten img.lk-sichtbar { opacity: 1; transform: none; }

  /* Mobiles Menü klappt kurz animiert auf (liegt absolut, kein Layout-Sprung) */
  .js .menue.offen { animation: menue-auf .25s ease-out both; }
}
@media screen and (min-width: 861px) and (prefers-reduced-motion: no-preference) {
  /* Zweispalter und die zwei Kontaktkarten der Reservierung laufen von links und rechts ein */
  .js .zwei-spalten > :first-child, .js .karten-schmal > :first-child { --weg: translateX(-28px); }
  .js .zwei-spalten > :last-child, .js .karten-schmal > :last-child { --weg: translateX(28px); }
}

@keyframes ken-burns { from { transform: scale(1); } to { transform: scale(1.08) translate(-1.2%, .8%); } }
@keyframes auftauchen { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes tafel { from { opacity: 0; transform: translateY(44px); } to { opacity: 1; transform: none; } }
@keyframes puls { 0%, 100% { box-shadow: 0 0 0 0 rgba(244, 161, 23,0), 0 0 0 0 rgba(244, 161, 23,0); } 6% { box-shadow: 0 0 0 0 rgba(244, 161, 23,.85), 0 0 18px 4px rgba(244, 161, 23,.55); } 40% { box-shadow: 0 0 0 16px rgba(244, 161, 23,0), 0 0 18px 4px rgba(244, 161, 23,0); } }
@keyframes herzschlag { 0%, 40%, 100% { transform: scale(1); } 8% { transform: scale(1.07); } 16% { transform: scale(1); } 24% { transform: scale(1.05); } }
@keyframes streifen-auto { 0% { background-position: 200% 0; } 28% { background-position: -100% 0; } 100% { background-position: -100% 0; } }
@keyframes kugel-rollt { from { transform: translateX(-2.75rem) rotate(-400deg); opacity: 0; } 20% { opacity: 1; } to { transform: none; opacity: 1; } }
@keyframes haken { from { transform: scale(0) rotate(-30deg); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes einblenden { from { opacity: 0; } to { opacity: 1; } }
@keyframes menue-auf { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; transition: none !important; animation: none !important; } }

/* 1.4.0: Buchungsbaustein. Links das 4bowl-System in halber Breite wie im Original (feste Höhe, kein
   Scrollbalken, kein Layout-Sprung), rechts eine Bildtafel in Tuch-Nacht mit Ablauf, Fakten und Telefon. */
.buchung-buehne { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 1.5rem; align-items: stretch; margin: 1.75rem 0 1rem; }
.buchung { position: relative; border-radius: 18px; overflow: hidden; background: #fff; border-top: 5px solid var(--orange);
  box-shadow: 0 18px 40px rgba(8,62,88,.16); transition: box-shadow .35s ease-out, transform .35s ease-out; }
.buchung:hover, .buchung:focus-within { transform: translateY(-3px); box-shadow: 0 0 0 3px rgba(244, 161, 23,.5), 0 24px 50px rgba(8,62,88,.22); }
.buchung iframe { display: block; width: 100%; height: 700px; border: 0; overflow: hidden; }
.buchung-tafel { position: relative; overflow: hidden; border-radius: 18px; color: var(--weiss); padding: 2rem 1.75rem;
  display: flex; flex-direction: column; gap: 1.25rem;
  background: linear-gradient(160deg, rgba(8,62,88,.93) 0%, rgba(8,62,88,.82) 55%, rgba(11,95,134,.7) 100%),
              url("../img/stoss-mit-dem-queue-1000.webp") center / cover no-repeat, var(--tuch-nacht); }
.buchung-tafel::after { content: ""; position: absolute; right: -60px; bottom: -60px; width: 220px; height: 220px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #ffd27a, var(--orange) 45%, var(--orange-dunkel) 100%); opacity: .9;
  box-shadow: 0 0 60px rgba(244, 161, 23,.45); pointer-events: none; }
.buchung-marke { margin: 0; font-size: .85rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--orange); }
.buchung-schritte { list-style: none; margin: 0; padding: 0; display: grid; gap: .85rem; }
.buchung-schritte li { display: flex; align-items: center; gap: .9rem; font-size: 1.1rem; line-height: 1.35; }
.buchung-nr { flex: 0 0 2.4rem; height: 2.4rem; border-radius: 50%; display: grid; place-items: center; font-weight: 700;
  background: var(--orange); color: var(--schwarz); box-shadow: 0 0 0 5px rgba(244, 161, 23,.18); }
.buchung-fakten { margin: .25rem 0 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem;
  border-top: 1px solid rgba(255,255,255,.18); padding-top: 1.1rem; }
.buchung-fakten div { min-width: 0; }
.buchung-fakten dt { font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; color: rgba(255,255,255,.7); }
.buchung-fakten dd { margin: .2rem 0 0; font-size: 1.15rem; font-weight: 700; color: var(--orange); }
.buchung-preis-zusatz { margin: -.6rem 0 0; font-size: .9rem; color: rgba(255,255,255,.75); }
.buchung-tel { margin: auto 0 0; position: relative; z-index: 1; font-size: 1rem; color: rgba(255,255,255,.85); }
.buchung-tel .knopf { margin-top: .6rem; }
.buchung-tel .knopf:hover { background: var(--weiss); border-color: var(--weiss); color: var(--schwarz); }
.buchung-hinweis { margin-top: .25rem; }
@media (max-width: 900px) {
  .buchung-buehne { grid-template-columns: 1fr; }
  .buchung-tafel { order: -1; }
}
@media (max-width: 600px) { .buchung iframe { height: 760px; } .buchung-fakten { grid-template-columns: 1fr 1fr; } }
@media (prefers-reduced-motion: reduce) { .buchung { transition: none; } .buchung:hover, .buchung:focus-within { transform: none; } }