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 */
    overflow-x: hidden; /* Verhindert horizontale Scrollbalken */
    margin: 0; /* Entfernt jegliche Margins am Body */
    padding: 0; /* Entfernt jegliche Paddings am Body */
}

/* 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;
    overflow-x: hidden; /* Verhindert horizontale Scrollbalken */
}

/* Bilder anpassen, um Proportionen zu erhalten */
#mw-content-text img {
    max-width: 100%; /* Begrenzt die Breite auf die Container-Breite */
    height: auto; /* Behält die Proportionen bei */
}

/* Footer-Bereich anpassen */
#mw-footer {
    width: 100%;
    max-width: 100%;
    padding: 10px;
    box-sizing: border-box;
    margin: 0;
    text-align: center; /* Inhalte zentrieren */
    position: relative; /* Sicherstellen, dass der Footer im normalen Fluss bleibt */
    left: 0; /* Am linken Rand beginnen */
}

/* Footer-Container anpassen */
#mw-footer-container {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Footer-Links anpassen */
#mw-footer li {
    display: inline-block; /* Links nebeneinander anordnen */
    margin: 0 10px; /* Abstand zwischen Links */
}

/* 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: 1003; /* Über der Seitenleiste */
        background: #f8f8f8;
        border: 1px solid #ccc;
        border-radius: 5px;
    }

    /* Schließen-Symbol */
    .close-menu {
        font-size: 12px; /* Halb so groß wie 24px */
        cursor: pointer;
        padding: 5px;
        position: absolute;
        top: 10px;
        right: 10px; /* Rechts oben in der Seitenleiste */
        z-index: 1004; /* Über der Seitenleiste */
        background: #f8f8f8;
        border: 1px solid #ccc;
        border-radius: 5px;
        display: none; /* Standardmäßig ausgeblendet */
    }

    /* 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: 1001; /* Über dem Content-Bereich */
    }

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

    /* Logo in der Seitenleiste zentrieren */
    #p-logo {
        text-align: center;
        margin: 10px auto;
        z-index: 1002; /* Über dem Content-Bereich */
    }

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

    /* Links in der Seitenleiste etwas kleiner (1.5em → 1.3em) */
    #mw-panel .vector-menu-portal a {
        font-size: 1.3em; /* Etwas kleiner als 1.5em */
    }

    /* Inhaltsbereich anpassen */
    #content {
        margin-left: 0 !important; /* Seitenleisten-Margin entfernen */
        width: 100%;
        padding: 10px;
        margin-top: 0px; /* Reduziert von 60px auf 0px */
        z-index: 1000; /* Unter der Seitenleiste */
        overflow-x: hidden; /* Verhindert horizontale Scrollbalken */
    }

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

    /* Text in Tabellen halb so groß (1em → 0.5em) */
    #mw-content-text table td,
    #mw-content-text table th {
        font-size: 0.5em !important; /* Halb so groß wie 1em */
    }

    /* Links in Tabellen doppelt so groß (1em → 2em) */
    #mw-content-text table a {
        font-size: 2em; /* Doppelt so groß wie 1em */
    }

    /* Text in h4-Abschnitten und Kommentarboxen anpassen */
    h4 ~ p,
    h4 ~ div,
    h4 ~ ul li,
    .comment,
    .comment p,
    .comment div,
    .comment li {
        font-size: 1.2em !important; /* Erhöht die Schriftgröße für Text nach h4 und in Kommentarboxen */
    }

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

    /* Kopfzeile anpassen */
    #mw-head {
        position: fixed; /* Kopfzeile fixieren, damit sie oben bleibt */
        top: 0;
        left: 0; /* Am linken Rand beginnen */
        width: 100%;
        padding: 5px; /* Weniger Padding, um Platz zu sparen */
        z-index: 1000; /* Sicherstellen, dass die Tabs über dem Content liegen */
        background: #fff; /* Hintergrundfarbe, damit der Content nicht durchscheint */
        display: flex; /* Flexbox für bessere Anordnung */
        flex-wrap: wrap; /* Elemente umbrechen */
        justify-content: flex-start; /* Elemente am linken Rand ausrichten */
        align-items: center; /* Vertikal zentrieren */
        box-sizing: border-box; /* Padding in die Breite einbeziehen */
    }

    #mw-head-base {
        margin: 0;
        width: 100%; /* Volle Breite */
        height: 10px; /* Höhe auf 10px begrenzen */
    }

    /* Tabs (Hauptseite/Diskussion) anpassen */
    #left-navigation {
        float: left;
        margin-left: 4em; /* Reduziert von 10em auf 4em */
        margin-top: 0em; /* Reduziert von 2.5em auf 0em */
        margin-bottom: -2.5em;
    }

    #p-cactions {
        position: relative;
        top: 0;
        width: auto; /* Nicht die volle Breite */
        margin: 0 0 0 50px; /* Abstand zum Sandwich-Menü (40px Breite + 10px Abstand) */
        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;
        padding: 2px 5px; /* Weniger Padding für kompakteres Aussehen */
    }

    #p-cactions .vector-menu-content a {
        font-size: 0.9em; /* Kleinere Schrift für Tabs */
    }

    /* Suchleiste anpassen */
    #p-search {
        width: auto; /* Nicht die volle Breite */
        margin: 5px 0; /* Weniger Margin */
    }

    #p-search .vector-search-box-inner {
        min-width: 10em; /* Erhöht von 5em auf 10em */
        width: 13.2em;
        width: 20vw;
        max-width: 20em;
    }

    #p-search form {
        width: 100%;
        max-width: 200px; /* Mindestens 200px breit */
        margin: 0 auto; /* Zentriert */
    }

    #searchInput {
        width: 100%;
        max-width: 200px; /* Mindestens 200px breit */
        font-size: 0.9em; /* Kleinere Schrift für kompakteres Aussehen */
        padding: 5px;
        box-sizing: border-box;
    }

    /* Footer-Bereich in mobiler Ansicht anpassen */
    .mw-footer {
        margin-left: 0em; /* Reduziert von 10em auf 0em */
        margin-top: 0;
        padding: 0.75em;
    }

    /* Sicherstellen, dass keine überbreiten Elemente die Skalierung beeinflussen */
    * {
        box-sizing: border-box; /* Stellt sicher, dass alle Elemente Padding und Border in die Breite einbeziehen */
    }
}

/* 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; /* Einheitliche Schriftgröße für Text */
    }

    /* Text in Tabellen halb so groß (0.95em → 0.475em, gerundet 0.5em) */
    #mw-content-text table td,
    #mw-content-text table th {
        font-size: 0.5em !important; /* Halb so groß wie 0.95em */
    }

    /* Links in Tabellen doppelt so groß (1em → 2em) */
    #mw-content-text table a {
        font-size: 2em; /* Doppelt so groß wie 1em */
    }

    /* Links in der Seitenleiste etwas kleiner (1.4em → 1.2em) */
    #mw-panel .vector-menu-portal a {
        font-size: 1.2em; /* Etwas kleiner als 1.4em */
    }

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

    /* Suchleiste auf sehr kleinen Bildschirmen */
    #searchInput {
        max-width: 180px; /* Etwas kleiner für sehr kleine Bildschirme */
        font-size: 0.8em;
    }

    /* Text in h4-Abschnitten und Kommentarboxen anpassen */
    h4 ~ p,
    h4 ~ div,
    h4 ~ ul li,
    .comment,
    .comment p,
    .comment div,
    .comment li {
        font-size: 1.1em !important; /* Etwas kleiner als 1.2em für kleinere Bildschirme */
    }
}