/* ADVANGERS, pages.css : layouts for subpages */

.page-main { padding-top: 120px; position: relative; }
/* Der Hero traegt seine Nav-Freihaltung selbst (ueber sein padding-top). Dadurch
   faellt der 120px-Streifen von .page-main weg und der Hero-Hintergrund laeuft
   DURCHGEHEND bis unter die Nav - vorher trafen hier zwei Hintergruende aufeinander
   (Body-Glow im Streifen oben, an der Hero-Oberkante hart abgeschnittene Aurora).
   Nur auf Seiten MIT Hero, damit Seiten ohne Hero ihren Abstand behalten. */
.page-main:has(.page-hero) { padding-top: 0; }

/* ---- HERO ----
   Die ersten ~120px des padding-top liegen hinter Leiste + schwebender Nav; erst
   darunter beginnt der Inhalt. Frueher kam diese Freihaltung von .page-main. */
.page-hero {
  position: relative;
  padding: 200px 0 60px;
  overflow: hidden;
  isolation: isolate;
}
/* Kompakter Seitenkopf: auf der Buchungsseite soll das Formular moeglichst
   weit oben stehen, statt hinter einem bildschirmfuellenden Kopf zu liegen. */
.page-hero.is-compact { padding: 168px 0 24px; }
.page-hero.is-compact .ph-title { font-size: clamp(30px, 4.2vw, 52px); }
.page-hero.is-compact .ph-sub { max-width: 62ch; }
@media (max-width: 700px) {
  .page-hero.is-compact { padding: 150px 0 16px; }
}
.page-hero.has-image {
  /* grosszuegiges Kopf-Padding: die ersten ~180px liegen hinter Nav + Leiste,
     der Inhalt (align-items:flex-end) sitzt im unteren Bilddrittel. */
  padding: 190px 0 76px;
  min-height: clamp(600px, 90vh, 880px);
  display: flex; align-items: flex-end;
}
.page-hero.has-image .ph-inner { width: 100%; }

.ph-image { position: absolute; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.ph-image-bg {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center 40%;
  filter: saturate(1.05) contrast(1.05);
  transform: scale(1.04);
  animation: ph-img-drift 24s ease-in-out infinite alternate;
}
@keyframes ph-img-drift {
  from { transform: scale(1.04) translateY(0); }
  to   { transform: scale(1.08) translateY(-1.5%); }
}
.ph-image-vignette {
  position: absolute; inset: 0;
  background:
    /* Leseband: links deutlich dunkler, weil dort Eyebrow, Überschrift und Text
       stehen. Vorher war die Abdunklung genau auf Höhe der Überschrift am
       schwächsten (0,15) — auf hellen Bildern wie der Kids Zone war sie kaum
       lesbar. Rechts bleibt das Motiv sichtbar. */
    linear-gradient(90deg, rgba(8,6,18,0.93) 0%, rgba(8,6,18,0.86) 40%, rgba(8,6,18,0.55) 72%, rgba(8,6,18,0.32) 100%),
    linear-gradient(180deg, rgba(8,6,18,0.55) 0%, rgba(8,6,18,0.30) 30%, rgba(8,6,18,0.55) 70%, rgba(8,6,18,0.95) 100%),
    radial-gradient(ellipse 90% 100% at 50% 60%, transparent 30%, rgba(8,6,18,0.55) 100%);
}
/* Auf schmalen Schirmen läuft der Text über die ganze Breite — dann gleichmäßig
   abdunkeln statt nur links. */
@media (max-width: 900px) {
  .ph-image-vignette {
    background:
      linear-gradient(180deg, rgba(8,6,18,0.86) 0%, rgba(8,6,18,0.80) 55%, rgba(8,6,18,0.95) 100%);
  }
}
.ph-image-tint {
  position: absolute; inset: 0;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--c) 22%, transparent) 0%, transparent 55%),
    linear-gradient(225deg, color-mix(in srgb, var(--c) 12%, transparent) 0%, transparent 50%);
  /* screen hellt auf — auf hellen Motiven kostet das Lesbarkeit, deshalb gedeckelt */
  mix-blend-mode: screen;
  opacity: 0.45;
}
.ph-image-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(to right, rgba(255,255,255,0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.05) 1px, transparent 1px);
  background-size: 96px 96px;
  mask-image: radial-gradient(ellipse 70% 70% at 50% 60%, transparent 50%, #000 95%);
  -webkit-mask-image: radial-gradient(ellipse 70% 70% at 50% 60%, transparent 50%, #000 95%);
  opacity: 0.45;
}
.ph-image-scan {
  position: absolute; inset: 0;
  background: repeating-linear-gradient(0deg, transparent 0px, transparent 3px, rgba(255,255,255,0.022) 4px, transparent 5px);
  mix-blend-mode: overlay;
  opacity: 0.5;
}
.ph-image-corners {
  position: absolute; inset: 32px;
  pointer-events: none;
  z-index: 2;
}
.ph-image-corners span {
  position: absolute;
  width: 32px; height: 32px;
  border: 1.8px solid var(--c);
  opacity: 0.7;
}
.ph-image-corners span:nth-child(1) { top: 0; left: 0; border-right: 0; border-bottom: 0; }
.ph-image-corners span:nth-child(2) { top: 0; right: 0; border-left: 0; border-bottom: 0; }
.ph-image-corners span:nth-child(3) { bottom: 0; left: 0; border-right: 0; border-top: 0; }
.ph-image-corners span:nth-child(4) { bottom: 0; right: 0; border-left: 0; border-top: 0; }

.page-hero.has-image .page-h1,
.page-hero.has-image .page-sub { text-shadow: 0 4px 30px rgba(0,0,0,0.6); }
.page-hero.has-image .stat-block { border-top-color: rgba(255,255,255,0.18); }
.page-hero.has-image .sb-num { text-shadow: 0 2px 18px rgba(0,0,0,0.5); }

.intro-lead {
  font-size: clamp(18px, 2vw, 22px);
  line-height: 1.55;
  color: var(--ink-2);
  margin: 24px 0 0;
  max-width: 620px;
}

/* ---- KIDS ZONE FIGUREN (Adventure Rangers across the page) ---- */
.kz-fig {
  position: absolute;
  pointer-events: none;
  z-index: 5;
  filter: drop-shadow(0 18px 28px rgba(0,0,0,0.55)) drop-shadow(0 0 22px rgba(255,31,182,0.30));
}

/* Die Figuren haengen an IHREM Abschnitt, nicht an einem festen Abstand zur
   Seitenspitze. Vorher standen hier feste Werte (top: 1380px …): sobald ein Text
   laenger wurde, verschoben sich die Abschnitte und eine Figur lag mitten im
   Fliesstext. Jetzt sitzen sie im seitlichen Rand neben dem Inhalt und
   verschwinden, wenn der Rand dafuer zu schmal wird. */
.kz-anchor { position: relative; }
.kz-anchor .wrap { position: relative; }

.kz-fig-hero {
  top: 50%;
  right: calc(100% + 24px);
  transform: translateY(-50%);
  width: clamp(150px, 14vw, 240px);
  animation: kz-bob 3.6s ease-in-out infinite;
  z-index: 6;
}

.kz-fig-activities {
  top: 50%;
  right: calc(100% + 24px);
  width: 170px;
  opacity: 0.92;
  animation: kz-bob 4.2s ease-in-out infinite 0.8s;
  filter: drop-shadow(0 16px 24px rgba(0,0,0,0.5)) drop-shadow(0 0 18px rgba(255,182,39,0.25));
}

.kz-fig-side {
  top: 40%;
  left: calc(100% + 24px);
  width: 180px;
  opacity: 0.55;
  filter: saturate(0.75) drop-shadow(0 16px 24px rgba(0,0,0,0.45));
  animation: kz-bob 5s ease-in-out infinite 1.6s;
}

.kz-fig-cta {
  bottom: 0;
  left: calc(100% + 24px);
  width: clamp(130px, 12vw, 200px);
  opacity: 0.95;
  animation: kz-jump 2.8s ease-in-out infinite;
  filter: drop-shadow(0 16px 24px rgba(0,0,0,0.55)) drop-shadow(0 0 18px rgba(255,182,39,0.35));
}

@keyframes kz-bob {
  0%, 100% { transform: translateY(-50%) rotate(var(--rot, 0deg)) scaleX(var(--flip, 1)); }
  50% { transform: translateY(calc(-50% - 12px)) rotate(var(--rot, 0deg)) scaleX(var(--flip, 1)); }
}
.kz-fig-activities { --rot: -6deg; --flip: -1; }
.kz-fig-side { --rot: 5deg; }
@keyframes kz-jump {
  0%, 100% { transform: translateY(0) scaleX(-1); }
  50% { transform: translateY(-18px) scaleX(-1); }
}

/* Kein Platz im Rand mehr: lieber keine Figur als eine Figur im Text. */
@media (max-width: 1500px) {
  .kz-fig-side, .kz-fig-cta { display: none; }
}
@media (max-width: 1300px) {
  .kz-fig-activities, .kz-fig-hero { display: none; }
}

/* ---- HERO MASCOT (Adventure Rangers Figuren) ---- */
.ph-mascot {
  position: absolute;
  right: clamp(20px, 4vw, 80px);
  bottom: -40px;
  width: clamp(220px, 28vw, 420px);
  z-index: 5;
  pointer-events: none;
  animation: phm-bob 4s ease-in-out infinite;
}
.ph-mascot img {
  position: relative;
  display: block;
  width: 100%; height: auto;
  filter: drop-shadow(0 24px 32px rgba(0,0,0,0.55)) drop-shadow(0 0 30px color-mix(in srgb, var(--c) 30%, transparent));
  z-index: 2;
}
.phm-glow {
  position: absolute;
  bottom: -10%; left: 5%; right: 5%;
  height: 80%;
  background: radial-gradient(ellipse 60% 70% at center bottom, color-mix(in srgb, var(--c) 35%, transparent), transparent 70%);
  filter: blur(28px);
  z-index: 1;
}
@keyframes phm-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}
.page-hero.has-mascot { padding-right: clamp(20px, 30vw, 380px); }
.page-hero.has-mascot .page-h1,
.page-hero.has-mascot .page-sub { max-width: 700px; }

@media (max-width: 900px) {
  .ph-mascot { right: -20px; bottom: -30px; width: 180px; opacity: 0.85; }
  .page-hero.has-mascot { padding-right: 16px; }
}
@media (max-width: 560px) {
  .ph-mascot { right: -40px; bottom: -20px; width: 140px; opacity: 0.7; }
}

@supports not (color: color-mix(in srgb, red, blue)) {
  .ph-mascot img { filter: drop-shadow(0 24px 32px rgba(0,0,0,0.55)); }
  .phm-glow { background: radial-gradient(ellipse 60% 70% at center bottom, rgba(255,31,182,0.35), transparent 70%); }
}

/* ---- PHASE CARD (Was hier passiert · rechts) ---- */
.phase-card {
  position: relative;
  padding: 32px 30px;
  border-radius: 22px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--c) 8%, rgba(255,255,255,0.025)), rgba(255,255,255,0.02));
  border: 1px solid var(--line);
  isolation: isolate;
  overflow: hidden;
}
.phase-card::before {
  content: "";
  position: absolute; left: 0; top: 0;
  width: 4px; height: 100%;
  background: var(--c);
  box-shadow: 0 0 24px var(--c);
}
.phase-card::after {
  content: "";
  position: absolute; top: -30%; right: -20%;
  width: 60%; height: 80%;
  background: radial-gradient(ellipse, color-mix(in srgb, var(--c) 22%, transparent), transparent 60%);
  filter: blur(40px);
  opacity: 0.4;
  pointer-events: none;
  z-index: -1;
}

.ps-head {
  display: flex; justify-content: space-between; align-items: center;
  padding-bottom: 18px;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--line);
}
.ps-eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--c);
  font-weight: 700;
}
.ps-meta {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  color: var(--ink-3);
}

.ps-list {
  display: flex; flex-direction: column;
}
.ps-row {
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 14px;
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
  align-items: flex-start;
  position: relative;
}
.ps-row:last-child { border-bottom: 0; }
.ps-num {
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--c);
  font-variant-numeric: tabular-nums;
  padding-top: 3px;
}
.ps-body { display: flex; flex-direction: column; gap: 4px; }
.ps-name {
  font-family: var(--display);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: -0.01em;
  color: var(--ink);
  line-height: 1.2;
}
.ps-desc {
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-2);
}

@supports not (color: color-mix(in srgb, red, blue)) {
  .phase-card { background: rgba(255,255,255,0.025); }
  .phase-card::after { background: radial-gradient(ellipse, var(--c), transparent 60%); opacity: 0.18; }
}
.ph-bg { position: absolute; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.ph-aurora {
  position: absolute; inset: -20%;
  background:
    radial-gradient(ellipse 50% 40% at 25% 20%, color-mix(in srgb, var(--c) 24%, transparent), transparent 60%),
    radial-gradient(ellipse 45% 35% at 80% 60%, color-mix(in srgb, var(--c) 18%, transparent), transparent 60%);
  filter: blur(40px);
  opacity: 0.85;
}
.ph-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(to right, rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 80px 80px;
  mask-image: radial-gradient(ellipse 70% 60% at center, #000 30%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at center, #000 30%, transparent 80%);
  opacity: 0.5;
}
.ph-noise {
  position: absolute; inset: 0;
  background-image: radial-gradient(circle, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 4px 4px;
  opacity: 0.5;
  mix-blend-mode: overlay;
}
.ph-inner {
  position: relative; z-index: 1;
  max-width: 1100px;
}
.page-h1 {
  font-family: var(--display);
  font-weight: 700;
  /* Untergrenze 34 statt 48: "Geschenkgutschein." ist bei 390px und 48px rund
     420px breit und wurde vom .page-hero (overflow: hidden) abgeschnitten.
     Ueber 600px aendert sich nichts, dort greift ohnehin 8vw. Trennung als
     Netz fuer noch laengere Woerter - <html lang="de"> steht. */
  font-size: clamp(34px, 8vw, 96px);
  overflow-wrap: break-word;
  hyphens: auto;
  line-height: 0.95;
  letter-spacing: -0.04em;
  margin: 18px 0 24px;
  color: var(--ink);
}
.page-h1 em {
  font-style: normal;
  color: var(--c, var(--accent));
  position: relative;
  display: inline-block;
}
.page-h1 em::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 4px;
  height: 6px;
  background: var(--c, var(--accent));
  opacity: 0.18;
  transform: skewX(-12deg);
  z-index: -1;
}
.page-sub {
  font-size: clamp(17px, 1.5vw, 21px);
  line-height: 1.55;
  max-width: 720px;
  color: var(--ink-2);
  margin: 0 0 32px;
}

/* ---- SECTION ---- */
.page-section {
  padding: 80px 0;
  position: relative;
}
.page-section:nth-of-type(even) {
  background: linear-gradient(180deg, transparent, rgba(255,255,255,0.015), transparent);
}

.two-col {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 64px;
  align-items: start;
}
@media (max-width: 900px) {
  .two-col { grid-template-columns: 1fr; gap: 32px; }
}
/* Umgedreht: langer Text links, schmale Karte rechts. Auf den Bereichsseiten
   steht der Einleitungstext links und die kurze Phasen-Karte rechts — im
   Standard-Raster (1fr / 1.4fr) lief der Text dadurch schmal und hoch, waehrend
   die Karte breit und halbleer danebenstand. */
.two-col.is-flip { grid-template-columns: 1.4fr 1fr; }
@media (max-width: 900px) {
  .two-col.is-flip { grid-template-columns: 1fr; }
}

/* ---- STAT BLOCK (in hero) ---- */
.stat-block {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 16px;
  margin-top: 40px;
  padding-top: 32px;
  border-top: 1px solid var(--line);
}
@media (max-width: 700px) {
  .stat-block { grid-template-columns: repeat(2, 1fr); }
}
.sb-item { display: flex; flex-direction: column; gap: 6px; }
.sb-num {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(32px, 4vw, 48px);
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
/* NACH der Basisregel, damit der Mobil-Wert nicht von ihr ueberschrieben wird
   (Media Queries erhoehen die Spezifitaet nicht). Gemessen: bei 2 Spalten passt
   "ab 24,90 €" so bis runter zu 320px einzeilig. */
@media (max-width: 700px) {
  .sb-num { font-size: clamp(21px, 6.6vw, 30px); }
}
.sb-label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* ---- NUMBERED LIST ---- */
.num-list {
  list-style: none;
  margin: 40px 0 0;
  padding: 0;
  display: grid;
  gap: 4px;
}
.num-item {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 24px;
  padding: 28px 0;
  border-top: 1px solid var(--line);
  align-items: start;
  /* Ohne min-width:0 schrumpft die 1fr-Spalte nicht unter ihre min-content-Breite,
     dadurch lief die ganze Zeile auf schmalen Screens aus dem Bild. */
  transition: background 0.3s ease;
}
.num-item > * { min-width: 0; }
.num-item:hover { background: rgba(255,255,255,0.015); }
.num-item:last-child { border-bottom: 1px solid var(--line); }
@media (max-width: 560px) {
  .num-item { grid-template-columns: 48px 1fr; gap: 14px; }
}
.num-marker {
  font-family: var(--mono);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--c, var(--accent));
  font-variant-numeric: tabular-nums;
  line-height: 1.4;
  padding-top: 4px;
}
.num-h {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(22px, 2.6vw, 30px);
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin: 0 0 8px;
  color: var(--ink);
}
.num-p {
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink-2);
  margin: 0;
  max-width: 720px;
}

/* ---- FEATURE GRID ---- */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
  margin-top: 32px;
}
/* Ab Tablet-Breite bestimmt die Kartenzahl die Spalten (--fg-cols, gesetzt in
   FeatureGrid). Ohne das fuellte das Raster stur so viele Spalten wie passen und
   liess die letzte Karte allein in einer eigenen Reihe stehen. */
@media (min-width: 1000px) {
  .feature-grid { grid-template-columns: repeat(var(--fg-cols, 3), minmax(0, 1fr)); }
}
.fg-card {
  padding: 28px 24px;
  border-radius: 18px;
  background: rgba(255,255,255,0.025);
  border: 1px solid var(--line);
  transition: transform 0.25s ease, border-color 0.25s ease, background 0.25s ease, box-shadow 0.3s ease;
  position: relative;
  overflow: hidden;
}
.fg-card::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(135deg, color-mix(in srgb, var(--c, var(--accent)) 8%, transparent), transparent 50%);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.fg-card:hover {
  transform: translateY(-4px);
  border-color: var(--c, var(--accent));
  background: rgba(255,255,255,0.04);
  box-shadow: 0 16px 40px rgba(0,0,0,0.3);
}
.fg-card:hover::before { opacity: 1; }
.fg-icon {
  display: inline-flex; align-items: center; justify-content: center;
  /* Quadrat fuer Kuerzel wie "01" und fuer Symbole, breiter sobald ein Wort
     drinsteht ("Buxtehude") — vorher lief der Text aus dem Kaestchen heraus. */
  min-width: 44px; height: 44px; padding: 0 12px;
  white-space: nowrap;
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  border-radius: 12px;
  margin-bottom: 18px;
  background: color-mix(in srgb, var(--c, var(--accent)) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--c, var(--accent)) 30%, transparent);
  color: var(--c, var(--accent));
  transition: background .25s ease, transform .25s ease;
}
.fg-icon svg { width: 22px; height: 22px; }
.fg-card:hover .fg-icon {
  background: color-mix(in srgb, var(--c, var(--accent)) 22%, transparent);
  transform: scale(1.05);
}
@supports not (color: color-mix(in srgb, red, blue)) {
  .fg-icon { background: rgba(255,31,182,0.12); border-color: rgba(255,31,182,0.3); }
}
.fg-h {
  font-family: var(--display);
  font-weight: 700;
  font-size: 19px;
  letter-spacing: -0.01em;
  margin: 0 0 8px;
  color: var(--ink);
}
.fg-p {
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-2);
  margin: 0;
}

/* ---- CTA BAND ---- */
.cta-band {
  /* horizontaler Seitenrand auf ALLEN Breiten: die Karte (.cta-band-inner)
     ueberschreibt das .wrap-Padding mit eigenem, dadurch fehlte ihr sonst der
     seitliche Abstand und sie klebte auf Tablet/Desktop am Rand. */
  padding: 80px 32px;
  position: relative;
}
.cta-band-inner {
  position: relative;
  display: grid;
  grid-template-columns: 1.5fr auto;
  gap: 32px;
  align-items: center;
  padding: 48px 56px;
  border-radius: 28px;
  background: linear-gradient(135deg, rgba(255,31,182,0.08), rgba(91,216,255,0.04));
  border: 1px solid var(--line);
  overflow: hidden;
}
.cta-band-glow {
  position: absolute; top: -50%; left: -10%;
  width: 60%; height: 200%;
  background: radial-gradient(ellipse, rgba(255,31,182,0.18), transparent 60%);
  filter: blur(60px);
  pointer-events: none;
}
.cta-band-text { position: relative; }
.cta-band-text .h-section { margin: 8px 0 12px; font-size: clamp(28px, 3.5vw, 42px); }
.cta-band-sub {
  font-size: 17px;
  line-height: 1.55;
  color: var(--ink-2);
  margin: 0;
  max-width: 540px;
}
.cta-band-actions {
  position: relative;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
@media (max-width: 760px) {
  /* Seitenabstand: die Karte klebte sonst Kante-zu-Kante am Bildschirmrand
     (.cta-band-inner ueberschreibt das .wrap-Padding mit eigenem). */
  .cta-band { padding: 60px 18px; }
  .cta-band-inner { grid-template-columns: 1fr; padding: 30px 22px; }
  /* Beide Buttons gleich breit und untereinander - vorher unterschiedlich
     breit und linksbuendig, das wirkte unfertig. */
  .cta-band-actions { flex-direction: column; align-items: stretch; }
  .cta-band-actions .btn { width: 100%; justify-content: center; }
}

/* ---- PROSE (legal pages, paragraphs) ---- */
.prose {
  font-size: 17px;
  line-height: 1.7;
  color: var(--ink-2);
  max-width: 760px;
}
.prose h2 {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(22px, 2.4vw, 28px);
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 48px 0 14px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}
.prose h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.prose h3 {
  font-family: var(--display);
  font-weight: 600;
  font-size: 18px;
  color: var(--ink);
  margin: 24px 0 8px;
}
.prose p { margin: 0 0 16px; }
.prose ul, .prose ol { margin: 0 0 20px; padding-left: 22px; }
.prose li { margin-bottom: 8px; }
.prose a {
  color: var(--accent-2);
  text-decoration: underline;
  text-decoration-color: rgba(91,216,255,0.4);
  text-underline-offset: 3px;
  transition: text-decoration-color 0.2s ease, color 0.2s ease;
}
.prose a:hover { color: var(--accent); text-decoration-color: var(--accent); }
.prose strong { color: var(--ink); font-weight: 600; }
.prose em { color: var(--accent); font-style: normal; font-weight: 600; }
.prose code {
  font-family: var(--mono);
  font-size: 14px;
  background: rgba(255,255,255,0.06);
  padding: 1px 6px;
  border-radius: 4px;
  color: var(--accent-3);
}
.legal-wrap { padding-top: 0; }

/* ---- PACKAGE GRID (Schulen) ---- */
.pkg-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
@media (max-width: 900px) {
  .pkg-grid { grid-template-columns: 1fr; }
}
.pkg-card {
  position: relative;
  padding: 36px 28px;
  border-radius: 22px;
  background: rgba(255,255,255,0.025);
  border: 1px solid var(--line);
  display: flex; flex-direction: column;
  transition: transform 0.25s ease, border-color 0.25s ease;
  overflow: hidden;
}
.pkg-card::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, color-mix(in srgb, var(--c) 8%, transparent), transparent 60%);
  pointer-events: none;
}
.pkg-card:hover { transform: translateY(-4px); border-color: var(--c); }
.pkg-card.hot { border-color: var(--c); box-shadow: 0 0 0 1px var(--c), 0 24px 60px rgba(255,31,182,0.18); }
.pkg-flag {
  position: absolute; top: 18px; right: 18px;
  background: var(--c); color: var(--on-accent);
  font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.12em;
  padding: 4px 10px; border-radius: 999px;
  font-weight: 700;
}
.pkg-tag {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  margin-bottom: 8px;
  position: relative;
}
.pkg-tier {
  font-family: var(--display);
  font-weight: 700;
  font-size: 32px;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin-bottom: 12px;
  position: relative;
}
.pkg-price {
  display: flex; align-items: baseline; flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 24px;
  position: relative;
}
.pkg-from {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--ink-3);
  margin-right: 6px;
}
.pkg-eur { font-size: 24px; color: var(--c); font-weight: 600; }
.pkg-num { font-family: var(--display); font-weight: 700; font-size: 48px; letter-spacing: -0.03em; color: var(--ink); font-variant-numeric: tabular-nums; line-height: 1; }
.pkg-per { font-family: var(--mono); font-size: 12px; color: var(--ink-3); letter-spacing: 0.06em; margin-left: 4px; }
.pkg-list {
  list-style: none; padding: 0; margin: 0 0 28px;
  flex: 1;
  position: relative;
}
.pkg-list li {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 10px 0;
  border-top: 1px solid var(--line);
  font-size: 14px;
  color: var(--ink-2);
}
.pkg-list li:last-child { border-bottom: 1px solid var(--line); }
.pkg-check {
  color: var(--c);
  font-weight: 700;
  flex-shrink: 0;
}
.pkg-btn { width: 100%; justify-content: center; position: relative; }

/* ---- TEAM GRID ---- */
.team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin-top: 32px;
}
.team-card {
  padding: 32px 24px;
  border-radius: 16px;
  background: rgba(255,255,255,0.025);
  border: 1px solid var(--line);
  transition: transform 0.25s ease, border-color 0.25s ease;
}
.team-card:hover { transform: translateY(-4px); border-color: var(--c); }
.team-mark {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--c), color-mix(in srgb, var(--c) 50%, #000));
  margin-bottom: 16px;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--c) 50%, transparent), 0 0 24px color-mix(in srgb, var(--c) 30%, transparent);
}
.team-name {
  font-family: var(--display);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.04em;
  color: var(--ink);
  margin-bottom: 4px;
}
.team-role {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--ink-3);
}

/* ---- CONTACT ---- */
.page-section-tight { padding-top: 32px; padding-bottom: 32px; }

.contact-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
@media (max-width: 800px) { .contact-grid { grid-template-columns: 1fr; } }

.contact-card {
  position: relative;
  padding: 24px 24px 24px 22px;
  border-radius: 18px;
  background: rgba(255,255,255,0.025);
  border: 1px solid var(--line);
  transition: transform 0.25s ease, border-color 0.25s ease, background 0.25s ease, box-shadow 0.3s ease;
  text-decoration: none;
  color: var(--ink);
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 18px;
  overflow: hidden;
  isolation: isolate;
}
.contact-card::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(135deg, color-mix(in srgb, var(--c) 7%, transparent), transparent 60%);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
  z-index: -1;
}
a.contact-card:hover {
  transform: translateY(-4px);
  border-color: var(--c);
  background: rgba(255,255,255,0.04);
  box-shadow: 0 16px 40px rgba(0,0,0,0.3);
}
a.contact-card:hover::before { opacity: 1; }

.cc-icon-wrap {
  width: 44px; height: 44px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--c) 14%, rgba(0,0,0,0.25));
  border: 1px solid color-mix(in srgb, var(--c) 30%, transparent);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--c);
  flex-shrink: 0;
  transition: background 0.25s ease, transform 0.3s ease;
}
.cc-icon-wrap svg { width: 20px; height: 20px; }
a.contact-card:hover .cc-icon-wrap { background: color-mix(in srgb, var(--c) 22%, rgba(0,0,0,0.2)); transform: scale(1.05); }

.cc-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cc-label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--ink-3);
}
.cc-value {
  font-family: var(--display);
  font-weight: 700;
  /* Auf 390px standen hier 151px zur Verfuegung, die Telefonnummer brauchte
     160px und die Mail-Adresse 168px - beide wurden mit "…" abgeschnitten.
     Ausgerechnet Rufnummer und Adresse duerfen nicht gekuerzt werden. */
  font-size: clamp(16px, 4.4vw, 18px);
  letter-spacing: -0.01em;
  color: var(--ink);
  line-height: 1.25;
  /* Umbruch statt Ellipse als Sicherheitsnetz, falls es doch mal nicht passt */
  overflow-wrap: anywhere;
}
.cc-meta {
  font-family: var(--mono);
  font-size: 12px;
  /* war var(--c) = Akzentfarbe (Pink): auf dunklem Blau schlecht lesbar.
     Jetzt hell-grau, groesser und mit mehr Zeilenabstand. */
  color: var(--ink-2);
  letter-spacing: 0.03em;
  line-height: 1.5;
  margin-top: 5px;
}
.cc-arrow {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--line);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--ink-3);
  transition: background 0.25s ease, color 0.25s ease, transform 0.25s ease, border-color 0.25s ease;
  flex-shrink: 0;
}
.cc-arrow svg { width: 14px; height: 14px; }
a.contact-card:hover .cc-arrow {
  background: var(--c); color: var(--on-accent); border-color: var(--c);
  transform: translateX(2px);
}

/* ---- VISIT CARD (Address + Anfahrt + Map) ---- */
.visit-card {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border-radius: 24px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: rgba(255,255,255,0.02);
  isolation: isolate;
  position: relative;
}
@media (max-width: 900px) { .visit-card { grid-template-columns: 1fr; } }

.visit-map {
  position: relative;
  min-height: 480px;
  background: #0e0a22;
  overflow: hidden;
  isolation: isolate;
}
.leaflet-host { position: absolute; inset: 0; height: 100%; width: 100%; z-index: 1; }
.leaflet-container { background: #0e0a22 !important; font-family: var(--display) !important; }

/* Custom marker */
.lf-marker { pointer-events: none; }
.lf-pin {
  position: relative;
  display: inline-block;
  pointer-events: none;
  transform: translate(-50%, -100%);
}
.lf-dot {
  position: absolute;
  left: 0; top: 0;
  transform: translate(-50%, -50%);
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 4px rgba(255,31,182,0.28), 0 0 24px var(--accent);
  z-index: 2;
}
.lf-ring {
  position: absolute;
  left: 0; top: 0;
  transform: translate(-50%, -50%);
  width: 22px; height: 22px;
  border: 2px solid var(--accent);
  border-radius: 50%;
  animation: lf-ping 2.4s ease-out infinite;
  z-index: 1;
}
@keyframes lf-ping {
  0% { width: 22px; height: 22px; opacity: 0.9; }
  100% { width: 90px; height: 90px; opacity: 0; }
}
.lf-tag {
  position: absolute;
  bottom: 22px; left: 0;
  transform: translateX(-50%);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  background: var(--accent);
  color: var(--on-accent);
  padding: 5px 10px;
  border-radius: 999px;
  font-weight: 700;
  white-space: nowrap;
  box-shadow: 0 6px 16px rgba(255,31,182,0.45);
  z-index: 3;
}
.lf-tag::after {
  content: "";
  position: absolute;
  bottom: -4px; left: 50%;
  transform: translateX(-50%) rotate(45deg);
  width: 8px; height: 8px;
  background: var(--accent);
}

/* Dark theme for Leaflet UI */
.leaflet-control-zoom a {
  background: rgba(15,12,28,0.92) !important;
  color: var(--ink) !important;
  border: 1px solid var(--line) !important;
  font-family: var(--display) !important;
  font-weight: 600 !important;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease !important;
}
.leaflet-control-zoom a:hover {
  background: var(--accent) !important;
  color: var(--on-accent) !important;
  border-color: var(--accent) !important;
}
.leaflet-control-zoom { box-shadow: 0 8px 20px rgba(0,0,0,0.5) !important; border-radius: 10px !important; overflow: hidden; }
.leaflet-control-attribution {
  background: rgba(8,6,18,0.78) !important;
  color: var(--ink-3) !important;
  font-family: var(--mono) !important;
  font-size: 10px !important;
  letter-spacing: 0.04em !important;
  padding: 3px 8px !important;
  backdrop-filter: blur(8px);
}
.leaflet-control-attribution a { color: var(--accent-2) !important; }

.vm-coords {
  position: absolute;
  bottom: 12px; left: 12px;
  z-index: 600;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  color: rgba(255,255,255,0.55);
  background: rgba(8,6,18,0.7);
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--line);
  backdrop-filter: blur(8px);
  pointer-events: none;
}

.visit-info {
  padding: 48px 40px;
  display: flex; flex-direction: column; gap: 24px;
  background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01));
}
.visit-h { font-size: clamp(28px, 3.6vw, 40px); margin: 8px 0 8px; }
.visit-rows { display: flex; flex-direction: column; gap: 18px; }
.vr-row {
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 16px;
  padding: 14px 0;
  border-top: 1px solid var(--line);
}
.vr-row:last-child { border-bottom: 1px solid var(--line); }
.vr-icon {
  width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
}
.vr-icon svg { width: 22px; height: 22px; }
.vr-l {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--ink-3);
  margin-bottom: 6px;
}
.vr-v {
  font-size: 14px;
  color: var(--ink-2);
  line-height: 1.5;
}
.vr-v strong { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.vr-row-solo { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.visit-cta { align-self: flex-start; gap: 8px; }
.visit-cta svg { width: 14px; height: 14px; }

/* ---- ANFAHRT (so schnell bist du da) ---- */
.anfahrt-head { text-align: center; max-width: 640px; margin: 72px auto 36px; }
.anfahrt-head .eyebrow { justify-content: center; }
.anfahrt-head .section-sub { margin: 14px auto 0; color: var(--ink-2); }

.anfahrt-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
@media (max-width: 860px) { .anfahrt-grid { grid-template-columns: 1fr; } }

.an-card {
  --c: var(--accent);
  position: relative;
  padding: 32px 28px;
  border-radius: 20px;
  border: 1px solid var(--line);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--c) 9%, transparent), transparent 55%),
    rgba(255,255,255,0.02);
  overflow: hidden;
  transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.an-card::before {
  content: "";
  position: absolute; left: 0; right: 0; top: 0; height: 3px;
  background: var(--c);
  box-shadow: 0 0 18px var(--c);
}
.an-card:hover {
  transform: translateY(-4px);
  border-color: var(--c);
  box-shadow: 0 22px 50px -24px color-mix(in srgb, var(--c) 60%, transparent);
}
.an-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
  border-radius: 12px;
  color: var(--c);
  background: color-mix(in srgb, var(--c) 12%, rgba(255,255,255,0.03));
  border: 1px solid color-mix(in srgb, var(--c) 28%, var(--line));
  margin-bottom: 18px;
}
.an-icon svg { width: 24px; height: 24px; }
.an-num {
  font-family: var(--display);
  font-size: clamp(40px, 5vw, 60px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
  color: #fff;
  margin-bottom: 6px;
}
.an-num span { font-size: 0.4em; font-weight: 600; color: var(--ink-3); letter-spacing: 0.04em; }
.an-label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--c);
  margin-bottom: 12px;
}
.an-sub { font-size: 14px; line-height: 1.6; color: var(--ink-2); }
.an-sub strong { color: var(--ink); font-weight: 600; }
.an-sub em { color: var(--ink-3); font-style: normal; font-size: 13px; }

/* ---- Behindertenparkplätze ---- */
.park-note {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-top: 16px;
  padding: 20px 24px;
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--accent-2) 35%, var(--line));
  background: color-mix(in srgb, var(--accent-2) 7%, rgba(255,255,255,0.02));
}
.park-note-icon {
  flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px;
  border-radius: 12px;
  color: var(--accent-2);
  background: color-mix(in srgb, var(--accent-2) 14%, rgba(0,0,0,0.2));
  border: 1px solid color-mix(in srgb, var(--accent-2) 30%, var(--line));
}
.park-note-icon svg { width: 22px; height: 22px; }
.park-note-h {
  font-family: var(--display);
  font-weight: 700;
  font-size: 16px;
  color: var(--ink);
  margin-bottom: 4px;
}
.park-note-t { font-size: 14px; line-height: 1.6; color: var(--ink-2); }
.park-note-t strong { color: var(--accent-2); font-weight: 700; }

/* ---- Direkt nebenan: Piazza Bowling ---- */
.nb-card {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 0;
  border-radius: 24px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: rgba(255,255,255,0.02);
  isolation: isolate;
}
@media (max-width: 900px) { .nb-card { grid-template-columns: 1fr; } }
.nb-map { position: relative; min-height: 460px; background: #0e0a22; overflow: hidden; isolation: isolate; }

/* Gedrehte Karten-Ansicht: Blickrichtung beim Auffahren statt Norden oben.
   Breite/Höhe des Hosts setzt JS (getauscht bzw. auf die Bounding-Box der
   Drehung aufgeblasen), damit an den Ecken keine leeren Dreiecke entstehen. */
.lf-rot { position: absolute; inset: 0; overflow: hidden; }
.lf-rot .leaflet-host {
  inset: auto;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%) rotate(var(--rot, 0deg));
}
/* Beschriftungen zurückdrehen, damit sie waagerecht lesbar bleiben. Die Drehung
   läuft um den Punkt selbst (origin = Position des Dots), sonst kippt das Label
   neben den Punkt und läuft am Kartenrand raus. */
.lf-rot .lf-tag {
  transform-origin: 0 calc(100% + 22px);
  transform: rotate(calc(-1 * var(--rot, 0deg))) translateX(-50%);
}
.lf-rot .lf-tag::after { display: none; }
.lf-rot-attrib {
  position: absolute; right: 8px; bottom: 6px; z-index: 5;
  font-family: var(--mono); font-size: 9px; letter-spacing: 0.04em;
  color: rgba(255,255,255,0.72);
  background: rgba(10,8,24,0.6);
  padding: 3px 8px; border-radius: 6px;
  backdrop-filter: blur(4px);
}
.lf-rot-attrib a { color: rgba(255,255,255,0.9); text-decoration: underline; }
/* Schmale Screens: sonst liegt die Quellenangabe auf dem SATELLIT-Badge */
@media (max-width: 560px) {
  .lf-rot-attrib { top: 8px; bottom: auto; }
}
.nb-info {
  padding: 44px 40px;
  display: flex; flex-direction: column; gap: 22px; justify-content: center;
  background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01));
  /* Als Grid-Item sonst min-width:auto: der Block blieb 318px breit in einer
     256px-Karte und schob seinen Inhalt rechts heraus (320px-Geraete). */
  min-width: 0;
}
@media (max-width: 560px) {
  .nb-info { padding: 32px 22px; }
}
.nb-diagram {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: stretch;
  gap: 0;
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
}
.nb-side { padding: 22px 20px; text-align: center; }
.nb-side-left { background: color-mix(in srgb, var(--accent-4) 12%, transparent); }
.nb-side-right { background: color-mix(in srgb, var(--accent) 12%, transparent); }
.nb-side-tag {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  color: var(--ink-3);
  margin-bottom: 8px;
}
.nb-side-name {
  font-family: var(--display);
  font-weight: 700;
  font-size: 17px;
  color: var(--ink);
}
.nb-side-left .nb-side-name { color: var(--accent-4); }
.nb-side-right .nb-side-name { color: var(--accent); }
.nb-divider { position: relative; width: 1px; background: var(--line); }
.nb-divider span {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--bg-1);
  border: 1px solid var(--line-2);
  display: flex; align-items: center; justify-content: center;
}
.nb-divider span::after {
  content: "|";
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ink-3);
}
.nb-text { font-size: 15px; line-height: 1.7; color: var(--ink-2); }
.nb-text strong { color: var(--ink); font-weight: 600; }
.nb-link {
  align-self: start;
  display: inline-flex; align-items: center; gap: 8px;
  /* ohne diese zwei Zeilen wuchs der Button auf seine Textbreite und ragte auf
     sehr schmalen Geraeten (320px) aus der Karte heraus */
  max-width: 100%; flex-wrap: wrap;
  padding: 10px 16px;
  border: 1px solid color-mix(in srgb, var(--accent-4) 45%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent-4) 10%, transparent);
  color: var(--accent-4);
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.06em;
  transition: background .2s ease, border-color .2s ease, transform .2s ease;
}
.nb-link:hover {
  background: color-mix(in srgb, var(--accent-4) 18%, transparent);
  border-color: var(--accent-4);
  transform: translateX(2px);
}
.nb-note {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--ink-4);
  border-left: 2px solid var(--line-2);
  padding-left: 12px;
}

/* alternate map marker (neighbour) */
.lf-pin.lf-alt .lf-dot { background: var(--accent-4); box-shadow: 0 0 0 4px rgba(47,125,255,0.28), 0 0 24px var(--accent-4); }
.lf-pin.lf-alt .lf-ring { border-color: var(--accent-4); }
.lf-pin.lf-alt .lf-tag { background: var(--accent-4); box-shadow: 0 6px 16px rgba(47,125,255,0.45); }
.lf-pin.lf-alt .lf-tag::after { background: var(--accent-4); }
/* Parkplatz-Marker (gelb) */
.lf-pin.lf-park .lf-dot { background: var(--accent-3); box-shadow: 0 0 0 4px rgba(255,182,39,0.28), 0 0 24px var(--accent-3); }
.lf-pin.lf-park .lf-ring { border-color: var(--accent-3); }
.lf-pin.lf-park .lf-tag { background: var(--accent-3); box-shadow: 0 6px 16px rgba(255,182,39,0.45); }
.lf-pin.lf-park .lf-tag::after { background: var(--accent-3); }
/* Eingang-Marker (mint) */
.lf-pin.lf-in .lf-dot { background: var(--accent-5); box-shadow: 0 0 0 4px rgba(62,255,168,0.28), 0 0 24px var(--accent-5); }
.lf-pin.lf-in .lf-ring { border-color: var(--accent-5); }
.lf-pin.lf-in .lf-tag { background: var(--accent-5); box-shadow: 0 6px 16px rgba(62,255,168,0.45); }
.lf-pin.lf-in .lf-tag::after { background: var(--accent-5); }
/* Fußspur */
.lf-foot { pointer-events: none; }
.lf-foot svg { display: block; filter: drop-shadow(0 1px 1.5px rgba(0,0,0,.5)); }

/* ---- DIRECT CONTACTS ---- */
.dc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 14px;
  margin-top: 32px;
}
.dc-card {
  position: relative;
  padding: 24px 22px;
  border-radius: 16px;
  background: rgba(255,255,255,0.025);
  border: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 8px;
  text-decoration: none;
  color: var(--ink);
  transition: transform 0.25s ease, border-color 0.25s ease, background 0.25s ease;
  overflow: hidden;
  isolation: isolate;
}
.dc-card::before {
  content: "";
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--c);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 0.3s cubic-bezier(.65,0,.35,1);
}
.dc-card:hover {
  transform: translateX(2px) translateY(-2px);
  border-color: var(--c);
  background: rgba(255,255,255,0.04);
}
.dc-card:hover::before { transform: scaleY(1); }
.dc-team {
  font-family: var(--display);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.dc-desc {
  font-size: 14px;
  color: var(--ink-3);
  line-height: 1.45;
  margin-bottom: 8px;
}
.dc-mail {
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.02em;
  color: var(--c);
  margin-top: auto;
  padding-top: 8px;
  border-top: 1px solid var(--line);
}
.dc-arrow {
  position: absolute;
  top: 22px; right: 22px;
  color: var(--ink-4);
  transition: color 0.2s ease, transform 0.2s ease;
}
.dc-arrow svg { width: 14px; height: 14px; }
.dc-card:hover .dc-arrow { color: var(--c); transform: translateX(3px); }

/* ---- FORM ---- */
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 64px;
  align-items: start;
}
@media (max-width: 900px) { .form-grid { grid-template-columns: 1fr; gap: 32px; } }

.contact-bullets {
  list-style: none;
  margin: 24px 0 0; padding: 0;
  display: flex; flex-direction: column;
}
.contact-bullets li {
  position: relative;
  padding: 14px 0 14px 22px;
  font-size: 14.5px;
  color: var(--ink-2);
  line-height: 1.5;
  border-top: 1px solid var(--line);
}
.contact-bullets li:last-child { border-bottom: 1px solid var(--line); }
.contact-bullets li::before {
  content: "";
  position: absolute;
  left: 0; top: 23px;
  width: 8px; height: 1px;
  background: var(--accent-2);
}
.contact-bullets strong { color: var(--ink); font-weight: 600; }

.contact-form {
  display: flex; flex-direction: column; gap: 16px;
  padding: 36px;
  border-radius: 18px;
  background: rgba(255,255,255,0.025);
  border: 1px solid var(--line);
  position: relative;
}
.cf-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
@media (max-width: 600px) { .cf-grid { grid-template-columns: 1fr; } }
.cf-row { display: flex; flex-direction: column; gap: 6px; }
.cf-l {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--ink-3);
}
.cf-row input,
.cf-row select,
.cf-row textarea {
  background: rgba(0,0,0,0.3);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 13px 14px;
  font-family: var(--display);
  font-size: 15px;
  color: var(--ink);
  transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
  width: 100%;
}
.cf-row input::placeholder,
.cf-row textarea::placeholder { color: var(--ink-4); }
.cf-row input:focus,
.cf-row select:focus,
.cf-row textarea:focus {
  outline: none;
  border-color: var(--accent);
  background: rgba(0,0,0,0.4);
  box-shadow: 0 0 0 3px rgba(255,31,182,0.15);
}
.cf-row textarea { resize: vertical; min-height: 130px; line-height: 1.55; }
.cf-row select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'><path d='M4 6l4 4 4-4' stroke='%239ea2c1' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 38px;
}
.cf-check {
  display: flex; gap: 10px; align-items: flex-start;
  font-size: 13.5px;
  color: var(--ink-2);
  line-height: 1.5;
  padding-top: 4px;
}
.cf-check input {
  width: 18px; height: 18px;
  margin-top: 2px;
  accent-color: var(--accent);
  flex-shrink: 0;
}
.cf-check a { color: var(--accent-2); text-decoration: underline; text-underline-offset: 3px; }
.cf-submit { justify-content: center; gap: 10px; margin-top: 4px; }
.cf-submit svg { width: 14px; height: 14px; }

/* ---- MEMBERCARD ---- */
.mc-toggle {
  display: flex;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 4px;
  width: fit-content;
  margin: 0 auto 48px;
}
.mc-toggle-btn {
  font-family: var(--display);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.06em;
  padding: 12px 28px;
  border-radius: 999px;
  color: var(--ink-3);
  transition: color 0.2s ease, background 0.2s ease;
}
.mc-toggle-btn.on {
  background: var(--c);
  color: var(--on-accent);
  box-shadow: 0 0 0 1px var(--c), 0 8px 24px color-mix(in srgb, var(--c) 30%, transparent);
}
.mc-toggle-btn:not(.on):hover { color: var(--ink); }

.mc-display {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
}
@media (max-width: 900px) { .mc-display { grid-template-columns: 1fr; gap: 32px; } }

.mc-card-visual {
  position: relative;
  aspect-ratio: 1.586 / 1;
  border-radius: 18px;
  background: linear-gradient(135deg, var(--c), color-mix(in srgb, var(--c) 40%, #000) 80%);
  padding: 28px;
  color: #fff;
  overflow: hidden;
  box-shadow: 0 24px 60px color-mix(in srgb, var(--c) 30%, rgba(0,0,0,0.4)), inset 0 1px 0 rgba(255,255,255,0.2);
  transform: rotate(-2deg) translateZ(0);
  transition: transform 0.4s ease;
}
.mc-card-visual:hover { transform: rotate(0) scale(1.02); }
.mcv-foil {
  position: absolute; inset: 0;
  background: linear-gradient(110deg,
    transparent 30%,
    rgba(255,255,255,0.18) 45%,
    rgba(255,255,255,0.05) 55%,
    transparent 70%
  );
  pointer-events: none;
}
.mcv-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(to right, rgba(255,255,255,0.08) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.08) 1px, transparent 1px);
  background-size: 24px 24px;
  mask-image: radial-gradient(ellipse at center, #000, transparent 80%);
  pointer-events: none;
}
.mcv-noise {
  position: absolute; inset: 0;
  background-image: radial-gradient(circle, rgba(0,0,0,0.15) 1px, transparent 1px);
  background-size: 3px 3px;
  pointer-events: none; opacity: 0.5;
}
.mcv-top {
  display: flex; justify-content: space-between; align-items: flex-start;
  position: relative;
  margin-bottom: 28px;
}
.mcv-brand {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--display); font-weight: 700; font-size: 14px;
  letter-spacing: 0.04em;
}
.mcv-mark {
  width: 24px; height: 24px;
  border-radius: 50%;
  background: rgba(255,255,255,0.25);
  border: 1px solid rgba(255,255,255,0.4);
}
.mcv-tier {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em;
  background: rgba(0,0,0,0.3); padding: 4px 10px; border-radius: 999px;
}
.mcv-mid { position: relative; }
.mcv-num {
  font-family: var(--mono); font-size: 22px; font-weight: 600;
  letter-spacing: 0.18em;
  margin-bottom: 16px;
}
.mcv-foot {
  display: flex; justify-content: space-between;
  font-family: var(--mono); font-size: 10px;
}
.mcv-l { letter-spacing: 0.12em; opacity: 0.7; margin-bottom: 2px; }
.mcv-v { font-size: 14px; font-weight: 600; letter-spacing: 0.06em; }

.mc-detail { padding: 16px 0; }
.mc-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px; margin-bottom: 24px; }
.mc-eur { font-size: 24px; color: var(--c); font-weight: 600; }
.mc-num { font-family: var(--display); font-weight: 700; font-size: 56px; letter-spacing: -0.03em; line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums; }
.mc-sub { font-family: var(--mono); font-size: 12px; color: var(--ink-3); letter-spacing: 0.06em; margin-left: 8px; }
.mc-perks { list-style: none; margin: 0 0 24px; padding: 0; }
.mc-perks li {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 10px 0;
  font-size: 15px; color: var(--ink-2);
  border-top: 1px solid var(--line);
}
.mc-perks li:last-child { border-bottom: 1px solid var(--line); }
.mc-check { color: var(--c); font-weight: 700; flex-shrink: 0; }
.mc-tiny {
  margin-top: 16px;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.04em;
  color: var(--ink-4);
}

/* ---- FAQ (Unterseiten) ----
   Die Grundoptik (.faq-list / .faq-item / .faq-q / .faq-a) steht weiter unten
   im Abschnitt "FAQ Section" und gilt fuer Startseite und Unterseiten
   gemeinsam. Hier stand frueher ein zweiter, aelterer Regelsatz derselben
   Klassen. Beide haben sich vermischt: die Deckelung auf max-height 400px
   schnitt lange Antworten ab, und das Innen-Padding liess im zugeklappten
   Zustand einen Streifen der Antwort durchscheinen. Der alte Satz ist deshalb
   entfernt - uebrig bleibt nur das Plus-Zeichen, das es auf der Startseite
   nicht gibt (dort heisst es .faq-toggle). */
.faq-plus {
  font-family: var(--mono);
  font-size: 24px;
  font-weight: 400;
  color: var(--accent);
  flex-shrink: 0;
  width: 24px; text-align: center;
  line-height: 1;
}
/* .faq-a bringt sein Padding schon mit, der Absatz darf keins draufsetzen. */
.faq-a p { margin: 0; padding: 0; }

/* ===========================================================================
   GEBURTSTAG PAGE
   =========================================================================== */

/* Package toggle */
/* Zehn Pakete passen nicht mehr in eine Zeile. Die Leiste bricht deshalb um und
   ist keine Pille mehr, sondern ein abgerundeter Block - eine Pille ueber zwei
   Zeilen sieht aus wie ein Fehler. Vorher lief die Reihe rechts aus dem Bild. */
.bd-toggle {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--line);
  border-radius: 28px;
  padding: 6px;
  max-width: 980px;
  margin: 0 auto 32px;
}
.bd-toggle-btn {
  font-family: var(--display);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.04em;
  padding: 12px 28px;
  border-radius: 999px;
  color: var(--ink-3);
  transition: color 0.2s ease, background 0.2s ease;
  white-space: nowrap;
}
/* Schmale Screens: Die Regel stammt aus der Zeit mit zwei Paketen ("STANDARD",
   "PREMIUM") - da liess sich die Leiste auf die Breite quetschen. Bei sechs
   Paketen ging das nicht mehr auf: `flex: 1` macht jeden Knopf ein Sechstel
   breit, `white-space: nowrap` laesst den Text aber stehen, und die Beschriftungen
   liefen uebereinander. Jetzt wird gewischt statt gequetscht, wie beim
   Galerie-Karussell weiter unten. */
@media (max-width: 720px) {
  .bd-toggle {
    width: 100%;
    flex-wrap: nowrap;
    border-radius: 999px;
    justify-content: flex-start;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .bd-toggle::-webkit-scrollbar { display: none; }
  .bd-toggle-btn {
    flex: 0 0 auto;
    padding: 12px 18px;
    font-size: 12.5px;
    scroll-snap-align: center;
  }
}
.bd-toggle-btn.on {
  background: var(--c);
  color: var(--on-accent);
  box-shadow: 0 0 0 1px var(--c), 0 8px 24px color-mix(in srgb, var(--c) 30%, transparent);
}
.bd-toggle-btn:not(.on):hover { color: var(--ink); }

/* Package display layout */
.bd-display {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 48px;
  align-items: center;
  padding: 48px;
  border-radius: 24px;
  background: rgba(255,255,255,0.02);
  border: 1px solid var(--line);
  position: relative;
  overflow: hidden;
}
.bd-display::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(135deg, color-mix(in srgb, var(--c) 8%, transparent), transparent 60%);
  pointer-events: none;
}
@media (max-width: 900px) {
  .bd-display { grid-template-columns: 1fr; padding: 32px; gap: 32px; }
  /* Bild ueber den Preis (Mobil + Tablet): im 1-Spalten-Layout stand das Bild
     sonst unter den Paketdetails. */
  .bd-graphic { order: -1; }
}

.bd-package { position: relative; }
.bd-pkg-head {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 16px;
}
.bd-pkg-name {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(36px, 5vw, 56px);
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--ink);
}
.bd-pkg-tag {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--c);
  background: color-mix(in srgb, var(--c) 12%, transparent);
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--c) 30%, transparent);
}
.bd-pkg-price {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px;
  margin-bottom: 28px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--line);
}
.bd-eur { font-size: 28px; color: var(--c); font-weight: 600; }
.bd-num {
  font-family: var(--display);
  font-weight: 700;
  font-size: 72px;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.bd-per {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--ink-3);
  letter-spacing: 0.04em;
  margin-left: 8px;
}

.bd-list { list-style: none; margin: 0 0 28px; padding: 0; }
.bd-list li {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 12px 0;
  border-top: 1px solid var(--line);
  font-size: 15px;
  color: var(--ink-2);
  line-height: 1.45;
}
.bd-list li:last-child { border-bottom: 1px solid var(--line); }
.bd-check { color: var(--c); font-weight: 700; flex-shrink: 0; }

.bd-tiny {
  margin-top: 16px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-4);
  letter-spacing: 0.04em;
}

/* Geburtstag image + confetti */
.bd-graphic {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  padding: 16px 0;
}
.bd-img-wrap {
  position: relative;
  width: 100%; max-width: 460px;
  aspect-ratio: 4 / 5;
  border-radius: 22px;
  overflow: hidden;
  background: rgba(255,255,255,0.025);
  border: 1px solid var(--line);
  isolation: isolate;
  box-shadow: 0 24px 60px rgba(0,0,0,0.45), 0 0 0 1px rgba(255,31,182,0.12);
  transition: transform .4s ease;
}
.bd-img-wrap:hover { transform: translateY(-4px) rotate(-1deg); }
.bd-img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(1.05) contrast(1.04);
}
.bd-img-glow {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, transparent 55%, rgba(0,0,0,0.45) 100%),
    radial-gradient(ellipse 70% 60% at 50% 60%, transparent 55%, rgba(8,6,18,0.35) 100%);
  pointer-events: none;
}
.bd-img-corners { position: absolute; inset: 16px; pointer-events: none; }
.bd-img-corners span {
  position: absolute;
  width: 22px; height: 22px;
  border: 1.6px solid var(--c);
  opacity: 0.85;
}
.bd-img-corners span:nth-child(1) { top: 0; left: 0; border-right: 0; border-bottom: 0; }
.bd-img-corners span:nth-child(2) { top: 0; right: 0; border-left: 0; border-bottom: 0; }
.bd-img-corners span:nth-child(3) { bottom: 0; left: 0; border-right: 0; border-top: 0; }
.bd-img-corners span:nth-child(4) { bottom: 0; right: 0; border-left: 0; border-top: 0; }

/* legacy cake, hidden but kept for fallback */
.bd-graphic-cake { display: none; }
.bdg-base {
  position: absolute; bottom: 0; left: 0; right: 0;
  height: 12px;
  background: linear-gradient(180deg, rgba(255,255,255,0.25), rgba(255,255,255,0.1));
  border-radius: 4px;
}
.bdg-tier-3, .bdg-tier-2, .bdg-tier-1 {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 6px 6px 4px 4px;
}
.bdg-tier-3 {
  bottom: 12px;
  width: 200px; height: 70px;
  background: linear-gradient(180deg, var(--c), color-mix(in srgb, var(--c) 65%, #000));
  box-shadow: inset 0 -6px 0 0 color-mix(in srgb, var(--c) 50%, #000), 0 0 0 1px color-mix(in srgb, var(--c) 60%, #000);
}
.bdg-tier-2 {
  bottom: 82px;
  width: 150px; height: 60px;
  background: linear-gradient(180deg, var(--accent-3), color-mix(in srgb, var(--accent-3) 65%, #000));
  box-shadow: inset 0 -6px 0 0 color-mix(in srgb, var(--accent-3) 50%, #000), 0 0 0 1px color-mix(in srgb, var(--accent-3) 60%, #000);
}
.bdg-tier-1 {
  bottom: 142px;
  width: 100px; height: 50px;
  background: linear-gradient(180deg, var(--accent-2), color-mix(in srgb, var(--accent-2) 65%, #000));
  box-shadow: inset 0 -6px 0 0 color-mix(in srgb, var(--accent-2) 50%, #000), 0 0 0 1px color-mix(in srgb, var(--accent-2) 60%, #000);
}
.bdg-candle {
  position: absolute;
  bottom: 192px;
  width: 6px; height: 32px;
  background: linear-gradient(180deg, #fff, #ffb627);
  border-radius: 2px;
}
.bdg-candle:nth-child(1) { left: calc(50% - 28px); animation: candle-flicker 1.6s ease-in-out infinite; }
.bdg-candle:nth-child(2) { left: calc(50% - 3px); animation: candle-flicker 2.1s ease-in-out infinite 0.3s; }
.bdg-candle:nth-child(3) { left: calc(50% + 22px); animation: candle-flicker 1.8s ease-in-out infinite 0.6s; }
.bdg-candle::before {
  content: "";
  position: absolute; top: -10px; left: 50%; transform: translateX(-50%);
  width: 6px; height: 12px;
  background: radial-gradient(ellipse at center bottom, #fff200, #ff7a00 70%, transparent);
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  filter: drop-shadow(0 0 8px #ffae00) drop-shadow(0 0 14px #ff7a00);
}
@keyframes candle-flicker {
  0%, 100% { transform: scaleY(1); opacity: 1; }
  50% { transform: scaleY(0.92) translateX(0.5px); opacity: 0.85; }
}

.bd-graphic-confetti {
  position: absolute; inset: 0;
  pointer-events: none;
}
.bdg-confetti {
  position: absolute;
  width: 8px; height: 8px;
  border-radius: 1px;
  animation: confetti-fall 4s linear infinite;
  opacity: 0.8;
}
@keyframes confetti-fall {
  0% { transform: translateY(-20px) rotate(0); opacity: 0; }
  10% { opacity: 0.8; }
  100% { transform: translateY(120%) rotate(540deg); opacity: 0; }
}

/* Extras table */
.extras-table {
  margin-top: 32px;
  display: flex; flex-direction: column;
  border: 1px solid var(--line);
  border-radius: 18px;
  overflow: hidden;
  background: rgba(255,255,255,0.02);
}
.extras-row {
  display: grid;
  grid-template-columns: 1.2fr 1fr 80px;
  align-items: center;
  gap: 12px;
  padding: 18px 24px;
  border-top: 1px solid var(--line);
  position: relative;
  transition: background 0.2s ease;
}
.extras-row:first-child { border-top: 0; }
.extras-row:hover { background: rgba(255,255,255,0.03); }
.ext-name {
  font-family: var(--display);
  font-weight: 600;
  font-size: 16px;
  color: var(--ink);
}
.ext-per {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--ink-3);
}
.ext-dots {
  position: absolute; left: 0; right: 0; bottom: 0;
  pointer-events: none;
}
.ext-name { min-width: 0; }
.ext-price {
  font-family: var(--display);
  font-weight: 700;
  font-size: 18px;
  color: var(--accent);
  text-align: right;
  font-variant-numeric: tabular-nums;
  /* € und Betrag zusammenhalten - sonst rutscht "€" auf eine zweite Zeile */
  white-space: nowrap;
}
@media (max-width: 600px) {
  /* auto statt fixer 60px: die Preisspalte war zu schmal fuer "€ 25,00" und
     brach in zwei Zeilen um. */
  .extras-row { grid-template-columns: 1fr auto; gap: 10px; padding: 16px 18px; }
  .ext-per { display: none; }
}

/* Themed party rooms grid */
.rooms-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 18px;
  margin-top: 32px;
}
.room-card {
  position: relative;
  padding: 32px 28px 28px;
  border-radius: 22px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--c) 14%, rgba(255,255,255,0.02)), rgba(255,255,255,0.02));
  border: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 24px;
  transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.4s ease;
  overflow: hidden;
  isolation: isolate;
}
.room-card:hover {
  transform: translateY(-6px);
  border-color: var(--c);
  box-shadow: 0 24px 50px color-mix(in srgb, var(--c) 15%, rgba(0,0,0,0.35));
}
.room-glow {
  position: absolute; top: -50%; right: -30%;
  width: 80%; height: 200%;
  background: radial-gradient(ellipse, color-mix(in srgb, var(--c) 30%, transparent), transparent 60%);
  filter: blur(40px);
  opacity: 0.5;
  z-index: -1;
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.5s ease;
}
.room-card:hover .room-glow { opacity: 0.9; transform: scale(1.15); }

.room-emoji {
  font-size: 56px;
  line-height: 1;
  filter: saturate(1.3) drop-shadow(0 4px 16px color-mix(in srgb, var(--c) 60%, transparent));
}
.room-meta { display: flex; flex-direction: column; gap: 8px; }
.room-tag {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  font-weight: 700;
}
.room-name {
  font-family: var(--display);
  font-weight: 700;
  font-size: 24px;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.room-desc {
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-2);
  margin: 0 0 12px;
}
.room-cta {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c);
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: auto;
  align-self: flex-start;
  transition: gap 0.2s ease;
}
.room-cta:hover { gap: 12px; }
.room-cta span { transition: transform 0.2s ease; }
.room-cta:hover span { transform: translateX(2px); }

/* compat for older browsers */
@supports not (color: color-mix(in srgb, red, blue)) {
  .room-card { background: rgba(255,255,255,0.04); }
  .room-glow { background: radial-gradient(ellipse, var(--c), transparent 60%); opacity: 0.25; }
  .room-card:hover { box-shadow: 0 24px 50px rgba(0,0,0,0.4); }
  .bd-display::before { background: linear-gradient(135deg, rgba(255,255,255,0.04), transparent 60%); }
  .bd-pkg-tag { background: rgba(255,255,255,0.06); border-color: var(--line); }
  .bdg-tier-3 { background: var(--c); box-shadow: 0 0 0 1px var(--c); }
  .bdg-tier-2 { background: var(--accent-3); box-shadow: 0 0 0 1px var(--accent-3); }
  .bdg-tier-1 { background: var(--accent-2); box-shadow: 0 0 0 1px var(--accent-2); }
}

/* ===========================================================================
   AREA DETAIL PAGES
   =========================================================================== */

.area-hero-img {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: 22px;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  border: 1px solid var(--line);
  box-shadow: 0 24px 60px rgba(0,0,0,0.4);
  isolation: isolate;
}
.ahi-overlay {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, transparent 30%, rgba(0,0,0,0.45) 100%),
    linear-gradient(135deg, color-mix(in srgb, var(--c) 18%, transparent), transparent 60%);
}
.ahi-corner-tl, .ahi-corner-br {
  position: absolute;
  width: 32px; height: 32px;
  border: 1.5px solid var(--c);
  opacity: 0.7;
}
.ahi-corner-tl { top: 18px; left: 18px; border-right: 0; border-bottom: 0; }
.ahi-corner-br { bottom: 18px; right: 18px; border-left: 0; border-top: 0; }
.ahi-tag {
  position: absolute;
  top: 16px; right: 16px;
  background: var(--c);
  color: var(--on-accent);
  padding: 5px 12px;
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  font-weight: 700;
  box-shadow: 0 4px 14px color-mix(in srgb, var(--c) 40%, transparent);
}
.ahi-tag::before {
  content: "";
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #000;
  margin-right: 6px;
  vertical-align: middle;
  animation: tb-pulse 1.4s ease-in-out infinite;
}

/* ---- INCL + SAFETY GRID ---- */
.incl-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 32px;
  align-items: stretch;
}
@media (max-width: 900px) {
  .incl-grid { grid-template-columns: 1fr; }
}

.incl-card {
  position: relative;
  padding: 32px 30px;
  border-radius: 22px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--c) 6%, rgba(255,255,255,0.025)), rgba(255,255,255,0.02));
  border: 1px solid var(--line);
  display: flex; flex-direction: column;
  isolation: isolate;
  overflow: hidden;
}
.incl-card::before {
  content: "";
  position: absolute; left: 0; top: 0;
  width: 4px; height: 100%;
  background: var(--c);
  box-shadow: 0 0 24px var(--c);
}
/* Ohne gap stossen Titel und Meta aneinander, sobald der Titel den vollen
   Bereichsnamen traegt ("NEXT GEN 3D GOLF AB 16"). An der Grundlinie statt
   mittig ausgerichtet, damit die Meta bei zweizeiligem Titel auf dessen
   erster Zeile sitzt. */
.incl-card-head {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 14px;
  padding-bottom: 18px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--line);
}
.incl-card-count { flex: none; text-align: right; }
.incl-card-tag {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  font-weight: 700;
}
.incl-card-count {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}

.incl-list {
  list-style: none;
  margin: 0; padding: 0;
  flex: 1;
  display: flex; flex-direction: column;
}
.incl-list li {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 13px 0;
  border-bottom: 1px solid var(--line);
  font-size: 15px;
  color: var(--ink-2);
  line-height: 1.5;
}
.incl-list li:last-child { border-bottom: 0; }
.incl-check {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--c) 18%, transparent);
  border: 1px solid color-mix(in srgb, var(--c) 35%, transparent);
  color: var(--c);
  font-size: 11px;
  font-weight: 700;
  flex-shrink: 0;
  margin-top: 1px;
}

/* ---- SAFETY CARD ---- */
.safety-card {
  position: relative;
  padding: 32px 30px;
  border-radius: 22px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--accent-5) 7%, rgba(255,255,255,0.025)), rgba(255,255,255,0.02));
  border: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 14px;
  isolation: isolate;
  overflow: hidden;
}
.safety-card::before {
  content: "";
  position: absolute; left: 0; top: 0;
  width: 4px; height: 100%;
  background: var(--accent-5);
  box-shadow: 0 0 24px var(--accent-5);
}
.sc-eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--ink-3);
  display: inline-flex; align-items: center; gap: 8px;
  padding-bottom: 18px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--line);
}
.sc-eyebrow .dot { width: 6px; height: 6px; border-radius: 50%; }
.sc-h {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(20px, 2.4vw, 26px);
  letter-spacing: -0.01em;
  margin: 0;
  color: var(--ink);
}
.sc-p {
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-2);
  margin: 0;
}
.sc-badges {
  display: flex; gap: 8px; flex-wrap: wrap;
  margin-top: 4px;
}
.sc-badge {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  color: var(--accent-5);
  padding: 5px 10px;
  background: color-mix(in srgb, var(--accent-5) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent-5) 30%, transparent);
  border-radius: 999px;
  font-weight: 600;
}
.sc-link {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--accent-5);
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: auto;
  padding-top: 16px;
  align-self: flex-start;
  transition: gap 0.2s ease;
}
.sc-link:hover { gap: 10px; }
.sc-link span { transition: transform 0.2s ease; }
.sc-link:hover span { transform: translateX(2px); }

/* compat */
@supports not (color: color-mix(in srgb, red, blue)) {
  .incl-card { background: rgba(255,255,255,0.025); }
  .incl-check { background: rgba(255,255,255,0.06); border-color: var(--line); }
  .sc-badge { background: rgba(74,222,128,0.1); border-color: rgba(74,222,128,0.3); }
}

/* ---- RULES LIST ---- */
.rules-list {
  margin-top: 32px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
@media (max-width: 700px) { .rules-list { grid-template-columns: 1fr; } }
.rule-row {
  display: grid;
  grid-template-columns: 60px 1fr;
  align-items: center;
  gap: 16px;
  padding: 18px 22px;
  background: rgba(255,255,255,0.02);
  border: 1px solid var(--line);
  border-radius: 14px;
  transition: border-color 0.25s ease, background 0.25s ease;
}
.rule-row:hover { border-color: var(--c); background: rgba(255,255,255,0.04); }
.rule-num {
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.1em;
  color: var(--c);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.rule-text {
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--ink-2);
}

/* ---- OTHER AREAS GRID ---- */
.other-areas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px;
  margin-top: 32px;
}
/* Auf dem Handy standen die fuenf Karten als hoher Stapel untereinander - man
   scrollte ewig an ihnen vorbei. Dasselbe Wisch-Karussell wie bei der Galerie:
   eine Karte fast voll sichtbar, die naechste lugt hervor. */
@media (max-width: 700px) {
  .other-areas {
    display: flex;
    grid-template-columns: none;
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 6px;
  }
  .other-areas::-webkit-scrollbar { display: none; }
  .oa-card {
    flex: 0 0 76%;
    aspect-ratio: 4 / 4.4;
    scroll-snap-align: center;
  }
}
.oa-card {
  position: relative;
  display: flex; flex-direction: column; justify-content: flex-end;
  aspect-ratio: 4 / 5;
  border-radius: 18px;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  border: 1px solid var(--line);
  text-decoration: none;
  color: var(--ink);
  transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.4s ease;
  isolation: isolate;
}
.oa-overlay {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, transparent 30%, rgba(0,0,0,0.85) 100%),
    linear-gradient(135deg, color-mix(in srgb, var(--c) 30%, transparent) 0%, transparent 50%);
  transition: background 0.3s ease;
}
.oa-card:hover {
  transform: translateY(-4px);
  border-color: var(--c);
  box-shadow: 0 20px 48px color-mix(in srgb, var(--c) 18%, rgba(0,0,0,0.4));
}
.oa-card:hover .oa-overlay {
  background:
    linear-gradient(180deg, transparent 20%, rgba(0,0,0,0.92) 100%),
    linear-gradient(135deg, color-mix(in srgb, var(--c) 45%, transparent) 0%, transparent 60%);
}
.oa-tag {
  position: absolute;
  top: 18px; left: 18px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--c);
  background: rgba(0,0,0,0.5);
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--c) 35%, transparent);
  backdrop-filter: blur(4px);
}
.oa-name {
  position: relative;
  font-family: var(--display);
  font-weight: 700;
  font-size: 22px;
  letter-spacing: -0.01em;
  padding: 0 22px 8px;
  line-height: 1.1;
}
.oa-cta {
  position: relative;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--c);
  padding: 0 22px 22px;
  display: inline-flex; align-items: center; gap: 6px;
  transition: gap 0.2s ease;
}
.oa-card:hover .oa-cta { gap: 10px; }

/* compat */
@supports not (color: color-mix(in srgb, red, blue)) {
  .ahi-overlay { background: linear-gradient(180deg, transparent 30%, rgba(0,0,0,0.5) 100%); }
  .incl-check { background: rgba(255,255,255,0.06); border-color: var(--line); }
  .safety-card { background: rgba(255,255,255,0.025); }
  .oa-overlay { background: linear-gradient(180deg, transparent 30%, rgba(0,0,0,0.85) 100%); }
  .oa-card:hover { box-shadow: 0 20px 48px rgba(0,0,0,0.4); }
}

/* ===========================================================================
   AREA SHOWCASE (single cinematic frame)
   =========================================================================== */

.showcase {
  position: relative;
  margin-top: 32px;
  border-radius: 24px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: #0e0a22;
  isolation: isolate;
  box-shadow: 0 30px 80px rgba(0,0,0,0.45), 0 0 0 1px color-mix(in srgb, var(--c) 12%, transparent);
}
.showcase-img {
  position: relative;
  aspect-ratio: 21 / 9;
  background-size: cover;
  background-position: center 35%;
  filter: saturate(1.06) contrast(1.04);
  transition: transform 0.8s cubic-bezier(.65,0,.35,1), filter 0.5s ease;
}
.showcase:hover .showcase-img { transform: scale(1.025); filter: saturate(1.15) contrast(1.06); }

.showcase-vignette {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(0,0,0,0.45) 0%, transparent 22%, transparent 55%, rgba(0,0,0,0.85) 100%),
    radial-gradient(ellipse 60% 80% at 50% 50%, transparent 50%, rgba(0,0,0,0.45) 100%),
    linear-gradient(135deg, color-mix(in srgb, var(--c) 14%, transparent) 0%, transparent 50%);
  pointer-events: none;
  z-index: 2;
}
.showcase-scan {
  position: absolute; inset: 0;
  background: repeating-linear-gradient(0deg, transparent 0px, transparent 3px, rgba(255,255,255,0.018) 4px, transparent 5px);
  mix-blend-mode: overlay;
  pointer-events: none;
  z-index: 3;
}
.showcase-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(to right, rgba(255,255,255,0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.05) 1px, transparent 1px);
  background-size: 80px 80px;
  mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, transparent 50%, #000 90%);
  -webkit-mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, transparent 50%, #000 90%);
  pointer-events: none;
  opacity: 0.4;
  z-index: 3;
}
.showcase-corners {
  position: absolute; inset: 24px;
  pointer-events: none;
  z-index: 4;
}
.showcase-corners span {
  position: absolute;
  width: 28px; height: 28px;
  border: 1.8px solid var(--c);
  opacity: 0.85;
}
.showcase-corners span:nth-child(1) { top: 0; left: 0; border-right: 0; border-bottom: 0; }
.showcase-corners span:nth-child(2) { top: 0; right: 0; border-left: 0; border-bottom: 0; }
.showcase-corners span:nth-child(3) { bottom: 0; left: 0; border-right: 0; border-top: 0; }
.showcase-corners span:nth-child(4) { bottom: 0; right: 0; border-left: 0; border-top: 0; }

.showcase-top {
  position: absolute;
  top: 24px; left: 24px; right: 24px;
  z-index: 5;
  display: flex; justify-content: space-between; align-items: flex-start;
  pointer-events: none;
}
.showcase-tag {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--c);
  background: rgba(0,0,0,0.55);
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--c) 35%, transparent);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  font-weight: 700;
}
.showcase-live {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--ink);
  background: rgba(0,0,0,0.55);
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.14);
  backdrop-filter: blur(6px);
  font-weight: 700;
  display: inline-flex; align-items: center; gap: 6px;
}
.sl-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--accent-6);
  box-shadow: 0 0 8px var(--accent-6);
  animation: tb-pulse 1.4s ease-in-out infinite;
}

.showcase-bottom {
  position: absolute;
  left: 24px; right: 24px; bottom: 24px;
  z-index: 5;
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 24px;
  flex-wrap: wrap;
}
.showcase-meta { max-width: 720px; }
.showcase-caption-eye {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--c);
  font-weight: 700;
  margin-bottom: 6px;
}
.showcase-caption {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(28px, 4vw, 44px);
  letter-spacing: -0.02em;
  line-height: 1.05;
  color: var(--ink);
  margin: 0 0 10px;
}
.showcase-sub {
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-2);
  margin: 0;
  max-width: 620px;
}

.showcase-actions { display: flex; gap: 10px; flex-shrink: 0; }
.showcase-zoom {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 16px;
  border-radius: 999px;
  background: rgba(0,0,0,0.55);
  border: 1px solid color-mix(in srgb, var(--c) 35%, transparent);
  color: var(--c);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  font-weight: 700;
  cursor: pointer;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.showcase-zoom:hover {
  background: var(--c);
  color: var(--on-accent);
  transform: translateY(-1px);
}

.showcase-coords {
  position: absolute;
  bottom: 24px; right: 24px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  color: rgba(255,255,255,0.4);
  z-index: 4;
  pointer-events: none;
}
@media (max-width: 760px) {
  .showcase-img { aspect-ratio: 4 / 5; }
  .showcase-corners { inset: 14px; }
  .showcase-top { top: 14px; left: 14px; right: 14px; }
  .showcase-bottom { left: 14px; right: 14px; bottom: 14px; }
  .showcase-coords { display: none; }
}

@supports not (color: color-mix(in srgb, red, blue)) {
  .showcase-vignette { background: linear-gradient(180deg, rgba(0,0,0,0.45) 0%, transparent 22%, transparent 55%, rgba(0,0,0,0.85) 100%); }
  .showcase-tag, .showcase-zoom { border-color: rgba(255,255,255,0.2); }
}

/* ===========================================================================
   GALLERY + LIGHTBOX
   =========================================================================== */

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 240px;
  gap: 14px;
  margin-top: 32px;
}
.gallery-item:first-child {
  grid-column: span 2;
  grid-row: span 2;
}
@media (max-width: 900px) {
  .gallery-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 220px; }
  .gallery-item:first-child { grid-column: span 2; grid-row: span 2; }
}
@media (max-width: 560px) {
  /* Auf dem Handy kein hoher Bilderstapel, sondern ein Wisch-Karussell:
     horizontal scrollen mit Snap, ein Bild fast voll sichtbar, das naechste
     lugt hervor (signalisiert "wischbar"). Der Overflow bleibt im Karussell,
     die Seite selbst scrollt nicht seitlich. */
  .gallery-grid {
    display: flex;
    grid-template-columns: none;
    grid-auto-rows: auto;
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 6px;
  }
  .gallery-grid::-webkit-scrollbar { display: none; }
  .gallery-item,
  .gallery-item:first-child {
    grid-column: auto; grid-row: auto;
    flex: 0 0 82%;
    height: 300px;
    scroll-snap-align: center;
  }
}

.gallery-item {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--line);
  cursor: pointer;
  background: rgba(255,255,255,0.02);
  isolation: isolate;
  padding: 0;
  transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.4s ease;
}
.gallery-item:first-child .gi-cap { font-size: 26px; }
.gallery-item:first-child .gi-tag { font-size: 11px; }
.gallery-item:first-child .gi-corners span { width: 18px; height: 18px; }

.gi-img {
  position: absolute; inset: 0;
  background-repeat: no-repeat;
  filter: saturate(1.05);
  transition: transform 0.7s cubic-bezier(.65,0,.35,1), filter 0.4s ease;
  z-index: 0;
}
.gi-overlay {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, transparent 30%, rgba(0,0,0,0.85) 100%),
    linear-gradient(135deg, color-mix(in srgb, var(--c) 18%, transparent), transparent 50%);
  z-index: 1;
  transition: background 0.3s ease;
}
.gi-scan {
  position: absolute; inset: 0;
  background: repeating-linear-gradient(0deg, transparent 0px, transparent 2px, rgba(255,255,255,0.025) 3px, transparent 4px);
  pointer-events: none;
  mix-blend-mode: overlay;
  opacity: 0.4;
  z-index: 2;
}
.gi-corners { position: absolute; inset: 12px; pointer-events: none; z-index: 3; }
.gi-corners span {
  position: absolute;
  width: 14px; height: 14px;
  border: 1.5px solid var(--c);
  opacity: 0.7;
  transition: opacity 0.3s ease, width 0.3s ease, height 0.3s ease;
}
.gi-corners span:nth-child(1) { top: 0; left: 0; border-right: 0; border-bottom: 0; }
.gi-corners span:nth-child(2) { top: 0; right: 0; border-left: 0; border-bottom: 0; }
.gi-corners span:nth-child(3) { bottom: 0; left: 0; border-right: 0; border-top: 0; }
.gi-corners span:nth-child(4) { bottom: 0; right: 0; border-left: 0; border-top: 0; }

.gi-meta {
  position: absolute;
  left: 16px; right: 16px; bottom: 14px;
  z-index: 3;
  display: flex; flex-direction: column; gap: 4px;
  pointer-events: none;
}
.gi-tag {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--c);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.gi-cap {
  font-family: var(--display);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: -0.01em;
  color: var(--ink);
  line-height: 1.2;
}

.gi-zoom {
  position: absolute;
  top: 14px; right: 14px;
  z-index: 4;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: rgba(0,0,0,0.55);
  border: 1px solid color-mix(in srgb, var(--c) 35%, transparent);
  color: var(--c);
  display: inline-flex; align-items: center; justify-content: center;
  opacity: 0;
  transform: scale(0.8);
  transition: opacity 0.3s ease, transform 0.3s ease, background 0.2s ease;
  backdrop-filter: blur(4px);
}

.gallery-item:hover {
  transform: translateY(-2px);
  border-color: var(--c);
  box-shadow: 0 16px 44px color-mix(in srgb, var(--c) 18%, rgba(0,0,0,0.4));
}
.gallery-item:hover .gi-img { transform: scale(1.05); filter: saturate(1.2) brightness(1.1); }
.gallery-item:hover .gi-overlay {
  background:
    linear-gradient(180deg, transparent 20%, rgba(0,0,0,0.92) 100%),
    linear-gradient(135deg, color-mix(in srgb, var(--c) 32%, transparent), transparent 60%);
}
.gallery-item:hover .gi-corners span { opacity: 1; width: 20px; height: 20px; }
.gallery-item:hover .gi-zoom { opacity: 1; transform: scale(1); }
.gallery-item:hover .gi-zoom:hover { background: var(--c); color: var(--on-accent); }

/* ---- LIGHTBOX ---- */
.lightbox {
  position: fixed; inset: 0; z-index: 999;
  background: rgba(4,3,12,0.92);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  display: flex; align-items: center; justify-content: center;
  padding: 60px;
  animation: lb-fade 0.25s ease-out;
}
@keyframes lb-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}
@media (max-width: 760px) { .lightbox { padding: 16px; } }

.lb-close, .lb-prev, .lb-next {
  position: absolute;
  width: 48px; height: 48px;
  border-radius: 50%;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  color: var(--ink);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  z-index: 1001;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease, color 0.2s ease;
  backdrop-filter: blur(8px);
}
.lb-close { top: 24px; right: 24px; }
.lb-prev  { left: 24px; top: 50%; transform: translateY(-50%); }
.lb-next  { right: 24px; top: 50%; transform: translateY(-50%); }
.lb-close:hover, .lb-prev:hover, .lb-next:hover {
  background: var(--accent);
  color: var(--on-accent);
  border-color: var(--accent);
}
.lb-prev:hover { transform: translateY(-50%) translateX(-2px); }
.lb-next:hover { transform: translateY(-50%) translateX(2px); }

.lb-stage {
  position: relative;
  width: 100%; max-width: 1200px;
  aspect-ratio: 16 / 10;
  border-radius: 18px;
  overflow: hidden;
  background: #0e0a22;
  border: 1px solid var(--line);
  box-shadow: 0 40px 100px rgba(0,0,0,0.6), 0 0 0 1px color-mix(in srgb, var(--c) 15%, transparent);
  isolation: isolate;
  animation: lb-zoom 0.35s cubic-bezier(.65,0,.35,1);
}
@keyframes lb-zoom {
  from { opacity: 0; transform: scale(0.94); }
  to { opacity: 1; transform: scale(1); }
}

.lb-img {
  position: absolute; inset: 0;
  background-repeat: no-repeat;
  filter: saturate(1.05);
}
.lb-corners { position: absolute; inset: 18px; pointer-events: none; z-index: 2; }
.lb-corners span {
  position: absolute;
  width: 28px; height: 28px;
  border: 2px solid var(--c);
  opacity: 0.85;
}
.lb-corners span:nth-child(1) { top: 0; left: 0; border-right: 0; border-bottom: 0; }
.lb-corners span:nth-child(2) { top: 0; right: 0; border-left: 0; border-bottom: 0; }
.lb-corners span:nth-child(3) { bottom: 0; left: 0; border-right: 0; border-top: 0; }
.lb-corners span:nth-child(4) { bottom: 0; right: 0; border-left: 0; border-top: 0; }

.lb-bottom {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 24px 28px 20px;
  background: linear-gradient(180deg, transparent 0%, rgba(4,3,12,0.7) 60%, rgba(4,3,12,0.95) 100%);
  z-index: 3;
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.lb-meta { display: flex; flex-direction: column; gap: 6px; }
.lb-tag {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--c);
  font-weight: 700;
}
.lb-cap {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(22px, 3vw, 32px);
  letter-spacing: -0.02em;
  color: var(--ink);
  line-height: 1.1;
}

.lb-thumbs { display: flex; gap: 6px; }
.lb-thumb {
  width: 44px; height: 44px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.12);
  background-repeat: no-repeat;
  cursor: pointer;
  opacity: 0.5;
  transition: opacity 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}
.lb-thumb:hover { opacity: 0.85; transform: translateY(-2px); }
.lb-thumb.active {
  opacity: 1;
  border-color: var(--c);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--c) 30%, transparent);
}

@media (max-width: 760px) {
  .lb-close, .lb-prev, .lb-next { width: 40px; height: 40px; }
  .lb-close { top: 16px; right: 16px; }
  .lb-prev { left: 12px; }
  .lb-next { right: 12px; }
  .lb-bottom { padding: 18px 20px 16px; }
  .lb-thumbs { display: none; }
}

@supports not (color: color-mix(in srgb, red, blue)) {
  .gi-overlay { background: linear-gradient(180deg, transparent 30%, rgba(0,0,0,0.85) 100%); }
  .gi-zoom { border-color: rgba(255,255,255,0.2); background: rgba(0,0,0,0.55); }
  .gallery-item:hover { box-shadow: 0 16px 44px rgba(0,0,0,0.4); }
  .lb-stage { box-shadow: 0 40px 100px rgba(0,0,0,0.6); }
  .lb-thumb.active { box-shadow: 0 0 0 2px var(--c); }
}

/* ===========================================================================
   RESERVIEREN PAGE
   =========================================================================== */
.section-head-row {
  display: flex; justify-content: space-between; align-items: flex-end;
  flex-wrap: wrap; gap: 16px;
  margin-bottom: 32px;
}

.step-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
@media (max-width: 900px) { .step-cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .step-cards { grid-template-columns: 1fr; } }

.step-card {
  position: relative;
  display: flex; align-items: flex-start; gap: 14px;
  padding: 22px 22px 22px 20px;
  border-radius: 14px;
  background: rgba(255,255,255,0.025);
  border: 1px solid var(--line);
  transition: transform .25s ease, border-color .25s ease, background .25s ease, box-shadow .35s ease;
  isolation: isolate;
  overflow: hidden;
}
.step-card::before {
  content: "";
  position: absolute; left: 0; top: 0;
  width: 3px; height: 100%;
  background: var(--accent-3);
  transform: scaleY(0.3);
  transform-origin: top;
  transition: transform .35s cubic-bezier(.65,0,.35,1);
}
.step-card:hover {
  transform: translateY(-2px);
  border-color: var(--accent-3);
  background: rgba(255,255,255,0.04);
  box-shadow: 0 12px 28px rgba(255,182,39,0.15);
}
.step-card:hover::before { transform: scaleY(1); }
.sc-num {
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--accent-3);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
  line-height: 1.4;
}
.sc-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.sc-h {
  font-family: var(--display);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: -0.01em;
  color: var(--ink);
  line-height: 1.2;
}
.sc-p {
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-2);
}
.page-section-form { padding-top: 24px; padding-bottom: 0; }
.page-section-form .section-head { margin-bottom: 28px; }

/* ReserveSection embedded in booking page, flush with hero, drop redundant
   stat row inside .reserve-head (we have stats in the PageHero already) */
.page-main section.reserve-section { padding-top: 24px; padding-bottom: 80px; }
.page-main section.reserve-section .reserve-stats { display: none; }
.page-main section.reserve-section .reserve-head { margin-bottom: 32px; }

/* Quicklinks grid (Geburtstag / Schulen / Membercard) */
.bk-quicklinks {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 32px;
}
@media (max-width: 900px) { .bk-quicklinks { grid-template-columns: 1fr; } }

.bk-ql-card {
  position: relative;
  display: flex; flex-direction: column; gap: 10px;
  padding: 32px 28px;
  border-radius: 22px;
  background: rgba(255,255,255,0.025);
  border: 1px solid var(--line);
  text-decoration: none;
  color: var(--ink);
  transition: transform .25s ease, border-color .25s ease, background .25s ease, box-shadow .35s ease;
  isolation: isolate;
  overflow: hidden;
}
.bk-ql-card::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(135deg, color-mix(in srgb, var(--c) 8%, transparent), transparent 60%);
  opacity: 0;
  transition: opacity .3s ease;
  z-index: -1;
}
.bk-ql-card::after {
  content: "";
  position: absolute; left: 0; top: 0;
  width: 4px; height: 100%;
  background: var(--c);
  transform: scaleY(0.3);
  transform-origin: top;
  transition: transform .35s cubic-bezier(.65,0,.35,1);
}
.bk-ql-card:hover {
  transform: translateY(-4px);
  border-color: var(--c);
  background: rgba(255,255,255,0.04);
  box-shadow: 0 18px 44px color-mix(in srgb, var(--c) 16%, rgba(0,0,0,0.4));
}
.bk-ql-card:hover::before { opacity: 1; }
.bk-ql-card:hover::after { transform: scaleY(1); }
.bk-ql-tag {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--c);
  font-weight: 700;
}
.bk-ql-name {
  font-family: var(--display);
  font-weight: 700;
  font-size: 24px;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0;
  line-height: 1.1;
}
.bk-ql-desc {
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-2);
  margin: 0 0 4px;
  flex: 1;
}
.bk-ql-arrow {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--c);
  display: inline-flex; align-items: center;
  margin-top: auto;
  transition: transform .2s ease;
}
.bk-ql-card:hover .bk-ql-arrow { transform: translateX(4px); }

@supports not (color: color-mix(in srgb, red, blue)) {
  .bk-ql-card:hover { box-shadow: 0 18px 44px rgba(0,0,0,0.4); }
}

/* ---- compatibility shims ---- */
@supports not (color: color-mix(in srgb, red, blue)) {
  .ph-aurora { background: radial-gradient(ellipse 50% 40% at 25% 20%, rgba(255,31,182,0.20), transparent 60%); }
  .fg-card::before { background: linear-gradient(135deg, rgba(255,31,182,0.06), transparent 50%); }
  .pkg-card::before { background: linear-gradient(180deg, rgba(255,255,255,0.04), transparent 60%); }
  .pkg-card.hot { box-shadow: 0 0 0 1px var(--c), 0 24px 60px rgba(0,0,0,0.4); }
  .team-mark { background: var(--c); }
  .mc-card-visual { box-shadow: 0 24px 60px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.2); }
}

/* ===== Interaktive Anfahrtskarte (RouteMap) ===== */
.route-map { position: absolute; inset: 0; }
.route-map .leaflet-host { position: absolute; inset: 0; z-index: 1; }

.rm-modes {
  position: absolute; top: 14px; left: 14px; right: 14px;
  z-index: 1000;
  display: flex; gap: 8px; justify-content: center; flex-wrap: wrap;
  pointer-events: none;
}
.rm-mode {
  pointer-events: auto;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 9px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(12,10,28,0.74);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: var(--ink-3);
  font-family: var(--display); font-weight: 600;
  cursor: pointer;
  transition: border-color .2s ease, color .2s ease, background .2s ease, transform .2s ease, box-shadow .2s ease;
}
.rm-mode:hover { color: var(--ink); transform: translateY(-1px); }
.rm-mode.is-on {
  color: #0b0b14;
  background: var(--c);
  border-color: var(--c);
  box-shadow: 0 8px 22px -6px var(--c);
}
.rm-mode-ic { display: inline-flex; }
.rm-mode-ic svg { width: 18px; height: 18px; }
.rm-mode-tx { display: inline-flex; flex-direction: column; line-height: 1.15; text-align: left; }
.rm-mode-l { font-size: 13px; }
.rm-mode-b { font-size: 10px; font-family: var(--mono); letter-spacing: .06em; opacity: .75; }

.rm-info {
  position: absolute; left: 14px; bottom: 14px;
  z-index: 1000;
  width: min(360px, calc(100% - 28px));
  padding: 16px 18px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.12);
  border-left: 3px solid var(--c);
  background: rgba(10,8,22,0.84);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  pointer-events: none;
}
.rm-info-route {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-family: var(--mono); font-size: 11px; letter-spacing: .12em;
  color: var(--ink); margin-bottom: 8px;
}
.rm-info-arrow { color: var(--c); font-weight: 700; }
.rm-info-note { font-size: 13px; line-height: 1.55; color: var(--ink-2); margin: 0 0 10px; }
.rm-steps { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 5px; counter-reset: rm; }
.rm-steps li {
  position: relative; padding-left: 26px;
  font-size: 12.5px; color: var(--ink-2); line-height: 1.4;
  counter-increment: rm;
}
.rm-steps li::before {
  content: counter(rm);
  position: absolute; left: 0; top: -1px;
  width: 18px; height: 18px; border-radius: 50%;
  background: color-mix(in srgb, var(--c) 22%, transparent);
  border: 1px solid var(--c);
  color: var(--c);
  font-family: var(--mono); font-size: 10px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}

/* animierte Routen-Linie (Leaflet SVG-Pfad) */
.route-line { stroke-dasharray: 1 11; stroke-linecap: round; animation: route-dash 1.05s linear infinite; }
@keyframes route-dash { to { stroke-dashoffset: -24; } }

@media (max-width: 560px) {
  .rm-modes { top: 10px; gap: 6px; }
  .rm-mode { padding: 7px 11px; gap: 7px; }
  .rm-mode-b { display: none; }
  .rm-steps li { font-size: 12px; }
}

/* Route-Detail in der rechten Spalte (kein Karten-Overlay mehr) */
.route-detail {
  --c: var(--accent);
  border: 1px solid rgba(255,255,255,0.10);
  border-left: 3px solid var(--c);
  border-radius: 14px;
  background: rgba(255,255,255,0.03);
  padding: 18px 20px;
}
.rd-head {
  display: flex; align-items: center; gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.rd-ic { display: inline-flex; color: var(--c); }
.rd-ic svg { width: 20px; height: 20px; }
.rd-route {
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
  font-family: var(--mono); font-size: 11px; letter-spacing: .1em;
  color: var(--ink);
}
.rd-arrow { color: var(--c); font-weight: 700; }
.rd-badge {
  margin-left: auto;
  font-family: var(--mono); font-size: 11px; font-weight: 700;
  letter-spacing: .04em;
  color: #0b0b14;
  background: var(--c);
  padding: 3px 10px;
  border-radius: 999px;
}
.rd-note { font-size: 13.5px; line-height: 1.6; color: var(--ink-2); margin: 0 0 14px; }
.rd-steps {
  margin: 0; padding: 0; list-style: none;
  display: flex; flex-direction: column; gap: 8px;
  counter-reset: rd;
}
.rd-steps li {
  position: relative; padding-left: 30px;
  font-size: 13px; line-height: 1.45; color: var(--ink-2);
  counter-increment: rd;
}
.rd-steps li::before {
  content: counter(rd);
  position: absolute; left: 0; top: -1px;
  width: 20px; height: 20px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--c) 22%, transparent);
  border: 1px solid var(--c);
  color: var(--c);
  font-family: var(--mono); font-size: 11px; font-weight: 700;
}

/* ====== FAQ Section (Homepage SEO) ====== */
/* Vorher eine flache Flaeche in var(--bg). Weil der Body einen fixierten
   Verlauf hat, sass die Sektion als harte, andersfarbige Platte darin - oben
   eine sichtbare Kante zur helleren Oeffnungszeiten-Sektion, darunter ein
   Farbsprung gegen den Seitenverlauf. Jetzt blendet sie oben aus dem Ton der
   Vorgaenger-Sektion heraus und laeuft nach unten transparent in den
   Seitenverlauf, also ohne Kante und ohne konkurrierende Flaeche. */
.faq-section {
  padding: 104px 0 88px;
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(ellipse 80% 55% at 50% 0%, rgba(91,216,255,0.07), transparent 68%),
    linear-gradient(180deg, var(--bg-1) 0%, rgba(35,44,84,0.55) 26%, rgba(35,44,84,0) 62%);
  border-top: 1px solid var(--line);
}
.faq-section > .wrap { position: relative; z-index: 1; }
.faq-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.faq-item {
  border: 1px solid var(--line);
  border-radius: 16px;
  /* Die Sektion ist jetzt weitgehend transparent, die Karten tragen den
     Kontrast. */
  background: rgba(11,14,38,0.42);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  overflow: hidden;
  transition: border-color .25s ease, background .25s ease;
}
.faq-item.open {
  border-color: var(--accent-2);
  background: rgba(11,14,38,0.6);
  box-shadow: 0 0 0 1px rgba(91,216,255,0.14), 0 18px 40px -26px rgba(0,0,0,0.8);
}
.faq-q {
  width: 100%;
  padding: 22px 28px;
  background: transparent;
  border: none;
  color: var(--ink);
  font-family: var(--display);
  font-size: 17px;
  font-weight: 600;
  text-align: left;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  cursor: pointer;
  transition: color .2s ease;
  letter-spacing: -0.01em;
}
.faq-q:hover { color: var(--accent-2); }
.faq-toggle {
  font-family: var(--mono);
  font-size: 28px;
  line-height: 1;
  color: var(--accent-2);
  flex-shrink: 0;
  transition: transform .25s ease;
}
.faq-item.open .faq-toggle { transform: rotate(0); }
.faq-a {
  padding: 0 28px 24px;
  color: var(--ink-2);
  font-size: 15px;
  line-height: 1.65;
  max-width: 760px;
}
@media (max-width: 640px) {
  .faq-section { padding: 64px 0 56px; }
  .faq-q { padding: 18px 20px; font-size: 15px; }
  .faq-a { padding: 0 20px 20px; font-size: 14px; }
}

/* ====== Breadcrumbs ======
   Die sichtbare Leiste ist entfernt (siehe Breadcrumb() in pages.jsx). Es wird
   nur noch das Schema.org-Markup ausgegeben, die Styles werden nicht mehr
   gebraucht. */

/* ---- Bereichsseite: Bild ueber der Phasen-Karte ---- */
.area-aside { display: grid; gap: 16px; align-content: start; }
.area-aside-img {
  position: relative;
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid var(--line);
  aspect-ratio: 16 / 9;
  background: rgba(255,255,255,0.03);
}
.area-aside-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Kennzeichnung fuer KI-Bilder, bis echte Fotos der Halle da sind */
.ki-badge {
  position: absolute; left: 12px; bottom: 12px; z-index: 2;
  font: 600 11px/1 var(--font-mono, ui-monospace, monospace); letter-spacing: .08em; text-transform: uppercase;
  color: rgba(255,255,255,0.85); background: rgba(8,10,30,0.6); border: 1px solid rgba(255,255,255,0.18);
  padding: 5px 8px; border-radius: 6px; backdrop-filter: blur(4px);
}
/* Farbkante in der Bereichsfarbe, wie bei der Phasen-Karte darunter */
.area-aside-img::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 40%, transparent),
              inset 0 -60px 80px -40px rgba(8,10,30,0.85);
  pointer-events: none;
}

/* ---- SEO-Zielseiten (PageLanding) & Querverlinkung ---- */
.incl-grid.lp-packages { grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); }
.lp-price {
  font-family: var(--display);
  font-size: 40px;
  font-weight: 700;
  line-height: 1;
  padding: 20px 0 8px;
  font-variant-numeric: tabular-nums;
}
.lp-price span {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.06em;
  color: var(--ink-3);
  margin-left: 10px;
}
.lp-note { margin-top: 24px; max-width: 760px; }
.lp-faq-group + .lp-faq-group { margin-top: 56px; }
.lp-faq-h { margin-bottom: 20px; }
.related-links { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }

/* ---- Hinweis für Bereiche ohne Online-Buchung (Arcade) ---- */
.vor-ort-band {
  display: flex; align-items: flex-start; gap: 18px; flex-wrap: wrap;
  margin-top: 24px;
  padding: 22px 26px;
  border-radius: 18px;
  border: 1px solid color-mix(in srgb, var(--c, var(--accent)) 35%, transparent);
  background: color-mix(in srgb, var(--c, var(--accent)) 8%, rgba(255,255,255,0.02));
}
.vo-tag {
  font-family: var(--mono);
  font-size: 11px; font-weight: 700; letter-spacing: 0.12em;
  padding: 6px 10px; border-radius: 999px;
  color: var(--c, var(--accent));
  border: 1px solid color-mix(in srgb, var(--c, var(--accent)) 40%, transparent);
  white-space: nowrap;
}
.vo-text { margin: 0; color: var(--ink-2); font-size: 16px; line-height: 1.55; flex: 1 1 320px; }
.vo-text a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--c, var(--accent)); }

/* Wisch-Steuerung unter Galerie und Karten-Reihen: erscheint nur, wenn die Reihe
   wirklich breiter ist als der Bildschirm (die Komponente blendet sich sonst
   selbst aus). Zwei runde Knoepfe aussen, dazwischen Punkte — dieselbe
   Bildsprache wie der Areas-Slider, nur eigenstaendig gestylt. */
.wisch-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin-top: 24px;
}
.wisch-arrow {
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px;
  padding: 0;
  border-radius: 50%;
  cursor: pointer;
  color: var(--ink);
  border: 1px solid color-mix(in srgb, var(--c, var(--accent-3)) 34%, var(--line));
  background:
    radial-gradient(circle at 50% 28%, color-mix(in srgb, var(--c, var(--accent-3)) 18%, transparent), transparent 68%),
    rgba(255,255,255,0.035);
  box-shadow: 0 8px 20px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.09);
  transition: border-color .18s ease, box-shadow .2s ease, transform .12s ease, background .2s ease;
}
.wisch-arrow:hover:not(:disabled),
.wisch-arrow:focus-visible:not(:disabled) {
  border-color: var(--c, var(--accent-3));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--c, var(--accent-3)) 55%, transparent),
              0 0 26px -6px var(--c, var(--accent-3)),
              inset 0 1px 0 rgba(255,255,255,0.12);
  transform: translateY(-1px);
}
/* Fingerfeedback: der Knopf gibt beim Tippen sichtbar nach */
.wisch-arrow:active:not(:disabled) { transform: scale(0.93); }
.wisch-arrow:disabled { opacity: 0.22; cursor: default; }

.wisch-dots { display: flex; align-items: center; gap: 8px; }
.wisch-dot {
  width: 8px; height: 8px;
  padding: 0;
  border-radius: 999px;
  border: 1px solid var(--line-2);
  background: transparent;
  cursor: pointer;
  transition: width .28s cubic-bezier(.2,.9,.3,1.2), background .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.wisch-dot:hover { border-color: var(--c, var(--accent-3)); }
.wisch-dot.on {
  width: 28px;
  background: var(--c, var(--accent-3));
  border-color: var(--c, var(--accent-3));
  box-shadow: 0 0 16px -3px var(--c, var(--accent-3));
}
@media (max-width: 420px) {
  .wisch-controls { gap: 14px; }
  .wisch-arrow { width: 42px; height: 42px; }
}

/* --- Gutscheinseite: Betragswahl ---------------------------------------------
   Die Auswahl lag frueher als nackter Block mitten auf der Seite, der Knopf
   darunter kollidierte mit dem mitlaufenden Buchen-Knopf. Jetzt eine eigene
   Karte mit Rand und Luft nach unten. */
.gs-card {
  max-width: 660px;
  margin: 0 auto;
  padding: 32px clamp(20px, 4vw, 40px) 28px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: linear-gradient(160deg, rgba(255,255,255,0.045), rgba(255,255,255,0.012));
}
.gs-range {
  display: flex; align-items: center; gap: 14px;
  margin-top: 24px;
}
.gs-range input[type="range"] { flex: 1; min-width: 0; accent-color: var(--accent); }
.gs-range-l {
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .1em;
  color: var(--ink-3); white-space: nowrap;
}
.gs-range-v { font-weight: 600; min-width: 68px; text-align: right; font-variant-numeric: tabular-nums; }
.gs-cta { margin-top: 28px; width: 100%; text-align: center; text-decoration: none; }
.gs-note {
  margin: 16px 0 0; text-align: center;
  font-size: 13px; line-height: 1.55; color: var(--ink-3);
}

/* --- Gutschein-Formular ---------------------------------------------------
   Zwei Spalten am Rechner, eine am Handy. Die Nachricht darf immer die ganze
   Breite nehmen — sie ist das einzige mehrzeilige Feld. */
.gs-form { margin-top: 26px; }
.gs-felder {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
}
.gs-feld-breit { grid-column: 1 / -1; }
.gs-feld { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.gs-feld > span {
  font-family: var(--mono); font-size: 10px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-3);
}
.gs-feld > span small { text-transform: none; letter-spacing: 0; opacity: .7; }
.gs-feld input, .gs-feld textarea {
  width: 100%; padding: 12px 14px;
  background: var(--bg-2); color: var(--ink);
  border: 1px solid var(--line); border-radius: 12px;
  font-family: var(--display); font-size: 15px;
  transition: border-color .18s ease;
}
.gs-feld input:focus, .gs-feld textarea:focus {
  outline: none; border-color: var(--accent-3);
}
.gs-feld textarea { resize: vertical; }
/* Honigtopf: aus dem Blickfeld, aber nicht display:none — manche Bots fuellen
   nur Felder aus, die sie fuer sichtbar halten. */
.gs-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.gs-fehler {
  margin: 16px 0 0; text-align: center;
  color: #ff8fa3; font-size: 14px;
}
.gs-fertig { text-align: center; padding: 10px 0 4px; }
.gs-fertig-h {
  font-family: var(--display); font-weight: 800;
  font-size: clamp(20px, 2.4vw, 26px); margin-bottom: 14px;
}
.gs-code {
  display: inline-block;
  font-family: var(--mono); font-size: clamp(20px, 3vw, 30px); letter-spacing: .14em;
  padding: 14px 22px; border-radius: 14px;
  border: 1px dashed color-mix(in srgb, var(--accent-3) 55%, var(--line));
  background: color-mix(in srgb, var(--accent-3) 8%, transparent);
  color: var(--ink);
}
@media (max-width: 640px) {
  .gs-felder { grid-template-columns: 1fr; }
}
/* Luft, damit der mitlaufende Buchen-Knopf am Seitenende nichts verdeckt. */
.gs-dock-luft { height: 140px; }

@media (max-width: 560px) {
  .gs-range { flex-wrap: wrap; gap: 10px; }
  .gs-range input[type="range"] { order: 3; flex: 1 0 100%; }
  .gs-range-v { margin-left: auto; }
}


/* --- Preise auf der Bereichsseite --------------------------------------------
   Dieselben Tarifkarten wie auf der Preisseite, darunter die Pakete des
   Bereichs und die Extras. Vorher standen die Preise nur auf der Preisseite
   und die Pakete nur auf der Geburtstagsseite. */
.ap-tarife { margin-bottom: 8px; }
.ap-untertitel {
  font-family: var(--display); font-size: clamp(18px, 2.2vw, 24px);
  margin: 40px 0 16px; letter-spacing: -0.01em;
}
.ap-paket-grid { display: grid; gap: 16px; }
@media (min-width: 820px) { .ap-paket-grid { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); } }
.ap-paket {
  display: block; text-decoration: none; color: inherit;
  border: 1px solid var(--line); border-radius: 18px;
  padding: 20px 22px;
  background: linear-gradient(160deg, rgba(255,255,255,0.045), rgba(255,255,255,0.012));
  transition: border-color .2s ease, transform .15s ease;
}
.ap-paket:hover { border-color: var(--c); transform: translateY(-2px); }
.ap-paket-kopf {
  /* Umbruch erlaubt: bei langen Namen wie "LASER ULTIMATE" lief der Preis
     sonst in die Ueberschrift hinein. */
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 8px 14px; flex-wrap: wrap;
  padding-bottom: 12px; border-bottom: 1px solid var(--line);
}
.ap-paket-titel { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; min-width: 0; }
.ap-paket-n { font-family: var(--display); font-weight: 700; font-size: 17px; letter-spacing: .04em; }
.ap-paket-tag {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-3); border: 1px solid var(--line); border-radius: 999px; padding: 3px 8px;
  white-space: nowrap;
}
.ap-paket-p {
  font-family: var(--display); font-weight: 700; font-size: 24px; color: var(--c);
  white-space: nowrap; display: flex; align-items: baseline; gap: 6px;
}
.ap-paket-p small { font-family: var(--mono); font-size: 10.5px; color: var(--ink-3); font-weight: 400; }
.ap-paket-liste { list-style: none; margin: 14px 0 0; padding: 0; }
.ap-paket-liste li {
  position: relative; padding: 4px 0 4px 20px;
  font-size: 13.5px; line-height: 1.5; color: var(--ink-2);
}
.ap-paket-liste li::before {
  content: "✓"; position: absolute; left: 0; top: 4px;
  color: var(--c); font-size: 12px; font-weight: 700;
}
.ap-paket-link { display: inline-block; margin-top: 14px; font-size: 13px; color: var(--c); font-weight: 600; }

.ap-extras { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.ap-extra {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  border: 1px solid var(--line); border-radius: 999px;
  padding: 9px 16px; font-size: 13px;
}
.ap-extra-n { font-weight: 600; }
.ap-extra-p { font-family: var(--display); font-weight: 700; color: var(--accent-3); }
.ap-extra-s { color: var(--ink-3); font-size: 12.5px; }
.ap-fuss { margin-top: 22px; font-size: 12.5px; color: var(--ink-3); }
.ap-fuss a { color: var(--accent-2); }

/* --- Gruppenpreise auf der Bereichsseite -------------------------------------
   Eigener Block statt nur einer Karte in der Tarifreihe: Schulen und Vereine
   suchen gezielt danach und brauchen die Nebenbedingungen mit. */
.ap-gruppen {
  display: grid; gap: 22px;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 22px clamp(18px, 3vw, 26px);
  background: linear-gradient(160deg, rgba(255,255,255,0.045), rgba(255,255,255,0.012));
}
@media (min-width: 860px) { .ap-gruppen { grid-template-columns: 1.15fr 1fr; gap: 34px; } }
.ap-gruppen .ap-liste { list-style: none; margin: 0; padding: 0; }
.ap-gruppen .ap-liste li {
  display: flex; align-items: baseline; gap: 14px;
  padding: 12px 0; border-bottom: 1px solid var(--line);
}
.ap-gruppen .ap-liste li:last-child { border-bottom: 0; }
.ap-gruppen .ap-n { flex: 1; display: flex; flex-direction: column; gap: 2px; font-weight: 600; }
.ap-gruppen .ap-sub { font-weight: 400; font-size: 12.5px; color: var(--ink-3); }
.ap-gruppen .ap-p {
  font-family: var(--display); font-weight: 700; font-size: 21px; color: var(--c);
  white-space: nowrap; font-variant-numeric: tabular-nums;
}
.ap-gruppen-seite { display: flex; flex-direction: column; gap: 12px; }
.ap-gruppen .ap-hinweise {
  list-style: none; margin: 0; padding: 0;
  font-size: 12.5px; line-height: 1.65; color: var(--ink-3);
}
.ap-gruppen .ap-hinweise li { padding-left: 14px; position: relative; }
.ap-gruppen .ap-hinweise li::before { content: "·"; position: absolute; left: 3px; color: var(--c); }
.ap-gruppen-cta { margin: 0; font-size: 13px; line-height: 1.6; color: var(--ink-2); }
.ap-gruppen-cta a { color: var(--accent-2); }

/* Hinweis statt Buchung/Gutschein in der Vorab-Veroeffentlichung. */
.ab-bald {
  max-width: 760px; margin: 0 auto; padding: 30px 28px;
  background: var(--bg-2); border: 1px solid var(--line); border-radius: 18px;
  text-align: center;
}
.ab-bald-tag {
  display: inline-block; margin-bottom: 14px;
  font-family: var(--mono); font-size: 10px; letter-spacing: .14em;
  padding: 6px 12px; border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--accent-3) 55%, var(--line));
  color: var(--accent-3);
}
.ab-bald p { margin: 0 0 10px; line-height: 1.6; color: var(--ink-2); }
.ab-bald p:last-child { margin-bottom: 0; }
.ab-bald a { color: var(--accent-3); }