@import url("../fonts/fonts.css");

/* ===================================================================
   OPTIMUSE — Markentoken
   ===================================================================
   Wortgleich aus ci.css v2.3 des CI-Guides, Abschnitt 03 und 04, plus
   die Formtoken aus Abschnitt 13. Kein Farbwert hier, der nicht im
   Guide steht; alle Abstufungen entstehen aus Deckkraft.
   =================================================================== */

*{box-sizing:border-box}

:root{
  color-scheme:dark;

  /* --- Primaerpalette, Abschnitt 03 ------------------------------- */
  --black:#0F0F0F;          /* Core, 45–55 % der Flaeche */
  --white:#FFFFFF;
  --grey-light:#F5F5F5;     /* Core, 25–30 % */
  --grey-middle:#C2C2C2;    /* Support */
  --grey-dark:#5A5A5A;      /* Support */
  --signal:#7488F6;         /* Accent Dark Mode, max. 5 % */
  --signal-bright:#5143E5;  /* Accent Bright Mode, max. 5 % */
  --auf-signal:var(--black); /* Schrift auf Signal-Flaeche, kippt im Bright Mode */

  /* --- Infographic-Grauskala -------------------------------------- */
  --grey-40:#999999;

  /* --- Signal-Blue-Skala ----------------------------------------- */
  --signal-60:#A9B4F9;
  --signal-80:#8798F7;
  --signal-100:#5D55EA;
  --signal-120:#5D73F0;
  --signal-140:#495DCC;

  /* --- Status, nur Oberflaeche ----------------------------------- */
  --success:#29A883;
  --warning:#EFB347;
  --alert:#D7642D;

  /* --- Abgeleitet: Deckkraft, keine neuen Hexwerte --------------- */
  --ink:var(--white);
  --ink-2:rgba(255,255,255,.72);
  --ink-3:rgba(255,255,255,.46);
  --ink-4:rgba(255,255,255,.30);
  --rule:rgba(255,255,255,.10);
  --rule-2:rgba(255,255,255,.20);

  --ground:var(--black);
  --panel:#161616;              /* Black, eine Stufe aufgehellt */
  --rail-bg:rgba(15,15,15,.86);

  /* --- Schrift, Abschnitt 04 ------------------------------------- */
  --display:"PP Monument Extended","FK Grotesk Neue",Impact,sans-serif;
  --text:"FK Grotesk Neue",-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
  --mono:"FK Grotesk SemiMono",ui-monospace,"SF Mono",Menlo,monospace;

  --spalte:1180px;

  /* --- Form, aus der Messung in Abschnitt 13 ---------------------
     optimuse.com fuehrt acht Radius-Token, alle auf 6 px, und eine
     Uebergangsdauer, 0,4 s ease-in-out. Dieser Guide uebernimmt beides,
     statt daneben ein zweites System zu behaupten. Was vollrund ist,
     ist eine Form und kein Mass — deshalb 999 px und keine Zahl aus
     der Skala. Abstandstoken gibt es bewusst nicht: die Messung hat
     dafuer kein Raster gefunden, das steht als Befund in 13.5.
     Schattentoken ebenso wenig — die Marke kennt keine Schatten. */
  --radius:6px;
  --radius-pille:999px;
  --tempo:.4s;
  --tempo-kurz:.18s;
  --kurve:ease-in-out;
}

/* Wer Bewegung abbestellt hat, bekommt keine. Das Tempo faellt auf null,
   statt jede Regel einzeln zu entschaerfen — optimuse.com haelt das
   ebenso, siehe 13.1. */
@media (prefers-reduced-motion: reduce){
  :root{--tempo:0s;--tempo-kurz:0s}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important}
}

html{-webkit-text-size-adjust:100%}


body{
  margin:0;
  background:var(--ground);
  color:var(--ink);
  font:400 16px/1.3 var(--text);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  font-variant-numeric:tabular-nums;   /* Abschnitt 04: Zahlen immer tabellarisch */
}

::selection{background:var(--signal);color:var(--auf-signal)}
:focus-visible{outline:2px solid var(--signal);outline-offset:3px;border-radius:2px}
img,svg,video,canvas{max-width:100%;display:block}