/* ==========================================================================
   SHK-Info.de – Videodarstellung
   Genutzt auf der Startseite, der Videoseite und den Kategorieseiten.

   Datenschutzfreundlich: Vorschaubild liegt lokal, YouTube wird erst beim
   Klick geladen. Vorher geht keine Anfrage an Google.
   ========================================================================== */

.videos { margin-top: var(--raum-16); }
.videos__kopf { margin-bottom: var(--raum-6); }
.videos__kopf h2 { font-size: var(--text-xl); margin-bottom: var(--raum-2); }
.videos__kopf p { font-size: var(--text-sm); color: var(--farbe-text-leise); }

.videoraster {
  display: grid; gap: var(--raum-6);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr));
  list-style: none; padding: 0;
}

.video { border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--farbe-linie); background: #fff; }

.video__start {
  display: block; position: relative; width: 100%;
  padding: 0; border: 0; cursor: pointer;
  background: var(--grau-200); aspect-ratio: 16 / 9;
}
.video__bild { width: 100%; height: 100%; object-fit: cover; }
/* display:block oben würde [hidden] überstimmen – hier zurückgeholt */
.video__start[hidden] { display: none; }

.video__knopf {
  position: absolute; inset: 0; margin: auto;
  width: 4rem; height: 4rem;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--shk-rot); color: #fff;
  font-size: 1.5rem; line-height: 1;
  box-shadow: var(--schatten-lg);
  transition: transform .15s;
}
.video__start:hover .video__knopf { transform: scale(1.08); }

.video__rahmen { aspect-ratio: 16 / 9; }
.video__rahmen iframe { width: 100%; height: 100%; border: 0; display: block; }

.video__text { padding: var(--raum-4); }
.video__titel { font-size: var(--text-sm); font-weight: 600; line-height: 1.35; }
.video__hinweis { margin-top: var(--raum-2); font-size: var(--text-xs); color: var(--farbe-text-leise); }

.video__auszug {
  margin-top: var(--raum-2);
  font-size: var(--text-xs);
  color: var(--farbe-text-leise);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden;
}
.video__zeile {
  display: flex; flex-wrap: wrap; gap: var(--raum-3);
  align-items: center;
  margin-top: var(--raum-3);
  font-size: var(--text-xs); color: var(--farbe-text-leise);
  font-variant-numeric: tabular-nums;
}
.video__kurz {
  padding: 0 var(--raum-2);
  border-radius: var(--radius-sm);
  background: var(--gelb-200);
  font-weight: 600; letter-spacing: .02em;
}

/* --- Reihen (Playlists) ---------------------------------------------------
   Die Kachel zeigt das erste Video; zwei weitere liegen als Stapel
   dahinter und machen ohne Worte klar, dass eine Serie folgt.
   ------------------------------------------------------------------------- */
.reihe { padding-top: 0; overflow: hidden; }

.reihe__stapel {
  position: relative;
  display: block;
  /* Platz für die hervorlugenden Kanten des Stapels */
  margin: calc(var(--raum-6) * -1) calc(var(--raum-6) * -1) var(--raum-5);
  padding: var(--raum-3) var(--raum-3) 0;
  background: var(--grau-100);
}

.reihe__stapel img {
  display: block; width: 100%;
  aspect-ratio: 16 / 9; object-fit: cover;
  border-radius: var(--radius-sm);
}

.reihe__hinten, .reihe__mitte {
  position: absolute; top: 0;
  border: 1px solid #fff;
  filter: brightness(.82);
  transition: transform .18s;
}
.reihe__hinten { left: 12%; right: 12%; width: auto; transform: translateY(-2px) scale(.97); }
.reihe__mitte  { left: 6%;  right: 6%;  width: auto; transform: translateY(2px)  scale(.985); }
.reihe__vorne  { position: relative; box-shadow: var(--schatten-sm); }

a.reihe:hover .reihe__hinten { transform: translateY(-6px) scale(.97); }
a.reihe:hover .reihe__mitte  { transform: translateY(-1px) scale(.985); }

.reihe__zahl {
  position: absolute;
  right: var(--raum-5); bottom: var(--raum-3);
  padding: var(--raum-1) var(--raum-2);
  border-radius: var(--radius-sm);
  background: rgb(15 23 42 / .82); color: #fff;
  font-size: var(--text-xs); font-weight: 600;
  font-variant-numeric: tabular-nums;
  backdrop-filter: blur(4px);
}

/* Hervorgehobene Reihen bekommen mehr Gewicht statt mehr Fläche */
.reihe--gross { border-left: 4px solid var(--shk-rot); }
.reihe--gross .reihe__zahl { background: var(--rot-700); }

.bereichskopf__zahl {
  margin-top: var(--raum-4);
  font-size: var(--text-sm); color: var(--farbe-text-leise);
  font-variant-numeric: tabular-nums;
}

/* --- Glossarnavigation ---------------------------------------------------- */
.alphabet {
  display: flex; flex-wrap: wrap; gap: var(--raum-1);
  position: sticky; top: 4.75rem; z-index: 10;
  padding: var(--raum-3) 0;
  margin-bottom: var(--raum-8);
  background: rgb(255 255 255 / .94);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--farbe-linie);
}
.alphabet__buchstabe {
  display: grid; place-items: center;
  min-width: 2rem; height: 2rem;
  border-radius: var(--radius-sm);
  font-size: var(--text-sm); font-weight: 600;
  color: var(--farbe-link); text-decoration: none;
}
.alphabet__buchstabe:hover { background: var(--blau-50); }

/* Auf schmalen Schirmen bliebe die klebende Leiste sonst dreizeilig stehen
   und naehme den halben Bildschirm ein - hier laeuft sie in einer Zeile. */
@media (max-width: 40rem) {
  .alphabet {
    flex-wrap: nowrap; overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .alphabet::-webkit-scrollbar { display: none; }
  .alphabet__buchstabe { flex: 0 0 auto; }

  /* Nachschlagen statt Blaettern: Bild links, Begriff rechts. Hochkant
     uebereinander waere die Seite sonst ueber neuntausend Pixel lang. */
  .video--glossar {
    display: grid;
    grid-template-columns: 9.5rem 1fr;
    align-items: stretch;
  }
  .video--glossar .video__start {
    aspect-ratio: auto;
    height: 100%; min-height: 5.25rem;
  }
  .video--glossar .video__text {
    display: flex; flex-direction: column; justify-content: center;
    padding: var(--raum-3);
  }
  /* Der grosse Abspielknopf wuerde das kleine Bild zudecken */
  .video--glossar .video__knopf {
    width: 2.25rem; height: 2.25rem; font-size: .8rem;
  }
  .video--glossar .glossar__marke {
    top: var(--raum-1); left: var(--raum-1);
    width: 1.375rem; height: 1.375rem;
    font-size: var(--text-xs);
  }
  /* Zwei Zeilen Titel halten die Karten auf gleicher Hoehe */
  .video--glossar .video__titel {
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
  }
}

/* Glossarkarten stehen in einem durchgehenden Raster - schmalere Spalten,
   damit mehr Begriffe gleichzeitig zu sehen sind. */
.videoraster--glossar {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
  gap: var(--raum-5);
}

/* Sprungziel der Alphabetleiste; der Abstand haelt die Karte unter der
   klebenden Leiste frei. */
.video--glossar { scroll-margin-top: 9rem; }
.video--glossar .video__text { padding: var(--raum-3) var(--raum-4) var(--raum-4); }

/* Das Nachschlagewort fuehrt, der Videotitel erklaert nur noch */
.glossar__begriff {
  font-size: var(--text-base); font-weight: 700;
  letter-spacing: -0.01em; line-height: 1.25;
}
.video--glossar .video__titel {
  margin-top: var(--raum-1);
  font-size: var(--text-xs); font-weight: 400;
  color: var(--farbe-text-leise);
}

/* Buchstabe als Ecke auf dem Vorschaubild */
.glossar__marke {
  position: absolute; top: var(--raum-2); left: var(--raum-2); z-index: 1;
  display: grid; place-items: center;
  width: 1.75rem; height: 1.75rem;
  border-radius: var(--radius-sm);
  background: var(--shk-rot); color: #fff;
  font-size: var(--text-sm); font-weight: 700; line-height: 1;
  box-shadow: var(--schatten);
}
/* Buchstaben ohne Video bleiben sichtbar, damit die Lücken auffallen */
.alphabet__buchstabe--leer { color: var(--grau-300); cursor: default; }

/* --- Einwilligung vor dem ersten Video ------------------------------------ */
.einwilligung {
  display: flex; flex-direction: column; gap: var(--raum-3);
  /* Mindestens so hoch wie das Vorschaubild, darf aber mitwachsen –
     bei schmalen Karten passt der Text sonst nicht hinein. */
  min-height: min(56.25cqw, 14rem);
  padding: var(--raum-5);
  background: var(--grau-900); color: var(--grau-200);
  justify-content: center;
}
.einwilligung__text { font-size: var(--text-sm); }
.einwilligung__merken {
  display: flex; align-items: center; gap: var(--raum-2);
  font-size: var(--text-xs); color: var(--grau-400);
  cursor: pointer;
}
.einwilligung__merken input { accent-color: var(--shk-rot); }
.einwilligung__wahl { display: flex; flex-wrap: wrap; gap: var(--raum-2); margin: 0; }
.einwilligung__wahl .knopf { padding: var(--raum-2) var(--raum-4); }
.einwilligung .knopf--leise {
  background: transparent; color: #fff; border-color: rgb(255 255 255 / .3);
}
.einwilligung .knopf--leise:hover { background: rgb(255 255 255 / .12); color: #fff; }
.einwilligung__fuss { margin: 0; font-size: var(--text-xs); }
.einwilligung__fuss a { color: var(--grau-400); }

/* --- Dialog für die Datenschutz-Einstellungen ----------------------------- */
.dsdialog {
  width: min(34rem, calc(100vw - 2rem));
  max-height: calc(100dvh - 2rem);
  /* margin:auto zentriert den modalen Dialog zuverlässig in allen Browsern */
  margin: auto;
  padding: var(--raum-8);
  border: 0; border-radius: var(--radius-lg);
  box-shadow: var(--schatten-lg);
  color: var(--farbe-text);
}
.dsdialog::backdrop { background: rgb(15 23 42 / .55); }
.dsdialog h2 { font-size: var(--text-xl); margin-bottom: var(--raum-4); }
.dsdialog__lage {
  font-size: var(--text-sm); color: var(--farbe-text-leise);
  margin-bottom: var(--raum-6);
}
.dsdialog__lage code {
  padding: .1em .3em; background: var(--grau-100);
  border-radius: var(--radius-sm); font-size: .95em;
}
.dsdialog__schalter {
  display: flex; gap: var(--raum-3);
  padding: var(--raum-4);
  border: 1px solid var(--farbe-linie); border-radius: var(--radius);
  cursor: pointer;
}
.dsdialog__schalter:hover { border-color: var(--blau-300); background: var(--blau-50); }
.dsdialog__schalter input { margin-top: .2rem; accent-color: var(--shk-blau); }
.dsdialog__schalter strong { display: block; margin-bottom: var(--raum-1); }
.dsdialog__schalter span { font-size: var(--text-sm); color: var(--farbe-text-leise); }
.dsdialog__wahl {
  display: flex; flex-wrap: wrap; gap: var(--raum-3);
  margin-top: var(--raum-6);
}