/* =====================================================================
   BestandAI — Mobile-First Override Stylesheet (Build 3.5 Fix)
   ─────────────────────────────────────────────────────────────────────
   WICHTIG: body.public-page = öffentliche Seiten (Landing, Preise, etc.)
            body.app-page    = Dashboard / eingeloggte App-Seiten
   Diese Trennung verhindert, dass das öffentliche Drawer das Dashboard
   überlagert.

   Breakpoints (Tailwind-kompatibel):
     - kein @media           : 0–639px  (mobile, default)
     - @media (min-width: 640px)  : sm
     - @media (min-width: 768px)  : md
     - @media (min-width: 1024px) : lg — Desktop
===================================================================== */

/* ─────────── 0) Globale Reset-Helfer für Mobile ─────────── */
@media (max-width: 1023px) {
  html, body { overflow-x: hidden; }
  body { font-size: 16px; line-height: 1.55; }

  /* Touch-Targets: alle Buttons / Links die wie Buttons aussehen mindestens 44px */
  button, a[role="button"], a.button, [class*="btn"], [class*="Button"] {
    min-height: 44px;
  }

  /* Bilder skalieren */
  img, svg, video, canvas, picture {
    max-width: 100% !important;
    height: auto;
  }
}

/* ─────────── 1) Öffentliche Seiten: Header + Hamburger ─────────── */
@media (max-width: 1023px) {
  /* Hamburger-Button sichtbar machen — NUR auf public-page */
  body.public-page #bai-hamburger { display: inline-flex !important; }

  /* Auf app-page: Drawer und Hamburger IMMER verstecken */
  body.app-page #bai-hamburger,
  body.app-page #bai-mobile-drawer,
  body.app-page #bai-mobile-drawer-overlay { display: none !important; }
}

@media (min-width: 1024px) {
  /* Auf Desktop: öffentliches Drawer immer verstecken */
  #bai-hamburger, #bai-mobile-drawer { display: none !important; }
}

/* ─────────── 2) Öffentliche Seiten: Hero-Sektion ─────────── */
@media (max-width: 1023px) {
  body.public-page [class*="hero"],
  body.public-page [class*="Hero"] {
    grid-template-columns: 1fr !important;
    display: flex !important;
    flex-direction: column !important;
    padding-top: 24px !important;
    padding-bottom: 24px !important;
    gap: 24px !important;
  }

  /* H1 stark verkleinern */
  h1 {
    font-size: clamp(28px, 8vw, 40px) !important;
    line-height: 1.1 !important;
    letter-spacing: -0.02em !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
    hyphens: auto;
  }

  h2 {
    font-size: clamp(24px, 6vw, 32px) !important;
    line-height: 1.15 !important;
  }
  h3 { font-size: 18px !important; }

  /* CTA-Buttons im Hero auf 100% Breite — nur auf public-page */
  body.public-page [class*="hero"] a.button,
  body.public-page [class*="hero"] button,
  body.public-page [class*="Hero"] a.button,
  body.public-page [class*="Hero"] button {
    width: 100% !important;
    justify-content: center !important;
  }
}

/* ─────────── 3) Stats-Block: 2 Spalten statt 4 (nur public) ─────────── */
@media (max-width: 1023px) {
  body.public-page [class*="stats"],
  body.public-page [class*="Stats"],
  body.public-page [class*="metrics"] {
    grid-template-columns: repeat(2, 1fr) !important;
    display: grid !important;
    gap: 12px !important;
  }
}
@media (max-width: 479px) {
  body.public-page [class*="stats"],
  body.public-page [class*="Stats"],
  body.public-page [class*="metrics"] {
    grid-template-columns: 1fr !important;
  }
}

/* ─────────── 4) Generische Grids (public-page) ─────────── */
@media (max-width: 1023px) {
  body.public-page [class*="grid-cols-3"],
  body.public-page [class*="grid-cols-4"],
  body.public-page [class*="grid-cols-5"] {
    grid-template-columns: 1fr !important;
  }
  body.public-page [class*="grid-cols-2"] {
    grid-template-columns: 1fr !important;
  }
}
@media (min-width: 640px) and (max-width: 1023px) {
  body.public-page [class*="grid-cols-3"],
  body.public-page [class*="grid-cols-4"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* ─────────── 5) Pricing-Cards: vertikal stacken (public-page) ─────────── */
@media (max-width: 1023px) {
  body.public-page [class*="pricing"] [class*="grid"],
  body.public-page [class*="Pricing"] [class*="grid"],
  body.public-page section[id="preise"] [class*="grid"] {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  body.public-page [class*="pricing"] [class*="card"],
  body.public-page [class*="Pricing"] [class*="card"],
  body.public-page section[id="preise"] [class*="card"] {
    width: 100% !important;
    min-width: 0 !important;
    padding: 20px !important;
  }

  body.public-page [class*="pricing"] [class*="price"],
  body.public-page [class*="Pricing"] [class*="price"] {
    font-size: 36px !important;
  }

  [class*="badge"] { white-space: nowrap; }

  body.public-page [class*="pricing"] [role="tab"],
  body.public-page [class*="Pricing"] [role="tab"] {
    min-height: 44px !important;
    padding: 10px 18px !important;
    font-size: 14px !important;
  }
}

/* ─────────── 6) Registrieren-Seite: Form-Hälfte voll, Info-Hälfte darunter ─────────── */
@media (max-width: 1023px) {
  body.public-page [class*="register"] [class*="grid"],
  body.public-page [class*="Register"] [class*="grid"] {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }

  /* Form-Inputs: volle Breite, sauberer Tap-Target */
  input[type="text"], input[type="email"], input[type="password"],
  input[type="number"], input[type="tel"], input[type="url"],
  textarea, select {
    width: 100% !important;
    min-height: 44px !important;
    font-size: 16px !important; /* iOS verhindert Zoom bei <16px */
    padding: 12px 14px !important;
    box-sizing: border-box !important;
  }
  textarea { min-height: 120px !important; }

  label { font-size: 14px !important; display: block !important; margin-bottom: 6px !important; }
  button[data-provider="google"], a[data-provider="google"] { width: 100% !important; }
}

/* ─────────── 7) Dashboard: NUR app-page ─────────── */
@media (max-width: 1023px) {
  /* Dashboard-Header: Hamburger sichtbar machen */
  body.app-page header [data-action="toggle-drawer"] { display: inline-flex !important; }

  /* Main-Content: volle Breite */
  body.app-page main {
    margin-left: 0 !important;
    width: 100% !important;
    padding: 16px !important;
    padding-bottom: 80px !important;
  }

  /* Stats-Karten im Dashboard: 2-spaltig */
  body.app-page [class*="dashboard"] [class*="stats"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Bottom-Nav im Dashboard: sichtbar */
  body.app-page nav[class*="bottom"],
  body.app-page [class*="bottom-nav"],
  body.app-page [class*="BottomNav"] {
    position: fixed !important;
    bottom: 0 !important; left: 0 !important; right: 0 !important;
    background: #111111 !important;
    border-top: 1px solid rgba(255,255,255,0.08) !important;
    padding: 6px 0 calc(6px + env(safe-area-inset-bottom)) !important;
    display: flex !important;
    justify-content: space-around !important;
    z-index: 40 !important;
  }
  body.app-page nav[class*="bottom"] a,
  body.app-page nav[class*="bottom"] button {
    min-width: 60px; min-height: 48px;
    flex-direction: column !important; gap: 2px !important;
    font-size: 11px !important;
  }
}

/* ─────────── 8) Tool-Pages: vertikales Form-Layout (app-page) ─────────── */
@media (max-width: 1023px) {
  body.app-page [class*="tool"] [class*="grid-cols-2"],
  body.app-page main > [class*="grid"] {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  /* Plattform-Auswahl-Chips umbrechen */
  [class*="platforms"], [class*="Platforms"], [class*="chips"] {
    flex-wrap: wrap !important; gap: 8px !important;
  }
  [class*="platforms"] button, [class*="Platforms"] button {
    min-height: 40px !important; padding: 8px 12px !important;
  }

  /* Generierungs-Button volle Breite */
  button[type="submit"], [class*="generate-btn"], [class*="GenerateBtn"] {
    width: 100% !important;
  }
}

/* ─────────── 9) FAQ-Akkordeon: bequeme Tap-Targets ─────────── */
@media (max-width: 1023px) {
  [class*="faq"] button, [class*="FAQ"] button, details > summary {
    min-height: 56px !important;
    padding: 14px 16px !important;
    font-size: 15px !important;
    text-align: left !important;
  }
}

/* ─────────── 10) Footer: Spalten stacken (public-page) ─────────── */
@media (max-width: 1023px) {
  body.public-page footer [class*="grid"],
  body.public-page footer .columns {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
  body.public-page footer { padding: 32px 16px !important; }
  body.public-page footer ul { padding-left: 0 !important; list-style: none !important; }
  body.public-page footer li { margin: 8px 0 !important; }
  body.public-page footer a { display: inline-block !important; padding: 6px 0 !important; min-height: 32px !important; }
}

/* ─────────── 11) Cookie-Banner mobile: kompakter ─────────── */
@media (max-width: 480px) {
  #bai-consent-banner {
    bottom: 8px !important; left: 8px !important; right: 8px !important;
    padding: 14px !important; border-radius: 12px !important;
  }
  #bai-consent-banner h2 { font-size: 15px !important; margin-bottom: 6px !important; }
  #bai-consent-banner p { font-size: 13px !important; margin-bottom: 10px !important; }
  #bai-consent-buttons { gap: 6px !important; }
  #bai-consent-buttons button { flex: 1 1 100% !important; font-size: 13px !important; }
}

/* ─────────── 12) Typografie-Skalierung global ─────────── */
@media (max-width: 639px) {
  .text-6xl, [class*="text-6xl"] { font-size: 36px !important; line-height: 1.05 !important; }
  .text-5xl, [class*="text-5xl"] { font-size: 32px !important; line-height: 1.1 !important; }
  .text-4xl, [class*="text-4xl"] { font-size: 28px !important; line-height: 1.15 !important; }
  .text-3xl, [class*="text-3xl"] { font-size: 24px !important; line-height: 1.2 !important; }
  .text-2xl, [class*="text-2xl"] { font-size: 20px !important; }
  .text-xl,  [class*="text-xl"]  { font-size: 18px !important; }
}

/* ─────────── 13) Reduce-Motion respektieren ─────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}