/* -------------------
    Responsive/Mobile
---------------------- */

/* Mobile Breakpoint for right-aligned Menu */
@media (max-width: 1150px) {
    header {
        justify-content: flex-end;
        padding-right: 5.2rem;
    }

    .nav-menu {
        margin-left: auto;
        margin-right: 0;
    }
}

/* Mobile Breakpoint for Burger Menu */
@media (max-width: 850px) {
    .nav-menu {
        display: none;
    }

    .burger-menu {
        display: flex;
    }

    #theme-toggle {
        right: 4.5rem;
    }
}

/* Mobile Breakpoint for Footer */
@media (max-width: 750px) {
    footer .footer-content p:nth-child(1) {
        flex-direction: column;
        gap: 0.3rem;
    }

    /* Trennstriche ausblenden auf schmalen Screens */
    footer .footer-content p:nth-child(1) .seperator {
        display: none;
    }
}

/* Mobile Breakpoint for Opening Hours & Map */
@media (max-width: 550px) {
    .opening-hours .oh-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.2rem;
    }

    .oh-time {
        font-size: 0.95rem;
    }

    .map-container iframe {
        height: 250px;
    }
}

/* Mobile Breakpoints for Gallery */
@media (max-width: 1050px) {
    .gallery-grid { column-count: 3; }
}

@media (max-width: 700px) {
    .gallery-grid { column-count: 2; }
    
    .gallery-item img,
    .gallery-item video {
        max-height: 230px;
    }
}

@media (max-width: 300px) {
    .gallery-grid { column-count: 1; }
}

/* Mobile Breakpoint für Accordion */
@media (max-width: 800px) {
    summary {
        justify-content: center;
        text-align: center;
        padding: 1rem 0.5rem;
        position: relative; 
    }

    details.nested-details > summary {
        justify-content: center;
        text-align: center;
        position: relative;
    }
    
    summary::after {
        position: absolute; 
        right: 1.5rem; 
        margin-left: 0; 
    }
}

/* ------------------------------------
    Hover Effects and Loading Screen
    (only for Mouse Devices)
--------------------------------------- */

@media (hover: hover) and (pointer: fine) {
    /* Hover */
    a:hover {
        color: var(--link-hover-col);
        text-decoration: underline;
    }

    .button:hover {
        background: var(--button-hover-bg-col);
        color: var(--button-text-col);
        text-decoration: none;
    }

    /* Menu */
    .nav-menu li a:hover {
        text-decoration: none;
        border-bottom: 2px solid var(--menu-marked-col);
    }

    .burger-menu:hover {
        transform: translateY(-50%) scale(1.2);
    }

    .burger-menu:hover span{
        background: var(--menu-hover-col);
    }

    .mobile-menu-header:hover {
        color: var(--menu-hover-col);
        transform: scale(1.2);
    }

    .mobile-nav-menu li a:hover {
        color: var(--menu-link-hover-col);
        transform: scale(1.2);
    }

    /* Accordion */
    summary:hover {
        background-color: var(--accordion-summary-bg-hover-col);
    }

    details.nested-details > summary:hover {
        background-color: var(--accordion-summary-bg-hover-col);
    }

    /* Theme Toggle */
    #theme-toggle:hover {
        color: var(--theme-toggle-hover-col);
        transform: scale(1.3);
    }

    /* Lightbox */
    .lightbox button:hover {
        color: var(--lightbox-button-hover-col);
        transform: scale(1.3);
    }

    .lightbox .prev:hover,
    .lightbox .next:hover  {
        transform: translateY(-50%) scale(1.3);
        color: var(--lightbox-button-hover-col);
    }

    /* Loading Screen */
    #resize-loader {
        position: fixed;
        inset: 0; 
        width: 100vw;
        height: 100vh;
        background: var(--loading-screen-col);
        background-image: var(--loading-screen-img);
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        z-index: 9999;
        opacity: 0;
        pointer-events: none;
        transition: opacity 200ms ease;
        will-change: opacity;
    }

    #resize-loader.visible {
        opacity: 1;
        pointer-events: all;
    }
}

/* ------------------
    Active Effects
--------------------- */

a:active {
    color: var(--link-active-col);
    text-decoration: underline;
}

.button:active {
    background: var(--button-active-bg-col);
    color: var(--button-text-col);
    text-decoration: none;
}

.nav-menu li a.active {
    border-bottom: 2px solid var(--menu-marked-col);
}


.burger-menu:active {
    transform: translateY(-50%) scale(1.0);
}

.burger-menu:active span{
    background: var(--menu-active-col);
}

.mobile-menu-header:active {
    color: var(--menu-active-col);
    transform: scale(1.0);
}

.mobile-nav-menu li a:active {
    color: var(--menu-link-active-col);
    transform: scale(1.0);
}

/* Accordion */
summary:active {
    background-color: var(--accordion-summary-bg-active-col);
}

details.nested-details > summary:active {
    background-color: var(--accordion-summary-bg-active-col);
}

.lightbox button:active {
    color: var(--lightbox-button-active-col);
    transform: scale(1.3);
}

.lightbox .prev:active,
.lightbox .next:active  {
    transform: translateY(-50%) scale(1.3);
    color: var(--lightbox-button-active-col);
}

/* Theme Toggle */
#theme-toggle:active {
    color: var(--text-header-col);
    transform: scale(1);
}