/* General Style */ 
/* Lebenskraft | Gabi*/
/* by Thomas Schmid, below the line, Webmarketing, Friedberg*/

@font-face { font-family: 'headline';font-display:auto;src: url('../font/Caveat.ttf') format('truetype'); }
@font-face { font-family: 'content';font-display:auto;src: url('../font/Raleway.ttf') format('truetype'); }

html {scroll-behavior: smooth;}
body {margin: 0em;padding: 0em;font-size: 110%;font-family: "content", arial, sans-serif;color: #3a3a3a;background-image: url(../images/background-005.webp);background-size:100% auto;background-attachment:fixed;}

h1 {font-size:2em;font-weight:700;margin:0;padding:2em 0 1em 0;color:#ffffff;}
.vital {font-size:2em;font-weight:700;margin:0;padding:1em 0 0;font-family:'headline';color:#ffffff;}

h2 {font-size:1.8em;font-weight:400;margin:0em 0 0.5em;padding:0em;}

h3 {margin:0;padding:0;font-size:1.4em;}

h4 {font-size:1.5em;color:#054f95;margin:0em;padding:0em;}
h5 {font-size:1.6em;color:#054f95;margin:0em;padding:0em;}

p{font-size:1.1em;padding:0 0 1em 0;margin:0;}
a, a.hover, a.visited{color:/*#49b9f0 #ffffff*/#073d9a;}

hr.style1 {border: 0;height: 1px;background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(23, 172, 78, 1), rgba( 0, 0, 0, 0));margin:1em 0;}

/* Header */ 
header{background:#ffffff;box-shadow: 0 0 5px 5px rgba(73, 185, 240, 1));height:9em; margin: 0 auto; position: absolute;top:0; width: 100%;}
header.neu{height:6em;margin: 0;position:fixed;z-index:9999;}

.header-top{border-bottom:none;/*background:#49b9f0;*/width:100%;}

.startseite header.neu .header-top{height:4em;}
.startseite header.neu #banner #banner-text-mit{display:inline-block;}
/*.startseite header.neu nav.nav{width:59%;}*/
.startseite header.neu{background:#ffffff;box-shadow: 0 0 5px 5px rgba(73, 185, 240, 1);}
.startseite header{background:none;box-shadow:none;}


.header-top img{height:8em;}
header.neu .header-top a.facebook img,
.header-top a.facebook img{height:2em;}

header.neu .header-top img{height: 5em;bachground:#ffffff;}

header #banner{max-width:1200px;margin:auto;height:3em;text-align:left;position:relative;z-index:9999;}
header #banner #banner-text-mit{width:40%;display:inline-block;}
header #banner #banner-text-ohne{display: none;}

header .logo{width:25%; display:inline-block;}
header .logo img{width:auto;}
header nav{width:74%;text-align:right;}


.startseite header #banner #banner-text-mit{display:none;}
.startseite header.neu .header-top .banner{position:fixed;} 


.header-bottom{max-width:1200px;margin:0 auto;}
.header-bottom-left{width:10%;text-align:left;}
nav.nav{display:inline-block;vertical-align:top;}
.header-bottom-right{width:10%;text-align:right;}

header .header-bottom-right,
header .header-bottom-left{display:none;}
header.neu .header-bottom-right,
header.neu .header-bottom-left{display:inline-block;}

header.neu .header-top{display:inline-block;}
header.neu{height:auto;}
header.neu .banner-menu{border-top:4px solid #49b9f0;}


.banner-menu{text-align: center;/*width: 100%;*/vertical-align: middle;border-top:none;line-height: 2.8em;}
.banner-menu ul li a{text-transform:uppercase;text-decoration:none;}

#main{padding-bottom:5em;width: 100%;z-index: 8888;position: relative;padding:0em;margin-top:0.5em;}

.kontakt #main,.person #main{margin-top:13em;}

#main article {margin:0 auto;padding: 0 20%;background:rgba(73, 185, 240, 0.9);}
#main article img{max-width:100%;}
#main article ul {margin: 1em 0;padding:0 0 0 3%;list-style-type: circle;font-size:1.1em;}
#main article ul li{line-height:1.5em;list-style-type: circle;}
.kontakt #main article img, .person #main article img{float:left;margin-right:5%;background:linear-gradient(to bottom, #5bbcf7 0%, #7994ff 50%, #3e41ff 100%)}

#slider{margin-top:-1em;top:0;width:100%;z-index:5555;}

.startseite #slider{height: 75vh;}
.startseite #slider img{width:auto; height:auto;margin:0;}


.wave {width:100%; height:100px; position:relative; overflow:hidden;margin: 0.05em 0 -0.1em;}
.wave:before {content:""; display:block; width:50%; height:50px; background:rgba(73, 185, 240, 0.9); border-radius:100% 0 0 0; position:absolute; left:0; bottom:0;}
.wave:after {content:""; display:block; width:50%; height:50px; background:transparent; border-radius:0 0 100% 0; border:200px solid rgba(73, 185, 240, 0.9); border-width:0 200px 200px 0; position:absolute; left:50%; top:0;}

.wave.top {top:-1px; /* for IE */
-webkit-transform:rotateX(180deg);
transform:rotateX(180deg);
}
.wave.right {
-webkit-transform:rotateY(180deg);
transform:rotateY(180deg);
}
.wave.top.right {top:-1px; /* for IE */
-webkit-transform:rotateY(180deg) rotateX(180deg);
transform:rotateY(180deg) rotateX(180deg);
}
.wave.bl:before {background:rgba(73, 185, 240, 0.9);}
.wave.bl:after {border-color:rgba(73, 185, 240, 0.9);}
.wave.or:before {background:rgba(73, 185, 240, 0.9);}
.wave.or:after {border-color:rgba(73, 185, 240, 0.9);}
.wave.gn:before {background:rgba(73, 185, 240, 0.9);}
.wave.gn:after {border-color:rgba(73, 185, 240, 0.9);}

.startseite .wave.bottom {position:absolute; margin: -5.1em 0 0 0 ;}
.kontakt .wave.bottom,.person .wave.bottom{display:none;}





#main article .icon img{width:auto;}




/*Slider-Unterseiten*/

#slider-img { overflow: hidden; height:75vh;}


/* Navigation */ 

ul {margin:0px;padding:0px;}
li {}
.nav ul {text-align:right;}
.nav ul li{list-style:none;margin-top:1em;display:inline-block;padding: 0 0 0 5%;}
/*.startseite .nav ul li a{color:#ffffff;}*/
.person .nav ul li a{color:#49b9f0;}
.nav ul li a{text-decoration:none;padding: 0 0 0.5em 0;}
header.neu .nav ul li a{color:#49b9f0;}
.nav ul li.active a{border-bottom: 1px solid #000000;}


.top-grid-item{display:none;}


/*grid*/,
.grid-2-all{display: grid;grid-template-columns: 30% 70%; padding:2%;margin:auto;text-align:center;}


.newsflash{display: grid;grid-template-columns: 1fr 1fr 1fr;gap:2%; padding:0;margin:0 auto 2em;}
.grid-3{display: grid;grid-template-columns: 1fr 1fr 1fr;gap:2%; padding:0;margin:0 auto 2em;}

.grid-3-item{border:1px solid #cdcdcd; padding:10%;border-radius:10px;background:#f9f9f9;}
.grid-3-item p.link{vertical-align:bottom;}
.grid-3-item p.koop-logo{min-height:8em;}
.grid-3-item ul li{list-style:none;}

/* Footer */ 
footer {display:block;background:#49b9f0;margin:15em 0 0;text-align:center;padding:0;font-size:0.9em;color:#ffffff;position:relative;z-index:7777;}
footer h2{font-weight:700;}
footer h3{font-size:1.2em;}
footer img{max-width:80%;border-radius:10px;}
footer ul {max-width:1200px;width:96%;margin:auto;color:#ffffff;}
footer ul li {display:inline-block;margin:0;vertical-align:top;padding: 1em 3em;color:#ffffff;}
footer .footer-item ul li{color:#ffffff;list-style:none;padding:0;margin:0;}
footer ul li{padding:1em 0;width:100%;}
footer a{color:#ffffff;}
footer ul li a:hover {color:#ffffff;padding:0;}
footer ul li a.active {border-bottom:#ffffff;}
footer ul li a {color:#ffffff;transition: filter 0.9s ease 0s;text-decoration:none;}
.footer-grid {display: grid;grid-template-columns: 33.33% 33.33% 33.33%;width:80%;padding:1%;margin:auto;max-width:1200px;}
.footer-grid .middle{text-align:center;}
.footer-grid .middle p{padding: 0 0 1em 0;}
.footer-grid .right{text-align:right;}
.footer-grid .links p{padding:0;}
.footer-grid .middle img{width:auto;margin:2em 0 0 0;}
.footer-item {padding: 0 1%;font-size: 1em;text-align:left;}



/*hamburger*/
.hamburger {padding: 15px 15px;display: inline-block;cursor: pointer;transition-property: opacity, filter;transition-duration: 0.15s;transition-timing-function: linear;font: inherit;color: inherit;text-transform: none;background-color: transparent;border: 0;margin: 0;overflow: visible;text-align:right;width:96%;margin-right:5%;}
.hamburger-box {width: 10%;height: 2em;display: inline-block;position: relative;}
.hamburger #banner-text{text-align:center;display:inline-block;width:78%;vertical-align:top;}
.hamburger #banner-text #logo{float:none;display:inline-block;width:100%;}
.hamburger-inner {display: block;top: 50%;margin-top: -2px; }
.hamburger-inner, .hamburger-inner::before, .hamburger-inner::after {width: 40px;height: 4px;background-color: #6da2df;border-radius: 4px;position: absolute;transition-property: transform;transition-duration: 0.15s;transition-timing-function: ease;}
.hamburger-inner::before, .hamburger-inner::after {content: "";display: block; }
.hamburger-inner::before {top: -10px; }
.hamburger-inner


::after {bottom: -10px; }
.hamburger--collapse .hamburger-inner {top: auto;bottom: 0;transition-duration: 0.13s;transition-delay: 0.13s;transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); }
.hamburger--collapse .hamburger-inner::after {top: -20px;transition: top 0.2s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), opacity 0.1s linear; }
.hamburger--collapse .hamburger-inner::before {transition: top 0.12s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19); }
.hamburger--collapse.is-active .hamburger-inner {transform: translate3d(0, -10px, 0) rotate(-45deg);transition-delay: 0.22s;transition-timing-function: cubic-bezier(0.215, 0.61,0.355, 1); }
.hamburger--collapse.is-active .hamburger-inner::after {top: 0;opacity: 0;transition: top 0.2s cubic-bezier(0.33333, 0, 0.66667, 0.33333), opacity 0.1s 0.22s linear; }
.hamburger--collapse.is-active .hamburger-inner::before {top: 0;transform: rotate(-90deg);transition: top 0.1s 0.16s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform 0.13s 0.25s cubic-bezier(0.215, 0.61, 0.355, 1); }



fieldset{border:none;}
.visform input, .visform select, .visform textarea{border:2px solid #49b9f0;padding:5px;border-radius:5px;width:70%;background: rgba(255,255,255,0.9);}
.visform input:not(.btn){background: rgba(255,255,255,0.9);}
.visCSSlabel{margin:1em auto 0;width:100%;}vitaltreff-loidl-100.jpg
.visCSStop0 input{width:10%;}
.visCSStop0 label{width:85%;}
.visCSSrlinl{display:inline-block;}
.visCSSmargLeft{margin-left:0;}
.visform .btn{width:30%;}
#field6_0,
#field6_1,
#field6_2,
#field6_3,
#field6_4,
#field6_5,
#field6_6,
#field6_7,
#field6_8{width:10%;}


/* Mobile Style */

@media screen and (max-width:1550px) {
    .startseite #slider{height:42em;}
}
@media screen and (max-width:1200px) {
    .startseite #slider{height:35em;}
    heder-top{width:90%;margin:0 auto;}
}    


    
@media screen and (max-width:1000px) {
    body{font-size:100%;background-image:url(../images/background-005_1.jpg);background-size:cover;background-position:top center;}
    
    .startseite #slider{height:50vh;}
    .startseite #slider img {width: 30%;height: auto;margin: 2em 0 0 0;}
    .grid-3{grid-template-columns:45% 45%;gap: 1em 8%;}
    .nav li {margin:0 5% 0 0;}
    .startseite #slider{height:29em;}
    .kontakt p img{width:19%;}
    header{height:6em;}
    header img{height:5em;}
    .kontakt #main{margin-top:8em;}
    .person #main{margin-top:8em;}
    .startseite .wave.bottom{margin:-5.75em 0 0 0;}

   }

@media screen and (max-width:850px) {
    .startseite #slider{height:24em;}
    .kontakt p img{width:23%;}
/*    #main article img{width:30%;} */
    #main article img{width:auto;}
    .top-grid-item{display:inline-block;width:50%;position:absolute;right:5%;}
    nav.nav {display:none;background:#ffffff;margin:0 auto;}
    .top-grid-item .is-active nav.nav{display:inline-block;}
    header nav{width:100%;}
    .is-active .nav ul {padding:2em 0;}
    .is-active .nav ul li{display:block; text-align:center;}
    nav li a{color:#3a3a3a;}
    #main article{padding: 0 5%;}
}
@media screen and (max-width:700px) {
    .startseite #slider{height:20em;}    
     .grid-3{grid-template-columns:100%;}
     .footer-grid{grid-template-columns:100%;}
     .footer-item{text-align:center;}
     .footer-grid .right{text-align:center;margin:2em 0;}
     .kontakt p img{width:27%;}
}
@media screen and (max-width:600px) {
    .startseite #slider{height:16em;}  
    .kontakt p img{width:34%;}
    .visform input{width:100%;}
    .top-grid-item{widht:25%;right:10%;}
}
@media screen and (max-width:450px) {
    .startseite #slider{height:13em;}
    header #banner #banner-text-mi{width:35%;}
    p{font-size:0.9em;}
    h2{font-size:1.2em;}
    h1{font-size: 1.5em;}
    .kontakt p img{width:60%;}
}

/* Änderung 23.8.21 */
.knopf {
    -moz-box-shadow: 3px 3px 3px 0px #899599;
    -webkit-box-shadow: 3px 3px 3px 0px #899599;
    box-shadow: 3px 3px 3px 0px #899599;
    background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ededed), color-stop(1, #bab1ba) );
    background:-moz-linear-gradient( center top, #ededed 5%, #bab1ba 100% );
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#bab1ba');
    background-color:#ededed;
    -webkit-border-top-left-radius:5px;
    -moz-border-radius-topleft:5px;
    border-top-left-radius:5px;
    -webkit-border-top-right-radius:5px;
    -moz-border-radius-topright:5px;
    border-top-right-radius:5px;
    -webkit-border-bottom-right-radius:5px;
    -moz-border-radius-bottomright:5px;
    border-bottom-right-radius:5px;
    -webkit-border-bottom-left-radius:5px;
    -moz-border-radius-bottomleft:5px;
    border-bottom-left-radius:5px;
text-indent:0;
    display:inline-block;
    color:#000;
    font-family:arial;
    font-size:14px;
    font-weight:bold;
    font-style:normal;
.knopf:hover {
    background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #bab1ba), color-stop(1, #ededed) );
    background:-moz-linear-gradient( center top, #bab1ba 5%, #ededed 100% );
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#bab1ba', endColorstr='#ededed');
    background-color:#bab1ba;
    text-indent:0;
    color:#000;
/*    width: auto;
    height: auto; */
}
.knopf:active {
    position:relative;
    top:1px;
/*    width: auto;
    height: auto; */
}