/* =========================================================================
   Black Fox World – Designsystem der Unterseiten (Neon, 2026-09)
   Ausgelagert aus erlebnisse/lasertag.html, damit eine Aenderung nicht in
   jeder Seite einzeln nachgezogen werden muss.
   Enthaelt: Grundlagen, Bedienelemente, Hero, Banner, Preiskacheln,
   Galerie, Regeln, Erlebnis-Karten und die Pass-Schaltflaeche.
   Die Bereichsfarbe kommt ueber eine page--*-Klasse am body.
   Bildpfade sind relativ zu dieser Datei (assets/css/ -> ../img/).
   ========================================================================= */

*{margin:0;padding:0;box-sizing:border-box}
:root{
  /* Neon-System, identische Werte wie index.html – damit Startseite und
     Unterseite dieselben Kanten, Schatten und Signalfarben teilen. */
  --line:#0C1230;      /* Kanten, Schlagschatten, dunkelster Ton */
  --yellow:#FFCC00;    /* Primärfarbe */
  --orange:#FF4D00;    /* Neon Signal, u.a. Fokus-Ring */
  --red:#D13B00;       /* Signal Deep, weiß-text-sicher (4,84:1) */
  --cream:#1B2452;     /* dunkle Sektionsfläche */
  --blue:#1D2857;      /* Navy hell */
  --blued:#161F47;     /* Grundfläche Navy */
  --pop:#FF7A3D;       /* heller Textakzent */
  --skew:-8deg;

  /* Bereichsfarbe Lasertag aus farbsystem-final.html (Zwei-Ebenen-Prinzip):
     --acc    = Fläche. Eyebrow, Pills, Rahmen, Icon-Kreise auf Navy.
                #29D4F0 gegen --blued = 10,3:1, also unkritisch.
     --acc-ex = nur die Extrusion hinter weißer Schrift, −13 % gedimmt
                (Lasertag/Nerf; Obergrenze laut Sebastian, 2026-09-02).
     Achtung: Weiß auf --acc-ex liegt bei 2,37:1 und damit unter der
     3:1-Regel aus dem Briefing. Cyan ist zu hell, um sie zu erreichen,
     ohne die Bereichsfarbe zu verlieren. Deshalb schließt jede Extrusion
     hier mit einem kräftigen dunklen Weichschatten ab, der die Kante
     trägt – dasselbe Prinzip wie .mtitle auf der Startseite. */
  /* Standard-Bereichsfarbe; jede Seite ueberschreibt sie ueber die
     page--*-Klasse am body (Werte aus farbsystem-final.html). */
  --acc:#29D4F0;
  --acc-ex:#24B8D1;
  --acc2:var(--acc);   /* Partnerfarbe, Fallback = Bereichsfarbe */

  /* Dritte Farbe: Pink statt Orange – wie das Lasertag-Muster aus dem CI.
     Auch hier zwei Ebenen, weil ein Ton beides nicht kann:
     --pink    Fläche für Pills und Badges. Navy darauf = 4,99:1.
     --pink-ex Extrusion hinter weißer Schrift = 4,44:1, erfüllt die
               3:1-Regel deutlich (der frühere Ton lag bei 3,88:1).
     Vollgesättigtes Neon-Pink (Wunsch Sebastian, 7.9.2026). Als kleine
     Schrift ist dieser Ton zu dunkel – dafür gibt es --acc-text. */
  --pink:#FF0099;
  --pink-ex:#E6008A;
  /* Fallback fuer die Kante auf gelbem Grund, falls color-mix fehlt (siehe
     .band2). Gedaempftes Gold-Braun: 4,4:1 gegen Gelb, 2,7:1 gegen die
     Navy-Schrift – funktioniert auf jeder Bereichsseite. */
  --yellow-ex:#6B5B1A;

  /* Eigener Ton fuer die harte Kante unter Kacheln: --line (#0C1230) liegt
     zu nah am Grund (#161F47), die Kachel wirkte dadurch flach aufgeklebt. */
  --sh:#05081A;

  /* Icon-Farbe auf Partnerfarben-Kreisen. Die meisten --acc2-Toene sind hell
     (Amber, Gelb, Cyan, Lime): dort traegt nur Dunkel (>= 5:1), Weiss laege
     bei 1,5-2:1. Seiten mit dunkler Partnerfarbe schalten auf Weiss um. */
  --ic2-filter:brightness(0);
}

/* ---------------------------------------------------------- BEREICHSFARBEN
   Zwei Werte je Erlebnis (farbsystem-final.html): --acc fuer Flaechen, Text
   und Raender auf Navy, --acc-ex nur fuer die Extrusion hinter weisser
   Schrift. Eine Klasse am body genuegt, alles Weitere zieht nach. */
/* Textrolle der Bereichsfarbe: Fallback = --acc der jeweiligen Seite.
   Ueberschrieben nur dort, wo die Flaechenfarbe fuer kleine Schrift zu
   dunkel ist (Pink-Familie: #FF0099 haelt als Flaeche 4,99:1 mit
   --line-Text, als 11-13px-Text auf Navy aber nur 4,32:1 – unter 4,5:1).
   Muss am body stehen, nicht im :root – dort wuerde var(--acc) zum
   Grundwert Cyan aufloesen, bevor die page--*-Klasse greift. */
body{--acc-text:var(--acc)}
.page--lasertag {--acc:#29D4F0; --acc-ex:#24B8D1}
.page--escape   {--acc:#2ED9A0; --acc-ex:#24C58F}
.page--nerf     {--acc:#A9E635; --acc-ex:#93C82E}
.page--arcade   {--acc:#FFB020; --acc-ex:#E09B1C}  /* 2026-09-12: Hausgelb #FFCC00 -> Amber, 10,03:1 auf Navy */
.page--axt      {--acc:#FF594C; --acc-ex:#FF594C}  /* 2026-09-12: war #FF7A6B (zu lachsfarben), jetzt dunkler und roter, 5,93:1 auf Navy */
.page--huepfburg{--acc:#FF7AC4; --acc-ex:#FF7AC4}
.page--karaoke  {--acc:#B79BFF; --acc-ex:#B79BFF}
/* Gastro laeuft bewusst ohne eigene Bereichsfarbe im Gruen der Startseite,
   Parkeintritt im Navy-System des Passes. */
.page--gastro   {--acc:#26B061; --acc-ex:#229E57}  /* 2026-09-12: war #1F9E54, etwas heller, 6,52:1 auf Navy */
.page--afterdark{--acc:#FF4D00; --acc-ex:#FF4D00}
.page--pass     {--acc:#7B98E8; --acc-ex:#3F5BB8; --acc2:#FFCC00; --acc2-deep:#856A00}  /* Ticket-Gelb, wie der Pass-Kasten */
/* Dritte Farbe je Bereich (farbsystem-final.html, 3b): --acc2 hat genau drei
   Slots – das Hinweis-Badge .ptag.hot, die Spar-Zeile .pmini .free und der
   Icon-Kreis .rule-icon. Nie Flaeche, nie Extrusion, nie Fliesstext.
   Alle Werte auf Navy (#0C1230) >= 5,29:1, Navy-Schrift darauf ebenso.
   Zwei Doppelungen sind gewollt: Amber bei Escape und Gastro, Gelb/Violett
   spiegeln sich bei Arcade und Karaoke. After Dark bekommt keinen Partner. */
.page--lasertag {--acc2:#FF0099;--ic2-filter:brightness(0) invert(1);--acc2-deep:#D5006A}  /* Pink   · Neon-Klassiker, voll gesaettigt · 4,99:1 (--line) · Weiss nur 3,7:1, deshalb dunkle Schrift */
.page--escape   {--acc2:#FFB020;--acc2-deep:#956000}  /* Amber  · Schatz & Schluessel 10,03:1 */
.page--nerf     {--acc2:#FF7A3D;--acc2-deep:#C34000}  /* Orange · Nerf-Orange          7,08:1 */
.page--arcade   {--acc2:#B79BFF;--acc2-deep:#7944FF}  /* Violett· Flipper-Neon         7,99:1 */
.page--axt      {--acc2:#7FD3FF;--acc2-deep:#00679B}  /* Stahl  · Holz & Stahl        11,06:1 */
.page--huepfburg{--acc2:#6BE3FF;--acc2-deep:#00748F}  /* Himmel · warm gegen kuehl    12,28:1 */
.page--karaoke  {--acc2:#FFCC00;--acc2-deep:#856A00}  /* Gelb   · Buehne & Spot       12,13:1 */
.page--gastro   {--acc2:#FFB020;--acc2-deep:#956000}  /* Amber  · Bier & Burger       10,03:1 */

/* ------------------------------------------------------------ ANLASS-SEITEN
   Erlebnispakete uebernehmen die Farben der Anlass-Kacheln der Startseite –
   der Kunde hat die Farbe beim Klick schon gesehen. Zwei Werte sind auf Navy
   als Text zu dunkel (Firmen-Blau 2,6:1, Rot 4,0:1): dort bleibt der
   Startseiten-Wert die Extrusion (dunkel hinter Weiss = saubere Kante) und
   ein hellerer Zwilling wird --acc fuer Text, Raender und Buttons.
   Partnerfarbe je Anlass: JGA Cyan, Geburtstag Gelb, Firmen Amber, Kids Cyan. */
.page--jga       {--acc:#FF0099; --acc-ex:#E6008A; --acc-text:#FF5FB0; --acc2:#29D4F0; --acc2-deep:#00778A}  /* 5,7:1 · Kante 3,9:1 */
.page--geburtstag{--acc:#FF0099; --acc-ex:#E6008A; --acc-text:#FF5FB0; --acc2:#29D4F0; --acc2-deep:#00778A}  /* Event-Familie: Pink + Cyan wie JGA · 5,7:1 */
/* Partner war Gelb – das macht auf dieser Seite aber schon drei andere
   Jobs (Haus-CTA, Hero-Unterzeile, Banner-Flaeche) und trug keinen davon
   mehr. Violett setzt sich davon ab, ergibt mit Koralle einen warmen
   Sonnenuntergang statt Ketchup-Mustard und bleibt erwachsen. */
.page--firmen    {--acc:#6B96FF; --acc-ex:#2B5CC7; --acc2:#FFB020; --acc2-deep:#956000}  /* 5,6:1 · Kante 6,1:1 */
/* Kids: seit 2026-09-07 in der Pink+Cyan-Event-Familie (Wunsch Sebastian,
   "ebenfalls das Neonfarbschema"). Die fruehere Orange+Himmelblau-Palette
   (#FF8A3D/#6BE3FF) lebt nur noch als Erkennungsfarbe der Kindergeburtstag-
   Kachel unter "Weitere Anlaesse" weiter. */
.page--kids      {--acc:#FF0099; --acc-ex:#E6008A; --acc-text:#FF5FB0; --acc2:#29D4F0; --acc2-deep:#00778A}  /* Pink + Cyan, wie JGA */
/* Vier weitere Anlaesse hatten bisher keine eigene Farbe und liefen alle im
   Firmen-Blau – in der Karten-Reihe "Weitere Anlaesse" waren sie dadurch
   nicht unterscheidbar. Konzept: WARM = privat feiern, KUEHL = Gruppen und
   Organisationen. Innerhalb der acht Anlaesse liegen die Farbtoene mind. 24
   Grad auseinander. Alle Werte gegen Navy-Text geprueft (6,5-12,5:1). */
.page--jugend    {--acc:#A78BFA; --acc-ex:#9179DA; --acc2:#FFCC00; --acc2-deep:#856A00}  /* Violett · 6,7:1 */
.page--azubi     {--acc:#FF0099; --acc-ex:#E6008A; --acc-text:#FF5FB0; --acc2:#29D4F0; --acc2-deep:#00778A}  /* Event-Familie: Pink + Cyan wie JGA · 5,7:1 */
.page--verein    {--acc:#FF0099; --acc-ex:#E6008A; --acc-text:#FF5FB0; --acc2:#29D4F0; --acc2-deep:#00778A}  /* Event-Familie: Pink + Cyan wie JGA · 5,7:1 */
.page--schule    {--acc:#FF0099; --acc-ex:#E6008A; --acc-text:#FF5FB0; --acc2:#29D4F0; --acc2-deep:#00778A}  /* 2026-09-12: war Limette #C8E14A, jetzt Event-Familie Pink + Cyan wie JGA/Azubi/Verein · 5,7:1 */
/* Info-Seiten: komplett auf Amber statt Hausgelb (Sebastian, 2026-09-12:
   "schreibe auf allen Infoseiten statt Gelb lieber mit Amber"). --acc
   (Icons, Chips, Rahmen, kleine Badges) und --acc-ex (Ueberschriften-
   Extrusion) sind jetzt dasselbe Amber-Paar wie bei .page--shop (Gold,
   8,7:1 gegen Navy). Die grossen "Jetzt buchen"-Buttons bleiben davon
   unberuehrt: .btn haengt sitieweit an --yellow (fixer Root-Wert), nicht an
   --acc, genau damit der CTA auf jeder Seite gleich bleibt. */
.page--info      {--acc:#FFB020; --acc-ex:#E09A18}
/* Shop/Gutscheine: Gold als Geschenkfarbe, klar getrennt vom Info-Hausgelb. */
.page--shop      {--acc:#FFB020; --acc-ex:#E09A18; --acc2:#FF7A3D; --acc2-deep:#993000}  /* Gold · 8,7:1 · Koralloranje (--pop-Ton) 5,4:1 - bewusst nicht dasselbe Orange wie die 10er-Karte (var(--orange) #FF4D00), sonst waeren Beliebt-Badge und Kartenrand farblich nicht mehr zu unterscheiden */
/* Kids-Modus: vierter Slot fuer die Partnerfarbe – die Fakten-Chips. Sonst
   identisches System; kindgerecht wird die Seite ueber Bild und Text. */
.page--kids .factrow .fact{border-color:var(--acc2);color:var(--acc2)}


html{scroll-behavior:smooth}
/* Testweise ohne den Verlauf der Startseite: flaches Navy, darauf das
   Diagonal-Strichmuster nach "black-white-stripped-seamless-pattern".
   Weder JPG noch EPS liefern eine Kachel: die 673 Striche liegen als
   Einzelpfade auf einer 900×900-Fläche und die Ränder greifen nicht
   ineinander (Nahtsprung 42 gegen 3 im Blatt). Die Kachel ist deshalb
   aus der gemessenen Vektorgeometrie neu aufgebaut – Linienabstand
   26 pt, Strichbreite 3,7 pt, Strichlängen 34–215 pt, Deckungsgrad
   18 %, also die Werte des Originals. 520 px, exakt nahtlos, 7 KB.
   Farbe #3F5BB8, Deckung 20,8 % ins WebP eingebrannt. */
/* Sitewide nur Archivo (Text) und Clash Display (Ueberschriften/Preise).
   Formularelemente erben die Schrift im Browser nicht von selbst (Standard:
   Arial) – deshalb ausdruecklich (Sebastian, 2026-09-12). */
button,input,select,textarea{font-family:inherit}
body{font-family:"Archivo",system-ui,sans-serif;color:#E9ECF8;
  background-color:var(--blued);
  /* Muster 40% zurueckgenommen (10% schwaecher als zuvor, 2026-09-02):
     eine Lage der Grundfarbe mit 40% Deckkraft liegt ueber der Musterkachel
     und waescht sie entsprechend staerker aus. */
  background-image:linear-gradient(rgba(22,31,71,.4),rgba(22,31,71,.4)),url(../img/muster-stripes.webp?v=20260901e);
  background-size:auto,520px 520px;background-repeat:repeat,repeat;
  line-height:1.55;-webkit-font-smoothing:antialiased}
/* Mobil bleibt es beim flachen Navy – das Streifenmuster wirkte auf kleinen
   Screens unruhig, dazu spart es den Bildrequest unter 760px. */
@media(max-width:760px){body{background-image:none}}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
.wrap{max-width:1180px;margin:0 auto;padding:0 20px}
section{padding:35px 0}
/* Flächige Sektionen transparent, damit der Verlauf durchläuft. */
section.soft,section.white{background:transparent;position:relative}
section.soft .wrap,section.white .wrap{position:relative;z-index:1}
@media(max-width:760px){section{padding:23px 0}}

/* ---------------------------------------------------------- BEDIENELEMENTE */
.btn{display:inline-flex;align-items:center;gap:8px;background:var(--yellow);color:#241A00;font-weight:var(--w-black,900);padding:13px 26px;border-radius:9999px;font-size:15px;letter-spacing:.04em;text-transform:uppercase;border:3px solid var(--line);box-shadow:0 5px 0 var(--line);cursor:pointer;transition:transform .15s cubic-bezier(.34,1.56,.64,1),box-shadow .15s}
@media(hover:hover){.btn:hover{transform:translateY(-2px);box-shadow:0 7px 0 var(--line)}}
.btn:active{transform:translateY(2px);box-shadow:0 2px 0 var(--line)}
/* .btn.zap (Bereichsfarbe als Flaeche) ist retired: alle "Jetzt buchen"-CTAs
   sind jetzt einheitlich Hausgelb (Standard-.btn), damit die Buchen-Aktion
   auf jeder Seite gleich aussieht, egal welche Bereichsfarbe die Seite hat. */
/* Bereichsfarbe als Buttonfläche: Navy auf #29D4F0 = 7,4:1. */
.btn.acc{background:var(--acc);color:var(--line)}
.btn.ghost{background:transparent;color:#fff;border:3px solid rgba(255,255,255,.7);box-shadow:none}
.btn.ghost:hover{background:rgba(255,255,255,.16);box-shadow:none;transform:none}
.btn.big{padding:16px 34px;font-size:16px}
/* Grosse CTAs bleiben einzeilig – ein Umbruch mitten im Button sieht auf
   schmalen Screens nach Fehler aus. Statt umzubrechen skaliert die Schrift
   ueber clamp mit der Viewportbreite herunter. */
.btn.big{white-space:nowrap}
@media(max-width:760px){.btn.big{font-size:clamp(11.5px,3.2vw,16px);padding:14px clamp(14px,4.6vw,34px);letter-spacing:.02em}}
/* Slot: aktiver Navi-Punkt. Die Seite, auf der man steht, traegt im
   Erlebnis-Dropdown ihre eigene Bereichsfarbe. */
/* Spezifitaet 0,3,1: bfx.css faerbt den aktiven Punkt in Zeile 169 weiss
   und wird spaeter geladen, gleiche Spezifitaet wuerde verlieren.
   Bereichsfarbe auf dem blauen Feld #1D2857: 5,52:1 (Axt) bis 9,41:1 (Nerf). */
/* AENDERUNG 2026-09-12 (Sebastian, Punkt 86): galt vorher nur fuer
   .bfx-men-erlebnisse - in den Dropdowns "Geburtstage & Events" und "Infos"
   blieb die aktuelle Seite deshalb unmarkiert. Jetzt fuer jedes Dropdown;
   Spezifitaet bleibt 0,3,1, damit bfx.css (spaeter geladen) nicht gewinnt. */
.bfx-nav .bfx-drop a.is-active{color:var(--acc-text);
  box-shadow:inset 3px 0 0 var(--acc)}
.eyebrow{font-size:13px;font-weight:var(--w-black,900);letter-spacing:.07em;text-transform:uppercase;color:var(--acc-text)}
/* Im Hero liegt die Eyebrow auf dem Foto – ohne Abdunkelung verschwindet
   Cyan in den hellen Laserstrahlen. Dunkler Kern plus weicher Schein. */
.hero .eyebrow{text-shadow:0 1px 2px rgba(6,8,24,.95),0 0 10px rgba(6,8,24,.85),0 0 22px rgba(6,8,24,.6)}
.pillbadge{display:inline-block;background:var(--yellow);color:#241A00;border:2px solid var(--line);box-shadow:0 3px 0 var(--line);padding:5px 16px;border-radius:9999px;font-size:12px;font-weight:var(--w-black,900);letter-spacing:.08em;text-transform:uppercase}
.fine{font-size:10.6px;font-weight:var(--w-med,600);color:#A9B2D6;margin-bottom:18px;line-height:1.6}
/* Der FAQ-Verweis ersetzt seit 2026-09-08 den frueher auf jeder Seite
   wiederholten Storno-/Feiertags-Block (Sebastian). Als Link muss er sich
   vom grauen Kleingedruckten abheben: Akzentfarbe plus Unterstreichung. */
.fine a,.tix-fine a{color:var(--acc-text);font-weight:var(--w-bold,800);text-decoration:underline;text-underline-offset:2px}

/* ------------------------------------------------------- SEKTIONS-HEADLINE
   Linksbündig als Grundregel, wie auf der Startseite. Weiß mit Cyan-
   Extrusion; der hervorgehobene Teil steht in Cyan ohne Extrusion – eine
   Lichtquelle, zwei Töne. Gelb als em wäre auf der Cyan-Kante nur 1,5:1
   und würde verschwimmen. */
/* REGEL (Sebastian, 2026-09-07): Ueberschriften werden nicht umgebrochen,
   wenn es nicht noetig ist. Deshalb begrenzt der Container die H2 nicht mehr
   auf 760px - sie darf die volle .wrap-Breite (1180px) nutzen und bricht nur
   um, wenn sie wirklich nicht passt. Die 760px gelten nur noch fuer den
   Fliesstext darunter (Lesbarkeit). Laengste H2 im System: "Welchem Raetsel
   stellst du dich?" = 1084px bei 54px (fontTools) - passt. */
.sec-head{text-align:left;max-width:none;margin:0 0 16px}
.sec-head .pillbadge{display:block;width:fit-content;margin:0 0 6px}
/* word-spacing: die Extrusion legt sich sonst über die Wortabstände und
   „Einzelrunden & Pakete" liest sich als ein Wort. Gleiches Problem wie im
   Briefing bei der Tiefe der Startseiten-H1 – dort über die Anzahl der
   Ebenen gelöst, hier über den Wortabstand, damit die Tiefe bleibt. */
.sec-head h2{font-family:"Clash Display",system-ui,sans-serif;font-size:clamp(32px,5.2vw,54px);font-weight:700;text-transform:uppercase;letter-spacing:-.01em;word-spacing:.2em;line-height:1.02;margin-top:10px;color:#fff;display:inline-block;transform:skewX(var(--skew));transform-origin:left bottom;padding-right:.14em;
  text-shadow:1px 1px 0 var(--acc-ex),2px 2px 0 var(--acc-ex),3px 3px 0 var(--acc-ex),4px 4px 0 var(--acc-ex),5px 5px 0 var(--acc-ex),7px 8px 14px rgba(0,0,0,.6)}
/* Vertauschte Variante: der erste Teil traegt Cyan mit Navy-Tiefe, der
   hervorgehobene Weiss mit Cyan-Tiefe. Nur Farbe und Extrusion tauschen –
   Cyan auf Cyan waere mit 1,3:1 unsichtbar. */
.sec-head h2.swap{color:var(--acc);
  text-shadow:1px 1px 0 var(--line),2px 2px 0 var(--line),3px 3px 0 var(--line),4px 4px 0 var(--line),5px 5px 0 var(--line),7px 8px 14px rgba(0,0,0,.55)}
.sec-head h2.swap em{color:#fff;
  text-shadow:1px 1px 0 var(--acc-ex),2px 2px 0 var(--acc-ex),3px 3px 0 var(--acc-ex),4px 4px 0 var(--acc-ex),5px 5px 0 var(--acc-ex),7px 8px 14px rgba(0,0,0,.6)}
.sec-head h2 em{font-style:normal;color:var(--acc);
  /* Eigene Extrusion in Navy: ohne Schatten wirkte der Cyan-Teil duenner und
     sass optisch hoeher als der weisse – gleiche Tiefe, gleiche Grundlinie.
     Cyan auf Navy = 10,3:1. */
  text-shadow:1px 1px 0 var(--line),2px 2px 0 var(--line),3px 3px 0 var(--line),4px 4px 0 var(--line),5px 5px 0 var(--line),7px 8px 14px rgba(0,0,0,.55)}
/* Einzeilige Ueberschrift: statt umzubrechen skaliert sie mit der
   Viewportbreite herunter. */
@media(max-width:820px){.sec-head h2.brk em{display:block}}
/* "Geburtstagspaket" ist als einzelnes, langes Wort mit dem sonst ueberall
   sicheren Mindestmass (32px fix unter 615px Breite) auf schmalen Handys
   (320-390px) breiter als der verfuegbare Platz und lief ueber den Rand.
   Mit fontTools nachgerechnet: 22px Mindestgroesse haelt auch das laengste
   Wort mit Sicherheitsabstand innerhalb von 280px (320px-Geraet). */
.sec-head h2.paket-h2{font-size:clamp(22px,5.2vw,54px)}
/* Lange Ueberschriften mit Aufzaehl-Wort + <em>-Teil (z.B. "Alles dabei an
   einem Abend") brauchen bei voller 54px-Groesse mehr Breite (875px laut
   fontTools) als der 760px-Sec-Head-Container hat und brechen deshalb auch
   auf Desktop natuerlich um, nicht nur ueber die .brk-Mobilregel oben.
   Der Wrap (.wrap) hat 1180px Platz – reicht locker. Deshalb hier den
   Container breiter machen statt die Schrift zu verkleinern, damit die
   Ueberschrift genauso gross bleibt wie alle anderen. */
/* .sec-head.wide ist seit der Regel oben ohne Wirkung (Klasse darf im HTML bleiben). */
.sec-head p{font-weight:var(--w-med,600);color:#C0C7E8;margin-top:8px;font-size:17px;max-width:760px}
/* Bewertungs-Hinweis: kleine, ruhige Zeile statt eigenem Banner – Sternchen
   in Gelb traegt die Farbe, der Rest bleibt schlicht Text. */
.sec-head .rating{display:flex;align-items:center;gap:6px;margin-top:9px;font-size:14px;font-weight:var(--w-bold,800);color:#C0C7E8}
.sec-head .rating svg{flex:none;fill:var(--yellow)}

/* ------------------------------------------------------------------- HERO */
.hero{position:relative;color:#fff;overflow:hidden;background:var(--blued);padding:0}
.hero .bg{position:absolute;inset:0;overflow:hidden}
.hero .bg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.92}
.hero .scrim{position:absolute;inset:0;background:radial-gradient(65% 100% at 26% 44%,rgba(8,10,28,.97) 0%,rgba(8,10,28,.9) 28%,rgba(8,10,28,.6) 50%,rgba(8,10,28,.22) 70%,rgba(8,10,28,0) 88%)}
.hero .dots{position:absolute;inset:0;opacity:.09;background-image:radial-gradient(circle,var(--acc) 1.5px,transparent 1.5px);background-size:28px 28px}
/* Unten ausgerichtet statt zentriert: die Startseite hat im Hero
   zusaetzlich das grosse Logo, ihr Textblock ist dadurch hoeher. Zentriert
   endete der CTA hier 101px ueber dem Hero-Boden statt wie dort bei 52px.
   Ueber flex-end sitzen Text und CTA auf beiden Seiten auf derselben Hoehe. */
.hero .inner{position:relative;display:flex;align-items:flex-end;min-height:640px;padding-top:52px;padding-bottom:52px;z-index:1}
/* Kontakt: erst auf 820px erhoeht, damit das Hochformat-Foto (1200x2200)
   weniger gezoomt wirkt - das war dann aber schlicht zu hoch (Sebastian,
   2026-09-10). Jetzt andersherum: flacher als der Standard, der Hero nimmt
   weniger Platz weg. Mobile bleibt unberuehrt (900px-Regel unten). */
.hero--kontakt .inner{min-height:520px}
.hero .copy{max-width:600px}
.hero h1{font-family:"Clash Display",system-ui,sans-serif;font-size:clamp(42px,8vw,86px);font-weight:700;line-height:.94;letter-spacing:-.01em;word-spacing:.2em;margin:10px 0 14px;text-transform:uppercase;display:inline-block;transform:skewX(var(--skew));transform-origin:left bottom;padding-right:.14em;
  text-shadow:1px 1px 0 var(--acc-ex),2px 2px 0 var(--acc-ex),3px 3px 0 var(--acc-ex),4px 4px 0 var(--acc-ex),5px 5px 0 var(--acc-ex),6px 6px 0 var(--acc-ex),7px 7px 0 var(--acc-ex),9px 10px 18px rgba(0,0,0,.62)}
/* REGEL (Sebastian, 2026-09-07): <em> in Ueberschriften ist reine Semantik,
   niemals kursiv. War hier nie zurueckgesetzt worden (anders als bei
   .sec-head h2 em / .ctabox h2 em) -> lief sitewide unbeabsichtigt kursiv.
   Stattdessen bekommt der <em>-Teil dieselbe Behandlung wie in .sec-head h2:
   Akzentfarbe mit eigener Extrusion in Navy. Damit trennt die FARBE die zwei
   Aussagen einer zweiteiligen Ueberschrift, nicht ein Binde- oder Satzzeichen
   (Kindergeburtstag: "Wild feiern / ganz entspannt" – Strich wirkte gebrochen,
   weil die zweite Haelfte ohnehin nie in eine Zeile der 600px-Copy passt).
   Gleiche 7-stufige Tiefe wie die Basis-H1, nur in --line, sonst saesse der
   farbige Teil optisch hoeher. Kontrast auf Navy: Cyan 10,3:1 · Violett 6,7:1
   · Pink 6,6:1 – alle betroffenen Seiten geprueft. */
.hero h1 em{font-style:normal;color:var(--acc);
  text-shadow:1px 1px 0 var(--line),2px 2px 0 var(--line),3px 3px 0 var(--line),4px 4px 0 var(--line),5px 5px 0 var(--line),6px 6px 0 var(--line),7px 7px 0 var(--line),9px 10px 18px rgba(0,0,0,.62)}
.hero p.sub{font-size:clamp(16px,2.3vw,20px);font-weight:var(--w-med,600);max-width:430px;margin-bottom:22px;color:rgba(255,255,255,.92)}
.hero p.sub b{color:var(--yellow);font-weight:var(--w-black,900)}
.hero .cta{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
/* Mobil: Verlauf nur von unten, Text sitzt im unteren Drittel – das Foto
   bekommt oben Luft. Gleiche Logik wie auf der Startseite. */
@media(max-width:900px){
  .hero .scrim{background:linear-gradient(to top,rgba(8,10,28,.96) 0%,rgba(8,10,28,.82) 28%,rgba(8,10,28,.35) 58%,rgba(8,10,28,0) 85%)}
  .hero .inner{min-height:78vh;min-height:82svh;align-items:flex-end;padding-top:38px;padding-bottom:44px}
  .hero .cta{gap:9px}
}

/* ------------------------------------------------------- HERO-DIASHOW
   Uebernommen von der Startseite: mehrere Bilder im .bg (id="heroShow"),
   das erste mit class="is-on". Jedes zoomt 2,5 s um 10 % und blendet zum
   naechsten. Ohne das Skript (oder mit nur einem Bild) bleibt es ein
   normaler Hero – dann greift .hero .bg img von oben. */
.hero .bg.show img{opacity:0;transition:opacity .6s ease-in-out;will-change:transform,opacity;transform:scale(var(--flip,1),1)}
.hero .bg.show img.is-on{opacity:.92;animation:heroZoom 2.5s linear forwards}
/* Das ausblendende Bild haelt die Endgroesse, sonst springt es beim Entfernen
   der Animation auf scale(1) zurueck und ruckelt sichtbar. */
.hero .bg.show img.is-out{opacity:0;transform:scale(calc(var(--flip,1) * var(--hz-to,1.10)),var(--hz-to,1.10))}
/* Spiegelung nur fuer Desktop: auf breiten Schirmen steht die Hero-Schrift
   links, das Motiv teils genau darunter. Gespiegelt wandert die Action nach
   rechts und die Textseite wird ruhig. Mobil bleibt das Original, dort ist
   der Ausschnitt ohnehin enger. */
@media(min-width:901px){
  .hero .bg img.flip-desk{transform:scaleX(-1)}
  /* In der Diashow setzt die Zoom-Animation transform selbst und ueberschreibt
     damit jede einfache scaleX(-1)-Regel (Animationen gewinnen immer gegen
     eine statische Deklaration derselben Eigenschaft). Die Spiegelung laeuft
     dort stattdessen ueber --flip, das oben und in den Keyframes mit in die
     Skalierung multipliziert wird. */
  .hero .bg.show img.flip-desk{--flip:-1}
}
/* --hz-from/--hz-to koennen pro Bild ueberschrieben werden, falls ein Dia
   eine andere Basisgroesse braucht. Hochformat-Fotos in der breiten Desktop-
   Box loest man aber besser per <picture> mit eigenem Desktop-Schnitt (siehe
   JGA-Hero) – ein Scale unter 1 zeigt sonst Hintergrund links/rechts. */
@keyframes heroZoom{
  from{transform:scale(calc(var(--flip,1) * var(--hz-from,1)),var(--hz-from,1))}
  to{transform:scale(calc(var(--flip,1) * var(--hz-to,1.10)),var(--hz-to,1.10))}
}
@media(prefers-reduced-motion:reduce){
  .hero .bg.show img.is-on{animation:none}
  .hero .bg.show img{transition:none}
}

/* ------------------------------------------------------------ 700-M²-BAND
   Flach gehalten – bei zu viel Höhe liest sich der gelbe Block wie ein
   Seitenende statt wie ein Trenner. Auf Gelb kehrt sich das Extrusions-
   Prinzip um: dunkle Lettern, knalliges Rot als Tiefe (3,62:1 zu Gelb). */
/* Die Kante der Banner-Headline kommt aus der PARTNERFARBE der Seite, tief
   gezogen aber voll gesaettigt (--acc2-deep je Seite). Das war schon immer
   die Logik hinter dem Lasertag-Pink, nur nie festgeschrieben. Ein Mischen
   mit Navy hatten wir kurz drin – das entsaettigt die Toene zu Schlamm und
   nimmt dem Banner den Spass. Zielwert: rund 3,4:1 gegen das Bannergelb. */
.band2{background:var(--yellow);color:var(--line);text-align:center;padding:26px 0 24px;border-top:4px solid var(--line);border-bottom:4px solid var(--line);--band2-shadow:var(--acc2-deep,var(--yellow-ex))}
.band2 .big{font-family:"Clash Display",system-ui,sans-serif;font-weight:700;color:var(--line);font-size:clamp(46px,9vw,96px);line-height:.86;letter-spacing:-.01em;word-spacing:.16em;display:inline-block;transform:skewX(var(--skew));transform-origin:left bottom;padding-right:.12em;
  text-shadow:1px 1px 0 var(--band2-shadow),2px 2px 0 var(--band2-shadow),3px 3px 0 var(--band2-shadow),4px 4px 0 var(--band2-shadow),5px 5px 0 var(--band2-shadow),6px 6px 0 var(--band2-shadow),7px 7px 0 var(--band2-shadow),8px 8px 0 var(--band2-shadow),11px 11px 16px rgba(0,0,0,.22)}
@media(max-width:640px){.band2 .big{font-size:clamp(42px,12vw,72px);text-shadow:1px 1px 0 var(--band2-shadow),2px 2px 0 var(--band2-shadow),3px 3px 0 var(--band2-shadow),4px 4px 0 var(--band2-shadow),6px 6px 10px rgba(0,0,0,.22)}}
.band2 .big .u{font-size:.42em;vertical-align:.5em}
.band2 .tag{font-weight:var(--w-black,900);font-size:clamp(15px,2.4vw,20px);text-transform:uppercase;margin-top:10px;letter-spacing:.02em;line-height:1.25}
.band2 .stats{display:flex;justify-content:center;flex-wrap:wrap;gap:10px;margin-top:20px}
.band2 .stat{background:var(--line);color:#fff;border:2px solid var(--line);border-radius:9999px;padding:8px 18px;font-weight:var(--w-bold,800);font-size:14px;display:inline-flex;align-items:center;gap:6px}
/* Der eine verlinkte Chip trägt die Bereichsfarbe, Navy als Schrift. */
.band2 a.stat{background:var(--acc);color:var(--line);font-weight:var(--w-black,900);transition:transform .15s}
@media(hover:hover){.band2 a.stat:hover{transform:translateY(-2px)}}
@media(max-width:760px){.band2 .stat{font-size:12px;padding:6px 13px}}
/* Mobil traegt der gelbe Banner zu viel Hoehe fuer seinen Informationswert
   und entfaellt dort ganz. Der "im Pass inklusive"-Hinweis steht dafuer
   direkt im Hero-Subtext (pink hervorgehoben). */
@media(max-width:760px){.band2{display:none}}

/* ------------------------------------------------------------ PREISKACHELN
   Sechs kompakte Kacheln im Format der Pass-Tiers. Alle Preiszeilen (tone-a,
   tone-c, tone-d) teilen denselben Hellblau-Ton, die Zeilenlabels trennen
   die Angebotsarten. Details rechnet buchen.php. */
.pgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:6px}
/* Sechserraster mit leerer Rinne zwischen Runden und Pauschalangeboten.
   Der 22px-Track bleibt unbesetzt (kein zusaetzliches Element noetig) und
   gibt zusammen mit den beiden Luecken 46px Abstand. Wichtig: alle sechs
   Kacheln behalten dadurch dieselbe Breite – ueber Raender an den Nachbarn
   waere Online-Spezial als einzige voll breit geblieben. */
/* Alle Preiskacheln einer Seite gleich hoch - Specials sahen sonst groesser
   aus als die Standardpreise (Sebastian, 2026-09-12). */
.pmini{position:relative;display:flex;flex-direction:column;border-radius:14px;padding:14px 8px 13px;min-height:130px;text-align:center;border:3px solid var(--tb);background:var(--tf);box-shadow:0 7px 0 var(--sh),0 12px 18px rgba(0,0,0,.42);cursor:pointer;user-select:none;transition:transform .13s,box-shadow .13s}
@media(hover:hover){.pmini:hover{transform:translateY(-4px);box-shadow:0 11px 0 var(--sh),0 18px 26px rgba(0,0,0,.46)}}
.pmini:active{transform:translateY(3px);box-shadow:0 3px 0 var(--sh),0 5px 9px rgba(0,0,0,.34)}
/* Preiskacheln im Bereichsfarben-System (Option B, 2026-09-02):
   Navy-Flaeche (--blue #1D2857), 3px Rand in --acc, Preis weiss mit
   --acc-ex-Extrusion – die Bereichsfarbe traegt wie in den fuenf Slots
   (Kante + Extrusion), keine helle Fremdflaeche mehr. Alle tone-* Klassen
   sind gleich; sie bleiben nur wegen des HTML bestehen.
   Kontrast: weiss auf #1D2857 = 14,1:1, Nebentext #C0C7E8 = 8,4:1,
   --acc als Rand gegen #1D2857 = 4,1–9,4:1 (alle Bereiche).
   Fruehere Varianten (helle Flaeche #DCE4FA mit Pink-Extrusion, Creme-
   Bestkachel #FFF1C2) sind verworfen. */
.pmini{--tf:var(--blue);--tb:var(--acc)}
/* Bestkachel (4 Runden, 4+1): nur dezent hervorgehoben, nicht vollfarbig –
   die Preisansicht soll ruhig bleiben. Flaeche leicht mit der Bereichsfarbe
   getoent (14 % eingemischt), Rand bleibt --acc, Schrift bleibt weiss.
   Fallback fuer alte Browser ohne color-mix: normales Navy. */
.pmini.best{--tf:var(--blue)}
@supports(background:color-mix(in srgb,red 10%,blue)){.pmini.best{--tf:color-mix(in srgb,var(--acc) 14%,var(--blue))}}
/* Partnerfarbe-Slot 2: Spar-Zeile. */
.pmini .free{display:block;margin-top:5px;font-weight:var(--w-black,900);font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:var(--acc2);opacity:1}
/* Das Durchschnittszeichen sitzt in einer 900er-Zeile und wirkt als
   geschlossene Form darin klobig. Archivo ist variabel bis 100, deshalb
   ein eigener leichter Schnitt – und minimal groesser, damit es neben den
   Ziffern nicht kleiner wirkt. */
.free .avg{font-weight:300;font-size:1.14em;letter-spacing:.01em}
/* Die Spar-Zeile laeuft in der Partnerfarbe --acc2. Auf der Lasertag-Seite ist
   das #FF0099 - auf der Kachelflaeche (--blue #1D2857) nur 3,8:1 und bei 11px
   Versalien zu schwach zu lesen (Sebastian, 2026-09-12). Nur diese Zeile
   bekommt einen helleren Ton derselben Farbfamilie: 6,5:1. Hinweis-Badge
   (.ptag.hot) und Icon-Kreis behalten das gesaettigte Pink. */
.page--lasertag .pmini .free{color:#FF8ACB}
/* Die 4-Runden-Kachel ist nicht mehr farbig hinterlegt (.best im Markup
   entfernt) - die Auszeichnung traegt allein das Badge, im selben hellen Pink
   wie die Spar-Zeile (Sebastian, 2026-09-12). */
.page--lasertag .pmini > .ptag{color:#FF8ACB;border-color:#FF8ACB}
/* Huepfburg: das "Bester Preis"-Badge laeuft im Himmelblau der Seite
   (--acc2 #6BE3FF) statt im Pink der Bereichsfarbe (Sebastian, 2026-09-12). */
.page--huepfburg .pmini > .ptag{color:var(--acc2);border-color:var(--acc2)}
.pmini .t{display:flex;align-items:center;justify-content:center;height:30px;margin:0 6px;font-weight:var(--w-bold,800);font-size:13.5px;color:#fff;line-height:1.1;border-bottom:2px dashed rgba(255,255,255,.24)}
/* Kacheln mit kuerzerem Untertext hatten unten 31px Leerraum, waehrend die
   anderen bei 18px lagen – dadurch wirkte vor allem Online-Spezial zu hoch.
   Die auto-Raender mitteln Preis und Untertext im freien Raum aus. */
.pmini .t{margin-bottom:11px}
.pmini .s{margin-bottom:auto}
/* In der Sparfuchs-Zeile sitzt der Preis fest unter dem Titel statt im
   freien Raum ausgemittelt – sonst stehen die beiden Preise unterschiedlich
   hoch, weil die eine Kachel eine Zeile mehr Untertext hat.
   margin-top:0, nicht 11px: der Titel bringt seine 11px bereits mit, sonst
   verdoppelt sich der Abstand zur gestrichelten Linie. */
.pgrid.sf .pmini .p{margin-top:0}
.pmini .p{font-family:"Clash Display",system-ui,sans-serif;font-weight:700;font-size:26px;color:#fff;line-height:1.05;word-spacing:.16em;margin-top:auto;display:inline-block;transform:skewX(var(--skew));transform-origin:left bottom;padding-right:.1em;text-shadow:1px 1px 0 var(--acc-ex),2px 2px 0 var(--acc-ex),3px 3px 5px rgba(0,0,0,.35)}
.pmini .s{font-size:10.5px;font-weight:var(--w-med,600);color:#C0C7E8;margin-top:2px;line-height:1.25}
/* Badges ueber den Kacheln: keine Farbflaeche, sondern Kontur – Navy-Grund
   (wie die Seite), 2px Rand und Schrift in der Bereichsfarbe. Ruhiger, und
   das Badge verschmilzt nicht mit dem Kachelrand.
   .hot (Preisvorteil) ist Partnerfarbe-Slot 1: gleiche Kontur in --acc2. */
/* z-index: bei .tix ist auch .tix-paper position:relative (frueher fuer die
   Ticket-Kerben gebraucht) und steht im Markup nach dem .ptag – ohne
   z-index gewinnt bei gleichem Stack-Level die Baumreihenfolge, und die
   Kachel deckt das Badge zu. Explizites z-index holt es zuverlaessig nach
   oben, unabhaengig von der Reihenfolge im Markup. */
.ptag{position:absolute;top:-17px;left:50%;transform:translateX(-50%);z-index:2;background:var(--blued);color:var(--acc-text);font-size:10.5px;font-weight:var(--w-black,900);padding:2px 10px;border-radius:9999px;white-space:nowrap;border:2px solid var(--acc);text-transform:uppercase;letter-spacing:.03em}
.ptag.hot{background:var(--acc2);color:var(--line);border-color:var(--acc2)}
/* Zeilen-Label über jeder Preisebene. */
.prow-label{display:flex;align-items:center;gap:10px;margin:26px 0 12px;font-weight:var(--w-black,900);font-size:12.5px;letter-spacing:.07em;text-transform:uppercase;color:#C0C7E8}
.prow-label::after{content:"";flex:1;height:2px;background:rgba(255,255,255,.13)}
.prow-label.acc{color:var(--acc-text)}
.prow-label.acc::after{background:rgba(41,212,240,.22)}
/* Gleiche Form wie die anderen Zeilenueberschriften, nur in der
   Primaerfarbe – der Pass hebt sich ueber die Farbe ab, nicht ueber die Form. */
.prow-label.pass{color:var(--yellow)}
.prow-label.pass::after{background:rgba(255,204,0,.32)}
.pgrid.four{grid-template-columns:repeat(4,minmax(0,1fr));max-width:840px}
.pgrid.two{grid-template-columns:repeat(2,minmax(0,1fr));max-width:560px}
.pgrid.three{grid-template-columns:repeat(3,minmax(0,1fr));max-width:860px}
/* Sechs Stufen nebeneinander, z. B. die Spielerzahl-Staffel der Escape Rooms. */
.pgrid.six{grid-template-columns:repeat(6,minmax(0,1fr))}
@media(max-width:1000px){.pgrid.three,.pgrid.six{grid-template-columns:repeat(3,minmax(0,1fr));max-width:none}}
/* Mobil zwei Spalten – mehr Kacheln gleichzeitig im Bild. Größere Abstände,
   damit die Kacheln nicht als ein Block verschwimmen; der vertikale Wert
   muss über 24px liegen, sonst stößt das Badge an die Kachel darüber. */
@media(max-width:760px){.pgrid,.pgrid.four,.pgrid.three,.pgrid.six{grid-template-columns:repeat(2,minmax(0,1fr));gap:30px 14px}}

/* Statt einer zweiten Preistabelle nur ein Verweis: der Pass hat eigene
   Stufen und Bedingungen und stand hier in direkter Konkurrenz zu den
   Lasertag-Preisen. Komplett in Clash Display, Markenname extrudiert. */
.passbox{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;
  margin-top:28px;padding:24px 28px;border-radius:18px;background:#223070;border:3px solid var(--acc);
  box-shadow:0 7px 0 var(--sh),0 12px 18px rgba(0,0,0,.42);cursor:pointer;user-select:none;
  transition:transform .13s,box-shadow .13s;container-type:inline-size}
@media(hover:hover){.passbox:hover{transform:translateY(-3px);box-shadow:0 10px 0 var(--sh),0 16px 24px rgba(0,0,0,.46)}}
.passbox:active{transform:translateY(3px);box-shadow:0 3px 0 var(--sh),0 5px 9px rgba(0,0,0,.34)}
.pb-text{font-family:"Clash Display",system-ui,sans-serif;flex:0 1 auto;min-width:0}
/* Der Einleitungssatz laeuft im Fliesstext-Font, nur "Hol dir den" und der
   Markenname stehen in Clash Display. */
.pb-lead{display:block;font-family:"Archivo",system-ui,sans-serif;font-size:clamp(15px,1.6vw,19px);
  font-weight:var(--w-med,600);letter-spacing:0;color:#E9ECF8;line-height:1.4}
/* Kein max-width mehr: Fliesstext bricht nur um, wenn der Platz wirklich
   fehlt (Regel Sebastian, 2026-09-07 – gilt fuer alle Texte). */
.pb-sub{display:block;margin-top:12px;font-size:clamp(16px,1.8vw,22px);font-weight:600;
  text-transform:uppercase;letter-spacing:.03em;color:var(--acc-text);line-height:1}
/* "BLACK FOX PASS" muss immer in einer Zeile bleiben (kein &nbsp;-Umbruch
   erlaubt) – die alte vw-Groesse kannte aber weder die Passbox-Innenabstaende
   noch den "Mehr"-Button daneben und lief deshalb bei bestimmten Breiten
   ueber den Kasten hinaus. Jetzt haengt die Schriftgroesse per Container-
   Query an der tatsaechlichen Breite von .passbox (container-type oben).
   Aus der echten Schriftdatei vermessen: "BLACK FOX PASS" braucht mit
   letter-/word-spacing 9,238em Breite pro 1px Schriftgroesse. Beide
   Formeln unten bleiben mit ~10% Sicherheitsabstand darunter – rechnerisch
   kann der Name also nicht ueberlaufen, in keiner Kastenbreite. */
.pb-brand{display:block;margin-top:6px;font-weight:700;text-transform:uppercase;color:#fff;
  white-space:nowrap;font-size:26px;line-height:1;letter-spacing:-.01em;word-spacing:.16em;
  transform:skewX(var(--skew));transform-origin:left bottom;padding-right:.12em;
  text-shadow:1px 1px 0 var(--acc-ex),2px 2px 0 var(--acc-ex),3px 3px 0 var(--acc-ex),
              4px 4px 0 var(--acc-ex),5px 5px 0 var(--acc-ex),7px 8px 14px rgba(0,0,0,.55)}
/* Unter 601px Kastenbreite steht .pb-pill (Breakpoint weiter unten) allein
   in der naechsten Zeile - .pb-brand hat dann die volle Breite fuer sich
   (Passbox-Innenabstand hier 12px seitlich, siehe @media weiter unten).
   Beide Formeln zielen auf ~90% der rechnerisch verfuegbaren Breite, damit
   der Name so gross wie moeglich wird und trotzdem sicher in die Box passt.
   Auf schmalen Handys (~350-400px) ist das physikalisch trotzdem nur
   ~30-36px, weil "BLACK FOX PASS" bei jeder Groesse 9,238x Breite pro
   Schriftgroesse braucht – mehr laesst sich ohne Zeilenumbruch nicht
   sicher unterbringen. */
@container (max-width:600px){
  .pb-brand{font-size:clamp(25px,calc(9.74cqi - 2.34px),56px)}
}
/* Ab 601px teilt sich .pb-brand die Zeile mit der ~122px breiten Pille plus
   24px Abstand plus 56px Passbox-Innenabstand – deshalb der groessere Abzug. */
@container (min-width:601px){
  .pb-brand{font-size:clamp(39px,calc(9.74cqi - 19.68px),92px)}
}
/* Gelb wie jeder Buchen-/Aktions-CTA (Standard-.btn-Optik), unten auf der
   Grundlinie von "BLACK FOX PASS" ausgerichtet (align-self:flex-end statt
   der zentrierten Kastenachse). */
.pb-pill{flex:none;align-self:flex-end;font-family:"Clash Display",system-ui,sans-serif;background:var(--yellow);color:#241A00;
  font-weight:700;font-size:16px;letter-spacing:.06em;text-transform:uppercase;padding:11px 32px;
  border-radius:9999px;border:3px solid var(--line);box-shadow:0 5px 0 var(--line)}
@media(max-width:600px){.passbox{padding:20px 12px}.pb-pill{width:100%;align-self:auto;text-align:center}}

/* ---------------------------------------------------------------- GALERIE */
/* Sechs Motive im 3×2-Raster. lasertag-lasertag-team.webp bleibt draußen
   (Dublette des alten Hero-Fotos) – dafür ist das aktuelle Hero-Motiv drin. */
.gal-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:24px}
/* Galerie-Varianten je Bildanzahl. Bei fuenf Bildern dasselbe 12er-Raster
   wie bei den Karten: drei oben, zwei unten, beide Reihen randbuendig. */
.gal-grid.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.gal-grid.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.gal-grid.g5{grid-template-columns:repeat(12,minmax(0,1fr))}
.gal-grid.g5>.gal-item{grid-column:span 4}
.gal-grid.g5>.gal-item:nth-child(n+4){grid-column:span 6}
/* AENDERUNG 2026-09-12 (a): Galeriebilder standen kurzzeitig ueberall hochkant
   im Kartenformat 3/4. AENDERUNG 2026-09-12 (b, Sebastian Punkt 80): wieder
   zurueck ins Querformat, jetzt einheitlich 4/3 - fast alle Motive im Bestand
   sind quer aufgenommen (4:3 oder 16:9), im Hochformat hat der Ausschnitt
   oben und unten zu viel weggeschnitten. Gilt fuer Raster, Mobil-Reel und
   Desktop-Karussell. Die frueheren Sonderformate (.gal-grid.wide 4:3,
   Standard 2:3) bleiben gestrichen, .wide ist im Markup wirkungslos. */
.gal-item{position:relative;border-radius:16px;overflow:hidden;border:3px solid #7B98E8;box-shadow:0 7px 0 var(--sh),0 12px 18px rgba(0,0,0,.42);aspect-ratio:4/3;cursor:pointer;transition:transform .2s cubic-bezier(.34,1.56,.64,1),box-shadow .2s,border-color .2s}
/* Bildausschnitt kommt aus --op (Desktop) bzw. --op-m (Mobil) am <img>, nicht
   mehr aus einem inline object-position - nur so laesst sich der Ausschnitt
   pro Bruchpunkt getrennt setzen (Sebastian, 2026-09-12). Ohne Angabe: Mitte. */
.gal-item img{width:100%;height:100%;object-fit:cover;display:block;object-position:var(--op,50% 50%)}
/* AENDERUNG 2026-09-12 (Sebastian): Bildunterschriften auf den Galeriefotos
   entfernt - Regeln .gal-item .gal-scrim, .gal-cap und die zugehoerige
   Mobil-Schriftgroesse sind ersatzlos gestrichen, das Markup (.gal-scrim,
   .gal-cap) ist auf allen Seiten mit raus. Die Bilder stehen jetzt ohne Text. */
@media(hover:hover){.gal-item:hover{transform:translateY(-5px) scale(1.03);box-shadow:0 12px 0 var(--sh),0 20px 28px rgba(0,0,0,.46);border-color:var(--acc);z-index:10;position:relative}}
/* Mobil als Karussell mit Center-Snap – dasselbe Muster wie das
   Erlebnis-Karussell der Startseite, nur ohne Klone: sechs Bilder sind
   überschaubar, ein Endlos-Umschlag wäre hier unnötige Mechanik.
   Die negativen Ränder heben das Seitenpadding auf, damit das Karussell
   randlos läuft; das Innenpadding zentriert erstes und letztes Bild. */
@media(max-width:760px){
  .gal-grid.g5>.gal-item,.gal-grid.g5>.gal-item:nth-child(n+4){grid-column:auto}
  .gal-grid,.gal-grid.g2,.gal-grid.g4,.gal-grid.g5{display:flex;grid-template-columns:none;overflow-x:auto;
    scroll-snap-type:x mandatory;gap:12px;
    margin-left:-20px;margin-right:-20px;
    padding:6px max(20px,calc(50% - 150px)) 10px;
    scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .gal-grid::-webkit-scrollbar{display:none}
  /* AENDERUNG 2026-09-12 (c, Sebastian): Mobil stehen die Galeriebilder
     hochkant (3/4), auf dem Desktop quer (4/3) - "Art Direction" allein ueber
     CSS, dieselbe Bilddatei. Wo der Hochkant-Ausschnitt das Motiv anschneidet,
     bekommt das <img> zusaetzlich ein --op-m fuer den mobilen Ausschnitt. */
  .gal-item{flex:0 0 70vw;max-width:300px;aspect-ratio:3/4;scroll-snap-align:center;scroll-snap-stop:always}
  .gal-item img{object-position:var(--op-m,var(--op,50% 50%))}
  /* AENDERUNG 2026-09-12: .page--escape .gal-item.jtr{order:-1} gestrichen.
     Der Sprung ueber order hat die Reihenfolge veraendert und die Messung der
     Satzbreite im Endlos-Reel verfaelscht (order gilt auch fuer die Klone).
     Start bei Jack the Ripper laeuft jetzt ueber die Scrollposition, die
     Reihenfolge der Raeume bleibt unveraendert. */
}
/* ------------------------------------------- GALERIE ALS KARUSSELL (Desktop)
   Ab 761px laeuft jede Bildergalerie als Ueberblendung mit Pfeilen und Punkten
   statt als Raster - dieselbe Mechanik wie das Karussell auf After Dark
   (Sebastian, 2026-09-12). Unter 761px bleibt alles wie gehabt: Swipe-Reel mit
   Center-Snap. Die Klasse .is-car und der Rahmen .gal-car kommen aus
   assets/js/bfx-gallery.js - ohne JS bleibt das Raster stehen. */
.gal-car{position:relative;margin-top:24px;width:min(100%,760px);margin-inline:auto}
.gal-car .gal-grid{margin-top:0}
.gal-grid.is-car{display:block;position:relative;aspect-ratio:4/3;border-radius:18px;overflow:hidden;
  border:3px solid var(--acc);box-shadow:0 7px 0 var(--sh),0 12px 18px rgba(0,0,0,.42);background:#0C1230}
.gal-grid.is-car>.gal-item{position:absolute;inset:0;aspect-ratio:auto;border:0;border-radius:0;box-shadow:none;
  opacity:0;transition:opacity .7s ease}
.gal-grid.is-car>.gal-item.is-on{opacity:1;z-index:1}
@media(hover:hover){.gal-grid.is-car>.gal-item:hover{transform:none;box-shadow:none;border:0}}
.gal-car-btn{position:absolute;top:50%;transform:translateY(-50%);z-index:3;width:46px;height:46px;border-radius:50%;
  border:3px solid var(--line);background:var(--acc);color:var(--line);font-size:30px;line-height:1;font-weight:700;
  display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 4px 0 var(--line);padding:0 0 3px}
.gal-car-btn.prev{left:10px}.gal-car-btn.next{right:10px}
.gal-car-btn:hover{transform:translateY(calc(-50% - 2px))}
.gal-car-dots{position:absolute;left:0;right:0;bottom:12px;z-index:3;display:flex;justify-content:center;gap:8px}
.gal-car-dots button{width:11px;height:11px;border-radius:50%;border:2px solid #fff;background:transparent;padding:0;cursor:pointer;opacity:.85}
.gal-car-dots button[aria-selected="true"]{background:var(--acc);border-color:var(--acc)}

/* Punkt 29 (Sebastian, 2026-09-12): ein "&" in der Hero-Headline bekommt keine
   Extrusion - der Schatten macht das Zeichen unruhig. Gilt fuer jedes <span
   class="amp"> in einer H1. */
.hero h1 .amp{text-shadow:none;-webkit-text-stroke:0}
/* Zweiteilige Hero-Headline, die pro Teil in eine Zeile gehoert
   (Axtwerfen: "Axtwerfen" / "Freunde treffen"): span.nb haelt den zweiten
   Teil zusammen, die Seite bekommt dafuer eine etwas kleinere Stufe, damit
   die Zeile in die 600px-Copy passt (Sebastian, 2026-09-12). */
.hero h1 .nb{white-space:nowrap}
/* Kerning-Korrektur fuer das Versalpaar L+T (Sebastian, 2026-09-12, Punkt 83):
   Clash Display bringt fuer Grossbuchstaben keine Kern-Paare mit, dadurch steht
   das T in "WELT" sichtbar weiter weg als das L vom E. Das L bekommt deshalb
   negatives letter-spacing. Anwendung im Markup: We<span class="kt">l</span>t.
   Nur in Clash-Display-Schriftzuegen sinnvoll (H1, sec-head h2, whatbox h3). */
.kt{letter-spacing:-.05em}
.page--axt .hero h1{font-size:clamp(33px,6.2vw,74px)}
/* Huepfburg: "Hüpfburg-Welt" brach am Bindestrich um. Der Teil haengt jetzt
   in span.nb zusammen; damit die Zeile in den Hero passt, bekommt nur diese
   Seite eine breitere Copy-Spalte (Ausnahme von den 600px) und eine etwas
   kleinere H1-Stufe (Sebastian, 2026-09-12, Punkt 69). */
.page--huepfburg .hero .copy{max-width:700px}
.page--huepfburg .hero h1{font-size:clamp(42px,8vw,78px)}

/* Sternchen-Verweis auf die Fussnote: gleiche Farbe wie der Text, nur hoch
   gestellt - soll nicht wie ein Link aussehen (Sebastian, 2026-09-12). */
.ast{color:inherit;text-decoration:none;font-weight:inherit;vertical-align:super;font-size:.8em;line-height:0}
.ast:hover{text-decoration:underline}

/* Downloads: die Person steht ganz links im Motiv und lag damit genau unter
   der Hero-Schrift; auf schmalen Schirmen schnitt der Ausschnitt sie ganz weg.
   Das Bild wird jetzt auf allen Breiten gespiegelt (nicht nur ab 901px) und
   der Ausschnitt haelt sie vom Rand weg (Sebastian, 2026-09-12). */
.page--info .hero .bg img.flip-always{transform:scaleX(-1)}

/* Hero-H1 auf schmalen Displays: "Deutschlands groesste Huepfburg-Welt" ist
   das laengste Wortpaar im Bestand und passt bei 42px nicht mehr in die Zeile -
   die Headline lief ueber den rechten Rand hinaus und brach vierzeilig um
   (Sebastian, 2026-09-12). Nur diese Seite bekommt eine kleinere Stufe, alle
   anderen Heroes bleiben unveraendert. */
@media(max-width:520px){
  .page--huepfburg .hero h1,
  .page--jugend .hero h1{font-size:clamp(30px,8.6vw,42px)}
  /* Lange deutsche Komposita ("Verbraucherstreitbeilegung",
     "Willkommensgeschenk") passen auf Handybreite in keine Zeile und liefen
     ueber den rechten Rand. Auf schmalen Schirmen darf deshalb getrennt
     werden - die Sprache steht als lang="de" im <html>, den Rest macht der
     Browser (Sebastian, 2026-09-12). */
  h1,h2,h3,.mtitle,.sec-head h2{hyphens:auto;-webkit-hyphens:auto;overflow-wrap:break-word}
  /* Kartentitel trennen nur dort, wo im Text ein &shy; steht - das Woerterbuch
     des Browsers trennte "Kinderge-burtstag" statt "Kinder-geburtstag"
     (Sebastian, 2026-09-12, Punkt 92). */
  .mtitle{hyphens:manual;-webkit-hyphens:manual}
}

.gal-lightbox{display:none;position:fixed;inset:0;z-index:99999;background:rgba(8,10,28,.86);align-items:center;justify-content:center;padding:12px}
.gal-lightbox.open{display:flex}
.gal-lightbox img{width:auto;height:auto;max-width:min(800px,92vw);max-height:min(800px,86vh);object-fit:contain;border-radius:16px;border:3px solid var(--acc);box-shadow:0 14px 44px rgba(0,0,0,.55)}

/* ------------------------------------------------------- WAS-IST-DAS-BOX
   Steht als eigene Kategorie unter "Regeln & Hinweise" und erklaert in zwei
   Saetzen, was das Erlebnis ueberhaupt ist (Sebastian, 2026-09-08 - Texte
   von blackfoxworld.de uebernommen). Gleiche Kastenoptik wie .passbox
   (Navy-Flaeche, 3px Rand, harte Kante), aber im Seiten-Akzent statt Gelb,
   damit sie nicht mit einem CTA verwechselt wird. Ueberschrift wie alle
   Clash-Display-Zeilen: versal und um 8 Grad gekippt. */
.whatbox{margin-top:26px;padding:22px 26px 24px;border-radius:18px;background:#223070;
  border:3px solid var(--acc);box-shadow:0 7px 0 var(--sh),0 12px 18px rgba(0,0,0,.42)}
/* Vertauschte Extrusion (Sebastian, 2026-09-08), dasselbe Prinzip wie
   .sec-head h2.swap: der erste Teil steht in der Akzentfarbe mit Navy-Tiefe,
   der <em>-Teil weiss mit Akzent-Tiefe. */
.whatbox h3{font-family:"Clash Display",system-ui,sans-serif;font-weight:700;text-transform:uppercase;
  font-size:clamp(21px,2.4vw,28px);line-height:1.04;letter-spacing:-.01em;word-spacing:.16em;color:var(--acc);
  display:inline-block;transform:skewX(var(--skew));transform-origin:left bottom;padding-right:.12em;
  text-shadow:1px 1px 0 var(--line),2px 2px 0 var(--line),3px 3px 0 var(--line),4px 5px 9px rgba(0,0,0,.55)}
/* <em> ist auch hier reine Semantik, nie kursiv (Hausregel). */
.whatbox h3 em{font-style:normal;color:#fff;
  text-shadow:1px 1px 0 var(--acc-ex),2px 2px 0 var(--acc-ex),3px 3px 0 var(--acc-ex),4px 5px 9px rgba(0,0,0,.55)}
.whatbox p{margin-top:12px;font-size:15px;font-weight:var(--w-med,600);color:#D6DAF0;line-height:1.5}
@media(max-width:760px){.whatbox{padding:18px 16px 20px}.whatbox p{font-size:14px}}

/* ------------------------------------------------------------------ REGELN */
/* Zeilen auto statt 1fr: mit 1fr wurden ALLE Kacheln so hoch wie die
   laengste – kurze Hinweise standen dann in halb leeren Kaesten. */
.rules-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:24px 0}
.rule{display:flex;align-items:flex-start;gap:12px;background:#223070;border:2px solid #3F5BB8;border-radius:12px;padding:14px}
/* Eine Regel-Kachel darf ein Link sein (Allergene, Sebastian 2026-09-12):
   gleiche Optik, nur klickbar. */
a.rule{text-decoration:none;color:inherit;transition:transform .15s,border-color .15s}
@media(hover:hover){a.rule:hover{transform:translateY(-3px);border-color:var(--acc)}}
.rule p{margin:0;font-size:13px;font-weight:var(--w-med,600);color:#C0C7E8;line-height:1.45}
.rule strong{display:block;font-size:14px;margin-bottom:3px;color:#fff}
/* Partnerfarbe-Slot 3: Icon-Kreis. */
.rule-icon{width:52px;height:52px;flex:none;border-radius:50%;background:var(--acc2);display:flex;align-items:center;justify-content:center}
/* Icons weiß: der Kreis liegt jetzt in --acc2 (Partnerfarbe, aktuell Pink),
   Weiß darauf haelt 3,46:1 – ueber der 3:1-Grenze fuer grafische Elemente.
   brightness(0) faerbt jede Quelldatei zuverlaessig schwarz, invert(1)
   dreht das zu Weiß – funktioniert unabhaengig davon, ob das Quell-SVG
   hell oder dunkel angelegt ist (personen.svg, kleidung.svg, flasche.svg,
   haus.svg sind dunkel, uhr-weiss.svg/karte-weiss.svg schon hell). */
/* Icon dunkel statt weiss: der Kreis traegt jetzt die helle Partnerfarbe,
   weisse Icons lagen darauf bei 1,4:1. Schwarz erreicht 6,06:1 (Pink) bis
   14,06:1 (Himmelblau). */
.rule-icon img{width:56%;height:56%;object-fit:contain;filter:var(--ic2-filter)}
@media(max-width:700px){.rules-grid{grid-template-columns:1fr;gap:10px}.rule{padding:12px;gap:10px}.rule-icon{width:44px;height:44px}}

/* ------------------------------------------------------------------ KARTEN
   Muster der Startseite: Titel weiß auf dem Foto, extrudiert in der Farbe
   des Erlebnisses, darunter der farbige Balken mit Icon und Gefühlswort. */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(216px,1fr));gap:22px}
/* Fuenf Karten (z. B. vier Escape Rooms plus Schatzsuche) im 12er-Raster:
   drei oben ueber je vier Spalten, zwei unten ueber je sechs. Beide Reihen
   randbuendig, keine Luecke – wie bei den sieben Karten im Reel. */
.cards.five{grid-template-columns:repeat(12,minmax(0,1fr))}
.cards.five>.card{grid-column:span 4}
.cards.five>.card:nth-child(n+4){grid-column:span 6}
@media(max-width:760px){
  .cards.five{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .cards.five>.card,.cards.five>.card:nth-child(n+4){grid-column:auto}
}
/* Escape-Room-Karten: 3 oben + 2 unten (Sebastian, 2026-09-08) - dasselbe
   12er-Raster wie .cards.five ("Ein Blick in die Raeume"), groesser und
   einladender als die alten vier Spalten, Fotos im Hochformat wie beim
   Reel-Karussell ("Mehr Erlebnisse"). Mit fontTools nachgerechnet passen bei
   21px alle Titel auf die schmalste Kartenbreite (3er-Reihe, ~365px) in eine
   Zeile (ab 22px bricht "Flucht aus der Jagdhuette" um). Mobil wird daraus
   ein Karussell (siehe 760px-Media-Query unten) mit der generischen
   mobilen .mtitle-Groesse (clamp 17-22px) - dort darf der laengste Titel
   wie gehabt zweizeilig umbrechen. */
.cards.rooms{grid-template-columns:repeat(12,minmax(0,1fr))}
.cards.rooms>.card{grid-column:span 4}
.cards.rooms>.card:nth-child(n+4){grid-column:span 6}
.cards.rooms .card .media{aspect-ratio:3/4}
/* Titel groesser, weil die Fotos jetzt im Hochformat deutlich mehr Flaeche
   haben (Sebastian, 2026-09-08): 21 -> 26px. Mit fontTools nachgerechnet
   bricht bei 26px "Jagd auf Jack the Ripper" genau nach "Jagd auf" um -
   der Name bleibt dank geschuetzter Leerzeichen im HTML zusammen. */
@media(min-width:761px){.cards.rooms .mtitle{font-size:26px}}
/* "Buchen"-Pill auf den Escape-Room-Karten im Hausgelb aller Buchen-CTAs
   (Sebastian, 2026-09-08) - vorher Akzentgruen. Dunkler Text #241A00 darauf
   = 11,36:1, wie beim grossen .btn. */
.cards.rooms .pill{background:var(--yellow);color:#241A00}
/* Die Raeume sind Geschichten, keine Aufzaehlung (Sebastian, 2026-09-08).
   Statt einem Textblock drei Stufen mit eigenem Rhythmus:
     <b> Aufhaenger  - weiss, fett, groesser: der Haken
     Fliesstext      - die Zuspitzung
     <i> Schlussfrage- Akzentfarbe, versal: der Cliffhanger
   Mit fontTools nachgerechnet fallen die drei schmalen Karten der oberen
   Reihe damit exakt gleich hoch aus (2+2+1 Zeilen), die beiden breiten
   unten auf 1-2+2+1. */
.cards.rooms .cbody p.story{font-size:12px;line-height:1.45;margin-bottom:18px;color:#C7CEEC}
.cards.rooms .cbody p.story b{display:block;margin-bottom:11px;color:#fff;font-weight:var(--w-black,900);font-size:13.5px;line-height:1.3}
.cards.rooms .cbody p.story i{display:block;margin-top:13px;font-style:normal;font-weight:var(--w-black,900);font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:var(--acc-text)}
/* Mehr Luft zwischen Schloesserreihe und Text (Sebastian, 2026-09-08) - die
   8px der Grundregel waren fuer den alten Zweizeiler gedacht. */
.cards.rooms .locks{margin-bottom:15px}
/* Buchen-CTA mittig und groesser: er ist der Abschluss der Karte, nicht eine
   weitere linksbuendige Textzeile. .cbody richtet sonst alles links aus. */
.cards.rooms .cbody .pill{align-self:center;font-size:14px;padding:9px 30px;letter-spacing:.05em}
/* Outdoor-Fahne auf der Schatzsuche-Karte: dasselbe .hbpill-Bauteil wie das
   Huepfburg-Band, hier im Seiten-Akzent statt Pink (Navy darauf = 10,09:1). */
.cards.rooms .hbpill{background:var(--acc);color:var(--line)}
/* Mobil als Karussell mit Center-Snap, angetrieben von makeReel('roomsReel',
   ...) - dasselbe Muster wie .cards.reel weiter unten, nur bei 760px statt
   900px, weil die Raeume-Karten erst darunter zu schmal fuer 2 Spalten
   werden. */
@media(max-width:760px){
  .cards.rooms{display:flex;flex-wrap:nowrap;justify-content:flex-start;grid-template-columns:none;overflow-x:auto;
    scroll-snap-type:x mandatory;gap:16px;
    margin-left:-20px;margin-right:-20px;
    /* Oben 20px statt 6px (Sebastian, 2026-09-08): overflow-x:auto laesst die
       Y-Achse mit-klippen, und die .hbpill-Fahne ragt 13px ueber die Karte
       hinaus (12px top plus die 2-Grad-Drehung an der Ecke) - sie wurde
       dadurch oben abgeschnitten. Unten 16px, damit der Kartenschatten
       nicht auf der Kante endet. */
    padding:20px max(20px,calc(50% - 150px)) 16px;
    scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .cards.rooms::-webkit-scrollbar{display:none}
  .cards.rooms>.card,.cards.rooms>.card:nth-child(n+4){grid-column:auto;flex:0 0 74vw;min-width:0;max-width:300px;scroll-snap-align:center;scroll-snap-stop:always}
}
/* Sieben Karten auf zwei Reihen, beide randbuendig: 12er-Raster, die ersten
   vier ueber je drei Spalten, die letzten drei ueber je vier. So fluchten die
   Aussenkanten und es bleibt keine Luecke – zentriert liefen die Reihen
   vorher um eine halbe Kachelbreite gegeneinander versetzt. */
.cards.reel{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:22px}
.cards.reel>.card{grid-column:span 3}
.cards.reel>.card:nth-child(n+5){grid-column:span 4}
.card{display:flex;flex-direction:column;background:#223070;border:3px solid var(--cc,#3F5BB8);border-radius:16px;overflow:hidden;box-shadow:0 7px 0 var(--sh),0 12px 18px rgba(0,0,0,.42);transition:transform .16s cubic-bezier(.34,1.56,.64,1),box-shadow .16s}
@media(hover:hover){.card:hover{transform:translateY(-5px) scale(1.02);box-shadow:0 11px 0 var(--sh),0 18px 26px rgba(0,0,0,.46)}}
.card .media{position:relative;aspect-ratio:4/3;overflow:hidden}
.card .media img{width:100%;height:100%;object-fit:cover}
.mshade{position:absolute;inset:0;pointer-events:none;background:linear-gradient(to top,rgba(8,10,28,.9) 0%,rgba(8,10,28,.3) 34%,rgba(8,10,28,0) 62%)}
.mtitle{overflow-wrap:break-word;hyphens:auto;position:absolute;left:12px;right:10px;bottom:9px;z-index:2;font-family:"Clash Display",system-ui,sans-serif;font-weight:700;text-transform:uppercase;color:#fff;font-size:clamp(25px,2.6vw,34px);line-height:1.02;letter-spacing:-.01em;word-spacing:.16em;transform:skewX(var(--skew));transform-origin:left bottom;
  text-shadow:1px 1px 0 var(--ext,var(--cc)),2px 2px 0 var(--ext,var(--cc)),3px 3px 0 var(--ext,var(--cc)),4px 5px 9px rgba(0,0,0,.55)}
.ctitle{display:flex;align-items:center;gap:9px;padding:9px 13px;background:var(--cc);border-top:2px solid var(--line);border-bottom:2px solid var(--line)}
.cic{width:38px;height:38px;display:flex;align-items:center;justify-content:center;flex:none}
.chi{font-family:"Clash Display",system-ui,sans-serif;color:var(--ct);font-size:14.5px;font-weight:600;text-transform:uppercase;line-height:1;letter-spacing:.01em;word-spacing:.16em}
.cbody{flex:1;display:flex;flex-direction:column;align-items:flex-start;padding:11px 14px 13px;background:color-mix(in srgb,var(--cc) 22%,#161F44)}
.cbody p{font-size:11px;font-weight:var(--w-med,600);color:#D6DAF0;margin-bottom:11px;line-height:1.3}
.cbody .pill{margin-top:auto}

/* ---------------------------------------------------- SCHWIERIGKEIT (LOCKS)
   Ersatz fuer den fruaeheren Icon+Text-Balken (.ctitle) auf den Escape-
   Room-Karten: eine Reihe von 5 Schloessern statt Icon+Wort. Zwei PNGs
   von Sebastian (Icons/padlock (1).png = voll, Icons/lock.png = leer),
   beide reines Schwarz auf Transparent -> filter:invert(1) macht sie
   Weiss, unabhaengig vom Kartenhintergrund.
   Halbe Bewertungen (z. B. 2,5 von 5): .lock::after liegt über der leeren
   Basis und zeigt das volle Icon nur bis zur Breite --fill (0/50/100%) -
   Hintergrundgroesse bleibt fix, dadurch wird das Icon links abgeschnitten
   statt gestaucht (gleiches Prinzip wie bei halben Sternen). */
.locks{display:flex;gap:4px;margin:0 0 8px}
.lock{position:relative;width:17px;height:17px;flex:none;
  background-image:url(../img/icons/schloss-leer.png);background-size:17px 17px;background-repeat:no-repeat;filter:invert(1)}
.lock::after{content:"";position:absolute;inset:0 auto 0 0;width:var(--fill,0%);overflow:hidden;
  background-image:url(../img/icons/schloss-voll.png);background-size:17px 17px;background-repeat:no-repeat}
@media(max-width:760px){.locks{gap:3px}.lock{width:15px;height:15px;background-size:15px 15px}.lock::after{background-size:15px 15px}}

/* --------------------------------------------------- FOTO-KACHEL (voll)
   Vollbreite Kachel mit Foto im Hintergrund, Verlauf und Text darauf –
   dasselbe Prinzip wie die Anlass-Kacheln der Startseite, nur einzeln und
   ueber die ganze Breite. Farbe kommt ueber --tc (Rahmen, Kicker) und
   --tex (Extrusion hinter der weissen Ueberschrift, min. 3:1 zu Weiss).
   Die Textspalte ist begrenzt, weil sie sonst aus dem dunklen Teil des
   Verlaufs herauslaeuft – hier ist der Umbruch also noetig. */
.phototile{position:relative;display:block;margin-top:26px;border-radius:20px;overflow:hidden;
  border:3px solid var(--tc);box-shadow:0 7px 0 var(--sh),0 12px 18px rgba(0,0,0,.42);
  min-height:300px;text-decoration:none;color:#fff;
  transition:transform .16s cubic-bezier(.34,1.56,.64,1),box-shadow .16s}
@media(hover:hover){.phototile:hover{transform:translateY(-4px);box-shadow:0 11px 0 var(--sh),0 18px 26px rgba(0,0,0,.46)}}
.phototile>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center var(--tpos,55%)}
.phototile .pt-scrim{position:absolute;inset:0;background:linear-gradient(100deg,rgba(10,14,38,.94) 0%,rgba(10,14,38,.86) 32%,rgba(10,14,38,.3) 62%,rgba(10,14,38,0) 84%)}
.phototile .pt-copy{position:relative;z-index:2;padding:34px 32px;max-width:560px}
.phototile .pt-kicker{font-weight:var(--w-black,900);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--tc)}
.phototile h3{margin:6px 0 12px;font-family:"Clash Display",system-ui,sans-serif;font-weight:700;text-transform:uppercase;
  font-size:clamp(28px,4.4vw,46px);line-height:1;letter-spacing:-.01em;word-spacing:.16em;color:#fff;
  display:inline-block;transform:skewX(var(--skew));transform-origin:left bottom;padding-right:.12em;
  text-shadow:1px 1px 0 var(--tex),2px 2px 0 var(--tex),3px 3px 0 var(--tex),4px 4px 0 var(--tex),5px 6px 11px rgba(0,0,0,.55)}
.phototile p{margin:0 0 20px;font-size:15px;font-weight:var(--w-med,600);color:#E9ECF8;line-height:1.45}
/* Mobil: Verlauf von oben nach unten, Text unter dem Foto-Ausschnitt. */
@media(max-width:760px){
  .phototile{min-height:0}
  .phototile .pt-scrim{background:linear-gradient(180deg,rgba(10,14,38,.3) 0%,rgba(10,14,38,.86) 46%,rgba(10,14,38,.97) 100%)}
  .phototile .pt-copy{padding:160px 18px 24px;max-width:none}
}
.pill{display:inline-block;background:var(--cc);color:var(--ct);font-weight:var(--w-black,900);font-size:12px;padding:4px 13px;border-radius:9999px;border:2px solid var(--line);text-transform:uppercase;letter-spacing:.03em}
/* Mobil als Karussell mit Center-Snap – dasselbe Muster wie das
   Erlebnis-Karussell der Startseite. Desktop bleibt ein Raster. */
@media(max-width:900px){
  /* nowrap und feste Kartenbreite muessen die Desktop-Flexzeile ueberschreiben,
     sonst stapeln sich die Karten statt seitlich zu laufen. */
  .cards.reel{display:flex;flex-wrap:nowrap;justify-content:flex-start;grid-template-columns:none;overflow-x:auto;
    scroll-snap-type:x mandatory;gap:16px;
    margin-left:-20px;margin-right:-20px;
    padding:18px max(20px,calc(50% - 150px)) 12px;
    scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .cards.reel::-webkit-scrollbar{display:none}
  .cards.reel>.card{flex:0 0 74vw;min-width:0;max-width:300px;scroll-snap-align:center;scroll-snap-stop:always}
  .cards.reel .card .media{aspect-ratio:3/4}
  .cards.reel .ctitle{padding:9px 13px;min-height:0;align-items:center}
  .cards.reel .chi{font-size:13.5px}
  .cards.reel .mtitle{font-size:32px}
  .cards.reel .cic,.cards.reel .cic img{width:35px;height:35px}
  .cards.reel .cbody{padding:11px 14px}
  .cards.reel .cbody p{font-size:11.5px}
  .cards.reel .cbody .pill{font-size:11px;padding:4px 12px}
  .cards.reel .card .hbpill{font-size:10px;padding:4px 12px}
}
.card.hb{position:relative;overflow:visible}
.card.hb .media{border-radius:13px 13px 0 0}
.card.hb .cbody{border-radius:0 0 13px 13px}
.hbpill{position:absolute;top:-12px;left:50%;transform:translateX(-50%) rotate(-2deg);z-index:4;white-space:nowrap;background:var(--pink);color:var(--line);border:2.5px solid var(--line);box-shadow:0 3px 0 var(--line);padding:4px 14px;border-radius:9999px;font-size:10.5px;font-weight:var(--w-black,900);letter-spacing:.04em;text-transform:uppercase}
@media(max-width:760px){
  .cards{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px}
  .cards>.card{min-width:0}
  .ctitle{padding:7px 9px;gap:6px;align-items:flex-start;min-height:44px}
  .cic{width:25px;height:25px}
  .cic img{width:25px;height:25px}
  .chi{font-size:11px;line-height:1.15;min-width:0;overflow-wrap:break-word}
  .mtitle{font-size:clamp(17px,4.6vw,22px);left:10px;right:8px;bottom:8px}
  .cbody{padding:9px 10px 11px}
  .cbody p{font-size:10.5px;margin-bottom:9px}
  .cbody .pill{font-size:10px;padding:3px 10px}
}
:focus-visible{outline:3px solid var(--pink);outline-offset:2px}

/* Wortabstand auf schmalen Screens zuruecknehmen – siehe index.html. */
@media(max-width:560px){
  .hero h1,.sec-head h2,.mtitle,.chi,.pmini .p,.band2 .big{word-spacing:.08em}
}

/* ============================================================ ERLEBNISPAKETE
   Bausteine der Anlass-Seiten (JGA, Geburtstag, Firmen, Kids …). Hero,
   Preiskacheln, Regeln und Karten kommen aus dem Neon-System oben – hier nur,
   was Pakete zusaetzlich brauchen. Die alte gelbe Fakten-Leiste, zentrierte
   Ueberschriften und die Ticket-Grafik sind verworfen (Briefing, Kap. 10). */

/* Fakten-Chips unter dem Hero: Kontur in der Bereichsfarbe (Ebene A),
   kein Farbbalken. Auf Kids-Seiten in der Partnerfarbe (vierter Slot). */
.factrow{display:flex;flex-wrap:wrap;gap:9px;padding:22px 0 0}
.factrow .fact{display:inline-flex;align-items:center;gap:7px;font-size:11.5px;font-weight:var(--w-black,900);letter-spacing:.06em;text-transform:uppercase;padding:7px 13px;border-radius:9999px;border:2px solid var(--acc);color:var(--acc-text);background:var(--blued)}
.factrow .fact img{width:13px;height:13px;filter:brightness(0) invert(1)}
/* Mobil entfallen die Chips ganz – sie kosten dort mehr Hoehe als sie an
   Information bringen, wie der gelbe Banner auf den Erlebnisseiten. */
@media(max-width:760px){.factrow{display:none}}

/* Drei Pass-Stufen im Format der Preiskacheln, etwas breiter. */
/* REGEL: Preiskacheln stehen IMMER in einer Reihe und sind IMMER gleich
   gross – auf jeder Breite. Nie umbrechen lassen, nie eine Kachel allein in
   Reihe zwei. Statt umzubrechen skalieren Schrift und Innenabstand mit der
   Viewportbreite herunter. grid-auto-rows:1fr plus height:100% haelt die
   Hoehen gleich, auch wenn eine Kachel eine Zusatzzeile hat. */
.pgrid.pass{grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:1fr;gap:14px;margin-top:22px}
.pgrid.pass .pmini{padding:16px 10px 15px;height:100%}
/* Untergrenzen = Standardgroessen der Erlebnisseiten-Kacheln (.p 26px,
   .t 13.5px, .s 10.5px), damit die drei Kacheln auf dem Handy nicht kleiner
   wirken als dort. Die laengsten Inhalte ("2 Stunden", "pro Person", "75 €")
   passen damit auch bei ~90px Kachelbreite (320px-Handy) in eine Zeile. */
.pgrid.pass .pmini .p{font-size:clamp(24px,6.5vw,32px)}
.pgrid.pass .pmini .t{font-size:clamp(12.5px,3.4vw,13.5px);margin:0 2px 9px}
.pgrid.pass .pmini .s{font-size:clamp(10px,2.7vw,10.5px)}
@media(max-width:760px){.pgrid.pass{gap:9px}.pgrid.pass .pmini{padding:13px 5px 12px;border-width:2px}}
/* Kein Verkleinern des Badges mehr (8,5px war unlesbar) – stattdessen kurze
   Badge-Texte auf den Drittel-Kacheln ("Beliebt" statt "Beliebteste Wahl"). */
@media(max-width:420px){.pgrid.pass{gap:7px}.pgrid.pass .pmini{padding:12px 3px 11px}}

/* Spar-Deal: Navy-Zeile mit Kontur, Betrag als Partnerfarbe-Chip (Preis-
   vorteil = Slot 1, wie .ptag.hot). Bewusst schmaler als die Kacheln und
   zentriert: auf voller Inhaltsbreite stand der Betrag sonst weit weg vom
   Text am anderen Ende der Zeile. */
/* Die Spar-Deal-Kachel ist ein echter Link auf die Buchungsseite (Regel
   Sebastian, 2026-09-07: immer gleich verlinkt, und dort auf das passende
   Erlebnis). Als <a> statt onclick-div, damit sie per Tastatur erreichbar
   ist und ein Kontextmenue hat. */
.deal{display:flex;align-items:center;gap:14px;max-width:560px;margin:22px auto 0;padding:12px 16px;border-radius:14px;border:2px solid var(--acc);background:var(--blue);
  text-decoration:none;color:inherit;transition:transform .18s cubic-bezier(.34,1.56,.64,1),box-shadow .18s,background .18s}
@media(hover:hover){.deal:hover{transform:translateY(-2px);background:var(--blued);box-shadow:0 6px 0 var(--sh),0 10px 16px rgba(0,0,0,.34)}}
.deal:focus-visible{outline:3px solid var(--acc2);outline-offset:3px}
.deal .t{flex:1;min-width:0}
.deal .t b{display:block;font-weight:var(--w-black,900);font-size:14px;color:#fff}
.deal .t span{font-size:12px;font-weight:var(--w-med,600);color:#C0C7E8}
.deal .amt{flex:none;font-family:"Clash Display",system-ui,sans-serif;font-weight:700;font-size:20px;color:var(--line);background:var(--acc2);border:2px solid var(--line);border-radius:9999px;padding:4px 16px;white-space:nowrap}
/* Zwei Spar-Deals nebeneinander (Lasertag: Wochentags-Deal + Flatrate).
   Hebt die 560px-Zentrierung der Einzelzeile auf; mobil untereinander. */
.deals{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:22px}
.deals .deal{max-width:none;margin:0}
@media(max-width:760px){.deals{grid-template-columns:1fr;gap:10px}}
/* Eine einzelne Spar-Deal-Zeile unter einer Preisreihe (Huepfburg): linksbuendig
   unter den Kacheln statt in der Inhaltsbreite zentriert (Sebastian, 2026-09-12). */
.deals.one{grid-template-columns:minmax(0,560px);max-width:860px}
/* Mobil (Sebastian, 2026-09-12): die Spar-Deal-Kachel quetschte Titel und
   Erklaerzeile in eine schmale Spalte neben die Preis-Pille - drei umbrochene
   Zeilen neben einem mittig sitzenden Betrag. Jetzt stehen Titel und Betrag in
   einer Zeile, die Erklaerung laeuft darunter ueber die volle Breite.
   .t wird dafuer aufgeloest (display:contents), das Markup bleibt unveraendert. */
@media(max-width:560px){
  .deal{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;
        column-gap:12px;row-gap:5px;padding:11px 14px}
  .deal .t{display:contents}
  .deal .t b{grid-column:1;grid-row:1;font-size:13.5px;line-height:1.2}
  .deal .amt{grid-column:2;grid-row:1;font-size:17px;padding:3px 13px}
  .deal .t span{grid-column:1/-1;grid-row:2;font-size:11.5px;line-height:1.35}
}

/* Inklusive-Liste: Navy-Zeilen, Icon-Kreis in der Partnerfarbe (Slot 3). */
.inklusive{list-style:none;display:grid;grid-auto-rows:1fr;gap:9px;max-width:640px;margin:10px 0 26px}
.inklusive li{display:flex;gap:12px;align-items:center;font-weight:var(--w-med,600);font-size:15px;background:#223070;border:2px solid #3F5BB8;border-radius:12px;padding:9px 14px;color:#E9ECF8}
/* Der Kreis ist ein eigenes Element: filter wirkt auf das ganze Element,
   also auch auf dessen Hintergrund – lag die Flaeche am <img>, wurde der
   Kreis mitgefaerbt und Icon und Kreis waren beide weiss. */
.inklusive li .ic{width:38px;height:38px;flex:none;border-radius:50%;background:var(--acc2);display:flex;align-items:center;justify-content:center}
.inklusive li .ic img{width:54%;height:54%;object-fit:contain;filter:var(--ic2-filter)}

/* ------------------------------------------------------- PREIS-KACHELN
   Drei Stufen nebeneinander, darunter die grosse Pass-Kachel mit Foto.
   Farben wie im Rest des Systems: Navy-Flaeche, Bereichsfarbe als Kontur,
   Weiss als Schrift. Immer in einer Reihe, immer gleich gross. */
.pgrid.tickets{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:22px;align-items:stretch}
.tix{position:relative;display:block;color:#fff;text-decoration:none;cursor:pointer;user-select:none;
  transition:transform .13s,box-shadow .13s}
.tix-paper{position:relative;display:flex;flex-direction:column;height:100%;
  background:var(--blue);border:3px solid var(--acc);border-radius:14px;
  box-shadow:0 7px 0 var(--sh),0 12px 18px rgba(0,0,0,.42)}
@media(hover:hover){.tix:hover .tix-paper{transform:translateY(-4px);box-shadow:0 11px 0 var(--sh),0 18px 26px rgba(0,0,0,.46)}}
.tix:active .tix-paper{transform:translateY(3px);box-shadow:0 3px 0 var(--sh),0 5px 9px rgba(0,0,0,.34)}
.tix.best .tix-paper{background:color-mix(in srgb,var(--acc) 14%,var(--blue))}
@supports not (background:color-mix(in srgb,red 10%,blue)){.tix.best .tix-paper{background:var(--blue)}}
.tix-stub{height:40px;display:flex;align-items:center;justify-content:center;padding:0 10px;
  font-weight:var(--w-bold,800);font-size:13.5px;color:#fff;line-height:1.1;
  border-bottom:2px dashed rgba(255,255,255,.24);margin:0 8px}
.tix-body{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:14px 10px 13px}
.tix-price{font-family:"Clash Display",system-ui,sans-serif;font-weight:700;font-size:clamp(26px,6.5vw,34px);line-height:1.05;
  color:#fff;display:inline-block;transform:skewX(var(--skew));transform-origin:left bottom;padding-right:.1em;word-spacing:.16em;
  text-shadow:1px 1px 0 var(--acc-ex),2px 2px 0 var(--acc-ex),3px 3px 5px rgba(0,0,0,.35)}
.tix-sub{margin-top:6px;font-size:clamp(10px,2.7vw,10.5px);font-weight:var(--w-med,600);color:#C0C7E8}
@media(max-width:760px){
  .pgrid.tickets{gap:10px}
  .tix-paper{border-radius:12px;border-width:2px}
  .tix-stub{height:37px;font-size:clamp(12.5px,3.4vw,13.5px);margin:0 5px}
  .tix-body{padding:12px 6px 12px}
  /* Beliebt-Pill wirkte neben den kompakteren Mobil-Kacheln ueberdimensioniert. */
  .ptag{font-size:9.5px;padding:2px 8px;top:-14px}
}
@media(max-width:420px){.pgrid.tickets{gap:7px}}

/* --- Die grosse Pass-Kachel: Foto links, Leistungen rechts --------------
   Ersetzt die frueheren Leistungspillen und den Vergleichskasten. Alles,
   was im Pass steckt, steht mit Haekchen in zwei Spalten; darunter eine
   Zeile mit dem Preisargument und dem Button. */
.passtix{position:relative;margin-top:26px}
.passtix .tix-paper{display:grid;grid-template-columns:34% 1fr;height:auto;overflow:hidden}
.passtix .tix-photo{position:relative;min-height:100%}
.passtix .tix-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.passtix .tix-main{padding:24px 28px 22px;min-width:0}
.passtix .tix-kicker{font-weight:var(--w-black,900);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--acc-text)}
.passtix h3{margin:4px 0 16px;font-family:"Clash Display",system-ui,sans-serif;font-weight:700;text-transform:uppercase;
  font-size:clamp(22px,2.8vw,30px);line-height:1.02;letter-spacing:-.01em;word-spacing:.16em;color:#fff;
  display:inline-block;transform:skewX(var(--skew));transform-origin:left bottom;padding-right:.12em;
  text-shadow:1px 1px 0 var(--acc-ex),2px 2px 0 var(--acc-ex),3px 3px 0 var(--acc-ex),5px 6px 10px rgba(0,0,0,.5)}
.tix-lead{margin:0 0 14px;font-size:13.5px;font-weight:var(--w-med,600);color:#C0C7E8;line-height:1.45}
.tix-cols{display:grid;grid-template-columns:1fr 1fr;gap:10px 26px}
.tix-cols.solo{grid-template-columns:1fr;max-width:420px}
.tix-cols h4{margin:0 0 6px;font-size:11px;font-weight:var(--w-black,900);letter-spacing:.08em;text-transform:uppercase;color:#C0C7E8}
.tix-list{list-style:none;margin:0;padding:0}
/* Zwischenueberschrift ueber einer Haekchenliste ausserhalb der Ticket-Kachel
   (Oeffnungszeiten: Sonderoeffnung). */
.hours-sub{font-family:"Clash Display",system-ui,sans-serif;font-size:clamp(17px,2vw,21px);font-weight:700;
  text-transform:uppercase;letter-spacing:.01em;color:#fff;margin:26px 0 10px}
/* Haekchen als Maske aus dem vorhandenen Icon – so traegt es die Bereichs-
   farbe und braucht kein eigenes Bild je Zeile. */
.tix-list li{display:flex;align-items:flex-start;gap:9px;padding:4px 0;
  font-size:13.5px;font-weight:var(--w-med,600);color:#E9ECF8;line-height:1.35}
.tix-list li::before{content:"";flex:none;width:15px;height:15px;margin-top:2px;background:var(--acc);
  -webkit-mask:url(../img/icons/check.svg) center/contain no-repeat;
  mask:url(../img/icons/check.svg) center/contain no-repeat}
.tix-list.extra li::before{background:var(--acc2)}
/* Preisargument ueber dem Button, beide linksbuendig – keine Zeile mehr,
   die je nach Textlaenge unterschiedlich breit wirkt. */
.tix-sum{display:flex;flex-direction:column;align-items:flex-start;gap:12px;
  margin-top:18px;padding-top:15px;border-top:2px solid var(--acc)}
/* Die Preiszeile unter den Leistungen wirkte in der Mobilansicht zu klobig
   (Sebastian, 2026-09-12) - sie skaliert jetzt mit der Breite und bleibt auf
   dem Desktop bei 14px. Gilt fuer alle Seiten mit Paketkachel. */
.tix-sum .calc{font-size:clamp(12px,3.4vw,14px);font-weight:var(--w-med,600);color:#C0C7E8;line-height:1.4}
.tix-sum .calc b{color:#fff;font-weight:var(--w-black,900)}
.passtix .tix-fine{margin:12px 0 0;font-size:10.6px;font-weight:var(--w-med,600);color:#A9B2D6;line-height:1.5}
/* Vergleichstabelle in der Pass-Kachel (Kindergeburtstag): Zeilen =
   Leistungen, Spalten = Pakete. Haekchen als Maske in der Partnerfarbe wie
   .tix-list.extra, "–" in #A9B2D6 (6,7:1 auf Navy, 5,9:1 auf der getoenten
   Beliebt-Spalte). Auf schmalen Screens scrollt die Tabelle im Kasten
   horizontal, statt die Seite zu sprengen. */
.cmp-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.cmp{width:100%;min-width:400px;border-collapse:collapse;font-size:13px;font-weight:var(--w-med,600);color:#E9ECF8}
.cmp th,.cmp td{padding:7px 8px;border-bottom:1px dashed rgba(255,255,255,.22);text-align:center;vertical-align:middle;line-height:1.3}
.cmp th:first-child,.cmp td:first-child{text-align:left;padding-left:0}
.cmp thead th{font-size:11px;font-weight:var(--w-black,900);letter-spacing:.08em;text-transform:uppercase;color:#C0C7E8;border-bottom:2px solid var(--acc);padding-bottom:8px;white-space:nowrap}
/* Paketspalten sanft vom Leistungstext und voneinander abgesetzt: leichte
   Aufhellung + feine Trennlinie links; die Bestseller-Spalte zusaetzlich in
   der Bereichsfarbe getoent (durchgehend inkl. Kopfzeile). */
.cmp th:not(:first-child),.cmp td:not(:first-child){background:rgba(255,255,255,.045);border-left:1px solid rgba(255,255,255,.12)}
.cmp thead th.best{color:var(--acc-text)}
.cmp thead th.best{background:color-mix(in srgb,var(--acc) 12%,transparent)}
.cmp tbody tr:last-child td{border-bottom:none}
.cmp td.best{background:color-mix(in srgb,var(--acc) 12%,transparent)}
.cmp td b{color:#fff;font-weight:var(--w-black,900);white-space:nowrap}
.cmp .ok{display:inline-block;width:15px;height:15px;vertical-align:middle;background:var(--acc2);
  -webkit-mask:url(../img/icons/check.svg) center/contain no-repeat;mask:url(../img/icons/check.svg) center/contain no-repeat}
.cmp .no{color:#A9B2D6}
/* Mobil: kein Seitwaertsscrollen (sonst ist die XXL-Spalte = Bestseller
   abgeschnitten). Feste Spaltenbreiten, Paketname nur als Kuerzel S/L/XXL,
   Werte duerfen umbrechen. Bei 375px: Leistung ~137px, je Paket ~54px. */
@media(max-width:860px){
  .cmp-wrap{overflow:visible}
  .cmp{min-width:0;table-layout:fixed;font-size:12px}
  .cmp th:first-child,.cmp td:first-child{width:46%}
  .cmp th,.cmp td{padding:6px 3px}
  .cmp thead th{font-size:10.5px;letter-spacing:.04em;white-space:normal}
  .cmp thead th .lbl{display:none}
  .cmp td b{white-space:normal}
}
@media(max-width:860px){
  .passtix .tix-paper{grid-template-columns:1fr}
  .passtix .tix-photo{height:190px;min-height:0}
  .passtix .tix-main{padding:18px 16px 16px}
  .tix-cols{grid-template-columns:1fr;gap:12px}
  .tix-cols.solo{max-width:none}
  .tix-list li{font-size:13px;padding:3px 0}
  .tix-sum{gap:10px}
}

/* Vergleich einzeln vs. Pass: Navy-Karte mit Kontur, rechts die Pass-Kachel
   als grosse Preiskachel statt der alten Ticket-Grafik. */
/* Abstand nach oben: der Spar-Deal darueber stand mit 6px fast an der
   Kastenkante. */
.vergleich{margin:30px 0 10px;padding:22px;border-radius:18px;border:3px solid var(--acc);background:var(--blue);box-shadow:0 7px 0 var(--sh),0 12px 18px rgba(0,0,0,.42)}
.vergleich h3{font-family:"Clash Display",system-ui,sans-serif;font-weight:700;font-size:clamp(20px,2.6vw,26px);text-transform:uppercase;line-height:1.05;word-spacing:.16em;color:#fff;display:inline-block;transform:skewX(var(--skew));transform-origin:left bottom;padding-right:.12em;
  text-shadow:1px 1px 0 var(--acc-ex),2px 2px 0 var(--acc-ex),3px 3px 0 var(--acc-ex),5px 6px 10px rgba(0,0,0,.5)}
.vergleich .vg-intro{font-size:13px;font-weight:var(--w-med,600);color:#C0C7E8;margin:8px 0 14px}
/* Erlebnis-Streifen im Vergleichskasten: acht quadratische Fotos mit
   farbiger Unterkante in der jeweiligen Bereichsfarbe (--tc). Ab 820px
   abwaerts zwei Reihen a vier. */
.vg-thumbs{display:grid;grid-template-columns:repeat(7,1fr);gap:9px;margin:0 0 18px}
.vg-thumb img{width:100%;aspect-ratio:1;object-fit:cover;display:block;border:2px solid var(--line);border-bottom:5px solid var(--tc);border-radius:11px}
.vg-thumb span{display:block;margin-top:5px;text-align:center;font-size:10.5px;font-weight:var(--w-black,900);color:#E9ECF8;line-height:1.15;text-transform:uppercase;letter-spacing:.02em}
@media(max-width:820px){.vg-thumbs{grid-template-columns:repeat(4,1fr);gap:8px}}
@media(max-width:420px){.vg-thumbs span{font-size:9.5px}}
.vg-grid{display:grid;grid-template-columns:1.3fr 1fr;gap:22px;align-items:center}
.vg-list{list-style:none;margin:0;padding:0}
.vg-list li{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:6px 0;border-bottom:1px dashed rgba(255,255,255,.22);font-size:13px;font-weight:var(--w-med,600);color:#E9ECF8}
.vg-list li:last-child{border-bottom:none}
.vg-list .vg-p{font-weight:var(--w-black,900);white-space:nowrap}
.vg-list li.vg-sum{margin-top:6px;border-top:2px solid var(--acc);border-bottom:none;padding-top:9px;font-size:15px;color:#fff}
.vg-list li.vg-sum .vg-p{font-size:17px;color:var(--acc-text)}
.vg-pass{display:flex;flex-direction:column;align-items:center;text-align:center;padding:20px 14px;border-radius:14px;border:3px solid var(--acc);background:color-mix(in srgb,var(--acc) 14%,var(--blue));cursor:pointer;transition:transform .13s}
@supports not (background:color-mix(in srgb,red 10%,blue)){.vg-pass{background:var(--blue)}}
@media(hover:hover){.vg-pass:hover{transform:translateY(-3px)}}
.vg-pass .k{font-size:11px;font-weight:var(--w-black,900);letter-spacing:.1em;text-transform:uppercase;color:var(--acc-text)}
.vg-pass .p{font-family:"Clash Display",system-ui,sans-serif;font-weight:700;font-size:clamp(44px,6vw,60px);line-height:1;color:#fff;margin:8px 0 4px;display:inline-block;transform:skewX(var(--skew));transform-origin:left bottom;padding-right:.1em;
  text-shadow:1px 1px 0 var(--acc-ex),2px 2px 0 var(--acc-ex),3px 3px 0 var(--acc-ex),4px 4px 0 var(--acc-ex),6px 7px 10px rgba(0,0,0,.45)}
.vg-pass .s{font-size:12px;font-weight:var(--w-med,600);color:#C0C7E8}
/* Der Escape Room kostet auch im Paket einmalig 8 € Aufpreis – ohne diese
   Zeile stimmte der Vergleich zur Einzelbuchung nicht, weil dort der Escape
   Room mit 34 € enthalten ist. Steht bewusst in der Paket-Kachel und nicht
   in der Einzel-Liste: es ist ein Zuschlag auf das Paket, kein Einzelpreis. */
.vg-pass .addon{margin-top:12px;padding-top:10px;border-top:1px dashed rgba(255,255,255,.28);font-size:11.5px;font-weight:var(--w-med,600);color:#C0C7E8;line-height:1.35;align-self:stretch}
.vg-pass .addon b{display:block;margin-top:4px;font-size:13.5px;font-weight:var(--w-black,900);color:#fff}
.vg-pass .save{margin-top:12px;font-size:12px;font-weight:var(--w-black,900);letter-spacing:.04em;text-transform:uppercase;color:var(--line);background:var(--acc2);border:2px solid var(--line);border-radius:9999px;padding:5px 14px}
@media(max-width:640px){.vg-grid{grid-template-columns:1fr}.vergleich{padding:18px 16px}}

/* Abschluss-CTA: Navy-Box mit Kontur, Ueberschrift links wie ueberall. */
.ctabox{max-width:760px;padding:32px 30px;border-radius:20px;border:3px solid var(--acc);background:#223070;box-shadow:0 7px 0 var(--sh),0 12px 18px rgba(0,0,0,.42)}
.ctabox h2{font-family:"Clash Display",system-ui,sans-serif;font-weight:700;font-size:clamp(26px,4vw,40px);text-transform:uppercase;line-height:1.02;word-spacing:.2em;color:#fff;display:inline-block;transform:skewX(var(--skew));transform-origin:left bottom;padding-right:.14em;margin:0 0 10px;
  text-shadow:1px 1px 0 var(--acc-ex),2px 2px 0 var(--acc-ex),3px 3px 0 var(--acc-ex),4px 4px 0 var(--acc-ex),5px 5px 0 var(--acc-ex),7px 8px 14px rgba(0,0,0,.6)}
.ctabox h2 em{font-style:normal;color:var(--acc);text-shadow:1px 1px 0 var(--line),2px 2px 0 var(--line),3px 3px 0 var(--line),4px 4px 0 var(--line),5px 5px 0 var(--line),7px 8px 14px rgba(0,0,0,.55)}
/* Vertauschte Variante, genau wie .sec-head h2.swap (Sebastian, 2026-09-10):
   noetig, weil in CTA-Ueberschriften das tragende Wort haeufig hinten steht
   ("Noch <em>Fragen?</em>"). Ohne swap trug dort das Fuellwort die weisse
   Extrusion und das Schluesselwort lief flach. */
.ctabox h2.swap{color:var(--acc);
  text-shadow:1px 1px 0 var(--line),2px 2px 0 var(--line),3px 3px 0 var(--line),4px 4px 0 var(--line),5px 5px 0 var(--line),7px 8px 14px rgba(0,0,0,.55)}
.ctabox h2.swap em{color:#fff;
  text-shadow:1px 1px 0 var(--acc-ex),2px 2px 0 var(--acc-ex),3px 3px 0 var(--acc-ex),4px 4px 0 var(--acc-ex),5px 5px 0 var(--acc-ex),7px 8px 14px rgba(0,0,0,.6)}
.ctabox p{font-weight:var(--w-med,600);color:#C0C7E8;margin:0 0 22px;font-size:16px}
.ctabox .btns{display:flex;gap:12px;flex-wrap:wrap}
@media(max-width:640px){.ctabox{padding:24px 18px}}
@media(max-width:560px){.vergleich h3,.vg-pass .p,.ctabox h2{word-spacing:.08em}}

/* Zwei Spalten im Paket: links was im Pass steckt, rechts die Extras des
   Anlasses. Gleiche Zeilen-Optik wie .inklusive, nur mit Ueberschrift –
   so ist auf einen Blick klar, was den Aufpreis ausmacht. */
/* Zwei Spalten auf JEDER Breite – auch mobil nebeneinander, nie gestapelt.
   grid-auto-rows:1fr haelt alle Zeilen gleich hoch, damit die Kacheln links
   und rechts auf einer Linie liegen. Wird es eng, skaliert die Schrift. */
.paketgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;align-items:stretch}
/* Feste Zeilenhoehe statt 1fr: die rechte Spalte hat weniger Zeilen: mit
   1fr haetten sich ihre Kacheln auf die Hoehe der linken gestreckt und waeren
   deutlich hoeher gewesen als die Nachbarn. Jetzt sind ALLE Kacheln in beiden
   Spalten gleich hoch, die kuerzere Spalte endet einfach frueher. */
.paketgrid .paketcol{min-width:0}
.paketgrid .inklusive{grid-auto-rows:56px;align-content:start}
.paketgrid .inklusive li{overflow:hidden}
.paketgrid .inklusive{margin:0;max-width:none}
.fnref{color:var(--acc-text);font-weight:var(--w-black,900);text-decoration:none;padding:0 2px}
/* min-height reserviert Platz fuer 2 Zeilen (em-basiert, skaliert mit der
   Schriftgroesse mit) – so starten die Listen in beiden Spalten auf gleicher
   Hoehe, auch wenn eine Ueberschrift (schmale Spalte, z. B. Mobile) umbricht
   und die andere nicht. */
.pk-head{font-weight:var(--w-black,900);font-size:12.5px;letter-spacing:.07em;text-transform:uppercase;color:#C0C7E8;margin-bottom:10px;line-height:1.3;min-height:2.6em}
/* Die Extras heben sich ueber den Icon-Kreis in der Partnerfarbe ab – die
   Basisleistungen tragen die Bereichsfarbe. */
.inklusive li .ic{background:var(--acc)}
.inklusive.extra li .ic{background:var(--acc2)}
.inklusive.extra li{border-color:var(--acc)}
@media(max-width:760px){.paketgrid{gap:10px}
  /* Mindestens 11px: 9,5px war auf dem Handy zu klein. Die Zeilenhoehe unten
     bietet Platz fuer 3 Zeilen bei 11px (mit den echten Schriftmassen
     gegengerechnet, laengster Punkt: Secco/Klopfer). */
  .inklusive li{font-size:clamp(11px,2.9vw,13px);padding:6px 8px;gap:7px;line-height:1.2;border-radius:10px}
  .paketgrid .inklusive{grid-auto-rows:clamp(54px,14vw,58px)}
  .inklusive li .ic{width:clamp(24px,7vw,30px);height:clamp(24px,7vw,30px)}
  .fnref{color:var(--acc-text);font-weight:var(--w-black,900);text-decoration:none;padding:0 2px}
.pk-head{font-size:11px;letter-spacing:.05em}}

/* ------------------------------------------------------- PREISLISTE
   Fuer Seiten ohne Tages-Pass (z.B. Schulausflug): Einzelpreise pro
   Erlebnis statt Ticket-Kacheln. Gleiche Zeilen-Optik wie .inklusive,
   Preis als Pill in Partnerfarbe/dunkler Text (Kontrast siehe .deal .amt). */
.pricelist{list-style:none;display:grid;gap:10px;max-width:640px;margin:22px auto 0}
.pricelist li{display:flex;align-items:center;gap:14px;background:#223070;border:2px solid #3F5BB8;border-radius:12px;padding:12px 16px}
.pricelist .pl-name{flex:1;min-width:0}
.pricelist .pl-name b{display:block;font-weight:var(--w-black,900);font-size:15px;color:#fff}
.pricelist .pl-name span{font-size:12px;font-weight:var(--w-med,600);color:#C0C7E8}
.pricelist .pl-price{flex:none;font-family:"Clash Display",system-ui,sans-serif;font-weight:700;font-size:17px;color:var(--line);background:var(--acc2);border:2px solid var(--line);border-radius:9999px;padding:4px 14px;white-space:nowrap}
@media(max-width:500px){.pricelist li{padding:10px 12px;gap:10px}.pricelist .pl-name b{font-size:13.5px}.pricelist .pl-price{font-size:14.5px;padding:3px 11px}}

/* Hinweis-Zeile "nicht online buchbar": gleiche Optik wie .deal, aber
   zentriert/fliessend fuer einen Satz statt Zahl+Betrag. */
.notice{display:flex;align-items:center;gap:10px;max-width:760px;margin:22px auto 0;padding:14px 20px;border-radius:14px;border:2px solid var(--acc2);background:var(--blue);flex-wrap:wrap;justify-content:center;text-align:center}
.notice p{margin:0;font-size:14px;font-weight:var(--w-bold,800);color:#fff}
.notice p b{color:var(--acc2)}
.notice a{color:var(--acc-text);font-weight:var(--w-black,900);text-decoration:underline;text-underline-offset:2px}

/* ------------------------------------------------------------ INFO-SEITEN
   Bausteine fuer FAQ, Kontakt, Jobs, Oeffnungszeiten, Anfahrt, Aktuelles,
   Downloads, Allergene, Club und Gastro (2026-09-09). Alle auf derselben
   Kachel-Optik wie .rule / .whatbox: Navy-Flaeche #223070, 2-3px Rand,
   harte Kante darunter. Farben kommen wie ueberall ueber --acc / --acc2,
   jede Clash-Display-Zeile ist versal (Hausregel). */

/* Bandwechsel der Abschnitte. .white/.soft waren beide transparent (Zeile
   ~166), die Seite war dadurch eine einzige durchgehende Flaeche. Der erste
   Versuch mit --cream (#1B2452) lag nur 5 Punkte ueber der Grundflaeche
   #161F47 und war praktisch unsichtbar (Sebastian, 2026-09-10: "ich sehe
   farblich keinen Unterschied"). Der zweite Versuch (voll deckendes
   #202B60) loeschte dafuer das Streifenmuster des Grundhintergrunds
   komplett aus dieser Sektion - dadurch sahen manche Abschnitte "ohne
   BG-Muster" aus (Sebastian, 2026-09-12). Der dritte Versuch (.82 Deckkraft)
   war immer noch zu stark: bei .82 blieben nur 18% des Musters uebrig, auf
   allen Infoseiten wechselte das Muster dadurch sichtbar zwischen den
   .white- und .soft-Baendern (Sebastian, 2026-09-10: "das wechselt immer,
   hg muster durchgaengig"). Jetzt bei .4: der Ton bleibt als Bandtrennung
   erkennbar, aber das Muster schimmert in .soft genauso durch wie in
   .white - durchgaengig auf allen Infoseiten. */
/* AENDERUNG 2026-09-12: die getoente .soft-Flaeche auf den Infoseiten ist
   ersatzlos gestrichen (Sebastian: "nur der normale bg mit dem muster soll
   sichtbar sein"). Damit laeuft der Streifen-Hintergrund ohne jede
   Bandtrennung durch - die Versuche mit .82 und .4 Deckkraft darueber sind
   damit erledigt. */

/* Die Kachel-Zebra (jede zweite FAQ-Frage/Kachel/Zeile in einem zweiten
   Navy-Ton) ist wieder raus: Sebastian wollte die Zeiten-Kacheln auf
   Oeffnungszeiten einheitlich, nicht im Wechsel (2026-09-12). Alle Kacheln
   bleiben jetzt konsequent bei #223070. */

/* Themen-Chips: Sprungmarken (FAQ) - gleiche Form wie .pill, nur Kontur. */
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 6px}
.chips a{display:inline-block;padding:7px 15px;border-radius:9999px;border:2px solid var(--acc);color:var(--acc-text);font-size:12.5px;font-weight:var(--w-black,900);text-transform:uppercase;letter-spacing:.04em;transition:background .15s,color .15s}
@media(hover:hover){.chips a:hover{background:var(--acc);color:var(--line)}}
/* Chips sind CTA-artig (Sprungmarken) und bleiben deshalb einheitlich im
   helleren Hausgelb (--acc) - keine Zweitfarbe mehr im Wechsel, siehe
   Kommentar bei .page--info weiter oben (Sebastian, 2026-09-11). */

/* FAQ-Akkordeon: natives <details>, Frage als summary. Offen = Rand in
   Bereichsfarbe, das Plus dreht sich zum Kreuz. Kein Script noetig. */
.faq{display:grid;gap:10px;margin:18px 0 8px}
.faq details{background:#223070;border:2px solid #3F5BB8;border-radius:12px;overflow:hidden}
.faq details[open]{border-color:var(--acc)}
.faq summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 16px;font-size:15px;font-weight:var(--w-black,900);color:#fff;line-height:1.3}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";flex:none;width:26px;height:26px;border-radius:50%;background:var(--acc);color:var(--line);display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:900;transition:transform .2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq .a{padding:0 16px 16px;font-size:14px;font-weight:var(--w-med,600);color:#C0C7E8;line-height:1.55}
.faq .a p{margin:0 0 8px}
.faq .a ul{margin:0 0 8px 18px}
.faq .a a{color:var(--acc-text);font-weight:var(--w-bold,800);text-decoration:underline;text-underline-offset:2px}

/* Formular (Kontakt) */
.form{display:grid;gap:14px;max-width:640px}
.form label{display:block;font-size:12.5px;font-weight:var(--w-black,900);text-transform:uppercase;letter-spacing:.05em;color:var(--acc-text);margin-bottom:6px}
/* Felder minimal aufgehellt (Sebastian, 2026-09-10: "ein kleines bisschen
   nur") - eine Stufe der Navy-Rampe von --blue auf #223070, den Ton, den
   auch die Kacheln sonst tragen. */
.form input,.form textarea,.form select{width:100%;background:#223070;border:2px solid #3F5BB8;border-radius:12px;padding:12px 14px;color:#fff;font:inherit;font-size:15px;font-weight:var(--w-med,600);outline:none;transition:border-color .15s}
.form input:focus,.form textarea:focus,.form select:focus{border-color:var(--acc)}
.form textarea{min-height:150px;resize:vertical}
.form input::placeholder,.form textarea::placeholder{color:#7F8AB8}
.form .row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.form .hint{font-size:12px;font-weight:var(--w-med,600);color:#A9B2D6;line-height:1.5}
@media(max-width:560px){.form .row{grid-template-columns:1fr}}
/* .form ist ein Grid mit einer Spalte -> Grid-Items werden per Default auf
   die volle Spaltenbreite gestreckt (justify-items:stretch), deshalb wurde
   der Senden-Button so breit wie das ganze Formular statt wie sein Text
   (Sebastian, 2026-09-10). */
.form button{justify-self:start}

/* Info-Kacheln mit grosser Zeile: Telefon, Mail, Adresse, Bahn-Minuten */
.infotiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin:22px 0}
.infotile{display:block;background:#223070;border:2px solid #3F5BB8;border-radius:14px;padding:18px 18px 16px;box-shadow:0 7px 0 var(--sh),0 12px 18px rgba(0,0,0,.42);transition:transform .15s,border-color .15s;overflow:hidden}
@media(hover:hover){a.infotile:hover{transform:translateY(-3px);border-color:var(--acc)}}
.infotile .k{display:block;font-size:11.5px;font-weight:var(--w-black,900);letter-spacing:.07em;text-transform:uppercase;color:var(--acc-text);margin-bottom:6px}
/* overflow-wrap: lange, leerzeichenlose Werte (v.a. die E-Mail-Adresse)
   liefen bei schmalen Kacheln ueber den Rand hinaus (Sebastian, 2026-09-10). */
.infotile .v{display:block;font-family:"Clash Display",system-ui,sans-serif;font-weight:700;font-size:clamp(14px,1.5vw,16px);text-transform:uppercase;color:#fff;line-height:1.15;letter-spacing:-.01em;word-spacing:.12em;overflow-wrap:anywhere}
.infotile .s{display:block;margin-top:6px;font-size:13px;font-weight:var(--w-med,600);color:#C0C7E8;line-height:1.4;overflow-wrap:anywhere}

/* Oeffnungszeiten gross: Tag links, Zeit rechts. Das Script markiert den
   heutigen Tag mit .today (data-day 0-6 wie Date.getDay()). */
.hours{list-style:none;display:grid;gap:8px;max-width:560px;margin:22px 0 0}
.hours li{display:flex;justify-content:space-between;align-items:center;gap:14px;background:#223070;border:2px solid #3F5BB8;border-radius:12px;padding:12px 18px}
.hours li b{font-size:15px;font-weight:var(--w-black,900);color:#fff}
.hours li span{font-family:"Clash Display",system-ui,sans-serif;font-weight:700;font-size:20px;text-transform:uppercase;color:var(--acc);letter-spacing:-.01em;white-space:nowrap}
.hours li.today{border-color:var(--acc)}
.hours li.today b::after{content:"heute";margin-left:8px;font-size:10px;padding:2px 8px;border-radius:9999px;background:var(--acc);color:var(--line);letter-spacing:.06em;text-transform:uppercase;vertical-align:middle}
/* Live-Zeile "Heute geoeffnet bis ..." - das Nav-Script fuellt #openinfo. */
.openline{display:inline-flex;align-items:center;gap:9px;margin-top:16px;padding:8px 16px;border-radius:9999px;background:var(--blue);border:2px solid var(--acc);font-weight:var(--w-black,900);font-size:13px;color:#fff}
.openline::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--acc);flex:none}
/* Mehr Luft zwischen der Auslastungs-Notiz und der Flaeche darueber
   (Sebastian, 2026-09-12) - .fine hatte hier keinen eigenen Abstand nach
   oben, saß direkt unter der "Heute geoeffnet"-Pille. */
.openline + .fine{margin-top:14px}

/* Karte (Google-Maps-iframe) im Kachelrahmen */
.mapbox{position:relative;border-radius:18px;overflow:hidden;border:3px solid var(--acc);box-shadow:0 7px 0 var(--sh),0 12px 18px rgba(0,0,0,.42);aspect-ratio:16/9;background:var(--blue);margin:22px 0}
.mapbox iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
@media(max-width:760px){.mapbox{aspect-ratio:4/3}}

/* Speisekarte: Kategorie-Block ueber .pricelist, Badges V / NEU.
   Ab 900px zwei Spalten, damit vier Karten-Seiten nicht endlos scrollen. */
.menu{display:grid;gap:30px;margin-top:8px}
@media(min-width:900px){.menu.two{grid-template-columns:1fr 1fr;gap:26px 30px;align-items:start}}
.menu-cat h3{font-family:"Clash Display",system-ui,sans-serif;font-weight:700;text-transform:uppercase;font-size:clamp(20px,2.3vw,26px);line-height:1.04;letter-spacing:-.01em;word-spacing:.16em;color:#fff;display:inline-block;transform:skewX(var(--skew));transform-origin:left bottom;padding-right:.12em;text-shadow:1px 1px 0 var(--acc-ex),2px 2px 0 var(--acc-ex),3px 3px 0 var(--acc-ex),4px 5px 9px rgba(0,0,0,.55)}
.menu-cat .sub{margin:6px 0 0;font-size:13px;font-weight:var(--w-med,600);color:#C0C7E8}
.menu-cat .pricelist{max-width:none;margin-top:14px}
.menu .pricelist .pl-price{white-space:nowrap}
.badge{display:inline-block;vertical-align:middle;margin-left:6px;padding:1px 7px;border-radius:9999px;font-size:10px;font-weight:var(--w-black,900);letter-spacing:.06em;text-transform:uppercase;border:1.5px solid currentColor;line-height:1.5}
.badge.v{color:var(--acc)}
.badge.neu{color:var(--acc2)}

/* Tabelle (Allergene): scrollt bei Bedarf innerhalb des Rahmens, die Seite
   selbst nie. */
.tbl-wrap{overflow-x:auto;border:2px solid #3F5BB8;border-radius:14px;background:#223070;margin:18px 0}
.tbl{width:100%;border-collapse:collapse;font-size:13.5px;font-weight:var(--w-med,600);color:#C0C7E8;min-width:520px}
.tbl th{text-align:left;padding:12px 14px;font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--acc-text);border-bottom:2px solid #3F5BB8;background:var(--blue)}
.tbl td{padding:11px 14px;border-bottom:1px solid rgba(255,255,255,.08);vertical-align:top}
.tbl tr:last-child td{border-bottom:0}
.tbl td:first-child{color:#fff;font-weight:var(--w-bold,800)}
.tbl .code{font-family:"Clash Display",system-ui,sans-serif;font-weight:700;text-transform:uppercase;color:var(--acc);letter-spacing:.04em}
/* Mobil ohne Mindestbreite: die 520px erzwangen seitliches Scrollen, lange
   Hinweiszeilen (Pommes) waren rechts abgeschnitten. Jetzt bricht die
   Tabelle im sichtbaren Bereich um (Sebastian, 2026-09-12). */
@media(max-width:560px){
  .tbl{min-width:0;font-size:12px}
  .tbl th,.tbl td{padding:9px 8px}
  .tbl td:first-child{overflow-wrap:break-word;hyphens:auto}
}

/* Legende (Allergene): Kuerzel + Bedeutung */
.legend{list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:8px;margin:18px 0}
.legend li{display:flex;gap:10px;align-items:baseline;background:#223070;border:2px solid #3F5BB8;border-radius:10px;padding:9px 12px;font-size:13px;font-weight:var(--w-med,600);color:#C0C7E8}
.legend b{flex:none;min-width:26px;font-family:"Clash Display",system-ui,sans-serif;font-weight:700;text-transform:uppercase;color:var(--acc);font-size:16px}

/* Fliesstext (Impressum, Datenschutz, laengere Absaetze) */
.prose{max-width:760px;font-size:15px;font-weight:var(--w-med,600);color:#C7CEEC;line-height:1.6}
.prose h2{font-family:"Clash Display",system-ui,sans-serif;font-weight:700;text-transform:uppercase;font-size:clamp(22px,2.6vw,30px);line-height:1.04;letter-spacing:-.01em;word-spacing:.16em;color:#fff;margin:34px 0 10px;display:inline-block;transform:skewX(var(--skew));transform-origin:left bottom;padding-right:.12em;text-shadow:1px 1px 0 var(--acc-ex),2px 2px 0 var(--acc-ex),3px 3px 0 var(--acc-ex),4px 5px 9px rgba(0,0,0,.55)}
.prose h2:first-child{margin-top:0}
.prose h3{font-size:15.5px;font-weight:var(--w-black,900);color:#fff;margin:22px 0 6px;text-transform:uppercase;letter-spacing:.03em}
.prose p{margin:0 0 12px}
.prose ul,.prose ol{margin:0 0 14px 20px}
.prose li{margin-bottom:5px}
.prose a{color:var(--acc-text);font-weight:var(--w-bold,800);text-decoration:underline;text-underline-offset:2px;overflow-wrap:anywhere}
.prose strong{color:#fff}

/* Stellen (Jobs): Kasten mit Titel, Fakten-Chips, Aufgaben, CTA */
.job{background:#223070;border:3px solid #3F5BB8;border-radius:18px;padding:24px 26px;box-shadow:0 7px 0 var(--sh),0 12px 18px rgba(0,0,0,.42);margin-top:18px}
.job h3{font-family:"Clash Display",system-ui,sans-serif;font-weight:700;text-transform:uppercase;font-size:clamp(21px,2.4vw,28px);line-height:1.04;letter-spacing:-.01em;word-spacing:.16em;color:#fff;display:inline-block;transform:skewX(var(--skew));transform-origin:left bottom;padding-right:.12em;text-shadow:1px 1px 0 var(--acc-ex),2px 2px 0 var(--acc-ex),3px 3px 0 var(--acc-ex),4px 5px 9px rgba(0,0,0,.55)}
.job .meta{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 14px}
.job .meta span{padding:4px 12px;border-radius:9999px;border:2px solid var(--acc);color:var(--acc-text);font-size:11.5px;font-weight:var(--w-black,900);text-transform:uppercase;letter-spacing:.04em}
.job p{font-size:14.5px;font-weight:var(--w-med,600);color:#C7CEEC;line-height:1.55;margin:0 0 12px}
.job ul{margin:0 0 18px 18px;font-size:14px;font-weight:var(--w-med,600);color:#C7CEEC;line-height:1.5}
.job li{margin-bottom:4px}
@media(max-width:640px){.job{padding:20px 16px}}

/* Aktuelles: Karten mit Foto, Datums-Badge und Text */
.news{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:22px;margin-top:18px}
.news-item{display:flex;flex-direction:column;background:#223070;border:3px solid var(--acc);border-radius:16px;overflow:hidden;box-shadow:0 7px 0 var(--sh),0 12px 18px rgba(0,0,0,.42)}
.news-item .media{position:relative;aspect-ratio:16/10;overflow:hidden}
.news-item .media img{width:100%;height:100%;object-fit:cover}
.news-item .date{position:absolute;top:12px;left:12px;z-index:2;padding:4px 12px;border-radius:9999px;background:var(--yellow);color:#241A00;border:2px solid var(--line);font-size:11px;font-weight:var(--w-black,900);letter-spacing:.05em;text-transform:uppercase}
.news-item .body{padding:16px 18px 18px;display:flex;flex-direction:column;flex:1}
.news-item h3{font-family:"Clash Display",system-ui,sans-serif;font-weight:700;text-transform:uppercase;font-size:21px;line-height:1.05;letter-spacing:-.01em;word-spacing:.12em;color:#fff;margin-bottom:8px}
.news-item p{font-size:13.5px;font-weight:var(--w-med,600);color:#C7CEEC;line-height:1.5;margin-bottom:14px}
.news-item .pill{margin-top:auto;align-self:flex-start}

/* Schritte (Club "In drei Schritten"): nummerierte Kacheln */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px 14px;margin:30px 0 22px}
.step{position:relative;background:#223070;border:2px solid #3F5BB8;border-radius:14px;padding:24px 18px 18px}
.step .n{position:absolute;top:-17px;left:16px;width:34px;height:34px;border-radius:50%;background:var(--acc);color:var(--line);border:2.5px solid var(--line);display:flex;align-items:center;justify-content:center;font-family:"Clash Display",system-ui,sans-serif;font-weight:700;font-size:17px}
.step b{display:block;font-size:15px;color:#fff;margin-bottom:5px}
.step p{margin:0;font-size:13.5px;font-weight:var(--w-med,600);color:#C0C7E8;line-height:1.45}

/* Download-Kachel: .rule mit Link-Pill unten */
.rule .pill{margin-top:8px}

/* Anfahrt-Hero mobil etwas flacher (Sebastian, 2026-09-12): das Motiv wird
   dadurch weiter herausgezoomt, die Karte in ihren Händen bleibt sichtbar.
   Passt zum neuen, breiteren Mobilschnitt anfahrt-frau-karte-mobil-2.jpg. */
@media(max-width:900px){
  .hero--anfahrt .inner{min-height:64vh;min-height:66svh}
}