/* =========================================================================
   COMPONENTS — alle Bausteine. Nur Tokens, natives Nesting.
   ========================================================================= */

/* ---------- Logo-Signal (warmes Punkt-Spektrum rot→grün, leicht gedämpft) ---------- */
.rainbow-rule {
  height: var(--space-1);
  filter: saturate(0.85);   /* edel: Punkte etwas abgedämpft */
  background: linear-gradient(90deg,
    var(--dot-1) 0 12.5%, var(--dot-2) 0 25%, var(--dot-3) 0 37.5%,
    var(--dot-4) 0 50%, var(--dot-5) 0 62.5%, var(--dot-6) 0 75%,
    var(--dot-7) 0 87.5%, var(--dot-8) 0);
}

/* ---------- Header / Navigation ---------- */
.site-header {
  background: var(--color-bg);
  border-bottom: var(--border-width) solid var(--color-border);
  position: sticky;
  top: 0;
  z-index: 50;
}
.site-header__inner {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  min-height: var(--header-h);
  padding-block: var(--space-3);
  flex-wrap: wrap;
  transition: min-height 180ms ease, padding-block 180ms ease;
}
.site-header__brand { display: flex; align-items: center; }
/* Logo skaliert mit: starre 168px waren auf 390px so breit, dass die Kopfzeile
   umbrach und der Header dort HOEHER wurde als auf dem Desktop. */
.site-header__brand img {
  width: clamp(122px, 98px + 6vw, 168px);
  height: auto;
  transition: width 180ms ease;
}

/* Kompakter Header, sobald gescrollt wird. Der volle Header (6rem + 168px-Logo)
   frisst auf dem Handy ein Achtel des Bildschirms — beim Lesen ist das verschenkt.
   Die Klasse setzt main.js; ohne JS bleibt schlicht der grosse Header stehen. */
.site-header.is-scrolled .site-header__inner {
  min-height: var(--header-h-compact);
  padding-block: var(--space-2);
}
.site-header.is-scrolled .site-header__brand img { width: clamp(96px, 80px + 4vw, 118px); }

/* Wer Bewegung reduziert haben will, bekommt den Sprung ohne Animation. */
@media (prefers-reduced-motion: reduce) {
  .site-header__inner,
  .site-header__brand img { transition: none; }
}

.site-nav { margin-left: auto; }
.site-nav__list {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
  list-style: none;
  padding: 0;
}
.site-nav__item { position: relative; }
.site-nav__link {
  color: var(--color-text);
  text-decoration: none;
  font-weight: var(--weight-semibold);
  font-size: 1rem;            /* moderater als Body, Schulthess-nah */
  padding-block: var(--space-2);
  border-bottom: 2px solid transparent;

  &:hover { color: var(--color-brand); }
  &.is-active {
    color: var(--color-brand-strong);
    border-bottom-color: var(--color-brand);
  }
}

/* Hide meta navigation (Impressum, Datenschutz) on desktop header */
.site-nav__item.nav-meta {
  display: none;
}

/* Dropdown */
.site-nav__caret {
  border: 0; background: none; cursor: pointer; padding: var(--space-1);
  color: var(--color-muted); display: none;
}
.site-nav__dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 15rem;
  list-style: none;
  padding: var(--space-2);
  margin: 0;
  background: var(--color-bg);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  opacity: 0;
  visibility: hidden;
  transform: translateY(4px);
  transition: opacity 120ms ease, transform 120ms ease, visibility 120ms;

  & a {
    display: block;
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-sm);
    color: var(--color-text);
    text-decoration: none;
    font-size: 1rem;
  }
  & a:hover { background: var(--color-surface); color: var(--color-brand-strong); }

  /* Permanently remove bottom border lines (underlines) from submenu links */
  & .site-nav__link {
    border-bottom: none !important;
  }
}
.has-dropdown:hover .site-nav__dropdown,
.has-dropdown:focus-within .site-nav__dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.site-header__toggle { display: none; }

/* ---------- Hero ---------- */
.page-hero {
  background: var(--color-surface);
  padding-block: var(--space-8);

  & h1 { font-weight: var(--weight-semibold); }
  & > .container > p { color: var(--color-muted); font-size: var(--step-1); margin-top: var(--space-3); }
  & a { color: var(--color-brand-strong); }
}

/* Home-Hero: Headline auf Weiß ÜBER dem Bild, Bild als contained Slider
   (nicht 100vw, nicht abgedunkelt). Text-Block bewusst flach gehalten. */
.home-hero { padding-block: var(--space-6); }
/* Kein max-width auf dem Intro: die H1 soll dieselbe Groesse haben wie auf allen
   anderen Seiten (Basis-h1 = --step-5) und einzeilig stehen. Die Lese-Spalte
   sitzt darum am Lead, nicht am Container drumherum. */
.home-hero__intro { margin-bottom: var(--space-5); }
.home-hero .lead { max-width: var(--measure); margin-top: var(--space-3); }

/* Breiter Banner-Bereich: nur etwas Rand zum Bildschirm, breiter als Content */
.hero-band {
  width: 100%;
  max-width: var(--container-wide);
  margin-inline: auto;
  padding-inline: var(--space-6);
}

.hero-slider {
  position: relative;
  width: 100%;
  aspect-ratio: var(--hero-ratio);
  overflow: hidden;
  border-radius: var(--radius);
  isolation: isolate;
}
.hero-slider__viewport { position: absolute; inset: 0; }
.hero-slide {
  position: absolute;
  inset: 0;
  margin: 0;
  background-image: var(--bg);   /* Bild-URL datengetrieben via Inline-Custom-Property */
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 700ms ease;
}
.hero-slide.is-active { opacity: 1; }

/* Caption-Box unten links, grün, halbtransparent — KEIN Voll-Overlay */
.hero-slider__caption {
  position: absolute;
  left: 0;
  bottom: var(--space-6);
  display: flex;
  align-items: center;
  gap: var(--space-5);
  max-width: min(40rem, 80%);
  padding: var(--space-4) var(--space-5);
  background: color-mix(in srgb, var(--color-brand-strong) 88%, transparent);
  color: var(--color-on-brand);
  border-radius: 0 var(--radius) var(--radius) 0;

  & p { margin: 0; color: var(--color-on-brand); font-weight: var(--weight-semibold); }
}
.hero-slider__controls { display: flex; gap: var(--space-2); margin-left: auto; }
.hero-slider__btn {
  width: 2.25rem; height: 2.25rem;
  border: 1px solid color-mix(in srgb, var(--color-on-brand) 50%, transparent);
  border-radius: 50%;
  background: transparent;
  color: var(--color-on-brand);
  font-size: 1.4rem; line-height: 1;
  cursor: pointer;
  transition: background-color 120ms ease;

  &:hover { background: color-mix(in srgb, var(--color-on-brand) 18%, transparent); }
}
.hero-slider__dots {
  position: absolute;
  right: var(--space-5);
  bottom: var(--space-5);
  display: flex;
  gap: var(--space-2);
}
.hero-slider__dot {
  width: 0.7rem; height: 0.7rem;
  border-radius: 50%;
  border: 2px solid var(--white);
  background: transparent;
  cursor: pointer;
  padding: 0;

  &.is-active { background: var(--white); }
}

/* Ab hier steht die Caption UNTER dem Bild statt darauf.
   Grund: der Banner haelt sein Format (--hero-ratio), seine Hoehe schrumpft
   also mit der Breite. Die Caption bleibt dabei 90px hoch und deckt zunehmend
   die Gesichter zu — bei 800px waere sie ein Drittel der Bannerhoehe.
   Das Format traegt darum ab hier der Viewport, .hero-slider wird zur blossen
   Huelle aus Bild + Caption. Die Punkte entfallen: sie laegen auf der Caption,
   und die Pfeile darin tun dasselbe. */
@media (max-width: 1100px) {
  .hero-slider {
    aspect-ratio: auto;
    overflow: visible;
  }
  .hero-slider__viewport {
    position: relative;
    inset: auto;
    aspect-ratio: var(--hero-ratio);
    overflow: hidden;
    border-radius: var(--radius) var(--radius) 0 0;
  }
  .hero-slider__caption {
    position: static;
    max-width: none;
    background: var(--color-brand-strong);   /* deckend — liegt ja nicht mehr auf dem Bild */
    border-radius: 0 0 var(--radius) var(--radius);
  }
  .hero-slider__dots { display: none; }
}

/* Mobil zusaetzlich: das Bannerformat (2.6) waere bei 390px ein Hochformat-
   Ausschnitt aus einem Querformat-Gruppenfoto — die Leute wurden an den Seiten
   abgeschnitten. Darum fester 3:2-Rahmen und eine kompaktere Caption. */
@media (max-width: 760px) {
  .hero-band { padding-inline: var(--space-4); }

  .hero-slider__viewport { aspect-ratio: 3 / 2; }

  /* Optionales Mobil-Bild aus ACF. Ist keins gesetzt, faellt var() aufs
     Desktop-Bild zurueck — dann beschneidet der Browser mittig, wie bisher. */
  .hero-slide { background-image: var(--bg-mobile, var(--bg)); }

  .hero-slider__caption {
    padding: var(--space-3) var(--space-4);
    gap: var(--space-3);
    font-size: var(--step--1);
  }
}

/* ---------- Content-Hero (Unterseiten): Text links, Bild rechts ---------- */
.content-hero-section { padding-block: var(--space-7); }
.content-hero {
  display: grid;
  grid-template-columns: 3fr 2fr;   /* Text breiter, Akzent-Spalte schmaler */
  gap: var(--space-7);
  align-items: start;
}
.content-hero__eyebrow {
  display: block;
  font-size: var(--step--1);
  font-weight: var(--weight-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-brand);
  margin-bottom: var(--space-3);
}
.content-hero h1 { margin-bottom: var(--space-4); }
.content-hero__lead {
  font-size: var(--step-1);
  line-height: var(--leading-snug);
  color: var(--color-muted);
  max-width: 54ch;   /* Lead laeuft bewusst breiter (flacher), dafuer knapp texten */
}
.content-hero__media img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius);
}
/* Rein typografische Variante (kein Bild) */
.content-hero--text { grid-template-columns: 1fr; }
.content-hero--text .content-hero__lead { max-width: var(--measure); }

/* Hero MIT Infobox: Aside aus dem Flow nehmen. Sonst diktiert die (hoehere)
   Box die Zeilenhoehe und es entsteht ein Loch unter dem (kurzen) Lead.
   Stattdessen haengt die Box absolut in der rechten Weissflaeche — die
   Lesespalte links ist schmal, also verdeckt sie nichts und der Body folgt
   direkt nach dem Lead. :has() trifft nur Heros mit Aside. */
.content-hero:has(.content-hero__aside) {
  display: block;
  position: relative;
}
.content-hero:has(.content-hero__aside) .content-hero__text {
  max-width: var(--container-narrow);
}
.content-hero__aside {
  position: absolute;
  top: 0;
  right: 0;
  width: min(300px, 30%);
  z-index: 2;            /* ueber der rechten Weissflaeche des Body */
}
/* Schmal: Box zurueck in den Fluss, unter den Lead. */
@media (max-width: 64rem) {
  .content-hero:has(.content-hero__aside) .content-hero__text { max-width: none; }
  .content-hero__aside {
    position: static;
    width: auto;
    margin-top: var(--space-5);
  }
}

/* Personen-Detail: Portrait LINKS (etwas groesser), Name/Rolle rechts. */
.content-hero--profile {
  grid-template-columns: minmax(0, 22rem) 1fr;
  align-items: start;
}
.content-hero--profile .content-hero__media { order: -1; }   /* Bild nach links */
.content-hero--profile .content-hero__media img {
  aspect-ratio: 1;
  max-width: none;
  width: 100%;
}
.content-hero--profile .content-hero__text { max-width: none; }
.content-hero--profile h1 { font-size: var(--step-3); }   /* Name nicht uebergross */
@media (max-width: 760px) {
  .content-hero--profile .content-hero__media img { max-width: 18rem; }
}

/* Zurueck-Link ueber Detail-Heros (Team-Profil, Stellen-Detail) */
.back-link { margin-bottom: var(--space-4); font-weight: var(--weight-semibold); }
.back-link a { color: var(--color-muted); }
.back-link a:hover { color: var(--color-brand); }

/* Werdegang-Timeline (Team-Profil): Jahr links, Eintrag rechts, zart mit
   Haarlinien getrennt — schlicht, Schweizer Typo-Stil. column-gap bewusst 0,
   damit die Trennlinie durchgehend laeuft; Spaltenabstand via padding. */
.cv {
  display: grid;
  grid-template-columns: max-content 1fr;
  margin-block: var(--space-5);
  max-width: var(--container-narrow);
}
.cv dt,
.cv dd {
  border-top: var(--border-width) solid var(--color-border);
  padding-block: var(--space-3);
}
.cv dt {
  font-weight: var(--weight-semibold);
  color: var(--color-heading);
  font-variant-numeric: tabular-nums;
  padding-right: var(--space-5);
}
.cv dd { margin: 0; }
@media (max-width: 460px) {
  .cv { grid-template-columns: 1fr; }
  .cv dt { padding-bottom: var(--space-1); }
  .cv dd { border-top: 0; padding-top: 0; padding-bottom: var(--space-4); }
}

/* Parallax-Hero (TEST, derzeit nur Palliativmedizin).
   Wie die Startseite: Titel auf Weiss, darunter das Foto als saubere,
   gerundete Bande (contained, etwas Rand) — kein Overlay, kein Abdunkeln.
   Flacher als der Home-Banner (Arztpraxis, kein Kino-Banner).
   Scroll-getriebene Native-Animation (animation-timeline) — kein JS.
   Statisches Bild als Fallback; bei prefers-reduced-motion ohne Bewegung. */
.hero-parallax { padding-block: var(--space-6); }
.hero-parallax__text { max-width: var(--container-narrow); margin-bottom: var(--space-5); }
.hero-parallax__text h1 { margin-bottom: var(--space-3); }
.hero-parallax__frame {
  position: relative;
  overflow: clip;
  /* Volle Bandbreite — der Banner soll so breit sein wie der Home-Hero.
     width:100% MUSS explizit stehen: ohne sie rechnet der Browser aus
     aspect-ratio + max-height die Breite zurueck und der Rahmen schrumpft
     (500 x 2,53 = 1263px), statt die Band zu fuellen. */
  width: 100%;
  /* Format folgt dem Bild (aspect-ratio pro Bild inline, siehe
     template-parts/flexible-content.php) — greift auf schmalen Screens, wo die
     berechnete Hoehe unter dem Deckel bleibt: dort kein Beschnitt.
     Auf breiten Screens deckelt max-height die Hoehe; die Breite bleibt voll,
     object-fit:cover beschneidet dann nur die schmale Differenz oben/unten. */
  aspect-ratio: var(--hero-sub-ratio, 2.53);
  max-height: 500px;
  border-radius: var(--radius);
}
.hero-parallax__media {
  position: absolute;
  inset: 0;
}
.hero-parallax__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  /* Ohne Bewegung: kein Zoom -> das Bild zeigt exakt seinen eigenen Ausschnitt. */
}

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: scroll()) {
    .hero-parallax__img {
      animation: hero-parallax-rise linear both;
      animation-timeline: scroll(root);
      animation-range: 0 90vh;
    }
    /* Der Zoom (scale 1.14) ist die EINZIGE Beschneidung: er schafft oben/unten die
       Reserve, in die das Bild beim Scrollen wandert (translateY ~+-5,7%), ohne dass
       eine Kante durchblitzt. Bewusst schmal — kein Kino-Schnitt. */
    @keyframes hero-parallax-rise {
      from { transform: scale(1.14) translateY(-5%); }
      to   { transform: scale(1.14) translateY(5%); }
    }
  }
}

/* Akzent-Spalte rechts ("Auf einen Blick") statt Bild — borderlos, an den
   Leistungsbereichen orientiert: Eyebrow + subtile Striche, kein grüner Kasten. */
.facts {
  list-style: none;
  padding: 0;
  margin: var(--space-4) 0 var(--space-5);
  border-bottom: var(--border-width) solid var(--color-border);
}
.facts li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-4);
  padding-block: var(--space-3);
  border-top: var(--border-width) solid var(--color-border);
}

/* Auf dem Handy funktioniert das Auseinanderziehen von Label und Wert nicht mehr:
   ein Wert wie "Multimodale Schmerztherapie" fuellt die Zeile komplett aus, und
   Label und Wert stehen ohne erkennbaren Zusammenhang an den Raendern. Darum
   untereinander, linksbuendig — passt auch zur Swiss-Ausrichtung aus DESIGN.md. */
@media (max-width: 760px) {
  .facts li {
    display: grid;
    gap: var(--space-1);
    padding-block: var(--space-2);
  }
  .facts__v { text-align: left; }
}
.facts__k { color: var(--color-muted); font-size: var(--step--1); }
.facts__v { font-weight: var(--weight-semibold); text-align: right; }

/* schlichter Pfeil-Link (statt Button), wie die Leistungsbereiche */
.arrow-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-brand-strong);
  font-weight: var(--weight-semibold);
  text-decoration: none;
}
.arrow-link span { color: var(--color-brand); transition: transform 140ms ease; }
.arrow-link:hover span { transform: translateX(4px); }

@media (max-width: 760px) {
  .content-hero { grid-template-columns: 1fr; gap: var(--space-5); }
  .content-hero__media { order: -1; }   /* Bild zuerst auf Mobile */
}

/* ---------- Lead-Absatz ---------- */
.lead {
  font-size: var(--step-1);
  line-height: var(--leading-snug);
  color: var(--color-muted);
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-block;
  font-weight: var(--weight-semibold);
  font-size: 1rem;
  text-decoration: none;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius);
  background: var(--color-brand);
  color: var(--color-on-brand);
  border: 1px solid var(--color-brand);
  margin-right: var(--space-3);
  vertical-align: middle;
  transition: background-color 120ms ease, border-color 120ms ease;

  &:hover {
    background: var(--color-brand-hover);
    border-color: var(--color-brand-hover);
    color: var(--color-on-brand);
  }
}
.btn--ghost {
  background: transparent;
  color: var(--color-brand-strong);
  &:hover { background: var(--color-surface); color: var(--color-brand-strong); }
}

/* ---------- Cards ---------- */
.cards {
  list-style: none;
  padding: 0;
  display: grid;
  gap: var(--space-6);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
}
.card {
  background: var(--color-bg);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--card-pad);
  transition: box-shadow 140ms ease, transform 140ms ease;

  & img { border-radius: var(--radius); margin-bottom: var(--space-4); width: 100%; }
  & h3 { font-size: var(--step-1); }
  & p { color: var(--color-muted); margin-top: var(--space-2); }
  & a { text-decoration: none; }
}
/* nur interaktive Karten heben sich beim Hover */
.card:has(a):hover { box-shadow: var(--shadow); transform: translateY(-2px); }

/* Vollständig klickbare Karte (ganze Fläche ist Link) */
.card--link {
  display: block;
  color: inherit;
  text-decoration: none;
}
.card--link h3 { color: var(--color-text); }
.card--link p { color: var(--color-muted); }
.card--link:hover { box-shadow: var(--shadow); transform: translateY(-2px); }
.card--link:hover h3 { color: var(--color-brand-strong); }

/* Stellen-Karte: Meta-Eyebrow oben, Titel, Teaser, Cue unten (gleiche Hoehen) */
.card--job { display: flex; flex-direction: column; height: 100%; }
.card--job .card__eyebrow {
  font-size: var(--step--1);
  font-weight: var(--weight-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-brand);
}
.card--job h3 { margin-top: var(--space-2); }
.card--job p { flex: 1 0 auto; }            /* drueckt den Cue an die Unterkante */
.card__cue {
  margin-top: var(--space-4);
  font-weight: var(--weight-semibold);
  color: var(--color-brand-strong);
  display: inline-flex;
  gap: var(--space-2);
}
.card--job .arrow { transition: transform 140ms ease; }
.card--job:hover .arrow { transform: translateX(3px); }

/* Personen-Karte (Team): Foto bündig oben, kompakter Textblock, Rolle in der Karte */
.card--person {
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.card--person__media { display: block; }
.card--person img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  margin: 0;
  border-radius: 0;
}
.card--person__role {
  margin: 0;
  padding: var(--card-pad) var(--card-pad) 0;
  font-size: 0.72rem;
  font-weight: var(--weight-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-brand);
}
.card--person h3 {
  font-size: var(--step-0);
  margin: var(--space-1) 0 0;
  padding: 0 var(--card-pad);
}
.card--person > p:last-child {
  font-size: var(--step--1);
  color: var(--color-muted);
  margin-top: var(--space-1);
  padding: 0 var(--card-pad) var(--card-pad);
}
.card--person h3 a { color: var(--color-text); }
.card--person:hover h3 a { color: var(--color-brand-strong); }

/* Team-Raster: 3 Spalten auf dem Desktop. */
.cards--team { grid-template-columns: repeat(3, 1fr); }

/* Mobil: KEIN Raster, sondern eine Liste — je Person eine Zeile, Portraet links,
   Text rechts. Zweispaltige Kacheln scheiterten an den langen Titeln ("Facharzt
   fuer Anaesthesiologie, Geschaeftsfuehrer und aerztlicher Leiter" brach in der
   halben Handybreite in fuenf Zeilen und trieb die ganze Reihe auseinander).
   In der Zeile hat der Text die volle Breite minus Portraet — das traegt auch
   lange Bezeichnungen. */
@media (max-width: 760px) {
  .cards--team {
    grid-template-columns: 1fr;
    gap: var(--space-3);
  }
  .card--person {
    display: grid;
    grid-template-columns: 84px 1fr;
    column-gap: var(--space-4);
    align-items: center;
    padding: var(--space-3);
    overflow: visible;   /* Portraet hat jetzt eigene Rundung, nichts wird beschnitten */
  }
  .card--person__media {
    grid-column: 1;
    grid-row: 1 / span 3;
    align-self: center;
  }
  .card--person img { border-radius: var(--radius); }

  /* Textspalte: Innenabstaende der Kachel-Variante zuruecknehmen */
  .card--person__role,
  .card--person h3,
  .card--person > p:last-child {
    grid-column: 2;
    padding: 0;
  }
  .card--person__role { font-size: 0.68rem; }
  .card--person h3 { font-size: var(--step-0); margin: var(--space-1) 0 0; }
  .card--person > p:last-child { margin-top: var(--space-1); }
}

/* Hospiz-Karte: schlichte Text-Karte (Name + Ort + Website-Link) */
.card--hospiz { display: flex; flex-direction: column; align-items: start; gap: var(--space-2); }
.card--hospiz .arrow-link { margin-top: var(--space-2); }

/* Karten exakt zu dritt über die volle Breite (z. B. Hospizbetreuung) */
.cards--3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 760px) { .cards--3 { grid-template-columns: 1fr; } }

/* ---------- Standort-Karten (Ort + Anfahrt + Sprechzeiten) ---------- */
.loc-cards {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
}
.loc-card {
  background: var(--color-bg);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.loc-card__head {
  background: var(--color-brand);
  color: var(--color-on-brand);
  padding: var(--space-4) var(--space-5);

  & h3 { color: var(--color-on-brand); font-size: var(--step-1); margin: 0; }
}
.loc-card__body { padding: var(--space-5); }
.loc-card__addr { font-style: normal; }
.loc-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
  margin-top: var(--space-3);
}
.loc-card__action {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-link);
  text-decoration: none;
  font-weight: var(--weight-semibold);

  & svg { width: 1.15rem; height: 1.15rem; flex: none; color: var(--color-brand); }
  &:hover { color: var(--color-brand); }
}
.loc-card__hours {
  margin-top: var(--space-5);
  padding-top: var(--space-5);
  border-top: var(--border-width) solid var(--color-border);

  & h4 { font-size: var(--step-0); margin-bottom: var(--space-2); }
}
.loc-card__note { margin-top: var(--space-3); color: var(--color-muted); font-size: var(--step--1); }

/* Auf dem Handy sitzt in der Karte alles auf 18px — Adresse, Telefon, Sprechzeiten.
   Das ist fuer dichte Daten zu wuchtig; die Sprechzeiten-Zeilen laufen dabei fast
   ueber die Kartenbreite. Der 18px-Grundsatz aus DESIGN.md gilt dem FLIESSTEXT,
   nicht einer Oeffnungszeiten-Tabelle. */
@media (max-width: 760px) {
  .loc-card__body { padding: var(--space-4); font-size: 1rem; }
  .loc-card__hours h4 { font-size: 1rem; }
  .hours-list li { padding-block: var(--space-1); gap: var(--space-2); }
}

.hours-list {
  list-style: none;
  padding: 0;
  margin: 0;

  & li {
    display: flex;
    justify-content: space-between;
    gap: var(--space-4);
    padding-block: var(--space-2);
    border-bottom: var(--border-width) solid var(--color-border);
  }
  & li:last-child { border-bottom: 0; }
  & li > span:last-child { color: var(--color-muted); white-space: nowrap; }
}

/* ---------- Leistungsbereiche (rein typografisch, editorial) ---------- */
.services {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: var(--space-8);
}
.service {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: start;
  gap: var(--space-4);
  padding-block: var(--space-5);
  border-top: var(--border-width) solid var(--color-border);
  text-decoration: none;
  color: var(--color-text);
}
.service__title {
  display: block;
  font-family: var(--font-head);
  font-weight: var(--weight-bold);
  font-size: var(--step-2);
  transition: color 140ms ease;
}
.service__desc { display: block; color: var(--color-muted); font-size: var(--step-0); margin-top: var(--space-2); }
.service__arrow {
  align-self: center;
  color: var(--color-brand);
  font-weight: var(--weight-bold);
  font-size: var(--step-1);
  transition: transform 140ms ease;
}
.service:hover .service__title { color: var(--color-brand-strong); }
.service:hover .service__arrow { transform: translateX(4px); }
@media (max-width: 760px) {
  .services { grid-template-columns: 1fr; column-gap: 0; }
  /* --step-2 (22,4px) ist fuer einen Listeneintrag zu wuchtig, zumal die
     Beschreibung darunter bei 16px sitzt. Eine Stufe runter reicht fuer die
     Hierarchie voellig. */
  .service__title { font-size: var(--step-1); }
  .service { padding-block: var(--space-4); }
}

/* ---------- Bild / Bildplatzhalter im Fließtext ---------- */
.figure { margin-block: var(--space-6); max-width: var(--container-narrow); }
.figure--wide { max-width: none; }            /* bricht aus der Lese-Spalte aus */
.figure__media {
  border-radius: var(--radius);
  overflow: hidden;
}
/* Nur der LEERE Zustand (kein Bild) ist die gerahmte Platzhalter-Box mit Icon.
   Sobald ein echtes Bild drin haengt, kein festes Format, kein Beschnitt — das
   Bild bestimmt seine eigene Hoehe. Die eingebundenen Groessen (figure-normal/
   -wide) sind ohnehin proportional beschnitten, hier wurde nur das CSS 16:9/21:9
   drueberbuegeln. */
.figure__media:not(:has(img)) {
  aspect-ratio: 16 / 9;
  background: var(--color-surface);
  border: var(--border-width) solid var(--color-border);
  display: grid;
  place-content: center;
  justify-items: center;
  gap: var(--space-2);
  color: var(--color-brand);
}
.figure--wide .figure__media:not(:has(img)) { aspect-ratio: 21 / 9; }
.figure__media img { width: 100%; height: auto; display: block; }
.figure__media svg { width: 2.5rem; height: 2.5rem; opacity: 0.55; }
.figure__tag {
  font-size: var(--step--1);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-muted);
}
.figure figcaption {
  margin-top: var(--space-3);
  font-size: var(--step--1);
  color: var(--color-muted);
  border-left: 2px solid var(--color-border);
  padding-left: var(--space-3);
}

/* ---------- Feature-Liste ---------- */
/* Zweispaltig ist der Standard (so sind alle Bestandsseiten gesetzt). Der
   Redakteur kann pro Modul auf einspaltig stellen — sinnvoll bei langen
   Saetzen, wie in den Stellenanzeigen. Siehe inc/acf-layouts.php. */
.feature-list {
  list-style: none;
  padding: 0;
  columns: 2;
  column-gap: var(--space-7);

  & li {
    break-inside: avoid;
    position: relative;
    padding-left: var(--space-5);
    margin-bottom: var(--space-2);
  }
  & li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.65em;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: var(--color-brand);
  }
}

.feature-list--single {
  columns: 1;
}

/* ---------- Accordion (native details) ---------- */
details {
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius);
  padding: 0 var(--space-5);
  margin-bottom: var(--space-3);
  background: var(--color-bg);

  & > summary {
    cursor: pointer;
    font-family: var(--font-head);
    font-weight: var(--weight-semibold);
    font-size: var(--step-1);
    padding-block: var(--space-4);
    list-style: none;
    display: flex;
    align-items: center;
    gap: var(--space-3);
  }
  & > summary::-webkit-details-marker { display: none; }
  & > summary::before {
    content: "+";
    color: var(--color-brand);
    font-size: 1.2em;
    width: 1em;
    flex: none;
  }
  &[open] > summary::before { content: "–"; }
  & ul { padding-left: var(--space-5); padding-bottom: var(--space-4); }
}
/* Sanftes Auf-/Zuklappen (Höhe). interpolate-size (html) macht auto animierbar.
   Browser ohne ::details-content öffnen einfach instant — graceful degrade. */
details::details-content {
  block-size: 0;
  overflow: hidden;
  transition: block-size 280ms ease, content-visibility 280ms;
  transition-behavior: allow-discrete;
}
details[open]::details-content { block-size: auto; }
@media (prefers-reduced-motion: reduce) {
  details::details-content { transition: none; }
}

/* ---------- Standorte / Sprechzeiten ---------- */
.locations {
  list-style: none;
  padding: 0;
  display: grid;
  gap: var(--space-6);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
}
.location {
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);

  & h2, & h3 { font-size: var(--step-1); }
  & h3 { margin-top: var(--space-5); }
}
/* Statische DSGVO-Karte mit Overlay-Button */
.static-map {
  margin-top: var(--space-5);
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: var(--border-width) solid var(--color-border);
  position: relative;
  background: var(--color-surface);
}
.static-map a {
  display: block;
  position: relative;
  overflow: hidden;
}
.static-map img {
  width: 100%;
  display: block;
  transition: transform 400ms ease, filter 400ms ease;
  filter: contrast(0.95);
}
.static-map a:hover img {
  transform: scale(1.03);
  filter: contrast(1);
}
.static-map .btn {
  position: absolute;
  bottom: var(--space-4);
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  box-shadow: var(--shadow-md);
  margin: 0;
}
@media (max-width: 480px) {
  .static-map .btn {
    width: calc(100% - var(--space-6));
    text-align: center;
    white-space: normal;
  }
}

.contact-note { color: var(--color-muted); }
.location__hours {
  list-style: none;
  padding: 0;
  margin-top: var(--space-3);

  & li {
    display: flex;
    justify-content: space-between;
    gap: var(--space-4);
    padding-block: var(--space-2);
    border-bottom: var(--border-width) solid var(--color-border);
  }
  & li:last-child { border-bottom: 0; }
  & li > span:last-child { color: var(--color-muted); white-space: nowrap; }
}

/* ---------- Footer ---------- */
.site-footer {
  background: var(--color-footer);
  color: var(--color-footer-text);
  margin-top: var(--space-9);
  padding-block: var(--space-8);
  font-size: var(--step--1);   /* Footer bewusst etwas kleiner */

  & h4 {
    color: var(--color-footer-head);
    font-family: var(--font-head);
    font-size: var(--step-0);
    font-weight: var(--weight-bold);
    letter-spacing: 0.02em;
    margin-bottom: var(--space-4);
  }
  & a { color: var(--color-footer-text); text-decoration: none; }
  & a:hover { color: var(--color-brand); }
}
.site-footer__grid {
  display: grid;
  gap: var(--space-7);
  grid-template-columns: 1.4fr 1fr 1fr;
}
.site-footer__nav { list-style: none; padding: 0; columns: 2; }
.site-footer__nav li { margin-bottom: var(--space-2); }
.site-footer__nav a:hover { color: var(--color-brand); }   /* grüner Tupfer nur im Hover */
.site-footer__contact { font-style: normal; line-height: var(--leading-normal); }
.site-footer__copy {
  text-align: center;
  color: var(--color-footer-text);
  margin-top: var(--space-5);
  font-size: var(--step--1);
  max-width: none;
  width: 100%;
}

/* ---------- Grünflächen (Bänder) ---------- */
.band-soft   { background: var(--color-band-soft); }
.band-accent { background: var(--color-band); }

/* ---------- Schnellzugriff-Leiste (rechts Mitte) ---------- */
.quickbar {
  position: fixed;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 40;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.quickbar__item {
  display: grid;
  grid-template-columns: var(--sidebar-size) 0fr;
  align-items: center;
  height: var(--sidebar-size);
  background: var(--color-brand);
  color: var(--color-on-brand);
  border-radius: var(--radius) 0 0 var(--radius);
  box-shadow: var(--shadow-sm);
  text-decoration: none;
  overflow: hidden;
  /* Einklappen: wartet kurz und schließt weich (nicht zappelig) */
  transition:
    grid-template-columns 340ms cubic-bezier(0.22, 0.61, 0.36, 1) 220ms,
    background-color 200ms ease;
}
/* Hover auf die GANZE Leiste klappt ALLE Items aus → alle Labels sichtbar */
.quickbar:hover .quickbar__item {
  grid-template-columns: var(--sidebar-size) 1fr;
  transition-delay: 0ms;   /* Ausklappen sofort, ohne Verzögerung */
}
/* das gerade überfahrene Element deutlich hervorheben */
.quickbar__item:hover { background: var(--color-brand-strong); }

.quickbar__icon { width: 1.5rem; height: 1.5rem; justify-self: center; }
.quickbar__label {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  font-size: var(--step--1);
  font-weight: var(--weight-semibold);
  padding-right: var(--space-4);
  opacity: 0;
  transition: opacity 220ms ease 220ms;   /* beim Einklappen verzögert ausblenden */
}
.quickbar:hover .quickbar__label { opacity: 1; transition-delay: 80ms; }

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  .quickbar { display: none; }   /* überlagert sonst den Inhalt */
}
/* Burger-Menue. Der Umschaltpunkt liegt bei 1100px, weil die Desktop-Navigation
   konstant 843px braucht und nicht mitschrumpft: mit Logo sind das ~1005px, die
   ab etwa 1050px nicht mehr in den Header passen. Vorher stand hier 760px —
   dazwischen ragte das Menue bis zu 106px aus dem Fenster und erzeugte einen
   horizontalen Scrollbalken auf der ganzen Seite.
   Wer hier schraubt: der Wert gehoert zum Platzbedarf des Menues, nicht zu
   "Handy". Kommt ein Menuepunkt dazu, muss er mit hoch. Die drei echten
   Mobil-Regeln (Header-Hoehe, feature-list, Footer-Grid) stehen darum weiter
   unten in ihrem eigenen 760px-Block. */
@media (max-width: 1100px) {
  .site-header__toggle {
    display: inline-flex;
    flex-direction: column;
    gap: 5px;
    margin-left: auto;
    background: none;
    border: none;
    padding: var(--space-2);
    cursor: pointer;
    z-index: 110;
    position: relative;
  }
  .site-header__toggle span {
    width: 24px;
    height: 2px;
    background: var(--color-text);
    transition: transform 0.3s ease, opacity 0.3s ease;
    transform-origin: center;
  }
  .site-header__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .site-header__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .site-header__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  .site-nav {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: var(--color-bg);
    z-index: 100;
    overflow-y: auto;
    padding: 6rem var(--space-5) var(--space-5);
    flex-basis: 100%;
    margin-left: 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity 250ms ease, transform 250ms ease, visibility 250ms;
  }
  .site-nav.is-open,
  .site-nav.is-active { 
    opacity: 1; 
    visibility: visible; 
    transform: translateY(0); 
  }
  .site-nav__list { flex-direction: column; align-items: stretch; gap: 0; }
  .site-nav__item { display: flex; flex-wrap: wrap; align-items: stretch; }
  .site-nav__link { display: flex; align-items: center; border-bottom: var(--border-width) solid var(--color-border); flex: 0 1 auto; padding-right: var(--space-5); font-size: var(--step-1); padding-block: var(--space-3); }
  .site-nav__item:not(.has-dropdown) .site-nav__link { flex: 1; }

  /* Meta-Navigation im mobilen Modal (Impressum, Datenschutz) */
  .site-nav__item.nav-meta { display: flex; margin-top: 0; }
  .site-nav__item:not(.nav-meta) + .site-nav__item.nav-meta { margin-top: var(--space-6); border-top: var(--border-width) solid var(--color-border); }
  .site-nav__item.nav-meta .site-nav__link { font-size: 0.875rem; color: var(--color-muted); border-bottom: none; padding-block: var(--space-2); font-weight: normal; opacity: 0.7; }

  /* Dropdowns auf Mobile: Caret toggelt, Untermenü fließt im Flow */
  .site-nav__caret {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    border-bottom: var(--border-width) solid var(--color-border);
    flex: 1;
    font-size: 1.5rem;
    padding-right: var(--space-2);
  }
  .site-nav__caret::before { content: "▾"; }
  .site-nav__caret[aria-expanded="true"]::before { content: "▴"; }
  .site-nav__dropdown {
    position: static;
    opacity: 0;
    visibility: hidden;
    transform: none;
    box-shadow: none;
    border: 0;
    border-radius: 0;
    flex-basis: 100%;
    height: 0;
    overflow: hidden;
    padding: 0;
    background: var(--color-surface);
    transition: height 300ms ease, padding 300ms ease, opacity 300ms ease, visibility 300ms;
  }
  .site-nav__dropdown.is-open,
  .site-nav__dropdown.is-active { visibility: visible; height: auto; padding: var(--space-2); opacity: 1; }
  /* auf Mobile NICHT per Hover öffnen */
  .has-dropdown:hover .site-nav__dropdown:not(.is-open):not(.is-active),
  .has-dropdown:focus-within .site-nav__dropdown:not(.is-open):not(.is-active) { visibility: hidden; height: 0; padding: 0; opacity: 0; }

}

/* Echte Mobil-Regeln — haengen an der Geraetegroesse, nicht am Menue.
   (Die frueheren Regeln fuer .hero-slider und die Caption stehen jetzt oben beim
   Hero-Block: eine feste Hoehe vertraegt sich nicht mit dem 3:2-Rahmen und liess
   die Caption bei 500–740px aus dem Slider quellen.) */
@media (max-width: 760px) {
  .site-header__inner { min-height: 0; padding-block: var(--space-4); }
  .feature-list { columns: 1; }
  .site-footer__grid { grid-template-columns: 1fr; }
}