/* ==========================================================================
   Naturheilpraxis Anke Hägele
   Designsystem — "Die Iris als Landkarte"

   Die Irisdiagnose ist die Signaturmethode der Praxis. Die Iris liest den
   Körper als Karte: konzentrische Ringe, radiale Fasern, ein Zentrum.
   Dieselbe Geometrie steckt in der Sonnenblume des Logos. Sie ist deshalb
   das ordnende Prinzip der ganzen Seite — in den Abschnittsmarken, im
   Schwerpunkte-Diagramm und in den Hover-Zuständen.

   Farben stammen direkt aus dem Logo (per Pixelanalyse entnommen).
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */

:root {
  /* Waldgrün — aus dem Logo-Kreis und der Wortmarke (#183018) */
  --forest-900: #0d1c10;
  --forest-850: #12250f;
  --forest-800: #183018;
  --forest-700: #21401f;
  --forest-600: #2f5630;

  /* Salbei — aus den Blättern (#789060) */
  /* 4c6a39 statt 547040: Auf --parchment-deep ergab der hellere Ton nur
     4,37 statt der geforderten 4,5. Jetzt 4,86 dort und 5,84 auf Creme. */
  --sage-600: #4c6a39;
  --sage-500: #789060;
  --sage-400: #93a97d;
  --sage-300: #b3c4a0;
  --sage-200: #cdd8c0;

  /* Sonnenblumengold — aus den Blütenblättern (#CC9C24) */
  --gold-600: #a87d18;
  --gold-500: #cc9c24;
  --gold-400: #ddb457;
  --gold-200: #eddcb0;

  /* Beere — aus Figur und Schriftzug (#A81848) */
  --berry-700: #8a1039;
  --berry-600: #a81848;
  --berry-500: #c2265c;

  /* Papier & Tinte */
  --cream: #fbf8f2;
  --parchment: #f5efe3;
  --parchment-deep: #ece3d2;
  --ink: #16210f;
  --ink-soft: #47563d;
  --ink-faint: #5a6950;

  /* Semantisch */
  --bg: var(--parchment);
  --surface: var(--cream);
  --text: var(--ink);
  --text-soft: var(--ink-soft);
  --border: #ddd3bf;
  --border-strong: #c6b99e;

  /* Typografie */
  --font-display: "Fraunces", "Iowan Old Style", Georgia, "Times New Roman", serif;
  /* Signaturschrift des Hero: Haarstrich mit langen, fließenden Schlaufen
     und offenen, modernen Formen.
     Alternative mit noch besserer Lesbarkeit: "Playfair Italic".
     Corinthia hat nur den Schnitt 400. Deshalb bei Überschriften KEIN
     font-weight über 400 setzen — der Browser würde die Schrift sonst
     künstlich fetten und sie verliert genau ihre Leichtigkeit. */
  --font-signatur: "Corinthia", "Snell Roundhand", cursive;
  --font-body: "Inter Tight", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Fließende Typoskala — großzügig (density 3/10) */
  --step--1: clamp(0.83rem, 0.79rem + 0.18vw, 0.94rem);
  --step-0: clamp(1rem, 0.95rem + 0.24vw, 1.15rem);
  --step-1: clamp(1.2rem, 1.11rem + 0.44vw, 1.5rem);
  --step-2: clamp(1.44rem, 1.28rem + 0.79vw, 1.95rem);
  --step-3: clamp(1.73rem, 1.46rem + 1.34vw, 2.55rem);
  --step-4: clamp(2.07rem, 1.63rem + 2.19vw, 3.35rem);
  --step-5: clamp(2.49rem, 1.78rem + 3.53vw, 4.4rem);
  --step-6: clamp(2.99rem, 1.85rem + 5.68vw, 5.8rem);

  /* Raumskala — spacious */
  --space-3xs: 0.375rem;
  --space-2xs: 0.75rem;
  --space-xs: 1.125rem;
  --space-s: 1.5rem;
  --space-m: 2.25rem;
  --space-l: 3.5rem;
  --space-xl: 5rem;
  --space-2xl: 5.5rem;
  --space-3xl: 10rem;

  /* Maße */
  --measure: 62ch;
  --wrap: 74rem;
  --wrap-narrow: 42rem;

  /* Radien & Schatten */
  --r-s: 4px;
  --r-m: 10px;
  --r-l: 20px;
  --r-pill: 999px;
  --shadow-s: 0 1px 2px rgba(22, 33, 15, 0.05), 0 2px 8px rgba(22, 33, 15, 0.04);
  --shadow-m: 0 2px 4px rgba(22, 33, 15, 0.05), 0 12px 32px rgba(22, 33, 15, 0.07);
  --shadow-l: 0 4px 8px rgba(22, 33, 15, 0.06), 0 24px 60px rgba(22, 33, 15, 0.1);

  /* Bewegung */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 160ms;
  --dur: 260ms;
  --dur-slow: 520ms;
}

/* --------------------------------------------------------------------------
   2. Reset & Grundlagen
   -------------------------------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

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

/* Die Kopfzeile steht fest über dem Inhalt. Ohne diesen Abstand landet ein
   Ankersprung (z. B. "Preise") genau hinter der Leiste und die Überschrift
   des Ziels ist verdeckt. */
[id] {
  scroll-margin-top: 7.5rem;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.65;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

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

img {
  height: auto;
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
  font-variation-settings: "SOFT" 40, "WONK" 1;
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -0.015em;
  margin: 0;
  text-wrap: balance;
}

p {
  margin: 0;
  text-wrap: pretty;
}

a {
  color: inherit;
}

button {
  font: inherit;
  color: inherit;
  cursor: pointer;
}

ul,
ol {
  margin: 0;
  padding: 0;
}

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

.dark :focus-visible,
.hero :focus-visible,
.site-footer :focus-visible {
  outline-color: var(--gold-400);
}

::selection {
  background: var(--gold-200);
  color: var(--forest-800);
}

/* Sichtbar nur für Screenreader */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -120%);
  z-index: 200;
  background: var(--forest-800);
  color: var(--cream);
  padding: 0.75rem 1.5rem;
  border-radius: 0 0 var(--r-m) var(--r-m);
  text-decoration: none;
  font-size: var(--step--1);
  transition: transform var(--dur) var(--ease);
}

.skip-link:focus {
  transform: translate(-50%, 0);
}

/* --------------------------------------------------------------------------
   3. Layout-Bausteine
   -------------------------------------------------------------------------- */

.wrap {
  width: min(100% - 2.5rem, var(--wrap));
  margin-inline: auto;
}

@media (min-width: 48rem) {
  .wrap {
    width: min(100% - 5rem, var(--wrap));
  }
}

.wrap--narrow {
  width: min(100% - 2.5rem, var(--wrap-narrow));
  margin-inline: auto;
}

.section {
  padding-block: var(--space-2xl);
  position: relative;
}

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

.section--dark {
  background: var(--forest-800);
  color: var(--parchment);
}

.section--surface {
  background: var(--surface);
}

.section--deep {
  background: var(--parchment-deep);
}

.stack > * + * {
  margin-top: var(--flow, var(--space-s));
}

.prose {
  max-width: var(--measure);
}

.prose p + p {
  margin-top: var(--space-s);
}

/* --------------------------------------------------------------------------
   4. Typografische Komponenten
   -------------------------------------------------------------------------- */

/* Kleines Label in Versalien mit weiter Laufweite — greift die Wortmarke
   "NATURHEILPRAXIS" aus dem Logo auf. */
.eyebrow {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--sage-600);
  margin: 0 0 var(--space-s);
}

/* Die Wunschwand und der Abschluss haben eigene Hintergründe, sind aber
   ebenso dunkel — sie müssen dieselben hellen Textfarben erben, sonst
   steht dunkler Text auf dunklem Grund. */
.section--dark .eyebrow,
.wishes .eyebrow,
.closing .eyebrow {
  color: var(--gold-400);
}

/* Der Iris-Ring: konzentrische Kreise als Abschnittsmarke */
.eyebrow::before {
  content: "";
  flex: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1.5px solid currentColor;
  background:
    radial-gradient(circle, currentColor 0 2.5px, transparent 2.5px 4.5px,
      currentColor 4.5px 5.5px, transparent 5.5px);
}

.title {
  font-size: var(--step-4);
}

.title--lg {
  font-size: var(--step-5);
}

.title--sm {
  font-size: var(--step-3);
}

.lede {
  font-size: var(--step-1);
  line-height: 1.5;
  color: var(--text-soft);
  max-width: 54ch;
  font-weight: 300;
}

.section--dark .lede,
.wishes .lede,
.closing .lede {
  color: var(--sage-300);
}

/* Betonte Wörter in der Auszeichnungsschrift, kursiv */
.accent-word {
  font-style: italic;
  color: var(--berry-600);
  font-variation-settings: "SOFT" 60, "WONK" 1;
}

.section--dark .accent-word,
.wishes .accent-word,
.closing .accent-word,
.hero .accent-word {
  color: var(--gold-400);
}

.hero__title .accent-word,
.hero__quote .accent-word {
  font-style: normal;
  font-variation-settings: normal;
}

.quote-mark {
  font-family: var(--font-display);
  font-size: 3rem;
  line-height: 0.6;
  color: var(--gold-500);
  display: block;
  margin-bottom: var(--space-2xs);
}

/* --------------------------------------------------------------------------
   5. Buttons
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.95rem 1.6rem;
  min-height: 48px;
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  font-family: var(--font-body);
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: 0.04em;
  text-decoration: none;
  /* Knopfbeschriftungen brechen nie um — sonst wird der Knopf doppelt so
     hoch wie die anderen und die Fläche wirkt unproportioniert. */
  white-space: nowrap;
  cursor: pointer;
  transition:
    background-color var(--dur) var(--ease),
    color var(--dur) var(--ease),
    border-color var(--dur) var(--ease),
    transform var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease);
}

.btn__arrow {
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.16);
  transition: transform var(--dur) var(--ease);
}

.btn:hover .btn__arrow {
  transform: translateX(3px);
}

.btn--primary {
  background: var(--berry-600);
  color: #fff;
  box-shadow: var(--shadow-s);
}

.btn--primary:hover {
  background: var(--berry-700);
  transform: translateY(-2px);
  box-shadow: var(--shadow-m);
}

.btn--secondary {
  background: transparent;
  color: var(--forest-800);
  border-color: var(--border-strong);
}

.btn--secondary:hover {
  background: var(--forest-800);
  color: var(--cream);
  border-color: var(--forest-800);
  transform: translateY(-2px);
}

.btn--secondary .btn__arrow {
  background: rgba(22, 33, 15, 0.1);
}

.btn--secondary:hover .btn__arrow {
  background: rgba(255, 255, 255, 0.18);
}

.btn--ghost {
  background: rgba(251, 248, 242, 0.08);
  color: var(--cream);
  border-color: rgba(251, 248, 242, 0.35);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.btn--ghost:hover {
  background: var(--cream);
  color: var(--forest-800);
  border-color: var(--cream);
  transform: translateY(-2px);
}

.btn--ghost:hover .btn__arrow {
  background: rgba(22, 33, 15, 0.12);
}

/* Textlink mit unterstrichener Bewegung */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: 0.03em;
  color: var(--berry-600);
  text-decoration: none;
  padding-block: 0.35rem;
  border-bottom: 1px solid currentColor;
  transition: gap var(--dur) var(--ease), color var(--dur) var(--ease);
}

.link-arrow:hover {
  gap: 0.85rem;
  color: var(--berry-700);
}

.section--dark .link-arrow {
  color: var(--gold-400);
}

.section--dark .link-arrow:hover {
  color: var(--gold-200);
}

/* --------------------------------------------------------------------------
   6. Kopfzeile
   -------------------------------------------------------------------------- */

.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  padding-block: var(--space-3xs);
  transition: background-color var(--dur-slow) var(--ease),
    box-shadow var(--dur-slow) var(--ease), padding var(--dur-slow) var(--ease);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-s);
}

.site-header__logo {
  display: block;
  flex: none;
  line-height: 0;
}

.site-header__logo img {
  /* 113px: bei dieser Höhe ist die Versalhöhe von "NATURHEILPRAXIS" im Logo
     (9,64 % der Bildhöhe) genauso groß wie die der Navigation — 10,9 px. */
  height: clamp(70px, 11.4vw, 113px);
  width: auto;
  transition: height var(--dur-slow) var(--ease), filter var(--dur-slow) var(--ease);
}

/* Beim Scrollen wird die Leiste kompakter: oben darf das Logo seine volle
   Größe zeigen, beim Lesen gewinnt der Inhalt den Platz zurück. */
.site-header.is-solid .site-header__logo img {
  height: clamp(52px, 7vw, 72px);
}

/* Über dem dunklen Video wird das Logo aufgehellt und invertiert gehalten */
.site-header:not(.is-solid) .site-header__logo img {
  filter: brightness(0) invert(1);
}

.site-header.is-solid {
  background: rgba(251, 248, 242, 0.92);
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  box-shadow: 0 1px 0 var(--border);
}

.nav {
  display: flex;
  align-items: center;
  gap: clamp(0.5rem, 1.6vw, 1.75rem);
}

.nav__link {
  position: relative;
  font-size: var(--step--1);
  font-weight: 450;
  letter-spacing: 0.02em;
  text-decoration: none;
  color: var(--cream);
  padding: 0.6rem 0.25rem;
  transition: color var(--dur) var(--ease);
}

.site-header.is-solid .nav__link {
  color: var(--forest-800);
}

.nav__link::after {
  content: "";
  position: absolute;
  left: 0.25rem;
  right: 0.25rem;
  bottom: 0.3rem;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur) var(--ease);
}

.nav__link:hover::after,
.nav__link[aria-current="page"]::after {
  transform: scaleX(1);
}

.nav__cta {
  margin-left: clamp(0.25rem, 1vw, 0.75rem);
  padding: 0.7rem 1.25rem;
  min-height: 44px;
}

.nav-toggle {
  display: none;
  flex: none;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 1px solid rgba(251, 248, 242, 0.4);
  border-radius: var(--r-pill);
  background: rgba(251, 248, 242, 0.1);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  place-items: center;
  color: var(--cream);
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease),
    color var(--dur) var(--ease);
}

.site-header.is-solid .nav-toggle {
  color: var(--forest-800);
  border-color: var(--border-strong);
  background: transparent;
}

.nav-toggle__bars {
  position: relative;
  width: 18px;
  height: 12px;
}

.nav-toggle__bars span {
  position: absolute;
  left: 0;
  right: 0;
  height: 1.5px;
  background: currentColor;
  border-radius: 2px;
  transition: transform var(--dur) var(--ease), opacity var(--dur-fast) var(--ease);
}

.nav-toggle__bars span:nth-child(1) {
  top: 0;
}
.nav-toggle__bars span:nth-child(2) {
  top: 5.25px;
}
.nav-toggle__bars span:nth-child(3) {
  top: 10.5px;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(1) {
  transform: translateY(5.25px) rotate(45deg);
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(2) {
  opacity: 0;
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(3) {
  transform: translateY(-5.25px) rotate(-45deg);
}

@media (max-width: 60rem) {
  .nav-toggle {
    display: grid;
  }

  .nav {
    position: fixed;
    inset: 0 0 0 auto;
    width: min(88vw, 24rem);
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    gap: 0;
    padding: var(--space-2xl) var(--space-m);
    background: var(--forest-800);
    transform: translateX(100%);
    transition: transform var(--dur-slow) var(--ease);
    overflow-y: auto;
  }

  .nav.is-open {
    transform: translateX(0);
    box-shadow: -20px 0 60px rgba(13, 28, 16, 0.35);
  }

  .nav__link {
    color: var(--parchment);
    font-family: var(--font-display);
    font-size: var(--step-2);
    padding: var(--space-2xs) 0;
    border-bottom: 1px solid rgba(147, 169, 125, 0.22);
  }

  .site-header.is-solid .nav__link {
    color: var(--parchment);
  }

  .nav__link::after {
    display: none;
  }

  .nav__cta {
    margin: var(--space-s) 0 0;
    justify-content: center;
  }
}

/* --------------------------------------------------------------------------
   7. Hero mit scroll-gesteuertem Video
   -------------------------------------------------------------------------- */

/* Die Hülle ist mehrere Bildschirmhöhen hoch; darin klebt eine Bühne von
   genau 100vh. Der Scrollweg innerhalb der Hülle steuert den Textablauf —
   und in der Fassung "scroll" zusätzlich das Bild. */
.hero {
  position: relative;
  /* 200vh, also 100vh reine Scrollstrecke. Die Höhe hängt unmittelbar mit
     den Schwellen in main.js (heroTextlauf) zusammen: Bei 240vh stand das
     Zitat über 73vh unverändert da, bevor sich etwas rührte. Jetzt teilt
     sich die Strecke gleichmäßiger auf: Titel bis 12vh, Überblendung von
     12 bis 64vh, danach 36vh Lesezeit.
     Wer hier etwas ändert, sollte die Schwellen mit anpassen. */
  height: 200vh;
  background: var(--forest-900);
}

.hero__sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  display: grid;
  place-items: end stretch;
}

.hero__media,
.hero__scrim,
.hero__content {
  grid-area: 1 / 1;
}

/* Die Bühne ist ein Raster mit align-items: end. Leere Elemente bekommen
   dadurch die Höhe ihres Inhalts — also null. Ohne diese Zeile haben die
   Abdunklungs-Ebenen zwar die volle Breite, aber keine Höhe, und die
   Verläufe sind schlicht unsichtbar. */
.hero__scrim {
  align-self: stretch;
  height: 100%;
}

.hero__media {
  position: relative;
  width: 100%;
  height: 100%;
}

.hero__poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Fuer den Modus "schleife": zwei uebereinanderliegende Filme. Ihre
   Deckkraft setzt das Skript Bild fuer Bild, um die Schleifennaht zu
   ueberblenden — deshalb hier absichtlich kein transition. */
.hero__schleife {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  z-index: 1;
}

/* Das Canvas fuellt dieselbe Flaeche. Der Bildausschnitt wird nicht per
   object-fit bestimmt — das wirkt bei Canvas nicht — sondern beim Zeichnen
   in main.js ausgerechnet. */
.hero__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* Bewusste Entscheidung: Das Abendlicht hat Vorrang vor dem Messwert.
   Deshalb nur eine milde Korrektur und sehr zurückhaltende Verläufe — die
   Sonne und der helle Himmel sollen sichtbar bleiben. Die Lesbarkeit der
   Schrift trägt stattdessen der enge Schatten in .hero__title und Co. */
.hero__canvas,
.hero__schleife,
.hero__poster {
  filter: brightness(0.86) saturate(1.16) contrast(1.02);
}

.hero__poster {
  z-index: 0;
}

.hero__canvas {
  z-index: 1;
  opacity: 0;
  transition: opacity 700ms var(--ease);
}

.hero__canvas.is-ready {
  opacity: 1;
}

/* Zwei Verläufe: oben für die Navigation, unten für die Überschrift.
   Das Filmmaterial ist im Himmel sehr hell — ohne Abdunklung wäre weiße
   Schrift dort nicht lesbar (Kontrast < 4.5:1). */
.hero__scrim {
  z-index: 2;
  pointer-events: none;
  /* Nur noch oben und unten. Die Bildmitte bleibt völlig frei, damit Sonne
     und Gegenlicht wirken können — das war die ausdrückliche Vorgabe. Die
     Lesbarkeit der Schrift trägt der enge Schatten, nicht die Fläche. */
  background: linear-gradient(to bottom,
    rgba(13, 28, 16, 0.52) 0%,
    rgba(13, 28, 16, 0.12) 18%,
    rgba(13, 28, 16, 0) 42%,
    rgba(13, 28, 16, 0.10) 62%,
    rgba(13, 28, 16, 0.38) 86%,
    rgba(13, 28, 16, 0.58) 100%);
}



.hero__content {
  z-index: 3;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-block: clamp(var(--space-l), 9vh, var(--space-2xl));
  color: var(--cream);

  /* Der Hero ist eine randlose Buehne — anders als die Abschnitte darunter,
     die in .wrap sitzen und mittig auf 74rem begrenzt sind. Das ergaebe bei
     1440px einen Rand von 128px; hier ruecken Ueberschrift und Knoepfe auf
     88px nach links, damit das Bild groesser wirkt.

     Weiter nach innen sollte man nicht gehen: Das Logo im Kopf sitzt im
     .wrap-Raster bei 128px. Faellt der Text zu weit darunter aus der Flucht,
     wirkt er verrutscht statt gesetzt. 88px sind der Punkt, an dem beides
     noch zusammengeht. */
  width: 100%;
  max-width: none;
  margin-inline: 0;
  padding-inline: clamp(1.25rem, 6.2vw, 5.5rem);
}

/* Gold wäre auf dem hellen Himmel zu schwach — der Text bleibt cremefarben,
   nur der Iris-Ring davor trägt die Akzentfarbe. */
.hero__eyebrow {
  color: var(--cream);
  /* Über bewegtem Blattwerk zerfallen kleine, weit gesperrte Versalien
     optisch, auch wenn der gemessene Kontrast reicht. Deshalb hier etwas
     größer, kräftiger und enger gesetzt als im übrigen Seitenlayout. */
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.17em;
  text-shadow:
    0 1px 1px rgba(13, 28, 16, 0.95),
    0 0 6px rgba(13, 28, 16, 0.8),
    0 2px 18px rgba(13, 28, 16, 0.6);
}

.hero__eyebrow::before {
  width: 16px;
  height: 16px;
}

.hero__eyebrow::before {
  color: var(--gold-400);
  filter: drop-shadow(0 1px 6px rgba(13, 28, 16, 0.8));
}

.hero__title {
  font-family: var(--font-signatur);
  /* Corinthia hat eine kleine x-Höhe und läuft schmal. Der Faktor ist so
     gewählt, dass die gesetzte Zeile so breit läuft wie mit einer normal
     proportionierten Schrift — ohne ihn wirkt die Überschrift rund ein
     Drittel zu klein. */
  font-size: calc(var(--step-6) * 1.58);
  font-weight: 400;
  line-height: 1.06;
  letter-spacing: 0;
  max-width: 18ch;
  text-shadow: 0 1px 2px rgba(13, 28, 16, 0.6), 0 0 24px rgba(13, 28, 16, 0.68), 0 4px 38px rgba(13, 28, 16, 0.5);
}

.hero__lede {
  margin-top: var(--space-s);
  font-size: var(--step-1);
  font-weight: 300;
  line-height: 1.5;
  max-width: 44ch;
  color: rgba(251, 248, 242, 0.92);
  text-shadow: 0 1px 2px rgba(13, 28, 16, 0.8), 0 0 12px rgba(13, 28, 16, 0.6);
}

.hero__actions {
  margin-top: var(--space-m);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs);
}

/* Zitat, das im mittleren Scrollabschnitt eingeblendet wird */
.hero__quote {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: grid;
  place-items: center;
  text-align: center;
  padding: var(--space-m);
  pointer-events: none;
  opacity: 0;
}

.hero__quote blockquote {
  margin: 0;
  /* Breite in em statt ch: Schreibschriften haben sehr schmale Ziffern,
     deshalb fällt eine Angabe in ch viel breiter aus als erwartet. Der Satz
     lief so fast über die volle Breite und ließ ein einzelnes Wort auf der
     letzten Zeile zurück. 12em bricht ihn nach "Übersetzer" um. */
  max-width: 12em;
  /* Verteilt die beiden Zeilen gleichmäßig, statt nur am Rand umzubrechen. */
  text-wrap: balance;
  font-family: var(--font-signatur);
  font-size: calc(var(--step-4) * 1.71);
  font-weight: 400;
  font-style: normal;
  line-height: 1.15;
  color: var(--cream);
  text-shadow: 0 1px 2px rgba(13, 28, 16, 0.65), 0 0 26px rgba(13, 28, 16, 0.7), 0 4px 40px rgba(13, 28, 16, 0.55);
}

.hero__quote cite {
  display: block;
  margin-top: var(--space-s);
  font-family: var(--font-body);
  /* Gold verschwindet im Gegenlicht der Sonne. Creme mit engem Schatten
     hält sich dort deutlich besser, ohne das Bild abdunkeln zu müssen. */
  font-size: 0.76rem;
  font-weight: 500;
  font-style: normal;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cream);
  text-shadow:
    0 1px 1px rgba(13, 28, 16, 0.95),
    0 0 8px rgba(13, 28, 16, 0.8);
}

/* Dünne dunkle Kontur hinter den Buchstaben. paint-order sorgt dafür, dass
   die Kontur HINTER der Füllung liegt — die Buchstabenform bleibt dadurch
   scharf und bekommt nur einen Saum, der sie vom hellen Himmel abhebt.
   Dieselbe Technik wie bei Untertiteln. Sie kostet null Bildhelligkeit und
   ist der Grund, warum das Video hell bleiben darf. */
.hero__eyebrow,
.hero__title,
.hero__lede,
.hero__quote blockquote,
.hero__quote cite,
.hero__progress-label {
  paint-order: stroke fill;
}

/* In em statt px, damit die Kontur bei jeder Schriftgröße gleich fein
   wirkt. Feste Pixelwerte lassen die große Überschrift auf dem Handy
   umrandet aussehen, weil sie dort proportional viel dicker ausfällt. */
.hero__eyebrow,
.hero__lede,
.hero__quote cite,
.hero__progress-label {
  -webkit-text-stroke: 0.06em rgba(13, 28, 16, 0.26);
}

.hero__title,
.hero__quote blockquote {
  -webkit-text-stroke: 0.021em rgba(13, 28, 16, 0.18);
}

/* Fortschrittsanzeige: zeigt, dass der Scroll das Video steuert */
.hero__progress {
  position: absolute;
  z-index: 4;
  right: clamp(1.25rem, 3vw, 2.5rem);
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.9rem;
}

.hero__progress-track {
  width: 2px;
  height: clamp(80px, 16vh, 140px);
  background: rgba(251, 248, 242, 0.25);
  border-radius: 2px;
  overflow: hidden;
}

.hero__progress-bar {
  display: block;
  width: 100%;
  height: 0%;
  background: var(--gold-400);
  border-radius: 2px;
}

.hero__progress {
  text-decoration: none;
  color: inherit;
  border-radius: var(--r-pill);
  padding: 0.6rem 0.4rem;
  transition: opacity var(--dur) var(--ease);
}

.hero__progress:hover {
  opacity: 0.75;
}

.hero__progress-chevron {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid rgba(251, 248, 242, 0.4);
  color: var(--cream);
  animation: chevron-nudge 2.4s var(--ease) infinite;
}

@keyframes chevron-nudge {
  0%, 70%, 100% { transform: translateY(0); }
  85% { transform: translateY(3px); }
}

@media (prefers-reduced-motion: reduce) {
  .hero__progress-chevron {
    animation: none;
  }
}

.hero__progress-label {
  writing-mode: vertical-rl;
  font-size: 0.66rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(251, 248, 242, 0.95);
  text-shadow: 0 1px 2px rgba(13, 28, 16, 0.9), 0 0 10px rgba(13, 28, 16, 0.7);
}

@media (max-width: 48rem) {
  .hero {
    /* Auf dem Handy etwas kürzer: Ein Bildschirm ist dort hoch und schmal,
       dieselbe Anzahl vh fühlt sich nach mehr Weg an. */
    height: 180vh;
  }

  .hero__progress {
    display: none;
  }

  /* Der Aufschlag, mit dem die kleine x-Höhe am Schreibtisch ausgeglichen
     wird, ist auf dem Handy zu viel: Die Überschrift bricht dort ohnehin um
     und würde sonst den ganzen Bildschirm füllen. Deshalb ein kleinerer
     Faktor. */
  .hero__title {
    font-size: calc(var(--step-6) * 1.27);
  }

  .hero__quote blockquote {
    font-size: calc(var(--step-4) * 1.41);
  }
}

/* Ohne Video braucht der Hero keine Scrollstrecke — er wird auf eine
   Bildschirmhöhe zusammengezogen (siehe hero--static in main.js). */
.hero--static {
  height: auto;
}

.hero--static .hero__sticky {
  position: relative;
  height: auto;
  min-height: 88vh;
}

.hero--static .hero__quote,
.hero--static .hero__progress {
  display: none;
}

/* Wer im Betriebssystem mehr Kontrast angefordert hat, bekommt den Hero
   deutlich abgedunkelt. Das ist die saubere Auflösung des Kompromisses:
   Für alle anderen bleibt das Abendlicht hell, wer aber auf Kontrast
   angewiesen ist, muss nicht darunter leiden. */
@media (prefers-contrast: more) {
  .hero__canvas,
  .hero__schleife,
  .hero__poster {
    filter: brightness(0.58) saturate(1.05) contrast(1.06);
  }

  .hero__scrim {
    background:
      radial-gradient(100% 72% at 24% 70%,
        rgba(13, 28, 16, 0.62) 0%,
        rgba(13, 28, 16, 0.38) 46%,
        rgba(13, 28, 16, 0) 80%),
      linear-gradient(to bottom,
        rgba(13, 28, 16, 0.70) 0%,
        rgba(13, 28, 16, 0.36) 18%,
        rgba(13, 28, 16, 0.28) 42%,
        rgba(13, 28, 16, 0.42) 62%,
        rgba(13, 28, 16, 0.72) 86%,
        rgba(13, 28, 16, 0.86) 100%);
  }

  .hero__eyebrow,
  .hero__title,
  .hero__lede,
  .hero__quote blockquote,
  .hero__quote cite,
  .hero__progress-label {
    -webkit-text-stroke: 0;
    text-shadow: 0 1px 2px rgba(13, 28, 16, 0.9);
  }
}

/* Wer weniger Bewegung möchte, bekommt ein ruhiges Standbild statt Video. */
@media (prefers-reduced-motion: reduce) {
  .hero {
    height: auto;
  }

  .hero__sticky {
    position: relative;
    height: auto;
    min-height: 84vh;
  }

  .hero__canvas,
  .hero__schleife,
  .hero__quote,
  .hero__progress {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   8. Vertrauensleiste
   -------------------------------------------------------------------------- */

.trustbar {
  background: var(--forest-800);
  color: var(--parchment);
  padding-block: var(--space-m);
}

.trustbar__grid {
  display: grid;
  gap: var(--space-s) var(--space-m);
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
}

.trust-item {
  display: flex;
  align-items: flex-start;
  gap: 0.9rem;
}

.trust-item__icon {
  flex: none;
  width: 34px;
  height: 34px;
  color: var(--gold-400);
}

.trust-item__value {
  display: block;
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-variation-settings: "SOFT" 40, "WONK" 1;
  line-height: 1.15;
  color: var(--cream);
}

.trust-item__label {
  display: block;
  margin-top: 0.15rem;
  font-size: var(--step--1);
  line-height: 1.4;
  color: var(--sage-300);
}

/* --------------------------------------------------------------------------
   9. Über mich
   -------------------------------------------------------------------------- */

.about__grid {
  display: grid;
  gap: var(--space-l);
  align-items: center;
}

@media (min-width: 56rem) {
  .about__grid {
    grid-template-columns: 0.95fr 1.05fr;
    gap: var(--space-xl);
  }
}

.about__figure {
  position: relative;
  margin: 0;
}

/* Bild in einer Irisform: Kreis mit doppeltem Ring */
.about__figure img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 50%;
  position: relative;
  z-index: 1;
}

.about__figure::before {
  content: "";
  position: absolute;
  inset: -14px;
  border-radius: 50%;
  border: 1px solid var(--border-strong);
  z-index: 0;
}

.about__figure::after {
  content: "";
  position: absolute;
  inset: -30px;
  border-radius: 50%;
  border: 1px dashed var(--sage-300);
  z-index: 0;
}

.about__signature {
  margin-top: var(--space-m);
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--step-2);
  font-variation-settings: "SOFT" 70, "WONK" 1;
  color: var(--berry-600);
}

.about__credentials {
  margin-top: var(--space-m);
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  list-style: none;
}

.about__credentials li {
  font-size: var(--step--1);
  padding: 0.45rem 0.95rem;
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  background: var(--surface);
  color: var(--text-soft);
}

/* --------------------------------------------------------------------------
   10. Leistungen
   -------------------------------------------------------------------------- */

.services__head {
  display: grid;
  gap: var(--space-s);
  margin-bottom: var(--space-l);
}

@media (min-width: 56rem) {
  .services__head {
    grid-template-columns: 1fr 1fr;
    align-items: end;
    gap: var(--space-l);
  }
}

.services__grid {
  display: grid;
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--r-l);
  overflow: hidden;
}

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

@media (min-width: 68rem) {
  .services__grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.service {
  position: relative;
  background: var(--surface);
  padding: var(--space-m) var(--space-s) var(--space-m);
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  text-decoration: none;
  color: inherit;
  overflow: hidden;
  transition: background-color var(--dur) var(--ease);
}

/* Hover blüht radial aus dem Zentrum auf — wie die Iris, wie die Blüte */
.service::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  width: 130%;
  aspect-ratio: 1;
  transform: translate(-50%, -55%) scale(0.4);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(204, 156, 36, 0.16) 0%, transparent 68%);
  opacity: 0;
  transition: transform var(--dur-slow) var(--ease), opacity var(--dur-slow) var(--ease);
  pointer-events: none;
}

.service:hover::before,
.service:focus-visible::before {
  opacity: 1;
  transform: translate(-50%, -55%) scale(1);
}

.service:hover {
  background: var(--cream);
}

.service__num {
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  color: var(--sage-600);
  font-variant-numeric: tabular-nums;
}

.service__icon {
  /* Feine Linienzeichnungen brauchen etwas mehr Fläche als kräftige Symbole,
     damit die Kurven zur Geltung kommen. */
  width: 52px;
  height: 52px;
  color: var(--forest-700);
  margin-bottom: var(--space-2xs);
}

.service__title {
  font-size: var(--step-1);
  position: relative;
}

.service__text {
  font-size: var(--step--1);
  color: var(--text-soft);
  position: relative;
}

.service__more {
  margin-top: auto;
  padding-top: var(--space-s);
  font-size: var(--step--1);
  font-weight: 500;
  color: var(--berry-600);
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  position: relative;
  transition: gap var(--dur) var(--ease);
}

.service:hover .service__more {
  gap: 0.75rem;
}

/* Liste weiterer Verfahren */
.methods {
  margin-top: var(--space-m);
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  list-style: none;
}

.methods li {
  font-size: var(--step--1);
  padding: 0.4rem 0.9rem;
  border-radius: var(--r-pill);
  background: var(--parchment-deep);
  color: var(--text-soft);
}

.section--dark .methods li {
  background: rgba(147, 169, 125, 0.15);
  color: var(--sage-200);
}

/* --------------------------------------------------------------------------
   11. Ablauf
   -------------------------------------------------------------------------- */

.steps {
  display: grid;
  gap: var(--space-m);
  counter-reset: step;
  list-style: none;
}

@media (min-width: 52rem) {
  .steps {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-l);
  }
}

.step {
  position: relative;
  padding-top: var(--space-m);
  border-top: 1px solid rgba(147, 169, 125, 0.3);
}

.step::before {
  counter-increment: step;
  content: counter(step, decimal-leading-zero);
  position: absolute;
  top: var(--space-m);
  right: 0;
  font-family: var(--font-display);
  font-size: var(--step-4);
  line-height: 1;
  color: rgba(147, 169, 125, 0.28);
  font-variant-numeric: tabular-nums;
}

.step__title {
  font-size: var(--step-2);
  margin-bottom: var(--space-2xs);
  padding-right: 3rem;
}

.step__text {
  font-size: var(--step--1);
  color: var(--sage-300);
  max-width: 32ch;
}

/* Vollflächiges Bildband — bricht den Rhythmus aus Textspalten und Rastern
   einmal auf und gibt der Seitenmitte einen eigenen Takt. */
.band {
  position: relative;
  /* Feste Höhe statt min-height: sonst bestimmt das Seitenverhältnis des
     Bildes die Bandhöhe und das Band wird auf breiten Schirmen riesig. */
  height: clamp(22rem, 58vh, 34rem);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: var(--forest-900);
}

.band__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 42%;
  /* Das Zitat daneben lautet "hell, ruhig und freundlich" — ein pauschal
     abgedunkeltes Bild würde dem widersprechen. Deshalb nur eine leichte
     Korrektur; die Lesbarkeit trägt der Verlauf unten plus die feine
     Kontur an der Schrift. */
  filter: brightness(0.96) saturate(1.06);
}

/* Der Verlauf liegt über der vollen Breite, nicht nur unter dem Textblock —
   sonst entstünde eine sichtbare Kante. Er beginnt tief und läuft schnell aus,
   damit die obere Bildhälfte offen bleibt. */
.band__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(to top,
    rgba(13, 28, 16, 0.78) 0%,
    rgba(13, 28, 16, 0.42) 26%,
    rgba(13, 28, 16, 0.10) 52%,
    rgba(13, 28, 16, 0) 72%);
}

.band__inner {
  position: relative;
  z-index: 2;
  width: min(100% - 2.5rem, var(--wrap));
  margin-inline: auto;
  padding-block: var(--space-l);
}

.band blockquote,
.band cite {
  paint-order: stroke fill;
}

.band blockquote {
  -webkit-text-stroke: 0.021em rgba(13, 28, 16, 0.24);
  margin: 0;
  max-width: 30ch;
  font-family: var(--font-display);
  font-size: var(--step-3);
  font-weight: 300;
  font-style: italic;
  font-variation-settings: "SOFT" 60, "WONK" 1;
  line-height: 1.25;
  color: var(--cream);
  text-shadow: 0 1px 2px rgba(13, 28, 16, 0.6), 0 0 18px rgba(13, 28, 16, 0.55);
}

.band cite {
  -webkit-text-stroke: 0.07em rgba(13, 28, 16, 0.3);
  text-shadow: 0 1px 2px rgba(13, 28, 16, 0.85);
  display: block;
  margin-top: var(--space-s);
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-style: normal;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold-400);
}

/* --------------------------------------------------------------------------
   12. Blog
   -------------------------------------------------------------------------- */

.posts {
  display: grid;
  gap: var(--space-m);
  list-style: none;
}

@media (min-width: 50rem) {
  .posts {
    grid-template-columns: repeat(3, 1fr);
  }
}

.post-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-l);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
    border-color var(--dur) var(--ease);
}

.post-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-m);
  border-color: var(--border-strong);
}

.post-card__media {
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--parchment-deep);
}

.post-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 700ms var(--ease);
}

.post-card:hover .post-card__media img {
  transform: scale(1.045);
}

.post-card__body {
  padding: var(--space-s);
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  flex: 1;
}

.post-card__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sage-600);
}

.post-card__meta span + span::before {
  content: "·";
  margin-right: 0.5rem;
}

.post-card__title {
  font-size: var(--step-1);
}

.post-card__excerpt {
  font-size: var(--step--1);
  color: var(--text-soft);
}

.post-card__more {
  margin-top: auto;
  padding-top: var(--space-2xs);
  font-size: var(--step--1);
  font-weight: 500;
  color: var(--berry-600);
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  transition: gap var(--dur) var(--ease);
}

.post-card:hover .post-card__more {
  gap: 0.75rem;
}

/* Artikelseite */
.article-hero {
  padding-top: calc(var(--space-3xl) + 1rem);
  padding-bottom: var(--space-l);
  background: var(--forest-800);
  color: var(--parchment);
}

.article-hero__title {
  font-size: var(--step-5);
  max-width: 20ch;
  margin-block: var(--space-s);
}

.article-hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-400);
}

.article-body {
  max-width: var(--wrap-narrow);
  margin-inline: auto;
  font-size: var(--step-0);
}

.article-body > * + * {
  margin-top: var(--space-s);
}

.article-body h2 {
  font-size: var(--step-3);
  margin-top: var(--space-l);
}

.article-body h3 {
  font-size: var(--step-1);
  margin-top: var(--space-m);
}

.article-body ul,
.article-body ol {
  padding-left: 1.4rem;
  display: grid;
  gap: 0.5rem;
}

.article-body li {
  padding-left: 0.35rem;
}

.article-body li::marker {
  color: var(--sage-500);
}

.article-body figure {
  margin: var(--space-l) 0;
}

.article-body figure img {
  width: 100%;
  border-radius: var(--r-m);
}

.article-body figcaption {
  margin-top: 0.7rem;
  font-size: var(--step--1);
  color: var(--ink-faint);
}

.article-body blockquote {
  margin: var(--space-l) 0;
  padding: var(--space-s) var(--space-m);
  border-left: 2px solid var(--gold-500);
  background: var(--surface);
  border-radius: 0 var(--r-m) var(--r-m) 0;
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-style: italic;
  font-variation-settings: "SOFT" 60, "WONK" 1;
  color: var(--forest-700);
}

.article-body a:not(.btn):not(.link-arrow) {
  color: var(--berry-600);
  text-underline-offset: 3px;
}

/* Instagram-Streifen — sitzt innerhalb von "Aus der Praxis", nicht als
   eigener Abschnitt. Blog und Profil versprechen dasselbe; zwei gleichrangige
   Bereiche nebeneinander wirkten doppelt und schoben den Kontakt nach hinten.
   Deshalb hier nur eine abgesetzte Zeile mit drei kleinen Kacheln. */
.insta-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-s) var(--space-m);
  margin-top: var(--space-l);
  padding-top: var(--space-m);
  border-top: 1px solid var(--border);
}

.insta-strip__text {
  flex: 1 1 20rem;
}

.insta-strip__handle {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-display);
  font-variation-settings: "SOFT" 40, "WONK" 1;
  font-size: var(--step-1);
  color: var(--berry-600);
  text-decoration: none;
  transition: color var(--dur) var(--ease);
}

.insta-strip__handle:hover {
  color: var(--berry-700);
}

.insta-strip__note {
  margin-top: 0.35rem;
  font-size: var(--step--1);
  color: var(--text-soft);
  max-width: 42ch;
}

.insta-strip__grid {
  display: flex;
  gap: 0.5rem;
  list-style: none;
  flex: none;
}

.insta-strip__tile {
  display: block;
  position: relative;
  width: clamp(72px, 11vw, 96px);
  aspect-ratio: 1;
  border-radius: var(--r-m);
  overflow: hidden;
  background: var(--parchment-deep);
}

.insta-strip__tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 600ms var(--ease), filter var(--dur) var(--ease);
}

.insta-strip__tile:hover img {
  transform: scale(1.07);
  filter: brightness(0.8);
}

.insta-strip__tile::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23fbf8f2' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='2.5' width='19' height='19' rx='5.2'/%3E%3Ccircle cx='12' cy='12' r='4.1'/%3E%3Ccircle cx='17.4' cy='6.6' r='1.15' fill='%23fbf8f2' stroke='none'/%3E%3C/svg%3E")
    center / 24px no-repeat;
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
  pointer-events: none;
}

.insta-strip__tile:hover::after {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .insta-strip__tile img {
    transition: none;
  }
  .insta-strip__tile:hover img {
    transform: none;
  }
}

/* --------------------------------------------------------------------------
   13. Wunschwand  —  DERZEIT NICHT AUF DER SEITE

   Die Regeln bleiben erhalten, damit der Abschnitt jederzeit zurückkehren
   kann. Ohne das zugehörige HTML greifen sie nicht.
   -------------------------------------------------------------------------- */

.wishes {
  background: var(--forest-850);
  color: var(--parchment);
  position: relative;
  overflow: hidden;
}

/* Konzentrische Ringe als Hintergrundtextur — das Irismotiv, sehr leise */
.wishes::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(150vw, 1400px);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  background: repeating-radial-gradient(circle,
      rgba(147, 169, 125, 0.09) 0 1px, transparent 1px 46px);
  pointer-events: none;
}

.wishes > * {
  position: relative;
}

.wishes__layout {
  display: grid;
  gap: var(--space-l);
}

@media (min-width: 60rem) {
  .wishes__layout {
    grid-template-columns: 22rem 1fr;
    gap: var(--space-xl);
    align-items: start;
  }
}

/* Formular */
.wish-form {
  display: grid;
  gap: var(--space-xs);
  padding: var(--space-m);
  background: rgba(251, 248, 242, 0.055);
  border: 1px solid rgba(147, 169, 125, 0.26);
  border-radius: var(--r-l);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.field {
  display: grid;
  gap: 0.45rem;
}

.field label {
  font-size: var(--step--1);
  font-weight: 500;
  color: var(--parchment);
}

.field__hint {
  font-size: 0.78rem;
  /* Nicht --sage-300: das ergab auf cremefarbenem Grund nur 1,75 statt der
     geforderten 4,5. --ink-faint liegt bei 5,55 und bleibt zurueckhaltend. */
  color: var(--ink-faint);
  line-height: 1.45;
}

.field input,
.field textarea,
.field select {
  width: 100%;
  font: inherit;
  font-size: var(--step--1);
  color: var(--cream);
  background: rgba(13, 28, 16, 0.45);
  border: 1px solid rgba(147, 169, 125, 0.35);
  border-radius: var(--r-m);
  padding: 0.8rem 0.95rem;
  min-height: 48px;
  transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}

.field textarea {
  resize: vertical;
  min-height: 7rem;
  line-height: 1.6;
}

.field input::placeholder,
.field textarea::placeholder {
  color: rgba(179, 196, 160, 0.65);
}

.field input:hover,
.field textarea:hover {
  border-color: rgba(147, 169, 125, 0.6);
}

.field input:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--gold-400);
  background: rgba(13, 28, 16, 0.65);
  box-shadow: 0 0 0 3px rgba(221, 180, 87, 0.2);
}

.field__counter {
  font-size: 0.75rem;
  color: var(--sage-300);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.field__counter.is-near {
  color: var(--gold-400);
}

/* Fehler direkt am Feld, nicht gesammelt oben */
.field__error {
  font-size: 0.8rem;
  color: #ffb4b4;
  display: none;
}

.field.has-error input,
.field.has-error textarea {
  border-color: #e57373;
}

.field.has-error .field__error {
  display: block;
}

.wish-form__status {
  font-size: var(--step--1);
  padding: 0.85rem 1rem;
  border-radius: var(--r-m);
  background: rgba(147, 169, 125, 0.18);
  border: 1px solid rgba(147, 169, 125, 0.35);
  color: var(--sage-200);
  display: none;
}

.wish-form__status.is-visible {
  display: block;
}

.wish-form__status.is-success {
  background: rgba(204, 156, 36, 0.16);
  border-color: rgba(221, 180, 87, 0.45);
  color: var(--gold-200);
}

/* Wand */
.wish-wall {
  display: grid;
  gap: var(--space-s);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr));
  align-items: start;
  list-style: none;
}

.wish {
  padding: var(--space-s);
  border-radius: var(--r-l);
  background: rgba(251, 248, 242, 0.06);
  border: 1px solid rgba(147, 169, 125, 0.22);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  animation: wish-in var(--dur-slow) var(--ease) both;
}

.wish--mine {
  border-color: rgba(221, 180, 87, 0.5);
  background: rgba(204, 156, 36, 0.1);
}

/* Beispiele treten optisch zurück, damit echte Einträge hervorstechen. */
.wish--beispiel {
  border-style: dashed;
  opacity: 0.82;
}

.wish--beispiel .wish__foot {
  font-style: italic;
}

@keyframes wish-in {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.985);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .wish {
    animation: none;
  }
}

.wish__text {
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-style: italic;
  font-weight: 300;
  font-variation-settings: "SOFT" 60, "WONK" 1;
  line-height: 1.35;
  color: var(--cream);
}

.wish__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  font-size: 0.74rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sage-300);
}

.wish__badge {
  flex: none;
  padding: 0.2rem 0.6rem;
  border-radius: var(--r-pill);
  background: rgba(221, 180, 87, 0.2);
  color: var(--gold-400);
  letter-spacing: 0.1em;
}

.wish__delete {
  flex: none;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  padding: 0;
  border: none;
  background: transparent;
  border-radius: 50%;
  color: var(--sage-300);
  transition: color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}

.wish__delete:hover {
  color: #ffb4b4;
  background: rgba(255, 180, 180, 0.12);
}

.wish-wall__empty {
  grid-column: 1 / -1;
  padding: var(--space-m);
  border: 1px dashed rgba(147, 169, 125, 0.35);
  border-radius: var(--r-l);
  color: var(--sage-300);
  font-size: var(--step--1);
  text-align: center;
}

/* Bildergalerie (Praxisräume) */
.gallery {
  display: grid;
  gap: var(--space-s);
  list-style: none;
}

@media (min-width: 44rem) {
  .gallery {
    grid-template-columns: repeat(3, 1fr);
  }
}

.gallery figure {
  margin: 0;
}

.gallery img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--r-l);
}

.gallery figcaption {
  margin-top: 0.7rem;
  font-size: var(--step--1);
  color: var(--text-soft);
}

/* Bild neben einem Textabschnitt */
.section-figure {
  margin: 0 0 var(--space-m);
}

.section-figure img {
  width: 100%;
  border-radius: var(--r-l);
}

.section-figure figcaption {
  margin-top: 0.7rem;
  font-size: var(--step--1);
  color: var(--ink-faint);
}

/* --------------------------------------------------------------------------
   14. Stimmen
   -------------------------------------------------------------------------- */

.voices {
  display: grid;
  gap: var(--space-m);
  list-style: none;
}

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

.voice {
  padding: var(--space-m);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-l);
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
}

.voice__text {
  font-size: var(--step-0);
  color: var(--text-soft);
  line-height: 1.7;
}

.voice__author {
  margin-top: auto;
  padding-top: var(--space-2xs);
  font-size: 0.74rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sage-600);
}

/* --------------------------------------------------------------------------
   15. FAQ
   -------------------------------------------------------------------------- */

.faq {
  border-top: 1px solid var(--border);
  list-style: none;
}

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

.faq-item summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-s);
  padding: var(--space-s) 0;
  min-height: 56px;
  cursor: pointer;
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-variation-settings: "SOFT" 40, "WONK" 1;
  line-height: 1.25;
  list-style: none;
  transition: color var(--dur) var(--ease);
}

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

.faq-item summary:hover {
  color: var(--berry-600);
}

.faq-item__icon {
  flex: none;
  width: 26px;
  height: 26px;
  margin-top: 0.25rem;
  border-radius: 50%;
  border: 1px solid var(--border-strong);
  display: grid;
  place-items: center;
  position: relative;
  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease),
    background-color var(--dur) var(--ease);
}

.faq-item__icon::before,
.faq-item__icon::after {
  content: "";
  position: absolute;
  background: currentColor;
  border-radius: 2px;
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.faq-item__icon::before {
  width: 11px;
  height: 1.5px;
}

.faq-item__icon::after {
  width: 1.5px;
  height: 11px;
}

.faq-item[open] .faq-item__icon {
  background: var(--forest-800);
  border-color: var(--forest-800);
  color: var(--cream);
  transform: rotate(90deg);
}

.faq-item[open] .faq-item__icon::after {
  opacity: 0;
}

.faq-item__answer {
  padding: 0 3rem var(--space-m) 0;
  color: var(--text-soft);
  max-width: var(--measure);
}

.faq-item__answer > * + * {
  margin-top: var(--space-2xs);
}

/* --------------------------------------------------------------------------
   16. Preise
   -------------------------------------------------------------------------- */

.prices {
  list-style: none;
  border-top: 1px solid var(--border);
}

.price-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem var(--space-s);
  padding: var(--space-s) 0;
  border-bottom: 1px solid var(--border);
}

.price-row__name {
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-variation-settings: "SOFT" 40, "WONK" 1;
  flex: 1 1 14rem;
}

.price-row__note {
  display: block;
  margin-top: 0.3rem;
  font-family: var(--font-body);
  font-size: var(--step--1);
  color: var(--text-soft);
  max-width: 46ch;
  line-height: 1.55;
}

.price-row__value {
  flex: none;
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-variant-numeric: tabular-nums;
  color: var(--berry-600);
  white-space: nowrap;
}

.price-note {
  margin-top: var(--space-m);
  padding: var(--space-s);
  border-radius: var(--r-m);
  background: var(--parchment-deep);
  font-size: var(--step--1);
  color: var(--text-soft);
}

.price-note > * + * {
  margin-top: 0.5rem;
}

/* --------------------------------------------------------------------------
   17. Kontakt
   -------------------------------------------------------------------------- */

.contact__layout {
  display: grid;
  gap: var(--space-l);
}

@media (min-width: 58rem) {
  .contact__layout {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-xl);
  }
}

.contact-list {
  list-style: none;
  display: grid;
  gap: var(--space-s);
}

.contact-list__item {
  display: flex;
  gap: 0.9rem;
  align-items: flex-start;
}

.contact-list__icon {
  flex: none;
  width: 22px;
  height: 22px;
  margin-top: 0.3rem;
  color: var(--sage-600);
}

.contact-list__label {
  display: block;
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sage-600);
  margin-bottom: 0.2rem;
}

.contact-list__value {
  font-size: var(--step-0);
  color: var(--text);
  text-decoration: none;
  line-height: 1.5;
}

a.contact-list__value:hover {
  color: var(--berry-600);
}

.hours {
  list-style: none;
  border-top: 1px solid var(--border);
  margin-top: var(--space-m);
}

.hours li {
  display: flex;
  justify-content: space-between;
  gap: var(--space-s);
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--border);
  font-size: var(--step--1);
}

.hours dt,
.hours .hours__day {
  color: var(--text-soft);
}

.hours .hours__time {
  font-variant-numeric: tabular-nums;
  color: var(--text);
}

.contact-form {
  display: grid;
  /* Ohne align-self wird die Karte als Rasterelement auf die Höhe der
     Nachbarspalte gestreckt. Diese überschüssige Höhe verteilt das eigene
     Raster dann auf seine Zeilen — der Absendeknopf wurde dadurch mehr als
     doppelt so hoch wie vorgesehen. */
  align-self: start;
  gap: var(--space-xs);
  padding: var(--space-m);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-l);
}

.contact-form .field label {
  color: var(--text);
}

.contact-form .field__hint {
  color: var(--ink-faint);
}

.contact-form .field input,
.contact-form .field textarea {
  background: var(--cream);
  border-color: var(--border-strong);
  color: var(--text);
}

.contact-form .field input::placeholder,
.contact-form .field textarea::placeholder {
  color: var(--ink-faint);
}

.contact-form .field input:focus,
.contact-form .field textarea:focus {
  border-color: var(--berry-600);
  box-shadow: 0 0 0 3px rgba(168, 24, 72, 0.14);
  background: #fff;
}

.contact-form .field__error {
  color: var(--berry-700);
}

.checkbox {
  display: flex;
  gap: 0.7rem;
  align-items: flex-start;
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--text-soft);
  cursor: pointer;
}

/* Der Absendeknopf bekommt dieselben Maße wie alle anderen Knöpfe:
   Breite nach Inhalt, Höhe aus .btn. Ohne justify-self würde er die
   ganze Spalte einnehmen. */
.contact-form button[type="submit"] {
  justify-self: start;
}

.checkbox input {
  flex: none;
  /* 24px ist das Mindestmaß nach WCAG 2.5.8; das umschließende Label
     ist ohnehin klickbar und damit die eigentliche Trefferfläche. */
  width: 24px;
  height: 24px;
  min-height: 0;
  margin-top: 0.15rem;
  accent-color: var(--berry-600);
  cursor: pointer;
}

/* Karte — als Bild lokal abgelegt, damit beim Seitenaufruf nichts von
   Dritten nachgeladen wird und kein Zustimmungsdialog nötig ist. */
.map {
  margin: var(--space-s) 0 0;
}

/* Rahmen mit festem Seitenverhältnis: Vorschaubild und später der
   Google-Rahmen sitzen an derselben Stelle, es springt beim Laden nichts. */
.map__frame {
  position: relative;
  aspect-ratio: 16 / 10;
  border-radius: var(--r-l);
  border: 1px solid var(--border);
  overflow: hidden;
  background: var(--parchment-deep);
}

.map__preview,
.map__frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.map__preview {
  object-fit: cover;
}

/* Sperrschicht: Google wird erst auf Klick geladen. */
.map__gate {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  padding: var(--space-s);
  text-align: center;
  background: rgba(13, 28, 16, 0.72);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

.map__gate-text {
  max-width: 34ch;
  font-size: 0.82rem;
  line-height: 1.55;
  color: var(--parchment);
}

.map__gate-text a {
  /* Nicht --gold-400: Die Sperre liegt auf rgba(13,28,16,0.72) ueber
     Pergament, gemischt also rgb(75,84,70). Darauf ergab gold-400 nur 4,04
     statt 4,5. --gold-200 liegt bei 5,82. */
  color: var(--gold-200);
}

.map.is-loaded .map__gate,
.map.is-loaded .map__preview {
  display: none;
}

.map figcaption {
  margin-top: 0.8rem;
  font-size: var(--step--1);
  line-height: 1.55;
  color: var(--text-soft);
}

/* Ausweichweg, falls sich kein E-Mail-Programm öffnet */
.form-fallback {
  display: grid;
  gap: var(--space-2xs);
  padding: var(--space-s);
  border: 1px solid var(--gold-500);
  background: var(--gold-200);
  border-radius: var(--r-m);
}

.form-fallback[hidden] {
  display: none;
}

.form-fallback__intro {
  font-size: var(--step--1);
  line-height: 1.6;
  color: var(--forest-800);
}

.form-fallback__intro a {
  color: var(--berry-700);
  font-weight: 500;
}

.form-fallback__text {
  width: 100%;
  font: inherit;
  font-size: 0.85rem;
  line-height: 1.55;
  padding: 0.8rem 0.95rem;
  border-radius: var(--r-m);
  border: 1px solid var(--gold-500);
  background: var(--cream);
  color: var(--text);
  resize: vertical;
}

.form-fallback .btn {
  justify-self: start;
}

/* Gutschein als kompakte Karte im Kontaktbereich. Vorher war das ein eigener
   dunkler Abschnitt vor dem Kontakt — ein zweiter Handlungsaufruf, der vom
   ersten ablenkte und die Seite verlängerte. */
.gutschein-karte {
  margin-top: var(--space-m);
  padding: var(--space-s);
  border: 1px solid var(--border);
  border-left: 3px solid var(--gold-500);
  border-radius: 0 var(--r-m) var(--r-m) 0;
  background: var(--parchment);
}

.gutschein-karte__text {
  font-size: var(--step--1);
  line-height: 1.6;
  color: var(--text-soft);
  max-width: 44ch;
}

/* --------------------------------------------------------------------------
   18. Abschluss-Aufruf & Fußzeile
   -------------------------------------------------------------------------- */

.closing {
  position: relative;
  background: var(--forest-800);
  color: var(--parchment);
  text-align: center;
  overflow: hidden;
}

.closing::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(120vw, 900px);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(204, 156, 36, 0.16) 0%, transparent 62%);
  pointer-events: none;
}

.closing > * {
  position: relative;
}

.closing .eyebrow {
  justify-content: center;
}

/* Variante mit Bild: zweispaltig und linksbündig statt zentriert */
.closing--split {
  text-align: left;
}

.closing__layout {
  display: grid;
  gap: var(--space-l);
  align-items: center;
}

@media (min-width: 56rem) {
  .closing__layout {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-xl);
  }
}

.closing--split .eyebrow,
.closing--split .closing__actions {
  justify-content: flex-start;
}

.closing--split .closing__title,
.closing--split .closing__lede {
  margin-inline: 0;
  max-width: 20ch;
}

.closing--split .closing__lede {
  max-width: 42ch;
}

.closing__figure {
  margin: 0;
}

.closing__figure img {
  width: 100%;
  border-radius: var(--r-l);
  box-shadow: var(--shadow-l);
}

.closing__title {
  font-size: var(--step-5);
  max-width: 16ch;
  margin-inline: auto;
}

.closing__lede {
  margin: var(--space-s) auto 0;
  max-width: 46ch;
  color: var(--sage-300);
  font-size: var(--step-1);
  font-weight: 300;
}

.closing__actions {
  margin-top: var(--space-m);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs);
  justify-content: center;
}

.site-footer {
  background: var(--forest-900);
  color: var(--sage-300);
  padding-block: var(--space-l) var(--space-m);
  font-size: var(--step--1);
}

.site-footer__grid {
  display: grid;
  gap: var(--space-m);
  padding-bottom: var(--space-m);
  border-bottom: 1px solid rgba(147, 169, 125, 0.2);
}

@media (min-width: 52rem) {
  .site-footer__grid {
    grid-template-columns: 1.4fr 1fr 1fr;
    gap: var(--space-l);
  }
}

.site-footer__logo img {
  height: 76px;
  width: auto;
  filter: brightness(0) invert(1);
  opacity: 0.92;
}

.site-footer__blurb {
  margin-top: var(--space-s);
  max-width: 34ch;
  line-height: 1.6;
}

.site-footer h2 {
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold-400);
  margin-bottom: var(--space-xs);
}

.site-footer ul {
  list-style: none;
  display: grid;
  gap: 0.6rem;
}

.site-footer a {
  color: var(--sage-300);
  text-decoration: none;
  transition: color var(--dur) var(--ease);
}

.site-footer a:hover {
  color: var(--gold-400);
}

.site-footer__bottom {
  padding-top: var(--space-s);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs) var(--space-s);
  align-items: center;
  justify-content: space-between;
  font-size: 0.78rem;
  color: var(--sage-500);
}

.site-footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-s);
  list-style: none;
}

/* Verweise auf die sozialen Netzwerke — bewusst klein gehalten.
   Runde Umrisse in Salbei, beim Überfahren füllt sich der Kreis in Gold. */
.social {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  list-style: none;
  margin-top: var(--space-s);
}

.social__link {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(147, 169, 125, 0.45);
  color: var(--sage-300);
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease),
    background-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.social__link:hover {
  color: var(--forest-800);
  background: var(--gold-400);
  border-color: var(--gold-400);
  transform: translateY(-2px);
}

.social__link svg {
  width: 19px;
  height: 19px;
}

/* Auf hellem Grund (Kontaktbereich) andere Farbgebung */
.social--hell .social__link {
  border-color: var(--border-strong);
  color: var(--sage-600);
}

.social--hell .social__link:hover {
  color: #fff;
  background: var(--berry-600);
  border-color: var(--berry-600);
}

/* Pflichthinweis für Heilberufe */
.disclaimer {
  margin-top: var(--space-s);
  padding-top: var(--space-s);
  border-top: 1px solid rgba(147, 169, 125, 0.2);
  font-size: 0.74rem;
  line-height: 1.6;
  color: var(--sage-500);
  max-width: 90ch;
}

/* --------------------------------------------------------------------------
   19. Innenseiten-Kopf
   -------------------------------------------------------------------------- */

.page-hero {
  padding-top: calc(var(--space-3xl) + 1rem);
  padding-bottom: var(--space-xl);
  background: var(--forest-800);
  color: var(--parchment);
  position: relative;
  overflow: hidden;
}

.page-hero::before {
  content: "";
  position: absolute;
  right: -10%;
  top: -30%;
  width: min(70vw, 640px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: repeating-radial-gradient(circle,
      rgba(147, 169, 125, 0.12) 0 1px, transparent 1px 38px);
  pointer-events: none;
}

.page-hero > * {
  position: relative;
}

.page-hero__title {
  font-size: var(--step-5);
  max-width: 18ch;
}

.page-hero__lede {
  margin-top: var(--space-s);
  max-width: 52ch;
  color: var(--sage-300);
  font-size: var(--step-1);
  font-weight: 300;
}

.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  list-style: none;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sage-400);
  margin-bottom: var(--space-s);
}

.breadcrumb a {
  color: var(--sage-300);
  text-decoration: none;
}

.breadcrumb a:hover {
  color: var(--gold-400);
}

.breadcrumb li + li::before {
  content: "/";
  margin-right: 0.5rem;
  color: var(--sage-600);
}

/* --------------------------------------------------------------------------
   20. Scroll-Einblendungen
   -------------------------------------------------------------------------- */

/* Nur aktiv, wenn JS läuft — ohne JS bleibt alles sichtbar (SEO/no-JS). */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 620ms var(--ease), transform 620ms var(--ease);
  transition-delay: var(--reveal-delay, 0ms);
}

.js [data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .js [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }
}


/* --------------------------------------------------------------------------
   21. Druckausgabe

   Praxisseiten werden ausgedruckt — Adresse, Zeiten, Preise, Wegbeschreibung.
   Ohne eigene Regeln landen dabei Videostandbild, Navigation und
   Zierelemente auf dem Papier, während aufgeklappte Antworten fehlen.
   -------------------------------------------------------------------------- */

@media print {
  /* Alles, was auf Papier keinen Zweck hat */
  .site-header,
  .hero,
  .band,
  .nav-toggle,
  .skip-link,
  .hero__progress,
  .service::before,
  .closing__figure,
  .contact-form,
  .form-fallback,
  .map__gate,
  .post-card__media,
  .site-footer__grid,
  [data-reveal]::before {
    display: none !important;
  }

  html {
    font-size: 11pt;
  }

  body {
    background: #fff;
    color: #000;
  }

  /* Flächige Hintergründe kosten nur Toner */
  .section,
  .section--dark,
  .section--surface,
  .section--deep,
  .trustbar,
  .closing,
  .site-footer,
  .page-hero,
  .article-hero {
    background: #fff !important;
    color: #000 !important;
    padding-block: 0.6cm;
  }

  .trustbar__value,
  .trust-item__value,
  .trust-item__label,
  .step__text,
  .lede,
  .page-hero__lede,
  .closing__lede,
  .site-footer,
  .site-footer a {
    color: #000 !important;
  }

  /* Eingeklappte Antworten müssen mitgedruckt werden */
  .faq-item .faq-item__answer {
    display: block !important;
  }

  .faq-item__icon {
    display: none;
  }

  /* Adressen von Verweisen ausschreiben, sonst sind Links auf Papier wertlos */
  main a[href^="http"]::after,
  main a[href^="mailto"]::after,
  main a[href^="tel"]::after {
    content: " (" attr(href) ")";
    font-size: 0.85em;
    word-break: break-all;
  }

  main a[href^="#"]::after {
    content: "";
  }

  /* Nichts mitten in einer Zeile umbrechen */
  h1, h2, h3 {
    break-after: avoid;
  }

  .price-row,
  .voice,
  .faq-item,
  figure {
    break-inside: avoid;
  }

  img {
    max-width: 8cm !important;
  }

  /* Kontaktdaten oben auf jede Seite */
  .prices::before {
    content: "Naturheilpraxis Anke Hägele · Ruhesteinstraße 300 · 72270 Baiersbronn · 07442 1879831";
    display: block;
    margin-bottom: 0.4cm;
    padding-bottom: 0.2cm;
    border-bottom: 1px solid #999;
    font-size: 0.85em;
  }
}