/* Welle 2: Elementgruppe media, Besitzer siehe docs/build/vertrag-welle-2.md
 * Galerie-Varianten (depla_grid, depla_slider), Hero (rsce_depla_hero), Imagemap, Vorher-Nachher.
 * Messwerte aus docs/referenz (1440), Doku: docs/build/elemente-g4.md.
 * Komponenteneigene Messwerte ohne Token stehen als Custom Property am Element und sind kommentiert. */

/* ---------- Galerie Raster (content_element/gallery/depla_grid) ---------- */
.c-gallery {
  --gallery-gap: 10px;     /* gemessen: messestaende/1440-full.png, Raster 3 x 380 px mit 10 px Abstand */
  --gallery-plus: 50px;    /* gemessen: hover-galerie-bild-nachher.png, Plus 50 px, Linien 1 px */
}
.c-gallery__list {
  display: grid;
  grid-template-columns: repeat(var(--gallery-cols, 4), minmax(0, 1fr));
  gap: var(--gallery-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}
.c-gallery__list > li { margin: 0; padding: 0; }
/* live endet jede Rasterzeile mit 10 px Abstand, auch die letzte (Abstand der Listenpunkte, unabhaengig von mb-0
 * am Element; sichtbar bei zwei Galerien untereinander auf Modelle). Welle 3, F1. */
.c-gallery .c-gallery__list { padding-bottom: var(--gallery-gap); }
.c-gallery__list::before,
.c-gallery__list > li::before { content: none; }
.c-gallery figure { margin: 0; }
.c-gallery img { display: block; width: 100%; height: auto; }
/* Live (Altsystem) sind die Spalten nicht gleich breit: 3er-Raster 378/384/378 px, 4er-Raster 280/285/285/280 px
 * bei 1160 px (768: 221/226/221), alle Bilder einer Reihe so hoch wie das mittlere (Quadrat 384 px, 4:3 288 px).
 * Gemessen: messestaende, modelle, projekte 1440-full.png und 768-full.png. Welle 3, QA. */
.content-gallery--cols-3.c-gallery { --gallery-tracks: 378fr 384fr 378fr; }
.content-gallery--cols-4.c-gallery { --gallery-tracks: 280fr 285fr 285fr 280fr; }
.c-gallery:is(.content-gallery--cols-3, .content-gallery--cols-4) .c-gallery__list {
  grid-template-columns: var(--gallery-tracks);
}
.c-gallery:is(.content-gallery--cols-3, .content-gallery--cols-4) :is(li, figure, a) { height: 100%; }
.c-gallery:is(.content-gallery--cols-3, .content-gallery--cols-4) img { height: 100%; object-fit: cover; }
.c-gallery a {
  position: relative;
  display: block;
  overflow: hidden;
}
/* Hover: Bild vollflaechig orange ueberdeckt, duennes weisses Plus in der Mitte (wie live) */
.c-gallery a::before,
.c-gallery a::after {
  content: "";
  position: absolute;
  opacity: 0;
  transition: opacity var(--ease-base);
  pointer-events: none;
}
.c-gallery a::before { inset: 0; background: var(--color-primary); }
.c-gallery a::after {
  top: 50%;
  left: 50%;
  width: var(--gallery-plus);
  height: var(--gallery-plus);
  transform: translate(-50%, -50%);
  background:
    linear-gradient(var(--color-white), var(--color-white)) center / 100% 1px no-repeat,
    linear-gradient(var(--color-white), var(--color-white)) center / 1px 100% no-repeat;
}
.c-gallery a:hover::before,
.c-gallery a:hover::after,
.c-gallery a:focus-visible::before,
.c-gallery a:focus-visible::after { opacity: 1; }
.c-gallery a:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
/* Bildunterschriften (Meta-Titel der Dateien) zeigt live keine Galerie, weder Raster noch Mobil-Slider.
 * Welle 3 (F1): ausgeblendet; die Bilder tragen denselben Text als alt. */
.c-gallery figcaption,
.c-slider[data-slider="gallery"] figcaption { display: none; }

/* ---------- Galerie Slider mobil (content_element/gallery/depla_slider) ---------- */
.c-gallery-slider figure { margin: 0; }
.c-gallery-slider a { display: block; }

/* ---------- Hero (rsce_depla_hero) ---------- */
/* Live hat der Slider-Artikel keinen Innenabstand (Klassen article-pt/-pb ohne Wirkung im Kopfbereich) */
.mod_article.mod_article:has(> .c-hero) { padding-block: 0; }
/* Ueber uns / Digitale Welten: dritte Zeile 20 px (Layer "Wir gestalten jedes Projekt ...") */
.c-slider__subtitle--small { font-size: max(12px, 20 * var(--slider-u)); }

/* ---------- Bild mit Hotspots (rsce_depla_imagemap) ---------- */
.c-imagemap {
  --spot-size: 36px;          /* gemessen: ueber-uns/1440-full.png, Kreis 36 px inkl. 2 px Rand */
  --spot-plus: 13px;          /* gemessen: Plus 13 px, Linien 2 px */
  --spot-offset-x: -8px;      /* gemessen: Kreismitte 10 px rechts und 14 px unter dem Koordinatenpunkt */
  --spot-offset-y: -4px;
  --spot-tip-w: 280px;        /* Hinweisbox, live nur per Klick sichtbar (keine Referenzaufnahme) */
  position: relative;
}
.c-imagemap__img { display: block; width: 100%; height: auto; }
.c-imagemap__spot {
  position: absolute;
  z-index: 1;
  left: var(--spot-x);
  top: var(--spot-y);
  translate: var(--spot-offset-x) var(--spot-offset-y);
}
.c-imagemap__spot[open] { z-index: 2; }
.c-imagemap__toggle {
  display: block;
  box-sizing: border-box;
  width: var(--spot-size);
  height: var(--spot-size);
  border: 2px solid var(--color-white-50);
  border-radius: var(--radius-circle);
  list-style: none;
  cursor: pointer;
  /* Rand liegt ueber der Fuellung: Weiss 50 % doppelt, wie gemessen */
  background:
    linear-gradient(var(--color-button-dark), var(--color-button-dark)) center / var(--spot-plus) 2px no-repeat,
    linear-gradient(var(--color-button-dark), var(--color-button-dark)) center / 2px var(--spot-plus) no-repeat,
    var(--color-white-50);
  transition: transform var(--ease-base);
}
.c-imagemap__toggle::-webkit-details-marker { display: none; }
.c-imagemap__toggle::marker { content: ""; }
.c-imagemap__toggle:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.c-imagemap__spot[open] .c-imagemap__toggle { transform: rotate(45deg); }
.c-imagemap__tip {
  position: absolute;
  top: calc(var(--spot-size) / 2);
  left: calc(var(--spot-size) + var(--gutter));
  width: var(--spot-tip-w);
  max-width: 70vw;
  padding: var(--gutter) var(--space-xxs);
  background: var(--color-white);
  color: var(--color-text);
  box-shadow: var(--shadow-dropdown);
  font-size: var(--fs-small);
  line-height: var(--lh-lead);
  transform: translateY(-50%);
}
.c-imagemap__spot--left .c-imagemap__tip { left: auto; right: calc(var(--spot-size) + var(--gutter)); }
.c-imagemap__tip > :last-child { margin-bottom: 0; }
.c-imagemap__tip strong { color: var(--color-heading); font-weight: var(--fw-bold); }

/* ---------- Vorher-Nachher (rsce_depla_beforeafter), Ergaenzung zu beforeafter.css ---------- */
.c-beforeafter::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: var(--color-overlay-compare);
  opacity: 0;
  transition: opacity 0.5s;
  pointer-events: none;
}
.c-beforeafter__label {
  position: absolute;
  z-index: 2;
  top: 50%;
  padding: 0 var(--space-xxs);
  background: var(--color-white-20);
  color: var(--color-white);
  font-size: var(--fs-small);
  line-height: 2.5;
  text-transform: uppercase;
  letter-spacing: var(--ls-iconbox);
  opacity: 0;
  transform: translateY(-50%);
  transition: opacity var(--ease-slow);
  pointer-events: none;
}
.c-beforeafter__label--before { left: var(--gutter); }
.c-beforeafter__label--after { right: var(--gutter); }
@media (hover: hover) {
  .c-beforeafter.is-ready:hover:not(.is-dragging)::after,
  .c-beforeafter.is-ready:hover:not(.is-dragging) .c-beforeafter__label { opacity: 1; }
}