/* ============================================================================
   mobile.css — Mobile-First-Fundament (Phase 1)
   ----------------------------------------------------------------------------
   Querschnitt-Sicherheitsnetze fuer ALLE Seiten. Wird NACH der seiteneigenen
   CSS eingebunden, damit es bei Gleichstand gewinnt. Enthaelt bewusst KEINE
   Layout-Umbauten: die Desktop-Scroll-Story (>=861px) bleibt voellig unberuehrt.
   Hier stehen nur geraete- bzw. breitenbasierte Schutzregeln.

   Breakpoint-Konvention (projektweit ab jetzt, 3-stufig):
     Phone   : @media (max-width: 480px)
     Tablet  : @media (max-width: 768px)
     Desktop : @media (min-width: 861px)     <- Grenze der WebGL-Scroll-Story
   (CSS-Variablen greifen in @media nicht, daher gilt das als Konvention, nicht
   als Token. Neue mobile Regeln bitte an diesen drei Stufen ausrichten.)
   ============================================================================ */

/* 1) iOS-Schriftaufblaehung beim Drehen verhindern + horizontalen Ueberlauf
      global abfangen. `clip` statt `hidden`, damit KEIN Scroll-Container
      entsteht (sonst brechen die position:sticky-Pins der Story). */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
@media (max-width: 860px) {
  html, body { overflow-x: clip; }
}

/* 2) Touch-Feedback. Auf Geraeten ohne Hover bleiben reine :hover-Buttons
      optisch "tot" — wir spiegeln den Druck-Zustand auf :active und nehmen
      das blaue Tap-Highlight raus. Nur :active, kein display/layout-Eingriff. */
@media (hover: none) {
  .nav-cta, .menu-toggle, .nav-toggle,
  .hero-pitch__cta, .spark-cta,
  .btn, .btn-primary, .cta, [class*="-cta"] {
    -webkit-tap-highlight-color: transparent;
  }
  .nav-cta:active, .hero-pitch__cta:active, .spark-cta:active,
  .btn:active, .btn-primary:active, .cta:active, [class*="-cta"]:active {
    transform: translateY(1px);
    filter: brightness(1.08);
  }
}

/* 3) Touch-Targets: die Hamburger-Schalter mind. 44x44px (WCAG 2.5.5).
      Breitenbasiert (nicht pointer:coarse), damit es ueberall greift, wo der
      Hamburger sichtbar ist. Die beiden Toggles sind unterschiedlich gebaut,
      daher getrennt behandelt — ohne die Bars zu verschieben:
        - .menu-toggle (Homepage): asymmetrische Bars (mittlere via flex-end),
          keine feste Breite -> Hit-Area ueber Padding vergroessern.
        - .nav-toggle (Unterseiten): symmetrisch + zentriert, feste 34px
          -> schlicht auf 44px anheben. */
@media (max-width: 860px) {
  .menu-toggle { padding: 14px 12px; }
  .nav-toggle { width: 44px; height: 44px; }
}