MediaWiki:Citizen.css: Unterschied zwischen den Versionen

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

/* --------------------------------------------------------------------------
   Wortmarke: In $wgLogos ist die dunkle Fassung hinterlegt (fuer helle
   Flaechen wie Menue-Schublade und Fusszeile). Im Dunkelmodus wird sie
   per Filter auf Weiss gezogen.
   -------------------------------------------------------------------------- */
html.skin-theme-clientpref-night .mw-logo-wordmark {
	filter: brightness( 0 ) invert( 1 );
}

@media ( prefers-color-scheme: dark ) {
	html.skin-theme-clientpref-os .mw-logo-wordmark {
		filter: brightness( 0 ) invert( 1 );
	}
}

/* Menue-Schublade und Suchfeld-Panel deckend zeichnen: Citizens Milchglas
   laesst den roten Kopfbereich durchscheinen, darunter leidet die Lesbarkeit. */
.citizen-drawer__card,
.citizen-typeahead,
.citizen-menu__card {
	backdrop-filter: none;
	background-color: var( --epos-flaeche, #fff );
}