/* Galerie: große Bilder, wechselt automatisch, Wischen am Handy, Pfeiltasten und Pfeilknöpfe am Computer.
   Ohne JavaScript bleibt es ein wischbarer Bilderstreifen. Rückweg: den Link auf diese Datei und galerie.js
   aus der Seite nehmen, die Bilder stehen dann untereinander. */
.diaschau{position:relative;margin-top:clamp(2rem,4vw,3rem)}
.diaschau .g-buehne{position:relative}
.diaschau .g-spur{display:flex;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;border-radius:3px;outline-offset:4px}
.diaschau .g-spur::-webkit-scrollbar{display:none}
.diaschau .g-bild{position:relative;flex:0 0 100%;min-width:0;margin:0;scroll-snap-align:center;scroll-snap-stop:always}
.diaschau .g-bild img{display:block;width:100%;height:auto;aspect-ratio:3/2;max-height:min(76vh,46rem);object-fit:cover;object-position:50% 28%}
.diaschau .g-bild figcaption{position:absolute;left:0;right:0;bottom:0;margin:0;padding:3.4rem clamp(1rem,3vw,1.8rem) clamp(.9rem,2vw,1.3rem);background:linear-gradient(to top,rgba(8,8,10,.86),rgba(8,8,10,.55) 58%,rgba(8,8,10,0));color:#f3f0e9;font-size:clamp(.9rem,1.3vw,1.02rem);line-height:1.4}
.diaschau .g-bild figcaption .foto{display:block;margin-top:.2rem;font-size:.78rem;color:#d6d3cc}

.diaschau .g-pfeil{position:absolute;top:50%;transform:translateY(-50%);width:2.9rem;height:2.9rem;border-radius:50%;border:1px solid rgba(255,255,255,.4);background:rgba(10,10,12,.5);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);color:#fff;display:grid;place-items:center;cursor:pointer;padding:0;transition:background .2s}
.diaschau .g-pfeil:hover{background:rgba(10,10,12,.8)}
.diaschau .g-pfeil svg{width:1.25rem;height:1.25rem;display:block}
.diaschau .g-zurueck{left:clamp(.6rem,2vw,1.2rem)}
.diaschau .g-weiter{right:clamp(.6rem,2vw,1.2rem)}

.diaschau .g-leiste{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-top:.9rem}
.diaschau .g-punkte{display:flex;flex-wrap:wrap;gap:.1rem}
.diaschau .g-punkt{width:1.6rem;height:1.6rem;display:grid;place-items:center;background:none;border:0;cursor:pointer;padding:0}
.diaschau .g-punkt::before{content:"";width:.5rem;height:.5rem;border-radius:50%;background:rgba(255,255,255,.42);transition:background .2s,transform .2s}
.diaschau .g-punkt[aria-current="true"]::before{background:var(--wine-hell,#b03040);transform:scale(1.4)}
.diaschau .g-rechts{display:flex;align-items:center;gap:.8rem;color:var(--muted,#c2bfb7);font-size:.85rem;font-variant-numeric:tabular-nums}
.diaschau .g-pause{width:2rem;height:2rem;border-radius:50%;border:1px solid rgba(255,255,255,.3);background:none;color:#fff;display:grid;place-items:center;cursor:pointer;padding:0}
.diaschau .g-pause svg{width:.8rem;height:.8rem;display:block}
.diaschau .g-pause:hover{background:rgba(255,255,255,.1)}

.diaschau .g-pfeil:focus-visible,.diaschau .g-punkt:focus-visible,.diaschau .g-pause:focus-visible,.diaschau .g-spur:focus-visible{outline:2px solid #fff;outline-offset:3px}

@media (max-width:700px){
  .diaschau .g-pfeil{width:2.5rem;height:2.5rem}
  .diaschau .g-bild img{aspect-ratio:4/3}
  .diaschau .g-bild figcaption{padding-top:2.6rem}
}
@media (prefers-reduced-motion:reduce){ .diaschau .g-spur{scroll-behavior:auto} }

/* Hochformat-Bilder in der Diashow: ganz zeigen statt anschneiden */
.diaschau .g-bild img.hoch{object-fit:contain;background:var(--bg,#0c0c0e)}

/* Flyer-Collage: alle Titelbilder nebeneinander, Klick öffnet das große Bild */
.flyerwand{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(.5rem,1vw,.9rem);margin-top:clamp(2rem,4vw,3rem);list-style:none;padding:0}
.flyerwand li{margin:0;list-style:none}
.flyerwand a{display:block;overflow:hidden;border-radius:2px;background:var(--panel,#111114);transition:transform .25s cubic-bezier(.16,1,.3,1),box-shadow .25s}
.flyerwand a:hover,.flyerwand a:focus-visible{transform:translateY(-4px) scale(1.03);box-shadow:0 14px 32px rgba(0,0,0,.55)}
.flyerwand a:focus-visible{outline:2px solid #fff;outline-offset:2px}
.flyerwand img{display:block;width:100%;height:auto;aspect-ratio:138/292;object-fit:cover}
@media (min-width:700px){ .flyerwand{grid-template-columns:repeat(5,minmax(0,1fr))} }
@media (min-width:1100px){ .flyerwand{grid-template-columns:repeat(10,minmax(0,1fr))} }