/* =============================================================================
   Itze Grow e.V. – Bildebene
   Fotos als ruhiger Hintergrund hinter den Bereichen, dazu das gekennzeichnete
   KI-Bild im Kapitel „Der Verein“.

   Regeln:
   - Hintergrundfotos sind Stimmung, kein Inhalt: alt="" und aria-hidden.
   - Immer weich ausgeblendet (mask-image) und nie hinter voller Textdeckkraft,
     damit Kontraste der Texte unverändert bleiben.
   - Nur transform/opacity, keine Filter auf großen Flächen im Scrollbetrieb.
   ========================================================================== */

/* ------------------------------------------------------ Hintergrundfoto --*/

.has-photo { position: relative; isolation: isolate; }

.bg-photo {
  position: absolute; inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  --bg-opacity: 0.2;
  --bg-mask: linear-gradient(to right, transparent 0%, #000 55%, #000 100%);
}
.bg-photo img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: var(--bg-opacity);
  -webkit-mask-image: var(--bg-mask);
          mask-image: var(--bg-mask);
}

/* Varianten: auf welcher Seite das Foto sichtbar wird */
.bg-photo--rechts {
  inset-inline-start: 38%;
  --bg-mask:
    linear-gradient(to right, transparent 0%, #000 45%),
    linear-gradient(to bottom, transparent 0%, #000 22%, #000 78%, transparent 100%);
}
.bg-photo--rechts img {
  -webkit-mask-composite: source-in;
          mask-composite: intersect;
}
.bg-photo--links {
  inset-inline-end: 38%;
  --bg-mask:
    linear-gradient(to left, transparent 0%, #000 45%),
    linear-gradient(to bottom, transparent 0%, #000 22%, #000 78%, transparent 100%);
}
.bg-photo--links img {
  -webkit-mask-composite: source-in;
          mask-composite: intersect;
}
.bg-photo--band {
  --bg-mask: linear-gradient(to bottom, transparent 0%, #000 30%, #000 70%, transparent 100%);
}

/* Titelseite: warmes Gegenlicht hinter dem Logo */
.title-page.has-photo .bg-photo { inset-inline-start: 30%; }
.title-page .bg-photo { --bg-opacity: 0.32; }

/* Sorten: Foto hinter dem Raster, links und rechts weich auslaufend */
.sorten .bg-photo {
  --bg-opacity: 0.16;
  --bg-mask:
    linear-gradient(to right, transparent 0%, #000 18%, #000 88%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, #000 22%, #000 78%, transparent 100%);
}
.sorten .bg-photo img {
  -webkit-mask-composite: source-in;
          mask-composite: intersect;
}

/* Telefon: Fotos über die volle Breite, dafür noch zurückhaltender */
@media (max-width: 860px) {
  .bg-photo--rechts,
  .bg-photo--links,
  .title-page.has-photo .bg-photo { inset-inline: 0; }
  .bg-photo { --bg-opacity: 0.12; }
  .title-page .bg-photo { --bg-opacity: 0.2; }
}

/* ---------------------------------------------------- KI-Bild (Verein) --
   Nach Art. 50 KI-Verordnung (EU) 2024/1689 sind KI-erzeugte, realistisch
   wirkende Bilder von Personen erkennbar zu kennzeichnen. Deshalb steht der
   Hinweis direkt auf dem Bild.                                             */

.ki-figure { margin: var(--sc-8) 0 0; display: grid; gap: var(--sc-3); }
.ki-figure__frame {
  position: relative;
  border-radius: var(--sc-r-lg);
  overflow: hidden;
  aspect-ratio: 3 / 2;
  background: var(--sc-surface);
  box-shadow: 0 1px 2px hsl(var(--sc-shadow-color) / 0.12),
              0 18px 40px -18px hsl(var(--sc-shadow-color) / 0.35);
}
.ki-figure__frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ki-badge {
  position: absolute; left: var(--sc-3); top: var(--sc-3);
  display: inline-flex; align-items: center; gap: 0.4em;
  padding: 0.3rem 0.6rem;
  border-radius: var(--sc-r-sm);
  background: color-mix(in oklab, #0C0F0A 78%, transparent);
  color: #F2F5EE;
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  backdrop-filter: blur(4px);
}