@font-face { 	font-family: 'CalibriLight';
    src: url('../ttf/CalibriL.ttf') format('truetype'); 
}

@font-face { 
	font-family: '712-font';
    src: url('../ttf/712-font.otf') format('opentype'); 
}

:root {
	--main-bg-color:rgba(239, 239, 255, 1.0);
	--main-bgt-color:rgba(239, 239, 255, 1.0);
	--main-bd-color:rgba(207, 207, 255, 1.0);
	--main-txt-color:rgba(52, 52, 56, 1.0);
	--main-cont-color:rgba(239, 112, 0, 1.0);
	--main-io-color:rgba(0, 239, 112, 1.0);
	--main-nio-color:rgba(239, 0, 112, 1.0);
	--main-on-color:rgba(0, 112, 239, 1.0);
}

html,
body{
	background-color:var(--main-bg-color);
	border:none;
	color:var(--main-txt-color);
    cursor:default;
	direction:ltr;
    display:block;
	font-family:'CalibriLight', 'Calibri Light', Arial, Verdana, Helvetia, Sans-Serif;
	font-size:1.0em;
	font-weight:100;
	height:100%;
	overflow:hidden;
	hyphens:auto;
		-moz-hyphens: auto;
		-o-hyphens: auto;
		-webkit-hyphens:auto;
		-ms-hyphens:auto;
	line-height:1.1em;
	margin:0; 
	padding:0;
	position:absolute;
	scroll-behavior:smooth;
	text-align:center;
	justify-content:center;
	text-decoration:none;
    vertical-align:middle;
	word-wrap:break-word;
	width:100%; 
	z-index:0;
}

body{
    animation: colorShift 8s infinite normal linear;
	background: radial-gradient(white, var(--main-bg-color) 5%, var(--main-bd-color), var(--main-bg-color) 95%, white);
    background-size: 200% 200%;
	display: flex;
	margin: 0; 
}

@keyframes colorShift {
	0% {
		background-position: 0% 20%;
    }
	12%{
		background-position: 0% 50%;
	}
	25% {
		background-position: 20% 100%;
	}
	37%{
		background-position: 50% 100%;
	}
	50% {
		background-position: 100% 80%;
    }
	62% {
		background-position: 100% 50%;
    }
    75% {
        background-position: 90% 0%;
    }
	87% {
        background-position: 50% 0%;
    }
	100% {
        background-position: 0% 20%;
    }
}


button,
input[type=submit]{
	height:2.5em;
	border:none;
	padding:0 2.5em;
	border-radius:0 0.625em;
	background-color:var(--main-on-color);
	text-align:center;
	outline:none;
	cursor: pointer;
	width:100%;
	display:block;
	float:left;
	font-weight:bold;
	transition:all 0.7s ease;
	color:var(--main-bg-color);
	font-size:1.0em;
}

button:hover,
input[type=submit]:hover{
	background-color:var(--main-io-color);
	color:var(--main-txt-color);
}

input[type=submit]:disabled {
    background-color: var(--main-bd-color); /* Grauer Hintergrund */
    color: var(--main-txt-color); /* Graue Schrift */
    cursor: not-allowed; /* Zeigt an, dass der Button nicht klickbar ist */
    opacity: 1.0; /* Leicht transparent für ausgegrauten Effekt */
}

h1 {
	font-size:2.9em;
	font-family: '712-font', 'CalibriLight'; 
	line-height:1em;
	font-weight: bold;
	display:block;
	margin:0;
	margin-bottom:0.0em;
	padding:0;
}

header {
	text-align:left;
	justify-content:left;
	background-color:Transparent;
	display:block;
	font-size:1em;
	height:5em;
	line-height:5em;
	position:fixed;
	top:-5em;
	width:calc(100% - 4em);
	z-index:300;
	padding:0 2em;
	opacity:0.0;
	transition:all 0.7s ease;
}

header h1{
	font-size:2em;
	line-height:2.5em;
}

footer {
	background-color:Transparent;
	bottom:0em;
	left:0em;
	color:var(--main-txt-color);
	padding:0 2em;
	display:block;
	font-size:0.7em;
	height:2em;
	line-height:2em;
	position:absolute;
	width:calc(100% - 4em);
	z-index:300;
}

footer #built {
	float:left;
}

footer #copyright {
	float:right;
}

form{
	display:block;
	float:left;
	height:auto;
	margin:auto;
	width:100%;
}

form div{
	position:relative;
	display:block;
	float:left;
	width:100%;
	/*display:inline-block;*/
}

form div span {
	position:absolute;
	right:4px;
	bottom:2px;
	transform: translateY(-50%);
    font-size: 20px;
    pointer-events: none; /* Verhindert, dass es klickbar ist */
	color:var(--main-bg-color);
}

input::placeholder {
    opacity: 0;
	color:Transparent;
}

input[type=text],
input[type=password]{
	height:1.5em;
	padding:0.5em 0 0 0;
	border-radius:0% 0.625em;
	border:none;
	outline:none;
	background-color:var(--main-bgt-color);
	text-align:center;
	vertical-align:bottom;
	width:100%;
		font-size:1.2em;
		line-height:2.0em;
		margin:0;
		margin-bottom:0.5em;
}

form label{
	color:var(--main-txt-color);
	position:absolute;
	font-size:1.2em;
	cursor:text;
	top:13px;
	left:5%;
	padding:0;
	transition: all 0.3s ease;
	width:100%;
	text-align:left;
}
/*form input:not(:placeholder-shown) + label
form input:valid + label
form input:not(:empty) + label*/

form input:focus + label,
form input:not(:placeholder-shown) + label
{
	font-size:0.8em;
	top:0px;
	left:20px;
	width:50%;
}

table, tr, td, th {
	font-size:1.0em;
	margin:0;
	padding:0;
	border:none;
	border-collapse: collapse;
}

table {
	
}

tr{

}

th{
	text-transform: capitalize;
	padding:0.5em 1em;
	background-color:var(--main-txt-color);
	color:var(--main-bg-color);
}

td{
	padding:0.5em 1em;
	background-color:var(--main-bt-color);
	color:var(--main-txt-color);

}

#nutzertabelle {
	display:block;
	float:left;
	height:100%;
	width:15em;
	vertical-align:top;
	justify-content:start;
	width:calc(100% - 4em);
}

main {
	justify-content: center;
	align-items: center;
	min-height: 100vh;
	text-align: center;
	height: 100vh;
	display: flex;
	background-color: Transparent;
	vertical-align: middle;
	float: left;
	width: 100%;
	text-align: center;
	justify-content: center;
	transition: all 0.7s ease 0s;
	position: absolute;
	left: 0;
	backdrop-filter: blur(120px) saturate(120%);
}

main section {
	
}