/* REGIO 50 Landingpage. Werte aus dem Design System REGIO 50 (marke/tokens.json). */
:root{
  --porcelain:#f7f6f2; --anthrazit:#293340; --lavendel:#a99af2;
  --surface:var(--porcelain); --surface-raised:#fff; --surface-tint:#efede6;
  --line:#dedbd2; --line-strong:#8c8a82;
  --ink:var(--anthrazit); --ink-muted:#5a6472;
  --akzent:var(--lavendel); --akzent-hover:#bdb1f5; --on-akzent:var(--anthrazit);
  --akzent-text:#5b47c7; --akzent-soft:#ebe7fc;
  --fehler:#b3261e; --bestaetigt:#2e6b4f;
  --font-display:"Outfit","Avenir Next","Segoe UI",system-ui,sans-serif;
  --font-text:"Source Sans 3","Segoe UI",system-ui,sans-serif;
  --radius-sm:4px; --radius-md:8px; --radius-lg:16px; --radius-full:9999px;
  --container:1200px; --text-max:640px;
  --pad-x:32px; --pad-y:112px;
  --shadow-card:0 1px 2px #2933400d,0 8px 24px -8px #2933401f;
  --focus-ring:0 0 0 2px var(--surface),0 0 0 4px var(--akzent-text);
}
[data-theme="anthrazit"]{
  --surface:var(--anthrazit); --surface-raised:#323d4c; --surface-tint:#222b36;
  --line:#415063; --line-strong:#8a94a3;
  --ink:var(--porcelain); --ink-muted:#b9bfc8;
  --akzent-text:var(--lavendel); --akzent-soft:#3a3466;
  --fehler:#f2a097; --bestaetigt:#8fd1ae;
  --shadow-card:0 8px 24px -8px #00000066;
  --focus-ring:0 0 0 2px var(--surface),0 0 0 4px var(--lavendel);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:88px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--surface);color:var(--ink);font:400 17px/27px var(--font-text);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
::selection{background:var(--lavendel);color:var(--anthrazit)}
img,svg{display:block;max-width:100%}
a{color:var(--akzent-text);text-underline-offset:4px;text-decoration-thickness:1.5px}
:focus-visible{outline:none;box-shadow:var(--focus-ring);border-radius:var(--radius-sm)}
h1,h2,h3{font-family:var(--font-display);font-weight:600;margin:0;text-wrap:balance}
h2{font-size:40px;line-height:46px;letter-spacing:-.015em}
h3{font-size:20px;line-height:26px}
p{margin:0}
.eyebrow{font:600 13px/16px var(--font-display);letter-spacing:.12em;text-transform:uppercase;color:var(--akzent-text);margin:0 0 12px}
.lead{font-size:20px;line-height:31px}
.muted{color:var(--ink-muted)}
.small{font-size:14px;line-height:21px}
.wrap{max-width:var(--container);margin:0 auto;padding:0 var(--pad-x)}
.section{background:var(--surface);color:var(--ink);padding:var(--pad-y) 0}
.section--tint{background:var(--surface-tint)}
.section-head{max-width:760px;margin-bottom:56px}
.section-head .lead{margin-top:20px;max-width:var(--text-max)}
.icon{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;flex:none}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:52px;padding:0 30px;border-radius:var(--radius-full);border:2px solid transparent;font:600 16px/20px var(--font-display);letter-spacing:.005em;text-decoration:none;cursor:pointer;background:var(--akzent);color:var(--on-akzent);transition:background-color .18s ease,transform .18s ease}
.btn:hover{background:var(--akzent-hover)}
.btn:active{transform:translateY(1px)}
.btn--klein{min-height:40px;padding:0 18px;font-size:14px}
.btn--outline{background:transparent;color:var(--ink);border-color:var(--lavendel)}
.btn--outline:hover{background:var(--surface-tint)}
.textlink{display:inline-flex;align-items:center;gap:6px;font:600 16px/20px var(--font-display);color:var(--akzent-text);text-decoration:none}
.textlink .icon{width:18px;height:18px;transition:transform .18s ease}
.textlink:hover .icon{transform:translateX(3px)}

/* Kopfzeile */
.site-header{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:var(--anthrazit);color:var(--porcelain)}
.site-header .bar{height:72px;display:flex;align-items:center;justify-content:space-between;padding:0 64px}
.site-header img{height:30px;width:auto}
.site-header nav{display:flex;align-items:center;gap:36px;font:500 15px/1 var(--font-display)}
.site-header nav a:not(.btn){color:var(--porcelain);text-decoration:none;padding:6px 0;background:linear-gradient(var(--lavendel),var(--lavendel)) left bottom/0 1.5px no-repeat;transition:background-size .2s ease}
.site-header nav a:not(.btn):hover{background-size:100% 1.5px}
.site-header .btn--outline{color:var(--porcelain)}
.site-header .btn--outline:hover{background:#323d4c}

/* Einstieg: zwei Seiten, eine Naht */
.hero{position:relative;height:57.5vw;max-height:960px;min-height:640px;overflow:hidden;background:linear-gradient(90deg,var(--porcelain) 50%,var(--anthrazit) 50%);--s:min(1vw,16.7px)}
.hero-eb{position:absolute;top:6.8%;left:0;right:0;height:16px;text-align:center}
.hero-eb span{position:absolute;inset:0;font:600 13px/16px var(--font-display);letter-spacing:.12em}
.hero-eb .a{color:#5b47c7;clip-path:inset(0 50% 0 0)}.hero-eb .b{color:var(--lavendel);clip-path:inset(0 0 0 50%)}
.hero-h1{position:absolute;left:0;right:0;top:11.1%}
.hero-h1 h1,.hero-h1 .h1d{text-align:center;font:600 calc(var(--s)*5.55)/1.05 var(--font-display);letter-spacing:-.03em}
.hero-h1 h1{color:var(--anthrazit);clip-path:inset(0 50% 0 0)}
.hero-h1 .h1d{position:absolute;inset:0;color:var(--porcelain);clip-path:inset(0 0 0 50%)}
.hero-intro{position:absolute;top:37.7%;left:0;right:0;display:grid;grid-template-columns:1fr 1fr;font-size:calc(var(--s)*1.32);line-height:1.58}
.hero-intro p{max-width:calc(var(--s)*30.5)}
.hero-intro .l{justify-self:end;text-align:right;padding-right:calc(var(--s)*3.9);color:var(--anthrazit)}
.hero-intro .r{padding-left:calc(var(--s)*3.9);color:var(--porcelain)}
.hero-intro .r b{font-weight:600}
.hero-intro .textlink{margin-top:16px;color:var(--lavendel)}
.hero-net{position:absolute;inset:0;width:100%;height:100%;z-index:0}
.hero-eb,.hero-h1,.hero-intro,.hero-lbl,.hero-facts{z-index:1}
.hero .draw{animation:draw 1.4s cubic-bezier(.16,1,.3,1) .4s forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.hero .pulse{animation:pulse 1.2s cubic-bezier(.16,1,.3,1) 1.5s both}
@keyframes pulse{from{opacity:0;transform:scale(.3)}to{opacity:1;transform:scale(1)}}
.hero-cta{position:absolute;left:50%;top:73.8%;transform:translate(-50%,-50%);z-index:3}
.hero-cta .btn{min-height:calc(var(--s)*3.9);padding:0 calc(var(--s)*2.4);font-size:calc(var(--s)*1.18);box-shadow:0 0 0 8px var(--anthrazit),0 0 0 9px #415063}
.hero-lbl{position:absolute;font:600 calc(var(--s)*1.04)/1.2 var(--font-display)}
.hero-lbl small{display:block;font:400 calc(var(--s)*.97)/1.35 var(--font-text);margin-top:4px;color:#b9bfc8}
.hero-lbl--klinik{left:25.7%;top:81.9%;width:7%;text-align:center;color:var(--anthrazit)}
.hero-lbl--arzt{left:65.8%;top:79.7%;color:var(--porcelain);padding:6px 8px;border-radius:4px}
.hero-facts{position:absolute;bottom:5.3%;left:0;right:0;display:grid;grid-template-columns:1fr 1fr;font:600 calc(var(--s)*1.8)/1 var(--font-display);letter-spacing:-.01em}
.hero-facts p{display:flex;gap:calc(var(--s)*3)}
.hero-facts .l{justify-content:flex-end;padding-right:calc(var(--s)*3.9);color:var(--anthrazit)}
.hero-facts .r{padding-left:calc(var(--s)*3.9);color:var(--porcelain)}
.hero-m{display:none}
/* Breite Bildschirme: Button und Beschriftungen an die Grafik koppeln (1 Einheit = Skalierung der Grafik, preserveAspectRatio meet, unten verankert; Kreise laufen über den Rand hinaus) */
@media (min-width:1101px){
  .hero{container-type:size}
  .hero-cta,.hero-lbl{--u:min(100cqw / 1440,100cqh / 828)}
  .hero-cta{left:50cqw;top:calc(100cqh - 217 * var(--u))}
  .hero-lbl--klinik{left:calc(50cqw - 300 * var(--u));top:calc(100cqh - 150 * var(--u));width:auto;white-space:nowrap;transform:translateX(-50%)}
  .hero-lbl--arzt{left:calc(50cqw + 228 * var(--u));top:calc(100cqh - 168 * var(--u))}
}

/* 4 Neuer Arbeitsplatz */
.split{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:80px;align-items:center}
.split .prose p+p{margin-top:16px}
.prose{max-width:var(--text-max)}
.pull{margin-top:28px;font:600 22px/30px var(--font-display);color:var(--ink)}
.umkreis{position:relative}
.umkreis svg{width:100%;height:auto;overflow:visible}
@media (max-width:640px){.umkreis .nur-gross{display:none}}

/* 5 Eckpunkte als verbundene Stationen */
.stationen{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:32px;list-style:none;margin:0;padding:0}
.stationen::before{content:"";position:absolute;left:28px;right:calc((100% - 96px)/4 - 28px);top:27px;height:2px;background:var(--akzent-text);transform-origin:left;transform:scaleX(var(--fill,1));transition:transform 1.2s cubic-bezier(.16,1,.3,1)}
.stationen{grid-template-rows:auto auto 1fr;row-gap:0}
.station{position:relative;display:grid;grid-row:span 3;grid-template-rows:subgrid;align-content:start}
.station .wert{align-self:end}
.station .knoten{width:56px;height:56px;border-radius:50%;display:grid;place-items:center;background:var(--surface);border:2px solid var(--ink);margin-bottom:24px;position:relative;z-index:1}
.station .knoten i{width:14px;height:14px;border-radius:50%;background:var(--akzent)}
.station .wert{font:600 56px/56px var(--font-display);letter-spacing:-.025em}
.station .wert small{font-size:.45em;color:var(--akzent-text);letter-spacing:0;margin-left:2px}
.station h3{margin:14px 0 8px;font-size:18px}
.station p{color:var(--ink-muted);font-size:16px;line-height:25px}
.station--null .wert{font-size:44px;line-height:48px}

/* 6 Nähe */
.naehe{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0;border-top:1px solid var(--line)}
.naehe article{padding:36px 40px 36px 0;border-bottom:1px solid var(--line);display:grid;grid-template-columns:52px 1fr;gap:20px;align-items:start}
.naehe article:nth-child(odd){border-right:1px solid var(--line)}
.naehe article:nth-child(even){padding-left:40px;padding-right:0}
.scheibe{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;border:1.5px solid var(--ink);color:var(--ink)}
.naehe h3{margin-bottom:8px}
.naehe p{color:var(--ink-muted)}
.beweis{margin-top:64px;display:grid;grid-template-columns:auto 1fr;gap:28px;align-items:center;max-width:900px}
.beweis .ring{width:72px;height:72px;border-radius:50%;border:2px dashed var(--akzent-text);display:grid;place-items:center}
.beweis .ring i{width:16px;height:16px;border-radius:50%;background:var(--ink)}
.beweis p{font:600 28px/36px var(--font-display);letter-spacing:-.01em;text-wrap:balance}

/* 7 Anzeige gegen REGIO 50 */
.gegen{display:grid;grid-template-columns:1fr 1fr;align-items:stretch;position:relative}
.gegen article{padding:48px}
.gegen .anzeige{background:transparent;border:1px solid var(--line-strong);border-right:0;border-radius:var(--radius-lg) 0 0 var(--radius-lg);color:var(--ink)}
.gegen .regio{background:var(--anthrazit);color:var(--porcelain);border-radius:var(--radius-lg);margin:-24px 0;padding:72px 48px;box-shadow:var(--shadow-card)}
.gegen h3{font-size:26px;line-height:32px;margin-bottom:20px}
.gegen p+p{margin-top:14px}
.gegen .anzeige p{color:var(--ink-muted)}
.gegen .regio p{color:#d9dde3}
.gegen .marke{display:flex;align-items:center;gap:10px;font:600 13px/16px var(--font-display);letter-spacing:.12em;margin-bottom:28px}
.gegen .anzeige .marke{color:var(--ink-muted)}
.gegen .regio .marke{color:var(--lavendel)}
.schluss{margin-top:56px;font:600 22px/30px var(--font-display);max-width:760px;text-wrap:balance}

/* 8 Kontaktwege */
.wege{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:64px;align-items:center}
.wege ul{list-style:none;margin:28px 0 0;padding:0}
.wege li{display:grid;grid-template-columns:40px 1fr;gap:16px;align-items:center;padding:14px 0;border-bottom:1px solid var(--line)}
.wege li .icon{color:var(--akzent-text);width:26px;height:26px}
.wege .nach{margin-top:28px}
.orbit svg{width:100%;height:auto}

/* 9 Abgrenzung */
.abgrenz{display:grid;grid-template-columns:.85fr 1.15fr;gap:24px}
.abgrenz article{border-radius:var(--radius-lg);padding:44px}
.abgrenz .pb{border:1px solid var(--line-strong)}
.abgrenz .pb p{color:var(--ink-muted)}
.abgrenz .r50{background:var(--surface-raised);box-shadow:var(--shadow-card)}
.abgrenz h3{font-size:24px;line-height:30px;margin:16px 0 16px}
.abgrenz p+p{margin-top:14px}
.abgrenz .rolle{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.tag{display:inline-flex;align-items:center;gap:8px;height:32px;padding:0 14px;border-radius:var(--radius-full);background:var(--akzent-soft);color:var(--akzent-text);font:600 14px/1 var(--font-display)}


/* 10 Vergleich */
.vergleich{width:100%;border-collapse:separate;border-spacing:0;font-size:16px;line-height:24px}
.vergleich th,.vergleich td{padding:18px 20px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line)}
.vergleich thead th{font:600 16px/20px var(--font-display);border-bottom:2px solid var(--ink);padding-top:0}
.vergleich tbody th{font:600 15px/22px var(--font-display);width:18%;color:var(--ink)}
.vergleich td{color:var(--ink-muted)}
.vergleich .hl{background:var(--surface-raised);color:var(--ink);box-shadow:inset 2px 0 0 var(--akzent),inset -2px 0 0 var(--akzent)}
.vergleich thead .hl{background:var(--akzent);color:var(--on-akzent);border-radius:var(--radius-md) var(--radius-md) 0 0;border-bottom-color:var(--akzent);padding-top:18px;box-shadow:none}
.vergleich tbody tr:last-child .hl{box-shadow:inset 2px 0 0 var(--akzent),inset -2px 0 0 var(--akzent),inset 0 -2px 0 var(--akzent);border-radius:0 0 var(--radius-md) var(--radius-md)}
.vergleich-karten{display:none}

/* 11 Ablauf mit Radar (dunkel) */
.ablauf-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:80px;align-items:start}
.ablauf-radar{position:sticky;top:120px}
.ablauf-radar svg{width:100%;height:auto;max-width:520px;margin:0 auto}
.ablauf-radar figcaption{text-align:center;margin-top:16px}
.schritte{list-style:none;margin:0;padding:0;position:relative}
.schritte::before{content:"";position:absolute;left:23px;top:24px;bottom:24px;width:2px;background:var(--line)}
.schritte .fortschritt{position:absolute;left:23px;top:24px;width:2px;height:calc(var(--p,0)*(100% - 48px));background:var(--lavendel);transition:height .3s linear}
.schritt{position:relative;padding:0 0 48px 80px}
.schritt:last-child{padding-bottom:0}
.schritt .nr{position:absolute;left:0;top:0;width:48px;height:48px;border-radius:50%;display:grid;place-items:center;font:600 18px/1 var(--font-display);background:var(--surface);border:2px solid var(--line-strong);color:var(--ink);transition:background-color .3s,border-color .3s,color .3s}
.schritt.ist-aktiv .nr{background:var(--akzent);border-color:var(--akzent);color:var(--on-akzent)}
.schritt h3{font-size:22px;line-height:28px;padding-top:10px;margin-bottom:10px}
.schritt p{color:var(--ink-muted)}
.schritt p+p{margin-top:10px}
.ablauf-cta{margin-top:56px;padding-left:80px}
.radar-punkt{transition:none}

/* 12 Reporting */
.report{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:72px;align-items:center}
.report .fragen{list-style:none;margin:24px 0 0;padding:0}
.report .fragen li{display:grid;grid-template-columns:28px 1fr;gap:12px;padding:12px 0}
.report .fragen .icon{color:var(--akzent-text);margin-top:2px}
.report .fragen b{font-family:var(--font-display);font-weight:600}
.bericht{background:var(--surface-raised);border-radius:var(--radius-lg);box-shadow:var(--shadow-card);padding:32px;position:relative}
.bericht header{display:flex;justify-content:space-between;align-items:baseline;border-bottom:1px solid var(--line);padding-bottom:16px;margin-bottom:8px}
.bericht header b{font:600 18px/1 var(--font-display)}
.bericht .zeile{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr) minmax(0,1.2fr);gap:12px;padding:12px 0;border-bottom:1px solid var(--line);font-size:15px;line-height:21px}
.bericht .zeile:last-of-type{border-bottom:0}
.bericht .k{font:600 12px/16px var(--font-display);letter-spacing:.08em;color:var(--ink-muted)}
.st{display:inline-flex;align-items:center;gap:6px;font-weight:600}
.st i{width:8px;height:8px;border-radius:50%;background:currentColor}
.st--ja{color:var(--akzent-text)}.st--offen{color:var(--ink-muted)}
.bericht .hinweis{position:absolute;right:20px;bottom:-30px;font-size:13px;color:var(--ink-muted)}

/* 13 Wann passt */
.passt{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:64px;list-style:none;margin:0;padding:0;border-top:1px solid var(--line-strong)}
.passt li{display:grid;grid-template-columns:32px 1fr;gap:16px;padding:24px 0;border-bottom:1px solid var(--line)}
.passt .icon{width:24px;height:24px;color:var(--akzent-text);margin-top:2px;stroke-width:2.25}
.passt h3{font-size:19px;margin-bottom:6px}
.passt p{color:var(--ink-muted);font-size:16px;line-height:25px}

/* 14 Fragen */
.faq{max-width:880px}
.faq details{border-bottom:1px solid var(--line)}
.faq details:first-of-type{border-top:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:24px;align-items:center;padding:24px 0;font:600 19px/26px var(--font-display)}
.faq summary::-webkit-details-marker{display:none}
.faq summary .plus{flex:none;width:32px;height:32px;border-radius:50%;border:1.5px solid var(--line-strong);display:grid;place-items:center;transition:transform .25s ease,background-color .2s}
.faq summary .plus::before,.faq summary .plus::after{content:"";grid-area:1/1;width:12px;height:1.75px;background:var(--ink);border-radius:2px}
.faq summary .plus::after{transform:rotate(90deg);transition:transform .25s ease}
.faq details[open] summary .plus{background:var(--akzent);border-color:var(--akzent)}
.faq details[open] summary .plus::after{transform:rotate(0)}
.faq summary:hover .plus{border-color:var(--ink)}
.faq .antwort{padding:0 56px 28px 0;color:var(--ink-muted);max-width:var(--text-max)}

/* 15 Abschluss */
.abschluss{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:72px;align-items:start}
.anschluss{position:relative;margin-top:40px}
.anschluss::after{content:"";position:absolute;left:110px;top:108.5px;right:-72px;height:3px;background:var(--lavendel)}
.abschluss + .wrap .kontakt-mini{margin-top:40px;border-top:0;padding-top:0}
.anschluss svg{width:220px;max-width:none;height:auto;position:relative;z-index:1}
.anschluss-kz{position:absolute;left:236px;top:-6px;margin:0}
.anschluss-kz b{display:block;font:600 64px/1 var(--font-display);letter-spacing:-.03em}
.anschluss-kz b small{font-size:.45em;color:var(--akzent-text);margin-left:4px;letter-spacing:0}
.anschluss-kz span{display:block;font-size:14px;line-height:20px;color:var(--ink-muted);max-width:180px;margin-top:4px}
.eck{margin-top:28px;font:600 19px/28px var(--font-display)}
.kontakt-mini{margin-top:36px;padding-top:24px;border-top:1px solid var(--line)}
.kontakt-mini a{color:var(--ink);font-weight:600}

/* Formular */
.formular{background:var(--surface-raised);border-radius:var(--radius-lg);box-shadow:var(--shadow-card);padding:44px}
.formular h3{font-size:26px;line-height:32px;margin-bottom:28px}
.feld{margin-bottom:20px}
.feld label{display:block;font:600 15px/20px var(--font-display);margin-bottom:8px}
.feld label .opt{font:400 14px var(--font-text);color:var(--ink-muted);margin-left:6px}
.feld input,.feld textarea,.feld select{width:100%;min-height:50px;padding:12px 14px;border:1.5px solid var(--line-strong);border-radius:var(--radius-sm);background:var(--surface-raised);color:var(--ink);font:400 17px/24px var(--font-text);transition:border-color .15s}
.feld textarea{min-height:120px;resize:vertical}
.feld select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='%23293340' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 10l5 5 5-5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center;padding-right:44px}
.feld input:hover,.feld textarea:hover,.feld select:hover{border-color:var(--ink)}
.feld input:focus,.feld textarea:focus,.feld select:focus{outline:none;border-color:var(--akzent-text);box-shadow:0 0 0 3px var(--akzent-soft)}
.feld .hilfe{display:block;margin-top:6px;font-size:14px;line-height:20px;color:var(--ink-muted)}
.feld .fehler{display:none;align-items:center;gap:6px;margin-top:6px;font-size:14px;line-height:20px;color:var(--fehler);font-weight:600}
.feld .fehler .icon{width:18px;height:18px}
.feld.ist-fehler input,.feld.ist-fehler textarea{border-color:var(--fehler)}
.feld.ist-fehler .fehler{display:flex}
.felder-2{display:grid;grid-template-columns:1fr 1fr;gap:0 20px}
.formular .datenschutz{margin:4px 0 24px;font-size:14px;line-height:21px;color:var(--ink-muted)}
.formular .btn{width:100%}
.formular .btn[disabled]{opacity:.6;cursor:progress}
.formular-meldung{display:none;margin-top:16px;padding:14px 16px;border-radius:var(--radius-md);font-weight:600;align-items:flex-start;gap:10px}
.formular-meldung.ok{display:flex;background:#e6f1eb;color:var(--bestaetigt)}
.formular-meldung.err{display:flex;background:#fbe9e7;color:var(--fehler)}

/* Fußzeile */
.site-footer{background:var(--anthrazit);color:var(--porcelain);padding:80px 0 32px;margin-top:-2px}
.site-footer .grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.3fr;gap:48px}
.site-footer img{height:34px;width:auto}
.site-footer .claim{margin-top:14px;font:500 17px/24px var(--font-display)}
.site-footer .fakt{margin-top:20px;font-size:15px;line-height:23px;color:#b9bfc8;max-width:360px}
.site-footer h4{font:600 13px/16px var(--font-display);letter-spacing:.12em;color:var(--lavendel);margin:6px 0 18px}
.site-footer ul{list-style:none;margin:0;padding:0}
.site-footer li{margin-bottom:10px}
.site-footer a{color:var(--porcelain);text-decoration:none}
.site-footer a:hover{text-decoration:underline}
.site-footer a.btn{color:var(--on-akzent);text-decoration:none}
.site-footer address{font-style:normal;color:#b9bfc8;font-size:15px;line-height:24px}
.site-footer address a{color:var(--porcelain)}
.site-footer .btn{margin-top:20px}
.site-footer .unten{margin-top:64px;padding-top:24px;border-top:1px solid #415063;font-size:14px;color:#b9bfc8}

/* Einblenden */
.reveal{opacity:1;transform:none}
.js .reveal{opacity:0;transform:translateY(16px);transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1)}
.js .reveal.ist-sichtbar{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .js .reveal{opacity:1;transform:none;transition:none}
  .hero .draw{animation:none;stroke-dashoffset:0!important}
  .hero .pulse{animation:none}
  .stationen::before{transition:none}
}

/* Tablet und Handy */
@media (max-width:1100px){
  :root{--pad-y:88px}
  .site-header .bar{padding:0 32px}
  .hero{height:auto;max-height:none;min-height:0;background:none;display:flex;flex-direction:column}
  .hero-eb,.hero-net,.hero-lbl,.hero-h1 .h1d,.hero-cta,.hero-facts{display:none}
  .hero-m{display:block}
  .hero-conn.hero-m{display:flex}
  .hero-factsm.hero-m{display:grid}
  .hero-top{background:var(--porcelain);padding:48px var(--pad-x) 0}
  .hero-top .eyebrow{color:#5b47c7}
  .hero-h1{position:static;background:var(--porcelain);padding:0 var(--pad-x)}
  .hero-h1 h1{clip-path:none;text-align:left;font-size:clamp(36px,7vw,64px);line-height:1.06}
  .hero-intro{position:static;display:block;font-size:18px;line-height:28px}
  .hero-intro p{max-width:none}
  .hero-intro .l{justify-self:auto;text-align:left;background:var(--porcelain);padding:20px var(--pad-x) 44px}
  .hero-intro .r{background:var(--anthrazit);padding:44px var(--pad-x) 8px}
  .hero-intro{display:contents}
  .hero-top{order:1}.hero-h1{order:2}.hero-intro .l{order:3}.hero-conn{order:4}.hero-intro .r{order:5}.hero-factsm{order:6}
  .hero-intro .l{padding-bottom:8px}
  .hero-intro .r{padding-top:8px}
  .hero-conn{flex-direction:column;align-items:center;padding:24px var(--pad-x) 20px;background:linear-gradient(var(--porcelain) 50%,var(--anthrazit) 50%);text-align:center}
  .hero-conn .k-lbl{font:600 15px/1.2 var(--font-display);color:var(--anthrazit);margin-bottom:10px}
  .hero-conn .k-knoten,.hero-conn .a-knoten{width:22px;height:22px;border-radius:50%;flex:none}
  .hero-conn .k-knoten{background:radial-gradient(circle,var(--lavendel) 0 4px,var(--anthrazit) 4.5px)}
  .hero-conn .a-knoten{background:var(--lavendel);box-shadow:0 0 0 6px #a99af233;margin-top:51px}
  .hero-conn .k-linie{width:3px;height:44px;background:var(--anthrazit)}
  .hero-conn .btn{position:relative;box-shadow:0 0 0 6px var(--anthrazit),0 0 0 7px #415063}
  .hero-conn .btn::after{content:"";position:absolute;left:50%;top:100%;width:3px;height:44px;margin-left:-1.5px;margin-top:7px;background:var(--lavendel)}
  .hero-conn .a-lbl{margin-top:10px;font:600 15px/1.3 var(--font-display);color:var(--porcelain)}
  .hero-conn .a-lbl small{display:block;font:400 14px/1.35 var(--font-text);color:#b9bfc8}
  .hero-factsm{background:var(--anthrazit);color:var(--porcelain);grid-template-columns:1fr 1fr;gap:14px 24px;margin:0;padding:28px var(--pad-x) 48px;font:600 22px/1.15 var(--font-display)}
  .split,.wege,.report,.abschluss,.ablauf-grid{grid-template-columns:minmax(0,1fr);gap:48px}
  .anschluss::after{left:88.5px;top:90px;right:auto;bottom:-48px;width:3px;height:auto}
  .ablauf-radar{position:static;max-width:420px;margin:0 auto}
  .site-footer .grid{grid-template-columns:1fr 1fr}
}
@media (max-width:860px){
  .site-header nav a:not(.btn){display:none}
  .stationen{grid-template-columns:1fr 1fr;column-gap:24px;row-gap:0}
  .station p{margin-bottom:40px}
  .stationen::before{display:none}
  .naehe{grid-template-columns:1fr}
  .naehe article,.naehe article:nth-child(odd),.naehe article:nth-child(even){padding:28px 0;border-right:0}
  .gegen{grid-template-columns:1fr;gap:16px}
  .gegen .anzeige{border:1px solid var(--line-strong);border-radius:var(--radius-lg)}
  .gegen .regio{margin:0}
  .abgrenz{grid-template-columns:1fr}
  .vergleich{display:none}
  .vergleich-karten{display:grid;gap:16px}
  .vergleich-karten article{border-radius:var(--radius-lg);padding:28px;border:1px solid var(--line-strong)}
  .vergleich-karten article.hl{background:var(--surface-raised);border:2px solid var(--akzent)}
  .vergleich-karten h3{margin-bottom:12px}
  .vergleich-karten dl{margin:0}
  .vergleich-karten dt{font:600 13px/16px var(--font-display);letter-spacing:.06em;color:var(--ink-muted);margin-top:14px;text-transform:uppercase}
  .vergleich-karten dd{margin:4px 0 0}
}
@media (max-width:640px){
  :root{--pad-x:16px;--pad-y:64px}
  body{font-size:16px;line-height:25px}
  h2{font-size:30px;line-height:36px}
  .lead{font-size:18px;line-height:28px}
  .section-head{margin-bottom:40px}
  .site-header .bar{padding:0 16px;height:64px}
  .site-header img{height:26px}
  .stationen .wert{font-size:44px;line-height:48px}
  .stationen .station--null .wert{font-size:30px;line-height:34px}
  .passt{grid-template-columns:1fr}
  .gegen article,.gegen .regio,.abgrenz article,.formular{padding:28px 22px}
  .felder-2{grid-template-columns:1fr}
  .bericht{padding:22px 16px}
  .bericht .zeile{font-size:14px;line-height:19px;gap:8px}
  .bericht .k{font-size:12px}
  .anschluss svg{width:180px}
  .anschluss-kz{left:196px;top:-10px}
  .anschluss-kz b{font-size:48px}
  .anschluss-kz span{max-width:150px}
  .beweis{grid-template-columns:1fr}
  .beweis p{font-size:23px;line-height:30px}
  .faq summary{font-size:17px;line-height:24px}
  .faq .antwort{padding-right:0}
  .site-footer .grid{grid-template-columns:1fr}
  .schritt{padding-left:68px}
  .ablauf-cta{padding-left:0}
}