/* ===================================================================
   Gemeinsames Aussehen der Rechtstexte
   ===================================================================
   Impressum, Datenschutzerklaerung und AGB teilen sich diese Datei,
   damit eine Aenderung am Erscheinungsbild nicht an drei Stellen
   nachgezogen werden muss.

   Bewusst reines CSS ohne Tailwind: diese drei Seiten sind Fliesstext.
   Tailwind einzubinden hiesse, fuer jede von ihnen 400 KB JavaScript zu
   laden - fuer ein Impressum, das im Zweifel von einer Aufsichtsbehoerde
   oder einem Abmahnanwalt geoeffnet wird und schlicht lesbar sein muss.
   =================================================================== */

:root {
	--text: #1e293b;
	--text-leise: #64748b;
	--linie: #e2e8f0;
	--flaeche: #f8fafc;
	--akzent: #2563eb;
}

* {
	box-sizing: border-box;
}

body {
	margin: 0;
	font-family:
		system-ui,
		-apple-system,
		"Segoe UI",
		Roboto,
		"Helvetica Neue",
		Arial,
		sans-serif;
	background-color: var(--flaeche);
	color: var(--text);
	line-height: 1.7;
	-webkit-font-smoothing: antialiased;
}

/* --- Kopfzeile ---------------------------------------------------- */

.kopf {
	background: #fff;
	border-bottom: 1px solid var(--linie);
	position: sticky;
	top: 0;
	z-index: 10;
}

.kopf__inhalt {
	max-width: 48rem;
	margin: 0 auto;
	padding: 0 1.5rem;
	height: 4rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
}

.kopf__marke {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-weight: 700;
	font-size: 1.125rem;
	color: var(--text);
	text-decoration: none;
}

.kopf__marke svg {
	width: 1.75rem;
	height: 1.75rem;
	color: var(--akzent);
	flex-shrink: 0;
}

.kopf__zurueck {
	color: var(--text-leise);
	text-decoration: none;
	font-size: 0.875rem;
	white-space: nowrap;
}

.kopf__zurueck:hover {
	color: var(--akzent);
}

/* --- Inhalt ------------------------------------------------------- */

main {
	max-width: 48rem;
	margin: 0 auto;
	padding: 3rem 1.5rem 4rem;
}

h1 {
	font-size: 1.875rem;
	line-height: 1.3;
	margin: 0 0 2rem;
	color: #0f172a;
}

h2 {
	font-size: 1.125rem;
	margin: 2.5rem 0 0.75rem;
	color: #0f172a;
}

p {
	margin: 0 0 1rem;
}

a {
	color: var(--akzent);
}

.karte {
	background: #fff;
	border: 1px solid var(--linie);
	border-radius: 0.75rem;
	padding: 2rem;
}

/* Hinweiskasten fuer Angaben, die man beim Ueberfliegen nicht
   uebersehen soll - etwa den Ausschluss von Verbrauchern in den AGB. */
.hinweis {
	background: #fffbeb;
	border-left: 4px solid #f59e0b;
	border-radius: 0 0.375rem 0.375rem 0;
	padding: 1rem 1.25rem;
	margin: 1.5rem 0;
}

.hinweis p:last-child {
	margin-bottom: 0;
}

.stand {
	color: var(--text-leise);
	font-size: 0.875rem;
	margin-top: 2.5rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--linie);
}

/* Nur fuer Bildschirmleser: beschriftet Eingabefelder, die visuell bereits
   durch ihren Platzhalter erklaert sind. Ein Feld ohne Beschriftung ist fuer
   Bildschirmleser stumm - der Platzhalter allein zaehlt nicht. */
.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* --- Fusszeile ---------------------------------------------------- */

.fuss {
	border-top: 1px solid var(--linie);
	background: #fff;
	padding: 2rem 1.5rem;
}

.fuss__inhalt {
	max-width: 48rem;
	margin: 0 auto;
	display: flex;
	flex-wrap: wrap;
	gap: 1.5rem;
	justify-content: center;
	font-size: 0.875rem;
}

.fuss a {
	color: var(--text-leise);
	text-decoration: none;
}

.fuss a:hover {
	color: var(--akzent);
}

.fuss a[aria-current="page"] {
	color: var(--text);
	font-weight: 600;
}

@media (max-width: 640px) {
	.karte {
		padding: 1.5rem 1.25rem;
	}

	h1 {
		font-size: 1.5rem;
	}
}

/* ===================================================================
   Eingebettet in die Anwendung
   ===================================================================
   Die Anwendung unter dipla.org zeigt diese Seiten in einem Rahmen an,
   damit die Rechtstexte nur an dieser einen Stelle gepflegt werden
   muessen. Im Rahmen sind Kopf- und Fusszeile aber falsch: sie fuehren
   aus der Anwendung heraus auf die Startseite der Marke, und die
   Ueberschrift steht bereits im Titel des Fensters.

   Gesetzt wird die Klasse von einem Zweizeiler im Kopf jeder Seite
   (window.self !== window.top). Ohne JavaScript bleibt schlicht alles
   sichtbar - unschoen, aber vollstaendig lesbar. Das ist die richtige
   Richtung fuer einen Rechtstext. */
.eingebettet .kopf,
.eingebettet .fuss {
	display: none;
}

.eingebettet main {
	padding-top: 1rem;
}

.eingebettet h1 {
	/* Steht schon im Fenstertitel der Anwendung - hier nur noch kleiner
	   und leiser, damit der Bezug erhalten bleibt, ohne zu doppeln. */
	font-size: 1.25rem;
	color: var(--text-leise);
}