/* Open Sans, aus dem eigenen Auslieferungsbaum.
 *
 * WARUM NICHT MEHR VON GOOGLE: Hier stand bis 2026 ein @import auf das
 * Schriftverzeichnis von Google. Damit holte JEDER Besucher
 * der Seite - auch der nicht angemeldete - die Schrift von einem fremden
 * Server und teilte diesem dabei seine IP-Adresse, seinen Browser und die
 * Tatsache mit, dass er gerade hier ist. Fuer die Seite selbst hatte das
 * keinen Nutzen: Die Dateien aendern sich nicht, und der frueher ins Feld
 * gefuehrte gemeinsame Zwischenspeicher der Browser existiert nicht mehr -
 * seit 2020 trennen alle grossen Browser ihn nach Herkunftsseite.
 *
 * Dazu kam ein zweiter Verweis, den man leicht uebersieht: Das Stylesheet von
 * Google verwies seinerseits auf fonts.gstatic.com. Ein @import ist deshalb
 * nicht ein fremder Server, sondern zwei.
 *
 * ES SIND VARIABLE SCHRIFTEN. Eine Datei je Schriftlage deckt den gesamten
 * Bereich von 400 bis 700 ab - die Seite braucht 400 (Fliesstext) und 700
 * (.heady, h2, b). Ein fester Satz einzelner Schnitte waeren vier bis acht
 * Dateien statt zwei.
 *
 * DIE unicode-range-ANGABEN BLEIBEN. Sie sind kein Beiwerk aus dem Original:
 * Solange auf einer Seite kein Zeichen aus dem erweiterten Bereich vorkommt,
 * laedt der Browser die zugehoerige Datei gar nicht erst. Fuer deutschen
 * Text bedeutet das in aller Regel 48 kB statt 83 kB.
 *
 * Herkunft: Google Fonts, Open Sans v44 (2026-09-06). Lizenz: SIL Open Font
 * License 1.1, Volltext in schrift/OFL.txt - sie verlangt, dass er
 * mitgeliefert wird.
 */

@font-face {
	font-family: 'Open Sans';
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url('schrift/open-sans-latin-normal.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'Open Sans';
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url('schrift/open-sans-latin-ext-normal.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: 'Open Sans';
	font-style: italic;
	font-weight: 400 700;
	font-display: swap;
	src: url('schrift/open-sans-latin-italic.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'Open Sans';
	font-style: italic;
	font-weight: 400 700;
	font-display: swap;
	src: url('schrift/open-sans-latin-ext-italic.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}


body {
	font-family: 'Open Sans', sans-serif;
	color: white;
	margin:0;
	font-size: 1.2em;
}

nav {
	padding: 15px 5%;
	margin: 0;
	min-height: 40px;
	background-color: rgba(55,55,72,1);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
}

main {
	padding: 0;
	margin: 0;
}

header {
	padding: 0;
	margin: 0;
}

footer {
	padding-top: 7px;
	margin: 0;
	background-color: rgba(55,55,72,1);
	color: #A6B1BD;
	text-align: center;
	min-height: 30px;
}

article {
	padding-left: 30%;
	padding-top: 6%;
	padding-bottom: 6%;
	margin: 0;
	min-height: 400px;
}

a {
	color: #A6B1BD;
	text-decoration: none;
}

section {
	width: 55%;
	margin-left: 5%;
}

.red {
	color: rgba(255,95,74,1);
}

.gr {
	color: rgba(28,34,48,1);
}

.gruen {
	color: rgba(40,165,0,1);
}

.eins {
	background-color: rgba(255,95,74,1);
}

.zwei {
	background-color: rgba(28,34,48,1);
}

.drei {
	background-color: rgba(40,165,0,1);
}

.vier {
	background-color: rgba(28,34,48,1);
}

.fuenf {
	background-color: rgba(10,95,183,1);
}

.sechs {
	background-color: rgba(28,34,48,1);
}

.heady {
	font-size: 3em;
	font-weight: 700;
	padding-top: 30px;
}

/* Die Verweise auf die Dienste des Rootservers. Welche davon erscheinen,
   entscheidet index.php anhand des Anspruchs "roles" - Portainer nur fuer
   Mitglieder der zugehoerigen Gruppe. */
.menue {
	display: flex;
	flex-wrap: wrap;
	gap: 5px;
}

.menue>a {
	padding: 5px 10px;
	background-color: rgba(28,34,48,1);
	border: 1px solid #A6B1BD;
}

.menue>a:hover {
	background-color: rgba(40,165,0,1);
	color: white;
}

/* Rechts aussen: Begruessung und An- beziehungsweise Abmeldung. Die
   margin-left-Regel haelt den Bereich auch dann rechts, wenn links kein
   Menue steht - etwa fuer nicht angemeldete Besucher. */
.anmeldung {
	margin-left: auto;
	display: flex;
	align-items: center;
	gap: 10px;
}

.anmeldung>a:hover {
	color: rgba(40,165,0,1);
}

/* Das Avatar vor der Begruessung: fuehrt zum Kontoprofil am Anmeldedienst.
   Rund, im Rahmen der Menuepunkte, beim Ueberfahren im Gruen der Seite. */
.anmeldung>a.avatar {
	display: inline-flex;
	align-items: flex-end;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	border: 1px solid #A6B1BD;
	background-color: rgba(28,34,48,1);
	color: #A6B1BD;
	overflow: hidden;
}

.anmeldung>a.avatar:hover,
.anmeldung>a.avatar:focus-visible {
	border-color: rgba(40,165,0,1);
	background-color: rgba(40,165,0,1);
	color: white;
}

h2 {
	margin-top: 0;
}




@media screen and (max-width: 800px) { 

	article {
		padding-left: 5%;
	}

	section {
		width: 85%;
		margin-left: 5%;
	}

	.heady {
		font-size: 2em;
	}

}

@media screen and (max-width: 400px) { 
	article {
		padding-left: 2%;
	}
	
	section {
		width: 95%;
		margin-left: 2%;
	}
}