/* Grundeinstellungen für jede Webseite */
:root { 
	--normal: 14px; 
	--hell: rgba(255, 255, 255, 1); 
	--grau: rgba(150, 150, 150, 0.3);
	--mittel: rgba(21, 29, 65, 0.5);
	--dunkel: rgba(21, 29, 65, 1); /* rut-blau */
}

/* Grundlayout */
html {
	background-color: #cdcdcd;
}

body {
	width: 75%;
	margin: 15px auto;
	font-family: Verdana, sans-serif;
	font-size: var(--normal);
	line-height: 1.25;
	border-radius: 5px;
}

/* Links */
a {
	font-size: inherit;
	text-decoration: none;
	color: var(--dunkel);
	min-width: 50px;
	text-align: center;
}

/* Überschriften */
h1, h2 { font-size: calc(var(--normal) + 15px); }
h3, h4 { font-size: calc(var(--normal) + 10px); }
h5, h6 { font-size: calc(var(--normal) + 5px); }
h1, h3, h5 { font-weight: bold; }

/* Wrapper – eigentlicher Seitenrahmen */
.wrapper {
	display: flex;
	flex-direction: column;
	min-height: 90vh;
	padding: 25px;
	background-color: var(--hell);
	color: var(--dunkel);
	border-radius: 5px;
}

/* Struktur */
header { display: flex; flex-direction: column; margin: 0; }
header h2 { padding: 1px; margin: 1px; border-bottom: 0.5px solid var(--dunkel);}
header small { font-size: calc(var(--normal) - 5px); border-top: 0.5px solid var(--dunkel); }

/*nav, aside, main, footer { margin-top: 10px; }*/

main { flex: 1; display: flex; flex-direction: column; }

nav, footer { 
	display: flex; 
	font-size: calc(var(--normal) - 3px );
	/*border: 0.5px dotted red;*/
	}
nav * { 
	min-width: 50px; text-align: center;
	font-size: calc(var(--normal) - 3px );
	background-color: var(--dunkel); color: white;
	}
nav span, footer span { 
	flex: 1; 
	}
nav { 
	border-bottom: 0.5px solid var(--dunkel); 
	padding: 4px;
	background-color: var(--dunkel); color: white;
	border-radius: 5px;
	}
footer { 
	border-top: 0.5px solid var(--dunkel); 
	}

/* Trennlinie */
hr {
	border: 0px; /*none;*/
	height: 0.5px;
	background-color: var(--dunkel);
	margin-top: 5px; margin-bottom: 5px;
}

/* Kleine Schrift */
.klein { font-size: calc(var(--normal) - 5px); }
/* abstandshalter */
.frei { flex: 1; }
.grün { background-color: green; color: white; padding: 3px; }

/* Textinhalt */
pre {
	font-family: inherit;
	white-space: pre-wrap;
	overflow-wrap: break-word;
	tab-size: 3;
	border-top: 0.5px solid var(--dunkel);
	border-bottom: 0.5px solid var(--dunkel);
	padding: 5px; /*margin-top: 5px; margin-bottom: 5px;*/
}
	
/* Grundeinstellungen für <form> */
form { 
	display: flex; 
	flex-direction: column; 
	align-items: flex-end;
	margin-bottom: 25px;
	padding: 25px;
	height: 25vh;
	box-sizing: border-box; /* wichtig */
	/*background-color: var(--grau); border-radius: 5px;*/
	width: 100%;  /* Formular nimmt den Container-Raum */
	max-width: 600px; /* optional Begrenzung */
	margin-left: auto;
	margin-right: auto;
}

form input[type="text"] {
	font-family: inherit; 
	font-size: calc(var(--normal) - 2px);
	border-radius: 2px; 
	outline: none; 
	border: 1px solid var(--grau); 
	width: 100%; 
	box-sizing: border-box; /* padding & border in width */
	margin-bottom: 10px; /* Abstand zwischen Feldern */
}

textarea {
	flex: 1;
	width: 100%;  /* volle Breite, ohne Zusatz */
	height: 50px; /* Höhe nach Wunsch */
	/*resize: vertical;   /* nur vertikal skalierbar */
}

input[type="submit"] { 
	width: 125px; 
	margin-left: 0; 
	border-radius: 2px; 
	border: 0; 
	font-color: var(--hell); 
	background-color: var(--dunkel);
}
::placeholder { color: var(--grau); opacity: 1; transition: opacity 3s; }
:focus::placeholder { opacity:0; }	 

/* Einstellung(en) für Laptop, Tablet oder Smartphone # Version x.5.24 */
@media only screen 
	and (max-device-width: 640px) 
  	and (-webkit-min-device-pixel-ratio: 2) 
	{ 
		body { width: 99%; margin: 0 auto;}
		.wrapper { width: 90%; margin: 0 auto; }
      #mobil { display: none; }
}