/* ==========================================================================
   VARIANTE 4 — main4.css
   Design: Frisch & Lebendig — Raleway + Terrakotta #C8552A + Salbeigrün #5C8C5A
   Natürliche Wärme + mediterrane Lebendigkeit + organische Formen
   ========================================================================== */

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

/* ==========================================================================
   CSS-VARIABLEN
   ========================================================================== */
:root {
  /* Farben */
  --farbe-terra:        #C8552A;
  --farbe-terra-dunkel: #A8401A;
  --farbe-terra-hell:   #E8704A;
  --farbe-salbei:       #5C8C5A;
  --farbe-salbei-dunkel:#3F6A3E;
  --farbe-salbei-hell:  #7AAE78;
  --farbe-ocker:        #E8A84C;
  --farbe-ocker-dunkel: #C88A30;
  --farbe-creme:        #FAF6F1;
  --farbe-creme-dunkel: #F0E8DE;
  --farbe-bg-gruen:     #EBF2EB;
  --farbe-bg-orange:    #FDF0EA;
  /* 2026-08-28: eigene Variable fuer die .position-even-Alternation (statt
     --farbe-bg-orange direkt), da Letzteres auch von .natur-zitat-section
     als FESTE Farbe genutzt wird - waeren beide an derselben Variable
     haengt, koennen sie nie unterscheidbare Farben haben, egal welchen
     Wert man setzt. Default hier = alter --farbe-bg-orange-Wert, damit
     Farbvarianten ohne eigene Ueberschreibung unveraendert bleiben. */
  --farbe-alt-even:     #FDF0EA;
  --farbe-weiss:        #ffffff;
  --farbe-dunkel:       #2C2416;
  --farbe-dunkel-2:     #3A2E1E;
  --farbe-footer:       #1A140E;
  --farbe-text:         #2C2416;
  --farbe-text-hell:    #6B5A48;
  --farbe-grau-hell:    #E8DDD4;
  --farbe-grau:         #A89888;

  /* Schatten */
  --schatten-s:  0 2px 8px  rgba(var(--farbe-terra-rgb), 0.06);
  --schatten-m:  0 4px 20px rgba(var(--farbe-terra-rgb), 0.12);
  --schatten-l:  0 8px 40px rgba(var(--farbe-terra-rgb), 0.18);

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

  /* Layout */
  --max-breite:   1200px;
  --header-hoehe: 80px;
  --radius-s:     4px;
  --radius-m:     10px;
  --radius-l:     20px;
  --radius-pill:  50px;
  --abstand-s:    2rem;
  --abstand-m:    4rem;
  --abstand-l:    6rem;
  --transition:   0.25s ease;
  --farbe-fehler:  #e74c3c;
  /* RGB-Kanäle für rgba()-Nutzung */
  --farbe-creme-rgb:  250, 246, 241;
  --farbe-dunkel-rgb:  44, 36, 22;
  --farbe-dunkel-2-rgb:  58, 46, 30;
  --farbe-fehler-rgb:  231, 76, 60;
  --farbe-salbei-rgb:  92, 140, 90;
  --farbe-salbei-dunkel-rgb: 63, 106, 62;
  --farbe-terra-rgb:  200, 85, 42;
  --farbe-text-rgb:  44, 36, 22;
}
/* 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-terra);
  --color-primary-dark:  var(--farbe-terra-dunkel);
  --color-primary-light: var(--farbe-bg-orange);
  --color-text:          var(--farbe-dunkel);
  --color-border:        var(--farbe-creme-dunkel);
}



/* ==========================================================================
   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.7;
  /* No-JS-Fallback: Zeile 1 (--header-hoehe) + geschätzte Zeile-2-Höhe.
     js/main4.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-terra); 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-terra-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-terra);
  color: var(--farbe-weiss);
  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.3;
  color: var(--farbe-dunkel);
}

h1 { font-size: clamp(1.75rem, 4vw,  3rem); }
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-block;
  color: var(--farbe-terra);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  margin-bottom: 0.75rem;
}

.section-titel {
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  font-weight: 700;
  color: var(--farbe-dunkel);
  line-height: 1.3;
  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);
}

/* Terrakotta-Akzent-Linie */
.terra-linie {
  display: block;
  width: 3rem;
  height: 3px;
  background: var(--farbe-terra);
  border-radius: 2px;
  margin: 1rem auto;
}

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

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

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

.btn-weiss {
  background: var(--farbe-weiss);
  color: var(--farbe-terra);
  border-color: var(--farbe-weiss);
}
.btn-weiss:hover {
  background: transparent;
  color: var(--farbe-weiss);
  border-color: var(--farbe-weiss);
}

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

/* Schützt gegen verschachteltes class="container" aus der geteilten, im Admin
   frei editierbaren CMS-Vorlage (z.B. <h3 class="container"> innerhalb eines
   bereits .container-umschlossenen Bereichs) — identischer Bug wie main1-3.css. */
.container .container {
  max-width: none;
  padding: 0;
  margin: 0;
}

/* ==========================================================================
   HEADER — 2-stufig
   Zeile 1 (header-inner): feste Höhe --header-hoehe (Logo + Termin-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: rgba(var(--farbe-creme-rgb), 0.95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 2px solid var(--farbe-terra);
  box-shadow: var(--schatten-s);
  transition: box-shadow var(--transition);
}

/* Zeile 1: Logo links | Termin-CTA (Pill) + 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.75rem;
  text-decoration: none;
  flex-shrink: 0;
}
.site-logo img {
  height: 2.5rem;
  width: auto;
  object-fit: contain;
}
.site-logo-texte {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}
.site-logo-name {
  font-size: 1rem;
  font-weight: 700;
  color: var(--farbe-dunkel);
}
.site-logo-zusatz {
  font-size: 0.72rem;
  font-weight: 400;
  color: var(--farbe-text-hell);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Zeile 2: Desktop-Navigation — eigene volle Zeile unter header-inner */
.site-nav {
  background: rgba(var(--farbe-creme-rgb), 0.95);
  border-top: 1px solid rgba(var(--farbe-terra-rgb), 0.15);
}
.site-nav-inner {
  max-width: var(--max-breite);
  margin: 0 auto;
  padding: 0.35rem 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.5rem 0.875rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--farbe-text);
  border-radius: var(--radius-pill);
  transition: color var(--transition), background var(--transition);
  white-space: nowrap;
  letter-spacing: 0.02em;
}
.site-nav-inner > ul > li > a:hover,
.site-nav-inner > ul > li > a.aktiv {
  color: var(--farbe-terra);
  background: var(--farbe-bg-orange);
  text-decoration: none;
}

/* Dropdown-Pfeil */
.site-nav li.has-dropdown > a::after,
.site-nav li.hat-dropdown > a::after {
  content: ' ▾';
  font-size: 0.7em;
  opacity: 0.6;
}

/* Dropdown */
.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-weiss);
  border: 1px solid var(--farbe-grau-hell);
  border-radius: var(--radius-l);
  box-shadow: var(--schatten-m);
  min-width: 210px;
  padding: 0.5rem 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: all var(--transition);
  z-index: 100;
  list-style: none;
  overflow: hidden;
}
.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 1rem;
  font-size: 0.875rem;
  color: var(--farbe-text);
  border-bottom: 1px solid var(--farbe-grau-hell);
  transition: background var(--transition), color var(--transition);
}
.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: var(--farbe-bg-orange);
  color: var(--farbe-terra);
  text-decoration: none;
}

/* Nav CTA (Online-Termin mobil) */
.nav-cta-item { margin-left: 0.5rem; }
.nav-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 1rem;
  background: transparent;
  border: 2px solid var(--farbe-terra);
  border-radius: var(--radius-pill);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--farbe-terra);
  transition: all var(--transition);
  white-space: nowrap;
}
.nav-cta:hover {
  background: var(--farbe-terra);
  color: var(--farbe-weiss);
  text-decoration: none;
}
/* kein ::after Pfeil auf CTA */
.nav-cta-item > a::after { display: none !important; }

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

/* Termin-CTA (Desktop) */
.header-termin-cta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1.25rem;
  background: var(--farbe-terra);
  color: var(--farbe-weiss);
  border: 2px solid var(--farbe-terra);
  border-radius: var(--radius-pill);
  font-size: 0.875rem;
  font-weight: 700;
  transition: all var(--transition);
  white-space: nowrap;
  flex-shrink: 0;
  text-decoration: none;
  letter-spacing: 0.04em;
}
.header-termin-cta:hover {
  background: var(--farbe-terra-dunkel);
  border-color: var(--farbe-terra-dunkel);
  color: var(--farbe-weiss);
  transform: translateY(-2px);
  text-decoration: none;
  box-shadow: var(--schatten-m);
}

/* ==========================================================================
   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: none;
  border: 2px solid var(--farbe-terra);
  border-radius: var(--radius-m);
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
  transition: all var(--transition);
}
.burger-btn:hover {
  background: var(--farbe-terra);
}
.burger-btn:hover span { background: var(--farbe-weiss); }
.burger-btn span {
  display: block;
  width: 18px;
  height: 2px;
  background: var(--farbe-terra);
  border-radius: 1px;
  transition: all 0.3s ease;
  transform-origin: center;
}
.burger-btn.aktiv { background: var(--farbe-terra); }
.burger-btn.aktiv span { background: var(--farbe-weiss); }
.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-text-rgb), 0.5);
  z-index: 998;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.mobile-overlay.offen {
  display: block;
  opacity: 1;
}

/* ==========================================================================
   MOBILE NAV (Off-Canvas von rechts)
   ========================================================================== */

/* --------------------------------------------------------------------------
   GALERIE-SECTION
   Bento-Grid: 1. Bild groß (2×2), restliche Bilder kleiner rechts/unten
   -------------------------------------------------------------------------- */
.galerie {
  padding: var(--abstand-l, 4rem) 0;
  background: var(--farbe-creme-dunkel,
    var(--farbe-hintergrund-alt,
    var(--farbe-bg-light,
    var(--farbe-beige-dunkel,
    #f0ede8))));
}
.galerie-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: auto auto;
  gap: var(--abstand-s, 1rem);
  max-width: var(--max-breite, 1200px);
  margin: 0 auto;
  padding: 0 2rem;
}
.galerie-item {
  overflow: hidden;
  border-radius: var(--radius-l,
    var(--radius-karte,
    var(--radius-lg,
    12px)));
  position: relative;
  background: var(--farbe-dunkel-hell,
    var(--farbe-primaer-dunkel,
    var(--farbe-footer,
    #1a2a3a)));
}
.galerie-item:first-child {
  grid-column: span 2;
  grid-row: span 2;
}
.galerie-bild {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
  min-height: 180px;
}
.galerie-item:first-child .galerie-bild {
  min-height: 380px;
}
.galerie-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.0);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--transition, 0.3s ease);
}
.galerie-item:hover .galerie-bild {
  transform: scale(1.06);
}
.galerie-item:hover .galerie-overlay {
  background: rgba(0, 0, 0, 0.30);
}
/* Galerie-Header zentriert (scoped — betrifft NUR section-header innerhalb .galerie) */
.galerie .section-header {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  max-width: 640px;
  padding: 0 2rem;
}
.galerie .section-label {
  justify-content: center;
}
/* section-beschreibung: Unterzeile unter section-titel */
.section-beschreibung {
  font-size: 1rem;
  font-weight: 300;
  color: var(--farbe-text-hell, var(--farbe-muted, #5a6a7a));
  line-height: 1.8;
  margin-top: 0.5rem;
}
@media (max-width: 1024px) {
  .galerie-grid { grid-template-columns: repeat(2, 1fr); }
  .galerie-item:first-child { grid-column: span 2; grid-row: span 1; }
  .galerie-item:first-child .galerie-bild { min-height: 280px; }
}
@media (max-width: 768px) {
  .galerie-grid { grid-template-columns: repeat(2, 1fr); padding: 0 1.25rem; }
  .galerie-item:first-child { grid-column: span 2; }
}
@media (max-width: 480px) {
  .galerie-grid { grid-template-columns: 1fr; padding: 0 1rem; }
  .galerie-item:first-child { grid-column: span 1; }
}
@media (max-width: 768px) {
  .burger-btn { display: flex; }
  .header-termin-cta { 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); }

  /* Logo darf bei langen echten Praxisnamen den Burger-Button nicht aus dem
     sichtbaren Bereich schieben — min-width:0 statt ungebremstem flex-shrink:0,
     Praxisname wird bei Platzmangel per Ellipsis gekürzt statt zu überlaufen */
  .site-logo { min-width: 0; flex-shrink: 1; }
  .site-logo a { min-width: 0; flex-shrink: 1; }
  .site-logo-texte { min-width: 0; }
  .site-logo-name,
  .site-logo-zusatz {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* backdrop-filter entfernen, damit position:fixed korrekt relativ zum Viewport ist */
  .site-header {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: var(--farbe-creme);
  }

  .site-nav {
    position: fixed;
    top: 0;
    right: -100%;
    width: min(320px, 85vw);
    height: 100vh;
    background: var(--farbe-weiss);
    border-left: 3px solid var(--farbe-terra);
    border-top: none;
    box-shadow: -4px 0 30px rgba(var(--farbe-terra-rgb), 0.15);
    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 var(--farbe-grau-hell);
    border-radius: 0;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--farbe-dunkel);
    background: transparent;
  }
  .site-nav-inner > ul > li > a::after { display: none; }
  .site-nav-inner > ul > li > a:hover { color: var(--farbe-terra); background: transparent; 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 var(--farbe-grau-hell);
    color: var(--farbe-text-hell);
    background: transparent;
  }
  .site-nav li.has-dropdown > ul a:hover,
  .site-nav li.hat-dropdown > ul a:hover {
    color: var(--farbe-terra);
    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 var(--farbe-grau-hell);
    font-size: 0.9rem;
    color: var(--farbe-text-hell);
  }
  .mobile-only a:hover { color: var(--farbe-terra); text-decoration: none; }

  /* Nav-CTA in Mobile */
  .nav-cta-item { margin-left: 0; margin-top: 0.5rem; }
  .nav-cta { display: flex; justify-content: center; padding: 0.75rem 1rem; }
}

/* ==========================================================================
   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-terra);
  color: var(--farbe-weiss);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  box-shadow: var(--schatten-m);
  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-terra-dunkel);
  transform: translateY(-3px);
  box-shadow: var(--schatten-l);
}

/* ==========================================================================
   HERO-SLIDER
   ========================================================================== */
.slider-bereich {
  position: relative;
  width: 100%;
  height: 580px;
  overflow: hidden;
  background: var(--farbe-dunkel);
}
/* Wrapper zwischen .slider-bereich und den .slider-folie-Folien (id="hauptSlider").
   .slider-folie ist bereits position:absolute/inset:0 und positioniert sich damit
   schon korrekt relativ zu .slider-bereich (visuell unveraendert) — dieser
   Wrapper ergaenzt explizit width/height:100% analog zu main2/14/15/18/19.css,
   falls künftig JS/CSS direkt auf .slider-container statt .slider-bereich zielt. */
.slider-container {
  position: relative;
  width: 100%;
  height: 100%;
}
/* Diagonaler Schnitt am Ende des Sliders — der Creme-Hintergrund schneidet von rechts oben nach links unten */
.slider-bereich::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  right: 0;
  height: 80px;
  background: var(--farbe-creme);
  clip-path: polygon(0 100%, 100% 0, 100% 100%);
  z-index: 10;
  pointer-events: none;
}

.slider-folie {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.6s ease;
  pointer-events: none;
}
.slider-folie.aktiv {
  opacity: 1;
  pointer-events: auto;
}
.slider-folie img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Kontrast-Scrim — deckt die GESAMTE Slide ab (nicht nur diagonal), damit Label/H1/P
   bei JEDEM Kundenbild lesbar bleiben, unabhängig von Bildhelligkeit/Bildausschnitt.
   Der Text sitzt linksbündig (.slider-inhalt align-items:flex-start), deshalb bleibt
   der diagonale Verlauf als gestalterisches Element erhalten. Die Alpha-Werte wurden
   rechnerisch (135deg-Gradient-Projektion) so gewählt, dass selbst am unteren rechten
   Rand des Textblocks (worst case, Alpha ≈0.73 durch den Verlauf) gegen ein rein
   weißes Kundenbild noch h1 6.27:1 / p(92%-Weiß) 5.61:1 erreicht wird (beide ≥4.5:1). */
.slider-folie::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(var(--farbe-text-rgb), 0.90) 0%,
    rgba(var(--farbe-text-rgb), 0.70) 50%,
    rgba(var(--farbe-terra-rgb), 0.40) 100%
  );
  z-index: 1;
}

.slider-inhalt {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: 0 var(--abstand-m);
  max-width: var(--max-breite);
  margin: 0 auto;
  left: 50%;
  transform: translateX(-50%) translateY(24px);
  width: 100%;
  /* Hinweis: die eigentlichen Textelemente (.slider-label, h1, p, .slider-aktionen)
     sind DIREKTE Kinder von .slider-inhalt — es gibt KEINEN .slider-text-Wrapper im
     tatsächlich gerenderten Markup (curl-bestätigt). Die Entrance-Animation läuft
     deshalb direkt auf .slider-inhalt statt auf ein nie vorhandenes .slider-text. */
  opacity: 0;
  transition: opacity 0.6s ease 0.2s, transform 0.6s ease 0.2s;
}
.slider-folie.aktiv .slider-inhalt {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
/* Reduzierte Bewegung respektieren (Web Interface Guidelines): kein 24px-
   Einflug-Effekt, Text erscheint direkt an finaler Position, Opacity-
   Übergang bleibt (kein abruptes Erscheinen). Bewusst NUR "transition"
   überschrieben, NICHT "transform" — .slider-inhalt hat je nach Breakpoint
   unterschiedliche Basis-Transforms (translateX(-50%) translateY(24px)
   Desktop vs. reines translateY(24px) bei left:0 im 768px-Mobile-Breakpoint),
   ein hier hart gesetztes transform würde die Mobile-Positionierung brechen.
   Die bereits vorhandenen Transform-Regeln bleiben unverändert bestehen und
   laufen dank transition:none nur ohne Bewegung an, statt animiert. */
@media (prefers-reduced-motion: reduce) {
  .slider-inhalt,
  .slider-folie.aktiv .slider-inhalt {
    transition: opacity 0.3s ease;
  }
}

/* Terrakotta-Badge im Slider (aktuell ungenutzt von den Vorlagen, .slider-label
   deckt denselben Zweck ab — bewusst beibehalten falls künftig referenziert) */
.slider-badge {
  display: inline-block;
  background: var(--farbe-terra);
  color: var(--farbe-weiss);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.3rem 0.875rem;
  border-radius: 100px;
  margin-bottom: 1rem;
}

/* Reales Markup: .slider-inhalt > h1 (nicht h2) + > p (kein .slider-text-Wrapper) */
.slider-inhalt h1 {
  color: var(--farbe-weiss);
  font-size: clamp(1.75rem, 4vw, 3rem);
  font-weight: 700;
  line-height: 1.25;
  margin-bottom: 1rem;
  max-width: 700px;
  /* Zusätzliches Sicherheitsnetz gegen sehr helle Bildstellen, unabhängig vom Scrim */
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
}
.slider-inhalt > p {
  color: rgba(255, 255, 255, 0.92);
  font-size: clamp(0.95rem, 1.5vw, 1.05rem);
  font-weight: 400;
  margin-bottom: 2rem;
  line-height: 1.6;
  max-width: 520px;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.35);
}

/* Alias, falls künftig doch mit einem echten .slider-text-Wrapper gearbeitet wird —
   bewusst beibehalten, verhält sich dann identisch zu .slider-inhalt. */
.slider-text { max-width: 620px; }
.slider-text h2 { color: var(--farbe-weiss); font-size: clamp(1.75rem, 4vw, 3rem); font-weight: 700; line-height: 1.25; margin-bottom: 1rem; text-shadow: 0 2px 12px rgba(0, 0, 0, 0.4); }
.slider-text p { color: rgba(255, 255, 255, 0.92); font-size: clamp(0.95rem, 1.5vw, 1.05rem); font-weight: 400; margin-bottom: 2rem; line-height: 1.6; max-width: 520px; text-shadow: 0 1px 8px rgba(0, 0, 0, 0.35); }

/* Slider-Pfeile */
.slider-pfeil-links,
.slider-pfeil-rechts {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  background: rgba(255, 255, 255, 0.15);
  border: 2px solid rgba(255, 255, 255, 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);
  backdrop-filter: blur(4px);
}
.slider-pfeil-links:hover,
.slider-pfeil-rechts:hover {
  background: var(--farbe-terra);
  border-color: var(--farbe-terra);
}
.slider-pfeil-links  { left: 1.5rem; }
.slider-pfeil-rechts { right: 1.5rem; }

/* Slider-Punkte */
.slider-punkte {
  position: absolute;
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 0.5rem;
  z-index: 10;
}
.slider-punkt {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.4);
  border: none;
  cursor: pointer;
  padding: 0;
  transition: all var(--transition);
}
.slider-punkt.aktiv,
.slider-punkt:hover {
  background: var(--farbe-terra);
  transform: scale(1.3);
}

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

/* Abwechselnde Hintergründe — IMMER nth-of-type(even)! */
.bildspalten-section.position-odd {
  background: var(--farbe-creme);
}
.bildspalten-section.position-even {
  background: var(--farbe-bg-gruen);
}

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

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

/* Bild-rechts bei geraden Sections (rtl-Trick) */
.bildspalten-section.position-even .bildspalten-grid {
  direction: rtl;
}
.bildspalten-section.position-even .bildspalten-grid > * {
  direction: ltr;
}

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

.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;
}

/* ==========================================================================
   LEISTUNGEN
   ========================================================================== */
.leistungen-section {
  background: var(--farbe-bg-orange);
  padding: var(--abstand-l) 0;
  position: relative;
}
/* Diagonaler Schnitt Oberkante — Orange-BG greift von rechts oben in die Section drüber */
.leistungen-section::before {
  content: '';
  position: absolute;
  top: -60px;
  left: 0;
  right: 0;
  height: 60px;
  background: var(--farbe-bg-orange);
  clip-path: polygon(0 100%, 100% 0, 100% 100%, 0 100%);
  pointer-events: none;
}

.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: var(--farbe-weiss);
  border-radius: var(--radius-l);
  padding: 2rem;
  box-shadow: var(--schatten-s);
  border: 1px solid var(--farbe-grau-hell);
  transition: transform var(--transition), box-shadow var(--transition);
  display: flex;
  flex-direction: column;
}
.leistung-karte:hover {
  transform: translateY(-6px);
  box-shadow: var(--schatten-l);
}

.leistung-icon {
  width: 3.5rem;
  height: 3.5rem;
  background: linear-gradient(135deg, var(--farbe-terra), var(--farbe-salbei));
  border-radius: var(--radius-l);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  color: var(--farbe-weiss);
  margin-bottom: 1.25rem;
  flex-shrink: 0;
}
.leistung-titel {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--farbe-dunkel);
  margin-bottom: 0.75rem;
}
.leistung-text {
  font-size: 0.9rem;
  color: var(--farbe-text-hell);
  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-terra);
  text-decoration: none;
  transition: gap var(--transition), color var(--transition);
}
.leistung-link:hover { gap: 0.75rem; color: var(--farbe-terra-dunkel); text-decoration: none; }

/* ==========================================================================
   PRAXIS-FAKTEN (Kennzahlen)
   ========================================================================== */
.praxis-fakten-section {
  background: var(--farbe-salbei);
  padding: var(--abstand-s) 0;
  position: relative;
}
/* Diagonaler Schnitt Oberkante — Salbei-Grün von links oben (Gegenrichtung zu Leistungen) */
.praxis-fakten-section::before {
  content: '';
  position: absolute;
  top: -60px;
  left: 0;
  right: 0;
  height: 60px;
  background: var(--farbe-salbei);
  clip-path: polygon(0 0, 0 100%, 100% 100%);
  pointer-events: none;
}

.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.5rem 1rem;
  border-right: 1px solid rgba(255, 255, 255, 0.2);
}
.praxis-fakt:last-child { border-right: none; }

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

/* ==========================================================================
   ZITAT-SECTION
   ========================================================================== */
.zitat-section {
  background: linear-gradient(135deg, var(--farbe-terra) 0%, var(--farbe-terra-dunkel) 100%);
  padding: var(--abstand-l) 0;
  position: relative;
  overflow: hidden;
  text-align: center;
}
/* Diagonaler Schnitt Oberkante — Terra-Rot von links (::after, weil ::before für Deko-Zeichen belegt) */
.zitat-section::after {
  content: '';
  position: absolute;
  top: -60px;
  left: 0;
  right: 0;
  height: 60px;
  background: var(--farbe-terra);
  clip-path: polygon(0 100%, 100% 0, 100% 100%, 0 100%);
  pointer-events: none;
  z-index: 0;
}
.zitat-section::before {
  content: '"';
  position: absolute;
  top: -3rem;
  left: 5%;
  font-size: 20rem;
  font-weight: 900;
  color: rgba(255, 255, 255, 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.2rem, 2.5vw, 1.6rem);
  font-weight: 400;
  color: var(--farbe-weiss);
  line-height: 1.6;
  font-style: italic;
  max-width: 800px;
  margin: 0 auto 1.5rem;
}
.zitat-text strong {
  color: var(--farbe-ocker);
  font-weight: 700;
  font-style: normal;
}
.zitat-autor {
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.7);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  display: block;
}

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

.team-section.position-odd {
  background: var(--farbe-creme);
}

.team-section.position-even {
  /* 2026-08-28: bisher nur diese eine Regel definiert, UND mit creme statt
     orange - body ist selbst schon creme, dadurch war team-section an
     ungerader Nachbarposition (z.B. neben textblock/gruppen, die odd=creme
     nutzen) optisch ununterscheidbar. Jetzt odd=creme/even=orange wie bei
     gruppen-section/float-section/kontakt-cta-section vereinheitlicht,
     statt der bisherigen alleinstehenden even=creme-Regel (siehe
     project_farbwechsel_team_section_2026-08-28). --farbe-alt-even statt
     --farbe-bg-orange, da Letzteres direkt von .natur-zitat-section als
     FESTE Farbe genutzt wird und sonst kollidiert, siehe Kommentar bei
     .kontakt-cta-section oben und project_farbwechsel_design4_2026-08-28. */
  background: var(--farbe-alt-even);
}


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

/* Äußerer Wrapper — kein eigener Hintergrund, nur flex-Zeile */
.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;
}

/* Freistehend Foto mit Rahmen */
.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-primaer);
  outline-offset: 3px;
}

.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);
}

/* Lebenslauf-Box rechts — eigenständige Karte */
.team-info {
  flex: 1;
  background: var(--farbe-weiss);
  border-radius: var(--radius-karte, 8px);
  box-shadow: var(--schatten-karte, 0 2px 12px rgba(0,0,0,0.08));
  padding: 2rem 2.5rem;
}

.team-name {
  font-size: 1rem;
  font-weight: 700;
  color: var(--farbe-dunkel);
  margin-bottom: 0.25rem;
}
.team-funktion {
  font-size: 0.8rem;
  color: var(--farbe-terra);
  font-weight: 600;
  display: block;
  margin-bottom: 0.5rem;
}
.team-beschreibung {
  font-size: 0.875rem;
  color: var(--farbe-text-hell);
  line-height: 1.6;
}

/* ==========================================================================
   FAQ
   ========================================================================== */
.faq-section {
  background: var(--farbe-bg-gruen);
  padding: var(--abstand-l) 0;
  position: relative;
}
/* Diagonaler Schnitt Oberkante — Grün von links (Gegenrichtung zu Zitat) */
.faq-section::before {
  content: '';
  position: absolute;
  top: -60px;
  left: 0;
  right: 0;
  height: 60px;
  background: var(--farbe-bg-gruen);
  clip-path: polygon(0 0, 0 100%, 100% 100%);
  pointer-events: none;
}

.faq-bereich {
  max-width: 800px;
  margin: 0 auto;
  padding: 0 2rem;
}
/* .faq-bereich wird von der aktuellen vorlage_faq.htm nicht mehr erzeugt (Markup
   nutzt stattdessen direkt .faq-liste als Wrapper um die .faq-item-Karten,
   .snippet-wrapper sind schlichte CMS-Editor-<div>s ohne eigenes Layout) —
   .faq-bereich bewusst nicht entfernt (kein aktiver main4.css-Bug, könnte noch
   an anderer Stelle/älterer Kundenkonfiguration referenziert sein), stattdessen
   .faq-liste identisch mitgestylt. */
.faq-liste {
  max-width: 800px;
  margin: 0 auto;
  padding: 0 2rem;
}

.faq-item {
  background: var(--farbe-weiss);
  border: 1px solid var(--farbe-grau-hell);
  border-radius: var(--radius-m);
  margin-bottom: 0.75rem;
  overflow: hidden;
  transition: box-shadow var(--transition);
}
.faq-item:hover { box-shadow: var(--schatten-s); }

.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-terra); }
.faq-frage::after {
  content: '+';
  font-size: 1.4rem;
  font-weight: 300;
  color: var(--farbe-terra);
  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-terra), var(--farbe-salbei));
  border-radius: var(--radius-m);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--farbe-weiss);
  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-terra); 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-creme);
  border-radius: var(--radius-l);
  padding: 2.5rem;
  border: 1px solid var(--farbe-grau-hell);
  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: 2px 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-terra);
  box-shadow: 0 0 0 3px rgba(var(--farbe-terra-rgb), 0.15);
}
.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-terra);
  cursor: pointer;
  flex-shrink: 0;
}
.form-datenschutz a {
  color: var(--farbe-terra);
  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-salbei-rgb), 0.1);
  color: var(--farbe-salbei-dunkel);
  border: 1px solid rgba(var(--farbe-salbei-rgb), 0.3);
}
.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-bg-orange);
  padding: var(--abstand-l) 0;
}
.anfahrt-a-grid {
  max-width: var(--max-breite);
  margin: 0 auto;
  padding: 0 2rem;
  display: grid;
  /* 2026-08-28: war "1fr 2fr" - Info-Spalte (Adresse/Telefon/Öffnungszeiten)
     wurde dadurch so schmal, dass die Öffnungszeiten-Zeilen ("Mo. 8:00 –
     18:00 Uhr") umbrachen. Mindestbreite ergänzt, Kartenspalte behält
     trotzdem mehr Raum. */
  grid-template-columns: minmax(320px, 1fr) minmax(360px, 2fr);
  gap: 3rem;
  align-items: start;
}
.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);
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
}
/* Icon-Wrapper vor Adresse/Telefon/E-Mail/Öffnungszeiten (main4.css hatte
   dafür bislang 0 Regeln — Icon lief ohne Abstand direkt am Text). */
.anfahrt-a-kontakt-liste .ico {
  flex-shrink: 0;
  width: 1.1rem;
  text-align: center;
  color: color-mix(in srgb, var(--farbe-terra) 80%, black);
}
.btn-routenplaner {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  background: var(--farbe-terra);
  color: var(--farbe-weiss);
  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-terra-dunkel);
  text-decoration: none;
  transform: translateY(-2px);
}
#map-zzam,
.karte-container {
  border-radius: var(--radius-l);
  overflow: hidden;
  box-shadow: var(--schatten-m);
  height: 350px;
}

/* ==========================================================================
   SCHRÄGE LINIEN — Zusätzliche Abschnittstrenner für CMS-Sections
   Ergänzt die bestehenden Diagonalen auf leistungen, praxis-fakten, zitat, faq.
   Variante4-Technik: aktuelle Section-Farbe klebt 60px nach oben in den Vorgänger.
   ========================================================================== */

/* -- Bildspalten (odd=creme, even=bg-gruen) -------------------------------- */
.bildspalten-section { position: relative; }
.bildspalten-section.position-odd::before {
  content: ''; position: absolute;
  top: -60px; left: 0; right: 0; height: 60px;
  background: var(--farbe-creme);
  clip-path: polygon(0 0, 0 100%, 100% 100%);
  pointer-events: none;
}
.bildspalten-section.position-even::before {
  content: ''; position: absolute;
  top: -60px; left: 0; right: 0; height: 60px;
  background: var(--farbe-bg-gruen);
  clip-path: polygon(0 100%, 100% 0, 100% 100%);
  pointer-events: none;
}

/* -- Textblock (odd=creme, even=creme-dunkel) ------------------------------ */
.textblock-section { position: relative; }
.textblock-section.position-odd::before {
  content: ''; position: absolute;
  top: -60px; left: 0; right: 0; height: 60px;
  background: var(--farbe-creme);
  clip-path: polygon(0 100%, 100% 0, 100% 100%);
  pointer-events: none;
}
.textblock-section.position-even::before {
  content: ''; position: absolute;
  top: -60px; left: 0; right: 0; height: 60px;
  background: var(--farbe-creme-dunkel);
  clip-path: polygon(0 0, 0 100%, 100% 100%);
  pointer-events: none;
}

/* -- Gruppen (odd=creme, even=bg-orange) ----------------------------------- */
.gruppen-section { position: relative; }
.gruppen-section.position-odd::before {
  content: ''; position: absolute;
  top: -60px; left: 0; right: 0; height: 60px;
  background: var(--farbe-creme);
  clip-path: polygon(0 0, 0 100%, 100% 100%);
  pointer-events: none;
}
.gruppen-section.position-even::before {
  content: ''; position: absolute;
  top: -60px; left: 0; right: 0; height: 60px;
  background: var(--farbe-alt-even);
  clip-path: polygon(0 100%, 100% 0, 100% 100%);
  pointer-events: none;
}

/* -- Float-Section (odd=creme, even=bg-orange) ----------------------------- */
.float-section { position: relative; }
.float-section.position-odd::before {
  content: ''; position: absolute;
  top: -60px; left: 0; right: 0; height: 60px;
  background: var(--farbe-creme);
  clip-path: polygon(0 0, 0 100%, 100% 100%);
  pointer-events: none;
}
.float-section.position-even::before {
  content: ''; position: absolute;
  top: -60px; left: 0; right: 0; height: 60px;
  background: var(--farbe-alt-even);
  clip-path: polygon(0 100%, 100% 0, 100% 100%);
  pointer-events: none;
}

/* -- Team-Section (creme) -------------------------------------------------- */
.team-section { position: relative; }
.team-section::before {
  content: ''; position: absolute;
  top: -60px; left: 0; right: 0; height: 60px;
  background: var(--farbe-creme);
  clip-path: polygon(0 0, 0 100%, 100% 100%);
  pointer-events: none;
}

/* -- Team-Kacheln-Section (creme) ----------------------------------------- */
.team-kacheln-section { position: relative; }
.team-kacheln-section::before {
  content: ''; position: absolute;
  top: -60px; left: 0; right: 0; height: 60px;
  background: var(--farbe-creme);
  clip-path: polygon(0 100%, 100% 0, 100% 100%);
  pointer-events: none;
}

/* -- Natur-Zitat (bg-orange) ----------------------------------------------- */
.natur-zitat-section { position: relative; }
.natur-zitat-section::before {
  content: ''; position: absolute;
  top: -60px; left: 0; right: 0; height: 60px;
  background: var(--farbe-bg-orange);
  clip-path: polygon(0 100%, 100% 0, 100% 100%);
  pointer-events: none;
}

/* -- Schnellinfos (sehr dunkel — footer-farbe) ----------------------------- */
.schnellinfos-section { position: relative; }
.schnellinfos-section::before {
  content: ''; position: absolute;
  top: -60px; left: 0; right: 0; height: 60px;
  background: var(--farbe-footer);
  clip-path: polygon(0 0, 0 100%, 100% 100%);
  pointer-events: none;
}

/* -- Kontakt-Section (creme) ----------------------------------------------- */
.kontakt-section { position: relative; }
.kontakt-section::before {
  content: ''; position: absolute;
  top: -60px; left: 0; right: 0; height: 60px;
  background: var(--farbe-creme);
  clip-path: polygon(0 100%, 100% 0, 100% 100%);
  pointer-events: none;
}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-footer {
  background: var(--farbe-footer);
  color: rgba(255, 255, 255, 0.7);
  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(255, 255, 255, 0.1);
}

.footer-col h4 {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--farbe-weiss);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid var(--farbe-terra);
  display: inline-block;
}

.footer-logo-text {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--farbe-weiss);
  display: block;
  margin-bottom: 0.75rem;
}

.footer-col p,
.footer-col address {
  font-size: 0.875rem;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.55);
  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.55);
  text-decoration: none;
  transition: color var(--transition), padding-left var(--transition);
}
.footer-col ul a:hover {
  color: var(--farbe-ocker);
  padding-left: 0.25rem;
  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.55);
  margin-bottom: 0.5rem;
}
.footer-kontakt-item i {
  color: var(--farbe-ocker);
  width: 1rem;
  flex-shrink: 0;
  margin-top: 0.2rem;
}
.footer-kontakt-item a {
  color: rgba(255, 255, 255, 0.55);
  text-decoration: none;
}
.footer-kontakt-item a:hover { color: var(--farbe-ocker); text-decoration: none; }

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

/* KEIN .container-Wrapper! max-width direkt auf .footer-bottom-inner */
.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 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.35);
}
.footer-bottom-inner a {
  color: rgba(255, 255, 255, 0.35);
  text-decoration: none;
  transition: color var(--transition);
}
.footer-bottom-inner a:hover { color: var(--farbe-ocker); text-decoration: none; }


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

.site-footer .oeffnungszeiten-tabelle td:first-child, .site-footer .oeffnungszeiten-tabelle th {
  color: var(--farbe-weiss);
}
/* ==========================================================================
   BREADCRUMB
   CMS-Struktur: <nav class="breadcrumb"><div class="container"><ol><li>...
   ========================================================================== */
.breadcrumb {
  background: var(--farbe-creme-dunkel);
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--farbe-grau-hell);
}
/* .container bereits global definiert — kein max-width nötig */
.breadcrumb ol {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.25rem 0.5rem;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 0.82rem;
  color: var(--farbe-text-hell);
}
.breadcrumb ol li { display: flex; align-items: center; gap: 0.25rem; }
.breadcrumb ol li::after {
  content: '/';
  margin-left: 0.25rem;
  color: var(--farbe-grau);
  opacity: 0.5;
}
.breadcrumb ol li:last-child::after { display: none; }
.breadcrumb ol a { color: var(--farbe-terra); text-decoration: none; }
.breadcrumb ol a:hover { color: var(--farbe-terra-dunkel); text-decoration: none; }
/* Fallback für .breadcrumb-inner falls CMS diesen Wrapper benutzt */
.breadcrumb-inner {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  font-size: 0.82rem;
  color: var(--farbe-text-hell);
}
.breadcrumb-inner a { color: var(--farbe-terra); text-decoration: none; }
.breadcrumb-inner a:hover { color: var(--farbe-terra-dunkel); text-decoration: none; }
.breadcrumb-inner .trenner { color: var(--farbe-grau); }

/* ==========================================================================
   SEITEN-HERO (Unterseiten)
   ========================================================================== */
.seiten-hero {
  background: linear-gradient(135deg, rgba(var(--farbe-text-rgb), 0.75) 0%, rgba(var(--farbe-terra-rgb), 0.55) 100%),
              var(--farbe-terra-dunkel);
  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.85);
  font-size: 1rem;
  max-width: 560px;
  font-weight: 400;
}

/* ==========================================================================
   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(255,255,255,0.1); }
.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 bereits weiter oben im Mobile-Breakpoint auf var(--header-hoehe)
     gesetzt (Off-Canvas-Nav braucht keinen Platz im Fluss) — hier nur noch Layout-Regeln */
  .header-inner { padding: 0 1.25rem; }
  .slider-bereich { height: 420px; }
  .slider-inhalt { padding: 0 1.5rem; left: 0; transform: translateY(24px); }
  .slider-folie.aktiv .slider-inhalt { transform: translateY(0); }
  .slider-inhalt h1,
  .slider-text h2 { font-size: 1.6rem; }
  .leistungen-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; gap: 2rem; }
  .footer-bottom-inner { flex-direction: column; text-align: center; }
}

/* ==========================================================================
   RESPONSIVE — Mobil 640px
   bildspalten-grid ERST hier einspaltig! (niemals bei 900px!)
   ========================================================================== */
@media (max-width: 640px) {
  .bildspalten-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
    direction: ltr !important;
  }
  .bildspalten-grid > * { 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,
  .faq-liste,
  .anfahrt-a-grid,
  .float-section > .container ~ .container {
    padding-left: 1rem;
    padding-right: 1rem;
  }
  .slider-bereich { height: 320px; }
  .slider-inhalt > p,
  .slider-text p { display: none; }
  .team-foto-karte {
    flex-direction: column;
  }

  .team-bild {
    width: 100%;
    height: auto;
    border-radius: 12px;
    outline-offset: 3px;
  }

  .team-bild img {
    height: auto;
    min-height: unset;
  }

  .kontakt-form { padding: 1.5rem; }
  .slider-pfeil-links,
  .slider-pfeil-rechts {
    width: 2.5rem;
    height: 2.5rem;
    font-size: 0.85rem;
  }
}

/* ==========================================================================
   SLIDER-LABEL + SLIDER-AKTIONEN
   ========================================================================== */
.slider-label {
  display: inline-block;
  align-self: flex-start; /* verhindert 100%-Streckung im flex-column */
  background: var(--farbe-ocker);
  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;
}

/* ==========================================================================
   BTN-AKZENT / BTN-HELL
   Slider-Buttons (CMS: class="btn btn-akzent" / class="btn btn-hell")
   ========================================================================== */
.btn-akzent {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--farbe-ocker);
  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-ocker-dunkel);
  transform: translateY(-2px);
  box-shadow: var(--schatten-m);
  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-ocker);
  color: var(--farbe-ocker);
  text-decoration: none;
}

/* ==========================================================================
   SECTION-HEADER (zentrierter Überschriften-Block für Sections)
   ========================================================================== */
.section-header {
  text-align: center;
  max-width: 640px;
  margin: 0 auto var(--abstand-m);
}
.section-header .section-label {
  justify-content: center;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.section-header .section-label::before,
.section-header .section-label::after {
  content: '';
  display: block;
  width: 24px;
  height: 1px;
  background: var(--farbe-terra);
  flex-shrink: 0;
}
/* Kontrastfix: das rohe --farbe-terra (#C8552A) erreicht auf den hellen
   Section-Hintergründen (--farbe-creme, --farbe-bg-orange, --farbe-bg-gruen,
   --farbe-creme-dunkel) sowie auf Weiß nur 3.61-4.39:1 — unter der WCAG-
   Schwelle von 4.5:1 (rechnerisch geprüft). color-mix() dunkelt das Label
   gezielt ab (80% Terra/20% Schwarz -> 5.17-6.28:1 in allen 4 Hintergrund-
   Fällen), ohne die global von Buttons/Linien genutzte --farbe-terra-Variable
   selbst anzufassen. .section-label-hell (auf dunklem Hintergrund, z.B.
   .highlight-section) bleibt bewusst ausgenommen, da dort heller statt
   dunkler Text gebraucht wird. */
.section-header .section-label:not(.section-label-hell) {
  color: color-mix(in srgb, var(--farbe-terra) 80%, black);
}
.section-header .section-label:not(.section-label-hell)::before,
.section-header .section-label:not(.section-label-hell)::after {
  background: color-mix(in srgb, var(--farbe-terra) 80%, 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 Überschrift im .section-header
   (reales Markup: <div class="section-linie"></div>, siehe z.B.
   vorlage_boxen3/boxen6/team/faq/highlights/willkommen_linksbild_rechtstext.htm) */
.section-linie {
  display: block;
  width: 40px;
  height: 3px;
  background: color-mix(in srgb, var(--farbe-terra) 80%, black);
  border-radius: 2px;
  margin: 0.875rem auto 1.25rem;
}
/* Auf dunklem Hintergrund (.section-label-hell-Kontext) die Linie ebenfalls hell */
.section-header:has(.section-label-hell) .section-linie {
  background: rgba(255, 255, 255, 0.55);
}

/* 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. Die dekorativen Strichlein in .section-label
   selbst (::before/::after) bleiben unangetastet. */
.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; }

/* ==========================================================================
   SEITE-INHALT (einfache Inhaltsseiten)
   ========================================================================== */
.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-terra); }

/* ==========================================================================
   SEITE-HEADER (Unterseiten-Banner mit Hintergrundbild)
   ========================================================================== */
.seite-header {
  background: linear-gradient(135deg, var(--farbe-dunkel) 0%, var(--farbe-dunkel-2) 100%);
  padding: 5rem 0 3rem;
  position: relative;
  overflow: hidden;
  min-height: 280px;
  display: flex;
  align-items: center;
}
/* Hintergrundbild — kommt als <img class="header-bg"> aus dem CMS */
.header-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 0;
  display: block;
}
/* Warmer Overlay über dem Bild */
.seite-header::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(var(--farbe-text-rgb), 0.72) 0%,
    rgba(var(--farbe-terra-rgb), 0.40) 100%
  );
  z-index: 1;
}
/* Diagonaler Schnitt am Ende des Hero-Bilds, analog .slider-bereich::after
   (Home-Slider) - Design-4-Markenzeichen, fehlte bisher bei .seite-header
   (den statischen Hero-Bildern der Hauptrubriken-Seiten). Erste Section
   danach ist immer .position-odd/creme (kein main > section-Kind, zaehlt
   nicht mit), Diagonale daher fest auf --farbe-creme. */
.seite-header::before {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  right: 0;
  height: 80px;
  background: var(--farbe-creme);
  clip-path: polygon(0 100%, 100% 0, 100% 100%);
  z-index: 2;
  pointer-events: none;
}
.seite-header .container { position: relative; z-index: 2; width: 100%; }
.seite-header h1 {
  color: var(--farbe-weiss);
  font-size: clamp(1.75rem, 3.5vw, 2.75rem);
  margin-bottom: 0.75rem;
}
.seite-header p,
.seite-header .untertitel {
  color: rgba(255, 255, 255, 0.82);
  font-size: 1.05rem;
  max-width: 600px;
  margin-bottom: 0;
  font-weight: 400;
}

/* ==========================================================================
   TEXTBLOCK-SECTION (einspaltig + zweispaltig)
   ========================================================================== */
.textblock-section {
  padding: var(--abstand-l) 0;
}
/* Abwechselnde Hintergründe — IMMER nth-of-type(even) nicht nth-child! */
.textblock-section.position-odd  { background: var(--farbe-creme); }
.textblock-section.position-even { background: var(--farbe-creme-dunkel); }
.textblock-einspaltig { /* erbt nth-of-type Farbe */ }
.textblock-zweispaltig { /* erbt nth-of-type Farbe */ }
.textblock-zwei-ueberschriften { /* erbt nth-of-type Farbe */ }
.textblock-section h2 {
  color: var(--farbe-dunkel);
  margin-bottom: 0.75rem;
}
/* Terra-Trennlinie unter der Überschrift */
.textblock-linie {
  width: 60px;
  height: 3px;
  background: var(--farbe-terra);
  border-radius: 2px;
  margin: 1rem 0 2rem;
}
/* einspaltig: Inhalt zentriert, max-width begrenzt */
.textblock-inhalt {
  max-width: 800px;
  margin: 0 auto;
}
.textblock-inhalt p {
  color: var(--farbe-text-hell);
  line-height: 1.8;
}
/* zweispaltig (vorlage_text_zweispaltig_eine_ueberschrift.htm — EINE gemeinsame
   Überschrift oberhalb, zwei reine Text-Spalten darunter): linke Spalte
   schmäler, rechte breiter. */
.textblock-spalten {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: var(--abstand-m);
  align-items: start;
}
/* .textblock-zwei-ueberschriften (vorlage_text_zweispaltig_zwei_ueberschriften.htm
   — JEDE Spalte hat ihre EIGENE h2+textblock-linie): main4.css hatte für diese
   Modifier-Klasse bislang 0 Regeln, wodurch .textblock-spalten unveraendert die
   1fr/2fr-Asymmetrie der "eine Überschrift"-Variante übernahm — bei zwei
   gleichrangigen Überschriften optisch falsch (eine Spalte wirkt "wichtiger").
   Hier symmetrisch (1fr 1fr) korrigiert. */
.textblock-zwei-ueberschriften .textblock-spalten {
  grid-template-columns: 1fr 1fr;
}
.textblock-spalte {
  line-height: 1.8;
  color: var(--farbe-text-hell);
}
.textblock-spalte h2 { margin-bottom: 0; }
.textblock-spalte strong {
  display: block;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--farbe-dunkel);
  line-height: 1.5;
}
.textblock-spalte p {
  color: var(--farbe-text-hell);
  line-height: 1.8;
}
@media (max-width: 768px) {
  .textblock-spalten,
  /* Höhere Grund-Spezifität von .textblock-zwei-ueberschriften .textblock-spalten
     (0,2,0) würde diese Mobile-Regel (0,1,0) sonst außerhalb der Media Query
     überstimmen — hier explizit mit erneuert, damit auch die "zwei
     Überschriften"-Variante auf Mobile einspaltig wird. */
  .textblock-zwei-ueberschriften .textblock-spalten {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
}

/* ==========================================================================
   NATUR-ZITAT-SECTION
   ========================================================================== */
.natur-zitat-section {
  background: var(--farbe-bg-orange);
  padding: var(--abstand-m) 0;
  text-align: center;
}
.zitat-inhalt { max-width: 720px; margin: 0 auto; padding: 0 2rem; }
.zitat-anfuehrung {
  font-size: 4rem;
  color: var(--farbe-terra);
  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
   background-image kommt per inline style-Attribut aus dem CMS
   KEIN background-shorthand hier! (würde inline background-image resetten)
   ========================================================================== */
.reine-parallax-section {
  background-color: var(--farbe-dunkel); /* Fallback falls kein Bild geladen */
  background-size: cover;
  background-position: center center;
  background-attachment: fixed;
  background-repeat: no-repeat;
  min-height: 280px;
  padding: var(--abstand-m) 0;
  position: relative;
  overflow: hidden;
}
/* parallax-helper-img: nur für mobile (background-attachment: fixed funzt dort nicht) */
.parallax-helper-img {
  display: none;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.reine-parallax-overlay {
  position: absolute;
  inset: 0;
  background: rgba(var(--farbe-text-rgb), 0.55);
  z-index: 1;
}
.reine-parallax-section .container { position: relative; z-index: 2; }
.reine-parallax-section h2 { color: var(--farbe-weiss); }
.reine-parallax-section p { color: rgba(255,255,255,0.75); }
@media (max-width: 768px) {
  .reine-parallax-section {
    background-attachment: scroll; /* fixed funktioniert auf iOS nicht */
  }
  .parallax-helper-img {
    display: block;
  }
}

/* ==========================================================================
   PRAXIS-SECTION ("Erfahrung sorgt für Erfolg" — Parallax mit Kennzahlen)
   background-image kommt per inline style-Attribut aus dem CMS
   KEIN background-shorthand hier! (würde inline background-image resetten)
   ========================================================================== */
.praxis-section {
  background-color: var(--farbe-dunkel); /* Fallback falls kein Bild geladen */
  background-size: cover;
  background-position: center center;
  background-attachment: fixed;
  background-repeat: no-repeat;
  padding: var(--abstand-l) 0;
  position: relative;
  overflow: hidden;
}
/* Gleichmäßig dunkles Overlay für Lesbarkeit — bewusst KEIN Verlauf, da die
   Kennzahlen im unteren Bereich der Section sonst je nach Bildhelligkeit unter
   die WCAG-Kontrastschwelle rutschen können (rechnerisch geprüft). */
.praxis-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(var(--farbe-dunkel-rgb), 0.85);
  z-index: 0;
}
.praxis-section .container { position: relative; z-index: 1; }
.praxis-inhalt h2 {
  color: var(--farbe-weiss);
  margin-bottom: 0.75rem;
  /* max-width NUR auf die Überschrift, nicht auf .praxis-inhalt selbst — sonst wird
     die darunterliegende 4-Spalten-.praxis-fakten-Grid vom Elternteil auf 720px
     begrenzt und quetscht sich links zusammen (max-width:none auf .praxis-fakten
     kann eine bereits begrenzte Elternbreite nicht zurückgeben). */
  max-width: 720px;
}
.praxis-inhalt > p {
  color: rgba(255, 255, 255, 0.85);
  font-size: 1.05rem;
  max-width: 600px;
  margin-bottom: 2rem;
}
.praxis-fakten {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--abstand-s);
  margin-top: 3rem;
  max-width: none;
}
.praxis-fakt {
  border-left: 2px solid rgba(255, 255, 255, 0.25);
  padding-left: 1.25rem;
}
.praxis-fakt-zahl {
  display: block;
  font-size: clamp(1.9rem, 3vw, 2.5rem);
  font-weight: 800;
  color: var(--farbe-ocker);
  line-height: 1;
  margin-bottom: 0.6rem;
  font-variant-numeric: tabular-nums;
  /* Verhindert Umbruch des "+"-Suffix während der JS-Zähl-Animation (global.js):
     toLocaleString('de-DE') fügt ab 1000 einen Tausenderpunkt ein, wodurch die
     Textbreite während der ~1.8s-Animation wächst — ohne nowrap kippt das Suffix
     mal in eine neue Zeile, mal nicht ("Zucken"). tabular-nums allein reicht nicht,
     da es nur Ziffern-Breitenschwankung verhindert, nicht den Suffix-Umbruch. */
  white-space: nowrap;
}
.praxis-fakt-text {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.75);
  line-height: 1.6;
}
@media (max-width: 1024px) {
  .praxis-fakten {
    grid-template-columns: repeat(2, 1fr);
    row-gap: 2rem;
  }
}
@media (max-width: 768px) {
  .praxis-section {
    background-attachment: scroll; /* fixed funktioniert auf iOS nicht */
  }
  .praxis-section .parallax-helper-img {
    display: block;
  }
  .praxis-fakten {
    grid-template-columns: 1fr;
    row-gap: 1.75rem;
  }
  .praxis-fakt {
    border-left: none;
    border-top: 2px solid rgba(255, 255, 255, 0.25);
    padding-left: 0;
    padding-top: 1rem;
  }
}

/* ==========================================================================
   CTA-PARALLAX-SECTION (Terminvereinbarungs-CTA — Parallax-Hintergrund)
   background-image kommt per inline style-Attribut aus dem CMS
   KEIN background-shorthand hier! (würde inline background-image resetten)
   ========================================================================== */
.cta-parallax-section {
  background-color: var(--farbe-dunkel); /* Fallback falls kein Bild geladen */
  background-size: cover;
  background-position: center center;
  background-attachment: fixed;
  background-repeat: no-repeat;
  padding: var(--abstand-l) 0;
  text-align: center;
  position: relative;
  overflow: hidden;
}
/* Overlay kommt als eigenes CMS-Element (.cta-parallax-overlay), nicht als ::before.
   Gleichmäßiger Farbmix aus Salbei-Dunkel + Dunkel (statt Verlauf), damit der
   Kontrast unabhängig von der Bildhelligkeit an jeder Stelle sicher hoch bleibt
   (rechnerisch geprüft, ≥7:1 selbst über sehr hellen Bildbereichen). */
.cta-parallax-overlay {
  position: absolute;
  inset: 0;
  background: rgba(53, 71, 42, 0.87);
  z-index: 0;
}
.cta-parallax-section .container,
.cta-parallax-inhalt {
  position: relative;
  z-index: 1;
  max-width: 680px;
  margin: 0 auto;
}
/* Helle statt terrakotta/ocker Label-Farbe: gegen den dunklen Parallax-Overlay
   erreicht Ocker nur ~3.7:1 (rechnerisch geprüft) — Weiß mit 90% Deckkraft
   liegt sicher über 4.5:1. */
.cta-parallax-inhalt .section-label {
  color: 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);
  font-size: 1.05rem;
  margin-bottom: 2.25rem;
}
.cta-aktionen {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
}
@media (max-width: 768px) {
  .cta-parallax-section {
    background-attachment: scroll; /* fixed funktioniert auf iOS nicht */
  }
  .cta-parallax-section .parallax-helper-img {
    display: block;
  }
  .cta-aktionen {
    flex-direction: column;
    align-items: stretch;
  }
  .cta-aktionen .btn { justify-content: center; }
}

/* ==========================================================================
   SCHNELLINFOS-SECTION
   ========================================================================== */
.schnellinfos-section {
  background: var(--farbe-footer);
  padding: var(--abstand-s) 0;
}
.schnellinfos-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  max-width: var(--max-breite);
  margin: 0 auto;
  padding: 0 2rem;
}
.schnellinfo-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.5rem 2rem;
  border-right: 1px solid rgba(var(--farbe-terra-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-ocker);
  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);
}
@media (max-width: 768px) {
  .team-kacheln-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.2rem;
  }

  .schnellinfos-grid { grid-template-columns: repeat(2, 1fr); }
  .schnellinfo-item:nth-child(2) { border-right: none; }
}
@media (max-width: 480px) {
  .team-kacheln-grid {
    grid-template-columns: 1fr;
  }

  .schnellinfos-grid { grid-template-columns: 1fr; padding: 0 1rem; }
  .schnellinfo-item { border-right: none; border-bottom: 1px solid rgba(var(--farbe-terra-rgb), 0.15); }
  .schnellinfo-item:last-child { border-bottom: none; }
}

/* ==========================================================================
   WILLKOMMEN-SECTION (Bild links, Text rechts — vorlage_willkommen_linksbild_
   rechtstext.htm). main4.css hatte dafür bislang 0 CSS-Regeln — Section war
   komplett unstyled (Bild+Text+Badge+Stats liefen einfach im Blockfluss
   untereinander, keinerlei Grid/Karten-Optik). Vollständig neu gebaut,
   passend zu Design 4 (Terrakotta #C8552A + Salbeigrün #5C8C5A).
   ========================================================================== */
.willkommen-section {
  padding: var(--abstand-l) 0;
  background: var(--farbe-creme);
}
.willkommen-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--abstand-m);
  align-items: center;
}
.willkommen-bild {
  position: relative;
}
.willkommen-bild img {
  width: 100%;
  height: 460px;
  object-fit: cover;
  border-radius: var(--radius-l);
  box-shadow: var(--schatten-l);
  display: block;
}
/* Runde Terrakotta-Badge, oben auf .willkommen-badge platziert (analog
   .slider-badge/.leistung-icon-Farbgebung) */
.willkommen-badge {
  position: absolute;
  bottom: -1.25rem;
  right: -1.25rem;
  background: var(--farbe-terra);
  color: var(--farbe-weiss);
  width: 100px;
  height: 100px;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 1rem;
  box-shadow: var(--schatten-l);
}
.willkommen-badge strong { font-size: 1.4rem; font-weight: 800; line-height: 1; }
.willkommen-badge span {
  font-size: 0.62rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  margin-top: 0.3rem;
  opacity: 0.92;
}
.willkommen-inhalt h2 { margin-bottom: 0.75rem; }
.willkommen-inhalt p {
  color: var(--farbe-text-hell);
  line-height: 1.8;
}
.willkommen-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  margin: 1.75rem 0;
  padding: 1.5rem;
  background: var(--farbe-bg-gruen);
  border-radius: var(--radius-m);
  border: 1px solid rgba(var(--farbe-terra-rgb), 0.12);
}
.stat-item { text-align: center; }
.stat-item strong {
  display: block;
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--farbe-salbei);
  line-height: 1;
  margin-bottom: 0.3rem;
}
.stat-item span {
  font-size: 0.72rem;
  color: var(--farbe-text-hell);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
@media (max-width: 1024px) {
  .willkommen-grid { grid-template-columns: 1fr; gap: var(--abstand-s); }
  .willkommen-bild img { height: 340px; }
  .willkommen-badge { width: 84px; height: 84px; bottom: -1rem; right: 1rem; }
}
@media (max-width: 480px) {
  .willkommen-stats { grid-template-columns: 1fr; }
}

/* ==========================================================================
   HIGHLIGHT-SECTION (vorlage_highlights.htm — "Warum unsere Fachpraxis?").
   main4.css hatte dafür bislang 0 CSS-Regeln (auch .vorteile-grid/.vorteil-
   item/.vorteil-icon fehlten komplett) — Section lief unstyled im normalen
   Textfluss. Dunkler Hintergrund (analog .praxis-section/.cta-parallax-
   section), .section-label-hell + weiße Section-Linie statt der gedunkelten
   Terra-Variante (rechnerisch geprüft, siehe .section-label-hell unten).
   ========================================================================== */
.highlight-section {
  background: var(--farbe-dunkel);
  padding: var(--abstand-l) 0;
}
.highlight-section .section-header p { color: rgba(255, 255, 255, 0.7); }
.highlight-section .section-header h2 { color: var(--farbe-weiss); }
/* .section-label-hell: weißer statt gedunkelter Terra-Text — auf --farbe-dunkel
   (#2C2416) erreicht reines Weiß 15.4:1, mit 90% Deckkraft weiterhin >13:1. */
.section-label-hell {
  color: rgba(255, 255, 255, 0.9);
}
.section-label-hell::before,
.section-label-hell::after {
  background: rgba(255, 255, 255, 0.55) !important;
}
.vorteile-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--abstand-s);
}
.vorteil-item {
  text-align: center;
  padding: 1.5rem 1rem;
}
.vorteil-icon {
  width: 3.25rem;
  height: 3.25rem;
  margin: 0 auto 1.1rem;
  background: var(--farbe-terra);
  border-radius: var(--radius-l);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  color: var(--farbe-weiss);
}
.vorteil-item h4 {
  color: var(--farbe-weiss);
  font-size: 1rem;
  margin-bottom: 0.5rem;
}
.vorteil-item p {
  color: rgba(255, 255, 255, 0.68);
  font-size: 0.85rem;
  line-height: 1.6;
  margin-bottom: 0;
}
@media (max-width: 1024px) {
  .vorteile-grid { grid-template-columns: repeat(2, 1fr); gap: var(--abstand-m) var(--abstand-s); }
}
@media (max-width: 480px) {
  .vorteile-grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   KONTAKT-CTA-SECTION (vorlage_kontaktstreifen.htm — 3 CTA-Kacheln
   Telefon/E-Mail/Online-Termin). main4.css hatte dafür bislang 0 CSS-Regeln.
   ========================================================================== */
.kontakt-cta-section {
  padding: var(--abstand-m) 0;
}
/* 2026-08-26: vorher fest auf --farbe-bg-orange verdrahtet - kollidierte mit
   der direkt benachbarten .gruppen-section/.float-section, wenn deren
   eigenes nth-of-type(even) zufaellig ebenfalls auf --farbe-bg-orange fiel
   (Sweep-Fund: kontakt-cta-section + float-section identisch rgb(253,240,234)
   auf mehreren Unterseiten). Minimalfix (Design 4 hat bewusst individuelle,
   schraege Section-Trennlinien per nth-of-type - NICHT vereinheitlichen):
   .kontakt-cta-section bekommt exakt dasselbe Farbpaar wie ihre echten
   Nachbarn .gruppen-section/.float-section ueber dieselbe nth-of-type-
   Systematik, dadurch alternieren direkt benachbarte <section>-Geschwister
   IMMER (nth-of-type zaehlt bei unmittelbaren Geschwistern zwangslaeufig
   abwechselnd). Alle anderen Section-Typen/Farbpaare/::before-Trennlinien
   bleiben unangetastet. */
.kontakt-cta-section.position-odd  { background: var(--farbe-creme); }
.kontakt-cta-section.position-even { background: var(--farbe-alt-even); }
.kontakt-cta-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--abstand-s);
}
.kontakt-cta-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  background: var(--farbe-weiss);
  border-radius: var(--radius-m);
  padding: 1.25rem 1.5rem;
  box-shadow: var(--schatten-s);
  border: 1px solid var(--farbe-grau-hell);
  transition: transform var(--transition), box-shadow var(--transition);
}
.kontakt-cta-item:hover {
  transform: translateY(-4px);
  box-shadow: var(--schatten-m);
}
.kontakt-cta-icon {
  flex-shrink: 0;
  width: 2.75rem;
  height: 2.75rem;
  background: var(--farbe-terra);
  color: var(--farbe-weiss);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.05rem;
}
.kontakt-cta-text { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.kontakt-cta-text strong { font-size: 0.8rem; color: var(--farbe-text-hell); font-weight: 600; }
.kontakt-cta-text a {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--farbe-dunkel);
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.kontakt-cta-text a:hover { color: var(--farbe-terra); text-decoration: underline; }
@media (max-width: 900px) {
  .kontakt-cta-grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   LEISTUNG-BILD-KARTE (vorlage_boxen3_design2.htm/boxen6_design2.htm — Karten
   mit großem Bild oben, Titel+Text unten). main4.css hatte dafür bislang 0
   CSS-Regeln, obwohl .leistungen-grid (der umschließende Grid-Container)
   bereits existierte.
   ========================================================================== */
.leistung-bild-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);
}
.leistung-bild-karte:hover {
  transform: translateY(-6px);
  box-shadow: var(--schatten-l);
}
.leistung-bild {
  height: 190px;
  overflow: hidden;
}
.leistung-bild img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}
.leistung-bild-karte:hover .leistung-bild img { transform: scale(1.06); }
.leistung-bild-karte-inhalt { padding: 1.5rem; }
.leistung-bild-karte-inhalt h3 {
  font-size: 1.05rem;
  color: var(--farbe-dunkel);
  margin-bottom: 0.6rem;
}
.leistung-bild-karte-inhalt p {
  font-size: 0.9rem;
  color: var(--farbe-text-hell);
  line-height: 1.7;
  margin-bottom: 0;
}

/* ==========================================================================
   BILDSPALTEN-GRID-REVERSE (vorlage_bildrechts_textlinks.htm — Bild rechts,
   Text links, OHNE Bildumfluss). Die Vorlage nutzt <div class="bildspalten-
   grid-reverse"> als eigenständige Klasse (NICHT .bildspalten-grid + nth-of-
   type(even)-RTL-Trick) — main4.css hatte dafür 0 CSS-Regeln, wodurch Bild
   und Text einfach untereinander im Blockfluss liefen statt zweispaltig.
   Gleiche Optik wie .bildspalten-grid, aber mit fix vertauschter Spalten-
   reihenfolge (kein RTL-Trick nötig, da die Vorlage Bild bereits als erstes
   Kind liefert und wir es hier per Grid direkt in Spalte 2 schieben). */
.bildspalten-grid-reverse {
  max-width: var(--max-breite);
  margin: 0 auto;
  padding: 0 2rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--abstand-m);
  align-items: center;
}
.bildspalten-grid-reverse .bildspalten-bild { grid-column: 2; }
.bildspalten-grid-reverse .bildspalten-text { grid-column: 1; grid-row: 1; }
@media (max-width: 900px) {
  .bildspalten-grid-reverse { gap: 2.5rem; }
}
@media (max-width: 640px) {
  .bildspalten-grid-reverse {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  .bildspalten-grid-reverse .bildspalten-bild,
  .bildspalten-grid-reverse .bildspalten-text { grid-column: 1; }
}

/* ==========================================================================
   ANFAHRT-A-INFO (Info-Spalte in .anfahrt-a-grid: Label+Linie+Überschrift+
   Kontaktliste+Routenplaner-Button). main4.css hatte für .anfahrt-a-info und
   .anfahrt-a-linie 0 CSS-Regeln — die Info-Spalte lief unstyled/unstrukturiert.
   ========================================================================== */
.anfahrt-a-info {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.anfahrt-a-info h2 { margin: 0; }
.anfahrt-a-linie {
  width: 48px;
  height: 3px;
  background: color-mix(in srgb, var(--farbe-terra) 80%, black);
  border-radius: 2px;
  margin: 0.875rem 0 0.25rem;
}
/* .section-label außerhalb von .section-header (eigener Kontext hier) — gleicher
   Kontrastfix wie .section-header .section-label (siehe dortige Herleitung). */
.anfahrt-a-info .section-label {
  color: color-mix(in srgb, var(--farbe-terra) 80%, black);
}

/* ==========================================================================
   GRUPPEN-SECTION (Leistungs-Übersicht mit Bildern oder Icons)
   ========================================================================== */
.gruppen-section {
  padding: var(--abstand-l) 0;
}
/* Abwechselnde Hintergründe — IMMER nth-of-type(even) nicht nth-child! */
.gruppen-section.position-even { background: var(--farbe-alt-even); }
.gruppen-section.position-odd  { background: var(--farbe-creme); }
.gruppen-grid {
  max-width: var(--max-breite);
  margin: 0 auto;
  padding: 0 2rem;
  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-terra-rgb), 0.08);
}
.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-terra);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--farbe-weiss);
  font-size: 1rem;
}
.gruppen-icon {
  width: 3rem;
  height: 3rem;
  background: linear-gradient(135deg, var(--farbe-terra), var(--farbe-salbei));
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--farbe-weiss);
  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-terra);
  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-terra-dunkel); text-decoration: none; }
@media (max-width: 1024px) {
  .gruppen-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .gruppen-grid { grid-template-columns: 1fr; padding: 0 1rem; }
}

/* ==========================================================================
   FLOAT-SECTION
   ========================================================================== */
.float-section {
  padding: var(--abstand-l) 0;
}
.float-section.position-even { background: var(--farbe-alt-even); }
.float-section.position-odd  { background: var(--farbe-creme); }
.float-section .container::after { content: ''; display: table; clear: both; }
/* Sicherheitsnetz gegen unausgewogenes HTML aus der im Admin frei editierbaren
   CMS-Vorlage: schließt der Redakteur das äußere .container-<div> versehentlich
   vor einem weiteren class="container"-Element, wird der Browser beide als
   direkte Geschwister von .float-section parsen (kein Nachfahren-Verhältnis
   mehr zum äußeren .container) — der einfache Nachfahren-Selektor
   .container .container greift dann nicht. Deshalb hier zusätzlich als
   eigenständiges Geschwister-Kind von .float-section behandeln (identischer
   Bug/Fix wie main1-3.css, Commits 895de81/390c0f0/945ffb1). Aktuell auf den
   beiden Referenzdomains nicht reproduzierbar, aber Sicherheitsnetz bleibt. */
.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;
}

/* --------------------------------------------------------------------------
   TEAM-KACHELN — Karten-Grid für team.html
   Max. 4 Spalten, auto-wrap, optimiert für 1:1 und 4:5 Portraits
   -------------------------------------------------------------------------- */
.team-kacheln-section {
  padding: var(--abstand-l, 5rem) 0;
}

.team-kacheln-section.position-even {
  /* 2026-08-28: --farbe-hintergrund-alt ist in main4.css nie definiert -
     die Regel griff bisher gar nicht (ungueltige CSS-Variable ohne
     Fallback macht die ganze Deklaration ungueltig), auf die tatsaechlich
     vorhandene Palette umgestellt. --farbe-alt-even statt --farbe-bg-orange,
     siehe Kommentar bei .kontakt-cta-section weiter oben. */
  background: var(--farbe-alt-even);
}

.team-kacheln-section.position-odd {
  background: var(--farbe-creme);
}

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

.team-kachel {
  background: var(--farbe-weiss);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.07);
  transition: transform 0.28s ease, box-shadow 0.28s ease;
  display: flex;
  flex-direction: column;
}

.team-kachel:hover {
  transform: translateY(-6px);
  box-shadow: 0 10px 36px rgba(var(--farbe-dunkel-rgb), 0.16);
}

/* Optimiert für quadratische (1:1) und Hochformat-Fotos (4:5) */
.team-kachel-bild {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--farbe-creme-dunkel);
}

.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(var(--farbe-dunkel-2-rgb), 0.35) 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-primaer);
  margin: 0;
}

.team-kachel-name {
  font-family: var(--font-serif, var(--schrift-headline, Georgia, serif));
  font-size: 1.08rem;
  color: var(--farbe-primaer-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-linie);
}

@media (max-width: 1100px) {
  .team-kacheln-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 640px) {
  .float-img-links, .float-img-rechts, .img-group-right {
    float: none;
    width: 100%;
    margin: 0 0 1.5rem 0;
  }
}

.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;
}