/* ================= Blauer Wireframe =================
   Die Werte stammen NICHT mehr aus der Marketingseite des Kits,
   sondern aus den Farbstilen der VWGT-Library (00 VWGT LIBRARY),
   am 2026-09-16 direkt ausgelesen. Die Library führt die Reihe des
   Wireframe-Kits bereits als `wf-blue` in zwölf Stufen, und
   `wf-blue--400` ist exakt das `#0055FF` des Kits.

     wf-blue--50  #F2F6FF    wf-blue--200 #6392F0
     wf-blue--75  #E7F0FF    wf-blue--300 #4B82EE
     wf-blue--100 #D8E6FF    wf-blue--350 #4866FF
     wf-blue--125 #C6DAFF    wf-blue--400 #0055FF
     wf-blue--140 #A7C5FD    wf-blue--450 #014DE5
     wf-blue--150 #7CA7FF    wf-blue-600  #003EB9

   Ink und Grau ebenfalls aus der Library: black--300 #181818 und
   gray--260 #757575. Dieselben Werte verwendet Stefans
   Sidebar-Studie vom 14.09.2026.

   Ein Wireframe unterscheidet Zustände über Füllung und Strichart,
   nicht über verschiedene Farbtöne: erledigt ist dunkelblau und
   gefüllt, laufend ist blau und getönt, offen ist hellblau und
   gestrichelt. Die Rollennamen der Variablen bleiben, damit die
   Bauteile unverändert weiterlaufen; sie tragen jetzt Blauwerte. */
:root{
  --paper:#FFFFFF;
  --paper-raised:#FFFFFF;
  --ink:#181818;          /* black--300 */
  --ink-soft:#757575;     /* gray--260 */
  --green:#003EB9;        /* wf-blue-600, erledigt und gefüllt */
  --green-deep:#003EB9;
  --amber:#0055FF;        /* wf-blue--400, laufend und Aufmerksamkeit */
  --amber-deep:#014DE5;   /* wf-blue--450, Hover */
  --red:#FF0000;          /* red-error--400, Pflicht und Gefahr */
  --red-deep:#FF0000;
  --sky:#0055FF;
  --line:#A7C5FD;         /* wf-blue--140 */
  --tint:#E7F0FF;         /* wf-blue--75 */
  --tint-strong:#D8E6FF;  /* wf-blue--100 */
  --shadow-off: none;
  --shadow-off-sm: none;
  --radius: 8px;

  /* ---- Motion-Tokens, übernommen aus transitions.dev und aus der
     Sidebar-Studie jbc-cockpit-sidebar.html vom 14.09.2026 ---- */
  --duration-stagger:   40ms;
  --duration-micro:     80ms;
  --duration-quick:     150ms;  /* Hover, Farbwechsel, Druckfeedback */
  --duration-fast:      250ms;  /* Tabs, Seitenwechsel, Icon-Tausch */
  --duration-medium:    350ms;  /* Panel schliessen, Toast schliessen */
  --duration-slow:      400ms;  /* Panel oeffnen, Balken fuellen */
  --duration-very-slow: 500ms;  /* Betonung */
  --ease-smooth-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out:        ease-in-out;
  --ease-out:           ease-out;
  --ease-linear:        linear;
  --ease-bounce:        cubic-bezier(0.34, 1.36, 0.64, 1);

  /* Sidebar-Seitenwechsel: kleiner Versatz, Unschaerfe, Blende.
     Die Spalte selbst bewegt sich nie, der Inhalt rechts bleibt stehen. */
  --panel-distance: 14px;
  --panel-blur: 4px;
  --panel-slide-dur: 320ms;
  --panel-fade-dur: 240ms;
  --panel-ease: var(--ease-smooth-out);

  /* Registrierung: Fortschrittsbalken fuellt sich beim Schrittwechsel. */
  --reg-progress-dur: var(--duration-slow);
  --reg-progress-ease: var(--ease-smooth-out);

  --font-display:'Inter',system-ui,sans-serif;
  --font-body:'Inter',system-ui,sans-serif;
  --font-mono:'IBM Plex Mono',monospace;
}