/*
 * 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;

	/*
	 * Der gedämpfte Ton — Verfasser, Datum, Zahlen, Spaltenköpfe.
	 *
	 * Stand bis zum 29.08.2026 auf #8a94a6. Nachgemessen sind das 3,06:1
	 * gegen Weiß; WCAG AA verlangt für Normaltext 4,5:1. Weil in dieser
	 * Farbe durchweg 12px-Text steht, ist auch die Ausnahme für großen
	 * Text (3:1 ab 18,66px fett bzw. 24px) nicht einschlägig.
	 *
	 * #6b7484 hält den bläulich-grauen Farbton und kommt auf 4,71:1.
	 * Gegen die getönte Fläche --oo-tag-bg (#f3f5f8) sind es 4,31:1 —
	 * dort steht heute kein Text in dieser Farbe; wer das ändert, misst
	 * vorher nach.
	 */
	--oo-ink-quiet: #6b7484;
	--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;

	/*
	 * Die Akzentfarbe für Handlungen — „Thema erstellen", später „Eintrag
	 * anlegen", „Stelle ausschreiben". Ein gedecktes Backsteinrot: warm genug,
	 * um sich vom Marine der Kopfleiste abzuheben, dunkel genug für weiße
	 * Schrift.
	 *
	 * Nachgerechnet: 6,82:1 gegen Weiß. wpForos eigenes Blau (#4a9fd8) kam auf
	 * 2,90:1 und lag damit unter dem Mindestwert von 4,5:1 — der Knopf war
	 * nicht nur fremd, sondern schlecht lesbar.
	 */
	--oo-accent: #9c3a3a;
	--oo-accent-dark: #832f2f;

	/*
	 * 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);
}

/*
 * Verweise.
 *
 * Ohne diese Regeln nimmt der Browser sein Standardblau mit Unterstrich. Das
 * fiel erst beim Verzeichnis auf: Das Forum bringt eigene Verweisfarben mit,
 * eigene Module aber nicht — und dann stehen zwei Blautöne nebeneinander.
 *
 * Unterstrichen wird beim Überfahren, nicht dauerhaft: In einer Liste aus
 * lauter Verweisen wird sonst jede Zeile zur Girlande.
 */
a {
	color: var(--oo-link);
	text-decoration: none;
}

a:hover,
a:focus-visible {
	text-decoration: underline;
}

/*
 * Im Fließtext bleibt der Unterstrich. Dort ist ein Verweis die Ausnahme und
 * soll als solche erkennbar sein, auch ohne Farbe wahrzunehmen — Farbe allein
 * darf nie der einzige Träger einer Information sein.
 *
 * Nur direkte Absätze und Listen ohne Klasse: Der Seiteninhalt trägt auch
 * ganze Module — Verzeichniskacheln und die Bereiche der Startseite laufen
 * durch the_content(). Eine Regel auf „.oo-content a" unterstrich dort jeden
 * Namen, „.oo-content > ul a" jeden Bereichstitel; aus der Liste wurde eine
 * Girlande. Das :not([class]) trifft echten Fließtext und lässt Module in Ruhe.
 */
.oo-content > p a,
.oo-content > ul:not([class]) a,
.oo-content > ol:not([class]) a,
.wpforo-post-content a {
	text-decoration: underline;
}

/*
 * 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;
}


/* ------------------------------------------------ Bereiche auf der Startseite */

/*
 * Die Fachgebiete als Raster. Zwei bis vier Spalten je nach Platz — feste
 * Spaltenzahlen brächten auf halbbreiten Fenstern entweder Gedränge oder Leere.
 *
 * Das `max-width` unten wirkt praktisch nie: Der Inhaltsbereich der Startseite
 * ist auf Lesebreite gehalten und damit ohnehin schmaler. Auf üblichen
 * Fenstern ergeben sich drei Spalten, bei acht Fachgebieten also eine letzte
 * Reihe mit zwei Kacheln. Vier Spalten gäbe es nur, wenn das Raster aus der
 * Textbreite ausbräche — das wäre eine Gestaltungsentscheidung, keine
 * Feinheit, und ist bewusst nicht getroffen.
 */
.oo-sections {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: var(--oo-card-gap);
	margin: 24px 0 0;
	padding: 0;
	list-style: none;
	max-width: 900px;
}

/*
 * Im Raster darf kein margin-top stehen: „.oo-card + .oo-card" aus den
 * gemeinsamen Bausteinen schob sonst jede Kachel außer der ersten nach unten,
 * und die Reihen standen versetzt.
 */
.oo-sections__item,
.oo-sections .oo-card + .oo-card {
	margin: 0;
}

.oo-sections__item .oo-card__title {
	font-size: 15px;
}

/* Der einleitende Satz einer Seite trägt etwas mehr Gewicht als der Fließtext. */
.oo-lead {
	font-size: 17px;
	line-height: 1.6;
	color: var(--oo-ink);
}

/* ==========================================================================
   Fragen, die auf eine Antwort warten
   --------------------------------------------------------------------------
   Der Kasten steht auf der Startseite an erster Stelle, die vollständige Liste
   unter /unbeantwortet/. Beide benutzen dieselbe Zeilenform: Titel, darunter
   Fachgebiet und Datum in einer ruhigen Zeile.
   ========================================================================== */

/*
 * Ein Strich in der Akzentfarbe, sonst eine gewöhnliche Kachel.
 *
 * Bewusst kein Warnrot und kein Ausrufezeichen: Es ist keine Störung, sondern
 * eine Bitte. Wer hier steht, hat gefragt und nichts bekommen — das trägt sich
 * selbst und braucht keine Dringlichkeitsfarbe.
 */
.oo-waiting-box {
	border-left: 3px solid var(--oo-accent);
}

.oo-waiting {
	margin: 12px 0 0;
	padding: 0;
	list-style: none;
}

.oo-waiting__entry + .oo-waiting__entry {
	margin-top: 10px;
	padding-top: 10px;
	border-top: 1px solid var(--oo-line);
}

.oo-waiting__title {
	display: block;
	font-size: 15px;
	line-height: 1.45;
	color: var(--oo-link);
	text-decoration: none;
}

.oo-waiting__title:hover {
	text-decoration: underline;
}

/*
 * Fachgebiet und Datum in einer Zeile darunter. Das Datum steht dabei
 * absichtlich mit: Bei einer Frage von 2011 soll niemand erst nach dem
 * Klicken merken, wie alt sie ist.
 */
.oo-waiting__origin {
	display: block;
	margin-top: 3px;
	font-size: 12px;
	color: var(--oo-ink-quiet);
}

.oo-waiting__area::after {
	content: " · ";
}

/*
 * Auszug und Aufrufzahl — dieselben Klassen wie in der Themenliste
 * (`.oo-topic-excerpt`, `.oo-topic-stats`), dort gesetzt in `forum.css`.
 *
 * Eine zweite Definition, keine gemeinsame: `forum.css` hängt an
 * `optometrie_is_forum()` und lädt nur auf echten wpForo-Seiten (siehe
 * `functions.php`). `/unanswered/` ist eine gewöhnliche WordPress-Seite —
 * dort kommt `forum.css` nie an, gleich wie der Selektor darin lautet. Erst
 * am ausgelieferten `<link>`-Kopf sichtbar, nicht an der Regel selbst: Ein
 * Blick in die Werkzeuge zeigte `optometrie-forum` schlicht als fehlend.
 * Deshalb hier, in der immer geladenen `base.css`, dieselben Werte.
 */
.oo-waiting .oo-topic-excerpt {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	margin: 8px 0 0;
	max-width: 80ch;
	font-size: 13px;
	line-height: var(--oo-line-height);
	color: var(--oo-ink-soft);
}

.oo-waiting .oo-topic-stats {
	margin: 10px 0 0;
	font-size: 12px;
	color: var(--oo-ink-quiet);
	font-variant-numeric: tabular-nums;
}

.oo-waiting__summary {
	margin: 0 0 16px;
	color: var(--oo-ink-soft);
}

.oo-waiting__more {
	margin: 14px 0 0;
	font-size: 13px;
}

.oo-waiting__pagination {
	margin-top: 20px;
	font-size: 14px;
}

.oo-waiting__pagination .page-numbers {
	display: inline-block;
	padding: 5px 10px;
	border: 1px solid var(--oo-line-strong, var(--oo-line));
	border-radius: var(--oo-radius-small, 6px);
	color: var(--oo-link);
	text-decoration: none;
}

.oo-waiting__pagination .page-numbers + .page-numbers {
	margin-left: 4px;
}

.oo-waiting__pagination .page-numbers.current {
	color: var(--oo-ink);
	background: var(--oo-surface-quiet, #fbfbfc);
	font-weight: 600;
}

/* ==========================================================================
   Die Listenzeile
   --------------------------------------------------------------------------
   Ein Thema in einer Liste. Sie erscheint auf drei Bildschirmen — in der
   Forenuebersicht, in der Themenliste und bei den offenen Fragen — und war
   dreimal verschieden gesetzt: der Titel einmal 16px, einmal 15px.

   **Ein Regelblock, mehrere Herkuenfte.** wpForos Vorlagen gehoeren uns
   nicht: Seine Zeilen tragen `wpforo-topic-title`, unsere eigene Liste
   `oo-waiting__title`. Ein gemeinsames HTML hiesse, seine Vorlagen zu
   kopieren — und dann geht bei jedem Update auseinander, was heute
   zusammenpasst. Deshalb nennt jede Regel hier beide Welten.

   Die Klassen sind am ausgelieferten HTML gemessen, nicht aus wpForos
   Vorlagen gelesen: Dort stehen die des classic-Themes, und hier laeuft das
   2026er. Wer sie aendert, misst vorher nach.
   ========================================================================== */

/*
 * Zwei Werte hier, zwei verschiedene Gegner.
 *
 * Die Schriftgröße kommt bewusst NICHT aus dieser Regel, sondern aus der
 * Datenbank: wpForo schreibt sich bei jedem Seitenaufruf selbst eine
 * !important-Regel auf denselben Selektor, erzeugt in
 * wp-content/uploads/wpforo/assets/colors.css, gespeist aus der
 * wp_options-Zeile `wpforo_styles_2026` (Feld `font_size_topic`).
 *
 * Der Name verrät die Falle: Naheliegend wäre `wpforo_styles_2022`, weil
 * das 2026er-Theme intern lange als "2022" geführt wurde — die Option
 * dieses Namens existiert auch tatsächlich in der Datenbank, ist auf
 * dieser Installation aber ein unbenutzter Rest. Nachgemessen (29.08.2026):
 * `WPF()->tpl->theme` liefert hier `"2026"`, also zieht wpForo aus
 * `wpforo_styles_2026`. Bevor diese Zeile in der DB existierte, griff der
 * Codevorgabewert 16 aus `Settings::$_styles` — ebenfalls 16, ebenfalls
 * !important.
 *
 * Die Option steht jetzt auf 15, ein `font-size` hier wäre also nur toter
 * Code, der ohnehin von `!important` überstimmt würde. Wer die Themenliste
 * künftig im wpForo-Backend unter Design/Schriftgrößen auf einen anderen
 * Wert stellt, hebelt die Datenbankseite dieser Abmachung aus, ohne dass
 * der Unterschied irgendwo auffällt — Option und keine eigene Regel
 * gehören zusammen.
 *
 * Die Farbe dagegen kommt aus dieser Regel — und brauchte dafür eine
 * zweite ID. `colors.css` setzt außerdem (ohne !important):
 *   #wpforo #wpforo-wrap a { color: … }
 * Spezifität (0,2,0,1). `.oo-forum #wpforo .wpforo-topic-title a` kam nur
 * auf (0,1,2,1) und verlor trotz mehr Klassen, weil IDs vor Klassen
 * zählen. Deshalb steht hier `#wpforo-wrap` mit im Selektor — genau das
 * Muster, das `forum.css` in diesem Theme ohnehin durchgehend benutzt.
 *
 * Der Wert hinter jenem `a` war lange wpForos eigenes #3f7796. Seit dem
 * 29.08.2026 führt wpForos Palette dort `--oo-link` (#1e5aa8), gesetzt in
 * der Option `wpforo_styles_2026`, nicht in dieser Datei. Die Regel hier
 * bleibt trotzdem stehen: Sie hält Titel und Schriftgröße zusammen und
 * überlebt ein Zurücknehmen der Palette.
 */
.oo-waiting__title,
.oo-forum #wpforo #wpforo-wrap .wpforo-topic-title a {
	display: block;
	font-size: 15px;
	line-height: 1.45;
	color: var(--oo-link);
	text-decoration: none;
}

.oo-waiting__title:hover,
.oo-forum #wpforo #wpforo-wrap .wpforo-topic-title a:hover {
	text-decoration: underline;
}

/* Verfasser und Datum. Eine Zeile, ruhig gesetzt, direkt unter dem Titel. */
.oo-waiting__origin,
.oo-forum #wpforo .wpforo-topic-start-info {
	display: block;
	margin-top: 3px;
	font-size: 12px;
	line-height: 1.5;
	color: var(--oo-ink-quiet);
}

/*
 * Dieselbe Zeile, ihre beiden Kinder — und zwei verschiedene Gegner.
 *
 * Das ausgelieferte HTML lautet (gemessen am 29.08.2026, nicht aus wpForos
 * Vorlagen gelesen):
 *   <div class="wpforo-topic-start-info wpfcl-2">
 *     <a href="/participant/…">Max25</a>
 *     <span class="wpforo-date wpforo-date-ago">, 13.05.2026</span>
 *   </div>
 *
 * Gegner 1 — der Verfasser: `colors.css` färbt JEDEN Verweis im Forum über
 * `#wpforo #wpforo-wrap a { color: … }` direkt ein. Eine Regel auf dem
 * Elternteil erreicht ein `a` nie, weil eine direkt zutreffende Deklaration
 * jeden geerbten Wert schlägt. Der Name stand deshalb blau neben einem
 * grauen Datum, obwohl die Zeile als Ganzes gesetzt war.
 *
 * Gegner 2 — das Datum: der Container trägt `wpfcl-2`, und `colors.css`
 * setzt dazu `color:#777777 !important`. Das schlägt die Regel oben. Der
 * `span` bekommt den Wert aber nur GEERBT — und Vererbung verliert gegen
 * jede direkte Deklaration, unabhängig von `!important` beim Elternteil.
 * Ein eigener Selektor auf den `span` genügt also; kein `!important` nötig.
 *
 * Beide Selektoren führen `#wpforo-wrap` mit: sonst reichen sie nicht an
 * die zwei IDs von `colors.css` heran (IDs zählen vor Klassen).
 */
.oo-forum #wpforo #wpforo-wrap .wpforo-topic-start-info a,
.oo-forum #wpforo #wpforo-wrap .wpforo-topic-start-info .wpforo-date {
	color: var(--oo-ink-quiet);
}

/*
 * Beim Überfahren muss der Name wieder als Verweis erkennbar sein — in Ruhe
 * ist er das jetzt nicht mehr, er sieht aus wie das Datum daneben.
 *
 * Zwei Signale zugleich, weil eines allein hier nicht trägt: die Linkfarbe
 * (Farbe allein genügt nicht) und der Unterstrich. Den Unterstrich schaltet
 * wpForo mit `#wpforo #wpforo-wrap a:hover { text-decoration: none }` (zwei
 * IDs) ab; dieser Selektor kommt mit seinen zwei IDs plus zwei Klassen
 * darüber.
 */
.oo-forum #wpforo #wpforo-wrap .wpforo-topic-start-info a:hover,
.oo-forum #wpforo #wpforo-wrap .wpforo-topic-start-info a:focus-visible {
	color: var(--oo-link);
	text-decoration: underline;
}

/*
 * Leermeldungen und Hinweise.
 *
 * **Warum hier und nicht im Verzeichnis-Plugin.** Bis zum 29.08.2026 stand
 * `.oo-notice` allein in `plugins/optometrie-directory/assets/directory.css`.
 * Dieses Stylesheet laedt nur, wo einer der Verzeichnis-Kurzbefehle steht —
 * auf `/unanswered/` also nicht (gemessen: 0 Treffer gegen 1 auf
 * `/directory/`). Die Leermeldung der offenen Fragen stand dort in
 * Grundschrift, ohne Flaeche, ohne Rand.
 *
 * Aufgefallen waere es an keinem guten Tag: Der Zweig laeuft nur, wenn keine
 * Frage mehr offen ist. Sichtbar wuerde der Fehler ausgerechnet dann, wenn
 * jemand die letzte beantwortet hat.
 *
 * Eine Hinweisform gehoert dem Theme, nicht einem einzelnen Plugin. Das
 * Plugin zeigt weiterhin darauf.
 *
 * Kein Ausrufezeichen und kein Warnrot: Eine leere Liste ist kein Fehler,
 * sondern eine Auskunft.
 *
 * **Bewusst ohne eigene Schriftgroesse oder Farbe.** Auf `/directory/
 * my-entry/` gab es vorher keine Regel dafuer — `.oo-notice` erbte dort
 * bereits 15px und die normale Textfarbe von `body`/`layout.css`. Eine hier
 * gesetzte `font-size: 14px` oder `color: var(--oo-ink-soft)` haette diese
 * bestehende, unveraenderte Stelle verschoben, statt sie in Ruhe zu lassen —
 * genau die Gegenprobe, die diese Regel bestehen muss.
 */
.oo-notice {
	padding: 10px 14px;
	margin-bottom: var(--oo-card-gap);
	background: var(--oo-surface-quiet);
	border-left: 3px solid var(--oo-line-strong);
	border-radius: var(--oo-radius-small, 6px);
}