/* ============================================
   OptiAI — Responsive (Mobile-First)
   Breakpoint: 768px
   ============================================ */

@media (max-width: 768px) {

  /* Navigation */
  .nav-links,
  .nav-cta { display: none; }
  .hamburger { display: flex; }

  /* Hero */
  .hero-container {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .hero-content .cta-block { align-items: center; }
  .hero-subtext { max-width: 100%; }

  .process-flow {
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
  }

  .process-arrow { transform: rotate(90deg); }

  /* KPI Band */
  .kpi-container { flex-direction: column; gap: var(--space-3); }
  .kpi-divider   { width: 40px; height: 1px; }

  /* Cards Grid */
  .cards-grid--3 { grid-template-columns: 1fr; }

  /* Steps */
  .steps-grid {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }

  .step-connector { display: none; }
  .step-item { padding: var(--space-3) 0; }

  /* Trust Stats */
  .trust-stats { grid-template-columns: 1fr; }

  /* Prozess-Schritte Texte (unter SVG-Animation) */
  .process-steps-text {
    grid-template-columns: 1fr;
    gap: var(--space-2);
  }

  .process-step-text {
    border-top: none;
    border-left: 3px solid rgba(29,78,216,0.2);
    padding: var(--space-2) var(--space-3);
    text-align: left;
  }

  .process-step-text--highlight {
    border-left-color: rgba(6,182,212,0.35);
  }

  /* Footer */
  .footer-container {
    grid-template-columns: 1fr;
  }

  .footer-top-inner {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }

  .footer-links {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
  }

  .footer-bottom-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
  }

  /* Founder */
  .founder-inner {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .founder-photo {
    width: 160px;
    margin: 0 auto;
  }

  .founder-content p { max-width: 100%; }

  /* Sections Padding */
  section { padding-block: 60px; }
}

/* ---- Tablet: 769px – 1024px ---- */
@media (min-width: 769px) and (max-width: 1024px) {
  .cards-grid--3 {
    grid-template-columns: repeat(2, 1fr);
  }

  .trust-stats {
    grid-template-columns: repeat(2, 1fr);
  }

  .footer-top-inner {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
  }
}

/* ---- Sehr kleine Screens: < 400px ---- */
@media (max-width: 400px) {
  section { padding-block: 48px; }

  .kpi-number { font-size: 26px; }

  .cookie-banner {
    flex-direction: column;
    align-items: flex-start;
  }

  .nav-trust-badge { display: none; }
}