MediaWiki:Common.css: Difference between revisions

Latest revision as of 08:12, 3 September 2026

/* ============================================================
   FONTS
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible+Next:wght@300;400;500;600;700&display=swap');
/* everything defaults to the grotesk/sans-serif system font stack */
*,
*::before,
*::after {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !important;
}
/* page titles only: serif */
#firstHeading,
.firstHeading,
.mw-page-title-main {
    font-family: "Linux Libertine", Georgia, Times, "Times New Roman", serif !important;
}
/* ============================================================
   BASE LIGHT THEME (site-wide, outside the content column)
   ============================================================ */
#p-logo,
.mw-wiki-logo,
.mw-logo,
.mw-logo-icon,
.mw-logo-wordmark,
.vector-logo {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    width: 0 !important;
}
body {
    background-color: #fff !important;
    color: #000 !important;
    border: none !important;
    box-shadow: none !important;
    text-decoration: none !important;
}
.mw-body {
    background-color: #fff !important;
    color: #000 !important;
    border: 0 !important;
    box-shadow: none !important;
    text-decoration: none !important;
}
h1, h2, h3, h4, h5, h6 {
    color: #000 !important;
    box-shadow: none !important;
    text-decoration: none !important;
}
.mw-headline, .firstHeading, .mw-title {
    border: none !important;
    box-shadow: none !important;
    text-decoration: none !important;
}
h1::after, h2::after, h3::after, h4::after, h5::after, h6::after {
    content: "" !important;
    display: none !important;
}
/* remove every divider line MediaWiki draws (headings, menus, tables, footer) */
hr,
.mw-parser-output hr,
.mw-body hr,
.vector-menu-content ul,
.vector-menu-content li,
.vector-menu-tabs li,
.vector-menu-tabs a,
table, th, td,
.mw-panel,
.vector-dropdown,
#footer {
    border: none !important;
    box-shadow: none !important;
}
hr {
    display: none !important;
    height: 0 !important;
}
#mw-head,
#p-personal,
#mw-panel,
#left-navigation,
#right-navigation {
    background-color: #fff !important;
    color: #000 !important;
    box-shadow: none !important;
    text-decoration: none !important;
}
.vector-menu-content,
.vector-menu-content ul {
    background-color: #fff !important;
    color: #000 !important;
    box-shadow: none !important;
    text-decoration: none !important;
}
input, textarea {
    background-color: #f2f2f2 !important;
    color: #000 !important;
    border: 1px solid #ccc !important;
    box-shadow: none !important;
    text-decoration: none !important;
}
#p-search input {
    background-color: #f2f2f2 !important;
    color: #000 !important;
    border: 1px solid #ccc !important;
}
a {
    color: #0000FF !important;
}
a:visited {
    color: #551A8B !important;
}
table, th, td, .mw-body-content, .vector-menu-content, .vector-menu-tabs {
    border: none !important;
    background: #fff !important;
    box-shadow: none !important;
    text-decoration: none !important;
    background-image: none !important;
}
.vector-dropdown {
    background-color: #fff !important;
    color: #000 !important;
    box-shadow: none !important;
    text-decoration: none !important;
}
#footer, #footer li, #footer a {
    background-color: #fff !important;
    color: #000 !important;
}
/* top tabs (Read / Discussion / Views) */
#p-views .vector-menu-content ul {
    background-color: #fff !important;
    box-shadow: none !important;
    text-decoration: none !important;
}
#p-views li {
    background-color: #fff !important;
    border: 0 !important;
    box-shadow: none !important;
    text-decoration: none !important;
}
#p-views a,
#p-views li a,
#p-namespaces li a,
#p-variants li a {
    color: #0000FF !important;
    text-decoration: none !important;
}
#p-views a:hover,
#p-views li a:hover,
#p-namespaces li a:hover,
#p-variants li a:hover {
    color: #551A8B !important;
}
.vector-menu-tabs li,
.vector-menu-tabs a {
    background-color: #fff !important;
    color: #000 !important;
    box-shadow: none !important;
    text-decoration: none !important;
    background-image: none !important;
}
#mw-head .vector-menu-dropdown .vector-menu-heading,
.vector-legacy-sidebar .vector-menu-portal .vector-menu-heading {
    background-image: none !important;
    background: none !important;
}
#p-tb {
    display: none;
}
.mw-footer .poweredby {
    display: none !important;
}
#p-navigation h3,
#p-navigation .vector-menu-heading,
#p-navigation .vector-pinnable-header-label {
    display: none !important;
}
/* ============================================================
   TEXT SIZES — content area and sidebar
   ============================================================ */
#content,
.mw-body,
.mw-body-content {
    font-size: 18px !important;
}
#firstHeading, .firstHeading { font-size: 38px !important; }
.mw-body-content h2 { font-size: 32px !important; }
.mw-body-content h3 { font-size: 30px !important; }
.mw-body-content h4 { font-size: 28px !important; }
.vector-legacy-sidebar a,
.portlet a,
.pBody a,
#mw-panel a {
    font-size: 15px !important;
    line-height: 1.2 !important;
    padding-left: 0 !important;
    margin-left: 0 !important;
}
.portlet h3,
.portlet h5,
.vector-menu-heading,
.mw-portlet .vector-menu-heading,
.vector-pinnable-header-label {
    font-size: 15px !important;
    font-weight: normal !important;
    line-height: 1.2 !important;
    margin-left: 0.5em !important;
}
/* ============================================================
   UI CHROME: hide dark-mode toggle, account/login links, talk tab
   ============================================================ */
#pt-darkmode,
#pt-darkmode-sticky-header,
#pt-createaccount,
#pt-login,
#ca-talk,
#ca-nstab-main {          /* "Page"-Tab oben ausblenden */
    display: none !important;
}
/* ============================================================
   PAGE TITLE / TOP SPACING
   ============================================================ */
#content {
    padding-top: 0.1em !important;
    max-width: 1400px !important;
}
#firstHeading, .firstHeading {
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.3 !important;
    overflow: visible !important;
}
#siteSub, #contentSub, #contentSub2, .mw-indicators {
    display: none !important;
    margin: 0 !important;
    padding: 0 !important;
}
#mw-content-text,
#mw-content-text > .mw-parser-output,
.mw-parser-output > p:first-of-type,
.mw-parser-output > p:first-child,
#mw-content-text p:first-of-type,
#firstHeading + p,
.firstHeading + p {
    margin-top: 0 !important;
    padding-top: 0 !important;
}
/* ============================================================
   PRINT: black-on-white (screen now matches this already)
   ============================================================ */
@media print {
    body, .mw-body, .mw-body-content,
    p, li, td, th, dd, dt,
    h1, h2, h3, h4, h5, h6, .firstHeading,
    a, a:visited {
        color: #000 !important;
        background: #fff !important;
    }
    /* Flattersatz (linksbündig), kein Blocksatz */
    #content, .mw-parser-output,
    #content p, #content li, #content dd, #content dt,
    .mw-parser-output p, .mw-parser-output li {
        text-align: left !important;
    }
}
/* ============================================================================
   CONTENT COLUMN — light, serif titles, two-column body text, images
   pinned into a right-hand rail.
   This section only restyles #content and what's inside it. The left
   sidebar (#mw-panel / .vector-legacy-sidebar) is untouched on purpose,
   so nav links stay exactly where they are.
   ============================================================================ */
#content,
.mw-body,
.mw-body-content,
#mw-content-text,
#bodyContent {
    background-color: #ffffff !important;
    color: #000000 !important;
}
#content,
#content * {
    font-family: "Linux Libertine", Georgia, Times, "Times New Roman", serif !important;
}
/* lining (upright, full-height) numerals — footnotes only:
   the inline superscript markers in the text, and the numbered
   list at the bottom where the footnotes are spelled out */
#content sup.reference,
#content ol.references,
#content ol.references li,
#content .mw-cite-backlink {
    font-variant-numeric: lining-nums !important;
    font-feature-settings: "lnum" 1 !important;
}
#content #firstHeading,
#content .firstHeading {
    font-weight: normal !important;
    font-size: 36px !important;
    color: #000000 !important;
    background: none !important;
    border-bottom: 0 !important;   /* Linie unter dem Seitentitel entfernt */
    padding: 0 !important;
    margin: 0.1em 0 0.25em 0 !important;   /* oben minimal höher; unten Abstand zum Fließtext */
    display: block !important;
}
#content h2,
#content .mw-heading2 {
    font-size: 32px !important;
    font-weight: normal !important;
    color: #000000 !important;
    background: none !important;
    border-bottom: 1px solid #cccccc !important;
    padding-bottom: 0.2em !important;
    margin: 1em 0 0.4em 0 !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: baseline !important;
}
#content .mw-editsection {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
    font-size: 14px !important;
    font-weight: normal !important;
}
#content .mw-editsection a {
    color: #0e9f6e !important;
}
#content .lexicon-title {
    display: block;
    font-family: "Linux Libertine", Georgia, Times, "Times New Roman", serif !important;
    font-size: 32px !important;
    font-weight: normal !important;
    color: #000000 !important;
    border-bottom: 1px solid #cccccc !important;
    padding-bottom: 0.2em !important;
    margin: 1em 0 0.4em 0 !important;
}
#content .lexicon-title {
    display: block;
    font-family: "Linux Libertine", Georgia, Times, "Times New Roman", serif !important;
    font-size: 32px !important;
    font-weight: normal !important;
    color: #000000 !important;
    border-bottom: 1px solid #cccccc !important;
    padding-bottom: 0.2em !important;
    margin: 1em 0 0.4em 0 !important;
}
#content #toc,
#content .toc {
    background: #ffffff !important;
    border: 1px solid #cccccc !important;
    color: #000000 !important;
    padding: 0.5em 1.2em !important;
    display: inline-block !important;
    font-size: 19px !important;
}
#content #toc a,
#content .toc a {
    color: #0000FF !important;
}
/* Contents / Inhaltsverzeichnis: Einträge enger zusammen */
#content #toc ul,
#content .toc ul,
#content #toc ul ul,
#content .toc ul ul {
    margin: 0.15em 0 0 0 !important;
    padding: 0 !important;
    line-height: 1.25 !important;
}
#content #toc li,
#content .toc li {
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.25 !important;
}
/* --- two-column body text, flowing linearly (column 1 fills before
       column 2 starts) --- */
#content .mw-parser-output {
    position: relative !important; /* anchor for the pinned lead image below */
    column-count: 2 !important;
    column-gap: 1.2em !important;
    column-fill: balance !important;
    width: calc(100% - 315px) !important; /* reserves the right-hand image rail */
}
#content .mw-parser-output > p,
#content .mw-parser-output > ul,
#content .mw-parser-output > ol,
#content .mw-parser-output > dl,
#content .mw-parser-output > table,
#content .mw-parser-output > blockquote {
    font-family: "Atkinson Hyperlegible Next", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
    font-weight: 300 !important;
    font-size: 25px !important;
    line-height: 1.3 !important;
    color: #000000 !important;
    background: none !important;
    max-width: none !important;
    width: auto !important;
    margin: 0 0 1em 0 !important;
    padding: 0 !important;
}
#content .mw-parser-output > ul > li,
#content .mw-parser-output > ol > li {
    font-family: "Atkinson Hyperlegible Next", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
    font-weight: 300 !important;
    break-inside: avoid !important;
    margin: 0 0 1em 0 !important;
}
#content table,
#content th,
#content td {
    background-color: #ffffff !important;
    color: #000000 !important;
    border: none !important;
}
#content .mw-parser-output a:link {
    color: #0000FF !important;
    text-decoration: none !important;
}
#content .mw-parser-output a:visited {
    color: #551A8B !important;
}
#content .mw-parser-output a:hover {
    text-decoration: underline !important;
}
/* --- images: no frame, floated into the right-hand rail --- */
#content .thumb,
#content .thumbinner {
    border: none !important;
    padding: 0 !important;
    background: transparent !important;
}
#content .magnify {
    background: transparent !important;
}
#content figure,
#content .mw-default-size,
#content a.mw-file-description {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
}
#content figure img,
#content img.mw-file-element {
    border: none !important;
    width: 100% !important;
    height: auto !important;
}
#content figcaption,
#content .thumbcaption {
    background: transparent !important;
    color: #000000 !important;
    text-align: left !important;
    font-style: italic !important;
    font-size: 14px !important;
    line-height: 1.4 !important;
    padding: 0.4em 0 0 0 !important;
    margin: 0 !important;
}
/* remove the thin line under thumbnails / captions */
#content .thumb,
#content .thumbinner,
#content figure,
#content figure.mw-halign-right,
#content figure.mw-halign-left,
#content figure.mw-halign-none,
#content figcaption,
#content .thumbcaption,
#content .mw-default-size,
#content a.mw-file-description,
#content a.image,
#content img,
#content img.mw-file-element {
    border: 0 !important;
    border-bottom: 0 !important;
    box-shadow: none !important;
    outline: none !important;
}
/* The FIRST image in the article is pinned to the very top of the
   right-hand rail (instead of floating wherever it happens to sit in
   the text flow), matching where a lead image usually belongs. Later
   images/galleries still float into the rail near their own place in
   the text — see below. */
#content .mw-parser-output > figure:first-of-type {
    position: absolute !important;
    top: 0 !important;
    right: -315px !important;
    float: none !important;
    margin: 0 !important;
    width: 300px !important;
    max-width: 300px !important;
}
#content .mw-parser-output > figure:not(:first-of-type) {
    float: right !important;
    clear: right !important;
    width: 300px !important;
    max-width: 300px !important;
    margin: 0 -315px 1.5em 1.5em !important;
}
/* <gallery> blocks (e.g. mode="packed") use different markup
   (ul.gallery > li.gallerybox) than a single <figure>. Earlier this
   pinned them into the right rail; now the FINAL block below moves the
   gallery to the bottom, full width. */
#content .mw-parser-output ul.gallery li.gallerybox .thumb,
#content .mw-parser-output ul.gallery li.gallerybox .thumb > div {
    text-align: left !important;
}
#content .mw-parser-output ul.gallery .gallerytext {
    color: #000000 !important;
    font-style: italic !important;
    font-size: 14px !important;
    line-height: 1.4 !important;
    padding: 0.3em 0 0 0 !important;
}
/* ===== Galerie: unten, volle Breite. Bilder in NATÜRLICHER Größe
   nebeneinander (kein Masonry, kein Spalten-Raster), mit VIEL Luft und
   leichtem vertikalem Versatz → wirkt lockerer, weniger gerastert.
   STELLSCHRAUBEN:
     .gallerybox margin  = Abstand rechts + unten zwischen den Bildern (Luft)
     die drei nth-child-Zeilen = vertikaler Versatz; einfach LÖSCHEN, wenn
       du die Bilder auf einer geraden Linie (ohne Versatz) willst.
     Mehr Höhen-Abwechslung? Im Wikitext das  heights="180"  aus dem
       <gallery …>-Tag entfernen, dann behalten die Bilder ihre echten Höhen.
   ===== */
#content .mw-parser-output ul.gallery,
#content .mw-parser-output .mw-gallery-packed {
    -webkit-column-span: all !important;
    column-span: all !important;
    column-count: auto !important;   /* KEIN Masonry */
    float: none !important;
    clear: both !important;
    display: block !important;
    width: auto !important;
    max-width: none !important;
    margin: 2em -315px 2em 0 !important;   /* -315px holt den rechten Rail-Platz zurück → volle Breite */
    padding: 0 !important;
    text-align: left !important;
}
#content .mw-parser-output ul.gallery li.gallerybox {
    display: inline-block !important;
    float: none !important;
    width: 280px !important;          /* Basisbreite; wird unten pro Bild variiert */
    max-width: none !important;
    height: auto !important;
    margin: 0 3em 3em 0 !important;      /* viel Abstand rechts + unten */
    padding: 0 !important;
    vertical-align: top !important;
}
/* leichter vertikaler Versatz gegen das Raster-Gefühl (diese 3 Zeilen
   löschen für eine gerade Linie) */
#content .mw-parser-output ul.gallery li.gallerybox:nth-child(2n) { margin-top: 3.5em !important; }
#content .mw-parser-output ul.gallery li.gallerybox:nth-child(3n) { margin-top: 1.5em !important; }
#content .mw-parser-output ul.gallery li.gallerybox:nth-child(5n) { margin-top: 5em !important; }
/* leicht variierende BILDGRÖSSEN → wirkt dynamischer.
   Werte frei anpassen, oder diese vier Zeilen löschen für einheitliche Größe */
#content .mw-parser-output ul.gallery li.gallerybox:nth-child(3n+1) { width: 315px !important; }
#content .mw-parser-output ul.gallery li.gallerybox:nth-child(3n+2) { width: 220px !important; }
#content .mw-parser-output ul.gallery li.gallerybox:nth-child(4n)   { width: 300px !important; }
#content .mw-parser-output ul.gallery li.gallerybox:nth-child(7n)   { width: 400px !important; }
#content .mw-parser-output ul.gallery li.gallerybox .thumb,
#content .mw-parser-output ul.gallery li.gallerybox .thumb > div,
#content .mw-parser-output ul.gallery li.gallerybox img {
    width: 100% !important;   /* Bild füllt die (variierende) Boxbreite */
    height: auto !important;
    margin: 0 !important;
}
/* ============================================================================
   SPALTEN-UTILITIES  —  pro Abschnitt die Spaltenzahl steuern
   ----------------------------------------------------------------------------
   SCHNELLREFERENZ:
     <div class="onecol">  einspaltig… </div>
     <div class="cols3">   dreispaltig… </div>
     Verfügbar: onecol (1), cols2 (2), cols3 (3), cols4 (4).
   ----------------------------------------------------------------------------
   STANDARD bleibt wie bisher: die GANZE Seite ist 2-spaltig
   (siehe "#content .mw-parser-output { column-count: 2 }" weiter oben).
   Wenn du NUR EINEN Abschnitt anders haben willst, wickle ihn im Wikitext
   in ein <div> mit einer dieser Klassen. Der <div> muss auf einer EIGENEN
   Zeile stehen. Alles davor und danach bleibt normal 2-spaltig.
     <div class="onecol">
     Dieser Abschnitt steht einspaltig über die volle Breite …
     </div>
     <div class="cols3">
     Dieser Abschnitt steht dreispaltig …
     </div>
   Verfügbare Klassen:
     onecol  = 1 Spalte (volle Breite)
     cols2   = 2 Spalten (volle Breite, falls du mitten im Text 2 erzwingen willst)
     cols3   = 3 Spalten
     cols4   = 4 Spalten
   TIPP: Für RANDLOS volle Breite (bis in den rechten Bildstreifen) zusätzlich
   im style des <div>:  style="margin-right:-315px"  — z. B.
     <div class="onecol" style="margin-right:-315px"> … </div>
   ============================================================================ */
/* 1 Spalte, volle Breite */
#content .mw-parser-output .onecol {
    -webkit-column-span: all !important;
    column-span: all !important;
    column-count: 1 !important;
}
/* 2 Spalten (volle Breite) */
#content .mw-parser-output .cols2 {
    -webkit-column-span: all !important;
    column-span: all !important;
    column-count: 2 !important;
    column-gap: 2.8em !important;
}
/* 3 Spalten */
#content .mw-parser-output .cols3 {
    -webkit-column-span: all !important;
    column-span: all !important;
    column-count: 3 !important;
    column-gap: 2.8em !important;
}
/* 4 Spalten */
#content .mw-parser-output .cols4 {
    -webkit-column-span: all !important;
    column-span: all !important;
    column-count: 4 !important;
    column-gap: 2.2em !important;
}
/* Absätze/Listen INNERHALB der Utility-Spalten bekommen denselben
   Fließtext-Stil (Atkinson, 22px) wie der übrige Text, und brechen
   nicht über die Spaltenkante */
#content .mw-parser-output .onecol p,
#content .mw-parser-output .onecol li,
#content .mw-parser-output .cols2 p,
#content .mw-parser-output .cols2 li,
#content .mw-parser-output .cols3 p,
#content .mw-parser-output .cols3 li,
#content .mw-parser-output .cols4 p,
#content .mw-parser-output .cols4 li {
    font-family: "Atkinson Hyperlegible Next", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
    font-weight: 300 !important;
    font-size: 25px !important;
    line-height: 1.3 !important;
    color: #000000 !important;
    background: none !important;
    margin: 0 0 1em 0 !important;
    break-inside: avoid !important;
}

/* ============================================================
   ABSTAND SIDEBAR <-> INHALT verkleinern (Sidebar-Breite bleibt
   wie im Standard!). Nur der linke Rand des Inhalts wird verringert,
   sodass der Leerraum zwischen Sidebar und Text (den 2 Spalten)
   schmaler wird. Wert kleiner = enger dran (nicht unter die
   Sidebar-Breite gehen, sonst Ueberlappung).
   ============================================================ */
.mw-body,
#content {
    margin-left: 8.5em !important;
}

/* ============================================================
   DEZENTE SILBENTRENNUNG im Fliesstext (nur laengere Woerter).
   Weniger -> hyphenate-limit-chars erste Zahl groesser machen
   (z.B. 9 = erst ab 9 Buchstaben trennen); ganz aus -> Block loeschen.
   ============================================================ */
#content .mw-parser-output > p,
#content .mw-parser-output > ul,
#content .mw-parser-output > ol,
#content .mw-parser-output > dl,
#content .mw-parser-output > blockquote,
#content .mw-parser-output .onecol p,
#content .mw-parser-output .onecol li,
#content .mw-parser-output .cols2 p,
#content .mw-parser-output .cols2 li,
#content .mw-parser-output .cols3 p,
#content .mw-parser-output .cols3 li,
#content .mw-parser-output .cols4 p,
#content .mw-parser-output .cols4 li {
    -webkit-hyphens: auto !important;
    -ms-hyphens: auto !important;
    hyphens: auto !important;
    -webkit-hyphenate-limit-before: 3;
    -webkit-hyphenate-limit-after: 2;
    hyphenate-limit-chars: 7 3 2 !important;
}