/* ================================================================
   MOBILE OPTIMIZATIONS — 2026-05-02
   Globale Mobile-Fixes für alle Seiten
   ================================================================ */

/* ── 1. Hero H1 auf Mobile begrenzen ── */
@media (max-width: 768px) {
  .hero h1,
  .hero h1.fade-up,
  section.hero h1,
  .pp-aurora-section h1,
  h1.fade-up {
    font-size: clamp(1.6rem, 6.5vw, 2.2rem) !important;
    line-height: 1.15 !important;
    word-break: normal;
    overflow-wrap: break-word;
  }
  .hero h1 span,
  .hero h1 .gradient-text {
    font-size: inherit !important;
  }
  .hero-subtitle,
  .hero-subline {
    font-size: clamp(0.9rem, 3.5vw, 1.1rem) !important;
    line-height: 1.55 !important;
  }
  .hero {
    padding-top: 6rem !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
}

/* ── 2. Tabellen scrollbar auf Mobile ── */
@media (max-width: 768px) {
  table,
  .cost-table,
  .price-table,
  .comparison-table,
  [class*="table"] {
    display: block !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    max-width: 100% !important;
    white-space: nowrap !important;
  }
  table th,
  table td {
    min-width: 80px !important;
    padding: 0.5rem 0.75rem !important;
    font-size: 0.85rem !important;
  }
}

/* ── 3. Touch-Targets mindestens 44px ── */
@media (max-width: 768px) {
  button,
  a.btn,
  .btn-primary,
  .btn-secondary,
  .btn-link,
  input[type="submit"],
  input[type="button"],
  .nav-link,
  .nav-burger,
  .pill,
  .city-tag,
  select,
  input[type="checkbox"] {
    min-height: 44px !important;
    min-width: 44px !important;
  }
  .nav-burger {
    font-size: 1.4rem !important;
    padding: 0.5rem !important;
  }
}

/* ── 4. Cookie-Banner nicht überlappen ── */
@media (max-width: 768px) {
  #cookieBanner,
  .cookie-banner,
  [id*="cookie"][class*="banner"] {
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    border-radius: 12px 12px 0 0 !important;
    padding: 1rem !important;
    flex-direction: column !important;
    gap: 0.75rem !important;
    z-index: 99999 !important;
  }
  #cookieBanner button,
  .cookie-banner button {
    width: 100% !important;
    min-height: 48px !important;
    font-size: 1rem !important;
  }
}

/* ── 5. Grids auf Mobile 1 Spalte ── */
@media (max-width: 768px) {
  [style*="grid-template-columns:1fr 1fr"],
  [style*="grid-template-columns: 1fr 1fr"],
  [style*="grid-template-columns:repeat(2"],
  [style*="grid-template-columns: repeat(2"] {
    grid-template-columns: 1fr !important;
  }
  [style*="grid-template-columns:repeat(3"],
  [style*="grid-template-columns: repeat(3"] {
    grid-template-columns: 1fr !important;
  }
  [style*="grid-template-columns:repeat(4"],
  [style*="grid-template-columns: repeat(4"] {
    grid-template-columns: 1fr 1fr !important;
  }
}
@media (max-width: 480px) {
  [style*="grid-template-columns:repeat(4"],
  [style*="grid-template-columns: repeat(4"] {
    grid-template-columns: 1fr !important;
  }
}

/* ── 6. Section-Padding auf Mobile reduzieren ── */
@media (max-width: 768px) {
  section,
  .section {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
  .content-section {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
}

/* ── 7. Formulare auf Mobile full-width ── */
@media (max-width: 768px) {
  form input,
  form select,
  form textarea,
  .form-field input,
  .form-field select,
  .form-field textarea {
    font-size: 16px !important; /* Verhindert Zoom auf iOS */
    width: 100% !important;
    max-width: 100% !important;
  }
  .form-row {
    flex-direction: column !important;
    gap: 0.75rem !important;
  }
  .form-row > * {
    width: 100% !important;
  }
}

/* ── 8. Sticky CTA nicht überlappen ── */
@media (max-width: 768px) {
  #stickyCta,
  .sticky-cta {
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    border-radius: 12px 12px 0 0 !important;
    padding: 0.75rem 1rem !important;
    z-index: 9998 !important;
  }
  body {
    padding-bottom: 80px !important;
  }
}

/* ── 9. Text nicht zu groß auf kleinen Screens ── */
@media (max-width: 380px) {
  .hero h1,
  .hero h1.fade-up,
  section.hero h1,
  .pp-aurora-section h1,
  h1.fade-up {
    font-size: 1.5rem !important;
  }
  h2 {
    font-size: 1.25rem !important;
  }
  h3 {
    font-size: 1.05rem !important;
  }
}

/* ── 10. Partner/Marquee auf Mobile lesbar ── */
@media (max-width: 768px) {
  .partner-bar,
  .partner-track,
  .marquee-track {
    font-size: 0.75rem !important;
  }
}

/* ── 11. Footer-Links gut tippbar ── */
@media (max-width: 768px) {
  .footer-links a,
  footer a {
    padding: 0.35rem 0 !important;
    display: inline-block !important;
    min-height: 36px !important;
  }
}

/* ── 12. FAQ-Akkordeon auf Mobile ── */
@media (max-width: 768px) {
  .faq-question,
  .faq-toggle,
  [class*="faq"] button,
  details summary {
    min-height: 48px !important;
    padding: 0.75rem 1rem !important;
    font-size: 0.95rem !important;
  }
}

/* ── 13. Verhindert horizontalen Overflow ── */
@media (max-width: 768px) {
  html, body {
    overflow-x: hidden !important;
  }
  img, video, iframe {
    max-width: 100% !important;
    height: auto !important;
  }
}

/* ── 14. Bento-Grid auf Mobile ── */
@media (max-width: 768px) {
  .pp-bento,
  [class*="bento"] {
    grid-template-columns: 1fr !important;
  }
  .pp-bento__item,
  [class*="bento"] > div {
    min-height: auto !important;
    padding: 1.25rem !important;
  }
}

/* ── 15. Navigation Mobile ── */
@media (max-width: 768px) {
  .nav-links {
    padding: 1rem !important;
    gap: 0.5rem !important;
  }
  .nav-links a {
    padding: 0.75rem 1rem !important;
    font-size: 1rem !important;
    min-height: 44px !important;
  }
}