:root {
  --dunkel: #F5FAEF;
  --hell: #DAF1D2;
  --gruen: rgb(0,165,0);
}
*{
    font-family:Verdana;
    font-size:15px;
    color:#000;
    text-decoration:none;
    box-sizing:border-box;
    padding:0px;
    margin:0px;
}
html,body{
    background-color: #fff;
    overflow:hidden;
}
a{
    cursor:pointer;
}
ul{
    margin:8px 0px 8px 25px;
}
body > header{
    height:130px;
    width:100%;
    text-align: center;
    background-color: var(--dunkel);
    line-height:160px;
    position: fixed;
    top:0px;
    left:0px;
    z-index:100;
}
body > header img#logo{
    max-height:80%;
    max-width: 300px;
    margin-top:20px;
}
body > header #line-li{
    position:absolute;
    left:0px;
    top:40%;
    max-width:calc(40% - 60px);
    fill:#00A500;
}
body > header #line-re{
    position:absolute;
    right:0px;
    max-width:calc(40% - 60px);
    top:40%;
}

#mmenu{
    display:none;
}
body > menu{
    position:fixed;
    top:130px;
    left:0px;
    width:100%;
    height:40px;
    z-index:200;
    background-color: var(--hell);
    border-bottom:3px solid var(--dunkel);
    line-height:40px;
    text-align: center;
}
body > menu > li{
    list-style-type:none;
    display:inline-block;
    position: relative;
}
body > menu > li a{
    display:inline-block;
    padding:0px 10px;
    color:#00A500;
    font-size:1.1rem;
}
body > menu > li:after{
    content:"";
    display:block;
    width:0%;
    height:3px;
    position: absolute;
    bottom:0px;
    left:50%;
    border-radius: 3px;
    transition:all 0.6s;
}
body > menu > li:hover:after,body > menu > li.aktiv:after{
    left:0%;
    width:100%;
}
body > menu > li:nth-of-type(1):after,body > menu > li:nth-of-type(1).aktiv:after{
    background:#D0CF69;
}
body > menu > li:nth-of-type(2):after,body > menu > li:nth-of-type(2).aktiv:after{
    background:#DED8EF;
}
body > menu > li:nth-of-type(3):after,body > menu > li:nth-of-type(3).aktiv:after{
    background:#B1AE05;
}
body > menu > li:nth-of-type(4):after,body > menu > li:nth-of-type(4).aktiv:after{
    background:#0080A7;
}
body > menu > li:nth-of-type(5):after,body > menu > li:nth-of-type(5).aktiv:after{
    background:#7e8059;
}
body > menu > li:nth-of-type(6):after,body > menu > li:nth-of-type(6).aktiv:after{
    background:#a660bf;
}
body > footer{
    display:block;
    position:fixed;
    bottom:0px;
    left:0px;
    height:90px;
    width:100%;
    background-color: var(--dunkel);
    border-top:3px solid var(--hell);
    z-index:100;
    line-height:120px;
    text-align: right;
}
body > footer > figure{
    border-top:3px solid var(--hell);
    background-color: var(--dunkel);
    position: absolute;
    top:-65px;
    left:calc(50% - 200px);
    width:400px;
    height:170px;
    border-radius:50%;
    z-index:1;
}
body > footer > svg{
    max-width:150px;
    max-height:120px;
    position: absolute;
    top:-50px;
    left:50%;
    margin-left: -52px;
    z-index:200;
}
body > footer > svg *{
    fill:#00A500;
}
body > footer a{
    font-size:0.8em;
    display:inline-block;
    margin-right:15px;
    color:#000;
}



main{
    display:block;
    width:90%;
    margin:auto;
    padding-top:170px;
    min-height:calc(100vH - 260px);
    overflow:auto;
}
main > section{
    height:calc(100vH - 260px);
    width:100%;
    padding-top:15px;
    padding-bottom:35px;
    overflow-y:scroll;
    scrollbar-width: thin;
    scrollbar-color: #ffffff #ffffff;
  }
main > section::-webkit-scrollbar {
    width: 0px;
  }
main > section::-webkit-scrollbar-track {
    background: #ffffff;
  }
main > section::-webkit-scrollbar-thumb {
    background-color: #ffffff;
    border-radius: 0px;
    border: 0px none #ffffff;
}
#impressum{
    /*height:calc(100vH - 315px);*/
}
#datenschutz{
    /*height:calc(100vH - 335px);*/
    margin-bottom:120px;
    padding-bottom:60px;
}


main > section > h3,main > section > article > h3,main > section > article > article > h3{
    display:none;
}
main > section.grid1_2{
    display:grid;
    gap:20px;
    grid-template-columns:auto 1fr;
}
main > section.grid2_1{
    display:grid;
    gap:20px;
    grid-template-columns:1fr 35vW;
}
.grid4{
    display:grid;
    grid-template-columns:repeat(3,1fr) 40px;
    row-gap:10px;
}
main > section.grid3{
    display:grid;
    grid-template-columns:1fr 1fr 1fr;
}
main > section > figure{
    text-align: center;
}
main > section > figure > img{
    max-width: 90%;
    box-shadow:4px 4px 8px #5C5858;
    border-radius:7px;
    max-height:calc(95vH - 310px);
    display:inline-block;
    margin:auto;
}

#alpha{
    display: none;
    position: fixed;
    top:0px;
    left:0px;
    height:100vH;
    width:100%;
    background-color:rgba(0,0,0,0.7);
    z-index: 1000;
}

.bild       { grid-area: bild; }
.bild  img  { max-height: 100%;max-width: 100%;box-shadow:4px 4px 8px #5C5858;border-radius: 7px; }
.titel      { grid-area: titel; }
.kategorie  { grid-area: kategorie;vertical-align: bottom; text-align:right; font-style:italic;font-size:0.9em;}
.text       { grid-area: text; border-top:1px solid #efefef;padding-top:10px;}


#kontakt{
    display:grid;
    gap:20px;
    grid-template-columns:30% 1fr;
}
form{
    line-height:37px;
}
form label{
    vertical-align: top;
    display:inline-block;
    width:130px;
}
form input,form textarea,form select,progress{
    padding:3px 6px;
    border-radius:5px;
    width: calc(95% - 120px);
    border:1px solid  var(--hell);
}
form textarea{
    height:10rem;
    resize: none;
    margin-top: 3px;
}
form input[name=vorname]{
    display:none;
}
form input[type=submit],form input[type=reset]{
    width: calc(46% - 60px);
    background-color: var(--dunkel);
}
form .button{
    display:inline-block;
    width: 110px;
    height:60px;
    line-height:60px;
    background-color: var(--dunkel);
    border-radius:5px;
    border:1px solid  var(--hell);
    vertical-align: top;
    margin-left: 80px;
    margin-bottom: 10px;
    text-align: center;
}
form input[type=file]{
    display:none;
}
.fehler{
    color: #C65959;
}
.hide{
    display:none;
}
.rechts{
    float:right;
}
#webprojektor{
    display: block;
    width:35px;
    height:360px;
    position: fixed;
    right:-25px;
    top:calc(50% - 150px);
    z-index: 200;
    opacity:0.5;
    transition:all 0.6s;
}
#webprojektor img{
    max-height: 360px;
    max-width: 35px;
}
#webprojektor:hover{
    right:0px;
    opacity:1;
}
#schulungen [class^="icon-"],#schulungen [class*=" icon-"] {
    vertical-align: middle;
    font-size:1.1rem;
}
#schulungen div.grid4{
    display:grid;
    grid-template-columns:1fr 1fr 75px 40px;
    row-gap:10px;
    transition:all 0.3s;
}
#schulungen div.grid4:hover{
    background-color: var(--gruen) !important;
}
#schulungen div.grid4:hover *{
    color: #fff !important;
}
#schulungen div.grid4:nth-of-type(odd){
    background-color: var(--hell);
}
#schulungen .grid4 > *{
    padding:5px 8px;
}
#schulungen #details{
    position: fixed;
    top:130px;
    left:-110vW;
    width:100%;
    height:calc(100vH - 130px);
    background-color: rgba(0,20,0,0.7);
    padding:30px;
    z-index:1000;
    transition:all 0.7s;
    overflow:auto;
}
#schulungen #details.aktiv{
    left:0px;
}
/*
#schulungen #details *{
    color:#fff;
}
*/
#schulungen #details #close{
    position:absolute;
    right:0px;
    top:calc(50% - 40px);
    color:#fff;
    width:50px;
    height:80px;
    line-height:80px;
    background-color: var(--dunkel);
    text-align: center;
    font-weight:bold;
    border-radius:10px 0px 0px 10px;
    transition:all 0.7s;
    opacity:0.7;
    cursor: pointer;
    z-index: 10000;
    border:1px solid var(--gruen);
}
#schulungen #details #close:hover{
    opacity:1;
}
#schulungen #details #close a{
    font-size:2rem;
    color:#000;
}
#schulungen #details article{
    background-color: var(--dunkel);
    border-radius:15px;
    padding:20px;
    width:95%;
    margin:auto;
    line-height:1.5rem;
}
#schulungen #details article span{
    display:inline-block;
    width:90px;
}
#schulungen #details article span.breiter{
    width:180px;
}
#schulungen #details article h2{
    line-height:1.8rem;
}
#schulungen #details article li{
    line-height:1rem;
    margin-left:20px;
}