/* ==========================================================================
   8. MEDIA QUERIES (RESPONSIVE)
   ========================================================================== */
@media (max-width: 991px) {
    :root {
        --header-height: 65px;
    }

    .navbar-collapse {
        background-color: var(--bg-header-footer);
        padding: 1rem;
        border-radius: 0 0 5px 5px;
        box-shadow: 0 10px 15px rgba(0,0,0,0.3);
    }

    .navbar-brand img {
        height: 40px !important;
    }

    .nav-link {
        padding: 10px 0;
        border-bottom: 1px solid var(--border-sidebar);
    }

    .gab {
        margin-top: 115px !important; 
    }

    .gab > .hero-wrapper:first-child,
    .gab > .hero-section:first-child {
        margin-top: -115px !important; /* Zieht den Hero-Bereich wieder nach oben */
    }
}

@media (min-width: 992px) {

    .navbar-brand {
        margin-right: auto !important;
        margin-left: 0 !important;
    }

    .ticker-container {
        display: flex;
        justify-content: center;
    }

    .ticker-wrapper {
        animation: none !important;
        padding-left: 0;
        display: block;
        transform: none !important;
        text-align: center;
    }

    .gab {
        margin-top: 50px !important;
    }

    #flyerModal .modal-dialog {
        margin-top: 9rem !important; /* Gibt dem Desktop ordentlich Luft nach oben */
    }

.gab > .hero-wrapper:first-child, 
    .gab > .hero-section:first-child {
        margin-top: -50px !important;
    }
}

@media (max-width: 767px) {
    .footer-custom .row > div {
        margin-bottom: 2rem;
    }
    
    .footer-icon {
        font-size: 1.8rem;
    }
}

@media (max-width: 768px) {
    .event-hero { padding: 120px 0 60px 0; }
    .display-3 { font-size: 2.5rem; }
}