/* ============================================================
   MINIMAL LIVING — responsive.css
   Mobile-first Breakpoints
   Breakpoints: sm 480px | md 768px | lg 1024px | xl 1280px
   ============================================================ */


/* ── TABLET — max 1024px ── */
@media (max-width: 1024px) {

    /* Warum Jetzt */
    .why-now__container {
        grid-template-columns: 1fr;
        gap: 48px;
    }

    /* Vorteile */
    .advantages__grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 16px;
    }
    .advantages__card--featured {
        transform: translateY(-4px) scale(1.01);
    }

    /* Referenzen */
    .references {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Footer */
    .footer__top {
        grid-template-columns: 1fr 1fr;
        gap: 32px;
    }
    .footer__brand { grid-column: 1 / -1; }

}


/* ── TABLET KLEIN — max 900px ── */
@media (max-width: 900px) {

    /* Navbar */
    .navbar__hamburger { display: flex; }

    .navbar__menu {
        position: fixed;
        top: 0;
        right: 0;
        width: min(320px, 85vw);
        height: 100dvh;
        background: var(--color-primary);
        border-left: 1px solid rgba(201,168,76,0.2);
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        padding: 80px 32px 32px;
        gap: 8px;
        transform: translateX(100%);
        transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
        box-shadow: -8px 0 40px rgba(0,0,0,0.4);
        z-index: 999;
        overflow-y: auto;
    }
    .navbar__menu.is-open { transform: translateX(0); }

    /* Mobile Menu Overlay */
    .navbar__menu::before {
        content: '';
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,0.5);
        z-index: -1;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.3s ease;
    }
    .navbar__menu.is-open::before {
        opacity: 1;
        pointer-events: all;
    }

    .navbar__link {
        font-size: 1.1rem;
        padding: 12px 0;
        width: 100%;
        border-bottom: 1px solid rgba(255,255,255,0.06);
        color: rgba(255,255,255,0.75);
    }
    .navbar__link::after { display: none; }

    .navbar__cta {
        margin-top: 16px;
        width: 100%;
        justify-content: center;
    }

    /* Projekt Cards */
    .project__cards {
        grid-template-columns: 1fr 1fr;
    }

    /* Hero Stats */
    .hero__stats {
        flex-wrap: wrap;
        gap: 16px 24px;
    }
    .hero__stat-divider { display: none; }

}


/* ── MOBIL — max 768px ── */
@media (max-width: 768px) {

    /* Globale Section-Abstände */
    .why-now,
    .project,
    .profitability,
    .advantages,
    .social-proof,
    .lead-form,
    .faq {
        padding: 64px 0;
    }

    /* Hero */
    .hero__container {
        padding-top: calc(56px + 68px);
        padding-bottom: 56px;
    }
    .hero__headline {
        font-size: clamp(2.2rem, 8vw, 3.5rem);
        line-height: 1.1;
    }
    .hero__ctas {
        flex-direction: column;
        align-items: flex-start;
    }
    .btn--large {
        width: 100%;
        justify-content: center;
        padding: 18px 24px;
        font-size: 1rem;
    }

    /* Trust Bar — scrollbar auf Mobile */
    .trust-bar__container {
        overflow-x: auto;
        justify-content: flex-start;
        gap: 0;
        padding: 0 var(--container-pad);
        scrollbar-width: none;
        -ms-overflow-style: none;
        height: auto;
        padding-top: 16px;
        padding-bottom: 16px;
    }
    .trust-bar__container::-webkit-scrollbar { display: none; }
    .trust-bar__item {
        flex: 0 0 auto;
        padding: 0 16px;
        border-right: 1px solid rgba(255,255,255,0.1);
    }
    .trust-bar__item:last-child { border-right: none; }
    .trust-bar__text { font-size: 0.7rem; }

    /* Projekt Cards — einzeln auf Mobil */
    .project__cards {
        grid-template-columns: 1fr;
    }

    /* Slider Buttons kleiner */
    .slider__btn {
        width: 36px;
        height: 36px;
        font-size: 1.2rem;
    }
    .slider__btn--prev { left: 8px; }
    .slider__btn--next { right: 8px; }

    /* Rentabilitätstabelle */
    .profit-table td {
        padding: 12px 14px;
        font-size: 0.875rem;
    }

    /* Vorteile — 1 Spalte */
    .advantages__grid {
        grid-template-columns: 1fr;
        max-width: 480px;
        margin-left: auto;
        margin-right: auto;
    }
    .advantages__card--featured {
        transform: none;
        order: -1;
    }
    .advantages__card--featured:hover {
        transform: translateY(-4px);
    }

    /* Referenzen — 2 Spalten */
    .references {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Lead Form */
    .form__row--two-col { flex-direction: column; }
    .lead-form__card { padding: 24px 20px; }

    /* Footer */
    .footer__top {
        grid-template-columns: 1fr;
        gap: 32px;
        padding-top: 48px;
        padding-bottom: 40px;
    }
    .footer__bottom {
        flex-direction: column;
        text-align: center;
        gap: 8px;
    }

    /* Section Title */
    .section-title {
        font-size: clamp(1.7rem, 5vw, 2.2rem);
    }

}


/* ── MOBIL KLEIN — max 480px ── */
@media (max-width: 480px) {

    /* Hero */
    .hero__headline { font-size: 2.2rem; }
    .hero__sub { font-size: 0.95rem; }
    .hero__stat-number { font-size: 1.4rem; }
    .hero__stat-label { font-size: 0.68rem; }
    .hero__stats { gap: 12px; }

    /* Referenzen — 1 Spalte */
    .references { grid-template-columns: 1fr; }

    /* FAQ */
    .faq__question {
        padding: 16px 16px;
        font-size: 0.9rem;
    }

    /* Profitability */
    .profit-table td { padding: 10px 12px; font-size: 0.82rem; }
    .profitability__container { padding: 0 16px; }

    /* Formular */
    .lead-form__card { padding: 20px 16px; }
    .lead-form__headline { font-size: 1.8rem; }

    /* Navbar Logo */
    .navbar__logo-fallback { font-size: 1rem; }

}


/* ── GROSS — min 1280px ── */
@media (min-width: 1280px) {

    .hero__container { padding-top: calc(120px + 68px); }

    .why-now__container { gap: 96px; }

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

}


/* ── PRINT ── */
@media print {
    .navbar,
    .btn--pulse,
    .slider,
    .hero__bg,
    .lead-form,
    .footer__links { display: none !important; }

    body { color: #000; background: #fff; }
    .hero { min-height: auto; padding: 40px 0; }
    .hero__overlay { display: none; }
    .hero__content { color: #000; }
    .hero__headline, .hero__stat-number { color: #000; }
}