/* desktop 
@media only screen and (min-width: 1024px) and (max-width: 1100px) {
    .navigation ul.menu { font-size: 16px; }
}*/

/* desktop */
@media only screen and (min-width: 1024px) {
    /*hide desktop */
    .mobilemenu, .hamburger { display: none; }
}

/* navigation early break */
@media only screen and (max-width: 1150px) {
    .navigation ul.menu {
        font-size: var(--fontsize-s);
    }
}

/* blue intro padding umbruch */
@media only screen and (max-width: 1500px) {
    .container.intro {
        max-width: 100%;
        padding: 0;
        margin-bottom: 100px;

        .page-intro-container {
            padding: 0 30px;
        }
    }

}

/* mobile */
@media only screen and (max-width: 1023px) {
    /*page intro */
    .container.intro {
        .page-intro-container {
            .page-intro-wrapper {
                gap: 50px;
                flex-wrap: wrap;
            }
        }
    }

    /* Job */
    .job-facts-wrapper {
        flex-wrap: wrap;
        gap: 35px;
        margin-top: 20px;
    }




    /*hide mobile */
    #hauptmenue, body:not(.home) .intro_jump { display:none !important; }

    .wp-block-group {
        margin-bottom: 100px;
    }

    #maincontent {
        .maincontent-wrapper {
            padding-top: 50px;
        }
    }

    /*.container.intro {
        height: calc(100dvh - 120px);
    }*/

    body:not(.home) .container.intro {
        height: auto;
    }

    /* Hamburger */
    .hamburger .line {
        width: 30px;
    }
    

    .mobilemenu {
        z-index: 9;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        top: 100px; 
        display: grid;
        justify-content: center;
        align-items: center;
        align-content: center;
        font-size: 36px;
        font-size: clamp(1.875rem, 0.625rem + 6.6667vw, 2.5rem);
        font-weight: 500;
        text-align: center;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.5s ease;
    }

    .mobilemenu.visible {
        opacity: 1;
        pointer-events: auto;
        transition: opacity 0.5s ease;
        padding-top: 0;
        overflow-x: auto;
        display: block;
    }

    .btn_menu {
        margin-top: 50px;

        a {
            font-size: 14px;
            background: var(--color-black);
            color: var(--color-white);
            border-radius: 8px;
            padding: 3px 10px;
        }
    }
    .footer {
        .footer_grid {
            grid-template-columns: 1fr;
            justify-items: start;
            gap: 50px;
            margin: 0 0 100px 0;
        }
    }

    .footer_col .menu {
        display: grid;
        gap: 10px;
    }

    .footer_list {
        gap: 10px;
    }

    .call2action {
        display:grid;
        margin: 100px 0 100px 0;
        grid-template-columns: 1fr;
        gap: 125px;
    }

    .intro-text-1 {
        margin-bottom: 10px;
    }


    .container.intro {
        gap: 50px;
        padding-top:0;
        padding-bottom:0;
    }

    .container.intro.startseite {
        gap: 0px;
        margin-bottom: 0px;
    }


    /*.sticky_menu {
        right: 30px;
        bottom: 85px;
    }
    
    .bottom_out .sticky_menu {
        bottom: 100px;
    }
    
    .sticky_menu_toggle {
        bottom: 15px;
        right: 25px;
    }
    
    .bottom_out .sticky_menu_toggle, .bottom_out .announcement {
        bottom: 25px;
    }*/

    .announcement {
        bottom: 25px;
        left: 25px;
        flex-wrap: wrap;
        right: 25px;
    }


    /* Post Archiv */
    .post_archiv_wrapper {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* Socket */
    .socket {
        .socket_content {
            flex-wrap: wrap;
            gap: 20px;

            .socket_col {
                flex-wrap: wrap;
            }
        }
    }

    /* call2teilen */
    .call2teilen {
        display:grid;
        margin: 100px 0 100px 0;
        grid-template-columns: 1fr;
        gap: 125px;
    }

    /* aktuelles */
    .aktuelles {
        .aktuelles-post-wrapper {
            grid-template-columns: repeat(1, 1fr);
            gap: 50px;
        }
    }

    /* Post Gutenberg */
    .single-post .maincontent-wrapper {
        > * {
            margin-bottom: 50px;
        }

        > .wp-block-image {
            margin-left: 0;
            margin-right: 0;
        }
    }

    /* Socials */
    .socials {
        gap: 15px;
    }


    /* Intro Startseite */
    .container.intro.startseite {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto;


        .intro-section.left {
            grid-column: 1;
            grid-row: 1;
            min-height: 50svh;

            &::before {

            }

            .intro-section-left-wrapper {

                .intro-section-left-title {

                }

                .intro-section-left-subheadline {

                }
            }
        }

        .intro-section.right {
            grid-column: 1;
            grid-row: 2;

            .intro-section-right-wrapper {
                flex-direction: column-reverse;


                .intro-section-right-introtext {
                    padding: 75px 25px 0px 25px;

                    .intro-section-right-title {

                        h1 {

                        }
                    }

                    .intro-section-right-text {

                    }
                }

                .intro-section-right-box {
                    padding: 50px 25px;

                    &::before {
                        top: -8px;
                        left: 50%;
                        transform: translateX(-50%) rotate(45deg);
                    }
                }
            }
        }

    }

    /* Borderbox */
    .wp-block-columns {
        .borderbox {
            padding: 50px 30px;
        }
    }


    /* Submenu Toggle */
    .submenu-toggle {
        height: 40px;
        top: 10px;
        position: relative;

        svg {
            width: 40px;
            height: 40px;
        }
    }
    


}




/* Gutenberg Mobile */
@media only screen and (max-width: 781px) {
    .header {
        margin-bottom: 25px;
    }

    .mob_rev .wp-block-columns {
        flex-direction: column-reverse;
    }
    .wp-block-image {
        max-width: 500px;
    }

    .call2action {
        padding:30px;
        gap: 50px;
    }

    .call2teilen {
        padding:40px;
        gap: 50px;
    }

    /* Intro Startseite */
    .container.intro.startseite {
        & .intro-section.left {
            & .intro-section-left-wrapper {
                & .intro-section-left-title {
                    &::after {
                        bottom: -10px;
                        height: 15px;
                    }
                }
            }
        }
    }

}

@media only screen and (max-width: 550px) {
    .logowall {
        .logowall_logo {
            height: 23px;
        }
    }

    .aktuelles {

        .slide_navigation:after {
            right: -1px;
        }

        .swiper {
            padding: 50px 25px !important;
            background: var(--color-black);
            border-radius: var(--border-radius-md);

            .aktuelles-text {

                .aktuelles-auszug {
                    font-size: 16px;
                    line-height: 1.35em;
                }
    
                .aktuelles-subheadline {
                    font-size: 16px;
                }
            }
        }

    }

    .wp-block-gallery.has-nested-images figure.wp-block-image:not(#individual-image) {
        width: 100%;
    }

    .home .wp-block-gallery > .wp-block-image:nth-child(n+4) {
        display: none !important;
    }

    .wp-block-gallery > .wp-block-image:nth-child(n+6) {
        display: none !important;
    }

    .other-posts {
        grid-template-columns: repeat(1, minmax(0, 1fr));
    }

    /* Post Archiv */
    .post_archiv_wrapper {
        grid-template-columns: repeat(1, minmax(0, 1fr));
    }

    /* Leichter lesen toggle */
    .leichterlesen_toggle {

        a.toggle-btn {
            padding: 7px 10px;
        }

        a.toggle-btn.active {
            padding: 12px 20px;
        }
    }
    
    
 }