/* Tablet */
@media (max-width: 1000px){
  .nav-links{ display:none; }
  .nav-burger{ display:flex; }
  /* Logo bleibt absolut positioniert — .hero ist ein Flex-Container, ein statisches
     Logo wuerde als Flex-Item den Hero-Text zusammenquetschen. Nur Groesse und Ecke aendern. */
  .hero-logo{
    top:calc(var(--nav-h) + 20px);
    right:auto;
    left:22px;
    width:min(52vw, 190px);
  }
  .hero .content{ padding-top:200px; }
  .cols-3, .stat-grid, .ref-grid{ grid-template-columns:1fr 1fr; }
  .team-grid{ grid-template-columns:1fr; max-width:560px; }
  .stat{ border-bottom:1px solid rgba(255,255,255,.10); }
  .stat:nth-child(2n){ border-right:none; }
}

/* Mobile */
@media (max-width: 760px){
  .grid, .grid.reverse{ grid-template-columns:1fr; gap:28px; }
  .cols-2, .cols-3, .stat-grid, .reveal-grid, .form-row, .ref-grid, .team-grid, .briefing-steps{ grid-template-columns:1fr; }

  .section{ padding:60px 0; }
  .section.compact{ padding:48px 0; }

  .stat{ border-right:none; }
  .stat:last-child{ border-bottom:none; }

  /* schmale Fenster: Hero-Text nach oben, Hero nur so hoch wie nötig */
  .hero{ align-items:flex-start; min-height:auto; }
  .hero .content{ padding:190px 0 44px; }
  .hero h1{ max-width:none; }
  .hero p.subhead{ max-width:none; }

  .ctaRow .btn{ width:100%; text-align:center; }

  .hero-shot{ display:block; margin:26px 0 0; }

  .nav-cta{ display:none; }

  /* Die beiden Prozessgrafiken sind auf dem Telefon ohnehin knapp. Der
     Innenabstand des Herkunftsblocks kostete sie 74 der 344 px — hier laufen
     sie bis an dessen Rand. Gemessen 10.09.2026. */
  .about-block .card.breit{ margin-left:-36px; margin-right:-36px; width:auto; }
  /* Die feste Hoehe von 165 px ist eine Desktop-Bremse. Auf dem Telefon
     laesst sie 59 px Weiss im Kasten stehen — dort zaehlt die Breite. */
  .card.breit .img{ height:auto; }

  .briefing-form{ padding:22px; }

  /* Auf dem Telefon untereinander, in der Reihenfolge des Markups:
     Top, Menue, Copyright, LinkedIn. TE, 10.09.2026. */
  .footer-inner{ grid-template-columns:1fr; justify-items:center; text-align:center; }
  .footer-top{ justify-self:center; }
  .footer-li{ justify-self:center; }

  /* On touch, reveal descriptions are shown by default for discoverability */
  .reveal-desc{ transform:translateY(0); }
  .reveal-arrow{ transform:rotate(90deg); }
}