:root{
--blue:#00117a;
--cyan:#33ccff;
--lightcyan:rgb(198, 240, 254);
--green:#64b319;
--black:#131313;

}
img{width: 100%;display: block;}
body,html{margin:0;padding:0; scroll-behavior: smooth;
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;


} *,*::before,*::after{box-sizing:border-box; position:relative;}
h1,h2{font-size: 2.4rem;margin: 0;padding: 0; font-weight: 900;}
h2{max-width: 500px; color: var(--blue);}

button{outline: none; border: none; border-radius: 10px; background-color: var(--blue); color: white; font-weight: 600;padding: 1rem 2rem; font-size: 1.2rem;}
.fcenter{display: flex;justify-content: center;align-items: center;}
.fb{color: var(--blue);}
.menu{display: flex;justify-content: space-between; background-color: white; padding: 2rem; position: relative; width: 100%; z-index: 1000;}
body:has(#cover) .menu{position: absolute;}
.menu .logo{max-width: 250px;}
.menu .items{display: flex;gap: 1rem;align-items: center;}
a{color: inherit; text-decoration: none;}
p,li{line-height: 1.4rem;}
#cover{min-height: 100dvh; display: grid; grid-template-rows: 1fr auto; background-image: url("img/kv.jpg"); background-size: cover; background-position: center;}
#cover h1{color: white; max-width: 800px; text-align: center;padding: 1rem; font-size: 2.4rem; 
    text-shadow: 
    0 0 2px rgba(0, 0, 0, 0.1),
    0 0 6px rgba(33, 36, 128, 0.342)
    ;
}
.arrow{color: white; padding: 2rem;}
.arrow span{font-size: 3rem;}
.middle{max-width: 800px; margin: 0 auto;}
.ptb{padding: 3rem 0rem;}
.box h2{color: white; font-size: 2rem;}
.box{background-color: var(--blue);padding: 2rem 4rem; box-sizing: content-box; color: white;}
ul{padding: 1rem 1rem;margin: 0;margin-left: 0rem;}
li:not(:last-child){margin-bottom: 1rem;}
#footer{
    background: linear-gradient( 90deg, var(--cyan) 20%,var(--blue) 20%);
    padding: 1rem;
    text-align: right;
    color: white;
    margin-top: 6rem;
}
.mobile{display:none;}

.bigger{font-size: 1.5rem; font-weight: 600; max-width: 600px;line-height: 2rem;}

.top{min-height: 250px; background: url("img/panels2.jpg") center; background-size: cover; color: white;


}
.sh{    text-shadow: 
    0 0 2px rgba(0, 0, 0, 0.1),
    0 0 6px rgba(33, 36, 128, 0.342)
    ;}
.produkte{display: grid; grid-template-columns: 1fr 1fr;}
.produkte >div:after{content: attr(data-title); position: absolute; left: 0;top: 0;}

.persons{max-width: 1200px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; margin: 0 auto; padding: 1rem; background: linear-gradient(transparent 10%, var(--cyan) 10%);padding-bottom: 5rem; color: white; padding-top: 2rem;}
.persons p,
.persons a
{margin: 0; font-size: 1rem;}
.menu a:hover {color:var(--cyan)}
.persons h3{text-transform: uppercase;}
.bgfooter{position: absolute;right: 0;bottom: 0; z-index: -1; max-width: 900px;}

.mmenu{position: fixed;width:100%;height:100%;left:0;top:0; transform: translateX(100%); background-color: white; transition: all .3s;}
.open.mmenu{transform: translateX(0%);}
.mmenu a {display: block;margin-bottom: 3rem;}
@media screen and (max-width: 800px) {
    .produkte >div:after{font-size: .7rem ; transform: translateY(-100%);}
    .persons{ grid-template-columns: repeat(1, 1fr); gap: 2rem; }
    .desktop{display:none;}
    .mobile{display:block;}
    .ptb{padding: 3rem 1rem;}
    .box{box-sizing: border-box; padding: 2rem 1rem;}
    .middle button{margin-left: 1rem;}

}