@charset "utf-8";
/* CSS Document */
/* Ein Template von buntsucht - WEBDESIGN & DEVELOPMENT | 2023 */

body {margin: 0; padding: 0; font-family: 'Hind', sans-serif; font-size: 20px; color: #555555; background-color: #fff;}

img {width: 100%; height: auto; border: 0; display: block;}
hr {border: 0; height: 5px; background-color: #008dc7; color: #008dc7; margin: 40px auto;}



.clearer::after {content: ""; display: table; clear: both;}
.patrick {font-family: 'Patrick Hand', cursive;}
.red-btn {text-decoration: none; color: #fff; background-color: #e6322d; box-sizing: border-box; padding: 6px 12px; border-radius: 8px; transition: all 0.5s ease 0s;}
.red-btn:hover {background-color: #fa5a55; transition: all 0.5s ease 0s;}



/* HEADER */
.header {width: 100%; position: fixed; top: 0; left: 0; border-bottom: 5px #f6f6f6 solid; z-index: 100; background-color: #fff;}
.header-inner {width: 92%; max-width: 1650px; padding: 20px 0 5px 0; margin: 0 auto; position: relative; z-index: 777777; height: 145px; transition: all 0.5s ease 0s;}
.header-top-bg {position: absolute; top: 0; left: 0; width: 100%; height: 60%; background-image: url("../../../images/elemente/header-bg.png"); background-repeat: repeat; background-position: center center; z-index: 1; border-bottom: 8px #f4f4f4 solid; transition: all 0.5s ease 0s;}
.brand-box {width: 30%; max-width: 192px; background-color: rgba(255,255,255,1.0); box-shadow: 0px 5px 15px 5px rgba(0,0,0,0.20); padding: 30px 10px 10px 10px; border-bottom-left-radius: 12px; border-bottom-right-radius: 12px; position: absolute; top: -20px; left: 0; transition: all 0.5s ease 0s;}
.brand {width: 109%; max-width: 290px;}

.header-contact {position: absolute; top: 10px; right: 0; transition: all 0.5s ease 0s;}
.header-contact::after {content: ""; display: table; clear: left;}
.header-contact a {text-align: center; width: 40px; height: 40px; line-height: 40px; color: #fff; text-decoration: none; background-color: #e6322d; border-radius: 50%; font-size: 20px; margin-left: 10px; display: table; float: left;}
.header-contact a:hover {background-color: #4ca447;}
.header-contact i {position: relative; top: 3px;}

.under-header {position: absolute; width: 100%; height: 30px; background-image: linear-gradient(0deg, transparent 0%, #fff 110%); left: 0; bottom: -35px;}



/* Slider */
.slider {width: 100%; height: auto; position: relative; max-width: 100%;}
.slider-inner {width: 100%; position: relative; z-index: 10;}
@media screen and (max-width: 735px){
.slider {overflow-x: hidden;}
.slider-inner {width: 150%; left: -25%;}
}


.go-on {position: absolute; right: 20px; bottom: 63px; color: #fff; cursor: pointer; z-index: 555555;}
.go-on a {color: #fff; text-decoration: none;}
.fa1, .fa2, .fa3 {display: block!important; margin: -10px auto; font-size: 20px!important;}
.fa1 {animation: pulse1 2s infinite;}
.fa2 {animation: pulse2 2s infinite;}
.fa3 {animation: pulse3 2s infinite; position: relative; width: 1px; height: 1px; margin: 0;}
@keyframes pulse1 {
0% {opacity: 1;}
30% {opacity: 0.1;}
100% {opacity: 1;}
}
@keyframes pulse2 {
0% {opacity: 1;}
50% {opacity: 0.1;}
100% {opacity: 1;}
}
@keyframes pulse3 {
0% {opacity: 1;}
70% {opacity: 0.1;}
100% {opacity: 1;}
}
.pulser {position: absolute; top: 11px; left: 6px; width: 100%; height: 100%; border-radius: 50%; box-shadow: 0 0 0 0 rgba(240, 240, 240, 0.7); transform: scale(1); animation: pulse 2s infinite; background: transparent;}
@keyframes pulse {
0% {
transform: scale(0.95);
box-shadow: 0 0 0 0 rgba(240, 240, 240, 0.7);
}
70% {
transform: scale(1);
box-shadow: 0 0 0 20px rgba(240, 240, 240, 0);
}
100% {
transform: scale(0.95);
box-shadow: 0 0 0 0 rgba(240, 240, 240, 0);
}
}



/* CONTENT */
.row-fluid {position: absolute; top: 175px; left: 0; width: 100%; z-index: 10; overflow: hidden;}
.cont-master {position: relative;}
.content {width: 92%; max-width: 1150px; margin: 0px auto; box-sizing: border-box; padding: 150px 0; position: relative; min-height: 800px;}
.content h1.normal {font-size: 32px; margin: 0 0 40px 0;}
.content h1 {font-size: 32px; margin: 0 0 40px 0; color: #fff; background-color: #4ca447; display: table; padding: 5px 12.5px 4px 12.5px; position: relative; border-radius: 4px;}
.content h1::before {position: absolute; top: -25px; right: 20px; content: url("../../../images/elemente/h1-links.png");}
.content h1::after {position: absolute; top: -53px; right: -15px; content: url("../../../images/elemente/h1-rechts.png");}
.content h2 {font-size: 28px; margin: 0 0 40px 0;}
.content h3 {font-size: 26px; margin: 0 0 40px 0;}
.content p {font-size: 20px; margin: 0 0 40px 0; line-height: 32px;}
.content ul {margin: 0 0 40px 0;}
.content li {font-size: 20px; line-height: 32px;}
.content a {background-color: #008dc7; text-decoration: none; color: #fff; padding: 2px 6px 1px 6px; border-radius: 6px; display: inline-block; line-height: 32px;}
.content a:hover {background-color: #4ca447;}
.content .klein p {font-size: 16px;}
.content img {max-width: 800px; margin: 0 auto 40px auto; display: table;}

.teiler50 {width: 50%; max-width: 575px; float: left;}
.teiler50 i, .content i {width: 20px; margin-right: 10px;}
@media screen and (max-width: 730px){
.teiler50 {width: 100%; max-width: none; float: none; margin: 0 0 40px 0;}
}


/* Info Feld */
.info-main {width: 100%; background-color: #d2e8d1; padding: 100px 0; position: relative; border-top: 8px #4ca447 solid;}
.info-main i {font-size: 40px; color: #fff; position: absolute; top: -44px; left: 50%; transform: translateX(-50%); width: 80px; height: 80px; line-height: 80px; text-align: center; background-color: #4ca447; border-radius: 50%; box-shadow: 0px 5px 5px 0px rgba(0,0,0,0.25);}
.info-inner {width: 92%; max-width: 1150px; box-sizing: border-box; padding: 0; margin: 0 auto; border-top-left-radius: 15px; border-top-right-radius: 30px; border-bottom-left-radius: 30px; border-bottom-right-radius: 15px;}
.info-inner h2 {font-size: 30px; margin: 0 0 40px 0;}
.info-inner h3 {font-size: 26px; margin: 0 0 40px 0;}
.info-inner p {font-size: 20px; margin: 0 0 40px 0; line-height: 32px;}
.info-inner a {padding: 3px 5px 2px 5px; background-color: #008dc7; color: #fff; text-decoration: none; border-radius: 4px;}
.info-inner a:hover {background-color: #e6322d;}


/* Blog */
.blog-main {width: 100%; padding: 100px 0; position: relative;}
.blog-inner {width: 92%; max-width: 1200px; margin: 0 auto; padding: 100px 0;}
.blog-main h2 {display: table; margin: 0 auto 40px auto; font-size: 40px; text-transform: uppercase; color: #fff; line-height: 50px;}
.bmh2-1, .bmh2-2 {padding: 2px 10px 0 10px; border-radius: 4px; margin: 0 5px; display: table-cell; box-shadow: 0px 5px 5px 0px rgba(0,0,0,0.5); background-color: #e6322d;}
.bmh2-1 {transform: rotate(5deg);}
.bmh2-2 {transform: rotate(-5deg);}
@media screen and (max-width: 870px){
.blog-inner {padding: 50px 0;}
}
@media screen and (max-width: 400px){
.blog-main h2 {font-size: 25px; line-height: 35px; margin: 0 auto 20px auto;}
}

.blog-boxx .mod-list {width: 100%; display: flex; flex-wrap: wrap; justify-content: center;}
.blog-article {width: 350px; margin: 0 25px; background-color: #fa5a55; position: relative; border-radius: 12px; overflow: hidden; box-shadow: 2.5px 5px 5px 0px rgba(0,0,0,0.5);}
.blog-bild {height: 220px; overflow-x: hidden;}
.blog-bild img {height: 220px; width: auto; transform: translateX(-50%); position: relative; left: 50%; min-width: 100%;}
.blog-date-hits {position: absolute; left: 0; top: 154px;}
.blog-hits {background-color: #e6322d; color: #fff; font-size: 14px; box-sizing: border-box; padding: 6px 10px 4px 10px; border-top-right-radius: 8px; border-bottom-right-radius: 8px; display: table; margin-bottom: 3px; line-height: 16px;}
.blog-date {background-color: #e6322d; color: #fff; font-size: 18px; font-weight: bold; box-sizing: border-box; padding: 6px 10px 4px 10px; border-top-right-radius: 8px; border-bottom-right-radius: 8px; display: table; line-height: 20px;}
.blog-hits .fas, .blog-date .far {margin-right: 4px;}
.blog-cont-inner {background-color: #fff; box-sizing: border-box; padding: 20px 10px 15px 10px; margin: 10px 0;}
.blog-cont-inner h2 {font-size: 24px; text-transform: none!important; margin: 0 auto 15px auto;}
.blog-cont-inner h2 a {color: #555; text-decoration: none;}
.blog-cont-inner h2 a:hover {color: #e6322d;}
.blog-cont-inner p {margin: 0 0 15px 0; font-size: 20px; line-height: 24px;}
.blog-cont .mod-articles-category-readmore {text-align: center;}
.blog-cont .mod-articles-category-readmore a {text-decoration: none; color: #fff; background-color: #008dc7; box-sizing: border-box; padding: 6px 12px; border-radius: 8px; transition: all 0.5s ease 0s;}
.blog-cont .mod-articles-category-readmore a:hover {transition: all 0.5s ease 0s; background-color: #bfe2f1;}



/* Primaere Links */
.prime-links-master {width: 100%; padding: 150px 0 100px 0; position: relative; background-color: #bfe2f1; border-top: 8px #008dc7 solid;}
.prime-links-inner {width: 92%; max-width: 1200px; margin: 0 auto;}
.prime-links-boxes {width: 100%; display: flex; flex-wrap: wrap; justify-content: center;}
.prime-links-box {width: 250px; margin: 25px; background-color: #feca02; position: relative; box-shadow: 2.5px 5px 5px 0px rgba(0,0,0,0.5); height: 250px; border-radius: 50%;}
.prime-links-box:hover {background-color: #fff4cc;}
.plb-icon {position: absolute; top: -50px; left: 50%; transform: translateX(-50%); font-size: 50px; color: #fff; background-color: #fa5a55/*feca02*/; width: 100px; height: 100px; line-height: 100px; text-align: center; border-radius: 50%; box-shadow: 0px 5px 5px 0px rgba(0,0,0,0.25); text-shadow: 2.5px 5px 5px 0px rgba(0,0,0,0.5);}
.prime-links-box p {padding: 112px 0 0 0; margin: 0 0 1px 0; text-align: center; position: relative; z-index: 10; font-weight: bold;}
.prime-links-box a {margin: 0 auto; background-color: #e6322d; padding: 6px 12px; border-radius: 8px; box-sizing: border-box; color: #fff; text-decoration: none; transition: all 0.5s ease 0s; font-size: 24px;}
.prime-links-box a:hover {background-color: #008dc7; transition: all 0.5s ease 0s;}
.info-kid {position: absolute; top: 60px; left: 50%; transform: translateX(-50%); width: 100%; max-width: 130px; z-index: 2;}
@media screen and (max-width: 1305px){
.blog-article {width: 420px; margin: 25px;}
.prime-links-box {width: 300px; height: 300px; margin: 70px;}
.prime-links-box p {padding: 140px 0 0 0;}
}
@media screen and (max-width: 957px){
.prime-links-box {width: 250px; height: 250px; margin: 70px;}
.prime-links-box p {padding: 112px 0 0 0;}
}
@media screen and (max-width: 848px){
.prime-links-box {margin: 50px;}
}
@media screen and (max-width: 761px){
.prime-links-box {margin: 50px 25px;}
}
@media screen and (max-width: 450px){
.blog-article {width: 420px; margin: 25px 0;}
}


/* Footer */
.footer {width: 100%; padding: 100px 0; position: relative; background-color: #e6e6e6;}
.footer-sky {width: 100%; position: absolute; top: -55px; left: 0; height: 56px; overflow-x: hidden; display: none;}
.footer-sky img {height: 56px; width: auto; transform: translateX(-50%); position: relative; left: 50%;}
.footer-inner {width: 92%; max-width: 1150px; margin: 0 auto;}
.footer1, .footer2, .footer3 {float: left; box-sizing: border-box; min-height: 482px;}
.footer1 {width: 47.5%; max-width: 546.25px;}
.footer2 {width: 27.5%; max-width: 316.25px;}
.footer3 {width: 25%; max-width: 287.5px;}
.footer1 h2 {font-size: 30px; margin: 0 0 1px 0; line-height: 30px;}
.footer1 h3 {font-size: 20px; margin: 0 0 40px 0;}
.footer1 i {width: 20px; margin-right: 10px;}
.footer1 p {margin: 0 0 40px 0; line-height: 30px; font-size: 20px;}
.footer2 h2 {font-size: 30px; margin: 0 0 70px 0; line-height: 30px;}
.footer2 p {font-size: 20px; line-height: 40px; margin: 0 0 40px 0;}
.footer2 i {width: 20px; margin-right: 10px; text-align: center;}
.footer2 a {text-decoration: none; color: #555; font-weight: 600;}
.footer2 a:hover {color: #e6322d;}
.footer3 div.f3b {width: 80%; max-width: 170px; margin: 180px auto 10px auto;}
.footer3 p {text-align: center; font-size: 14px; margin: 0 0 40px 0;}
.footer3 a {text-decoration: none; color: #e6322d;}
.footer3 a:hover {color: #555;}

.lastline {width: 100%; position: relative; background-color: #4ca447; padding: 20px 0;}
.lastline-inner {font-size: 15px; color: #fff; text-align: center; line-height: 16px;}
.lastline-inner a {color: #fff; text-decoration: underline;}
.lastline-inner a:hover {text-decoration: none;}
.ll-gras {width: 40%; max-width: 450px; position: absolute; left: 0; top: -190px;}
.ll-points {width: 30%; max-width: 400px; position: absolute; right: 0; bottom: 0;}
@media screen and (max-width: 1180px){
.footer1 {width: 46%; max-width: 529px;}
.footer2 {width: 25%; max-width: 287.5px;}
.footer3 {width: 29%; max-width: 333.5px;}
}
@media screen and (max-width: 1055px){
.ll-gras {top: -160px;}
}
@media screen and (max-width: 1030px){
.footer1, .footer2, .footer3 {float: none; min-height: 10px;}
.footer1 {width: 100%; max-width: none; margin-bottom: 60px;}
.footer2 {width: 100%; max-width: none; margin-bottom: 60px;}
.footer3 {width: 100%; max-width: 280px; position: absolute; bottom: 25px; right: 100px;}
.footer2 h2 {margin: 0 0 40px 0;}
.footer-inner {position: relative;}
}
@media screen and (max-width: 880px){
.ll-gras {top: -120px;}
}
@media screen and (max-width: 665px){
.ll-gras {top: -90px;}
.footer3 {right: 0px;}
}
@media screen and (max-width: 590px){
.footer3 {position: relative; bottom: auto; right: auto; margin: 0 auto;}
.footer3 div.f3b {margin: 0 auto 10px auto;}
}
@media screen and (max-width: 500px){
.ll-gras {top: -130px; width: 60%;}
}
@media screen and (max-width: 480px){
.ll-gras {top: -120px; width: 60%;}
}
@media screen and (max-width: 440px){
.ll-gras {top: -105px; width: 60%;}
.ll-points {bottom: 100%; width: 40%;}
}
@media screen and (max-width: 390px){
.ll-gras {top: -90px; width: 60%;}
}


/* Content Animation */
.pointfield {width: 15%; height: 100%; position: absolute; top: 0; left: 0; background-image: url("../../../images/elemente/header-bg.png"); background-repeat: repeat; background-position: center center;}
.pointfield-mask {position: absolute; width: 100%; height: 100%; background-image: linear-gradient(90deg, transparent 0%, #fff 40%);}

.hand-gruen {animation: hand-gruen 120s infinite; top: 150px; left: 20%;}
.hand-gelb {animation: hand-gelb 140s infinite; top: 300px; left: 40%;}
.hand-rot {animation: hand-rot 130s infinite; top: 450px; left: 20%;}
.hand-blau {animation: hand-blau 150s infinite; top: 600px; left: 40%;}
.hand-gruen, .hand-blau, .hand-gelb, .hand-rot {position: absolute; width: 100%; max-width: 100px;}

@keyframes hand-gruen {
0% {transform: rotate(-170deg);}
50% {transform: rotate(360deg);}
100% {transform: rotate(-170deg);}
}
@keyframes hand-gelb {
0% {transform: rotate(0deg);}
50% {transform: rotate(-360deg);}
100% {transform: rotate(0deg);}
}
@keyframes hand-rot {
0% {transform: rotate(70deg);}
50% {transform: rotate(360deg);}
100% {transform: rotate(70deg);}
}
@keyframes hand-blau {
0% {transform: rotate(-120deg);}
50% {transform: rotate(-360deg);}
100% {transform: rotate(-120deg);}
}

@media screen and (max-width: 1370px){
.pointfield {width: 5%;}
}
@media screen and (max-width: 1250px){
.pointfield {width: 0%; display: none;}
}


/* Info Animation */
.hand1 {animation: hand1 3s infinite; top: 10%; right: 3%;}
.hand2 {animation: hand2 3s infinite; top: 32%; right: 8%;}
.hand3 {animation: hand3 3s infinite; top: 50%; right: 2%;}
.hand1, .hand2, .hand3 {position: absolute; width: 20%; max-width: 110px;}
@keyframes hand1 {
0% {transform: rotate(0deg);}
50% {transform: rotate(40deg);}
100% {transform: rotate(0deg);}
}
@keyframes hand2 {
0% {transform: rotate(0deg);}
50% {transform: rotate(-40deg);}
100% {transform: rotate(0deg);}
}
@keyframes hand3 {
0% {transform: rotate(0deg);}
50% {transform: rotate(40deg);}
100% {transform: rotate(0deg);}
}


/* Primaerlink Animation */
.hand-pl1 {animation: hand-pl1 200s infinite; top: 10%; right: 3%;}
.hand-pl2 {animation: hand-pl2 200s infinite; top: 32%; right: 8%;}
.hand-pl3 {animation: hand-pl3 200s infinite; top: 50%; right: 2%;}
.hand-pl4 {animation: hand-pl4 200s infinite; top: 10%; left: 3%;}
.hand-pl5 {animation: hand-pl5 200s infinite; top: 32%; left: 8%;}
.hand-pl6 {animation: hand-pl6 200s infinite; top: 50%; left: 2%;}
.hand-pl1, .hand-pl2, .hand-pl3, .hand-pl4, .hand-pl5, .hand-pl6 {position: absolute; width: 40%; max-width: 110px;}
@keyframes hand-pl1 {
0% {transform: rotate(20deg);}
50% {transform: rotate(140deg);}
100% {transform: rotate(20deg);}
}
@keyframes hand-pl2 {
0% {transform: rotate(0deg); max-width: 110px;}
50% {transform: rotate(-245deg); max-width: 180px;}
100% {transform: rotate(0deg); max-width: 110px;}
}
@keyframes hand-pl3 {
0% {transform: rotate(-30deg);}
50% {transform: rotate(300deg);}
100% {transform: rotate(-30deg);}
}
@keyframes hand-pl4 {
0% {transform: rotate(20deg);}
50% {transform: rotate(240deg);}
100% {transform: rotate(20deg);}
}
@keyframes hand-pl5 {
0% {transform: rotate(0deg);}
50% {transform: rotate(-145deg);}
100% {transform: rotate(0deg);}
}
@keyframes hand-pl6 {
0% {transform: rotate(-30deg); max-width: 110px;}
50% {transform: rotate(100deg); max-width: 150px;}
100% {transform: rotate(-30deg); max-width: 110px;}
}

@media screen and (max-width: 1650px){
.hand1, .hand2, .hand3 {max-width: 55px;}
.hand1 {top: 10%; right: 1.5%;}
.hand2 {top: 26%; right: 4%;}
.hand3 {top: 45%; right: 1%;}
}
@media screen and (max-width: 1360px){
.hand1, .hand2, .hand3 {display: none;}
}
@media screen and (max-width: 652px){
.hand-pl1 {top: 7%; right: 3%;}
.hand-pl2 {top: 32%; right: 8%;}
.hand-pl3 {top: 70%; right: 2%;}
.hand-pl4 {top: 14%; left: 3%;}
.hand-pl5 {top: 41%; left: 8%;}
.hand-pl6 {top: 80%; left: 2%;}
}


/* H2 Termine */
.jeventpage h2.contentheading::after {position: absolute; top: -53px; right: -15px; content: url("../../../images/elemente/h1-rechts.png");}
.jeventpage h2.contentheading::before {position: absolute; top: -25px; right: 20px; content: url("../../../images/elemente/h1-links.png");}

.jev_inner {padding: 30px 20px!important; position: relative;}
.jev_date-start {position: absolute; top: -40px; right: 20px; padding: 5px 12px; color: #fff; background-color: #008dc7;}
.jev_evdt_title h2 {font-size: 32px; font-weight: 400; color: #008dc7; margin: 0 0 40px 0; padding: 0;}
.jev_evdt_desc {padding: 0!important; margin: 0 0 40px 0;}
.jev_infos-h2 {font-size: 26px; font-weight: bold; color: #fff; background-color: #008dc7; padding: 5px 12px 4px 12px!important; display: table;}
.jev_info_box {box-sizing: border-box; padding: 20px 12px; color: #fff; background-color: #008dc7;}
.jib-left {float: left; width: 25%; min-width: 250px;}
.jib-right {float: left; width: 75%;}

@media screen and (max-width: 500px){
.jeventpage h2.contentheading {margin: 0 0 60px 0;}
#jevents_body {display: none;}
.jev_clear::after {background-color: #008dc7; color: #fff; content: "Bitte drehen Sie das Anzeigegerät"; box-sizing: border-box; padding: 10px 14px; display: table; margin: 0 auto; font-size: 20px; font-weight: bold;}
}