/* KapFixIT Design 2026 (Prüfstand) für den Zertifikatstrainer.
   Wird NACH app.css geladen und stellt nur Farben, Schriften und Rundungen um.
   Logik, Aufbau und Inhalte bleiben unberührt.
   Dunkel: Graphit + Eisblau. Hell: Papier + Violett.
   Bei Änderungen neuen Dateinamen vergeben (v2, v3 ...), CSS wird 1 Jahr gecacht. */

@font-face{font-family:'Archivo';font-style:normal;font-display:swap;font-weight:100 900;font-stretch:62% 125%;src:url(/assets/kfx26/fonts/archivo-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,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-display:swap;font-weight:100 900;font-stretch:62% 125%;src:url(/assets/kfx26/fonts/archivo-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-display:swap;font-weight:400;src:url(/assets/kfx26/fonts/jetbrains-mono-400.woff2) format('woff2')}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-display:swap;font-weight:600;src:url(/assets/kfx26/fonts/jetbrains-mono-600.woff2) format('woff2')}

:root{
  --brand:#67C7F4; --brand-deep:#3FA6D6; --brand-soft:rgba(103,199,244,.11); --ember:#A9E1FA;
  --auf-brand:#0B0D10;
  --bg:#101215; --bg-alt:#14171B;
  --surface:rgba(255,255,255,.03); --surface-2:rgba(255,255,255,.055);
  --line:#2A2F37; --line-strong:#434A55;
  --text:#EEF1F4; --text-muted:#C5CBD3;
  --brand-text:#67C7F4;
  --ok:#8FE3B0;
  --r-sm:4px; --r:8px; --r-lg:10px;
  --shadow:0 20px 50px -30px rgba(0,0,0,.9);
  --font-body:'Archivo',system-ui,'Segoe UI',-apple-system,Roboto,Arial,sans-serif;
  --font-display:'Archivo',system-ui,'Segoe UI',sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,'Cascadia Mono',Consolas,monospace;
}
[data-theme="light"]{
  --brand:#5A41C0; --brand-deep:#3E2A9A; --brand-soft:rgba(90,65,192,.09); --ember:#3E2A9A;
  --auf-brand:#FFFFFF;
  --bg:#F2EDE4; --bg-alt:#FFFFFF;
  --surface:rgba(20,18,16,.03); --surface-2:rgba(20,18,16,.055);
  --line:#DDD4C6; --line-strong:#BDB2A2;
  --text:#141210; --text-muted:#3D3731;
  --brand-text:#5A41C0;
  --ok:#1F7A45; --warn:#9A6700; --bad:#B42318;
  --shadow:0 1px 2px rgba(20,18,16,.06), 0 12px 32px -24px rgba(20,18,16,.45);
}

/* Grund: Graphit mit feinem Raster, ein kühles Licht statt Lila und Orange */
body{
  background-image:
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px),
    radial-gradient(1200px 680px at 8% -10%, rgba(103,199,244,.10), transparent 60%),
    radial-gradient(140% 100% at 50% 40%, transparent 46%, rgba(0,0,0,.45) 100%);
  background-size:52px 52px, 52px 52px, auto, auto;
}
[data-theme="light"] body{
  background-image:
    linear-gradient(rgba(20,18,16,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(20,18,16,.035) 1px, transparent 1px),
    radial-gradient(1200px 680px at 8% -10%, rgba(90,65,192,.07), transparent 60%);
  background-size:52px 52px, 52px 52px, auto;
}

h1,h2,h3{font-stretch:112%;font-weight:800;letter-spacing:-.02em}
h3{font-weight:700}
.due-count,.weg-zahl{font-stretch:112%}

/* Knöpfe und Marker: flächig, Text in Kontrastfarbe */
.btn-primary{background:var(--brand);color:var(--auf-brand);box-shadow:none}
.btn-primary:hover{background:var(--brand-deep);color:var(--auf-brand)}
[data-theme="light"] .btn-primary:hover{color:#fff}
.skip:focus{color:var(--auf-brand)}
.path-step.is-core .path-nr,.start-nr{color:var(--auf-brand)}
.bar span{background:var(--brand)}
.btn,.start-nr{border-radius:4px}

/* Mehr Kontrast im Betriebssystem: wie bisher, nur in den neuen Farben */
@media (prefers-contrast:more){
  :root{--text-muted:#E1E5EA;--line:rgba(255,255,255,.24);--line-strong:rgba(255,255,255,.4)}
  [data-theme="light"]{--text-muted:#2A2521;--line:rgba(20,18,16,.28);--line-strong:rgba(20,18,16,.45)}
  body,[data-theme="light"] body{background-image:none}
}