Gespräch:Common.css MediaWiki-Santinizer gemäße Fehlerbehebung/Common.css vor Bereinigung

/* ==============================================================
   MediaWiki:Common.css — bereinigte, konsolidierte Fassung
   Leitlinie: Tokens → Content → SyntaxHighlight → Edit → Headings → References
   Stand: 2025‑09‑30
============================================================== */

/* ==============================================================
   0) DESIGN-TOKENS (Stellschrauben)
============================================================== */
:root {
  /* Schriften */
  --content-font: "XCharter", serif;
  --ui-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
              Ubuntu, Cantarell, "Helvetica Neue", Arial, "Noto Sans", sans-serif;

  /* Typografie Fließtext */
  --content-size: 1.075em; /* an Vector-Basis koppeln */ 
  --content-scale: 1.00; /* deine gewünschte Abweichung (1.00 = exakt Basis) */
  --content-line: 1.40;
  --content-track: 0.08em;  /* psych. gewünschtes Tracking */
  --para-gap: 0.5em;
  --list-gap: 0.30em;

  /* Code/Monospace */
  --code-size: 1.04rem;  /* ≈ leicht unter Body */
  --code-line: 1.40;
  --code-inline-scale: 1.00; /* Inline-Code skaliert relativ (calc(1em * …)) */
  --radius-s: 3px;
  --radius-m: 4px;

  /* Grundfarben hell (Day) */
  --fg: #111111;
  --muted: #5f6672;
  --bg: #f8f8f8;
  --surface: #ececec;
  --surface-border: #d0d0d0;

  /* Code-Farben */
  --code-bg: #ececec;
  --code-fg: #111111;
  --code-border: #d0d0d0;
  --token-comment: #5f6672;
  --token-keyword: #074090;
  --token-string:  #984c07;
  --token-func:    #4b1fa3;

  /* Auswahl/Overlay (werden im Night überschrieben) */
  --selection: rgba(127, 167, 255, 0.28);
  --selection-strong: rgba(127, 167, 255, 0.38);
  --overlay-bg: #fbfbfb;
  --overlay-fg: #111111;
  --overlay-border: #d0d0d0;
  --overlay-accent: rgba(127,167,255,0.25);

  /* Blockquote */
  --quote-bg: var(--surface);
  --quote-fg: var(--fg);
  --quote-border: var(--surface-border);
  
  /* Überschriften */
  --h1: 1.500em; /* 20 pt ≈ 26.67 px → 1.667 em */
  --h2: 1.500em; /* 18 pt ≈ 24.00 px → 1.500 em */
  --h3: 1.333em; /* 16 pt ≈ 21.33 px → 1.333 em */
  --h4: 1.167em; /* 14 pt ≈ 18.67 px → 1.167 em */
  --h5: 1.083em; /* 13 pt ≈ 17.33 px → 1.083 em */
  --h6: 1.083em;
}

/* Night-Profil: nur Werte umschalten */
.skin-theme-clientpref-night {
  --fg: #ececec;
  --muted: #97a0aa;
  --bg: #141414;
  --surface: #232323;
  --surface-border: #3a3a3a;

  --code-bg: #262626;
  --code-fg: #f7f7f7; /* Stellschraube: Helligkeit Code-Text */
  --code-border: #3a3a3a;
  --token-comment: #97a0aa;
  --token-keyword: #95c4fb;
  --token-string:  #f6c96d;
  --token-func:    #bfaaf7;

  --selection: rgba(127, 167, 255, 0.35);
  --selection-strong: rgba(127, 167, 255, 0.45);
  --overlay-bg: #1f1f1f;
  --overlay-fg: #f0f0f0;
  --overlay-border: #3a3a3a;
  --overlay-accent: rgba(127,167,255,0.28);

  --quote-bg: #1c1c1c;
  --quote-fg: #f2f2f2;
  --quote-border: #3a3a3a;
}

/* Day-Profil explizit (optional, hält Werte konsistent) */
.skin-theme-clientpref-day {
  --fg: #111111;
  --muted: #5f6672;
  --bg: #f8f8f8;
  --surface: #ececec;
  --surface-border: #d0d0d0;

  --code-bg: #ececec;
  --code-fg: #111111;
  --code-border: #d0d0d0;
  --token-comment: #5f6672;
  --token-keyword: #074090;
  --token-string:  #984c07;
  --token-func:    #4b1fa3;
}

/* ==============================================================
   1) CONTENT-BINDUNG (Lesen) – global, skin-agnostisch
============================================================== */
.mw-parser-output {
  font-family: "XCharter", serif;
  font-size: calc(var(--content-size) * var(--content-scale));
  line-height: calc(var(--content-line) + 0);
  letter-spacing: calc(var(--content-track) + 0em);
  hyphens: none;
  -webkit-hyphens: none;
  -ms-hyphens: none;
}
.mw-parser-output p { margin-top: 0; margin-bottom: calc(var(--para-gap) + 0px); }
.mw-parser-output li { margin-bottom: calc(var(--list-gap) + 0px); }

/* Headings im Content: Tracking angleichen, Farben erben */
.mw-parser-output h1, .mw-parser-output h2, .mw-parser-output h3,
.mw-parser-output h4, .mw-parser-output h5, .mw-parser-output h6 {
  font-family: inherit;
  letter-spacing: calc(var(--content-track) + 0em);
  color: inherit;
}

/* Blockquote – harmonisch zum Theme */
.mw-parser-output blockquote {
  margin: 1em 0;
  padding: 0.75em 1em;
  background: var(--quote-bg);
  color: inherit;
  border-left: 3px solid currentColor;
}
.mw-parser-output blockquote p { margin: 0.5em 0; }

/* Optionale Content-Flächen – pre ist hier bewusst NICHT enthalten */
.mw-parser-output .hat-surface,
.mw-parser-output .infobox {
  background: var(--surface);
  border: 1px solid currentColor;
}

/* Globale Textselektion */
::selection { background: var(--selection); color: currentColor; text-shadow: none; }
::-moz-selection { background: var(--selection); color: currentColor; text-shadow: none; }
/* Im VisualEditor etwas kräftiger */
.ve-ce-surface ::selection, .ve-ce-surface ::-moz-selection { background: var(--selection-strong); color: currentColor; }

/* ==============================================================
   2) SYNTAXHIGHLIGHT – zentral
============================================================== */
/* Inline-Code (skaliert proportional zum Umfeld) */
.mw-parser-output code,
.mw-parser-output tt,
.mw-parser-output kbd,
.mw-parser-output samp {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  font-size: calc(1em * var(--code-inline-scale));
  line-height: calc(var(--code-line) + 0);
  letter-spacing: 0;
  padding: 0.05em 0.25em;
  border-radius: calc(var(--radius-s) + 0px);
  border: 1px solid currentColor;
  background-color: transparent;
  color: currentColor;
}

/* Inline-Code-Hintergrund nach Theme, ohne var() in Farbposition */
.skin-theme-clientpref-day  .mw-parser-output code,
.skin-theme-clientpref-day  .mw-parser-output tt,
.skin-theme-clientpref-day  .mw-parser-output kbd,
.skin-theme-clientpref-day  .mw-parser-output samp { background-color: #ececec; }

.skin-theme-clientpref-night .mw-parser-output code,
.skin-theme-clientpref-night .mw-parser-output tt,
.skin-theme-clientpref-night .mw-parser-output kbd,
.skin-theme-clientpref-night .mw-parser-output samp { background-color: #262626; }
/* Inline-Code – Rahmenfarbe nach Theme (dezentes Grau statt currentColor) */
.skin-theme-clientpref-day  .mw-parser-output code,
.skin-theme-clientpref-day  .mw-parser-output tt,
.skin-theme-clientpref-day  .mw-parser-output kbd,
.skin-theme-clientpref-day  .mw-parser-output samp { border-color: #d0d0d0; }

.skin-theme-clientpref-night .mw-parser-output code,
.skin-theme-clientpref-night .mw-parser-output tt,
.skin-theme-clientpref-night .mw-parser-output kbd,
.skin-theme-clientpref-night .mw-parser-output samp { border-color: #3a3a3a; }



/* Block-Code */
.mw-parser-output pre,
.mw-parser-output .mw-highlight pre {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  font-size: 1em; /* folgt der Vector-Basis + deinem Offset */
  line-height: calc(var(--code-line) + 0);
  letter-spacing: 0;
  margin: 0.8em 0;
  border-radius: calc(var(--radius-m) + 0px);
  border: 1px solid currentColor;
  background-color: transparent;
  color: inherit;
  overflow: auto;
}

/* MediaWiki-Codeviewer neutralisieren (Gutter: kein Innenabstand) */
.mw-parser-output .mw-code pre,
.mw-parser-output pre.mw-code {
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0.8em 0;
  color: inherit;
  box-sizing: border-box;
}

/* Tokenfarben – ohne var(), nach Theme getrennt */
.skin-theme-clientpref-day  .mw-parser-output .mw-highlight .c  { color: #5f6672; } /* comment */
.skin-theme-clientpref-day  .mw-parser-output .mw-highlight .k  { color: #074090; } /* keyword */
.skin-theme-clientpref-day  .mw-parser-output .mw-highlight .s  { color: #984c07; } /* string  */
.skin-theme-clientpref-day  .mw-parser-output .mw-highlight .nf { color: #4b1fa3; } /* function */

.skin-theme-clientpref-night .mw-parser-output .mw-highlight .c  { color: #97a0aa; }
.skin-theme-clientpref-night .mw-parser-output .mw-highlight .k  { color: #95c4fb; }
.skin-theme-clientpref-night .mw-parser-output .mw-highlight .s  { color: #f6c96d; }
.skin-theme-clientpref-night .mw-parser-output .mw-highlight .nf { color: #bfaaf7; }


/* Sicherheitsnetz: keine externen Link-Icons in Code */
.mw-parser-output .mw-highlight a { background-image: none; }

/* ==============================================================
   3) EDIT-BINDUNG (Schreiben)
============================================================== */
/* VisualEditor: gleiche Typografie wie im Content */
.ve-ce-surface {
  font-family: "XCharter", serif;
  font-size: calc(var(--content-size) * 1);
  line-height: calc(var(--content-line) + 0);
  letter-spacing: calc(var(--content-track) + 0em);
  hyphens: none;
}

/* Wikitext-Editor (CodeMirror & Fallback) */
.cm-editor, .CodeMirror, #wpTextbox1 {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  font-size: calc(var(--code-size) * 1);
  line-height: calc(var(--code-line) + 0);
  letter-spacing: 0;
}

/* ==============================================================
   4) ÜBERSCHRIFTEN (Content + Seitentitel)
============================================================== */
/* Seitentitel (echtes H1) – NUR #firstHeading */

#firstHeading,
#firstHeading .mw-page-title-main {
  font-size: calc(1em * var(--content-scale) * 1.5);
  font-style: normal;
}

/* Body-Headings erben Schriftfamilie */
.mw-parser-output h1,
.mw-parser-output h2,
.mw-parser-output h3,
.mw-parser-output h4,
.mw-parser-output h5,
.mw-parser-output h6 {
  font-weight: 300;
  font-family: inherit;
}

/* Punktgrößen-Verhältnis der Überschriften */
.mw-parser-output h1 { font-size: calc(var(--h1) * 1); font-style: italic; }
.mw-parser-output h2 { font-size: calc(var(--h2) * 1); }
.mw-parser-output h3 { font-size: calc(var(--h3) * 1); }
.mw-parser-output h4 { font-size: calc(var(--h4) * 1); }
.mw-parser-output h5 { font-size: calc(var(--h5) * 1); }
.mw-parser-output h6 { font-size: calc(var(--h6) * 1); font-style: italic; }

/* Linienkennungen */
.mw-parser-output h1 { border-top: 3px solid  #a2a9b1; border-bottom: none; border-left: 3px solid  #a2a9b1; }
.mw-parser-output h2 { border-top: 3px dotted #a2a9b1;  border-bottom: none; border-left: 3px dotted #a2a9b1; }
.mw-parser-output h3 { border-top: 2px dashed #a2a9b1;  border-left: 2px dashed  #a2a9b1; }
.mw-parser-output h4 { border-top: 2px dotted #a2a9b1;  border-left: 2px dotted #a2a9b1; }
.mw-parser-output h5 { border-top: 1px dashed #a2a9b1;  border-left: 1px dashed #a2a9b1; }
.mw-parser-output h6 { border-top: 1px dotted #a2a9b1;  border-left: 1px dotted #a2a9b1; }


/* ==============================================================
   5) REFERENCES / FUSSNOTEN
============================================================== */
/* Klickbarkeit & Dark/Light-Hintergrund (nur Wrapper) */
.mw-parser-output .mw-references-wrap {
  background: var(--surface);
  color: inherit;
  border: 1px solid currentColor;
  opacity: 1;
  pointer-events: auto;
  position: relative;
  z-index: 1;
}
/* Inline-Marker */
.mw-parser-output .reference { font-size: 0.75em; line-height: 0; letter-spacing: 0; }
/* Referenzliste */
.mw-parser-output .references { font-size: 0.92em; line-height: 1.35; margin: 0; padding-left: 1.5em; }
.mw-parser-output .references li { margin: 0.35em 0; }
/* Ziel-Highlight beim Sprung zur Fußnote */
.mw-parser-output .references li:target { background: rgba(127,167,255,0.18); outline: 1px solid currentColor; }
/* Backlink dezenter */
.mw-parser-output .mw-cite-backlink a { text-decoration: none; border-bottom: 1px dotted currentColor; }
.mw-parser-output .mw-cite-backlink a:hover { text-decoration: underline; }

/* Semantische Hilfsklassen (aus Vector hierher gezogen) */
.mw-parser-output .u-small, .mw-parser-output .anmerkung { font-size: 0.92em; line-height: 1.35; }
.mw-parser-output .u-xsmall, .mw-parser-output .fußnote   { font-size: 0.85em; line-height: 1.32; }

/* ==============================================================
   6) KLEINKRAM
============================================================== */
/* Figcaption transparent, Farben erben */
.mw-body .mw-body-content figcaption { background-color: transparent; color: inherit; }

/* ==============================================================
   7) NIGHT – Code-Farbe zuverlässig durchsetzen (am Dateiende lassen)
============================================================== */
/* Inline-Code (auch in Überschriften) */
.skin-theme-clientpref-night .mw-parser-output code,
.skin-theme-clientpref-night .mw-parser-output tt,
.skin-theme-clientpref-night .mw-parser-output kbd,
.skin-theme-clientpref-night .mw-parser-output samp { color: #f7f7f7; }
/* Block-Code */
.skin-theme-clientpref-night .mw-parser-output pre,
.skin-theme-clientpref-night .mw-parser-output .mw-highlight pre { color: #f7f7f7 }
/* MediaWiki-Codeansicht */
.skin-theme-clientpref-night pre.mw-code,
.skin-theme-clientpref-night .mw-code pre { color: #f7f7f7 }


/* Night – Code-Text klar rendern (ohne Weichzeichner-Anmutung) */
.skin-theme-clientpref-night .mw-parser-output code,
.skin-theme-clientpref-night .mw-parser-output tt,
.skin-theme-clientpref-night .mw-parser-output kbd,
.skin-theme-clientpref-night .mw-parser-output samp,
.skin-theme-clientpref-night .mw-parser-output pre,
.skin-theme-clientpref-night .mw-parser-output .mw-highlight pre,
.skin-theme-clientpref-night pre.mw-code,
.skin-theme-clientpref-night .mw-code pre {
  -webkit-font-smoothing: antialiased;
}

/* ==============================================================
   8) Anpassungen View-Edit VisualEditor, Quelltexteditor
============================================================== */

/* VE: Basistypo am Container setzen … */
.ve-init-mw-desktopArticleTarget .ve-ce-surface {
  font-size: calc(var(--content-size) * var(--content-scale));
  line-height: calc(var(--content-line) + 0);
  letter-spacing: calc(var(--content-track) + 0em);
  font-family: "XCharter", serif;
}

/* … und sauber vererben (kein eigener Reset auf den VE-Knoten) */
.ve-init-mw-desktopArticleTarget .ve-ce-documentNode,
.ve-init-mw-desktopArticleTarget .ve-ce-branchNode {
  font: inherit;
  line-height: inherit;
  letter-spacing: inherit;
}

/* VE-Headings: dieselben Tokens wie im View verwenden */
.ve-init-mw-desktopArticleTarget .ve-ce-surface h1 { font-size: calc(var(--h1) * 1); font-style: italic; }
.ve-init-mw-desktopArticleTarget .ve-ce-surface h2 { font-size: calc(var(--h2) * 1); }
.ve-init-mw-desktopArticleTarget .ve-ce-surface h3 { font-size: calc(var(--h3) * 1); }
.ve-init-mw-desktopArticleTarget .ve-ce-surface h4 { font-size: calc(var(--h4) * 1); }
.ve-init-mw-desktopArticleTarget .ve-ce-surface h5 { font-size: calc(var(--h5) * 1); }
.ve-init-mw-desktopArticleTarget .ve-ce-surface h6 { font-size: calc(var(--h6) * 1); font-style: italic; }

/* Editor-Form als Basisträger der Größe */
.mw-editform {
  font-size: calc(var(--content-size) * var(--content-scale));
  line-height: calc(var(--content-line) + 0);
  letter-spacing: calc(var(--content-track) + 0em);
  font-family: "XCharter", serif;
}

/* CodeMirror 6/5 + Fallback-Textarea: nur vom Form-Basiswert erben */
.mw-editform .cm-editor, .mw-editform .CodeMirror, .mw-editform #wpTextbox1, .mw-editform .wikitext-ui-text {
  font: inherit;              /* Größe/Familie direkt übernehmen */
  line-height: calc(var(--code-line) + 0);
  letter-spacing: 0;          /* Monospace: kein Tracking */
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
}


/* ==============================================================
   9) Anpassungen View-Edit VisualEditor, Quelltexteditor für Listen, Tabellen Blockquote
============================================================== */
/* --- AufEinWort: Listen-Feintuning (View + VisualEditor) --- */
.mw-body {
  /* Stellschrauben — hier nur Zahlen ändern */
  --aewi-ul-offset: 1em;   /* ganze UL nach rechts (Marker + Text) */
  --aewi-ol-offset: 0.5em;   /* ganze OL nach rechts (Zahl + Text) */
  --aewi-ul-pad: 1.5em;    /* Abstand Marker–Text bei UL */
  --aewi-ol-pad: 2.0em;    /* Abstand Zahl–Text bei OL (Zweck: Platz für 2-stellig) */
}

/* View-Modus */
.mw-parser-output ul { margin-left: calc(var(--aewi-ul-offset) + 0px); padding-left: calc(var(--aewi-ul-pad) + 0px);  list-style-position: outside; }
.mw-parser-output ol { margin-left: calc(var(--aewi-ol-offset) + 0px); padding-left: calc(var(--aewi-ol-pad) + 0px);  list-style-position: outside; }

/* VisualEditor-Edit-Modus */
.ve-ui-surface .mw-body ul { margin-left: calc(var(--aewi-ul-offset) + 0px); padding-left: calc(var(--aewi-ul-pad) + 0px);  list-style-position: outside; }
.ve-ui-surface .mw-body ol { margin-left: calc(var(--aewi-ol-offset) + 0px); padding-left: calc(var(--aewi-ol-pad) + 0px);  list-style-position: outside; }

/* Übergang P→Liste (dein Fix) */
.mw-parser-output p + ul, .mw-parser-output p + ol,
.ve-ui-surface .mw-body p + ul, .ve-ui-surface .mw-body p + ol {
  margin-top: 0;
}

/* ==============================================================
   10) wikitable Gestaltung Tabellen allgemein
============================================================== */

/* AufEinWort — wikitable Basis (hell/dunkel via Token-Variablen) */
.mw-parser-output .wikitable {
  background: transparent;      /* kein flächiger Hintergrund */
  border: 0;                    /* kein äußerer Rahmen */
  border-collapse: collapse;    /* saubere Kanten */
  width: 100%;                  /* volle Inhaltsbreite */
  /* Farbe kommt aus dem Fließtext; wenn nötig: color: var(--fg); */
}

/* Zellen: Luft und standardmäßig keine Zellentrenner */
.mw-parser-output .wikitable th,
.mw-parser-output .wikitable td {
  padding: 0.35rem 0.5rem;      /* Leseluft */
  border: 0;                    /* keine vertikalen Trennlinien */
  /* color: var(--fg);           // optional erzwingen */
}

/* wikitable – Linienfarbe nach Theme (dezentes Grau) */
.skin-theme-clientpref-day  .mw-parser-output .wikitable tr + tr > th,
.skin-theme-clientpref-day  .mw-parser-output .wikitable tr + tr > td { border-top: 1px solid #d0d0d0; }
.skin-theme-clientpref-night .mw-parser-output .wikitable tr + tr > th,
.skin-theme-clientpref-night .mw-parser-output .wikitable tr + tr > td { border-top: 1px solid #3a3a3a; }


/* Tabellenüberschrift (caption) linksbündig */
.mw-parser-output .wikitable > caption {
  text-align: left;
}

/* Kopfzellen links + optional dezente Absetzung der Kopfzeile */
.mw-parser-output .wikitable th {
  text-align: left;             /* Standard in MediaWiki ist mittig → hier links */
  font-weight: 600;             /* etwas kräftiger für Kopfzellen */
}
/* wikitable – Kopfzeilen-Linie nach Theme */
.skin-theme-clientpref-day  .mw-parser-output .wikitable thead th,
.skin-theme-clientpref-day  .mw-parser-output .wikitable > * > tr:first-child > th { border-bottom: 1px solid #d0d0d0; }
.skin-theme-clientpref-night .mw-parser-output .wikitable thead th,
.skin-theme-clientpref-night .mw-parser-output .wikitable > * > tr:first-child > th { border-bottom: 1px solid #3a3a3a; }