/* ==========================================================================
   VARIANTE 9 — main9.css
   Design: Präzisionsbogen — Outfit + Source Sans 3 + JetBrains Mono
   Porzellan-Weiß + Graphit + Signal-Vermillion #BA3422
   Signatur: der Zahnbogen/Röntgenkurve als wiederkehrendes Strukturelement.
   Header: 2-stufig — Zeile 1 (Logo/CTA/Telefon/Burger) + Zeile 2 (volle Nav-Zeile)
   ========================================================================== */

@import url("outfit.css");
@import url("source-sans-3.css");
@import url("jetbrains-mono.css");
@import url("font-awesome.css");

/* --------------------------------------------------------------------------
   CSS Custom Properties
   -------------------------------------------------------------------------- */
:root {
  /* Grundfarben */
  --farbe-bg:            #F0F2EE;   /* Porzellan — kühles Basis-Weiß */
  --farbe-bg-alt:        #E7ECEC;   /* Scan-Blau — Wechsel-Hintergrund */
  --farbe-flaeche:       #FFFFFF;   /* Karten/Flächen */
  --farbe-tinte:         #1E2226;   /* Graphit — Haupttext */
  --farbe-tinte-soft:    #5C6369;   /* Graphit hell — Nebentext */
  --farbe-marker:        #BA3422;   /* Signal-Vermillion — einziger Akzent */
  --farbe-marker-dunkel: #962619;
  --farbe-marker-hell:   #E06B57;   /* Marker fuer Text auf dunklem Grund — WCAG 4.5:1 gegen --farbe-nacht */
  --farbe-linie:         #D7DCD8;   /* Haarlinie / Raster */
  --farbe-nacht:         #15181C;   /* Graphit-Schwarz — dunkle Sections */
  --farbe-nacht-2:       #1D2126;
  --farbe-weiss:         #FFFFFF;
  --farbe-weiss-text:    #FFFFFF;

  /* Footer / Kompatibilitäts-Alias (von geteilten Vorlagen erwartet) */
  --farbe-footer:        var(--farbe-nacht);
  --farbe-primaer:       var(--farbe-marker);
  --farbe-primaer-dunkel: var(--farbe-marker-dunkel);
  --farbe-akzent:        var(--farbe-marker);
  --farbe-akzent-hover:  var(--farbe-marker-dunkel);
  --farbe-text:          var(--farbe-tinte);
  --farbe-text-hell:     var(--farbe-tinte-soft);
  --farbe-hintergrund:   var(--farbe-bg);
  --farbe-hintergrund-2: var(--farbe-bg-alt);
  --farbe-hintergrund-3: #EFE3E0;
  --farbe-grenze:        var(--farbe-linie);
  --farbe-grau-dunkel:   var(--farbe-tinte-soft);
  --farbe-hintergrund-alt: var(--farbe-bg-alt);

  /* Autoren-Box / AEO-Abstract (global.css, geteilte SEO/AEO-Komponente) —
     global.css definiert dafuer nur Fallback-Variablen in einer fremden
     Maroon/Pink-Palette, jedes main{N}.css muss sie auf die eigene Palette
     ummuenzen, sonst clasht die Box mit dem restlichen Design. */
  --farbe-autorenbox-hintergrund: #F4EBE9;
  --farbe-autorenbox-linie:       #E3D2CE;
  --farbe-autorenbox-akzent:      var(--farbe-marker);
  --farbe-autorenbox-icon:        var(--farbe-marker);
  --farbe-autorenbox-icon-text:   var(--farbe-weiss-text);
  --farbe-autorenbox-text:        var(--farbe-tinte-soft);
  --farbe-autorenbox-text-stark:  var(--farbe-tinte);
  --farbe-aeo-hintergrund:        #F4EBE9;
  --farbe-aeo-linie:              var(--farbe-marker);
  --farbe-aeo-text:               var(--farbe-tinte);

  /* Neuere geteilte Komponenten (.summary-box, .credential-badge, Tabellen)
     nutzen ein zweites, englisches Token-Set (--color-*) aus global.css,
     das bisher in KEINEM main{N}.css umgemuenzt wird (generisches
     Knallrot #e10816 + Slate-Grau) — auch fuer main9 auf die eigene
     Palette abgebildet, damit diese Komponenten nicht aus dem Rahmen fallen. */
  --color-primary:       var(--farbe-marker);
  --color-primary-dark:  var(--farbe-marker-dunkel);
  --color-primary-light: #F4EBE9;
  --color-text:          var(--farbe-tinte);
  --color-text-muted:    var(--farbe-tinte-soft);
  --color-border:        var(--farbe-linie);
  --color-bg:            var(--farbe-bg);

  /* Schatten — flach, instrumentenhaft (kein Glow) */
  --schatten-klein:  0 1px 3px rgba(30, 34, 38, 0.07);
  --schatten-mittel: 0 8px 24px rgba(30, 34, 38, 0.09);
  --schatten-gross:  0 20px 48px rgba(30, 34, 38, 0.14);

  /* Schrift */
  --schrift-haupt:     'Source Sans 3', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --schrift-display:   'Outfit', 'Segoe UI', system-ui, sans-serif;
  --schrift-mono:      'JetBrains Mono', 'SFMono-Regular', Consolas, monospace;

  /* Radien — bewusst kantig statt weich */
  --radius-klein:   2px;
  --radius-mittel:  4px;
  --radius-gross:   8px;
  --radius-rund:    50%;

  /* Abstände */
  --abstand-s:  0.5rem;
  --abstand-m:  1rem;
  --abstand-l:  2rem;
  --abstand-xl: 4rem;

  --uebergang: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  --max-breite: 1200px;
  --header-hoehe: 4.75rem;
  --nav-zeile-hoehe: 3.1rem;

  --farbe-gruen: #1E8A44;
  --farbe-fehler: #C0392B;

  /* RGB-Kanäle für rgba() */
  --farbe-marker-rgb:   186, 52, 34;
  --farbe-akzent-rgb:   186, 52, 34;
  --farbe-primaer-rgb:  186, 52, 34;
  --farbe-primaer-dunkel-rgb: 150, 38, 25;
  --farbe-tinte-rgb:    30, 34, 38;
  --farbe-nacht-rgb:    21, 24, 28;
  --farbe-primaer-nacht-rgb: 21, 24, 28;
  --farbe-gruen-rgb:    30, 138, 68;
  --farbe-fehler-rgb:   192, 57, 43;
}

/* --------------------------------------------------------------------------
   Reset & Basis
   -------------------------------------------------------------------------- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

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

/* .container — generischer Inhalts-Wrapper, von ~25 der 28 geteilten
   vorlage_*.htm-Templates verwendet (float-section, textblock-section,
   faq, anfahrt, kennzahlen, boxen*, behandler, zitat, willkommen, ...).
   Sections die eine eigene *-grid/*-spalten-Klasse mit eigenem max-width
   verwenden (z.B. .bildspalten-grid) waren davon unabhaengig "zufaellig"
   korrekt zentriert - alle anderen Sections, deren Ueberschrift/Text
   DIREKT in .container liegt, hatten dagegen gar keine Breitenbegrenzung
   und liefen auf breiten Bildschirmen bis fast an den Viewport-Rand,
   waehrend der Rest der Seite bei 1200px zentriert blieb. Bewusst OHNE
   eigenes horizontales Padding hier - das liefert bereits die jeweilige
   *-section-Regel (padding: ... 2rem), sonst wuerde es sich verdoppeln. */
.container {
  max-width: var(--max-breite);
  margin: 0 auto;
}

/* Seitenweiter Hell/Heller-Wechsel zwischen aufeinanderfolgenden Sections.
   WICHTIG: zaehlt ALLE <section>-Geschwister direkt unter <main>, nicht nur
   Sections desselben Typs — sonst kann z.B. eine .faq-section (die keine
   eigene Positions-abhaengige Klasse hat) zufaellig dieselbe Farbe wie die
   direkt davorliegende Section bekommen und der Wechsel faellt aus (kam
   z.B. bei .textblock-section direkt vor .faq-section vor, weil beide
   main9.css frueher getrennt/unabhaengig voneinander gezaehlt haben).
   :where() haelt die Spezifitaet bei 0, damit einzelne Sections (z.B. die
   bewusst immer dunklen wie .praxis-section/.zitat-section) mit einer
   simplen Klassenregel weiterhin ueberschreiben koennen. */
:where(main > section:nth-of-type(odd)) { background: var(--farbe-bg); }
:where(main > section:nth-of-type(even)) { background: var(--farbe-bg-alt); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  font-family: var(--schrift-haupt);
  font-weight: 400;
  color: var(--farbe-tinte);
  background: var(--farbe-bg);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  padding-top: 126px; /* Zeile 1 (76px) + Zeile 2 (~50px) — per agent-browser nachgemessen */
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--schrift-display);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--farbe-tinte);
  text-wrap: balance;
}

h1 { font-size: clamp(2rem, 5vw, 3.4rem); letter-spacing: -0.02em; }
h2 { font-size: clamp(1.55rem, 3.5vw, 2.5rem); }
h3 { font-size: clamp(1.05rem, 2.5vw, 1.4rem); font-weight: 600; }

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

a {
  color: var(--farbe-marker);
  text-decoration: none;
  transition: color var(--uebergang);
}

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-marker-dunkel); }

img { max-width: 100%; height: auto; display: block; }
ul, ol { list-style: none; }

:focus-visible {
  outline: 2px solid var(--farbe-marker);
  outline-offset: 2px;
}

/* CMS-Freitext-Listen (redaktionell eingefuegte <ul> ohne Klasse) */
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: var(--farbe-marker); }

/* --------------------------------------------------------------------------
   Skip-Link (Barrierefreiheit)
   WICHTIG: top: -200px — NIEMALS -100% oder -3rem!
   -------------------------------------------------------------------------- */
.skip-link {
  position: absolute;
  top: -200px;
  left: 1rem;
  z-index: 9999;
  background: var(--farbe-marker);
  color: var(--farbe-weiss-text);
  padding: 0.75rem 1.5rem;
  border-radius: 0 0 var(--radius-mittel) var(--radius-mittel);
  font-family: var(--schrift-mono);
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  text-decoration: none;
  transition: top 0.2s;
}
.skip-link:focus { top: 0; }

/* --------------------------------------------------------------------------
   ARC-SIGNATUR — wiederkehrendes Strukturelement (Zahnbogen/Röntgenkurve)
   Reines CSS: ein Ausschnitt eines riesigen Rings, keine SVG/Markup nötig.
   -------------------------------------------------------------------------- */
.arc-teiler {
  position: relative;
  height: 1px;
  overflow: visible;
}
.arc-teiler::before {
  content: '';
  position: absolute;
  left: 50%;
  top: -900px;
  width: 2400px;
  height: 2400px;
  margin-left: -1200px;
  border-radius: 50%;
  border: 1px solid rgba(var(--farbe-marker-rgb), 0.35);
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   HEADER — 2-stufig
   Zeile 1: header-inner (Logo | Online-Termin + Telefon + Burger)
   Zeile 2: site-nav (eigene volle Zeile, Instrumentenleisten-Optik)
   -------------------------------------------------------------------------- */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: var(--farbe-flaeche);
  box-shadow: 0 1px 0 var(--farbe-linie);
  transition: box-shadow var(--uebergang);
}
.site-header.scrolled {
  box-shadow: 0 8px 24px rgba(30, 34, 38, 0.1);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--header-hoehe);
  max-width: var(--max-breite);
  margin: 0 auto;
  padding: 0 1.5rem;
  gap: 1rem;
}

/* Logo */
.site-logo { flex-shrink: 0; }
.site-logo a {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  text-decoration: none;
}
.site-logo img {
  height: 2.6rem;
  width: auto;
}
.site-logo-texte { display: flex; flex-direction: column; }
.site-logo-name {
  font-family: var(--schrift-display);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--farbe-tinte);
  line-height: 1.2;
}
.site-logo-zusatz {
  font-family: var(--schrift-mono);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.03em;
  color: var(--farbe-tinte-soft);
}

/* CTA (Online-Termin) — eigenständig in Zeile 1, NICHT in der Nav-Liste */
.nav-cta-btn,
.nav-cta {
  display: inline-flex !important;
  align-items: center;
  gap: 0.5rem;
  background: var(--farbe-marker) !important;
  color: var(--farbe-weiss-text) !important;
  padding: 0.6rem 1.2rem !important;
  border-radius: var(--radius-mittel) !important;
  font-family: var(--schrift-haupt) !important;
  font-size: 0.85rem !important;
  font-weight: 600 !important;
  white-space: nowrap;
  box-shadow: none !important;
  transition: background var(--uebergang) !important;
  margin-left: auto;
  flex-shrink: 0;
}
.nav-cta-btn:hover,
.nav-cta:hover {
  background: var(--farbe-marker-dunkel) !important;
  color: var(--farbe-weiss-text) !important;
}

/* Telefon-CTA (Desktop) */
.header-tel-cta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 1rem;
  border: 1px solid var(--farbe-linie);
  border-radius: var(--radius-mittel);
  font-family: var(--schrift-mono);
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--farbe-tinte);
  white-space: nowrap;
  flex-shrink: 0;
  transition: border-color var(--uebergang), color var(--uebergang);
}
.header-tel-cta:hover {
  border-color: var(--farbe-marker);
  color: var(--farbe-marker);
}
.header-tel-cta i { color: var(--farbe-marker); }

/* --------------------------------------------------------------------------
   NAVIGATION — Zeile 2, eigene volle Zeile
   -------------------------------------------------------------------------- */
.site-nav {
  background: var(--farbe-flaeche);
  border-top: 1px solid var(--farbe-linie);
  border-bottom: 1px solid var(--farbe-linie);
}

.site-nav-inner {
  max-width: var(--max-breite);
  margin: 0 auto;
  padding: 0 1.5rem;
}

.site-nav-inner > ul {
  display: flex;
  align-items: center;
  gap: 0.05rem;
  flex-wrap: nowrap;
  height: var(--nav-zeile-hoehe);
}

.site-nav-inner > ul > li { position: relative; height: 100%; display: flex; align-items: center; }

.site-nav-inner > ul > li > a {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  height: 100%;
  padding: 0 0.7rem;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--farbe-tinte);
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  transition: color var(--uebergang), border-color var(--uebergang);
}

.site-nav-inner > ul > li > a:hover,
.site-nav-inner > ul > li > a:focus {
  color: var(--farbe-marker);
}

.site-nav-inner > ul > li > a[aria-current="page"] {
  color: var(--farbe-marker);
  border-bottom-color: var(--farbe-marker);
}

/* Dropdown-Pfeil */
.site-nav-inner > ul > li.has-dropdown > a::after,
.site-nav-inner > ul > li.hat-dropdown > a::after {
  content: '';
  display: inline-block;
  width: 0.32em;
  height: 0.32em;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-0.1em);
  transition: transform var(--uebergang);
  opacity: 0.6;
}
.site-nav-inner > ul > li.has-dropdown:hover > a::after,
.site-nav-inner > ul > li.has-dropdown:focus-within > a::after,
.site-nav-inner > ul > li.hat-dropdown:hover > a::after,
.site-nav-inner > ul > li.hat-dropdown:focus-within > a::after {
  transform: rotate(-135deg) translateY(0.1em);
}

/* Dropdown */
.site-nav-inner > ul > li.has-dropdown > ul,
.site-nav-inner > ul > li.hat-dropdown > ul {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 230px;
  background: var(--farbe-flaeche);
  border: 1px solid var(--farbe-linie);
  border-top: 2px solid var(--farbe-marker);
  box-shadow: var(--schatten-gross);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity var(--uebergang), visibility var(--uebergang), transform var(--uebergang);
  z-index: 200;
  padding: 0.4rem;
  list-style: none;
}
.site-nav-inner > ul > li.has-dropdown:hover > ul,
.site-nav-inner > ul > li.has-dropdown:focus-within > ul,
.site-nav-inner > ul > li.hat-dropdown:hover > ul,
.site-nav-inner > ul > li.hat-dropdown:focus-within > ul {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.site-nav-inner > ul > li.has-dropdown > ul li a,
.site-nav-inner > ul > li.hat-dropdown > ul li a {
  display: block;
  padding: 0.6rem 0.9rem;
  font-size: 0.83rem;
  color: var(--farbe-tinte);
  border-radius: var(--radius-klein);
  transition: background var(--uebergang), color var(--uebergang), padding-left var(--uebergang);
}
.site-nav-inner > ul > li.has-dropdown > ul li a:hover,
.site-nav-inner > ul > li.hat-dropdown > ul li a:hover {
  background: var(--farbe-bg);
  color: var(--farbe-marker);
  padding-left: 1.3rem;
}

/* Mobile-only auf Desktop ausblenden */
.site-nav-inner > ul > li.mobile-only { display: none; }

/* --------------------------------------------------------------------------
   BURGER-BUTTON (nur Mobil)
   -------------------------------------------------------------------------- */
.burger-btn {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 2.6rem;
  height: 2.6rem;
  border: 1px solid var(--farbe-linie);
  border-radius: var(--radius-mittel);
  flex-shrink: 0;
  background: none;
  cursor: pointer;
  margin-left: auto;
  transition: border-color var(--uebergang);
}
.burger-btn:hover,
.burger-btn:focus {
  border-color: var(--farbe-marker);
}
.burger-btn span {
  display: block;
  width: 1.15rem;
  height: 2px;
  background: var(--farbe-tinte);
  transition: transform var(--uebergang), opacity var(--uebergang);
  transform-origin: center;
}
.burger-btn.aktiv span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger-btn.aktiv span:nth-child(2) { opacity: 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(21, 24, 28, 0.5);
  z-index: 998;
  opacity: 0;
  transition: opacity var(--uebergang);
}
.mobile-overlay.offen { opacity: 1; }

/* --------------------------------------------------------------------------
   RESPONSIVE HEADER — ab 768px Mobile
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  body { padding-top: 72px; }

  .header-tel-cta,
  .nav-cta-btn,
  .nav-cta {
    display: none !important;
  }

  /* Lange Praxisnamen duerfen den Burger nicht aus dem Viewport schieben */
  .site-logo { flex-shrink: 1; min-width: 0; }
  .site-logo a { min-width: 0; }
  .site-logo-texte { min-width: 0; }
  .site-logo-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
  }
  .site-logo-zusatz { display: none; }

  .burger-btn { display: flex; }

  /* Off-Canvas Nav von rechts */
  .site-nav {
    position: fixed;
    top: 0;
    right: -100%;
    width: min(320px, 85vw);
    height: 100vh;
    background: var(--farbe-flaeche);
    border-left: 1px solid var(--farbe-linie);
    border-top: none;
    border-bottom: none;
    box-shadow: -8px 0 32px rgba(21, 24, 28, 0.16);
    overflow-y: auto;
    overscroll-behavior: contain;
    z-index: 999;
    transition: right var(--uebergang);
    padding: 4.5rem 0 2rem;
  }
  .site-nav.offen { right: 0; }

  .mobile-overlay { display: block; }

  .site-nav-inner { padding: 0; }

  .site-nav-inner > ul {
    flex-direction: column;
    align-items: stretch;
    height: auto;
    gap: 0;
  }

  .site-nav-inner > ul > li {
    height: auto;
    border-bottom: 1px solid var(--farbe-linie);
  }

  .site-nav-inner > ul > li > a {
    height: auto;
    padding: 0.9rem 1.5rem;
    font-size: 0.95rem;
    justify-content: space-between;
    border-bottom: none;
  }

  /* Mobile Dropdown */
  .site-nav-inner > ul > li.has-dropdown > ul,
  .site-nav-inner > ul > li.hat-dropdown > ul {
    position: static;
    opacity: 1;
    visibility: hidden;
    transform: none;
    max-height: 0;
    overflow: hidden;
    box-shadow: none;
    border: none;
    background: var(--farbe-bg);
    padding: 0;
    transition: max-height 0.3s ease, visibility 0.3s;
  }
  .site-nav-inner > ul > li.has-dropdown.offen > ul,
  .site-nav-inner > ul > li.hat-dropdown.offen > ul {
    visibility: visible;
    max-height: 600px;
  }
  .site-nav-inner > ul > li.has-dropdown > ul li a,
  .site-nav-inner > ul > li.hat-dropdown > ul li a {
    padding: 0.7rem 1.5rem 0.7rem 2.25rem;
    border-radius: 0;
    border-top: 1px solid var(--farbe-linie);
  }

  /* Mobile-only einblenden */
  .site-nav-inner > ul > li.mobile-only { display: block; }
  .site-nav-inner > ul > li.mobile-only a {
    color: var(--farbe-marker);
    font-weight: 600;
    padding: 0.9rem 1.5rem;
  }
}

@media (max-width: 480px) {
  .header-inner { padding: 0 1.25rem; }
  .site-nav-inner { padding: 0; }
}

/* --------------------------------------------------------------------------
   HERO SLIDER — CMS-Klassen: .slider-bereich / .slider-folie / .slider-punkt
   -------------------------------------------------------------------------- */
.slider-bereich {
  position: relative;
  width: 100%;
  height: 580px;
  overflow: hidden;
  background: var(--farbe-nacht);
}

/* Arc-Signatur im Hero — zeichnet sich beim Laden ein */
.slider-bereich::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -1350px;
  width: 2400px;
  height: 2400px;
  margin-left: -1200px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.22);
  pointer-events: none;
  z-index: 1;
  opacity: 0;
  transform: scale(0.92);
  animation: bogen-einzeichnen 1.4s cubic-bezier(0.16, 1, 0.3, 1) 0.3s forwards;
}
@keyframes bogen-einzeichnen {
  to { opacity: 1; transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .slider-bereich::after { animation: none; opacity: 1; transform: scale(1); }
}

.slider-folie {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.7s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
}
.slider-folie.aktiv { opacity: 1; }
.slider-folie img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: grayscale(0.15) contrast(1.03);
}

.slider-folie::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    100deg,
    rgba(var(--farbe-nacht-rgb), 0.86) 0%,
    rgba(var(--farbe-nacht-rgb), 0.55) 48%,
    rgba(var(--farbe-nacht-rgb), 0.20) 100%
  );
  z-index: 1;
}

.slider-text-box,
.slider-inhalt {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  /* Volle Breite als Balken (Full-Bleed-Ästhetik bewusst beibehalten), aber die
     Innenabstände links/rechts an dieselbe zentrierte Inhaltsspalte koppeln, die
     .container/.header-inner überall sonst auf der Seite verwenden
     ( max-width: var(--max-breite); margin:0 auto ). Ohne das wandert der Text bei
     breiten Viewports (1920px+) auf den fixen 4rem-Wert zusammen — weit links vom
     Rest der Seite entfernt, während Logo/Nav/Überschriften auf var(--max-breite)
     zentriert bleiben (bei 1920px z.B. 64px vs. 352px Abstand vom Viewportrand,
     eine 288px-Verschiebung — bei main9 bereits einmal als ".container komplett
     vergessen"-Bug aufgetreten, hier dieselbe Ursache in einer Sonderkomponente).
     max() sorgt dafür, dass auf schmalen Viewports (< 1200px + 2*4rem = 1328px)
     mindestens 4rem Innenabstand erhalten bleibt, auf breiten Viewports der
     linke/rechte Innenabstand aber exakt dem seitlichen Container-Inset
     ( (100% - var(--max-breite)) / 2 ) entspricht — der Text fluchtet damit bei
     jeder Breite mit dem linken Rand von .container/.header-inner. */
  padding: 3rem max((100% - var(--max-breite)) / 2, 4rem);
  z-index: 2;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.6s ease 0.15s, transform 0.6s ease 0.15s;
}
.slider-folie.aktiv .slider-text-box,
.slider-folie.aktiv .slider-inhalt {
  opacity: 1;
  transform: translateY(0);
}

.slider-text-box h1,
.slider-text-box .slider-h1,
.slider-inhalt h1 {
  font-size: clamp(1.7rem, 4vw, 3rem);
  font-weight: 700;
  color: var(--farbe-weiss-text);
  line-height: 1.15;
  margin-bottom: 0.85rem;
  max-width: 720px;
}

.slider-text-box p,
.slider-inhalt p {
  font-size: clamp(0.95rem, 2vw, 1.1rem);
  color: rgba(255, 255, 255, 0.82);
  font-weight: 300;
  margin-bottom: 1.5rem;
  max-width: 560px;
}

/* Slider-Label im main9-"Praezisionsbogen"-Look: gefuellter Badge (analog main8s
   .slider-label-Muster), aber mit main9-eigener Akzentfarbe --farbe-marker statt
   fremder Terra-Farbe, und Mono-Schrift statt main8s Standardschrift fuer
   Konsistenz mit .section-tag. */
.slider-text-box .slider-label,
.slider-inhalt .slider-label {
  display: inline-block;
  background: rgba(var(--farbe-marker-rgb), 0.9);
  color: var(--farbe-weiss);
  font-family: var(--schrift-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.4rem 1rem;
  border-radius: var(--radius-mittel);
  margin-bottom: 1rem;
}

.btn-slider-primaer,
.btn-akzent {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--farbe-marker);
  color: var(--farbe-weiss-text);
  padding: 0.85rem 1.9rem;
  border-radius: var(--radius-mittel);
  font-weight: 600;
  font-size: 0.92rem;
  transition: background var(--uebergang), transform var(--uebergang);
}
.btn-slider-primaer:hover,
.btn-akzent:hover {
  background: var(--farbe-marker-dunkel);
  color: var(--farbe-weiss-text);
  transform: translateY(-2px);
}

.btn-slider-sekundaer,
.btn-hell {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border: 1px solid rgba(255, 255, 255, 0.55);
  color: var(--farbe-weiss-text);
  padding: 0.8rem 1.65rem;
  border-radius: var(--radius-mittel);
  font-weight: 500;
  font-size: 0.92rem;
  transition: border-color var(--uebergang), background var(--uebergang);
}
.btn-slider-sekundaer:hover,
.btn-hell:hover {
  border-color: var(--farbe-weiss-text);
  background: rgba(255, 255, 255, 0.1);
  color: var(--farbe-weiss-text);
}

.slider-btn-gruppe,
.slider-aktionen {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}

/* Slider Pfeile */
.slider-pfeil-links,
.slider-pfeil-rechts {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  background: rgba(255, 255, 255, 0.1);
  color: var(--farbe-weiss-text);
  border: 1px solid rgba(255, 255, 255, 0.35);
  width: 2.8rem;
  height: 2.8rem;
  border-radius: var(--radius-rund);
  cursor: pointer;
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--uebergang), border-color var(--uebergang);
  backdrop-filter: blur(6px);
}
.slider-pfeil-links:hover,
.slider-pfeil-rechts:hover {
  background: var(--farbe-marker);
  border-color: var(--farbe-marker);
}
.slider-pfeil-links { left: 1.5rem; }
.slider-pfeil-rechts { right: 1.5rem; }

/* Slider Punkte */
.slider-punkte {
  position: absolute;
  bottom: 1.5rem;
  right: 4rem;
  z-index: 10;
  display: flex;
  gap: 0.5rem;
  align-items: center;
}
.slider-punkt {
  width: 8px;
  height: 8px;
  border-radius: var(--radius-rund);
  background: rgba(255, 255, 255, 0.4);
  border: none;
  padding: 0;
  cursor: pointer;
  transition: background var(--uebergang), width var(--uebergang), border-radius var(--uebergang);
}
.slider-punkt.aktiv,
.slider-punkt:hover {
  background: var(--farbe-marker);
  width: 1.6rem;
  border-radius: 4px;
}

@media (max-width: 640px) {
  .slider-bereich { height: 440px; }
  /* .slider-text-box ist im echten Markup nie vorhanden (nur .slider-inhalt,
     siehe HTML) — beide Klassen hier mitführen, damit dieser Override auch
     wirklich greift und die Desktop-Berechnung mit max()-Container-Floor auf
     schmalen Bildschirmen nicht unnötig viel Rand erzeugt. */
  .slider-text-box,
  .slider-inhalt { padding: 2rem 1.5rem; }
  .slider-pfeil-links,
  .slider-pfeil-rechts { display: none; }
}

/* --------------------------------------------------------------------------
   BREADCRUMB
   -------------------------------------------------------------------------- */
.breadcrumb {
  background: var(--farbe-bg-alt);
  padding: 0.8rem 2rem;
  border-bottom: 1px solid var(--farbe-linie);
  font-family: var(--schrift-mono);
}
.breadcrumb-liste,
.breadcrumb ol {
  max-width: var(--max-breite);
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
  font-size: 0.76rem;
  color: var(--farbe-tinte-soft);
  list-style: none;
  padding: 0;
}
.breadcrumb-liste a,
.breadcrumb ol a {
  color: var(--farbe-marker);
  font-weight: 500;
  text-decoration: none;
}
.breadcrumb-liste a:hover,
.breadcrumb ol a:hover { color: var(--farbe-marker-dunkel); }
.breadcrumb-liste li:not(:last-child)::after {
  content: '/';
  margin-left: 0.4rem;
  color: var(--farbe-linie);
}
.breadcrumb ol li + li::before {
  content: '/';
  margin-right: 0.4rem;
  color: var(--farbe-linie);
}

/* --------------------------------------------------------------------------
   SEKTION-TAGS / ÜBERSCHRIFTEN
   -------------------------------------------------------------------------- */
.section-tag,
.section-label {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--schrift-mono);
  color: var(--farbe-marker);
  padding: 0;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 1rem;
}
.section-tag::before,
.section-label::before {
  content: '';
  display: inline-block;
  width: 22px;
  height: 1px;
  background: var(--farbe-marker);
}

.section-linie { display: none; } /* ersetzt durch section-tag::before Messstrich */

.section-titel,
.section-header h2 {
  font-size: clamp(1.6rem, 3.5vw, 2.4rem);
  font-weight: 700;
  color: var(--farbe-tinte);
  line-height: 1.15;
  margin-bottom: 1rem;
}

.section-text,
.section-header p {
  font-size: 1.05rem;
  color: var(--farbe-tinte-soft);
  line-height: 1.75;
  margin-bottom: 1.5rem;
}

.section-header {
  text-align: center;
  margin-bottom: var(--abstand-xl);
}
.section-header .section-tag,
.section-header .section-label { justify-content: center; }
.section-header p { max-width: 600px; margin: 0 auto 1.5rem; }

.section-beschreibung {
  font-size: 1rem;
  font-weight: 300;
  color: var(--farbe-tinte-soft);
  line-height: 1.8;
  margin-top: 0.5rem;
}

/* echtes Markup (geruest.tpl.htm) nutzt .seite-header mit Foto-Hintergrund */
.seite-header {
  position: relative;
  text-align: center;
  color: var(--farbe-weiss);
  overflow: hidden;
}
.seite-header .header-bg {
  display: block;
  width: 100%;
  max-height: 320px;
  object-fit: cover;
  filter: grayscale(0.2);
}
.seite-header::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(var(--farbe-nacht-rgb), 0.85), rgba(var(--farbe-nacht-rgb), 0.55));
  z-index: 1;
}
.seite-header .container {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem 1rem;
}
.seite-header h1 { color: var(--farbe-weiss); margin-bottom: 0.5rem; }
.seite-header p {
  color: rgba(255, 255, 255, 0.82);
  font-size: 1.05rem;
  max-width: 600px;
  margin: 0 auto;
}

/* --------------------------------------------------------------------------
   BILDSPALTEN-SECTION
   WICHTIG: :nth-of-type(even) — NIEMALS :nth-child(even)!
   Collapse erst bei 640px — NIEMALS bei 900px!
   -------------------------------------------------------------------------- */
.bildspalten-section {
  padding: 4.5rem 2rem;
  /* Hintergrund kommt jetzt von der seitenweiten :where()-Alternation
     weiter oben — hier NICHT nochmal setzen, das wuerde sie mit hoeherer
     Spezifitaet ueberschreiben und die Sections nie wechseln lassen. */
}

.bildspalten-grid {
  max-width: var(--max-breite);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
}
.bildspalten-section:nth-of-type(even) .bildspalten-grid { direction: rtl; }
.bildspalten-section:nth-of-type(even) .bildspalten-grid > * { direction: ltr; }

.bildspalten-grid-reverse {
  max-width: var(--max-breite);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
  direction: rtl;
}
.bildspalten-grid-reverse > * { direction: ltr; }

.bildspalten-bild { position: relative; }
.bildspalten-bild img {
  width: 100%;
  height: 460px;
  object-fit: cover;
  border-radius: var(--radius-gross);
  filter: grayscale(0.1);
}
/* Messwinkel statt Rahmen — zwei kurze Linien an einer Ecke */
.bildspalten-bild::before {
  content: '';
  position: absolute;
  top: -0.85rem;
  left: -0.85rem;
  width: 2.5rem;
  height: 2.5rem;
  border-top: 2px solid var(--farbe-marker);
  border-left: 2px solid var(--farbe-marker);
}

.bildspalten-text h2 {
  font-size: clamp(1.5rem, 3vw, 2.2rem);
  margin-bottom: 1rem;
}
.bildspalten-text p {
  font-size: 1.05rem;
  color: var(--farbe-tinte-soft);
  line-height: 1.75;
  margin-bottom: 1rem;
}
.bildspalten-text ul {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin: 1.25rem 0 1.75rem;
}
.bildspalten-text ul li {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  font-size: 0.975rem;
  color: var(--farbe-tinte-soft);
}
.bildspalten-text ul li::before {
  content: '';
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-top: 0.2rem;
  border: 1.5px solid var(--farbe-marker);
  border-radius: var(--radius-rund);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23BA3422' stroke-width='3'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E");
  background-size: 10px;
  background-position: center;
  background-repeat: no-repeat;
}

@media (max-width: 640px) {
  .bildspalten-grid,
  .bildspalten-grid-reverse {
    grid-template-columns: 1fr;
    gap: 2.5rem;
    direction: ltr !important;
  }
  .bildspalten-section:nth-of-type(even) .bildspalten-grid > *,
  .bildspalten-grid-reverse > * { direction: ltr; }
  .bildspalten-bild img { height: 300px; }
}

/* --------------------------------------------------------------------------
   PRAXIS-FAKTEN / KENNZAHLEN — Messwerte-Panel
   Klasse: .praxis-fakt-zahl[data-ziel] — CMS-Standard!
   -------------------------------------------------------------------------- */
.praxis-fakten-section {
  background: var(--farbe-nacht);
  padding: 4rem 2rem;
}
.praxis-fakten-grid {
  max-width: var(--max-breite);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  text-align: center;
}
.praxis-fakt-item {
  padding: 1rem;
  border-left: 1px solid rgba(255, 255, 255, 0.12);
}
.praxis-fakt-item:first-child { border-left: none; }
.praxis-fakt-zahl {
  font-family: var(--schrift-display);
  font-size: clamp(2.2rem, 4vw, 3.2rem);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--farbe-weiss-text);
  line-height: 1;
  margin-bottom: 0.6rem;
  display: block;
}
.praxis-fakt-suffix { color: var(--farbe-marker-hell); }
.praxis-fakt-label {
  font-family: var(--schrift-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}
@media (max-width: 768px) {
  .praxis-fakten-grid { grid-template-columns: repeat(2, 1fr); row-gap: 2rem; }
  .praxis-fakt-item:nth-child(2n+1) { border-left: none; }
}
@media (max-width: 480px) {
  .praxis-fakten-grid { grid-template-columns: 1fr 1fr; }
}

/* --------------------------------------------------------------------------
   BEHANDLUNGSGRUPPEN (vorlage_boxen6.htm)
   -------------------------------------------------------------------------- */
.gruppen-section { padding: 4.5rem 2rem; }
.gruppen-grid {
  max-width: var(--max-breite);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
.gruppe-karte {
  background: var(--farbe-flaeche);
  border: 1px solid var(--farbe-linie);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform var(--uebergang), box-shadow var(--uebergang), border-color var(--uebergang);
}
.gruppe-karte:hover {
  transform: translateY(-4px);
  box-shadow: var(--schatten-gross);
  border-color: var(--farbe-marker);
}
.gruppe-bild { height: 200px; overflow: hidden; position: relative; }
.gruppe-bild img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
  filter: grayscale(0.15);
}
.gruppe-karte:hover .gruppe-bild img { transform: scale(1.05); }
.gruppe-bild-icon {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: var(--farbe-marker);
  color: var(--farbe-weiss-text);
  width: 40px;
  height: 40px;
  border-radius: var(--radius-mittel);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.05rem;
}
.gruppe-inhalt { padding: 1.6rem; flex: 1; display: flex; flex-direction: column; }
.gruppe-inhalt h3 { font-size: 1.05rem; margin-bottom: 0.65rem; }
.gruppe-inhalt p {
  font-size: 0.9rem;
  color: var(--farbe-tinte-soft);
  line-height: 1.7;
  flex: 1;
  margin-bottom: 1.25rem;
}
.gruppe-mehr {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-family: var(--schrift-mono);
  color: var(--farbe-marker);
  font-weight: 500;
  font-size: 0.76rem;
  letter-spacing: 0.05em;
  transition: gap var(--uebergang);
}
.gruppe-mehr:hover { gap: 0.6rem; }
@media (max-width: 900px) { .gruppen-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .gruppen-grid { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------------------
   LEISTUNG-BILD-KARTE (vorlage_boxen6_design2.htm)
   -------------------------------------------------------------------------- */
.leistung-bild-karte {
  background: var(--farbe-flaeche);
  border: 1px solid var(--farbe-linie);
  overflow: hidden;
  transition: transform var(--uebergang), border-color var(--uebergang);
}
.leistung-bild-karte:hover {
  transform: translateY(-4px);
  border-color: var(--farbe-marker);
}
.leistung-bild { height: 180px; overflow: hidden; }
.leistung-bild img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.4s ease; filter: grayscale(0.15);
}
.leistung-bild-karte:hover .leistung-bild img { transform: scale(1.04); }
.leistung-bild-karte-inhalt { padding: 1.4rem; }
.leistung-bild-karte-inhalt h3 { font-size: 1.02rem; margin-bottom: 0.6rem; }
.leistung-bild-karte-inhalt p { font-size: 0.9rem; color: var(--farbe-tinte-soft); line-height: 1.65; }

/* --------------------------------------------------------------------------
   SCHNELLINFOS-LEISTE (vorlage_schnellinfos.htm)
   -------------------------------------------------------------------------- */
.schnellinfos-section {
  background: var(--farbe-nacht);
  padding: 1.5rem 2rem;
}
.schnellinfos-grid {
  max-width: var(--max-breite);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
}
.schnellinfo-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.8rem 1.5rem;
  border-right: 1px solid rgba(255, 255, 255, 0.1);
}
.schnellinfo-item:last-child { border-right: none; }
.schnellinfo-icon {
  width: 40px;
  height: 40px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--radius-rund);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--farbe-marker-hell);
  font-size: 0.95rem;
}
.schnellinfo-text { display: flex; flex-direction: column; gap: 0.15rem; }
.schnellinfo-text strong {
  font-family: var(--schrift-mono);
  color: var(--farbe-weiss-text);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.schnellinfo-text span,
.schnellinfo-text a { color: rgba(255, 255, 255, 0.65); font-size: 0.85rem; }
.schnellinfo-text a:hover { color: var(--farbe-marker-hell); }
@media (max-width: 900px) { .schnellinfos-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) {
  .schnellinfos-grid { grid-template-columns: 1fr; }
  .schnellinfo-item { border-right: none; border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
  .schnellinfo-item:last-child { border-bottom: none; }
}

/* --------------------------------------------------------------------------
   WILLKOMMEN-SECTION (vorlage_willkommen_linksbild_rechtstext.htm)
   -------------------------------------------------------------------------- */
.willkommen-section { padding: 4.5rem 2rem; background: var(--farbe-flaeche); }
.willkommen-grid {
  max-width: var(--max-breite);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: var(--abstand-xl);
  align-items: center;
}
.willkommen-bild { position: relative; }
.willkommen-bild img {
  width: 100%;
  height: 440px;
  object-fit: cover;
  border-radius: var(--radius-gross);
  filter: grayscale(0.1);
}
/* Messwinkel — dasselbe Signatur-Element wie .bildspalten-bild, damit die
   Bildbehandlung auf der Startseite konsistent zu den Unterseiten ist */
.willkommen-bild::before {
  content: '';
  position: absolute;
  top: -0.85rem;
  left: -0.85rem;
  width: 2.5rem;
  height: 2.5rem;
  border-top: 2px solid var(--farbe-marker);
  border-left: 2px solid var(--farbe-marker);
  pointer-events: none;
}
.willkommen-badge {
  position: absolute;
  bottom: -1.25rem;
  right: -1.25rem;
  background: var(--farbe-marker);
  color: var(--farbe-weiss-text);
  width: 104px;
  height: 104px;
  border-radius: var(--radius-rund);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: var(--schatten-gross);
  text-align: center;
  padding: 1rem;
}
.willkommen-badge strong { font-family: var(--schrift-display); font-size: 1.5rem; line-height: 1; font-variant-numeric: tabular-nums; }
.willkommen-badge span {
  font-family: var(--schrift-mono);
  font-size: 0.56rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-top: 0.3rem;
  opacity: 0.9;
}
.willkommen-inhalt h2 { margin-bottom: 1.2rem; }
.willkommen-inhalt p { color: var(--farbe-tinte-soft); margin-bottom: 1.2rem; font-size: 1rem; line-height: 1.75; }
.willkommen-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin: 2rem 0;
  padding: 1.5rem;
  background: var(--farbe-bg);
  border: 1px solid var(--farbe-linie);
}
.stat-item { text-align: center; }
.stat-item strong { display: block; font-family: var(--schrift-display); font-size: 1.5rem; color: var(--farbe-marker); line-height: 1; font-variant-numeric: tabular-nums; }
.stat-item span {
  font-family: var(--schrift-mono);
  font-size: 0.68rem;
  color: var(--farbe-tinte-soft);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
@media (max-width: 900px) { .willkommen-grid { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------------------
   TEXTBLOCK-SECTION (vorlage_textblock_*.htm)
   -------------------------------------------------------------------------- */
.textblock-section { padding: 4.5rem 2rem; }
.textblock-section h2 { font-size: clamp(1.4rem, 3vw, 2rem); margin-bottom: var(--abstand-m); }
.textblock-section p { color: var(--farbe-tinte-soft); line-height: 1.85; margin-bottom: 1rem; font-size: 1.05rem; }
.textblock-linie { width: 22px; height: 1px; background: var(--farbe-marker); margin-bottom: var(--abstand-l); }
.textblock-einspaltig .textblock-inhalt { max-width: 780px; margin: 0 auto; }
.textblock-spalten {
  max-width: var(--max-breite);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--abstand-xl);
}
.textblock-zwei-ueberschriften .textblock-spalte p { color: var(--farbe-tinte); margin-bottom: 1.2rem; }
@media (max-width: 768px) { .textblock-spalten { grid-template-columns: 1fr; gap: var(--abstand-l); } }

/* --------------------------------------------------------------------------
   REINE-PARALLAX (Foto ohne Text)
   -------------------------------------------------------------------------- */
.reine-parallax-section {
  position: relative;
  min-height: 400px;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  overflow: hidden;
  filter: grayscale(0.1);
}
.reine-parallax-overlay { position: absolute; inset: 0; background: rgba(var(--farbe-nacht-rgb), 0.2); }
.parallax-helper-img { display: none; }
@media (max-width: 768px) { .reine-parallax-section { background-attachment: scroll; } }

/* --------------------------------------------------------------------------
   CTA-PARALLAX (Foto MIT Text/Buttons)
   -------------------------------------------------------------------------- */
.cta-parallax-section {
  position: relative;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  padding: 4.5rem 2rem;
  overflow: hidden;
}
.cta-parallax-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(var(--farbe-nacht-rgb), 0.92) 0%, rgba(var(--farbe-nacht-rgb), 0.78) 100%);
}
.cta-parallax-inhalt { position: relative; z-index: 2; text-align: center; max-width: 700px; margin: 0 auto; }
.cta-parallax-inhalt h2 { color: var(--farbe-weiss-text); font-size: clamp(1.8rem, 3.5vw, 2.8rem); margin-bottom: 1rem; }
.cta-parallax-inhalt p { color: rgba(255, 255, 255, 0.8); font-size: 1.05rem; line-height: 1.8; margin-bottom: 2.5rem; }
.cta-aktionen { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }
.section-label-hell { color: rgba(255, 255, 255, 0.75); }
@media (max-width: 768px) { .cta-parallax-section { background-attachment: scroll; } }

/* --------------------------------------------------------------------------
   PRAXIS-SECTION (Foto-BG mit Kennzahlen, vorlage_kennzahlen.htm)
   -------------------------------------------------------------------------- */
.praxis-section {
  position: relative;
  padding: 4.5rem 2rem;
  background-size: cover;
  background-position: center top;
  background-attachment: fixed;
}
.praxis-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(var(--farbe-nacht-rgb), 0.92) 0%, rgba(var(--farbe-nacht-rgb), 0.78) 100%);
}
@media (max-width: 768px) { .praxis-section { background-attachment: scroll; } }
.praxis-inhalt { position: relative; z-index: 2; max-width: 900px; margin: 0 auto; text-align: center; }
.praxis-inhalt h2 { color: var(--farbe-weiss-text); font-size: clamp(1.8rem, 3.5vw, 2.8rem); margin-bottom: 1.2rem; }
.praxis-inhalt > p { color: rgba(255, 255, 255, 0.82); font-size: 1.05rem; max-width: 600px; margin: 0 auto 2rem; line-height: 1.8; }
.praxis-fakten {
  max-width: var(--max-breite);
  margin: 3rem auto 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  text-align: center;
}
.praxis-fakt { padding: 1rem; border-left: 1px solid rgba(255, 255, 255, 0.12); }
.praxis-fakt:first-child { border-left: none; }
.praxis-fakt-zahl { font-family: var(--schrift-display); font-size: clamp(2rem, 4vw, 3rem); font-weight: 700; font-variant-numeric: tabular-nums; color: var(--farbe-weiss-text); line-height: 1; margin-bottom: 0.5rem; display: block; }
.praxis-fakt-text { font-family: var(--schrift-mono); font-size: 0.74rem; letter-spacing: 0.03em; color: rgba(255, 255, 255, 0.65); line-height: 1.5; }
@media (max-width: 768px) {
  .praxis-fakten { grid-template-columns: repeat(2, 1fr); row-gap: 1.5rem; }
  .praxis-fakt:nth-child(2n+1) { border-left: none; }
}
@media (max-width: 480px) { .praxis-fakten { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------------------
   KONTAKT-CTA-LEISTE (vorlage_kontakt_cta.htm)
   -------------------------------------------------------------------------- */
.kontakt-cta-section {
  padding: var(--abstand-l) 2rem;
  border-top: 1px solid var(--farbe-linie);
  border-bottom: 1px solid var(--farbe-linie);
}
.kontakt-cta-grid {
  max-width: var(--max-breite);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 2rem;
  align-items: center;
}
.kontakt-cta-item { display: flex; align-items: center; gap: 1rem; }
.kontakt-cta-icon {
  width: 48px; height: 48px;
  background: var(--farbe-marker);
  border-radius: var(--radius-mittel);
  display: flex; align-items: center; justify-content: center;
  color: var(--farbe-weiss-text); font-size: 1.05rem; flex-shrink: 0;
}
.kontakt-cta-text strong { display: block; font-size: 0.85rem; color: var(--farbe-tinte); font-weight: 700; }
.kontakt-cta-text span,
.kontakt-cta-text a { font-family: var(--schrift-mono); font-size: 0.95rem; color: var(--farbe-marker); font-weight: 500; }
@media (max-width: 900px) { .kontakt-cta-grid { grid-template-columns: 1fr; gap: 1.25rem; } }

/* --------------------------------------------------------------------------
   HIGHLIGHT-SECTION MIT VORTEILEN
   -------------------------------------------------------------------------- */
.highlight-section {
  background: var(--farbe-nacht);
  padding: 4.5rem 2rem;
  color: var(--farbe-weiss-text);
}
.highlight-section h2 { color: var(--farbe-weiss-text); margin-bottom: 1rem; }
.highlight-section p { color: rgba(255, 255, 255, 0.8); font-size: 1.05rem; }
.vorteile-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
  margin-top: var(--abstand-l);
  max-width: var(--max-breite);
  margin-left: auto;
  margin-right: auto;
}
.vorteil-item { text-align: center; padding: 1.5rem 1rem; }
.vorteil-icon {
  width: 52px; height: 52px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: var(--radius-rund);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 1rem;
  font-size: 1.3rem;
  color: var(--farbe-marker-hell);
}
.vorteil-item h4 { color: var(--farbe-weiss-text); font-size: 1rem; margin-bottom: 0.5rem; }
.vorteil-item p { font-size: 0.88rem; color: rgba(255, 255, 255, 0.7); line-height: 1.5; }
@media (max-width: 900px) { .vorteile-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .vorteile-grid { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------------------
   FLOAT-SECTION (Bild im Fliesstext)
   -------------------------------------------------------------------------- */
.float-section { padding: 4.5rem 2rem; }
.float-section h2 { font-size: clamp(1.4rem, 3vw, 2rem); margin-bottom: var(--abstand-m); }
.float-section p { color: var(--farbe-tinte-soft); line-height: 1.85; margin-bottom: 1rem; font-size: 1.05rem; }
.float-section .container::after { content: ''; display: table; clear: both; }
/* Messwinkel: main9.js wrappt jedes freistehende <img> (kein Wrapper-Div im
   geteilten Markup) zur Laufzeit in <span class="img-messwinkel ...">, weil
   ::before auf <img> selbst in keinem Browser rendert (Replaced-Element-
   Einschraenkung). Float/Breite/Radius wandern dadurch auf den Wrapper,
   das <img> selbst wird schlicht auf volle Wrapper-Groesse zurueckgesetzt. */
.img-messwinkel {
  position: relative;
  display: block;
  /* KEIN overflow:hidden hier — wuerde die Messwinkel-Ecke (negativer
     Versatz) abschneiden. Radius/Clipping sitzen stattdessen direkt auf
     dem <img> selbst, das reicht fuer ein einzelnes Bild ohne Container. */
}
.img-messwinkel::before {
  content: '';
  position: absolute;
  top: -0.85rem;
  left: -0.85rem;
  width: 2.5rem;
  height: 2.5rem;
  border-top: 2px solid var(--farbe-marker);
  border-left: 2px solid var(--farbe-marker);
  pointer-events: none;
}
.img-messwinkel img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-gross);
  filter: grayscale(0.1);
}
/* margin-bottom grosszuegiger als bei den anderen Seiten der Box (3rem statt
   1.5rem): wenn ein Textblock mehrere Float-Bilder direkt hintereinander
   enthaelt, muss unter der Messwinkel-Ecke (die 0.85rem in den Bereich
   darueber hineinragt) noch sichtbar Luft zum naechsten Bild bleiben. */
.img-messwinkel.float-img-links { float: left; width: 40%; max-width: 420px; margin: 0.25rem 2.5rem 3rem 0; }
.img-messwinkel.float-img-rechts { float: right; width: 40%; max-width: 420px; margin: 0.25rem 0 3rem 2.5rem; }
/* gap grosszuegiger als man erwarten wuerde (2.5rem statt 1rem): bei zwei
   direkt gestapelten Bildern braucht die Messwinkel-Ecke des unteren Bildes
   (ragt 0.85rem nach oben) sichtbar Abstand zum oberen Bild, sonst wirkt es
   wie ein Rendering-Fehler statt eines bewussten Gestaltungselements. */
.img-group-right { float: right; width: 25%; margin: 0 0 0.25rem 1.5rem; display: flex; flex-direction: column; gap: 2.5rem; }
@media (max-width: 768px) {
  .img-messwinkel.float-img-links, .img-messwinkel.float-img-rechts, .img-group-right { float: none; width: 100%; max-width: none; margin: 0 0 1.5rem 0; }
}

/* --------------------------------------------------------------------------
   LEISTUNGEN-SECTION
   -------------------------------------------------------------------------- */
.leistungen-section { padding: 4.5rem 2rem; }
.leistungen-kopf { max-width: var(--max-breite); margin: 0 auto 3rem; text-align: center; }
.leistungen-grid {
  max-width: var(--max-breite);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
.leistungs-karte {
  background: var(--farbe-flaeche);
  padding: 2rem;
  border: 1px solid var(--farbe-linie);
  position: relative;
  overflow: hidden;
  transition: transform var(--uebergang), border-color var(--uebergang);
}
.leistungs-karte::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--farbe-marker);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--uebergang);
}
.leistungs-karte:hover { transform: translateY(-4px); border-color: var(--farbe-marker); }
.leistungs-karte:hover::before { transform: scaleX(1); }
.leistungs-karte-icon {
  width: 3.25rem; height: 3.25rem;
  background: var(--farbe-bg);
  border-radius: var(--radius-mittel);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 1.25rem;
  font-size: 1.3rem;
  color: var(--farbe-marker);
  transition: background var(--uebergang), color var(--uebergang);
}
.leistungs-karte:hover .leistungs-karte-icon { background: var(--farbe-marker); color: var(--farbe-weiss-text); }
.leistungs-karte h3 { font-size: 1.05rem; margin-bottom: 0.75rem; }
.leistungs-karte p { font-size: 0.9rem; color: var(--farbe-tinte-soft); line-height: 1.7; }
.leistungs-karte-link {
  display: inline-flex; align-items: center; gap: 0.35rem;
  margin-top: 1rem;
  font-family: var(--schrift-mono);
  font-size: 0.76rem; font-weight: 500;
  color: var(--farbe-marker);
  transition: gap var(--uebergang);
}
.leistungs-karte-link:hover { gap: 0.6rem; }
@media (max-width: 900px) { .leistungen-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .leistungen-grid { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------------------
   PHILOSOPHIE / ZITAT-SECTION
   -------------------------------------------------------------------------- */
.zitat-section,
.philosophie-section,
.natur-zitat-section {
  /* 2026-08-26: vorher identisch --farbe-nacht wie .highlight-section -
     auf Seiten wo beide direkt aufeinanderfolgen (z.B. umweltzahnmedizin)
     verschmolzen sie sichtbar zu einem einzigen Block. --farbe-nacht-2 war
     im Farbsystem bereits als zweiter, leicht hellerer Dunkelton definiert,
     aber ungenutzt - genau fuer diesen Fall gedacht. */
  background: var(--farbe-nacht-2);
  padding: 4.5rem 2rem;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.zitat-inner,
.philosophie-inner,
.zitat-inhalt {
  max-width: 800px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}
.zitat-anfuehrung { display: none; }
.zitat-inner blockquote,
.philosophie-inner blockquote,
.philosophie-zitat,
.zitat-text {
  font-family: var(--schrift-display);
  font-size: clamp(1.2rem, 2.8vw, 1.8rem);
  font-weight: 400;
  color: var(--farbe-weiss-text);
  line-height: 1.5;
  margin-bottom: 1.5rem;
}
.zitat-autor,
.philosophie-quelle,
.zitat-quelle {
  /* Inhalt ist je nach Kunde eine kurze Signatur ODER ein ganzer Satz -
     bewusst NICHT uppercase/stark getrackt, das waere bei langem Text
     unlesbar. Helle Markerfarbe fuer WCAG-Kontrast auf dunklem Grund. */
  font-family: var(--schrift-mono);
  font-size: 0.85rem;
  color: var(--farbe-marker-hell);
  font-weight: 500;
  letter-spacing: 0.02em;
  line-height: 1.6;
}

/* --------------------------------------------------------------------------
   TEAM-SECTION
   -------------------------------------------------------------------------- */
.team-section { padding: 4.5rem 2rem; }
.team-kopf { max-width: 600px; margin: 0 auto 3rem; text-align: center; }
.team-grid {
  max-width: var(--max-breite);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}
.team-grid:has(.team-foto-karte) { display: flex; flex-direction: column; gap: 2.5rem; }
.team-karte {
  background: var(--farbe-flaeche);
  padding: 2.5rem 2rem;
  border: 1px solid var(--farbe-linie);
  text-align: center;
  transition: transform var(--uebergang), border-color var(--uebergang);
  position: relative;
  overflow: hidden;
}
.team-karte::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--farbe-marker);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--uebergang);
}
.team-karte:hover { transform: translateY(-4px); border-color: var(--farbe-marker); }
.team-karte:hover::before { transform: scaleX(1); }
.team-karte-bild {
  width: 108px; height: 108px;
  border-radius: var(--radius-rund);
  border: 2px solid var(--farbe-linie);
  margin: 0 auto 1.5rem;
  overflow: hidden;
  background: var(--farbe-bg);
  display: flex; align-items: center; justify-content: center;
  font-size: 2.4rem; color: var(--farbe-tinte-soft);
}
.team-karte-bild img { width: 100%; height: 100%; object-fit: cover; }
.team-karte-info h3 { font-size: 1.05rem; margin-bottom: 0.35rem; }
.team-karte-info .team-position {
  font-family: var(--schrift-mono);
  font-size: 0.72rem;
  color: var(--farbe-marker);
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 0.75rem;
  display: block;
}
.team-karte-info p { font-size: 0.9rem; color: var(--farbe-tinte-soft); line-height: 1.6; }

/* --------------------------------------------------------------------------
   TEAM-FOTO-KARTE (include_team.tpl.htm, Lebenslauf-Detailseite)
   -------------------------------------------------------------------------- */
.team-foto-karte {
  position: relative;
  display: flex;
  flex-direction: row;
  /* Foto hat feste Groesse (Portraits duerfen nicht gestreckt/zugeschnitten
     werden) und startet oben buendig mit dem Text — center erzeugte bei
     kurzem Lebenslauf einen grossen Leerraum ÜBER dem Foto (Messwinkel-
     Ecke wirkte dadurch weit vom Bildinhalt entfernt), flex-start haelt
     Foto und Textanfang auf gleicher Hoehe. */
  align-items: flex-start;
  gap: 2.5rem;
  /* KEIN max-width/margin:auto hier — .team-grid ist bereits per
     .team-grid:has(.team-foto-karte) auf display:flex;flex-direction:column
     gestellt und dadurch selbst schon exakt auf --max-breite zentriert;
     margin:auto auf einem Flex-Kind mit column-Elternteil lässt es auf
     seine Inhaltsbreite schrumpfen und sich NOCHMAL zentrieren -
     dadurch stand die Karte sichtbar zu weit rechts/schmal. */
  width: 100%;
  margin-bottom: 2.5rem;
}
.team-foto-karte:last-child { margin-bottom: 0; }
/* Portraits duerfen nicht angeschnitten werden — object-fit:contain statt
   cover, Box daher fest bemessen statt an die Textlaenge gestreckt, und
   vertikal zentriert (align-items:center oben) statt oben angeheftet. */
.team-bild {
  position: relative;
  flex-shrink: 0;
  width: 240px;
  height: 300px;
  /* kein overflow:hidden — object-fit:contain braucht kein Zuschneiden
     mehr, und die Messwinkel-Ecke unten (negativer Versatz) würde sonst
     abgeschnitten */
  background: var(--farbe-bg-alt);
  border-radius: var(--radius-gross);
}
/* Messwinkel — echtes Pseudo-Element, hier moeglich weil .team-bild ein
   echtes Wrapper-Div ist (anders als bei den freistehenden <img>-Bildern
   ohne Wrapper). Auf .team-bild selbst statt .team-foto-karte, damit die
   Ecke auch bei zentriertem Foto exakt am Fotorand sitzt. */
.team-bild::before {
  /* Kleinerer Versatz als bei .bildspalten-bild/.willkommen-bild — die
     sind deutlich groesser (568x460), bei der kleineren 240x300-Fotobox
     wirkte derselbe Versatz unproportional weit vom Bild entfernt. */
  content: '';
  position: absolute;
  top: -0.4rem;
  left: -0.4rem;
  width: 1.5rem;
  height: 1.5rem;
  border-top: 2px solid var(--farbe-marker);
  border-left: 2px solid var(--farbe-marker);
  pointer-events: none;
}
.team-bild img {
  width: 100%; height: 100%; object-fit: contain;
  transition: transform 0.4s ease; display: block; filter: grayscale(0.1);
}
.team-foto-karte:hover .team-bild img { transform: scale(1.04); }
.team-info {
  flex: 1;
  background: var(--farbe-flaeche);
  border: 1px solid var(--farbe-linie);
  padding: 2rem 2.5rem;
}
.team-name { font-family: var(--schrift-display); font-size: 1.15rem; font-weight: 700; margin-bottom: 0.25rem; }
.team-titel {
  font-family: var(--schrift-mono);
  font-size: 0.74rem;
  color: var(--farbe-marker);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 0.75rem;
  display: block;
}
.team-vita { font-size: 0.9rem; color: var(--farbe-tinte-soft); line-height: 1.7; }
.team-vita p { margin-bottom: 0.8rem; }
.team-vita ul { padding-left: 1.2rem; margin-bottom: 0.8rem; }

@media (max-width: 768px) { .team-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) {
  .team-foto-karte { flex-direction: column; }
  /* aspect-ratio statt height:auto — sonst kollabiert die Box auf 0px solange
     das jeweilige Bild noch laedt (sichtbar bei langsameren Bildern) */
  .team-bild { width: 100%; height: auto; aspect-ratio: 4 / 3; }
  .team-bild img { height: 100%; min-height: unset; }
}

/* --------------------------------------------------------------------------
   FAQ-SECTION
   -------------------------------------------------------------------------- */
.faq-section { padding: 4.5rem 2rem; }
.faq-kopf { max-width: 600px; margin: 0 auto 3rem; text-align: center; }
.faq-liste { max-width: 800px; margin: 0 auto; display: flex; flex-direction: column; gap: 0; }
.faq-item { border-bottom: 1px solid var(--farbe-linie); overflow: hidden; }
.faq-frage {
  width: 100%; text-align: left;
  padding: 1.25rem 0;
  font-size: 1rem; font-weight: 600;
  color: var(--farbe-tinte);
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  background: none; border: none; cursor: pointer;
  font-family: var(--schrift-display);
  transition: color var(--uebergang);
}
.faq-frage::after {
  content: '+';
  font-family: var(--schrift-mono);
  font-size: 1.2rem;
  font-weight: 400;
  color: var(--farbe-marker);
  transition: transform var(--uebergang);
  flex-shrink: 0;
}
.faq-item.offen .faq-frage { color: var(--farbe-marker); }
.faq-item.offen .faq-frage::after { transform: rotate(135deg); }
.faq-antwort { max-height: 0; overflow: hidden; transition: max-height 0.35s ease; }
.faq-antwort-inner { padding: 0 0 1.25rem; font-size: 0.95rem; color: var(--farbe-tinte-soft); line-height: 1.75; }

/* --------------------------------------------------------------------------
   KONTAKT-SECTION
   -------------------------------------------------------------------------- */
.kontakt-section { padding: 4.5rem 2rem; }
.kontakt-layout {
  max-width: var(--max-breite);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 4rem;
  align-items: start;
}
.kontakt-info-item { display: flex; align-items: flex-start; gap: 1rem; margin-bottom: 1.5rem; }
.kontakt-info-icon {
  width: 2.6rem; height: 2.6rem;
  background: var(--farbe-marker);
  color: var(--farbe-weiss-text);
  border-radius: var(--radius-mittel);
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem; flex-shrink: 0;
}
.kontakt-info-text strong { display: block; font-size: 0.875rem; color: var(--farbe-tinte); font-weight: 700; margin-bottom: 0.2rem; }
.kontakt-info-text span,
.kontakt-info-text a { font-family: var(--schrift-mono); font-size: 0.9rem; color: var(--farbe-tinte-soft); }
.kontakt-info-text a:hover { color: var(--farbe-marker); }
@media (max-width: 768px) { .kontakt-layout { grid-template-columns: 1fr; gap: 2.5rem; } }

/* Kontaktformular */
.kontakt-form { background: var(--farbe-flaeche); border: 1px solid var(--farbe-linie); padding: 2.5rem; }
.kontakt-form h3 { font-size: 1.3rem; margin-bottom: 1.75rem; }
.form-gruppe { margin-bottom: 1.25rem; }
.form-gruppe label,
.form-datenschutz label { display: block; font-size: 0.875rem; font-weight: 600; color: var(--farbe-tinte); margin-bottom: 0.4rem; }
.form-gruppe input,
.form-gruppe select,
.form-gruppe textarea {
  width: 100%;
  padding: 0.8rem 1rem;
  border: 1px solid var(--farbe-linie);
  border-radius: var(--radius-klein);
  font-size: 0.95rem;
  font-family: var(--schrift-haupt);
  color: var(--farbe-tinte);
  background: var(--farbe-bg);
  transition: border-color var(--uebergang), box-shadow var(--uebergang);
}
.form-gruppe input:focus,
.form-gruppe select:focus,
.form-gruppe textarea:focus {
  outline: none;
  border-color: var(--farbe-marker);
  box-shadow: 0 0 0 3px rgba(var(--farbe-marker-rgb), 0.12);
}
.form-gruppe textarea { min-height: 120px; resize: vertical; }
.form-gruppe input.form-feld-fehler,
.form-gruppe select.form-feld-fehler,
.form-gruppe textarea.form-feld-fehler { border-color: var(--farbe-fehler); }
.form-datenschutz { display: flex; align-items: flex-start; gap: 0.75rem; margin-bottom: 1.5rem; }
.form-datenschutz input[type="checkbox"] { margin-top: 0.15rem; flex-shrink: 0; accent-color: var(--farbe-marker); }
.form-datenschutz label { font-size: 0.85rem; color: var(--farbe-tinte-soft); font-weight: 300; }
.form-datenschutz a { color: var(--farbe-marker); text-decoration: underline; }
.form-meldung { display: none; padding: 0.875rem 1rem; border-radius: var(--radius-klein); font-size: 0.875rem; font-weight: 600; margin-top: 1rem; }
.form-meldung.erfolg { display: block; background: rgba(var(--farbe-gruen-rgb), 0.08); color: #1E8A44; border: 1px solid rgba(var(--farbe-gruen-rgb), 0.3); }
.form-meldung.fehler { display: block; background: rgba(var(--farbe-fehler-rgb), 0.08); color: var(--farbe-fehler); border: 1px solid rgba(var(--farbe-fehler-rgb), 0.3); }

.oeffnungszeiten-tabelle { width: 100%; border-collapse: collapse; font-size: 0.875rem; margin-top: 0.5rem; }
.oeffnungszeiten-tabelle td, .oeffnungszeiten-tabelle th { padding: 0.45rem 0; border-bottom: 1px solid var(--farbe-linie); color: var(--farbe-tinte-soft); }
.oeffnungszeiten-tabelle td:last-child { border-bottom: none; }
.oeffnungszeiten-tabelle td:first-child, .oeffnungszeiten-tabelle th {
  font-family: var(--schrift-mono);
  font-weight: 500; color: var(--farbe-tinte); padding-right: 1.5rem; white-space: nowrap;
}
.oeffnungszeiten-tabelle th { text-align: left; font-weight: inherit; }

/* --------------------------------------------------------------------------
   ANFAHRT / KARTE
   -------------------------------------------------------------------------- */
.anfahrt-section,
.anfahrt-a { padding: 4.5rem 2rem; }
.anfahrt-a-grid {
  max-width: var(--max-breite);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: 3rem;
  align-items: start;
}
.anfahrt-a-info .section-label { margin-bottom: 0.5rem; }
.anfahrt-a-linie { width: 22px; height: 1px; background: var(--farbe-marker); margin: 1rem 0 1.5rem; }
.anfahrt-a-kontakt-liste { margin: 0 0 1rem; }
.anfahrt-a-kontakt-liste li {
  display: flex; align-items: flex-start; gap: 1rem;
  padding: 0.75rem 0; font-size: 0.925rem; color: var(--farbe-tinte-soft);
  border-bottom: 1px solid var(--farbe-linie);
}
.anfahrt-a-kontakt-liste li strong { display: block; color: var(--farbe-tinte); font-weight: 700; margin-bottom: 0.125rem; }
.anfahrt-a-kontakt-liste li a { color: var(--farbe-tinte-soft); text-decoration: none; }
.anfahrt-a-kontakt-liste li a:hover { color: var(--farbe-marker); }
.anfahrt-a-kontakt-liste .ico {
  width: 2.4rem; height: 2.4rem;
  background: var(--farbe-marker); color: var(--farbe-weiss-text);
  border-radius: var(--radius-rund);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.88rem; flex-shrink: 0;
}
#map-zzam { width: 100%; height: 380px; overflow: hidden; border: 1px solid var(--farbe-linie); filter: grayscale(0.3); }
.btn-routenplaner {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  background: var(--farbe-marker); color: var(--farbe-weiss-text);
  border-radius: var(--radius-mittel);
  font-size: 0.875rem; font-weight: 600; margin-top: 1rem;
  transition: background var(--uebergang);
}
.btn-routenplaner:hover { background: var(--farbe-marker-dunkel); color: var(--farbe-weiss-text); }
@media (max-width: 768px) { .anfahrt-a-grid { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------------------
   ALLGEMEINE BUTTONS
   -------------------------------------------------------------------------- */
.btn-primaer {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.85rem 1.9rem;
  background: var(--farbe-marker); color: var(--farbe-weiss-text);
  border-radius: var(--radius-mittel);
  font-size: 0.95rem; font-weight: 600;
  font-family: var(--schrift-haupt);
  transition: background var(--uebergang), transform 0.15s ease;
  border: none; cursor: pointer;
}
.btn-primaer:hover { background: var(--farbe-marker-dunkel); color: var(--farbe-weiss-text); transform: translateY(-2px); }
.btn-sekundaer {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.8rem 1.65rem;
  border: 1px solid var(--farbe-tinte);
  color: var(--farbe-tinte);
  border-radius: var(--radius-mittel);
  font-size: 0.95rem; font-weight: 600;
  font-family: var(--schrift-haupt);
  transition: background var(--uebergang), color var(--uebergang), transform 0.15s ease;
  cursor: pointer; background: none;
}
.btn-sekundaer:hover { background: var(--farbe-tinte); color: var(--farbe-weiss-text); transform: translateY(-2px); }
.btn-weiss {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.85rem 1.9rem;
  background: var(--farbe-weiss); color: var(--farbe-marker);
  border-radius: var(--radius-mittel);
  font-size: 0.95rem; font-weight: 700;
  transition: background var(--uebergang), color var(--uebergang);
}
.btn-weiss:hover { background: var(--farbe-bg-alt); color: var(--farbe-marker-dunkel); }

/* --------------------------------------------------------------------------
   FOOTER
   WICHTIG: max-width direkt auf .footer-grid — KEIN Container-Wrapper!
   -------------------------------------------------------------------------- */
.site-footer { background: var(--farbe-nacht); color: rgba(255, 255, 255, 0.65); }
.footer-grid {
  max-width: var(--max-breite);
  margin-left: auto; margin-right: auto;
  padding: 3.5rem 2rem 2.5rem;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 2fr;
  gap: 3rem;
}
.footer-col h4 {
  font-family: var(--schrift-mono);
  font-size: 0.76rem; font-weight: 500;
  color: var(--farbe-weiss-text);
  text-transform: uppercase; letter-spacing: 0.1em;
  margin-bottom: 1.25rem; padding-bottom: 0.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}
.footer-col a,
.footer-col p {
  display: block; font-size: 0.875rem; color: rgba(255, 255, 255, 0.55);
  font-weight: 300; line-height: 1.85;
  transition: color var(--uebergang), padding-left var(--uebergang);
}
.footer-col a:hover { color: var(--farbe-marker); padding-left: 0.5rem; }
.footer-col a .fa { margin-right: 0.3rem; font-size: 0.7rem; }
.footer-col:first-child img { height: 2.3rem; width: auto; margin-bottom: 1rem; filter: brightness(10); opacity: 0.9; }
.footer-col:first-child .footer-logo-text {
  display: block;
  font-family: var(--schrift-display);
  font-size: 1rem; font-weight: 700; color: var(--farbe-weiss-text); margin-bottom: 0.75rem;
}
.footer-col:first-child p { padding-left: 0; }
.footer-col:first-child p:hover { padding-left: 0; }
.footer-social { display: flex; gap: 0.75rem; margin-top: 1.25rem; }
.footer-social a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.2rem; height: 2.2rem;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: var(--radius-mittel);
  color: rgba(255, 255, 255, 0.65) !important;
  font-size: 0.88rem;
  transition: background var(--uebergang), color var(--uebergang), border-color var(--uebergang) !important;
  padding-left: 0 !important;
}
.footer-social a:hover { background: var(--farbe-marker); border-color: var(--farbe-marker); color: var(--farbe-weiss-text) !important; padding-left: 0 !important; }
.footer-kontakt-item { display: flex; align-items: flex-start; gap: 0.6rem; margin-bottom: 0.75rem; line-height: 1.5; }
.footer-kontakt-item .fa { color: var(--farbe-marker); margin-top: 0.2rem; flex-shrink: 0; }

.footer-bottom { border-top: 1px solid rgba(255, 255, 255, 0.08); }
.footer-bottom-inner {
  max-width: var(--max-breite);
  margin-left: auto; margin-right: auto;
  padding: 1.5rem 2rem;
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  font-family: var(--schrift-mono);
  font-size: 0.74rem; color: rgba(255, 255, 255, 0.4); flex-wrap: wrap;
}
.footer-bottom-inner p { font-weight: 400; color: rgba(255, 255, 255, 0.4); }
.footer-bottom-inner nav { display: flex; gap: 1.5rem; flex-wrap: wrap; }
.footer-bottom-inner nav a { font-size: 0.74rem; color: rgba(255, 255, 255, 0.4); font-weight: 400; transition: color var(--uebergang); padding-left: 0; }
.footer-bottom-inner nav a:hover { color: var(--farbe-marker); padding-left: 0; }

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

@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; gap: 2rem; } }
@media (max-width: 480px) {
  .footer-grid { grid-template-columns: 1fr; gap: 2rem; padding: 2.5rem 1.5rem; }
  .footer-bottom-inner { flex-direction: column; align-items: flex-start; padding: 1rem 1.5rem; }
}

/* --------------------------------------------------------------------------
   SCROLL-TO-TOP
   -------------------------------------------------------------------------- */
.scroll-top {
  position: fixed; bottom: 2rem; right: 2rem;
  width: 2.9rem; height: 2.9rem;
  border-radius: var(--radius-rund);
  background: var(--farbe-marker); color: var(--farbe-weiss-text);
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem;
  box-shadow: var(--schatten-mittel);
  z-index: 500;
  opacity: 0; transform: translateY(1rem);
  transition: opacity var(--uebergang), transform var(--uebergang), background var(--uebergang);
  cursor: pointer; border: none;
}
.scroll-top.sichtbar { opacity: 1; transform: translateY(0); }
.scroll-top:hover { background: var(--farbe-marker-dunkel); }

/* --------------------------------------------------------------------------
   SCROLL-ANIMATIONEN
   -------------------------------------------------------------------------- */
.scroll-animate { opacity: 0; transform: translateY(20px); transition: opacity 0.5s ease, transform 0.5s ease; }
.scroll-animate.sichtbar { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .scroll-animate { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   GALERIE-SECTION
   Bento-Grid: 1. Bild groß (2×2), restliche Bilder kleiner rechts/unten
   -------------------------------------------------------------------------- */
.galerie { padding: var(--abstand-l, 4rem) 0; }
.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; position: relative; background: var(--farbe-nacht); }
.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; filter: grayscale(0.15); }
.galerie-item:first-child .galerie-bild { min-height: 380px; }
.galerie-overlay {
  position: absolute; inset: 0;
  background: rgba(21, 24, 28, 0);
  display: flex; align-items: center; justify-content: center;
  transition: background var(--uebergang);
}
.galerie-item:hover .galerie-bild { transform: scale(1.05); }
.galerie-item:hover .galerie-overlay { background: rgba(21, 24, 28, 0.3); }
.galerie .section-header { text-align: center; margin-left: auto; margin-right: auto; max-width: 640px; padding: 0 2rem; }
.galerie .section-label,
.galerie .section-tag { justify-content: center; }
@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; }
}

/* --------------------------------------------------------------------------
   TEAM-KACHELN — Karten-Grid für team.html
   -------------------------------------------------------------------------- */
.team-kacheln-section { padding: var(--abstand-l, 5rem) 0; }
.team-kacheln-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.75rem; }
.team-kachel {
  background: var(--farbe-flaeche);
  overflow: hidden;
  border: 1px solid var(--farbe-linie);
  transition: transform 0.28s ease, border-color 0.28s ease;
  display: flex; flex-direction: column;
}
.team-kachel:hover { transform: translateY(-4px); border-color: var(--farbe-marker); }
.team-kachel-bild { position: relative; aspect-ratio: 1 / 1; overflow: hidden; background: var(--farbe-bg-alt); }
.team-kachel-bild img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; display: block; transition: transform 0.45s ease; filter: grayscale(0.15); }
.team-kachel:hover .team-kachel-bild img { transform: scale(1.05); }
.team-kachel-bild-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, transparent 55%, rgba(var(--farbe-nacht-rgb), 0.4) 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-family: var(--schrift-mono);
  font-size: 0.68rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--farbe-marker); margin: 0;
}
.team-kachel-name { font-family: var(--schrift-display); font-size: 1.08rem; font-weight: 700; color: var(--farbe-tinte); margin: 0.1rem 0 0; line-height: 1.3; }
.team-kachel-rolle { font-size: 0.82rem; color: var(--farbe-tinte-soft); margin: 0; }
.team-kachel-beschreibung {
  font-size: 0.82rem; color: var(--farbe-tinte-soft); 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: 768px) { .team-kacheln-grid { grid-template-columns: repeat(2, 1fr); gap: 1.2rem; } }
@media (max-width: 480px) { .team-kacheln-grid { grid-template-columns: 1fr; } }