Jump to content
Suche aufrufen
Menü aufrufen
  • 64 Artikel
  • 3 Benutzer
  • 437 Bearbeitungen
wiki.epos-plan.de
Toggle preferences menu
Persönliches Menü aufrufen
Nicht angemeldet
Ihre IP-Adresse wird öffentlich sichtbar sein, wenn Sie Änderungen vornehmen.

MediaWiki:Common.css

MediaWiki-Schnittstellenseite
Weitere Optionen

Hinweis: Leere nach dem Veröffentlichen den Browser-Cache, um die Änderungen sehen zu können.

  • Firefox/Safari: Umschalttaste drücken und gleichzeitig Aktualisieren anklicken oder entweder Strg+F5 oder Strg+R (⌘+R auf dem Mac) drücken
  • Google Chrome: Umschalttaste+Strg+R (⌘+Umschalttaste+R auf dem Mac) drücken
  • Edge: Strg+F5 drücken oder Strg drücken und gleichzeitig Aktualisieren anklicken
/* ==========================================================================
   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, Nur-fuer-Angemeldete
     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" );
}

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

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

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

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

/* --------------------------------------------------------------------------
   Verweise auf noch nicht angelegte Seiten
   Die normale Verweisfarbe ist bereits das EPOS-Rot; deshalb werden fehlende
   Seiten hier grau und gestrichelt unterstrichen dargestellt statt rot.
   -------------------------------------------------------------------------- */
.mw-body-content a.new,
.mw-body-content a.new:visited {
	color: var( --epos-text-2, #5b6572 );
	text-decoration: underline;
	text-decoration-style: dashed;
	text-underline-offset: 0.15em;
}

.mw-body-content a.new:hover {
	color: var( --epos-text, #1f2933 );
}
Abgerufen von „https://wiki.epos-plan.de/index.php?title=MediaWiki:Common.css&oldid=169“
Zuletzt geändert
Diese Seite wurde zuletzt am 22. August 2026 um 20:45 Uhr bearbeitet.