/* Single stylesheet for all three pages.
 *
 * Deliberately one hand-written file, not a build output: the site is three
 * static pages that change rarely, so a toolchain would add a moving part
 * without buying anything. Every asset is local — no external requests at all,
 * which keeps the pages fast without a CDN in front (this site is served
 * straight from Caddy) and keeps Google Fonts out of a German site, where
 * hotlinking them is a documented legal risk.
 */

/* Montserrat, self-hosted — the typeface the WordPress site used, which it
 * pulled from Google Fonts. Google now ships Montserrat as a *variable* font,
 * so this single 35 KB file covers the whole 100–900 range rather than needing
 * one download per weight.
 *
 * Only the `latin` subset is here. Every one of the 76 distinct characters the
 * three pages render falls inside it — including ÄÖÜäöüß, §, €, © and the en
 * dash — so the other four subsets Google offers would be dead weight. Should
 * a character outside the range ever appear, that glyph degrades to the
 * fallback stack rather than breaking.
 *
 * Source: Google Fonts Montserrat v31, SIL Open Font License 1.1. The licence
 * travels with the font in MONTSERRAT-OFL.txt, as the OFL requires.
 */
@font-face {
	font-family: "Montserrat";
	font-style: normal;
	font-weight: 100 900;
	/* swap, not block: the text is the point of these pages, so it should be
	   readable in the fallback face from the first paint. */
	font-display: swap;
	src: url("/assets/montserrat-latin-var.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;
}

:root {
	/* Palette read off the WordPress original rather than picked fresh, so the
	   static pages land on the same off-white the site has today: #f9f9f9
	   ground, #404040 body copy, #1c1c1c headings. */
	--bg: #f9f9f9;
	--bg-raised: #f1f1f1;
	--fg: #1c1c1c;
	--fg-muted: #404040;
	--rule: #e2e2e2;
	/* Page width. Paired with the 18px base size below, this lands the AGB —
	   by far the longest page — on 76 characters a line on average and 87 at
	   the widest, inside the 60–80 band that reads comfortably. Both numbers
	   were measured in the browser, not estimated: at 16px/1000px the same
	   text ran to 94 and 107. */
	--measure: 920px;
}

*,
*::before,
*::after { box-sizing: border-box; }

html {
	-webkit-text-size-adjust: 100%;
	/* 18px base, expressed as a percentage of the browser's own default rather
	   than a hard pixel value — someone who has raised their default font size
	   still gets the increase, instead of having it overridden. At the usual
	   16px default this computes to exactly 18px. */
	font-size: 112.5%;
}

body {
	margin: 0;
	background: var(--bg);
	color: var(--fg-muted);
	font-family: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	font-size: 1rem;
	line-height: 1.7;
	/* Flex column with a growing <main> pins the footer to the bottom of the
	   viewport on the short home page without position: fixed. */
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

img {
	max-width: 100%;
	height: auto;
}

a {
	color: var(--fg);
	text-underline-offset: 0.2em;
}
a:hover,
a:focus-visible { color: #000; }

:focus-visible {
	outline: 2px solid #1c1c1c;
	outline-offset: 2px;
}

.wrap {
	width: 100%;
	max-width: var(--measure);
	margin-inline: auto;
	padding-inline: 1.5rem;
}

/* --- Header ------------------------------------------------------------- */

.site-header {
	border-bottom: 1px solid var(--rule);
	padding-block: 1.25rem;
}

.site-header .wrap {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem 1.5rem;
	align-items: baseline;
	justify-content: space-between;
}

.brand {
	font-size: 1.05rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--fg);
	text-decoration: none;
}

.site-nav {
	display: flex;
	gap: 1.25rem;
	font-size: 0.9rem;
}

.site-nav a { text-decoration: none; }
.site-nav a:hover { text-decoration: underline; }

/* The current page is marked up with aria-current and styled as plain text,
   so it reads as "you are here" instead of as a link back to itself. */
.site-nav [aria-current="page"] {
	color: #8a8a8a;
	cursor: default;
}

/* --- Main --------------------------------------------------------------- */

main { flex: 1; }

.hero {
	padding-block: clamp(2.5rem, 9vh, 5rem);
	text-align: center;
}

/* The logo file carries the wordmark and the tagline as artwork, so it *is*
   the top-level heading here — the <h1> wraps it and the alt text supplies the
   words. A separate text heading would only duplicate them. */
.hero h1 {
	margin: 0;
	font-size: 1rem;
}

.hero h1 img {
	width: 100%;
	max-width: 40rem;
}

.hero .rule {
	width: 3.5rem;
	height: 1px;
	margin: 2.5rem auto;
	border: 0;
	background: #cfcfcf;
}

.notice {
	margin: 0 auto;
	max-width: 30rem;
}

/* --- Social links ------------------------------------------------------- */

.social {
	display: flex;
	gap: 1.5rem;
	align-items: center;
}

.social a {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	text-decoration: none;
}

.social a:hover { text-decoration: underline; }

/* Fixed box so the two brand marks — which ship at different sizes and with
   different padding baked in — end up optically equal next to each other. */
.social img {
	width: 1.1rem;
	height: 1.1rem;
	object-fit: contain;
}

/* --- Legal pages -------------------------------------------------------- */

.legal {
	padding-block: 2.5rem 4rem;
}

.legal h1 {
	margin: 0 0 2rem;
	font-size: clamp(1.5rem, 5vw, 2rem);
	font-weight: 600;
	letter-spacing: 0.06em;
	color: var(--fg);
}

.legal h2 {
	margin: 2.5rem 0 0.75rem;
	padding-bottom: 0.4rem;
	border-bottom: 1px solid var(--rule);
	font-size: 0.95rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--fg);
}

.legal h3 {
	margin: 1.75rem 0 0.5rem;
	font-size: 1rem;
	font-weight: 600;
	color: var(--fg);
}

.legal p {
	margin: 0 0 1rem;
}

/* The AGB number their clauses in the source text ("1.1 …"); a hanging indent
   keeps that number in the margin so the numbering stays scannable. */
.legal .clause {
	padding-left: 2.25rem;
	text-indent: -2.25rem;
}

.legal address {
	font-style: normal;
	margin: 0 0 1rem;
}

/* --- Footer ------------------------------------------------------------- */

.site-footer {
	border-top: 1px solid var(--rule);
	background: var(--bg-raised);
	padding-block: 1.5rem;
	font-size: 0.85rem;
}

.site-footer .wrap {
	display: flex;
	flex-wrap: wrap;
	/* Column gap deliberately wider than the gap *inside* the social and legal
	   groups, so the two read as two groups rather than one run of links. */
	gap: 0.5rem 2.5rem;
	justify-content: space-between;
	/* Centre both children on one line. Without this the <p> keeps its default
	   block margins while the <nav> has none, which dropped the copyright a few
	   pixels below the links. */
	align-items: center;
}

.site-footer p {
	margin: 0;
	/* Absorbs the leftover width so the social and legal groups stay together
	   on the right instead of drifting apart as the viewport grows. */
	margin-right: auto;
}

.site-footer nav {
	display: flex;
	gap: 1.25rem;
}

@media (prefers-reduced-motion: no-preference) {
	html { scroll-behavior: smooth; }
}