/* ===================================================================
   Klinik Dr. Herter – Komponenten
   Nachgebaut aus der Figma-Datei, Stand 28.08.2026
   =================================================================== */

/* -------------------------------------------------------------------
   BUTTONS
   Figma: Radius 10, Manrope Bold 16, Innenabstand 10,
   Text #FAFAF8, Schatten dauerhaft.
   Hover ist grün (#6E8D73), nicht ein helleres Rot.
   ------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: var(--tap-target);
  padding: var(--sp-3) var(--sp-6);
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-family: var(--font-sans);
  font-size: var(--fs-btn);
  font-weight: var(--fw-bold);
  letter-spacing: 0;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  box-shadow: var(--shadow-btn);
  transition: background var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease),
              box-shadow var(--dur-fast) var(--ease);
}

/* Primär – Zustände laut Styleguide-Seite der Figma-Datei */
.btn--primary,
.btn--primary:visited {
  background: var(--c-primary);
  color: #FFFFFF;
}
.btn--primary:hover,
.btn--primary:focus-visible {
  background: var(--c-primary-hover);
  color: #FFFFFF;
}
.btn--primary:active {
  background: var(--c-primary-pressed);
  box-shadow: none;
  transform: translateY(1px);
}

/* Sekundär – Rahmen statt Fläche, Text in Taupe */
.btn--secondary,
.btn--secondary:visited {
  background: transparent;
  border-color: var(--c-secondary);
  color: var(--c-secondary);
  box-shadow: none;
}
.btn--secondary:hover,
.btn--secondary:focus-visible {
  background: var(--c-btn-sec-hover);
  color: var(--c-secondary);
  box-shadow: var(--shadow-btn);
}
.btn--secondary:active { background: var(--c-btn-sec-pressed); box-shadow: none; }

/* Textlink */
.btn--tertiary,
.btn--tertiary:visited {
  min-height: auto;
  padding: var(--sp-2) 0;
  background: none;
  box-shadow: none;
  color: var(--c-primary);
  text-shadow: none;
}
.btn--tertiary:hover {
  color: var(--c-primary-hover);
  text-decoration: underline;
  text-underline-offset: .2em;
}

.btn[disabled], .btn[aria-disabled="true"] {
  background: var(--c-primary-disabled);
  color: var(--c-secondary);
  box-shadow: none;
  text-shadow: none;
  cursor: not-allowed;
  pointer-events: none;
}

.btn--block { width: 100%; }

/* -------------------------------------------------------------------
   HEADER MOBIL
   Figma: 56 px hoch, Burgunder mit Schwarzauflage,
   Burger links, Suche rechts.
   ------------------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  height: var(--header-h);
  background: var(--c-primary);
  color: var(--c-text-inverse);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
}

/* Bildmarke. Im Logo laeuft der Schwung ueber die volle Bildhoehe,
   der Schriftzug sitzt nur im mittleren Drittel – deshalb braucht die
   Marke deutlich mehr Hoehe als eine reine Wortmarke, damit "Klinik
   Dr. Herter" lesbar bleibt. Die Kopfleiste waechst entsprechend mit.
   Die frueher hier stehende Regel .site-header__logo img { height: 32px }
   hatte hoehere Spezifitaet und hat diese Werte ueberschrieben. */
.site-header__logo img { width: auto; display: block; }
.site-header__bildmarke { height: 52px; }
@media (min-width: 1024px) { .site-header__bildmarke { height: 74px; } }

.site-header__logo { text-decoration: none; }
.site-header__wortmarke {
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: var(--fw-medium);
  color: var(--c-text-inverse);
  white-space: nowrap;
}

.header__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--tap-target);
  height: var(--tap-target);
  padding: 0;
  background: none;
  border: 0;
  color: var(--c-text-inverse);
  cursor: pointer;
}
.header__icon svg { width: 26px; height: 26px; }

/* -------------------------------------------------------------------
   BURGER-OVERLAY
   Figma: Fläche Offwhite, Einträge als Sand-Pillen mit Radius 20,
   Manrope Bold 16, schwarzer Text, Aufzählungspunkt.
   ------------------------------------------------------------------- */

.nav {
  position: fixed;
  inset: var(--header-h) 0 0 0;
  z-index: 90;
  padding: var(--sp-7) var(--gutter) var(--sp-9);
  background: var(--c-offwhite);
  overflow-y: auto;
  transform: translateY(-8px);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur) var(--ease),
              transform var(--dur) var(--ease),
              visibility var(--dur);
}
.nav[data-open="true"] {
  transform: none;
  opacity: 1;
  visibility: visible;
}

.nav__list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-7);
  list-style: none;
  padding: 0;
  margin: 0;
}

.nav__link {
  display: flex;
  align-items: center;
  min-height: 42px;
  padding: var(--sp-3) var(--sp-6);
  background: var(--c-sand);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-btn);
  font-size: var(--fs-btn);
  font-weight: var(--fw-bold);
  color: var(--c-text);
  text-decoration: none;
  transition: background var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease);
}
.nav__link::before {
  content: "";
  flex: 0 0 auto;
  width: 5px;
  height: 5px;
  margin-right: var(--sp-4);
  border-radius: 50%;
  background: currentColor;
}
.nav__link:hover,
.nav__link:focus-visible {
  background: var(--c-primary-hover);
  color: #FFFFFF;
}
.nav__link[aria-current="page"] {
  background: var(--c-primary);
  color: #FFFFFF;
}

/* Unterpunkte im Overlay: eingerückt und etwas kleiner, sonst
   identisch – dieselbe Pille, dieselben Zustände. */
.nav__unterliste {
  display: grid;
  gap: var(--sp-3);
  margin: var(--sp-3) 0 0 var(--sp-7);
  padding: 0;
  list-style: none;
}
.nav__link--unter { min-height: 38px; font-size: var(--fs-small); }
.nav__unterliste[hidden] { display: none; }
/* Jede weitere Ebene rückt ein und wird eine Spur kleiner. */
.nav__unterliste .nav__unterliste { margin-left: var(--sp-5); }
.nav__unterliste .nav__unterliste .nav__link { min-height: 34px; font-size: var(--fs-xsmall); }

/* Der Pfeil liegt rechts in der Pille des übergeordneten Punkts.
   Jedes <li> wird zum Bezugsrahmen – auch die verschachtelten, sonst
   richten sich die Pfeile tieferer Ebenen am obersten Punkt aus. */
.nav__list li { position: relative; }
.nav__auf {
  position: absolute;
  top: 0;
  right: 0;
  display: grid;
  place-items: center;
  width: 48px;
  height: 42px;
  border: 0;
  background: none;
  color: inherit;
  cursor: pointer;
}
.nav__auf svg { width: 18px; height: 18px; transition: transform var(--dur-fast) var(--ease); }
.nav__auf[aria-expanded="true"] svg { transform: rotate(180deg); }
/* Damit die Beschriftung nicht unter den Pfeil läuft */
.nav__list li:has(> .nav__unterliste) > .nav__link { padding-right: var(--sp-9); }

@media (prefers-reduced-motion: reduce) { .nav__auf svg { transition: none; } }

/* -------------------------------------------------------------------
   DESKTOP-NAVIGATION
   Ab 1024 px – demselben Breakpunkt, an dem auch die untere Leiste
   verschwindet. Burger und Overlay werden dort nicht gebraucht.
   ------------------------------------------------------------------- */

.site-nav { display: none; }

/* Terminbutton der Kopfleiste: erst ab 1280 px. Zwischen 1024 und
   1279 px ist die Zeile schon mit Bildmarke, fuenf Menuepunkten und Lupe
   ausgelastet – der Knopf hat dort Bildmarke und Lupe zusammengedrueckt.
   Bis 1279 px uebernimmt deshalb die feste Leiste am unteren Rand. */
.site-header__termin { display: none; }
@media (min-width: 1280px) { .site-header__termin { display: inline-flex; } }

@media (min-width: 1024px) {
  /* Etwas mehr Luft, damit die 48-px-Klickflächen nicht am Rand kleben */
  :root { --header-h: 86px; }

  .nav-toggle,
  .nav { display: none; }

  .site-nav { display: block; margin-left: auto; }

  /* Mindestabstand zwischen Bildmarke und erstem Menuepunkt. margin-left:
     auto allein reicht nicht: Wird die Zeile eng, schiebt sich das Menue
     bis an die Bildmarke heran. */
  .site-nav { padding-left: var(--sp-7); }

  /* Bildmarke und Lupe duerfen nicht schrumpfen – sonst quetscht eine
     volle Zeile beide zusammen, statt dass etwas umbricht. */
  .site-header__logo,
  .suche-schalter { flex: 0 0 auto; }

  /* Weisse Flaeche, Salbei erst beim Ueberfahren. Ein burgunderner Knopf
     wuerde auf der burgundernen Leiste verschwinden. */
  .site-header__termin {
    align-items: center;
    flex: 0 0 auto;
    min-height: var(--tap-target);
    margin-left: var(--sp-4);
    padding: 0 var(--sp-5);
    border-radius: var(--radius-pill);
    background: var(--c-forms);
    color: var(--c-primary);
    font-size: var(--fs-btn);
    font-weight: var(--fw-bold);
    text-decoration: none;
    white-space: nowrap;
    transition: background var(--dur-fast) var(--ease),
                color var(--dur-fast) var(--ease);
  }
  /* color muss mitgesetzt werden: a:hover aus base.css hat als
     Elementselektor mit Pseudoklasse hoehere Spezifitaet als die Klasse. */
  .site-header__termin:hover,
  .site-header__termin:focus-visible {
    background: var(--c-sage-light);
    color: var(--c-primary);
  }
  .site-header__termin:visited { color: var(--c-primary); }

  .site-nav__list {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .site-nav__link {
    display: flex;
    align-items: center;
    min-height: var(--tap-target);
    padding: 0 var(--sp-5);
    border-radius: var(--radius-pill);
    font-size: var(--fs-btn);
    font-weight: var(--fw-bold);
    color: var(--c-text-inverse);
    text-decoration: none;
    white-space: nowrap;
    transition: background var(--dur-fast) var(--ease),
                color var(--dur-fast) var(--ease);
  }
  /* color muss mit: die Basisregel a:hover setzt --c-link-hover und hat
     als a:hover hoehere Spezifitaet als die Klasse. Ohne diese Zeile
     wird die Beschriftung beim Ueberfahren burgunder auf burgunder. */
  .site-nav__link:hover,
  .site-nav__link:focus-visible {
    background: var(--c-primary-hover);
    color: var(--c-text-inverse);
  }

  /* --- Untermenü ---
     Es öffnet auf drei Wegen: Mauszeiger über dem Punkt, Tastaturfokus
     irgendwo darin, oder Klick auf den Pfeil. Die ersten beiden laufen
     rein über CSS und funktionieren damit auch ohne JavaScript. */
  .site-nav__punkt { position: relative; display: flex; align-items: center; }

  /* Die Klappe richtet sich am Menüpunkt aus. Der umschliessende <div>
     traegt keine eigene Position, damit die absolute Klappe den Punkt
     als Bezug nimmt. */
  .site-nav__punkt--mit-menu > div { position: static; }

  .site-nav__auf {
    display: grid;
    place-items: center;
    width: 32px;
    height: var(--tap-target);
    margin-left: -.5rem;
    border: 0;
    background: none;
    color: var(--c-text-inverse);
    cursor: pointer;
  }
  .site-nav__auf svg { width: 16px; height: 16px; transition: transform var(--dur-fast) var(--ease); }
  .site-nav__auf[aria-expanded="true"] svg { transform: rotate(180deg); }

  /* --- Untermenüs ---
     Die erste Ebene klappt unter dem Menüpunkt auf, jede weitere
     seitlich daneben. Die Klappen schließen lückenlos aneinander an:
     mit Zwischenraum würde der Mauszeiger beim Hinüberfahren den Hover
     verlieren und alles zuklappen. */
  .site-nav__untermenu {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 90;
    min-width: 13rem;
    margin: 0;
    padding: var(--sp-2);
    list-style: none;
    background: var(--c-primary);
    border-radius: 0 0 var(--radius) var(--radius);
    box-shadow: 0 12px 28px rgba(0, 0, 0, .18);
    /* display statt visibility: eine nur unsichtbare Klappe zaehlt
       weiter zur Seitenbreite und macht die Seite waagerecht
       scrollbar, obwohl nichts offen ist. */
    display: none;
  }

  /* Erste Ebene rechtsbündig am Menüpunkt. Das Menü steht rechts –
     linksbündig bliebe für die drei folgenden Ebenen zu wenig Platz
     bis zum Bildschirmrand. */
  .site-nav__punkt--mit-menu > div > .site-nav__untermenu { left: auto; right: 0; }

  /* Zweite Ebene und tiefer: rechts neben der übergeordneten Klappe. */
  .site-nav__untermenu--seitlich {
    top: calc(-1 * var(--sp-2));
    left: 100%;
    border-radius: var(--radius);
  }

  /* Reicht der Platz nach rechts nicht bis zum Bildschirmrand, öffnet
     die Klappe nach links. site.js entscheidet das nach dem Messen. */
  .site-nav__untermenu--seitlich.nach-links { left: auto; right: 100%; }

  .site-nav__punkt:hover > div > .site-nav__untermenu,
  .site-nav__punkt:focus-within > div > .site-nav__untermenu,
  .site-nav__auf[aria-expanded="true"] + div > .site-nav__untermenu,
  .site-nav__zweig:hover > .site-nav__untermenu,
  .site-nav__zweig:focus-within > .site-nav__untermenu { display: block; }

  .site-nav__untermenu li { position: relative; }

  .site-nav__untermenu a {
    display: block;
    padding: var(--sp-3) var(--sp-5);
    border-radius: var(--radius-pill);
    color: var(--c-text-inverse);
    font-size: var(--fs-small);
    font-weight: var(--fw-bold);
    text-decoration: none;
    white-space: nowrap;
    transition: background var(--dur-fast) var(--ease);
  }
  /* Platz für den Pfeil – rechts, weil die Klappe nach rechts öffnet.
     Kippt sie nach links, wandert der Pfeil mit. */
  .site-nav__zweig > a { padding-right: var(--sp-9); }
  .site-nav__zweig:has(> .nach-links) > a { padding-right: var(--sp-5); padding-left: var(--sp-9); }

  .site-nav__untermenu a:hover,
  .site-nav__untermenu a:focus-visible,
  .site-nav__zweig:hover > a { background: var(--c-primary-hover); color: var(--c-text-inverse); }
  .site-nav__untermenu a[aria-current="page"] {
    background: var(--c-forms);
    color: var(--c-primary);
  }

  /* Pfeil zeigt in die Richtung, in die sich die Klappe öffnet. */
  .site-nav__pfeil {
    position: absolute;
    top: 50%;
    right: var(--sp-4);
    width: 14px;
    height: 14px;
    transform: translateY(-50%);
    color: var(--c-text-inverse);
    pointer-events: none;
  }
  .site-nav__zweig:has(> .nach-links) > .site-nav__pfeil {
    right: auto;
    left: var(--sp-4);
    transform: translateY(-50%) rotate(180deg);
  }


  @media (prefers-reduced-motion: reduce) {
    .site-nav__auf svg { transition: none; }
  }

  /* Auf der Burgunder-Leiste ist die aktive Pille die Umkehrung des
     Overlays: dort Burgunder auf hell, hier hell auf Burgunder. */
  .site-nav__link[aria-current="page"] {
    background: var(--c-forms);
    color: var(--c-primary);
  }
}

/* -------------------------------------------------------------------
   SEITENTITEL
   Figma "Titel 1. Unterseite mobil": Bild, darauf ein Moosgrau-Kasten
   mit Radius 10, Newsreader Regular 42 in #FAFAF8, feine Linie darunter.
   ------------------------------------------------------------------- */

.seitentitel {
  position: relative;
  isolation: isolate;
  /* Hintergrund trägt das Layout, auch wenn das Bild noch fehlt */
  background: var(--c-sand);
}
.seitentitel__bild {
  width: 100%;
  aspect-ratio: 393 / 294;
  /* Auf breiten Viewports würde das mobile Seitenverhältnis sonst
     eine übermannshohe Fläche erzeugen. */
  max-height: 420px;
  object-fit: cover;
}
.seitentitel__box {
  position: absolute;
  left: var(--gutter);
  top: 18%;
  max-width: 42%;
  padding: var(--sp-4) var(--sp-6) var(--sp-5);
  background: var(--c-moss);
  border-radius: var(--radius);
}
.seitentitel__box h1 {
  font-family: var(--font-display);
  font-weight: var(--fw-regular);
  font-size: var(--fs-h1);
  line-height: var(--lh-tight);
  color: var(--c-text-inverse);
}
.seitentitel__box hr {
  margin-top: var(--sp-4);
  border: 0;
  border-top: 1px solid var(--c-text-inverse);
  opacity: .9;
}

/* -------------------------------------------------------------------
   VORSPANN
   Figma "Vorspann 2 Absätze mobil": Offwhite, Überschrift
   Manrope SemiBold 20, Abstand 15 zum Text, 30 zwischen den Blöcken.
   ------------------------------------------------------------------- */

.vorspann { background: var(--c-offwhite); }

.vorspann__block + .vorspann__block { margin-top: var(--sp-7); }

.vorspann__block h2 {
  margin-bottom: var(--sp-4);
  font-size: var(--fs-h3);
  font-weight: var(--fw-semibold);
  color: var(--c-text);
}

/* -------------------------------------------------------------------
   TEASER
   Figma "Teaser 1. Unterseite": Sandfläche, Bild oben,
   Überschrift Manrope Bold 18, Fließtext 16.
   ------------------------------------------------------------------- */

.teaser {
  background: var(--c-sand);
  padding: var(--sp-8) var(--gutter);
}
.teaser__bild {
  width: 100%;
  aspect-ratio: 16 / 11;
  max-height: 320px;
  object-fit: cover;
  background: var(--c-neutral);
  margin-bottom: var(--sp-6);
}
.teaser__titel {
  margin-bottom: var(--sp-4);
  font-size: var(--fs-teaser);
  font-weight: var(--fw-bold);
  color: var(--c-text);
}

/* -------------------------------------------------------------------
   ABSPANN
   Figma "Abspann – Mobil": Salbei hell, Überschrift Manrope
   SemiBold 23 mit negativer Laufweite, darunter drei Aktionen.
   ------------------------------------------------------------------- */

.abspann {
  background: var(--c-sage-light);
  padding: var(--sp-9) var(--gutter);
}
.abspann h2 {
  margin-bottom: var(--sp-6);
  font-size: var(--fs-h2);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-h2);
  color: var(--c-text);
}
/* Überschrift und Fließtext mittig. Haengt an der eigenen Klasse
   .abspann, nicht an der Farbe – sonst wuerde jeder weitere Abschnitt
   in Salbei seinen Text ungewollt zentrieren. */
.abspann .abschnitt__inhalt {
  text-align: center;
  margin-inline: auto;
  max-width: var(--container-text);
}

/* Auf Mobil untereinander und gleich breit – unterschiedlich lange
   Beschriftungen ergaeben sonst eine unruhige Treppe. Ab 760 px
   nebeneinander und mittig. */
.abspann__aktionen {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--sp-5);
  margin-top: var(--sp-8);
}
.abspann__aktionen .btn { justify-content: center; }
@media (min-width: 760px) {
  .abspann__aktionen {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--sp-5) var(--sp-6);
  }
}

/* Schaltflächen mit Symbol und Beschriftung nebeneinander */
.btn--mit-icon {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
}
.btn--mit-icon svg { flex: 0 0 auto; }
/* Noch von styleguide.php genutzt */
.abspann__zeile { display: flex; gap: var(--sp-7); align-items: center; }

.btn--icon {
  width: 57px;
  padding-inline: 0;
  min-height: 42px;
}

/* -------------------------------------------------------------------
   FAQ-AKKORDEON
   Figma Node 310:205 "FAQ-Mobil": weisse Karten mit 14 px Radius und
   warmem Rand, Frage in SemiBold 18, Antwort in Regular 15 mit weiter
   Zeilenhoehe. Rechts ein burgunderfarbener Kreis mit Plus, das sich
   beim Oeffnen um 45 Grad zum Kreuz dreht. Die geoeffnete Karte
   bekommt einen burgunderfarbenen Rand und einen weichen Schatten.
   ------------------------------------------------------------------- */

.accordion { display: grid; gap: 12px; }

.accordion__item {
  background: var(--c-faq-flaeche);
  border: 1px solid var(--c-faq-rand);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: border-color var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease);
}
/* Der geoeffnete Zustand haengt am Knopf, gestaltet wird aber die Karte.
   Ohne :has bleibt der Rand neutral – die Karte funktioniert trotzdem. */
.accordion__item:has(.accordion__trigger[aria-expanded="true"]) {
  border-color: var(--c-primary);
  box-shadow: 0 10px 24px rgba(0, 0, 0, .06);
}

.accordion__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-5);
  width: 100%;
  min-height: var(--tap-target);
  padding: var(--sp-6) 20px;
  background: none;
  border: 0;
  font-size: var(--fs-lead);
  font-weight: var(--fw-semibold);
  line-height: 1.4;
  color: var(--c-faq-frage);
  text-align: left;
  cursor: pointer;
}

.accordion__icon {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--c-primary);
  color: var(--c-text-inverse);
  transition: transform var(--dur) var(--ease);
}
.accordion__icon svg { width: 18px; height: 18px; }
/* 45 Grad macht aus dem Plus ein Kreuz – so ist es in Figma geloest. */
.accordion__trigger[aria-expanded="true"] .accordion__icon { transform: rotate(45deg); }

@media (prefers-reduced-motion: reduce) {
  .accordion__icon { transition: none; }
}

.accordion__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--dur) var(--ease);
}
.accordion__panel[data-open="true"] { grid-template-rows: 1fr; }
.accordion__panel > div { overflow: hidden; }
.accordion__panel .inner {
  padding: 0 20px 24px;
  font-size: var(--fs-small);
  line-height: 1.8;
  color: var(--c-faq-antwort);
}

/* -------------------------------------------------------------------
   FORMULARE
   ------------------------------------------------------------------- */

.field { margin-bottom: var(--sp-6); }

.field label {
  display: block;
  margin-bottom: var(--sp-2);
  font-size: var(--fs-small);
  font-weight: var(--fw-semibold);
  color: var(--c-text);
}

.field .hint {
  display: block;
  margin-top: var(--sp-2);
  font-size: var(--fs-xsmall);
  color: var(--c-text-secondary);
}

.input, .textarea, .select {
  width: 100%;
  min-height: var(--tap-target);
  padding: var(--sp-3) var(--sp-4);
  background: var(--c-forms);
  border: 1px solid var(--c-input-border);
  border-radius: var(--radius);
  color: var(--c-text);
  transition: border-color var(--dur-fast) var(--ease),
              box-shadow var(--dur-fast) var(--ease);
}
.input:hover, .textarea:hover, .select:hover { border-color: var(--c-input-border-hover); }
.input:focus, .textarea:focus, .select:focus {
  outline: none;
  border-color: var(--c-input-border-focus);
  box-shadow: var(--shadow-focus);
}

.textarea { min-height: 9rem; resize: vertical; line-height: var(--lh-body); }

.field--error .input,
.field--error .textarea { border-color: var(--c-error); }

.error-msg {
  display: block;
  margin-top: var(--sp-2);
  font-size: var(--fs-xsmall);
  color: var(--c-error);
}

.required { color: var(--c-primary); }

/* Feldgruppen mit Mehrfachauswahl -------------------------------- */

.feldgruppe {
  margin: 0 0 var(--sp-6);
  padding: 0;
  border: 0;
}
.feldgruppe legend {
  padding: 0;
  margin-bottom: var(--sp-2);
  font-size: var(--fs-small);
  font-weight: var(--fw-semibold);
  color: var(--c-text);
}

.optionen { display: grid; gap: var(--sp-2); margin-top: var(--sp-3); }
@media (min-width: 620px) { .optionen { grid-template-columns: repeat(2, 1fr); } }
.optionen--reihe { grid-template-columns: none; display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-6); }

/* Die ganze Zeile ist klickbar, nicht nur das Kaestchen – deshalb
   min-height statt fester Hoehe, damit umbrechender Text mitwaechst. */
.option {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  min-height: var(--tap-target);
  padding: var(--sp-3) 0;
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  cursor: pointer;
}
.option input {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  margin: 0;
  accent-color: var(--c-primary);
}
.option:has(input:focus-visible) { outline: 2px solid var(--c-input-border-focus); outline-offset: 4px; border-radius: var(--radius-sm); }
.option--einwilligung { align-items: flex-start; }

.feldreihe { display: grid; gap: 0 var(--sp-6); }
@media (min-width: 620px) { .feldreihe { grid-template-columns: repeat(2, 1fr); } }

/* Honigtopf: nicht display:none, sonst ueberspringen manche Bots ihn */
.honigtopf {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Anfrage-Funnel --------------------------------------------------
   Eine Frage je Schritt. Ohne JavaScript liegen alle Schritte
   untereinander; die Fragen wirken dann wie Zwischenüberschriften.
   site.js blendet sie einzeln ein und ergänzt Fortschritt und Zurück. */

/* Über die volle Containerbreite. Fließtext bleibt schmal, damit die
   Zeilen lesbar bleiben; die Antwortfelder nutzen die Breite. */
.funnel { max-width: none; }
.funnel > p,
.funnel > .hinweis { max-width: var(--container-text); }

.schritt {
  margin: 0;
  padding: 0;
  border: 0;
}
.schritt + .schritt { margin-top: var(--sp-9); }
.schritt[hidden] { display: none; }

.schritt__frage {
  padding: 0;
  font-family: var(--font-display);
  font-weight: var(--fw-regular);
  font-size: clamp(1.35rem, 1.1rem + 1vw, 1.75rem);
  line-height: 1.25;
  color: var(--c-text);
}
.schritt__hinweis {
  margin-top: var(--sp-2);
  font-size: var(--fs-small);
  color: var(--c-text-secondary);
}

/* Auswahlkacheln -------------------------------------------------- */

.wahlliste { display: grid; gap: var(--sp-3); margin-top: var(--sp-6); }
/* Bei voller Containerbreite zweispaltig – eine 1166 px lange Zeile für
   "Brust & Silhouette" liest sich schlecht. */
@media (min-width: 900px) { .wahlliste { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.wahl {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  min-height: 60px;
  padding: var(--sp-4) var(--sp-5);
  background: var(--c-forms);
  border: 1px solid var(--c-input-border);
  border-radius: var(--radius);
  font-size: var(--fs-body);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease);
}
.wahl:hover { border-color: var(--c-primary); }

.wahl input {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  margin: 0;
  accent-color: var(--c-primary);
}

/* Gewählt: volle Burgunderfläche – auf dem Handy sofort erkennbar.
   :has deckt den Fall ohne JavaScript ab, die Klasse ältere Browser. */
.wahl:has(input:checked),
.wahl.ist-gewaehlt {
  background: var(--c-primary);
  border-color: var(--c-primary);
  color: var(--c-text-inverse);
}
.wahl:has(input:checked) input { accent-color: var(--c-forms); }

.wahl:has(input:focus-visible) {
  outline: 2px solid var(--c-input-border-focus);
  outline-offset: 3px;
}

/* Fortschritt ----------------------------------------------------- */

.fortschritt { margin-bottom: var(--sp-8); }
.fortschritt__kopf {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-4);
  margin-bottom: var(--sp-3);
}
.fortschritt__kurz {
  font-size: var(--fs-xsmall);
  font-weight: var(--fw-bold);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--c-text-secondary);
}
.fortschritt__zaehler {
  font-family: var(--font-display);
  font-size: var(--fs-small);
  color: var(--c-text-secondary);
}
.fortschritt__zaehler b { color: var(--c-primary); font-weight: var(--fw-regular); }

.fortschritt__bahn {
  height: 2px;
  background: var(--c-neutral);
  border-radius: 2px;
  overflow: hidden;
}
.fortschritt__fuellung {
  height: 100%;
  width: 0;
  background: var(--c-primary);
  transition: width var(--dur) var(--ease);
}
@media (prefers-reduced-motion: reduce) {
  .fortschritt__fuellung { transition: none; }
}

/* Zurück ---------------------------------------------------------- */

.schritt-zurueck { margin-top: var(--sp-6); }
.schritt-zurueck[hidden] { display: none; }

.textknopf {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: var(--tap-target);
  padding: 0;
  border: 0;
  background: none;
  color: var(--c-text-secondary);
  font-size: var(--fs-small);
  font-weight: var(--fw-semibold);
  cursor: pointer;
}
.textknopf:hover { color: var(--c-primary); }

/* Nur für Screenreader */
.nur-vorlesen {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Ärzteseiten ---------------------------------------------------- */

.lebenslauf { display: grid; gap: var(--sp-8); }
@media (min-width: 900px) { .lebenslauf { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--sp-9); } }

.lebenslauf__liste { margin-top: var(--sp-5); padding-left: 1.4rem; }
.lebenslauf__liste li + li { margin-top: var(--sp-3); }

.werdegang { margin-top: var(--sp-5); }
.werdegang__eintrag {
  display: grid;
  gap: var(--sp-2);
  padding: var(--sp-5) 0;
  border-top: 1px solid rgba(137, 18, 23, .18);
}
@media (min-width: 620px) { .werdegang__eintrag { grid-template-columns: 8rem 1fr; gap: var(--sp-5); } }
.werdegang dt { font-weight: var(--fw-bold); color: var(--c-primary); font-size: var(--fs-small); }
.werdegang dd { margin: 0; font-size: var(--fs-small); line-height: 1.6; }

/* Bilderkarussell -------------------------------------------------
   Gleicher Aufbau wie die Bewertungsspur: Scrollbereich mit
   Einrastpunkten, Bedienelemente von site.js über data-slider.
   Ohne JavaScript bleibt es ein normaler Scrollbereich. */

.galerie {
  display: grid;
  grid-auto-flow: column;
  /* Einspaltig genau ein Bild, ohne Anschnitt des naechsten – wie beim
     Bewertungs-Slider. Pfeile und Zaehler zeigen an, dass es weitergeht. */
  grid-auto-columns: 100%;
  gap: var(--sp-5);
  margin-top: var(--sp-8);
  overflow-x: auto;
  align-items: start;
  scroll-snap-type: x mandatory;
  padding-block: 4px 12px;
  scrollbar-width: none;
}
.galerie::-webkit-scrollbar { display: none; }

@media (min-width: 620px)  { .galerie { grid-auto-columns: calc((100% - var(--sp-5)) / 2); } }
@media (min-width: 1000px) { .galerie { grid-auto-columns: calc((100% - 2 * var(--sp-5)) / 3); } }

.galerie__bild-rahmen { margin: 0; scroll-snap-align: start; }
.galerie__bild {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  background: var(--c-neutral);
  border-radius: var(--radius);
  box-shadow: var(--shadow-btn);
}
.galerie__bild-rahmen figcaption {
  margin-top: var(--sp-3);
  font-size: var(--fs-xsmall);
  color: var(--c-text-secondary);
}

/* Rechtstexte und Kontaktseite ------------------------------------ */

.rechtstext { max-width: var(--container-text); }
.rechtstext h1 { margin-bottom: var(--sp-6); }
.rechtstext h2 {
  margin-top: var(--sp-8);
  font-size: var(--fs-vorteile);
  font-weight: var(--fw-semibold);
}
.rechtstext p,
.rechtstext ul { margin-top: var(--sp-4); }
.rechtstext ul { padding-left: 1.4rem; }
.rechtstext li + li { margin-top: .35rem; }
.rechtstext__vorspann { font-size: var(--fs-lead); color: var(--c-text-secondary); }

/* Offene Angaben in Rechtstexten. Bewusst auffällig – diese Seiten
   dürfen nicht mit Lücken live gehen, und eine dezente Markierung
   übersieht man beim Korrekturlesen. */
.luecke {
  background: #FFF3CD;
  border-bottom: 2px solid var(--c-warning);
  padding: .1em .35em;
  border-radius: var(--radius-sm);
  color: var(--c-text);
  font-size: var(--fs-small);
}

.kontakt-kopf { max-width: var(--container-text); }
.kontakt-kopf p { margin-top: var(--sp-4); }

.kontakt-wege { display: grid; gap: var(--sp-6); margin-top: var(--sp-8); }
@media (min-width: 620px)  { .kontakt-wege { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .kontakt-wege { grid-template-columns: repeat(4, 1fr); } }

.kontakt-weg {
  padding: var(--sp-6) var(--sp-5);
  background: var(--c-forms);
  border-radius: var(--radius);
  box-shadow: var(--shadow-btn);
}
.kontakt-weg h2 {
  font-size: var(--fs-xsmall);
  font-weight: var(--fw-bold);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--c-text-secondary);
}
.kontakt-weg p { margin-top: var(--sp-3); }
.kontakt-weg__gross { font-size: var(--fs-lead); font-weight: var(--fw-bold); }

.kontakt-zeiten { margin-top: var(--sp-3); list-style: none; padding: 0; }
.kontakt-zeiten li { display: flex; flex-direction: column; font-size: var(--fs-small); }
.kontakt-zeiten li + li { margin-top: var(--sp-3); }
.kontakt-zeiten span:first-child { color: var(--c-text-secondary); }

/* Magazinbeitrag --------------------------------------------------
   Eine Lesespalte von rund 42 rem. Längere Zeilen ermüden beim
   Lesen, und die Bilder liegen mit 620 px Quelle nahe an ihrer
   Anzeigebreite. */

.artikel { max-width: 42rem; margin-inline: auto; }

.artikel__rubrik {
  font-size: var(--fs-xsmall);
  font-weight: var(--fw-bold);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--c-primary);
}
.artikel__kopf h1 { margin-top: var(--sp-3); }
.artikel__vorspann {
  margin-top: var(--sp-5);
  font-size: var(--fs-lead);
  line-height: 1.6;
  color: var(--c-text-secondary);
}

/* Nur die direkte Textebene: eingebettete Bausteine wie das
   FAQ-Akkordeon haben eigene Überschriften und Abstände, die sonst
   überschrieben würden. */
:where(.artikel, .artikel__band) > h2 {
  margin-top: var(--sp-9);
  font-size: var(--fs-vorteile);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-heading);
}
:where(.artikel, .artikel__band) > h3 {
  margin-top: var(--sp-7);
  font-size: var(--fs-lead);
  font-weight: var(--fw-bold);
}
:where(.artikel, .artikel__band) > p,
.artikel__liste { margin-top: var(--sp-6); line-height: 1.7; }
:where(.artikel, .artikel__band) > h2 + p,
:where(.artikel, .artikel__band) > h3 + p,
:where(.artikel, .artikel__band) > h2 + figure,
:where(.artikel, .artikel__band) > h3 + figure { margin-top: var(--sp-6); }

.artikel__bild { margin: var(--sp-6) 0; }
.artikel__foto {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius);
  background: var(--c-neutral);
}
.artikel__bild figcaption {
  margin-top: var(--sp-3);
  font-size: var(--fs-xsmall);
  color: var(--c-text-secondary);
}

.artikel__liste { padding-left: 1.3rem; }
.artikel__liste li + li { margin-top: var(--sp-2); }

/* Die Stimme des Arztes abgesetzt – Linie in Markenfarbe, Schrift in
   Newsreader, wie die Zitate im Ärzte-Bereich. */
.artikel__stimme {
  margin-top: var(--sp-5);
  padding: var(--sp-5) 0 var(--sp-5) var(--sp-6);
  border-left: 3px solid var(--c-primary);
}
.artikel__stimme p {
  margin-top: 0;
  font-family: var(--font-display);
  font-size: var(--fs-lead);
  font-style: italic;
  line-height: 1.55;
}
.artikel__stimme p + p { margin-top: var(--sp-4); }
.artikel__stimme .artikel__stimme-name {
  margin-top: var(--sp-5);
  font-family: var(--font-sans);
  font-size: var(--fs-small);
  font-style: normal;
  color: var(--c-text-secondary);
}

/* Rueckweg ins Magazin am Ende des Beitrags. Sekundaer gehalten: Der
   Terminknopf steht im Kontaktbereich direkt darunter und soll der
   einzige Primaerknopf auf der Seite bleiben. */
.artikel__zurueck { margin-top: var(--sp-9); }

/* Gegenüberstellung zweier Begriffe */
.artikel__vergleich { display: grid; gap: var(--sp-4); margin: var(--sp-5) 0 0; }
@media (min-width: 620px) { .artikel__vergleich { grid-template-columns: 1fr 1fr; } }
.artikel__vergleich > div {
  padding: var(--sp-5);
  background: var(--c-forms);
  border-radius: var(--radius);
  border-top: 3px solid var(--c-primary);
}
.artikel__vergleich dt { font-weight: var(--fw-bold); }
.artikel__vergleich dd { margin: var(--sp-2) 0 0; line-height: 1.6; }

/* Eine einzelne Leitfrage, hervorgehoben */
.artikel__frage {
  font-family: var(--font-display);
  font-size: var(--fs-lead);
  font-style: italic;
  color: var(--c-primary);
}

/* Farblich abgesetzte Blöcke im Beitrag -------------------------
   Nur so breit wie die Lesespalte, nicht über die ganze Seite. */

.artikel__band {
  padding: var(--sp-6) var(--sp-5);
  border-radius: var(--radius);
}
.artikel__band + .artikel__band { margin-top: var(--sp-5); }
.artikel__kopf + .artikel__band { margin-top: var(--sp-7); }
.artikel__band--sand     { background: var(--c-sand); }
/* Weiß statt Offwhite: auf der offwhite Seitenfläche wäre sonst nur
   jeder zweite Block sichtbar. */
.artikel__band--offwhite { background: var(--c-faq-flaeche); }
/* Erstes Element im Block ohne Abstand nach oben */
.artikel__band > :first-child { margin-top: 0; }

/* Aufmacher über der Überschrift, mit Titelkasten unten links */
.artikel__aufmacher { position: relative; margin: var(--sp-5) 0 var(--sp-7); }
.artikel__aufmacher .artikel__bild { margin: 0; }
/* Im Beitrag sitzt der Kasten in der Lesespalte, nicht am Seitenrand */
.artikel__aufmacher .hero__box { left: var(--sp-6); bottom: var(--sp-6); max-width: calc(100% - 2 * var(--sp-6)); }

/* Magazin-Übersicht --------------------------------------------- */

.magazin-liste {
  display: grid;
  gap: var(--sp-6);
  margin-top: var(--sp-8);
}
@media (min-width: 620px)  { .magazin-liste { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .magazin-liste { grid-template-columns: repeat(3, 1fr); } }

.magazin-karte {
  display: flex;
  flex-direction: column;
  background: var(--c-forms);
  border-radius: var(--radius);
  box-shadow: var(--shadow-btn);
  overflow: hidden;
}
.magazin-karte__bild { display: block; }
/* Platzhalter, bis das Bild aus Figma exportiert ist */
.magazin-karte__foto--leer { display: block; width: 100%; aspect-ratio: 16 / 9; background: var(--c-neutral); }
.magazin-karte__foto {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: var(--c-neutral);
}
.magazin-karte__text {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: var(--sp-6) var(--sp-5);
}
.magazin-karte__text h2 {
  margin-top: var(--sp-3);
  font-size: var(--fs-lead);
  font-weight: var(--fw-bold);
  line-height: var(--lh-heading);
}
.magazin-karte__text h2 a { color: var(--c-text); text-decoration: none; }
.magazin-karte__text h2 a:visited { color: var(--c-text); }
.magazin-karte__text h2 a:hover,
.magazin-karte__text h2 a:focus-visible { color: var(--c-primary); text-decoration: underline; }
.magazin-karte__datum {
  margin-top: var(--sp-1);
  font-size: var(--fs-xsmall);
  color: var(--c-text-secondary);
}
.magazin-karte__text > p:not(.artikel__rubrik):not(.magazin-karte__datum) { margin-top: var(--sp-3); }
/* Der Weiterlesen-Link sitzt immer unten, auch bei kürzerem Teaser */
.magazin-karte__text > p:last-child { margin-top: auto; padding-top: var(--sp-4); }

/* Themenfilter im Magazin ---------------------------------------- */

.themenfilter {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-top: var(--sp-7);
}
.themenfilter__knopf {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: 44px;                 /* ausreichend große Trefferfläche */
  padding: var(--sp-2) var(--sp-5);
  border: 1px solid var(--c-input-border);
  border-radius: var(--radius-pill);
  background: var(--c-forms);
  color: var(--c-text);
  font-size: var(--fs-small);
  font-weight: var(--fw-bold);
  text-decoration: none;
  transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
/* :visited mitsetzen – sonst schlägt die Basisregel a:visited die Klasse */
.themenfilter__knopf:visited { color: var(--c-text); }
.themenfilter__knopf:hover,
.themenfilter__knopf:focus-visible { border-color: var(--c-primary); color: var(--c-primary); }
.themenfilter__knopf[aria-current="true"],
.themenfilter__knopf[aria-current="true"]:visited {
  background: var(--c-primary);
  border-color: var(--c-primary);
  color: var(--c-text-inverse);
}
.themenfilter__zahl {
  min-width: 1.5em;
  padding: 0 .4em;
  border-radius: var(--radius-pill);
  background: rgba(0, 0, 0, .07);
  font-size: var(--fs-xsmall);
  text-align: center;
}
.themenfilter__knopf[aria-current="true"] .themenfilter__zahl { background: rgba(255, 255, 255, .22); }

/* hidden sicher durchsetzen – die Karten sind sonst display:flex */
.magazin-karte[hidden] { display: none; }

.themenfilter__leer {
  margin-top: var(--sp-7);
  padding: var(--sp-7) var(--sp-6);
  background: var(--c-forms);
  border-radius: var(--radius);
  max-width: var(--container-text);
}
.themenfilter__leer p + p { margin-top: var(--sp-4); }

/* Magazin auf der Startseite ------------------------------------ */

/* Überschrift links, Link zur Übersicht rechts auf einer Linie */
.abschnitt__kopfzeile {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-3) var(--sp-6);
}

/* Der neueste Beitrag breit: Bild links, Text rechts. Darunter
   untereinander wie die übrigen Karten. */
.magazin-karte--gross { margin-top: var(--sp-7); }
@media (min-width: 900px) {
  .magazin-karte--gross {
    display: grid;
    grid-template-columns: minmax(0, 11fr) minmax(0, 9fr);
  }
  .magazin-karte--gross .magazin-karte__bild { height: 100%; }
  .magazin-karte--gross .magazin-karte__foto { height: 100%; aspect-ratio: auto; min-height: 320px; }
  .magazin-karte--gross .magazin-karte__text { padding: var(--sp-8) var(--sp-7); justify-content: center; }
  .magazin-karte--gross .magazin-karte__text h3 { font-size: var(--fs-vorteile); }
  /* Weiterlesen folgt hier direkt dem Teaser, statt nach unten zu rutschen */
  .magazin-karte--gross .magazin-karte__text > p:last-child { margin-top: 0; }
}

/* Drei Karten nebeneinander ab 760 px – ohne die Zwei-Spalten-Stufe der
   Übersicht, die bei drei Karten eine einzelne in der zweiten Reihe
   stehen ließe. */
.magazin-liste--drei { margin-top: var(--sp-6); }
@media (min-width: 620px)  { .magazin-liste--drei { grid-template-columns: 1fr; } }
@media (min-width: 760px)  { .magazin-liste--drei { grid-template-columns: repeat(3, 1fr); } }

.magazin-karte__text h3 {
  margin-top: var(--sp-3);
  font-size: var(--fs-lead);
  font-weight: var(--fw-bold);
  line-height: var(--lh-heading);
}
.magazin-karte__text h3 a { color: var(--c-text); text-decoration: none; }
.magazin-karte__text h3 a:visited { color: var(--c-text); }
.magazin-karte__text h3 a:hover,
.magazin-karte__text h3 a:focus-visible { color: var(--c-primary); text-decoration: underline; }

/* Ablauf als Zeitstrahl ------------------------------------------
   Vier Schritte nebeneinander, darunter gestapelt. Die Nummern sind
   dekorativ – die Reihenfolge trägt das <ol>. */

.ablauf {
  display: grid;
  gap: var(--sp-7);
  margin: var(--sp-8) 0 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 620px)  { .ablauf { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .ablauf { grid-template-columns: repeat(4, 1fr); gap: var(--sp-6); } }

.ablauf__schritt { padding-top: var(--sp-6); border-top: 3px solid var(--c-primary); }
.ablauf__zahl {
  display: block;
  font-family: var(--font-display);
  font-size: 2.125rem;
  line-height: 1;
  color: var(--c-primary);
}
.ablauf__schritt h3 { margin-top: var(--sp-4); font-size: var(--fs-lead); font-weight: var(--fw-bold); }
.ablauf__schritt p  { margin-top: var(--sp-3); line-height: 1.65; }

/* Fehlerseite ---------------------------------------------------- */

.fehlerseite { max-width: var(--container-text); }
.fehlerseite__code {
  font-family: var(--font-display);
  font-size: clamp(3.5rem, 2rem + 8vw, 6rem);
  line-height: 1;
  color: var(--c-primary);
  opacity: .22;
}
.fehlerseite__titel {
  margin: var(--sp-2) 0 var(--sp-3);
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 1.6rem + 2.8vw, 3.5rem);
  font-weight: var(--fw-regular);
  line-height: var(--lh-tight);
}
.fehlerseite__unterzeile { font-size: var(--fs-lead); }

/* Das Motiv füllt die Textspalte, ist aber gedeckelt: als Hochformat
   würde es über die volle Breite sonst den halben Bildschirm belegen. */
.fehlerseite__bild {
  display: block;
  width: 100%;
  max-width: 380px;
  height: auto;
  margin: var(--sp-7) 0;
  border-radius: var(--radius);
}
.fehlerseite > p + p { margin-top: var(--sp-5); }

.fehlerseite__zurueck { margin: var(--sp-6) 0 var(--sp-7); }

/* Dankeseite ----------------------------------------------------- */

.danke { max-width: var(--container-text); }
.danke__zeichen {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  margin-bottom: var(--sp-6);
  border-radius: 50%;
  background: var(--c-primary);
  color: var(--c-text-inverse);
}
.danke__zeichen svg { width: 30px; height: 30px; }
.danke h1 { margin-bottom: var(--sp-5); }
.danke > p + p { margin-top: var(--sp-5); }

.danke__wege {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
  margin-top: var(--sp-7);
}
.danke__weiter { margin-top: var(--sp-7); }

/* Statusmeldungen ------------------------------------------------ */

.hinweis {
  padding: var(--sp-4) var(--sp-5);
  border-left: 4px solid;
  border-radius: var(--radius);
  background: var(--c-forms);
  max-width: var(--container-text);
}
/* #6E8D73 liegt in Figma unter dem Namen "Hover", passt dort aber nicht
   zur Button-Spezifikation. Als Bestaetigungsgruen ergibt der Wert Sinn –
   Punkt fuer die Abstimmung mit Frau Schmidt. */
.hinweis--erfolg  { border-color: var(--c-status-hover); }
.hinweis--fehler  { border-color: var(--c-error); }
.hinweis--warnung { border-color: var(--c-warning); }

/* -------------------------------------------------------------------
   CARDS
   ------------------------------------------------------------------- */

.card {
  padding: var(--sp-6);
  background: var(--c-forms);
  border: 1px solid var(--c-border-card);
  border-radius: var(--radius);
}
.card__title { margin-bottom: var(--sp-4); }
.card__text  { font-size: var(--fs-body); }

/* -------------------------------------------------------------------
   FOOTER
   ------------------------------------------------------------------- */

.site-footer {
  padding-block: var(--sp-9) var(--sp-6);
  background: var(--c-secondary);
  color: var(--c-text-inverse);
}
.site-footer a { color: var(--c-text-inverse); text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }
.site-footer a:visited { color: var(--c-text-inverse); }

.footer__grid { display: grid; gap: var(--sp-7); }
@media (min-width: 700px)  { .footer__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .footer__grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; } }

.footer__title {
  margin-bottom: var(--sp-4);
  font-size: var(--fs-xsmall);
  font-weight: var(--fw-bold);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--c-neutral);
}

.footer__list { list-style: none; padding: 0; margin: 0; }
.footer__list li + li { margin-top: var(--sp-3); }
.footer__list a {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  font-size: var(--fs-small);
}

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3) var(--sp-6);
  margin-top: var(--sp-8);
  padding-top: var(--sp-5);
  border-top: 1px solid rgba(250, 250, 248, .18);
  font-size: var(--fs-xsmall);
  color: var(--c-neutral);
}

/* -------------------------------------------------------------------
   BADGES
   ------------------------------------------------------------------- */

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-5);
  background: var(--c-sage-light);
  border-radius: var(--radius-pill);
  font-size: var(--fs-xsmall);
  font-weight: var(--fw-semibold);
  color: var(--c-text);
}

.trust-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  list-style: none;
  padding: 0;
  margin: 0;
}

/* ===================================================================
   SEITENBAUSTEINE
   Nachgebaut aus "Gesicht-2. Unter-Falten" (462:648)
   =================================================================== */

/* -------------------------------------------------------------------
   ABSCHNITTSRHYTHMUS
   Die Vorlage wechselt durchgehend zwischen Offwhite und Sand.
   Farbe strukturiert, sie bildet keine Blöcke.
   ------------------------------------------------------------------- */

/* Nutzt das Token, statt einen eigenen Wert zu führen. Vorher stand
   hier eine eigene clamp-Formel – Änderungen an --sp-section blieben
   dadurch wirkungslos. */
.abschnitt { padding-block: var(--sp-section); }
.abschnitt--offwhite { background: var(--c-offwhite); }
.abschnitt--weiss { background: var(--c-faq-flaeche); }

/* Graustufen der Männerseiten. Kontrast gegen schwarzen Text liegt
   zwischen 12,4:1 und 16,7:1, gegen die Linkfarbe #891217 bei 5,7:1
   bis 7,7:1 – AA ist auf allen dreien erfuellt. */
.abschnitt--grau-hell   { background: var(--c-grau-hell); }
.abschnitt--grau-mittel { background: var(--c-grau-mittel); }
.abschnitt--grau-dunkel { background: var(--c-grau-dunkel); }

/* -------------------------------------------------------------------
   ABSCHNITT MIT FESTEM HINTERGRUNDBILD
   Das Startbild bleibt beim Scrollen stehen. Darüber liegt eine helle
   Schicht, damit der schwarze Text lesbar bleibt.
   ------------------------------------------------------------------- */
.abschnitt--bildfest {
  position: relative;
  background-image: url("../img/fotos/startbild-1860.jpg");
  background-size: cover;
  background-position: 50% 35%;
  background-attachment: fixed;
  isolation: isolate;
}
.abschnitt--bildfest::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(255, 255, 255, .88);
}

/* iOS ignoriert background-attachment: fixed und zeigt das Bild dann
   stark vergroessert. Auf Touchgeraeten bleibt es deshalb mitlaufend. */
@media (hover: none) {
  .abschnitt--bildfest { background-attachment: scroll; }
}

/* Vorteile: zwei Spalten, durch dünne Linien getrennt.
   Bewusst ohne gefüllte Kacheln – sechs helle Flächen würden das
   Hintergrundbild fast vollständig zudecken. */
.vorteile__kopf { max-width: 46rem; }
.vorteile__kopf p { margin-top: var(--sp-4); color: var(--c-text-secondary); }

/* Sechs Kacheln, auf Desktop drei nebeneinander in zwei Reihen.
   Weiß, aber durchscheinend – das Hintergrundbild bleibt sichtbar. */
.vorteile {
  display: grid;
  gap: var(--sp-5);
  margin-top: var(--sp-8);
}
@media (min-width: 620px)  { .vorteile { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .vorteile { grid-template-columns: repeat(3, 1fr); gap: var(--sp-6); } }

.vorteil {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--sp-5);
  padding: var(--sp-6) var(--sp-5);
  background: rgba(255, 255, 255, .72);
  border-radius: var(--radius);
  box-shadow: var(--shadow-btn);
}
.vorteil__symbol { color: var(--c-primary); }
.vorteil__symbol svg { width: 26px; height: 26px; display: block; }
.vorteil h3 { font-size: var(--fs-lead); font-weight: var(--fw-bold); }
.vorteil p  {
  margin-top: var(--sp-2);
  font-size: var(--fs-small);
  line-height: 1.6;
  color: var(--c-text-secondary);
}

.zitat--mittig { margin-inline: auto; text-align: center; }

/* Einblenden beim Scrollen. Die Klasse setzt site.js, nicht das
   Markup – ohne JavaScript bleibt alles sichtbar. Nur Deckkraft und
   transform werden bewegt, beides laeuft auf der GPU und loest kein
   Neuberechnen des Layouts aus. */
.einblenden {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .55s var(--ease), transform .55s var(--ease);
  will-change: opacity, transform;
}
.einblenden.ist-sichtbar {
  opacity: 1;
  transform: none;
  will-change: auto;
}
.abschnitt--sand     { background: var(--c-sand); }
.abschnitt--salbei   { background: var(--c-sage-light); }

/* Volle Containerbreite – die Abschnitte sollen alle gleich breit
   laufen. Für reinen Fließtext ist das eine lange Zeile; siehe die
   Notiz zu --container-text in tokens.css. */
.abschnitt__inhalt { max-width: none; }
.abschnitt__inhalt > * + * { margin-top: 1.5rem; }

/* Seit den Vorlagen vom Oktober tragen viele Baender mehrere Textbloecke
   und einen Medienblock. Zwischen zwei Bloecken gilt die Regel darueber
   nicht – die Ueberschrift des zweiten Blocks klebte deshalb am letzten
   Absatz des ersten. Hier der Abstand zwischen den Bloecken. */
/* Aufzaehlungen im Fliesstext. Bis v142 standen die Regionenlisten als
   Komma-Aufzaehlung im Absatz; die Vorlage zeigt sie als Liste. */
.abschnitt__inhalt ul { padding-left: 1.4rem; }
.abschnitt__inhalt li + li { margin-top: var(--sp-2); }

.abschnitt__inhalt + .abschnitt__inhalt,
.medienblock + .abschnitt__inhalt,
.abschnitt__inhalt + .medienblock,
.medienblock + .medienblock { margin-top: var(--sp-8); }

/* Zwischenüberschrift, Manrope Bold 18 */
.zwischentitel {
  font-size: var(--fs-lead);
  font-weight: var(--fw-bold);
  color: var(--c-text);
}

/* Seiten-H2, Manrope Medium 32 */
/* Wird sowohl auf h1 als auch auf h2 gesetzt. Die Schriftfamilie steht
   deshalb hier: h1 erbt sonst Newsreader aus base.css und saehe anders
   aus als dieselbe Ueberschrift eine Ebene tiefer. */
.seitentitel-h2 {
  font-family: var(--font-sans);
  font-size: var(--fs-h2-seite);
  font-weight: var(--fw-medium);
  line-height: 1.15;
  letter-spacing: 0;
  color: var(--c-text);
}

/* -------------------------------------------------------------------
   HERO mit Titelkasten
   ------------------------------------------------------------------- */

.hero { position: relative; background: var(--c-sand); }

/* Höhe wächst mit der Fensterbreite. Fest auf 460px gedeckelt ergab sich
   bei breiten Fenstern ein Streifen von über 5:1 – object-fit hat dann fast
   drei Viertel der Bildhöhe abgeschnitten, die Köpfe lagen ausserhalb.

   object-position 50% 40% haelt den Ausschnitt oben: die Koepfe liegen bei
   21–40 % Bildhoehe, der Wandschriftzug bei 26–36 %, ab 72 % kommt nur noch
   der unscharfe Tresen. Bei einem mittigen Ausschnitt fielen die Koepfe raus. */
.hero__bild {
  width: 100%;
  aspect-ratio: 393 / 360;
  max-height: 460px;
  object-fit: cover;
  object-position: 50% 40%;
  background: var(--c-neutral);
}

/* Höherer Ausschnitt für Motive, deren Kernaussage oben liegt:
   ein formatfüllendes Gesicht oder eine Behandlungsszene. Mit dem
   Standardwert 40 % schneidet der breite Hero die Stirn ab. */
.hero__bild--hoch { object-position: 50% 18%; }

/* Ausschnitt tiefer legen, wenn die Kernaussage nicht das Gesicht ist,
   sondern eine Koerperpartie: Bauch, Brust, Beine. 50 % zeigt die Mitte
   der Quelle, 70 % und 85 % schieben den Ausschnitt nach unten. */
/* Zwischenstufe zwischen dem Standard (40 %) und --tief: fuer Motive,
   bei denen Kopf und Brust zusammen fast die ganze sichtbare Hoehe
   fuellen und beide Enden knapp werden. */
.hero__bild--mitte  { object-position: 50% 45%; }
.hero__bild--tief   { object-position: 50% 70%; }
.hero__bild--tiefer { object-position: 50% 85%; }

/* Ausschnitt buendig am oberen Bildrand, fuer Motive, bei denen der
   Kopf direkt unter der Bildkante sitzt und unten nichts fehlen darf. */
.hero__bild--oben   { object-position: 50% 0; }


@media (min-width: 760px) {
  .hero__bild { aspect-ratio: 2 / 1; max-height: min(78vh, 700px); }
}
@media (min-width: 1600px) {
  .hero__bild { aspect-ratio: 5 / 2; max-height: min(78vh, 900px); }
}

/* Flacher beschnittener Aufmacher. Die Standardgeometrie laeuft am
   breiten Bildschirm auf 5:2 zu; von einer Quelle im Verhaeltnis 3:2
   bleiben dann nur 60 % der Bildhoehe stehen. Dieser Modifikator haelt
   den Kasten bei 16:9 und hebt den Hoehendeckel an, dadurch sind je
   nach Fensterhoehe 70–84 % der Quelle zu sehen. Fuer Aufmacher, bei
   denen die ganze Person zur Aussage gehoert. */
@media (min-width: 760px) {
  .hero--weit .hero__bild { aspect-ratio: 16 / 9; max-height: min(85vh, 820px); }
}
@media (min-width: 1600px) {
  .hero--weit .hero__bild { aspect-ratio: 16 / 9; max-height: min(85vh, 1000px); }
}

/* Der Kasten stand laut Figma auf top: 22%. Mit dem Empfangsfoto liegt
   er dort genau auf den Gesichtern – auf Mobil sind beide Köpfe komplett
   verdeckt. Unten links steht er über der unscharfen Tresenfläche, die
   Gesichter und der Wandschriftzug bleiben sichtbar.
   Rückbau: bottom-Zeile durch "top: 22%;" ersetzen. */
.hero__box {
  position: absolute;
  left: var(--gutter);
  bottom: var(--gutter);
  /* Auf Desktop breiter, damit "Natürlich schön, medizinisch sicher"
     über zwei Zeilen läuft statt über vier. */
  max-width: min(58%, 420px);
  padding: .75rem 1.25rem 1rem;
  background: var(--c-moss);
  border-radius: var(--radius);
}
.hero__box .hero__titel {
  font-family: var(--font-display);
  font-weight: var(--fw-regular);
  font-size: clamp(2.25rem, 1.6rem + 2.8vw, 3.5rem);
  line-height: 1.05;
  color: var(--c-text-inverse);
}
/* Mobil kleiner setzen, damit der Titel ueber zwei Zeilen laeuft statt
   ueber vier. Vier Zeilen machen den Kasten so hoch, dass er die beiden
   Portraets im Aufmacher verdeckt.

   Die 58 % oben greifen hier ohnehin nicht: "medizinisch" ist bei 36 px
   breiter als 58 % eines Handyschirms, und eine min-content-Breite
   laesst sich mit max-width nicht unterschreiten – der Kasten wird so
   breit wie das laengste Wort und bricht den Rest um. Deshalb beides:
   etwas mehr Breite und eine Schriftgroesse, bei der
   "medizinisch sicher" in eine Zeile passt. Gemessen von 320 bis
   759 px; zwei Zeilen ueberall, mit Reserve. */
@media (max-width: 759px) {
  .hero__box { max-width: min(78%, 420px); }
  .hero__box .hero__titel { font-size: clamp(1.625rem, .95rem + 3.4vw, 2.75rem); }
}
@media (min-width: 900px)  { .hero__box { max-width: min(72%, 620px); } }
@media (min-width: 1400px) { .hero__box { max-width: 700px; } }

.hero__box hr {
  margin-top: .625rem;
  border: 0;
  border-top: 1px solid var(--c-text-inverse);
}

/* -------------------------------------------------------------------
   BILD IM TEXTFLUSS
   ------------------------------------------------------------------- */

/* Zwei Modifikatoren fuer Motive, die der Medienblock sonst verdirbt.
   Die Regel weiter unten laesst das Bild dort auf Texthoehe wachsen und
   schneidet mit object-fit zu. Das passt fuer Motive um 3:2 – ein
   Panorama von 762x192 wuerde dabei aber fast vollstaendig weggeschnitten
   und der verbleibende Streifen aufs Dreifache gestreckt.

   --breit  Bild behaelt sein eigenes Seitenverhaeltnis und sitzt mittig
            in der Spalte. Fuer alles ab etwa 2,2:1.
   --schmal Deckelt zusaetzlich die Breite. Fuer Quellen unter 500 px,
            die sonst sichtbar weich wuerden.

   Beide koennen entfallen, sobald groessere Quellen im passenden
   Seitenverhaeltnis vorliegen. */
.inhaltsbild--schmal { max-width: 340px; margin-inline: auto; }

.inhaltsbild {
  width: 100%;
  aspect-ratio: 345 / 210;
  max-height: 340px;
  object-fit: cover;
  background: var(--c-neutral);
  border-radius: var(--radius);
}

/* Bild links, Text rechts.
   Genau zwei Kinder – Bild und Textblock – damit die Spalten sicher
   sitzen. Ein Grid mit vielen automatisch platzierten Geschwistern
   wuerde den Text sonst unter das Bild rutschen lassen.
   Unterhalb von 900 px bleibt es einspaltig, dort ist nebeneinander
   fuer beides zu schmal. */
.medienblock { display: grid; gap: var(--sp-7); }

/* Einspaltig: bei den gespiegelten Blöcken zuerst das Bild, dann der
   Text. Im Markup steht das Bild hinten, weil auf Desktop der Text
   links steht und die Vorlesereihenfolge dazu passen soll. Unter
   900 px liegen beide untereinander, dort ist das Umsortieren
   unkritisch – Bild und Text bleiben unmittelbar benachbart. */
@media (max-width: 899px) {
  .medienblock--bild-rechts > *:not(.abschnitt__inhalt) { order: -1; }
}

@media (min-width: 900px) {
  .medienblock {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: var(--sp-8);
    align-items: stretch;
  }
  /* Spiegelvariante: Text links, Bild rechts. Die Reihenfolge steht
     im Markup, nicht im CSS – sonst liefe die Vorlesereihenfolge
     gegen die sichtbare Anordnung. Hier wird nur die breitere Spalte
     auf die Textseite gelegt. */
  .medienblock--bild-rechts { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }

  /* Der Textblock füllt die volle Zeilenhöhe, sein Inhalt sitzt aber
     mittig. Sonst sammelt sich der Höhenunterschied zum Bild
     vollständig unter dem letzten Absatz. */
  .medienblock > .abschnitt__inhalt {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  /* Das Bild wächst auf die Höhe des Textblocks mit. Ein festes
     Seitenverhältnis wurde zwischenzeitlich getestet und wieder
     verworfen: neben kurzen Texten – etwa der Vorteile-Liste – blieb
     dann rechts eine leere Fläche stehen. min-height fängt den
     umgekehrten Fall ab, damit neben einem sehr kurzen Text kein
     Streifen entsteht. */
  .medienblock > picture { display: block; height: 100%; }
  .medienblock .inhaltsbild {
    aspect-ratio: auto;
    height: 100%;
    min-height: 300px;
    max-height: none;
  }

  /* Ausnahme: Motive, die ihr eigenes Seitenverhaeltnis behalten muessen.
     Das umgebende <picture> darf dann nicht auf volle Hoehe gehen, sonst
     klebt das Bild oben und darunter bleibt eine Luecke. */
  .medienblock > picture:has(.inhaltsbild--breit) { height: auto; align-self: center; }
  .medienblock .inhaltsbild--breit {
    height: auto;
    min-height: 0;
  }
}

/* -------------------------------------------------------------------
   BEHANDLUNGS-TEASER (Kategorieseite)
   ------------------------------------------------------------------- */

/* Breite Einstiegskachel über dem Raster: Bild rechts, Text links,
   auf Mobil untereinander. */
.grosskachel {
  display: grid;
  margin-top: var(--sp-7);
  background: var(--c-forms);
  border-radius: var(--radius);
  box-shadow: var(--shadow-btn);
  overflow: hidden;
  text-decoration: none;
  color: var(--c-text);
}
.grosskachel:visited { color: var(--c-text); }
/* Ab 900 px füllt das Bild die ganze Kachel, der Text liegt darauf.
   Darunter bleibt es bei Bild oben, Text darunter – über die schmale
   Spalte gelegt wäre der Text auf dem Foto nicht mehr lesbar. */
@media (min-width: 900px) {
  .grosskachel {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 420px;
  }

  .grosskachel > picture {
    position: absolute;
    inset: 0;
    display: block;
  }
  .grosskachel__bild { min-height: 0; }

  /* Heller Verlauf von links: hält den Text lesbar und lässt das Motiv
     auf der rechten Seite frei. */
  .grosskachel::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(90deg,
                rgba(250, 250, 248, .96) 0%,
                rgba(250, 250, 248, .88) 34%,
                rgba(250, 250, 248, 0)   62%);
  }

  .grosskachel__text {
    position: relative;
    z-index: 2;
    max-width: 48%;
    padding: var(--sp-9) var(--sp-8);
  }
}
/* Die breite Kachel ist deutlich flacher als das Motiv (rund 2,8:1 gegen
   16:9), der Zuschnitt greift also oben und unten an. Mittig zentriert
   blieb vom Gesicht nur die untere Haelfte – der Ausschnitt sitzt
   deshalb oben. */
.grosskachel__bild {
  width: 100%;
  height: 100%;
  min-height: 220px;
  object-fit: cover;
  object-position: center top;
  background: var(--c-neutral);
}
.grosskachel__text { padding: var(--sp-7) var(--sp-6); }
.grosskachel__text h3 { font-size: var(--fs-vorteile); font-weight: var(--fw-semibold); }
.grosskachel__text p { margin-top: var(--sp-4); }
.grosskachel__text .btn { margin-top: var(--sp-6); }

.teaser-liste { display: grid; gap: 1.5rem; }
@media (min-width: 700px)  { .teaser-liste { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .teaser-liste--4 { grid-template-columns: repeat(4, 1fr); } }
/* Gleicher Umbruchpunkt wie die zweispaltige Vorgabe, sonst stuenden
   drei Kacheln zwischen 700 und 900 px als 2 plus 1 da. */
@media (min-width: 760px)  { .teaser-liste--3 { grid-template-columns: repeat(3, 1fr); } }

/* Schatten wie bei den Buttons, auf allen Seiten. */
.teaser-karte,
.bewertung,
.anliegen__karte { box-shadow: var(--shadow-btn); }

.teaser-karte {
  display: flex;
  flex-direction: column;
  background: var(--c-forms);
  border-radius: var(--radius);
  overflow: hidden;
}
.teaser-karte img,
.teaser-karte .platzhalter {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  background: var(--c-neutral);
}
/* Das Kachelbild fuehrt zum selben Ziel wie der Link darunter. Der Anker
   braucht display:block, sonst entsteht unter dem Bild eine Zeilenluecke.
   Fuer Screenreader und Tastatur ist er ausgeblendet (aria-hidden,
   tabindex="-1") – sonst stuenden je Kachel zwei gleiche Links. */
.teaser-karte__bildlink,
.teaser-karte__bildlink picture,
.teaser-karte__bildlink img { display: block; }
.teaser-karte__text { padding: 1.25rem; flex: 1; display: flex; flex-direction: column; }
.teaser-karte__text h3 { font-size: var(--fs-lead); font-weight: var(--fw-bold); }
.teaser-karte__text p { margin-top: .75rem; font-size: var(--fs-body); }
.teaser-karte__text .btn { margin-top: auto; align-self: flex-start; padding-top: 1rem; }

/* -------------------------------------------------------------------
   KURZINFO-TABELLE (Behandlungsseite)
   Wichtig für Suchmaschinen: strukturierte Eckdaten
   ------------------------------------------------------------------- */

.kurzinfo {
  width: 100%;
  border-collapse: collapse;
  background: var(--c-forms);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-btn);
  font-size: var(--fs-body);
}
.kurzinfo th,
.kurzinfo td {
  padding: var(--sp-5) var(--sp-6);
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--c-border-card);
}
.kurzinfo tr:last-child th,
.kurzinfo tr:last-child td { border-bottom: 0; }

/* Bezeichnung zurückgenommen, Wert in Textfarbe – so führt der Blick
   zuerst auf die Angabe und nicht auf die Beschriftung. */
.kurzinfo th {
  width: 38%;
  font-size: var(--fs-small);
  font-weight: var(--fw-bold);
  color: var(--c-text-secondary);
}
.kurzinfo tbody tr { transition: background var(--dur-fast) var(--ease); }
.kurzinfo tbody tr:hover { background: rgba(137, 18, 23, .035); }
.kurzinfo ul { margin: 0; padding-left: 1.1rem; }
.kurzinfo li + li { margin-top: var(--sp-2); }

/* Unter 620 px steht die Bezeichnung über dem Wert. Nebeneinander
   erzwingen die längeren Werte sonst eine Mindestbreite, mit der die
   Seite auf schmalen Geräten waagerecht scrollbar wird.
   Die role-Attribute im Markup halten die Tabellensemantik aufrecht,
   die display:block sonst verliert. */
@media (max-width: 619px) {
  .kurzinfo,
  .kurzinfo tbody,
  .kurzinfo tr,
  .kurzinfo th,
  .kurzinfo td { display: block; width: auto; }

  .kurzinfo tr {
    padding: var(--sp-5) var(--sp-5);
    border-bottom: 1px solid var(--c-border-card);
  }
  .kurzinfo tr:last-child { border-bottom: 0; }
  .kurzinfo th,
  .kurzinfo td { padding: 0; border: 0; }
  .kurzinfo td { margin-top: var(--sp-2); }
  .kurzinfo tbody tr:hover { background: none; }
}

/* -------------------------------------------------------------------
   ANLIEGEN-KARTEN (Startseite)
   ------------------------------------------------------------------- */

.anliegen { display: grid; gap: 1rem; }
@media (min-width: 620px)  { .anliegen { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .anliegen { grid-template-columns: repeat(4, 1fr); } }

.anliegen__karte {
  display: flex;
  align-items: center;
  min-height: 85px;
  padding: 1rem 1.125rem;
  background: var(--c-forms);
  border: 1px solid var(--c-border-card);
  border-radius: var(--radius);
  font-size: var(--fs-body);
  color: var(--c-text);
  text-decoration: none;
  box-shadow: var(--shadow-card);
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
/* :visited muss mit. Die Basisregel a:visited hat als a:visited hoehere
   Spezifitaet als die Klasse – ohne diese Zeile werden bereits besuchte
   Kacheln blasser als die uebrigen. */
/* Variante mit Titel und Erläuterung statt nur einer Zeile. */
.anliegen__karte--mit-text { display: grid; gap: var(--sp-2); align-content: start; }
.anliegen__karte--mit-text strong { font-size: var(--fs-lead); }
.anliegen__karte--mit-text span { font-size: var(--fs-small); color: var(--c-text-secondary); }
.anliegen__karte--mit-text:hover span,
.anliegen__karte--mit-text:focus-visible span { color: inherit; }

.anliegen__karte:visited { color: var(--c-text); }
.anliegen__karte:hover,
.anliegen__karte:focus-visible { background: var(--c-primary); color: #FFFFFF; }
.anliegen__karte:hover:visited,
.anliegen__karte:focus-visible:visited { color: #FFFFFF; }

/* -------------------------------------------------------------------
   ZITATBLOCK
   ------------------------------------------------------------------- */

.zitat { max-width: none; }
.zitat blockquote {
  margin: 1.25rem 0 0;
  font-size: var(--fs-lead);
  line-height: 1.5;
}
.zitat figcaption { margin-top: 1rem; font-size: var(--fs-small); color: var(--c-text-secondary); }

/* -------------------------------------------------------------------
   ARZTVORSTELLUNG
   ------------------------------------------------------------------- */

.arzt { display: grid; gap: 1.5rem; }
.arzt + .arzt { margin-top: var(--sp-8); }
@media (min-width: 760px) { .arzt { grid-template-columns: 1fr 1fr; align-items: center; } }
/* Einspaltig steht das Bild sonst unter dem Text – oben gelesen zu werden
   ist fuer ein Portraet die natuerlichere Reihenfolge. */
@media (max-width: 759px) { .arzt--bild-rechts > picture { order: -1; } }
.arzt__bild {
  width: 100%;
  aspect-ratio: 4 / 5;
  max-height: 480px;
  object-fit: cover;
  background: var(--c-neutral);
  border-radius: var(--radius);
}
/* Das Zitat führt den Block an, der Name folgt darunter – wie in der
   Vorlage. */
.arzt__zitat {
  margin: 0 0 var(--sp-7);
  font-family: var(--font-display);
  font-size: clamp(1.375rem, 1rem + 1.6vw, 2rem);
  font-style: italic;
  line-height: var(--lh-tight);
  color: var(--c-text);
}
.arzt__name { font-size: var(--fs-vorteile); font-weight: var(--fw-semibold); }
.arzt__rolle { margin-top: .25rem; font-size: var(--fs-small); color: var(--c-text-secondary); }

/* -------------------------------------------------------------------
   BEWERTUNGEN
   ------------------------------------------------------------------- */

/* Waagerechte Spur mit Einrastpunkten. Ohne JavaScript bleibt sie ein
   normaler Scrollbereich – wischen und Trackpad funktionieren, nur die
   Knoepfe fehlen. Die legt site.js an. */
.bewertungen {
  display: grid;
  grid-auto-flow: column;
  /* Einspaltig genau eine Karte, ohne Anschnitt der naechsten. Pfeile
     und Zaehler zeigen ohnehin an, dass es weitergeht. */
  grid-auto-columns: 100%;
  gap: 1rem;
  overflow-x: auto;
  /* Karten behalten ihre eigene Hoehe. Ohne das wuerden beim Aufklappen
     einer Karte alle Nachbarn mitwachsen und leer dastehen. */
  align-items: start;
  scroll-snap-type: x mandatory;
  padding-block: 4px 12px;   /* Platz fuer den Kartenschatten */
  scrollbar-width: none;
}
.bewertungen::-webkit-scrollbar { display: none; }

@media (min-width: 620px)  { .bewertungen { grid-auto-columns: calc((100% - 1rem) / 2); } }
@media (min-width: 1000px) { .bewertungen { grid-auto-columns: calc((100% - 2rem) / 3); } }

.bewertung {
  display: flex;
  flex-direction: column;
  scroll-snap-align: start;
  padding: 1.25rem;
  background: var(--c-forms);
  border-radius: var(--radius);
}
.bewertung__kopf { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); }
.bewertung__google { flex: 0 0 auto; }
.bewertung__sterne { color: var(--c-stern); letter-spacing: .1em; font-size: 1.15rem; }
.bewertung__text { margin-top: .75rem; font-size: var(--fs-body); }
/* margin-top: auto haelt die Quellzeile bei ungleich langen Zitaten unten */
/* Gekürzter Zustand. Die Klasse setzt site.js, nicht das Markup –
   ohne JavaScript steht der vollstaendige Text da, und die Suchmaschine
   sieht ihn ohnehin immer. */
.bewertung__text--gekuerzt {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.bewertung__mehr {
  align-self: flex-start;
  margin-top: var(--sp-3);
  padding: 0;
  border: 0;
  background: none;
  color: var(--c-primary);
  font-size: var(--fs-xsmall);
  font-weight: var(--fw-bold);
  cursor: pointer;
}
.bewertung__mehr:hover { text-decoration: underline; }

.bewertung__quelle { margin-top: auto; padding-top: 1rem; font-size: var(--fs-xsmall); color: var(--c-text-secondary); }

/* Steuerung */
/* Ohne diese Zeile wuerde display:flex das hidden-Attribut ueberstimmen,
   das site.js setzt, wenn alle Karten ohnehin nebeneinander passen. */
.slider-steuerung[hidden] { display: none; }

.slider-steuerung {
  display: flex;
  align-items: center;
  gap: .25rem;
  margin-top: 1rem;
}
.slider-knopf {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 1px solid var(--c-primary);
  border-radius: 50%;
  background: transparent;
  color: var(--c-primary);
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
}
.slider-knopf:hover:not(:disabled) { background: var(--c-primary); color: var(--c-forms); }
.slider-knopf:disabled { border-color: var(--c-primary-disabled); color: var(--c-primary-disabled); cursor: default; }

/* Auffangnetz: falls doch einmal zu viele Punkte entstehen, brechen
   sie um, statt die Seite breiter zu machen. */
.slider-steuerung { flex-wrap: wrap; }

.slider-punkte { display: flex; flex-wrap: wrap; margin-left: .5rem; }

/* Unter 760 px der Zaehler, darueber die Punkte. */
.slider-punkte  { display: none; }
.slider-zaehler {
  margin-left: var(--sp-4);
  font-family: var(--font-display);
  font-size: var(--fs-small);
  color: var(--c-text-secondary);
}
@media (min-width: 760px) {
  .slider-punkte  { display: flex; }
  .slider-zaehler { display: none; }
}
.slider-punkt {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.slider-punkt::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--c-neutral);
}
.slider-punkt[aria-current="true"]::before { background: var(--c-primary); }

@media (prefers-reduced-motion: reduce) {
  .bewertungen { scroll-behavior: auto; }
}

/* -------------------------------------------------------------------
   BRotkrumen
   ------------------------------------------------------------------- */

.brotkrumen { padding-block: .75rem; font-size: var(--fs-xsmall); }
/* Die Leiste uebernimmt die Flaeche des Abschnitts darunter, damit
   zwischen Aufmacher und erstem Band keine fremde Farbe steht. */
.brotkrumen--offwhite    { background: var(--c-offwhite); }
.brotkrumen--sand        { background: var(--c-sand); }
.brotkrumen--grau-hell   { background: var(--c-grau-hell); }
.brotkrumen--grau-mittel { background: var(--c-grau-mittel); }
.brotkrumen--grau-dunkel { background: var(--c-grau-dunkel); }
.brotkrumen ol {
  display: flex;
  flex-wrap: wrap;
  gap: .375rem;
  list-style: none;
  margin: 0; padding: 0;
}
.brotkrumen li + li::before { content: "›"; margin-right: .375rem; color: var(--c-text-secondary); }
.brotkrumen a { color: var(--c-text-secondary); text-decoration: none; }
.brotkrumen a:hover { color: var(--c-primary); }
.brotkrumen [aria-current] { color: var(--c-text); }

/* -------------------------------------------------------------------
   UNTERE LEISTE
   Figma setzt sie fest am Bildschirmrand, mit Menü, Mail und Start.
   ------------------------------------------------------------------- */

.leiste {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 80;
  height: var(--footer-bar-h);
  background: var(--c-primary);
}
.leiste__inhalt {
  display: flex;
  align-items: center;
  justify-content: space-around;
  height: 100%;
  max-width: 420px;
  margin-inline: auto;
}
.leiste a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--tap-target);
  height: var(--tap-target);
  color: var(--c-text-inverse);
}
.leiste svg { width: 26px; height: 26px; }

/* Platz schaffen, damit die Leiste nichts verdeckt.
   Die Leiste bleibt bis 1279 px stehen – erst ab 1280 px traegt der
   Terminbutton in der Kopfleiste dieselbe Aufgabe. Darunter waere sonst
   gar kein schneller Kontaktweg mehr sichtbar. */
body { padding-bottom: var(--footer-bar-h); }
@media (min-width: 1280px) {
  .leiste { display: none; }
  body { padding-bottom: 0; }
}

/* -------------------------------------------------------------------
   SCHWEBENDER DOCTOLIB-KNOPF

   Sichtbar erst ab 1280 px – also genau dort, wo die untere Leiste
   verschwindet. Darunter fuehrt deren erstes Symbol bereits zu Doctolib;
   zwei Buchungseinstiege gleichzeitig waeren doppelt, und auf dem Telefon
   verdeckt der Knopf ein Viertel des Aufmacherbildes.

   Die uebrigen Eigenschaften des Knopfes stehen als style-Attribut in
   includes/doctolib-knopf.php, so wie Doctolib sie vorgibt.
   ------------------------------------------------------------------- */
.doctolib-knopf { display: none; }
@media (min-width: 1280px) {
  .doctolib-knopf { display: block; }
}

/* Der Schriftzug als Text. Vorher stand hier das Logo von doctolib.de –
   ein externer Abruf auf jeder Seite, bei dem die IP-Adresse des
   Besuchers dorthin geht. Fuer ein reines Zierelement ist das weder
   noetig noch ohne Einwilligung zulaessig. Hoehe wie beim Logo, damit
   der Knopf seine Masse behaelt. Sobald die Bilddatei oertlich
   vorliegt, kann sie hier wieder als background-image stehen. */
.doctolib-knopf__logo {
  display: block;
  margin: 8px auto 0;
  font-size: 13px;
  line-height: 15px;
  font-weight: var(--fw-semibold);
  letter-spacing: .01em;
}

/* -------------------------------------------------------------------
   ANFAHRT MIT KARTE
   Das iframe traegt data-consent, damit ein spaeter eingebauter
   Cookie-Banner es gezielt blockieren und freigeben kann.
   ------------------------------------------------------------------- */

.anfahrt { display: grid; gap: 1.875rem; }
@media (min-width: 760px) {
  /* Karte breit, Angaben schmal daneben – zusammen über die volle
     Containerbreite. */
  .anfahrt { grid-template-columns: minmax(0, 2.3fr) minmax(0, 1fr); align-items: start; }
}

/* Kein aspect-ratio zusammen mit max-height: der Browser wuerde
   sonst die Breite mitziehen und die Karte schrumpfen lassen.
   Stattdessen volle Breite, Hoehe ueber clamp. */
.karte {
  width: 100%;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--c-sage-light);
}
/* Platzhalter, solange die Einwilligung fuer die Karte fehlt. Gleiche
   Flaeche wie das iframe, damit beim Zustimmen nichts springt. */
.karte__platzhalter {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: .75rem;
  aspect-ratio: 16 / 9;
  padding: var(--sp-6);
  text-align: center;
  font-size: var(--fs-small);
}
.karte__platzhalter[hidden] { display: none; }
.karte__platzhalter p { margin: 0; }
.karte__hinweis { font-size: var(--fs-xsmall); color: var(--c-text-secondary); }
@media (max-width: 759px) {
  .karte__platzhalter { aspect-ratio: 4 / 3; padding: var(--sp-5); }
}

/* Einwilligungsbanner: unten am Fensterrand, ueber dem Inhalt.
   z-index 85 liegt ueber der unteren Leiste (80), aber unter dem
   Burger-Overlay (90) – sonst stuende das Banner im offenen Menue.
   Bis 1279 px steht die Leiste fest unten: so viel Platz bleibt frei,
   sonst verdeckt sie den untersten Knopf. */
.einwilligung {
  position: fixed;
  inset-inline: 0;
  bottom: var(--footer-bar-h);
  z-index: 85;
  padding: var(--sp-4);
  display: flex;
  justify-content: center;
  pointer-events: none;   /* nur der Kasten faengt Klicks ab */
}
@media (min-width: 1280px) {
  .einwilligung { bottom: 0; }
}
.einwilligung[hidden] { display: none; }

.einwilligung__kasten {
  pointer-events: auto;
  width: 100%;
  max-width: 41rem;
  background: var(--c-offwhite);
  border: 1px solid var(--c-faq-rand);
  border-radius: var(--radius-lg);
  box-shadow: 0 10px 34px rgb(0 0 0 / .18), 0 2px 6px rgb(0 0 0 / .08);
  padding: var(--sp-6);
  font-size: var(--fs-small);
  animation: einwilligung-auf var(--dur-slow, .3s) var(--ease) both;
  /* Auf kleinen Schirmen kann der Kasten hoeher werden als das
     Fenster. Dann scrollt sein Inhalt, statt unten abgeschnitten zu
     werden. 100dvh statt 100vh: die Adressleiste mobiler Browser
     faehrt ein und aus. */
  max-height: calc(100dvh - var(--header-h) - var(--footer-bar-h) - var(--sp-5));
  overflow-y: auto;
  overscroll-behavior: contain;
}
@supports not (height: 100dvh) {
  .einwilligung__kasten {
    max-height: calc(100vh - var(--header-h) - var(--footer-bar-h) - var(--sp-5));
  }
}
@media (prefers-reduced-motion: reduce) {
  .einwilligung__kasten { animation: none; }
}
@keyframes einwilligung-auf {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}

/* Kopfzeile: Bildmarke links, Titel daneben, darunter eine Haarlinie
   in Burgunder – dieselbe Trennung wie bei den Titeltrennern. */
.einwilligung__kopf {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding-bottom: var(--sp-4);
  margin-bottom: var(--sp-4);
  border-bottom: 1px solid rgb(137 18 23 / .18);
}
.einwilligung__logo {
  display: block;
  width: auto;
  height: 2.5rem;
  flex: 0 0 auto;
}
.einwilligung__titel {
  margin: 0;
  font-weight: var(--fw-semibold);
  font-size: var(--fs-small);
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--c-primary);
}
.einwilligung__kasten p { margin: 0 0 .75rem; }
.einwilligung__kasten p:last-of-type { margin-bottom: 0; }

/* Die beiden Wahlmoeglichkeiten als eigene Flaechen – das trennt sie
   sichtbar vom Fliesstext und macht die ganze Zeile anklickbar. */
.einwilligung__liste {
  list-style: none;
  margin: var(--sp-5) 0 0;
  padding: 0;
  display: grid;
  gap: .625rem;
}
.einwilligung__liste label {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .75rem;
  align-items: start;
  cursor: pointer;
  padding: var(--sp-4);
  background: #FFFFFF;
  border: 1px solid var(--c-faq-rand);
  border-radius: var(--radius);
  transition: border-color var(--dur-fast) var(--ease),
              box-shadow var(--dur-fast) var(--ease);
}
.einwilligung__liste label:hover {
  border-color: var(--c-primary);
  box-shadow: var(--shadow-focus);
}
.einwilligung__liste input,
.einwilligung-einstellungen input {
  accent-color: var(--c-primary);   /* Haken in Burgunder statt Systemblau */
  width: 1.05rem;
  height: 1.05rem;
  margin: .15rem 0 0;
  cursor: pointer;
}
.einwilligung__liste label:focus-within {
  border-color: var(--c-primary);
  box-shadow: var(--shadow-focus);
}
.einwilligung__liste strong {
  display: block;
  margin-bottom: .15rem;
  font-weight: var(--fw-semibold);
  color: var(--c-primary);
}

/* Haften unten im Kasten: muss der Inhalt auf kleinen Schirmen
   scrollen, bleiben die drei Knoepfe trotzdem sichtbar. Ohne Scrollen
   verhaelt sich sticky wie statisch – die Regel kostet dort nichts. */
.einwilligung__knoepfe {
  position: sticky;
  bottom: calc(var(--sp-6) * -1);
  display: flex;
  flex-wrap: wrap;
  gap: .625rem;
  margin-top: var(--sp-5);
  padding: var(--sp-4) 0 var(--sp-1);
  background: linear-gradient(to bottom,
              rgb(247 245 242 / 0) 0,
              var(--c-offwhite) .75rem,
              var(--c-offwhite) 100%);
}
/* Alle drei gleich gross und in einem Zug erreichbar: Ablehnen darf
   nicht schwerer zu finden sein als Zustimmen. Unterschieden sind sie
   nur durch Flaeche gegen Rahmen, beide in der Markenfarbe. */
.einwilligung__knoepfe .btn {
  flex: 1 1 10rem;
  padding-inline: var(--sp-4);
}
@media (max-width: 519px) {
  .einwilligung__knoepfe .btn { flex-basis: 100%; }
  .einwilligung__kasten { padding: var(--sp-5); font-size: var(--fs-xsmall); }
  .einwilligung__knoepfe { bottom: calc(var(--sp-5) * -1); }
  .einwilligung__logo { height: 2.125rem; }
  .einwilligung__liste { margin-top: var(--sp-4); }
  .einwilligung__liste label { padding: var(--sp-3) var(--sp-4); }
  /* Auf schmalen Schirmen zaehlt jede Zeile: der Satz ist ein Hinweis,
     keine Pflichtangabe – die Datenschutzerklaerung bleibt verlinkt. */
  .einwilligung__zusatz { display: none; }
}

/* Umrissknopf – Markenfarbe als Rahmen statt als Flaeche. Ergaenzt
   btn--secondary (Taupe) um eine Fassung in Burgunder. */
.btn--umriss,
.btn--umriss:visited {
  background: transparent;
  border-color: var(--c-primary);
  color: var(--c-primary);
  box-shadow: none;
}
.btn--umriss:hover,
.btn--umriss:focus-visible {
  background: var(--c-btn-sec-hover);
  border-color: var(--c-primary-hover);
  color: var(--c-primary-hover);
}
.btn--umriss:active {
  background: var(--c-btn-sec-pressed);
  transform: translateY(1px);
}

/* Schalter in der Datenschutzerklaerung */
.einwilligung-einstellungen {
  list-style: none;
  margin: var(--sp-4) 0;
  padding: 0;
  display: grid;
  gap: .75rem;
}
.einwilligung-einstellungen label {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .625rem;
  align-items: start;
  cursor: pointer;
}

/* hidden schlaegt display:block, sonst haelt das ungeladene iframe
   unter dem Platzhalter weiter seine Flaeche frei. */
.karte iframe[hidden] { display: none; }
.karte iframe {
  display: block;
  width: 100%;
  /* Breitformat statt fester Höhe: die Karte folgt der Spaltenbreite.
     Auf schmalen Schirmen etwas höher, sonst wird sie zum Streifen. */
  aspect-ratio: 16 / 9;
  height: auto;
  border: 0;
}
/* Einspaltig ist 16:9 zu flach – dort etwas höher. */
@media (max-width: 759px) { .karte iframe { aspect-ratio: 4 / 3; } }

.anfahrt__block + .anfahrt__block { margin-top: 1.5rem; }
.anfahrt__block h3 {
  margin-bottom: .5rem;
  font-size: var(--fs-xsmall);
  font-weight: var(--fw-bold);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--c-text-secondary);
}
/* Beide Knöpfe gleich breit und zusammen so breit wie die Spalte –
   der rechte schließt damit bündig mit dem Seitenraster ab. */
.anfahrt__aktionen {
  display: grid;
  /* Zwei Knöpfe nebeneinander, sobald jeder mindestens 9.5rem bekommt –
     darunter untereinander, sonst passt "Route planen" nicht hinein. */
  grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
  gap: .75rem;
  margin-top: 1.875rem;
}
.anfahrt__aktionen .btn {
  width: 100%;
  justify-content: center;
  text-align: center;
}

/* Querformat-Foto im Textblock – das Hochformat von .arzt__bild
   wuerde die Aufnahme sonst beschneiden. */
.arzt__bild--foto {
  aspect-ratio: 3 / 2;
  max-height: 420px;
}
.arzt picture { display: block; }

/* Teamkarten auf /unsere-aerzte/: zwei Personen nebeneinander, Bild
   oben, Name darunter. Anders als der Arztblock traegt diese Form auch
   kurze Eintraege, ohne dass eine halbe Zeile leer bleibt. */
.team-raster {
  display: grid;
  /* Einspaltig stossen Name und naechstes Foto sonst fast aneinander –
     der Abstand zwischen zwei Personen muss groesser sein als der
     zwischen Foto und zugehoerigem Namen, sonst liest sich das Raster
     falsch herum. Nebeneinander genuegt die kleinere Luecke. */
  gap: var(--sp-8);
  margin-top: var(--sp-7);
}
@media (min-width: 760px) {
  .team-raster {
    grid-template-columns: 1fr 1fr;
    align-items: start;
    gap: var(--sp-6);
    margin-top: var(--sp-6);
  }
}
.team-karte picture { display: block; }
.team-karte__bild {
  width: 100%;
  aspect-ratio: 3 / 2;
  max-height: 380px;
  object-fit: cover;
  background: var(--c-neutral);
  border-radius: var(--radius);
}
.team-karte .arzt__name { margin-top: var(--sp-5); }

/* -------------------------------------------------------------------
   SUCHE
   Figma "Suche" (371:545) und "Suche ohne Ergebnis" (371:579).

   Die Klappe haengt unter der Kopfleiste und schiebt den Inhalt nicht
   weg – sonst springt die Seite bei jedem Klick auf die Lupe.

   Ohne JavaScript fehlt .suche--schaltbar: dann steht die Klappe
   offen im Fluss und das Formular geht an /suche/.
   ------------------------------------------------------------------- */

.suche {
  background: var(--c-offwhite);
  border-top: 1px solid var(--c-border-card);
  box-shadow: 0 14px 28px -18px rgb(0 0 0 / .28);
}

.suche--schaltbar {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  transform: translateY(-8px);
  opacity: 0;
  visibility: hidden;
  /* visibility springt, statt mitzulaufen: beim Schliessen erst am Ende
     der Blende, beim Oeffnen sofort. Liefe sie mit, waere das Feld im
     Moment des Aufklappens noch unsichtbar und koennte keinen Fokus
     annehmen – der Cursor landete nicht in der Suche. */
  transition: opacity var(--dur) var(--ease),
              transform var(--dur) var(--ease),
              visibility 0s var(--ease) var(--dur);
}
.suche--schaltbar[data-open="true"] {
  transform: none;
  opacity: 1;
  visibility: visible;
  transition: opacity var(--dur) var(--ease),
              transform var(--dur) var(--ease),
              visibility 0s var(--ease) 0s;
}

.suche__form {
  padding-top: var(--sp-6);
  padding-bottom: var(--sp-6);
}

.suche__zeile {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .625rem;
}

/* Lupe im Feld. Das Feld waechst, der Knopf behaelt seine Breite. */
.suche__symbol {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  color: var(--c-primary);
}

.suche__eingabe {
  flex: 1 1 12rem;
  min-width: 0;
  min-height: var(--tap-target);
  padding: .625rem .875rem;
  font: inherit;
  color: var(--c-text);
  background: var(--c-forms);
  border: 1px solid var(--c-input-border);
  border-radius: var(--radius);
  -webkit-appearance: none;
  appearance: none;
}
.suche__eingabe::placeholder { color: var(--c-text-secondary); }

/* Das Kreuz zum Leeren kommt vom Browser und waere sonst blau. */
.suche__eingabe::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  cursor: pointer;
  background: currentColor;
  opacity: .5;
  mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2.4" stroke-linecap="round"><path d="M6 6l12 12M18 6 6 18"/></svg>') center / contain no-repeat;
}
.suche__eingabe::-webkit-search-cancel-button:hover { opacity: 1; }
.suche__eingabe:focus-visible {
  outline: 2px solid var(--c-primary);
  outline-offset: 2px;
}

.suche__knopf { flex: 0 0 auto; }

.suche__hinweis {
  margin: .625rem 0 0;
  font-size: .8125rem;
  color: var(--c-text-secondary);
}

/* Trefferliste. Bei vielen Treffern scrollt sie statt die halbe
   Seite zu verdecken. */
.suche__treffer {
  margin-top: var(--sp-5);
  max-height: min(60vh, 28rem);
  overflow-y: auto;
}

.suche__liste {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: .5rem;
}

.suche__eintrag-link {
  display: grid;
  gap: .1875rem;
  padding: .75rem .875rem;
  text-decoration: none;
  color: var(--c-text);
  background: var(--c-faq-flaeche);
  border: 1px solid var(--c-border-card);
  border-radius: var(--radius);
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.suche__eintrag-link:hover,
.suche__eintrag-link:focus-visible {
  background: var(--c-sand);
  border-color: var(--c-primary);
}

.suche__eintrag-art {
  font-size: .6875rem;
  font-weight: var(--fw-bold);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--c-primary);
}

.suche__eintrag-titel {
  font-weight: var(--fw-medium);
  line-height: 1.35;
}

.suche__eintrag-teaser {
  font-size: .9375rem;
  line-height: 1.6;
  color: var(--c-text-secondary);
}

.suche__leer,
.suche__mehr {
  margin: 0;
  font-size: .9375rem;
  color: var(--c-text-secondary);
}
.suche__mehr { margin-top: .625rem; }

/* Der Schalter zeigt die Lupe, solange die Klappe zu ist, danach das
   Kreuz. Ohne JavaScript bleibt die Lupe stehen – das Kreuz ohne
   Funktion waere irritierend. */
.suche-schalter__kreuz { display: none; }
.suche-schalter[aria-expanded="true"] .suche-schalter__lupe { display: none; }
.suche-schalter[aria-expanded="true"] .suche-schalter__kreuz { display: block; }

/* Ohne JavaScript steht die Klappe im Fluss. Die Kopfleiste hat eine
   feste Hoehe – sie muss dann mitwachsen, sonst laeuft das Feld
   unten aus der Leiste heraus. */
.site-header:has(.suche:not(.suche--schaltbar)) { height: auto; }
.site-header:has(.suche:not(.suche--schaltbar)) .site-header__inner { height: var(--header-h); }

/* Ergebnisseite /suche/ ------------------------------------------- */

.suche__text {
  max-width: var(--container-text);
  margin: var(--sp-5) 0 0;
}

.suche__zwischentitel {
  margin: var(--sp-8) 0 var(--sp-5);
  font-family: var(--font-display);
  font-size: 1.375rem;
  font-weight: var(--fw-regular);
}

.suche__wege {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin-top: var(--sp-6);
}

/* Auf der Ergebnisseite darf die Liste atmen – dort ist Platz. */
main .suche__liste {
  margin-top: var(--sp-6);
  gap: .75rem;
  max-width: var(--container-text);
}
main .suche__eintrag-link { padding: var(--sp-5); }

/* Auf /suche/ steht das Feld fest im Fluss, nicht als Klappe. Die
   Kopfleiste waechst dafuer mit – dieselbe Regel wie ohne JavaScript. */
.site-header:has(.suche--fest) { height: auto; }
.site-header:has(.suche--fest) .site-header__inner { height: var(--header-h); }
.suche-schalter--aus { visibility: hidden; }

/* -------------------------------------------------------------------
   AUFMACHER OHNE FOTO

   Nasenkorrektur und Ohranlegeoperation haben kein Motiv in
   brauchbarer Aufloesung. Die Hoehe des Aufmachers kommt sonst vom
   Bild – hier traegt sie die Flaeche selbst. Bewusst niedriger als
   ein Bildaufmacher: so wirkt sie wie ein ruhiger Seitenkopf und
   nicht wie ein Bild, das nicht geladen hat.

   Sobald ein Foto vorliegt: Klasse entfernen und bild() einsetzen
   wie auf den uebrigen Behandlungsseiten.
   ------------------------------------------------------------------- */

.hero--ohne-bild {
  display: flex;
  align-items: flex-end;
  min-height: 13.75rem;
  background: var(--c-sand);
}
@media (min-width: 760px)  { .hero--ohne-bild { min-height: 17.5rem; } }
@media (min-width: 1400px) { .hero--ohne-bild { min-height: 20rem; } }

/* Ohne Bild gibt es nichts, worauf der Kasten liegen koennte – er
   steht im Fluss statt absolut. */
.hero--ohne-bild .hero__box {
  position: static;
  margin: var(--gutter);
}

/* Lange Einzelwoerter im Aufmachertitel.

   "Schamlippenkorrektur" ist ein Wort ohne Bruchstelle und sprengte bei
   320 px den Titelkasten um 40 px. Der Titel dieser Seite heisst jetzt
   kuerzer; die folgende Regel ist die Absicherung fuer den naechsten
   langen Begriff, den jemand eintraegt. Silbentrennung zuerst, der
   harte Umbruch nur als letzter Ausweg. */
.hero__titel {
  hyphens: auto;
  overflow-wrap: break-word;
}

/* Auf sehr schmalen Schirmen war der Kasten mit min(58%, 420px) nur
   186 px breit – darin bricht schon ein mittellanges Wort mitten
   entzwei. Unter 480 px bekommt er mehr Raum; das Bild dahinter
   bleibt trotzdem sichtbar. */
@media (max-width: 479px) {
  .hero__box { max-width: min(82%, 420px); }
}

/* -------------------------------------------------------------------
   SOZIALE NETZWERKE

   Im Footer unter den uebrigen Kontaktwegen. Die Flaechen sind
   44 x 44 px gross – kleiner waeren sie auf dem Telefon kaum zu
   treffen; die Marke darin bleibt mit 20 px dezent.

   Farbe: Die Symbole erben die helle Schriftfarbe des Footers und
   werden beim Zeigen weiss. Die Markenfarben der Anbieter wuerden auf
   dem Burgunder nicht nur schlecht aussehen, sondern das Band auch in
   eine Linkleiste verwandeln.
   ------------------------------------------------------------------- */

.sozial {
  display: flex;
  gap: var(--sp-2);
  /* Der Knopf ist 44 px breit, die Marke darin 20 px – das ergibt
     12 px Innenabstand. Ohne Ausgleich begaenne die Reihe sichtbar
     weiter rechts als der Text darueber. */
  margin: 0 0 0 -12px;
  padding: 0;
  list-style: none;
}

.sozial__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius);
  color: var(--c-neutral);
  transition: color var(--dur) var(--ease), background var(--dur) var(--ease);
}

/* Die Footer-Regel setzt auf jeden Link eine Unterstreichung beim
   Zeigen – unter einem Symbol ergibt die keinen Sinn. */
.site-footer .sozial__link:hover,
.site-footer .sozial__link:focus-visible {
  color: var(--c-text-inverse);
  background: rgba(250, 250, 248, .14);
  text-decoration: none;
}

.sozial__link svg {
  width: 20px;
  height: 20px;
  display: block;
}