/* Kollege K – Stil, hell und dunkel nach Betriebssystem.
   Kontrast (WCAG 2.2) rechnet test/kontrast.test.mjs aus diesen Tokens nach, je Modus, auch an jeder Stufe der Verläufe.
   Mint (--accent) ist nur Fläche, nie Textfarbe: Text in der Akzentfarbe nimmt --accent-ink.
   Das Terminal ist ein Bildschirm und bleibt in beiden Modi dunkel (--t-*).
   Ohne JS steht jeder Zustand fertig da: keine Regel blendet Szene, Bento, Ablauflinie oder Überschriften vorab aus. */
/* hidden gilt immer, auch für Klassen, die display setzen (z. B. .btn) */
[hidden]{display:none!important}
:root{--bg:#0b0d1a;--bg2:#0f1226;--surface:#151936;--line:#262b55;--ink:#eef0ff;--muted:#a9b0d6;--accent:#5eead4;--accent-ink:#5eead4;--accent-2:#a78bfa;--on-accent:#0b0d1a;--warn:#fbbf77;
--k1:#5eead4;--k2:#38bdf8;--k3:#a78bfa;--k-on:#0b0d1a;--k-glow:#5eead4;
--t-bg:#070914;--t-ink:#e6e9ff;--t-muted:#8f97c7;--t-line:#1d2147;--t-accent:#5eead4;--t-warn:#fbbf77;
--serif:ui-serif,Georgia,'DejaVu Serif','Times New Roman',serif;--sans:system-ui,'Segoe UI',Roboto,sans-serif;--mono:ui-monospace,'SFMono-Regular','DejaVu Sans Mono',Menlo,monospace;color-scheme:dark light}
@media (prefers-color-scheme:light){:root{--bg:#f6f7fc;--bg2:#eceefa;--surface:#ffffff;--line:#d6d9ee;--ink:#0b0d1a;--muted:#474d6e;--accent:#5eead4;--accent-ink:#0f6b62;--accent-2:#6d28d9;--on-accent:#0b0d1a;--warn:#8a4b00;
--k1:#0f766e;--k2:#0369a1;--k3:#6d28d9;--k-on:#ffffff;--k-glow:transparent}}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font:18px/1.6 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit}
:focus-visible{outline:3px solid var(--accent-ink);outline-offset:3px;border-radius:8px}
main:focus{outline:none}
.skip{position:absolute;left:-10000px;top:8px;z-index:10;padding:10px 14px;border-radius:8px;background:var(--accent);color:var(--on-accent);font-weight:600;text-decoration:none}
.skip:focus{left:8px}
.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}
.wrap{width:min(1200px,90vw);margin:auto}

/* Kopf: Logo als Lockup (assets/logo-k.svg, hell: logo-k-hell.svg), Wortzeichen nie als HTML-Text */
header{position:relative;z-index:5}
.start header{position:absolute;inset:0 0 auto}
header .wrap{display:flex;flex-wrap:wrap;gap:8px 20px;justify-content:space-between;align-items:center;padding:22px 0}
.wm{display:inline-flex;align-items:center;text-decoration:none}
.wm picture{display:block}
.wm img{display:block;height:44px;width:auto}
nav{display:flex;flex-wrap:wrap;gap:4px 26px;font-size:.95rem}
nav a{color:var(--muted);text-decoration:none;padding:10px 0}
nav a:hover{color:var(--ink)}
.n-cta,nav a[aria-current]{color:var(--ink);border-bottom:1px solid var(--accent-ink)}
@media (max-width:640px){nav a:not(.n-cta){display:none}.wm img{height:36px}}

/* Schrift */
.eyebrow{font:500 .78rem/1.3 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--accent-ink);display:flex;align-items:center;gap:12px;margin:0 0 22px;max-width:none}
.eyebrow::before{content:"";flex:none;width:28px;height:1px;background:currentColor}
h1,h2,h3{font-family:var(--serif);font-weight:400;letter-spacing:-.035em;margin:0}
h2{font-size:clamp(2.2rem,5.4vw,4.6rem);line-height:1.02;max-width:16ch}
h1 em,h2 em{font-style:italic;color:var(--accent-ink)}
.lead{font-size:clamp(1.05rem,1.6vw,1.3rem);color:var(--muted);max-width:36ch;margin:24px 0 0}
.btn{display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:0 24px;border-radius:999px;font:inherit;font-weight:600;text-decoration:none;border:1px solid var(--line);background:none;color:var(--ink);cursor:pointer;transition:transform .2s}
.btn:hover{transform:translateY(-2px)}
/* Hauptknopf im Verlauf: dunkel dunkle Schrift auf hellen Stufen, hell weiße Schrift auf dunklen Stufen */
.p{background:linear-gradient(90deg,var(--k1),var(--k2),var(--k3));color:var(--k-on);border-color:transparent;box-shadow:0 10px 40px -10px rgb(56 189 248 / .55)}
.s{border-color:var(--accent-ink)}
.btn:disabled{opacity:.55;border-style:dashed;cursor:not-allowed;transform:none}
.btn .ar{transition:transform .2s}
.btn:hover .ar{transform:translateX(4px)}
.hinweis{color:var(--muted);font-size:.95rem}

/* 1 Kopf mit Punktnetz */
.hero{position:relative;min-height:100svh;display:grid;align-items:center;padding:110px 0 60px;overflow:hidden;background:radial-gradient(60% 60% at 75% 45%,rgb(56 189 248 / .1),transparent 70%)}
.hero .wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:4vw;align-items:center}
.hero h1{font-size:clamp(4rem,11vw,10.5rem);line-height:.88;letter-spacing:-.055em}
.hero h1 span{display:block}
/* Das große K im Verlauf; ohne background-clip:text bleibt es in --accent-ink */
.hero h1 .k{color:var(--accent-ink);font-weight:700;width:fit-content;padding-right:.04em}
@supports ((-webkit-background-clip:text) or (background-clip:text)){.hero h1 .k{background:linear-gradient(90deg,var(--k1),var(--k2),var(--k3));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}}
.hero .lead{max-width:30ch;font-size:clamp(1.15rem,1.8vw,1.45rem);color:var(--ink)}
.cta{display:flex;flex-wrap:wrap;align-items:center;gap:12px 26px;margin-top:36px}
.lk{font-weight:600;text-decoration:none;border-bottom:1px solid var(--line);padding:10px 0}
.lk:hover{border-color:var(--accent-ink)}
.stage{position:relative;aspect-ratio:1;width:100%;max-width:560px;justify-self:end;margin:0}
#fx{position:absolute;inset:0;width:100%;height:100%}
.stage figcaption{position:absolute;left:0;right:0;bottom:-4px;text-align:center;font:.75rem var(--mono);letter-spacing:.14em;color:var(--muted);text-transform:uppercase}
.scrollhint{position:absolute;left:50%;bottom:22px;translate:-50% 0;font:.72rem var(--mono);letter-spacing:.2em;color:var(--muted);text-transform:uppercase}
@media (max-width:860px){.hero{min-height:auto;padding-top:96px}.hero .wrap{grid-template-columns:1fr;gap:0}.stage{order:-1;max-width:280px;justify-self:start;margin:0 0 8px -10px}.stage figcaption,.scrollhint{display:none}}
@media (max-height:500px) and (orientation:landscape){.hero{min-height:auto;padding-top:90px}.hero .wrap{grid-template-columns:1.3fr .7fr}.stage{order:0;max-width:260px;margin:0}.hero h1{font-size:4.2rem}.scrollhint{display:none}}

/* 2 Haltung */
.stmt{padding:clamp(90px,14vw,180px) 0;border-top:1px solid var(--line)}
.stmt .big{font:400 clamp(1.9rem,4.4vw,3.8rem)/1.12 var(--serif);letter-spacing:-.03em;max-width:22ch;margin:0}
.stmt .big .dim{color:var(--muted)}
.where{display:flex;gap:14px;flex-wrap:wrap;margin-top:40px}
.where span{font:500 .95rem var(--mono);padding:10px 16px;border:1px solid var(--line);border-radius:10px;background:var(--bg2)}

/* 3 Vorführung: Szene haftet per CSS (sticky), der Text läuft daneben */
.demo{position:relative;background:var(--bg2);border-block:1px solid var(--line)}
.szenen{display:grid;grid-template-columns:.8fr 1.2fr;gap:5vw}
.steps{padding:clamp(80px,12vw,160px) 0}
.step{min-height:70vh;display:flex;flex-direction:column;justify-content:center}
.step:first-child{min-height:auto;padding-bottom:12vh}
.step .no{font:500 .8rem var(--mono);color:var(--accent-ink);letter-spacing:.14em}
.step.on .no::after{content:" · läuft"}
.step h3{font-size:clamp(1.8rem,3.2vw,2.8rem);line-height:1.05;margin:10px 0 14px}
.step p{color:var(--muted);margin:0;max-width:34ch}
.pin{position:sticky;top:0;height:100vh;display:flex;align-items:center}
.pin-in{width:100%}
.term{width:100%;border-radius:18px;background:var(--t-bg);color:var(--t-ink);border:1px solid var(--line);box-shadow:0 40px 120px -30px rgb(0 0 0 / .55),0 0 0 1px rgb(94 234 212 / .06);overflow:hidden;font:14px/1.6 var(--mono)}
.tbar{display:flex;align-items:center;gap:8px;padding:12px 16px;border-bottom:1px solid var(--t-line);color:var(--t-muted);font-size:12px}
.tbar i{flex:none;width:10px;height:10px;border-radius:50%;background:#262b55}
.tbar span,.tname{margin:0 0 0 8px;min-width:0}
.tname{font:500 12px/1.4 var(--mono);letter-spacing:0;color:#c3c9ee}
.tbar em{margin-left:auto;font-style:normal;color:var(--t-accent)}
.tbody{padding:20px 22px 24px;min-height:400px}
.q{color:#fff}
.q b{color:var(--t-accent);font-weight:500}
.caret{display:inline-block;width:8px;height:1.1em;background:var(--t-accent);vertical-align:-3px;margin-left:2px}
.docs{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:22px 0}
.doc{position:relative;border:1px solid var(--t-line);background:#0d1024;border-radius:10px;padding:10px 12px;font-size:12px;color:#a9b0d6;transition:border-color .3s,box-shadow .3s,color .3s,transform .4s}
.doc small{display:block;color:#8a92c4;font-size:11px}
.doc.scan{border-color:#3a4180;color:var(--t-ink)}
.doc.hit{border-color:var(--t-accent);color:#fff;box-shadow:0 0 0 1px var(--t-accent),0 0 36px -6px rgb(94 234 212 / .55)}
.doc.lock{color:var(--t-warn);border-color:#5a4220}
.doc .bar{position:absolute;left:0;bottom:0;height:2px;background:var(--t-accent);width:0;transition:width .3s}
.doc.scan .bar,.doc.hit .bar{width:100%}
.ans{border-left:2px solid var(--t-accent);padding-left:14px;color:#fff;min-height:3.2em}
.cite{display:inline-flex;gap:8px;align-items:center;margin-top:14px;padding:6px 12px;border-radius:999px;background:rgb(94 234 212 / .12);color:var(--t-accent);font-size:12px;transition:opacity .4s,transform .4s}
.lockmsg{margin-top:10px;font-size:12px;color:var(--t-warn);transition:opacity .3s}
.note{font-size:.9rem;color:var(--muted);margin:0;max-width:60ch}
/* Weitere Fragen und Live-Chat im selben Terminal-Stil */
.mehr{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:start;padding:0 0 clamp(70px,9vw,120px)}
.mehr .note{grid-column:1/-1}
.mehr .tbody{min-height:0}
.demo-daten{list-style:none;padding:0;margin:0}
.ausgabe p{margin:0 0 6px}
/* Platz der ganzen Vorführung ab dem Start, damit die Antworten nichts nach unten schieben */
#demo-aus:not(:empty){min-height:30em}
#demo-start{margin:0 0 16px}
.frage{color:#fff;margin:0 0 6px}
.frage::before{content:"› ";color:var(--t-accent)}
.antwort{border-left:2px solid var(--t-accent);padding-left:12px;margin:0 0 18px;color:var(--t-ink)}
.sucht,.fund{color:var(--t-muted)}
code{font-family:var(--mono);font-size:.92em;color:var(--t-accent);overflow-wrap:anywhere}
@media (max-width:860px){.szenen,.mehr{grid-template-columns:1fr}.pin{position:relative;height:auto;padding:0 0 60px}.steps{padding:80px 0 30px}.step{min-height:auto;padding:0 0 34px}.step:first-child{padding-bottom:34px}.docs{grid-template-columns:repeat(2,1fr)}.tbody{min-height:0;font-size:13px}#demo-aus:not(:empty){min-height:38em}}
@media (max-height:500px) and (orientation:landscape){.szenen{grid-template-columns:1fr}.pin{position:relative;height:auto;padding-bottom:60px}.step{min-height:auto;padding-bottom:30px}}

/* 4 Bento */
.bento-s{padding:clamp(90px,13vw,170px) 0}
.bento{display:grid;grid-template-columns:repeat(6,1fr);gap:14px;margin-top:56px}
.cell{position:relative;grid-column:span 2;border:1px solid var(--line);border-radius:22px;background:var(--surface);padding:28px;overflow:hidden;isolation:isolate}
.cell::before{content:"";position:absolute;inset:0;z-index:-1;opacity:0;transition:opacity .3s;background:radial-gradient(380px circle at var(--x,50%) var(--y,50%),rgb(56 189 248 / .16),transparent 60%)}
.cell:hover::before{opacity:1}
.cell h3{font-size:1.65rem;line-height:1.1;margin:0 0 10px}
.cell p{color:var(--muted);margin:0;font-size:1rem}
.w3{grid-column:span 3}
.w4{grid-column:span 4}
@media (max-width:980px){.bento{grid-template-columns:1fr}.cell,.w3,.w4{grid-column:auto}}
.diag{display:flex;align-items:center;gap:14px;margin:26px 0 0;font:13px var(--mono)}
.box{border:1px solid var(--line);border-radius:12px;padding:14px 16px;background:var(--bg2);text-align:center;flex:1}
.box.home{border-color:var(--accent-ink);color:var(--ink)}
.box.home b{display:block;color:var(--accent-ink);font:700 1.4rem var(--serif)}
.box.away{color:var(--muted)}
.cut{flex:0 0 60px;height:2px;background:repeating-linear-gradient(90deg,var(--muted) 0 6px,transparent 6px 12px);position:relative}
.cut::after{content:"×";position:absolute;left:50%;top:50%;translate:-50% -55%;color:var(--warn);font:700 1.2rem var(--sans);background:var(--surface);padding:0 4px}
.seg{display:inline-flex;flex-wrap:wrap;border:1px solid var(--line);border-radius:999px;padding:4px;margin:22px 0 14px;background:var(--bg2)}
.seg button{font:600 .9rem var(--sans);color:var(--muted);background:none;border:0;border-radius:999px;padding:10px 16px;cursor:pointer;min-height:44px}
.seg button[aria-pressed="true"]{background:var(--accent);color:var(--on-accent)}
.model{font:13px var(--mono);margin:14px 0 0}
.cell .model{color:var(--ink)}
.sw{display:flex;align-items:center;gap:14px;margin:22px 0 12px}
.toggle{position:relative;width:58px;height:32px;border-radius:999px;border:1px solid var(--muted);background:var(--bg2);cursor:pointer;flex:none}
.toggle::after{content:"";position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:50%;background:var(--muted);transition:left .25s,background .25s}
.toggle[aria-checked="true"]{background:rgb(94 234 212 / .3);border-color:var(--accent-ink)}
.toggle[aria-checked="true"]::after{left:29px;background:var(--accent-ink)}
.mail{border:1px dashed var(--line);border-radius:12px;padding:12px 14px;margin-top:22px;font:13px var(--mono);display:flex;justify-content:space-between;gap:10px;align-items:center;flex-wrap:wrap}
.sw:not([hidden])+.mail{margin-top:0}
.mail .st{color:var(--warn)}
.mail.ok .st{color:var(--accent-ink)}
.mail button{font:600 .85rem var(--sans);border:1px solid var(--accent-ink);color:var(--ink);background:none;border-radius:999px;padding:8px 14px;min-height:44px;cursor:pointer}
.mail button:disabled{opacity:.5;cursor:not-allowed}
.checks{list-style:none;padding:0;margin:22px 0 0;font:13px var(--mono)}
.checks li{display:flex;gap:10px;align-items:center;padding:9px 0;border-top:1px solid var(--line)}
.checks svg{flex:none;color:var(--accent-ink)}
.marq{overflow:hidden;margin:26px -28px 0;mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.marq ul{display:flex;gap:10px;list-style:none;margin:0;padding:0 28px;width:max-content;animation:mq 28s linear infinite}
.marq li{font:500 .9rem var(--mono);padding:9px 14px;border-radius:10px;border:1px solid var(--line);background:var(--bg2);white-space:nowrap}
.marq li.ch{border-color:var(--accent-ink);color:var(--accent-ink)}
.marq.paused ul{animation-play-state:paused}
@keyframes mq{to{transform:translateX(-50%)}}
.cell .big-q{color:var(--ink);font:400 clamp(1.5rem,2.4vw,2rem)/1.15 var(--serif);letter-spacing:-.02em;margin:0 0 14px}

/* 5 Zwei Wege */
.paths{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line)}
.path{padding:clamp(70px,9vw,130px) 5vw}
.path+.path{border-left:1px solid var(--line);background:var(--bg2)}
.path h2{font-size:clamp(2rem,3.6vw,3.2rem);max-width:13ch}
.flow{position:relative;margin:40px 0 28px}
.flow::before{content:"";position:absolute;left:15px;top:8px;bottom:8px;width:2px;background:var(--line)}
.flow .fill{position:absolute;left:15px;top:8px;width:2px;height:calc(100% - 16px);background:linear-gradient(var(--k1),var(--k2),var(--k3));transform-origin:top}
.flow ol{list-style:none;padding:0;margin:0;counter-reset:f}
.flow li{position:relative;padding:0 0 26px 52px;counter-increment:f}
.flow li::before{content:counter(f);position:absolute;left:0;top:0;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;font:600 .85rem var(--mono);background:var(--bg);border:2px solid var(--accent-ink);color:var(--accent-ink)}
.flow b{display:block;font-weight:600}
.flow span{color:var(--muted);font-size:.98rem}
.facts{font-size:.92rem;color:var(--muted);margin:0 0 30px;padding:0;list-style:none}
.facts li{padding:6px 0;border-top:1px solid var(--line)}
.split{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:40px 0 28px}
.split div{border:1px solid var(--line);border-radius:16px;padding:20px;background:var(--bg)}
.split h3{font:500 .78rem var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--accent-ink);margin-bottom:10px}
.split p{margin:0;font-size:.98rem}
@media (max-width:860px){.paths{grid-template-columns:1fr}.path{padding-inline:5vw}.path+.path{border-left:0;border-top:1px solid var(--line)}}
@media (max-width:480px){.split{grid-template-columns:1fr}}

/* 6 Schlussaufruf */
.ask{padding:clamp(100px,15vw,200px) 0;text-align:center;position:relative;overflow:hidden;isolation:isolate}
.ask h2{margin:0 auto;max-width:14ch;font-size:clamp(2.6rem,7vw,6rem)}
.ask .lead{margin:24px auto 40px}
.ask::before{content:"";position:absolute;left:50%;top:60%;width:900px;height:900px;translate:-50% -50%;background:radial-gradient(closest-side,rgb(167 139 250 / .12),transparent);z-index:-1}

/* Formulare */
fieldset{border:0;padding:0;margin:0;min-width:0}
.feld{margin:0 0 20px}
label,legend{display:block;font-weight:600;margin:0 0 6px;padding:0}
input:not([type=radio]),textarea{width:100%;font:inherit;color:var(--ink);background:var(--bg);border:1px solid var(--muted);border-radius:10px;padding:12px 14px}
textarea{min-height:8em;resize:vertical}
input:disabled,textarea:disabled{opacity:.55;border-style:dashed;cursor:not-allowed}
.mehr textarea{min-height:5em;background:#0d1024;color:var(--t-ink);border-color:#3a4180;font:inherit}
.mehr label{font-weight:500;color:#c3c9ee}
.mehr .hinweis{font-size:12px;color:#a9b0d6}
.wahl{display:flex;flex-wrap:wrap;gap:8px 28px}
.wahl label{display:inline-flex;align-items:center;gap:8px;font-weight:400;margin:0}
input[type=radio]{accent-color:var(--accent-ink);width:20px;height:20px;margin:0}
.zaehler{color:#a9b0d6;font-size:.9em;margin:6px 0 12px}
.hp{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.status{min-height:1.6em;margin:16px 0 0}

/* Unterseiten */
.seite{max-width:760px;margin:auto;padding:56px 5vw 100px}
.seite h1{font-size:clamp(2rem,7vw,4.6rem);line-height:1.05;letter-spacing:-.045em;margin:0 0 24px;overflow-wrap:break-word;hyphens:auto}
.seite h2{font-size:clamp(1.4rem,2.6vw,1.9rem);line-height:1.15;max-width:none;margin:44px 0 10px}
.seite .lead{max-width:none;margin:0 0 28px}
.seite address{font-style:normal}
.seite a:not(.btn){color:var(--accent-ink)}

/* Fuß */
footer{border-top:1px solid var(--line);padding:34px 0;color:var(--muted);font-size:.9rem}
footer .wrap{display:flex;justify-content:space-between;gap:6px 16px;flex-wrap:wrap}
footer p{margin:0}
footer a{color:var(--ink)}

@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.marq{mask-image:none}.marq ul{flex-wrap:wrap;width:auto}.marq li.dop{display:none}}