/**
 * Nicht-destruktiver Bildausschnitt für Listing-Thumbnails.
 *
 * Das Backend liefert am <img> nur `data-th-focus="x y w h"` (normalisierter
 * Quell-Rahmen, je 0..1). Die Zahlen darin werden von thumbnail-focus.js in
 * CSS-Variablen übersetzt; welche Variablen wirken, entscheidet die
 * @supports-Weiche hier.
 *
 * Zwei Pfade, weil `object-view-box` Stand 2026 nur in Chromium existiert
 * (Chrome/Edge ab 104) — Safari und Firefox unterstützen es nicht. Auf iOS
 * laufen ALLE Browser über den Fallback, er ist also der Hauptpfad, nicht die
 * Ausnahme.
 *
 * Alle Properties mit !important, weil Template-CSS im Template Manager
 * durchgängig !important verwendet (siehe create-tm-template-Konvention).
 */

/* Fallback-Pfad: eine einzige transform-Deklaration übernimmt Zoom UND
   Verschiebung gemeinsam. Bewusst NICHT object-position + separates
   transform:scale() — object-position wirkt in einer eigenen Rendering-Stufe
   VOR transform und wird von einem nachgeschalteten scale() um die Boxmitte
   verzerrt; das führte bei jedem Zoom ≠ 1 zu falscher Positionierung (siehe
   thumbnail-focus.js für die Herleitung). object-position bleibt deshalb auf
   dem CSS-Standard 50% 50%, der Wert kommt aus thumbnail-focus.js, das dafür
   die tatsächliche Boxgröße und die natürliche Bildgröße misst. */
img[data-th-focus] {
  object-fit: cover !important;
  object-position: 50% 50% !important;
  transform: var(--th-transform, none) !important;
  transform-origin: 50% 50% !important;
}

/* Chromium-Pfad: object-view-box beschreibt den Ausschnitt direkt.
   Kein Messen nötig, kein Überstehen, deshalb werden die Fallback-Properties
   hier wieder zurückgesetzt. */
@supports (object-view-box: inset(0px)) {
  img[data-th-focus] {
    object-view-box: var(--th-vb, none) !important;
    object-position: 50% 50% !important;
    transform: none !important;
  }
}