/* DI YouTube-Galerie (Marco Linke gemeinsam mit Claude, 21.09.2026)
   Höhe und Zuschnitt werden komplett per CSS bestimmt: Das Fenster ist immer genau zwei Zeilen hoch und schneidet alles andere ab
   (overflow:hidden). Es gibt kein Scrollen mit der Maus im Fenster, das Mausrad scrollt immer die Seite. Geblättert wird nur über die Pfeile. */
.di-yt{--di-yt-akzent:#e75151;--di-yt-text:#26282d;--di-yt-gap:16px;width:100%;max-width:100%;position:relative}
.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;box-shadow:none}
.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{container-type:inline-size;position:relative;isolation:isolate}
.di-yt .di-yt-tafel[hidden]{display:none}

/* runde Pfeile mit weißem Hintergrund */
.di-yt button.di-yt-pfeil{display:flex;align-items:center;justify-content:center;width:38px;height:38px;margin:6px auto;padding:0;border:1px solid #e3e3e3;border-radius:50%;background:#fff;box-shadow:0 2px 8px rgba(0,0,0,.14);color:var(--di-yt-text);cursor:pointer;line-height:0;transition:box-shadow .2s ease,color .2s ease,opacity .2s ease}
.di-yt button.di-yt-pfeil svg{display:block;width:20px;height:20px;stroke:currentColor;margin:0}
.di-yt button.di-yt-pfeil:hover:not(:disabled),.di-yt button.di-yt-pfeil:focus-visible{color:var(--di-yt-akzent);box-shadow:0 3px 12px rgba(0,0,0,.22)}
.di-yt button.di-yt-pfeil:focus-visible{outline:2px solid var(--di-yt-akzent);outline-offset:2px}
.di-yt button.di-yt-pfeil:disabled{opacity:.35;cursor:default;box-shadow:0 1px 4px rgba(0,0,0,.08)}

/* Fenster: genau zwei Zeilen (Bildbreite 16:9), alles darüber hinaus wird abgeschnitten */
.di-yt .di-yt-fenster{overflow:hidden;overscroll-behavior:auto;contain:paint;height:calc((100cqw - var(--di-yt-gap)) / 2 * 9 / 16 * 2 + var(--di-yt-gap))}
.di-yt.di-yt-mit-titel .di-yt-fenster{height:calc(2 * ((100cqw - var(--di-yt-gap)) / 2 * 9 / 16 + 8px + 2.565em) + var(--di-yt-gap))}
.di-yt ul.di-yt-liste{position:relative;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--di-yt-gap);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;min-width:0}
.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{--di-yt-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}
	.di-yt.di-yt-mit-titel .di-yt-fenster{height:calc(2 * ((100cqw - var(--di-yt-gap)) / 2 * 9 / 16 + 8px + 2.295em) + var(--di-yt-gap))}
}
@media (prefers-reduced-motion:reduce){.di-yt a.di-yt-video img,.di-yt .di-yt-play::before,.di-yt button.di-yt-pfeil{transition:none}}