@font-face{font-family:'Archivo';font-style:normal;font-weight:600;font-display:swap;
  src:url('fonts/archivo.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Archivo';font-style:normal;font-weight:700;font-display:swap;
  src:url('fonts/archivo.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;
  src:url('fonts/ibm-plex-mono.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:400;font-display:swap;
  src:url('fonts/ibm-plex-sans.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:600;font-display:swap;
  src:url('fonts/ibm-plex-sans.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}

/* ── Design-Tokens (aus tokens.css des Markenpakets) ───────────────────── */
:root{
  --marke-schiefer:#3A4550; --marke-kupfer:#C6733B;
  --marke-tinte:#1A1F24;    --marke-papier:#F5F7F8;

  --n-0:#FFFFFF; --n-50:#F5F7F8; --n-100:#E8ECEF; --n-200:#D3DAE0;
  --n-300:#AFBAC3; --n-500:#6C7B87; --n-700:#3A4550; --n-800:#262E36;
  --n-900:#1A1F24; --n-950:#12161A;

  --grund:var(--n-50); --karte:var(--n-0); --linie:var(--n-200);
  --text:var(--n-900); --text-leise:var(--n-500);

  --r-klein:3px; --r-karte:5px; --r-icon:13px;
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px;
  --s-5:24px; --s-6:32px; --s-7:44px; --s-8:64px;

  --f-display:'Archivo',system-ui,sans-serif;
  --f-text:'IBM Plex Sans',system-ui,sans-serif;
  --f-mono:'IBM Plex Mono',ui-monospace,monospace;
}
@media (prefers-color-scheme:dark){
  :root{
    --marke-schiefer:#8FA0AF; --marke-kupfer:#C4622D;
    --marke-tinte:#E8EDF1;    --marke-papier:#12161A;
    --grund:#12161A; --karte:#191E24; --linie:#2A323A;
    --text:#E8EDF1;  --text-leise:#8B98A4;
  }
}

/* ── Grundlagen ───────────────────────────────────────────────────────── */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; min-height:100svh; background:var(--grund); color:var(--text);
  font:400 15px/1.6 var(--f-text);
  display:flex; flex-direction:column;
  padding:clamp(var(--s-5),4vw,var(--s-8));
}
.wrap{width:100%; max-width:44rem; margin-inline:auto}

a{color:var(--text); text-decoration:none;
  border-bottom:1px solid color-mix(in srgb,var(--marke-kupfer) 45%,transparent)}
a:hover{border-bottom-color:var(--marke-kupfer)}
a:focus-visible{outline:2px solid var(--marke-kupfer); outline-offset:3px; border-radius:var(--r-klein)}
code{font:400 12.5px var(--f-mono); font-variant-numeric:tabular-nums}
strong{font-weight:600}

.label{
  font:500 11px/1 var(--f-mono); letter-spacing:.09em; text-transform:uppercase;
  color:var(--text-leise); display:block; margin-bottom:var(--s-4);
}

/* ── Startseite ───────────────────────────────────────────────────────── */
.hero{flex:1; display:flex; align-items:center; padding-block:var(--s-7)}
.logo{display:block; width:min(320px,72vw); height:auto; margin-bottom:var(--s-6)}
.claim{
  font:700 clamp(26px,5.4vw,40px)/1.15 var(--f-display); letter-spacing:-.028em;
  margin:0 0 var(--s-4); text-wrap:balance;
}
.lede{margin:0; color:var(--text-leise); max-width:34rem; text-wrap:pretty}
.rule{width:var(--s-7); height:2px; border:0; border-radius:2px;
  background:var(--marke-kupfer); margin:var(--s-5) 0}

/* ── Fußzeile ─────────────────────────────────────────────────────────── */
.foot{margin-top:var(--s-6); font:400 13.5px/1.5 var(--f-text); color:var(--text-leise)}
.foot .wrap{
  border-top:1px solid var(--linie); padding-top:var(--s-4);
  display:flex; flex-wrap:wrap; gap:var(--s-2) var(--s-5); align-items:baseline;
}
.foot nav{display:flex; flex-wrap:wrap; gap:var(--s-2) var(--s-5)}
.foot a{color:var(--text-leise); border-bottom-color:transparent}
.foot a:hover{color:var(--text); border-bottom-color:var(--marke-kupfer)}
.foot .spacer{margin-left:auto; font:400 12.5px var(--f-mono); font-variant-numeric:tabular-nums}

/* ── Textseiten ───────────────────────────────────────────────────────── */
.doc{padding-block:var(--s-5) var(--s-6)}
.back{
  display:inline-block; font:500 11px/1 var(--f-mono); letter-spacing:.09em;
  text-transform:uppercase; color:var(--text-leise);
  border:0; margin-bottom:var(--s-6);
}
.back:hover{color:var(--marke-kupfer)}
.doc h1{font:600 clamp(24px,4.5vw,30px)/1.2 var(--f-display); letter-spacing:-.02em; margin:0 0 var(--s-6)}
.doc section{
  background:var(--karte); border:1px solid var(--linie); border-radius:var(--r-karte);
  padding:var(--s-5); margin-bottom:var(--s-3);
}
.doc h2{font:600 17px/1.3 var(--f-display); letter-spacing:-.01em; margin:0 0 var(--s-3); scroll-margin-top:var(--s-5)}
.doc p{margin:0 0 var(--s-3); color:var(--text-leise); text-wrap:pretty}
.doc p:last-child{margin-bottom:0}
.doc .addr{font-style:normal; line-height:1.9; color:var(--text)}