/* =============================================================
   neurabot · mobile.css
   Durchgängige Handy-Optimierung. Als LETZTE CSS-Datei geladen,
   damit diese Regeln bei kleinen Bildschirmen gewinnen.
   Zwei Breakpoints: 768px (Tablet/grosses Handy) und 480px (Handy).
   ============================================================= */

/* ---------- TABLET & GROSSES HANDY (≤768px) ---------- */
@media (max-width: 768px) {

  /* Grosszügige Abstände am Rand, aber nicht zu viel Platz verschenken */
  :root { --gutter: 20px; }

  /* Sektions-Abstände auf Handy kompakter (sonst endloses Scrollen) */
  .section { padding-block: clamp(56px, 14vw, 90px); }

  /* Alle Grids einspaltig – egal welche Sektion */
  .hero__grid,
  .stats,
  .why,
  .prices,
  .calc__grid,
  .team,
  .sustain,
  .flow { grid-template-columns: 1fr !important; }

  /* Hero: mehr Luft oben (Nav), Text zuerst, Demo-Karte darunter */
  .hero { padding-top: 104px; min-height: auto; }
  .hero__grid { gap: 36px; }
  .hero__cta { flex-wrap: wrap; }
  .hero__cta .btn { flex: 1 1 auto; justify-content: center; }

  /* Hero-Metriken (5 Sprachen / <1,5s / 24/7) nebeneinander statt gestapelt */
  .hero__meta { display: flex; gap: 22px; flex-wrap: wrap; }
  .hero__meta .m b { font-size: 1.6rem; }

  /* Buttons touch-freundlich: grösser, volle Breite bei CTAs */
  .btn { padding: 15px 22px; }

  /* Preis-Karten: mittig, eine pro Reihe, angenehm breit */
  .prices { max-width: 420px; margin-inline: auto; }
  .pcard { padding: 28px 24px; }

  /* Rechner: Regler und Resultate untereinander, genug Platz */
  .calc__grid { gap: 28px; }
  .calc__results { padding: 24px; }

  /* Call-Demo-Karte im Hero: nicht zu hoch, Transkript scrollbar */
  .callcard { max-width: 100%; }
  .transcript { max-height: 260px; }

  /* Team & Footer-Spalten gestapelt */
  .footer__cols { grid-template-columns: 1fr 1fr; gap: 28px; }
  .footer__bottom { flex-direction: column; gap: 14px; text-align: center; }

  /* Marquee etwas kleiner */
  .marquee__group b { font-size: 1rem; }

  /* Grosse Latenz-Zahl nicht überbordend */
  .latency .big { font-size: clamp(3rem, 18vw, 5rem); }
}

/* ---------- HANDY (≤480px) ---------- */
@media (max-width: 480px) {

  :root { --gutter: 16px; }

  /* Headlines auf Handy nicht zu riesig (sonst Umbruch-Chaos) */
  h1 { font-size: clamp(2.1rem, 11vw, 3rem); }
  h2 { font-size: clamp(1.7rem, 8vw, 2.4rem); }
  .lead { font-size: 1rem; }

  /* Hero-Metriken: falls zu eng, sauber umbrechen */
  .hero__meta { gap: 16px; }
  .hero__meta .m { flex: 1 1 40%; }
  .hero__meta .m b { font-size: 1.4rem; }

  /* CTA-Buttons volle Breite, untereinander – leichter zu treffen */
  .hero__cta { flex-direction: column; }
  .hero__cta .btn { width: 100%; }

  /* Footer-Spalten einspaltig auf ganz kleinen Screens */
  .footer__cols { grid-template-columns: 1fr; }

  /* Statistik-Zahlen + Quellenangabe kompakter */
  .stat .num { font-size: clamp(2.4rem, 16vw, 3.4rem); }
  .stat .src { font-size: 0.62rem; }

  /* Preis-Karte: Innenabstand knapper */
  .pcard { padding: 24px 20px; }
  .price { font-size: 2.2rem; }

  /* Custom-Cursor auf Handy komplett aus (kein Zeiger vorhanden) */
  .cursor-dot, .cursor-ring { display: none !important; }
}

/* ---------- WebGL-Hero auf Handy zähmen ---------- */
/* Auf kleinen Bildschirmen ist das Partikelfeld teuer und lenkt ab.
   Wir dimmen es stark, damit der Text im Vordergrund klar lesbar ist
   und das Handy nicht heiss/langsam wird. */
@media (max-width: 768px) {
  #webgl { opacity: 0.45; }
}