/* Oberflaeche. Baut ausschliesslich auf tokens.css auf.
 *
 * Gegen den Vorzustand: keine bunten Nav-Pillen, keine unterstrichenen Titel,
 * keine dicken Farbraender an Spalten und Karten, keine Emoji. Farbe markiert
 * Bedeutung, nicht Struktur. Zielbild: Notion, Capacities, Craft.
 */

*, *::before, *::after { box-sizing: border-box; }

/* Ein display-Wert im Stylesheet schlaegt sonst das hidden-Attribut.
   Genau dadurch stand das Entity-Eingabefeld im Datums-Dialog. */
[hidden] { display: none !important; }

body {
  margin: 0;
  font-family: var(--font-ui);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  background: var(--bg);
  color: var(--fg);
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--r-1); }

/* --- App-Rahmen und einklappbare Objekt-Navigation ------------------- */
.app-shell { min-height: 100vh; display: grid; grid-template-columns: 220px minmax(0, 1fr); }
.app-stage { min-width: 0; }
.app-sidebar {
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
  padding: var(--s-3) var(--s-2); background: var(--surface-1);
  border-right: 1px solid var(--line);
}
.sidebar-head { display: flex; align-items: center; gap: var(--s-1); margin-bottom: var(--s-3); }
.sidebar-brand { flex: 1; padding: var(--s-2); color: var(--fg-strong); font-size: var(--fs-md); font-weight: 650; }
.sidebar-toggle { width: 28px; padding: var(--s-1); color: var(--fg-subtle); }
.sidebar-new {
  display: block; margin-bottom: var(--s-3); padding: var(--s-2);
  border-radius: var(--r-2); background: var(--accent); color: var(--on-accent); font-weight: 600;
}
.app-sidebar nav { display: grid; gap: 2px; }
.sidebar-link { padding: 6px var(--s-2); border-radius: var(--r-2); color: var(--fg-muted); }
.sidebar-link:hover, .sidebar-link.active { background: var(--surface-3); color: var(--fg-strong); }
.sidebar-label {
  margin: var(--s-4) var(--s-2) var(--s-1); color: var(--fg-subtle);
  font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: var(--tracking-label);
}
.sidebar-collapsed .app-shell { grid-template-columns: 48px minmax(0, 1fr); }
.sidebar-collapsed .app-sidebar { padding-inline: var(--s-1); overflow: hidden; }
/* Eingeklappt bleibt nur der Aufklapp-Knopf. Der Melde-Link war beim
   Einbau in Phase E vergessen worden und ragte sichtbar heraus - Moritz'
   Meldung "seitenlsiete links geschlossen sieht man trotzdem Befund melden". */
.sidebar-collapsed .app-sidebar .sidebar-brand,
.sidebar-collapsed .app-sidebar .sidebar-new,
.sidebar-collapsed .app-sidebar .sidebar-report,
.sidebar-collapsed .app-sidebar nav { display: none; }
.sidebar-collapsed .sidebar-head { justify-content: center; }
.sidebar-collapsed .sidebar-toggle { transform: rotate(180deg); }

/* --- Kopfzeile ------------------------------------------------------- */

header {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  flex-wrap: wrap;
  padding: var(--s-2) var(--s-4);
  background: var(--surface-1);
  border-bottom: 1px solid var(--line);
}

.nav-links { display: flex; gap: var(--s-1); align-items: center; flex-wrap: wrap; }
.mobile-menu { display: none; }

/* Vorher fuenf gefuellte Pillen, zwei mit Inline-Hintergrund. Jetzt ruhige
   Labels; die aktive Seite traegt einen 2-px-Unterstrich. */
.nav-btn {
  padding: var(--s-1) var(--s-2);
  font-size: var(--fs-base);
  color: var(--fg-muted);
  border-radius: var(--r-1);
  border-bottom: 2px solid transparent;
  transition: color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.nav-btn:hover { color: var(--fg); background: var(--surface-3); }
.nav-btn.active { color: var(--fg-strong); border-bottom-color: var(--accent); }

/* Genau ein gefuellter Button auf der Seite. */
.nav-btn.primary { background: var(--accent); color: var(--on-accent); font-weight: 500; }
.nav-btn.primary:hover { background: var(--accent); filter: brightness(1.08); }

.search-form { display: flex; gap: var(--s-1); margin-left: auto; }

input, select, textarea, button {
  font-family: inherit;
  font-size: var(--fs-base);
  color: var(--fg);
  background: var(--surface-1);
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  padding: var(--s-1) var(--s-2);
}
input:hover, select:hover { border-color: var(--line-strong); }
button { cursor: pointer; background: var(--surface-3); }
button:hover { background: var(--surface-4); }
button[type="submit"] { background: var(--accent); color: var(--on-accent); border-color: transparent; font-weight: 500; }

.btn-xs { font-size: var(--fs-sm); padding: 2px var(--s-2); }

main { max-width: var(--measure-app); margin: 0 auto; padding: var(--s-4); }

.app-toast {
  position: fixed; right: var(--s-4); bottom: var(--s-4); z-index: 1000;
  min-width: 220px; padding: var(--s-3) var(--s-4);
  border: 1px solid var(--line-strong); border-radius: var(--r-3);
  background: var(--surface-4); box-shadow: var(--shadow-pop); color: var(--fg-strong);
}
.app-toast.success { border-left: 3px solid var(--ok); }
.app-toast.error { border-left: 3px solid var(--danger); }

/* --- Karten und Abschnitte ------------------------------------------- */

.card {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r-3);
  padding: var(--s-4);
  margin-bottom: var(--s-4);
}
.card h2 { margin: 0 0 var(--s-3); font-size: var(--fs-lg); font-weight: 600; color: var(--fg-strong); }

/* Abschnittstitel: Mikrolabel statt Linie. */
.status-section-title, .subgroup-title, .col-header {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--fg-subtle);
  margin: var(--s-4) 0 var(--s-2);
  border: 0;
  padding: 0;
}
.col-count, .count-chip {
  font-size: var(--fs-micro);
  color: var(--fg-subtle);
  background: var(--surface-3);
  border-radius: var(--r-full);
  padding: 0 var(--s-2);
  letter-spacing: 0;
}

/* --- Kanban ----------------------------------------------------------- */

.kanban-grid, .kanban-board, .kanban { display: flex; gap: var(--s-3); align-items: flex-start; overflow-x: auto; padding-bottom: var(--s-2); }
.kanban-col, .status-column {
  flex: 1 1 0;
  min-width: 220px;
  background: var(--surface-1);
  border: 1px solid var(--line);
  border-radius: var(--r-3);
  padding: var(--s-3);
}
.kanban-col.drag-over, .status-column.drag-over { border-color: var(--accent-border); background: var(--accent-soft); }

/* Status wird ein Punkt statt eines 3-px-Farbrandes an der Spalte. */
.col-dot { width: 6px; height: 6px; border-radius: var(--r-full); flex: 0 0 auto; }

.kanban-subgroup {
  margin-bottom: var(--s-3);
  background: var(--surface-2);
  border-radius: var(--r-2);
  padding: var(--s-2);
  border: 1px solid var(--line);
}
.subgroup-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--s-2);
  border-bottom: 1px dashed var(--line);
  padding-bottom: 4px;
}
.subgroup-header h4 {
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--fg-muted);
  margin: 0;
}
.subgroup-count {
  font-size: 0.7rem;
  background: var(--surface-3);
  border-radius: var(--r-full);
  padding: 0 6px;
  color: var(--fg-muted);
}

/* --- Zeilen und Karten ------------------------------------------------ */

.task-card {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  padding: var(--s-2);
  margin-bottom: var(--s-1);
  transition: border-color var(--dur) var(--ease);
}
.task-card:hover { border-color: var(--line-strong); }

/* Titel: kein Unterstrich mehr. Die Akzentfarbe bleibt dem Fliesstext. */
.task-card .wikilink, .card-title, .ultracompact-title a {
  font-size: var(--fs-base);
  font-weight: 500;
  color: var(--fg);
  line-height: var(--lh-tight);
  text-decoration: none;
  /* Vorher schnitt ellipsis mitten im Wort ab. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.task-card .wikilink:hover { text-decoration: underline; text-decoration-color: var(--line-strong); }

.card-meta, .card-props, .task-props { display: flex; flex-wrap: wrap; gap: var(--s-1); align-items: center; margin-top: var(--s-1); }

/* --- Chips ------------------------------------------------------------ */

.property-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  font-size: var(--fs-sm);
  line-height: 1.4;
  padding: 1px var(--s-2);
  border-radius: var(--r-full);
  border: 1px solid var(--line);
  background: var(--surface-3);
  color: var(--fg-muted);
  max-width: 24ch;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  /* Ellipsis braucht bei inline-flex einen inneren Textknoten; das
     Mask-Fade erreicht dasselbe ohne Markup-Aenderung an den Altviews. */
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 12px), transparent 100%);
  mask-image: linear-gradient(90deg, #000 calc(100% - 12px), transparent 100%);
}
.property-chip:hover { border-color: var(--line-strong); color: var(--fg); }
/* Leere Eigenschaften sind eine Affordanz, kein Inhalt. Dauerhaft sichtbar
   erzeugen sie auf 2000 Karten nur Rauschen - wie in Notion erscheinen sie
   erst beim Hovern oder per Tastaturfokus. */
.property-chip.ghost,
.property-chip.property-edit {
  background: transparent;
  color: var(--fg-subtle);
  border-style: dashed;
  opacity: 0;
  max-width: 0;
  padding-inline: 0;
  border-width: 0;
  overflow: hidden;
  transition: opacity var(--dur) var(--ease);
}
.task-card:hover .property-chip.ghost,
.task-card:hover .property-chip.property-edit,
.task-card:focus-within .property-chip.ghost,
.task-card:focus-within .property-chip.property-edit,
.property-chip.ghost:focus-visible,
.property-chip.property-edit:focus-visible {
  opacity: 1;
  max-width: 24ch;
  padding-inline: var(--s-2);
  border-width: 1px;
}
.property-chip.entity { background: var(--accent-soft); color: var(--accent); border-color: transparent; }
.property-chip.relation-chip {
  background: var(--relation-soft);
  color: var(--relation);
  border-color: var(--relation-border);
}
.property-chip.tag-chip {
  background: var(--tag-soft);
  color: var(--tag);
  border-color: var(--tag-border);
}
.property-chip.more { background: transparent; color: var(--fg-subtle); }
.property-chip.property-edit { background: transparent; color: var(--fg-subtle); border-style: dashed; }

/* Prioritaet und Status: farbiger Punkt, nicht gefuellte Flaeche.
 *
 * `display: inline-block` ist noetig, nicht Kosmetik: im Kanban sind die Chips
 * `inline-block` (damit `text-overflow: ellipsis` wirkt), und in einem
 * nicht-flexiblen Elternteil haben Breite und Hoehe auf einem Inline-Element
 * keine Wirkung - der Punkt verschwand ersatzlos. In Flex-Eltern bleibt
 * `flex: 0 0 auto` weiter zustaendig. */
.property-chip[class*="prio-"]::before,
.status-chip::before {
  content: "";
  display: inline-block;
  vertical-align: middle;
  width: 6px; height: 6px;
  margin-right: 0.4em;
  border-radius: var(--r-full);
  flex: 0 0 auto;
  background: currentColor;
}
/* In Flex-Chips traegt schon `gap` den Abstand. */
.card-meta .property-chip[class*="prio-"]::before,
.card-meta .status-chip::before { margin-right: 0; }
.kanban-col .card-meta .property-chip[class*="prio-"]::before,
.kanban-col .card-meta .status-chip::before { margin-right: 0.4em; }
.prio-high { color: var(--prio-high); }
.prio-medium { color: var(--prio-medium); }
.prio-low { color: var(--prio-low); }
.prio-none { color: var(--fg-subtle); }

.status-backlog { color: var(--st-backlog); }
.status-open { color: var(--st-open); }
.status-next { color: var(--st-next); }
.status-in-progress { color: var(--st-in-progress); }
.status-waiting { color: var(--st-waiting); }
.status-paused { color: var(--st-paused); }
.status-done { color: var(--st-done); }
.status-cancelled { color: var(--st-cancelled); }

/* Ein Status, der nicht der Primaerwert seiner Spalte ist, wird markiert -
   sonst waere die Spaltenbuendelung Datenverlust fuers Auge. */
.status-fein { border-style: dashed; }

/* --- Dichten ---------------------------------------------------------- */

.density-ultracompact .task-card,
.ultracompact-row { padding: 2px var(--s-2); min-height: var(--row-ultracompact); }
/* Die Altview rendert ultracompact als eigene Zeile, nicht als task-card. */
.ultracompact-row {
  display: flex; align-items: center; gap: var(--s-2);
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--r-2); margin-bottom: 2px;
}
.ultracompact-row:hover { border-color: var(--line-strong); }
.ultracompact-title { flex: 1 1 auto; min-width: 0; }
.ultracompact-title a {
  display: block; font-size: var(--fs-base); font-weight: 500; color: var(--fg);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-decoration: none;
}
.ultracompact-properties { display: flex; align-items: center; gap: var(--s-1); flex: 0 0 auto; }
.ultracompact-properties .property-chip { font-size: var(--fs-micro); max-width: 16ch; }
.density-ultracompact .task-card .wikilink,
.density-ultracompact .ultracompact-title a { -webkit-line-clamp: 1; white-space: nowrap; text-overflow: ellipsis; }
.density-ultracompact .property-chip { font-size: var(--fs-micro); padding: 0 var(--s-1); max-width: 16ch; }
.density-ultracompact .card-meta { margin-top: 0; }

.density-compact .task-card { padding: var(--s-1) var(--s-2); min-height: var(--row-compact); }
.density-normal .task-card { min-height: var(--row-normal); }

/* --- Dialog ----------------------------------------------------------- */

.property-dialog {
  border: 1px solid var(--line-strong);
  border-radius: var(--r-3);
  background: var(--surface-2);
  color: var(--fg);
  box-shadow: var(--shadow-pop);
  padding: 0;
  max-width: min(460px, calc(100vw - var(--s-6)));
  width: 100%;
}
.property-dialog::backdrop { background: rgba(10, 12, 15, 0.72); }
.property-dialog-body { display: flex; flex-direction: column; gap: var(--s-3); padding: var(--s-4); }
.property-dialog h3 { margin: 0; font-size: var(--fs-md); font-weight: 600; color: var(--fg-strong); }
.dialog-control { width: 100%; }
.dialog-actions { display: flex; justify-content: flex-end; gap: var(--s-2); }
.dialog-error { margin: 0; font-size: var(--fs-sm); color: var(--danger); min-height: 1em; }

.entity-editor { display: flex; flex-direction: column; gap: var(--s-2); }
.entity-chips { display: flex; flex-wrap: wrap; gap: var(--s-1); }
.entity-chip {
  display: inline-flex; align-items: center; gap: var(--s-1);
  font-size: var(--fs-sm);
  background: var(--accent-soft); color: var(--accent);
  border-radius: var(--r-full); padding: 1px var(--s-1) 1px var(--s-2);
}
.entity-remove { background: none; border: 0; color: inherit; padding: 0 2px; font-size: var(--fs-base); line-height: 1; cursor: pointer; }
.entity-remove:hover { color: var(--danger); background: none; }
.entity-hint { margin: 0; font-size: var(--fs-micro); color: var(--fg-subtle); }
.quick-dates { display: flex; flex-wrap: wrap; gap: var(--s-1); }

/* --- Tabellen und Prosa ----------------------------------------------- */

.prose { max-width: var(--measure-prose); font-size: var(--fs-md); line-height: var(--lh-prose); }
.prose h1 { font-size: var(--fs-2xl); }
.prose h2 { font-size: var(--fs-xl); border: 0; }
.prose h3 { font-size: var(--fs-lg); }
.prose h1, .prose h2, .prose h3, .prose h4 { overflow-wrap: anywhere; }
.prose a, .wikilink { color: var(--accent); }
.prose a:hover { text-decoration: underline; }
.attachment-missing { display: inline-flex; max-width: 100%; color: var(--fg-subtle); background: var(--surface-2); border: 1px dashed var(--line-strong); border-radius: var(--r-1); padding: 2px var(--s-1); overflow-wrap: anywhere; }
.embedded-image { display: block; max-width: 100%; height: auto; border-radius: var(--r-2); }
.prose code, code { font-family: var(--font-mono); font-size: 0.92em; background: var(--surface-1); border-radius: var(--r-1); padding: 1px var(--s-1); }
.prose pre, pre { background: var(--surface-1); border: 1px solid var(--line); border-radius: var(--r-2); padding: var(--s-3); overflow-x: auto; }
.prose blockquote { margin: var(--s-3) 0; padding-left: var(--s-3); border-left: 2px solid var(--line-strong); color: var(--fg-muted); }
.callout { background: var(--surface-1); border: 1px solid var(--line); border-left: 2px solid var(--accent-border); border-radius: var(--r-2); padding: var(--s-3); margin: var(--s-3) 0; }

.table-scroll, .table-wrap { overflow-x: auto; max-width: 100%; }
.styled-table { width: 100%; border-collapse: collapse; font-size: var(--fs-base); }
.styled-table th, .styled-table td { text-align: left; padding: var(--s-1) var(--s-2); border-bottom: 1px solid var(--line); }
.styled-table th { position: sticky; top: 0; background: var(--surface-3); color: var(--fg-muted); font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: var(--tracking-label); }
.styled-table tbody tr:hover { background: var(--surface-1); }

.progress-bar-bg { background: var(--surface-4); border-radius: var(--r-full); height: 4px; width: 120px; overflow: hidden; display: inline-block; }
.progress-bar-fill { background: var(--ok); height: 100%; }

.tree-node { background: var(--surface-1); border: 1px solid var(--line); border-radius: var(--r-3); padding: var(--s-3); margin-bottom: var(--s-3); }
.tree-header { display: flex; justify-content: space-between; align-items: center; gap: var(--s-2); font-size: var(--fs-base); font-weight: 600; padding-bottom: var(--s-2); margin-bottom: var(--s-2); border-bottom: 1px solid var(--line); }

.view-settings summary { cursor: pointer; font-size: var(--fs-sm); color: var(--fg-muted); }
.property-toggles { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-2); font-size: var(--fs-sm); }

.sidebar, .inspector { background: var(--surface-1); border: 1px solid var(--line); border-radius: var(--r-3); padding: var(--s-3); }
.sidebar h3 { font-size: var(--fs-base); margin: 0 0 var(--s-2); color: var(--fg-muted); }

/* --- Breakpoints ------------------------------------------------------ */

@media (max-width: 1024px) {
  main { padding: var(--s-3); }
}
@media (max-width: 768px) {
  header { padding: var(--s-2); }
  .nav-links { display: none; }
  .search-form { flex: 1; margin-left: 0; width: auto; min-width: 0; }
  .search-form input { width: 100%; min-width: 0; }
  .kanban-col, .status-column { min-width: 200px; }
}
@media (max-width: 460px) {
  main { padding: var(--s-2); }
  .nav-btn { font-size: var(--fs-sm); }
  .property-chip { max-width: 14ch; }
  .kanban-col, .status-column { min-width: calc(100vw - var(--s-6)); }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* --- Steuerleiste ------------------------------------------------------ */
/* Die Altview liefert controls-bar/controls-group ohne eigenes Layout;
   ohne diese Regeln stand jede Auswahl auf einer eigenen Zeile. */
.controls-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2) var(--s-3);
  background: var(--surface-1);
  border: 1px solid var(--line);
  border-radius: var(--r-3);
  padding: var(--s-2) var(--s-3);
  margin-bottom: var(--s-3);
}
.controls-group { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); }
.controls-group label { display: inline-flex; align-items: center; gap: var(--s-1); }
.controls-bar strong {
  font-weight: 500;
  font-size: var(--fs-sm);
  color: var(--fg-subtle);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
}
.controls-bar input[type="text"] { min-width: 12ch; flex: 1 1 160px; }
.property-toggle { display: inline-flex; align-items: center; gap: var(--s-1); font-size: var(--fs-sm); color: var(--fg-muted); }

.kanban-col > .col-header h3 {
  margin: 0;
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  /* Die Altview setzt hier eine Inline-Farbe; die Statusfarbe traegt der
     Punkt davor, nicht die Schrift. */
  color: var(--fg-subtle) !important;
}
.kanban-col > .col-header { justify-content: flex-start; margin: 0 0 var(--s-2); }
.kanban-col > .col-header h3::before {
  content: "";
  display: inline-block;
  width: 6px; height: 6px; margin-right: var(--s-2);
  border-radius: var(--r-full);
  background: currentColor;
}

/* --- Module (Phase 5) -------------------------------------------------- */

.muted-line { margin: 0 0 var(--s-3); font-size: var(--fs-sm); color: var(--fg-subtle); }
.empty-state { margin: 0; padding: var(--s-4) 0; color: var(--fg-subtle); font-size: var(--fs-sm); }
.plain-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-1); }
.plain-list a { color: var(--accent); }

.daynav { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; margin-bottom: var(--s-3); }
.daynav-label { font-size: var(--fs-md); font-weight: 600; color: var(--fg-strong); }
.daynav h1.daynav-label { margin: 0; }

/* Kalender */
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: var(--s-1); }
.cal-head {
  font-size: var(--fs-micro); text-transform: uppercase;
  letter-spacing: var(--tracking-label); color: var(--fg-subtle);
  text-align: center; padding-bottom: var(--s-1);
}
.cal-cell {
  display: flex; flex-direction: column; justify-content: space-between;
  min-height: 68px; padding: var(--s-1) var(--s-2);
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--r-2); color: var(--fg-muted);
  transition: border-color var(--dur) var(--ease);
}
.cal-cell:hover { border-color: var(--line-strong); color: var(--fg); }
.cal-empty { background: transparent; border-color: transparent; }
.cal-today { border-color: var(--accent-border); }
.cal-day { font-size: var(--fs-sm); font-weight: 500; }
.cal-marks { display: flex; align-items: center; gap: var(--s-1); flex-wrap: wrap; }
.cal-dot { width: 6px; height: 6px; border-radius: var(--r-full); }
.cal-journal { background: var(--ok); }
.cal-badge {
  font-size: var(--fs-micro); padding: 0 var(--s-1);
  border-radius: var(--r-full); background: var(--surface-4); color: var(--fg-muted);
}
.cal-badge.cal-due { background: rgba(243, 139, 168, 0.16); color: var(--prio-high); }
.cal-legend { margin: var(--s-3) 0 0; font-size: var(--fs-micro); color: var(--fg-subtle); }

/* Domain-Dashboards */
.kpi-row { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.kpi {
  display: flex; flex-direction: column; gap: 2px;
  min-width: 96px; padding: var(--s-2) var(--s-3);
  background: var(--surface-1); border: 1px solid var(--line); border-radius: var(--r-2);
}
.kpi-value { font-size: var(--fs-xl); font-weight: 600; color: var(--fg-strong); line-height: 1; }
.kpi-label {
  font-size: var(--fs-micro); text-transform: uppercase;
  letter-spacing: var(--tracking-label); color: var(--fg-subtle);
}

/* PDF-Arbeitsplatz */
.split-toolbar { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; margin-bottom: var(--s-2); }
.split-grid { display: grid; grid-template-columns: 3fr 2fr; gap: var(--s-3); align-items: stretch; }
.split-pane {
  background: var(--surface-1); border: 1px solid var(--line);
  border-radius: var(--r-3); overflow: auto; min-height: 70vh;
}
.split-note { padding: var(--s-4); }
.pdf-embed { width: 100%; height: 100%; min-height: 70vh; border: 0; display: block; }
@media (max-width: 1024px) { .split-grid { grid-template-columns: 1fr; } }

/* Whiteboard */
.wb-wrap { overflow: auto; background: var(--surface-1); border: 1px solid var(--line); border-radius: var(--r-2); }
.wb-canvas { width: 100%; min-height: 60vh; display: block; }
/* Schriftgroesse in SVG-Nutzerkoordinaten: das Canvas wird stark skaliert,
   eine px-Angabe waere bei 41 Knoten unlesbar klein. */
.wb-node rect { fill: var(--surface-3); stroke: var(--line-strong); stroke-width: 2; }
.wb-node text { fill: var(--fg); font-size: 22px; font-family: var(--font-ui); }
.wb-node:hover rect { stroke: var(--accent-border); }
a.wb-node { cursor: pointer; }
.wb-edge { stroke: var(--accent-border); stroke-width: 3; opacity: 0.55; }
/* Obsidian-Farbindex auf die Statusfarben abbilden. */
.wb-node-1 rect { stroke: var(--prio-high); }
.wb-node-3 rect { stroke: var(--st-waiting); }
.wb-node-4 rect { stroke: var(--st-done); }
.wb-node-5 rect { stroke: var(--st-open); }
.wb-node-6 rect { stroke: var(--st-backlog); }

.ueberfaellig { color: var(--prio-high); font-weight: 500; }

/* Datums-Chips in den Modulansichten sind Buttons, keine Labels. */
.chip-date { font-variant-numeric: tabular-nums; }
.quick-dates .btn-xs { white-space: nowrap; }

/* --- Touch-Geraete ----------------------------------------------------
 * Auf dem Handy gibt es keinen Hover. Leere Eigenschaften waeren dort
 * unerreichbar, wenn sie erst beim Hovern erscheinen - also immer zeigen,
 * dafuer dezent. Gleichzeitig groessere Tippflaechen. */
@media (hover: none) {
  .property-chip.ghost,
  .property-chip.property-edit {
    opacity: 0.65;
    max-width: 20ch;
    padding-inline: var(--s-2);
    border-width: 1px;
  }
  .property-chip { padding-block: var(--s-1); min-height: 28px; }
  .nav-btn { padding: var(--s-2); min-height: 36px; }
  .cal-cell { min-height: 56px; }
}

/* --- Monatskalender im Dialog ----------------------------------------- */
.dp { display: grid; gap: var(--s-1); }
.dp-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); }
.dp-title { font-size: var(--fs-sm); font-weight: 600; color: var(--fg-strong); }
.dp-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.dp-dow {
  font-size: var(--fs-micro); color: var(--fg-subtle); text-align: center;
  letter-spacing: var(--tracking-label); padding-bottom: 2px;
}
.dp-day {
  font-size: var(--fs-sm); text-align: center; padding: var(--s-1) 0;
  border: 1px solid transparent; border-radius: var(--r-1);
  background: transparent; color: var(--fg-muted); cursor: pointer;
  font-variant-numeric: tabular-nums; min-height: 30px;
}
.dp-day:hover { background: var(--surface-3); color: var(--fg); }
.dp-day.dp-other { color: var(--fg-subtle); opacity: 0.45; }
.dp-day.dp-today { border-color: var(--line-strong); }
.dp-day.dp-selected { background: var(--accent); color: var(--on-accent); font-weight: 600; }

/* --- Arbeitszeit ------------------------------------------------------- */
.az { display: grid; gap: var(--s-3); }
.az-zeile { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); }
.az-feld { display: flex; flex-direction: column; gap: 2px; }
.az-feld > span {
  font-size: var(--fs-micro); text-transform: uppercase;
  letter-spacing: var(--tracking-label); color: var(--fg-subtle);
}
.az-check { display: inline-flex; align-items: center; gap: var(--s-2); font-size: var(--fs-base); }
.az-check input { width: 16px; height: 16px; }
.az-hinweis { margin: 0; font-size: var(--fs-sm); color: var(--fg-subtle); min-height: 1em; }
.az-werte { gap: var(--s-2); align-items: baseline; }
.az-werte strong { font-size: var(--fs-md); font-variant-numeric: tabular-nums; color: var(--fg-strong); }
.az-plus { color: var(--ok) !important; }
.az-minus { color: var(--warn) !important; }
.az-quelle { margin-left: auto; font-size: var(--fs-micro); color: var(--fg-subtle); }
.az-status { font-size: var(--fs-sm); color: var(--fg-muted); }
@media (max-width: 620px) { .az-quelle { margin-left: 0; } }

/* --- Native Notizansicht --------------------------------------------- */
.note-workspace {
  display: grid;
  grid-template-columns: minmax(380px, 1.3fr) minmax(280px, 0.9fr) minmax(260px, 0.65fr);
  gap: var(--s-4);
  align-items: start;
}
.note-pane {
  min-width: 0;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r-3);
  padding: var(--s-4);
}
.note-content { max-width: none; }
.note-content a { overflow-wrap: anywhere; }
.note-linked,
.note-properties {
  position: sticky;
  top: var(--s-3);
  max-height: calc(100vh - var(--s-6));
  overflow-y: auto;
}
.note-pane > h2 { margin: 0 0 var(--s-3); font-size: var(--fs-base); color: var(--fg-strong); }
.note-toolbar, .view-heading, .today-group-head {
  display: flex; align-items: center; gap: var(--s-2); margin-bottom: var(--s-3);
}
.note-toolbar h1, .view-heading h1 { flex: 1; min-width: 0; margin: 0; font-size: var(--fs-xl); color: var(--fg-strong); overflow-wrap: anywhere; }
.note-toolbar h1.visually-quiet { font-size: var(--fs-sm); font-weight: 500; color: var(--fg-subtle); }
.view-heading > div { flex: 1; }
.note-tabs { display: none; gap: var(--s-1); margin-bottom: var(--s-3); }
.note-tabs button.active { background: var(--accent); color: var(--on-accent); }
.base-card { margin-bottom: var(--s-4); }
.base-card h3 { margin: 0 0 var(--s-2); font-size: var(--fs-base); color: var(--fg); }

.property-grid { display: grid; gap: var(--s-1); }
.property-row {
  display: grid; grid-template-columns: minmax(90px, 0.8fr) minmax(0, 1.2fr);
  align-items: center; gap: var(--s-2); min-height: 34px;
  border-bottom: 1px solid var(--line);
}
.property-row-label, .property-add label { color: var(--fg-subtle); font-size: var(--fs-sm); }
.property-row .property-chip,
.property-add .property-chip { opacity: 1; max-width: 100%; border-width: 1px; padding-inline: var(--s-2); }
.property-add { display: grid; gap: var(--s-2); margin-top: var(--s-3); }
.property-add select { width: 100%; }
.dialog-actions .danger-quiet { margin-right: auto; color: var(--danger); }
.side-section + .side-section { margin-top: var(--s-4); padding-top: var(--s-3); border-top: 1px solid var(--line); }
.side-section > h3 { display: flex; gap: var(--s-2); margin: 0 0 var(--s-2); font-size: var(--fs-sm); color: var(--fg-muted); }
.side-hint { margin: calc(-1 * var(--s-1)) 0 var(--s-2); color: var(--fg-subtle); font-size: var(--fs-micro); }
.note-toc nav { display: grid; gap: var(--s-1); }
.note-toc a { color: var(--fg-muted); font-size: var(--fs-sm); border-left: 1px solid var(--line); padding-left: var(--s-2); }
.note-toc a:hover { color: var(--fg-strong); border-color: var(--accent); }
.note-toc .toc-level-3, .note-toc .toc-level-4 { padding-left: var(--s-4); }

@media (max-width: 1024px) {
  .note-workspace { grid-template-columns: minmax(0, 1fr) minmax(260px, 0.65fr); }
  .note-linked { position: static; grid-column: 1 / -1; max-height: none; }
}

@media (max-width: 900px) {
  .note-tabs { display: flex; }
  .note-workspace { display: block; }
  .note-pane { display: none; position: static; max-height: none; }
  .note-pane.mobile-active { display: block; }
}

@media (max-width: 460px) {
  .note-toolbar { flex-wrap: wrap; align-items: flex-start; }
}

/* Body-Editor: Frontmatter bleibt erhalten, ist aber nicht Teil der Eingabe. */
.full-editor {
  width: 100%;
  min-height: calc(100vh - 190px);
  font-family: var(--font-ui);
  font-size: var(--fs-md);
  line-height: 1.72;
  resize: vertical;
  padding: var(--s-5);
  background: var(--surface-2);
}
.editor-form { display: grid; gap: var(--s-3); }
.editor-actions, .form-actions { display: flex; align-items: center; gap: var(--s-2); }
.editor-toolbar {
  position: sticky; top: 0; z-index: 4; display: flex; align-items: center;
  flex-wrap: wrap; gap: var(--s-1); padding: var(--s-2);
  border: 1px solid var(--line); border-radius: var(--r-3); background: var(--surface-1);
}
.editor-toolbar button { min-width: 34px; }
.editor-status { margin-left: auto; color: var(--fg-subtle); font-size: var(--fs-sm); }
.mention-popover {
  position: absolute; z-index: 30; width: min(420px, calc(100vw - 40px));
  margin-top: 44px; padding: var(--s-3); border: 1px solid var(--line-strong);
  border-radius: var(--r-3); background: var(--surface-2); box-shadow: var(--shadow-pop);
}
.mention-popover label { display: grid; gap: var(--s-1); color: var(--fg-muted); font-size: var(--fs-sm); }
.mention-results { display: grid; gap: 2px; max-height: 260px; overflow-y: auto; margin-top: var(--s-2); }
.mention-option { display: flex; justify-content: space-between; gap: var(--s-3); text-align: left; }
.mention-option small { color: var(--fg-subtle); }
.editor-preview { min-height: calc(100vh - 190px); padding: var(--s-5); background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-3); }
.preview-mention { padding: 1px var(--s-1); border-radius: var(--r-1); background: var(--relation-soft); color: var(--relation); }

/* --- Dashboard, Notizen-Hub und Heute ------------------------------- */
.object-kind {
  display: inline-block; margin-bottom: var(--s-1); color: var(--fg-subtle);
  font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: var(--tracking-label);
}
.item-projects { border-left: 2px solid var(--accent); }
.priority-high { box-shadow: inset 2px 0 0 var(--prio-high); }
.priority-medium { box-shadow: inset 2px 0 0 var(--prio-medium); }
.priority-low { box-shadow: inset 2px 0 0 var(--prio-low); }
.tone-open .col-dot { background: var(--st-open); }
.tone-waiting .col-dot { background: var(--st-waiting); }
.tone-done .col-dot { background: var(--st-done); }
.tone-next .col-dot { background: var(--st-next); }
.tone-in-progress .col-dot { background: var(--st-in-progress); }
.group-add { color: var(--accent); font-size: var(--fs-sm); white-space: nowrap; }
.group-overflow { color: var(--fg-subtle); font-size: var(--fs-sm); padding: var(--s-2); }
.group-toggle { margin-left: auto; padding: 0 var(--s-2); }
.group-collapsed .group-body { display: none; }
.group-collapsed { min-height: 0; }
.kanban-col > .group-add { display: block; margin-bottom: var(--s-2); }
.filter-chip { display: inline-flex !important; align-items: center; gap: var(--s-1); }
.filter-chip input { margin: 0; }
.controls-bar label { color: var(--fg-muted); font-size: var(--fs-sm); }
.error-banner {
  padding: var(--s-3); border: 1px solid var(--danger); border-radius: var(--r-2);
  background: rgba(243, 139, 168, 0.1); color: var(--danger);
}
.info-banner {
  padding: var(--s-3); border: 1px solid var(--accent-border); border-radius: var(--r-2);
  background: var(--accent-soft); color: var(--fg-muted);
}

.notes-group { margin-bottom: var(--s-4); }
.notes-list { list-style: none; padding: 0; margin: 0; border: 1px solid var(--line); border-radius: var(--r-3); overflow: hidden; }
.notes-list li + li { border-top: 1px solid var(--line); }
.notes-list a { display: flex; justify-content: space-between; gap: var(--s-3); padding: var(--s-2) var(--s-3); }
.notes-list a:hover { background: var(--surface-2); }
.notes-list time { color: var(--fg-subtle); white-space: nowrap; }
.search-results a > span { display: grid; gap: 2px; }
.search-results small { color: var(--fg-subtle); font-size: var(--fs-micro); font-weight: 400; }

/* Typgerechte Objektdashboards ---------------------------------------- */
.object-heading > div { display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: var(--s-3); }
.object-heading h1 { grid-column: 2; }
.object-heading .muted-line { grid-column: 2; margin: 0; }
.object-page-icon, .object-icon {
  display: inline-grid; place-items: center; flex: 0 0 auto;
  width: 34px; height: 34px; border-radius: var(--r-2);
  background: var(--accent-soft); color: var(--accent); font-weight: 700;
}
.object-page-icon { grid-row: 1 / 3; width: 44px; height: 44px; font-size: var(--fs-lg); }
.object-group { margin-top: var(--s-4); }
.object-group-title { display: flex; align-items: center; gap: var(--s-2); margin-bottom: var(--s-2); }
.object-group-title h2 { margin: 0; font-size: var(--fs-md); }
.object-group-title span { color: var(--fg-subtle); font-size: var(--fs-sm); }
.object-list { border: 1px solid var(--line); border-radius: var(--r-3); overflow: hidden; }
.object-row {
  display: grid; grid-template-columns: 34px minmax(180px, 1fr) minmax(0, auto);
  align-items: center; gap: var(--s-2); padding: 6px var(--s-2); min-height: 42px;
}
.object-row + .object-row { border-top: 1px solid var(--line); }
.object-row:hover { background: var(--surface-2); }
.object-row .object-icon { width: 28px; height: 28px; font-size: var(--fs-sm); }
.object-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--fg-strong); }
.object-row-meta { display: flex; align-items: center; justify-content: flex-end; gap: var(--s-2); min-width: 0; }
.object-meta { color: var(--fg-subtle); font-size: var(--fs-sm); max-width: 24ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.object-meta-tags { padding: 1px var(--s-2); border-radius: var(--r-full); background: var(--tag-soft); color: var(--tag); }
.object-meta-projects { color: var(--relation); }
.object-card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: var(--s-3); }
.object-card { display: grid; align-content: start; gap: var(--s-2); min-height: 180px; padding: var(--s-3); border: 1px solid var(--line); border-radius: var(--r-3); background: var(--surface-2); }
.object-card:hover { border-color: var(--line-strong); }
.object-card-title { font-size: var(--fs-md); font-weight: 650; color: var(--fg-strong); }
.object-card p { margin: 0; color: var(--fg-muted); }
.object-type-badge { justify-self: start; color: var(--accent); font-size: var(--fs-sm); }

.area-root { margin-top: var(--s-5); }
.area-root h2 { font-size: var(--fs-md); color: var(--fg-muted); }
.area-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: var(--s-2); }
.area-card { display: flex; justify-content: space-between; gap: var(--s-2); padding: var(--s-3); border: 1px solid var(--line); border-radius: var(--r-2); background: var(--surface-2); }
.area-card:hover { border-color: var(--tag-border); background: var(--tag-soft); }
.area-card strong { color: var(--fg-subtle); }
.eyebrow { margin: 0; color: var(--tag); font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: var(--tracking-label); }

.create-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); max-width: 900px; }
.create-form label { display: grid; gap: var(--s-1); color: var(--fg-muted); }
.create-form .span-all { grid-column: 1 / -1; }
.create-editor { min-height: 220px; width: 100%; resize: vertical; font-family: var(--font-mono); }

.today-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: var(--s-4); align-items: start; }
.today-calendar {
  position: sticky; top: var(--s-3); background: var(--surface-2);
  border: 1px solid var(--line); border-radius: var(--r-3); padding: var(--s-3);
}
.today-calendar-head { display: flex; justify-content: space-between; margin-bottom: var(--s-2); }
.today-calendar-head a { color: var(--accent); font-size: var(--fs-sm); }
.mini-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.mini-cal-grid > span { text-align: center; color: var(--fg-subtle); font-size: var(--fs-micro); }
.mini-cal-day { text-align: center; padding: var(--s-1); border-radius: var(--r-1); color: var(--fg-muted); }
.mini-cal-day:hover { background: var(--surface-3); }
.mini-cal-day.selected { background: var(--accent); color: var(--on-accent); }
.mini-cal-day.today:not(.selected) { outline: 1px solid var(--accent-border); }
.today-group-head h2 { flex: 1; margin: 0; }
.day-arrow { font-size: var(--fs-xl); line-height: 1; }
.mobile-calendar-toggle { display: none; }
.today-quick-create { display: flex; flex-wrap: wrap; gap: var(--s-1); margin-bottom: var(--s-3); }
.dated-object { position: relative; }
.dated-object .object-list { border: 0; }
.date-reason { position: absolute; right: var(--s-2); bottom: 2px; color: var(--fg-subtle); font-size: var(--fs-micro); }

@media (max-width: 768px) {
  .app-shell { display: block; }
  .app-sidebar { position: static; height: auto; display: none; }
  .mobile-sidebar-open .app-sidebar { display: block; }
  header { position: sticky; top: 0; z-index: 10; }
  .mobile-menu { display: inline-flex; }
  .today-layout { display: block; }
  .today-calendar { display: none; position: static; margin-bottom: var(--s-3); }
  .today-calendar.mobile-visible { display: block; }
  .mobile-calendar-toggle { display: inline-flex; }
  .create-form { grid-template-columns: 1fr; }
  .create-form .span-all { grid-column: auto; }
  .object-row { grid-template-columns: 30px minmax(0, 1fr); }
  .object-row-meta { grid-column: 2; justify-content: flex-start; flex-wrap: wrap; }
}

@media (min-width: 769px) and (max-width: 1500px) {
  .app-shell { grid-template-columns: 48px minmax(0, 1fr); }
  .app-sidebar { padding-inline: var(--s-1); overflow: hidden; }
  /* `.sidebar-report` gehoert hier ebenso dazu. Es fehlte, und deshalb ragte
     "Befund melden" auf jedem Schirm zwischen 769 und 1500 px aus der
     eingeklappten Leiste - genau Moritz' Meldung. Die erste Korrektur traf nur
     den manuellen Umschalter (.sidebar-collapsed), nicht dieses automatische
     Einklappen. */
  .app-sidebar .sidebar-brand, .app-sidebar .sidebar-new,
  .app-sidebar .sidebar-report, .app-sidebar nav { display: none; }
  .sidebar-head { justify-content: center; }
  .sidebar-toggle { transform: rotate(180deg); }
  .sidebar-expanded .app-shell { grid-template-columns: 220px minmax(0, 1fr); }
  .sidebar-expanded .app-sidebar { padding-inline: var(--s-2); overflow-y: auto; }
  .sidebar-expanded .app-sidebar .sidebar-brand, .sidebar-expanded .app-sidebar .sidebar-new, .sidebar-expanded .app-sidebar nav { display: grid; }
  .sidebar-expanded .app-sidebar .sidebar-brand, .sidebar-expanded .app-sidebar .sidebar-new,
  .sidebar-expanded .app-sidebar .sidebar-report { display: block; }
  .sidebar-expanded .sidebar-toggle { transform: none; }
}

/* --- Breite Bildschirme ausnutzen -------------------------------------
 * Die Karte hat drei Kinder: Typmarke, Titel, Eigenschaften. Ein blindes
 * Zweispalten-Grid schob den Titel in die rechte Spalte - deshalb hier
 * explizite Platzierung statt Automatik. */
.density-compact .task-card,
.density-ultracompact .task-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  column-gap: var(--s-2);
}
.density-compact .task-card > .object-kind,
.density-ultracompact .task-card > .object-kind { grid-column: 1; }
.density-compact .task-card > .card-title,
.density-ultracompact .task-card > .card-title {
  grid-column: 2;
  text-align: left;
  -webkit-line-clamp: 1;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.density-compact .task-card > .card-meta,
.density-ultracompact .task-card > .card-meta {
  grid-column: 3;
  margin-top: 0;
  justify-content: flex-end;
  flex-wrap: nowrap;
  overflow: hidden;
}
.object-kind {
  font-size: var(--fs-micro);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  color: var(--fg-subtle);
  white-space: nowrap;
}

/* Auf schmalen Schirmen wieder gestapelt - nebeneinander waere zu eng. */
@media (max-width: 900px) {
  .density-compact .task-card,
  .density-ultracompact .task-card { grid-template-columns: minmax(0, 1fr); }
  .density-compact .task-card > .object-kind,
  .density-compact .task-card > .card-title,
  .density-compact .task-card > .card-meta,
  .density-ultracompact .task-card > .object-kind,
  .density-ultracompact .task-card > .card-title,
  .density-ultracompact .task-card > .card-meta { grid-column: 1; }
  .density-compact .task-card > .card-meta,
  .density-ultracompact .task-card > .card-meta {
    justify-content: flex-start;
    flex-wrap: wrap;
    margin-top: var(--s-1);
  }
}

/* --- Suche ------------------------------------------------------------ */
.search-group { margin-bottom: var(--s-4); }
.search-form { position: relative; }
.instant-search-results {
  position: absolute;
  z-index: 30;
  top: calc(100% + var(--s-1));
  right: 0;
  width: min(520px, calc(100vw - var(--s-4)));
  max-height: min(520px, 70vh);
  overflow: auto;
  padding: var(--s-1);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-2);
  background: var(--surface-1);
  box-shadow: var(--shadow-pop);
}
.instant-search-hit {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--s-2);
  align-items: center;
  padding: var(--s-2);
  border-radius: var(--r-1);
  color: var(--fg);
  text-decoration: none;
}
.instant-search-hit:hover,
.instant-search-hit.active,
.instant-search-hit[aria-selected="true"] {
  background: var(--surface-3);
}
.instant-search-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 500;
}
.instant-search-type {
  color: var(--fg-subtle);
  font-size: var(--fs-micro);
  white-space: nowrap;
}
.instant-search-empty {
  margin: 0;
  padding: var(--s-3);
  color: var(--fg-subtle);
}
.search-results { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.search-results a {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-2);
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  background: var(--surface-2);
}
.search-results a:hover { border-color: var(--line-strong); }
.hit-title { font-weight: 500; color: var(--fg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hit-meta { display: flex; gap: var(--s-1); align-items: center; }
.search-results time { font-size: var(--fs-sm); color: var(--fg-subtle); font-variant-numeric: tabular-nums; }
.fuzzy-hint { background: transparent; border-style: dashed; color: var(--fg-subtle); }
.tag-chip { background: var(--tag-soft); color: var(--tag); border-color: var(--tag-border); }
@media (max-width: 768px) {
  .instant-search-results {
    position: fixed;
    top: 48px;
    right: var(--s-2);
    left: var(--s-2);
    width: auto;
  }
  .search-results a { grid-template-columns: minmax(0, 1fr); gap: var(--s-1); }
}
.az-neu { margin: 0; font-size: var(--fs-sm); color: var(--warn); }

/* Fortschrittsbalken: diskrete Breiten, weil die CSP Inline-style verbietet. */
.progress-0 { width: 0%; }
.progress-5 { width: 5%; }
.progress-10 { width: 10%; }
.progress-15 { width: 15%; }
.progress-20 { width: 20%; }
.progress-25 { width: 25%; }
.progress-30 { width: 30%; }
.progress-35 { width: 35%; }
.progress-40 { width: 40%; }
.progress-45 { width: 45%; }
.progress-50 { width: 50%; }
.progress-55 { width: 55%; }
.progress-60 { width: 60%; }
.progress-65 { width: 65%; }
.progress-70 { width: 70%; }
.progress-75 { width: 75%; }
.progress-80 { width: 80%; }
.progress-85 { width: 85%; }
.progress-90 { width: 90%; }
.progress-95 { width: 95%; }
.progress-100 { width: 100%; }
.progress-bar-fill { display: block; }
/* Relationen sind Links, keine Knoepfe - eigener Zustand beim Hovern. */
.relation-link { background: var(--relation-soft); color: var(--relation); border-color: var(--relation-border); }
.relation-link:hover { border-color: var(--relation); text-decoration: underline; }

/* Herkunftsmarke: dezent, weil sie auf vielen Karten nicht vorkommt. */
.herkunft-ki {
  background: transparent;
  color: var(--fg-subtle);
  border-style: dashed;
  font-size: var(--fs-micro);
  letter-spacing: var(--tracking-label);
}

/* --- Termine im Heute -------------------------------------------------
 * Rechts neben dem Monatskalender - der Platz war ungenutzt. */
/* Tagesabschnitte: drei Zonen nebeneinander, auf schmalem Schirm
   untereinander. Die vierte Zone "Ohne Zeitfenster" liegt darunter, damit
   sie nicht wie ein gleichwertiger Tagesabschnitt wirkt. */
.daypart-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-2); }
.daypart { border: 1px solid var(--border); border-radius: var(--r-2); padding: var(--s-2); min-height: 4rem; }
.daypart-head { display: flex; align-items: center; gap: var(--s-2); margin-bottom: var(--s-2); }
.daypart-head h3 { font-size: var(--fs-sm); font-weight: 600; margin: 0; }
.daypart.drag-over { border-color: var(--accent); background: var(--surface-2); }
.daypart-open { grid-column: 1 / -1; border-style: dashed; }
.daypart .task-card { cursor: grab; }
@media (max-width: 720px) {
  .daypart-grid { grid-template-columns: 1fr; }
  .daypart-open { grid-column: auto; }
}

.today-aside { display: grid; gap: var(--s-3); align-content: start; }
.today-events h2 { display: flex; align-items: center; gap: var(--s-2); font-size: var(--fs-md); }
.calendar-picker {
  display: grid;
  gap: var(--s-1);
  margin-bottom: var(--s-3);
}
.calendar-picker label { color: var(--fg-muted); font-size: var(--fs-sm); }
.calendar-picker select { width: 100%; min-width: 0; }
.calendar-picker .btn-xs { justify-self: start; }
.event-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.event-list a {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 2px var(--s-2);
  padding: var(--s-2);
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  background: var(--surface-1);
}
.event-list a:hover { border-color: var(--line-strong); }
.event-time {
  font-size: var(--fs-micro); color: var(--fg-subtle);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.event-title { font-size: var(--fs-base); color: var(--fg); overflow: hidden; text-overflow: ellipsis; }
.event-meta { grid-column: 2; font-size: var(--fs-micro); color: var(--fg-subtle); }

/* Schnelleingabe: der Melde-Link soll erreichbar sein, aber nicht mit dem
   Anlegen-Knopf konkurrieren - deshalb ruhig statt farbig. */
.sidebar-report { display: block; margin: 0 var(--s-2) var(--s-2); padding: var(--s-1) var(--s-2);
  border: 1px solid var(--border); border-radius: var(--r-1); color: var(--text-muted);
  font-size: var(--fs-sm); text-decoration: none; }
.sidebar-report:hover { color: var(--text); border-color: var(--accent); }
.capture-form { display: grid; gap: var(--s-3); max-width: 44rem; }
.capture-form label { display: grid; gap: var(--s-1); font-size: var(--fs-sm); }
.capture-form textarea, .capture-form input[type="text"] { width: 100%; font: inherit; }
.form-actions { display: flex; gap: var(--s-2); }

/* --- Kanban-Karten: die Spalte ist der Maßstab, nicht das Fenster -------
 *
 * Der Zeilen-Umbruch hing an `@media (max-width: 900px)`, also am Fenster.
 * Eine Kanban-Spalte ist auf einem 1920-px-Schirm aber nur ~250 px breit:
 * dort galt weiter das dreispaltige Zeilenlayout, der Titel saß in einer
 * `minmax(0, 1fr)`-Spalte und wurde von den Chips auf null zusammengedrückt.
 * Genau das war auf dem Screenshot zu sehen - Karten ohne lesbaren Titel.
 *
 * In einer Spalte wird deshalb immer gestapelt: Titel über die ganze Breite,
 * darunter die Chips mit Umbruch. So machen es Notion und Trello auch. */
.kanban-col .task-card,
.status-column .task-card {
  display: block !important;
}
.kanban-col .task-card > .card-title,
.status-column .task-card > .card-title {
  display: block;
  white-space: normal;
  overflow-wrap: anywhere;
  -webkit-line-clamp: 2;
  line-height: 1.3;
  margin-bottom: var(--s-1);
}
.kanban-col .task-card > .card-meta,
.status-column .task-card > .card-meta {
  justify-content: flex-start;
  flex-wrap: wrap;
  overflow: visible;
  margin-top: 0;
}
/* Die Typmarke "AUFGABE" wiederholt nur, was die Spalte schon sagt, und
   kostet auf jeder Karte acht Zeichen Breite. */
.kanban-col .task-card > .object-kind,
.status-column .task-card > .object-kind { display: none; }

/* Das Projekt stand zweimal auf der Karte: einmal als Editier-Chip, einmal
   als Link (Korrektur 7). In einer schmalen Spalte ist das reine Dopplung -
   dort bleibt der Link, geändert wird das Projekt im Inspector. */
.kanban-col .card-meta [data-property="projects"],
.status-column .card-meta [data-property="projects"] { display: none; }

/* Chips dürfen kürzen, aber nicht mitten im Wort abbrechen.
 *
 * `text-overflow: ellipsis` wirkt **nicht** auf `display: flex` - der Chip ist
 * per Voreinstellung ein Flex-Container, deshalb wurden 24 Chips hart
 * abgeschnitten statt mit Auslassungspunkten. `inline-block` stellt das her.
 *
 * Dazu eine Obergrenze in Zeichen: ein Projektslug wie
 * `digitalisierung-konsilwesen-pfalzklinikum` fuellte sonst die ganze
 * Kartenbreite, und die Prioritaet daneben rutschte in die naechste Zeile. */
.kanban-col .property-chip,
.status-column .property-chip {
  display: inline-block;
  vertical-align: middle;
  max-width: min(100%, 20ch);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* --- Inline-Menü am Chip ------------------------------------------------
 * Liegt im Body und wird über CSS-Variablen positioniert - eine scrollende
 * Kanban-Spalte würde ein Menü innerhalb der Karte abschneiden. Kein
 * Inline-`style`, damit die CSP ohne `unsafe-inline` bestehen bleibt. */
.chip-menu {
  position: absolute;
  top: var(--menu-top, 0);
  left: var(--menu-left, 0);
  z-index: 60;
  min-width: 11rem;
  display: grid;
  padding: var(--s-1);
  gap: 1px;
  background: var(--surface-raised, var(--surface-2));
  border: 1px solid var(--line-strong);
  border-radius: var(--r-2);
  box-shadow: 0 10px 30px rgb(0 0 0 / 45%);
}
.chip-menu-item {
  text-align: left;
  padding: var(--s-1) var(--s-2);
  border: 0;
  border-radius: var(--r-1);
  background: transparent;
  color: var(--fg);
  font: inherit;
  font-size: var(--fs-sm);
  cursor: pointer;
}
.chip-menu-item:hover, .chip-menu-item:focus-visible { background: var(--accent-soft); outline: none; }
.chip-menu-item.current { font-weight: 600; }
.chip-menu-item.current::after { content: " ✓"; color: var(--accent); }
.chip-menu-item.quiet { color: var(--fg-subtle); margin-top: var(--s-1); border-top: 1px solid var(--line); border-radius: 0; }
.chip-menu-item.menu-error { background: var(--danger-soft, rgb(220 60 60 / 20%)); }

/* Ueberfaellig steht oben, aber zurueckhaltend - es soll den Tag nicht
   verdecken. Der Rand traegt die Dringlichkeit, nicht die Flaeche. */
.today-overdue { border-left: 3px solid var(--st-waiting); }
.today-overdue summary { cursor: pointer; list-style: none; }
.today-overdue summary::-webkit-details-marker { display: none; }
.today-overdue summary::before { content: "▾ "; color: var(--fg-subtle); }
.today-overdue details:not([open]) summary::before { content: "▸ "; }

/* Auf Beruehrungsgeraeten gibt es kein Zeigen - dort waere ein Geisterchip
   fuer immer unsichtbar und ein leeres Feld nie zu setzen. Moritz' Meldung
   "Eigenschaften die gesehen werden muessen auch ueber Karten auswaehlbar
   und erstellbar sein". */
@media (hover: none) {
  .property-chip.ghost, .property-chip.property-edit {
    opacity: 0.55;
    max-width: 24ch;
    padding-inline: var(--s-2);
    border-width: 1px;
    border-style: dashed;
  }
}

/* Bestaetigung nach dem Melden - ohne sie weiss man nicht, ob etwas
   angekommen ist. */
.flash-note {
  display: flex;
  gap: var(--s-2);
  align-items: baseline;
  margin: 0 0 var(--s-3);
  padding: var(--s-2) var(--s-3);
  border: 1px solid var(--accent-border, var(--line-strong));
  border-left-width: 3px;
  border-radius: var(--r-2);
  background: var(--accent-soft);
  font-size: var(--fs-sm);
}
.flash-note a { color: var(--accent); }

/* Nachordnen nach einer Aenderung. Die Karte bleibt zunaechst stehen und wird
   markiert - man soll sehen, was man getan hat, bevor sie an ihren neuen Platz
   wandert. */
.task-card.wird-verschoben,
tr.wird-verschoben {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  border-radius: var(--r-1);
}
.reorder-note {
  position: fixed;
  right: var(--s-4);
  bottom: var(--s-4);
  z-index: 70;
  display: flex;
  gap: var(--s-2);
  align-items: center;
  padding: var(--s-2) var(--s-3);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-2);
  background: var(--surface-raised, var(--surface-2));
  box-shadow: 0 10px 30px rgb(0 0 0 / 45%);
  font-size: var(--fs-sm);
}
@media (max-width: 720px) {
  .reorder-note { left: var(--s-3); right: var(--s-3); justify-content: space-between; }
}

/* Bereichsnavigator auf den Domain-Dashboards: Kacheln statt Liste, weil man
   sie ueberfliegt und nicht liest. */
.bereich-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); gap: var(--s-2); }
.bereich-kachel {
  display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-2);
  padding: var(--s-2) var(--s-3);
  border: 1px solid var(--line); border-radius: var(--r-2);
  color: var(--fg); text-decoration: none; font-size: var(--fs-sm);
}
.bereich-kachel:hover { border-color: var(--accent); background: var(--surface-2); }
.bereich-zahl { color: var(--fg-subtle); font-variant-numeric: tabular-nums; }

/* Der Vorrat: eine Zeile je Aufgabe, der Knopf rechts. Bewusst schlichter als
   eine Karte - hier wird ausgewaehlt, nicht gearbeitet. */
.vorrat-zeile {
  display: flex; align-items: center; gap: var(--s-2);
  padding: var(--s-1) var(--s-2);
  border-bottom: 1px solid var(--line);
}
.vorrat-zeile:last-of-type { border-bottom: 0; }
.vorrat-zeile .wikilink { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vorrat-form { margin: 0; flex: 0 0 auto; }
.vorrat .controls-bar { margin-bottom: var(--s-2); }
@media (max-width: 720px) {
  .vorrat-zeile { flex-wrap: wrap; }
  .vorrat-zeile .wikilink { flex-basis: 100%; white-space: normal; }
}

/* Befundfeld an jedem Objekt: klein, aber immer da. */
.befund-form { display: grid; gap: var(--s-2); }
.befund-form textarea { width: 100%; font: inherit; font-size: var(--fs-sm); }
.object-row .object-kind { margin-right: var(--s-2); }

/* Nach einem Sprung aus dem Inhaltsverzeichnis kurz markieren - sonst weiss
   man auf einem langen Text nicht, wo man gelandet ist. */
.sprungziel { background: var(--accent-soft); border-radius: var(--r-1); transition: background 1.2s var(--ease); }

/* Inventar- und Fristenzeilen: eine Zeile je Gerät, Unterlagen rechts. */
.inventar-zeile { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap;
  padding: var(--s-1) var(--s-2); border-bottom: 1px solid var(--line); }
.inventar-zeile:last-of-type { border-bottom: 0; }
.inventar-zeile .wikilink { flex: 1 1 14rem; min-width: 0; }
.property-chip.ueberfaellig { color: var(--st-waiting); border-color: var(--st-waiting); }

/* Wochenraster: sieben Spalten, auf schmalem Schirm untereinander. */
.woche-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--s-2); }
.woche-spalte { border: 1px solid var(--line); border-radius: var(--r-2); padding: var(--s-2);
  min-height: 8rem; display: flex; flex-direction: column; gap: var(--s-1); }
.woche-heute { border-color: var(--accent); }
.woche-kopf { display: flex; justify-content: space-between; align-items: baseline;
  gap: var(--s-1); font-size: var(--fs-sm); font-weight: 600; }
.woche-inhalt { display: grid; gap: var(--s-1); }
.woche-eintrag, .woche-termin { display: block; font-size: var(--fs-micro);
  color: var(--fg-muted); text-decoration: none; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; border-left: 2px solid var(--line); padding-left: var(--s-1); }
.woche-eintrag:hover, .woche-termin:hover { color: var(--fg-strong); border-color: var(--accent); }
.woche-eintrag.faellig { border-color: var(--st-waiting); }
.woche-termin { border-color: var(--st-next); }
.woche-art { color: var(--fg-subtle); margin-right: var(--s-1); }
.event-item { display: flex; align-items: baseline; gap: var(--s-2); }
@media (max-width: 900px) { .woche-grid { grid-template-columns: 1fr; } }

/* Direkte Bezüge und Backlinks: die Typmarke stand als Inline-Element vor
   einem Link, der die ganze Zeile fuellte - beide ueberlagerten sich.
   Moritz' Meldung "Felder überlagern sich hier im browser!". */
.side-section .object-row {
  display: flex; align-items: baseline; gap: var(--s-2);
  padding: var(--s-1) 0; min-width: 0;
}
.side-section .object-row .object-kind {
  flex: 0 0 auto; font-size: var(--fs-micro); color: var(--fg-subtle);
  text-transform: uppercase; letter-spacing: var(--tracking-label);
}
.side-section .object-row > :last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.side-section .object-list.compact { display: grid; gap: 0; }

/* Listenfelder: ein Chip je Wert, das Kreuz erscheint beim Zeigen.
   Auf Beruehrungsgeraeten steht es dauerhaft - dort gibt es kein Zeigen. */
.wert-liste { display: inline-flex; flex-wrap: wrap; gap: var(--s-1); align-items: center; }
.wert-chip {
  display: inline-flex; align-items: center; gap: var(--s-1);
  padding: 0 var(--s-1) 0 var(--s-2);
  border: 1px solid var(--line); border-radius: var(--r-1);
  font-size: var(--fs-sm); color: var(--fg-muted); max-width: 22ch;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.wert-chip:hover { border-color: var(--accent); color: var(--fg-strong); }
.wert-weg {
  border: 0; background: transparent; color: var(--fg-subtle);
  cursor: pointer; font-size: var(--fs-sm); line-height: 1;
  padding: 0 var(--s-1); opacity: 0; transition: opacity var(--dur) var(--ease);
}
.wert-chip:hover .wert-weg,
.wert-chip:focus-within .wert-weg { opacity: 1; }
.wert-weg:hover { color: var(--danger, #e06c75); }
.wert-chip.wert-geht { opacity: 0.4; }
.wert-plus { min-width: 2rem; text-align: center; }
@media (hover: none) { .wert-weg { opacity: 0.6; } }

/* Der Monatskalender nutzt die Hoehe, die da ist. Vorher standen die Zellen
   in fester Hoehe oben und die untere Bildschirmhaelfte blieb leer - Moritz'
   wiederkehrender Punkt "es muss im ui immer intelligent der bildschirm ganz
   ausgenutzt werden". */
@media (min-width: 900px) {
  .cal-grid {
    min-height: calc(100vh - 15rem);
    /* Nur die Tageszeilen wachsen. Ohne diese Zeile streckt sich auch die
       Wochentagsleiste auf 1fr und reisst eine Luecke unter die Kopfzeile. */
    grid-template-rows: auto;
    grid-auto-rows: minmax(4.5rem, 1fr);
  }
  .cal-cell { align-content: start; }
}
.cal-badge.cal-termin { background: var(--accent-soft); color: var(--accent); }

/* Triage: eine Zeile, alle Entscheidungen. Die Knoepfe sind bewusst klein und
   dicht - es geht um Tempo, nicht um Schauflaeche. */
.triage-tabelle td { vertical-align: middle; padding-top: var(--s-2); padding-bottom: var(--s-2); }
.triage-titel { max-width: 32ch; }
.triage-titel a { color: var(--fg-strong); }
.triage-ist { white-space: nowrap; color: var(--fg-muted); font-size: var(--fs-sm); }
.triage-ist.triage-fehler { color: var(--danger); white-space: normal; }
.triage-knoepfe { white-space: nowrap; }
/* Die Knoepfe sind Chips, keine Formularknoepfe. Moritz am 2026-07-31:
   "vielleicht kuemmern Sie sich noch bisschen ans Farbschema, was sonst
   genutzt wird - sie faellt aus dem Schema, so sehr eckig." Stimmt: sie
   trugen eigene 4-px-Ecken und kraeftigere Raender, waehrend die ganze
   Oberflaeche mit Pillenform, --surface-3 und Haarlinien arbeitet. Jetzt
   dieselben Bausteine wie .property-chip. */
.triage-btn {
  display: inline-flex; align-items: center;
  font-size: var(--fs-sm); line-height: 1.4;
  padding: 2px var(--s-2);
  border-radius: var(--r-full);
  border: 1px solid var(--line);
  background: var(--surface-3);
  color: var(--fg-muted);
  margin: 1px; cursor: pointer;
  white-space: nowrap;
}
.triage-btn:hover { border-color: var(--line-strong); color: var(--fg); }
.triage-btn:disabled { opacity: 0.5; cursor: progress; }
.triage-btn.active { background: var(--accent); color: #ffffff; border-color: var(--accent); font-weight: 600; }
.triage-btn.primary { background: var(--accent); color: #fff; border-color: var(--accent); }
.triage-btn.primary:hover { opacity: 0.9; }
.triage-btn.secondary { background: var(--surface-3); color: var(--fg); border-color: var(--line-strong); }
.triage-btn.accent { background: var(--accent-soft); color: var(--accent); border-color: var(--accent-border); font-weight: 500; }
.triage-btn.accent:hover { background: var(--accent); color: #fff; }
.triage-datum {
  width: 9.5rem; margin-left: var(--s-1); font-size: var(--fs-sm);
  border-radius: var(--r-full); background: var(--surface-3);
  padding: 1px var(--s-2); border: 1px solid var(--line);
}
.triage-pill-group { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; }
.triage-kommentar-box { display: flex; flex-direction: column; gap: 4px; min-width: 220px; }
.triage-kommentar {
  width: 100%; font-size: var(--fs-sm);
  padding: 3px 8px; border-radius: var(--r-full);
  border: 1px solid var(--line); background: var(--surface-2); color: var(--fg);
}
.triage-action-btns { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 2px; }
.triage-erledigt .triage-titel a { color: var(--fg-muted); text-decoration: line-through; }

/* Auf dem Telefon bricht die Zeile um, statt waagerecht zu scrollen. */
@media (max-width: 700px) {
  .triage-tabelle, .triage-tabelle tbody, .triage-tabelle tr, .triage-tabelle td {
    display: block; width: 100%;
  }
  .triage-tabelle thead { display: none; }
  .triage-tabelle tr {
    border-bottom: 1px solid var(--line); padding: var(--s-2) 0;
  }
  .triage-titel { max-width: none; }
  .triage-knoepfe { white-space: normal; }
}

/* Der direkte Weg zur Datei steht neben dem Namen, nicht statt seiner. */
.anhang-direkt {
  margin-left: var(--s-2); font-size: var(--fs-sm); color: var(--fg-muted);
  border-bottom: 1px solid var(--line-strong);
}
.anhang-direkt:hover { color: var(--accent); border-color: var(--accent-border); }
.pdf-fallback { padding: var(--s-4); text-align: center; }
.pdf-fallback p { color: var(--fg-muted); margin-bottom: var(--s-3); }

/* Gespeicherte Ansichten als Reiter.
   Bewusst flach: die Reiter ordnen, sie sollen nicht selbst auffallen. */
.ansicht-tabs {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2);
  margin: var(--s-3) 0 var(--s-2); padding-bottom: var(--s-2);
  border-bottom: 1px solid var(--line);
}
.ansicht-tab {
  padding: 3px 10px; border-radius: var(--r-2); font-size: var(--fs-sm);
  color: var(--fg-muted); border: 1px solid transparent;
}
.ansicht-tab:hover { color: var(--fg-strong); border-color: var(--line-strong); }
.ansicht-tab.aktiv {
  color: var(--fg-strong); background: var(--accent-soft);
  border-color: var(--accent-border);
}
.ansicht-verwalten { font-size: var(--fs-sm); color: var(--fg-subtle); }
.ansicht-verwalten:hover { color: var(--accent); }
.ansicht-speichern { display: flex; gap: var(--s-1); margin-left: auto; }
.ansicht-speichern input[type="text"] { width: 14rem; font-size: var(--fs-sm); }

/* Ausblendbare Filterleiste. */
.filter-huelle { margin-bottom: var(--s-3); }
.filter-summary {
  cursor: pointer; color: var(--fg-muted); font-size: var(--fs-sm);
  padding: var(--s-1) 0; list-style: none;
}
.filter-summary::-webkit-details-marker { display: none; }
.filter-summary::before { content: "▸ "; }
.filter-huelle[open] .filter-summary::before { content: "▾ "; }
.filter-summary:hover { color: var(--fg-strong); }

@media (max-width: 700px) {
  .ansicht-speichern { margin-left: 0; width: 100%; }
  .ansicht-speichern input[type="text"] { flex: 1; width: auto; }
}

.triage-kommentar {
  width: 12rem; font-size: var(--fs-sm); margin-right: var(--s-1);
  vertical-align: middle; border-radius: var(--r-full);
  background: var(--surface-3); padding: 1px var(--s-2);
}
.triage-erledigt { opacity: 0.55; }
@media (max-width: 700px) { .triage-kommentar { width: 100%; margin: var(--s-1) 0; } }

/* Auf dem Telefon stapelt sich der Seitenkopf, statt dass die Schaltflaechen
   in den Fliesstext hineinbrechen. Beim Ansehen der Triage auf 375 px stand
   "Alle auf / morgen" mitten im Erklaertext. */
@media (max-width: 700px) {
  .view-heading { display: block; }
  .view-heading > div + div { margin-top: var(--s-2); display: flex; gap: var(--s-2); flex-wrap: wrap; }
  .triage-tabelle .triage-titel { padding-bottom: var(--s-1); }
}

/* Erwähnungsliste: nach Entität gruppiert statt flach. */
.mention-gruppe {
  font-size: var(--fs-sm); color: var(--fg-subtle); text-transform: uppercase;
  letter-spacing: 0.04em; padding: var(--s-2) var(--s-2) var(--s-1);
  border-top: 1px solid var(--line);
}
.mention-gruppe:first-child { border-top: none; }
.mention-option.aktiv { background: var(--accent-soft); color: var(--fg-strong); }
.mention-option.mention-neu span { color: var(--accent); }
.mention-typwahl {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1);
  padding: var(--s-2);
}
.mention-typwahl span { width: 100%; color: var(--fg-muted); font-size: var(--fs-sm); }

/* Aufgabe zu diesem Objekt: die Schnellwahl braucht Luft, sonst kleben
   "ohne Datum", "heute" und "morgen" zu einem Wort zusammen. */
.aufgabe-schnellwahl {
  display: flex; flex-wrap: wrap; gap: var(--s-2); margin: var(--s-1) 0;
}
.aufgabe-schnellwahl .filter-chip {
  display: inline-flex; align-items: center; gap: var(--s-1);
  font-size: var(--fs-sm); color: var(--fg-muted);
}

/* Durchsicht: Stillstand ist die Aussage, nicht die Zeile. */
.stillstand-marke {
  margin-left: var(--s-2); color: var(--warn);
  border-color: var(--line-strong); background: transparent;
}

/* Anhänge im Befundformular: die Vorschau sagt, was mitgeht. */
.anhang-vorschau { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.anhang-kachel {
  font-size: var(--fs-sm); color: var(--fg-muted);
  background: var(--surface-3); border: 1px solid var(--line);
  border-radius: var(--r-full); padding: 1px var(--s-2);
}


/* Arbeitszeitverlauf: Balken in Fuenferschritten. Klassen statt Inline-Style,
   weil die CSP `style="..."` verbietet. */
.verlauf { display: flex; flex-direction: column; gap: var(--s-1); }
.verlauf-zeile { display: flex; align-items: center; gap: var(--s-2); }
.verlauf-monat { width: 9rem; font-size: var(--fs-sm); color: var(--fg-muted); }
.verlauf-balken {
  height: 10px; border-radius: var(--r-full); min-width: 2px;
  background: var(--st-done);
}
.verlauf-balken.saldo-minus { background: var(--prio-high); }
.verlauf-wert { font-size: var(--fs-sm); color: var(--fg); min-width: 5rem; }
.saldo-plus { color: var(--st-done); }
.saldo-minus { color: var(--prio-high); }
.woche-summe td { color: var(--fg-muted); border-top: 1px solid var(--line-strong); }

/* Auf Handybreite drangen Pause und Ueberstunden - fast immer leer - Ist,
   Soll und Saldo aus dem Bild. Dort fallen die beiden Spalten weg; ihre
   Werte stehen als Zusatzzeile unter dem Zeitfenster. */
/* Nachtragen in derselben Zeile - kein Dialog, kein Seitenwechsel. */
.az-luecke td { background: var(--surface-2); }
.az-inline { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; }
.az-inline select { max-width: 12rem; }
.az-inline-check { display: flex; align-items: center; gap: var(--s-1);
  font-size: var(--fs-sm); color: var(--fg-muted); }

.nur-schmal { display: none; }
@media (max-width: 720px) {
  .breit-only { display: none; }
  /* Stundenwerte duerfen nicht umbrechen - "9:45" und "h" in zwei Zeilen
     verdoppeln die Zeilenhoehe und schieben den Saldo aus dem Bild. Die Regel
     gilt **nur** fuer die Arbeitszeittabelle: global gesetzt zwang sie jede
     Liste mit langen Titeln in eine einzige Zeile und schob deren Spalten aus
     dem Bild. Genau so gesehen in /inaktiv. */
  .az-tabelle td, .az-tabelle th {
    white-space: nowrap;
    padding-left: var(--s-1); padding-right: var(--s-1);
  }
  .az-tag { white-space: normal; }
  /* Drei Spalten muessen ins Bild passen: Tag, Ist, Saldo. Ohne feste
     Aufteilung dehnt die Tagspalte (Dienst, Zeitfenster, "Aendern") die
     Tabelle ueber den Rand, und der Saldo - die einzige Zahl, die eine
     Entscheidung traegt - steht ausserhalb. Am 2026-08-02 zweimal so
     gesehen, bevor die Breiten gesetzt wurden. */
  .az-tabelle { width: 100%; table-layout: fixed; }
  .az-tabelle .az-tag { width: 46%; }
  .az-tabelle .az-ist { width: 24%; }
  .az-tabelle .az-saldo { width: 30%; }
  .az-tabelle .nur-schmal { white-space: normal; overflow-wrap: anywhere; }
  /* Lange Titel duerfen die Datenspalten nicht verdraengen. */
  .triage-titel { max-width: 45vw; }
  .nur-schmal { display: block; font-size: var(--fs-micro); color: var(--fg-muted); }
  .verlauf-monat { width: 5.5rem; }
  .verlauf-wert { min-width: 4rem; }
}
.verlauf-balken.w0 { width: 0%; }
.verlauf-balken.w5 { width: 5%; }
.verlauf-balken.w10 { width: 10%; }
.verlauf-balken.w15 { width: 15%; }
.verlauf-balken.w20 { width: 20%; }
.verlauf-balken.w25 { width: 25%; }
.verlauf-balken.w30 { width: 30%; }
.verlauf-balken.w35 { width: 35%; }
.verlauf-balken.w40 { width: 40%; }
.verlauf-balken.w45 { width: 45%; }
.verlauf-balken.w50 { width: 50%; }
.verlauf-balken.w55 { width: 55%; }
.verlauf-balken.w60 { width: 60%; }
.verlauf-balken.w65 { width: 65%; }
.verlauf-balken.w70 { width: 70%; }
.verlauf-balken.w75 { width: 75%; }
.verlauf-balken.w80 { width: 80%; }
.verlauf-balken.w85 { width: 85%; }
.verlauf-balken.w90 { width: 90%; }
.verlauf-balken.w95 { width: 95%; }
.verlauf-balken.w100 { width: 100%; }

/* Inaktiv: die Zeile ist voll bedienbar - Status, Termine und Prioritaet als
   dieselben Chips wie ueberall, dazu der Backlog-Knopf als grosse Abkuerzung.
   Moritz am 2026-08-01: "Wir haben da doch Platz." */
.steuerung { display: flex; flex-wrap: wrap; gap: var(--s-1); align-items: center; }
.parken-knopf { font-weight: 600; white-space: nowrap; }

/* Leere Eigenschaften erscheinen sonst nur beim Hovern einer `.task-card`.
   In einer Tabelle gibt es die nicht - "+ Geplant" und "+ Fällig" waren
   dadurch am Rechner unsichtbar, obwohl sie im Markup standen. Hier sollen
   sie dauerhaft erreichbar sein: das ist der Zweck der Spalte. */
.steuerung .property-chip.ghost {
  opacity: 0.6;
  max-width: 24ch;
  padding-inline: var(--s-2);
  border-width: 1px;
}
.steuerung .property-chip.ghost:hover,
.steuerung .property-chip.ghost:focus-visible { opacity: 1; }

/* ---------------------------------------------------------------- KI-Schicht
   Agentenlaeufe: Start, Stand, Vorschlaege. Farben ausschliesslich ueber
   Tokens - der Unterschied nutzt dieselben Signalfarben wie der Status, damit
   "hinzugefuegt" hier nicht anders gruen ist als "done" anderswo. */

.ki-start { display: flex; flex-direction: column; gap: var(--s-3); }
.ki-start label { display: flex; flex-direction: column; gap: var(--s-1); color: var(--fg-muted); }
.ki-start select,
.ki-start input[type="text"],
.ki-start textarea {
  background: var(--surface-3); color: var(--fg);
  border: 1px solid var(--line-strong); border-radius: var(--s-1);
  padding: var(--s-2); font: inherit;
}
.ki-start textarea { resize: vertical; min-height: 7em; }
.ki-start button { align-self: flex-start; }
.ki-start option:disabled { color: var(--fg-subtle); }

.ki-status {
  display: inline-block; padding: 0 var(--s-2); border-radius: var(--s-3);
  font-size: 0.85em; border: 1px solid var(--line-strong); color: var(--fg-strong);
}
.status-laeuft { border-color: var(--accent-border); background: var(--accent-soft); }
.status-fertig { border-color: var(--ok); }
.status-fehler { border-color: var(--danger); }
.status-abgebrochen,
.status-verworfen { color: var(--fg-subtle); }
.status-uebernommen { border-color: var(--ok); background: var(--accent-soft); }

.ki-knopf { display: inline-block; margin-right: var(--s-2); }

.ki-vorschlag {
  border-top: 1px solid var(--line); padding: var(--s-2) 0;
}
.ki-vorschlag-kopf {
  display: flex; align-items: center; gap: var(--s-2); cursor: pointer;
  flex-wrap: wrap;
}
.ki-art {
  font-size: 0.8em; padding: 0 var(--s-2); border-radius: var(--s-3);
  border: 1px solid var(--line-strong); color: var(--fg-muted);
}
.ki-art-neu { border-color: var(--ok); color: var(--ok); }
.ki-art-geaendert { border-color: var(--warn); color: var(--warn); }
.ki-art-unveraendert { color: var(--fg-subtle); }
.ki-art-abgelehnt { border-color: var(--danger); color: var(--danger); }

.ki-diff { margin-top: var(--s-2); }
.ki-diff summary { color: var(--fg-muted); cursor: pointer; }
pre.diff, .ki-prompt, .ki-bericht, .ki-ausgabe {
  background: var(--surface-1); border: 1px solid var(--line);
  border-radius: var(--s-1); padding: var(--s-2);
  overflow-x: auto; white-space: pre-wrap; word-break: break-word;
  max-height: 32em; overflow-y: auto;
}
pre.diff span { display: block; }
.diff-plus { color: var(--ok); }
.diff-minus { color: var(--danger); }
.diff-kontextsprung { color: var(--fg-subtle); }
.diff-gleich { color: var(--fg-muted); }

/* ---------------------------------------------------------------- Postgang
   Zwei Spalten: Ordner links, Nachrichten rechts. Auf schmalen Fenstern
   untereinander - die Ordnerliste ist dann eine waagerechte Leiste. */

.postgang { display: grid; grid-template-columns: 15rem 1fr; gap: var(--s-4); }
@media (max-width: 900px) {
  .postgang { grid-template-columns: 1fr; }
  .postgang-spalte { display: flex; flex-wrap: wrap; gap: var(--s-1); }
}

.postgang-spalte { display: flex; flex-direction: column; gap: 2px; }
.postgang-ordner {
  display: flex; align-items: center; gap: var(--s-2);
  padding: var(--s-1) var(--s-2); border-radius: var(--s-1);
  color: var(--fg-muted); text-decoration: none;
}
.postgang-ordner:hover { background: var(--surface-3); }
.postgang-ordner.aktiv { background: var(--accent-soft); color: var(--fg-strong); }
.postgang-ordner-name { flex: 1; }
.postgang-zahl { color: var(--fg-subtle); font-size: 0.85em; }
.postgang-ungelesen {
  background: var(--accent); color: var(--on-accent);
  border-radius: var(--s-3); padding: 0 var(--s-2); font-size: 0.78em;
}

.postgang-zeilen { display: flex; flex-direction: column; }
.postgang-zeile {
  display: grid; grid-template-columns: 11rem 1fr 8rem; gap: var(--s-2);
  padding: var(--s-2); border-top: 1px solid var(--line);
  color: var(--fg-muted); text-decoration: none;
}
.postgang-zeile:hover { background: var(--surface-2); }
.postgang-zeile.ungelesen { color: var(--fg-strong); }
.postgang-zeile.ungelesen .postgang-betreff { font-weight: 600; }
.postgang-betreff { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.postgang-vorschau {
  color: var(--fg-subtle); font-size: 0.88em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.postgang-von, .postgang-datum {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.postgang-datum { color: var(--fg-subtle); text-align: right; }
.postgang-klammer, .postgang-marke {
  font-size: 0.75em; border: 1px solid var(--line-strong);
  border-radius: var(--s-3); padding: 0 var(--s-2); margin-left: var(--s-2);
  color: var(--fg-subtle);
}
.postgang-marke { border-color: var(--ok); color: var(--ok); }

.postgang-text {
  background: var(--surface-1); border: 1px solid var(--line);
  border-radius: var(--s-1); padding: var(--s-3);
  white-space: pre-wrap; word-break: break-word;
  max-height: 42em; overflow-y: auto;
}
.postgang-verlauf { display: flex; flex-direction: column; }
.postgang-verlauf-zeile {
  display: grid; grid-template-columns: 10rem 10rem 1fr; gap: var(--s-2);
  padding: var(--s-1) var(--s-2); border-top: 1px solid var(--line);
  color: var(--fg-muted); text-decoration: none;
}
.postgang-verlauf-zeile:hover { background: var(--surface-2); }
.postgang-verlauf-zeile.aktiv { background: var(--accent-soft); color: var(--fg-strong); }

/* ------------------------------------------------------- Abendroutine & HITL */
.abend-sprung { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-bottom: var(--s-4); }
.abend-sprung a {
  color: var(--fg-muted); text-decoration: none; font-size: 0.9em;
  border: 1px solid var(--line); border-radius: var(--s-3); padding: 0 var(--s-2);
}
.abend-sprung a:hover { border-color: var(--accent-border); color: var(--fg-strong); }
.abend-modul { scroll-margin-top: var(--s-4); }
.abend-liste { margin: 0; padding-left: var(--s-4); }
.abend-liste li { margin: 2px 0; }

.hitl-kategorie { display: flex; align-items: center; gap: var(--s-2); }
.hitl-zahl {
  font-size: 0.75em; border: 1px solid var(--line-strong);
  border-radius: var(--s-3); padding: 0 var(--s-2); color: var(--fg-subtle);
}
.hitl-nr { color: var(--fg-subtle); white-space: nowrap; }
.hitl-kontext { font-size: 0.9em; color: var(--fg-muted); }
.hitl-auswahl {
  background: var(--surface-3); color: var(--fg);
  border: 1px solid var(--line-strong); border-radius: var(--s-1);
  padding: var(--s-1); font: inherit;
}
.hitl-formular > button { margin-top: var(--s-3); }

/* ------------------------------------------------- Haus: Kosten und Quartale */
.quartale { display: flex; flex-direction: column; gap: 2px; }
.quartal-zeile {
  display: grid; grid-template-columns: 7rem 1fr 8rem 3rem;
  align-items: center; gap: var(--s-2);
  padding: var(--s-1) var(--s-2); border-radius: var(--s-1);
  color: var(--fg-muted); text-decoration: none;
}
.quartal-zeile:hover { background: var(--surface-3); }
.quartal-zeile.jetzt { color: var(--fg-strong); }
.quartal-zeile.jetzt .quartal-name::after { content: " ·  jetzt"; color: var(--accent); }
.quartal-zeile.gewaehlt { background: var(--accent-soft); color: var(--fg-strong); }
.quartal-balken {
  background: var(--surface-3); border-radius: var(--s-3); height: 10px;
  overflow: hidden;
}
.quartal-balken > span {
  display: block; height: 100%; background: var(--accent); border-radius: var(--s-3);
}
.quartal-summe { text-align: right; font-variant-numeric: tabular-nums; }
.quartal-zahl { text-align: right; color: var(--fg-subtle); font-size: 0.85em; }

.raum-chips { display: flex; flex-wrap: wrap; gap: var(--s-1); margin-bottom: var(--s-3); }
.raum-chip {
  font-size: 0.82em; padding: 0 var(--s-2); border-radius: var(--s-3);
  border: 1px solid var(--line); color: var(--fg-subtle); text-decoration: none;
}
.raum-chip:hover { border-color: var(--accent-border); color: var(--fg); }
.raum-chip.aktiv { background: var(--accent-soft); border-color: var(--accent-border); color: var(--fg-strong); }

table.hauskosten td.zahl,
table.hauskosten th { white-space: nowrap; }
table.hauskosten td.zahl { text-align: right; font-variant-numeric: tabular-nums; }
table.hauskosten td.stark { color: var(--fg-strong); }
a.sortlink { color: inherit; text-decoration: none; }
a.sortlink:hover { color: var(--accent); }

/* Eingabefelder in der Kostentabelle - schmal, damit zwoelf Spalten passen. */
.kostenfeld {
  background: var(--surface-3); color: var(--fg);
  border: 1px solid var(--line); border-radius: var(--s-1);
  padding: 2px var(--s-1); font: inherit; width: 6.5rem;
  font-variant-numeric: tabular-nums;
}
.kostenfeld:focus { border-color: var(--accent-border); outline: none; }
table.hauskosten .hitl-auswahl { width: 7.5rem; padding: 2px var(--s-1); }
table.hauskosten td { vertical-align: middle; }

/* Die erste Spalte bleibt stehen. Die Tabelle ist 1474 Pixel breit, auf dem
   Telefon sind 325 davon sichtbar: ohne feste Aufgabenspalte traegt man Zahlen
   in eine Zeile ein, deren Namen man nicht mehr sieht. Das ist genau der
   Fehler, den Excel auf dem Telefon gemacht hat. */
table.hauskosten th:first-child,
table.hauskosten td:first-child {
  position: sticky; left: 0; z-index: 2;
  background: var(--surface-2);
  max-width: 11rem; white-space: normal;
  box-shadow: 1px 0 0 var(--line);
}
table.hauskosten th:first-child { z-index: 3; background: var(--surface-3); }
table.hauskosten tbody tr:hover td:first-child { background: var(--surface-1); }

/* Und die letzte Spalte auch: der Speichern-Knopf lag bei 1364 Pixeln, also
   auf dem Telefon weit rechts vom gerade eingetippten Betrag. */
table.hauskosten th:last-child,
table.hauskosten td:last-child {
  position: sticky; right: 0; z-index: 2;
  background: var(--surface-2);
  box-shadow: -1px 0 0 var(--line);
}
table.hauskosten th:last-child { z-index: 3; background: var(--surface-3); }
table.hauskosten tbody tr:hover td:last-child { background: var(--surface-1); }

/* Schnelleingabe im Tag: ein Feld, eine Tageszeit, fertig. Der Weg ueber das
   Anlegeformular ist fuer "Geld abheben" zu viel. */
.schnellzeile { display: flex; gap: var(--s-2); align-items: center;
  flex-wrap: wrap; margin-bottom: var(--s-3); }
.schnellzeile input[type="text"] { flex: 1 1 18rem; min-width: 12rem; }

/* Haken an der Aufgabenkarte: ein Klick statt Chip und Menue. */
.karte-haken {
  float: right; margin-left: var(--s-2);
  background: transparent; border: 1px solid var(--line);
  color: var(--fg-muted); border-radius: var(--r-full);
  width: 1.6rem; height: 1.6rem; line-height: 1; padding: 0; cursor: pointer;
}
.karte-haken:hover { color: var(--st-done); border-color: var(--st-done); }
.task-card.karte-erledigt { opacity: 0.45; text-decoration: line-through; }

/* Das Haekchen als Form, nicht als Zeichen: `icons.strip()` entfernt Symbole
   aus dem Seiteninhalt, ein ✓ im Knopftext kam nie an. */
.haken-form {
  display: block; width: 0.42rem; height: 0.78rem; margin: 0.1rem auto 0;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
}

/* Tagesformular in der Arbeitszeitliste. Zugeklappt eine Zeile Text, offen
   ein vollstaendiges Formular - Moritz muss den Tag korrigieren koennen, wo
   er ihn sieht, nicht in einer zweiten Ansicht. */
.az-details > summary {
  cursor: pointer;
  font-size: var(--fs-micro);
  color: var(--fg-muted);
  padding: 2px 0;
}
.az-details[open] > summary { color: var(--fg); }
.az-tagform {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: end;
  padding: var(--space-2) 0;
  white-space: normal;
}
.az-tagform label {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: var(--fs-micro);
  color: var(--fg-muted);
}
.az-tagform .az-inline-check { flex-direction: row; align-items: center; gap: 4px; }
@media (max-width: 720px) {
  .az-tagform { flex-direction: column; align-items: stretch; }
  .az-tagform select, .az-tagform input[type="time"] { width: 100%; }
}

/* --- Mermaid-Flowcharts, serverseitig gezeichnet ---------------------
   Keine style-Attribute: die Auslieferung laeuft unter style-src 'self'
   ohne unsafe-inline. Farben kommen aus den Tokens, damit das Diagramm
   nicht wie ein Fremdkoerper in der Notiz sitzt. */
.mermaid-figur {
  margin: var(--s-3) 0;
  padding: var(--s-3);
  background: var(--surface-1);
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  overflow-x: auto;
}
.mermaid-svg { max-width: 100%; height: auto; display: block; }
.mermaid-knoten { fill: var(--surface-2); stroke: var(--line-strong); stroke-width: 1; }
.mermaid-text { fill: var(--fg); font-family: var(--font-ui); font-size: 13px; }
.mermaid-kante { stroke: var(--fg-subtle); stroke-width: 1.5; fill: none; }
.mermaid-kante.gestrichelt { stroke-dasharray: 4 3; }
.mermaid-pfeil { fill: var(--fg-subtle); }
.mermaid-kantentext { fill: var(--fg-muted); font-family: var(--font-ui); font-size: 11px; }
.mermaid-quelle summary { cursor: pointer; font-size: var(--fs-micro); color: var(--fg-subtle); }
.mermaid-hinweis { margin: 0 0 var(--s-2); font-size: var(--fs-sm); color: var(--fg-muted); }

/* Zeilenformulare der Kostentabelle. Sie stehen ausserhalb der Tabelle, weil
   der HTML-Parser in <tr> kein <form> zulaesst; die Felder verweisen ueber das
   form-Attribut darauf. Sichtbar ist daran nichts. */
.zeilenformular { display: contents; }

/* --- HITL Evening Routine Dashboard (Mac Desktop 4-Column Layout) --- */
.abend-hero { margin-bottom: var(--s-4); }
.abend-abschnitt { margin-bottom: var(--s-4); }

.styled-table.hitl-mac {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
}

.styled-table.hitl-mac th:nth-child(1),
.styled-table.hitl-mac td.hitl-col-element { width: 44%; }

.styled-table.hitl-mac th:nth-child(2),
.styled-table.hitl-mac td.hitl-col-status { width: 16%; }

.styled-table.hitl-mac th:nth-child(3),
.styled-table.hitl-mac td.hitl-col-empfehlung { width: 20%; }

.styled-table.hitl-mac th:nth-child(4),
.styled-table.hitl-mac td.hitl-col-aktion { width: 20%; }

.hitl-element-head {
  display: flex;
  align-items: center;
  gap: var(--s-1);
  margin-bottom: 2px;
}
.hitl-nr-chip {
  font-size: var(--fs-micro);
  font-weight: 600;
  color: var(--fg-subtle);
  background: var(--surface-3);
  padding: 1px 6px;
  border-radius: var(--r-full);
}
.hitl-titel { font-size: var(--fs-base); font-weight: 600; color: var(--fg-strong); }
.hitl-deep-kontext { font-size: var(--fs-sm); color: var(--fg-muted); line-height: 1.45; }

.hitl-status-box { font-size: var(--fs-sm); color: var(--fg-muted); }
.hitl-empfehlung-box { font-size: var(--fs-sm); color: var(--fg-strong); font-weight: 500; }

.hitl-drawer { margin-top: 4px; }
.hitl-drawer summary { cursor: pointer; color: var(--accent); font-size: var(--fs-micro); }
.hitl-drawer-body {
  margin-top: 4px;
  padding: var(--s-2);
  background: var(--surface-3);
  border-radius: var(--r-2);
  font-size: var(--fs-sm);
}

.hitl-steuerung { display: flex; flex-direction: column; gap: var(--s-1); }
.hitl-kommentar { width: 100%; font-size: var(--fs-sm); padding: 4px var(--s-2); }

.hitl-btn-group {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  margin-bottom: 2px;
}

.btn-hitl {
  font-size: 0.72rem;
  padding: 3px 6px;
  border: 1px solid var(--line);
  background: var(--surface-3);
  color: var(--fg-muted);
  border-radius: var(--r-1);
  cursor: pointer;
  white-space: nowrap;
  transition: all var(--dur) var(--ease);
}

.btn-hitl:hover {
  background: var(--surface-4);
  color: var(--fg-strong);
  border-color: var(--line-strong);
}

.btn-hitl.active {
  background: var(--accent);
  color: var(--on-accent);
  border-color: transparent;
  font-weight: 600;
}

.btn-hitl.danger-quiet.active {
  background: var(--danger);
  color: #fff;
  border-color: transparent;
}

.hitl-submit-bar {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin-top: var(--s-4);
  padding: var(--s-3);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r-3);
}

/* Aus `ui/layout.py` hierher geholt: zwei inline-styles im gemeinsamen Rahmen
   liessen jede einzelne Route in check_design.py rot werden - 21 Stueck, eine
   Ursache. Die CSP verbietet ohnehin `unsafe-inline` fuer Skripte; Stile
   gehoeren aus demselben Grund hierher. */
.larry-dictation-btn { margin-right: 8px; }
#larry_chat_mention_query { flex: 1; }
.larry-chat-verlauf-label { font-size: 0.72rem; color: var(--fg-muted); }
.larry-chat-mention-zeile { display: flex; gap: 4px; align-items: center; }

/* Aus `views/note.py` hierher: die Kommentarspalte trug vier inline-styles
   und war damit die letzte rote Route in check_design.py. */
.comments-list { max-height: 240px; overflow-y: auto; margin-bottom: var(--s-2); }
.comment-form { display: flex; flex-direction: column; gap: var(--s-1); }
.comment-form textarea {
  width: 100%; font-size: 0.85rem; border-radius: var(--r-1);
  border: 1px solid var(--line); padding: var(--s-1);
}
.comment-actions { display: flex; gap: 6px; justify-content: flex-end; }

/* Die Auswahl nach dem Linkswisch. Sie sitzt in der Karte, damit klar ist,
   welche Aufgabe gemeint ist - ein zentriertes Menue verliert diesen Bezug,
   sobald mehrere Karten untereinander stehen. */
.swipe-menue {
  display: flex; flex-wrap: wrap; gap: var(--s-1);
  margin-top: var(--s-1); padding-top: var(--s-1);
  border-top: 1px solid var(--line);
}
.swipe-menue .nav-btn { flex: 1 1 auto; min-height: 40px; }
.swipe-fehler { outline: 2px solid var(--danger, #f38ba8); }