/* ═══════════════════════════════════════════════════════════════════════
   BORN FOR HORSES · Pferdepraxis Julieta Born · style.css
   Richtung 4 „Mischform“: Petrol-Randspalte links, Bänder Creme/Petrol rechts.
   Farben, Schriften, Siegel aus context/DESIGN.md — keine neuen Farben.
   Quelle: build/assets/css/style.css → wird nach site/css/ kopiert.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── 1 · Tokens ─────────────────────────────────────────────────────────── */
:root {
  --creme: #FAF7EF;
  --creme-warm: #F3EEE2;
  --petrol-700: #1A5560;
  --petrol-800: #14404A;
  --petrol-900: #0F3138;
  --champagner: #D6BB8E;
  --champagner-hell: #EBDDBE;
  --champagner-text: #816539;
  --ivory-soft: #EDE5D3;
  --text: #24424A;
  --text-soft: #4A6167;

  /* abgeleitet, nur aus den Tokens oben */
  --on-dark: var(--creme);                 /* 10,5 : 1 auf Petrol 800 */
  --on-dark-soft: var(--ivory-soft);       /*  9,0 : 1 auf Petrol 800 */
  --linie: rgba(129, 101, 57, .22);        /* Haarlinie auf Creme */
  --linie-dark: rgba(235, 221, 190, .22);  /* Haarlinie auf Petrol */
  --feld-hell: #FFFFFF;                    /* Formularfelder auf Creme */

  --serif: "EB Garamond", Georgia, "Times New Roman", serif;
  --sans: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  --step-display: clamp(2.6rem, 6vw, 5rem);
  --step-h2: clamp(1.8rem, 3.4vw, 2.6rem);
  --step-h3: 1.3rem;
  --step-lead: clamp(1.05rem, 1.4vw, 1.2rem);

  --rail-w: clamp(250px, 23vw, 318px);
  --maxw: 1160px;
  --inner-max: 1060px;
  /* Oberhalb dieser Breite wächst nichts mehr mit: gemessen hat der Fließtext bei
     57–60 Zeichen sein Maß erreicht. Ohne gemeinsame Klammer setzt jedes Element
     seine eigene Obergrenze gegen die Fensterbreite, und bei 2560 px enden Text,
     .inner, Auftaktbild und Notrufnummer auf vier verschiedenen rechten Kanten. */
  --shell-max: 1680px;
  --gut-x: clamp(24px, 4vw, 64px);
  --gut-y: clamp(38px, 4.6vw, 76px);
  --bar-h: 64px;
  --measure: 48ch;          /* ≈ 64–68 Zeichen Montserrat (1ch ≈ 0,69 em, mittlere Glyphe ≈ 0,51 em) */
  --measure-weit: 62ch;     /* nur für mehrspaltige Listen und Raster, nie für Fließtext */

  --z-sticky: 100;
  --z-rail: 200;
  --z-bar: 300;
  --z-overlay: 400;

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

/* ── 2 · Schriften (lokal, subsettet, swap) ─────────────────────────────── */
@font-face { font-family: "EB Garamond"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/EBGaramond-400.woff2") format("woff2"); }
@font-face { font-family: "EB Garamond"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/EBGaramond-600.woff2") format("woff2"); }
@font-face { font-family: "EB Garamond"; font-style: italic; font-weight: 500; font-display: swap; src: url("../fonts/EBGaramond-italic-500.woff2") format("woff2"); }
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/Montserrat-400.woff2") format("woff2"); }
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/Montserrat-500.woff2") format("woff2"); }
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/Montserrat-600.woff2") format("woff2"); }
/* Fallback-Metriken gegen Layoutsprung beim Schriftwechsel (CLS) */
@font-face { font-family: "EB Garamond Fallback"; src: local("Georgia"), local("Times New Roman"); size-adjust: 96%; ascent-override: 92%; descent-override: 24%; line-gap-override: 0%; }
@font-face { font-family: "Montserrat Fallback"; src: local("Arial"), local("Helvetica"); size-adjust: 108%; ascent-override: 96%; descent-override: 25%; line-gap-override: 0%; }
:root { --serif: "EB Garamond", "EB Garamond Fallback", Georgia, serif; --sans: "Montserrat", "Montserrat Fallback", Arial, sans-serif; }

/* ── 3 · Basis ──────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--sans); font-size: 1rem; line-height: 1.7; color: var(--text);
  background: var(--creme); -webkit-font-smoothing: antialiased;
  min-height: 100vh; display: flex; flex-direction: column;
}
img, svg, picture { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
b, strong { font-weight: 600; }
h1, h2, h3, h4 { font-family: var(--serif); font-weight: 600; line-height: 1.12; text-wrap: balance; color: var(--petrol-700); }
h1 { font-size: var(--step-display); letter-spacing: -.02em; }
h2 { font-size: var(--step-h2); letter-spacing: -.012em; margin-bottom: 10px; }
h3 { font-size: var(--step-h3); letter-spacing: -.005em; }
h4 { font-size: 1.1rem; }
@media (max-width: 420px) { h1, h2, h3, .dl dt, .timeline-text b { hyphens: auto; overflow-wrap: anywhere; } }   /* lange Fachwörter auf schmalen Geräten */
p, li, dd, dt, figcaption, summary, label { text-wrap: pretty; }
p { max-width: var(--measure); }
html { scroll-padding-top: 12px; }
@media (max-width: 980px) { html { scroll-padding-top: calc(var(--bar-h) + 12px); } }
hr { border: 0; border-top: 1px solid var(--linie); }
::selection { background: var(--champagner); color: var(--petrol-900); }

:focus-visible { outline: 2px solid var(--champagner-text); outline-offset: 3px; border-radius: 2px; }
.rail :focus-visible, .foot :focus-visible, .band-p :focus-visible, .band-d :focus-visible, .on-dark :focus-visible { outline-color: var(--champagner); }
.notruf :focus-visible { outline-color: var(--petrol-800); }

.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 12px; top: -100px; z-index: var(--z-overlay); background: var(--champagner); color: var(--petrol-900); padding: 15px 18px; min-height: 48px; border-radius: 3px; font: 600 .82rem/1 var(--sans); letter-spacing: .06em; text-decoration: none; }
.skip:focus { top: 12px; }
main:focus { outline: none; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ── 4 · Typo-Bausteine ─────────────────────────────────────────────────── */
.inner { padding: var(--gut-y) var(--gut-x); max-width: var(--inner-max); }
@media (min-width: 1400px) { :root { --inner-max: 1240px; } }
.lead { font-size: var(--step-lead); color: var(--text-soft); max-width: var(--measure); }
.band-w .lead { color: var(--text); }
.small { font-size: .875rem; }
.kicker, .eyebrow { font: 600 .74rem/1.5 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--petrol-700); max-width: none; }
@media (max-width: 340px) { .kicker .nowrap { white-space: normal; } }   /* die Spans sind kurz genug; Sicherheitsnetz für sehr schmale Geräte */
.nowrap { white-space: nowrap; }
.prose { max-width: var(--measure); }
.prose > h2:first-child, .prose > h3:first-child { margin-top: 0; }
.prose > * + * { margin-top: 1em; }
.prose > h2 { margin-top: 2.2em; }
.prose > h3 { margin-top: 1.8em; margin-bottom: .2em; }
.prose > h2 + p, .prose > h3 + p, .prose > h2 + .lead { margin-top: .5em; }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose li + li { margin-top: .35em; }
/* Textlinks sind durchgehend unterstrichen – im Fließtext, in Listen, in
   Aufzählungen und im Fuß. Ausgenommen sind Schaltflächen, Rufnummern,
   Menüs und Sprunglisten; die tragen ihre eigene Auszeichnung. */
/* Textlinks. Gemessen: die Unterstreichung muss die Arbeit tun, nicht die Farbe –
   keine Farbe der Palette erreicht 3:1 gegenüber dem Fließtext (#24424A), Petrol 700
   kommt auf 1,29:1. Deshalb Linie in der Linkfarbe selbst (7,7:1 statt 1,73:1 in
   Champagner) und 2 px stark; die Champagnerfläche ist Belohnung im Hover, nicht
   Träger – sie hat nur 1,17:1 und verschwindet im Kontrastmodus. */
main p a:not(.act):not(.tel), main li a:not(.act):not(.tel), main dd a:not(.act):not(.tel),
main figcaption a, main summary a, main td a, .prose a:not(.act):not(.tel),
.arrow-link, .foot p a {
  color: var(--petrol-700);
  text-decoration: underline;
  text-decoration-color: currentColor;
  text-decoration-thickness: 2px;
  text-underline-offset: .18em;
  border-radius: 2px;
  transition: color .2s var(--ease), background-color .2s var(--ease), text-decoration-thickness .2s var(--ease);
}
main p a:not(.act):not(.tel):hover, main li a:not(.act):not(.tel):hover,
main dd a:not(.act):not(.tel):hover, .prose a:not(.act):not(.tel):hover,
.arrow-link:hover, .foot p a:hover {
  color: var(--champagner-text);
  background: var(--champagner-hell);
  box-shadow: 0 0 0 2px var(--champagner-hell);
  box-decoration-break: clone; -webkit-box-decoration-break: clone;
  text-decoration-thickness: 3px;
}
/* Auf Petrolflächen und im Fuß trägt Champagner hell die Linkfarbe (9,0 : 1) */
.band-p p a:not(.act):not(.tel), .band-d p a:not(.act):not(.tel),
.band-p li a:not(.act):not(.tel), .band-d li a:not(.act):not(.tel),
.band-p dd a:not(.act):not(.tel), .band-d dd a:not(.act):not(.tel),
.band-p .prose a:not(.act):not(.tel), .band-d .prose a:not(.act):not(.tel),
.band-p .arrow-link, .band-d .arrow-link, .on-dark .arrow-link,
.foot p a, .foot li a { color: var(--champagner-hell); }
.band-p p a:not(.act):not(.tel):hover, .band-d p a:not(.act):not(.tel):hover,
.band-p li a:not(.act):not(.tel):hover, .band-d li a:not(.act):not(.tel):hover,
.band-p .prose a:not(.act):not(.tel):hover, .band-d .prose a:not(.act):not(.tel):hover,
.band-p .arrow-link:hover, .band-d .arrow-link:hover, .foot p a:hover {
  color: var(--petrol-900); background: var(--champagner); box-shadow: 0 0 0 2px var(--champagner);
}
/* Auf Champagner hell (Notrufstreifen) wäre die Hoverfläche unsichtbar */
.notruf p a:hover, .notruf-link:hover { background: var(--creme); box-shadow: 0 0 0 2px var(--creme); color: var(--petrol-900); }
/* Ausnahmen: Menüs, Sprunglisten und eigene Bausteine tragen ihre eigene Auszeichnung */
main .sprung a, main .linklist a, main .nav-block a, main .faq-item summary a,
main .radar a, main .dl-plain dt a, main .dl dt a { text-decoration: none; }
.schluss { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--linie); font-family: var(--serif); font-size: clamp(1.12rem, 1.8vw, 1.4rem); line-height: 1.35; color: var(--petrol-700); max-width: 40ch; text-wrap: balance; }
.more { margin-top: 22px; }
.arrow-link { display: inline-block; padding-block: .7em; margin-block: -.4em; font-weight: 500; }
.arrow-link::after { content: ""; display: inline-block; width: 7px; height: 7px; margin-left: 10px; vertical-align: .1em; border-right: 1.5px solid var(--champagner); border-top: 1.5px solid var(--champagner); rotate: 45deg; transition: translate .2s var(--ease); }
.arrow-link:hover::after { translate: 3px 0; }
.linklist { list-style: none; margin-top: 18px; }

/* Zierlinie: Raute aus dem Siegel, zwischen Themen (nicht unter jeder Überschrift) */
.zier { position: relative; border: 0; height: 24px; margin: 0; max-width: var(--inner-max); }
.zier::before { content: ""; position: absolute; left: var(--gut-x); right: var(--gut-x); top: 50%; border-top: 1px solid var(--linie); }
.zier::after { content: ""; position: absolute; left: 50%; top: 50%; width: 9px; height: 9px; translate: -50% -50%; rotate: 45deg; background: var(--champagner); box-shadow: 0 0 0 6px var(--creme); }
.band-w .zier::after { box-shadow: 0 0 0 6px var(--creme-warm); }
.band-p .zier::before, .band-d .zier::before { border-color: var(--linie-dark); }
.band-p .zier::after { box-shadow: 0 0 0 6px var(--petrol-800); }
.band-d .zier::after { box-shadow: 0 0 0 6px var(--petrol-900); }

/* ── 5 · Aktionen, Icons, Rufnummer ─────────────────────────────────────── */
.act { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 30px; border-radius: 999px; border: 1.5px solid transparent; font: 600 .8rem/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; text-decoration: none; cursor: pointer; text-align: center; transition: background-color .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease); }
.act-1 { background: var(--champagner); color: var(--petrol-900); }
.act-1:focus-visible { outline: 2px solid var(--creme); outline-offset: 3px; box-shadow: 0 0 0 5px var(--petrol-800); }
.act-1:hover { background: var(--champagner-hell); transform: translateY(-1px); }
.act-2 { background: transparent; color: var(--petrol-700); border-color: var(--petrol-700); }
.act-2:hover { background: var(--petrol-700); color: var(--creme); }
.act-3 { background: transparent; color: var(--champagner-hell); border-color: rgba(235, 221, 190, .55); }
.act-3:hover { background: var(--champagner); border-color: var(--champagner); color: var(--petrol-900); }
.act--notruf { min-height: 56px; }

/* Material-Symbole sind gefüllte Pfade; Eigenzeichnungen tragen ihre Kontur inline. */
.ico { fill: currentColor; stroke: none; width: 42px; height: 42px; flex: none; }
.ico-m { width: 40px; height: 40px; }
.ico-s { width: 22px; height: 22px; }

.tel { font-family: var(--serif); font-weight: 600; text-decoration: none; letter-spacing: -.01em; display: inline-block; white-space: nowrap; padding-block: .4em; margin-block: -.4em; transition: color .2s var(--ease); }
.tel.gross { display: inline-flex; align-items: center; min-height: 56px; font-size: clamp(2rem, 3.6vw, 2.9rem); line-height: 1.15; padding: 4px 0; margin: 8px 0 4px; color: var(--petrol-700); }
.band-p .tel.gross, .band-d .tel.gross { color: var(--champagner-hell); }
.band-p .tel.gross:hover, .band-d .tel.gross:hover { color: var(--champagner); }
.tel-line { margin-top: 18px; }

/* ── 6 · Bänder ─────────────────────────────────────────────────────────── */
.band-c { background: var(--creme); }
.band-w { background: var(--creme-warm); }
.band-p { background: var(--petrol-800); color: var(--on-dark); line-height: 1.75; }
.band-d { background: var(--petrol-900); color: var(--on-dark); line-height: 1.75; }
.on-dark { color: var(--on-dark); }
.band-p h1, .band-p h2, .band-p h3, .band-p h4, .band-d h1, .band-d h2, .band-d h3, .band-d h4, .on-dark h2, .on-dark h3 { color: var(--on-dark); }
.band-p .lead, .band-d .lead { color: var(--champagner-hell); }
.band-p .small, .band-d .small { color: var(--on-dark-soft); }
.band-p .kicker, .band-d .kicker, .band-p .eyebrow, .band-d .eyebrow { color: var(--champagner-hell); }
.band-p hr, .band-d hr { border-color: var(--linie-dark); }
.band-p .schluss, .band-d .schluss { color: var(--on-dark); border-color: var(--linie-dark); }
.band-p .prose a:not(.act):not(.tel), .band-d .prose a:not(.act):not(.tel) { text-decoration-color: var(--champagner); }

/* ── 7 · Gerüst: Randspalte + Inhaltsstrang ─────────────────────────────── */
.shell { flex: 1 0 auto; width: 100%; max-width: var(--shell-max); margin-inline: auto;
  display: grid; grid-template-columns: var(--rail-w) minmax(0, 1fr); align-items: start;
  /* Randspalte klebt oben; damit die Petrolfläche bis zum Fuß läuft, trägt das Raster den Streifen als Hintergrund */
  background: linear-gradient(90deg, var(--petrol-800) 0 var(--rail-w), var(--creme) var(--rail-w)); }
.body { min-width: 0; }

.rail { position: sticky; top: 0; z-index: var(--z-rail); background: var(--petrol-800); color: var(--on-dark); min-height: 100vh; min-height: 100dvh; max-height: 100vh; max-height: 100dvh; overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgba(235, 221, 190, .3) transparent; display: flex; flex-direction: column; }
.rail-top { padding: clamp(26px, 3vw, 38px) clamp(20px, 2.2vw, 30px) 0; }
@media (min-width: 981px) {
  /* Die Spalte scrollt als Ganzes – die Abschnittsliste steht dadurch immer
     vollständig da und wird nie auf einen Ausschnitt zusammengedrückt. Damit dabei
     das Wichtigste nicht verschwindet, klebt der Kopf mit Siegel, Rufnummer und
     Terminschaltfläche oben. Ein Verlauf am unteren Rand zeigt, dass es weitergeht. */
  .rail-top { display: none; }
  .rail-fest { position: sticky; top: 0; z-index: 2; display: flex; flex-direction: column;
    gap: 22px; background: var(--petrol-800);
    /* über die Spaltenbreite gezogen: sonst scheinen Führungslinie und Abschnittsmarker
       der Liste seitlich am Kopf vorbei, wenn sie darunter durchscrollen */
    margin-inline: calc(-1 * clamp(20px, 2.2vw, 30px));
    padding: 0 clamp(20px, 2.2vw, 30px) 18px; }
  /* flex: none ist nötig – als Flex-Item schrumpft der Verlauf sonst auf 0 px */
  .rail-inner::after { content: ""; position: sticky; bottom: -1px; display: block; height: 40px;
    flex: none; margin: -40px calc(-1 * clamp(20px, 2.2vw, 30px)) 0; pointer-events: none;
    background: linear-gradient(rgba(20, 64, 74, 0), var(--petrol-800) 82%); }
}
.rail-body { display: flex; flex: 1; min-height: 0; }
.rail-inner { display: flex; flex-direction: column; gap: 26px; width: 100%; padding: clamp(26px, 3vw, 38px) clamp(20px, 2.2vw, 30px) clamp(24px, 3vw, 34px); }
.rail .mark { display: flex; flex-direction: column; gap: 12px; text-decoration: none; color: var(--on-dark); width: max-content; max-width: 100%; }
/* Ab 981 px das vollständige Siegel (Umschrift lesbar), darunter die Bildmarke.
   Beide stehen im Markup; die jeweils andere ist ganz aus dem Baum. */
.rail .mark--mobil { display: none; }
.rail .seal--voll { width: clamp(120px, 9.5vw, 150px); height: auto; }
.rail .name-desk { font: 500 .66rem/1.5 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--champagner); }
.rail .name { font-family: var(--serif); font-size: 1.16rem; font-weight: 600; line-height: 1.2; }
.rail .name-sub { display: block; font: 500 .6rem/1.6 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--champagner); margin-top: 5px; }
.rail .menu, .rail .tel-kurz { display: none; }
.rail .tel-block { display: block; }
.rail .tel { display: inline-flex; align-items: center; min-height: 48px; font-size: 1.72rem; color: var(--champagner-hell); line-height: 1.2; padding: 0; margin: -6px 0 -4px; }
.rail .tel:hover { color: var(--champagner); }
.rail .tel-block .small { display: block; color: var(--on-dark-soft); margin-top: 2px; }
.rail .act { align-self: stretch; }
/* Sprachwahl im festen Kopf der Randspalte: drei Kürzel nebeneinander, die
   aktuelle Sprache als Text statt als Link. Sie steht auf jeder Seite an
   derselben Stelle, damit sie auffindbar ist, ohne Aufmerksamkeit von der
   Rufnummer zu ziehen. */
.rail .sprachen { display: flex; align-items: center; gap: 2px; margin-top: -2px; }
.rail .sprachen a, .rail .sprachen span {
  /* 44 px in beide Richtungen – dieselbe Zielfläche wie überall sonst */
  min-height: 44px; min-width: 44px; display: inline-flex;
  align-items: center; justify-content: center; padding: 0 10px;
  font: 600 .68rem/1 var(--sans); letter-spacing: .14em; border-radius: 3px;
}
.rail .sprachen a { color: var(--on-dark-soft); text-decoration: none; border-bottom: 0; }
.rail .sprachen a:hover { color: var(--champagner-hell); background: rgba(235, 221, 190, .12); }
.rail .sprachen a:focus-visible { outline: 2px solid var(--creme); outline-offset: 2px; }
.rail .sprachen .ist-aktiv { color: var(--champagner-hell); background: rgba(235, 221, 190, .18); }

.rail-dl { font-size: .82rem; color: var(--on-dark-soft); margin-top: auto; }
.rail-dl dt { font-weight: 600; color: var(--champagner-hell); font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 3px; }
.rail-dl dd + dt { margin-top: 14px; }

.nav-block { border-top: 1px solid rgba(235, 221, 190, .38); padding-top: 14px; }
.nav-titel { font: 600 .7rem/1.3 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--champagner); margin-bottom: 12px; }
.nav-block ul { list-style: none; }
.nav-block li { position: relative; }

/* Hauptebene */
.nav-haupt > li > a { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 48px; padding: 6px 10px 6px 12px; margin-inline: -10px -10px; text-decoration: none; color: var(--on-dark); font-size: .96rem; font-weight: 500; border-bottom: 1px solid rgba(235, 221, 190, .22); border-radius: 2px 2px 0 0; transition: color .2s var(--ease), background-color .2s var(--ease); }
.nav-haupt > li > a span { transition: translate .2s var(--ease); }
.nav-haupt > li > a::after { content: ""; width: 7px; height: 7px; flex: none; border-right: 1.5px solid var(--champagner); border-top: 1.5px solid var(--champagner); rotate: 45deg; opacity: .8; transition: opacity .2s var(--ease); }
.nav-haupt > li > a:hover { color: var(--champagner-hell); background: rgba(235, 221, 190, .12); }
.nav-haupt > li > a:hover span { translate: 4px 0; }
.nav-haupt > li > a:hover::after { opacity: 1; }
/* Aktive Seite: Champagnerbalken links, gefüllte Fläche, halbfett */
.nav-haupt > li > a[aria-current="page"] { color: var(--petrol-900); background: var(--champagner); font-weight: 600; border-bottom-color: transparent; }
.nav-haupt > li > a[aria-current="page"]:hover { background: var(--champagner-hell); color: var(--petrol-900); }
.nav-haupt > li > a[aria-current="page"]::after { opacity: 0; }
.nav-haupt > li > a[aria-current="page"]::before { content: ""; position: absolute; left: -10px; top: 0; bottom: 0; width: 3px; background: var(--champagner-hell); }

/* Zweite Ebene: Abschnitte der aktuellen Seite, eigener Block unter dem Menü */
.nav-haupt > li:last-child > a { border-bottom: 0; }
.nav-block--sub { border-top-color: rgba(235, 221, 190, .28); }
.nav-sub { padding-left: 14px; border-left: 1px solid rgba(235, 221, 190, .3); }
.nav-sub a { display: flex; align-items: center; min-height: 44px; padding: 5px 10px 5px 12px; margin-right: -10px; font-size: .9rem; line-height: 1.35; color: var(--on-dark); text-decoration: none; border-radius: 2px; transition: color .2s var(--ease), background-color .2s var(--ease); }
.nav-sub a:hover { color: var(--champagner-hell); background: rgba(235, 221, 190, .12); }
/* Der gelesene Abschnitt: durchgehender Balken auf der Führungslinie statt einer Raute */
.nav-sub a[aria-current="true"] { color: var(--champagner-hell); font-weight: 600; background: rgba(235, 221, 190, .12); }
.nav-sub a[aria-current="true"]::before { content: ""; position: absolute; left: -15px; top: 0; bottom: 0; width: 3px; background: var(--champagner); border-radius: 2px; }
/* Der Winkel zeigt nach unten: das Ziel liegt auf dieser Seite, nicht auf einer anderen.
   Im Hauptmenü zeigt derselbe Winkel nach rechts (Seitenwechsel). */
.nav-sub a { justify-content: space-between; gap: 10px; }
.nav-sub a::after { content: ""; width: 6px; height: 6px; flex: none; margin-bottom: 3px;
  border-right: 1.5px solid var(--champagner); border-bottom: 1.5px solid var(--champagner);
  rotate: 45deg; opacity: .55; transition: opacity .2s var(--ease); }
.nav-sub a:hover::after { opacity: 1; }
.nav-sub li { position: relative; }

/* Kompaktstufen für flache Fenster: das Menü bleibt ohne Scrollen sichtbar */
/* Mit Abschnittsliste ist der Platz knapp – die Eckdaten stehen ohnehin im Fuß.
   Bei hohen Fenstern (ab 1100 px) ist Platz genug, dort bleiben sie. */
@media (min-width: 981px) and (max-height: 1100px) { .hat-subnav .rail-dl { display: none; } }
/* Flache Fenster: der feste Kopf und das Hauptmenü rücken zusammen, damit von der
   Abschnittsliste mehr als eine Handvoll Zeilen ohne Scrollen zu sehen ist. */
@media (min-width: 981px) and (max-height: 940px) {
  .rail-inner { gap: 16px; padding-top: 26px; padding-bottom: 16px; }
  .rail-fest { gap: 14px; padding-bottom: 12px; }
  .rail .seal--voll { width: clamp(96px, 7vw, 108px); }
  .rail .mark { gap: 9px; }
  .rail .tel { font-size: 1.5rem; }
  .nav-titel { margin-bottom: 7px; }
  .nav-haupt > li > a { min-height: 44px; padding-block: 3px; }
  .rail-dl dd + dt { margin-top: 10px; }
}
@media (min-width: 981px) and (max-height: 820px) {
  .rail .seal--voll { width: 100px; }
  .rail .mark { gap: 10px; }
  .rail-inner { gap: 16px; padding-top: 20px; }
  .rail-fest { gap: 14px; }
  .rail .tel { font-size: 1.5rem; }
  .nav-haupt > li > a { min-height: 44px; padding-block: 3px; }
  .rail-dl dd + dt { margin-top: 8px; }
}
@media (min-width: 981px) and (max-height: 720px) {
  .rail .seal--voll { width: 88px; }
  .rail .mark { gap: 8px; }
  .rail .name-desk { display: none; }
  .rail-inner { gap: 14px; padding-top: 14px; padding-bottom: 14px; }
  .rail-fest { gap: 12px; padding-bottom: 12px; }
  .rail .tel { font-size: 1.4rem; min-height: 44px; }
  .rail .act { min-height: 44px; }
  .nav-block { padding-top: 10px; }
  .nav-titel { margin-bottom: 6px; }
  .nav-haupt > li > a { min-height: 42px; padding: 2px 10px 2px 12px; font-size: .9rem; }
  .nav-sub a { min-height: 42px; padding-block: 3px; }
  .rail-dl { display: none; }
}

/* ── 8 · Auftakt ────────────────────────────────────────────────────────── */
.hero .inner { padding-bottom: clamp(26px, 3vw, 40px); }
.hero h1 { margin: 14px 0 20px; max-width: 16ch; }
.hero h1 em { font-style: italic; font-weight: 500; color: var(--champagner-text); }
.hero-entity { color: var(--text-soft); margin-top: 18px; max-width: var(--measure); }
.hero-figure { overflow: hidden; }
.hero-figure img { width: 100%; height: auto; aspect-ratio: 21 / 9; object-fit: cover; object-position: 50% 12%; }  /* Foto 3:2 Julieta mit Pferd: Köpfe oben, Schnitt an der Hüfte */
@media (max-width: 640px) { .hero-figure img { aspect-ratio: 16 / 10; } }
.hero--sub .inner { padding-bottom: var(--gut-y); }
.hero--sub h1 { margin: 0 0 18px; max-width: 18ch; }

/* ── 9 · Notrufstreifen (Champagner hell) ───────────────────────────────── */
.notruf { background: var(--champagner-hell); color: var(--petrol-900); padding: 0 var(--gut-x); }
.notruf-inner { display: flex; align-items: center; gap: clamp(14px, 2vw, 24px); padding: 14px 0; max-width: calc(var(--inner-max) - 2 * var(--gut-x)); }
.notruf .ico { color: var(--champagner-text); }
.notruf p { margin: 0; font-size: .9rem; max-width: var(--measure); line-height: 1.6; }
.notruf-link { display: inline-block; padding: .85em 0; margin: -.85em 0; color: var(--petrol-800); font-weight: 500; text-decoration: underline; text-decoration-color: var(--champagner-text); text-underline-offset: .18em; text-decoration-thickness: 1px; }
.notruf-link:hover { text-decoration-color: currentColor; }
.notruf-tel { order: 2; margin-left: auto; font-size: 1.5rem; color: var(--petrol-800); min-height: 56px; display: inline-flex; align-items: center; padding: 0 4px; }
.notruf-tel:hover { color: var(--champagner-text); }
@media (max-width: 900px) {
  .notruf-inner { flex-wrap: wrap; gap: 8px 16px; }
  .notruf p { flex: 1 1 100%; order: 2; }
  .notruf-tel { margin-left: 0; order: 1; }
  .notruf .ico { order: 0; }
}

/* ── 10 · Listen-Komponenten ────────────────────────────────────────────── */
/* Leistungen: Definitionsliste mit Icon, zweispaltig ab 900 px */
.dl { margin-top: 30px; display: grid; grid-template-columns: 1fr 1fr; gap: 0 clamp(24px, 3vw, 48px); }
@media (max-width: 899px) { .dl { grid-template-columns: 1fr; } }
.dl > div { padding: 20px 0; border-top: 1px solid var(--linie); }
.dl dt { display: flex; gap: 16px; align-items: flex-start; font-family: var(--serif); font-size: 1.18rem; font-weight: 600; color: var(--petrol-700); line-height: 1.25; }
.dl dt .ico { color: var(--petrol-700); margin-top: -4px; }
/* Der Titel ist Überschrift und Ziel zugleich. Unterstrichen sähe er aus wie eine
   Zierlinie (Champagner = Trennlinienfarbe) und markierte außerdem die falsche Fläche:
   klickbar ist die ganze Zeile. Stattdessen ein Winkel direkt hinter dem Titel. */
.dl > div { position: relative; }
.dl dt a { display: inline-block; padding: 11px 0 12px; margin: -11px 0 -12px; text-decoration: none; transition: color .2s var(--ease); }
.dl dt a::before { content: ""; position: absolute; inset: -4px -12px; border-radius: 3px; }
.dl dt a::after { content: ""; display: inline-block; width: 11px; height: 11px; margin-left: .42em; vertical-align: .02em;
  border-right: 2px solid var(--champagner-text); border-top: 2px solid var(--champagner-text); rotate: 45deg;
  transition: translate .2s var(--ease); }
.dl > div:hover { background: var(--creme-warm); box-shadow: 0 0 0 12px var(--creme-warm); border-radius: 2px; }
.band-w .dl > div:hover { background: #ECE5D6; box-shadow: 0 0 0 12px #ECE5D6; }
.dl > div:hover dt a { color: var(--champagner-text); }
.dl > div:hover dt a::after { translate: 3px -3px; }
.dl dt a:focus-visible { outline: none; }
.dl > div:has(dt a:focus-visible) { outline: 2px solid var(--champagner-text); outline-offset: 6px; border-radius: 3px; }
.dl dd { font-size: .88rem; color: var(--text-soft); margin-top: 6px; max-width: 38ch; line-height: 1.6;
  padding-left: 58px; min-height: calc(3 * 1.6em); }   /* drei Zeilen: alle Einträge gleich hoch */
@media (max-width: 599px) {
  .dl dt .ico { width: 32px; height: 32px; margin-top: -2px; }
  .dl dt { gap: 12px; }
  .dl dd { padding-left: 0; min-height: 0; }
}
.band-p .dl > div, .band-d .dl > div { border-color: var(--linie-dark); }
.band-p .dl dt, .band-p .dl dt .ico, .band-d .dl dt, .band-d .dl dt .ico { color: var(--on-dark); }
.band-p .dl dd, .band-d .dl dd { color: var(--on-dark-soft); }
.nicht { margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--linie); color: var(--text-soft); max-width: var(--measure); }
.nicht strong { color: var(--petrol-700); }

/* Schlichte Definitionsliste mit Haarlinien (Kontaktwege, Qualifikationen …) */
.dl-plain { margin-top: 24px; border-top: 1px solid var(--linie); }
/* Der Block ist so breit wie sein Inhalt: Begriffsspalte + Abstand + Lesespalte.
   Vorher lief die Trennlinie 368 px über den Text hinaus. */
.dl-plain { max-width: calc(12rem + 24px + var(--measure)); }
.dl-plain > div { display: grid; grid-template-columns: minmax(9ch, 12rem) minmax(0, var(--measure)); gap: 6px 24px; padding: 16px 0; border-bottom: 1px solid var(--linie); }
@media (max-width: 560px) { .dl-plain > div { grid-template-columns: 1fr; gap: 2px; } }
.dl-plain dt { font-family: var(--serif); font-size: 1.12rem; font-weight: 600; color: var(--petrol-700); }
.dl-plain dd { color: var(--text); max-width: var(--measure); }
.band-p .dl-plain, .band-p .dl-plain > div, .band-d .dl-plain, .band-d .dl-plain > div { border-color: var(--linie-dark); }
.band-p .dl-plain dt, .band-d .dl-plain dt { color: var(--on-dark); }

/* Nummerierte Schritte — die Nummer trägt hier echte Information */
.steps { list-style: none; counter-reset: schritt; margin-top: 26px; display: grid; gap: 0; }
.steps li { counter-increment: schritt; position: relative; padding: 20px 0 20px 54px; border-top: 1px solid var(--linie); color: var(--text); font-size: .95rem; max-width: var(--measure); }
.steps li::before { content: counter(schritt); position: absolute; left: 0; top: 19px; width: 32px; height: 32px; border: 1px solid var(--champagner); border-radius: 50%; display: grid; place-items: center; font: 600 .8rem/1 var(--sans); color: var(--champagner-text); }
.steps li b { font-family: var(--serif); font-size: 1.12rem; font-weight: 600; color: var(--petrol-700); display: block; margin-bottom: 3px; letter-spacing: -.005em; }
.steps--2col { grid-template-columns: 1fr 1fr; gap: 0 clamp(28px, 4vw, 64px); }
@media (max-width: 899px) { .steps--2col { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .steps li { padding-left: 46px; } .steps li::before { width: 28px; height: 28px; } }
.band-p .steps li, .band-d .steps li { color: var(--on-dark); border-color: var(--linie-dark); }
.band-p .steps li b, .band-d .steps li b { color: var(--on-dark); }
.band-p .steps li::before, .band-d .steps li::before { color: var(--champagner); }

/* Zeitleiste: Jahr | Station */
.timeline { list-style: none; margin-top: 26px; border-top: 1px solid var(--linie); max-width: calc(9rem + 24px + var(--measure)); }
.timeline li { display: grid; grid-template-columns: minmax(7ch, 9rem) minmax(0, var(--measure)); gap: 4px 24px; padding: 16px 0; border-bottom: 1px solid var(--linie); align-items: baseline; }
.timeline-jahr { font-family: var(--serif); font-size: 1.15rem; font-weight: 600; color: var(--champagner-text); letter-spacing: -.005em; white-space: nowrap; }
.timeline-text { max-width: var(--measure); }
.timeline-text b { color: var(--petrol-700); }
@media (max-width: 560px) { .timeline li { grid-template-columns: 1fr; gap: 2px; } }
.band-p .timeline, .band-p .timeline li, .band-d .timeline, .band-d .timeline li { border-color: var(--linie-dark); }
.band-p .timeline-jahr, .band-d .timeline-jahr { color: var(--champagner); }
.band-p .timeline-text b, .band-d .timeline-text b { color: var(--on-dark); }

/* Checkliste mit Häkchen in Champagner */
.checklist { list-style: none; margin-top: 22px; }
.checklist li { position: relative; padding: 12px 0 12px 36px; border-top: 1px solid var(--linie); max-width: var(--measure); }
.checklist li::before { content: ""; position: absolute; left: 6px; top: 16px; width: 8px; height: 15px; border-right: 1.5px solid var(--champagner-text); border-bottom: 1.5px solid var(--champagner-text); rotate: 45deg; }
.checklist li b { color: var(--petrol-700); }
.band-p .checklist li, .band-d .checklist li { border-color: var(--linie-dark); }
.band-p .checklist li::before, .band-d .checklist li::before { border-color: var(--champagner); }
.band-p .checklist li b, .band-d .checklist li b { color: var(--on-dark); }

/* FAQ: <details>-Akkordeon */
/* Frage links, Zeichen rechts: ohne Begrenzung liegen bei 1920 px 584 px
   Leerraum dazwischen. */
.faq { margin-top: 26px; border-top: 1px solid var(--linie); max-width: calc(var(--measure) + 4rem); }
.faq-item { border-bottom: 1px solid var(--linie); }
.faq-item summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 18px; min-height: 56px; padding: 14px 0; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary h3 { font-size: 1.15rem; margin: 0; line-height: 1.3; }
.faq-item summary::after { content: ""; flex: none; width: 14px; height: 14px; margin-right: 4px; background: linear-gradient(currentColor, currentColor) center/14px 1.5px no-repeat, linear-gradient(currentColor, currentColor) center/1.5px 14px no-repeat; color: var(--champagner-text); transition: rotate .3s var(--ease); }
.faq-item[open] summary::after { background: linear-gradient(currentColor, currentColor) center/14px 1.5px no-repeat; }
.faq-item summary:hover h3 { color: var(--champagner-text); }
.faq-body { padding: 0 0 20px; max-width: var(--measure); }
.faq-body p + p { margin-top: .8em; }
.band-p .faq, .band-p .faq-item, .band-d .faq, .band-d .faq-item { border-color: var(--linie-dark); }
.band-p .faq-item summary::after, .band-d .faq-item summary::after { color: var(--champagner); }
.band-p .faq-item summary:hover h3, .band-d .faq-item summary:hover h3 { color: var(--champagner-hell); }

/* Ruhiger Hinweiskasten (kein Alert-Look, kein Seitenstreifen) */
.notice { margin-top: 26px; padding: 20px 24px; border: 1px solid var(--linie); background: var(--creme-warm); border-radius: 3px; max-width: calc(var(--measure) + 48px); }
.band-w .notice { background: var(--creme); }
.notice-title { font-family: var(--serif); font-size: 1.15rem; font-weight: 600; color: var(--petrol-700); margin-bottom: 6px; }
.notice p + p { margin-top: .7em; }
.band-p .notice, .band-d .notice { background: rgba(15, 49, 56, .55); border-color: var(--linie-dark); }
.band-p .notice-title, .band-d .notice-title { color: var(--champagner-hell); }

/* Tabelle (Normalwerte) */
.table-wrap { overflow-x: auto; margin-top: 22px; -webkit-overflow-scrolling: touch; }
.table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.table caption { text-align: left; font-family: var(--serif); font-size: 1.15rem; font-weight: 600; color: var(--petrol-700); padding-bottom: 10px; caption-side: top; }
.table th, .table td { text-align: left; padding: 12px 14px 12px 0; border-bottom: 1px solid var(--linie); vertical-align: top; }
.table th { font: 600 .72rem/1.5 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--champagner-text); border-bottom-color: var(--champagner); }
.table td:first-child, .table th:first-child { padding-left: 0; }
.table tbody th { font: 600 1rem/1.5 var(--sans); letter-spacing: 0; text-transform: none; color: var(--petrol-700); }
.band-p .table th, .band-p .table td, .band-d .table th, .band-d .table td { border-color: var(--linie-dark); }
.band-p .table th, .band-d .table th { color: var(--champagner); }
.band-p .table tbody th, .band-p .table caption, .band-d .table tbody th, .band-d .table caption { color: var(--on-dark); }

/* Zwei Spalten mit Haarlinie oben (Sammeltermine / Termine …) */
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(22px, 3vw, 44px); margin-top: 32px; }
.two-col > * { padding-top: 18px; border-top: 1px solid var(--linie); }
.two-col .ico { color: var(--champagner-text); margin-bottom: 10px; }
.two-col h3 { margin-bottom: 5px; }
.two-col p { font-size: .92rem; }
@media (max-width: 719px) { .two-col { grid-template-columns: 1fr; gap: 22px; } }
.band-p .two-col > *, .band-d .two-col > * { border-color: var(--linie-dark); }
.band-p .two-col .ico, .band-d .two-col .ico { color: var(--champagner); }
.band-p .two-col p, .band-d .two-col p { color: var(--on-dark-soft); }

/* Bildband mit einem Satz */
.claim { position: relative; overflow: hidden; isolation: isolate; aspect-ratio: 43 / 20; }  /* hoch genug für den ganzen Pferdekopf (Foto 25:12, Kopf rechts) */
.claim-bg { position: absolute; inset: 0; z-index: -2; }
.claim-bg img { width: 100%; height: 100%; object-fit: cover; object-position: 100% 0; }  /* Pferdekopf rechts, Ohren oben frei, unten bleibt Luft */
.claim .veil { position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(100deg, var(--petrol-800) 0, var(--petrol-800) min(60%, 620px),
    rgba(20, 64, 74, .55) min(82%, 860px), rgba(20, 64, 74, .3) 100%); }
.claim .inner { padding-block: clamp(60px, 8vw, 116px); }
.claim .satz { font-family: var(--serif); font-size: clamp(1.55rem, 3.1vw, 2.5rem); line-height: 1.22; color: var(--on-dark); max-width: 20ch; text-wrap: balance; }
.claim .note { font-size: .95rem; color: var(--champagner-hell); max-width: 40ch; margin-top: 18px; }
@media (max-width: 640px) {   /* mobil: Satz auf Petrol, darunter das Pferd ohne Schleier – im Schleier war es unkenntlich */
  .claim { aspect-ratio: auto; display: flex; flex-direction: column; }
  .claim-bg { position: static; display: block; order: 2; z-index: auto; }
  .claim-bg img { height: auto; aspect-ratio: 16 / 10; object-position: 100% 0; }
  .claim .veil { display: none; }
}

/* Wo ich hinkomme */
.gebiet-intro { margin-top: 18px; max-width: var(--measure); color: var(--on-dark-soft); }
.gebiet-info { margin-top: clamp(30px, 4vw, 48px); }

/* Über mich */
.about { display: grid; grid-template-columns: minmax(0, 1fr) clamp(200px, 28%, 300px); gap: clamp(24px, 4vw, 52px); align-items: start; }
.about-figure { position: sticky; top: 24px; }
@media (max-width: 980px) { .about-figure { top: calc(var(--bar-h) + 16px); } }
@media (max-width: 820px) { .about { grid-template-columns: 1fr; } .about-figure { position: static; order: -1; max-width: 360px; } }
.about-figure img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 3px; }
.about-text p + p { margin-top: 14px; }
.about-text p:first-of-type { margin-top: 12px; }

/* Kontakt: Notfall + Formular */
.kontakt { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 4vw, 64px); align-items: start; }
@media (max-width: 899px) { .kontakt { grid-template-columns: 1fr; } }
.kontakt .small { margin-top: 12px; }
.kontakt .vor { margin: 8px 0 22px; }
.meta { display: flex; gap: 14px; align-items: center; margin-top: 18px; font-size: .9rem; color: var(--on-dark-soft); }
.meta .ico { color: var(--champagner); width: 34px; height: 34px; }
.meta a { color: inherit; text-decoration: none; display: inline-flex; align-items: center; min-height: 48px; }
.meta a:hover { color: var(--champagner-hell); }
.kontakt-liste { margin-top: 22px; }

/* ── 11 · Umkreisradar ──────────────────────────────────────────────────── */
.radar { display: grid; grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr); gap: clamp(22px, 3vw, 44px); align-items: start; margin-top: clamp(26px, 3.5vw, 40px); }
@media (max-width: 899px) { .radar { grid-template-columns: minmax(0, 1fr); } }
.radar > * { min-width: 0; }
.radar__figure { margin: 0; container-type: inline-size; }
.radar__map { width: 100%; height: auto; display: block; font-family: var(--sans); }
.radar__area { fill: rgba(237, 229, 211, .045); }
.radar__ring { fill: none; stroke: var(--champagner-hell); stroke-opacity: .28; stroke-width: 1; }
.radar__ring--main { stroke: var(--champagner); stroke-opacity: .95; stroke-width: 1.6; }
.radar__ringlbl { fill: var(--champagner-hell); fill-opacity: .92; font-size: 20px; letter-spacing: .04em; }
.radar__ringlbl--main { fill: var(--champagner); fill-opacity: 1; font-weight: 600; }
.radar__rivers path { fill: none; stroke: var(--ivory-soft); stroke-opacity: .26; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.radar__rivers text { fill: var(--ivory-soft); fill-opacity: .92; font-family: var(--serif); font-style: italic; font-size: 18px; text-anchor: middle; }
.radar__towns .town--in circle { fill: var(--ivory-soft); }
.radar__towns .town--out circle { fill: none; stroke: var(--ivory-soft); stroke-opacity: .6; stroke-width: 1.2; }
.radar__towns .lbl { fill: var(--creme); }
.radar__towns .lbl-a { font-size: 21px; font-weight: 600; }
.radar__towns .lbl-b { font-size: 20px; font-weight: 500; }
.radar__towns .lbl-c { font-size: 18px; }
.radar__towns .town--out .lbl { fill: var(--ivory-soft); fill-opacity: .92; }
.radar__towns .town.is-hit .lbl { visibility: hidden; }
.radar__map.is-center-hit .radar__center .lbl { visibility: hidden; }
.radar__center .lbl { fill: var(--champagner); font-size: 21px; font-weight: 600; letter-spacing: .02em; }
.radar__halo { fill: var(--champagner); fill-opacity: .14; }
.radar__raute { fill: var(--petrol-900); stroke: var(--champagner); stroke-width: 2; stroke-linejoin: round; }
.radar__pin { fill: var(--champagner); }
.radar__legend text { fill: var(--ivory-soft); fill-opacity: .92; font-size: 20px; letter-spacing: .02em; }
.radar__legend .leg--in { fill: var(--ivory-soft); }
.radar__legend .leg--out { fill: none; stroke: var(--ivory-soft); stroke-opacity: .6; stroke-width: 1.2; }
.radar__legend .radar__note { font-family: var(--serif); font-style: italic; font-size: 20px; letter-spacing: 0; }
.radar__legend--mobile { display: none; }
.radar__marker { display: none; }
.radar__marker.is-visible { display: block; }
.radar__marker-pulse { fill: var(--champagner); fill-opacity: .3; transform-box: fill-box; transform-origin: 50% 50%; }
.radar__marker-dot { fill: var(--champagner); stroke: var(--petrol-900); stroke-width: 2; }
.radar__marker-bg { fill: var(--petrol-900); fill-opacity: .92; stroke: var(--champagner); stroke-width: 1; }
.radar__marker-lbl { fill: var(--creme); font-size: 18px; font-weight: 600; }
/* Karte neben dem Prüffeld ist schmal: kleinste Stufe ausblenden */
@container (max-width: 760px) { .radar__towns .lbl-c { display: none; } }
@media (max-width: 899px) { .radar__check { order: -1; } }   /* Prüfung vor der Karte: Ergebnis, dann Karte mit Marker */
@media (max-width: 599px) {
  .radar__figure { margin-inline: calc(-1 * var(--gut-x)); }   /* randlos, damit die Karte größer wird */
  .radar__towns .lbl-b, .radar__towns .lbl-c { display: none; }
  .radar__towns .town--minor { display: none; }
  .radar__towns .lbl-a, .radar__center .lbl { font-size: 32px; }
  .radar__ringlbl { font-size: 27px; }
  .radar__ringlbl--main { font-size: 29px; }
  .radar__rivers text { font-size: 25px; }
  .radar__legend--desktop { display: none; }
  .radar__legend--mobile { display: block; }
  .radar__legend--mobile text { font-size: 30px; }
  .radar__legend--mobile .radar__note { font-size: 30px; }
  .radar__marker-lbl { font-size: 32px; }
  .radar__towns .town--in circle { r: 7; }
  .radar__towns .town--out circle { r: 5; }
  .radar__ring--main { stroke-width: 2.4; }
  .radar__raute { stroke-width: 3; }
}

.radar__check { background: rgba(15, 49, 56, .5); border: 1px solid var(--linie-dark); border-radius: 3px; padding: clamp(20px, 2.6vw, 30px); }
.radar__title { margin-bottom: 14px; }
.radar__label { display: block; font: 500 .88rem/1.4 var(--sans); color: var(--champagner-hell); margin-bottom: 8px; }
.radar__intro { margin-bottom: 12px; color: var(--on-dark); }
.radar__row { display: flex; gap: 10px; flex-wrap: wrap; }
.radar__input { flex: 1 1 160px; width: 0; min-width: 0; min-height: 48px; font: 400 1rem/1.4 var(--sans); color: var(--on-dark); background: var(--petrol-900); border: 1px solid rgba(235, 221, 190, .6); border-radius: 4px; padding: 10px 14px; }
.radar__input::placeholder { color: var(--ivory-soft); opacity: .72; }
.radar__input:focus { outline: 2px solid var(--champagner); outline-offset: 2px; border-color: var(--champagner); }
.radar__btn { flex: 0 0 auto; padding-inline: 24px; }
.radar__hint { margin-top: 10px; color: var(--on-dark-soft); }
.radar__nojs { margin-top: 12px; }
.radar__result { margin-top: 18px; }
.radar__result:empty { margin-top: 0; }
.radar__result p { color: var(--on-dark); }
.radar__result b { display: block; font-family: var(--serif); font-size: 1.22rem; font-weight: 600; line-height: 1.3; color: var(--champagner-hell); margin-bottom: 6px; max-width: 30ch; }
.radar__result .is-unknown b, .radar__result .is-empty b { color: var(--on-dark); }
.radar__note { margin-top: 14px; color: var(--on-dark-soft); }
.radar__result .arrow-link { margin-top: 6px; }

/* ── 12 · Formulare ─────────────────────────────────────────────────────── */
.f { max-width: 640px; }
.f label { display: block; font: 500 .88rem/1.4 var(--sans); margin-bottom: 6px; color: var(--text); }
.f label .opt { font-weight: 400; color: var(--text-soft); }
.f input, .f select, .f textarea { width: 100%; font: 400 1rem/1.5 var(--sans); color: var(--text); background: var(--feld-hell); border: 1px solid rgba(26, 85, 96, .7); border-radius: 4px; padding: 11px 14px; min-height: 48px; transition: border-color .2s var(--ease); }
.f select { appearance: none; -webkit-appearance: none; background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-position: calc(100% - 20px) 55%, calc(100% - 14px) 55%; background-size: 6px 6px; background-repeat: no-repeat; padding-right: 40px; }
.f textarea { min-height: 128px; resize: vertical; }
.f input::placeholder, .f textarea::placeholder { color: var(--text-soft); opacity: 1; }
.f input:focus, .f select:focus, .f textarea:focus { outline: 2px solid var(--champagner-text); outline-offset: 2px; border-color: var(--champagner-text); }
.f-field { margin-bottom: 16px; }
.f .duo { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
@media (max-width: 620px) { .f .duo { grid-template-columns: 1fr; } }
.f .ok { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; align-items: start; margin-bottom: 20px; }
.f .ok input { width: 24px; height: 24px; min-height: 0; margin: 2px 0 0; accent-color: var(--champagner-text); }
.f .ok .f-error { grid-column: 2; }
.f .zustimmung { font-size: .82rem; font-weight: 400; line-height: 1.55; color: var(--text-soft); margin: 0; max-width: var(--measure); }
.f .zustimmung a { color: var(--petrol-700); text-decoration: underline; text-underline-offset: .15em; }
.f-error { font-size: .82rem; color: var(--champagner-text); font-weight: 600; margin-top: 6px; }
.f-error::before { content: "→ "; }
.f [aria-invalid="true"] { border-color: var(--champagner-text); border-width: 2px; }
.f-summary { font-weight: 600; color: var(--champagner-text); margin-bottom: 16px; padding: 12px 14px; border: 1px solid var(--champagner-text); border-radius: 3px; }
.f-after { margin-top: 14px; color: var(--text-soft); }
.f-success { margin-top: 18px; padding: 14px 16px; border: 1px solid var(--champagner); border-radius: 3px; color: var(--text); }
.f-success .tel { color: var(--petrol-700); }
/* dunkle Variante auf Petrol */
.f-dark label { color: var(--on-dark); }
.f-dark label .opt { color: var(--on-dark-soft); }
.f-dark input, .f-dark select, .f-dark textarea { background: var(--petrol-900); color: var(--on-dark); border-color: rgba(235, 221, 190, .6); }
.f-dark input::placeholder, .f-dark textarea::placeholder { color: var(--ivory-soft); opacity: .72; }
.f-dark select option { color: var(--text); background: var(--feld-hell); }
.f-dark input:focus, .f-dark select:focus, .f-dark textarea:focus { outline-color: var(--champagner); border-color: var(--champagner); }
.f-dark .ok input { accent-color: var(--champagner); }
.f-dark .zustimmung { color: var(--on-dark-soft); }
.f-dark .zustimmung a { color: var(--champagner-hell); }
.f-dark .f-error, .f-dark .f-summary { color: var(--champagner); border-color: var(--champagner); }
.f-dark [aria-invalid="true"] { border-color: var(--champagner); }
.f-dark .f-after { color: var(--on-dark-soft); }
.f-dark .f-success { color: var(--on-dark); }
.f-dark .f-success .tel, .f-dark .f-success a { color: var(--champagner-hell); }

/* ── 13 · Fuß (Petrol 900) ──────────────────────────────────────────────── */
.foot { background: var(--petrol-900); color: var(--on-dark-soft); padding: clamp(44px, 6vw, 72px) 0 26px; font-size: .9rem; line-height: 1.7; }
.foot-wrap { max-width: var(--maxw); margin: 0 auto; padding-inline: clamp(24px, 5vw, 64px); }
/* Der Fuß fluchtet mit dem Inhalt: gleiche Klammer, links um die Randspalte eingerückt */
@media (min-width: 981px) {
  /* width: 100% ist nötig – auto-Margins schalten in einem Spalten-Flexcontainer
     das Strecken ab, der Fuß schrumpfte sonst auf seine Inhaltsbreite. */
  .foot { width: 100%; max-width: var(--shell-max); margin-inline: auto; padding-left: var(--rail-w); }
  .foot-wrap { max-width: var(--inner-max); margin: 0; padding-inline: var(--gut-x); }
}
.foot-cols { display: grid; grid-template-columns: 1.1fr 1fr 1fr 1fr; gap: 34px; margin-bottom: 36px; }
@media (max-width: 860px) { .foot-cols { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .foot-cols { grid-template-columns: 1fr; } }
.foot-label { font: 600 .7rem/1.5 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--champagner-hell); margin-bottom: 12px; }
.foot p + p { margin-top: 10px; }
.foot ul { list-style: none; }
.foot li a { display: inline-block; min-height: 44px; padding-top: 6px; }
/* Sieben Einträge einspaltig bestimmten die Höhe des ganzen Fußes */
@media (min-width: 861px) { .foot nav ul { columns: 2; column-gap: 28px; } .foot nav li { break-inside: avoid; } }
.foot p a { display: inline-block; padding: 12px 0; margin: -12px 0; }
.foot a { color: var(--on-dark-soft); text-decoration: none; transition: color .2s var(--ease); }
.foot a:hover { color: var(--on-dark); }
.foot a[aria-current="page"] { color: var(--champagner-hell); }
.foot .seal { width: 132px; height: auto; margin-bottom: 14px; }
.foot-base { border-top: 1px solid var(--linie-dark); padding-top: 18px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; font-size: .8rem; color: var(--on-dark-soft); }

/* ── 14 · Mobil: aus der Randspalte wird eine Kopfleiste ────────────────── */
@media (max-width: 980px) {
  .shell { grid-template-columns: 1fr; background: var(--creme); }
  .rail { min-height: 0; max-height: none; overflow: visible; position: sticky; top: 0; z-index: var(--z-bar); border-bottom: 1px solid rgba(235, 221, 190, .25); }
  .rail-top { display: flex; align-items: center; gap: 12px; padding: 10px clamp(14px, 4vw, 28px); min-height: var(--bar-h); }
  .rail .mark { flex-direction: row; align-items: center; gap: 11px; min-width: 0; flex: 1 1 auto; }
  .rail .mark--mobil { display: flex; }
  .rail .mark--desk { display: none; }
  .rail .seal--klein { width: 44px; height: 44px; flex: none; }
  /* Rufnummer und Terminschaltfläche liegen im Menü wieder direkt im Fluss */
  .rail-fest { display: contents; }
  /* Im aufgeklappten Menü steht die Sprachwahl unter der Terminschaltfläche */
  .rail .sprachen { order: 9; margin: 2px 0 4px; }
  .rail .name { font-size: 1rem; line-height: 1.15; }
  .rail .name-sub { font-size: .55rem; letter-spacing: .14em; margin-top: 2px; }
  /* Die Nummer ist die Hauptaktion (gefüllt), das Menü die Kontur */
  .rail .tel-kurz { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; min-height: 48px; padding: 0 16px; border-radius: 999px; text-decoration: none; background: var(--champagner); border: 1.5px solid var(--champagner); color: var(--petrol-900); font: 600 .86rem/1 var(--sans); white-space: nowrap; flex: none; }
  .rail .tel-kurz .ico { color: currentColor; }
  .rail .tel-kurz:focus-visible { outline: 2px solid var(--creme); outline-offset: 3px; box-shadow: 0 0 0 5px var(--petrol-800); }
  .rail .menu { display: inline-flex; align-items: center; gap: 9px; min-height: 48px; padding: 0 15px; border-radius: 999px; cursor: pointer; background: transparent; border: 1.5px solid rgba(235, 221, 190, .6); color: var(--champagner-hell); font: 600 .74rem/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; flex: none; }
  .rail .menu .balken { position: relative; display: block; width: 18px; height: 12px; background: linear-gradient(currentColor, currentColor) left center/18px 1.5px no-repeat; }
  .rail .menu .balken::before, .rail .menu .balken::after { content: ""; position: absolute; left: 0; width: 18px; height: 1.5px; background: currentColor; transition: transform .28s var(--ease); }
  .rail .menu .balken::before { top: 0; }
  .rail .menu .balken::after { top: 10.5px; }
  .rail .menu[aria-expanded="true"] .balken { background-image: none; }
  .rail .menu[aria-expanded="true"] .balken::before { transform: translateY(5.2px) rotate(45deg); }
  .rail .menu[aria-expanded="true"] .balken::after { transform: translateY(-5.3px) rotate(-45deg); }

  /* Menü als Overlay unter der Leiste (verschiebt nichts → kein CLS) */
  .rail-body { display: none; position: absolute; left: 0; right: 0; top: 100%; background: var(--petrol-800); border-bottom: 1px solid rgba(235, 221, 190, .25); box-shadow: 0 24px 40px -20px rgba(15, 49, 56, .6); max-height: calc(100vh - var(--bar-h)); max-height: calc(100dvh - var(--bar-h)); overflow: auto; }
  .rail-body[data-offen] { display: block; }
  .rail-inner { gap: 20px; padding: 14px clamp(14px, 4vw, 28px) 24px; }
  .rail .tel-block { display: none; }
  .rail-dl { margin-top: 0; }
  .nav-haupt > li > a { min-height: 48px; }
}
@media (max-width: 520px) {
  .rail .name-sub { display: none; }
}
@media (max-width: 480px) {
  /* Die Nummer bleibt lesbar; die Wortmarke weicht, die Bildmarke bleibt. */
  .rail .name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
  .rail .mark { gap: 0; }
  .rail .tel-kurz { padding: 0 14px; font-size: .84rem; }
  .rail .menu { padding: 0 13px; }
}
@media (max-width: 359px) {
  .rail .menu .wort { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .rail .menu { padding: 0 14px; gap: 0; }
}

/* ── 15 · Bewegung: eine Choreografie beim Laden, Inhalt ohne sie sichtbar ─ */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
  @keyframes rise { from { opacity: .4; transform: translateY(12px); } to { opacity: 1; transform: none; } }
  @keyframes settle { from { transform: scale(1.02); } to { transform: none; } }
  @keyframes menu-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
  @keyframes ping { 0% { transform: scale(.4); fill-opacity: .55; } 100% { transform: scale(1.6); fill-opacity: 0; } }
  @keyframes rings-in { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: none; } }
  /* Auftakt: Kicker, Lead und Entitätszeile heben sich leicht; H1 und Bild werden nicht ausgeblendet (LCP) */
  .page-index .anim { animation: rise .6s var(--ease) both; }
  .page-index .anim-f img { animation: settle 1.2s var(--ease) both; }
  .page-index .s1 { animation-delay: .05s; }
  .page-index .s2 { animation-delay: .1s; }
  .page-index .s3 { animation-delay: .15s; }
  .rail-body[data-offen] { animation: menu-in .3s var(--ease) both; }
  .radar__marker.is-visible .radar__marker-pulse { animation: ping 1.4s var(--ease) 1 both; }
  .radar__rings { transform-box: fill-box; transform-origin: 50% 50%; }
  .radar.is-armed .radar__rings { opacity: 0; }
  .radar.is-armed.is-seen .radar__rings { animation: rings-in 1.1s var(--ease) both; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* ── 16 · Druck ─────────────────────────────────────────────────────────── */
/* ── Einwilligung (Google Analytics) ──────────────────────────────────────
   Creme-Karte mit Haarlinie, unten fixiert, von js/consent.js erzeugt. Beide
   Knöpfe gleich gestaltet – „Ablehnen" darf nicht schwächer aussehen als
   „Zustimmen". Der Fußknopf „Cookie-Einstellungen" öffnet sie erneut. */
.consent { position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-overlay); padding: 0 12px 12px; pointer-events: none; }
.consent[hidden] { display: none; }
.consent-in { pointer-events: auto; max-width: 980px; margin: 0 auto; background: var(--creme); color: var(--text);
  border: 1px solid var(--champagner); border-radius: 3px; box-shadow: 0 10px 40px rgba(15, 49, 56, .35);
  padding: 20px clamp(18px, 3vw, 28px); display: grid; gap: 16px 32px; align-items: center; }
.consent-in:focus { outline: none; }
@media (min-width: 760px) { .consent-in { grid-template-columns: minmax(0, 1fr) auto; } }
.consent-titel { font: 600 1.3rem/1.2 var(--serif); color: var(--petrol-700); margin: 0 0 6px; }
.consent-text p:last-child { font-size: .88rem; line-height: 1.6; max-width: 70ch; margin: 0; }
.consent a { color: var(--petrol-700); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .18em; }
.consent-knoepfe { display: flex; flex-wrap: wrap; gap: 10px; }
.consent-btn { flex: 1 1 140px; min-height: 48px; padding: 0 22px; border: 1px solid var(--petrol-700); border-radius: 2px;
  background: var(--petrol-700); color: var(--creme); font: 600 .78rem/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; cursor: pointer; }
.consent-btn:hover { background: var(--petrol-900); border-color: var(--petrol-900); }
.consent-btn:focus-visible { outline: 2px solid var(--champagner-text); outline-offset: 3px; }
.linkbtn { display: inline-block; min-height: 44px; padding: 6px 0 0; border: 0; background: none; cursor: pointer; text-align: left;
  font: inherit; color: inherit; text-decoration: none; transition: color .2s var(--ease); }
.linkbtn[hidden] { display: none; }
.foot .linkbtn { color: var(--on-dark-soft); }
.foot .linkbtn:hover { color: var(--on-dark); }
.prose .linkbtn.inline { display: inline; min-height: 0; padding: 0; color: var(--petrol-700); text-decoration: underline;
  text-decoration-color: currentColor; text-decoration-thickness: 2px; text-underline-offset: .18em; }
.prose .linkbtn.inline:hover { color: var(--champagner-text); }

@media print {
  :root { --creme: #fff; --creme-warm: #fff; }
  body { background: #fff; color: #000; font-size: 11pt; line-height: 1.5; }
  .shell { display: block; background: none; }
  .consent, .linkbtn, .rail, .skip, .sprite, .claim-bg, .veil, .radar__check, .f, .foot .seal, .hero-figure, .about-figure, .kontakt-form, .radar__note, .more { display: none !important; }
  .inner { padding: 0 0 18pt; max-width: none; }
  .band-p, .band-d, .band-w, .band-c, .claim { background: none !important; color: #000; }
  .band-p h2, .band-d h2, .band-p h3, .band-d h3, .band-p p, .band-d p, h1, h2, h3, .lead, .steps li b, .dl dt, .timeline-jahr, .notice-title { color: #000 !important; }
  .notruf { background: none; border: 1pt solid #000; padding: 10pt 12pt; margin: 8pt 0 14pt; page-break-inside: avoid; }
  .notruf .ico { display: none; }
  .tel, .notruf-tel { color: #000 !important; font-size: 20pt; }
  .tel.gross { font-size: 30pt; }
  .page-notfall .tel.gross { font-size: 40pt; }
  .page-notfall h1 { font-size: 26pt; }
  .radar__map { max-width: 12cm; }
  .radar__rings { opacity: 1 !important; animation: none !important; }
  .radar__map * { fill: #000; stroke: #000; }
  .radar__area, .radar__halo { fill: none; }
  .steps li, .dl > div, .faq-item, .timeline li, .checklist li { page-break-inside: avoid; border-color: #999; }
  .faq-item summary::after { display: none; }
  details > summary { list-style: none; }
  .foot { background: none; color: #000; padding: 12pt 0 0; border-top: 1pt solid #000; }
  .foot-label, .foot a { color: #000; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; }
}

/* ===== 10-seiten-b.css ===== */
/* ── Unterseiten B · leistungen.html · praxis.html · kontakt.html ─────────
   Ergänzungen zu style.css (wird vom Build angehängt). Nur Tokens aus
   style.css, keine neuen Farben. Neue Klassen: .h-ico, .runin, .sprung,
   .leistung, .themen/.thema, .two-col--h2, .abschluss, .linien, .pubs,
   .warum, .anfrage-grid, .checklist--2col, .siegel-schluss.
   ───────────────────────────────────────────────────────────────────────── */

/* Überschrift mit Icon davor (Leistungs-Themen) */
.h-ico { display: flex; align-items: center; gap: 14px; margin-bottom: 10px; }
.h-ico h2 { margin-bottom: 0; }
.h-ico .ico { color: var(--petrol-700); }
.band-p .h-ico .ico, .band-d .h-ico .ico { color: var(--champagner); }
.h-ico + .lead, .h-ico + p { margin-top: 8px; }
.h-ico + .prose { margin-top: 14px; }
@media (max-width: 480px) { .h-ico { gap: 12px; } .h-ico .ico { width: 40px; height: 40px; } }

/* Prosa-Container, die mit einer H2 beginnen (inner.prose, about-text.prose) */
.prose > h2:first-child { margin-top: 0; }
.prose .linien, .prose .pubs { padding-left: 0; }
.prose .linien li + li, .prose .pubs li + li { margin-top: 0; }

.prose a.arrow-link:not(.act):not(.tel) { text-decoration: none; }

/* Run-in-Labels („Was das ist.“) in Petrol, damit das Auge die Gliederung findet */
.runin p > b:first-child { color: var(--petrol-700); }
.band-p .runin p > b:first-child, .band-d .runin p > b:first-child { color: var(--champagner-hell); }
address { font-style: normal; }

/* Sprungliste: schlichte Liste mit Chevrons, drei Spalten ab 900 px */
.sprung { margin-top: 14px; }
.sprung ol { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(5, auto); grid-auto-flow: column; gap: 0 clamp(20px, 3vw, 44px); border-top: 1px solid var(--linie); }
/* Sprungziele auf derselben Seite: keine Unterstreichung (die Zeile ist das Ziel),
   Winkel nach unten – nach rechts zeigt er nur bei Seitenwechseln. Die Spezifität
   muss über der allgemeinen Textlink-Regel liegen (`main li a`). */
main .sprung a, .sprung a { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; padding: 8px 0; border-bottom: 1px solid var(--linie); text-decoration: none; color: var(--text); font-size: .95rem; line-height: 1.35; transition: color .2s var(--ease), padding-left .2s var(--ease); }
.sprung a::after { content: ""; width: 7px; height: 7px; flex: none; margin-bottom: 3px; border-right: 1.6px solid var(--champagner-text); border-bottom: 1.6px solid var(--champagner-text); rotate: 45deg; transition: translate .2s var(--ease); }
.sprung a:hover::after { translate: 0 3px; }
.sprung a:hover { color: var(--champagner-text); padding-left: 4px; }
@media (max-width: 899px) { .sprung ol { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(7, auto); } }
@media (max-width: 559px) { .sprung ol { grid-template-columns: 1fr; grid-template-rows: none; grid-auto-flow: row; } }

/* Leistungs-Zeile: Titel links (klebt beim Lesen), Text rechts */
.leistungen { margin-top: clamp(22px, 3vw, 36px); }
/* Die Textspalte ist genau so breit wie der Text (--measure) und sitzt an der
   Außenkante; die Titelspalte nimmt den Rest. Vorher war die Spalte 832 px breit
   und der Text darin 528 px – rechts blieben 304 px leer, während die Trennlinie
   bis zum Rand lief. Das war der Eindruck „der Text geht nicht bis zum Rand". */
.leistung { display: grid; grid-template-columns: minmax(11rem, 14rem) minmax(0, var(--measure)); gap: 10px clamp(28px, 4vw, 56px); padding: clamp(24px, 3vw, 40px) 0; border-top: 1px solid var(--linie); max-width: calc(14rem + clamp(28px, 4vw, 56px) + var(--measure)); }
.leistung:last-child { padding-bottom: clamp(8px, 1.5vw, 16px); }
.leistung-kopf { align-self: start; }
.leistung-kopf h3 { font-size: clamp(1.3rem, 1.8vw, 1.5rem); line-height: 1.18; }
.leistung .prose { max-width: var(--measure); }   /* 68ch waren ≈ 92 Zeichen */
.leistung .more { margin-top: 16px; }
@media (min-width: 981px) { .leistung-kopf { position: sticky; top: 28px; } }
@media (max-width: 899px) { .leistung { grid-template-columns: 1fr; gap: 8px; } }

/* Mehrere Themen auf einer Fläche: engere Innenabstände, Zierlinie dazwischen */
.themen > .thema > .inner { padding-top: clamp(30px, 3.6vw, 56px); padding-bottom: clamp(30px, 3.6vw, 56px); }
.themen > .thema:first-child > .inner { padding-top: var(--gut-y); }
.themen > .thema:last-child > .inner { padding-bottom: var(--gut-y); }
.themen > .zier { margin-left: 0; }

.nach-liste { margin-top: 22px; }
.linklist li + li { margin-top: 6px; }

/* Zwei gleichrangige Themen nebeneinander auf Petrol (Sammeltermine · Kliniken) */
.two-col--h2 { margin-top: 0; }
.two-col--h2 h2 { font-size: clamp(1.5rem, 2.4vw, 1.9rem); margin-bottom: 8px; }
.two-col--h2 p + p { margin-top: .8em; }
.two-col--h2 .more { margin-top: 18px; }

/* Abschluss einer Seite: Hauptaktion + Rufnummer daneben */
.abschluss { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 32px; margin-top: 28px; }
.abschluss .tel { font-size: 1.55rem; color: var(--petrol-700); padding: 6px 0; }
.abschluss .tel:hover { color: var(--champagner-text); }
.band-p .abschluss .tel { color: var(--champagner-hell); }
.band-p .abschluss .tel:hover { color: var(--champagner); }

/* Listen mit Haarlinien (Arbeitsweise, Fahrzeug) */
.linien { list-style: none; margin-top: 22px; border-top: 1px solid var(--linie); }
.linien li { padding: 14px 0; border-bottom: 1px solid var(--linie); max-width: var(--measure); }   /* 66ch waren ≈ 90 Zeichen */
.linien li > b:first-child { color: var(--petrol-700); }
.linien--2col { display: grid; grid-template-columns: 1fr 1fr; gap: 0 clamp(28px, 4vw, 64px); }
.linien--2col li { padding: 18px 0; font-size: .95rem; }
.linien--2col li > b:first-child { display: block; font-family: var(--serif); font-size: 1.12rem; margin-bottom: 3px; letter-spacing: -.005em; }
@media (max-width: 899px) { .linien--2col { grid-template-columns: 1fr; } }

/* Publikationen */
.pubs { list-style: none; margin-top: 22px; border-top: 1px solid var(--linie); max-width: var(--measure); }
.pubs li { padding: 14px 0; border-bottom: 1px solid var(--linie); font-size: .95rem; }
.pubs cite { font-style: italic; }
.pubs .pub-titel { color: var(--petrol-700); font-weight: 600; }
.pubs + p { margin-top: 18px; }

/* Zeitleiste: Station in Garamond als Zeile, Halbsatz darunter */
.timeline-text b { display: block; font-family: var(--serif); font-size: 1.12rem; line-height: 1.3; letter-spacing: -.005em; }
.timeline-sub { display: block; margin-top: 3px; font-size: .95rem; max-width: var(--measure); }
.timeline-text b { max-width: var(--measure); }

/* Themenband auf leistungen.html: volle Breite des Inhaltsbereichs, flacher
   Ausschnitt. Es trennt die Themen und bleibt ruhig – kein Kartenraster. */
.themenbild { margin: clamp(22px, 3vw, 34px) 0 clamp(20px, 2.6vw, 32px); }
.themenbild img { width: 100%; height: auto; aspect-ratio: 16 / 5; object-fit: cover; border-radius: 2px; }
@media (max-width: 700px) { .themenbild img { aspect-ratio: 16 / 7; } }
.themen .themenbild, .leistungen + .themenbild { margin-top: clamp(18px, 2.4vw, 28px); }

/* Über mich (praxis): breitere Bildspalte; Foto julieta-pferd kommt fertig im 4:5-Schnitt */
.page-praxis .about { grid-template-columns: minmax(0, 1fr) clamp(200px, 32%, 320px); }
@media (max-width: 820px) {
  .page-praxis .about { grid-template-columns: 1fr; }
}

/* Warum eine eigene Praxis: typografisches Stück auf Petrol */
.warum .satz { font-family: var(--serif); font-size: clamp(1.55rem, 3.1vw, 2.5rem); font-weight: 600; line-height: 1.22; color: var(--on-dark); max-width: 22ch; text-wrap: balance; margin-top: 30px; letter-spacing: -.01em; }
.warum .satz + p { margin-top: 18px; max-width: var(--measure); }
.warum .mitte { font-family: var(--serif); font-size: clamp(1.2rem, 1.9vw, 1.5rem); line-height: 1.3; color: var(--champagner-hell); margin-top: 30px; padding-top: 22px; border-top: 1px solid var(--linie-dark); max-width: 30ch; }
.warum .inner > p + p { margin-top: 1em; }

/* Schluss mit Vollsiegel */
.siegel-schluss { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(24px, 4vw, 48px); align-items: start; }
.siegel-schluss img { width: clamp(110px, 12vw, 150px); height: auto; }
.siegel-schluss .schluss { margin-top: 0; padding-top: 0; border-top: 0; }
@media (max-width: 560px) { .siegel-schluss { grid-template-columns: 1fr; } }

/* Kontakt: Kontaktwege, Formular neben Einleitung, Checkliste zweispaltig */
.dl-plain .tel.gross { margin: -4px 0 4px; }
.dl-plain dd p + p, .dl-plain dd address + p { margin-top: 6px; }
.anfrage-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 4vw, 64px); align-items: start; }
.anfrage-text p + p { margin-top: 14px; }
.anfrage-text .more { margin-top: 22px; }
@media (max-width: 899px) { .anfrage-grid { grid-template-columns: 1fr; gap: 26px; } }
.checklist--2col { columns: 2; column-gap: clamp(28px, 4vw, 64px); }
.checklist--2col li { font-size: .95rem; break-inside: avoid; }
@media (max-width: 899px) { .checklist--2col { columns: 1; } }
.notfall-kurz .prose + .tel.gross { margin-top: 26px; }
.notfall-kurz h2 + .tel.gross { margin-top: 6px; }
.notfall-kurz .more { margin-top: 18px; }

/* Sprungziele unter der mobilen Kopfleiste freihalten (Sprungliste, Links von der Startseite).
   Gehört eigentlich global in style.css (html { scroll-padding-top }) – siehe Änderungswunsch. */
@media (max-width: 980px) {
  .page-leistungen [id], .page-praxis [id], .page-kontakt [id] { scroll-margin-top: calc(var(--bar-h) + 12px); }
}
@media (min-width: 981px) {
  .page-leistungen [id], .page-praxis [id], .page-kontakt [id] { scroll-margin-top: 12px; }
}

/* Druck */
@media print {
  .sprung, .abschluss .act, .siegel-schluss img { display: none !important; }
  .leistung { grid-template-columns: 1fr; page-break-inside: avoid; border-color: #999; }
  .leistung-kopf { position: static; }
  .linien li, .pubs li, .sprung a { border-color: #999; }
  .warum .satz, .warum .mitte, .runin p > b:first-child, .linien li > b:first-child, .pubs .pub-titel { color: #000 !important; }
}


/* ===== 20-seiten-c.css ===== */
/* ── Seiten C: notfall · einzugsgebiet · impressum · datenschutz ─────────
   Wird vom Build an style.css angehängt. Nur Tokens aus style.css. */

/* Platzhalter in eckigen Klammern (Impressum, Datenschutz): dezent im
   Champagner-Textton, damit Julieta/Eike sie beim Gegenlesen finden. */
.platzhalter { color: var(--champagner-text); font-weight: 500; text-decoration: underline dotted; text-decoration-color: var(--champagner); text-underline-offset: .2em; text-decoration-thickness: 1px; }
.prose address { font-style: normal; }
.prose .rechte { margin-top: .5em; }

/* ── notfall.html · Aushang für die Stallgasse ─────────────────────────── */
.page-notfall .hero--sub h1 { margin-bottom: 0; }
.page-notfall .hero--sub .inner { padding-bottom: clamp(28px, 3.4vw, 48px); }
/* Die Nummer: ≥ 56 px hoch schon bei 375 px, auf dem Desktop riesig */
.page-notfall .notfall-nr { display: block; font-size: clamp(2.7rem, 14vw, 5.6rem); line-height: 1.1; margin: 6px 0 12px; letter-spacing: -.015em; color: var(--petrol-700); }
.page-notfall .notfall-nr:hover { color: var(--champagner-text); }
.notfall-regel { font-size: var(--step-lead); color: var(--text); max-width: var(--measure); margin-top: 4px; }
.notfall-act { margin-top: 22px; }
.notfall-act .act { width: 100%; max-width: 400px; }
.notfall-klein { color: var(--text-soft); margin-top: 20px; max-width: var(--measure); }
.notfall-intro { margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--linie); max-width: var(--measure); font-weight: 600; color: var(--petrol-700); }
/* Symptomverzeichnis: eine Zeile je Notfall statt neun Links in einem Fließsatz –
   in der Situation, in der jemand sein Symptom sucht, ist das die scanbare Form.
   Sprungziele auf derselben Seite tragen den Winkel nach unten, keine Unterstreichung. */
.notfall-liste { list-style: none; margin-top: 10px; display: grid; grid-template-columns: 1fr 1fr; gap: 0 clamp(16px, 2.4vw, 40px); max-width: var(--measure-weit); }
@media (max-width: 620px) { .notfall-liste { grid-template-columns: 1fr; } }
.notfall-liste a { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 44px;
  padding: 4px 8px 4px 0; text-decoration: none !important; color: var(--petrol-700); font-weight: 500;
  border-bottom: 1px solid var(--linie); transition: color .2s var(--ease), background-color .2s var(--ease); }
.notfall-liste a::after { content: ""; width: 7px; height: 7px; flex: none; margin-bottom: 3px;
  border-right: 1.8px solid var(--champagner-text); border-bottom: 1.8px solid var(--champagner-text); rotate: 45deg;
  transition: translate .2s var(--ease); }
.notfall-liste a:hover { color: var(--champagner-text); background: var(--creme-warm) !important; box-shadow: none !important; }
.notfall-liste a:hover::after { translate: 0 3px; }
.notfall-unsicher { margin-top: 18px; max-width: var(--measure); }

/* Wiederholte Nummer: kleine Zeile über jedem Notfalltyp (und einmal vor allen) */
.ruf { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; font-size: .95rem; color: var(--text); margin-bottom: 10px; }
.ruf .tel { font-size: 1.4rem; color: var(--petrol-700); padding: 10px 0; margin: -10px 0; }
.ruf .tel:hover { color: var(--champagner-text); }
.ruf--gross { margin: 8px 0 0; padding-top: 22px; }
.ruf--gross .tel { font-size: clamp(1.7rem, 3vw, 2.2rem); }
.band-p .ruf { color: var(--on-dark); }
.band-p .ruf .tel { color: var(--champagner-hell); }
.band-p .ruf .tel:hover { color: var(--champagner); }

/* Allgemeiner Absatz „In jedem Fall“ */
.notfall-allgemein { margin-top: 18px; max-width: var(--measure); }
.notfall-allgemein b { color: var(--petrol-700); }

/* Notfalltypen: eine ruhige Creme-Strecke, Haarlinie zwischen den Blöcken */
.typ .inner { position: relative; padding-block: clamp(26px, 3.2vw, 46px); }
.typ .inner::before { content: ""; position: absolute; left: var(--gut-x); right: var(--gut-x); top: 0; border-top: 1px solid var(--linie); }
.typ h2 { margin-bottom: 6px; }
.typ .erkennen { margin-top: 10px; max-width: var(--measure); }
.typ .erkennen b { color: var(--petrol-700); }

/* Handlungsliste mit Raute (Siegelmotiv), keine Häkchen, keine Icons */
.hilfe { list-style: none; margin-top: 16px; max-width: var(--measure); }
.hilfe li { position: relative; padding: 11px 0 11px 24px; border-top: 1px solid var(--linie); }
.hilfe li:first-child { border-top: 0; padding-top: 6px; }
.hilfe li::before { content: ""; position: absolute; left: 2px; top: 1.25em; width: 7px; height: 7px; rotate: 45deg; background: var(--champagner); }
.hilfe li:first-child::before { top: .95em; }

/* Normalwerte auf Petrol */
.werte .table { max-width: var(--measure); }
.werte h3 { margin-top: 34px; }
.werte .dl-plain { margin-top: 12px; max-width: var(--measure); }
.werte .dl-plain dd { color: var(--on-dark); }
.werte .small { margin-top: 18px; max-width: var(--measure); }

/* Abschluss (Petrol) */
.checklist .tel { font-size: 1.15rem; color: var(--petrol-700); }
.notfall-schluss .tel.gross { font-size: clamp(2.4rem, 5vw, 3.6rem); margin: 14px 0 10px; }
.notfall-schluss p { max-width: var(--measure); }
.notfall-schluss .small { margin-top: 12px; }

/* ── einzugsgebiet.html ───────────────────────────────────────────────── */
.gebiet-klein { margin-top: 18px; }
.termin-band .lead { margin-bottom: 22px; }
.termin-band .ruf { margin-top: 22px; }

/* ── Druck ────────────────────────────────────────────────────────────── */
@media print {
  .page-notfall .notfall-act, .notfall-schluss .small { display: none !important; }
  .page-notfall .notfall-nr { font-size: 44pt !important; margin: 4pt 0 8pt; }
  .page-notfall .hero--sub .inner { padding-bottom: 8pt; }
  .notfall-regel { font-size: 12pt; color: #000; }
  .notfall-klein, .notfall-allgemein { color: #000; }
  .ruf { font-size: 10pt; color: #000; margin-bottom: 2pt; }
  .ruf .tel { font-size: 14pt !important; color: #000 !important; }
  .ruf--gross { border-color: #999; }
  .typ { page-break-inside: avoid; }
  .typ .inner { padding-block: 10pt; }
  .typ .inner::before { border-color: #999; }
  .typ h2 { font-size: 16pt; }
  .typ .erkennen b { color: #000; }
  .hilfe li { border-color: #999; padding: 4pt 0 4pt 16pt; page-break-inside: avoid; }
  .hilfe li::before { background: #000; top: .9em; }
  .werte .dl-plain dd, .dl-plain dt { color: #000; }
  .notice { background: none; border-color: #999; }
  .platzhalter { color: #000; }
  .page-notfall h2, .page-notfall h3 { page-break-after: avoid; break-after: avoid; }
  .page-notfall .table-wrap, .page-notfall .notice, .notfall-schluss, .page-notfall .checklist li, .page-notfall .dl-plain > div { page-break-inside: avoid; break-inside: avoid; }
  .page-notfall .table th, .page-notfall .table td, .page-notfall .dl-plain dd, .page-notfall .checklist li b, .page-notfall .faq-body, .page-notfall .band-p .small, .page-notfall .notfall-schluss p { color: #000 !important; }
  .page-notfall .table th { border-bottom-color: #000; }
  /* Sicherheitsnetz: geschlossene <details> auch dann sichtbar, wenn beforeprint nicht feuert */
  details::details-content { content-visibility: visible; }
}

/* Link in einer FAQ-Antwort (einzugsgebiet: „Wo ich hinkomme“ → PLZ-Prüfung) */
.page-einzugsgebiet .faq-body a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .18em; text-decoration-color: var(--champagner); }
.page-einzugsgebiet .faq-body a:hover { text-decoration-color: currentColor; }

/* Leseseiten: erste H2 direkt nach dem Bandanfang ohne Extra-Abstand; Weiter-Link ohne Unterstrich */
.page-impressum .prose > h2:first-child, .page-datenschutz .prose > h2:first-child, .page-notfall .prose > h2:first-child { margin-top: 0; }
.page-impressum .prose .arrow-link, .page-datenschutz .prose .arrow-link { text-decoration: none; }
.page-impressum .prose .tel, .page-datenschutz .prose .tel { font-size: 1.15rem; color: var(--petrol-700); }