@font-face{font-family:"Archivo";font-style:normal;font-display:swap;font-weight:100 900;font-stretch:62% 125%;src:url(/fonts/archivo-latin-wdth-normal.woff2) format("woff2-variations");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Archivo";font-style:normal;font-display:swap;font-weight:100 900;font-stretch:62% 125%;src:url(/fonts/archivo-latin-ext-wdth-normal.woff2) format("woff2-variations");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

:root{
  --paper:#F3F5F4;
  --surface:#FFFFFF;
  --ink:#0E1A1C;
  --muted:#56666A;
  --rule:#C8D2D1;
  --track:#AEBCBB;
  --signal:#17704F;
  --signal-ink:#FFFFFF;
  --band:#0E1A1C;
  --band-ink:#E7EEED;
  --band-muted:#9FB0B2;
  --band-rule:#2C3C3F;
  --danger:#A3262A;
  --measure:36rem;
  --page:74rem;
  --gutter:clamp(1rem,4vw,3rem);
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --paper:#0C1416;--surface:#121D20;--ink:#E5ECEB;--muted:#93A4A6;--rule:#26363A;--track:#3B4E52;
    --signal:#4CC08F;--signal-ink:#06140F;--band:#E5ECEB;--band-ink:#0E1A1C;--band-muted:#4B5C5F;--band-rule:#C3CFCE;--danger:#F08A8C;
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --paper:#0C1416;--surface:#121D20;--ink:#E5ECEB;--muted:#93A4A6;--rule:#26363A;--track:#3B4E52;
  --signal:#4CC08F;--signal-ink:#06140F;--band:#E5ECEB;--band-ink:#0E1A1C;--band-muted:#4B5C5F;--band-rule:#C3CFCE;--danger:#F08A8C;
  color-scheme:dark;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--paper);color:var(--ink);font-family:"Archivo",system-ui,-apple-system,"Segoe UI",sans-serif;font-size:1.0625rem;line-height:1.6;font-weight:400;font-stretch:100%;font-feature-settings:"kern","liga";-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration-line:underline;text-decoration-thickness:1px;text-decoration-color:var(--signal);text-underline-offset:.22em}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:2px solid var(--signal);outline-offset:3px;border-radius:2px}
p{margin:0 0 1em}
.skip{position:absolute;left:-999px;top:0;background:var(--ink);color:var(--paper);padding:.6rem 1rem;z-index:10}
.skip:focus{left:1rem;top:1rem}

.page{max-width:var(--page);margin:0 auto;padding:0 var(--gutter)}

/* Kopfzeile */
.masthead{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;padding:1.6rem 0;border-bottom:1px solid var(--rule)}
.brand{display:inline-flex;align-items:center;gap:.7rem;text-decoration:none;color:var(--ink)}
.brand svg{width:30px;height:22px;flex:none}
.brand span{font-weight:780;font-stretch:125%;font-size:1.05rem;letter-spacing:-.01em;line-height:1}
.nav{display:flex;gap:clamp(1rem,2.4vw,2rem);font-size:.95rem}
.nav a{text-decoration:none;color:var(--muted)}
.nav a:hover{color:var(--ink)}
@media (max-width:44rem){.nav{display:none}}

/* Einstieg */
.hero{padding:clamp(3.5rem,9vw,7rem) 0 clamp(3rem,7vw,6rem)}
.hero-body{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(2rem,6vw,6rem);align-items:center}
.hero h1{margin:0 0 clamp(2rem,5vw,3.6rem);font-size:clamp(2.5rem,6.6vw,5.4rem);line-height:.98;font-weight:760;font-stretch:125%;letter-spacing:-.025em;text-wrap:balance}
.lead{max-width:30rem;font-size:clamp(1.1rem,1.6vw,1.28rem);line-height:1.55;color:var(--muted);margin:0 0 2.2rem}
.actions{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.8rem}
.button{display:inline-flex;align-items:center;justify-content:center;min-height:3rem;padding:.75rem 1.4rem;border:0;border-radius:3px;background:var(--signal);color:var(--signal-ink);font:inherit;font-weight:620;font-stretch:108%;font-size:1rem;text-decoration:none;cursor:pointer}
.button:hover{filter:brightness(1.08)}
.quiet{color:var(--muted)}
.quiet a{color:var(--ink)}

.junction{width:100%;height:auto;overflow:visible}
.junction .rail{fill:none;stroke:var(--track);stroke-width:2}
.junction .route{fill:none;stroke:var(--signal);stroke-width:4;stroke-linecap:round;stroke-linejoin:round}
.junction .node{fill:var(--paper);stroke:var(--ink);stroke-width:2}
.junction .hub{fill:var(--ink)}
.junction .stop{fill:var(--track)}
.junction .stop.on{fill:var(--signal)}
.junction text{font-family:"Archivo",system-ui,sans-serif;font-size:15px;fill:var(--muted);font-stretch:100%}
.junction text.on{fill:var(--ink);font-weight:620}
.junction text.src{fill:var(--ink);font-weight:620}
@media (prefers-reduced-motion:no-preference){
  .junction .route{stroke-dasharray:1;stroke-dashoffset:1;animation:draw 1.3s cubic-bezier(.6,.05,.25,1) .45s forwards}
  .junction .stop.on,.junction text.on{opacity:0;animation:appear .35s ease-out 1.65s forwards}
}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes appear{to{opacity:1}}

/* Abschnitte */
.section{padding:clamp(3.5rem,8vw,6.5rem) 0;border-top:1px solid var(--rule)}
.section-head{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(1.5rem,5vw,4.5rem);align-items:start}
h2{margin:0 0 1rem;font-size:clamp(1.7rem,3.2vw,2.35rem);line-height:1.08;font-weight:730;font-stretch:118%;letter-spacing:-.018em;text-wrap:balance}
h3{margin:0 0 .45rem;font-size:1.12rem;line-height:1.3;font-weight:660;font-stretch:108%}
.intro{color:var(--muted);max-width:28rem;margin:0}

/* Ablauf */
.steps{list-style:none;margin:clamp(2.5rem,5vw,3.5rem) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2.2rem;counter-reset:step;position:relative}
.steps::before{content:"";position:absolute;left:0;right:0;top:1.05rem;height:2px;background:var(--track)}
.steps li{position:relative;counter-increment:step;padding-top:3.4rem;max-width:22rem}
.steps li::before{content:counter(step);position:absolute;top:0;left:0;width:2.2rem;height:2.2rem;display:grid;place-items:center;border-radius:50%;background:var(--paper);border:2px solid var(--ink);font-weight:700;font-size:.95rem;font-variant-numeric:tabular-nums}
.steps li:last-child::before{background:var(--signal);border-color:var(--signal);color:var(--signal-ink)}
.steps p{color:var(--muted);margin:0}

/* Grundsätze */
.principles{margin:0;padding:0;list-style:none}
.principles li{display:grid;grid-template-columns:minmax(0,15rem) minmax(0,1fr);gap:.4rem 2rem;padding:1.35rem 0;border-top:1px solid var(--rule)}
.principles li:last-child{border-bottom:1px solid var(--rule)}
.principles h3{margin:0}
.principles p{margin:0;color:var(--muted);max-width:var(--measure)}

/* Partner */
.band{background:var(--band);color:var(--band-ink)}
.band .section{border-top:0}
.band h2{color:var(--band-ink)}
.band p{color:var(--band-muted);max-width:var(--measure)}
.band .facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.5rem 2.2rem;margin:2.6rem 0 0;padding:1.8rem 0 0;border-top:1px solid var(--band-rule)}
.band dt{font-weight:640;font-stretch:108%;color:var(--band-ink);margin-bottom:.3rem}
.band dd{margin:0;color:var(--band-muted)}
.band a{color:var(--band-ink)}
.band .mail{display:inline-block;margin-top:.6rem;font-size:clamp(1.2rem,2.4vw,1.55rem);font-weight:680;font-stretch:115%;letter-spacing:-.01em}

/* Kontakt */
.contact{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(2rem,5vw,4.5rem);align-items:start}
.address{font-style:normal;color:var(--muted);margin-top:1.6rem;line-height:1.7}
.address strong{color:var(--ink);font-weight:640}
form{background:var(--surface);border:1px solid var(--rule);border-radius:4px;padding:clamp(1.3rem,3vw,2.2rem);display:grid;grid-template-columns:1fr 1fr;gap:1.2rem 1.4rem}
.field{display:grid;gap:.4rem}
.field.wide{grid-column:1/-1}
label{font-size:.95rem;font-weight:600}
input,textarea{width:100%;font:inherit;font-size:1rem;color:var(--ink);background:var(--paper);border:1px solid var(--track);border-radius:3px;padding:.7rem .8rem;line-height:1.4}
textarea{min-height:9.5rem;resize:vertical}
input:focus-visible,textarea:focus-visible{outline:2px solid var(--signal);outline-offset:1px;border-color:var(--signal)}
.hp{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.form-foot{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem 1.5rem}
.form-foot p{margin:0;font-size:.9rem;color:var(--muted);max-width:26rem}

/* Rechtstexte und Rückmeldungen */
.doc{max-width:44rem;padding:clamp(3rem,8vw,5.5rem) 0 clamp(3rem,7vw,5rem)}
.doc h1{margin:0 0 2.2rem;font-size:clamp(2.2rem,5vw,3.4rem);line-height:1.02;font-weight:760;font-stretch:125%;letter-spacing:-.022em}
.doc h2{font-size:1.25rem;font-stretch:110%;letter-spacing:-.005em;margin:2.4rem 0 .6rem}
.doc p,.doc li{color:var(--muted)}
.doc p strong{color:var(--ink);font-weight:600}
.doc ul{padding-left:1.2rem;margin:0 0 1em}
.doc .stand{margin-top:2.6rem;font-size:.92rem}
.notice{max-width:40rem;padding:clamp(4rem,12vw,8rem) 0}
.notice h1{margin:0 0 1.2rem;font-size:clamp(2.2rem,5vw,3.4rem);line-height:1.02;font-weight:760;font-stretch:125%;letter-spacing:-.022em}
.notice p{color:var(--muted);font-size:1.15rem;max-width:32rem}
.notice .actions{margin-top:2rem}

/* Fußzeile */
.footer{border-top:1px solid var(--rule);padding:2rem 0 2.6rem;display:flex;flex-wrap:wrap;justify-content:space-between;gap:1rem 2rem;font-size:.9rem;color:var(--muted)}
.footer nav{display:flex;gap:1.6rem}
.footer a{color:var(--muted);text-decoration:none}
.footer a:hover{color:var(--ink);text-decoration:underline}

@media (max-width:56rem){
  .hero-body{grid-template-columns:1fr}
  .hero figure{max-width:32rem}
  .section-head,.contact{grid-template-columns:1fr}
  .band .facts{grid-template-columns:1fr}
}
@media (max-width:44rem){
  .steps{grid-template-columns:1fr;gap:2rem}
  .steps::before{display:none}
  .steps li{padding:0 0 0 3.6rem}
  .steps li:not(:last-child)::after{content:"";position:absolute;left:calc(1.1rem - 1px);top:2.2rem;bottom:-2rem;width:2px;background:var(--track)}
  .principles li{grid-template-columns:1fr}
  form{grid-template-columns:1fr}
}
figure{margin:0}