/* public/assets/css/frontend/base/responsive.css

/* ==========================================================================
 * Responsive Design-Anpassungen
 * ========================================================================== */

/* ==========================================================================
 * INHALTSVERZEICHNIS:
 * 1. KLEINE MOBILGERÄTE (BIS 575.98PX)
 * 2. MITTELGROSSE MOBILGERÄTE (576PX - 767.98PX)
 * 3. TABLETS (768PX - 991.98PX)
 * 4. KLEINE DESKTOPS (992PX - 1199.98PX)
 * 5. NAVIGATIONSANPASSUNGEN
 * 6. TEXTSEITEN-ANPASSUNGEN
 * 7. TOUCH-GERÄTE
 * ========================================================================== */


/* ==========================================================================
 * 1. KLEINE MOBILGERÄTE (BIS 575.98PX)
 * ========================================================================== */

/* ---------- 1.1 Smartphone-Portrait-Anpassungen ---------- */
@media (max-width: 575.98px) {
    .hero {
        padding: 6rem 0 3rem;
        text-align: center;
    }

    .hero__title {
        font-size: 2rem;
    }

    .section-title {
        font-size: 1.75rem;
    }

    .prozess-timeline__line {
        display: none; /* Linie ausblenden, da sie auf kleinen Geräten nicht sinnvoll darstellbar ist */
    }

    .prozess-step {
        margin-bottom: 2rem;
    }

    .preise-card,
    .contact-card {
        padding: 1.5rem !important;
    }

    .footer {
        text-align: center;
    }

    .footer__social,
    .footer__references {
        justify-content: center;
        margin-top: 1.5rem;
    }
}


/* ==========================================================================
 * 2. MITTELGROSSE MOBILGERÄTE (576PX - 767.98PX)
 * ========================================================================== */

/* ---------- 2.1 Smartphone-Querformat & kleine Tablets ---------- */
@media (min-width: 576px) and (max-width: 767.98px) {
    .hero {
        padding: 6.5rem 0 3.5rem;
    }

    .hero__title {
        font-size: 2.25rem;
    }

    .prozess-timeline__line {
        display: none;
    }

    .prozess-step {
        margin-bottom: 2rem;
    }
}


/* ==========================================================================
 * 3. TABLETS (768PX - 991.98PX)
 * ========================================================================== */

/* ---------- 3.1 Tablets & kleine Laptops ---------- */
@media (min-width: 768px) and (max-width: 991.98px) {
    .hero {
        padding: 7rem 0 4rem;
    }

    .hero__title {
        font-size: 2.5rem;
    }

    .navbar-nav .nav-link {
        padding: 0.75rem 0.5rem;
    }
}


/* ==========================================================================
 * 4. KLEINE DESKTOPS (992PX - 1199.98PX)
 * ========================================================================== */

/* ---------- 4.1 Standard-Desktops ---------- */
@media (min-width: 992px) and (max-width: 1199.98px) {
    .navbar-nav .nav-link {
        padding: 1rem 0.5rem;
    }
}


/* ==========================================================================
 * 5. NAVIGATIONSANPASSUNGEN
 * ========================================================================== */

/* ---------- 5.1 Header auf kleineren Geräten ---------- */
@media (max-width: 991.98px) {
    .site-header {
        padding: 0.75rem 0;
    }

    .navbar-collapse {
        background-color: white;
        padding: 1rem;
        border-radius: 0.5rem;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
        margin-top: 0.5rem;
    }

    .navbar-nav .nav-link {
        padding: 0.75rem 0;
    }

    .navbar-nav .nav-item:last-child {
        margin-top: 0.5rem;
    }

    .navbar-nav .btn {
        display: block;
        width: 100%;
        text-align: center;
    }
}


/* ==========================================================================
 * 6. TEXTSEITEN-ANPASSUNGEN
 * ========================================================================== */

/* ---------- 6.1 Statische Seiten auf kleinen Geräten ---------- */
@media (max-width: 767.98px) {
    .impressum-section,
    .datenschutz-section,
    .agb-section,
    .error-section {
        margin-top: 70px;
        padding-top: 1rem;
    }

    .card {
        padding: 1rem !important;
    }
}


/* ==========================================================================
 * 7. TOUCH-GERÄTE
 * ========================================================================== */

/* ---------- 7.1 Hover-Effekte auf Touch-Geräten ---------- */
@media (hover: none) {
    .card:hover,
    .usp-card:hover,
    .beispiele-card:hover {
        transform: none;
        box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
    }

    .btn:hover {
        transform: none;
    }
}