/*Vars*/
:root{
    --mainpadding: 5dvw;
    --max-width: 100dvw;
    --distance: calc(var(--mainpadding) / 2);

    --mainborder: 2px solid var(--wp--preset--color--ci);
    --border-radius: 0.5dvw;
    --box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.175);

	font-size: 62.5%;

     --maintrans: all 0.3s ease-in-out;
    scroll-behavior: smooth;
}

/*Format*/

.wp-block-search__button-inside{
    gap: 0;
    position: relative;

    button{
        background: var(--wp--preset--color--ci);
        color: var(--wp--preset--color--light);
        margin: 0;
        transition: var(--maintrans);

        &:hover{
            background: var(--wp--preset--color--dark);
        }
    }

    .wp-block-search__inside-wrapper{
        padding: 0;
        border: 0;

        input{
            border-bottom: var(--mainborder);
        }
    }
}


.home .wp-block-categories-list,
.page .wp-block-categories-list{
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: var(--distance);
    padding: 0;
    margin: 0;

     &>* {
        flex: 0 0 calc((100% - 3 * var(--distance)) / 4);
    }

    li{
        a{
            color: var(--wp--preset--color--ci);
            background: transparent;
            border-radius: var(--border-radius);
            padding: var(--distance);
            box-sizing: border-box;
            width: 100%;
            font-size: clamp(1em, 1.5dvw, 1.5em);
            text-align: center;
            display: block;
            border: var(--mainborder);

            transition: var(--maintrans);

            &:hover{
                cursor: pointer;
                background-color: var(--wp--preset--color--dark);
                color: var(--wp--preset--color--light);
                border-color: var(--wp--preset--color--dark);
            }
        }
    }
}

.widecoltext{
    max-width: 50%;
    padding-right: 3em;
    box-sizing: border-box;
}

.widecol{
    width: 50dvw;
    /*margin-left: calc((var(--max-width) / 2) - 50vw - var(--mainpadding)) !important; */
    margin-right: calc((var(--max-width) / 2) - 50dvw) !important;
    margin-right: calc(-1 * var(--mainpadding)) !important;

    video{
        aspect-ratio: 1 / 1;
        height: auto;
        width: 100%;
        object-fit: cover;
        border-radius: var(--border-radius);
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
        max-height: 750px;
    }
}

.newsslide {

    --gap: 2em;
    gap: var(--gap) !important;
    padding-bottom: var(--gap);

    &>* {
        scroll-snap-align: center;
        flex: 0 0 calc((100% - (3 * var(--gap))) / 4);
    }
}

 hr{
    height: 2px;
    width: 100%;
    border: 0;
    background-color: var(--wp--preset--color--mid);
    margin: 1.5dvh 0;
}

.cicolor{
    color: var(--wp--preset--color--ci);
}

blockquote{
    margin: 0; 

    &::before{
        content: '“';
        font-size: calc(1 * var(--mainpadding));
        line-height: 0;
        height: 0.125ch;
        display: block;
        color: var(--wp--preset--color--ci);
    }

    h2{
        margin: 0 !important;
        font-weight: normal;
        font-size: 2dvw !important;
        line-height: 1.2;
    }
}

.btn{
    font-size: 1em;
    border: none;
    transition: var(--maintrans);
    padding: .5em 1em;
    background-color: var(--wp--preset--color--ci);
    color: var(--wp--preset--color--light);
    text-align: center;
    text-decoration: none;
    border-radius: var(--border-radius);
    display: inline-block;

    &:hover{
        background-color: var(--wp--preset--color--dark);
    }
}


.card {
    border: 0;
    transition: var(--maintrans);
    /*height: 100%;*/
    margin-bottom: 2em;
    box-sizing: border-box;

    &.ownarticle{
            background-color: var(--wp--preset--color--mid);

            figure{
            position: relative;

            &::before{
                content: '';
                position: absolute;
                width: 2em;
                height: 2em;
                top:1em;
                right: 1em;
                border-radius: 4em;
                background-color: var(--wp--preset--color--ci);
                background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='white' viewBox='0 0 16 16'%3E%3Cpath d='m13.498.795.149-.149a1.207 1.207 0 1 1 1.707 1.708l-.149.148a1.5 1.5 0 0 1-.059 2.059L4.854 14.854a.5.5 0 0 1-.233.131l-4 1a.5.5 0 0 1-.606-.606l1-4a.5.5 0 0 1 .131-.232l9.642-9.642a.5.5 0 0 0-.642.056L6.854 4.854a.5.5 0 1 1-.708-.708L9.44.854A1.5 1.5 0 0 1 11.5.796a1.5 1.5 0 0 1 1.998-.001'/%3E%3C/svg%3E");
                background-size: 60%;
                background-position: center center;
                background-repeat: no-repeat;
                display: inline-block;

            }
        }
    }

}


.wp-block-query{

    .ownarticle{

        .card{
            background-color: var(--wp--preset--color--mid);
        }

        figure{
            position: relative;

            &::before{
                content: '';
                position: absolute;
                width: 2em;
                height: 2em;
                top:1em;
                right: 1em;
                border-radius: 4em;
                background-color: var(--wp--preset--color--ci);
                background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='white' viewBox='0 0 16 16'%3E%3Cpath d='m13.498.795.149-.149a1.207 1.207 0 1 1 1.707 1.708l-.149.148a1.5 1.5 0 0 1-.059 2.059L4.854 14.854a.5.5 0 0 1-.233.131l-4 1a.5.5 0 0 1-.606-.606l1-4a.5.5 0 0 1 .131-.232l9.642-9.642a.5.5 0 0 0-.642.056L6.854 4.854a.5.5 0 1 1-.708-.708L9.44.854A1.5 1.5 0 0 1 11.5.796a1.5 1.5 0 0 1 1.998-.001'/%3E%3C/svg%3E");
                background-size: 60%;
                background-position: center center;
                background-repeat: no-repeat;
                display: inline-block;

            }
        }
    }

}



.card .ccfic {
    display: none;
}
.card:hover {
    box-shadow: var(--box-shadow);
    z-index: 5;
}
.card:hover hr {
    background-color: var(--wp--preset--color--ci);
}
.card:hover h3,
.card:hover h4 {
    color: var(--wp--preset--color--ci);
}
.card:hover h3 a,
.card:hover h4 a {
    color: var(--wp--preset--color--ci);
    text-decoration: none;
}
.card h3,
.card h4 {
    font-size: 1.25em;
    color: var(--wp--preset--color--dark);
    transition: var(--maintrans);
}
.card h3 a,
.card h4 a {
    color: var(--wp--preset--color--dark);
    text-decoration: none;
    transition: var(--maintrans);
}
.card hr {
    height: 2px;
    background-color: var(--wp--preset--color--dark);
    -webkit-transition: var(--maintrans);
    transition: var(--maintrans);
    margin: 1em 0;
    border-top: 0;
    border-bottom: 0;
    opacity: 1;
}
.card .wp-block-columns {
    margin-bottom: 0;
}
.card .wp-block-post-featured-image a {
    display: block;
}
.card .wp-block-post-date,
.card .wp-block-post-terms {
    font-size: 0.75em;
}
.card figure img {
    -o-object-fit: cover;
    object-fit: cover;
    aspect-ratio: 16 / 9;
    width: 100%;
    max-width: unset;
    height: auto;
}
.card .wp-block-group__inner-container {
    padding: 0 2em 0 2em;
}
.card .wp-block-group__inner-container figure {
    margin-left: -2em;
    margin-right: -2em;
}

.card .wp-block-post-excerpt__more-link {
    padding: .5em 1em;
    background-color: var(--wp--preset--color--ci);
    color: #fff;
    text-align: center;
    text-decoration: none;
    margin: 0;
    border-radius: var(--border-radius);
}
.card .wp-block-post-excerpt__more-link:hover {
    background-color: var(--wp--preset--color--dark);
}


.card{
    --padding: 20px;

    padding-bottom: 1em;
    border-radius: var(--border-radius);

    p{
        margin-top: 1em;
        margin-bottom: 1em;
    }

    figure{
        margin-bottom: .25em;
    }

    img{
        border-top-left-radius: var(--border-radius);
        border-top-right-radius: var(--border-radius);
    }

    h3, h4{
        margin: 0;
        line-height: 1.2;

        &.wp-block-post-title{
            padding: 0 var(--padding);
        }
    }

    small{
        padding: 0 var(--padding);
    }

    > div{
        padding: 0 var(--padding);
        margin: 0;
    }

    .btn{
        margin: 0 var(--padding);
    }
}

/*Nav*/

nav{

    background-color: var(--wp--preset--color--ci);
    padding-right: var(--mainpadding);

    section{
        display: flex;
        justify-content: space-between;
        gap: var(--mainpadding);
        align-items: center;
    }
    

    .navbar-brand{
        width: 20vw;
        padding: 1em var(--mainpadding);

        img{
            width: 100%;
            height: auto;
        }

        .st0 {
            fill: var(--wp--preset--color--light);
        }
    }

    .nav-main{
        display: flex;
        flex-direction: row;
        gap: 1em;
        list-style: none;
        margin: 0;
        padding: 0;

        position: relative;
        z-index: 5;

        a{
            color: var(--wp--preset--color--light);
        }

        .sub-menu{
            position: absolute;
            opacity: 0;
            pointer-events: none;
            transition: var(--maintrans);
            top: 4em;
            background-color: var(--wp--preset--color--mid);

            list-style: none;
            margin: 0;
            padding: 1em;
            border-radius: var(--borderradius);

            a{
                color: var(--wp--preset--color--ci);
            }

        }

        .menu-item {
				position: relative;
				line-height: 2em;
			}

        .menu-item-has-children{

            &>a::after{
                content: '+';
                color: currentColor;
                margin-left: .5em;
            }

            &:hover{
                .sub-menu{
                    opacity: 1;
                    top: 2em;
                    pointer-events: all;
                }
            }
        }
    }
}

.blocker{
    background: rgba(0, 0, 0, .8);
    position: fixed;
    z-index: 3;
    top: 0;
    left: 0;

    width: 100dvw;
    height: 100dvh;

    transition: var(--maintrans);
    opacity: 0;

    pointer-events: none;

}

.toggler{
    position: fixed;
    top: calc(1.5 * var(--distance));
    right: calc(1.5 * var(--distance));
    z-index: 10;

    transition: var(--maintrans);
    opacity: 0;
    transform: translateY(calc(-2 * var(--distance)));

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .25em;
    padding: 1em;
    width: 3em;
    height: 3em;
    border: 0;
    border-radius: 50%;
    background: var(--wp--preset--color--ci);
    box-shadow: var(--box-shadow);

    div{
        height: 2px;
        width: 100%;
        display: block;
        background-color: var(--wp--preset--color--light);
        transition: var(--maintrans);
    }
}

.respnav{
    position: fixed;
    top: var(--distance);
    right: var(--distance);
    width: auto;
    border-radius: var(--border-radius);
    background-color: var(--wp--preset--color--light);
    padding: 3dvh;
    font-size: 3dvh;
    z-index: 5;

    opacity: 0;
    transform: translateX(50dvw);
    transition: var(--maintrans);

    ul{
        list-style: none;
        padding: 0;
        margin: 0;
        display: flex;
        flex-direction: column;
    }

    hr{
        height: 2px;
        width: 100%;
        border: 0;
        background-color: var(--wp--preset--color--mid);
        margin: 1.5dvh 0;
    }

    .headline{
        font-size: 2dvh;
        color: var(--wp--preset--color--ci);
    }

    .searchform{

        input{
            font-size: 1.5dvh;
        }
    }

    article{

        font-size: 1.5dvh;
        display: flex;
        flex-direction: column;
        width: 40ch;
        gap: 1em;

        figure{
            margin-bottom: 0;
            aspect-ratio: 16 / 9;

            img{
                aspect-ratio: 16 / 9;
                object-fit: cover;
                width: 100%;
                height: auto;
            }
        }
    }
}

[data-scroll="navscrolled"] {
    .toggler{
        transform: none;
        opacity: 1;
    }
}


[aria-open="RespnavOpen"] {
    overflow: hidden;

    .respnav{
        transform: none;
        opacity: 1;
    }

    .blocker{
        opacity: 1;
    }

    .toggler{

        rotate: 180deg;
        background-color: var(--wp--preset--color--dark);

        div{
            &:first-of-type{
                opacity: 0;
                width: 0px;
            }

            &:last-of-type{
                opacity: 0;
                width: 0px;
            }
        }
    }
}

li.search a{
    
    &::before{
        content: '';
        width: 1em;
        height: 1em;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='white' viewBox='0 0 16 16'%3E%3Cpath d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001q.044.06.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1 1 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0'/%3E%3C/svg%3E");
        background-size: contain;
        background-position: center center;
        background-repeat: no-repeat;

        display: inline-block;
        color: white;
        margin-right: .5em;
        top: 2px;
        position: relative;

    }
}

.nav-aside li.search a{
    
    &::before{
       display: none;
    }
}



/*Head*/

header{

    --h2size: 1.5vw;
    --blacksize: 1vw;
    --ratio: 16 / 9;
    --max-height: 750px;
    --display: flex;
    --xpadding:var(--mainpadding);

    
    position: relative;
    z-index: 1;
    background: var(--wp--preset--color--light);

    .prehead{
        padding: var(--mainpadding);
        display: flex;
        flex-wrap: wrap;
        gap: var(--mainpadding);

        max-width: var(--max-width);
        margin: 0 auto;

        > * {
            flex: 0 0 calc(50% - var(--mainpadding) / 2);
            /* optional: für gleiche Höhe */
            box-sizing: border-box;
            max-width: calc(50% - var(--mainpadding) / 2);
        }

        h1{
            font-size: 2.5dvw;
            line-height: 1!important;
        }
    }

    .hero{
        background-color: var(--wp--preset--color--mid);

        .gws-slider{

            .gws-slide{

                display: var(--display);
                flex-wrap: wrap;
                flex-direction: row-reverse;

                > * {
                    flex: 0 0 50%;
                    /* optional: für gleiche Höhe */
                    box-sizing: border-box;
                    max-height: var(--max-height);
                }

                figure{
                    margin-bottom: 0;
                }

                img{
                    width: 100%;
                    height: auto;
                    aspect-ratio: var(--ratio);
                    object-fit: cover;
                }

                .slide-overlay{
                    padding: var(--xpadding) var(--mainpadding);
                    display: flex;
                    justify-content: center;
                    flex-direction: column;

                    

                    h2{
                        font-size: var(--h2size);
                        margin: 0 0 1.5vw 0;

                        .black{
                            font-size: var(--blacksize);
                            color: var(--wp--preset--color--ci);
                            display: block;
                            margin-bottom: .5vw;
                        }
                    }
                }

            }

        }
        
    }
}

.meta{
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: .8em;

    .btn{
        aspect-ratio: 1 / 1;
        height: 1em;
        width: 1em;
        padding: .5em;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}

.home{
    header{
        --h2size: 3vw;
        --blacksize: 2vw;
        --ratio: 2560 / 557;
        --display: block;
        --xpadding: var(--distance);
    }
}

/*Main*/

main{
   
    background: var(--wp--preset--color--light);
    position: relative;
    z-index: 1;
    section{
         padding: var(--mainpadding);
    max-width: var(--max-width);
    margin: 0 auto;
    }
}

.single{
    main{
        --max-width: 990px;
    }

   
    
}

 .hero:has(.ccfic) main .ccfic{
        display: none;
    }

/*Footer*/

.wpml-ls-legacy-list-horizontal.wpml-ls-statics-footer{
    margin-bottom: 0;
}

footer{
    background-color: var(--wp--preset--color--dark);
    padding: var(--mainpadding);
    color: var(--wp--preset--color--light);

    position: sticky;
    z-index: 0;
    bottom: 0;

    
    width: 100%;
    box-sizing: border-box;

    display: flex;
    justify-content: space-around;
    align-items: flex-end;
    gap: var(--mainpadding);

    h2, h3, h4, h5, h6{
        color: var(--wp--preset--color--light);
        margin-bottom: 1em !important;
    }

    &>* {
        flex: 0 0 calc(33% - var(--mainpadding) / 2);
    }

    .links{
        display: flex;
        align-items: center;
        gap: var(--distance);
    }

    .links a:before{
	--_fa-family: var(--fa-family,var(--fa-style-family,"Font Awesome 7 Free")), var(--fa-family,var(--fa-style-family,"Font Awesome 7 Brands"));
	font-family: var(--_fa-family);
	content: "\f08e";
	background: transparent;
	color: var(--wp--preset--color--ci);
	font-size: 2em;
	
    }

    .links a[href*="facebook"]:before{
        content: "\f09a";
    }

    .links a[href*="instagram"]:before{
        content: "\f16d";
    }

    .links a[href*="linkedin"]:before{
        content: "\f08c";
    }
}

/*Blog, Archive*/

.archivegrid{
    --gap: 2em;

    display: flex;
    flex-wrap: wrap;
    gap: var(--gap);

      &>* {
        flex: 0 0 calc((100% - (3 * var(--gap))) / 4);
    }
}

.single{
    main{
        section{
            display: flex;
            gap: var(--mainpadding);

            .maincontent{
                width: 100%;
            }

            .post-sidebar-widget-area{
                width: 35%;
                .sticky-top{
                    
                    border-radius: var(--border-radius);
                    padding: var(--distance);
                    transition: var(--maintrans);

                    &:hover{
                        box-shadow: var(--box-shadow);
                    }
                }

                img{
                    width: 100%;
                    height: auto;
                }

                iframe{
                    border: 0px;
                }
            }
        }
    }
}

.paginationwrap{
    font-size: clamp(1em, 1.5dvw, 1.25em);
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2em;
    padding: var(--mainpadding) 0;

    .prev, .next{
        border: none;
        transition: var(--maintrans);
        padding: .5em 1em;
        background-color: var(--wp--preset--color--ci);
        color: var(--wp--preset--color--light);
        text-align: center;
        text-decoration: none;
        border-radius: var(--border-radius);
        display: inline-block;

        &:hover{
            background-color: var(--wp--preset--color--dark);
        }
    }
}

div{
    &.metabox{
        padding-top: var(--mainpadding);
        padding-bottom: var(--distance);

        display: flex;
        flex-direction: row;
        gap: var(--distance);

        justify-content: space-between;

        small{
            width: 70%;
        }
    }
    &.postnav{
        padding-top: var(--distance);
        padding-bottom: var(--mainpadding);
        display: flex;
        flex-direction: row;
        gap: var(--distance);

        justify-content: space-between;

        > *{
            flex: 0 0 calc((100% - (2 * var(--distance))) / 2);
        }
    }
}


/*Forms*/

form{
    input, textarea{
        border-radius: var(--border-radius);
        padding: 1em;
        box-sizing: border-box;
        border: var(--mainborder);
        display: block;
        width: 100%;
    }

    input[type="submit"]{
        font-size: 1em;
        border: none;
        transition: var(--maintrans);
        padding: 1em;
        background-color: var(--wp--preset--color--ci);
        color: var(--wp--preset--color--light);
        text-align: center;
        text-decoration: none;
        border-radius: var(--border-radius);
        display: inline-block;

        &#searchsubmit{
            margin-top: 1em;
            display: block;
            width: 100%;
        }

        &:hover{
            background-color: var(--wp--preset--color--dark);
            cursor: pointer;
        }
    }
}


.mitglied{
    display: flex;
    flex-direction: row-reverse;
    gap: var(--mainpadding);
    justify-content: space-between;
    align-items: center;
    padding: var(--distance) 0;
    
    figure{
        img{
            width: 300px;
            object-fit: contain;
            height: auto;
        }
    }
}


/*Responsive*/

@media screen and (max-width: 768px){

    nav {

        section{
            padding-top: var(--distance);
            padding-bottom: var(--distance);
        }
        .navbar-brand {
            width: 40vw;
        }
    }

   
    header{

        --ratio: 16 / 9 ;
        --blacksize: clamp(1em, 2vw, 1.5em) !important;
        --h2size: clamp(1.5em, 3vw, 2.5em) !important;

        .prehead {
            flex-direction: column;
            gap: 0;

            > * {
                flex: 0 0 100%;
                box-sizing: border-box;
                max-width: 100%;
            }

            h1 {
                font-size: clamp(1.5em, 2.5dvw, 2em);
            }
        }

        blockquote {
            margin: 0;
                h2 {
                    font-size:var(--h2size) !important;
                }
            }

        .hero{
            .gws-slider{
                .gws-slide{
                    display: block;

                    
                }
            }
        }
    }

    .home{
        header{
            --ratio: 2560 / 557;
        }
    }

    .main-navigation{
        display: none;
    }

    .toggler {
        transform: none;
        opacity: 1;
    }

    .respnav{
        width: calc(100dvw - (2* var(--distance)));
        height:  calc(100dvh - (2* var(--distance)));
        box-sizing: border-box;
        transform: translateX(100dvw);
    }

    /*format*/

    .newsslide {
        padding-bottom: 0;

        &>* {
            scroll-snap-align: center;
            flex: 0 0 100%;
        }

        .wp-block-post-excerpt__excerpt{
            display: none;
        }
    }

    .card{
        .wp-block-columns{
            &:first-of-type{
                flex-direction: row;
                gap: 0;

                > div{
                    flex-basis: 50% !important;
                }

            }
        }
    }

    .gws-controls{
        margin-top: 0;
    }

    .widecoltext {
        max-width: 100%;
        padding-right: 0;
        order: 2;
    }

    .widecol{
        width: 100dvw;
        margin-right: auto;
        order: 1;
        margin-top: 2em;

        figure{
            max-width: unset;
            width: 100dvw;
            margin-left: calc(-1 * var(--mainpadding)) !important;
            margin-right: calc(-1 * var(--mainpadding)) !important;

            video{
                border-radius: 0;
            }
        }
    }


    /*Blog & Archive*/
    .archivegrid {
        display: block; 
    }

    div{
        &.metabox{
            flex-direction: column;
            small{
                width: 100%;
            }
        }
        &.postnav{
            flex-direction: column;
           
        }
    }


    footer{
        flex-direction: column;
        align-items: start;
        justify-content: normal;
        min-height: unset;
    }

    .single {
        & main {
            section {
                display: block;

                 .post-sidebar-widget-area {
                    border-top: 2px solid var(--wp--preset--color--mid);
                    padding-top: var(--mainpadding);
                    width: 100%;

                    input{
                        width: 100%;
                    }

                    #searchform{
                        margin-bottom: var(--mainpadding);
                    }

                    .sticky-top {
                        border-radius: v0;
                        padding: 0;
                        transition: var(--maintrans);

                        &:hover{
                            box-shadow: none;
                        }


                        .logos{
                            display: flex;
                            gap: var(--mainpadding);
                            align-items: center;
                            flex-wrap: wrap;

                            > *{
                                flex: 0 0 calc((100% - (3 * var(--mainpadding))) / 3);
                            }

                            hr{
                                display: none;
                            }
                        }
                    }
                }
            }
        }
    }

    .mitglied{
        flex-direction: column;
        gap: var(--distance);
        justify-content: flex-start;
        align-items: start;
        padding: var(--distance) 0;
        
        figure{
            img{
                max-width: 250px;
                object-fit: contain;
                height: auto;
            }
        }
    }

}