/* ============================================================
   PODAVIA — Responsive Layer
   Layout- & Typo-Regeln für Desktop → Tablet → Mobile.
   Baut auf tokens.css + components.css auf.
   ============================================================ */

/* — Layout-Helfer — */
/* sec-pad NUR vertikal setzen, damit die horizontale .container-Polsterung erhalten bleibt */
.sec-pad { padding-top: 96px; padding-bottom: 96px; }
.hero-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 64px; align-items: center; }
.split-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1.3fr 1fr; gap: 40px; align-items: start; }
.hero-media { height: 520px; }
.hero-media-sm { height: 380px; }

/* — Tablet — */
@media (max-width: 980px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr) !important; }
}

@media (max-width: 900px) {
  .hero-grid, .split-2 { grid-template-columns: 1fr; gap: 36px; }
  .hero-media { height: 360px; }
  .hero-media-sm { height: 300px; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  .sec-pad { padding-top: 68px; padding-bottom: 68px; }
}

/* — Mobile — */
@media (max-width: 680px) {
  /* nur horizontal überschreiben, vertikale Inline-/sec-pad-Polsterung erhalten */
  .container { padding-left: 18px !important; padding-right: 18px !important; }
  .sec-pad { padding-top: 52px; padding-bottom: 52px; }
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr !important; }
  .footer-grid { grid-template-columns: 1fr; gap: 28px; }
  .hero-media { height: 300px; }
  .hero-media-sm { height: 240px; }

  .h-display { font-size: 38px !important; letter-spacing: -1px !important; }
  .h1 { font-size: 28px !important; }
  .h2 { font-size: 23px !important; }
  .lead { font-size: 17px !important; }
  .fluid-56 { font-size: 36px !important; letter-spacing: -1px !important; }
  .fluid-48 { font-size: 32px !important; }
  .fluid-44 { font-size: 30px !important; }
  .fluid-40 { font-size: 29px !important; }
  .fluid-36 { font-size: 27px !important; }

  /* Stacks, die inline 2-spaltig gesetzt sind, brauchen ein Hook — via .stack-m */
  .stack-m { grid-template-columns: 1fr !important; }
  .pad-m { padding: 32px !important; }
  .hide-m { display: none !important; }

  /* Startseite-Hero: auf Mobile Bild ZUERST, weniger starke Rundung */
  .hero-copy { order: 2; }
  .hero-media { order: 1; margin-bottom: 28px; }
  .hero-arch { border-radius: var(--r-card) !important; }
  /* Startseite-Hero: weniger Abstand über dem Bild auf Mobile */
  .home-hero { padding-top: 24px !important; padding-bottom: 56px !important; }
}

/* — Header / Mobile-Menü — */
.nav-desktop { display: flex; align-items: center; gap: 30px; }
.nav-burger { display: none; }
.mobile-menu { display: none; }
@media (max-width: 880px) {
  .nav-desktop { display: none; }
  .nav-cta-desktop { display: none; }
  .nav-burger { display: inline-flex; }
}