/* DI YouTube-Galerie (Marco Linke gemeinsam mit Claude, 21.09.2026) */
.di-yt{--di-yt-akzent:#e75151;--di-yt-text:#26282d;width:100%;max-width:100%}
.di-yt .di-yt-reiter{display:flex;flex-wrap:wrap;gap:6px 14px;margin:0 0 14px;padding:0}
.di-yt .di-yt-reiter button{background:none;border:0;border-bottom:2px solid transparent;border-radius:0;padding:4px 2px;margin:0;font:inherit;line-height:1.4;color:var(--di-yt-text);cursor:pointer}
.di-yt .di-yt-reiter button[aria-selected="true"]{border-bottom-color:var(--di-yt-akzent);font-weight:600}
.di-yt .di-yt-reiter button:hover{color:var(--di-yt-akzent)}
.di-yt .di-yt-tafel[hidden]{display:none}
.di-yt .di-yt-pfeil{display:block;width:44px;height:26px;margin:0 auto;padding:0;border:0;border-radius:6px;background:transparent;color:var(--di-yt-text);cursor:pointer;line-height:0}
.di-yt .di-yt-pfeil svg{width:22px;height:22px;stroke:currentColor;margin:2px auto}
.di-yt .di-yt-pfeil:hover:not(:disabled),.di-yt .di-yt-pfeil:focus-visible{color:var(--di-yt-akzent)}
.di-yt .di-yt-pfeil:disabled{opacity:.25;cursor:default}
.di-yt .di-yt-fenster{overflow-y:auto;overflow-x:hidden;scroll-snap-type:y mandatory;scrollbar-width:none;-ms-overflow-style:none;overscroll-behavior:contain}
.di-yt .di-yt-fenster::-webkit-scrollbar{display:none}
.di-yt ul.di-yt-liste{position:relative;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin:0!important;padding:0!important;list-style:none!important;line-height:normal}
.di-yt ul.di-yt-liste>li{margin:0!important;padding:0!important;list-style:none!important;scroll-snap-align:none}
.di-yt ul.di-yt-liste>li:nth-child(odd){scroll-snap-align:start}
.di-yt ul.di-yt-liste>li::before{content:none}
.di-yt a.di-yt-video{position:relative;display:block;aspect-ratio:16/9;overflow:hidden;border-radius:8px;background:#000}
.di-yt a.di-yt-video img{display:block;width:100%;height:100%;object-fit:cover;margin:0;padding:0;border:0;transition:transform .3s ease}
.di-yt a.di-yt-video:hover img,.di-yt a.di-yt-video:focus-visible img{transform:scale(1.04)}
.di-yt a.di-yt-video:focus-visible{outline:3px solid var(--di-yt-akzent);outline-offset:2px}
.di-yt .di-yt-play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none}
.di-yt .di-yt-play::before{content:"";width:56px;height:56px;border-radius:50%;background:rgba(0,0,0,.62);transition:background .2s ease,transform .2s ease}
.di-yt .di-yt-play::after{content:"";position:absolute;width:0;height:0;margin-left:5px;border-style:solid;border-width:10px 0 10px 17px;border-color:transparent transparent transparent #fff}
.di-yt a.di-yt-video:hover .di-yt-play::before,.di-yt a.di-yt-video:focus-visible .di-yt-play::before{background:var(--di-yt-akzent);transform:scale(1.08)}
.di-yt .di-yt-titel{display:block;margin-top:8px;height:2.7em;overflow:hidden;font-size:.95em;line-height:1.35;color:var(--di-yt-text)}
.di-yt .di-yt-leer{margin:0;padding:12px 0}
@media (max-width:600px){.di-yt ul.di-yt-liste{gap:10px}.di-yt .di-yt-play::before{width:40px;height:40px}.di-yt .di-yt-play::after{margin-left:4px;border-width:7px 0 7px 12px}.di-yt .di-yt-titel{font-size:.85em}}
@media (prefers-reduced-motion:reduce){.di-yt a.di-yt-video img,.di-yt .di-yt-play::before{transition:none}}