/* ═══════════════════════════════════════════════════════════════════
   RENÉ NOSSEK · HEILPRAKTIKER · DESIGNSYSTEM DER WEBSITE
   Theme rene-nossek-gp · assets/css/site.css

   Grundlage ist Entwurf C · Ton (Webseitenentwuerfe/entwurf-c-ton.html),
   von René am 15.09.2026 freigegeben. Teil 1 dieser Datei ist dessen CSS
   unverändert; Teil 2 ergänzt, was eine Website mit 24 Seiten braucht:
   Menü, Mobilmenü, Fußzeile, Seitenkopf, Brotkrumen, Fließtext, Artikel.

   GeneratePress liefert kein CSS – das Elterntheme ist abgeschaltet
   (inc/assets.php). Diese Datei ist die einzige Stilquelle der Seite.

   Regeln aus Designsystem/tokens/fundament.css gelten weiter:
   kein reines Schwarz; #bc6433 und #7f7e58 nur als Großschrift oder
   Akzent; Sand ist Fläche, nie Linie; Fokus immer sichtbar.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Schriften · selbst gehostet (DSGVO, Ladezeit) ─────────────────
   Variable Schnitte, nur Latin. Die Fallbacks tragen angepasste Metriken,
   damit der Text beim Schriftwechsel nicht umbricht (kein Layout-Shift).
   Werte gerechnet aus den Fontdateien gegen Georgia bzw. Arial. */
@font-face{
  font-family:'Faustina';font-style:normal;font-weight:300 800;font-display:swap;
  src:url(../fonts/faustina-variable-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Faustina';font-style:italic;font-weight:300 800;font-display:swap;
  src:url(../fonts/faustina-variable-italic-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Source Sans 3';font-style:normal;font-weight:200 900;font-display:swap;
  src:url(../fonts/source-sans-3-variable-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Source Sans 3';font-style:italic;font-weight:200 900;font-display:swap;
  src:url(../fonts/source-sans-3-variable-italic-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Faustina Fallback';src:local('Georgia');
  size-adjust:92.20%;ascent-override:113.12%;descent-override:23.54%;line-gap-override:0%;
}
@font-face{
  font-family:'Source Sans 3 Fallback';src:local('Arial');
  size-adjust:89.96%;ascent-override:113.82%;descent-override:44.46%;line-gap-override:0%;
}

/* ═══════════════════════════════════════════════════════════════════
   TEIL 1 · ENTWURF C, UNVERÄNDERT
   ═══════════════════════════════════════════════════════════════════ */
:root{
  --off-white:#faf5f0;
  --sand:#d6cab5;
  --cream:#f0e8db;
  --brown:#392e18;
  --olive:#7f7e58;
  --terracotta:#bc6433;
  --terracotta-deep:#8f4523;
  --olive-deep:#5a5940;
  --brown-soft:#5c4c31;
  --rule:rgba(57,46,24,.16);
  --rule-soft:rgba(57,46,24,.08);

  --serif:'Faustina',Georgia,serif;
  --sans:'Source Sans 3',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;

  --measure:66ch;
  --gutter:clamp(18px,4vw,56px);
  --stack:clamp(76px,11vh,142px);
  --r-lg:clamp(34px,4.4vw,68px);
  --r-md:clamp(22px,2.6vw,38px);
  --r-sm:clamp(14px,1.6vw,24px);

  /* V18 · Asymmetrische Radien: eine Ecke weit offen, drei eng.
     Vier Varianten, damit benachbarte Karten nie dieselbe Ecke öffnen. */
  --r-a:var(--r-sm) var(--r-lg) var(--r-sm) var(--r-sm);
  --r-b:var(--r-lg) var(--r-sm) var(--r-sm) var(--r-sm);
  --r-c:var(--r-sm) var(--r-sm) var(--r-lg) var(--r-sm);
  --r-d:var(--r-sm) var(--r-sm) var(--r-sm) var(--r-lg);

  --ease:cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto;}}
body{
  margin:0;background:var(--cream);color:var(--brown);
  font-family:var(--sans);font-size:clamp(16.5px,.55vw + 15px,18.5px);
  line-height:1.7;font-weight:380;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
/* clip statt hidden: hidden macht den Body zum Scrollcontainer und bricht
   damit position:sticky – die Sequenz weiter unten hängt daran. */
@supports (overflow-x:clip){body{overflow-x:clip;}}
h1,h2,h3{font-family:var(--serif);font-weight:400;line-height:1.06;margin:0;text-wrap:balance;letter-spacing:-.024em;}
p{margin:0;text-wrap:pretty;}
a{color:inherit;}
img{max-width:100%;display:block;height:auto;}
::selection{background:var(--terracotta-deep);color:var(--off-white);}
:focus-visible{outline:2.5px solid var(--terracotta-deep);outline-offset:4px;border-radius:10px;}

.wrap{max-width:1360px;margin:0 auto;padding-inline:var(--gutter);}
/* Sprungziele liegen sonst unter der klebenden Kopfzeile */
:target,section[id]{scroll-margin-top:96px;}

/* ══ Kopf ══ */
.top{position:sticky;top:0;z-index:60;background:color-mix(in srgb,var(--cream) 90%,transparent);backdrop-filter:blur(9px) saturate(1.1);transition:box-shadow .35s var(--ease),background .35s;}
/* V16 · beim Scrollen absetzen: eine Haarlinie, sonst nichts */
.top.is-ab{box-shadow:0 1px 0 var(--rule-soft),0 6px 22px rgba(57,46,24,.05);}
.top-in{display:flex;align-items:center;justify-content:space-between;gap:24px;height:78px;transition:height .35s var(--ease);}
.top.is-ab .top-in{height:66px;}
/* Logo · Annas finale Dateien (16.09.2026), Horizontal-Lockup als SVG: Hände +
   Schriftzug, ca. 3,83:1 (breiter als der alte Kachel-Entwurf) – Höhen gegenüber
   dem alten Logo um den Seitenverhältnis-Faktor verkleinert, damit die Breite
   im Kopf gleich bleibt. */
.mark{display:flex;flex-shrink:0;text-decoration:none;}
.mark img{display:block;height:44px;width:auto;transition:height .35s var(--ease);}
.top.is-ab .mark img{height:38px;}
@media (max-width:620px){.mark img{height:36px;}.top.is-ab .mark img{height:33px;}}
.nav{display:flex;gap:30px;font-size:15px;}
.nav a{text-decoration:none;color:var(--brown-soft);transition:color .25s;}
.nav a:hover{color:var(--terracotta-deep);}
@media (max-width:1000px){.nav{display:none;}}

/* ══ Schaltflächen ══
   V15 · Der Kreis trägt das Icon; beim Überfahren fährt ein Pfeil hinein
   und das Icon hinaus. Beide liegen übereinander im beschnittenen Kreis. */
.btn{
  display:inline-flex;align-items:center;gap:12px;
  background:var(--terracotta-deep);color:var(--off-white);
  font-size:15px;font-weight:600;padding:9px 24px 9px 9px;border-radius:999px;
  text-decoration:none;white-space:nowrap;
  transition:background .3s var(--ease),transform .3s var(--ease),box-shadow .3s;
  box-shadow:0 3px 10px rgba(57,46,24,.1);
}
.btn:hover{background:var(--brown);transform:translateY(-2px);box-shadow:0 7px 20px rgba(57,46,24,.16);}
.btn-ic{
  width:36px;height:36px;border-radius:999px;flex:none;
  background:rgba(250,245,240,.17);
  display:grid;place-items:center;overflow:hidden;position:relative;
}
.btn-ic svg{width:16px;height:16px;grid-area:1/1;transition:transform .42s var(--ease),opacity .3s;}
.btn-ic .ic-pfeil{transform:translateX(-140%);opacity:0;}
.btn:hover .btn-ic .ic-haupt{transform:translateX(140%);opacity:0;}
.btn:hover .btn-ic .ic-pfeil{transform:none;opacity:1;}
.btn-gross{font-size:16.5px;padding:11px 30px 11px 11px;gap:14px;}
.btn-gross .btn-ic{width:42px;height:42px;}
.btn-gross .btn-ic svg{width:18px;height:18px;}
.btn-light{background:var(--off-white);color:var(--terracotta-deep);}
.btn-light .btn-ic{background:rgba(143,69,35,.12);}
.btn-light:hover{background:var(--cream);color:var(--brown);}
/* V10 · im Seitenkopf ruhiger: Umriss statt Fläche */
.btn-linie{background:transparent;color:var(--terracotta-deep);box-shadow:inset 0 0 0 1.5px rgba(143,69,35,.4);font-size:14.5px;padding:7px 20px 7px 7px;gap:10px;}
.btn-linie .btn-ic{width:30px;height:30px;background:rgba(143,69,35,.1);}
.btn-linie .btn-ic svg{width:14px;height:14px;}
.btn-linie:hover{background:var(--terracotta-deep);color:var(--off-white);box-shadow:inset 0 0 0 1.5px var(--terracotta-deep),0 7px 20px rgba(57,46,24,.16);}
.btn-linie:hover .btn-ic{background:rgba(250,245,240,.18);}
.ghost{font-size:15px;font-weight:600;text-decoration:none;border-bottom:1.5px solid currentColor;padding-bottom:3px;opacity:.85;transition:opacity .25s;}
.ghost:hover{opacity:1;}
/* Auf schmalen Geräten darf die Beschriftung umbrechen – nowrap wäre
   dort breiter als der Bildschirm. */
@media (max-width:620px){
  .btn{white-space:normal;text-wrap:balance;}
  .btn-gross{font-size:15.5px;padding:10px 22px 10px 10px;}
}

/* ══ V19 · Vorzeile über jeder Sektionsüberschrift ══ */
.eyebrow{
  display:inline-flex;align-items:center;gap:9px;
  font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:var(--brown-soft);
  border:1px solid rgba(57,46,24,.18);border-radius:999px;
  padding:6px 16px;margin-bottom:22px;
}
.eyebrow::before{content:"";width:6px;height:6px;border-radius:999px;background:var(--terracotta);flex:none;}
.band-dark .eyebrow{color:rgba(250,245,240,.82);border-color:rgba(250,245,240,.26);}
.band-sand .eyebrow{color:#4a3f28;border-color:rgba(57,46,24,.26);}
/* Auf der Terrakotta-Fläche stand die Vorzeile in Braun mit terrakotta-
   farbenem Punkt – 1,38:1 und der Punkt unsichtbar. Hell wie auf Braun. */
.close-band .eyebrow{color:var(--off-white);border-color:rgba(250,245,240,.4);}
.close-band .eyebrow::before{background:var(--sand);}

/* ══ Hero ══
   Die Fläche liegt jetzt im selben Raster wie die Bänder darunter: außen
   bündig mit ihnen, innen bündig mit deren Inhalt. Vorher saß sie über
   `.wrap` 40px enger und sprang gegen jede folgende Sektion. */
.hero{padding-top:clamp(10px,2vh,26px);padding-bottom:clamp(30px,4vh,54px);}
.slab{
  position:relative;border-radius:var(--r-lg);color:var(--off-white);
  /* Kein Fotorauschen mehr, sondern ein ruhiger Verlauf: warm und offen
     oben rechts hinter dem Bild, tief unten links unter der Aussage. */
  background:
    radial-gradient(115% 85% at 84% 6%, #b25c2d 0%, rgba(178,92,45,0) 64%),
    linear-gradient(156deg, #9c4d27 0%, var(--terracotta-deep) 48%, #74371c 100%);
}
/* minmax(0,…) statt 1fr: sonst zieht der nicht umbrechende Button die
   Spalte auf seine Mindestbreite auf und Fläche und Foto laufen aus dem
   Raster heraus. */
.slab-in{
  display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);gap:clamp(28px,4vw,72px);
  align-items:center;
  max-width:1360px;margin-inline:auto;
  padding:clamp(38px,4.6vw,74px) var(--gutter);
}
@media (max-width:940px){.slab-in{grid-template-columns:minmax(0,1fr);gap:34px;}}
.hero h1{font-size:clamp(42px,6.2vw,90px);line-height:.98;letter-spacing:-.032em;color:var(--off-white);}
/* V22 · Kursive Serife bleibt zwei Rollen vorbehalten:
   der zweiten Zeile einer Kernaussage und Renés O-Tönen. */
.hero h1 em{font-style:italic;color:var(--sand);}
.hero-lead{margin-top:26px;font-size:clamp(17px,1.1vw,20px);color:rgba(250,245,240,.87);max-width:44ch;}
.hero-actions{display:flex;flex-wrap:wrap;gap:16px;align-items:center;margin-top:32px;}
/* V20 · Das Foto sitzt nicht als Rechteck in der Fläche, sondern läuft
   unten über ihre Kante hinaus. */
.hero-photo{
  position:relative;border-radius:var(--r-a);overflow:hidden;
  background:rgba(250,245,240,.12);
  width:min(100%,470px);margin-left:auto;
  /* unten an die Fläche gesetzt und um Innenabstand plus Überstand
     nach unten gezogen, damit das Bild wirklich über die Kante läuft */
  align-self:end;
  margin-bottom:calc(-1 * (clamp(38px,4.6vw,74px) + clamp(20px,2.6vw,46px)));
  box-shadow:0 30px 70px rgba(57,46,24,.3);
}
.hero-photo img{width:100%;aspect-ratio:3/4;object-fit:cover;object-position:52% 32%;}
@media (max-width:940px){
  .hero-photo{align-self:auto;margin-inline:auto;margin-bottom:calc(-1 * (clamp(38px,4.6vw,74px) + clamp(14px,3vw,30px)));}
}

/* V1 · Vertrauenszeile: nur was belegbar ist, keine Superlative */
.trust{
  margin-top:clamp(72px,7.5vw,112px);
  display:flex;flex-wrap:wrap;align-items:center;
  gap:clamp(14px,2.4vw,38px);
  padding-top:20px;border-top:1px solid var(--rule);
}
.trust-el{display:flex;align-items:center;gap:10px;font-size:15px;line-height:1.35;color:var(--brown-soft);}
.trust-el b{font-weight:700;color:var(--brown);}
.sterne{display:flex;gap:2px;flex:none;}
.sterne svg{width:14px;height:14px;fill:var(--terracotta);}
.trust-el svg.tick{width:17px;height:17px;flex:none;fill:none;stroke:var(--terracotta-deep);stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;}
.trust a{color:inherit;text-decoration:none;border-bottom:1px solid var(--rule);}
.trust a:hover{border-color:var(--terracotta-deep);color:var(--terracotta-deep);}

/* darunter: die drei Sätze, die alles tragen */
.triad{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.6vw,44px);margin-top:clamp(30px,3.6vw,52px);}
@media (max-width:860px){.triad{grid-template-columns:1fr;gap:22px;}}
.triad div{padding-top:20px;border-top:2px solid var(--terracotta);}
.triad h2,.triad h3{font-family:var(--serif);font-size:clamp(19px,1.7vw,24px);font-weight:500;letter-spacing:-.014em;line-height:1.2;}
.triad p{margin-top:10px;font-size:15.5px;line-height:1.6;color:var(--brown-soft);}

/* ══ Bänder ══ */
.band{padding-block:var(--stack);}
.band-sand{background:var(--sand);border-radius:var(--r-lg);}
.band-paper{background:var(--off-white);border-radius:var(--r-lg);}
.band-dark{background:var(--brown);color:var(--cream);border-radius:var(--r-lg);}
.band-dark h2,.band-dark h3{color:var(--off-white);}
.hold{padding-inline:var(--gutter);}
/* V11 war als Überlappung gebaut – die folgende Sektion schob sich über
   die vorige. Das hat den Angebotsstreifen und den Anschluss-CTA der
   Beschwerden verdeckt, weil beide Sektionen bis an ihre Unterkante
   Inhalt tragen. Jetzt stoßen die Bänder eng aneinander statt sich zu
   überlagern: derselbe zusammenhängende Eindruck, nichts verdeckt. */
.eng{margin-top:clamp(10px,1.4vw,18px);}
.h-sec{font-size:clamp(31px,4.2vw,58px);letter-spacing:-.028em;max-width:17ch;line-height:1.04;}
.p-sec{margin-top:22px;max-width:var(--measure);font-size:clamp(16.5px,.95vw,18.5px);color:var(--brown-soft);}
.band-dark .p-sec{color:rgba(250,245,240,.8);}
.band-sand .p-sec{color:#4a3f28;}

/* ══ V2 · Angebotsstreifen: kurzer Takt zwischen den großen Blöcken ══ */
.streifen{border-radius:var(--r-md);padding:clamp(22px,2.6vw,32px) clamp(24px,3vw,46px);}
.streifen-in{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px 32px;}
/* Kicker über die Überschrift, nicht daneben: nebeneinander auf einer
   Grundlinie liest er sich als versprengtes Etikett statt als Vorzeile –
   und weicht von der Vorzeile aller anderen Sektionen ab. */
.streifen-txt{display:flex;flex-direction:column;align-items:flex-start;gap:9px;}
.streifen-k{font-size:12.5px;letter-spacing:.18em;text-transform:uppercase;font-weight:700;line-height:1.2;}
.streifen-h{font-family:var(--serif);font-size:clamp(23px,2.4vw,33px);font-weight:400;letter-spacing:-.02em;line-height:1.14;}
.streifen-brown{background:var(--brown);color:var(--off-white);}
.streifen-brown .streifen-k{color:var(--sand);}
.streifen-olive{background:var(--olive-deep);color:var(--off-white);}
.streifen-olive .streifen-k{color:rgba(250,245,240,.66);}
.streifen-sub{font-size:15.5px;color:rgba(250,245,240,.78);line-height:1.5;}

/* Beschwerden: weiche Felder, ineinandergelegt */
.fields{margin-top:clamp(36px,4.4vw,62px);display:grid;gap:clamp(12px,1.5vw,20px);}
/* Creme auf Off-White: das Band ist heller als die Felder, sonst
   verschwinden die Karten im Grund und die Radien tragen nichts. */
.field{
  background:var(--cream);border-radius:var(--r-a);
  padding:clamp(24px,2.8vw,42px);
  display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:clamp(14px,2.6vw,48px);align-items:baseline;
}
.field:nth-child(even){border-radius:var(--r-b);}
@media (max-width:800px){.field{grid-template-columns:1fr;gap:10px;}}
.field h3{font-size:clamp(20px,2vw,27px);font-weight:500;line-height:1.2;letter-spacing:-.016em;}
.field p{font-size:16.5px;line-height:1.66;color:var(--brown-soft);}

/* ══ Das Zitat · V3 vor die Sequenz gezogen, V12 auf Sand statt Braun ══ */
.said-grid{display:grid;grid-template-columns:.82fr 1.18fr;gap:clamp(32px,5vw,72px);align-items:center;}
@media (max-width:940px){.said-grid{grid-template-columns:1fr;gap:36px;}}
.said-bild{border-radius:var(--r-d);overflow:hidden;background:rgba(57,46,24,.08);}
.said-bild img{width:100%;aspect-ratio:4/3;object-fit:cover;}
.said p.q{font-family:var(--serif);font-size:clamp(31px,4.4vw,60px);font-style:italic;line-height:1.1;letter-spacing:-.028em;max-width:15ch;color:var(--brown);}
.said-src{margin-top:22px;font-size:13.5px;letter-spacing:.18em;text-transform:uppercase;color:#4a3f28;font-weight:700;}
.said-body{margin-top:26px;}
.said-body p{font-size:17.5px;line-height:1.74;color:#4a3f28;max-width:52ch;}
.said-body p + p{margin-top:18px;}

/* Ebenen */
.layers{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.8vw,26px);margin-top:clamp(38px,4.6vw,62px);}
@media (max-width:860px){.layers{grid-template-columns:1fr;}}
.layer{background:var(--cream);border-radius:var(--r-a);overflow:hidden;display:flex;flex-direction:column;}
.layer:nth-child(2){border-radius:var(--r-c);}
.layer:nth-child(3){border-radius:var(--r-b);}
/* Platzhalter statt Motiv: einfarbige Flächen aus der Palette, bis die
   Bildstrecke für die drei Ebenen steht. */
.layer-bild{aspect-ratio:16/10;background:var(--sand);}
/* Seit 17.09. Fotos statt Farbflächen (Feedback René); die Farben bleiben
   als Grund, bis das Bild geladen ist. */
.layer-bild--1{background:var(--terracotta);}
.layer-bild--2{background:var(--olive);}
.layer-bild--3{background:var(--sand);}
.layer-bild img{display:block;width:100%;height:100%;object-fit:cover;}
.layer-txt{padding:clamp(22px,2.4vw,34px);}
.layer .n{font-family:var(--serif);font-size:15px;font-weight:600;color:var(--terracotta-deep);letter-spacing:.05em;}
.layer h3{font-size:clamp(21px,1.85vw,26px);font-weight:500;margin-top:12px;letter-spacing:-.016em;}
.layer p{margin-top:12px;font-size:16px;line-height:1.62;color:var(--brown-soft);}

/* ══ V5 · Stimmen ══ */
.stimmen-kopf{display:grid;grid-template-columns:1.25fr .75fr;gap:clamp(24px,4vw,56px);align-items:end;}
@media (max-width:880px){.stimmen-kopf{grid-template-columns:1fr;gap:24px;}}
.bewertung{display:flex;align-items:center;gap:16px;padding:18px 24px;background:var(--off-white);border-radius:var(--r-b);}
.bewertung .zahl{font-family:var(--serif);font-size:44px;line-height:1;letter-spacing:-.03em;font-variant-numeric:tabular-nums;}
.bewertung .sterne svg{width:16px;height:16px;}
.bewertung .zeile{font-size:14.5px;line-height:1.4;color:var(--brown-soft);margin-top:5px;}
/* Gleich hohe Karten statt align-items:start – sonst steht neben einem
   kurzen Zitat eine halbe Kartenhöhe Leere, und die Sektion fällt
   auseinander. Das Zitat dehnt sich, die Herkunftszeile sitzt unten. */
.stimmen{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(10px,1.2vw,16px);margin-top:clamp(26px,3vw,40px);}
@media (max-width:980px){.stimmen{grid-template-columns:repeat(2,1fr);}}
@media (max-width:640px){.stimmen{grid-template-columns:1fr;}}
.stimme{
  background:var(--off-white);border-radius:var(--r-a);
  padding:clamp(24px,2.4vw,34px);
  display:flex;flex-direction:column;margin:0;
}
.stimme:nth-child(3n+2){border-radius:var(--r-c);}
.stimme:nth-child(3n+3){border-radius:var(--r-b);}
.stimme .sterne{margin-bottom:16px;}
.stimme q{
  flex:1;font-family:var(--serif);font-size:clamp(20px,1.75vw,26px);font-style:italic;
  line-height:1.3;letter-spacing:-.016em;quotes:"„" "“";display:block;
}
.stimme .wer{margin-top:22px;padding-top:14px;border-top:1px solid var(--rule-soft);font-size:13.5px;letter-spacing:.05em;color:var(--brown-soft);font-weight:600;}
.stimme-bild{border-radius:var(--r-d);overflow:hidden;background:var(--sand);}
.stimme-bild img{width:100%;height:100%;min-height:100%;object-fit:cover;}

/* ══ V6 · Ablauf als Schrittfolge: linke Spalte steht, Karten laufen ══ */
.schritte-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(26px,4vw,68px);align-items:start;margin-top:clamp(6px,1vw,14px);}
@media (max-width:940px){.schritte-grid{grid-template-columns:1fr;gap:30px;}}
.schritte-fest{position:sticky;top:clamp(96px,12vh,124px);}
@media (max-width:940px){.schritte-fest{position:static;}}
.schritte-fort{margin-top:clamp(28px,3vw,44px);}
.fort-linie{height:2px;background:rgba(250,245,240,.24);border-radius:2px;overflow:hidden;}
.fort-linie i{display:block;height:100%;width:100%;background:var(--terracotta);transform:scaleX(0);transform-origin:left center;transition:transform .7s var(--ease);}
.fort-zahl{margin-top:12px;font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:rgba(250,245,240,.6);font-variant-numeric:tabular-nums;}
.schritte-bild{margin-top:clamp(22px,2.6vw,34px);border-radius:var(--r-d);overflow:hidden;background:rgba(250,245,240,.08);}
.schritte-bild img{width:100%;aspect-ratio:3/2;object-fit:cover;}
@media (max-width:940px){.schritte-bild{display:none;}}
.schritte{display:grid;gap:clamp(12px,1.6vw,20px);}
.schritt{
  position:relative;background:rgba(250,245,240,.075);
  border-radius:var(--r-sm) var(--r-lg) var(--r-sm) var(--r-sm);
  padding:clamp(24px,2.8vw,40px);
  padding-right:clamp(96px,11vw,150px);
  transition:background .5s var(--ease);
}
.schritt.is-da{background:rgba(250,245,240,.11);}
.schritt h3{font-size:clamp(21px,2vw,29px);font-weight:500;letter-spacing:-.018em;max-width:18ch;}
.schritt p{margin-top:12px;font-size:16.5px;line-height:1.62;color:rgba(250,245,240,.8);max-width:52ch;}
/* Marke und Terminangabe sind ebenfalls <p> und würden von der Regel
   darüber überschrieben – deshalb hier über die Klasse im Elternteil
   geschrieben, nicht nur über die eigene. */
.schritt .schritt-marke{
  position:absolute;top:0;right:0;margin:0;max-width:none;
  border-radius:0 var(--r-lg) 0 var(--r-md);
  background:var(--off-white);color:var(--brown);
  font-size:12.5px;line-height:1.2;letter-spacing:.14em;text-transform:uppercase;font-weight:700;
  padding:15px clamp(18px,2vw,26px) 16px;
  transition:background .45s var(--ease),color .45s var(--ease);
  white-space:nowrap;
}
.schritt.is-da .schritt-marke{background:var(--terracotta);color:var(--off-white);}
.schritt .schritt-wann{margin-top:16px;display:inline-block;font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--sand);font-weight:700;}
@media (max-width:600px){
  .schritt{padding-right:clamp(24px,2.8vw,40px);padding-top:64px;}
  .schritt-marke{padding:10px 18px 12px;font-size:11.5px;}
}

/* Person */
.person{display:grid;grid-template-columns:.88fr 1.12fr;gap:clamp(30px,5vw,80px);align-items:center;}
@media (max-width:960px){.person{grid-template-columns:1fr;gap:36px;}}
.portrait{border-radius:var(--r-c);overflow:hidden;background:var(--sand);}
.portrait img{width:100%;aspect-ratio:4/5;object-fit:cover;}
.person-body p{font-size:17px;line-height:1.74;color:var(--brown-soft);max-width:var(--measure);}
.person-body p + p{margin-top:17px;}
.person-body p.lead{font-family:var(--serif);font-size:clamp(21px,2.1vw,28px);line-height:1.3;color:var(--brown);letter-spacing:-.016em;}

/* ══ V7 · Fragen & Antworten statt Verneinung ══ */
.faq{margin-top:clamp(36px,4.4vw,58px);display:grid;gap:clamp(9px,1vw,13px);max-width:920px;}
.frage{
  background:var(--cream);border:1px solid var(--rule-soft);
  border-radius:var(--r-sm);overflow:hidden;
  transition:border-color .3s,background .3s;
}
.frage[open]{background:var(--off-white);border-color:var(--rule);}
.frage summary{
  list-style:none;cursor:pointer;
  padding:clamp(17px,1.9vw,24px) clamp(20px,2.2vw,30px);
  display:flex;align-items:flex-start;justify-content:space-between;gap:20px;
  font-family:var(--serif);font-size:clamp(18px,1.6vw,23px);line-height:1.28;letter-spacing:-.014em;
  transition:color .25s;
}
.frage summary::-webkit-details-marker{display:none;}
.frage summary:hover{color:var(--terracotta-deep);}
.frage-zeichen{position:relative;width:19px;height:19px;flex:none;margin-top:.34em;}
.frage-zeichen::before,.frage-zeichen::after{
  content:"";position:absolute;left:50%;top:50%;background:var(--terracotta-deep);border-radius:2px;
  transition:transform .38s var(--ease),opacity .3s;
}
.frage-zeichen::before{width:15px;height:1.8px;transform:translate(-50%,-50%);}
.frage-zeichen::after{width:1.8px;height:15px;transform:translate(-50%,-50%);}
.frage[open] .frage-zeichen::after{transform:translate(-50%,-50%) rotate(90deg);opacity:0;}
.frage-text{padding:0 clamp(20px,2.2vw,30px) clamp(22px,2.4vw,30px);}
.frage-text p{font-size:16.5px;line-height:1.68;color:var(--brown-soft);max-width:62ch;}
.frage-text p + p{margin-top:13px;}
@media (prefers-reduced-motion:no-preference){
  .frage[open] .frage-text{animation:auf .45s var(--ease);}
  @keyframes auf{from{opacity:0;transform:translateY(-7px);}to{opacity:1;transform:none;}}
}

/* ══ Abschluss ══ */
/* Derselbe Verlauf wie im Hero, gespiegelt: die Seite öffnet und
   schließt auf derselben Fläche. Ohne Fototextur. */
/* Die Aufhellung sitzt rechts hinter der Datentafel, nicht links unter
   der Aussage – dort stünde die helle Schrift auf dem hellsten Punkt
   des Verlaufs und käme nur auf 4,3:1. */
.close-band{
  color:var(--off-white);border-radius:var(--r-lg);position:relative;overflow:hidden;
  background:
    radial-gradient(105% 85% at 88% 12%, #b25c2d 0%, rgba(178,92,45,0) 60%),
    linear-gradient(202deg, #9c4d27 0%, var(--terracotta-deep) 48%, #74371c 100%);
}
.close{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(30px,5vw,76px);align-items:start;}
@media (max-width:900px){.close{grid-template-columns:1fr;gap:34px;}}
.close h2{font-size:clamp(34px,4.8vw,68px);line-height:1.02;letter-spacing:-.03em;color:var(--off-white);}
.close .p-sec{color:rgba(250,245,240,.85);}
.dafuer{list-style:none;margin:30px 0 0;padding:0;display:grid;gap:11px;max-width:52ch;}
.dafuer li{display:grid;grid-template-columns:19px 1fr;gap:13px;align-items:start;font-size:16.5px;line-height:1.55;color:rgba(250,245,240,.92);}
.dafuer svg{width:17px;height:17px;margin-top:6px;flex:none;fill:none;stroke:var(--sand);stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;}
.facts{background:rgba(57,46,24,.22);border-radius:var(--r-b);padding:clamp(24px,2.6vw,36px);margin:0;}
.facts dt{font-size:12.5px;letter-spacing:.17em;text-transform:uppercase;color:rgba(250,245,240,.62);font-weight:700;margin-top:22px;}
.facts dt:first-of-type{margin-top:0;}
.facts dd{margin:5px 0 0;color:var(--off-white);font-size:16.5px;line-height:1.62;}
.facts a{color:inherit;text-decoration:none;border-bottom:1px solid rgba(250,245,240,.38);}
.facts a:hover{border-color:var(--off-white);}

/* V9 · leiser Anschluss am Ende einer Sektion, damit zwischen den
   großen Handlungsaufforderungen keine Strecke über gut einem
   Bildschirm ohne Angebot bleibt */
.anschluss{
  margin-top:clamp(32px,3.6vw,50px);padding-top:clamp(22px,2.4vw,32px);
  border-top:1px solid var(--rule);
  display:flex;flex-wrap:wrap;align-items:center;gap:16px 28px;justify-content:space-between;
}
.anschluss p{font-family:var(--serif);font-size:clamp(19px,1.8vw,25px);line-height:1.24;letter-spacing:-.016em;max-width:26ch;}
.band-sand .anschluss{border-color:rgba(57,46,24,.26);}

.foot{padding-block:38px 44px;font-size:14px;color:var(--brown-soft);}
.foot-in{display:flex;flex-wrap:wrap;gap:16px 30px;justify-content:space-between;}
.foot-hinweis{margin-top:18px;padding-top:16px;border-top:1px solid var(--rule-soft);font-size:13.5px;line-height:1.6;max-width:78ch;color:var(--brown-soft);opacity:.85;}

/* ══ V13 · Gestaffelte Einblendung ══
   Ohne Scherung – die wäre für diese Marke zu sportlich. Vier Stufen,
   sonst gerät die Sektion beim Lesen ins Nachziehen.

   Der Ausgangszustand hängt an html.js, das ein Inline-Skript ganz oben
   setzt. Ohne JavaScript wird nie etwas ausgeblendet – sonst stünde die
   halbe Seite auf Deckkraft 0 und niemand würde sie je einschalten. */
@media (prefers-reduced-motion:no-preference){
  .js .rise{opacity:0;transform:translateY(18px);transition:opacity .65s var(--ease),transform .65s var(--ease);}
  .js .rise.in{opacity:1;transform:none;}
  .js .f1{transition-delay:0ms;}
  .js .f2{transition-delay:80ms;}
  .js .f3{transition-delay:160ms;}
  .js .f4{transition-delay:240ms;}
  .js .rise-bild{opacity:0;transform:translateY(26px);transition:opacity .8s var(--ease),transform .8s var(--ease);}
  .js .rise-bild.in{opacity:1;transform:none;}
}

/* ═══════════════════════════════════════════════════════════════════
   ZUSAMMENHÄNGE · scrollgeführte Sequenz
   Eine durchgehende Kamerafahrt von der Kaumuskulatur bis in die
   Schulter, aus acht Sequenzen zu 308 Einzelbildern.

   Grundfassung (ohne JavaScript, bei reduzierter Bewegung, im
   Datensparmodus): neun Blöcke aus Standbild und Text untereinander –
   lesbar und indexierbar. Erst .is-bereit schaltet auf die Leinwand um.
   Die Animation ist eine Zugabe, keine Bedingung.

   V4 · Von 560vh auf 400vh gekürzt und um eine mitlaufende Leiste
   ergänzt: Fortschritt und Erstgespräch stehen über die ganze Fahrt
   im Blick, nicht erst in der letzten Station.
   ═══════════════════════════════════════════════════════════════════ */
.cmd{--cmd-pad:clamp(22px,3.4vw,58px);--cmd-laenge:400vh;padding-top:var(--stack);}
.cmd-kopf{margin-bottom:clamp(28px,3.6vw,52px);}
.cmd-leinwand,.cmd-schleier,.cmd-leiste{display:none;}

.cmd-stationen{display:grid;gap:clamp(12px,1.6vw,20px);}
.cmd-station{background:var(--off-white);border-radius:var(--r-a);overflow:hidden;}
.cmd-station:nth-child(even){border-radius:var(--r-b);}
/* Standbild als Hintergrund, nicht als <img>: der Preload-Scanner holt ein
   <img src> auch dann, wenn es display:none ist – ein Hintergrundbild an
   einem ausgeblendeten Element wird nie geladen. Ohne JavaScript setzt das
   <noscript>-Stylesheet die Bilder, sonst tut es das Skript. */
.cmd-bild{width:100%;aspect-ratio:16/9;background:var(--sand) center/cover no-repeat;}
.cmd-worte{padding:clamp(24px,2.8vw,42px);}
.cmd-nummer{display:flex;align-items:baseline;gap:13px;font-size:12.5px;letter-spacing:.17em;text-transform:uppercase;font-weight:700;color:var(--brown-soft);}
.cmd-nummer i{font-family:var(--serif);font-style:normal;font-size:20px;letter-spacing:0;font-variant-numeric:tabular-nums;color:var(--terracotta-deep);}
.cmd-station[data-akzent="olive"] .cmd-nummer i{color:var(--olive-deep);}
.cmd-titel{font-family:var(--serif);font-size:clamp(21px,2.3vw,32px);font-weight:400;line-height:1.16;letter-spacing:-.02em;margin-top:15px;max-width:30ch;text-wrap:balance;}
.cmd-gross .cmd-titel{font-size:clamp(30px,4.4vw,58px);line-height:1.03;letter-spacing:-.03em;margin-top:0;max-width:15ch;}
.cmd-cues{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:9px;max-width:48ch;}
.cmd-cues li{position:relative;padding-left:21px;font-size:16px;line-height:1.55;color:var(--brown-soft);}
.cmd-cues li::before{content:"";position:absolute;left:0;top:.68em;width:9px;height:1.5px;background:var(--terracotta);}
.cmd-nachsatz{margin-top:16px;font-size:17.5px;line-height:1.6;color:var(--brown-soft);max-width:38ch;}

/* ── Sequenzfassung ─────────────────────────────────────────────── */
/* Vollbild (Feedback René, 17.09.): Die Bühne liegt über die ganze Breite –
   der Rahmen hebt den Seitenrand der .hold wieder auf – und wird per
   clip-path auf das Maß der Kachel beschnitten. --cmd-blende (0…1, setzt
   sequenz.js gedämpft aus dem Fortschritt) nimmt Rand und Rundung zurück:
   beim Andocken wächst die Kachel auf den Bildschirm, am Ende der Fahrt
   kommt beides zurück. clip-path statt Breite: kein Layout, keine neue
   Leinwandgröße je Bild – das Bild steht, nur die Kante wandert. Was der
   Beschnitt an Rand übrig lässt (--cmd-rand), rücken Text und Leiste
   nach innen, damit sie nicht an der runden Kante kleben. */
.cmd{--cmd-blende:0;}
.cmd.is-bereit .cmd-rahmen{position:relative;height:var(--cmd-laenge);margin-inline:calc(-1 * var(--gutter));}
.cmd.is-bereit .cmd-buehne{
  --cmd-rand:calc(var(--gutter) * (1 - var(--cmd-blende)));
  --cmd-eck:calc(var(--r-lg) * (1 - var(--cmd-blende)));
  position:sticky;top:0;height:100vh;height:100svh;
  clip-path:inset(0 var(--cmd-rand) round var(--cmd-eck));
  overflow:hidden;background:var(--brown);isolation:isolate;
}
.cmd.is-bereit .cmd-leinwand{display:block;position:absolute;inset:0;width:100%;height:100%;}
/* Der Schleier trägt die Lesbarkeit: die Bildunterkante wechselt von
   dunklem Fensterlicht bis zur hellen Schulter, der Text bleibt gleich. */
.cmd.is-bereit .cmd-schleier{
  display:block;position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,
    rgba(41,32,16,.95) 0%,rgba(41,32,16,.88) 15%,rgba(41,32,16,.56) 33%,
    rgba(41,32,16,.18) 51%,rgba(41,32,16,0) 68%);
}
.cmd.is-bereit .cmd-stationen{position:absolute;inset:0;display:block;}
.cmd.is-bereit .cmd-station{
  position:absolute;left:calc(var(--cmd-pad) + var(--cmd-rand));right:calc(var(--cmd-pad) + var(--cmd-rand));
  bottom:calc(var(--cmd-pad) + 92px);
  background:none;border-radius:0;overflow:visible;
  opacity:0;pointer-events:none;will-change:opacity,transform;
}
.cmd.is-bereit .cmd-station.is-aktiv{pointer-events:auto;}
.cmd.is-bereit .cmd-bild{display:none;}
.cmd.is-bereit .cmd-worte{padding:0;}
.cmd.is-bereit .cmd-nummer{color:var(--sand);}
.cmd.is-bereit .cmd-nummer i{color:var(--terracotta);}
.cmd.is-bereit .cmd-station[data-akzent="olive"] .cmd-nummer i{color:#a9a778;}
.cmd.is-bereit .cmd-titel{color:var(--off-white);}
.cmd.is-bereit .cmd-cues li{color:rgba(250,245,240,.84);}
.cmd.is-bereit .cmd-nachsatz{color:rgba(250,245,240,.82);}

/* V4 · die mitlaufende Leiste */
.cmd.is-bereit .cmd-leiste{
  display:flex;align-items:center;gap:clamp(16px,2.4vw,34px);
  position:absolute;left:calc(var(--cmd-pad) + var(--cmd-rand));right:calc(var(--cmd-pad) + var(--cmd-rand));bottom:var(--cmd-pad);
}
.cmd-schiene{flex:1;min-width:0;height:2px;background:rgba(250,245,240,.24);border-radius:2px;overflow:hidden;}
.cmd-schiene i{display:block;height:100%;background:var(--terracotta);transform:scaleX(0);transform-origin:left center;}
.cmd-leiste .btn{flex:none;}
@media (max-width:860px){
  .cmd{--cmd-laenge:340vh;}
  /* Hochkant ist die Bühne dreimal so hoch wie breit – deckend gefüllt bliebe
     von der Aufnahme knapp die Hälfte der Breite übrig, und die müsste noch
     hochskaliert werden. Deshalb bekommt die Sequenz hier eine eigene Fläche
     im Seitenverhältnis der Bilder; der Text sitzt darunter auf dem braunen
     Grund statt darüber. Vier Zeilen: Luft für den Seitenkopf, das Bild,
     der Text, die Leiste. Leinwand und Schleier teilen sich eine Zelle.

     Wer wie viel Platz bekommt, ist die Frage, an der die Fassung vorher
     zerbrach: Text und Leiste nehmen, was sie brauchen, das Bild den Rest –
     höchstens aber 4:5, das Maß der Aufnahmen. Stand das Bild starr auf 4:5,
     blieb dem Text nur der Überschuss; auf einem 390 × 700 großen Fenster
     waren das 111 px für 228 px Bedarf, und sechs von neun Stationen liefen
     unter die Leiste. Darum ist die Textzeile jetzt `auto` – so hoch wie die
     längste Station und damit über die ganze Fahrt gleich, ohne Zucken beim
     Stationswechsel – und die Bildzeile schrumpffähig. Überschüssige Höhe
     auf langen Geräten sammelt die Kopfzeile ein. */
  .cmd.is-bereit .cmd-buehne{
    display:grid;grid-template-columns:100%;
    grid-template-rows:minmax(clamp(70px,9svh,102px),1fr) minmax(0,auto) auto auto;
  }
  .cmd.is-bereit .cmd-leinwand,
  .cmd.is-bereit .cmd-schleier{
    grid-area:2/1;position:relative;inset:auto;width:100%;height:auto;
  }
  /* 4:5 ist der Wunsch – es ist das Maß der Bilder, da wird nichts beschnitten.
     Reicht die Höhe nicht, deckelt max-height die Fläche auf die Zeile; die
     Breite bleibt voll, und `zeichne()` beschneidet dann eben mittig. Ohne den
     Deckel liefe die Leinwand über ihre Zeile hinaus unter den Text, denn ein
     Element mit Seitenverhältnis dehnt sich nicht auf die Zellenhöhe. */
  .cmd.is-bereit .cmd-leinwand{aspect-ratio:4/5;max-height:100%;}
  .cmd.is-bereit .cmd-schleier{
    background:linear-gradient(to top,
      rgba(41,32,16,.62) 0%,rgba(41,32,16,.24) 14%,rgba(41,32,16,0) 30%);
  }
  /* Alle Stationen liegen übereinander in derselben Rasterzelle. Dadurch wird
     die Zeile so hoch wie die längste von ihnen, statt dass sie absolut sitzen
     und über die Leiste hinauslaufen. Das Überblenden per Deckkraft und der
     Versatz um 16 px sind Transformationen – am Maß ändert sich nichts. Der
     untere Abstand liegt über diesen 16 px, damit auch eine gerade
     einblendende Station den Button nicht streift.

     Zentriert, nicht oben angeschlagen: Die Zeile ist für alle gleich hoch,
     die Stationen sind es nicht – zwischen 30 px für den Auftakt und 123 px
     für den Schluss. Oben angeschlagen fiel die Differenz vollständig als
     Loch über dem Button an, bei den kurzen Tafeln über 100 px. Aus der Mitte
     heraus verteilt sie sich auf beide Seiten, und die üblichen Stationen
     stehen mit rund 45 px Luft oben wie unten. Dass der Text dabei je nach
     Länge etwas höher oder tiefer einsetzt, fällt in der Überblendung nicht
     auf – die Schrift wandert dort ohnehin um 16 px. */
  .cmd.is-bereit .cmd-stationen{
    grid-area:3/1;position:relative;inset:auto;
    display:grid;gap:0;align-items:center;
    padding:clamp(18px,3svh,32px) calc(var(--cmd-pad) + var(--cmd-rand)) clamp(20px,2.6svh,28px);
  }
  .cmd.is-bereit .cmd-station{grid-area:1/1;position:static;}
  .cmd.is-bereit .cmd-leiste{grid-area:4/1;position:relative;inset:auto;padding:0 calc(var(--cmd-pad) + var(--cmd-rand)) var(--cmd-pad);}
  /* Was der Text hier spart, bekommt das Bild. Auf 360 px kostete allein die
     Vorzeile 53 px – zweizeilig gesperrt neben einer 20-px-Ziffer. Enger
     gesetzt trägt sie eine Zeile. */
  .cmd.is-bereit .cmd-nummer{font-size:11.5px;letter-spacing:.12em;gap:10px;}
  .cmd.is-bereit .cmd-nummer i{font-size:17px;}
  .cmd.is-bereit .cmd-titel{font-size:clamp(19px,4.8vw,26px);max-width:24ch;margin-top:11px;}
  .cmd.is-bereit .cmd-gross .cmd-titel{font-size:clamp(27px,7.4vw,40px);}
  .cmd.is-bereit .cmd-nachsatz{margin-top:12px;font-size:16px;}
  /* Die drei Merkmale an Station 01 bleiben hochkant aus. Sie sind die einzige
     Aufzählung der Fahrt und kosteten 131 px – da alle Stationen dieselbe
     Zeilenhöhe teilen, zahlten die anderen acht diese 131 px als leere Fläche
     mit, und dem Bild fehlten sie. Ohne sie liegen die Stationen zwischen 56
     und 128 px beieinander. In der Grundfassung – ohne Skript, bei
     eingeschränkter Bewegung, über schmale Leitung – stehen die Stationen
     dagegen als gestapelte Karten ohne Höhenzwang: dort bleibt die Liste. */
  .cmd.is-bereit .cmd-cues{display:none;}
}

/* ═══════════════════════════════════════════════════════════════════
   TEIL 2 · ERGÄNZUNGEN FÜR DIE GANZE WEBSITE
   ═══════════════════════════════════════════════════════════════════ */

/* ── Schriftstapel mit metrischen Fallbacks ── */
:root{
  --serif:'Faustina','Faustina Fallback',Georgia,serif;
  --sans:'Source Sans 3','Source Sans 3 Fallback',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
}

/* ── Hilfsklassen ── */
.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{
  position:absolute;left:16px;top:-100px;z-index:100;
  background:var(--brown);color:var(--off-white);padding:10px 18px;border-radius:999px;
  font-weight:600;text-decoration:none;font-size:15px;transition:top .2s;
}
.skip:focus{top:14px;}
/* WordPress-Hüllen aus GeneratePress tragen keine Stile, sollen aber
   auch keine Breite erzwingen. */
.site,.site-content,.site-footer{display:block;width:100%;}

/* ── Kopfzeile: Navigation mit Untermenüs ──
   Die Punkte sind Links auf die Übersichtsseiten; der kleine Knopf
   daneben öffnet das Untermenü für Tastatur und Touch, Mauszeiger
   öffnet es beim Überfahren. */
.nav-liste{list-style:none;margin:0;padding:0;display:flex;gap:6px;align-items:center;}
.nav-punkt{position:relative;display:flex;align-items:center;}
.nav-punkt > a{padding:8px 12px;border-radius:999px;}
.nav-punkt > a[aria-current="page"],.nav-punkt > a.is-hier{color:var(--brown);font-weight:600;}
.nav-punkt > a[aria-current="page"]::after,.nav-punkt > a.is-hier::after{
  content:"";display:block;height:2px;margin:2px 0 -4px;border-radius:2px;background:var(--terracotta);
}
.nav-auf{
  appearance:none;border:0;background:transparent;color:var(--brown-soft);
  width:26px;height:26px;margin-left:-8px;border-radius:999px;display:grid;place-items:center;cursor:pointer;
  transition:background .25s,color .25s,transform .3s var(--ease);
}
.nav-auf svg{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;}
.nav-auf:hover,.hat-unter:hover .nav-auf{color:var(--terracotta-deep);}
.nav-auf[aria-expanded="true"]{transform:rotate(180deg);color:var(--terracotta-deep);}
.unter{
  list-style:none;margin:0;padding:10px;min-width:280px;
  position:absolute;top:100%;left:-6px;z-index:70;
  background:var(--off-white);border-radius:var(--r-sm) var(--r-md) var(--r-md) var(--r-md);
  box-shadow:0 1px 0 var(--rule-soft),0 18px 44px rgba(57,46,24,.14);
  opacity:0;visibility:hidden;transform:translateY(8px);
  transition:opacity .25s var(--ease),transform .3s var(--ease),visibility 0s linear .3s;
}
/* Unsichtbare Brücke zwischen Punkt und Untermenü, sonst schließt es
   beim Weg mit dem Mauszeiger nach unten. */
.unter::before{content:"";position:absolute;left:0;right:0;top:-12px;height:12px;}
.hat-unter:hover .unter,.hat-unter:focus-within .unter,.hat-unter.is-offen .unter{
  opacity:1;visibility:visible;transform:none;transition-delay:0s;
}
.unter li a{
  display:block;padding:10px 14px;border-radius:12px;text-decoration:none;color:var(--brown);
  font-size:15.5px;line-height:1.3;transition:background .2s,color .2s;
}
.unter li a:hover,.unter li a:focus-visible{background:var(--cream);color:var(--terracotta-deep);}
.unter li a[aria-current="page"]{font-weight:600;color:var(--terracotta-deep);}
.unter li.unter-alle a{margin-top:6px;padding-top:12px;border-top:1px solid var(--rule-soft);border-radius:0 0 12px 12px;font-weight:600;color:var(--terracotta-deep);}
.unter li.unter-alle a::after{content:" →";}

.top-aktionen{display:flex;align-items:center;gap:10px;flex-shrink:0;}
.menue-knopf{
  display:none;appearance:none;border:0;cursor:pointer;
  align-items:center;gap:9px;padding:8px 14px 8px 12px;border-radius:999px;
  background:transparent;color:var(--brown);font:inherit;font-size:14.5px;font-weight:600;
  box-shadow:inset 0 0 0 1.5px rgba(57,46,24,.22);transition:background .25s,box-shadow .25s;
}
.menue-knopf:hover{background:var(--off-white);box-shadow:inset 0 0 0 1.5px rgba(57,46,24,.36);}
.menue-knopf svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;}
@media (max-width:1000px){
  .menue-knopf{display:inline-flex;}
}
@media (max-width:480px){
  .top-in{gap:12px;}
  /* Platz: der Knopf im Kopf wird zum Kreis, der Text wandert ins Menü. */
  .top-aktionen .btn-linie{padding:0;gap:0;width:38px;height:38px;justify-content:center;}
  .top-aktionen .btn-linie .btn-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);}
  .top-aktionen .btn-linie .btn-ic{width:38px;height:38px;background:transparent;}
  /* Text bleibt im DOM (zugänglicher Name), nur unsichtbar */
  .menue-knopf .menue-knopf-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;}
  .menue-knopf{padding:10px;}
}

/* ── Mobilmenü als <dialog> ──
   Bringt Fokusfalle, Escape und inertes Dahinter von selbst mit. Läuft
   von rechts herein; bei reduzierter Bewegung erscheint es einfach. */
.menue{
  position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;
  margin:0;padding:0;border:0;background:var(--cream);color:var(--brown);
  overflow:auto;overscroll-behavior:contain;
}
.menue::backdrop{background:rgba(57,46,24,.35);}
.menue[open]{display:block;}
@media (prefers-reduced-motion:no-preference){
  .menue[open]{animation:menue-auf .38s var(--ease);}
  @keyframes menue-auf{from{opacity:0;transform:translateX(24px);}to{opacity:1;transform:none;}}
}
body:has(.menue[open]){overflow:hidden;}
.menue-in{min-height:100%;display:flex;flex-direction:column;padding:0 var(--gutter) calc(var(--gutter) + 8px);}
.menue-kopf{display:flex;align-items:center;justify-content:space-between;height:78px;}
.menue-kopf .mark img{height:36px;}
.menue-zu{
  appearance:none;border:0;cursor:pointer;display:inline-flex;align-items:center;gap:8px;
  padding:9px 16px 9px 12px;border-radius:999px;background:var(--off-white);color:var(--brown);
  font:inherit;font-size:14.5px;font-weight:600;box-shadow:inset 0 0 0 1.5px rgba(57,46,24,.18);
}
.menue-zu svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;}
.menue-gruppen{display:grid;gap:26px;margin-top:22px;}
@media (min-width:640px){.menue-gruppen{grid-template-columns:1fr 1fr;gap:34px 40px;}}
.menue-gruppe h2{font-family:var(--sans);font-size:12.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--brown-soft);margin:0 0 8px 6px;letter-spacing:.16em;}
.menue-gruppe ul{list-style:none;margin:0;padding:0;}
.menue-gruppe li a{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:13px 8px 13px 6px;border-bottom:1px solid var(--rule-soft);
  font-family:var(--serif);font-size:21px;line-height:1.2;letter-spacing:-.014em;text-decoration:none;color:var(--brown);
}
.menue-gruppe li a[aria-current="page"]{color:var(--terracotta-deep);}
.menue-gruppe li a::after{content:"→";font-family:var(--sans);font-size:16px;color:var(--terracotta-deep);opacity:.6;}
.menue-gruppe li.menue-alle a{font-family:var(--sans);font-size:15px;font-weight:600;color:var(--terracotta-deep);border-bottom:0;padding-top:10px;}
.menue-fuss{margin-top:auto;padding-top:30px;display:flex;flex-wrap:wrap;gap:14px 24px;align-items:center;justify-content:space-between;}
.menue-fuss .btn{flex:none;}
.menue-tel{font-size:15.5px;color:var(--brown-soft);}
.menue-tel a{color:var(--brown);text-decoration:none;font-weight:600;border-bottom:1px solid var(--rule);}
.menue-tel a:hover{color:var(--terracotta-deep);border-color:var(--terracotta-deep);}

/* ── Seitenkopf für Unterseiten ──
   Dieselbe Kachel wie der Hero, kompakter: Brotkrumen oben, H1 mit
   Keyword und Ort, Leadsatz, Erstgespräch. Rechts ein Bild aus dem
   Bestand – Standbild der Sequenz, Praxisfoto oder Porträt. */
.kopf{padding-top:clamp(10px,2vh,26px);padding-bottom:clamp(26px,3.6vh,48px);}
.kopf .slab-in{
  grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);
  padding:clamp(30px,3.8vw,58px) var(--gutter) clamp(34px,4.2vw,62px);
  align-items:center;
}
@media (max-width:940px){.kopf .slab-in{grid-template-columns:minmax(0,1fr);gap:28px;}}
.kopf h1{font-size:clamp(35px,5vw,70px);line-height:1;letter-spacing:-.03em;color:var(--off-white);max-width:15ch;}
.kopf h1 em{font-style:italic;color:var(--sand);}
.kopf-lead{margin-top:22px;font-size:clamp(17px,1.05vw,19.5px);line-height:1.6;color:rgba(250,245,240,.88);max-width:46ch;}
.kopf .hero-actions{margin-top:28px;}
.kopf .eyebrow{color:var(--off-white);border-color:rgba(250,245,240,.4);margin-bottom:18px;}
.kopf .eyebrow::before{background:var(--sand);}
.kopf-bild{
  position:relative;border-radius:var(--r-a);overflow:hidden;background:rgba(250,245,240,.12);
  width:min(100%,520px);margin-left:auto;box-shadow:0 26px 60px rgba(57,46,24,.28);
}
.kopf-bild img{width:100%;aspect-ratio:4/3;object-fit:cover;}
.kopf-bild--hoch img{aspect-ratio:4/5;}
@media (max-width:940px){.kopf-bild{margin-inline:auto;width:min(100%,560px);}}
.kopf .trust{margin-top:clamp(22px,3vw,34px);padding-top:18px;}
/* schlichter Kopf ohne Kachel: Impressum, Datenschutz, Suche, 404 */
.kopf-schlicht{padding-top:clamp(34px,5vh,64px);padding-bottom:clamp(10px,2vh,20px);}
.kopf-schlicht h1{font-size:clamp(34px,4.6vw,62px);letter-spacing:-.03em;line-height:1.02;max-width:18ch;}
.kopf-schlicht .kopf-lead{color:var(--brown-soft);max-width:var(--measure);}

/* ── Brotkrumen ── */
.brotkrumen{font-size:13.5px;line-height:1.4;margin-bottom:18px;}
.brotkrumen ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;}
.brotkrumen li{display:flex;align-items:center;gap:10px;}
.brotkrumen li + li::before{content:"";width:4px;height:4px;border-radius:999px;background:currentColor;opacity:.5;}
.brotkrumen a{text-decoration:none;opacity:.8;border-bottom:1px solid transparent;transition:opacity .2s,border-color .2s;}
.brotkrumen a:hover{opacity:1;border-color:currentColor;}
.brotkrumen [aria-current="page"]{opacity:.9;}
.slab .brotkrumen{color:rgba(250,245,240,.85);}
.kopf-schlicht .brotkrumen{color:var(--brown-soft);}

/* ── Fließtext: Über mich, Rechtliches, Artikel ──
   Ruhig gesetzt, 66 Zeichen Zeilenlänge, Überschriften in der Serife. */
.prosa{max-width:var(--measure);}
.prosa > * + *{margin-top:1.05em;}
.prosa h2{font-size:clamp(26px,2.8vw,38px);letter-spacing:-.024em;line-height:1.1;margin-top:1.7em;max-width:22ch;}
.prosa h3{font-size:clamp(21px,2vw,27px);font-weight:500;letter-spacing:-.016em;line-height:1.2;margin-top:1.5em;}
.prosa h4{font-family:var(--sans);font-size:17px;font-weight:700;margin-top:1.4em;}
.prosa h2 + *,.prosa h3 + *,.prosa h4 + *{margin-top:.6em;}
.prosa p,.prosa li{font-size:17px;line-height:1.74;color:var(--brown-soft);}
.prosa p.lead{font-family:var(--serif);font-size:clamp(21px,2.1vw,28px);line-height:1.3;color:var(--brown);letter-spacing:-.016em;}
.prosa strong{color:var(--brown);font-weight:600;}
.prosa a{color:var(--terracotta-deep);text-decoration:none;border-bottom:1px solid rgba(143,69,35,.4);transition:border-color .2s;}
.prosa a:hover{border-color:var(--terracotta-deep);}
.prosa ul,.prosa ol{padding-left:0;margin-left:0;list-style:none;display:grid;gap:9px;}
.prosa ul li{position:relative;padding-left:22px;}
.prosa ul li::before{content:"";position:absolute;left:0;top:.78em;width:10px;height:1.5px;background:var(--terracotta);}
.prosa ol{counter-reset:zaehler;}
.prosa ol li{position:relative;padding-left:34px;counter-increment:zaehler;}
.prosa ol li::before{content:counter(zaehler);position:absolute;left:0;top:.1em;font-family:var(--serif);font-size:19px;color:var(--terracotta-deep);font-variant-numeric:tabular-nums;}
.prosa blockquote{margin:1.6em 0;padding:4px 0 4px 22px;border-left:2px solid var(--terracotta);}
.prosa blockquote p{font-family:var(--serif);font-style:italic;font-size:clamp(20px,1.9vw,26px);line-height:1.3;color:var(--brown);letter-spacing:-.014em;}
.prosa blockquote cite{display:block;margin-top:10px;font-style:normal;font-size:13.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--brown-soft);}
.prosa figure{margin:1.8em 0;}
.prosa figure img{border-radius:var(--r-md);width:100%;}
.prosa figcaption{margin-top:10px;font-size:14px;color:var(--brown-soft);}
.prosa hr{border:0;height:1px;background:var(--rule);margin:2.4em 0;}
.prosa .tabelle{overflow-x:auto;margin-top:1.4em;}
.prosa table{border-collapse:collapse;width:100%;font-size:16px;}
.prosa th,.prosa td{text-align:left;padding:12px 14px;border-bottom:1px solid var(--rule);vertical-align:top;line-height:1.5;}
.prosa th{font-weight:700;color:var(--brown);font-size:14px;letter-spacing:.06em;text-transform:uppercase;}
.prosa dl dt{font-weight:700;color:var(--brown);margin-top:1em;}
.prosa dl dd{margin:4px 0 0;color:var(--brown-soft);}
.werdegang{list-style:none;margin:6px 0 0;padding:0;}
.werdegang li{display:grid;grid-template-columns:3.4em 1fr;gap:.5em;padding:3px 0;}
.werdegang b{font-variant-numeric:tabular-nums;color:var(--brown);}
.prosa .klein{font-size:15px;color:var(--brown-soft);}
.band-dark .prosa p,.band-dark .prosa li{color:rgba(250,245,240,.82);}
.band-dark .prosa strong{color:var(--off-white);}
.band-dark .prosa a{color:var(--off-white);border-color:rgba(250,245,240,.4);}

/* Zweispaltig: Text mit stehender Seitenleiste (Kontakt, Über mich) */
.zweispalt{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(30px,5vw,80px);align-items:start;}
@media (max-width:940px){.zweispalt{grid-template-columns:1fr;gap:36px;}}
.seitenleiste{position:sticky;top:clamp(96px,12vh,124px);}
@media (max-width:940px){.seitenleiste{position:static;}}

/* ── Karten mit Verweisen: Beschwerden-/Behandlungsübersicht, Weiterlesen ──
   Dieselbe Form wie die Felder der Beschwerden-Sektion, als Link. */
.verweise{margin-top:clamp(34px,4vw,56px);display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,1.5vw,20px);}
@media (max-width:980px){.verweise{grid-template-columns:repeat(2,1fr);}}
@media (max-width:620px){.verweise{grid-template-columns:1fr;}}
.verweise--2{grid-template-columns:repeat(2,1fr);}
@media (max-width:620px){.verweise--2{grid-template-columns:1fr;}}
.verweis{
  display:flex;flex-direction:column;gap:12px;padding:clamp(22px,2.4vw,32px);
  background:var(--cream);border-radius:var(--r-a);text-decoration:none;color:inherit;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),background .3s;
}
.verweis:nth-child(3n+2){border-radius:var(--r-c);}
.verweis:nth-child(3n+3){border-radius:var(--r-b);}
.band-sand .verweis,.verweis--hell{background:var(--off-white);}
.verweis:hover{transform:translateY(-3px);box-shadow:0 14px 34px rgba(57,46,24,.1);}
.verweis-bild{border-radius:var(--r-sm);overflow:hidden;background:var(--sand);margin:-6px -6px 6px;}
.verweis-bild img{width:100%;aspect-ratio:16/10;object-fit:cover;}
.verweis .n{font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:var(--brown-soft);}
.verweis h3{font-size:clamp(20px,1.8vw,25px);font-weight:500;letter-spacing:-.016em;line-height:1.2;}
.verweis p{font-size:15.5px;line-height:1.6;color:var(--brown-soft);flex:1;}
.verweis .weiter{font-size:15px;font-weight:600;color:var(--terracotta-deep);margin-top:6px;}
.verweis .weiter::after{content:" →";transition:margin .25s var(--ease);}
.verweis:hover .weiter::after{margin-left:4px;}

/* Weiterlesen-Kasten am Ende von Sektionen */
.weiter-kopf{display:flex;align-items:baseline;justify-content:space-between;gap:20px;flex-wrap:wrap;}

/* ── Schrittfolge kompakt (Erstgespräch-Seite, Behandlungsseiten) ── */
.ablauf-liste{list-style:none;margin:clamp(30px,3.6vw,48px) 0 0;padding:0;display:grid;gap:clamp(12px,1.6vw,20px);counter-reset:ablauf;}
.ablauf-liste li{
  counter-increment:ablauf;position:relative;padding:clamp(22px,2.6vw,36px) clamp(22px,2.6vw,36px) clamp(22px,2.6vw,36px) clamp(72px,8vw,110px);
  background:var(--cream);border-radius:var(--r-a);
}
.ablauf-liste li:nth-child(even){border-radius:var(--r-b);}
.band-sand .ablauf-liste li{background:var(--off-white);}
.ablauf-liste li::before{
  content:counter(ablauf,decimal-leading-zero);position:absolute;left:clamp(22px,2.6vw,36px);top:clamp(20px,2.4vw,32px);
  font-family:var(--serif);font-size:clamp(24px,2.4vw,32px);line-height:1;color:var(--terracotta-deep);font-variant-numeric:tabular-nums;
}
.ablauf-liste h3{font-size:clamp(20px,1.9vw,27px);font-weight:500;letter-spacing:-.016em;}
.ablauf-liste p{margin-top:10px;font-size:16.5px;line-height:1.64;color:var(--brown-soft);max-width:56ch;}

/* ── Kalender-Einbettung: Platz ist reserviert, damit nichts springt ── */
.kalender{background:var(--off-white);border-radius:var(--r-b);padding:clamp(22px,2.6vw,34px);min-height:420px;display:flex;flex-direction:column;justify-content:center;gap:16px;}
.kalender iframe{width:100%;min-height:680px;border:0;border-radius:var(--r-sm);}
.kalender p{color:var(--brown-soft);font-size:16px;line-height:1.6;}

/* ── Kontakt: Karte als Bild, Daten als Liste ── */
.karte{border-radius:var(--r-d);overflow:hidden;background:var(--sand);position:relative;}
.karte img{width:100%;aspect-ratio:4/3;object-fit:cover;}
.karte a.karte-link{position:absolute;inset:0;}
.daten{margin:0;display:grid;gap:18px;}
.daten dt{font-size:12.5px;letter-spacing:.17em;text-transform:uppercase;font-weight:700;color:var(--brown-soft);}
.daten dd{margin:4px 0 0;font-size:17px;line-height:1.6;color:var(--brown);}
.daten a{color:inherit;text-decoration:none;border-bottom:1px solid var(--rule);}
.daten a:hover{color:var(--terracotta-deep);border-color:var(--terracotta-deep);}

/* ── Ratgeber: Übersicht ── */
.artikel-karten{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.8vw,26px);margin-top:clamp(34px,4vw,56px);}
@media (max-width:980px){.artikel-karten{grid-template-columns:repeat(2,1fr);}}
@media (max-width:620px){.artikel-karten{grid-template-columns:1fr;}}
.artikel-karte{
  display:flex;flex-direction:column;background:var(--off-white);border-radius:var(--r-a);overflow:hidden;
  text-decoration:none;color:inherit;transition:transform .3s var(--ease),box-shadow .3s var(--ease);
}
.artikel-karte:nth-child(3n+2){border-radius:var(--r-c);}
.artikel-karte:nth-child(3n+3){border-radius:var(--r-b);}
.artikel-karte:hover{transform:translateY(-3px);box-shadow:0 14px 34px rgba(57,46,24,.1);}
.artikel-karte img{width:100%;aspect-ratio:16/10;object-fit:cover;background:var(--sand);}
.artikel-karte-txt{padding:clamp(20px,2.2vw,30px);display:flex;flex-direction:column;gap:10px;flex:1;}
.artikel-karte .n{font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:var(--terracotta-deep);}
.artikel-karte h2,.artikel-karte h3{font-size:clamp(20px,1.8vw,25px);font-weight:500;letter-spacing:-.016em;line-height:1.2;}
.artikel-karte p{font-size:15.5px;line-height:1.6;color:var(--brown-soft);flex:1;}
.artikel-karte time{font-size:13.5px;color:var(--brown-soft);letter-spacing:.04em;}
.rubriken{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px;}
.rubriken a{font-size:14px;font-weight:600;text-decoration:none;color:var(--brown-soft);border:1px solid rgba(57,46,24,.18);border-radius:999px;padding:6px 14px;transition:all .2s;}
.rubriken a:hover,.rubriken a[aria-current="page"]{background:var(--brown);color:var(--off-white);border-color:var(--brown);}
.seitenzahlen{display:flex;flex-wrap:wrap;gap:8px;margin-top:clamp(30px,3.6vw,48px);font-size:15px;}
.seitenzahlen a,.seitenzahlen span{padding:8px 14px;border-radius:999px;text-decoration:none;color:var(--brown);border:1px solid rgba(57,46,24,.18);}
.seitenzahlen .current{background:var(--brown);color:var(--off-white);border-color:var(--brown);}

/* ── Ratgeber: Artikel ── */
.artikel-kopf{max-width:820px;padding-top:clamp(30px,5vh,60px);}
.artikel-kopf h1{font-size:clamp(34px,4.6vw,62px);letter-spacing:-.03em;line-height:1.04;}
.artikel-meta{margin-top:18px;display:flex;flex-wrap:wrap;gap:8px 18px;font-size:14.5px;color:var(--brown-soft);align-items:center;}
.artikel-meta a{color:inherit;text-decoration:none;border-bottom:1px solid var(--rule);}
.artikel-bild{margin-top:clamp(28px,3.6vw,44px);border-radius:var(--r-d);overflow:hidden;background:var(--sand);}
.artikel-bild img{width:100%;aspect-ratio:16/9;object-fit:cover;}
.artikel-raster{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:clamp(30px,5vw,80px);align-items:start;margin-top:clamp(30px,4vw,56px);}
@media (max-width:940px){.artikel-raster{grid-template-columns:1fr;}}
.artikel-inhalt{max-width:var(--measure);}
.inhalt{background:var(--off-white);border-radius:var(--r-b);padding:22px 24px;font-size:15px;}
.inhalt summary{cursor:pointer;font-weight:700;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--brown-soft);list-style:none;}
.inhalt summary::-webkit-details-marker{display:none;}
.inhalt ol{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:8px;}
.inhalt a{text-decoration:none;color:var(--brown);border-bottom:1px solid transparent;}
.inhalt a:hover{color:var(--terracotta-deep);border-color:currentColor;}
.autor{margin-top:clamp(36px,4vw,56px);display:flex;gap:20px;align-items:center;padding:clamp(20px,2.4vw,30px);background:var(--off-white);border-radius:var(--r-a);}
.autor img{width:88px;height:88px;border-radius:999px;object-fit:cover;flex:none;}
.autor p{font-size:15.5px;line-height:1.55;color:var(--brown-soft);}
.autor .autor-name{font-family:var(--serif);font-size:20px;color:var(--brown);}
.artikel-cta{margin:clamp(30px,3.6vw,48px) 0;}
/* Gutenberg-Blöcke im Artikel bleiben ruhig */
.artikel-inhalt .wp-block-image img{border-radius:var(--r-md);}
.artikel-inhalt .wp-block-quote{margin:1.6em 0;padding:4px 0 4px 22px;border-left:2px solid var(--terracotta);}
.artikel-inhalt .wp-block-table{overflow-x:auto;}

/* ── Fußzeile ──
   Eine dunkle Kachel mit Sitemap und Praxisdaten, darunter die
   Rechtszeile. Das Logo hier ist Annas Negativ-Fassung. */
.fuss{padding-top:clamp(14px,2vw,24px);}
.fuss-kachel{background:var(--brown);color:var(--cream);border-radius:var(--r-lg);padding:clamp(40px,5vw,72px) 0 clamp(34px,4vw,56px);}
.fuss-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:clamp(28px,4vw,56px);}
@media (max-width:980px){.fuss-grid{grid-template-columns:1fr 1fr;}}
@media (max-width:560px){.fuss-grid{grid-template-columns:1fr;gap:30px;}}
.fuss-marke img{height:50px;width:auto;}
.fuss-praxis{margin-top:22px;font-size:15.5px;line-height:1.6;color:rgba(250,245,240,.8);}
.fuss-praxis p + p{margin-top:10px;}
.fuss-praxis a{color:var(--off-white);text-decoration:none;border-bottom:1px solid rgba(250,245,240,.35);}
.fuss-praxis a:hover{border-color:var(--off-white);}
.fuss-praxis .btn{margin-top:20px;}
.fuss h2{font-family:var(--sans);font-size:12.5px;font-weight:700;letter-spacing:.17em;text-transform:uppercase;color:var(--sand);margin-bottom:14px;}
.fuss ul{list-style:none;margin:0;padding:0;display:grid;gap:9px;}
.fuss li a{color:rgba(250,245,240,.88);text-decoration:none;font-size:15.5px;line-height:1.4;transition:color .2s;}
.fuss li a:hover{color:var(--off-white);text-decoration:underline;text-underline-offset:3px;}
.fuss-recht{padding-block:26px 40px;font-size:14px;color:var(--brown-soft);} /* padding-inline kommt von .wrap – sonst klebt die Rechtszeile mobil am Rand */
.fuss-recht-in{display:flex;flex-wrap:wrap;gap:12px 28px;justify-content:space-between;align-items:baseline;}
.fuss-recht nav{display:flex;gap:20px;}
.fuss-recht a{color:inherit;text-decoration:none;border-bottom:1px solid var(--rule);}
.fuss-recht a:hover{color:var(--terracotta-deep);border-color:currentColor;}
.fuss-hinweis{margin-top:16px;padding-top:14px;border-top:1px solid var(--rule-soft);font-size:13.5px;line-height:1.6;max-width:84ch;opacity:.85;}

/* ── Suche und 404 ── */
.suche-form{display:flex;gap:10px;max-width:560px;margin-top:26px;}
.suche-form input{
  flex:1;min-width:0;font:inherit;font-size:16.5px;padding:12px 18px;border-radius:999px;
  border:1.5px solid #9c8256;background:var(--off-white);color:var(--brown);
}
.suche-form input:focus-visible{outline:2.5px solid var(--terracotta-deep);outline-offset:3px;}
.suche-form button{appearance:none;border:0;cursor:pointer;font:inherit;}
.treffer{margin-top:clamp(30px,3.6vw,48px);display:grid;gap:14px;max-width:820px;}
.treffer a{display:block;padding:clamp(20px,2.2vw,28px);background:var(--off-white);border-radius:var(--r-sm);text-decoration:none;color:inherit;transition:transform .3s var(--ease),box-shadow .3s;}
.treffer a:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(57,46,24,.09);}
.treffer h2{font-size:clamp(20px,1.8vw,25px);font-weight:500;letter-spacing:-.016em;}
.treffer p{margin-top:8px;font-size:15.5px;color:var(--brown-soft);line-height:1.6;}

/* ── Druck ── */
@media print{
  .top,.menue,.menue-knopf,.skip,.fuss-kachel,.cmd-leiste,.anschluss .btn,.hero-actions{display:none!important;}
  body{background:#fff;color:#000;}
  .slab,.close-band,.band-dark{background:#fff!important;color:#000!important;}
  .slab h1,.kopf h1,.close h2{color:#000!important;}
}

/* ── Kleine Ergänzungen der Bausteine ── */
/* Stimme als Einschub ohne Bild: eine Spalte, Zitat etwas kleiner */
.said-grid--stimme{grid-template-columns:1fr;}
.said-grid--stimme .said p.q{font-size:clamp(26px,3.4vw,46px);max-width:28ch;}
/* Verweis unter einem Beschwerden-Feld der Startseite */
.field-link{margin-top:14px;font-size:15px;}
.field-link .ghost{font-size:15px;}
/* Button ohne Icon-Kreis (Suche) */
.btn-nur-text{padding:11px 22px;}
/* Vorzeile und Sektionsüberschrift innerhalb eines Fließtextblocks: die
   Fließtextregeln (.prosa p) würden die Vorzeile sonst auf 17 px setzen. */
.prosa .eyebrow{font-size:13px;color:var(--brown-soft);margin-bottom:0;}
.band-dark .prosa .eyebrow{color:rgba(250,245,240,.82);}
.prosa .eyebrow + h2,.prosa .eyebrow + h1{margin-top:22px;}
.prosa h2.h-sec{font-size:clamp(31px,4.2vw,58px);max-width:17ch;}
.prosa .anschluss p{font-family:var(--serif);font-size:clamp(19px,1.8vw,25px);line-height:1.24;color:var(--brown);max-width:26ch;}
.prosa .anschluss{margin-top:clamp(32px,3.6vw,50px);}
/* Bild in der Seitenleiste neben Fließtext */
.seitenleiste .portrait img{aspect-ratio:4/5;}
@media (max-width:940px){.seitenleiste .portrait img{aspect-ratio:4/3;}}

/* Schrittfolge auf hellem Grund (Erstgespräch-Seite) */
.schritte--hell .schritt{background:var(--off-white);}
.schritte--hell .schritt.is-da{background:var(--off-white);box-shadow:0 14px 34px rgba(57,46,24,.08);}
.schritte--hell .schritt p{color:var(--brown-soft);}
.schritte--hell .schritt .schritt-marke{background:var(--cream);color:var(--brown);}
.schritte--hell .schritt.is-da .schritt-marke{background:var(--terracotta);color:var(--off-white);}
.schritte--hell .schritt .schritt-wann{color:var(--terracotta-deep);}
.schritte-fest .schritte-bild{background:var(--sand);}
/* Datenliste mit Gruppen */
.daten > div{display:contents;}

/* Buttons im Fließtext (Zwischen-CTA im Artikel, Anschluss in .prosa):
   .prosa a (0,1,1) schlägt .btn (0,1,0) und färbte die Beschriftung
   terrakotta auf terrakotta. Hier gewinnt der Button. */
.prosa a.btn{color:var(--off-white);border-bottom:0;}
.prosa a.btn-light,.prosa a.btn-linie{color:var(--terracotta-deep);}
.prosa a.btn-light:hover{color:var(--brown);}
.prosa a.btn-linie:hover{color:var(--off-white);}
.prosa a.ghost{color:inherit;border-bottom:1.5px solid currentColor;}

/* Über mich, kompakt (rn_person): schmaleres Porträt als auf der Startseite,
   der Text behält sein Maß. Auf der Sandfläche bleibt das Porträt hell. */
.person--kompakt{grid-template-columns:.62fr 1.38fr;gap:clamp(28px,4.6vw,72px);align-items:center;}
@media (max-width:960px){.person--kompakt{grid-template-columns:1fr;gap:30px;}
  .person--kompakt .portrait{max-width:420px;}}
.person--kompakt .person-body h2{font-size:clamp(30px,3.6vw,50px);}
.person--kompakt .person-body h2 + p.lead{margin-top:clamp(18px,2vw,26px);font-size:clamp(20px,1.8vw,25px);}
.person--kompakt .person-body p .ghost{font-size:inherit;}

/* KI-Kennzeichnung (Art. 50 Abs. 4 AI Act, seit 02.08.2026): das EU-Icon „AI“
   und „KI-generiert“ unten links in jedem KI-Bild – dauerhaft sichtbar, ohne
   Hover. Helles Glas, damit es leise bleibt; auf dem hellsten (Medkey) und
   dem dunkelsten Bild (Dorn) geprüft. Kleiner als 9,5 px wird es auf dem
   Handy unlesbar, und dann ist es keine Kennzeichnung mehr. Welche Bilder KI
   sind, entscheidet rn_ist_ki() in inc/bausteine.php. */
.said-bild,.layer-bild,.portrait,.verweis-bild,.artikel-bild,.cmd-bild{position:relative;}
.artikel-karte-bild{display:block;position:relative;}
.ki-hinweis{
  position:absolute;left:12px;bottom:12px;z-index:2;
  display:inline-flex;align-items:center;gap:4px;padding:2px 7px 2px 2px;
  border-radius:999px;background:rgba(255,255,255,.62);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  color:var(--brown);font:600 9.5px/1 var(--sans);letter-spacing:.03em;
  white-space:nowrap;pointer-events:none;
}
.ki-hinweis::before{content:"";flex:none;width:13px;height:13px;background:url(../img/ki-eu-icon.svg) center/contain no-repeat;}
/* Große Rundung unten links (--r-a/--r-d): etwas weiter hinein. */
.kopf-bild .ki-hinweis,.hero-photo .ki-hinweis{left:16px;bottom:16px;}
/* Die Sequenz: in der Grundfassung trägt jedes Standbild sein Label, auf der
   Leinwand steht eines oben rechts unter der Kopfzeile – unten sitzen Text
   und Leiste. Hochkant unten links im Bild, über dem Text. */
.cmd-buehne > .ki-hinweis{display:none;}
.cmd.is-bereit .cmd-buehne > .ki-hinweis{
  display:inline-flex;left:auto;bottom:auto;
  top:clamp(96px,12vh,124px);right:calc(var(--cmd-pad) + var(--cmd-rand));
}
@media (max-width:860px){
  .cmd.is-bereit .cmd-buehne > .ki-hinweis{
    grid-area:2/1;position:relative;top:auto;right:auto;
    align-self:end;justify-self:start;margin:0 0 12px calc(12px + var(--cmd-rand));
  }
}