/* Videos: Vorschaubild, erst mit dem Klick laedt YouTube (youtube-nocookie) */
.ar-videos { margin: 2rem 0 1.5rem; }
.ar-videos h2 { margin: 0 0 .9rem; }
.yt-liste { display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr)); align-items: start; }
.yt:not(.kurz) { grid-column: 1 / -1; max-width: 40rem; }
.yt { margin: 0; }
.yt-play { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; border: 1px solid rgba(60, 40, 20, .35);
  border-radius: 4px; background: #2b2118; box-shadow: 3px 3px 0 rgba(60, 40, 20, .25); }
.yt.kurz .yt-play { aspect-ratio: 9 / 16; }
.yt-play img { display: block; width: 100%; height: 100%; object-fit: cover; }
.yt-btn { position: absolute; left: 50%; top: 50%; width: 3.6rem; height: 3.6rem; margin: -1.8rem 0 0 -1.8rem; border-radius: 50%;
  background: #EFEAD3; border: 2px solid #2b2118; box-shadow: 2px 2px 0 rgba(0, 0, 0, .35); transition: transform .15s; }
.yt-btn::after { content: ""; position: absolute; left: 1.35rem; top: .95rem; border-style: solid; border-width: .85rem 0 .85rem 1.3rem;
  border-color: transparent transparent transparent #2b2118; }
.yt-play:hover .yt-btn, .yt-play:focus-visible .yt-btn { transform: scale(1.08); }
.yt-play:focus-visible { outline: 3px solid #b8863b; outline-offset: 3px; }
.yt iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.yt figcaption { margin-top: .5rem; font-size: .95rem; line-height: 1.4; }
.yt figcaption small { display: block; opacity: .75; font-size: .82rem; }
@media (prefers-reduced-motion: reduce) { .yt-btn { transition: none; } }
