/*
Theme Name: WAL_Waelderhof
Author: Corinna Wurth
Author URI: www.undco.at
Version:1.0
*/


/*theme settings*/
html, body {
    margin:0px;
    padding:0px;
   width: 100%; 
   text-size-adjust: none;
   -webkit-text-size-adjust: none;
   -moz-text-size-adjust: none;
   -ms-text-size-adjust: none;
   overflow-x: hidden;
   overflow-y: scroll;
}

body.body-scroll {
    position: fixed !important;
}


#body .desktop{
    display: contents;
}

#body .mobile{
    display: none;
}


header {
    background: rgba(256,256,256,0.45);
    height: 96px;
    position: fixed;
    top: 0;
    transition: top 0.2s ease-in-out;
    width: 100%;
    z-index: 20;
}

.nav-up {
    top: -96px;
}




/*------------------Pop Up-----------------*/

#body div#sgpb-popup-dialog-main-div {
    border-radius: 4px !important;
    background-color: #F2F6F6 !important;
    box-shadow: transparent !important;
}

#body .pop-up-content{
    padding: 0% 2.5%;
}


/*Header Navigation*/
#body .navigation{
    z-index: 20;
}

.menu-button {
    width: 1.5rem;
    right: 2rem;
    cursor: pointer;
    height: calc(0.25rem * 5);
    z-index: 666;
    position: sticky;
}

.menu-button span {
    width: 1.75rem;
    height: 0.2rem;
    background-color: #004E42;
    display: block;
    position: absolute;
    transition: all 0.6s ease;
    border-radius: 4px;
}

.menu-button span:nth-of-type(2) {
    top: calc(0.25rem * 2);
}
.menu-button span:nth-of-type(3) {
    top: calc(0.25rem * 4);
}

.menu-button.active span {
    background-color:#004E42;
}
.menu-button.active span:nth-of-type(1) {
    transform: translateY(0.5rem) rotate(-45deg);
}
.menu-button.active span:nth-of-type(2) {
    transform: translateX(1.5rem);
    opacity: 0;
}
.menu-button.active span:nth-of-type(3) {
    transform: translateY(-0.5rem) rotate(45deg);
}

.menu-overlay {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    padding-top: 96px;
    background-color: #F2F6F6;
    display: grid;
    grid-template-columns: 3fr 4fr;
    color: #004E42;
    transform: translateX(100%);
    transition: all 0.6s ease-in-out;
    z-index: 10;
}

.menu-overlay.open {
    transform: translateX(0);
}
.menu-overlay.open .menu-overlay__image img {
    animation: fadeIn 0.8s ease-in-out 0.6s forwards;
}
.menu-overlay.open .nav {
    animation: fadeIn 0.8s ease-in-out 0.2s forwards;
}
.menu-overlay__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
}

.menu-overlay__image{
    height: calc(100% - 200px);
}

@keyframes fadeIn {
    0% {
        opacity: 0;
   }
    100% {
        opacity: 1;
   }
}

ul#menu-header-menu-primary li a {
    font-family: 'Nooks-Regular', sans-serif;
    font-size: 40px;
    line-height: 66px;
    color: #004E42;
    margin-block-end: 16px;
    margin-block-start: 0px;
    border-bottom: none;
}

ul#menu-header-menu-secondary li a, ul#menu-header-menu-tertiary li a {
    font-family: 'Ramillas-Regular';
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0.3px;
    margin-block-end: 8px;
    margin-block-start: 0px;
    color: #004E42;
    border-bottom: none;
    margin-left: 24px;
}

ul#menu-header-menu-primary li a:hover, ul#menu-header-menu-secondary li a:hover, ul#menu-header-menu-tertiary li a:hover {
    color: #002D28;
    border-bottom: none;
}

ul#menu-header-menu-primary li, ul#menu-header-menu-secondary li, ul#menu-header-menu-tertiary li {
    list-style: none !important;
    display: block;
    font-size: 0px;
}

ul#menu-header-menu-primary, ul#menu-header-menu-secondary, ul#menu-header-menu-tertiary {
    padding-inline-start: 0px;
}

ul#menu-header-menu-secondary, ul#menu-header-menu-tertiary {
    display: flex;
    margin-block-start: 0em;
    margin-block-end: 0em;
}

.nav-first-container {
    height: calc(100vh - 198px);
}




/*------------Subnav----------*/
#body .subnav{
    grid-column: 1/3;
}

#body .background-blur {
    backdrop-filter: blur(4px);
}

#body .subnav-size{
    max-width: 104px;
    height: calc(100vh - 146px);
    padding-right: 32px;
}

#body .subnav-size li{
    list-style: none;
    display: block;
}

#body a.link-subnav {
    font-size: 16px !important;
    line-height: 22px;
}

#body a.link-subnav.subnav-active {
    color: #4D837B;
    border-bottom: 1px solid #4D837B;
}

/* font settings*/

#body h1{
    font-family: 'Nooks-Bold', sans-serif;
    font-size: 52px;
    line-height: 72.5px;
    color: #004E42;
    margin-block-end: 16px;
    margin-block-start: 0px;
}

#body h1.title{
    font-family: 'Nooks-Bold', sans-serif;
    font-size: 82px;
    line-height: auto;
    margin-block-start: 12px;
    color: #004E42;
    margin-block-end: 16px;
    margin-block-start: 0px;
}

#body h2{
    font-family: 'Nooks-Regular', sans-serif;
    font-size: 40px;
    line-height: 56px;
    color: #004E42;
    margin-block-end: 16px;
    margin-block-start: 0px;
    -webkit-font-smoothing: antialiased;
}

#body h3{
    font-family: 'Nooks-Regular', sans-serif;
    font-size: 32px;
    line-height: 40px;
    color: #004E42;
    margin-block-end: 16px;
    margin-block-start: 0px;
    -webkit-font-smoothing: antialiased;
}

#body h4{
    font-family: 'Nooks-Regular', sans-serif;
    font-size: 24px;
    line-height: 32px;
    color: #004E42;
    margin-block-end: 16px;
    margin-block-start: 0px;
    -webkit-font-smoothing: antialiased;
}

#body h5{
    font-family: 'Nooks-Regular', sans-serif;
    font-size: 20px;
    line-height: 26px;
    text-transform: uppercase;
    margin-block-end: 2px;
    color: #004E42;
    letter-spacing: 2px;
    margin-block-start: 0px;
    -webkit-font-smoothing: antialiased;
}


#body h6{
    font-family: 'Nooks-Regular', sans-serif;
    font-size: 14px;
    line-height: auto;
    text-transform: uppercase;
    margin-block-end: 2px;
    color: #004E42;
    letter-spacing: 2px;
    margin-block-start: 0px;
    -webkit-font-smoothing: antialiased;
}



#body p{
    font-family: 'Ramillas-Regular';
    font-size: 20px;
    line-height: 34px;
    margin-block-start: 0px;
    margin-block-end: 8px;
    color: #004E42;
    -webkit-font-smoothing: antialiased;
}


#body p.p-16{
    font-family: 'Ramillas-Regular';
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0.3px;
    margin-block-end: 8px;
    margin-block-start: 0px;
    color: #004E42;
    -webkit-font-smoothing: antialiased;
}

#body p.p-14{
    font-family: 'Ramillas-Regular';
    font-size: 14px;
    line-height: 22px;
    letter-spacing: 0.3px;
    margin-block-end: 8px;
    margin-block-start: 0px;
    color: #004E42;
    -webkit-font-smoothing: antialiased;
}



#body p.strong {
    font-family: 'Ramillas-Bold' !important;
}


#body li{
    font-family: 'Ramillas-Regular';
    font-size: 20px;
    line-height: 34px;
    margin-block-start: 0px;
    margin-block-end: 8px;
    color: #004E42;
    -webkit-font-smoothing: antialiased;
}



li::marker {
    content: url(../waelderhof/assets/img/listmarker.svg);
}

li::marker:after {
 margin-right: 10px;
}




/* Links und Buttons */

#body .link-large{
    font-family: 'Nooks-Regular', sans-serif;
    font-size: 24px;
    line-height: 32px;
    color: #004E42;
    margin-block-end: 0px;
    margin-block-start: 0px;
    text-decoration: none;
    border-bottom: none;
}

#body a.a-14{
    font-family: 'Ramillas-Regular';
    font-size: 14px;
    line-height: 22px;
    margin-block-start: 0px;
    margin-block-end: 8px;
    color: #004E42;
    transition-duration: 0.4s;
    text-decoration: none;
    border-bottom: 1px solid #004E42;
}

#body a{
    font-family: 'Ramillas-Regular';
    font-size: 20px;
    line-height: 34px;
    margin-block-start: 0px;
    margin-block-end: 8px;
    color: #004E42;
    transition-duration: 0.4s;
    text-decoration: none;
    border-bottom: 1px solid #004E42;
}

#body a:hover{
    color: #002D28;
    transition-duration: 0.4s;
    border-bottom: 1px solid #002D28;
}

#body .link-down:after {
    content: url(../waelderhof/assets/img/arrow-down.svg);
}


#body a.no-border{
    border-bottom: none;
}

#body a.no-border:hover{
    border-bottom: none;
}



#body button {
    background-color: #004E42;
    padding: 8px 16px;
    border: none;
    border-radius: 2px; 
    transition-duration: 0.4s;
}

#body button a {
    color: #Ffffff;
    font-family: 'Ramillas-Regular';
    font-size: 16px;
    line-height: 24px;
    text-decoration: none;
}

#body button:hover a {
    color: #Ffffff;
    font-family: 'Ramillas-Regular';
    font-size: 16px;
    line-height: 24px;
    text-decoration: none !important;
}

#body button:hover{
    background-color: #002D28;
    transition-duration: 0.4s;
}


#body button.button-secondary {
    background-color: transparent;
    padding: 7px 16px;
    border: 1px solid #004E42;
    border-radius: 2px; 
    transition-duration: 0.4s;
}

#body button.button-secondary a {
    color: #004E42;
    font-family: 'Ramillas-Regular';
    font-size: 16px;
    line-height: 24px;
    text-decoration: none;
}


#body button.button-secondary:hover{
    background-color: transparent;
    transition-duration: 0.4s;
    border: 1px solid #002D28;
}

#body button.button-secondary:hover a {
    color: #002D28;
}


/*images sizes*/

#body .img-wrapper{
    overflow: hidden; 
    aspect-ratio: 2/2.5;
}

#body .zoom-on-hover:hover{
    transform:scale(1.03);
    -ms-transform:scale(1.03); /* IE 9 */
    -moz-transform:scale(1.03); /* Firefox */
    -webkit-transform:scale(1.03); /* Safari and Chrome */
    -o-transform:scale(1.03); /* Opera */
    transition-duration: 0.4s;
}

#body .zoom-on-hover{
    -webkit-transition: 0.4s;
}


#body #logo {
    width: 42.4px;
}

#body #logo-large {
    width: 112px;
}

#body .header-img-home {
    height: calc( 100vh - 98px);
}

#body .header-img-request  {
    height: 35vh;
}


#body .adressbutton{
    height: 175px;
    width: 175px;
}

#body .mask{
    -webkit-mask-image: url(..//waelderhof/assets/img/mask.png);
    mask-image: url(..//waelderhof/assets/img/mask.png);
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-repeat: no-repeat;
    transform: translateY(-100px);
    backdrop-filter: blur(4px);
    height: 175px;
    width: 175px;
}

#body img.klee {
    width: 218px;
    top: 60%;
    position: relative;
    left: -60px;

}

#body img.klee-center {
    width: 218px;
    margin: 0px auto;
    display: block;
}

#body .img-teaser img {
    width: 100%;
    aspect-ratio: 2 / 2.5;
    height: auto;
}


/*z-index*/

#body .minuszwei{
    z-index: -2;
}

#body .minusdrei{
    z-index: -3
}

/*extra font settings*/

#body .no-block-end{
    margin-block-end: 0px !important;
}

#body .small-block-end{
    margin-block-end: 8px;
}

#body .text-centered{
    text-align: center;
}

/* container width settings*/

#body .max-width{
    width: 90%;
    max-width: 1770px;
}

#body .full-width{
    width: 100%;
    height: auto;
}

#body .width-65{
    width: 65%;
}

/*-----------background-settings-----------*/

#body .bg-hover-state:hover .bg-hover{
    background-color: #004E42;
    transition-duration: 0.4s;
}

#body .bg-hover-state:hover .bg-hover-color{
    color: white;
    transition-duration: 0.4s;
}

#body .bg-lightgreen{
    background-color: #F2F6F6;
}

#body .bg-white{
    background-color: #ffffff;
}

#body .bg-none{
    background-color: transparent;
}

/*-----border-settings*/
#body .border-table {
    border-left: 2px solid #004E42;
    border-top:2px solid #004E42;
    border-right: 2px solid #004E42;;
}

#body .no-border-right{
    border-right: none !important;
}

#body .border-bottom {
    border-bottom: 2px solid #004E42;
}


/*cotact form settings*/

.contactform-container {
    display: grid;
    grid-template-columns: 1fr 32px 1fr 32px 1fr 32px 1fr 32px 1fr 32px 1fr;
}

.first-column-contact-form {
    grid-column: 1/4;
}

.second-column-contact-form {
    grid-column: 5/8;
}

.third-column-contact-form {
    grid-column: 9/end;
}

.first-half-column-contact-form {
    grid-column: 1/6;
}

.second-half-column-contact-form {
    grid-column: 7/end;
}

.full-column-contact-form {
    grid-column: 1/end;
}

/*container settings*/

#body .full-height{
    height: 100%;
}

#body .flex {
    display: flex;
}

#body .wrap {
    flex-wrap: wrap;
}

#body .column{
    flex-direction: column;
}

#body .center{
    margin: 0px auto;
}

#body .content-space-between{
    justify-content: space-between;
}

#body .content-end{
    justify-content: end;
}

#body .content-center{
    justify-content: center;
}

#body .align-center{
    align-items: center;
}

#body .block{
    display: block;
}

#body .fixed{
    position: fixed;
}

#body .absolute{
    position: absolute;
}

#body .float-right{
    float: right;
}


/*-------display styles----------*/

#body .grid{
    display: grid;
    grid-template-columns: 1fr 32px 1fr 32px 1fr 32px 1fr 32px 1fr 32px 1fr 32px 1fr 32px 1fr 32px 1fr 32px 1fr 32px 1fr 32px 1fr;
    width: 90%;
    max-width: 1770px;
}

#body .grid-column-regular{
    grid-column: 5/20;
}

#body .grid-column-large{
    grid-column: 5/end;
}

#body .grid-column-1-9{
    grid-column: 1/9;
}

#body .grid-column-1-12 {
    grid-column: 1/12;
}

#body .grid-column-3-5 {
    grid-column: 3/5;
}

#body .grid-column-3-22 {
    grid-column: 3/22;
}

#body .grid-column-3-9 {
    grid-column: 3/9;
}

#body .grid-column-3-12 {
    grid-column: 3/12;
}

#body .grid-column-3-10 {
    grid-column: 3/10;
}

#body .grid-column-5-12 {
    grid-column: 5/12;
}

#body .grid-column-5-14 {
    grid-column: 5/14;
}


#body .grid-column-7-18 {
    grid-column: 7/18;
}

#body .grid-column-7-21 {
    grid-column: 7/16;
}


#body .grid-column-10-20{
    grid-column: 10/20;
}

#body .grid-column-12-22{
    grid-column: 12/22;
}

#body .grid-column-13-20 {
    grid-column: 13/20;
}


#body .grid-column-14-end {
    grid-column: 14/end;
}

#body .grid-column-14-20 {
    grid-column: 14/20;
}


#body .grid-column-15-22 {
    grid-column: 15/22;
}

#body .grid-column-16-22 {
    grid-column: 16/22;
}

#body .grid-column-15-end {
    grid-column: 14/end;
}

#body .grid-column-17-end {
    grid-column: 17/end;
}

#body .grid-column-18-22 {
    grid-column: 18/22;
    justify-self: end;
}

#body .grid-column-20-end{
    grid-column: 20/end;
}


/*-------padding margin styles----------*/
#body .padding-196-bottom{
    padding-bottom: 196px;
}


#body .padding-146-top{
    padding-top: 146px;
}

#body .margin-146-top{
    margin-top: 146px;
}

#body .padding-146-top-small{
   padding-top: 146px;
}


#body .padding-146-bottom{
    padding-bottom: 146px;
}

#body .padding-96-top{
    padding-top: 96px;
}

#body .padding-96-bottom{
    padding-bottom: 96px;
}

#body .padding-80-top{
    padding-top: 80px;
}

#body .padding-64-bottom{
    padding-bottom: 64px;
}

#body .padding-48-bottom{
    padding-bottom: 48px;
}

#body .padding-48-top{
    padding-top: 48px;
}

#body .padding-32-top{
    padding-top: 32px;
}

#body .padding-32-bottom{
    padding-bottom: 32px;
}

#body .margin-16-left{
    margin-left: 16px;
}

#body .margin-24-left{
    margin-left: 24px;
}

#body .margin-24-right{
    margin-right: 24px;
}

#body .margin-48-left{
    margin-left: 48px;
}

#body .margin-72-left{
    margin-left: 72px;
}

#body .margin-60-left{
    margin-left: 60%;
}

#body .margin-82-left{
    margin-left: 82%;
}

#body .padding-24-top {
    padding-top: 24px;
}

#body .padding-16-bottom{
    padding-bottom: 16px;
}

#body .padding-16-top{
    padding-top: 16px;
}

#body .padding-8-top{
    padding-top: 8px;
}

#body .padding-8-bottom{
    padding-bottom: 8px;
}

#body .padding-4-bottom{
    padding-bottom: 4px;
}

#body .table-padding{
    padding: 8px 16px;
}

#body .margin-96-negativ-top{
    margin-top: -96px;
}



/*------------Slider settings---------*/
#body .swiper {
    width: 100%;
    height: 100%;
  }

#body .swiper-slide {
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    aspect-ratio: 3 / 2;
  }

#body .swiper-button-next:after, .swiper-rtl .swiper-button-prev:after {
    content: url(..//waelderhof/assets/img/next.svg);
    width: 100%;
  }

#body .swiper-button-prev:after, .swiper-rtl .swiper-button-next:after {
    content: url(..//waelderhof/assets/img/prev.svg);
    width: 100%;
}



.swiper-button-next, .swiper-button-prev {
    width: calc(var(--swiper-navigation-size)/ 42 * 46);
}


/*----------table settings-----------*/
#body .table p:last-of-type, .table h4:last-of-type {
    border-bottom: 2px solid #004E42!important;
}


#body .table-three-columns h4:last-child, .table-three-columns p:nth-last-child(-n+3), .table-home div:last-of-type{
    border-bottom: 2px solid #004E42!important;
}


#body .table-first-column{
    width: 60%;
}


#body .table-second-column{
    width: 40%;
}

/*--------------------footer------------------*/
#body #footer{
    min-height: 100px;
    position: relative;
    z-index: 20;
}

#body #footer-mobile {
    display: none;
}

#body svg.footer-svg:hover path.svg-color {
    fill: #002D28;
}

/*--------------------datepicker------------------*/

.ui-datepicker-title {
    font-family: 'Ramillas-Regular';
    font-size: 16px;
    line-height: 20px;
    color: white;
    -webkit-font-smoothing: antialiased;
}

.ui-datepicker-header.ui-widget-header.ui-helper-clearfix.ui-corner-all {
    border-radius: 0px;
    background-color: #004e42;
    border: none;
}

.ui-datepicker-header a {
    border-bottom: none !important;
}

.ui-datepicker table {
    font-family: 'Ramillas-Regular';
    font-size: 14px;
    -webkit-font-smoothing: antialiased;
}

div#ui-datepicker-div {
    border: 1px solid #004e42;
    border-radius: 1px;
    background-color: white;
}


.ui-widget-content {
    color: #004E42;
}

a.ui-state-default {
    font-family: 'Ramillas-Regular';
    font-size: 14px !important;
    text-align: center;
    margin-block-end: 0px !important; 
}

ui-state-highlight, .ui-widget-content .ui-state-highlight, .ui-widget-header .ui-state-highlight {
    border: 1px solid #004E42;
    background: #ED6EA7 !important;
    color: white !important;
}

.ui-state-default, .ui-widget-content .ui-state-default {
    border: none !important;
    background: #F2F6F6;
    color: #004e42;
    font-family: 'Ramillas-Regular';
    line-height: 34px;
    font-size: 14px;
    -webkit-font-smoothing: antialiased;
}

.ui-state-default:hover, .ui-widget-content:hover .ui-state-default:hover {
    border: none !important;
    background: #4D837B;
}

a.ui-state-default.ui-state-active {
    background-color: #004E42;
    color: white !important;
}

.ui-datepicker td span, .ui-datepicker td a {
    display: flex;
    justify-content: center;
}


.ui-datepicker-prev span {
    background-image: url(..//waelderhof/assets/img/arrow-datepicker-prev.png) !important;
        background-position: 0px 0px !important;
        background-size: contain;
}

.ui-datepicker-next span {
    background-image: url(..//waelderhof/assets/img/arrow-datepicker-next.png) !important;
        background-position: 0px 0px !important;
        background-size: contain;
}

.ui-datepicker .ui-datepicker-prev, .ui-datepicker .ui-datepicker-next {
    top: 0px;
    width: 1.8em;
    height: -webkit-fill-available;
    max-height:35px;
    margin-block-end: 0px !important;
}

a.ui-datepicker-prev.ui-corner-all, a.ui-datepicker-next.ui-corner-all:hover {
    background-color: transparent !important;
    border: none !important;
    width: 1.6em;
}

.ui-datepicker .ui-datepicker-prev span, .ui-datepicker .ui-datepicker-next span{
    display: inline-block;
    position: initial;
    left: 0%;
    margin-left: 20%;
    top: 0%;
    margin-top: -0px;
    
    }


/*--------------------form------------------*/
input.wpcf7-form-control.has-spinner.wpcf7-submit {
    cursor: pointer !important;
}


label, span.wpcf7-not-valid-tip {
    font-size: 12px;
    line-height: 16px;
}

span.wpcf7-not-valid-tip {
    margin-top: 6px;
    margin-left: 12px;
    color: #D00C0C;
}

input.wpcf7-form-control, select.wpcf7-form-control.wpcf7-select, textarea.wpcf7-form-control.wpcf7-textarea{
    width: -webkit-fill-available;
    padding: 12px 12px;
    background-color: #ffffffd1;
    border: none;
    color: #004E42;
    font-family: 'Ramillas-Regular';
    font-size: 16px;
    line-height: 24px;
}

::-webkit-input-placeholder { /* WebKit browsers */
    color: #004E42 !important;
    opacity: 0.6;
    font-family: 'Ramillas-Regular';
    font-size: 16px;
    line-height: 24px;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    color: #004E42 !important;
    opacity: 0.6;
    font-family: 'Ramillas-Regular';
    font-size: 16px;
    line-height: 24px;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
    color: #004E42 !important;
    opacity: 0.6;
    font-family: 'Ramillas-Regular';
    font-size: 16px;
    line-height: 24px;
}
:-ms-input-placeholder { /* Internet Explorer 10+ */
    color: #004E42 !important;
    opacity: 0.6;
    font-family: 'Ramillas-Regular';
    font-size: 16px;
    line-height: 24px;
}

select {

    -webkit-appearance: none;
    -moz-appearance: none;
    background: url(..//waelderhof/assets/img/arrow-down.svg);
    background-repeat: no-repeat;
    background-position-x: 94%;
    background-position-y: 14px;
  
  }

span.wpcf7-list-item-label {
    font-size: 16px;
    line-height: 24px;
}

.wpcf7-list-item {
    display: inline-block;
    margin: 0 0 0 0em;
}

input.wpcf7-form-control.has-spinner.wpcf7-submit{
    background-color: #004E42;
    padding: 8px 16px;
    border: none;
    border-radius: 2px; 
    transition-duration: 0.4s;
    color: white !important;
    font-family: 'Ramillas-Regular';
    font-size: 16px;
    line-height: 24px;
    width: auto;
}

.wpcf7 form.invalid .wpcf7-response-output, .wpcf7 form.unaccepted .wpcf7-response-output, .wpcf7 form.payment-required .wpcf7-response-output {
    border-color: #d00c0c;
    color: #d00c0c;
    width: fit-content;
    padding: 8px 12px;
}


input.wpcf7-form-control:focus-visible, select.wpcf7-form-control:focus-visible, textarea.wpcf7-form-control:focus-visible {
    outline: 2px solid #004E42;
} 

input[type="checkbox" i]:focus-visible, input[type="radio" i]:focus-visible  {
    outline-offset: 0px;
}

input[type='checkbox'] {
    accent-color: #004e42;
}

input[type="radio"] {
    accent-color: #004e42;
    outline-color: #004e42;
}


.radio p {
    display: flex;
    align-items: center;
    padding-top: 24px;
}
.radio p label {
    font-size: 16px;
    line-height: 24px;
}

.radio span.wpcf7-form-control.wpcf7-radio {
    padding-left: 24px;
}
.radio span.wpcf7-list-item.last {
    padding-left: 6px;
}

.wpcf7 form.sent .wpcf7-response-output {
    border-color: #004e42 !important;
}


/*--------------------------- Media tablets portrait ----------------------------------*/
@media only screen and (max-width: 1200px) {


    /* font settings*/

    #body h1.title {
        font-size: 72px;
        margin-block-start: 16px;
    }

    #body h1{
        font-family: 'Nooks-Bold', sans-serif;
        font-size: 38px;
        line-height: 46px;
    }

    #body h2{
        font-family: 'Nooks-Regular', sans-serif;
        font-size: 32px;
        line-height: 42px;
        color: #004E42;
        margin-block-end: 16px;
        margin-block-start: 0px;
    }

    #body h4 {
        font-size: 20px;
        line-height: 28px;
    }

    #body h5{
        font-size: 18px;
        line-height: 24px;
    }
    
    #body p{
        font-size: 18px;
        line-height: 30px;
    }
    
    #body li{
        font-size: 18px;
        line-height: 30px;
    }
    
    #body a{
        font-size: 18px;
        line-height: 30px;
    }

    .ui-state-default, .ui-widget-content .ui-state-default {
        border: none !important;
        background: #F2F6F6;
        color: #004e42;
        font-family: 'Ramillas-Regular';
        line-height: 30px;
        font-size: 14px;
    }
    


    /*images sizes*/


    #body img.klee {
        width: 168px;
    }

    #body img.klee-center {
        width: 168px;
    }

    #body img.kleebg {
    width: 172px;
    }

    #body .adressbutton {
        height: 153.13px;
        width: 153.13px;
    }

    #body .mask {
        height: 153.13px;
        width: 153.13px;
    }

    #body #logo-large {
        width: 92px;
    }
}



/*--------------------------- Media regular screens and tablets landscape  ----------------------------------*/
@media only screen and (max-width: 1024px) {

    /*------------Subnav----------*/
    #body a.link-subnav {
        font-size: 14px !important;
        line-height: 22px;
        margin-block-end: 0px;
    }

    #body .subnav-size li {
        list-style: none;
        display: block;
        margin-block-end: 2px;
    }

    /*-------display styles----------*/
    #body .grid {
        display: grid;
        grid-template-columns: 1fr 24px 1fr 24px 1fr 24px 1fr 24px 1fr 24px 1fr 24px 1fr 24px 1fr 24px 1fr 24px 1fr 24px 1fr 24px 1fr;
        width: 94%;
    }

}


/*--------------------------- Media tablets portrait ----------------------------------*/
@media only screen and (max-width: 920px) {


    /*navigation*/
    #body .menu-overlay__image.grid-column-15-22 {
        grid-column: 12/22 !important;
    }
    
    #body .header-nav.grid-column-5-12, #body .small-column.grid-column-5-12 {
        grid-column: 3/10;
    }
    
    #body ul#menu-header-menu-secondary li a, ul#menu-header-menu-tertiary li a {
        font-size: 14px;
        line-height: 24px;
    }

    /*body*/

    body#body {
        padding-top: 46px;
    }

    /*subnav-settings*/
    .subnav #menu {
        display: none;
    }

     /* font settings*/

    #body h1.title {
        font-size: 64px;
        margin-block-start: 16px;
    }

    #body p.p-14 {
        font-size: 12px;
        line-height: 20px;
    }

    #body a.a-14 {
        font-size: 12px;
        line-height: 20px;
    }

    #body #three-columns-second, #body #three-columns-first{
    font-size: 16px;
    line-height: 26px;
    }

    #body #three-columns-third, #body .link-large {
        font-size: 18px;
        line-height: 30px;
        text-align: left;
    }

    /*-------padding margin styles----------*/

    #body .padding-196-bottom{
        padding-bottom: 124px;
    }


    #body .padding-146-top{
        padding-top: 102px;
    }

    #body .margin-146-top{
        margin-top: 102px;
    }

    #body .padding-146-bottom{
        padding-bottom: 102px;
    }

    #body .padding-146-top-small{
        padding-top: 0px;
    }

    #body .margin-96-negativ-top {
        margin-top: -126px;
    }

    #body .padding-96-top {
        padding-top: 64px;
    }

    #body .padding-96-bottom{
        padding-bottom: 64px;
    }

    #body .margin-60-left{
        margin-left: 64%;
    }

    #body .margin-72-left{
        margin-left: 32px;
    }


    /*-------display styles----------*/

    #body .grid-column-3-12 {
        grid-column: 3/22;
    }

    #body .grid-column-15-22 {
        grid-column: 3/22;
    }

    #body .grid-column-7-18 {
        grid-column: 5/20;
    }

    #body .grid-column-7-21 {
        grid-column: 8/16;
    }

    #body .grid-column-regular {
        grid-column: 3/22;
    }

    #body .grid-column-large {
        grid-column: 3/22;
    }

    #body .grid-column-10-20 {
        grid-column: 12/22;
    }

    #body .grid-column-12-22{
        grid-column: 3/22;
    }

    #body .grid-column-1-9 {
        grid-column: 3/10;
    }

    #body .grid-column-5-14 {
        grid-column: 3/12;
    }

    #body #three-columns-first.grid-column-5-14 {
        grid-column: 3/10;
    }

    #body .grid-column-14-end {
        grid-column: 12/22;
    }

    
    #body .grid-column-1-12 {
        grid-column: 3/22;
    }

    #body .grid-column-14-20 {
        grid-column: 12/22;
    }

    #body #three-columns-second.grid-column-14-20 {
        grid-column: 10/18;
    }

    #body .grid-column-3-9 {
        grid-column: 3/12;
        padding-top: 64px;
        order: 2;
    }

    #body .grid-column-16-22 {
        grid-column: 13/22;
        padding-top: 64px;
    }
    
    #body #text-impressum.grid-column-15-22 {
        grid-column: 14/22;
    }

    #body #img-impressum.grid-column-5-12 {
        grid-column: 3/11;
    }

    #body .grid-column-20-end {
        grid-column: 18/22;
    }


    /*images sizes*/

    #body img.klee-center {
        margin-left: 50vw;
    }

    #body img.klee {
        width: 148px;
        left: -80px;
    }


    /*container settings*/
    
    #body .float-right {
        float: left;
    }

    /*----form------*/

    .first-column-contact-form{
        grid-column: 1/22;
    }

    .second-column-contact-form{
        grid-column: 1/22;
    }

    .third-column-contact-form{
        grid-column: 1/22;
    }

    .first-half-column-contact-form{
        grid-column: 1/22;
    }

    .second-half-column-contact-form{
        grid-column: 1/22;
    }

    select {
        background-position-x: 98%;
    }


    .radio p {
        display: block;
        align-items: center;
        padding-top: 16px;
    }

    .radio span.wpcf7-form-control.wpcf7-radio {
        padding-left: 0px;
    }

    .radio span.wpcf7-list-item.last {
        padding-left: 12px;
        padding-top: 4px;
    }

}

/*--------------------------- Mobile decives landscape ----------------------------------*/
@media only screen and (max-width: 768px) {

    /*navigation*/
    #body .menu-overlay__image.grid-column-15-22 {
        grid-column: 16/22 !important;
    }

    #body .menu-overlay img.adressbutton, #body .menu-overlay .mask {
        display: none;
    }
    
    #body .header-nav.grid-column-5-12, #body .mobile-grid-content, #body .menu-header-menu-tertiary-container {
        grid-column: 3/16;
    }
    
    .nav-first-container {
        height: fit-content;
        margin: 24px 0;
    }

    #body ul#menu-header-menu-secondary li a, ul#menu-header-menu-tertiary li a {
        font-family: 'Ramillas-Regular';
        font-size: 14px;
        line-height: 24px;
        letter-spacing: 0.3px;
        margin-block-end: 8px;
        margin-block-start: 0px;
        color: #004E42;
        border-bottom: none;
        margin-left: 0px;
    }

    ul#menu-header-menu-primary li a {
        font-size: 32px;
        line-height: 52px;
    }

    #body ul#menu-header-menu-secondary li , ul#menu-header-menu-tertiary li  {
        margin-block-end: 0px;
    }


    #body .mobile-column {
        flex-direction: column;
    }

    #body .menu-header-menu-secondary-container ul, .menu-header-menu-tertiary-container ul {
        display: flex;
        flex-direction: column;
    }


    /*Footer*/

    #body #footer-desktop{
        display: none
    }


    #body #footer-mobile{
        display: grid;
        grid-template-columns: 1fr 12px 1fr 12px 1fr 12px 1fr 12px 1fr 12px 1fr 12px 1fr 12px 1fr 12px 1fr 12px 1fr 12px 1fr 12px 1fr;
        width: 96%;
    }


    /*grid settings*/

    #body .grid, #body .mobile-grid {
    display: grid;
    grid-template-columns: 1fr 12px 1fr 12px 1fr 12px 1fr 12px 1fr 12px 1fr 12px 1fr 12px 1fr 12px 1fr 12px 1fr 12px 1fr 12px 1fr;
    width: 96%;
    }

    /* font settings*/

    #body h1.title {
        font-size: 42px;
    }

    #body h1 {
        font-size: 30px;
        line-height: 38px;
    }

    #body h2 {
        font-size: 26px;
        line-height: 32px;
        margin-block-end: 10px;
    }

    #body h3 {
        font-size: 22px;
        line-height: 32px;
        margin-block-end: 10px;
    }

    #body h4 {
        font-size: 18px;
        line-height: 26px;
    }

    #body h5 {
        font-size: 14px;
        line-height: 22px;
    }

    #body p {
        font-size: 16px;
        line-height: 26px;
    }

    #body p.p-16{
        font-size: 14px;
        line-height: 22px;
    }

    #body a {
        font-size: 16px;
        line-height: 28px;
    }

    .ui-state-default, .ui-widget-content .ui-state-default {
        border: none !important;
        background: #F2F6F6;
        color: #004e42;
        font-family: 'Ramillas-Regular';
        line-height: 28px;
        font-size: 14px;
    }

    /*-------display styles----------*/

    #body .grid-column-5-12 {
        grid-column: 3/12;
    }

    #body .grid-column-13-20 {
        grid-column: 13/22;
    }

    #body #list.grid-column-10-20{
        grid-column: 3/22;
    }

    #body #img-list.grid-column-1-9 {
        grid-column: 3/22;
    }

    #body .footer-grid-column-3-5 {
        grid-column: 3 / 22;
    }

    #body .footer-grid-column-7-21 {
        grid-column: 3/16;
    }

    #body .footer-grid-column-18-22 {
        grid-column: 18/22;
        justify-self: end;
    }

    #body .grid-column-3-9 {
        grid-column: 3/22;
        padding-top: 32px;
    }

    #body .grid-column-16-22 {
        grid-column: 3/22;
        padding-top: 32px;
    }

    #body #text-impressum.grid-column-15-22 {
        grid-column: 3/22;
    }

    /*-------padding margin styles----------*/

    #body .padding-16-bottom {
        padding-bottom: 12px;
    }

    #body .padding-16-top{
        padding-top: 12px;
    }

    #body .padding-32-top {
        padding-top: 24px;
    }

    #body .padding-32-bottom{
        padding-bottom: 24px;
    }

    #body .padding-96-top {
        padding-top: 32px;
    }

    #body .padding-96-bottom{
        padding-bottom: 32px;
    }

    #body .table-padding{
        padding: 8px 8px;
    }

    #body .margin-60-left {
        margin-left: 62%;
    }


    /* Links und Buttons */

    #body button {
        padding: 8px 12px;
    }

    #body button a {
        font-size: 14px;
        line-height: 22px;
    }

    #body button:hover a {
        font-size: 14px;
        line-height: 22px;
    }


    #body button.button-secondary {
        padding: 8px 12px;
    }
    
    #body button.button-secondary a {
        font-size: 14px;
        line-height: 22px;
    }
    

    /*-----border-settings*/

    #body .border-bottom {
        border-bottom: 1px solid #004E42;
    }

    #body .border-table {
        border-left: 1px solid #004E42;
        border-top: 1px solid #004E42;
        border-right: 1px solid #004E42;
    }

    #body #three-columns-first.grid-column-5-14 {
        grid-column: 3/22;
        border-right: 1px solid #004E42 !important;
    }

    #body #three-columns-second.grid-column-14-20 {
        grid-column: 3/22;
        border-right: 1px solid #004E42 !important;
    }

    #body #three-columns-third, #body .link-large {
        grid-column: 3/22;
    }

    #body #two-columns-first.grid-column-5-14 {
        grid-column: 3/22;
        border-right: 1px solid #004E42 !important;
    }


    /*----------table settings-----------*/


    #body h4#two-columns-second, #body #three-columns-third{
        border-bottom: 1px solid #004E42!important;
    }

    #body .table-three-columns p:nth-last-child(-n+3), .table-home div:last-of-type {
        border-bottom: 0px solid #004E42!important;
    }

    #body .table p:last-of-type {
        border-bottom: 0px solid #004E42!important;
    }

    #body .table-three-columns h4:last-child {
        border-bottom: 1px solid #004E42!important;
    }

    #body .table-home div:last-of-type {
        border-bottom: 1px solid #004E42!important;
    }

    /*images sizes*/
    #body img.klee-center {
        width: 132px;
    }

    #body img.klee {
        width: 132px;
        left: -120px;
        top: 50%;
    }

    #body .adressbutton {
        height: 108.5px;
        width: 108.5px;
    }
    
    #body .mask {
        height: 108.5px;
        width: 108.5px;
        margin-top: 32px;
    }

    #body #img-list{
        order: 2; 
    }

    #body #img-impressum.grid-column-5-12 {
        grid-column: 3/22;
        order: 2;
        padding-top: 32px;
    }


    /*------------Slider settings---------*/

    .swiper-button-next, .swiper-button-prev {
        width: calc(var(--swiper-navigation-size)/ 52 * 40);
    }
}



/*--------------------------- Mobile decives landscape footer -settings----------------------------------*/
@media only screen and (max-width: 612px) {


    /*------------footer settings---------*/

    #body .footer-grid-column-7-21 {
        grid-column: 3/22;
    }

    #body .footer-grid-column-18-22 {
        grid-column: 3/22;
        justify-self: start;
        margin-top: 32px;
        flex-direction: column-reverse;
    }

    #body .content-end {
        justify-content: start;
    }
}


/*--------------------------- Mobile decives portrait ----------------------------------*/
@media only screen and (max-width: 428px) {



     /*navigation*/
     #body .menu-overlay__image.grid-column-15-22 {
       display: none;
    }

    #body .header-nav.grid-column-5-12, #body .mobile-grid-content, #body .menu-header-menu-tertiary-container {
        grid-column: 3/22;
    }

    .nav-first-container {
        height: fit-content;
        margin: 0px ;
    }


    /*------------footer settings---------*/
    #body .footer-grid-column-7-21 {
        grid-column: 3/22;
        flex-direction: column;
    }

    #body .margin-72-left {
        margin-left: 0px;
        margin-top: 16px;
    }

    #body #footer .padding-8-top {
        padding-top: 0px;
    }
}