/* import fonts used in the scheme here


/* baloo-bhaijaan-2-regular - latin */
/*@font-face {
    font-display: swap;  Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options.
    font-family: 'Baloo Bhaijaan 2';
    font-style: normal;
    font-weight: 400;
    src: url('/fonts/baloo-bhaijaan-2-v19-latin-regular.woff2') format('woff2');  Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+
}*/
/* baloo-bhaijaan-2-500 - latin */
/*@font-face {
    font-display: swap;  Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options.
    font-family: 'Baloo Bhaijaan 2';
    font-style: normal;
    font-weight: 500;
    src: url('/fonts/baloo-bhaijaan-2-v19-latin-500.woff2') format('woff2');  Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+
}*/
/* baloo-bhaijaan-2-600 - latin */
/*@font-face {
    font-display: swap;  Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options.
    font-family: 'Baloo Bhaijaan 2';
    font-style: normal;
    font-weight: 600;
    src: url('/fonts/baloo-bhaijaan-2-v19-latin-600.woff2') format('woff2');  Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+
}*/
/* baloo-bhaijaan-2-700 - latin */
/*@font-face {
    font-display: swap;  Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options.
    font-family: 'Baloo Bhaijaan 2';
    font-style: normal;
    font-weight: 700;
    src: url('/fonts/baloo-bhaijaan-2-v19-latin-700.woff2') format('woff2');  Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+
}*/
/* baloo-bhaijaan-2-800 - latin */
/*@font-face {
    font-display: swap;  Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options.
    font-family: 'Baloo Bhaijaan 2';
    font-style: normal;
    font-weight: 800;
    src: url('/fonts/baloo-bhaijaan-2-v19-latin-800.woff2') format('woff2');  Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+
}*/


@font-face {
    font-family: 'netto-regular';
    src: url('/fonts/Netto-Regular.woff') format('woff'),
        url('/fonts/Netto-Regular.woff2') format('woff2');
}

@font-face {
    font-family: 'netto-bold';
    src: url('/fonts/Netto-Bold.woff') format('woff'),
        url('/fonts/Netto-Bold.woff2') format('woff2');
}


:root{

    --content-width: 1000px;
    --content-margin: 10px;

    --background: #3C3E3B;
    --modalcover: rgba(0,0,0,0.7);

    --headlinecolor: black;
    --headlinefont: "Netto-Regular", Arial, Helvetica, sans-serif;

    --textcolor: #fff;
    --textfont: Cambria,Georgia,serif;

    --linkcolor: #9CBC63;
    --linkcolordisabled: silver;

    --buttoncolor: #9CBC63;
    --buttontextcolor: black ;

    --grid-spacing: 2%;
    --grid-spacing-vertically: 22px;

    --bordercolor: black;
    --borderradius: 4px;
    --border: 1px solid var(--bordercolor);

    --input-backgroundcolor: whitesmoke ;
    --input-color: #666 !important;
    --input-margin: 0.5rem 0;
    --input-padding: 0.25rem;

}

input, textarea, select{
    padding: var(--input-padding);
    font-size: inherit;
    border: var(--border);
    border-color: var(--bordercolor);
    background-color: var(--input-backgroundcolor);
    color: black;
    border-style: solid;
    border-radius: var(--borderradius);
    margin: .5rem 0;
    width:100%;
    max-width: 400px;
    box-sizing:border-box;
    font-family: var(--textfont);

}

option{
    font-family: var(--textfont) !important;
    background-color:blue;
}

#_content-wrapper {
    margin-top: 88px;

}

html {
    background-color: var(--background);
    font-family: var(--textfont);
    font-weight: 200;
    font-size:20px;
    scroll-behavior: smooth;
}

body {
    color: var(--textcolor);


}

#_body-wrapper {
    z-index: 2;
    position: initial;
    min-height: initial;
}


h1 {
    font-family:var(--headlinefont);
    font-size:2rem;

    margin: 10px 0 30px 0;
    font-weight: 400
}

h2 {
    font-family:var(--headlinefont);
    font-size: 1.8rem;
    line-height: normal;
    font-weight: 500;
    margin-bottom: 1rem;

}

h3 {
    font-family:var(--headlinefont);
    font-size: 1.5rem;
    font-weight: 500;
    margin-bottom: 1rem;
    line-height:1.7rem;

}

a {
    color:var(--linkcolor);
    cursor:pointer;
    text-decoration:underline;
}

a,  a:visited, a:link {
    /*text-decoration: none;*/
    /*color: silver;*/
}

a:hover{

    color: black;
}

label{
    display:block;
    clear:both;
    font-size:0.9em;
}

section{
    padding:30px 0 !important;
    font-width:condensed;
}

.sectionheadline{
    font-size:1.2rem;
    color:#94BD55;
    display:inline-block;
    margin-bottom:10px;
    margin: 0 0 30px 0;
}

.h2subline{
    font-size: 1.15rem;
    line-height: 1.15em;
    margin-top: .5em;
    display: inline-block;
}


.indent{
    padding-left :3rem !important;
    padding-right :3rem !important;
}

p {
    font-size:.9em;
    font-weight:300;
    line-height:1.4em;
    margin-bottom: 25px;
}

p.introduction{
    font-weight:400;
}

button, ._button {
    border-radius:4px;
    padding: 3px 8px;
    font-family: var(--textfont);
    font-size: .9rem;
}



#_top-wrapper{
    position: fixed;
    z-index: 6666;
    top: 0;
    left: 0;
    /*border-bottom: 1px solid silver;*/
    width: 100vw;

    background-color:black;
    height: 88px;
}

#_bottom-wrapper{
    color:white;
    background-color:black;
    min-height: 70px;
}

#logo{
    position:relative;
    width:140px;
    max-width:140px;
    float:left;

}

.noverticalpadding {
    padding-top: 0 !important;
    padding-bottom: 0 !important;

}


.blogimage-wrapper{
    width:100%;
}
.blogimage{
    width:100%
}

.blogteaser-wrapper{
    width:100%;
    background-color:#E2E2E2;

}
.blogteaser{

    margin:  20px;
    color:black;
    display: inline-block;
}

.blogteaser h2 {
    font-weight: 500;
    margin-bottom: inherit;
    font-size:1.4rem;
}

.blogteaser-text{
    hyphens: auto;
    line-height:1.3rem;
}

.blogteaser-more-wrapper{
    clear:both;
    padding-top:0.5rem;
}


.blogteaser-more{

}

.blogteaser-less-wrapper{
    clear:both;
    padding-top:1.5rem;
}

.blogteaser-less{

}

.blog-maintext-wrapper{
    background-color:#232424;
    display:none;
}

.blog-maintext{
    margin: 25px 30px 20px 20px;
    color:white;
    display: inline-block;

    hyphens: auto;
    line-height:1.2rem;
    font-size:.9em;
}

.zebra:nth-child(odd){
    background-color: #FFF;
}
.zebra:nth-child(even){
    background-color: #E7E7E7;
}

#_nav_desktop_wrapper {
    float:right;
}


._gallery-video-wrapper {

    transition: all 0s !important;

}


/*GALLERY*/

.gallery {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-auto-rows: repeat(4, 1fr);
    grid-auto-flow: dense;
    gap: 6px;
}



@media screen and (max-width: 768px) {
    .gallery {
        grid-template-columns: 1fr 1fr;
    }
}


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

    /* changes the grid layout to a single column */
    div.gallery {
        grid-template-columns: 1fr;
    }

    /* resets the grid placement properties for
    the images spanning four grid cells */
    img.four-grid-cells {
        grid-row: auto;
        grid-column: auto;
    }

    /* resets the grid placement properties for
    the images spanning two grid columns  */
    img.wide-image {
        grid-column: auto;
    }

}




/*END GALLERY*/

/*FOOTER*/

.footer-container a,  .footer-container a:visited, .footer-container a:link {
    text-decoration: none;
    color: white;
}

.footer-container a:hover{

    color: silver;
}



.footer-container {


    display: flex;
    font-size:0.8rem;
    font-weight:200;
    justify-content: space-between;
    align-items: flex-end;
    /* flex-flow: row nowrap; */
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: space-between;


    gap: 5px;

}




.footer-item {
    /* flex:1 1 25%; */
    flex-grow:1;
    flex-basis:content;
    align-self:auto;
    /*border:1px dashed blue;*/
}
.shrink{
    flex-grow:0;
    flex-shrink:1;
    flex-basis:content;
    padding-left: 40px;

}


.footer-item:nth-of-type(2) {


}
.footer-item:nth-of-type(3) {

    text-align:center;

}
.footer-item:nth-of-type(4) {
    text-align:right;
}
.videocontainer {

    width: unset;
    max-width: unset;


}


@media screen and (max-width: 1180px) {
    .videocontainer {

        width:100vw !important;
        max-width:100vw !important;


    }
}


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


    .footer-container {
        flex-wrap: wrap;
    }


    .footer-item{
        flex-basis:49%;
        margin-bottom:.8rem;
        padding-left:0;
    }

    .footer-item:nth-of-type(3) {
        text-align:left;
    }
    .footer-item:nth-of-type(4) {
        text-align:left;
    }

}

@media screen and (max-width: 480px) {
    .footer-item {

        flex-basis:99%;

        padding-left:0;
    }
}






/*END FOOTER*/


._accordion-title {
    border-top:1px solid white;
    padding: 9px 0px;
    color: var(--textcolor);
    line-height: 1.2rem;
    font-size: .9rem;
}

div ._accordion-content:last-of-type{
    border-bottom:1px solid white;

}


._accordion-content {

    padding: 10px 0px;
    hyphens: auto;
    line-height: 1.2rem;
    font-size: .9em;
}

._accordion-title._accordion-content-open::after {
    content:url("/media/arrow-up.png");
    /*right:0px;*/
    position: absolute;
    font-weight:bold;

}
._accordion-title:not(._accordion-content-open)::after {

    content:url("/media/arrow-down.png");
    /*right:0px;*/
    position: absolute;
    font-weight:bold;

}


#mapoverlay{
    position: absolute;
    /*padding:10px;*/
    background-color: white;
    color: black;
    top: 45px;
    left: calc(((100vw - var(--content-width)) / 2) + var(--content-margin));
    /*left: calc(var(--content-margin) / 2);*/
    /* bottom: 20px; */
    z-index: 4444;
    min-width:250px;
    width:calc(var(--content-width) / 3);
    font-family:var(--textfont);
    font-size: .9rem;
}


@media (max-width:1000px) {
    #mapoverlay{

        left: calc(var(--content-margin) / 2);

    }
}

@media (max-width:600px) {
    #mapoverlay{

        position: relative;
        left: 0;
        top: 0;
        width: 100%;
        margin: 0;

    }
}

#mapoverlay h2{
    font-weight:bold;
}

.sectionwrapper-anfahrt {
    position:relative;
}

.leaflet-container a {
    color: var(--linkcolor) !important;
}


ul.unorderdlist{
    margin-bottom: 25px;
}

ul.unorderdlist li{
    list-style-type: disc;
    list-style-position: outside;
    margin-left:20px;
    line-height:1.4em;
    font-size:.9em;

}



.block-wrapper {
    display: flex;
    justify-content: space-between;
    /*align-items: flex-end;*/
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: space-between;
    /*gap: 5px;*/
}


.block-wrapper > .block-item:nth-of-type(3) {
    display:none;
}

.block-wrapper > .block-item:nth-of-type(2) {
    display:block;
}


.wide {
    grid-column: span 2 / span 2;
}


.block-wrapper .wide-at-bottom .wide {
    grid-row-start:2;
}

.block-wrapper  .wide-at-bottom  .narrow {
    grid-row-start:1;
}

.block-wrapper .wide-on-top .wide {
    grid-row-start:1;
}

.block-wrapper .wide-on-top  .narrow {
    grid-row-start:2;
}



/*
.images-item .following{
    grid-row-start: 2;
}

.images-item img{
    width:100%;
    overflow:hidden;
    display: block;
}*/


.block-wrapper.reversed {


    flex-direction: row-reverse;

}
.block-wrapper.reversed .following {


    grid-row-start:unset;

}



.block-wrapper.reversed .first {


    grid-row-start:2;

}

.block-item{
    display:block;
    flex-grow:1;
    flex-basis:50%;
    align-self:auto;
    /*border:1px dashed blue;*/
}
.block-item .textblockleft{
    margin-right:25px;
}

.block-item .textblockright{
    margin-left:25px;
}



.zweispaltig {
    display: flex;
    justify-content: space-between;
    /*align-items: flex-end;*/
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: space-between;
    /*gap: 5px;*/
}

.spalte{
    display:block;
    flex-grow:1;
    flex-basis:50%;
    align-self:auto;
    /*border:1px dashed blue;*/
}

.spalte:nth-of-type(2){
    /*    text-align:right;*/
}


.spalte.kontaktdaten {
    text-align:right;
}

.spalte p{
    width:90%;
}

.spalte input, .spalte textarea, .spalte select {
    width:90%;
    font-size:0.9em;
}

/*.images-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: space-between;
    gap: 15px;
}

.images-item.first{
    flex-grow:1;
    flex-basis:100%;
    align-self:auto;
    border:1px dashed yellow;
}

.images-item.following{
    flex-grow:0;
    flex-shrink:2;
    flex-basis:48%;
    align-self:auto;
    border:1px dashed green;
}

.images-item img{
    width:100%;
}*/




.images-wrapper {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 16px;
}

.images-item img {
    overflow:hidden;
    display:block;
    width: 100%;
}




@media(max-width:800px) {
    .block-wrapper {


        flex-direction: column;

    }

    .block-wrapper > .block-item:nth-of-type(2) {
        display:none;
    }

    .block-wrapper > .block-item:nth-of-type(3) {
        display:block;
    }

    .block-wrapper.reversed {


        flex-direction: column;

    }


    .zweispaltig {


        flex-direction: column;

    }

    .spalte input, .spalte textarea, .spalte select {
        width:100%;
    }



    .spalte.kontaktdaten {
        text-align:left;
    }

    .spalte:nth-of-type(2){
        text-align:left;
    }

    .images-item.following{
        display:none;
    }
    .images-wrapper {

        grid-template-rows: repeat(1, 1fr);
    }

    .block-item .textblockright{
        margin-left:0px;
    }
}


#slogan-wrapper{
    position: absolute;
    z-index: 5555;
    bottom: 6.5vw;
    /*left: calc( ((100vw -  var(--content-width))  / 2) + var(--content-margin)  );*/
    left:6vw;
}
.nametitel{
    font-family: var(--headlinefont);
    font-size: 1.9vw;
    display: inline-block;
    margin-bottom: 1vw;
}
.slogantext{
    font-family: var(--headlinefont);
    font-size: 3.8vw;
    line-height: normal;
    font-weight: bold;
}

.optionalbreaknametitel{
    display:none;
}

.optionalbreakslogantext{
    display:block;
}

#kopfgrafik-desktop {
    display:block;
}
#kopfgrafik-mobile {
    display:none;
}

@media(max-width:900px) {

    #slogan-wrapper{
        position: relative;
        background-color: #2F312A;
        padding: 2vw 0 4vw 0;
        text-align: left;
        bottom:0;
        top:0;
        left:0;
        padding-left:var(--content-margin);

    }

    .nametitel{
        font-family: var(--headlinefont);
        font-size: 17px;
        display: inline-block;
        margin-bottom: 1vw;
    }
    .slogantext{
        font-family: var(--headlinefont);
        font-size: 36px;
        line-height: normal;
        font-weight: bold;
    }
    .optionalbreakslogantext{
        display:none;
    }

    #kopfgrafik-desktop {
        display:none;
    }
    #kopfgrafik-mobile {
        display:block;
    }

}

@media (max-width:600px) {



    .optionalbreaknametitel{
        /*display:block;*/
    }



}


#makeappointment{
    display: inline-block;
    line-height: 44px;
    margin-left: 18px;
    /* padding: 0px; */
    vertical-align: bottom;
}


@media(max-width:425px) {

    #makeappointment{
        display:none;

    }

}






/*
* {
    box-sizing:border-box
}*/

/* Slideshow container */
.slideshow-container {
    max-width: 1000px;
    position: relative;
    margin: auto;
}

/* Hide the images by default */
.mySlides {
    display: none;
}
.mySlides:nth-of-type(1) {
    /*display: block;*/
}

.mySlides img {
    overflow:hidden;
    display:block;

}
.mySlides .images-wrapper {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: 60vw;
    column-gap: 15px;
    overflow: hidden;
}

/* Next & previous buttons */
.prev, .next {
    cursor: pointer;
    position: absolute;
    top: 50%;
    width: auto;
    margin-top: -22px;
    padding: 16px;
    color: white;
    font-weight: bold;
    font-size: 18px;
    transition: 0.6s ease;
    border-radius: 0 3px 3px 0;
    user-select: none;
}

/* Position the "next button" to the right */
.next {
    right: 0;
    border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
    background-color: rgba(0,0,0,0.8);
}

/* Caption text */
.text {
    color: #f2f2f2;
    font-size: 15px;
    padding: 8px 12px;
    position: absolute;
    bottom: 8px;
    width: 100%;
    text-align: center;
}

/* Number text (1/3 etc) */
.numbertext {
    color: #f2f2f2;
    font-size: 12px;
    padding: 8px 12px;
    position: absolute;
    top: 0;
}

/* The dots/bullets/indicators */
.dot {
    cursor: pointer;
    height: 15px;
    width: 15px;
    margin: 0 2px;
    background-color: #fff;
    border-radius: 50%;
    display: inline-block;
    transition: background-color 0.6s ease;
}

.active, .dot:hover {
    background-color: #717171;
}

/* Fading animation */
.fade {
    animation-name: fade;
    animation-duration: 5s;
}

@keyframes fade {
    0% {
        opacity:0
    }
    15% {
        opacity: 1
    }
    85%{
        opacity: 1
    }
    98%{
        opacity:0.0
    }
    100%{
        opacity:0.0
    }
}

#whatsapp-wrapper{
    display:none;
}

.error{
    color:red;
    font-family: 'netto-regular';
    border: 1px solid red;
    padding: 10px;
    line-height: normal;
}


/* Customize the label (the container) */
.container {
    display: block;
    position: relative;
    padding-left: 35px;
    /*margin-bottom: 12px;*/
    cursor: pointer;
    /*font-size: 22px;*/
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Hide the browser's default checkbox */
.container input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

/* Create a custom checkbox */
.checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 1rem;
    width: 1rem;
    background-color: #eee;
    border-radius: var(--borderradius);
}

/* On mouse-over, add a grey background color */
.container:hover input ~ .checkmark {
    /*background-color: #ccc;*/
}

/* When the checkbox is checked, add a blue background */
.container input:checked ~ .checkmark {
    /*background-color: #2196F3;*/
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

/* Show the checkmark when checked */
.container input:checked ~ .checkmark:after {
    display: block;
}

/* Style the checkmark/indicator */
.container .checkmark:after {
    left: 0.3rem;
    top: 0rem;
    width: 0.3rem;
    height: 0.6rem;
    border: solid black;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);

}

#terminanfrage-success{
    display:none;

    text-align:center;
    padding:15px;
    border:1px solid green;
    color:white;
    border-radius:var(--borderradius);
    /*    background-color:green;*/
    margin-bottom: 2rem;
}
#terminanfrage-error{
    display:none;

    text-align:center;
    border:1px solid red;
    color:white;
    border-radius:var(--borderradius);
    /*    background-color:red;*/
    padding:15px;
    margin-bottom: 2rem;
}

._disabled{
    background-color:rgb(245, 245, 245);
    opacity: 0.7;
}


.sectionwrapper-termin-buchen{
    background-color: var(--linkcolor);
}


#upload_area{
    /*display:none;*/
}

._filedelete{
    color:var(--textcolor);
}

.upload-form {


    box-shadow:none;
}

.upload-form .result {
    color:silver;
    font-size:0.9rem;
}

._filedelete{
    color:#666;
}

#_dialog_closebutton, #_dialog_content {

    color: black;
}

.upload-form label span {

    font-size: 0.9rem;

}

.buttonstyle{
    border: 1px solid black;
    border-radius: var(--borderradius);
    padding: 8px;
    box-sizing: border-box;
    max-width: 400px;
    width: 100%;
    /*height: 36px;*/
    background-color:silver;
    color: black;
    text-align:center;

}

.fileuploaded{
    background-color: rgb(156, 188, 75) !important;
}

.buttonstyle .checkmark{
    display:none;
}