.msgdevelop p{
      visibility:hidden;
}
.fontm{
 font-family:"Figtree";
 font-weight:500;
 font-style:normal;
}
.fontm-m{
 font-family:"Figtree";
 font-weight:500;
 font-style:normal;
}
.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=2");
background-size: cover;
transition: 1s all ease-in-out;
  z-index:-1;
  }
.main-img-1 img{
   height: 100%;
        width: 100%;
        opacity: 1;
}
  .blackpass{
      display: flex;
      position: fixed;
      height: 100%;
      width: 100%;
      top: 0;
      left: 0;
      z-index:0.5;
      background-color: rgba(0,0,0,0.5);
      backdrop-filter:blur(10px);
     -webkit-backdrop-filter:blur(10px);
    z-index:-1;
  }
    .blackpass img{
        height: 100%;
        width: 100%;
        opacity: 0;
    }
.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;
    flex-direction:column;
  background-color:transparent;
  margin-top:12svh;
  width:93%;
}
.menuitems a{
            text-decoration:none;
            transition:1s;
            color: #e4e4e6;
            visibility: visible;  
            font-weight:700;
            font-size: 36px;
            margin-left:0.5%;
            width:100%;
  padding-left:0.3em;
  padding-top:1.5em;
}
.menuitems a::before{
  content:"+";
  font-weight:400;
  font-size:16px;
  padding-right:0.1em;
}
.menuitems a::after{
  content:"";
  display:flex;
  position:absolute;
  height:2px;
  width:100%;
  background-color:#e4e4e6;
  margin-top:0.1em;
}
.login-form{
	width:95vw;
	position:relative;
	margin-top:10vh;
	background:transparent;
}
.login-form .mlogo{
  position:relative;
  display:flex;
  height:25vh;
	justify-content:center;
	align-items:center;
  background-color:transparent;
}
.login-form .mlogo img{
  height:100%;
  object-fit:cover;
}
.login-hinweis{
	display:flex;
	position:relative;
	justify-content:center;
	align-items:center;
	width:100%;
}
.login-hinweis h1{
	transform:scale(1.3);
	font-weight:500;
	color:#e4e4e6;
}
.login-form form{
	background:transparent;
	padding-top:3vh;
}
.login-form form .jamaat-id-login{
	display:flex;
	width:100%;
	justify-content:center;
	align-items:center;
	height:3vh;
	background:transparent;
}
.login-form form .jamaat-id-login input{
	font-size:1.2em;
	height:100%;
	width:80%;
}
.login-form form .altes-versprechen-login{
	padding-top:2vh;
	display:flex;
	width:100%;
	justify-content:center;
	align-items:center;
	height:3vh;
}
.login-form form .altes-versprechen-login input{
	font-size:1.2em;
	height:100%;
	width:80%;
}
.login-form input{
	background:none;
	border:none;
	color:#e4e4e6;
	border-bottom:1px solid white;
}
input:focus{
	outline:none;
}
.login-form input::placeholder{
	color:#e4e4e6;
}
.save-go-login{
  display:flex;
  justify-content:flex-end;
  padding-top:5vh;
  background:transparent;
}
.save-go-login button{
	font-weight:500;
	margin-right:9.2%;
  border:1px solid #e4e4e6;
  padding:0.8em;
  padding-right:1em;
  padding-left:1em;
  margin-left:4%;
  color:#e4e4e6;
	background:#1d5d3d;
}
.normal-mlogo{
  position:absolute;
  display:flex;
  top:0;
	left:0;
	padding:0.4em;
  height:80px;
  width:80px;
  background-color:transparent;
	z-index: 2;
}
.normal-mlogo img{
  height:100%;
  object-fit:cover;
}
.person-details {
    display: flex;
    flex-direction: column;
	margin-top:17vh;
	width:95%;
	margin-left:2.5%;
	border-bottom:0px solid #e4e4e6;
    }
.person-details h3{
	margin-top:0.5em;
	color:#e4e4e6;
	line-height:0;
	font-weight:500;
}
.person-details h3 mark{
	color:#e4e4e6;
	padding:0.2em;
	background:#51622b;
}
.person-details h3:nth-child(2){
	padding-bottom:0em;
}
.wada-form{
}
.altes-versprechen-r-form{
	display:flex;
	height:5vh;
	width:95%;
	margin-left:2.5%;
	background:transparent;
	justify-content:start;
	align-items:center;
	color:#e4e4e6;
	font-weight:550;
	border-bottom:1px solid #e4e4e6;
}
.neues-versprechen-r-form{
	display:flex;
	height:5vh;
	width:95%;
	margin-left:2.5%;
	background:transparent;
	justify-content:start;
	align-items:center;
	color:#e4e4e6;
	font-weight:550;
	font-size:1.5em;
	padding-top:7vh;
	border-bottom:1px solid #e4e4e6;
}
.neues-versprechen-r-form input{
	height:100%;
	width:100%;
	border:none;
	background:none;
	color:#E4E4E6;
	font-weight:550;
	font-size:1.07em;
}
.save-go{
  display:flex;
  justify-content:flex-end;
  padding-top:5vh;
  background:transparent;
}
.save-go button{
	font-weight:500;
	margin-right:2.5%;
  border:1px solid #f4f4f6;
  padding:0.8em;
  padding-right:1em;
  padding-left:1em;
  margin-left:4%;
  color:#f4f4f6;
	background:#ac195c;
}
.ausloggen{
  display:flex;
  justify-content:start;
  padding-top:5vh;
  background:transparent;
}
.ausloggen a{
	text-decoration:underline;
	font-weight:500;
  border:0px solid #f4f4f6;
  padding:0.3em;
  padding-right:1em;
  padding-left:0em;
  margin-left:3%;
  color:#f4f4f6;
}
.person-details section:first-child p{
	font-size:7vw;
	color:#eeeeee;
	font-weight:700;
	margin:0;
	line-height:1.3;
}
.person-details section:nth-child(2){
	background:#2C3634;
	margin-top:8vh;
	border:0.3vw solid #ffffff;
	padding-bottom:7vw;
}
.person-details section:nth-child(2) p{
	font-size:4vw;
	color:#eeeeee;
	font-weight:500;
	margin:0;
	line-height:1.25;
	padding:4vw 25vw 2.5vw 3vw;
}
.versprechen-form{
	background:#062441;
	margin-top:8vh;
	border:0.3vw solid #ffffff;
	padding-bottom:7vw;
	width:95%;
	margin-left:2.5%;
}
.versprechen-form p{
	font-size:4vw;
	color:#eeeeee;
	font-weight:500;
	margin:0;
	line-height:1.25;
	padding:4vw 25vw 2.5vw 3vw;
}
.options-plus-versprechen{
	width:90vw;
	margin-left:1%;
	margin-bottom:4vw;
	margin-top:5vw;
	display:flex;
	justify-content:space-around;
	background:transparent;
}
.options-plus-versprechen input{
	margin-top:2.5vw;
	padding:0;
	min-width:25vw;
	min-height:12vh;
	transition:0s ease-in-out;
	background:transparent;
}
.options-plus-versprechen input[type="radio"]{
  margin-left:0;
  -webkit-appearance: none;
  appearance: none;
  background-color: none;
  border-radius:0;
	border:none;
}
.options-plus-versprechen input[type="radio"]:checked::before{
	background:#e5007d;
	border:0.3vw solid #ffffff;
	color:#eeeeee;
}
.options-plus-versprechen input[type="radio"]::before{
  content: "+" attr(data-opt) "€";
  font-family:"Figtree";
  position:relative;
  display:flex;
  height:max-content;
  width:max-content;
  background:#6722bd;
  padding-right:7vw;
  padding-left:7vw;
	padding-top:8vw;
	padding-bottom:9vw;
  font-size:3.9vw;
  font-weight:700;
  color:#eeeeee;
  border:0.3vw solid #ffffff;
}
.eigenen-betrag{
	margin-top:15vw;
	margin-left:2.5vw;
}
.eigenen-betrag input{
	text-align:center;
	border-radius:0;
	width:91%;
	background:transparent;
	color:#eeeeee;
	font-size:3.5vw;
  font-weight:500;
	padding:2.3vw;
	border:0.3vw solid #ffffff;
}
.eigenen-betrag input::placeholder{
	color:#eeeeee;
}
.letztes-versprechen-select input{
	margin-top:2.5vw;
	padding:0;
	min-width:20vw;
	transition:1s ease-in-out;
}
.letztes-versprechen-select input[type="radio"]{
  margin-left:0;
  -webkit-appearance: none;
  appearance: none;
  background-color: none;
  border-radius:0;
	border:none;
	width:88.6%;
}
.letztes-versprechen-select input[type="radio"]:checked::before{
	background:#2C3634;
	border:0.3vw solid #ffffff;
}
.letztes-versprechen-select input[type="radio"]::before{
  content: "Versprechen aus dem Vorjahr übernehmen";
  font-family:"Figtree";
  position:relative;
  display:flex;
  height:max-content;
  width:max-content;
justify-content:center;
  background:transparent;
  padding:2.3vw;
  margin-left:2.5vw;
  font-size:3.5vw;
  font-weight:500;
  color:#eeeeee;
	width:100%;
  border:0.3vw solid #ffffff;
}
.user-save-go{
	margin-top:10vw;
	display:flex;
	padding-left:5vw;
	padding-right:3vw;
	justify-content:flex-end;
}
.user-save-go button{
	text-transform:uppercase;
	background: #e5007d;
	font-size:3.4vw;
	font-weight:700;
	color:#eeeeee;
	padding:2vw;
	padding-right:5vw;
	padding-left:5vw;
	border:0.3vw solid #ffffff;
}
#videoContainer{
	width:91.5vw;
	margin-left:2.5vw;
	margin-top:20vw;
}
#videoContainer video{
	width:100%;
	border:0.3vw solid #ffffff;
}
#videoContainer #controls{
	width:100%;	
}
#videoContainer #controls img{
	margin-top:0.5vw;
	width:13%;
	margin-left:84.5%;
	padding:1vw;
	border:0.3vw solid #ffffff;
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:active,
input:-webkit-autofill:focus {
    background-color: black !important;
    color: #e4e4e6 !important;
    -webkit-box-shadow: 0 0 0 1000px black inset !important;
    -webkit-text-fill-color: #e4e4e6 !important;
}
.zitat{
	padding:4vw;
	margin-top:5vw
}
.zitat p{
	color:#e4e4e0;
	font-weight:700;
	font-size:4vw;
}
.zitat p:nth-child(2){
	font-size:3.5vw;
}
.fontm{
 font-family:"Figtree";
 font-weight:500;
 font-style:normal;
}
.mimg{
position: fixed;
  display:block;
overflow:clip;
top: 0;
left: 0;
height: 100%;
width: 100%;
background: linear-gradient(120deg, #000000, #000000);
transition: 1s all ease-in-out;
    z-index:-1;
  }
.loginlb{
    display:flex;
	z-index:1;
	left:5%;
    top:15%;
	background:transparent;
	padding:2vw;
	padding-top:10vw;
}
.loginlb p{
	text-transform:uppercase;
	font-size:4.5vw;
	margin:0;
	color:#e4e4e6;
}
.mform{
	margin-top:1vw;
	padding:1.5vw;
}
.username{
	display:flex;
	flex-direction:column;
	background:transparent;
	overflow-x:clip;
}
.username input{
	background:0;
	border:none;
	border-radius:0%;
	font-size:4vw;
	color:#e4e4e6;
	height:100%;
	padding:2.5vw;
	border:0.3vw solid #e4e4e6;
	text-transform:uppercase,
}
.username input::placeholder{
	color:#e4e4e6;
	opacity:1;
}
.pass{
	display:flex;
	flex-direction:column;
	background:transparent;
	overflow-x:clip;
	margin-top:3vw;
}
.pass input{
	background:0;
	border:none;
	border-radius:0%;
	font-size:4vw;
	color:#e4e4e6;
	height:100%;
	padding:2.5vw;
	border:0.3vw solid #e4e4e6;
}
.pass input::placeholder{
	color:#e4e4e6;
	opacity:1;
}
input:focus{
	outline:none;
}
.submit{
	background:black;
	margin-top:5vw;
	border:0.3vw solid #e4e4e6;
	display:flex;
	justify-content:center;
	align-items:center;
	padding:1.5vw;
	padding-top:2.5vw;
	padding-bottom:2.5vw;
}
.submit input{
	width:100%;
	font-size:3.9vw;
	background:none;
	border:none;
	color:#e4e4e6;
	text-transform:uppercase;
	text-align:center;
}
.error-cover{
	position:fixed;
	height:100vh;
	background:lch(0 0 0 / 0.65);
	width:100%;
	top:0;
	left:0;
	z-index:5;
}
.error{
	position:fixed;
	z-index:1;
	width:75vw;
	margin-left:11vw;
	margin-top:30vh;
	background:black;
	border:0.3vw solid white;
}
.error p{
	font-size:3.5vw;
	text-transform:uppercase;
	padding:3vw;
	color:#e4e4e6;
	margin:0;
}
.error p:first-child{
	padding-bottom:5vh;
}
.error p:last-child{
	cursor:pointer;
	margin:0;
	border-radius:0%;
	text-align:center;
	border-top:0.3vw solid white;
}
@media (min-width: 1200px) and (min-height: 600px) {
	.loginlb{
    display:flex;
	z-index:1;
	left:5%;
    top:0%;
	background:transparent;
	padding:2vw;
	padding-top:5vw;
	padding-left:5vw;
}
.loginlb p{
	text-transform:uppercase;
	font-size:1.5vw;
	margin:0;
	color:#e4e4e6;
}
.mform{
	padding:1.5vw;
	padding-left:4.95vw;
	padding-top:10vh;
	width:50vw;
}
.username{
	display:flex;
	flex-direction:column;
	background:transparent;
	overflow-x:clip;
}
.username input{
	background:0;
	border:none;
	border-radius:0%;
	font-size:1.5vw;
	color:#e4e4e6;
	height:100%;
	width:100%;
	padding-bottom:0.7vw;
	border-bottom:0.1vw solid #e4e4e6;
}
.username input::placeholder{
	color:#e4e4e6;
	opacity:1;
}
.pass{
	display:flex;
	flex-direction:column;
	background:transparent;
	overflow-x:clip;
}
.pass input{
	background:0;
	border:none;
	border-radius:0%;
	font-size:1.5vw;
	color:#e4e4e6;
	height:100%;
	width:100%;
	padding-bottom:0.7vw;
	border-bottom:0.1vw solid #e4e4e6;
}
.pass input::placeholder{
	color:#e4e4e6;
	opacity:1;
}
input:focus{
	outline:none;
}
.submit{
	border:0.1vw solid #e4e4e6;
	display:flex;
	justify-content:center;
	align-items:center;
	padding:1.5vw;
}
.submit input{
	width:100%;
	font-size:1.3vw;
	background:none;
	border:none;
	color:#e4e4e6;
	text-transform:uppercase;
	text-align:center;
}
.error-cover{
	position:fixed;
	height:100vh;
	background:lch(0 0 0 / 0.65);
	width:100%;
	top:0;
	left:0;
}
.error{
	position:fixed;
	z-index:1;
	width:50vw;
	margin-left:25vw;
	margin-top:30vh;
	background:black;
	border:0.1vw solid white;
}
.error p{
	font-size:1.5vw;
	text-transform:uppercase;
	padding:2.5vw;
	color:#e4e4e6;
	margin:0;
}
.error p:first-child{
	padding-bottom:5vh;
}
.error p:last-child{
	cursor:pointer;
	margin:0;
	border-radius:0%;
	text-align:center;
	border-top:0.1vw solid white;
}
}
@media (min-width: 650px) and (max-width: 1200px) and (min-height: 500px) and (max-height: 1000px) {
		.loginlb{
    display:flex;
	z-index:1;
	left:5%;
    top:0%;
	background:transparent;
	padding:2vw;
	padding-top:5vw;
	padding-left:5vw;
}
.loginlb p{
	text-transform:uppercase;
	font-size:1.7vw;
	margin:0;
	color:#e4e4e6;
}
.mform{
	padding:1.5vw;
	padding-left:4.95vw;
	padding-top:10vh;
	width:50vw;
}
.username{
	display:flex;
	flex-direction:column;
	background:transparent;
	overflow-x:clip;
}
.username input{
	background:0;
	border:none;
	border-radius:0%;
	font-size:1.7vw;
	color:#e4e4e6;
	height:100%;
	width:100%;
	padding-bottom:0.7vw;
	border-bottom:0.1vw solid #e4e4e6;
}
.username input::placeholder{
	color:#e4e4e6;
	opacity:1;
}
.pass{
	display:flex;
	flex-direction:column;
	background:transparent;
	overflow-x:clip;
}
.pass input{
	background:0;
	border:none;
	border-radius:0%;
	font-size:1.7vw;
	color:#e4e4e6;
	height:100%;
	width:100%;
	padding-bottom:0.7vw;
	border-bottom:0.1vw solid #e4e4e6;
}
.pass input::placeholder{
	color:#e4e4e6;
	opacity:1;
}
input:focus{
	outline:none;
}
.submit{
	border:0.1vw solid #e4e4e6;
	display:flex;
	justify-content:center;
	align-items:center;
	padding:1.5vw;
}
.submit input{
	width:100%;
	font-size:1.5vw;
	background:none;
	border:none;
	color:#e4e4e6;
	text-transform:uppercase;
	text-align:center;
}
.error-cover{
	position:fixed;
	height:100vh;
	background:lch(0 0 0 / 0.65);
	width:100%;
	top:0;
	left:0;
}
.error{
	position:fixed;
	z-index:1;
	width:50vw;
	margin-left:25vw;
	margin-top:30vh;
	background:black;
	border:0.1vw solid white;
}
.error p{
	font-size:1.5vw;
	text-transform:uppercase;
	padding:2.5vw;
	color:#e4e4e6;
	margin:0;
}
.error p:first-child{
	padding-bottom:5vh;
}
.error p:last-child{
	cursor:pointer;
	margin:0;
	border-radius:0%;
	text-align:center;
	border-top:0.1vw solid white;
}