/* =========================================================================
   Bewegte Galerie aller Designvarianten (Laufband).

   Jede Variante faerbt sie ueber Variablen ein:
     --gal-bg, --gal-fg, --gal-muted, --gal-accent, --gal-font,
     --gal-rand (Rahmen der Vorschaubilder), --gal-radius
   ========================================================================= */

.fv-galerie {
    background: var(--gal-bg, #141414); color: var(--gal-fg, #f4f1ea);
    font-family: var(--gal-font, inherit);
    padding: 2.5rem 0 2.75rem; overflow: hidden;
}
.fv-galerie-kopf {
    max-width: 80rem; margin: 0 auto 1.5rem; padding: 0 1.25rem;
    display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .5rem 2rem;
}
.fv-galerie-titel { margin: 0; font-size: 1.05rem; font-weight: 700; }
.fv-galerie-links { margin: 0; display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; font-size: .8rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.fv-galerie-links a { color: var(--gal-muted, rgba(244, 241, 234, .7)); text-decoration: none; }
.fv-galerie-links a:hover, .fv-galerie-links a:focus-visible { color: var(--gal-accent, #e05a2b); }

.fv-galerie-band { position: relative; }
.fv-galerie-spur {
    display: flex; gap: 1.25rem; width: max-content; margin: 0; padding: .5rem 1.25rem; list-style: none;
    animation: fv-galerie-lauf var(--gal-dauer, 60s) linear infinite;
}
.fv-galerie-band:hover .fv-galerie-spur,
.fv-galerie-band:focus-within .fv-galerie-spur { animation-play-state: paused; }
@keyframes fv-galerie-lauf {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

.fv-galerie-eintrag a {
    display: block; width: 15rem; color: inherit; text-decoration: none;
}
.fv-galerie-bild {
    display: block; width: 15rem; height: 9.375rem; object-fit: cover; object-position: top;
    border: var(--gal-rand, 1px solid rgba(255, 255, 255, .2)); border-radius: var(--gal-radius, 0);
    background: var(--gal-ersatz, #333); box-sizing: border-box;
    transition: transform .25s ease;
}
.fv-galerie-eintrag a:hover .fv-galerie-bild,
.fv-galerie-eintrag a:focus-visible .fv-galerie-bild { transform: translateY(-4px); }
.fv-galerie-name { display: flex; justify-content: space-between; gap: .5rem; margin-top: .6rem; font-size: .85rem; font-weight: 700; }
.fv-galerie-stil { display: block; font-size: .72rem; font-weight: 400; color: var(--gal-muted, rgba(244, 241, 234, .7)); margin-top: .15rem; }

/* Die aktuelle Variante */
.fv-galerie-eintrag.ist-hier .fv-galerie-bild { outline: 3px solid var(--gal-accent, #e05a2b); outline-offset: 3px; }
.fv-galerie-marke {
    flex-shrink: 0; align-self: center; padding: .1rem .45rem; font-size: .62rem; letter-spacing: .08em; text-transform: uppercase;
    background: var(--gal-accent, #e05a2b); color: var(--gal-accent-fg, #fff);
}

/* Weniger Bewegung gewuenscht: kein Laufband, sondern eine Reihe zum Wischen */
@media (prefers-reduced-motion: reduce) {
    .fv-galerie-band { overflow-x: auto; }
    .fv-galerie-spur { animation: none; }
    .fv-galerie-eintrag a:hover .fv-galerie-bild { transform: none; }
}
.fv-galerie.ohne-lauf .fv-galerie-band { overflow-x: auto; }
.fv-galerie.ohne-lauf .fv-galerie-spur { animation: none; }