/* STARTBILD (14.10.2026, Vorgabe Bastian: "mach aus dem Tacho beim Laden der App einen Stapler, der einen LKW belaedt",
   danach "kannst du alles bitte mehr 3D machen"; 29.10.2026 "kannst du das noch etwas cooler machen?").
   Vorher (10.10.2026) ein Tacho im Stil "Nemesis Logistik" der Auftragsbearbeitung. Jetzt eine Ladeszene im Schraegbild
   (2,5D): die Tiefe laeuft nach links oben, jeder Koerper zeigt Vorderseite, Deckel und linke Stirnseite - Deckel hell,
   Vorderseite mittel, Stirnseite dunkel (Licht von rechts oben), dazu weiche Schlagschatten auf einer Bodenebene.
   Links die Halle (Tor, Innenraum mit Rueckwand, Seitenwand und Lampe), aus der ein Stapler (Gegengewicht, Schutzdach, Mast, zwei
   Zinken) mit einer Palette faehrt; er bringt sie zum Lkw, dessen Auflieger seitlich aufgeschnitten ist (Seitenwand
   innen, Boden, offene Hecktuer), hebt die Gabel, setzt ab und faehrt leer rueckwaerts zurueck (Endlosschleife, 3,6 s).
   Der Laderaum fuellt sich mit dem Ladefortschritt von Blazor (10 Plaetze, je 10 %, vom Skript in index.html als
   .ns-voll gesetzt; Reihenfolge von der Zugmaschine zum Heck, unten vor oben - so verdecken sich die Kisten richtig),
   darunter Balken, Satz und Prozent. Die Rundumleuchte auf dem Staplerdach blinkt.
   SEIT 29.10.2026 ("cooler"): die Szene steht auf einer BUEHNE (.ns-buehne, Rundung 16, Schatten) mit Himmel - am Tag Sonne und
   ziehende Wolken, nachts (data-theme="dunkel") Mond, funkelnde Sterne, beleuchtete Fenster, Aussenlampe der Halle und kraeftige
   Scheinwerfer. Am Horizont eine Hafen-Skyline (Containerbruecke mit fahrender Laufkatze, Containerstapel, Hallen, Windrad mit
   drehendem Rotor), Boden als Flaeche mit Fahrbahnmarkierung; der Stapler rollt mit drehenden Raedern (Winkel = Weg / Radius), ueber
   das Band "NEMESIS LOGISTIK" laeuft ein Glanz. FINALE bei 100 %: das Skript setzt .ns-fertig - der Stapler loest sich aus der
   Schleife und faehrt in die Halle zurueck, die Hecktuer klappt zu, der Lkw faehrt mit Rauchstoss und Staub nach rechts aus dem Bild.
   Markup und Skript stehen in index.html (#app) - Blazor ersetzt beides beim Start. Die Seite nimmt die Hausflaeche
   (--nem-flaeche) mit einem Schimmer der Akzentfarbe; Himmel, Boden, Stapler, Lkw und Ladung haben feste Farben je Tag/Nacht.
   WICHTIG fuer SVG: Gruppen, die per CSS bewegt werden (.ns-stapler, .ns-gabel, .ns-platz, .ns-rauch, .ns-wolke, .ns-rotor,
   .ns-laufkatze, .ns-lkw-zug, .ns-tuer-auf, Raeder), tragen KEIN transform-Attribut - CSS ersetzt es. Die Gabel und die Staplerraeder
   liegen in der mit 1.3 skalierten Staplergruppe: translateY(-12px) sind dort 12 Einheiten des Staplers.
   Geometrie nur in Doku/Startbild/szene_erzeugen.py aendern (einbauen.py setzt das SVG in index.html). */

.ns-start {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.1rem;
    min-height: 100vh;
    min-height: 100dvh;
    padding: 1rem;
    box-sizing: border-box;
    overflow: hidden;
    background-color: var(--nem-flaeche, #FFFFFF);
    background-image: radial-gradient(120% 80% at 50% 32%, color-mix(in srgb, var(--nem-akzent, #528EC2) 13%, var(--nem-flaeche, #FFFFFF)) 0%, var(--nem-flaeche, #FFFFFF) 72%);
    color: var(--nem-schrift, #222528);
    font-family: 'Segoe UI', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

/* ---------- Buehne mit Himmel (Tag bzw. Nacht); der Boden beginnt bei 73 % (Horizont 134 im viewBox 26..174) ---------- */
.ns-buehne {
    position: relative;
    width: min(640px, 94vw);
    border-radius: 16px;
    overflow: hidden;
    isolation: isolate;
    background: linear-gradient(180deg, #7fb2e0 0%, #b3d4ef 40%, #e0edf8 68%, #eef4f8 73%);
    box-shadow: 0 22px 44px -18px rgba(11, 37, 69, .45), 0 2px 8px rgba(11, 37, 69, .10);
}
.ns-buehne::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .45);
    pointer-events: none;
}
[data-theme="dunkel"] .ns-buehne {
    background: linear-gradient(180deg, #02070f 0%, #071426 40%, #0f2945 68%, #173656 73%);
    box-shadow: 0 22px 48px -16px rgba(0, 0, 0, .75), 0 2px 8px rgba(0, 0, 0, .4);
}
[data-theme="dunkel"] .ns-buehne::after { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07); }

.ns-szene {
    display: block;
    width: 100%;
    height: auto;
    overflow: hidden;
}

/* ---------- Himmel ---------- */
.ns3-schein-mitte { stop-color: #fff3c8; stop-opacity: .95; }
.ns3-schein-rand { stop-color: #fff3c8; stop-opacity: 0; }
[data-theme="dunkel"] .ns3-schein-mitte { stop-color: #cfe0ff; stop-opacity: .32; }
[data-theme="dunkel"] .ns3-schein-rand { stop-color: #cfe0ff; stop-opacity: 0; }
.ns-mond, .ns-sterne { display: none; }
[data-theme="dunkel"] .ns-sonne { display: none; }
[data-theme="dunkel"] .ns-mond, [data-theme="dunkel"] .ns-sterne { display: inline; }
.ns-mond-sichel { fill: #f3f0dd; }
.ns-stern { fill: #e8f0ff; animation: ns-funkeln 3.2s ease-in-out infinite; }
@keyframes ns-funkeln {
    0%, 100% { opacity: .9; }
    50% { opacity: .2; }
}
.ns-wolke { fill: #ffffff; opacity: .92; animation: ns-wolke 90s linear infinite; }
[data-theme="dunkel"] .ns-wolke { fill: #1d3550; opacity: .55; }
.ns-wolke-1 { animation-delay: -25s; }
.ns-wolke-2 { animation-duration: 120s; animation-delay: -80s; }
.ns-wolke-3 { animation-duration: 150s; animation-delay: -40s; }
@keyframes ns-wolke {
    from { transform: translateX(-50px); }
    to { transform: translateX(500px); }
}

/* ---------- Ferne: Hafen-Skyline ---------- */
.ns-ferne-1, .ns-ferne-nabe { fill: #8fb0cf; }
.ns-ferne-2 { fill: #a9c5df; }
.ns-ferne-linie { fill: none; stroke: #8fb0cf; stroke-width: .7; }
.ns-container-rost { fill: #d08f63; opacity: .85; }
.ns-container-blau { fill: #6f9cc4; opacity: .85; }
.ns-container-gruen { fill: #7fb08f; opacity: .85; }
.ns-fenster { fill: #c3d6e8; }
[data-theme="dunkel"] .ns-ferne-1, [data-theme="dunkel"] .ns-ferne-nabe { fill: #0b1a2c; }
[data-theme="dunkel"] .ns-ferne-2 { fill: #0f2238; }
[data-theme="dunkel"] .ns-ferne-linie { stroke: #0b1a2c; }
[data-theme="dunkel"] .ns-container-rost { fill: #4a2f25; }
[data-theme="dunkel"] .ns-container-blau { fill: #1c3550; }
[data-theme="dunkel"] .ns-container-gruen { fill: #1f3a30; }
[data-theme="dunkel"] .ns-fenster { fill: #ffd27a; filter: drop-shadow(0 0 1.5px rgba(255, 210, 122, .9)); }
.ns-warnlicht { fill: #ff4d4d; animation: ns-warnlicht 1.6s steps(2) infinite; }
.ns-warnlicht-2 { animation-delay: -.8s; }
[data-theme="dunkel"] .ns-warnlicht { filter: drop-shadow(0 0 2px rgba(255, 77, 77, .95)); }
@keyframes ns-warnlicht {
    0% { opacity: 1; }
    50% { opacity: .15; }
}
.ns-laufkatze { animation: ns-laufkatze 11s ease-in-out infinite; }
@keyframes ns-laufkatze {
    0%, 8% { transform: translateX(0); }
    46%, 58% { transform: translateX(30px); }
    96%, 100% { transform: translateX(0); }
}
/* Rotor dreht um die Nabe (418/84 im viewBox) */
.ns-rotor { transform-box: view-box; transform-origin: 418px 84px; animation: ns-rotor 7s linear infinite; }
@keyframes ns-rotor {
    to { transform: rotate(360deg); }
}

/* ---------- Boden ---------- */
.ns3-grund-oben { stop-color: #cfd9e3; }
.ns3-grund-unten { stop-color: #b9c6d2; }
.ns3-fleck-mitte { stop-color: #ffffff; stop-opacity: .55; }
.ns3-fleck-rand { stop-color: #ffffff; stop-opacity: 0; }
.ns-horizont { stroke: rgba(255, 255, 255, .7); stroke-width: .6; }
.ns-markierung { fill: none; stroke: #ffffff; stroke-opacity: .85; stroke-width: 1.3; stroke-dasharray: 12 9; }
[data-theme="dunkel"] .ns3-grund-oben { stop-color: #142030; }
[data-theme="dunkel"] .ns3-grund-unten { stop-color: #0b121b; }
[data-theme="dunkel"] .ns3-fleck-mitte { stop-color: #528ec2; stop-opacity: .16; }
[data-theme="dunkel"] .ns3-fleck-rand { stop-color: #528ec2; stop-opacity: 0; }
[data-theme="dunkel"] .ns-horizont { stroke: rgba(130, 170, 215, .22); }
[data-theme="dunkel"] .ns-markierung { stroke: #8a96a3; stroke-opacity: .45; }
.ns-schatten { fill: rgba(11, 37, 69, .34); }
[data-theme="dunkel"] .ns-schatten { fill: rgba(0, 0, 0, .6); }

/* ---------- Halle ---------- */
.ns-halle-boden { fill: #2c3a48; }
.ns-halle-seite { stroke: #1b2a3a; stroke-width: .4; }
.ns-halle-lampe { fill: #ffe2a8; filter: drop-shadow(0 0 3px rgba(255, 210, 122, .9)); }
.ns-halle-dach { fill: #8a97a5; }
.ns-halle-l { fill: #3a4654; }
.ns-halle-wand { stroke: #3d4a58; stroke-width: .6; }
.ns-halle-kante { fill: #3d4a58; }
.ns-warn-grund { stroke: #f28c28; stroke-width: 4; }
.ns-warnstreifen { stroke: #1b1f24; stroke-width: 4; stroke-dasharray: 4 4; }
/* Aussenlampe ueber dem Tor: am Tag aus, nachts mit Lichtkegel auf den Hof */
.ns-aussenlampe-arm { fill: #3d4a58; }
.ns-aussenlampe { fill: #d7dde3; }
.ns-aussenkegel, .ns-aussenlicht { opacity: 0; }
[data-theme="dunkel"] .ns-aussenlampe { fill: #ffe2a8; filter: drop-shadow(0 0 3px rgba(255, 210, 122, .95)); }
[data-theme="dunkel"] .ns-aussenkegel { opacity: .85; }
[data-theme="dunkel"] .ns-aussenlicht { opacity: 1; }

/* ---------- Lkw ---------- */
.ns-rad-hinten, .ns-rad-lauf { fill: #0d1014; }
.ns-rad { fill: url(#ns3Reifen); }
.ns-rad-felge { fill: url(#ns3Felge); stroke: #3d4a58; stroke-width: .5; }
.ns-rad-nabe { fill: #3d4a58; }
.ns-rad-mutter { fill: #4a5664; }
.ns-chassis-l { fill: #0d1520; }
.ns-chassis-v { fill: #1b2a3a; }

.ns-kab-o { fill: #2f639c; }
.ns-kab-l { fill: #071c36; }
.ns-kab-v { stroke: #06182e; stroke-width: .8; }
.ns-scheibe { stroke: #06182e; stroke-width: .6; }
.ns-scheibe-glanz { fill: rgba(255, 255, 255, .35); }
.ns-tuerfuge { stroke: #06182e; stroke-width: .8; }
.ns-griff { fill: #9aa7b4; }
.ns-stufe { fill: #3d4a58; }
.ns-scheinwerfer { fill: #ffd27a; filter: drop-shadow(0 0 2px rgba(255, 210, 122, .9)); }
.ns-auspuff { fill: #aab6c2; stroke: #5d6a78; stroke-width: .5; }
/* Scheinwerferkegel: am Tag zart, nachts kraeftig */
.ns-strahl { opacity: .35; }
[data-theme="dunkel"] .ns-strahl { opacity: .95; }
[data-theme="dunkel"] .ns-scheinwerfer { filter: drop-shadow(0 0 4px rgba(255, 225, 150, 1)); }
.ns-rueckleuchte { fill: #e53935; filter: drop-shadow(0 0 1.5px rgba(229, 57, 53, .8)); }
.ns-seitenleuchte { fill: #ffb347; }
[data-theme="dunkel"] .ns-rueckleuchte { filter: drop-shadow(0 0 3px rgba(255, 60, 50, 1)); }
[data-theme="dunkel"] .ns-seitenleuchte { filter: drop-shadow(0 0 2px rgba(255, 179, 71, 1)); }

/* Auflieger: Innenseite der fernen Wand (Verlauf in index.html), Boden, Decke; davor der Rahmen der aufgeschnittenen Wand */
.ns-innen-boden { fill: #2f5683; }
.ns-innen-decke { fill: #081a31; }
.ns-auf-o { fill: #2f639c; }
.ns-auf-v { fill: #0f3260; }
.ns-heckrahmen { fill: #08203d; }
.ns-heck-oeffnung { fill: #041427; }
.ns-tuer { fill: #164577; stroke: #06182e; stroke-width: .6; }
.ns-tuer-riegel { stroke: #9aa7b4; stroke-width: .8; }
.ns-tuer-fuge { stroke: #06182e; stroke-width: .7; }
.ns-tuer-zu { opacity: 0; }
.ns-glanz { stroke: rgba(255, 255, 255, .28); stroke-width: 1; }
.ns-aufschrift { font: 700 6px 'Segoe UI', Arial, sans-serif; letter-spacing: .25em; fill: #f28c28; text-anchor: middle; }
/* Glanz laeuft ueber das Band "NEMESIS LOGISTIKSOFTWARE" (clipPath ns3Band), dann Pause */
.ns-glanzlauf { animation: ns-glanzlauf 5s ease-in-out infinite; }
@keyframes ns-glanzlauf {
    0% { transform: translateX(0); }
    45%, 100% { transform: translateX(220px); }
}

/* Rauch aus dem Auspuff: steigt auf und verblasst */
.ns-rauch { fill: #9aa7b4; opacity: 0; animation: ns-rauch 2.4s ease-out infinite; transform-box: fill-box; transform-origin: center; }
.ns-rauch-2 { animation-delay: 1.2s; }
@keyframes ns-rauch {
    0% { opacity: .55; transform: translate(0, 0) scale(.6); }
    100% { opacity: 0; transform: translate(-10px, -22px) scale(1.8); }
}

/* Ladung im Laderaum: ein Platz erscheint, sobald der Ladefortschritt ihn erreicht (Skript setzt .ns-voll) */
.ns-platz { opacity: 0; transform: translateY(-8px); transition: opacity .35s ease-out, transform .35s ease-out; }
.ns-platz.ns-voll { opacity: 1; transform: translateY(0); }

/* ---------- Ladung (Palette mit Karton): Deckel hell, Vorderseite mittel, Stirnseite dunkel ---------- */
.ns-pal-o { fill: #c58f55; }
.ns-pal-v { fill: #a0703c; }
.ns-pal-l { fill: #6e4721; }
.ns-kis-o { fill: #ecc18c; stroke: #a8743f; stroke-width: .35; }
.ns-kis-v { fill: #c8935a; stroke: #8a5a2b; stroke-width: .35; }
.ns-kis-l { fill: #94622f; stroke: #6b4521; stroke-width: .35; }
.ns-band-kiste { stroke: #f4dfba; stroke-width: 1.3; }

/* ---------- Stapler ---------- */
.ns-rumpf-o { fill: #ffbb6a; }
.ns-rumpf-l { fill: #b85f0e; }
.ns-rumpf-v { stroke: #8a4a0c; stroke-width: .6; }
.ns-rumpf-kante, .ns-sitz { fill: #1b1f24; }
.ns-fahrer { fill: #0b2545; }
.ns-lenkrad { stroke: #3d4a58; stroke-width: 1.4; stroke-linecap: round; }
.ns-dach-o { fill: #7b8896; }
.ns-dach, .ns-mast { fill: #3d4a58; }
.ns-mast-fern, .ns-dach-fern, .ns-zinke-fern { fill: #1b2229; }
.ns-mast-licht { fill: #8a97a5; }
.ns-traeger-o { fill: #5d6a78; }
.ns-traeger, .ns-zinke { fill: #262e37; }

/* Fahrt: aus der Halle (-46) zum Lkw (98, dann 106 = Gabel im Laderaum), absetzen, rueckwaerts zurueck. */
.ns-stapler { animation: ns-fahrt 3.6s ease-in-out infinite; }
@keyframes ns-fahrt {
    0%, 8% { transform: translateX(-46px); }
    38% { transform: translateX(98px); }
    46%, 54% { transform: translateX(106px); }
    60% { transform: translateX(98px); }
    92%, 100% { transform: translateX(-46px); }
}
/* Raeder rollen mit: Winkel = Weg / Radius (Radius 7 bzw. 6 in der 1.3-skalierten Gruppe = 9,1 bzw. 7,8 Einheiten),
   dieselben Prozentpunkte und dieselbe Zeitfunktion wie ns-fahrt. Muttern und Nabe drehen um die Radmitte. */
.ns-st-rad7, .ns-st-rad6, .ns-rad-dreh { transform-box: fill-box; transform-origin: center; }
.ns-st-rad7 { animation: ns-rollen-7 3.6s ease-in-out infinite; }
.ns-st-rad6 { animation: ns-rollen-6 3.6s ease-in-out infinite; }
@keyframes ns-rollen-7 {
    0%, 8% { transform: rotate(0deg); }
    38% { transform: rotate(906.7deg); }
    46%, 54% { transform: rotate(957.1deg); }
    60% { transform: rotate(906.7deg); }
    92%, 100% { transform: rotate(0deg); }
}
@keyframes ns-rollen-6 {
    0%, 8% { transform: rotate(0deg); }
    38% { transform: rotate(1057.8deg); }
    46%, 54% { transform: rotate(1116.5deg); }
    60% { transform: rotate(1057.8deg); }
    92%, 100% { transform: rotate(0deg); }
}
/* Gabel: auf der Fahrt zur Ladekante auf Bodenhoehe des Aufliegers heben, nach dem Absetzen senken */
.ns-gabel { animation: ns-heben 3.6s ease-in-out infinite; }
@keyframes ns-heben {
    0%, 14% { transform: translateY(0); }
    36%, 50% { transform: translateY(-12px); }
    56% { transform: translateY(-10px); }
    74%, 100% { transform: translateY(0); }
}
/* Palette auf der Gabel: im Lkw abgesetzt, in der Halle neu aufgenommen */
.ns-ladung { animation: ns-ladung 3.6s linear infinite; }
@keyframes ns-ladung {
    0%, 50% { opacity: 1; }
    51%, 95% { opacity: 0; }
    96%, 100% { opacity: 1; }
}

/* Rundumleuchte auf dem Staplerdach - blinkt, solange geladen wird */
.ns-leuchte {
    fill: #ff9a2e;
    animation: ns-rundum 1s steps(2) infinite;
    filter: drop-shadow(0 0 3px rgba(255, 154, 46, .9));
}
@keyframes ns-rundum {
    0% { fill: #ff9a2e; }
    50% { fill: #7a4410; }
}

/* ---------- FINALE bei 100 % (.ns-fertig am .ns-start, gesetzt vom Skript in index.html) ----------
   Das Skript uebernimmt die aktuelle Lage von Stapler, Gabel, Ladung und Staplerraedern als Inline-Wert und faehrt sie per Transition
   zurueck (Stapler in die Halle: --ns-rueck). Ist die Gabel noch im Laderaum, wartet die Abfahrt (--ns-verzug). Dann klappt die
   Hecktuer zum Scharnier (x = 178) zu, das geschlossene Tuerblatt blendet ein, und der Lkw faehrt mit drehenden Raedern ab. */
.ns-fertig .ns-stapler, .ns-fertig .ns-gabel, .ns-fertig .ns-ladung, .ns-fertig .ns-st-rad7, .ns-fertig .ns-st-rad6 { animation: none; }
.ns-fertig .ns-stapler, .ns-fertig .ns-st-rad7, .ns-fertig .ns-st-rad6 { transition: transform var(--ns-rueck, 1s) ease-in-out; }
.ns-fertig .ns-gabel { transition: transform .5s ease-in-out; }
.ns-tuer-auf { transform-box: view-box; transform-origin: 178px 0px; }
.ns-fertig .ns-tuer-auf { animation: ns-tuer-zu .4s ease-in var(--ns-verzug, .1s) forwards; }
@keyframes ns-tuer-zu {
    to { transform: scaleX(.04); opacity: 0; }
}
.ns-fertig .ns-tuer-zu { animation: ns-einblenden .15s linear calc(var(--ns-verzug, .1s) + .3s) forwards; }
@keyframes ns-einblenden {
    to { opacity: 1; }
}
/* Abfahrt: 330 Einheiten nach rechts aus dem Bild, die Raeder (Radius 9) drehen 330/9 rad = 2101 Grad mit derselben Zeitfunktion */
.ns-fertig .ns-lkw-zug { animation: ns-abfahrt 1.9s cubic-bezier(.55, .02, .85, .35) calc(var(--ns-verzug, .1s) + .5s) forwards; }
@keyframes ns-abfahrt {
    to { transform: translateX(330px); }
}
.ns-fertig .ns-rad-dreh { animation: ns-rollen-lkw 1.9s cubic-bezier(.55, .02, .85, .35) calc(var(--ns-verzug, .1s) + .5s) forwards; }
@keyframes ns-rollen-lkw {
    to { transform: rotate(2101deg); }
}
.ns-fertig .ns-rauch { animation: ns-rauch-stark .7s ease-out infinite; }
.ns-fertig .ns-rauch-2 { animation-delay: .35s; }
@keyframes ns-rauch-stark {
    0% { opacity: .8; transform: translate(0, 0) scale(.8); }
    100% { opacity: 0; transform: translate(-16px, -26px) scale(2.6); }
}
/* Staub beim Anfahren: bleibt am Platz, quillt auf und verweht */
.ns-staub { fill: rgba(150, 140, 125, .6); opacity: 0; transform-box: fill-box; transform-origin: center; }
[data-theme="dunkel"] .ns-staub { fill: rgba(130, 140, 150, .45); }
.ns-fertig .ns-staub { animation: ns-staub 1.1s ease-out calc(var(--ns-verzug, .1s) + .6s) forwards; }
.ns-fertig .ns-staub-2 { animation-delay: calc(var(--ns-verzug, .1s) + .75s); }
@keyframes ns-staub {
    0% { opacity: 0; transform: translateX(0) scale(.4); }
    25% { opacity: .9; }
    100% { opacity: 0; transform: translateX(-14px) scale(2.4); }
}

/* ---------- Fortschritt: Balken 8 px, Akzentverlauf mit Gluehen und laufendem Glanz ---------- */
.ns-balken {
    width: min(420px, 80vw);
    height: 8px;
    border-radius: 999px;
    background: var(--nem-kontur, #D7E3EE);
    background: color-mix(in srgb, var(--nem-akzent, #528EC2) 16%, var(--nem-flaeche, #FFFFFF));
    box-shadow: inset 0 1px 2px rgba(11, 37, 69, .18);
}
.ns-balken-fuellung {
    position: relative;
    overflow: hidden;
    width: var(--ns-lade-wert, 0%);
    height: 100%;
    border-radius: inherit;
    background: var(--nem-akzent, #528EC2);
    background: linear-gradient(90deg, #2f6ea6, var(--nem-akzent, #528EC2) 55%, #8cc0ea);
    box-shadow: 0 0 12px color-mix(in srgb, var(--nem-akzent, #528EC2) 65%, transparent);
    transition: width .35s ease-out;
}
.ns-balken-fuellung::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .6), transparent);
    transform: translateX(-100%);
    animation: ns-balken-glanz 1.6s ease-in-out infinite;
}
@keyframes ns-balken-glanz {
    to { transform: translateX(100%); }
}
.ns-text {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: .55rem;
    font-size: 14px;
    letter-spacing: .03em;
    text-align: center;
}
.ns-satz { opacity: .72; }
.ns-ziffern {
    min-width: 3.2em;
    font-size: 15px;
    font-weight: 700;
    color: var(--nem-akzent, #528EC2);
    font-variant-numeric: tabular-nums;
    text-align: left;
}

@media (prefers-reduced-motion: reduce) {
    .ns-stapler { animation: none; transform: translateX(98px); }
    .ns-gabel { animation: none; transform: translateY(-12px); }
    .ns-ladung, .ns-rauch, .ns-leuchte, .ns-stern, .ns-wolke, .ns-rotor, .ns-laufkatze, .ns-glanzlauf, .ns-warnlicht,
    .ns-st-rad7, .ns-st-rad6, .ns-balken-fuellung::after { animation: none; }
    .ns-rauch { opacity: 0; }
    .ns-platz, .ns-balken-fuellung { transition: none; }
    /* Finale ohne Bewegung: der Lkw bleibt stehen, die Tuer ist einfach zu */
    .ns-fertig .ns-stapler, .ns-fertig .ns-gabel, .ns-fertig .ns-st-rad7, .ns-fertig .ns-st-rad6 { transition: none; }
    .ns-fertig .ns-lkw-zug, .ns-fertig .ns-rad-dreh, .ns-fertig .ns-staub, .ns-fertig .ns-rauch { animation: none; }
    .ns-fertig .ns-tuer-auf { animation: none; opacity: 0; }
    .ns-fertig .ns-tuer-zu { animation: none; opacity: 1; }
}