/**
 * idf-bild-cell.css - Listen-Bild-Zelle (Thumbnail-Spalte) fuer Grid-Listen
 *
 * Extrahiert aus 8 wortgleichen Modul-Kopien (Audit H4/#198, L-D12):
 * werkzeuge/zubehoer/verbrauchsmaterial/akteure/unternehmen/safeguard (2x)
 * als 52x52-Basis, facility (Gebaeude-Liste) als 40x40-Variante `.is-40`.
 * Die Klassen sind live: alle 8 Konsumenten rendern sie (Umstellung im
 * selben Stand, L-D12) - offen in #123 ist nur noch die Extraktion eines
 * gemeinsamen JS-Renderers (das Markup baut jedes Modul lokal, z.B.
 * bildCellHTML in safeguard). Alle Werte hier sind 1:1 die vorher lokal
 * gerenderten Werte (SSOT: Audit-Scout-Report L4/bildCell).
 *
 * Markup (Body-Zelle = direkte Grid-Cell, vgl. werkzeuge-list.js):
 *   <div class="idf-cell-bild">
 *     <img class="idf-cell-bild-img" src="..." alt="" loading="lazy">
 *     ODER
 *     <span class="idf-cell-bild-empty" aria-hidden="true"></span>
 *   </div>
 * Head-Zelle traegt `idf-cell-bild-head` (Module setzen dort zusaetzlich
 * `.idf-list-cell-action` - dessen `overflow: visible !important` gewinnt
 * dann ueber das overflow:hidden hier; die Head-Zelle ist leer, nur
 * title-Attribut, dadurch heute wie kuenftig ohne sichtbaren Unterschied).
 *
 * ACHTUNG: Die BODY-Zelle `.idf-cell-bild` NICHT mit `.idf-list-cell-action`
 * kombinieren - deren `overflow: visible !important` wuerde das noetige
 * Clipping (overflow: hidden) aushebeln.
 *
 * Spaltenbreite setzt weiterhin das Modul-Grid (52px Basis, facility 56px).
 * Ladeweg: idf-page-styles.php, Flag $useListEngine || $useListGrid
 * (gleiche Bedingung wie idf-list-grid.css).
 *
 * Audit L5/#201 (L-E8): Phantom-Tokens --surface-2/--text-muted (nirgends
 * definiert, es renderten immer die Fallbacks) zu den Ist-Werten
 * #f2f2f2/#aaa aufgeloest - render-identisch, keine neuen Farbwerte.
 */

/* === Basis: 52x52-Quadrat ==========================================
   Bild deckt die gesamte Cell ab (object-fit: cover haelt das Seiten-
   verhaeltnis und schneidet ggf. an den Seiten). Body-Cell-Default-
   Padding (12px aus idf-list-grid) wird auf 0 gesetzt + overflow:hidden
   fuer sauberen Rand. Empty-Variante bleibt eine leere BG-Flaeche -
   KEIN Placeholder-Icon, weil die Liste sonst optisch zerklueftet wirkt.
   Selektor grid-agnostisch ueber `.idf-list-grid` (tragen alle
   Modul-Grids zusaetzlich zu ihrer eigenen Grid-Klasse). */
.idf-list-rows .idf-list-row .idf-list-grid > .idf-cell-bild,
.idf-list-thead .idf-list-grid > .idf-cell-bild-head {
  padding: 0;
  overflow: hidden;
  justify-content: center;
}

/* Hartes 52x52-Quadrat. `width:100% + height:100%` hat hochformatige
   Bilder (z.B. 50x200) per intrinsischer Hoehe die Row auseinander-
   gedrueckt - die Cell hatte zwar `overflow: hidden`, aber das
   Grid-Item-`align-items: stretch` liess die ganze Row mitwachsen.
   Fixed 52x52 + `object-fit: cover` schneidet das Bild im Quadrat.
   (Herleitung aus werkzeuge.css, dort seit dem Row-Aufdrueck-Bug.) */
.idf-cell-bild-img {
  width: 52px;
  height: 52px;
  max-width: 52px;
  max-height: 52px;
  object-fit: cover;
  display: block;
}
.idf-cell-bild-empty {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--bg, #fafafa);
}

/* === Variante `.is-40`: 40x40 mit Radius + Icon-Empty (facility) ====
   Facility-Gebaeude-Liste: kleineres, gerundetes Thumbnail auf grauer
   Kachel, Empty-Zustand als Icon-Kachel (Icon liefert der Renderer,
   z.B. `fa-regular fa-building`). Abweichend von der Basis behaelt die
   Zelle das Cell-Default-Padding (12px) und das Bild sitzt als Kachel
   IN der Zelle statt sie zu fuellen. Werte 1:1 aus facility.css. */
.idf-list-rows .idf-list-row .idf-list-grid > .idf-cell-bild.is-40 {
  /* Basis-Regel oben setzt padding:0 - hier den idf-list-grid-
     Zell-Default (12px) wiederherstellen, wie ihn facility heute hat. */
  padding: 12px;
}
.idf-cell-bild.is-40 .idf-cell-bild-img {
  width: 40px;
  height: 40px;
  /* Basis-Deckel (52px) neutralisieren - facility hat keine max-Limits;
     bei 40px-Geometrie ohne visuelle Wirkung, nur defensiv. */
  max-width: none;
  max-height: none;
  object-fit: cover;
  /* facility.css: literal 6px = Token-Wert --radius-md. */
  border-radius: var(--radius-md, 6px);
  /* kein Token-Aequivalent; Phantom --surface-2 aufgeloest, der Wert
     #f2f2f2 renderte schon immer (1:1 aus facility.css) - Audit L5/#201. */
  background: #f2f2f2;
}
.idf-cell-bild.is-40 .idf-cell-bild-empty {
  display: flex;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md, 6px);
  background: #f2f2f2; /* kein Token-Aequivalent; Phantom --surface-2 aufgeloest, Audit L5/#201 */
  align-items: center;
  justify-content: center;
  color: #aaa; /* kein Token-Aequivalent; Phantom --text-muted aufgeloest, Audit L5/#201 */
}