/* ---------- Schriften ----------
   Vom eigenen Server ausgeliefert. Kein Aufruf bei Google, damit beim
   Seitenaufruf keine IP-Adresse der Besucher an Dritte geht.
   Zeichenumfang auf Latein beschränkt; font-display:swap zeigt den Text
   sofort in der Ersatzschrift und tauscht ihn nach dem Laden aus. */
@font-face{font-family:"Newsreader";src:url("../fonts/newsreader-300.woff2") format("woff2");
  font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:"Newsreader";src:url("../fonts/newsreader-400.woff2") format("woff2");
  font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Newsreader";src:url("../fonts/newsreader-500.woff2") format("woff2");
  font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Newsreader";src:url("../fonts/newsreader-600.woff2") format("woff2");
  font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Sans";src:url("../fonts/ibm-plex-sans-300.woff2") format("woff2");
  font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Sans";src:url("../fonts/ibm-plex-sans-400.woff2") format("woff2");
  font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Sans";src:url("../fonts/ibm-plex-sans-500.woff2") format("woff2");
  font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Sans";src:url("../fonts/ibm-plex-sans-600.woff2") format("woff2");
  font-weight:600;font-style:normal;font-display:swap}

/* =========================================================================
   viva.coach – Designsystem
   Palette: Papier (warmes Gebrochenweiß) · Seetiefe (Nachtblau) · Sand
            · Stein · Burgunder (sparsamer Akzent)
   Typo:    Newsreader (Display, Serif) · IBM Plex Sans (Text, Utility)
   Signatur:"Der Rahmen" – doppelte Haarlinie um zentrale Module.
   ========================================================================= */
:root{
  --paper:#FBF8F4;
  --paper-2:#F3EDE4;
  --sand:#E3D9CB;
  --ink:#0F212B;
  --lake:#173A4B;
  --lake-2:#2A5F76;
  --stone:#5D6A70;
  --burgundy:#6B2637;
  --line:rgba(15,33,43,.16);
  --line-soft:rgba(15,33,43,.09);

  --serif:"Newsreader",Georgia,"Times New Roman",serif;
  --sans:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif;

  --shell:1200px;
  --gut:clamp(20px,5vw,40px);
  --sp-section:clamp(36px,5vw,70px);
  --radius:2px;
  --ease:cubic-bezier(.22,.61,.36,1);
}
/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--sans);font-weight:300;font-size:clamp(16.5px,1.05vw,18px);
  line-height:1.68;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,video{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3,h4{margin:0;font-family:var(--serif);font-weight:400;letter-spacing:-.012em;line-height:1.12}
p{margin:0 0 1.05em}
ul{margin:0;padding:0}
li{list-style:none}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--lake-2);outline-offset:3px}
.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:-999px;top:0;z-index:200;background:var(--ink);color:var(--paper);padding:12px 18px}
.skip:focus{left:12px;top:12px}
/* ---------- Layout ---------- */
.shell{width:min(100% - 2*var(--gut),var(--shell));margin-inline:auto}
.section{padding-block:var(--sp-section)}
.section--tight{padding-block:clamp(52px,7vw,88px)}
.section--tint{background:var(--paper-2)}
.section--dark{background:var(--lake);color:#EFE9E1}
.section--dark h2,.section--dark h3{color:#FBF8F4}
.section--dark a{color:#EFE9E1}
.measure{max-width:63ch}
.measure--narrow{max-width:52ch}
.center{margin-inline:auto;text-align:center}
.center .measure{margin-inline:auto}
/* ---------- Typo-Skala ---------- */
.d1{font-size:clamp(2.5rem,6.4vw,4.6rem);line-height:1.03;letter-spacing:-.02em}
.d2{font-size:clamp(2rem,4vw,3.15rem);line-height:1.08}
.d3{font-size:clamp(1.45rem,2.3vw,2.05rem)}
.d4{font-size:clamp(1.15rem,1.5vw,1.35rem);line-height:1.3}
.lead{font-size:clamp(1.12rem,1.6vw,1.32rem);line-height:1.55;color:#22323A;font-weight:300}
.small{font-size:.86rem;line-height:1.55}
.muted{color:var(--stone)}
em,.it{font-style:italic}
/* Das hidden-Attribut muss jede display-Angabe schlagen. Klassen wie
   .eyebrow, .btn-row oder .choice setzen display:flex und wuerden ein
   ausgeblendetes Element sonst weiterhin anzeigen - die Browservorgabe
   fuer [hidden] verliert gegen jede Autorenregel. */
[hidden]{display:none !important}
.eyebrow{display:flex;align-items:center;gap:.7em;margin:0 0 1.5rem;
  font-family:var(--sans);font-size:.72rem;font-weight:500;letter-spacing:.18em;
  text-transform:uppercase;color:var(--lake-2)}
.eyebrow::before{content:"";width:7px;height:7px;background:currentColor;flex:none}
.section--dark .eyebrow{color:#A9C3CE}
.center .eyebrow{justify-content:center}
.pull{font-family:var(--serif);font-size:clamp(1.25rem,2.1vw,1.72rem);line-height:1.34;
  font-weight:300;color:var(--lake);border-left:2px solid currentColor;
  padding-left:clamp(18px,3vw,32px);margin:clamp(26px,3.5vw,40px) 0;max-width:40ch}
.section--dark .pull{color:#F4EFE8}
[id]{scroll-margin-top:104px}
.rule{height:1px;background:var(--line-soft);border:0;margin:0}
/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.6em;
  font-family:var(--sans);font-size:.94rem;font-weight:500;letter-spacing:.01em;
  padding:16px 30px;border:1px solid transparent;border-radius:var(--radius);
  text-decoration:none;cursor:pointer;transition:background .25s var(--ease),color .25s var(--ease),border-color .25s var(--ease),transform .25s var(--ease)}
.btn--primary{background:var(--lake);color:#FBF8F4}
.btn:disabled,.btn[disabled]{opacity:.45;cursor:not-allowed;pointer-events:none}
.btn--primary:hover{background:var(--ink)}
.btn--ghost{border-color:var(--line);color:var(--ink);background:transparent}
.btn--ghost:hover{border-color:var(--lake);background:rgba(23,58,75,.05)}
.btn--onDark{border:1px solid rgba(251,248,244,.5);color:#FBF8F4}
.btn--onDark:hover{background:rgba(251,248,244,.12)}
.btn--light{background:#FBF8F4;color:var(--ink)}
.btn--light:hover{background:#fff}
.btn--sm{padding:11px 20px;font-size:.86rem}
.btn--block{display:flex;width:100%}
.btn-row{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin-top:34px}
.tlink{display:inline-flex;align-items:center;justify-content:center;gap:.6em;
  font-family:var(--sans);font-size:.94rem;font-weight:500;letter-spacing:.01em;text-decoration:none;
  padding:15px 28px;border:1px solid var(--lake);border-radius:var(--radius);
  color:var(--lake);background:transparent;
  transition:background .25s var(--ease),color .25s var(--ease),border-color .25s var(--ease)}
.tlink::after{content:"→";transition:transform .3s var(--ease)}
/* Kleiner gefüllter Knopf, der direkt hinter einer Überschrift steht.
   Bewusst gefüllt statt umrandet, damit er im Preisblock auffällt,
   ohne eine eigene Zeile zu beanspruchen. */
.minibtn{display:inline-block;margin-left:.7em;padding:4px 13px;
  border-radius:4px;background:var(--lake-2);color:#FFFFFF;
  font-family:var(--sans);font-size:.8rem;font-weight:500;letter-spacing:0;
  line-height:1.55;text-decoration:none;white-space:nowrap;vertical-align:middle;
  transition:background .25s var(--ease)}
.minibtn:hover,.minibtn:focus-visible{background:var(--lake);color:#FFFFFF}
.tlink:hover{background:var(--lake);color:#FBF8F4;border-color:var(--lake)}
.tlink:hover::after{transform:translateX(4px)}
.section--dark .tlink,.cta-band .tlink{color:#FBF8F4;border-color:rgba(251,248,244,.55);background:transparent}
.section--dark .tlink:hover,.cta-band .tlink:hover{background:rgba(251,248,244,.14);color:#FBF8F4}
.card .tlink{align-self:flex-start;margin-top:auto}
/* Helle Buttons behalten dunkle Schrift, auch in dunklen Abschnitten */
.section--dark .btn--light,.cta-band .btn--light,.section--dark a.btn--light{color:var(--ink)}
.section--dark .btn--onDark,.cta-band .btn--onDark{color:#FBF8F4}
/* ---------- Header ---------- */
.site-header{position:sticky;top:0;z-index:100;background:var(--paper);
  border-bottom:1px solid var(--line-soft);transition:background .3s var(--ease),border-color .3s var(--ease)}
.site-header[data-transparent="true"]{position:fixed;left:0;right:0;background:transparent;border-color:transparent;color:#FBF8F4}
.site-header[data-transparent="true"] .wordmark,.site-header[data-transparent="true"] .nav-desktop a{color:#FBF8F4}
.site-header[data-transparent="true"] .btn--primary{background:rgba(251,248,244,.14);border-color:rgba(251,248,244,.6);color:#FBF8F4;backdrop-filter:blur(6px)}
.site-header[data-transparent="true"] .burger__lines span{background:#FBF8F4}
.site-header.is-stuck{background:rgba(251,248,244,.96);backdrop-filter:blur(10px);
  border-color:var(--line-soft);color:var(--ink)}
.site-header.is-stuck .wordmark,.site-header.is-stuck .nav-desktop a{color:var(--ink)}
.site-header.is-stuck .btn--primary{background:var(--lake);border-color:var(--lake);color:#FBF8F4}
.site-header.is-stuck .burger__lines span{background:var(--ink)}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:74px}
.wordmark{font-family:var(--serif);font-size:1.55rem;letter-spacing:-.02em;text-decoration:none;font-weight:400}

/* Signet und Wortmarke stehen nebeneinander und bleiben eigenständig.
   Der Zusammenhalt liegt in der Klammer .marke, damit die Wortmarke
   selbst unverändert bleibt - ein Flex-Layout auf ihr würde sonst auch
   zwischen "viva", dem Punkt und "coach" Abstände erzeugen. */
.marke{display:inline-flex;align-items:center;gap:.55em}
.marke__signet{display:block;line-height:0}
.marke__signet img{display:block;width:auto;height:1.6rem}
/* Zwei Fassungen des Signets: farbig auf hellem Grund, weiß auf dunklem.
   Sie wechseln zusammen mit der Schriftfarbe der Wortmarke. */
.marke__signet .signet--weiss{display:none}
.site-header[data-transparent="true"]:not(.is-stuck) .signet--farbig{display:none}
.site-header[data-transparent="true"]:not(.is-stuck) .signet--weiss{display:block}
/* Der Punkt trägt die Farbe des Signets. */
.wordmark span{color:var(--lake-2)}
/* In den hellen Fassungen der Wortmarke nimmt der Punkt die Textfarbe an,
   ist dort also ebenfalls weiß. Das :not(.is-stuck) ist nötig, weil der
   Kopfbereich sein data-transparent behält und beim Scrollen nur eine
   Klasse dazukommt. */
.site-header[data-transparent="true"]:not(.is-stuck) .wordmark span,
.wordmark--footer span{color:inherit}
.nav-desktop ul{display:flex;gap:34px}
.nav-desktop a{text-decoration:none;font-size:.95rem;padding-block:6px;
  border-bottom:1px solid transparent;transition:border-color .25s}
.nav-desktop a:hover,.nav-desktop a[aria-current]{border-color:currentColor}
.header-actions{display:flex;align-items:center;gap:12px}
.cta-short{display:none}
.burger{display:none;background:none;border:1px solid var(--line);border-radius:var(--radius);
  width:44px;height:44px;align-items:center;justify-content:center;cursor:pointer}
.burger__lines{display:grid;gap:5px;width:19px}
.burger__lines span{display:block;height:1.5px;background:var(--ink);transition:transform .3s var(--ease)}
.burger[aria-expanded="true"] .burger__lines span:first-child{transform:translateY(3.3px) rotate(9deg)}
.burger[aria-expanded="true"] .burger__lines span:last-child{transform:translateY(-3.3px) rotate(-9deg)}
.mobile-nav{position:fixed;inset:74px 0 auto;z-index:99;background:var(--paper);
  border-bottom:1px solid var(--line);padding:10px var(--gut) 14px;max-height:calc(100vh - 74px);overflow:auto}
.mobile-nav ul{display:grid;gap:0;margin-bottom:0}
.mobile-nav a{display:block;text-decoration:none;font-family:var(--serif);font-size:1.3rem;padding:6px 0;
  border-bottom:1px solid var(--line-soft)}
.mobile-nav a.sub{font-family:var(--sans);font-size:.86rem;padding:5px 0 5px 18px;color:var(--stone)}
.mobile-nav__note{margin:18px 0 0;font-size:.82rem;color:var(--stone)}
/* ---------- Hero ---------- */
.hero{position:relative;display:flex;align-items:flex-end;min-height:clamp(600px,92svh,940px);
  padding-block:150px clamp(52px,8vw,86px);color:#FBF8F4;overflow:hidden;background:var(--ink)}
.hero__media{position:absolute;inset:0}
.hero__media img,.hero__media video{width:100%;height:100%;object-fit:cover;
  animation:driftIn 26s var(--ease) both}
@keyframes driftIn{from{transform:scale(1.06)}to{transform:scale(1)}}
.hero__media::after{content:"";position:absolute;inset:0;
  background:linear-gradient(190deg,rgba(9,22,30,.42) 0%,rgba(9,22,30,.12) 34%,rgba(9,22,30,.62) 74%,rgba(9,22,30,.86) 100%)}
.hero__inner{position:relative;width:min(100% - 2*var(--gut),var(--shell));margin-inline:auto}
.hero__title{max-width:none}
.hero h1{font-size:clamp(2.25rem,4.9vw,3.9rem);line-height:1.07;font-weight:300;
  max-width:17em;text-wrap:balance;overflow-wrap:break-word;hyphens:none}
.hero--page h1{max-width:18em}
.hero .lead{color:rgba(251,248,244,.9);max-width:46ch;margin-top:26px}
.hero__trust{display:flex;flex-wrap:wrap;gap:10px 26px;margin:38px 0 0;
  font-size:.75rem;letter-spacing:.16em;text-transform:uppercase;color:rgba(251,248,244,.75)}
.hero__trust li{display:flex;align-items:center;gap:.7em}
.hero__trust li+li::before{content:"";width:4px;height:4px;background:#B9834B;display:block}
.hero--page{min-height:clamp(400px,58svh,580px);padding-block:clamp(56px,7vw,86px) clamp(44px,6vw,70px)}
.hero--page h1{font-size:clamp(2.1rem,4.6vw,3.5rem)}
/* Signatur: Rahmen */
.frame{position:relative;padding:clamp(30px,4.4vw,58px)}
.frame::before,.frame::after{content:"";position:absolute;pointer-events:none;
  border:1px solid currentColor;opacity:.28}
.frame::before{inset:0}
.frame::after{inset:7px;opacity:.14}
/* Lesbarkeit auf dunklen Flaechen und ueber Bildbaendern */
.section--dark .muted,.cta-band .muted{color:rgba(239,233,225,.72)}
.section--dark .small,.cta-band .small{color:rgba(239,233,225,.82)}
.section--dark p,.cta-band p{color:rgba(239,233,225,.88)}
.section--dark .lead,.cta-band .lead{color:rgba(239,233,225,.9)}
.cta-band .eyebrow{color:#B7CBD5}
.cta-band .pull,.section--dark .pull{color:#F4EFE8}
.section--dark .btn--ghost,.cta-band .btn--ghost{border-color:rgba(251,248,244,.55);color:#FBF8F4}
.section--dark .btn--ghost:hover,.cta-band .btn--ghost:hover{background:rgba(251,248,244,.12)}
.section--dark .btn--primary,.cta-band .btn--primary{background:#FBF8F4;color:var(--ink)}
.section--dark .btn--primary:hover,.cta-band .btn--primary:hover{background:#fff}
.section--dark .note,.cta-band .note{background:rgba(251,248,244,.07);border-color:#C9A97E;color:rgba(239,233,225,.9)}
.section--dark .note p,.cta-band .note p{color:rgba(239,233,225,.9)}
.section--dark .compare,.section--dark .values,.section--dark .accordion{border-color:rgba(251,248,244,.26)}
.section--dark .compare__row,.section--dark .values > div,.section--dark .accordion details{border-color:rgba(251,248,244,.16)}
.section--dark .compare__row li,.section--dark .values p{color:rgba(239,233,225,.86)}
.section--dark .values h3{color:#B7CBD5}
.section--dark .ticks li::before{background:#C9A97E}
.section--dark .accordion summary{color:#FBF8F4}
.section--dark .accordion summary::after{color:#C9A97E}
.section--dark .accordion__body{color:rgba(239,233,225,.86)}
.section--dark .card{background:rgba(251,248,244,.05);border-color:rgba(251,248,244,.18);color:rgba(239,233,225,.9)}
.section--dark .card h3{color:#FBF8F4}
.section--dark .card p{color:rgba(239,233,225,.86)}
.section--dark .card__kicker{color:#C9A97E}
.section--dark .facts dt{color:rgba(239,233,225,.7)}
.section--dark .price{background:rgba(251,248,244,.06);border-color:rgba(251,248,244,.2)}
.section--dark .price__row{border-color:rgba(251,248,244,.16)}
.section--dark .figure figcaption{color:rgba(239,233,225,.72)}
/* ---------- Karten ---------- */
.grid{display:grid;gap:clamp(18px,2.4vw,28px)}
.grid--3{grid-template-columns:repeat(3,1fr)}
.grid--2{grid-template-columns:repeat(2,1fr)}
.grid--4{grid-template-columns:repeat(4,1fr)}
.card{display:flex;flex-direction:column;background:var(--paper);border:1px solid var(--line-soft);
  padding:clamp(24px,2.6vw,34px);transition:border-color .3s var(--ease),transform .3s var(--ease)}
.card:hover{border-color:var(--line);transform:translateY(-3px)}
.card__kicker{font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:var(--lake-2);margin-bottom:14px}
.card h3{font-size:clamp(1.35rem,1.9vw,1.6rem);margin-bottom:12px}
.card p{color:#2A3941}
.card .tlink{margin-top:auto;align-self:flex-start;padding-top:18px}
.card--accent{background:var(--lake);color:#EFE9E1;border-color:transparent}
.card--accent h3{color:#FBF8F4}
.card--accent p{color:rgba(239,233,225,.88)}
.card--accent .card__kicker{color:#C9A97E}
.card--accent .tlink{color:#FBF8F4;border-color:rgba(251,248,244,.45)}
.card__media{margin:-1px -1px 22px;aspect-ratio:16/10;overflow:hidden}
.card__media img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.card:hover .card__media img{transform:scale(1.03)}
/* ---------- Vergleich / Listen ---------- */
.compare{display:grid;gap:0;border-top:1px solid var(--line)}
.compare__row{display:grid;grid-template-columns:minmax(150px,1fr) 3fr;gap:clamp(14px,3vw,44px);
  padding:26px 0;border-bottom:1px solid var(--line-soft)}
.compare__row h3{font-size:1.2rem}
.compare__row ul{display:grid;gap:8px}
.compare__row li{position:relative;padding-left:20px;color:#2A3941}
.compare__row li::before{content:"";position:absolute;left:0;top:.62em;width:7px;height:7px;background:var(--burgundy)}
.ticks{display:grid;gap:12px;margin:26px 0}
.ticks li{position:relative;padding-left:26px}
.ticks li::before{content:"";position:absolute;left:0;top:.58em;width:7px;height:7px;background:var(--lake-2)}
.ticks--no li::before{background:var(--burgundy)}
.split{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(30px,5vw,80px);align-items:stretch}
.split--reverse .split__media{order:2}
/* Bildhoehe folgt der Textmenge der Nachbarspalte */
.split__media{position:relative;min-height:clamp(260px,30vw,430px);overflow:hidden}
.split__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;aspect-ratio:auto}
.split--tall .split__media{min-height:clamp(320px,38vw,540px)}
/* Ausnahme: feste Bildproportion beibehalten */
.split--fixed{align-items:center}
.split--fixed .split__media{position:static;min-height:0;overflow:visible}
.split--fixed .split__media img{position:static;width:100%;height:auto;aspect-ratio:4/3}
.steps{counter-reset:s;display:grid;gap:0;border-top:1px solid var(--line)}
.steps li{counter-increment:s;display:grid;grid-template-columns:64px 1fr;gap:clamp(14px,2vw,30px);
  padding:28px 0;border-bottom:1px solid var(--line-soft)}
.steps li::before{content:counter(s,decimal-leading-zero);font-family:var(--serif);font-size:1.15rem;color:var(--burgundy)}
.steps h3{font-size:1.18rem;margin-bottom:6px}
.steps p{margin:0;color:#2A3941;max-width:58ch}
.section--dark .steps{border-color:rgba(251,248,244,.24)}
.section--dark .steps li{border-color:rgba(251,248,244,.14)}
.section--dark .steps li::before{color:#C9A97E}
.section--dark .steps p{color:rgba(239,233,225,.86)}
.values{display:grid;gap:0;border-top:1px solid var(--line-soft)}
.values > div{padding:26px 0;border-bottom:1px solid var(--line-soft)}
.values h3{font-size:.78rem;letter-spacing:.17em;text-transform:uppercase;font-family:var(--sans);
  font-weight:600;color:var(--lake-2);margin-bottom:10px}
.values p{margin:0;max-width:60ch}
@media (min-width:860px){
  .values{grid-template-columns:1fr 1fr;column-gap:clamp(30px,5vw,70px)}
}
/* ---------- Preis ---------- */
.price{border:1px solid var(--line);padding:clamp(26px,3.4vw,44px);background:var(--paper)}
/* flex-wrap:nowrap ist hier entscheidend. Mit wrap prueft der Browser
   zuerst, ob beide Elemente in ihrer Wunschbreite nebeneinanderpassen,
   und bricht um, bevor er das Schrumpfen ueberhaupt versucht. Eine lange
   Beschreibung schiebt den Betrag dadurch in eine eigene Zeile. Mit
   nowrap bleiben beide in einer Zeile, die Beschreibung schrumpft und
   umbricht innerhalb ihrer Spalte. */
.price__row{display:flex;flex-wrap:nowrap;justify-content:space-between;
  align-items:flex-start;gap:10px 30px;
  padding:16px 0;border-bottom:1px solid var(--line-soft)}
.price__row:last-of-type{border-bottom:0}
.price__label{flex:1 1 auto;min-width:0}
.price__amount{flex:0 0 auto;font-family:var(--serif);font-size:1.5rem;white-space:nowrap}
/* Auf schmalen Bildschirmen bewusst untereinander. */
@media (max-width:520px){
  .price__row{flex-wrap:wrap}
  .price__label{flex-basis:100%}
  .price__amount{flex-basis:100%}
}
.price__label strong{font-weight:500}
.price__label span{display:block;font-size:.88rem;color:var(--stone)}
/* ---------- Akkordeon ---------- */
.accordion{border-top:1px solid var(--line)}
.accordion details{border-bottom:1px solid var(--line-soft)}
.accordion summary{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;
  cursor:pointer;list-style:none;padding:22px 0;font-family:var(--serif);font-size:1.18rem;line-height:1.35}
.accordion summary::-webkit-details-marker{display:none}
.accordion summary::after{content:"+";font-family:var(--sans);font-size:1.3rem;color:var(--lake-2);
  transition:transform .3s var(--ease);line-height:1}
.accordion details[open] summary::after{transform:rotate(45deg)}
.accordion__body{padding:0 0 24px;max-width:66ch;color:#2A3941}
.accordion__body p:last-child{margin-bottom:0}
/* ---------- Hinweise / Marker ---------- */
.note{border-left:2px solid var(--lake-2);background:var(--paper-2);padding:22px 26px;margin:30px 0}
.note--warn{border-color:var(--burgundy)}
.note p:last-child{margin-bottom:0}
.note h3{font-size:1.05rem;font-family:var(--sans);font-weight:600;margin-bottom:8px}
.flag{display:inline-block;font-family:var(--sans);font-size:.72rem;font-weight:500;letter-spacing:.06em;
  color:var(--burgundy);background:rgba(107,38,55,.07);border:1px dashed rgba(107,38,55,.4);
  padding:1px 7px;border-radius:2px;white-space:normal}
.section--dark .flag{color:#E8C7B4;background:rgba(255,255,255,.08);border-color:rgba(232,199,180,.5)}
/* ---------- Band / CTA ---------- */
.cta-band{position:relative;color:#FBF8F4;background:var(--ink);overflow:hidden}
.cta-band__media{position:absolute;inset:0}
.cta-band__media img{width:100%;height:100%;object-fit:cover;opacity:.5}
.cta-band__media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(9,22,30,.72),rgba(9,22,30,.88))}
.cta-band__inner{position:relative;padding-block:clamp(70px,9vw,120px)}
.cta-band h2{font-size:clamp(1.9rem,3.6vw,2.9rem);max-width:20ch}
/* ---------- Formular ---------- */
.form{max-width:760px}
.fieldset{border:0;padding:0;margin:0 0 44px}
.fieldset > legend{font-family:var(--serif);font-size:1.45rem;margin-bottom:6px;padding:0}
/* Die Breite begrenzt hier bereits der Formularkasten. Eine zusaetzliche
   Kappung auf 60 Zeichen erzwingt bei kurzen Hinweisen einen Umbruch,
   der ein einzelnes Wort in die zweite Zeile schiebt. */
.fieldset__hint{color:var(--stone);font-size:.92rem;margin-bottom:22px}
.field{margin-bottom:22px}
.field label,.field .label{display:block;font-size:.9rem;font-weight:500;margin-bottom:7px}
.field .help{font-size:.84rem;color:var(--stone);margin:6px 0 0}
input[type=text],input[type=email],input[type=tel],input[type=date],select,textarea{
  width:100%;font:inherit;font-size:1rem;padding:13px 15px;background:#fff;
  border:1px solid var(--line);border-radius:var(--radius);color:var(--ink)}
textarea{min-height:130px;resize:vertical}
input:focus,select:focus,textarea:focus{border-color:var(--lake-2);outline:2px solid rgba(42,95,118,.18);outline-offset:0}
.choices{display:grid;gap:10px}
.choices--2{grid-template-columns:repeat(2,1fr)}
.choice{display:flex;gap:12px;align-items:flex-start;border:1px solid var(--line);
  padding:14px 16px;background:#fff;cursor:pointer;transition:border-color .2s}
.choice:hover{border-color:var(--lake-2)}
/* Mehrfachauswahl als ein zusammenhaengender Kasten statt vieler
   Einzelrahmen. Ruhiger, wenn viele Punkte untereinander stehen. */
.choices--kasten{gap:0;border:1px solid var(--line);background:#fff}
.choices--kasten .choice{border:0;border-top:1px solid var(--line-soft);
  border-radius:0;padding:13px 16px}
.choices--kasten .choice:first-child{border-top:0}
.choices--kasten .choice:hover{background:var(--paper-2)}
.choice input{margin-top:.25em;accent-color:var(--lake)}
.choice span small{display:block;color:var(--stone);font-size:.85rem}
.form__legal{font-size:.88rem;color:var(--stone);max-width:60ch}
.form__progress{display:flex;gap:8px;margin-bottom:34px;font-size:.78rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--stone);flex-wrap:wrap}
.form__progress li{display:flex;align-items:center;gap:8px}
.form__progress li+li::before{content:"·"}
.form__progress li[aria-current]{color:var(--lake)}
/* Spamschutz-Feld: unsichtbar, aber nicht display:none, damit Roboter es finden */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ---------- Team ---------- */
.person{display:grid;grid-template-columns:220px 1fr;gap:clamp(20px,3vw,40px);
  padding:34px 0;border-bottom:1px solid var(--line-soft)}
.person__photo{aspect-ratio:4/5;background:var(--paper-2);border:1px solid var(--line-soft);
  display:flex;align-items:center;justify-content:center;text-align:center;
  color:var(--stone);font-size:.8rem;padding:14px}
.person__photo img{width:100%;height:100%;object-fit:cover}
.person__role{font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;color:var(--lake-2);margin:6px 0 14px}
.facts{display:grid;gap:8px;margin-top:18px;border-top:1px solid var(--line-soft);padding-top:18px}
.facts div{display:grid;grid-template-columns:190px 1fr;gap:14px;font-size:.92rem}
.facts dt{color:var(--stone)}
.facts dd{margin:0}
/* ---------- Bild-Bänder ---------- */
.figure{margin:0}
.figure img{width:100%;object-fit:cover}
.figure figcaption{font-size:.84rem;color:var(--stone);margin-top:10px;max-width:56ch}
/* Bildunterschrift innerhalb eines füllenden Bildes: liegt unten auf
   dem Bild, damit die Kartenhöhe erhalten bleibt. */
.media-split__img{position:relative}
.bildunterschrift{position:absolute;left:0;right:0;bottom:0;margin:0;
  padding:26px 20px 16px;font-family:var(--sans);font-size:.78rem;line-height:1.45;
  color:#FBF8F4;background:linear-gradient(to top,rgba(15,33,43,.82),rgba(15,33,43,0))}
@media (max-width:700px){.bildunterschrift{font-size:.74rem;padding:22px 16px 12px}}
.band-img{height:clamp(280px,44vw,520px);overflow:hidden}
.band-img img{width:100%;height:100%;object-fit:cover}
/* ---------- Breadcrumb ---------- */
.crumbs{font-size:.82rem;color:var(--stone);padding-top:26px}
.crumbs a{text-decoration:none;border-bottom:1px solid var(--line)}
.crumbs span{margin-inline:8px}
/* ---------- Reveal ---------- */
/* Nur wenn JavaScript laeuft, wird ueberhaupt eingeblendet.
   Ohne JS oder bei Fehlern bleibt der Inhalt sichtbar. */
.js .reveal{opacity:0;transform:translateY(10px)}
.js .reveal.is-in{opacity:1;transform:none;transition:opacity .45s var(--ease),transform .45s var(--ease)}
/* ---------- Footer ---------- */
.site-footer{background:var(--ink);color:rgba(239,233,225,.82);padding-block:clamp(56px,7vw,86px) 34px;font-size:.92rem}
.footer-grid{display:grid;grid-template-columns:1.5fr repeat(3,1fr);gap:clamp(26px,4vw,50px)}
.footer__head{font-family:var(--sans);font-size:.74rem;letter-spacing:.17em;text-transform:uppercase;
  color:#9FB8C3;margin-bottom:16px;font-weight:600}
.site-footer ul{display:grid;gap:9px}
.site-footer a{text-decoration:none;border-bottom:1px solid transparent;transition:border-color .2s}
.site-footer a:hover{border-color:currentColor}
.wordmark--footer{color:#FBF8F4;margin:0}
.marke--footer{margin:0 0 12px}
.footer__claim{max-width:34ch;color:rgba(239,233,225,.72)}
.footer__meta{font-size:.85rem;color:rgba(239,233,225,.6);margin-top:18px}
.footer-bottom{margin-top:clamp(40px,5vw,64px);padding-top:26px;border-top:1px solid rgba(239,233,225,.16)}
.footer__crisis{font-size:.85rem;color:rgba(239,233,225,.75);max-width:96ch}
.footer__legal{font-size:.78rem;color:rgba(239,233,225,.5);margin:0}
/* ---------- Responsive ---------- */
@media (max-width:1060px){
  .nav-desktop ul{gap:20px}
  .nav-desktop a{font-size:.88rem}
  .header-inner{gap:14px}
}
@media (max-width:1000px){
  .grid--3,.grid--4{grid-template-columns:1fr 1fr}
  .footer-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:820px){
  .nav-desktop{display:none}
  .burger{display:inline-flex}
  .grid--3,.grid--2,.grid--4{grid-template-columns:1fr}
  .split{grid-template-columns:1fr}
  .split--reverse .split__media{order:0}
  .split__media,.split--tall .split__media{position:static;min-height:0;overflow:visible}
  .split__media img{position:static;width:100%;height:auto;aspect-ratio:4/3}
  .compare__row{grid-template-columns:1fr}
  .person{grid-template-columns:1fr;max-width:520px}
  .facts div{grid-template-columns:1fr}
  .choices--2{grid-template-columns:1fr}
  .hero{min-height:82svh}
  .hero__title{max-width:none}
}
@media (max-width:640px){
  .cta-long{display:none}
  .cta-short{display:inline}
  .btn--sm{padding:11px 15px;font-size:.82rem}
}
@media (max-width:560px){
  .footer-grid{grid-template-columns:1fr}
  .frame{padding:26px 20px}
  .btn:not(.btn--sm){width:100%}
  .btn-row .btn{width:auto;flex:1 1 220px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none}
}
@media print{
  .site-header,.mobile-nav,.hero__media,.cta-band__media{display:none}
}
/* --- Bild neben Textspalte (zweispaltiges Modul) --- */
.media-split{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
  gap:clamp(28px,4vw,60px);align-items:start}
.media-split__img{margin:0}
.media-split__img img{display:block;width:100%;object-fit:cover;aspect-ratio:3/4}
.media-split--stretch{align-items:stretch}
.media-split--links{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr)}
@media (max-width:860px){.media-split--links{grid-template-columns:1fr}.media-split--links .media-split__img{order:2}}
.media-split--stretch .media-split__img{position:relative;min-height:340px}
.media-split--stretch .media-split__img img{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto}
.media-split .steps{margin-top:0}
.media-split__img--natur img{aspect-ratio:auto;height:auto}

/* Bild über die volle Texthöhe, darunter eine Bildunterschrift.
   Das Bild ist hier nicht absolut positioniert, sonst läge die
   Unterschrift darunter verdeckt. Stattdessen teilen sich beide
   die Höhe: die Unterschrift nimmt, was sie braucht, das Bild den Rest. */
.media-split__img--mitText{display:flex;flex-direction:column;margin:0}
.media-split--stretch .media-split__img--mitText img{position:static;
  flex:1 1 auto;min-height:0;width:100%;height:100%;
  object-fit:cover;aspect-ratio:auto}
.media-split__img--mitText figcaption{font-family:var(--sans);font-size:.82rem;
  line-height:1.5;color:var(--stone);margin-top:12px}
@media (max-width:860px){
  .media-split{grid-template-columns:1fr;gap:clamp(24px,4vw,36px)}
  .media-split--stretch .media-split__img{position:static;min-height:0}
  .media-split--stretch .media-split__img img{position:static;aspect-ratio:4/3;height:auto}
  .media-split__img img{aspect-ratio:4/3}
}
.split{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(30px,5vw,80px);align-items:center}
.split__media img{width:100%;aspect-ratio:4/3;object-fit:cover}
.split--tall .split__media img{aspect-ratio:3/4}

/* Bild über die volle Höhe der Textspalte statt in festem Seitenverhältnis.
   Ohne diese Variante bestimmt aspect-ratio die Höhe des Bildes, und je
   nach Textlänge entsteht oben oder unten eine Lücke. */
@media (min-width:821px){
  .split--stretch{align-items:stretch}
  .split--stretch .split__media{min-height:0}
  .split--stretch .split__media img{position:absolute;inset:0;
    width:100%;height:100%;object-fit:cover;aspect-ratio:auto}
}
@media (max-width:820px){
  .nav-desktop{display:none}
  .burger{display:inline-flex}
  .grid--3,.grid--2,.grid--4{grid-template-columns:1fr}
  .split{grid-template-columns:1fr}
  .split--reverse .split__media{order:0}
  .compare__row{grid-template-columns:1fr}
  .person{grid-template-columns:1fr;max-width:520px}
  .facts div{grid-template-columns:1fr}
  .choices--2{grid-template-columns:1fr}
  .hero{min-height:82svh}
  .hero__title{max-width:none}
}
.media-split--stretch .media-split__img{position:relative;min-height:300px}
.location-section{width:min(100% - 2*var(--gut),860px);margin-inline:auto;margin-top:clamp(34px,4vw,52px)}
/* --- Standortkarten -------------------------------------------------
   Breite Zeilen: Bild links, Text rechts. Das Bild nimmt die halbe
   Kartenbreite ein und hat auf allen Karten dieselbe feste Höhe.
   Dadurch entsteht ein ruhiges, gleichmäßiges Gesamtbild.
   ------------------------------------------------------------------- */
.location-card .tlink{align-self:flex-start}
.location-card .tlink + .tlink{margin-top:10px}

/* Standortkarten: Bild links, Text rechts.
   Der Text beginnt bündig mit der Bildoberkante; das Bild reicht über
   die gesamte Höhe von Text und Schaltfläche. Die Textspalte ist etwas
   breiter als das Bild, damit die Schaltfläche einzeilig bleibt. */
.location-list{display:grid;gap:clamp(18px,2.4vw,28px)}
.location-list .location-card{display:grid;grid-template-columns:45% 55%;
  align-items:stretch;gap:0;padding:clamp(18px,2vw,24px);min-height:0}
.location-list .location-card > .card__media{position:relative;margin:0;
  min-height:100%;aspect-ratio:auto;overflow:hidden}
.location-list .location-card > .card__media img{position:absolute;inset:0;
  width:100%;height:100%;object-fit:cover;display:block}
.location-list .location-card__text{padding:0 0 0 clamp(22px,2.6vw,34px);
  display:flex;flex-direction:column;min-width:0}
.location-list .location-card .card__kicker{margin-top:-.28em;margin-bottom:10px}
.location-list .location-card h3{font-size:clamp(1.15rem,1.5vw,1.35rem);margin-bottom:10px}
.location-list .location-card p{margin-bottom:.6em}
.location-list .location-card .tlink{margin-top:14px;align-self:flex-start;
  white-space:nowrap}
@media (max-width:820px){
  .location-list .location-card .tlink{white-space:normal}
}
@media (max-width:700px){
  .location-list .location-card{grid-template-columns:1fr;padding:clamp(16px,4vw,20px)}
  .location-list .location-card > .card__media{position:static;min-height:0;aspect-ratio:16/10}
  .location-list .location-card > .card__media img{position:static}
  .location-list .location-card__text{padding:clamp(18px,4vw,22px) 0 0}
  .location-list .location-card .card__kicker{margin-top:0}
}



@media (max-width:820px){.location-section{margin-top:38px}}

/* --- Lokale Standortseiten --------------------------------------------
   Die Seiten bestehen aus vielen kurzen Abschnitten. Mit den regulären
   Abständen entstünde dadurch sehr viel Leerraum, deshalb sind sie hier
   deutlich enger gesetzt.
   --------------------------------------------------------------------- */
.page-lokal .section{padding-block:clamp(42px,5.5vw,72px)}
.page-lokal .section .d3{margin-bottom:0}
.page-lokal .section p{margin-bottom:.85em}
.page-lokal .section p:last-child{margin-bottom:0}
.page-lokal .section p[style*="margin-top:20px"]{margin-top:16px !important}
.page-lokal .eyebrow{margin-bottom:1rem}
.page-lokal .pull{margin:22px 0 0}
.page-lokal .ticks{margin:18px 0 0}
.page-lokal .ticks li{padding-left:24px}
.page-lokal .btn-row{margin-top:22px}
.page-lokal .price{margin-top:18px !important}
.page-lokal .grid{gap:clamp(14px,1.8vw,20px)}
.page-lokal .media-split{gap:clamp(24px,3vw,44px)}
.page-lokal .hero--page{min-height:clamp(340px,48svh,460px)}
@media (max-width:700px){
  .page-lokal .section{padding-block:clamp(36px,7vw,52px)}
}


/* Kennzeichnung von Pflichtangaben im Formular */
.pflicht{font-style:normal;font-weight:400;font-size:.74rem;letter-spacing:.04em;
  text-transform:none;color:var(--stone);margin-left:.5em}

/* Bestätigter Termin oberhalb des Formulars */
.termin-bestaetigt{border:1px solid var(--line);border-left:3px solid var(--lake);
  background:var(--paper-2);padding:clamp(18px,2.2vw,26px);margin-top:clamp(22px,2.6vw,30px)}
.termin-bestaetigt .eyebrow{margin-bottom:.6rem}
.termin-bestaetigt__datum{font-family:var(--serif);font-size:clamp(1.15rem,1.8vw,1.5rem);
  margin:0 0 .3em;color:var(--ink)}
.steps--inline [aria-current="step"]{font-weight:600;color:var(--ink)}

/* --- Schrittanzeige ---------------------------------------------------
   Einzeilig, mit verbindender Linie. Der aktuelle Schritt ist deutlich
   hervorgehoben, erledigte tragen ein Häkchen.
   --------------------------------------------------------------------- */
.steps--inline{display:flex;align-items:center;gap:0;list-style:none;
  margin:0 0 clamp(26px,3vw,38px);padding:0;counter-reset:none}
.steps--inline li{display:flex;align-items:center;gap:12px;margin:0;padding:0;flex:1;
  font-family:var(--sans);font-size:.92rem;line-height:1.3;color:var(--stone)}
.steps--inline li::before{content:none}
.steps--inline li:not(:last-child)::after{content:"";flex:1;height:1px;
  background:var(--line);margin:0 14px}
.steps--inline li span{display:inline-flex;align-items:center;justify-content:center;
  width:38px;height:38px;border:1px solid var(--line);border-radius:50%;
  font-size:.92rem;font-weight:500;color:var(--stone);flex:none;background:var(--paper);
  transition:background .3s var(--ease),border-color .3s var(--ease),color .3s var(--ease)}
.steps--inline [aria-current="step"]{color:var(--ink);font-weight:600}
.steps--inline [aria-current="step"] span{background:var(--lake);border-color:var(--lake);
  color:#FBF8F4;box-shadow:0 0 0 4px rgba(42,95,118,.12)}
.steps--inline .ist-erledigt{color:var(--ink)}
.steps--inline .ist-erledigt span{background:var(--paper-2);border-color:var(--lake-2);
  color:var(--lake-2)}
.steps--inline .ist-erledigt::after{background:var(--lake-2);opacity:.4}

@media (max-width:700px){
  .steps--inline{flex-wrap:nowrap;gap:0;font-size:.8rem}
  .steps--inline li{gap:8px}
  .steps--inline li span{width:32px;height:32px;font-size:.82rem}
  .steps--inline li:not(:last-child)::after{margin:0 8px}
}
@media (max-width:480px){
  .steps--inline li{flex-direction:column;gap:6px;text-align:center;flex:1}
  .steps--inline li:not(:last-child)::after{display:none}
  .steps--inline{gap:10px}
}


/* --- Formularblöcke ohne Rahmen ---------------------------------------- */
.form fieldset{border:0;padding:0;margin:0 0 clamp(30px,3.6vw,44px)}
.form legend{display:block;width:100%;padding:0;float:none;
  font-family:var(--serif);font-size:clamp(1.1rem,1.5vw,1.3rem);font-weight:400;
  color:var(--ink);margin:0 0 6px;border-bottom:1px solid var(--line-soft);
  padding-bottom:10px}
.form fieldset + fieldset{margin-top:0}

/* --- Terminwahl -------------------------------------------------------- */
.kalender{margin-top:clamp(20px,2.4vw,28px);min-height:1040px}
.kalender__rahmen{width:100%;height:1040px;border:0;display:block}
@media (max-width:820px){
  .kalender{min-height:1180px}
  .kalender__rahmen{height:1180px}
}
@media (max-width:560px){
  .kalender{min-height:1280px}
  .kalender__rahmen{height:1280px}
}

/* =====================================================================
   Vorbereitungsfragebogen
   Mobile first: große Berührungsflächen, keine Tabellen, klare Karten.
   ===================================================================== */
.vb-seite{--vb-luft:clamp(22px,2.6vw,32px)}

/* Fortschritt */
.vb-kopf{position:sticky;top:64px;z-index:20;background:var(--paper);
  padding:14px 0 12px;margin-bottom:clamp(20px,2.4vw,28px);
  border-bottom:1px solid var(--line-soft)}
.vb-kopf__zeile{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;
  gap:6px 16px;margin-bottom:10px}
.vb-kopf__schritt{font-family:var(--sans);font-size:.84rem;font-weight:600;color:var(--ink)}
.vb-kopf__hinweis{font-family:var(--sans);font-size:.74rem;color:var(--stone)}
.vb-balken{height:3px;background:var(--line-soft);overflow:hidden}
.vb-balken__fuellung{display:block;height:100%;width:0;background:var(--lake);
  transition:width .4s var(--ease)}

/* Startseite */
.vb-dauer{font-family:var(--sans);font-size:.9rem;color:var(--stone);margin-top:18px}
.vb-datenschutz{font-family:var(--sans);font-size:.8rem;color:var(--stone);
  margin-top:clamp(24px,3vw,34px);line-height:1.6}

/* Schritt */
.vb-schritt__text{margin-top:12px;color:var(--stone)}
.vb-felder{margin-top:clamp(24px,3vw,34px)}
.vb-frage{margin-bottom:var(--vb-luft)}
.vb-frage__titel{font-family:var(--serif);font-weight:400;
  font-size:clamp(1.05rem,1.5vw,1.22rem);line-height:1.35;margin:0 0 6px;color:var(--ink)}
.vb-frage__titel--klein{font-family:var(--sans);font-size:.98rem;line-height:1.45;font-weight:400}
.vb-frage__hilfe{font-family:var(--sans);font-size:.82rem;color:var(--stone);margin:0 0 12px}
.vb-karte{border:1px solid var(--line-soft);background:var(--paper);
  padding:clamp(16px,2vw,22px);margin-bottom:14px}
.vb-hinweis{font-family:var(--sans);font-size:.86rem;color:var(--stone);
  background:var(--paper-2);padding:14px 16px;margin:8px 0 0}

/* Eingaben */
.vb-textarea,.vb-input{width:100%;font-family:var(--sans);font-size:1rem;line-height:1.6;
  color:var(--ink);background:var(--paper);border:1px solid var(--line);
  padding:14px 16px;margin-top:8px}
.vb-textarea{resize:vertical;min-height:110px}
.vb-textarea:focus,.vb-input:focus{outline:2px solid var(--lake);outline-offset:1px;
  border-color:var(--lake)}
.vb-wunsch{display:flex;align-items:center;gap:12px;margin-top:10px}
.vb-wunsch__nr{font-family:var(--sans);font-size:.9rem;color:var(--stone);flex:none;width:1.4em}
.vb-wunsch .vb-input{margin-top:0}

/* Auswahlknöpfe */
.vb-optionen{display:flex;flex-direction:column;gap:8px;margin-top:10px}
.vb-option{display:block;width:100%;text-align:left;font-family:var(--sans);
  font-size:.95rem;line-height:1.45;color:var(--ink);background:var(--paper);
  border:1px solid var(--line);padding:14px 16px;cursor:pointer;
  transition:border-color .2s var(--ease),background .2s var(--ease)}
.vb-option:hover{border-color:var(--lake-2)}
.vb-option:focus-visible{outline:2px solid var(--lake);outline-offset:2px}
.vb-option.ist-gewaehlt{border-color:var(--lake);background:var(--paper-2);
  box-shadow:inset 3px 0 0 var(--lake);font-weight:500}
.vb-option--klein{padding:11px 14px;font-size:.9rem}
.vb-optionen--eng{gap:6px}
.vb-zaehler{font-family:var(--sans);font-size:.8rem;color:var(--stone);margin:10px 0 0}

/* Skala 0 bis 10 */
.vb-skala{margin-top:14px}
.vb-skala__label{font-family:var(--sans);font-size:.86rem;color:var(--stone);margin:0 0 8px}
.vb-skala__reihe{display:grid;grid-template-columns:repeat(11,1fr);gap:4px}
.vb-zahl{font-family:var(--sans);font-size:.88rem;color:var(--ink);background:var(--paper);
  border:1px solid var(--line);padding:12px 0;cursor:pointer;min-height:44px;
  transition:border-color .15s var(--ease),background .15s var(--ease),color .15s var(--ease)}
.vb-zahl:hover{border-color:var(--lake-2)}
.vb-zahl:focus-visible{outline:2px solid var(--lake);outline-offset:2px}
.vb-zahl.ist-gewaehlt{background:var(--lake);border-color:var(--lake);color:#FBF8F4;
  font-weight:600}
.vb-skala__enden{display:flex;justify-content:space-between;gap:12px;margin-top:6px;
  font-family:var(--sans);font-size:.72rem;color:var(--stone)}

/* Steuerung */
.vb-nav{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(28px,3.4vw,40px);
  padding-top:clamp(20px,2.4vw,28px);border-top:1px solid var(--line-soft)}
.vb-nav .btn{flex:1 1 auto;min-width:140px;justify-content:center}
.vb-spaeter{display:inline-block;margin-top:18px}

/* Übersicht am Ende */
.vb-uebersicht{margin-top:clamp(24px,3vw,34px)}
.vb-uebersicht__zeile{display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:14px 0;border-bottom:1px solid var(--line-soft)}
.vb-uebersicht__titel{font-family:var(--sans);font-size:.95rem;color:var(--ink);margin:0}
.vb-uebersicht__zahl{font-family:var(--sans);font-size:.8rem;color:var(--stone);margin:2px 0 0}

@media (max-width:560px){
  .vb-skala__reihe{gap:3px}
  .vb-zahl{font-size:.8rem;padding:12px 0}
  .vb-kopf{top:56px}
  .vb-nav .btn{flex:1 1 100%}
}
@media (min-width:900px){
  .vb-optionen--eng{flex-direction:row;flex-wrap:wrap}
  .vb-optionen--eng .vb-option{flex:1 1 auto;width:auto;text-align:center}
}

/* =====================================================================
   Vorbereitungsfragebogen
   ===================================================================== */
.wizard{padding-bottom:clamp(20px,3vw,32px)}
.wizard__schritt[hidden]{display:none}
.wizard__intro{margin-top:14px;color:var(--stone);max-width:60ch}

/* Fragenblöcke */
.frage{margin-top:clamp(26px,3vw,38px);padding-top:clamp(22px,2.6vw,30px);
  border-top:1px solid var(--line-soft)}
.frage:first-of-type{border-top:0;padding-top:0}
.frage__titel{font-family:var(--serif);font-size:clamp(1.02rem,1.4vw,1.18rem);
  line-height:1.4;color:var(--ink);margin:0 0 4px}
.frage__hinweis{font-family:var(--sans);font-size:.84rem;color:var(--stone);margin:0 0 14px}
.frage textarea,.frage input[type="text"]{width:100%;margin-top:10px}
.frage input[type="text"] + input[type="text"]{margin-top:10px}

/* Skala 0 bis 10 */
.skala{margin-top:10px}
.skala__werte{display:grid;grid-template-columns:repeat(11,1fr);gap:4px}
.skala__wert{position:relative;display:block}
.skala__wert input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}
.skala__wert span{display:flex;align-items:center;justify-content:center;
  min-height:46px;border:1px solid var(--line);background:var(--paper);
  font-family:var(--sans);font-size:.9rem;color:var(--ink);
  transition:background .18s var(--ease),border-color .18s var(--ease),color .18s var(--ease)}
.skala__wert input:checked + span{background:var(--lake);border-color:var(--lake);color:#FBF8F4}
.skala__wert input:focus-visible + span{outline:2px solid var(--lake);outline-offset:2px}
.skala__wert:hover span{border-color:var(--lake-2)}
.skala__enden{display:flex;justify-content:space-between;gap:12px;margin-top:8px;
  font-family:var(--sans);font-size:.76rem;color:var(--stone)}

/* Erwartungskarten */
.erwartungen{display:grid;gap:clamp(14px,1.8vw,20px);margin-top:clamp(20px,2.4vw,28px)}
.erwartung{border:1px solid var(--line-soft);background:var(--paper);
  padding:clamp(18px,2.2vw,26px)}
.erwartung__titel{font-family:var(--serif);font-size:1.08rem;color:var(--ink);margin:0 0 14px}
.erwartung__label{font-family:var(--sans);font-size:.82rem;color:var(--stone);
  margin:16px 0 6px}
.erwartung__label:first-of-type{margin-top:0}

/* Aussagen mit fünf Stufen */
.aussagen{display:grid;gap:clamp(14px,1.8vw,18px);margin-top:clamp(20px,2.4vw,28px)}
.aussage{border:1px solid var(--line-soft);background:var(--paper);
  padding:clamp(16px,2vw,22px)}
.aussage__text{margin:0 0 12px;font-size:.98rem;line-height:1.45;color:var(--ink)}
.stufen{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
.stufe{position:relative;display:block}
.stufe input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}
/* Die Regel soll ein reines Schmuckelement ausblenden. Ohne die
   Einschränkung trifft sie den Beschriftungstext selbst, denn im
   Markup ist er der einzige Span - die ganze Skala war dadurch
   unsichtbar und nicht anklickbar. */
.stufe > span:first-of-type:not(.stufe__text){display:none}
.stufe__text{display:flex;align-items:center;justify-content:center;text-align:center;
  min-height:58px;padding:8px 6px;border:1px solid var(--line);background:var(--paper);
  font-family:var(--sans);font-size:.76rem;line-height:1.25;color:var(--stone);
  transition:background .18s var(--ease),border-color .18s var(--ease),color .18s var(--ease)}
.stufe input:checked + span + .stufe__text,
.stufe input:checked ~ .stufe__text{background:var(--lake);border-color:var(--lake);color:#FBF8F4}
.stufe input:focus-visible ~ .stufe__text{outline:2px solid var(--lake);outline-offset:2px}
.stufe:hover .stufe__text{border-color:var(--lake-2)}

/* gesperrte Auswahl bei Höchstgrenzen */
.choice.ist-gesperrt{opacity:.4;pointer-events:none}
.freiwillig{font-style:normal;font-weight:400;font-size:.72rem;letter-spacing:.06em;
  text-transform:uppercase;color:var(--stone);margin-left:.6em;opacity:.85}
.gruppe__titel{font-family:var(--sans);font-size:.78rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--lake-2);margin:clamp(30px,3.4vw,42px) 0 14px}
.gruppe__titel:first-of-type{margin-top:clamp(20px,2.4vw,28px)}
.wizard .note{margin-top:22px}

/* Fall-Kennung auf der Startseite */
.fall{margin-top:clamp(26px,3vw,34px);padding:clamp(20px,2.4vw,28px);
  border:1px solid var(--line);background:var(--paper-2)}
.fall__titel{font-family:var(--sans);font-size:.78rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--lake-2);margin:0 0 8px}
.fall__hinweis{font-size:.9rem;color:var(--stone);margin:0 0 18px;max-width:56ch}
.fall__felder{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2vw,24px)}
.fall__felder .field{margin:0}
.fall input[type="text"]{text-transform:uppercase;letter-spacing:.08em;font-family:var(--sans)}
@media (max-width:620px){.fall__felder{grid-template-columns:1fr}}

/* Steuerleiste unten */
.wizard-leiste{position:sticky;bottom:0;z-index:20;background:var(--paper);
  border-top:1px solid var(--line);padding:14px 0 16px;
  box-shadow:0 -8px 24px rgba(15,33,43,.06)}
.wizard-leiste[hidden]{display:none}
.wizard-leiste__innen{max-width:800px}
.wizard-fortschritt{height:3px;background:var(--line);margin-bottom:14px;overflow:hidden}
.wizard-fortschritt__balken{display:block;height:100%;width:14%;background:var(--lake);
  transition:width .35s var(--ease)}
.wizard-leiste__knoepfe{display:flex;align-items:center;justify-content:space-between;gap:14px}
.wizard-leiste__stand{font-family:var(--sans);font-size:.82rem;color:var(--stone);
  white-space:nowrap}
.wizard-leiste .tlink{display:block;margin:12px auto 0;font-size:.8rem}

/* Übersicht */
.uebersicht{margin-top:clamp(22px,2.6vw,30px);border-top:1px solid var(--line-soft);
  padding-top:clamp(20px,2.4vw,26px)}
.uebersicht h3{font-family:var(--sans);font-size:.78rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--lake-2);margin:22px 0 10px}
.uebersicht h3:first-child{margin-top:0}
.uebersicht ul{list-style:none;margin:0;padding:0}
.uebersicht li{display:flex;flex-wrap:wrap;gap:6px 16px;justify-content:space-between;
  padding:8px 0;border-bottom:1px solid var(--line-soft);font-size:.88rem}
.uebersicht li span{color:var(--stone);max-width:62%}
.uebersicht li strong{font-weight:500;color:var(--ink);white-space:nowrap}
.uebersicht__legende{font-family:var(--sans);font-size:.8rem;color:var(--stone);
  margin:0 0 10px}
.uebersicht__abstand{display:inline-block;margin-left:8px;padding:2px 8px;
  background:rgba(107,38,55,.1);color:var(--burgundy);border-radius:2px;
  font-size:.74rem;font-weight:500;letter-spacing:.02em}
.uebersicht__hinweis{display:inline-block;margin-left:8px;padding:2px 8px;
  background:var(--paper-2);color:var(--stone);border-radius:2px;
  font-size:.74rem;font-weight:400}

@media (max-width:620px){
  .skala__werte{gap:3px}
  .skala__wert span{min-height:42px;font-size:.82rem}
  .stufen{grid-template-columns:repeat(5,1fr);gap:4px}
  .stufe__text{min-height:64px;font-size:.68rem;padding:6px 3px}
}
@media (max-width:400px){
  .skala__wert span{min-height:38px;font-size:.76rem}
}

/* ---------- Band mit Foto und vollflaechigem blauem Schleier ---------- */
.cta-band--foto{background:var(--lake)}
.cta-band--foto .cta-band__media img{opacity:.64;object-position:50% 28%}
/* Ein einziger Wert ueber die ganze Flaeche, bewusst kein Verlauf. */
.cta-band--foto .cta-band__media::after{background:rgba(23,58,75,.58)}
.cta-band--foto .cta-band__text{max-width:min(56ch,56%)}
/* Die Textspalte ist nur halb so breit wie das Band. Drei Spalten
   wuerden darin auf rund 200 Pixel schrumpfen. */
.cta-band--foto .grid--3{grid-template-columns:1fr 1fr}
@media (min-width:1400px){
  .cta-band--foto .grid--3{grid-template-columns:repeat(3,1fr)}
}
/* Deckende Schrift statt der halbtransparenten des dunklen Bandes.
   Nur dadurch traegt der Text auch bei weit geoeffnetem Schleier. */
.cta-band--foto p,.cta-band--foto .lead,.cta-band--foto .small,
.cta-band--foto .muted,.cta-band--foto h2,.cta-band--foto h3{color:#FBF8F4}
.cta-band--foto .eyebrow{color:#F0F6F9}
.cta-band--foto .pull{color:#FBF8F4}
@media (max-width:860px){
  .cta-band--foto .cta-band__text{max-width:none}
  .cta-band--foto .cta-band__media img{object-position:62% 22%}
}

/* ---------- Wofuer wir stehen: Punkte links, Bild rechts ueber volle Hoehe ---------- */
.values-split__media{margin:0}
.values-split__media img{width:100%;height:auto}
.values-split__media figcaption{
  font-family:var(--sans);font-size:.82rem;color:var(--stone);
  margin-top:12px;max-width:34ch}
@media (max-width:899px){
  .values-split__media{margin:34px 0 0}
}
@media (min-width:900px){
  .values-split{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(300px,34%);
    column-gap:clamp(34px,4.5vw,70px);
    align-items:stretch}
  /* Hoehere Spezifitaet als die Zweispaltigkeit von .values ab 860 Pixel.
     Ohne diese Zeile stuenden die fuenf Punkte zwischen 860 und 900 Pixel
     nebeneinander und das Bild rutschte darunter. */
  .values-split > .values{grid-template-columns:1fr;max-width:none}
  .values-split__media{display:flex;flex-direction:column;height:100%}
  .values-split__media img{flex:1 1 auto;min-height:0;object-fit:cover;
    object-position:50% 26%}
}

/* ---------- Zitatblock mit mehreren Saetzen ---------- */
.pull--stapel{max-width:none}
.pull--stapel p{margin:0;font:inherit;color:inherit;letter-spacing:inherit}
.pull--stapel p + p{margin-top:.62em}
.pull--stapel b,.pull--stapel strong{font-weight:500}

/* Bildspalte etwas breiter als die Textspalte. Bewusst mit Mindestbreite
   abgesichert, damit die Regel die einspaltige Darstellung auf schmalen
   Bildschirmen nicht aushebelt. */
@media (min-width:861px){
  .media-split--bild-breit{grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr)}
}

/* ---------- Zweispaltige Blöcke zu gleichen Teilen ----------
   Text und Bild je zur Hälfte, mit schmalem Zwischenraum, sodass
   mehrere Blöcke untereinander ein zusammenhängendes Raster ergeben.
   Bewusst als eigene Klasse und innerhalb einer Bedingung: Eine Angabe
   direkt am Element würde die einspaltige Darstellung auf schmalen
   Bildschirmen aushebeln. */
@media (min-width:861px){
  .media-split--haelfte{grid-template-columns:1fr 1fr;gap:20px;min-height:450px}
  .media-split--haelfte + .media-split--haelfte{margin-top:20px}
}
@media (max-width:860px){
  .media-split--haelfte + .media-split--haelfte{margin-top:clamp(30px,5vw,44px)}
}

/* Zwei gleich breite Spalten im media-split. Als Klasse statt als Angabe
   direkt am Element: Letzteres würde die einspaltige Darstellung auf
   schmalen Bildschirmen aushebeln. */
@media (min-width:861px){
  .media-split--gleich{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
}

/* ---------- Weitere Seiten im Kopfmenü ----------
   Am Ende der Hauptnavigation steht ein Schalter mit drei Strichen, der
   eine kurze Liste selten benötigter Seiten aufklappt. So bleibt die
   sichtbare Leiste schmal, ohne dass Standorte und Fachpersonenseite
   unerreichbar sind. */
.nav-mehr{position:relative;display:flex;align-items:center}
.nav-mehr__schalter{display:inline-flex;align-items:center;justify-content:center;
  width:38px;height:34px;padding:0;cursor:pointer;
  background:none;border:1px solid var(--line);border-radius:var(--radius);
  transition:border-color .25s var(--ease)}
.nav-mehr__linien{display:grid;gap:4px;width:17px}
.nav-mehr__linien span{display:block;height:1.5px;background:var(--ink);
  transition:transform .3s var(--ease),opacity .3s var(--ease)}
.site-header[data-transparent="true"]:not(.is-stuck) .nav-mehr__schalter{border-color:rgba(251,248,244,.45)}
.site-header[data-transparent="true"]:not(.is-stuck) .nav-mehr__linien span{background:#FBF8F4}
.nav-mehr__schalter[aria-expanded="true"] .nav-mehr__linien span:nth-child(2){opacity:0}

/* Der Selektor nennt den durchsichtigen Kopfbereich mit, weil dessen
   Regel sonst spezifischer wäre und die Einträge weiß auf hell setzt. */
.nav-desktop .nav-mehr__liste{position:absolute;right:0;top:calc(100% + 16px);z-index:120;
  min-width:270px;padding:10px;margin:0;list-style:none;
  background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:0 18px 40px rgba(15,33,43,.16);display:grid;gap:2px}
.nav-desktop .nav-mehr__liste[hidden]{display:none}
.site-header .nav-desktop .nav-mehr__liste a{display:block;padding:9px 12px;border-radius:6px;
  font-family:var(--sans);font-size:.92rem;color:var(--ink);
  border-bottom:0;text-decoration:none;transition:background .2s var(--ease)}
.site-header .nav-desktop .nav-mehr__liste a:hover{background:var(--paper-2);border-bottom:0}
.nav-mehr__liste li.abgesetzt{margin-top:8px;padding-top:10px;border-top:1px solid var(--line-soft)}

/* Standorte im mobilen Menü als Untereinträge, danach abgesetzt die
   Seite für Fachpersonen. */
/* Gruppenüberschrift im mobilen Menü. Sieht aus wie ein Hauptpunkt,
   ist aber kein Link, weil es dafür keine eigene Seite gibt. */
/* Gleiche Darstellung wie die Hauptpunkte: dieselbe Schrift, dieselbe
   Größe und dieselbe Stärke. Die Schriftstärke wird bewusst nicht
   gesetzt, damit sie wie bei den Links vom Grundtext geerbt wird. */
.mobile-nav__gruppe{display:block;font-family:var(--serif);font-size:1.3rem;
  padding:6px 0;margin-top:0;color:var(--ink)}

/* Hellere Abdunklung für Titelbilder, die von Haus aus hell sind.
   Der Verlauf bleibt links und unten kräftig genug, damit die weiße
   Schrift lesbar bleibt, hellt die Bildmitte aber deutlich auf. */
.hero--hell .hero__media::after{
  background:linear-gradient(190deg,rgba(9,22,30,.30) 0%,rgba(9,22,30,.06) 32%,
    rgba(9,22,30,.34) 70%,rgba(9,22,30,.58) 100%),
    linear-gradient(90deg,rgba(9,22,30,.62) 0%,rgba(9,22,30,.46) 30%,
    rgba(9,22,30,.12) 52%,rgba(9,22,30,0) 66%)}

/* ---------- Broschüren zum Herunterladen ----------
   Cover links, Text und Schaltfläche rechts. Auf schmalen Bildschirmen
   rücken sie untereinander. Bewusst als ruhige Karte gestaltet, nicht
   als Downloadverzeichnis. */
.dokument{display:grid;grid-template-columns:200px 1fr;gap:clamp(22px,3vw,34px);
  align-items:start;padding:clamp(22px,3vw,30px);
  background:var(--paper-2);border-radius:var(--radius)}
.dokument + .dokument{margin-top:clamp(18px,2.4vw,26px)}
.dokument__cover{margin:0;line-height:0}
.dokument__cover img{display:block;width:100%;height:auto;border-radius:4px;
  box-shadow:0 10px 26px rgba(15,33,43,.16)}
.dokument h3{margin:0}
.dokument p{margin-top:10px;max-width:56ch}
.dokument .btn-row{margin-top:18px}
@media (max-width:700px){
  .dokument{grid-template-columns:1fr}
  .dokument__cover{max-width:240px}
}

/* ---------- Artikel & Wissen ----------
   Schmale Textspalte für längere Fließtexte. Bewusst enger als die
   übrigen Inhalte, damit Zeilen gut lesbar bleiben. Vorbereitet für
   weitere Artikel, ohne dass dafür etwas umgebaut werden muss. */
.artikel{width:min(100% - 2*var(--gut),62ch);margin-inline:auto}
.artikel > p{margin-top:1.15em}
.artikel > h2{margin-top:clamp(38px,4.4vw,58px)}
.artikel > h2 + p{margin-top:.85em}
.artikel__kern{font-family:var(--serif);font-size:clamp(1.18rem,1.9vw,1.5rem);
  line-height:1.4;color:var(--lake);margin:clamp(30px,3.4vw,42px) 0;
  padding-left:22px;border-left:2px solid var(--lake-2)}
/* Bild im Artikel, genau auf Textbreite. */
.artikel__bild{margin:clamp(30px,3.6vw,44px) 0;width:100%}
.artikel__bild img{display:block;width:100%;height:auto;border-radius:var(--radius)}
.artikel__bild figcaption{font-family:var(--sans);font-size:.85rem;line-height:1.5;
  color:var(--stone);margin-top:12px}
.artikel__autor{display:grid;grid-template-columns:112px 1fr;gap:clamp(20px,2.6vw,28px);
  align-items:start;margin-top:clamp(46px,5vw,64px);padding-top:clamp(28px,3.4vw,40px);
  border-top:1px solid var(--line-soft)}
.artikel__autor img{display:block;width:100%;height:auto;border-radius:50%}
.artikel__autor h2{font-size:1.05rem;font-family:var(--sans);font-weight:600;
  letter-spacing:.01em;margin:0}
@media (max-width:600px){
  .artikel__autor{grid-template-columns:1fr}
  .artikel__autor img{max-width:112px}
}

/* Hervorhebungen im Artikel. Die Grundschrift steht auf 300; ein
   schlichtes strong ergäbe nur 400 und wäre kaum zu erkennen. */
.artikel strong{font-weight:500;color:var(--ink)}

/* Trennlinien im Infos-Menü, auf beiden Bildschirmgrößen gleich:
   eine dünne Linie zwischen den Einträgen, eine kräftigere beim
   Themenwechsel. Die Trenner haben keine Höhe und kosten deshalb
   fast keinen Platz. Für Screenreader sind sie unsichtbar. */
.nav-desktop .nav-mehr__liste li + li{border-top:1px solid var(--line-soft)}
.nav-desktop .nav-mehr__liste li.trenner,
.mobile-nav li.trenner{height:0;padding:0;border-top:2px solid var(--lake-2);
  opacity:.55}
/* Kein zusätzlicher Abstand: Der Gruppentrenner sitzt genau dort, wo
   sonst die dünne Linie stünde, und ist nur kräftiger gezeichnet. */
.nav-desktop .nav-mehr__liste li.trenner{margin:0 12px}
.mobile-nav li.trenner{margin:0}
/* Doppelte Linien vermeiden: Der Eintrag vor einem Trenner und der
   Trenner selbst zeichnen sonst zwei Striche übereinander. */
.mobile-nav li:has(+ li.trenner) a{border-bottom:0}
.nav-desktop .nav-mehr__liste li.trenner + li{border-top:0}