:root{
  --licl1: #C6D7E7;
  --licl2: #71836D;
  --licl3: #EAE7DD;
  --licl4: #202020;
  --licl5: #4e023c;
  --licl6: #EAE7DD;
}
html{
scroll-behavior: smooth;
  }
  .stuck{
      animation:stuck 3s;
  }
  @keyframes stuck{
      0%{
      }
      1%{
          overflow: hidden;
      }
      100%{
          overflow: hidden;
      }
  }
   /*body.unscrollable {
    overflow: hidden;
  }*/
  .haha{
        transform: translate(0,0);
      }
  .words{
	  display:none;
  }
  body{
      background-color: var(--licl2);
                opacity: 1;
                animation: bodyanim 2s;
                animation-fill-mode: forwards;
               --scrollbarBG: #CFD8DC;
  --thumbBG: #90A4AE;

  scrollbar-width: thin;
  scrollbar-color: var(--thumbBG) var(--scrollbarBG);
              }
       
  /*:not(.zeiten) {
    visibility: hidden;
  */
 .msgdevelop{
     visibility: hidden;
 }
.fontm{
 font-family:"Figtree";
 font-weight:400;
 font-style:normal;
  letter-spacing:-0.05rem;
}
.fontm-m{
 font-family:"Figtree";
 font-weight:400;
 font-style:normal;
}
 .mainlg{
        position: absolute;
        height: 100px;
        width: 100px;
        top: 3%;
        left: 5%;
        border-radius: 50%;
        background-color: transparent;
        overflow:hidden;
        border: 0px solid transparent;
        z-index: 1;
       }
.s7511932245709721028479229324715933942291721013488863{
  position:fixed;
  display:flex;
  height:1000px;
  width:100%;
  top:-20%;
  left:0;
  background-color:#00000038;
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  overflow:visible;
  clip-path: circle(1000px at 52% 100%);
  -webkit-clip-path: circle(1000px at 52% 100%);
  animation:dddf 3s;
  animation-fill-mode:forwards;
  z-index:134;
}
@keyframes dddf{
  0%{
    
  }
  80%{
        display:flex;
  clip-path: circle(1000px at 52% 100%);
  -webkit-clip-path: circle(1000px at 52% 100%);
  }
  100%{
    display:none;
  clip-path: circle(0px at 50% 100%);
  -webkit-clip-path: circle(0px at 50% 100%);
  }
}
    .mainlg img{
        height: 100%;
        width: 100%;
        object-fit: cover;
       border-radius: auto;
       }
  .main-img-1{
position: fixed;
overflow-x:hidden;
display: flex;
top: 0px;
left: 0%;
height: 900px;
width: 100%;
background-image: url("/imgs/moschee.webp?v=1.1");
background-size: cover;
transition: 1s all ease-in-out;
      visibility:visible;

/*background:linear-gradient( rgb(111, 111, 111) ,rgb(245, 245, 245),rgb(153, 153, 153))*/
  }
  /*.main-img-1 img{
    height: 100%;
    width: 100%;
    
    transition: 1s all ease-in-out;
  }*/
  .main-img-1 video{
      height: 100%;
      width: 100%;
      object-fit: cover;
  }
  .blackpass{
      display: flex;
      position: fixed;
      height: 100%;
      width: 100%;
      top: 0;
      left: 0;
      z-index:1;
      background-color: rgb(0 0 0 / 25%);
      backdrop-filter:blur(5px);
     -webkit-backdrop-filter:blur(5px);
      visibility:visible;
  }
    .blackpass img{
        height: 100%;
        width: 100%;
        opacity: 0;
    }
.logo{
  position:absolute;
  display:flex;
  height:53.5px;
  width:180px;
  background-color:transparent;
  top:20px;
  left:2.5%;
  z-index:2;
}
.logoimg{
  position:absolute;
  display:flex;
  height:100%;
  width:30%;
  background-color:transparent;
  border-radius: 50%;
  overflow:hidden;
}
.logoimg img{
  height:100%;
  width:100%;
  object-fit:cover;
}
.logoname{
  position:absolute;
  display:flex;
  height:100%;
  width:115%;
  left:35%;
  background-color:transparent;
  justify-content:start;
  align-items:center;
}
.logoname h1{
  color:#000000;
  font-size:0.9em;
  line-height:1.4em;
  white-space:nowrap;
}
.logoname h1 a{
  color:var(--licl6);
}
.logoword1{
  position:absolute;
  display:flex;
  transform:translate(0,-100%);
  font-weight:500;
}
.logoword2{
  position:absolute;
  display:flex;
  transform:translate(0,00%);
  font-weight:400;
}
.lines{
        display:flex;
        position:fixed;
        height:70px;
        width:30px;
        left:90%;
        top:38px;
        background-color:transparent;
        z-index:4;
        flex-direction:column;
    }
.line{
  position:absolute;
  display:flex;
  height:4.5%;
  width:90%;
  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: rgba(0, 0, 0, 0.5);
          backdrop-filter:blur(10px);
	      -webkit-backdrop-filter:blur(10px);
          flex-direction: column;
          overflow:hidden;
          clip-path: circle(0px 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(0px at 90% -20%);
      pointer-events: all;
      z-index:4;
      
}
@keyframes menuactive{
  0%{
  }
  100%{
    clip-path: circle(1000px at 90% -10%);
  }
}
@keyframes menuactivere{
  0%{
    clip-path: circle(1000px at 90% -10%);
  }
  100%{
    clip-path: circle(0px at 90% -20%);
  }
}
.menucross{
        display:flex;
        position:fixed;
        height:70px;
        width:30px;
        left:90%;
        top:38px;
        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:#e4e4e4;
  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:#e4e4e4;
  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;
    top:0;
    left:0;
    height:100%;
    width:100%;
    background-color:#00000000;
    flex-items:column;
    z-index:4;
    
}
.itemdiv::before{
  content:"+";
  position:absolute;
  display:flex;
  height:100%;
  width:20%;
  left:10%auto;
  top:-10%;
  left:-20%;
  background-color:transparent;
  color:#e4e4e6;
  justify-content:flex-end;
  align-items:center;
  font-size:18px;
}
     .item1{
        position:absolute;
        display:flex;
        background-color:transparent;
        height:10%;
        width:100%;
        left:5%;
        top:15%;
        justify-content:start;
        align-items:center;
        animation: linksupitem1Reverse 0s ease-in-out;
        animation-fill-mode: forwards;
        }
        .item2{
        position:absolute;
        display:flex;
        background-color:transparent;
        height:10%;
        width:100%;
        left: 5%;
        top:30%;
        justify-content:start;
        align-items:center;
        animation: linksupitem2Reverse 0s ease-in-out;
        animation-fill-mode: forwards;
        }
        .item3{
          position:absolute;
          display:flex;
          background-color:transparent;
          height:10%;
          width: 100%;
          left: 5%;
          top:45%;
          justify-content:start;
          align-items:center;
          animation: linksupitem3Reverse 0s ease-in-out;
          animation-fill-mode: forwards;
          }
        .item4{
          position:absolute;
          display:flex;
          background-color:transparent;
          height:10%;
          width:100%;
          left: 5%;
          top:60%;
          justify-content:start;
          align-items:center;
          animation: linksupitem4Reverse 0s ease-in-out;
          animation-fill-mode: forwards;
          }
.item5{
          position:absolute;
          display:flex;
          background-color:transparent;
          height:10%;
          width: 100%;
          left: 5%;
          top:75%;
          justify-content:start;
          align-items:center;
          animation: linksupitem4Reverse 0s ease-in-out;
          animation-fill-mode: forwards;
          }
.item6{
          position:absolute;
          display:flex;
          background-color:transparent;
          height:10%;
          width: 100%;
          left: 5%;
          top:90%;
          justify-content:start;
          align-items:center;
          animation: linksupitem4Reverse 0s ease-in-out;
          animation-fill-mode: forwards;
          }
        .itemdiv a{
          text-decoration:none;
            transition:1s;
            color: #e4e4e6;
            visibility: visible;  
            font-weight:700;
            font-size: 36px;
            margin-left:0.5%;
            width:100%;
        }
.itemdiv a::before{
  content:"";
  position:absolute;
  display:flex;
  height:3%;
  width:90%;
  left:-2%;
  top:80%;
  background-color:#e4e4e6;
}
 a.itemsafter{
          color:#feedbd;
}
@keyframes after1Reverse{
  0%{
    width:100%;
  }
  100%{
    width:0%;
  }
}
@keyframes after1{
  0%{
    width:0%;
  }
  100%{
    width:100%;
  }
}

.lines:hover ~ .menuitems{
    display:flex;
}
      .lines:hover ~ .unhover{
      display: flex;
      position: fixed;
      background-color:transparent;
      height:6%;
        width:11%;
        left:88%;
        top:5%;
        z-index:11;
      transition: 0.4s all ease-in-out;
  }
  .menuafter{
      top: -100%;
  }
  .unhover{
      position: fixed;
      display: flex;
      background-color: transparent;
      height: 8%;
      width: 15%;
      z-index: 1;
      left: 10%;
      top: 5%;
      transition: 0.6s all ease-in-out;
  }
.unhover img{
    opacity:0;
    width:100%;
    height:100%;
}
.search{
  position:absolute;
  display:flex;
  height:50px;
  width:95%;
  inset:0;
  left:2.5%;
  top:100px;
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  background-color:var(--licl2);
  z-index:2;
}
#searchInput{
  position:absolute;
  display:flex;
  height:100%;
  width:100%;
  background-color:transparent;
  font-size:23px;
  color:var(--licl3);
  text-indent:10px;
  z-index:1;
  border:none;
  font-weight:500;
}
#searchInput::placeholder {
  color:var(--licl3);
    text-indent: 10px;
  font-weight:500;
}
.alginfos{
  position:absolute;
  display:flex;
  height:400px;
  width:95%;
  top:150px;
  z-index:1;
  left:2.5%;
  flex-direction:column;
  background-color:transparent;
}
.alginfoso{
  position:relative;
  display:flex;
  height:15%;
  width:100%;
  background-color:transparent;
  justify-content:start;
  align-items:center;
}
.alginfoso h3{
  font-weight:700;
  color:var(--licl6);
}
.alginfostxt{
  position:relative;
  display:flex;
  height:50%;
  width:100%;
  top:-3%;
  background-color:transparent;
  justify-content:start;
  align-items:self-start;
}
.alginfostxt h3{
  font-weight:500;
  color:var(--licl6);
}
.alginfostxt h3 a{
  color:var(--licl1);
}
.alginfosnext{
  position:absolute;
  display:flex;
  height:50%;
  width:100%;
  top:70%;
  background-color:var(--licl2);
  justify-content:center;
  align-items:center;
}
.alginfosnext h2{
  font-size:var(--f30-font-size);
  font-weight:700;
  color:var(--licl3);
}
input{
  border:none;
}
input:focus{
  outline:none;
  border:none;
}
.mform{
  position:absolute;
  display:block;
  z-index:1;
  top:400px;
  width:95%;
  left:2.5%;
  background-color:transparent;
}
.mform form{
  width:100%;
}
.onediv{
  position:relative;
  display:flex;
  background-color:transparent;
  flex-wrap: wrap;
}
.legend{
  display:flex;
  background-color:var(--licl1);
  color:#202020;
  justify-content:center;
  align-items:center;
	padding:5vw;
	width:100%;
	padding-right:2vw;
	padding-left:2vw;
}
.legend h4{
	margin:0;
	font-size:7vw;
	font-weight:700;
}
.onediv section{
	display:flex;
	flex-direction:column;
	justify-content:center;
	align-items:center;
}
.onediv label{
	display:flex;
	color:var(--licl3);
  font-weight:500;
  font-size:4vw;
	justify-content:center;
	padding-top:6vw;
}
.onediv input {
  display:flex;
  position:relative;
	padding:2vw;
	padding-top:10vw;
	padding-bottom:15vw;
  background: transparent;
  text-align:center;
  color:var(--licl3);
  font-weight:600;
  font-size:5vw;
}
.onediv section:nth-of-type(1) {
  width:100%;
	background:transparent;
  border-bottom:0.4vw solid #C6D7E7;
}
.onediv section:nth-of-type(2) {
	border-right:0.4vw solid #C6D7E7;
}
.onediv section{
	width:49%;
}
.save{
  position:fixed;
  display:block;
  height:60px;
  width:35%;
  left:62.5%;
  top:80%;
        background-color: var(--licl2);
        border-radius: 0px;
        z-index:5212;
  text-align:center;
			transition: all 0.7s ease-in-out;
}
.save input{
  position:relative;
  height:100%;
  opacity:1;
  background:none;
  border:none;
  background-color:transparent;
  font-size:20px;
  font-weight:700;
  
  color:var(--licl3);
}