@charset "UTF-8";
/* ==========================================================================
   DESIGN 23 — "SPRECHSTUNDE"
   --------------------------------------------------------------------------
   Leitidee
   Eine Praxis, die zuerst SPRICHT und zuhört — dann zeigt. Die Seite ist
   als Gespräch gebaut: Der Hero ist ein SATZ, kein Fotobanner. Als einziges
   der 41 Designs beginnt diese Seite nicht mit einem großflächigen Bild —
   der Slider wechselt Aussagen (große Spectral-Serif auf ruhigem Grund),
   das Foto hängt daneben klein und gerahmt wie ein Bild im Wartezimmer.

   Drei Entscheidungen, die dieses Design von den anderen 40 trennen
   1. PASSEPARTOUT-BILDSPRACHE: Jedes Content-Bild bekommt einen weißen
      Passepartout-Rand mit Haarlinie — gerahmte Bilder statt Vollflächen-
      Fotos (bewusster Gegenpol zu Bogenkante D1, Kronen-Ecke D2 und
      Versatz-Platte D7).
   2. GESPRÄCHSMARKEN: Sektionseinstiege sind kursive Serif-Zeilen mit
      Geviertstrich („— Unsere Stärken") statt Uppercase-Label-Chips.
   3. FARBWELT "HIMBEERE & PORZELLANROSÉ": dunkle Pflaume als Tinte,
      kühles Rosé-Weiß als Papier, Himbeere als Akzent (7,2:1 auf Weiß) —
      die einzige warme Beeren-Lane im ganzen System.
   Außerdem: Der Briefkopf-Header ist bewusst NICHT sticky (editoriale
   Ruhe, keine Verdeckungs-Probleme), die Nav läuft rechtsbündig in einer
   eigenen vollen Zeile.

   Typografie: Spectral (Serif Display + Kursive) + Figtree (Text) —
   beide in keinem anderen der 41 Designs verwendet.

   Aufbau dieser Datei
     01 Schriften          10 Gruppenkarten        19 Kontaktseite/Formular
     02 Tokens             11 Parallax-Bänder      20 Anfahrt
     03 Basis & Reset      12 Zitat                21 Verwandte Themen
     04 Bausteine/Buttons  13 FAQ                  22 Sitemap/Sonstiges
     05 Briefkopf-Header   14 Team                 23 Footer (f23-*)
     06 Navigation         15 Bewertungen          24 Farbrhythmus
     07 Brotkrume          16 Highlight/Vorteile   25 Responsive
     08 Satz-Hero/Slider   17 Kontakt-CTA-Zeile    26 Motion & A11y
     09 Abschnitte/Text    18 Willkommen
   ========================================================================== */

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


/* ==========================================================================
   02 TOKENS
   Farbvarianten (farbvariante23_1…5.css) überschreiben NUR diese Variablen.
   Alle Kontraste rechnerisch geprüft (WCAG AA):
     Himbeere #A61E4D auf Weiß 7.2:1, auf Papier 7.0:1, auf Fläche 6.4:1
     Tinte-sanft #6A5262 auf Papier 6.8:1, auf Fläche 6.2:1
     Himbeere-hell #E9B9CB auf Tinte 8.8:1 · Rosé-Weiß #F3E9EE auf Tinte 12.8:1
   ========================================================================== */
:root {
  /* --- Farbwelt ---------------------------------------------------------- */
  --farbe-tinte:          #33202E;   /* dunkle Pflaume: Text, Footer, Bänder */
  --farbe-tinte-sanft:    #6A5262;   /* Fließtext, Sekundärangaben           */
  --farbe-papier:         #FDFCFC;   /* Grundfläche                          */
  --farbe-flaeche:        #F6EFF2;   /* Rosé-graue Wechselfläche             */
  --farbe-akzent:         #A61E4D;   /* Himbeere: Aktionen, Marken, Links    */
  --farbe-akzent-dunkel:  #7E1238;   /* Hover                                */
  --farbe-akzent-hell:    #E9B9CB;   /* Akzent auf dunklem Grund             */
  --farbe-hell-text:      #F3E9EE;   /* Fließtext auf Tinte                  */
  --farbe-linie:          #E5DAE0;   /* Haarlinien, Kartenränder             */
  --farbe-weiss:          #FFFFFF;
  --farbe-stern:          #B07708;   /* Bewertungssterne (dekorativ)         */
  --farbe-erfolg:         #1E6B40;
  --farbe-fehler:         #B3261E;

  /* --- Schrift ------------------------------------------------------------ */
  --schrift-display: 'Spectral', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
  --schrift-text:    'Figtree', 'Segoe UI', system-ui, -apple-system, Helvetica, Arial, sans-serif;

  /* --- Maße --------------------------------------------------------------- */
  --max-breite:   1200px;
  --rand:         clamp(1.25rem, 4vw, 2.5rem);
  --sektion-y:    clamp(3.25rem, 6vw, 5.75rem);

  /* --- Signatur: Passepartout-Rahmung ------------------------------------- */
  --passepartout:        10px;       /* weißer Rahmen um Bilder              */
  --radius-bild:         14px;
  --radius-karte:        12px;
  --radius-pille:        999px;
  --schatten-bild:       0 22px 44px -26px rgba(51, 32, 46, 0.38);
  --schatten-karte:      0 14px 30px -22px rgba(51, 32, 46, 0.28);

  --uebergang: 0.2s ease;

  /* --- Geteilte Komponenten aus global.css umfärben ----------------------- */
  --farbe-accent:        var(--farbe-akzent);
  --farbe-primaer:       var(--farbe-akzent);
  --color-primary:       var(--farbe-akzent);
  --color-primary-dark:  var(--farbe-akzent-dunkel);
  --color-primary-light: var(--farbe-flaeche);
  --color-text:          var(--farbe-tinte);
  --color-text-muted:    var(--farbe-tinte-sanft);
  --farbe-gold:          var(--farbe-akzent);      /* Sitemap-Hover (global.css) */
  --farbe-rahmen-gold:   var(--farbe-linie);
  --farbe-bg-light:      var(--farbe-weiss);
  --farbe-border:        var(--farbe-linie);
  --farbe-muted:         var(--farbe-tinte-sanft);
  --farbe-text:          var(--farbe-tinte);

  /* --- "Wichtigstes auf einen Blick" (.autoren-box, global.css) ----------- */
  --farbe-autorenbox-hintergrund: #FAF4F7;
  --farbe-autorenbox-linie:       var(--farbe-linie);
  --farbe-autorenbox-akzent:      var(--farbe-akzent);
  --farbe-autorenbox-icon:        var(--farbe-akzent);
  --farbe-autorenbox-icon-text:   var(--farbe-weiss);
  --farbe-autorenbox-text:        var(--farbe-tinte-sanft);
  --farbe-autorenbox-text-stark:  var(--farbe-tinte);
}


/* ==========================================================================
   03 BASIS & RESET
   ========================================================================== */
*,
*::before,
*::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--schrift-text);
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--farbe-tinte);
  background: var(--farbe-papier);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--schrift-display);
  font-weight: 500;
  line-height: 1.22;
  color: var(--farbe-tinte);
  margin: 0 0 0.75em;
  overflow-wrap: break-word;
}

h1, h2, h3 { text-wrap: balance; }

h1 { font-size: clamp(2rem, 4.4vw, 3.4rem); }
h2 { font-size: clamp(1.65rem, 3vw, 2.4rem); }
h3 { font-size: clamp(1.2rem, 1.8vw, 1.45rem); }

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

a { color: var(--farbe-akzent); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--farbe-akzent-dunkel); }

img { max-width: 100%; height: auto; display: block; }

main { display: block; }

:focus-visible {
  outline: 3px solid var(--farbe-akzent);
  outline-offset: 2px;
  border-radius: 2px;
}

::selection { background: var(--farbe-akzent); color: var(--farbe-weiss); }


/* ==========================================================================
   04 BAUSTEINE
   ========================================================================== */
.container {
  max-width: var(--max-breite);
  margin-inline: auto;
  padding-inline: var(--rand);
}

/* CMS-Vorlagen liefern teils verschachtelte .container — neutralisieren */
.container .container {
  max-width: none;
  padding: 0;
  margin: 0;
}

/* Skip-Link: unsichtbar geparkt, sichtbar bei Tastaturfokus */
.skip-link {
  position: absolute;
  top: -200px;
  left: 1rem;
  z-index: 300;
  padding: 0.7rem 1.3rem;
  background: var(--farbe-tinte);
  color: var(--farbe-weiss);
  border-radius: var(--radius-pille);
  text-decoration: none;
  font-weight: 600;
}
.skip-link:focus,
.skip-link:focus-visible {
  top: 1rem;
  color: var(--farbe-weiss);
}

/* --- Buttons: Pillen ----------------------------------------------------- */
.btn,
.btn-primaer,
.btn-routenplaner,
.burger-btn,
.slider-pfeil,
.slider-punkt,
.faq-frage {
  touch-action: manipulation;
}

.btn,
.btn-primaer,
.btn-routenplaner {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.78rem 1.7rem;
  border-radius: var(--radius-pille);
  border: 2px solid transparent;
  font-family: var(--schrift-text);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.3;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--uebergang), color var(--uebergang), border-color var(--uebergang);
}

.btn-akzent,
.btn-primaer,
.btn-routenplaner {
  background: var(--farbe-akzent);
  color: var(--farbe-weiss);
}
.btn-akzent:hover,
.btn-primaer:hover,
.btn-routenplaner:hover {
  background: var(--farbe-akzent-dunkel);
  color: var(--farbe-weiss);
}

/* heller Zweitbutton: Umriss-Pille (auf hellem wie dunklem Grund lesbar) */
.btn-hell {
  background: transparent;
  color: var(--farbe-tinte);
  border-color: currentColor;
}
.btn-hell:hover {
  background: var(--farbe-tinte);
  color: var(--farbe-papier);
}

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

.btn--sm { padding: 0.5rem 1.15rem; font-size: 0.92rem; }

/* --- Gesprächsmarke: kursive Serif-Zeile statt Uppercase-Chip ------------- */
.section-label {
  display: block;
  font-family: var(--schrift-display);
  font-style: italic;
  font-weight: 500;
  font-size: 1.15rem;
  letter-spacing: 0.01em;
  color: var(--farbe-akzent);
  margin-bottom: 0.5rem;
}
.section-label::before { content: "\2014\2002"; /* Geviertstrich + Leerraum */ }

.section-label-hell { color: var(--farbe-akzent-hell); }

.section-header {
  max-width: 46rem;
  margin-bottom: clamp(1.75rem, 3.5vw, 2.75rem);
}
.section-header h2 { margin-bottom: 0.45em; }
.section-header p { color: var(--farbe-tinte-sanft); }

/* Zierlinien der Vorlagen: kurzer Himbeer-Strich */
.section-linie,
.textblock-linie,
.anfahrt-a-linie {
  width: 44px;
  height: 3px;
  border: 0;
  border-radius: 2px;
  background: var(--farbe-akzent);
  margin: 0.9rem 0 1.1rem;
}

/* --- Signatur: Passepartout-Rahmung für Content-Bilder -------------------- */
.float-img-rechts,
.float-img-links,
.team-bild img,
.slider-folie > img,
.willkommen-bild img,
.seite-header .header-bg {
  background: var(--farbe-weiss);
  padding: var(--passepartout);
  border: 1px solid var(--farbe-linie);
  border-radius: var(--radius-bild);
  box-shadow: var(--schatten-bild);
}


/* ==========================================================================
   05 BRIEFKOPF-HEADER
   Wortmarke links | Servicezeile rechts oben | Nav rechtsbündig darunter.
   Bewusst NICHT sticky — der Kopf scrollt wie ein Briefkopf mit.
   ========================================================================== */
.site-header {
  background: var(--farbe-papier);
  border-bottom: 1px solid var(--farbe-linie);
}

.h23-briefkopf {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "wortmarke service"
    "nav       nav";
  align-items: center;
  column-gap: 2rem;
  padding-top: 1.4rem;
}

.h23-wortmarke { grid-area: wortmarke; min-width: 0; }

.h23-wortmarke a {
  display: inline-flex;
  align-items: center;
  gap: 0.9rem;
  text-decoration: none;
  color: var(--farbe-tinte);
}

.h23-wortmarke img {
  width: 52px;
  height: 52px;
  object-fit: contain;
  flex-shrink: 0;
}

.h23-firma { display: flex; flex-direction: column; min-width: 0; }

.h23-firma-name {
  font-family: var(--schrift-display);
  font-weight: 600;
  font-size: clamp(1.15rem, 1.7vw, 1.5rem);
  line-height: 1.2;
  color: var(--farbe-tinte);
}

.h23-firma-ort {
  font-size: 0.85rem;
  color: var(--farbe-tinte-sanft);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Servicezeile rechts oben */
.h23-service {
  grid-area: service;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 1.4rem;
  font-size: 0.95rem;
}

.h23-service .fa { color: var(--farbe-akzent); }

.h23-service-zeiten {
  color: var(--farbe-tinte-sanft);
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}

.h23-service-tel {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-weight: 600;
  color: var(--farbe-tinte);
  text-decoration: none;
}
.h23-service-tel:hover { color: var(--farbe-akzent); }

.h23-btn-termin {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 1.3rem;
  border-radius: var(--radius-pille);
  background: var(--farbe-akzent);
  color: var(--farbe-weiss);
  font-weight: 600;
  text-decoration: none;
  transition: background-color var(--uebergang);
}
.h23-btn-termin:hover { background: var(--farbe-akzent-dunkel); color: var(--farbe-weiss); }


/* ==========================================================================
   06 NAVIGATION — rechtsbündige Zeile unter dem Briefkopf
   Nur EIN nav-Element; responsive Umschaltung rein per Media Query.
   ========================================================================== */
.site-nav { grid-area: nav; }

.site-nav > ul {
  list-style: none;
  margin: 0;
  padding: 0.55rem 0 0;
  display: flex;
  justify-content: flex-end;
  flex-wrap: nowrap;
  gap: clamp(0.3rem, 1vw, 0.9rem);
}

.site-nav > ul > li { position: relative; }

.site-nav > ul > li > a {
  display: inline-block;
  padding: 0.55rem 0.35rem 0.8rem;
  font-size: 0.98rem;
  font-weight: 500;
  color: var(--farbe-tinte);
  text-decoration: none;
  white-space: nowrap;
  border-bottom: 3px solid transparent;
  transition: color var(--uebergang), border-color var(--uebergang);
}

.site-nav > ul > li > a:hover,
.site-nav > ul > li.offen > a {
  color: var(--farbe-akzent);
  border-bottom-color: var(--farbe-akzent);
}

/* Dropdowns */
.site-nav li.has-dropdown > ul,
.site-nav li.hat-dropdown > ul {
  list-style: none;
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 120;
  min-width: 240px;
  margin: 0;
  padding: 0.6rem 0;
  background: var(--farbe-weiss);
  border: 1px solid var(--farbe-linie);
  border-radius: var(--radius-karte);
  box-shadow: var(--schatten-karte);
  display: none;
}

.site-nav li.has-dropdown.offen > ul,
.site-nav li.hat-dropdown.offen > ul,
.site-nav li.has-dropdown:hover > ul,
.site-nav li.hat-dropdown:hover > ul,
.site-nav li.has-dropdown:focus-within > ul,
.site-nav li.hat-dropdown:focus-within > ul {
  display: block;
}

.site-nav li li a {
  display: block;
  padding: 0.5rem 1.25rem;
  font-size: 0.95rem;
  color: var(--farbe-tinte);
  text-decoration: none;
}
.site-nav li li a:hover {
  background: var(--farbe-flaeche);
  color: var(--farbe-akzent);
}

/* Mobile-only-Einträge auf Desktop verbergen */
.mobile-only { display: none; }

/* Burger nur mobil */
.burger-btn { display: none; }

.mobile-overlay {
  position: fixed;
  inset: 0;
  z-index: 180;
  background: rgba(51, 32, 46, 0.55);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--uebergang);
}
.mobile-overlay.offen { opacity: 1; pointer-events: auto; }


/* ==========================================================================
   07 BROTKRUME
   ========================================================================== */
.breadcrumb {
  padding: 0.9rem 0 0.4rem;
  font-size: 0.88rem;
}

.breadcrumb ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem;
}

.breadcrumb li { display: inline-flex; align-items: center; }

.breadcrumb li + li::before {
  content: "/";
  margin: 0 0.5rem;
  color: var(--farbe-linie);
}

.breadcrumb a {
  color: var(--farbe-tinte-sanft);
  text-decoration: none;
}
.breadcrumb a:hover { color: var(--farbe-akzent); text-decoration: underline; }

.breadcrumb li:last-child a { color: var(--farbe-tinte); }


/* ==========================================================================
   08 SATZ-HERO / SLIDER
   Die Seite beginnt mit einem Satz. Text links (7/12), Bild rechts (5/12)
   als gerahmtes Passepartout-Objekt. Folien liegen als Grid-Stapel
   übereinander und überblenden weich; die Höhe bleibt dadurch stabil.
   ========================================================================== */
.slider-bereich {
  background: var(--farbe-papier);
  padding: clamp(2rem, 4.5vw, 3.75rem) 0 clamp(2.25rem, 4.5vw, 3.5rem);
}

.slider-container {
  position: relative;
  display: grid;
  max-width: var(--max-breite);
  margin-inline: auto;
  padding-inline: var(--rand);
  /* Platz für die Bedienzeile (Pfeile + Punkte) unterhalb der Folien */
  padding-bottom: 3.4rem;
}

.slider-folie {
  grid-area: 1 / 1;
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  align-items: center;
  gap: clamp(2rem, 4vw, 4rem);
  opacity: 0;
  visibility: hidden;
  transition: none; /* ausblendende Folie verschwindet sofort … */
}

.slider-folie.aktiv {
  opacity: 1;
  visibility: visible;
  z-index: 2;
  transition: opacity 0.55s ease; /* … die neue blendet weich ein */
}

.slider-folie > img {
  order: 2;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  max-height: 440px;
}

.slider-inhalt { order: 1; min-width: 0; }

.slider-label {
  display: block;
  font-family: var(--schrift-display);
  font-style: italic;
  font-weight: 500;
  font-size: 1.2rem;
  color: var(--farbe-akzent);
  margin-bottom: 0.9rem;
}
.slider-label::before { content: "\2014\2002"; }

.slider-inhalt h1,
.slider-inhalt h2 {
  font-size: clamp(2.1rem, 4.3vw, 3.5rem);
  font-weight: 500;
  line-height: 1.14;
  letter-spacing: -0.01em;
  margin-bottom: 0.45em;
}

.slider-inhalt p {
  font-size: 1.15rem;
  color: var(--farbe-tinte-sanft);
  max-width: 34rem;
  margin-bottom: 1.6em;
}

.slider-aktionen {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
}

/* Bedienzeile: Pfeile + Punkte unten links */
.slider-pfeil {
  position: absolute;
  bottom: 0;
  z-index: 5;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1.5px solid var(--farbe-tinte);
  background: transparent;
  color: var(--farbe-tinte);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 0 4px;
  transition: background-color var(--uebergang), color var(--uebergang), border-color var(--uebergang);
}
.slider-pfeil:hover {
  background: var(--farbe-tinte);
  color: var(--farbe-papier);
}

.slider-pfeil-links  { left: var(--rand); }
.slider-pfeil-rechts { left: calc(var(--rand) + 56px); }

.slider-punkte {
  position: absolute;
  bottom: 14px;
  left: calc(var(--rand) + 124px);
  z-index: 5;
  display: flex;
  gap: 0.6rem;
}

.slider-punkt {
  width: 11px;
  height: 11px;
  padding: 0;
  border-radius: 50%;
  border: 1.5px solid var(--farbe-tinte-sanft);
  background: transparent;
  cursor: pointer;
  transition: background-color var(--uebergang), border-color var(--uebergang);
}
.slider-punkt.aktiv {
  background: var(--farbe-akzent);
  border-color: var(--farbe-akzent);
}

/* --- Seitenkopf der Unterseiten: gleiche Logik wie der Satz-Hero ----------
   Markup: .seite-header > img.header-bg + .container(h1, p)
   Bild und Container stapeln in derselben Grid-Zelle; das Bild wird als
   gerahmtes Objekt rechts platziert, der Text bleibt links davon. */
.seite-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  background: var(--farbe-papier);
  padding: clamp(2rem, 4.5vw, 3.5rem) 0;
}

.seite-header > .header-bg,
.seite-header > .container {
  grid-area: 1 / 1;
}

.seite-header > .header-bg {
  justify-self: end;
  align-self: center;
  width: min(38%, 440px);
  aspect-ratio: 4 / 3;
  object-fit: cover;
  margin-right: max(var(--rand), calc((100% - var(--max-breite)) / 2 + var(--rand)));
}

.seite-header > .container {
  width: 100%;
}

.seite-header h1 {
  max-width: 55%;
  font-size: clamp(1.9rem, 3.6vw, 2.9rem);
  line-height: 1.16;
}

.seite-header .container > p {
  max-width: 52%;
  font-size: 1.12rem;
  color: var(--farbe-tinte-sanft);
}


/* ==========================================================================
   09 ABSCHNITTE & TEXT
   ========================================================================== */
main > section { padding: var(--sektion-y) 0; }

.textblock-inhalt { max-width: 50rem; }
.textblock-inhalt p { color: var(--farbe-tinte-sanft); }
.textblock-inhalt h2 + .textblock-linie { margin-top: -0.2rem; }

.textblock-zweispaltig .textblock-spalten {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 4vw, 3.5rem);
}
.textblock-spalte p { color: var(--farbe-tinte-sanft); }

/* Bild fließend im Text (Passepartout siehe 04) */
.float-section .container { max-width: min(var(--max-breite), 62rem); }
.float-section p { color: var(--farbe-tinte-sanft); }

.float-img-rechts {
  float: right;
  width: min(46%, 430px);
  margin: 0 0 1.5rem 2.25rem;
}

.float-img-links {
  float: left;
  width: min(46%, 430px);
  margin: 0 2.25rem 1.5rem 0;
}

.float-section .container::after {
  content: "";
  display: block;
  clear: both;
}


/* ==========================================================================
   10 GRUPPENKARTEN
   ========================================================================== */
.gruppen-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.25rem, 2.5vw, 2rem);
}

.gruppe-karte {
  display: flex;
  flex-direction: column;
  background: var(--farbe-weiss);
  border: 1px solid var(--farbe-linie);
  border-radius: var(--radius-karte);
  overflow: hidden;
  transition: box-shadow var(--uebergang), transform var(--uebergang);
}
.gruppe-karte:hover {
  box-shadow: var(--schatten-karte);
  transform: translateY(-3px);
}

.gruppe-bild {
  position: relative;
  /* Passepartout innerhalb der Karte */
  padding: var(--passepartout) var(--passepartout) 0;
  background: var(--farbe-weiss);
}

.gruppe-bild img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: calc(var(--radius-karte) - 4px);
}

.gruppe-bild-icon {
  position: absolute;
  right: calc(var(--passepartout) + 12px);
  bottom: -18px;
  z-index: 2;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--farbe-akzent);
  color: var(--farbe-weiss);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.05rem;
  box-shadow: var(--schatten-karte);
}

.gruppe-inhalt {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 1.75rem 1.5rem 1.5rem;
}

.gruppe-inhalt h3 { margin-bottom: 0.5rem; }

.gruppe-inhalt p {
  color: var(--farbe-tinte-sanft);
  font-size: 0.98rem;
  margin-bottom: 1.25rem;
}

.gruppe-mehr {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
  font-size: 0.98rem;
  color: var(--farbe-akzent);
  text-decoration: none;
}
.gruppe-mehr:hover { color: var(--farbe-akzent-dunkel); text-decoration: underline; }
.gruppe-mehr .fa { transition: transform var(--uebergang); }
.gruppe-mehr:hover .fa { transform: translateX(4px); }


/* ==========================================================================
   11 PARALLAX-BÄNDER
   Alle drei Parallax-Typen: cover + center + fixed, Helper-Bild versteckt,
   Pflaumen-Lasur als Overlay. Mobile: attachment scroll (siehe 25).
   ========================================================================== */
.praxis-section,
.reine-parallax-section,
.cta-parallax-section {
  position: relative;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}

.parallax-helper-img { display: none; }

/* Lasur */
.praxis-section::before,
.cta-parallax-overlay,
.reine-parallax-overlay {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, rgba(51, 32, 46, 0.92) 0%, rgba(51, 32, 46, 0.8) 55%, rgba(126, 18, 56, 0.62) 100%);
}

.reine-parallax-overlay { background: rgba(51, 32, 46, 0.28); }

.reine-parallax-section {
  min-height: clamp(260px, 38vw, 420px);
  padding: 0;
}

/* Praxis-Fakten-Band */
.praxis-section { color: var(--farbe-hell-text); }
.praxis-section .container { position: relative; z-index: 2; }

.praxis-inhalt { max-width: 44rem; }

.praxis-inhalt h2 { color: var(--farbe-weiss); }
.praxis-inhalt > p { color: var(--farbe-hell-text); margin-bottom: 1.5em; }

.praxis-section .btn-hell,
.cta-parallax-section .btn-hell {
  color: var(--farbe-weiss);
  border-color: var(--farbe-weiss);
}
.praxis-section .btn-hell:hover,
.cta-parallax-section .btn-hell:hover {
  background: var(--farbe-weiss);
  color: var(--farbe-tinte);
}

.praxis-fakten {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  margin-top: 2.75rem;
}

.praxis-fakt-zahl {
  font-family: var(--schrift-display);
  font-weight: 600;
  font-size: clamp(2rem, 3.4vw, 2.9rem);
  line-height: 1.1;
  color: var(--farbe-akzent-hell);
}

.praxis-fakt-text {
  font-size: 0.95rem;
  color: var(--farbe-hell-text);
  margin-top: 0.35rem;
}

/* CTA-Parallax-Band */
.cta-parallax-section { color: var(--farbe-hell-text); }

.cta-parallax-inhalt {
  position: relative;
  z-index: 2;
  max-width: 46rem;
}

.cta-parallax-inhalt h2 { color: var(--farbe-weiss); }
.cta-parallax-inhalt p { color: var(--farbe-hell-text); }

.cta-aktionen {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  margin-top: 1.6rem;
}


/* ==========================================================================
   12 ZITAT
   Standard-Variante: ruhige Rosé-Fläche. Akzent-Variante (ohne --standard):
   Pflaume mit heller Schrift. Große Spectral-Kursive, riesige Anführung.
   ========================================================================== */
.natur-zitat-section {
  background: var(--farbe-tinte);
  color: var(--farbe-hell-text);
}

.natur-zitat-section--standard {
  background: var(--farbe-flaeche);
  color: var(--farbe-tinte);
}

.zitat-inhalt {
  position: relative;
  max-width: 50rem;
  margin-inline: auto;
  text-align: center;
  padding-top: 1.6rem;
}

.zitat-anfuehrung {
  position: absolute;
  top: -1.4rem;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--schrift-display);
  font-size: 6rem;
  line-height: 1;
  color: var(--farbe-akzent);
  opacity: 0.45;
  pointer-events: none;
}
.natur-zitat-section:not(.natur-zitat-section--standard) .zitat-anfuehrung {
  color: var(--farbe-akzent-hell);
}

.zitat-text {
  font-family: var(--schrift-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.35rem, 2.4vw, 1.85rem);
  line-height: 1.45;
  margin-bottom: 1.1em;
}

.zitat-quelle {
  font-family: var(--schrift-text);
  font-size: 0.98rem;
  font-weight: 600;
  color: var(--farbe-akzent);
}
.natur-zitat-section:not(.natur-zitat-section--standard) .zitat-quelle {
  color: var(--farbe-akzent-hell);
}


/* ==========================================================================
   13 FAQ — Haarlinien-Liste
   ========================================================================== */
.faq-item {
  border-bottom: 1px solid var(--farbe-linie);
}
.faq-item:first-of-type { border-top: 1px solid var(--farbe-linie); }

.faq-frage {
  position: relative;
  padding: 1.15rem 3rem 1.15rem 0;
  font-family: var(--schrift-display);
  font-weight: 600;
  font-size: 1.12rem;
  color: var(--farbe-tinte);
  cursor: pointer;
  transition: color var(--uebergang);
}
.faq-frage:hover { color: var(--farbe-akzent); }
.faq-item.offen .faq-frage { color: var(--farbe-akzent); }

.faq-frage::after {
  content: "+";
  position: absolute;
  right: 0.4rem;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--schrift-text);
  font-weight: 400;
  font-size: 1.7rem;
  line-height: 1;
  color: var(--farbe-akzent);
  transition: transform var(--uebergang);
}
.faq-item.offen .faq-frage::after {
  transform: translateY(-50%) rotate(45deg);
}

.faq-antwort {
  max-height: 0;
  overflow: hidden;
  color: var(--farbe-tinte-sanft);
  padding-right: 3rem;
  transition: max-height 0.35s ease;
}


/* ==========================================================================
   14 TEAM — feste 2 Spalten (Konvention: genau 2 Behandler-Karten)
   ========================================================================== */
.team-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(1.5rem, 3vw, 2.5rem);
}

.team-foto-karte {
  background: var(--farbe-weiss);
  border: 1px solid var(--farbe-linie);
  border-radius: var(--radius-karte);
  padding: 1.75rem;
}

.team-bild { margin-bottom: 1.5rem; }
.team-bild a { display: block; }
.team-bild img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

.team-name {
  font-size: 1.4rem;
  margin-bottom: 0.2rem;
}

.team-titel {
  color: var(--farbe-akzent);
  font-weight: 600;
  font-size: 0.95rem;
  margin-bottom: 0.4rem;
}
.team-titel:empty { display: none; }

.team-info > p { color: var(--farbe-tinte-sanft); }

.team-vita {
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--farbe-linie);
  font-size: 0.96rem;
  color: var(--farbe-tinte-sanft);
}
.team-vita strong { color: var(--farbe-tinte); }
.team-vita ul { margin: 0.3rem 0 1rem; padding-left: 1.2rem; }


/* ==========================================================================
   15 BEWERTUNGEN
   ========================================================================== */
.bewertung-sterne { color: var(--farbe-stern); letter-spacing: 2px; }

.bewertungen-summary {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  background: var(--farbe-weiss);
  border: 1px solid var(--farbe-linie);
  border-radius: var(--radius-karte);
  padding: 1.75rem 2rem;
  max-width: 30rem;
}

.bewertungen-summary-zahl {
  font-family: var(--schrift-display);
  font-weight: 600;
  font-size: 3rem;
  line-height: 1;
  color: var(--farbe-akzent);
}

.bewertungen-summary-details p {
  margin: 0.25rem 0 0;
  color: var(--farbe-tinte-sanft);
  font-size: 0.95rem;
}

.bewertungen-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(1.25rem, 2.5vw, 2rem);
}

.bewertung-karte {
  background: var(--farbe-weiss);
  border: 1px solid var(--farbe-linie);
  border-radius: var(--radius-karte);
  padding: 1.75rem;
  display: flex;
  flex-direction: column;
}

.bewertung-kopf {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
}

.bewertung-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--farbe-flaeche);
  color: var(--farbe-akzent);
  font-family: var(--schrift-display);
  font-weight: 600;
  font-size: 1.3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.bewertung-name { font-weight: 600; color: var(--farbe-tinte); }

.bewertung-text {
  color: var(--farbe-tinte-sanft);
  flex: 1;
}

.bewertung-fuss {
  margin-top: 1rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--farbe-linie);
}

.bewertung-datum { font-size: 0.88rem; color: var(--farbe-tinte-sanft); }

/* Karussell (Basis-Styles in global.css) — Farbabstimmung.
   Fund 2026-08-30: global.css gibt dem Karussell selbst kein Padding (nur max-width/margin),
   wir machen daraus aber eine Karte mit Hintergrund+Rand - ohne eigenes Padding sass der
   Inhalt (Zitat-Icon, Text, Punkte) direkt an der Kartenkante. */
.bewertungen-karussell {
  background: var(--farbe-weiss);
  border: 1px solid var(--farbe-linie);
  border-radius: var(--radius-karte);
  padding: 2.5rem 2rem;
}

.bewertungen-karussell-quote { color: var(--farbe-akzent); }
.bewertungen-karussell-text {
  font-family: var(--schrift-display);
  font-style: italic;
  color: var(--farbe-tinte);
}
.bewertungen-karussell-name { color: var(--farbe-tinte-sanft); }

.bewertungen-karussell-dot {
  background: var(--farbe-linie);
  border: 0;
}
.bewertungen-karussell-dot.aktiv,
.bewertungen-karussell-dot[aria-current="true"] {
  background: var(--farbe-akzent);
}


/* ==========================================================================
   16 HIGHLIGHT / VORTEILE — dunkles Pflaumen-Band, Panels mit Haarlinien
   ========================================================================== */
.highlight-section {
  background: var(--farbe-tinte);
  color: var(--farbe-hell-text);
}

.highlight-section .section-header h2 { color: var(--farbe-weiss); }
.highlight-section .section-header p { color: var(--farbe-hell-text); }
.highlight-section .section-linie { background: var(--farbe-akzent-hell); }

.vorteile-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
}

.vorteil-item {
  padding: 0.5rem 1.75rem 0.5rem 1.5rem;
  border-left: 1px solid rgba(243, 233, 238, 0.22);
}
.vorteil-item:first-child { border-left: 0; padding-left: 0; }

.vorteil-icon {
  font-size: 1.5rem;
  color: var(--farbe-akzent-hell);
  margin-bottom: 0.9rem;
}

.vorteil-item h3 {
  color: var(--farbe-weiss);
  font-size: 1.18rem;
  margin-bottom: 0.4rem;
}

.vorteil-item p {
  color: var(--farbe-hell-text);
  font-size: 0.95rem;
  margin: 0;
}


/* ==========================================================================
   17 KONTAKT-CTA-ZEILE — leise Zeile direkt unter Hero/Seitenkopf
   ========================================================================== */
.kontakt-cta-section {
  padding: 0;
  border-top: 1px solid var(--farbe-linie);
  border-bottom: 1px solid var(--farbe-linie);
  background: var(--farbe-papier);
}

.kontakt-cta-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.kontakt-cta-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.3rem 1.5rem;
  border-left: 1px solid var(--farbe-linie);
}
.kontakt-cta-item:first-child { border-left: 0; padding-left: 0; }

.kontakt-cta-icon {
  font-size: 1.25rem;
  color: var(--farbe-akzent);
  flex-shrink: 0;
}

.kontakt-cta-text { min-width: 0; }

.kontakt-cta-text strong {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--farbe-tinte-sanft);
}

.kontakt-cta-text a {
  font-weight: 600;
  color: var(--farbe-tinte);
  text-decoration: none;
  overflow-wrap: anywhere;
}
.kontakt-cta-text a:hover { color: var(--farbe-akzent); }


/* ==========================================================================
   18 WILLKOMMEN — gerahmtes Bild links, Gesprächseinstieg rechts
   Markup (CMS-Vorlage vorlage_willkommen.htm):
     .willkommen-grid > .willkommen-bild (img + .willkommen-badge)
                      + .willkommen-inhalt (section-label, section-linie, h2,
                        p…, optional .willkommen-stats, .btn)
   Spaltenverhältnis 5/7 — bewusst spiegelbildlich zum Satz-Hero (7/5), damit
   Hero und Willkommensblock nicht wie dieselbe Zeile wirken.
   Das Bild trägt den Passepartout-Rahmen aus Abschnitt 04, die Kennzahl ist
   ein Museums-Etikett am unteren Rahmenrand.
   Fläche + Sektionspolster kommen aus `main > section` (09) und dem
   Flächenrhythmus (24) — hier deshalb KEIN background/padding setzen.
   ========================================================================== */
.willkommen-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  align-items: center;
  gap: clamp(2rem, 4vw, 4rem);
}

/* --- Bildseite: gerahmtes Objekt mit Etikett ----------------------------- */
.willkommen-bild {
  position: relative;
  min-width: 0;
  /* Platz, in den das Etikett am unteren Rahmenrand hineinragt */
  padding-bottom: 1.6rem;
}

.willkommen-bild img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  /* Passepartout-Rahmung: siehe 04 */
}

.willkommen-badge {
  position: absolute;
  bottom: 0;
  left: 1.5rem;
  max-width: calc(100% - 3rem);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.15rem 0.5rem;
  padding: 0.6rem 1.15rem;
  background: var(--farbe-weiss);
  border: 1px solid var(--farbe-linie);
  border-left: 3px solid var(--farbe-akzent);
  border-radius: var(--radius-karte);
  box-shadow: var(--schatten-karte);
}

.willkommen-badge strong {
  font-family: var(--schrift-display);
  font-weight: 500;
  font-size: 1.25rem;
  line-height: 1.15;
  color: var(--farbe-akzent);
}

.willkommen-badge span {
  font-size: 0.9rem;
  line-height: 1.35;
  color: var(--farbe-tinte-sanft);
  overflow-wrap: break-word;
}

/* --- Textseite ----------------------------------------------------------- */
.willkommen-inhalt { min-width: 0; }
.willkommen-inhalt h2 { margin-bottom: 0.45em; }
.willkommen-inhalt p { color: var(--farbe-tinte-sanft); }

/* Kennzahlen: Haarlinien-Panels wie die Stärken-Zeile (16) — optional,
   auf Unterseiten fehlt der Block ganz. */
.willkommen-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  margin-top: 1.9rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--farbe-linie);
}

.willkommen-stats .stat-item {
  min-width: 0;
  padding-inline: 1.25rem;
  border-left: 1px solid var(--farbe-linie);
}
.willkommen-stats .stat-item:first-child { border-left: 0; padding-left: 0; }

.willkommen-stats .stat-item strong {
  display: block;
  font-family: var(--schrift-display);
  font-weight: 500;
  font-size: clamp(1.45rem, 2.4vw, 1.9rem);
  line-height: 1.1;
  color: var(--farbe-akzent);
  margin-bottom: 0.2rem;
  overflow-wrap: break-word;
}

.willkommen-stats .stat-item span {
  display: block;
  font-size: 0.92rem;
  line-height: 1.4;
  color: var(--farbe-tinte-sanft);
  overflow-wrap: break-word;
  hyphens: auto;
}

/* Abstand hängt AM Button, nicht am Kennzahlen-Block: ohne .willkommen-stats
   (Unterseiten) bliebe der Button sonst am Fließtext kleben. */
.willkommen-inhalt > .btn,
.willkommen-inhalt > .btn-primaer { margin-top: 1.9rem; }


/* ==========================================================================
   19 KONTAKTSEITE / FORMULAR
   ========================================================================== */
.kontakt-layout {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(2rem, 4vw, 4rem);
  align-items: start;
}

.kontakt-info h2 { margin-bottom: 1.25rem; }

.kontakt-info-item {
  display: flex;
  gap: 1rem;
  margin-bottom: 1.25rem;
}

.kontakt-info-icon {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--farbe-flaeche);
  color: var(--farbe-akzent);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.kontakt-info-text strong { display: block; color: var(--farbe-tinte); }
.kontakt-info-text { color: var(--farbe-tinte-sanft); }
.kontakt-info-text a { color: var(--farbe-akzent); }

.kontakt-form {
  background: var(--farbe-weiss);
  border: 1px solid var(--farbe-linie);
  border-radius: var(--radius-karte);
  padding: clamp(1.5rem, 3vw, 2.5rem);
}

.kontakt-form h2 { font-size: 1.6rem; }

.form-gruppe { margin-bottom: 1.15rem; }

.form-gruppe label {
  display: block;
  font-weight: 600;
  font-size: 0.95rem;
  margin-bottom: 0.35rem;
  color: var(--farbe-tinte);
}

.form-gruppe input,
.form-gruppe select,
.form-gruppe textarea {
  width: 100%;
  padding: 0.7rem 0.9rem;
  font-family: var(--schrift-text);
  font-size: 1rem;
  color: var(--farbe-tinte);
  background: var(--farbe-papier);
  border: 1px solid var(--farbe-linie);
  border-radius: 8px;
  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-akzent);
  box-shadow: 0 0 0 3px rgba(166, 30, 77, 0.18);
}

.form-gruppe textarea { min-height: 140px; resize: vertical; }

.form-datenschutz {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  font-size: 0.92rem;
  color: var(--farbe-tinte-sanft);
  margin-bottom: 1.25rem;
}
.form-datenschutz input {
  width: auto;
  margin-top: 0.3rem;
  accent-color: var(--farbe-akzent);
}


/* ==========================================================================
   20 ANFAHRT
   ========================================================================== */
.anfahrt-a-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: start;
}

.anfahrt-a-kontakt-liste {
  list-style: none;
  margin: 1.5rem 0;
  padding: 0;
}

.anfahrt-a-kontakt-liste li {
  display: flex;
  gap: 1rem;
  margin-bottom: 1.15rem;
  color: var(--farbe-tinte-sanft);
}
.anfahrt-a-kontakt-liste strong { color: var(--farbe-tinte); }

.anfahrt-a-kontakt-liste .ico {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--farbe-flaeche);
  color: var(--farbe-akzent);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

#map-zzam,
.anfahrt-a iframe {
  width: 100%;
  min-height: 420px;
  border: 1px solid var(--farbe-linie);
  border-radius: var(--radius-bild);
  background: var(--farbe-weiss);
  padding: var(--passepartout);
}


/* ==========================================================================
   21 VERWANDTE THEMEN
   ========================================================================== */
.verwandte-themen-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}

.verwandte-themen-karte {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem 1.4rem;
  background: var(--farbe-weiss);
  border: 1px solid var(--farbe-linie);
  border-radius: var(--radius-karte);
  text-decoration: none;
  color: var(--farbe-tinte);
  transition: border-color var(--uebergang), box-shadow var(--uebergang);
}
.verwandte-themen-karte:hover {
  border-color: var(--farbe-akzent);
  box-shadow: var(--schatten-karte);
  color: var(--farbe-akzent);
}

.verwandte-themen-titel {
  font-family: var(--schrift-display);
  font-weight: 600;
  font-size: 1.08rem;
}

.verwandte-themen-karte .fa { color: var(--farbe-akzent); }


/* ==========================================================================
   22 SITEMAP & SONSTIGES
   ========================================================================== */
.sitemap ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.sitemap > ul > li {
  margin-bottom: 1.5rem;
}

.sitemap > ul > li > a {
  font-family: var(--schrift-display);
  font-weight: 600;
  font-size: 1.2rem;
  color: var(--farbe-tinte);
  text-decoration: none;
}
.sitemap > ul > li > a:hover { color: var(--farbe-akzent); }

.sitemap ul ul {
  margin-top: 0.5rem;
  padding-left: 1.4rem;
  border-left: 2px solid var(--farbe-linie);
}

.sitemap ul ul li { margin-bottom: 0.35rem; }

.sitemap ul ul a {
  color: var(--farbe-tinte-sanft);
  text-decoration: none;
}
.sitemap ul ul a:hover { color: var(--farbe-akzent); text-decoration: underline; }

.info-kaestchen {
  background: var(--farbe-flaeche);
  border-radius: var(--radius-karte);
  padding: 1rem 1.25rem;
}

.oeffnungszeiten-tabelle {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.96rem;
  font-variant-numeric: tabular-nums;
}

.oeffnungszeiten-tabelle td {
  padding: 0.3rem 0;
  border-bottom: 1px dashed var(--farbe-linie);
}
.oeffnungszeiten-tabelle tr:last-child td { border-bottom: 0; }
.oeffnungszeiten-tabelle td:first-child { font-weight: 600; width: 4rem; }


/* ==========================================================================
   23 FOOTER "ABSPANN" (f23-*)
   Beginnt mit einem großen Serif-Satz + Telefon/Termin, darunter schlanke
   Spalten, unten dunklere Fußzeile.
   ========================================================================== */
.f23-footer {
  background: var(--farbe-tinte);
  color: var(--farbe-hell-text);
  margin-top: var(--sektion-y);
}

.f23-abspann {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  align-items: center;
  gap: 2.5rem;
  padding: clamp(2.75rem, 5vw, 4.25rem) 0 clamp(2rem, 4vw, 3rem);
}

.f23-abspann-satz {
  font-family: var(--schrift-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  line-height: 1.3;
  color: var(--farbe-weiss);
  margin: 0;
}
.f23-abspann-satz::before {
  content: "\2014\2002";
  color: var(--farbe-akzent-hell);
}

.f23-abspann-aktionen {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.9rem;
  justify-self: end;
}

.f23-abspann-tel {
  font-family: var(--schrift-display);
  font-weight: 600;
  font-size: clamp(1.5rem, 2.6vw, 2.1rem);
  color: var(--farbe-weiss);
  text-decoration: none;
  white-space: nowrap;
}
.f23-abspann-tel:hover { color: var(--farbe-akzent-hell); }

.f23-btn-termin {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.75rem 1.7rem;
  border-radius: var(--radius-pille);
  background: var(--farbe-akzent);
  color: var(--farbe-weiss);
  font-weight: 600;
  text-decoration: none;
  transition: background-color var(--uebergang);
}
.f23-btn-termin:hover { background: var(--farbe-akzent-dunkel); color: var(--farbe-weiss); }

.f23-trennlinie {
  border: 0;
  height: 1px;
  margin: 0;
  background: rgba(243, 233, 238, 0.2);
}

.f23-spalten {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.1fr;
  gap: clamp(1.75rem, 3.5vw, 3rem);
  padding: clamp(2.25rem, 4vw, 3.25rem) 0;
}

.f23-wortmarke {
  font-family: var(--schrift-display);
  font-weight: 600;
  font-size: 1.3rem;
  color: var(--farbe-weiss);
  margin: 0 0 0.3rem;
}

.f23-praxis-zeile {
  color: var(--farbe-akzent-hell);
  font-size: 0.95rem;
  margin: 0 0 1rem;
}

.f23-adresse {
  font-style: normal;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  font-size: 0.98rem;
}
.f23-adresse a { color: var(--farbe-hell-text); text-decoration: none; }
.f23-adresse a:hover { color: var(--farbe-weiss); text-decoration: underline; }

.f23-social {
  display: flex;
  gap: 0.7rem;
  margin-top: 1.25rem;
}

.f23-social a {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(243, 233, 238, 0.35);
  color: var(--farbe-hell-text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: background-color var(--uebergang), color var(--uebergang), border-color var(--uebergang);
}
.f23-social a:hover {
  background: var(--farbe-akzent);
  border-color: var(--farbe-akzent);
  color: var(--farbe-weiss);
}

.f23-spalte-label {
  font-family: var(--schrift-display);
  font-style: italic;
  font-weight: 500;
  font-size: 1.1rem;
  color: var(--farbe-akzent-hell);
  margin: 0 0 0.9rem;
}
.f23-spalte-label::before { content: "\2014\2002"; }

.f23-linkliste {
  list-style: none;
  margin: 0;
  padding: 0;
}

.f23-linkliste li { margin-bottom: 0.45rem; }

.f23-linkliste a {
  color: var(--farbe-hell-text);
  text-decoration: none;
  font-size: 0.98rem;
}
.f23-linkliste a:hover { color: var(--farbe-weiss); text-decoration: underline; }

/* Öffnungszeiten-Tabelle im Footer umfärben */
.f23-spalte .info-kaestchen {
  background: rgba(243, 233, 238, 0.08);
  padding: 0.9rem 1.1rem;
}
.f23-spalte .oeffnungszeiten-tabelle td {
  color: var(--farbe-hell-text);
  border-bottom-color: rgba(243, 233, 238, 0.18);
}

.f23-hinweis {
  font-size: 0.92rem;
  color: var(--farbe-hell-text);
  margin: 1rem 0 0;
}
.f23-hinweis a { color: var(--farbe-akzent-hell); }

/* Fußzeile */
.f23-fusszeile {
  background: rgba(0, 0, 0, 0.25);
  padding: 1.1rem 0;
  font-size: 0.9rem;
}

.f23-fusszeile-inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem 1.5rem;
}

.f23-fusszeile a { color: var(--farbe-hell-text); text-decoration: none; }
.f23-fusszeile a:hover { color: var(--farbe-weiss); text-decoration: underline; }

.f23-fussnav { margin-top: 0.4rem; }
.f23-fussnav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.25rem;
}


/* ==========================================================================
   24 FARBRHYTHMUS — main23.js vergibt .js-bg-a / .js-bg-b
   Fallback ohne JS: alle freien Sections auf Papier (ruhig, nie falsch).
   ========================================================================== */
.js-bg-a { background: var(--farbe-papier); }
.js-bg-b { background: var(--farbe-flaeche); }

/* Karten auf Rosé-Fläche: Weiß bleibt Weiß — ausreichender Eigenkontrast */


/* ==========================================================================
   25 RESPONSIVE
   ========================================================================== */
@media (max-width: 1300px) {
  .site-nav > ul > li > a { font-size: 0.92rem; }
  .h23-service { gap: 1rem; }
}

@media (max-width: 1120px) {
  .site-nav > ul > li > a { font-size: 0.88rem; padding-inline: 0.25rem; }
  .h23-service-zeiten { display: none; }
}

/* ------------------------- Mobil & Tablet ------------------------------- */
@media (max-width: 1024px) {

  /* Header: Wortmarke + Burger in einer Zeile */
  .h23-briefkopf {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "wortmarke burger";
    padding-block: 0.9rem;
    column-gap: 1rem;
  }

  .h23-service { display: none; }

  .h23-wortmarke img { width: 44px; height: 44px; }
  .h23-firma-name { font-size: 1.1rem; }

  .burger-btn {
    grid-area: burger;
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.55rem 1rem;
    background: transparent;
    border: 1.5px solid var(--farbe-tinte);
    border-radius: var(--radius-pille);
    font-family: var(--schrift-text);
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--farbe-tinte);
    cursor: pointer;
  }

  .burger-balken {
    display: inline-flex;
    flex-direction: column;
    gap: 4px;
    width: 20px;
  }
  .burger-balken span {
    display: block;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
    transition: transform var(--uebergang), opacity var(--uebergang);
  }
  .burger-btn.aktiv .burger-balken span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  .burger-btn.aktiv .burger-balken span:nth-child(2) { opacity: 0; }
  .burger-btn.aktiv .burger-balken span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

  /* Off-Canvas-Navigation von links */
  .site-nav {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 200;
    width: min(84vw, 360px);
    background: var(--farbe-papier);
    border-right: 1px solid var(--farbe-linie);
    transform: translateX(-102%);
    transition: transform 0.3s ease;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 1.5rem 0 2rem;
  }
  .site-nav.offen { transform: translateX(0); }

  .site-nav > ul {
    display: block;
    padding: 0;
  }

  .site-nav > ul > li { border-bottom: 1px solid var(--farbe-linie); }
  .site-nav > ul > li:first-child { border-top: 1px solid var(--farbe-linie); }

  .site-nav > ul > li > a {
    display: block;
    padding: 0.9rem 1.5rem;
    font-size: 1.05rem;
    border-bottom: 0;
    white-space: normal;
  }

  /* Untermenüs: eingerückt, aufklappbar per JS (.offen) */
  .site-nav li.has-dropdown > ul,
  .site-nav li.hat-dropdown > ul {
    position: static;
    transform: none;
    display: none;
    min-width: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: var(--farbe-flaeche);
    padding: 0.4rem 0;
  }
  .site-nav li.has-dropdown.offen > ul,
  .site-nav li.hat-dropdown.offen > ul { display: block; }
  /* Auf Touch kein Hover-Aufklappen */
  .site-nav li.has-dropdown:hover > ul,
  .site-nav li.hat-dropdown:hover > ul,
  .site-nav li.has-dropdown:focus-within > ul,
  .site-nav li.hat-dropdown:focus-within > ul { display: none; }
  .site-nav li.has-dropdown.offen:hover > ul,
  .site-nav li.hat-dropdown.offen:hover > ul,
  .site-nav li.has-dropdown.offen:focus-within > ul,
  .site-nav li.hat-dropdown.offen:focus-within > ul { display: block; }

  .site-nav li li a { padding: 0.55rem 2.25rem; }

  .mobile-only { display: block; }
  .mobile-only a {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.9rem 1.5rem;
    font-weight: 600;
    color: var(--farbe-akzent);
    text-decoration: none;
  }

  /* Hero: Satz oben, Bild darunter */
  .slider-folie { grid-template-columns: 1fr; gap: 1.75rem; }
  .slider-folie > img { max-height: 340px; aspect-ratio: 16 / 10; }
  .slider-inhalt p { font-size: 1.05rem; }
  .slider-container { padding-bottom: 3.6rem; }

  .seite-header { display: block; }
  .seite-header > .header-bg {
    width: auto;
    max-height: 320px;
    aspect-ratio: 16 / 10;
    margin: 0 var(--rand) 1.5rem;
  }
  .seite-header h1,
  .seite-header .container > p { max-width: none; }

  /* Willkommen: Bild oben, Gespräch darunter */
  .willkommen-grid { grid-template-columns: 1fr; gap: 1.75rem; }
  .willkommen-bild img { aspect-ratio: 16 / 10; max-height: 340px; }

  /* Raster */
  .gruppen-grid { grid-template-columns: repeat(2, 1fr); }
  .vorteile-grid { grid-template-columns: repeat(2, 1fr); gap: 1.75rem 0; }
  .vorteil-item:nth-child(odd) { border-left: 0; padding-left: 0; }
  .praxis-fakten { grid-template-columns: repeat(2, 1fr); }
  .kontakt-layout { grid-template-columns: 1fr; }
  .anfahrt-a-grid { grid-template-columns: 1fr; }

  /* Parallax: fixed ist auf Touch-Geräten unzuverlässig */
  .praxis-section,
  .reine-parallax-section,
  .cta-parallax-section { background-attachment: scroll; }

  /* Footer */
  .f23-abspann { grid-template-columns: 1fr; gap: 1.75rem; }
  .f23-abspann-aktionen { justify-self: start; }
  .f23-spalten { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
  body { font-size: 1rem; }

  .h23-firma-ort { display: none; }

  .slider-inhalt h1,
  .slider-inhalt h2 { font-size: clamp(1.7rem, 7.5vw, 2.2rem); }
  .slider-folie > img { aspect-ratio: 4 / 3; }

  .kontakt-cta-grid { grid-template-columns: 1fr; }
  .kontakt-cta-item {
    border-left: 0;
    border-top: 1px solid var(--farbe-linie);
    padding: 0.9rem 0;
  }
  .kontakt-cta-item:first-child { border-top: 0; }

  .gruppen-grid { grid-template-columns: 1fr; }

  /* Kennzahlen untereinander, Haarlinie wandert nach oben */
  .willkommen-stats { grid-template-columns: 1fr; padding-top: 1.25rem; }
  .willkommen-stats .stat-item {
    padding: 0.85rem 0 0;
    border-left: 0;
    border-top: 1px solid var(--farbe-linie);
  }
  .willkommen-stats .stat-item:first-child { padding-top: 0; border-top: 0; }
  .willkommen-bild img { aspect-ratio: 4 / 3; }
  .willkommen-badge { left: 1rem; max-width: calc(100% - 2rem); }

  .vorteile-grid { grid-template-columns: 1fr; gap: 1.5rem; }
  .vorteil-item { border-left: 0; padding-inline: 0; }
  .team-grid { grid-template-columns: 1fr; }
  .bewertungen-grid { grid-template-columns: 1fr; }
  .verwandte-themen-grid { grid-template-columns: 1fr; }
  .textblock-zweispaltig .textblock-spalten { grid-template-columns: 1fr; }
  .praxis-fakten { grid-template-columns: 1fr 1fr; gap: 1.25rem; }
  .f23-spalten { grid-template-columns: 1fr; }

  .float-img-rechts,
  .float-img-links {
    float: none;
    width: 100%;
    margin: 0 0 1.5rem;
  }

  .slider-punkte { left: calc(var(--rand) + 116px); }
}


/* ==========================================================================
   26 MOTION & A11Y
   Ein orchestrierter Moment: der Hero-Satz steigt beim Laden sanft auf.
   ========================================================================== */
@keyframes h23-aufstieg {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

.slider-folie.aktiv .slider-inhalt {
  animation: h23-aufstieg 0.7s ease both;
}

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