/*
 Theme Name:   wunu webLab Child Theme
 Theme URI:    https://wunu.eu
 Description:  wunu webLab Child Theme for Direkt Regional
 Template:     wunu-weblab
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Tags:         light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
 Text Domain:  wunuweblabchild
*/


:root {
    --font-family-body: 'Nudicamono Medium';
    --font-family-body-bold: 'Nudicamono Bold';
    --font-family-body-italic: 'Nudicamono Medium Italic';
    --font-family-body-bold-italic: 'Nudicamono Bold Italic';
    --font-family-body-light: 'Nudicamono Light';
    --font-family-body-light-italic: 'Nudicamono Light Italic';
    --font-family-header: 'Nudicamono Medium';
    --font-family-h1: 'Nudicamono Medium';
    --font-family-h2: 'Nudicamono Medium';
    --font-family-h3: 'Nudicamono Medium';
    --font-family-main: 'Nudicamono Medium';
    --font-family-button: 'Nudicamono Medium';
    --font-family-header-bold: 'Nudicamono Bold';
    --font-family-header-italic: 'Nudicamono Medium Italic';
    --font-family-header-bold-italic: 'Nudicamono Bold Italic';
    --font-family-header-light: 'Nudicamono Light';
    --font-family-header-light-italic: 'Nudicamono Light Italic';
    --fontfamily-mainmenu: 'Nudicamono Medium';
    --fontfamily-mainmenu-aktiv: 'Nudicamono Medium';
    --fontfamily-socialmenu: 'Nudicamono Medium';
    --font-family-footer-text: 'Nudicamono Medium';
    --fontfamily-footer-copy: 'Nudicamono Medium';
    --fontfamily-footer-menu: 'Nudicamono Medium';
    --fontfamily-footer-menu-aktiv: 'Nudicamono Medium';
}


@font-face {
    font-family: 'Nudicamono Medium';
    src: url('/wp-content/themes/wunu-weblab-child/fonts/nudicamono-medium-webfont.ttf');
    font-display: swap;
}


@font-face {
    font-family: 'Nudicamono Bold';
    src: url('/wp-content/themes/wunu-weblab-child/fonts/nudicamono-bold-webfont.ttf');
    font-display: swap;
}

@font-face {
    font-family: 'Nudicamono Medium Italic';
    src: url('/wp-content/themes/wunu-weblab-child/fonts/nudicamono-mediumitalic-webfont.ttf');
    font-display: swap;
}

@font-face {
    font-family: 'Nudicamono Bold Italic';
    src: url('/wp-content/themes/wunu-weblab-child/fonts/nudicamono-bolditalic-webfont.ttf');
    font-display: swap;
}


@font-face {
    font-family: 'Nudicamono Light';
    src: url('/wp-content/themes/wunu-weblab-child/fonts/nudicamono-light-webfont.ttf');
    font-display: swap;
}

@font-face {
    font-family: 'Nudicamono Light Italic';
    src: url('/wp-content/themes/wunu-weblab-child/fonts/nudicamono-lightitalic-webfont.ttf');
    font-display: swap;
}

main {
    min-height: 20vh;
}

@media only screen and (min-width: 1920px) {
    #masthead .branding {
        justify-content: flex-start !important;
        min-height: 70px !important;
        align-items: center !important;
        height: auto !important;
        padding-top: 20px !important;
        padding-right: 0 !important;
    }

    #masthead .branding img {
        height: auto !important;
        width: 9vw !important;
    }
}


.headerText {
    margin-top: 70px;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;

    &:focus {
        outline: 0 !important;
        border: 0 !important;
    }
}

.headerText .headerTextInner {
    position: relative;
    display: flex;
    justify-content: center;
    flex-direction: column;
}

.headerText .headerTextInner .text {
    z-index: 2;
    position: relative;
    font-family: var(--font-family-body);
}

.headerText .headerTextInner .post-date {
    font-size: var(--fontsize-h3-mobile) !important;
}

@media only screen and (min-width: 992px) {
    .headerText .headerTextInner .post-date {
        font-size: var(--fontsize-h3-desktop);
    }
}

.headerText .headerTextInner:after {
    content: '';
    position: absolute;
    border-radius: 50%;
    background-color: #bc1f1f;
    z-index: 1;
    width: 80px;
    height: 80px;
    right: 20px;
    top: 40px;
}

@media only screen and (min-width: 1200px) {
    .headerText .headerTextInner:after {
        content: '';
        position: absolute;
        border-radius: 50%;
        background-color: #bc1f1f;
        z-index: 1;
        width: 200px;
        height: 200px;
        right: -100px;
        top: -100px;
    }
}


#primary .sectionButton .wunuButton,
#primary .wpcf7-submit {
    border-width: 2px !important;
    border-style: solid !important;
    border-color: #151515 !important;
}

#primary .alternateStyle .sectionButton .wunuButton,
#primary .alternateStyle .wpcf7-submit {
    border-color: #fff !important;
}

#masthead.desktopMenu-xxl #site-navigation .menuRow .menuContainer #navbarCollapse #primary-menu li.menu-item-depth-0 ul {
    box-shadow: none !important;
}

#colophon {
    border-top: 2px solid #151515 !important;
}

#colophon #copyrightRow {
    margin-bottom: 50px;
    margin-top: 50px;
}

#colophon .footerNavigationRow {
    flex-wrap: wrap;
}

#colophon .footerLogo {
    width: 100%;
    margin-bottom: 0 !important;
}

#colophon .footerLogoInner {
    width: 100%;
    padding-top: 10px;
    padding-bottom: 10px;
}

@media only screen and (min-width: 768px) {
    #colophon .footerLogoInner {
        width: 50%;
    }

}

@media only screen and (min-width: 1200px) {
    #colophon .footerLogoInner {
        width: 25%;
    }
}

@media only screen and (min-width: 1920px) {
    #colophon .footerLogoInner {
        width: 25%;
    }
}

#colophon .textColExtended {
    width: 100%;
    display: flex;
    align-items: center;
    padding-top: 15px;
    padding-bottom: 15px;
}

@media only screen and (min-width: 1200px) {
    #colophon .textColExtended {
        width: 33%;
    }
}

#colophon .footerMenu1,
#colophon .footerMenu2,
#colophon .footerMenu3 {
    width: 100%;
}

#colophon .footerMenu2,
#colophon .footerMenu3 {
    width: 100%;
    margin-top: 20px;
}


@media only screen and (min-width: 768px) {
    #colophon .footerMenu1,
    #colophon .footerMenu2,
    #colophon .footerMenu3 {
        width: 50%;
    }

    #colophon .footerMenu1,
    #colophon .footerMenu2 {
        margin-top: 0;
    }

    #colophon .footerMenu2 {
        display: flex;
        justify-content: flex-end;
    }
}

/*

@media only screen and (min-width: 1200px) {
    #colophon .footerMenu1,
    #colophon .footerMenu2,
    #colophon .footerMenu3 {
        width: 33%;
        margin-top: 0;
    }
    #colophon .footerMenu2 {
        justify-content: center;
    }
    #colophon .footerMenu3 {
        display: flex;
        justify-content: flex-end;
    }
}
*/

@media only screen and (min-width: 1200px) {
    #colophon .footerMenu1,
    #colophon .footerMenu2,
    #colophon .footerMenu3 {
        width: 22%;
        margin-top: 0;
        padding-top: 15px;
        padding-bottom: 15px;
    }

    #colophon .footerMenu1 ul li,
    #colophon .footerMenu2 ul li,
    #colophon .footerMenu3 ul li {
        padding-bottom: 5px !important;
        padding-top: 0 !important;
    }
    .textColExtended {
    }

    #colophon .footerMenu3,
    #colophon .footerMenu1 {
        margin-left: initial;
    }

    #colophon .footerMenu2 {
        justify-content: center;
    }

    #colophon .footerMenu3 {
        display: flex;
        justify-content: flex-end;
    }
}


#colophon .copyrightCol {
    width: 100%;
}

#colophon .footerExtended {
    margin-top: initial !important;
    margin-bottom: initial !important;
}


main {
    hr {
        opacity: 1 !important;
    }
}


#primary .contactformNeu .contactNeuContainer input[type="checkbox"]:checked:after, .contactformNeu .contactNeuContainer input[type="radio"]:checked:after {
    background-color: #000 !important;
}

#primary .alternateStyle .contactformNeu .contactNeuContainer input[type="checkbox"]:checked:after, .contactformNeu .contactNeuContainer input[type="radio"]:checked:after {
    background-color: #fff !important;
}

form p:last-of-type {
    display: flex;
    margin-left: auto;
}

main {
    .contactformNeu .contactNeuContainer input:-webkit-autofill,
    .contactformNeu .contactNeuContainer input:-webkit-autofill:hover,
    .contactformNeu .contactNeuContainer input:-webkit-autofill:focus,
    .contactformNeu .contactNeuContainer input:-webkit-autofill,
    .contactformNeu .contactNeuContainer textarea:-webkit-autofill,
    .contactformNeu .contactNeuContainer textarea:-webkit-autofill:hover,
    .contactformNeu .contactNeuContainer textarea:-webkit-autofill:focus,
    .contactformNeu .contactNeuContainer select:-webkit-autofill,
    .contactformNeu .contactNeuContainer select:-webkit-autofill:hover,
    .contactformNeu .contactNeuContainer select:-webkit-autofill:focus {
        color: #000 !important;
        -webkit-text-fill-color: #000 !important;
        background-color: #fff !important;
        -webkit-box-shadow: 0 0 0 50px #fff inset !important;
        transition: background-color 5000s ease-in-out 0s;
    }
}


main .alternateStyle {
    .contactformNeu .contactNeuContainer input:-webkit-autofill,
    .contactformNeu .contactNeuContainer input:-webkit-autofill:hover,
    .contactformNeu .contactNeuContainer input:-webkit-autofill:focus,
    .contactformNeu .contactNeuContainer input:-webkit-autofill,
    .contactformNeu .contactNeuContainer textarea:-webkit-autofill,
    .contactformNeu .contactNeuContainer textarea:-webkit-autofill:hover,
    .contactformNeu .contactNeuContainer textarea:-webkit-autofill:focus,
    .contactformNeu .contactNeuContainer select:-webkit-autofill,
    .contactformNeu .contactNeuContainer select:-webkit-autofill:hover,
    .contactformNeu .contactNeuContainer select:-webkit-autofill:focus {
        color: #fff !important;
        -webkit-text-fill-color: #fff !important;
        background-color: #000 !important;
        -webkit-box-shadow: 0 0 0 50px #000 inset !important;
        transition: background-color 5000s ease-in-out 0s;

    }
}


input[readonly] {
    background-color: #fbfbfb !important;
}


.post-template-default main .blocks-container img,
.post-template-default main .blocks-container svg,
.blog main img,
.blog main svg {
    width: 90% !important;
    max-width: 400px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

.post-image-col {
    position: relative;
    width: 100%;
    padding-bottom: 77.17%;
}

.post-image-col-inner {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-size: cover;
    background-position: center center;
}

@media only screen and (min-width: 992px) {
    .post-title-col-inner {

    }
}

.post-title-col-inner h2.postHeading {
    position: relative;
    font-size: var(--fontsize-h3-mobile) !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
    hyphens: auto !important;
    white-space: initial !important;
    margin-bottom: 0;
    @media only screen and (min-width: 992px) {
        font-size: var(--fontsize-h3-desktop) !important;
    }
}

.post-title-col-inner h2.postHeading span {
    position: relative;
    z-index: 2;
}

.kachelCol .post-content {
    padding-top: 20px;
}

.read-more.sectionButton {
    margin-top: auto;
}

.pagination-col {
    display: flex;
    justify-content: center;
    margin-top: 50px !important;
}

.pagination-col ul {
    list-style: none;
    display: flex;
    justify-content: center;
    margin: 0;
}

.pagination-col ul.post-pagination {
    width: 100%;
    justify-content: space-between;
}

.pagination-col ul:not(.post-pagination) li:not(.prev):not(.next) {
    margin: 0 5px;
    width: 30px;
    height: 30px;
    @media only screen and (min-width: 992px) {
        width: 35px;
        height: 35px;
    }
}

.pagination-col ul li a,
.pagination-col ul li span.dots {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background-color: #fff;
    color: #000 !important;
    text-decoration: none;
    border: 1px solid #000;
    line-height: 1 !important;
    transition: all 0.3s ease-in-out;
    font-size: var(--fontsize-main-mobile) !important;
    padding-top: 2px;
}

@media only screen and (min-width: 992px) {
    .pagination-col ul li a,
    .pagination-col ul li span.dots {
        padding-top: 0;

        font-size: var(--fontsize-mainmenu-desktop) !important;
    }
}

.pagination-col ul.post-pagination li a {
    color: #000 !important;
    text-decoration: underline !important;
    border-width: 0 !important;
    transition: all 0.3s ease-in-out;
    font-size: var(--fontsize-main-mobile) !important;
}

@media only screen and (min-width: 992px) {
    .pagination-col ul.post-pagination li a {
        font-size: var(--fontsize-main-desktop) !important;
    }
}


.pagination-col ul li a:hover {
    background-color: #ddd;
    border-color: #bc1f1f;
}


.pagination-col ul.post-pagination li a:hover {
    text-decoration: none !important;
    background-color: rgba(0, 0, 0, 0) !important;
}

.pagination-col ul li span.current {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background-color: #fff;
    color: #bc1f1f !important;
    text-decoration: none;
    border: 1px solid #bc1f1f;
    line-height: 1 !important;
    font-size: var(--fontsize-main-mobile) !important;
    padding-top: 2px;
    @media only screen and (min-width: 992px) {
        font-size: var(--fontsize-main-desktop) !important;
        padding-top: 0;
    }
}

.post-categories {
    padding-top: 0;
    padding-bottom: 0;
}

.post-categories .category-link {
    color: #000 !important;
    font-size: 14px;
}

.post-excerpt {
    padding-top: 20px;
    padding-bottom: 30px;
}
/*trying to fix the blocks */

.wp-block-uagb-info-box {
    padding-top: var(--paddings-mittel);
    padding-bottom: var(--paddings-mittel);
}
@media only screen and (min-width: 992px) {
    .wp-block-uagb-info-box {
        padding-top: var(--paddings-desktop-mittel);
        padding-bottom: var(--paddings-desktop-gross);
    }

}

.uagb-ifb-content {
    display: grid;
    grid-template-columns: 20px calc(100% - 35px);
    grid-template-rows: auto auto;
    gap: 15px;
}

.uagb-ifb-content > :nth-child(1) {
    grid-column: 1 / 2;
    grid-row: 1;
}

.uagb-ifb-content > :nth-child(2) {
    grid-column: 2 / 3;
    grid-row: 1;
}

.uagb-ifb-content > :nth-child(3) {
    grid-column: 1 / 3; /* span both columns */
    grid-row: 2;
}


.submitWarning {
    display: none !important;
}