@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

:root{

--c1:#727965;
--c2:#2D2F27;
--c3:#B6A074;
--hl:#D3CF15;


}
body,html{margin:0;padding:0; scroll-behavior: smooth; font-family: "Poppins", sans-serif; color:var(--c2)} *,*::before,*::after{box-sizing:border-box; position:relative;}

.thin {
    font-weight: 100;
    font-style: normal;
  }
  
  .extralight {
    font-weight: 200;
    font-style: normal;
  }
  
  .light {
    font-weight: 300;
    font-style: normal;
  }
  
  .regular {
    font-weight: 400;
    font-style: normal;
  }
  
  .medium {
    font-weight: 500;
    font-style: normal;
  }
  
  .semibold {
    font-weight: 600;
    font-style: normal;
  }
  
  .bold {
    font-weight: 700;
    font-style: normal;
  }
  
  .extrabold {
    font-weight: 800;
    font-style: normal;
  }
  
  .black {
    font-weight: 900;
    font-style: normal;
  }
  
  .thin-italic {
    font-weight: 100;
    font-style: italic;
  }
  
  .extralight-italic {
    font-weight: 200;
    font-style: italic;
  }
  
  .light-italic {
    font-weight: 300;
    font-style: italic;
  }
  
  .regular-italic {
    font-weight: 400;
    font-style: italic;
  }
  
  .medium-italic {
    font-weight: 500;
    font-style: italic;
  }
  
  .semibold-italic {
    font-weight: 600;
    font-style: italic;
  }
  
  .bold-italic {
    font-weight: 700;
    font-style: italic;
  }
  
  .extrabold-italic {
    font-weight: 800;
    font-style: italic;
  }
  
  .black-italic {
    font-weight: 900;
    font-style: italic;
  }
  


.full{width:100%;height:100%;left:0;top:0;}
.flexcenter{display:flex;align-items:center; justify-content:center;}
.center{margin: 0 auto;}
.tcenter{text-align: center;}
.absolute{position: absolute;}
.fixed{position: fixed;}
input,textarea{font-family: "Poppins", sans-serif;}
.p2{padding: 2rem;}

dialog{background-color: var(--c1); color:var(--c2); outline: none; border: var(--c2) solid 2px;}
dialog img{filter: invert(1) brightness(2);}
.mobile{display: none;}
.desktop{display: block;}
@media (max-width:600px) {
    
    .mobile{display: block;}
    .desktop{display: none;}
}
hr{outline: none; border: none; border-bottom: 2px dashed var(--color); --color:var(--c2) }

img{width: 100%;}

.bg{height: 100vh;
background: linear-gradient(
    35deg,
    var(--c1) 30%,
    var(--c3)
    );

    background: url("img/bg2.jpg") center; background-size: cover; 
}

.menu a{color: inherit; text-decoration: none;}
.mainmenu{text-transform: uppercase; display: flex; gap: 2rem; color: white; border-bottom: dashed 2px var(--c2); max-width: 600px; width: 150%;}
.mainmenu a {padding-bottom: .5rem; }
.mainmenu a.active {font-weight: 600; color: var(--c2); }
.mainmenu a:hover{text-decoration: underline; text-decoration-color:var(--c3); text-underline-offset: 13px; text-decoration-thickness: 4px; }

.submenu{ display: none; column-gap: .5rem; flex-wrap: wrap; background-color: var(--c3); padding: 1rem;  position: absolute; width: 600px;} 
.submenu.active{display: flex;}
.submenu a {padding: 0; margin: 0; font-size: .85rem;}
.submenu a:hover {text-decoration: underline;}
.submenu a:nth-child(even) {color: white;}

.menu{display: flex; justify-content: space-between; gap: 2rem; }
.menu > div:nth-child(1){padding: 2rem;}
.logo{width: 10rem; padding-right: 2rem;}


.sandwich{width: 3rem;height: 2rem;  --color:var(--c2);  cursor: pointer; }
.sandwich > div{width:100%;height:100%;left:0;top:0; display: flex; --color:black; flex-direction: column; justify-content: space-between; cursor: pointer; transition: all .5s;}
.sandwich:hover >div {scale:.9}
.sandwich.close > div{rotate:180deg; scale:.5}
.sandwich div div{width: 100%;height: 10%; background-color: var(--color); transition: all 1s;}
.sandwich.close div > div:nth-child(2){ opacity: 0; transform: translateX(20%);}
.sandwich.close div > div:nth-child(1){ rotate: 45deg; ; transform-origin: left bottom;}
.sandwich.close div > div:nth-child(3){ rotate: -45deg; transform-origin: left top; transform: translate(-7%,185%);}

.mobmenu{background-color: var(--c3); padding: 2rem; transition: transform 1s; padding-top: 12rem; overflow-y: scroll; transform: translateX(0%);}
.mobmenu.closed{transform: translateX(-100%);}
.mobmenu a.main{font-weight: 700; display: block;}
.mobmenu a.sub {font-size: .85rem; margin: 0;padding: 0;}
.mobmenu a.sub:nth-child(even) {color:white}
.maxwidth{max-width: 800px;}
#cover{display: grid; height: 100vh; grid-template-rows: auto 1fr; overflow:clip;}
#cover > div:nth-child(1){z-index: 100000000;}

.twocol{display: grid; grid-template-columns: 
    minmax(4rem,1fr)
    minmax(200px,600px)
    minmax(200px,600px)
    minmax(4rem,1fr)
    ;
width: 100%; overflow-x:clip;
}

@keyframes fadeFrom {
  from{opacity: 0; transform: translateY(120px);}
  to{opacity: 1; transform: translateY(0px);}
}
.twocol > div:nth-child(1) {animation: fadeFrom both; animation-duration: .1s; animation-timeline: view(); animation-range: entry 20% cover 50%;}
.twocol > div:nth-child(2) {animation: fadeFrom both; animation-duration: .1s; animation-timeline: view(); animation-range: entry 50% cover 50%;}

.twocol > div:nth-child(1){grid-column: 2;}
.twocol > div:nth-child(2){grid-column: 3;}
.twocol .pic img{--scale:1;--move:0;scale:var(--scale);transform: translateX(calc(var(--move) * 1%));}
.twocol .txt img{--scale:1; scale:var(--scale); }

.short p,
ul,input,textarea
{font-size: .85rem;}

input:focus:invalid{border-bottom: 2px solid red;}
.intro p{color: white; font-size: 1.3rem; width: 80%; padding-left: 10%; padding-top: 5%;}
/* *{outline:red solid 1px} */
.short{padding: 0 2rem; border-left: dashed 2px var(--c2);}
.topSectionPadding{margin-top: 15rem;}

#award{background: url("img/bg3.jpg"); background-size: cover; color: white; padding-top: 5rem; 
  box-shadow: 
  inset 0px 10px 10px #2d2f273c,
  inset 0px 10px 60px #2d2f279f,
  inset 0px 10px 120px var(--c1)
  ;
}
.awardTxt{text-align: right; max-width: 400px; margin: 0 0 0 auto;}
.awardTxt p{font-size: .9rem;}
.awardTxt .bold{font-size: 2rem; margin-top: 0;}

@media (max-width:800px) {
  .awardTxt p{text-align: center;}
  .awardTxt .bold{text-align: center;}
  .awardTxt{margin: 0 2rem 0 2rem;}
    .flux{margin-bottom: -10%;}
    .topSectionPadding{margin-top: 5rem;}
    .twocol{display: grid; grid-template-columns: 1fr;}
    .twocol div:nth-child(1){grid-column: 1;}
.twocol div:nth-child(2){grid-column: 1;}
.intro .twocol p{display: none;}
.twocol  .pic img{--Cscale:1;--Cmove:0; scale:var(--Cscale);transform: translateX(calc(var(--Cmove) * 1%));}
.twocol .txt img{--Cscale:.8;  scale:var(--Cscale); }

}

.page,.links{padding: 0 2rem;}
.links{display: flex; flex-wrap: wrap;}
.links a{color: white; text-decoration: none; background-color: var(--c3); padding: .5rem;}
.links a:hover{text-decoration: underline;}
.links a:nth-child(even){background-color: var(--c2);}
.hl img{max-width: 40rem;}
.links{margin: 0 auto;}
.menu{z-index: 1000000;}
.kontakt{padding: 5rem 0;}

form{display: grid; padding: 2rem; max-width: 60rem; gap: 1rem; grid-template-rows: auto 10rem; margin: 0 auto;}
input,textarea{padding: 1rem; border: none; outline: none; background: none; border-bottom: var(--c2) 2px dashed;}
input::placeholder{color: white;}
input[type=email]{max-width: 15rem; padding: .5rem 1rem;}
input[type=submit]{background-color: var(--c2); color: white; width: fit-content; font-size: 1rem; border: none; outline: none; cursor: pointer;}
.page h1{font-size: 1.4rem;}
a,.close{cursor: pointer;}
#footer{background-color:var(--c3); padding: 2rem; display: flex; gap: 3rem;
  box-shadow: 
  inset 0px 10px 10px #2d2f273c;


}
.bg video{width:100%;height:100%;left:0;top:0; object-fit: cover;object-position: center; opacity: .6;}
.jobspage{max-width: 60rem; padding: 2rem; margin: 0 auto; min-height: 100dvh;}
.jobspage h1{border-bottom: dashed 2px var(--c2); padding-bottom: 2rem; cursor: pointer;}
.jobspage h1:hover{color:white}
.jobspage h1{border-bottom: dashed 2px var(--c2); padding-bottom: 2rem;}
.jobspage span{color:white}
.jobspage .content{display: grid; grid-template-rows: 0fr; overflow: hidden; transition: all 1s;}
.jobspage .content >div{min-height: 0;}
.jobspage a{color: inherit;}
.jobangebot.open .content{grid-template-rows: 1fr; }
.jobangebot.open h1{color: white; }
.jobangebot.open span{opacity: 0;}

@media (min-width:800px) {
  .page > div{display: grid; grid-template-columns: repeat(2,1fr); max-width: 80rem; gap: 2rem;}
  .page{padding: 5rem 2rem;}
  
  .links{max-width: 80rem; padding: 0;}
}

@media (max-width:800px) {
  
  .jobspage h1{font-size: 1.4rem;}

}

dialog{position: fixed;}

.mandate{all:unset; display: block; background-color: var(--c2); color:white; padding: 0.5rem 1rem; width: fit-content; cursor: pointer; margin-top: 1rem;}
.mandate:hover{background-color: white; color: var(--c2);}

span.google,span.more{font-size: .85rem;}

#loader{width:100%;height:100%;left:0;top:0;background-color: var(--c2); display:flex;align-items:center; justify-content:center; position: fixed;}
#loader img{width: 5rem; mix-blend-mode: screen;}