/* Schriften, lokal – keine Anfrage an Google.
   Schibsted Grotesk für alles Sichtbare, auch für Stromkreise,
   Kennzeichnungen und Maße. */
@font-face{font-family:'Schibsted';src:url(fonts/schibsted-grotesk-latin.woff2) format('woff2');font-weight:400 900;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212}
@font-face{font-family:'Schibsted';src:url(fonts/schibsted-grotesk-latin-ext.woff2) format('woff2');font-weight:400 900;font-display:swap;unicode-range:U+0100-02AF,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2C60-2C7F,U+A720-A7FF}

/* Kabelfarben: Die Aderfarben nach DIN VDE sind das Erkennungszeichen.
   Braun, Schwarz, Grau = Außenleiter L1–L3, Blau = Neutralleiter,
   Grün-Gelb = Schutzleiter. Der Rest bleibt ruhig: warmes Weiß wie ein
   Kabelmantel, Graphit für Text. */
:root{
  --papier:#f6f5f1;
  --weiss:#ffffff;
  --graphit:#1e2225;
  --text:#3a4045;
  --grau:#6c7177;
  --linie:#dcdad3;
  --braun:#8b5634;
  --schwarz:#1e2225;
  --adergrau:#8d9297;
  --blau:#2b6cb3;
  --gruen:#3d8b45;
  --gelb:#e7c22c;
  --mono:'Schibsted',system-ui,-apple-system,'Segoe UI',sans-serif; /* früher Monospace – wirkte zu sehr nach Vorlage */
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;color:var(--text);background:var(--papier);font-size:17px;line-height:1.6;font-family:'Schibsted',system-ui,-apple-system,'Segoe UI',sans-serif}
img{max-width:100%;display:block}
a{color:inherit}
.demoband{background:var(--graphit);color:#cdd1d4;font:12px/1.4 system-ui,sans-serif;text-align:center;padding:7px 16px}
.demoband b{color:#fff;font-weight:600}
.demoband a{color:inherit;text-decoration:underline;text-underline-offset:2px}
/* Aderband: fünf Streifen in Leiterfarben, Grün-Gelb gestreift */
.ader{display:flex;height:6px}
.ader i{flex:1}
.ader i:nth-child(1){background:var(--braun)}
.ader i:nth-child(2){background:var(--schwarz)}
.ader i:nth-child(3){background:var(--adergrau)}
.ader i:nth-child(4){background:var(--blau)}
.ader i:nth-child(5){background:repeating-linear-gradient(115deg,var(--gruen) 0 10px,var(--gelb) 10px 20px)}
.knopf{display:inline-flex;align-items:center;gap:10px;font:600 17px/1 'Schibsted',system-ui,sans-serif;text-decoration:none;padding:15px 22px;border-radius:6px;background:var(--graphit);color:#fff;border:0;cursor:pointer}
.knopf:hover{background:#000}
.knopf.leise{background:transparent;color:var(--graphit);box-shadow:inset 0 0 0 1.5px currentColor}
.knopf.leise:hover{background:rgba(0,0,0,.05)}
.knopf:focus-visible,a:focus-visible,button:focus-visible{outline:3px solid var(--blau);outline-offset:3px}
[hidden]{display:none!important}