/* YouTube-Einbettung mit Klick-Freigabe (05.11.2026, überarbeitet: sieht von Anfang an wie ein YouTube-Video aus).
   Vorschaubild liegt lokal (assets/bilder), Titel/Kanal/Play-Knopf im YouTube-Stil; erst der Klick lädt das iframe. */
.yt-embed { position: relative; aspect-ratio: 4 / 3; width: 100%; border-radius: 14px; overflow: hidden; background: #000;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .45); }
.yt-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
.yt-karte { position: absolute; inset: 0; display: block; width: 100%; height: 100%; padding: 0; border: 0; background: #000; cursor: pointer; text-align: left; color: #fff; font: inherit; }
.yt-embed.is-geladen .yt-karte { display: none; }
.yt-bild { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.yt-kopf { position: absolute; left: 0; right: 0; top: 0; display: flex; align-items: center; gap: 12px; padding: 14px 16px 34px;
  background: linear-gradient(180deg, rgba(0, 0, 0, .72), rgba(0, 0, 0, 0)); font-family: Roboto, Arial, sans-serif; }
.yt-avatar { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--ci-bronze, #8a5a2b); color: #fff; font-size: 14px; font-weight: 600; }
.yt-meta { display: flex; flex-direction: column; min-width: 0; }
.yt-titel { font-size: clamp(15px, 1.6vw, 18px); line-height: 1.3; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.yt-kanal { font-size: 13px; color: rgba(255, 255, 255, .82); margin-top: 2px; }
.yt-play { position: absolute; left: 50%; top: 50%; width: 68px; height: 48px; transform: translate(-50%, -50%); }
.yt-play svg { width: 100%; height: 100%; display: block; }
.yt-play-bg { fill: #f00; transition: fill .15s; }  /* immer rot: sofort als YouTube erkennbar (Adrian 05.11.) */
.yt-karte:hover .yt-play-bg, .yt-karte:focus-visible .yt-play-bg { fill: #cc0000; }
.yt-karte:focus-visible { outline: 3px solid var(--ci-gold-l, #e7cfa6); outline-offset: -3px; }
.yt-marke { position: absolute; right: 12px; bottom: 12px; padding: 7px 12px; border-radius: 4px; background: rgba(0, 0, 0, .78); color: #fff;
  font-family: Roboto, Arial, sans-serif; font-size: 13px; }
.yt-marke b { font-weight: 700; }
.yt-hinweis { margin: 12px 0 0; font-size: var(--fs-small, 15px); color: rgba(241, 233, 220, .72); text-align: center; }
.yt-hinweis a { color: var(--ci-sand, #f1e9dc); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 560px) { .yt-kopf { padding: 10px 12px 26px; gap: 10px; } .yt-avatar { width: 32px; height: 32px; font-size: 12px; } .yt-play { width: 56px; height: 40px; } }
@media (prefers-reduced-motion: reduce) { .yt-play-bg { transition: none; } }