.vr-carousel{margin:1.5em 0}
.vr-carousel:first-child{margin-top:0}
.vr-carousel:last-child{margin-bottom:0}
.vr-carousel-viewport{position:relative}

/* Die Bilderreihe. Ohne JavaScript bleibt genau das übrig: eine seitlich
   scrollbare Reihe mit Einrastpunkten – auf Touchgeräten voll bedienbar. */
.vr-carousel-track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;overscroll-behavior-x:contain;scrollbar-width:none;-ms-overflow-style:none}
.vr-carousel-track::-webkit-scrollbar{display:none}
.vr-carousel-track:focus-visible{outline:2px solid var(--vr-link,#bc0b0b);outline-offset:2px}
.vr-carousel-slide{flex:0 0 100%;margin:0;scroll-snap-align:start;scroll-snap-stop:always}
.vr-carousel-slide img{display:block;width:100%;height:auto;margin:0;padding:0;border:0;border-radius:0;box-shadow:none}

/* Festes Seitenverhältnis, falls die Bildformate gemischt sind. */
.vr-carousel[style*="--vr-carousel-ratio"] .vr-carousel-slide img{aspect-ratio:var(--vr-carousel-ratio);object-fit:cover}

/* Pfeile – dauerhaft sichtbar, nicht erst beim Überfahren. */
.vr-carousel-nav{position:absolute;top:50%;transform:translateY(-50%);display:flex;align-items:center;justify-content:center;width:40px;height:40px;padding:0;border:0;border-radius:50%;background:rgba(255,255,255,.9);color:#1d2327;cursor:pointer;box-shadow:0 1px 4px rgba(0,0,0,.3);transition:background .2s}
.vr-carousel-nav:hover{background:#fff}
.vr-carousel-nav:focus-visible{outline:2px solid var(--vr-link,#bc0b0b);outline-offset:2px}
.vr-carousel-nav[disabled]{opacity:.35;cursor:default}
.vr-carousel-nav::before{content:"";width:9px;height:9px;border-right:2px solid currentColor;border-bottom:2px solid currentColor}
.vr-carousel-prev{left:10px}
.vr-carousel-prev::before{transform:rotate(135deg);margin-left:3px}
.vr-carousel-next{right:10px}
.vr-carousel-next::before{transform:rotate(-45deg);margin-right:3px}

/* Punkte unter dem Bild – dort stören sie das Motiv nicht und sind auf
   hellem Grund gut zu sehen. */
.vr-carousel-dots{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:10px 0 0}
.vr-carousel-dot{width:10px;height:10px;padding:0;border:0;border-radius:50%;background:var(--vr-border,#ccc);cursor:pointer;transition:background .2s,transform .2s}
.vr-carousel-dot:hover{background:#999}
.vr-carousel-dot:focus-visible{outline:2px solid var(--vr-link,#bc0b0b);outline-offset:2px}
.vr-carousel-dot[aria-current="true"]{background:var(--vr-link,#bc0b0b);transform:scale(1.3)}

/* Solange JavaScript nicht übernommen hat, keine toten Bedienelemente. */
.vr-carousel:not(.is-ready) .vr-carousel-nav,
.vr-carousel:not(.is-ready) .vr-carousel-dots{display:none}

@media only screen and (max-width:480px){
.vr-carousel-nav{width:34px;height:34px}
.vr-carousel-prev{left:6px}
.vr-carousel-next{right:6px}
}

@media (prefers-reduced-motion:reduce){
.vr-carousel-track{scroll-behavior:auto}
.vr-carousel-dot{transition:none}
}