/* ============================================================================
   bilder.css — Galerie (bilder.html): Bilder randlos über die volle Breite
   Baut auf style.css (Tokens, .chip, .lb) und home.css (.eyebrow, .h-title) auf.
   ========================================================================== */
/* Platz der Scrollleiste bleibt reserviert, sonst baut sich das Raster beim Öffnen des Vollbilds neu */
html:has(.bg-raster) { scrollbar-gutter: stable; }

/* Raster: volle Fensterbreite, nur ein schmaler Rand in Abstandsbreite */
/* Kein Kopf, keine Texte (Levin 15.10.): die Fotos beginnen direkt unter der Leiste */
.bg-raster { --gap: 8px; display: grid; gap: var(--gap); padding: calc(60px + var(--gap)) var(--gap) clamp(40px, 6vw, 80px); }
.bg-reihe { display: flex; gap: var(--gap); }

.bg-bild { position: relative; flex: none; width: var(--w); height: var(--h); padding: 0; border: 0; margin: 0;
  overflow: hidden; background: var(--surface-2); cursor: pointer; }
/* Hover (Levin 24.10.): das Bild zoomt sanft im Rahmen, gleich wie die Projektkarten der Startseite (home.css) */
.bg-bild img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease); }
@media (hover: hover) and (pointer: fine) {
  .bg-bild:hover img { transform: scale(1.03); }
}
/* Einblenden beim Scrollen: aufblenden und ein Stück von unten herein (js/bilder.js) */
.bg-bild { opacity: 0; transform: translateY(26px);
  transition: opacity .7s ease var(--d, 0ms), transform .9s cubic-bezier(.22, 1, .36, 1) var(--d, 0ms); }
.bg-bild.is-da { opacity: 1; transform: none; }
.bg-bild:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; z-index: 1; }

/* Vollbild: gleiche Lightbox wie auf den Projektseiten, Bild darf grösser werden */
.lb--galerie { z-index: 1100; }   /* über der Leiste (1000), sonst verdeckt sie den Schliessen-Knopf */
.lb--galerie .lb-figure, .lb--galerie .lb-figure img { max-width: 94vw; max-height: 88vh; }
.lb--galerie .lb-figure img { box-shadow: none; }

/* Aussortieren von Hand, nur lokal (js/bilder-auswahl.js, Levin 27.10.) */
.bg-x { position: absolute; top: 8px; right: 8px; z-index: 2; display: grid; place-items: center;
  width: 30px; height: 30px; border-radius: 50%; color: #fff; background: rgba(0,0,0,.55);
  opacity: 0; transition: opacity .2s ease, background-color .2s ease; }
.bg-bild:hover .bg-x, .bg-bild:focus-visible .bg-x { opacity: 1; }
.bg-x:hover { background: var(--danger); }
.bg-bild.is-raus .bg-x { opacity: 1; background: var(--danger); }
.bg-bild.is-raus img { opacity: .3; filter: grayscale(1); }
.bg-bild.is-raus::after { content: ""; position: absolute; inset: 0; border: 3px solid var(--danger); pointer-events: none; }

.bg-auswahl-leiste { position: fixed; left: 50%; bottom: 20px; z-index: 1050; display: flex; align-items: center; gap: 8px;
  padding: 8px 8px 8px 18px; border-radius: 999px; color: #fff; background: rgba(22,22,22,.92);
  box-shadow: 0 10px 30px rgba(0,0,0,.25); font-size: 15px;
  transform: translate(-50%, 140%); transition: transform .4s var(--ease); }
.bg-auswahl-leiste.is-da { transform: translate(-50%, 0); }
.bg-auswahl-zahl { margin-right: 6px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.bg-auswahl-btn { padding: 8px 14px; border: 1px solid rgba(255,255,255,.3); border-radius: 999px;
  color: inherit; background: none; font: inherit; cursor: pointer; white-space: nowrap; }
.bg-auswahl-btn--haupt { color: #161616; background: #fff; border-color: #fff; }
.bg-auswahl-btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .bg-bild, .bg-bild img { opacity: 1; transform: none; transition: none; }
  .bg-auswahl-leiste { transition: none; }
}