/* 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").
   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, die
   zu den Raendern in die Seitenflaeche auslaeuft.
   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.
   Markup und Skript stehen in index.html (#app) - Blazor ersetzt beides beim Start. Die Seite nimmt die Hausflaeche
   (--nem-flaeche), der Boden die Kontur (--nem-kontur), also hell oder dunkel wie die App; Stapler, Lkw und Ladung
   haben feste Farben (Nemesis-Nachtblau, Orange, Karton).
   WICHTIG fuer SVG: Gruppen, die per CSS bewegt werden (.ns-stapler, .ns-gabel, .ns-platz, .ns-rauch), tragen KEIN
   transform-Attribut - CSS ersetzt es. Die Gabel liegt in der mit 1.3 skalierten Staplergruppe: translateY(-12px)
   sind dort 12 Einheiten des Staplers. */

.ns-start {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .9rem;
    min-height: 100vh;
    min-height: 100dvh;
    padding: 1rem;
    box-sizing: border-box;
    overflow: hidden;
    background: var(--nem-flaeche, #FFFFFF);
    color: var(--nem-schrift, #222528);
    font-family: 'Segoe UI', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

.ns-szene {
    width: min(600px, 94vw);
    height: auto;
    overflow: hidden;
}

/* ---------- Boden und Schatten ---------- */
.ns3-boden-mitte { stop-color: var(--nem-kontur, #D7E3EE); stop-opacity: 1; }
.ns3-boden-rand { stop-color: var(--nem-kontur, #D7E3EE); stop-opacity: 0; }
.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; }

/* ---------- 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-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-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; }

/* 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-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; }

/* 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); }
}
/* 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; }
}

/* ---------- Fortschritt ---------- */
.ns-balken {
    width: min(360px, 80vw);
    height: 6px;
    border-radius: 3px;
    background: var(--nem-kontur, #D7E3EE);
    overflow: hidden;
}
.ns-balken-fuellung {
    width: var(--ns-lade-wert, 0%);
    height: 100%;
    background: var(--nem-akzent, #528EC2);
    transition: width .35s ease-out;
}
.ns-text {
    font-size: 1rem;
    letter-spacing: .04em;
    text-align: center;
}
.ns-ziffern { margin-left: .4rem; color: var(--nem-akzent, #528EC2); font-variant-numeric: tabular-nums; }

@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 { animation: none; }
    .ns-rauch { opacity: 0; }
    .ns-platz, .ns-balken-fuellung { transition: none; }
}