/* ============================================================
   Nyx, 27.07.2026 — (1) NO_LCP-Versuch  (2) VERZERRUNGS-FIX
   ============================================================

   ---- (2) VERZERRTE BILDER — MEIN FEHLER, 27.07. 16:55 ----
   URSACHE: Mein thumbnail.html.twig (26.07.) setzt width/height in
   ECHTEN PIXELN, damit der Browser Platz reserviert (gegen CLS).
   ABER: Wo das CSS nur die Breite vorgibt (z. B. .header-logo-main-img
   {width:100%;max-width:160px}) und KEIN height:auto dazu kommt,
   nimmt der Browser meine feste Pixel-Hoehe woertlich -> das Bild
   wird GESTAUCHT/VERZERRT.
   Damit habe ich meine eigene Regel gerissen:
   "width/height nie ohne garantiertes height:auto".

   FIX: height:auto fuer Bilder, die eine CSS-Breite haben.
   Der CLS-Schutz bleibt erhalten: Browser kennt weiterhin
   width+height-Attribute und errechnet daraus das Seitenverhaeltnis
   (aspect-ratio) -> Platz wird reserviert, aber proportional.
   Genau so ist es vom Standard vorgesehen.
   ROLLBACK: diese Datei loeschen.
   ------------------------------------------------------------ */

/* Kopf-Logo: CSS gibt width vor -> Hoehe MUSS mitwachsen */
.header-logo-main-img,
.header-logo-picture img,
picture.header-logo-picture > img {
  height: auto;
}

/* Alle Bilder, die per CSS auf 100 % Breite laufen (img-fluid u. a.):
   Bootstrap setzt bereits height:auto, aber TcinnCustomizing
   ueberschreibt das teils -> hier absichern. */
img.img-fluid,
img.cms-image,
.product-image-wrapper img,
.product-image-link img {
  height: auto;
}

/* ---- (1) NO_LCP-Versuch (Logo-Ausblenden beim Scrollen) ----
   Custom-JS setzt .hide-logo, Custom-CSS blendet per opacity:0 aus.
   Chrome verwirft opacity:0-Elemente als LCP-Kandidat (Issue #14880).
   opacity 0 -> 0.001 = optisch identisch unsichtbar (max-height:0 +
   overflow:hidden klappen es ohnehin zu), aber Kandidat bleibt.
   HINWEIS: hat NO_LCP bei Google NICHT geloest (Timing-Symptom),
   bleibt als harmlose Absicherung drin.
   Hoehere Spezifitaet noetig, weil das Custom-CSS inline bei 6,8 %
   Dokumenttiefe steht, diese Datei aber bei 0,1 % geladen wird. */
@media (max-width: 950px) {
  header.header-main .header-row .header-logo-col.hide-logo,
  header .header-logo-col.hide-logo,
  .header-logo-col.hide-logo {
    opacity: 0.001;
  }
}

/* ---- NACHTRAG 17:00: object-fit:fill = STAUCHEN ----
   Gemessen: fleckenjaeger 800x800 wurde als 350x800 gerendert
   (56 % Abweichung) — Bild quadratisch, Box schmal, fill quetscht.
   Ursache: meine width/height-Attribute + CSS ohne height:auto.
   Der obige height:auto-Block greift NICHT, wo das Bild eine
   explizite CSS-Hoehe hat. Deshalb hier zusaetzlich:
   Bilder NIE mit fill verzerren -> contain (zeigt ganzes Motiv,
   behaelt Proportion). 'cover' bleibt unangetastet (schneidet
   absichtlich zu, verzerrt aber nicht). */
img[width][height] {
  object-fit: contain;
}
img[data-object-fit="cover"],
img.cms-image[data-object-fit="cover"],
.cms-block-background img,
.pc-problem-card__image {
  object-fit: cover;
}