/* FHB-Bildwechsel wie auf fhb.de — EINE Regel für alle FHB-Seiten: Kacheln der Herstellerwelt (_fhb-kacheln.php) und die
   Artikelkarten unter den Schaufenstern der Winterwelt (kt_fh_liste_bild_html). Daten: includes/katalog_fhb_bildpaar.php.
   Aufbau: Träger .fw-paar (nur wenn ein Paar da ist) › Fotobereich .fw-media (position: relative) › Hauptbild .fw-haupt
   + zweites Bild .fw-hover + Punkte .fw-punkte. Ohne .fw-paar bleibt alles wie ohne diese Datei.
   Verhalten (fhb-bildpaar.js): Darüberfahren am Foto blendet in 0,3 s über, Tastaturfokus zeigt das zweite Bild, auf Touch
   wechselt waagerechtes Wischen bzw. Tippen auf die zwei Punkte. */

/* Wischen wechselt das Bild nur mit Paar — in waagerecht schiebbaren Reihen (.fw-reihe) gehört das Wischen dem Scrollen,
   dort wechseln die Punkte das Bild */
.fw-paar .fw-media { touch-action: pan-y; }
.fw-reihe .fw-media { touch-action: auto; }
.fw-media .fw-hover { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; opacity: 0; transition: opacity 0.3s ease; pointer-events: none; }
@media (hover: hover) {
    /* Am Fotobereich, nicht am ganzen Träger: wer über die Farbfelder fährt, sieht die Frontansicht der Farbe */
    .fw-paar .fw-media:hover .fw-hover { opacity: 1; }
}
.fw-paar .fw-media.fw-zwei-an .fw-hover { opacity: 1; }
/* Tastatur: der fokussierte Link zeigt das zweite Bild wie beim Darüberfahren */
.fw-paar:focus-visible .fw-media .fw-hover { opacity: 1; }
.fw-punkte { display: none; position: absolute; top: 10px; right: 10px; z-index: 3; gap: 4px; }
/* Die Punkte liegen auf dem hellen Studiogrund — feste Farben, auch im Dark Mode */
.fw-punkte i { width: 18px; height: 2px; background: rgba(0, 0, 0, 0.3); }
.fw-punkte i.an { background: #000; }
@media (hover: none) { .fw-paar .fw-punkte { display: flex; } }
@media (prefers-reduced-motion: reduce) { .fw-media .fw-hover { transition: none; } }