/* ==========================================================================
   VARIANTE 3 — main3.css
   Design: Elegant & Premium — Nunito Sans + Dunkelblau #0d1b2a + Gold #c9a84c
   Dunkler Header, Premium-Ästhetik, Gold-Akzente, cremefarbene Sections
   ========================================================================== */

@import url("nunito-sans.css");
@import url("font-awesome.css");

/* ==========================================================================
   CSS-VARIABLEN
   ========================================================================== */
:root {
  /* Farben */
  --farbe-dunkel:        #0d1b2a;
  --farbe-dunkel-mittel: #1b2d40;
  --farbe-dunkel-hell:   #2a4060;
  --farbe-dunkel-tief:   #060d14;
  --farbe-gold:          #c9a84c;
  --farbe-gold-hell:     #e8c97a;
  --farbe-gold-dunkel:   #a07830;
  --farbe-gold-bg:       #faf4e6;
  --farbe-creme:         #fdfaf5;
  --farbe-creme-dunkel:  #f4ede0;
  --farbe-weiss:         #ffffff;
  --farbe-text:          #0d1b2a;
  --farbe-text-mittel:   #2a3a4a;
  --farbe-text-hell:     #5a6a7a;
  --farbe-grau-hell:     #e8edf2;
  --farbe-grau:          #8a9aaa;

  /* Schatten */
  --schatten-s:  0 2px 10px rgba(var(--farbe-text-rgb), 0.08);
  --schatten-m:  0 6px 30px rgba(var(--farbe-text-rgb), 0.14);
  --schatten-l:  0 15px 50px rgba(var(--farbe-text-rgb), 0.20);
  --schatten-gold: 0 4px 20px rgba(var(--farbe-gold-rgb), 0.35);

  /* Typographie */
  --schrift-haupt: 'Nunito Sans', 'Segoe UI', system-ui, sans-serif;

  /* Layout */
  --max-breite:   1200px;
  --header-hoehe: 76px;
  --radius-s:     6px;
  --radius-m:     12px;
  --radius-l:     24px;
  --radius-pill:  50px;
  --abstand-s:    2rem;
  --abstand-m:    4rem;
  --abstand-l:    6rem;
  --transition:   0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --farbe-fehler:  #e74c3c;
  /* RGB-Kanäle für rgba()-Nutzung */
  --farbe-dunkel-tief-rgb:  6, 13, 20;
  --farbe-fehler-rgb:  231, 76, 60;
  --farbe-gold-rgb:  201, 168, 76;
  --farbe-text-rgb:  13, 27, 42;
  /* Autorenbox-Variablen (Wichtigste auf einen Blick) */
  --farbe-autorenbox-hintergrund: color-mix(in srgb, var(--farbe-gold) 6%, var(--farbe-weiss));
  --farbe-autorenbox-linie:       var(--farbe-linie);
  --farbe-autorenbox-akzent:      var(--farbe-gold);
  --farbe-autorenbox-icon:        var(--farbe-gold);
  --farbe-autorenbox-icon-text:   var(--farbe-weiss);
  --farbe-autorenbox-text:        var(--farbe-text);
  --farbe-autorenbox-text-stark:  var(--farbe-text);
}
/* Bruecke zu den generischen --color-*-Variablen aus der GETEILTEN css/global.css (Fund
   2026-08-26, Autor-Profilseite, siehe main9.css/main32.css als Vorbild). global.css
   definiert --color-primary etc. mit einem hartcodierten Rot (#e10816) als
   designneutralen Default - passt zu keinem main{N}.css-Theme. Betrifft u.a.
   .credential-badge, .autor-profile__avatar, .summary-box auf der Autor-Profilseite
   (tpl/include_einzelautor.tpl.htm). main{N}.css laedt NACH global.css, :root
   ueberschreibt sich sauber. */
:root {
  --color-primary:       var(--farbe-dunkel);
  --color-primary-dark:  var(--farbe-dunkel-tief);
  --color-primary-light: var(--farbe-gold-bg);
  --color-text:          var(--farbe-text);
  --color-text-muted:    var(--farbe-text-hell);
  --color-border:        var(--farbe-grau-hell);
}



/* ==========================================================================
   RESET & BASE
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: 16px; scroll-behavior: smooth; }

body {
  font-family: var(--schrift-haupt);
  font-weight: 400;
  color: var(--farbe-text);
  background: var(--farbe-creme);
  line-height: 1.75;
  /* No-JS-Fallback: Zeile 1 (--header-hoehe) + geschätzte Zeile-2-Höhe.
     js/main3.js misst die tatsächliche zweizeilige Höhe live und überschreibt
     diesen Wert (siehe dort) — nötig, weil Zeile 2 bei langen echten
     Kundenmenüs im Squeeze-Bereich umbrechen und dadurch wachsen kann. */
  padding-top: calc(var(--header-hoehe) + 46px);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--farbe-gold); text-decoration: none; transition: color var(--transition); }

/* Fliesstext-Links (WCAG 1.4.1 + 1.4.3): erbt Textfarbe fuer garantierten Kontrast, Unterstreichung als Unterscheidungsmerkmal */
main p a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

main p a:hover,
main p a:focus-visible {
  text-decoration-thickness: 2px;
}

a:hover { color: var(--farbe-gold-dunkel); text-decoration: none; }
ul, ol { list-style: none; }

/* ==========================================================================
   SKIP-LINK (Barrierefreiheit)
   top: -200px — NIEMALS top: -100% oder top: -3rem!
   ========================================================================== */
.skip-link {
  position: absolute;
  top: -200px;
  left: 1rem;
  z-index: 9999;
  background: var(--farbe-gold);
  color: var(--farbe-dunkel);
  padding: 0.75rem 1.5rem;
  border-radius: 0 0 var(--radius-m) var(--radius-m);
  font-weight: 700;
  font-size: 0.875rem;
  text-decoration: none;
  transition: top 0.2s;
}
.skip-link:focus { top: 0; }

/* ==========================================================================
   TYPOGRAPHIE
   ========================================================================== */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--schrift-haupt);
  font-weight: 700;
  line-height: 1.25;
  color: var(--farbe-dunkel);
}

h1 { font-size: clamp(1.75rem, 4vw,  3.2rem); }
h2 { font-size: clamp(1.5rem,  3vw,  2.25rem); }
h3 { font-size: clamp(1.1rem,  2vw,  1.4rem); }

p { margin-bottom: 1rem; line-height: 1.8; }
p:last-child { margin-bottom: 0; }

/* Section-Label / Eyebrow */
.section-label {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--farbe-gold);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 0.875rem;
}
.section-label::before {
  content: '';
  display: block;
  width: 28px;
  height: 2px;
  background: var(--farbe-gold);
  flex-shrink: 0;
}

/* Section-Kopf (Label + Linie + Ueberschrift + Untertitel), z.B. ueber .gruppen-grid
   ("Unsere Leistungen"/"Herzlich Willkommen" auf home.html). main3.css hatte dafuer
   bisher keine einzige CSS-Regel — die Kopfzeile rendert dadurch komplett unstyled. */
.section-header {
  text-align: center;
  max-width: 640px;
  margin: 0 auto var(--abstand-s);
}
.section-header .section-label { display: inline-flex; }
/* Rohes --farbe-gold erreicht auf den hellen Section-Hintergruenden --farbe-creme/
   --farbe-gold-bg/weiss nur 2.08-2.29:1 (rechnerisch geprueft, 12px/700 erfuellt NICHT
   die WCAG-Grosstext-Ausnahme, braucht volle 4.5:1). Gezielt nur innerhalb
   .section-header abgedunkelt (color-mix 62% gold/schwarz -> 4.92-5.39:1 in allen
   3 Hintergruenden), globale --farbe-gold-Variable bewusst unangetastet gelassen
   (wird u.a. von Buttons/Zahlen/Linien mit anderen Kontrastanforderungen genutzt). */
.section-header .section-label {
  color: color-mix(in srgb, var(--farbe-gold) 62%, black);
}
.section-header .section-label::before {
  background: color-mix(in srgb, var(--farbe-gold) 62%, black);
}
.section-header h2 { margin-bottom: 0.75rem; }
.section-header p {
  color: var(--farbe-text-hell);
  font-size: clamp(0.95rem, 1.5vw, 1.05rem);
  line-height: 1.7;
}

/* Dekorative Trennlinie zwischen Label und Ueberschrift im .section-header.
   Gleicher abgedunkelter Ton wie .section-label (statt rohem --farbe-gold, das auf
   den hellen Section-Hintergruenden nur 2.08-2.19:1 erreicht) fuer einen klarer
   sichtbaren, ruhigeren Uebergang — rein dekorativ/aria-hidden, daher kein hartes
   WCAG-Kriterium, aber bessere Sichtbarkeit ist trotzdem gewollt. */
.section-linie {
  display: block;
  width: 40px;
  height: 3px;
  background: color-mix(in srgb, var(--farbe-gold) 62%, black);
  border-radius: 2px;
  margin: 0.875rem auto 1.25rem;
}

/* Fix 2026-08-27: Vorlage liefert HTML-Reihenfolge label, linie, h2, p - die
   Linie soll aber visuell UNTER der Ueberschrift stehen statt davor. HTML-
   Reihenfolge bleibt unveraendert (geteilte Vorlage), nur visuelle Reihenfolge
   per flex/order verschoben. */
.section-header {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.section-header .section-label { order: 1; }
.section-header h2 { order: 2; margin-bottom: 0; }
.section-header .section-linie { order: 3; margin: 0.75rem auto 1.25rem; }
.section-header p { order: 4; }

.section-titel {
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  font-weight: 700;
  color: var(--farbe-dunkel);
  line-height: 1.25;
  margin-bottom: 1rem;
}

.section-untertitel {
  font-size: clamp(0.95rem, 1.5vw, 1.05rem);
  color: var(--farbe-text-hell);
  font-weight: 400;
  max-width: 600px;
  margin: 0 auto;
  line-height: 1.7;
}

.section-kopf {
  text-align: center;
  margin-bottom: var(--abstand-m);
}

/* Gold-Trennlinie */
.gold-linie {
  display: block;
  width: 48px;
  height: 2px;
  background: linear-gradient(90deg, var(--farbe-gold), var(--farbe-gold-hell));
  border-radius: 1px;
  margin: 1rem auto;
}

/* ==========================================================================
   BUTTONS
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.8rem 1.75rem;
  border-radius: var(--radius-pill);
  font-family: var(--schrift-haupt);
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
  border: 2px solid transparent;
  transition: all var(--transition);
  text-decoration: none;
  white-space: nowrap;
  letter-spacing: 0.04em;
}
.btn:hover { text-decoration: none; transform: translateY(-2px); }

.btn-primaer {
  background: var(--farbe-gold);
  color: var(--farbe-dunkel);
  border-color: var(--farbe-gold);
}
.btn-primaer:hover {
  background: var(--farbe-gold-hell);
  border-color: var(--farbe-gold-hell);
  color: var(--farbe-dunkel);
  box-shadow: var(--schatten-gold);
}

.btn-sekundaer {
  background: transparent;
  color: var(--farbe-weiss);
  border-color: rgba(255, 255, 255, 0.5);
}
.btn-sekundaer:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: var(--farbe-weiss);
  color: var(--farbe-weiss);
}

.btn-dunkel {
  background: var(--farbe-dunkel);
  color: var(--farbe-weiss);
  border-color: var(--farbe-dunkel);
}
.btn-dunkel:hover {
  background: var(--farbe-dunkel-mittel);
  border-color: var(--farbe-dunkel-mittel);
  color: var(--farbe-weiss);
  box-shadow: var(--schatten-m);
}

/* ==========================================================================
   CONTAINER
   ========================================================================== */
.container,
.seiten-breite {
  max-width: var(--max-breite);
  margin: 0 auto;
  padding: 0 2rem;
}

/* Schuetzt gegen verschachteltes class="container" aus der geteilten CMS-Vorlage
   (z.B. <h3 class="container"> innerhalb eines bereits .container-umschlossenen
   Bereichs) — analog main1.css (Commit 895de81) und main2.css (Commit 390c0f0). */
.container .container {
  max-width: none;
  padding: 0;
  margin: 0;
}

/* ==========================================================================
   HEADER — Dunkles Premium-Design
   Zeile 1 (header-inner): feste Höhe --header-hoehe (Logo + CTA + Burger)
   Zeile 2 (site-nav): volle Breite, eigener Hintergrund/Trennlinie —
   die Gesamthöhe des Headers wächst dadurch mit dem Inhalt (kein Fixwert mehr)
   ========================================================================== */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: var(--farbe-dunkel);
  border-bottom: 1px solid rgba(var(--farbe-gold-rgb), 0.2);
  transition: border-color var(--transition), box-shadow var(--transition);
}

.site-header.scrolled {
  border-bottom-color: rgba(var(--farbe-gold-rgb), 0.45);
  box-shadow: 0 4px 30px rgba(var(--farbe-text-rgb), 0.40);
}

/* Zeile 1: Logo links | Online-Termin-CTA + Burger rechts */
.header-inner {
  max-width: var(--max-breite);
  margin: 0 auto;
  padding: 0 2rem;
  height: var(--header-hoehe);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

/* Logo */
.site-logo a {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  text-decoration: none;
  flex-shrink: 0;
}
.site-logo img {
  height: 2.5rem;
  width: auto;
  object-fit: contain;
  border: 2px solid rgba(var(--farbe-gold-rgb), 0.35);
  border-radius: var(--radius-s);
  padding: 3px;
  background: rgba(255, 255, 255, 0.05);
}
.site-logo-texte {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}
.site-logo-name {
  font-size: 1rem;
  font-weight: 700;
  color: var(--farbe-weiss);
  letter-spacing: 0.02em;
}
.site-logo-zusatz {
  font-size: 0.68rem;
  font-weight: 300;
  color: var(--farbe-gold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* Desktop-CTA-Gruppe in Zeile 1 (Online-Termin-Gold-Pill) */
.header-cta-gruppe {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-shrink: 0;
}

/* Zeile 2: Desktop-Navigation — eigene volle Zeile unter header-inner */
.site-nav {
  background: var(--farbe-dunkel-mittel);
  border-top: 1px solid rgba(var(--farbe-gold-rgb), 0.15);
}
.site-nav-inner {
  max-width: var(--max-breite);
  margin: 0 auto;
  padding: 0.2rem 2rem;
  display: flex;
  justify-content: center;
}
.site-nav-inner > ul {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  list-style: none;
  flex-wrap: wrap;
  justify-content: center;
}
.site-nav-inner > ul > li > a {
  display: block;
  padding: 0.4rem 0.75rem;
  font-size: 0.88rem;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.82);
  letter-spacing: 0.04em;
  position: relative;
  transition: color var(--transition);
  white-space: nowrap;
}
/* Gold-Unterstrich-Hover */
.site-nav-inner > ul > li > a::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0.75rem;
  right: 0.75rem;
  height: 2px;
  background: var(--farbe-gold);
  transform: scaleX(0);
  transition: transform 0.3s ease;
}
.site-nav-inner > ul > li > a:hover,
.site-nav-inner > ul > li > a.aktiv {
  color: var(--farbe-gold);
  text-decoration: none;
}
.site-nav-inner > ul > li > a:hover::after,
.site-nav-inner > ul > li > a.aktiv::after {
  transform: scaleX(1);
}

/* Dropdown-Pfeil — ohne ::after Linie */
.site-nav li.has-dropdown > a::after,
.site-nav li.hat-dropdown > a::after {
  display: none;
}
.site-nav li.has-dropdown > a,
.site-nav li.hat-dropdown > a {
  padding-right: 1.2rem;
}
.site-nav li.has-dropdown > a .dropdown-pfeil,
.site-nav li.hat-dropdown > a .dropdown-pfeil {
  font-size: 0.65em;
  margin-left: 0.25rem;
  opacity: 0.6;
}
/* Pfeil als CSS */
.site-nav li.has-dropdown > a span:not(.dropdown-pfeil)::after,
.site-nav li.hat-dropdown > a span:not(.dropdown-pfeil)::after {
  content: ' ▾';
  font-size: 0.65em;
  opacity: 0.6;
}

/* Dropdown-Menü */
.site-nav li.has-dropdown,
.site-nav li.hat-dropdown {
  position: relative;
}
.site-nav li.has-dropdown > ul,
.site-nav li.hat-dropdown > ul {
  position: absolute;
  top: calc(100% + 0.5rem);
  left: 0;
  background: var(--farbe-dunkel-mittel);
  border: 1px solid rgba(var(--farbe-gold-rgb), 0.25);
  border-radius: var(--radius-m);
  box-shadow: var(--schatten-l);
  min-width: 220px;
  padding: 0.5rem 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: all var(--transition);
  z-index: 100;
  list-style: none;
}
.site-nav li.has-dropdown:hover > ul,
.site-nav li.hat-dropdown:hover > ul {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
/* Unsichtbare Brücke gegen Hover-Lücke */
.site-nav li.has-dropdown::after,
.site-nav li.hat-dropdown::after {
  content: '';
  display: block;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 0.5rem;
  background: transparent;
  z-index: 99;
}
.site-nav li.has-dropdown > ul a,
.site-nav li.hat-dropdown > ul a {
  display: block;
  padding: 0.6rem 1.1rem;
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.75);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  transition: background var(--transition), color var(--transition);
}
.site-nav li.has-dropdown > ul a::after,
.site-nav li.hat-dropdown > ul a::after { display: none; }
.site-nav li.has-dropdown > ul li:last-child a,
.site-nav li.hat-dropdown > ul li:last-child a {
  border-bottom: none;
}
.site-nav li.has-dropdown > ul a:hover,
.site-nav li.hat-dropdown > ul a:hover {
  background: rgba(var(--farbe-gold-rgb), 0.12);
  color: var(--farbe-gold);
  text-decoration: none;
}

/* Nav CTA (Termin vereinbaren) — Gold-Pill */
.nav-cta-item { margin-left: 0.75rem; }
.nav-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.6rem 1.4rem;
  background: var(--farbe-gold);
  border: 2px solid var(--farbe-gold);
  border-radius: var(--radius-pill);
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--farbe-dunkel);
  letter-spacing: 0.04em;
  transition: all var(--transition);
  white-space: nowrap;
}
.nav-cta:hover {
  background: var(--farbe-gold-hell);
  border-color: var(--farbe-gold-hell);
  color: var(--farbe-dunkel);
  text-decoration: none;
  box-shadow: var(--schatten-gold);
  transform: translateY(-1px);
}
/* Kein ::after Pfeil auf CTA */
.nav-cta-item > a::after { display: none !important; }

/* Mobile-only */
.mobile-only { display: none; }

/* ==========================================================================
   BURGER-BUTTON
   ========================================================================== */
.burger-btn {
  display: none;
  position: relative;
  z-index: 10000; /* muss über .site-nav (z-index:999 im Mobile-Off-Canvas-Zustand) liegen,
                      sonst überdeckt die geöffnete Nav den Button und er ist nicht mehr klickbar */
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  background: rgba(var(--farbe-gold-rgb), 0.1);
  border: 1.5px solid rgba(var(--farbe-gold-rgb), 0.4);
  border-radius: var(--radius-s);
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
  transition: all var(--transition);
}
.burger-btn:hover {
  background: rgba(var(--farbe-gold-rgb), 0.2);
  border-color: var(--farbe-gold);
}
.burger-btn span {
  display: block;
  width: 18px;
  height: 2px;
  background: var(--farbe-weiss);
  border-radius: 1px;
  transition: all 0.3s ease;
  transform-origin: center;
}
.burger-btn.aktiv span { background: var(--farbe-gold); }
.burger-btn.aktiv span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger-btn.aktiv span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.burger-btn.aktiv span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ==========================================================================
   MOBILE OVERLAY
   ========================================================================== */
.mobile-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(var(--farbe-dunkel-tief-rgb), 0.65);
  z-index: 998;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.mobile-overlay.offen {
  display: block;
  opacity: 1;
}

/* ==========================================================================
   MOBILE NAV (Off-Canvas von rechts — dunkles Thema)
   ========================================================================== */
@media (max-width: 768px) {
  .burger-btn { display: flex; }
  .header-cta-gruppe { display: none; }

  /* Mobile: .site-nav ist Off-Canvas (position:fixed), braucht keinen Platz
     im normalen Fluss mehr — body padding-top zurück auf reine Zeile-1-Höhe */
  body { padding-top: var(--header-hoehe); }

  .site-nav {
    position: fixed;
    top: 0;
    right: -100%;
    width: min(320px, 85vw);
    height: 100vh;
    background: var(--farbe-dunkel-mittel);
    border-left: 2px solid rgba(var(--farbe-gold-rgb), 0.35);
    border-top: none;
    box-shadow: -4px 0 30px rgba(var(--farbe-dunkel-tief-rgb), 0.5);
    z-index: 999;
    overflow-y: auto;
    transition: right 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    padding: 5.5rem 0 2rem;
    display: block;
  }
  .site-nav.offen { right: 0; }

  /* Zeile-2-Wrapper wird im Off-Canvas zum reinen Block-Container */
  .site-nav-inner {
    max-width: none;
    padding: 0;
    display: block;
  }

  .site-nav-inner > ul {
    flex-direction: column;
    align-items: stretch;
    flex-wrap: nowrap;
    gap: 0;
    padding: 0 1.5rem;
  }

  .site-nav-inner > ul > li > a {
    display: block;
    padding: 0.875rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    font-size: 0.95rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.85);
    letter-spacing: 0.03em;
  }
  .site-nav-inner > ul > li > a::after { display: none !important; }
  .site-nav-inner > ul > li > a:hover { color: var(--farbe-gold); text-decoration: none; }

  /* Dropdown in Mobile */
  .site-nav li.has-dropdown > ul,
  .site-nav li.hat-dropdown > ul {
    position: static;
    opacity: 1;
    visibility: hidden;
    max-height: 0;
    overflow: hidden;
    box-shadow: none;
    border: none;
    border-radius: 0;
    transform: none;
    padding: 0;
    background: transparent;
    transition: max-height 0.3s ease, visibility 0.3s ease;
  }
  .site-nav li.has-dropdown.offen > ul,
  .site-nav li.hat-dropdown.offen > ul {
    visibility: visible;
    max-height: 400px;
  }
  /* Brücken-Pseudo-Element auf Mobile ausblenden */
  .site-nav li.has-dropdown::after,
  .site-nav li.hat-dropdown::after { display: none; }

  .site-nav li.has-dropdown > ul a,
  .site-nav li.hat-dropdown > ul a {
    padding: 0.625rem 0 0.625rem 1rem;
    font-size: 0.875rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.6);
    background: transparent;
  }
  .site-nav li.has-dropdown > ul a::after,
  .site-nav li.hat-dropdown > ul a::after { display: none; }
  .site-nav li.has-dropdown > ul a:hover,
  .site-nav li.hat-dropdown > ul a:hover {
    color: var(--farbe-gold);
    background: transparent;
  }

  /* Mobile-only */
  .mobile-only { display: block; }
  .mobile-only a {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.875rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.6);
  }
  .mobile-only a i { color: var(--farbe-gold); }
  .mobile-only a:hover { color: var(--farbe-gold); text-decoration: none; }

  /* Nav-CTA in Mobile (mobile-only Ersatzeintrag in der Off-Canvas-Nav) */
  .nav-cta-item { margin-left: 0; margin-top: 1rem; }
  .nav-cta {
    display: flex;
    justify-content: center;
    padding: 0.8rem 1.25rem;
    width: 100%;
  }
}

/* ==========================================================================
   SCROLL-ANIMATE
   ========================================================================== */
.scroll-animate {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.scroll-animate.sichtbar {
  opacity: 1;
  transform: translateY(0);
}

/* ==========================================================================
   SCROLL-TO-TOP
   ========================================================================== */
.scroll-top {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  width: 44px;
  height: 44px;
  background: var(--farbe-gold);
  color: var(--farbe-dunkel);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  box-shadow: var(--schatten-gold);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: all var(--transition);
  z-index: 500;
}
.scroll-top.sichtbar {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.scroll-top:hover {
  background: var(--farbe-gold-hell);
  transform: translateY(-3px);
  box-shadow: 0 8px 25px rgba(var(--farbe-gold-rgb), 0.5);
}

/* ==========================================================================
   HERO-SLIDER
   ========================================================================== */
/* ==========================================================================
   SPLIT-SCREEN SLIDER — Links Text (dunkel), Rechts Bild
   ========================================================================== */
.slider-bereich {
  position: relative;
  width: 100%;
  min-height: calc(100vh - var(--header-hoehe));
  overflow: hidden;
  background: var(--farbe-dunkel);
}

.slider-container {
  position: relative;
  width: 100%;
  min-height: calc(100vh - var(--header-hoehe));
}

.slider-folie {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  opacity: 0;
  transition: opacity 0.8s ease;
  pointer-events: none;
  min-height: calc(100vh - var(--header-hoehe));
}
.slider-folie.aktiv {
  opacity: 1;
  pointer-events: auto;
}

/* Bild füllt rechte Hälfte */
.slider-folie img {
  grid-column: 2;
  grid-row: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Text-Inhalt füllt linke Hälfte */
.slider-inhalt {
  grid-column: 1;
  grid-row: 1;
  background: var(--farbe-dunkel);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 4rem 4rem 4rem 5%;
  position: relative;
  overflow: hidden;
}

/* Dekoratives Gold-Element im Hintergrund */
.slider-inhalt::before {
  content: '';
  position: absolute;
  top: -120px;
  right: -120px;
  width: 350px;
  height: 350px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--farbe-gold-rgb), 0.07) 0%, transparent 70%);
  pointer-events: none;
}
.slider-inhalt::after {
  content: '';
  position: absolute;
  bottom: -80px;
  left: -80px;
  width: 250px;
  height: 250px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--farbe-gold-rgb), 0.05) 0%, transparent 70%);
  pointer-events: none;
}

/* Animations-Wrapper */
.slider-folie .slider-inhalt > * {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.slider-folie.aktiv .slider-inhalt > * {
  opacity: 1;
  transform: translateY(0);
}
.slider-folie.aktiv .slider-inhalt > *:nth-child(1) { transition-delay: 0.15s; }
.slider-folie.aktiv .slider-inhalt > *:nth-child(2) { transition-delay: 0.25s; }
.slider-folie.aktiv .slider-inhalt > *:nth-child(3) { transition-delay: 0.35s; }
.slider-folie.aktiv .slider-inhalt > *:nth-child(4) { transition-delay: 0.45s; }

/* Schrift im Slider */
.slider-label,
.slider-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--farbe-gold);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 1.25rem;
}
.slider-label::before,
.slider-badge::before {
  content: '';
  display: block;
  width: 28px;
  height: 2px;
  background: var(--farbe-gold);
  flex-shrink: 0;
}

.slider-inhalt h1,
.slider-inhalt h2,
.slider-text h1,
.slider-text h2 {
  color: var(--farbe-weiss);
  font-size: clamp(1.75rem, 3vw, 3rem);
  font-weight: 700;
  line-height: 1.15;
  margin-bottom: 1rem;
  letter-spacing: -0.01em;
}
.slider-inhalt h1 .goldtext,
.slider-inhalt h2 .goldtext { color: var(--farbe-gold); }

.slider-inhalt p,
.slider-text p {
  color: rgba(255, 255, 255, 0.75);
  font-size: clamp(0.95rem, 1.5vw, 1.05rem);
  font-weight: 300;
  margin-bottom: 2rem;
  line-height: 1.7;
  max-width: 460px;
}

/* CTA-Buttons im Slider */
.slider-aktionen {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

/* Basis-Button-Klasse (CMS: class="btn btn-akzent") */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.875rem 2rem;
  border-radius: var(--radius-pill);
  font-weight: 700;
  font-size: 0.9rem;
  text-decoration: none;
  transition: all var(--transition);
  border: none;
  cursor: pointer;
  font-family: var(--schrift-haupt);
  letter-spacing: 0.02em;
}

/* Slider-Pfeile — rechte (Bild-)Seite unten */
.slider-pfeil-links,
.slider-pfeil-rechts {
  position: absolute;
  bottom: 2.5rem;
  z-index: 10;
  background: rgba(255, 255, 255, 0.12);
  border: 1.5px solid rgba(var(--farbe-gold-rgb), 0.4);
  color: var(--farbe-weiss);
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 1rem;
  padding: 0;
  transition: all var(--transition);
}
.slider-pfeil-links:hover,
.slider-pfeil-rechts:hover {
  background: var(--farbe-gold);
  border-color: var(--farbe-gold);
  color: var(--farbe-dunkel);
}
/* Pfeile auf der rechten (Bild-)Hälfte */
.slider-pfeil-links  { right: calc(50% + 4rem); left: auto; }
.slider-pfeil-rechts { right: calc(50% + 0.5rem); }

/* Slider-Punkte — unten links auf dem dunklen Bereich */
.slider-punkte {
  position: absolute;
  bottom: 2.5rem;
  left: 5%;
  display: flex;
  gap: 0.5rem;
  z-index: 10;
}
.slider-punkt {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.25);
  border: none;
  cursor: pointer;
  padding: 0;
  transition: all var(--transition);
}
.slider-punkt.aktiv,
.slider-punkt:hover {
  background: var(--farbe-gold);
  transform: scale(1.4);
}

/* ==========================================================================
   SECTIONS — ALLGEMEIN
   ========================================================================== */
.section,
.sektion {
  padding: var(--abstand-l) 0;
}

/* Abwechselnde Hintergründe — IMMER nth-of-type(even)! */
/* Hintergrund-Farbwechsel: siehe seitenweiter FARBRHYTHMUS-JS-Block unten */

/* ==========================================================================
   BILDSPALTEN
   ========================================================================== */
.bildspalten-section {
  padding: var(--abstand-l) 0;
}

.bildspalten-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--abstand-m);
  align-items: center;
}

/* RTL-Trick NICHT per nth-of-type — das CMS steuert das über bildspalten-grid-reverse */
.bildspalten-grid-reverse {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--abstand-m);
  align-items: center;
  direction: rtl;
}
.bildspalten-grid-reverse > * { direction: ltr; }

.bildspalten-bild {
  position: relative;
  border-radius: var(--radius-l);
  overflow: hidden;
  box-shadow: var(--schatten-l);
  padding: 1.5rem;
}
.bildspalten-bild img {
  width: 100%;
  height: 420px;
  object-fit: cover;
  display: block;
}
/* Gold-Rahmen-Akzent */
.bildspalten-bild::before {
  content: '';
  position: absolute;
  top: -10px;
  left: -10px;
  right: 10px;
  bottom: 10px;
  border: 2px solid var(--farbe-gold);
  border-radius: var(--radius-l);
  z-index: -1;
  pointer-events: none;
  opacity: 0.4;
}

.bildspalten-text h2 {
  color: var(--farbe-dunkel);
  margin-bottom: 1rem;
}
.bildspalten-text p {
  color: var(--farbe-text-hell);
  font-size: 1rem;
  line-height: 1.8;
  margin-bottom: 1rem;
}
.bildspalten-text .btn { margin-top: 1.5rem; }
.bildspalten-text ul { margin: 1rem 0 1rem 1.25rem; list-style: disc; }
.bildspalten-text li { color: var(--farbe-text-mittel); line-height: 1.8; margin-bottom: 0.35rem; }
.bildspalten-text strong { color: var(--farbe-dunkel); font-weight: 700; }
.bildspalten-text a { color: var(--farbe-gold-dunkel); text-decoration: underline; }

/* ==========================================================================
   LEISTUNGEN
   ========================================================================== */
.leistungen-section {
  background: var(--farbe-dunkel);
  padding: var(--abstand-l) 0;
}
.leistungen-section .section-titel { color: var(--farbe-weiss); }
.leistungen-section .section-label { color: var(--farbe-gold); }
.leistungen-section .section-untertitel { color: rgba(255, 255, 255, 0.65); }

.leistungen-grid {
  max-width: var(--max-breite);
  margin: 0 auto;
  padding: 0 2rem;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--abstand-s);
}

.leistung-karte {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(var(--farbe-gold-rgb), 0.2);
  border-radius: var(--radius-l);
  padding: 2rem;
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
  display: flex;
  flex-direction: column;
}
.leistung-karte:hover {
  transform: translateY(-6px);
  box-shadow: var(--schatten-gold);
  border-color: rgba(var(--farbe-gold-rgb), 0.5);
}

.leistung-icon {
  width: 3.5rem;
  height: 3.5rem;
  background: linear-gradient(135deg, var(--farbe-gold-dunkel), var(--farbe-gold));
  border-radius: var(--radius-m);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  color: var(--farbe-dunkel);
  margin-bottom: 1.25rem;
  flex-shrink: 0;
}
.leistung-titel {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--farbe-weiss);
  margin-bottom: 0.75rem;
}
.leistung-text {
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.60);
  line-height: 1.7;
  flex-grow: 1;
  margin-bottom: 0;
}
.leistung-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 1.25rem;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--farbe-gold);
  text-decoration: none;
  transition: gap var(--transition), color var(--transition);
}
.leistung-link:hover { gap: 0.75rem; color: var(--farbe-gold-hell); text-decoration: none; }

/* ==========================================================================
   PRAXIS-FAKTEN (Kennzahlen)
   ========================================================================== */
.praxis-fakten-section {
  background: var(--farbe-dunkel-tief);
  padding: var(--abstand-s) 0;
}

.fakten-grid {
  max-width: var(--max-breite);
  margin: 0 auto;
  padding: 0 2rem;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--abstand-s);
  text-align: center;
}

.praxis-fakt {
  padding: 1.75rem 1rem;
  border-right: 1px solid rgba(var(--farbe-gold-rgb), 0.15);
}
.praxis-fakt:last-child { border-right: none; }

.praxis-fakt-zahl {
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  font-weight: 700;
  color: var(--farbe-gold);
  line-height: 1;
  margin-bottom: 0.4rem;
}
.praxis-fakt-label {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.55);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

/* ==========================================================================
   ZITAT-SECTION
   ========================================================================== */
.zitat-section {
  background: linear-gradient(135deg, var(--farbe-dunkel-hell) 0%, var(--farbe-dunkel-mittel) 100%);
  padding: var(--abstand-l) 0;
  position: relative;
  overflow: hidden;
  text-align: center;
}
.zitat-section::before {
  content: '"';
  position: absolute;
  top: -2rem;
  left: 3%;
  font-size: 18rem;
  font-weight: 900;
  color: rgba(var(--farbe-gold-rgb), 0.06);
  font-family: Georgia, serif;
  line-height: 1;
  pointer-events: none;
}

.zitat-bereich {
  max-width: var(--max-breite);
  margin: 0 auto;
  padding: 0 2rem;
}

.zitat-text {
  font-size: clamp(1.15rem, 2.5vw, 1.55rem);
  font-weight: 300;
  color: rgba(255, 255, 255, 0.90);
  line-height: 1.65;
  font-style: italic;
  max-width: 800px;
  margin: 0 auto 1.5rem;
}
.zitat-text strong {
  color: var(--farbe-gold);
  font-weight: 700;
  font-style: normal;
}
.zitat-autor {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.5);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  display: block;
}

/* ==========================================================================
   TEAM / BEHANDLER
   ========================================================================== */
.team-section {
  padding: var(--abstand-l) 0;
}

/* Hintergrund-Farbwechsel: siehe seitenweiter FARBRHYTHMUS-JS-Block unten */

.team-grid {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
}

.team-karte {
  background: var(--farbe-weiss);
  border-radius: var(--radius-l);
  overflow: hidden;
  box-shadow: var(--schatten-s);
  border: 1px solid var(--farbe-grau-hell);
  transition: transform var(--transition), box-shadow var(--transition);
}
.team-karte:hover {
  transform: translateY(-4px);
  box-shadow: var(--schatten-m);
}
.team-bild {
  width: 100%;
  height: 280px;
  object-fit: cover;
  display: block;
}
.team-info { padding: 1.5rem; }
.team-name {
  font-size: 1rem;
  font-weight: 700;
  color: var(--farbe-dunkel);
  margin-bottom: 0.25rem;
}
.team-funktion {
  font-size: 0.78rem;
  color: var(--farbe-gold-dunkel);
  font-weight: 600;
  display: block;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 0.5rem;
}
.team-beschreibung {
  font-size: 0.875rem;
  color: var(--farbe-text-hell);
  line-height: 1.6;
}

/* ==========================================================================
   FAQ
   ========================================================================== */
.faq-section {
  padding: var(--abstand-l) 0;
}

.faq-bereich {
  max-width: 800px;
  margin: 0 auto;
  padding: 0 2rem;
}

.faq-item {
  background: var(--farbe-weiss);
  border: 1px solid rgba(var(--farbe-gold-rgb), 0.2);
  border-radius: var(--radius-m);
  margin-bottom: 0.75rem;
  overflow: hidden;
  transition: box-shadow var(--transition), border-color var(--transition);
}
.faq-item:hover { border-color: rgba(var(--farbe-gold-rgb), 0.4); }
.faq-item.offen { border-color: rgba(var(--farbe-gold-rgb), 0.5); }

.faq-frage {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.25rem 1.5rem;
  background: transparent;
  border: none;
  text-align: left;
  cursor: pointer;
  font-family: var(--schrift-haupt);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--farbe-dunkel);
  transition: color var(--transition);
}
.faq-frage:hover { color: var(--farbe-gold-dunkel); }
.faq-frage::after {
  content: '+';
  font-size: 1.4rem;
  font-weight: 300;
  color: var(--farbe-gold);
  flex-shrink: 0;
  transition: transform var(--transition);
  line-height: 1;
}
.faq-item.offen .faq-frage::after { transform: rotate(45deg); }

.faq-antwort {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease;
}
.faq-antwort-innen {
  padding: 0 1.5rem 1.5rem;
  font-size: 0.9rem;
  color: var(--farbe-text-hell);
  line-height: 1.7;
}

/* ==========================================================================
   KONTAKT
   ========================================================================== */
.kontakt-section {
  background: var(--farbe-creme);
  padding: var(--abstand-l) 0;
}

.kontakt-layout {
  max-width: var(--max-breite);
  margin: 0 auto;
  padding: 0 2rem;
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: var(--abstand-m);
  align-items: start;
}

.kontakt-info-item {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 1.25rem;
}
.kontakt-info-icon {
  width: 2.5rem;
  height: 2.5rem;
  background: linear-gradient(135deg, var(--farbe-gold-dunkel), var(--farbe-gold));
  border-radius: var(--radius-m);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--farbe-dunkel);
  font-size: 0.9rem;
  flex-shrink: 0;
}
.kontakt-info-text {
  font-size: 0.9rem;
  color: var(--farbe-text-hell);
  line-height: 1.6;
}
.kontakt-info-text strong {
  display: block;
  font-weight: 700;
  color: var(--farbe-dunkel);
  margin-bottom: 0.125rem;
}
.kontakt-info-text a {
  color: var(--farbe-text-hell);
  text-decoration: none;
}
.kontakt-info-text a:hover { color: var(--farbe-gold-dunkel); text-decoration: none; }

/* Öffnungszeiten */
.oeffnungszeiten-tabelle {
  width: 100%;
  border-collapse: collapse;
  margin-top: 0.75rem;
}
.oeffnungszeiten-tabelle tr { border-bottom: 1px solid var(--farbe-grau-hell); }
.oeffnungszeiten-tabelle td, .oeffnungszeiten-tabelle th {
  padding: 0.5rem 0;
  font-size: 0.875rem;
  color: var(--farbe-text-hell);
}
.oeffnungszeiten-tabelle td:first-child, .oeffnungszeiten-tabelle th {
  font-weight: 600;
  color: var(--farbe-text);
  width: 45%;
}

/* Kontaktformular */
.kontakt-form {
  background: var(--farbe-weiss);
  border-radius: var(--radius-l);
  padding: 2.5rem;
  border: 1px solid rgba(var(--farbe-gold-rgb), 0.2);
  box-shadow: var(--schatten-s);
}

.form-gruppe {
  margin-bottom: 1.25rem;
}
.form-gruppe label {
  display: block;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--farbe-dunkel);
  margin-bottom: 0.4rem;
}
.form-gruppe input,
.form-gruppe textarea,
.form-gruppe select {
  width: 100%;
  padding: 0.75rem 1rem;
  border: 1.5px solid var(--farbe-grau-hell);
  border-radius: var(--radius-m);
  font-family: var(--schrift-haupt);
  font-size: 0.9rem;
  color: var(--farbe-text);
  background: var(--farbe-creme);
  transition: border-color var(--transition), box-shadow var(--transition);
  outline: none;
}
.form-gruppe input:focus,
.form-gruppe textarea:focus,
.form-gruppe select:focus {
  border-color: var(--farbe-gold);
  box-shadow: 0 0 0 3px rgba(var(--farbe-gold-rgb), 0.18);
}
.form-gruppe textarea { resize: vertical; min-height: 8rem; }
.form-feld-fehler {
  border-color: #e74c3c !important;
  box-shadow: 0 0 0 3px rgba(var(--farbe-fehler-rgb), 0.1) !important;
}

.form-datenschutz {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
  font-size: 0.85rem;
  color: var(--farbe-text-hell);
}
.form-datenschutz input[type="checkbox"] {
  width: 1.1rem;
  height: 1.1rem;
  min-width: 1.1rem;
  margin-top: 0.15rem;
  accent-color: var(--farbe-gold);
  cursor: pointer;
  flex-shrink: 0;
}
.form-datenschutz a {
  color: var(--farbe-gold-dunkel);
  text-decoration: underline;
}

.form-meldung {
  padding: 0.875rem 1rem;
  border-radius: var(--radius-m);
  font-size: 0.9rem;
  margin-top: 1rem;
  display: none;
}
.form-meldung.erfolg {
  display: block;
  background: rgba(var(--farbe-gold-rgb), 0.10);
  color: var(--farbe-gold-dunkel);
  border: 1px solid rgba(var(--farbe-gold-rgb), 0.30);
}
.form-meldung.fehler {
  display: block;
  background: rgba(var(--farbe-fehler-rgb), 0.08);
  color: #c0392b;
  border: 1px solid rgba(var(--farbe-fehler-rgb), 0.25);
}

/* ==========================================================================
   ANFAHRT / KARTE
   ========================================================================== */
.anfahrt-a {
  background: var(--farbe-gold-bg);
  padding: var(--abstand-l) 0;
}
.anfahrt-a-grid {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 3rem;
  align-items: start;
}
/* Info-Spalte (Label + Ueberschrift + Trennlinie + Kontaktliste + Routenplaner-Button) —
   bonus fund, analog main2.css (Commit 390c0f0): war komplett unstyled. */
.anfahrt-a-info {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.anfahrt-a-info h2 { margin: 0; }
/* .section-label steht hier NICHT innerhalb von .section-header (anderer
   struktureller Kontext als .gruppen-section), der dort gebaute Kontrastfix
   greift also nicht automatisch — identisches 2.08:1-Problem hier separat
   gescopt behoben (color-mix 62% gold/schwarz -> 4.92:1 auf --farbe-gold-bg,
   siehe .section-header weiter oben fuer die vollstaendige Herleitung). */
.anfahrt-a-info .section-label {
  color: color-mix(in srgb, var(--farbe-gold) 62%, black);
}
.anfahrt-a-info .section-label::before {
  background: color-mix(in srgb, var(--farbe-gold) 62%, black);
}
/* Dekorative Trennlinie unter der Ueberschrift der Anfahrts-Info-Spalte, gleicher
   abgedunkelter Ton wie .section-linie (rohes --farbe-gold nur 2.08-2.29:1 auf
   --farbe-gold-bg, siehe .section-header weiter oben). */
.anfahrt-a-linie {
  width: 48px;
  height: 3px;
  background: color-mix(in srgb, var(--farbe-gold) 62%, black);
  border-radius: 2px;
  margin: 0.875rem 0 0.25rem;
}
.anfahrt-a-kontakt-liste {
  list-style: none;
  margin: 1rem 0;
}
.anfahrt-a-kontakt-liste li {
  padding: 0.5rem 0;
  font-size: 0.9rem;
  color: var(--farbe-text-hell);
  border-bottom: 1px solid var(--farbe-grau-hell);
}
.btn-routenplaner {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  background: var(--farbe-gold);
  color: var(--farbe-dunkel);
  border-radius: var(--radius-pill);
  font-family: var(--schrift-haupt);
  font-size: 0.875rem;
  font-weight: 700;
  text-decoration: none;
  transition: all var(--transition);
  margin-top: 1rem;
}
.btn-routenplaner:hover {
  background: var(--farbe-gold-hell);
  text-decoration: none;
  transform: translateY(-2px);
  box-shadow: var(--schatten-gold);
}
#map-zzam,
.karte-container {
  border-radius: var(--radius-l);
  overflow: hidden;
  box-shadow: var(--schatten-m);
  height: 350px;
}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-footer {
  background: var(--farbe-dunkel-tief);
  color: rgba(255, 255, 255, 0.65);
  padding: var(--abstand-m) 0 0;
}

/* KEIN .container-Wrapper! max-width direkt auf .footer-grid */
.footer-grid {
  max-width: var(--max-breite);
  margin: 0 auto;
  padding: 0 2rem var(--abstand-s);
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 2fr;
  gap: var(--abstand-s);
  border-bottom: 1px solid rgba(var(--farbe-gold-rgb), 0.12);
}

.footer-col h3 {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--farbe-weiss);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid rgba(var(--farbe-gold-rgb), 0.3);
  display: inline-block;
}

.footer-logo-text {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--farbe-weiss);
  display: block;
  margin-bottom: 0.5rem;
}
.footer-logo-text + span {
  font-size: 0.7rem;
  color: var(--farbe-gold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  display: block;
  margin-bottom: 0.875rem;
}

.footer-col p,
.footer-col address {
  font-size: 0.875rem;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.50);
  font-style: normal;
}

.footer-col ul { list-style: none; }
.footer-col ul li { margin-bottom: 0.4rem; }
.footer-col ul a {
  display: block;
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.50);
  text-decoration: none;
  transition: color var(--transition), padding-left var(--transition);
}
.footer-col ul a:hover {
  color: var(--farbe-gold);
  padding-left: 0.3rem;
  text-decoration: none;
}

.footer-kontakt-item {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.50);
  margin-bottom: 0.5rem;
}
.footer-kontakt-item i {
  color: var(--farbe-gold);
  width: 1rem;
  flex-shrink: 0;
  margin-top: 0.2rem;
}
.footer-kontakt-item a {
  color: rgba(255, 255, 255, 0.50);
  text-decoration: none;
}
.footer-kontakt-item a:hover { color: var(--farbe-gold); text-decoration: none; }

.footer-social {
  display: flex;
  gap: 0.75rem;
  margin-top: 1.25rem;
}
.footer-social a {
  width: 34px;
  height: 34px;
  background: rgba(var(--farbe-gold-rgb), 0.1);
  border: 1px solid rgba(var(--farbe-gold-rgb), 0.25);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--farbe-gold);
  font-size: 0.875rem;
  transition: all var(--transition);
  text-decoration: none;
}
.footer-social a:hover {
  background: var(--farbe-gold);
  color: var(--farbe-dunkel);
  text-decoration: none;
}

/* KEIN .container-Wrapper! max-width direkt auf .footer-bottom-inner */
.footer-bottom {
  border-top: 1px solid rgba(var(--farbe-gold-rgb), 0.08);
}
.footer-bottom-inner {
  max-width: var(--max-breite);
  margin: 0 auto;
  padding: 1.25rem 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.30);
}
.footer-bottom-inner a {
  color: rgba(255, 255, 255, 0.30);
  text-decoration: none;
  transition: color var(--transition);
}
.footer-bottom-inner a:hover { color: var(--farbe-gold); text-decoration: none; }


/* Öffnungszeiten-Tabelle im Footer */
.site-footer .oeffnungszeiten-tabelle td, .site-footer .oeffnungszeiten-tabelle th {
  color: rgba(255,255,255,0.50);
}

.site-footer .oeffnungszeiten-tabelle td:first-child, .site-footer .oeffnungszeiten-tabelle th {
  color: var(--farbe-weiss);
}
/* ==========================================================================
   BREADCRUMB
   ========================================================================== */
.breadcrumb {
  background: var(--farbe-creme-dunkel);
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--farbe-grau-hell);
}
.breadcrumb-inner {
  max-width: var(--max-breite);
  margin: 0 auto;
  padding: 0 2rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  font-size: 0.85rem;
  color: var(--farbe-text-hell);
}
.breadcrumb-inner a { color: var(--farbe-gold-dunkel); text-decoration: none; }
.breadcrumb-inner a:hover { color: var(--farbe-gold); text-decoration: none; }
.breadcrumb-inner .trenner { color: var(--farbe-grau); }
/* CMS verwendet <ol> im .container */
.breadcrumb ol {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  list-style: none;
  font-size: 0.85rem;
  color: var(--farbe-text-hell);
}
.breadcrumb ol li::after { content: '/'; margin-left: 0.5rem; color: var(--farbe-grau); }
.breadcrumb ol li:last-child::after { display: none; }
.breadcrumb ol a { color: var(--farbe-gold-dunkel); text-decoration: none; }
.breadcrumb ol a:hover { color: var(--farbe-gold); }

/* ==========================================================================
   SEITE-HEADER (Unterseiten-Banner mit Hintergrundbild)
   ========================================================================== */
.seite-header {
  background: linear-gradient(135deg, var(--farbe-dunkel) 0%, var(--farbe-dunkel-hell) 100%);
  padding: 5rem 0 3rem;
  position: relative;
  overflow: hidden;
}
.seite-header::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(var(--farbe-text-rgb), 0.55);
}
.seite-header .container { position: relative; z-index: 1; }
.seite-header h1 {
  color: var(--farbe-weiss);
  font-size: clamp(1.75rem, 3.5vw, 2.75rem);
  margin-bottom: 0.75rem;
}
.seite-header .untertitel,
.seite-header .container > p {
  color: rgba(255, 255, 255, 0.75);
  font-size: 1.1rem;
  max-width: 560px;
}

/* ==========================================================================
   SEITE-INHALT (einfache Inhaltsseiten wie Online-Termin)
   ========================================================================== */
.seite-inhalt {
  padding: var(--abstand-m) 0;
  background: var(--farbe-creme);
}
.seite-inhalt h1,
.seite-inhalt h2 { color: var(--farbe-dunkel); margin-bottom: 1rem; }
.seite-inhalt p { color: var(--farbe-text-hell); line-height: 1.8; margin-bottom: 1rem; }
.seite-inhalt a { color: var(--farbe-gold-dunkel); }

/* ==========================================================================
   WILLKOMMEN-SECTION
   ========================================================================== */
.willkommen-section {
  background: var(--farbe-creme);
  padding: var(--abstand-l) 0;
}
.willkommen-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--abstand-m);
  align-items: center;
}
.willkommen-bild {
  position: relative;
  border-radius: var(--radius-l);
  overflow: hidden;
  box-shadow: var(--schatten-l);
}
.willkommen-bild img {
  width: 100%;
  height: 480px;
  object-fit: cover;
  display: block;
}
.willkommen-badge {
  position: absolute;
  bottom: 1.5rem;
  right: 1.5rem;
  background: var(--farbe-gold);
  color: var(--farbe-dunkel);
  padding: 1rem 1.25rem;
  border-radius: var(--radius-m);
  text-align: center;
  font-weight: 700;
  font-size: 0.8rem;
  box-shadow: var(--schatten-gold);
}
.willkommen-inhalt { padding: 1rem 0; }
.willkommen-stats {
  display: flex;
  gap: 2rem;
  margin-top: 2rem;
  flex-wrap: wrap;
}
.stat-item { text-align: center; }
.stat-item strong {
  display: block;
  font-size: 2rem;
  font-weight: 800;
  color: var(--farbe-gold);
  line-height: 1;
}
.stat-item span {
  font-size: 0.8rem;
  color: var(--farbe-text-hell);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* ==========================================================================
   HIGHLIGHT-SECTION
   ========================================================================== */
.highlight-section {
  background: var(--farbe-dunkel);
  padding: var(--abstand-m) 0;
  text-align: center;
}
.highlight-section .section-titel { color: var(--farbe-weiss); }
.highlight-section .section-label { color: var(--farbe-gold); }
.highlight-section .section-untertitel { color: rgba(255,255,255,0.65); }
.highlight-section p { color: rgba(255,255,255,0.7); }
/* Fund 2026-08-30: die echte Vorlage liefert .section-header (nicht .section-titel/
   .section-untertitel, die es im Markup gar nicht gibt) - dadurch griffen die beiden
   Regeln oben nie, und h2/Label/Linie blieben in ihrer dunklen Standardfarbe (fuer
   helle Section-Hintergruende gedacht) auf dem dunklen Highlight-Hintergrund praktisch
   unlesbar. Zusaetzlich fehlte .vorteile-grid/.vorteil-item/.vorteil-icon komplett -
   die 4 Karten rendern dadurch bisher als voellig unstyled purer Text. */
.highlight-section .section-header .section-label,
.highlight-section .section-header .section-label::before {
  color: var(--farbe-gold);
  background: var(--farbe-gold);
}
.highlight-section .section-header .section-linie { background: var(--farbe-gold); }
.highlight-section .section-header h2 { color: var(--farbe-weiss); }
.highlight-section .section-header p { color: rgba(255,255,255,0.7); }

.vorteile-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--abstand-s);
  margin-top: var(--abstand-s);
}
.vorteil-item { text-align: center; }
.vorteil-icon {
  width: 3.5rem;
  height: 3.5rem;
  margin: 0 auto 1.1rem;
  background: var(--farbe-gold);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--farbe-dunkel);
  font-size: 1.3rem;
}
.vorteil-item h3 { color: var(--farbe-weiss); font-size: 1.1rem; margin-bottom: 0.5rem; }
.vorteil-item p { color: rgba(255,255,255,0.7); font-size: 0.92rem; line-height: 1.6; margin: 0; }
@media (max-width: 900px) {
  .vorteile-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .vorteile-grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   CTA-PARALLAX-SECTION
   ========================================================================== */
.cta-parallax-section {
  background-color: var(--farbe-dunkel);
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  padding: var(--abstand-m) 0;
  text-align: center;
  position: relative;
  overflow: hidden;
}
/* Das echte Live-Markup rendert das Overlay als eigenes CMS-Element
   (<div class="cta-parallax-overlay">), nicht als ::before — die vorherige
   ::before-Regel griff dadurch nie, das rohe Kundenbild blieb komplett sichtbar,
   der weisse Text darauf faktisch teils unlesbar. Einheitliches, ausreichend
   deckendes Overlay statt Verlauf (identische Begruendung wie .praxis-section
   weiter unten: ein von 0.12 bis 0.9 reichender Verlauf ist am hellen Ende
   praktisch durchsichtig und lässt weissen Text bei ungünstiger Bildhelligkeit
   auf ca. 1.5:1 fallen). */
.cta-parallax-overlay {
  position: absolute;
  inset: 0;
  background: rgba(var(--farbe-text-rgb), 0.86);
}
.cta-parallax-section .container,
.cta-parallax-inhalt {
  position: relative;
  z-index: 1;
  max-width: 680px;
  margin: 0 auto;
}
/* Live-Markup nutzt auf .cta-parallax-section bereits gezielt die Klasse
   .section-label-hell (statt der goldenen Standardfarbe) — hier auf helles
   Weiss umgeschaltet. Mit dem neuen 0.86-Overlay erreicht selbst das rohe
   --farbe-gold inzwischen rechnerisch ~5.0:1 (der urspruengliche, viel
   schwaechere Verlauf haette dagegen im hellen Bereich deutlich darunter
   gelegen), Weiss 90% liegt mit >=9.6:1 nochmal sicherer darueber und passt
   zur hellen Bildsprache dieser CTA-Section. */
.cta-parallax-inhalt .section-label-hell,
.cta-parallax-inhalt .section-label-hell::before {
  color: rgba(255, 255, 255, 0.9);
}
.cta-parallax-inhalt .section-label-hell::before { background: rgba(255, 255, 255, 0.9); }
.cta-parallax-inhalt h2 { color: var(--farbe-weiss); margin-bottom: 1rem; }
.cta-parallax-inhalt p { color: rgba(255, 255, 255, 0.85); margin-bottom: 2rem; }
.cta-aktionen {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
}
@media (max-width: 768px) {
  .cta-aktionen { flex-direction: column; align-items: stretch; }
  .cta-aktionen .btn { justify-content: center; }
}

/* ==========================================================================
   NATUR-ZITAT-SECTION
   ========================================================================== */
.natur-zitat-section {
  background: var(--farbe-gold-bg);
  padding: var(--abstand-m) 0;
  text-align: center;
}
.zitat-inhalt { max-width: 720px; margin: 0 auto; }
.zitat-anfuehrung {
  font-size: 4rem;
  color: var(--farbe-gold);
  line-height: 1;
  margin-bottom: 0.5rem;
  font-family: Georgia, serif;
}
.zitat-text {
  font-size: clamp(1.1rem, 2vw, 1.4rem);
  color: var(--farbe-dunkel);
  font-style: italic;
  line-height: 1.7;
  margin-bottom: 1rem;
}
.zitat-quelle {
  font-size: 0.875rem;
  color: var(--farbe-text-hell);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

/* ==========================================================================
   REINE-PARALLAX-SECTION
   ========================================================================== */
.reine-parallax-section {
  background-color: var(--farbe-dunkel);
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  min-height: 420px;
  padding: var(--abstand-m) 0;
  position: relative;
  overflow: hidden;
}
.reine-parallax-overlay {
  position: absolute;
  inset: 0;
  background: rgba(var(--farbe-text-rgb), 0.7);
}
/* CMS fügt neben dem per Inline-Style gesetzten background-image zusätzlich
   ein <img class="parallax-helper-img"> ein (Lade-/Screenreader-Hilfselement,
   nicht Teil des visuellen Designs) — bei allen drei Parallax-Sections
   ausblenden, sonst rendert ein riesiges, unskaliertes Rohbild im Fluss. */
.parallax-helper-img {
  display: none;
}
.reine-parallax-section .container { position: relative; z-index: 1; }
.reine-parallax-section h2 { color: var(--farbe-weiss); }
.reine-parallax-section p { color: rgba(255,255,255,0.7); }

/* ==========================================================================
   FLOAT-SECTION
   ========================================================================== */
.float-section {
  padding: var(--abstand-l) 0;
}
/* Hintergrund-Farbwechsel: siehe seitenweiter FARBRHYTHMUS-JS-Block unten */
.float-section .container::after { content: ''; display: table; clear: both; }
/* Schutz gegen unausgewogenes HTML aus der geteilten CMS-Vorlage: das erste
   schliessende </div> der Vorlage schliesst faktisch schon den aeusseren .container
   VOR der <h3 class="container">/<div class="container">-Fortsetzung, wodurch der
   Browser beide als direkte Geschwister von .float-section parst (kein
   Nachfahren-Verhaeltnis mehr zum aeusseren .container, .container .container
   matched hier daher nicht). Live bestaetigt: .float-section hat 3 direkte
   .container-Kinder (DIV/H3/DIV) statt Verschachtelung — identischer Bug wie
   main1.css (Commit 895de81) und main2.css (Commit 390c0f0). */
.float-section > .container ~ .container {
  max-width: var(--max-breite);
  margin: 0 auto;
  padding: 0 2rem;
}
.float-img-links {
  float: left;
  width: 44%;
  margin: 0 2rem 1.5rem 0;
  border-radius: var(--radius-l);
  overflow: hidden;
  box-shadow: var(--schatten-m);
}
.float-img-rechts {
  float: right;
  width: 44%;
  margin: 0 0 1.5rem 2rem;
  border-radius: var(--radius-l);
  overflow: hidden;
  box-shadow: var(--schatten-m);
}
.float-img-links img,
.float-img-rechts img { width: 100%; height: auto; display: block; }
.img-group-right {
  float: right;
  width: 44%;
  margin: 0 0 1.5rem 2rem;
}

/* ==========================================================================
   TEXTBLOCK-SECTION (fehlte komplett — echtes Markup nutzt .textblock-section
   .textblock-einspaltig ODER .textblock-zwei-ueberschriften, .textblock-linie
   als Trennlinie unter der Überschrift, .textblock-spalte als Spalten-Wrapper
   bei der Zwei-Spalten-Variante)
   PFLICHT: nth-of-type(even) — KEIN nth-child!
   ========================================================================== */
.textblock-section {
  padding: var(--abstand-l) 0;
}
/* Hintergrund-Farbwechsel: siehe seitenweiter FARBRHYTHMUS-JS-Block unten */
.textblock-section h2,
.textblock-section h3 {
  font-size: clamp(1.6rem, 2.8vw, 2.2rem);
  font-weight: 800;
  color: var(--farbe-dunkel);
  line-height: 1.25;
  margin: 0 0 1.25rem;
}
.textblock-section p {
  color: var(--farbe-text-hell);
  line-height: 1.85;
  margin: 0 0 1rem;
}
.textblock-section ul li,
.textblock-section ol li {
  position: relative;
  padding-left: 1.2rem;
  margin-bottom: 0.5rem;
  color: var(--farbe-text-hell);
  line-height: 1.75;
  list-style: none;
}
.textblock-section ul li::before {
  content: '›';
  position: absolute;
  left: 0;
  color: var(--farbe-gold);
  font-weight: 700;
}
.textblock-linie {
  width: 48px;
  height: 3px;
  background: var(--farbe-gold);
  border-radius: 2px;
  margin: 0 0 1.5rem;
}
.textblock-einspaltig .textblock-inhalt {
  max-width: 780px;
  margin: 0 auto;
}
.textblock-spalten {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--abstand-s);
  align-items: start;
}
.textblock-spalte p { margin-bottom: 1rem; }
/* CMS-Video-Einbettung innerhalb .textblock-einspaltig (welcome-video__*) */
.welcome-video__frame {
  border-radius: var(--radius-l);
  overflow: hidden;
  box-shadow: var(--schatten-m);
  margin-top: 1rem;
}
.welcome-video__frame video { width: 100%; height: auto; display: block; }

/* ==========================================================================
   SCHNELLINFOS-SECTION
   ========================================================================== */
.schnellinfos-section {
  background: var(--farbe-dunkel-tief);
  padding: var(--abstand-s) 0;
}
.schnellinfos-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
}
.schnellinfo-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.5rem 2rem;
  border-right: 1px solid rgba(var(--farbe-gold-rgb), 0.15);
}
.schnellinfo-item:last-child { border-right: none; }
.schnellinfo-icon {
  width: 2.5rem;
  height: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--farbe-gold);
  font-size: 1.25rem;
  flex-shrink: 0;
}
.schnellinfo-text strong {
  display: block;
  color: var(--farbe-weiss);
  font-size: 0.875rem;
  font-weight: 700;
}
.schnellinfo-text span {
  font-size: 0.8rem;
  color: rgba(255,255,255,0.5);
}

/* ==========================================================================
   GRUPPEN-SECTION (Leistungs-Übersicht mit Bildern)
   ========================================================================== */
.gruppen-section {
  padding: var(--abstand-l) 0;
}
/* Hintergrund-Farbwechsel: siehe seitenweiter FARBRHYTHMUS-JS-Block unten */
.gruppen-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--abstand-s);
}
.gruppe-karte {
  background: var(--farbe-weiss);
  border-radius: var(--radius-l);
  overflow: hidden;
  box-shadow: var(--schatten-s);
  transition: transform var(--transition), box-shadow var(--transition);
  border: 1px solid rgba(var(--farbe-gold-rgb), 0.1);
}
.gruppe-karte:hover {
  transform: translateY(-4px);
  box-shadow: var(--schatten-m);
}
.gruppe-bild {
  overflow: hidden;
  position: relative;
}
.gruppe-bild img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  display: block;
  transition: transform var(--transition);
}
.gruppe-karte:hover .gruppe-bild img { transform: scale(1.05); }
.gruppe-bild-icon {
  position: absolute;
  bottom: 1rem;
  right: 1rem;
  width: 2.5rem;
  height: 2.5rem;
  background: var(--farbe-gold);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--farbe-dunkel);
  font-size: 1rem;
}
.gruppen-icon {
  width: 3rem;
  height: 3rem;
  background: var(--farbe-gold);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--farbe-dunkel);
  font-size: 1.1rem;
  margin: 0 auto 1rem;
}
.gruppe-inhalt { padding: 1.5rem; }
.gruppe-inhalt h3 {
  font-size: 1rem;
  color: var(--farbe-dunkel);
  margin-bottom: 0.5rem;
  font-weight: 700;
}
.gruppe-inhalt p { font-size: 0.875rem; color: var(--farbe-text-hell); line-height: 1.6; }
.gruppe-mehr {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--farbe-gold-dunkel);
  font-size: 0.85rem;
  font-weight: 700;
  text-decoration: none;
  margin-top: 1rem;
  transition: gap var(--transition), color var(--transition);
}
.gruppe-mehr:hover { gap: 0.75rem; color: var(--farbe-gold); text-decoration: none; }

/* ==========================================================================
   LEISTUNG-BILD-KARTE
   ========================================================================== */
.leistung-bild-karte {
  background: var(--farbe-weiss);
  border-radius: var(--radius-l);
  overflow: hidden;
  box-shadow: var(--schatten-s);
  border: 1px solid rgba(var(--farbe-gold-rgb), 0.1);
  transition: transform var(--transition), box-shadow var(--transition);
}
.leistung-bild-karte:hover {
  transform: translateY(-4px);
  box-shadow: var(--schatten-m);
}
.leistung-bild { overflow: hidden; }
.leistung-bild img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  display: block;
  transition: transform var(--transition);
}
.leistung-bild-karte:hover .leistung-bild img { transform: scale(1.05); }
.karte-inhalt { padding: 1.5rem; }
.karte-inhalt h3 {
  font-size: 1rem;
  color: var(--farbe-dunkel);
  font-weight: 700;
  margin-bottom: 0.5rem;
}
.karte-inhalt p { font-size: 0.875rem; color: var(--farbe-text-hell); line-height: 1.6; }

/* ==========================================================================
   TEAM-FOTO-KARTE (Behandler-Seite)
   ========================================================================== */
.team-foto-karte {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 2.5rem;
  margin-bottom: 2.5rem;
}

.team-foto-karte:last-child {
  margin-bottom: 0;
}

.team-foto-karte .team-bild {
  flex-shrink: 0;
  width: 240px;
  height: 280px;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.12);
  outline: 2px solid var(--farbe-gold);
  outline-offset: 3px;
}

.team-foto-karte .team-bild img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  transition: transform 0.4s ease;
  display: block;
}

.team-foto-karte:hover .team-bild img {
  transform: scale(1.05);
}

.team-foto-karte .team-info {
  flex: 1;
  background: var(--farbe-weiss);
  border-radius: var(--radius-l);
  box-shadow: var(--schatten-s);
  border: 1px solid var(--farbe-grau-hell);
  padding: 2rem 2.5rem;
}

.team-foto-karte .team-name { font-size: 1.3rem; font-weight: 700; color: var(--farbe-dunkel); margin-bottom: 0.3rem; }
.team-foto-karte .team-titel { font-size: 0.82rem; color: var(--farbe-gold-dunkel); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 1rem; display: block; }
.team-vita { font-size: 0.9rem; color: var(--farbe-text-hell); line-height: 1.8; }
.team-vita ul { list-style: none; margin-top: 0.8rem; }
.team-vita ul li { padding: 0.3rem 0; border-bottom: 1px solid var(--farbe-grau-hell); display: flex; gap: 1rem; }
.team-vita ul li .vita-jahr { color: var(--farbe-gold); font-weight: 700; min-width: 80px; font-size: 0.82rem; }

/* --------------------------------------------------------------------------
   TEAM-KACHELN — Karten-Grid für team.html
   -------------------------------------------------------------------------- */
.team-kacheln-section {
  padding: var(--abstand-l, 5rem) 0;
}

/* Hintergrund-Farbwechsel: siehe seitenweiter FARBRHYTHMUS-JS-Block unten */

.team-kacheln-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.75rem;
}

.team-kachel {
  background: var(--farbe-weiss);
  border-radius: var(--radius-l);
  overflow: hidden;
  border: 1px solid var(--farbe-grau-hell);
  box-shadow: var(--schatten-s);
  transition: transform 0.28s ease, box-shadow 0.28s ease;
  display: flex;
  flex-direction: column;
}

.team-kachel:hover {
  transform: translateY(-6px);
  box-shadow: var(--schatten-m);
}

.team-kachel-bild {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
}

.team-kachel-bild img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 20%;
  display: block;
  transition: transform 0.45s ease;
}

.team-kachel:hover .team-kachel-bild img {
  transform: scale(1.06);
}

.team-kachel-bild-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent 55%, rgba(0,0,0,0.25) 100%);
  pointer-events: none;
}

.team-kachel-info {
  padding: 1.25rem 1.2rem 1.5rem;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.team-kachel-abteilung {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--farbe-gold);
  margin: 0;
}

.team-kachel-name {
  font-size: 1.08rem;
  font-weight: 700;
  color: var(--farbe-dunkel);
  margin: 0.1rem 0 0;
  line-height: 1.3;
}

.team-kachel-rolle {
  font-size: 0.82rem;
  color: var(--farbe-text-hell);
  margin: 0;
}

.team-kachel-beschreibung {
  font-size: 0.82rem;
  color: var(--farbe-text-hell);
  line-height: 1.55;
  margin: 0.6rem 0 0;
  padding-top: 0.6rem;
  border-top: 1px solid var(--farbe-grau-hell);
}

/* ==========================================================================
   PRAXIS-SECTION (Parallax mit Stats)
   ========================================================================== */
.praxis-section {
  background-color: var(--farbe-dunkel);
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  padding: var(--abstand-l) 0;
  position: relative;
  overflow: hidden;
}
/* Der urspruengliche Verlauf ging von rgba(gold,0.08) (praktisch durchsichtig) bis
   rgba(dunkel,0.95) — am hellen Ende blieb das Kundenbild fast ungedaempft sichtbar,
   wodurch weisser Text dort auf ca. 1.0-1.3:1 Kontrast fiel (rechnerisch geprueft,
   ueber alle Verlaufspositionen 0-30%). Der Text (.praxis-fakt-text) kann je nach
   Bildbreite/Zeilenumbruch an jeder Stelle der Section stehen, ein Verlauf ist daher
   fuer weissen Text nicht sicher. Einheitliches, ausreichend deckendes Overlay statt
   Verlauf — analog main4.css, dort bereits als sicheres Muster geprueft. */
.praxis-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(var(--farbe-text-rgb), 0.86);
}
.praxis-inhalt { position: relative; z-index: 1; }
/* h2 erbt global color:var(--farbe-dunkel) (Zeile ~126) — dieselbe Variable, die
   .praxis-section auch als eigenen Hintergrund nutzt. In Basis + allen 3
   Farbvarianten faerbt --farbe-dunkel Hintergrund UND Ueberschrift in derselben
   Farbfamilie, wodurch "Erfahrung sorgt fuer Erfolg" auf dem dunklen Overlay
   praktisch unlesbar wurde (0.0-0.2:1, der urspruengliche Nutzer-Befund). Analog zu
   .reine-parallax-section h2/.highlight-section .section-titel/.leistungen-section
   .section-titel (alle bereits korrekt auf --farbe-weiss gesetzt) hier ergaenzt. */
.praxis-inhalt h2 { color: var(--farbe-weiss); }
.praxis-inhalt > p { color: rgba(255, 255, 255, 0.75); }
.praxis-fakten {
  display: flex;
  gap: 3rem;
  flex-wrap: wrap;
  margin-top: 2.5rem;
}
.praxis-fakt { text-align: center; flex: 1 1 120px; }
.praxis-fakt-zahl {
  display: block;
  font-size: 3rem;
  font-weight: 800;
  color: var(--farbe-gold);
  line-height: 1;
  margin-bottom: 0.5rem;
}
/* Echtes Markup nutzt .praxis-fakt-text mit einem vollen Satz (nicht .praxis-fakt-label
   mit Kurz-Label, das ist ein toter Selektor aus dem alten .praxis-fakten-section-Block
   weiter oben in dieser Datei, Zeile ~1115-1149, dort weiterhin ungenutzt liegen
   gelassen). Kein text-transform:uppercase auf einem ganzen Satz (Grossbuchstaben-
   Schreien), stattdessen line-height fuer mehrzeiligen Flusstext. rgba(weiss,0.85) auf
   dem neuen flachen Overlay (0.86 Deckkraft) erreicht selbst ueber rein weissem
   Bildbereich >=7.6:1 (rechnerisch geprueft), weit ueber der 4.5:1-Schwelle. */
.praxis-fakt-text {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.6;
  font-weight: 400;
  letter-spacing: normal;
}

/* ==========================================================================
   PRAXIS-INFO-SECTION (Öffnungszeiten + Bild)
   ========================================================================== */
.praxis-info-section {
  background: var(--farbe-creme);
  padding: var(--abstand-l) 0;
}
.praxis-info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--abstand-m);
  align-items: start;
}
.praxis-info-text h2 { color: var(--farbe-dunkel); margin-bottom: 1rem; }
.praxis-info-text p { color: var(--farbe-text-hell); line-height: 1.8; margin-bottom: 1rem; }
.oeffnung-box {
  background: var(--farbe-gold-bg);
  border: 1px solid rgba(var(--farbe-gold-rgb), 0.2);
  border-radius: var(--radius-m);
  padding: 1.5rem;
  margin-top: 1.5rem;
}
.oeffnung-zeile {
  display: flex;
  justify-content: space-between;
  padding: 0.5rem 0;
  font-size: 0.9rem;
  border-bottom: 1px solid rgba(var(--farbe-gold-rgb), 0.1);
  color: var(--farbe-text-mittel);
}
.oeffnung-zeile:last-child { border-bottom: none; }
.oeffnung-zeile strong { color: var(--farbe-dunkel); }
.praxis-info-bild {
  border-radius: var(--radius-l);
  overflow: hidden;
  box-shadow: var(--schatten-l);
}
.praxis-info-bild img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ==========================================================================
   BEWERTUNGEN-SECTION
   ========================================================================== */
.bewertungen-section {
  background: var(--farbe-creme-dunkel);
  padding: var(--abstand-l) 0;
}
.bewertungen-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--abstand-s);
}
.bewertung-karte {
  background: var(--farbe-weiss);
  border-radius: var(--radius-l);
  padding: 2rem;
  box-shadow: var(--schatten-s);
  border: 1px solid rgba(var(--farbe-gold-rgb), 0.1);
  transition: box-shadow var(--transition);
}
.bewertung-karte.featured {
  border-color: rgba(var(--farbe-gold-rgb), 0.4);
  box-shadow: var(--schatten-gold);
}
.bewertung-sterne { color: var(--farbe-gold); font-size: 1rem; margin-bottom: 1rem; }
.bewertung-text {
  font-size: 0.95rem;
  color: var(--farbe-text-mittel);
  line-height: 1.7;
  margin-bottom: 1.5rem;
  font-style: italic;
}
.bewertung-autor {
  display: flex;
  align-items: center;
  gap: 0.875rem;
}
.bewertung-avatar {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: var(--farbe-gold-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--farbe-gold-dunkel);
  font-weight: 700;
  font-size: 0.9rem;
  flex-shrink: 0;
}
.bewertung-autor-name {
  font-weight: 700;
  font-size: 0.875rem;
  color: var(--farbe-dunkel);
}

/* ==========================================================================
   ANFAHRT-SECTION (zusätzliche Klassen)
   ========================================================================== */
.anfahrt-section {
  background: var(--farbe-creme);
  padding: var(--abstand-l) 0;
}
.anfahrt-grid {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: var(--abstand-m);
  align-items: start;
}
.anfahrt-info h2 { color: var(--farbe-dunkel); margin-bottom: 1rem; }
.anfahrt-info p { color: var(--farbe-text-hell); line-height: 1.8; }
.anfahrt-kontakt-liste {
  list-style: none;
  padding: 0;
  margin: 1.5rem 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.anfahrt-ico {
  color: var(--farbe-gold);
  margin-right: 0.5rem;
  font-size: 0.9rem;
}
.anfahrt-karte-wrapper {
  border-radius: var(--radius-l);
  overflow: hidden;
  box-shadow: var(--schatten-l);
}
.anfahrt-karte { width: 100%; height: 400px; }

/* OpenLayers-Karte */
.ol-viewport { border-radius: var(--radius-l); }
.ol-zoom { top: 1rem; left: 1rem; }
.ol-zoom .ol-zoom-in,
.ol-zoom .ol-zoom-out {
  background: var(--farbe-weiss);
  color: var(--farbe-dunkel);
  border: 1px solid var(--farbe-grau-hell);
  width: 2rem;
  height: 2rem;
  font-size: 1.1rem;
  border-radius: var(--radius-s);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.ol-attribution { display: none; }

/* ==========================================================================
   KONTAKT-GRID (Kontaktdaten-Kacheln)
   ========================================================================== */
.kontakt-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--abstand-s);
  margin-bottom: var(--abstand-m);
}
.kontakt-item {
  background: var(--farbe-weiss);
  border-radius: var(--radius-m);
  padding: 2rem;
  text-align: center;
  box-shadow: var(--schatten-s);
  border: 1px solid rgba(var(--farbe-gold-rgb), 0.1);
}
.kontakt-icon {
  width: 3.5rem;
  height: 3.5rem;
  background: var(--farbe-gold);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--farbe-dunkel);
  font-size: 1.25rem;
  margin: 0 auto 1rem;
}
.kontakt-item-text h3 {
  font-size: 0.875rem;
  color: var(--farbe-text-hell);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 0.5rem;
}
.kontakt-item-text a,
.kontakt-item-text p {
  font-size: 1rem;
  font-weight: 600;
  color: var(--farbe-dunkel);
}
.kontakt-item-text a:hover { color: var(--farbe-gold); }
.oeffnungszeiten { margin-top: 0.5rem; }
.oezeit-zeile {
  display: flex;
  justify-content: space-between;
  font-size: 0.875rem;
  padding: 0.3rem 0;
  border-bottom: 1px solid var(--farbe-grau-hell);
  color: var(--farbe-text-mittel);
}
.oezeit-zeile:last-child { border-bottom: none; }

/* ==========================================================================
   SLIDER-CONTAINER (alternativer CMS-Slider)
   ========================================================================== */
.slider-container {
  position: relative;
  overflow: hidden;
}
.slider-label {
  display: inline-block;
  background: var(--farbe-gold);
  color: var(--farbe-dunkel);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.3rem 0.75rem;
  border-radius: var(--radius-pill);
  margin-bottom: 0.75rem;
}
.slider-aktionen {
  display: flex;
  gap: 1rem;
  margin-top: 2rem;
  flex-wrap: wrap;
}
.slider-pfeil {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  border: 2px solid var(--farbe-gold);
  color: var(--farbe-gold);
  background: transparent;
  cursor: pointer;
  transition: all var(--transition);
}
.slider-pfeil:hover {
  background: var(--farbe-gold);
  color: var(--farbe-dunkel);
}

/* ==========================================================================
   BTN-AKZENT / BTN-HELL
   ========================================================================== */
.btn-akzent {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--farbe-gold);
  color: var(--farbe-dunkel);
  padding: 0.875rem 2rem;
  border-radius: var(--radius-pill);
  font-weight: 700;
  font-size: 0.9rem;
  text-decoration: none;
  transition: all var(--transition);
  border: none;
  cursor: pointer;
}
.btn-akzent:hover {
  background: var(--farbe-gold-hell);
  transform: translateY(-2px);
  box-shadow: var(--schatten-gold);
  text-decoration: none;
  color: var(--farbe-dunkel);
}
.btn-hell {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: transparent;
  color: var(--farbe-weiss);
  padding: 0.875rem 2rem;
  border-radius: var(--radius-pill);
  font-weight: 600;
  font-size: 0.9rem;
  text-decoration: none;
  border: 2px solid rgba(255,255,255,0.5);
  transition: all var(--transition);
}
.btn-hell:hover {
  border-color: var(--farbe-gold);
  color: var(--farbe-gold);
  text-decoration: none;
}

/* ==========================================================================
   SEITEN-LAYOUT — Unterseiten
   ========================================================================== */

/* ==========================================================================
   SEITEN-HERO (Unterseiten)
   ========================================================================== */
.seiten-hero {
  background: linear-gradient(135deg, var(--farbe-dunkel) 0%, var(--farbe-dunkel-hell) 100%);
  padding: 4rem 0;
  text-align: left;
}
.seiten-hero-inner {
  max-width: var(--max-breite);
  margin: 0 auto;
  padding: 0 2rem;
}
.seiten-hero h1 {
  color: var(--farbe-weiss);
  font-size: clamp(1.75rem, 3.5vw, 2.5rem);
  margin-bottom: 0.75rem;
}
.seiten-hero .untertitel {
  color: rgba(255, 255, 255, 0.75);
  font-size: 1rem;
  max-width: 560px;
  font-weight: 300;
}

/* ==========================================================================
   RESPONSIVE — Tablet 1024px
   ========================================================================== */
@media (max-width: 1024px) {
  .leistungen-grid { grid-template-columns: repeat(2, 1fr); }
  .fakten-grid { grid-template-columns: repeat(2, 1fr); }
  .fakten-grid .praxis-fakt:nth-child(2n) { border-right: none; }
  .fakten-grid .praxis-fakt { border-bottom: 1px solid rgba(var(--farbe-gold-rgb), 0.1); }
  .team-kacheln-grid { grid-template-columns: repeat(2, 1fr); }
  .kontakt-layout { grid-template-columns: 1fr; gap: 2.5rem; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 2rem; }
  .anfahrt-a-grid { grid-template-columns: 1fr; }
  .bildspalten-grid { gap: 2.5rem; }
}

/* ==========================================================================
   RESPONSIVE — Mobil 768px
   ========================================================================== */
@media (max-width: 768px) {
  :root { --abstand-l: 3.5rem; }
  body { padding-top: var(--header-hoehe); }
  .header-inner { padding: 0 1.25rem; }
  /* Split-Screen Slider: auf Mobile einspaltig stapeln */
  .slider-folie {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    min-height: auto;
  }
  .slider-folie img {
    grid-column: 1;
    grid-row: 1;
    height: 250px;
  }
  .slider-inhalt {
    grid-column: 1;
    grid-row: 2;
    padding: 2.5rem 1.5rem;
    min-height: auto;
  }
  .slider-inhalt::before,
  .slider-inhalt::after { display: none; }
  .slider-punkte { left: 50%; transform: translateX(-50%); }
  .slider-pfeil-links  { right: calc(50% + 3rem); }
  .slider-pfeil-rechts { right: calc(50% - 2.5rem); }
  .slider-bereich { min-height: auto; }
  .slider-container { min-height: auto; }
  .leistungen-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; gap: 2rem; }
  .footer-bottom-inner { flex-direction: column; text-align: center; }
  .team-foto-karte { flex-direction: column; }
  .team-foto-karte .team-bild { width: 100%; height: auto; }
  .team-foto-karte .team-bild img { height: auto; min-height: unset; }
  .textblock-spalten { grid-template-columns: 1fr; gap: var(--abstand-m); }
  /* Parallax (background-attachment:fixed) auf Mobile deaktivieren:
     ruckelt auf vielen Geräten und ist auf iOS Safari nicht zuverlässig
     unterstützt — dort stattdessen normales Scrollverhalten. */
  .cta-parallax-section,
  .praxis-section,
  .reine-parallax-section { background-attachment: scroll; }
}

/* ==========================================================================
   RESPONSIVE — Mobil 640px
   bildspalten-grid ERST hier einspaltig! (niemals bei 900px!)
   ========================================================================== */
@media (max-width: 640px) {
  .bildspalten-grid,
  .bildspalten-grid-reverse {
    grid-template-columns: 1fr;
    gap: 2rem;
    direction: ltr !important;
  }
  .bildspalten-grid > *,
  .bildspalten-grid-reverse > * { direction: ltr !important; }
  .bildspalten-bild img { height: 280px; }
  .bildspalten-bild::before { display: none; }
}

/* ==========================================================================
   RESPONSIVE — Smartphone 480px
   ========================================================================== */
@media (max-width: 480px) {
  .container,
  .seiten-breite,
  .bildspalten-grid,
  .leistungen-grid,
  .fakten-grid,
  .team-grid,
  .kontakt-layout,
  .footer-grid,
  .faq-bereich,
  .anfahrt-a-grid,
  .float-section > .container ~ .container {
    padding-left: 1rem;
    padding-right: 1rem;
  }
  .slider-folie img { height: 200px; }
  .slider-inhalt p { display: none; }
  .team-kacheln-grid { grid-template-columns: 1fr; }
  .kontakt-form { padding: 1.5rem; }
  .slider-pfeil-links,
  .slider-pfeil-rechts {
    width: 2.5rem;
    height: 2.5rem;
    font-size: 0.85rem;
  }
}

.oeffnungszeiten-tabelle th { text-align: left; font-weight: inherit; }

/* CMS-Freitext-Listen (redaktionell eingefuegte <ul> ohne Klasse):
   runde, eingerueckte, goldene/farbige Bullets statt Browser-Default
   bzw. zusammenhangloser Marker durch den globalen Reset */
main ul:not([class]) {
  list-style: disc !important;
  padding-left: 1.4em;
  margin: 0.8em 0;
}

main ul:not([class]) li {
  margin-bottom: 0.35em;
}

main ul:not([class]) li::marker {
  color: currentColor;
}

/* ==========================================================================
   FARBWECHSEL (Sektionen abwechselnd) - 2026-08-26
   Alle "freien" Section-Klassen (.bildspalten-section, .team-section,
   .team-kacheln-section, .textblock-section, .float-section,
   .gruppen-section) nutzten bereits konsistent dasselbe Farbpaar
   (--farbe-creme/--farbe-gold-bg), aber jede mit einem eigenen
   klassenspezifischen nth-of-type(even/odd) - das zaehlt Position unter
   ALLEN section-Geschwistern, nicht nur gleicher Klasse, UND kollidierte
   zusaetzlich mit der fest verdrahteten --farbe-gold-bg von .faq-section
   und .natur-zitat-section. Jetzt wie main29/32: EIN JS-Mechanismus
   (js/main3.js) läuft über main > section, überspringt fest eingefärbte
   Sections (.highlight-section, .cta-parallax-section, .praxis-section,
   .slider-bereich, .natur-zitat-section, .reine-parallax-section) bei der
   Zählung, liest bei ihnen die tatsächliche Farbe aus und setzt den Takt bei
   Bedarf zurück, und weist allen übrigen Sections einheitlich abwechselnd
   .js-bg-creme/.js-bg-gold-bg zu. :where() bleibt als 0-Spezifitäts-CSS-
   only-Fallback.
   ========================================================================== */
:where(main > section:nth-of-type(odd))  { background-color: var(--farbe-creme); }
:where(main > section:nth-of-type(even)) { background-color: var(--farbe-gold-bg); }

.js-bg-creme   { background-color: var(--farbe-creme); }
.js-bg-gold-bg { background-color: var(--farbe-gold-bg); }

/* ==========================================================================
   KONTAKT-CTA-SECTION (vorlage_kontaktstreifen.htm) - 2026-08-27 ergaenzt,
   war komplett unstyled. Section-Hintergrund bewusst unangetastet.
   Icon-Text dunkel statt weiss: --farbe-gold ist ein mittleres Gold/Tan,
   weisser Text darauf faellt unter WCAG-Kontrast 4.5:1 (~2.3:1 gemessen).
   ========================================================================== */
.kontakt-cta-section { padding: var(--abstand-l) 0; }
.kontakt-cta-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 2rem; align-items: center; }
.kontakt-cta-item { display: flex; align-items: center; gap: 1rem; }
.kontakt-cta-icon {
  width: 48px; height: 48px; flex-shrink: 0;
  background: var(--farbe-gold); color: var(--farbe-dunkel);
  border-radius: var(--radius-m); display: flex; align-items: center; justify-content: center;
  font-size: 1.05rem;
}
.kontakt-cta-text strong { display: block; font-size: 0.85rem; color: var(--farbe-text); font-weight: 700; }
.kontakt-cta-text span, .kontakt-cta-text a { font-size: 0.95rem; color: var(--farbe-dunkel); font-weight: 500; }
@media (max-width: 900px) { .kontakt-cta-grid { grid-template-columns: 1fr; gap: 1.25rem; } }