/* ENTWURF 17.10.2026 – Video-Kundenstimmen (stimmen.mjs). Vor dem Go-live in style.css übernehmen. */
.stimmen { position: relative; }
.stimmen__track {
  display: grid; grid-auto-flow: column; grid-auto-columns: min(74%, 280px); gap: var(--s4);
  overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
  padding-bottom: var(--s3); scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent;
}
.stimmen__track:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
@media (min-width: 768px) { .stimmen__track { gap: var(--s5); grid-auto-columns: calc((100% - 2 * var(--s5)) / 3); } }
@media (min-width: 1100px) { .stimmen__track { grid-auto-columns: calc((100% - 3 * var(--s5)) / 4); } }
.stimme { margin: 0; min-width: 0; scroll-snap-align: start; display: grid; grid-template-rows: auto 1fr; gap: var(--s4); }
.stimme__media video {
  display: block; width: 100%; height: auto; aspect-ratio: 9 / 16; object-fit: cover;
  border-radius: var(--radius); border: 1px solid var(--line); background: #000;
}
.stimme__media { position: relative; }
.stimme__play { display: none; }
.js .stimme__play {
  position: absolute; left: 50%; top: 50%; width: 64px; height: 64px; margin: -32px 0 0 -32px; padding: 0 0 0 3px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: 50%; background: var(--accent); color: #fff; cursor: pointer;
  box-shadow: 0 6px 24px rgba(0, 0, 0, .45); transition: background .2s, transform .2s;
}
.js .stimme__play:hover { background: var(--accent-hover); transform: scale(1.06); }
.stimme__play:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.js .stimme.is-started .stimme__play { display: none; }
/* Untertitel-Zeilen sind in den .vtt auf ≤ 200 px bei 14px umbrochen (schmalstes Video 219 px bei 768); Chrome bricht Cues selbst nicht um */
.stimme__media video::cue { font: 600 14px/1.35 "Inter", system-ui, sans-serif; color: #fff; background: rgba(0, 0, 0, .72); }
.stimme figcaption { display: grid; gap: var(--s2); align-content: start; min-width: 0; }
.stimme__wer { color: var(--muted); font-size: .875rem; letter-spacing: .02em; }
.stimme blockquote { margin: 0; font-family: var(--font-display); font-size: 1.35rem; line-height: 1.2; color: var(--text); }
.stimmen__nav { display: none; }
@media (min-width: 768px) {
  .js .stimmen__nav { display: flex; justify-content: flex-end; gap: var(--s3); margin-top: var(--s4); }
  .stimmen__nav button {
    width: 44px; height: 44px; padding: 0; display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--line-strong); border-radius: 50%; background: transparent; color: var(--text); cursor: pointer; transition: background .2s, opacity .2s;
  }
  .stimmen__nav button:hover { background: var(--surface-2); }
  .stimmen__nav button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
  .stimmen__nav button[disabled] { opacity: .35; cursor: default; }
}
/* Gleicher Hintergrund davor/danach (RBR: Tickets → Stimmen) – kein doppeltes Polster */
.stimmen-band + .band:not(.band--alt) { padding-top: 0; }
.band:not(.band--alt):not(.feature-band) + .stimmen-band { padding-top: 0; }