@import url('fonts/permanent-marker.css');

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

html, body {
	height: 100%;
	font-family: 'Permanent Marker', Arial, Helvetica, sans-serif;
}

body {
	background: url("../images/background_2362x1440.jpg") no-repeat center center fixed;
	background-size: cover;
}

.container {
	display: flex;
	justify-content: center;
	align-items: center;
	min-height: 100vh;
	padding: 20px;
	width: 100%;
}

.content {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 20px;
}

/* Automatische Verkleinerung: Ist das Fenster schmaler als die Design-Breite
   (1400px Glaskasten + 2x20px Rand), wird der komplette Inhalt stufenlos
   proportional herunterskaliert - wie manuelles Heraus-Zoomen im Browser.
   tan(atan2(a, b)) liefert das einheitenlose Verhaeltnis a/b.
   Seiten mit schmalerem Glaskasten koennen --zoom-design-breite ueberschreiben.
   Wichtig: auf .container, nicht .content - im eingeloggten Zustand gibt es
   auf mehreren Seiten keinen .content-Wrapper. Dialoge/Overlays liegen
   ausserhalb von .container und bleiben unskaliert.
   Nur fuer den Bildschirm - Ausdrucke bleiben unskaliert. */
@media screen {
	:root {
		--auto-zoom: min(1, tan(atan2(100vw, var(--zoom-design-breite, 1440px))));
	}

	.container {
		zoom: var(--auto-zoom);
		/* vh-Angaben werden vom Zoom mitskaliert - Mindesthoehe wieder
		   hochrechnen, damit der Glaskasten vertikal zentriert bleibt */
		min-height: calc(100vh / var(--auto-zoom));
	}

	/* Dialoge liegen im DOM ausserhalb von .container
	   und muessen deshalb separat mitgezoomt werden.
	   (Nur die Wurzel-Elemente der Dialoge auffuehren - verschachtelte
	   Elemente wuerden doppelt zoomen!) */
	.dialog,
	.dialog-bearbeiten,
	.dialog-benutzer,
	.dialog-danke,
	.dialog-einstellungen,
	.dialog-infos,
	.dialog-spenden {
		zoom: var(--auto-zoom);
	}
}