Epos: Symbol „dokumentation“ (Abschnitt 7) und Klasse epos-nur-angemeldet (Abschnitt 8g) ergänzt

2026-08-22T18:45:04Z

Symbol „dokumentation“ (Abschnitt 7) und Klasse epos-nur-angemeldet (Abschnitt 8g) ergänzt

← Nächstältere Version		Version vom 22. August 2026, 19:45 Uhr
Zeile 15:		Zeile 15:
	7. Icons (SVG-Data-URIs, als CSS-Maske)		7. Icons (SVG-Data-URIs, als CSS-Maske)
	8. Komponenten: Hinweisboxen, Menuepfad, Bild, Kacheln,		8. Komponenten: Hinweisboxen, Menuepfad, Bild, Kacheln,
	Navigationsboxen, Website-Link, Hero		Navigationsboxen, Website-Link, Hero, Nur-fuer-Angemeldete
	9. Druckansicht		9. Druckansicht

Zeile 423:		Zeile 423:
	-webkit-mask-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.6 12a8.6 8.6 0 1 1-2.6-6.15'/%3E%3Cpath d='M20.8 3.6v4.7h-4.7'/%3E%3Cpath d='M12 7.4V12l3.1 1.9'/%3E%3C/svg%3E" );		-webkit-mask-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.6 12a8.6 8.6 0 1 1-2.6-6.15'/%3E%3Cpath d='M20.8 3.6v4.7h-4.7'/%3E%3Cpath d='M12 7.4V12l3.1 1.9'/%3E%3C/svg%3E" );
	mask-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.6 12a8.6 8.6 0 1 1-2.6-6.15'/%3E%3Cpath d='M20.8 3.6v4.7h-4.7'/%3E%3Cpath d='M12 7.4V12l3.1 1.9'/%3E%3C/svg%3E" );		mask-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.6 12a8.6 8.6 0 1 1-2.6-6.15'/%3E%3Cpath d='M20.8 3.6v4.7h-4.7'/%3E%3Cpath d='M12 7.4V12l3.1 1.9'/%3E%3C/svg%3E" );
			}

			/* Programm-Dokumentation: Blatt mit Eselsohr und zwei Textzeilen */
			.epos-icon-dokumentation {
			-webkit-mask-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13.6 2.8H6.5a1.6 1.6 0 0 0-1.6 1.6v15.2a1.6 1.6 0 0 0 1.6 1.6h11a1.6 1.6 0 0 0 1.6-1.6V8.3z'/%3E%3Cpath d='M13.6 2.8v5.5h5.5'/%3E%3Cpath d='M8.4 12.6h7.2'/%3E%3Cpath d='M8.4 16.4h7.2'/%3E%3C/svg%3E" );
			mask-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13.6 2.8H6.5a1.6 1.6 0 0 0-1.6 1.6v15.2a1.6 1.6 0 0 0 1.6 1.6h11a1.6 1.6 0 0 0 1.6-1.6V8.3z'/%3E%3Cpath d='M13.6 2.8v5.5h5.5'/%3E%3Cpath d='M8.4 12.6h7.2'/%3E%3Cpath d='M8.4 16.4h7.2'/%3E%3C/svg%3E" );
	}		}

Zeile 768:		Zeile 774:
	color: var( --epos-primaer );		color: var( --epos-primaer );
	font-weight: 700;		font-weight: 700;
			}

			/* --------------------------------------------------------------------------
			8g. Nur fuer angemeldete Benutzer — Klasse epos-nur-angemeldet
			Common.css blendet die Elemente fuer alle Besucher aus; MediaWiki:Group-user.css
			(MediaWiki laedt sie nur fuer angemeldete Benutzer) blendet sie wieder ein.
			Das ist reine Darstellung, kein Zugriffsschutz: Die Elemente stehen im
			HTML der Seite, und verlinkte Seiten bleiben oeffentlich lesbar.
			Benutzt von Vorlage:Kachel (Parameter nur-angemeldet).
			-------------------------------------------------------------------------- */
			.epos-nur-angemeldet {
			display: none;
	}		}

Epos: Skin-unabhängige Gestaltung: Typografie, Tabellen, Bilder, Code, Druckansicht und alle epos-Bausteine

2026-08-21T17:36:50Z

Skin-unabhängige Gestaltung: Typografie, Tabellen, Bilder, Code, Druckansicht und alle epos-Bausteine

Neue Seite

/* ==========================================================================
MediaWiki:Common.css — EPOS-Plan Dokumentation
Skin-unabhaengige Gestaltung: Typografie-Feinheiten, Tabellen, Bilder,
Code, Druckansicht und alle Komponentenklassen mit Praefix "epos-",
die von den Vorlagen (Hinweis/Tipp/Achtung, Menue, Bild, Kachel,
Navigationsboxen, Website-Link) benutzt werden.

Aufbau
1. Farb- und Massvariablen (Design-Tokens)
2. Dunkelmodus-Werte (Citizen-Themeklassen)
3. Typografie-Feinheiten
4. Tabellen
5. Bilder und Figuren
6. Code und pre
7. Icons (SVG-Data-URIs, als CSS-Maske)
8. Komponenten: Hinweisboxen, Menuepfad, Bild, Kacheln,
Navigationsboxen, Website-Link, Hero
9. Druckansicht

Hinweis: Diese Datei setzt bewusst keine Skin-internen Klassen. Alles,
was Citizen betrifft (Kopfleiste, Karte, Inhaltsverzeichnis, Footer),
steht in MediaWiki:Citizen.css.
========================================================================== */

/* --------------------------------------------------------------------------
1. Design-Tokens (helle Darstellung)
Quelle: Design-Skizze "EPOS-Plan Dokumentation", Abschnitt 4.
-------------------------------------------------------------------------- */
:root {
--epos-primaer: #b5321f; /* Kopfleiste, Links, aktive Navigation */
--epos-akzent: #c0392b; /* Buttons, Icons, Balken */
--epos-primaer-dunkel: #8f2718; /* Link-Hover und besuchte Links */
--epos-signal: #dd3333; /* Signalrot, nur sparsam */
--epos-rosa: #fbe3e0; /* Icon-Kreise, Achtung-Box */
--epos-gruen: #2e7d32; /* Tipp-Icon und -Balken */
--epos-gruen-flaeche: #e6f4ea; /* Tipp-Box */
--epos-info-flaeche: #e0ecf0; /* Hinweis-Box */

--epos-seite: #eef1f5; /* Seitenhintergrund */
--epos-flaeche: #ffffff; /* Inhaltsflaeche */
--epos-flaeche-2: #f9fafb; /* Tabellenkopf, Code, Chips */

--epos-rahmen: #c5c8cc; /* kraeftiger Rahmen */
--epos-rahmen-leicht: #e3e6ea; /* Trennlinien, Tabellenrahmen */

--epos-text: #1f2933; /* Fliesstext */
--epos-text-2: #5b6572; /* Meta, Bildunterschriften */

/* Masse */
--epos-radius: 8px;
--epos-radius-klein: 4px;
--epos-balken: 4px; /* Balken links an den Hinweisboxen */
--epos-icon-kreis: 64px; /* Kachel-Icon-Kreis wie auf der Website */
--epos-schatten: 0 1px 2px rgba( 31, 41, 51, 0.05 ), 0 4px 16px rgba( 31, 41, 51, 0.06 );
}

/* --------------------------------------------------------------------------
2. Dunkelmodus
Citizen setzt die Themeklasse auf <html>:
.skin-theme-clientpref-day = hell
.skin-theme-clientpref-night = dunkel
.skin-theme-clientpref-os = folgt dem Betriebssystem
(belegt in docs/src/customization/theming.md, Abschnitt "Theme modes").
Andere Skins kennen diese Klassen nicht — dort bleibt es bei Abschnitt 1.

Die Werte spiegeln die dunklen Flaechen, die Citizen selbst berechnet
(siehe MediaWiki:Citizen.css, Abschnitt "Dunkelmodus"), damit die
Bausteine nahtlos im Skin sitzen. Kontraste (WCAG, gerundet):
Text 10,4:1 · Meta 7,2:1 · Link 6,9:1 · Tipp-Gruen 9,2:1.
-------------------------------------------------------------------------- */
:root.skin-theme-clientpref-night {
--epos-primaer: #ed7762; /* aufgehellter Markenrotton, 6,9:1 */
--epos-akzent: #f8907d;
--epos-primaer-dunkel: #f8907d; /* im Dunkeln wird Hover heller */
--epos-signal: #ff8a80;
--epos-rosa: #2c1a16;
--epos-gruen: #7cd591;
--epos-gruen-flaeche: #152318;
--epos-info-flaeche: #162126;

--epos-seite: #0b0908;
--epos-flaeche: #0f0c0c;
--epos-flaeche-2: #141110;

--epos-rahmen: #514c4a;
--epos-rahmen-leicht: #2c2827;

--epos-text: #c3bcba;
--epos-text-2: #a49c9b;

--epos-schatten: 0 1px 2px rgba( 0, 0, 0, 0.4 ), 0 4px 16px rgba( 0, 0, 0, 0.45 );
}

@media screen and ( prefers-color-scheme: dark ) {
:root.skin-theme-clientpref-os {
--epos-primaer: #ed7762;
--epos-akzent: #f8907d;
--epos-primaer-dunkel: #f8907d;
--epos-signal: #ff8a80;
--epos-rosa: #2c1a16;
--epos-gruen: #7cd591;
--epos-gruen-flaeche: #152318;
--epos-info-flaeche: #162126;

--epos-seite: #0b0908;
--epos-flaeche: #0f0c0c;
--epos-flaeche-2: #141110;

--epos-rahmen: #514c4a;
--epos-rahmen-leicht: #2c2827;

--epos-text: #c3bcba;
--epos-text-2: #a49c9b;

--epos-schatten: 0 1px 2px rgba( 0, 0, 0, 0.4 ), 0 4px 16px rgba( 0, 0, 0, 0.45 );
}
}

/* Der weisse Kreis hinter den Box-Icons ist im Dunkelmodus fehl am Platz */
:root.skin-theme-clientpref-night .epos-box-icon {
background-color: rgba( 255, 255, 255, 0.08 );
}

@media screen and ( prefers-color-scheme: dark ) {
:root.skin-theme-clientpref-os .epos-box-icon {
background-color: rgba( 255, 255, 255, 0.08 );
}
}

/* --------------------------------------------------------------------------
3. Typografie-Feinheiten
Groessen und Gewichte des Fliesstexts setzt der Skin (MediaWiki:Citizen.css).
Hier nur Details, die in jedem Skin gleich aussehen sollen.
-------------------------------------------------------------------------- */

/* Hoch- und tiefgestellte Zeichen sollen die Zeilenhoehe nicht aufreissen */
.mw-body-content sup,
.mw-body-content sub {
line-height: 1;
}

/* Abkuerzungen dezent markieren statt gepunktet unterstreichen */
.mw-body-content abbr[ title ] {
text-decoration: underline dotted var( --epos-rahmen );
cursor: help;
}

/* Aufzaehlungen etwas luftiger */
.mw-body-content ul li,
.mw-body-content ol li {
margin-bottom: 0.25em;
}

/* Definitionslisten: Begriff halbfett, Beschreibung eingerueckt */
.mw-body-content dt {
font-weight: 600;
}

/* Trennlinien */
.mw-body-content hr {
height: 1px;
background-color: var( --epos-rahmen-leicht );
border: 0;
}

/* Tastenkuerzel */
.mw-body-content kbd {
padding: 1px 6px;
font-size: 0.9em;
background-color: var( --epos-flaeche-2 );
border: 1px solid var( --epos-rahmen );
border-bottom-width: 2px;
border-radius: var( --epos-radius-klein );
}

/* Anker aus Vorlage:Anker: nimmt keinen Platz ein, springt aber korrekt an */
.epos-anker {
display: inline-block;
width: 0;
height: 0;
overflow: hidden;
}

/* --------------------------------------------------------------------------
4. Tabellen
-------------------------------------------------------------------------- */
.mw-body-content .wikitable {
background-color: var( --epos-flaeche );
border: 1px solid var( --epos-rahmen-leicht );
border-collapse: collapse;
border-radius: var( --epos-radius );
color: var( --epos-text );
margin: 1.25em 0;
}

.mw-body-content .wikitable > * > tr > th,
.mw-body-content .wikitable > * > tr > td {
border: 1px solid var( --epos-rahmen-leicht );
padding: 0.5em 0.75em;
text-align: left;
vertical-align: top;
}

.mw-body-content .wikitable > * > tr > th {
background-color: var( --epos-flaeche-2 );
color: var( --epos-text );
font-weight: 600;
}

/* Zebra: jede zweite Datenzeile leicht getoent */
.mw-body-content .wikitable > tbody > tr:nth-child( even ) > td {
background-color: var( --epos-flaeche-2 );
}

/* Tabellenbeschriftung */
.mw-body-content .wikitable > caption {
caption-side: bottom;
color: var( --epos-text-2 );
font-size: 0.9em;
padding-top: 0.5em;
text-align: left;
}

/* Zahlenspalten koennen mit class="epos-zahl" rechtsbuendig gesetzt werden */
.mw-body-content .wikitable td.epos-zahl,
.mw-body-content .wikitable th.epos-zahl {
font-variant-numeric: tabular-nums;
text-align: right;
}

/* Breite Tabellen rollen waagerecht, statt die Seite zu sprengen.
Citizen packt Tabellen von sich aus in einen Rollbereich mit der Klasse
.citizen-overflow (belegt in der Citizen-Doku, reference/classes). Diese
Regel ist die Rueckfallebene fuer alle anderen Skins und fuer die
Druckvorschau; innerhalb von .citizen-overflow wird sie zurueckgenommen. */
.mw-parser-output > .wikitable,
.mw-body-content > .wikitable {
display: block;
max-width: 100%;
overflow-x: auto;
width: max-content;
}

.citizen-overflow .wikitable {
display: table;
width: auto;
}

/* --------------------------------------------------------------------------
5. Bilder und Figuren
-------------------------------------------------------------------------- */
.mw-body-content .thumb img,
.mw-body-content .mw-default-size img,
.mw-body-content figure[ typeof~='mw:File/Thumb' ] img,
.mw-body-content .epos-bild img {
background-color: var( --epos-flaeche );
border: 1px solid var( --epos-rahmen-leicht );
border-radius: var( --epos-radius );
height: auto;
max-width: 100%;
}

.mw-body-content .thumbcaption,
.mw-body-content figcaption,
.mw-body-content .epos-bild-unterschrift {
color: var( --epos-text-2 );
font-size: 0.9375rem;
line-height: 1.45;
padding-top: 0.5em;
}

/* Vorlage:Bild — externe Screenshots von epos-plan.de */
.epos-bild {
display: block;
margin: 1.5em 0;
max-width: 100%;
}

.epos-bild img {
display: block;
width: 100%;
}

/* Das externe Bild steht im Wikitext auf einer eigenen Zeile und landet
dadurch in einem Absatz; dessen Aussenabstand wird hier aufgehoben. */
.epos-bild p {
margin: 0;
}

.epos-bild-unterschrift:empty {
display: none;
}

/* --------------------------------------------------------------------------
6. Code und pre
-------------------------------------------------------------------------- */
.mw-body-content code,
.mw-body-content pre,
.mw-body-content .mw-code,
.mw-body-content tt,
.mw-body-content samp {
background-color: var( --epos-flaeche-2 );
border: 1px solid var( --epos-rahmen-leicht );
color: var( --epos-text );
font-family: ui-monospace, 'SFMono-Regular', 'Consolas', 'Liberation Mono', 'Menlo', monospace;
font-size: 0.9375rem;
}

.mw-body-content code {
border-radius: var( --epos-radius-klein );
padding: 0.1em 0.35em;
}

.mw-body-content pre,
.mw-body-content .mw-code {
border-radius: var( --epos-radius );
line-height: 1.5;
overflow-x: auto;
padding: 1em;
}

/* Code innerhalb von pre nicht doppelt rahmen */
.mw-body-content pre code {
background: none;
border: 0;
padding: 0;
}

/* --------------------------------------------------------------------------
7. Icons
Selbst gezeichnete 24-px-Linien-Icons als SVG-Data-URI. Sie werden als
CSS-Maske eingesetzt, damit die Farbe aus dem umgebenden Baustein kommt
(background-color). Kein fremdes Icon-Set.
-------------------------------------------------------------------------- */
.epos-icon {
background-color: currentcolor;
display: inline-block;
flex: none;
height: 24px;
-webkit-mask-position: center;
mask-position: center;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-size: contain;
mask-size: contain;
width: 24px;
}

/* Info: Kreis mit "i" */
.epos-icon-info {
-webkit-mask-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v5.5'/%3E%3Cpath d='M12 7.6h.01'/%3E%3C/svg%3E" );
mask-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v5.5'/%3E%3Cpath d='M12 7.6h.01'/%3E%3C/svg%3E" );
}

/* Tipp: Gluehbirne */
.epos-icon-tipp {
-webkit-mask-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2.8a6.2 6.2 0 0 0-3.6 11.25c.62.45.97 1.16.97 1.9v.35h5.26v-.35c0-.74.35-1.45.97-1.9A6.2 6.2 0 0 0 12 2.8z'/%3E%3Cpath d='M9.4 18.5h5.2'/%3E%3Cpath d='M10.4 21h3.2'/%3E%3C/svg%3E" );
mask-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2.8a6.2 6.2 0 0 0-3.6 11.25c.62.45.97 1.16.97 1.9v.35h5.26v-.35c0-.74.35-1.45.97-1.9A6.2 6.2 0 0 0 12 2.8z'/%3E%3Cpath d='M9.4 18.5h5.2'/%3E%3Cpath d='M10.4 21h3.2'/%3E%3C/svg%3E" );
}

/* Achtung: Dreieck mit Ausrufezeichen */
.epos-icon-achtung {
-webkit-mask-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.4 2.6 20.2h18.8L12 3.4z'/%3E%3Cpath d='M12 9.6v4.6'/%3E%3Cpath d='M12 17.3h.01'/%3E%3C/svg%3E" );
mask-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.4 2.6 20.2h18.8L12 3.4z'/%3E%3Cpath d='M12 9.6v4.6'/%3E%3Cpath d='M12 17.3h.01'/%3E%3C/svg%3E" );
}

/* Extern: Pfeil aus Kasten */
.epos-icon-extern {
-webkit-mask-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 4h6v6'/%3E%3Cpath d='M20 4 11.5 12.5'/%3E%3Cpath d='M18 14.5V19a1.5 1.5 0 0 1-1.5 1.5h-11A1.5 1.5 0 0 1 4 19V8a1.5 1.5 0 0 1 1.5-1.5H10'/%3E%3C/svg%3E" );
mask-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 4h6v6'/%3E%3Cpath d='M20 4 11.5 12.5'/%3E%3Cpath d='M18 14.5V19a1.5 1.5 0 0 1-1.5 1.5h-11A1.5 1.5 0 0 1 4 19V8a1.5 1.5 0 0 1 1.5-1.5H10'/%3E%3C/svg%3E" );
}

/* Erste Schritte: Fahne */
.epos-icon-erste-schritte {
-webkit-mask-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.5 21.5V3'/%3E%3Cpath d='M5.5 4.2h12.8l-2.6 3.9 2.6 3.9H5.5z'/%3E%3C/svg%3E" );
mask-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.5 21.5V3'/%3E%3Cpath d='M5.5 4.2h12.8l-2.6 3.9 2.6 3.9H5.5z'/%3E%3C/svg%3E" );
}

/* Programmablauf: nummerierte Liste */
.epos-icon-programmablauf {
-webkit-mask-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 5.5h11'/%3E%3Cpath d='M10 12h11'/%3E%3Cpath d='M10 18.5h11'/%3E%3Cpath d='M3.4 3.9 5 3.2v4.6'/%3E%3Cpath d='M3.2 10.6a1.5 1.5 0 0 1 2.6 1c0 1.1-2.6 1.6-2.6 3h2.8'/%3E%3Cpath d='M3.3 16.4h2.6l-1.5 1.9a1.35 1.35 0 1 1-1.1 2.1'/%3E%3C/svg%3E" );
mask-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 5.5h11'/%3E%3Cpath d='M10 12h11'/%3E%3Cpath d='M10 18.5h11'/%3E%3Cpath d='M3.4 3.9 5 3.2v4.6'/%3E%3Cpath d='M3.2 10.6a1.5 1.5 0 0 1 2.6 1c0 1.1-2.6 1.6-2.6 3h2.8'/%3E%3Cpath d='M3.3 16.4h2.6l-1.5 1.9a1.35 1.35 0 1 1-1.1 2.1'/%3E%3C/svg%3E" );
}

/* Programmfunktionen: 2x2-Raster */
.epos-icon-programmfunktionen {
-webkit-mask-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linejoin='round'%3E%3Crect x='3.4' y='3.4' width='7.2' height='7.2' rx='1.6'/%3E%3Crect x='13.4' y='3.4' width='7.2' height='7.2' rx='1.6'/%3E%3Crect x='3.4' y='13.4' width='7.2' height='7.2' rx='1.6'/%3E%3Crect x='13.4' y='13.4' width='7.2' height='7.2' rx='1.6'/%3E%3C/svg%3E" );
mask-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linejoin='round'%3E%3Crect x='3.4' y='3.4' width='7.2' height='7.2' rx='1.6'/%3E%3Crect x='13.4' y='3.4' width='7.2' height='7.2' rx='1.6'/%3E%3Crect x='3.4' y='13.4' width='7.2' height='7.2' rx='1.6'/%3E%3Crect x='13.4' y='13.4' width='7.2' height='7.2' rx='1.6'/%3E%3C/svg%3E" );
}

/* Grundlagen: aufgeschlagenes Buch */
.epos-icon-grundlagen {
-webkit-mask-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 5.4A1.4 1.4 0 0 1 4.9 4h4.4A2.7 2.7 0 0 1 12 5.6 2.7 2.7 0 0 1 14.7 4h4.4a1.4 1.4 0 0 1 1.4 1.4v11.9a1.4 1.4 0 0 1-1.4 1.4h-4.6A2.2 2.2 0 0 0 12 20a2.2 2.2 0 0 0-2.5-1.3H4.9a1.4 1.4 0 0 1-1.4-1.4z'/%3E%3Cpath d='M12 5.6V20'/%3E%3C/svg%3E" );
mask-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 5.4A1.4 1.4 0 0 1 4.9 4h4.4A2.7 2.7 0 0 1 12 5.6 2.7 2.7 0 0 1 14.7 4h4.4a1.4 1.4 0 0 1 1.4 1.4v11.9a1.4 1.4 0 0 1-1.4 1.4h-4.6A2.2 2.2 0 0 0 12 20a2.2 2.2 0 0 0-2.5-1.3H4.9a1.4 1.4 0 0 1-1.4-1.4z'/%3E%3Cpath d='M12 5.6V20'/%3E%3C/svg%3E" );
}

/* Industrie und Gewerbe: Fabrik mit Schornstein */
.epos-icon-industrie {
-webkit-mask-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 20.5h19'/%3E%3Cpath d='M3.5 20.5V6.5h4V13l5.5-3.5V13l5.5-3.5v11'/%3E%3Cpath d='M5.5 10h.01'/%3E%3C/svg%3E" );
mask-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 20.5h19'/%3E%3Cpath d='M3.5 20.5V6.5h4V13l5.5-3.5V13l5.5-3.5v11'/%3E%3Cpath d='M5.5 10h.01'/%3E%3C/svg%3E" );
}

/* Beispiele: Ordner */
.epos-icon-beispiele {
-webkit-mask-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.2 6.6A1.6 1.6 0 0 1 4.8 5h4.3l2.1 2.6h8A1.6 1.6 0 0 1 20.8 9.2v8.6a1.6 1.6 0 0 1-1.6 1.6H4.8a1.6 1.6 0 0 1-1.6-1.6z'/%3E%3C/svg%3E" );
mask-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.2 6.6A1.6 1.6 0 0 1 4.8 5h4.3l2.1 2.6h8A1.6 1.6 0 0 1 20.8 9.2v8.6a1.6 1.6 0 0 1-1.6 1.6H4.8a1.6 1.6 0 0 1-1.6-1.6z'/%3E%3C/svg%3E" );
}

/* Installation und Update: Pfeil nach unten in Schale */
.epos-icon-installation {
-webkit-mask-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v10.4'/%3E%3Cpath d='m7.9 9.4 4.1 4.1 4.1-4.1'/%3E%3Cpath d='M4 15.6v3.4A1.6 1.6 0 0 0 5.6 20.6h12.8a1.6 1.6 0 0 0 1.6-1.6v-3.4'/%3E%3C/svg%3E" );
mask-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v10.4'/%3E%3Cpath d='m7.9 9.4 4.1 4.1 4.1-4.1'/%3E%3Cpath d='M4 15.6v3.4A1.6 1.6 0 0 0 5.6 20.6h12.8a1.6 1.6 0 0 0 1.6-1.6v-3.4'/%3E%3C/svg%3E" );
}

/* FAQ: Fragezeichen im Kreis */
.epos-icon-faq {
-webkit-mask-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M9.4 9.5a2.7 2.7 0 0 1 5.25.85c0 1.8-2.65 2.25-2.65 4'/%3E%3Cpath d='M12 17.6h.01'/%3E%3C/svg%3E" );
mask-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M9.4 9.5a2.7 2.7 0 0 1 5.25.85c0 1.8-2.65 2.25-2.65 4'/%3E%3Cpath d='M12 17.6h.01'/%3E%3C/svg%3E" );
}

/* Update-Logbuch: Uhr mit Pfeil */
.epos-icon-update {
-webkit-mask-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.6 12a8.6 8.6 0 1 1-2.6-6.15'/%3E%3Cpath d='M20.8 3.6v4.7h-4.7'/%3E%3Cpath d='M12 7.4V12l3.1 1.9'/%3E%3C/svg%3E" );
mask-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.6 12a8.6 8.6 0 1 1-2.6-6.15'/%3E%3Cpath d='M20.8 3.6v4.7h-4.7'/%3E%3Cpath d='M12 7.4V12l3.1 1.9'/%3E%3C/svg%3E" );
}

/* --------------------------------------------------------------------------
8a. Hinweisboxen — Vorlage:Hinweis, Vorlage:Tipp, Vorlage:Achtung
Aufbau: 4-px-Balken links, Icon im Kreis, Titel, Text.
-------------------------------------------------------------------------- */
.epos-box {
background-color: var( --epos-info-flaeche );
border-left: var( --epos-balken ) solid var( --epos-akzent );
border-radius: 0 var( --epos-radius ) var( --epos-radius ) 0;
color: var( --epos-text );
display: flex;
gap: 0.875rem;
margin: 1.5em 0;
padding: 1rem 1.25rem;
}

.epos-box-icon {
align-items: center;
background-color: rgba( 255, 255, 255, 0.75 );
border-radius: 50%;
color: var( --epos-akzent );
display: flex;
flex: none;
height: 40px;
justify-content: center;
width: 40px;
}

.epos-box-inhalt {
min-width: 0;
}

.epos-box-titel {
font-size: 1rem;
font-weight: 700;
line-height: 1.35;
margin-bottom: 0.2em;
}

/* Ohne Titel (titel= leer gelassen) faellt die Zeile weg */
.epos-box-titel:empty {
display: none;
}

.epos-box-text > :first-child {
margin-top: 0;
}

.epos-box-text > :last-child {
margin-bottom: 0;
}

/* Hinweis: Infoflaeche, Icon dunkel */
.epos-box-hinweis {
background-color: var( --epos-info-flaeche );
border-left-color: var( --epos-text );
}

.epos-box-hinweis .epos-box-icon {
color: var( --epos-text );
}

/* Tipp: Gruen */
.epos-box-tipp {
background-color: var( --epos-gruen-flaeche );
border-left-color: var( --epos-gruen );
}

.epos-box-tipp .epos-box-icon {
color: var( --epos-gruen );
}

/* Achtung: Rosa, Icon im Akzentrot */
.epos-box-achtung {
background-color: var( --epos-rosa );
border-left-color: var( --epos-akzent );
}

.epos-box-achtung .epos-box-icon {
color: var( --epos-akzent );
}

/* --------------------------------------------------------------------------
8b. Menuepfad — Vorlage:Menü
Graue Chips mit "›" dazwischen. Leere Ebenen sind unsichtbar; das
Trennzeichen erscheint nur zwischen zwei gefuellten Ebenen.
-------------------------------------------------------------------------- */
.epos-menue {
align-items: center;
display: inline-flex;
flex-wrap: wrap;
/* Die waagerechte Luecke traegt das Trennzeichen, siehe unten. */
gap: 0.2em 0.95em;
vertical-align: baseline;
}

.epos-menue-stufe {
background-color: var( --epos-flaeche-2 );
border: 1px solid var( --epos-rahmen-leicht );
border-radius: var( --epos-radius-klein );
color: var( --epos-text );
font-size: 0.9375rem;
font-weight: 500;
padding: 0.1em 0.5em;
white-space: nowrap;
}

.epos-menue-stufe:empty {
display: none;
}

/* Das Trennzeichen sitzt in der Luecke zwischen zwei gefuellten Chips,
nicht im Chip selbst. Leere Ebenen ueberspringt der Nachbarselektor. */
.epos-menue-stufe:not( :empty ) ~ .epos-menue-stufe:not( :empty ) {
position: relative;
}

.epos-menue-stufe:not( :empty ) ~ .epos-menue-stufe:not( :empty )::before {
color: var( --epos-text-2 );
content: '\203A';
font-weight: 400;
left: -0.6em;
position: absolute;
top: 50%;
transform: translateY( -50% );
}

/* --------------------------------------------------------------------------
8c. Kacheln — Vorlage:Kachel und Vorlage:Kachelraster-Anfang/-Ende
-------------------------------------------------------------------------- */
.epos-kachelraster {
display: grid;
gap: 1.25rem;
grid-template-columns: repeat( auto-fit, minmax( 240px, 1fr ) );
margin: 1.75em 0;
}

.epos-kachel {
background-color: var( --epos-flaeche );
border: 1px solid var( --epos-rahmen-leicht );
border-radius: var( --epos-radius );
display: flex;
flex-direction: column;
gap: 0.75rem;
padding: 1.5rem 1.25rem;
position: relative;
transition: border-color 120ms ease, box-shadow 120ms ease, transform 120ms ease;
}

.epos-kachel:hover,
.epos-kachel:focus-within {
border-color: var( --epos-akzent );
box-shadow: var( --epos-schatten );
}

.epos-kachel-icon {
align-items: center;
background-color: var( --epos-rosa );
border-radius: 50%;
color: var( --epos-akzent );
display: flex;
flex: none;
height: var( --epos-icon-kreis );
justify-content: center;
width: var( --epos-icon-kreis );
}

.epos-kachel-icon .epos-icon {
height: 30px;
width: 30px;
}

.epos-kachel-titel {
display: block;
font-size: 1.125rem;
font-weight: 700;
line-height: 1.3;
}

/* Ganze Kachel klickbar machen ("stretched link") */
.epos-kachel-titel a {
color: var( --epos-text );
text-decoration: none;
}

.epos-kachel-titel a::after {
content: '';
inset: 0;
position: absolute;
}

.epos-kachel:hover .epos-kachel-titel a,
.epos-kachel-titel a:hover {
color: var( --epos-primaer );
}

.epos-kachel-text {
color: var( --epos-text-2 );
display: block;
font-size: 0.9375rem;
line-height: 1.5;
}

.epos-kachel-text:empty {
display: none;
}

/* --------------------------------------------------------------------------
8d. Hero-Block der Hauptseite
-------------------------------------------------------------------------- */
.epos-hero {
background-color: var( --epos-primaer );
background-image: linear-gradient( 135deg, #b5321f 0%, #8f2718 100% );
border-radius: var( --epos-radius );
color: #fff;
margin: 0 0 1.75em;
padding: 2.5rem 2rem;
}

.epos-hero-titel {
color: #fff;
/* Auf schmalen Schirmen kleiner, damit "Dokumentation" nicht getrennt
wird; ab etwa 570 px Textbreite bleibt es bei 32 px. */
font-size: clamp( 1.5rem, 5.6vw, 2rem );
font-weight: 700;
line-height: 1.2;
margin: 0 0 0.4em;
overflow-wrap: normal;
text-wrap: balance;
}

.epos-hero-text {
color: rgba( 255, 255, 255, 0.92 );
font-size: 1.0625rem;
line-height: 1.55;
margin: 0;
max-width: 62ch;
overflow-wrap: normal;
}

@media screen and ( max-width: 639px ) {
.epos-hero {
padding: 1.5rem 1.25rem;
}

.epos-hero-text {
font-size: 1rem;
}
}

/* Zwei Spalten unter dem Kachelraster */
.epos-spalten {
display: grid;
gap: 1.5rem 2rem;
grid-template-columns: repeat( auto-fit, minmax( 260px, 1fr ) );
margin: 2em 0 0;
}

.epos-spalte-titel {
border-bottom: 1px solid var( --epos-rahmen-leicht );
font-size: 1.25rem;
font-weight: 700;
margin: 0 0 0.6em;
padding-bottom: 0.3em;
}

/* --------------------------------------------------------------------------
8e. Externer Link auf epos-plan.de — Vorlage:Website
-------------------------------------------------------------------------- */
.epos-website {
white-space: nowrap;
}

.epos-website a {
white-space: normal;
}

.epos-website::after {
background-color: currentcolor;
content: '';
display: inline-block;
height: 0.85em;
margin-left: 0.3em;
-webkit-mask-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 4h6v6'/%3E%3Cpath d='M20 4 11.5 12.5'/%3E%3Cpath d='M18 14.5V19a1.5 1.5 0 0 1-1.5 1.5h-11A1.5 1.5 0 0 1 4 19V8a1.5 1.5 0 0 1 1.5-1.5H10'/%3E%3C/svg%3E" );
mask-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 4h6v6'/%3E%3Cpath d='M20 4 11.5 12.5'/%3E%3Cpath d='M18 14.5V19a1.5 1.5 0 0 1-1.5 1.5h-11A1.5 1.5 0 0 1 4 19V8a1.5 1.5 0 0 1 1.5-1.5H10'/%3E%3C/svg%3E" );
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-size: contain;
mask-size: contain;
vertical-align: -0.06em;
width: 0.85em;
}

/* Das Standard-Symbol des Skins fuer externe Links entfaellt hier */
.epos-website a.external {
background: none;
padding-right: 0;
}

/* --------------------------------------------------------------------------
8f. Navigationsboxen am Seitenende — Vorlage:Navigation …
-------------------------------------------------------------------------- */
.epos-navbox {
background-color: var( --epos-flaeche-2 );
border: 1px solid var( --epos-rahmen-leicht );
border-radius: var( --epos-radius );
clear: both;
margin: 2.5em 0 0;
padding: 1rem 1.25rem;
}

.epos-navbox-titel {
color: var( --epos-text-2 );
font-size: 0.8125rem;
font-weight: 600;
letter-spacing: 0.06em;
margin-bottom: 0.6em;
text-transform: uppercase;
}

.epos-navbox-titel a {
color: inherit;
}

.mw-body-content .epos-navbox ul {
display: flex;
flex-wrap: wrap;
gap: 0.4rem 0.75rem;
list-style: none;
margin: 0;
padding: 0;
}

.mw-body-content .epos-navbox li {
font-size: 0.9375rem;
line-height: 1.4;
list-style: none;
margin: 0;
}

/* Die aktuelle Seite ist ein Selbstlink und wird von MediaWiki fett gesetzt */
.epos-navbox a.mw-selflink {
color: var( --epos-primaer );
font-weight: 700;
}

/* --------------------------------------------------------------------------
9. Druckansicht
-------------------------------------------------------------------------- */
@media print {
/* Navigation, Kopfleiste und Bedienelemente ausblenden.
Die Citizen-eigenen Elemente blendet der Skin selbst aus
(common/print.less); hier stehen die skin-unabhaengigen. */
.noprint,
.epos-navbox,
#mw-navigation,
#mw-panel,
#p-search,
#footer-places,
#catlinks,
.mw-editsection,
.mw-jump-link,
.mw-indicators {
display: none !important;
}

body {
background: #fff !important;
color: #000 !important;
font-size: 11pt;
}

/* Links schwarz drucken */
a,
a:visited,
.mw-body-content a.external,
.mw-body-content a.new {
color: #000 !important;
text-decoration: none !important;
}

/* Adresse externer Links anhaengen */
.mw-body-content a.external::after {
content: ' (' attr( href ) ')';
font-size: 9pt;
word-break: break-all;
}

/* Interne Wiki-Links mit voller Adresse versehen ist unnoetig lang —
nur der Seitentitel bleibt stehen. */
.mw-body-content a[ href^='/wiki/' ]::after,
.mw-body-content a[ href^='#' ]::after {
content: '';
}

/* Boxen und Tabellen nicht ueber Seitenumbrueche reissen */
.epos-box,
.epos-kachel,
.wikitable,
.epos-bild,
img {
break-inside: avoid;
}

/* Flaechen fuer den Druck entsaettigen, Struktur bleibt sichtbar */
.epos-box {
background: none !important;
border: 1px solid #999 !important;
border-left-width: 3pt !important;
}

.epos-kachelraster {
display: block;
}

.epos-kachel {
border: 1px solid #999 !important;
margin-bottom: 0.5em;
}

.epos-hero {
background: none !important;
border: 1px solid #999 !important;
color: #000 !important;
}

.epos-hero-titel,
.epos-hero-text {
color: #000 !important;
}

.mw-body-content .wikitable > * > tr > th,
.mw-body-content .wikitable > * > tr > td {
border: 1px solid #999 !important;
}

.mw-body-content .wikitable > tbody > tr:nth-child( even ) > td {
background: none !important;
}
}

MediaWiki:Common.css - Versionsgeschichte

Epos: Symbol „dokumentation“ (Abschnitt 7) und Klasse epos-nur-angemeldet (Abschnitt 8g) ergänzt

Epos: Fehlende Seiten von normalen Verweisen unterscheidbar machen

Epos: Skin-unabhängige Gestaltung: Typografie, Tabellen, Bilder, Code, Druckansicht und alle epos-Bausteine

@@ Zeile 863: / Zeile 863: @@
 		background: none !important;
+	}
+}