Epos: Wortmarke im Dunkelmodus per Filter aufhellen

2026-08-21T20:15:25Z

Wortmarke im Dunkelmodus per Filter aufhellen

← Nächstältere Version		Version vom 21. August 2026, 21:15 Uhr
Zeile 633:		Zeile 633:

	/* --------------------------------------------------------------------------		/* --------------------------------------------------------------------------
	Wortmarke: dunkle Fassung ~~auf hellen~~ Flaechen (Menue-Schublade, Fusszeile),		Wortmarke: In $wgLogos ist die dunkle Fassung hinterlegt (fuer helle
	~~helle Fassung im Dunkelmodus. Die Datei in $wgLogos ist die dunkle Fassung~~.		Flaechen wie Menue-Schublade und Fusszeile). Im Dunkelmodus wird sie
			per Filter auf Weiss gezogen.
	-------------------------------------------------------------------------- */		-------------------------------------------------------------------------- */
	html.skin-theme-clientpref-night .mw-logo-wordmark {		html.skin-theme-clientpref-night .mw-logo-wordmark {
	~~content~~: ~~url~~( ~~/assets/logo/epos-plan-wortmarke.svg~~ );		filter: brightness( 0 ) invert( 1 );
	}		}

	@media ( prefers-color-scheme: dark ) {		@media ( prefers-color-scheme: dark ) {
	html.skin-theme-clientpref-os .mw-logo-wordmark {		html.skin-theme-clientpref-os .mw-logo-wordmark {
	~~content~~: ~~url~~( ~~/assets/logo/epos-plan-wortmarke.svg~~ );		filter: brightness( 0 ) invert( 1 );
	}		}
	}		}

	/* Menue-Schublade und Suchfeld-Panel deckend zeichnen: Citizens Milchglas		/* Menue-Schublade und Suchfeld-Panel deckend zeichnen: Citizens Milchglas
	laesst den roten Kopfbereich durchscheinen, darunter leidet die Lesbarkeit. */		laesst den roten Kopfbereich durchscheinen, darunter leidet die Lesbarkeit. */

Epos: Wortmarke: helle Fassung nur im Dunkelmodus

2026-08-21T19:58:22Z

Wortmarke: helle Fassung nur im Dunkelmodus

@@ Zeile 629: / Zeile 629: @@
 	.citizen-page-header-inner {
 		padding-inline: 0;
+	}
+}

Epos: Citizen-Theming: Schrift Manrope, Markenrot als OKLCH, Kopfleiste, Karten-Layout, Inhaltsverzeichnis, Fußzeile

2026-08-21T17:40:00Z

Citizen-Theming: Schrift Manrope, Markenrot als OKLCH, Kopfleiste, Karten-Layout, Inhaltsverzeichnis, Fußzeile

Neue Seite

/* ==========================================================================
MediaWiki:Citizen.css — EPOS-Plan Dokumentation
Theming des Skins Citizen (StarCitizenTools) im Look von epos-plan.de.

Alle hier benutzten CSS-Variablen und Klassennamen sind gegen die
Citizen-Dokumentation (https://mwcitizen.skin/customization/theming,
/features/preferences, /reference/classes) und gegen den Quelltext von
Citizen 3.21 belegt:
resources/skins.citizen.tokens/tokens-theme-base.less (Farbtokens)
resources/skins.citizen.styles/tokens-citizen.less (Layouttokens)
resources/skins.citizen.styles/components/*.less (Klassennamen)
templates/*.mustache (HTML-Aufbau)
Stellen, die im Betrieb noch geprueft werden muessen, sind mit
"PRUEFEN" markiert.

Aufbau
1. Schrift Manrope
2. Markenfarbe als OKLCH
3. Farbflaechen, Text und Links — helle Darstellung
4. Dunkelmodus
5. Layoutmasse und Schriftgroessen
6. Kopfleiste
7. Inhalt als weisse Karte
8. Seitenkopf: Titel, Brotkrumen, Ueberschriften
9. Inhaltsverzeichnis "Auf dieser Seite"
10. Suche
11. Fusszeile
12. Hauptseite
13. Druck

Achtung: Die Farbwerte stehen hier bewusst noch einmal als Zahlen und
nicht nur als --epos-*-Variablen aus MediaWiki:Common.css. Grund: Diese
Datei bildet die Citizen-Tokens ab und muss auch dann stimmen, wenn
Common.css einmal nicht geladen wird. Bei Farbaenderungen also beide
Dateien anfassen.
========================================================================== */

/* --------------------------------------------------------------------------
1. Schrift Manrope (Variable Font, selbst gehostet)
Die Datei liegt ausserhalb des MediaWiki-Baums unter /assets/, damit ein
Update sie nicht ueberschreibt. Citizen ergaenzt system-ui/sans-serif und
die sprachspezifischen Fallbacks selbst — deshalb steht in
--font-family-citizen-base nur der Schriftname
(Citizen-Doku, customization/theming, Abschnitt "Typography").
-------------------------------------------------------------------------- */
@font-face {
font-family: 'Manrope';
font-style: normal;
font-weight: 200 800;
font-display: swap;
src: url( '/assets/fonts/manrope-variable.woff2' ) format( 'woff2' );
/* Bewusst ohne unicode-range: Die Datei soll immer geladen werden, und
Zeichen, die Manrope nicht kennt, holt der Browser ohnehin aus der
naechsten Schrift der Kette. Die gleichlautende Deklaration steht
auch in /assets/fonts/fonts.css — dort zur Nachnutzung ausserhalb
des Wikis; im Wiki gilt diese hier. */
}

:root {
--font-family-citizen-base: 'Manrope';
/* Fuer Code bleibt es bei einer System-Monospace; Roboto Mono liefert
Citizen nur ueber die eigene Schriftdatei aus, die wir nicht laden. */
--font-family-citizen-monospace: ui-monospace, 'SFMono-Regular', 'Consolas';
}

/* --------------------------------------------------------------------------
2. Markenfarbe als OKLCH
Citizen fuehrt seine Primaerfarbe ("progressive") als OKLCH-Tripel.
Umrechnung von #B5321F (sRGB -> linear -> XYZ D65 -> OKLab -> OKLCH):
L = 51.58 % C = 0.1707 H = 31.35
Rueckrechnung ergibt exakt #B5321F.
Zum Vergleich die uebrigen Markenrottoene:
#C0392B (Akzent) L 54.33 % C 0.1740 H 29.70
#8F2718 (Hover/besucht) L 43.54 % C 0.1420 H 31.29
#DD3333 (Signal) L 58.92 % C 0.2062 H 26.30
Kontraste: #B5321F auf Weiss 6,1:1 · Weiss auf #B5321F 6,1:1 ·
#B5321F auf #EEF1F5 5,4:1 · #8F2718 auf Weiss 8,5:1.
-------------------------------------------------------------------------- */
:root {
--color-progressive-oklch__l: 51.58%;
--color-progressive-oklch__c: 0.1707;
--color-progressive-oklch__h: 31.35;

/* HSL-Rueckfallebene fuer Browser ohne OKLCH. Citizen bezeichnet diese
Variablen als "soft-deprecated", sie werden aber weiterhin
ausgewertet, solange @supports not (color: oklch(...)) greift. */
--color-progressive-hsl__h: 9;
--color-progressive-hsl__s: 71%;
--color-progressive-hsl__l: 41%;
}

/* --------------------------------------------------------------------------
3. Flaechen, Text und Links — helle Darstellung
Citizen leitet Flaechen und Textfarben aus dem Farbton der Primaerfarbe
ab; mit einem roten Farbton wuerden alle Graustufen warm einfaerben.
Die Skizze verlangt aber kuehles Grau (#EEF1F5 / #FFFFFF / #1F2933),
deshalb werden die Flaechen hier fest gesetzt.
Der Block haengt an .skin-theme-clientpref-day bzw. -os (heller Fall),
damit der Dunkelmodus von Citizen unberuehrt bleibt
(Citizen-Doku, customization/theming, "Theme modes").
-------------------------------------------------------------------------- */
:root.skin-theme-clientpref-day,
:root.skin-theme-clientpref-os {
/* Flaechen */
--color-surface-0: #eef1f5; /* Seitenhintergrund */
--color-surface-1: #ffffff; /* Karten, Menues, Dialoge */
--color-surface-1--hover: #f5f7f9;
--color-surface-1--active: #e9edf2;
--color-surface-2: #f9fafb; /* erhoehte Flaechen in Karten */
--color-surface-2--hover: #f1f4f8;
--color-surface-2--active: #e6eaf0;
--color-surface-3: #eef1f5;
--color-surface-4: #e3e7ee;

/* Text */
--color-emphasized: #10161d; /* Ueberschriften */
--color-base: #1f2933; /* Fliesstext */
--color-subtle: #5b6572; /* Meta, Bildunterschriften */
--color-placeholder: #78818e;

/* Rahmen */
--border-color-base: #e3e6ea;
--border-color-subtle: #eef1f5;
--border-color-muted: #f3f5f8;
--border-color-interactive: #c5c8cc;
--border-color-interactive--hover: #adb1b7;
--border-color-interactive--active: #8f949b;

/* Links: Hover und besuchte Links werden dunkler, nicht heller.
Citizen wuerde sonst +4 % Helligkeit rechnen. */
--color-link: #b5321f;
--color-link--hover: #8f2718;
--color-link--active: #8f2718;
--color-visited: #8f2718;
--color-link--visited: #8f2718;

/* Basis fuer die maskierten Symbole der Bedienelemente */
--epos-icon-basis: rgba( 0, 0, 0, 0.6 );

/* Kopfleiste */
--epos-kopfleiste: #b5321f;
--epos-kopfleiste-aktiv: #8f2718;
}

/* --------------------------------------------------------------------------
4. Dunkelmodus
Der Dunkelmodus von Citizen bleibt bestehen. Angepasst werden nur
a) die Helligkeit der Primaerfarbe (heller, damit Links lesbar sind),
b) der Buntanteil der Graustufen (sonst faerben sie rotstichig ein),
c) die Kopfleiste (dunkles Rot statt Vollton).
Gemessene Kontraste auf --color-surface-1 (#0F0C0C):
Fliesstext 10,4:1 · Meta 7,2:1 · Links 6,9:1 · Ueberschriften 15,8:1.
Der Reinschwarz-Modus bleibt funktionsfaehig, weil hier nur der
Buntanteil (__c), nicht die Helligkeit (__l) der Flaechen gesetzt wird.
-------------------------------------------------------------------------- */
:root.skin-theme-clientpref-night {
--color-progressive-oklch__l: 70%;
--color-progressive-oklch__c: 0.15;

--color-surface-0-oklch__c: 0.004;
--color-surface-1-oklch__c: 0.005;
--color-surface-2-oklch__c: 0.006;
--color-surface-3-oklch__c: 0.008;
--color-surface-4-oklch__c: 0.01;
--color-emphasized-oklch__c: 0.006;
--color-base-oklch__c: 0.008;
--color-subtle-oklch__c: 0.01;

--color-link--hover: #f8907d;
--color-link--active: #f8907d;
--color-visited: #f8907d;
--color-link--visited: #f8907d;

--epos-icon-basis: rgba( 255, 255, 255, 0.72 );

--epos-kopfleiste: #52170e; /* Weiss darauf 14,1:1 */
--epos-kopfleiste-aktiv: #6b2214;
}

@media screen and ( prefers-color-scheme: dark ) {
:root.skin-theme-clientpref-os {
--color-progressive-oklch__l: 70%;
--color-progressive-oklch__c: 0.15;

/* Die hellen Festwerte aus Abschnitt 3 hier wieder loesen, damit
Citizen seine dunklen Flaechen berechnen kann. */
--color-surface-0: oklch( var( --color-surface-0-oklch__l ) var( --color-surface-0-oklch__c ) var( --color-progressive-oklch__h ) );
--color-surface-1: oklch( var( --color-surface-1-oklch__l ) var( --color-surface-1-oklch__c ) var( --color-progressive-oklch__h ) );
--color-surface-1--hover: oklch( calc( var( --color-surface-1-oklch__l ) + var( --delta-lightness-hover-state ) ) var( --color-surface-1-oklch__c ) var( --color-progressive-oklch__h ) );
--color-surface-1--active: oklch( calc( var( --color-surface-1-oklch__l ) + var( --delta-lightness-active-state ) ) var( --color-surface-1-oklch__c ) var( --color-progressive-oklch__h ) );
--color-surface-2: oklch( var( --color-surface-2-oklch__l ) var( --color-surface-2-oklch__c ) var( --color-progressive-oklch__h ) );
--color-surface-2--hover: oklch( calc( var( --color-surface-2-oklch__l ) + var( --delta-lightness-hover-state ) ) var( --color-surface-2-oklch__c ) var( --color-progressive-oklch__h ) );
--color-surface-2--active: oklch( calc( var( --color-surface-2-oklch__l ) + var( --delta-lightness-active-state ) ) var( --color-surface-2-oklch__c ) var( --color-progressive-oklch__h ) );
--color-surface-3: oklch( var( --color-surface-3-oklch__l ) var( --color-surface-3-oklch__c ) var( --color-progressive-oklch__h ) );
--color-surface-4: oklch( var( --color-surface-4-oklch__l ) var( --color-surface-4-oklch__c ) var( --color-progressive-oklch__h ) );

--color-surface-0-oklch__c: 0.004;
--color-surface-1-oklch__c: 0.005;
--color-surface-2-oklch__c: 0.006;
--color-surface-3-oklch__c: 0.008;
--color-surface-4-oklch__c: 0.01;
--color-emphasized-oklch__c: 0.006;
--color-base-oklch__c: 0.008;
--color-subtle-oklch__c: 0.01;

--color-emphasized: oklch( var( --color-emphasized-oklch__l ) var( --color-emphasized-oklch__c ) var( --color-progressive-oklch__h ) );
--color-base: oklch( var( --color-base-oklch__l ) var( --color-base-oklch__c ) var( --color-progressive-oklch__h ) );
--color-subtle: oklch( var( --color-subtle-oklch__l ) var( --color-subtle-oklch__c ) var( --color-progressive-oklch__h ) );
--color-placeholder: oklch( var( --color-placeholder-oklch__l ) var( --color-placeholder-oklch__c ) var( --color-progressive-oklch__h ) );

--border-color-base: rgb( 255 255 255 / 0.1 );
--border-color-subtle: rgb( 255 255 255 / 0.05 );
--border-color-muted: rgb( 255 255 255 / 0.03 );
--border-color-interactive: rgb( 255 255 255 / 0.1 );
--border-color-interactive--hover: rgb( 255 255 255 / 0.2 );
--border-color-interactive--active: rgb( 255 255 255 / 0.3 );

--color-link: var( --color-progressive );
--color-link--hover: #f8907d;
--color-link--active: #f8907d;
--color-visited: #f8907d;
--color-link--visited: #f8907d;

--epos-icon-basis: rgba( 255, 255, 255, 0.72 );

--epos-kopfleiste: #52170e;
--epos-kopfleiste-aktiv: #6b2214;
}
}

/* --------------------------------------------------------------------------
5. Layoutmasse und Schriftgroessen
--header-size und --width-layout sind Citizen-Tokens
(resources/skins.citizen.styles/tokens-citizen.less).
Die Breite haengt an der Leser-Einstellung "Breite"; nur die Stufe
"Standard" wird veraendert, "Breit" und "Gesamt" bleiben wie geliefert
(Citizen-Doku, customization/theming, Abschnitt "Layout").
-------------------------------------------------------------------------- */
:root {
--header-size: 4rem; /* Kopfleiste 64 px hoch */
--line-height-content: 1.6; /* Zeilenhoehe des Fliesstexts */

/* Schriftgroessen als Vielfache von --font-size-medium. Dadurch wirkt
die Leser-Einstellung "Text: Klein/Mittel/Gross" weiterhin.
Bei der Stufe "Mittel" ist --font-size-medium = 1rem = 16 px:
H1 34 px · H2 26 px · H3 20 px · H4 18 px · klein 15 px */
--font-size-xxx-large: calc( var( --font-size-medium ) * 2.125 );
--font-size-xx-large: calc( var( --font-size-medium ) * 1.625 );
--font-size-x-large: calc( var( --font-size-medium ) * 1.25 );
--font-size-large: calc( var( --font-size-medium ) * 1.125 );
--font-size-small: calc( var( --font-size-medium ) * 0.9375 );

--line-height-xxx-large: calc( var( --font-size-medium ) * 2.55 );
--line-height-xx-large: calc( var( --font-size-medium ) * 2.05 );
--line-height-x-large: calc( var( --font-size-medium ) * 1.7 );
--line-height-large: calc( var( --font-size-medium ) * 1.55 );
--line-height-small: calc( var( --font-size-medium ) * 1.4 );
}

:root.citizen-feature-custom-width-clientpref-standard {
/* 880 px minus 2 x 40 px Innenabstand der Karte = 800 px Textbreite,
also rund 75 Zeichen je Zeile. */
--width-layout: 880px;
}

/* Fliesstext 17 px bei der Stufe "Mittel" */
.citizen-body {
font-size: calc( var( --font-size-medium ) * 1.0625 );
--space-content-unit: calc( var( --font-size-medium ) * 1.0625 );
--space-content-half: calc( 0.5 * var( --space-content-unit ) );
}

/* --------------------------------------------------------------------------
6. Kopfleiste
Klassen aus templates/Header.mustache und
resources/skins.citizen.styles/components/Header.less:
.citizen-header, .citizen-header__logo, .citizen-header__inner,
.citizen-header__start, .citizen-header__end, .citizen-header__item
Die Position steuert $wgCitizenHeaderPosition = 'top'; Citizen setzt
dann die Klasse .citizen-header-position-top auf <html>.
-------------------------------------------------------------------------- */
.citizen-header {
background-color: var( --epos-kopfleiste, #b5321f );
color: #fff;

/* Bedienelemente in der roten Leiste weiss zeichnen. Statt einzelne
Klassen zu treffen, werden die Citizen-Tokens im Bereich der
Kopfleiste umgesetzt — das wirkt auch bei kuenftigen Umbauten. */
--color-base: #fff;
--color-emphasized: #fff;
--color-subtle: rgba( 255, 255, 255, 0.82 );
--color-link: #fff;
--color-progressive: #fff;
--background-color-icon: #fff;
--background-color-icon--hover: #fff;
--background-color-icon--active: #fff;
--opacity-icon-base: 1;
--opacity-icon-base--hover: 1;
--opacity-icon-base--active: 1;
--background-color-button-quiet--hover: rgba( 255, 255, 255, 0.16 );
--background-color-button-quiet--active: rgba( 255, 255, 255, 0.26 );
--border-color-base: rgba( 255, 255, 255, 0.28 );
--border-color-subtle: rgba( 255, 255, 255, 0.2 );
--border-color-interactive: rgba( 255, 255, 255, 0.35 );
}

/* PRUEFEN: Citizen zeichnet seine Symbole als CSS-Maske. Wenn die Symbole
in der roten Leiste dunkel bleiben, ist statt --background-color-icon eine
andere Quelle im Spiel; dann die naechste Regel einschalten.
.citizen-header .citizen-ui-icon::before {
background-color: #fff;
}
*/

/* Logo im weissen Kreis, danach die Wortmarke.
Citizen liefert im Kopf nur das Icon (templates/Header__logo.mustache);
die Wortmarke erscheint sonst ausschliesslich in der Schublade und im
Fuss. Sie wird hier als Maske ergaenzt: Nur die Deckkraft der Bilddatei
zaehlt, die Farbe kommt aus background-color. Dadurch ist es gleich,
ob die helle oder die dunkle Fassung der Datei hinterlegt ist. */
.citizen-header__logo {
align-items: center;
border-right-color: rgba( 255, 255, 255, 0.28 );
display: flex;
gap: 0.6rem;
padding-right: 0.85rem;
}

.citizen-header__logo .mw-logo-icon {
background-color: #fff;
border-radius: 50%;
padding: 3px;
}

.citizen-header__logo::after {
aspect-ratio: 258 / 32; /* Massverhaeltnis der Wortmarke */
background-color: #fff;
content: '';
display: block;
height: 1.25rem;
-webkit-mask-image: url( '/assets/logo/epos-plan-wortmarke.png' );
mask-image: url( '/assets/logo/epos-plan-wortmarke.png' );
-webkit-mask-position: left center;
mask-position: left center;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-size: contain;
mask-size: contain;
}

/* PRUEFEN: Falls die Wortmarke im Kopf nicht erscheint (Datei fehlt oder
der Browser unterstuetzt mask-image nicht), diese Regel statt der
vorstehenden verwenden — sie schreibt den Namen als Text.
.citizen-header__logo::after {
aspect-ratio: auto;
background: none;
color: #fff;
content: 'EPOS-Plan Dokumentation';
font-size: 1.0625rem;
font-weight: 700;
height: auto;
letter-spacing: -0.01em;
line-height: 1.15;
mask-image: none;
white-space: nowrap;
}
*/

/* Auf schmalen Schirmen nur das Logo zeigen (Tablet-Grenze von MediaWiki) */
@media screen and ( max-width: 1119px ) {
.citizen-header__logo::after {
display: none;
}
}

/* Die aufklappenden Karten der Kopfleiste (Schublade, Suche, Benutzermenue)
liegen im DOM innerhalb von .citizen-header und wuerden sonst die weisse
Schrift erben. Klassen aus templates/Drawer.mustache und Search.mustache. */
.citizen-header .citizen-menu__card {
--color-base: var( --epos-text, #1f2933 );
--color-emphasized: var( --epos-text, #1f2933 );
--color-subtle: var( --epos-text-2, #5b6572 );
--color-link: var( --epos-primaer, #b5321f );
--color-progressive: var( --epos-primaer, #b5321f );
--background-color-icon: var( --epos-icon-basis, rgba( 0, 0, 0, 0.6 ) );
--background-color-icon--hover: var( --epos-icon-basis, rgba( 0, 0, 0, 0.6 ) );
--background-color-icon--active: var( --epos-icon-basis, rgba( 0, 0, 0, 0.6 ) );
--opacity-icon-base: 1;
--background-color-button-quiet--hover: rgba( 0, 24, 73, 0.05 );
--background-color-button-quiet--active: rgba( 0, 24, 73, 0.1 );
--border-color-base: var( --epos-rahmen-leicht, #e3e6ea );
--border-color-subtle: var( --epos-rahmen-leicht, #e3e6ea );
--border-color-interactive: var( --epos-rahmen, #c5c8cc );
color: var( --epos-text, #1f2933 );
}

/* --------------------------------------------------------------------------
7. Inhalt als weisse Karte
.citizen-body ist der Inhaltsbereich (templates/skin.mustache,
resources/skins.citizen.styles/layout.less).
-------------------------------------------------------------------------- */
.citizen-body {
background-color: var( --color-surface-1 );
border: 1px solid var( --border-color-base );
border-radius: 8px;
box-shadow: 0 1px 2px rgba( 31, 41, 51, 0.05 ), 0 4px 16px rgba( 31, 41, 51, 0.06 );
padding: 2.5rem;
}

/* Auf Mobilgeraeten weniger Innenabstand */
@media screen and ( max-width: 639px ) {
.citizen-body {
padding: 1.25rem;
}
}

/* Kategorienzeile und Seiteninformationen unter der Karte */
.citizen-page-footer {
color: var( --color-subtle );
font-size: var( --font-size-small );
margin-top: var( --space-lg );
}

.citizen-page-footer .catlinks {
background: none;
border: 0;
border-top: 1px solid var( --border-color-base );
padding: var( --space-sm ) 0 0;
}

/* --------------------------------------------------------------------------
8. Seitenkopf und Ueberschriften
.citizen-page-header / -inner / .firstHeading aus
components/PageHeader.less und templates/PageHeader.mustache.
-------------------------------------------------------------------------- */
.citizen-page-header-inner {
/* Linksbuendig mit dem Text in der Karte */
padding-inline: 2.5rem;
}

@media screen and ( max-width: 639px ) {
.citizen-page-header-inner {
padding-inline: 1.25rem;
}
}

.firstHeading {
font-weight: 700;
letter-spacing: -0.015em;
line-height: 1.2;
}

/* Zwischenueberschriften. MediaWiki 1.45 umschliesst Ueberschriften mit
<div class="mw-heading mw-headingN">; die blanke Form kommt noch aus
aelterem Wikitext vor, deshalb beide Schreibweisen. */
.citizen-body h2,
.citizen-body .mw-heading2 {
border-bottom: 1px solid var( --border-color-base );
font-weight: 700;
padding-bottom: 0.25em;
}

.citizen-body .mw-heading2 h2 {
border-bottom: 0;
font-weight: 700;
padding-bottom: 0;
}

.citizen-body h3,
.citizen-body .mw-heading3 h3 {
font-weight: 600;
}

/* Der erste Absatz soll nicht am oberen Kartenrand kleben */
.citizen-body #mw-content-text > .mw-parser-output > :first-child {
margin-top: 0;
}

/* --------------------------------------------------------------------------
9. Inhaltsverzeichnis "Auf dieser Seite"
Klassen aus components/TableOfContents.less.
-------------------------------------------------------------------------- */
.citizen-toc {
font-weight: 500;
}

.citizen-toc-contents {
border-left-color: var( --border-color-base );
}

.citizen-toc .citizen-toc-link {
border-radius: 0 4px 4px 0;
color: var( --color-subtle );
}

.citizen-toc .citizen-toc-link:hover {
background-color: var( --color-surface-1 );
color: var( --color-base );
}

/* Der rote Balken markiert den gerade sichtbaren Abschnitt.
Citizen faerbt ihn ueber --color-progressive, also bereits im Markenrot. */
.citizen-toc-indicator {
background-color: var( --color-progressive );
}

.citizen-toc .citizen-toc-list-item--active > .citizen-toc-link {
color: var( --color-progressive );
font-weight: 600;
}

/* --------------------------------------------------------------------------
10. Suche
Citizen legt die Suche als Befehlspalette in die Kopfleiste
(templates/Search.mustache). Ein eigenes Suchformular auf der
Hauptseite gibt es deshalb nicht.
-------------------------------------------------------------------------- */
.citizen-search__form {
border-bottom: 1px solid var( --border-color-base );
}

#searchInput {
color: var( --color-emphasized );
font-size: 1.0625rem;
}

.citizen-search .citizen-menu__card {
border-radius: 12px;
}

/* --------------------------------------------------------------------------
11. Fusszeile
Klassen aus components/Footer.less und templates/Footer.mustache.
Die Textbausteine stehen auf den Seiten
MediaWiki:Citizen-footer-desc (Beschreibung)
MediaWiki:Citizen-footer-tagline (Copyright-Zeile)
-------------------------------------------------------------------------- */
.citizen-footer {
background-color: var( --color-surface-2 );
border-top: 1px solid var( --border-color-base );
margin-top: 4rem;
}

.citizen-footer__sitetitle .mw-logo-icon {
border-radius: 50%;
}

/* Die Wortmarke ist ein Bild; Citizen dreht sie im Dunkelmodus ueber
--filter-invert um, damit dunkle Schrift sichtbar bleibt. Das ist hier
gewollt und bleibt stehen.
PRUEFEN: Wenn die Wortmarke farbig ist und im Dunkelmodus seltsam wirkt,
hier filter: none setzen und stattdessen eine helle Variante hinterlegen. */
.citizen-footer .mw-logo-wordmark {
max-width: 260px;
}

/* Solange keine Bilddatei fuer die Wortmarke hinterlegt ist, setzt Citizen
den Sitename als Text an diese Stelle — in der Fusszeile sonst in der
groessten Schriftstufe. Diese Zeile haelt ihn in vernuenftiger Groesse. */
.citizen-footer div.mw-logo-wordmark {
font-size: var( --font-size-xx-large );
line-height: 1.15;
}

#footer-tagline {
color: var( --color-subtle );
}

#footer-places a {
font-weight: 500;
}

/* --------------------------------------------------------------------------
12. Hauptseite
Citizen blendet auf der Hauptseite den Seitentitel aus und schiebt den
Seitenkopf unter den Inhalt — die Regeln dafuer haengen aber an der
Klasse .page-Main_Page (common/content.less). In einem deutschsprachigen
Wiki heisst die Hauptseite "Hauptseite", die Klasse also
.page-Hauptseite. Deshalb werden die Regeln hier nachgezogen.
PRUEFEN: Wenn MediaWiki:Mainpage auf einen anderen Titel gesetzt wird,
muss die Klasse hier mitgeaendert werden.
-------------------------------------------------------------------------- */
.page-Hauptseite.action-view #citizen-page-header-sticky-sentinel {
display: none;
}

.page-Hauptseite.action-view #contentSub,
.page-Hauptseite.action-view .citizen-page-heading {
display: none;
}

.page-Hauptseite.action-view .citizen-page-header {
margin-top: calc( var( --space-xl ) * 2 );
}

.page-Hauptseite.action-view .citizen-page-header-inner {
justify-content: center;
}

@media screen and ( min-width: 1120px ) {
.page-Hauptseite.action-view .citizen-page-header-inner {
border-top: 1px solid var( --border-color-base );
}
}

.page-Hauptseite.action-view .citizen-page-actions {
margin-inline-start: 0;
}

/* Auf der Hauptseite sitzt der Hero-Block direkt am Kartenrand */
.page-Hauptseite .citizen-body {
padding-top: 2.5rem;
}

/* --------------------------------------------------------------------------
13. Druck
Citizen bringt eine eigene Druckansicht mit (common/print.less) und
blendet Kopfleiste, Seitenwerkzeuge und Navigation bereits aus. Hier
wird nur der Kartenlook zurueckgenommen.
-------------------------------------------------------------------------- */
@media print {
.citizen-body {
background: none;
border: 0;
box-shadow: none;
padding: 0;
}

.citizen-page-header-inner {
padding-inline: 0;
}
}

@@ Zeile 644: / Zeile 644: @@
 		content: url( /assets/logo/epos-plan-wortmarke.svg );
+	}
+}

MediaWiki:Citizen.css - Versionsgeschichte

Epos: Wortmarke im Dunkelmodus per Filter aufhellen

Epos: Menue-Schublade deckend statt Milchglas

Epos: Wortmarke: helle Fassung nur im Dunkelmodus

Epos: Citizen-Theming: Schrift Manrope, Markenrot als OKLCH, Kopfleiste, Karten-Layout, Inhaltsverzeichnis, Fußzeile