/* Basis & Komponenten — alle Farben über semantische Tokens (tokens.css). */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  /* Anker-Ziele nicht unter dem Sticky-Header verstecken */
  scroll-padding-top: calc(var(--header-h) + var(--space-3));
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-body);
  color: var(--color-ink);
  background: var(--color-bg);
}

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

h1,
h2,
h3,
p {
  margin: 0;
}

a {
  color: var(--color-primary);
}

/* Betonte Kernworte: warme Serif-Kursive, nur sparsam */
em,
.akzent {
  font-family: var(--font-accent);
  font-style: italic;
  font-weight: 500;
  letter-spacing: 0.01em;
}

:focus-visible {
  outline: var(--focus-ring-light);
  outline-offset: 3px;
}

.auf-dunkel {
  color: var(--color-text-on-dark);
}

.auf-dunkel :focus-visible {
  outline: var(--focus-ring-dark);
}

.container {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--space-5);
}

.skip-link {
  position: absolute;
  left: var(--space-4);
  top: var(--space-4);
  z-index: 100;
  padding: var(--space-3) var(--space-4);
  background: var(--color-bg);
  color: var(--color-ink);
  border-radius: var(--radius-md);
  transform: translateY(-300%);
}

.skip-link:focus-visible {
  transform: none;
}

/* Buttons — Touch-Ziel ≥ 44 px, ein primärer CTA pro Screen */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--tap-min);
  padding: var(--space-3) var(--space-6);
  border-radius: var(--radius-pill);
  font-weight: 700;
  font-size: var(--text-base);
  text-decoration: none;
  cursor: pointer;
  touch-action: manipulation;
  transition: transform var(--dur-quick) var(--ease-out),
    box-shadow var(--dur-quick) var(--ease-out);
}

.btn:hover {
  transform: translateY(-1px);
}

.btn:active {
  transform: translateY(0) scale(0.98);
}

.btn-accent {
  background: var(--color-accent);
  color: var(--color-on-accent);
  box-shadow: var(--shadow-rest);
}

.btn-accent:hover {
  box-shadow: var(--shadow-lift);
}

.btn-leise {
  background: transparent;
  color: inherit;
  border: 1px solid currentColor;
  font-weight: 600;
  transition: background-color var(--dur-quick) var(--ease-out),
    transform var(--dur-quick) var(--ease-out);
}

.btn-leise:hover {
  background-color: var(--overlay-on-dark);
}

/* Kompakter Kopf-CTA mit rundem Pfeil-Chip (Design-System). Tap-Ziel bleibt
   ≥ 44 px (--tap-min aus .btn), nur Polsterung und Schrift sind kompakter. */
.btn-klein {
  padding: var(--space-2) var(--space-2) var(--space-2) var(--space-4);
  font-size: var(--text-sm);
  font-weight: 700;
}

.btn-pfeil {
  display: grid;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: var(--radius-pill);
  background: rgb(var(--scrim-channels) / 0.12);
  transition: transform var(--dur-quick) var(--ease-out),
    background-color var(--dur-quick) var(--ease-out);
}

.btn-pfeil svg {
  width: 0.8125rem;
  height: 0.8125rem;
}

.btn-klein:hover .btn-pfeil {
  transform: translateX(2px);
  background: rgb(var(--scrim-channels) / 0.2);
}

/* Header — sticky & transluzentes Nachtblau (Design-System). Bleibt beim
   Scrollen oben; der negative Rand (= Kopfhöhe) zieht den dunklen Seitenanfang
   wieder unter den Kopf, sodass er wie zuvor über dem Morgen liegt und kein
   Layout nach unten rückt. Wortmarke links, Navigation + Erstgespräch rechts. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  margin-bottom: calc(-1 * var(--header-h));
  background: var(--header-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--hairline-gold);
}

.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-height: var(--header-h);
  padding-block: var(--space-3);
}

.wortmarke {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-min);
  color: var(--color-text-on-dark);
  text-decoration: none;
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.wortmarke .akzent {
  margin-left: 0.35em;
  color: var(--color-accent-soft);
}

.site-header .btn {
  padding-inline: var(--space-4);
  font-size: var(--text-sm);
}

/* Hauptnavigation — bewusst schlank: drei Links, mehr nicht.
   Ab 48rem als Textzeile, darunter im <details>-Menü (ohne JS,
   dieselbe Technik wie die FAQ). Wortmarke + Erstgespräch-Button
   bleiben mobil immer sichtbar. */
.hauptnav {
  display: none;
}

.hauptnav a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-min);
  padding-inline: var(--space-3);
  color: var(--color-text-on-dark);
  text-decoration: none;
  font-size: var(--text-sm);
  font-weight: 600;
  border-radius: var(--radius-pill);
  transition: background-color var(--dur-quick) var(--ease-out);
}

.hauptnav a:hover,
.hauptnav a:focus-visible {
  background-color: var(--overlay-on-dark);
}

.mobilnav {
  position: relative;
  margin-left: auto;
}

.mobilnav summary {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  min-height: var(--tap-min);
  padding-inline: var(--space-2);
  color: var(--color-text-on-dark);
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
  list-style: none;
  border-radius: var(--radius-pill);
}

.mobilnav summary::-webkit-details-marker {
  display: none;
}

.mobilnav summary::after {
  content: "";
  width: 0.42em;
  height: 0.42em;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-20%);
  transition: transform var(--dur-quick) var(--ease-out);
}

.mobilnav[open] summary::after {
  transform: rotate(225deg) translateY(-20%);
}

.mobilnav nav {
  position: absolute;
  top: calc(100% + var(--space-2));
  right: 0;
  z-index: 20;
  display: grid;
  min-width: 12rem;
  padding: var(--space-2);
  background: var(--color-surface-darker);
  border: 1px solid var(--overlay-on-dark);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lift);
}

.mobilnav nav a {
  display: flex;
  align-items: center;
  min-height: var(--tap-min);
  padding-inline: var(--space-3);
  color: var(--color-text-on-dark);
  text-decoration: none;
  font-size: var(--text-sm);
  font-weight: 600;
  border-radius: var(--radius-md);
}

.mobilnav nav a:hover,
.mobilnav nav a:focus-visible {
  background-color: var(--overlay-on-dark);
}

@media (min-width: 48rem) {
  .hauptnav {
    display: flex;
    gap: var(--space-1);
    margin-left: auto;
  }

  .mobilnav {
    display: none;
  }
}

/* Handy: Kopf kompakt halten, damit Wortmarke, Burger und Erstgespräch-Button
   nebeneinander passen (der Pfeil-Chip entfällt, sonst wird der CTA zu breit). */
@media (max-width: 30rem) {
  .site-header .container {
    gap: var(--space-2);
  }

  .header-cta {
    padding-inline: var(--space-4);
  }

  .header-cta .btn-pfeil {
    display: none;
  }
}

/* Anker-Sprünge (z. B. „Leistungen" im Menü) landen mit etwas Luft. */
h2[id] {
  scroll-margin-top: var(--space-6);
}

/* Hero „früher Morgen" — dunkles Nachtblau mit warmem Lichtschimmer */
.hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(
    180deg,
    var(--color-surface-darker) 0%,
    var(--color-surface-dark) 62%,
    var(--color-primary) 100%
  );
  color: var(--color-text-on-dark);
}

.hero::before {
  /* Morgenlicht: warmer Schein direkt hinter der Headline. Feste Größe in
     rem/Viewport (NICHT Prozent der Hero-Höhe) und feste Höhe ab Oberkante —
     so sitzt der Schein auf Desktop wie Handy gleich groß hinter den Worten,
     statt am Desktop an die linke Kante zu kleben und am Handy zu verschwinden.
     Vertikal gedeckelt, damit er oben bleibt; rechts/unten bleibt es dunkel
     (Textfreiraum links / späteres Hero-Foto rechts). */
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    min(30rem, 62vw) min(26rem, 44vh) at 40% 14rem,
    var(--color-accent) 0%,
    transparent 70%
  );
  opacity: 0.5;
  transform-origin: 40% 14rem;
  pointer-events: none;
}

.hero::after {
  /* Schutz-Schleier für die Lesbarkeit über dem Licht: dunkel oben (Label &
     Wortmarke) und unten (Fließtext, Trust-Zeile, Transparenz-Hinweis), mit
     einem transparenten Fenster hinter der großen weißen Headline, wo das
     Licht leuchten darf. Hält jede Textzone ≥ 4,5:1, auch beim hellsten
     Atemzug. Liegt über dem Licht (::before), aber unter dem Text (.container
     hat z-index: 1). Kommt dem späteren Hero-Foto (#23) ohnehin zugute. */
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgb(var(--scrim-channels) / 86%) 0%,
    rgb(var(--scrim-channels) / 86%) 16%,
    transparent 24%,
    transparent 34%,
    rgb(var(--scrim-channels) / 83%) 47%,
    rgb(var(--scrim-channels) / 83%) 100%
  );
}

.hero .container {
  position: relative;
  z-index: 1; /* Inhalt über dem Schutz-Schleier (.hero::after) */
  display: grid;
  gap: var(--space-7);
  align-items: center;
  padding-block: calc(var(--space-9) + var(--space-7)) var(--space-8);
}

/* Textspalte des Hero. Trägt die Grid-Choreografie, die vorher direkt am
   Container hing; das Porträt (#30) sitzt daneben in der zweiten Spalte. */
.hero-inhalt {
  display: grid;
  gap: var(--space-5);
  justify-items: start;
  max-width: 40rem;
}

@media (min-width: 64rem) {
  .hero .container {
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: var(--space-8);
  }
}

/* Hero-Porträt (Design-System): Foto im hohen Rahmen mit versetztem Gold-Akzent
   und Namensplakette. Fester Rahmen (Seitenverhältnis 2:3) hält den Platz, das
   Foto lädt eager (über dem Fold, Teil des LCP-Umfelds). */
.hero-portrait {
  position: relative;
  width: min(21.5rem, 74vw);
  justify-self: center;
}

.hero-portrait .stapel {
  position: relative;
}

.hero-portrait .rahmen-akzent {
  position: absolute;
  inset: 0;
  transform: translate(1.4rem, 1.4rem);
  border: 1px solid var(--hairline-gold-stark);
  border-radius: 6px;
  pointer-events: none;
}

.hero-portrait .rahmen {
  position: relative;
  z-index: 1;
  aspect-ratio: 2 / 3;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid var(--hairline-gold-stark);
  /* Navy-getönter Tiefenschatten (Design-System: keine reinen Schwarztöne) */
  box-shadow: 0 3.4rem 6.9rem -2.5rem rgb(var(--scrim-channels) / 0.72);
}

.hero-portrait .rahmen::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(to top, rgb(var(--scrim-channels) / 0.72), transparent 46%);
}

.hero-portrait .rahmen img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 30%;
  filter: grayscale(1) contrast(1.02);
}

.hero-portrait .plakette {
  position: absolute;
  z-index: 2;
  left: -1.2rem;
  bottom: 1.5rem;
  padding: var(--space-3) var(--space-4);
  /* Transluzentes Nachtblau über dem Foto — via Scrim-Kanäle wie .btn-pfeil */
  background: rgb(var(--scrim-channels) / 0.88);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid var(--hairline-gold-stark);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lift);
}

.hero-portrait .plakette .name {
  font-weight: 700;
  font-size: var(--text-sm);
  color: var(--color-text-on-dark);
}

.hero-portrait .plakette .ort {
  margin-top: 2px;
  font-size: 0.8rem;
  color: var(--color-text-muted-on-dark);
}

@media (max-width: 63.99rem) {
  .hero-portrait {
    width: 15.6rem;
    justify-self: start;
    margin-top: var(--space-4);
  }

  .hero-portrait .rahmen-akzent {
    display: none;
  }

  .hero-portrait .plakette {
    position: static;
    left: auto;
    bottom: auto;
    display: inline-block;
    margin-top: var(--space-3);
  }
}

/* Gold-CTA mit rundem Pfeil-Chip in voller Größe (Kopf-CTA bleibt .btn-klein). */
.btn:hover .btn-pfeil,
.btn:focus-visible .btn-pfeil {
  transform: translateX(2px);
  background: rgb(var(--scrim-channels) / 0.2);
}

.hero-thema {
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-accent-soft);
}

.hero h1 {
  font-family: var(--font-display);
  font-size: var(--text-display);
  line-height: var(--leading-tight);
  font-weight: 600;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

.hero h1 em {
  font-weight: 500;
  color: var(--color-accent-soft);
}

.hero-text {
  font-size: var(--text-xl);
  line-height: var(--leading-body);
  color: var(--color-text-muted-on-dark);
  max-width: 38rem;
}

/* Sunrise-Linie: schmaler Bernstein-Verlauf mit weichem Glühen */
.sunrise-linie {
  width: min(16rem, 60%);
  height: 2px;
  border: 0;
  margin: 0;
  border-radius: var(--radius-pill);
  background: linear-gradient(
    90deg,
    transparent,
    var(--color-accent) 35%,
    var(--color-accent-soft) 50%,
    var(--color-accent) 65%,
    transparent
  );
  box-shadow: 0 0 18px 1px var(--color-accent);
}

.hero-trust {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  font-size: var(--text-sm);
  color: var(--color-text-muted-on-dark);
}

.hero-trust li {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
}

.hero-trust li + li::before {
  content: "";
  width: 3px;
  height: 3px;
  border-radius: var(--radius-pill);
  background: var(--color-accent);
}

.hero-transparenz {
  font-size: var(--text-sm);
  color: var(--color-text-muted-on-dark);
  max-width: 38rem;
}

/* Übergang: der frühe Morgen wird heller Tag */
.morgen-uebergang {
  height: var(--space-8);
  background: linear-gradient(
    180deg,
    var(--color-primary),
    var(--color-tint-cool) 55%,
    var(--color-bg)
  );
}

/* Heller Inhaltsbereich */
.tag {
  background: var(--color-bg);
}

.abschnitt {
  padding-block: var(--space-8);
}

.abschnitt h2 {
  font-size: var(--text-xl);
  font-weight: 800;
  letter-spacing: -0.01em;
  max-width: 30ch;
}

.abschnitt h2 + p {
  margin-top: var(--space-4);
}

.abschnitt p {
  color: var(--color-text-muted);
  max-width: 62ch;
}

/* CTA-Block */
.cta-block .container {
  display: grid;
  gap: var(--space-5);
  justify-items: start;
}

.cta-wege {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
}

.kontakt-weg {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--tap-min);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-pill);
  background: var(--color-tint-cool);
  color: var(--color-primary);
  text-decoration: none;
  font-weight: 600;
  font-size: var(--text-sm);
  touch-action: manipulation;
  transition: background-color var(--dur-quick) var(--ease-out),
    transform var(--dur-quick) var(--ease-out);
}

.kontakt-weg:hover {
  background: var(--color-tint-cool-hover);
  transform: translateY(-1px);
}

.kontakt-weg:active {
  transform: scale(0.98);
}

.kontakt-weg svg {
  width: 1.125rem;
  height: 1.125rem;
  flex: none;
}

/* Krisen-Hinweis — dunkles Nachtblau mit Warn-Symbol (Design-System).
   Nummern unverändert (Tirol 0800 400 120), Gold als Signalfarbe. */
.krisen-hinweis {
  background: var(--color-surface-darker);
  color: var(--color-text-muted-on-dark);
}

.krisen-hinweis .container {
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
  padding-block: var(--space-6);
}

.krisen-icon {
  flex: none;
  margin-top: 2px;
  color: var(--color-accent);
}

.krisen-hinweis h2 {
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--color-text-on-dark);
}

.krisen-hinweis p {
  margin-top: var(--space-2);
  font-size: var(--text-sm);
  max-width: 70ch;
}

.krisen-hinweis a {
  color: var(--color-accent-soft);
  font-weight: 700;
  overflow-wrap: break-word;
}

/* Footer — tiefes Nachtblau, Marke + Praxisdaten links, Linkliste rechts
   (Design-System). i.A.u.S.-Ausweis und rechtliche Links bleiben unverändert. */
.site-footer {
  background: var(--color-footer);
  color: var(--color-text-muted-on-dark);
  padding-block: var(--space-8) var(--space-6);
  font-size: var(--text-sm);
}

.site-footer .container {
  display: grid;
  gap: var(--space-6);
}

.footer-oben {
  display: grid;
  gap: var(--space-6);
}

.footer-marke {
  display: grid;
  gap: var(--space-3);
  line-height: var(--leading-body);
}

.footer-marke a {
  color: var(--color-accent-soft);
}

.site-footer .zeile-marke {
  font-weight: 700;
  font-size: var(--text-lg);
  color: var(--color-text-on-dark);
}

@media (min-width: 48rem) {
  .footer-oben {
    grid-template-columns: 1.3fr 1fr;
    gap: var(--space-7);
  }
}

/* Bewegung nur mit Bedeutung — und nur, wenn erwünscht.
   Erzählung: der Morgen beginnt (Header senkt sich, Inhalt steigt auf,
   die Sonne geht auf, das Licht atmet) — ruhig, nie aufgeregt. */
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }

  .site-header {
    animation: von-oben var(--dur-entrance) var(--ease-out) both;
  }

  .hero [data-eintritt] {
    animation: eintritt var(--dur-entrance) var(--ease-out) both;
  }

  /* Breite Staffelung: jedes Element atmet einzeln ein, ~300 ms auseinander. */
  .hero [data-eintritt="2"] {
    animation-delay: 300ms;
  }

  /* Die H1 ist das LCP-Element: sie steigt nur auf, ohne Fade —
     so ist beim ersten Paint sofort Inhalt sichtbar. */
  .hero h1[data-eintritt] {
    animation-name: eintritt-fest;
  }

  .hero [data-eintritt="3"] {
    animation-delay: 600ms;
  }

  .hero [data-eintritt="4"] {
    animation-delay: 900ms;
  }

  .hero [data-eintritt="5"] {
    animation-delay: 1200ms;
  }

  /* Sonnenaufgang: die Linie wächst langsam aus der Mitte ins Licht */
  .hero .sunrise-linie {
    animation: eintritt var(--dur-entrance) var(--ease-out) both,
      sonnenaufgang 1100ms var(--ease-out) 1200ms both;
  }

  /* Atem-Motiv der Marke (wie auf der freigegebenen Coming-Soon-Seite):
     der Lichtschimmer atmet wie ein ruhiger Ruhe-Atem — einatmen zügig,
     oben kurz halten, ausatmen länger und weicher, danach eine kurze Pause
     (~8 s). Asymmetrisch (Kurve pro Keyframe), damit er lebendig wirkt statt
     gleichmäßig zu pulsieren. Höhepunkt ≤ 0.62, dort hält der Schutz-Schleier
     den Text ≥ 4,5:1. Per reduced-motion aus. `backwards` = während der
     0,6-s-Startverzögerung ruht er schon am Tiefpunkt (kein Helligkeitssprung). */
  .hero::before {
    animation: atem 8s 0.6s infinite backwards;
  }

  @keyframes eintritt {
    from {
      opacity: 0;
      transform: translateY(1.1rem);
    }

    to {
      opacity: 1;
      transform: none;
    }
  }

  @keyframes eintritt-fest {
    from {
      transform: translateY(1rem);
    }

    to {
      transform: none;
    }
  }

  @keyframes von-oben {
    from {
      opacity: 0;
      transform: translateY(-0.75rem);
    }

    to {
      opacity: 1;
      transform: none;
    }
  }

  @keyframes sonnenaufgang {
    from {
      scale: 0.35 1;
    }

    to {
      scale: 1 1;
    }
  }

  @keyframes atem {
    /* einatmen: zügig aufsteigen (0 → ~2,2 s) */
    0% {
      opacity: 0.3;
      transform: scale(0.985);
      animation-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
    }

    /* oben kurz halten (~2,2 → 2,6 s) */
    28% {
      opacity: 0.62;
      transform: scale(1.065);
      animation-timing-function: linear;
    }

    /* ausatmen: länger und weicher absinken (~2,6 → 6,6 s) */
    33% {
      opacity: 0.62;
      transform: scale(1.065);
      animation-timing-function: cubic-bezier(0.45, 0, 0.55, 1);
    }

    /* unten kurze Ruhepause (~6,6 → 8 s) */
    83%,
    100% {
      opacity: 0.3;
      transform: scale(0.985);
    }
  }

  /* Heller Bereich: Abschnitte steigen beim Scrollen sanft auf.
     Gesteuert per IntersectionObserver (Inline-Skript im <head>) — läuft
     auch auf iOS/Safari. Die .reveal-on-scroll-Klasse setzt das Skript nur,
     wenn JS läuft UND Bewegung erwünscht ist; ohne JS bleibt alles sichtbar. */
  .reveal-on-scroll [data-reveal] {
    opacity: 0;
    transform: translateY(1.1rem);
    transition: opacity var(--dur-entrance) var(--ease-out),
      transform var(--dur-entrance) var(--ease-out);
  }

  .reveal-on-scroll [data-reveal].is-in {
    opacity: 1;
    transform: none;
  }
}

@media (min-width: 48rem) {
  .hero .container {
    padding-block: calc(var(--space-9) + var(--space-8)) var(--space-9);
  }
}

/* Ab Desktop bleibt der warme Schein derselbe feste Halo hinter der Headline
   wie mobil (Basis-Regel) — er füllt bewusst NICHT die ganze linke Seite als
   Band, sondern sitzt gezielt hinter den Worten. Nur der Schutz-Schleier
   entfällt hier: Die Headline ist weiß, der Schein bleibt oben, und der graue
   Fließtext darunter sitzt auf ruhigem, dunklem Grund. */
@media (min-width: 64rem) {
  .hero::after {
    display: none;
  }
}

/* ── Unterseiten-Kopf „früher Morgen" (Kontaktseite, Slice #15) ──────────────
   Subseiten haben keinen großen Hero, aber der absolut positionierte Header ist
   hell — er braucht dunklen Grund darunter, sonst verschwindet er. Dieselbe
   Erzählung wie die Startseite: dunkler Morgen oben → heller Tag darunter. */
.seiten-kopf {
  position: relative;
  overflow: hidden;
  background: linear-gradient(
    180deg,
    var(--color-surface-darker) 0%,
    var(--color-surface-dark) 70%,
    var(--color-primary) 100%
  );
  color: var(--color-text-on-dark);
}

.seiten-kopf .container {
  display: grid;
  gap: var(--space-4);
  justify-items: start;
  max-width: var(--hero-measure);
  padding-block: calc(var(--space-9) + var(--space-5)) var(--space-8);
}

.seiten-kopf h1 {
  font-family: var(--font-display);
  font-size: var(--text-display);
  line-height: var(--leading-tight);
  font-weight: 600;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

.seiten-kopf h1 em {
  font-family: var(--font-accent);
  font-style: italic;
  font-weight: 500;
  color: var(--color-accent-soft);
}

.kopf-text {
  font-size: var(--text-lg);
  line-height: var(--leading-body);
  color: var(--color-text-muted-on-dark);
  max-width: 40rem;
}

/* ── Erstgespräch-Formular ───────────────────────────────────────────────── */
.erstgespraech h2 em,
.andere-wege h2 em {
  font-family: var(--font-accent);
  font-style: italic;
  font-weight: 500;
  color: var(--color-primary);
}

.formular {
  display: grid;
  gap: var(--space-5);
  max-width: 34rem;
  margin-top: var(--space-6);
}

.feld {
  display: grid;
  gap: var(--space-2);
}

.feld label {
  font-weight: 600;
  color: var(--color-ink);
}

.feld .optional {
  font-weight: 400;
  color: var(--color-text-muted);
}

.feld input,
.feld textarea {
  width: 100%;
  min-height: var(--tap-min);
  padding: var(--space-3) var(--space-4);
  font: inherit;
  color: var(--color-ink);
  background: var(--color-bg);
  border: 1px solid var(--color-border-input);
  border-radius: var(--radius-md);
  transition: border-color var(--dur-quick) var(--ease-out),
    box-shadow var(--dur-quick) var(--ease-out);
}

.feld textarea {
  resize: vertical;
  line-height: var(--leading-body);
}

.feld input::placeholder,
.feld textarea::placeholder {
  color: var(--color-text-muted);
  opacity: 0.75;
}

.feld input:focus-visible,
.feld textarea:focus-visible {
  outline: var(--focus-ring-light);
  outline-offset: 1px;
  border-color: var(--color-primary);
}

.feld input:hover,
.feld textarea:hover {
  border-color: var(--color-primary);
}

.feld.hat-fehler input,
.feld.hat-fehler textarea {
  border-color: var(--color-error);
  box-shadow: 0 0 0 1px var(--color-error);
}

.feld-fehler {
  color: var(--color-error-text);
  font-size: var(--text-sm);
  font-weight: 600;
}

.feld-gruppe-hinweis {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  margin-bottom: calc(-1 * var(--space-3));
}

.eingabe-hinweis,
.versand-fehler {
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-md);
  border-left: 3px solid var(--color-accent);
  background: var(--color-tint-warm);
  color: var(--color-ink);
  max-width: 40rem;
}

.versand-fehler {
  display: grid;
  gap: var(--space-3);
}

.versand-fehler-wege {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.formular-fuss {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

/* Danke-Zustand */
.danke {
  display: grid;
  gap: var(--space-4);
  max-width: 44rem;
}

.danke h2 {
  font-size: var(--text-xl);
  font-weight: 800;
}

.danke h2 em {
  font-family: var(--font-accent);
  font-style: italic;
  font-weight: 500;
  color: var(--color-primary);
}

.danke p {
  color: var(--color-text-muted);
  max-width: 60ch;
}

.andere-wege {
  padding-top: 0;
}

.andere-wege .container {
  display: grid;
  gap: var(--space-4);
  justify-items: start;
}

/* Honeypot: für Menschen unsichtbar (nicht display:none — Bots meiden das),
   bleibt aber im DOM und wird abgeschickt. */
.hp-falle {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ── Startseite: Abschnitte unter dem Hero (Slice #16) ─────────────────────────
   Erzählung „Morgen → Tag" läuft weiter: heller Grund, sanft getönte Abschnitte
   für Rhythmus, jeder Abschnitt mündet sichtbar im Erstgespräch-CTA. */

.abschnitt.getoent {
  background: var(--color-tint-cool);
}

.abschnitt-lead {
  margin-top: var(--space-3);
  font-size: var(--text-lg);
  color: var(--color-ink);
  max-width: 46ch;
}

/* Text-Link mit wanderndem Pfeil (Situations-Anker & Teaser) */
.text-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--tap-min);
  font-weight: 700;
  color: var(--color-primary);
  text-decoration: none;
}

.text-link::after {
  content: "→";
  transition: transform var(--dur-quick) var(--ease-out);
}

.text-link:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.text-link:hover::after {
  transform: translateX(3px);
}

/* Themen-Einstiege („Situations-Anker") */
.karten-raster {
  margin-top: var(--space-6);
  display: grid;
  gap: var(--space-5);
}

.thema-karte {
  display: grid;
  gap: var(--space-3);
  align-content: start;
  padding: var(--space-6);
  background: var(--color-bg);
  border: 1px solid var(--color-tint-cool);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-rest);
}

.thema-label {
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-primary);
}

.thema-karte h3 {
  font-size: var(--text-lg);
  font-weight: 800;
  line-height: var(--leading-tight);
  letter-spacing: -0.01em;
  color: var(--color-ink);
}

.thema-karte p {
  color: var(--color-text-muted);
  max-width: none;
}

.thema-karte .text-link {
  margin-top: var(--space-1);
}

/* „So läuft's ab" — drei nummerierte Schritte */
.schritte {
  margin: var(--space-6) 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--space-5);
}

.schritt {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-2) var(--space-5);
  align-items: start;
}

.schritt-nr {
  grid-row: 1 / span 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--radius-pill);
  background: var(--color-accent);
  color: var(--color-on-accent);
  font-weight: 800;
  font-size: var(--text-lg);
}

.schritt h3 {
  font-size: var(--text-lg);
  font-weight: 800;
  color: var(--color-ink);
}

.schritt p {
  color: var(--color-text-muted);
}

/* Preis-Transparenz */
.preis-liste {
  margin: var(--space-6) 0 0;
  display: grid;
  gap: 0;
  max-width: 34rem;
}

.preis-zeile {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2) var(--space-4);
  padding-block: var(--space-3);
  border-bottom: 1px solid var(--color-tint-cool);
}

.preis-zeile dt {
  min-width: 9rem;
  font-weight: 700;
  color: var(--color-ink);
}

.preis-zeile dd {
  margin: 0;
  color: var(--color-text-muted);
}

.preis-wert {
  font-weight: 800;
  color: var(--color-ink);
}

.preis-hinweis {
  margin-top: var(--space-5);
  color: var(--color-text-muted);
  max-width: 52ch;
}

/* Über-mich-Teaser. Das dunkle Panel hält vorerst einen Leitsatz; das Portrait
   (miriam-portrait.jpg) kommt mit #23 an dieselbe Stelle. */
.ueber-raster {
  display: grid;
  gap: var(--space-6);
  align-items: center;
}

.ueber-bild {
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  min-height: 15rem;
  padding: var(--space-7) var(--space-6);
  border-radius: var(--radius-md);
  background: linear-gradient(
    155deg,
    var(--color-surface-darker) 0%,
    var(--color-surface-dark) 55%,
    var(--color-primary) 100%
  );
}

.ueber-bild::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    18rem 14rem at 30% 22%,
    var(--color-accent) 0%,
    transparent 70%
  );
  opacity: 0.32;
  pointer-events: none;
}

/* Foto-Variante des Morgenlicht-Panels (Slice #23): Bestandsfoto füllt den
   Rahmen randlos, Seitenverhältnis 4:5 hält den Platz frei (kein Layout-Shift). */
.ueber-bild--foto {
  margin: 0;
  padding: 0;
  min-height: 0;
  aspect-ratio: 4 / 5;
}

.ueber-bild--foto::before {
  display: none;
}

.ueber-bild--foto picture {
  display: contents;
}

.ueber-foto {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ueber-zitat {
  position: relative;
  max-width: 20ch;
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  font-size: var(--text-xl);
  line-height: var(--leading-tight);
  text-align: center;
  color: var(--color-text-on-dark);
}

.ueber-text {
  display: grid;
  gap: var(--space-4);
  justify-items: start;
}

.ueber-text p {
  color: var(--color-text-muted);
}

/* FAQ — Akkordeon ohne JavaScript (Inhalt bleibt im DOM, auch geschlossen) */
.faq-liste {
  margin-top: var(--space-6);
  display: grid;
  gap: 0;
  max-width: 46rem;
}

.faq-item {
  border-bottom: 1px solid var(--color-tint-cool);
}

.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: var(--tap-min);
  padding: var(--space-4) 0;
  font-weight: 700;
  color: var(--color-ink);
  cursor: pointer;
  list-style: none;
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary::after {
  content: "";
  flex: none;
  width: 0.7rem;
  height: 0.7rem;
  border-right: 2px solid var(--color-primary);
  border-bottom: 2px solid var(--color-primary);
  transform: rotate(45deg);
  transition: transform var(--dur-quick) var(--ease-out);
}

.faq-item[open] summary::after {
  transform: rotate(-135deg);
}

.faq-antwort {
  padding-bottom: var(--space-4);
}

.faq-antwort p {
  color: var(--color-text-muted);
  max-width: 68ch;
}

@media (min-width: 48rem) {
  .karten-raster {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-6);
  }

  .ueber-raster {
    grid-template-columns: 0.85fr 1fr;
    gap: var(--space-8);
  }
}

/* ── Über-mich-Seite (Slice #17) ───────────────────────────────────────────── */

/* Porträt-Rahmen: reserviert schon jetzt das Seitenverhältnis 4:5, damit das
   echte Bild (#23) ohne Layout-Shift einrücken kann. Bis dahin trägt der Rahmen
   denselben Morgenlicht-Verlauf wie das Panel des Startseiten-Teasers. */
.ueber-bild--portrait {
  margin: 0;
  aspect-ratio: 4 / 5;
  min-height: 0;
}

/* Qualifikationen: links der Titel, rechts die Alltagsübersetzung. */
.quali-liste {
  margin: var(--space-6) 0 0;
  display: grid;
  gap: 0;
  max-width: 48rem;
}

.quali-zeile {
  display: grid;
  gap: var(--space-1) var(--space-6);
  padding-block: var(--space-4);
  border-bottom: 1px solid var(--color-tint-cool);
}

.quali-zeile dt {
  font-weight: 700;
  color: var(--color-ink);
}

.quali-zeile dt abbr {
  text-decoration-color: var(--color-accent);
}

.quali-zeile dd {
  margin: 0;
  color: var(--color-text-muted);
}

.iaus-hinweis {
  margin-top: var(--space-6);
  max-width: 60ch;
  color: var(--color-text-muted);
}

.schwestern a {
  font-weight: 700;
}

/* Footer: Seiten-Navigation & Schwestermarken-Referenz */
.footer-nav {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: var(--space-1) var(--space-5);
}

.footer-nav a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-min);
  color: var(--color-text-muted-on-dark);
  font-weight: 500;
  text-decoration: none;
  transition: color var(--dur-quick) var(--ease-out);
}

.footer-nav a:hover,
.footer-nav a:focus-visible {
  color: var(--color-accent-soft);
}

.footer-schwestern a {
  white-space: nowrap;
}

@media (min-width: 48rem) {
  .quali-zeile {
    grid-template-columns: 15rem 1fr;
    align-items: baseline;
  }
}

/* ── Ratgeber (Slice #21) ──────────────────────────────────────────────────
   Übersichtsseite + Langtext-Artikel. Dieselbe Erzählung „Morgen → Tag" wie
   überall: dunkler Kopf, heller Lesebereich. Die Übersicht nutzt das
   bestehende Karten-Raster; neu sind nur die Lese-Typografie (schmale
   Spalte, ruhiger Rhythmus), der „Das kannst du heute tun"-Block, der sanfte
   CTA und die Autorin-Box. */

/* Meta-Zeile im dunklen Kopf: Lesezeit + Autorin */
.artikel-meta {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  font-size: var(--text-sm);
  color: var(--color-text-muted-on-dark);
}

.artikel-meta li {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
}

.artikel-meta li + li::before {
  content: "";
  width: 3px;
  height: 3px;
  border-radius: var(--radius-pill);
  background: var(--color-accent);
}

/* Lese-Spalte: schmaler als der Container, ruhiger Fließtext */
.prosa {
  max-width: 40rem;
}

.prosa > * + * {
  margin-top: var(--space-4);
}

.prosa .artikel-lead {
  font-size: var(--text-lg);
  color: var(--color-ink);
}

.prosa h2 {
  margin-top: var(--space-7);
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--color-ink);
}

.prosa h2 em,
.prosa h3 em {
  font-family: var(--font-accent);
  font-style: italic;
  font-weight: 500;
  color: var(--color-primary);
}

.prosa h3 {
  margin-top: var(--space-6);
  font-size: var(--text-lg);
  font-weight: 800;
  color: var(--color-ink);
}

.prosa p {
  color: var(--color-text-muted);
  max-width: none;
}

.prosa strong {
  color: var(--color-ink);
  font-weight: 700;
}

.prosa ul,
.prosa ol {
  margin: 0;
  padding-left: var(--space-5);
  color: var(--color-text-muted);
  display: grid;
  gap: var(--space-2);
}

.prosa li {
  padding-left: var(--space-1);
}

.prosa a:not(.text-link):not(.btn) {
  color: var(--color-primary);
  font-weight: 600;
  text-underline-offset: 3px;
}

/* Kurz-Zitat als Atem-Anker im Fließtext (Miriams Kernsätze) */
.prosa blockquote {
  margin: var(--space-6) 0;
  padding-left: var(--space-5);
  border-left: 3px solid var(--color-accent);
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--text-xl);
  line-height: var(--leading-tight);
  color: var(--color-ink);
}

/* „Das kannst du heute tun" — konkrete, sanfte Schritte */
.heute-tun .container {
  max-width: 46rem;
}

.heute-tun h2 {
  font-size: var(--text-xl);
  font-weight: 800;
}

.heute-tun h2 em {
  font-family: var(--font-accent);
  font-style: italic;
  font-weight: 500;
  color: var(--color-primary);
}

.heute-tun-liste {
  margin: var(--space-6) 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--space-4);
}

.heute-tun-liste li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-4);
  align-items: start;
  color: var(--color-text-muted);
}

.heute-tun-liste li::before {
  content: "";
  margin-top: 0.55rem;
  width: 0.6rem;
  height: 0.6rem;
  border-radius: var(--radius-pill);
  background: var(--color-accent);
}

.heute-tun-liste strong {
  color: var(--color-ink);
}

/* Sanfter CTA-Block im Artikel: leiser als der End-CTA, führt zur passenden
   Begleitung. Getönte Karte mit einer klaren Handlung. */
.sanfter-cta .container {
  max-width: 46rem;
}

.sanfter-cta-karte {
  display: grid;
  gap: var(--space-4);
  justify-items: start;
  padding: var(--space-7) var(--space-6);
  border-radius: var(--radius-md);
  background: var(--color-tint-cool);
  border: 1px solid var(--color-tint-cool-hover);
}

.sanfter-cta-karte h2 {
  font-size: var(--text-lg);
  font-weight: 800;
  color: var(--color-ink);
  max-width: none;
}

.sanfter-cta-karte h2 em {
  font-family: var(--font-accent);
  font-style: italic;
  font-weight: 500;
  color: var(--color-primary);
}

.sanfter-cta-karte p {
  color: var(--color-text-muted);
}

/* „Weiterlesen" — verwandte Artikel, kein Text ist eine Sackgasse */
.weiterlesen .container {
  max-width: 60rem;
}

.weiterlesen h2 {
  font-size: var(--text-lg);
  font-weight: 800;
}

.weiterlesen-liste {
  margin: var(--space-6) 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--space-5);
}

.weiterlesen-liste a {
  display: grid;
  gap: var(--space-1);
  padding-block: var(--space-4);
  border-top: 1px solid var(--color-tint-cool);
  text-decoration: none;
  color: var(--color-ink);
}

.weiterlesen-liste a:hover .weiterlesen-titel {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.weiterlesen-titel {
  font-weight: 800;
  color: var(--color-ink);
}

.weiterlesen-teaser {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

/* Autorin-Box: dezent (Name + kurze Vorstellung + Porträt-Platzhalter).
   Der i.A.u.S.-Status wird NICHT hier wiederholt, sondern sitewide über den
   Footer (partials/iaus.html) ausgewiesen; partials/iaus-hinweis.html bleibt
   der „Über mich"-Seite vorbehalten (siehe docs/leistungsseiten-muster.md). */
.autorin .container {
  max-width: 46rem;
}

.autorin-karte {
  display: grid;
  gap: var(--space-5);
  padding: var(--space-6);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-tint-cool);
  background: var(--color-bg);
}

.autorin-bild {
  aspect-ratio: 1 / 1;
  width: 4.5rem;
  border-radius: var(--radius-pill);
  background: linear-gradient(
    155deg,
    var(--color-surface-darker) 0%,
    var(--color-surface-dark) 55%,
    var(--color-primary) 100%
  );
}

.autorin-name {
  font-weight: 800;
  color: var(--color-ink);
}

.autorin-karte p {
  color: var(--color-text-muted);
  max-width: 60ch;
}

.mehr-link {
  margin-top: var(--space-6);
}

.artikel-card-titel {
  color: var(--color-ink);
  text-decoration: none;
}

.thema-karte h3 a {
  color: inherit;
  text-decoration: none;
}

.thema-karte h3 a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media (min-width: 48rem) {
  .autorin-karte {
    grid-template-columns: auto 1fr;
    align-items: start;
    gap: var(--space-6);
  }

  .weiterlesen-liste {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-6);
  }

  .weiterlesen-liste a {
    border-top: 0;
    border-left: 1px solid var(--color-tint-cool);
    padding-block: 0;
    padding-left: var(--space-5);
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Design-System-Komponenten (Umbau 4, Slice #30)
   Wiederverwendbare Bausteine nach den Referenz-Templates in
   docs/design-referenz/ (Startseite verbindlich abgenommen). Alles über die
   semantischen Tokens. Vorerst nur die Startseite nutzt diese Klassen; spätere
   Etappen ziehen Leistungs-, Ratgeber- und Themenseiten auf dieselbe Basis.
   Die alten Klassen (.abschnitt, .thema-karte, .schritte, .preis-liste …)
   bleiben unangetastet, weil andere Seiten sie noch tragen.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Abschnitts-Label über der Überschrift — warmes Gold, Versalien, weit gesperrt */
.sektion-label {
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-accent);
}

.auf-dunkel .sektion-label,
.sektion.dunkel .sektion-label {
  color: var(--color-accent-soft);
}

/* Sektion — großzügiger, editorialer Rhythmus des Design-Systems */
.sektion {
  padding-block: var(--space-9);
}

.sektion.getoent {
  background: var(--color-tint-cool);
}

.sektion.dunkel {
  background: var(--color-surface-dark);
  color: var(--color-text-on-dark);
}

/* Sektion-Kopf: Label, große Cormorant-Überschrift, Lead */
.sektion-kopf {
  display: grid;
  gap: var(--space-3);
  max-width: 42rem;
}

.sektion-kopf.mittig {
  margin-inline: auto;
  justify-items: center;
  text-align: center;
}

.sektion-kopf h2 {
  font-family: var(--font-display);
  font-size: var(--text-titel);
  line-height: 1.14;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--color-ink);
  text-wrap: balance;
}

.sektion.dunkel .sektion-kopf h2 {
  color: var(--color-text-on-dark);
}

.sektion-kopf h2 em {
  color: var(--color-primary);
}

.sektion.dunkel .sektion-kopf h2 em {
  color: var(--color-accent-soft);
}

.sektion-kopf .lead {
  font-size: var(--text-lg);
  color: var(--color-text-muted);
  max-width: 52ch;
}

.sektion.dunkel .sektion-kopf .lead {
  color: var(--color-text-muted-on-dark);
}

/* Zitatband — schmaler Streifen zwischen Hero und Inhalt (Miriams Kernsatz) */
.zitatband {
  background: var(--color-surface-darker);
  color: var(--color-accent-soft);
  text-align: center;
  padding-block: var(--space-4);
}

.zitatband p {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--text-lg);
  color: var(--color-accent-soft);
}

/* Karten-Raster */
.raster {
  margin-top: var(--space-7);
  display: grid;
  gap: var(--space-5);
}

@media (min-width: 48rem) {
  .raster--zwei {
    grid-template-columns: repeat(2, 1fr);
  }

  .raster--drei {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Kicker (kleines Kategorie-Label) in Karten */
.karten-kicker {
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-accent);
}

/* Inhalts-Karte (Themen, Ratgeber) — weiße Fläche auf Papier, sanfter Lift */
.inhalt-karte {
  position: relative;
  display: grid;
  gap: var(--space-3);
  align-content: start;
  padding: var(--space-6) var(--space-6);
  background: var(--color-surface-card);
  border: 1px solid var(--hairline-ink);
  border-radius: var(--radius-lg);
  transition: transform var(--dur-calm) var(--ease-out),
    box-shadow var(--dur-calm) var(--ease-out);
}

.inhalt-karte:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-card);
}

.inhalt-karte h3 {
  font-size: var(--text-lg);
  font-weight: 700;
  line-height: var(--leading-tight);
  letter-spacing: -0.01em;
  color: var(--color-ink);
}

.inhalt-karte h3 a {
  color: inherit;
  text-decoration: none;
}

.inhalt-karte h3 a:hover {
  color: var(--color-primary);
}

.inhalt-karte p {
  color: var(--color-text-muted);
}

.inhalt-karte .text-link {
  margin-top: var(--space-2);
}

/* Ganze Karte klickbar über den Pfeil-Link; Überschrift-Link bleibt separat
   fokussierbar (liegt über dem Overlay). */
.inhalt-karte .text-link::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

.inhalt-karte h3 a {
  position: relative;
  z-index: 1;
}

.inhalt-karte--kompakt {
  padding: var(--space-5) var(--space-5);
}

.inhalt-karte--kompakt h3 {
  font-size: var(--text-base);
}

/* Leistungs-Karte (Angebot) — Icon-Plakette, Kicker, Titel, Text, Link */
.leistung-karte {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--space-6) var(--space-5);
  background: var(--color-surface-card);
  border: 1px solid var(--hairline-ink);
  border-radius: var(--radius-lg);
  transition: transform var(--dur-calm) var(--ease-out),
    box-shadow var(--dur-calm) var(--ease-out);
}

.leistung-karte:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-card);
}

.leistung-karte__icon {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  margin-bottom: var(--space-4);
  border-radius: 0.8rem;
  background: var(--color-surface-dark);
  color: var(--color-accent-soft);
}

.leistung-karte__icon svg {
  width: 1.5rem;
  height: 1.5rem;
}

.leistung-karte h3 {
  margin: var(--space-2) 0 var(--space-2);
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--color-ink);
}

.leistung-karte p {
  flex: 1;
  color: var(--color-text-muted);
}

.leistung-karte .text-link {
  margin-top: var(--space-3);
}

.leistung-karte .text-link::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

/* Ablauf-Karte — große Serif-Kursiv-Ziffer in einer ruhigen Karte */
.ablauf-karte {
  padding: var(--space-6) var(--space-5);
  background: var(--color-surface-card);
  border: 1px solid var(--hairline-ink);
  border-radius: var(--radius-lg);
}

.sektion.getoent .ablauf-karte {
  background: var(--color-bg);
}

.ablauf-karte__nr {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 2.25rem;
  line-height: 1;
  color: var(--color-accent);
}

.ablauf-karte h3 {
  margin-top: var(--space-3);
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--color-ink);
}

.ablauf-karte p {
  margin-top: var(--space-2);
  color: var(--color-text-muted);
}

.mittig-cta {
  margin-top: var(--space-7);
  display: flex;
  justify-content: center;
}

/* Kosten-Karten — auf dunkler Sektion, große Serif-Preise mit Gold-Rahmen */
.kosten-karte {
  padding: var(--space-6) var(--space-6);
  border: 1px solid var(--hairline-gold-stark);
  border-radius: var(--radius-lg);
}

.kosten-karte__label {
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-accent-soft);
}

.kosten-karte__preis {
  margin-top: var(--space-3);
  font-family: var(--font-serif);
  font-size: 2.75rem;
  line-height: 1;
  color: var(--color-text-on-dark);
}

.kosten-karte__meta {
  margin-top: var(--space-2);
  color: var(--color-text-muted-on-dark);
}

.kosten-hinweis {
  margin-top: var(--space-6);
  max-width: 60ch;
  color: var(--color-text-muted-on-dark);
}

/* Medien-Split — Foto + Text nebeneinander (Über-mich-Teaser) */
.medien-split {
  display: grid;
  gap: var(--space-6);
  align-items: center;
}

.medien-split__foto {
  margin: 0;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-soft);
}

.medien-split__foto picture {
  display: contents;
}

.medien-split__foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.medien-split__text {
  display: grid;
  gap: var(--space-4);
  justify-items: start;
}

.medien-split__text p {
  color: var(--color-text-muted);
}

@media (min-width: 48rem) {
  .medien-split {
    grid-template-columns: 0.95fr 1.05fr;
    gap: var(--space-8);
  }
}

/* Design-System-FAQ — Akkordeon mit Plus/Minus-Zeichen, breitere Lese-Spalte */
.faq-ds {
  margin-top: var(--space-7);
  margin-inline: auto;
  max-width: 50rem;
  display: grid;
  gap: 0;
}

.faq-ds .faq-item {
  border-bottom: 1px solid var(--hairline-ink);
}

.faq-ds summary {
  font-size: var(--text-lg);
}

.faq-ds summary::after {
  content: "";
  flex: none;
  width: 1.4rem;
  height: 1.4rem;
  border: 0;
  transform: none;
  /* Plus: waagerechter + senkrechter Gold-Balken. Beim Öffnen entfällt der
     senkrechte Balken → Minus. */
  background:
    linear-gradient(var(--color-primary) 0 0) center / 1.4rem 2px no-repeat,
    linear-gradient(var(--color-primary) 0 0) center / 2px 1.4rem no-repeat;
}

.faq-ds .faq-item[open] summary::after {
  background:
    linear-gradient(var(--color-primary) 0 0) center / 1.4rem 2px no-repeat;
}

/* Text-Link auf dunkler Sektion (z. B. Kosten): Gold statt Navy, sonst unsichtbar */
.sektion.dunkel .text-link {
  color: var(--color-accent-soft);
}

/* ══════════════════════════════════════════════════════════════════════════
   Ratgeber-Redesign (Umbau 7, #33) — nach den Ratgeber-Templates des
   Design-Systems. Übersicht: Kopf mit Foto, hervorgehobener erster Beitrag,
   dreispaltiges Beitrags-Raster. Artikel: Rücksprung-Link + ruhiges Lese-Foto.
   Rein additiv: bestehende Bausteine (prosa, heute-tun, sanfter-cta,
   weiterlesen, autorin) bleiben unverändert.
   ══════════════════════════════════════════════════════════════════════════ */

/* — Übersichts-Kopf mit Seerosen-Foto — */
.seiten-kopf--foto .container {
  max-width: var(--container-max);
  gap: var(--space-6);
}

.kopf-inhalt {
  display: grid;
  gap: var(--space-4);
  justify-items: start;
  max-width: var(--hero-measure);
}

.kopf-foto {
  margin: 0;
  position: relative;
  justify-self: start;
}

/* Bernstein-Rahmen, versetzt hinter dem Bild (Template .accent) */
.kopf-foto::before {
  content: "";
  position: absolute;
  inset: 0;
  transform: translate(var(--space-3), var(--space-3));
  border: 1px solid var(--color-accent-soft);
  border-radius: var(--radius-md);
  opacity: 0.5;
  pointer-events: none;
}

.kopf-foto img {
  position: relative;
  width: 15rem;
  max-width: 62vw;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-accent-soft);
  box-shadow: var(--shadow-lift);
}

@media (min-width: 60rem) {
  .seiten-kopf--foto .container {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    column-gap: var(--space-8);
  }

  .kopf-foto {
    justify-self: end;
  }

  .kopf-foto img {
    width: 18rem;
    max-width: none;
  }
}

/* — Abschnitts-Augenbraue über der Überschrift — */
.abschnitt-eyebrow {
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: var(--space-2);
}

/* — Hervorgehobener erster Beitrag (Foto + Text) — */
.ratgeber-featured {
  margin-top: var(--space-6);
  display: grid;
  grid-template-columns: 1fr;
  background: var(--color-bg);
  border: 1px solid var(--color-tint-cool);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-rest);
  transition:
    transform var(--dur-quick) var(--ease-out),
    box-shadow var(--dur-quick) var(--ease-out);
}

.ratgeber-featured:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lift);
}

.featured-foto {
  margin: 0;
  min-height: 14rem;
}

.featured-foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.featured-inhalt {
  display: grid;
  gap: var(--space-3);
  align-content: center;
  justify-items: start;
  padding: var(--space-6);
}

.featured-inhalt h3 {
  font-size: var(--text-xl);
  font-weight: 800;
  line-height: var(--leading-tight);
  letter-spacing: -0.015em;
}

.featured-inhalt h3 a {
  color: var(--color-ink);
  text-decoration: none;
}

.featured-inhalt h3 a:hover {
  color: var(--color-primary);
}

.featured-inhalt p {
  color: var(--color-text-muted);
  max-width: none;
}

@media (min-width: 48rem) {
  .ratgeber-featured {
    grid-template-columns: 1.05fr 1fr;
  }

  .featured-inhalt {
    padding: var(--space-7);
  }
}

/* — Dreispaltiges Beitrags-Raster (Modifier zum bestehenden karten-raster) — */
.karten-raster--ratgeber {
  margin-top: var(--space-5);
}

@media (min-width: 40rem) {
  .karten-raster--ratgeber {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 64rem) {
  .karten-raster--ratgeber {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* — Rücksprung-Link im Artikel-Kopf — */
.zurueck-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-height: var(--tap-min);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text-muted-on-dark);
}

.zurueck-link:hover {
  color: var(--color-accent-soft);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* — Font-Swap-Stabilität nur für die Ratgeber-Köpfe: die langen Artikel-
     Überschriften kippten beim Cormorant-Swap die Kopfhöhe um (Layout-Shift).
     0.43 ist Cormorants x-Höhen-Verhältnis; wirkt nur auf den kurzen Fallback-
     Render, die geladene Schrift bleibt unverändert. Bewusst auf die Ratgeber-
     Köpfe begrenzt (übrige Seiten unangetastet — eigene Etappe). */
.seiten-kopf--foto h1,
.seiten-kopf--artikel h1 {
  font-size-adjust: 0.43;
}

/* — Ruhiges Lese-Foto zwischen Kopf und Fließtext — */
.artikel-figur {
  margin: 0 0 var(--space-7);
  max-width: 54rem;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-lift);
}

.artikel-figur img {
  width: 100%;
  height: auto;
  display: block;
}

/* ============================================================
   Leistungsseiten-Muster (Umbau 5, #31)
   Layout aus dem abgenommenen Mediation-Template portiert und in
   die semantischen Tokens übersetzt. Alle Klassennamen sind
   projektweit frei (keine Kollision mit der noch alten Startseite);
   der Kopf heißt .lp-hero, damit die Startseiten-.hero unberührt
   bleibt (Umbau 3 folgt separat). Fotos ergänzt, keine neuen
   sichtbaren Texte. Farben a11y-sicher: Labels/Kicker in Navy
   (Gold auf Papier hält den Kontrast nicht), Schritt-Nummer als
   gefüllter Gold-Chip, Gold nur auf Dunkel als Textfarbe.
   ============================================================ */

/* ── Unterseiten-Kopf (dunkel, Morgenlicht, optional Porträt) ── */
.lp-hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(
    180deg,
    var(--color-surface-darker) 0%,
    var(--color-surface-dark) 72%,
    var(--color-primary) 100%
  );
  color: var(--color-text-on-dark);
}

.lp-hero::before {
  /* Morgenlicht hinter der Headline, dezent (Kontrast bleibt ≥ 4,5:1,
     der Text sitzt ohnehin auf dem dunklen Verlauf). */
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    min(28rem, 58vw) min(22rem, 40vh) at 30% 12rem,
    var(--color-accent) 0%,
    transparent 70%
  );
  opacity: 0.32;
  pointer-events: none;
}

.lp-hero .container {
  position: relative;
  z-index: 1;
  padding-block: calc(var(--space-9) + var(--space-6)) var(--space-8);
}

.lp-hero__text {
  display: grid;
  gap: var(--space-5);
  justify-items: start;
  max-width: var(--hero-measure);
}

.lp-hero.hat-portrait .container {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-8);
  max-width: var(--container-max);
}

.lp-hero h1 {
  font-family: var(--font-display);
  font-size: var(--text-display);
  line-height: var(--leading-tight);
  font-weight: 600;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

.lp-hero h1 em {
  font-weight: 500;
  color: var(--color-accent-soft);
}

.lp-hero .divider {
  width: 3.5rem;
  height: 2px;
  border: 0;
  margin: 0;
  border-radius: var(--radius-pill);
  background: var(--color-accent);
}

.lp-hero .lede {
  font-size: var(--text-lg);
  line-height: var(--leading-body);
  color: var(--color-text-muted-on-dark);
  max-width: 40rem;
}

/* Porträt-Rahmen im Kopf (Foto, kein Text) */
.lp-hero__portrait {
  position: relative;
  width: min(19rem, 38vw);
  justify-self: end;
}

.lp-hero__portrait .rahmen {
  position: relative;
  aspect-ratio: 3 / 4;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--palette-gold) 30%, transparent);
  box-shadow: 0 40px 80px -40px rgb(0 0 0 / 70%);
}

.lp-hero__portrait .rahmen img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.lp-hero__portrait .akzent {
  position: absolute;
  inset: 0;
  transform: translate(0.9rem, 0.9rem);
  border: 1px solid color-mix(in srgb, var(--palette-gold) 42%, transparent);
  border-radius: var(--radius-md);
  z-index: -1;
  pointer-events: none;
}

/* ── Sektions-Gerüst ── */
.section {
  padding-block: var(--space-9);
}

.section.getoent {
  background: var(--color-tint-cool);
}

.section.dunkel {
  background: var(--color-surface-dark);
  color: var(--color-text-on-dark);
}

.sec-head {
  display: grid;
  gap: var(--space-3);
  max-width: 42rem;
}

.sec-head.mittig {
  margin-inline: auto;
  text-align: center;
  justify-items: center;
}

.sec-head h2 {
  font-size: clamp(1.75rem, 1.3rem + 2vw, 2.5rem);
  line-height: 1.14;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--color-ink);
}

.sec-head h2 em {
  font-family: var(--font-accent);
  font-style: italic;
  font-weight: 500;
  color: var(--color-primary);
}

.sec-head p {
  color: var(--color-text-muted);
  font-size: var(--text-lg);
  max-width: 48ch;
}

.section.dunkel .sec-head h2,
.section.dunkel .sec-head p {
  color: var(--color-text-on-dark);
}

.section.dunkel .sec-head h2 em {
  color: var(--color-accent-soft);
}

.section.dunkel .sec-head p {
  color: var(--color-text-muted-on-dark);
}

/* ── Raster ── */
.grid {
  display: grid;
  gap: var(--space-5);
  margin-top: var(--space-7);
}

.grid.cols-2 {
  grid-template-columns: repeat(2, 1fr);
}

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

/* ── Karte (Themen-/Querverweis-Kachel) ── */
.card {
  display: grid;
  gap: var(--space-3);
  align-content: start;
  padding: var(--space-6);
  background: var(--color-bg);
  border: 1px solid var(--color-tint-cool);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-rest);
  transition: transform var(--dur-calm) var(--ease-out),
    box-shadow var(--dur-calm) var(--ease-out);
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lift);
}

.kicker {
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-primary);
}

.card h3 {
  font-size: var(--text-lg);
  font-weight: 800;
  line-height: var(--leading-tight);
  letter-spacing: -0.01em;
  color: var(--color-ink);
}

.card h3 em {
  font-family: var(--font-accent);
  font-style: italic;
  font-weight: 500;
  color: var(--color-primary);
}

.card p {
  color: var(--color-text-muted);
}

.card .text-link {
  margin-top: var(--space-1);
}

@media (prefers-reduced-motion: reduce) {
  .card,
  .card:hover {
    transition: none;
    transform: none;
  }
}

/* ── Ablauf-Schritte (Gold-Chip-Nummer, a11y-sicher) ── */
.step {
  padding: var(--space-6);
  background: var(--color-bg);
  border: 1px solid var(--color-tint-cool);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-rest);
}

.step .num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--tap-min);
  height: var(--tap-min);
  border-radius: var(--radius-pill);
  background: var(--color-accent);
  color: var(--color-on-accent);
  font-weight: 800;
  font-size: var(--text-lg);
}

.step h3 {
  margin-top: var(--space-4);
  font-size: var(--text-lg);
  font-weight: 800;
  color: var(--color-ink);
}

.step p {
  margin-top: var(--space-2);
  color: var(--color-text-muted);
}

.center-cta {
  margin-top: var(--space-7);
  text-align: center;
}

/* ── Kosten-Kacheln (auf Dunkel) ── */
.cost {
  padding: var(--space-6);
  border: 1px solid color-mix(in srgb, var(--palette-gold) 28%, transparent);
  border-radius: var(--radius-lg);
}

.cost .label {
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-accent-soft);
}

.cost .price {
  margin-top: var(--space-3);
  font-family: var(--font-serif);
  font-size: clamp(2rem, 1.5rem + 2vw, 2.75rem);
  line-height: 1;
  color: var(--color-text-on-dark);
}

.cost .meta {
  margin-top: var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-text-muted-on-dark);
}

.cost-note {
  margin-top: var(--space-6);
  color: var(--color-text-muted-on-dark);
  max-width: 52ch;
}

/* ── FAQ-Akkordeon (Plus-Marke, JS-frei) ── */
.faq {
  max-width: 48rem;
  margin: var(--space-7) auto 0;
  display: flex;
  flex-direction: column;
}

.faq details {
  border-bottom: 1px solid var(--color-tint-cool);
}

.section.getoent .faq details {
  border-color: color-mix(in srgb, var(--color-ink) 12%, transparent);
}

.faq summary {
  list-style: none;
  cursor: pointer;
  min-height: var(--tap-min);
  padding-block: var(--space-5);
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--color-ink);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq summary .pl {
  position: relative;
  flex: none;
  width: 1.5rem;
  height: 1.5rem;
}

.faq summary .pl::before,
.faq summary .pl::after {
  content: "";
  position: absolute;
  background: var(--color-primary);
  border-radius: 2px;
}

.faq summary .pl::before {
  top: 50%;
  left: 2px;
  right: 2px;
  height: 2px;
  transform: translateY(-50%);
}

.faq summary .pl::after {
  left: 50%;
  top: 2px;
  bottom: 2px;
  width: 2px;
  transform: translateX(-50%);
  transition: transform var(--dur-quick) var(--ease-out);
}

.faq details[open] summary .pl::after {
  transform: translateX(-50%) scaleY(0);
}

.faq .ans {
  padding-block: 0 var(--space-5);
  color: var(--color-text-muted);
  max-width: 42rem;
}

/* ── Ruhiges Foto-Band (kein Text) ── */
.foto-band {
  overflow: hidden;
}

.foto-band img {
  width: 100%;
  height: clamp(14rem, 30vw, 22rem);
  object-fit: cover;
  display: block;
}

/* ── Responsiv ── */
@media (max-width: 60rem) {
  .grid.cols-2,
  .grid.cols-3 {
    grid-template-columns: 1fr;
  }

  .section {
    padding-block: var(--space-8);
  }

  .lp-hero.hat-portrait .container {
    grid-template-columns: 1fr;
  }

  .lp-hero__portrait {
    width: min(15rem, 62vw);
    justify-self: start;
    margin-top: var(--space-6);
  }

  .lp-hero__portrait .akzent {
    display: none;
  }
}