@font-face{font-family:"Unbounded";src:url(/assets/fonts/unbounded.woff2) format("woff2");font-weight:200 900;font-display:swap}
@font-face{font-family:"Instrument Sans";src:url(/assets/fonts/instrument-sans.woff2) format("woff2");font-weight:400 700;font-display:swap}

:root{
  --ultra:#15114f;      /* Grundfläche: Ultramarin */
  --deep:#1e1970;       /* tiefere Ebenen */
  --line:#3a3592;       /* Linien auf dunkel */
  --fog:#eceaf8;        /* Text auf dunkel, Fläche hell */
  --lav:#aba7dc;        /* gedämpfter Text */
  --copper:#f2b544;     /* Kupfer: Leiterbahnen, Hauptaktion */
  --beam:#6fe7ef;       /* Scanstrahl, Fokus */
  --ink:#15114f;
  --disp:"Unbounded",system-ui,sans-serif;
  --body:"Instrument Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --pad:clamp(16px,4vw,56px);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:80px}
body{margin:0;background:var(--ultra);color:var(--fog);font:17px/1.6 var(--body);text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}
a{color:var(--copper)}
:focus-visible{outline:2px solid var(--beam);outline-offset:3px;border-radius:4px}
h1,h2,h3{font-family:var(--disp);font-weight:500;line-height:1.08;margin:0 0 .5em;letter-spacing:-.02em}
h2{font-size:clamp(1.7rem,3.4vw,2.9rem);font-weight:450}
h3{font-size:1.02rem;font-weight:500;letter-spacing:-.005em;line-height:1.3}
p{margin:0 0 1em}
.wrap{max-width:1240px;margin:0 auto;padding:0 var(--pad)}
.narrow{max-width:860px}
.skip{position:absolute;left:-999px}.skip:focus{left:12px;top:12px;background:var(--fog);color:var(--ink);padding:6px 10px;z-index:99}

/* Kopfzeile: schwebende Glasleiste */
.top{position:fixed;z-index:30;top:14px;left:var(--pad);right:var(--pad);display:flex;align-items:center;gap:20px;
  padding:9px 10px 9px 18px;border-radius:999px;background:rgba(21,17,79,.55);backdrop-filter:blur(16px) saturate(1.4);
  -webkit-backdrop-filter:blur(16px) saturate(1.4);border:1px solid rgba(171,167,220,.18)}
.plain .top{position:sticky;margin:14px var(--pad) 0}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--fog);font:500 1rem var(--disp);letter-spacing:-.02em}
.mark{width:26px;height:26px;color:var(--copper)}
.menu{display:flex;align-items:center;gap:18px;margin-left:auto}
.main{display:flex;gap:22px}
.main a{color:var(--lav);text-decoration:none;font-size:.95rem}
.main a:hover{color:var(--fog)}
.langs{display:flex;gap:2px}
.langs a{font-size:.82rem;color:var(--lav);text-decoration:none;padding:4px 7px;border-radius:999px}
.langs a[aria-current]{color:var(--ink);background:var(--fog)}
.burger{display:none;margin-left:auto;background:none;border:0;width:42px;height:38px;cursor:pointer;padding:9px}
.burger span{display:block;height:2px;background:var(--fog);margin:6px 0}

.btn{display:inline-block;font:600 .98rem var(--body);text-decoration:none;color:var(--ink);background:var(--copper);
  padding:14px 24px;border-radius:999px;border:0;cursor:pointer;transition:background .2s, box-shadow .2s}
.btn:hover{background:#ffc95e;box-shadow:0 0 0 6px rgba(242,181,68,.18)}
.btn-line{background:transparent;color:var(--fog);box-shadow:inset 0 0 0 1.5px rgba(236,234,248,.45)}
.btn-line:hover{background:rgba(236,234,248,.08);box-shadow:inset 0 0 0 1.5px var(--fog)}
.btn-sm{padding:9px 16px;font-size:.88rem}
.btn[disabled]{opacity:.6;cursor:wait}

/* Hero: Platine im Scanner */
.hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;overflow:hidden;isolation:isolate;padding:120px 0 64px}
.stage{position:absolute;inset:0;z-index:-2;perspective:1400px}
#pcb{width:100%;height:100%;display:block;transform-origin:60% 50%}
.hero::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(90deg,var(--ultra) 0%,rgba(21,17,79,.92) 30%,rgba(21,17,79,.25) 62%,rgba(21,17,79,0) 80%),
             linear-gradient(0deg,var(--ultra) 0%,rgba(21,17,79,0) 35%)}
.hero-txt{width:100%;max-width:1240px;margin:0 auto;padding:0 var(--pad)}
.hero h1{font-size:clamp(2.2rem,5.2vw,4.7rem);font-weight:600;letter-spacing:-.035em;line-height:1.02;max-width:15ch;hyphens:auto;-webkit-hyphens:auto;margin-bottom:.45em;position:relative}
.h1-ghost{position:absolute;inset:0;color:transparent;-webkit-text-stroke:1px rgba(171,167,220,.45)}
.h1-real{display:block;color:var(--fog);clip-path:inset(0 calc(100% - var(--scan,100%)) 0 0)}
.lead{font-size:clamp(1.02rem,1.3vw,1.16rem);color:var(--lav);max-width:56ch}
.ctas{display:flex;flex-wrap:wrap;gap:12px;margin:30px 0 28px}
.points{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px 26px;font-size:.93rem;color:var(--lav)}
.points li{display:flex;align-items:center;gap:9px}
.points li::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--beam);box-shadow:0 0 10px var(--beam)}
.hud{position:absolute;right:var(--pad);top:96px;display:flex;align-items:baseline;gap:14px;font-size:.86rem;color:var(--lav);
  padding:10px 16px;border-radius:14px;background:rgba(21,17,79,.5);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(111,231,239,.25)}
.hud-p{font:500 1.35rem var(--disp);color:var(--beam);min-width:3.2ch;text-align:right;font-variant-numeric:tabular-nums}
.hud-n{color:var(--copper);font-variant-numeric:tabular-nums}

/* Abschnitte */
.sec{padding:clamp(72px,10vw,128px) 0}
.sec-deep{background:var(--deep)}
.head{max-width:740px;margin-bottom:clamp(32px,5vw,56px)}
.head p,.sub{color:var(--lav);font-size:1.06rem}

/* Diagnose-Auswahl */
.diag{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:clamp(24px,4vw,64px);align-items:start}
.diag-list{display:flex;flex-direction:column;border-left:1px solid var(--line)}
.diag-list button{all:unset;cursor:pointer;padding:13px 0 13px 22px;margin-left:-1px;border-left:2px solid transparent;color:var(--lav);font-size:1.02rem;transition:color .2s,border-color .2s}
.diag-list button:hover{color:var(--fog)}
.diag-list button[aria-selected=true]{color:var(--fog);border-left-color:var(--copper)}
.diag-list button:focus-visible{outline:2px solid var(--beam);outline-offset:-2px}
.diag-panel{position:sticky;top:100px;border-radius:28px;padding:clamp(24px,3.4vw,44px);
  background:radial-gradient(120% 120% at 100% 0%,rgba(111,231,239,.14),transparent 55%),var(--deep);border:1px solid var(--line);min-height:300px}
.diag-panel h3{font-size:clamp(1.3rem,2vw,1.7rem);font-weight:450;margin-bottom:.7em}
.diag-panel p{color:var(--lav);font-size:1.06rem;max-width:52ch}
.diag-panel [role=tabpanel]:not([hidden]){animation:in .35s ease}
@keyframes in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.maps{margin:22px 0 10px;font-size:.9rem}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{font-size:.9rem;text-decoration:none;color:var(--fog);padding:7px 14px;border-radius:999px;border:1px solid rgba(242,181,68,.5)}
.chip:hover{background:rgba(242,181,68,.14)}

/* Stufen entlang der Datenvollständigkeit */
.spectrum{display:flex;align-items:center;gap:16px;font-size:.88rem;color:var(--lav);margin-bottom:22px}
.spectrum i{flex:1;height:3px;border-radius:3px;background:linear-gradient(90deg,var(--copper),rgba(242,181,68,.35) 50%,rgba(171,167,220,.15))}
.lvls{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;border-top:1px solid var(--line)}
.lvl{padding:28px 26px 30px 0;margin-right:26px;border-right:1px solid var(--line);scroll-margin-top:110px}
.lvl:last-child{border-right:0;margin-right:0}
.lvl:target{background:linear-gradient(180deg,rgba(242,181,68,.10),transparent 70%)}
.code{display:block;font:300 3.2rem/1 var(--disp);color:var(--copper);letter-spacing:-.04em;margin-bottom:18px}
.lvl:nth-child(2) .code{color:#d9a55a}.lvl:nth-child(3) .code{color:#b89b8a}.lvl:nth-child(4) .code{color:var(--lav)}
.lvl h3{font-size:1.12rem;margin-bottom:.9em}
.lvl dl{margin:0;font-size:.95rem}
.lvl dt{color:var(--fog);font-weight:600;margin-top:12px}
.lvl dd{margin:2px 0 0;color:var(--lav)}

.pack{margin-top:clamp(48px,7vw,88px);display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(24px,5vw,72px);align-items:center}
.pack-txt h3{font-size:clamp(1.3rem,2vw,1.7rem);font-weight:450}
.pack-txt p{color:var(--lav)}
.stack{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.stack li{display:grid;grid-template-columns:150px 1fr;align-items:center;gap:22px;min-height:38px}
.stack li::before{content:"";height:18px;margin-left:calc(var(--i)*9px);width:calc(100% - var(--i)*9px);transform:skewX(-42deg);border-radius:4px;
  background:linear-gradient(90deg,rgba(242,181,68,calc(.95 - var(--i)*.12)),rgba(242,181,68,calc(.35 - var(--i)*.04)));
  box-shadow:0 0 0 1px rgba(242,181,68,.55),0 10px 22px -12px rgba(242,181,68,.6);transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.stack:hover li::before{transform:skewX(-42deg) translateX(calc(var(--i)*-6px))}
.stack li span{font-size:1rem;color:var(--fog)}

/* Ablauf */
.steps{list-style:none;margin:0;padding:0;position:relative}
.steps::before{content:"";position:absolute;left:21px;top:10px;bottom:10px;width:2px;background:linear-gradient(var(--copper),rgba(242,181,68,.1))}
.steps li{display:grid;grid-template-columns:44px 1fr;gap:22px;padding:0 0 34px}
.steps .n{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;font:500 1rem var(--disp);background:var(--ultra);color:var(--copper);border:2px solid var(--copper);position:relative}
.steps h3{font-size:1.18rem;margin:9px 0 .35em}
.steps p{color:var(--lav);margin:0}
.note{margin:6px 0 0 66px;color:var(--lav);font-size:.95rem}

.two{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,6vw,96px)}
.decl,.inds{list-style:none;margin:0;padding:0}
.decl li{padding:14px 0 14px 34px;border-bottom:1px solid var(--line);position:relative}
.decl li::before{content:"";position:absolute;left:4px;top:23px;width:14px;height:2px;background:var(--copper);transform:rotate(45deg);box-shadow:0 0 0 0 transparent}
.decl li::after{content:"";position:absolute;left:4px;top:23px;width:14px;height:2px;background:var(--copper);transform:rotate(-45deg)}
.inds li{padding:16px 0;border-bottom:1px solid var(--line)}
.inds h3{margin-bottom:.3em}
.inds p{margin:0;color:var(--lav);font-size:.97rem}

/* Formular: heller Reinraum */
.sec-light{background:var(--fog);color:var(--ink)}
.sec-light .head p{color:#4b4790}
.sec-light h2{color:var(--ink)}
.rq{display:grid;gap:22px;background:#fff;border-radius:32px;padding:clamp(22px,4vw,48px);box-shadow:0 40px 80px -40px rgba(21,17,79,.45)}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:18px 22px}
.grid3{grid-template-columns:repeat(3,1fr)}
.rq label{display:flex;flex-direction:column;gap:7px;font-size:.92rem;font-weight:600;color:var(--ink)}
.rq input:not([type=checkbox]),.rq select,.rq textarea{font:400 1rem var(--body);color:var(--ink);background:#f6f5fc;border:1.5px solid #d9d6f0;border-radius:14px;padding:12px 14px;width:100%}
.rq input:focus,.rq select:focus,.rq textarea:focus{outline:none;border-color:var(--ink);box-shadow:0 0 0 4px rgba(111,231,239,.45)}
.rq .invalid{border-color:#c0262d!important}
fieldset{border:0;padding:0;margin:0}
legend{font-size:.92rem;font-weight:600;margin-bottom:12px;padding:0;color:var(--ink)}
.togs{display:flex;flex-wrap:wrap;gap:8px}
.rq label.tog{position:relative;display:block;cursor:pointer;font-weight:500}
.tog input{position:absolute;opacity:0;width:1px;height:1px}
.tog span{display:block;padding:9px 16px;border-radius:999px;border:1.5px solid #d9d6f0;background:#f6f5fc;font-size:.92rem;transition:.15s}
.tog input:checked+span{background:var(--ink);border-color:var(--ink);color:var(--fog)}
.tog input:focus-visible+span{outline:2px solid var(--beam);outline-offset:2px}
.drop{border:2px dashed #c9c5ea;border-radius:18px;padding:20px;background:#f6f5fc}
.drop small{font-weight:400;color:#57539a}
.filelist{font-weight:400;font-size:.88rem;color:#57539a;white-space:pre-line}
.confirms{display:grid;gap:12px}
.rq label.chk{flex-direction:row;align-items:flex-start;gap:12px;font-weight:400;font-size:.94rem;cursor:pointer}
.chk input{margin:3px 0 0;accent-color:var(--ink);width:18px;height:18px;flex:none}
.chk a{color:var(--ink)}
.hp{position:absolute;left:-5000px;width:1px;height:1px;overflow:hidden}
.alert{background:#fde8e6;color:#8a1c17;border-radius:14px;padding:12px 16px;font-size:.95rem}
.rq .btn{justify-self:start;padding:15px 34px;background:var(--ink);color:var(--fog)}
.rq .btn:hover{background:#2a2496;box-shadow:0 0 0 6px rgba(111,231,239,.35)}

.faqs details{border-bottom:1px solid var(--line);padding:20px 0}
.faqs summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:20px;font:450 1.08rem/1.35 var(--disp);letter-spacing:-.01em}
.faqs summary::-webkit-details-marker{display:none}
.faqs summary::after{content:"";flex:none;width:12px;height:12px;margin-top:6px;border-right:2px solid var(--copper);border-bottom:2px solid var(--copper);transform:rotate(45deg);transition:transform .25s}
.faqs details[open] summary::after{transform:rotate(-135deg)}
.faqs p{margin:12px 0 0;color:var(--lav);max-width:64ch}

.thanks{text-align:center;padding-top:40px}
.thanks h1{font-size:clamp(1.8rem,4vw,2.8rem)}
.ok{width:76px;height:76px;margin:0 auto 26px;fill:none;stroke:var(--copper);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.ok circle{stroke:var(--beam);stroke-width:2}
.ok path{stroke-dasharray:50;stroke-dashoffset:50;animation:draw .7s .2s ease forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.ref code{font:500 1.05rem var(--disp);color:var(--beam)}
.thanks p{color:var(--lav)}
.legal h1{font-size:clamp(1.8rem,4vw,2.8rem)}
.legal h2{font-size:1.25rem;margin-top:1.8em}
.legal p{color:var(--lav)}

.foot{border-top:1px solid var(--line);padding:40px var(--pad);font-size:.92rem;color:var(--lav)}
.foot-in{max-width:1240px;margin:0 auto;display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap}
.foot p{margin:12px 0 0}
.foot-links{display:flex;flex-direction:column;gap:6px;text-align:right}
.foot-links a{color:var(--lav)}

@media (max-width:1060px){
  .main{display:none}
  .lvls{grid-template-columns:1fr 1fr}
  .lvl:nth-child(2){border-right:0;margin-right:0}
  .lvl:nth-child(-n+2){border-bottom:1px solid var(--line)}
}
@media (max-width:780px){
  .burger{display:block}
  .top{border-radius:22px;flex-wrap:wrap}
  .menu{display:none;width:100%;flex-direction:column;align-items:flex-start;gap:16px;padding:10px 6px 8px}
  .menu.open{display:flex}
  .menu .main{display:flex;flex-direction:column;gap:12px}
  .hero{min-height:auto;padding-top:0;flex-direction:column;align-items:stretch}
  .stage{position:relative;height:56vh;inset:auto}
  .hero::before{background:linear-gradient(0deg,var(--ultra) 0%,var(--ultra) 40%,rgba(21,17,79,0) 62%)}
  .hero-txt{margin-top:-6vh}
  .hero h1{font-size:clamp(1.7rem,7.6vw,2.6rem);hyphens:manual;-webkit-hyphens:manual}
  .hud{top:88px;right:16px;padding:7px 12px;gap:10px;font-size:.8rem}
  .hud-l{display:none}
  .hud-p{font-size:1.05rem}
  .diag,.two,.pack,.grid,.grid3{grid-template-columns:1fr}
  .diag-panel{position:static}
  .lvls{grid-template-columns:1fr}
  .lvl{border-right:0;margin-right:0;border-bottom:1px solid var(--line);padding-right:0}
  .stack li{grid-template-columns:84px 1fr;gap:16px}
  .stack li span{font-size:.94rem}
  .foot-links{text-align:left}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}

/* ---------- Ratgeber ---------- */
.sit-more{margin:22px 0 0}
.sit-more a{color:var(--beam);text-decoration:none;border-bottom:1px solid rgba(111,231,239,.4)}
.sit-more a:hover{border-bottom-color:var(--beam)}

.gcards{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px}
.gcards a{display:flex;flex-direction:column;height:100%;padding:24px 22px 20px;text-decoration:none;color:var(--fog);
  border-radius:22px;border:1px solid var(--line);background:linear-gradient(160deg,rgba(111,231,239,.06),transparent 45%);transition:border-color .2s,background .2s}
.gcards a:hover{border-color:var(--copper);background:linear-gradient(160deg,rgba(242,181,68,.10),transparent 55%)}
.gcards h3{font-size:1.02rem;line-height:1.35;margin:0 0 14px;overflow-wrap:break-word}
@media (max-width:780px){.gcards h3{hyphens:auto;-webkit-hyphens:auto}}
.gcards p{color:var(--lav);font-size:.95rem;margin:0 0 16px}
.gcards span{margin-top:auto;font-size:.9rem;color:var(--copper)}
.gcards-hub{grid-template-columns:repeat(auto-fill,minmax(320px,1fr))}

.ghero{padding:clamp(56px,8vw,96px) 0 clamp(28px,4vw,44px);border-bottom:1px solid var(--line);
  background:radial-gradient(900px 380px at 85% 0%,rgba(111,231,239,.12),transparent 70%)}
.ghero h1{font-size:clamp(1.6rem,4.2vw,3.4rem);font-weight:550;max-width:22ch;letter-spacing:-.03em;hyphens:auto;-webkit-hyphens:auto;overflow-wrap:break-word}
.ghero .lead{max-width:64ch}
.crumbs{display:flex;gap:10px;font-size:.9rem;margin-bottom:22px;color:var(--lav)}
.crumbs a{color:var(--lav);text-decoration:none}
.crumbs a:hover{color:var(--fog)}
.upd{font-size:.88rem;color:var(--lav);margin:0}

.gbody{display:grid;grid-template-columns:240px minmax(0,1fr);gap:clamp(28px,5vw,72px);padding-top:48px;padding-bottom:96px}
.gbody.notoc{grid-template-columns:minmax(0,1fr)}
.toc{position:sticky;top:100px;align-self:start;font-size:.92rem}
.toc p{color:var(--fog);font-weight:600;margin-bottom:10px}
.toc ol{list-style:none;margin:0;padding:0;border-left:1px solid var(--line)}
.toc a{display:block;padding:6px 0 6px 16px;color:var(--lav);text-decoration:none;line-height:1.4}
.toc a:hover{color:var(--fog)}
.prose{max-width:760px}
.prose h2{font-size:clamp(1.35rem,2.2vw,1.8rem);font-weight:480;margin:2.2em 0 .7em;scroll-margin-top:100px}
.prose h2:first-child{margin-top:0}
.prose p,.prose li{color:#d6d3f0;font-size:1.05rem;line-height:1.7}
.prose ul,.prose ol{padding-left:1.3em;margin:0 0 1.2em}
.prose li{margin:.35em 0}
.prose li::marker{color:var(--copper)}
.tbl{overflow-x:auto;margin:1.2em 0 1.6em;border:1px solid var(--line);border-radius:16px}
.prose table{width:100%;border-collapse:collapse;font-size:.95rem;min-width:520px}
.prose th{text-align:left;font-weight:600;color:var(--fog);background:var(--deep);padding:12px 14px}
.prose td{padding:12px 14px;border-top:1px solid var(--line);color:#d6d3f0;vertical-align:top}
.prose td:first-child{color:var(--fog);font-weight:500}
.callout{border-left:3px solid var(--beam);padding:4px 0 4px 18px;color:var(--fog)!important}
.gloss{margin:0}
.gloss dt{font:500 1.08rem var(--disp);color:var(--fog);margin-top:26px;scroll-margin-top:100px}
.gloss dd{margin:6px 0 0;color:#d6d3f0;font-size:1.03rem;line-height:1.65;padding-bottom:18px;border-bottom:1px solid var(--line)}
.gcta{margin-top:56px;padding:clamp(24px,4vw,40px);border-radius:26px;background:radial-gradient(120% 140% at 100% 0%,rgba(242,181,68,.16),transparent 60%),var(--deep);border:1px solid var(--line)}
.gcta h2{margin-top:0!important}
.prose .faqs summary{font-size:1rem}

.foot-guides{display:flex;flex-direction:column;gap:6px;max-width:340px}
.foot-guides a{color:var(--lav);text-decoration:none}
.foot-guides a:hover{color:var(--fog)}
.fg-h{color:var(--fog);font-weight:600;margin:0 0 4px!important}

@media (max-width:900px){
  .gbody{grid-template-columns:minmax(0,1fr)}
  .toc{position:static;border:1px solid var(--line);border-radius:18px;padding:16px 18px}
}