/* ADR-0011 — Click-to-Embed-Videokomponente.
 * Stil-Tokens (--pcw-ink, --pcw-bg-raised, --pcw-border, --pcw-accent,
 * --pcw-radius-md, --pcw-space-1..6, --pcw-text-sm/base) werden vom
 * Design-System gesetzt; die hartkodierten Fallbacks sind nüchtern
 * und kontrastsicher, bis das Systemstylesheet (Terminal D1) landet. */
.pcw-video-card {
  display: block;
  margin: 1.5rem 0;
  padding: 0;
  background: var(--pcw-bg-raised, #ffffff);
  color: var(--pcw-ink, #1c1a16);
  border: 1px solid var(--pcw-border, #e6e4df);
  border-radius: var(--pcw-radius-md, 6px);
  overflow: hidden;
}
.pcw-video-card .pcw-video-poster {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  margin: 0;
  border: 0;
  background: var(--pcw-bg, #fafaf7);
  cursor: pointer;
  overflow: hidden;
  /* 16:9 erzwingt kein Höhenraster — Bild darf das selbst liefern.
   * min-aspect-ratio verhindert nur das vollständige Zusammenfallen,
   * wenn das Poster (noch) nicht geladen ist. */
  aspect-ratio: 16 / 9;
  font: inherit;
  color: inherit;
  text-align: left;
}
.pcw-video-card .pcw-video-poster img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 0;
  margin: 0;
}
.pcw-video-card .pcw-video-play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3rem;
  line-height: 1;
  color: var(--pcw-bg, #ffffff);
  background: rgba(0, 0, 0, 0.32);
  transition: background-color 120ms ease;
}
.pcw-video-card .pcw-video-poster:hover .pcw-video-play,
.pcw-video-card .pcw-video-poster:focus-visible .pcw-video-play {
  background: rgba(0, 0, 0, 0.5);
}
.pcw-video-card .pcw-video-poster:focus-visible {
  outline: 2px solid var(--pcw-accent, #1f6f5c);
  outline-offset: 2px;
}
.pcw-video-card iframe {
  display: block;
  width: 100%;
  aspect-ratio: 16:9;
  border: 0;
  margin: 0;
}
.pcw-video-card figcaption {
  padding: var(--pcw-space-4, 1rem) var(--pcw-space-5, 1.25rem);
}
.pcw-video-card .pcw-video-title {
  margin: 0 0 0.25rem 0;
  font-size: var(--pcw-text-base, 1rem);
  font-weight: 600;
  line-height: 1.3;
}
.pcw-video-card .pcw-video-meta {
  margin: 0 0 0.5rem 0;
  font-size: var(--pcw-text-sm, 0.875rem);
  color: var(--pcw-ink, #1c1a16);
  opacity: 0.78;
}
.pcw-video-card .pcw-video-summary {
  margin: 0 0 0.75rem 0;
  font-size: var(--pcw-text-sm, 0.875rem);
  line-height: 1.5;
}
.pcw-video-card .pcw-video-notice {
  margin: 0;
  padding: var(--pcw-space-3, 0.75rem);
  background: rgba(180, 106, 42, 0.06);
  border-left: 3px solid #b46a2a;
  font-size: var(--pcw-text-sm, 0.875rem);
  line-height: 1.4;
  border-radius: 0 3px 3px 0;
}
.pcw-video-card .pcw-video-links {
  margin: 0.5rem 0 0 0;
  font-size: var(--pcw-text-sm, 0.875rem);
  /* Die Zeile fuehrt zwei bis drei Bedienelemente nebeneinander. Sie
     brauchen Abstand, sobald sie 44px hoch sind, sonst kleben sie
     aneinander und der Trenner ' · ' sitzt schief. */
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 0.5rem;
}
.pcw-video-card .pcw-video-links a {
  color: var(--pcw-accent, #1f6f5c);
  text-decoration: underline;
  /* Bedienelement, kein Fliesstext-Link: "Transkript" und
     "Auf YouTube ansehen" sind das, was ein Elternteil unter dem Video
     antippt. Gemessen waren 61x20px — weit unter der 44px-Regel der
     Abnahmetabelle (E2E-A11Y-008), und anders als ein Quellenlink im
     Satz faellt das nicht unter die Inline-Ausnahme von WCAG 2.5.8.
     inline-flex, weil min-height auf einem Inline-Element nicht wirkt. */
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.pcw-video-card[data-pcw-video-state="playing"] .pcw-video-poster,
.pcw-video-card[data-pcw-video-state="playing"] .pcw-video-notice,
.pcw-video-card[data-pcw-video-state="playing"] .pcw-video-summary,
.pcw-video-card[data-pcw-video-state="playing"] .pcw-video-links {
  display: none;
}
@media (prefers-reduced-motion: reduce) {
  .pcw-video-card .pcw-video-play { transition: none; }
}