/* Cover-Mosaik */
.mosaik-seite h1{max-width:22ch}
.mosaik-rahmen{max-width:1400px; margin:clamp(20px,3vw,34px) auto 0; padding:0 clamp(12px,2vw,24px)}
.mosaik-buehne{border-radius:var(--radius); padding:clamp(10px,1.4vw,18px); box-shadow:8px 8px 0 var(--rot-flae)}
.mosaik{display:grid; grid-template-columns:repeat(var(--sp,8),minmax(0,1fr)); grid-template-rows:repeat(var(--zl,5),auto); gap:clamp(3px,.45vw,6px)}
.mk{position:relative; display:block; width:100%; height:100%; min-width:0; min-height:0; overflow:hidden; border-radius:4px; background:#2a2622;
  animation:mk-rein .55s cubic-bezier(.2,.7,.2,1) both; animation-delay:var(--d,0ms)}
.mk-gross{border-radius:6px}
.mk img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; transition:transform .35s ease, filter .35s ease}
.mk.mk-leer img{visibility:hidden}
.mk.mk-leer::before{content:""; position:absolute; inset:22%; border-radius:50%; background:radial-gradient(circle,#E34554 0 18%,#111 19% 100%)}
.mk-info{position:absolute; left:0; right:0; bottom:0; padding:22px 8px 7px; display:flex; flex-direction:column; gap:1px;
  background:linear-gradient(transparent,rgba(0,0,0,.82)); color:var(--creme); font-size:.72rem; line-height:1.25; opacity:0; transform:translateY(6px); transition:opacity .2s ease, transform .2s ease}
.mk-info b{font-weight:700} .mk-info i{font-style:normal; opacity:.8}
.mk-gross .mk-info{font-size:.9rem; padding:30px 12px 10px}
.mk:hover img, .mk:focus-visible img{transform:scale(1.06); filter:brightness(1.08)}
.mk:hover .mk-info, .mk:focus-visible .mk-info{opacity:1; transform:none}
.mk:focus-visible{outline:3px solid var(--rot); outline-offset:2px}
@keyframes mk-rein{from{opacity:0; transform:scale(.6) rotate(-6deg)} to{opacity:1; transform:none}}
.mosaik-leiste{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px 20px; margin-top:clamp(12px,1.4vw,18px)}
.mosaik-unterschrift{margin:0; color:var(--creme); display:flex; flex-direction:column; gap:2px}
.mosaik-unterschrift b{font-family:"Caveat",cursive; font-size:1.7rem; color:var(--rot-hell); line-height:1}
.mosaik-unterschrift span{font-size:.8rem; letter-spacing:.08em; text-transform:uppercase; color:var(--grau-hell)}
.mosaik-knoepfe{display:flex; flex-wrap:wrap; align-items:center; gap:10px 18px}
.mosaik-teilen{background:none; border:0; padding:6px 0; color:var(--creme); font:600 .9rem var(--sans); text-decoration:underline; text-underline-offset:4px; cursor:pointer}
.mosaik-neu{border:0; cursor:pointer; font-family:var(--sans)}
.mosaik-notiz{margin-top:1.6em; color:var(--grau); max-width:60ch}
@media (prefers-reduced-motion:reduce){.mk{animation:none}.mk img,.mk-info{transition:none}}
/* Auswahl Genre und Jahrzehnt: Direktauswahl unter der Leiste mit „Neues Mosaik“ */
.mosaik-filter{display:flex; flex-direction:column; gap:8px; margin-top:clamp(12px,1.4vw,16px); padding-top:clamp(12px,1.4vw,16px); border-top:1px solid rgba(242,227,196,.15)}
.mf-zeile{display:flex; flex-wrap:wrap; align-items:center; gap:6px}
.mf-label{font-size:.72rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--rot-hell); min-width:6.5em}
.mf-zeile button{font:600 .8rem/1 var(--sans); color:var(--creme); background:transparent; border:1.5px solid rgba(242,227,196,.35); border-radius:999px; padding:6px 11px; cursor:pointer; transition:background .15s, border-color .15s, color .15s}
.mf-zeile button:hover:not(:disabled){border-color:var(--creme)}
.mf-zeile button[aria-pressed="true"]{background:var(--rot); border-color:var(--rot); color:#fff}
.mf-zeile button:disabled{opacity:.3; cursor:default}
.mf-zeile button:focus-visible{outline:2px solid var(--creme); outline-offset:2px}
@media (max-width:560px){.mf-label{min-width:100%}}