/* Format-Cross-Link-Modul ("Dein Format steht schon fest?") -- dynamisch aus
   site-taxonomy.json generiert (scripts/crosslink-formats.py), bis zu 10
   Karten statt der urspruenglich 1-7 fest verdrahteten. Das Original-Grid
   setzt seine Spalten/Zeilen ueber Elementors --e-con-grid-template-columns/
   -rows als Inline-Style auf dem ALTEN Container -- der beim Rebuild verloren
   geht (undefined var() -> Zeilen kollabieren, Karten ueberlappen). Deshalb
   hier explizit und robust neu gesetzt. */
.sfx-format-grid {
  --e-con-grid-template-columns: repeat(auto-fill, minmax(15.5rem, 1fr)) !important;
  --e-con-grid-template-rows: none !important;
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(15.5rem, 1fr)) !important;
  grid-template-rows: none !important;
  grid-auto-flow: row !important;
  row-gap: 2.4rem !important;
  column-gap: 1.5rem !important;
  align-items: start !important;
}
.sfx-format-grid .sfx-format-card {
  position: relative !important;
  inset: auto !important;
  width: auto !important;
  height: auto !important;
  grid-column: auto !important;
  grid-row: auto !important;
  display: flex !important;
  flex-direction: column !important;
}

/* Einheitliche Kartengroesse: die alten Elementor-Spalten liessen jede Karte
   auf die tatsaechliche Bildhoehe + Textlaenge schrumpfen/wachsen (Karten von
   281px bis 588px Hoehe gemessen) -- jetzt fixes Bild-Seitenverhaeltnis +
   Text auf feste Zeilenzahl geklemmt, damit jede Karte exakt gleich hoch ist,
   unabhaengig von der Laenge des jeweiligen one_liner. */
.sfx-format-card .elementor-widget-image {
  border-radius: .85rem;
  overflow: hidden;
  background: #14161c;
}
.sfx-format-card .elementor-widget-image a {
  display: block;
  aspect-ratio: 4 / 3;
}
.sfx-format-card img.attachment-medium_large {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  filter: saturate(80%) brightness(.8);
  transition: transform 400ms ease, filter 400ms ease;
}
.sfx-format-card:hover img.attachment-medium_large {
  filter: saturate(100%) brightness(1);
  transform: scale(1.045);
}
.sfx-format-card .elementor-heading-title {
  margin: 1rem 0 .5rem !important;
  font-size: 1.05rem !important;
  line-height: 1.3 !important;
}
.sfx-format-card .elementor-heading-title a { color: #fff; text-decoration: none; }
.sfx-format-card .elementor-icon-list-items { margin-top: auto; }
.sfx-format-card .elementor-icon-list-item { align-items: flex-start !important; }
.sfx-format-card .elementor-icon-list-icon { margin-top: .3em; flex-shrink: 0; }
.sfx-format-card .elementor-icon-list-text {
  display: -webkit-box !important;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  height: 3.9em;
  line-height: 1.3em;
  font-size: .92rem !important;
  color: rgba(255, 255, 255, .68);
}

/* Hover-Kontur: Das Theme legt den Salmon-Ring als box-shadow direkt auf das
   <img>. Das Bild ist aber eckig (radius 0) und sitzt in einem abgerundeten
   Wrapper mit overflow:hidden -- der Ring wurde deshalb an den Ecken
   weggeschnitten und lag oben/unten anders an als seitlich, zusaetzlich
   verschoben durch das scale(1.045) beim Hover. (User-Hinweis: "die kontur ist
   nicht mehr sauber ... nicht oben anders angeschnitten als seitlich".)
   Der Ring wandert deshalb auf den Wrapper: gleicher Radius, nichts clippt ihn,
   und er bleibt beim Zoomen des Bildes ruhig stehen. */
.sfx-format-card img.attachment-medium_large { box-shadow: none !important; }
.sfx-format-card .elementor-widget-image {
  box-shadow: 0 0 0 0 rgba(255, 133, 133, 0);
  transition: box-shadow 260ms ease;
}
.sfx-format-card:hover .elementor-widget-image {
  box-shadow: 0 0 0 2px #FF8585;
}