/* ============================================================================
   bruecke.css — Brücke zwischen den Klassennamen der Anwendung und Kernel UI.

   Warum es diese Datei gibt statt eines Umbaus von anwendung.js:
   Die Ansichten setzen an einigen hundert Stellen class="card", class="btn bp",
   class="pill pok" und style="color:var(--tx3)". Jede dieser Stellen von Hand auf
   kui-Klassen umzuschreiben wäre ein Eingriff in 281 kB Ansichtslogik — mit dem
   Risiko, dabei Verhalten zu ändern. Stattdessen behalten die Ansichten ihre
   Klassennamen, und diese Datei sagt, wie diese Namen aussehen: ausschließlich in
   Token von Kernel UI, ohne eine einzige eigene Farbe.

   Reihenfolge: kernel-ui.css zuerst, diese Datei danach. Kernel UIs Regeln liegen
   in @layer; diese hier bewusst nicht — unbeschichtete Regeln schlagen jede Schicht.
   Deshalb genügt hier nirgends ein !important.

   Was NICHT hier steht: Farbwerte. Wer eine sucht, sucht in kernel-ui.css.
   ============================================================================ */

/* ---------------------------------------------------------------- 1. Aliase
   Die alten Variablennamen bleiben gültig und zeigen auf Kernel UI. Damit
   übersetzen sich auch alle style="…"-Attribute in den Ansichten mit. */
:root {
  --bg: var(--kui-bg-canvas);
  --sf: var(--kui-bg-raised);
  --el: var(--kui-bg-component);
  --ov: var(--kui-bg-overlay);
  --in: var(--kui-bg-inset);

  --ln:   var(--kui-border-default);
  --lns:  var(--kui-border-subtle);
  --lnst: var(--kui-border-strong);

  --tx:  var(--kui-fg-default);
  --tx2: var(--kui-fg-muted);
  --tx3: var(--kui-fg-subtle);
  --txa: var(--kui-fg-on-accent-solid);

  /* --ac war im alten Blatt beides: Textfarbe UND Füllfarbe. In Kernel UI sind das
     zwei Token, weil eine Füllung, die als Text lesbar wäre, keine Füllung mehr ist.
     Der Alias trägt die textsichere Variante; die fünf Stellen, an denen --ac als
     Fläche gemeint war, stehen unten ausdrücklich (.bp, .m, .bar i, .tli.done). */
  --ac:  var(--kui-fg-accent);
  --ach: var(--kui-fg-link-hover);
  --acd: var(--kui-border-accent);
  --acw: var(--kui-bg-accent-subtle);

  --ok: var(--kui-fg-success);
  --wa: var(--kui-fg-warning);
  --cr: var(--kui-fg-danger);
  --if: var(--kui-fg-info);
  --okw: var(--kui-bg-success-subtle);
  --waw: var(--kui-bg-warning-subtle);
  --crw: var(--kui-bg-danger-subtle);
  --ifw: var(--kui-bg-info-subtle);

  /* Diagrammfarben strikt in Indexreihenfolge — Kernel UI hat acht, die Ansichten
     benutzen vier. */
  --c1: var(--kui-chart-1);
  --c2: var(--kui-chart-2);
  --c3: var(--kui-chart-3);
  --c4: var(--kui-chart-4);

  --rs: var(--kui-radius-control-sm);
  --rm: var(--kui-radius-md);
  --rl: var(--kui-radius-lg);

  --fo: var(--kui-font-sans);
  --mo: var(--kui-font-mono);
}

/* ---------------------------------------------------------------- 2. Grundlage */
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background-color: var(--kui-bg-canvas);
  color: var(--kui-fg-default);
  font-family: var(--kui-font-sans);
  font-size: var(--kui-text-md);
  line-height: var(--kui-text-md-lh);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* Der Akzent ist für vier Dinge da: primäre Aktion, Link, Auswahl, Fokusring.
   Ein Anker, der als Schaltfläche oder Navigationseintrag auftritt, ist keiner
   dieser vier Fälle und behält die Farbe seiner Komponente. */
a:not(.btn):not(.ni):not(.kui-btn):not(.kui-nav__item) {
  color: var(--kui-fg-link); text-decoration: none; cursor: pointer;
}
a:not(.btn):not(.ni):not(.kui-btn):not(.kui-nav__item):hover {
  color: var(--kui-fg-link-hover); text-decoration: underline;
}
a.btn, a.ni, a.kui-btn, a.kui-nav__item { text-decoration: none; cursor: pointer; }

.hide { display: none !important; }

/* Fokus: ein Ring, überall derselbe. */
:focus-visible {
  outline: var(--kui-ring-width) solid var(--kui-ring-color);
  outline-offset: var(--kui-ring-offset);
}

/* ---------------------------------------------------------------- 3. Anmeldung */
#login { min-height: 100vh; display: grid; place-items: center; padding: var(--kui-space-6); }
.lbox {
  width: 22rem;
  background-color: var(--kui-bg-raised);
  border: var(--kui-hairline-default);
  border-radius: var(--kui-radius-xl);
  padding: var(--kui-space-6);
  box-shadow: var(--kui-shadow-md);
}
.lbox .m {
  width: 1.75rem; height: 1.75rem; border-radius: var(--kui-radius-md);
  background-color: var(--kui-bg-accent-solid);
  color: var(--kui-fg-on-accent-solid);
  display: grid; place-items: center;
  font-weight: var(--kui-weight-semibold); font-size: var(--kui-text-sm);
  margin-bottom: var(--kui-space-4);
}
.lbox h1 { font-size: var(--kui-text-lg); line-height: var(--kui-text-lg-lh); margin: 0 0 var(--kui-space-1); font-weight: var(--kui-weight-semibold); }
.lbox p  { color: var(--kui-fg-subtle); font-size: var(--kui-text-sm); margin: 0 0 var(--kui-space-5); }

/* ---------------------------------------------------------------- 4. Rahmen
   Neu gegenüber vorher: eine Kopfleiste über allem. Suche und primäre Aktion
   stehen dort, nicht mehr in der Seitenspalte. */
#app { display: grid; grid-template-rows: auto 1fr; min-height: 100vh; }

#kopf .marke {
  display: grid; place-items: center; flex: none;
  width: 1.375rem; height: 1.375rem; border-radius: var(--kui-radius-sm);
  background-color: var(--kui-bg-accent-solid); color: var(--kui-fg-on-accent-solid);
  font-weight: var(--kui-weight-semibold); font-size: var(--kui-text-2xs);
}
#kopf .markentext { font-weight: var(--kui-weight-semibold); white-space: nowrap; }
#kopf .ksuche { flex: 1 1 auto; min-width: 0; max-width: 22rem; }
#kopf #kopf-suche { min-width: 0; cursor: pointer; }

.rahmen {                                  /* Seitenspalte + Inhalt */
  display: grid;
  grid-template-columns: var(--kui-shell-sidebar-w) minmax(0, 1fr);
  min-width: 0;
}
aside {
  background-color: var(--kui-bg-subtle);
  border-inline-end: var(--kui-hairline-default);
  padding: var(--kui-space-3) var(--kui-space-2);
  position: sticky; top: var(--kui-shell-header-h);
  height: calc(100vh - var(--kui-shell-header-h));
  overflow: auto;
}
.brand { display: none; }                  /* die Marke steht jetzt in der Kopfleiste */

.ni {
  display: flex; align-items: center; gap: var(--kui-gap-inline);
  min-height: var(--kui-menu-item-h);
  padding: 0 var(--kui-space-3);
  border-radius: var(--kui-radius-control-sm);
  color: var(--kui-fg-muted); font-size: var(--kui-text-md);
  cursor: pointer; user-select: none;
}
.ni:hover { background-color: var(--kui-bg-ghost-hover); color: var(--kui-fg-default); }
.ni:active { background-color: var(--kui-bg-ghost-active); }
.ni.on {
  background-color: var(--kui-bg-component-selected);
  color: var(--kui-fg-default);
  font-weight: var(--kui-weight-medium);
  box-shadow: inset 2px 0 0 var(--kui-border-selected);
}
.ni .ic { width: 1rem; text-align: center; flex: none; color: var(--kui-icon-subtle); }
.ni.on .ic { color: var(--kui-fg-accent); }
.ni > span:nth-child(2) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Zähler: neutral, wenn sie nur zählen — rot nur, wenn etwas liegen bleibt. */
.ni .bd {
  margin-left: auto; flex: none;
  background-color: var(--kui-bg-danger-solid); color: var(--kui-fg-on-danger-solid);
  font-size: var(--kui-text-2xs); font-weight: var(--kui-weight-semibold);
  padding: 0 var(--kui-space-1-5); border-radius: var(--kui-radius-full);
  font-variant-numeric: tabular-nums;
}
.ni .bd.g { background-color: transparent; color: var(--kui-fg-subtle); font-weight: var(--kui-weight-normal); }
.nsec {
  font-size: var(--kui-text-2xs); text-transform: uppercase; letter-spacing: var(--kui-text-2xs-ls);
  color: var(--kui-fg-subtle); font-weight: var(--kui-weight-semibold);
  padding: var(--kui-space-4) var(--kui-space-3) var(--kui-space-1);
}

main { padding: var(--kui-gutter-page); max-width: var(--kui-content-max-page); min-width: 0; }
.top {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: var(--kui-space-4); margin-bottom: var(--kui-space-5); flex-wrap: wrap;
}
h1 { font-size: var(--kui-text-xl); line-height: var(--kui-text-xl-lh); letter-spacing: var(--kui-text-xl-ls); margin: 0 0 var(--kui-space-1); font-weight: var(--kui-weight-semibold); }
h2 { font-size: var(--kui-text-md); margin: 0 0 var(--kui-space-1); font-weight: var(--kui-weight-semibold); }
.sub { color: var(--kui-fg-muted); font-size: var(--kui-text-sm); margin: 0; }
.cap { color: var(--kui-fg-subtle); font-size: var(--kui-text-sm); margin: 0 0 var(--kui-space-3); }
.crumb { font-size: var(--kui-text-sm); color: var(--kui-fg-subtle); margin-bottom: var(--kui-space-2); }

/* ---------------------------------------------------------------- 5. Schaltflächen */
.btn {
  font-family: inherit; font-size: var(--kui-text-md); font-weight: var(--kui-weight-medium);
  height: var(--kui-control-h-md); padding: 0 var(--kui-control-px-md);
  border-radius: var(--kui-radius-control-md);
  border: var(--kui-border-width) solid transparent;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--kui-gap-inline);
  line-height: 1; white-space: nowrap; cursor: pointer;
}
.btn:disabled { opacity: var(--kui-opacity-disabled); cursor: not-allowed; }
.bp  { background-color: var(--kui-bg-accent-solid); color: var(--kui-fg-on-accent-solid); font-weight: var(--kui-weight-semibold); }
.bp:hover:not(:disabled)  { background-color: var(--kui-bg-accent-solid-hover); }
.bs  { background-color: var(--kui-bg-component); color: var(--kui-fg-default); border-color: var(--kui-border-default); }
.bs:hover:not(:disabled)  { background-color: var(--kui-bg-component-hover); }
.bg  { background-color: transparent; color: var(--kui-fg-muted); }
.bg:hover:not(:disabled)  { background-color: var(--kui-bg-ghost-hover); color: var(--kui-fg-default); }
.bd2 { background-color: transparent; color: var(--kui-fg-danger); border-color: var(--kui-border-danger); }
.bd2:hover:not(:disabled) { background-color: var(--kui-bg-danger-subtle); }
.btn.sm { height: var(--kui-control-h-sm); padding: 0 var(--kui-control-px-sm); font-size: var(--kui-text-sm); }

/* ---------------------------------------------------------------- 6. Flächen */
.card {
  background-color: var(--kui-bg-raised);
  border: var(--kui-hairline-default);
  border-radius: var(--kui-radius-lg);
  padding: var(--kui-pad-card);
}
.grid { display: grid; gap: var(--kui-space-3); }
.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* Kennzahl: Etikett, Wert, Zusatz. */
.kl { font-size: var(--kui-text-xs); text-transform: uppercase; letter-spacing: var(--kui-text-xs-ls); color: var(--kui-fg-subtle); margin-bottom: var(--kui-space-2); }
.kv { font-size: var(--kui-text-2xl); line-height: var(--kui-text-2xl-lh); letter-spacing: var(--kui-text-2xl-ls); font-weight: var(--kui-weight-semibold); font-variant-numeric: tabular-nums; }
.kd { font-size: var(--kui-text-sm); color: var(--kui-fg-muted); margin-top: var(--kui-space-1); }

/* ---------------------------------------------------------------- 7. Tabellen
   Zeilenhöhe und Innenabstand kommen aus der Dichte, nicht aus dieser Datei.
   Damit folgt jede Tabelle dem Umschalter in der Kopfleiste. */
table { width: 100%; border-collapse: collapse; font-size: var(--kui-text-sm); }
th, td { font-variant-numeric: var(--kui-font-feature-numeric); }
th {
  text-align: left; font-size: var(--kui-text-xs); text-transform: uppercase;
  letter-spacing: var(--kui-text-xs-ls); color: var(--kui-fg-muted);
  font-weight: var(--kui-weight-semibold);
  height: var(--kui-row-h-header);
  padding: 0 var(--kui-row-px) 0 0;
  border-bottom: var(--kui-hairline-strong);
  white-space: nowrap;
}
thead th { position: sticky; top: 0; z-index: var(--kui-z-sticky); background-color: var(--kui-bg-raised); }
td {
  height: var(--kui-row-h); padding: 0 var(--kui-row-px) 0 0;
  border-bottom: var(--kui-hairline);
  color: var(--kui-fg-muted); vertical-align: middle;
}
tbody tr:hover td { background-color: var(--kui-bg-ghost-hover); }
td.n, th.n { text-align: right; white-space: nowrap; }
td.s { color: var(--kui-fg-default); font-weight: var(--kui-weight-medium); }

th.sort { cursor: pointer; user-select: none; }
th.sort:hover { color: var(--kui-fg-default); }
th.sort.auf, th.sort.ab { color: var(--kui-fg-accent); }
th.sort.auf::after { content: " ▲"; }
th.sort.ab::after  { content: " ▼"; }

/* „dicht“ war eine eigene Zeilenhöhe. Jetzt ist es dieselbe Mechanik wie der
   Dichteumschalter, nur auf eine Tabelle begrenzt. */
.dicht { --kui-row-h: var(--kui-control-h-xs); }
.dicht td .hint { display: none; }

/* Zustand als Form, nicht nur als Wort. */
tr.zst td:first-child { box-shadow: inset 3px 0 0 var(--kui-border-strong); }
tr.z-ok td:first-child { box-shadow: inset 3px 0 0 var(--kui-border-success); }
tr.z-wa td:first-child { box-shadow: inset 3px 0 0 var(--kui-border-warning); }
tr.z-cr td:first-child { box-shadow: inset 3px 0 0 var(--kui-border-danger); }
tr.z-if td:first-child { box-shadow: inset 3px 0 0 var(--kui-border-info); }
.rowlink { cursor: pointer; }

.mono { font-family: var(--kui-font-mono); font-size: var(--kui-text-xs); }

/* ---------------------------------------------------------------- 8. Marken */
.pill {
  display: inline-flex; align-items: center; gap: var(--kui-space-1-5);
  font-size: var(--kui-text-xs); font-weight: var(--kui-weight-medium);
  padding: 0 var(--kui-space-2); min-height: var(--kui-control-h-xs);
  border-radius: var(--kui-radius-full); white-space: nowrap;
  border: var(--kui-border-width) solid transparent;
}
.pok { background-color: var(--kui-bg-success-subtle); color: var(--kui-fg-success); border-color: var(--kui-border-success); }
.pwa { background-color: var(--kui-bg-warning-subtle); color: var(--kui-fg-warning); border-color: var(--kui-border-warning); }
.pcr { background-color: var(--kui-bg-danger-subtle);  color: var(--kui-fg-danger);  border-color: var(--kui-border-danger); }
.pif { background-color: var(--kui-bg-info-subtle);    color: var(--kui-fg-info);    border-color: var(--kui-border-info); }
.pmu { background-color: var(--kui-bg-neutral-muted);  color: var(--kui-fg-muted);   border-color: var(--kui-border-default); }
.dot { width: 6px; height: 6px; border-radius: var(--kui-radius-full); background-color: currentColor; flex: none; }

/* ---------------------------------------------------------------- 9. Reiter, Filter */
.tabs {
  display: flex; gap: var(--kui-space-0-5);
  border-bottom: var(--kui-hairline-default);
  margin-bottom: var(--kui-space-4); flex-wrap: wrap;
  /* Platz für den Indikator, sonst schneidet er unten ab. */
  padding-bottom: var(--kui-space-px);
}
.tab {
  padding: 0 var(--kui-space-3); height: var(--kui-control-h-md);
  display: inline-flex; align-items: center;
  font-size: var(--kui-text-md); color: var(--kui-fg-muted); cursor: pointer;
  border-bottom: var(--kui-border-width-emphasis) solid transparent;
  margin-bottom: calc(-1 * var(--kui-border-width)); user-select: none;
}
.tab:hover { color: var(--kui-fg-default); }
.tab.on { color: var(--kui-fg-default); border-bottom-color: var(--kui-border-selected); font-weight: var(--kui-weight-medium); }
.filters { display: flex; gap: var(--kui-gap-field); margin-bottom: var(--kui-space-3); flex-wrap: wrap; align-items: center; }

/* ---------------------------------------------------------------- 10. Eingaben */
.inp, select.inp, textarea.inp {
  width: 100%; font-family: inherit; font-size: var(--kui-text-md);
  color: var(--kui-fg-default); background-color: var(--kui-bg-component);
  border: var(--kui-border-width) solid var(--kui-border-input);
  border-radius: var(--kui-radius-control-md);
  height: var(--kui-control-h-md); padding: 0 var(--kui-control-px-md);
  outline: none;
}
select.inp { cursor: pointer; }
textarea.inp { resize: vertical; min-height: 4rem; height: auto; padding: var(--kui-space-2) var(--kui-control-px-md); line-height: var(--kui-text-md-lh); }
.inp:hover:not(:disabled) { border-color: var(--kui-border-input-hover); }
.inp:focus, .inp:focus-visible {
  border-color: var(--kui-border-accent);
  outline: var(--kui-ring-width) solid var(--kui-ring-color);
  outline-offset: 0;
}
.inp::placeholder { color: var(--kui-fg-subtle); }
.inp:disabled { background-color: var(--kui-bg-component-disabled); color: var(--kui-fg-disabled); border-color: var(--kui-border-disabled); }

.fld { margin-bottom: var(--kui-gap-field); }
.fld label { display: block; font-size: var(--kui-text-sm); color: var(--kui-fg-default); margin-bottom: var(--kui-space-1-5); font-weight: var(--kui-weight-medium); }
.hint { font-size: var(--kui-text-xs); color: var(--kui-fg-subtle); }

.chip {
  background-color: var(--kui-bg-component);
  border: var(--kui-border-width) solid var(--kui-border-default);
  border-radius: var(--kui-radius-full);
  min-height: var(--kui-control-h-sm); padding: 0 var(--kui-space-3);
  display: inline-flex; align-items: center;
  font-size: var(--kui-text-sm); color: var(--kui-fg-muted);
  cursor: pointer; user-select: none;
}
.chip:hover { background-color: var(--kui-bg-component-hover); color: var(--kui-fg-default); }
.chip.on { background-color: var(--kui-bg-component-selected); border-color: var(--kui-border-selected); color: var(--kui-fg-default); }

/* Warnkasten = Alarm in Gefahrenfarbe. */
.warnbox {
  background-color: var(--kui-bg-danger-subtle);
  border: var(--kui-border-width) solid var(--kui-border-danger);
  border-radius: var(--kui-radius-md);
  padding: var(--kui-space-3) var(--kui-space-3-5, var(--kui-space-4));
  font-size: var(--kui-text-sm); color: var(--kui-fg-default);
  margin-bottom: var(--kui-space-4);
}
.warnbox b { color: var(--kui-fg-danger); }

/* ---------------------------------------------------------------- 11. Bilder */
.thumb {
  background-color: var(--kui-bg-inset);
  background-image: repeating-linear-gradient(135deg, var(--kui-alpha-2) 0 8px, transparent 8px 16px);
  border: var(--kui-hairline);
  border-radius: var(--kui-radius-sm);
  display: grid; place-items: center;
  color: var(--kui-fg-subtle); font-size: var(--kui-text-2xs);
  overflow: hidden; flex: none;
}
.thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

.gal { display: flex; flex-direction: column; gap: var(--kui-space-2); }
.gal .gross {
  width: 100%; aspect-ratio: 1 / 1; border-radius: var(--kui-radius-md); overflow: hidden;
  background-color: var(--kui-bg-inset); border: var(--kui-hairline-default);
  display: grid; place-items: center; cursor: zoom-in;
}
.gal .gross img { width: 100%; height: 100%; object-fit: cover; }
.gal .reihe { display: flex; gap: var(--kui-space-1-5); overflow-x: auto; padding-bottom: var(--kui-space-0-5); }
.gal .reihe button {
  flex: none; width: 3.25rem; height: 3.25rem; padding: 0;
  border-radius: var(--kui-radius-sm); overflow: hidden;
  border: var(--kui-border-width) solid var(--kui-border-default);
  background-color: var(--kui-bg-inset); cursor: pointer;
}
.gal .reihe button.on { border-color: var(--kui-border-selected); box-shadow: var(--kui-shadow-ring); }
.gal .reihe img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gal .leer { color: var(--kui-fg-subtle); font-size: var(--kui-text-xs); text-align: center; padding: var(--kui-space-5) var(--kui-space-3); }

.bar { height: 5px; background-color: var(--kui-bg-component); border-radius: var(--kui-radius-full); overflow: hidden; }
.bar i { display: block; height: 100%; border-radius: var(--kui-radius-full); background-color: var(--kui-bg-accent-solid); }

/* ---------------------------------------------------------------- 12. Verlauf */
.tl { position: relative; padding-left: var(--kui-space-6); }
.tl::before { content: ""; position: absolute; left: 5px; top: 6px; bottom: 8px; width: var(--kui-border-width); background-color: var(--kui-border-strong); }
.tli { position: relative; padding-bottom: var(--kui-space-4); }
.tli::before {
  content: ""; position: absolute; left: -22px; top: 5px; width: 9px; height: 9px;
  border-radius: var(--kui-radius-full);
  background-color: var(--kui-bg-raised);
  border: var(--kui-border-width-emphasis) solid var(--kui-border-default);
}
.tli.done::before { background-color: var(--kui-bg-accent-solid); border-color: var(--kui-accent-border); }
.tli.miss::before { border-color: var(--kui-border-danger); }
.tli .t { font-size: var(--kui-text-md); color: var(--kui-fg-default); font-weight: var(--kui-weight-medium); }
.tli .d { font-size: var(--kui-text-xs); color: var(--kui-fg-subtle); margin-top: var(--kui-space-0-5); }

/* ---------------------------------------------------------------- 13. Seitenpanel */
#panel {
  position: fixed; top: 0; right: 0; z-index: var(--kui-z-modal);
  width: var(--kui-shell-drawer-w); max-width: 100vw; height: 100vh;
  background-color: var(--kui-surface-overlay);
  border-inline-start: var(--kui-hairline-default);
  box-shadow: var(--kui-shadow-xl);
  padding: var(--kui-pad-panel);
  overflow: auto;
  translate: 100% 0;
  transition: translate var(--kui-dur-5) var(--kui-ease-emphasized);
}
#panel.on { translate: 0 0; }
#scrim, #vscrim {
  position: fixed; inset: 0; background-color: var(--kui-bg-scrim);
  opacity: 0; pointer-events: none;
  transition: opacity var(--kui-motion-enter-md);
}
#scrim  { z-index: var(--kui-z-overlay); }
#vscrim { z-index: var(--kui-z-overlay); }
#scrim.on, #vscrim.on { opacity: 1; pointer-events: auto; }

.phead { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--kui-gap-inline); margin-bottom: var(--kui-space-5); }
.phead h3 { margin: 0; font-size: var(--kui-text-lg); font-weight: var(--kui-weight-semibold); }
.x {
  background: none; border: none; color: var(--kui-icon-muted);
  font-size: var(--kui-text-xl); line-height: 1; cursor: pointer;
  min-width: var(--kui-target-min); min-height: var(--kui-target-min);
  display: inline-grid; place-items: center;
  border-radius: var(--kui-radius-control-sm);
}
.x:hover { color: var(--kui-fg-default); background-color: var(--kui-bg-ghost-hover); }

/* ---------------------------------------------------------------- 14. Dokumentanzeige */
#viewer {
  position: fixed; inset: 4vh 5vw; z-index: var(--kui-z-modal);
  background-color: var(--kui-surface-overlay);
  border: var(--kui-hairline-default);
  border-radius: var(--kui-radius-xl);
  box-shadow: var(--kui-shadow-xl);
  display: none; flex-direction: column;
  padding: var(--kui-space-4) var(--kui-space-5);
}
#viewer.on { display: flex; }
.vhead { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--kui-space-4); margin-bottom: var(--kui-space-3); }
.vt { font-size: var(--kui-text-lg); font-weight: var(--kui-weight-semibold); color: var(--kui-fg-default); }
.vframe {
  flex: 1; width: 100%; min-height: 0;
  border: var(--kui-hairline-default); border-radius: var(--kui-radius-lg);
  background-color: var(--kui-bg-inset);
}

/* ---------------------------------------------------------------- 15. Hinweis */
#toast {
  position: fixed; bottom: var(--kui-space-6); left: 50%; z-index: var(--kui-z-toast);
  background-color: var(--kui-surface-overlay-2, var(--kui-bg-overlay-2));
  border: var(--kui-hairline-default); border-radius: var(--kui-radius-md);
  box-shadow: var(--kui-shadow-lg);
  padding: var(--kui-space-3) var(--kui-space-4);
  font-size: var(--kui-text-md); color: var(--kui-fg-default);
  translate: -50% var(--kui-space-16); opacity: 0; pointer-events: none;
  transition: translate var(--kui-motion-enter-md), opacity var(--kui-motion-enter-md);
}
#toast.on { translate: -50% 0; opacity: 1; pointer-events: auto; }
#toast.err { border-color: var(--kui-border-danger); color: var(--kui-fg-danger); }
#toast.ok  { border-color: var(--kui-border-success); }

/* ---------------------------------------------------------------- 16. Diagramme */
svg { display: block; width: 100%; }
.tick { font-size: var(--kui-text-2xs); fill: var(--kui-chart-label); }
.gl { stroke: var(--kui-chart-grid); stroke-width: 1; }

/* ---------------------------------------------------------------- 17. Leerzustand, Warten */
.empty { text-align: center; padding: var(--kui-space-10) var(--kui-space-5); color: var(--kui-fg-subtle); }
.spin {
  width: 15px; height: 15px; display: inline-block;
  border: var(--kui-border-width-emphasis) solid var(--kui-border-default);
  border-top-color: var(--kui-fg-accent);
  border-radius: var(--kui-radius-full);
  animation: sp var(--kui-dur-spinner) var(--kui-ease-linear) infinite;
}
@keyframes sp { to { transform: rotate(360deg); } }

/* ---------------------------------------------------------------- 18. Hilfsklassen */
.mt-s { margin-top: var(--kui-space-1); }
.mt { margin-top: var(--kui-space-2); }
.mt-l { margin-top: var(--kui-space-3); }
.mt-xl { margin-top: var(--kui-space-4); }
.mb { margin-bottom: var(--kui-space-2); }
.mb-l { margin-bottom: var(--kui-space-3); }
.g-s { gap: var(--kui-gap-field); }
.g-m { gap: var(--kui-gap-inline); }
.zeile { display: flex; align-items: center; gap: var(--kui-gap-inline); flex-wrap: wrap; }
.zeile-o { display: flex; align-items: flex-start; gap: var(--kui-gap-inline); flex-wrap: wrap; }
.verteilt { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--kui-gap-inline); flex-wrap: wrap; }
.knopfzeile { display: flex; gap: var(--kui-gap-field); margin-top: var(--kui-space-4); flex-wrap: wrap; }
.eng { min-width: 0; }
.nowrap { white-space: nowrap; }
.fehlt { color: var(--kui-fg-danger); }
.warn { color: var(--kui-fg-warning); }
.gut { color: var(--kui-fg-success); }
.liste { padding: var(--kui-pad-card) var(--kui-pad-card) var(--kui-space-1); }
.gruppe { border-top: var(--kui-hairline-default); margin: var(--kui-space-1-5) 0 var(--kui-space-4); padding-top: var(--kui-space-4); }
.gruppe > .kl { margin-bottom: var(--kui-space-3); }

/* ---------------------------------------------------------------- 19. Schmal */
@media (max-width: 1000px) {
  .g2, .g3, .g4 { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 860px) {
  #kopf { flex-wrap: wrap; height: auto; padding-block: var(--kui-space-2); }
  #kopf .ksuche { order: 9; max-width: none; flex-basis: 100%; }
  .rahmen { grid-template-columns: minmax(0, 1fr); }
  aside {
    position: fixed; bottom: 0; top: auto; height: auto; width: 100%;
    display: flex; gap: var(--kui-space-0-5); overflow-x: auto;
    padding: var(--kui-space-1-5);
    border-inline-end: none; border-block-start: var(--kui-hairline-default);
    background-color: var(--kui-surface-raised);
    z-index: var(--kui-z-sticky);
  }
  .nsec { display: none; }
  .ni { position: relative; flex-direction: column; gap: var(--kui-space-0-5); font-size: var(--kui-text-2xs); padding: var(--kui-space-1-5) var(--kui-space-2); white-space: nowrap; min-height: 3.25rem; justify-content: center; }
  .ni .bd { margin-left: 0; position: absolute; top: 2px; right: 4px; }
  main { padding: var(--kui-space-4) var(--kui-space-3) var(--kui-space-24); }
  #panel { width: 100vw; }
  .grid { grid-template-columns: minmax(0, 1fr); }
  .hide-s { display: none; }
  th { white-space: normal; }
  #viewer { inset: 0; border-radius: 0; padding: var(--kui-space-3); }
}
@media (max-width: 640px) {
  /* Fingerkuppen sind breiter als Mauszeiger. */
  .btn { height: var(--kui-control-h-lg); padding: 0 var(--kui-control-px-lg); }
  .btn.sm { height: var(--kui-control-h-md); }
  .chip { min-height: var(--kui-control-h-md); }
  /* 16 px verhindert das Zoomen beim Fokus auf iOS. */
  .inp, select.inp, textarea.inp { font-size: 1rem; height: var(--kui-control-h-lg); }
  textarea.inp { height: auto; }
  .grid.g2, .grid.g3, .grid.g4 { grid-template-columns: minmax(0, 1fr); }
  .liste { padding: var(--kui-space-3) var(--kui-space-3) var(--kui-space-1); }
}
@media (max-width: 420px) {
  thead th { font-size: var(--kui-text-2xs); letter-spacing: 0; }
}
@media (prefers-reduced-motion: reduce) {
  #panel, #toast { transition-duration: var(--kui-dur-0); }
  .spin { animation-duration: 1.4s; }
}

/* ---------------------------------------------------------------- 20. Druck
   Beim Drucken fällt alles weg, was nur zum Bedienen da ist. Die Ausgabe ist
   schwarz auf weiß — Token für Bildschirmflächen haben hier nichts zu suchen. */
@media print {
  @page { margin: 14mm; }
  body { background: #fff; color: #000; font-size: 10.5pt; }
  #kopf, aside, #panel, #scrim, #viewer, #vscrim, #toast,
  .filters, .tabs, .btn, .chip, .x, .kui-segmented, .kui-input-group { display: none !important; }
  #app, .rahmen { display: block; }
  main { padding: 0; max-width: none; }
  .card { border: 1px solid #bbb; border-radius: 0; padding: 8px 10px; margin-bottom: 8px; background: #fff; break-inside: avoid; }
  h1 { font-size: 15pt; color: #000; }
  h2, .kl, .kv, .sub, .cap, .hint { color: #000; }
  .hint, .cap { font-size: 9pt; }
  table { font-size: 9.5pt; }
  th { color: #000; border-bottom: 1px solid #000; }
  td { color: #000; border-bottom: 1px solid #ddd; height: auto; padding: 3px 8px 3px 0; }
  thead th { position: static; background: #fff; }
  tbody tr:hover td { background: none; }
  tr { break-inside: avoid; }
  thead { display: table-header-group; }
  .pill { border: 1px solid #999; background: #fff !important; color: #000 !important; }
  .thumb, .gal, svg { display: none; }
  a { color: #000; text-decoration: none; }
  .liste::after { content: "UhrKnall Zentrale · gedruckt am " attr(data-druckdatum); display: block; font-size: 8pt; color: #555; padding: 6px 0; }
}