/* Mobiles Menü, Breakpoints, Reduced-Motion, Fokus.
   ⚠ MUSS ZULETZT GELADEN WERDEN. Bei gleicher Spezifität gewinnt in CSS die
   zuletzt geladene Regel — käme diese Datei vor sections.css, würden die */

.mobile-menu{display:none;}

/*   Die Nummer wird jetzt in layout.css generell ausgeblendet — der Grund und die
   Messwerte stehen dort. Ein breitenabhängiges Ausblenden hätte keinen Zweck, */

/* ═══ ≤1120px — Menü klappt aufs Burger-Symbol (6 Menüpunkte) ══════════ */
@media(max-width:1120px){
  .nav-links{display:none;}
  .burger{display:inline-flex;}

  /* Bei ausgeblendeter Navigation ist die mittlere Rasterspur leer — beide
     Spaltenabstände würden aber weiter berechnet und 2x30px verschenken. */
  .nav{grid-template-columns:minmax(0,1fr) auto;column-gap:24px;}
  .nav > .nav-cta{grid-column:2;}
  /* inset oben = Höhe der Kopfzeile (min-height in layout.css).
     Wird die Kopfzeilenhöhe geändert, muss dieser Wert mitgeführt werden. */
  .mobile-menu{
    display:none;position:fixed;inset:78px 0 0;z-index:49;
    background:var(--mist);padding:26px;flex-direction:column;gap:6px;overflow-y:auto;
  }
  .mobile-menu.open{display:flex;}
  .mobile-menu a{padding:.9em .4em;font-size:var(--t-md);font-weight:600;border-bottom:var(--hairline);}
  .mobile-menu .btn{margin-top:14px;justify-content:center;}
}

/* ═══ ≤980px — zweispaltige Bereiche werden einspaltig ═════════════════ */
@media(max-width:980px){

  /* ⚠ WICHTIG: Das Raster muss hier wirklich auf EINE Spalte zusammenfallen,
     nicht nur per grid-column überspannt werden. Sonst bleiben zwölf Spalten
     mit ELF Zwischenräumen à 24px stehen = 264px Mindestbreite. Im Innenraum
     der Kontaktkarte (bei 320px nur 224px breit) sprengen allein die */
  .grid12{grid-template-columns:minmax(0,1fr);}

  .hero-copy,
  .hero-visual,
  .bkv-copy,
  .bkv-media,
  .about-photo,
  .about-copy,
  .contact-intro,
  .contact-channels{grid-column:1 / -1;}

  .hero-visual{max-width:420px;}
  .about-photo{max-width:400px;order:-1;}
  .bkv-media{max-width:620px;}

  /* Schwerpunkte: Ordnungszahl bleibt links, Text darunter zusammen */
  .fitem{grid-template-columns:minmax(64px,auto) minmax(0,1fr);}
  .fitem-body{grid-column:2;}

  /* Zeitachse wird senkrecht: waagerechte Linie aus, senkrechte an */
  .timeline{grid-template-columns:1fr;gap:0;padding-top:0;}
  .timeline::before{
    left:4px;right:auto;top:8px;bottom:8px;width:1px;height:auto;
    background:linear-gradient(180deg,
      rgb(var(--amber-rgb) / .55) 0%,
      rgb(var(--amber-rgb) / .55) 90%,
      rgb(var(--amber-rgb) / 0) 100%);
  }
  .tstep{padding:0 0 34px 34px;}
  .tstep:last-child{padding-bottom:0;}
  .tstep::before{top:10px;left:0;}
  .tstep .sn{margin-bottom:10px;}

  /* Videokarten: ZWEI Spalten als Zwischenstufe, nicht sofort eine.
     Bei 980px sind das 452px je Karte, bei 800px noch 362px — beides trägt */
  .video-grid{grid-template-columns:repeat(2,minmax(0,1fr));}

  /* Der Kopf steht ab hier untereinander: Überschrift, dann Rhythmus und
     Button. Ohne das bliebe die rechte Gruppe unten rechts hängen, während */
  .video-head{display:block;}
  .video-aside{margin-top:26px;}
  .yt-rhythmus{max-width:26rem;}

  .social-row{justify-content:center;text-align:center;}
}

/* ═══ ≤768px — bKV-Nutzenpunkte einspaltig ═════════════════════════════
   Das 2x2-Raster bleibt bis 768px erhalten. Darunter wird die Textspalte je */
@media(max-width:768px){
  .bkv-benefits{grid-template-columns:minmax(0,1fr);}

  /* Videokarten einspaltig über die volle Bahnbreite. Bei 768px wären zwei
     Spalten je 346px breit — der Titel „Berufsunfähigkeit: Wann leistet die */
  .video-grid{grid-template-columns:minmax(0,1fr);}
  /* Der Hinweisblock nimmt die volle Breite, sonst steht rechts daneben ein
     leerer Streifen. */
  .yt-rhythmus{max-width:none;}
  .video-aside{align-items:stretch;}
  .video-aside .btn{justify-content:center;}
}

/* ═══ ≤680px — kompakter Markenblock ═══════════════════════════════════
   Der Name „Andreas Wüstenberg" darf nicht umbrechen und ist rund 172px breit; */
@media(max-width:680px){
  .nav{column-gap:14px;}
  .brand{gap:.6em;}
  .brand-logo{height:38px;}
}

/* ═══ ≤560px — kompakt ═════════════════════════════════════════════════ */
@media(max-width:560px){
  body{font-size:16px;}

  /* Optische Achse enger stellen. Das ist kein Notbehelf, sondern genau ihr
     Zweck: opsz beschreibt, für welchen Schriftgrad ein Schnitt gezeichnet ist. */
  :root{
    --vf-display:"opsz" 48,"wght" 300;
    --vf-accent :"opsz" 48,"wght" 800;
  }
  .nav-cta .btn{display:none;}
  .nav .brand-text span{display:none;}
  .wrap{padding:0 18px;}
  .hero{padding:36px 0 var(--space-section);}
  .photo-badge{left:0;right:0;max-width:none;}
  .video-head{align-items:flex-start;}
  .fitem{grid-template-columns:1fr;gap:12px;}
  .fitem-body{grid-column:1;}
  /* Keine eigene Größe für die Ordnungszahl — --t-num klammert selbst auf
     2.75rem herunter. Ein Extrawert hier wäre genau die Art Einzelfall, */
  .foot-cols{gap:36px;}
}

/* ═══ Barrierefreiheit ═════════════════════════════════════════════════ */
@media(prefers-reduced-motion:reduce){
  *{scroll-behavior:auto !important;}
  .reveal{opacity:1 !important;transform:none !important;transition:none !important;}
  .btn,.fitem,.vcard,.sic,.play{transition:none !important;}
}
:focus-visible{outline:3px solid var(--amber);outline-offset:2px;border-radius:var(--r-sm);}

/* Hinweis beim ersten Besuch: unter 760px untereinander statt nebeneinander.
   Die Knöpfe stehen dann in voller Breite — auf einem Telefon ist das der */
@media (max-width:760px){
  .ebalken-inner{grid-template-columns:1fr;}
  .ebalken-aktionen{grid-column:1;}
  .ebalken-aktionen .btn{flex:1 1 auto;justify-content:center;}
}