/* BexHub Mobile CSS — mobile-first
   Breakpoints: 768px (tablet/mobile), 480px (small phone)
   No !important unless absolutely unavoidable
   Complements css/main.css (desktop styles) */

@media (max-width: 768px) {

  /* NAV */
  .nav-toggle { display: block; }
  .nav-links {
    display: none;
    position: absolute;
    top: 64px;
    left: 0;
    right: 0;
    background: white;
    border-bottom: 1px solid var(--border);
    flex-direction: column;
    padding: 16px 24px;
    gap: 16px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.08);
  }
  .nav-links.open { display: flex; }

  /* GLOBAL */
  .container { padding: 0 16px; }
  .section-title { font-size: 22px; letter-spacing: -0.5px; }
  .section-sub { font-size: 14px; margin-bottom: 24px; }
  .section-label { font-size: 11px; }
  .btn { width: 100%; max-width: 340px; justify-content: center; }

  /* HERO */
  .hero { padding: 100px 20px 32px; }
  .hero h1 { font-size: 26px; letter-spacing: -0.8px; }
  .hero p.hero-sub { font-size: 15px; max-width: 100%; line-height: 1.6; }
  .hero-actions { flex-direction: column; align-items: center; gap: 8px; }
  .hero-proof { flex-direction: column; gap: 6px; align-items: center; font-size: 12px; }

  /* SAVINGS TICKER — stays 3-column but more compact */
  .savings-ticker { flex-direction: row; border-radius: 12px; }
  .savings-item { padding: 12px 8px; min-width: 0; }
  .savings-number { font-size: 22px; }
  .savings-label { font-size: 11px; }

  /* VORHER/NACHHER — "Bad" card truncated, arrow hidden */
  .mockup-grid { grid-template-columns: 1fr; gap: 12px; }
  .mockup-arrow { display: none; }
  .mockup-card.bad {
    max-height: 180px;
    overflow: hidden;
    position: relative;
    opacity: 0.7;
    font-size: 12px;
  }
  .mockup-card.bad::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 60px;
    background: linear-gradient(transparent, var(--bg-alt));
    pointer-events: none;
  }
  .mockup-card.good { font-size: 13px; }
  .mockup-annotations { grid-template-columns: 1fr; gap: 8px; margin-top: 16px; }
  .annotation { padding: 12px; }

  /* SO FUNKTIONIERT'S — flow steps as horizontal icon+text list */
  .explainer-box { margin: 0 4px; }
  .explainer-header { padding: 20px 16px; }
  .explainer-header h2 { font-size: 18px; }
  .explainer-header p { font-size: 14px; }
  .explainer-body { padding: 16px; }
  .explainer-flow { grid-template-columns: 1fr; gap: 0; }
  .flow-step {
    padding: 12px;
    text-align: left;
    display: flex;
    align-items: center;
    gap: 12px;
    background: none;
    border: none;
    border-bottom: 1px solid var(--border);
    border-radius: 0;
  }
  .flow-step:last-child { border-bottom: none; }
  .flow-step::after { display: none; }
  .flow-icon { font-size: 24px; flex-shrink: 0; }
  .flow-step h4 { font-size: 14px; margin-bottom: 2px; }
  .flow-step p { font-size: 12px; color: var(--text-muted); }

  /* EXPLAINER BENEFIT */
  .explainer-benefit { padding: 12px 0 0; margin-top: 8px; }
  .benefit-icon { font-size: 20px; }
  .explainer-benefit h4 { font-size: 14px; }
  .explainer-benefit p { font-size: 13px; line-height: 1.5; }

  /* AUTOMATION + DASHBOARD */
  .automation { padding: 48px 16px; }
  .auto-grid { grid-template-columns: 1fr; }
  .auto-text h2 { font-size: 22px; }
  .auto-text p { font-size: 14px; }
  .auto-step-text h4 { font-size: 14px; }
  .auto-step-text p { font-size: 12px; }

  /* DASHBOARD — horizontal scroll, max-height */
  .dashboard-mock {
    overflow: hidden;
    border-radius: 8px;
    max-height: 400px;
    position: relative;
  }
  .dashboard-mock::after {
    content: 'Wischen für mehr →';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 50px;
    background: linear-gradient(transparent, #1e293b);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding-bottom: 8px;
    font-size: 11px;
    color: rgba(255,255,255,0.4);
    pointer-events: none;
  }
  .dash-content {
    min-width: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* USP CARDS — 1 column */
  .features-grid { grid-template-columns: 1fr; max-width: 100%; gap: 12px; }
  .doc-types-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .steps { grid-template-columns: 1fr; gap: 0; }
  .feature-card { padding: 20px 16px; }
  .feature-card h3 { font-size: 16px; margin-bottom: 8px; }
  .feature-card p { font-size: 13px; line-height: 1.5; }
  .feature-icon { width: 40px; height: 40px; font-size: 18px; }

  /* ROI CALCULATOR */
  .roi { padding: 48px 16px; }
  .roi-calc { grid-template-columns: 1fr; }
  .roi-inputs { padding: 20px 16px; }
  .roi-inputs h3 { font-size: 16px; }
  .roi-results { margin-top: 16px; padding: 20px 16px; }
  .result-row { font-size: 13px; padding: 10px 0; }
  .roi-total-value { font-size: 24px; }

  /* PRICING */
  .pricing { padding: 48px 16px; }
  .pricing-card { margin: 0; }
  .pricing-features li { font-size: 13px; padding: 6px 0; }
  .trust-bar { flex-direction: column; gap: 6px; }
  .trust-badge { font-size: 12px; }

  /* SETUP / HOW IT WORKS */
  .how-it-works { padding: 48px 16px; }
  .steps { grid-template-columns: 1fr; gap: 16px; }
  .step { padding: 20px; }

  /* WAITLIST FORM — stacked, full width */
  .waitlist { padding: 48px 20px; }
  .waitlist h2 { font-size: 22px; }
  #waitlist-form { flex-direction: column; gap: 8px; }
  #waitlist-form input[type="text"],
  #waitlist-form input[type="email"] { width: 100%; min-width: 0; }
  #waitlist-form button { width: 100%; }
  .consent-label { width: 100%; font-size: 0.8rem; }
  .waitlist-feedback { font-size: 0.85rem; }
}

@media (max-width: 480px) {

  /* Small phone overrides */
  .hero h1 { font-size: 22px; }

  /* Savings ticker goes vertical on very small screens */
  .savings-ticker { flex-direction: column; }
  .savings-item { border-right: none; border-bottom: 1px solid var(--border); }
  .savings-item:last-child { border-bottom: none; }

  .section-title { font-size: 20px; }

  /* Blog article small phone */
  .article-header { padding: 24px 12px 20px; }
  .article-header h1 { font-size: 22px; }
  .article-container { padding: 0 12px 48px; }
  .article-content h2 { font-size: 20px; }

  /* Pricing header */
  .pricing-header { padding: 24px 20px 20px; }
  .pricing-amount .price { font-size: 44px; }
  .pricing-body { padding: 20px; }
  .pricing-footer { padding: 0 20px 20px; }

  /* Blog article */
  .article-header { margin-top: 80px; padding: 32px 16px 24px; }
  .article-header h1 { font-size: 26px; }
  .article-container { padding: 0 16px 60px; }
  .article-content { font-size: 16px; }
  .article-content h2 { font-size: 22px; margin: 36px 0 12px; }
  .article-content h3 { font-size: 18px; }
  .article-meta { gap: 8px; font-size: 13px; }
  .cta-section { padding: 28px 20px; }
}