/* ==========================================================================
   CARCHECK Berlin – Media: Übersicht, Videos, Fotos, Spiele-Übersicht
   Baut auf base.css, components.css und pages.css auf.
   ========================================================================== */

/* ---------- Übersicht: drei Bereiche ---------- */
.mhub{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem;list-style:none}
.mhub a{display:flex;flex-direction:column;height:100%;overflow:hidden;border:1px solid var(--line);border-radius:var(--r-l);background:var(--surface);color:var(--text);text-decoration:none;transition:border-color .15s}
.mhub a:hover{border-color:var(--blau-600)}
.mhub__bild{display:grid;place-items:center;aspect-ratio:16/8;color:#fff;background-color:var(--hero-bg);background-image:linear-gradient(rgba(255,255,255,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.08) 1px,transparent 1px),linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);background-size:48px 48px,48px 48px,12px 12px,12px 12px}
.mhub__bild svg{width:min(62%,15rem);height:auto;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.mhub__bild .sig{stroke:var(--signal)}
.mhub__bild .fill{fill:var(--signal);stroke:none}
.mhub__text{display:flex;flex-direction:column;gap:.35rem;padding:1.2rem 1.4rem 1.4rem}
.mhub strong{font:700 1.55rem/1.1 var(--font-display)}
.mhub__text > span{color:var(--muted)}
.mhub__anzahl{margin-top:auto;padding-top:.5rem;font-weight:700;color:var(--link)!important}
@media (max-width:900px){.mhub{grid-template-columns:1fr}.mhub__bild{aspect-ratio:16/6}}

.mabschnitt{margin-top:clamp(2.5rem,6vw,4rem)}
.mabschnitt__kopf{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:.5rem 1.5rem;margin-bottom:1.25rem}
.mabschnitt__kopf h2{margin:0}
.mabschnitt__kopf a{font-weight:700}

/* ---------- Videos ---------- */
.mvids{display:grid;grid-template-columns:repeat(auto-fill,minmax(17.5rem,1fr));gap:1.5rem 1.25rem;list-style:none}
.mvid__link{display:block;color:var(--text);text-decoration:none}
.mvid__bild{position:relative;display:block;overflow:hidden;aspect-ratio:16/9;border-radius:var(--r-m);background:var(--blau-950)}
.mvid__bild img{width:100%;height:100%;object-fit:cover;transition:transform .35s}
.mvid__link:hover .mvid__bild img{transform:scale(1.03)}
.mvid__play{position:absolute;left:50%;top:50%;display:grid;place-items:center;width:3.6rem;height:3.6rem;margin:-1.8rem 0 0 -1.8rem;border-radius:50%;background:var(--signal);box-shadow:0 6px 20px rgba(0,0,0,.35)}
.mvid__play svg{width:1.6rem;height:1.6rem;margin-left:.2rem;fill:var(--ink-on-signal)}
.mvid__dauer{position:absolute;right:.55rem;bottom:.55rem;padding:.15rem .5rem;border-radius:6px;background:rgba(10,36,64,.86);color:#fff;font:700 .95rem/1.3 var(--font-display)}
.mvid__titel{margin:.75rem 0 .2rem;font:700 1.3rem/1.15 var(--font-display)}
.mvid__link:hover .mvid__titel{color:var(--link)}
.mvid__meta{display:block;font-size:.95rem;color:var(--muted)}
.ki-hinweis{display:inline-block;margin-left:.35em;padding:.05em .55em;border:1px solid currentColor;border-radius:4px;font-size:.85em;font-weight:600;white-space:nowrap}

/* Einzelnes Video */
.mwatch{max-width:62rem}
.mwatch .video{margin:0 0 1.5rem}
.mwatch .video video{aspect-ratio:auto;max-height:78vh;background:#000}
.mwatch__text{max-width:68ch;font-size:1.12rem}
.mwatch__text p{white-space:pre-line}
.mwatch__meta{display:flex;flex-wrap:wrap;gap:.4rem 1.25rem;margin:0 0 1.25rem;padding:0;list-style:none;color:var(--muted);font-size:.98rem}
.mwatch__meta strong{color:var(--text)}

/* ---------- Fotos ---------- */
.mfotos{display:grid;grid-template-columns:repeat(auto-fill,minmax(15.5rem,1fr));gap:1.25rem 1rem;list-style:none;counter-reset:bild var(--start,0)}
.mfoto{counter-increment:bild}
.mfoto__link{position:relative;display:block;overflow:hidden;aspect-ratio:4/3;border-radius:var(--r-m);background:var(--surface-2)}
.mfoto__link img{width:100%;height:100%;object-fit:cover;transition:transform .35s}
.mfoto__link:hover img{transform:scale(1.03)}
/* Bildnummer wie in einer Fotodokumentation */
.mfoto__link::before{content:"Bild " counter(bild);position:absolute;left:.5rem;top:.5rem;z-index:1;padding:.1rem .45rem;border-radius:5px;background:rgba(10,36,64,.82);color:#fff;font:700 .85rem/1.3 var(--font-display)}
.mfoto__text{margin:.55rem 0 0;font-size:.98rem;line-height:1.4}
.mfoto__text span{display:block;margin-top:.15rem;color:var(--muted);font-size:.92rem}

.mseiten{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:2rem;list-style:none}
.mseiten a,.mseiten span{display:grid;place-items:center;min-width:2.9rem;height:2.9rem;padding:0 .8rem;border:1.5px solid var(--line-strong);border-radius:10px;font-weight:700;text-decoration:none;color:var(--text)}
.mseiten a:hover{border-color:var(--blau-600)}
.mseiten [aria-current]{background:var(--blau-800);border-color:var(--blau-800);color:#fff}

/* Großansicht */
.mlb{width:100vw;max-width:100vw;height:100vh;height:100dvh;max-height:none;margin:0;padding:0;border:0;background:rgba(6,18,32,.95);color:#fff}
.mlb::backdrop{background:rgba(6,18,32,.6)}
.mlb[open]{display:grid;grid-template-rows:1fr auto}
.mlb__buehne{display:grid;place-items:center;min-height:0;padding:3.5rem 4rem 0}
.mlb__buehne img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;border-radius:6px;box-shadow:0 18px 50px rgba(0,0,0,.5)}
.mlb__text{margin:0;padding:1rem 4rem calc(1.25rem + env(safe-area-inset-bottom));text-align:center;color:#D5E4F3}
.mlb__text strong{color:#fff;font:700 1.15rem/1.3 var(--font-display)}
.mlb button{position:absolute;display:grid;place-items:center;width:3rem;height:3rem;border:1.5px solid rgba(255,255,255,.4);border-radius:50%;background:rgba(10,36,64,.7);color:#fff;cursor:pointer}
.mlb button:hover{border-color:#fff}
.mlb button svg{width:1.4rem;height:1.4rem;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.mlb__zu{top:.75rem;right:.75rem}
.mlb__zurueck{left:.75rem;top:50%;margin-top:-1.5rem}
.mlb__vor{right:.75rem;top:50%;margin-top:-1.5rem}
.mlb :focus-visible{outline-color:#fff}
@media (max-width:640px){.mlb__buehne{padding:3.75rem .5rem 0}.mlb__text{padding-inline:1rem}.mlb__zurueck,.mlb__vor{top:auto;bottom:calc(.75rem + env(safe-area-inset-bottom));margin:0}.mlb__text{padding-bottom:4.5rem}}

/* ---------- Spiele-Übersicht ---------- */
.mspiele{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem;list-style:none}
.mspiel a{display:flex;flex-direction:column;height:100%;overflow:hidden;border:1px solid var(--line);border-radius:var(--r-l);background:var(--surface);color:var(--text);text-decoration:none}
.mspiel a:hover{border-color:var(--blau-600)}
.mspiel__bild{position:relative;display:block;overflow:hidden;aspect-ratio:3/4;background:var(--blau-950)}
.mspiel__bild img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover}
.mspiel__name{margin:0;font-size:inherit;line-height:inherit}
.mspiel__text{display:flex;flex-direction:column;gap:.35rem;padding:1.2rem 1.4rem 1.4rem;flex:1}
.mspiel strong{font:700 1.6rem/1.1 var(--font-display)}
.mspiel__text > span{color:var(--muted)}
.mspiel__los{margin-top:auto;padding-top:.6rem;font-weight:700;color:var(--link)!important}
@media (max-width:900px){.mspiele{grid-template-columns:1fr}}