/* ═══════════════════════════════════════════════════
   RESPONSIVE.CSS — All Media Queries
   KI Telefon Agent · Rebuild 2026
   ═══════════════════════════════════════════════════ */

/* ─── Tablet (≤ 1024px) ─── */
@media (max-width: 1024px) {
    .hero-split {
        gap: 2rem;
    }

    .split {
        gap: 2rem;
    }

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

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

/* ─── Tablet Portrait (≤ 768px) ─── */
@media (max-width: 768px) {
    /* Navigation */
    .site-nav {
        padding: 0.75rem 4%;
    }

    .nav-right .nav-link,
    .nav-badge {
        display: none;
    }

    .nav-hamburger {
        display: flex;
    }

    .site-nav {
        justify-content: space-between;
    }

    /* Hero */
    .hero {
        padding: 7rem 5% 3rem;
        min-height: auto;
    }

    .hero-split {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .hero-content {
        max-width: 100%;
    }

    .hero h1 {
        font-size: 2rem;
    }

    .hero-subtitle {
        font-size: 1rem;
    }

    .hero-media {
        max-width: 520px;
        margin: 0 auto;
    }

    /* Sections */
    .section {
        padding: 2.5rem 5%;
    }

    .section-header h2 {
        font-size: 1.75rem;
    }

    /* Grids → single column */
    .features-grid {
        grid-template-columns: 1fr;
    }

    .grid-2,
    .grid-3,
    .grid-4 {
        grid-template-columns: 1fr;
    }

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

    .split--reverse {
        direction: ltr;
    }

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

    .pricing-extras {
        grid-template-columns: 1fr;
    }

    /* Phone CTA */
    .phone-number-display {
        padding: 1rem 1.25rem;
        width: 100%;
        justify-content: center;
    }

    .phone-digits {
        font-size: 1.35rem;
    }

    /* CTA Section */
    .cta-section {
        padding: 3rem 5%;
    }

    /* Scenario Box */
    .scenario-box {
        padding: 1.5rem;
    }

    /* Footer */
    .footer-links {
        gap: 1rem;
    }

    .footer-trust {
        gap: 1rem;
    }

    /* Logo bar */
    .logo-bar-inner {
        gap: 2rem;
    }

    .logo-bar img {
        height: 24px;
    }

    /* Audio demos */
    .audio-demo-thumb {
        width: 60px;
        height: 60px;
    }

    /* Cookie banner */
    .cookie-banner-inner {
        flex-direction: column;
        text-align: center;
    }

    .cookie-banner-text {
        min-width: auto;
    }

    .cookie-banner-actions {
        justify-content: center;
    }

    /* Modal */
    .modal-content {
        padding: 2rem 1.5rem;
        margin: 1rem;
    }
}

/* ─── Mobile (≤ 480px) ─── */
@media (max-width: 480px) {
    .hero h1 {
        font-size: 1.75rem;
    }

    .phone-icon-wrapper {
        width: 40px;
        height: 40px;
    }

    .phone-digits {
        font-size: 1.2rem;
    }

    .btn {
        padding: 0.75rem 1.5rem;
        font-size: 0.9rem;
        width: 100%;
    }

    .hero-context {
        font-size: 0.75rem;
        padding: 0.4rem 1rem;
    }

    .video-play-btn {
        width: 56px;
        height: 56px;
    }

    .video-play-btn svg {
        width: 22px;
        height: 22px;
    }

    .feature-card {
        padding: 1.25rem;
    }

    .pricing-card {
        padding: 1.5rem;
    }

    .pricing-price {
        font-size: 2rem;
    }

    .audio-demo {
        grid-template-columns: 1fr;
    }

    .audio-demo-image {
        height: 180px;
    }
}