/* Design-Tokens.
 *
 * Die Catppuccin-Farben bleiben - sie gefallen Moritz. Neu ist das System
 * darunter: vorher waren Abstaende, Schriftgroessen und Radien freie
 * px-Literale (neun verschiedene Radien, sieben Schriftgroessen), und vier
 * Farbwerte liefen am Token-System vorbei.
 *
 * Zielbild: Notion, Capacities, Craft. Farbe ist Information, nicht Struktur.
 */

:root {
  /* Flaechen */
  --bg: #11111b;
  --surface-1: #181825;
  --surface-2: #1e1e2e;
  --surface-3: #252538;
  --surface-4: #313244;

  /* Drei Ebenen: Seitenleiste, Seite, Karte. Die Seitenleiste liegt eine
     Stufe unter der Seite, Karten eine Stufe darueber - so sieht man den
     Unterschied auch ohne Rahmen. Karten und Spalten nehmen --layer-card. */
  --layer-side: #0c0c13;
  --layer-page: var(--bg);
  --layer-card: var(--surface-2);

  /* Text - Ruhe ist eine Tokenstufe, kein Opacity-Regler */
  --fg: #cdd6f4;
  --fg-muted: #a6adc8;
  --fg-quiet: #9aa0b9;
  --fg-subtle: #8c91ab;
  --fg-strong: #eef1ff;

  /* --- Vier Bedeutungsachsen, kein Farbwert in zweien ------------------
   *
   * Moritz am 2026-07-31: "Next und Kontext haben genau die gleiche lila
   * Magentafarbe. Warum? Wie ist das klare Farbkonzept?" - berechtigt, und
   * der Befund war groesser als gemeldet. Vier Werte standen doppelt:
   * --st-next == --relation, --st-waiting == --st-paused,
   * --prio-low == --accent == --st-open und --tag == --st-in-progress.
   *
   * Achse 1  Status      Lebenszyklus, Rampe grau -> kuehl -> warm -> gruen
   * Achse 2  Beziehung   Entitaeten, Projekte, Kontexte - eine eigene Familie
   * Achse 3  Tags        neutral gedaempft, nie ein Bedeutungston
   * Achse 4  Prioritaet  nur als Randmarke, nie als Flaechenfarbe
   * Dazu     Akzent      die Oberflaeche selbst (Knoepfe, Links)
   *
   * Farbe traegt nie allein: Status hat zusaetzlich den Punkt, Prioritaet die
   * Randmarke, Tags und Entitaeten unterscheiden sich in der Chipform. Das
   * ist keine Kosmetik - ein Achtel der Maenner sieht Rot und Gruen anders,
   * und ein Farbsystem, das nur ueber Farbton arbeitet, faellt dort aus.
   *
   * Wer hier etwas aendert: check_design.py prueft, dass kein Hexwert in zwei
   * Achsen vorkommt, und wird rot.
   */

  /* Akzent - die Oberflaeche, keine Bedeutungsachse */
  --accent: #89b4fa;
  --accent-soft: rgba(137, 180, 250, 0.12);
  --accent-border: rgba(137, 180, 250, 0.38);
  --on-accent: #11111b;

  /* Achse 2: Beziehung */
  --relation: #cba6f7;
  --relation-soft: rgba(203, 166, 247, 0.12);
  --relation-border: rgba(203, 166, 247, 0.28);

  /* Achse 3: Tags - bewusst neutral. Ein Tag sagt "wozu gehoert das",
     nicht "wie dringend" - er soll nicht mit Status um Aufmerksamkeit
     ringen. Vorher trug er das Teal von in-progress. */
  --tag: #9399b2;
  --tag-soft: rgba(147, 153, 178, 0.10);
  --tag-border: rgba(147, 153, 178, 0.28);

  /* Haarlinien statt Vollgrau - das ist der groesste Teil des Notion-Eindrucks */
  --line: rgba(205, 214, 244, 0.10);
  --line-strong: rgba(205, 214, 244, 0.18);
  --chip-ueberfaellig: var(--st-waiting);
  --chip-relation: var(--relation);

  /* Achse 4: Prioritaet. Nur high und medium tragen Farbe - das ist die
     Entscheidung, die man sehen muss. low und none bleiben still, sonst
     leuchtet die Liste ueberall und nirgends. */
  --prio-high: #f38ba8;
  --prio-medium: #fab387;
  --prio-low: #74c7ec;
  --prio-none: #45475a;

  /* Achse 1: Status - alle acht kanonischen Werte, als Lebenszyklus lesbar.
     backlog und next sind grau (liegt herum, kein Datum), open und
     in-progress kuehl (eingeplant, laeuft), waiting und paused warm
     (haengt), done gruen, cancelled grau und ruhig (Text mindestens 4,5:1). */
  --st-backlog: #8a8fa8;
  --st-next: #9aa0b9;
  --st-open: #89dceb;
  --st-in-progress: #94e2d5;
  --st-waiting: #f9e2af;
  --st-paused: #f2cdcd;
  --st-done: #a6e3a1;
  --st-cancelled: #888da6;

  --danger: #f38ba8;
  --warn: #fab387;
  --ok: #a6e3a1;

  /* Textmarkierung (Editor und Lesesicht): ein Stift in vier Farben. Text ist --mark-fg auf der Farbfläche
     (gemessen mindestens 7,6 zu 1 dunkel, 10,5 hell); die Unterkante trägt die Farbe auch dort, wo die Fläche
     sich kaum vom Grund abhebt (Kante gegen Seitengrund mindestens 4,2 zu 1). */
  --mark-fg: #eef1ff;
  --mark-gelb: #5c4a0e;
  --mark-gelb-kante: #c9a227;
  --pflicht-rand: var(--mark-gelb-kante);   /* Rand eines leeren Pflichtfeldes (Basics B2): gelb, Bauteil >= 3:1 */
  --mark-gruen: #1f5130;
  --mark-gruen-kante: #4fae6e;
  --mark-rot: #6b2236;
  --mark-rot-kante: #d9627f;
  --mark-blau: #1f4a7a;
  --mark-blau-kante: #4f8fd6;

  /* Abstaende: 4er-Basis. Kein rohes px mehr an Abstandspositionen. */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;

  /* Typografie: UI 13, Prosa 15 */
  --fs-micro: 11px;
  --fs-sm: 12px;
  --fs-base: 13px;
  --fs-ui: 14px;
  --fs-md: 15px;
  --fs-lg: 17px;
  --fs-xl: 21px;
  --fs-2xl: 28px;
  --lh-tight: 1.25;
  --lh-base: 1.5;
  --lh-prose: 1.7;
  --tracking-label: 0.06em;

  --font-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;

  /* Radien: vier statt neun */
  --r-1: 4px;
  --r-2: 6px;
  --r-3: 10px;
  --r-full: 999px;

  /* Schatten nur fuer wirklich schwebende Flaechen */
  --shadow-pop: 0 12px 40px rgba(0, 0, 0, 0.45);
  --scrim: rgba(8, 8, 14, 0.62);

  /* Zeilenhoehen je Dichte - ~35 Prozent mehr Zeilen bei gleicher Information */
  --row-ultracompact: 24px;
  --row-compact: 28px;
  --row-normal: 34px;

  /* Seitenleiste: Zeile 32 px, Beruehrflaeche auf dem Handy 44 px */
  --row-nav: 32px;
  --tap: 44px;
  --sb-w: 248px;
  --sb-rail: 56px;

  --measure-app: 1440px;
  --measure-prose: 72ch;

  --dur: 140ms;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}
/* 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);
}

.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 ----------------------------------------------------------- */

/* Board, Spalten und Karten: Abschnitt "Ansichtsleiste, Board, Karten" am Ende dieser Datei. */

.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(--chip-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; }

/* --- 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); }
  .search-form { flex: 1; margin-left: 0; width: auto; min-width: 0; }
  .search-form input { width: 100%; min-width: 0; }
}
@media (max-width: 460px) {
  main { padding: var(--s-2); }
  .nav-btn { font-size: var(--fs-sm); }
  .property-chip { max-width: 14ch; }
}

@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); }

/* --- 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; }

/* 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-embed { width: 100%; height: 100%; min-height: 70vh; border: 0; display: block; }

/* 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: 1;
    color: var(--fg-quiet);
    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; }
}

/* --- 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; grid-template-columns: minmax(0, 1fr); 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);
}
.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; }
.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; }
  .app-stage > 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; }
}

/* --- Suche ------------------------------------------------------------ */
.search-group { margin-bottom: var(--s-4); }
.search-form { position: relative; }
.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) {
  .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); }

/* --- 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: 1;
    color: var(--fg-quiet);
    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; }
}

.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(--chip-ueberfaellig); border-color: var(--st-waiting); }

.event-item { display: flex; align-items: baseline; gap: var(--s-2); }
/* Termine in der Heute-Seitenspalte (300 px): Zeit | Titel | Notiz in einer Zeile, Kalender und Ort darunter.
   Vorher lief die Zeile mit den Kalender-Chips ueber den rechten Rand hinaus (Moritz 2026-10-17, Screenshot). */
.today-aside { min-width: 0; }
.today-events .event-list { gap: 0; }
.today-events .event-item {
  display: grid; grid-template-columns: 4.5rem minmax(0, 1fr) auto;
  gap: 2px var(--s-2); align-items: start; min-width: 0;
  padding: var(--s-2) 0; border-top: 1px solid var(--line);
}
.today-events .event-item:first-child { border-top: 0; }
.today-events .event-time { grid-column: 1; grid-row: 1; }
.today-events .event-title { grid-column: 2; grid-row: 1; white-space: normal; overflow-wrap: anywhere; font-weight: 500; }
.today-events .event-item > .btn-xs { grid-column: 3; grid-row: 1; }
.today-events .event-item > .property-chip { grid-column: 2 / -1; justify-self: start; max-width: 100%; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.today-events .event-meta { grid-column: 2 / -1; overflow-wrap: anywhere; }
.today-events .event-meta:empty { display: none; }
.today-calendar { min-width: 0; }
.today-calendar-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-2); flex-wrap: wrap; }

/* 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: 1; color: var(--fg-quiet); } }


/* 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: var(--on-accent); border-color: var(--accent); font-weight: 600; }
.triage-btn.primary { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.triage-btn.primary:hover { opacity: 0.9; }
.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); }
.pdf-annotation-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr); gap: var(--s-4); align-items: start; }
.pdf-page-stage { position: relative; width: fit-content; max-width: 100%; touch-action: none; user-select: none; background: var(--surface-2); }
.pdf-page-stage img { display: block; max-width: 100%; height: auto; }
.pdf-mark-rect { position: absolute; border: 2px solid var(--accent); background: color-mix(in srgb, var(--accent) 28%, transparent); pointer-events: none; }
.pdf-annotation-grid form { display: grid; gap: var(--s-3); }
.pdf-annotation-grid label { display: grid; gap: var(--s-1); }
@media (max-width: 800px) { .pdf-annotation-grid { grid-template-columns: 1fr; } }
@media (max-width: 800px) {
  .mobile-menu, .larry-dictation-btn, .search-form input, .search-form button,
  .note-toolbar .nav-btn, .note-tabs button, .capture-form input,
  .capture-form select, .capture-form button, .capture-form .nav-btn,
  .pdf-annotation-grid input, .pdf-annotation-grid textarea,
  .pdf-annotation-grid button, .pdf-annotation-grid .nav-btn,
  .comment-form textarea, .comment-form button { min-height: 44px; }
}


.triage-erledigt { opacity: 0.55; }

/* 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); }

/* 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: 1;
  color: var(--fg-quiet);
  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; }
.selection-context, .comment-anchor { display: block; color: var(--accent); font-size: var(--fs-sm); }
.selection-context { margin: 0; padding: var(--s-2); background: var(--surface-2); border-radius: var(--r-2); }
.comment-anchor { margin-top: var(--s-1); text-decoration: none; }
.source-anchor-focus { outline: 3px solid var(--accent); outline-offset: 4px; border-radius: var(--r-1); }

/* Der Eintrag selbst trug seine Gestaltung ebenfalls inline - und `style-src
   'self'` verwirft das seit dem 28.07. ersatzlos. Die Kommentarliste stand
   also unformatiert da, ohne dass jemand es als Fehler gemeldet haette.
   Dazu kam ein zweiter Fehler: die inline-Regeln riefen `--amber`,
   `--amber-soft`, `--green` und `--green-soft` auf. Keines dieser Token gibt
   es in `tokens.css`. Selbst ohne CSP waere die Farbe leer geblieben.
   Hier gilt Achse 1 (Status), weil genau das gemeint ist. */
.comment-item {
  margin-bottom: var(--s-2); padding: var(--s-1);
  background: var(--surface-2); border-radius: var(--r-1);
  border-left: 3px solid var(--line);
}
.comment-item.offen { border-left-color: var(--st-waiting); }
.comment-item.erledigt { border-left-color: var(--st-done); }
.comment-meta {
  font-size: var(--fs-sm); margin-bottom: 2px; display: flex;
  flex-wrap: wrap; gap: var(--s-1); align-items: center;
}
.comment-text { margin: 0; font-size: var(--fs-base); white-space: pre-wrap; }
.comment-status {
  font-size: var(--fs-micro); padding: 1px 5px; border-radius: var(--r-1);
  border: 1px solid var(--line);
}
.comment-status.offen { color: var(--st-waiting); }
.comment-status.erledigt { color: var(--st-done); }

/* Der Verweis auf den KI-Auftrag. Er sagt am Kommentar, ob jemand geantwortet
   hat - vorher war der Auftrag ein Briefkasten ohne Rueckweg. */
.comment-auftrag {
  font-size: var(--fs-micro); padding: 1px 5px; border-radius: var(--r-1);
  text-decoration: none; border: 1px solid var(--line);
}
.comment-auftrag.laeuft { color: var(--fg-muted); }
.comment-auftrag.fertig { color: var(--st-done); border-color: var(--st-done); }
.comment-auftrag.fehlt { color: var(--danger); border-color: var(--danger); }
.comment-close { display: inline-block; margin-top: var(--s-1); }
.comment-erledigt-am {
  display: block; margin-top: var(--s-1); font-size: var(--fs-micro);
}

/* 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); }

/* Telefonlisten-Triage. Die Vorgaengerfassung trug ihre Gestaltung in
   style-Attributen; `style-src 'self'` verwirft die seit dem 28.07., die
   Seite stand also formatlos da. */
.telefon-quellen { display: flex; flex-wrap: wrap; gap: var(--s-3);
  align-items: center; margin-top: var(--s-2); }
.quellen-wahl { display: flex; align-items: center; gap: var(--s-1);
  font-size: var(--fs-sm); }
.telefon-suche { display: flex; gap: var(--s-2); margin-top: var(--s-2); }
.telefon-suche input[type="search"] { flex: 1; padding: var(--s-1);
  border: 1px solid var(--line); border-radius: var(--r-1);
  background: var(--surface-2); color: var(--fg); }
.telefon-liste { display: grid; gap: var(--s-3); margin-top: var(--s-3); }
.telefon-karte { background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--r-1); padding: var(--s-3); }
.telefon-karte.mehrfach { border-left: 3px solid var(--accent); }
.telefon-kopf { display: flex; justify-content: space-between;
  flex-wrap: wrap; gap: var(--s-3); align-items: flex-start; }
.telefon-kopf h3 { margin: 0; font-size: var(--fs-md); }
.telefon-nummer { margin: 2px 0 0; font-variant-numeric: tabular-nums;
  font-size: var(--fs-md); color: var(--accent); }
.telefon-wahl { display: flex; gap: var(--s-3); flex-wrap: wrap;
  font-size: var(--fs-sm); }
.telefon-wahl label { display: flex; align-items: center; gap: var(--s-1); }
.fundstellen-kopf { margin-top: var(--s-3); font-size: var(--fs-micro);
  text-transform: uppercase; letter-spacing: 0.5px; color: var(--fg-subtle); }
.fundstellen { display: grid; gap: var(--s-1); margin-top: var(--s-1);
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.fundstelle { background: var(--surface-3); border-radius: var(--r-1);
  padding: var(--s-1) var(--s-2); font-size: var(--fs-sm); }
.fundstelle-quelle { display: block; font-size: var(--fs-micro);
  color: var(--fg-muted); }
.fundstelle-umfeld { display: block; color: var(--fg-muted);
  font-size: var(--fs-micro); margin-top: 2px; }
.telefon-notiz { width: 100%; margin-top: var(--s-2); padding: var(--s-1);
  border: 1px solid var(--line); border-radius: var(--r-1);
  background: var(--surface-1); color: var(--fg); font-size: var(--fs-sm); }
.telefon-fussleiste { display: flex; justify-content: space-between;
  align-items: center; flex-wrap: wrap; gap: var(--s-3);
  margin-top: var(--s-4); position: sticky; bottom: 0;
  background: var(--bg); padding: var(--s-2) 0; }

/* Identity aliases and the two-step rename form share the existing UI tokens. */
.alias-notice a,
.rename-shell a.nav-btn {
  color: var(--fg);
  text-decoration: underline;
  display: inline-flex;
  align-items: center;
}
.rename-shell .muted-line,
.rename-shell .styled-table th,
.alias-notice .muted-line,
.alias-notice .object-kind { color: var(--fg); }
.rename-shell { max-inline-size: var(--measure-prose); }
.rename-shell form { display: grid; gap: var(--s-3); }
.rename-shell label { display: grid; gap: var(--s-2); color: var(--fg); }
.rename-shell input:not([type="hidden"]) { inline-size: 100%; min-inline-size: 0; }
.rename-shell button { justify-self: start; white-space: normal; }
.rename-shell :is(input:not([type="hidden"]), button, a):focus-visible,
.alias-notice a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (max-width: 720px), (pointer: coarse) {
  .rename-shell input:not([type="hidden"]),
  .rename-shell button,
  .rename-shell a.nav-btn,
  .alias-notice a {
    min-inline-size: var(--s-7);
    min-block-size: var(--s-7);
    padding: var(--s-3);
  }
  .rename-shell button { inline-size: 100%; }
}

/* =========================================================================
 * Ansichtsleiste, Board und Karten (Dashboard, Liste, Baum)
 *
 * Design-Synthese 27, Paket B. Muster: Linear (Status-Symbol links, Meta-Zeile,
 * Aktionen bei Hover), Fibery (Status-Kreis), Notion (ruhige Spalten),
 * Airtable (Reiter mit Unterstrich, Filter-Chips, "Speichern" bei Abweichung).
 *
 * Regeln: Ebenen statt Rahmen (Seite < Spalte < Karte < Hover), Status ueber
 * die Form, Prioritaet nur als schmaler Rand bei `high`, Text in --fg-muted
 * statt --fg-subtle (AA), nur Tokens - keine Roh-Hex ausser in tokens.css.
 * Alles hier haengt an `.dash-wrap`, damit /today und andere Seiten, die
 * `.task-card` teilen, unveraendert bleiben.
 * ========================================================================= */

:root {
  /* Anteil der Vordergrundfarbe im Statussymbol, damit es 3:1 gegen Karte, Spalte und
     Hover erreicht (gemessen): dunkel leicht aufgehellt, hell deutlich abgedunkelt. */
  --sym-mix: 14%;
  --text-warn: var(--warn);
  --text-danger: var(--danger);
  --text-relation: var(--relation);
}
:root[data-theme="light"] {
  --sym-mix: 40%;
  --text-warn: color-mix(in srgb, var(--warn) 55%, var(--fg-strong));
  --text-danger: color-mix(in srgb, var(--danger) 88%, var(--fg-strong));
  --text-relation: color-mix(in srgb, var(--relation) 78%, var(--fg-strong));
}

/* --- Kopf ------------------------------------------------------------- */
.dash-wrap .view-heading { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); flex-wrap: wrap; margin: 0 0 var(--s-3); }
.dash-wrap .view-heading > div { flex: 0 1 auto; }
.dash-wrap .kopf-titel { display: flex; align-items: center; gap: var(--s-2); }
.dash-wrap .view-heading h1 { flex: none; font-size: var(--fs-xl); font-weight: 600; letter-spacing: -0.01em; color: var(--fg-strong); }
.kopf-zahl {
  display: inline-flex; align-items: center; height: 22px; padding: 0 var(--s-2);
  border-radius: var(--r-full); background: var(--surface-3); color: var(--fg-muted);
  font-size: var(--fs-sm); font-weight: 600; font-variant-numeric: tabular-nums;
}
.kopf-neu { display: flex; gap: var(--s-2); }
.kopf-neu .nav-btn { display: inline-flex; align-items: center; min-height: 32px; padding: 0 var(--s-3); border: 1px solid var(--line-strong); border-radius: var(--r-2); }
.kopf-neu .nav-btn.primary { border-color: transparent; }

/* --- Reiter: Unterstrich statt Rahmen ---------------------------------- */
.ansicht-tabs {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0 var(--s-1);
  margin: 0 0 var(--s-3); border-bottom: 1px solid var(--line);
}
.ansicht-tab {
  position: relative; display: inline-flex; align-items: center; min-height: 36px;
  margin-bottom: -1px; padding: 0 var(--s-3);
  border-bottom: 2px solid transparent; border-radius: var(--r-2) var(--r-2) 0 0;
  color: var(--fg-muted); font-size: var(--fs-base); white-space: nowrap;
  transition: color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.ansicht-tab:hover { color: var(--fg-strong); background: var(--surface-3); }
.ansicht-tab.aktiv { color: var(--fg-strong); font-weight: 600; border-bottom-color: var(--accent); }
.ansicht-plus { list-style: none; cursor: pointer; color: var(--fg-muted); }
.ansicht-plus::-webkit-details-marker { display: none; }
.ansicht-neu { position: relative; }
.ansicht-neu[open] > .ansicht-plus { color: var(--fg-strong); background: var(--surface-3); }
.ansicht-neu-form {
  position: absolute; z-index: 40; top: calc(100% + var(--s-1)); left: 0; display: flex; gap: var(--s-2);
  padding: var(--s-3); background: var(--surface-2); border: 1px solid var(--line-strong);
  border-radius: var(--r-3); box-shadow: var(--shadow-pop);
}
.ansicht-neu-form input[type="text"] { width: 14rem; min-height: 32px; }
.ansicht-neu + * { margin-left: auto; }
.ansicht-verwalten, .wl-schalter {
  align-self: center; padding: var(--s-1) var(--s-2); border: 0; background: transparent;
  color: var(--fg-muted); font-size: var(--fs-sm); border-radius: var(--r-1);
}
.ansicht-verwalten:hover, .wl-schalter:hover { color: var(--fg-strong); background: var(--surface-3); }
.ansicht-neu + .ansicht-verwalten + .wl-schalter { margin-left: 0; }

/* --- Werkzeugleiste ------------------------------------------------------ */
.dash-wrap.wl-aus .wl-aussen { display: none; }
.wl-huelle { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); margin: 0 0 var(--s-4); }
.dash-wrap .werkzeugleiste {
  flex: 1 1 auto; display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3);
  margin: 0; padding: 0; background: transparent; border: 0; border-radius: 0;
}
.wl-chips { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); }
.wl-rechts { margin-left: auto; display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); }

/* Segmentschalter (Ansicht, Dichte): echte Radios, nur anders gemalt. */
.seg-gruppe { display: inline-flex; gap: 2px; padding: 2px; background: var(--surface-3); border-radius: var(--r-2); }
.seg { position: relative; display: inline-flex; }
.dash-wrap .seg input {
  position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0;
  opacity: 0; cursor: pointer; border: 0;
}
.seg span {
  display: inline-flex; align-items: center; min-height: 28px; padding: 0 var(--s-3);
  border-radius: var(--r-1); color: var(--fg-muted); font-size: var(--fs-sm); font-weight: 500;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.seg:hover input:not(:checked) + span { color: var(--fg-strong); }
.seg input:checked + span { background: var(--surface-2); color: var(--fg-strong); font-weight: 600; box-shadow: 0 0 0 1px var(--line-strong); }
.seg input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 1px; }

/* Filter-Chips */
.fchip {
  position: relative; display: inline-flex; align-items: center; max-width: 26ch; min-height: 28px;
  padding: 0 var(--s-3); border: 1px solid var(--line-strong); border-radius: var(--r-full);
  background: transparent; color: var(--fg-muted); font-size: var(--fs-sm); cursor: pointer;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.fchip::after, .fchip-feld > summary::after {
  content: ""; flex: none; width: 5px; height: 5px; margin: -3px 0 0 var(--s-2);
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg);
}
.fchip-feld::after { content: none; }
.fchip:hover { background: var(--surface-3); color: var(--fg-strong); }
.fchip.aktiv { background: var(--accent-soft); border-color: var(--accent-border); color: var(--fg-strong); font-weight: 600; }
.fchip.aktiv:not(.fchip-feld)::before { content: attr(data-name) ":"; margin-right: var(--s-1); color: var(--fg-muted); font-weight: 400; }
.fchip:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
.fchip-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dash-wrap .fchip select {
  position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0;
  opacity: 0; cursor: pointer; border: 0; font-size: var(--fs-base);
}
.fchip-feld { padding: 0; }
.fchip-feld > summary { display: flex; align-items: center; min-height: 26px; padding: 0 var(--s-3); list-style: none; cursor: pointer; }
.fchip-feld > summary::-webkit-details-marker { display: none; }
.fchip-feld:focus-within { outline: none; }
.fchip-feld > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--r-full); }
.fchip-reset { color: var(--fg-muted); font-size: var(--fs-sm); padding: var(--s-1) var(--s-2); border-radius: var(--r-1); }
.fchip-reset:hover { color: var(--fg-strong); background: var(--surface-3); }

/* Schwebende Felder (Status, Anpassen, neue Ansicht) */
.popover {
  position: absolute; z-index: 40; top: calc(100% + var(--s-2)); left: 0; min-width: 14rem;
  display: grid; gap: var(--s-2); padding: var(--s-3); cursor: default;
  background: var(--surface-2); color: var(--fg); border: 1px solid var(--line-strong);
  border-radius: var(--r-3); box-shadow: var(--shadow-pop); white-space: normal; font-weight: 400;
}
.popover-breit { right: 0; left: auto; width: min(24rem, calc(100vw - var(--s-5))); }
.status-wahlen { display: grid; gap: 2px; }
.status-wahl { display: flex; align-items: center; gap: var(--s-2); min-height: 32px; padding: 0 var(--s-2); border-radius: var(--r-1); color: var(--fg); cursor: pointer; }
.status-wahl:hover { background: var(--surface-3); }
.status-wahl input { margin: 0; accent-color: var(--accent); }
.wl-suche { width: 12rem; min-height: 28px; padding: 0 var(--s-3); border-radius: var(--r-full); background: var(--surface-1); }
.wl-anpassen { position: relative; }
.wl-anpassen > summary {
  display: inline-flex; align-items: center; min-height: 28px; padding: 0 var(--s-3); list-style: none; cursor: pointer;
  border: 1px solid var(--line-strong); border-radius: var(--r-2); color: var(--fg-muted); font-size: var(--fs-sm);
}
.wl-anpassen > summary::-webkit-details-marker { display: none; }
.wl-anpassen > summary:hover, .wl-anpassen[open] > summary { background: var(--surface-3); color: var(--fg-strong); }
.anpassen-zeile { display: grid; grid-template-columns: 7rem minmax(0, 1fr); align-items: center; gap: var(--s-2); color: var(--fg-muted); font-size: var(--fs-sm); }
.anpassen-zeile select { width: 100%; min-height: 28px; }
.popover .property-toggles { margin: 0; }

/* Speichern nur bei Abweichung */
.ansicht-speichern { display: flex; align-items: center; gap: var(--s-2); margin: 0; }
.ansicht-speichern input[type="text"] { width: 14rem; min-height: 28px; border-radius: var(--r-full); padding: 0 var(--s-3); }
.ansicht-speichern .nav-btn { display: inline-flex; align-items: center; min-height: 28px; padding: 0 var(--s-3); border-radius: var(--r-2); }

/* --- Board: Spalten ------------------------------------------------------ */
.dash-wrap .kanban-grid { display: flex; gap: var(--s-3); align-items: flex-start; overflow-x: auto; padding-bottom: var(--s-3); scroll-snap-type: x proximity; }
.dash-wrap .kanban-col {
  flex: 1 1 0; min-width: 250px; padding: var(--s-2); scroll-snap-align: start;
  background: var(--surface-1); border: 1px solid var(--line); border-radius: var(--r-3);
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.dash-wrap .kanban-col.drag-over { border-color: var(--accent-border); background: var(--accent-soft); }
.dash-wrap .kanban-col .group-body { display: flex; flex-direction: column; gap: var(--s-2); }

.dash-wrap .col-header, .dash-wrap .status-section-title {
  display: flex; align-items: center; gap: var(--s-2); min-height: 36px; margin: 0 0 var(--s-1); padding: 0 var(--s-1) 0 var(--s-2);
  font-size: var(--fs-base); font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--fg-strong);
}
.dash-wrap .col-header h2, .dash-wrap .status-section-title h2 { margin: 0; white-space: nowrap; font-size: var(--fs-base); font-weight: 600; color: var(--fg-strong); }
.dash-wrap .col-count {
  display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 20px; padding: 0 var(--s-2);
  border-radius: var(--r-full); background: var(--surface-3); color: var(--fg-muted);
  font-size: var(--fs-micro); font-weight: 600; letter-spacing: 0; font-variant-numeric: tabular-nums;
}
.col-aktionen { margin-left: auto; display: inline-flex; align-items: center; opacity: 0; transition: opacity var(--dur) var(--ease); }
.kanban-col:hover .col-aktionen, .kanban-col:focus-within .col-aktionen,
.list-group:hover .col-aktionen, .list-group:focus-within .col-aktionen { opacity: 1; }
.dash-wrap .col-aktionen .group-add {
  display: inline-flex; align-items: center; min-height: 28px; padding: 0 var(--s-2); border-radius: var(--r-1);
  color: var(--fg-muted); font-size: var(--fs-sm); font-weight: 500;
}
.dash-wrap .col-aktionen .group-add:hover { background: var(--surface-3); color: var(--fg-strong); }
.dash-wrap .group-toggle {
  display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; margin: 0; padding: 0;
  border: 0; border-radius: var(--r-1); background: transparent; color: var(--fg-muted); font-size: var(--fs-md);
}
.dash-wrap .group-toggle:hover { background: var(--surface-3); color: var(--fg-strong); }
.dash-wrap .empty-state { padding: var(--s-4) var(--s-2); text-align: center; }
.dash-wrap .group-overflow { color: var(--fg-muted); }
.dash-wrap .group-overflow a { color: var(--accent); }

/* --- Statussymbole: die Form traegt den Status -------------------------- */
:is(.dash-wrap, .k-legende) .st-sym {
  position: relative; display: inline-block; flex: none; width: 16px; height: 16px; padding: 0; margin: 0;
  font-size: 0; line-height: 0; vertical-align: middle;
  color: color-mix(in srgb, var(--sym-farbe, var(--st-open)) calc(100% - var(--sym-mix)), var(--fg-strong));
}
:is(.dash-wrap, .k-legende) .st-sym.status-backlog { --sym-farbe: var(--st-backlog); }
:is(.dash-wrap, .k-legende) .st-sym.status-next { --sym-farbe: var(--st-next); }
:is(.dash-wrap, .k-legende) .st-sym.status-open { --sym-farbe: var(--st-open); }
:is(.dash-wrap, .k-legende) .st-sym.status-in-progress { --sym-farbe: var(--st-in-progress); }
:is(.dash-wrap, .k-legende) .st-sym.status-waiting { --sym-farbe: var(--st-waiting); }
:is(.dash-wrap, .k-legende) .st-sym.status-paused { --sym-farbe: var(--st-paused); }
:is(.dash-wrap, .k-legende) .st-sym.status-done { --sym-farbe: var(--st-done); }
:is(.dash-wrap, .k-legende) .st-sym.status-cancelled { --sym-farbe: var(--st-cancelled); }
:is(.dash-wrap, .k-legende) .st-sym::before, :is(.dash-wrap, .k-legende) .st-sym::after {
  content: ""; position: absolute; left: 50%; top: 50%; display: block; box-sizing: border-box;
  width: 0; height: 0; margin: 0; padding: 0; border: 0; background: none; border-radius: 0; transform: none;
}
:is(.dash-wrap, .k-legende) .st-sym::before { width: 16px; height: 16px; margin: -8px 0 0 -8px; border: 1.5px solid currentColor; border-radius: 50%; }
:is(.dash-wrap, .k-legende) .st-sym.status-backlog::before { border-style: dashed; }
:is(.dash-wrap, .k-legende) .st-sym.status-open::after { width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%; background: currentColor; }
:is(.dash-wrap, .k-legende) .st-sym.status-in-progress::after {
  width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%;
  background: conic-gradient(currentColor 0 50%, transparent 0);
}
:is(.dash-wrap, .k-legende) .st-sym.status-waiting::after {
  width: 5px; height: 5px; margin: -4px 0 0 -0.75px;
  border-left: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
}
:is(.dash-wrap, .k-legende) .st-sym.status-paused::after { width: 1.5px; height: 6px; margin: -3px 0 0 -3px; background: currentColor; box-shadow: 4.5px 0 0 currentColor; }
:is(.dash-wrap, .k-legende) .st-sym.status-done::before, .dash-wrap .karte-erledigt .st-sym::before { background: currentColor; }
:is(.dash-wrap, .k-legende) .st-sym.status-done::after, .dash-wrap .karte-erledigt .st-sym::after {
  width: 4px; height: 8px; margin: -5px 0 0 -2px; border-right: 1.5px solid var(--on-accent); border-bottom: 1.5px solid var(--on-accent);
  transform: rotate(45deg); background: none; box-shadow: none; border-radius: 0; border-left: 0; border-top: 0;
}
:is(.dash-wrap, .k-legende) .st-sym.status-cancelled::after {
  width: 8px; height: 8px; margin: -4px 0 0 -4px;
  background:
    linear-gradient(45deg, transparent 43%, currentColor 43% 57%, transparent 57%),
    linear-gradient(-45deg, transparent 43%, currentColor 43% 57%, transparent 57%);
}
.dash-wrap .karte-erledigt .st-sym { --sym-farbe: var(--st-done); }

/* Der klickbare Knopf: das Symbol bleibt 16 px, die Flaeche darum nicht. */
.dash-wrap .task-card .karte-symbol {
  width: 28px; height: 28px; border-radius: var(--r-full); cursor: pointer; opacity: 1; max-width: none; overflow: visible;
  -webkit-mask-image: none; mask-image: none; border: 0; background: transparent; transition: background var(--dur) var(--ease);
}
.dash-wrap .task-card .karte-symbol:hover { background: var(--surface-4); }
.dash-wrap .task-card .karte-symbol:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* --- Karte ---------------------------------------------------------------- */
.dash-wrap .task-card {
  position: relative; display: grid; grid-template-columns: 28px minmax(0, 1fr); column-gap: var(--s-1); row-gap: 0; align-items: start;
  margin: 0; padding: var(--s-3) var(--s-3) var(--s-3) var(--s-2);
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-2);
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.dash-wrap .task-card:hover, .dash-wrap .task-card:focus-within { background: var(--surface-3); border-color: var(--line-strong); }
.dash-wrap .task-card.priority-high { box-shadow: inset 3px 0 0 var(--prio-high); }
.dash-wrap .task-card > .karte-symbol { grid-column: 1; grid-row: 1; margin: -4px 0 0; align-self: start; justify-self: center; }
.dash-wrap .task-card > .card-title {
  grid-column: 2; grid-row: 1; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
  font-size: calc(var(--fs-base) + 1px); font-weight: 500; line-height: 1.35; color: var(--fg-strong);
  overflow-wrap: anywhere; white-space: normal; text-align: left;
}
.dash-wrap .task-card > .card-title:hover { text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 2px; }
.dash-wrap .task-card > .card-meta {
  grid-column: 2; grid-row: 2; display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1) var(--s-2);
  min-width: 0; margin: var(--s-2) 0 0; overflow: visible; font-size: var(--fs-sm); line-height: 20px; color: var(--fg-muted);
}
.dash-wrap .task-card > .card-meta:empty { display: none; }
.dash-wrap .task-card > .card-next {
  grid-column: 2; grid-row: 3; margin: var(--s-1) 0 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: var(--fs-sm); color: var(--fg-muted);
}
.dash-wrap .task-card > .card-next::before { content: "→ "; }
.karte-vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.dash-wrap .meta-projekt {
  /* Block statt inline-flex: nur an einem Blockcontainer greift text-overflow, sonst wird der Projektname ohne Punkte gekappt. */
  display: block; line-height: 22px;
  flex: 0 1 auto; min-width: 9ch; max-width: 18ch; padding: 0 var(--s-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  border: 1px solid var(--relation-border); border-radius: var(--r-full); background: var(--relation-soft); color: var(--text-relation);
  font-size: var(--fs-sm); text-align: left; cursor: pointer;
}
/* Der Projekt-Chip ist ein Knopf (Auswahl an Ort und Stelle, `static/chipwahl.js`); die Trefferflaeche am Handy steht in `chipwahl.css`. */
.dash-wrap .meta-projekt:hover { border-color: var(--text-relation); }
.dash-wrap .meta-mehr, .dash-wrap .meta-tags { flex: none; color: var(--fg-muted); font-variant-numeric: tabular-nums; }
.dash-wrap .meta-art { flex: none; font-size: var(--fs-micro); font-weight: 600; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--fg-muted); }
.dash-wrap .meta-ki { flex: none; padding: 0 var(--s-1); border: 1px solid var(--line-strong); border-radius: var(--r-1); font-size: var(--fs-micro); font-weight: 600; color: var(--fg-muted); }

/* Datumstext: Rueckstand ist Text mit Farbe, kein Chip. */
.dash-wrap .task-card .karte-datum {
  flex: none; padding: 0; margin: 0; border: 0; background: transparent; border-radius: var(--r-1); cursor: pointer;
  max-width: none; overflow: visible; -webkit-mask-image: none; mask-image: none; opacity: 1;
  font-size: var(--fs-sm); line-height: 20px; color: var(--fg-muted); white-space: nowrap;
}
.dash-wrap .task-card .karte-datum:hover { color: var(--fg-strong); text-decoration: underline; text-underline-offset: 2px; }
.dash-wrap .task-card .karte-datum-ueberfaellig { color: var(--text-danger); font-weight: 600; }
.dash-wrap .task-card .karte-datum-vergangen { color: var(--text-warn); font-weight: 600; }
.dash-wrap .task-card .karte-datum-heute, .dash-wrap .task-card .karte-datum-bald { color: var(--fg-strong); font-weight: 600; }

/* Schnellaktionen: erst bei Hover oder Fokus. */
.dash-wrap .karte-aktionen {
  position: absolute; right: var(--s-2); bottom: var(--s-2); z-index: 2; display: flex; gap: 2px; padding: 2px;
  background: var(--surface-2); border: 1px solid var(--line-strong); border-radius: var(--r-2); box-shadow: var(--shadow-pop);
  opacity: 0; pointer-events: none; transition: opacity var(--dur) var(--ease);
}
/* Fokus: die Leiste erscheint nur, wenn der Fokus Titel oder Leiste selbst traegt. Bei Fokus auf Projektlink oder Datum lag sie vorher
   ueber dem fokussierten Element (2.4.11, QA B9). Tastaturnutzer erreichen die Knoepfe weiter (opacity 0 bleibt fokussierbar). */
.dash-wrap .task-card:hover .karte-aktionen, .dash-wrap .task-card:has(> .card-title:focus-visible) .karte-aktionen, .dash-wrap .karte-aktionen:focus-within { opacity: 1; pointer-events: auto; }
.dash-wrap .task-card .karte-aktionen .karte-aktion {
  position: relative; display: inline-block; width: 28px; height: 28px; margin: 0; padding: 0; float: none;
  border: 0; border-radius: var(--r-1); background: transparent; color: var(--fg-muted); cursor: pointer;
  font-size: 0; line-height: 0; max-width: none; overflow: visible; opacity: 1; -webkit-mask-image: none; mask-image: none;
}
.dash-wrap .task-card .karte-aktionen .karte-aktion:hover { background: var(--surface-4); color: var(--fg-strong); }
.dash-wrap .task-card .karte-aktionen .karte-aktion::before, .dash-wrap .task-card .karte-aktionen .karte-aktion::after {
  content: ""; position: absolute; left: 50%; top: 50%; display: block; box-sizing: border-box;
  width: 0; height: 0; margin: 0; padding: 0; border: 0; background: none; border-radius: 0; transform: none;
}
.dash-wrap .task-card .karte-aktionen .aktion-fertig::before { width: 5px; height: 9px; margin: -6px 0 0 -2.5px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); }
.dash-wrap .task-card .karte-aktionen .aktion-fertig:hover { color: var(--st-done); }
.dash-wrap .task-card .karte-aktionen .aktion-plan::before { width: 13px; height: 12px; margin: -5.5px 0 0 -6.5px; border: 1.5px solid currentColor; border-radius: 2px; }
.dash-wrap .task-card .karte-aktionen .aktion-plan::after { width: 13px; height: 1.5px; margin: -2px 0 0 -6.5px; background: currentColor; }
.dash-wrap .task-card .karte-aktionen .aktion-rang::before { width: 1.5px; height: 13px; margin: -6.5px 0 0 -5px; background: currentColor; border-radius: 1px; }
.dash-wrap .task-card .karte-aktionen .aktion-rang::after { width: 8px; height: 7px; margin: -6.5px 0 0 -3.5px; background: currentColor; clip-path: polygon(0 0, 100% 50%, 0 100%); }
.dash-wrap .task-card .karte-aktionen .aktion-oeffnen::before { width: 8px; height: 1.5px; margin: -0.75px 0 0 -5px; background: currentColor; }
.dash-wrap .task-card .karte-aktionen .aktion-oeffnen::after { width: 6px; height: 6px; margin: -3px 0 0 -4px; border-top: 1.5px solid currentColor; border-right: 1.5px solid currentColor; transform: rotate(45deg); }
.dash-wrap .task-card .karte-aktionen .karte-aktion:focus-visible { outline: 2px solid var(--accent); outline-offset: 0; }
.dash-wrap .task-card.karte-erledigt { opacity: 0.5; text-decoration: none; }
.dash-wrap .task-card.karte-erledigt > .card-title { text-decoration: line-through; }
.dash-wrap .task-card.wird-verschoben { outline: 2px solid var(--accent); outline-offset: 1px; }

/* Dichte des Boards: `static/kanban.css` (nur am Rechner mit Maus; am Handy gibt es eine Dichte). */

/* --- Liste und Baum: dasselbe Muster als Zeile ----------------------------- */
.dash-wrap .list-group, .dash-wrap .tree-node {
  margin: 0 0 var(--s-4); padding: 0; overflow: hidden;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-3);
}
.dash-wrap .list-group .status-section-title, .dash-wrap .tree-header {
  margin: 0; padding: var(--s-1) var(--s-2) var(--s-1) var(--s-3); min-height: 40px;
  background: var(--surface-1); border-bottom: 1px solid var(--line);
}
.dash-wrap .tree-header { justify-content: flex-start; flex-wrap: wrap; gap: var(--s-2); font-weight: 600; }
.dash-wrap .tree-header .progress-bar-bg { margin-left: auto; }
.dash-wrap .list-group .group-body, .dash-wrap .tree-node .group-body { display: block; }
.dash-wrap .list-group .task-card, .dash-wrap .tree-node .task-card {
  grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center; column-gap: var(--s-2);
  margin: 0; padding: 0 var(--s-3) 0 var(--s-2); min-height: 44px;
  background: transparent; border: 0; border-bottom: 1px solid var(--line); border-radius: 0;
}
.dash-wrap .list-group .task-card:last-child, .dash-wrap .tree-node .task-card:last-child { border-bottom: 0; }
.dash-wrap .list-group .task-card:hover, .dash-wrap .tree-node .task-card:hover,
.dash-wrap .list-group .task-card:focus-within, .dash-wrap .tree-node .task-card:focus-within { background: var(--surface-3); }
.dash-wrap .list-group .task-card > .karte-symbol, .dash-wrap .tree-node .task-card > .karte-symbol { margin: 0; align-self: center; }
.dash-wrap .list-group .task-card > .card-title, .dash-wrap .tree-node .task-card > .card-title { grid-column: 2; grid-row: 1; padding-block: var(--s-2); -webkit-line-clamp: 2; }
.dash-wrap .list-group .task-card > .card-meta, .dash-wrap .tree-node .task-card > .card-meta {
  grid-column: 3; grid-row: 1; margin: 0; justify-content: flex-end; max-width: 46vw;
}
.dash-wrap .list-group .task-card > .card-next, .dash-wrap .tree-node .task-card > .card-next { display: none; }
.dash-wrap .list-group .karte-aktionen, .dash-wrap .tree-node .karte-aktionen { top: 50%; bottom: auto; transform: translateY(-50%); box-shadow: none; }
.dash-wrap .group-body.density-compact .task-card { min-height: 34px; }
.dash-wrap .group-body.density-compact .task-card > .card-title,
.dash-wrap .group-body.density-ultracompact .task-card > .card-title { -webkit-line-clamp: 1; padding-block: var(--s-1); }
.dash-wrap .group-body.density-ultracompact .task-card { min-height: 28px; }
.dash-wrap .subgroup-title { margin: 0; padding: var(--s-2) var(--s-3); background: var(--surface-1); border-bottom: 1px solid var(--line); text-transform: none; font-size: var(--fs-sm); letter-spacing: 0; color: var(--fg-muted); }
.dash-wrap .subgroup-zone > .group-body { display: block; }

/* --- Schmale Schirme und Beruehrung: Flaechen mindestens 44 px ------------- */
@media (max-width: 700px), (hover: none) {
  .dash-wrap .seg span, .fchip, .wl-suche, .wl-anpassen > summary, .ansicht-speichern .nav-btn, .ansicht-speichern input[type="text"],
  .kopf-neu .nav-btn, .ansicht-verwalten, .wl-schalter, .fchip-reset { min-height: 44px; }
  .fchip-feld { min-height: 44px; }
  .fchip-feld > summary { min-height: 44px; }
  .ansicht-tab { min-height: 44px; }
  .status-wahl { min-height: 44px; }
  .anpassen-zeile select, .ansicht-neu-form input[type="text"] { min-height: 44px; }
  .col-aktionen { opacity: 1; }
  .dash-wrap .col-aktionen .group-add, .dash-wrap .group-toggle { min-height: 44px; min-width: 44px; justify-content: center; }
  .dash-wrap .task-card, .dash-wrap .list-group .task-card, .dash-wrap .tree-node .task-card {
    grid-template-columns: 44px minmax(0, 1fr); padding: 0 var(--s-3) var(--s-2) 0; column-gap: 0; min-height: 0;
  }
  .dash-wrap .task-card > .karte-symbol, .dash-wrap .list-group .task-card > .karte-symbol, .dash-wrap .tree-node .task-card > .karte-symbol {
    width: 44px; height: 44px; margin: 0; grid-column: 1; grid-row: 1; align-self: start;
  }
  .dash-wrap .task-card > .card-title, .dash-wrap .list-group .task-card > .card-title, .dash-wrap .tree-node .task-card > .card-title {
    grid-column: 2; grid-row: 1; align-self: center; min-height: 44px; padding-block: 0; display: -webkit-box;
    -webkit-box-align: center; line-height: 1.35;
  }
  .dash-wrap .task-card > .card-meta, .dash-wrap .list-group .task-card > .card-meta, .dash-wrap .tree-node .task-card > .card-meta {
    grid-column: 2; grid-row: 2; margin: 0 0 var(--s-1); justify-content: flex-start; max-width: none;
  }
  /* Die Chips der Meta-Zeile (Projekt, Datum, hohe Prioritaet) sind antippbar: 44 px Flaeche ueber `chipwahl.css` und die
     Datumswahl; die Aktionsleiste (Tipp auf die Karte) bleibt fuer Erledigen, Plantag, Prioritaet und Oeffnen. */
  .dash-wrap .karte-aktionen, .dash-wrap .list-group .karte-aktionen, .dash-wrap .tree-node .karte-aktionen {
    position: static; grid-column: 2; grid-row: 3; display: none; width: fit-content; margin: var(--s-1) 0 0; transform: none;
    opacity: 1; pointer-events: auto; background: var(--surface-3);
  }
  .dash-wrap .task-card.karte-offen .karte-aktionen { display: flex; }
  .dash-wrap .task-card .karte-aktionen .karte-aktion { width: 44px; height: 44px; }
  .dash-wrap .kanban-col { min-width: calc(100vw - var(--s-6)); }
  .wl-rechts { margin-left: 0; width: 100%; }
  .wl-suche { flex: 1 1 0; width: auto; min-width: 0; }
  .wl-rechts > * { flex: none; }
  .wl-rechts > .wl-suche { flex: 1 1 0; }
  .ansicht-speichern { width: 100%; }
  .ansicht-speichern input[type="text"] { flex: 1; width: auto; }
  .popover { max-width: calc(100vw - var(--s-5)); }
  .fchip { max-width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .dash-wrap * { transition: none !important; }
}

/* Handy: Reiter und Filter in je einer Zeile zum Wischen, schwebende Felder als Blatt.
   Sonst stuende die Werkzeugleiste ueber einem ganzen Bildschirm, bevor die erste Karte kommt. */
@media (max-width: 700px) {
  .wl-aussen, .wl-huelle, .dash-wrap .werkzeugleiste, .wl-chips, .dash-wrap { min-width: 0; max-width: 100%; }
  .ansicht-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .ansicht-tabs > * { flex: none; }
  .ansicht-tabs::-webkit-scrollbar, .wl-chips::-webkit-scrollbar { display: none; }
  .ansicht-neu-form {
    position: fixed; z-index: 60; top: 30vh; left: var(--s-3); right: var(--s-3); flex-wrap: wrap;
  }
  .ansicht-neu-form input[type="text"] { flex: 1 1 10rem; width: auto; }
  .wl-chips { flex-wrap: nowrap; overflow-x: auto; width: 100%; scrollbar-width: none; }
  .wl-chips > * { flex: none; }
  .popover, .popover-breit {
    position: fixed; z-index: 60; top: 18vh; left: var(--s-3); right: var(--s-3); width: auto; max-width: none;
    max-height: 70vh; overflow-y: auto;
  }
  .dash-wrap .werkzeugleiste > .seg-gruppe { width: 100%; }
  .dash-wrap .werkzeugleiste > .seg-gruppe .seg { flex: 1; }
  .dash-wrap .werkzeugleiste > .seg-gruppe .seg span { width: 100%; justify-content: center; padding: 0; }
  .wl-rechts { flex-wrap: nowrap; }
  .wl-rechts .seg-gruppe .seg span { padding: 0 var(--s-2); }
  .kopf-neu .nav-btn { padding: 0 var(--s-3); }
}

/* Termine live aus Outlook (K18): Farbe je Kalender kommt als --kal (rahmen.js aus data-kfarbe). */
.kal-chip, .kal-punkt { --kal: var(--st-next); }
.kal-chip { border-left: 3px solid var(--kal); padding-left: 4px; font-size: 0.7rem; }
.kal-punkt { display: inline-block; width: 7px; height: 7px; border-radius: var(--r-full); background: var(--kal); flex: none; }
.kal-legende { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-3); margin: var(--s-3) 0 0; font-size: var(--fs-micro); color: var(--fg-subtle); }
.kal-legende-eintrag { display: inline-flex; align-items: center; gap: var(--s-1); }
.kalender-hinweis { margin: 0 0 var(--s-3); }
/* Monat, Woche und Agenda stehen in kalender.css (Audit-Paket 5, 2026-10-17). */
.larry-chat-toggle {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  z-index: 80;
  min-width: 4.6rem;
  min-height: 2.8rem;
  border-radius: 999px;
  box-shadow: 0 10px 32px rgb(15 23 42 / 22%);
}

.larry-chat-panel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 90;
  display: grid;
  grid-template-rows: auto auto auto auto minmax(0, 1fr) auto auto;
  grid-template-columns: minmax(0, 1fr);
  width: 31rem;
  max-width: 100vw;
  background: var(--surface-1, #181825);
  color: var(--fg, #cdd6f4);
  border-left: 1px solid var(--line, #313244);
  box-shadow: -16px 0 42px rgb(15 23 42 / 18%);
}
.larry-chat-panel > * {
  min-width: 0;
}

.larry-chat-panel[hidden] { display: none; }
.larry-chat-head,
.larry-chat-sessionbar,
.larry-chat-inline-actions {
  display: flex;
  align-items: center;
  gap: .5rem;
}
.larry-chat-tools {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .5rem;
}

.larry-chat-head {
  justify-content: space-between;
  padding: .85rem 1rem;
  border-bottom: 1px solid var(--border, #d8dee8);
}

.larry-chat-head-title {
  display: flex;
  align-items: center;
  gap: .5rem;
  min-width: 0;
}

.larry-chat-head-actions {
  flex-shrink: 0;
  display: flex;
  gap: .25rem;
}

.larry-provider-pill {
  appearance: none;
  background: var(--surface-2, #1e1e2e);
  border: 1px solid var(--line, #313244);
  border-radius: 999px;
  padding: 0.15rem 1.4rem 0.15rem 0.6rem;
  font-size: .75rem;
  font-weight: 500;
  color: var(--fg, #cdd6f4);
  cursor: pointer;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23a6adc8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.3rem center;
}
.larry-provider-pill:hover {
  background-color: var(--surface-3, #252538);
}

.larry-chat-head-actions { display: flex; gap: .35rem; }
.larry-chat-status {
  display: block;
  color: var(--fg-muted, #a6adc8);
  font-size: .78rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.larry-chat-sessionbar {
  padding: .35rem .75rem;
  border-bottom: 1px solid var(--line, #313244);
}

.larry-chat-sessionbar select { min-width: 0; flex: 1; }
.larry-session-select {
  appearance: none;
  background: transparent;
  border: none;
  color: var(--fg);
  font-weight: 500;
  cursor: pointer;
  padding: 0.2rem 1rem 0.2rem 0;
  outline: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23a6adc8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right center;
}
.larry-session-select:hover { color: var(--fg-strong, #fff); }
.larry-chat-modelbar {
  display: grid;
  grid-template-columns: 1.15fr 1.15fr .8fr .9fr;
  gap: .4rem;
  padding: .5rem .75rem 0;
}
.larry-chat-modelbar label {
  min-width: 0;
  color: var(--fg-muted, #a6adc8);
  font-size: .68rem;
}
.larry-chat-modelbar select { width: 100%; min-width: 0; }
.larry-chat-provider-note {
  min-height: 1.1rem;
  margin: .2rem .75rem .35rem;
  color: var(--fg-muted, #a6adc8);
  font-size: .72rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.larry-chat-events {
  overflow: auto;
  padding: .75rem;
  display: flex;
  flex-direction: column;
  gap: .5rem;
  min-width: 0;
}

.larry-event-user, .larry-event-assistant {
  padding: .65rem .95rem;
  border-radius: .75rem;
  line-height: 1.45;
  width: fit-content;
  max-width: 90%;
  word-wrap: break-word;
}
.larry-event-user pre, .larry-event-assistant pre {
  overflow-x: auto;
  max-width: 100%;
  white-space: pre-wrap;
  word-wrap: break-word;
  background: rgba(0,0,0,0.2);
  padding: .5rem;
  border-radius: .25rem;
}
.larry-event-user code, .larry-event-assistant code {
  white-space: pre-wrap;
  word-wrap: break-word;
}

.larry-h2, .larry-h3, .larry-h4 {
  margin-top: 0.6rem;
  margin-bottom: 0.3rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--fg-strong, #fff);
}
.larry-h2 { font-size: 1.1rem; border-bottom: 1px solid var(--line, #313244); padding-bottom: 0.2rem; }
.larry-h3 { font-size: 1.0rem; }
.larry-h4 { font-size: 0.92rem; }

.larry-ul {
  margin: 0.3rem 0;
  padding-left: 1.2rem;
  list-style-type: disc;
}
.larry-li {
  margin-bottom: 0.2rem;
}
.larry-code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.85em;
  padding: 0.1rem 0.35rem;
  border-radius: 4px;
  background: var(--surface-2, #1e1e2e);
  color: var(--accent-subtle, #89b4fa);
}
.larry-wikilink {
  color: var(--accent, #89b4fa);
  text-decoration: underline;
  font-weight: 500;
}
.larry-thinking-details {
  margin: 0.4rem 0;
  padding: 0.3rem 0.6rem;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--line, #313244);
  border-radius: 8px;
  font-size: 0.82rem;
  color: var(--fg-muted, #a6adc8);
}
.larry-thinking-summary {
  cursor: pointer;
  font-weight: 500;
  outline: none;
  user-select: none;
  padding: 0.2rem 0;
}
.larry-thinking-summary:hover {
  color: var(--fg-strong, #fff);
}
.larry-thinking-steps {
  margin-top: 0.4rem;
  padding-top: 0.4rem;
  border-top: 1px dashed var(--line, #313244);
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  max-height: 200px;
  overflow-y: auto;
}
.larry-thinking-step {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.78rem;
  color: var(--fg-muted, #9399b2);
  word-break: break-all;
}


.larry-event-user {
  margin-left: auto;
  color: var(--on-accent, #fff);
  background: var(--accent, #3056d3);
}

.larry-event-assistant { background: var(--surface-3, #252538); }
.larry-event-error { color: var(--danger, #f38ba8); background: var(--surface-3, #311); }
.larry-event-tool,
.larry-event-context,
.larry-event-status {
  max-width: 100%;
  padding: .3rem 0;
  color: var(--fg-muted, #a6adc8);
  font-size: .78rem;
}

.larry-permission {
  max-width: 100%;
  border: 1px solid var(--warn, #d6a84b);
  background: var(--surface-2, #fff8e7);
}

.larry-permission pre {
  max-height: 12rem;
  overflow: auto;
  font: .75rem/1.4 ui-monospace, SFMono-Regular, Menlo, monospace;
  white-space: pre-wrap;
}

.larry-chat-form,
.larry-chat-transcript {
  padding: .75rem;
  border-top: 1px solid var(--line, #313244);
  background: var(--surface-1, #181825);
}

.larry-chat-form textarea,
.larry-chat-transcript textarea {
  width: 100%;
  resize: vertical;
}

.larry-chat-tools { margin-top: .5rem; flex-wrap: wrap; }
.larry-chat-send { margin-left: auto; }
.larry-file-label { cursor: pointer; }
.larry-file-label input { position: fixed; left: -9999px; }
.larry-chat-attachments {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  padding: 0 .75rem;
}

.larry-attachment,
.larry-ref {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  max-width: 100%;
  padding: .25rem .5rem;
  border-radius: 999px;
  background: var(--surface-2, #1e1e2e);
  font-size: .78rem;
}

.larry-chat-mention-box {
  margin-bottom: .5rem;
  padding: .5rem;
  border: 1px solid var(--line, #313244);
  border-radius: .5rem;
}

.larry-chat-mention-box input { width: 100%; }
.larry-chat-mention-results {
  display: grid;
  max-height: 12rem;
  overflow: auto;
  margin-top: .35rem;
}

.larry-mention-result {
  border: 0;
  border-radius: 0;
  color: inherit;
  background: transparent;
  text-align: left;
}

.larry-empty { color: var(--fg-muted, #a6adc8); text-align: center; }

body.larry-chat-open { overflow: hidden; }

@media (min-width: 62rem) {
  body.larry-chat-open .app-shell { margin-right: min(31rem, 100vw); }
  body.larry-chat-open { overflow: auto; }
}

@media (max-width: 40rem) {
  .larry-chat-panel { width: 100vw; }
  .larry-chat-toggle { right: .75rem; bottom: .75rem; }
  .larry-chat-sessionbar { flex-wrap: wrap; }
  .larry-chat-modelbar { grid-template-columns: 1fr 1fr; }
}

/* Am Handy zieht sich der Knopf beim Scrollen nach unten an den rechten Rand zurueck (larry_knopf.js setzt die Klasse):
   Text und Knoepfe am Seitenende bleiben frei. Fokus und offener Chat zeigen ihn immer; Tippflaeche bleibt >= 44 px. */
@media (max-width: 720px) {
  .larry-chat-toggle { min-height: var(--tap); }
  .larry-chat-toggle.larry-knopf-weg { transform: translateX(calc(100% + var(--s-4) + env(safe-area-inset-right, 0px))); }
  .larry-chat-toggle.larry-knopf-weg:focus,
  .larry-chat-toggle.larry-knopf-weg:focus-visible,
  .larry-chat-toggle[aria-expanded="true"].larry-knopf-weg,
  body.larry-chat-open .larry-chat-toggle.larry-knopf-weg { transform: none; }
}
@media (max-width: 720px) and (prefers-reduced-motion: no-preference) {
  .larry-chat-toggle { transition: transform calc(var(--dur) * 1.5) var(--ease); }
}
/* Seitenrahmen im Capacities-Aufbau: gruppierte Seitenleiste, Suchknopf,
 * Befehlspalette (Strg/Cmd+K) und Tab-Leiste.
 *
 * Nur Tokens aus tokens.css, kein Roh-Hex, kein Inline-Style (CSP). Modul
 * wie chat.css, damit app.css nicht weiter waechst. */

/* --- Seitenleiste: siehe navigation.css ----------------------------------- */
.tab:focus-visible, .tab-close:focus-visible, .tab-pin:focus-visible, .tab-titel:focus-visible, .tab-zuletzt > summary:focus-visible, .palette-row:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 1px;
}

/* --- Tab-Leiste ---------------------------------------------------------- */
.tab-leiste {
  position: sticky; top: 0; z-index: 12; display: flex; gap: 2px;
  padding: var(--s-1) var(--s-2) 0; overflow-x: auto;
  background: var(--surface-1); border-bottom: 1px solid var(--line);
  scrollbar-width: thin;
}
.tab-leiste[hidden] { display: none; }
.tab {
  display: flex; align-items: center; gap: var(--s-1); flex: 0 1 200px; min-width: 112px;
  padding: var(--s-1) var(--s-1) var(--s-1) var(--s-3);
  border: 1px solid transparent; border-bottom: 0; border-radius: var(--r-2) var(--r-2) 0 0;
  color: var(--fg-muted); font-size: var(--fs-sm); cursor: pointer;
}
.tab:hover { background: var(--surface-2); color: var(--fg); }
.tab.active { background: var(--bg); border-color: var(--line); color: var(--fg-strong); }
.tab-titel { flex: 1; min-width: 0; min-height: 24px; line-height: 24px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tab-close {
  width: 24px; height: 24px; padding: 0; border: 0; border-radius: var(--r-1);
  background: transparent; color: var(--fg-subtle); line-height: 1; cursor: pointer;
}
.tab-close:hover { background: var(--surface-4); color: var(--fg-strong); }
/* Anheften: der Knopf erscheint beim Darueberfahren und bei Tastaturfokus; ein angehefteter Reiter zeigt ihn immer und hat kein Schliessen */
.tab-pin {
  display: inline-flex; align-items: center; justify-content: center; flex: none; width: 24px; height: 24px; padding: 0;
  border: 0; border-radius: var(--r-1); background: transparent; color: var(--fg-subtle); cursor: pointer;
  opacity: 0; transition: opacity var(--dur) var(--ease);
}
/* Der Knopf nimmt nur beim Darueberfahren und bei Tastaturfokus Platz, damit der Titel bei vielen Reitern lesbar bleibt */
.tab:not(.angeheftet) .tab-pin { display: none; }
.tab:hover .tab-pin, .tab:focus-within .tab-pin, .tab.angeheftet .tab-pin { display: inline-flex; opacity: 1; }
.tab-pin:hover { background: var(--surface-4); color: var(--fg-strong); }
.tab.angeheftet .tab-pin { color: var(--accent); }
.tab.angeheftet { flex: 0 0 auto; max-width: 150px; }
@media (hover: none) { .tab-pin { display: inline-flex; opacity: 1; } }

/* Zuletzt geschlossen: ein Aufklappfeld am rechten Ende der Leiste */
.tab-zuletzt { flex: none; margin-left: auto; align-self: center; }
.tab-zuletzt > summary { padding: var(--s-1) var(--s-2); border-radius: var(--r-1); color: var(--fg-muted); font-size: var(--fs-sm); list-style: none; cursor: pointer; }
.tab-zuletzt > summary::-webkit-details-marker { display: none; }
.tab-zuletzt > summary:hover { background: var(--surface-2); color: var(--fg); }
.tab-zuletzt-liste {
  position: fixed; z-index: 13; display: grid; min-width: 220px; max-width: 320px; padding: var(--s-1);
  background: var(--surface-2); border: 1px solid var(--line-strong); border-radius: var(--r-2); box-shadow: var(--shadow-pop);
}
.tab-zuletzt-liste a {
  padding: var(--s-1) var(--s-2); border-radius: var(--r-1); color: var(--fg-muted); font-size: var(--fs-sm);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-decoration: none;
}
.tab-zuletzt-liste a:hover, .tab-zuletzt-liste a:focus-visible { background: var(--surface-3); color: var(--fg-strong); }

/* --- Suchpalette (suchpalette.js) --------------------------------------------
 * Desktop: Karte unter der Oberkante. Handy: Vollbild-Blatt mit "Abbrechen", Zeilen mindestens 44 px. */
.palette {
  width: min(680px, calc(100vw - var(--s-5))); max-height: 76vh; margin: 10vh auto 0;
  padding: 0; border: 1px solid var(--line-strong); border-radius: var(--r-3);
  background: var(--surface-2); color: var(--fg); box-shadow: var(--shadow-pop); overflow: hidden;
}
.palette::backdrop { background: var(--scrim); }
.palette-box { display: flex; flex-direction: column; max-height: 76vh; }
.palette-kopf { display: flex; align-items: center; border-bottom: 1px solid var(--line); }
.palette-input {
  flex: 1; min-width: 0; padding: var(--s-3) var(--s-4); border: 0;
  border-radius: var(--r-3) 0 0 0; background: transparent; color: var(--fg-strong);
  font-size: var(--fs-md);
}
/* Fokus nie ohne Zeichen: Linie unter dem Feld in Akzentfarbe statt outline (QA N-11) */
.palette-input:focus { outline: none; }
.palette-input:focus-visible { box-shadow: inset 0 -2px 0 var(--accent); }
.palette-zu { display: none; }
.palette-list { flex: 1 1 auto; min-height: 0; margin: 0; padding: var(--s-1); overflow-y: auto; overscroll-behavior: contain; list-style: none; }
.palette-gruppe {
  padding: var(--s-2) var(--s-3) var(--s-1); color: var(--fg-subtle);
  font-size: var(--fs-micro); letter-spacing: var(--tracking-label); text-transform: uppercase;
}
.palette-row {
  display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-3);
  min-height: 40px; padding: var(--s-2) var(--s-3); border-radius: var(--r-2); color: var(--fg-muted);
  cursor: pointer;
}
.palette-row[aria-selected="true"] { background: var(--accent-soft); color: var(--fg-strong); }
.palette-text { display: grid; gap: 1px; min-width: 0; flex: 1; }
.palette-titel { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.palette-kontext { color: var(--fg-quiet); font-size: var(--fs-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.palette-rechts { display: flex; flex: none; flex-direction: column; align-items: flex-end; gap: 2px; }
.palette-typ {
  flex: none; padding: 0 var(--s-2); border: 1px solid var(--line-strong); border-radius: var(--r-full);
  background: transparent; color: var(--fg-muted); font-size: var(--fs-micro); /* Tag-Farbe auf Tag-Flaeche gab nur 3,6:1 */
}
.palette-status-wort { color: var(--fg-quiet); font-size: var(--fs-micro); }
.palette-leer { padding: var(--s-4); color: var(--fg-quiet); font-size: var(--fs-sm); }
.palette-facetten { display: flex; flex-wrap: nowrap; gap: var(--s-1); padding: var(--s-2) var(--s-3); overflow-x: auto; border-bottom: 1px solid var(--line); scrollbar-width: none; }
.palette-facetten[hidden] { display: none; }
.palette-chip {
  flex: none; min-height: 28px; padding: 0 var(--s-3); border: 1px solid var(--line-strong); border-radius: var(--r-full);
  background: transparent; color: var(--fg-muted); font: inherit; font-size: var(--fs-sm); cursor: pointer;
}
.palette-chip:hover { border-color: var(--accent-border); color: var(--fg); }
.palette-chip[aria-pressed="true"] { border-color: var(--accent-border); background: var(--accent-soft); color: var(--fg-strong); }
.palette mark { box-shadow: none; padding: 0; background: color-mix(in srgb, var(--accent) 18%, transparent); }
.palette-chip:focus-visible, .palette-zu:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.palette-status { min-height: 1.4em; margin: 0; padding: var(--s-1) var(--s-4) 0; color: var(--fg-quiet); font-size: var(--fs-sm); }
.palette-laedt .palette-list { opacity: 0.6; transition: opacity var(--dur) var(--ease); }
.palette-hint {
  display: flex; flex-wrap: wrap; gap: var(--s-2); margin: 0; padding: var(--s-2) var(--s-4);
  border-top: 1px solid var(--line); color: var(--fg-quiet); font-size: var(--fs-micro);
}

@media (max-width: 768px) {
  /* Vollbild-Blatt: kein Hintergrund zum Antippen, dafuer "Abbrechen" neben dem Feld. */
  .palette {
    width: 100vw; max-width: none; height: 100dvh; max-height: none; margin: 0;
    border: 0; border-radius: 0;
  }
  .palette-box { height: 100dvh; max-height: none; padding-top: env(safe-area-inset-top, 0px); }
  .palette-input { min-height: var(--tap); font-size: 16px; /* unter 16 px zoomt iOS beim Fokus */ }
  .palette-zu {
    display: inline-flex; align-items: center; flex: none; min-height: var(--tap); padding: 0 var(--s-4);
    border: 0; background: transparent; color: var(--accent); font: inherit; font-size: var(--fs-md); cursor: pointer;
  }
  .palette-chip { min-height: 36px; }
  .palette-row { min-height: var(--tap); padding-block: var(--s-2); }
  .palette-hint { display: none; }
  .palette-facetten { padding-block: var(--s-2); }
  .tab { flex-basis: 140px; }
}

/* --- Seitenende-Tabs der Notizseite (Backlinks, Verwandtes, Kommentare) ---
 * Der Text steht links oben, die Tabs direkt darunter in derselben Spalte;
 * Kontext und Eigenschaften laufen rechts ueber beide Zeilen. */
.note-workspace { grid-template-rows: auto 1fr; }
.note-content { grid-column: 1; grid-row: 1; }
.note-unten { grid-column: 1; grid-row: 2; min-width: 0; }
.note-linked { grid-column: 2; grid-row: 1 / span 2; }
.note-properties { grid-column: 3; grid-row: 1 / span 2; }
@media (max-width: 1024px) {
  .note-linked { grid-column: 1 / -1; grid-row: 3; }
  .note-properties { grid-column: 2; grid-row: 1 / span 2; }
}
@media (max-width: 900px) {
  .note-content, .note-unten, .note-linked, .note-properties { grid-column: auto; grid-row: auto; }
}

.unten-leiste {
  display: flex; gap: var(--s-1); margin: calc(-1 * var(--s-1)) 0 var(--s-3);
  border-bottom: 1px solid var(--line); overflow-x: auto;
}
.unten-leiste[hidden] { display: none; }
.unten-tab {
  display: flex; align-items: center; gap: var(--s-2); padding: var(--s-2) var(--s-3);
  border: 0; border-bottom: 2px solid transparent; border-radius: var(--r-2) var(--r-2) 0 0;
  background: transparent; color: var(--fg-muted); font-size: var(--fs-base); cursor: pointer;
  white-space: nowrap;
}
.unten-tab:hover { color: var(--fg); background: var(--surface-3); }
.unten-tab[aria-selected="true"] { color: var(--fg-strong); border-bottom-color: var(--accent); }
.unten-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.unten-zahl {
  min-width: 1.6em; padding: 0 var(--s-1); border-radius: var(--r-full);
  background: var(--surface-4); color: var(--fg-muted); font-size: var(--fs-micro);
  text-align: center;
}
.unten-panel[hidden] { display: none; }
/* Mit Tabs traegt der Reiter die Ueberschrift; ohne JS bleibt sie stehen. */
.note-unten.unten-aktiv .unten-panel > .side-section > h3:first-child { display: none; }
.note-unten .unten-panel > .side-section + .side-section { margin-top: 0; padding-top: 0; border-top: 0; }

/* --- Typ-Datenansicht: Tabelle mit Feldern des Typs, Label-Chips, Dashboard --- */
.typ-tabelle th { white-space: nowrap; }
.th-sort { color: inherit; text-decoration: none; }
.th-sort:hover { color: var(--fg-strong); }
.th-sort:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.sort-pfeil { color: var(--accent); font-size: var(--fs-micro); }
.typ-tabelle td.zelle-zahl { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.label-chip {
  display: inline-block; padding: 0 var(--s-2); border: 1px solid var(--tag-border);
  border-radius: var(--r-full); background: var(--tag-soft); color: var(--tag);
  font-size: var(--fs-sm); line-height: 1.6; white-space: nowrap;
}
.label-chip span { color: var(--fg-subtle); margin-left: var(--s-1); }
a.label-chip-link { text-decoration: none; }
a.label-chip-link:hover { border-color: var(--accent-border); color: var(--fg-strong); }
.typ-dashboard {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--s-3);
  margin: 0 0 var(--s-4); padding: var(--s-3); border: 1px solid var(--line);
  border-radius: var(--r-3); background: var(--surface-1);
}
.dash-block h2 { margin: 0 0 var(--s-2); color: var(--fg-muted); font-size: var(--fs-micro); letter-spacing: var(--tracking-label); text-transform: uppercase; }
.dash-chips { display: flex; flex-wrap: wrap; gap: var(--s-1); }
.chip-link {
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  padding: 0 var(--s-2); border-radius: var(--r-2); background: var(--surface-3);
  color: var(--fg); font-size: var(--fs-sm); line-height: 1.7; text-decoration: none;
}
.chip-link:hover { background: var(--surface-4); color: var(--fg-strong); }

/* --- Schrägstrich-Menü im Editor (editor.js) ----------------------------- */
.slash-menu {
  position: fixed; z-index: 80; width: 240px; max-height: 260px; overflow-y: auto;
  border: 1px solid var(--line-strong); border-radius: var(--r-3);
  background: var(--surface-2); box-shadow: var(--shadow-pop);
}
.slash-menu[hidden] { display: none; }
.slash-liste { margin: 0; padding: var(--s-1); list-style: none; }
.slash-zeile {
  padding: var(--s-1) var(--s-3); border-radius: var(--r-2); color: var(--fg-muted);
  font-size: var(--fs-base); cursor: pointer;
}
.slash-zeile[aria-selected="true"] { background: var(--accent-soft); color: var(--fg-strong); }

/* --- Typ-Kacheln beim Anlegen und Felder des Typs ---------------------------- */
.typ-kacheln { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: var(--s-3); margin-top: var(--s-4); }
.typ-kachel {
  display: flex; flex-direction: column; gap: var(--s-1); padding: var(--s-4);
  border: 1px solid var(--line); border-radius: var(--r-3); background: var(--surface-2);
  color: var(--fg); text-decoration: none;
}
.typ-kachel:hover, .typ-kachel:focus-visible { border-color: var(--accent-border); background: var(--surface-3); outline: none; }
.typ-filter { width: 100%; max-width: 32rem; min-height: var(--tap); margin-top: var(--s-3); padding: 0 var(--s-3); font-size: var(--fs-md); }
.typ-kachel[hidden] { display: none; }
.typ-kachel-name { color: var(--fg-strong); font-size: var(--fs-md); font-weight: 600; }
.typ-kachel-text { color: var(--fg-muted); font-size: var(--fs-sm); }
.felder-gruppe { margin: 0; padding: var(--s-3); border: 1px solid var(--line); border-radius: var(--r-3); }
.felder-gruppe[hidden] { display: none; }
.felder-gruppe legend { padding: 0 var(--s-2); color: var(--fg-muted); font-size: var(--fs-sm); }
.felder-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--s-3); }

/* --- Objekt-Kopf: Typ-Badge und Eigenschaften als Chips ------------------------ */
.objekt-kopf { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); margin: 0 0 var(--s-3); }
.typ-badge {
  display: inline-flex; align-items: center; gap: var(--s-1); padding: 0 var(--s-2);
  border: 1px solid var(--line-strong); border-radius: var(--r-2); background: var(--surface-3);
  color: var(--fg-strong); font-size: var(--fs-sm); line-height: 1.8;
}
.typ-badge-icon { color: var(--fg-subtle); font-size: var(--fs-micro); }
.kopf-feld { display: inline-flex; align-items: center; gap: var(--s-1); }
.kopf-label { color: var(--fg-subtle); font-size: var(--fs-micro); letter-spacing: var(--tracking-label); text-transform: uppercase; }

/* Die Seitenleiste traegt die Navigation; im Kopf stehen nur Suche und Diktat, rechts ausgerichtet. */
@media (min-width: 769px) {
  header { justify-content: flex-end; }
}

/* Bei offenem Larry-Panel bleibt für zwei Spalten kein Platz: Kalender unter den Tag. */
body.larry-chat-open .today-layout { display: block; }
body.larry-chat-open .today-calendar { position: static; margin-top: var(--s-4); }

/* Editor: Text links, gerenderte Vorschau rechts (Schalter "Live"). */
.editor-split.ist-live { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-3); align-items: start; }
.editor-split.ist-live .editor-preview { border: 1px solid var(--line); border-radius: var(--r-3); padding: var(--s-4); background: var(--surface-1); min-height: 20rem; overflow: auto; }
@media (max-width: 900px) { .editor-split.ist-live { grid-template-columns: minmax(0, 1fr); } }

/* Handy: Titelzeile der Typansicht lässt "+ Neu" neben dem Titel statt darüber liegen. */
@media (max-width: 768px) {
  .object-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-3); }
  .object-heading > .nav-btn { flex: none; }
}

/* Platzhalter und Einblenden: Inhalte erscheinen, sie springen nicht. */
.skeleton-zeilen { display: grid; gap: var(--s-2); margin: var(--s-3) 0; }
.skeleton-zeilen span { display: block; height: 0.9rem; border-radius: var(--r-1); background: linear-gradient(90deg, var(--surface-3), var(--surface-4), var(--surface-3)); background-size: 200% 100%; animation: skeleton-schimmer 1.3s ease-in-out infinite; }
.skeleton-zeilen span:nth-child(2) { width: 80%; }
.skeleton-zeilen span:nth-child(3) { width: 60%; }
@keyframes skeleton-schimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }
.erscheint { animation: einblenden 0.22s ease-out both; }
@keyframes einblenden { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .erscheint, .skeleton-zeilen span { animation: none; } }

/* --- Schnell notieren: ein Feld, Chips, ein Knopf (schnellnotiz.js) ----------------- */
.schnell-form { max-width: 40rem; gap: var(--s-4); }
.schnell-form .sn-feld { gap: var(--s-2); }
.schnell-form .sn-label { color: var(--fg-muted); font-size: var(--fs-base); }
.schnell-form textarea { min-height: 8rem; padding: var(--s-3); font-size: var(--fs-md); line-height: 1.5; resize: vertical; }
.sn-zeile { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-3); }
.sn-art { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.sn-chip { position: relative; display: inline-flex; margin: 0; }
.sn-chip input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.sn-chip span {
  display: inline-flex; align-items: center; min-height: var(--tap); padding: 0 var(--s-4);
  border: 1px solid var(--line-strong); border-radius: var(--r-full); color: var(--fg-muted); font-size: var(--fs-base);
}
.sn-chip input:checked + span { border-color: var(--accent-border); background: var(--accent-soft); color: var(--fg-strong); font-weight: 500; }
.sn-chip input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.sn-datei { position: relative; display: inline-flex; align-items: center; min-height: var(--tap); margin: 0; padding: 0 var(--s-4); border: 1px solid var(--line-strong); border-radius: var(--r-2); cursor: pointer; }
.sn-datei input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.sn-datei:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
.schnell-form .form-actions { flex-wrap: wrap; align-items: center; }
.schnell-form .form-actions .nav-btn { min-height: var(--tap); display: inline-flex; align-items: center; }
.sn-sichern { min-width: 9rem; justify-content: center; }
.sn-hinweis { flex-basis: 100%; color: var(--fg-quiet); font-size: var(--fs-sm); }
@media (pointer: coarse) { .sn-hinweis { display: none; } }
.capture-hilfe { max-width: 40rem; margin: var(--s-4) 0 calc(var(--s-4) + 72px); /* unten Platz fuer den Larry-Knopf */ }
.capture-hilfe > summary { cursor: pointer; min-height: var(--tap); display: flex; align-items: center; color: var(--fg-muted); }
.capture-hilfe[open] > summary { color: var(--fg-strong); }

/* Neu anlegen am Handy: zwei Spalten, nur der Name (15 Kacheln zu je 90 px waren sechs Bildschirme, Nr 50). */
@media (max-width: 640px) {
  .typ-kacheln { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-2); }
  .typ-kachel { justify-content: center; min-height: var(--tap); padding: var(--s-2) var(--s-3); }
  .typ-kachel-text { display: none; }
}

/* Beruehrflaechen mindestens 44 px auf den Seiten dieses Pakets (Suche, Typen, Erweiterungen, Upload, Themen). */
@media (max-width: 768px) {
  .suchleiste input[type="search"], .suchleiste button { min-height: var(--tap); }
  .facette, .facetten-mehr > summary, .sortierung .facette { min-height: var(--tap); }
  .typen-formulare input, .typen-formulare button, .typen-formulare .nav-btn { min-height: var(--tap); }
  .typen-formulare select { height: var(--tap); /* WebKit ignoriert min-height an Auswahllisten */ }
  .styled-table a.btn-xs, .styled-table button.btn-xs { display: inline-flex; align-items: center; min-height: var(--tap); }
  .card > .nav-btn, .card details > summary { display: inline-flex; align-items: center; min-height: var(--tap); }
  form[action="/upload"] button, form[action="/upload"] input[type="file"] { min-height: var(--tap); }
  .area-card { min-height: var(--tap); }
}

/* Schalter fuer das Kuerzel "/" im Fuss der Palette (WCAG 2.1.4) */
.palette-tasten { margin-left: var(--s-3); min-height: 28px; padding: 0 var(--s-2); border: 1px solid var(--line-strong); border-radius: var(--r-2);
  background: transparent; color: var(--fg-muted); font-size: var(--fs-sm); cursor: pointer; }
.palette-tasten[aria-checked="true"] { border-color: var(--accent); color: var(--fg-strong); }
@media (max-width: 700px) { .palette-tasten { min-height: var(--tap); } }
/* Blockeditor: Griff und Plus am Rand, Text wie gerendert, Rohtext nur im fokussierten Block. */
.blocks-editor { display: block; padding: var(--s-4) var(--s-4) var(--s-5) var(--s-6); border: 1px solid var(--line); border-radius: var(--r-3); background: var(--surface-1); min-height: 20rem; }
.blocks-editor[hidden] { display: none; }
.blocks-hulle[hidden] { display: none; }
/* Die Knöpfe der Textleiste wirken auf das Textfeld; im Blockmodus übernimmt die Formatleiste (.blk-leiste) ihre Aufgaben. */
.editor-form.blocks-an .editor-toolbar > button:not(#editor_blocks_button) { display: none; }

.blk { position: relative; display: flex; align-items: flex-start; gap: var(--s-1); padding: 2px 0; border-radius: var(--r-2); }
.blk-tools { position: absolute; left: calc(-1 * var(--s-6)); top: 2px; display: flex; gap: 2px; opacity: 0; transition: opacity 0.12s; }
.blk:hover .blk-tools, .blk.fokus .blk-tools, .blk:focus-within .blk-tools { opacity: 1; }
.blk-plus, .blk-grip { width: 16px; height: 22px; padding: 0; border: 0; background: transparent; color: var(--fg-subtle); font-size: var(--fs-base); line-height: 1; cursor: pointer; border-radius: var(--r-1); }
.blk-grip { cursor: grab; letter-spacing: -2px; }
.blk-plus:hover, .blk-grip:hover { background: var(--surface-4); color: var(--fg); }
.blk.zieht { opacity: 0.4; }
.blk.drop-vor { box-shadow: 0 -2px 0 0 var(--accent); }
.blk.drop-nach { box-shadow: 0 2px 0 0 var(--accent); }

.blk-body { display: flex; align-items: flex-start; gap: var(--s-2); flex: 1; min-width: 0; }
.blk-inhalt { flex: 1; min-width: 0; position: relative; }
.blk-view, .blk-ta { display: block; width: 100%; margin: 0; padding: 2px var(--s-1); border: 0; background: transparent; color: var(--fg); font: inherit; font-size: var(--fs-md); line-height: 1.55; overflow-wrap: anywhere; box-sizing: border-box; }
.blk-view { min-height: 1.55em; cursor: text; white-space: normal; }
.blk-ta { resize: none; overflow: hidden; outline: none; border-radius: var(--r-1); background: var(--surface-2); }
.blk:not(.fokus) .blk-ta:not(.blk-roh) { display: none; }
.blk.fokus .blk-view { display: none; }
.blk-leer { color: var(--fg-subtle); }
.blk-view code, .blk-ta.blk-roh { font-family: var(--font-mono); font-size: var(--fs-base); }
.blk-view code { padding: 0 var(--s-1); border-radius: var(--r-1); background: var(--surface-3); }
.blk-wl { color: var(--accent); }
.blk-link { color: var(--accent); text-decoration: underline; }
.blk-emb { display: inline-block; padding: 0 var(--s-2); border-radius: var(--r-1); background: var(--surface-3); color: var(--fg-muted); font-size: var(--fs-sm); }

.blk-h1 .blk-view, .blk-h1 .blk-ta { font-size: var(--fs-2xl); font-weight: 700; color: var(--fg-strong); line-height: 1.25; }
.blk-h2 .blk-view, .blk-h2 .blk-ta { font-size: var(--fs-xl); font-weight: 650; color: var(--fg-strong); line-height: 1.3; }
.blk-h3 .blk-view, .blk-h3 .blk-ta { font-size: var(--fs-lg); font-weight: 600; color: var(--fg-strong); }
.blk-h4 .blk-view, .blk-h4 .blk-ta, .blk-h5 .blk-view, .blk-h5 .blk-ta, .blk-h6 .blk-view, .blk-h6 .blk-ta { font-size: var(--fs-md); font-weight: 600; color: var(--fg-strong); }
.blk-h1, .blk-h2, .blk-h3, .blk-h4 { margin-top: var(--s-3); }

.blk-marker { flex: none; min-width: 1.1em; color: var(--fg-muted); text-align: center; line-height: 1.55; font-size: var(--fs-md); }
.blk-num { min-width: 1.6em; text-align: right; }
.blk-check { flex: none; margin: 5px 0 0; accent-color: var(--accent); }
.blk-todo.erledigt .blk-view, .blk-todo.erledigt .blk-ta { color: var(--fg-subtle); text-decoration: line-through; }

.blk-quote .blk-body { border-left: 3px solid var(--accent-border); padding-left: var(--s-3); }
.blk-quote .blk-view, .blk-quote .blk-ta { color: var(--fg-muted); }

.blk-code .blk-inhalt, .blk-raw .blk-inhalt { border: 1px solid var(--feld-rand); border-radius: var(--r-2); background: var(--surface-2); }
.blk-code .blk-ta, .blk-raw .blk-ta { background: transparent; padding: var(--s-2) var(--s-3); white-space: pre; overflow-x: auto; }
.blk-lang { position: absolute; top: var(--s-1); right: var(--s-2); width: 7rem; padding: 0 var(--s-1); border: 1px solid var(--feld-rand); border-radius: var(--r-1); background: var(--surface-3); color: var(--fg-muted); font-size: var(--fs-micro); text-align: right; }

.blk-hr .blk-body, .blk-body.blk-hr { padding: var(--s-2) 0; outline: none; }
.blk-hr hr { width: 100%; margin: 0; border: 0; border-top: 1px solid var(--line); }
.blk-hr:focus hr { border-top-color: var(--accent); }

.blk-menu { z-index: 60; }

/* Touch: ohne Zeigen gibt es kein Hover - Griff und Plus bleiben dezent sichtbar. */
@media (hover: none) { .blk-tools { opacity: 1; } .blk-plus, .blk-grip { color: var(--fg-quiet); } }
/* Plus, Griff und Falz sind je 24 x 32 px (2.5.8, auch am Rechner); die Randspalte ist dafuer breiter. */
.blocks-editor { padding-left: 84px; }
.blk-tools { left: -78px; gap: 4px; }
.blk-plus, .blk-grip, .blk-fold { width: 24px; height: 32px; }
@media (max-width: 700px) { .blocks-editor { padding-left: 60px; } .blk-tools { left: -54px; } }

.blk.versteckt { display: none; }
.blk-fold { padding: 0; border: 0; background: transparent; color: var(--fg-subtle); font-size: var(--fs-sm); cursor: pointer; border-radius: var(--r-1); }
.blk-fold:hover { background: var(--surface-4); color: var(--fg); }
.blk.zu .blk-tools { opacity: 1; }
.blk.zu .blk-marker::after { content: " …"; color: var(--fg-subtle); }

/* Tabellen-Raster und Formel-Vorschau im Blockeditor */
.blk-tabelle { width: 100%; }
.blk-tabelle-scroll { overflow-x: auto; border: 1px solid var(--feld-rand); border-radius: var(--r-2); background: var(--surface-1); }
.blk-tabelle-grid { border-collapse: collapse; width: 100%; }
.blk-tabelle-grid th, .blk-tabelle-grid td { border: 1px solid var(--feld-rand); padding: 0; min-width: 7rem; }
.blk-tabelle-grid th { background: var(--surface-3); }
.blk-tabelle-grid input { width: 100%; border: 0; background: transparent; color: var(--fg); padding: var(--s-2) var(--s-3); font: inherit; outline: none; }
.blk-tabelle-grid th input { font-weight: 600; }
.blk-tabelle-grid input:focus { background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent); }
.blk-tabelle-leiste { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-2); opacity: 0; transition: opacity var(--dur) var(--ease); }
.blk:hover .blk-tabelle-leiste, .blk:focus-within .blk-tabelle-leiste { opacity: 1; }
@media (hover: none) { .blk-tabelle-leiste { opacity: 1; } }
.blk-mathe-vorschau { margin: var(--s-2) 0 0; padding: var(--s-2) var(--s-3); border-top: 1px dashed var(--line); }
.blk-math .blk-inhalt { border: 1px solid var(--line); border-radius: var(--r-2); background: var(--surface-2); }
.blk-math .blk-ta { background: transparent; padding: var(--s-2) var(--s-3); white-space: pre; font-family: var(--font-mono); }

/* Rahmenauswahl */
.blk.gewaehlt { background: var(--accent-soft); border-radius: var(--r-2); outline: 1px solid var(--accent-border); }
.auswahl-rahmen { position: fixed; z-index: 80; pointer-events: none; border: 1px solid var(--accent); background: var(--accent-soft); border-radius: var(--r-1); }
.blocks-editor { user-select: none; }
.blocks-editor textarea, .blocks-editor input { user-select: text; }

/* Verknüpfungen im Ruhezustand: Klick schreibt, Strg/Cmd-Klick öffnet */
a.blk-link, a.blk-wl { color: var(--accent); cursor: text; }
a.blk-link { text-decoration: underline; }

/* Codeblöcke mit Farben: die Farbschicht liegt hinter dem durchsichtigen Textfeld */
.blk-gefaerbt .blk-ta { position: relative; z-index: 1; color: transparent; caret-color: var(--fg); tab-size: 4; }
.blk-gefaerbt .blk-ta::selection { background: var(--accent-soft); color: transparent; }
.blk-farbe {
  position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; box-sizing: border-box;
  padding: var(--s-2) var(--s-3); white-space: pre; tab-size: 4; color: var(--fg);
  font-family: var(--font-mono); font-size: var(--fs-base); line-height: 1.55;
}
.blk-farbe .tok-c { color: var(--fg-subtle); font-style: italic; }
.blk-farbe .tok-s { color: var(--ok); }
.blk-farbe .tok-n { color: var(--warn); }
.blk-farbe .tok-k { color: var(--relation); font-weight: 600; }
.blk-farbe .tok-p { color: var(--accent); }
.blk-farbe .tok-v { color: var(--st-in-progress); }
.blk-lang { z-index: 2; }

/* Bildlauf-Abstand oben im Blockmodus: Leistenunterkante + 8 px (blocks_leiste.js setzt --blk-kopf; 94 px = 44 + 42 + Rand am Rechner) */
html:has(.blocks-hulle:not([hidden])) { scroll-padding-top: var(--blk-kopf, 94px); }

/* Formatleiste: oben am Rechner, am Handy über der Tastatur */
.blk-leiste {
  position: sticky; top: var(--blk-oben, 0px); z-index: 3; display: flex; align-items: center; gap: var(--s-3);
  margin-bottom: var(--s-2); padding: var(--s-1) var(--s-2); overflow-x: auto;
  border: 1px solid var(--line); border-radius: var(--r-3); background: var(--surface-1);
}
.blk-lk-gruppe { display: flex; align-items: center; gap: 2px; flex: none; }
.blk-lk-gruppe + .blk-lk-gruppe { padding-left: var(--s-3); border-left: 1px solid var(--line); }
.blk-lk {
  display: inline-flex; align-items: center; justify-content: center; min-width: 32px; height: 32px; padding: 0 var(--s-2);
  border: 0; border-radius: var(--r-2); background: transparent; color: var(--fg-muted); font: inherit; font-size: var(--fs-base); cursor: pointer;
}
.blk-lk:hover:not(:disabled) { background: var(--surface-3); color: var(--fg-strong); }
.blk-lk:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.blk-lk:disabled { opacity: 0.35; cursor: default; }
.blk-lk[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent); }
.blk-lk-fett { font-weight: 700; }
.blk-lk-kursiv { font-style: italic; font-family: serif; }
.blk-lk-durchgestrichen { text-decoration: line-through; }
.blk-lk-ueberschrift { font-weight: 700; }

/* Schwebende Auswahlleiste über markiertem Text (Maus) */
.blk-auswahl-leiste {
  position: fixed; z-index: 85; display: flex; gap: 2px; padding: var(--s-1);
  border: 1px solid var(--line-strong); border-radius: var(--r-3); background: var(--surface-2); box-shadow: var(--shadow-pop);
}
.blk-auswahl-leiste[hidden] { display: none; }

/* Handy: Leiste klebt über der Tastatur und zeigt sich nur beim Schreiben */
@media (hover: none) and (pointer: coarse), (max-width: 700px) {
  .blk-leiste {
    position: fixed; left: 0; right: 0; bottom: var(--blk-unten, 0px); top: auto; z-index: 70; margin: 0;
    border-radius: 0; border-width: 1px 0 0; padding: var(--s-1) var(--s-3); gap: var(--s-2);
  }
  .blocks-hulle:not(.schreibt) .blk-leiste { display: none; }
  .blocks-hulle.schreibt { padding-bottom: 56px; }
  /* Der Larry-Knopf läge sonst über der Leiste */
  body:has(.blocks-hulle.schreibt) .larry-chat-toggle { display: none; }
  .blk-lk { min-width: 44px; height: 44px; }
  .blk-lk-gruppe + .blk-lk-gruppe { padding-left: var(--s-2); }
}
/* Bilder in Seiten: Lesesicht (Datei und Bildobjekt), Block im Editor, Bildwahl.
 * Nur Tokens, keine Roh-Farben. Die Drehmarke der Aufnahme wirkt nur beim Anzeigen (die Datei bleibt unverändert). */

/* --- Lesesicht ------------------------------------------------------------------------------------ */
.bild { display: block; width: fit-content; max-width: 100%; margin: var(--s-3) 0; }
.bild-link { display: block; line-height: 0; border-radius: var(--r-2); }
.bild-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.bild .embedded-image { display: block; width: auto; max-width: 100%; height: auto; border-radius: var(--r-2); image-orientation: from-image; }
.bild-klein .embedded-image { max-width: min(100%, 12rem); }
.bild-mittel .embedded-image { max-width: min(100%, 24rem); }
.bild-unterschrift { display: block; margin-top: var(--s-1); color: var(--fg-muted); font-size: var(--fs-sm); line-height: 1.4; }

.bild-verwendet h3 span { margin-left: var(--s-2); color: var(--fg-muted); font-weight: 500; }
.bild-verwendet-liste { margin: 0; padding-left: var(--s-5); }
.bild-verwendet-liste li { padding: var(--s-1) 0; }

/* --- Block im Editor ------------------------------------------------------------------------------ */
.blk-emb-mit-bild .blk-view { display: none; }
.blk-emb .blk-ta { color: var(--fg-muted); font-size: var(--fs-sm); }
.blk-lade .blk-view { color: var(--fg-muted); }
.blk-bild { width: 100%; margin: var(--s-1) 0 var(--s-2); }
.blk-bild-rahmen { position: relative; display: inline-block; max-width: 100%; line-height: 0; border-radius: var(--r-2); overflow: hidden; border: 1px solid var(--line); background: var(--surface-3); }
.blk-bild-bild { display: block; width: auto; max-width: 100%; height: auto; image-orientation: from-image; }
.blk-bild-klein .blk-bild-bild { max-width: min(100%, 12rem); }
.blk-bild-mittel .blk-bild-bild { max-width: min(100%, 24rem); }
.blk-bild-rahmen.fehler { min-width: 10rem; min-height: 5rem; padding: var(--s-4); color: var(--fg-muted); font-size: var(--fs-sm); line-height: 1.4; }

/* Marke am Bild: "Nur in dieser Seite" oder "Bildobjekt" (volle Fläche, damit sie auf jedem Bild lesbar ist) */
.blk-bild-marke {
  position: absolute; top: var(--s-2); left: var(--s-2); z-index: 2; min-height: 32px; padding: 0 var(--s-3);
  border: 1px solid var(--line-strong); border-radius: 999px; background: var(--surface-2); color: var(--fg-strong);
  font: inherit; font-size: var(--fs-sm); line-height: 1; cursor: pointer; opacity: 0; transition: opacity var(--dur) var(--ease);
}
.blk:hover .blk-bild-marke, .blk.fokus .blk-bild-marke, .blk:focus-within .blk-bild-marke, .blk-bild-marke:focus-visible { opacity: 1; }
.blk-bild-marke[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.blk-bild-marke[aria-disabled="true"] { border-style: dashed; cursor: not-allowed; }
.blk-bild-marke[aria-busy="true"] { cursor: progress; }
.blk-bild-marke:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.blk-bild-leiste { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); margin-top: var(--s-2); opacity: 0; transition: opacity var(--dur) var(--ease); }
.blk:hover .blk-bild-leiste, .blk.fokus .blk-bild-leiste, .blk:focus-within .blk-bild-leiste { opacity: 1; }
.blk-bild-groessen { display: inline-flex; border: 1px solid var(--line-strong); border-radius: var(--r-2); overflow: hidden; }
.blk-bild-groesse { min-height: 32px; min-width: 56px; padding: 0 var(--s-3); border: 0; border-left: 1px solid var(--line); background: var(--surface-2); color: var(--fg); font: inherit; font-size: var(--fs-sm); cursor: pointer; }
.blk-bild-groesse:first-child { border-left: 0; }
.blk-bild-groesse[aria-pressed="true"] { background: var(--accent); color: var(--on-accent); }
.blk-bild-groesse:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.blk-bild-unterschrift { flex: 1; min-width: 9rem; min-height: 32px; padding: 0 var(--s-3); border: 1px solid var(--line-strong); border-radius: var(--r-2); background: var(--surface-2); color: var(--fg); font: inherit; font-size: var(--fs-sm); }
.blk-bild-oeffnen { display: inline-flex; align-items: center; min-height: 32px; padding: 0 var(--s-2); color: var(--fg-strong); font-size: var(--fs-sm); text-decoration: underline; }
.blk-bild-meta { margin: var(--s-1) 0 0; color: var(--fg-muted); font-size: var(--fs-sm); }

/* Berührung: keine Hover-Zustände, alle Flächen mindestens 44 px */
@media (hover: none) {
  .blk-bild-marke, .blk-bild-leiste { opacity: 1; }
  .blk-bild-marke { min-height: 44px; padding: 0 var(--s-4); }
  .blk-bild-groesse { min-height: 44px; min-width: 64px; }
  .blk-bild-unterschrift { min-height: 44px; flex-basis: 100%; }
  .blk-bild-oeffnen { min-height: 44px; }
}

/* Datei auf den Editor ziehen */
.blocks-hulle.datei-zieht .blocks-editor { outline: 2px dashed var(--accent); outline-offset: 2px; }

/* Erwähnungsmenü: Bildobjekte mit Vorschau, Titel und Aufnahmedatum */
.slash-bild { display: flex; align-items: center; gap: var(--s-2); min-height: 48px; }
.slash-bild img { flex: none; width: 40px; height: 40px; object-fit: cover; border-radius: var(--r-1); image-orientation: from-image; background: var(--surface-3); }
.slash-bild-text { display: block; min-width: 0; overflow-wrap: anywhere; }
.slash-bild-datum { display: block; color: var(--fg-muted); font-size: var(--fs-micro); }

/* Bildwahl */
.bildwahl { position: fixed; inset: 0; z-index: 90; display: flex; align-items: center; justify-content: center; padding: var(--s-4); background: rgba(0, 0, 0, 0.55); }
.bildwahl-karte { width: min(34rem, 100%); max-height: min(36rem, 90vh); overflow: auto; padding: var(--s-4); border: 1px solid var(--line-strong); border-radius: var(--r-3); background: var(--surface-2); color: var(--fg); box-shadow: var(--shadow-pop); }
.bildwahl-kopf { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); margin-bottom: var(--s-3); color: var(--fg-strong); }
.bildwahl-zu { min-height: 44px; min-width: 44px; padding: 0 var(--s-3); border: 1px solid var(--line-strong); border-radius: var(--r-2); background: var(--surface-3); color: var(--fg); font: inherit; cursor: pointer; }
.bildwahl-datei { position: relative; display: flex; align-items: center; justify-content: center; min-height: 52px; margin-bottom: var(--s-3); padding: 0 var(--s-4); border: 1px dashed var(--accent-border); border-radius: var(--r-2); background: var(--accent-soft); color: var(--fg-strong); cursor: pointer; text-align: center; }
.bildwahl-datei input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.bildwahl-datei:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
.bildwahl-suche { width: 100%; min-height: 44px; margin-bottom: var(--s-3); padding: 0 var(--s-3); border: 1px solid var(--line-strong); border-radius: var(--r-2); background: var(--surface-1); color: var(--fg); font: inherit; box-sizing: border-box; }
.bildwahl-liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(7rem, 1fr)); gap: var(--s-2); }
.bildwahl-bild { display: flex; flex-direction: column; align-items: stretch; gap: 2px; min-height: 44px; padding: var(--s-1); border: 1px solid var(--line); border-radius: var(--r-2); background: var(--surface-1); color: var(--fg); font: inherit; text-align: left; cursor: pointer; }
.bildwahl-bild:hover, .bildwahl-bild:focus-visible { border-color: var(--accent); outline: none; }
.bildwahl-bild img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--r-1); background: var(--surface-3); image-orientation: from-image; }
.bildwahl-titel { font-size: var(--fs-sm); overflow-wrap: anywhere; }
.bildwahl-datum { color: var(--fg-muted); font-size: var(--fs-micro); }
.bildwahl-hinweis { margin: var(--s-3) 0 0; color: var(--fg-muted); font-size: var(--fs-sm); }
/* Textmarkierung: gelb (`==Text==`) und Grün, Rot, Blau (`<mark class="vw-…">`) in Editor und Lesesicht.
 * Farben stehen als Tokens in tokens.css (dunkel) und theme.css (hell). Text ist --mark-fg auf der Farbfläche. */
mark, mark.vw-gelb, mark.vw-gruen, mark.vw-rot, mark.vw-blau {
  padding: 0 var(--s-1); border-radius: var(--r-1); color: var(--mark-fg); background: var(--mark-gelb);
  box-shadow: inset 0 -2px 0 var(--mark-gelb-kante); -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
mark.vw-gruen { background: var(--mark-gruen); box-shadow: inset 0 -2px 0 var(--mark-gruen-kante); }
mark.vw-rot { background: var(--mark-rot); box-shadow: inset 0 -2px 0 var(--mark-rot-kante); }
mark.vw-blau { background: var(--mark-blau); box-shadow: inset 0 -2px 0 var(--mark-blau-kante); }
mark a, mark .wikilink, mark .blk-wl, mark .blk-link { color: inherit; }
@media print { mark { -webkit-print-color-adjust: exact; print-color-adjust: exact; } }

/* Farbmenü am Griff der Formatleiste */
.blk-mark-pop {
  position: fixed; z-index: 95; display: flex; flex-direction: column; min-width: 12rem; padding: var(--s-1);
  border: 1px solid var(--line-strong); border-radius: var(--r-3); background: var(--surface-2); box-shadow: var(--shadow-pop);
}
.blk-mark-pop[hidden] { display: none; }
.blk-mark-eintrag {
  display: flex; align-items: center; gap: var(--s-3); min-height: 36px; padding: 0 var(--s-3); border: 0; border-radius: var(--r-2);
  background: transparent; color: var(--fg); font: inherit; font-size: var(--fs-ui); text-align: left; cursor: pointer;
}
.blk-mark-eintrag:hover, .blk-mark-eintrag:focus-visible { background: var(--surface-3); color: var(--fg-strong); }
.blk-mark-eintrag:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.blk-mark-eintrag[data-farbe="weg"] { margin-top: var(--s-1); border-top: 1px solid var(--line); border-radius: 0 0 var(--r-2) var(--r-2); }
.blk-mark-punkt { flex: none; width: 18px; height: 18px; border-radius: var(--r-1); border: 2px solid transparent; }
.blk-mark-punkt.vw-gelb { background: var(--mark-gelb); border-color: var(--mark-gelb-kante); }
.blk-mark-punkt.vw-gruen { background: var(--mark-gruen); border-color: var(--mark-gruen-kante); }
.blk-mark-punkt.vw-rot { background: var(--mark-rot); border-color: var(--mark-rot-kante); }
.blk-mark-punkt.vw-blau { background: var(--mark-blau); border-color: var(--mark-blau-kante); }
.blk-mark-punkt-weg { border-color: var(--fg-subtle); background: transparent; position: relative; }
.blk-mark-punkt-weg::after { content: ""; position: absolute; left: 1px; right: 1px; top: 6px; height: 2px; background: var(--fg-subtle); transform: rotate(-45deg); }
@media (hover: none) and (pointer: coarse), (max-width: 720px) {
  .blk-mark-eintrag { min-height: 44px; }
}
/* Markiergriff in der Leiste: der Balken unter dem Stift zeigt die Farbe, die der Griff setzt */
.blk-lk[data-befehl="markieren"] .blk-mark-balken { fill: var(--mark-gelb-kante); }
.blk-lk[data-befehl="markieren"][data-farbe="gruen"] .blk-mark-balken { fill: var(--mark-gruen-kante); }
.blk-lk[data-befehl="markieren"][data-farbe="rot"] .blk-mark-balken { fill: var(--mark-rot-kante); }
.blk-lk[data-befehl="markieren"][data-farbe="blau"] .blk-mark-balken { fill: var(--mark-blau-kante); }
.blk-lk[data-befehl="markierfarbe"] { min-width: 20px; padding: 0 var(--s-1); }
/* Document task controls reuse the application's semantic tokens. */
.document-task-convert { margin-inline-start: var(--s-2); font-size: var(--fs-sm); }
.blk-body > .document-task-convert { align-self: flex-start; white-space: normal; }
.document-task-dialog { background: var(--surface-2); color: var(--fg); border-color: var(--surface-4); border-radius: var(--r-2); padding: var(--s-5); max-width: min(var(--measure-prose), calc(100% - var(--s-6))); }
.document-task-dialog form { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.document-task-dialog label, .document-task-dialog p { flex-basis: 100%; }
.document-task-dialog input { display: block; width: 100%; margin-block-start: var(--s-2); }
.document-task-dialog::backdrop { background: var(--bg); opacity: .8; }
@media (max-width: 720px), (pointer: coarse) {
  .document-task-convert,
  .document-task-status .property-chip,
  [data-document-id] .property-chip[data-property="status"] {
    min-block-size: var(--s-7);
    min-inline-size: var(--s-7);
    padding-inline: var(--s-3);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
  }
  .blk-todo .blk-body { display: grid; grid-template-columns: var(--s-7) minmax(0, 1fr); align-items: start; }
  .blk-todo .blk-inhalt { grid-column: 2; min-width: 0; }
  .blk-todo .blk-body > .document-task-convert { grid-column: 2; margin-inline-start: 0; justify-self: start; }
  .blk-check,
  [data-document-task] {
    appearance: none;
    padding: 0;
    border: 0;
    background: transparent;
    inline-size: var(--s-7);
    block-size: var(--s-7);
    flex: none;
    margin: 0;
    display: inline-grid;
    place-items: center;
    vertical-align: middle;
    accent-color: var(--accent);
  }
  .blk-check::before,
  [data-document-task]::before {
    content: "";
    inline-size: var(--s-3);
    block-size: var(--s-3);
    border: 1px solid var(--fg-muted);
    border-radius: var(--r-1);
    display: grid;
    place-items: center;
    font-size: var(--fs-sm);
    line-height: var(--lh-tight);
  }
  .blk-check:checked::before,
  [data-document-task]:checked::before {
    content: "✓";
    background: var(--accent);
    border-color: var(--accent);
    color: var(--on-accent);
  }
  .blk-check:focus-visible,
  [data-document-task]:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--r-1); }
}
/* Keep status color in the indicator; task text must remain readable in both themes. */
:is(.document-task-status, [data-document-id], .editor-preview) .property-chip[data-property="status"] {
  color: var(--fg);
  background: var(--surface-2);
}
[data-document-task-link] a.wikilink,
[data-document-id] a.wikilink,
.editor-preview a.wikilink,
a.blk-wl {
  color: var(--fg);
  text-decoration: underline;
}
:is(.document-task-status, [data-document-id], .editor-preview) .status-backlog::before { background: var(--st-backlog); }
:is(.document-task-status, [data-document-id], .editor-preview) .status-open::before { background: var(--st-open); }
:is(.document-task-status, [data-document-id], .editor-preview) .status-next::before { background: var(--st-next); }
:is(.document-task-status, [data-document-id], .editor-preview) .status-in-progress::before { background: var(--st-in-progress); }
:is(.document-task-status, [data-document-id], .editor-preview) .status-waiting::before { background: var(--st-waiting); }
:is(.document-task-status, [data-document-id], .editor-preview) .status-paused::before { background: var(--st-paused); }
:is(.document-task-status, [data-document-id], .editor-preview) .status-done::before { background: var(--st-done); }
:is(.document-task-status, [data-document-id], .editor-preview) .status-cancelled::before { background: var(--st-cancelled); }
/* Keep editor guidance and unresolved link labels readable in either theme. */
.editor-form .editor-status,
.editor-form span.blk-wl { color: var(--fg); }
/* PDF-Reader & Citavi-Wissensorganisator: Seiten, Markierungen, Gliederung, Lesemodi. */
.pdf-reader { display: flex; flex-direction: column; height: calc(100vh - 7rem); min-height: 28rem; }
.pdf-leiste { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); flex-wrap: wrap; padding-bottom: var(--s-3); }
.pdf-titel { margin: 0; font-size: var(--fs-lg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 32rem; }
.pdf-steuer { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; }
.pdf-steuer button { min-width: 2rem; }
.pdf-seite input { width: 3.6rem; }
.pdf-zoom { min-width: 3.2rem; text-align: center; color: var(--fg-muted); font-size: var(--fs-sm); }
.pdf-rahmen { display: grid; grid-template-columns: minmax(0, 1fr) 21rem; gap: var(--s-4); flex: 1; min-height: 0; }
.pdf-reader.fokus-modus .pdf-rahmen { grid-template-columns: minmax(0, 1fr); }
.pdf-reader.fokus-modus .pdf-seitenleiste { display: none; }
.pdf-ansicht { overflow: auto; border: 1px solid var(--line); border-radius: var(--r-3); background: var(--surface-1); padding: var(--s-4); outline: none; }
.pdf-seiten { display: flex; flex-direction: column; align-items: center; gap: var(--s-4); }
.pdf-laden { color: var(--fg-muted); }
.pdf-laden.fehler { color: var(--danger); }
.pdf-seite-box { position: relative; flex: none; background: #ffffff; box-shadow: 0 1px 6px rgba(0, 0, 0, 0.35); transition: filter 0.2s ease; }
.pdf-reader[data-theme="sepia"] .pdf-seite-box { filter: sepia(0.32) contrast(0.96) brightness(0.97); }
.pdf-reader[data-theme="dunkel"] .pdf-seite-box { filter: invert(0.88) hue-rotate(180deg) contrast(0.95); }
.pdf-nr { position: absolute; top: var(--s-1); left: calc(100% + var(--s-2)); color: var(--fg-subtle); font-size: var(--fs-micro); }
.pdf-leinwand { display: block; }
.pdf-text { position: absolute; inset: 0; overflow: clip; line-height: 1; text-size-adjust: none; forced-color-adjust: none; transform-origin: 0 0; z-index: 1; --total-scale-factor: calc(var(--scale-factor, 1) * var(--user-unit, 1)); }
.pdf-text :is(span, br) { color: transparent; position: absolute; white-space: pre; cursor: text; transform-origin: 0% 0%; }
.pdf-text > :not(.markedContent), .pdf-text .markedContent span:not(.markedContent) { z-index: 1; }
.pdf-text ::selection { background: var(--accent-border); }
.pdf-markierungen { position: absolute; inset: 0; pointer-events: none; z-index: 2; mix-blend-mode: multiply; }
.pdf-markierung { position: absolute; background: rgba(255, 216, 77, 0.45); border-radius: 2px; pointer-events: auto; cursor: pointer; transition: outline 0.15s ease; }
.pdf-markierung:hover { outline: 1.5px solid var(--accent); }
.pdf-markierung.blinkt { outline: 2px solid var(--warn); animation: pdf-blink 0.4s ease-in-out 3; }
@keyframes pdf-blink { 50% { background: rgba(255, 216, 77, 0.9); } }

/* Suche in der Werkzeugleiste */
.pdf-suche-box { display: inline-flex; align-items: center; gap: 4px; background: var(--surface-2); border: 1px solid var(--feld-rand); border-radius: var(--r-2); padding: 2px 6px; }
.pdf-suche-box input[type="search"] { width: 9.5rem; border: none; background: transparent; color: var(--fg); font-size: var(--fs-sm); outline: none; }
.pdf-suche-box button { padding: 2px 6px; min-width: 1.5rem; font-size: var(--fs-xs); }
.pdf-suche-stand { font-size: var(--fs-xs); color: var(--fg-muted); min-width: 2.2rem; text-align: center; }

/* Citavi-Seitenleiste: Reiter, Filter, Wissenselemente & Gliederung */
.pdf-seitenleiste { overflow: auto; border: 1px solid var(--line); border-radius: var(--r-3); background: var(--surface-1); padding: var(--s-3); display: flex; flex-direction: column; gap: var(--s-2); }
.pdf-seitenleiste-kopf { display: grid; gap: var(--s-2); }
.pdf-reiter-leiste { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; background: var(--surface-2); padding: 3px; border-radius: var(--r-2); border: 1px solid var(--line); }
.pdf-reiter { background: transparent; border: none; border-radius: var(--r-1); padding: 4px 8px; font: inherit; font-size: var(--fs-sm); color: var(--fg-muted); cursor: pointer; }
.pdf-reiter.aktiv { background: var(--surface-3); color: var(--fg-strong); font-weight: 600; }
.pdf-filter-zeile { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-1); }
.pdf-filter-zeile select, .pdf-filter-zeile input { width: 100%; box-sizing: border-box; font-size: var(--fs-xs); padding: 4px 6px; }
.pdf-filter-zeile[hidden] { display: none; }
.pdf-liste, .pdf-gliederung { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2); }
.pdf-liste[hidden], .pdf-gliederung[hidden] { display: none; }
.pdf-liste > li { display: grid; gap: 4px; border: 1px solid var(--line); border-radius: var(--r-2); background: var(--surface-2); padding: var(--s-2); transition: border-color 0.15s ease; }
.pdf-liste > li:hover, .pdf-liste > li.aktiv-markiert { border-color: var(--accent-border); }
.pdf-eintrag { display: grid; gap: 4px; width: 100%; padding: 0; text-align: left; border: none; background: transparent; color: var(--fg); cursor: pointer; font: inherit; }
.pdf-eintrag-meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: var(--fs-xs); color: var(--fg-muted); }
.pdf-kat-badge { background: var(--tag-soft); color: var(--tag); border: 1px solid var(--tag-border); border-radius: var(--r-full); padding: 1px 6px; font-size: var(--fs-micro); }
.pdf-ki-badge { background: var(--accent-soft); color: var(--accent); border: 1px solid var(--accent-border); border-radius: var(--r-full); padding: 1px 6px; font-size: var(--fs-micro); font-weight: 600; }
.pdf-kernaussage { font-weight: 600; color: var(--fg-strong); font-size: var(--fs-sm); line-height: 1.3; }
.pdf-zitat { color: var(--fg-muted); font-size: var(--fs-sm); line-height: 1.35; }
.pdf-komm { font-size: var(--fs-sm); color: var(--fg); line-height: 1.35; }
.pdf-cited-by { font-size: var(--fs-micro); color: var(--relation); }
.pdf-eintrag-aktionen { display: flex; gap: 6px; justify-content: flex-end; border-top: 1px solid var(--line); padding-top: 4px; }
.pdf-mini-btn { background: var(--surface-3); border: 1px solid var(--line); border-radius: var(--r-1); color: var(--fg-muted); font-size: var(--fs-micro); padding: 2px 8px; cursor: pointer; }
.pdf-mini-btn:hover { color: var(--fg-strong); border-color: var(--accent-border); }
.pdf-gliederung-zeile { margin: 0; }
.pdf-gliederung-knopf { width: 100%; text-align: left; background: transparent; border: none; border-radius: var(--r-1); padding: 5px 8px; color: var(--fg); font: inherit; font-size: var(--fs-sm); cursor: pointer; }
.pdf-gliederung-knopf:hover { background: var(--surface-2); color: var(--accent); }

/* Citavi-Popover (Anlegen & Bearbeiten) */
.pdf-popover { position: fixed; z-index: 70; width: 20rem; max-width: calc(100vw - 16px); padding: var(--s-3); border: 1px solid var(--accent-border); border-radius: var(--r-3); background: var(--surface-3); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45); display: grid; gap: var(--s-2); }
.pdf-popover[hidden] { display: none; }
.pdf-popover input[type="text"], .pdf-popover textarea, .pdf-popover select { width: 100%; box-sizing: border-box; font-size: var(--fs-sm); }
.pdf-popover input[hidden], .pdf-popover button[hidden] { display: none; }
.pdf-popover textarea { resize: vertical; }
.pdf-ziel-gruppe { display: grid; gap: 4px; padding: 6px; border-radius: var(--r-2); background: var(--surface-2); border: 1px solid var(--line); }
.pdf-ki-option { display: flex; align-items: center; gap: 6px; font-size: var(--fs-xs); color: var(--fg-muted); cursor: pointer; }
.pdf-popover-knoepfe { display: flex; gap: var(--s-2); flex-wrap: wrap; }
.pdf-popover-knoepfe .danger-btn { color: var(--danger); border-color: var(--danger); background: transparent; }
@media (max-width: 900px) { .pdf-rahmen { grid-template-columns: minmax(0, 1fr); } .pdf-seitenleiste { max-height: 16rem; } }
.pdf-markierung.vorschau { background: var(--accent-soft); outline: 1px dashed var(--accent); pointer-events: none; }
.pdf-markierung.snippet { background: rgba(59, 130, 246, 0.15); border: 2px dashed #0088cc; }
.pdf-crop-overlay { position: absolute; border: 2px dashed #0088cc; background: rgba(59, 130, 246, 0.2); pointer-events: none; z-index: 10; }
.pdf-tools { display: inline-flex; border-radius: var(--r-2); border: 1px solid var(--line); overflow: hidden; }
.pdf-tool-btn { background: var(--surface-2); border: none; padding: var(--s-1) var(--s-3); font: inherit; font-size: var(--fs-sm); cursor: pointer; color: var(--fg); }
.pdf-tool-btn.aktiv { background: var(--accent); color: var(--on-accent); font-weight: 600; }
[data-pdf-tool="snippet"] .pdf-seite-box { cursor: crosshair; touch-action: none; }
[data-pdf-tool="snippet"] .pdf-text, [data-pdf-tool="snippet"] .pdf-markierung { pointer-events: none; }
.pdf-thumb { display: block; max-width: 100%; max-height: 7rem; object-fit: contain; border-radius: var(--r-1); border: 1px solid var(--line); margin: 4px 0; background: var(--surface-1); }
.pdf-caption { font-size: var(--fs-sm); font-weight: 500; color: var(--fg); }
.zitat-thumb-box { margin: var(--s-2) 0; }
.zitat-thumb { max-width: 100%; max-height: 14rem; border-radius: var(--r-2); border: 1px solid var(--line); background: var(--surface-1); object-fit: contain; }
.zitat-caption { font-size: var(--fs-base); margin: var(--s-1) 0; color: var(--fg-strong); }
.zitat-kat-chip { background: var(--tag-soft); color: var(--tag); border-color: var(--tag-border); }
.zitat-auftrag-chip { background: var(--accent-soft); color: var(--accent); border-color: var(--accent-border); text-decoration: none; }
.zitat-cited-by { font-size: var(--fs-xs); margin: var(--s-1) 0; }
.zitat-aktionen { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-2); align-items: center; }
.zitat-anfuegen-form { display: inline-flex; gap: var(--s-1); flex-wrap: wrap; align-items: center; margin: 0; }
.zitat-anfuegen-form input { width: 9rem; }

/* Farbe je Wissenselement: gleich in der Schnellleiste, in der Seite und in der echten PDF-Markierung */
.pdf-markierung[data-art="zitat"] { background: rgba(255, 216, 77, 0.45); }
.pdf-markierung[data-art="indirekt"] { background: rgba(142, 197, 255, 0.45); }
.pdf-markierung[data-art="zusammenfassung"] { background: rgba(155, 226, 155, 0.45); }
.pdf-markierung[data-art="kommentar"] { background: rgba(255, 184, 107, 0.45); }
.pdf-markierung[data-art="idee"] { background: rgba(214, 166, 255, 0.45); }
.pdf-markierung[data-art="roter_beleg"] { background: rgba(255, 122, 122, 0.45); }
.pdf-schnellleiste { position: fixed; z-index: 70; display: flex; align-items: center; gap: var(--s-2); padding: 6px 8px; border: 1px solid var(--accent-border); border-radius: 999px; background: var(--surface-3); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4); }
.pdf-schnellleiste[hidden] { display: none; }
.pdf-schnell-punkt { width: 28px; height: 28px; padding: 0; border-radius: 50%; border: 2px solid transparent; cursor: pointer; }
.pdf-schnell-punkt:hover, .pdf-schnell-punkt:focus-visible { border-color: var(--text); }
.pdf-schnell-punkt[data-art="zitat"] { background: #ffd84d; }
.pdf-schnell-punkt[data-art="indirekt"] { background: #8ec5ff; }
.pdf-schnell-punkt[data-art="zusammenfassung"] { background: #9be29b; }
.pdf-schnell-punkt[data-art="kommentar"] { background: #ffb86b; }
.pdf-schnell-punkt[data-art="idee"] { background: #d6a6ff; }
.pdf-schnell-punkt[data-art="roter_beleg"] { background: #ff7a7a; }
.pdf-schnell-mehr { min-width: 28px; height: 28px; padding: 0 8px; border-radius: 14px; border: 1px solid var(--accent-border); background: transparent; color: var(--text); font-size: var(--fs-xs); cursor: pointer; }
.pdf-meldung { position: fixed; z-index: 80; left: 50%; bottom: 24px; transform: translateX(-50%); padding: 8px 14px; border-radius: var(--r-3); background: var(--surface-3); border: 1px solid var(--warn); color: var(--text); }
.pdf-meldung[hidden] { display: none; }
.pdf-popover { width: 23rem; }
.pdf-popover-zeile { display: grid; grid-template-columns: 1fr 7.5rem; gap: var(--s-1); }
.pdf-zitat-box { display: grid; gap: 4px; }
.pdf-zitat-box[hidden], .pdf-beleg-hinweis[hidden] { display: none; }
.pdf-zitat-werkzeuge { display: flex; align-items: center; justify-content: space-between; gap: 4px; flex-wrap: wrap; }
.pdf-beleg-hinweis { font-size: var(--fs-xs); padding: 4px 8px; border-radius: var(--r-2); background: var(--surface-2); border: 1px solid var(--accent-border); color: var(--fg); display: flex; align-items: center; justify-content: space-between; gap: 6px; flex-wrap: wrap; }
.web-ansicht { background: var(--surface-1); padding: var(--s-5); }
.web-reader[data-theme="sepia"] .web-ansicht { background: #f4ecd8; color: #3b3222; }
.web-reader[data-theme="hell"] .web-ansicht { background: #ffffff; color: #1c1e26; }
@media (max-width: 720px) { .pdf-schnell-punkt { width: 38px; height: 38px; } .pdf-schnell-mehr { min-width: 38px; height: 38px; } }

/* Heller Modus (Catppuccin Latte). Dunkel bleibt die Vorgabe; umgeschaltet wird per Knopf in der
 * Seitenleiste, gemerkt im Browser. Nur Tokens werden überschrieben - kein Selektor ändert sich. */
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #eff1f5;
  --surface-1: #e9ecf2;
  --surface-2: #f8f9fc;
  --surface-3: #dfe3ec;
  --surface-4: #ccd0da;
  --layer-side: #e3e6ed;
  --fg: #4c4f69;
  --fg-muted: #5c5f77;
  --fg-quiet: #60637a;
  --fg-subtle: #5f6279;
  --fg-strong: #1e2030;
  --accent: #1a56d6;
  --accent-soft: rgba(26, 86, 214, 0.10);
  --accent-border: rgba(26, 86, 214, 0.35);
  --on-accent: #ffffff;
  --relation: #8839ef;
  --relation-soft: rgba(136, 57, 239, 0.10);
  --relation-border: rgba(136, 57, 239, 0.28);
  --tag: #55586d;
  --tag-soft: rgba(85, 88, 109, 0.10);
  --tag-border: rgba(85, 88, 109, 0.28);
  --scrim: rgba(30, 32, 48, 0.38);
  --shadow-pop: 0 12px 40px rgba(30, 32, 48, 0.18);
  --line: rgba(76, 79, 105, 0.14);
  --line-strong: rgba(76, 79, 105, 0.26);
  /* Chip-Text auf der hellen Chipflaeche (gemessen 2,0 und 4,2 zu 1 mit der reinen Farbe) */
  --chip-ueberfaellig: color-mix(in srgb, var(--st-waiting) 45%, var(--fg-strong));
  --chip-relation: color-mix(in srgb, var(--relation) 75%, var(--fg-strong));
  --prio-high: #be0d34;
  --prio-medium: #fe640b;
  --prio-low: #209fb5;
  --prio-none: #bcc0cc;
  --st-backlog: #666981;
  --st-next: #5c5f77;
  --st-open: #04a5e5;
  --st-in-progress: #179299;
  --st-waiting: #df8e1d;
  --st-paused: #dd7878;
  --st-done: #40a02b;
  --st-cancelled: #5f6279;
  --danger: #be0d34;
  --warn: #a84a05;
  --ok: #40a02b;
  --mark-fg: #1e2030;
  --mark-gelb: #f9e79b;
  --mark-gelb-kante: #8a6a00;
  --mark-gruen: #bfe8c0;
  --mark-gruen-kante: #2f7d46;
  --mark-rot: #f6c4cf;
  --mark-rot-kante: #b3304f;
  --mark-blau: #bcd6f7;
  --mark-blau-kante: #2f68b5;
}
.theme-toggle { width: 1.9rem; height: 1.9rem; padding: 0; border: 1px solid var(--line); border-radius: var(--r-2); background: transparent; color: var(--fg-muted); cursor: pointer; font-size: var(--fs-md); line-height: 1; }
.theme-toggle:hover { background: var(--surface-3); color: var(--fg); }

/* Heller Modus: Statusfarben sind Mitteltoene und als Text auf hellen Flaechen zu blass (gemessen 2,0 bis 2,9 zu 1 bei
 * "waiting", "open", "done", "medium"; Soll 4,5). Der Chip-Text wird zur Haelfte mit der Schriftfarbe gemischt, der Punkt
 * davor behaelt die reine Farbe. Dunkel bleibt unberuehrt. */
:root[data-theme="light"] .status-open { --pkt: var(--st-open); color: color-mix(in srgb, var(--st-open) 50%, var(--fg-strong)); }
:root[data-theme="light"] .status-in-progress { --pkt: var(--st-in-progress); color: color-mix(in srgb, var(--st-in-progress) 55%, var(--fg-strong)); }
:root[data-theme="light"] .status-waiting { --pkt: var(--st-waiting); color: color-mix(in srgb, var(--st-waiting) 45%, var(--fg-strong)); }
:root[data-theme="light"] .status-paused { --pkt: var(--st-paused); color: color-mix(in srgb, var(--st-paused) 50%, var(--fg-strong)); }
:root[data-theme="light"] .status-done { --pkt: var(--st-done); color: color-mix(in srgb, var(--st-done) 55%, var(--fg-strong)); }
/* Grau-Status ("Spaeter", "Naechste", "Verworfen"): auf der Chipflaeche (surface-3/4) lagen sie bei 3,5 bis 4,2 zu 1. */
:root[data-theme="light"] .status-backlog { --pkt: var(--st-backlog); color: color-mix(in srgb, var(--st-backlog) 60%, var(--fg-strong)); }
:root[data-theme="light"] .status-next { --pkt: var(--st-next); color: color-mix(in srgb, var(--st-next) 60%, var(--fg-strong)); }
:root[data-theme="light"] .status-cancelled { --pkt: var(--st-cancelled); color: color-mix(in srgb, var(--st-cancelled) 60%, var(--fg-strong)); }
:root[data-theme="light"] .prio-medium { --pkt: var(--prio-medium); color: color-mix(in srgb, var(--prio-medium) 45%, var(--fg-strong)); }
:root[data-theme="light"] .prio-low { --pkt: var(--prio-low); color: color-mix(in srgb, var(--prio-low) 55%, var(--fg-strong)); }
:root[data-theme="light"] .status-chip:not(.st-sym)::before,
:root[data-theme="light"] .property-chip[class*="prio-"]::before { background: var(--pkt, currentColor); }
:root[data-theme="light"] .az-plus { color: color-mix(in srgb, var(--ok) 55%, var(--fg-strong)) !important; }
:root[data-theme="light"] .col-count,
:root[data-theme="light"] .reiter-zahl,
:root[data-theme="light"] .unten-zahl { color: var(--fg); }

/* Typsymbole in der Seitenleiste (hell): "Notizen" (Gelb) lag bei 2,9 zu 1 auf der Leistenflaeche; 65 Prozent Typfarbe ergeben mindestens 3,8 (1.4.11). */
:root[data-theme="light"] .sidebar-link.sb-typ .sb-ic { color: color-mix(in srgb, var(--typ-farbe, var(--fg-quiet)) 65%, var(--fg-strong)); }
:root[data-theme="light"] .sidebar-link.sb-typ.active .sb-ic { color: color-mix(in srgb, var(--typ-farbe, var(--accent)) 65%, var(--fg-strong)); }
/* Suche: Treffer mit Auszug, Objektarten als Facetten, Palette mit Farbpunkt und Auszug. */
mark { background: var(--accent-soft); color: inherit; border-radius: var(--r-1); padding: 0 1px; box-shadow: 0 0 0 1px var(--accent-border); }

.suchleiste input[type="search"] { flex: 1; min-width: 14rem; font-size: var(--fs-md); padding: var(--s-2) var(--s-3); }
.facetten, .sortierung { display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center; margin: var(--s-3) 0; }
.facette { display: inline-flex; align-items: center; gap: var(--s-2); padding: 3px var(--s-3); border: 1px solid var(--line); border-radius: var(--r-full); color: var(--fg-muted); font-size: var(--fs-sm); background: var(--surface-1); }
.facette span:last-child { color: var(--fg-subtle); font-variant-numeric: tabular-nums; }
.facette:hover { border-color: var(--line-strong); color: var(--fg); }
.facette.active { background: var(--accent-soft); border-color: var(--accent-border); color: var(--fg-strong); }

.treffer-punkt { display: inline-block; flex: none; width: 8px; height: 8px; border-radius: var(--r-full); background: var(--typ-farbe, var(--fg-subtle)); margin-right: var(--s-2); }
[data-farbe="blue"] { --typ-farbe: var(--accent); }
[data-farbe="indigo"] { --typ-farbe: var(--st-open); }
[data-farbe="purple"] { --typ-farbe: var(--relation); }
[data-farbe="green"] { --typ-farbe: var(--ok); }
[data-farbe="teal"] { --typ-farbe: var(--st-in-progress); }
[data-farbe="red"] { --typ-farbe: var(--danger); }
[data-farbe="orange"] { --typ-farbe: var(--warn); }
[data-farbe="yellow"] { --typ-farbe: var(--st-waiting); }
[data-farbe="brown"] { --typ-farbe: var(--st-paused); }

.search-results .treffer > a { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: start; gap: var(--s-2) var(--s-3); padding: var(--s-2) var(--s-3); border-radius: var(--r-2); }
.search-results .treffer > a:hover, .search-results .treffer > a:focus-visible { background: var(--surface-2); }
.search-results .treffer .treffer-punkt { margin: 7px 0 0; }
.treffer-text { display: grid; gap: 2px; min-width: 0; }
.hit-title { color: var(--fg-strong); font-weight: 600; overflow-wrap: anywhere; }
.hit-snippet { color: var(--fg-muted); font-size: var(--fs-sm); line-height: 1.45; overflow-wrap: anywhere; }
.search-group .status-section-title h2 { display: inline-flex; align-items: center; }
.hit-snippet { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.hit-ort { color: var(--fg-quiet); font-size: var(--fs-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.search-results .treffer > a > time { color: var(--fg-quiet); font-size: var(--fs-sm); font-variant-numeric: tabular-nums; white-space: nowrap; }
/* Typ-Chips: eine Reihe, der Rest hinter "Weitere Typen" (Nr 47). */
.facetten { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.facetten > .facette, .facetten > .facetten-mehr { flex: none; }
.facetten-mehr > summary { display: inline-flex; align-items: center; min-height: 28px; padding: 3px var(--s-3); border: 1px dashed var(--line-strong); border-radius: var(--r-full); color: var(--fg-muted); font-size: var(--fs-sm); cursor: pointer; list-style: none; }
.facetten-mehr > summary::-webkit-details-marker { display: none; }
.facetten-mehr[open] > summary { color: var(--fg-strong); border-style: solid; }
.facetten-mehr .facetten-liste { position: absolute; z-index: 20; display: flex; flex-wrap: wrap; gap: var(--s-2); max-width: min(560px, calc(100vw - var(--s-5))); margin-top: var(--s-1); padding: var(--s-3); border: 1px solid var(--line-strong); border-radius: var(--r-3); background: var(--surface-2); box-shadow: var(--shadow-pop); }
@media (max-width: 640px) {
  .facetten-mehr > summary { min-height: var(--tap); }
  .search-group > .muted-line a { display: inline-flex; align-items: center; min-height: var(--tap); }
  /* Zeile 1: Punkt und Text; Zeile 2: Status links, Datum rechts. So bleibt eine Zeile unter 100 px hoch. */
  .search-results .treffer > a { grid-template-columns: auto minmax(0, 1fr) auto; }
  .search-results .treffer > a > .treffer-text { grid-column: 2 / 4; }
  .search-results .treffer > a > .hit-meta { grid-column: 2; justify-self: start; }
  .search-results .treffer > a > time { grid-column: 3; align-self: center; }
  .search-results .treffer > a > .hit-meta:empty { display: none; }
  .search-results .treffer > a > .hit-meta:empty + time { grid-column: 2 / 4; justify-self: start; }
}

/* Palette: Zeilen, Chips und Hinweise stehen in rahmen.css; hier nur Auszug und Punkt. */
.palette-row .treffer-punkt { margin: 6px 0 0 0; }
.palette-auszug { color: var(--fg-muted); font-size: var(--fs-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Backlinks mit Kontext, Erwähnungen, Hover-Vorschau */
.note-verweise h3, .note-erwaehnungen h3 { display: flex; align-items: center; gap: var(--s-2); }
.note-verweise h3 span, .note-erwaehnungen h3 span { color: var(--fg-subtle); font-weight: 400; font-variant-numeric: tabular-nums; }
.verweis-filter { width: 100%; box-sizing: border-box; margin: var(--s-2) 0 var(--s-3); padding: var(--s-2) var(--s-3); }
.verweis-gruppe { margin: var(--s-3) 0; }
.verweis-gruppe > summary { display: flex; align-items: center; cursor: pointer; padding: var(--s-1) 0; color: var(--fg-muted); font-weight: 600; list-style: none; }
.verweis-gruppe > summary::-webkit-details-marker { display: none; }
.verweis-gruppe > summary::before { content: "›"; display: inline-block; width: var(--s-3); color: var(--fg-subtle); transition: transform var(--dur) var(--ease); }
.verweis-gruppe[open] > summary::before { transform: rotate(90deg); }
.verweis-gruppe .col-count { margin-left: var(--s-2); }
.verweis-karte { margin: var(--s-2) 0; padding: var(--s-3); border: 1px solid var(--line); border-radius: var(--r-2); background: var(--surface-1); transition: opacity 0.2s, transform 0.2s, border-color var(--dur) var(--ease); }
.verweis-karte:hover { border-color: var(--line-strong); }
.verweis-karte.erledigt-weg { opacity: 0; transform: translateX(8px); }
.verweis-karte[hidden] { display: none; }
.verweis-kopf { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3); }
.verweis-titel { font-weight: 600; color: var(--fg-strong); overflow-wrap: anywhere; }
.verweis-kopf time { flex: none; color: var(--fg-subtle); font-size: var(--fs-sm); }
.verweis-kontexte { list-style: none; margin: var(--s-2) 0 0; padding: 0; display: grid; gap: var(--s-1); }
.verweis-kontexte li { display: grid; gap: 1px; padding-left: var(--s-3); border-left: 2px solid var(--line-strong); }
.verweis-ueberschrift { color: var(--fg-subtle); font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: var(--tracking-label); }
.verweis-zeile { color: var(--fg-muted); font-size: var(--fs-sm); line-height: 1.5; overflow-wrap: anywhere; }
mark.verweis { background: var(--accent-soft); color: var(--accent); box-shadow: none; padding: 0 2px; }

.vorschau-pop { position: fixed; z-index: 95; width: 20rem; max-width: calc(100vw - var(--s-4)); padding: var(--s-3) var(--s-4); border: 1px solid var(--line-strong); border-radius: var(--r-3); background: var(--surface-2); box-shadow: var(--shadow-pop); display: grid; gap: var(--s-2); opacity: 0; transform: translateY(4px); transition: opacity 0.14s ease, transform 0.16s var(--ease); pointer-events: none; }
.vorschau-pop.sichtbar { opacity: 1; transform: none; }
.vorschau-pop[hidden] { display: none; }
.vorschau-kopf { display: flex; align-items: center; color: var(--fg-subtle); font-size: var(--fs-sm); }
.vorschau-zahl { margin-left: auto; font-variant-numeric: tabular-nums; }
.vorschau-titel { color: var(--fg-strong); font-size: var(--fs-md); overflow-wrap: anywhere; }
.vorschau-chips { display: flex; flex-wrap: wrap; gap: var(--s-1); }
.vorschau-text { margin: 0; color: var(--fg-muted); font-size: var(--fs-sm); line-height: 1.5; overflow-wrap: anywhere; }

/* Tagesansicht-Reiter */
.tages-reiter { display: flex; flex-wrap: wrap; gap: var(--s-1); margin: var(--s-3) 0; border-bottom: 1px solid var(--line); }
.tages-reiter button { padding: var(--s-2) var(--s-3); border: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--fg-muted); cursor: pointer; font-size: var(--fs-base); margin-bottom: -1px; }
.tages-reiter button:hover { color: var(--fg); }
.tages-reiter button[aria-selected="true"] { color: var(--fg-strong); border-bottom-color: var(--accent); font-weight: 600; }
.tages-gruppe[hidden] { display: none; }
.tages-karte { margin-bottom: var(--s-3); }
.tages-karte h2 { display: flex; align-items: center; gap: var(--s-2); }
.tages-text { max-height: 24rem; overflow: auto; }
.verweis-gruppe-tag { margin-top: var(--s-3); }
.verweis-gruppe-tag h3 { display: flex; align-items: center; gap: var(--s-2); font-size: var(--fs-sm); color: var(--fg-muted); text-transform: uppercase; letter-spacing: var(--tracking-label); }


/* Filter-Baukasten */
.filterleiste { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); margin: var(--s-3) 0; }
.filter-chip.aktiv { display: inline-flex; align-items: center; gap: var(--s-2); padding: 2px var(--s-3); border: 1px solid var(--accent-border); border-radius: var(--r-full); background: var(--accent-soft); color: var(--fg-strong); font-size: var(--fs-sm); }
.filter-chip.aktiv a { color: var(--fg-muted); font-size: var(--fs-md); line-height: 1; }
.filter-chip.aktiv a:hover { color: var(--danger); }
.filter-neu { display: inline-flex; flex-wrap: wrap; gap: var(--s-1); align-items: center; }
.filter-neu select, .filter-neu input { font-size: var(--fs-sm); padding: 3px var(--s-2); }

/* Auswahl und Kontextmenü */
.auswahl-spalte { width: 2rem; text-align: center; }
.auswahl-box { accent-color: var(--accent); cursor: pointer; }
.typ-tabelle tbody tr.markiert td { background: var(--accent-soft); }
.sammel-leiste { position: fixed; left: 50%; bottom: var(--s-5); transform: translateX(-50%); z-index: 80; display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); padding: var(--s-3) var(--s-4); border: 1px solid var(--accent-border); border-radius: var(--r-3); background: var(--surface-3); box-shadow: var(--shadow-pop); animation: einblenden 0.16s var(--ease) both; }
.sammel-leiste[hidden] { display: none; }
.kontextmenue { position: fixed; z-index: 110; min-width: 13rem; padding: var(--s-1); border: 1px solid var(--line-strong); border-radius: var(--r-3); background: var(--surface-2); box-shadow: var(--shadow-pop); display: grid; animation: einblenden 0.12s var(--ease) both; }
.kontext-kopf { padding: var(--s-2) var(--s-3); color: var(--fg-subtle); font-size: var(--fs-sm); max-width: 18rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border-bottom: 1px solid var(--line); margin-bottom: var(--s-1); }
.kontext-eintrag { text-align: left; padding: var(--s-2) var(--s-3); border: 0; border-radius: var(--r-2); background: transparent; color: var(--fg); cursor: pointer; font-size: var(--fs-base); }
.kontext-eintrag:hover, .kontext-eintrag:focus-visible { background: var(--accent-soft); color: var(--fg-strong); }
.schnellfilter { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); margin: 0 0 var(--s-3); }

/* Versionsverlauf */
.verlauf { display: grid; grid-template-columns: minmax(16rem, 22rem) minmax(0, 1fr); gap: var(--s-4); align-items: start; }
.verlauf-liste { display: flex; flex-direction: column; gap: var(--s-1); max-height: 70vh; overflow-y: auto; }
.verlauf-zeile { display: grid; grid-template-columns: 1fr auto auto; gap: var(--s-3); align-items: baseline; padding: var(--s-2) var(--s-3); border: 1px solid var(--line); border-radius: var(--r-2); background: var(--surface-1); color: var(--fg); text-decoration: none; transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.verlauf-zeile:hover { background: var(--surface-3); }
.verlauf-zeile.aktiv { border-color: var(--accent-border); background: var(--accent-soft); }
.verlauf-diff .plus { color: var(--ok); }
.verlauf-diff .minus { color: var(--danger); }
.verlauf-kopf { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); }
.verlauf-kopf h2 { margin: 0; font-size: var(--fs-lg); }
.diff-box { margin-top: var(--s-3); border: 1px solid var(--line); border-radius: var(--r-2); background: var(--surface-1); font-family: var(--font-mono); font-size: var(--fs-sm); overflow-x: auto; }
.diff-box > div { padding: 1px var(--s-3); white-space: pre-wrap; word-break: break-word; }
.diff-marke { display: inline-block; width: 1.4em; color: var(--fg-subtle); user-select: none; }
.diff-plus { background: var(--accent-soft); color: var(--ok); }
.diff-minus { background: var(--surface-3); color: var(--danger); }
.diff-kopf { color: var(--fg-subtle); background: var(--surface-2); }
@media (max-width: 860px) { .verlauf { grid-template-columns: minmax(0, 1fr); } }

/* Unteraufgaben */
.unteraufgaben { margin-top: var(--s-5); padding-top: var(--s-3); border-top: 1px solid var(--line); }
.unteraufgaben h3 { display: flex; align-items: center; gap: var(--s-2); }
.unteraufgaben h3 span { font-size: var(--fs-micro); color: var(--fg-subtle); background: var(--surface-3); border-radius: var(--r-full); padding: 0 var(--s-2); }
.unter-liste { list-style: none; margin: var(--s-2) 0; padding: 0; display: flex; flex-direction: column; gap: 1px; }
.unter-zeile { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); padding: var(--s-2) var(--s-3); border-radius: var(--r-2); background: var(--surface-1); border: 1px solid var(--line); }
.unter-zeile.erledigt a { color: var(--fg-subtle); text-decoration: line-through; }
.unter-chips { display: inline-flex; gap: var(--s-2); flex: none; }
.unter-fortschritt { display: flex; align-items: center; gap: var(--s-3); margin: var(--s-2) 0; }
.unter-fortschritt progress { flex: 1; height: 6px; accent-color: var(--ok); }
.unter-neu { display: flex; gap: var(--s-2); margin-top: var(--s-2); }
.unter-neu input[type=text] { flex: 1; }

/* Ähnliche Inhalte */
.aehnlich-tags { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); margin: var(--s-2) 0 var(--s-3); }

/* Sammlungen */
.sammlung { margin: var(--s-4) 0; }
.sammlung h3 { display: flex; align-items: center; gap: var(--s-2); }
.sammlung h3 span { font-size: var(--fs-micro); color: var(--fg-subtle); background: var(--surface-3); border-radius: var(--r-full); padding: 0 var(--s-2); }
.sammlung-neu { display: flex; gap: var(--s-2); margin-top: var(--s-3); }
.sammlung-neu input[type=text] { flex: 1; }
.sammlung-liste { display: flex; flex-wrap: wrap; gap: var(--s-2); margin: var(--s-3) 0; }
.sammlung-wahl { margin: 0; }

/* Typen und Felder */
.typen-formulare { display: grid; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); gap: var(--s-4); margin: var(--s-4) 0; }
.typen-formulare label { display: flex; flex-direction: column; gap: var(--s-1); margin-bottom: var(--s-2); }
.inline-form { display: inline; margin: 0; }

/* Auswahlmenü am Chip: Neuer Wert, und am Handy als Blatt am unteren Rand */
.chip-menu-item.neu { color: var(--accent); border-top: 1px solid var(--line); }
@media (max-width: 600px) {
  .chip-menu { position: fixed; left: 8px; right: 8px; bottom: 8px; top: auto; max-height: 65vh; overflow-y: auto; }
  .chip-menu-item { min-height: 42px; }
}

/* Eingebetteter Editor in der Notizseite */
.inline-editor { display: block; width: 100%; min-height: 50vh; border: 0; background: transparent; color-scheme: normal; }
.note-content.editiert > .inline-weg { display: none; }
body:has(.embed-editor) { background: transparent; }
.embed-editor { margin: 0; padding: 0; max-width: none; }
.embed-editor .editor-form { margin: 0; }
.embed-editor .editor-actions { position: sticky; bottom: 0; padding: var(--s-2) 0; background: var(--bg); }
.note-content:not(.editiert) .prose-klick { cursor: text; }

/* Notizkopf am Handy: Titel in voller Breite, Werkzeuge darunter in einer Reihe */
@media (max-width: 600px) {
  .note-toolbar { flex-wrap: wrap; gap: var(--s-2); }
  .note-toolbar h1 { flex: 1 1 100%; min-width: 0; overflow-wrap: anywhere; hyphens: auto; }
  .note-toolbar .nav-btn { flex: 0 0 auto; padding: var(--s-1) var(--s-3); }
  .note-toolbar [data-drucken], .note-toolbar [data-fokus] { display: none; }
}

.embed-editor .editor-toolbar, .embed-editor .editor-actions, .embed-editor #editor_mention { display: none; }
.embed-editor .blocks-editor { border: 0; background: transparent; padding: 0; }
.inline-leiste { position: fixed; z-index: 70; left: 50%; bottom: calc(var(--s-4) + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); display: flex; gap: var(--s-2); padding: var(--s-2); background: var(--surface-2); border: 1px solid var(--line-strong); border-radius: var(--r-3); box-shadow: var(--shadow-pop); }
.inline-leiste button { min-height: 40px; padding: 0 var(--s-4); border-radius: var(--r-2); border: 1px solid var(--line); background: var(--surface-3); color: var(--fg); font: inherit; cursor: pointer; }
.inline-leiste button.primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); font-weight: 600; }

/* Treffermarkierung in der Palette: erbte die gedaempfte Auszugsfarbe (hell 3,99:1, dunkel 4,11:1); jetzt starke Schriftfarbe (QA N-6). */
.palette-auszug mark, .palette-titel mark, .palette-kontext mark { color: var(--fg-strong); }
/* Bewegung und Feinschliff: Seitenwechsel ohne Aufblitzen, weiche Zustandswechsel, Rückmeldung beim
 * Klick. Reine Ergänzung - nimmt man die Datei weg, bleibt alles bedienbar, nur härter. */

/* --- Seitenwechsel (Browser mit Cross-Document View Transitions; sonst normaler Wechsel) ------- */
@view-transition { navigation: auto; }
.app-sidebar { view-transition-name: seitenleiste; }
.tab-leiste { view-transition-name: reiter; }
.app-stage > header { view-transition-name: kopf; }
.larry-chat-panel { view-transition-name: larry-panel; }
.larry-chat-toggle { view-transition-name: larry-knopf; }
main { view-transition-name: inhalt; }
::view-transition-group(*) { animation-duration: 0.2s; animation-timing-function: var(--ease); }
::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
::view-transition-old(inhalt) { animation: vt-aus 0.08s ease-in both; }
::view-transition-new(inhalt) { animation: vt-ein 0.22s var(--ease) both; }
@keyframes vt-aus { to { opacity: 0; } }
@keyframes vt-ein { from { opacity: 0; transform: translateY(6px); } }

/* Fortschrittsbalken: sofortige Rückmeldung, wenn ein Link geklickt wurde und die Seite noch lädt */
.nav-fortschritt { position: fixed; top: 0; left: 0; z-index: 120; width: 100%; height: 2px; pointer-events: none; transform: scaleX(0); transform-origin: left; background: var(--accent); opacity: 0; }
body.laedt .nav-fortschritt { opacity: 1; animation: fortschritt 2.4s cubic-bezier(0.1, 0.8, 0.2, 1) forwards; }
@keyframes fortschritt { to { transform: scaleX(0.92); } }
body.laedt main { opacity: 0.72; transition: opacity 0.25s ease 0.12s; }

/* --- Zustandswechsel ----------------------------------------------------------------------- */
a, button, input, select, textarea, summary, .property-chip, .chip-link, .sidebar-link, .nav-btn, .task-card {
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
button:not(:disabled):active, .nav-btn:active, .sidebar-new:active { transform: scale(0.97); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.styled-table tbody tr { transition: background-color var(--dur) var(--ease); }
.styled-table tbody tr:hover td { background: var(--surface-2); }

/* Seitenleiste: Typfarbe, aktiver Eintrag */
.sidebar-link { position: relative; }
.object-link { display: flex; align-items: center; gap: var(--s-2); }
.object-link::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: var(--r-full); background: var(--typ-farbe, var(--fg-subtle)); opacity: 0.85; }
.object-link[data-farbe="blue"] { --typ-farbe: var(--accent); }
.object-link[data-farbe="indigo"] { --typ-farbe: var(--st-open); }
.object-link[data-farbe="purple"] { --typ-farbe: var(--relation); }
.object-link[data-farbe="green"] { --typ-farbe: var(--ok); }
.object-link[data-farbe="teal"] { --typ-farbe: var(--st-in-progress); }
.object-link[data-farbe="red"] { --typ-farbe: var(--danger); }
.object-link[data-farbe="orange"] { --typ-farbe: var(--warn); }
.object-link[data-farbe="yellow"] { --typ-farbe: var(--st-waiting); }
.object-link[data-farbe="brown"] { --typ-farbe: var(--st-paused); }
.sidebar-link.active { background: var(--accent-soft); color: var(--fg-strong); box-shadow: inset 2px 0 0 var(--accent); }

/* Menüs und Fenster blenden ein statt aufzuspringen */
.larry-chat-panel { transition: transform 0.24s var(--ease), opacity 0.2s ease, display 0.24s allow-discrete; }
.larry-chat-panel[hidden] { display: none; transform: translateX(28px); opacity: 0; }
@starting-style { .larry-chat-panel { transform: translateX(28px); opacity: 0; } }
body.larry-chat-open .app-shell { transition: margin-right 0.24s var(--ease); }
dialog.palette { transition: opacity 0.16s ease, transform 0.18s var(--ease), display 0.18s allow-discrete, overlay 0.18s allow-discrete; }
dialog.palette:not([open]) { opacity: 0; transform: translateY(-8px) scale(0.985); }
@starting-style { dialog.palette[open] { opacity: 0; transform: translateY(-8px) scale(0.985); } }
dialog.palette::backdrop { transition: background-color 0.18s ease; }
.slash-menu:not([hidden]) { animation: einblenden 0.14s var(--ease) both; }
.pdf-popover:not([hidden]) { animation: einblenden 0.14s var(--ease) both; }

/* Lange Listen: nur zeichnen, was sichtbar ist */
.task-card, .object-row { content-visibility: auto; contain-intrinsic-size: auto 76px; }

/* Rollen */
html { scrollbar-color: var(--surface-4) transparent; scrollbar-width: thin; }
.app-sidebar, .larry-chat-events, .pdf-ansicht, .pdf-seitenleiste { overscroll-behavior: contain; scrollbar-width: thin; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  .nav-fortschritt, body.laedt main { animation: none; transition: none; }
  * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

/* Notizseite: Lesespalte, wenn Kontext und Eigenschaften zu sind */
.note-workspace.details-zu { grid-template-columns: minmax(0, 1fr); max-width: 54rem; margin-inline: auto; }
/* Nur am breiten Bildschirm: am Handy wählen die Reiter Inhalt/Kontext/Eigenschaften, da darf nichts ausgeblendet sein */
@media (min-width: 901px) { .note-workspace.details-zu .note-linked, .note-workspace.details-zu .note-properties { display: none; } }
.note-workspace.details-zu .note-content, .note-workspace.details-zu .note-unten { grid-column: 1; }
.note-workspace.details-zu .note-content { padding: var(--s-5) var(--s-6); border-color: transparent; background: transparent; }
.note-details-knopf { margin-left: auto; }
@media (max-width: 900px) { .note-details-knopf { display: none; } }
.note-workspace.details-zu .note-content.prose { font-size: 16px; line-height: 1.7; }
.note-workspace.details-zu .note-content.prose h2 { margin-top: var(--s-6); }
.note-workspace.details-zu .note-content.prose p, .note-workspace.details-zu .note-content.prose li { margin-block: 0.45em; }

/* Fokusmodus: nur der Text, ohne Seitenleiste, Reiter und Kopf.
 * Nur ab 769 px: auf dem Handy bleiben Kopfzeile (Menü, Suche) und Schublade immer erreichbar, auch wenn der gemerkte Modus
 * (sessionStorage) von einem breiteren Bildschirm stammt. Wo der Modus gilt, beendet der Knopf „Fokus beenden“ ihn ohne Tastatur. */
.fokus-ende { display: none; }
@media (min-width: 769px) {
  /* `html body` hebt die Spezifitaet ueber die Regeln von navigation.css (`html .app-shell .app-sidebar`, `html[data-sb] .app-shell`). */
  html body.fokus-modus .app-shell .app-sidebar, body.fokus-modus .tab-leiste, body.fokus-modus .app-stage > header, body.fokus-modus .larry-chat-toggle { display: none; }
  html body.fokus-modus .app-shell, html[data-sb] body.fokus-modus .app-shell { grid-template-columns: minmax(0, 1fr); }
  body.fokus-modus main { max-width: 60rem; margin-inline: auto; padding-top: var(--s-5); }
  body.fokus-modus .fokus-ende {
    display: inline-flex; align-items: center; position: fixed; z-index: 80;
    bottom: calc(var(--s-4) + env(safe-area-inset-bottom, 0px)); right: var(--s-4);
    min-height: var(--tap); padding: 0 var(--s-4); border: 1px solid var(--line-strong); border-radius: var(--r-2);
    background: var(--surface-3); color: var(--fg); font: inherit; font-size: var(--fs-sm); cursor: pointer;
  }
  body.fokus-modus .fokus-ende:hover { background: var(--surface-4); color: var(--fg-strong); }
}

/* Drucken / Als PDF speichern: nur Titel und Text */
@media print {
  .app-sidebar, .tab-leiste, .app-stage > header, .larry-chat-toggle, .larry-chat-panel, .nav-fortschritt,
  .note-toolbar .nav-btn, .objekt-kopf, .note-linked, .note-properties, .note-unten, .note-tabs, .note-details-knopf { display: none !important; }
  .app-shell { display: block; margin: 0 !important; }
  body, .note-workspace.details-zu .note-content { background: #fff; color: #000; }
  .note-workspace, .note-workspace.details-zu { display: block; max-width: none; }
  .note-pane, .note-workspace.details-zu .note-content { border: 0; padding: 0; background: transparent; }
  a { color: inherit; text-decoration: none; }
  pre, table, blockquote { break-inside: avoid; }
  h1, h2, h3 { break-after: avoid; }
}
/* Inhalt von Notizen: Syntaxfarben, Formeln, Spalten, Gruppen, faltbare Callouts. Nur Tokens. */

/* Code */
pre code .tok-c { color: var(--fg-subtle); font-style: italic; }
pre code .tok-s { color: var(--ok); }
pre code .tok-n { color: var(--warn); }
pre code .tok-k { color: var(--relation); font-weight: 600; }
pre code .tok-p { color: var(--accent); }
pre code .tok-v { color: var(--st-in-progress); }

/* Formeln: bis KaTeX geladen ist, steht die TeX-Quelle da */
.math { font-family: var(--font-mono); color: var(--fg-muted); }
.math.fertig { font-family: inherit; color: inherit; }
.math-block { display: block; text-align: center; margin: var(--s-4) 0; overflow-x: auto; padding: var(--s-2) 0; white-space: pre-wrap; }
.math-block.fertig { white-space: normal; }
.math math { font-size: 1.08em; }
.math-block math { font-size: 1.25em; }

/* Spalten und Gruppen (`> [!columns]`, `> [!group]`) */
.md-spalten { display: grid; gap: var(--s-4); margin: var(--s-4) 0; align-items: start; }
.md-spalten-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.md-spalten-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.md-spalten-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.md-spalte { min-width: 0; padding: var(--s-1) var(--s-3); border-left: 2px solid var(--line); }
.md-spalte > :first-child, .md-gruppe > :first-child { margin-top: 0; }
.md-spalte > :last-child, .md-gruppe > :last-child { margin-bottom: 0; }
.md-gruppe { border: 1px solid var(--line); background: var(--surface-1); border-radius: var(--r-3); padding: var(--s-3) var(--s-4); margin: var(--s-4) 0; }
.md-gruppe-titel { font-size: var(--fs-micro); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--fg-subtle); font-weight: 600; margin-bottom: var(--s-2); }
@media (max-width: 720px) {
  .md-spalten-2, .md-spalten-3, .md-spalten-4 { grid-template-columns: minmax(0, 1fr); }
}

/* Einklappbare Callouts (`> [!note]- Titel`) */
.callout-falt > summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: var(--s-2); }
.callout-title { min-width: 0; overflow-wrap: anywhere; }
.callout-falt > summary::-webkit-details-marker { display: none; }
.callout-falt > summary::before { content: "▸"; color: var(--fg-subtle); transition: transform var(--dur) var(--ease); display: inline-block; }
.callout-falt[open] > summary::before { transform: rotate(90deg); }
.callout-falt[open] > summary { margin-bottom: var(--s-2); }

/* Blockanker: unsichtbare Sprungmarke; das Ziel eines Blocklinks wird kurz hervorgehoben */
.blk-anker { display: inline-block; width: 0; height: 0; scroll-margin-top: 6rem; }
:target { scroll-margin-top: 6rem; }
.prose :has(> .blk-anker:target) { background: var(--accent-soft); border-radius: var(--r-2); transition: background var(--dur) var(--ease); }

/* Verknüpfung als Karte: `![[Objekt|karte]]` oder `![[Objekt|breit]]` */
.objekt-karte { display: inline-flex; flex-direction: column; gap: var(--s-1); vertical-align: top; width: min(100%, 17rem); margin: var(--s-1) var(--s-2) var(--s-1) 0; padding: var(--s-3); background: var(--surface-1); border: 1px solid var(--line); border-radius: var(--r-3); color: var(--fg); text-decoration: none; transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.objekt-karte.breit { display: flex; width: 100%; max-width: 40rem; }
.objekt-karte:hover { background: var(--surface-3); border-color: var(--accent-border); }
.objekt-karte-typ { display: flex; justify-content: space-between; gap: var(--s-2); font-size: var(--fs-micro); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--fg-subtle); }
.objekt-karte-titel { color: var(--fg-strong); }
.objekt-karte-text { font-size: var(--fs-sm); color: var(--fg-muted); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
/* Relationsansichten: verknüpfte Objekte als Liste, Tabelle, Board und Galerie.
 * Nur Tokens, keine eigenen Farben. Ruhige Flächen, Haarlinien, dichte Zeilen.
 */

.note-relationen-pane { margin-top: var(--s-5); }
.note-relationen > h3 { display: flex; align-items: center; gap: var(--s-2); }
.note-relationen > h3 span { color: var(--fg-subtle); font-size: var(--fs-sm); font-weight: 400; }

.rv-abschnitt { border: 1px solid var(--line); border-radius: var(--r-3); background: var(--surface-1); margin-top: var(--s-3); }
.rv-abschnitt > summary {
  display: flex; align-items: center; gap: var(--s-2); padding: var(--s-2) var(--s-3);
  cursor: pointer; list-style: none; min-height: var(--row-normal);
}
.rv-abschnitt > summary::-webkit-details-marker { display: none; }
.rv-abschnitt > summary::before { content: "▸"; color: var(--fg-subtle); transition: transform var(--dur) var(--ease); }
.rv-abschnitt[open] > summary::before { transform: rotate(90deg); }
.rv-icon { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: var(--r-1); background: var(--surface-3); color: var(--accent); font-size: var(--fs-sm); }
.rv-name { color: var(--fg-strong); font-weight: 600; }

/* Leiste */
.rv-leiste {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3);
  padding: var(--s-2) var(--s-3); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  background: var(--surface-2);
}
.rv-tabs { display: inline-flex; border: 1px solid var(--line-strong); border-radius: var(--r-2); overflow: hidden; }
.rv-tabs .rv-tab {
  appearance: none; border: 0; border-radius: 0; background: transparent; color: var(--fg-muted); font: inherit; font-size: var(--fs-sm);
  padding: var(--s-1) var(--s-3); cursor: pointer; min-height: 28px; box-shadow: none;
}
.rv-tabs .rv-tab + .rv-tab { border-left: 1px solid var(--line); }
.rv-tabs .rv-tab:hover { background: var(--surface-3); color: var(--fg); }
.rv-tabs .rv-tab.aktiv { background: var(--accent-soft); color: var(--accent); }
.rv-wahl { display: inline-flex; align-items: center; gap: var(--s-2); color: var(--fg-subtle); font-size: var(--fs-sm); }
.rv-wahl select {
  background: var(--surface-1); color: var(--fg); border: 1px solid var(--line-strong); border-radius: var(--r-1);
  font: inherit; font-size: var(--fs-sm); padding: 2px var(--s-2); min-height: 28px;
}
.rv-menue { position: relative; }
.rv-menue > summary {
  list-style: none; cursor: pointer; color: var(--fg-muted); font-size: var(--fs-sm);
  border: 1px solid var(--line-strong); border-radius: var(--r-2); padding: var(--s-1) var(--s-3); min-height: 28px; display: inline-flex; align-items: center;
}
.rv-menue > summary::-webkit-details-marker { display: none; }
.rv-menue[open] > summary { background: var(--accent-soft); color: var(--accent); border-color: var(--accent-border); }
.rv-menue-inhalt {
  position: absolute; z-index: 20; top: calc(100% + var(--s-1)); left: 0; min-width: 220px; max-height: 320px; overflow: auto;
  display: grid; gap: var(--s-2); padding: var(--s-3); background: var(--surface-3); border: 1px solid var(--line-strong);
  border-radius: var(--r-3); box-shadow: var(--shadow-pop);
}
.rv-feld { display: flex; align-items: center; gap: var(--s-2); font-size: var(--fs-base); color: var(--fg); }
.rv-anwenden { justify-self: start; }

.rv-koerper { padding: var(--s-3); }
.rv-mehr { padding: 0 var(--s-3) var(--s-3); margin: 0; }
.rv-gruppentitel { margin: var(--s-3) 0 var(--s-1); font-size: var(--fs-sm); color: var(--fg-muted); text-transform: uppercase; letter-spacing: var(--tracking-label); }
.rv-gruppentitel:first-child { margin-top: 0; }

/* Liste */
.rv-liste { border: 1px solid var(--line); border-radius: var(--r-2); overflow: hidden; }
.rv-zeile { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); padding: var(--s-1) var(--s-3); min-height: var(--row-normal); }
.rv-zeile + .rv-zeile { border-top: 1px solid var(--line); }
.rv-zeile:hover { background: var(--surface-2); }
.rv-titel { min-width: 0; color: var(--fg-strong); overflow: hidden; text-overflow: ellipsis; }
.rv-zeile .rv-titel { white-space: nowrap; flex: 1 1 auto; }
.rv-felder { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--s-1) var(--s-2); }
.rv-wert { color: var(--fg-muted); font-size: var(--fs-sm); }

/* Tabelle */
.rv-tabelle th { white-space: nowrap; }
.rv-zelle { white-space: nowrap; }

/* Board */
.rv-board { display: flex; gap: var(--s-3); overflow-x: auto; padding-bottom: var(--s-2); align-items: flex-start; }
.rv-spalte { flex: 0 0 260px; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-3); display: flex; flex-direction: column; min-height: 96px; }
.rv-spalte > header { display: flex; align-items: center; justify-content: space-between; padding: var(--s-2) var(--s-3); border-bottom: 1px solid var(--line); }
.rv-spaltentitel { font-size: var(--fs-sm); font-weight: 600; color: var(--fg-muted); text-transform: uppercase; letter-spacing: var(--tracking-label); }
.rv-spaltenkoerper { display: grid; gap: var(--s-2); padding: var(--s-2); align-content: start; min-height: 48px; }
.rv-spalte.drag-over { border-color: var(--accent-border); background: var(--accent-soft); }
.rv-karte {
  display: grid; gap: var(--s-2); padding: var(--s-2) var(--s-3); background: var(--surface-1); border: 1px solid var(--line);
  border-radius: var(--r-2);
}
.rv-karte:hover { border-color: var(--line-strong); }
.rv-karte[draggable="true"] { cursor: grab; }
.rv-karte .rv-felder { justify-content: flex-start; }
.rv-karte .rv-titel { white-space: normal; overflow-wrap: anywhere; font-weight: 550; }

/* Galerie */
.rv-galerie { display: grid; gap: var(--s-3); grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.rv-gr-s { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.rv-gr-l { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.rv-galerie .rv-karte { padding: 0; overflow: hidden; align-content: start; }
.rv-galerie .rv-titel, .rv-galerie .rv-felder { padding: 0 var(--s-3); }
.rv-galerie .rv-felder { padding-bottom: var(--s-3); }
.rv-bild { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; background: var(--surface-3); }
.rv-bild.rv-ohne-bild { aspect-ratio: 16 / 7; display: grid; place-items: center; color: var(--fg-subtle); font-size: var(--fs-xl); letter-spacing: var(--tracking-label); }
.rv-bahn { margin-bottom: var(--s-4); }
.rv-bahn h4 { margin: 0 0 var(--s-2); font-size: var(--fs-sm); color: var(--fg-muted); text-transform: uppercase; letter-spacing: var(--tracking-label); }

@media (max-width: 900px) {
  .rv-board { scroll-snap-type: x proximity; }
  .rv-spalte { flex-basis: 82vw; scroll-snap-align: start; }
  .rv-menue-inhalt { position: static; box-shadow: none; max-height: none; margin-top: var(--s-2); }
  .rv-leiste { gap: var(--s-2); }
  .rv-galerie { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Technische Felder: eingeklappt, leise */
.technische-felder { margin-top: var(--s-4); border-top: 1px solid var(--line); padding-top: var(--s-2); color: var(--fg-subtle); }
.technische-felder > summary { cursor: pointer; font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: var(--tracking-label); list-style: none; }
.technische-felder > summary::-webkit-details-marker { display: none; }
.technische-felder .property-row-label { color: var(--fg-subtle); }

/* Backlog-Panel: die Spalte `next` als einklappbare, nach Projekt gruppierte Liste mit Tagesleiste */
.kanban-col-kompakt { min-width: 0; }
.backlog-panel > summary { cursor: pointer; color: var(--accent); font-size: var(--fs-sm); padding: var(--s-2) 0; list-style: none; }
.backlog-panel > summary::-webkit-details-marker { display: none; }
.backlog-panel[open] > summary { color: var(--fg-muted); }
.backlog-tage { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: var(--s-1); margin: var(--s-2) 0; position: sticky; top: 0; z-index: 2; background: var(--surface-2); padding: var(--s-1) 0; }
.backlog-tag { display: grid; place-items: center; min-height: 36px; border: 1px dashed var(--line-strong); border-radius: var(--r-2); font-size: var(--fs-sm); color: var(--fg-muted); text-align: center; }
.backlog-tag.drag-over { border-color: var(--accent-border); background: var(--accent-soft); color: var(--accent); }
.backlog-tag .backlog-zeile { display: none; }
.backlog-gruppen { max-height: 62vh; overflow-y: auto; }
.backlog-gruppe > summary { cursor: pointer; display: flex; justify-content: space-between; gap: var(--s-2); padding: var(--s-1) var(--s-2); font-size: var(--fs-sm); color: var(--fg-muted); border-bottom: 1px solid var(--line); }
.backlog-zeile { padding: 2px var(--s-2); min-height: var(--row-compact); display: flex; align-items: center; border-bottom: 1px solid var(--line); cursor: grab; }
.backlog-zeile a { color: var(--fg); font-size: var(--fs-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.backlog-zeile:hover { background: var(--surface-3); }
/* Gantt: siehe gantt.css */
/* Objektseite: Reiterleiste, Reiterinhalt, ruhige Kopfzeile, Mehr-Menü, Gliederung.
 * Nur Tokens. Designregeln: Datei 27 (Ebenen statt Rahmen, Zustände Hover/Aktiv/Fokus, 44 px Berührfläche am Handy).
 */

/* --- Raster: eine Spalte (Lesespalte), die Reiterzeile steht oben ------------------------------------------------- */
.note-reiter { min-width: 0; }
/* Ohne eigene Rasterzeile setzte die automatische Platzierung die Reiter (erstes Kind) hinter Inhalt und Seitenende: auf 1440 px
 * lagen sie 4000 px tiefer, die Tab-Reihenfolge widersprach der Optik (QA B1). Reiter oben ueber alle Spalten, alles andere eine Zeile tiefer. */
.note-workspace:has(> .note-reiter) { grid-template-rows: auto auto 1fr; }
.note-workspace:has(> .note-reiter) > .note-reiter { grid-column: 1 / -1; grid-row: 1; }
.note-workspace:has(> .note-reiter) > .note-content { grid-row: 2; }
.note-workspace:has(> .note-reiter) > .note-unten { grid-row: 3; }
.note-workspace:has(> .note-reiter) > :is(.note-linked, .note-properties) { grid-row: 2 / span 2; }
@media (max-width: 1024px) { .note-workspace:has(> .note-reiter) > .note-linked { grid-column: 1 / -1; grid-row: 4; } }
/* Ein offener Reiter (Aufgaben, Dokumente …, Eigenschaften) ersetzt Text und Seitenende; die Zeile bleibt. */
.note-workspace[data-reiter]:not([data-reiter="inhalt"]) :is(.note-content, .note-unten) { display: none; }

/* --- Leiste ------------------------------------------------------------------------------------------------------ */
.objekt-reiter {
  display: flex; flex-wrap: nowrap; gap: var(--s-1); margin: 0 0 var(--s-3); border-bottom: 1px solid var(--line);
  overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.objekt-reiter::-webkit-scrollbar { display: none; }
/* Anschnitt rechts: solange es weiter geht, blendet die Zeile aus (`data-mehr` setzt objektseite.js). */
.objekt-reiter[data-mehr] { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent); }
.reiter-tab {
  display: inline-flex; align-items: center; gap: var(--s-2); min-height: 44px; padding: 0 var(--s-3); margin-bottom: -1px;
  border-bottom: 2px solid transparent; border-radius: var(--r-2) var(--r-2) 0 0;
  color: var(--fg-muted); font-size: var(--fs-base); text-decoration: none; white-space: nowrap; flex: none;
}
.reiter-tab:hover { color: var(--fg); background: var(--surface-3); }
.reiter-tab.aktiv { color: var(--fg-strong); border-bottom-color: var(--accent); font-weight: 600; }
.reiter-tab:focus-visible, .reiter-sub-link:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.reiter-zahl {
  min-width: 1.6em; padding: 0 var(--s-1); border-radius: var(--r-full); background: var(--surface-4); color: var(--fg-muted);
  font-size: var(--fs-micro); text-align: center; font-variant-numeric: tabular-nums;
}

/* --- Inhalt des Reiters ------------------------------------------------------------------------------------------ */
.reiter-panel { padding: var(--s-3); border: 1px solid var(--line); border-radius: var(--r-3); background: var(--surface-2); min-width: 0; }
.reiter-sub { display: flex; flex-wrap: wrap; gap: var(--s-2); margin: 0 0 var(--s-3); }
.reiter-sub-link {
  display: inline-flex; align-items: center; gap: var(--s-2); min-height: 36px; padding: 0 var(--s-3);
  border: 1px solid var(--line-strong); border-radius: var(--r-full); color: var(--fg-muted); font-size: var(--fs-sm); text-decoration: none;
}
.reiter-sub-link:hover { background: var(--surface-3); color: var(--fg); }
.reiter-sub-link.aktiv { background: var(--accent-soft); border-color: var(--accent-border); color: var(--accent); }
.reiter-liste { display: grid; gap: var(--s-2); min-width: 0; }
.reiter-gruppe { display: flex; align-items: center; gap: var(--s-2); margin: var(--s-4) 0 var(--s-2); font-size: var(--fs-sm); color: var(--fg-muted); }
.reiter-gruppe:first-child { margin-top: 0; }
.reiter-panel .kanban-grid.reiter-board {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: var(--s-3); overflow: visible;
}
.reiter-panel .kanban-col { min-width: 0; }
.reiter-panel .rv-tabelle, .reiter-panel .table-scroll { max-width: 100%; }
@media (max-width: 900px) {
  .reiter-sub-link { min-height: 44px; }
  .reiter-panel { padding: var(--s-2); }
}

/* --- Kopfzeile --------------------------------------------------------------------------------------------------- */
.note-toolbar { flex-wrap: nowrap; }
.titel-link { color: inherit; text-decoration: none; }
.titel-link:hover { text-decoration: underline dotted; text-underline-offset: 5px; text-decoration-color: var(--line-strong); }
.titel-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--r-1); }
.kopf-bearbeiten, .kopf-mehr {
  display: inline-flex; align-items: center; justify-content: center; min-height: 36px; border-radius: var(--r-2);
  color: var(--fg-muted); font-size: var(--fs-base); text-decoration: none; cursor: pointer; flex: none;
}
.kopf-bearbeiten { padding: 0 var(--s-3); border: 1px solid var(--line-strong); color: var(--fg); background: transparent; }
.kopf-bearbeiten:hover, .kopf-mehr:hover, .mehr-menue[open] > .kopf-mehr { background: var(--surface-3); color: var(--fg-strong); }
.kopf-mehr { min-width: 36px; list-style: none; font-size: var(--fs-lg); line-height: 1; }
.kopf-mehr::-webkit-details-marker { display: none; }
.kopf-bearbeiten:focus-visible, .kopf-mehr:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.mehr-menue { position: relative; flex: none; }
.mehr-liste {
  position: absolute; z-index: 30; right: 0; top: calc(100% + var(--s-1)); display: grid; min-width: 13rem; padding: var(--s-1);
  border: 1px solid var(--line-strong); border-radius: var(--r-3); background: var(--surface-3); box-shadow: var(--shadow-pop);
}
.mehr-eintrag {
  display: flex; align-items: center; min-height: 40px; padding: 0 var(--s-3); border: 0; border-radius: var(--r-2);
  background: transparent; color: var(--fg); font: inherit; font-size: var(--fs-base); text-align: left; text-decoration: none; cursor: pointer;
}
.mehr-eintrag:hover { background: var(--surface-4); color: var(--fg-strong); }
.mehr-eintrag:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
@media (max-width: 900px) {
  .kopf-bearbeiten, .kopf-mehr { min-height: 44px; }
  .kopf-mehr { min-width: 44px; }
  .mehr-eintrag { min-height: 44px; }
}

/* --- Eigenschaften: leere Felder leise --------------------------------------------------------------------------- */
.objekt-kopf .property-chip.ghost { opacity: 1; border-style: dashed; background: transparent; color: var(--fg-muted); }
.objekt-kopf .property-chip.ghost:hover { color: var(--fg-strong); }

/* --- Gliederung im Inhalt: schmal, eingeklappt ------------------------------------------------------------------- */
.note-gliederung { margin: 0 0 var(--s-3); font-size: var(--fs-sm); border-bottom: 1px solid var(--line); padding-bottom: var(--s-2); }
.note-gliederung > summary { display: flex; align-items: center; gap: var(--s-2); min-height: 32px; cursor: pointer; color: var(--fg-muted); list-style: none; }
.note-gliederung > summary::-webkit-details-marker { display: none; }
.note-gliederung > summary::before { content: "▸"; color: var(--fg-subtle); }
.note-gliederung[open] > summary::before { content: "▾"; }
.note-gliederung > nav { display: grid; gap: var(--s-1); max-height: 14rem; overflow-y: auto; margin-top: var(--s-2); }

/* --- Zeilen mit Titel und „weitere Fassung“ ---------------------------------------------------------------------- */
.object-titel { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.object-weitere { color: var(--fg-subtle); font-size: var(--fs-micro); font-style: normal; white-space: nowrap; }
.kontext-blick .object-row { justify-content: space-between; }

/* --- Vorschaukarte (static/vorschau.js, GET /api/vorschau) ------------------------------------------------------- */
main a[href^="/view?"] { -webkit-touch-callout: none; }
.vorschau-karte {
  position: fixed; z-index: 95; display: grid; gap: var(--s-2); width: 20rem; max-width: calc(100vw - 16px); padding: var(--s-3) var(--s-4);
  border: 1px solid var(--line-strong); border-radius: var(--r-3); background: var(--surface-3); box-shadow: var(--shadow-pop);
  opacity: 0; transition: opacity 0.12s ease;
}
.vorschau-karte.sichtbar { opacity: 1; }
.vorschau-kopf { display: flex; align-items: center; gap: var(--s-2); color: var(--fg-muted); font-size: var(--fs-sm); }
.vorschau-titel { color: var(--fg-strong); font-size: var(--fs-md); overflow-wrap: anywhere; }
.vorschau-felder { display: grid; gap: var(--s-1); }
.vorschau-feld { display: flex; gap: var(--s-2); font-size: var(--fs-sm); }
.vorschau-label { flex: none; min-width: 4.5rem; color: var(--fg-subtle); }
.vorschau-wert { color: var(--fg); overflow-wrap: anywhere; }
.vorschau-ueberfaellig .vorschau-wert { color: var(--text-danger); font-weight: 600; }
.vorschau-vergangen .vorschau-wert { color: var(--text-warn); font-weight: 600; }
.vorschau-text {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; margin: 0;
  color: var(--fg-muted); font-size: var(--fs-sm); line-height: 1.5; overflow-wrap: anywhere;
}
.vorschau-oeffnen {
  justify-self: start; display: inline-flex; align-items: center; min-height: 36px; padding: 0 var(--s-3);
  border: 1px solid var(--line-strong); border-radius: var(--r-2); color: var(--fg); font-size: var(--fs-sm); text-decoration: none;
}
.vorschau-oeffnen:hover { background: var(--surface-4); color: var(--fg-strong); }
.vorschau-oeffnen:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (max-width: 900px) { .vorschau-oeffnen { min-height: 44px; } }

/* --- Titel: keine Silbentrennung, der ganze Titel bricht um (kein „…“, Moritz 2026-10-18) -------------------------- */
.note-toolbar h1, .note-toolbar h1.visually-quiet {
  hyphens: manual; -webkit-hyphens: manual; overflow-wrap: break-word; word-break: normal;
}
@media (max-width: 600px) {
  .note-toolbar { flex-wrap: nowrap; }
  .note-toolbar h1 { flex: 1 1 auto; hyphens: manual; overflow-wrap: break-word; }
}

/* --- Bearbeiten: Stift am Handy, Textknopf am Desktop ------------------------------------------------------------ */
.kopf-stift { display: none; }
@media (max-width: 900px) {
  .kopf-bearbeiten { width: 44px; min-width: 44px; padding: 0; border-color: transparent; }
  .kopf-bearbeiten .kopf-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .kopf-stift { display: block; }
}

/* --- Eigenschaftenzeile: wenige ruhige Chips, keine Großbuchstaben-Beschriftung ---------------------------------- */
.objekt-kopf { gap: var(--s-2); align-items: center; }
.objekt-kopf .typ-badge { padding: 0; border: 0; background: transparent; color: var(--fg-muted); font-size: var(--fs-sm); }
.objekt-kopf .typ-badge::after { content: "·"; margin-left: var(--s-2); color: var(--fg-subtle); }
.objekt-kopf .kopf-label { text-transform: none; letter-spacing: 0; font-size: var(--fs-sm); color: var(--fg-muted); }

/* --- Eigenschaften-Reiter ---------------------------------------------------------------------------------------- */
.reiter-eigenschaften .note-eigenschaften > h2 { display: none; }

/* --- Ende des Inhalts: ruhige, einklappbare Abschnitte mit Zähler ------------------------------------------------ */
.note-unten { margin: var(--s-5) 0 0; min-width: 0; }
.note-workspace.details-zu .note-unten { padding: 0 var(--s-6); }
@media (max-width: 900px) { .note-workspace.details-zu .note-unten { padding: 0 var(--s-2); } }
.unten-abschnitt { border-top: 1px solid var(--line); }
.unten-abschnitt > summary {
  display: flex; align-items: center; gap: var(--s-2); min-height: 44px; cursor: pointer; list-style: none;
  color: var(--fg-muted); font-size: var(--fs-base);
}
.unten-abschnitt > summary::-webkit-details-marker { display: none; }
.unten-abschnitt > summary::before { content: "▸"; color: var(--fg-subtle); font-size: var(--fs-sm); }
.unten-abschnitt[open] > summary::before { content: "▾"; }
.unten-abschnitt > summary:hover { color: var(--fg); }
.unten-abschnitt > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.unten-abschnitt .unten-zahl {
  min-width: 1.6em; padding: 0 var(--s-1); border-radius: var(--r-full); background: var(--surface-3); color: var(--fg);
  font-size: var(--fs-micro); text-align: center; font-variant-numeric: tabular-nums;
}
.unten-abschnitt > .side-section { padding-bottom: var(--s-3); }
.unten-abschnitt > .side-section > h3:first-child { display: none; }

/* --- Aufgabenseite: Erledigt-Kästchen vor dem Titel, Plantag-Schnellwahl ------------------------------------------ */
.titel-haken {
  flex: none; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin: 0 var(--s-1) 0 calc(-1 * var(--s-2));
  padding: 0; border: 0; border-radius: var(--r-full); background: transparent; cursor: pointer;
}
.haken-kasten {
  position: relative; box-sizing: border-box; width: 24px; height: 24px; border: 2px solid var(--fg-muted); border-radius: var(--r-2);
  background: transparent; transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.titel-haken:hover .haken-kasten { border-color: var(--accent); }
.titel-haken:focus-visible { outline: 2px solid var(--accent); outline-offset: 0; }
.titel-haken.ist-erledigt .haken-kasten { background: var(--accent); border-color: var(--accent); }
.titel-haken.ist-erledigt .haken-kasten::after {
  content: ""; position: absolute; left: 6px; top: 1px; width: 6px; height: 12px;
  border-right: 2px solid var(--on-accent); border-bottom: 2px solid var(--on-accent); transform: rotate(45deg);
}
.titel-haken.menu-error .haken-kasten { border-color: var(--danger); }
.titel-haken.ist-erledigt ~ h1 .titel-link { text-decoration: line-through; text-decoration-color: var(--fg-subtle); color: var(--fg-muted); }
.kopf-schnell { display: inline-flex; gap: var(--s-1); }
.schnell-knopf {
  min-height: 32px; padding: 0 var(--s-3); border: 1px solid var(--line-strong); border-radius: var(--r-full);
  background: transparent; color: var(--fg-muted); font: inherit; font-size: var(--fs-sm); cursor: pointer;
}
.schnell-knopf:hover { background: var(--surface-3); color: var(--fg-strong); }
.schnell-knopf:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (max-width: 900px) { .schnell-knopf { min-height: 44px; } }

/* --- Person und Organisation: Schnellaktionen, ruhiger Leerzustand ------------------------------------------------ */
.kontakt-leiste { display: flex; flex-wrap: wrap; gap: var(--s-2); margin: 0 0 var(--s-3); }
.kontakt-knopf {
  display: grid; gap: 1px; min-height: 44px; min-width: 0; padding: var(--s-2) var(--s-3); border: 1px solid var(--line-strong);
  border-radius: var(--r-3); background: var(--surface-2); color: var(--fg); text-decoration: none; align-content: center;
}
.kontakt-knopf strong { font-size: var(--fs-base); font-weight: 600; color: var(--fg-strong); }
.kontakt-knopf span { font-size: var(--fs-sm); color: var(--fg-muted); overflow-wrap: anywhere; }
.kontakt-knopf:hover { background: var(--surface-3); }
.kontakt-knopf:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.leer-hinweis { margin: var(--s-3) 0; color: var(--fg-muted); font-size: var(--fs-sm); }
.leer-hinweis a { color: var(--accent); }
@media (max-width: 600px) { .kontakt-knopf { flex: 1 1 100%; } }

/* --- E-Mail-Seite: Kopf, eingeklappte KI-Abschnitte, Hashes brechen um -------------------------------------------- */
.note-content code, .note-content pre, .note-content td { overflow-wrap: anywhere; word-break: break-word; }
.note-content pre { white-space: pre-wrap; }
.mail-kopf { display: grid; gap: var(--s-1); margin: 0 0 var(--s-3); padding: var(--s-3) 0; border-bottom: 1px solid var(--line); }
.mail-zeile { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); gap: var(--s-2); font-size: var(--fs-base); }
.mail-zeile dt { color: var(--fg-muted); }
.mail-zeile dd { margin: 0; color: var(--fg-strong); overflow-wrap: anywhere; }
.mail-mehr { color: var(--fg-muted); font-size: var(--fs-sm); }
.mail-abschnitt { border-top: 1px solid var(--line); margin-top: var(--s-3); }
.mail-abschnitt > summary { display: flex; align-items: center; gap: var(--s-2); min-height: 44px; cursor: pointer; list-style: none; color: var(--fg-muted); }
.mail-abschnitt > summary::-webkit-details-marker { display: none; }
.mail-abschnitt > summary::before { content: "▸"; color: var(--fg-subtle); font-size: var(--fs-sm); }
.mail-abschnitt[open] > summary::before { content: "▾"; }
.mail-abschnitt > summary:hover { color: var(--fg); }
.mail-abschnitt > h2:first-of-type { display: none; }
.mail-abschnitt .unten-zahl { min-width: 1.6em; padding: 0 var(--s-1); border-radius: var(--r-full); background: var(--surface-3); color: var(--fg); font-size: var(--fs-micro); text-align: center; }

/* --- Titel nur einmal: Überschriften im Text sind kleiner als der Seitentitel ------------------------------------- */
.note-content.prose h1 { font-size: var(--fs-xl); }

/* --- Gehört zu: je Art einmal gruppiert -------------------------------------------------------------------------- */
.gz-gruppe + .gz-gruppe { margin-top: var(--s-2); }
.gz-art { margin: 0 0 var(--s-1); font-size: var(--fs-sm); font-weight: 500; color: var(--fg-muted); }

/* --- Ähnliche Seiten: Titel in voller Breite, der Grund klein darunter ------------------------------------------- */
.note-aehnlich .object-row { display: grid; gap: 1px; align-items: start; padding: var(--s-2) 0; }
.note-aehnlich .object-row .object-titel { color: var(--fg-strong); overflow: visible; white-space: normal; overflow-wrap: anywhere; }
.note-aehnlich .object-row .object-kind { text-transform: none; letter-spacing: 0; font-size: var(--fs-sm); color: var(--fg-muted); margin: 0; }

/* --- Bearbeiten (Audit 60, nur Anordnung): Speichern bleibt im Bild, „Abbrechen“ steht nur einmal ----------------- */
.editor-shell:not(.embed-editor) .editor-actions {
  position: sticky; bottom: 0; z-index: 60; padding: var(--s-2) 0; background: var(--bg); border-top: 1px solid var(--line);
}
.editor-shell:not(.embed-editor) .editor-actions button[type="submit"], .editor-shell:not(.embed-editor) .editor-actions .nav-btn { min-height: 44px; }
@media (max-width: 900px) { .editor-shell:not(.embed-editor) > .note-toolbar .nav-btn { display: none; } }

/* --- Chips im Kopf: umbrechen statt abschneiden ------------------------------------------------------------------- */
.objekt-kopf .property-chip { max-width: 100%; white-space: normal; text-align: left; overflow-wrap: anywhere; height: auto; }
/* Gebraucht & Deals - Posteingang & Watchlist CSS
 * 100% Token-basiert (tokens.css + theme.css) für konsistenten Hell- und Dunkelmodus.
 */

.used-search {
  --deal-bg: color-mix(in srgb, var(--warn) 14%, transparent);
  --deal-border: color-mix(in srgb, var(--warn) 38%, transparent);
  --ok-bg: color-mix(in srgb, var(--ok) 14%, transparent);
  --ok-border: color-mix(in srgb, var(--ok) 35%, transparent);
  --danger-bg: color-mix(in srgb, var(--danger) 12%, transparent);
  --danger-border: color-mix(in srgb, var(--danger) 35%, transparent);
  --star-bg: color-mix(in srgb, var(--st-waiting) 16%, transparent);
  --star-border: color-mix(in srgb, var(--st-waiting) 40%, transparent);

  max-width: var(--measure-app, 1440px);
  margin: 0 auto;
  padding: 0.4rem 1rem 2rem 1rem;
  font-family: var(--font-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
  color: var(--fg);
}

.used-header {
  margin-bottom: 0.5rem;
}

/* Symbole aus der Seitenleiste (ui/icons.py) statt Emoji: so gross wie der Text, auf seiner Grundlinie */
.used-search svg.ic {
  width: 1.1em;
  height: 1.1em;
  vertical-align: -0.2em;
  margin-right: 0.25em;
  flex: none;
}

/* Status Bar */
.used-status-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4rem;
  padding: 0.3rem 0.6rem;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 6px;
  font-size: 0.75rem;
}

.used-status-pill {
  padding: 0.15rem 0.45rem;
  background: var(--surface-1);
  border: 1px solid var(--line);
  border-radius: 4px;
  color: var(--fg-muted);
  font-weight: 500;
}

.used-status-pill.pill-unread {
  background: var(--accent-soft);
  border-color: var(--accent-border);
  color: var(--accent);
  font-weight: 600;
}

.used-status-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.used-btn-checkonline,
.used-btn-markread {
  padding: 0.2rem 0.6rem;
  background: var(--surface-1);
  border: 1px solid var(--line-strong);
  border-radius: 5px;
  color: var(--fg);
  font-size: 0.72rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}

.used-btn-checkonline {
  border-color: var(--accent-border);
  color: var(--accent);
  background: var(--accent-soft);
}

.used-btn-checkonline:hover,
.used-btn-markread:hover {
  background: var(--surface-3);
  color: var(--fg-strong);
}

.used-btn-markread.is-reset {
  background: transparent;
  border-color: var(--line);
  color: var(--fg-subtle);
  font-weight: 500;
}

.used-btn-markread.is-reset:hover {
  background: var(--surface-3);
  color: var(--fg);
}

/* Navigation Section: Profile Tabs & Status Tabs */
.used-nav-section {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-bottom: 0.5rem;
}

.used-nav-group {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.used-nav-title {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--fg-subtle);
  margin-right: 0.2rem;
}

.used-pills-row, .used-tabs-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
}

.used-pill, .used-tab {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.18rem 0.55rem;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 14px;
  color: var(--fg-muted);
  text-decoration: none;
  font-size: 0.74rem;
  font-weight: 500;
  white-space: nowrap;
  transition: all 0.12s ease;
}

.used-pill:hover, .used-tab:hover {
  background: var(--surface-3);
  color: var(--fg-strong);
  border-color: var(--line-strong);
}

.used-pill.is-active, .used-tab.is-active {
  background: var(--accent-soft);
  border-color: var(--accent-border);
  color: var(--accent);
  font-weight: 600;
}

.used-tab.tab-deal.is-active {
  background: var(--deal-bg);
  border-color: var(--deal-border);
  color: var(--warn);
}

.pill-count, .tab-count {
  padding: 0.05rem 0.32rem;
  background: var(--surface-3);
  border-radius: 8px;
  font-size: 0.66rem;
  font-weight: 600;
  color: var(--fg-muted);
}

.used-pill.is-active .pill-count, .used-tab.is-active .tab-count {
  background: var(--accent-soft);
  color: var(--accent);
}

/* Controls Bar (Search, View Toggle, Sort) */
.used-controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.45rem;
  padding: 0.35rem 0.6rem;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 6px;
}

.used-search-box {
  flex: 1;
  min-width: 220px;
}

.used-search-box input {
  width: 100%;
  padding: 0.25rem 0.6rem;
  background: var(--surface-1);
  border: 1px solid var(--line-strong);
  border-radius: 5px;
  color: var(--fg);
  font-size: 0.76rem;
  outline: none;
  transition: border-color 0.15s;
}

.used-search-box input:focus {
  border-color: var(--accent);
}

.used-controls-right {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.used-control-group {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.used-control-group label {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--fg-subtle);
}

.used-select {
  padding: 0.22rem 0.5rem;
  background: var(--surface-1);
  border: 1px solid var(--line-strong);
  border-radius: 5px;
  color: var(--fg);
  font-size: 0.75rem;
  outline: none;
}

/* View Toggle (Table vs Inbox List vs Cards Grid) */
.used-view-toggle {
  display: flex;
  border: 1px solid var(--line-strong);
  border-radius: 5px;
  overflow: hidden;
}

.used-toggle-btn {
  padding: 0.22rem 0.55rem;
  background: var(--surface-1);
  color: var(--fg-muted);
  text-decoration: none;
  font-size: 0.72rem;
  font-weight: 600;
  transition: all 0.15s;
}

.used-toggle-btn:hover {
  color: var(--fg-strong);
  background: var(--surface-3);
}

.used-toggle-btn.is-active {
  background: var(--accent-soft);
  color: var(--accent);
}

/* Results Heading */
.used-results-heading {
  margin-bottom: 0.35rem;
}

.used-results-heading h2 {
  font-size: 0.88rem;
  font-weight: 600;
  margin: 0;
  color: var(--fg-muted);
}

/* ==========================================================================
   POSTEINGANG / INBOX LIST VIEW (Strictly 1-Line, 28px Height)
   ========================================================================== */
.used-inbox-table {
  display: flex;
  flex-direction: column;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 6px;
  overflow: hidden;
}

.used-inbox-header {
  display: grid;
  grid-template-columns: 44px 125px minmax(200px, 1fr) 210px 185px 88px;
  align-items: center;
  height: 26px;
  padding: 0 0.5rem;
  background: var(--surface-1);
  border-bottom: 1px solid var(--line-strong);
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--fg-subtle);
  white-space: nowrap;
}

.used-inbox-row {
  display: grid;
  grid-template-columns: 44px 125px minmax(200px, 1fr) 210px 185px 88px;
  align-items: center;
  height: 28px;
  min-height: 28px;
  max-height: 28px;
  padding: 0 0.5rem;
  background: var(--surface-2);
  border-bottom: 1px solid var(--line);
  font-size: 0.78rem;
  line-height: 28px;
  white-space: nowrap;
  overflow: hidden;
  cursor: pointer;
  transition: background 0.1s ease;
}

.used-inbox-row:last-child {
  border-bottom: none;
}

.used-inbox-row:hover {
  background: var(--surface-3);
}

.used-inbox-row.is-expanded {
  background: var(--accent-soft);
}

/* Unread / New highlight */
.used-inbox-row.is-unread .inbox-title-link {
  font-weight: 600;
  color: var(--fg-strong);
}

/* Starred */
.used-inbox-row.is-starred {
  border-left: 3px solid var(--st-waiting);
}

/* Top-Deal */
.used-inbox-row.is-deal {
  border-left: 3px solid var(--warn);
}

/* Inbox Columns */
.col-status {
  display: flex;
  align-items: center;
  gap: 0.15rem;
  overflow: hidden;
}

.col-target {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding-right: 0.35rem;
}

.col-main {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  min-width: 0;
  overflow: hidden;
  padding-right: 0.5rem;
}

.inbox-title-link {
  color: var(--fg);
  text-decoration: none;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.used-inbox-row:hover .inbox-title-link {
  color: var(--accent);
}

.col-loc {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding-right: 0.4rem;
}

.col-price {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.3rem;
  text-align: right;
  padding-right: 0.4rem;
  white-space: nowrap;
  overflow: hidden;
}

.inbox-savings-wrap {
  font-size: 0.7rem;
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
}

.inbox-deal-pill {
  background: var(--deal-bg);
  color: var(--warn);
  border: 1px solid var(--deal-border);
  padding: 0 0.25rem;
  border-radius: 3px;
  font-weight: 700;
  font-size: 0.68rem;
  line-height: 1.3;
}

.inbox-uvp-muted {
  color: var(--fg-subtle);
  font-size: 0.68rem;
}

.deal-estimate-badge {
  font-size: 0.65rem;
  color: var(--fg-subtle);
  font-weight: normal;
  font-style: italic;
}

.deal-badge-pill {
  display: inline-block;
  background: var(--deal-bg);
  color: var(--warn);
  border: 1px solid var(--deal-border);
  padding: 0.05rem 0.3rem;
  border-radius: 4px;
  font-weight: 700;
  font-size: 0.7rem;
}

.deal-savings-val {
  color: var(--ok);
  font-weight: 600;
}

.used-card-deal {
  font-size: 0.78rem;
  color: var(--warn);
  margin-top: 0.25rem;
}

.used-card-deal.muted {
  color: var(--fg-subtle);
}

.used-card-deal s {
  opacity: 0.75;
}

.col-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.2rem;
}

.inbox-actions {
  display: flex;
  gap: 0.25rem;
}

.inbox-action-btn {
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-1);
  border: 1px solid var(--line);
  border-radius: 4px;
  color: var(--fg-muted);
  text-decoration: none;
  font-size: 0.75rem;
  cursor: pointer;
  transition: all 0.15s ease;
}

.inbox-action-btn:hover {
  background: var(--surface-3);
  color: var(--fg-strong);
  border-color: var(--accent);
}

.inbox-action-btn.btn-star.is-active {
  color: var(--st-waiting);
  border-color: var(--st-waiting);
}

.inbox-action-btn.btn-hide:hover {
  color: var(--danger);
  border-color: var(--danger);
}

.inbox-action-btn.btn-restore {
  width: auto;
  padding: 0 0.5rem;
  font-size: 0.7rem;
}

/* Badges */
.inbox-badge-new {
  font-size: 0.65rem;
  font-weight: 700;
  color: var(--accent);
  background: var(--accent-soft);
  padding: 0.15rem 0.4rem;
  border-radius: 4px;
}

.inbox-badge-deal {
  font-size: 0.65rem;
  font-weight: 700;
  color: var(--warn);
  background: var(--deal-bg);
  padding: 0.15rem 0.4rem;
  border-radius: 4px;
}

.inbox-badge-verified {
  font-size: 0.65rem;
  font-weight: 600;
  color: var(--ok);
  background: var(--ok-bg);
  padding: 0.15rem 0.4rem;
  border-radius: 4px;
}

.inbox-badge-ref {
  font-size: 0.65rem;
  font-weight: 600;
  color: var(--st-open);
  background: color-mix(in srgb, var(--st-open) 14%, transparent);
  padding: 0.15rem 0.4rem;
  border-radius: 4px;
}

.inbox-badge-review {
  font-size: 0.65rem;
  font-weight: 600;
  color: var(--st-waiting);
  background: var(--star-bg);
  padding: 0.15rem 0.4rem;
  border-radius: 4px;
}

/* ==========================================================================
   CARDS GRID VIEW
   ========================================================================== */
.used-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 1.25rem;
}

.used-card {
  display: flex;
  flex-direction: column;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 1.1rem;
  transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.used-card:hover {
  transform: translateY(-2px);
  border-color: var(--line-strong);
}

.used-card.is-deal {
  border-color: var(--deal-border);
}

.used-card.is-unread {
  border-left: 3px solid var(--accent);
}

.used-card.is-starred {
  border-top: 3px solid var(--st-waiting);
}

.used-card-header {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-bottom: 0.65rem;
}

.used-badge {
  font-size: 0.7rem;
  font-weight: 600;
  padding: 0.2rem 0.5rem;
  border-radius: 4px;
  background: var(--surface-1);
  color: var(--fg-muted);
  border: 1px solid var(--line);
}

.used-badge.badge-profile {
  background: var(--accent-soft);
  color: var(--accent);
  border-color: var(--accent-border);
}

.used-badge.badge-new {
  background: var(--accent-soft);
  color: var(--accent);
  border-color: var(--accent-border);
}

.used-badge.badge-deal {
  background: var(--deal-bg);
  color: var(--warn);
  border-color: var(--deal-border);
}

.used-badge.badge-star {
  background: var(--star-bg);
  color: var(--st-waiting);
  border-color: var(--star-border);
}

.used-badge.badge-verified {
  background: var(--ok-bg);
  color: var(--ok);
  border-color: var(--ok-border);
}

.used-badge.badge-ref {
  background: color-mix(in srgb, var(--st-open) 14%, transparent);
  color: var(--st-open);
  border-color: color-mix(in srgb, var(--st-open) 35%, transparent);
}

.used-badge.badge-review {
  background: var(--star-bg);
  color: var(--st-waiting);
  border-color: var(--star-border);
}

.used-card-title {
  font-size: 1rem;
  font-weight: 600;
  margin: 0 0 0.4rem 0;
  line-height: 1.35;
}

.used-card-title a {
  color: var(--fg-strong);
  text-decoration: none;
}

.used-card-title a:hover {
  color: var(--accent);
  text-decoration: underline;
}

.used-card-meta {
  font-size: 0.78rem;
  color: var(--fg-subtle);
  margin-bottom: 0.85rem;
}

.used-card-pricing {
  margin-bottom: 0.85rem;
  padding: 0.5rem 0.75rem;
  background: var(--surface-1);
  border: 1px solid var(--line);
  border-radius: 6px;
}

.used-price-tag {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--fg-strong);
}

.used-deal-math {
  font-size: 0.75rem;
  color: var(--warn);
  margin-top: 0.25rem;
}

.used-card-toolbar {
  display: flex;
  gap: 0.35rem;
  margin-bottom: 0.85rem;
}

.used-btn-tool, .used-btn-secondary {
  flex: 1;
  padding: 0.35rem 0.5rem;
  background: var(--surface-1);
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  color: var(--fg-muted);
  font-size: 0.75rem;
  font-weight: 500;
  cursor: pointer;
  text-align: center;
  transition: all 0.15s;
}

.used-btn-tool:hover, .used-btn-secondary:hover {
  background: var(--surface-3);
  color: var(--fg-strong);
}

.used-btn-tool.is-active {
  color: var(--st-waiting);
  border-color: var(--st-waiting);
}

.used-card-footer {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.used-btn-view {
  display: block;
  text-align: center;
  padding: 0.45rem 0.75rem;
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 600;
  font-size: 0.8125rem;
  border-radius: 6px;
  text-decoration: none;
  transition: opacity 0.15s;
}

.used-btn-view:hover {
  opacity: 0.9;
}

.used-no-link {
  display: block;
  text-align: center;
  padding: 0.45rem 0.75rem;
  background: var(--surface-1);
  color: var(--fg-subtle);
  font-size: 0.8125rem;
  border-radius: 6px;
}

.used-audit-drawer {
  background: var(--surface-1);
  border: 1px solid var(--line);
  border-radius: 6px;
  font-size: 0.75rem;
}

.used-drawer-toggle {
  padding: 0.4rem 0.6rem;
  cursor: pointer;
  color: var(--fg-muted);
  font-weight: 500;
  user-select: none;
}

.used-drawer-body {
  padding: 0.5rem 0.75rem 0.75rem 0.75rem;
  border-top: 1px solid var(--line);
}

.used-drawer-body dl {
  margin: 0;
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 0.35rem 0.5rem;
}

.used-drawer-body dt {
  color: var(--fg-muted);
  font-weight: 600;
}

.used-drawer-body dd {
  margin: 0;
  color: var(--fg);
}

/* Empty State & Notices */
.used-empty-state {
  padding: 3rem 1.5rem;
  text-align: center;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 8px;
}

.used-empty-state p {
  margin: 0 0 1rem 0;
  color: var(--fg-muted);
}

.used-btn-link {
  color: var(--accent);
  text-decoration: underline;
  font-weight: 500;
}

.used-notice {
  padding: 0.75rem 1rem;
  border-radius: 6px;
  background: var(--surface-2);
  color: var(--fg);
  font-size: 0.875rem;
}

.used-notice.error {
  background: var(--danger-bg);
  border: 1px solid var(--danger-border);
  color: var(--danger);
}

.used-footer {
  margin-top: 2rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
  font-size: 0.8125rem;
}

.used-muted {
  color: var(--fg-subtle);
  line-height: 1.5;
}

/* ==========================================================================
   KOMPAKTE TABELLE / ULTRA-DENSE TABLE VIEW (Strictly 28px 1-Line Rows)
   ========================================================================== */
.used-table-container {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 6px;
  overflow-x: auto;
  margin-bottom: 1.25rem;
}

.used-dense-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: 0.78rem;
  line-height: 26px;
  text-align: left;
  min-width: 900px;
}

.used-dense-table thead {
  position: sticky;
  top: 0;
  z-index: 2;
}

.used-dense-table th {
  background: var(--surface-1);
  color: var(--fg-subtle);
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  height: 26px;
  padding: 0 0.45rem;
  border-bottom: 1px solid var(--line-strong);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.is-sortable {
  cursor: pointer;
  user-select: none;
  transition: background 0.12s ease, color 0.12s ease;
}

.is-sortable:hover {
  background: var(--surface-3) !important;
  color: var(--fg-strong) !important;
}

.sort-arrow {
  display: inline-block;
  font-size: 0.65rem;
  color: var(--fg-muted);
  margin-left: 0.2rem;
  transition: color 0.12s ease;
}

.is-sortable:hover .sort-arrow {
  color: var(--fg-strong);
}

.is-sortable.is-sorted-asc,
.is-sortable.is-sorted-desc {
  color: var(--accent) !important;
  background: var(--accent-soft) !important;
}

.is-sortable.is-sorted-asc .sort-arrow,
.is-sortable.is-sorted-desc .sort-arrow {
  opacity: 1;
  color: var(--accent);
  font-weight: 800;
}

.tbl-th-hint {
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--fg-subtle);
  font-size: 0.66rem;
  margin-left: 0.25rem;
}

.used-dense-table td:not(.tbl-drawer-td) {
  height: 28px;
  max-height: 28px;
  padding: 0 0.45rem;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.used-table-row {
  height: 28px;
  max-height: 28px;
  background: var(--surface-2);
  cursor: pointer;
  transition: background 0.08s ease;
}

.used-table-row:hover {
  background: var(--surface-3);
}

.used-table-row.is-expanded {
  background: var(--accent-soft);
}

.used-table-row.is-unread .tbl-title-link {
  font-weight: 600;
  color: var(--fg-strong);
}

.used-table-row.is-starred {
  border-left: 3px solid var(--st-waiting);
}

.used-table-row.is-deal {
  border-left: 3px solid var(--warn);
}

/* Fixed Slim Column Widths */
.tbl-col-status {
  width: 44px;
  text-align: center;
}

.tbl-col-model {
  width: 125px;
}

.tbl-col-title {
  width: auto;
}

.tbl-col-location {
  width: 210px;
}

.tbl-col-price {
  width: 86px;
  text-align: right;
}

.tbl-col-savings {
  width: 68px;
  text-align: right;
}

.tbl-col-uvp {
  width: 78px;
  text-align: right;
}

.tbl-col-portal {
  width: 105px;
}

.tbl-col-actions {
  width: 84px;
  text-align: right;
}

/* Cell content */
.tbl-status-dot {
  color: var(--accent);
  font-size: 0.78rem;
  font-weight: 800;
}

.tbl-status-muted {
  color: var(--fg-subtle);
  font-size: 0.72rem;
}

.tbl-deal-flame {
  font-size: 0.75rem;
  margin-left: 0.1rem;
}

.tbl-star-active {
  color: var(--st-waiting);
  font-size: 0.75rem;
  margin-left: 0.1rem;
}

.badge-profile-sm {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 600;
  line-height: 1.3;
  padding: 0.05rem 0.32rem;
  border-radius: 3px;
  background: var(--surface-3);
  color: var(--fg);
  border: 1px solid var(--line);
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
}

.tbl-title-cell {
  display: flex;
  align-items: center;
  gap: 0.32rem;
  height: 28px;
  overflow: hidden;
}

.tbl-expand-chevron {
  display: inline-block;
  font-size: 0.72rem;
  color: var(--fg-subtle);
  transition: transform 0.15s ease, color 0.15s ease;
  flex: 0 0 auto;
  width: 11px;
  text-align: center;
}

.used-table-row:hover .tbl-expand-chevron,
.used-inbox-row:hover .tbl-expand-chevron {
  color: var(--accent);
}

.used-table-row.is-expanded .tbl-expand-chevron,
.used-inbox-row.is-expanded .tbl-expand-chevron {
  transform: rotate(90deg);
  color: var(--accent);
}

.tbl-title-link {
  color: var(--fg);
  text-decoration: none;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 0 1 auto;
  min-width: 0;
}

.used-table-row:hover .tbl-title-link {
  color: var(--accent);
}

.tbl-ext-link {
  color: var(--accent);
  background: var(--accent-soft);
  border: 1px solid var(--accent-border);
  border-radius: 3px;
  text-decoration: none;
  font-size: 0.65rem;
  font-weight: 600;
  line-height: 1.3;
  padding: 0.05rem 0.32rem;
  flex: 0 0 auto;
  transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}

.tbl-ext-link:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
}

/* Location & Landau Distance Pill */
.tbl-loc-text {
  font-size: 0.74rem;
  color: var(--fg-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
}

.tbl-dist-pill {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--accent);
  background: var(--accent-soft);
  border: 1px solid var(--accent-border);
  border-radius: 3px;
  padding: 0 0.25rem;
  line-height: 1.25;
  margin-left: 0.15rem;
}

.tbl-loc-text.is-near .tbl-dist-pill {
  color: var(--ok);
  background: var(--ok-bg);
  border-color: var(--ok-border);
}

.tbl-price-val {
  font-weight: 700;
  font-size: 0.82rem;
  color: var(--fg-strong);
  font-variant-numeric: tabular-nums;
}

.tbl-savings {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--fg-muted);
  font-variant-numeric: tabular-nums;
}

.tbl-savings.is-deal {
  color: var(--warn);
  background: var(--deal-bg);
  border: 1px solid var(--deal-border);
  padding: 0.03rem 0.28rem;
  border-radius: 3px;
}

.tbl-uvp {
  font-size: 0.72rem;
  color: var(--fg-subtle);
  font-variant-numeric: tabular-nums;
}

.tbl-ref-muted {
  color: var(--fg-subtle);
  font-size: 0.7rem;
}

.tbl-portal-tag {
  font-size: 0.7rem;
  color: var(--fg-subtle);
  white-space: nowrap;
}

.tbl-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 2px;
  height: 24px;
}

.tbl-btn {
  background: transparent;
  border: 1px solid transparent;
  border-radius: 3px;
  cursor: pointer;
  width: 22px;
  height: 22px;
  line-height: 20px;
  padding: 0;
  text-align: center;
  font-size: 0.74rem;
  color: var(--fg-muted);
  transition: all 0.12s ease;
}

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

.tbl-btn.is-active {
  color: var(--st-waiting);
}

.tbl-btn.btn-hide:hover {
  color: var(--danger);
}

.tbl-btn.btn-restore {
  width: auto;
  padding: 0 0.3rem;
}

/* ==========================================================================
   CLICK-TO-EXPAND INLINE DRAWER (CSP-Safe [hidden] & Light/Dark Theme Native)
   ========================================================================== */
[hidden],
.used-table-drawer-row[hidden],
.inbox-inline-drawer[hidden],
.used-table-row[hidden],
.used-inbox-item[hidden],
.used-card[hidden] {
  display: none !important;
}

.used-table-drawer-row td.tbl-drawer-td {
  background: var(--surface-1);
  color: var(--fg);
  border-bottom: 2px solid var(--line-strong);
  border-left: 3px solid var(--accent);
  padding: 0.75rem 1.1rem 0.85rem 2.2rem;
  white-space: normal;
  overflow: visible;
  height: auto;
  max-height: none;
  line-height: 1.45;
}

.inbox-inline-drawer {
  background: var(--surface-1);
  color: var(--fg);
  border-bottom: 1px solid var(--line-strong);
  border-left: 3px solid var(--accent);
  padding: 0.75rem 1.1rem 0.85rem 2.2rem;
  font-size: 0.76rem;
  line-height: 1.45;
}

.popover-inner {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  max-width: 880px;
}

.popover-head {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding-bottom: 0.45rem;
  border-bottom: 1px solid var(--line);
}

.popover-title-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.5rem;
}

.popover-title {
  font-weight: 700;
  font-size: 0.84rem;
  color: var(--fg-strong);
  line-height: 1.3;
}

.popover-link-btn {
  flex: 0 0 auto;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
  background: var(--accent-soft);
  border: 1px solid var(--accent-border);
  padding: 0.15rem 0.45rem;
  border-radius: 4px;
  white-space: nowrap;
  transition: background 0.12s ease, color 0.12s ease;
}

.popover-link-btn:hover {
  background: var(--accent);
  color: var(--on-accent);
}

.popover-sub-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.popover-price-pill {
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--fg-strong);
}

.popover-savings-pill {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--warn);
  background: var(--deal-bg);
  border: 1px solid var(--deal-border);
  padding: 0.08rem 0.35rem;
  border-radius: 4px;
}

.popover-portal-pill {
  font-size: 0.7rem;
  color: var(--fg-muted);
  background: var(--surface-3);
  border: 1px solid var(--line);
  padding: 0.08rem 0.35rem;
  border-radius: 4px;
}

.popover-dist-bar {
  margin-top: 0.1rem;
}

.popover-dist-pill {
  display: inline-block;
  font-size: 0.73rem;
  font-weight: 600;
  color: var(--ok);
  background: var(--ok-bg);
  border: 1px solid var(--ok-border);
  padding: 0.15rem 0.45rem;
  border-radius: 4px;
}

.popover-body {
  font-size: 0.74rem;
}

.popover-dl {
  margin: 0;
  display: grid;
  grid-template-columns: 124px 1fr;
  gap: 0.28rem 0.5rem;
  align-items: baseline;
}

.popover-dl dt {
  color: var(--fg-muted);
  font-weight: 600;
  font-size: 0.72rem;
}

.popover-dl dd {
  margin: 0;
  color: var(--fg);
  font-size: 0.74rem;
  line-height: 1.38;
}

.popover-dl dd a {
  color: var(--accent);
  text-decoration: underline;
}

/* Responsive adjustments */
@media (max-width: 900px) {
  .used-inbox-table {
    overflow-x: auto;
  }
  .used-inbox-header, .used-inbox-row {
    min-width: 780px;
  }
}

/* ==========================================================================
   ANOMALY ALERTS (Unstimmigkeiten, Replika-Hinweise & Modell-Abweichungen)
   ========================================================================== */
.used-anomaly-alert {
  margin-bottom: 0.55rem;
  padding: 0.5rem 0.75rem;
  background: var(--danger-bg);
  border: 1px solid var(--danger-border);
  border-left: 3px solid var(--danger);
  border-radius: 4px;
  font-size: 0.75rem;
  line-height: 1.4;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.anomaly-title {
  color: var(--danger);
  font-weight: 600;
}

.anomaly-advice {
  color: var(--fg);
}

.inbox-badge-anomaly {
  font-size: 0.64rem;
  font-weight: 700;
  line-height: 1.2;
  padding: 0.05rem 0.3rem;
  border-radius: 3px;
  background: var(--danger-bg);
  color: var(--danger);
  border: 1px solid var(--danger-border);
  white-space: nowrap;
  flex: 0 0 auto;
}

.badge-danger {
  background: var(--danger-bg);
  color: var(--danger);
  border: 1px solid var(--danger-border);
}

/* Kontrast (Altlast-Audit K38): Zaehler und Rabatt-Marke erreichten im Hell-Modus nur 3,97 bis 4,46 : 1.
   Die Farbe wird zum Text hin gemischt (hell: dunkler, dunkel: heller), so bleiben beide Modi ueber 4,5 : 1. */
.pill-count, .tab-count { color: var(--fg); }
.used-pill.is-active .pill-count, .used-tab.is-active .tab-count { color: color-mix(in srgb, var(--accent) 55%, var(--fg-strong)); }
.used-tab.tab-deal.is-active, .tbl-savings.is-deal { color: color-mix(in srgb, var(--warn) 60%, var(--fg-strong)); }
/* Seitenleiste und Rahmen: drei Ebenen, Symbole, Gruppen, Symbolleiste, Schublade.
 *
 * Linear- und Notion-Muster: ruhige Zeilen (32 px), Symbol links, Zaehler
 * rechts, Hover als Flaeche, aktiv als Flaeche plus 3-px-Balken, Gruppentitel
 * klein und grossgeschrieben. Alles baut auf tokens.css auf; Farben kommen nie
 * als Hex hierher.
 *
 * Diese Datei wird nach app.css geladen und ersetzt dessen alte Seitenleisten-
 * Regeln (`.sidebar-collapsed`, `.sidebar-expanded`, Medienabfrage 769-1500).
 * Weil app.css einem anderen Arbeitsstrang gehoert, wird dort nichts geloescht;
 * stattdessen sind die Selektoren hier spezifischer.
 *
 * Zustaende der Leiste (data-sb am <html>, gesetzt von theme.js vor dem ersten
 * Zeichnen):  voll (248 px)  |  rail (56 px, nur Symbole, ab 769 px)  |
 * Schublade (bis 768 px, body.mobile-sidebar-open). */

:root {
  /* Abgeleitet aus Tokens, kein neuer Farbwert. */
  --sb-hover: color-mix(in srgb, var(--fg) 7%, transparent);
  --sb-press: color-mix(in srgb, var(--fg) 11%, transparent);
}

/* --- Rahmen: Seitenleiste und Seite sind zwei Ebenen -------------------- */
.app-shell { grid-template-columns: var(--sb-w) minmax(0, 1fr); }
html[data-sb="rail"] .app-shell { grid-template-columns: var(--sb-rail) minmax(0, 1fr); }
.app-stage { background: var(--layer-page); }
/* Tab-Leiste gehoert zum Rahmen (eine Stufe unter der Seite), der aktive Tab und die Kopfzeile zur Seite. */
.tab-leiste { background: var(--layer-side); }
.app-stage > header { background: var(--layer-page); }

html .app-shell .app-sidebar {
  position: sticky; top: 0; z-index: 30;
  display: flex; flex-direction: column; gap: 0;
  height: 100vh; height: 100dvh; overflow: hidden;
  padding: var(--s-3) var(--s-2) var(--s-2);
  background: var(--layer-side); border-right: 1px solid var(--line);
  font-size: var(--fs-ui); line-height: 1.3;
}
.app-sidebar :focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: var(--r-2); }

/* --- Kopf: Marke und Einklapp-Knopf ---------------------------------------- */
.sb-kopf { display: flex; align-items: center; gap: var(--s-1); margin-bottom: var(--s-3); }
.sb-marke {
  display: flex; align-items: center; gap: var(--s-2); flex: 1; min-width: 0;
  height: var(--row-nav); padding: 0 var(--s-1); border-radius: var(--r-2);
  color: var(--fg-strong); font-size: var(--fs-md); font-weight: 600; letter-spacing: -0.01em;
}
.sb-marke:hover { background: var(--sb-hover); }
.sb-logo {
  display: inline-grid; place-items: center; flex: none; width: 24px; height: 24px;
  border-radius: var(--r-2); background: var(--accent); color: var(--on-accent);
  font-size: var(--fs-base); font-weight: 700; letter-spacing: 0;
}
.sb-knopf, .app-sidebar .theme-toggle {
  display: inline-grid; place-items: center; flex: none; width: var(--row-nav); height: var(--row-nav);
  padding: 0; border: 0; border-radius: var(--r-2); background: transparent; color: var(--fg-quiet);
  cursor: pointer;
}
.sb-knopf:hover, .app-sidebar .theme-toggle:hover { background: var(--sb-hover); color: var(--fg); }
.sb-knopf:active, .app-sidebar .theme-toggle:active { background: var(--sb-press); }
.sb-knopf-leiste, .app-sidebar .theme-toggle > svg { display: inline-flex; }
.sb-knopf-zu { display: none; }

/* --- Aktionen: Neu, Suche, Quick Capture ------------------------------------ */
.sb-aktionen { display: grid; gap: var(--s-1); padding-bottom: var(--s-3); border-bottom: 1px solid var(--line); }
.sb-neu {
  display: flex; align-items: center; justify-content: center; gap: var(--s-2);
  height: var(--row-nav); padding: 0 var(--s-3); border-radius: var(--r-2);
  background: var(--accent); color: var(--on-accent); font-weight: 600;
}
.sb-neu:hover { background: color-mix(in srgb, var(--accent) 88%, var(--fg-strong)); }
.sb-neu:active { transform: scale(0.98); }
.sb-neu :focus-visible, .sb-neu:focus-visible { outline: 2px solid var(--fg-strong); outline-offset: 2px; } /* Ring aussen: innen war er auf dem hellen Akzent nur 1,87:1 */
html .app-shell .app-sidebar .sidebar-search {
  display: flex; align-items: center; gap: var(--s-2); width: 100%; height: var(--row-nav);
  margin: 0; padding: 0 var(--s-2); border: 1px solid var(--line-strong); border-radius: var(--r-2);
  background: var(--layer-page); color: var(--fg-quiet); font: inherit; text-align: left; cursor: pointer;
}
html .app-shell .app-sidebar .sidebar-search:hover { color: var(--fg); border-color: var(--accent-border); }
.sidebar-search kbd, .palette-hint kbd {
  margin-left: auto; padding: 0 var(--s-1); border: 1px solid var(--line-strong); border-radius: var(--r-1);
  background: var(--layer-side); color: var(--fg-muted);
  font-family: var(--font-ui); font-size: var(--fs-micro); line-height: 1.5;
}
.palette-hint kbd { margin-left: 0; background: var(--surface-1); }

/* --- Zeilen: Symbol, Text, Zaehler -------------------------------------------- */
.sb-nav {
  position: relative; flex: 1 1 auto; min-height: 0; overflow-x: hidden; overflow-y: auto;
  margin: 0 calc(-1 * var(--s-2)); padding: var(--s-3) var(--s-2) var(--s-2);
  scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; overscroll-behavior: contain;
}
.app-sidebar nav.sb-nav { display: block; }
.sidebar-group-body { display: grid; gap: 2px; }

.app-sidebar .sidebar-link, .sb-quick, .app-sidebar .sidebar-report {
  position: relative; display: flex; align-items: center; gap: var(--s-2);
  min-height: var(--row-nav); margin: 0; padding: 0 var(--s-2);
  border: 0; border-radius: var(--r-2); background: transparent;
  color: var(--fg-muted); font-size: var(--fs-ui); font-weight: 400; line-height: 1.25; text-decoration: none;
}
.sb-ic { display: inline-grid; place-items: center; flex: none; width: 16px; height: 16px; color: var(--fg-quiet); }
.sb-ic .ic, .sb-neu .ic, .sidebar-report .ic { display: block; }
.sb-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sb-count {
  flex: none; margin-left: auto; padding-left: var(--s-2); color: var(--fg-quiet);
  font-size: var(--fs-sm); font-variant-numeric: tabular-nums;
}

.app-sidebar .sidebar-link:hover, .sb-quick:hover, .app-sidebar .sidebar-report:hover {
  background: var(--sb-hover); color: var(--fg);
}
.app-sidebar .sidebar-link:active, .sb-quick:active, .app-sidebar .sidebar-report:active { background: var(--sb-press); }
.sidebar-link:hover .sb-ic, .sb-quick:hover .sb-ic, .sidebar-report:hover { color: var(--fg); }
.sidebar-link:hover .sb-count { color: var(--fg-muted); }

/* Aktiv: Flaeche plus 3-px-Balken am linken Rand. */
.app-sidebar .sidebar-link.active {
  background: var(--accent-soft); color: var(--fg-strong); font-weight: 500; box-shadow: none;
}
.sidebar-link.active::before {
  content: ""; position: absolute; left: 0; top: var(--s-2); bottom: var(--s-2); width: 3px;
  border-radius: 0 var(--r-1) var(--r-1) 0; background: var(--accent);
}
.sidebar-link.active .sb-ic { color: var(--accent); }
.sidebar-link.active .sb-count { color: var(--fg); }

/* Typfarbe nur am Symbol. Die Mischung mit der Textfarbe haelt den Kontrast im hellen Modus. */
.sidebar-link.sb-typ .sb-ic { color: color-mix(in srgb, var(--typ-farbe, var(--fg-quiet)) 80%, var(--fg-strong)); }
.sidebar-link.sb-typ.active .sb-ic { color: color-mix(in srgb, var(--typ-farbe, var(--accent)) 80%, var(--fg-strong)); }

/* --- Gruppen: Titel, Abstand, einklappbar -------------------------------------- */
.sidebar-group + .sidebar-group { margin-top: var(--s-4); }
.sidebar-group > summary.sidebar-label {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-1);
  height: 28px; margin: 0 0 2px; padding: 0 var(--s-2); list-style: none; user-select: none; cursor: pointer;
  border-radius: var(--r-1); color: var(--fg-quiet);
  font-size: var(--fs-micro); font-weight: 600; letter-spacing: var(--tracking-label); text-transform: uppercase;
}
.sidebar-group > summary.sidebar-label::-webkit-details-marker { display: none; }
.sidebar-group > summary.sidebar-label::before { content: none; }
.sidebar-group > summary.sidebar-label::after {
  content: ""; flex: none; width: 6px; height: 6px; margin-right: var(--s-1);
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(-45deg); opacity: 0.7;
  transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.sidebar-group[open] > summary.sidebar-label::after { transform: translateY(-1px) rotate(45deg); }
.sidebar-group > summary.sidebar-label:hover { color: var(--fg); }
.sidebar-group > summary.sidebar-label:hover::after { opacity: 1; }

/* Untergruppe ("Weitere Typen", "Notfallmedizin"): sieht aus wie eine Zeile, nicht wie ein Gruppentitel. */
.sidebar-group-body > .sidebar-untergruppe { margin-top: 2px; }
.sidebar-group + .sidebar-untergruppe, .sidebar-group-body > .sidebar-untergruppe + .sidebar-untergruppe { margin-top: 2px; }
.sidebar-untergruppe > summary.sidebar-label {
  height: auto; min-height: var(--row-nav); margin: 0; padding: 0 var(--s-2);
  border-radius: var(--r-2); color: var(--fg-quiet);
  font-size: var(--fs-ui); font-weight: 400; letter-spacing: 0; text-transform: none;
}
.sidebar-untergruppe > summary.sidebar-label:hover { background: var(--sb-hover); color: var(--fg); }
.sidebar-untergruppe > summary .sb-gruppenzahl { margin-left: auto; padding-left: var(--s-2); color: var(--fg-quiet); font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
.sidebar-untergruppe > summary.sidebar-label::after { margin-left: var(--s-2); margin-right: 0; }
.sidebar-untergruppe > .sidebar-group-body { margin-top: 2px; padding-left: var(--s-3); }
@media (max-width: 768px) {
  .sidebar-untergruppe > summary.sidebar-label { min-height: var(--tap); font-size: var(--fs-md); }
}

/* --- Fuss: Befund melden, Hell/Dunkel -------------------------------------------- */
.sb-fuss {
  display: flex; align-items: center; gap: var(--s-1); margin-top: var(--s-1); padding-top: var(--s-2);
  border-top: 1px solid var(--line);
}
.app-sidebar .sidebar-report { flex: 1; min-width: 0; color: var(--fg-quiet); font-size: var(--fs-base); }
.sidebar-report .ic { flex: none; }

/* --- Symbolleiste (Rail): nur Symbole, ab 769 px -------------------------------------- */
@media (min-width: 769px) {
  html[data-sb="rail"] .app-shell .app-sidebar { padding-inline: var(--s-2); }
  html[data-sb="rail"] .sb-text, html[data-sb="rail"] .sb-count,
  html[data-sb="rail"] .sidebar-search kbd, html[data-sb="rail"] .sb-name { display: none; }
  html[data-sb="rail"] .sb-kopf { flex-direction: column; gap: var(--s-1); }
  html[data-sb="rail"] .sb-marke { flex: none; width: var(--row-nav); padding: 0; justify-content: center; }
  html[data-sb="rail"] .sb-aktionen { justify-items: center; }
  html[data-sb="rail"] .sb-neu, html[data-sb="rail"] .sidebar-search,
  html[data-sb="rail"] .sb-quick, html[data-sb="rail"] .sidebar-link,
  html[data-sb="rail"] .app-sidebar .sidebar-report { justify-content: center; width: var(--row-nav); padding: 0; }
  html[data-sb="rail"] .app-shell .app-sidebar .sidebar-search { width: var(--row-nav); padding: 0; justify-content: center; }
  html[data-sb="rail"] .sb-nav { padding-inline: 0; margin-inline: calc(-1 * var(--s-2)); display: grid; justify-items: center; align-content: start; }
  html[data-sb="rail"] .sidebar-group { width: 100%; display: grid; justify-items: center; }
  html[data-sb="rail"] .sidebar-group + .sidebar-group { margin-top: var(--s-2); padding-top: var(--s-2); border-top: 1px solid var(--line); }
  html[data-sb="rail"] .sidebar-group > summary.sidebar-label { display: none; }
  html[data-sb="rail"] .sidebar-group:not([open]) { display: none; } /* Gruppen oeffnet man in der vollen Leiste */
  html[data-sb="rail"] .sidebar-group-body { justify-items: center; }
  html[data-sb="rail"] .sb-fuss { flex-direction: column; }
  html[data-sb="rail"] .sidebar-link.active::before { top: var(--s-2); bottom: var(--s-2); left: calc(-1 * var(--s-2)); }
  html[data-sb="rail"] .sb-knopf-leiste svg { transform: scaleX(-1); }
}

/* --- Schublade: bis 768 px ---------------------------------------------------------------- */
.sb-scrim { display: none; }
@media (max-width: 768px) {
  html .app-shell .app-sidebar {
    position: fixed; top: 0; bottom: 0; left: 0; z-index: 70; width: min(86vw, 328px); height: 100dvh;
    padding-top: calc(var(--s-3) + env(safe-area-inset-top, 0px));
    padding-bottom: calc(var(--s-2) + env(safe-area-inset-bottom, 0px));
    transform: translateX(-104%); visibility: hidden;
    transition: transform 0.26s var(--ease), visibility 0s linear 0.26s;
  }
  body.mobile-sidebar-open .app-shell .app-sidebar {
    transform: none; visibility: visible; box-shadow: var(--shadow-pop); transition-delay: 0s;
  }
  .sb-scrim {
    display: block; position: fixed; inset: 0; z-index: 65; background: var(--scrim);
    opacity: 0; pointer-events: none; transition: opacity 0.2s ease;
  }
  body.mobile-sidebar-open .sb-scrim { opacity: 1; pointer-events: auto; }
  body.mobile-sidebar-open { overflow: hidden; }
  body.mobile-sidebar-open .larry-chat-toggle { display: none; }
  .sb-knopf-leiste { display: none; }
  .sb-knopf-zu { display: inline-flex; }

  /* Beruehrflaechen: mindestens 44 px. */
  .sb-knopf, .app-sidebar .theme-toggle, .sb-marke { width: var(--tap); height: var(--tap); }
  .sb-marke { width: auto; }
  .sb-neu, .app-shell .app-sidebar .sidebar-search, .sb-quick, .app-sidebar .sidebar-link,
  .app-sidebar .sidebar-report { min-height: var(--tap); height: auto; }
  .sb-neu, .app-shell .app-sidebar .sidebar-search { height: var(--tap); }
  .sidebar-group > summary.sidebar-label { height: var(--tap); }
  .sidebar-group + .sidebar-group { margin-top: var(--s-2); }
  .sidebar-group:not([open]) + .sidebar-group { margin-top: 0; } /* alle Gruppentitel samt Fuss passen auf einen 844-px-Bildschirm */
  .sidebar-group > summary.sidebar-label { margin-bottom: 0; }
  .sidebar-group-body { gap: 0; }
  .sb-kopf { margin-bottom: var(--s-2); }
  .sb-aktionen { padding-bottom: var(--s-2); }
  .sb-nav { padding-top: var(--s-1); padding-bottom: 0; }
  .sb-aktionen { gap: 0; }
  .sb-fuss { margin-top: 0; padding-top: var(--s-1); }
  .sb-kopf { margin-bottom: var(--s-1); }
  .sidebar-search kbd { display: none; }
  .app-sidebar { font-size: var(--fs-md); }
  .app-sidebar .sidebar-link, .sb-quick { font-size: var(--fs-md); }

  .mobile-menu {
    display: inline-flex; align-items: center; gap: var(--s-2); min-width: var(--tap); min-height: var(--tap);
    padding: 0 var(--s-3); border: 0; border-radius: var(--r-2); background: transparent; color: var(--fg);
    font-size: var(--fs-md);
  }
  .mobile-menu:hover { background: var(--sb-hover); }
  .mobile-menu span { display: none; }
  .mobile-menu { padding: 0; justify-content: center; }

  /* Kopfzeile in einer Reihe: Menue, Suche, Diktat. Die Tab-Leiste braucht auf dem Handy niemand. */
  header { flex-wrap: nowrap; gap: var(--s-2); padding: var(--s-1) var(--s-3); }
  /* Die Kopfzeile klebt am Handy immer oben (Menue, Suche, Diktat sind von jedem Seitenzustand aus erreichbar). Sie steht ueber
   * allem, was in der Seite klebt (z-index 10 bis 30), und unter Schublade (70) und Abdunklung (65). Nur die Kopfzeile des
   * Rahmens: ein <header> innerhalb der Seite (z. B. Eingang-Liste) bleibt, wie er ist. */
  .app-stage > header {
    position: sticky; top: 0; z-index: 40;
    padding-top: calc(var(--s-1) + env(safe-area-inset-top, 0px));
  }
  header .search-form { flex: 1; min-width: 0; margin: 0; }
  header .search-form button[type="submit"] { display: none; }
  header .larry-dictation-btn { margin: 0; order: 3; }
  .tab-leiste { display: none; }
}
@media (min-width: 769px) { .mobile-menu { display: none; } }

@media (prefers-reduced-motion: reduce) {
  html .app-shell .app-sidebar, .sb-scrim, .sidebar-group > summary.sidebar-label::after { transition: none; }
}
/* Eingang pruefen (/eingang). Nur Tokens aus tokens.css, keine eigenen Farbwerte.
 * Ebenen statt Rahmen: Liste auf der Seitenflaeche, Pruefbereich als Karte, Formular eine Stufe darueber.
 * Desktop zweispaltig (Liste | Pruefbereich), im Pruefbereich Vorschau neben Formular; Handy alles untereinander. */

.ep { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-4); max-width: var(--measure-app); margin: 0 auto; }
.ep > * { min-width: 0; }
@media (min-width: 900px) {
  .ep { grid-template-columns: minmax(240px, 300px) minmax(0, 1fr); gap: var(--s-5); align-items: start; }
  .ep-liste { position: sticky; top: var(--s-4); max-height: calc(100vh - var(--s-6)); overflow-y: auto; }
}

/* Liste */
.ep-kopf { display: flex; align-items: baseline; gap: var(--s-2); margin-bottom: var(--s-3); }
.ep-kopf h1 { font-size: var(--fs-xl); font-weight: 600; margin: 0; color: var(--fg-strong); }
.ep-zahl { font-size: var(--fs-sm); color: var(--fg-muted); background: var(--surface-3); border-radius: var(--r-full); padding: 0 var(--s-2); min-width: 24px; text-align: center; }
.ep-spaeter { font-size: var(--fs-sm); color: var(--fg-quiet); margin: 0 0 var(--s-2); }
.ep-zeilen { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-1); }
@media (max-width: 899px) { .ep-zeilen { max-height: 24vh; overflow-y: auto; } .ep-pdf { min-height: 46vh; } }
.ep-zeile { display: flex; gap: var(--s-3); align-items: center; min-height: var(--tap); padding: var(--s-2) var(--s-3); border-radius: var(--r-2);
  color: var(--fg); text-decoration: none; border-left: 3px solid transparent; }
.ep-zeile:hover { background: var(--surface-3); }
.ep-zeile:focus-visible, .ep-form :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ep-zeile.aktiv { background: var(--surface-3); border-left-color: var(--accent); }
.ep-symbol { display: inline-flex; flex: none; color: var(--fg-muted); }
.ep-zeilentext { display: grid; min-width: 0; }
.ep-titel { font-size: var(--fs-ui); color: var(--fg-strong); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ep-meta { font-size: var(--fs-sm); color: var(--fg-muted); overflow-wrap: anywhere; }

/* Pruefbereich */
.ep-pruef { background: var(--layer-card); border-radius: var(--r-3); padding: var(--s-4) var(--s-4) var(--s-7); display: grid; gap: var(--s-4); }
.ep-kopfzeile { display: grid; gap: var(--s-1); }
.ep-objekt { font-size: var(--fs-xl); font-weight: 600; margin: 0; color: var(--fg-strong); overflow-wrap: anywhere; }
.ep-pruef code { overflow-wrap: anywhere; word-break: break-word; font-size: var(--fs-sm); }
.ep-bereiche { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-4); align-items: start; }
@media (min-width: 1100px) { .ep-bereiche { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); } .ep-vorschau { position: sticky; top: var(--s-4); } }

.ep-vorschau { background: var(--surface-1); border-radius: var(--r-3); padding: var(--s-2); display: grid; gap: var(--s-2); }
.ep-pdf { min-height: 60vh; border-radius: var(--r-2); background: var(--surface-3); }
.ep-bild { max-width: 100%; height: auto; border-radius: var(--r-2); display: block; }
.ep-text { white-space: pre-wrap; overflow-wrap: anywhere; font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--fg-muted); margin: 0; max-height: 40vh; overflow-y: auto; }
.ep-vorschau-fuss, .ep-erkannt summary { font-size: var(--fs-sm); color: var(--fg-muted); margin: 0; min-height: var(--tap); display: flex; align-items: center; }
.ep-vorschau-fuss a { margin: 0 var(--s-1); }

/* Formular */
.ep-form { background: var(--surface-2); border-radius: var(--r-3); padding: var(--s-4); display: grid; gap: var(--s-3); }
.ep-feld { display: grid; gap: var(--s-1); }
.ep-feld label, .ep-label { font-size: var(--fs-sm); font-weight: 600; color: var(--fg-muted); text-transform: uppercase; letter-spacing: var(--tracking-label); }
.ep-feld input, .ep-feld select { min-height: var(--tap); width: 100%; box-sizing: border-box; font-size: var(--fs-md); }
.ep-nur-lesen span:not(.ep-label):not(.ep-quelle) { font-size: var(--fs-ui); color: var(--fg); overflow-wrap: anywhere; }
.ep-quelle { font-size: var(--fs-sm); color: var(--fg-quiet); overflow-wrap: anywhere; }
.ep-unsicher { margin-left: var(--s-2); font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--warn); }
.ep-ziel { margin: 0; font-size: var(--fs-ui); color: var(--fg-muted); overflow-wrap: anywhere; }
.ep-bleibt { color: var(--warn); }

/* Verbindungen */
.ep-verbindet { display: grid; gap: var(--s-2); background: var(--relation-soft); border-radius: var(--r-2); padding: var(--s-3); }
.ep-verbindet.leer { background: var(--surface-3); }
.ep-verbindet-kopf { margin: 0; font-size: var(--fs-ui); font-weight: 600; color: var(--fg-strong); }
.ep-hinweis { margin: 0; font-size: var(--fs-sm); color: var(--fg-muted); }
.ep-chips { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.ep-chip { display: inline-flex; align-items: center; gap: var(--s-2); min-height: var(--tap); padding: 0 var(--s-3); border-radius: var(--r-full);
  background: var(--surface-3); color: var(--fg); border: 1px solid var(--relation-border); cursor: pointer; max-width: 100%; }
.ep-chip input { min-height: 0; width: auto; }
.ep-chip span { overflow-wrap: anywhere; }
.ep-chip small { color: var(--fg-muted); font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: var(--tracking-label); }
.ep-stellen summary { cursor: pointer; font-size: var(--fs-sm); color: var(--fg-muted); min-height: var(--tap); display: flex; align-items: center; }
.ep-stellen ul { margin: 0; padding-left: var(--s-4); font-size: var(--fs-sm); color: var(--fg-muted); overflow-wrap: anywhere; }

/* Hinweise */
.ep-warn, .ep-genau, .ep-banner, .ep-person { margin: 0; padding: var(--s-3); border-radius: var(--r-2); font-size: var(--fs-ui); overflow-wrap: anywhere; }
.ep-warn { background: var(--surface-3); border-left: 3px solid var(--warn); color: var(--fg); }
.ep-genau { background: var(--surface-3); border-left: 3px solid var(--danger); color: var(--fg); display: grid; gap: var(--s-2); }
.ep-genau p, .ep-genau ul { margin: 0; }
.ep-genau ul { padding-left: var(--s-4); font-size: var(--fs-sm); color: var(--fg-muted); }
.ep-pruefhaken { display: flex; align-items: center; gap: var(--s-2); min-height: var(--tap); font-weight: 600; }
.ep-banner { background: var(--accent-soft); border-left: 3px solid var(--ok); color: var(--fg); }
.ep-banner.fehler { border-left-color: var(--danger); }
.ep-person { background: var(--surface-3); display: grid; gap: var(--s-2); }
.ep-person p { margin: 0; }
.ep-banner.still { border-left-color: var(--line-strong); }
.ep-leer { padding: var(--s-6) var(--s-3); text-align: center; color: var(--fg-muted); }

/* Mails holen (links unter dem Kopf) */
.ep-mails { display: grid; gap: var(--s-1); margin-bottom: var(--s-3); }
.ep-mails button { min-height: var(--tap); border-radius: var(--r-2); font-size: var(--fs-ui); padding: 0 var(--s-4); }
.ep .ep-mails [aria-disabled="true"] { color: var(--fg-muted); }

/* Aktionen: unten, auf dem Handy am Rand klebend */
.ep-aktionen { display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: stretch; }
.ep-aktionen button { min-height: var(--tap); border-radius: var(--r-2); font-size: var(--fs-ui); padding: 0 var(--s-4); }
.ep .ep-gross { flex: 1 1 100%; min-height: 56px; font-size: var(--fs-lg); background: var(--accent); color: var(--on-accent); border: 0; font-weight: 600; }
.ep .ep-gross[aria-disabled="true"] { background: var(--surface-4); color: var(--fg-muted); cursor: not-allowed; }
.ep .ep-sek { background: var(--surface-3); color: var(--fg); border: 1px solid var(--line-strong); font-weight: 500; flex: 1 1 auto; }
.ep .ep-leise { color: var(--fg-muted); }
@media (max-width: 899px) {
  /* Leiste zweireihig (Zustimmen, darunter drei kleine Knoepfe), rechts Platz fuer den Larry-Knopf, Fokus scrollt ueber die Leiste (QA E-4). */
  .ep-aktionen { position: sticky; bottom: 0; background: var(--surface-2); padding: var(--s-2) 84px var(--s-2) 0; z-index: 2; }
  .ep .ep-gross { min-height: var(--tap); font-size: var(--fs-md); }
  .ep .ep-sek { flex: 1 1 0; min-width: 0; padding: 0 var(--s-2); font-size: var(--fs-sm); }
  html:has(.ep) { scroll-padding-bottom: 160px; }
}
@media (prefers-reduced-motion: no-preference) { .ep-zeile, .ep .ep-gross { transition: background var(--dur) var(--ease); } }

/* Tastenkuerzel-Schalter (WCAG 2.1.4) */
.ep-tasten { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); margin: 0; }
.ep-tasten-schalter { min-height: var(--tap); padding: 0 var(--s-3); border-radius: var(--r-2); border: 1px solid var(--line-strong); background: var(--surface-3); color: var(--fg); font-size: var(--fs-sm); }
.ep-tasten-schalter[aria-checked="true"] { border-color: var(--accent); color: var(--fg-strong); }
.ep-tasten-hinweis { font-size: var(--fs-sm); color: var(--fg-muted); }

/* Fehlerzustand der PDF-Vorschau: folgt dem Thema, bleibt in der Spalte */
.ep-pdf-fehler { box-sizing: border-box; max-width: 100%; display: grid; gap: var(--s-3); padding: var(--s-4); border-radius: var(--r-2);
  background: var(--surface-3); border-left: 3px solid var(--warn); color: var(--fg); overflow-wrap: anywhere; }
.ep-pdf-fehler[hidden] { display: none; }
.ep-pdf-fehler p { margin: 0; }
.ep-pdf-aktionen { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.ep-pdf-aktionen .nav-btn { display: inline-flex; align-items: center; min-height: var(--tap); border: 1px solid var(--line-strong); }
.ep-weg { display: none !important; }
/* Mobile Sonderseiten (UX-Audit 2026-10-17, Paket 4).
 *
 * Abend, Postgang, Arbeitszeit, Haus, Auftraege, Durchsicht, Anhaenge.
 * Regel: am Handy (bis 720 px) ist jede Zeile eine Karte - Titel oben, Meta
 * darunter, Entscheidungsknoepfe unten, 44 px hoch. Am Desktop bleibt es die
 * Tabelle. Nur Tokens, kein Hexwert (check_design.py).
 *
 * Eine Tabelle wird zur Kartenliste, wenn sie `kartenliste` traegt und ihre
 * Zellen `data-label` haben; die Zelle mit `k-titel` steht ohne Etikett oben.
 * Die Tabellenkoepfe bleiben fuer Screenreader im Dokument.
 */

/* ------------------------------------------------------------ gemeinsam */

.sonder { min-width: 0; }
.sonder .muted-line, .sonder .wikilink { overflow-wrap: anywhere; }

/* "Nichts tun" ist die Vorauswahl jeder Zeile. Rot und danger waere dort
   falsch (nichts geht kaputt) und weiss auf Rosa hat nur rund 2:1; neutral
   gefuellt mit Haken liest sich als "so gewaehlt". */
.btn-hitl.danger-quiet.active {
  background: var(--surface-4);
  color: var(--fg-strong);
  border-color: var(--line-strong);
}
.btn-hitl.active::before { content: "\2713\00a0"; }

.hitl-zaehler { font-weight: 600; color: var(--fg-strong); }
.abend-sprung a { display: inline-flex; align-items: center; gap: var(--s-1); }
.abend-sprung-menue { margin-bottom: var(--s-4); }
.abend-sprung-menue > summary {
  cursor: pointer; display: flex; align-items: center; gap: var(--s-2);
  min-height: 44px; color: var(--accent); font-size: var(--fs-ui);
}
.abend-sprung-menue > .abend-sprung { margin: var(--s-2) 0 0; }

@media (max-width: 720px) {
  /* ---- Tabelle -> Kartenliste ---- */
  .table-scroll:has(> .kartenliste), .card.table-scroll:has(> .kartenliste) {
    overflow-x: visible; border: 0; padding: 0; background: transparent;
  }
  .styled-table.kartenliste, .styled-table.kartenliste tbody { display: block; width: 100%; }
  /* visibility: hidden nimmt die Sortier-Links der Kopfzeile aus der Tab-Reihenfolge (sonst: fuenf Tab-Stopps
     ohne sichtbaren Fokus). Das Sortieren am Handy leistet die sichtbare Auswahl "Sortieren nach" (mobilwahl). */
  .styled-table.kartenliste thead {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); visibility: hidden;
  }
  .styled-table.kartenliste tbody { display: grid; gap: var(--s-3); }
  .styled-table.kartenliste tr {
    display: block; min-width: 0;
    background: var(--surface-2); border: 1px solid var(--line);
    border-radius: var(--r-3); padding: var(--s-3);
  }
  .styled-table.kartenliste tbody tr:hover { background: var(--surface-2); }
  .styled-table.kartenliste tbody tr:hover td { background: transparent; }
  .styled-table.kartenliste td {
    display: block; border: 0; padding: var(--s-1) 0; min-width: 0;
    overflow-wrap: anywhere; white-space: normal;
  }
  .styled-table.kartenliste td[data-label]:not(:empty)::before {
    content: attr(data-label); display: block;
    font-size: var(--fs-sm); color: var(--fg-muted); margin-bottom: 2px;
  }
  .styled-table.kartenliste td[data-label=""]::before { display: none; }
  .styled-table.kartenliste td.k-titel {
    font-size: var(--fs-md); font-weight: 600; color: var(--fg-strong);
  }
  .styled-table.kartenliste td.k-leer { display: none; }
  /* Meta-Zeile: kurze Werte nebeneinander, Etikett davor in kleiner Schrift. */
  .styled-table.kartenliste td.k-inline {
    display: inline-flex; align-items: center; gap: var(--s-1);
    margin: 0 var(--s-3) 0 0; padding: var(--s-1) 0;
  }
  .styled-table.kartenliste td.k-inline[data-label]:not(:empty)::before {
    display: inline; margin: 0; font-size: var(--fs-sm);
  }
  .styled-table.kartenliste td.k-aktion { padding-top: var(--s-2); }
  .styled-table.kartenliste td.k-aktion:empty { display: none; }
  .styled-table.kartenliste td.k-aktion .property-chip,
  .styled-table.kartenliste td.k-aktion .btn {
    min-height: 44px; display: inline-flex; align-items: center; padding: 0 var(--s-3);
  }
  .styled-table.kartenliste td.k-titel .property-chip { vertical-align: middle; }

  /* ---- Abend: vier Zellen werden eine Karte ---- */
  .sonder-abend .styled-table.hitl-mac { table-layout: auto; }
  .sonder-abend .hitl-mac td.hitl-col-element,
  .sonder-abend .hitl-mac td.hitl-col-status,
  .sonder-abend .hitl-mac td.hitl-col-empfehlung,
  .sonder-abend .hitl-mac td.hitl-col-aktion { width: auto; }
  .sonder-abend .hitl-mac td.hitl-col-status,
  .sonder-abend .hitl-mac td.hitl-col-empfehlung {
    display: grid; grid-template-columns: 5.25rem minmax(0, 1fr); column-gap: var(--s-2);
    align-items: baseline;
  }
  .sonder-abend .hitl-mac td.hitl-col-status::before,
  .sonder-abend .hitl-mac td.hitl-col-empfehlung::before { margin: 0; }
  .sonder-abend .hitl-element-head { align-items: center; flex-wrap: wrap; column-gap: var(--s-2); }
  .sonder-abend .hitl-titel { overflow-wrap: anywhere; }
  .sonder-abend .hitl-deep-kontext { font-size: var(--fs-ui); }
  .sonder-abend .hitl-status-box,
  .sonder-abend .hitl-empfehlung-box { font-size: var(--fs-ui); }
  .sonder-abend .hitl-drawer summary {
    display: flex; align-items: center; min-height: 44px; font-size: var(--fs-ui);
  }
  /* Die Aktionsleiste: immer sichtbar, in der Breite umbrechend, 44 px hoch. */
  .sonder-abend .hitl-col-aktion {
    margin-top: var(--s-2); padding-top: var(--s-3);
    border-top: 1px solid var(--line);
  }
  .sonder-abend .hitl-steuerung { gap: var(--s-2); }
  .sonder-abend .hitl-btn-group { gap: var(--s-2); margin: 0; }
  .sonder-abend .btn-hitl {
    flex: 1 1 6.25rem; min-height: 44px; padding: 0 var(--s-2);
    font-size: var(--fs-ui); white-space: normal; line-height: 1.2;
  }
  .sonder-abend .hitl-kommentar {
    min-height: 44px; font-size: 1rem; padding: 0 var(--s-3);
  }
  .sonder-abend .hitl-kategorie { margin: var(--s-1) 0; }
  .sonder-abend .abend-sprung { gap: var(--s-2); }
  .sonder-abend .abend-abschnitt { scroll-margin-top: var(--s-4); }
  .sonder-abend .abend-sprung a {
    min-height: 44px; padding: 0 var(--s-3); font-size: var(--fs-ui);
    color: var(--fg-muted);
  }
  /* Abschluss wie bei Sunsama (Tagesende als eigener Schritt) und Things
     (Erledigt-Knopf am Ende): fest am unteren Rand, mit Zaehler. Rechts bleibt
     Platz fuer den Schwebeknopf Larry. */
  .sonder-abend .hitl-submit-bar {
    position: sticky; bottom: 0; z-index: 5; display: grid;
    grid-template-columns: minmax(0, 1fr); gap: var(--s-1);
    padding: var(--s-2) 6rem calc(var(--s-2) + env(safe-area-inset-bottom)) var(--s-3);
    box-shadow: 0 -8px 16px var(--bg);
  }
  .sonder-abend .hitl-submit-bar .nav-btn { min-height: 44px; justify-content: center; }
  .sonder-abend .hitl-zaehler { font-size: var(--fs-sm); }
  .sonder-abend .hitl-submit-bar .muted-line { display: none; }
  .sonder-abend .abend-hero .nav-btn { min-height: 44px; }
}

/* ------------------------------------------------------------- Postgang
   Absender fett und Datum in einer Zeile, darunter der Betreff in hoechstens
   zwei Zeilen, dann eine Zeile Vorschau. Vorbild Apple Mail und Superhuman
   (Absender, Betreff, eine Zeile Vorschau; Superhuman-Hilfe 502 triage,
   Suchtreffer 2026-10-17). Wischgesten gibt es bewusst nicht: Archivieren ist
   ein ausgehender Schritt und steht nach SOP-028 nicht zur Wahl. */
.postgang-thema { overflow-wrap: anywhere; }
.postgang-ordner .postgang-ungelesen, .postgang-ordner .postgang-zahl { white-space: nowrap; }
.postgang-leer-hinweis { flex: 0 0 100%; width: 100%; order: 99; margin: var(--s-1) 0 0; }
.postgang-zeile .postgang-vorschau { font-weight: 400; }

@media (max-width: 720px) {
  .sonder-postgang .postgang-spalte { display: flex; flex-direction: row; flex-wrap: wrap; gap: var(--s-2); }
  .sonder-postgang .postgang-ordner {
    min-height: 44px; padding: 0 var(--s-3); border: 1px solid var(--line);
    border-radius: var(--r-full); flex: 0 1 auto;
  }
  .postgang-zeilen { gap: var(--s-2); }
  .postgang-zeile {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "von datum" "betreff betreff";
    row-gap: var(--s-1); column-gap: var(--s-3); padding: var(--s-3);
    min-height: 44px; border: 1px solid var(--line); border-radius: var(--r-3);
    background: var(--surface-2);
  }
  .postgang-zeilen { gap: var(--s-2); }
  .postgang-zeile .postgang-von { grid-area: von; font-weight: 600; color: var(--fg-strong); }
  .postgang-zeile .postgang-datum { grid-area: datum; }
  .postgang-zeile .postgang-betreff { grid-area: betreff; }
  .postgang-zeile.ungelesen .postgang-von::before {
    content: ""; display: inline-block; width: 8px; height: 8px; margin-right: var(--s-2);
    border-radius: 50%; background: var(--accent);
  }
  .postgang-zeile .postgang-thema {
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
    overflow: hidden;
  }
  .postgang-zeile .postgang-klammer, .postgang-zeile .postgang-marke {
    align-self: flex-start; margin-left: 0;
  }
  .postgang-verlauf-zeile { grid-template-columns: minmax(0, 1fr); gap: var(--s-1); padding: var(--s-3); }
  .view-heading .nav-btn { min-height: 44px; display: inline-flex; align-items: center; }
}

/* ------------------------------------------------- Auswahl statt Reiterleiste */
.mobil-wahl { display: none; }
.mobil-wahl label {
  display: flex; flex-direction: column; gap: var(--s-1);
  font-size: var(--fs-sm); color: var(--fg-muted);
}
.mobil-wahl select { min-height: 44px; font-size: 1rem; width: 100%; }
@media (max-width: 720px) {
  .mobil-wahl { display: block; margin: var(--s-3) 0; }
  .sonder .ansicht-tabs:has(+ .mobil-wahl) { display: none; }
}

/* ------------------------------------------------------------ Arbeitszeit
   Jeder Tag eine Karte: Tag, Ist und Saldo in einer Zeile, darunter Dienst und
   Zeiten, darunter "Aendern" oder "Eintragen". Aus der Tabelle werden Gitter,
   die Zellen des Tages (`display: contents`) setzen sich selbst. Vorbild:
   Tagesliste in Apple Gesundheit / Things (eine Zeile, Tippen oeffnet). */
@media (min-width: 721px) {
  .az-nachtrag > summary { display: none; }
}
@media (max-width: 720px) {
  .sonder-arbeitszeit .az-tabelle,
  .sonder-arbeitszeit .az-tabelle tbody { display: block; width: 100%; table-layout: auto; }
  .sonder-arbeitszeit .card.table-scroll { overflow-x: visible; border: 0; padding: 0; background: transparent; }
  .sonder-arbeitszeit .az-tabelle thead {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0);
  }
  .sonder-arbeitszeit .az-tabelle tbody { display: grid; gap: var(--s-2); }
  .sonder-arbeitszeit .az-tabelle tr {
    display: grid; grid-template-columns: minmax(0, 1fr) auto auto;
    column-gap: var(--s-3); align-items: center;
    background: var(--surface-2); border: 1px solid var(--line);
    border-radius: var(--r-3); padding: var(--s-1) var(--s-3);
  }
  .sonder-arbeitszeit .az-tabelle tr:hover td { background: transparent; }
  .sonder-arbeitszeit .az-tabelle td {
    display: block; border: 0; padding: 0; white-space: normal; width: auto;
  }
  .sonder-arbeitszeit .az-tabelle td.az-tag { display: contents; }
  .sonder-arbeitszeit .az-tabelle td.breit-only { display: none; }
  .sonder-arbeitszeit .az-luecke .nur-schmal { display: none; }
  .sonder-arbeitszeit .az-tag > a {
    grid-column: 1; grid-row: 1; display: flex; align-items: center;
    min-height: 44px; font-weight: 600; font-size: var(--fs-md);
  }
  .sonder-arbeitszeit .az-tabelle .az-ist { grid-column: 2; grid-row: 1; text-align: right; font-variant-numeric: tabular-nums; }
  .sonder-arbeitszeit .az-tabelle .az-saldo { grid-column: 3; grid-row: 1; text-align: right; min-width: 4.5rem; font-variant-numeric: tabular-nums; }
  .sonder-arbeitszeit .az-tabelle .nur-schmal {
    grid-column: 1 / -1; grid-row: 2; font-size: var(--fs-sm); padding-bottom: var(--s-1);
  }
  .sonder-arbeitszeit .az-tabelle .az-details { grid-column: 1 / -1; grid-row: 3; }
  .sonder-arbeitszeit .az-tabelle .az-nachtrag-zelle { grid-column: 1 / -1; grid-row: 3; }
  .sonder-arbeitszeit .az-details > summary {
    display: flex; align-items: center; min-height: 44px; font-size: var(--fs-ui);
    color: var(--accent);
  }
  .sonder-arbeitszeit .az-tabelle tr.woche-summe {
    background: transparent; border: 0; border-bottom: 1px solid var(--line);
    border-radius: 0; padding: var(--s-2) var(--s-3); margin-top: var(--s-2);
  }
  .sonder-arbeitszeit .az-tabelle .az-wk {
    grid-column: 1; grid-row: 1; color: var(--fg-muted); font-size: var(--fs-sm);
    text-transform: uppercase; letter-spacing: var(--tracking-label);
  }
  .sonder-arbeitszeit .az-inline, .sonder-arbeitszeit .az-tagform {
    display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-2); padding-bottom: var(--s-3);
  }
  .sonder-arbeitszeit .az-inline select:first-of-type,
  .sonder-arbeitszeit .az-inline select:nth-of-type(4),
  .sonder-arbeitszeit .az-inline-check,
  .sonder-arbeitszeit .az-inline button,
  .sonder-arbeitszeit .az-tagform label:first-child,
  .sonder-arbeitszeit .az-tagform .az-inline-check,
  .sonder-arbeitszeit .az-tagform button,
  .sonder-arbeitszeit .az-tagform .nav-btn { grid-column: 1 / -1; }
  .sonder-arbeitszeit .az-inline select, .sonder-arbeitszeit .az-inline-check,
  .sonder-arbeitszeit .az-inline button, .sonder-arbeitszeit .az-tagform select,
  .sonder-arbeitszeit .az-tagform button, .sonder-arbeitszeit .az-tagform .nav-btn,
  .sonder-arbeitszeit .az-tagform input[type="time"] {
    min-height: 44px; font-size: 1rem; max-width: none; width: 100%;
  }
  .sonder-arbeitszeit .az-inline-check { display: flex; align-items: center; }
  .sonder-arbeitszeit .az-inline-check input { width: 24px; height: 24px; min-height: 0; }
  .sonder-arbeitszeit .anhang-vorschau .property-chip { min-height: 44px; display: inline-flex; align-items: center; }
  .sonder-arbeitszeit .kpi-row { gap: var(--s-2); }
}

/* ------------------------------------------------------------ Haus: Kosten
   Kennzahlen: die Zahl gross, die Beschriftung klein (vorher trugen die
   Kacheln Klassen ohne Regel, Zahl und Name sahen gleich aus). Am Handy ist
   jede Aufgabe eine Karte, Felder hinter "Bearbeiten". */
.kpi-zusatz { font-size: var(--fs-micro); color: var(--fg-muted); }
.hk-auf, .hk-auf-label { display: none; }
.sonder-haus .raum-chip, .sonder-haus .quartal-zeile { min-height: 44px; display: inline-flex; align-items: center; }
.sonder-haus .quartal-zeile { display: grid; }

@media (max-width: 720px) {
  .sonder-haus .raum-chip { padding: 0 var(--s-3); font-size: var(--fs-ui); }
  .sonder-haus .kpi { flex: 1 1 calc(50% - var(--s-2)); min-width: 0; }
  .sonder-haus .raum-chips { gap: var(--s-2); }
  .styled-table.hk-liste, .styled-table.hk-liste tbody { display: block; width: 100%; }
  .styled-table.hk-liste tbody { display: grid; gap: var(--s-3); }
  .styled-table.hk-liste tr {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: var(--s-3); row-gap: var(--s-1);
  }
  table.hauskosten.hk-liste td, table.hauskosten.hk-liste td:first-child,
  table.hauskosten.hk-liste td:last-child {
    position: static; box-shadow: none; background: transparent; max-width: none;
    text-align: left;
  }
  .styled-table.hk-liste td.k-titel { display: contents; }
  .hk-liste td.k-titel .wikilink {
    grid-column: 1 / -1; grid-row: 1; display: block; padding-bottom: var(--s-1);
    overflow-wrap: anywhere; font-size: var(--fs-md); font-weight: 600;
  }
  .hk-liste td.hk-raum { grid-column: 1; grid-row: 2; }
  table.hauskosten.hk-liste td.hk-plan { grid-column: 2; grid-row: 2; text-align: right; font-size: var(--fs-lg); font-weight: 600; }
  .hk-liste td.hk-status { grid-column: 1; grid-row: 3; }
  table.hauskosten.hk-liste td.hk-quartal { grid-column: 2; grid-row: 3; text-align: right; }
  .hk-raum::before, .hk-plan::before, .hk-status::before, .hk-quartal::before { display: none !important; }
  .hk-auf-label {
    display: flex; align-items: center; justify-content: center; grid-column: 1 / -1; grid-row: 4;
    min-height: 44px; margin-top: var(--s-2); border: 1px solid var(--line-strong);
    border-radius: var(--r-2); color: var(--accent); font-size: var(--fs-ui); cursor: pointer;
  }
  .hk-auf { display: block; position: absolute; opacity: 0; width: 1px; height: 1px; }
  .hk-auf:focus-visible + .hk-auf-label { outline: 2px solid var(--accent); outline-offset: 2px; }
  .hk-liste tr:has(.hk-auf:checked) .hk-auf-label { background: var(--accent-soft); }
  .hk-liste tr:has(.hk-auf:checked) .hk-auf-label::after { content: "\00a0schließen"; }
  .hk-liste td.hk-feld { display: none; }
  .hk-liste tr:has(.hk-auf:checked) td.hk-feld { display: block; }
  .hk-liste td.hk-breit { grid-column: 1 / -1; }
  .hk-liste td.hk-feld .kostenfeld, .hk-liste td.hk-feld .hitl-auswahl {
    width: 100%; min-height: 44px; font-size: 1rem; padding: 0 var(--s-3);
  }
  .hk-liste td.hk-feld .triage-btn { width: 100%; min-height: 44px; font-size: var(--fs-ui); }
  .hk-liste td.hk-feld.hk-speichern::before { display: none; }
}
@media (max-width: 720px) {
  /* Kosten nach Raum, Projekt, Kategorie: Name, Plan gross, die uebrigen
     Zahlen zu zweit. */
  .styled-table.hk-gruppen tr {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: var(--s-3); row-gap: var(--s-1);
  }
  table.hauskosten.hk-gruppen td, table.hauskosten.hk-gruppen td:first-child {
    position: static; box-shadow: none; background: transparent; max-width: none;
    text-align: left; white-space: normal;
  }
  table.hauskosten.hk-gruppen td.k-titel { grid-column: 1 / -1; order: -2; }
  table.hauskosten.hk-gruppen td.stark {
    grid-column: 1 / -1; order: -1; font-size: var(--fs-lg); font-weight: 600;
  }
}
@supports not selector(:has(*)) {
  @media (max-width: 720px) {
    .hk-liste td.hk-feld { display: block; }
    .hk-auf-label { display: none; }
  }
}

/* ---------------------------------------------------- Filterleisten, Paging */
.mehr-laden { margin: var(--s-4) 0; text-align: center; }
@media (max-width: 720px) {
  .sonder .controls-bar { display: grid; grid-template-columns: 1fr; gap: var(--s-2); }
  .sonder .controls-bar label { display: flex; flex-direction: column; gap: var(--s-1); font-size: var(--fs-sm); color: var(--fg-muted); }
  .sonder .controls-bar select, .sonder .controls-bar input, .sonder .controls-bar button {
    min-height: 44px; font-size: 1rem; width: 100%;
  }
  .sonder .view-heading .nav-btn, .sonder .mehr-laden .nav-btn {
    min-height: 44px; display: inline-flex; align-items: center; justify-content: center;
  }
}

/* ------------------------------------------------------------- Durchsicht
   Karte je Projekt; "Geprueft" ist der Hauptknopf, die Entscheidungen
   daneben laufen in zwei Spalten, alle 44 Pixel hoch. */
@media (max-width: 720px) {
  .styled-table.kartenliste td.triage-titel { max-width: none; }
  .durchsicht-liste .steuerung { margin-top: var(--s-1); }
  .durchsicht-liste .steuerung .property-chip, .durchsicht-liste .steuerung button {
    min-height: 44px; padding-inline: var(--s-3);
  }
  .durchsicht-liste .stillstand-marke { display: inline-flex; max-width: 100%; white-space: normal; margin: var(--s-1) var(--s-1) 0 0; }
  .styled-table.kartenliste td.durchsicht-schritt .steuerung { margin-top: var(--s-2); }
  .styled-table.durchsicht-liste tr {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--s-3);
  }
  .durchsicht-liste td.triage-titel { grid-column: 1 / -1; grid-row: 1; }
  .durchsicht-liste td.triage-ist { grid-column: 1; grid-row: 2; }
  .durchsicht-liste td.k-offen { grid-column: 2; grid-row: 2; }
  .durchsicht-liste td.durchsicht-schritt, .durchsicht-liste td[data-label="Nächster Schritt"] { grid-column: 1 / -1; grid-row: 3; }
  .durchsicht-liste td.triage-knoepfe { grid-column: 1 / -1; grid-row: 4; }
  .styled-table.kartenliste td.triage-knoepfe {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-2);
    margin-top: var(--s-2); padding-top: var(--s-3); border-top: 1px solid var(--line);
    white-space: normal;
  }
  .styled-table.kartenliste td.triage-knoepfe .triage-btn {
    min-height: 44px; font-size: var(--fs-ui); display: inline-flex;
    align-items: center; justify-content: center; text-decoration: none;
  }
  .styled-table.kartenliste td.triage-knoepfe .k-haupt {
    grid-column: 1 / -1; background: var(--accent); color: var(--on-accent);
    border-color: transparent; font-weight: 600;
  }
  .styled-table.kartenliste td.triage-knoepfe .triage-btn:last-child { grid-column: 1 / -1; }
}

/* Chips in den Karten dieser Seiten: umbrechen statt abschneiden. Die
   allgemeine Chip-Regel (24 Zeichen, Maske) gehoert zu Paket 3; hier gilt sie
   nur, solange sie dort nicht ersetzt ist, und nur fuer die Sonderseiten. */
@media (max-width: 720px) {
  .sonder .property-chip:not(.ghost):not(.property-edit) {
    max-width: 100%; white-space: normal; overflow-wrap: anywhere;
    -webkit-mask-image: none; mask-image: none;
  }
}

/* --------------------------------------------------------------- Anhaenge
   Vorschaubild links, Name und Meta rechts; "Galerie" zeigt nur Kacheln.
   Vorbild: Capacities/Notion-Galerie, Apple Fotos (Raster). */
.anhang-thumb, .anhang-icon {
  width: 40px; height: 40px; border-radius: var(--r-2); object-fit: cover; display: block;
}
.anhang-icon {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--surface-3); color: var(--fg-muted);
  font-size: var(--fs-micro); font-weight: 600; letter-spacing: var(--tracking-label);
}
.k-vorschau { width: 1%; }
.k-ordner.muted-line { margin: 0; }
.anhang-ansicht { display: flex; gap: var(--s-2); margin: var(--s-3) 0; }
.anhang-ansicht .ansicht-tab { min-height: 44px; display: inline-flex; align-items: center; }
.anhang-galerie {
  display: grid; gap: var(--s-3);
  grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr));
}
.anhang-kachel {
  display: flex; flex-direction: column; gap: var(--s-1); min-width: 0;
  padding: var(--s-2); border: 1px solid var(--line); border-radius: var(--r-3);
  background: var(--surface-2); color: var(--fg); text-decoration: none;
}
.anhang-kachel-bild {
  width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: var(--r-2); display: block;
}
.anhang-kachel .anhang-icon { width: 100%; height: auto; aspect-ratio: 1 / 1; font-size: var(--fs-md); }
.anhang-kachel-name {
  font-size: var(--fs-sm); color: var(--fg-muted); overflow-wrap: anywhere;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
}
@media (max-width: 720px) {
  .anhang-galerie { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-2); }
  .anhang-kachel { padding: var(--s-1); }
  .styled-table.anhang-liste tr {
    display: grid; grid-template-columns: 56px auto auto minmax(0, 1fr); column-gap: var(--s-3);
    align-items: center;
  }
  .anhang-liste td.k-vorschau { grid-column: 1; grid-row: 1 / span 3; width: auto; align-self: start; padding-top: var(--s-1); }
  .anhang-thumb, .anhang-icon { width: 56px; height: 56px; }
  .anhang-liste td.k-titel { grid-column: 2 / -1; grid-row: 1; font-size: var(--fs-ui); }
  .anhang-liste td.k-ordner { grid-column: 2 / -1; grid-row: 3; font-size: var(--fs-sm); }
  .anhang-liste td.k-inline { grid-row: 2; margin: 0; }
  .anhang-liste td.k-inline:nth-of-type(3) { grid-column: 2; }
  .anhang-liste td.k-inline:nth-of-type(5) { grid-column: 3; }
  .anhang-liste td.k-inline:nth-of-type(6) { grid-column: 4; }
  .anhang-liste .anhang-direkt {
    display: inline-flex; align-items: center; min-height: 44px; margin-left: var(--s-3);
    font-weight: 400; font-size: var(--fs-ui);
  }
}

/* ------------------------------------------------------ Dashboards Haus/Arbeit */
@media (max-width: 720px) {
  .sonder-bereich .bereich-kachel { min-height: 44px; align-items: center; }
  .sonder-bereich .nav-btn { min-height: 44px; display: inline-flex; align-items: center; }
  .sonder-bereich .inventar-zeile { gap: var(--s-2); padding: var(--s-2) 0; }
  .sonder-bereich .inventar-zeile a { min-height: 44px; display: inline-flex; align-items: center; }
}

/* --------------------------------------------------- Beruehrflaechen 44 px
   Inline-Links in Karten und Hinweisen sind 15 Pixel hoch. Die Flaeche waechst
   durch Polster, nicht durch groessere Schrift. */
@media (max-width: 720px) {
  .sonder .styled-table.kartenliste td.k-titel > a,
  .sonder .hitl-titel a, .sonder .k-offen a {
    display: inline-flex; align-items: center; min-height: 44px; padding-block: var(--s-1);
  }
  .sonder p > a.wikilink, .sonder .error-banner a, .sonder .flash a {
    display: inline-flex; align-items: center; min-height: 44px;
  }
  .sonder-bereich .task-card .karte-haken { width: 44px; height: 44px; }
  .sonder-bereich .task-card .property-chip { min-height: 44px; }
  .sonder-bereich .task-card a.wikilink, .sonder .durchsicht-schritt a.wikilink,
  .sonder-abend .hitl-status-box .property-chip {
    display: inline-flex; align-items: center; min-height: 44px;
  }
  .sonder .az-inline-check { min-height: 44px; }
}

/* Einklappbare Abschnitte der Abendroutine */
.hitl-abschnitt > summary { list-style: none; cursor: pointer; display: block; }
.hitl-abschnitt > summary::-webkit-details-marker { display: none; }
.hitl-abschnitt > summary .hitl-kategorie::after {
  content: "\25BE"; margin-left: auto; color: var(--fg-muted); transition: transform var(--dur) var(--ease);
}
.hitl-abschnitt:not([open]) > summary .hitl-kategorie::after { transform: rotate(-90deg); }
.hitl-abschnitt > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--r-2); }
@media (max-width: 720px) {
  .hitl-abschnitt > summary .hitl-kategorie { min-height: 44px; }
}

/* Leere Eigenschaften ("+ Geplant", "+ Status") sind am Handy ohne Hover
   dauerhaft sichtbar, in blasser Schrift (gemessen 2,6:1) und als 44-Pixel-Chips.
   In den Karten dieser Seiten entfallen sie; wer ein Datum setzen will, oeffnet
   das Objekt. */
@media (max-width: 720px) {
  .sonder .property-chip.ghost, .sonder .property-chip.property-edit { display: none; }
}

/* Heller Modus: vier Textfarben lagen auf diesen Seiten unter 4,5:1 (gemessen
   3,2 / 4,2 / 4,5 zu 1). Wie bei den Statuschips in theme.css wird die Farbe
   zur Haelfte mit der Schriftfarbe gemischt; dunkel bleibt unberuehrt. */
:root[data-theme="light"] .sonder .saldo-plus,
:root[data-theme="light"] .sonder .postgang-marke,
:root[data-theme="light"] .postgang-marke {
  color: color-mix(in srgb, var(--ok) 45%, var(--fg-strong));
}
:root[data-theme="light"] .sonder .status-backlog {
  color: color-mix(in srgb, var(--st-backlog) 55%, var(--fg-strong));
}
:root[data-theme="light"] .sonder .property-chip.relation-link {
  color: color-mix(in srgb, var(--relation) 65%, var(--fg-strong));
}
:root[data-theme="light"] .sonder .ueberfaellig { color: var(--text-danger); }
@media (max-width: 720px) {
  .sonder .view-heading a.nav-btn:not(.primary) {
    border: 1px solid var(--line-strong); border-radius: var(--r-2); padding: 0 var(--s-4);
    margin-top: var(--s-2); color: var(--fg-strong); background: var(--surface-2);
  }
}

/* ------------------------------------------- Haus-Kosten: Gruppen, Paging */
.mobil-wahl.immer { display: block; margin: var(--s-2) 0; max-width: 22rem; }
.hk-gruppe { margin-top: var(--s-3); }
.hk-gruppe > summary {
  display: flex; align-items: center; gap: var(--s-2); min-height: 44px; cursor: pointer;
  font-weight: 600; color: var(--fg-strong); list-style: none;
}
.hk-gruppe > summary::-webkit-details-marker { display: none; }
.hk-gruppe > summary::before {
  content: "\25B8"; color: var(--fg-muted); transition: transform var(--dur) var(--ease);
}
.hk-gruppe[open] > summary::before { transform: rotate(90deg); }
.hk-gruppe > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--r-2); }

/* Abend: Kontext als eine Meta-Zeile statt vier. Am Desktop bleiben es Zeilen. */
@media (max-width: 720px) {
  .sonder-abend .hitl-deep-kontext br { display: none; }
  .sonder-abend .hitl-deep-kontext {
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;
  }
  .sonder-abend .hitl-punkt:not(:last-child)::after { content: "\00a0\00b7\00a0"; color: var(--fg-muted); }
  .sonder-abend .hitl-col-element { padding-bottom: var(--s-1); }
  .sonder-abend .hitl-col-aktion { margin-top: var(--s-1); padding-top: var(--s-2); }
  .styled-table.hitl-mac tr { padding: var(--s-2) var(--s-3); }
}
/* Listen: Zeilen, Seitenfuss, Typleiste, feste Namensspalte, Baum, Board am Handy.
 * Nur Tokens aus tokens.css/theme.css. Handy zuerst: Beruehrflaechen mindestens 44 px, nichts
 * laeuft ueber den Rand; breite Tabellen scrollen in ihrem Bereich, nicht die Seite. */

/* --- Zeilen ---------------------------------------------------------------------------------- */
.lz-liste { border: 1px solid var(--line); border-radius: var(--r-3); overflow: hidden; background: var(--surface-2); }
.lz + .lz, .lz-gruppe + .lz, .lz + .lz-gruppe { border-top: 1px solid var(--line); }
.lz-gruppe { display: flex; align-items: center; gap: var(--s-2); margin: 0; padding: var(--s-2) var(--s-3); background: var(--surface-1); }
.lz-gruppe h2 { margin: 0; font-size: var(--fs-ui); color: var(--fg-strong); }
.lz-gruppe span { color: var(--fg-muted); font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
.lz-link {
  display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center; gap: var(--s-3);
  min-height: 56px; padding: var(--s-2) var(--s-3); color: var(--fg);
}
.lz-link:hover { background: var(--surface-3); }
.lz-link:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.lz-icon {
  display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px;
  border-radius: var(--r-2); background: var(--accent-soft); color: var(--accent); font-size: var(--fs-sm); font-weight: 700;
}
.lz-haupt { display: grid; gap: 2px; min-width: 0; }
.lz-titel { color: var(--fg-strong); font-size: var(--fs-md); line-height: var(--lh-tight); overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.lz-zusatz { color: var(--fg-muted); font-size: var(--fs-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lz-datum { color: var(--fg-muted); font-size: var(--fs-sm); white-space: nowrap; font-variant-numeric: tabular-nums; }
.leerzustand { display: grid; justify-items: start; gap: var(--s-3); margin-top: var(--s-4); padding: var(--s-5); border: 1px dashed var(--line-strong); border-radius: var(--r-3); color: var(--fg-muted); }
.leerzustand p { margin: 0; }
.leerzustand .nav-btn { display: inline-flex; align-items: center; min-height: var(--tap); }

/* --- Seitenfuss: N von M, Mehr laden, Nach oben ------------------------------------------------ */
.mehr-fuss { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-2) var(--s-4); margin: var(--s-3) 0 var(--s-5); }
.mehr-zaehler { color: var(--fg-muted); font-size: var(--fs-ui); font-variant-numeric: tabular-nums; }
.mehr-link, .mehr-oben {
  display: inline-flex; align-items: center; justify-content: center; min-height: var(--tap); padding: 0 var(--s-4);
  border: 1px solid var(--line-strong); border-radius: var(--r-2); background: var(--surface-2); color: var(--fg-strong); font-size: var(--fs-ui);
}
.mehr-link { border-color: var(--accent-border); background: var(--accent-soft); font-weight: 600; flex: 1 1 12rem; }
.mehr-link:hover, .mehr-oben:hover { background: var(--surface-3); }
.mehr-link[aria-busy="true"] { opacity: 0.7; pointer-events: none; }
[data-live-ziel][aria-busy="true"] { opacity: 0.6; transition: opacity var(--dur) var(--ease); }
.oben-knopf {
  position: fixed; left: var(--s-4); bottom: var(--s-4); z-index: 60; min-height: var(--tap); padding: 0 var(--s-4);
  border: 1px solid var(--line-strong); border-radius: var(--r-full); background: var(--surface-3); color: var(--fg-strong);
  font-size: var(--fs-ui); box-shadow: var(--shadow-pop); cursor: pointer;
}
.oben-knopf[hidden] { display: none; }

/* --- Typleiste (Notizen): eine Zeile, waagerecht scrollbar -------------------------------------- */
.typ-leiste {
  display: flex; gap: var(--s-2); margin: 0 0 var(--s-3); padding: 0 0 var(--s-1); overflow-x: auto;
  scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; scrollbar-width: thin;
}
.typ-chip {
  display: inline-flex; flex: none; align-items: center; gap: var(--s-2); min-height: var(--tap); padding: 0 var(--s-3);
  border: 1px solid var(--line-strong); border-radius: var(--r-full); color: var(--fg-muted); font-size: var(--fs-ui);
  white-space: nowrap; scroll-snap-align: start;
}
.typ-chip span { color: var(--fg-muted); font-variant-numeric: tabular-nums; font-size: var(--fs-sm); }
.typ-chip:hover { background: var(--surface-3); color: var(--fg-strong); }
.typ-chip.aktiv { background: var(--accent-soft); border-color: var(--accent-border); color: var(--fg-strong); font-weight: 600; }

/* --- Werkzeugleiste der Listen: ein Filterbau --------------------------------------------------- */
.liste-seite { position: relative; }
.liste-seite .wl-huelle { margin-bottom: var(--s-2); }
.liste-seite .wl-rechts { margin-left: 0; flex: 1 1 100%; flex-wrap: nowrap; gap: var(--s-2); }
.liste-seite .wl-suche { flex: 1 1 auto; min-width: 0; width: auto; min-height: var(--tap); }
.liste-seite .wl-anpassen > summary { min-height: var(--tap); padding: 0 var(--s-4); gap: var(--s-2); }
.liste-seite .wl-anpassen { flex: none; }
.liste-seite .wl-anpassen.aktiv > summary { background: var(--accent-soft); border-color: var(--accent-border); color: var(--fg-strong); font-weight: 600; }
.lb-zahl { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 var(--s-1); border-radius: var(--r-full); background: var(--accent); color: var(--on-accent); font-size: var(--fs-micro); font-weight: 700; }
.liste-seite .popover { max-height: 70vh; overflow-y: auto; }
.liste-seite .anpassen-zeile { grid-template-columns: 7rem minmax(0, 1fr); }
.liste-seite .anpassen-zeile select, .liste-seite .popover select { min-height: var(--tap); }
.liste-seite .popover .nav-btn { min-height: var(--tap); display: inline-flex; align-items: center; justify-content: center; }
.liste-seite .property-toggles { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.liste-seite .property-toggles label { display: inline-flex; align-items: center; gap: var(--s-2); min-height: 36px; }
.lb-aktiv { display: flex; flex-wrap: wrap; gap: var(--s-2); margin: 0 0 var(--s-3); }
.lb-aktiv:empty { display: none; }
.lb-chip {
  display: inline-flex; align-items: center; gap: var(--s-1); min-height: 36px; padding: 0 0 0 var(--s-3);
  border: 1px solid var(--accent-border); border-radius: var(--r-full); background: var(--accent-soft); color: var(--fg-strong); font-size: var(--fs-sm);
}
.lb-chip a { display: inline-flex; align-items: center; justify-content: center; min-width: var(--tap); min-height: var(--tap); margin: -4px 0; color: var(--fg-muted); font-size: var(--fs-lg); }
.lb-neu { display: grid; gap: var(--s-2); }
.lb-neu select, .lb-neu input { width: 100%; min-height: var(--tap); }
.lb-schnell { display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center; }
.lb-ueber { flex: 1 1 100%; color: var(--fg-muted); font-size: var(--fs-micro); letter-spacing: var(--tracking-label); text-transform: uppercase; }
.lb-schnell .facette { min-height: var(--tap); }

/* --- Tabelle mit fester Namensspalte ------------------------------------------------------------ */
.tabelle-fest { position: relative; max-width: 100%; overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-3); background: var(--surface-2); -webkit-overflow-scrolling: touch; }
.tabelle-fest .styled-table { width: max-content; min-width: 100%; }
.tabelle-fest th, .tabelle-fest td { padding: var(--s-2) var(--s-3); vertical-align: top; }
.tabelle-fest th { top: 0; z-index: 2; }
.tabelle-fest .name-zelle {
  position: sticky; left: 0; z-index: 1; min-width: 9rem; max-width: 12rem; background: var(--surface-2);
  box-shadow: 1px 0 0 var(--line-strong); overflow-wrap: anywhere;
}
.tabelle-fest th.name-zelle { z-index: 3; background: var(--surface-3); }
.tabelle-fest td a { display: inline-block; padding: 12px 0; }
.tabelle-fest td.name-zelle a { display: block; min-height: var(--tap); box-sizing: border-box; }
.tabelle-fest th a.th-sort { display: inline-flex; align-items: center; min-height: var(--tap); }
.tabelle-fest tbody tr:hover td.name-zelle { background: var(--surface-3); }
.tabelle-fest .gruppe-kopf td { background: var(--surface-1); position: static; box-shadow: none; }
.tabelle-fest td a.wikilink, .tabelle-fest td a { overflow-wrap: anywhere; }
.tabelle-fest .auswahl-box { float: left; margin: 10px var(--s-2) 0 0; width: 24px; height: 24px; }
.typ-tabelle td, .typ-tabelle th { min-width: 6rem; }
.typ-tabelle td.name-zelle, .typ-tabelle th.name-zelle { min-width: 9rem; }

/* --- Baum: Gruppen eingeklappt mit Zaehler -------------------------------------------------------- */
.baum-leiste { display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center; margin: 0 0 var(--s-3); }
.baum-leiste button { min-height: var(--tap); padding: 0 var(--s-4); }
.baum-gruppe { margin: 0 0 var(--s-2); border: 1px solid var(--line); border-radius: var(--r-3); background: var(--surface-2); }
.baum-kopf {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); min-height: var(--tap); padding: var(--s-2) var(--s-3);
  list-style: none; cursor: pointer;
}
.baum-kopf::-webkit-details-marker { display: none; }
.baum-kopf::before {
  content: ""; flex: none; width: 7px; height: 7px; border-right: 2px solid var(--fg-muted); border-bottom: 2px solid var(--fg-muted);
  transform: rotate(-45deg); transition: transform var(--dur) var(--ease);
}
.baum-gruppe[open] > .baum-kopf::before { transform: rotate(45deg); }
.baum-titel { flex: 1 1 10rem; min-width: 0; color: var(--fg-strong); font-weight: 600; overflow-wrap: anywhere; }
.baum-zaehler { color: var(--fg-muted); font-size: var(--fs-sm); font-variant-numeric: tabular-nums; white-space: nowrap; }
.baum-aktionen { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-3); align-items: center; padding: 0 var(--s-3) var(--s-2); }
.baum-aktionen a { display: inline-flex; align-items: center; min-height: var(--tap); color: var(--accent); font-size: var(--fs-ui); }
.baum-gruppe > .group-body { padding: 0 var(--s-2) var(--s-2); }
.baum-fuss { margin: var(--s-3) 0; }

/* --- Matrix: feste Namensspalte, Status-/Prioritaetschips ruhig -------------------------------------- */
.matrix-fest .styled-table td { white-space: normal; }
.matrix-fest .name-zelle { min-width: 10rem; max-width: 14rem; }
@media (max-width: 720px) {
  /* Am Handy bleibt neben dem Namen Platz fuer Status und Prioritaet. */
  .matrix-fest .name-zelle { min-width: 7.5rem; max-width: 9rem; }
  .matrix-fest td, .matrix-fest th { padding: var(--s-2); }
}

/* --- Board am Handy: eine Spalte, Reiter ------------------------------------------------------------ */
.board-reiter { display: none; }
@media (max-width: 720px) {
  .board-reiter { display: flex; gap: var(--s-2); margin: 0 0 var(--s-3); overflow-x: auto; scroll-snap-type: x proximity; }
  .board-reiter button {
    flex: none; display: inline-flex; align-items: center; gap: var(--s-2); min-height: var(--tap); padding: 0 var(--s-3);
    border: 1px solid var(--line-strong); border-radius: var(--r-full); background: transparent; color: var(--fg-muted); font-size: var(--fs-ui); cursor: pointer; scroll-snap-align: start;
  }
  .board-reiter button span { font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
  .board-reiter button.aktiv { background: var(--accent-soft); border-color: var(--accent-border); color: var(--fg-strong); font-weight: 600; }
  .dash-wrap .kanban-grid.board-js { display: block; overflow-x: visible; }
  .dash-wrap .kanban-grid.board-js .kanban-col { display: none; min-width: 0; width: 100%; }
  .dash-wrap .kanban-grid.board-js .kanban-col.board-aktiv { display: block; }
  .lz-link { align-items: start; gap: var(--s-2) var(--s-3); }
  .lz-datum { padding-top: 2px; font-size: var(--fs-micro); }
  .lz-icon { margin-top: 2px; }
  .mehr-fuss { gap: var(--s-3); }
  .mehr-oben { flex: 1 1 8rem; }
}

/* --- Dashboard-Werkzeugleiste: Suchwahl, weitere Eigenschaften ---------------------------------- */
.popover input[type="search"] { width: 100%; min-height: var(--tap); }
.popover-knoepfe { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.popover-knoepfe .nav-btn { display: inline-flex; align-items: center; justify-content: center; min-height: var(--tap); }
.prop-mehr { grid-column: 1 / -1; margin-top: var(--s-2); }
.prop-mehr > summary { display: flex; align-items: center; min-height: var(--tap); color: var(--fg-muted); cursor: pointer; }
.kopf-etikett { color: var(--fg-muted); font-size: var(--fs-ui); }
.ansicht-aktionen { display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center; }
.ansicht-aktionen form { display: flex; gap: var(--s-2); margin: 0; }
.ansicht-aktionen input[type="text"] { min-height: var(--tap); min-width: 10rem; }
.ansicht-aktionen .triage-btn { min-height: var(--tap); }
.object-heading .nav-btn, .view-heading > .nav-btn { display: inline-flex; align-items: center; min-height: var(--tap); }
@media (max-width: 720px) {
  /* Dashboard-Leiste: Chips und Felder als Beruehrflaeche von 44 px */
  .dash-wrap .fchip select { inset: -1px; width: calc(100% + 2px); height: calc(100% + 2px); }
  .dash-wrap .fchip, .dash-wrap .fchip-feld > summary, .dash-wrap .wl-suche, .dash-wrap .wl-anpassen > summary, .dash-wrap .seg span { min-height: var(--tap); }
}

/* Handy: Suchfeld und Knoepfe der Werkzeugleiste umbrechen, statt das Suchfeld auf 26 px zu quetschen (Valerie, Altlast-Entscheidungen) */
@media (max-width: 720px) {
  .liste-seite .wl-rechts { flex-wrap: wrap; }
  .liste-seite .wl-rechts > .wl-suche { flex: 1 1 100%; }
}

/* Desktop: Maus statt Finger, Namensspalte breiter, Zeilen ruhiger */
@media (min-width: 721px) {
  .liste-seite .wl-suche { max-width: 32rem; min-height: 36px; }
  .liste-seite .wl-anpassen > summary { min-height: 36px; }
  .tabelle-fest .name-zelle { min-width: 12rem; max-width: 26rem; }
  .tabelle-fest td, .tabelle-fest th { vertical-align: middle; }
  .tabelle-fest td a { padding: 6px 0; }
  .tabelle-fest td.name-zelle a { min-height: 32px; display: flex; align-items: center; }
  .tabelle-fest .auswahl-box { width: 16px; height: 16px; margin-top: 8px; }
  .lz-link { min-height: 52px; }
  .typ-chip { min-height: 36px; }
}
.tabelle-fest th .auswahl-box { float: none; margin: 0 var(--s-2) 0 0; vertical-align: middle; }

/* Auswahlmodus der Tabellen: Kaestchen nur im Modus, dunkel im dunklen Thema */
.typ-tabelle:not(.auswahl-an) .auswahl-box { display: none; }
.auswahl-modus {
  display: inline-flex; align-items: center; min-height: var(--tap); margin: 0 0 var(--s-2); padding: 0 var(--s-4);
  border: 1px solid var(--line-strong); border-radius: var(--r-2); background: var(--surface-2); color: var(--fg-strong); font-size: var(--fs-ui); cursor: pointer;
}
.auswahl-modus[aria-pressed="true"] { background: var(--accent-soft); border-color: var(--accent-border); }
:root:not([data-theme="light"]) .auswahl-box { color-scheme: dark; }
@media (min-width: 721px) { .auswahl-modus { min-height: 32px; } }
/* Die Sammelleiste am unteren Rand darf "Mehr laden" nicht verdecken */
body:has(.sammel-leiste:not([hidden])) main { padding-bottom: 9rem; }

/* Reiterzeile der Verwaltungsgruppen: die Breite der fetten Schrift ist reserviert, der aktive Reiter ist nicht breiter als die anderen */
.gruppenreiter .ansicht-tab { flex-direction: column; justify-content: center; }
.gruppenreiter .ansicht-tab::after { content: attr(data-text); height: 0; overflow: hidden; visibility: hidden; font-weight: 600; user-select: none; }
/* Board: mehr Karten und mehr Spalten auf einem Bildschirm, ohne kleiner zu schreiben (Register K48, K55, K58).
 *
 * Nur Tokens aus tokens.css. Die Karte selbst steht in app.css (Abschnitt "Karte"); hier stehen die Dichte "kompakt" (Standard
 * am Rechner), schmale leere Spalten, die einklappbare Spalte und die Zeile der ausgeblendeten Spalten. Am Handy und auf
 * Geraeten ohne Maus bleibt es bei der bequemen Karte (Zielgroesse 44 px, eine Spalte mit Reitern: listen.css, listen.js). */

/* --- Ausgeblendete Spalten: eine Zeile links neben Suche und Dichte, ein Klick blendet ein (Vorbild GitHub Projects, Linear) -- */
.board-versteckt { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); margin: 0 auto 0 0; font-size: var(--fs-sm); color: var(--fg-muted); }
.board-versteckt-link {
  display: inline-flex; align-items: center; gap: var(--s-1); min-height: 28px; padding: 0 var(--s-2);
  border: 1px solid var(--line-strong); border-radius: var(--r-full); color: var(--fg-muted); text-decoration: none;
}
.board-versteckt-link:hover { border-color: var(--accent-border); background: var(--surface-3); color: var(--fg-strong); }
.board-versteckt-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
/* die Werkzeuggruppe liegt immer rechtsbuendig und eine Zeile fuer sich: bricht „Anpassen“ um, bleibt es am rechten Rand und sein Fenster im Bild */
.wl-rechts:has(.board-versteckt) { flex: 1 1 100%; justify-content: flex-end; }
@media (max-width: 720px), (hover: none) {
  /* am Handy eine eigene Zeile ueber Suche und Dichte */
  .wl-rechts:has(.board-versteckt) { flex-wrap: wrap; }
  .board-versteckt { flex: 0 0 100%; order: -1; flex-wrap: nowrap; margin: 0; overflow-x: auto; scrollbar-width: none; }
  .board-versteckt > * { flex: none; }
  .board-versteckt-link { min-height: var(--tap); padding: 0 var(--s-3); }
}
/* Am Handy bleibt das Board eine Spalte mit Reitern (K55). Die Zeile der Werkzeugleiste fiele dort als eigene Zeile ins Gewicht (eine Karte weniger im ersten Bild);
   die ausgeblendeten Spalten (Später, Erledigt, Abgebrochen) stehen stattdessen mit Zähler in einer zweiten Zeile unter den Reitern. Die Dichte gibt es am Handy nicht. */
.board-reiter-zeile { display: none; }
@media (max-width: 720px) {
  .board-versteckt, .wl-rechts:has(.board-versteckt) .seg-gruppe[aria-label="Dichte"] { display: none; }
  .board-reiter-zeile { display: block; margin: 0 0 var(--s-3); }
  .board-reiter-zeile .board-reiter { margin: 0; }
  /* eine zweite Zeile, damit die ausgeblendeten Spalten ohne Rollen zu finden sind (die Reiterzeile selbst rollt waagerecht) */
  .board-reiter-mehr { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); margin: var(--s-2) 0 0; }
  /* ohne Symbol und mit schmalerem Rand passen Später, Erledigt und Abgebrochen in eine Zeile (390 px) */
  .board-reiter-mehr .st-sym { display: none; }
  .board-reiter-mehr .board-versteckt-link { padding: 0 var(--s-2); }
}

/* „+ Aufgabe“ im Spaltenkopf: das Wort ist ein eigenes Element (am Rechner ausgeblendet), sein Abstand kommt aus dem Rand, nicht aus einem Leerzeichen */
.group-add-wort { margin-left: var(--s-1); }

/* --- Einplanen: erscheint nur, solange eine Karte gezogen wird (kanban.js), und legt sich ueber den Spaltenkopf --------- */
.kanban-col[data-drop-column="next"] { position: relative; }
.plan-panel { display: none; }
.karte-zieht .plan-panel {
  position: absolute; top: 0; right: 0; left: 0; z-index: 3; display: block; padding: var(--s-2);
  background: var(--surface-2); border: 1px solid var(--accent-border); border-radius: var(--r-3); box-shadow: var(--shadow-pop);
}
.plan-panel p { margin: 0 0 var(--s-1); color: var(--fg-muted); font-size: var(--fs-sm); }
.plan-panel .backlog-tage { position: static; margin: 0; padding: 0; }
.backlog-tag .task-card { display: none; }   /* eine auf den Tag gezogene Karte ist eingeplant und verlaesst die Spalte */

/* Eingeklappt: die Karten verschwinden (die allgemeine Regel in app.css verliert gegen `.dash-wrap .kanban-col .group-body`) */
.dash-wrap .kanban-col.group-collapsed .group-body { display: none; }

/* --- Am Rechner: Spalten und Karten --------------------------------------------------------------------------------- */
@media (min-width: 721px) {
  /* Spaltenkopf (Bequem und Kompakt): im Ruhezustand steht nur das „+“ im Fluss (das Wort „Aufgabe“ steht im Tooltip und im aria-label), der Name gibt zuletzt
     nach (mit Auslassungspunkten und title); Knopf zum Einklappen und „+“ behalten ihre Breite. Am Handy gelten die 44 px aus app.css. */
  .dash-wrap .col-header { gap: var(--s-1); }
  .dash-wrap .col-header .group-toggle, .dash-wrap .col-header .col-aktionen { flex: none; }
  .dash-wrap .col-header h2 { flex: 0 1 auto; min-width: 5ch; overflow: hidden; text-overflow: ellipsis; }
  .dash-wrap .col-aktionen .group-add-wort { display: none; }
  .dash-wrap .col-aktionen .group-add { padding: 0; justify-content: center; font-size: var(--fs-md); }

  /* weniger Hoehe vor der ersten Karte */
  .dash-wrap:has(> .kanban-grid) .view-heading { margin-bottom: var(--s-1); }
  .dash-wrap:has(> .kanban-grid) .wl-huelle { margin-bottom: var(--s-2); }

  /* Spalten: leer schmal, eingeklappt ein Streifen (die Mindestbreite 230 px gilt nur in der kompakten Dichte, unten; die bequeme bleibt bei 250 px aus app.css) */
  .dash-wrap .kanban-grid { gap: var(--s-2); }
  .dash-wrap .kanban-grid > .kanban-col.kanban-col-leer { flex: 0 0 188px; min-width: 0; }
  /* Leere Spalte: der Kopf hat zwei Zeilen (Symbol und Name oben, Zaehler und Knoepfe darunter), so passt auch „Abgebrochen“ mit Zaehler und 44-px-Knoepfen hinein */
  .dash-wrap .kanban-col-leer:not(.group-collapsed) .col-header { flex-wrap: wrap; row-gap: var(--s-1); }
  .dash-wrap .kanban-col-leer:not(.group-collapsed) .col-header h2 { flex: 0 0 calc(100% - var(--s-5)); }
  .dash-wrap .kanban-grid > .kanban-col.kanban-col-leer .empty-state { padding: var(--s-2) 0; }
  /* eingeklappt: ein schmaler Streifen mit Status, Zaehler und senkrechter Beschriftung; Ablegen geht weiter */
  .dash-wrap .kanban-grid > .kanban-col.group-collapsed { flex: 0 0 var(--s-7); min-width: 0; }
  .dash-wrap .kanban-col.group-collapsed .col-header { flex-direction: column; min-height: 0; padding: var(--s-1) 0; gap: var(--s-2); }
  .dash-wrap .kanban-col.group-collapsed .col-header h2 { writing-mode: vertical-rl; }
  .dash-wrap .kanban-col.group-collapsed .col-aktionen { display: none; }
  .dash-wrap .kanban-col.group-collapsed .group-toggle { order: -1; }
}

/* Kompakt: nur mit Maus (hover: hover); iPad und Handy behalten die bequeme Karte */
@media (min-width: 721px) and (hover: hover) {
  .dash-wrap .col-header .group-toggle { min-width: 24px; }
  .dash-wrap .col-aktionen .group-add { width: 24px; }

  .dash-wrap .kanban-grid.density-compact > .kanban-col { padding: var(--s-1); }
  .dash-wrap .kanban-grid.density-compact > .kanban-col:not(.kanban-col-leer):not(.group-collapsed) { min-width: 230px; }   /* vier Spalten bei 1280 px, drei bei 1024 px */
  .dash-wrap .kanban-grid.density-compact .col-header { position: relative; min-height: 30px; margin: 0; }
  .dash-wrap .kanban-grid.density-compact .col-header .group-toggle { margin-left: auto; }
  .dash-wrap .kanban-grid.density-compact .col-header .group-toggle,
  .dash-wrap .kanban-grid.density-compact .col-aktionen .group-add { min-height: 24px; height: 24px; }
  /* Im Spaltenkopf steht am Rechner nur das Pluszeichen (der Name steht im aria-label); es hat festen Platz rechts neben dem Namen und deckt
     weder Namen noch Zaehler zu, auch bei der schmalsten Spalte. Am Handy steht „+ Aufgabe“ ausgeschrieben (app.css). */
  .dash-wrap .kanban-grid.density-compact .col-aktionen { margin-left: auto; }
  .dash-wrap .kanban-grid.density-compact .col-aktionen .group-add { width: 24px; justify-content: center; padding: 0; font-size: var(--fs-md); }
  .dash-wrap .kanban-grid.density-compact .col-aktionen .group-add-wort { display: none; }
  .dash-wrap .kanban-grid.density-compact .col-header .group-toggle { margin-left: 0; }
  .dash-wrap .kanban-grid.density-compact .kanban-col .group-body { gap: var(--s-1); }

  .dash-wrap .kanban-grid.density-compact .task-card {
    grid-template-columns: 24px minmax(0, 1fr); padding: var(--s-1) var(--s-2) var(--s-1) var(--s-1);
  }
  .dash-wrap .kanban-grid.density-compact .task-card { contain-intrinsic-size: auto 66px; }   /* Platzhalter ausserhalb des Bildes: so hoch ist eine kompakte Karte */
  .dash-wrap .kanban-grid.density-compact .task-card > .karte-symbol { width: 24px; height: 24px; margin: 0; }
  .dash-wrap .kanban-grid.density-compact .task-card > .card-title {
    font-size: var(--fs-ui); line-height: var(--lh-tight); -webkit-line-clamp: 2; padding: 0;
  }
  .dash-wrap .kanban-grid.density-compact .task-card > .card-meta { margin: 0; line-height: 1.4; }
  .dash-wrap .kanban-grid.density-compact .task-card .karte-datum { line-height: 1.4; }
  .dash-wrap .kanban-grid.density-compact .task-card .property-chip,
  .dash-wrap .kanban-grid.density-compact .task-card .meta-projekt { padding-block: 0; line-height: 1.3; }
  .dash-wrap .kanban-grid.density-compact .task-card > .card-next { margin: 0; }
  /* Titel und hoechstens zwei Chips (Projekt mit „+N“, Datum): die Zahl der Themen steht nur in der bequemen Karte. Passen beide Chips nicht
     nebeneinander, steht der zweite darunter (der Projektname bleibt lesbar); die Karte bleibt unter der Hoehe der bequemen. */
  .dash-wrap .kanban-grid.density-compact .task-card .meta-tags { display: none; }
  /* Hover-Leiste: 24-px-Knoepfe (WCAG 2.5.8), damit sie bei einzeiligem Titel nicht in die Chipzeile reicht (30 statt 34 px, oben bei -4 px) */
  .dash-wrap .kanban-grid.density-compact .task-card .karte-aktionen .karte-aktion { width: 24px; height: 24px; }
  /* Der KI-Marker ist kein dritter Chip: hat die Karte schon Projekt und Datum, bleibt er weg (er steht dann nur in der bequemen Karte) */
  .dash-wrap .kanban-grid.density-compact .task-card > .card-meta:has(.meta-projekt):has(.karte-datum) > .meta-ki { display: none; }
  /* der Projektname gibt nach (mit Auslassungspunkten), das Datum bleibt ganz */
  .dash-wrap .kanban-grid.density-compact .task-card .meta-projekt { min-width: 5ch; max-width: 16ch; }

  /* Ganz knapp (nur ueber alte Adressen): eine Zeile Titel */
  .dash-wrap .kanban-grid.density-ultracompact .task-card > .card-title { -webkit-line-clamp: 1; max-height: calc(var(--fs-base) * 1.4); }
}
/* Seitenueberlauf am Handy (UX-Audit 2026-10-17, Nr 72, 83, 88).
 *
 * Baby und Gebraucht laufen am Handy ueber den Rand (788 und 573 px bei 390 px
 * Fenster). Ihre Seiten sind in einer anderen Sitzung in Arbeit und werden hier
 * nicht angefasst; diese Datei laedt nach allen Seiten-CSS und bricht nur die
 * Zeilen um, die den Rand sprengen: Kopfzeile, Kennzahl-Kacheln, Bedienleiste.
 * Tabellen behalten ihren eigenen waagrechten Scrollbereich.
 */
@media (max-width: 720px) {
  .baby-app-shell, .baby-app-shell > *, .used-app, .used-app > * { min-width: 0; max-width: 100%; }

  /* Baby: Kopf, Kennzahlen und Fortschritt untereinander statt nebeneinander. */
  .baby-app-header { flex-wrap: wrap; gap: var(--s-3); }
  .baby-app-header > * { flex: 1 1 100%; min-width: 0; max-width: 100%; }
  .baby-stats-chips { grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; }
  .baby-chip-item { min-width: 0; }
  .baby-chip-k, .baby-chip-v { overflow-wrap: anywhere; }
  .baby-ssw-progress { width: 100%; }

  /* Gebraucht: Bedienleiste bricht um, Auswahlfelder bleiben im Fenster. */
  .used-controls { flex-wrap: wrap; }
  .used-controls > * { min-width: 0; max-width: 100%; }
  .used-controls-right { flex-wrap: wrap; width: 100%; }
  .used-control-group { flex: 1 1 100%; min-width: 0; }
  .used-select { max-width: 100%; min-width: 0; }
  .used-view-toggle { max-width: 100%; }
  .used-table-container { max-width: 100%; }

  /* Allgemein: Auswahlfelder in Filterleisten bleiben im Fenster (/zitate: 432 px). */
  .controls-bar { flex-wrap: wrap; }
  .controls-bar label { min-width: 0; max-width: 100%; }
  .controls-bar select, .controls-bar input[type="search"] { max-width: 100%; min-width: 0; }
}
/* =========================================================================
 * Grundlagen quer durch (UX-Audit 2026-10-17, Paket 3)
 *
 * Gilt fuer alle Seiten und kommt als letzte Datei. Vier Dinge:
 *   1. Seitenbreite: nichts weitet die Seite waagrecht (Nr 66, 88).
 *   2. Chips: umbrechen statt abschneiden (Nr 43, 58).
 *   3. Touchflaechen: 44 px am Handy (Nr 6).
 *   4. Unteres Polster, damit der schwebende Larry-Knopf nichts verdeckt (Nr 7).
 *
 * Nur Tokens aus tokens.css/theme.css, keine eigenen Farben. Seitenspezifisches
 * (Baby, Gebraucht, Abend) bleibt in den Dateien der jeweiligen Seite.
 * ========================================================================= */

/* --- 1. Seitenbreite ----------------------------------------------------- */

/* Netz unter allem: Was zu breit ist, wird an der Buehne abgeschnitten, die Seite
   scrollt nie waagrecht. `clip` (nicht `hidden`) macht keinen Scrollbereich auf,
   Sticky-Leisten innen funktionieren weiter. */
.app-stage, .app-shell { overflow-x: clip; }

img, video, canvas, iframe, object, embed { max-width: 100%; }
select, textarea,
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]) { max-width: 100%; }

/* Code-Bloecke scrollen in sich; Inline-Code (Hashes, Pfade, Adressen) bricht um. */
pre { max-width: 100%; overflow-x: auto; }
code, kbd, samp { overflow-wrap: anywhere; }
pre code, pre kbd, pre samp { overflow-wrap: normal; }

/* Lange Pfade, Adressen und Hashes in Zellen und Verweisen. */
td code, th code { overflow-wrap: anywhere; }
td, th, td a, th a, .wikilink, .property-row-value, .object-title { overflow-wrap: break-word; }

/* Fliesstext, Listen, Zitate und Callouts: ein sehr langes Wort ohne Umbruchstelle bricht am Rand um,
   statt ueber ihn zu laufen (390 px, "Krankenhausversorgungsverbesserungsgesetz"). Tabellen behalten
   break-word (oben), Codebloecke bleiben unberuehrt (pre code: normal). */
.prose p, .prose li, .prose blockquote, .prose dt, .prose dd, .prose summary,
.note-content p, .note-content li, .note-content blockquote,
.callout-content, .callout-content p, .callout-content li { overflow-wrap: anywhere; }

/* Tabellen ohne eigenen Scrollbereich bekommen am Handy einen. */
@media (max-width: 700px) {
  table:not(.table-scroll table):not(.table-wrap table) { display: block; max-width: 100%; overflow-x: auto; }
}

/* Gitter und Flexzeilen schrumpfen unter ihren Inhalt (sonst sprengt ein nowrap-Text die Seite). */
.postgang-zeile > * { min-width: 0; }
/* Beschriftete Auswahlfelder schrumpfen auf die Zeilenbreite (ein langer Optionstext sprengte /zitate). */
label { min-width: 0; max-width: 100%; }
label > select, label > input:not([type="checkbox"]):not([type="radio"]) { max-width: 100%; }

/* Handy. Kopf und Bedienleiste von Baby und Gebraucht bricht `ueberlauf.css` um (Sonderseiten-Paket). */
@media (max-width: 700px) {
  /* Postgang: Absender und Datum oben, der Betreff darunter in voller Breite (statt Wort fuer Wort in 38 px). */
  .postgang-zeile { grid-template-columns: minmax(0, 1fr) auto; }
  .postgang-zeile .postgang-datum { grid-column: 2; grid-row: 1; }
  .postgang-zeile .postgang-betreff { grid-column: 1 / -1; grid-row: 2; }
}

/* --- 2. Chips: Umbruch statt Abschneiden --------------------------------- */

/* Bis zur Spaltenbreite, bei Bedarf zwei und mehr Zeilen; der volle Text steht im `title`.
   Vorher: 24 Zeichen, dann abgeschnitten ("arztbrief_laborbe…"). */
.property-chip {
  white-space: normal;
  overflow-wrap: break-word;
  overflow: visible;
  max-width: min(100%, 36ch);
  -webkit-mask-image: none;
  mask-image: none;
  line-height: 1.3;
  text-align: left;
}
/* Reine Textchips (kein Symbol, keine Schaltflaeche): nach zwei Zeilen Auslassungspunkte. */
span.property-chip:not(.ghost):not(.status-chip):not([class*="prio-"]):not(:has(*)) {
  display: -webkit-inline-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
}
.property-chip.ghost, .property-chip.property-edit { overflow: hidden; }
@media (max-width: 460px) { .property-chip { max-width: min(100%, 28ch); } }

/* "Später" (backlog): --st-backlog erreicht auf dem hellen Chip nur 4,2:1; die Textfarbe nimmt --fg-muted (>= 4,5:1). */
.property-chip.status-backlog { color: var(--fg-muted); }

/* Listenzeilen und Titel: lange Namen brechen um und verdecken kein Datum. */
.task-card .card-title, .object-title, .object-card-title, .rs-titel,
.notes-group li > a > span, .note-liste li > a > span { overflow-wrap: anywhere; min-width: 0; }
.notes-group li > a, .note-liste li > a { gap: var(--s-2); }
.notes-group li > a > time, .note-liste li > a > time { flex: none; white-space: nowrap; }

/* --- 3. Touchflaechen: 44 px am Handy -------------------------------------- */

@media (pointer: coarse), (max-width: 700px) {
  /* Schaltflaechen, Auswahlfelder, Eingaben, Aufklapper, Reiter, Knopf-Links. */
  button:not(.property-chip):not(.larry-chat-toggle),
  summary, select,
  input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="range"]):not([type="file"]),
  a.nav-btn, a.btn-xs, a.chip-link, a.label-chip-link, a.raum-chip, a.triage-btn, a.used-tab, a.used-pill, a.used-toggle-btn, a.day-arrow, a.rv-tab {
    min-height: 44px;
  }
  /* Seitenreiter und Aufklapper: die Attribut-Auswahl hebt die Wertigkeit ueber Regeln wie `.note-toc summary`. */
  div.rv-tabs a.rv-tab, .rv-tabs button.rv-tab, details[class] > summary, details > summary { min-height: 44px; box-sizing: border-box; }
  /* Der Aufklapper behaelt sein Dreieck (`display: list-item`); die Hoehe kommt aus dem Polster, das jede Klassenregel uebersteuern darf. */
  details > summary { padding-block: 11px; }
  /* Nur Breite fuer Knoepfe ohne Text; `min-width` bei Textknoepfen wuerde das automatische Minimum in Flexzeilen ersetzen. */
  .group-toggle, .wert-weg, a.day-arrow { min-width: 44px; justify-content: center; }
  a.nav-btn, a.btn-xs, a.chip-link, a.label-chip-link, a.raum-chip, a.triage-btn, a.used-tab, a.used-pill, a.used-toggle-btn, a.day-arrow, a.rv-tab {
    display: inline-flex; align-items: center;
  }

  /* Chips mit Aktion: gleiche sichtbare Groesse, aber eine unsichtbare Trefferflaeche von mindestens 44 x 44 px. */
  button.property-chip:not(.ghost):not(.property-edit),
  a.property-chip:not(.ghost):not(.property-edit),
  a.label-chip-link, .karte-haken, .baby-todo-checkbox, .tbl-btn { position: relative; }
  button.property-chip:not(.ghost):not(.property-edit):not(.karte-symbol):not(.karte-aktion)::after,
  a.property-chip:not(.ghost):not(.property-edit):not(.karte-aktion)::after,
  .karte-haken::after, .baby-todo-checkbox::after, .tbl-btn::after {
    content: ""; position: absolute; left: 50%; top: 50%;
    width: max(100%, 44px); height: max(100%, 44px); transform: translate(-50%, -50%);
  }

  /* Auf Touchgeraeten sind leere Eigenschaften sichtbar (app.css `hover: none`): auch sie bekommen die Flaeche. */
  @media (hover: none) {
    .property-chip.ghost, .property-chip.property-edit { overflow: visible; position: relative; }
    .property-chip.ghost:not(.karte-aktion)::after, .property-chip.property-edit:not(.karte-aktion)::after {
      content: ""; position: absolute; left: 50%; top: 50%;
      width: max(100%, 44px); height: max(100%, 44px); transform: translate(-50%, -50%);
    }
  }

  /* Kaestchen: gross genug zum Treffen, das umgebende Label ist die Trefferflaeche. */
  input[type="checkbox"], input[type="radio"] { width: 24px; height: 24px; margin: 0 var(--s-2) 0 0; flex: none; }
  label:has(> input[type="checkbox"]), label:has(> input[type="radio"]), td.auswahl-spalte {
    min-height: 44px; display: inline-flex; align-items: center;
  }
  td.auswahl-spalte, th.auswahl-spalte { display: table-cell; vertical-align: middle; min-width: 44px; height: 44px; }
  .triage-btn { min-width: 44px; }
  .status-wahl, .filter-chip { min-height: 44px; }
}

/* --- 4. Larry-Knopf verdeckt nichts ---------------------------------------- */

/* Am Seitenende bleibt Platz fuer den schwebenden Knopf (2,8 rem hoch, 1,25 rem Abstand)
   und fuer die Home-Leiste: der letzte Eintrag laesst sich darueber hinaus scrollen. */
@media (max-width: 768px) {
  main { padding-bottom: calc(5.5rem + env(safe-area-inset-bottom, 0px)); }
}

/* Tonchips (Altlast-Audit K38): ersetzen die Altklassen `badge info|warning|danger|success|muted`, die kein CSS hatten.
   Die Farbe traegt nie allein, der Text sagt es. Hell-Modus mischt die Farbe zum Text, damit 4,5:1 erreicht wird. */
.property-chip.ton-info { color: var(--accent); background: var(--accent-soft); border-color: transparent; }
.property-chip.ton-warn { color: var(--warn); border-color: currentColor; }
.property-chip.ton-danger { color: var(--danger); border-color: currentColor; }
.property-chip.ton-ok { color: var(--ok); border-color: currentColor; }
.property-chip.ton-muted { color: var(--fg-muted); }
html[data-theme="light"] .property-chip.ton-warn { color: var(--text-warn); }
html[data-theme="light"] .property-chip.ton-danger { color: var(--text-danger); }
html[data-theme="light"] .property-chip.ton-ok { color: color-mix(in srgb, var(--ok) 45%, var(--fg-strong)); }

/* Lebensstatus von Wissensdokumenten (vault/lebensstatus.py): Zeichen und Wort, die Farbe kommt vom Tonchip dazu. */
.ls-chip { white-space: nowrap; }
.ls-zeichen { display: inline-block; min-width: 1.1em; margin-right: var(--s-1); font-size: var(--fs-ui); line-height: 1; text-align: center; }
/* Datumswahl in einem Schritt (ui/datumswahl.py, static/datumswahl.js).
 * Sichtbar ist nur der Text des Knopfes; das echte <input type="date"> liegt unsichtbar in voller Knopfgröße darüber,
 * damit ein Tippen am Handy direkt das Feld trifft. Fokus und Berührfläche gehören dem Knopf (44 px, WCAG 2.5.8 / Daumen). */

.dw {
  position: relative; display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box;
  min-height: var(--tap); min-width: var(--tap); padding: 0 var(--s-3);
  border: 1px solid var(--line); border-radius: var(--r-2);
  background: var(--surface-1); color: var(--fg-muted); font-size: var(--fs-sm); line-height: 1.2; white-space: nowrap;
  cursor: pointer; overflow: hidden;
}
.dw:hover { background: var(--surface-3); color: var(--fg-strong); border-color: var(--line-strong); }
.dw:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
.dw-gesetzt { color: var(--fg-strong); }
.dw-text { pointer-events: none; }

/* Das Feld deckt den ganzen Knopf; unsichtbar, aber nicht display:none (sonst trifft kein Tippen und kein Fokus). */
.dw-feld {
  position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; opacity: 0;
  cursor: pointer; font-size: 16px; /* 16 px verhindert den Zoom beim Fokus in iOS */ color-scheme: light dark;
}
.dw-feld::-webkit-calendar-picker-indicator { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; cursor: pointer; }
.dw-feld:focus-visible { outline: none; }
/* Datumschip (ui/datumschip.py, static/datumchip.js): Knopf mit unsichtbarem Datumsfeld darüber.
 * Das Feld liegt über dem sichtbaren Chip (Stil `.dw-feld` in datumswahl.css) und fängt Maus und Berührung; am Handy
 * ist es 44 px hoch (WCAG 2.5.8), ohne die Zeile zu verändern. */

.dw-chip { position: relative; display: inline-flex; align-items: center; gap: 2px; max-width: 100%; vertical-align: middle; }
.dw-chip > .property-chip { position: relative; }
.dw-chip > .dw-feld { z-index: 2; min-height: 0; }
.dw-chip:focus-within > .property-chip { outline: 2px solid var(--accent); outline-offset: 2px; }

/* "×": nur wenn ein Datum steht; Rechner zeigt es beim Zeigen/Fokus, Handy immer (kein Zeigen). */
.dw-leeren {
  position: relative; z-index: 3; flex: none; box-sizing: border-box; min-width: 20px; min-height: 20px; padding: 0 4px;
  border: 0; border-radius: var(--r-2); background: transparent; color: var(--fg-muted); font-size: var(--fs-sm); line-height: 1; cursor: pointer;
}
.dw-leeren:hover { background: var(--surface-3); color: var(--fg-strong); }
.dw-leeren:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
@media (hover: hover) and (pointer: fine) {
  .dw-chip:not(:hover):not(:focus-within) > .dw-leeren { opacity: 0; width: 0; min-width: 0; padding: 0; overflow: hidden; }
}

@media (pointer: coarse), (max-width: 700px) {
  .dw-chip > .dw-feld { top: 50%; bottom: auto; height: 44px; min-height: 44px; transform: translateY(-50%); }
  .dw-leeren { min-width: 44px; min-height: 44px; }
  .dw-chip > .property-chip::after { display: none; }
}

/* Meldung mit "Rückgängig" (static/rueckgaengig.js). */
.app-toast .toast-text { display: inline-block; margin-right: var(--s-3); vertical-align: middle; }
.app-toast .toast-zurueck {
  min-height: 32px; padding: 0 var(--s-3); border: 1px solid var(--line-strong); border-radius: var(--r-2);
  background: var(--surface-1); color: var(--fg-strong); font-weight: 600; cursor: pointer;
}
.app-toast .toast-zurueck:hover { background: var(--surface-3); }
.app-toast .toast-zurueck:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (pointer: coarse), (max-width: 700px) { .app-toast .toast-zurueck { min-height: 44px; min-width: 44px; } }
/* Tageschip: ein Datum im Text (`[[2026-10-24]]`) als umrandete, anklickbare Marke; Lesesicht und Blockeditor (Register K47, B4).
 * Farben nur über Tokens: Text und Rahmen --accent (hell 5,7 zu 1, dunkel 9 zu 1 gegen den Seitengrund), vergangene Tage
 * gedämpft (--fg-muted, Rahmen --fg-subtle). Der Chip steht in der Zeile; sein Ziel ist `/today?date=…`. */
a.tag-chip {
  display: inline-block; padding: 0 var(--s-2); border: 1px solid var(--accent); border-radius: var(--r-full);
  background: var(--accent-soft); color: var(--accent); font-size: var(--fs-base); line-height: 1.5; text-decoration: none; white-space: nowrap;
  vertical-align: baseline; cursor: pointer;
}
a.tag-chip:hover { background: var(--accent-border); }
a.tag-chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
a.tag-chip.tag-chip-vorbei { color: var(--fg-muted); border-color: var(--fg-subtle); background: transparent; }
a.tag-chip.tag-chip-vorbei:hover { background: var(--surface-3); }
@media (hover: none) and (pointer: coarse) { a.tag-chip { padding-block: var(--s-1); } }
@media print { a.tag-chip { border-color: currentColor; background: none; color: inherit; } }

/* Tagesseite: Verlinkte Seiten, Objekte mit diesem Datum, Typauswahl */
.tv { margin-top: var(--s-4); }
.tv-hinweis { margin: 0 0 var(--s-2); color: var(--fg-quiet); font-size: var(--fs-sm); }
.tv-seite { margin-bottom: var(--s-2); }
.tv-kontext { margin: 0 0 0 var(--s-6); color: var(--fg-muted); font-size: var(--fs-sm); overflow-wrap: anywhere; }
.tv-typen { display: flex; flex-wrap: wrap; gap: var(--s-2); margin: var(--s-2) 0 var(--s-3); }
.tv-chip {
  display: inline-flex; align-items: center; gap: var(--s-1); min-height: 32px; padding: 0 var(--s-3);
  border: 1px solid var(--line-strong); border-radius: var(--r-full); background: transparent; color: var(--fg-muted);
  font-size: var(--fs-base); text-decoration: none;
}
.tv-chip:hover { background: var(--surface-3); color: var(--fg); }
.tv-chip.an { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
.tv-chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.tv-zahl { font-variant-numeric: tabular-nums; opacity: 0.85; }
@media (max-width: 720px) { .tv-chip { min-height: 44px; } .tv-kontext { margin-left: 0; } }
/* `@`-Menü v2, Link-Fenster und Einfügezeile im Blockeditor (Register K47, B2/B7/B8). Nur Tokens. */

/* --- @-Menü ------------------------------------------------------------------------------------------------- */
.erw-menue {
  position: fixed; z-index: 92; width: min(460px, calc(100vw - 16px)); border: 1px solid var(--line-strong); border-radius: var(--r-3);
  background: var(--surface-2); box-shadow: var(--shadow-pop); color: var(--fg); overflow: hidden;
}
.erw-menue[hidden] { display: none; }
.erw-innen { display: flex; align-items: stretch; }
.erw-liste { flex: 1 1 auto; min-width: 0; max-height: 320px; margin: 0; padding: var(--s-1); list-style: none; overflow-y: auto; }
.erw-kopf { padding: var(--s-2) var(--s-3) var(--s-1); color: var(--fg-quiet); font-size: var(--fs-micro); letter-spacing: var(--tracking-label); text-transform: uppercase; }
.erw-zeile {
  display: flex; align-items: center; gap: var(--s-3); min-height: 36px; padding: 0 var(--s-3); border-left: 3px solid transparent;
  border-radius: var(--r-2); font-size: var(--fs-ui); cursor: pointer;
}
.erw-zeile[aria-selected="true"] { border-left-color: var(--accent); background: var(--accent-soft); color: var(--fg-strong); }
.erw-zeile:hover { background: var(--surface-3); }
.erw-haupt { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.erw-neben { flex: none; color: var(--fg-muted); font-size: var(--fs-sm); }
.erw-neu .erw-haupt { color: var(--accent); }
.erw-bild { flex: none; width: 28px; height: 28px; border-radius: var(--r-1); object-fit: cover; }
.erw-status { margin: 0; padding: 0 var(--s-3); color: var(--fg-muted); font-size: var(--fs-sm); }
.erw-status:not(:empty) { padding-block: var(--s-2); border-top: 1px solid var(--line); }
.erw-vorschau { flex: none; width: 190px; padding: var(--s-3); border-left: 1px solid var(--line); background: var(--surface-1); font-size: var(--fs-sm); overflow: hidden; }
.erw-vorschau[hidden] { display: none; }
.erw-v-typ { color: var(--fg-quiet); font-size: var(--fs-micro); letter-spacing: var(--tracking-label); text-transform: uppercase; }
.erw-v-titel { display: block; margin: var(--s-1) 0 var(--s-2); color: var(--fg-strong); }
.erw-v-feld { display: flex; justify-content: space-between; gap: var(--s-2); color: var(--fg-muted); }
.erw-v-wert { color: var(--fg); text-align: right; }
.erw-v-text { margin: var(--s-2) 0 0; color: var(--fg-muted); display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
/* Handy: Blatt über der Leiste, Zeilen mindestens 44 px, keine Vorschau */
.erw-blatt { width: auto; }
.erw-blatt .erw-liste { max-height: 40vh; }
.erw-blatt .erw-zeile { min-height: 44px; }
.erw-blatt .erw-vorschau { display: none; }

/* Datumschips unter dem Block, solange er zum Schreiben offen ist */
.blk-live { display: flex; flex-wrap: wrap; gap: var(--s-2); margin: var(--s-1) var(--s-1) 0; }
.blk-live[hidden] { display: none; }
.blk:not(.fokus) .blk-live { display: none; }

/* --- Link-Fenster ------------------------------------------------------------------------------------------------ */
.blk-lp {
  position: fixed; z-index: 96; width: min(360px, calc(100vw - 16px)); padding: var(--s-3); border: 1px solid var(--line-strong);
  border-radius: var(--r-3); background: var(--surface-2); box-shadow: var(--shadow-pop); color: var(--fg);
}
.blk-lp[hidden] { display: none; }
.blk-lp-titel { margin: 0 0 var(--s-2); color: var(--fg-strong); font-weight: 600; overflow-wrap: anywhere; }
.blk-lp-feld { display: block; margin-bottom: var(--s-2); color: var(--fg-muted); font-size: var(--fs-sm); }
.blk-lp-feld input {
  display: block; width: 100%; min-height: 36px; margin-top: var(--s-1); padding: 0 var(--s-2); border: 1px solid var(--line-strong);
  border-radius: var(--r-2); background: var(--surface-1); color: var(--fg); font: inherit; font-size: var(--fs-ui); box-sizing: border-box;
}
.blk-lp-feld input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.blk-lp-knoepfe { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-2); }
.blk-lp-knopf, .blk-lw .blk-lp-knopf {
  display: inline-flex; align-items: center; min-height: 36px; padding: 0 var(--s-3); border: 1px solid var(--line-strong); border-radius: var(--r-2);
  background: transparent; color: var(--fg); font: inherit; font-size: var(--fs-base); text-decoration: none; cursor: pointer;
}
.blk-lp-knopf:hover { background: var(--surface-3); }
.blk-lp-knopf:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.blk-lp-haupt { border-color: var(--accent); background: var(--accent); color: var(--on-accent); }
.blk-lp-haupt:hover { background: var(--accent); filter: brightness(1.08); }
.blk-lp-weg { color: var(--danger); }
.blk-lp-status { margin: var(--s-2) 0 0; color: var(--fg-muted); font-size: var(--fs-sm); }
.blk-lp-status:empty { display: none; }
.blk-lp-blatt { width: auto; border-radius: var(--r-3) var(--r-3) 0 0; border-width: 1px 0 0; }

/* --- Zeile nach dem Einfügen einer Adresse -------------------------------------------------------------- */
.blk-lw {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); margin: var(--s-1) var(--s-1) 0; padding: var(--s-1) var(--s-2);
  border: 1px solid var(--line-strong); border-radius: var(--r-2); background: var(--surface-1); font-size: var(--fs-sm);
}
.blk-lw-text { color: var(--fg-muted); }
a.blk-link-nackt { text-decoration: underline; }

@media (hover: none) and (pointer: coarse), (max-width: 720px) {
  .blk-lp-knopf, .blk-lw .blk-lp-knopf { min-height: 44px; }
  .blk-lp-feld input { min-height: 44px; font-size: var(--fs-lg); }
  .blk-lp { padding-bottom: calc(var(--s-3) + env(safe-area-inset-bottom, 0px)); }
}
/* Einzelwerte gelten sofort (static/sofort.js). */

/* Eigenschaftsdialog für Listenwerte: die Wahl gilt beim Antippen, es gibt kein "Speichern". */
.property-dialog-sofort .dialog-actions button[type="submit"] { display: none; }
.dialog-vorschlaege { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-2); }
.dialog-vorschlaege:empty { display: none; }
.dialog-vorschlag {
  border: 1px solid var(--line); border-radius: var(--r-2); background: var(--surface-1); color: var(--fg-strong);
  min-height: 32px; padding: 0 var(--s-3); text-align: left; cursor: pointer; max-width: 100%; overflow-wrap: anywhere;
}
.dialog-vorschlag:hover { background: var(--surface-3); border-color: var(--line-strong); }
.dialog-vorschlag:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (pointer: coarse), (max-width: 700px) { .dialog-vorschlag { min-height: 44px; } }

/* Ein Filter wird gleich angewendet (Haken-Gruppen): der Zeiger zeigt, dass etwas passiert. */
form.wird-angewendet { cursor: progress; }

/* Das "+" einer Eigenschaftszeile (Projekt, Schlagwort) ist immer sichtbar: ohne Hover, am Rechner wie am Handy. */
.property-row .wert-plus.ghost {
  opacity: 1; max-width: 24ch; padding-inline: var(--s-2); border-width: 1px; border-style: dashed; color: var(--fg-muted); overflow: visible;
}
.property-row .wert-plus.ghost:hover { color: var(--fg-strong); border-color: var(--line-strong); }

/* Projektfilter: die Liste der Projekte unter dem Suchfeld (static/sofort.js). */
.popover-wahlliste { display: flex; flex-direction: column; gap: 2px; margin-top: var(--s-2); max-height: 40vh; overflow-y: auto; }
.popover-wahlliste:empty { display: none; }
.popover-wahl {
  border: 0; border-radius: var(--r-2); background: transparent; color: var(--fg-strong); text-align: left;
  min-height: 32px; padding: 0 var(--s-3); cursor: pointer; overflow-wrap: anywhere;
}
.popover-wahl:hover { background: var(--surface-3); }
.popover-wahl:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
@media (pointer: coarse), (max-width: 700px) { .popover-wahl { min-height: 44px; } }
/* Eingabezeile „Anlegen in der Liste“ (Basics B1). Verhalten: static/zeile_neu.js, Markup des Auslösers: ui/zeile_neu.py.
   Nur Tokens. Am Handy (schmal oder ohne Hover) sind alle Flächen mindestens --tap hoch. */

.zn {
  box-sizing: border-box; width: 100%; display: flex; flex-direction: column; gap: var(--s-2);
  padding: var(--s-2); margin-block: var(--s-2);
  background: var(--surface-3); border: 1px solid var(--accent-border); border-radius: var(--r-2);
}
.zn-reihe { display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center; }
.zn-feld { flex: 1 1 12rem; min-width: 0; min-height: 36px; padding-inline: var(--s-2); font-size: var(--fs-ui); background: var(--surface-1); }
.zn-feld:focus-visible { outline: 2px solid var(--accent); outline-offset: 0; }
.zn-knoepfe { display: flex; gap: var(--s-2); align-items: center; flex-wrap: wrap; }
.zn-ok, .zn-mehr, .zn-zu {
  display: inline-flex; align-items: center; justify-content: center; min-height: 36px; min-width: 36px;
  padding-inline: var(--s-3); font-size: var(--fs-base); border-radius: var(--r-2); white-space: nowrap;
}
.zn-ok { background: var(--accent); color: var(--on-accent); border: 1px solid transparent; font-weight: 600; cursor: pointer; }
.zn-ok:hover:not(:disabled) { filter: brightness(1.08); }
.zn-ok:disabled { opacity: 0.6; cursor: progress; }
.zn-mehr { color: var(--fg); background: transparent; border: 1px solid var(--line-strong); text-decoration: none; }
.zn-mehr:hover { background: var(--surface-4); }
.zn-zu { background: transparent; border: 1px solid transparent; color: var(--fg-muted); cursor: pointer; font-size: var(--fs-lg); }
.zn-zu:hover { background: var(--surface-4); color: var(--fg-strong); }
.zn-ok:focus-visible, .zn-mehr:focus-visible, .zn-zu:focus-visible, .zn-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.zn-kontext, .zn-meldung { margin: 0; font-size: var(--fs-sm); color: var(--fg-muted); overflow-wrap: anywhere; }
.zn-meldung:not([hidden]) { display: flex; flex-wrap: wrap; align-items: center; column-gap: var(--s-2); }
.zn-meldung.zn-fehler { color: var(--text-danger); font-weight: 600; }
/* Der Link „Öffnen“ in der Meldung ist überall mindestens 44 x 44 px groß (L5), am Rechner wie am Handy. */
.zn-link { display: inline-flex; align-items: center; justify-content: center; min-width: var(--tap); min-height: var(--tap); color: var(--accent); text-decoration: underline; text-underline-offset: 2px; background: transparent; border: 0; padding-inline: 0; font: inherit; cursor: pointer; }

/* Die frisch angelegte Karte hebt sich kurz ab (Rahmen, nicht nur Farbe). */
.zn-neu { outline: 2px solid var(--accent); outline-offset: -2px; animation: zn-neu-aus 2.4s var(--ease) forwards; }
@keyframes zn-neu-aus { 0%, 70% { outline-color: var(--accent); } 100% { outline-color: transparent; } }
@media (prefers-reduced-motion: reduce) { .zn-neu { animation: none; } }

/* Handy und Touchgeräte: Flächen von mindestens 44 px. */
@media (max-width: 720px), (hover: none) {
  .zn-feld, .zn-ok, .zn-mehr, .zn-zu { min-height: var(--tap); }
  .zn-zu { min-width: var(--tap); }
  .zn-feld { font-size: var(--fs-lg); }
}
/* Wert direkt ändern (Basics B3): Projektwahl am Chip und Trefferflächen der Meta-Chips am Handy.
   Verhalten: static/chipwahl.js. Das Menü selbst (.chip-menu) steht in app.css. Nur Tokens. */

.chip-wahl { width: var(--menu-breite, 14rem); box-sizing: border-box; gap: var(--s-1); }
.chip-wahl-feld { width: 100%; box-sizing: border-box; min-height: 32px; padding-inline: var(--s-2); font-size: var(--fs-ui); }
.chip-wahl-feld:focus-visible { outline: 2px solid var(--accent); outline-offset: 0; }
.chip-wahl-kopf, .chip-wahl-liste { display: grid; gap: var(--s-1); }
.chip-wahl-liste { max-height: 50vh; overflow-y: auto; overscroll-behavior: contain; }
.chip-wahl-leer { margin: 0; padding: var(--s-2); color: var(--fg-muted); font-size: var(--fs-sm); }
.chip-menu-item.chip-wahl-oeffnen { color: var(--accent); }

/* Handy: Eintraege und Suchfeld 44 px (die Eintraege bekommen sie schon aus grundlagen.css). Der Projekt-Chip wird durch einen
   durchsichtigen Rand 44 px hoch: der Rand zaehlt zur Trefferflaeche, der sichtbare Chip bleibt die Flaeche innen, den Ring
   zeichnet der innere Schatten (ein Pseudoelement waere vom `overflow: hidden` des Chips abgeschnitten). */
@media (max-width: 720px), (hover: none) {
  /* Am Handy ist jedes Chip-Menue ein Blatt am unteren Rand (suche.css): die Breite kommt von dort. */
  .chip-wahl { width: auto; }
  .chip-wahl-feld { min-height: var(--tap); font-size: var(--fs-lg); }
  .dash-wrap .meta-projekt {
    box-sizing: border-box; min-height: var(--tap); border-color: transparent; border-block-width: var(--s-2);
    background-clip: padding-box; box-shadow: inset 0 0 0 1px var(--relation-border);
  }
  .dash-wrap .meta-projekt:hover { border-color: transparent; box-shadow: inset 0 0 0 1px var(--text-relation); }
  /* Der Chip „Hoch“ ebenso (sein `::after` aus grundlagen.css schnitte `overflow: hidden` ab, die Flaeche bliebe 36 px). */
  .dash-wrap .card-meta .karte-prio {
    box-sizing: border-box; min-height: var(--tap); border-color: transparent; border-block-width: var(--s-2);
    background-clip: padding-box; box-shadow: inset 0 0 0 1px var(--line-strong);
  }
}

/* Rechner (Zeiger): die Schnellleiste erscheint beim Ueberfahren der Karte und nimmt dort Klicks an. Kein Chip darf unter einem
   Leistenknopf liegen: ein Klick auf den sichtbaren Chip „Hoch“ traf sonst den Haken und erledigte die Aufgabe (F3).
   Board und Heute: die Leiste sitzt in der oberen rechten Ecke und ragt ueber die Kartenkante (nur ueber Rand und Titelzeile, nie
   ueber die Meta-Zeile), die Karte behaelt ihre Hoehe aus Release 6. Vorher hielt `padding-inline-end` der Meta-Zeile 128 px frei,
   und jeder Chip brach in eine eigene Zeile (Karten 40 bis 76 px hoeher, H1).
   Liste und Baum: die Leiste liegt rechts mittig, die Zeile laesst ihr Platz (die Chips stehen dort rechts). */
@media (hover: hover) and (pointer: fine) {
  .dash-wrap .task-card > .karte-aktionen { top: calc(var(--s-1) * -1); bottom: auto; }
  .dash-wrap .list-group .task-card > .karte-aktionen, .dash-wrap .tree-node .task-card > .karte-aktionen { top: 50%; bottom: auto; }
  .dash-wrap .list-group .task-card, .dash-wrap .tree-node .task-card { padding-inline-end: calc(var(--s-6) * 4 + var(--s-1)); }
  /* Der Chip „Hoch“ stand auf fast jeder Karte und machte sie im schmalen Board eine Zeile hoeher (Release 6: nur der Rand links).
     Am Rechner bietet die Schnellleiste „Prioritaet aendern“; der Rand zeigt „hoch“ weiter. Am Handy und in Listen bleibt der Chip. */
  .dash-wrap .kanban-col .task-card .karte-prio-standard { display: none; }
}
/* Eigenschaften-Anzeige (Basics B2): der leere Platzhalter-Chip und die Einstellung je Typ auf /typen.
   Verhalten und Regeln: vault/anzeigeregeln.py. Nur Tokens. */

/* --- Leerer Platzhalter -------------------------------------------------------------------------------------------
   Eine leere Eigenschaft mit der Stufe „Immer“ ist ein blasser, umrandeter Chip mit dem Feldnamen in Grau („Frist …“).
   Er trägt `ghost` (das Skript schaltet die Klasse beim Füllen und Leeren um) und `data-leer` (der Text) und ist immer
   sichtbar, auch ohne Überfahren: Die Regel aus app.css, die leere Chips erst beim Überfahren zeigt, gilt für alle übrigen.
   Text `--fg-muted` (>= 4,5:1), Rand `--feld-rand` (>= 3:1), kein Füllton. */
.property-chip.ghost[data-leer] {
  opacity: 1; max-width: min(100%, 28ch); padding-inline: var(--s-2);
  border-width: 1px; border-style: dashed; border-color: var(--feld-rand);
  background: transparent; color: var(--fg-muted);
}
.property-chip.ghost[data-leer]:hover,
.property-chip.ghost[data-leer]:focus-visible { color: var(--fg-strong); border-color: var(--fg-muted); }
/* Pflichtfeld: gelb umrandet, durchgezogen. */
.property-chip.ghost[data-leer][data-pflicht] { border-style: solid; border-color: var(--pflicht-rand); }
/* Im Kopf steht der Feldname schon im Platzhalter; die Beschriftung davor erscheint erst, wenn ein Wert drinsteht. */
.kopf-feld:has(.property-chip.ghost[data-leer]) > .kopf-label { display: none; }

/* --- Einstellung auf /typen ----------------------------------------------------------------------------------------- */
.anz-karte { margin-block: var(--s-4); }
.anz-typen { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); margin-block: var(--s-3); }
.anz-anderer select { min-width: 11rem; }
/* Typ-Reiter (L2): auch der inaktive Reiter ist mindestens 44 px breit und hoch und als Reiter erkennbar (Rand). */
.anz-typen .filter-chip {
  display: inline-flex; align-items: center; justify-content: center; min-width: var(--tap); min-height: var(--tap);
  padding-inline: var(--s-3); border: 1px solid var(--feld-rand); border-radius: var(--r-full);
}
.anz-typen .filter-chip.aktiv { border-color: var(--accent); }
.anz-form { display: grid; }
.anz-zeile {
  display: grid; grid-template-columns: minmax(7rem, 1fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--s-2) var(--s-3); align-items: end; padding-block: var(--s-3); border-top: 1px solid var(--line);
}
.anz-name { font-weight: 600; color: var(--fg-strong); align-self: center; }
.anz-wahl { display: grid; gap: var(--s-1); min-width: 0; font-size: var(--fs-sm); color: var(--fg-muted); }
.anz-wahl select { width: 100%; min-width: 0; }
.anz-status { grid-column: 1 / -1; min-height: 0; font-size: var(--fs-sm); color: var(--fg-muted); }
.anz-status:empty { display: none; }
.anz-status.anz-fehler { color: color-mix(in srgb, var(--danger) 88%, var(--fg-strong)); font-weight: 600; }
.anz-fest { display: flex; align-items: center; min-height: var(--tap); font-size: var(--fs-base); color: var(--fg-muted); }
@media (max-width: 720px) {
  .anz-zeile { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .anz-name { grid-column: 1 / -1; }
}
/* Zugaenglichkeit, zentral: Zielgroessen (WCAG 2.5.8 und Projektvorgabe 44 px), Platzhalterfarbe (1.4.3), Sprunglink (2.4.1).
 * Eine Regel hier ersetzt Einzelstellen je Seite. Seitenspezifische Dateien duerfen Groessen weiter setzen, aber nicht unter
 * diese Mindestwerte gehen. Farben nur ueber Tokens, damit hell und dunkel mitlaufen. */

/* --- Sprunglink: erster Tab-Stopp, sichtbar nur im Fokus -------------------------------------------------------- */
.skip-link {
  position: fixed; left: var(--s-3); top: var(--s-3); z-index: 2000;
  transform: translateY(-300%); transition: none;
  padding: var(--s-2) var(--s-4); min-height: var(--tap); display: inline-flex; align-items: center;
  background: var(--accent); color: var(--on-accent); border-radius: var(--r-2);
  font-weight: 600; text-decoration: none;
}
.skip-link:focus, .skip-link:focus-visible { transform: none; outline: 2px solid var(--fg-strong); outline-offset: 2px; }
#inhalt:focus { outline: none; }

/* --- Fokus bleibt sichtbar: feste Kopfzeile oben (53 px) und Larry-Knopf unten verdecken sonst fokussierte Elemente (2.4.11) ----------- */
html { scroll-padding-top: 64px; scroll-padding-bottom: 88px; }
/* Am Seitenende bliebe sonst kein Platz, das letzte Element ueber den Larry-Knopf zu schieben. */
main { padding-bottom: calc(var(--s-4) + 72px); }

/* --- Nur fuer Screenreader (Ansagen per aria-live) ----------------------------------------------------------------- */
.vh { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

/* --- Platzhalter: der Browser-Standard #757575 liegt auf Feldflaechen bei 3,8 zu 1 --------------------------------- */
input::placeholder, textarea::placeholder { color: var(--fg-quiet); opacity: 1; }

/* --- Feldgrenze: der Rahmen von Eingabefeldern liegt bei 3:1 gegen den Untergrund (1.4.11, vorher 1,2:1); !important, weil Seiten-CSS
 * (.wl-suche, .search-form input ...) eigene Rahmenfarben setzt. Felder mit Rahmenbreite 0 bleiben ohne Rahmen. ---------------------------- */
:root { --feld-rand: color-mix(in srgb, var(--fg-subtle) 80%, var(--bg)); }
input:not([type="checkbox"], [type="radio"], [type="range"], [type="hidden"], [type="file"], [type="color"], [type="submit"], [type="button"]),
select, textarea { border-color: var(--feld-rand) !important; }
input:not([type="checkbox"], [type="radio"], [type="range"], [type="hidden"], [type="file"], [type="color"], [type="submit"], [type="button"]):hover,
select:hover, textarea:hover { border-color: var(--feld-rand) !important; }

/* Dateiwahl: der Rand gehoert zum Feld (gemessen 1,3 zu 1 mit der Haarlinie, /upload und Erfassen) */
input[type="file"] { border-color: var(--feld-rand); }

/* --- Zielgroesse mindestens 24 px (2.5.8), ueberall ---------------------------------------------------------------- */
.property-chip, .btn-hitl, .btn-xs, a.group-add, .meta-projekt, a.object-title, .task-card > a.wikilink, .rs-titel, .backlog-zeile a, .tree-header > a.wikilink, .backlog-gruppe > summary, .card-title, .filter-chip { min-height: 24px; }
.backlog-zeile a { display: block; }
a.btn-xs, a.group-add { display: inline-flex; align-items: center; }
.task-card > a.wikilink { -webkit-box-align: center; }
.object-title { display: block; line-height: 24px; }
.hitl-titel a.wikilink { display: inline-flex; align-items: center; min-height: 24px; }
a.verweis-titel, .ep-vorschau-fuss a { display: inline-flex; align-items: center; min-height: 24px; }
a.verweis-titel { display: flex; }
/* Spaltenkoepfe zum Sortieren (/auftraege): Link mindestens 24 px hoch, kurzer Titel mindestens 24 px breit (QA M-6, 2.5.8) */
a.spalten-sortierung { display: inline-flex; align-items: center; min-height: 24px; }
.task-card > a.wikilink, .k-titel > a.wikilink { min-width: 24px; }
/* Knoepfe und Dateiwahl-Kaestchen, die der Prueflauf unter 24 px fand */
.triage-btn, .tbl-btn, .blk-lang, td.hk-feld button, th > a.sortlink { min-height: 24px; }
.tbl-btn { min-width: 24px; }
input.hk-auf { width: 24px; height: 24px; }

/* --- Beruehrung: Titelzeilen und Knoepfe 44 px, Chips 36 px mit Zeilenabstand 8 px ------------------------------- */
@media (hover: none) and (pointer: coarse), (max-width: 700px) {
  a.spalten-sortierung, .task-card > a.wikilink, .k-titel > a.wikilink { min-height: var(--tap); min-width: var(--tap); }
  .task-card > a.wikilink, a.object-title, a.group-add, .btn-xs, .nav-btn, summary.today-group-head { min-height: var(--tap); }
  a.nav-btn, .day-arrow { display: inline-flex; align-items: center; justify-content: center; }
  .day-arrow { min-width: 36px; }
  a.verweis-titel, .ep-vorschau-fuss a { min-height: var(--tap); }
  .backlog-zeile a, .tree-header > a.wikilink, .backlog-gruppe > summary { min-height: var(--tap); display: flex; align-items: center; }
  .filter-chip, .status-wahl { min-height: var(--tap); }
  .tree-header > a.wikilink { display: inline-flex; }
  .rs-seite .rs-titel { display: flex; align-items: center; min-height: var(--tap); }
  .vorrat-zeile .wikilink { padding-block: var(--s-3); }
  main select, main input:is([type="text"], [type="search"], [type="date"], [type="time"], [type="number"], [type="email"], [type="url"]),
  main form button, .tages-reiter button, .az-zeile button, .az-check { min-height: var(--tap); }
  .az-check { display: flex; align-items: center; gap: var(--s-2); }
  a.object-title { line-height: var(--tap); }
  .property-chip { min-height: 36px; }
  /* Links, die als Zeile oder Spaltenkopf bedient werden: eigene Zeile von 44 px (Prueflauf 2026-10-18) */
  .hitl-titel a.wikilink, a.rv-titel, a.tbl-ext-link, a.anhang-direkt, td.k-offen > a.wikilink, td.triage-titel > a,
  th > a.sortlink, th > a.th-sort, h1 > a.titel-link, .seg-gruppe a.seg { display: inline-flex; align-items: center; min-height: var(--tap); }
  a.rv-titel { display: flex; }
  a.anhang-direkt, td.k-offen > a.wikilink, th > a.sortlink, th > a.th-sort, .seg-gruppe .seg, a.nav-btn, .span-all > button,
  .bk-reihe button { min-width: var(--tap); justify-content: center; }
  .object-list > a.object-row, label.rv-wahl > select { min-height: var(--tap); }
  .card-meta, .card-props, .task-props { row-gap: var(--s-2); }
  /* Haken: der Knopf ist 44 px gross, der gezeichnete Kreis bleibt 26 px */
  .task-card > .karte-haken {
    position: relative; width: var(--tap); height: var(--tap); margin: -9px -9px -9px var(--s-1);
    border-color: transparent; background: transparent;
  }
  .task-card > .karte-haken::before {
    content: ""; position: absolute; inset: 9px; border: 1px solid var(--line); border-radius: var(--r-full);
  }
  .task-card > .karte-haken:hover::before { border-color: var(--st-done); }
}

/* Aufgaben im Text ("- [ ]"): das Kaestchen ist 24 px gross, sonst liegt es mit dem Statuschip im 12-px-Kreis des anderen. */
li.todo > input[type="checkbox"] { width: 24px; height: 24px; margin: 0 var(--s-2) 0 0; vertical-align: middle; accent-color: var(--accent); }

/* Tabelle in der gestapelten Handyansicht: ohne Spaltenkopf traegt das Etikett (data-label) die Bedeutung der Zelle (1.3.1). */
@media (max-width: 700px) {
  .triage-tabelle td[data-label]::before { content: attr(data-label) ": "; font-weight: 600; color: var(--fg-muted); }
  .triage-tabelle td.steuerung[data-label]::before { display: block; margin-bottom: var(--s-1); }
}

/* Bereichsseiten (Haus, Arbeit): der Titel ist die h1 der Seite, sieht aber aus wie die Kartenueberschriften (QA N-16) */
.card h1.bereich-titel { margin: 0 0 var(--s-3); font-size: var(--fs-lg); font-weight: 600; color: var(--fg-strong); }
/* Entwicklung (KI-Bereich): Stand und Linie, Board der Arbeitspakete, Entscheidungen. Nur Tokens, kein Hexwert (Ratsche).
 *
 * Breite: ab 1025 px stehen die Spalten des Boards nebeneinander; bis 1024 px zeigt das Board eine Spalte und darüber eine
 * Reiterzeile (Skript `entwicklung.js`; ohne Skript stehen die Spalten untereinander). Zielgrößen am Handy mindestens --tap.
 * Die Karte ist so kompakt wie die des Aufgaben-Boards: Titel, höchstens zwei Chips, eine Zeile Verantwortlicher und Alter. */

.ent { min-width: 0; }
.ent-abschnitt { margin: 0 0 var(--s-6); scroll-margin-top: var(--s-5); }
.ent h2 {
  display: flex; align-items: center; gap: var(--s-2); margin: 0 0 var(--s-2);
  font-size: var(--fs-lg); font-weight: 600; color: var(--fg-strong);
}
.ent h3 { margin: 0; font-size: var(--fs-md); font-weight: 600; color: var(--fg-strong); }
.ent .ent-unter { margin: var(--s-4) 0 var(--s-2); font-size: var(--fs-base); color: var(--fg-muted); text-transform: uppercase; letter-spacing: var(--tracking-label); }
.ent-lead { margin: 0 0 var(--s-3); max-width: var(--measure-prose); color: var(--fg-muted); font-size: var(--fs-ui); }
.ent-leer { margin: 0; padding: var(--s-3) 0; color: var(--fg-subtle); font-size: var(--fs-ui); }
.ent-hinweis { margin: var(--s-3) 0 0; max-width: var(--measure-prose); color: var(--fg-muted); font-size: var(--fs-ui); }
.ent-etikett { color: var(--fg-subtle); font-size: var(--fs-micro); font-weight: 600; text-transform: uppercase; letter-spacing: var(--tracking-label); }
.ent-link { color: var(--accent); }
.ent-zahl {
  display: inline-flex; align-items: center; justify-content: center; min-width: var(--s-5); padding: 0 var(--s-2);
  border-radius: var(--r-full); background: var(--surface-3); color: var(--fg-muted);
  font-size: var(--fs-sm); font-weight: 600; font-variant-numeric: tabular-nums;
}

/* --- Auf einen Blick -------------------------------------------------------------------------------------------- */
.ent-blick { margin: 0 0 var(--s-4); }
.ent-blick-zellen { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: var(--s-2); }
.ent-blick-zelle {
  display: flex; flex-direction: column; justify-content: center; gap: var(--s-1); min-height: var(--tap); padding: var(--s-3);
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-3); color: var(--fg-muted); text-decoration: none;
}
.ent-blick-zelle:hover { border-color: var(--line-strong); }
.ent-blick-hervor { background: var(--accent-soft); border-color: var(--accent-border); }
.ent-blick-zahl { color: var(--fg-strong); font-size: var(--fs-xl); font-weight: 600; font-variant-numeric: tabular-nums; line-height: var(--lh-tight); }
.ent-blick-text { font-size: var(--fs-base); }
.ent-schritt { margin: var(--s-3) 0 0; font-size: var(--fs-md); color: var(--fg); }
.ent-schritt .ent-etikett { margin-right: var(--s-2); }
.ent-fortschritt { display: flex; align-items: center; gap: var(--s-2); margin: var(--s-2) 0 0; color: var(--fg-muted); font-size: var(--fs-base); }

.ent-sprung { display: flex; gap: var(--s-2); margin: 0 0 var(--s-5); overflow-x: auto; scrollbar-width: none; }
.ent-sprung-link {
  flex: none; display: inline-flex; align-items: center; min-height: var(--tap); padding: 0 var(--s-3);
  border: 1px solid var(--line-strong); border-radius: var(--r-full); color: var(--fg-muted); font-size: var(--fs-ui); text-decoration: none;
}
.ent-sprung-link:hover { color: var(--fg-strong); }

/* --- Ziele und Linie -------------------------------------------------------------------------------------------- */
.ent-ziele { margin: 0; padding-left: var(--s-5); display: grid; gap: var(--s-2); max-width: var(--measure-prose); color: var(--fg-muted); font-size: var(--fs-md); }
.ent-ziele strong { color: var(--fg-strong); font-weight: 600; }
.ent-linie { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr)); gap: var(--s-2); }
.ent-stufe {
  display: grid; grid-template-columns: auto 1fr; gap: var(--s-3); align-items: start; padding: var(--s-3);
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-3);
}
.ent-stufe-laeuft { border-color: var(--accent-border); background: var(--accent-soft); }
.ent-stufe-erledigt { background: var(--surface-1); box-shadow: inset 3px 0 0 var(--st-done); } /* abgehoben über Fläche und Rand, nie über opacity (Kontrast) */
.ent-nr {
  display: inline-flex; align-items: center; justify-content: center; width: var(--s-5); height: var(--s-5);
  border-radius: var(--r-full); background: var(--surface-4); color: var(--fg-strong); font-size: var(--fs-sm); font-weight: 600; font-variant-numeric: tabular-nums;
}
.ent-stufe-koerper { min-width: 0; }
.ent-stufe-titel { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); margin: 0; color: var(--fg-strong); font-size: var(--fs-md); font-weight: 600; overflow-wrap: anywhere; }
.ent-stufe-text { margin: var(--s-1) 0 0; color: var(--fg-muted); font-size: var(--fs-ui); overflow-wrap: anywhere; }
.ent-straenge { margin: var(--s-4) 0 0; }
.ent-straenge > summary { display: flex; align-items: center; min-height: var(--tap); color: var(--accent); font-size: var(--fs-ui); cursor: pointer; }
.ent-straenge ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2); }
.ent-straenge li { display: grid; gap: var(--s-1); padding: var(--s-3); background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-3); font-size: var(--fs-ui); color: var(--fg-muted); overflow-wrap: anywhere; }
.ent-straenge li strong { color: var(--fg-strong); }
.ent-wartet { color: var(--fg-muted); }
.ent-quelle { margin: var(--s-3) 0 0; font-size: var(--fs-ui); }

/* --- Board ------------------------------------------------------------------------------------------------------ */
.ent-reiter { display: none; }
.ent-board { display: grid; gap: var(--s-3); }
.ent-spalte { min-width: 0; padding: var(--s-2); background: var(--surface-1); border: 1px solid var(--line); border-radius: var(--r-3); }
.ent-spalte-kopf { display: flex; align-items: center; gap: var(--s-2); min-height: var(--s-6); padding: 0 var(--s-1); }
.ent-spalte-text { margin: 0 0 var(--s-2); padding: 0 var(--s-1); color: var(--fg-subtle); font-size: var(--fs-sm); }
.ent-karten { display: flex; flex-direction: column; gap: var(--s-2); }
.ent-mehr { margin: var(--s-2) 0 0; padding: 0 var(--s-1); color: var(--fg-muted); font-size: var(--fs-ui); }
.ent-mehr a { display: inline-flex; align-items: center; min-height: var(--tap); }
.ent-karte { min-width: 0; padding: var(--s-2) var(--s-3); background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-2); }
.ent-karte:hover { border-color: var(--line-strong); }
.ent-titel { display: flex; align-items: center; min-height: var(--s-5); color: var(--fg); font-size: var(--fs-base); font-weight: 500; line-height: var(--lh-tight); text-decoration: none; }
.ent-titel span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.ent-titel:hover span { text-decoration: underline; text-decoration-color: var(--line-strong); }
.ent-chips { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--s-1); margin-top: var(--s-1); }
.ent-marke { color: var(--fg-muted); }
.ent-meta { margin: var(--s-1) 0 0; color: var(--fg-subtle); font-size: var(--fs-sm); overflow-wrap: anywhere; }
.ent-chips .prio-high::before { margin-right: var(--s-1); }

@media (min-width: 1025px) {
  /* Spalten laufen in Reihen um, wenn die Breite nicht für alle reicht (kein Abschneiden, kein Seitwärtsrollen, keine neue Grenze):
     bei 1440 px stehen fünf nebeneinander, bei 1100 px drei, Abgebrochen und Unklar (nur mit Karten) kommen danach. */
  .ent-board { grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); align-items: start; }
}
@media (max-width: 1024px) {
  .ent-reiter { display: none; }
  .ent-js .ent-reiter { display: flex; gap: var(--s-2); margin: 0 0 var(--s-3); overflow-x: auto; scrollbar-width: none; }
  .ent-tab {
    flex: none; display: inline-flex; align-items: center; gap: var(--s-2); min-height: var(--tap); padding: 0 var(--s-3);
    border: 1px solid var(--line-strong); border-radius: var(--r-full); background: transparent; color: var(--fg-muted);
    font-size: var(--fs-ui); cursor: pointer;
  }
  .ent-tab[aria-selected="true"] { background: var(--accent-soft); border-color: var(--accent-border); color: var(--fg-strong); font-weight: 600; }
  .ent-js .ent-spalte { display: none; }
  .ent-js .ent-spalte.ent-aktiv { display: block; }
}
@media (max-width: 720px) {
  .ent-link { display: inline-flex; align-items: center; min-height: var(--tap); }
  .ent-titel { min-height: var(--tap); font-size: var(--fs-ui); }
  .ent-titel span { -webkit-line-clamp: 3; }
  .ent-karte { padding: var(--s-1) var(--s-3) var(--s-2); }
}

/* --- Entscheidungen --------------------------------------------------------------------------------------------- */
.ent-liste { display: grid; gap: var(--s-3); }
.ent-weitere { margin-top: var(--s-3); }
.ent-weitere > summary { display: flex; align-items: center; min-height: var(--tap); color: var(--accent); font-size: var(--fs-ui); cursor: pointer; }
.ent-weitere > summary .ent-zahl { margin-left: var(--s-2); }
.ent-weitere[open] > summary { margin-bottom: var(--s-2); }
.ent-weitere[open] { display: grid; gap: var(--s-3); }
.ent-entscheidung { display: grid; gap: var(--s-2); padding: var(--s-4); background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-3); }
.ent-entscheidung.ent-hoch { box-shadow: inset 3px 0 0 var(--prio-high); }
.ent-e-titel { overflow-wrap: anywhere; }
.ent-frage { margin: 0; color: var(--fg-strong); font-size: var(--fs-md); overflow-wrap: anywhere; }
.ent-kontext, .ent-empfehlung { margin: 0; color: var(--fg-muted); font-size: var(--fs-ui); overflow-wrap: anywhere; }
.ent-kontext-block .ent-etikett, .ent-roh .ent-etikett, .ent-empfehlung .ent-etikett { display: block; margin-bottom: var(--s-1); }
.ent-mehrtext > summary { display: block; min-height: var(--tap); min-width: var(--tap); cursor: pointer; list-style: none; }
.ent-mehrtext > summary::-webkit-details-marker { display: none; }
.ent-mehr-zu, .ent-mehr-auf { color: var(--accent); font-size: var(--fs-ui); white-space: nowrap; }
.ent-mehr-auf, .ent-mehrtext[open] .ent-mehr-zu, .ent-mehrtext[open] .ent-vorschau { display: none; }
.ent-mehrtext[open] .ent-mehr-auf { display: inline-flex; align-items: center; min-height: var(--tap); }
.ent-mehrtext p { margin: 0; }
.ent-roh { display: grid; gap: var(--s-1); }
.ent-optionen .ent-etikett { display: block; margin-bottom: var(--s-1); }
.ent-optionen ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-1); color: var(--fg); font-size: var(--fs-ui); }
.ent-optionen li { overflow-wrap: anywhere; }
.ent-optionen strong { display: inline-block; min-width: var(--s-4); color: var(--accent); }
.ent-empfehlung .ent-kontext { color: var(--fg); }
.ent-empfehlung { padding: var(--s-2) var(--s-3); background: var(--accent-soft); border-radius: var(--r-2); color: var(--fg); }
.ent-e-fuss { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-2) var(--s-3); }
.ent-e-fuss .ent-meta { margin: 0; }
.ent-oeffnen { display: inline-flex; align-items: center; justify-content: center; min-height: var(--tap); padding: 0 var(--s-3); border: 1px solid var(--line-strong); border-radius: var(--r-2); }

/* --- Platzhalter (Stufe 4) -------------------------------------------------------------------------------------- */
.ent-platz { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: var(--s-4); }
.ent-platzkarte { margin: 0; padding: var(--s-4); border: 1px dashed var(--line-strong); border-radius: var(--r-3); }

/* --- Antworten und Kommentare (Stufe 2 und 3) ------------------------------------------------------------------------ */
.ent-wahlen { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2); }
.ent-wahl {
  display: flex; align-items: flex-start; gap: var(--s-3); width: 100%; min-height: var(--tap); padding: var(--s-2) var(--s-3);
  border: 1px solid var(--line-strong); border-radius: var(--r-2); background: var(--surface-1); color: var(--fg);
  font: inherit; font-size: var(--fs-ui); text-align: left; cursor: pointer; overflow-wrap: anywhere;
}
.ent-wahl:hover { border-color: var(--accent-border); }
.ent-wahl[aria-pressed="true"] { background: var(--accent-soft); border-color: var(--accent); }
.ent-wahl-empfohlen { border-color: var(--accent-border); }
.ent-wahl-b { flex: none; min-width: var(--s-4); color: var(--fg-strong); font-weight: 700; }
.ent-wahl-t { flex: 1 1 auto; min-width: 0; }
.ent-empf-chip {
  display: inline-block; margin-left: var(--s-2); padding: 0 var(--s-2); border-radius: var(--r-full); background: var(--accent-soft);
  border: 1px solid var(--accent-border); color: var(--fg-strong); font-size: var(--fs-sm); font-weight: 600; white-space: nowrap;
}
.ent-eigene { display: grid; gap: var(--s-1); }
.ent-feld {
  width: 100%; min-height: var(--tap); padding: var(--s-2) var(--s-3); border: 1px solid var(--line-strong); border-radius: var(--r-2);
  background: var(--surface-1); color: var(--fg); font: inherit; font-size: var(--fs-ui); resize: vertical;
}
.ent-feld:focus-visible, .ent-wahl:focus-visible, .ent-senden:focus-visible, .ent-abbrechen:focus-visible, .ent-zurueck:focus-visible,
.ent-komm-knopf:focus-visible, .ent-nur-eigene:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ent-nur-eigene, .ent-senden, .ent-abbrechen, .ent-zurueck, .ent-komm-knopf {
  display: inline-flex; align-items: center; justify-content: center; min-height: var(--tap); padding: 0 var(--s-3);
  border: 1px solid var(--line-strong); border-radius: var(--r-2); background: transparent; color: var(--fg); font: inherit; font-size: var(--fs-ui); cursor: pointer;
}
.ent-nur-eigene { justify-self: start; }
.ent-nur-eigene:disabled, .ent-senden:disabled, .ent-abbrechen:disabled { color: var(--fg-subtle); cursor: not-allowed; }
.ent-senden { background: var(--accent); border-color: var(--accent); color: var(--on-accent); font-weight: 600; }
.ent-senden:disabled { background: var(--surface-3); border-color: var(--line-strong); }
.ent-bestaetigung, .ent-komm-panel { display: grid; gap: var(--s-2); padding: var(--s-3); border: 1px solid var(--accent-border); border-radius: var(--r-2); background: var(--accent-soft); }
.ent-bestaetigung-text { margin: 0; color: var(--fg-strong); font-size: var(--fs-md); }
.ent-bestaetigung-zeile { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.ent-bestaetigung-status, .ent-status { margin: 0; color: var(--fg-muted); font-size: var(--fs-ui); }
.ent-bestaetigung-status:empty, .ent-status:empty { display: none; }
[data-ton="fehler"] { color: var(--fg-strong); }
.ent-status[data-ton="fehler"], .ent-bestaetigung-status[data-ton="fehler"] { padding: var(--s-2) var(--s-3); border: 1px solid var(--danger); border-radius: var(--r-2); }
.ent-status[data-ton="ok"] { color: var(--fg-strong); }
.ent-antwortbox { display: grid; gap: var(--s-2); padding: var(--s-3); border: 1px solid var(--accent-border); border-radius: var(--r-2); background: var(--accent-soft); }
.ent-antworttext { margin: 0; color: var(--fg-strong); font-size: var(--fs-md); overflow-wrap: anywhere; }
.ent-zurueck { justify-self: start; }
.ent-beantwortet { box-shadow: inset 3px 0 0 var(--st-done); }
.ent-meta-zeile { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-1) var(--s-2); }
.ent-meta-zeile .ent-meta { margin: 0; }
.ent-komm-knopf { min-height: var(--s-5); padding: 0 var(--s-2); border-color: transparent; color: var(--accent); font-size: var(--fs-sm); }
.ent-komm-liste { list-style: none; margin: var(--s-1) 0 0; padding: 0; display: grid; gap: var(--s-1); color: var(--fg-muted); font-size: var(--fs-sm); }
.ent-komm-liste li { overflow-wrap: anywhere; }
.ent-komm-zeit { color: var(--fg-subtle); font-variant-numeric: tabular-nums; }
.ent-karte .ent-komm-panel, .ent-karte .ent-status { margin-top: var(--s-2); }
@media (max-width: 720px) {
  .ent-komm-knopf { min-height: var(--tap); padding: 0 var(--s-3); }
}
/* Etiketten auf getönter Fläche: --fg-subtle erreichte dort im dunklen Thema nur 4,16:1 (gemessen), --fg-muted genügt. */
.ent-empfehlung .ent-etikett, .ent-antwortbox .ent-etikett, .ent-bestaetigung .ent-etikett, .ent-komm-panel .ent-etikett { color: var(--fg-muted); }
.ent-antwortbox .ent-meta { color: var(--fg-muted); }
.ent-nur-eigene:disabled, .ent-senden:disabled, .ent-abbrechen:disabled { color: var(--fg-muted); }
/* Zustand „Hover“: die allgemeine Regel für Knöpfe färbt sonst (am Handy bleibt sie nach dem Tippen hängen) Fläche und Schrift unlesbar um. */
.ent-senden:hover:not(:disabled) { background: var(--accent); border-color: var(--accent); color: var(--on-accent); filter: brightness(1.08); }
.ent-nur-eigene:hover:not(:disabled), .ent-abbrechen:hover:not(:disabled), .ent-zurueck:hover, .ent-komm-knopf:hover, .ent-wahl:hover {
  background: var(--surface-3); color: var(--fg-strong);
}
.ent-wahl[aria-pressed="true"]:hover { background: var(--accent-soft); }

/* --- Nachbesserung nach der Prüfung (valerie, Runde 3) ------------------------------------------------------------------ */
/* M1: iOS-Safari zoomt beim Antippen eines Textfeldes unter 16 px. --fs-lg (17 px) liegt darüber; am Rechner bleibt --fs-ui. */
@media (max-width: 720px) {
  .ent-feld { font-size: var(--fs-lg); }
}
/* M2: Zähler unter dem Textfeld (erst ab 3500 Zeichen sichtbar; das Skript füllt ihn). */
.ent-zaehler { margin: 0; color: var(--fg-muted); font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
.ent-zaehler[data-ton="fehler"] { color: var(--fg-strong); padding: var(--s-1) var(--s-2); border: 1px solid var(--danger); border-radius: var(--r-1); }
/* L10: „Nur diese Antwort senden“: gesperrt gestrichelt und still, bereit durchgezogen mit Akzentrand. */
.ent-nur-eigene:disabled { border-style: dashed; border-color: var(--line); background: transparent; }
.ent-nur-eigene:not(:disabled) { border-color: var(--accent); color: var(--fg-strong); font-weight: 600; }
/* L3: Hinweis, wenn die KI gerade an dem Auftrag arbeitet; die Antwortknöpfe sind dann gesperrt. */
.ent-hinweis-claim { margin: 0; padding: var(--s-2) var(--s-3); border: 1px solid var(--warn); border-radius: var(--r-2); color: var(--fg-strong); font-size: var(--fs-ui); }
.ent-wahl:disabled { cursor: not-allowed; border-style: dashed; color: var(--fg-muted); }
/* L11: in der schmalen Spalte des Boards stapeln sich die Knöpfe des Kommentarfelds, statt unschön umzubrechen. */
.ent-karte .ent-bestaetigung-zeile { flex-direction: column; align-items: stretch; gap: var(--s-1); }
.ent-karte .ent-bestaetigung-zeile .ent-senden, .ent-karte .ent-bestaetigung-zeile .ent-abbrechen { width: 100%; }
.ent-karte .ent-komm-panel { padding: var(--s-2); }