/* Kleine Slideshow im Band "Neun Jahrzehnte MEN IN STEEL" auf der Startseite.
   Auf breiten Schirmen steht sie rechts neben dem Text, der dort ohnehin nur
   68 Zeichen breit laeuft; darunter rueckt sie unter den Text. */
.heritage-inner.has-showreel { grid-template-columns: 160px minmax(0, 1fr) minmax(300px, 460px); }

@media (max-width: 1180px) {
    .heritage-inner.has-showreel { grid-template-columns: 160px minmax(0, 1fr); }
    .heritage-inner.has-showreel .showreel { grid-column: 2; max-width: 640px; }
}
@media (max-width: 980px) {
    .heritage-inner.has-showreel { grid-template-columns: 1fr; }
    .heritage-inner.has-showreel .showreel { grid-column: 1; }
}

.showreel { margin: 0; align-self: center; }

.showreel-track {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    aspect-ratio: 4 / 3;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    background: var(--steel-900);
    border-bottom: 3px solid var(--accent);
}
.showreel.is-enhanced .showreel-track { scrollbar-width: none; }
.showreel.is-enhanced .showreel-track::-webkit-scrollbar { display: none; }

.showreel-slide { position: relative; flex: 0 0 100%; overflow: hidden; scroll-snap-align: start; }
.showreel-slide a { position: absolute; inset: 0; display: block; color: #fff; }

.showreel-backdrop,
.showreel-photo { position: absolute; inset: 0; width: 100%; height: 100%; }
.showreel-backdrop { object-fit: cover; filter: blur(18px) brightness(.55); transform: scale(1.2); }
.showreel-photo { object-fit: contain; }

.showreel-caption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0 var(--space-sm);
    padding: var(--space-lg) var(--space-sm) var(--space-xs);
    background: linear-gradient(transparent, rgba(0, 0, 0, .72));
    font-family: var(--font-mono);
    font-size: var(--step--1);
    letter-spacing: .06em;
    text-transform: uppercase;
}
.showreel-caption small { font-size: .78em; letter-spacing: 0; text-transform: none; opacity: .8; }
.showreel-slide a:hover .showreel-caption,
.showreel-slide a:focus-visible .showreel-caption { color: var(--accent); }

.showreel-controls { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); margin-top: var(--space-sm); }
.showreel-controls[hidden] { display: none; }

.showreel-step {
    width: 44px;
    height: 44px;
    border: 1px solid rgba(29, 32, 36, .3);
    background: transparent;
    color: var(--text-on-light);
    font-size: 1.1rem;
    cursor: pointer;
}
.showreel-step:hover,
.showreel-step:focus-visible { border-color: var(--accent-dark); color: var(--accent-dark); }

.showreel-dots { display: flex; gap: 2px; }
/* 24 px Trefferflaeche, sichtbar ist nur der Balken darin. */
.showreel-dot { width: 28px; height: 24px; padding: 0; border: 0; background: transparent; cursor: pointer; }
.showreel-dot::before { content: ''; display: block; height: 3px; margin-inline: 3px; background: rgba(29, 32, 36, .25); }
.showreel-dot[aria-current="true"]::before { background: var(--accent-dark); }