/* ============================================================
   BLUN mobile responsive — global fixes for sub-pages.
   Applied via @import inside tokens.css so EVERY page picks it up.
   ============================================================ */

/* Always allow horizontal overflow recovery */

@media (max-width: 720px) {

  /* === HERO === */
  .hero, .section, [class*="-section"] {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }
  .container, .shell, [class*="-container"] {
    padding-left: 16px !important;
    padding-right: 16px !important;
    max-width: 100% !important;
  }

  /* Display headline that scales properly */
  h1, .display, .hero h1 {
    font-size: clamp(1.7rem, 7.6vw, 2.2rem) !important;
    line-height: 1.08 !important;
    letter-spacing: -0.025em !important;
    word-wrap: break-word;
    overflow-wrap: anywhere;
  }
  h2 {
    font-size: clamp(1.35rem, 5.8vw, 1.85rem) !important;
    line-height: 1.12 !important;
  }
  h3 {
    font-size: clamp(1.05rem, 4.4vw, 1.3rem) !important;
  }
  .lead, p.lead, p.prose {
    font-size: 1rem !important;
    line-height: 1.55 !important;
  }
  .eyebrow {
    font-size: 0.7rem !important;
    letter-spacing: 0.16em !important;
  }

  /* === GRIDS — collapse to single column ON MOBILE === */
  /* .footer-grid ausgenommen (09.08.): Footer behaelt 2 Spalten aus components.css (@media <=880px) */
  [class*="-grid"]:not(.cf-stage):not(.cf-card):not(.mock-cards):not(.footer-grid),
  .grid, .grid-2, .grid-3, .grid-4,
  .metric-grid, .uc-grid, .qtiles, .q-grid,
  .cap-grid, .pricing-grid, .feature-grid, .step-grid,
  .pcomp, .route-grid {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
  /* Two-up exception for stat tiles where 1col looks too tall */
  .metric-grid, .stat-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* === HORIZONTAL OVERFLOW PREVENTION === */
  .pcomp, .price-comp, table {
    display: block !important;
    width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  /* === SPACING — generous but mobile-aware === */
  .section { padding-top: 36px !important; padding-bottom: 36px !important; }

  /* === BUTTONS — full-width on mobile but pill style preserved === */
  .btn, .button, button.primary, button.secondary, .cta-btn {
    padding: 12px 18px !important;
    font-size: 0.95rem !important;
  }
  .hero-actions, .cta-row, .btn-row {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
  }
  .hero-actions .btn, .cta-row .btn { width: 100% !important; }

  /* === IMAGES === */
  /* .footer-brand img ausgenommen (09.08.): Logo braucht height:26px aus components.css, kein height:auto */
  img:not(.brand img):not(.character):not(.mock-card-icon img):not(.footer-brand img) {
    max-width: 100% !important;
    height: auto !important;
  }

  /* === Hide HTML mockup-style decorative panels on mobile === */
  .mockup-panel, .ui-mock, .speed-box,
  .dashboard-mock, .preview-mock {
    display: none !important;
  }

  /* === FAQ summaries readable === */
  details summary {
    padding: 14px 16px !important;
    font-size: 0.98rem !important;
    line-height: 1.4 !important;
  }
  details p {
    padding: 0 16px 14px !important;
    font-size: 0.94rem !important;
  }

  /* === KEEP slider chrome on landing === */
  .cf-stage, .cf-card, .mock-cards, .mock-card { /* keep landing slider intact */ }
}

/* DESKTOP — make sure pages don't extend beyond viewport with random fixed widths */
@media (min-width: 721px) {
  .container, .shell {
    max-width: min(1200px, calc(100vw - 48px));
    margin-inline: auto;
  }
}


@media (max-width: 720px) {
  /* Papa 09.08.: Text mobil breiter.
     Gemessen bei 390px: Einleitungstext beginnt bei 50px, die
     Überschrift darunter bei 16px. Grund: die Sektion polstert
     bereits, und .shell legt nochmal 16px drauf. Eine Shell INNERHALB
     einer gepolsterten Sektion braucht kein eigenes Polster. */
  .section > .shell,
  [class*="-section"] > .shell,
  .hero > .shell {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}


@media (max-width: 720px) {
  /* Einleitungsblock auf dieselbe Kante wie die Überschriften.
     Gemessen bei 390px, beide Ketten nebeneinander:
       Einleitung   Sektion 18px Polster + Shell 16px Rand = 34px
       Überschrift Sektion  0px Polster + Shell 16px Polster = 16px
     Der Rand an der Shell war der Rest, den mein erster Eingriff
     nicht traf - er setzte nur das Polster auf null. */
  .papa-start-copy {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .papa-start-copy > .shell {
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}


@media (max-width: 720px) {
  /* Papas Text wird nicht gekuerzt.
     Gemessen: auf /modelle/queen stand -webkit-line-clamp: 4 auf dem
     Hero-Vorspann, sichtbar 97 von 146 Pixeln - der Satz brach mit
     drei Punkten ab. Auf /modelle/king stand die Regel nicht, dort
     war der Text vollständig. Eine Kuerzung, die auf einer Seite
     zuschlaegt und auf der anderen nicht, ist keine Gestaltung,
     sondern ein Rest. */
  .hero-lead, .mp-lead {
    -webkit-line-clamp: none !important;
    overflow: visible !important;
    max-height: none !important;
    display: block !important;
  }
}