/* CI-Marken-Farben fuer Link- und Navigationsflaechen in selbst veroeffentlichten
   HTML. Zwei Rollen getrennt (ci.md, Vorwaerts-Pol): CONTENT-Links = Gruen (Vorwaerts-
   Pol, fuehren woandershin), TOC-/Navbar-AKTIV = Teal (interne Wegweiser/Struktur,
   bleiben Teal). Pro Theme die WCAG-AA-Stufe gegen den realen Body-Hintergrund (#fff
   hell, #222 dunkel). Diese css MUSS als LETZTE unter format.html.css stehen: Quarto
   verdrahtet die TOC-/Sidebar-Aktivfarbe als hartes "!important" (cosmo-Blau
   #2761e3 hell, darkly #00bc8c dunkel) unabhaengig von --bs-link-color -- das
   schlaegt nur eine spaeter geladene Regel mit !important.

   THEME-SCOPING: Quarto setzt im Light-Modus KEIN data-bs-theme; der Body traegt
   die Klasse `quarto-light`/`quarto-dark`. Darum Light-Regeln unscoped (Default)
   und Dark-Regeln unter `.quarto-dark` (plus `[data-bs-theme="dark"]` als Netz).

     hell   Content-Link  Grs_378 #59621D (6.58:1)    TOC/Navbar-aktiv  Mre_315 #00677F
     dunkel Content-Link  #A6C93C (8.37:1, aufgehellt) TOC/Navbar-aktiv  #4DC4E3 (7.82:1, aufgehellt)

   Zentrale Stelle der Wahrheit: repos/briefer/architect/css/brand-colors.css;
   jeder Kurs bindet sie projektlokal als echte Datei ein.

   Zusätzlich exportiert die Datei die PK-Palette als :root-Design-Tokens
   (--pk-*, Abschnitt 5) für Nicht-Quarto-Konsumenten, die die css served
   einbinden (Erstkonsument: prep-quiz). */

/* 1) Fliesstext-Links = Vorwaerts-Pol-Gruen (ci.md) -- lesen --bs-link-color zur Laufzeit.
      Hell Grs_378 #59621D (6.58:1 AA-Normal); dunkel aufgehellter Oliv-Tint #A6C93C (8.37:1
      auf #222 -- die Grs-Stufen sind dort zu dunkel: 377 nur 4.89, 378 2.42; PK 2026-07-03). Hover: die
      Gruen-Familie hat keine dunklere Textstufe -> gleiche Farbe, die Unterstreichung
      (Bootstrap-Default fuer Body-Links) traegt die Affordanz; keine neue Palette-Farbe.
      Grosse CTAs duerften Grs_377 auch hell tragen (AA-Large) -- im HTML selten, daher nicht
      global, bei Bedarf pro Artefakt setzen. */
:root {
  --bs-link-color: #59621D;
  --bs-link-color-rgb: 89, 98, 29;
  --bs-link-hover-color: #59621D;
  --bs-link-hover-color-rgb: 89, 98, 29;
}
.quarto-dark, [data-bs-theme="dark"] {
  /* Aufgehellter Dark-Mode-Oliv-Tint (PK-Entscheid 2026-07-03): die Standard-Grs-
     Stufen sind auf #222 zu dunkel (Grs_377 #7A9A01 nur 4.89 knapp AA, Grs_378
     2.42 durchgefallen). #A6C93C traegt 8.37:1 (AAA), bleibt im Oliv-Band. */
  --bs-link-color: #A6C93C;
  --bs-link-color-rgb: 166, 201, 60;
  --bs-link-hover-color: #A6C93C;
  --bs-link-hover-color-rgb: 166, 201, 60;
}

/* 2) TOC ("Auf dieser Seite"): aktiver Eintrag + Hover -- hart von Quarto auf
      Theme-Blau gehalten, daher explizit mit !important. Light = Default. */
.sidebar nav[role=doc-toc] ul > li > a.active,
.sidebar nav[role=doc-toc] ul > li > ul > li > a.active,
.sidebar nav[role=doc-toc] ul > li > a:hover,
.sidebar nav[role=doc-toc] ul > li > ul > li > a:hover {
  color: #00677F !important;
  border-left-color: #00677F !important;
}
.quarto-dark .sidebar nav[role=doc-toc] ul > li > a.active,
.quarto-dark .sidebar nav[role=doc-toc] ul > li > ul > li > a.active,
.quarto-dark .sidebar nav[role=doc-toc] ul > li > a:hover,
.quarto-dark .sidebar nav[role=doc-toc] ul > li > ul > li > a:hover,
[data-bs-theme="dark"] .sidebar nav[role=doc-toc] ul > li > a.active,
[data-bs-theme="dark"] .sidebar nav[role=doc-toc] ul > li > ul > li > a.active,
[data-bs-theme="dark"] .sidebar nav[role=doc-toc] ul > li > a:hover,
[data-bs-theme="dark"] .sidebar nav[role=doc-toc] ul > li > ul > li > a:hover {
  /* Aufgehellter Dark-Mode-Teal-Tint (PK-Entscheid 2026-07-03): Mre_312 #00A9CE
     traegt auf #222 nur 5.73 (unter AAA). #4DC4E3 traegt 7.82:1 (AAA), Mre-Band. */
  color: #4DC4E3 !important;
  border-left-color: #4DC4E3 !important;
}

/* 3) Navbar: aktiver Eintrag + Hover. Hoehere Spezifitaet als die Theme-Regel,
      daher ohne !important.
      LIGHT: cosmo rendert die Navbar hell (#F8F9FA) -- Mre_315 traegt dort 6.14:1. */
.navbar .navbar-nav .nav-link.active,
.navbar .navbar-nav .nav-link.show,
.navbar .navbar-nav .nav-link:hover,
.navbar .navbar-nav .nav-link:focus {
  color: #00677F;
}

/* 3b) Navbar im DARK-Modus (Korrektur 2026-07-15, PK-Entscheid).
      BEFUND: Die fruehere Annahme "Navbar-Hintergrund ist immer hell
      (background: light in _quarto.yml)" ist falsch. Quarto (1.9.38) liefert fuer
      den Dark-Modus eine EIGENE Bootstrap-CSS, in der darkly die Navbar mittelgrau
      rendert -- hsl(0,0%,43.7%) = #6F6F6F; das `background: light` der _quarto.yml
      greift dort nicht. Auf diesem Grau traegt KEINE CI-Teal-Stufe AA (gemessen:
      #00677F 1.29:1, #4DC4E3 2.47:1, #6AD1E3 2.83:1) -- der aktive Eintrag war
      unlesbar. Der Grund selbst ist das Problem, nicht die Schriftfarbe.
      FIX: Den Balken auf den CI-Dunkelgrund --pk-surface-dark ziehen; dort traegt
      --pk-teal-on-dark 7.82:1 (AAA) -- exakt die Kombination, die Regel 2 fuer die
      Seiten-TOC nutzt. Navbar und TOC stehen damit auf demselben Grund, und der
      Datei-Kopf ("dunkel ... TOC/Navbar-aktiv #4DC4E3") stimmt wieder mit der Regel.
      TRENNLINIE: Bei Navbar = Body (#222) fehlt die Kante, die darklys Grau-Balken
      lieferte; --pk-line (dark: Fls_CG10) setzt sie dezent. Im Light-Modus ist die
      Navbar mit 1.05:1 gegen #FFF ohnehin nur angedeutet -- die leise Kante ist
      also das themeuebergreifend konsistente Verhalten, kein Sonderweg.
      SCOPING: ausschliesslich ueber die Body-Klasse .quarto-dark (der Toggle setzt
      sie per bodyEl.classList.add("quarto-dark")). NICHT ueber
      [data-bs-theme="dark"]: die Navbar traegt dieses Attribut SELBST und in BEIDEN
      Modi (<nav class="navbar ..." data-bs-theme="dark">) -- als Vorfahre ihrer
      eigenen nav-links wuerde ein solcher Selektor auch im Light-Modus greifen und
      die helle Teal-Stufe auf den hellen Balken setzen. Das "[data-bs-theme]-Netz"
      aus dem Datei-Kopf gilt fuer TOC/Body, fuer die Navbar waere es ein Fehler.
      Praezedenz: PK 2026-07-15, entdeckt an charite/r1-website; betraf die gesamte
      Flotte (pharma-excel rendert identisch). */
.quarto-dark .navbar {
  background-color: #222222;
  border-bottom: 1px solid #63666A;
}

.quarto-dark .navbar .navbar-nav .nav-link.active,
.quarto-dark .navbar .navbar-nav .nav-link.show,
.quarto-dark .navbar .navbar-nav .nav-link:hover,
.quarto-dark .navbar .navbar-nav .nav-link:focus {
  color: #4DC4E3;
}

/* 4) Dark-Mode-Kontrast-Nachbesserung <summary> ("Aufloesung anzeigen" u.ae.):
      darkly rendert <details>/<summary> mit Bootstrap-Sekundaer #6c757d -- nur
      3.39:1 auf #222, unter AA (gemessen 2026-07-02). Auf die gedaempfte Graustufe
      heben, die darkly ohnehin fuer Bildunterschrift/Blockquote nutzt (#bfbfbf,
      8.65:1): konsistent muted, klar ueber AA. Nur Dark -- im Light traegt #6c757d
      auf Weiss 4.83:1 (AA) und bleibt unberuehrt. Theme-Scoping wie oben. */
.quarto-dark summary,
[data-bs-theme="dark"] summary {
  color: #bfbfbf;
}

/* 5) PK-Palette als :root-Design-Tokens (--pk-*) — zentrale Farbquelle für
      Nicht-Quarto-Anwendungen, die diese css als served Stylesheet einbinden
      (Erstkonsument: prep-quiz, dortige Decision E7). Reine Palette-Anker aus
      style/ci.md (SoT-Tabellen Mre/Fls/Grs/Sun), KEINE Rollenzuweisungen:
      Rollen (Links, TOC, Kontrast-Stufen) bleiben in den Abschnitten 1–4 bzw.
      beim Konsumenten. Additiv und theme-unabhängig — die Hex-Werte sind
      Palette-Konstanten; Dark-Mode-Anpassungen sind Rollen-Sache. */
:root {
  /* Teal (Mre = Pantone 310–316) — Strukturfarbe */
  --pk-teal-310: #6AD1E3;
  --pk-teal-313: #0092BC;
  --pk-teal-314: #007FA3;
  --pk-teal: #007FA3; /* Anker */
  --pk-teal-315: #00677F; /* AA-Text auf Weiß 6.47:1 */
  --pk-teal-316: #004851; /* Hover/Kontur 10.27:1 */

  /* Web-Orange — Entscheidungs-/Prüfmoment */
  --pk-orange-hell: #FF9C5B; /* Helles Orange, Chart-Familie hellste Stufe (nur dunkler Grund) */
  --pk-orange: #FF7F3E; /* Kern-Orange, als Textfarbe nicht tragend (2.51:1) */
  --pk-orange-text: #C05408; /* Orange Dunkel, einzige Orange-Text-Stufe (4.65:1) */

  /* Sonderfall-Semantik */
  --pk-sun-red: #AB2328; /* Sun_7621 — Fehler/Risiko */
  --pk-sun-red-7624: #802F2D; /* Sun_7624 — dunkle Rot-Familie-Stufe (Chart-Kanon, harter Stopp) */
  --pk-sun-red-7631: #572D2D; /* Sun_7631 — dunkelste Rot-Stufe (Chart-Kanon) */
  --pk-olive: #7A9A01; /* Grs_377 */
  --pk-olive-378: #59621D; /* Grs_378, AA-Normaltext auf Weiß 6.58:1 (Vorwärts-Link-Stufe) */
  --pk-terracotta: #AE3A1C; /* Rot-Orange, Korrektheit „falsch" auf Hell: 6.14:1 Weiß / 5.38:1 #F0F0EE. Farbton 12° — kein Alarm-Rot, außerhalb des Orange-Bands, entkoppelt von Sun-Rot (Fehler) und Orange (Prüfmoment) */

  /* Cool Gray (Fls) — Text + Struktur */
  --pk-anthracite: #53565A; /* Fls_CG11, Body AAA 7.38:1 */
  --pk-cg10: #63666A; /* gedämpft-lesbar 5.77:1 */
  --pk-cg5: #B1B3B3;
  --pk-cg1: #D9D9D6;

  /* Chart-Furniture-Grautöne (Chart-Kanon, style/ci.md) — getrennt von den
     Datenkategorie-Graus (Other reused --pk-cg10 hell / --pk-cg5 dunkel). */
  --pk-chart-na: #8A8D91;        /* fehlende Werte, hält 3:1 auf Weiß (3.33) UND #222 (4.77) */
  --pk-chart-grid-dark: #3A3A38; /* Gitter/Achsen auf dunklem Grund, bewusst leise (1.40:1) */

  /* Feld-Kategorie Braun (post-web-Katalog, PK-Entscheid 2026-07-12) — additive
     Kachel-Kategorienfarben, KEINE semantische Warmfarbe: entsättigtes/vertieftes
     Web-Orange (Lab-Farbton ~67–70°) mit Sicherheitsabstand zu Orange/Terracotta/
     Sun-Rot (dE ≥ 28) und zum Vorwärts-Oliv (dE ≥ 28). Rolle + Messung: style/ci.md,
     Abschnitt „Feld-Kategorie Braun". Zuordnung Feld→Token beim Konsumenten (katalog.css). */
  --pk-bronze: #9A6526;      /* Bronze-Gold, Weiß 4.93:1 (AA) */
  --pk-bronze-tief: #6A431C; /* Umbra-Bronze, Weiß 8.63:1 (AAA) */

  --pk-surface-light: #F0F0EE; /* helle Fläche, technisch vom Reinweiß-Grund trennbar */
  --pk-white: #FFFFFF;

  /* Illustrations-Grundfarben (Ink/Papier) — CI-UNABHÄNGIGE Primitive (PK-Entscheid
     2026-07-12: "immer einsetzbar, egal wie die CI aussieht"). Bewusst NICHT die
     semantischen Text-/Flächenrollen: --pk-ink ist echtes Schwarz für Marker-/Tusche-
     Konturen (Bikablo/Metalog-Zeichenstil), NICHT die Body-Textfarbe --pk-anthracite
     #53565A; --pk-paper-white ist das Zeichen-Papier — Alias auf das kanonische Reinweiß,
     damit #FFFFFF genau eine Quelle behält. Theme-unabhängig (Papier bleibt Papier, keine
     Dark-Variante). Erstkonsument: linkedin-quizzes Zeichen-Reward. Rolle/SoT-Text:
     style/ci.md, Abschnitt „Illustrations-Grundfarben (Ink und Papier)". */
  --pk-ink: #000000;
  --pk-paper-white: var(--pk-white);
}

/* 6) Web-Basis-Token für Nicht-Quarto-Konsumenten (Erstkonsument:
      post-web-Katalog; PK-Entscheide 2026-07-08). Getrennt von Abschnitt 5,
      weil hier bewusst KEINE reinen Palette-Anker liegen: eine Typo-Grundlinie
      und die in ci.md gemessenen Dark-Web-Rollen gegen #222 — Spiegelungen
      der Werte aus Abschnitt 2/3 dieser Datei (bei Änderung dort mitziehen).
      SoT-Text: style/ci.md, Abschnitte "Typo-Basis Web" und Web-HTML-Rollen. */
:root {
  --pk-font-size-base: 112.5%; /* 1rem = 18px bei Browser-Default; Lesbarkeit inkl. 60+ */
  --pk-surface-dark: #222222;  /* dunkler Web-Grund (realer Darkmode-Body der PK-Sites) */
  --pk-olive-on-dark: #A6C93C; /* Vorwärts-/Korrekt-Grün auf #222: 8.37:1, AAA */
  --pk-teal-on-dark: #4DC4E3;  /* Teal-Struktur/Nav-Aktiv auf #222: 7.82:1, AAA */
  --pk-terracotta-on-dark: #E56B42; /* Korrektheit „falsch" auf #222: 4.93:1 (AA-Text), aufgehellte Terracotta-Stufe (Farbton 15°) — Dunkel-Pendant zu --pk-terracotta, gespiegelt wie olive-378 → olive-on-dark */
  --pk-sun-red-on-dark: #EF6A70; /* Fehler/Risiko (harter Pol) auf #222: 5.28:1 (AA-Text), aufgehellter Sun-Rot-Tint — Dunkel-Pendant zu --pk-sun-red (roh #AB2328 traegt auf #222 nur 2.27:1, matt), Hue ~358° getrennt von terracotta-on-dark. Erstkonsument: pkterm (Terminal) */
  --pk-bronze-on-dark: #E3AC5E;      /* Feld-Kategorie-Akzent auf #222: 7.83:1 (AAA) — Dunkel-Pendant zu --pk-bronze */
  --pk-bronze-tief-on-dark: #CF9040; /* Feld-Kategorie-Akzent auf #222: 5.85:1 (AA) — Dunkel-Pendant zu --pk-bronze-tief */
}

/* 7) Web-Theme-Rollen + mobile Kompakt-Skala für Nicht-Quarto-Konsumenten mit
      eigenem Hell/Dunkel-Schalter (data-theme). Erstkonsumenten: post-web-Katalog,
      prep-quiz. SoT-Text: style/ci.md (Abschnitte „Typo-Basis Web"/Kompakt-Skala und
      „Web-Theme-Rollen"). Zwei Teile:

      7a Kompakt-Schriftskala (mobile-first): die clamp()-Stufen als served Tokens.
         Promotion aus der Prosa-SoT ausgelöst, weil mit prep-quiz ein ZWEITES
         mobiles Frontend die Skala teilt (der in ci.md benannte Trigger).
         Theme-unabhängig (reine Größen).

      7b Semantische Theme-Rollen: das Graustufen-/Akzent-Mapping EINMAL zentral,
         damit kein Konsument neu erfindet, welches Grau im Dunkeln Text/Muted/Linie
         trägt. Hell = Default; Dunkel via [data-theme="dunkel"] (expliziter Toggle)
         UND @media (prefers-color-scheme: dark) ohne explizite Hell-Wahl
         (Spiegelblock — beide Dunkel-Blöcke wertgleich halten). Referenziert NUR die
         Anker aus Abschnitt 5/6. Die color-scheme-Umschaltung und die Toggle-Optik
         liegen im zentralen Modul pk-theme.css (assets/ci), nicht hier — diese Datei
         bleibt reine Tokens. Quarto-Seiten (Abschnitte 1–4, .quarto-dark) berühren
         diese data-theme-Rollen nicht. */
:root {
  /* 7a — mobile Kompakt-Skala */
  --pk-text-body: 1rem;
  --pk-text-secondary: 0.95rem;
  --pk-title-page: clamp(1.6rem, 3.2vw, 2.2rem);
  --pk-title-section: clamp(1.3rem, 2.6vw, 1.65rem);
  --pk-title-card: clamp(1.25rem, 2.2vw, 1.5rem);

  /* 7b — semantische Theme-Rollen (Hell = Default) */
  --pk-bg: var(--pk-white);               /* Seitengrund */
  --pk-surface: var(--pk-surface-light);  /* abgesetzte Fläche (Karte) */
  --pk-fg: var(--pk-anthracite);          /* Body-Text, 7.38:1 auf Weiß */
  --pk-fg-muted: var(--pk-cg10);          /* gedämpfter Text, 5.77:1 */
  --pk-fg-faint: var(--pk-cg5);           /* Deko/Trenner */
  --pk-line: var(--pk-cg1);               /* Linien/Konturen */
  --pk-struktur: var(--pk-teal);          /* Struktur/Fokus/Hover */
  --pk-struktur-text: var(--pk-teal-315); /* Struktur als Text, 6.47:1 */
  --pk-vorwaerts: var(--pk-olive-378);    /* Vorwärts-/Hinaus-Link, 6.58:1 */
  --pk-correct: var(--pk-olive-378);      /* Korrektheit richtig, 5.77:1 auf #F0F0EE */
  --pk-incorrect: var(--pk-terracotta);   /* Korrektheit falsch, 5.38:1 auf #F0F0EE */
}
:root[data-theme="dunkel"] {
  --pk-bg: var(--pk-surface-dark);
  --pk-surface: var(--pk-anthracite);
  --pk-fg: var(--pk-cg1);                 /* 11.25:1 auf #222 */
  --pk-fg-muted: var(--pk-cg5);           /* 7.55:1 */
  --pk-fg-faint: var(--pk-cg10);
  --pk-line: var(--pk-cg10);
  --pk-struktur: var(--pk-teal-on-dark);
  --pk-struktur-text: var(--pk-teal-on-dark); /* 7.82:1, AAA */
  --pk-vorwaerts: var(--pk-olive-on-dark);    /* 8.37:1, AAA */
  --pk-correct: var(--pk-olive-on-dark);
  --pk-incorrect: var(--pk-terracotta-on-dark); /* 4.93:1 auf #222 */
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="hell"]) {
    --pk-bg: var(--pk-surface-dark);
    --pk-surface: var(--pk-anthracite);
    --pk-fg: var(--pk-cg1);
    --pk-fg-muted: var(--pk-cg5);
    --pk-fg-faint: var(--pk-cg10);
    --pk-line: var(--pk-cg10);
    --pk-struktur: var(--pk-teal-on-dark);
    --pk-struktur-text: var(--pk-teal-on-dark);
    --pk-vorwaerts: var(--pk-olive-on-dark);
    --pk-correct: var(--pk-olive-on-dark);
    --pk-incorrect: var(--pk-terracotta-on-dark);
  }
}