/* ===========================================================================
   produktbilder.css — Benker WP-Theme
   HANDGESCHRIEBEN. Wird NACH components.css geladen.

   PROJEKTREGEL FÜR PRODUKTBILDER

   Stimmungsbilder fuellen ihre Flaeche (object-fit: cover). Das ist dort
   richtig: Ein Hintergrundmotiv darf beschnitten werden, es traegt Atmosphaere,
   keine Information.

   PRODUKTBILDER werden NIE beschnitten (object-fit: contain). Bei einem
   Produktfoto ist der Rand die Information: Wo das Tray aufhoert, sieht man die
   Form. Ein angeschnittenes Produkt wirkt wie ein Fehler, nicht wie ein
   Bildausschnitt. Figma bestaetigt das (Node 392:4859 nutzt object-contain).

   BILDRAHMEN 3:2 (Stand 22.07.2026, Figma 392:4859)
   Der Rahmen war zuvor 320x280 und damit nahezu quadratisch, waehrend alle
   Produktfotos liegende Formate sind. Beides zusammen ergab entweder Beschnitt
   oder breite Leerstreifen. Der Rahmen ist jetzt 320x213, also 3:2, und passt
   damit zum Bildmaterial.

   Was diese Regel dauerhaft loest:
   - Nichts wird je beschnitten, egal welches Seitenverhaeltnis ein spaeter
     hochgeladenes Foto hat.
   - Weicht ein Foto vom 3:2-Rahmen ab, entsteht ein ruhiger heller Streifen
     statt eines angeschnittenen Produkts. Das sieht nach Absicht aus, nicht
     nach Fehler.

   BEWUSST OHNE Innenabstand und ohne Rahmenlinie: Die Fotos bringen ihren
   eigenen Hintergrund mit. Ein zusaetzlicher Rand wuerde sie verkleinern und
   einen sichtbaren Ring erzeugen, den das Design nicht vorsieht. Die
   Hintergrundfarbe bleibt als Auffangfarbe fuer abweichende Seitenverhaeltnisse.
   =========================================================================== */

.esdslider__img {
  aspect-ratio: 320 / 213;
  object-fit: contain;
  background-color: var(--color-bg-subtle);
}

/* Figma 392:4859: 20px zwischen den Karten (zuvor 24px aus dem Astro-Build). */
.esdslider__track {
  gap: 20px;
}

/* ---------------------------------------------------------------------------
   ENDPOSITION DER GALERIE-SLIDER (10.08.2026, Korrekturen KW 32)

   Gleiche Korrektur wie beim Produkt-Karussell auf der Startseite: Die
   Rechenlogik in slider.js schiebt bis zur buendigen Endposition. Beim letzten
   Klick klebte die letzte Karte damit an der Kante — es war nicht zu erkennen,
   ob dort noch etwas kommt oder Schluss ist.

   Ein Innenpolster rechts loest das ohne Eingriff in slider.js: maxTranslate()
   rechnet Polster bereits heraus, die Endposition endet dadurch genau um dieses
   Mass frueher. Waehrend des Blaetterns bleibt der Peek-Effekt erhalten, weil
   overflow erst am Aussenrand schneidet.

   40px sind bewusst DOPPELT so viel wie der Kartenabstand (20px): Bei gleichem
   Mass haette der Rand ausgesehen wie eine Luecke, hinter der noch eine Karte
   folgt. Doppelt so viel liest sich als Rand und damit als Ende.
   --------------------------------------------------------------------------- */
.esdslider__viewport,
.galrow__viewport {
  padding-right: 40px;
}

/* ---------------------------------------------------------------------------
   BEISPIEL-HINWEIS UNTER DEN TECHNISCHEN DATEN (10.08.2026, Korrekturen KW 32)

   Bewusst leiser gesetzt als die Tabelle darueber: Es ist eine Einordnung, kein
   Datenpunkt. Gleichzeitig gross genug, um gelesen zu werden — der Hinweis ist
   der Grund, warum jemand mit einem abweichenden Mass trotzdem anfragt.

   Markup: template-parts/produkt/info-bereich.php
   --------------------------------------------------------------------------- */
.esdinfo__hinweis {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3, 12px);
  margin: var(--space-5, 24px) 0 0;
  font-size: var(--fs-body-s, 14px);
  line-height: 1.5;
  color: var(--color-text-muted, #526075);
}

.esdinfo__hinweis-icon {
  flex-shrink: 0;
  /* Optischer Ausgleich: Das Icon sitzt sonst auf der Grundlinie statt in der
     Mitte der ersten Zeile. */
  margin-top: 0.15em;
  color: var(--color-primary-700, #1c63b8);
}