/* ══════════════════════════════════════════════════════════
   MOBILE & DEVICE VIEWS — zuletzt geladen, überschreibt gezielt
   Desktop/Laptop bleiben unverändert (nur ≤1024px greifen Regeln)
   ══════════════════════════════════════════════════════════ */

/* ── Tablet / kleiner Laptop: Laptop soll wie Desktop aussehen ── */
@media (max-width: 1024px) {
  .container { padding-left: 20px; padding-right: 20px; }
}

/* ══ HANDY & kleines Tablet (≤820px) ══════════════════════ */
@media (max-width: 820px) {

  /* Kein horizontales Scrollen */
  html, body { overflow-x: hidden; }
  main { min-width: 0 !important; }

  /* Hero-Illustrationen weg — Text zählt */
  .as-illu, .ou-illu, .s-illu, .e-illu, .k-illu, .pr-illu,
  .av2-hero__visual, .ew-hero__visual, .ew-ekg-wrap { display: none !important; }

  /* Hero-Grids einspaltig */
  .av2-hero__inner, .ou-hero__inner, .s-hero__inner, .e-hero__inner,
  .k-hero__inner, .pr-hero__inner, .ew-hero__inner, .cpj-hero__inner {
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
  }

  /* Interaktive Demos ausblenden, Kurzfassung zeigen */
  .idx-demo__stage, .obb-demo, .cb-demo, .rad-demo, .ob-demo, .erp-win { display: none !important; }
  .demo-mobile { display: block !important; }

  /* Sektions-Rhythmus enger */
  .idx-demo, .idx-bridge, .idx-prob, .idx-stmts,
  .av2-hero, .obp-uc-section, .cbp-uc-section, .rap-uc-section, .av2-cta,
  .ou-section, .s-section, .s-hero, .s-cta,
  .e-section, .e-section--white, .e-section--dark, .e-cta, .e-hero,
  .pr-hero, .pr-steps, .pr-why, .pr-cta, .ew-section, .ew-hero,
  .cpj-section, .contact-section { padding-top: 2.5rem !important; padding-bottom: 2.5rem !important; }

  /* Karten-/Spalten-Grids einspaltig */
  .idx-mods, .ext-grid, .idx-prob__points, .idx-arch-grid, .idx-pipe__grid,
  .ou-values-grid, .ou-team-grid, .ou-team-grid--3, .ou-mission-row,
  .c-cards, .h-cards, .sc-feats, .e-cards, .e-two-cards, .e-feats, .e-feats-light,
  .pr-cards, .pr-why__grid, .contact-grid, .cpj-pillars-grid, .cpj-steps {
    grid-template-columns: 1fr !important;
    gap: 1.25rem !important;
  }

  /* Typo: Headlines kompakter, Fließtext gut lesbar (min. 16px) */
  h1, .av2-hero__title, .ou-hero__title, .s-hero__title, .e-hero__title,
  .agent-hero__title, .pr-hero__title, .ew-hero__title, .cpj-hero__title,
  .hero__headline { font-size: clamp(2rem, 8.5vw, 2.6rem) !important; line-height: 1.08 !important; }
  h2, .idx-bridge__title, .idx-prob__headline, .ext-title, .s-title, .e-title,
  .ou-heading, .idx-pipe__title { font-size: clamp(1.5rem, 6.5vw, 2rem) !important; line-height: 1.15 !important; }
  p, li { font-size: 1rem !important; line-height: 1.6 !important; }
  .av2-hero__sub, .ou-hero__sub, .s-hero__sub, .e-hero__sub,
  .agent-hero__sub, .pr-hero__sub, .hero__sub { font-size: 1.0625rem !important; }

  /* Touch-Ziele ≥44px */
  a.btn, .btn, .av2-btn-primary, .av2-cta__btn, .s-cta__btn, .e-cta__btn,
  .ou-cta__btn, .cpj-btn, .ew-hero__cta, .form__submit, button[type="submit"] {
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* Hero-Wellen dezenter (Lesbarkeit) */
  .hero__wave-bg, .pr-wave-bg { opacity: .55; }

  /* Breite Elemente bändigen */
  img, svg, table, pre { max-width: 100%; }
  .idx-bridge__right svg, .idx-prob__graphic { max-width: 100% !important; height: auto; }
}

/* ══ Kleine Handys (≤480px) ══════════════════════════════ */
@media (max-width: 480px) {
  .container { padding-left: 16px; padding-right: 16px; }
  h1, .av2-hero__title, .ou-hero__title, .s-hero__title, .e-hero__title,
  .agent-hero__title, .pr-hero__title { font-size: clamp(1.8rem, 9vw, 2.2rem) !important; }
  .ou-person__photo { width: 128px !important; height: 128px !important; }
}

/* ── Desktop: Kurzfassung nie zeigen ── */
.demo-mobile { display: none; }

/* ── Bewegung reduzieren (iOS-Einstellung respektieren) ── */
@media (prefers-reduced-motion: reduce) {
  .idx-bg-canvas { display: none !important; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}