/*
 * GOSU 2026 — Basis.
 *
 * Reset, Typografie, Formulare, Buttons. Alles über Tokens aus tokens.css;
 * ein Farbwert oder eine Schriftgröße als Literal ist hier ein Fehler.
 *
 * Kein !important. Wenn eine Regel eines braucht, stimmt die Reihenfolge nicht.
 */

/* ---------- Reset ---------------------------------------- */

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

html { -webkit-text-size-adjust: 100%; }

/* Kein systemeigenes Tap-Highlight; der Ersatz steht bei den Links. */
html { -webkit-tap-highlight-color: transparent; }

body {
	margin: 0;
	background: var(--gosu-paper);
	color: var(--gosu-ink);
	font-family: var(--gosu-body);
	font-size: var(--gosu-size-base);
	line-height: var(--gosu-leading);
	-webkit-font-smoothing: antialiased;
}

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

/* ---------- Typografie ----------------------------------- */

h1, h2, h3, h4 {
	margin: 0;
	font-family: var(--gosu-display);
	font-weight: 400;
	line-height: .95;
	text-transform: uppercase;
	text-wrap: balance;
}

/* Groessen aus der Staffel in tokens.css — siehe dort die Begruendung. */
h1 { font-size: var(--h-page); }
h2 { font-size: var(--h-sec); }
h3 { font-size: var(--h-sub); }
h4 {
	font-family: var(--gosu-ui);
	font-weight: 700;
	font-size: 11px;
	letter-spacing: .16em;
	line-height: 1.4;
	color: var(--gosu-muted);
}

p { margin: 0 0 var(--gosu-space-5); }
p:last-child { margin-bottom: 0; }

/* Laufweite. 65 Zeichen ist die Grenze, ab der Zeilen schwer zu verfolgen sind. */
.gosu-prose { max-width: 65ch; }

a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 2px;
	text-decoration-thickness: 1px;
}
a:hover { text-decoration-thickness: 2px; }

:focus-visible {
	outline: 2px solid var(--gosu-red);
	outline-offset: 3px;
}

.gosu-kicker {
	font-family: var(--gosu-ui);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--gosu-muted);
}

code, kbd, samp {
	font-family: var(--gosu-mono);
	font-size: .86em;
}

/* Zahlen, die untereinander stehen, sollen auch untereinander stehen. */
table, .gosu-num { font-variant-numeric: tabular-nums; }

/* ---------- Maß ------------------------------------------ */

.gosu-wrap {
	max-width: calc(var(--gosu-wrap) + (var(--gosu-gutter) * 2));
	margin-inline: auto;
	padding-inline: var(--gosu-gutter);
}

/* Breite Inhalte scrollen in sich, nie der Seitenkörper. */
.gosu-scroll-x { overflow-x: auto; }

/* ---------- Buttons -------------------------------------- */

.btn {
	display: inline-flex;
	align-items: center;
	gap: var(--gosu-space-2);
	font-family: var(--gosu-ui);
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: .09em;
	text-transform: uppercase;
	text-decoration: none;
	padding: 13px 20px;
	border: var(--gosu-border) solid var(--gosu-ink);
	background: transparent;
	color: var(--gosu-ink);
	cursor: pointer;
	transition: background .16s, color .16s;
}
.btn:hover {
	background: var(--gosu-ink);
	color: var(--gosu-paper);
	text-decoration: none;
}
.btn--red {
	background: var(--gosu-red);
	border-color: var(--gosu-red);
	color: var(--gosu-red-text);
}
.btn--red:hover {
	background: var(--gosu-red-hover);
	border-color: var(--gosu-red-hover);
	color: var(--gosu-red-text);
}
.btn--sm { padding: 8px 13px; font-size: 11px; }

/* ---------- Formulare ------------------------------------ */

form { display: grid; gap: var(--gosu-space-3); }

label {
	font-family: var(--gosu-ui);
	font-size: 12.5px;
	font-weight: 600;
	display: block;
	margin-bottom: var(--gosu-space-1);
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="url"],
textarea {
	width: 100%;
	padding: 13px 15px;
	border: var(--gosu-border) solid var(--gosu-ink);
	background: var(--gosu-paper);
	font-family: var(--gosu-mono);
	font-size: 13.5px;
	color: var(--gosu-ink);
}
input::placeholder,
textarea::placeholder { color: var(--gosu-muted); }

.gosu-hint {
	display: block;
	font-family: var(--gosu-ui);
	font-size: 11.5px;
	color: var(--gosu-muted);
	margin-top: var(--gosu-space-1);
}

.gosu-check label {
	display: flex;
	align-items: flex-start;
	gap: var(--gosu-space-2);
	font-weight: 400;
	margin-bottom: 0;
}

/*
 * Honeypot aus inc/registration.php.
 *
 * Nicht display:none — Formularroboter überspringen ausgeblendete Felder oft
 * gezielt. Das Feld bleibt im Layout, liegt aber außerhalb des Sichtfelds und
 * ist per aria-hidden und tabindex="-1" für Screenreader und Tastatur weg.
 */
.gosu-trap {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* ---------- Meldungen ------------------------------------ */

.gosu-errors,
.gosu-success,
.gosu-note {
	font-family: var(--gosu-ui);
	font-size: 14px;
	padding: var(--gosu-space-3) var(--gosu-space-4);
	border: var(--gosu-border) solid var(--gosu-rule);
	background: var(--gosu-card);
	margin: 0 0 var(--gosu-space-5);
}
.gosu-errors {
	border-color: var(--gosu-red);
	list-style: none;
	padding-left: var(--gosu-space-4);
}
.gosu-errors li + li { margin-top: var(--gosu-space-2); }
.gosu-success { border-color: var(--gosu-green); }

/* ---------- Bewegung ------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
	}
}