/* Seite „Clips“ (01.11.): alle Twitch-Clips mit Filtern. Farben, Schriften, Kopf und Knöpfe kommen aus style.css. */
.clips-kopf{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px 56px;align-items:end}
.clips-kopf .ueber{display:block;margin-bottom:12px;font:500 15px var(--text-schrift);color:var(--leise)}
.clipseite h1{margin:0;font:800 clamp(38px,4.6vw,72px)/1.02 var(--anzeige);letter-spacing:-.03em}
.clips-kopf .vorspann{margin:0;max-width:52ch;color:#c3c8ce}

.clip-filter{display:grid;grid-template-columns:minmax(220px,2fr) repeat(auto-fit,minmax(150px,1fr));gap:12px;padding:16px;border:1px solid var(--linie);border-radius:12px;background:var(--holz)}
.clip-filter{position:relative}
.clip-filter::before{content:"";position:absolute;left:16px;top:-1px;width:48px;height:2px;background:var(--akzent)}
.clip-filter label{display:grid;gap:6px;font:600 13px var(--text-schrift);color:var(--akzent)}
.clip-filter label[hidden]{display:none}
.clip-filter input,.clip-filter select{width:100%;min-height:44px;padding:0 12px;border:1px solid var(--linie);border-radius:8px;background:var(--nacht);color:var(--text);font:500 15px var(--text-schrift);color-scheme:dark}
.clip-filter input:focus-visible,.clip-filter select:focus-visible{outline:2px solid var(--akzent);outline-offset:1px}
.clip-zahl{margin:22px 0 14px;font:500 14px var(--mono);color:var(--akzent)}

.clip-raster{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:24px 18px;padding:0;list-style:none}
.clip-karte{display:block;width:100%;padding:0;border:0;background:none;color:var(--text);text-align:left}
.clip-bild{position:relative;display:block;aspect-ratio:16/9;border-radius:10px;overflow:hidden;background:var(--holz2);outline:1px solid var(--linie);outline-offset:-1px;transition:outline-color .2s}
.clip-bild img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .35s cubic-bezier(.16,1,.3,1)}
.clip-karte:hover .clip-bild{outline-color:var(--akzent)}
.clip-karte:hover .clip-bild img{transform:scale(1.04)}
.clip-dauer{position:absolute;right:8px;bottom:8px;padding:2px 6px;border-radius:4px;background:#000c;font:500 12px var(--mono);color:#fff}
.clip-text{display:block;padding:10px 2px 0}
.clip-text strong{display:block;font:600 16px/1.3 var(--text-schrift);overflow-wrap:anywhere}
.clip-text small{display:block;margin-top:4px;font:500 13px/1.45 var(--text-schrift);color:var(--leise)}
#mehr{display:block;margin:30px auto 0}
#mehr[hidden]{display:none}
.clip-hinweis{margin-top:34px;font-size:14px;color:var(--leise)}
.clip-hinweis a{color:var(--akzent)}

/* Twitch-Player im Fenster, 16:9 – Schließen unter dem Bild, damit nichts den Player verdeckt */
.twitch-clip{width:min(960px,calc(100vw - 32px));margin:auto;padding:0;border:1px solid var(--linie);border-radius:14px;background:#000;color:var(--text);overflow:hidden}
.twitch-clip::backdrop{background:#000d}
.clip-player{aspect-ratio:16/9;background:#000}
.clip-player iframe{display:block;width:100%;height:100%;border:0}
.d-text{display:flex;align-items:center;gap:6px 22px;flex-wrap:wrap;padding:10px 16px 12px}
.d-text p{flex:1 1 260px;font:600 15px var(--text-schrift)}

@media (max-width:700px){
  .clips-kopf{grid-template-columns:1fr}
  .clip-filter{grid-template-columns:1fr 1fr}
  .clip-filter .f-suche{grid-column:1/-1}
  .clip-raster{grid-template-columns:1fr}
}