/* gk-fortschritt.css — die Stufenleiste des Auftragsfortschritts.
   ⚠️ GETEILT zwischen Kundenportal und Lieferantenportal (Georgs Punkt 2 vom 23.08.:
   „Den Auftragsfortschritt wie bei den Kunden anzeigen"). Herausgeloest aus
   `kundenportal.html`, nicht kopiert — zwei Fassungen liefen auseinander, und „wie bei
   den Kunden" verlangt gerade, dass sie GLEICH bleiben.
   Der Injektor bindet die Datei in jede Seite ein (server.js, neben gk-belegfarben.css). */
/* §Punkt 4 (Georg 23.08.) — „Das mit der Farbenblindheit zum umstellen wie bei Kundenansicht."
   Der Schalter im Schnellsuche-Panel stellte bis heute nur die CHIPS um; die Stufenleiste trug
   feste Hex-Werte und blieb aussen vor — auch im Kundenportal. Genau sie ist bei Rot-Gruen-
   Schwaeche aber die kritische Stelle: gruen = erreicht, grau = offen.
   ⚠️ Die Fortschritts-Tokens `--gkb-f0..f3` existierten seit dem 22.08. und wurden von
   NIEMANDEM gelesen (repo-weit gemessen: 0 Nutzer ausser einem Test, der ihre Existenz prueft).
   ⚠️ BITGLEICH im Normalfall: `--gkb-f2` ist dort exakt `#2e9e5b` — die Umstellung aendert die
   gewohnte Ansicht nicht, sie macht den Schalter nur wirksam. Der Rueckfallwert nach dem Komma
   haelt die Leiste auch dann richtig, wenn `gk-belegfarben.css` einmal fehlt.
   ⚠️ Navy (`#0f2d52`, die AKTUELLE Stufe) bleibt fest: es ist bei Rot-Gruen-Schwaeche
   unproblematisch und traegt die Orientierung „hier steht der Vorgang gerade".
   ⚠️ Die graue Verbindungslinie bleibt EBENFALLS fest. `--gkb-spur` sah wie das passende
   Token aus, ist aber `#e6eaef` (nicht `#dfe4ea`) und im Dunkelmodus `#2a3a4b` — die
   Umstellung haette die Linie unbemerkt aufgehellt und im Dunkelmodus dunkelblau gemacht,
   waehrend die Leiste sonst gar keine Dunkelmodus-Anpassung hat. Fuer Punkt 4 zaehlt allein
   der Kontrast GRUEN gegen GRAU, und der kommt aus `--gkb-f2`. */

/* ═══ §Auftragsfortschritt (Georg 22.08.2026) — Stufenleiste statt Belegnummern-Chips ═══════
   Ersetzt die frühere `.flowchips`-Zeile. ⚠️ Die Leiste scrollt in ihrem EIGENEN Rahmen
   (`overflow-x:auto`): zehn Stufen brauchen ~920 px, ein Handy hat 375 — ohne den Rahmen
   schöbe sie die ganze Seite quer (§33f). `flex:1 0 92px` hält die Stufen am Rechner gleich
   breit und lässt sie am Handy NICHT unter die lesbare Breite schrumpfen. */
.fsbox   { background:#fff; border:1px solid #e4e8ee; border-radius:10px; padding:14px 16px 10px;
           margin:8px 0 12px; box-shadow:0 2px 8px rgba(0,0,0,.07); }
.fskopf  { font-size:12.5px; font-weight:700; color:#0f2d52; margin-bottom:13px;
           display:flex; align-items:center; gap:7px; }
.fsleiste{ display:flex; overflow-x:auto; padding-bottom:5px; }
/* ⚠️ 72 px, nicht 92: das Schnellsuche-Panel nimmt links dauerhaft 262 px (§33d), dadurch
   bleiben bei einem 1280-px-Fenster nur ~763 px für den Inhalt. Mit 92 px brauchten zehn Stufen
   920 px — „Versandt" und „Geliefert" lagen ausserhalb, und bei einem Fortschrittsbalken gehört
   das Ziel ins Bild. `flex-grow:1` lässt sie bei mehr Platz wieder breiter werden; `flex-shrink:0`
   verhindert, dass sie am Handy unter die lesbare Breite fallen — dort scrollt die Leiste. */
.fsstufe { flex:1 0 72px; min-width:72px; text-align:center; position:relative; }
/* Verbindungslinie: von der Mitte der VORIGEN Stufe zur Mitte dieser. Deshalb `left:-50%`
   und volle Breite — nicht am Kreis, sonst reisst sie beim Umbruch. */
.fsstufe::before { content:''; position:absolute; top:15px; left:-50%; width:100%; height:3px;
                   background:#dfe4ea; z-index:0; }
.fsstufe:first-child::before { display:none; }
.fsstufe.ok::before, .fsstufe.akt::before { background:var(--gkb-f2,#2e9e5b); }
.fskreis { position:relative; z-index:1; width:31px; height:31px; margin:0 auto; border-radius:50%;
           display:flex; align-items:center; justify-content:center; font-size:14px; line-height:1; }
.fsstufe.ok  .fskreis { background:var(--gkb-f2,#2e9e5b); color:#fff; font-size:15px; }
.fsstufe.akt .fskreis { background:#0f2d52; color:#fff; box-shadow:0 0 0 4px #dbe9f7; }
.fsstufe.off .fskreis { background:#fff; border:2px solid #dfe4ea; filter:grayscale(1); opacity:.75; }
.fslabel { font-size:10px; font-weight:700; margin-top:8px; line-height:1.22; padding:0 2px;
           hyphens:auto; -webkit-hyphens:auto; }
.fsstufe.ok  .fslabel { color:var(--gkb-f2,#2e9e5b); }
.fsstufe.akt .fslabel { color:#0f2d52; }
.fsstufe.off .fslabel { color:#95a0ad; }
.fsdatum { font-size:9.5px; color:#95a0ad; margin-top:3px; }
.fsfuss  { font-size:10.5px; color:#7a8595; margin-top:9px; padding-top:8px; border-top:1px solid #f0f2f5; }