/* Galerie: wischbare Bildleiste mit scroll-snap. Fotos werden nie beschnitten: feste Höhe, Breite folgt dem Bild. */
.galerie { margin-block: 1.5rem; }
.galerie-leiste {
  --gal-hoehe: clamp(13rem, 52vw, 22rem);
  display: flex;
  gap: .9rem;
  margin: 0;
  padding: .25rem .25rem .6rem;
  list-style: none;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: .25rem;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
.galerie-leiste:focus-visible { outline: 3px solid var(--farbe-fokus, #1a5fb4); outline-offset: 2px; }
.galerie-bild { flex: 0 0 auto; scroll-snap-align: start; max-width: 88%; }
.galerie-bild figure { margin: 0; }
.galerie-bild a { display: block; line-height: 0; background: var(--farbe-flaeche-2, #efe8d9); border-radius: var(--radius, 8px); overflow: hidden; }
.galerie-bild img {
  display: block;
  height: var(--gal-hoehe);
  width: auto;
  max-width: 100%;
  object-fit: contain;
}
.galerie-bild figcaption {
  margin-top: .4rem;
  max-width: 24rem;
  font-size: var(--t-klein);
  line-height: 1.35;
  color: var(--farbe-text-leise, #6b6254);
}
.galerie-bild figcaption small { display: block; font-size: var(--t-klein); opacity: .9; }

.galerie-steuer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-top: .3rem;
}
.galerie-steuer[hidden] { display: none; }
.galerie-zaehler { margin: 0; min-width: 7rem; text-align: center; font-size: var(--t-klein); color: var(--farbe-text-leise, #6b6254); }
.galerie-knopf {
  min-width: 44px;
  min-height: 44px;
  border: 1px solid var(--farbe-linie, #d8cfbd);
  border-radius: 999px;
  background: var(--farbe-flaeche, #fffdf8);
  color: var(--farbe-text, #1f1a14);
  font: inherit;
  font-size: 1.2rem;
  cursor: pointer;
}
.galerie-knopf:hover:not(:disabled) { border-color: var(--farbe-akzent, #8a3b2a); }
.galerie-knopf:disabled { opacity: .35; cursor: default; }
.galerie-knopf:focus-visible { outline: 3px solid var(--farbe-fokus, #1a5fb4); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) { .galerie-leiste { scroll-behavior: auto; } }
html[data-bewegung="ruhig"] .galerie-leiste { scroll-behavior: auto; }