/* WissensDB Prozess-Landschaftskarte – gemeinsame Styles (Schritt 3).
   Bewusst schlank, druck-/exportfreundlich (Ansicht C als Tabelle). */

/* ================================================================
 * Design-Tokens – generiert aus designSystem/tokens.css + tokens-extras.css (v0.2).
 * SSOT dort: designSystem/tokens.json / tokens.css / tokens-extras.css.
 * Bei Aenderung an den Design-Tokens IMMER dort aendern und hierher uebernehmen.
 * ================================================================ */
:root {
  /* ---- Brand ---- */
  --color-brand-blue:      #06376C;
  --color-brand-blue-600:  #2E5A8A;
  --color-brand-blue-300:  #8FC0EC;
  --color-brand-green:     #457C39;
  --color-brand-green-500: #6BA368;
  --color-brand-amber:     #E0A422;

  /* ---- Neutrals ---- */
  --color-neutral-0:   #FFFFFF;
  --color-neutral-50:  #F5F7FA;
  --color-neutral-100: #EAEEF3;
  --color-neutral-200: #D5DCE5;
  --color-neutral-300: #B4C0CE;
  --color-neutral-400: #8A99AB;
  --color-neutral-500: #647184;
  --color-neutral-600: #495568;
  --color-neutral-700: #333D4C;
  --color-neutral-800: #1F2A37;
  --color-neutral-900: #111820;

  /* ---- Semantic ---- */
  --color-text:          var(--color-neutral-800);
  --color-text-muted:    var(--color-neutral-500);
  /* Akzentfarbe als SCHRIFT auf dem Seitenhintergrund (Links, Chips,
     hervorgehobene Werte) -- getrennt von --color-primary, das eine FLAECHE
     ist, auf der weisse Schrift steht. Im Hellmodus identisch, im Dark Mode
     nicht (siehe .dark weiter unten). */
  --color-text-link:     var(--color-brand-blue);
  --color-text-on-brand: var(--color-neutral-0);
  --color-background:    var(--color-neutral-0);
  --color-surface:       var(--color-neutral-50);
  --color-surface-2:     var(--color-neutral-100);
  --color-border:        var(--color-neutral-200);
  --color-primary:       var(--color-brand-blue);
  --color-primary-hover: var(--color-brand-blue-600);
  --color-secondary:     var(--color-brand-green);
  --color-accent:        var(--color-brand-amber);
  --color-success:       #2E7D32;
  --color-warning:       var(--color-brand-amber);
  --color-warning-text:  #8A6300;
  --color-danger:        #C0392B;
  --color-info:          var(--color-brand-blue-600);

  /* Soft-Tints & Utility-Farben */
  --color-primary-soft:   rgba(6, 55, 108, 0.10);
  --color-secondary-soft: rgba(69, 124, 57, 0.14);
  --color-success-soft:   rgba(46, 125, 50, 0.14);
  --color-warning-soft:   rgba(224, 164, 34, 0.18);
  --color-danger-soft:    rgba(192, 57, 43, 0.14);
  --color-info-soft:      rgba(6, 55, 108, 0.12);
  --color-outline-hover:  rgba(6, 55, 108, 0.06);
  --color-overlay-scrim:  rgba(10, 20, 35, 0.55);

  /* ---- Typography ---- */
  --font-sans: Montserrat, "Poppins", "Segoe UI", Arial, sans-serif;
  --font-mono: "JetBrains Mono", "Cascadia Code", Consolas, monospace;

  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;

  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.25rem;
  --font-size-2xl: 1.5rem;
  --font-size-3xl: 1.875rem;
  --font-size-4xl: 2.25rem;
  --font-size-5xl: 3rem;

  --line-height-tight: 1.15;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.7;

  --letter-spacing-tighter: -0.02em;
  --letter-spacing-tight: -0.015em;
  --letter-spacing-snug: -0.01em;
  --letter-spacing-wide: 0.06em;

  /* ---- Spacing (4px-Basis) ---- */
  --space-0: 0;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;

  /* ---- Radius ---- */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 9999px;

  /* ---- Shadows ---- */
  --shadow-sm: 0 1px 2px rgba(17, 24, 32, 0.08);
  --shadow-md: 0 4px 12px rgba(17, 24, 32, 0.10);
  --shadow-lg: 0 12px 32px rgba(17, 24, 32, 0.14);

  /* ---- Motion (tokens-extras.css) ---- */
  --motion-fast: 120ms;
  --motion-base: 200ms;
  --motion-slow: 320ms;
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-entrance: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-exit:     cubic-bezier(0.4, 0, 1, 1);

  /* Fokus-Ring (Tastaturbedienung, immer sichtbar lassen) */
  --focus-ring: 0 0 0 3px rgba(6, 55, 108, 0.18);
}

/* ---- Self-hosted Fonts (Montserrat, JetBrains Mono) ----
 * Lokale woff2-Dateien unter fonts/ -- kein externer Font-Request (CSP-konform,
 * kein Google-Fonts-Nachladen -> keine IP-Uebertragung an Dritte).
 */
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/montserrat-400.woff2") format("woff2");
}
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/montserrat-500.woff2") format("woff2");
}
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/montserrat-600.woff2") format("woff2");
}
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/montserrat-700.woff2") format("woff2");
}
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("fonts/montserrat-800.woff2") format("woff2");
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/jetbrains-mono-400.woff2") format("woff2");
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/jetbrains-mono-500.woff2") format("woff2");
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/jetbrains-mono-600.woff2") format("woff2");
}

/* Farb-Bridge: bestehende Variablennamen auf Design-Tokens gemappt (Schritt 3).
   BPMN-/Domain-Variablen (Start, Ende, Gateway, Kat-Fuehrung/-Kern/-Support/-None,
   Lane-A/-B, Task, Suggest) bewusst unveraendert -- Scope-Grenze, siehe
   designSystem/design-system.rules.md. */
:root {
  --bg: var(--color-surface);
  --surface: var(--color-background);
  --border: var(--color-border);
  --text: var(--color-text);
  --muted: var(--color-text-muted);
  --accent: var(--color-primary);
  /* Akzentfarbe als SCHRIFT (Links, Chips, hervorgehobene Werte) -- getrennt
     von --accent, das eine FLAECHE ist (Knopf-Hintergrund, auf dem weisse
     Schrift steht). Im Hellmodus sind beide identisch; im Dark Mode bleibt
     --accent ein dunkles Blau, waehrend --accent-text hell wird. Vorher nutzten
     beide Rollen --accent: Chips, Navigations- und Fliesstext-Links kamen im
     Dark Mode auf 1,7-2,6:1 statt der geforderten 4,5:1 (WCAG AA, siehe
     designSystem/design-system.rules.md). SSOT: --color-text-link in
     designSystem/tokens.css bzw. tokens-extras.css. */
  --accent-text: var(--color-text-link);
  --accent-soft: var(--color-primary-soft);
  --ok: var(--color-success);
  --ok-soft: var(--color-success-soft);
  --warn: var(--color-warning-text);
  --lane-a: #f2f5f9;
  --lane-b: #eaeef4;
  --start: #e3f3e8;
  --start-border: #2f9e57;
  --ende: #fbe7e7;
  --ende-border: var(--color-danger);
  --gateway: #fff4d6;
  --gateway-border: #c79218;
  --task: #ffffff;
  --task-border: #b7c0cc;
  --edge: var(--color-text-muted);
  /* Kategorie-Akzente (Ansicht B — analog Canvas-Mockup: Führung=lila, Kern=grün, Support=gelb) */
  --kat-fuehrung: #7c4dcc;
  --kat-kern: #2f9e57;
  --kat-support: #c79218;
  --kat-none: #b7c0cc;
  --suggest: #9a5b00;
}

/* Dark Mode: Klasse .dark am <html> (theme.js), kein @media mehr (Schritt 4).
   Semantische Tokens 1:1 aus designSystem/tokens-extras.css .dark uebernommen (SSOT dort) --
   die Farb-Bridge oben loest --bg/--surface/--text/--muted/--accent/--accent-soft/--ok/
   --ok-soft/--warn/--ende-border/--edge automatisch ueber diese Tokens auf. */
.dark {
  --color-background:    #0D141C;
  --color-surface:       #161F2A;
  --color-surface-2:     #1E2A38;
  --color-text:          #EAEEF3;
  --color-text-muted:    #8A99AB;
  /* Akzent-SCHRIFT wird im Dark Mode hell -- bewusst NICHT --color-primary
     (#2E5A8A). Das ist die Flaechenfarbe fuer Knoepfe; als Schrift auf dem
     dunklen Hintergrund erreicht sie nur 2,3:1 und reisst WCAG AA (Befund
     25.07.2026: Technik-Chips, Navigations- und Fliesstext-Links waren kaum
     lesbar). Derselbe Wert wie --color-info. */
  --color-text-link:     #8FC0EC;
  --color-border:        #2A3746;
  --color-primary:       #2E5A8A;
  --color-primary-hover: #3D6EA3;
  --color-secondary:     #6BA368;
  --color-info:          #8FC0EC;
  --color-warning-text:  #E0A422;

  --color-primary-soft:   rgba(143, 192, 236, 0.14);
  --color-secondary-soft: rgba(107, 163, 104, 0.18);
  --color-success-soft:   rgba(107, 163, 104, 0.20);
  --color-warning-soft:   rgba(224, 164, 34, 0.22);
  --color-danger-soft:    rgba(192, 57, 43, 0.24);
  --color-info-soft:      rgba(143, 192, 236, 0.16);
  --color-outline-hover:  rgba(143, 192, 236, 0.12);
  --color-overlay-scrim:  rgba(0, 0, 0, 0.60);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.40);
  --shadow-md: 0 4px 14px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 14px 36px rgba(0, 0, 0, 0.55);

  /* BPMN-/Domain-Variablen (nicht Teil der Farb-Bridge, Scope-Grenze) --
     Dark-Werte aus dem bisherigen @media(prefers-color-scheme)-Block uebernommen. */
  --lane-a: #1a2028;
  --lane-b: #202834;
  --start: #1e3327;
  --start-border: #3f9e63;
  --ende: #3a2222;
  --gateway: #3a3120;
  --gateway-border: #c79a3a;
  --task: #232b36;
  --task-border: #3a4453;
  --kat-fuehrung: #a986e6;
  --kat-kern: #6bcf8e;
  --kat-support: #e0a54a;
  --kat-none: #4a5563;
  --suggest: #e0a54a;
}

* { box-sizing: border-box; }
/* Robust: das hidden-Attribut soll IMMER verstecken, auch wenn eine Klassenregel
   ein eigenes display (grid/flex) setzt (sonst blieben z.B. Landkarte-Kacheln sichtbar). */
[hidden] { display: none !important; }

body {
  margin: 0;
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--text);
  line-height: 1.45;
}

header.app {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  padding: 0.9rem 1.4rem;
  display: flex;
  align-items: baseline;
  gap: 1rem;
  flex-wrap: wrap;
}
/* header.app: align-items: baseline -- ohne Zentrierung haengt das Logo schief.
   Markenregel (designSystem/design-system.rules.md): Icon auf farbigem Grund IMMER auf
   heller/weisser Kachel -- fest weiss statt var(--color-background), sonst verschwindet die
   Kachel im Dark Mode (dort ist --color-background selbst dunkel). box-sizing:border-box (siehe
   oben) haelt die sichtbare Icon-Groesse bei 24px (28px Box - 2x2px Padding = Mindestgroesse). */
.app-logo {
  display: block;
  background: var(--color-neutral-0);
  border-radius: var(--radius-md);
  padding: 2px;
}
header.app h1 { font-size: 1.15rem; margin: 0; }
header.app h1 a { display: inline-flex; align-items: center; gap: 0.5rem; }
header.app a { color: var(--accent-text); text-decoration: none; }
header.app nav { margin-left: auto; display: flex; align-items: center; gap: 1rem; font-size: 0.92rem; }

/* ---- Marken-Schriftzug im Header (Nachtrag Navigations-Redesign) ----
   Einheitlicher Wordmark statt seitenabhaengigem Text ("WissensDB" auf web,
   "Prozess-Landschaftskarte" auf prozesse) -- beide Zeichenketten fielen weg,
   siehe designSystem/Logo_wordmark.svg als Referenz-Asset. Wie beim Icon
   (.app-logo) liegt der Schriftzug auf einer IMMER weissen Kachel
   (--color-neutral-0, in .dark nicht ueberschrieben) -- deshalb duerfen hier
   die fixen Markenfarben (--color-brand-blue/--color-brand-green, ebenfalls
   in .dark unveraendert) verwendet werden statt der Dark-Mode-Varianten
   --color-primary/--color-secondary: der weisse Untergrund garantiert in
   beiden Themes denselben Kontrast wie im Referenz-Logo. */
.app-wordmark-tile {
  display: inline-flex;
  align-items: center;
  background: var(--color-neutral-0);
  border-radius: var(--radius-md);
  padding: 3px 8px;
}
.app-wordmark { display: block; }
.app-wordmark .wm-a { fill: var(--color-brand-blue); }
.app-wordmark .wm-b { fill: var(--color-brand-green); }
.app-wordmark text { font-family: var(--font-sans); }

/* ---- Dark-Mode-Umschalter (theme.js, Schritt 5) ---- */
.theme-toggle {
  align-self: center; /* header.app richtet mit align-items: baseline aus -- sonst haengt der Button schief */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  transition: background var(--motion-fast) var(--ease-standard), border-color var(--motion-fast) var(--ease-standard);
}
.theme-toggle:hover { background: var(--accent-soft); border-color: var(--accent); }
.theme-toggle:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.theme-toggle svg { width: 20px; height: 20px; }
.theme-toggle .icon-sun { display: none; }
.dark .theme-toggle .icon-sun { display: block; }
.dark .theme-toggle .icon-moon { display: none; }

main { padding: 1.4rem; max-width: 1200px; margin: 0 auto; }

a { color: var(--accent-text); }

/* Fuss mit Pflichtseiten-Links (WP-13): identisch in web/ genutzt (dort ueber
   die Build-Stage byte-identisch aus dieser Datei uebernommen) -- eine
   gemeinsame Definition statt zweier driftender Kopien. */
.app-footer {
  border-top: 1px solid var(--border);
  margin-top: 2rem;
  padding: 1rem 1.4rem;
}
.footer-nav {
  display: flex;
  gap: 1rem;
  font-size: 0.82rem;
  margin-bottom: 0.4rem;
}
.footer-nav a { color: var(--muted); text-decoration: none; }
.footer-nav a:hover, .footer-nav a:focus-visible { color: var(--accent-text); text-decoration: underline; }

/* ---- NAVIGATION: Breadcrumb + Dropdown ---- */
/* ---- Breadcrumb (Schritt 7) ---- */
.breadcrumb {
  display: flex; align-items: center; gap: var(--space-2);
  font-size: var(--font-size-sm); color: var(--muted);
  flex-wrap: wrap; margin: 0 0 0.9rem;
}
.breadcrumb a { color: var(--muted); text-decoration: none; }
.breadcrumb a:hover, .breadcrumb a:focus-visible { color: var(--accent-text); text-decoration: underline; }
.breadcrumb__current { color: var(--text); font-weight: 600; }

/* ---- "Landkarte"-Dropdown (Disclosure-Pattern, kein role="menu", siehe Plan-Kontext) ---- */
.nav-dropdown { position: relative; }
.nav-dropdown__trigger {
  display: inline-flex; align-items: center; gap: 0.3rem;
  font: inherit; font-size: 0.92rem; color: var(--accent-text);
  background: none; border: none; padding: 0; cursor: pointer;
}
.nav-dropdown__trigger:hover { text-decoration: underline; }
.nav-dropdown__trigger:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-sm); }
.nav-dropdown__caret { width: 14px; height: 14px; transition: transform var(--motion-fast) var(--ease-standard); }
.nav-dropdown__trigger[aria-expanded="true"] .nav-dropdown__caret { transform: rotate(180deg); }
.nav-dropdown__menu {
  position: absolute; top: calc(100% + 8px); left: 0; z-index: 20;
  display: flex; flex-direction: column; min-width: 180px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-md); box-shadow: var(--shadow-md); padding: 0.3rem;
}
.nav-dropdown__menu a {
  display: block; padding: 0.5rem 0.7rem; border-radius: var(--radius-sm);
  color: var(--text); text-decoration: none; font-size: 0.92rem; white-space: nowrap;
}
.nav-dropdown__menu a:hover, .nav-dropdown__menu a:focus-visible { background: var(--accent-soft); color: var(--accent-text); outline: none; }
.nav-dropdown__menu a[aria-current="page"] { font-weight: 600; }
/* "Du bist hier" bei GESCHLOSSENEM Menue (WP-13a): nav.js setzt .is-aktiv am
   Knopf, sobald ein Menuelink aria-current traegt. Ohne das saehe "Landkarte"
   auf /map, /map/graph und /editor aus wie auf jeder anderen Seite. */
.nav-dropdown__trigger.is-aktiv { font-weight: 600; }
/* Gleiche Aussage fuer die obere Zeile -- war bisher gesetzt, aber unsichtbar. */
header.app nav a[aria-current="page"] { font-weight: 600; }

.muted { color: var(--muted); }
.small { font-size: 0.85rem; }

/* Sichtbar nur für Screenreader (verschoben aus web/static/web.css, Nachtrag
   Navigations-Redesign -- jetzt auch fuer den Wordmark-Header auf prozesse
   gebraucht, gehoert deshalb in die geteilte Datei statt in eine Kopie). */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---- Suche ---- */
.searchbar { display: flex; gap: 0.6rem; margin-bottom: 1.2rem; }
.searchbar input[type="search"] {
  flex: 1;
  padding: 0.65rem 0.8rem;
  font-size: 1rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
}
.searchbar button, .btn {
  padding: 0.65rem 1.1rem;
  font-size: 0.95rem;
  border: 1px solid var(--accent);
  background: var(--accent);
  color: #fff;
  border-radius: 8px;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
}
.btn.secondary { background: transparent; color: var(--accent-text); }

/* Suchmodus-Banner (WP-10): sichtbarer Hinweis statt stiller Degradation auf
   Volltext (Guthaben leer/Embedding-Fehler) bzw. Tageslimit erschöpft. */
.search-banner {
  border: 1px solid var(--warn);
  background: color-mix(in srgb, var(--warn) 12%, var(--surface));
  color: var(--warn);
  border-radius: 8px;
  padding: 0.6rem 0.9rem;
  margin-bottom: 0.8rem;
  font-size: 0.9rem;
}

ul.results { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.6rem; }
li.result {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.7rem 0.9rem;
  display: flex;
  align-items: center;
  gap: 0.8rem;
}
li.result .titel { font-weight: 600; }
li.result .meta { color: var(--muted); font-size: 0.85rem; }
li.result .spacer { margin-left: auto; }

.badge {
  font-size: 0.72rem;
  padding: 0.12rem 0.5rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  white-space: nowrap;
}
.badge.open { background: var(--ok-soft); color: var(--ok); border-color: var(--ok); }
.badge.graph { background: var(--accent-soft); color: var(--accent-text); border-color: var(--accent); }
.badge.match { background: transparent; color: var(--muted); }
.badge.id { background: transparent; color: var(--muted); border-color: var(--border); font-family: "Cascadia Code", Consolas, monospace; }
/* Als Link genutzte Badges klar als klickbar kennzeichnen (Suche: „In der Landkarte" / „Im Graph"). */
a.badge { text-decoration: none; cursor: pointer; }
a.badge:hover, a.badge:focus-visible { outline: none; }
a.badge.open:hover, a.badge.open:focus-visible { background: var(--ok); color: #fff; }
a.badge.graph:hover, a.badge.graph:focus-visible { background: var(--accent); color: #fff; }

/* ---- Matrix (Ansicht C) ---- */
.tablewrap { overflow-x: auto; border: 1px solid var(--border); border-radius: 8px; }
table.matrix { border-collapse: collapse; font-size: 0.86rem; background: var(--surface); }
table.matrix th, table.matrix td {
  border: 1px solid var(--border);
  padding: 0.35rem 0.5rem;
  text-align: center;
  white-space: nowrap;
}
table.matrix th.row-head, table.matrix td.row-head {
  text-align: left;
  position: sticky;
  left: 0;
  background: var(--surface);
  z-index: 1;
  max-width: 320px;
  white-space: normal;
}
table.matrix thead th {
  position: sticky;
  top: 0;
  background: var(--surface);
  vertical-align: bottom;
}
table.matrix th.col-system { height: 150px; }
table.matrix th.col-system > .col-link {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  white-space: nowrap;
  display: inline-block;
  color: var(--text);
  text-decoration: none;
}
table.matrix th.col-system > .col-link:hover,
table.matrix th.col-system > .col-link:focus {
  color: var(--accent-text);
  text-decoration: underline;
  outline: none;
}
table.matrix td.hit { font-weight: 700; color: var(--accent-text); }
table.matrix caption { text-align: left; padding: 0.5rem; color: var(--muted); }

/* ---- Umschalter (Toggle Systeme|Schnittstellen|Mitarbeiter, Ansicht C) ---- */
.toggle { display: inline-flex; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; margin: 0 0 0.9rem; }
.toggle-btn {
  border: none; border-left: 1px solid var(--border);
  background: var(--surface); color: var(--text);
  padding: 0.5rem 0.95rem; font-size: 0.88rem; cursor: pointer;
}
.toggle-btn:first-child { border-left: none; }
.toggle-btn.active { background: var(--accent); color: #fff; }
.toggle-btn:hover:not(.active) { background: var(--accent-soft); }

/* ---- Lane-Drilldown (Ansicht C → Spaltenkopf-Klick, Schritt 11) ---- */
.lane-stack { display: grid; gap: 1rem; }
.lane-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
  padding: 0.8rem 1rem;
}
.lane-card.clickable { cursor: pointer; }
.lane-card.clickable:hover, .lane-card.clickable:focus {
  border-color: var(--accent); outline: none; box-shadow: 0 0 0 2px var(--accent-soft);
}
.lane-card-head { display: flex; align-items: baseline; gap: 0.6rem; margin-bottom: 0.5rem; flex-wrap: wrap; }
.lane-card-titel { font-weight: 600; font-size: 0.95rem; }
a.lane-card-titel { color: var(--accent-text); text-decoration: none; }
a.lane-card-titel:hover, a.lane-card-titel:focus-visible { text-decoration: underline; outline: none; }
.lane-diagramwrap { margin-top: 0.4rem; max-height: 55vh; }
svg.lane-flow { display: block; }

.uebergabe-head { margin-top: 0.6rem; }
.uebergabe-list { list-style: none; padding: 0; margin: 0.3rem 0 0; display: grid; gap: 0.3rem; }
.uebergabe-stub {
  font-size: 0.82rem; color: var(--muted);
  background: var(--accent-soft); border-radius: 6px; padding: 0.3rem 0.55rem;
  display: flex; gap: 0.4rem; align-items: baseline;
}
.uebergabe-stub .stub-arrow { color: var(--accent-text); font-weight: 700; }

/* ---- Detailablauf (Ansicht D) ---- */
.flowmeta { margin-bottom: 1rem; display: flex; gap: 1rem; flex-wrap: wrap; align-items: center; }
.flowmeta .quelle { font-size: 0.82rem; color: var(--muted); }

/* Herkunft eines KI-Entwurfs (WP-Z9, Paket 3 — Art. 50 Abs. 2 EU-KI-VO).
   Nur sichtbar, wenn der Prozess wirklich aus dem Generator kam. Linker Balken
   statt Flaeche, dieselbe Sprache wie .ki-hinweis im web-Service: Es ist eine
   Tatsache ueber den Eintrag, keine Warnung. */
.ki-herkunft {
  margin: -0.5rem 0 1rem;
  padding: 0.5rem 0.8rem;
  border-left: 4px solid var(--accent);
  font-size: 0.9rem;
  color: var(--text);
}
.diagramwrap { overflow: auto; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); }
svg.flow { display: block; }
svg.flow .lane-band-a { fill: var(--lane-a); }
svg.flow .lane-band-b { fill: var(--lane-b); }
svg.flow .lane-label { fill: var(--muted); font-size: 12px; font-weight: 600; }
svg.flow .lane-sep { stroke: var(--border); stroke-width: 1; }
svg.flow .edge { stroke: var(--edge); stroke-width: 1.6; fill: none; }
svg.flow .edge.back { stroke-dasharray: 5 4; opacity: 0.85; }
svg.flow .arrow-head { fill: var(--edge); }
svg.flow .edge-label { fill: var(--muted); font-size: 11px; }
svg.flow .edge-label-bg { fill: var(--surface); opacity: 0.85; }
svg.flow .node-task rect { fill: var(--task); stroke: var(--task-border); stroke-width: 1.5; }
svg.flow .node-start rect { fill: var(--start); stroke: var(--start-border); stroke-width: 1.6; }
svg.flow .node-ende rect { fill: var(--ende); stroke: var(--ende-border); stroke-width: 1.6; }
svg.flow .gateway { fill: var(--gateway); stroke: var(--gateway-border); stroke-width: 1.6; }
svg.flow .node-label { fill: var(--text); font-size: 12px; }
svg.flow .gateway-label { fill: var(--text); font-size: 11px; font-style: italic; }

.steplist { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.5rem; }
.steplist li {
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: 6px;
  padding: 0.55rem 0.8rem;
}
.steplist .step-role { color: var(--muted); font-size: 0.82rem; }

.chips { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.chip {
  font-size: 0.8rem;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent-text);
  border: 1px solid var(--border);
}

.notice { color: var(--muted); padding: 1rem; }
.error { color: var(--ende-border); padding: 1rem; }

/* ---- Markdown-Dokumentation (Ansicht D, Volltext) ---- */
.md { line-height: 1.55; max-width: 900px; }
.md .md-h { margin: 1.2rem 0 0.5rem; line-height: 1.3; }
.md p { margin: 0.5rem 0; }
.md .md-list { margin: 0.4rem 0; padding-left: 1.5rem; }
.md .md-list li { margin: 0.15rem 0; }
.md blockquote {
  margin: 0.7rem 0; padding: 0.35rem 0.85rem;
  border-left: 3px solid var(--accent); background: var(--accent-soft); color: var(--muted);
}
.md hr { border: none; border-top: 1px solid var(--border); margin: 1.1rem 0; }
.md code {
  font-family: "Cascadia Code", Consolas, "Courier New", monospace; font-size: 0.85em;
  background: var(--accent-soft); padding: 0.05rem 0.3rem; border-radius: 4px;
}
.md pre {
  background: var(--surface); border: 1px solid var(--border); border-radius: 6px;
  padding: 0.6rem 0.8rem; overflow-x: auto;
}
.md pre code { background: none; padding: 0; }
.md .md-tablewrap { overflow-x: auto; margin: 0.7rem 0; }
.md table.md-table { border-collapse: collapse; font-size: 0.88rem; background: var(--surface); }
.md table.md-table th, .md table.md-table td {
  border: 1px solid var(--border); padding: 0.35rem 0.55rem; text-align: left; vertical-align: top;
}
.md table.md-table thead th { background: var(--accent-soft); }
.md a { color: var(--accent-text); }

h2.section { font-size: 1rem; margin: 1.4rem 0 0.5rem; }

code {
  font-family: "Cascadia Code", Consolas, "Courier New", monospace;
  font-size: 0.85em;
  background: var(--accent-soft);
  padding: 0.05rem 0.3rem;
  border-radius: 4px;
}

/* ---- Übergaben (Ansicht B) ---- */
.legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.1rem;
  margin: 0.6rem 0 1rem;
  font-size: 0.82rem;
  color: var(--muted);
}
.legend-item { display: inline-flex; align-items: center; gap: 0.4rem; }
.legend-line { width: 26px; height: 0; border-top: 2px solid var(--edge); }
.legend-line.vorschlag { border-top: 2px dashed var(--suggest); }
.legend-swatch { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.legend-swatch.kat-kern { background: var(--kat-kern); }
.legend-swatch.kat-fuehrung { background: var(--kat-fuehrung); }
.legend-swatch.kat-support { background: var(--kat-support); }

svg.handoff { display: block; }
svg.handoff .ho-edge { fill: none; stroke-width: 1.6; }
svg.handoff .ho-edge.bestaetigt { stroke: var(--edge); }
svg.handoff .ho-edge.vorschlag { stroke: var(--suggest); stroke-dasharray: 6 4; opacity: 0.85; }
svg.handoff .arrow-head.bestaetigt { fill: var(--edge); }
svg.handoff .arrow-head.vorschlag { fill: var(--suggest); }

.ho-node {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 5px solid var(--kat-none);
  border-radius: 7px;
  padding: 0.35rem 0.6rem;
  cursor: pointer;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.1rem;
}
.ho-node:hover, .ho-node:focus {
  border-color: var(--accent);
  outline: none;
  box-shadow: 0 0 0 2px var(--accent-soft);
}
.ho-node.kat-fuehrung { border-left-color: var(--kat-fuehrung); }
.ho-node.kat-kern { border-left-color: var(--kat-kern); }
.ho-node.kat-support { border-left-color: var(--kat-support); }
.ho-node-titel {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ho-node-sub { font-size: 0.68rem; color: var(--muted); }

/* ---- Landkarte (Ansicht A) ---- */
.lk-toolbar { display: flex; gap: 0.8rem; align-items: center; flex-wrap: wrap; margin: 0.4rem 0 0.6rem; }
.lk-search {
  flex: 1; min-width: 240px;
  padding: 0.55rem 0.7rem; font-size: 0.95rem;
  border: 1px solid var(--border); border-radius: 8px;
  background: var(--surface); color: var(--text);
}
.lk-zoom { display: inline-flex; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.lk-zoom button {
  border: none; border-left: 1px solid var(--border);
  background: var(--surface); color: var(--text);
  padding: 0.5rem 0.85rem; font-size: 0.85rem; cursor: pointer;
}
.lk-zoom button:first-child { border-left: none; }
.lk-zoom button.active { background: var(--accent); color: #fff; }

.lk-stage { position: relative; }
.lk-diagramwrap { max-height: 74vh; }

/* Fokus-Leiste (aktiver Bereich nach Klick auf eine Bereichs-Kachel) */
.lk-focusbar {
  display: flex; align-items: center; gap: 0.6rem;
  margin: 0 0 0.6rem; padding: 0.4rem 0.7rem;
  background: var(--accent-soft); border: 1px solid var(--accent);
  border-radius: 8px; font-size: 0.85rem;
}
.lk-focus-clear {
  margin-left: auto; border: 1px solid var(--accent); background: transparent;
  color: var(--accent-text); border-radius: 6px; padding: 0.25rem 0.6rem;
  font-size: 0.8rem; cursor: pointer;
}
.lk-focus-clear:hover { background: var(--accent); color: #fff; }

/* Zoomstufe „Bereiche" */
.lk-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 0.7rem; }
.lk-bereich-tile {
  text-align: left; cursor: pointer;
  background: var(--surface); color: var(--text);
  border: 1px solid var(--border); border-radius: 10px;
  padding: 0.8rem 0.9rem; display: flex; flex-direction: column; gap: 0.35rem;
}
.lk-bereich-tile:hover, .lk-bereich-tile:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 2px var(--accent-soft); }
.lk-bereich-titel { font-weight: 600; font-size: 0.95rem; }
.lk-bereich-count { color: var(--muted); font-size: 0.8rem; }
.lk-bereich-kats { display: flex; gap: 0.3rem; }
.lk-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; background: var(--kat-none); }
.lk-dot.kat-fuehrung { background: var(--kat-fuehrung); }
.lk-dot.kat-kern { background: var(--kat-kern); }
.lk-dot.kat-support { background: var(--kat-support); }
.lk-dot.kat-none { background: var(--kat-none); }

/* SVG-Landkarte (Stufen „Prozesse"/„+ Schritte") */
svg.landscape { display: block; }
svg.landscape .lk-band { fill-opacity: 0.10; }
svg.landscape .lk-band.kat-fuehrung { fill: var(--kat-fuehrung); }
svg.landscape .lk-band.kat-kern { fill: var(--kat-kern); }
svg.landscape .lk-band.kat-support { fill: var(--kat-support); }
svg.landscape .lk-band.kat-none { fill: var(--muted); fill-opacity: 0.06; }
svg.landscape .lk-band-sep { stroke: var(--border); stroke-width: 1; }
svg.landscape .lk-band-label { fill: var(--muted); font-size: 13px; font-weight: 700; }
svg.landscape .lk-edge { fill: none; stroke: var(--edge); stroke-width: 1.6; }
svg.landscape .arrow-head { fill: var(--edge); }

.lk-card {
  box-sizing: border-box; width: 100%; height: 100%;
  background: var(--surface); border: 1px solid var(--border);
  border-left: 5px solid var(--kat-none); border-radius: 8px;
  padding: 0.4rem 0.55rem; cursor: pointer; overflow: hidden;
  display: flex; flex-direction: column; gap: 0.15rem;
}
.lk-card:hover, .lk-card:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 2px var(--accent-soft); }
.lk-card.kat-fuehrung { border-left-color: var(--kat-fuehrung); }
.lk-card.kat-kern { border-left-color: var(--kat-kern); }
.lk-card.kat-support { border-left-color: var(--kat-support); }
.lk-card.kat-none { border-left-color: var(--kat-none); }
.lk-card.lk-dim { opacity: 0.3; }
.lk-card.lk-hit { box-shadow: 0 0 0 2px var(--ok); }
.lk-card.lk-focus { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent); }
.lk-card-head { display: flex; align-items: flex-start; gap: 0.3rem; }
.lk-card-titel {
  flex: 1; font-size: 0.8rem; font-weight: 600; color: var(--text);
  overflow: hidden; text-overflow: ellipsis;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.lk-card-info {
  border: none; background: transparent; color: var(--muted);
  cursor: pointer; font-size: 0.85rem; line-height: 1; padding: 0 0.1rem;
}
.lk-card-info:hover, .lk-card-info:focus { color: var(--accent-text); outline: none; }
.lk-card-sub { font-size: 0.66rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lk-card-steps { margin: 0.15rem 0 0; padding-left: 1.1rem; font-size: 0.66rem; color: var(--muted); }
.lk-card-steps li { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lk-card-nosteps { font-size: 0.66rem; color: var(--muted); font-style: italic; }

/* Seitenpanel „verwandtes Wissen" */
.lk-drawer {
  position: fixed; top: 0; right: 0; z-index: 20;
  width: 340px; max-width: 92vw; height: 100vh;
  background: var(--surface); border-left: 1px solid var(--border);
  box-shadow: -6px 0 24px rgba(0,0,0,0.18);
  padding: 1rem 1.1rem; overflow-y: auto;
}
.lk-drawer-backdrop { position: fixed; inset: 0; z-index: 19; background: rgba(0,0,0,0.28); }
.lk-drawer-head { display: flex; align-items: baseline; gap: 0.6rem; margin-bottom: 0.6rem; }
.lk-drawer-head strong { font-size: 1rem; flex: 1; }
.lk-drawer-close {
  border: none; background: transparent; color: var(--muted);
  font-size: 1.4rem; line-height: 1; cursor: pointer; padding: 0 0.2rem;
}
.lk-drawer-close:hover { color: var(--text); }
.lk-drawer-actions { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 0.9rem; }
.lk-drawer-actions .btn { font-size: 0.82rem; padding: 0.45rem 0.7rem; }
.lk-drawer-sub { font-size: 0.9rem; margin: 0.4rem 0 0.5rem; }
.lk-related { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.5rem; }
.lk-related li { border: 1px solid var(--border); border-radius: 7px; padding: 0.45rem 0.6rem; background: var(--bg); }
.lk-related-titel { font-weight: 600; font-size: 0.85rem; }
.lk-related-meta { color: var(--muted); font-size: 0.75rem; margin-top: 0.15rem; }

/* ---- Graph-Ansicht (Schritt 10) ---- */
.graph-main { max-width: 1400px; }
.graph-controls { display: flex; gap: 0.7rem; align-items: center; flex-wrap: wrap; margin: 0.4rem 0 0.5rem; }
.graph-search {
  min-width: 200px;
  padding: 0.5rem 0.7rem; font-size: 0.9rem;
  border: 1px solid var(--border); border-radius: 8px;
  background: var(--surface); color: var(--text);
}
.graph-slider { display: inline-flex; align-items: center; gap: 0.45rem; font-size: 0.85rem; color: var(--muted); }
.graph-slider strong { color: var(--text); font-variant-numeric: tabular-nums; min-width: 2.5em; text-align: right; }
.graph-slider input[type="range"] { accent-color: var(--accent-text); width: 130px; }
.graph-zoom { display: inline-flex; gap: 0.3rem; margin-left: auto; }
.graph-zoom button {
  width: 2.1rem; height: 2.1rem; border: 1px solid var(--border);
  background: var(--surface); color: var(--text);
  border-radius: 7px; cursor: pointer; font-size: 1rem; line-height: 1;
}
.graph-zoom button:hover { background: var(--accent-soft); border-color: var(--accent); }
.graph-hint { margin: 0 0 0.5rem; }
.graph-stage {
  position: relative; border: 1px solid var(--border); border-radius: 10px;
  overflow: hidden; background: var(--surface);
  height: calc(100vh - 230px); min-height: 420px;
}
.graph-canvas { width: 100%; height: 100%; }
.graph-legend {
  position: absolute; bottom: 10px; left: 10px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 8px;
  padding: 0.45rem 0.7rem; font-size: 0.78rem; color: var(--muted);
  display: flex; flex-wrap: wrap; gap: 0.25rem 0.9rem; max-width: calc(100% - 20px);
  opacity: 0.94;
}
.graph-legend .legend-item { display: inline-flex; align-items: center; gap: 0.35rem; }
.graph-legend .dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.graph-legend .arrow { color: var(--edge); font-weight: 700; }

/* ---- Aktualitäts-Check (WP-Z1) ---- */
.ak-kennzahlen { margin: 0.9rem 0 0.8rem; display: grid; gap: 0.5rem; }
.ak-satz { margin: 0; font-size: 0.95rem; }
.ak-satz strong { font-size: 1.25rem; font-variant-numeric: tabular-nums; }
.ak-zaehler { display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; }
.ak-zaehler-item { display: inline-flex; align-items: baseline; gap: 0.35rem; }

table.aktualitaet { border-collapse: collapse; font-size: 0.88rem; background: var(--surface); width: 100%; }
table.aktualitaet th, table.aktualitaet td {
  border-bottom: 1px solid var(--border);
  padding: 0.5rem 0.7rem;
  text-align: left;
  vertical-align: top;
}
table.aktualitaet thead th {
  position: sticky; top: 0; background: var(--surface);
  font-size: 0.8rem; color: var(--muted); font-weight: 600; white-space: nowrap;
}
table.aktualitaet tbody tr:last-child th, table.aktualitaet tbody tr:last-child td { border-bottom: none; }
table.aktualitaet td.ak-titel a { color: var(--accent-text); font-weight: 600; text-decoration: none; }
table.aktualitaet td.ak-titel a:hover, table.aktualitaet td.ak-titel a:focus-visible { text-decoration: underline; }
/* Zahlen-/Datumsspalten in der Monospace-Schrift: gleiche Ziffernbreite, damit
   Alter und Datum untereinander vergleichbar bleiben (Design-System: JetBrains
   Mono fuer Zahlen-Tabellen). */
table.aktualitaet td.ak-datum, table.aktualitaet td.ak-alter {
  font-family: var(--font-mono); font-size: 0.82rem; white-space: nowrap;
}

/* Dringlichkeitsstufen. Die Beschriftung ("fällig"/"überfällig"/"kritisch")
   traegt die Aussage selbst -- Farbe ist Zugabe, nie der einzige Traeger
   (WCAG 1.4.1). Schriftfarbe bleibt --text (AAA in beiden Themes); nur die
   Stufe "kritisch" nutzt die volle Danger-Flaeche mit weisser Schrift
   (5,1:1 = AA), analog .toggle-btn.active. */
.badge.stufe-faellig      { background: var(--color-warning-soft); color: var(--text); border-color: var(--color-warning); }
.badge.stufe-ueberfaellig { background: var(--color-danger-soft);  color: var(--text); border-color: var(--color-danger); }
.badge.stufe-kritisch     { background: var(--color-danger);       color: #fff;        border-color: var(--color-danger); font-weight: 600; }