/* =========================================================
   Die goldene Mitte – EMP-Beckenbodenstudio Würzburg
   Design System
   ========================================================= */

/* Barlow wird lokal geladen – siehe assets/fonts.css (dgm-fonts). */

/* =========================================================
   Palette laut Kunden-PDF „Farbschema und Schrift“.
   Markenfarben (Flyer):
     Gold      #d6b800   Champagner  #f7e9b8
     Hellgrau  #bac3c3   Mittelgrau  #8b9696
     Onyx      #29323b   Schwarz     #000000

   Zwei Regeln aus dem PDF, die im Code sichtbar bleiben müssen:
   1. Grau ist KEIN Sektions-Hintergrund. Das graue Banner ist im
      PDF rot durchgestrichen – Gold auf #bac3c3 ergibt 1,09:1 und
      ist faktisch unsichtbar. Grau daher nur für Linien, Rahmen
      und Platzhalter, nie als Fläche hinter Logo oder Gold.
   2. Der Button ist überall gold mit Onyx-Text (6,64:1).

   Rollen im System:
     --primary = Onyx  -> Text, Links, Fokus, Rahmen (lesbar)
     --accent  = Gold  -> Flächen, Marken-Elemente, Buttons
   ========================================================= */
:root {
  /* --- Marken-Grundtöne (1:1 aus dem Flyer) --- */
  --gold:            #d6b800;
  --gold-deep:       #c3a200;     /* Hover */
  --champagne:       #f7e9b8;
  --onyx:            #29323b;
  --grey:            #bac3c3;     /* nur Linien/Platzhalter */
  --grey-deep:       #8b9696;     /* nur Linien/Platzhalter */

  /* --- Flächen: helle Basis (Weiß + Champagner), wie vom Kunden gewünscht --- */
  --bg:              #fefdfb;     /* Seitenhintergrund */
  --bg-alt:          #fbf4da;     /* Champagner, aufgehellt für große Flächen */
  --surface:         #ffffff;     /* Karten – reines Weiß */

  /* --- Text: Onyx-Skala (kühl, wie im Flyer) --- */
  --text:            #29323b;     /* Onyx            13,01:1 auf Weiß */
  --text-soft:       #4e565f;     /* Fließtext        7,45:1 */
  --text-mute:       #6c767d;     /* Bildunterschrift 4,62:1 */

  /* --- Headline-Farbe -----------------------------------
     Kundenentscheidung: Headlines gold, exakt wie im Flyer.
     Gold auf Weiß erreicht nur 1,96:1 (WCAG AA verlangt 3:1
     für große Schrift) – bewusst so abgenommen.
     Umstellen auf die kontraststarke Variante = diese eine
     Zeile auf var(--text) setzen. Auf dunklen Sektionen
     bleibt Gold ohnehin bei 9,2–10,7:1. */
  --headline:        var(--gold);

  /* --- Primary = Onyx: alles, was Text/Rahmen/Fokus ist --- */
  --primary:         #29323b;
  --primary-deep:    #19232c;     /* Hover */
  --primary-ghost:   #29323b17;
  --primary-tint:    #fbf4da;     /* Champagner-Wash */
  --primary-tint-2:  #f7e9b8;     /* voller Champagner */
  --primary-contrast: #fcfcf9;    /* heller Text auf Onyx */

  /* --- Accent = Gold: Flächen, Marken-Elemente, Buttons --- */
  --accent:          var(--gold);
  --accent-deep:     var(--gold-deep);
  --accent-ghost:    #d6b80029;
  --accent-contrast: #29323b;     /* Onyx-Text auf Gold – 6,64:1 */

  --line:            #29323b24;
  --line-soft:       #29323b14;

  /* --- Type: Barlow – Bold für Headlines, Regular für Copy,
         Italic für Auszeichnungen, Bildunterschriften, Zitate --- */
  --font:    'Barlow', system-ui, -apple-system, sans-serif;
  --display: 'Barlow', system-ui, -apple-system, sans-serif;

  /* --- Schriftgrößen -------------------------------------
     SECHS Größen im ganzen Theme – mehr gibt es nicht. Keine
     Komponente setzt eigene rem-/px-Werte.

       --fs-h1 … --fs-h4   Abstufung für alle Überschriften
       --fs-body           ALLE Fließtexte und normalen Texte

     Die Stufen sind FLUID (clamp): der obere Wert ist exakt die
     Desktop-Größe von vorher, der untere die Mobil-Größe. Dazwischen
     wird linear über die Viewport-Breite interpoliert. Damit skaliert
     die ganze Seite mit – vorher stand die h1 auch auf 320px noch bei
     4,3rem (68,8px) und lief seitlich aus dem Bild. Weil alles auf
     diesen sechs Tokens sitzt, ziehen Hero, Karten & Co. automatisch mit.
     (--fs-body behält seine eigene, dokumentierte Stufe unten.) */
  --fs-h1:    clamp(2.2rem,  1.30rem + 4.50vw, 4.3rem);
  --fs-h2:    clamp(1.75rem, 1.15rem + 3.00vw, 3rem);
  --fs-h3:    clamp(1.45rem, 1.27rem + 0.90vw, 1.8rem);
  --fs-h4:    clamp(1.2rem,  1.13rem + 0.35vw, 1.35rem);
  --fs-h5:    clamp(1.15rem, 1.08rem + 0.35vw, 1.3rem);
  --fs-h6:    clamp(1rem,    0.90rem + 0.50vw, 1.2rem);
  --fs-body:  1.1rem;

  /* Rollen-Namen – reine Aliase auf die sechs Größen oben, damit
     der Aufrufort lesbar bleibt. Sie fügen KEINE Stufe hinzu:
       h5/h6        unterscheiden sich über Gewicht und Versalien
       --fs-display große Zahlen (Kennzahlen, Preis) auf h3-Stufe  */
  --fs-display: var(--fs-h3);

  /* --- Spacing / shape --- */
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 24px;
  --r-xl: 36px;
  --shadow-sm: 0 1px 2px #29323b0d, 0 2px 8px #29323b0a;
  --shadow-md: 0 4px 14px #29323b12, 0 12px 34px #29323b0f;
  --shadow-lg: 0 10px 30px #29323b17, 0 30px 70px #29323b1a;

  --maxw: 1600px;
  --gutter: clamp(20px, 5vw, 56px);
}

/* --- Reset --- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  font-family: var(--font);
  color: var(--text-soft);
  background: var(--bg);
  line-height: 1.6;
  font-size: var(--fs-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, svg, video { display: block; max-width: 100%; }
/* <picture> ist reine Formatauswahl (AVIF/WebP) und soll im Layout gar nicht
   vorkommen: display:contents löst den Kasten auf, das <img> bleibt Flex-/
   Grid-Item und trägt weiter alle Klassenregeln. Ausnahmen, wo der äußere
   Kasten gebraucht wird, stehen in wordpress.css (Slider-Folien). */
picture { display: contents; }
/* <source> steht im UA-Stylesheet NICHT auf display:none. Sobald das
   <picture> per display:contents aufgelöst ist, werden die Format-Zeilen
   selbst zu Flex-/Grid-Items und belegen echte Zellen – im .split-Hero
   schob das die zwei <source> (AVIF/WebP) das Bild in eine zweite Zeile
   unter den Text. Sie dürfen im Layout nie vorkommen. */
picture > source { display: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }
ul { list-style: none; padding: 0; }

/* --- Typography ---------------------------------------
   Barlow Bold für Headlines, Barlow Regular für Copytext,
   Italic für Auszeichnungen, Bildunterschriften und Zitate. */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--display);
  color: var(--text);
  font-weight: 700;          /* Barlow Bold */
  line-height: 1.1;
  letter-spacing: -0.015em;  /* Barlow Bold läuft weit – leicht zusammenziehen */
  text-wrap: balance;
}
/* Die grafischen Headlines tragen die Markenfarbe (Flyer).
   h3–h6 sind Zwischen-/Label-Ebene und bleiben Onyx – in Gold
   wären sie bei ihrer Größe nicht mehr lesbar. */
h1, h2 { color: var(--headline); }
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); }
h5 { font-size: var(--fs-h5); }
/* h6 ist die Label-Ebene der Skala: klein, versal, gesperrt. */
h6 {
  font-size: var(--fs-h6);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1.3;
}
p  { text-wrap: pretty; }
.lead { font-size: var(--fs-body); color: var(--text-soft); line-height: 1.65; }

strong { color: var(--text); font-weight: 700; }
/* Betonung auf dunklen Flächen -------------------------------------
   Im Fließtext ist `strong` dunkler als der Copytext (var(--text) auf
   var(--text-soft)). Die dunklen Flächen nutzen var(--text) aber als
   HINTERGRUND – fetter Text stand dort auf 1,00:1 und war unsichtbar.
   Hier kehrt sich die Betonung um: heller als der Copytext, analog zu
   h3/h4 in .section-dark. Diese Flächen sind in beiden Modi dunkel. */
.section-dark strong,
.site-footer strong,
.hero-content strong,
.cta-band strong { color: var(--bg); }
em, i { font-style: italic; }

/* Auszeichnung / Bildunterschrift – Italic-Schnitt laut Kundenvorgabe */
figcaption, .caption, .wp-element-caption, .wp-block-image figcaption {
  font-style: italic;
  color: var(--text-mute);
  line-height: 1.5;
  margin-top: 10px;
}
.marked { font-style: italic; color: var(--text); }

/* eyebrow / kicker */
.eyebrow {
  display: inline-flex; align-items: center; gap: 0.55em;
  font-family: var(--font);
  font-weight: 700;
  font-size: var(--fs-body);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--primary);
}
.eyebrow::before {
  content: ""; width: 26px; height: 1.5px; background: var(--accent);
}
.eyebrow.center { justify-content: center; }

/* --- Layout --- */
.wrap { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.wrap-narrow { max-width: 800px; margin-inline: auto; padding-inline: var(--gutter); }
section { padding-block: clamp(64px, 9vw, 120px); }
.section-tint { background: var(--bg-alt); }
.section-primary { background: var(--primary-tint); }
/* Dunkle Sektion = das schwarze Banner aus dem Flyer:
   Gold-Headline (10,7:1), heller Copytext. */
.section-dark { background: var(--text); color: #d9dee5; }
.section-dark h1, .section-dark h2 { color: var(--gold); }
.section-dark h3, .section-dark h4 { color: var(--bg); }

.stack-sm > * + * { margin-top: 0.7rem; }
.stack > * + * { margin-top: 1.4rem; }
.stack-lg > * + * { margin-top: 2.4rem; }

.center { text-align: center; }
.measure { max-width: 60ch; }
.measure-sm { max-width: 46ch; }

/* --- Buttons --- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.6em;
  font-family: var(--font); font-weight: 700; font-size: var(--fs-body);
  padding: 0.95em 1.6em; border-radius: 999px;
  transition: transform .18s ease, background .18s ease, box-shadow .18s ease, color .18s ease;
  text-align: center; white-space: nowrap;
}
/* flex: none – in engen Spalten schrumpfte sonst das Icon auf 0 (der Text
   ist nowrap und gibt nicht nach) und der Button stand ohne Symbol da. */
.btn svg { width: 1.1em; height: 1.1em; flex: none; }

/* Der Button aus dem Flyer: Gold-Fläche, Onyx-Text (6,64:1), feiner
   dunkler Ring. Er sitzt so auf Weiß, Champagner UND Schwarz.
   .btn-accent ist dieselbe Optik – der Flyer kennt nur einen Button;
   das Alias hält die bestehende Markup-Nutzung gültig. */
.btn-primary, .btn-accent {
  background: var(--accent);
  color: var(--accent-contrast);
  box-shadow: inset 0 0 0 1.5px var(--accent-contrast), var(--shadow-sm);
}
.btn-primary:hover, .btn-accent:hover {
  background: var(--accent-deep);
  transform: translateY(-2px);
  box-shadow: inset 0 0 0 1.5px var(--accent-contrast), var(--shadow-md);
}
.btn-ghost { background: transparent; color: var(--text); box-shadow: inset 0 0 0 1.5px var(--line); }
.btn-ghost:hover { box-shadow: inset 0 0 0 1.5px var(--primary); color: var(--primary); transform: translateY(-2px); }
.btn-light { background: var(--bg); color: var(--text); }
.btn-light:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
/* Größer wirkt der Button über die Polsterung, nicht über eine
   eigene Schriftgröße – Button-Text bleibt Fließtextgröße. */
.btn-lg { padding: 1.1em 2em; }
.btn-block { width: 100%; }

.link-arrow {
  display: inline-flex; align-items: center; gap: 0.45em;
  font-weight: 700; color: var(--primary); font-size: var(--fs-body);
}
.link-arrow svg { width: 1.05em; height: 1.05em; transition: transform .2s ease; }
.link-arrow:hover svg { transform: translateX(4px); }
/* Auf dunklen Flächen ist der Standard-Onyx unsichtbar – dort trägt der
   Pfeil-Link das Flyer-Gold (z. B. „Wie EMP genau funktioniert"). */
.section-dark .link-arrow,
.hero-content .link-arrow { color: var(--accent); }

/* --- Logo -----------------------------------------------
   Zusammengesetzt aus dem Original-Logo des Kunden:
     logo-mark.png        – Lotus-Marke   (Original, Gold)
     logo-schriftzug.png  – Handschrift   (Original, Gold)
     Subline              – HTML-Text in Barlow Bold

   Warum die Subline kein Bild mehr ist: Im Original-Lockup ist sie
   nur 13,8 % der Bildhöhe. Bei Header-Größe wären das ~8px Versalhöhe –
   unlesbar. Lesbar würde sie erst bei 88px Logohöhe, was einen ~110px
   hohen Header erzwingt. Als Text ist sie bei jeder Größe gestochen scharf.

   Zweiter Gewinn: Marke und Schriftzug sind reines Gold und tragen auf
   hellem WIE dunklem Grund. Nur die schwarze Subline war das Problem –
   als Text erbt sie ihre Farbe per currentColor vom Kontext. Damit
   entfällt die früher nötige invertierte Zweitdatei komplett.

   Der Goldton stammt aus der Logodatei und wird bewusst NICHT auf das
   Flyer-Gold umgefärbt. */
.logo {
  display: inline-flex; align-items: center; gap: 12px;
  color: var(--text);   /* Quelle für currentColor der Subline */
}
.logo-mark { height: 52px; width: auto; flex: none; }
.logo-lockup { display: grid; gap: 4px; }
.logo-script { height: 30px; width: auto; }
.logo-sub {
  font-family: var(--font);
  font-weight: 700;
  font-size: var(--fs-body);
  line-height: 1;
  letter-spacing: 0.01em;
  color: currentColor;
  white-space: nowrap;
}

/* Dunkle Flächen: nur die Textfarbe umschalten – die Gold-Grafiken
   funktionieren unverändert. */
.footer-logo { color: var(--bg); }
.footer-logo .logo-mark { height: 62px; }
.footer-logo .logo-script { height: 36px; }
.footer-logo .logo-sub { font-size: var(--fs-body); }
:root[data-theme="dark"] .footer-logo { color: var(--text); }

/* Auf schmalen Geräten teilt sich der Header den Platz mit dem
   Probetermin-Button und dem Menü-Icon. Die Subline ist das mit Abstand
   breiteste Element des Logos – sie entfällt hier, Marke und Schriftzug
   tragen die Marke weiterhin. Im Footer ist Platz, dort bleibt sie. */
@media (max-width: 560px) {
  .nav { gap: 12px; height: 64px; }
  .logo { gap: 8px; }
  .logo-mark { height: 38px; }
  .logo-script { height: 21px; }
  .site-header .logo-sub,
  .mobile-menu .logo-sub { display: none; }

  /* Der „Probetermin"-Button entfällt hier – nicht ersatzlos: Auf dieser
     Breite steht die fixierte Mobil-CTA-Leiste („Anrufen / Termin buchen")
     dauerhaft am unteren Rand, der Hero trägt denselben Button nochmals.
     Im Header konkurrierte er mit Logo und Menü-Icon um ~280px Gesamt-
     breite und quetschte den Logo-Schriftzug auf null. */
  .nav-cta .btn-primary { display: none; }

  /* Logo-Grafiken geben nicht mehr nach – sie waren die einzigen
     schrumpffähigen Elemente der Leiste und verschwanden zuerst. */
  .logo { flex: none; }
  .logo-mark, .logo-script { flex: none; }
}

/* --- Header / Nav --- */
.site-header {
  position: sticky; top: 0; z-index: 70;
  background: #f7fbffd1;
  backdrop-filter: blur(14px) saturate(1.2);
  border-bottom: 1px solid transparent;
  transition: border-color .3s ease, box-shadow .3s ease, background .3s ease;
}
.site-header.scrolled { border-bottom-color: var(--line-soft); box-shadow: var(--shadow-sm); }
.nav { display: flex; align-items: center; justify-content: space-between; height: 76px; gap: 24px; }
.nav-links { display: flex; align-items: center; gap: 4px; }
.nav-links a {
  font-weight: 600; font-size: var(--fs-body); color: var(--text-soft);
  padding: 0.5em 0.85em; border-radius: 999px; transition: color .15s, background .15s;
  position: relative; white-space: nowrap;
}
.nav-links a:hover { color: var(--text); background: var(--primary-ghost); }
.nav-links a.active { color: var(--primary); }
.nav-cta { display: flex; align-items: center; gap: 12px; }

/* dropdown */
.has-sub { position: relative; }
.subnav {
  position: absolute; top: calc(100% + 8px); left: 50%; transform: translateX(-50%) translateY(6px);
  background: var(--surface); border-radius: var(--r-md); box-shadow: var(--shadow-lg);
  border: 1px solid var(--line-soft);
  padding: 10px; min-width: 290px; display: grid; gap: 2px;
  opacity: 0; visibility: hidden; transition: all .2s ease; z-index: 80;
}
.has-sub:hover .subnav { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.subnav a {
  display: grid; gap: 1px; padding: 0.6em 0.8em; border-radius: var(--r-sm); width: 100%;
}
.subnav a:hover { background: var(--primary-ghost); }
.subnav a b { font-family: var(--font); font-weight: 700; color: var(--text); font-size: var(--fs-body); }
.subnav a small { color: var(--text-mute); font-size: var(--fs-body); }

/* Gruppiertes „Leistungen"-Dropdown: Rubriken „Training" & „Beschwerdebilder".
   Sind Gruppen vorhanden, legt sich das Dropdown in Spalten (moderne :has()-
   Regel); ohne :has()-Unterstützung stapeln die Gruppen schlicht untereinander. */
.subnav-group { display: grid; gap: 2px; align-content: start; }
.subnav-group-label {
  font-size: var(--fs-body); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--accent-deep); padding: 10px 0.8em 4px;
}
.subnav:has(.subnav-group) { display: flex; gap: 12px; min-width: 540px; }
.subnav:has(.subnav-group) .subnav-group { flex: 1; min-width: 210px; }

/* Mobile: Rubrik-Überschrift zwischen den Menüpunkten. */
.mobile-menu nav .mobile-group {
  font-size: var(--fs-body); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--accent-deep); padding: 18px 0 6px;
}
.mobile-menu nav a.sub-2 { padding-left: 32px; font-size: var(--fs-body); }

.nav-toggle { display: none; width: 44px; height: 44px; border-radius: 50%; align-items: center; justify-content: center; }
.nav-toggle svg { width: 26px; height: 26px; stroke: var(--text); }

/* mobile drawer */
.mobile-menu {
  position: fixed; inset: 0; z-index: 90; background: var(--bg);
  transform: translateX(100%);
  /* visibility nimmt die geschlossene Schublade aus der Tab-Reihenfolge –
     nur verschoben blieben ihre Links fokussierbar, und die Tastatur-
     navigation sprang mitten auf der Seite in ein unsichtbares Menü. */
  visibility: hidden;
  transition: transform .35s cubic-bezier(.4,0,.2,1), visibility .35s;
  display: flex; flex-direction: column; overflow-y: auto;
  overscroll-behavior: contain;
  padding: 24px var(--gutter) calc(40px + env(safe-area-inset-bottom, 0px));
}
.mobile-menu.open { transform: translateX(0); visibility: visible; }
/* Gegenstück zum Scroll-Lock in site.js (wireDrawer). */
body.nav-open { overflow: hidden; }
.mobile-menu-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 28px; }
.mobile-menu nav { display: grid; gap: 2px; }
.mobile-menu nav a { font-family: var(--display); font-weight: 700; font-size: var(--fs-h3); color: var(--text); padding: 0.5em 0; border-bottom: 1px solid var(--line-soft); }
.mobile-menu nav a.sub { font-family: var(--font); font-size: var(--fs-body); padding-left: 16px; color: var(--text-soft); }
.mobile-menu .btn { margin-top: 24px; }

/* --- Footer --- */
.site-footer { background: var(--text); color: #b2b8bf; padding-block: clamp(56px, 7vw, 84px) 32px; }
/* Die Spaltentitel im Footer sind Versal-Labels – sie liegen deshalb
   auf der h6-Stufe der Skala, nicht auf ihrer h4-Ebene im Markup. */
.site-footer h4 { color: var(--bg); font-family: var(--font); font-weight: 700; font-size: var(--fs-h6); letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 18px; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 40px; }
/* Der Logo-Link ist ausgenommen: display:inline-block würde sein
   inline-flex überschreiben (höhere Spezifität) und die Logo-Bilder
   untereinander stapeln lassen. */
.site-footer a:not(.logo) { color: #b2b8bf; transition: color .15s; display: inline-block; padding: 3px 0; }
.site-footer a:not(.logo):hover { color: var(--accent); }
.footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; margin-top: 56px; padding-top: 26px; border-top: 1px solid #d9dee51f; font-size: var(--fs-body); color: #81878d; }
.footer-legal { display: flex; gap: 20px; flex-wrap: wrap; }

/* --- Hero --- */
.hero { position: relative; overflow: hidden; padding-block: 0; }
.hero-media {
  position: relative; min-height: clamp(560px, 86vh, 860px);
  display: flex; align-items: center;
}
.hero-video-ph {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, #20272f26 0%, #20272f8c 78%, #182028b2 100%),
    /* Von --onyx ableiten, nicht von --primary: im Dark Mode ist --primary
       Gold, und gold-getöntes Dunkel kippt ins Olivgrüne – die eine Farb-
       richtung, die für diese Marke ausgeschlossen ist. */
    repeating-linear-gradient(135deg, #526679 0 22px, #445a70 22px 44px);
}
/* Hintergrundvideo (dgm/home-hero): füllt die Fläche, darüber ein dunkler
   Verlauf für die Lesbarkeit der Gold-Headline. */
.hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.hero-video-overlay {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, #20272f40 0%, #20272f8c 72%, #182028bf 100%);
}
.hero-video-tag { z-index: 2; }
.hero-video-tag {
  position: absolute; top: 22px; left: 50%; transform: translateX(-50%);
  font-family: var(--font); font-size: var(--fs-body); letter-spacing: 0.18em; text-transform: uppercase;
  color: #f0f6fcd9; background: #1f273066;
  padding: 7px 16px; border-radius: 999px; border: 1px solid #f0f6fc40;
  display: flex; align-items: center; gap: 8px; backdrop-filter: blur(4px);
}
.hero-video-tag .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
/* Hero-Inhalt horizontal & vertikal zentriert (Video-Fläche zentriert per
   .hero-media align-items:center, der Play-Button sitzt unten). */
.hero-content { position: relative; z-index: 2; padding-block: clamp(96px, 12vh, 140px) clamp(96px, 12vh, 140px); color: var(--bg); text-align: center; }
.hero-content .stack { max-width: 760px; margin-inline: auto; }
/* Hero liegt über dem dunklen Bild-Overlay – die Gold-Headline
   trägt hier (analog zum schwarzen Banner im Flyer). */
.hero-content h1 { color: var(--gold); max-width: 20ch; margin-inline: auto; }
.hero-content .lead { color: #e3e8ef; max-width: 56ch; margin-inline: auto; }
.hero-content .eyebrow { color: #e2e9cb; justify-content: center; }
.hero-content .eyebrow::before { background: var(--accent); }
/* Etwas mehr Luft zwischen Lead-Text und den Buttons (nur Startseiten-Hero). */
.hero-content .hero-actions { margin-top: clamp(28px, 4vw, 48px); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 8px; }
/* Gleiche Luft über dem Probetermin-Button auch im Seiten-Hero (dgm/hero). */
.page-hero .hero-actions { margin-top: clamp(28px, 4vw, 48px); }
/* Hero mit Geschlechter-Einstieg: "Für Frauen"/"Für Männer" nebeneinander,
   darunter der Probetermin-Button – zentriert. */
.hero-actions-stacked { flex-direction: column; align-items: center; gap: 14px; }
.hero-actions-row { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }

/* trust strip */
.trust-strip { display: flex; flex-wrap: wrap; gap: clamp(20px, 5vw, 56px); align-items: center; justify-content: center; }
.trust-item { display: flex; align-items: center; gap: 12px; }
.trust-item .ti-num { font-family: var(--display); font-weight: 700; font-size: var(--fs-display); color: var(--headline); line-height: 1; }
.trust-item .ti-lbl { font-size: var(--fs-body); color: var(--text-mute); max-width: 18ch; line-height: 1.3; }

/* --- Cards --- */
.grid { display: grid; gap: clamp(18px, 2.4vw, 28px); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

.card {
  background: var(--surface); border-radius: var(--r-lg); padding: clamp(22px, 2.6vw, 32px);
  border: 1px solid var(--line-soft); box-shadow: var(--shadow-sm);
  transition: transform .25s ease, box-shadow .25s ease; height: 100%;
}
.card.hover:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); }
.card-icon {
  width: 52px; height: 52px; border-radius: 14px; background: var(--primary-tint);
  display: grid; place-items: center; margin-bottom: 18px; color: var(--primary);
}
.card-icon svg { width: 26px; height: 26px; stroke: var(--primary); fill: none; stroke-width: 1.6; }
.card-icon.accent { background: var(--accent-ghost); color: var(--accent-deep); }
.card-icon.accent svg { stroke: var(--accent-deep); }

/* Flächen-Icons des Kunden (Material Symbols): gefüllt statt Kontur.
   Farbe kommt über currentColor aus dem umgebenden Element. */
svg.icon-solid { fill: currentColor; stroke: none; }
.card-icon svg.icon-solid,
.info-ic svg.icon-solid,
.checklist .ck svg.icon-solid,
.nav-toggle svg.icon-solid,
.modal-close svg.icon-solid { fill: currentColor; stroke: none; stroke-width: 0; }
.card-icon svg.icon-solid { width: 28px; height: 28px; }

/* Die Kunden-Icons in den Karten bleiben grundsätzlich schwarz – auch in
   der Akzent-Variante, die sonst das Flyer-Gold über currentColor erbt. */
.card-icon svg.icon-solid,
.card-icon.accent svg.icon-solid { fill: #000; }
:root[data-theme="dark"] .card-icon svg.icon-solid,
:root[data-theme="dark"] .card-icon.accent svg.icon-solid { fill: var(--text); }

.card h3 { margin-bottom: 8px; }
.card .link-arrow { margin-top: 16px; }

/* target / indication cards */
.target-card { position: relative; overflow: hidden; display: flex; flex-direction: column; }
.target-card .tc-tag { font-size: var(--fs-body); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent-deep); }

/* numbered steps */
.steps { counter-reset: step; display: grid; gap: 4px; }
.step { display: grid; grid-template-columns: auto 1fr; gap: 22px; padding: 26px 0; border-bottom: 1px solid var(--line-soft); align-items: start; }
.step:last-child { border-bottom: none; }
.step-num { font-family: var(--display); font-weight: 700; font-size: var(--fs-h3); color: var(--accent-deep); width: 54px; height: 54px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--accent); display: grid; place-items: center; flex: none; }
.step h3 { margin-bottom: 4px; }

/* --- Image placeholders --- */
.ph {
  position: relative; border-radius: var(--r-lg); overflow: hidden;
  background:
    repeating-linear-gradient(135deg, #e1e9f1 0 16px, #d7e1eb 16px 32px);
  display: grid; place-items: center; color: var(--primary); min-height: 240px;
}
.ph.accent {
  background: repeating-linear-gradient(135deg, #dee9f5 0 16px, #d3e2f1 16px 32px);
  color: var(--accent-deep);
}
.ph-label {
  font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: var(--fs-body); letter-spacing: 0.04em;
  background: #f9fcffc7; padding: 8px 14px; border-radius: 999px;
  display: inline-flex; align-items: center; gap: 8px; box-shadow: var(--shadow-sm);
}
/* Leeres Platzhalter-Label (kein Text gepflegt) samt ▦-Symbol ausblenden. */
.ph-label:empty { display: none; }
/* Formatklassen geben die Fläche selbst vor – die 240px-Mindesthöhe oben
   gilt nur für Platzhalter OHNE festes Seitenverhältnis. Sie muss hier
   zurückgesetzt werden: Aus min-height + aspect-ratio leitet der Browser
   eine automatische MINDESTBREITE ab (240px × 16/10 = 384px). In der
   einspaltigen Handy-Ansicht sprengte der Platzhalter damit die Spalte
   und ragte rechts aus dem Bild. */
.ph-portrait, .ph-wide, .ph-square { min-height: 0; min-width: 0; }
.ph-portrait { aspect-ratio: 3/4; }
.ph-wide { aspect-ratio: 16/10; }
.ph-square { aspect-ratio: 1/1; }

/* split layout */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
.split.reverse > :first-child { order: 2; }

/* Mitlaufende Textspalte (z. B. neben den Prozess-Schritten).
   Sinnvoll nur, solange .split zwei Spalten hat. Unter 760px stapelt
   sich das Layout – dort bliebe der Block sonst über dem Inhalt kleben,
   an dem man vorbeiscrollt. Das Abschalten passiert im Media Query unten. */
.sticky-col { position: sticky; top: 100px; align-self: start; }

/* feature list with checks ------------------------------------------
   Kundenvorgabe: klare Häkchen (kein Kreis-Badge, das wie eine „Ellipse"
   wirkte) und generell im Goldton – außer auf goldener Fläche, wo das
   Häkchen sonst verschwände (siehe .on-gold-Ausnahme). */
.checklist { display: grid; gap: 14px; }
.checklist li { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: start; }
.checklist .ck { width: 24px; height: 24px; display: grid; place-items: center; flex: none; margin-top: 1px; }
.checklist .ck svg { width: 22px; height: 22px; stroke: var(--accent); stroke-width: 3; fill: none; }
/* Ausnahme: Häkchen auf goldenem Grund werden onyx, sonst 1:1 unsichtbar. */
.on-gold .checklist .ck svg,
.checklist.on-gold .ck svg { stroke: var(--accent-contrast); }
.checklist b { color: var(--text); }

/* --- FAQ accordion --- */
.faq-list { display: grid; gap: 0; max-width: 820px; margin-inline: auto; }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-q { display: flex; align-items: center; justify-content: space-between; gap: 20px; width: 100%; text-align: left; padding: 26px 4px; font-family: var(--display); font-weight: 700; font-size: var(--fs-h4); color: var(--text); }
.faq-icon { width: 30px; height: 30px; flex: none; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--line); display: grid; place-items: center; transition: background .2s, box-shadow .2s; position: relative; }
.faq-icon::before, .faq-icon::after { content: ""; position: absolute; background: var(--text); border-radius: 2px; transition: transform .25s ease, background .2s; }
.faq-icon::before { width: 13px; height: 2px; }
.faq-icon::after { width: 2px; height: 13px; }
.faq-item.open .faq-icon { background: var(--primary); box-shadow: none; }
.faq-item.open .faq-icon::before, .faq-item.open .faq-icon::after { background: var(--bg); }
.faq-item.open .faq-icon::after { transform: rotate(90deg); opacity: 0; }
.faq-a { overflow: hidden; max-height: 0; transition: max-height .35s ease; }
.faq-a-inner { padding: 0 4px 28px; max-width: 70ch; color: var(--text-soft); }
/* Antworten dürfen Absätze und Aufzählungen enthalten (z. B. die
   Kontraindikationen-Liste). ul ist global list-style:none – hier zurück. */
.faq-a-inner > * + * { margin-top: 12px; }
.faq-a-inner ul { list-style: disc; padding-left: 1.35em; display: grid; gap: 6px; }

/* Kategorie-Reiter über einer FAQ-Liste (dgm/faq mit „tabs").
   Die Reiter filtern dieselbe Liste – jede Frage steht nur einmal im Markup.
   Sortiert wird über `order`: Fragen mit Rang stehen vor allen anderen. */
.faq-tabs { max-width: 900px; margin-inline: auto; }
.faq-tabnav { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-bottom: clamp(28px, 4vw, 44px); }
.faq-tab {
  padding: 10px 20px; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--line);
  font-family: var(--font); font-size: var(--fs-body); font-weight: 600;
  color: var(--text-soft); cursor: pointer;
  transition: color .2s, border-color .2s, background .2s, transform .2s;
}
.faq-tab:hover { color: var(--text); border-color: var(--primary); transform: translateY(-2px); }
.faq-tab.is-active { background: var(--primary); border-color: var(--primary); color: var(--primary-contrast); }
/* Grundrang für Fragen ohne eigenen Rang – sonst stünden sie (order 0) vor
   den bewusst nach vorn gezogenen. */
.faq-tabs .faq-item { order: 100; }
.faq-item[hidden] { display: none; }

/* --- Blog cards --- */
.post-card { background: var(--surface); border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--line-soft); box-shadow: var(--shadow-sm); transition: transform .25s, box-shadow .25s; display: flex; flex-direction: column; }
.post-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); }
.post-card .ph { border-radius: 0; min-height: 200px; }
.post-body { padding: 24px; display: flex; flex-direction: column; flex: 1; }
.post-meta { font-size: var(--fs-body); letter-spacing: 0.06em; text-transform: uppercase; font-weight: 700; color: var(--accent-deep); margin-bottom: 10px; }
.post-card h3 { margin-bottom: 10px; }
.post-card p { margin-bottom: 16px; }
.post-card .link-arrow { margin-top: auto; }

/* --- Forms --- */
.form-grid { display: grid; gap: 18px; }
.field { display: grid; gap: 7px; }
.field label { font-weight: 700; font-size: var(--fs-body); color: var(--text); }
.field label .req { color: var(--accent-deep); }
.field input, .field textarea, .field select {
  font: inherit; font-size: var(--fs-body); padding: 0.85em 1em; border-radius: var(--r-md);
  border: 1.5px solid var(--line); background: var(--surface); color: var(--text); width: 100%;
  transition: border-color .15s, box-shadow .15s;
}
.field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 4px var(--primary-ghost); }
.field textarea { resize: vertical; min-height: 130px; }
.field.error input, .field.error textarea { border-color: #c53637; }
.field .err-msg { font-size: var(--fs-body); color: #b32228; display: none; }
.field.error .err-msg { display: block; }
.checkbox-row { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: start; }
.checkbox-row input { width: 20px; height: 20px; margin-top: 3px; accent-color: var(--primary); }
.checkbox-row label { font-weight: 400; font-size: var(--fs-body); color: var(--text-soft); }
.form-success { display: none; text-align: center; padding: 40px; background: var(--primary-tint); border-radius: var(--r-lg); }
.form-success.show { display: block; }

/* info rows */
.info-row { display: flex; gap: 16px; align-items: flex-start; padding: 18px 0; border-bottom: 1px solid var(--line-soft); }
.info-row:last-child { border-bottom: none; }
.info-ic { width: 44px; height: 44px; border-radius: 12px; background: var(--primary-tint); display: grid; place-items: center; flex: none; }
.info-ic svg { width: 22px; height: 22px; stroke: var(--primary); fill: none; stroke-width: 1.7; }
.info-row b { color: var(--text); display: block; }

/* --- CTA band --- */
.cta-band { background: var(--primary); color: var(--primary-contrast); border-radius: var(--r-xl); padding: clamp(40px, 6vw, 72px); position: relative; overflow: hidden; }
.cta-band h2 { color: var(--bg); }
.cta-band p { color: #dee9f5; }
.cta-band::after { content: ""; position: absolute; width: 380px; height: 380px; border-radius: 50%; right: -120px; top: -140px; box-shadow: inset 0 0 0 1.5px #f2fad44c; }
.cta-band::before { content: ""; position: absolute; width: 220px; height: 220px; border-radius: 50%; right: -40px; top: -50px; background: var(--accent-ghost); }

/* breadcrumb + page hero */
.page-hero { padding-top: clamp(48px, 7vw, 84px); padding-bottom: clamp(40px, 6vw, 64px); }
.breadcrumb { display: flex; gap: 8px; align-items: center; font-size: var(--fs-body); color: var(--text-mute); margin-bottom: 22px; flex-wrap: wrap; }
.breadcrumb a:hover { color: var(--primary); }
.breadcrumb span { opacity: 0.5; }

/* pill badges */
.pills { display: flex; flex-wrap: wrap; gap: 10px; }
.pill { display: inline-flex; align-items: center; gap: 7px; padding: 8px 16px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); font-size: var(--fs-body); font-weight: 600; color: var(--text-soft); }
.pill .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }

/* price */
.price-tag { display: flex; align-items: baseline; gap: 6px; }
.price-tag .amt { font-family: var(--display); font-weight: 700; font-size: var(--fs-display); color: var(--text); }
.price-tag .per { color: var(--text-mute); font-size: var(--fs-body); }

/* quote / testimonial – Italic-Schnitt laut Kundenvorgabe */
.quote { font-family: var(--display); font-style: italic; font-size: var(--fs-body); line-height: 1.4; color: var(--text); font-weight: 400; }
.quote-author { display: flex; align-items: center; gap: 14px; margin-top: 26px; }
.quote-author .ph { width: 54px; height: 54px; border-radius: 50%; min-height: 0; flex: none; }
.quote-author b { color: var(--text); display: block; }
.quote-author span { font-size: var(--fs-body); color: var(--text-mute); }
.stars { display: flex; gap: 3px; color: var(--accent); }
.stars svg { width: 18px; height: 18px; fill: var(--accent); }

/* --- Cookie banner --- */
.cookie-banner {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%) translateY(140%);
  z-index: 95; width: min(680px, calc(100vw - 32px));
  background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--shadow-lg);
  border: 1px solid var(--line-soft); padding: 26px;
  transition: transform .45s cubic-bezier(.16,1,.3,1);
}
.cookie-banner.show { transform: translateX(-50%) translateY(0); }
.cookie-banner h4 { font-family: var(--display); font-weight: 700; color: var(--text); margin-bottom: 8px; }
.cookie-banner p { font-size: var(--fs-body); }
.cookie-banner p a { color: var(--primary); text-decoration: underline; }
.cookie-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.cookie-actions .btn { padding: 0.7em 1.3em; font-size: var(--fs-body); }
.cookie-prefs { display: none; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line-soft); gap: 14px; }
.cookie-prefs.show { display: grid; }
.cookie-actions [data-cookie="save"] { display: none; }
.cookie-prefs.show ~ .cookie-actions [data-cookie="save"] { display: inline-flex; }
.cookie-toggle { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.cookie-toggle .ct-txt b { color: var(--text); font-size: var(--fs-body); }
.cookie-toggle .ct-txt p { font-size: var(--fs-body); }
.switch { width: 44px; height: 26px; border-radius: 999px; background: var(--line); position: relative; transition: background .2s; flex: none; }
.switch::after { content: ""; position: absolute; width: 20px; height: 20px; border-radius: 50%; background: #fff; top: 3px; left: 3px; transition: transform .2s; box-shadow: var(--shadow-sm); }
.switch.on { background: var(--primary); }
.switch.on::after { transform: translateX(18px); }
.switch.locked { background: var(--primary); opacity: 0.5; cursor: not-allowed; }

/* --- Sticky mobile CTA --- */
.mobile-cta {
  position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 60;
  display: none; gap: 10px; background: var(--surface); padding: 10px;
  border-radius: var(--r-lg); box-shadow: var(--shadow-lg); border: 1px solid var(--line-soft);
}
.mobile-cta .btn { flex: 1; padding: 0.85em 1em; }

/* --- Booking modal --- */
.modal-overlay { position: fixed; inset: 0; z-index: 100; background: #0f171f8c; backdrop-filter: blur(4px); display: grid; place-items: center; padding: 20px; opacity: 0; visibility: hidden; transition: opacity .25s; }
.modal-overlay.show { opacity: 1; visibility: visible; }
.modal { background: var(--bg); border-radius: var(--r-xl); width: min(720px, 100%); max-height: 90vh; overflow-y: auto; box-shadow: var(--shadow-lg); transform: translateY(20px) scale(.98); transition: transform .3s cubic-bezier(.16,1,.3,1); }
.modal-overlay.show .modal { transform: none; }
.modal-head { padding: 28px 32px; border-bottom: 1px solid var(--line-soft); display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.modal-head .eyebrow { margin-bottom: 8px; }
.modal-close { width: 40px; height: 40px; border-radius: 50%; background: var(--surface); display: grid; place-items: center; flex: none; box-shadow: var(--shadow-sm); transition: transform .2s; }
.modal-close:hover { transform: rotate(90deg); }
.modal-close svg { width: 20px; height: 20px; stroke: var(--text); stroke-width: 2; }
.modal-body { padding: 28px 32px 32px; }
.shore-embed { border-radius: var(--r-lg); overflow: hidden; }
.shore-embed:not(.is-loaded) { background: var(--surface); border: 1.5px dashed var(--line); padding: 28px; text-align: center; }
.shore-embed-link { background: var(--surface); border: 1.5px dashed var(--line); padding: 28px; text-align: center; }
.shore-frame { display: none; width: 100%; height: clamp(380px, calc(90vh - 270px), 640px); border: 0; background: var(--bg); }
.shore-embed.is-loaded .shore-frame { display: block; }
.shore-embed.is-loaded .shore-consent { display: none; }
.shore-alt { margin-top: 14px; font-size: var(--fs-body); }
.shore-alt a { color: var(--text-mute); text-decoration: underline; }
.shore-embed .badge { font-family: ui-monospace, monospace; font-size: var(--fs-body); color: var(--text-mute); letter-spacing: 0.04em; background: var(--bg-alt); padding: 5px 12px; border-radius: 999px; display: inline-block; margin-bottom: 16px; }

/* reveal animation */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s cubic-bezier(.16,1,.3,1); }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* --- Responsive --- */
@media (max-width: 980px) {
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .nav-links, .nav-cta .btn-ghost { display: none; }
  .nav-toggle { display: flex; }
}
@media (max-width: 760px) {
  /* Eine Stufe kleiner – und weil alles auf dem Token sitzt,
     ziehen Karten, Formulare, Buttons & Co. automatisch mit. */
  :root { --fs-body: 16px; }
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .split { grid-template-columns: 1fr; }
  .split.reverse > :first-child { order: 0; }
  /* Einspaltig gestapelt: Die Textspalte darf nicht mitlaufen, sonst klebt
     sie über den Schritten fest, an denen man vorbeiscrollt. */
  .sticky-col { position: static; top: auto; }
  .footer-grid { grid-template-columns: 1fr; }
  .mobile-cta { display: flex; }
  .trust-strip { gap: 24px; }

  /* Die fixierte CTA-Leiste darf den letzten Absatz nicht verdecken –
     auf iPhones kommt unter ihr noch der Home-Indicator dazu. */
  body { padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
  .mobile-cta { bottom: calc(12px + env(safe-area-inset-bottom, 0px)); }
  .cookie-banner { bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }

  /* --- Hero mobil ---------------------------------------------------
     Höhe: 86vh ließen den Hero auf dem Handy fast bildschirmfüllend
     werden – zusammen mit der zentrierten Ausrichtung entstand unter
     den Buttons ein großes totes Feld. `dvh` (mit vh-Fallback) rechnet
     zudem die ein-/ausfahrende Browserleiste korrekt ein. */
  .hero-media { min-height: min(78vh, 620px); min-height: min(78dvh, 620px); }
  .hero-content { padding-block: clamp(44px, 7vh, 76px) clamp(60px, 9vh, 92px); }

  /* Versal + 0,16em Sperrung sind auf Desktop eine feine Auszeichnung,
     auf 320px sprengt „EMP-BECKENBODENSTUDIO · WÜRZBURG" damit jede
     Zeile. Enger gesperrt und umbruchfähig statt abgeschnitten. */
  .eyebrow { flex-wrap: wrap; max-width: 100%; letter-spacing: 0.1em; }
  .eyebrow::before { width: 18px; }

  .hero-video-tag { max-width: calc(100% - 32px); text-align: center; }

  /* Buchungs-Modal: der shore.com-Kalender braucht auf schmalen Displays
     jeden Pixel – Innenabstand runter, Widget randlos bis zum Modalrand. */
  .modal-head { padding: 20px; }
  .modal-body { padding: 20px 20px 24px; }
  .shore-embed.is-loaded { margin: 0 -20px; border-radius: 0; }
  .shore-frame { height: clamp(420px, calc(90vh - 230px), 640px); }
}

/* Hero-Buttons auf Handybreite ------------------------------------
   `.btn` ist bewusst `white-space: nowrap`; in der zentrierten Spalte
   bestimmte die Button-Reihe ihre Breite deshalb aus dem Inhalt
   (fit-content) und lief über den Rand, statt umzubrechen. Hier bekommt
   sie ein festes 2-Spalten-Raster, der Buchungs-Button die volle Breite –
   beides zugleich die größere Tap-Fläche. */
@media (max-width: 560px) {
  .hero-actions-stacked { align-items: stretch; }
  .hero-actions-row {
    display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%;
  }
  .hero-actions .btn { width: 100%; max-width: 100%; white-space: normal; }
  .hero-actions .btn-lg { padding-inline: 0.9em; }

  /* Kurze Eyebrows („WILLKOMMEN") behalten ihren Strich – die lange
     Hero-Zeile („EMP-BECKENBODENSTUDIO · WÜRZBURG") füllt die Breite
     jedoch allein aus, der Strich rutschte als einzelnes Element auf
     eine eigene Zeile darüber. Dort trägt der Text ohne ihn. */
  .hero-content .eyebrow::before { display: none; }
}

/* ============================================================
   Dark Mode – Onyx & Champagner
   Aktiv über <html data-theme="dark"> (Vorschau-Link: ?theme=dark).
   Bewusst NICHT automatisch per prefers-color-scheme, damit
   Besucher nicht ungefragt umgeschaltet werden.
   ============================================================ */
:root[data-theme="dark"] {
  /* Flächen: Onyx-Skala (die dunkle Seite des Flyers) */
  --bg:              #12171b;
  --bg-alt:          #191f24;
  --surface:         #1e2429;

  --text:            #e8ecef;
  --text-soft:       #b9bec2;
  --text-mute:       #8d9398;

  /* Auf Dunkel trägt das Flyer-Gold selbst als Textfarbe (9,2:1) –
     hier ist es zugleich Headline- UND Interaktivfarbe. */
  --headline:        var(--gold);

  --primary:         #d6b800;   /* Gold – interaktiv auf Dunkel */
  --primary-deep:    #c3a200;
  --primary-ghost:   #d6b80029;
  /* Getönte Dunkelflächen bleiben neutrales Onyx. Gold-getöntes Dunkel
     ergibt Oliv – und Grün ist als Markenrichtung ausgeschlossen. */
  --primary-tint:    #1e252c;
  --primary-tint-2:  #272f37;
  --primary-contrast: #0f171f;      /* dunkler Text auf Gold-Fläche */

  --accent:          var(--gold);
  --accent-deep:     var(--gold-deep);
  --accent-ghost:    #d6b8002e;
  --accent-contrast: #0f171f;       /* Onyx-Text auf Gold-Button */

  --line:            #d6dfe729;
  --line-soft:       #d6dfe717;

  --shadow-sm: 0 1px 2px #00000066, 0 2px 8px #0000004c;
  --shadow-md: 0 4px 14px #00000073, 0 12px 34px #00000066;
  --shadow-lg: 0 10px 30px #00000080, 0 30px 70px #00000080;
}

/* Flächen, die in BEIDEN Modi dunkel sind: hier gehen die Basis-Regeln
   von „heller bg / dunkler text" aus und müssen fixiert werden. */
:root[data-theme="dark"] .site-header { background: #12171bd1; }

/* Hero-Copy hell – die h1 bleibt in beiden Modi gold. */
:root[data-theme="dark"] .hero-content { color: #eef2f5; }

:root[data-theme="dark"] .btn-light { background: #eaeff3; color: #161b21; }

:root[data-theme="dark"] .section-dark { background: #090d10; }
:root[data-theme="dark"] .section-dark h3,
:root[data-theme="dark"] .section-dark h4 { color: #eef2f5; }
/* var(--bg) ist hier selbst dunkel – die Betonung braucht den hellen Ton,
   sonst verschwindet fetter Text erneut (analog zu h3/h4 darüber). */
:root[data-theme="dark"] .section-dark strong,
:root[data-theme="dark"] .site-footer strong,
:root[data-theme="dark"] .hero-content strong,
:root[data-theme="dark"] .cta-band strong { color: #eef2f5; }

:root[data-theme="dark"] .site-footer { background: #090d10; }
:root[data-theme="dark"] .site-footer h4 { color: #e8ecef; }

/* CTA-Band bleibt ein dunkles, elegantes Band mit Gold-Ring. */
:root[data-theme="dark"] .cta-band { background: #090d10; color: #d3d8dc; }
:root[data-theme="dark"] .cta-band p { color: #c0c5c9; }

/* Foto-Platzhalter dunkel tönen – echte Bilder füllen diese später. */
:root[data-theme="dark"] .ph {
  background: repeating-linear-gradient(135deg, #262c32 0 16px, #1f262d 16px 32px);
}
:root[data-theme="dark"] .ph.accent {
  background: repeating-linear-gradient(135deg, #272f37 0 16px, #1f2730 16px 32px);
}
:root[data-theme="dark"] .ph-label { background: #2d343ae6; color: #dbdfe2; }