/* Layout: Werkstatt-Handbuch – ruhige Lesespalte, Fehlercodes in Mono, MIL-Bernstein als einziger Akzent */
:root{
  --bg:#f3f5f7; --panel:#ffffff; --ink:#18212b; --muted:#5b6876; --line:#d6dce3;
  --accent:#d98a00; --accent-ink:#6b4400; --accent-soft:#fbefd6;
  --steel:#2e4a66; --steel-soft:#e3ebf3;
  --ok:#2f7d4f; --ok-soft:#e1f1e7; --warn:#a86400; --warn-soft:#fbecd2; --crit:#b3261e; --crit-soft:#f8e0de;
  --f-display:"Arial Narrow",Arial,sans-serif;
  --f-body:system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-mono:ui-monospace,Consolas,monospace;
  --r:6px; color-scheme:light;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#12171d; --panel:#1a2129; --ink:#e4e9ee; --muted:#9aa7b4; --line:#2c3640;
  --accent:#f0a623; --accent-ink:#ffd58a; --accent-soft:#3a2c12;
  --steel:#8fb3d6; --steel-soft:#1f2c3a;
  --ok:#6cc391; --ok-soft:#173326; --warn:#f0b04a; --warn-soft:#3a2b12; --crit:#ff8a80; --crit-soft:#3d1c1a; color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#12171d; --panel:#1a2129; --ink:#e4e9ee; --muted:#9aa7b4; --line:#2c3640;
  --accent:#f0a623; --accent-ink:#ffd58a; --accent-soft:#3a2c12;
  --steel:#8fb3d6; --steel-soft:#1f2c3a;
  --ok:#6cc391; --ok-soft:#173326; --warn:#f0b04a; --warn-soft:#3a2b12; --crit:#ff8a80; --crit-soft:#3d1c1a; color-scheme:dark}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:400 17px/1.6 var(--f-body)}
.wrap{max-width:1100px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
a{color:var(--steel);text-underline-offset:3px}
a:hover{color:var(--accent-ink)}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
h1,h2{font-family:var(--f-display);font-weight:600;line-height:1.15;text-wrap:balance;margin:0}
h1{font-size:clamp(2rem,4.5vw,2.9rem)}
h2{font-size:1.45rem}
p{margin:0}
code,.code{font-family:var(--f-mono);font-weight:700;letter-spacing:.03em}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.muted{color:var(--muted)} .small{font-size:.88rem}
.eyebrow{font:600 .78rem var(--f-body);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.lead{font-size:1.12rem;max-width:65ch}

/* Kopf/Fuss */
header.top{background:var(--panel);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:5}
header.top .wrap{display:flex;flex-wrap:wrap;gap:8px 24px;align-items:center;justify-content:space-between;padding-block:12px}
.logo{display:flex;gap:8px;align-items:center;font:700 1.35rem var(--f-display);color:var(--ink);text-decoration:none}
.logo svg{width:28px;height:28px;color:var(--accent)}
header nav ul{list-style:none;display:flex;flex-wrap:wrap;gap:4px 18px;margin:0;padding:0}
header nav a,header nav span{font-weight:600;text-decoration:none;color:var(--ink)}
header nav a:hover{color:var(--accent-ink)}
main{padding-block:28px 64px;display:flex;flex-direction:column;gap:32px}
.foot{background:var(--panel);border-top:1px solid var(--line)}
.foot .wrap{padding-block:24px;display:flex;flex-direction:column;gap:10px;color:var(--muted)}
.foot b{color:var(--ink)} .foot p{max-width:80ch}
.flinks{list-style:none;display:flex;flex-wrap:wrap;gap:6px 18px;margin:0;padding:0;font-size:.9rem}
.crumbs{font-size:.88rem;color:var(--muted)}
.crumbs a{color:var(--muted)}

/* Knoepfe, Chips */
.btn{display:inline-flex;align-items:center;justify-content:center;font:600 1rem var(--f-body);border:1px solid var(--line);background:var(--panel);color:var(--ink);border-radius:var(--r);padding:10px 16px;text-decoration:none;cursor:pointer}
.btn:hover{border-color:var(--steel);color:var(--ink)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:#1d1300}
.cta{display:flex;flex-wrap:wrap;gap:10px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{font:700 .9rem var(--f-mono);border:1px solid var(--line);background:var(--panel);border-radius:999px;padding:4px 12px;text-decoration:none;color:var(--ink)}
.chip:hover{border-color:var(--accent);background:var(--accent-soft);color:var(--ink)}

/* Suche */
.search{display:flex;flex-wrap:wrap;gap:8px;max-width:560px}
.search input{flex:1 1 220px;min-width:0;font:700 1.2rem var(--f-mono);letter-spacing:.05em;padding:11px 14px;border:2px solid var(--line);border-radius:var(--r);background:var(--panel);color:var(--ink)}
.search input::placeholder{font:400 1rem var(--f-body);letter-spacing:0;color:var(--muted)}
.search input:focus{border-color:var(--accent);outline:none}
.formmsg{flex-basis:100%;font-size:.92rem;color:var(--warn)}
.formmsg:empty{display:none}

/* Startseite */
.hero{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:32px;align-items:center;padding-top:12px}
.hero>div{display:flex;flex-direction:column;gap:16px}
.sample{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:20px;display:flex;flex-direction:column;gap:8px}
.samplecode{font-family:var(--f-display);font-size:1.3rem;font-weight:600}
.samplecode .code{font-size:1.1rem;background:var(--accent-soft);color:var(--accent-ink);padding:2px 7px;border-radius:4px;margin-right:4px}
.three{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}
.three>div{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:20px;display:flex;flex-direction:column;gap:10px}
.how ol{list-style:none;counter-reset:s;margin:16px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px}
.how li{counter-increment:s;display:flex;flex-direction:column;gap:4px;padding-left:48px;position:relative}
.how li::before{content:counter(s);position:absolute;left:0;top:0;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font:700 1rem var(--f-mono);background:var(--steel);color:var(--panel)}
.how li span{color:var(--muted)}
.honest{border-left:4px solid var(--steel);padding:4px 0 4px 18px;display:flex;flex-direction:column;gap:10px;max-width:75ch}
.faq{display:flex;flex-direction:column;gap:8px;max-width:75ch}
.faq h2{margin-bottom:6px}
details{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:12px 16px}
summary{cursor:pointer;font-weight:600}
details p{margin-top:8px}

/* Detailseiten */
.doc{display:flex;flex-direction:column;gap:22px;min-width:0}
.doc h1 .code{display:inline-block;background:var(--accent-soft);color:var(--accent-ink);padding:0 10px;border-radius:5px;margin-right:6px;font-size:.85em}
.badges{display:flex;flex-wrap:wrap;gap:8px}
.badge,.sev,.hf{font:700 .74rem var(--f-body);text-transform:uppercase;letter-spacing:.08em;padding:4px 9px;border-radius:4px;border:1px solid transparent}
.badge.draft{background:var(--steel-soft);color:var(--steel)}
.badge.ok{background:var(--ok-soft);color:var(--ok);border-color:var(--ok)}
.sev.s1{background:var(--ok-soft);color:var(--ok)} .sev.s2{background:var(--warn-soft);color:var(--warn)} .sev.s3{background:var(--crit-soft);color:var(--crit)}
.hf.h3{background:var(--crit-soft);color:var(--crit)} .hf.h2{background:var(--warn-soft);color:var(--warn)} .hf.h1{background:var(--steel-soft);color:var(--steel)}
.decode{display:flex;flex-wrap:wrap;border:1px solid var(--line);border-radius:var(--r);background:var(--panel);overflow:hidden;max-width:720px}
.decode div{flex:1 1 140px;padding:10px 14px;border-right:1px solid var(--line);display:flex;flex-direction:column}
.decode b{font:700 1.1rem var(--f-mono);color:var(--accent-ink)}
.decode span{font-size:.8rem;color:var(--muted)}
.cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:24px}
.cols section{display:flex;flex-direction:column;gap:10px;min-width:0}
.answer{background:var(--panel);border-left:4px solid var(--accent);border-radius:var(--r);padding:14px 16px;display:flex;flex-direction:column;gap:6px}
.answer h2{font:600 .78rem var(--f-body);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.answer h2+*{margin-top:0}
.edge{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:10px;font-size:.92rem}
.edge>div{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:12px 14px;display:flex;flex-direction:column;gap:6px}
.edge>.edgepro{background:var(--accent-soft);border-color:var(--accent)}
.trust{list-style:none;margin:0;padding:12px 0 0;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:4px;font-size:.92rem}
.trust li::before{content:"✓ ";color:var(--ok);font-weight:700}
[id]{scroll-margin-top:80px}
.big{font-size:1.15rem;font-weight:600}
ul.ticks{margin:0;padding-left:1.2em;display:flex;flex-direction:column;gap:4px}
.locked{border:2px dashed var(--accent);border-radius:var(--r);background:var(--accent-soft);padding:18px 20px;display:flex;flex-direction:column;gap:12px}
.lockhead{display:flex;gap:10px;align-items:center}
.lockhead svg{width:24px;height:24px;color:var(--accent-ink);flex:none}
.locked ul{margin:0;padding-left:1.2em;display:flex;flex-direction:column;gap:4px}
section>h2+*{margin-top:10px}
.plist{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-direction:column}
.plist li{padding:10px 0;border-top:1px solid var(--line);display:flex;flex-direction:column}
.plist li small{color:var(--muted);font-size:.85rem}
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;margin:0}
.facts div{background:var(--panel);padding:10px 14px;min-width:0}
.facts dt{font:600 .74rem var(--f-body);text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
.facts dd{margin:2px 0 0}
.note{font-size:.92rem;color:var(--muted);border-left:3px solid var(--line);padding-left:12px;max-width:75ch}
.warn{background:var(--warn-soft);color:var(--warn);padding:8px 12px;border-radius:4px;font-weight:600}
.clist{list-style:none;margin:10px 0 0;padding:0;columns:2 320px;column-gap:24px}
.clist li{break-inside:avoid;padding:3px 0}
.clist code{color:var(--ink);margin-right:6px}
.brands{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.brand{display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:12px 14px;text-decoration:none;color:var(--ink)}
.brand span{font-size:.85rem;color:var(--muted)}
a.brand:hover{border-color:var(--accent)}
.tablewrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r);background:var(--panel)}
table{border-collapse:collapse;width:100%;font-size:.95rem}
th,td{text-align:left;padding:9px 12px;border-bottom:1px solid var(--line);vertical-align:top}
th{font:600 .74rem var(--f-body);text-transform:uppercase;letter-spacing:.08em;color:var(--muted);white-space:nowrap}
td.num{font-variant-numeric:tabular-nums;white-space:nowrap}
.prices{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px;align-items:start}
.price{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:20px;display:flex;flex-direction:column;gap:10px}
.price.hl{border:2px solid var(--accent)}
.amount{font:700 2.2rem var(--f-display)}
.price .cta{margin-top:auto}
.school{background:var(--steel-soft);border-radius:var(--r);padding:18px 20px;display:flex;flex-direction:column;gap:8px}
.mail{font-family:var(--f-mono);font-weight:700;user-select:all}
.h1sub{display:block;font:600 .45em var(--f-body);color:var(--muted);margin-top:6px}
.nudge{font-size:.95rem;border-left:3px solid var(--accent);padding-left:12px;margin-top:12px;max-width:75ch}
header nav li:last-child a{color:var(--accent-ink)}
.lockedsteps .frei{color:var(--ink)}
.locked.offen{border-style:solid;background:var(--panel)}
.locked h3{font:600 1.05rem/1.3 var(--f-body);margin:4px 0 0}
.locked ol{margin:0;padding-left:1.4em;display:flex;flex-direction:column;gap:6px}
.begriffe ul{margin-top:8px;font-size:.95rem}
.lockedsteps{margin:0;padding-left:1.4em;display:flex;flex-direction:column;gap:6px;color:var(--accent-ink)}
.lockedsteps span{display:block;height:.7em;margin-top:.45em;border-radius:3px;background:var(--accent);opacity:.3;width:90%}
.lockedsteps li:nth-child(2) span{width:70%}
.lockedsteps li:nth-child(3) span{width:82%}
.lockedsteps li:nth-child(4) span{width:60%}
.pcards{list-style:none;margin:10px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:14px}
.pcard{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:16px;display:flex;flex-direction:column;gap:8px;min-width:0}
.pcard h3{font:600 1.05rem/1.3 var(--f-body);margin:0}
.clist li:target{background:var(--accent-soft);outline:2px solid var(--accent);border-radius:3px}
.clist span code{color:var(--muted)}
.cases{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:14px}
.case{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:16px;display:flex;flex-direction:column;gap:6px}
.case details{padding:10px 12px;background:var(--bg)}
@media (max-width:760px){
  body{font-size:16px}
  .hero{grid-template-columns:1fr}
  header.top{position:static}
  header.top .wrap{padding-block:8px;gap:4px 18px}
  .logo{font-size:1.15rem}
  header nav{width:100%;overflow-x:auto}
  header nav ul{flex-wrap:nowrap;gap:0 14px;font-size:.84rem;white-space:nowrap}
  main{padding-top:14px;gap:22px}
  .doc{gap:16px}
  .doc h1{font-size:1.55rem}
  .btn{width:100%}
  .cta{flex-direction:column}
  .edge{grid-template-columns:1fr 1fr;font-size:.86rem}
  .edge>div{padding:10px;min-width:0}
  .lockedsteps li:nth-child(n+4){display:none}
}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}