/* netzw3rk Designsystem · gemeinsame Basis (siehe DESIGN.md)
   Dunkler Canvas mit Flächenstufen (surface-1 bis -4) und Haarlinien statt Schatten.
   Lavendel nur für Haupt-Button, Fokus, Links und die Lichtbögen. Standard Dark, Light per Umschalter. */

@font-face{font-family:"Inter";src:url("fonts/inter.woff2") format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url("fonts/jetbrains-mono.woff2") format("woff2");font-weight:100 800;font-display:swap}

:root{
  --canvas:#010102; --surface-1:#0f1011; --surface-2:#161719; --surface-3:#1d1e21; --surface-4:#26272b;
  --hairline:#23252a; --hairline-strong:#34363c; --hairline-tertiary:#3e4047;
  --ink:#f7f8f8; --ink-muted:#d0d6e0; --ink-subtle:#8a8f98; --ink-tertiary:#62666d;
  --primary:#5e6ad2; --primary-hover:#828fff; --primary-focus:#5e69d1; --on-primary:#ffffff; --link:#9aa3ff;
  --good:#27a644; --warn:#d4a24c; --bad:#e5645a;
  --edge:inset 0 1px 0 rgb(255 255 255 / .04);
  --font:"Inter","SF Pro Display",-apple-system,system-ui,"Segoe UI",Roboto,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,"SF Mono",Menlo,monospace;
  --r-xs:4px; --r-sm:6px; --r-md:8px; --r-lg:12px; --r-xl:16px;
  --page-max:1440px; --gutter:20px; --nav-h:56px;
  color-scheme:dark;
}
:root[data-theme="light"]{
  --canvas:#ffffff; --surface-1:#f7f8f8; --surface-2:#f0f1f3; --surface-3:#e8e9ec; --surface-4:#dfe0e4;
  --hairline:#e3e4e8; --hairline-strong:#d0d2d8; --hairline-tertiary:#bfc2c9;
  --ink:#0f1011; --ink-muted:#3c4149; --ink-subtle:#6b6f76; --ink-tertiary:#8a8f98;
  --primary:#5e6ad2; --primary-hover:#4e5ac4; --primary-focus:#5e69d1; --on-primary:#ffffff; --link:#4b57c4;
  --good:#1f8a39; --warn:#9a6700; --bad:#c4382e;
  --edge:none;
  color-scheme:light;
}

*{box-sizing:border-box}
html{background:var(--canvas);overflow-x:clip;scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + 16px)}
body{background:var(--canvas);color:var(--ink);font-family:var(--font);font-size:16px;line-height:1.5;letter-spacing:-.05px;margin:0;overflow-x:clip;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{text-wrap:balance;margin:0;font-weight:600}
p,ul,ol{margin:0}
img{max-width:100%;height:auto;display:block}
a{color:var(--link);text-underline-offset:2px}
button,input{font:inherit;color:inherit}
:focus-visible{outline:2px solid color-mix(in srgb,var(--primary-focus) 50%,transparent);outline-offset:2px}
[hidden]{display:none!important}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.wrap{max-width:var(--page-max);margin:0 auto;padding-inline:var(--gutter)}

/* Kopf */
.top{position:sticky;top:0;z-index:20;height:var(--nav-h);background:color-mix(in srgb,var(--canvas) 88%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--hairline)}
.top .wrap{height:100%;display:flex;align-items:center;justify-content:space-between;gap:12px}
.brand{display:inline-flex;align-items:center;gap:12px;color:var(--ink);text-decoration:none}
.brand .wordmark{display:block;height:17px;width:auto}
.brand small{font-weight:400;color:var(--ink-subtle);font-size:14px;padding-left:12px;border-left:1px solid var(--hairline)}
.top-right{display:flex;align-items:center;gap:10px}
.top-link{color:var(--ink-subtle);font-size:14px;font-weight:500;text-decoration:none;padding:6px 8px;border-radius:var(--r-md)}
.top-link:hover{color:var(--ink)}
.theme{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 10px;border-radius:var(--r-md);border:1px solid var(--hairline);background:var(--surface-1);color:var(--ink-muted);font-size:13px;font-weight:500;cursor:pointer}
.theme:hover{background:var(--surface-2);color:var(--ink)}
.theme svg{width:15px;height:15px}

/* Buttons: 8 px Radius, nie als Pille */
.btn{background:var(--primary);color:var(--on-primary);border:1px solid transparent;border-radius:var(--r-md);padding:8px 16px;min-height:44px;font-size:14px;font-weight:500;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:8px}
.btn:hover{background:var(--primary-hover)}
.btn:active{background:var(--primary-focus)}
.btn.ghost{background:var(--surface-2);color:var(--ink);border-color:var(--hairline)}
.btn.ghost:hover{background:var(--surface-3)}
.btn svg{width:16px;height:16px;flex:none}

/* Etiketten */
.label{font-size:13px;font-weight:500;letter-spacing:.4px;color:var(--ink-subtle)}
.pill{display:inline-block;padding:4px 12px;border:1px solid var(--hairline);border-radius:99px;background:var(--surface-1);font-size:13px;font-weight:500;letter-spacing:.4px;color:var(--ink-subtle)}
.pill.good{color:var(--good);background:color-mix(in srgb,var(--good) 12%,transparent);border-color:transparent}

/* Fußzeile */
.site-foot{border-top:1px solid var(--hairline)}
.site-foot .wrap{padding-block:22px 32px;display:flex;flex-wrap:wrap;gap:8px 24px;justify-content:space-between;font-size:13px;color:var(--ink-subtle)}
.site-foot nav{display:flex;flex-wrap:wrap;gap:8px 20px}
.site-foot a{color:var(--ink-subtle);text-decoration:none}
.site-foot a:hover{color:var(--ink);text-decoration:underline}

@keyframes spin{to{transform:rotate(360deg)}}

@media (max-width:720px){
  .brand small{display:none}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation:none!important;transition:none!important}
}