/* ================================================================
   apart wellness — KI-Bild-Kennzeichnung (EU AI Act, Art. 50)
   ================================================================
   Zeigt automatisch einen kleinen Hinweis "KI-generiert" unten
   rechts auf jedem Bild, das mit KI (flux-2-pro) erstellt wurde.

   Funktionsweise: moderner CSS-Selektor `:has()` erkennt anhand
   des img[src]-Attributs, ob es sich um eines der bekannten
   KI-generierten Bilder handelt, und fügt automatisch ein
   ::after-Label auf dem umgebenden Container ein.
   Dadurch muss KEIN HTML auf den ~30 Seiten angepasst werden —
   neue Seiten, die dieselben Bilddateien verwenden, sind
   automatisch korrekt gekennzeichnet.

   Browser-Support: :has() wird von allen aktuellen Chrome-,
   Edge-, Safari- und Firefox-Versionen unterstützt (seit 2023/24).
   Fallback: In sehr alten Browsern erscheint einfach kein Hinweis
   (kein Layout-Bruch, da rein additiv).
================================================================ */

/* Liste der tatsächlich KI-generierten Bilddateien (flux-2-pro):
   sauna-terma90.png, sauna-vitalis-bio.png, sauna-spektrum.png,
   sauna-saphir.png, dampfbad-nebula.jpg, hottub-classic.jpg,
   hottub-nordic.jpg, icetub-polar.jpg, icetub-arctic.jpg,
   danke-sauna.jpg, sauna.jpg, sauna-infrarot.jpg, wellness.jpg,
   whirlpool-vita-pro.jpg, og-image.jpg,
   wp-sets.jpg, wp-kuebelkelle.jpg, wp-thermometer.jpg,
   wp-handtuecher.jpg, wp-peeling.jpg, wp-holzpflege.jpg,
   wp-badeoel.jpg, wp-aufguss.jpg, wp-oele.jpg,
   liefergebiet-hero-van.png (Hero-Bild "Liefergebiet", vom Nutzer
   bereitgestellt, als KI-generiert bestätigt)
   ueber-uns-hero-showroom.jpg (Hero-Bild "Über uns", Showroom-Szene
   mit Berater und Kundenpaar, vom Nutzer bereitgestellt, als
   KI-generiert bestätigt)

   AUSGENOMMEN (echte Fotos / Stock / User-Fotos — KEIN Hinweis):
   gewerbe-profi.jpg, gewerbe-profi-s.jpg, gewerbe-profi-xl.jpg,
   sauna-popup.jpg, whirlpool-aqua-indoor.png, awt-in392.png
================================================================ */

:root {
  --ai-badge-bg: rgba(15, 15, 15, 0.62);
  --ai-badge-fg: rgba(255, 255, 255, 0.92);
}

/* ── Selektor-Liste: alle Wrapper, die ein KI-Bild enthalten ── */
.dd-model-img:has(img[src*="sauna-terma90"]),
.dd-model-img:has(img[src*="sauna-vitalis-bio"]),
.dd-model-img:has(img[src*="sauna-spektrum"]),
.dd-model-img:has(img[src*="sauna-saphir"]),
.dd-model-img:has(img[src*="dampfbad-nebula"]),
.dd-model-img:has(img[src*="hottub-classic"]),
.dd-model-img:has(img[src*="hottub-nordic"]),
.dd-model-img:has(img[src*="icetub-polar"]),
.dd-model-img:has(img[src*="icetub-arctic"]),
.dd-model-img:has(img[src*="whirlpool-vita-pro"]),
.dd-model-img:has(img[src*="wp-sets"]),
.dd-model-img:has(img[src*="wp-kuebelkelle"]),
.dd-model-img:has(img[src*="wp-thermometer"]),
.dd-model-img:has(img[src*="wp-handtuecher"]),
.dd-model-img:has(img[src*="wp-peeling"]),
.dd-model-img:has(img[src*="wp-holzpflege"]),
.dd-model-img:has(img[src*="wp-badeoel"]),
.dd-model-img:has(img[src*="wp-aufguss"]),
.dd-model-img:has(img[src*="wp-oele"]),

.sdp-visual:has(img[src*="sauna-terma90"]),
.sdp-visual:has(img[src*="sauna-vitalis-bio"]),
.sdp-visual:has(img[src*="sauna-spektrum"]),
.sdp-visual:has(img[src*="sauna-saphir"]),
.sdp-visual:has(img[src*="dampfbad-nebula"]),
.sdp-visual:has(img[src*="hottub-classic"]),
.sdp-visual:has(img[src*="hottub-nordic"]),
.sdp-visual:has(img[src*="icetub-polar"]),
.sdp-visual:has(img[src*="icetub-arctic"]),
.sdp-visual:has(img[src*="whirlpool-vita-pro"]),
.sdp-visual:has(img[src*="gewerbe-profi.jpg"]),

.sov-card__img-wrap:has(img[src*="sauna-terma90"]),
.sov-card__img-wrap:has(img[src*="sauna-vitalis-bio"]),
.sov-card__img-wrap:has(img[src*="sauna-spektrum"]),
.sov-card__img-wrap:has(img[src*="sauna-saphir"]),
.sov-card__img-wrap:has(img[src*="dampfbad-nebula"]),
.sov-card__img-wrap:has(img[src*="hottub-classic"]),
.sov-card__img-wrap:has(img[src*="hottub-nordic"]),
.sov-card__img-wrap:has(img[src*="icetub-polar"]),
.sov-card__img-wrap:has(img[src*="icetub-arctic"]),
.sov-card__img-wrap:has(img[src*="whirlpool-vita-pro"]),

.pw-card:has(img[src*="sauna.jpg"]),
.pw-card:has(img[src*="dampfbad-nebula"]),
.pw-card:has(img[src*="wellness.jpg"]),

.wl-product-card:has(img[src*="wp-sets"]),
.wl-product-card:has(img[src*="wp-kuebelkelle"]),
.wl-product-card:has(img[src*="wp-thermometer"]),
.wl-product-card:has(img[src*="wp-handtuecher"]),
.wl-product-card:has(img[src*="wp-peeling"]),
.wl-product-card:has(img[src*="wp-holzpflege"]),
.wl-product-card:has(img[src*="wp-badeoel"]),
.wl-product-card:has(img[src*="wp-aufguss"]),
.wl-product-card:has(img[src*="wp-oele"]),

.popup-img-col:has(img[src*="wellness.jpg"]),

.aw-process-img-wrap:has(img[src*="dampfbad-nebula"]) {
  position: relative;
}

/* HINWEIS: .hero-slide bekommt hier bewusst KEIN position:relative mehr —
   das hat zuvor die "position:absolute; inset:0;"-Basisregel aus style.css
   überschrieben (höhere Spezifität durch :has()) und den Slide auf seine
   normale Inline-Größe zusammenschrumpfen lassen. Ergebnis: nur ein
   kleiner Streifen des Fotos war sichtbar, der Rest des Hero-Bereichs
   blieb grau/leer. Das AI-Badge für die Hero-Slideshow sitzt ohnehin
   bereits auf .hero selbst (siehe Regeln unten) und braucht daher keine
   position-Änderung an .hero-slide.

   Hero-Slideshow (index.html): der Badge sitzt NICHT auf .hero-slide selbst,
   da .hero-overlay / .water-canvas / .hero-content als GESCHWISTER mit
   höherem z-index sonst das Badge verdecken (eigener Stacking-Context von
   .hero-slides). Daher Badge direkt per :has() auf .hero (dem gemeinsamen
   Elternelement), sichtbar nur wenn der AKTIVE Slide ein KI-Bild zeigt. */
/* Detail-Hero mit <img> statt CSS-Hintergrund (z. B. liefergebiet.html):
   .detail-hero hat bereits position:relative (siehe detail.css),
   dient also direkt als Containing Block für das Badge. */
.detail-hero:has(.detail-hero-img img[src*="liefergebiet-hero-van"])::after,
.detail-hero:has(.detail-hero-img img[src*="ueber-uns-hero-showroom"])::after,

.hero:has(.hero-slide.active img[src*="sauna.jpg"])::after,
.hero:has(.hero-slide.active img[src*="dampfbad-nebula"])::after,
.hero:has(.hero-slide.active img[src*="hottub-classic"])::after,
.hero:has(.hero-slide.active img[src*="wellness.jpg"])::after {
  content: 'KI-generiertes Bild';
  display: block;
  position: absolute;
  right: 16px;
  bottom: 16px;
  z-index: 50;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--ai-badge-fg);
  background: var(--ai-badge-bg);
  padding: 3px 8px;
  border-radius: 4px;
  pointer-events: none;
  white-space: nowrap;
  font-family: var(--font-sans, 'Raleway', -apple-system, sans-serif);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

/* .wl-product-card hat von Haus aus kein position:relative —
   für das Badge zwingend nötig, da sonst gegen den Viewport
   statt gegen die Karte positioniert würde. */
.wl-product-card {
  position: relative;
}

/* ── Das eigentliche Hinweis-Label (unten rechts, klein) ── */
.dd-model-img:has(img[src*="sauna-terma90"])::after,
.dd-model-img:has(img[src*="sauna-vitalis-bio"])::after,
.dd-model-img:has(img[src*="sauna-spektrum"])::after,
.dd-model-img:has(img[src*="sauna-saphir"])::after,
.dd-model-img:has(img[src*="dampfbad-nebula"])::after,
.dd-model-img:has(img[src*="hottub-classic"])::after,
.dd-model-img:has(img[src*="hottub-nordic"])::after,
.dd-model-img:has(img[src*="icetub-polar"])::after,
.dd-model-img:has(img[src*="icetub-arctic"])::after,
.dd-model-img:has(img[src*="whirlpool-vita-pro"])::after,
.dd-model-img:has(img[src*="wp-sets"])::after,
.dd-model-img:has(img[src*="wp-kuebelkelle"])::after,
.dd-model-img:has(img[src*="wp-thermometer"])::after,
.dd-model-img:has(img[src*="wp-handtuecher"])::after,
.dd-model-img:has(img[src*="wp-peeling"])::after,
.dd-model-img:has(img[src*="wp-holzpflege"])::after,
.dd-model-img:has(img[src*="wp-badeoel"])::after,
.dd-model-img:has(img[src*="wp-aufguss"])::after,
.dd-model-img:has(img[src*="wp-oele"])::after {
  content: 'KI';
  position: absolute;
  right: 3px;
  bottom: 3px;
  z-index: 2;
  font-size: 6px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--ai-badge-fg);
  background: var(--ai-badge-bg);
  padding: 1px 4px;
  border-radius: 3px;
  line-height: 1.4;
  pointer-events: none;
  font-family: var(--font-sans, 'Raleway', -apple-system, sans-serif);
}

.sdp-visual:has(img[src*="sauna-terma90"])::after,
.sdp-visual:has(img[src*="sauna-vitalis-bio"])::after,
.sdp-visual:has(img[src*="sauna-spektrum"])::after,
.sdp-visual:has(img[src*="sauna-saphir"])::after,
.sdp-visual:has(img[src*="dampfbad-nebula"])::after,
.sdp-visual:has(img[src*="hottub-classic"])::after,
.sdp-visual:has(img[src*="hottub-nordic"])::after,
.sdp-visual:has(img[src*="icetub-polar"])::after,
.sdp-visual:has(img[src*="icetub-arctic"])::after,
.sdp-visual:has(img[src*="whirlpool-vita-pro"])::after,
.sdp-visual:has(img[src*="gewerbe-profi.jpg"])::after,

.sov-card__img-wrap:has(img[src*="sauna-terma90"])::after,
.sov-card__img-wrap:has(img[src*="sauna-vitalis-bio"])::after,
.sov-card__img-wrap:has(img[src*="sauna-spektrum"])::after,
.sov-card__img-wrap:has(img[src*="sauna-saphir"])::after,
.sov-card__img-wrap:has(img[src*="dampfbad-nebula"])::after,
.sov-card__img-wrap:has(img[src*="hottub-classic"])::after,
.sov-card__img-wrap:has(img[src*="hottub-nordic"])::after,
.sov-card__img-wrap:has(img[src*="icetub-polar"])::after,
.sov-card__img-wrap:has(img[src*="icetub-arctic"])::after,
.sov-card__img-wrap:has(img[src*="whirlpool-vita-pro"])::after,

.pw-card:has(img[src*="sauna.jpg"])::after,
.pw-card:has(img[src*="dampfbad-nebula"])::after,
.pw-card:has(img[src*="wellness.jpg"])::after,

.wl-product-card:has(img[src*="wp-sets"])::after,
.wl-product-card:has(img[src*="wp-kuebelkelle"])::after,
.wl-product-card:has(img[src*="wp-thermometer"])::after,
.wl-product-card:has(img[src*="wp-handtuecher"])::after,
.wl-product-card:has(img[src*="wp-peeling"])::after,
.wl-product-card:has(img[src*="wp-holzpflege"])::after,
.wl-product-card:has(img[src*="wp-badeoel"])::after,
.wl-product-card:has(img[src*="wp-aufguss"])::after,
.wl-product-card:has(img[src*="wp-oele"])::after,

.popup-img-col:has(img[src*="wellness.jpg"])::after,

.aw-process-img-wrap:has(img[src*="dampfbad-nebula"])::after,

.pw-card:has(img[src*="sauna.jpg"])::after,
.pw-card:has(img[src*="dampfbad-nebula"])::after,
.pw-card:has(img[src*="wellness.jpg"])::after {
  content: 'KI-generiertes Bild';
  position: absolute;
  right: 8px;
  bottom: 8px;
  z-index: 5;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--ai-badge-fg);
  background: var(--ai-badge-bg);
  padding: 3px 8px;
  border-radius: 4px;
  pointer-events: none;
  white-space: nowrap;
  font-family: var(--font-sans, 'Raleway', -apple-system, sans-serif);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

/* .hero braucht position:relative als Containing Block für das
   ::after-Badge oben (siehe :has(.hero-slide.active ...)-Regeln). */
.hero {
  position: relative;
}

/* ── Feste, per Klasse markierbare Variante ──
   Für Fälle ohne <img>-Tag (CSS background-image) oder für
   Konfigurator-Vorschaubilder, die per JS ausgetauscht werden.
   Wird von main.js / inline HTML gezielt gesetzt: <span class="ai-badge">
================================================================ */
.ai-badge {
  position: absolute;
  right: 8px;
  bottom: 8px;
  z-index: 6;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--ai-badge-fg);
  background: var(--ai-badge-bg);
  padding: 3px 8px;
  border-radius: 4px;
  pointer-events: none;
  white-space: nowrap;
  font-family: var(--font-sans, 'Raleway', -apple-system, sans-serif);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}
.ai-badge--sm {
  right: 3px;
  bottom: 3px;
  font-size: 6px;
  padding: 1px 4px;
  border-radius: 3px;
}

/* ================================================================
   SONDERFALL: danke-sauna.jpg als CSS background-image
   (kein <img>-Tag vorhanden — .popup-ty-shade / .cty-bg)
   Badge wird als ::before direkt auf den Shade-Container gesetzt.
================================================================ */
/* Hinweis: .popup-ty-shade und .cty-bg sind bereits an anderer
   Stelle (porsche.css / style.css) mit position:absolute; inset:0
   definiert — das reicht bereits als Containing Block für die
   absolut positionierten ::before-Badges unten, daher hier KEIN
   erneutes position setzen (würde inset:0 sonst brechen). */

.popup-ty-shade::before,
.cty-bg::before {
  content: 'KI-generiertes Bild';
  position: absolute;
  right: 8px;
  bottom: 8px;
  z-index: 5;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--ai-badge-fg);
  background: var(--ai-badge-bg);
  padding: 3px 8px;
  border-radius: 4px;
  pointer-events: none;
  white-space: nowrap;
  font-family: var(--font-sans, 'Raleway', -apple-system, sans-serif);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}