/* ==========================================================================
   Bildgalerie - Hauptbild mit Vorschaubildern darunter
   Kundenwunsch vom 02.09.2026, Folie 5 ("Moodbild auf Produktdetailseite,
   geht auch Slider?"), entschieden am 04.09.2026: ja, als Slider mit kleinen
   Vorschaubildern unter dem Hauptbild.

   EIGENE KOMPONENTE, nicht in pages/produkt.css: dieselbe Galerie gehoert
   spaeter auf die Rezeptseiten (Schrittfotos) und in die Historie.

   OHNE JAVASCRIPT BEDIENBAR, und das ist hier keine Pflichtuebung: die Bahn
   ist ein waagerechter Scrollbereich mit scroll-snap, also mit Wischen und
   Ziehen bedienbar, und die Vorschaubilder sind ANKER auf die Bilder. Ein
   Klick springt auch ohne Skript zum richtigen Bild - der Browser scrollt den
   Container, nicht die Seite. js/galerie.js fangt den Klick nur ab, um die
   Adresszeile sauber zu halten und sanft zu scrollen.

   OVERFLOW AUF BEIDEN ACHSEN. overflow-x allein macht die y-Achse implizit
   ebenfalls scrollbar, und dann faengt die Bahn das Mausrad der Seite ein -
   man scrollt an ihr fest. Derselbe Fehler wie in der Filterleiste.
   ========================================================================== */
/* DIE GALERIE IST AN DIE FENSTERHOEHE GEKOPPELT, damit Hauptbild UND
   Vorschaubilder im ersten Bildschirm stehen - Wunsch vom 04.09.2026.
   Gemessen ohne diese Deckelung: bei 1440 x 900 passte es (Ende bei 839 px),
   bei 1440 x 800 ragte die Galerie 39 px hinaus, bei 1280 x 720 sogar 89 px.
   Und ein Slider, dessen Vorschaubilder man erst durch Scrollen findet, ist
   keiner.

   GEDECKELT WIRD DIE BREITE, NICHT DIE HOEHE. Eine max-height zusammen mit
   aspect-ratio bricht das Seitenverhaeltnis: die Hoehe wird gekappt, die
   Breite bleibt bei 100 %, und aus 4:3 wird ein immer flacherer Streifen, in
   dem cover das Moodbild beschneidet. Ueber die Breite bleibt 4:3 exakt und
   die Hoehe folgt.

   24rem = 384 px sind der gemessene Platzbedarf um die Buehne herum: 104 px
   Kopfleiste, 132 px Polster des Produktkopfes, 24 px Abstand zu den
   Vorschaubildern, 78 px Vorschaubilder und 46 px Luft nach unten.
   svh statt vh, damit auf dem Telefon die Adressleiste nicht mitrechnet; die
   vh-Zeile darueber ist der Rueckfall fuer aeltere Browser.
   min(100%, ...): auf hohen Schirmen gewinnt die Spaltenbreite, auf flachen
   die Fensterhoehe. */
.galerie {
  display: grid;
  gap: var(--sp-3);
  max-width: min(100%, calc((100vh - 24rem) * 4 / 3));
  max-width: min(100%, calc((100svh - 24rem) * 4 / 3));
}

.galerie__bahn {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  border-radius: var(--r-card);
  /* Die Bahn ist mit der Tastatur erreichbar, also braucht sie einen
     sichtbaren Fokus - sie ist ein Scrollbereich und damit ein Bedienelement. */
  outline-offset: 3px;
  /* Rollbalken ausblenden, ohne die Bedienung zu nehmen: gewischt und mit den
     Vorschaubildern gesprungen wird weiter, und der Fokusring bleibt. */
  scrollbar-width: none;
}
.galerie__bahn::-webkit-scrollbar { display: none; }

/* QUERFORMAT 4:3, und das ist eine Entscheidung ueber den ersten Bildschirm.
   Erst stand hier ein Quadrat als Kompromiss zwischen hochkantem Packshot
   (1086 x 1448) und querliegenden Moodbildern (900 x 675). Bei 667 px Spalte
   wurde die Buehne damit 667 px hoch, und mit den Vorschaubildern darunter
   reichte der Baustein unter die Bildschirmkante - man musste scrollen, um
   ueberhaupt zu sehen, dass es Vorschaubilder gibt. Ein Slider, dessen
   Bedienung man nicht sieht, ist kein Slider.
   4:3 IST DAS MASS DER MOODBILDER, sie liegen also unbeschnitten da. Der
   Preis ist der Packshot: hochkant in einer querformatigen Buehne steht die
   Flasche 500 px hoch und 375 px breit, links und rechts bleibt Weiss. Das
   ist hinnehmbar, weil er freigestellt ist und ohnehin auf weissem Grund
   steht - und weil das Moodbild das Hauptbild ist, nicht der Packshot.
   Der Packshot wird eingepasst (contain), die Moodbilder fuellen (cover).
   Deshalb zwei Varianten und nicht eine Regel fuer alle. */
.galerie__bild {
  margin: 0;
  scroll-snap-align: center;
  aspect-ratio: 4 / 3;
  background: var(--surface);
  overflow: hidden;
}
.galerie__bild img { width: 100%; height: 100%; display: block; }
.galerie__bild--pack img { object-fit: contain; }
.galerie__bild--mood img { object-fit: cover; }

/* --- Vorschaubilder ----------------------------------------------------- */
/* Drei bis vier Bilder, gleich breit. KEINE feste Anzahl: der Kunde legt im
   Theme an, wie viele Bilder ein Produkt hat.
   Die Trefferflaeche ist 4:3 bei mindestens 3,5rem Hoehe, also 56 px - unter
   der 44-px-Schwelle aus WCAG 2.5.5 liegt sie damit nicht. */
/* KLEIN UND LINKS, nicht auf die ganze Breite gezogen. Vorher trugen drei
   Vorschaubilder je ein Drittel der Spalte, also 214 x 161 px - das sind
   keine Vorschaubilder mehr, sondern eine zweite Bilderreihe, und sie kostete
   161 px im ersten Bildschirm. Jetzt 6,5rem breit, also 104 x 78 px.
   Feste Breite statt 1fr, damit vier oder fuenf Bilder die Groesse nicht
   veraendern - im Theme legt der Kunde an, wie viele ein Produkt hat. */
.galerie__mini {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 6.5rem;
  justify-content: start;
  gap: var(--sp-2);
}
.galerie__minilink {
  display: block;
  aspect-ratio: 4 / 3;
  /* 78 px hoch bei 104 px Breite - ueber der 44-px-Schwelle aus WCAG 2.5.5,
     und die gilt fuer die Trefferflaeche, nicht fuer das Bild. */
  min-height: 2.75rem;
  overflow: hidden;
  border-radius: var(--r-sm);
  /* Der Rahmen liegt IMMER da, nur durchsichtig - sonst springt das Bild um
     2 px, sobald es das aktuelle wird. */
  border: 2px solid transparent;
  background: var(--surface);
  transition: border-color var(--dur-hover) var(--ease-hover),
              opacity var(--dur-hover) var(--ease-hover);
  opacity: 0.7;
}
.galerie__minilink img {
  width: 100%; height: 100%;
  display: block;
  object-fit: cover;
}
/* Der Packshot als Vorschaubild wird eingepasst, nicht gefuellt: sonst waere
   im Quadrat nur der Flaschenhals zu sehen. */
.galerie__minilink--pack img { object-fit: contain; }

.galerie__minilink:hover,
.galerie__minilink:focus-visible { opacity: 1; }

/* DAS AKTUELLE BILD TRAEGT aria-current, NICHT EINE KLASSE. Damit koennen
   Optik und Auszeichnung nicht auseinanderlaufen, und ein Screenreader nennt
   das aktuelle Bild von allein - dieselbe Entscheidung wie bei aria-pressed
   in der Filterleiste.
   Gold als KANTE, nicht als Schrift: als Schrift auf Weiss haelt das Gold nur
   2,00:1, fuer Rahmen und Flaechen gilt die Schwelle nicht. */
.galerie__minilink[aria-current="true"] {
  border-color: var(--toem-gold);
  opacity: 1;
}

/* Auf dem Telefon ist die Spalte schmaler als vier Vorschaubilder breit.
   Dann umbrechen statt schrumpfen - unter 44 px waere die Trefferflaeche zu
   klein, und das ist keine Groesse, die man weiter verhandeln kann. */
@media (max-width: 30rem) {
  .galerie__mini {
    grid-auto-flow: row;
    grid-auto-columns: auto;
    grid-template-columns: repeat(auto-fill, minmax(4.5rem, 5.5rem));
  }
}

/* ==========================================================================
   Variante --breit: 16:9 und mit Video
   Kundenwunsch vom 04.09.2026: auf den Blogbeitraegen sollen Bilder UND
   Videos einbindbar sein, als Slider am Anfang des Artikels.

   WARUM DIESELBE KOMPONENTE und kein zweiter Slider: die Galerie der
   Produktseiten kann schon alles, was hier gebraucht wird - Buehne mit
   scroll-snap, Vorschaubilder als Anker, Bedienung ohne Javascript,
   aria-current, Pfeiltasten. Ein zweites Bauteil waere dieselbe Mechanik in
   zweiter Fassung, und die eine wuerde vergessen, wenn die andere sich
   aendert.

   16:9 STATT 4:3, weil ein Video im Spiel ist: das vorhandene Material ist
   1920 x 1081, also 16:9. In einer 4:3-Buehne stuende es mit schwarzen
   Balken oder beschnitten. Die Bilder tragen den Zuschnitt leichter als das
   Video - ein Moodbild darf beschnitten sein, ein Video nicht.
   ========================================================================== */
.galerie--breit .galerie__bild { aspect-ratio: 16 / 9; }

/* Das Video fuellt die Buehne wie ein Bild. KEIN autoplay, KEIN muted-loop
   wie in der Hero: dort ist das Video Kulisse, hier ist es Inhalt. Wer es
   sehen will, startet es - deshalb controls im Markup.
   object-fit: contain, nicht cover: bei einem Video ist der Ausschnitt nicht
   verhandelbar, es gibt keinen unwichtigen Rand. Der schwarze Grund macht
   die Balken zur Absicht statt zum Fehler. */
.galerie__bild--video { background: var(--c-schwarz); }
.galerie__bild--video video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* Das Vorschaubild eines Videos traegt das Posterbild plus ein Abspielzeichen -
   sonst sieht es aus wie ein weiteres Foto, und niemand findet das Video.
   Als Pseudoelement, damit im Markup kein zweites Zeichen gepflegt werden
   muss: ein Dreieck aus Rahmen, weiss auf halbdurchsichtigem Schwarz. */
.galerie__minilink--video { position: relative; }
.galerie__minilink--video::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  background: rgba(12, 36, 62, 0.72);
  /* Das Dreieck sitzt im Kreis, leicht nach rechts versetzt - optisch mittig,
     nicht geometrisch. Ein geometrisch zentriertes Dreieck wirkt links. */
  box-shadow: inset -0.28rem 0 0 -0.15rem var(--on-blau-1),
              inset -0.28rem 0 0 -0.15rem var(--on-blau-1);
  clip-path: none;
}
/* Das eigentliche Dreieck. Zwei Pseudoelemente waeren noetig, deshalb hier
   ein Rahmentrick am ::before: ein Element ohne Inhalt, dessen linker Rahmen
   weiss und dessen obere und untere Raender durchsichtig sind. */
.galerie__minilink--video::before {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 0;
  height: 0;
  z-index: 1;
  border-style: solid;
  border-width: 0.34rem 0 0.34rem 0.55rem;
  border-color: transparent transparent transparent var(--on-blau-1);
  /* Optischer Ausgleich: das Dreieck wirkt sonst nach links geschoben. */
  translate: 0.09rem 0;
}