/* Wiederverwendbare Bildgalerie (siehe js/galerie.js). Nutzt die :root-Farbvariablen der Seite. */
.galerie { position: relative; margin-top: 48px; }
.galerie-head h3 { font-weight: 700; font-size: clamp(18px, 2.4vw, 22px); margin: 0 0 6px; }
.galerie-head p { font-size: 14px; line-height: 1.6; color: var(--text-body); margin: 0 0 20px; max-width: 600px; }
.galerie-viewport { position: relative; }
.galerie-track {
  display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory;
  padding: 4px; margin: -4px; scroll-padding: 0 4px; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.galerie-track::-webkit-scrollbar { display: none; }
.galerie-item {
  flex: 0 0 auto; width: clamp(160px, 22vw, 220px); scroll-snap-align: start;
  padding: 0; margin: 0; border: 1px solid var(--border-strong); border-radius: 14px; background: #fff;
  overflow: hidden; cursor: zoom-in; font: inherit; color: inherit;
}
.galerie-item img { width: 100%; height: auto; display: block; }
.galerie-item:hover { border-color: var(--green); }
.galerie-item:focus-visible, .galerie-nav:focus-visible, .lb-btn:focus-visible {
  outline: 3px solid var(--green); outline-offset: 2px;
}
/* Steuerung unter der Reihe: zurueck, Seitenanzeige, weiter (js/galerie.js). Reihe selbst ohne nativen Scrollbalken. */
.galerie-bar { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 14px; }
.galerie-bar[hidden] { display: none; }
.galerie-nav {
  width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--border-strong);
  background: #fff; color: var(--navy); cursor: pointer; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 12px rgba(13,36,56,.12); padding: 0; flex: 0 0 auto;
}
.galerie-nav:hover:not([disabled]) { background: var(--green-tint); }
.galerie-nav[disabled] { opacity: .35; cursor: default; box-shadow: none; }
.galerie-pos { min-width: 56px; text-align: center; font-size: 14px; font-weight: 600; color: var(--text-body); font-variant-numeric: tabular-nums; }
@media (max-width: 640px) {
  .galerie-track { gap: 14px; }
  .galerie-item { width: min(62vw, 220px); }
}

/* Breite Galerie (Desktop-Screenshots, "breit": true in galerie.json) */
.galerie--breit .galerie-item { width: min(560px, 82vw); }
@media (max-width: 640px) { .galerie--breit .galerie-item { width: 86vw; } }

/* ---------- Lightbox ---------- */
.lb { position: fixed; inset: 0; z-index: 100; background: rgba(7,24,36,.92); display: flex; flex-direction: column;
  align-items: center; justify-content: center; padding: 56px 16px 16px; touch-action: pan-y; }
.lb[hidden] { display: none; }
.lb-fig { margin: 0; display: flex; flex-direction: column; align-items: center; min-height: 0; max-width: 100%; flex: 1 1 auto; }
.lb-fig picture { min-height: 0; display: flex; flex: 1 1 auto; }
.lb-fig img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; border-radius: 10px; background: #fff; }
.lb-cap { color: #fff; font-size: 15px; line-height: 1.5; text-align: center; max-width: 640px; padding: 14px 56px 0; flex: 0 0 auto; }
.lb-count { color: #b7c3cc; font-size: 12px; margin-top: 4px; }
.lb-btn {
  position: absolute; width: 44px; height: 44px; border-radius: 50%; border: 0; cursor: pointer; padding: 0;
  background: rgba(255,255,255,.14); color: #fff; display: flex; align-items: center; justify-content: center;
}
.lb-btn:hover { background: rgba(255,255,255,.28); }
.lb-btn[hidden] { display: none; }
.lb-close { top: 8px; right: 8px; }
.lb-prev { left: 8px; top: 50%; transform: translateY(-50%); }
.lb-next { right: 8px; top: 50%; transform: translateY(-50%); }
@media (max-width: 640px) {
  .lb { padding: 52px 0 12px; }
  .lb-fig img { border-radius: 0; }
  .lb-prev, .lb-next { top: auto; bottom: 8px; transform: none; }
  .lb-cap { padding: 12px 60px 0; font-size: 14px; }
}
body.lb-open { overflow: hidden; }
@media (prefers-reduced-motion: no-preference) {
  .lb { animation: lb-in .15s ease-out; }
  @keyframes lb-in { from { opacity: 0; } to { opacity: 1; } }
}
.play-badge { display: inline-block; margin: 0 0 0 -12px; border-radius: 12px; }
.play-badge:focus-visible { outline: 3px solid var(--green); outline-offset: 0; }
.play-badge img { width: 180px; height: auto; }
/* noscript-Fallback: Bilder untereinander mit Bildunterschrift */
.galerie-static { margin: 0 0 28px; }
.galerie-static img { max-width: 100%; height: auto; border: 1px solid var(--border-strong); border-radius: 14px; }
.galerie-static figcaption { font-size: 14px; line-height: 1.5; color: var(--text-body); margin-top: 8px; max-width: 400px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }