/* ===========================
   overrides.css
   (nach style.css laden)
   =========================== */

/* Variablen – dürfen gerne von JS aktualisiert werden */
:root{
  --container-w: 904px;   /* Desktop-Breite */
  --nav-h: 200px;         /* Höhe der 3 Header-Kacheln (Desktop) */
  --footer-h: 46px;       /* Footer-Höhe (für container padding) */
}

/* Grundlayout: Platz für fixen Header + Footer */
#container{
  width: min(100%, var(--container-w));
  margin: 0 auto;
  padding-top: calc(var(--nav-h) + 30px);
  padding-bottom: calc(var(--footer-h) + 20px);
}

/* ---------- NAV: immer 3 Kacheln nebeneinander, gleich breit ---------- */
nav{
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: var(--container-w);
  z-index: 1000;
  background: #fff;                 /* ganzer NAV-Bereich weiß */
  display: flex;                    /* Flex statt Floats */
  gap: 0;                           /* keine Lücken */
}
nav::after{ content:""; display:block; clear:both; }

/* Direkte Kinder (B1/B2/B3) */
nav > a{
  flex: 1 1 0%;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 200px;                /* Desktop-Höhe */
  margin: 0 !important;             /* KEIN Abstand zwischen den Kacheln */
  text-decoration: none;
  color: #fff !important;           /* Text immer weiß */
  float: none !important;
  width: auto !important;
  height: auto !important;
}

/* Hintergründe der 3 Blöcke */
nav > a#l         { background: rgb(62,62,64) !important; }
nav > a.b_2_2     { background: #9e9f8a !important; }
nav > a.b_1_3     { background: #c1c2af !important; }

/* Inhaltstypo in den Kacheln */
.nav-brand,
.nav-box{
  font-family: "Lato", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size: 40px;                  /* Basisgröße */
  line-height: 1;
  color: #fff;
  text-align: center;
  letter-spacing: .5px;
}

/* MBLN¹¹ – Gewicht & Hochstellung */
.nav-brand{ font-weight: 900; }     /* Lato Black 900 */
.nav-brand sup{
  font-weight: 300;                 /* Lato Light 300 */
  font-size: .45em;
  line-height: 1;
  vertical-align: super;
  position: relative; top: -.2em;
  margin-left: 2px;
}

/* "das PROJEKT" / "der KONTAKT" */
.nav-decl{ text-transform: lowercase; font-weight: 300; }   /* Lato Light 300 */
.nav-noun{ text-transform: uppercase; font-weight: 400; margin-left: .3em; } /* Lato Regular 400 */

/* <=980px: NAV kompakter + dynamische Schriftgröße */
@media (max-width: 980px){
  nav{
    left: 0; right: 0; transform: none;
    width: auto; max-width: var(--container-w);
    margin-left: auto; margin-right: auto;
    padding: 0;
  }
  nav > a{ min-height: 130px; }
  .nav-brand, .nav-box{ font-size: clamp(28px, 3.6vw, 32px); } /* freundlich kleiner */
}

/* ---------- Seitenbereich .page: einfacher redaktioneller Block ---------- */
.page{
  max-width: 68ch;
  padding: 10px 10px 20px 10px;   /* wie gewünscht */
}
.page h1{ font-size: clamp(1.6rem, 1.2rem + 2vw, 2.1rem); line-height: 1.2; margin: 0 0 0.6em; }
.page h2{ font-size: clamp(1.2rem, 1rem + 1.2vw, 1.5rem); margin: 1.2em 0 .5em; }
.page p, .page li{ font-size: clamp(1rem, 0.95rem + .4vw, 1.125rem); line-height: 1.6; }
.page ul{ padding-left: 1.1em; }

/* ---------- VIDEOS: 3 → 2 Spalten, konstante 3:2-Ratio ---------- */
.videoContainer{
  position: relative;
  overflow: hidden;
  cursor: pointer;
  background-size: cover;
  background-position: center;
  aspect-ratio: 3 / 2;                   /* 300x200 -> 3:2 */
}
@supports not (aspect-ratio: 3 / 2){
  .videoContainer::before{
    content:""; display:block; padding-top: 66.6667%;
  }
}

/* <=980px: 2 Spalten – auch auf Smartphones */
@media (max-width: 980px){
  .videoContainer{
    float: left;
    width: calc(50% - 6px) !important;
    margin: 0 6px 6px 0 !important;
  }
  .videoContainer:nth-child(2n){ margin-right: 0 !important; }

  .videoInfo, .youTubeContainer{ float: none !important; width: 100% !important; }
  .youTubeContainer iframe{ width: 100% !important; height: auto !important; aspect-ratio: 16/9; }
}

/* Overlay deckt die gesamte Kachel ab; Play-Icon unten rechts (Padding 2px – hast du bereits gesetzt) */
.videoContainer .play,
.videoContainer .info{
  position:absolute; left:0; top:0; width:100%; height:100%; float:none;
}
.videoContainer .play{
  z-index:2;
  background-repeat: no-repeat;
  /* falls dein eigener Wert überschrieben wird, hier gern aktivieren:
     background-position: right 2px bottom 2px !important; */
}
.videoContainer .info{
  z-index:3; pointer-events:none; transition: opacity .2s ease;
  background-size: cover; background-position: center;
}
.videoContainer:hover .info{ opacity:.9; }

/* ---------- Player: direkt unter Header, fix solange offen ---------- */
#player{
  position: sticky;
  top: var(--nav-h);
  z-index: 950;
  background: #fff;
  scroll-margin-top: calc(var(--nav-h) + 10px);
  box-shadow: 0 2px 8px rgba(0,0,0,.08);
}
body.player-open #player{
  position: fixed;
  top: var(--nav-h);
  left: 50%;
  transform: translateX(-50%);
  width: min(100%, var(--container-w));
  z-index: 999;
}

/* ---------- Footer: links Copyright, rechts Impressum/Datenschutz ---------- */
.site-footer{
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 900;
  background: rgba(255,255,255,.98);
  border-top: 1px solid #e5e5e5;
  backdrop-filter: saturate(180%) blur(6px);
  font-size: 0.95rem;
}
.site-footer .footer-inner{
  width: min(100%, var(--container-w));
  margin: 0 auto;
  padding: 10px 12px;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px;
}
.site-footer .footer-left{
  float: none !important;
  text-align: left !important;
}
.site-footer .footer-right{
  float: none !important;
  margin-left: auto !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  text-align: right !important;
  white-space: nowrap;
}
.site-footer .footer-right a{ color: #868488; text-decoration: none; }
.site-footer .footer-right a:hover{ color: #c6c5c6; }
.site-footer .footer-right span[aria-hidden="true"]{ opacity:.6; }

/* Moderne Clearfixe – leere <div class="cB"> sind nicht nötig */
#container, #player #hr, #playerPadder{ display: flow-root; }

@media (max-width: 980px){
  /* Thumbnails: Fokus etwas nach oben statt exakt in der Mitte */
  .videoContainer{
    background-position: 50% 20% !important; /* X=zentriert, Y=30% (statt 50%) */
  }
  .videoContainer .info{
    background-position: 50% 20% !important; /* Overlay-Grafik deckungsgleich */
  }
}