/* Stil der Videobloecke - eigene Datei und nicht in bereich.css.
 *
 * Der Grund: Die beiden Startseiten laden bereich.css nicht, sie bringen
 * ihren Stil inline mit. Die Reihe im Seitenkopf stuende dort also ohne
 * jede Regel - und ein Abspielknopf ohne Stil sitzt an einer Stelle, an der
 * er niemandem auffaellt.
 *
 * Deshalb ueberall var(--name, Rueckfall): Startseite und Bereichsseiten
 * fuehren nicht dieselben Variablen. --r gibt es nur auf den
 * Bereichsseiten, die Startseite hat --r-big und --r-card.
 */
   Bis zur Einwilligung steht hier ein eigenes Bild mit Abspielknopf. Nichts
   davon holt etwas von einem fremden Server - kein Vorschaubild, kein
   Vorverbinden. Das ist die Bedingung, an der die Einwilligung haengt. */
.videoblock{margin:30px 0}
.videoblock h2{font-size:1.3rem;font-weight:600;letter-spacing:-.02em;color:var(--ink);margin:0 0 12px}
.videobuehne{position:relative;aspect-ratio:16/9;border-radius:var(--r, 18px);overflow:hidden;
  border:1px solid var(--line);background:var(--card)}
.videobuehne .slot-img{width:100%;height:100%;object-fit:cover}
.videobuehne .slot-img.contain{object-fit:contain;background:#fff;padding:12px}
:root[data-theme="dark"] .videobuehne .slot-img.contain{background:#f7f7f8}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .videobuehne .slot-img.contain{background:#f7f7f8}}
.videorahmen{display:block;width:100%;height:100%;border:0}
.videobuehne.laeuft{background:#000}

/* Der Abspielknopf. Gross genug fuer einen Daumen (Zielflaeche 64 px) und
   mit Beschriftung: Ein blosses Dreieck sagt nicht, dass danach etwas von
   YouTube geladen wird. */
.videostart{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:10px;width:100%;height:100%;border:0;cursor:pointer;
  background:linear-gradient(to top,rgba(0,0,0,.55),rgba(0,0,0,.12) 55%,rgba(0,0,0,.28));
  color:#fff;font:inherit;font-size:.95rem;font-weight:600;letter-spacing:-.01em}
.videostart:hover .pfeil{transform:scale(1.07)}
.videostart:focus-visible{outline:3px solid var(--blue);outline-offset:-3px}
.videostart .pfeil{width:64px;height:64px;border-radius:50%;background:rgba(255,255,255,.94);
  position:relative;transition:transform .18s ease;box-shadow:0 4px 18px rgba(0,0,0,.3)}
.videostart .pfeil::after{content:"";position:absolute;top:50%;left:52%;transform:translate(-50%,-50%);
  border-style:solid;border-width:11px 0 11px 18px;border-color:transparent transparent transparent #1d1d1f}
.videostart.gross{font-size:1.02rem}
/* Die Beschriftung liegt auf einer dunklen Flaeche und nicht nur auf einem
   Schatten: Ein Teil der Platzhalter sind Produktfotos vor Weiss, und dort
   war weisse Schrift mit Schatten nicht zu lesen. */
.videostart-text{background:rgba(0,0,0,.6);padding:6px 14px;border-radius:var(--pill, 980px);
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}

.videohinweis{font-size:12px;line-height:1.5;color:var(--muted);margin:10px 0 0}
.videohinweis b{color:var(--ink);font-weight:600}
.videoquelle{display:inline-block;margin-top:2px}

/* Die Reihe auf der Startseite. Die Folien liegen uebereinander; sichtbar ist
   die mit .an. Ein- und Ausblenden nur ueber opacity - ein Wechsel per
   display waere fuer einen Screenreader ein Sprung im Dokument. */
.videoreihe{margin:22px 0 0}
.videoreihe .videobuehne{aspect-ratio:16/9}
.videoreihe .folie{position:absolute;inset:0;margin:0;opacity:0;transition:opacity .7s ease;
  pointer-events:none}
.videoreihe .folie.an{opacity:1}
.videoreihe .folie img{width:100%;height:100%}
.videoreihe .folie figcaption{position:absolute;left:12px;bottom:12px;padding:6px 12px;
  font-size:12px;font-weight:600;color:#fff;text-align:left;border-radius:var(--pill, 980px);
  background:rgba(0,0,0,.62);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.videoreihe .videostart{background:linear-gradient(to top,rgba(0,0,0,.35),rgba(0,0,0,.05) 45%,rgba(0,0,0,.2))}
/* Auch die Punkte brauchen einen eigenen Grund - vor einem Produktfoto auf
   Weiss war der aktive, weisse Punkt unsichtbar. */
.folienpunkte{position:absolute;right:12px;top:12px;display:flex;gap:8px;margin:0;
  padding:7px 10px;border-radius:var(--pill, 980px);background:rgba(0,0,0,.42);
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.folienpunkte .punkt{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.5);
  cursor:pointer}
.folienpunkte .punkt.an{background:#fff}
.folienpunkte .punkt:focus-visible{outline:2px solid #fff;outline-offset:2px}
.videobuehne.laeuft .folie,.videobuehne.laeuft .folienpunkte,
.videobuehne.laeuft .ki-marke{display:none}
@media (prefers-reduced-motion: reduce){.videoreihe .folie{transition:none}}

/* Das Einwilligungsbanner. Unten fixiert, nicht mittig ueber dem Inhalt: Es
   darf die Seite nicht verdecken - wer nicht entscheiden will, soll trotzdem
   alles lesen koennen. Kein Vorauswahl-Haken, beide Knoepfe gleich erreichbar. */
/* z-index ueber dem Assistenten (der liegt bei 70/71): Auf dem Handy stand
   seine Figur sonst vor dem Einwilligungstext, und ein Hinweis, den die
   Haelfte der Besucher nicht lesen kann, traegt keine Einwilligung. */
.videobanner{position:fixed;left:0;right:0;bottom:0;z-index:80;background:var(--card);
  border-top:1px solid var(--line);box-shadow:0 -6px 28px rgba(0,0,0,.14)}
.videobanner-innen{max-width:860px;margin:0 auto;padding:16px 20px;display:flex;gap:18px;
  align-items:center;flex-wrap:wrap}
.videobanner-text{margin:0;flex:1 1 380px;font-size:13px;line-height:1.55;color:var(--body)}
.videobanner-knoepfe{margin:0;display:flex;gap:10px;flex-wrap:wrap}
.videobanner .knopf{border:1px solid var(--blue);cursor:pointer;font:inherit;font-size:.92rem;
  font-weight:600;padding:10px 20px;border-radius:var(--pill, 980px);background:var(--blue);color:#fff}
.videobanner .knopf.hell{background:transparent;color:var(--link);border-color:var(--line)}
.videobanner .knopf:focus-visible{outline:3px solid var(--blue);outline-offset:2px}
@media(max-width:620px){.videobanner-innen{padding:14px 16px}
  .videobanner-knoepfe{width:100%}.videobanner .knopf{flex:1 1 auto;text-align:center}}

/* Auf der Startseite setzt der inline-Stil .stage{height:min(50vh,430px)}.
   Eine feste Hoehe und ein 16:9-Video ergeben schwarze Balken, deshalb hier
   height:auto - zwei Klassen schlagen die eine. */
.videoreihe .videobuehne{height:auto;aspect-ratio:16/9;max-height:min(70vh,560px);
  margin-top:34px}

/* Auf einer Produktseite ist das Video ein Baustein neben Zutaten und
   NTC-Absatz, nicht der Hauptinhalt. In voller Spaltenbreite und 16:9 stand
   ein quadratisches Produktfoto in sehr viel Luft. */
.videoblock.produktblock .videobuehne{max-width:620px;margin-inline:auto}
.videoblock.produktblock .videohinweis{max-width:620px;margin-inline:auto}