/* ======================================================================
   GERAETE MIT FILM statt Langbild (Demo Kaffeeroesterei, 19.10.2026)
   Gleiche Geraete wie in projekt.css, im Fenster laeuft ein Video.
   Fenster haben hier das Seitenverhaeltnis der Aufnahme, damit nichts
   abgeschnitten wird (Tablet 700x1008, Handy 400x866).
   ====================================================================== */
.geraet--film .geraet__fenster video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.g-tablet.geraet--film .geraet__fenster{aspect-ratio:700/1008}
.g-handy.geraet--film .geraet__fenster{aspect-ratio:400/866}

/* Ein Knopf haelt alle drei Filme an (WCAG 2.2.2: Bewegung laenger als 5 s braucht Pause) */
.filmknopf{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 14px;margin-left:auto;
  font:inherit;font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:var(--ink);
  background:none;border:1px solid var(--ink-3);border-radius:0;cursor:pointer}
.filmknopf:hover{border-color:var(--ink)}
.filmknopf:focus-visible{outline:3px solid var(--blue);outline-offset:3px}
.filmknopf svg{width:14px;height:14px;flex:none}
.filmknopf .i-spiel{display:none}
.filmknopf[aria-pressed="true"] .i-spiel{display:block}
.filmknopf[aria-pressed="true"] .i-pause{display:none}
@media(max-width:600px){
  .schau__kopf{justify-content:center;text-align:center}
  .filmknopf{margin-left:0}
}