/* Prozesswende: Der Bildfahrplan. Eine durchgehende Linie trägt die Seite. */
@font-face{font-family:"Bricolage Grotesque";src:url("../fonts/bricolage-latin.woff2") format("woff2");font-weight:600 800;font-style:normal;font-display:swap}
@font-face{font-family:"Inter";src:url("../fonts/inter-latin.woff2") format("woff2");font-weight:400 700;font-style:normal;font-display:swap}

:root{
  --violet:#5B3FE0; --violet-dark:#4528C2; --lime:#C8F169; --ink:#1B1038;
  --muted:#5A5472; --tint:#F4F1FF; --grid:#EAE5FB; --grid-2:#DDD5F7; --track:#CFC6F3; --on-violet:#E6E0FF; --on-ink:#CFC6F3;
  --error:#B3261E;
  --font-head:"Bricolage Grotesque","Arial Narrow",Arial,sans-serif; --font-body:"Inter",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  --gut:20px; --lane:52px; --pad:clamp(72px,9vw,140px); --maxw:1180px;
  --fs-body:1.0625rem; --fs-lead:clamp(1.125rem,1rem + .5vw,1.375rem);
  --fs-h1:clamp(2.45rem,1rem + 4.6vw,5rem); --fs-h2:clamp(2rem,1.2rem + 3vw,3.75rem); --fs-h3:clamp(1.25rem,1.1rem + .6vw,1.625rem);
  --hero-draw-h:34vh; --hero-pad-top:clamp(28px,5vh,64px);
  --ease:cubic-bezier(.16,1,.3,1);
}
@media (min-width:760px){:root{--gut:40px;--lane:96px}}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:84px;-webkit-text-size-adjust:100%;scrollbar-color:var(--violet) var(--tint)}
body{margin:0;font:400 var(--fs-body)/1.65 var(--font-body);color:var(--ink);background:#fff;caret-color:var(--violet);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
::selection{background:var(--lime);color:var(--ink)}
img,svg{display:block;max-width:100%}
a{color:var(--violet);text-underline-offset:.2em;text-decoration-thickness:1.5px}
a:hover{color:var(--violet-dark)}
:focus-visible{outline:3px solid var(--violet);outline-offset:3px;border-radius:4px}
.on-dark :focus-visible,.on-violet :focus-visible,.site-footer :focus-visible{outline-color:var(--lime)}
h1,h2,h3{font-family:var(--font-head);font-weight:700;margin:0;letter-spacing:-.025em;text-wrap:balance;line-height:1.04}
h2{font-size:var(--fs-h2);max-width:16ch}
h3{font-size:var(--fs-h3);line-height:1.2;letter-spacing:-.015em}
p{margin:0 0 1em;max-width:68ch}
.skip{position:absolute;left:-999px;top:8px;background:var(--ink);color:#fff;padding:10px 14px;border-radius:8px;z-index:100}
.skip:focus{left:8px}

/* ---------- Kopf ---------- */
.site-head{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.92);backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid var(--grid)}
.site-head .in{width:min(var(--maxw),100% - 2*var(--gut));margin:auto;height:68px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.brand img{height:26px;width:auto}
@media (min-width:760px){.brand img{height:30px}}
.btn.sm{white-space:nowrap}
.nav{display:flex;align-items:center;gap:clamp(14px,3vw,34px);font-size:.95rem;font-weight:600}
.nav a{color:var(--ink);text-decoration:none}
.nav a:hover{color:var(--violet)}
.nav a.btn{color:#fff}
.nav .link{display:none}
@media (min-width:760px){.nav .link{display:inline}}

/* ---------- Buttons ---------- */
.btn{--bg:var(--violet);--fg:#fff;display:inline-flex;align-items:center;gap:.7em;min-height:52px;padding:.8em 1.35em;border-radius:12px;background:var(--bg);color:var(--fg);font:600 1rem/1.2 var(--font-body);text-decoration:none;border:0;cursor:pointer;transition:background .25s,transform .25s var(--ease),box-shadow .25s}
.btn:hover{background:var(--violet-dark);color:#fff;transform:translateY(-2px);box-shadow:0 10px 24px -10px rgba(91,63,224,.7)}
.btn:active{transform:none}
.btn svg{width:22px;height:22px;flex:none;transition:transform .3s var(--ease)}
.btn:hover svg{transform:translateX(4px)}
.btn svg path{fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.btn.sm{min-height:42px;padding:.5em .85em;font-size:.88rem;border-radius:10px}
@media (min-width:760px){.btn.sm{padding:.55em 1.05em;font-size:.95rem}}
.btn.lime{--bg:var(--lime);--fg:var(--ink)}
.btn.lime:hover{background:#d6f78c;color:var(--ink)}
.btn[disabled]{opacity:.65;cursor:progress;transform:none}
.textlink{display:inline-flex;align-items:center;gap:.5em;font-weight:600;color:var(--ink);text-decoration:underline;text-decoration-color:var(--violet);text-decoration-thickness:2px;text-underline-offset:.3em}
.textlink:hover{color:var(--violet)}

/* ---------- Hero ---------- */
.hero{position:relative;overflow:hidden;min-height:max(660px,calc(100svh - 68px));display:flex;flex-direction:column;
  background-color:#fff;
  background-image:linear-gradient(var(--grid-2) 1px,transparent 1px),linear-gradient(90deg,var(--grid-2) 1px,transparent 1px),linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);
  background-size:120px 120px,120px 120px,24px 24px,24px 24px;background-position:-1px -1px}
.hero-copy{position:relative;z-index:2;width:min(var(--maxw),100% - 2*var(--gut));margin:0 auto;padding:var(--hero-pad-top) 0 clamp(20px,3vh,36px)}
.hero h1{font-size:var(--h1-size,var(--fs-h1));max-width:var(--h1-measure,15ch);line-height:.98;letter-spacing:-.035em}
.hl{background:linear-gradient(transparent 58%,var(--lime) 58%,var(--lime) 90%,transparent 90%);-webkit-box-decoration-break:clone;box-decoration-break:clone;padding:0 .06em}
.hero .sub{font-size:var(--sub-size,var(--fs-lead));line-height:1.5;color:var(--muted);max-width:52ch;margin:1em 0 1.4em}
.hero .acts{transform:translateY(var(--cta-y,0));display:flex;flex-wrap:wrap;align-items:center;gap:14px 28px}
.hd{position:relative;z-index:1;width:100%;margin-top:auto;transform:translate(var(--draw-x,0),var(--draw-y,0))}
.hd .draw{width:100%;height:auto}
.hd-w{display:none;--tx:92.36%;--ly:52.7%}.hd-n{display:block;--tx:94.36%;--ly:48%}
@media (min-width:760px){.hd-n{display:none}.hd-w{display:block}}
.drop{position:absolute;left:var(--tx);top:var(--ly);bottom:-1px;width:6px;margin-left:-3px;background:var(--violet);border-radius:3px 3px 0 0}
.js .drop{transform-origin:top;transform:scaleY(0);animation:grow .9s var(--ease) 2.3s forwards}
@keyframes grow{to{transform:none}}
.hero-diag{display:none;position:absolute;z-index:0;right:0;top:calc(68px + 2vh);width:var(--diag-w,min(40vw,560px));height:auto}
@media (min-width:1200px){.hero-diag{display:block}}
.hero-diag .dg{fill:none;stroke:#C4B9F2;stroke-width:1.4;stroke-linecap:round}
.hero-diag .dg.hi{stroke:var(--violet);stroke-width:2.4;opacity:.5}
.umstieg{position:relative;height:64px;background:#fff;--rx:calc((100% - min(var(--maxw),100% - 2*var(--gut)))/2 + var(--lane)/2)}
.umstieg i{position:absolute;background:var(--violet)}
.umstieg .u1{left:var(--tx0,92.36%);margin-left:-3px;top:0;width:6px;height:35px}
.umstieg .u2{left:var(--rx);right:calc(100% - var(--tx0,92.36%));top:32px;height:6px;margin-left:-2px;margin-right:-3px}
.umstieg .u3{left:var(--rx);margin-left:-2px;top:32px;bottom:-1px;width:4px}
@media (max-width:759px){.umstieg{--tx0:94.36%}.umstieg .u1{left:94.36%}.umstieg .u2{right:calc(100% - 94.36%)}}

/* Zeichnung */
.draw .st{stroke:var(--grid-2);stroke-width:1}
.draw .tg{fill:none;stroke:#B6A9EF;stroke-width:1.4;stroke-linejoin:round;stroke-linecap:round}
.draw .tg.hi,.glyph .tg.hi{stroke:var(--violet);stroke-width:2.4;opacity:.62}
.glyph .tg{fill:none;stroke:#B6A9EF;stroke-width:1.5;stroke-linejoin:round;stroke-linecap:round}
.draw .ln,.glyph .ln{fill:none;stroke:var(--violet);stroke-width:6;stroke-linecap:round}
.draw .ar,.glyph .ar{fill:none;stroke:var(--violet);stroke-width:6;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.glyph .ln,.glyph .ar{stroke-width:5;vector-effect:none}
.glyph .tg.hi{stroke-width:2.4;vector-effect:none}
.draw .pt-ring{fill:#fff;stroke:var(--violet);stroke-width:3;vector-effect:non-scaling-stroke}
.draw .pt,.glyph .pt{fill:var(--lime);stroke:var(--ink);stroke-width:2;vector-effect:non-scaling-stroke}
.draw .lb{font:500 16px var(--font-body);fill:var(--muted);paint-order:stroke;stroke:#fff;stroke-width:5px;stroke-linejoin:round}
.tint .draw .lb{stroke:var(--tint)}
.draw .lb.lb-hi,.draw .lb.lb-hi2{fill:var(--ink);font-weight:600}
.draw .lb.ax{fill:var(--muted);font-weight:600}
.draw-n .lb{font-size:15px}

/* Zeichen-Animation: ohne JS sofort sichtbar, mit JS gezeichnet */
.js .draw .tg,.js .glyph .tg,.js .draw .ln,.js .glyph .ln{stroke-dasharray:1;stroke-dashoffset:1}
.js .draw .ar,.js .glyph .ar{opacity:0}
.js .draw .pt,.js .glyph .pt,.js .draw .pt-ring{opacity:0;transform-box:fill-box;transform-origin:center;transform:scale(.2)}
.js .draw .lb{opacity:0}
.js .hero .draw .tg{animation:dr 1.5s var(--ease) calc(.12s*var(--i,0) + .15s) forwards}
.js .hero .draw .ln{animation:dr 1.1s var(--ease) 1.5s forwards}
.js .hero .draw .ar{animation:fade .3s ease 2.4s forwards}
.js .hero .draw .pt,.js .hero .draw .pt-ring{animation:pop .6s var(--ease) 1.35s forwards}
.js .hero .draw .lb{animation:fade .6s ease 1.9s forwards}
.js .in-view .draw .tg,.js .in-view .glyph .tg{animation:dr 1.3s var(--ease) calc(.1s*var(--i,0)) forwards}
.js .in-view .draw .ln,.js .in-view .glyph .ln{animation:dr 1s var(--ease) calc(.5s + .15s*var(--i,0)) forwards}
.js .in-view .draw .ar,.js .in-view .glyph .ar{animation:fade .3s ease 1.3s forwards}
.js .in-view .draw .pt,.js .in-view .glyph .pt{animation:pop .5s var(--ease) .5s forwards}
.js .in-view .draw .lb{animation:fade .6s ease .5s forwards}
@keyframes dr{to{stroke-dashoffset:0}}
@keyframes fade{to{opacity:1}}
@keyframes pop{to{opacity:1;transform:scale(1)}}

/* ---------- Abschnitte mit Linie ---------- */
.sec{position:relative}
.sec .wrap{position:relative;width:min(var(--maxw),100% - 2*var(--gut));margin:0 auto;padding:var(--pad) 0 var(--pad) var(--lane)}
.sec{--tr:var(--track)}
.sec .wrap::before,.sec .wrap::after{content:"";position:absolute;top:0;bottom:-1px}
.sec .wrap::before{left:calc(var(--lane)/2 - 10px);width:20px;background:linear-gradient(var(--tr),var(--tr)) center/4px 100% no-repeat,repeating-linear-gradient(to bottom,var(--tr) 0 2px,transparent 2px 28px) center/14px 100% no-repeat}
.sec .wrap::after{left:calc(var(--lane)/2 - 2px);width:4px;border-radius:2px;background:var(--violet);transform-origin:top;transform:scaleY(var(--fill,1));will-change:transform}
.sec.tint{background:var(--tint)}
.sec.leistungen{background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);background-size:24px 24px;background-position:-1px -1px}
.sec.on-dark{background:var(--ink);color:#fff}
.sec.on-dark{--tr:rgba(255,255,255,.24)}
.sec.on-dark .wrap::after{background:var(--lime)}
.sec.on-violet{background:var(--violet);color:#fff}
.sec.on-violet{--tr:rgba(255,255,255,.34)}
.sec.on-violet .wrap::after{background:var(--lime)}
.stop{position:relative}
.stop::before{content:"";position:absolute;left:calc(-1*var(--lane)/2 - 9px);top:.38em;width:18px;height:18px;border-radius:50%;background:#fff;border:3px solid var(--violet);z-index:2;transition:background .4s,transform .5s var(--ease)}
.tint .stop::before{background:var(--tint)}
.sec.reached .stop::before{background:var(--lime);transform:scale(1.15)}
.on-dark .stop::before{background:var(--ink);border-color:var(--lime)}
.on-violet .stop::before{background:var(--violet);border-color:var(--lime)}
.on-dark.reached .stop::before,.on-violet.reached .stop::before{background:var(--lime)}

.lead{font-size:var(--fs-lead);line-height:1.55}
.muted{color:var(--muted)}
.on-dark p{color:var(--on-ink)}
.on-violet p{color:var(--on-violet)}
.on-dark h2,.on-dark h3,.on-violet h2,.on-violet h3{color:#fff}

/* Zeitverlust */
.verlust .cols{display:grid;gap:clamp(8px,2vw,40px);margin-top:clamp(28px,4vw,44px)}
@media (min-width:900px){.verlust .cols{grid-template-columns:1fr 1fr}}
.verlust .week-wrap{margin-top:clamp(40px,6vw,80px)}
.week{width:100%;height:auto;overflow:visible}
.week-n{display:block}.week:not(.week-n){display:none}
@media (min-width:760px){.week-n{display:none}.week:not(.week-n){display:block}}
.caption{font-size:.9rem;color:var(--muted);margin-top:10px}

/* Leistungen als Fahrten */
.fahrten{margin-top:clamp(32px,5vw,56px);border-top:1px solid var(--grid-2)}
.fahrt{display:grid;gap:12px 32px;padding:clamp(22px,3vw,34px) 0;border-bottom:1px solid var(--grid-2);align-items:center}
.fahrt .glyph{width:100%;max-width:240px;height:auto}
.fahrt p{margin:0;color:var(--muted)}
@media (min-width:900px){.fahrt{grid-template-columns:240px minmax(0,1fr) minmax(0,1.2fr)}.fahrt h3{max-width:18ch}}
.abschluss{margin-top:clamp(36px,5vw,64px);font:700 clamp(1.5rem,1.1rem + 1.6vw,2.5rem)/1.15 var(--font-head);letter-spacing:-.02em;max-width:26ch;text-wrap:balance}

/* Ablauf: Haltepunkte auf der Linie */
.ablauf h2{max-width:20ch}
.steps{margin:clamp(36px,6vw,80px) 0 0;padding:0;list-style:none}
.step{position:relative;display:grid;gap:8px 40px;padding:clamp(22px,4vw,44px) 0;border-top:1px solid rgba(255,255,255,.14)}
.step::before{content:"";position:absolute;left:calc(-1*var(--lane)/2 - 10px);top:clamp(30px,4.6vw,56px);width:20px;height:20px;border-radius:50%;background:var(--ink);border:3px solid var(--lime);z-index:2;transition:background .4s,transform .5s var(--ease)}
.step.reached::before{background:var(--lime);transform:scale(1.2)}
.step .num{font:700 clamp(4.5rem,3rem + 8vw,9rem)/.8 var(--font-head);letter-spacing:-.05em;color:transparent;-webkit-text-stroke:2px rgba(200,241,105,.55);transition:color .6s,-webkit-text-stroke-color .6s;margin-bottom:6px}
.step.reached .num{color:var(--lime);-webkit-text-stroke-color:var(--lime)}
.step h3{color:#fff;margin-bottom:.4em}
.step p{margin:0}
@media (min-width:900px){.step{grid-template-columns:240px minmax(0,1fr);align-items:start}.step p{max-width:56ch;font-size:1.125rem}}

/* Ergebnis + Kosten */
.ergebnis .cols{display:grid;gap:clamp(40px,6vw,88px)}
@media (min-width:980px){.ergebnis .cols{grid-template-columns:1.05fr .95fr;align-items:start}}
.weiche{width:100%;max-width:560px;height:auto;margin-top:28px;overflow:visible}
.kosten-list{list-style:none;margin:0 0 1.4em;padding:0;background:#fff;border-radius:14px;box-shadow:0 18px 40px -26px rgba(27,16,56,.4);overflow:hidden}
.kosten-list li{position:relative;padding:16px 20px 16px 50px;border-bottom:1px solid var(--grid)}
.kosten-list li:last-child{border-bottom:0}
.kosten-list li::before{content:"";position:absolute;left:20px;top:1.35em;width:12px;height:12px;border-radius:50%;border:3px solid var(--violet)}
.kosten h2{margin-bottom:.5em}
.kosten .preisnote{font:700 clamp(1.25rem,1rem + 1vw,1.6rem)/1.25 var(--font-head);letter-spacing:-.01em;max-width:30ch}

/* Werkzeuge */
.tools-signs{list-style:none;margin:clamp(30px,5vw,56px) 0 0;padding:0;display:grid;gap:0}
.sign{position:relative;padding:20px 0;border-top:1px solid rgba(255,255,255,.14)}
@media (min-width:900px){
  .tools-signs{grid-template-columns:repeat(4,1fr)}
  .sign{padding:56px 24px 0 0;border-top:0}
  .sign::before{content:"";position:absolute;left:0;right:0;top:18px;height:3px;background:rgba(255,255,255,.28)}
  .sign:last-child::before{right:auto;width:55%}
  .sign::after{content:"";position:absolute;left:0;top:10px;width:19px;height:19px;border-radius:50%;background:var(--lime);border:3px solid var(--ink);box-sizing:content-box;margin:-3px 0 0 -3px}
}
.sign h3{font-size:clamp(1.6rem,1.2rem + 1vw,2.1rem);color:var(--lime);margin-bottom:.35em}
.sign p{margin:0;font-size:1rem}
.daten{margin-top:clamp(26px,4vw,44px);max-width:60ch;font-size:var(--fs-lead)}
.on-dark .daten{color:#fff}

/* Über mich */
.ueber .cols{display:grid;gap:clamp(24px,4vw,56px)}
@media (min-width:900px){.ueber .cols{grid-template-columns:1fr 1.1fr;align-items:start}}
.ueber h2{max-width:none;font-size:clamp(2.6rem,1.6rem + 4vw,4.5rem);line-height:.98}
.ueber p{font-size:var(--fs-lead);line-height:1.55}
.ueber .portrait{margin:clamp(20px,3vw,32px) 0 0;max-width:340px}
.ueber .portrait img{display:block;width:100%;height:auto;border-radius:var(--r,16px)}

/* FAQ */
.faq-list{margin-top:clamp(28px,4vw,48px);border-top:1px solid var(--grid-2)}
.faq-list details{border-bottom:1px solid var(--grid-2)}
.faq-list summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:22px 0;font:700 clamp(1.1rem,1rem + .5vw,1.4rem)/1.3 var(--font-head);letter-spacing:-.01em;transition:color .2s}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary:hover{color:var(--violet)}
.faq-list summary .pm{position:relative;flex:none;width:22px;height:22px}
.faq-list summary .pm::before,.faq-list summary .pm::after{content:"";position:absolute;left:0;right:0;top:50%;height:3px;margin-top:-1.5px;background:var(--violet);border-radius:2px;transition:transform .35s var(--ease)}
.faq-list summary .pm::after{transform:rotate(90deg)}
.faq-list details[open] summary .pm::after{transform:rotate(0)}
.faq-list details[open] summary{color:var(--violet)}
.faq-list .ans{padding:0 0 24px;max-width:64ch;color:var(--muted)}
.faq-list .ans p{margin:0}

/* Anfrage */
.anfrage .cols{display:grid;gap:clamp(32px,5vw,72px)}
@media (min-width:980px){.anfrage .cols{grid-template-columns:.8fr 1.2fr;align-items:start}}
.anfrage .wrap::before,.anfrage .wrap::after{bottom:auto;height:calc(var(--pad) + 30px)}
.anfrage .stop::before{width:26px;height:26px;left:calc(-1*var(--lane)/2 - 13px);top:.3em;background:var(--lime);border-color:var(--ink)}
.anfrage h2{max-width:11ch}
.sheet{background:#fff;color:var(--ink);border-radius:18px;padding:clamp(22px,3.4vw,40px);box-shadow:0 30px 60px -30px rgba(10,4,40,.65)}
.field{margin-bottom:20px}
.field label,.field legend{display:block;font-weight:600;font-size:.97rem;margin-bottom:6px;color:var(--ink)}
.field .opt{font-weight:400;color:var(--muted)}
.field input[type=text],.field input[type=email],.field select,.field textarea{width:100%;min-height:50px;padding:12px 14px;font:400 1rem/1.4 var(--font-body);color:var(--ink);background:#fff;border:1.5px solid #BDB2EA;border-radius:10px;transition:border-color .2s,box-shadow .2s}
.field textarea{min-height:130px;resize:vertical}
.field select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M4 7l6 6 6-6' fill='none' stroke='%235B3FE0' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;background-size:18px;padding-right:44px}
.field input:hover,.field select:hover,.field textarea:hover{border-color:var(--violet)}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--violet);box-shadow:0 0 0 4px rgba(91,63,224,.22)}
.sheet .hint{font-size:.88rem;color:var(--muted);margin:6px 0 0}
.sheet .field-error{display:none;color:var(--error);font-size:.9rem;font-weight:600;margin:6px 0 0}
.field.has-error .field-error{display:block}
.on-violet .sheet p{color:inherit}
.on-violet .sheet .hint{color:var(--muted)}
.on-violet .sheet .field-error{color:var(--error)}
.on-violet .sheet #form-success p{color:var(--muted)}
.field.has-error input[type=text],.field.has-error input[type=email],.field.has-error select,.field.has-error textarea{border-color:var(--error)}
.two{display:grid;gap:0 18px}
@media (min-width:620px){.two{grid-template-columns:1fr 1fr}}
.check{display:flex;gap:12px;align-items:flex-start}
.check input{width:22px;height:22px;margin:2px 0 0;accent-color:var(--violet);flex:none}
.check label{margin:0;font-weight:400}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-status{margin:14px 0 0;font-weight:600}
.form-status.is-error{color:var(--error)}
#form-wrap.is-sent form{display:none}
#form-success{padding:12px 0}
#form-success h3{font-size:clamp(1.6rem,1.2rem + 1.4vw,2.2rem);margin-bottom:.4em}
.on-violet .sheet #form-success h3{color:var(--ink)}
#form-success p{color:var(--muted)}
#form-success:focus{outline:none}

/* Fuß */
.site-footer{background:var(--ink);color:var(--on-ink);padding:44px 0 56px;border-top:1px solid rgba(255,255,255,.12)}
.site-footer .in{width:min(var(--maxw),100% - 2*var(--gut));margin:auto;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:20px}
.site-footer img{height:28px;width:auto}
.site-footer a{color:#fff}
.site-footer a:hover{color:var(--lime)}
.site-footer p{margin:0;color:var(--on-ink);font-size:.95rem}

/* Rechtstexte */
.legal{width:min(760px,100% - 2*var(--gut));margin:0 auto;padding:clamp(48px,8vw,96px) 0}
.legal h1{font-size:clamp(2.2rem,1.4rem + 3vw,3.5rem);margin-bottom:.6em}
.legal h2{font-size:1.5rem;margin:1.8em 0 .5em;max-width:none}
.legal .todo{background:var(--tint);border-radius:12px;padding:16px 18px;color:var(--muted)}

/* Einblenden */
.js .rv{opacity:0;transform:translateY(18px);transition:opacity .8s var(--ease) calc(var(--d,0)*70ms),transform .8s var(--ease) calc(var(--d,0)*70ms)}
.js .rv.in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js .draw .tg,.js .glyph .tg,.js .draw .ln,.js .glyph .ln{stroke-dashoffset:0!important;animation:none!important}
  .js .draw .ar,.js .glyph .ar,.js .draw .pt,.js .glyph .pt,.js .draw .pt-ring,.js .draw .lb{opacity:1!important;transform:none!important;animation:none!important}
  .js .rv{opacity:1;transform:none;transition:none}
  .sec .wrap::after{transform:none!important}
  .js .drop{transform:none;animation:none}
  .btn,.btn svg{transition:none}
}
@media (max-width:759px){.weiche .lb{font-size:24px}.weiche{max-width:none}}
.on-dark a:hover,.on-violet a:hover{color:var(--lime)}
.cta{margin:clamp(28px,4vw,48px) 0 0}

.weiche-n{display:block}.weiche:not(.weiche-n){display:none}
@media (min-width:760px){.weiche-n{display:none}.weiche:not(.weiche-n){display:block}}
.weiche-n .lb{font-size:15px}