MediaWiki:Common.css

/* Das folgende CSS wird für alle Benutzeroberflächen geladen. */
.pdf-link::after {
    content: url(/w/images/Pdf_icon.png); /* Pfad zum Icon anpassen */
    padding-left: 5px;
}

/* Basis-Schriftgröße und Skalierung für alle Geräte */
body {
    font-size: 16px; /* Einheitliche Basis-Schriftgröße */
    line-height: 1.6; /* Bessere Lesbarkeit */
}

/* Schriftgrößen für Überschriften vereinheitlichen */
h1, h2, h3, h4, h5, h6 {
    font-size: 1.5em; /* Anpassen nach Bedarf */
    line-height: 1.3;
}

/* Inhaltsbereich für mobile Geräte anpassen */
#mw-content-text {
    width: 100%;
    max-width: 100%;
    padding: 10px;
    box-sizing: border-box;
}

/* Sandwich-Menü und Seitenleiste auf mobilen Geräten */
@media screen and (max-width: 768px) {
    /* Sandwich-Menü-Symbol */
    .sandwich-menu {
        font-size: 24px;
        cursor: pointer;
        padding: 10px;
        position: fixed;
        top: 10px;
        left: 10px;
        z-index: 1000;
        background: #f8f8f8;
        border: 1px solid #ccc;
        border-radius: 5px;
    }

    /* Seitenleiste standardmäßig ausblenden */
    #mw-panel {
        position: fixed;
        top: 0;
        left: -250px; /* Ausblenden durch Verschieben nach links */
        width: 250px;
        height: 100%;
        background: #f8f8f8;
        transition: left 0.3s ease;
        z-index: 999;
    }

    /* Seitenleiste sichtbar machen */
    #mw-panel.visible {
        left: 0; /* Einblenden durch Verschieben nach rechts */
    }

    /* Logo in der Seitenleiste zentrieren */
    #p-logo {
        text-align: center;
        margin: 0 auto;
    }

    #p-logo a {
        display: inline-block;
    }

    /* Links in der Seitenleiste größer */
    #mw-panel .vector-menu-portal a {
        font-size: 1.1em; /* Größere Schrift für Links in der Seitenleiste */
    }

    /* Inhaltsbereich anpassen */
    #content {
        margin-left: 0 !important; /* Seitenleisten-Margin entfernen */
        width: 100%;
        padding: 10px;
        margin-top: 50px; /* Abstand für die Kopfzeile und Tabs */
    }

    /* Navigationselemente anpassen */
    .vector-menu-portal {
        width: 100%;
        margin: 0;
    }

    .vector-menu-heading {
        font-size: 1em;
        padding: 10px;
    }

    .vector-menu-content-list {
        font-size: 0.9em;
    }

    /* Inhaltsverzeichnis anpassen */
    #toc {
        width: 100%;
        font-size: 0.9em;
    }

    /* Schriftgrößen für Inhalte anpassen */
    #mw-content-text p,
    #mw-content-text li,
    #mw-content-text div {
        font-size: 1em; /* Einheitliche Schriftgröße für Text */
    }

    /* Tabellen in mobiler Ansicht anpassen */
    #mw-content-text table {
        width: 100%;
        font-size: 1em; /* Einheitliche Schriftgröße für Tabellen */
    }

    /* Nicht verlinkter Text in Tabellen */
    #mw-content-text table td,
    #mw-content-text table th {
        font-size: 1em !important; /* Einheitliche Schriftgröße */
    }

    /* Verlinkter Text in Tabellen */
    #mw-content-text table a {
        font-size: 1.1em; /* Links in Tabellen größer machen */
    }

    /* Links und Buttons anpassen */
    a {
        font-size: 1em;
    }

    /* Kopfzeile anpassen */
    #mw-head {
        position: fixed; /* Kopfzeile fixieren, damit sie oben bleibt */
        top: 0;
        width: 100%;
        padding: 10px;
        z-index: 1000; /* Sicherstellen, dass die Tabs über dem Content liegen */
        background: #fff; /* Hintergrundfarbe, damit der Content nicht durchscheint */
    }

    #mw-head-base {
        margin: 0;
    }

    /* Tabs (Hauptseite/Diskussion) anpassen */
    #p-cactions {
        position: relative;
        top: 0;
        width: 100%;
        margin: 0;
        padding: 0;
    }

    #p-cactions .vector-menu-content {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
    }

    #p-cactions .vector-menu-content li {
        margin: 0 5px;
    }

    #p-cactions .vector-menu-content a {
        font-size: 1em;
    }

    /* Suchleiste anpassen */
    #p-search {
        width: 100%;
        margin: 10px 0;
    }

    #p-search form {
        width: 100%;
    }

    #searchInput {
        width: 100%;
        font-size: 1em;
        padding: 5px;
    }

    /* Gap zwischen Menübutton und Content reduzieren */
    #content {
        margin-top: 60px; /* Abstand für Sandwich-Menü und Tabs */
    }

    .sandwich-menu {
        top: 5px; /* Weniger Abstand nach oben */
        left: 5px; /* Weniger Abstand nach links */
    }
}

/* Für sehr kleine Bildschirme (z. B. Smartphones) */
@media screen and (max-width: 480px) {
    h1, h2, h3, h4, h5, h6 {
        font-size: 1.2em; /* Kleinere Überschriften auf sehr kleinen Bildschirmen */
    }

    #mw-content-text p,
    #mw-content-text li,
    #mw-content-text div {
        font-size: 0.95em; /* Etwas kleinere Schrift für Text */
    }

    /* Tabellen auf sehr kleinen Bildschirmen */
    #mw-content-text table {
        font-size: 0.95em; /* Etwas kleinere Schrift für Tabellen */
    }

    #mw-content-text table td,
    #mw-content-text table th {
        font-size: 0.95em !important; /* Einheitliche Schriftgröße */
    }

    #mw-content-text table a {
        font-size: 1em; /* Links in Tabellen etwas größer */
    }

    /* Links in der Seitenleiste auf sehr kleinen Bildschirmen */
    #mw-panel .vector-menu-portal a {
        font-size: 1em; /* Etwas kleinere Schrift für Links in der Seitenleiste */
    }

    .vector-menu-heading {
        font-size: 0.9em;
    }

    .vector-menu-content-list {
        font-size: 0.85em;
    }

    /* Tabs auf sehr kleinen Bildschirmen */
    #p-cactions .vector-menu-content a {
        font-size: 0.9em;
    }
}