@import url('https://fonts.googleapis.com/css2?family=Merienda:wght@300..900&display=swap');
/* Quelle: M - SoftTech:*/ /* https://www.youtube.com/watch?v=LD74MTBc3pw */
:root{
	--main-color: #161e2c;
	--lyzeum-background: #ccbba3;
}

*{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family: 'Merienda', sans serif;
}
body{
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 100vh;
	background: url(../grafics/kaminzimmer.png);
	background-repeat: none;
	background-size: cover;
	background-color: black;
}

section {
	display: flex;
	width: 25vw; 
	height: 70vh;
	padding: 2rem 3rem;
	align-items: center;
	justify-content: center;	
	background: rgba(204, 187, 163,0.9);	
	border: 2px solid rgba(255,255,255,0.9);
	border-radius: 20px;
	box-shadow: 5px 5px rgba(204, 187, 163,0.2); 
}

h1{
}
.lyzeum_login_titel{
	top: 1.3vh;
	/* left: 1.2vw; */
	font-size: 1.5vw;
	color: var(--main-color);
	text-align: center;
  text-shadow: 0.2vh 0.2vh 0px #fff,  /* Leichter Schatten für den 3D-Effekt */
               -2px -2px 2px #fff4e6; /* Leichter Schatten für den 3D-Effekt */
}

.known_user {
	position: relative;
	margin: 3vw 0;
	width: 20vw;
	border-radius: 25px;
	border: 0.2vh solid var(--main-color);
	align-items: center;
}
.known_user label{
	position: absolute;
	top: 1.3vw;
	left: 1.2vw;
	transform: translateY(-50%);
	color: var(--main-color);
	font-size: 1.2vw;
	pointer-events: none;
	transition: all 0.5s ease-in-out;
}
.known_user input:focus ~ label,
.known_user input:valid ~ label{
	top: -0.2vw;
	background: white;
	padding: 0px 10px;
	color: var(--main-color);
	border-radius: 15px;
	font-size: 1.1rem;
	background-color: #ffffff;
	border: 1px solid; /* versuch der umrandung des Placeholders*/
}
.known_user input{
	width: 20vw;
	height: 60px;
	background: transparent;
	border: none;
	outline: none;
	font-size: 1.5rem;
	padding: 0 35px 0 5px;
	padding-left: 25px;
	color: var(--main-color);
	border-radius: 25px;
  /* box-shadow: inset 2px 2px 5px rgba(0, 0, 0, 0.2), */
              /* inset -2px -2px 5px rgba(255, 255, 255, 0.5); */

  outline: 2px solid rgba(255,255,255,0.9);
  box-shadow: inset 2px 2px 5px rgba(0, 0, 0, 0.2),
              inset -2px -2px 5px rgba(255, 255, 255, 0.5),
              0 0 5px rgba(0, 123, 255, 0.5);

	/* border: 2px solid rgba(255,255,255,0.9); */
	align-items: center;
}
.known_user:hover {
	background-color: #ffffff;
	z-index: 1;
	transition: all 0.5s ease-in-out;
}
.known_user ion-icon#person{
	position: absolute;
	right: 20px;
	color: var(--main-color);
	font-size: 1.2vw;
	top: 10px;
}
.known_user ion-icon#mail{
	position: absolute;
	right: 20px;
	color: var(--main-color);
	font-size: 1.2rem;
	top: 30px;
}
.known_user ion-icon#pass{
	position: absolute;
	right: 20px;
	color: var(--main-color);
	font-size: 1.2rem;
	top: 20px;
}
.known_user checkbox {
	background: #40000; 
	border-radius: 20px;
}


/* Passwort Input */
.known_user_pwd {
	position: relative;
	margin: 30px 0;
	width: 20vw;
	border-radius: 25px;
	border: 1px solid var(--main-color);
}
.known_user_pwd label{
	position: absolute;
	top: 50%;
	left: 25px;
	transform: translateY(-50%);
	color: var(--main-color);
	font-size: 1.5rem;
	pointer-events: none;
	transition: all 0.5s ease-in-out;
}
.known_user_pwd input:focus ~ label,
.known_user_pwd input:valid ~ label{
	top: -2px;
	background: white;
	padding: 0px 10px;
	color: var(--main-color);
	border-radius: 15px;
	font-size: 1.1rem;
	background-color: #ffffff;
	border: 1px solid; /* versuch der umrandung des Placeholders*/
}
.known_user_pwd input{
	width: 100%;
	height: 60px;
	background: transparent;
	border: none;
	outline: none;
	font-size: 1.5rem;
	padding: 0 35px 0 5px;
	padding-left: 25px;
	color: var(--main-color);
	border-radius: 25px;
  /* box-shadow: inset 2px 2px 5px rgba(0, 0, 0, 0.2), */
              /* inset -2px -2px 5px rgba(255, 255, 255, 0.5); */

  outline: 2px solid rgba(255,255,255,0.9);
  box-shadow: inset 2px 2px 5px rgba(0, 0, 0, 0.2),
              inset -2px -2px 5px rgba(255, 255, 255, 0.5),
              0 0 5px rgba(0, 123, 255, 0.5);

	/* border: 2px solid rgba(255,255,255,0.9); */

}
.known_user_pwd:hover {
	background-color: #ffffff;
	z-index: 1;
	transition: all 0.5s ease-in-out;
}
.known_user_pwd ion-icon#pass{
	position: absolute;
	right: 20px;
	color: var(--main-color);
	font-size: 1.2rem;
	top: 20px;
}
/* .known_user_pwd ion-icon#pass:hover{ */
	/* position: absolute; */
	/* right: 20px; */
	/* color: var(--main-color); */
	/* font-size: 1.2rem; */
	/* top: 20px; */
/* } */



.forget {
	margin: 35px 0;
	font-size: 0.85rem;
	color: var(--main-color);
	display: flex;
	justify-content: space-between;
}
.forget label{
	display: flex;
	align-items: center;
}
.forget label input{margin-right: 3px;}
.forget input{ /* Checkbox ohne text */
	color: var(--main-color);
	text-decoration: none;
	font-size: 12px;
	font-weight: 600;
}
.forget a{
	color: var(--main-color);
	text-decoration: none;
	font-size: 0.8rem;
	font-weight: 600;
	border: 2px solid white;
	/* box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.4); */
	/* border-radius: 20px; */
	padding: 10px;
	color: var(--main-color);
	box-shadow: 2px 2px 5px 0px rgba(0, 0, 0, 0.8);
	border-radius: 25px;
}
.forget a:hover{
	background: #f0dec5;
	color: var(--main-color);
	background-image: linear-gradient(to bottom, #99866c, #f7f0e6);
	/* box-shadow inset: -2px -2px -5px 0px rgba(0, 0, 0, 0.8);  */
  transform: scale(1.03); /* Vergrößern beim Hovern */
  box-shadow: 0px 5px 15px rgba(0,0,0,0.3); /* Schatteneffekt */

	transition: all 0.4s ease;
}

.forget .f_rem{
	display: flex;
	align-items: center;
	border-radius: 10px;
	border: 2px solid white;
	padding: 10px;
	margin: 1px;
	color: var(--main-color);
	box-shadow: 2px 2px 5px 0px rgba(0, 0, 0, 0.8);

}
.forget .f_rem:hover{
	display: flex;
	align-items: center;
	border: 2px solid white;
	border-radius: 10px;
	padding: 10px;
	margin: 1px;
	/* margin: 35px 0; */
	background-image: linear-gradient(to corner, #f7f0e6 2%, #99866c 98%); 
	/* background-image: linear-gradient(to bottom, #99866c, #f7f0e6); */
	/* background-image: linear-gradient(to bottom, #f7f0e6, #99866c); */
  box-shadow: 0px 5px 15px rgba(0,0,0,0.3); /* Schatteneffekt */
	transition: all 0.3s ease;
	/* transition: all 0.5s ease-in-out; */
}



.click-link{
	display: flex;
	width: 100%;
	height: 50px;
	border: 1px solid;
	border-radius: 40px;
	background: var(--main-color);
	color:black;
	outline: none;
	cursor: pointer;
	font-size: 1rem;
	font-weight: 600;
	outline:0;
	text-decoration: none;
	/* border:4px solid #ccbba3; */
	justify-content: center;	
	align-items: center;
	/* box-shadow: 0 0 5px 4px rgba((166 105 15, 0.9); */
  /* padding: 10px 20px; */
	/* -webkit-box-shadow: 0 0 15px 14px rgba(36,184,194, 0.10); */
	/* -moz-box-shadow: 0 0 5px 4px rgba(36,184,194, 0.10); */
	background-image: linear-gradient(to bottom, #f7f0e6, #99866c);
	box-shadow: 2px 2px 5px 0px rgba(0, 0, 0, 0.8); 
	transition: all 0.4s ease;

}
.click-link:hover{
	background: #f0dec5;
	/* color: white; */
	color: var(--main-color);
	background-image: linear-gradient(to bottom, #99866c, #f7f0e6);
	/* box-shadow inset: -2px -2px -5px 0px rgba(0, 0, 0, 0.8);  */
  transform: scale(1.03); /* Vergrößern beim Hovern */
  box-shadow: 0px 5px 15px rgba(0,0,0,0.3); /* Schatteneffekt */

	transition: all 0.4s ease;
}
.eintragen { /* Registrier-Button */
	font-size: 0.9rem;
	color: var(--main-color);
	text-align: center;
	margin: 25px 0 10px;
}

.eintragen p{
	text-decoration: none;
	color: var(--main-color);
} 
.eintragen a{
	display: flex;
	width: 100%;
	height: 50px;
	border: 1px solid;
	border-radius: 40px;
	background: var(--main-color);
	color:black;
	outline: none;
	cursor: pointer;
	font-size: 1rem;
	font-weight: 600;
	outline:0;
	text-decoration: none;
	/* border:4px solid #ccbba3; */
	justify-content: center;	
	align-items: center;
	/* box-shadow: 0 0 5px 4px rgba((166 105 15, 0.9); */
  /* padding: 10px 20px; */
	/* -webkit-box-shadow: 0 0 15px 14px rgba(36,184,194, 0.10); */
	/* -moz-box-shadow: 0 0 5px 4px rgba(36,184,194, 0.10); */
	background-image: linear-gradient(to bottom, #f7f0e6, #99866c);
	box-shadow: 2px 2px 5px 0px rgba(0, 0, 0, 0.8); 
	transition: all 0.4s ease;
}
.eintragen a:hover{
	background: #f0dec5;
	/* color: white; */
	color: var(--main-color);
	background-image: linear-gradient(to bottom, #99866c, #f7f0e6);
	/* box-shadow inset: -2px -2px -5px 0px rgba(0, 0, 0, 0.8);  */
  transform: scale(1.03); /* Vergrößern beim Hovern */
  box-shadow: 0px 5px 15px rgba(0,0,0,0.3); /* Schatteneffekt */

	transition: all 0.4s ease;
}