MediaWiki:Common.css

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

/* ==========================================================================
   1. SCHRIFTEN & GLOBALE ÜBERSCHRIFTEN (Gilt für Hell UND Dunkel)
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@200;400&family=Open+Sans&display=swap');

body {
    font-family: 'Open Sans', sans-serif !important;
}

h1, h2, h3 {
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 200 !important;
    position: relative;
    display: table; /* Wichtig für die korrekte Längenberechnung der Joomla-Linie */
    margin-bottom: 25px;
    padding-bottom: 8px;
    border-bottom: none !important; /* MediaWiki-Standard entfernen */
}

/* ==========================================================================
   2. STANDARD / HELL (Elegantes Weiß)
   ========================================================================== */
:root, body, .mw-body, #content {
    background-color: #ffffff !important;
    background-image: none !important;
    color: #333333;
}

h1, h2, h3 { color: #333333; }

/* Linie im Hellen */
h1::after, h2::after, h3::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    height: 2px;
    width: 120%; /* 20% Überhang */
    background: linear-gradient(to right, #00adef 0%, #00adef 60%, #e5e5e5 60%, #e5e5e5 100%);
}

/* ==========================================================================
   3. AUTOMATISCH ODER ERZWUNGEN DUNKTEL (Go-Medical Dark Schema)
   ========================================================================== */
@media (prefers-color-scheme: dark) {
    :root, body, .mw-body, #content, .citizen-page-container {
        background-color: #1a222d !important;
        background-image: none !important;
        color: #f1f5f9 !important;
    }

    .mw-header, .citizen-sidebar, .citizen-drawer, .mw-portlet {
        background-color: #131a22 !important;
        border-color: #2e3c4e !important;
    }

    h1, h2, h3 { color: #ffffff !important; }

    /* Linie im Dunklen wechselt im rechten Part zu Blau-Grau */
    h1::after, h2::after, h3::after {
        background: linear-gradient(to right, #00adef 0%, #00adef 60%, #2e3c4e 60%, #2e3c4e 100%) !important;
    }

    a, a.external { color: #38bdf8 !important; }
}

/* ==========================================================================
   4. WIKIPEDIA-ICON (Aus Schritt 1)
   ========================================================================== */
.wp-icon-link a.external {
    background-image: url(https://upload.wikimedia.org/wikipedia/commons/7/77/Wikipedia_svg_logo.svg) !important;
    padding-left: 20px !important;
    background-size: 16px 16px !important;
    background-position: center left !important;
    background-repeat: no-repeat !important;
}
/* ==========================================================================
   Optische Bereinigungen (Buttons & Footer-Logo)
   ========================================================================== */

/* 1. Diskussion-Button ausblenden */
#ca-talk, .citizen-action-talk, a[href*="Diskussion:"] {
    display: none !important;
}

/* 2. Standard-Logos im Footer komplett unsichtbar machen */
.footer-icons, .mw-footer-impl-poweredby, .citizen-footer__poweredby img {
    display: none !important;
}

/* ==========================================================================
   Optische Bereinigungen (Buttons & Footer-Logo)
   ========================================================================== */

/* 1. Diskussion-Button ausblenden */
#ca-talk, .citizen-action-talk, a[href*="Diskussion:"] {
    display: none !important;
}

/* 2. Container für das Logo vorbereiten und "powered by" Text darüberlegen */
.citizen-footer__poweredby {
    display: block !important;
    position: relative;
    padding-top: 25px; /* Schafft präzise Platz für den Text oben */
    text-align: center;
}

/* Den Text "powered by" exakt über dem Logo platzieren */
.citizen-footer__poweredby::before {
    content: "powered by";
    font-family: 'Open Sans', sans-serif;
    font-size: 12px;
    color: #777777; /* Grau im Light Mode */
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    display: block;
    white-space: nowrap;
}

/* Textfarbe für den Dark Mode anpassen */
@media (prefers-color-scheme: dark) {
    .citizen-footer__poweredby::before {
        color: #a0aec0; /* Helleres Grau im Dunkeln */
    }
}

/* Größe des neuen Logos im Footer optimieren */
.citizen-footer__poweredby img {
    height: auto !important;
    max-width: 150px !important;
    display: inline-block !important;
}