:root {
    /* Farb-Variablen definieren */
    --bg-color: oklch(90.1% 0.022 90); /*normaler Hintergrund*/
    --bg-field-color: oklch(from var(--bg-color) 95% c h); /*hellerer Hintergrund für panels*/
    --text-color: oklch(from var(--bg-color) 10% c h); /*Text farbe nornmal*/
    --text-hell-color: oklch(from var(--bg-color) 93% c h); /* für invertierte stellen */
    --text-grau-color: oklch(from var(--bg-color) 50% c h); /* für kleine Hinweistexte */
    --red-color: oklch(70% 0.1 20); /*rot standard für buttons*/
    --red-light-color: oklch(from var(--red-color) calc(l * 1.2) calc(c / 2) h); /*rot für required inputs*/
    --green-color: oklch(70% 0.15 140); /*grün standard für buttons*/
    --green-light-color: oklch(from var(--green-color) calc(l * 1.2) calc(c / 2) h); /*hellgrün für valid inputs*/
    --gelb-color: oklch(85% 0.12 100); /*gelb standard*/
    --gelb-light-color: oklch(from var(--gelb-color) calc(l * 1.1) calc(c / 2.3) h); /*hellgelb für optional inputs*/
    --shadow-color: oklch(from var(--bg-color) 70% c h); /*Schatten Farbe*/
    --button-color-plain: oklch(from var(--bg-color) 85% 0.1 h); /*standard button*/
    --button-color-active: oklch(from var(--button-color-plain) 75% 0.2 h); /*button active und hover*/
    --button-color-shadow: oklch(from var(--button-color-active) 60% 0.15 h);
    --fehler-color: oklch(from var(--red-color) 60% c h); /*farbe für fehlermeldungen*/
    --confirm-color: oklch(from var(--green-color) 40% c h); /*grün für Häkchen */

    /* Font-Variablen definieren */
    --text-font: arial, helvetica, sans-serif;
    --headline-font: "arial black", "helvetica black", sans-serif;
    --status-font: "Lucida Console", Monaco, monospace;
}

*, *::before, *::after {
	-webkit-box-sizing: border-box;
	        box-sizing: border-box;
}

* {
	margin: 0;
	padding: 0;
	font-size: 100%;
	line-height: calc(1em + 0.5rem);
}

body {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	    -ms-flex-direction: column;
	        flex-direction: column;
	min-height: 100dvh;
	background-color: var(--bg-color);
	color: #1F1914;
	font-family: var(--text-font);
	-webkit-font-smoothing: antialiased;
	-ms-hyphens: auto;
	    hyphens: auto;
}

svg {
	display: block;
	max-width: 100%;
}

header {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: start;
	    -ms-flex-pack: start;
	        justify-content: flex-start;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	padding: 1em;
	margin: 1rem;
	background-color: var(--bg-field-color);
	border-radius: 1em;
	-webkit-box-shadow: 2px 4px 6px var(--shadow-color);
	        box-shadow: 2px 4px 6px var(--shadow-color);
	margin-bottom: 3rem;
}

a.logolink {
	width: 10%;
	margin-right: 2em;
}

img {
	display: block;
	max-height: 10vh;
}

#textzeile {
	font-size: clamp(1rem, 3.5vw, 3rem);
	font-family: var(--headline-font);
}

main {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	    -ms-flex-direction: column;
	        flex-direction: column;
	-webkit-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	-ms-flex-line-pack: center;
	    align-content: center;
}

form {
	display: none;
	padding: 2em;
	width: min(95vw, 26rem);
	background-color: var(--bg-field-color);
	border-radius: 2em;
	-webkit-box-shadow: 2px 4px 6px var(--shadow-color);
	        box-shadow: 2px 4px 6px var(--shadow-color);
	margin-bottom: 3rem;
}

.loginlabel {
	display: block;
	text-align: center;
	font-size: 1.2rem;
	font-weight: bold;
}

input, button {
	display: block;
	font: inherit;
}

input {
	font-size: 1.2em;
	border-radius: 0.3em;
	padding: 0.2em;
	width: 100%;
	margin-bottom: 2em;
}
input:focus {
	outline: 2px solid blue;
	outline-offset: 2px;
}

input[type=submit] {
	border-radius: 0.6em;
	border: none;
	padding: 0.5em;
	width: 6em;
	background-color: var(--button-color-plain);
	margin-inline: auto;
	margin-bottom: 0;
	cursor: pointer;
	-webkit-box-shadow: 3px 6px 8px var(--shadow-color);
	        box-shadow: 3px 6px 8px var(--shadow-color);
	-webkit-transition: background-color 0.3s, -webkit-box-shadow 0.1s ease;
	transition: background-color 0.3s, -webkit-box-shadow 0.1s ease;
	transition: box-shadow 0.1s ease, background-color 0.3s;
	transition: box-shadow 0.1s ease, background-color 0.3s, -webkit-box-shadow 0.1s ease;
}
input[type=submit]:hover {
	background-color: var(--button-color-active);
	outline: none;
	-webkit-box-shadow: 2px 4px 6px var(--shadow-color);
	        box-shadow: 2px 4px 6px var(--shadow-color);
}
input[type=submit]:active {
	background-color: var(--button-color-active);
	-webkit-box-shadow: inset 2px 4px 3px var(--button-color-shadow);
	        box-shadow: inset 2px 4px 3px var(--button-color-shadow);
}

.warnung, .info {
	-ms-flex-item-align: center;
	    -ms-grid-row-align: center;
	    align-self: center;

	border-radius: 1em;
	padding: 1em;
	-webkit-box-shadow: 2px 4px 6px var(--shadow-color);
	        box-shadow: 2px 4px 6px var(--shadow-color);
	margin-bottom: 2rem;
}

.warnung {
	background-color: var(--red-color);
	color: white;
    width: min(95vw, 20rem);
}

.info {
	background-color: var(--gelb-color);
	color: #1F1914;
    width: min(95vw, 30rem);
}

.onmobile {
	display: block;
}
@media (min-width: 799px) {
	.onmobile {
		display: none;
	}
}

footer {
	padding: 1em 2rem;
	margin: 1rem;
	margin-top: auto;
	background-color: var(--bg-field-color);
	border-radius: 1em;
	-webkit-box-shadow: 2px 4px 6px var(--shadow-color);
	        box-shadow: 2px 4px 6px var(--shadow-color);
}

.textlink {
	color: #1F1914;
	text-underline-offset: 3px;
	text-shadow: 2px 3px 2px var(--shadow-color);
}
.textlink:hover {
	text-shadow: 1px 1px 1px var(--shadow-color);
}