:root {
  --dunkel: #04AA6D;
  --hell: #5FC499;
}
*{
    font-family:Verdana;
    font-size:15px;
    color:#000;
    text-decoration:none;
    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:90%;
}
body > header #line-li{
    position:absolute;
    left:0px;
    top:40%;
    max-width:calc(40% - 60px);
}
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:#FFFFFF;
    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:80%;
    max-height:130px;
    position: absolute;
    top:-50px;
    left:50%;
    margin-left: -160px;
    z-index:200;
}
body > footer > svg *{
    fill:#FD4821;
}
body > footer a{
    font-size:0.8em;
    display:inline-block;
    margin-right:15px;
    color:#fff;
}



main{
    display:block;
    width:90%;
    margin:auto;
    padding-top:170px;
    min-height:calc(100vH - 260px);
}
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;
}
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;
}

#referenzen > menu > ul{
    list-style-type:none;
    margin-left:0px;
    box-shadow:4px 4px 8px #5C5858;
    border-radius: 7px;
}
#referenzen > menu > ul > li{
    transition:all 0.6s;
    background-color: var(--dunkel);
    color: #fff;
}
#referenzen > menu > ul >li:hover,#referenzen > menu > ul >li.aktiv{
    color:  #000;
    background-color: var(--hell);
}
#referenzen > menu > ul >li > a{
    display:block;
    padding:5px 15px;
    text-align: center;
    line-height:2em;
    color:inherit;
}
#referenzen > menu > ul >li:first-of-type{
    border-top-left-radius: 7px;
    border-top-right-radius: 7px;
}
#referenzen > menu > ul >li:last-of-type{
    border-bottom-left-radius: 7px;
    border-bottom-right-radius: 7px;
}
#referenzen > article{
    padding-left: 15px;
}
#referenzen > article h1{
    text-align: center;
}
#referenzen > article .ref{
    text-align: center;
    display:inline-block;
    width: 160px;
    height:140px;
    box-shadow:4px 4px 8px #5C5858;
    border-radius: 7px;
    margin:8px;
    vertical-align: top;
    box-sizing: content-box;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
    position: relative;
    overflow:hidden;
    cursor:pointer;
}
#referenzen > article .ref span{
    transition:all 0.5s;
    position: absolute;
    top:110%;
    left:0px;
    background-color: rgba(0,0,0,0.8);
    font-size:0.8em;
    text-align: center;
    width:100%;
    height:100%;
    display:block;
    color:#fff;
    padding:7px;
}
#referenzen > article .ref:hover span{
    top:0%;
}


#alpha{
    display: none;
    position: fixed;
    top:0px;
    left:0px;
    height:100vH;
    width:100%;
    background-color:rgba(0,0,0,0.7);
    z-index: 1000;
}
#refdetail{
    display: none;
    position: fixed;
    top:15vH;
    left:20%;
    height:70vH;
    width:60%;
    background-color:rgba(255,255,255,0.9);
    z-index: 1001;
    border-radius:10px;
    padding:15px;
}
#refdetail .close{
    display:block;
    height:40px;
    width:40px;
    position:absolute;
    top:-40px;
    right:-60px;
}
#refdetail .close:after,#refdetail .close:before{
    content:"";
    display:block;
    height:6px;
    width:100%;
    background-color:#fff;
    border-radius:3px;
    transition:all 0.3s;
}
#refdetail .close:after{
    position: absolute;
    top:10px;
}
#refdetail .close:hover:before{
    transform:rotate(45deg);
    margin-top:10px;
}
#refdetail .close:hover:after{
    transform:rotate(-45deg);
}
.refdetail_content{
    display:grid;
    grid-template-columns:0.7fr 1.3fr;
    grid-template-rows:0.2fr 0.1fr 1fr;
    grid-template-areas:"bild titel" "bild kategorie" "text text";
    gap:15px;
    width:100%;
    height:65vH;
}
.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;
}
#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;
}