/* -----------------------------------------------------------------------------
   fa-anwendungsbilder.css – Anwendungsbilder-Galerie und KI-Kennzeichnung
   FA 2026-11-08 shop-anwendungsbilder (EU-KI-Verordnung Art. 50)

   Eingebunden aus module/includes/fa_morepics.html (nur wenn eine Galerie da
   ist) und für das Hauptbild aus den Produkt-Templates. Nur Brand-Tokens aus
   brand-tokens.css, kein Inline-CSS.
   Kontrast: --fg auf --bg 15,96:1, --mut auf --bg 6,10:1, --mut auf --surf 5,6:1.
   ----------------------------------------------------------------------------- */

/* Heckscheiben-Templates: Galerie wie bei .fn-preview (fa-norm.css), sonst
   greift die alte Regel ".morepics img {width:18%; float:left}" aus stylesheet.css */
.heck-preview .morepics {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
  float: none;
  text-align: left;
}

.heck-preview .morepics a {
  display: block;
  position: relative;
}

.heck-preview .morepics img {
  float: none;
  display: block;
  width: 72px;
  height: 72px;
  padding: 0;
  object-fit: cover;
  border: 1px solid var(--line);
  border-radius: 4px;
}

.heck-preview .morepics a:hover img,
.heck-preview .morepics a:focus-visible img {
  border-color: var(--acc);
}

/* Marke "KI" am Vorschaubild */
.morepics a.fa-ki-bild {
  position: relative;
  display: inline-block;
}

.fa-ki-hinweis {
  display: inline-block;
  font-family: var(--mono);
  font-weight: 500;
  font-size: 11px;
  line-height: 1.4;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--fg);
  background: var(--bg);
  border: 1px solid var(--line-2);
  border-radius: var(--r-pill);
  padding: 0 4px 0 6px; /* rechts kleiner: letter-spacing haengt hinten an */
  white-space: nowrap;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

.morepics a.fa-ki-bild .fa-ki-hinweis {
  position: absolute;
  left: 4px;
  bottom: 4px;
  pointer-events: none;
}

/* Hinweis unter der Galerie */
.fa-ki-legende {
  margin: 8px 0 0;
  font-family: var(--body);
  font-size: 14px;
  line-height: 1.5;
  color: var(--mut);
  text-align: left;
}

.fa-ki-legende .fa-ki-hinweis {
  margin-right: 4px;
  vertical-align: 1px;
}

/* Hauptbild ist KI-generiert (empfohlene Lochfolien-Variante) */
.fa-ki-bildrahmen {
  position: relative;
  display: inline-block;
  max-width: 100%;
}

/* das Bild bekommt durch den Rahmen eine eigene Ebene: Kategorie-Badge
   der Heckscheiben-Seite ("Inkl. Gestaltung") darüber halten */
.heck-preview__wrap .heck-preview__badge {
  z-index: 2;
}

.fa-ki-hinweis--haupt {
  position: absolute;
  left: 8px;
  bottom: 8px;
  max-width: calc(100% - 16px);
  white-space: normal;
  text-align: left;
  /* längerer Text: Body statt Label-Versalien, bleibt auch mobil einzeilig */
  font-family: var(--body);
  font-size: 12px;
  letter-spacing: 0;
  text-transform: none;
  padding: 1px 8px;
  pointer-events: none;
  box-shadow: var(--sh-1);
}

/* Klebebuchstaben: eigene Galerie unter dem Editor (die alte Bildspalte ist
   auf Desktop und Handy ausgeblendet) */
.fa-anwendungsgalerie {
  margin: 32px 0 24px;
}

.fa-anwendungsgalerie__titel {
  font-family: var(--display);
  font-weight: 600;
  font-size: 24px;
  line-height: 1.3;
  color: var(--fg);
  margin: 0 0 16px;
}

.fa-anwendungsgalerie .morepics {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  float: none;
  text-align: left;
}

.fa-anwendungsgalerie .morepics a {
  position: relative;
  display: block;
  width: 200px;
  max-width: calc(50% - 8px);
}

.fa-anwendungsgalerie .morepics img {
  float: none;
  padding: 0;
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border: 1px solid var(--line);
  border-radius: var(--r);
}

.fa-anwendungsgalerie .morepics a:hover img,
.fa-anwendungsgalerie .morepics a:focus-visible img {
  border-color: var(--acc);
}

.fa-anwendungsgalerie .morepics a.fa-ki-bild .fa-ki-hinweis {
  left: 8px;
  bottom: 8px;
}

@media (max-width: 420px) {
  .fa-anwendungsgalerie .morepics { gap: 8px; }
  .fa-anwendungsgalerie .morepics a { max-width: calc(50% - 4px); }
}

/* Produktkarten (Kategorie, Suche, Cross-Selling): Hauptbild ist KI.
   Gesetzt aus product_listing_include.html, fa_koord_lokal_cards.html und
   cross_selling.html über den Modifier fa_ki_bild (gleiche XMP-Erkennung). */
a.fa-ki-karte {
  position: relative;
  display: block;
  width: -moz-fit-content;
  width: fit-content;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
}

a.fa-ki-karte .fa-ki-hinweis {
  position: absolute;
  left: 8px;
  bottom: 8px;
  pointer-events: none;
}