/*
 * ppi-base.css — PPI Platvoet Performance Intelligence
 * Gemeinsame Tokens, Komponenten und Print-Stile für alle Plain-CSS-Tools und Assessments.
 * Einbinden: <link rel="stylesheet" href="../ppi-base.css">
 */

/* ─── Fonts ──────────────────────────────────────────────────────────────────── */
/* Selbst gehostet statt @import von fonts.googleapis.com: Der Abruf dort
   überträgt die IP jedes Besuchers an Google. Es sind variable Schriften —
   eine Datei je Familie und Subset deckt alle Schnitte ab, Fett wird also
   nicht simuliert. Pfade sind relativ zur Lage dieser Datei im Wurzelverzeichnis. */
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../assets/fonts/playfair-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../assets/fonts/playfair-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('../assets/fonts/sourcesans-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('../assets/fonts/sourcesans-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ─── Design Tokens ──────────────────────────────────────────────────────────── */
:root {
  /* Farben */
  --navy:        #1B2A4A;
  --navy-dark:   #111d33;
  --navy-mid:    #243561;
  --steel:       #2C5282;   /* Daten-/Sekundärblau — hebt sich vom dunklen Chrome ab */
  --gold:        #C9A84C;
  --gold-light:  #e2c47a;
  --gold-pale:   #f5e9c6;
  --bg:          #F5F3EE;
  --bg-mid:      #E8E4DB;
  --white:       #ffffff;
  --text:        #1a2035;
  --text-muted:  #5a6380;
  --border:      #d4d9e4;

  /* Geometrie */
  --radius:      8px;
  --radius-sm:   4px;
  --hdr-h:       56px;   /* Höhe der fixierten Kopfzeile — Fortschrittsleisten,
                            scroll-padding und sticky-Kinder rechnen darauf */

  /* Schatten */
  --shadow-sm:   0 1px 3px rgba(0,0,0,.08);
  --shadow:      0 4px 12px rgba(0,0,0,.10);
  --shadow-lg:   0 8px 32px rgba(0,0,0,.14);

  /* Glow */
  --gold-glow:   rgba(201,168,76,0.20);

  /* Akzent-Rolle — Gold ist DER Marken-Akzent (konsolidiert 2026-08) */
  --accent:        var(--gold);
  --accent-strong: #AF8E33;   /* Gold als Text auf hellem Grund (kontraststark) */

  /* Ice Blue — ruhiger Tint (Flächen, Tabellen-Header), NICHT Akzent */
  --ice:         #CADCFC;
  --ice-soft:    #E7EEFB;

  /* Semantik — getrennt vom Akzent, je ein konsolidierter Wert */
  --ok:          #2E7D57;
  --ok-soft:     #E4F0EA;
  --warn:        #C77D33;
  --warn-soft:   #F6EADB;
  --bad:         #B3261E;
  --bad-soft:    #F7E2E0;
  --info:        #3D6B99;   /* neutrale Sachaussage, aus Motor und Radar übernommen */

  /* ── Pfadfarben ───────────────────────────────────────────────────────────
     Die sechs Bahnen des Modells. Keine Dekoration: die Farbe IST die
     Innovationsklasse, und die Leinwand im Motor zeichnet sich daraus. Sie
     stehen hier und nicht lokal, weil die Werkzeug-Landkarte sie mitführt. */
  --p-schwarz:   #3A4256;
  --p-gruen:     #2E7D57;
  --p-gelb:      #C77D33;
  --p-rot:       #B3261E;
  --p-blau:      #3D6B99;
  --p-tuerkis:   #2C7A7B;

  /* ── Zweitnamen (Übergang) ────────────────────────────────────────────────
     Motor, Radare und strategy-navigator sind mit einem eigenen Namensdialekt
     für dieselben Werte gewachsen. Statt rund 5.000 Zeilen fremdes CSS
     anzufassen, stehen die alten Namen hier als Verweis auf den neuen.

     Zwei Werte gingen dabei wirklich auseinander, und dort gewinnt die
     Grundpalette: --muted war #6B7688, --line war #E2DFD6. Beide fielen in der
     Kontrastprüfung von checkkopf.js (≥ 3:1) schwächer aus als --text-muted
     und --border, die diese Prüfung tragen.

     Das ist ein Übergang, kein Zielzustand. Wer eine Datei ohnehin anfasst,
     schreibt die neuen Namen; ist der Dialekt aus dem Bestand verschwunden,
     kann dieser Block weg. */
  --paper:       var(--bg);
  --card:        var(--white);
  --ink:         var(--text);
  --muted:       var(--text-muted);
  --line:        var(--border);
  --navy-2:      var(--navy-mid);
  --navy-3:      var(--steel);
  --gold-soft:   var(--gold-light);
  --gold-text:   var(--accent-strong);
  --watch:       var(--warn);
  --crit:        var(--bad);

  /* Schriftrollen unter ihren alten Namen. Der Inhalt ist jetzt derselbe wie
     im Rest des Hauses: Sans im Fließtext, Serife in den Überschriften. */
  --sans:  'Source Sans 3', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --serif: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --mono:  ui-monospace, 'SF Mono', Menlo, 'Courier New', monospace;
}

/* ─── Reset ──────────────────────────────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* ─── Base ───────────────────────────────────────────────────────────────────── */
body {
  font-family: 'Source Sans 3', 'Segoe UI', Arial, sans-serif;
  font-size: 15px;
  line-height: 1.6;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
}

h1, h2, h3, h4 {
  font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;
  color: var(--navy);
  line-height: 1.25;
}

a { color: var(--navy); }
a:hover { color: var(--gold); }

/* ─── Tool Header ────────────────────────────────────────────────────────────── */
.tool-header {
  background: var(--navy);
  border-bottom: 3px solid var(--gold);
  padding: 0 32px;
  height: var(--hdr-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  position: sticky;
  top: 0;
  z-index: 100;
}

.tool-header-left {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: 0 1 auto;
  min-width: 0;
  /* Die tatsächliche Untergrenze setzen die Kinder: Rücklink und Marke
     schrumpfen nicht, der Titelblock nicht unter seine min-width. Den
     Überlauf rechnet ppi-header.js daraus aus — `scrollWidth` taugt hier
     nicht, weil der Titel mit `white-space: nowrap` als Mindestbreite seine
     volle Textlänge meldet. */
}

.logo-mark {
  width: 34px;
  height: 34px;
  background: var(--gold);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 700;
  font-size: 14px;
  color: var(--navy);
  letter-spacing: -0.5px;
  flex-shrink: 0;
}

/* Der Titel kürzt sich mit Auslassungspunkten, aber nicht bis ins Nichts.
   `min-width` ist zugleich die Schwelle, an der ppi-header.js einklappt: Wird
   es enger, weichen die Schalter ins Menü, statt den Namen des Werkzeugs
   wegzuquetschen. Auf dem Telefon ist der Name die wichtigere Information.
   `overflow: hidden` setzt die automatische Mindestbreite dieses Flex-Kindes
   auf null, erst dadurch greift die eigene Untergrenze statt der Wortlänge. */
.tool-header-info {
  min-width: 18ch;   /* in ch der Grundschrift; der Titel steht in der breiteren Playfair */
  max-width: 40ch;   /* „Freiwilliger Nachhaltigkeitsbericht" braucht 35 Zeichen */
  overflow: hidden;
}

.tool-header-title {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 16px;
  font-weight: 600;
  color: var(--white);
  letter-spacing: 0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Die Unterzeile kürzt sich wie der Titel. Ohne das umbricht eine lange
   Einordnung („Risikomanagementmaßnahmen nach § 30 Abs. 2 BSIG") auf zwei
   Zeilen und läuft aus der Leiste heraus — die Kopfzeile hat eine feste Höhe,
   der Text wächst trotzdem weiter. */
.tool-header-subtitle {
  display: block;
  font-size: 10px;
  color: var(--gold);
  letter-spacing: 0.10em;
  text-transform: uppercase;
  margin-top: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tool-header-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

/* Auf dem Telefon zählt jedes Pixel Breite, die Höhe bleibt bei --hdr-h. */
@media (max-width: 700px) {
  .tool-header { padding: 0 16px; gap: 10px; }
  .tool-header-left { gap: 10px; }
  .logo-mark { width: 30px; height: 30px; font-size: 12px; }
  .tool-header-title { font-size: 14px; }
  .tool-header-subtitle { display: none; }
  .hdr-back span:not(:first-child) { display: none; }
}

/* ─── Back-Link ──────────────────────────────────────────────────────────────── */
.hdr-back {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: rgba(255,255,255,0.55);
  text-decoration: none;
  font-size: 12px;
  letter-spacing: 0.04em;
  transition: color 0.2s;
}
.hdr-back:hover { color: var(--gold); }
.hdr-back { flex-shrink: 0; }

/* ─── Kopfzeilen-Aktionen ────────────────────────────────────────────────────
   Feste Reihenfolge in jedem Werkzeug:
     ← Übersicht · Marke · Titel  ⟷  Werkzeugaktionen · [⋯] · Sprache

   `.hdr-group` hält die Werkzeugaktionen. Passen sie nicht in eine Zeile,
   verschiebt `ppi-header.js` die hinteren Knoten nach `.hdr-menu` — es
   verschiebt die echten Knoten, damit onclick und id erhalten bleiben.
   Genau ein `.btn-gold` je Werkzeug: die Aktion, die das Ergebnis erzeugt.
   Alles andere ist `.btn-ghost`. */
.hdr-group {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.hdr-more-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.hdr-more {
  display: none;              /* ppi-header.js zeigt ihn, sobald etwas einklappt */
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.28);
  border-radius: var(--radius-sm);
  color: rgba(255,255,255,0.70);
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
  transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}
.hdr-more.is-visible { display: inline-flex; }
.hdr-more:hover { border-color: var(--gold); color: var(--gold); }
.hdr-more[aria-expanded="true"] {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--navy);
}

.hdr-menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 200;
  display: none;
  flex-direction: column;
  gap: 2px;
  min-width: 208px;
  padding: 6px;
  background: var(--navy-dark);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
}
.hdr-menu.is-open {
  display: flex;
  animation: hdr-menu-in 0.14s ease-out;
}
@keyframes hdr-menu-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: none; }
}

/* Ein Umschalter im Menü nimmt die volle Breite und bleibt ein Paar. */
.hdr-menu .hdr-seg { width: 100%; padding: 4px 6px; }
.hdr-menu .hdr-seg button { flex: 1; }

.hdr-menu .hdr-sep {
  height: 1px;
  margin: 4px 6px;
  background: rgba(255,255,255,0.12);
}

/* Auswahlfeld in der Kopfzeile (bmc, wardley) */
.hdr-select {
  height: 30px;
  max-width: 220px;
  padding: 0 8px;
  font-family: inherit;
  font-size: 12px;
  color: var(--white);
  background-color: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.28);
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.hdr-select:hover { border-color: var(--gold); }
.hdr-select option { color: var(--text); background-color: var(--white); }

/* ─── Fortschritt in der Kopfzeile ───────────────────────────────────────────
   Für die Assessments: die goldene Unterkante der Kopfzeile wird zur
   Fortschrittsanzeige, statt darunter eine zweite klebende Leiste zu setzen.
   Stand und Bedienung stehen so an einer Stelle, und die Höhe bleibt --hdr-h.
   Solange sie unsichtbar ist, zeigt die Kopfzeile ihre gewohnte goldene
   Unterkante. Sichtbar geschaltet legt sich die Spur darüber, und der
   Füllstand ist das Gold. Ein Mechanismus, gesteuert allein über die
   Sichtbarkeit — die Assessments schalten dieses Element ohnehin schon. */
.hdr-progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -3px;             /* genau über der 3-px-Unterkante */
  height: 3px;
  background: var(--navy-mid);
  pointer-events: none;
}
.hdr-progress-bar {
  height: 100%;
  width: 0%;
  background: var(--gold);
  transition: width 0.4s ease;
}

/* ─── Umschalter: Sprache und Ansicht ────────────────────────────────────────
   Zwei Zustände, von denen genau einer gilt — anders als die Schalter in
   .hdr-group, die etwas auslösen. Sie klappen deshalb nie ein. Der
   Sprachumschalter steht immer ganz außen rechts, ein Ansichtsumschalter
   (.hdr-seg) links daneben. Bisher in 22 Werkzeugen lokal dupliziert. */
.lang-switch,
.hdr-seg {
  display: inline-flex;
  gap: 4px;
  flex-shrink: 0;
}
.lang-switch button,
.hdr-seg button,
.lang-btn {
  padding: 4px 11px;
  font-family: inherit;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: rgba(255,255,255,0.72);
  background: transparent;
  border: 1px solid rgba(255,255,255,0.30);
  border-radius: 999px;
  cursor: pointer;
  transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}
.lang-switch button:hover,
.hdr-seg button:hover,
.lang-btn:hover { border-color: var(--gold); color: var(--gold); }
.lang-switch button.active,
.lang-switch button[aria-pressed="true"],
.hdr-seg button.active,
.hdr-seg button[aria-pressed="true"],
.lang-btn.active {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--navy);
}

/* ─── Buttons ────────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 7px 16px;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-family: inherit;
  text-decoration: none;
  transition: all 0.18s ease;
  white-space: nowrap;
  line-height: 1;
}

.btn-gold {
  background: var(--gold);
  color: var(--navy);
  font-weight: 700;
}
.btn-gold:hover { background: var(--gold-light); }

/* Der Umriss-Schalter steht seit der Kopfzeilen-Vereinheitlichung ausschließlich
   im hellen Seiteninhalt — in keiner Kopfzeile mehr. Goldene Schrift auf dem
   hellen Grund ergibt nur 2,06:1; der goldene Rahmen trägt die Marke, die
   navyfarbene Schrift die Lesbarkeit. Für den seltenen Einsatz auf dunklem
   Grund gibt es `.btn-outline-hell`. */
.btn-outline {
  background: transparent;
  border: 1px solid var(--gold);
  color: var(--navy);
}
.btn-outline:hover { background: var(--gold); color: var(--navy); }

.btn-outline-hell {
  background: transparent;
  border: 1px solid var(--gold);
  color: var(--gold);
}
.btn-outline-hell:hover { background: var(--gold); color: var(--navy); }

/* Die stille Schaltfläche für den hellen Seiteninhalt. Die dunkle Fassung für
   die Kopfzeile steht weiter unten, bezogen auf .tool-header — sie gewinnt
   dort und lässt diese hier unberührt.

   Vorher war es umgekehrt: unbezogen dunkel, und wer .btn-ghost im Inhalt
   verwendete, bekam weiße Schrift auf hellem Grund. Vier Werkzeuge hatten das
   lokal ausgeglichen, ppi-ai-act-navigator nicht — dort stand „Zurücksetzen"
   bei 1,08:1 unsichtbar in der Aktionsleiste. */
.btn-ghost {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--navy);
}
.btn-ghost:hover { border-color: var(--gold); color: var(--accent-strong); }

.btn-navy {
  background: var(--navy);
  color: var(--gold);
}
.btn-navy:hover { background: var(--navy-dark); }

.btn-sm {
  padding: 5px 10px;
  font-size: 11px;
}

/* ─── Seitentitel ────────────────────────────────────────────────────────────
   Der Name des Werkzeugs steht in der Kopfzeile, seine Erklärung hier: einmal
   oben im Inhalt, wo sie gelesen und dann weggescrollt wird. Bisher in neun
   Werkzeugen wortgleich lokal definiert. */
.page-title {
  font-size: 26px;
  font-weight: 600;
  margin-bottom: 4px;
  text-wrap: balance;
}
.page-subtitle {
  color: var(--text-muted);
  font-size: 14px;
  margin-bottom: 20px;
  max-width: 78ch;
  text-wrap: pretty;
}

/* ─── Reiterleiste unter der Kopfzeile ───────────────────────────────────────
   Nur für Werkzeuge, die mehrere Ansichten haben. Reiter sind Navigation,
   keine Schalter: sie gehören nicht ins Überlaufmenü, sondern bleiben
   erreichbar. Sie kleben deshalb unter der Kopfzeile statt in ihr. */
.hdr-tabs {
  position: sticky;
  top: var(--hdr-h);
  z-index: 90;
  display: flex;
  gap: 2px;
  overflow-x: auto;
  padding: 0 32px;
  background: var(--navy-mid);
  scrollbar-width: none;
}
.hdr-tabs::-webkit-scrollbar { display: none; }
.hdr-tabs button {
  flex-shrink: 0;
  margin-top: 6px;
  padding: 10px 18px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.72);
  background: transparent;
  border: none;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 0.18s ease, color 0.18s ease;
}
.hdr-tabs button:hover {
  background: rgba(255,255,255,0.10);
  color: var(--white);
}
/* Der aktive Reiter ist eine Lasche in der Farbe des Inhalts: er sitzt sichtbar
   auf der Seite, die er zeigt. Eine bloße Unterstreichung trägt diese
   Information nicht kräftig genug — sie war der erste Versuch und zu leise. */
.hdr-tabs button.active,
.hdr-tabs button.active:hover {
  background: var(--bg);
  color: var(--navy);
  font-weight: 700;
}
@media (max-width: 700px) { .hdr-tabs { padding: 0 16px; } }

/* ─── Schalter in der Kopfzeile ──────────────────────────────────────────────
   Mehrere Werkzeuge definieren `.btn-ghost` und Verwandte lokal für ihren
   hellen Seiteninhalt — dunkle Schrift auf hellem Grund. Weil das lokale
   `<style>` nach ppi-base.css steht, traf das bisher auch den navyfarbenen
   Kopf: navy auf navy, Beschriftung unsichtbar.

   Diese Regeln sind deshalb auf `.tool-header` bezogen. Damit gewinnen sie
   gegen jede unbezogene `.btn-*`-Regel eines Werkzeugs, und der Kopf sieht
   überall gleich aus, egal was die Datei sonst für ihre Schalter festlegt.
   Geometrie steht hier mit, weil lokale `.btn`-Regeln sonst Höhe und
   Schriftgrad der Kopfzeile verschieben. */
.tool-header .btn,
.hdr-menu .btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  font-family: inherit;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1;
  border-radius: var(--radius-sm);
  white-space: nowrap;
}

.tool-header .btn-ghost {
  background: transparent;
  border: 1px solid rgba(255,255,255,0.28);
  color: rgba(255,255,255,0.78);
}
.tool-header .btn-ghost:hover {
  background: transparent;
  border-color: var(--gold);
  color: var(--gold);
}

.tool-header .btn-gold,
.hdr-menu .btn-gold {
  background: var(--gold);
  border: 1px solid var(--gold);
  color: var(--navy);
  font-weight: 700;
}
.tool-header .btn-gold:hover,
.hdr-menu .btn-gold:hover { background: var(--gold-light); color: var(--navy); }

/* Im aufgeklappten Menü sind es Listeneinträge, keine Knöpfe. */
.hdr-menu .btn:not(.btn-gold) {
  justify-content: flex-start;
  width: 100%;
  padding: 9px 12px;
  background: transparent;
  border: 1px solid transparent;
  color: rgba(255,255,255,0.82);
}
.hdr-menu .btn:not(.btn-gold):hover {
  background: rgba(255,255,255,0.08);
  border-color: transparent;
  color: var(--gold);
}

/* ─── Cards ──────────────────────────────────────────────────────────────────── */
.card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px 24px;
}

.card-header {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 15px;
  font-weight: 600;
  color: var(--navy);
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ─── Badges / Tags ──────────────────────────────────────────────────────────── */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 2px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.badge-gold  { background: var(--gold-pale); color: var(--navy); border: 1px solid var(--gold); }
.badge-navy  { background: var(--navy);      color: var(--gold); }
.badge-muted { background: var(--bg-mid);    color: var(--text-muted); }
.badge-ok    { background: var(--ok-soft);   color: var(--ok);   border: 1px solid var(--ok); }
.badge-warn  { background: var(--warn-soft);  color: var(--warn); border: 1px solid var(--warn); }
.badge-bad   { background: var(--bad-soft);   color: var(--bad);  border: 1px solid var(--bad); }

/* ─── Info / Tip Blocks ──────────────────────────────────────────────────────── */
.tip {
  background: var(--gold-pale);
  border-left: 3px solid var(--gold);
  padding: 10px 14px;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.65;
}
.tip strong { color: var(--navy-dark); }

/* ─── Divider ────────────────────────────────────────────────────────────────── */
.divider {
  height: 1px;
  background: var(--border);
  border: none;
  margin: 0;
}

/* ─── Footer ─────────────────────────────────────────────────────────────────── */
.ppi-footer {
  border-top: 2px solid var(--bg-mid);
  padding: 12px 32px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--white);
  font-size: 11px;
  color: var(--text-muted);
  letter-spacing: 0.04em;
}
.ppi-footer strong { color: var(--navy); }
.ppi-footer a { color: var(--navy); text-decoration: none; }
.ppi-footer a:hover { color: var(--gold); }
.ppi-footer-ts {
  font-family: 'Source Sans 3', Arial, sans-serif;
  font-size: 11px;
  color: var(--text-muted);
}

/* ─── Utility ────────────────────────────────────────────────────────────────── */
.text-navy    { color: var(--navy); }
.text-steel   { color: var(--steel); }
.text-gold    { color: var(--gold); }
.text-accent  { color: var(--accent-strong); }
.text-muted   { color: var(--text-muted); }
.text-ok      { color: var(--ok); }
.text-warn    { color: var(--warn); }
.text-bad     { color: var(--bad); }
.bg-navy      { background: var(--navy); }
.bg-steel     { background: var(--steel); }
.bg-gold-pale { background: var(--gold-pale); }
.bg-ice       { background: var(--ice); }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0; }

/* ─── Bedienbarkeit ──────────────────────────────────────────────────────────
   Diese Gruppe kam mit der Kopfzeilen-Vereinheitlichung dazu. Vorher gab es in
   keinem der Werkzeuge einen sichtbaren Tastaturfokus. */

/* Sprunglink: erstes fokussierbare Element der Seite, sichtbar erst bei Fokus. */
.ppi-skip {
  position: absolute;
  left: 8px;
  top: -60px;
  z-index: 300;
  padding: 9px 16px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--navy);
  background: var(--gold);
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  text-decoration: none;
  transition: top 0.18s ease;
}
.ppi-skip:focus { top: 0; color: var(--navy); }

/* Sichtbarer Fokus für die Tastatur, nicht für die Maus. Bewusst niedrige
   Spezifität (0-1-1): ein Werkzeug darf den Ring lokal verfeinern. Wo lokal
   `outline: none` auf `:focus` steht, braucht es dort seinen
   `:focus-visible`-Zwilling — die Basisregel allein verliert dagegen. */
:is(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

/* Die fixierte Kopfzeile darf beim Tabben und bei Sprungmarken nichts verdecken. */
html { scroll-padding-top: calc(var(--hdr-h) + 12px); }

/* Kein 300-ms-Warten auf einen Doppeltipp, kein grauer Aufblitzer. */
a, button, label, summary, select, [role="button"] { touch-action: manipulation; }
html { -webkit-tap-highlight-color: transparent; }

/* Wer im Betriebssystem „Bewegung reduzieren" gewählt hat, bekommt keine.
   Die einzige Regel hier, die auch lokale Deklarationen in den Werkzeugen
   überschreibt — deshalb !important. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ─── Dashboard ───────────────────────────────────────────────────────────────
   Der gemeinsame Wortschatz für Übersichtsseiten: ein dunkles Kopfbanner, ein
   Raster aus Karten, große Kennzahlen, Kachelblöcke, Balken.

   Anlass: Kopfbanner, Raster, Kartenrahmen, Index-Kachel und Kennzahl-Kacheln
   stehen wortgleich in allen vier Radaren, rund 70 Zeilen, in keiner
   gemeinsamen Datei. Der Reiter „Überblick" und die Berichtsseite hätten sie
   ein fünftes und sechstes Mal kopiert.

   Die Radare behalten ihre eigenen Namen (.radar-kopf, .radar-card, .statgrid)
   und bleiben unangetastet: ihr lokales <style> steht nach dieser Datei und
   gewinnt ohnehin. Wer eine der vier ohnehin anfasst, schreibt die neuen.
   ──────────────────────────────────────────────────────────────────────────── */

/* Kopfbanner */
.dash-kopf {
  background: var(--navy);
  color: var(--white);
  padding: 18px 28px 16px;
  border-bottom: 4px solid var(--gold);
}
/* h1-h4 sind navy. Auf dem navyfarbenen Banner wäre das unsichtbar. */
.dash-kopf h1, .dash-kopf h2 { color: var(--white); }
.dash-kopf-zeile {
  display: flex; justify-content: space-between; gap: 24px;
  flex-wrap: wrap; align-items: flex-start;
  max-width: 1440px; margin: 0 auto;
}
.dash-marke h1 { font-size: 1.45rem; font-weight: 700; }
.dash-marke h1 .slash { color: var(--gold); }
.dash-marke .sub {
  font-family: var(--sans); font-size: .72rem; letter-spacing: .18em;
  text-transform: uppercase; color: var(--gold-light); margin-top: 4px;
}
.dash-meta {
  font-family: var(--sans); font-size: .72rem; color: var(--ice);
  display: grid; grid-template-columns: auto auto; gap: 2px 14px;
}
.dash-meta b { color: var(--white); font-weight: 600; }
.dash-abzeichen {
  border: 1px solid var(--gold); color: var(--gold-light);
  font-family: var(--sans); font-size: .66rem; letter-spacing: .14em;
  text-transform: uppercase; padding: 5px 10px; white-space: nowrap;
}

/* Raster und Karte */
.dash-raster { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 16px; }
.dash-karte {
  background: var(--white);
  border: 1px solid var(--border);
  border-top: 3px solid var(--navy);
  /* Ohne min-width kann eine Rasterzelle nicht unter die Mindestbreite ihres
     Inhalts schrumpfen, und eine breite Tabelle schiebt die ganze Seite. */
  min-width: 0;
}
.dash-karte.gold { border-top-color: var(--gold); }
.dash-karte > h2 {
  font-family: var(--sans); font-size: .7rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--navy);
  padding: 10px 14px 8px; border-bottom: 1px solid var(--border);
  display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
}
.dash-karte > h2 .tag {
  color: var(--text-muted); letter-spacing: .04em;
  text-transform: none; font-size: .68rem; font-weight: 400;
}
.dash-karte > .body { padding: 12px 14px; overflow-x: auto; }

/* Große Kennzahl */
.dash-zahl-zeile { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
.dash-zahl {
  font-family: var(--mono); font-size: 3.4rem; font-weight: 700;
  line-height: 1; color: var(--gold);
}
.dash-zahl.klein { font-size: 2.1rem; }
.dash-zahl-meta { font-family: var(--sans); font-size: .74rem; color: var(--text-muted); }
.dash-zahl-meta b { color: var(--text); }

/* Kachelblock */
.dash-kacheln { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.dash-kachel { border: 1px solid var(--border); padding: 10px; min-width: 0; }
.dash-kachel .k {
  font-family: var(--sans); font-size: .64rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--text-muted);
}
.dash-kachel .v {
  font-family: var(--mono); font-size: 1.5rem; font-weight: 700;
  color: var(--navy); margin-top: 2px;
}
/* Ein Name ist keine Zahl: Textwerte bekommen die Fließschrift und brechen um. */
.dash-kachel .v.text {
  font-family: var(--sans); font-size: 1rem; font-weight: 600;
  line-height: 1.3; word-break: break-word;
}
.dash-kachel .v.gold { color: var(--accent-strong); }
.dash-kachel .v.ok   { color: var(--ok); }
.dash-kachel .v.warn { color: var(--warn); }
.dash-kachel .v.bad  { color: var(--bad); }
.dash-kachel .d { font-family: var(--sans); font-size: .7rem; color: var(--text-muted); margin-top: 4px; }

/* Balken: ein Anteil, waagerecht, ohne Diagrammbibliothek */
.dash-balken { display: flex; height: 12px; border-radius: 2px; overflow: hidden; background: var(--bg-mid); }
.dash-balken span { display: block; height: 100%; }
.dash-balken .weiter  { background: var(--ok); }
.dash-balken .zurueck { background: var(--steel); }
.dash-balken .parken  { background: var(--warn); }
.dash-balken .stopp   { background: var(--bad); }
.dash-balken .offen   { background: var(--border); }
.dash-legende {
  font-family: var(--sans); font-size: .7rem; color: var(--text-muted);
  display: flex; gap: 14px; flex-wrap: wrap; margin-top: 8px;
}
.dash-punkt {
  display: inline-block; width: 9px; height: 9px; border-radius: 50%;
  margin-right: 5px; vertical-align: middle;
}

/* Etikett für einen Zustand */
.dash-etikett {
  font-family: var(--sans); font-size: .62rem; font-weight: 700;
  letter-spacing: .1em; padding: 2px 7px; color: var(--white);
  margin-right: 8px; vertical-align: 1px; text-transform: uppercase;
}
.dash-etikett.ok   { background: var(--ok); }
.dash-etikett.warn { background: var(--warn); }
.dash-etikett.bad  { background: var(--bad); }
.dash-etikett.info { background: var(--info); }

/* Zeilenliste statt Tabelle, wo eine Tabelle zu schwer wäre */
.dash-zeile { padding: 9px 0; border-bottom: 1px solid var(--border); font-size: .9rem; }
.dash-zeile:last-child { border-bottom: none; }
.dash-zeile .neben { font-family: var(--sans); font-size: .72rem; color: var(--text-muted); }

/* Diagrammrahmen: Chart.js braucht eine feste Höhe am Elternelement */
.dash-diagramm { height: 150px; position: relative; }
.dash-diagramm.hoch { height: 220px; }

@media (max-width: 1100px) { .dash-raster { grid-template-columns: 1fr 1fr; } }
@media (max-width: 720px) {
  .dash-raster { grid-template-columns: minmax(0, 1fr); }
  /* Karten tragen ihre Spalte teils als Inline-Stil; inline schlägt sonst
     jede Media Query und erzwingt eine zweite Spalte. */
  .dash-raster > * { grid-column: auto !important; grid-row: auto !important; }
  .dash-kopf { padding: 14px 16px; }
  .dash-kacheln { grid-template-columns: 1fr; }
}

/* ─── Print ──────────────────────────────────────────────────────────────────── */
@media print {
  .tool-header,
  .ppi-footer,
  .hdr-back,
  .hdr-menu,
  .hdr-more,
  .hdr-tabs,
  .ppi-skip,
  [data-noprint],
  .btn { display: none !important; }

  body {
    background: white !important;
    color: black !important;
    font-size: 11pt;
  }

  * {
    box-shadow: none !important;
    text-shadow: none !important;
  }

  h1, h2, h3, h4 { page-break-after: avoid; }
  .card { break-inside: avoid; border: 1px solid #ccc; }
  .dash-karte { break-inside: avoid; border: 1px solid #ccc; }
  .dash-kopf { background: none !important; color: black !important;
               border-bottom: 2px solid #999; }
  .dash-kopf h1, .dash-kopf h2, .dash-meta, .dash-meta b { color: black !important; }
  .dash-raster { grid-template-columns: 1fr 1fr; }
}