/* Filmklappe neben der Seitenüberschrift, plus das Fenster zum Abspielen.

   Vorher stand über dem Inhalt ein breiter Balken „Erklärvideo: <Titel>". Der
   nahm eine Zeile ein, egal wie oft man das Video schon gesehen hat, und führte
   in die Mediathek, wo man es erst wiederfinden musste. Die Klappe sitzt jetzt
   direkt an der Überschrift, so wie im FöbA-CRM, und spielt das Video an Ort
   und Stelle ab. */

.seiten-klappe {
  display: inline-flex; align-items: center; vertical-align: middle;
  margin-left: var(--sp-2); padding: .2rem;
  color: var(--info); background: none; border: 0; cursor: pointer;
  line-height: 0;
}
.seiten-klappe:hover { color: var(--akzent); }
/* Solange das JS die Klappe nicht an die Überschrift gehängt hat, bleibt sie
   unsichtbar: sonst blitzt sie kurz oben links auf. */
.seiten-klappe[hidden] { display: none; }

/* --- Das Fenster ---------------------------------------------------------- */

.seiten-video-schirm {
  position: fixed; inset: 0; z-index: var(--z-dialog);
  display: flex; align-items: center; justify-content: center;
  padding: var(--sp-3); background: var(--schleier);
}
.seiten-video-schirm[hidden] { display: none; }

.seiten-video-kasten {
  position: relative; width: 100%; max-width: 900px; max-height: 92vh;
  overflow-y: auto; background: var(--flaeche); border-radius: var(--radius);
  padding: var(--sp-4); box-shadow: var(--schatten-2);
}
.seiten-video-kasten video {
  width: 100%; max-height: 58vh; display: block;
  background: var(--flaeche-2); border-radius: var(--radius-sm);
}
.seiten-video-kasten h2 { margin: var(--sp-3) 0 var(--sp-1); }
.seiten-video-kasten p { color: var(--text-leise); white-space: pre-wrap; }

/* Oben rechts, damit der Daumen am Handy hinkommt, ohne das Video zu treffen. */
.seiten-video-zu {
  position: absolute; top: var(--sp-2); right: var(--sp-2);
  width: 2.4rem; height: 2.4rem; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: var(--txt-lg); line-height: 1; cursor: pointer;
  background: var(--flaeche-2); color: var(--text); border: 1px solid var(--linie);
}

/* --- Auswahl, wenn ein ganzer Ordner an der Seite haengt ------------------
   Titel untereinander statt nebeneinander: am Handy ist die Zeile schmal, und
   ein Videotitel ist selten kurz. */
.seiten-video-liste {
  list-style: none; margin: var(--sp-3) 0 0; padding: var(--sp-3) 0 0;
  border-top: 1px solid var(--linie);
  display: flex; flex-direction: column; gap: var(--sp-1);
}
.seiten-video-liste button,
.seiten-video-liste a {
  display: block; width: 100%; text-align: left;
  padding: var(--sp-2); border-radius: var(--radius-sm);
  background: none; border: 1px solid transparent;
  color: var(--text); font: inherit; cursor: pointer; text-decoration: none;
}
.seiten-video-liste button:hover,
.seiten-video-liste a:hover { background: var(--flaeche-2); }
/* Das laufende Video bleibt erkennbar, auch nach dem Scrollen im Fenster. */
.seiten-video-liste button.aktiv {
  background: var(--flaeche-2); border-color: var(--akzent); color: var(--akzent);
}
.seiten-video-liste a { color: var(--text-leise); }