/*
 * Optometrie Online — die gemeinsamen Bausteine.
 *
 * Diese Datei ist der Kern der Gestaltungsentscheidung vom 25.08.2026:
 * „Gleiches Erscheinungsbild" heißt nicht dieselbe Farbe, sondern dieselbe
 * BAUFORM. Jede Kachel — Frage, Verzeichniseintrag, Stellenanzeige, Termin —
 * folgt demselben Aufbau: Titel, eine Zeile Herkunft, ein Satz Inhalt, unten
 * Marken.
 *
 * Ein neues Modul erbt diese Bausteine, statt sich eigene auszudenken. Das ist
 * die Lehre aus der Answer-Woche, in der jeder Dienst seine eigene Vorstellung
 * mitbrachte und die Nähte einzeln geflickt werden mussten.
 *
 * Alles Modulspezifische gehört NICHT hierher.
 */

:root {
	/* Farben. Marine als Leitfarbe, wie im bisherigen Auftritt. */
	--oo-ink: #1a1d23;
	--oo-ink-soft: #4a5568;
	--oo-ink-quiet: #8a94a6;
	--oo-navy: #1e2a3a;
	--oo-line: #edeff2;
	--oo-line-strong: #e3e7eb;
	--oo-surface: #ffffff;
	--oo-surface-quiet: #fbfbfc;
	--oo-tag-bg: #f3f5f8;
	--oo-tag-ink: #5a6472;
	--oo-link: #1e5aa8;

	/*
	 * Abstände. Die Entscheidung war „A, aber luftiger" — gegenüber dem
	 * bisherigen Auftritt jeweils deutlich mehr Raum:
	 * Innenabstand 10 → 18, Kartenabstand 6 → 14, Zeilenhöhe 1,45 → 1,7.
	 */
	--oo-card-padding: 18px;
	--oo-card-gap: 14px;
	--oo-radius: 12px;
	--oo-radius-small: 6px;
	--oo-line-height: 1.7;

	/*
	 * Breite.
	 *
	 * Zunächst auf 1500 px gesetzt und wieder zurückgenommen: Bei dieser
	 * Breite stand in jeder Zeile der Titel ganz links und „Beiträge/
	 * Ansichten" ganz rechts, mit über 1.200 px Leere dazwischen. Der
	 * Weißraum war damit nicht verschwunden, sondern nur von außen nach
	 * innen gewandert.
	 *
	 * 1320 px ist der Punkt, an dem beides stimmt: Die Ränder sind schmal,
	 * und die Zeile bleibt als Einheit lesbar.
	 */
	--oo-wide: 1320px;
}

/*
 * Systemschriften statt einer geladenen Schrift.
 *
 * Für Optometrie Online gilt: keine Anfrage verlässt zur Laufzeit den Server.
 * Eine eigene Schrift ist damit nicht ausgeschlossen, muss aber lokal liegen —
 * das ist noch offen. Bis dahin der System-Stack; er kostet nichts und ist auf
 * jedem Gerät sofort da.
 */
body {
	font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	color: var(--oo-ink);
}

/*
 * Die gemeinsame Kachel. Bewusst als eigene Klasse und nicht an ein Modul
 * gebunden: Forum, Verzeichnis, Jobbörse und Kalender greifen alle hierauf zu.
 */
.oo-card {
	box-sizing: border-box;
	padding: var(--oo-card-padding);
	border: 1px solid var(--oo-line);
	border-radius: var(--oo-radius);
	background: var(--oo-surface);
}

.oo-card + .oo-card {
	margin-top: var(--oo-card-gap);
}

.oo-card__title {
	margin: 0;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.45;
	color: var(--oo-ink);
}

.oo-card__origin {
	margin-top: 8px;
	font-size: 11px;
	line-height: 1.6;
	color: var(--oo-ink-quiet);
}

.oo-card__body {
	margin-top: 10px;
	font-size: 12px;
	line-height: var(--oo-line-height);
	color: var(--oo-ink-soft);
}

.oo-card__tags {
	margin-top: 12px;
}

/* Marken — Schlagwörter, Fristen, Orte. Überall dieselbe Form. */
.oo-tag {
	display: inline-block;
	margin-right: 5px;
	padding: 4px 9px;
	border-radius: var(--oo-radius-small);
	background: var(--oo-tag-bg);
	font-size: 10px;
	color: var(--oo-tag-ink);
	text-decoration: none;
}

/*
 * Sichtbarer Tastaturfokus.
 *
 * Blocksy bringt einen mit; hier wird er auf die eigene Leitfarbe gebracht und
 * zugleich sichergestellt, dass er nirgends verloren geht. Wer mit der Tastatur
 * navigiert, muss sehen, wo er ist.
 */
:focus-visible {
	outline: 3px solid var(--oo-navy);
	outline-offset: 2px;
}