/* ============================================================
   LUMEXI – RESPONSIVE
   Mobile-first angepasste Breakpoints: 1024 / 760 / 480
   ============================================================ */

/* ---------- ≤ 1024px (Tablet) ---------- */
@media (max-width: 1024px) {
    .hero-inner { grid-template-columns: 1fr; gap: 3rem; }
    .hero { min-height: auto; padding-block: 8.5rem 5rem; }
    .hero-visual { order: 2; }
    .hero-copy { text-align: center; }
    .hero-copy .badge, .hero-actions, .hero-platforms { justify-content: center; }
    .hero-desc { margin-inline: auto; }

    .tutor-grid, .lessons-grid { grid-template-columns: 1fr; }
    .tutor-visual { order: 2; }

    .steps { grid-template-columns: repeat(2, 1fr); }
    .step::after { display: none; }

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

    .feature-panel.panel-split { grid-template-columns: 1fr; }

    .showcase-track { flex-wrap: wrap; }
    .showcase-item:nth-child(odd),
    .showcase-item:nth-child(3) { transform: none; }

    .footer-grid { grid-template-columns: 1fr 1fr; }
    .footer-brand { grid-column: 1 / -1; }
}

/* ---------- ≤ 760px (Mobile) ---------- */
@media (max-width: 760px) {
    .nav-links { display: none; }
    .nav-burger { display: flex; }
    .nav-cta.nav-cta-desktop { display: none; }

    .hero-title { font-size: clamp(2.3rem, 11vw, 3.2rem); }
    .hero-actions .btn { flex: 1 1 100%; }

    .features-grid { grid-template-columns: 1fr; }

    .exercise { grid-template-columns: 1fr; }
    .exercise-question { border-right: 0; border-bottom: 1px solid var(--color-border); }

    .stats-band { grid-template-columns: 1fr; }

    .steps { grid-template-columns: 1fr; }

    .audience-grid { grid-template-columns: 1fr; }

    .phone { width: min(260px, 78vw); }
    .phone .phone-screen { font-size: 9px; }

    .editor { font-size: 0.7rem; }

    .cta-actions .btn { flex: 1 1 100%; }

    .footer-grid { grid-template-columns: 1fr; gap: 2rem; }
    .footer-bottom { flex-direction: column; align-items: flex-start; }

    section { padding-block: 4.5rem; }
}

/* ---------- ≤ 480px (kleines Mobile) ---------- */
@media (max-width: 480px) {
    .hero-glow.g1 { width: 380px; height: 380px; top: -140px; left: -120px; }
    .hero-glow.g2 { width: 320px; height: 320px; }

    .ai-bubble { --bubble-size: clamp(120px, 38vw, 150px); }

    .chat-msg { max-width: 94%; }
}

/* ---------- Print: Inhalte sauber ausdrucken ---------- */
@media print {
    .site-nav, .mobile-menu, .hero-bg, .ai-bubble::before, .ai-bubble::after, body::after { display: none !important; }
    body { background: #fff; color: #111; }
}