/* ============================================================
   Mediathek — Video-Seite (Fassade). Erbt die impruf-Blog-Optik.
   Nur auf dem mediathek-Template geladen (@auto). AURA-Spec 03.09.2026.
   ============================================================ */

/* Hero */
.mediathek-hero { padding-top: 11rem; padding-bottom: 4rem; }
.mediathek-hero-inner { max-width: 61.8%; }
.mediathek-hero .blog-tag { margin-bottom: 1rem; }
.mediathek-hero h1 { margin-bottom: 1.5rem; }
.mediathek-hero .lead { color: var(--main-shade-600); font-size: 1.25rem; line-height: 1.6; }
@media (max-width: 992px) { .mediathek-hero-inner { max-width: 100%; } }
@media (max-width: 688px)  { .mediathek-hero { padding-top: 9rem; } }

/* Sektion */
.mediathek-section { padding-top: 0; padding-bottom: 5rem; }
.mediathek-section.bg-light-band { background: var(--main-shade-50); padding-top: 5rem; }
.mediathek-section-head { max-width: 61.8%; margin-bottom: 3rem; }
.mediathek-section-head .blog-tag { margin-bottom: 1rem; }
.mediathek-section-head h2 { margin-bottom: .75rem; }
.mediathek-section-head .sub { color: var(--main-shade-600); font-size: .95rem; line-height: 1.7; }
@media (max-width: 992px) { .mediathek-section-head { max-width: 100%; } }

/* Grid 3 / 2 / 1 */
.mediathek-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; width: 100%; }
@media (max-width: 992px) { .mediathek-grid { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; } }
@media (max-width: 688px)  { .mediathek-grid { grid-template-columns: 1fr; } }

/* Card (erbt .blog-card-Anmutung) */
.mediathek-card {
  display: flex; flex-direction: column;
  background: var(--main-white);
  border-radius: var(--border-round);
  overflow: hidden;
  border: 1px solid var(--main-shade-100);
  transition: transform .3s ease, box-shadow .3s ease;
}
.mediathek-card:hover { transform: translateY(-4px); box-shadow: 0 12px 32px rgba(0,0,0,.06); }

/* Thumbnail-Fassade (Klick-Trigger = echter <button>) */
.mediathek-thumb {
  position: relative; display: block; width: 100%; padding: 0; border: 0;
  aspect-ratio: 16 / 9;
  background: var(--main-shade-100);
  overflow: hidden; cursor: pointer;
}
.mediathek-thumb img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; transition: transform .5s ease;
}
.mediathek-card:hover .mediathek-thumb img { transform: scale(1.04); }
.mediathek-thumb::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(17,17,17,0) 55%, rgba(17,17,17,.35) 100%);
}

/* Play-Ring (Marken-Signatur) */
.mediathek-play {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 2;
  width: 4.5rem; height: 4.5rem; border-radius: var(--border-full);
  display: flex; align-items: center; justify-content: center;
  background: rgba(17,17,17,.55); border: 2px solid rgba(255,255,255,.85);
  backdrop-filter: blur(2px);
  transition: background .25s ease, border-color .25s ease, transform .25s ease;
}
.mediathek-play svg { width: 1.6rem; height: 1.6rem; margin-left: .2rem; fill: #fff; }
.mediathek-card:hover .mediathek-play,
.mediathek-thumb:focus-visible .mediathek-play {
  background: var(--main-color); border-color: var(--main-color);
  transform: translate(-50%, -50%) scale(1.06);
}
@media (max-width: 688px) { .mediathek-play { width: 3.75rem; height: 3.75rem; } }

/* Fokusring (schlägt den globalen :focus{outline:none!important} in index.css:112) */
.mediathek-thumb:focus-visible {
  outline: 3px solid var(--main-color) !important;
  outline-offset: 3px;
  box-shadow: 0 0 0 6px rgba(255,255,255,.9);
}

/* Card-Content */
.mediathek-card-content { padding: 1.25rem 1.5rem 1.5rem; display: flex; flex-direction: column; gap: .5rem; flex: 1; min-width: 0; }
.mediathek-card-content h3 {
  font-size: 1.05rem; line-height: 1.35; font-weight: 700; overflow-wrap: break-word;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.mediathek-meta { display: flex; align-items: center; gap: .5rem; margin-top: auto; padding-top: .35rem; font-size: .75rem; color: var(--main-shade-600); }
.mediathek-meta svg { width: .85rem; height: .85rem; flex: none; }

/* Geladen-Zustand: iframe ersetzt den Button-Inhalt */
.mediathek-thumb.is-playing { cursor: default; }
.mediathek-thumb.is-playing::after,
.mediathek-thumb.is-playing .mediathek-play { display: none; }
.mediathek-iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
  .mediathek-card, .mediathek-card:hover, .mediathek-thumb img, .mediathek-play { transition: none; }
  .mediathek-card:hover { transform: none; box-shadow: 0 4px 16px rgba(0,0,0,.06); }
  .mediathek-card:hover .mediathek-thumb img { transform: none; }
}