/* =========================================================
   Naturheilpraxis Wohlde — Fassung 2
   „Dem Anfang auf der Spur."

   Unterschied zu Fassung 1: wärmere Farbwelt, weichere Formen,
   Serifenschrift für die großen Zeilen, mehr Luft. Die CI bleibt
   unangetastet — Beerenton des Logos, Logo oben links mit
   Wortmarke, Navigation oben rechts, Rechtliches klein im Fuß.
   ========================================================= */

/* Eigene Schrift später hier einbinden (WOFF2 in /fonts).
   Keine Google-Fonts-CDN verwenden — DSGVO. */

:root {
  /* --- Farben --- */
  --beere: #912b61;          /* Logo-Farbe, Hauptakzent */
  --beere-dunkel: #72204c;
  --beere-zart: #f6ebf2;     /* sehr helle Fläche mit Beere-Stich */

  /* Die Grundtöne waren vorher deutlich ins Gelbe gezogen (Creme
     und Honig). Das wirkte altbacken. Jetzt ein warmes Greige:
     derselbe warme Unterton, aber ohne Gelbstich. Wichtig beim
     Ändern — der Verlauf über dem Heidebild (.hero-bild::before,
     .seitenkopf::before) enthält denselben Ton als rgba-Wert und
     muss mitgeändert werden. */
  --sand: #faf6f2;           /* Grundton der Seite */
  --sand-tief: #efe9e0;      /* abgesetzte Flächen, warmes Leinen */
  --karte: #fffefd;          /* Karten — nicht reinweiß, sonst wirkt es kalt */

  --salbei: #5f7355;         /* Zweitakzent aus der Pflanzenwelt */
  --salbei-zart: #e9efe4;    /* helle Fläche, frisch statt gelblich */

  --tinte: #2b2220;          /* warmes Dunkelbraun statt Schwarz */
  /* Die Grautöne sind bewusst dunkler gehalten als üblich. Die
     Hauptzielgruppe ist nicht dreißig, und heller Text auf hellem
     Grund ist genau das, was dann nicht mehr gelesen wird.
     Beide Werte erreichen auf --sand über 7:1 Kontrast (WCAG AAA).
     Bitte nicht aufhellen. */
  --grau: #574c43;
  --grau-hell: #776b60;
  --linie: #e5dbd3;

  /* --- Schrift --- */
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia,
           "Times New Roman", serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue",
          Arial, sans-serif;
  --sperr: 0.18em;

  /* --- Maße --- */
  --breite: 68rem;
  --rand: 1.5rem;
  --radius: 1rem;
  --radius-gross: 1.75rem;
  /* Höhe der Kopfleiste. Sie liegt über dem Inhalt, deshalb muss
     der erste Abschnitt jeder Seite diesen Betrag zusätzlich als
     oberen Innenabstand bekommen. Wird an drei Stellen verrechnet
     (.hero-bild, .seitenkopf, erster .abschnitt). */
  --kopfhoehe: 8.25rem;
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* clip statt hidden: hidden erzeugt einen Scroll-Container und
     macht damit position:sticky im Leistungsbereich wirkungslos.
     clip klippt genauso, ohne diesen Nebeneffekt. */
  overflow-x: clip;
}

body {
  margin: 0;
  background: var(--sand);
  color: var(--tinte);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

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

a { color: var(--beere); text-decoration: none; }
a:hover { color: var(--beere-dunkel); }

a:focus-visible, button:focus-visible {
  outline: 2px solid var(--beere);
  outline-offset: 3px;
  border-radius: 4px;
}

.sprunglink {
  position: absolute; top: 0; left: 0; z-index: 100;
  transform: translateX(-100%);
  background: var(--beere); color: #fff; padding: 0.75rem 1.25rem;
}
.sprunglink:focus { transform: translateX(0); color: #fff; }

/* ---------- Typografie ----------
   Große Zeilen in einer Serife: das trägt die Wärme und wirkt
   gleichzeitig ruhig und fachlich. Alles Übrige bleibt serifenlos. */
h1, h2 {
  font-family: var(--serif);
  /* Halbfett statt mager. Eine magere Serife in dieser Größe wirkt
     zerbrechlich; mit Gewicht bekommen die Überschriften Substanz,
     ohne laut zu werden. Der Hero geht noch eine Stufe höher. */
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 0 0 0.5em;
  text-wrap: balance;
}

h1 { font-size: clamp(2.4rem, 6vw, 4.25rem); }
h2 { font-size: clamp(1.6rem, 3.2vw, 2.4rem); }

h3 {
  font-family: var(--sans);
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.35;
  margin: 0 0 0.4em;
  letter-spacing: -0.005em;
}

p { margin: 0 0 1.1em; max-width: 36rem; }
p:last-child { margin-bottom: 0; }

/* Kleine Versalzeile — das wiederkehrende Detail aus dem Logo.
   Der kurze Strich davor fasst die Zeile an und bindet sie an den
   linken Rand an. Er erbt die Textfarbe, passt sich also auch auf
   farbigen Flächen automatisch an. */
.marke {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: var(--sperr);
  text-transform: uppercase;
  color: var(--beere);
  margin: 0 0 1.25rem;
}
.marke::before {
  content: "";
  flex: none;
  width: 1.75rem;
  height: 1px;
  background: currentColor;
}
.marke--grau { color: var(--grau-hell); }

.gross { font-size: 1.1875rem; line-height: 1.65; color: var(--grau); }
.grau { color: var(--grau); }
.klein { font-size: 0.9375rem; color: var(--grau); }

.hinweis {
  border-left: 2px solid var(--linie);
  padding-left: 1rem;
  margin: 1.75rem 0 0;
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--grau-hell);
  max-width: 36rem;
}

/* ---------- Layout ---------- */
.container { max-width: var(--breite); margin: 0 auto; padding: 0 var(--rand); }

.abschnitt { padding: clamp(3.5rem, 8vw, 6.5rem) 0; }
.abschnitt--schmal { padding: clamp(2.5rem, 5vw, 4rem) 0; }

.flaeche-sand { background: var(--sand-tief); }
/* Reines Weiß — der einzige Bereich, der heller ist als der
   Seitengrund. Setzt die Leistungen als eigenen Block ab. */
.flaeche-weiss { background: #fff; }
.flaeche-gruen { background: var(--salbei-zart); }
.flaeche-zart { background: var(--beere-zart); }

.flaeche-beere {
  position: relative;
  isolation: isolate;
  /* Der volle Beerenton ist auf einer so großen Fläche zu grell.
     Der dunklere Ton aus derselben Familie bleibt CI-treu und
     wirkt ruhiger. Als Akzent (Knöpfe, Marken, Ziffern) bleibt
     --beere unverändert. */
  background: var(--beere-dunkel);
  color: #fff;
  /* Oben genauso viel Luft wie unten. Der kleine obere Wert stammt
     aus der Zeit, als ein Bogen in die Fläche führte und selbst
     schon Abstand mitbrachte. */
  padding: clamp(3.5rem, 8vw, 6rem) 0;
}
/* Heidebild als sehr dezente Textur — gibt der Fläche Tiefe,
   ohne die Schrift zu stören. */
.flaeche-beere--textur::after {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background-image: url("bilder/heide-abend.jpg");
  background-size: cover;
  background-position: center;
  opacity: 0.16;
  mix-blend-mode: luminosity;
  /* Oben kurz einblenden, damit die Textur nicht an der Kante
     abgeschnitten wirkt. */
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 9%, #000 100%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 9%, #000 100%);
}
.flaeche-beere h1, .flaeche-beere h2, .flaeche-beere h3 { color: #fff; }
.flaeche-beere p { color: rgba(255,255,255,0.88); }
.flaeche-beere .marke { color: rgba(255,255,255,0.72); }
.flaeche-beere a { color: #fff; }
.flaeche-beere a:focus-visible { outline-color: #fff; }
/* Muss NACH .flaeche-beere a stehen, sonst wäre der helle Knopf
   weiß auf weiß. */
.flaeche-beere .knopf--hell { color: var(--beere); }
.flaeche-beere .knopf--hell:hover { color: var(--beere-dunkel); }
.flaeche-beere .hinweis { border-color: rgba(255,255,255,0.35); color: rgba(255,255,255,0.72); }
.flaeche-beere .daten li { border-top-color: rgba(255,255,255,0.25); }
.flaeche-beere .daten span:first-child { color: rgba(255,255,255,0.6); }
.flaeche-beere .telefon { color: #fff; border-bottom-color: rgba(255,255,255,0.5); }
.flaeche-beere .telefon:hover { border-bottom-color: #fff; }

/* ---------- Kopfbereich ----------
   Bleibt beim Scrollen oben stehen, aber DECKEND.

   Hier stand einmal ein durchscheinender Hintergrund mit
   Weichzeichner. Der ist bewusst entfernt: Die Logodatei hat einen
   weißen, keinen transparenten Hintergrund. Sichtbar wird er nur
   deshalb nicht, weil mix-blend-mode: multiply ihn auf hellem Grund
   verschwinden lässt. Sobald aber eine dunkle Fläche durch die
   Leiste durchscheint — etwa der Kontaktbereich beim Scrollen —
   greift multiply nicht mehr und das weiße Rechteck um das Logo
   wird sichtbar.

   Solange die Logodatei keinen Alphakanal hat, muss der Untergrund
   der Leiste immer HELL sein. Deshalb ist der Zustand ganz oben
   kein echtes Transparent, sondern ein heller Verlauf, der nach
   unten ausläuft: Die Leiste sitzt sichtbar im Bild, das Logo hat
   trotzdem an jeder Stelle einen hellen Grund.

   Der zweite Zustand kommt beim Scrollen. menue.js setzt dafür
   data-fest="true". Ohne JavaScript bleibt der Verlaufszustand
   stehen — auch der ist lesbar, es fehlt dann nur der Wechsel. */
.kopf {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  isolation: isolate;
  border-bottom: 1px solid transparent;
  background-color: transparent;
  /* Nur background-COLOR, nicht background. Der Verlauf steckt im
     ::before und wird über die Deckkraft ausgeblendet. Ein Verlauf
     ist eine Hintergrundgrafik und lässt sich nicht animieren —
     stünde er in der Kurzschreibweise, bliebe der Wechsel hängen. */
  transition: background-color 0.3s ease, border-color 0.3s ease;
}
.kopf::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(
    180deg,
    rgba(250, 246, 242, 0.82) 0%,
    rgba(250, 246, 242, 0.62) 55%,
    rgba(250, 246, 242, 0.00) 100%);
  transition: opacity 0.3s ease;
}
.kopf[data-fest="true"] {
  background-color: var(--sand);
  border-bottom-color: var(--linie);
}
.kopf[data-fest="true"]::before { opacity: 0; }

/* Die Leiste liegt über dem Inhalt, also muss der erste Abschnitt
   jeder Seite entsprechend tiefer anfangen. */
main > .abschnitt:first-child { padding-top: calc(clamp(3.5rem, 8vw, 6.5rem) + var(--kopfhoehe)); }

/* Sprungziele dürfen nicht unter der Leiste landen. */
[id] { scroll-margin-top: calc(var(--kopfhoehe) + 1rem); }

.kopf__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem; padding-top: 1rem; padding-bottom: 1rem;
  max-width: none;
  padding-left: clamp(1.25rem, 3.5vw, 3.5rem);
  padding-right: clamp(1.25rem, 3.5vw, 3.5rem);
}

.kopf__logo { display: flex; align-items: center; gap: 1rem; color: var(--tinte); }

/* Die Logodatei ist freigestellt, hat also einen echten Alphakanal.
   Der frühere Trick mit mix-blend-mode: multiply ist damit hinfällig
   und musste weg — er hätte das Logo auf farbigem Grund verfälscht.
   Das Original mit weißem Hintergrund liegt als
   „Logo Original (mit weissem Hintergrund).png" eine Ordnerebene höher daneben. */
/* 5.75rem = 92 px. bilder/logo-kopf.png ist mit 276 px genau
   dreimal so hoch gerechnet — auf Retina-Bildschirmen pixelgenau,
   der Browser muss nichts mehr skalieren.

   Diese Datei ist unterhalb von WOHLDE beschnitten; „Christine
   Winter" steht daneben als echte Schrift. Wird die Höhe hier
   geändert, muss die Datei neu gerechnet werden, sonst wird das
   Logo wieder weich. Das Skript dazu ist in der Übergabe vermerkt. */
.kopf__logo img {
  height: 5.75rem;
  width: auto;
}

.kopf__wortmarke {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: var(--sperr);
  text-transform: uppercase;
  line-height: 1.3;
  padding-left: 1rem;
  border-left: 1px solid var(--linie);
}
.kopf__wortmarke span {
  display: block;
  margin-top: 0.3rem;
  font-size: 0.625rem;
  font-weight: 400;
  letter-spacing: 0.09em;
  text-transform: none;
  color: var(--grau-hell);
}

/* Größerer Abstand zwischen den Punkten: dadurch beginnt die
   Navigation weiter links und die Leiste wirkt weniger gedrängt
   in die rechte Ecke geschoben. */
.nav ul {
  display: flex; align-items: center; gap: 2.75rem;
  list-style: none; margin: 0; padding: 0;
}
/* Die Navigation lief früher als gesperrter Versalsatz in 11 px.
   Das war als Detail hübsch, aber schlecht lesbar — und genau die
   Zeile, über die jemand telefonieren will. Jetzt normale Schreibung
   in 16 px: deutlich ruhiger zu lesen, ohne dass die Leiste
   schwerer wirkt. */
.nav a {
  font-size: 1.125rem; font-weight: 500;
  letter-spacing: 0; text-transform: none;
  color: var(--tinte); padding: 0.35rem 0;
  border-bottom: 1px solid transparent;
  white-space: nowrap;
}
.nav a:hover { color: var(--tinte); }
.nav a[aria-current="page"] { color: var(--tinte); border-bottom-color: var(--beere); }

/* Die Telefonnummer steht an der Stelle, an der sonst „Kontakt"
   stand. Sie ist bewusst kein Versalsatz wie die übrigen Punkte:
   eine Rufnummer soll man lesen und wählen können, nicht als
   Menüpunkt wahrnehmen. */
.nav__tel {
  display: inline-flex; align-items: center; gap: 0.55rem;
  font-size: 1.3125rem !important;
  font-weight: 600;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: var(--beere) !important;
  border-bottom: none !important;
}
.nav__tel:hover { color: var(--beere-dunkel) !important; }
.nav__tel svg { flex: none; }

.menue-schalter {
  display: none; align-items: center; gap: 0.55rem;
  background: none; border: 1px solid var(--linie); border-radius: 999px;
  color: var(--tinte);
  font: inherit; font-size: 0.6875rem; font-weight: 600;
  letter-spacing: var(--sperr); text-transform: uppercase;
  padding: 0.6rem 1rem; cursor: pointer;
}
.menue-schalter__balken { position: relative; width: 1rem; height: 1px; background: var(--tinte); }
.menue-schalter__balken::before,
.menue-schalter__balken::after {
  content: ""; position: absolute; left: 0; width: 100%; height: 1px; background: var(--tinte);
}
.menue-schalter__balken::before { top: -5px; }
.menue-schalter__balken::after { top: 5px; }

/* ---------- Hero ---------- */
.hero {
  padding: clamp(3rem, 7vw, 5.5rem) 0 clamp(3rem, 7vw, 5rem);
  position: relative;
  overflow: hidden;
}

/* Textspalte im Bildhero. Breiter als der normale Satzspiegel,
   damit „Zurück in die Mitte." auf dem Desktop in EINE Zeile passt.
   Die Zeile ist die stärkste Stelle der Seite; ein Umbruch mitten
   im Satz nimmt ihr die Wucht. */
.hero-bild__text { max-width: 44rem; }
/* Breit genug, dass der Satz auf dem Desktop nicht mit einem
   einzelnen Wort in die zweite Zeile fällt. */
.hero-bild__text .hero__slogan { max-width: 48ch; }
.hero-bild__text .hero__text { max-width: 40rem; }

.hero h1, .hero-bild h1 {
  font-size: clamp(2.5rem, 6vw, 4.35rem);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.025em;
  margin-bottom: 1.1rem;
  max-width: none;
}
/* Ab dieser Breite passt der Satz sicher in eine Zeile und darf
   nicht mehr umbrechen. Darunter bricht er normal um — erzwungene
   Einzeiligkeit auf dem Handy würde die Schrift unlesbar klein
   rechnen oder seitlich hinauslaufen. */
@media (min-width: 62rem) {
  .hero-bild h1 { white-space: nowrap; }
}

/* Der Punkt im Slogan in Beere — kleines Detail, große Wirkung */
.hero h1 .punkt, .hero-bild h1 .punkt, .seitenkopf h1 .punkt { color: var(--beere); }

/* Zweite Zeile des Leitsatzes. Steht in der Serife direkt unter der
   Überschrift und trägt den längeren Teil des Slogans, den die
   Überschrift selbst nicht fassen soll. */
.hero__slogan {
  font-family: var(--serif);
  font-size: clamp(1.25rem, 2.6vw, 1.75rem);
  line-height: 1.35;
  color: var(--tinte);
  max-width: 26ch;
  margin: -0.4rem 0 1.5rem;
}

/* Im Hero steht der Text über einem Foto. Auch mit dem hellen
   Verlauf darüber ist der Untergrund nie ganz gleichmäßig, deshalb
   hier der volle Dunkelton statt Grau. */
.hero__text {
  font-size: 1.125rem;
  line-height: 1.7;
  color: var(--tinte);
  max-width: 32rem;
}

/* Die vier Merkmale unter dem Hero-Text. Als 2×2-Block gesetzt,
   nicht als fließende Reihe: vier gleich große Felder ergeben eine
   ruhige Fläche, während unterschiedlich breite Pillen in zwei
   ungleichen Reihen unaufgeräumt aussahen. */
.merkmale {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.6rem;
  list-style: none;
  margin: 2.25rem 0 0; padding: 0;
  max-width: 34rem;
}
.merkmale li {
  display: flex; align-items: center; gap: 0.6rem;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: 0.75rem;
  padding: 0.7rem 1rem;
  font-size: 0.9375rem;
  color: var(--tinte);
}
.merkmale svg { flex: none; color: var(--beere); }
@media (max-width: 34rem) {
  .merkmale { grid-template-columns: 1fr; }
}

/* ---------- Bilder mit weichen Ecken ---------- */
.bild-rund {
  border-radius: var(--radius-gross);
  overflow: hidden;
  background: var(--sand-tief);
}
.bild-rund img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- HERO MIT VOLLFLÄCHIGEM HEIDEBILD ----------
   Das Bild trägt die ganze Fläche. Der Verlauf darüber ist HELL,
   nicht dunkel — die Heide soll freundlich wirken, nicht dramatisch.
   Links deckt er stark, damit die Schrift trägt; nach rechts gibt
   er das Bild frei. */
.hero-bild {
  position: relative;
  isolation: isolate;
  background-size: cover;
  background-position: center 58%;
  /* Gerader Abschluss unten, kein Bogen. Die Höhe kommt aus dem
     Inhalt plus diesem Innenabstand — bewusst moderat, damit der
     Hero nicht den ganzen Bildschirm einnimmt.
     Oben zusätzlich die Höhe der Kopfleiste, die darüber liegt. */
  padding: calc(clamp(3.5rem, 7vw, 5.5rem) + var(--kopfhoehe)) 0 clamp(3.5rem, 7vw, 5.5rem);
  min-height: min(84vh, 44rem);
  display: flex;
  align-items: center;
}
/* Der Hero verwendet NICHT den normalen Satzspiegel, sondern
   dieselben Außenabstände wie die Kopfleiste. Dadurch beginnt die
   Überschrift exakt unter dem Logo statt weiter innen — der Text
   rückt nach links und bekommt Platz für die einzeilige Headline. */
.hero-bild > .container {
  width: 100%;
  max-width: none;
  padding-left: clamp(1.25rem, 3.5vw, 3.5rem);
  padding-right: clamp(1.25rem, 3.5vw, 3.5rem);
}
.hero-bild::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  /* Deckt links so weit, dass die Schrift sicher trägt, und gibt
     dann zügig auf: Der Weg im Bild soll sichtbar bleiben, sonst
     wirkt der Hero milchig. Der Wechsel liegt bewusst hinter dem
     Textblock (der endet bei rund 44rem). */
  background: linear-gradient(
    100deg,
    rgba(250, 246, 242, 0.93) 0%,
    rgba(250, 246, 242, 0.86) 34%,
    rgba(250, 246, 242, 0.30) 62%,
    rgba(250, 246, 242, 0.00) 88%);
}
/* Schmale Bildschirme: der Text läuft über die volle Breite,
   deshalb deckt der Verlauf hier flächig. */
@media (max-width: 60rem) {
  .hero-bild::before {
    background: linear-gradient(
      170deg,
      rgba(250, 246, 242, 0.92) 0%,
      rgba(250, 246, 242, 0.84) 55%,
      rgba(250, 246, 242, 0.58) 100%);
  }
}

/* ---------- SEITENKOPF DER UNTERSEITEN ----------
   Dieselbe Bildsprache wie auf der Startseite, nur flacher. Zieht
   die CI durch alle Seiten, ohne dass jede Unterseite wie eine
   zweite Startseite wirkt. Das Bild wird per style="" gesetzt. */
.seitenkopf {
  position: relative;
  isolation: isolate;
  background-size: cover;
  background-position: center 62%;
  padding: calc(clamp(2.75rem, 6vw, 4.75rem) + var(--kopfhoehe)) 0 clamp(2.75rem, 6vw, 4.25rem);
}
.seitenkopf::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(
    100deg,
    rgba(250, 246, 242, 0.93) 0%,
    rgba(250, 246, 242, 0.84) 34%,
    rgba(250, 246, 242, 0.46) 62%,
    rgba(250, 246, 242, 0.08) 100%);
}
.seitenkopf h1 { max-width: 16ch; margin-bottom: 0.45em; }
.seitenkopf .gross { max-width: 34rem; }
@media (max-width: 60rem) {
  .seitenkopf::before {
    background: linear-gradient(
      170deg,
      rgba(250, 246, 242, 0.94) 0%,
      rgba(250, 246, 242, 0.86) 60%,
      rgba(250, 246, 242, 0.66) 100%);
  }
}

/* ---------- Themenfeld „Wer sich an mich wenden kann" ----------
   Bewusst als lockere Marken gesetzt, nicht als Liste: es ist eine
   Orientierung für Ratsuchende, keine Aufzählung von Erfolgen. */
.themen__kopf { max-width: 44rem; }

.themen__liste {
  display: flex; flex-wrap: wrap;
  gap: 0.7rem;
  list-style: none;
  margin: 2.25rem 0 0; padding: 0;
  max-width: 58rem;
}
/* Abgerundete Rechtecke, keine Pillen: die Ecken geben den Marken
   Gewicht. Sie sollen nach Rubriken aussehen, nicht nach Schlagworten. */
/* Dieselbe Behandlung wie der Anruf-Kasten weiter unten: weiß mit
   feiner Linie und weichem Schatten. So gehören beide sichtbar
   zusammen, und der warme Seitengrund bleibt ungestört. */
.themen__liste li {
  display: inline-flex; align-items: center; gap: 0.7rem;
  background: var(--karte);
  border: 1px solid var(--linie);
  border-radius: 0.85rem;
  padding: 0.85rem 1.35rem;
  font-size: 1.0625rem;
  line-height: 1.35;
  color: var(--tinte);
  box-shadow: 0 1px 2px rgba(43, 34, 32, 0.03),
              0 6px 16px rgba(43, 34, 32, 0.04);
}
.themen__liste li::before {
  content: "";
  flex: none;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--beere);
}
/* Die Schlusszeile ist kein Thema, sondern ein Satz — ohne Rahmen. */
.themen__schluss {
  margin-top: 1.6rem;
  font-family: var(--serif);
  font-size: 1.1875rem;
  color: var(--grau);
  max-width: 38rem;
}

/* ---------- Bildstreifen: drei Aufnahmen, versetzt ----------
   Bricht die Seite auf und bringt die Heide großflächig ins Bild,
   ohne wieder ein Text-neben-Bild-Muster zu sein. */
.streifen {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(0.75rem, 1.6vw, 1.25rem);
  align-items: start;
}
.streifen figure {
  margin: 0;
  border-radius: var(--radius-gross);
  overflow: hidden;
  background: var(--sand-tief);
}
.streifen img { width: 100%; height: 100%; object-fit: cover; }
/* Unterschiedliche Höhen und Versatz — das macht den Streifen
   verspielt statt tabellarisch. */
.streifen figure:nth-child(1) { margin-top: clamp(1.5rem, 4vw, 3.5rem); }
.streifen figure:nth-child(3) { margin-top: clamp(2.5rem, 6vw, 5rem); }

/* Das Bild selbst bekommt die Rundung, die Bildunterschrift steht
   darunter auf dem Seitengrund. */
.streifen figure { background: none; border-radius: 0; overflow: visible; }
.streifen img {
  border-radius: var(--radius-gross);
  aspect-ratio: 3 / 4;
  background: var(--sand-tief);
}
.streifen figure:nth-child(2) img { aspect-ratio: 3 / 4.6; }
.streifen figcaption {
  margin-top: 0.85rem;
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--grau-hell);
}

/* Kopfzeile über dem Bildstreifen */
.streifen__kopf {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: end;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}
.streifen__kopf h2 { margin-bottom: 0; max-width: 14ch; }
@media (max-width: 60rem) {
  .streifen__kopf { grid-template-columns: 1fr; gap: 1rem; }
}

/* ---------- Vollbreites Naturband mit Leitsatz ----------
   Bewusst NICHT mittig gesetzt. Eine zentrierte Versalzeile über
   einem zentrierten Satz auf einem Bild ist der Standardbaustein,
   den jeder Baukasten ausspuckt; links gesetzt, mit einer Kante als
   Anker, wirkt dieselbe Idee gebaut statt zusammengeklickt.

   Der Schleier ist unten kräftiger als oben: so bleibt oben etwas
   von der Landschaft sichtbar und die Schrift steht trotzdem sicher. */
.band {
  position: relative;
  isolation: isolate;
  min-height: clamp(22rem, 44vw, 34rem);
  display: grid;
  align-items: center;
  padding: clamp(4rem, 9vw, 7rem) 0;
  background-size: cover;
  background-position: center 55%;
  color: #fff;
}
.band::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(102deg,
      rgba(75, 20, 49, 0.86) 0%,
      rgba(96, 27, 63, 0.72) 34%,
      rgba(126, 37, 83, 0.42) 62%,
      rgba(145, 43, 97, 0.28) 100%);
}

.band__inhalt {
  max-width: 38rem;
  /* Die feine Kante links ist der einzige Schmuck. Sie greift die
     Trennlinien aus dem Briefbogen auf. */
  border-left: 2px solid rgba(255, 255, 255, 0.55);
  padding-left: clamp(1.25rem, 2.5vw, 2.25rem);
}
.band__satz {
  font-family: var(--serif);
  font-size: clamp(1.9rem, 4.4vw, 3.25rem);
  line-height: 1.12;
  letter-spacing: -0.015em;
  margin: 0 0 1.1rem;
  color: #fff;
  max-width: 16ch;
  text-wrap: balance;
}
.band__text {
  font-size: clamp(1rem, 1.5vw, 1.125rem);
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.92);
  max-width: 34rem;
  margin: 0;
}
.band .marke { color: rgba(255, 255, 255, 0.75); }

@media (max-width: 46rem) {
  .band::before {
    background: linear-gradient(170deg,
      rgba(75, 20, 49, 0.86) 0%,
      rgba(105, 30, 69, 0.78) 60%,
      rgba(126, 37, 83, 0.7) 100%);
  }
}

/* ---------- TRENNER (Motiv vom Briefbogen) ----------
   Ein SVG-Pfad, der links und rechts an der Unterkante beginnt und
   alles darunter füllt. Dadurch entstehen an den Rändern keine
   Ecken, egal wie breit der Bildschirm ist.

   Verwendung — steht VOR der Fläche, die er einleitet:
     <div class="trenner trenner--sand" aria-hidden="true"> … </div>
------------------------------------------------------------------- */
.trenner { line-height: 0; display: block; }
.trenner svg {
  display: block;
  /* Minimal über die volle Breite hinaus und nach unten versetzt.
     Grund: an der Naht zwischen SVG und der Fläche darunter blieb
     sonst eine haarfeine helle Linie stehen — ein Rundungsfehler
     beim Skalieren, der je nach Zoomstufe auftaucht. Der eine
     Pixel Überlappung macht ihn unmöglich. */
  width: 100.5%;
  margin-left: -0.25%;
  margin-bottom: -1px;
  height: clamp(2.5rem, 6vw, 6.5rem);
}
.trenner--sand  svg { fill: var(--sand-tief); }
.trenner--gruen svg { fill: var(--salbei-zart); }
.trenner--hell  svg { fill: var(--sand); }
.trenner--beere svg { fill: var(--beere-dunkel); }
.trenner--karte svg { fill: var(--karte); }

/* ---------- Leistungen ----------
   Überschrift oben, darunter die fünf Leistungen über die volle
   Breite. Jede Zeile: Titel links, Beschreibung rechts, Pfeil außen.
   Farbe wird sparsam eingesetzt — Beere nur beim Überfahren, sonst
   trägt die Typografie. */
.leistungen__kopf {
  max-width: 44rem;
  margin-bottom: clamp(2.5rem, 5vw, 3.5rem);
}
.leistungen__kopf h2 { max-width: 18ch; }

.leistungen__liste { list-style: none; margin: 0; padding: 0; }
.leistungen__liste li { border-top: 1px solid var(--linie); }
.leistungen__liste li:last-child { border-bottom: 1px solid var(--linie); }

.leistungen__liste a {
  display: grid;
  grid-template-columns: 1.15fr 1fr 2.75rem;
  gap: 0.5rem 2.5rem;
  /* Alles an der Mitte der Zeile ausrichten. Vorher stand alles auf
     der ersten Schriftlinie — bei einzeiligen Überschriften klebte
     der Text dadurch an der Oberkante, während zweizeilige die
     Zeilenhöhe bestimmten. Jetzt sitzt beides mittig. */
  align-items: center;
  /* Der Innenabstand ist bei allen Zeilen gleich und ändert sich
     beim Überfahren NICHT. Vorher wanderte die Zeile beim Hover
     nach rechts — dabei brach die Überschrift um und „nach Dr. Voll"
     rutschte in die zweite Zeile. Bewegung darf hier nichts
     umbrechen lassen. */
  padding: 2rem 0.75rem 2rem 1.6rem;
  border-radius: var(--radius);
  color: var(--tinte);
  transition: background 0.25s ease;
}
.leistungen__liste a:hover {
  /* Zarter Beerenton statt der honigfarbenen Fläche — transparent,
     damit der Seitengrund durchscheint und es leicht bleibt. */
  background: rgba(145, 43, 97, 0.07);
  color: var(--tinte);
}

.leistungen__liste h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.25rem, 2.2vw, 1.6rem);
  line-height: 1.25;
  margin: 0;
  color: var(--tinte);
}
.leistungen__liste p {
  font-size: 0.9375rem;
  color: var(--grau);
  margin: 0;
  max-width: 32rem;
}

/* Der Pfeil sitzt in einem eigenen Kreis. Vorher war es ein
   nacktes Pfeilzeichen, das an der ERSTEN Textzeile ausgerichtet
   war — bei ein- und zweizeiligen Überschriften stand es dadurch
   auf unterschiedlicher Höhe und die Spalte wirkte unsortiert.
   Der Kreis hat eine feste Größe und wird über align-self mittig
   gesetzt, damit alle fünf exakt untereinander stehen. */
.leistungen__pfeil {
  justify-self: end;
  /* align-self: center richtet den Pfeil an der MITTE DER ZEILE aus,
     nicht an der ersten Textzeile. Ohne diese Zeile würde er dem
     align-items: baseline des Rasters folgen und bei ein- und
     zweizeiligen Überschriften auf verschiedenen Höhen stehen. */
  align-self: center;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  color: var(--beere);
  font-size: 1.5rem;
  line-height: 1;
  transition: color 0.2s ease, transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}
.leistungen__liste a:hover .leistungen__pfeil {
  color: var(--beere-dunkel);
  transform: translateX(0.35rem);
}

/* Hervorgehobene Leistung: dauerhaft auf einer sehr zarten,
   durchscheinenden Beerenfläche — kein Farbklotz, aber sofort
   als erste Zeile erkennbar. */
.leistungen__liste li.hervor a {
  background: rgba(145, 43, 97, 0.06);
}
.leistungen__liste li.hervor a:hover { background: rgba(145, 43, 97, 0.11); }
.leistungen__liste li.hervor .marke {
  grid-column: 1 / -1;
  color: var(--grau-hell);
  margin-bottom: 0.15rem;
}

/* ---------- Ablauf in Schritten ----------
   Große Ziffern in der Serifenschrift, verbunden durch eine feine
   Linie. Die Linie greift die Bogenidee auf und führt das Auge. */
.schritte {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.75rem, 3.5vw, 3rem);
  list-style: none; margin: 3rem 0 0; padding: 0;
  counter-reset: schritt;
}
/* Durchgehende Linie auf Höhe der Ziffern */
.schritte::before {
  content: "";
  position: absolute;
  top: 1.75rem; left: 12%; right: 12%;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%, var(--linie) 12%, var(--linie) 88%, transparent 100%);
}
.schritte li { counter-increment: schritt; position: relative; }
.schritte li::before {
  content: counter(schritt);
  position: relative; z-index: 1;
  display: grid; place-items: center;
  width: 3.5rem; height: 3.5rem;
  border-radius: 50%;
  background: var(--beere);
  color: #fff;
  font-family: var(--serif);
  font-size: 1.5rem;
  margin-bottom: 1.4rem;
  box-shadow: 0 0 0 8px var(--sand);
}
.schritte h3 { font-size: 1.1875rem; }
.schritte p { font-size: 0.9375rem; color: var(--grau); margin: 0; }

/* ---------- Anstoß zum ersten Anruf ----------
   Steht am Ende des Ablaufs. Abgesetzte Karte statt Fließtext,
   damit die Aufforderung nicht im Absatz verschwindet. */
.anstoss {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  /* Weiß wie die Themenmarken direkt darüber, nicht zartlila. Die
     Farbe trägt hier allein der Knopf — er ist das, was angeklickt
     werden soll, und steht auf weißem Grund deutlicher. */
  background: var(--karte);
  border: 1px solid var(--linie);
  border-radius: var(--radius-gross);
  padding: clamp(1.75rem, 4vw, 2.75rem);
  max-width: 46rem;
  /* Der Kasten steht seit dem Wegfall der Farbfläche weiß auf
     nahezu Weiß. Der weiche Schatten hebt ihn ab, ohne dass eine
     zweite Farbe nötig wird. */
  box-shadow: 0 2px 3px rgba(43, 34, 32, 0.03),
              0 12px 32px rgba(43, 34, 32, 0.06);
}
.anstoss h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.375rem, 2.6vw, 1.75rem);
  line-height: 1.2;
  margin-bottom: 0.6rem;
  color: var(--tinte);
}
.anstoss p { color: var(--grau); max-width: 38rem; }
.anstoss__knopf { margin: 1.75rem 0 0; }

/* ---------- Leistungsdetail ---------- */
.leistung {
  border-top: 1px solid var(--linie);
  padding: clamp(2.25rem, 5vw, 3.5rem) 0;
  display: grid;
  grid-template-columns: 3.5rem 1fr;
  gap: 0 2rem;
}
.leistung__nr {
  font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.1em;
  color: var(--grau-hell); font-variant-numeric: tabular-nums; padding-top: 0.75rem;
}
.leistung p { color: var(--grau); }

/* ---------- Anwendungsbereiche als weiche Marken ---------- */
.anwendung { margin: 1.75rem 0 0; max-width: 40rem; }
.anwendung dt {
  font-size: 0.625rem; font-weight: 600;
  letter-spacing: var(--sperr); text-transform: uppercase;
  color: var(--grau-hell); margin-bottom: 0.6rem;
}
.anwendung dd { margin: 0; display: flex; flex-wrap: wrap; gap: 0.45rem; }
.anwendung dd span {
  background: var(--beere-zart);
  border-radius: 999px;
  padding: 0.35rem 0.85rem;
  font-size: 0.875rem;
  color: var(--beere-dunkel);
}
.flaeche-beere .anwendung dd span { background: rgba(255,255,255,0.16); color: #fff; }

/* ---------- Zeitleiste ---------- */
.zeitleiste { list-style: none; margin: 0; padding: 0; }
.zeitleiste li {
  display: grid; grid-template-columns: 9rem 1fr; gap: 0.2rem 1.5rem;
  padding: 1rem 0; border-top: 1px solid var(--linie); align-items: baseline;
}
.zeitleiste b {
  font-weight: 400; font-variant-numeric: tabular-nums;
  font-size: 0.9375rem; letter-spacing: 0.03em; color: var(--beere);
}

/* ---------- Kontakt ---------- */
.telefon {
  display: inline-block;
  font-family: var(--serif);
  font-size: clamp(1.75rem, 4vw, 2.5rem); font-weight: 400;
  color: var(--tinte);
  border-bottom: 2px solid var(--beere); padding-bottom: 0.1rem;
}
.telefon:hover { color: var(--beere); }

.daten { list-style: none; margin: 0; padding: 0; }
.daten li {
  display: grid; grid-template-columns: 6.5rem 1fr; gap: 0.2rem 1.5rem;
  padding: 0.9rem 0; border-top: 1px solid var(--linie); align-items: baseline;
}
.daten span:first-child {
  font-size: 0.625rem; font-weight: 600;
  letter-spacing: var(--sperr); text-transform: uppercase; color: var(--grau-hell);
}

/* ---------- Knopf und Textlink ---------- */
.knopf {
  display: inline-flex; align-items: center; gap: 0.6rem;
  background: var(--beere); color: #fff;
  border-radius: 999px;
  padding: 0.85rem 1.6rem;
  font-size: 0.9375rem; font-weight: 600;
  transition: background 0.2s ease, transform 0.2s ease;
}
.knopf:hover { background: var(--beere-dunkel); color: #fff; transform: translateY(-2px); }
.knopf--hell { background: #fff; color: var(--beere); }
.knopf--hell:hover { background: rgba(255,255,255,0.88); color: var(--beere-dunkel); }

.pfeil {
  display: inline-block; margin-top: 1.75rem;
  font-size: 0.6875rem; font-weight: 600;
  letter-spacing: var(--sperr); text-transform: uppercase;
  color: var(--beere); border-bottom: 1px solid var(--linie); padding-bottom: 0.35rem;
}
.pfeil:hover { border-bottom-color: var(--beere); }
.pfeil::after { content: " →"; }

/* ---------- Fußbereich ---------- */
.fuss {
  border-top: 1px solid var(--linie);
  padding: clamp(2.5rem, 5vw, 3.5rem) 0 2.5rem;
  font-size: 0.9375rem; color: var(--grau);
}
.fuss__raster { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 2.5rem; }
.fuss__titel {
  font-size: 0.625rem; font-weight: 600;
  letter-spacing: var(--sperr); text-transform: uppercase;
  color: var(--grau-hell); margin: 0 0 0.8rem;
}
.fuss ul { list-style: none; margin: 0; padding: 0; }
.fuss li { margin-bottom: 0.4rem; }
.fuss a { color: var(--grau); }
.fuss a:hover { color: var(--tinte); }
.fuss address { font-style: normal; }
.fuss__unten {
  margin-top: 2.5rem; padding-top: 1.25rem; border-top: 1px solid var(--linie);
  display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; justify-content: space-between;
  font-size: 0.8125rem; color: var(--grau-hell);
}

/* ---------- Rechtstexte ---------- */
.recht { max-width: 44rem; }
.recht h2 {
  font-size: 1.25rem; margin-top: 2.75rem;
  padding-top: 1.25rem; border-top: 1px solid var(--linie);
}
.recht h3 { margin-top: 1.75rem; }
.recht p, .recht li { color: var(--grau); }
.recht ul { padding-left: 1.15rem; }
.recht li { margin-bottom: 0.45rem; }
.recht address { font-style: normal; color: var(--tinte); }

/* ---------- Responsive ---------- */
@media (max-width: 60rem) {
  .menue-schalter { display: inline-flex; }
  .kopf__inner { flex-wrap: wrap; }
  .nav {
    display: none; width: 100%;
    border-top: 1px solid var(--linie); padding: 0.25rem 0 0.75rem;
  }
  .nav[data-offen="true"] { display: block; }
  .nav ul { flex-direction: column; align-items: stretch; gap: 0; }
  .nav li { border-bottom: 1px solid var(--linie); }
  .nav li:last-child { border-bottom: none; }
  .nav a { display: block; padding: 0.9rem 0; font-size: 0.8125rem; }
  .nav a[aria-current="page"] { border-bottom-color: transparent; color: var(--beere); }

  .kopf__wortmarke { display: none; }

  .hero__raster { grid-template-columns: 1fr; gap: 2.5rem; }
  .hero__bild { max-width: 26rem; }

  .schritte { grid-template-columns: 1fr; gap: 1.75rem; }
  .schritte::before { display: none; }
  .fuss__raster { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 46rem) {
  /* Schmale Ansicht: Titel und Beschreibung untereinander. */
  .leistungen__liste a { grid-template-columns: 1fr auto; gap: 0.4rem 1rem; }
  .leistungen__liste p { grid-column: 1 / -1; }
  /* Bildstreifen: drittes Bild entfällt, zwei reichen auf schmalen
     Bildschirmen und der Versatz wird aufgehoben. */
  .streifen { grid-template-columns: 1fr 1fr; }
  .streifen figure:nth-child(n) { margin-top: 0; aspect-ratio: 3 / 4; }
  .streifen figure:nth-child(3) { display: none; }
  .leistung { grid-template-columns: 1fr; gap: 0.5rem; }
  .leistung__nr { padding-top: 0; }
  .zeitleiste li, .daten li { grid-template-columns: 1fr; }
}

@media (max-width: 30rem) {
  :root { --rand: 1.15rem; }
  body { font-size: 1rem; }
  .fuss__raster { grid-template-columns: 1fr; gap: 1.75rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important; animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important; scroll-behavior: auto !important;
  }
}

@media print {
  .kopf, .fuss, .menue-schalter, .sprunglink, .bogen { display: none; }
  body { background: #fff; font-size: 11pt; }
  .flaeche-beere { background: none; color: #000; }
  .flaeche-beere h1, .flaeche-beere h2, .flaeche-beere p { color: #000; }
}

/* ---------- Portraitzeile auf „Über mich" ---------- */
.portrait__raster {
  display: grid;
  grid-template-columns: 0.8fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
@media (max-width: 60rem) {
  .portrait__raster { grid-template-columns: 1fr; gap: 2.5rem; }
}

/* Trenner, der auf einer farbigen Fläche sitzt: der Bereich neben
   der Kurve muss die Farbe DARÜBER haben, sonst blitzt der
   Seitengrund durch. */
.trenner--auf-sand { background: var(--sand-tief); }
.trenner--auf-beere { background: var(--beere-dunkel); }