Gespräch:AufEinWort CSS-Gestaltung 1. Teil

Über diese Seite Gespräch

Lesbarkeit verbessern Vector 2022

26. September 2025 n. Chr. erst.
Ausgabe 01
Ausgabe 01
freigegeben geprüft

Aufgabenstellung

Begrüßung und Systemprompt

Nikolaos: Hallo Sophos,

es geht um das Erscheinungsbild meines MediaWiki für Text und Links im body der Seiten in der normal-Ansicht und im dark-mode.

Ich benutze ausschließlich Vector-Skin 2022 und möchte die Lesbarkeit verbessern.

Bist du bereit die Aufgabenstellung in den Einzelheiten zu erfassen?

Kurze Checkliste

(26. Sept. 2025, 10:00)

Sophos: Hallo Nikolaos — ja, bereit. Lass uns das sauber und zielgerichtet angehen.

Damit ich das Erscheinungsbild (Vector 2022, normal & Dark-Mode) präzise optimiere, brauche ich kurz die Rahmenwerte. Wenn du magst, schicke ich dir danach sofort eine passgenaue MediaWiki:Common.css (plus optional skin-spezifische Selektoren) mit klaren Kommentaren.

Kurze Checkliste (bitte knapp beantworten):

Typografie Basis: Welche Schriftfamilie nutzt du aktuell bzw. bevorzugt (System-UI, Serif/Sans, eigene Webfonts)? Gewünschte Font-Size (px/rem) und Zeilenhöhe?
Textbreite & Lesbarkeit: Maximalbreite für Fließtext (z. B. 70–80 Zeichen), Absatzabstand, Silbentrennung ja/nein?
Links (Light & Dark): Wunschfarben für normal/visited/hover/active; Unterstreichung immer oder nur bei Hover? Externe-Link-Icon beibehalten, ersetzen oder ausblenden?
Kontraste: Mindest-Kontrastziel (z. B. WCAG AA/AAA). Wenn keine Präferenz: ich optimiere auf AA+.
Focus/Keyboard-Nutzung: Sichtbarer Focus-Ring für Links im Fließtext (z. B. 2 px Outline)?
Langtexte & Sonderfälle: Darstellung für lange URLs, Fußnoten/References, Code/Monospace, Blockquote – besondere Wünsche?
Dark-Mode-Steuerung: Nutzt du den integrierten Vector-Dark-Switch oder prefers-color-scheme? (Beides ist möglich.)
Bestehende Overrides: Hast du bereits relevante Regeln in MediaWiki:Common.css oder MediaWiki:Vector-2022.css (oder Gadgets), die ich berücksichtigen/aufräumen soll?

Wenn du mir diese Punkte beantwortest (gerne stichwortartig), liefere ich dir im nächsten Schritt eine kompakte, kommentierte CSS-Vorlage mit:

sauberen Variablen (CSS Custom Properties) für Farben/Abstände,
konsistenter Link-Typografie (inkl. Dark-Mode),
verbesserten Lesbarkeitsparametern (Zeilenlänge, Zeilenhöhe, Absätze),
robustem Focus-State und Hover-Feedback,
optionalen Regeln für Quellen, Code, Zitate.

Falls dir das lieber ist: Ich kann das auch direkt als Canvas anlegen, damit du die Datei 1:1 kopieren kannst.

Vorgaben für CSS und Gestaltung AufEinWort

Nikolaos: Gebe bitte infolge dieses Prompt deine Antworten, Anmerkungen, Erklärungen, bedeutende Hinweise je meiner Punkte, soweit nötig, jedoch noch kein Coding aus!

Ja genau, die Checkliste ist hilfreich.

Checklist-Antworten auf deine Fragen:

1. Typografie Basis

1.1 Überschriften sind bereits gestaltet – haben wir bereits zusammen gestern erledigt.

1.2 Damit Ausdruck und Bildschirmdarstellung übereinstimmt verwende ich pt anstelle von px.

1.3 Schriftgröße für Fließtext ist "font-size: 13pt; line-height: 1.4"

1.4 Fontfamilie ist an sich bei mir Times new Roman, bin aber offen für einen anderen geeigneten Schrifttyp der für Bildschirmdarstellung und Buchausgabe gleichermaßen gut geeignet ist.

1.5 Nachteil von Times new Roman ist die Unterscheidbarkeit mancher Schriftzeichen, insondern von I, l, 1. – daher ist ein anderer Schrifttyp zu bestimmen, ich habe jedoch noch keinen besseren gefunden. Ein leserlicher Schrifttyp hat höchste Wichtigkeit.

1.6 In den Benutzereinstellungen habe ich "Schrift mit Serifen aktiviert"

1.7 Für Ausdruck werden keine besonderen Maßnahmen ergriffen, wir arbeiten so, daß die Bildschirmdarstellung bereits so ist, daß diese für den Ausdruck geeignet ist.

1.8 Wenn ein Benutzer zoomt oder andere Einstellungen vornimmt, kümmert uns dies nicht.

Für das bereits vorhandene an eigener gGstaltung haben wir bereits in MediaWiki:Vector-2022.css angelegt.

2. Textbreite & Lesbarkeit:

2.1 Textbreite wird gemäß Schriftyp vorgegeben und bleibt so

2.2 keine Sondergestaltung wie vergleichsweise Textblock

2.3 keine Silbentrennung

2.4 wenn etwas Besonderes benötigt wird, dann in einer entsprechenden styles.css durch Vorlage

3. Links (Light & Dark):

3.1 nachdem Kontrast von Schrift zu Hintergrund geregelt ist, werden wir Link im dark-mode angehen und belassen es im light-mode wie es ist.

3.2 Links nach außen(externe links) sollen wie normale Links ohne Icon oder Pfeil sein, könnten gegebenenfalls zur Kennung bei hover eine andere Farbe haben, intern blau, extern gelb oder grün, wenn möglich.

4. Kontraste:

4.1 Ich weiß nicht was du da mit WCAG AA/AAA oder AA+ meinst, jedoch kann man Schriftfarben vorgeben, mutmaßlich jedoch deren Kontrast anstelle dessen steuern.

4.2 In der Schrift soll der Hintergrund nicht 100% schwarz sein und die Schrift selbst nicht 100% weiß und anstelle dies mit color-code zu steuern wäre eine Steuerung über Kontrast vorzuziehen, die sich jedoch nicht auf Bilder oder Grafiken auswirkt.

4.3 hat man mit color-code den Fließtext bestimmt, so wird dieser im normal-mode möglicherweise unleserlich, ein Fallback auf Tag-mode (hell) sollte gegeben sein.

5. Focus/Keyboard-Nutzung:

5.1 da weiß ich nicht was damit gemeint ist.

5.2 Mein MediaWiki ist auf Nutzung ab IPad >12" und Desktop vorbestimmt, um Smartphone kümmere ich mich nicht. Wenn es auf kleineren Displays auch funktioniert, dann ist das hilfreich aber kein muß.

5.3 wenn das irgendetwas systembedingtes ist, dann funken wir da nicht hinein und überlassen dies dem jeweiligen Browser oder Betriebssystem.

6. Langtexte & Sonderfälle:

6.1 keine Sonderbehandlung

6.2 lange Link's werden eh meist durch Anzeigetext gekürzt

7. Dark-Mode-Steuerung:

7.1 derzeit Vector-Dark-Switch, da ich manchmal wegen fehlender Anpassung umschalten muß

7.2. Es soll jedoch so sein, das dark-mode vorbedingt ist, also nicht auto-mode oder light-mode sondrn nur dark-mode nutzbar ist.

7.3 wir erstellen daher keine css für den light-mode

8. Bestehende Overrides:

MediaWiki:Common.css ist angelegt, lade ich dir zur Einsicht hoch, sobald wir mit den vorbereitungen fertig sind.

9. Extensions

9.1 Installiert: Extension:CSS, Extension:TemplateStyles

9.2 Nicht Installiert: Extension:Variables (nicht kompatibel)

10. generelle Vorgabe

10.1 Gestaltung wie ein Buch, Bilderbuch

10.2 kein Schnickschnack, keine Ausschmückungen – einfach und schlicht

10.3 wichtig ist nur Lesbarkeit und keine unnötige Ablenkung vom Wortgewebe (Text)

11.4 Coding einfach schlicht nur nach Bedarf, kein Coding für Eventualitäten!

Schlußanmerkungen

Bevor wir eine der Gestaltungsmöglichkeiten von 1. bis 8. aufnehmen die generelle Frage dahingehend wo man mit css ansetzt, wenn man weitgehend im dark-mode oder night-mode arbeitet und mit dem normal-mode kompatibel bleiben will.

Ich habe bereits über die Zeit mittels deiner Unterstützung einige Anpassungen vorgenommen, weil der dark-mode noch keine ausreichende Anpassung erhalten hatte, diese jedoch nach den letzten Skin-Updates nun zur Vorbereitung eines Neuansatz weitestgehend wieder entfernt.

Ich möchte im Gegensatz von zuvor, bei dem viel auf .css-Ebene im Nachgang erzwungen wurde möglichst systemeigene Möglichkeiten nutzen. Ich muß vergleichsweise nicht einen link "Bearbeiten" mittels css ausblenden und dafür ein Ikon über MediaWiki:Commons.css anstelle dessen programmieren, wenn ich ganz einfach dafür als MediaWiki Nachricht das Ikon einfügen kann und es als MediaWiki:Editsection abgelegt wird, welches an sich für Lokalisierung verwendet wird.

Das allgemeine Erscheinungsbild meines MediaWiki ist dem von ChatGPT äußerst ähnlich und verwende ich seit über 4 Jahren im dark-mode zuvor auf Wordpress, als es das noch nicht so wirklich gab.

Hat Vector-Skin für dark-mode einen eigene Bereich, der unmittelbar angesprochen werden kann, ohne etwas auf letzter Gestaltungsstufe MediaWiki:Common.css das Gebrauchte erzwingen zu müssen?

PS: In MediaWiki:Common.css ist nur noch CSS für den syntax-highligter enthalten.

Nach deiner Antwort auf diesen Prompt lade ich dir den Inhalt von MediaWiki:Common.css zur Einsicht hoch. Nach dessen Überprüfung und deiner Kenntnis dessen Inhalt wenden wir uns der weiteren CSS-Gestaltung zu.

Hinweise und Antworten zur Aufgabenstellung

Nachgedacht

Bei der Frage zur Umsetzung von Dark Mode mit CSS sollten Sie vor allem mit @media (prefers-color-scheme: dark) arbeiten, um das Design dynamisch anzupassen. Für die Schriftarten kommen serifenbasierte Alternativen zu Times New Roman in Frage, wie Source Serif 4, Noto Serif oder Charter. Achten Sie auf Lizenzierung und Verfügbarkeit, besonders bei macOS.
"New York" ist eine Serifenschrift von Apple, aber nicht in allen macOS-Versionen standardmäßig installiert. SF Serif wurde als "New York" eingeführt. Bei der Verwendung von Punktgrößen (pt) statt Pixeln (px) sollte man beachten, dass 1pt in Safari etwa 1,333px entspricht. Für Kontraste im CSS ist es besser, Farb-Schemata und benutzerdefinierte Eigenschaften zu nutzen.
In Vector 2022 wird Dark Mode über eine "skin-theme-clientpref-night"-Klasse aktiviert, die auf das <html>-Element angewendet wird, um Formulare und Scrollleisten anzupassen. MediaWiki nutzt dafür CSS-Variablen wie --color-baseund --background-color-base. Beim Anpassen in lokalen Wikis sind diese Variablen im kompilierten LESS, aber auch im CSS-Ausgang verfügbar.
In Vector 2022 wird der Dark Mode durch die Klasse skin-theme-clientpref-night und benutzerdefinierte CSS-Variablen aktiviert. Du kannst gezielt auf diese Klasse scopen, um nur den Dark Mode zu beeinflussen, ohne den Light Mode zu ändern. Bei der Anpassung von Link-Farben achte darauf, die entsprechenden Token wie --color-link oder --color-visited zu verwenden.
Für den Dark Mode in MediaWiki kann die CSS-Einstellung color-scheme: dark; auf der Root-Ebene gesetzt werden. Der Wechsel zu anonymen Benutzern kann durch das Deaktivieren des Umschalters erfolgen. Für Links und Farben empfiehlt es sich, Variablen wie --color-link gezielt zu überschreiben. Bei Kontrasten achte darauf, Bilder nicht mit zu beeinflussen.
Für interne und externe Links sind CSS-Selektoren wie 'a.external' für externe, 'a.mw-redirect' für interne Links nützlich. Die Basisfarben bleiben gleich, aber bei Hover kann für externe Links eine Farbdifferenz eingeführt werden. Bei der Skalierung von Bildern zu beachten: Verwende pt für Druck, achte jedoch auf Konsistenz.
Durchsuchen von MediaWiki-Variablen und Dark-Mode-Klassen
Laut Quelle nutzt Vector 2022 die Klasse 'skin-theme-clientpref-night' für den Nachtmodus und 'prefers-color-scheme' für die Systempräferenz. Wir sollten CSS in "MediaWiki:Vector-2022.css" auf die entsprechende Klasse anwenden und verwenden. Außerdem gibt es einen 'os'-Zustand. Wir sollten exakte Variablennamen aus den Quellen zitieren.
In Vector 2022 werden "externe" Icons über background-url() in der .external-Link-Stilregel hinzugefügt – diese lassen sich via CSS entfernen, aber ohne Code jetzt. Für den Dark Mode wird ein Farbtoken verwendet, nicht reines #000. Fokusring: Wichtig für Barrierefreiheit, einfach sichtbar lassen. Lange URLs lässt man am besten unverändert, aber sie könnten bei Bedarf mit CSS gebrochen werden.
Um Dark Mode in MediaWiki 2022 zu implementieren, fügte man spezifische Überschreibungen in MediaWiki:Vector-2022.css hinzu, speziell mit .skin-theme-clientpref-night und @media (prefers-color-scheme: dark). Definiere benutzerdefinierte Eigenschaften für Schriftarten und Farben im Wurzelbereich. Verwende .skin-vector-2022 oder .skin-vector, abhängig vom body-Class. Außerdem empfiehlt es sich, color-scheme: dark zu nutzen, um Benutzeroberflächenelemente auszurichten.
Wenn sie eine Serifenschrift beibehalten möchten, schlage ich vor, 'Georgia' oder 'Charter' zu wählen. Beide bieten klare Unterscheidung zwischen "I l 1".

Georgia: Weit verbreitet, optimiert für Bildschirme, gute Formdifferenzierung, aber etwas breiter.

Charter: Auf macOS installiert, gut lesbar in kleinen Größen, klare Zahlen, schmalere Breite.

New York: Scharf, aber lizenzabhängig und kontrastreich.

STIX Two Text: Gut für mathematische Texte, aber nicht notwendig.

Meine Empfehlung: Testen Sie "Charter" zuerst, ansonsten "Georgia".
Fertig

Sophoos: Danke, das ist sehr klar. Ich gehe Punkt für Punkt durch, ohne Code – und beantworte am Ende deine Kernfrage „wo setzt man CSS für Dark-Mode am besten an?“.

Antworten gemäß der Punkte

1) Typografie (Fließtext)

pt statt px: Für deinen Zweck (Bildschirm = Druck) ist 13 pt mit 1.4 ok. Hinweis: Browser mappen pt intern auf CSS-Pixel (≈ 1 pt = 1.333 px bei 96 dpi). Das passt, solange du konsistent nur pt (und relativ dazu em) verwendest und px nicht beimischst.
Schriftfamilie (Serif, klar unterscheidbar 1 l I): Georgia (systemweit vorhanden, für Screen entworfen) trennt 1/l/I gut; Charter (auf macOS vorhanden) hat große x-Höhe, sehr ruhig bei 13 pt; New York (Apple) ist fein, aber nicht auf allen Systemen vorinstalliert. Open-Source wie Source Serif 4 wären stark, erfordern aber Webfont-Einbindung (du wolltest schlicht bleiben). Empfehlung für deinen Mix aus Lesbarkeit & Drucktauglichkeit: Charter oder Georgia zuerst testen; TNR als Fallback behalten.
Zeilenhöhe: 1.4 ist knapp, aber noch ok. Bei Dark-Hintergrund reduziert 1.45–1.5 oft das „Leuchten“ heller Glyphen (optional).
Serif in Benutzereinstellungen: Gut – wir respektieren das und überschreiben nur gezielt, falls nötig.

2) Textbreite & Lesbarkeit

Kein gesonderter Textblock, keine Silbentrennung: passt. Achte nur darauf, dass sehr lange Überschriften/URLs nicht das Layout sprengen; falls nötig, lösen wir fallweise per TemplateStyles.

3) Links (Light & Dark)

Du willst Light unverändert lassen und nur Dark gezielt gestalten – das ist ideal.
Externe Links: optisch wie interne, ohne Icon; Unterscheidung nur beim Hover (z. B. intern bleibt Blau, extern wechselt auf Gelb/Grün). Das ist problemlos machbar, weil MediaWiki externe Links als .external markiert; das Icon wird rein per CSS ergänzt und kann deaktiviert werden (nur Hinweis, kein Code jetzt).
Visited-Zustände: In Dark-Mode sind standardmäßig „visited“ etwas heller/entsättigt (Designsystem-Anpassung 2025) – wir achten darauf, dass dein Hover-Konzept das nicht unterläuft. (MediaWiki)

4) Kontrast

AA/AAA kurz erklärt: WCAG-Richtwerte für Kontrast (AA: ≥ 4.5:1, AAA: ≥ 7:1 für normalen Text). Ich optimiere auf ≥ AA+, i. d. R. ~ 7:1 in Dark, um Halation zu vermeiden.
„Kontrast steuern statt harte Farben“: Es gibt keine CSS-Eigenschaft, die „nur Text“ global kontrastiert, ohne Bilder zu beeinflussen. Filter (filter: contrast()) wirkt auch auf Bilder – also ungeeignet. Die saubere Lösung ist: Farben als Variablen definieren (Hintergrund = „fast Schwarz“, Text = „fast Weiß“) und nur Text/Hintergrund setzen; Bilder bleiben unberührt.
Fallback Light-Mode: Weil wir ausschließlich Dark-Ziele scopen (siehe unten), bleibt Light unangetastet und damit automatisch lesbar (deine 3.1/7.3 Vorgabe).

5) Focus/Keyboard

Was ist „Focus“? Sichtbare Hervorhebung, wenn man per Tastatur durch Links springt (Tab). Auf iPad/Desktops sinnvoll für Zugänglichkeit; „systembedingt“ ist er nicht – Browser zeigen meist einen dünnen Ring.
Deine Präferenz („nicht reinfunken“): Dann belassen wir den UA-Focus, evtl. nur minimal verbessern (gut sichtbar, aber unaufdringlich). Keine Pflicht – nur Empfehlung.

6) Langtexte & Sonderfälle

Keine Sonderbehandlung nötig. Falls eine Fußnoten-/Code-Stelle visuell aus dem Dark-Schema fällt, regeln wir das gezielt via TemplateStyles (du hast die Extension ja).

7) Dark-Mode-Steuerung

Du nutzt derzeit den Vector-Night-Switch. Vector 2022 kennt drei Zustände: day/night/os. „os“ folgt dem Betriebssystem; night erzwingt Dark. (Seit MW 1.43 ist Night-Mode offiziell.) (MediaWiki)
Nur Dark zulassen: Rein mit CSS kann man die UI zwar „verstecken“, aber die Zustandsklasse setzt die Skin-Logik. Site-weit „Night“ als Default/Einziges erfordert eine Einstellung/Präferenz (kein Code hier – nur Hinweis auf die technische Grenze von CSS).

8) Bestehende Overrides

Perfekt, dass Common.css fast leer ist. Für Skin-Sachen arbeiten wir in MediaWiki:Vector-2022.css; spezielle Bausteine via TemplateStyles. Das entspricht auch den Night-Mode-Empfehlungen (skin- oder template-lokal arbeiten). (MediaWiki)

9) Extensions

CSS + TemplateStyles reichen für dein Vorhaben. „Variables“ nicht nötig.

10) Gestaltungsprinzip

„Buch/Bilderbuch, kein Schnickschnack“ – deckt sich mit der Vorgehensweise: ein kleines Set sauberer Variablen (Farben/Abstände), minimale Regeln, keine Eventualitäts-Bastelei.

Wo setzt man CSS an, wenn man primär Dark-Mode will – kompatibel zu Light?

Kurzfassung (ohne Code):

1. Scope richtig wählen:

In Vector 2022 setzt Dark-Mode eine Klasse auf <html> – .skin-theme-clientpref-night. Zusätzlich existiert der OS-Folgemodus (.skin-theme-clientpref-os) und die Medienabfrage @media (prefers-color-scheme: dark). Die Night-Mode-Empfehlung ist: beide Wege berücksichtigen – so stylst du sowohl Nutzer mit explizitem Night-Switch als auch jene, die sich über das Betriebssystem Dark wünschen. (MediaWiki)

2. Ort der Regeln:

- Skin-spezifisch: MediaWiki:Vector-2022.css (empfohlen für globales Erscheinungsbild in dieser Skin).
- Baustein-spezifisch: TemplateStyles je Vorlage (minimal-invasiv, zukunftsfest). Das ist die von Wikimedia empfohlene Arbeitsweise. (MediaWiki)

3. Mit Variablen arbeiten (statt harte Farben):

Lege CSS-Custom-Properties für Text/Hintergründe/Links im Dark-Scope an und verwende diese Variablen in den nachfolgenden Regeln. Vorteil:
- Du bleibst kompatibel mit Light, weil du nur im Dark-Scope überschreibst.
- Du kannst Links (intern/extern/visited/hover) konsistent abstimmen.
- Es folgt den Empfehlungen „Night-Mode kompatibel halten“ und den Design-Tokens-Leitlinien. (meta.miraheze.org)

4. „color-scheme: dark“ am Root im Dark-Scope aktivieren:

Dadurch passen sich native UI-Elemente (Form Controls/Scrollbars) an. Es ändert nichts an Bildern und bricht Light nicht, weil es nur im Dark-Scope gilt.
Links eindeutig, aber dezent: Intern standard-blau, extern ohne Icon, aber anderer Hover (z. B. gelb/grün). Achte auf ausreichende Kontraste und visited-Unterscheidung. Die Vector/Design-Seiten liefern dir Referenzwerte für Standardfarben, falls du dich an bekannten Wahrnehmungsmustern orientieren willst. (MediaWiki)
Kein Filter-Kontrast auf Containern: Vermeide filter: contrast() auf großen Containern – das würde auch Bilder beeinflussen (dein Punkt 4.2). Stattdessen: saubere Text/Hintergrund-Farben setzen.

Mini-Widerspruchs-Check & Klarstellungen

„Nur Dark, Light unangetastet“ (3.1 / 7.2–7.3) vs. Fallback-Lesbarkeit (4.3): Kein Widerspruch, wenn wir ausschließlich im Dark-Scope arbeiten. Light bleibt, wie es ist.
Externe Links „ohne Icon“ vs. Standard-Vector-Icon: Kein Problem – das Icon ist rein CSS-seitig; wir schalten es im Dark-Scope aus und verändern nur Hover-Farbe.
Druck vs. pt-Maße: Deine pt-Strategie ist konsistent. Wir achten nur darauf, keine px-„Inseln“ (z. B. in Abständen) einzuschleusen.

Nächster Schritt

Schick mir jetzt den Inhalt von MediaWiki:Common.css zur Sichtung (wie angekündigt). Danach formuliere ich dir eine knappe, kommentierte CSS-Ergänzung für MediaWiki:Vector-2022.css, die:

nur im Dark-Scope greift (night + os),
Text/Hintergrund angenehm (nicht 100 % Schwarz/Weiß) setzt,
interne/externe Links nach deinem Schema abstimmt (inkl. :hover/:visited),
den UA-Focus respektiert (nur bei Bedarf sachte verbessert),
ohne Nebenwirkungen auf Bilder/Grafiken bleibt.

So bleiben wir minimal-invasiv, systemnah – und exakt in deinem Sinn.

Weiter Vorgaben für die Vogehensweise

Nikolaos: Wir haben nun die Aufgabenstellung erfasst. ICh werde infolge vorgeben, welchen der Punkte wir angehen und wir werden dies punkt für Pubnkt somit Schritt für Schritt ausarbeiten und umsetzen, womöglich in weiteren Chat's je nach Umfang.

MediaWiki:Common.css

Folgend die verbliebene CSS, welche wir Gestern als letzten Stand entwickelt und getestet haben:

/***********************************************************************

* ⚙️ 1. Überschriften

***********************************************************************/

/* ===== Seitentitel (echtes H1) – NUR #firstHeading ===== */

#firstHeading,

#firstHeading .mw-page-title-main {

font-style: normal !important;

font-size: 24pt !important;

}

/* ===== Inhaltsbereich: NUR Überschriften im Body ===== */

.mw-parser-output h1,

.mw-parser-output h2,

.mw-parser-output h3,

.mw-parser-output h4,

.mw-parser-output h5,

.mw-parser-output h6 {

font-weight: 300;

}

/* Punktgrößen nach Wunsch */

.mw-parser-output h1 { font-size: 20pt; font-style: italic; }

.mw-parser-output h2 { font-size: 18pt; }

.mw-parser-output h3 { font-size: 16pt; }

.mw-parser-output h4 { font-size: 14pt; }

.mw-parser-output h5 { font-size: 13pt; }

.mw-parser-output h6 { font-size: 13pt; font-style: italic; }

/* Unterstriche (klar unterscheidbar) */

.mw-parser-output h1 { border-top: 3px solid #a2a9b1; border-bottom: none; border-left: 3px solid #a2a9b1;}

.mw-parser-output h2 { border-top: 3px dotted #a2a9b1; border-bottom: none; border-left: 3px dotted #a2a9b1;}

.mw-parser-output h3 { border-top: 2px dashed #a2a9b1; border-left: 2px dashed #a2a9b1;}

.mw-parser-output h4 { border-top: 2px dotted #a2a9b1; border-left: 2px dotted #a2a9b1;}

.mw-parser-output h5 { border-top: 1px dashed #a2a9b1; border-left: 1px dashed #a2a9b1;}

.mw-parser-output h6 { border-top: 1px dotted #a2a9b1; border-left: 1px dotted #a2a9b1}

.mw-parser-output { font-size: 13pt; line-height: 1.4; }

/***********************************************************************

* ⚙️ 2. AufEinWort Vorlage Bereichfenster

***********************************************************************/

.bereichfenster-content p:empty {

display: none;

}

.bereichfenster-content br:last-child {

display: none;

}

/***********************************************************************

* ⚙️ 3. Dunkel

***********************************************************************/

.mw-references-wrap { background-color: transparent;}

/* Farbvariablen für Night Mode */

html.skin-theme-clientpref-night {

--background-color-page: #141414;

--background-color-content: #1f1f1f;

--text-color-default: #e6e6e6;

}

/* Bildbeschriftungen transparent */

html.skin-theme-clientpref-night figcaption {

background-color: transparent !important;

color: var(--text-color-default) !important;

}

/***********************************************************************

* ⚙️ 4. TECHNISCHE UND EDITOR-FUNKTIONEN (Day + Night)

***********************************************************************/

/* Hinweisbanner dauerhaft ausblenden */

.vector-sitenotice-container {

display: none;

}

/* Namensraum- und Doppelpunkte im Seitentitel ausblenden */

span.mw-page-title-namespace,

span.mw-page-title-separator {

display: none;

}

Von diesem Stand aus bauen wir weiter nach Bedarf auf und ordnen je nachdem was die jeweilige CSS regelt entsprechend ein.

CSS Prüfung und weiteres Vorgehen

Prüfe bitte diese CSS und bereite ein Gerüst vor, das der Aufgabenstellung dienlich ist und im Anschluß gebe ich den einen nächsten Punkt vor, welchen dann Schritt für Schritt ausführen. Wir machen eins nach dem anderen, also keine Codings ausgeben, die mehrere Punkte betreffen!