/*-------startslider --------*/

body {font-size:16px!important;line-height:1.4;font-family:'Jost';font-weight:200;max-width:100vw; border: 0px solid RGBA(154,205,50, 0.5)}

* {box-sizing:border-box}

img {width:100%}

#header,#footer {position:absolute; top:0; left:0;width:100%;height:13vw } 

.beginm #header {position:absolute; top:0; left:0;width:100%;height:50vw;margin-bottom:5vw } 

#wrapper {width:auto!important}

#container {top:calc(40vw + 5vw); ;min-height: calc(100vh - 105px);display:flex; align-items:center;justify-content:center;border:0px solid red }


#main {Max-width: 800px;border:0px solid RGBA(154,205,50, 0.5);overflow:visible;z-index:1;}

#header .mod_article {margin:0 0 0 0;padding:0; border:1px solid orange}

/*-------startslider --------*/

.mod_rocksolid_slider {position:relative; margin: 0 0 0 0!important;height:45vw;transform: }

/*rsts-slide {border:2px solid red;display:flex; align-items:flex-end}*/

.rsts-skin-default .rsts-caption {display:flex;align-content:center;justify-content:center;flex-wrap:wrap;Font-size: 7vw; color:white; text-shadow: 0px 0px 10px black;left:0%; top:70%; text-align:center;background:none;width:100%;font-family:'Jost';text-transform: uppercase;letter-spacing:0.5vw; position:absolute!important;font-weight:400;line-height:0.9;border:0px solid green;height:27%}

.logo0 {width: 25vw; height:25vw;aspect-ratio:1 / 1;min-width:180px;min-height:180px;position:absolute;display:flex; align-items:center; justify-content:flex-end;padding: 0.8% 1% 0.2% 1%; background:rgba(255,255,255,0.7);background:white;border-radius:100%;z-index:1;box-shadow:1px 1px 5px rgba(154,205,50,0.4);left:-5vw;top:-9vw}

.logo0::after {position:absolute; content:""; width:100%;height:100%;background:rgba(255,255,255,0.0);top:-1px;left:-1px;z-index:-1}

.logo0 img {padding: 19% 0 0 20%}

.mod_article {overflow:visible;padding: 0 50px 0 50px;height:100%}


/*-------schriften--------*/

h1 {font-size: 2.5rem;font-weight:500}
h2 {font-size: 2rem;font-weight:500;line-height:1.2; text-align:center}
h2::after {content:"";display:block;border:1.5px solid RGBA(154,205,50, 1) ; width: 100px;margin-left: calc(50% - 50px);;margin-top:0.8rem;margin-bottom:1.2rem}

.mobile_menu h2::after {border:1.5px solid white}

h3 {font-size: 1.6rem;font-weight:500}

.ce_text {font-size:1.2rem;letter-spacing:0.04rem;text-align:justify;overflow:visible}

.ce_text code a {background: RGBA(154,205,50, 0.2);text-decoration:none;font-family:'Jost';color:inherit;padding: 0 0.3rem 0.05rem 0.3rem;transition: 0.3s}

.ce_text code a:hover {background: RGBA(154,205,50, 0.5);transition: 0.2s}

a {text-decoration:none}

figcaption 
{font-weight:500; font-style:italic; color: RGBA(154,205,50, 1);text-align:center;font-size:
  0.9rem;letter-spacing:0.005rem}


/*-------bilder --------*/
             
.float_left
{border:0px solid black; width:33%; margin: 0.3rem 2.5rem 1rem 0; margin-left: -50px;}
.float_right
{border:0px solid black; width:45%; margin: 0.3rem 0rem 1rem 2.5rem; margin-right: -50px;}

/*-------navi footer --------*/

.nav-footer li, .nav-indiv {display:inline-block;padding: .6rem 0.5rem 0 0.5rem; }
.nav-footer a,.nav-indiv a {text-transform:uppercase;color:rgba(0,100,0,1) ;text-decoration:none; letter-spacing: 0.1rem;font-weight:500}

.nav-indiv {float:left}

.nav-footer .active, .nav-indiv {text-transform:uppercase;color:rgb(237, 133, 65) ;text-decoration:none; letter-spacing: 0.1rem;font-weight:500}

/*-------Formular --------*/

 .widget {margin-bottom:30px;padding-top:20px}

 .mod_article.formular  {padding:0 0 0 0;max-width:100%;width:700px;position:relative}

.ce_form {font-size: 1rem;font-weight:200;width:100% ;border:0x solid orange;}

.widget>label {font-weight:200;}

label,legend {float:left;display:block;border:0px dotted grey;width:38%;margin:0;font-weight:200}

input[type=text], input[type=email], textarea {display:block;width:60%;margin:0;Background:RGBA(154,205,50, 0.06 );position:relative;border: 1px solid RGBA(154,205,50, 1 );}

input[type=text] {}

input {font-size:90%;color: RGBA(154,205,50, 1)}

input[type=text]:focus {font-size:90%;border-color: RGBA(154,205,50, 1)}

input::placeholder  {opacity:0}

/* reiehenfolge in widget-text */
.widget-text,.widget-textarea {display:flex}
.widget-text input, .widget-textarea textarea {order:2}
.widget-text label, .widget-textarea label {order:1}

/* kleiner Text über den Eibgabefeldern */
input + label::before {content:"bitte hier Ihren Namen eintragen ...";white-space:nowrap;display:block;height:auto; width:auto;position:absolute;left:100%;padding: 5px;font-size:80%;z-index:10;color:RGBA(154,205,50, 0.6 );opacity:1;transition:all 2s}

input[type='email'] + label::before {content:"bitte hier Ihre Email-Adresse eintragen ...";}

input:focus + label::before {opacity:1;transform:translateY(-60%);;background:white; font-size:70%;margin-left:10px;padding: 5px 5px 5px 10px;transition:all 2s}

input[type='email']:focus + label::before {}


/* test eingabemaske */


.checkbox_container {border:0px solid yellowgreen;width:100%;display:flex;flex-wrap:wrap}

.checkbox_container span {display:flex;flex-wrap:wrap; justify-content:flex-start;align-items:center;border:0px solid gainsboro;width:60%;}

/* Änderung der Checkboxenx */ 
input[type='checkbox'],input[type='checkbox']:checked  { visibility: hidden;position:relative;width:40px; height:40px;margin-right:20px; } 

input[type='checkbox'] + label::before {box-sizing:border-box;content:""; display:block; width:40px; aspect-ratio:1/1;  Background:RGBA(154,205,50, 0.06 );border:1px solid yellowgreen;position:absolute;top:-8px;left:-60px;  border-radius:3px; visibility:visible;z-index:1;transition: 0.3s all}

input[type='checkbox']:checked + label::before {box-sizing:border-box;content:"f";font-family:'wondersigns';font-size: 200%;align-items:center; justify-content:center;display:flex; width:40px; height:40px;background: yellowgreen;padding: 0 2% 5% 0;top:-8px;left:-60px; border-radius:3px; visibility:visible;z-index:2;position:absolute;color:white;transition: 0.3s all}

label {position:relative} 

.unsichtbar legend {font-size:0}

.checkbox_container label {width:auto}

.widget-submit {display:flex;justify-content:center;align-items:center;margin-top:30px}

/* Änderung des Absendebuttons */ 

form button {position:relative;display:flex;justify-content:center;align-items:center;font-size: 0.8rem;padding:0 0 5px 0;line-height:1; font-weight:500;width: 55px;border-radius:100%; aspect-ratio: 1/1;color:white;background:rgba(154,205,50,1);border:none;transition: 0.3s all}

form button:hover {background:white;transition: 0.3s all;box-shadow: 0px 0px 10px rgba(154,205,50,1)}
/* winkel*/
form button::after {box-sizing:border-box;content:'';display:block;position:absolute;width: 20px;height: 20px;color:rgba(154,205,50,1);background:transparent;left:22px;top:17px;opacity:0;transition: 0.3s all;border-right:3px solid rgba(154,205,50,1);border-top:3px solid rgba(154,205,50,1); transform-origin: 50% 50%; transform: rotate(45deg);}
/* gerade*/
form button::before {box-sizing:border-box;content:'';display:block;position:absolute;width: 35px;height: 0px;color:rgba(154,205,50,1);background:white;left:8px;top:26px;opacity:0;transition: 0.3s all;border-top:3px solid rgba(154,205,50,1);transform-origin: 50% 50%; transform: rotate(0deg);}

form button:hover::after,form button:hover::before {opacity:1;transition: 0.3s all;}

/* menue mit termine 

.toggler-termine {background:rgba(154,205,50,1);position:absolute; top: 50vw; right:0;transform:rotate(-0deg);Font-size:1.3rem;font-weight:500;padding: 0.2rem 0.5rem 0.3rem 0.5rem;transition: all 0.3s; ; animation: farbwechsel 10s infinite alternate;cursor:pointer;z-index:1}



.toggler-termine:hover {top: 50vw; ;Font-size:1.7rem;padding: 0.2rem 0.5rem 0.3rem 0.5rem;
  transition: font-size 0.7s,padding 0.7s }

@keyframes farbwechsel {
    0% { background:rgba(154,205,50,1);color:white;z-index:1;}
    30% {background:#dceac5;color:rgba(154,205,50,1);z-index:1}
    100% { background:rgba(154,205,50,1);color:white;z-index:1}
  }*/


.mobile_menu_trigger {border-bottom-left-radius:100%; box-shadow:-1px 1px 5px rgba(154,205,50,0.4)}

.toggler,.toggler:active {height:7rem;width:7rem;border-bottom-left-radius:100%}
 /* .toggler:hover {background:rgba(102,176,47,0.1)} */

 .toggler:hover {height: 10rem;
    width: 10rem;
    transitioN: 0.3s all;
    background: #ecf3da}

 .toggler img {padding-left:20%;padding-bottom:25%}

/* damit menue dauerhaft sichtbar zum formatieren */
.mobile_menu {--transform: translate3d(100px, 100px, 100px)!important;}

.mobile_menu a {color:inherit}

.nav_mobi .level_1 > li, li.sonder {list-style-type:none;font-size: 1.4rem}

.nav_mobi .level_2 > li {
    font-size: 1.2rem;
    line-height: 1.3rem;}

    .nav_mobi .level_3 > li {
    font-size: 1.1rem;
    line-height: 1.2rem;}

.mobile_menu .inner {background:white}

.mobile_menu_overlay {background:rgba(154,205,50,0.4)!important;}

.mobile_menu_overlay.active {background:rgba(154,205,50,0.3)!important ;--filter: blur(8px);
  ---webkit-filter: blur(8px);width:100%;transition:0.3s 0.3s ;}


  /* termine im menue 

.mobile_menu {}

.mobile_menu .inner {text-align:center;display:flex; align-items:center;height:100%;flex-wrap:wrap;}

.mobile_menu .mod_newslist {height:auto;padding:2rem;}

.mod_newslist .layout_latest {height:auto;border:0px dotted white}

.layout_latest p {font-weight:300}

.mobile_menu .info {display:none}

.mobile_menu img {padding:2rem 1rem 0 1rem;margin-bottom:-1rem}*/

/* footer */

#footer {display:flex;justify-content:center;margin-top:calc(50vw + 5vw);width:100vw;background-color:rgba(102,176,47,0.2);position:relative;bottom:0px;left:0;padding: 0.5% 2% 0 2%;height:auto}

#footer .inside {display:flex; justify-content:space-between;align-items:center;}

#footer .ce_text {order:2;width:auto;overflow:visible;}

#footer a, #startlogo a {border:1px solid transparent;padding:0px 4px 1px 4px;color:black}
#footer a:before {display:none}

#footer p {font-size:1rem}

#footerlogo {display:block; order:1;width:100px}
#footerlogo img {width:100%;padding:5px }
#footerlogo a {display:block;border:none;width:100px;height:auto;}

#footer .insta {font-family:'wondersigns'}

iframe {border:2px solid RGBA(154, 205, 50, 0.3)!important;background:RGBA(154, 205, 50, 0.1);margin:2rem 10px 2.5rem 10px;box-sizing:border-box;width:calc(100% - 20px)!important;position:relative}


    @media (max-width: 801px)                                 
{
#wrapper {width:100%;justify-content:center;display:flex;flex-wrap:wrap}
#header {border:0px solid rgb(38, 207, 89)} 
.mod_article {overflow:visible;padding: 0 5vw 0 5vw}
   

#main .mod_article {padding: 0 6vw 0 6vw;  border:1px solid greenyellow}

.content-text {display:flex; justify-content:center; flex-wrap:wrap; border:1px solid greenyellow}

.rte {order:1}
.mod_rocksolid_slider {border:2px solid rgb(207, 38, 122)}
.logo0 { left: 0%;}
.media--left>figure {width:90%;float:none;margin:0.8rem 0 1.4rem 0; order:2}
.media--right>figure {width:90%;float:none;margin:0.8rem 0 1.4rem 0; order:2}
    }

 @media     (max-width: 500px)
    {
#header {height:50vw } 
.mod_rocksolid_slider {height:50vw}
.logo0 {width: 36%; min-width:36%;left: 33%;}

#container {padding-top:54vw;}

        /*-------schriften--------*/


h2 {}
h2::after {margin-top:0.9rem;margin-bottom:0.5rem}

h3 {font-size: 1.6rem;font-weight:500}

#main .mod_article {padding: 0 3vw 0 3vw;  border:1px solid greenyellow}

.rte {hyphens:auto}
  
    }