/* =============================================================================
   FAHRZEUG-SLIDER (Startseite)
   -----------------------------------------------------------------------------
   Rene: "da koennte so'n Slideshow sein, weil 3 fast zu wenig ist ... allerdings
   NICHT alle, weil trotzdem dann zu allen Fahrzeugen Sinn haben muss."
   Also 6 statt 3 und statt 9 — der Weg "Alle Fahrzeuge ansehen" behaelt seinen Zweck.

   Warum so und nicht anders:
   - KEIN Autoplay. Baymard: von den Seiten mit Karussell implementieren 75% es
     falsch; NN/g dokumentiert, dass automatisch wechselnde Inhalte uebersehen
     werden. Rene: "automatisch gut, beziehungsweise wenn du selber swipest" —
     also die Variante, die belegbar funktioniert.
   - Das Scrollen macht der Browser (scroll-snap), nicht JavaScript. Wischen auf
     Touch, Trackpad-Swipe und Pfeiltasten funktionieren dadurch von selbst,
     auch wenn das Skript nicht laedt.
   - Die vierte Karte lugt bewusst herein. Das ist die staerkste Aufforderung
     weiterzuscrollen — dieselbe Begruendung wie beim 86svh-Hero (NN/g,
     "Illusion of Completeness").
   - Pfeile werden am Ende DEAKTIVIERT, nicht ausgeblendet: kein Sprung im Layout.
   ============================================================================= */
.fzx-rail{position:relative;max-width:var(--page-max,1280px);margin:0 auto}
.fleet-grid{display:flex;gap:var(--fz-gap,24px);overflow-x:auto;scroll-snap-type:x mandatory;
  scroll-behavior:smooth;-webkit-overflow-scrolling:touch;align-items:stretch;
  padding:4px 0 20px;scrollbar-width:none;max-width:none}
.fleet-grid::-webkit-scrollbar{display:none}
/* 3,25 Karten sichtbar — die vierte lugt herein */
.fleet-grid>*{flex:0 0 calc((100% - 2*var(--fz-gap,24px)) / 3.25);scroll-snap-align:start;height:auto}

/* Pfeile seitlich auf Bildhoehe (Rene 15.08.: fuer Maus-Nutzer dort, wo die
   Autos sind — der Pager unten war fuer die Maus zu weit weg). --fz-arr-y setzt
   fz-slider.js = vertikale Bildmitte der ersten Karte. */
.fz-arrows{position:absolute;inset:0;pointer-events:none;z-index:3}
.fz-arrows .fz-btn{position:absolute;top:var(--fz-arr-y,120px);transform:translateY(-50%);pointer-events:auto;
  background:rgba(10,11,13,.72);box-shadow:0 2px 14px rgba(0,0,0,.35)}
.fz-btn-prev{left:12px}
.fz-btn-next{right:12px}

/* Steuerung: Fortschritt + Zaehler unten (Pfeile sind jetzt oben an den Autos) */
.fz-ctrl{display:flex;align-items:center;gap:16px}
.fz-btn{width:44px;height:44px;flex:0 0 44px;display:inline-flex;align-items:center;justify-content:center;
  background:transparent;border:1px solid var(--bo2,rgba(255,255,255,.18));color:var(--tx,#EDF1F5);
  cursor:pointer;transition:border-color .25s,color .25s,opacity .25s}
.fz-btn:hover:not(:disabled){border-color:var(--grn,#c9a86a);color:var(--grn,#c9a86a)}
.fz-btn:focus-visible{outline:2px solid var(--grn,#c9a86a);outline-offset:3px}
.fz-btn:disabled{opacity:.3;cursor:default}
.fz-btn svg{width:16px;height:16px}
/* Fortschritt statt Punkte: bei 6 Karten und 3,25 sichtbaren waeren Punkte
   irrefuehrend — eine Leiste zeigt ehrlich, wie weit man ist. */
.fz-prog{position:relative;flex:1;height:1px;background:var(--bo,rgba(255,255,255,.13));min-width:80px}
.fz-prog span{position:absolute;left:0;top:-1px;height:3px;background:var(--grn,#c9a86a);
  width:30%;transition:width .2s linear,transform .2s linear}
.fz-count{font-family:var(--fh,'Plus Jakarta Sans',sans-serif);font-size:12px;font-weight:600;
  letter-spacing:.04em;color:var(--tx3,rgba(237,241,245,.62));white-space:nowrap}

@media(prefers-reduced-motion:reduce){.fleet-grid{scroll-behavior:auto}.fz-prog span{transition:none}}
@media(max-width:1100px){.fleet-grid>*{flex-basis:calc((100% - var(--fz-gap,24px)) / 2.25)}}
@media(max-width:768px){
  .fleet-grid{gap:20px;padding:4px var(--edge,20px) 18px;scroll-padding-left:var(--edge,20px)}
  .fleet-grid>*{flex-basis:82%;max-width:320px}
  .fz-ctrl{display:none} /* auf Touch wird gewischt, Pfeile sind dort Ballast */
  .fz-arrows{display:none}
}