/* ============================================================================
   Typo — das Schrift-Kernmodul. DIE EINE Quelle für jedes Schriftbild.
   Kein anderes Modul darf font-size / font-weight / font-family / Textfarbe
   setzen (der Compliance-Scanner erzwingt das). Größen/Stärken kommen aus den
   Tokens im Kern (--fs-*, --fw-*, --mono); hier werden sie ANGEWENDET.
   Bausteine, die diese Klassen ausgeben: Core\Design::strong/em/muted/mono/
   code/danger/dash/label + block()/intro() für Überschriften.
   ============================================================================ */

body { font-size: var(--fs-base); line-height: var(--lh); }

/* Überschriften — EINE Skala fürs ganze System. */
h1, h2, h3, h4, h5, h6 { margin: 0 0 .4em; font-weight: var(--fw-bold); color: var(--ink); line-height: 1.3; }
h1 { font-size: var(--fs-xxl); }
h2 { font-size: var(--fs-xl); }
h3 { font-size: var(--fs-lg); }
h4 { font-size: var(--fs-md); }
h5, h6 { font-size: var(--fs-base); }

p { margin: 0 0 .6em; }
p:last-child { margin-bottom: 0; }

/* Betonung — Rolle, nicht Deko. */
strong, b { font-weight: var(--fw-bold); }
em, i     { font-style: italic; }
small     { font-size: var(--fs-sm); }

/* Code / Kennung / Kommando. */
code, kbd, samp {
    font-family: var(--mono);
    font-size: .92em;
    background: var(--grey-100);
    color: var(--grey-700);
    padding:var(--sp-0) var(--sp-2);
    border-radius: var(--radius);
}

a { color: var(--o); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ── Text-Rollen (Design::muted/mono/danger/label/strong) ─────────────────── */
.txt-muted  { color: var(--muted); font-size: var(--fs-sm); }
.txt-mono   { font-family: var(--mono); font-size: var(--fs-sm); color: var(--muted); }
.txt-danger { color: var(--danger); }
.txt-strong { font-weight: var(--fw-bold); }
.txt-label  { font-size: var(--fs-sm); font-weight: var(--fw-med); color: var(--ink); }
.txt-medium { font-weight: var(--fw-med); }
/* Rubrik-Beschriftung (Design::label ['caps'=>true]) — klein, versal, grau; steht NACH .txt-label und gewinnt. */
.txt-caps   { font-size: var(--fs-2xs); text-transform: uppercase; letter-spacing: var(--tracking); color: var(--muted); }
/* Ton-Rollen für Text und Icons (…['class'=>'txt-ok'] an muted/icon) — zugesagt, Vorbehalt, Markenakzent.
   Stehen NACH .txt-muted und gewinnen dessen Farbe (z.B. „Öffentlich" grün). */
.txt-ok     { color: var(--ok); }
.txt-warn   { color: var(--warn-fg); }
.txt-brand  { color: var(--o); }

/* ── Vereinheitlichte Alt-Klassen ─────────────────────────────────────────────
   Historisch stylte JEDES Modul diese selbst (mod-id mal 12px, mdd-empty mal
   13px, text-danger mal var(--danger) / mal var(--danger)). Ab hier: EINE Definition, damit
   dieselbe Rolle überall gleich aussieht. Neue Markup nutzt die .txt-*-Rollen. */
.mod-id     { font-family: var(--mono); font-size: var(--fs-sm); color: var(--muted); }
.mdd-empty  { color: var(--muted); font-size: var(--fs-sm); }
.text-danger { color: var(--danger); }
/* Mono-/Kategorie-Chips (grauer Hintergrund) — vorher in core/Ui.php bzw. modules.css verstreut. */
.cs-mod  { font-family: var(--mono); font-size: var(--fs-xs); color: var(--muted); background: var(--grey-100); padding:var(--sp-0) var(--sp-2); border-radius: var(--radius); }
.mod-cat { display: inline-block; background: var(--grey-100); color: var(--grey-700); font-size: var(--fs-xs); padding:var(--sp-0) var(--sp-3); border-radius: var(--radius); }

/* ── Listen (Design::list/descList) ──────────────────────────────────────────
   Aufzählungen sind typografisch → Heimat hier. Kein Modul stylt <ul>/<ol>/<dl> selbst. */
.cc-list { margin: 0 0 var(--sp-5); padding-left: 1.3em; }
.cc-list li { margin: 0 0 .3em; }
.cc-list li:last-child { margin-bottom: 0; }
.cc-dl { margin: 0 0 var(--sp-5); display: grid; grid-template-columns: auto 1fr; gap:var(--sp-1) var(--sp-6); }
.cc-dl dt { color: var(--muted); font-size: var(--fs-sm); }
.cc-dl dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }   /* MD5, URLs, Pfade laufen sonst aus der Spalte */

/* Link (Design::link) — EIN Linkbild im System: Markenfarbe, unterstrichen erst beim Zeigen,
   kürzt sich in engen Zeilen (Listen/Tabellen) statt die Zeile zu sprengen. */
.cc-link { color: var(--o); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.cc-link:hover { text-decoration: underline; }

/* Bildmarke (Design::brandMark) — EIN Logo im System. Grösse erbt vom Kontext (font-size),
   Farben aus den Kern-Tokens. */
.cc-brand { display: inline-flex; align-items: center; justify-content: center; line-height: 0; }
.cc-brand svg { width: 1em; height: 1em; }
.cc-brand-a { fill: var(--o); }
.cc-brand-q { fill: var(--ink); }
/* Grössen-Stufe der Bildmarke (Design::brandMark ['size'=>'display']) — gross wie auf der Anmelde-Seite. */
.cc-brand.cc-brand-display { font-size: var(--fs-display); }

/* Nebentext eine Stufe kleiner (Design::muted ['size'=>'xs']) — Dateiname/Kennzeile unter einem Titel. */
.txt-muted.txt-xs { font-size: var(--fs-xs); }
/* Bearbeitbarer Titel (Design::editTitle) — gestrichelte Unterkante erst beim Bearbeiten. */
.cc-etitle { font-size: var(--fs-lg); font-weight: var(--fw-heavy); color: var(--ink); line-height: 1.3; word-break: break-word;
             outline: none; border-bottom: 1px dashed transparent; transition: border-color var(--dur); }
.cc-etitle:focus { border-bottom-color: var(--o); }
/* Text-Seite (Design::textPage) — Klartext als weisses, gerahmtes Blatt, Umbrüche bleiben. */
.cc-textpage { padding: var(--sp-9); font-size: var(--fs-base); line-height: 1.5; white-space: pre-wrap; word-break: break-all;
               background: var(--surface); border: 1px solid var(--grey-300); box-sizing: border-box; overflow: auto; }