/* ============================================================
   hype.media — Globale Smartphone-Optimierung
   Wird auf jeder Seite NACH dem Inline-CSS geladen.
   Greift ab ≤ 720px (Phone) und ≤ 540px (Small Phone).
   iPad/Desktop bleiben unangetastet.
   ============================================================ */

/* ---------- Phone: ≤ 720px ---------- */
@media (max-width: 720px) {
  html { -webkit-text-size-adjust: 100%; }
  body { font-size: 15px; }

  /* Container-Padding straffen */
  .container, .container-wide { padding: 0 20px !important; }

  /* Typografie skaliert weicher als Desktop */
  h1 { font-size: clamp(32px, 8.6vw, 44px) !important; line-height: 1.08 !important; letter-spacing: -.02em; }
  h2 { font-size: clamp(26px, 6.8vw, 36px) !important; line-height: 1.12 !important; letter-spacing: -.015em; }
  h3 { font-size: clamp(20px, 5.2vw, 26px) !important; line-height: 1.2 !important; }
  p, li { font-size: 15.5px; line-height: 1.6; }
  .lede, p.lede { font-size: 16.5px !important; line-height: 1.55 !important; margin-bottom: 36px !important; }

  /* Hero kompakter */
  .hero { padding: 64px 0 72px !important; }
  .hero-eyebrows { margin-bottom: 22px !important; }
  .hero-actions { display: flex; flex-direction: column; gap: 12px; align-items: stretch !important; }
  .hero-actions .btn { width: 100%; justify-content: space-between; }
  .hero-stats { gap: 28px !important; padding-top: 36px !important; margin-top: 48px !important; }
  .hero-stat .num { font-size: 38px !important; }
  .hero-stat .label { font-size: 12.5px; }

  /* Page-Heads */
  .page-head { padding: 40px 0 48px !important; }
  .page-head h1 { font-size: clamp(34px, 9vw, 48px) !important; }

  /* Buttons sind Touch-Targets ≥ 44px */
  .btn, .btn-lime, .btn-dark, .btn-outline, .arrow-link {
    min-height: 48px;
    padding: 14px 22px !important;
    font-size: 14.5px !important;
    border-radius: 999px;
  }
  .arrow-circle { width: 30px; height: 30px; }

  /* Grids → einspaltig auf Phone */
  .grid-2, .grid-3, .grid-4, .grid-cols-2, .grid-cols-3, .grid-cols-4 {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }
  .ref-grid { grid-template-columns: 1fr !important; gap: 14px !important; }

  /* Cards / Panels */
  .card, .panel, .notch-card, .info-card, .feature-card,
  .leistung-card, .blog-card, .ref-card, .case-card {
    border-radius: 22px !important;
    padding: 28px 22px !important;
  }
  .ref-card { padding: 0 !important; }

  /* Section-Spacing */
  section { padding-top: clamp(56px, 12vw, 88px); padding-bottom: clamp(56px, 12vw, 88px); }
  .section-head h2, .banner h2, .cta-banner__title { font-size: clamp(28px, 7.4vw, 40px) !important; }

  /* CTA-Banner stack */
  .cta-banner, .cta-banner__inner, .banner-inner, .contact-cta {
    grid-template-columns: 1fr !important;
    padding: 40px 24px !important;
    gap: 24px !important;
    text-align: left;
  }

  /* Forms — ein Feld pro Zeile, große Touch-Targets, kein Auto-Zoom */
  input, select, textarea, button {
    font-size: 16px !important; /* iOS verhindert Auto-Zoom ≥16px */
  }
  input[type="text"], input[type="email"], input[type="tel"], input[type="url"],
  input[type="number"], select, textarea {
    padding: 14px 14px !important;
    border-radius: 12px !important;
    width: 100%;
  }
  .form-row, .cw-row, .form-grid-2, .form-grid-3 {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  form button[type="submit"] { width: 100%; min-height: 52px; }

  /* Hero-Slider: Dots scrollbar, Counter aus */
  .hero-slider-ui { margin-top: 32px !important; flex-direction: column; align-items: flex-start; gap: 16px; }
  .hero-dots { gap: 6px !important; flex-wrap: nowrap; overflow-x: auto; max-width: 100%; padding-bottom: 4px; -webkit-overflow-scrolling: touch; }
  .hero-dots::-webkit-scrollbar { display: none; }
  .hero-dot { flex: 0 0 auto; padding: 7px 12px !important; font-size: 11.5px !important; }

  /* Tables auf Mobile horizontal scrollbar */
  table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* Bilder */
  img, picture, video { max-width: 100%; height: auto; }
  .img-ph--hero, .img-ph--wide { aspect-ratio: 16/9 !important; }

  /* Footer */
  .hm-footer { padding: 64px 0 28px !important; }
  .hm-footer-cols, .hm-footer-top { grid-template-columns: 1fr !important; gap: 28px !important; }
  .hm-footer .hm-container { padding: 0 20px !important; }

  /* Marquee leiser */
  .marquee-track { font-size: 18px !important; gap: 28px !important; }
  .marquee-track span { gap: 28px !important; }

  /* Chip / Tag-Listen umbrechen */
  .chip-row, .tag-row, .filter-row { flex-wrap: wrap; gap: 6px; }
  .chip { padding: 6px 11px; font-size: 11.5px; letter-spacing: .06em; }

  /* Sticky Header darf nicht verdecken — Anker-Sprünge mit Offset */
  :target { scroll-margin-top: 88px; }

  /* Kontakt-Widget Bubble: Daumenreich, kein Layout-Klotz */
  .cw-fab { right: 14px !important; bottom: 14px !important; padding: 11px 15px 11px 13px !important; font-size: 13.5px !important; }
  .cw-fab .cw-fab__icon { width: 16px; height: 16px; }
}

/* ---------- Small Phone: ≤ 540px ---------- */
@media (max-width: 540px) {
  .container, .container-wide { padding: 0 16px !important; }
  h1 { font-size: clamp(28px, 9.4vw, 38px) !important; }
  h2 { font-size: clamp(24px, 7.2vw, 32px) !important; }
  .hero { padding: 48px 0 60px !important; }
  .hero-stats { gap: 20px !important; }
  .hero-stat { flex: 1 0 45%; }
  .hero-stat .num { font-size: 32px !important; }

  .card, .panel, .notch-card { padding: 22px 18px !important; border-radius: 20px !important; }
  .cta-banner, .contact-cta { padding: 32px 20px !important; }

  /* Hero-Eyebrow-Chips komprimiert */
  .hero-eyebrows .chip { padding: 5px 9px !important; font-size: 10.5px !important; }

  /* Back-to-top kleiner, weiter weg vom Bubble-Klick */
  .back-to-top { width: 42px !important; height: 42px !important; bottom: 70px !important; right: 14px !important; }

  /* Footer-Logo etwas kleiner */
  .hm-footer-brand b { font-size: 22px !important; }
}

/* ---------- Landscape Phones: niedrige Höhen ---------- */
@media (max-width: 900px) and (orientation: landscape) and (max-height: 480px) {
  .hero { padding: 40px 0 48px !important; }
  .hero h1, .hero-slide h2 { font-size: 36px !important; }
  .hero-stats { display: none; }
}

/* ---------- Reduced motion auf Mobile ---------- */
@media (max-width: 720px) and (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}