/* Kompass: ausschließlich von rahmen.html geladen.
   Quelle: marke/plattform-entwurf/codex/kompass-final/style.css und kompass.css.
   Die Schriftskala gilt nur im Plattform-Rahmen; token.css bleibt unverändert.
   Farben kommen ausschließlich aus den vorhandenen Hell-/Dunkel-Token. */
@font-face { font-family: Manrope; src: url("/design/Manrope-Regular-400.ttf") format("truetype"); font-weight: 400 600; font-display: swap; }
@font-face { font-family: Manrope; src: url("/design/Manrope-Bold-700.ttf") format("truetype"); font-weight: 700; font-display: swap; }

@font-face { font-family: "Alegreya Sans"; src: url("/design/AlegreyaSans-Light-300.ttf") format("truetype"); font-weight: 300; font-display: swap; }

.kompass {
  --t1: .75rem; --t2: .8125rem; --t3: .875rem; --t4: .9375rem;
  --t5: 1.125rem; --t6: 1.375rem; --t7: 2.75rem;
  --kompass-laufweite: -.035em;
  --kompass-bedienhoehe: 44px;
  --kompass-logo-breite: 164px; --kompass-logo-hoehe: 48px;
  --kompass-balken: 10px; --kompass-punkt: 10px; --kompass-luecke: 2px;
  font-variant-numeric: tabular-nums;
}
.kompass *, .kompass *::before, .kompass *::after { box-sizing: border-box; }
.kompass [hidden] { display: none !important; }
.kompass a { color: var(--blau); text-underline-offset: var(--a1); }
.kompass a:hover { color: var(--akzent-tief); }
.kompass :focus-visible { outline: 3px solid var(--blau); outline-offset: var(--a1); }
:where(.kompass) h1, :where(.kompass) h2, :where(.kompass) h3, :where(.kompass) p { margin-top: 0; }
:where(.kompass) h1 { font-size: var(--t7); line-height: var(--zh-eng); letter-spacing: var(--kompass-laufweite); font-weight: var(--fett); margin-bottom: var(--a3); }
:where(.kompass) h2 { font-size: var(--t6); line-height: var(--zh-eng); font-weight: var(--fett); margin-bottom: var(--a4); }
:where(.kompass) h3 { font-size: var(--t5); margin-bottom: var(--a2); }
:where(.kompass) p { margin-bottom: var(--a4); }
:where(.kompass) small { font-size: var(--t2); color: var(--text-leise); }
.kompass-sprung { position: fixed; top: var(--a2); left: var(--a2); z-index: 100; transform: translateY(-200%); padding: var(--a3); background: var(--flaeche); }
.kompass-sprung:focus { transform: none; }

/* Maße der Entwurfsseiten, die token.css nicht kennt - nur Größen, keine Farbe.
   Farben und Abstände zeigen direkt auf Plattform-Token (Übertragung, Abschnitt 1). */
.kompass {
  --k-zero: 0; --k-full: 100%; --k-border: 1px; --k-normal: 400;
  --k-s8: 64px; --k-s10: 96px; --k-display: 4rem; --k-number: 5rem;
  --k-editorial: "Alegreya Sans", var(--schrift); --k-title-weight: 300;
  --k-label-tracking: .09em; --k-copy-max: 68ch; --k-icon-size: 20px;
  --k-field-min: 180px; --k-field-wide: 220px; --k-aside-min: 250px; --k-aside-wide: 320px; --k-dialog-width: 640px; --k-cell-min: 200px;
  --k-detail-column-min: 280px; --k-mobile-field-min: 130px; --k-mobile-label-width: 112px;
  --k-table-pad: 16px; --k-table-width: 1080px; --k-table-height: 640px;
  --k-work-id: 116px; --k-work-context: 30%; --k-work-step: 23%; --k-work-owner: 176px; --k-work-date: 188px;
  --k-urgent-date: 132px; --k-viz-saeulen: 72px;
  /* Spur hinter Balken und Punkt "ohne Termin": eigene Rollen aus vorhandenen Token.
     12.10.2026: Spur von --flaeche-leise auf --spur - im Dunkeln verschwand die
     leere Bahn (1,23:1), siehe token.css. */
  --k-viz-spur: var(--spur); --k-ampel-offen: var(--grau); --k-viz-spark: 34px;
}
/* Dichte "kompakt" aus der Kopfzeile: nur der Zeilenabstand der Tabellen. */
html[data-dichte="kompakt"] .kompass { --k-table-pad: 8px; }
html[data-dichte="kompakt"] .kompass .tabelle td, html[data-dichte="kompakt"] .kompass .tabelle th { padding-block: var(--a2); }

/* Seitenleiste und Kopfzeile: Maße und Gruppen aus dem Entwurf. */
.kompass .gestell { min-height: 100vh; }
.kompass .gestell-rumpf { margin-left: var(--leiste-breite); min-width: 0; }
.kompass .seitenleiste { position: fixed; inset: 0 auto 0 0; width: var(--leiste-breite); z-index: 60; overflow: auto; display: flex; flex-direction: column; padding: var(--a5) var(--a4); background: var(--marke-tief); color: var(--auf-marke); }
.kompass .leiste-marke { display: block; padding: var(--a2); margin-bottom: var(--a7); color: var(--auf-marke); text-decoration: none; }
.kompass .marke-logo { width: var(--kompass-logo-breite); height: var(--kompass-logo-hoehe); max-width: 100%; object-fit: contain; display: block; }
.kompass .leiste-name { display: block; margin: 0; padding: var(--a3); font-size: var(--t1); font-weight: var(--fett); text-transform: uppercase; letter-spacing: .09em; color: var(--marke-leise); }
.kompass .leiste-name a { color: inherit; text-decoration: none; }
.kompass .seitenleiste nav { display: grid; gap: var(--a1); }
.kompass .leiste-gruppe { margin: var(--a4) 0 var(--a1); padding: 0 var(--a3); font-size: var(--t1); font-weight: var(--fett); letter-spacing: .09em; text-transform: uppercase; color: var(--marke-leise); }
.kompass .leiste-gruppe:first-child { margin-top: var(--a2); }
.kompass .leiste-app { display: flex; align-items: center; min-height: var(--kompass-bedienhoehe); padding: var(--a3); border-radius: var(--r1); text-decoration: none; color: var(--marke-leise); font-size: var(--t2); font-weight: 400; }
.kompass .leiste-app svg, .kompass .leiste-app .zeichen-buchstabe { display: none; }
.kompass .leiste-app.hier, .kompass .leiste-app:hover { background: var(--marke); color: var(--auf-marke); }
.kompass .seitenleiste a:focus-visible { outline-color: var(--auf-marke); }
.kompass .leiste-fuss { margin-top: auto; padding-top: var(--a6); font-size: var(--t1); color: var(--marke-leise); }
.kompass .leiste-fuss a { color: inherit; }
.kompass .oben { display: flex; align-items: center; justify-content: space-between; gap: var(--a4); padding: var(--a4) var(--a6); border-bottom: 1px solid var(--linie); background: var(--papier); }
.kompass .oben-pfad { min-width: 0; max-width: 68ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--t1); color: var(--text-leise); }
.kompass .oben-werkzeuge { display: flex; align-items: center; flex-wrap: wrap; gap: var(--a2); flex-shrink: 0; }
.kompass .oben button, .kompass .ansichten-schliessen { font: inherit; font-size: var(--t2); font-weight: var(--fett); min-height: var(--kompass-bedienhoehe); padding: var(--a2) var(--a4); border: 1px solid var(--linie); border-radius: var(--r1); background: var(--flaeche); color: var(--text); cursor: pointer; }
.kompass .oben button:hover, .kompass .ansichten-schliessen:hover { background: var(--flaeche-leise); border-color: var(--blau); }
.kompass .menue-knopf { display: none; }
.kompass .oben button { display: inline-flex; align-items: center; justify-content: center; gap: var(--a2); }
.kompass .oben .menue-knopf { display: none; }
.kompass .kompass-icon { width: var(--k-icon-size); height: var(--k-icon-size); flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.kompass .farbwahl { display: flex; margin: 0; }
.kompass .oben .farbwahl-wahl { width: auto; min-height: var(--kompass-bedienhoehe); padding: var(--a2); font: inherit; font-size: var(--t2); font-weight: var(--fett); color: var(--text); background: var(--flaeche); border: 1px solid var(--linie-bedien); border-radius: var(--r1); cursor: pointer; }
.kompass .oben .farbwahl-wahl:focus { border-color: var(--blau); }

/* Seitenkopf und Flächen aus .page-head / .panel / .metric. */
.kompass .seite { max-width: var(--seite-max); margin: auto; padding: var(--a7) var(--a6); min-width: 0; }
.kompass .kopf { position: relative; padding-left: var(--a5); margin-bottom: var(--a7); }
.kompass .kopf::before { content: ""; position: absolute; left: 0; top: var(--a1); height: var(--a6); width: var(--a1); border-radius: var(--r1); background: var(--titelstrich); }
.kompass .kopf h1 { margin: 0 0 var(--a3); }
.kompass .kompass-untertitel { color: var(--text-leise); max-width: 68ch; margin: var(--a3) 0 0; font-size: var(--t2); }
.kompass .kompass-kopf-extra { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--a3); font-size: var(--t2); color: var(--text-leise); }
.kompass .kompass-kopf-extra:empty { display: none; }
.kompass .weg-zurueck { margin: 0 0 var(--a3); font-size: var(--t2); }
.kompass .weg-zurueck a { display: inline-block; padding: var(--a1) 0; }
.kompass .seite .karte { padding: var(--a5); border: 1px solid var(--linie); border-radius: var(--r2); box-shadow: none; min-width: 0; }
.kompass .seite .karte + .karte { margin-top: var(--a5); }
.kompass .fuss { margin-top: var(--a7); padding-top: var(--a5); border-top: 1px solid var(--linie); color: var(--text-leise); font-size: var(--t1); }

/* Derselbe Katalog wie die Navigation; Zeichen statt separat gepflegter Bilder. */
.kompass .kompass-katalog { width: 72rem; max-width: calc(100% - var(--a6)); max-height: calc(100% - var(--a6)); padding: var(--a6); border: 1px solid var(--linie); border-radius: var(--r3); background: var(--flaeche); color: var(--text); box-shadow: var(--h3); }
.kompass .kompass-katalog::backdrop { background: var(--schleier); }
.kompass .ansichten-schliessen { float: right; margin: 0 0 var(--a4) var(--a3); }
.kompass .ansichten-suche { display: grid; gap: var(--a2); max-width: 28rem; margin-bottom: var(--a5); font-size: var(--t2); }
.kompass .ansichten-gruppe h3 { margin: var(--a5) 0 var(--a3); font-size: var(--t1); text-transform: uppercase; letter-spacing: .09em; color: var(--text-leise); }
.kompass .ansichten-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 12rem), 1fr)); gap: var(--a4); }
.kompass .ansichten-karte { display: grid; align-content: start; gap: var(--a1); padding: var(--a2) var(--a2) var(--a3); border: 1px solid var(--linie); border-radius: var(--r2); color: var(--text); background: var(--flaeche); text-decoration: none; font-size: var(--t2); }
.kompass .ansichten-karte:hover { background: var(--blau-flaeche); }
.kompass .ansichten-karte[aria-current="page"] { border-color: var(--blau); box-shadow: inset 0 0 0 1px var(--blau); }
.kompass .ansichten-zeichen { display: grid; place-items: center; aspect-ratio: 16 / 9; margin-bottom: var(--a2); border: 1px solid var(--linie); border-radius: var(--r1); background: var(--flaeche-leise); color: var(--blau); }
.kompass .ansichten-zeichen svg { width: var(--a7); height: var(--a7); fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* ═══ Bausteine der Entwurfsseiten ═══════════════════════════════════════
   Maschinell aus kompass-final/style.css und kompass.css übertragen, Regel für
   Regel in derselben Reihenfolge, je Selektor unter .kompass. Weggelassen: Regeln
   auf bloße Elemente (button, table, dl ...), die heute jede App-Seite umfärben
   würden, und was der Rahmen oben schon selbst trägt (Leiste, Kopf, Katalog).
   Grafik-Klassen (.viz-*, .dot-*) wie in UEBERTRAGUNG.md Abschnitt 2. */
.kompass .muted { color:var(--text-leise) }
.kompass .button { display:inline-flex;align-items:center;justify-content:center;gap:var(--a2);min-height:var(--kompass-bedienhoehe);padding:var(--a2) var(--a4);border:var(--k-border) solid var(--linie-bedien);border-radius:var(--r1);color:var(--text);background:var(--flaeche);text-decoration:none;font-weight:var(--fett);font-size:var(--t2) }
.kompass .button:hover { background:var(--flaeche-leise);text-decoration:none }
.kompass .primary { background:var(--marke);color:var(--auf-marke);border-color:var(--marke) }
.kompass .primary:hover { background:var(--marke-tief);color:var(--auf-marke) }
.kompass .page-head { position:relative;padding-left:var(--a5);margin-bottom:var(--a6) }
.kompass .page-head:before { content:"";position:absolute;left:var(--k-zero);top:var(--a1);height:var(--a6);width:var(--a1);border-radius:var(--r1);background:var(--titelstrich) }
.kompass .page-head p { color:var(--text-leise);max-width:var(--k-copy-max);margin:var(--k-zero) }
.kompass .eyebrow { text-transform:uppercase;letter-spacing:var(--k-label-tracking);font-size:var(--t1);font-weight:var(--fett);color:var(--text-leise) }
.kompass .panel { background:var(--flaeche);padding:var(--a5);border-radius:var(--r2);box-shadow:var(--shadow);min-width:var(--k-zero);margin-bottom:var(--a5) }
.kompass .panel>:last-child { margin-bottom:var(--k-zero) }
.kompass .two, .kompass .split, .kompass .action-grid { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--a5) }
.kompass .split { grid-template-columns:minmax(0,1.7fr) minmax(var(--k-detail-column-min),1fr) }
.kompass .action-grid { grid-template-columns:repeat(3,minmax(0,1fr)) }
.kompass .large { font-size:var(--t6);line-height:var(--zh) }
.kompass .display { font-size:var(--k-display);line-height:var(--zh-eng);letter-spacing:var(--kompass-laufweite) }
.kompass .toolbar { display:flex;align-items:end;flex-wrap:wrap;gap:var(--a3);margin-bottom:var(--a5) }
.kompass .toolbar label { margin:var(--k-zero);max-width:var(--k-full) }
.kompass .toolbar h2 { margin:auto var(--k-zero) }
.kompass .grow { flex:1;min-width:var(--k-field-min) }
.kompass .tag { display:inline-flex;padding:var(--a1) var(--a2);background:var(--flaeche-leise);color:var(--text);font-size:var(--t2);border-radius:var(--r1);font-weight:var(--fett) }
.kompass .notice { padding:var(--a4);background:var(--flaeche-leise);border-left:var(--a1) solid var(--linie-bedien);color:var(--text);border-radius:var(--r1);font-size:var(--t2);margin-top:var(--a4) }
.kompass .metrics { display:grid;grid-template-columns:repeat(auto-fit,minmax(var(--k-field-min),1fr));gap:var(--a4);margin-bottom:var(--a6) }
.kompass .metric { display:flex;flex-direction:column;gap:var(--a2);padding:var(--a5);background:var(--flaeche);border-radius:var(--r2);color:var(--text);text-decoration:none;box-shadow:var(--shadow) }
.kompass .metric strong { font-size:var(--t7);line-height:var(--zh-eng);letter-spacing:var(--kompass-laufweite);font-weight:var(--fett) }
.kompass .metric span { font-size:var(--t2);font-weight:var(--fett) }
.kompass .metric:hover { background:var(--blau-flaeche);text-decoration:none }
.kompass .cockpit-lead { display:grid;grid-template-columns:1fr auto;gap:var(--a6);padding:var(--a6);margin-bottom:var(--a5);background:var(--flaeche);border-radius:var(--r3);border:var(--k-border) solid var(--linie) }
.kompass .cockpit-lead h2 { font-size:var(--k-display);letter-spacing:var(--kompass-laufweite) }
.kompass .cockpit-lead p { max-width:var(--k-copy-max);color:var(--text-leise) }
.kompass .lead-number { display:flex;flex-direction:column;justify-content:center;min-width:var(--k-field-min);border-left:var(--k-border) solid var(--linie);padding-left:var(--a6) }
.kompass .lead-number strong { font-size:var(--k-number);line-height:var(--zh-eng);font-weight:var(--k-normal);color:var(--blau) }
.kompass .lead-number span { font-size:var(--t5) }
.kompass .cockpit-body { display:grid;grid-template-columns:minmax(0,2fr) minmax(var(--k-aside-min),1fr);gap:var(--a5) }
.kompass .section-head { display:flex;justify-content:space-between;gap:var(--a3);align-items:baseline;margin:var(--a3) var(--k-zero) var(--a4) }
.kompass .section-head h2 { margin:var(--k-zero) }
.kompass .section-head span { font-size:var(--t2) }
.kompass .table-scroll { overflow:auto;border:var(--k-border) solid var(--linie);border-radius:var(--r2);background:var(--flaeche);margin-bottom:var(--a4) }
.kompass .worktable { min-width:var(--k-table-width) }
.kompass .worktable td:nth-child(3) { min-width:var(--k-field-min);max-width:var(--k-aside-min) }
.kompass .worktable td:nth-child(4), .kompass .worktable td:nth-child(5) { min-width:var(--k-cell-min) }
.kompass .work-scroll { max-height:var(--k-table-height) }
.kompass .text-button { padding:var(--a1);background:none;border:var(--k-zero);color:var(--blau);text-decoration:underline }
.kompass .selected-row { background:var(--blau-flaeche) }
.kompass .detail-body { padding:var(--k-zero) var(--a4) var(--a4) }
.kompass .tabs { display:flex;gap:var(--a2);flex-wrap:wrap;margin-bottom:var(--a5) }
.kompass .tabs a { padding:var(--a3) var(--a4);border-bottom:var(--k-border) solid var(--linie-bedien);text-decoration:none;min-height:var(--kompass-bedienhoehe) }
.kompass .tabs a[aria-current=page] { background:var(--blau-flaeche);font-weight:var(--fett) }
.kompass .timeline { list-style:none;padding:var(--k-zero);margin:var(--k-zero) }
.kompass .timeline li { border-left:var(--k-border) solid var(--linie-bedien);padding:var(--k-zero) var(--k-zero) var(--a5) var(--a5) }
.kompass .timeline small { display:block;margin-bottom:var(--a2) }
.kompass .timeline li:last-child { padding-bottom:var(--k-zero) }
.kompass .timeline p { color:var(--text-leise);font-size:var(--t2) }
@media(max-width: 1100px) {
  .kompass .cockpit-body { grid-template-columns:1fr }
  .kompass .cockpit-body>aside { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--a4) }
  .kompass .split { grid-template-columns:minmax(0,1fr) }
  .kompass .action-grid { grid-template-columns:1fr }
  .kompass .lead-number { min-width:auto }
  .kompass .section-head { flex-wrap:wrap }
}
@media(max-width: 760px) {
  .kompass .page-head { padding-left:var(--a4) }
  .kompass .cockpit-lead { padding:var(--a5);grid-template-columns:1fr;gap:var(--a5) }
  .kompass .cockpit-lead h2 { font-size:var(--t7) }
  .kompass .lead-number { border-left:var(--k-zero);border-top:var(--k-border) solid var(--linie);padding:var(--a4) var(--k-zero) var(--k-zero);display:grid;grid-template-columns:auto 1fr;gap:var(--a2) var(--a4);align-items:center }
  .kompass .lead-number strong { grid-row:span 2;font-size:var(--k-display) }
  .kompass .lead-number span { align-self:end }
  .kompass .lead-number small { align-self:start }
  .kompass .metrics { grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--a3) }
  .kompass .metric { padding:var(--a4) }
  .kompass .metric strong { font-size:var(--t6) }
  .kompass .metric:last-child:nth-child(odd) { grid-column:1/-1 }
  .kompass .cockpit-body>aside, .kompass .two, .kompass .split, .kompass .action-grid { grid-template-columns:1fr;gap:var(--a4) }
  .kompass .panel { padding:var(--a4) }
  .kompass .toolbar { align-items:stretch }
  .kompass .toolbar label { flex:1;min-width:var(--k-mobile-field-min) }
  .kompass .toolbar>button { align-self:end }
  .kompass .worktable { min-width:var(--k-zero) }
  .kompass .worktable thead { display:none }
  .kompass .worktable, .kompass .worktable tbody, .kompass .worktable tr, .kompass .worktable td { display:block }
  .kompass .worktable tr { padding:var(--a4);border-bottom:var(--k-border) solid var(--linie-bedien) }
  .kompass .worktable td { padding:var(--a1) var(--k-zero);border:var(--k-zero);max-width:none!important;min-width:var(--k-zero)!important;display:grid;grid-template-columns:var(--k-mobile-label-width) minmax(0,1fr);gap:var(--a3) }
  .kompass .worktable td:before { content:attr(data-label);color:var(--text-leise);font-size:var(--t1) }
  .kompass .work-scroll { max-height:none }
  .kompass .worktable caption { display:block }
}
@media print {
  .kompass .toolbar { display:none!important }
  .kompass .panel { box-shadow:none;break-inside:avoid }
}
.kompass .cockpit-lead .primary:focus-visible { outline-color:var(--blau) }
.kompass .icon { width:var(--k-icon-size);height:var(--k-icon-size);flex:none;vertical-align:middle;display:inline-block }
.kompass .cell-text { display:block;max-width:var(--k-full);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;word-break:normal;overflow-wrap:normal }
.kompass .secondary { display:block;font-size:var(--t1);color:var(--text-leise);font-weight:var(--k-normal);margin-top:var(--a1) }
.kompass .company { font-weight:var(--fett) }
.kompass .subject { font-size:var(--t2);font-weight:var(--k-normal);margin-top:var(--a1);text-decoration:none }
.kompass .subject:hover { text-decoration:underline }
.kompass .table-scroll { max-width:var(--k-full);isolation:isolate;scrollbar-gutter:stable;overscroll-behavior:contain;scroll-padding:var(--a4);background:var(--flaeche) }
.kompass .table-scroll:not(.work-scroll) td>.cell-text { max-width:none;overflow:visible;text-overflow:clip }
.kompass .worktable { table-layout:fixed;min-width:var(--k-table-width) }
.kompass .worktable th, .kompass .worktable td { min-width:var(--k-zero)!important;max-width:none!important;padding:var(--k-table-pad) var(--a3) }
.kompass .worktable td>.cell-text { max-width:var(--k-full) }
.kompass .worktable .col-id { width:var(--k-work-id) }
.kompass .worktable .col-context { width:var(--k-work-context) }
.kompass .worktable .col-step { width:var(--k-work-step) }
.kompass .worktable .col-owner { width:var(--k-work-owner) }
.kompass .worktable .col-date { width:var(--k-work-date) }
.kompass .work-scroll { max-height:var(--k-table-height) }
.kompass .worktable .text-button { padding:var(--k-zero);min-height:var(--a6);font-size:var(--t1);white-space:nowrap;font-weight:var(--fett);text-decoration:none;letter-spacing:var(--k-zero) }
.kompass .worktable .selected-row { background:var(--blau-flaeche) }
.kompass .worktable .selected-row td:first-child { box-shadow:inset var(--a1) 0 var(--marke) }
.kompass .worktable caption { padding:var(--a4);font-weight:var(--fett);font-size:var(--t2);border-bottom:var(--k-border) solid var(--linie) }
.kompass .pagination { display:flex;align-items:center;justify-content:space-between;gap:var(--a4);padding:var(--a4) var(--k-zero);font-size:var(--t1);color:var(--text-leise) }
.kompass .pagination>div { display:flex;gap:var(--a2) }
.kompass .pagination button { font-size:var(--t1);min-height:var(--kompass-bedienhoehe) }
.kompass .list-tools { display:flex;flex-wrap:wrap;gap:var(--a3);margin-bottom:var(--a5) }
.kompass .list-tools button { background:none }
.kompass .backlink { margin-bottom:var(--a5) }
.kompass .backlink a { display:inline-flex;align-items:center;gap:var(--a2);min-height:var(--kompass-bedienhoehe) }
.kompass .filter-status { font-size:var(--t1);margin:var(--a4) var(--k-zero);max-width:var(--k-copy-max) }
.kompass .empty-state { text-align:center;padding:var(--k-s8) var(--a5);background:var(--flaeche);border:var(--k-border) solid var(--linie);border-radius:var(--r2) }
.kompass .empty-state>.icon { width:var(--a7);height:var(--a7);color:var(--text-leise);margin-bottom:var(--a5) }
.kompass .empty-state p { max-width:var(--k-copy-max);margin:var(--a4) auto;color:var(--text-leise) }
.kompass .fact-list { border-top:var(--k-border) solid var(--linie);padding-top:var(--a4) }
.kompass .fact-list>dl { display:flex;flex-wrap:wrap;gap:var(--a4) var(--a6);padding-bottom:var(--a4);border-bottom:var(--k-border) solid var(--linie) }
.kompass .fact-list>dl>div { display:block;border:var(--k-zero);padding:var(--k-zero) }
.kompass .fact-list dt { font-size:var(--t1) }
.kompass .fact-list dd { font-size:var(--t2) }
.kompass .panel { border:var(--k-border) solid var(--linie);box-shadow:none }
.kompass .page-head { margin-bottom:var(--a7) }
.kompass .page-head h1 { font-size:var(--t7);line-height:var(--zh-eng);letter-spacing:var(--kompass-laufweite) }
.kompass .page-head p { font-size:var(--t2);margin-top:var(--a3) }
.kompass .cockpit-lead { padding:var(--a7);border:var(--k-zero);box-shadow:var(--shadow);margin-bottom:var(--a5) }
.kompass .cockpit-lead h2 { font-family:var(--k-editorial);font-weight:var(--k-title-weight);font-size:var(--k-display);line-height:1;letter-spacing:var(--kompass-laufweite);margin:var(--a4) var(--k-zero) var(--a5) }
.kompass .cockpit-lead .eyebrow { margin:var(--k-zero);font-size:var(--t1) }
.kompass .cockpit-lead .primary { margin-top:var(--a4) }
.kompass .lead-number { padding-left:var(--a7) }
.kompass .lead-number strong { font-family:var(--k-editorial);font-weight:var(--k-title-weight);font-size:var(--k-s10) }
.kompass .lead-number small { font-size:var(--t1);margin-top:var(--a2) }
.kompass .metrics { gap:var(--a4);margin-bottom:var(--a7) }
.kompass .metric { box-shadow:none;border:var(--k-border) solid var(--linie);padding:var(--a5) }
.kompass .metric strong { font-weight:var(--k-normal);letter-spacing:var(--kompass-laufweite) }
.kompass .metric small { font-size:var(--t1) }
.kompass .section-head { margin-bottom:var(--a5) }
.kompass .timeline li { position:relative;padding-bottom:var(--a6) }
.kompass .timeline li:before { content:"";position:absolute;width:var(--a2);height:var(--a2);border-radius:var(--rund);left:calc(-1 * var(--a1));top:var(--a1);background:var(--linie-bedien);outline:var(--a1) solid var(--flaeche) }
.kompass .timeline h3 { font-size:var(--t4) }
.kompass .button { transition:border-color var(--anim),background var(--anim) }
.kompass .button:hover { border-color:var(--blau) }
.kompass .toolbar { padding:var(--a5);border:var(--k-border) solid var(--linie);border-radius:var(--r2);background:var(--flaeche) }
.kompass .toolbar input, .kompass .toolbar select { font-size:var(--t2) }
.kompass .toolbar .grow { min-width:var(--k-field-wide) }
.kompass .toolbar label { font-size:var(--t1) }
@media(max-width: 1100px) {
  .kompass .cockpit-lead { padding:var(--a6) }
  .kompass .lead-number { padding-left:var(--a5) }
}
@media(max-width: 760px) {
  .kompass .page-head { margin-bottom:var(--a6) }
  .kompass .page-head h1 { font-size:var(--t6);line-height:1.3 }
  .kompass .page-head p { font-size:var(--t2) }
  .kompass .cockpit-lead { padding:var(--a5) }
  .kompass .cockpit-lead h2 { font-size:var(--t7) }
  .kompass .lead-number { padding-left:var(--k-zero) }
  .kompass .lead-number strong { font-size:var(--k-s8) }
  .kompass .metrics { margin-bottom:var(--a6) }
  .kompass .metric { padding:var(--a4) }
  .kompass .metric strong { font-size:var(--t6) }
  .kompass .worktable { min-width:var(--k-zero);table-layout:auto }
  .kompass .worktable colgroup { display:none }
  .kompass .worktable td { white-space:normal;padding:var(--a2) var(--k-zero);grid-template-columns:var(--k-mobile-label-width) minmax(0,1fr) }
  .kompass .worktable td>.cell-text, .kompass .worktable td>a { white-space:normal;overflow:visible;overflow-wrap:break-word;grid-column:2;max-width:var(--k-full) }
  .kompass .worktable td:before { grid-column:1;grid-row:1/span 2;font-size:var(--t1) }
  .kompass .worktable td .text-button { justify-self:start;min-height:var(--kompass-bedienhoehe) }
  .kompass .worktable td .secondary { margin-top:var(--k-zero) }
  .kompass .work-scroll { max-height:none }
  .kompass .worktable .selected-row td:first-child { box-shadow:none }
  .kompass .worktable .selected-row { box-shadow:inset var(--a1) 0 var(--marke) }
  .kompass .pagination { align-items:start;flex-direction:column;gap:var(--a3) }
  .kompass .pagination>div { width:var(--k-full) }
  .kompass .pagination button { flex:1 }
  .kompass .toolbar { padding:var(--a4) }
  .kompass .toolbar .grow { min-width:var(--k-full) }
}
.kompass .sr-only { position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0 }
.kompass .r1 { background:var(--reihe-1) }
.kompass .r2 { background:var(--reihe-2) }
.kompass .r3 { background:var(--reihe-3) }
.kompass .rspur { background:var(--grau) }
.kompass .viz-stack { display:flex;gap:var(--kompass-luecke);height:var(--kompass-balken);margin:var(--a3) var(--k-zero) var(--a2);border-radius:var(--rund);overflow:hidden;background:var(--k-viz-spur) }
.kompass .viz-stack span { display:block;width:var(--w);min-width:var(--a1);height:var(--k-full);font-size:inherit }
.kompass .viz-legend { display:flex;flex-wrap:wrap;gap:var(--a1) var(--a4);margin:var(--k-zero);font-size:var(--t2);color:var(--text-leise) }
.kompass .viz-legend span { display:inline-flex;align-items:center;gap:var(--a2);font-size:var(--t2);font-weight:var(--k-normal) }
.kompass .viz-legend i { display:inline-block;width:var(--kompass-punkt);height:var(--kompass-punkt);border-radius:var(--r0) }
.kompass .viz-legend b { color:var(--text);font-weight:var(--fett) }
.kompass .viz-progress { height:var(--kompass-balken);margin:var(--a3) var(--k-zero) var(--a2);border-radius:var(--rund);background:var(--k-viz-spur);overflow:hidden }
.kompass .viz-progress span { display:block;width:var(--w);height:var(--k-full);border-radius:var(--rund) }
.kompass .viz-note { margin:var(--k-zero) var(--k-zero) var(--a3);font-size:var(--t2);color:var(--text-leise) }
.kompass .viz-big { margin:var(--k-zero) var(--k-zero) var(--a2);font-size:var(--t2);color:var(--text-leise) }
.kompass .viz-big strong { font-size:var(--t6);color:var(--text);font-weight:var(--fett);margin-right:var(--a1) }
.kompass .viz-cols { display:flex;align-items:flex-end;gap:var(--a2);height:var(--k-viz-saeulen);margin-top:var(--a3);border-bottom:var(--k-border) solid var(--linie) }
.kompass .viz-cols span { flex:1;height:var(--h);min-height:var(--a1);border-radius:var(--r0) var(--r0) var(--k-zero) var(--k-zero) }
.kompass .viz-axis { display:flex;justify-content:space-between;margin:var(--a1) var(--k-zero) var(--a3);font-size:var(--t1);color:var(--text-leise) }
.kompass .viz-hbars { display:grid;gap:var(--a3);margin:var(--a2) var(--k-zero) var(--a4) }
.kompass .viz-hbars>div { border:0;padding:0;display:grid;grid-template-columns:minmax(var(--k-zero),9.5rem) minmax(var(--k-zero),1fr);gap:var(--a3);align-items:center }
.kompass .viz-hbars dt { font-size:var(--t2);color:var(--text) }
.kompass .viz-hbars dd { display:grid;grid-template-columns:minmax(var(--k-zero),1fr) 3.5ch;gap:var(--a3);align-items:center;margin:var(--k-zero) }
.kompass .viz-hbars b { text-align:right;font-weight:var(--fett) }
.kompass .viz-bar { display:block;height:var(--kompass-balken);border-radius:var(--rund);background:var(--k-viz-spur);overflow:hidden }
.kompass .viz-bar span { display:block;width:var(--w);height:var(--k-full);border-radius:var(--rund) }
.kompass .metric .viz-hbars { gap:var(--a1);margin:var(--a2) var(--k-zero) var(--k-zero) }
.kompass .metric .viz-hbars>div { grid-template-columns:minmax(var(--k-zero),4.5rem) minmax(var(--k-zero),1fr) }
.kompass .metric .viz-hbars dt, .kompass .metric .viz-hbars b { font-size:var(--t1) }
.kompass .metric .viz-hbars dd { grid-template-columns:minmax(var(--k-zero),1fr) 3ch }
.kompass .viz-time { margin:var(--a3) var(--k-zero) var(--a2) }
.kompass .viz-time-track { position:relative;display:block;height:var(--kompass-balken);border-radius:var(--rund);background:var(--k-viz-spur) }
.kompass .viz-time-track>span { display:block;width:var(--w);height:var(--k-full);border-radius:var(--rund) }
.kompass .viz-time-today { position:absolute;top:calc(-1 * var(--a1));left:var(--x);width:var(--a1);height:calc(var(--kompass-balken) + var(--a2));margin-left:calc(-1 * var(--a1) / 2);border-radius:var(--rund);background:var(--text) }
.kompass .viz-time.is-late .viz-time-track { background:var(--rot-flaeche);box-shadow:inset 0 0 0 var(--k-border) var(--rot-kante) }
.kompass .viz-time.is-late .viz-time-today { background:var(--rot) }
.kompass .viz-time-labels { display:flex;justify-content:space-between;gap:var(--a3);margin-top:var(--a2);font-size:var(--t1);color:var(--text-leise) }
.kompass .viz-steps { display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--a2);list-style:none;padding:var(--k-zero);margin:var(--k-zero) var(--k-zero) var(--a5) }
.kompass .viz-steps li { display:grid;gap:var(--a2);font-size:var(--t2);color:var(--text-leise) }
.kompass .viz-steps .viz-step-mark { display:block;height:var(--a1);border-radius:var(--rund);background:var(--k-viz-spur) }
.kompass .viz-steps .done .viz-step-mark { background:var(--reihe-1) }
.kompass .viz-steps .now { color:var(--text);font-weight:var(--fett) }
.kompass .viz-steps .now .viz-step-mark { background:var(--reihe-3) }
.kompass .viz-trio { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--a5);margin-bottom:var(--a5) }
.kompass .viz-trio h3, .kompass .viz-gallery h3 { font-size:var(--t2);margin:var(--k-zero) }
.kompass .viz-pair { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--a5) }
.kompass .viz-summary { display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:var(--a5);align-items:end }
.kompass .viz-summary h2 { margin-bottom:var(--a2) }
.kompass .viz-summary-row { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--a5) }
.kompass .viz-gallery { display:grid;grid-template-columns:repeat(auto-fit,minmax(min(16rem,100%),1fr));gap:var(--a5) }
.kompass .plain { list-style:none;padding:var(--k-zero);margin:var(--a3) var(--k-zero) var(--k-zero);display:grid;gap:var(--a2);font-size:var(--t2) }
.kompass .metric .viz-stack, .kompass .metric .viz-progress { margin:var(--a2) var(--k-zero) var(--k-zero) }
.kompass .metric .viz-legend span { font-size:var(--t1) }
.kompass .metric .viz-note { font-size:var(--t1);margin:var(--k-zero) }
.kompass .lead-number .viz-stack { width:var(--k-full);margin-top:var(--a4) }
.kompass .lead-number .viz-legend span { font-size:var(--t2) }
.kompass .viz-week { display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--a3) }
.kompass .viz-week a { display:grid;gap:var(--a2);justify-items:stretch;text-align:center;font-size:var(--t2) }
.kompass .viz-week-col { display:flex;align-items:flex-end;height:var(--k-s8);border-bottom:var(--k-border) solid var(--linie) }
.kompass .viz-week-col span { display:block;width:var(--k-full);height:var(--h);border-radius:var(--r0) var(--r0) var(--k-zero) var(--k-zero) }
/* 🆕 12.10.2026 · Risikobild (E-089 E14): VERLAUF über Jahre und FORTSCHRITT IN STUFEN.
   Makros `verlauf` und `stufen` in plattform/vorlagen/_format.html.
   Farbrollen wie im ganzen Risikobild: Blau = Daten, Gelb = "Sie sind dran" (offener
   Vorschlag), Grau schraffiert = veraltet. Grün kommt hier bewusst nicht vor. */
.kompass .viz-spark { display:grid;grid-template-columns:minmax(var(--k-zero),1fr) auto;gap:var(--a3);align-items:center;margin:var(--a2) var(--k-zero) }
.kompass .viz-spark-feld { position:relative;display:block;height:var(--k-viz-spark) }
.kompass .viz-spark-feld svg { display:block;width:var(--k-full);height:var(--k-full);overflow:visible }
.kompass .viz-spark-linie { fill:none;stroke:var(--reihe-2);stroke-width:2;vector-effect:non-scaling-stroke;stroke-linejoin:round;stroke-linecap:round }
/* Der Endpunkt ist ein Kästchen, kein SVG-Kreis: Die Grafik wird in die Breite gezogen,
   ein Kreis darin würde zur Ellipse. */
.kompass .viz-spark-punkt { position:absolute;left:var(--x);top:var(--y);width:var(--kompass-punkt);height:var(--kompass-punkt);margin:calc(-1 * var(--kompass-punkt) / 2) var(--k-zero) var(--k-zero) calc(-1 * var(--kompass-punkt) / 2);border-radius:var(--rund);background:var(--reihe-3) }
.kompass .viz-spark-werte { margin:var(--k-zero);font-size:var(--t1);color:var(--text-leise);text-align:right;line-height:var(--zh-eng) }
.kompass .viz-spark-werte b { display:block;font-size:var(--t3);color:var(--text);font-weight:var(--fett);font-variant-numeric:tabular-nums }
.kompass .viz-seg { display:flex;gap:var(--kompass-luecke);margin:var(--a2) var(--k-zero) var(--a1) }
.kompass .viz-seg span { flex:1;height:var(--kompass-balken);background:var(--k-viz-spur) }
.kompass .viz-seg span:first-child { border-radius:var(--rund) var(--k-zero) var(--k-zero) var(--rund) }
.kompass .viz-seg span:last-child { border-radius:var(--k-zero) var(--rund) var(--rund) var(--k-zero) }
.kompass .viz-seg span:only-child { border-radius:var(--rund) }
.kompass .viz-seg .ja { background:var(--reihe-2) }
.kompass .viz-seg .vorschlag { background:var(--gelb) }
.kompass .viz-seg .veraltet { background:repeating-linear-gradient(135deg,var(--grau) 0 var(--schraffur),var(--spur) var(--schraffur) calc(2 * var(--schraffur))) }
.kompass .viz-seg-legende i.ja { background:var(--reihe-2) }
.kompass .viz-seg-legende i.vorschlag { background:var(--gelb) }
.kompass .viz-seg-legende i.veraltet { background:repeating-linear-gradient(135deg,var(--grau) 0 var(--schraffur),var(--spur) var(--schraffur) calc(2 * var(--schraffur))) }
/* Kopfbild der Kundenansicht und der Anmeldung: im Dunkeln gedämpft (token.css). */
.kompass .kopfbild { display:block;width:var(--k-full);object-fit:cover;filter:brightness(var(--bild-helligkeit)) }
.kompass .dot { display:inline-block;flex:none;width:var(--kompass-punkt);height:var(--kompass-punkt);border-radius:var(--rund);vertical-align:middle;margin-right:var(--a2) }
.kompass .dot-rot { background:var(--rot) }
.kompass .dot-gelb { background:var(--gelb) }
.kompass .dot-gruen { background:var(--gruen) }
.kompass .dot-ruhe { background:var(--ruhe) }
.kompass .dot-offen { background:transparent;box-shadow:inset 0 0 0 2px var(--k-ampel-offen) }
.kompass .worktable td:first-child .dot { margin-right:var(--a1) }
.kompass .cockpit-main { min-width:var(--k-zero) }
.kompass .urgent .section-head { margin-top:var(--k-zero) }
.kompass .urgent .section-head a { display:inline-flex;align-items:center;gap:var(--a1);font-size:var(--t2);white-space:nowrap }
.kompass .urgent-group { display:flex;align-items:center;gap:var(--a1);margin:var(--a4) var(--k-zero) var(--a1);font-size:var(--t1);text-transform:uppercase;letter-spacing:var(--k-label-tracking);color:var(--text-leise) }
.kompass .urgent-group .muted { margin-left:var(--a1) }
.kompass .urgent-list { list-style:none;margin:var(--k-zero);padding:var(--k-zero) }
.kompass .urgent-list li+li { border-top:var(--k-border) solid var(--linie) }
.kompass .urgent-list a { display:grid;grid-template-columns:auto minmax(0,1fr) var(--k-urgent-date);gap:var(--a3);align-items:center;padding:var(--a3) var(--a2);margin:var(--k-zero) calc(-1 * var(--a2));border-radius:var(--r1);color:var(--text);text-decoration:none }
.kompass .urgent-list a:hover { background:var(--blau-flaeche) }
.kompass .urgent-list .dot { margin:var(--k-zero) }
.kompass .u-main { display:grid;min-width:var(--k-zero) }
.kompass .u-main strong { overflow:hidden;text-overflow:ellipsis;white-space:nowrap }
.kompass .u-main span { font-size:var(--t2);color:var(--text-leise);overflow:hidden;text-overflow:ellipsis;white-space:nowrap }
.kompass .u-date { display:grid;justify-items:end;font-size:var(--t2);text-align:right }
.kompass .u-date small { font-size:var(--t1) }
@media(max-width: 1100px) {
  .kompass .viz-pair, .kompass .viz-summary-row { grid-template-columns:1fr }
  .kompass .viz-summary { grid-template-columns:1fr;align-items:start }
}
@media(max-width: 760px) {
  .kompass .viz-trio { grid-template-columns:1fr;gap:var(--a4) }
  .kompass .lead-number .viz-stack, .kompass .lead-number .viz-legend { grid-column:1 / -1 }
  .kompass .urgent-list a { grid-template-columns:auto minmax(0,1fr);row-gap:var(--a1) }
  .kompass .u-date { grid-column:2;justify-items:start;grid-auto-flow:column;justify-content:start;gap:var(--a2);text-align:left }
  .kompass .viz-hbars>div { grid-template-columns:minmax(var(--k-zero),7.5rem) minmax(var(--k-zero),1fr) }
  .kompass .viz-steps { grid-template-columns:repeat(2,minmax(0,1fr)) }
}
@media print {
  .kompass .viz-time-today { background:var(--text) }
}
.kompass .section-head>.muted { white-space:nowrap }
.kompass .viz-hbars-breit dd { grid-template-columns:minmax(var(--k-zero),1fr) 8ch }
.kompass .display { hyphens:auto;overflow-wrap:break-word }
.kompass .ampel-legende { margin:var(--k-zero) var(--k-zero) var(--a3) }
.kompass .ampel-legende .dot { margin:var(--k-zero) }
.kompass .viz-pair .section-head { flex-direction:column;align-items:flex-start;gap:var(--a1) }


/* Bühne der Vorgänge (_vg_buehne.html): Aufbau aus .metrics/.metric oben.
   Hier nur, was der Entwurf nicht braucht, weil seine Karten nur EIN Ziel
   haben: Zahl und Legende als eigene Verweise in einer Karte. */
.kompass .vg-buehne { margin: 0; }
.kompass .metric .kompass-zahllink { color: inherit; text-decoration: none; }
.kompass .metric .kompass-zahllink:hover { text-decoration: underline; }
.kompass .viz-legend a { display: inline-flex; align-items: center; gap: var(--a2); color: inherit; text-decoration: none; }
.kompass .viz-legend a[href]:hover { color: var(--text); text-decoration: underline; }
.kompass .metric .viz-legend a { gap: var(--a2); }
.kompass .vg-buehne .metrics .metric small, .kompass .vg-buehne .metrics .metric .viz-note { margin: 0; }
.kompass .kompass-hinweise .metrics { margin-bottom: var(--a5); }
.kompass .vg-haus { margin-block: var(--a5); min-width: 0; }
.kompass .viz-week a { color: var(--blau); text-decoration: none; }
.kompass .viz-week a[href]:hover { text-decoration: underline; }
.kompass .viz-week a.heute > span:last-child { font-weight: var(--fett); }
.kompass details.kompass-hinweise { background: var(--flaeche); border-bottom: 1px solid var(--linie); border-radius: var(--r1); margin-bottom: var(--a4); }
.kompass .kompass-hinweise > summary { cursor: pointer; padding: var(--a4) var(--a5); min-height: var(--kompass-bedienhoehe); font-size: var(--t2); font-weight: var(--fett); }

/* Die nachgeladene Vorgangstabelle der Steuerung bleibt eine Detailansicht. */
.kompass .kompass-steuerung-teil { min-width: 0; padding: var(--a4); border: 1px solid var(--linie); border-radius: var(--r2); background: var(--flaeche); }
.kompass .kompass-steuerung-tabelle { overflow-x: auto; }
.kompass .kompass-steuerung-teil .tiefer-kopf, .kompass .kompass-steuerung-teil .mehr { font-size: var(--t2); color: var(--text-leise); margin: 0 0 var(--a3); }
.kompass .kompass-steuerung-teil .mehr { margin: var(--a3) 0 0; }

/* Wie style.css: bis 760 px bleibt die Leiste stehen, darunter klappt sie
   über dem Inhalt auf (.rail.open) - nicht seitlich darüber. */
@media (max-width: 1100px) {
  .kompass .oben-pfad { max-width: 28ch; }
}
@media (max-width: 760px) {
  .kompass .gestell-rumpf { margin-left: 0; }
  .kompass .seitenleiste { display: none; position: static; width: 100%; max-height: 70vh; }
  .kompass .seitenleiste.offen { display: flex; }
  .kompass .leiste-marke { margin-bottom: var(--a2); }
  .kompass .leiste-fuss { padding-top: var(--a4); }
  .kompass .oben .menue-knopf { display: inline-flex; }
  .kompass .oben .kompass-icon { display: none; }
  .kompass .oben .menue-knopf .kompass-icon { display: inline-block; }
  .kompass .oben { padding: var(--a3) var(--a4); align-items: start; flex-wrap: wrap; }
  .kompass .oben-pfad { display: none; }
  .kompass .oben-werkzeuge { flex-shrink: 1; }
  .kompass .oben button { font-size: var(--t1); padding: var(--a2) var(--a3); }
  .kompass .seite { padding: var(--a6) var(--a4); }
  .kompass .kopf { padding-left: var(--a4); margin-bottom: var(--a6); }
  .kompass .kopf h1 { font-size: var(--t6); }
  .kompass .seite .karte { padding: var(--a4); }
  .kompass .kompass-katalog { padding: var(--a5); }
  .kompass .ansichten-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--a3); }
}
@media print {
  .kompass .seitenleiste, .kompass .oben, .kompass .fuss, .kompass .kompass-katalog { display: none !important; }
  .kompass .gestell-rumpf { margin: 0; }
  .kompass .seite { padding: 0; }
}

/* Anonyme Anmeldung: bestehender Markenauftritt ohne Bestandszahlen. */

  /* Nur Token aus token.css - Herleitung der Kontraste unten am Kommentar
     „DIE BÜHNE VOR DER ANMELDUNG". */
  /* ═══ DIE BÜHNE VOR DER ANMELDUNG ═════════════════════════════════════
     27.09.2026, Maetti: „verrate nichts über inhalt. highlighte das KUPAi,
     vor allem stelle heraus grafisch, visuell und einladend für meine
     mitarbeiter, worum es inhaltlich geht."

     Die Spannung darin ist gewollt: WORUM es geht, zeigt das Bild - viele
     Punkte, die an einer Mitte zusammenlaufen. WAS es gibt, zeigt nichts.
     Kein Name einer Anwendung, keine Zahl, kein Wort über die Technik.
     (Dieser Kommentar geht mit der Seite zum Browser - deshalb steht auch
     hier kein Name.)

     Die Fläche ist --marke-tief, dieselbe wie der Markenkopf darüber: Kopf
     und Bühne lesen sich als EIN Auftritt, nicht als Banner plus Kasten.
     Alle Farben aus token.css; Durchsicht nur über `color-mix` auf Token,
     nie über einen festen Wert. Gemessen gilt (rahmen.html, 19.09.2026):
         --marke-leise auf --marke-tief   6,92 hell · 8,60 dunkel
         --auf-marke   auf --marke-tief   deutlich über 10
         --akzent      auf --marke-tief   3,70 hell - trägt nur als GROSSE
                                           Schrift (Grenze 3:1), deshalb
                                           steht er nur am großen „i". */
  .buehne {
    position: relative; overflow: hidden; isolation: isolate;
    display: grid; gap: var(--a6); align-items: center;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    padding: var(--a7);
    border-radius: var(--r4);
    background:
      radial-gradient(ellipse at 85% 20%,
        color-mix(in srgb, var(--akzent-auf-marke) 22%, transparent), transparent 55%),
      radial-gradient(ellipse at 10% 110%,
        color-mix(in srgb, var(--marke) 90%, transparent), transparent 60%),
      var(--marke-tief);
    color: var(--auf-marke);
    box-shadow: var(--h3);
  }

  /* Das Sternbild: rein Schmuck, für Vorleseprogramme unsichtbar. */
  .buehne-bild {
    position: absolute; z-index: -1;
    /* Die Mitte (Akzentpunkt) liegt in der Lücke zwischen Text und
       Anmeldung - hinter der Karte wäre das Einzige verdeckt, worauf das
       Bild hinausläuft. */
    left: 23%; top: 50%; width: 52%; min-width: 420px;
    transform: translateY(-50%);
    color: var(--marke-leise);
    pointer-events: none;
  }
  .buehne-bild svg { display: block; width: 100%; height: auto; overflow: visible; }
  .bahn   { fill: none; stroke: currentColor; stroke-width: 1; opacity: .22; }
  .strahl { stroke: currentColor; stroke-width: 1; opacity: .16; stroke-dasharray: 3 5; }
  .punkt  { fill: currentColor; opacity: .55; }
  .mitte  { fill: var(--akzent-auf-marke); }
  .mitte-hof { fill: var(--akzent-auf-marke); opacity: .18; }
  .kreisen { transform-origin: 300px 300px; animation: kreisen 90s linear infinite; }
  .kreisen.gegen { animation-duration: 140s; animation-direction: reverse; }
  .mitte-hof { transform-origin: 300px 300px; animation: atmen 5s ease-in-out infinite; }
  @keyframes kreisen { to { transform: rotate(360deg); } }
  @keyframes atmen { 50% { transform: scale(1.35); opacity: .06; } }
  @media (prefers-reduced-motion: reduce) {
    .kreisen, .mitte-hof { animation: none; }
  }
  .buehne-vorzeile {
    margin: 0 0 var(--a3);
    font-size: var(--t2); font-weight: var(--fett-halb);
    letter-spacing: .12em; text-transform: uppercase;
    color: var(--marke-leise);
  }
  .dach-titel {
    margin: 0; padding: 0; border: 0;
    font-size: clamp(28px, 4vw, 40px); font-weight: var(--fett-halb);
    line-height: var(--zh-eng); letter-spacing: -.02em;
    color: var(--auf-marke);
  }

  @media (max-width: 860px) {
    .buehne { grid-template-columns: minmax(0, 1fr); padding: var(--a6) var(--a5); }
    /* Einspaltig: Mitte nach oben rechts, neben die Vorzeile - sonst sitzt
       der Akzentpunkt hinter der Überschrift. */
    .buehne-bild { left: 45%; top: -120px; width: 80%; min-width: 0; transform: none; }
  }
  @media (max-width: 480px) {
    .buehne { padding: var(--a5) var(--a4); margin-inline: calc(-1 * var(--a2)); }
  }

/* Hausverlauf: gemeinsame Panel-Maße und blaue Datenreihen. */

  .hv { margin: 0; padding: var(--a5); background: var(--flaeche); color: var(--text);
        border: 1px solid var(--linie); border-radius: var(--r2); box-shadow: none; min-width: 0; }
  .hv-kopf { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--a2) var(--a4); }
  .hv-titel { font-size: var(--t6); font-weight: var(--fett-halb); }
  .hv-wahl { display: flex; flex-wrap: wrap; gap: 2px; padding: 2px; border: 1px solid var(--linie); border-radius: var(--rund); }
  .hv-wahl button { font: inherit; font-size: var(--t2); font-weight: var(--fett-halb); padding: var(--a1) var(--a3);
        border: 0; border-radius: var(--rund); background: transparent; color: var(--text-leise); cursor: pointer; }
  .hv-wahl button:hover { color: var(--text); }
  .hv-wahl button[aria-pressed="true"] { background: var(--akzent); color: var(--auf-akzent); }
  .hv-wahl button:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }
  .hv-legende { display: flex; flex-wrap: wrap; gap: var(--a1) var(--a4); margin: var(--a3) 0 var(--a2); font-size: var(--t2); color: var(--text-leise); }
  .hv-lg { display: inline-block; width: 12px; height: 10px; border-radius: var(--r0); margin-right: 6px; vertical-align: -1px; }
  .hv-lg-offen { background: var(--reihe-3); height: 3px; vertical-align: 3px; }
  .hv-lg-inbox { background: var(--reihe-2); height: 3px; vertical-align: 3px; }
  .hv-lg-plus  { background: var(--reihe-3); }
  .hv-lg-minus { background: var(--reihe-1); }
  .hv-buehne { position: relative; }
  .hv-bild { display: block; width: 100%; height: 300px; overflow: visible; touch-action: pan-y; }
  .hv-bild .hv-gitter { stroke: var(--linie); stroke-width: 1; }
  .hv-bild .hv-null { stroke: var(--linie-stark); stroke-width: 1.25; }
  .hv-bild .hv-monat { stroke: var(--linie-stark); stroke-width: 1; stroke-dasharray: 2 3; }
  .hv-bild text { font-family: inherit; font-size: var(--t1); fill: var(--text-leise); }
  .hv-bild .hv-feld { font-size: var(--t1); font-weight: var(--fett-halb); fill: var(--text); }
  .hv-bild .hv-monat-wort { font-size: var(--t1); font-weight: var(--fett-halb); fill: var(--text); }
  .hv-bild .hv-linie-offen { fill: none; stroke: var(--reihe-3); stroke-width: 2.25; stroke-linejoin: round; }
  .hv-bild .hv-linie-inbox { fill: none; stroke: var(--reihe-2); stroke-width: 2.25; stroke-linejoin: round; }
  .hv-bild .hv-punkt-offen { fill: var(--reihe-3); }
  .hv-bild .hv-punkt-inbox { fill: var(--reihe-2); }
  .hv-bild .hv-plus  { fill: var(--reihe-3); }
  .hv-bild .hv-minus { fill: var(--reihe-1); }
  .hv-bild .hv-zeiger { stroke: var(--text); stroke-width: 1; stroke-dasharray: 3 3; }
  .hv-tipp { position: absolute; top: 0; z-index: 5; pointer-events: none; min-width: 190px;
        padding: var(--a2) var(--a3); background: var(--flaeche); color: var(--text);
        border: 1px solid var(--linie-stark); border-radius: var(--r2); box-shadow: var(--h2); font-size: var(--t2); }
  .hv-tipp strong { display: block; margin-bottom: 2px; }
  .hv-tipp span { display: block; color: var(--text-leise); }
  .hv-schieber { position: relative; height: 28px; margin: var(--a2) 0 0; }
  .hv-spur { position: absolute; left: 0; right: 0; top: 12px; height: 4px; border-radius: 2px; background: var(--flaeche-leise); }
  .hv-fenster { position: absolute; top: 0; bottom: 0; border-radius: 2px; background: var(--akzent); }
  .hv-schieber input { position: absolute; left: 0; width: 100%; top: 4px; height: 20px; margin: 0;
        background: none; pointer-events: none; -webkit-appearance: none; appearance: none; }
  .hv-schieber input::-webkit-slider-thumb { -webkit-appearance: none; pointer-events: auto; width: 18px; height: 18px;
        border-radius: 50%; background: var(--flaeche); border: 2px solid var(--akzent); cursor: grab; }
  .hv-schieber input::-moz-range-thumb { pointer-events: auto; width: 14px; height: 14px; border-radius: 50%;
        background: var(--flaeche); border: 2px solid var(--akzent); cursor: grab; }
  .hv-schieber input::-webkit-slider-runnable-track { background: none; }
  .hv-schieber input::-moz-range-track { background: none; }
  .hv-schieber input:focus-visible { outline: none; }
  .hv-schieber input:focus-visible::-webkit-slider-thumb { outline: 2px solid var(--akzent); outline-offset: 2px; }
  .hv-zuletzt { margin: var(--a2) 0 0; font-size: var(--t3); }
  .hv-zeitraum { margin: var(--a1) 0 0; font-size: var(--t3); font-weight: var(--fett-halb); }
  .hv-notiz { margin: var(--a1) 0 0; font-size: var(--t2); color: var(--text-leise); }
  @media (max-width: 560px) { .hv { padding: var(--a3); } .hv-bild { height: 260px; } }

/* ═══ FLÄCHEN DER ÄLTEREN SEITEN (Karte, Hinweis, Tabelle) ═══════════════════
   🆕 04.10.2026 · Aus `ruecksprache_und_vorgaenge_flaechen.html` (A-20261004-20)
   hierher geholt, damit JEDE Seite sie trägt - auch Wer sieht was, die KI-
   Seiten und die Zustände (Plan plattform-gestaltung, Schritt 10). Vorbild
   kompass-final/style.css: .panel, .notice, Tabellenkopf. Nur Token. */
  .kompass .seite .karte { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--r2);
                           box-shadow: none; padding: var(--a5); margin-bottom: var(--a5); }
  .kompass .seite .karte + .karte { margin-top: 0; }
  .kompass .karte-titel { font-size: var(--t6); font-weight: var(--fett); line-height: var(--zh-eng); }
  .kompass .karte-hinweis { padding: var(--a4); background: var(--flaeche-leise); color: var(--text);
                            border-left: var(--a1) solid var(--linie-bedien); border-radius: var(--r1); font-size: var(--t2); }
  .kompass .tabelle-kasten { border: 1px solid var(--linie); border-radius: var(--r2); background: var(--flaeche); }
  .kompass .tabelle { font-size: var(--t2); }
  .kompass .tabelle thead th { background: var(--flaeche-leise); color: var(--text); font-size: var(--t1);
                               font-weight: var(--fett); text-transform: none; letter-spacing: 0;
                               border-bottom: 1px solid var(--linie-bedien); }
  .kompass .tabelle thead th a { color: inherit; }
  .kompass .tabelle tbody tr:hover { background: var(--flaeche-leise); }
  .kompass .abschnitt-titel { font-size: var(--t6); font-weight: var(--fett); border: 0; padding: 0; }
  .kompass .toolbar label { display: flex; flex-direction: column; gap: var(--a2); font-size: var(--t1); font-weight: var(--fett); }
  .kompass .toolbar .feld { flex: none; min-height: var(--kompass-bedienhoehe); }
  html[data-dichte="kompakt"] .kompass .tabelle td { padding-block: var(--a2); }

/* ═══ DER SPICKZETTEL - die acht Regeln als Haftnotiz hinter dem „i" ════════
   🆕 04.10.2026 · Maetti: „overlay als post it [...] darf eine andere passende
   farbe tragen. aber modern und hübsch." Ein warmes Papiergelb, deutlich
   heller als das Signal „heute", damit es nicht als Warnung gelesen wird.
   Hell und dunkel; Kontrast prüft kontrast_selbsttest nicht - gerechnet:
     --zettel-text auf --zettel     hell ca. 11 : 1 · dunkel ca. 11 : 1 */
:root {
  --zettel: #fff7d6; --zettel-text: #3b3322; --zettel-leise: #6b5d3a;
  --zettel-kante: #efdf9f; --zettel-nr: #f3e3a1; --zettel-band: rgba(165, 58, 69, .18);
}
@media (prefers-color-scheme: dark) {
  html:not([data-farbe="hell"]) {
    --zettel: #39321f; --zettel-text: #f6ecd0; --zettel-leise: #d9c99c;
    --zettel-kante: #574b2c; --zettel-nr: #4d4429; --zettel-band: rgba(233, 154, 164, .22);
  }
}
html[data-farbe="dunkel"] {
  --zettel: #39321f; --zettel-text: #f6ecd0; --zettel-leise: #d9c99c;
  --zettel-kante: #574b2c; --zettel-nr: #4d4429; --zettel-band: rgba(233, 154, 164, .22);
}
.zettel-anker { position: relative; display: inline-flex; }
.kompass .zettel-anker .zettel-knopf {
  width: 38px; height: 38px; border-radius: 50%; cursor: help;
  display: inline-grid; place-items: center; padding: 0;
  font: italic 700 18px/1 Georgia, "Times New Roman", serif;
  color: var(--akzent-text); background: var(--flaeche); border: 1px solid var(--linie-bedien);
  transition: background var(--anim), color var(--anim), transform var(--anim);
}
.kompass .zettel-anker:hover .zettel-knopf, .kompass .zettel-anker.offen .zettel-knopf, .kompass .zettel-anker .zettel-knopf:focus-visible {
  background: var(--akzent); color: var(--auf-akzent); transform: translateY(-1px);
}
.zettel-knopf:focus-visible { outline: 2px solid var(--akzent); outline-offset: 3px; }
.zettel {
  position: absolute; right: 0; top: calc(100% + 14px); z-index: 80;
  width: min(760px, calc(100vw - 32px));
  padding: 26px 28px 22px; color: var(--zettel-text); text-align: left;
  background: var(--zettel); border: 1px solid var(--zettel-kante); border-radius: 4px 4px 18px 4px;
  box-shadow: 0 1px 1px rgba(0,0,0,.04), 0 18px 40px rgba(29,29,27,.18);
  transform: rotate(-.6deg) translateY(6px); transform-origin: top right;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
}
/* Das Klebeband oben - ein Hauch Bordeaux, wie der Titelstrich. */
.zettel::before {
  content: ""; position: absolute; top: -11px; left: 50%; width: 110px; height: 22px;
  transform: translateX(-50%) rotate(-2deg); background: var(--zettel-band); border-radius: 2px;
}
/* Eine Brücke über den Abstand, damit der Zettel beim Hinüberfahren nicht zuklappt. */
.zettel::after { content: ""; position: absolute; left: 0; right: 0; top: -16px; height: 16px; }
.zettel-anker:hover .zettel, .zettel-anker:focus-within .zettel, .zettel-anker.offen .zettel {
  opacity: 1; visibility: visible; pointer-events: auto; transform: rotate(-.6deg);
  transition: opacity .18s ease, transform .18s ease, visibility 0s;
}
.zettel-kopf { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
  gap: 4px 16px; margin: 0 0 14px; padding-bottom: 10px; border-bottom: 1px dashed var(--zettel-kante); }
.zettel-kopf strong { font-family: var(--k-editorial, inherit); font-weight: 300; font-size: 26px; letter-spacing: -.01em; }
.zettel-kopf span { font-size: var(--t1); color: var(--zettel-leise); }
.zettel-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px 26px;
  grid-template-columns: repeat(2, minmax(0, 1fr)); }
.zettel-liste li { display: flex; gap: 12px; align-items: flex-start; }
.zettel-nr { flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
  background: var(--zettel-nr); font-weight: 700; font-size: 13px; }
.zettel-liste strong { display: block; font-size: var(--t3); line-height: 1.3; }
.zettel-liste p { margin: 3px 0 0; font-size: var(--t2); line-height: 1.45; color: var(--zettel-text); }
@media (max-width: 720px) {
  .zettel { position: fixed; left: 16px; right: 16px; top: 72px; width: auto;
    max-height: calc(100vh - 96px); overflow-y: auto; transform: none; }
  .zettel-anker:hover .zettel, .zettel-anker:focus-within .zettel, .zettel-anker.offen .zettel { transform: none; }
  .zettel-liste { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) { .zettel, .zettel-knopf { transition: none; } }
@media print { .zettel-anker { display: none !important; } }

/* 🆕 04.10.2026 · Hausgrafik: die eigene Reihe „Was Sie wegarbeiten" in Grün -
   die einzige Farbe der Grafik, die SIE meint (Maetti: „andersfarbig"). Grün
   trägt sonst nur „erledigt"-Bedeutung, keine Warnung. Dazu die Wochentabelle. */
.hv-bild .hv-meine { fill: var(--gruen); }
.hv-lg-meine { background: var(--gruen); }
.hv-tabelle { margin-top: var(--a3); }
/* 05.10.2026 · Vorgänge und Events je Woche - zwei gleich gebaute Blöcke (event-zahlen 6) */
.hv-events { margin-top: var(--a2); }
.hv-leise { color: var(--text-leise); }
/* 05.10.2026 (spät) · Umschalter Vorgänge | Events - zwei Radioknöpfe, kein Skript */
.hv-umschalter { margin-top: var(--a3); }
.hv-umschalter .hv-r { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.hv-umschalter .hv-tabs { display: flex; flex-wrap: wrap; gap: var(--a2); margin-bottom: var(--a2); }
.hv-umschalter .hv-tabs label { cursor: pointer; }
.hv-r-v:checked ~ .hv-tafel-e, .hv-r-e:checked ~ .hv-tafel-v { display: none; }
.hv-r-v:checked ~ .hv-tabs label[for$="-v"], .hv-r-e:checked ~ .hv-tabs label[for$="-e"] {
  /* dasselbe Bild wie `.chip2.an` (bausteine.css) - eine Akzentfarbe für „ausgewählt" */
  background: var(--akzent-leise); border-color: var(--akzent); color: var(--akzent-tief); }
.hv-r-v:focus-visible ~ .hv-tabs label[for$="-v"], .hv-r-e:focus-visible ~ .hv-tabs label[for$="-e"] {
  outline: 2px solid var(--akzent); outline-offset: 2px; }
.hv-tabelle > summary { cursor: pointer; font-size: var(--t2); font-weight: var(--fett-halb); color: var(--text-leise); }
.hv-tabelle > summary:focus-visible { outline: 2px solid var(--akzent); outline-offset: 3px; }
.hv-tabelle .tabelle-kasten { margin-top: var(--a2); overflow-x: auto; }

/* ═══ KUPAi MIT DEM FUNKEN ✦ ══════════════════════════════════════════════════
   🆕 04.10.2026 · Maetti: „ich nehme aber A FUNKE!" Der Funke ersetzt den Punkt
   des i (`_zeichen.html`, Makro `kupai`). Bordeaux wie der Titelstrich; auf dem
   Marken-Blau der Seitenleiste das helle Bordeaux, das dort lesbar bleibt. */
.kupai { white-space: nowrap; }
.kupai-i { position: relative; display: inline-block; }
.kupai-funke { position: absolute; left: 50%; bottom: .84em; width: .32em; height: .32em;
  transform: translateX(-50%); overflow: visible; fill: var(--titelstrich); }
:root { --funke-auf-marke: #e99aa4; }   /* 5,6 : 1 auf --marke-tief (gerechnet) */
.seitenleiste .kupai-funke { fill: var(--funke-auf-marke); }
/* In der Leiste ist das Wort klein - der Funke etwas größer, damit er als Zeichen trägt. */
.seitenleiste .kupai-funke { width: .44em; height: .44em; bottom: .8em; }
.kompass .leiste-name .leiste-wort { display: block; font-size: 22px; letter-spacing: -.01em;
  text-transform: none; color: var(--auf-marke); margin-bottom: 2px; }
.kompass .leiste-name .leiste-zusatz { display: block; }

/* ---------------------------------------------------------------------------
   🆕 12.10.2026 · DIE KUNDENLEISTE (Drehscheibe Schritt 5, E-090)
   Schmal, unter dem Seitenpfad, über dem Weg zurück. Der aktuelle Absprung
   trägt `aria-current="page"` - hervorgehoben in Schrift UND Unterstrich,
   nicht nur in Farbe. Auf dem Handy (< 760 px) ein Aufklapper statt der
   Leiste, damit der Rumpf nie waagerecht scrollt.
   --------------------------------------------------------------------------- */
.kompass .kunde-leiste {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--a1) var(--a4);
  margin: 0 0 var(--a4); padding: var(--a2) var(--a3);
  border: 1px solid var(--linie); border-radius: var(--r2);
  background: var(--flaeche); font-size: var(--t2); min-width: 0;
}
.kompass .kunde-leiste a { color: var(--akzent-text); text-decoration: none; }
.kompass .kunde-leiste a:hover { text-decoration: underline; }
.kompass .kunde-leiste a:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }
.kompass .kunde-leiste a.kunde-leiste-name { font-weight: var(--fett); color: var(--text); overflow-wrap: anywhere; }
.kompass .kunde-leiste ul { list-style: none; margin: 0; padding: 0; }
.kompass .kunde-leiste-spruenge { display: flex; flex-wrap: wrap; gap: var(--a1) var(--a4); }
.kompass .kunde-leiste a[aria-current="page"] {
  color: var(--text); font-weight: var(--fett-halb);
  text-decoration: underline; text-underline-offset: 3px;
}
.kompass .kunde-leiste-klein { display: none; }
.kompass .kunde-leiste-klein > summary { cursor: pointer; color: var(--akzent-text); font-weight: var(--fett-halb); }
.kompass .kunde-leiste-klein > summary { list-style: none; }
.kompass .kunde-leiste-klein > summary::-webkit-details-marker { display: none; }
.kompass .kunde-leiste-klein ul { display: grid; gap: var(--a2); margin-top: var(--a2); }

@media (max-width: 760px) {
  .kompass .kunde-leiste-spruenge { display: none; }
  .kompass .kunde-leiste-klein { display: block; }
}

@media print {
  .kompass .kunde-leiste { display: none; }
}

/* ---------------------------------------------------------------------------
   🆕 13.10.2026 · DIE ASSISTENTIN (ki-assistentin Schritt 5, E-091 W3)
   🆕 15.10.2026 · nach dem Entwurf `marke/plattform-entwurf/codex/abgleich/leiste/`
   (Schritte 16, 17, 19): Kopf, Gespräch, Eingabe fest unten. Am Rechner liegt
   sie rechts ÜBER der Seite, ohne Schleier - die Seite darunter verschiebt sich
   nicht und bleibt bedienbar. Bis 1100 px ist sie ein Dialog mit Schleier.
   Das Etikett steht vor dem Text, in Schrift, nicht nur in Farbe.
   🔴 Kein Bordeaux (`--akzent`) und kein Rot in der Leiste - Links, Stern und
      Fokus in `--blau`, Hinweise neutral (`--linie-bedien`).
   --------------------------------------------------------------------------- */
.kompass .ki-knopf .ki-stern { color: var(--blau); font-size: var(--t4); line-height: 1; }
.kompass .ki-leiste {
  position: fixed; inset: var(--k-ki-oben, 0) 0 0 auto; z-index: 70;
  width: var(--k-aside-wide); max-width: 100%; height: auto; max-height: none;
  margin: 0; padding: 0; overflow: hidden;
  border: 0; border-left: 1px solid var(--linie); border-radius: 0;
  background: var(--papier); color: var(--text); box-shadow: none;
}
.kompass .ki-leiste[open] { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; }
.kompass .ki-leiste::backdrop { background: var(--schleier); }
.kompass .ki-leiste-kopf { padding: var(--a4); border-bottom: 1px solid var(--linie); background: var(--flaeche); }
.kompass .ki-leiste-kopfzeile { display: flex; align-items: center; justify-content: space-between; gap: var(--a2); }
.kompass .ki-leiste .knopf { border-color: var(--linie-bedien); border-radius: var(--r1); }
.kompass .ki-leiste-zu { font-size: var(--t2); }
/* „Fragen": eigene Knopffläche, im Dunkeln heller als --marke (3:1 zur Eingabefläche). */
.kompass .ki-leiste .knopf.primary, .kompass .ki-leiste .knopf.primary:hover:not(:disabled) {
  background: var(--marke-knopf); border-color: var(--marke-knopf); color: var(--auf-marke);
}
/* Während einer Frage ruht er erkennbar: leise Fläche, leise Schrift (mindestens 4,5:1). */
.kompass .ki-leiste .knopf.primary:disabled {
  background: var(--flaeche-leise); border-color: var(--linie-bedien); color: var(--text-leise); cursor: progress;
}
.kompass .ki-leiste-kopf h2 { margin: 0; font-size: var(--t5); font-weight: var(--fett-halb); }
.kompass .ki-leiste .ki-stern { color: var(--blau); }
.kompass .ki-leiste-hinweis { margin: var(--a2) 0 0; font-size: var(--t2); color: var(--text-leise); }
.kompass .ki-gespraech { min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: var(--a4); scrollbar-gutter: stable; }
.kompass .ki-vorschlaege h3 { margin: var(--a2) 0 var(--a3); font-size: var(--t2); font-weight: var(--k-normal); color: var(--text-leise); }
.kompass .ki-vorschlag-liste { display: grid; gap: var(--a2); }
.kompass .ki-vorschlag { width: 100%; justify-content: start; text-align: left; font-size: var(--t2); }
.kompass .ki-verlauf { display: grid; gap: var(--a5); }
.kompass .ki-verlauf:empty { display: none; }
.kompass .ki-wechsel { display: grid; gap: var(--a3); min-width: 0; }
.kompass .ki-gefragt {
  justify-self: end; width: fit-content; max-width: calc(100% - var(--a4)); margin: 0; padding: var(--a3);
  background: var(--flaeche-leise); color: var(--text); border-radius: var(--r2) var(--r2) var(--r0) var(--r2);
  font-size: var(--t3); overflow-wrap: anywhere;
}
.kompass .ki-verborgen { color: var(--text-leise); font-style: italic; }
.kompass .ki-antwort {
  display: grid; gap: var(--a3); padding: var(--a3); font-size: var(--t3);
  background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--r2);
}
.kompass .ki-antwort p { margin: 0; overflow-wrap: anywhere; }
.kompass .ki-etiketten { display: flex; flex-wrap: wrap; align-items: start; gap: var(--a2); }
.kompass .ki-etikett {
  display: inline-flex; max-width: 100%; padding: var(--a1) var(--a2); border-radius: var(--r1);
  background: var(--flaeche-leise); color: var(--text);
  font-size: var(--t2); font-weight: var(--fett); overflow-wrap: anywhere;
}
.kompass .ki-etikett.ki-quelle { color: var(--text-leise); font-weight: var(--k-normal); }
.kompass .ki-text { max-width: var(--k-copy-max); white-space: pre-line; line-height: var(--zh-weit); }
.kompass .ki-fundstellen, .kompass .ki-weiter { display: grid; gap: var(--a2); font-size: var(--t2); }
.kompass .ki-fundstellen a, .kompass .ki-weiter a { color: var(--blau); overflow-wrap: anywhere; }
.kompass .ki-nachgeschlagen, .kompass .ki-stand, .kompass .ki-vorbild { font-size: var(--t2); color: var(--text-leise); }
.kompass .ki-entwurf, .kompass .ki-absage {
  padding: var(--a3); background: var(--flaeche-leise); color: var(--text);
  border-left: var(--a1) solid var(--linie-bedien); border-radius: var(--r1); font-size: var(--t2);
}
.kompass .ki-absage { margin: 0; overflow-wrap: anywhere; }
.kompass .ki-fortschritt { margin: var(--a4) 0 0; font-size: var(--t2); color: var(--text-leise); }
.kompass .ki-fortschritt strong { color: var(--text); font-weight: var(--fett-halb); }
.kompass .ki-frage { display: grid; gap: var(--a2); padding: var(--a3) var(--a4); background: var(--flaeche); border-top: 1px solid var(--linie); }
.kompass .ki-frage label { font-size: var(--t2); font-weight: var(--fett); }
.kompass .ki-frage textarea { width: 100%; resize: none; min-height: 4.5em; font-size: var(--t2); }
.kompass .ki-frage-knoepfe { display: flex; flex-wrap: wrap; align-items: center; gap: var(--a2); }
.kompass .ki-loeschen {
  justify-self: start; padding: var(--a1) 0; background: none; border: 0; cursor: pointer;
  color: var(--blau); font: inherit; font-size: var(--t2); text-decoration: underline;
}
.kompass .ki-loeschen:disabled { color: var(--text-still); cursor: default; }
.kompass .ki-speicher { font-size: var(--t1); color: var(--text-leise); }

@media (max-width: 1100px) {
  .kompass .ki-leiste {
    inset: var(--a4) 0; margin: auto; width: 100%; max-width: var(--k-dialog-width);
    height: calc(100% - var(--a6)); max-height: calc(100% - var(--a6)); border: 1px solid var(--linie); border-radius: var(--r2);
    box-shadow: var(--h3);
  }
}
@media (prefers-reduced-motion: reduce) { .kompass .ki-leiste * { scroll-behavior: auto; } }

@media print {
  .kompass .ki-knopf, .kompass .ki-leiste { display: none; }
}