html{
  scroll-behavior: smooth;
}
body{
  background:#2C3634;
}
.fontm{
 font-family:"Figtree";
 font-weight:500;
 font-style:normal;
}
.main-img-1{
position: fixed;
  display:block;
overflow:clip;
top: 0;
left: 0;
height: 100vh;
width: 100%;
background: #00000070;
background-size: cover;
transition: 1s all ease-in-out;
    z-index:-1;
  pointer-events:none;
  }
.main-img-1:before{
    content:"";
    position:relative;
    display:flex;
    height:100%;
    width:50%;
    background-image: url("/imgs/main/leaf.png?v=1f");
  background-size:100%;
  background-repeat:no-repeat;
  background-position: 0% 50%;
  transform: translateX(-50%) rotate(60deg);
   animation: leafWave2 15s ease-in-out infinite;
}
.main-img-1:after{
    content:"";
    position:absolute;
    display:flex;
    height:100%;
    width:50%;
  top:0;
  left:0;
    background-image: url("/imgs/main/leaf.png?v=1f");
  background-size:100%;
  background-repeat:no-repeat;
  background-position: 0% 50%;
  transform: translateX(145%) rotate(320deg);
   animation: leafWave 15s ease-in-out infinite;
}
@keyframes leafWave {
  0% { transform: translateX(145%) rotate(320deg); }
  25% { transform: translateX(145%) rotate(310deg); }
  50% { transform:  translateX(145%) rotate(320deg); }
  75% { transform:  translateX(145%) rotate(310deg); }
  100% { transform:  translateX(145%) rotate(320deg); }
}
@keyframes leafWave2 {
  0% { transform: translateX(-50%) rotate(60deg); }
  25% { transform: translateX(-50%) rotate(70deg); }
  50% { transform:  translateX(-50%) rotate(60deg); }
  75% { transform:  translateX(-50%) rotate(70deg); }
  100% { transform:  translateX(-50%) rotate(60deg); }
}
.blackpass{
position: fixed;
  display:block;
overflow:clip;
top: 0;
left: 0;
height: 100vh;
width: 100%;
  background-image: url("/imgs/mkad.webp?v=1f");
background-size: cover;
transition: 1s all ease-in-out;
    z-index:-1;
  pointer-events:none;
}
.logo{
  display:flex;
  background:transparent;
  flex-direction:row;
  padding:1vw;
}
.logoimg{
  height:12.7vw;
  width:12.7vw;
  background:transparent;
  border-radius:50%;
  overflow:clip;
}
.logoimg img{
  object-fit:cover;
  height:100%;
  width:100%;
}
.logoname{
  display:flex;
  flex-direction:column;
  height:10vw;
  margin-top:1.9vw;
  background:transparent;
  padding-left:2.2vw;
}
.logoname p:first-child{
  font-weight:500;
}
.logoname p{
  font-size:3.7vw;
  margin:0;
  color:#f4f4f4;
  line-height:1.35;
  font-weight:400;
}
.alertxt{
  position:fixed;
  display:flex;
  height:100%;
  width:100%;
  left:0%;
  top:0%;
  background-color:#0000003d;
  z-index:135;
  border-radius:0px;
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  overflow:hidden;
}
.alertxto{
  
}
.alertxto p{
  margin:0;
      color:#e4e4e6;
  font-size:6.4vw;
  font-weight:700;
  margin-left:5vw;
  margin-right:3vw;
}
.alertxto p:first-child{
  margin-top:15%;
}
.wordaxt{
  position:absolute;
  display:flex;
  color:#e4e4e6b3;
  margin-top:10%;
  font-weight:700;
}
.alertxtclose{
  position:absolute;
  display:flex;
  height:10%;
  width:20%;
  left:80%;
  top:2%;
  background-color:transparent;
  justify-content:center;
  align-items:center;
  z-index:1000;
}
.alertxtclose p{
  cursor:pointer;
  font-size:4.5vw;;
  color:#e4e4e6;
}
.alertxttxt{
  position:absolute;
}
.alertxttxt p{
  color:#e4e4e6;
  font-size:6.4vw;
  font-weight:500;
  padding-left:5vw;
  padding-right:3vw;
  margin-top:40%;
}
.lines{
        display:flex;
        position:fixed;
        height:17vw;
        width:6.5vw;
        left:90%;
        top:6vh;
        background-color:transparent;
        z-index:4;
        flex-direction:column;
    }
.line{
  position:absolute;
  display:flex;
  height:4.5%;
  width:100%;
  background-color:transparent;
  border-radius:60px;
  z-index:-2;
}
.line::before{
  content:"";
  position:absolute;
  display:flex;
  height:100%;
  width:100%;
  top:-50%;
  background-color:#e4e4e4;
  border-radius:60px;
  z-index:2
}
.line::after{
  content:"";
  position:absolute;
  display:flex;
  height:100%;
  width:100%;
  top:300%;
  background-color:#e4e4e4;
  border-radius:60px;
}
.linefunc{
}
.linefunc::before{
  top:-50%;
  animation:linefuncbe 0.3s;
  animation-fill-mode:forwards;
}
.linefunc::after{
  top:300%;
  animation:linefuncaf 0.3s;
  animation-fill-mode:forwards;
}
@keyframes linefuncbe{
  0%{
    display:flex;
    top:-50%;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
    transform:rotate(0deg);
  }
  100%{
    top:-50%;
    clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
    transform:rotate(0deg);
  }
}
@keyframes linefuncaf{
  0%{
    top:300%;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
    transform:rotate(0deg);
  }
  100%{
    top:300%;
    clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
    transform:rotate(0deg);
  }
}
  .menu{
          display: flex;
          position: fixed;
          height: 100%;
          width: 100%;
          left: 0%;
          top: 0%;
          background-color: #DCF0EE;
          backdrop-filter:blur(10px);
	      -webkit-backdrop-filter:blur(10px);
          flex-direction: column;
          overflow:hidden;
          clip-path: circle(0vh at 90% -20%);
          transition: all 0.4s ease-out;
          pointer-events: none;
          z-index:4;
          animation: menuactivere 0.4s;
          animation-fill-mode: forwards;
      }
.menuactive{
      animation: menuactive 0.4s;
      animation-fill-mode: forwards;
      animation-delay:0.1s;
      clip-path: circle(0vh at 90% -20%);
      pointer-events: all;
      z-index:4;
      
}
@keyframes menuactive{
  0%{
  }
  100%{
    clip-path: circle(125vh at 90% -10%);
  }
}
@keyframes menuactivere{
  0%{
    clip-path: circle(125vh at 90% -10%);
  }
  100%{
    clip-path: circle(0vh at 90% -20%);
  }
}
.menucross{
        display:flex;
        position:fixed;
        height:17vw;
        width:7vw;
        left:90%;
        top:6vh;
        background-color:transparent;
        z-index:123;
        flex-direction:column;
}
.menucross::before{
  content:"";
  position:absolute;
  display:flex;
  height:4.5%;
  width:100%;
  top:10%;
  background-color:#2C3634;
  border-radius:60px;
  transform:rotate(-45deg);
  clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
  animation:menucross 0.5s;
  animation-fill-mode:forwards;
}
.menucross::after{
  content:"";
  position:absolute;
  display:flex;
  height:4.5%;
  width:100%;
  top:10%;
  background-color:#2C3634;
  border-radius:60px;
  transform:rotate(45deg);
  clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
  animation:menucross 0.5s;
  animation-fill-mode:forwards;
}
.menucrossactive{
}
.menucrossactive::before{
  transform:rotate(-45deg);
  animation:menucrossacbe 0.5s;
  animation-fill-mode:forwards;
  animation-delay:0.4s;
}
.menucrossactive::after{
  transform:rotate(45deg);
  animation:menucrossacaf 0.5s;
  animation-fill-mode:forwards;
  animation-delay:0.4s;
}
@keyframes menucrossacbe{
  0%{
  }
  100%{
    clip-path: polygon(100% 0, 0 0, 0 100%, 100% 100%);
  }
}
@keyframes menucrossacaf{
  0%{
  }
  100%{
    clip-path: polygon(100% 0, 0 0, 0 100%, 100% 100%);
  }
}
.menuitems{
    position:fixed;
    display:flex;
    flex-direction:column;
  background-color:transparent;
  margin-top:13svh;
  width:93%;
}
.menuitems a{
            text-decoration:none;
            transition:1s;
            color: #2C3634;
            visibility: visible;  
            font-weight:700;
            font-size: 8vw;
            margin-left:0.5%;
            width:100%;
  padding-left:0.3em;
  padding-top:8vw;
}
.menuitems a::before{
  content:"+";
  font-weight:400;
  font-size:4.5vw;;
  padding-right:0.1em;
}
.menuitems a::after{
  content:"";
  display:flex;
  position:absolute;
  height:0.3vw;
  width:100%;
  background-color:#2C3634;
  margin-top:0.1em;
}
.main-headline{
  display:flex;
  position:absolute;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  text-align:center;
  margin-top:23vw;
  background:transparent;
  padding-left:2.5vw;
  padding-right:2.5vw;
  visibility:hidden;
}
.main-headline h1{
  font-size:5vw;
  font-family:"Domine";
  font-weight:400;
  color:#f1f1f1;
  line-height:1.5;
}
.main-headline h1 span:nth-child(3){
  color:#FBEFC2;
  font-size:7vw;
  font-weight:500;
  font-family:"Gloock";
}
.main-headline h1 span:nth-child(5){
    color:#FBEFC2;
  font-size:7vw;
  font-weight:500;
  font-family:"Gloock";
}
/* Shared base sparkle style */
.sparkle {
  position: absolute;
  width: 10px;
  height: 10px;
  background: #FBEFC2;
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
  animation-duration: var(--sparkle-speed, 4s);
}
/* Sparkles from LEFT leaf */
.sparkle-left:nth-child(1) {
  top: 50%;
  left: 10%;
  animation: sparkleFloatLeft 3s infinite ease-in-out;
  animation-delay: 0s;
}
.sparkle-left:nth-child(2) {
  top: 52%;
  left: 0%;
  animation: sparkleFloatLeft 4s infinite ease-in-out;
  animation-delay: 1s;
}

/* Sparkles from RIGHT leaf */
.sparkle-right:nth-child(3) {
  top: 50%;
  left: 100%;
  animation: sparkleFloatRight 3s infinite ease-in-out;
  animation-delay: 0.5s;
}
.sparkle-right:nth-child(4) {
  top: 52%;
  left: 90%;
  animation: sparkleFloatRight 4s infinite ease-in-out;
  animation-delay: 1.5s;
}
@keyframes sparkleFloatLeft {
  0% {
    transform: translate(0, 0) scale(0.6);
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  100% {
    transform: translate(var(--sparkle-x-left, 30px), var(--sparkle-y, -40px)) scale(0.3);
    opacity: 0;
  }
}

@keyframes sparkleFloatRight {
  0% {
    transform: translate(0, 0) scale(0.6);
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  100% {
    transform: translate(var(--sparkle-x-right, -30px), var(--sparkle-y, -40px)) scale(0.3);
    opacity: 0;
  }
}
.display-headline{
  padding:6vw;
  padding-right:5vw;
}
.display-headline h2:nth-child(1){
  color:#FBEFC2;
  font-weight:500;
  font-family:"Gloock";
  font-size:10vw;
}
.display-headline img{
  pointer-events:none;
  object-fit:cover;
  margin-top:3vh;
  width:82.5vw;
  height:26vh;
  border:1vw solid #e9e9e9;
}
.display-headline h2:nth-child(3){
   margin-top:8vh;
  color:#f1f1f1;
  font-weight:400;
  font-family:"Domine";
  font-size:4.3vw;
  line-height:1.5;
}
.display-headline button{
  background:transparent;
  border:none;
  border-bottom:0.3vw solid #f1f1f1;
  color:#f1f1f1;
  font-weight:500;
  font-family:"Domine";
    font-size:3.2vw;
  padding:2vw;
  padding-left:0;
  margin-top:2vw;
}
.ort-kontakt{
  display:flex;
  flex-direction:column;
  padding:6vw;
}
.ort-kontakt h3{
  color:#FBEFC2;
  font-weight:400;
  font-family:"Domine";
  font-size:4vw;
  line-height:1.5;
}
.ort-kontakt h3 span{
  color:#f1f1f1 !important;
  text-decoration: none !important;
  pointer-events: none;
  cursor: default;
}
.ort-kontakt h3 span a{
  color:#f1f1f1;
  text-decoration: none;
  pointer-events: none;
  cursor:default;
}
.ort-kontakt-o h3{
  color:#FBEFC2;
  font-weight:500;
  font-family:"Gloock";
  font-size:8vw;
}
.text-einladung{
  position:relative;
  display:block;
  left:0%;
  top:0%;
  background:#DCF0EE;
}
.text-einladung p{
  color:#2C3634;
  border:0.5vw solid #000000;
  padding:6vw;
  font-family:"Domine";
  font-size:3.5vw;
  line-height:1.5;
}
.projekts{
  margin-top:20vw;
}
.po{
  display:flex;
  flex-direction:column;
  background:transparent;
  width:100%;
  align-items:start;
  cursor:pointer;
}
.po h3{
  width:max-content;
  color:#f4f4f4;
  font-weight:500;
  font-size: 5.5vw;
  margin:0;
  padding-bottom:1vw;
}
.projekt-cover{
  display:flex;
  flex-direction:column;
}
/*.projekt-cover::after{
  content:"";
  display:flex;
  height:0.3vw;
  width:0%;
  margin-top:0.5vw;
  background:#f4f4f4;
  transition:1.5s ease-in-out;
}/*/
.projekt{
  display:flex;
  flex-direction:column;
  margin-top:1vw;
  margin-bottom:10vw;
  background:#19433c;
  padding:6vw;
  border:0.5vw solid #DCF0EE;
}
.po::after{
  content:"";
  display:flex;
  height:0.3vw;
  width:100%;
  margin-top:0.5vw;
  background:#f4f4f4;
}
.projektinfos{
  display:flex;
  flex-direction:column;
  background:transparent;
  max-width:95%;
  margin-bottom:6vw;
  overflow:clip;
}
.projektimg{
  background:transparent;
  opacity:0;
  width:100%;
  height:50vw;
  clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
  transition-origin:right;
  transition:1.2s ease-in-out;
}
.projektimg img{
  height:100%;
  width:100%;
  object-fit:cover;
}
.projekto{
  display:flex;
  justify-content:start;
  align-items:start;
  background:transparent;
}
.projekto p{
  font-family:"Gloock";
  width:max-content;
  margin:0;
  color:#f4f4f4;
  font-weight:500;
  font-size: 5.5vw;
  margin:0;
  padding-bottom:1vw;
}
.projekto h4{
  font-family:"Gloock";
  width:max-content;
  margin:0;
  color:#f4f4f4;
  font-weight:500;
  font-size: 5.5vw;
  margin:0;
  padding-bottom:1vw;
}
.projekttext{
  background:transparent;
}
.projekttext p{
  font-family:"Domine";
  margin:0;
  color:#f1f1f1;
  font-weight:400;
  font-size: 3.5vw;
  margin:0;
  line-height:1.5;
  padding-top:4vw;
  padding-right:2vw;
}
.p1{
  background:#42023c;
}
.p2{
  background:#102321;
}
.p3{
  background:#390061;
}
.p1 .projekto h4{
  color:#FBEFC2;
}
.p2 .projekto h4{
  color:#f1f1f1;
}
.p3 .projekto h4{
  color:#FBEFC2;
}
.p4 .projekto h4{
  color:#f1f1f1;
}
.projekt{
  overflow:clip;
}
.projekt-on-viewport::after{
  width:100%;
}
.projekt p{
  transform:translate(0,120%);
  opacity:0;
  transition:1.5s cubic-bezier(.65,.33,.42,.82);
}
.projekt-on-viewport p{
  transform:translate(0,0%);
  opacity:1;
}
.projekt h4{
  transform:translate(0,120%);
  opacity:0;
  transition:1.5s cubic-bezier(.65,.33,.42,.82);
}
.projekt-on-viewport h4{
  transform:translate(0,0%);
  opacity:1;
}
.projekt-on-viewport .projektimg{
  background:transparent;
  clip-path: polygon(100% 0, 0 0, 0 100%, 100% 100%);
  opacity:1;
}
#calendar-modal{
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  background:#00000085;
}
#calendar-modal div{
  display:flex;
  flex-direction:column;
  padding:5vw;
  padding-right:10vw;
  padding-left:10vw;
  border:0.3vw solid #DCF0EE;
}
#calendar-modal div p{
   font-family:"Figtree";
  color:#ffffff;
  font-weight:700;
  font-size: 3.5vw;
}
#calendar-modal div button{
  border:0.3vw solid #000000;
  padding:2vw;
  padding-left:10vw;
  padding-right:10vw;
  margin-bottom:2vw;
  font-size: 3.5vw;
   font-family:"Figtree";
  color:#f1f1f1;
  font-weight:700;
  background:#4775D9;
}
 #calendar-modal #modal-close-btn {
  margin-top: 5vw;
  background: #000000;
  color: #f1f1f1;
    border:0.3vw solid #f1f1f1;
}
.unsereprojekte{
  margin-top:20vh;
  pointer-events:none;
}
.unsereprojekte img{
  border:0.5vw solid #f1f1f1;
  max-width:100%;
}
.impressum{
  margin-top:30vw;
  padding-left:1vw;
  padding-right:1vw;
  padding-bottom:20vh;
}
.impressum p a{
  color:#f4f4f6;
  font-size:7vw;
  font-weight:700;
  margin:0;
  text-decoration:underline;
}