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: 5px;
        left: 5px;
        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;
        display: block !important; /* Sicherstellen, dass die Seitenleiste nicht ausgeblendet ist */
    }

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

    /* Logo in der Seitenleiste zentriert anzeigen */
    #p-logo {
        display: block !important; /* Sicherstellen, dass das Logo sichtbar ist */
        text-align: center;
        margin: 10px 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: 60px; /* Abstand für Sandwich-Menü 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: 0.9em; /* Reduzierte Schriftgröße für Tabellen */
        display: block; /* Ermöglicht horizontales Scrollen */
        overflow-x: auto; /* Horizontales Scrollen für breite Tabellen */
    }

    /* Nicht verlinkter Text in Tabellen */
    #mw-content-text table td,
    #mw-content-text table th {
        font-size: 0.9em !important; /* Reduzierte Schriftgröße */
        word-wrap: break-word; /* Text umbrechen */
    }

    /* Verlinkter Text in Tabellen */
    #mw-content-text table a {
        font-size: 1em; /* Links etwas größer, aber nicht zu groß */
    }

    /* Bilder in Tabellen und im Content-Bereich begrenzen */
    #mw-content-text table img,
    #mw-content-text img {
        max-width: 100%; /* Bilder auf die Breite des Content-Bereichs begrenzen */
        height: auto; /* Proportionen beibehalten */
        display: block; /* Verhindert Überlappung */
    }

    /* Tabellen mit 4 Spalten untereinander anzeigen */
    #mw-content-text table tr {
        display: flex;
        flex-wrap: wrap; /* Spalten untereinander anordnen */
    }

    #mw-content-text table td,
    #mw-content-text table th {
        flex: 1 1 100%; /* Jede Zelle nimmt die volle Breite ein */
        box-sizing: border-box;
    }

    /* 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% !important; /* Volle Breite erzwingen */
        max-width: 100%;
        font-size: 1em;
        padding: 8px;
        box-sizing: border-box;
    }
}

/* 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.85em; /* Noch kleinere Schrift für Tabellen */
    }

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

    #mw-content-text table a {
        font-size: 0.9em; /* Links etwas größer, aber nicht zu groß */
    }

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