/* ==========================================================================
   schieber.info — Design-Tokens (2026-08-21)

   Single Source of Truth für Farbe und Schrift der Site. Quelle der Farbwerte:
   `brand/schieber-varianten-sheet.svg` aus `Schieber.info-CI.zip` — dort sind die
   Rollen benannt: Kupfer = Ahnen, Patina = Technologie, Eisen = Security und
   Grundfarbe.

   Eingebunden über das mu-plugin `schieber-brand-tokens.php` als Datei unter
   wp-content/uploads/css/brand-tokens.css.

   Seit 2026-08-28 laufen Grundfarben, Grundschrift und Blocktypografie über die
   `theme.json` des Child-Themes `schieber-info`. Hier bleiben die `--si-*`-Tokens
   (die Fragmente verweisen darauf) und die Komponenten der Fragmente.

   Solange das nicht eingebunden ist, tragen einzelne Seiten (z. B.
   docs/wp-seite-schieber-info.html im Repo Ahnenforschung_KI) ihre Tokens noch
   selbst — dann gilt: Werte hier ändern UND dort nachziehen, sonst laufen sie
   auseinander. Nach der Einbindung können die seiteneigenen Token-Blöcke raus.

   Regeln:
   - Keine externen Ressourcen (Policy §4.1) — Fonts liegen self-hosted unter
     wp-content/uploads/fonts/.
   - Farben immer über Tokens beziehen, nie als Literal in Komponenten. Ein Wert,
     der nur in einem @media- oder [data-theme]-Block definiert ist, fehlt im
     jeweils anderen Zustand.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Schriften — self-hosted, kein Google-Fonts-Call
   -------------------------------------------------------------------------- */

@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url(/wp-content/uploads/fonts/ibmplexsans-var.woff2) format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/wp-content/uploads/fonts/ibmplexmono-400.woff2) format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/wp-content/uploads/fonts/ibmplexmono-500.woff2) format('woff2');
}
@font-face {
  font-family: 'Spectral';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/wp-content/uploads/fonts/spectral-normal-400.woff2) format('woff2');
}
@font-face {
  font-family: 'Spectral';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/wp-content/uploads/fonts/spectral-normal-600.woff2) format('woff2');
}
@font-face {
  font-family: 'Spectral';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(/wp-content/uploads/fonts/spectral-italic-400.woff2) format('woff2');
}

/* --------------------------------------------------------------------------
   2. Tokens — heller Grund (Vollpalette, Basis für alle drei Theme-Zustände)
   -------------------------------------------------------------------------- */

:root {
  /* Marke — die drei Rollenfarben aus dem CI-Sheet, unverändert */
  --si-kupfer:  #B4703F;   /* Ahnen        · oberster Knoten */
  --si-patina:  #2F8C6E;   /* Technologie  · unterster Knoten */
  --si-eisen:   #151C1E;   /* Security     · Ring und Grundfarbe */
  --si-grau:    #7A817D;   /* Meta, ".info", Trennzeichen — CI-Wert, für Flächen/Linien */
  --si-papier:  #E8E4DA;   /* heller Grund */
  --si-nebel:   #8E9A96;   /* Mittelgrau, auf beiden Gründen tragfähig */

  /* Flächen und Linien */
  --si-bg:         var(--si-papier);
  --si-surface:    #F3F1EB;
  --si-surface-2:  #DEDACE;
  --si-line:       #C6C1B4;
  --si-line-soft:  #D8D3C7;

  /* Text */
  --si-ink:    var(--si-eisen);
  --si-ink-2:  #3C4442;
  /* Für Text abgedunkelt: das CI-Grau erreicht auf hellem Grund nur Kontrast 3.5
     und ist damit für Kleintext (Labels, Bildunterschriften) zu schwach. #5E6663
     liegt bei ~6.5 und bleibt als Grauton klar vom Fliesstext unterscheidbar. */
  --si-muted:  #5E6663;

  /* Säulen-Akzent — je Seite auf die passende Säulenfarbe setzen:
     Ahnenforschung → Kupfer, IoT/KI → Patina, Infrastruktur & Security → Eisen */
  --si-akzent: var(--si-kupfer);

  /* Kupfer als Textfarbe: #B4703F kommt auf hellem Grund nur auf 3.5. Diese
     abgedunkelte Variante erreicht ~4.8 und wird für farbige Labels benutzt;
     Flächen, Linien und Icons behalten das CI-Kupfer. */
  --si-kupfer-text: #94552B;

  /* Dasselbe für Patina: #2F8C6E erreicht als Text nur 3.6, diese Variante ~4.9.
     Balken, Rahmen und Knoten behalten das CI-Grün. */
  --si-patina-text: #22705A;

  /* Zustände. Bewusst keine Ampel: Rot kommt im CI nicht vor. Kupfer bedeutet
     "offen, in Arbeit", Patina "gesichert", Nebel "keine Daten". */
  --si-gesichert: var(--si-patina);
  --si-offen:     var(--si-kupfer);
  --si-leer:      var(--si-nebel);

  --si-shadow: 0 1px 0 rgba(21, 28, 30, .05), 0 8px 24px -18px rgba(21, 28, 30, .5);

  /* Schrift-Rollen */
  --si-serif: "Spectral", "Iowan Old Style", Georgia, serif;
  --si-sans:  "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --si-mono:  "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
}

/* --------------------------------------------------------------------------
   3. Bewusst KEIN Dark Mode

   Das aktive Theme skyline-wp ist nicht dark-aware: Es rendert immer weissen
   Grund mit dunkler Schrift und setzt Textfarben über ID-Selektoren (`#colibri …`),
   die jede Token-Farbe überschreiben.

   Ein `@media (prefers-color-scheme: dark)`-Block hier führte deshalb zu genau
   einem Fehlerbild: Die Flächen der eigenen Fragmente wurden dunkel, die Schrift
   darauf blieb die dunkle Theme-Schrift — unlesbar. Erst wenn das Theme selbst
   einen dunklen Modus beherrscht, gehören die dunklen Token-Werte zurück.

   Die Site ist damit einfarbig hell — eine Entscheidung, keine Auslassung.
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   4. Marken-Icon im Fließtext

   Das Icon aus schieber-icon.svg inline einsetzen und seine Eisen-Anteile auf
   `currentColor` stellen, damit der Stammbaum auf dunklem Grund nicht
   verschwindet; Kupfer- und Patina-Knoten über die Tokens einfärben.

   Hinweis zum Wortmarken-SVG (schieber-logo.svg): dessen Schriftzug liegt als
   <text> vor, nicht als Pfad, und referenziert Inter — die Site hostet Inter
   nicht. Ohne Pfad-Konvertierung oder zusätzliches self-hosted Inter rendert
   die Wortmarke je nach Gerät in Helvetica oder Arial.
   -------------------------------------------------------------------------- */

.si-mark {
  display: inline-flex;
  align-items: center;
  gap: .8rem;
  color: var(--si-ink);
}
.si-mark svg { width: 44px; height: 44px; flex: none; }
.si-mark .si-mark__ahnen { fill: var(--si-kupfer); }
.si-mark .si-mark__technik { fill: var(--si-patina); }


/* --------------------------------------------------------------------------
   7. Artikel-Layout `.art` — für alle Beiträge (Content-Plan, Formate F2–F5)

   Damit ein neuer Beitrag nur noch Markup braucht und keinen eigenen
   Style-Block. Die Projektseiten (`.aki`, `.sif`, `.sec`) behalten ihre
   eigenen Bausteine; `.art` ist das Standardraster für Fliesstexte.

   Bausteine: .art__eyebrow .art__lead .art__note · .art__quote · .art__box
   .art__steps (nummerierte Kette) · .art__grid + .art__card · .art__scroll
   (Tabelle) · .art__foot · .art__legend (Zeichenerklärung)
   -------------------------------------------------------------------------- */

.art {
  color: var(--si-ink);
  font-family: var(--si-sans);
  font-size: 17px;
  line-height: 1.65;
  box-sizing: border-box;
}
.art *, .art *::before, .art *::after { box-sizing: border-box; }
.art__wrap { max-width: 60rem; margin: 0 auto; display: flex; flex-direction: column; gap: clamp(2.5rem, 6vw, 4rem); }
.art__col { max-width: 38rem; }
.art section { display: flex; flex-direction: column; gap: 1.15rem; }

.art h2, .art h3 { font-family: var(--si-serif); font-weight: 600; margin: 0; text-wrap: balance; line-height: 1.18; letter-spacing: -.01em; }
.art h2 { font-size: clamp(1.45rem, 3.2vw, 1.95rem); }
.art h3 { font-size: 1.1rem; font-family: var(--si-sans); letter-spacing: 0; }
.art p { margin: 0; }
.art p + p { margin-top: .9rem; }

.art__eyebrow { font-family: var(--si-mono); font-size: .72rem; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; margin: 0; }
.art__lead { font-family: var(--si-serif); font-size: clamp(1.12rem, 2.3vw, 1.35rem); line-height: 1.5; }
.art__note { font-size: .875rem; }

.art__quote { font-family: var(--si-serif); font-style: italic; font-size: clamp(1.15rem, 2.5vw, 1.45rem); line-height: 1.45; border-left: 2px solid var(--si-kupfer); padding-left: 1.15rem; margin: 0; }

.art__box { background: var(--si-surface); border: 1px solid var(--si-line); border-left: 3px solid var(--si-kupfer); border-radius: 3px; padding: 1.1rem 1.25rem; display: flex; flex-direction: column; gap: .5rem; }
.art__box h3 { margin-bottom: .1rem; }

.art__steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; counter-reset: art-step; border-left: 1px solid var(--si-line); }
.art__steps li { counter-increment: art-step; position: relative; padding: 1.05rem 0 1.05rem 3.1rem; border-bottom: 1px solid var(--si-line-soft); }
.art__steps li:last-child { border-bottom: 0; }
.art__steps li::before { content: counter(art-step, decimal-leading-zero); position: absolute; left: 0; top: 1.1rem; width: 3.1rem; padding-left: 1rem; font-family: var(--si-mono); font-size: .78rem; }
.art__steps h3 { margin-bottom: .25rem; }

.art__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(15.5rem, 1fr)); gap: 1px; background: var(--si-line); border: 1px solid var(--si-line); border-radius: 3px; overflow: hidden; }
.art__card { background: var(--si-surface); padding: 1.2rem 1.3rem 1.35rem; display: flex; flex-direction: column; gap: .5rem; }
.art__card-role { font-family: var(--si-mono); font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; }
.art__card ul { margin: 0; padding-left: 1.05rem; font-size: .89rem; display: flex; flex-direction: column; gap: .3rem; }

.art__scroll { overflow-x: auto; border: 1px solid var(--si-line); border-radius: 3px; background: var(--si-surface); }
.art table { width: 100%; border-collapse: collapse; font-size: .875rem; }
.art th, .art td { padding: .6rem .85rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--si-line-soft); }
.art thead th { font-family: var(--si-mono); font-size: .7rem; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; background: var(--si-line-soft); }
.art tbody tr:last-child td { border-bottom: 0; }
.art .art-num { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Zeichenerklärung (Beleg-Grade) */
.art__legend { display: flex; flex-direction: column; gap: .55rem; margin: 0; }
.art__legend div { display: flex; gap: .8rem; align-items: baseline; font-size: .93rem; }
.art__legend b { font-family: var(--si-serif); font-size: 1.15rem; width: 1.4rem; flex: none; text-align: center; }

.art__foot { font-size: .84rem; display: flex; flex-direction: column; gap: .5rem; border-top: 1px solid var(--si-line); padding-top: 1.15rem; }

/* Theme-Durchgriff verhindern — siehe Abschnitt 5, gleiche Ursache */
.art h1, .art h2, .art h3, .art strong, .art .art__quote, .art .art__legend b { color: var(--si-ink) !important; }
.art p, .art li, .art td, .art th, .art .art__lead { color: var(--si-ink-2) !important; }
.art a { color: inherit !important; }
.art .art__eyebrow, .art .art__card-role, .art .art__note, .art .art__foot,
.art .art__foot p, .art .art__steps li::before { color: var(--si-muted) !important; }
.art thead th { color: var(--si-ink-2) !important; }
/* Farbklassen brauchen mindestens die Spezifität der Komponenten-Regeln darüber
   (`.art .art__legend b` = 0,2,1), sonst gewinnt dort die Grundfarbe. */
.art .is-kupfer, .art b.is-kupfer, .art .art__legend b.is-kupfer { color: var(--si-kupfer-text) !important; }
.art .is-patina, .art b.is-patina, .art .art__legend b.is-patina { color: var(--si-patina-text) !important; }
.art .art__eyebrow { color: var(--si-kupfer-text) !important; }

/* --------------------------------------------------------------------------
   8. Code-Bausteine für Artikel (`.art__code`)

   Für Konfigurations- und Skriptbeispiele. Bewusst schlicht: keine
   Syntaxhervorhebung, die ein zusätzliches Skript und damit eine externe
   Ressource bräuchte — Policy §4.1.
   -------------------------------------------------------------------------- */

.art__code {
  margin: 0;
  padding: 1rem 1.15rem;
  background: var(--si-surface-2);
  border: 1px solid var(--si-line);
  border-left: 3px solid var(--si-patina);
  border-radius: 3px;
  overflow-x: auto;
  font-family: var(--si-mono);
  font-size: .82rem;
  line-height: 1.55;
  tab-size: 2;
}
.art__code code { font: inherit; color: var(--si-ink) !important; white-space: pre; }
.art .art__code, .art .art__code code { color: var(--si-ink) !important; }
.art__code-cap {
  font-family: var(--si-mono);
  font-size: .7rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  margin: 0 0 .4rem;
}
.art .art__code-cap { color: var(--si-muted) !important; }
.art p code, .art li code, .art td code {
  font-family: var(--si-mono);
  font-size: .88em;
  background: var(--si-surface-2);
  padding: .08em .35em;
  border-radius: 2px;
}


/* ==========================================================================
   10. Typografie durchsetzen (2026-08-25)

   Seit dem Wechsel auf das Child-Theme (2026-08-28) kommen Grundfarben, Grundschrift
   und Blocktypografie aus `theme.json`. Dieser Abschnitt regelt weiterhin die
   **Fragment-Komponenten** (`.art`, `.sif`, `.aki`, `.sec`) — deren Abstufungen
   (Kartentitel, Labels, Kennzahlen) kennt die Blockebene nicht.

   `!important` bleibt hier stehen, weil die Fragmente auch unter einem anderen Theme
   tragen sollen; es ist auf die eigenen Wrapper beschränkt.
   ========================================================================== */

/* Schriftskala als Tokens — eine Quelle für alle Bereiche */
:root {
  --si-s-mikro: .78rem;     /* Labels, Bildunterschriften   */
  --si-s-klein: .92rem;     /* Karten, Nebentexte            */
  --si-s-text:  1.0625rem;  /* Fliesstext (17 px)            */
  --si-s-lead:  clamp(1.12rem, 2.2vw, 1.35rem);
  --si-s-h3:    1.15rem;
  --si-s-h2:    clamp(1.5rem, 3vw, 1.95rem);
  --si-s-h1:    clamp(2.05rem, 5vw, 3rem);
}

/* Grundschrift der eigenen Bereiche */
.art, .sif, .aki, .sec {
  font-family: var(--si-sans) !important;
  font-size: var(--si-s-text) !important;
  line-height: 1.65 !important;
}

/* Überschriften: Serif, ausgewogener Umbruch, keine Wortzerreissung */
.art h1, .art h2, .art h3,
.sif h1, .sif h2, .sif h3,
.aki h1, .aki h2, .aki h3,
.sec h1, .sec h2, .sec h3 {
  font-family: var(--si-serif) !important;
  line-height: 1.18 !important;
  letter-spacing: -.01em !important;
  text-wrap: balance;
  overflow-wrap: normal !important;
  word-break: normal !important;
  hyphens: auto;            /* greift dank lang="de" mit korrekten Trennstellen */
}

.art h1, .sif h1, .aki h1, .sec h1, .aki .aki__titel { font-size: var(--si-s-h1) !important; }
.art h2, .sif h2, .aki h2, .sec h2 { font-size: var(--si-s-h2) !important; }
.art h3, .sif h3, .aki h3, .sec h3 { font-size: var(--si-s-h3) !important; }

/* Zwischenüberschriften in Karten und Ablaufschritten bleiben in der Grundschrift —
   sie stehen im Textfluss, nicht als Titel darüber. */
.art__card h3, .art__steps h3, .art__lesson h3, .art__box h3,
.sec__card h3, .sec__chain h3, .sec__lesson h3,
.aki__flow h3, .aki__rule h3 {
  font-family: var(--si-sans) !important;
  letter-spacing: 0 !important;
  font-size: var(--si-s-h3) !important;
}

/* Kartentitel: eine Stufe unter H2, damit lange Komposita in schmale Spalten passen */
.sif__card h2 { font-size: 1.32rem !important; line-height: 1.22 !important; }

/* Fliesstext und Auszeichnungen — Schriftart hier ebenfalls erzwingen, sonst bleibt
   die Theme-Familie stehen (sie gewinnt gegen die Grundregel des Wrappers). */
.art p, .art li, .art td, .art th, .art blockquote, .art figcaption, .art span, .art a, .art strong, .art em,
.sif p, .sif li, .sif td, .sif th, .sif span, .sif a, .sif strong, .sif em,
.aki p, .aki li, .aki td, .aki th, .aki span, .aki a, .aki strong, .aki em,
.sec p, .sec li, .sec td, .sec th, .sec span, .sec a, .sec strong, .sec em {
  font-family: var(--si-sans) !important;
}
.art p, .art li, .sif p, .sif li, .aki p, .aki li, .sec p, .sec li {
  font-size: var(--si-s-text) !important;
}
/* Zitate bleiben in der Serifenschrift */
.art .art__quote, .aki .aki__quote { font-family: var(--si-serif) !important; }
.art .art__lead, .sif .sif__lead, .aki .aki__lead, .sec .sec__lead {
  font-family: var(--si-serif) !important;
  font-size: var(--si-s-lead) !important;
  line-height: 1.5 !important;
}
.art__card p, .art__card ul, .sif__card p,
.sec__card p, .sec__card ul, .aki__rule ul,
.art__steps p, .sec__chain p, .sec__lesson p, .aki__flow p {
  font-size: var(--si-s-klein) !important;
}
.art__note, .sif__note, .aki__note, .sec__note,
.art__foot, .sif__foot, .aki__foot, .sec__foot { font-size: .875rem !important; }

/* Mono-Rollen: Labels, Kennzahlen, Tabellenköpfe */
.art .art__eyebrow, .sif .sif__eyebrow, .aki .aki__eyebrow, .sec .sec__eyebrow,
.art .art__card-role, .sec .sec__card-role, .sif .sif__card-more, .sif .sif__caption,
.art thead th, .aki thead th, .sec thead th, .aki .aki__tag, .aki .aki__head-meta,
.art .art__code, .art .art__code code, .art .art__code-cap, .aki .aki__stat-lab {
  font-family: var(--si-mono) !important;
  font-size: var(--si-s-mikro) !important;
  line-height: 1.4 !important;
}

/* Tabellen und Kennzahlen */
.art table, .aki table, .sec table { font-size: var(--si-s-klein) !important; }
.aki .aki__stat-num { font-family: var(--si-serif) !important; font-size: 2rem !important; }
.aki .aki__stat-lab { font-size: .82rem !important; }

/* Lange deutsche Komposita: erst trennen, notfalls umbrechen */
.art p, .art li, .art td, .sif p, .sif li, .aki p, .aki li, .aki td, .sec p, .sec li, .sec td {
  hyphens: auto;
  overflow-wrap: break-word;
}