@font-face{font-family:'Geist';font-weight:300;font-style:normal;font-display:swap;src:url('schrift/geist-300.woff2') format('woff2')}
@font-face{font-family:'Geist';font-weight:400;font-style:normal;font-display:swap;src:url('schrift/geist-400.woff2') format('woff2')}

:root{--grund:#ffffff;--vorder:#111111;--grau:#5f5f5f;--hell:#a8a8a8;
  --linie:#e4e4e4;--fein:#f0f0f0;--kopf:rgba(255,255,255,.94);
  --rand:max(40px,calc((100vw - 1180px)/2 + 40px));--achse:calc(var(--rand) + 4px);
  --orange:#FF5F01;color-scheme:light}
html[data-thema="dunkel"]{--grund:#111111;--vorder:#ffffff;--grau:#a2a2a2;--hell:#6b6b6b;
  --linie:#2b2b2b;--fein:#1e1e1e;--kopf:rgba(17,17,17,.94);color-scheme:dark}
/* Rueckfall auf --schwarz fuer alte Regeln */
:root{--schwarz:var(--vorder)}
@media(min-width:1280px){:root{--achse:min(calc(var(--rand) * .75),calc(var(--rand) - 26px))}}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--grund);overflow-x:hidden;color:var(--vorder);
  transition:background .25s,color .25s;
  font-family:'Geist',system-ui,-apple-system,sans-serif;font-weight:400;
  font-size:18px;line-height:1.72;-webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility}
a{color:inherit}
.bahn{max-width:1180px;margin:0 auto;padding:0 40px}



.hero{padding:150px 0 180px;max-width:960px}
.hero h1{font-size:clamp(34px,4.9vw,64px);line-height:1.1;font-weight:300;
  letter-spacing:-.018em;margin:0 0 42px}
.lead{font-size:clamp(18px,1.5vw,22px);line-height:1.62;font-weight:300;
  color:var(--grau);max-width:600px;margin:0 0 56px}

.cta{display:inline-block;font-family:inherit;font-size:16px;font-weight:300;
  color:var(--schwarz);background:none;border:0;border-bottom:1px solid var(--schwarz);
  padding:0 0 5px;cursor:pointer;transition:border-bottom-width .12s}
.cta:hover{border-bottom-width:2px}
.cta.gross{font-size:19px}

section,.schluss,footer{position:relative}
section{padding:124px 0}
.trenner::before{content:"";position:absolute;top:0;left:calc(var(--achse) + 16px);right:0;
  height:2px;background:var(--linie);
  transform:scaleX(var(--f,1));transform-origin:left center}
.trenner::after{content:"";position:absolute;top:-3px;left:calc(var(--achse) - 4px);
  width:8px;height:8px;border-radius:50%;background:var(--vorder);z-index:21;
  box-shadow:0 0 0 12px var(--grund);transform:scale(var(--p,1));transform-origin:center}
.nr{display:flex;align-items:center;gap:14px;font-size:11px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--hell);margin-bottom:52px}
.nr i{display:block;width:46px;height:1px;background:var(--linie)}
h2{font-size:clamp(25px,2.7vw,36px);line-height:1.25;font-weight:300;
  letter-spacing:-.012em;margin:0 0 30px;max-width:780px}
p{max-width:580px;margin:0 0 24px}
.unter{color:var(--grau);max-width:600px;margin-bottom:56px}
.grau{color:var(--grau)}

.zitate{max-width:820px;margin:0 0 20px;border-top:1px solid var(--fein)}
.zitate p{font-size:clamp(19px,1.9vw,25px);line-height:1.45;font-weight:300;
  color:var(--vorder);max-width:none;margin:0;padding:28px 0;border-bottom:1px solid var(--fein)}
.hart{margin-top:58px;max-width:620px}
.hart p{color:var(--vorder);max-width:none}
.hart p:first-child{font-size:clamp(19px,1.7vw,23px);line-height:1.6;font-weight:300;margin-bottom:26px}
.hart p:last-child{margin-bottom:0}

.bausteine{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:1fr 1fr;gap:0;max-width:1000px;border-top:1px solid var(--fein)}
.bausteine li{padding:36px 44px 40px 0;border-bottom:1px solid var(--fein);position:relative}
.bausteine li:nth-child(odd){border-right:1px solid var(--fein);padding-right:56px}
.bausteine li:nth-child(even){padding-left:56px}
.bz{display:block;font-size:11px;letter-spacing:.22em;color:var(--hell);margin-bottom:12px}
.bausteine h3{font-size:20px;font-weight:400;margin:0 0 12px}
.bausteine p{max-width:none;color:var(--grau);margin:0;font-size:17px;line-height:1.7}

.fakten{max-width:820px;margin:0}
.fakt{display:grid;grid-template-columns:180px 1fr;gap:36px;padding:26px 0;
  border-top:1px solid var(--fein)}
.fakt:last-child{border-bottom:1px solid var(--fein)}
.fakt dt{font-size:11px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--hell);padding-top:5px}
.fakt dd{margin:0;color:var(--grau);font-size:17px;line-height:1.7}

.werte{display:grid;grid-template-columns:1fr 1fr;gap:52px 72px;max-width:1000px}
.werte h3{font-size:19px;font-weight:400;margin:0 0 10px;line-height:1.4}
.werte p{max-width:none;color:var(--grau);margin:0;font-size:17px;line-height:1.7}

".portraets{display:grid;grid-template-columns:1fr 1fr;gap:72px;max-width:1000px;margin-bottom:56px}
.portraets figure{margin:0}
.portraets img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;
  filter:grayscale(1) contrast(1.06);background:var(--fein)}
.portraets figcaption{font-size:11px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--hell);margin-top:16px}
@media(max-width:860px){.portraets{grid-template-columns:1fr;gap:40px}}

.leute{display:grid;grid-template-columns:1fr 1fr;gap:72px;max-width:1000px;margin-bottom:52px}
.leute h3{font-size:20px;font-weight:400;margin:0 0 16px}
.leute p{max-width:none;color:var(--grau);font-size:17px;line-height:1.7}

.schluss{padding:150px 0 130px}
.schluss h2{margin-bottom:26px}
.schluss p{margin-bottom:48px}

footer{padding:52px 0 70px}
.satz{font-size:20px;font-weight:300;margin-bottom:44px}
.fuss{font-size:13px;color:var(--hell);display:flex;gap:26px;flex-wrap:wrap}
.fuss a{text-decoration:none}
.fuss a:hover{color:var(--grau)}

/* Kopf */
header{position:fixed;top:0;left:0;right:0;z-index:30;padding:26px 0;
  background:transparent;border-bottom:1px solid transparent;
  transition:padding .3s,background .3s,border-color .3s}
header.kompakt .marke{width:168px;height:20px}
header.kompakt{padding:11px 0;background:var(--kopf);
  backdrop-filter:blur(8px);border-bottom-color:var(--linie)}
.kopfinhalt{display:flex;align-items:center;justify-content:space-between;gap:20px}
.kopfrechts{display:flex;align-items:flex-end;gap:30px}
.thema{position:relative;width:46px;height:10px;padding:0;border:0;background:none;
  cursor:pointer;flex:none;align-self:flex-end;margin-bottom:5px}
.thema::before{content:"";position:absolute;left:22px;right:0;top:4px;height:2px;background:var(--hell);opacity:.55}
.thema i{position:absolute;top:0;left:0;width:10px;height:10px;border-radius:50%;
  background:var(--vorder);transition:left .3s cubic-bezier(.4,0,.2,1)}
html[data-thema="dunkel"] .thema i{left:36px}
html[data-thema="dunkel"] .thema::before{left:0;right:22px}
@media(prefers-reduced-motion:reduce){.thema i{transition:none}
  .trenner::before,.trenner::after{transform:none !important}}

/* Das Zeichen zeichnet sich alle 5 Sekunden ueber dem Wort */
.marke .voll .p1,.marke .voll .p2,.marke .voll .l1,.marke .voll .l2{opacity:0}
.marke .voll .p1{animation:ms-p1 5s cubic-bezier(.2,.7,.2,1) infinite}
.marke .voll .l1{animation:ms-l1 5s cubic-bezier(.4,0,.2,1) infinite;transform-origin:2168px 46px}
.marke .voll .p2{animation:ms-p2 5s cubic-bezier(.2,.7,.2,1) infinite}
.marke .voll .l2{animation:ms-l2 5s cubic-bezier(.4,0,.2,1) infinite;transform-origin:7494px 46px}

@keyframes ms-p1{
  0%{opacity:0;transform:translateX(-2600px)}
  4%{opacity:1;transform:translateX(-2200px)}
  16%{opacity:1;transform:translateX(0)}
  88%{opacity:1;transform:translateX(0)}
  96%,100%{opacity:0;transform:translateX(0)}
}
@keyframes ms-l1{
  0%,16%{opacity:1;transform:scaleX(0)}
  32%{opacity:1;transform:scaleX(1)}
  88%{opacity:1;transform:scaleX(1)}
  96%,100%{opacity:0;transform:scaleX(1)}
}
@keyframes ms-p2{
  0%,32%{opacity:0;transform:scale(.2);transform-origin:7310px 46px}
  40%{opacity:1;transform:scale(1);transform-origin:7310px 46px}
  88%{opacity:1;transform:scale(1);transform-origin:7310px 46px}
  96%,100%{opacity:0;transform:scale(1);transform-origin:7310px 46px}
}
@keyframes ms-l2{
  0%,40%{opacity:1;transform:scaleX(0)}
  56%{opacity:1;transform:scaleX(1)}
  88%{opacity:1;transform:scaleX(1)}
  96%,100%{opacity:0;transform:scaleX(1)}
}
@media(prefers-reduced-motion:reduce){
  .marke .voll .p1,.marke .voll .p2,.marke .voll .l1,.marke .voll .l2{opacity:1;animation:none}
}
.marke{position:relative;display:block;width:210px;height:24px;color:var(--schwarz)}

.marke svg{position:absolute;left:0;top:50%;display:block;
  transition:opacity .3s,transform .38s cubic-bezier(.4,0,.2,1)}
.marke .voll{width:210px;height:auto;transform:translateY(-50%);transition:width .38s cubic-bezier(.4,0,.2,1)}

header.kompakt .voll{width:168px}

header .knopf.mini{opacity:0;pointer-events:none;transform:translateY(-4px);
  transition:opacity .3s,transform .3s}
header.kompakt .knopf.mini{opacity:1;pointer-events:auto;transform:none}
@media(prefers-reduced-motion:reduce){header,.marke,.marke svg,header .knopf.mini{transition:none}}

/* Knopf: der Punkt geht den Weg */
.knopf{position:relative;display:inline-block;text-align:left;font-family:inherit;
  touch-action:pan-y;-webkit-tap-highlight-color:transparent;
  font-size:19px;font-weight:300;letter-spacing:.005em;color:var(--vorder);
  background:none;border:0;padding:0 0 22px;cursor:pointer;min-width:300px}
.knopf.gross{font-size:22px;min-width:340px;padding-bottom:26px}
.knopf.mini{font-size:14px;min-width:168px;padding-bottom:16px}
.knopf>span:not(.faecher){display:block;margin-bottom:14px}
.knopf.mini>span:not(.faecher){margin-bottom:9px}

.weg{position:absolute;left:0;right:0;bottom:0;height:10px;display:block}
.weg::before{content:"";position:absolute;left:0;right:0;top:4px;height:2px;background:var(--hell);opacity:.55}
.weg b{position:absolute;left:0;bottom:0;width:10px;height:10px;border-radius:50%;
  background:var(--orange);transition:left .5s cubic-bezier(.4,0,.2,1)}
.knopf.mini .weg b{width:8px;height:8px;bottom:1px}
@media(hover:hover){.knopf:hover .weg b{left:calc(100% - 10px)}}
.knopf:focus-visible .weg b{left:calc(100% - 10px)}
@media(hover:hover){.knopf.mini:hover .weg b{left:calc(100% - 8px)}}
.knopf.mini:focus-visible .weg b{left:calc(100% - 8px)}

.faecher{position:absolute;left:100%;bottom:0;margin:0;height:16px;width:0;overflow:hidden;
  transform:translateY(3px);pointer-events:none;
  transition:width .45s cubic-bezier(.33,0,.1,1) 0s;
  -webkit-mask-image:linear-gradient(90deg,#000 0,#000 45%,transparent 96%);
  mask-image:linear-gradient(90deg,#000 0,#000 45%,transparent 96%)}
.faecher svg{display:block;height:16px;width:812px;margin-left:15px}
.faecher .fp{fill:var(--orange)}
.faecher .fl{fill:var(--hell);opacity:.55}
@media(hover:hover){.knopf:hover .faecher{width:260px;transition-delay:.42s}}
.knopf:focus-visible .faecher{width:260px;transition-delay:.42s}
@media(prefers-reduced-motion:reduce){.faecher,.weg b{transition:none}}

.knopfnote{font-size:13px;color:var(--hell);margin:18px 0 0}
.nur-zeiger{display:inline}
.nur-finger{display:none}
@media(hover:none){.nur-zeiger{display:none}.nur-finger{display:inline}}



/* Funnel */
.overlay{position:fixed;inset:0;background:var(--grund);z-index:50;display:flex;flex-direction:column}
.overlay[hidden]{display:none}
.ovkopf{display:flex;align-items:center;gap:28px;padding:30px 40px 0}
.fortschritt{flex:1;height:1px;background:var(--linie)}
.fortschritt i{display:block;height:1px;background:var(--schwarz);width:0;transition:width .3s}
.zu{background:none;border:0;font-size:28px;line-height:1;color:var(--hell);cursor:pointer;padding:0}
.zu:hover{color:var(--schwarz)}
.ovmitte{flex:1;display:flex;align-items:center;overflow-y:auto}
.schritt{max-width:760px;margin:0 auto;padding:40px;width:100%}
.frage{font-size:clamp(24px,3vw,38px);line-height:1.25;font-weight:300;
  letter-spacing:-.012em;margin:0 0 14px}
.hinweis{color:var(--hell);font-size:15px;margin:0 0 40px}
.optionen{display:grid;gap:0;border-top:1px solid var(--fein)}
.opt{text-align:left;font-family:inherit;font-size:18px;font-weight:300;color:var(--vorder);
  background:none;border:0;border-bottom:1px solid var(--fein);padding:20px 4px;cursor:pointer;
  transition:padding-left .12s}
.opt:hover{padding-left:14px}
.opt.aktiv{padding-left:14px;border-bottom-color:var(--schwarz)}
.feld{width:100%;font-family:inherit;font-size:19px;font-weight:300;color:var(--schwarz);
  background:none;border:0;border-bottom:1px solid var(--linie);padding:12px 0;outline:none;resize:none}
.feld:focus{border-bottom-color:var(--schwarz)}
.feld::placeholder{color:var(--hell)}
.feldgruppe{display:grid;gap:30px;max-width:520px}
.fehler{color:#b00020;font-size:14px;margin-top:16px;min-height:20px}
.ovfuss{display:flex;justify-content:space-between;align-items:center;padding:0 40px 42px;
  max-width:840px;margin:0 auto;width:100%}
.zurueckbtn{background:none;border:0;font-family:inherit;font-size:14px;color:var(--hell);cursor:pointer;padding:0}
.zurueckbtn:hover{color:var(--grau)}
.zurueckbtn[hidden]{visibility:hidden;display:block}

/* Rechtstexte */
.recht{padding:90px 0 130px;max-width:760px}
.recht h1{font-size:clamp(28px,3vw,40px);font-weight:300;letter-spacing:-.01em;margin:0 0 48px}
.recht h2{font-size:19px;font-weight:400;margin:48px 0 14px}
.recht p,.recht li{color:var(--grau);max-width:680px}
.recht ul{padding-left:18px;margin:0 0 24px}
.recht li{margin-bottom:6px}
.recht a{color:var(--schwarz)}
.zurueck{display:inline-block;margin-bottom:60px;font-size:13px;color:var(--hell);text-decoration:none}
.zurueck:hover{color:var(--grau)}

@media(max-width:860px){
  :root{--rand:24px}
  .bahn{padding:0 24px}
  .hero{padding:100px 0 110px}
  section{padding:84px 0}
  .bausteine{grid-template-columns:1fr}
  .bausteine li,.bausteine li:nth-child(odd),.bausteine li:nth-child(even){padding:30px 0;border-right:0}
  .werte,.leute{grid-template-columns:1fr;gap:44px}
  .fakt{grid-template-columns:1fr;gap:8px}
  .ovkopf,.ovfuss{padding-left:24px;padding-right:24px}
  .schritt{padding:28px 24px}
}

@media(max-width:700px){
  header .thema{display:none}
  header:not(.kompakt) .thema{display:block}
  header.kompakt .thema{display:none}
  .kopfrechts{gap:0}
}
@media(max-width:560px){
  .marke{width:142px;height:17px}
  .marke .voll{width:142px}
  header.kompakt .marke,header.kompakt .voll{width:116px}
  header{padding:16px 0}
  header.kompakt{padding:9px 0}
  .kopfinhalt{align-items:flex-end;gap:14px}
  .thema{margin-bottom:3px}
  .knopf{font-size:17px;min-width:240px}
  .knopf.gross{font-size:18px;min-width:260px}
  .knopf.mini{font-size:12px;min-width:124px;padding-bottom:13px}
  .knopf.mini>span:not(.faecher){margin-bottom:7px}
  .hero{padding:84px 0 92px}
  .hero h1{font-size:30px}
  section{padding:66px 0}
  .zitate p{font-size:17px;padding:20px 0}
  .hart{padding-left:18px}
  .schluss{padding:90px 0 80px}
  .faecher{display:none}
}

/* Begleiter: grosser Punkt, der auf einer Spur mitwandert */
.spur{position:fixed;left:calc(var(--achse) - 1px);top:210px;bottom:12vh;width:2px;
  background:var(--linie);z-index:20;pointer-events:none;opacity:0;transition:opacity .4s}
.spur.da{opacity:1}
.begleiter{position:fixed;left:calc(var(--achse) - 15px);top:0;width:30px;height:30px;
  border-radius:50%;background:var(--vorder);z-index:22;pointer-events:none;
  opacity:0;transition:opacity .4s,background .18s;will-change:transform}
.begleiter.treffer{background:var(--orange)}
.begleiter.da{opacity:1}
@media(max-width:1279px){.spur,.begleiter{display:none}}
@media(prefers-reduced-motion:reduce){.spur,.begleiter{display:none}}