* {
	margin: 0;
	padding: 0;
}
html, body {
	background-color: var(--c_bg);
	color: var(--c_font);
	height: 100%;
	width: 100%;
	
	font-size:16px;
	letter-spacing:1.1px;
	line-height:1.5rem;
	font-weight:normal;
	font-style:normal;
	font-family:Calibri;
}
@media (max-width: 430px) {
  html, body  {
    font-size: 12px; /* Kleinere Basisschrift für mobile Geräte */
  }
}
#header { position:relative; z-index:70;
	box-sizing: border-box;
	background: var(--c_prim);
	background: linear-gradient(90deg,rgba(80, 118, 100, 1) 0%, rgba(34, 71, 70, 1) 100%);
	width:100%;
	height:75px; 
	box-shadow: var(--boxshadow2);
	
	transition: ease all .5s;
} 
@media only screen and (min-width: 600px) {
	#header {
		height:125px;
	} 
}
@media only screen and (min-width: 1400px) {
	#header {
		height:180px;
	}
	#touch + label{
		display:none;
	} 
}

a, a:active, a:visited, a:link {
	text-decoration:none;
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
	outline: none !important;
}
h1 {
	text-align:center;
	font-size:1.5rem;
	padding:30px 0 20px 0;
	color: var(--c_h);
}
h2 {
	text-align:center;
	font-size:1.1rem;
	margin:10px 0 5px 0;
	color: var(--c_h);
}
input[type="text"], input[type="password"], input[type="number"], input[type="email"] {
	background:none !important;
	border:none;
	border-bottom: 2px solid var(--c_prim);
	border-radius:5px;
	outline: none;
	box-shadow: none;

}
input[type="text"]:focus, input[type="password"]:focus, input[type="number"]:focus, input[type="email"]:focus {
	border:none;
	border-bottom: 2px solid var(--c_tert);
}
input:invalid + label {
  box-shadow: 0 0 0 2px red;
}

.checkbox {
	display:none;
}
.checkbox + label {
	position: relative;
	display: block;
	width: 40px;
	height: 20px; 
	background-color: #aaa; 
	border-radius: 20px;
	transition: all 0.3s;
	
}
.checkbox + label::after {
	content: '';
	height:16px; width:16px;
	border-radius:50%;
	background-color:var(--c_white);
	position:absolute;
	top:2px; left:2px;
	transition: all 0.3s;
}

.checkbox:checked + label::after {
	left:22px;
}
.checkbox:checked + label {
	background-color:var(--c_prim);
}

.msg {
	opacity:1;
	color:var(--c_offwhite);
	position:absolute;
	top:30px;
	width:clamp(100px,calc(100% - 40px),calc(var(--wInhalt) * 1px));
	box-sizing:border-box;
	z-index:70;
	left:50%;
	transform:translate(-50%,0);	
	padding:13px;
	text-align:center;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
	overflow: hidden;

	transition: all 0.4s linear;
	
	animation-name: msgFadeout;
	animation-duration: 1s;
	animation-fill-mode: forwards;
	animation-delay: 4s;
}

@keyframes msgFadeout {
	from {	opacity:1; }
	to { 
		opacity:0;
		transform:translate(-50%,-50px);
		display:none;
	}
}

.inlinemsg {
	position:relative;
	margin-bottom: 20px;
	padding:13px 30px;
	box-sizing:border-box;
	width:100%;
	box-sizing:border-box;
	transition: all 0.4s linear;
	text-align:center;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
}

@media only screen and (max-width: 600px) {
	.msg {
		z-index:69;
		top:95px;	
	}
}
	#importantmsg {		
		background: linear-gradient(90deg,rgba(34, 71, 70, 0.8) 0%, rgba(244, 172, 69, 1) 47%);
	}
	#infomsg {		
		background: linear-gradient(90deg,rgba(34, 71, 70, 1) 0%, rgba(244, 172, 69, 1) 47%);
	}
	#savemsg {
		background: linear-gradient(90deg,rgba(34, 71, 70, 1) 0%, rgba(55, 171, 103, 1) 68%);	
	}
	#savemsg::before {
		content:''
		position:absolute;
		left:5px;top:0;
		width:100%; height:100%;
		background-image:url(media/save.svg);
		background-repeat:no-repeat;
		background-position: bottom 50% left 10px;
		filter:invert(0.85);
		}
	.msg img {
		filter:invert(1);
		position:absolute; right:10px;
		height:50%;
		cursor:pointer;
		transition: all 0.2s ease-in-out;
	}
	.msg img:hover {
		opacity:.6;
	}

#inhalt { 	
	text-align:center;
	transition: ease all .5s;
	min-height: calc(100dvh - 75px - 30px);
	padding: 30px 10px 30px 10px;
	box-shadow: var(--boxshadow);
}
#inhalt a {
	color: var(--c_link);
	border-bottom:1px solid var(--c_link);
	transition: all 0.15s ease-in-out;
}
#inhalt a:hover,#footer a:hover {
	color: var(--c_linkhover);
	border-bottom:1px solid  var(--c_linkhover);
}
@media only screen and (min-width: 600px) {
	#inhalt {
	min-height: calc(100% - 125px - 30px);
	padding: 20px 30px 30px 30px;
	} 
}
@media only screen and (min-width: 1400px) {
	#inhalt {
	min-height: calc(100% - 180px - 30px);
	padding: 20px 30px 30px 30px;
	} 
}
#inhalt, #footer {
	z-index:1;
	position: relative;
	box-sizing: border-box;
	margin: 0 auto;
	max-width:calc(var(--wInhalt) * 1px);
	background-color:var(--c_inhalt);
}
#footer {
	height:30px;
	text-align:center;
	font-size:0.7rem;
}
#footer a{
	color:var(--c_font);
	text-decoration:none;
	border:none;
}

#back-button {
	transform:rotate(270deg);
	height:30px;
	position:absolute; top:70px; left: -45px;
	cursor:pointer;
	transition: all 0.3s linear;
	filter:invert(0.7);

}
[data-theme="dark"] #back-button {
	filter:invert(0);
}

#back-button:hover {
	opacity:.5;
}

@media only screen and (max-width: calc (600px - 1px)) {
	#back-button {	top:20px; left: 20px; }
}
@media only screen and (min-width: 600px) and (max-width: 900px) {
	#back-button {	top:70px; left: 30px; }
}
@media only screen and (min-width: 901px) and (max-width: calc(1400px - 1px)) {
	#back-button {	top:70px; left: -40px; }
}
@media only screen and (min-width: 1400px) {
	#back-button {	top:25px; left: -40px; }
}

/* ### user-management & settings ### */

#menue {
	margin: 0 auto;
	border:none;
	border-spacing: 0px;
	border-collapse: separate;
	border-spacing: 0 3px;
}
#menue td {
	padding: 15px 5px 15px 5px;
	text-align:right;
}

.textfield {
	box-sizing:border-box;
	width:100%;
	padding:0 3px 0 5px;
	line-height:25px;
}

.button-fullgreen, .button-fullred,.button-borderred, .button-bordergreen {
	border-width: 3px;
	border-radius: 10px;
	font-size: 0.9em;
	text-decoration: none;
}

.button-fullgreen, .button-fullred {
	font-weight:bold;
	width:150px;
	padding: 10px;
	color:white;
	border:none;
}
.button-fullgreen {
	border:none;
	background-color: var(--c_prim);
}
.button-fullred {
	border-color: var(--c_red);
	background-color: var(--c_red);
}
.button-fullgreen:hover , .button-fullred:hover{
	opacity:.7;
	cursor:pointer;
}

.button-borderred, .button-bordergreen {
	padding:9px 15px 9px 15px;
	width:200px;
	margin:20px;
	text-align:center;
	background-color:var(--c_offwhite);
}

.button-borderred, .button-borderred a {
	border: 3px solid var(--c_red);
	color:var(--c_red);
}
.button-bordergreen, .button-bordergreen a {
	border: 3px solid #349D40;
	color:#349D40;
}
.button-borderred:hover, .button-bordergreen:hover {
	opacity:.5;
}

#httpslink:link, #httpslink:visited, #httpslink:hover, #httpslink:active {
	text-decoration:none;
	background-color: #55B661;
	border-radius:15px; border:none; outline:none;
	color:var(--c_white);
	padding:3px 20px 3px 10px;
	white-space:nowrap;
}
#httpslink img {
	height:24px;
	position:relative; top:7px; left:-10px;
	background-color:var(--c_white); border-radius:50%;
}

.showPsw {
	height:19px;
	position:absolute; transform:translate(-32px,0px);
	cursor:pointer;
	padding:5px;
}

.notvisible {
	transition: all 0.5s linear;
	padding:0 !important;
	opacity:0 !important;
	height:0 !important;
	box-sizing:border-box !important;
	overflow: hidden !important;
}

/* ### OVERLAY ### */

#overlay {
	z-index:9000;
	position:fixed;
	display:none;
	opacity:0;
	bottom:0px;
	left:0;
	height:100%;
	width:100%;
	background:rgb(0,0,0,0.4);
	backdrop-filter:blur(6px);
	transition:all 0.3s linear;
}

.touchInterface {
	max-height:100dvh;
	position:relative;
	z-index:9001;
	overflow:scroll;
	display:none;
 	box-shadow: 0 -10px 15px #777;
	transition:bottom 0.3s linear;
	padding: 30px;
	position:fixed;
	box-sizing:border-box;
	width:95%;
	max-width:calc(var(--wInhalt) * 1px + 50px);
	left:50%; transform:translate(-50%,0);
	background-color:var(--c_offblack); 
	border-radius: 30px 30px 0 0;
	color:white;
}
.touchInterface form {
	display:flex;
	flex-direction:column;
	gap:25px;
	justify-content:center;
	align-items:center;
	text-align:center;
}
.touchInterface input[type="text"] {
	text-align:center;
	color:white;
	font-size:1rem;
}
.touchInterface h2 {
	color:white;
}
.touchInterfaceDiv , .ausblendenDiv {
	color:black;
	background-color:var(--c_tert);
	padding:10px 30px; margin:3px 6px;
	cursor:pointer;
	transition: opacity 0.2s linear;
	border-radius:10px;
}
.ausblendenDiv {
	background-color:white;
}
.ausblendenDiv img {
	height:1em;
	transform:translate(0,3px);
}
.touchInterfaceDiv:hover {
	opacity:.5;
}
.closebutton {
	position:absolute;
	right:25px; top:25px;
	height:25px;
	filter:invert(1);
	cursor:pointer;
	transition: all 0.2s linear;
	border: 2px solid black;
	padding: 5px 3px 1px 2px;
	border-radius:50%;
}
.closebutton:hover{
	transform:rotate(90deg);
}