/* ══════════════════════════════════════════════════
   BHAMA FAMILY, Theme-Stylesheet.

   Design-System: siehe docs/design-system.md.
   Alle Farben, Schriften, Abstände und Bewegungen
   kommen aus den Tokens in :root. Komponenten sind
   nach Sektionen geordnet, Umbrüche stehen am Ende
   absteigend sortiert.
   ══════════════════════════════════════════════════ */

/* ── 1. Tokens ──────────────────────────────────── */
:root {
  --charcoal: #2a2a2a;
  --black:    #1a1a1a;
  --panel:    #333333;
  --gold:     #c39f68;
  --gold-deep:#82673b;   /* 4,5:1 auch auf dem Tintton */
  --paper:    #faf8f4;
  --tint:     #f2ecdf;
  --ink-soft: #3E3D37;
  --white:    #ffffff;
  --night:    #232221;   /* Grund des Formular-Bands */
  --ink-mute: #6d6b64;   /* gedämpfter Text auf hellem Grund, 4,5:1 */
  --error:    #c4694f;
  --text:     rgba(var(--rgb-white),0.92);
  --text-dim: rgba(var(--rgb-white),0.72);
  --line:     rgba(var(--rgb-white),0.16);

  --serif:  'Unna', Georgia, serif;
  --sans:   'Open Sans', 'Helvetica Neue', sans-serif;

  --w: 1200px;
  --w-nav: 1380px;
  --gutter: clamp(1.4rem, 5vw, 4rem);
  --pad: clamp(5rem, 10vw, 8.5rem);
  --pad-tight: clamp(2.2rem, 4.2vw, 3.4rem);
  --track: 0.3em;       /* 4.2px bei 14px */
  --track-wide: 0.43em; /* 6px bei 14px */

  --grade: saturate(0.85) contrast(0.98) sepia(0.05);

  --rgb-charcoal: 42,42,42;
  --rgb-black:    26,26,26;
  --rgb-white:    255,255,255;
  --rgb-gold:     195,159,104;

  /* Bewegung: eine Geste, eine Dauer */
  --t-fast:  0.3s;
  --t-mid:   0.5s;
  --t-slow:  1.1s;
  --t-drift: 0.9s;
  --ease:    cubic-bezier(0.22,1,0.36,1);

  --shadow-card:       0 18px 45px rgba(var(--rgb-charcoal),0.1);
  --shadow-card-hover: 0 28px 60px rgba(var(--rgb-charcoal),0.16);

  --crest-lg: clamp(170px, 18vw, 235px);
}

/* ── 2. Basis ───────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
/* Sprünge ohne weiches Scrollen. Elementor setzt html { scroll-behavior:
   smooth }, :root ist stärker als dieser Selektor. */
:root { scroll-behavior: auto; }
/* Sprungziele unter der festen Leiste (bis 6rem hoch) sichtbar halten */
[id] { scroll-margin-top: 6.5rem; }
.admin-bar [id] { scroll-margin-top: calc(6.5rem + 32px); }
html, body { overflow-x: clip; }

body {
  margin: 0;
  font-family: var(--sans);
  font-weight: 300;
  font-size: 1rem;
  line-height: 1.8;
  color: var(--text);
  background: var(--charcoal);
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--gold); color: var(--black); }

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
p, h1, h2, h3, h4, ul, ol, dl, dd, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button { font: inherit; }
[hidden] { display: none !important; }

.shell {
  max-width: var(--w);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 400;
  line-height: 1.15;
  color: var(--white);
}

/* Keine Eyebrows: der zweite Farbton sitzt kursiv in Gold */
h1 em, h2 em, h3 em, h4 em {
  font-style: italic;
  color: var(--gold);
}

/* Screenreader-Text nach WordPress-Konvention */
.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* ── 3. Buttons ─────────────────────────────────── */
.btn {
  display: inline-block;
  font-family: var(--sans);
  font-size: 0.8125rem;
  font-weight: 300;
  line-height: 1.8;
  letter-spacing: var(--track);
  text-indent: var(--track);
  text-transform: uppercase;
  text-align: center;
  padding: 0.85rem 2.1rem;
  border-radius: 0;
  border: 1px solid rgba(var(--rgb-white),0.45);
  color: var(--white);
  background: transparent;
  cursor: pointer;
  transition: border-color var(--t-fast) ease, color var(--t-fast) ease, background var(--t-fast) ease;
}

.btn:hover { border-color: var(--gold); color: var(--gold); }

.btn-gold {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--black);
  font-weight: 400;
}
.btn-gold:hover { background: var(--tint); border-color: var(--tint); color: var(--black); }

.btn-primary {
  background: var(--tint);
  border-color: var(--tint);
  color: var(--black);
  font-weight: 400;
}
.btn-primary:hover { background: var(--gold); border-color: var(--gold); color: var(--black); }

.zone-light .btn.btn-primary, .zone-tint .btn.btn-primary {
  background: var(--charcoal);
  border-color: var(--charcoal);
  color: var(--tint);
}
.zone-light .btn.btn-primary:hover, .zone-tint .btn.btn-primary:hover {
  background: var(--gold-deep);
  border-color: var(--gold-deep);
  color: var(--white);
}

.btn-sm { padding: 0.68rem 1.5rem; font-size: 0.78rem; }

:where(a, button, input, select, textarea, .menu-card):focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}
.zone-light :where(a, button):focus-visible,
.zone-tint :where(a, button):focus-visible { outline-color: var(--gold-deep); }

/* Badge: gesperrte Goldzeile */
.badge {
  display: inline-block;
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: var(--track);
  text-transform: uppercase;
  color: var(--gold);
}
.zone-light .badge, .zone-tint .badge { color: var(--gold-deep); }
.badge em { font-style: normal; color: var(--white); }
.zone-light .badge em, .zone-tint .badge em { color: var(--charcoal); }

/* Sprunglink */
.skip {
  position: fixed;
  z-index: 90;
  top: 0.7rem;
  left: 0.7rem;
  padding: 0.7rem 1.2rem;
  background: var(--gold);
  color: var(--black);
  font-size: 0.8125rem;
  letter-spacing: var(--track);
  text-transform: uppercase;
  transform: translateY(-160%);
  transition: transform var(--t-fast) ease;
}
.skip:focus { transform: translateY(0); }

/* ── 4. Navigation ──────────────────────────────── */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 60;
  transition: background 0.45s ease, box-shadow 0.45s ease;
}
.admin-bar .nav { top: 32px; }

.nav.solid {
  background: rgba(var(--rgb-black),0.94);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 1px 0 rgba(var(--rgb-gold),0.25);
}

.nav-row {
  position: relative;
  z-index: 2;
  max-width: var(--w-nav);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1rem;
  min-height: calc(var(--crest-lg) + 2.6rem);
  transition: min-height 0.55s var(--ease);
}
.nav.solid .nav-row { min-height: 6rem; }
body.subpage .nav-row { min-height: 8.5rem; }
body.subpage .nav.solid .nav-row { min-height: 6rem; }

.nav:not(.solid)::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 190%;
  pointer-events: none;
  background: linear-gradient(180deg,
    rgba(var(--rgb-black),0.6) 0%,
    rgba(var(--rgb-black),0.28) 45%,
    rgba(var(--rgb-black),0) 100%);
}

.nav .btn { justify-self: end; grid-column: 3; }

.burger {
  justify-self: start;
  background: none;
  border: none;
  color: var(--white);
  cursor: pointer;
  padding: 0.5rem 0.5rem 0.5rem 0;
}
.burger i {
  display: block;
  width: 28px;
  height: 1.5px;
  background: currentColor;
  margin: 6px 0;
  transition: opacity var(--t-fast);
}
.burger:hover i { opacity: 0.6; }

.nav-brand { display: block; line-height: 0; justify-self: center; grid-column: 2; }
.nav-crest {
  display: block;
  width: 118px;
  height: auto;
  transition: width var(--t-mid) var(--ease);
}
body.scrolled .nav-crest { width: 84px; }

/* Startseite: das Wappen ist fixiert, groß über dem Hero,
   beim Scrollen wandert es klein in die Leiste */
.hero-crest {
  position: fixed;
  z-index: 65;
  top: 1.3rem;
  left: 50%;
  transform: translateX(-50%);
  width: var(--crest-lg);
  height: auto;
  transition: width 0.55s var(--ease), top 0.55s var(--ease);
  animation: fadeIn 1.6s var(--t-fast) ease both;
}
.hero-crest { display: block; line-height: 0; }
.hero-crest img { display: block; width: 100%; height: auto; }
.admin-bar .hero-crest { top: calc(1.3rem + 32px); }
body.scrolled .hero-crest { width: 84px; top: 0.5rem; }
.admin-bar.scrolled .hero-crest { top: calc(0.5rem + 32px); }

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* Vollbild-Menü */
.overlay {
  position: fixed;
  inset: 0;
  z-index: 70;
  background: var(--black);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  /* visibility schaltet erst nach dem Ausblenden um: geschlossen ist das
     Menü unsichtbar und per Tab nicht erreichbar */
  transition: opacity 0.4s ease, visibility 0s linear 0.4s;
}
.overlay.open { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity 0.4s ease, visibility 0s; }
.overlay { overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
/* Während das Menü offen ist, bleibt die Seite dahinter eingefroren */
body.menu-open { overflow: hidden; }
body.menu-open .nav { pointer-events: none; }

.overlay-mark {
  position: absolute;
  z-index: 1;
  top: 50%;
  right: -8%;
  transform: translateY(-50%);
  width: min(115vw, 1600px);
  height: auto;
  opacity: 0.08;
  pointer-events: none;
}

.overlay-close {
  position: absolute;
  z-index: 5;
  top: 1.8rem;
  right: var(--gutter);
  width: 46px;
  height: 46px;
  padding: 0;
  background: none;
  border: 1px solid rgba(var(--rgb-white),0.25);
  color: var(--white);
  cursor: pointer;
  transition: border-color var(--t-fast), color var(--t-fast), transform 0.4s ease;
}
.overlay-close:hover { border-color: var(--gold); color: var(--gold); transform: rotate(90deg); }
.overlay-close svg { display: block; width: 100%; height: 100%; padding: 14px; }

.menu-card {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  flex: 1;
  width: min(54vw, 860px);
  border-bottom: 1px solid rgba(var(--rgb-white),0.1);
  border-right: 1px solid rgba(var(--rgb-white),0.08);
  padding: 0 clamp(2rem, 5vw, 5rem);
  overflow: hidden;
  transition: background 0.4s ease;
}
.menu-card:first-of-type { border-top: 1px solid rgba(var(--rgb-white),0.1); }
.menu-card:last-of-type { border-bottom: none; }

.menu-card .mc-bg {
  position: absolute;
  inset: 0;
  background-image: var(--mc-bg, none);
  background-size: cover;
  background-position: center;
  opacity: 0;
  transform: scale(1.08);
  transition: opacity var(--t-drift) var(--ease), transform var(--t-drift) var(--ease);
  will-change: opacity, transform;
}
.menu-card:hover .mc-bg { opacity: 1; transform: scale(1.02); }

.menu-card .mc-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(var(--rgb-black),0.9) 25%, rgba(var(--rgb-black),0.45) 100%);
  opacity: 0;
  transition: opacity var(--t-mid) ease;
}
.menu-card:hover .mc-shade { opacity: 1; }
.menu-card .mc-body { position: relative; z-index: 2; }
.menu-card .mc-title {
  display: block;
  font-family: var(--serif);
  font-weight: 400;
  line-height: 1.15;
  font-size: clamp(1.8rem, 4.2vw, 2.9rem);
  color: var(--white);
  transition: color var(--t-fast);
}
.menu-card:hover .mc-title { color: var(--gold); }
.menu-card p {
  font-size: 0.9375rem;
  color: var(--text-dim);
  margin-top: 0.25rem;
  max-width: 56ch;
}

/* ── 5. Hero (Startseite) ───────────────────────── */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  /* Oben: fixiertes Wappen (1.3rem + --crest-lg) plus Luft, damit Wappen
     und Überschrift sich auch auf flachen Bildschirmen nicht berühren */
  padding: calc(1.3rem + var(--crest-lg) + clamp(2rem, 6vh, 3.6rem)) var(--gutter) 7rem;
  overflow: hidden;
  background: var(--black);
}
.hero-media { position: absolute; inset: 0; }
.hero-media img {
  width: 100%; height: 100%; object-fit: cover;
  object-position: var(--hero-focus, 53% center);
}

.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  /* Eine gezielte Abdunklung statt Helligkeitsfilter und drei Ebenen:
     oben für Leiste und Wappen, weich hinter dem Text, unten zum Übergang.
     Das Motiv bleibt an den Rändern hell. */
  background:
    radial-gradient(ellipse 64% 50% at 50% 60%, rgba(var(--rgb-black),0.52) 0%, rgba(var(--rgb-black),0.24) 58%, rgba(var(--rgb-black),0) 100%),
    linear-gradient(180deg, rgba(var(--rgb-black),0.55) 0%, rgba(var(--rgb-black),0.16) 30%, rgba(var(--rgb-black),0.2) 62%, rgba(var(--rgb-black),0.72) 100%);
}

.hero-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.hero-arrow {
  position: absolute;
  z-index: 2;
  bottom: 2.2rem;
  left: 50%;
  transform: translateX(-50%);
  color: var(--white);
  opacity: 0.8;
  transition: opacity var(--t-fast);
}
.hero-arrow:hover { opacity: 1; }
.hero-arrow svg { display: block; width: 18px; height: 56px; }

.hero h1, .hero .hero-title {
  font-size: clamp(2.5rem, 5.4vw, 4.6rem);
  line-height: 1.12;
  max-width: 21ch;
  text-shadow: 0 1px 22px rgba(var(--rgb-black),0.35);
  animation: rise 1.4s 0.6s var(--ease) both;
}
.hero-sub {
  margin-top: 1.6rem;
  max-width: 56ch;
  font-size: 1.0625rem;
  color: var(--text);
  text-shadow: 0 1px 14px rgba(var(--rgb-black),0.45);
  animation: rise 1.4s 0.8s var(--ease) both;
}
.hero-actions {
  margin-top: 2.6rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.7rem;
  flex-wrap: wrap;
  animation: rise 1.4s 1s var(--ease) both;
}
@keyframes rise {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── 6. Sektionen und Zonen ─────────────────────── */
.section {
  position: relative;
  overflow: clip;           /* clip statt hidden: so bleibt die Aside sticky */
  padding: var(--pad) 0;
}
.section > .shell { position: relative; z-index: 2; }

/* Abstands-Modifier für das Stapeln mehrerer Widgets. Zwei Klassen,
   damit sie auch die später definierten .funnel-section und .founder
   schlagen. */
.section.pt-tight, .funnel-section.pt-tight, .founder.pt-tight { padding-top: var(--pad-tight); }
.section.pb-tight, .funnel-section.pb-tight, .founder.pb-tight { padding-bottom: var(--pad-tight); }
.section.pt-none, .funnel-section.pt-none, .founder.pt-none { padding-top: 0; }
.section.pb-none, .funnel-section.pb-none, .founder.pb-none { padding-bottom: 0; }

.section-deep { background: var(--black); }
.zone-charcoal { background: var(--charcoal); }
.zone-night { background: var(--night); }
.zone-light { background: var(--paper); color: var(--ink-soft); }
.zone-tint  { background: var(--tint);  color: var(--ink-soft); }

.zone-light h1, .zone-light h2, .zone-light h3, .zone-light h4,
.zone-tint h1, .zone-tint h2, .zone-tint h3, .zone-tint h4 { color: var(--charcoal); }
.zone-light h2 em, .zone-light h3 em, .zone-light h4 em,
.zone-tint h2 em, .zone-tint h3 em, .zone-tint h4 em { color: var(--gold-deep); }

.zone-light .btn, .zone-tint .btn {
  border-color: rgba(var(--rgb-charcoal),0.55);
  color: var(--charcoal);
}
.zone-light .btn:hover, .zone-tint .btn:hover { border-color: var(--gold-deep); color: var(--gold-deep); }

.zone-light .events-note, .zone-tint .events-note { color: var(--ink-mute); }
.zone-light .section-head p, .zone-tint .section-head p,
.zone-light .events-head p, .zone-tint .events-head p { color: var(--ink-soft); }
.zone-light .tile-label h3, .zone-tint .tile-label h3 { color: var(--white); }
.zone-light .tile-label p, .zone-tint .tile-label p { color: var(--text); }

/* Wasserzeichen */
.watermark {
  position: absolute;
  z-index: 1;
  pointer-events: none;
  opacity: 0.05;
  width: 600px;
  height: 600px;
  top: 50%;
  transform: translateY(-50%);
}
.watermark-right { right: -190px; }
.watermark-left  { left: -190px; }
.watermark-center { left: 50%; transform: translate(-50%, -50%); width: 640px; height: 640px; opacity: 0.045; }
.zone-light .watermark, .zone-tint .watermark { opacity: 0.04; }

/* Sektionskopf */
.section-head {
  text-align: center;
  max-width: 760px;
  margin: 0 auto clamp(2.6rem, 5vw, 4rem);
}
.section-head .head-title {
  font-size: clamp(2.1rem, 3.6vw, 3rem);
  margin-bottom: 1rem;
}
.section-head .head-title::after {
  content: '';
  display: block;
  width: 0;
  height: 1px;
  background: var(--gold);
  margin: 1.1rem auto 0;
  transition: width var(--t-slow) var(--ease) 0.35s;
}
.section-head.in .head-title::after,
.section-head.static .head-title::after { width: 60px; }
.zone-light .section-head .head-title::after,
.zone-tint .section-head .head-title::after { background: var(--gold-deep); }

.section-head p { color: var(--text); max-width: 640px; margin: 0 auto; }

.section-head--links { text-align: left; margin-left: 0; margin-right: 0; }
.section-head--links .head-title::after { margin-left: 0; }
.section-head--links p { margin-left: 0; }
.section-head--links:not(:has(p)) { margin-bottom: clamp(1.6rem, 2.8vw, 2.2rem); }
.section-head--links:not(:has(p)) .head-title { margin-bottom: 0.6rem; }
.section-head--links:not(:has(p)) .head-title::after { margin-top: 0.8rem; }

/* ── 7. Kachelraster (Mosaik) ───────────────────── */
.mosaic { display: grid; grid-template-columns: 1.45fr 1fr; gap: 1.4rem; }
.mosaic-b { display: grid; grid-template-columns: 1fr 1.45fr; gap: 1.4rem; margin-top: 1.4rem; }

.tile {
  position: relative;
  height: clamp(230px, 26vw, 330px);
  overflow: hidden;
  display: block;
  background: var(--black);
}
.tile img {
  width: 100%; height: 100%; object-fit: cover;
  filter: var(--grade) brightness(0.8);
  transition: transform var(--t-mid) var(--ease), filter var(--t-mid) var(--ease);
  will-change: transform;
}
.tile:hover img { transform: scale(1.05); filter: var(--grade) brightness(0.95); }
.tile::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(var(--rgb-black),0.3) 20%, rgba(var(--rgb-black),0.82) 65%, rgba(var(--rgb-black),0.98) 100%);
  opacity: 0.8;
  transition: opacity var(--t-mid) ease;
}
.tile:hover::after { opacity: 1; }
.tile-label { position: absolute; z-index: 2; left: 1.6rem; right: 1.6rem; bottom: 1.3rem; }
.tile-label .card-title { font-size: clamp(1.4rem, 2vw, 1.8rem); color: var(--white); }
.tile-label p {
  font-size: 0.9375rem;
  color: var(--text);
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transform: translateY(8px);
  transition: max-height var(--t-mid) var(--ease), opacity 0.45s ease, transform 0.45s var(--ease), margin-top var(--t-mid);
  margin-top: 0;
}
.tile:hover .tile-label p { max-height: 5rem; opacity: 1; transform: translateY(0); margin-top: 0.4rem; }

/* ── 8. Fakten und Aktionen ─────────────────────── */
.journey-facts { border-top: 1px solid var(--line); margin-bottom: 2rem; }
.journey-facts div {
  display: grid;
  grid-template-columns: 8rem 1fr;
  gap: 1.2rem;
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--line);
  font-size: 0.9375rem;
}
.journey-facts dt {
  font-size: 0.75rem;
  font-weight: 300;
  letter-spacing: var(--track);
  text-transform: uppercase;
  color: var(--gold);
  padding-top: 0.2rem;
}
.journey-facts dd { color: var(--text); }
.journey-facts dd a { border-bottom: 1px solid rgba(var(--rgb-gold),0.4); }
.journey-facts dd a:hover { color: var(--gold); border-color: var(--gold); }

.journey-actions { display: flex; align-items: center; gap: 1.8rem; flex-wrap: wrap; }

/* Reiseplakette: rundes Reisezeichen je Reise, immer ganz, unverzerrt und
   ohne Hintergrund. Ohne Plakette entsteht kein Platz (kein Element). */
.plakette { display: block; pointer-events: none; }
.plakette-img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  filter: drop-shadow(0 8px 18px rgba(var(--rgb-black),0.28));
}

/* ── 9. Karten (Events, Weitere) ────────────────── */
.events-head {
  display: grid;
  align-items: end;
  gap: 2rem;
  margin-bottom: clamp(2.4rem, 4.5vw, 3.6rem);
}
.events-head .head-title { font-size: clamp(2.1rem, 3.6vw, 3rem); margin-top: 0.6rem; }
.events-head p { max-width: 52ch; margin-top: 0.8rem; }

.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.4rem, 3vw, 2.4rem); }
.cards[data-n="2"] { grid-template-columns: repeat(2, 1fr); }
.cards[data-n="4"] { grid-template-columns: repeat(4, 1fr); }

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--white);
  box-shadow: var(--shadow-card);
  transition: transform var(--t-mid) var(--ease), box-shadow var(--t-mid) ease;
}
.card::before, .player::before {
  content: '';
  position: absolute;
  left: 0; right: 0;
  top: 100%;
  height: 8px;
}

.card-img { position: relative; height: clamp(180px, 17vw, 220px); overflow: hidden; background: var(--charcoal); }
.card-img img {
  width: 100%; height: 100%; object-fit: cover;
  filter: var(--grade) brightness(0.94);
  transition: transform var(--t-mid) var(--ease);
  will-change: transform;
}

.card-badge {
  position: absolute;
  z-index: 2;
  top: 1rem;
  left: 1rem;
  background: var(--charcoal);
  text-align: center;
  padding: 0.55rem 0.85rem 0.5rem;
  line-height: 1.15;
}
.card-badge .day {
  display: block;
  font-family: var(--serif);
  font-size: 1.5rem;
  color: var(--white);
  white-space: nowrap;
}
.card-badge .day.day-range { font-size: clamp(1rem, 1.35vw, 1.2rem); }
.card-badge .month {
  display: block;
  font-size: 0.66rem;
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
}

.card-body { display: flex; flex-direction: column; flex: 1; padding: 1.5rem 1.6rem 1.7rem; }
.card .card-place { font-size: 0.875rem; color: var(--ink-mute); margin-bottom: 0.7rem; }
.card-place a {
  color: inherit;
  border-bottom: 1px solid rgba(var(--rgb-charcoal),0.25);
  padding-bottom: 1px;
  transition: color var(--t-fast) ease, border-color var(--t-fast) ease;
}
.card-place a:hover { color: var(--gold-deep); border-color: var(--gold-deep); }
.card .card-title { font-size: clamp(1.4rem, 2.1vw, 1.7rem); margin-bottom: 0.35rem; color: var(--charcoal); }
.card .card-title em { color: var(--gold-deep); }
.card p { font-size: 0.9375rem; margin-bottom: 1.2rem; color: var(--ink-soft); }
.card .card-btn { margin-top: auto; align-self: flex-start; }

/* Karten sind immer weiß, auch auf dunklem Grund: Buttons deshalb immer dunkel */
.card .btn { border-color: rgba(var(--rgb-charcoal),0.55); color: var(--charcoal); }
.card .btn:hover { border-color: var(--gold-deep); color: var(--gold-deep); }
.card .btn.btn-primary { background: var(--charcoal); border-color: var(--charcoal); color: var(--tint); }
.card .btn.btn-primary:hover { background: var(--gold-deep); border-color: var(--gold-deep); color: var(--white); }

.events-note { text-align: center; margin-top: 2.6rem; font-size: 0.9375rem; color: var(--text-dim); }

/* ── 10. Kooperation ────────────────────────────── */
.coop-wrap {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(2.2rem, 5vw, 4.5rem);
  align-items: stretch;
}
.coop-wrap.coop-flip .coop-body { order: 2; }
.coop-body .head-title { font-size: clamp(2rem, 3.4vw, 2.9rem); margin-bottom: 1rem; }
.coop-body > p { max-width: 54ch; margin-bottom: 1.4rem; }
.coop-list { border-top: 1px solid var(--line); margin-bottom: 1.8rem; }
.coop-list li {
  position: relative;
  padding: 0.65rem 0 0.65rem 1.7rem;
  border-bottom: 1px solid var(--line);
  font-size: 0.9375rem;
}
.coop-list li::before { content: '—'; position: absolute; left: 0; color: var(--gold); }
.zone-light .coop-list, .zone-light .coop-list li,
.zone-tint .coop-list, .zone-tint .coop-list li { border-color: rgba(var(--rgb-charcoal),0.12); }
.zone-light .coop-list li::before, .zone-tint .coop-list li::before { color: var(--gold-deep); }

.coop-img { position: relative; min-height: clamp(280px, 34vw, 440px); overflow: hidden; background: var(--black); }
.coop-img img {
  width: 100%; height: 100%; object-fit: cover;
  filter: var(--grade);
  transition: transform var(--t-mid) var(--ease);
  will-change: transform;
}

/* ── 11. Aktuelles ──────────────────────────────── */
.news-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.4rem, 3vw, 2.4rem); }
.news-grid[data-n="2"] { grid-template-columns: repeat(2, 1fr); }
.news-grid[data-n="1"] { grid-template-columns: minmax(0, 720px); }
.news-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  background: var(--white);
  box-shadow: var(--shadow-card);
  padding: clamp(1.6rem, 3vw, 2.2rem);
}
.news-item time { margin-bottom: 0.55rem; color: var(--gold-deep); }
.news-item .card-title { font-size: clamp(1.3rem, 2vw, 1.55rem); margin-bottom: 0.55rem; color: var(--charcoal); }
.news-item .card-title em { color: var(--gold-deep); }
.news-item p { font-size: 0.9375rem; margin-bottom: 0; color: var(--ink-soft); }
.news-item .news-players { margin-top: 0.9rem; font-size: 0.75rem; letter-spacing: var(--track); text-transform: uppercase; color: var(--ink-mute); }
.news-item .news-players a { border-bottom: 1px solid rgba(var(--rgb-gold),0.4); }
.news-item .news-players a:hover { color: var(--gold-deep); }

/* ── 12. Spieler ────────────────────────────────── */
.players-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.2rem, 2.5vw, 2rem); }
.players-grid[data-n="2"] { grid-template-columns: repeat(2, 1fr); }
.players-grid[data-n="4"] { grid-template-columns: repeat(4, 1fr); }

.player {
  position: relative;
  aspect-ratio: 3 / 4.3;
  background: var(--charcoal);
  box-shadow: var(--shadow-card);
  transition: transform var(--t-mid) var(--ease), box-shadow var(--t-mid) ease;
}
.player figure { position: absolute; inset: 0; overflow: hidden; }
.player img {
  width: 100%; height: 100%; object-fit: cover;
  filter: var(--grade) saturate(0.55) brightness(0.92);
  transition: filter var(--t-mid) var(--ease), transform var(--t-mid) var(--ease);
  will-change: transform;
}
.player::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(var(--rgb-black),0) 40%, rgba(var(--rgb-black),0.55) 68%, rgba(var(--rgb-black),0.92) 100%);
  pointer-events: none;
}
.player figure.player-placeholder {
  display: grid;
  place-items: center;
  background: linear-gradient(160deg, #2e2e2c 0%, var(--black) 100%);
}
.player figure.player-placeholder img { width: 46%; height: auto; opacity: 0.3; filter: none; }

.player-body { position: absolute; z-index: 2; left: 1.5rem; right: 1.5rem; bottom: 1.5rem; }
.player .card-title { font-size: 1.5rem; color: var(--white); }
.player-open .card-title { line-height: 1.2; }
.player .player-meta {
  display: block;
  margin-top: 0.25rem;
  margin-bottom: 1.1rem;
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
}
.zone-light .player .btn, .zone-tint .player .btn { border-color: rgba(var(--rgb-white),0.45); color: var(--white); }
.zone-light .player .btn:hover, .zone-tint .player .btn:hover { border-color: var(--gold); color: var(--gold); }
.zone-light .player .btn.btn-primary, .zone-tint .player .btn.btn-primary { background: var(--tint); border-color: var(--tint); color: var(--black); }
.zone-light .player .btn.btn-primary:hover, .zone-tint .player .btn.btn-primary:hover { background: var(--gold); border-color: var(--gold); color: var(--black); }

/* ── 13. Gründer-Zitat ──────────────────────────── */
.founder {
  position: relative;
  overflow: clip;
  background: var(--black);
  text-align: center;
  padding: var(--pad) var(--gutter);
}
.founder-inner { position: relative; z-index: 2; }
.founder blockquote {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.6rem, 3.2vw, 2.5rem);
  line-height: 1.4;
  color: var(--white);
  max-width: 30ch;
  margin: 0 auto 2.2rem;
}
.founder .founder-sig {
  display: block;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.6rem, 2.6vw, 2.1rem);
  color: var(--gold);
}
.founder .founder-role {
  display: block;
  margin-top: 0.9rem;
  font-size: 0.75rem;
  font-weight: 300;
  letter-spacing: var(--track-wide);
  text-indent: var(--track-wide);
  text-transform: uppercase;
  color: var(--text-dim);
}
.founder.zone-light blockquote, .founder.zone-tint blockquote { color: var(--charcoal); }
.founder.zone-light .founder-sig, .founder.zone-tint .founder-sig { color: var(--gold-deep); }
.founder.zone-light .founder-role, .founder.zone-tint .founder-role { color: var(--ink-mute); }

/* ── 14. Partner ────────────────────────────────── */
/* Raster mit vier Spalten. Bei weniger Partnern werden die Logos ein
   Stück größer (--logo-h), die Spaltenbreite bleibt gedeckelt, damit
   zwei Logos nicht die ganze Breite füllen. */
.partner-logos {
  --logo-w: 170px;   /* Box, in die jedes Logo eingepasst wird */
  --logo-h: 64px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 240px));
  justify-content: center;
  align-items: center;
  justify-items: center;
  gap: clamp(2rem, 4vw, 3.5rem) clamp(2rem, 5vw, 4.5rem);
  margin-bottom: 3rem;
}
.partner-logos[data-n="3"] { grid-template-columns: repeat(3, minmax(0, 260px)); --logo-w: 190px; --logo-h: 72px; }
.partner-logos[data-n="2"] { grid-template-columns: repeat(2, minmax(0, 280px)); --logo-w: 210px; --logo-h: 80px; }
.partner-logos[data-n="1"] { grid-template-columns: minmax(0, 300px); --logo-w: 240px; --logo-h: 90px; }
/* Breite und Höhe sind beide begrenzt, das Logo füllt die Box so weit es
   sein Format erlaubt. --logo-scale kommt aus dem Feld "Logo-Größe". */
.partner-logos img {
  width: calc(var(--logo-w) * var(--logo-scale, 1));
  height: calc(var(--logo-h) * var(--logo-scale, 1));
  max-width: 100%;
  display: block;
  object-fit: contain;
  object-position: center;
  filter: grayscale(100%);
  opacity: 0.6;
  transition: opacity 0.35s ease, filter 0.35s ease;
}
.partner-logos img:hover, .partner-logos a:hover img { filter: none; opacity: 1; }
.partner-logos a { display: block; line-height: 0; }
.section-deep .partner-logos img, .zone-charcoal .partner-logos img, .zone-night .partner-logos img { filter: grayscale(100%) brightness(0) invert(1); }
.partner-wordmark {
  font-size: 0.82rem;
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  line-height: 1.2;
  color: var(--black);
  opacity: 0.55;
  border-bottom: 1px solid currentColor;
  padding-bottom: 0.3rem;
  transition: opacity 0.35s ease;
}
.partner-wordmark:hover { opacity: 1; }
.partner-slot {
  display: grid;
  place-items: center;
  width: 130px;
  height: 46px;
  font-size: 0.68rem;
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--black);
  opacity: 0.28;
  border: 1px dashed currentColor;
}
.section-deep .partner-wordmark, .section-deep .partner-slot,
.zone-charcoal .partner-wordmark, .zone-charcoal .partner-slot,
.zone-night .partner-wordmark, .zone-night .partner-slot { color: var(--white); }
.partner-cta { text-align: center; }

/* ── 15. Formular (Funnel) ──────────────────────── */
.funnel-section { position: relative; background: var(--night); padding: var(--pad) 0; }
.fs-inner { position: relative; z-index: 2; }

.fs-frame {
  position: relative;
  border: 1px solid rgba(var(--rgb-white),0.13);
  background: rgba(var(--rgb-white),0.022);
  padding: clamp(2.2rem, 4.6vw, 4.2rem);
}
.fs-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  margin-bottom: clamp(2.6rem, 5vw, 4rem);
  min-height: 1.6rem;
}
.fs-steps { display: flex; align-items: flex-end; gap: 0.9rem; flex: 1; }
.fs-steps li { flex: 1 1 0; min-width: 0; }
.fs-step {
  display: block;
  padding: 0 0 0.55rem;
  background: none;
  border: none;
  border-bottom: 1px solid rgba(var(--rgb-white),0.34);
  font-family: var(--sans);
  font-size: 0.68rem;
  font-weight: 400;
  letter-spacing: var(--track);
  text-indent: var(--track);
  text-transform: uppercase;
  color: rgba(var(--rgb-white),0.47);
  white-space: nowrap;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: left;
  transition: color var(--t-fast) ease, border-color var(--t-fast) ease;
}
.fs-steps .is-done .fs-step { color: var(--gold); border-bottom-color: var(--gold); cursor: pointer; }
.fs-steps .is-done .fs-step:hover { color: var(--white); border-bottom-color: var(--white); }
.fs-steps .is-current .fs-step { color: var(--white); border-bottom: 2px solid var(--gold); padding-bottom: 0.5rem; }
/* „Schritt 2 von 4: Zimmer“, nur mobil statt der Schrittleiste */
.fs-count {
  display: none;
  margin: 0;
  padding-bottom: 0.55rem;
  border-bottom: 2px solid var(--gold);
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: var(--track);
  text-transform: uppercase;
  color: var(--white);
}
.zaehler-hint { margin: -0.6rem 0 0; max-width: 52ch; font-size: 0.9375rem; color: var(--gold); }
/* Leer aus dem Fluss nehmen, als Live-Region aber im Dokument lassen */
.zaehler-hint:empty { position: absolute; margin: 0; }
.zone-tint .zaehler-hint, .zone-light .zaehler-hint { color: var(--gold-deep); }
.zone-tint .fs-count, .zone-light .fs-count { color: var(--charcoal); border-bottom-color: var(--gold-deep); }

.funnel { position: relative; width: 100%; text-align: left; }
.funnel-steps { min-height: 330px; overflow: hidden; transition: height var(--t-mid) var(--ease); }
.step { animation: stepIn var(--t-mid) var(--ease) both; }
@keyframes stepIn {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
.step-q {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2rem, 3.9vw, 3.1rem);
  line-height: 1.12;
  color: var(--white);
  margin-bottom: clamp(1.8rem, 3.4vw, 2.6rem);
  max-width: 20ch;
}
.step-q em { font-style: italic; color: var(--gold); }
.step-lead {
  color: var(--text);
  max-width: 52ch;
  margin-top: clamp(-1.2rem, -2vw, -0.8rem);
  margin-bottom: clamp(2.2rem, 4vw, 3.2rem);
}
.step-error { color: var(--error); font-size: 0.9375rem; margin-top: 1rem; max-width: 52ch; }

.choices { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(0.9rem, 1.8vw, 1.4rem); }
.choices[data-n="4"], .choices[data-n="2"] { grid-template-columns: repeat(2, 1fr); }
.choice input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.choice-face {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1.8rem;
  min-height: 10rem;
  padding: 1.6rem 1.7rem 1.5rem;
  border: 1px solid rgba(var(--rgb-white),0.34);
  background: rgba(var(--rgb-white),0.035);
  color: var(--text);
  cursor: pointer;
  transition: border-color var(--t-fast) ease, color var(--t-fast) ease,
              background var(--t-fast) ease, transform var(--t-mid) var(--ease);
}
.choice-face em { font-family: var(--serif); font-style: normal; font-size: 1.1875rem; line-height: 1.2; }
.choice-icon {
  width: 30px; height: 30px;
  color: var(--gold);
  opacity: 0.85;
  transition: color var(--t-fast) ease, opacity var(--t-fast) ease, transform var(--t-mid) var(--ease);
}
.choice-face:not(:has(.choice-icon)) { justify-content: center; }
.choice:hover .choice-face { border-color: var(--gold); color: var(--gold); background: rgba(var(--rgb-gold),0.07); transform: translateY(-4px); }
.choice:hover .choice-icon { opacity: 1; transform: scale(1.08); }
.choice input:checked + .choice-face { border-color: var(--gold); background: rgba(var(--rgb-gold),0.09); color: var(--gold); transform: none; }
.choice input:checked + .choice-face::before {
  content: '';
  position: absolute;
  left: -1px; top: -1px; bottom: -1px;
  width: 2px;
  background: var(--gold);
}
.choice input:checked + .choice-face .choice-icon { opacity: 1; }
.choice input:focus-visible + .choice-face { outline: 2px solid var(--gold); outline-offset: 3px; }

.form-field { position: relative; display: flex; flex-direction: column; gap: 0.5rem; border: none; min-width: 0; }
.form-field:has(input, textarea)::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--t-mid) var(--ease);
}
.form-field:focus-within::after { transform: scaleX(1); }
.form-field label { display: flex; flex-direction: column; gap: 0.5rem; }
.form-field .fl {
  transition: color var(--t-fast) ease;
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: var(--track);
  text-transform: uppercase;
  color: var(--gold);
}
.form-field .opt { color: var(--text-dim); letter-spacing: 0; text-transform: none; font-size: 0.8125rem; }
.form-field input, .form-field textarea {
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(var(--rgb-white),0.34);
  border-radius: 0;
  color: var(--white);
  font-family: var(--sans);
  font-weight: 300;
  font-size: 1.0625rem;
  padding: 0.7rem 0.1rem;
  transition: border-color var(--t-fast) ease;
}
.form-field input::placeholder, .form-field textarea::placeholder { color: rgba(var(--rgb-white),0.38); }
.funnel :where(input, textarea):focus-visible { outline: none; }
.form-field input:hover, .form-field textarea:hover { border-bottom-color: rgba(var(--rgb-white),0.42); }
.form-field input:user-valid, .form-field textarea:user-valid { border-bottom-color: rgba(var(--rgb-gold),0.55); }
.form-field:focus-within .fl { color: var(--white); }
.form-field input:user-invalid, .form-field textarea:user-invalid { border-bottom-color: var(--error); }
.form-field textarea { min-height: 160px; resize: vertical; }

.funnel .form-field { max-width: 620px; }
.step-fields { display: flex; flex-direction: column; gap: 1.6rem; max-width: 620px; }
.step .btn { margin-top: 1.8rem; }

.consent { display: flex; align-items: flex-start; gap: 0.9rem; max-width: 620px; margin-top: 2rem; cursor: pointer; }
.consent input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.consent-box {
  flex: none;
  display: grid;
  place-items: center;
  width: 22px; height: 22px;
  margin-top: 0.15rem;
  border: 1px solid rgba(var(--rgb-white),0.3);
  color: var(--black);
  transition: background var(--t-fast) ease, border-color var(--t-fast) ease;
}
.consent-box svg { width: 14px; height: 14px; opacity: 0; transition: opacity var(--t-fast) ease; }
.consent:hover .consent-box { border-color: var(--gold); }
.consent input:checked + .consent-box { background: var(--gold); border-color: var(--gold); }
.consent input:checked + .consent-box svg { opacity: 1; }
.consent input:focus-visible + .consent-box { outline: 2px solid var(--gold); outline-offset: 3px; }
.consent input:user-invalid + .consent-box { border-color: var(--error); }
.consent-text { font-size: 0.875rem; line-height: 1.65; color: var(--text-dim); }
.consent-text a { color: var(--gold); border-bottom: 1px solid rgba(var(--rgb-gold),0.45); }
.consent-text a:hover { border-color: var(--gold); }

.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.step-send { display: flex; align-items: center; gap: 1.6rem; flex-wrap: wrap; margin-top: 2.2rem; max-width: 640px; }
.step-send .btn { margin-top: 0; }

.step-gruppe { display: flex; flex-direction: column; align-items: flex-start; gap: 2rem; }
.gruppe { display: flex; flex-wrap: wrap; gap: 2rem 3rem; }
.zaehler-label {
  display: block;
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: var(--track);
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 0.7rem;
}
.stepper { display: inline-flex; align-items: stretch; border: 1px solid rgba(var(--rgb-white),0.24); background: rgba(var(--rgb-white),0.035); width: max-content; }
.stepper-btn {
  width: 3.4rem;
  background: none;
  border: none;
  color: var(--text);
  font-family: var(--sans);
  font-size: 1.35rem;
  line-height: 1;
  cursor: pointer;
  transition: color var(--t-fast) ease, background var(--t-fast) ease;
}
.stepper-btn:hover { color: var(--gold); background: rgba(var(--rgb-gold),0.12); }
.stepper input {
  width: 4rem;
  padding: 0.85rem 0;
  text-align: center;
  background: none;
  border: none;
  border-left: 1px solid rgba(var(--rgb-white),0.24);
  border-right: 1px solid rgba(var(--rgb-white),0.24);
  color: var(--white);
  font-family: var(--serif);
  font-size: 1.4rem;
  -moz-appearance: textfield;
  appearance: textfield;
}
.stepper input::-webkit-outer-spin-button, .stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.stepper input:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }

.fs-back {
  align-self: flex-start;
  margin-bottom: 1.6rem;
  padding: 0.4rem 0;
  background: none;
  border: none;
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: var(--track);
  text-transform: uppercase;
  color: var(--text-dim);
  cursor: pointer;
  transition: color var(--t-fast) ease;
}
.fs-back::before { content: '\2190\00a0\00a0'; }
.fs-back:hover { color: var(--gold); }

.step-done .step-q { margin-bottom: 1.2rem; }
.step-done .step-lead { margin-top: 0; margin-bottom: 0.6rem; }
.step-done a { border-bottom: 1px solid rgba(var(--rgb-gold),0.5); }
.step-done a:hover { color: var(--gold); border-color: var(--gold); }

.cta-note { margin-top: 1.3rem; font-size: 0.9375rem; color: var(--text-dim); }
.cta-note a { border-bottom: 1px solid rgba(var(--rgb-gold),0.45); padding-bottom: 2px; }
.cta-note a:hover { color: var(--gold); border-color: var(--gold); }
.anfrage-form .cta-note { margin-top: 1.6rem; }

/* Formular in heller Zone */
.zone-tint .fs-frame, .zone-light .fs-frame { border-color: rgba(var(--rgb-charcoal),0.16); background: rgba(var(--rgb-white),0.5); }
.zone-tint .form-field .fl, .zone-light .form-field .fl { color: var(--gold-deep); }
.zone-tint .form-field:focus-within .fl, .zone-light .form-field:focus-within .fl { color: var(--charcoal); }
.zone-tint .form-field input, .zone-tint .form-field textarea,
.zone-light .form-field input, .zone-light .form-field textarea { border-bottom-color: rgba(var(--rgb-charcoal),0.24); color: var(--charcoal); }
.zone-tint .form-field input::placeholder, .zone-tint .form-field textarea::placeholder,
.zone-light .form-field input::placeholder, .zone-light .form-field textarea::placeholder { color: rgba(var(--rgb-charcoal),0.42); }
.zone-tint .form-field:has(input, textarea)::after, .zone-light .form-field:has(input, textarea)::after { background: var(--gold-deep); }
.zone-tint .consent-box, .zone-light .consent-box { border-color: rgba(var(--rgb-charcoal),0.3); }
.zone-tint .consent-text, .zone-light .consent-text { color: var(--ink-soft); }
.zone-tint .form-field .opt, .zone-light .form-field .opt { color: var(--ink-mute); }
.zone-tint .consent-text a, .zone-light .consent-text a { color: var(--gold-deep); }
.zone-tint .step-q, .zone-light .step-q { color: var(--charcoal); }
.zone-tint .step-q em, .zone-light .step-q em { color: var(--gold-deep); }
.zone-tint .step-lead, .zone-light .step-lead { color: var(--ink-soft); }
.zone-tint .choice-face, .zone-light .choice-face { border-color: rgba(var(--rgb-charcoal),0.34); background: rgba(var(--rgb-charcoal),0.03); color: var(--ink-soft); }
.zone-tint .choice-icon, .zone-light .choice-icon { color: var(--gold-deep); }
.zone-tint .choice:hover .choice-face, .zone-light .choice:hover .choice-face,
.zone-tint .choice input:checked + .choice-face, .zone-light .choice input:checked + .choice-face { border-color: var(--gold-deep); color: var(--gold-deep); background: rgba(var(--rgb-gold),0.1); }
.zone-tint .choice input:checked + .choice-face::before, .zone-light .choice input:checked + .choice-face::before { background: var(--gold-deep); }
.zone-tint .fs-step, .zone-light .fs-step { color: rgba(var(--rgb-charcoal),0.5); border-bottom-color: rgba(var(--rgb-charcoal),0.3); }
.zone-tint .fs-steps .is-current .fs-step, .zone-light .fs-steps .is-current .fs-step { color: var(--charcoal); border-bottom-color: var(--gold-deep); }
.zone-tint .fs-steps .is-done .fs-step, .zone-light .fs-steps .is-done .fs-step { color: var(--gold-deep); border-bottom-color: var(--gold-deep); }
.zone-tint .zaehler-label, .zone-light .zaehler-label { color: var(--gold-deep); }
.zone-tint .stepper, .zone-light .stepper, .zone-tint .stepper input, .zone-light .stepper input { border-color: rgba(var(--rgb-charcoal),0.24); color: var(--charcoal); }
.zone-tint .stepper-btn, .zone-light .stepper-btn { color: var(--ink-soft); }
.zone-light .fs-back, .zone-tint .fs-back { color: var(--ink-mute); }
.zone-light .fs-back:hover, .zone-tint .fs-back:hover { color: var(--gold-deep); }
.zone-tint .cta-note, .zone-light .cta-note { color: var(--ink-mute); }
.zone-tint .cta-note a:hover, .zone-light .cta-note a:hover { color: var(--gold-deep); }
.zone-tint .btn-gold, .zone-light .btn-gold { background: var(--charcoal); border-color: var(--charcoal); color: var(--tint); }
.zone-tint .btn-gold:hover, .zone-light .btn-gold:hover { background: var(--gold-deep); border-color: var(--gold-deep); color: var(--white); }

/* Sponsorensuche: Vorteile + Formular unter einer Linie */
.vorteile {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1.6rem, 3.4vw, 3rem);
  margin-bottom: clamp(3rem, 6vw, 5rem);
}
.vorteile[data-n="3"] { grid-template-columns: repeat(3, 1fr); }
.vorteile[data-n="2"] { grid-template-columns: repeat(2, 1fr); }
.vorteile li { border-top: 1px solid rgba(var(--rgb-gold),0.4); padding-top: 1.4rem; }
.vorteile svg { width: 30px; height: 30px; color: var(--gold); margin-bottom: 1.1rem; }
.vorteile .card-title { font-size: clamp(1.15rem, 1.7vw, 1.35rem); line-height: 1.25; margin-bottom: 0.5rem; }
.vorteile p { font-size: 0.9375rem; line-height: 1.7; color: var(--text-dim); }
.zone-light .vorteile p, .zone-tint .vorteile p { color: var(--ink-soft); }
.zone-light .vorteile svg, .zone-tint .vorteile svg { color: var(--gold-deep); }

.sponsor-form { border-top: 1px solid rgba(var(--rgb-white),0.12); padding-top: clamp(2.4rem, 5vw, 3.6rem); }
.sponsor-form .form-title { font-size: clamp(1.6rem, 2.6vw, 2.1rem); margin-bottom: 0.7rem; }
.sponsor-form > p { max-width: 52ch; margin-bottom: 2rem; color: var(--text); }
.zone-light .sponsor-form, .zone-tint .sponsor-form { border-color: rgba(var(--rgb-charcoal),0.14); }
.zone-light .sponsor-form > p, .zone-tint .sponsor-form > p { color: var(--ink-soft); }

/* ── 16. Unterseiten: Hero, Detail-Raster, Fließtext ── */
.subhero {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  min-height: clamp(460px, 68vh, 680px);
  padding: 9rem 0 clamp(3.2rem, 6vw, 5rem);
  background: var(--black);
}
.subhero-media { position: absolute; inset: 0; }
.subhero-media img { width: 100%; height: 100%; object-fit: cover; object-position: var(--hero-focus, center); filter: var(--grade) brightness(0.68); }
.subhero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(var(--rgb-black),0.72) 0%,
    rgba(var(--rgb-black),0.34) 26%,
    rgba(var(--rgb-black),0.3) 46%,
    rgba(var(--rgb-black),0.8) 78%,
    rgba(var(--rgb-black),0.95) 100%);
}
.subhero .shell { position: relative; z-index: 2; width: 100%; }
/* Kompakte Fassung für Textseiten: nur Platz für Leiste und Überschrift */
.subhero.subhero-compact { min-height: 0; padding: clamp(8rem, 14vh, 10rem) 0 clamp(2.4rem, 4vw, 3.4rem); }
.subhero.subhero-compact::after { background: none; }
.subhero.subhero-compact .subhero-title { font-size: clamp(2.1rem, 4vw, 3.2rem); }
.subhero .subhero-title { font-size: clamp(2.4rem, 5vw, 4rem); max-width: 18ch; }
.subhero-lead { margin-top: 1rem; max-width: 58ch; font-size: 1.0325rem; color: var(--text); }
.subhero-actions { margin-top: 1.8rem; display: flex; gap: 1.4rem; flex-wrap: wrap; }

.detail-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  /* Der Kasten steht im Markup vor dem Text (mobil zuerst), am Desktop rechts */
  grid-template-areas: "main aside";
  gap: clamp(2.4rem, 5vw, 4.5rem);
  align-items: start;
}
.detail-grid > .detail-main { grid-area: main; min-width: 0; }
.detail-grid > .detail-aside { grid-area: aside; }
.detail-grid.detail-single { grid-template-columns: minmax(0, 760px); grid-template-areas: "main"; justify-content: center; }

/* Fließtext: gilt für detail-main und für den Text-Widget-Bereich (.prose) */
.prose h2, .detail-main h2 { font-size: clamp(1.9rem, 3vw, 2.6rem); margin-bottom: 1.1rem; }
.prose h3, .detail-main h3 { font-size: clamp(1.4rem, 2.2vw, 1.8rem); margin: 2.2rem 0 0.8rem; }
.prose h4, .detail-main h4 { font-size: clamp(1.15rem, 1.7vw, 1.35rem); margin: 1.8rem 0 0.6rem; }
.prose h2:first-child, .detail-main h2:first-child,
.prose h3:first-child, .detail-main h3:first-child { margin-top: 0; }
.prose p, .detail-main p { margin-bottom: 1.1rem; max-width: 62ch; }
.prose ul, .detail-main ul, .prose ol, .detail-main ol { border-top: 1px solid rgba(var(--rgb-charcoal),0.12); margin-bottom: 1.4rem; }
.prose li, .detail-main li {
  position: relative;
  padding: 0.6rem 0 0.6rem 1.7rem;
  border-bottom: 1px solid rgba(var(--rgb-charcoal),0.12);
  font-size: 0.9375rem;
}
.prose ul li::before, .detail-main ul li::before { content: '—'; position: absolute; left: 0; color: var(--gold-deep); }
.prose ol, .detail-main ol { counter-reset: li; }
.prose ol li::before, .detail-main ol li::before { counter-increment: li; content: counter(li) '.'; position: absolute; left: 0; color: var(--gold-deep); font-family: var(--serif); }
.prose a, .detail-main a { color: var(--gold-deep); border-bottom: 1px solid rgba(var(--rgb-gold),0.4); }
.prose a:hover, .detail-main a:hover { border-color: var(--gold-deep); }
.prose a.btn, .detail-main a.btn { border-bottom-width: 1px; color: inherit; }
.prose a.btn-primary, .detail-main a.btn-primary { color: var(--tint); }
.prose strong, .detail-main strong { font-weight: 600; }
.prose blockquote, .detail-main blockquote {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.35rem;
  line-height: 1.4;
  border-left: 2px solid var(--gold-deep);
  padding-left: 1.4rem;
  margin: 1.6rem 0;
  max-width: 52ch;
}
.prose table, .detail-main table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; margin-bottom: 1.4rem; }
.prose th, .prose td, .detail-main th, .detail-main td { text-align: left; padding: 0.6rem 0.8rem 0.6rem 0; border-bottom: 1px solid rgba(var(--rgb-charcoal),0.12); vertical-align: top; }
.prose th, .detail-main th { font-size: 0.75rem; letter-spacing: var(--track); text-transform: uppercase; font-weight: 400; color: var(--gold-deep); }
.prose img, .detail-main img { margin: 1.4rem 0; }
.prose .btn, .detail-main .btn { margin-top: 0.6rem; }

/* Dunkle Zonen: Linien und Links hell */
.section-deep .prose, .zone-charcoal .prose, .zone-night .prose,
.section-deep .detail-main, .zone-charcoal .detail-main, .zone-night .detail-main { color: var(--text); }
.section-deep :is(.prose, .detail-main) :is(ul, ol, li, th, td),
.zone-charcoal :is(.prose, .detail-main) :is(ul, ol, li, th, td),
.zone-night :is(.prose, .detail-main) :is(ul, ol, li, th, td) { border-color: var(--line); }
.section-deep :is(.prose, .detail-main) :is(a, th),
.zone-charcoal :is(.prose, .detail-main) :is(a, th),
.zone-night :is(.prose, .detail-main) :is(a, th) { color: var(--gold); }
.section-deep :is(.prose, .detail-main) li::before,
.zone-charcoal :is(.prose, .detail-main) li::before,
.zone-night :is(.prose, .detail-main) li::before { color: var(--gold); }
.section-deep :is(.prose, .detail-main) a.btn-primary,
.zone-charcoal :is(.prose, .detail-main) a.btn-primary,
.zone-night :is(.prose, .detail-main) a.btn-primary { color: var(--black); }

.note-box {
  margin: 2rem 0;
  text-align: left;
  font-size: 0.9375rem;
  color: var(--ink-mute);
  border-left: 2px solid var(--gold-deep);
  padding: 0.2rem 0 0.2rem 1.4rem;
  max-width: 62ch;
}
.note-box strong { color: var(--charcoal); font-weight: 600; }
.section-deep .note-box, .zone-charcoal .note-box, .zone-night .note-box { color: var(--text-dim); border-color: var(--gold); }
.section-deep .note-box strong, .zone-charcoal .note-box strong, .zone-night .note-box strong { color: var(--white); }

.detail-aside {
  --aside-pad: clamp(1.8rem, 3vw, 2.6rem);
  position: sticky;
  top: 7.5rem;
  background: var(--white);
  box-shadow: var(--shadow-card);
  padding: var(--aside-pad);
  color: var(--ink-soft);
}
.admin-bar .detail-aside { top: calc(7.5rem + 32px); }
.detail-aside > .aside-img:first-child { margin: calc(var(--aside-pad) * -1) calc(var(--aside-pad) * -1) var(--aside-pad); }
.detail-aside .aside-title { font-size: 1.4rem; margin-bottom: 1rem; color: var(--charcoal); }
.detail-aside .aside-title em { color: var(--gold-deep); }
.detail-aside .btn { margin-top: 1.6rem; }
.detail-aside .btn + .btn { margin-top: 0.7rem; }
.detail-aside .aside-actions { display: flex; flex-direction: column; align-items: flex-start; }
.detail-aside .aside-img { height: clamp(240px, 24vw, 320px); overflow: hidden; margin-bottom: 1.4rem; background: var(--charcoal); }
.detail-aside .aside-img img { width: 100%; height: 100%; object-fit: cover; filter: var(--grade); }
.detail-aside .aside-img.player-placeholder { display: grid; place-items: center; height: clamp(230px, 22vw, 300px); background: linear-gradient(160deg, #2e2e2c 0%, var(--black) 100%); }
.detail-aside .aside-img.player-placeholder img { width: 46%; height: auto; opacity: 0.3; filter: none; }
.detail-aside .journey-facts { margin-bottom: 0; }
.detail-aside .journey-facts, .detail-aside .journey-facts div { border-color: rgba(var(--rgb-charcoal),0.14); }
.detail-aside .journey-facts dt { color: var(--gold-deep); }
.detail-aside .journey-facts dd { color: var(--ink-soft); }
.detail-aside .journey-facts dd a:hover { color: var(--gold-deep); border-color: var(--gold-deep); }
.detail-aside .form-note { display: block; margin-top: 1rem; max-width: none; font-size: 0.8125rem; color: var(--ink-mute); }
.detail-aside .btn { border-color: rgba(var(--rgb-charcoal),0.55); color: var(--charcoal); }
.detail-aside .btn:hover { border-color: var(--gold-deep); color: var(--gold-deep); }
.detail-aside .btn.btn-primary { background: var(--charcoal); border-color: var(--charcoal); color: var(--tint); }
.detail-aside .btn.btn-primary:hover { background: var(--gold-deep); border-color: var(--gold-deep); color: var(--white); }

.zone-light .journey-facts, .zone-light .journey-facts div,
.zone-tint .journey-facts, .zone-tint .journey-facts div { border-color: rgba(var(--rgb-charcoal),0.14); }
.zone-light .journey-facts dt, .zone-tint .journey-facts dt { color: var(--gold-deep); }
.zone-light .journey-facts dd, .zone-tint .journey-facts dd { color: var(--ink-soft); }

/* Hochkant-Videos mit festem Seitenverhältnis */
figure.video { margin-top: 1.4rem; margin-bottom: 1.4rem; max-width: 320px; }
figure.video.video-wide { max-width: 100%; }
figure.video video { display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; background: var(--black); }
figure.video.video-wide video { aspect-ratio: 16 / 9; }
figure.video figcaption { margin-top: 0.7rem; font-size: 0.8125rem; color: var(--ink-mute); }
.section-deep figure.video figcaption, .zone-charcoal figure.video figcaption, .zone-night figure.video figcaption { color: var(--text-dim); }

/* ── 17. Footer ─────────────────────────────────── */
.footer { background: var(--black); padding: var(--pad) 0 2.4rem; color: var(--text); }
/* Aufbau und Spalten: assets/css/refined.css, Abschnitt Footer */

/* ── 18. Fallback-Vorlagen (Blog, Suche, 404) ───── */
.fallback-content { max-width: 760px; margin: 0 auto; }
.fallback-list article + article { margin-top: 2.4rem; padding-top: 2.4rem; border-top: 1px solid rgba(var(--rgb-charcoal),0.12); }
.fallback-list .card-title { font-size: clamp(1.4rem, 2.2vw, 1.8rem); margin-bottom: 0.4rem; }
.fallback-list .card-title a:hover { color: var(--gold-deep); }
.pagination { margin-top: 2.4rem; display: flex; gap: 1rem; flex-wrap: wrap; font-size: 0.8125rem; letter-spacing: var(--track); text-transform: uppercase; }
.pagination .current { color: var(--gold-deep); }
.search-form { display: flex; gap: 1rem; max-width: 520px; }
.search-form input[type=search] { flex: 1; background: transparent; border: none; border-bottom: 1px solid rgba(var(--rgb-charcoal),0.24); font: inherit; padding: 0.6rem 0.1rem; color: var(--charcoal); }

/* ── 19. Reduzierte Bewegung ────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .step { animation: none; }
  .funnel-steps { transition: none; }
  .tile:hover img, .menu-card:hover .mc-bg { transform: none; }
  .hero-crest, .hero h1, .hero .hero-title, .hero-sub, .hero-actions { animation: none; }
}

/* ── 19b. Wählbare Varianten ───────────────────── */
/* Bereichslinks (Kachel-Widget, Darstellung „Bereichslinks“): ganze Fläche
   verlinkt, Überschrift in Unna, kurze Beschreibung, kleiner Pfeil */
.section-shortcuts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 3rem;
  border-top: 1px solid rgba(var(--rgb-charcoal),0.18);
}
.section-shortcuts[data-n="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.section-shortcuts[data-n="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.section-shortcuts .shortcut {
  display: block;
  padding: 1.5rem 1.4rem;
  border-right: 1px solid rgba(var(--rgb-charcoal),0.14);
  color: inherit;
}
.section-shortcuts .shortcut:first-child { padding-left: 0; }
.section-shortcuts .shortcut:last-child { border-right: 0; }
.section-shortcuts a.shortcut:hover { text-decoration: none; }
.shortcut-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin: 0 0 0.75rem;
  font: 400 1.55rem/1.2 var(--serif);
  color: var(--charcoal);
}
.shortcut-title em { color: var(--gold-deep); }
.shortcut-title span { flex-shrink: 0; font-family: var(--sans); font-size: 1rem; color: var(--gold-deep); }
.shortcut-description { margin: 0; font: 400 0.875rem/1.8 var(--sans); color: var(--ink-soft); }
.section-shortcuts a.shortcut:hover .shortcut-title { color: var(--gold-deep); }
.section-shortcuts a.shortcut:focus-visible { outline: 2px solid var(--gold-deep); outline-offset: 4px; }
:is(.section-deep, .zone-charcoal, .zone-night) .section-shortcuts { border-color: var(--line); }
:is(.section-deep, .zone-charcoal, .zone-night) .section-shortcuts .shortcut { border-color: var(--line); }
:is(.section-deep, .zone-charcoal, .zone-night) .shortcut-title { color: var(--white); }
:is(.section-deep, .zone-charcoal, .zone-night) .shortcut-title span,
:is(.section-deep, .zone-charcoal, .zone-night) a.shortcut:hover .shortcut-title { color: var(--gold); }
:is(.section-deep, .zone-charcoal, .zone-night) .shortcut-description { color: var(--text-dim); }

/* Schlichter Seitentitel (Seiten-Hero „Schlicht“, Seiten ohne Bild): helle
   Fläche, genau eine Überschrift direkt über dem Text. Zurück geht es über
   das Wappen. Die Kopfleiste ist hier von Anfang an schwarz. */
.page-title-plain { padding: calc(8.5rem + clamp(3.5rem, 8.5vw, 7rem)) 0 0; }
.admin-bar .page-title-plain { padding-top: calc(8.5rem + 32px + clamp(3.5rem, 8.5vw, 7rem)); }
.page-title-plain-inner { max-width: 70ch; }
.page-title { font-size: clamp(2.4rem, 5vw, 3.5rem); line-height: 1.1; color: var(--charcoal); margin: 0; }
.page-title em { color: var(--gold-deep); }
.page-title-lead { margin-top: 1rem; max-width: 62ch; color: var(--ink-soft); }
.elementor-widget-bhama-subhero:has(.page-title-plain) + .elementor-widget .section,
.page-title-plain + .page-title-plain-body { padding-top: clamp(2rem, 4vw, 2.6rem); min-height: 32vh; }
/* Textseiten mit schlichtem Titel (Impressum, Datenschutz): eine gemeinsame
   Lesespalte von 760 px, linksbündig unter dem Titel. Zwischenüberschriften,
   Absätze und Listen sind gleich breit, auch beim Textbereich mit „Volle
   Inhaltsbreite“ oder „Lesebreite“. */
body:has(.page-title-plain) .prose { max-width: 760px; }
body:has(.page-title-plain) .detail-grid.detail-single { justify-content: start; }
body:has(.page-title-plain) :is(.prose, .detail-main) p { max-width: none; }
body:has(.page-title-plain) .nav { background: var(--black); }
body:has(.page-title-plain) .nav:not(.solid)::before { display: none; }

/* Partnerlogos mit eigener Breite (Partner › Logobreite): natürliche Höhe */
.partner-logos img.logo-sized { width: min(var(--logo-width), 100%); height: auto; max-width: 100%; }

/* ── 20. Elementor ──────────────────────────────── */
/* Die BHAMA-Widgets sind volle Sektionen. Sie bringen Hintergrund und
   Abstand selbst mit, Elementors Widget-Abstand darf nicht dazwischen. */
.elementor-widget[class*="elementor-widget-bhama-"] { margin-bottom: 0 !important; width: 100%; max-width: 100%; margin-left: 0; margin-right: 0; }
/* Container mit BHAMA-Widgets: volle Innenbreite und kein Innenabstand,
   egal wie der Container eingestellt ist. Elementor begrenzt Boxed über
   .e-con > .e-con-inner { max-width: var(--content-width) } und setzt
   10px Padding als Standard. Es wird nichts verschoben, die Widgets
   füllen einfach den ganzen Container. */
.e-con:has(> .elementor-widget[class*="elementor-widget-bhama-"]),
.e-con:has(> .e-con-inner > .elementor-widget[class*="elementor-widget-bhama-"]) {
  --content-width: 100%;
  --padding-top: 0px;
  --padding-right: 0px;
  --padding-bottom: 0px;
  --padding-left: 0px;
  --padding-block-start: 0px;
  --padding-block-end: 0px;
  --padding-inline-start: 0px;
  --padding-inline-end: 0px;
}
.e-con.e-con-boxed > .e-con-inner:has(> .elementor-widget[class*="elementor-widget-bhama-"]) {
  max-width: 100%;
  padding: 0;
}
/* Ohne Flexbox-Container, mit klassischer Sektion und Spalte: ebenfalls
   volle Breite, kein Spaltenabstand, kein Innenabstand */
.elementor-section:has(.elementor-widget[class*="elementor-widget-bhama-"]) > .elementor-container { max-width: none; }
.elementor-section .elementor-column:has(> .elementor-widget-wrap > .elementor-widget[class*="elementor-widget-bhama-"]) > .elementor-widget-wrap { padding: 0; }
.elementor-widget[class*="elementor-widget-bhama-"] > .elementor-widget-container { width: 100%; }
/* Elementor setzt auf allen Bildern height:auto, das bricht den Cover-Modus */
.elementor .hero-media img, .elementor .subhero-media img, .elementor .tile img,
.elementor .card-img img, .elementor .coop-img img, .elementor .trip-teaser-photo img,
.elementor .player figure:not(.player-placeholder) img, .elementor .aside-img:not(.player-placeholder) img {
  width: 100%; height: 100%; max-width: none; object-fit: cover;
}
/* Editor-Hinweis für Widgets ohne Inhalt */
.bhama-editor-note {
  padding: 2rem var(--gutter);
  text-align: center;
  font-size: 0.875rem;
  color: var(--text-dim);
  border: 1px dashed rgba(var(--rgb-gold),0.5);
  background: var(--charcoal);
}

/* ── 21. Umbrüche, absteigend ───────────────────── */
@media (max-width: 1020px) {
  .section-shortcuts, .section-shortcuts[data-n="3"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .section-shortcuts .shortcut { border-bottom: 1px solid rgba(var(--rgb-charcoal),0.14); }
  .section-shortcuts .shortcut:nth-child(even) { border-right: 0; }
  .section-shortcuts .shortcut:nth-child(odd) { padding-left: 0; }
  .mosaic, .mosaic-b { grid-template-columns: 1fr 1fr; }
  .cards, .cards[data-n="2"], .cards[data-n="4"] { grid-template-columns: 1fr; }
  .card-img { height: clamp(200px, 40vw, 300px); }
  .news-grid, .news-grid[data-n="2"] { grid-template-columns: 1fr; }
  .players-grid, .players-grid[data-n="4"] { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
  .nav .btn { display: none; }
  .burger { grid-column: 3; justify-self: end; }
  .hero-crest { left: var(--gutter); transform: none; top: 0.9rem; width: 96px; }
  .admin-bar .hero-crest { top: calc(0.9rem + 46px); }
  /* Im gescrollten Zustand 20px mehr Luft nach oben */
  body.scrolled .hero-crest { width: 64px; top: calc(0.6rem + 20px); }
  .admin-bar.scrolled .hero-crest { top: calc(0.6rem + 20px + 46px); }
  .admin-bar .nav { top: 46px; }
  .nav-row { min-height: 0; height: calc(96px + 1.8rem); }
  .nav.solid .nav-row { min-height: 0; height: calc(64px + 1.2rem + 20px); padding-top: 20px; }
  body.subpage .nav-row { min-height: 0; height: calc(64px + 1.2rem); }
  body.subpage .nav.solid .nav-row { min-height: 0; height: calc(64px + 1.2rem + 20px); padding-top: 20px; }
  .burger {
    position: absolute;
    top: calc(0.9rem + 48px);
    right: var(--gutter);
    transform: translateY(-50%);
    transition: top 0.55s var(--ease);
  }
  body.scrolled .burger { top: calc(0.6rem + 20px + 32px); }
  body.subpage .burger { top: 50%; }
  body.subpage.scrolled .burger { top: calc(50% + 10px); }
  .nav-brand { justify-self: start; grid-column: 1; }
  .nav-crest { width: 64px; }
  .hero-media img { object-position: var(--hero-focus-mobile, 24% center); }
  .events-head { text-align: center; }
  .journey-facts div { grid-template-columns: 1fr; gap: 0.15rem; padding: 0.85rem 0; }
  .journey-facts dt { padding-top: 0; }
  .journey-actions { justify-content: center; }
  .coop-wrap { grid-template-columns: 1fr; }
  .coop-wrap.coop-flip .coop-body { order: 0; }
  .vorteile, .vorteile[data-n="3"] { grid-template-columns: repeat(2, 1fr); }
  .partner-logos, .partner-logos[data-n="3"] { grid-template-columns: repeat(2, minmax(0, 240px)); }
  .coop-img { height: clamp(220px, 55vw, 320px); }
  .detail-grid { grid-template-columns: 1fr; grid-template-areas: "aside" "main"; }
  .detail-grid.detail-single { grid-template-areas: "main"; }
  .detail-aside { position: static; }
  .hero { padding-top: calc(0.9rem + 96px + clamp(2.2rem, 7vh, 4rem)); }
  .overlay { overflow-y: auto; justify-content: flex-start; padding-top: 0; }
  .menu-card:first-of-type { border-top: none; }
  .menu-card { width: 100%; border-right: none; flex: 1 1 auto; padding: 1.5rem clamp(3.8rem, 16vw, 6rem) 1.5rem var(--gutter); }
  .menu-card .mc-title { font-size: 1.7rem; }
  .menu-card p { font-size: 0.875rem; max-width: none; }
  .menu-card .mc-bg { opacity: 1; transform: none; }
  .menu-card .mc-shade { opacity: 1; background: linear-gradient(90deg, rgba(var(--rgb-black),0.97) 35%, rgba(var(--rgb-black),0.87) 100%); }
  .overlay-mark { width: 160vw; right: -55%; opacity: 0.05; }
  .subhero.subhero-compact { padding-top: 9.5rem; }
  .page-title-plain { padding-top: calc(64px + 1.2rem + 2.6rem); }
  .admin-bar .page-title-plain { padding-top: calc(64px + 1.2rem + 46px + 2.6rem); }
}


@media (max-width: 782px) {
  .admin-bar .nav { top: 46px; }
}

@media (max-width: 760px) {
  .partner-logos img.logo-sized { width: min(var(--logo-width-mobile, var(--logo-width)), 100%); }
}

@media (max-width: 600px) {
  /* Mobil liegt der Text über dem größten Teil des Bildes */
  .hero::after {
    background: linear-gradient(180deg, rgba(var(--rgb-black),0.4) 0%, rgba(var(--rgb-black),0.52) 36%, rgba(var(--rgb-black),0.62) 70%, rgba(var(--rgb-black),0.8) 100%);
  }
  .admin-bar .nav { top: 0; } /* die Adminleiste scrollt hier mit */
  .admin-bar .hero-crest, .admin-bar.scrolled .hero-crest { top: 0.9rem; }
}

@media (max-width: 560px) {
  .mosaic, .mosaic-b { grid-template-columns: 1fr; }
  .tile { height: clamp(200px, 55vw, 260px); }
  .tile::after { opacity: 1; }
  .tile-label p { max-height: none; opacity: 1; transform: none; margin-top: 0.4rem; }
  /* Spielerkarten mobil: eine Spalte, aber deutlich niedriger als das
     Hochformat am Desktop. Fotos bleiben oben angeschnitten, damit
     Gesichter sichtbar bleiben. */
  .players-grid, .players-grid[data-n="2"], .players-grid[data-n="4"] { grid-template-columns: 1fr; }
  .player { aspect-ratio: 1 / 1; }
  .player figure:not(.player-placeholder) img { object-position: center 25%; }
  .player figure.player-placeholder img { width: 36%; }
  .choices, .choices[data-n="4"], .choices[data-n="2"] { grid-template-columns: 1fr; gap: 0.7rem; }
  /* Einspaltig flache Karten, damit der Weiter-Button in Reichweite bleibt */
  .choice-face { min-height: 0; flex-direction: row; align-items: center; justify-content: flex-start; gap: 1rem; padding: 1.05rem 1.2rem; }
  .choice-face .choice-icon { width: 30px; height: 30px; flex: none; }
  .vorteile, .vorteile[data-n="3"], .vorteile[data-n="2"] { grid-template-columns: 1fr; }
  .fs-steps { display: none; }
  .fs-count:not([hidden]) { display: block; flex: 1 1 auto; }
  .step-send { flex-direction: column; align-items: stretch; }
  .hero-actions { flex-direction: column; gap: 1rem; }
  .hero-actions .btn { min-width: 240px; }
  .journey-actions .btn { width: 100%; }
}

@media (max-width: 540px) {
  .section-shortcuts, .section-shortcuts[data-n="2"], .section-shortcuts[data-n="3"] { grid-template-columns: 1fr; }
  .section-shortcuts .shortcut, .section-shortcuts .shortcut:nth-child(even) { padding: 1.2rem 0; border-right: 0; }
  .shortcut-title { font-size: 1.4rem; margin-bottom: 0.5rem; }
  .shortcut-description { max-width: 48ch; }
}

/* ── 22. Hover: Textlinks unterstreichen ────────── */
/* Alle Textlinks bekommen beim Überfahren eine Unterstreichung.
   Buttons, Kacheln, Menükarten und Logos sind ausgenommen. Links, die
   ohnehin eine Linie als Rahmen tragen, tauschen sie gegen die
   Unterstreichung, damit keine Doppellinie entsteht. */
a:not(.btn, .menu-card, .tile, .hero-arrow, .nav-brand, .fs-step):hover {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}
.partner-logos a:hover { text-decoration: none; }
.prose a:hover, .detail-main a:hover, .cta-note a:hover, .card-place a:hover,
.consent-text a:hover, .journey-facts dd a:hover, .news-players a:hover,
.step-done a:hover, .partner-wordmark:hover, .detail-main li a:hover {
  border-bottom-color: transparent;
}