/* 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;
  /* Lesesicht am Handy: Fließtext mindestens 16 px (iOS zoomt sonst), Überschriften darüber gestaffelt */
  --fs-lese: 17px;
  --larry-platz: 108px;   /* Breite, die die Kopfzeile rechts für den Larry-Knopf freihält */
  --fs-feld: 16px;      /* Eingabefelder am Handy: darunter zoomt iOS beim Antippen (Selbsttest Q-10) */
  --fs-lese-1: 24px;
  --fs-lese-2: 20px;
  --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); }
.sb-abmelden { flex: 1 0 100%; margin: 0; }
.app-sidebar .sb-abmelden-knopf { display: flex; align-items: center; justify-content: flex-start; gap: var(--s-2); width: 100%; min-height: var(--tap); padding: 0 var(--s-2); border: 1px solid var(--border); border-radius: var(--r-1); background: transparent; color: var(--fg-quiet); font: inherit; font-size: var(--fs-sm); font-weight: 400; cursor: pointer; }
.app-sidebar .sb-abmelden-knopf:hover { color: var(--text); border-color: var(--accent); }
.sidebar-collapsed .app-sidebar .sb-abmelden { display: none; }
.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);
}
.reorder-note[hidden] { display: none; }
@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: 24px; height: 24px; 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; }
/* Die Plantag-Schaltflaeche der Leiste ist ein Datumschip: eine Huelle (`.dw-chip`) mit innerem Knopf, Datumsfeld und „ד. Der innere Knopf
   trug die eigene Schrift (das Datum, oder „+ Geplant“ bei leerem Plantag) und bei leerem Plantag einen gestrichelten Rand; beides lag
   unter dem Kalendersymbol und den Nachbarsymbolen (Moritz 2026-10-19). In der Leiste ist der innere Knopf nur Flaeche, nie Schrift. */
.dash-wrap .task-card .karte-aktionen .karte-aktion > .property-chip {
  position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; margin: 0; padding: 0; border: 0; background: transparent;
  font-size: 0; line-height: 0; color: transparent; opacity: 1; overflow: hidden; pointer-events: none;
}
.dash-wrap .task-card .karte-aktionen .karte-aktion > .property-chip::before,
.dash-wrap .task-card .karte-aktionen .karte-aktion > .property-chip::after { content: none; }
.dash-wrap .task-card .karte-aktionen .karte-aktion > .dw-leeren { display: none; }

/* Die Leiste liegt in der oberen rechten Ecke der Karte (Rechner, Zeiger). Der Titel darunter blendet an seinem rechten Ende aus, solange
   die Leiste da ist: kein Buchstabe liegt je unter einem Symbol (Moritz 2026-10-19), und die Karte behaelt ihre Hoehe. Nur die erste Zeile
   des Titels (die Leiste liegt in beiden Dichten allein über ihr); `--leiste-b` ist der Abstand ihrer linken Kante zum rechten Rand des Titels.
   Liste und Baum brauchen es nicht: dort steht die Leiste im freigehaltenen Rand rechts. */
@media (hover: hover) and (pointer: fine) and (min-width: 721px) {
  .dash-wrap .task-card { --leiste-b: 104px; --leiste-z: 1; }
  .dash-wrap .task-card.item-projects { --leiste-b: 78px; }
  .dash-wrap .kanban-grid.density-compact .task-card { --leiste-b: 108px; }
  .dash-wrap .kanban-grid.density-compact .task-card.item-projects { --leiste-b: 82px; }
  .dash-wrap .task-card:hover > .card-title,
  .dash-wrap .task-card:has(> .card-title:focus-visible) > .card-title,
  .dash-wrap .task-card:has(> .karte-aktionen:focus-within) > .card-title {
    -webkit-mask-image: linear-gradient(to right, black calc(100% - var(--leiste-b) - 8px), transparent calc(100% - var(--leiste-b) - 2px)), linear-gradient(black, black);
    mask-image: linear-gradient(to right, black calc(100% - var(--leiste-b) - 8px), transparent calc(100% - var(--leiste-b) - 2px)), linear-gradient(black, black);
    -webkit-mask-size: 100% calc(var(--leiste-z) * 1lh), 100% calc(100% - var(--leiste-z) * 1lh);
    mask-size: 100% calc(var(--leiste-z) * 1lh), 100% calc(100% - var(--leiste-z) * 1lh);
    -webkit-mask-position: left top, left bottom; mask-position: left top, left bottom;
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  }
  .dash-wrap .list-group .task-card > .card-title, .dash-wrap .tree-node .task-card > .card-title { -webkit-mask-image: none; mask-image: none; }
  /* Auch bei Tastaturfokus: die Regel oben (`:has(> .card-title:focus-visible)`) war spezifischer und blendete den Titel einer Zeile aus,
     obwohl die Leiste dort in ihrer eigenen Spalte steht (der Titel verlor beim Tabben sein Ende, z. B. „… Pfalz einreichen“). */
  .dash-wrap :is(.list-group, .tree-node) .task-card:is(:hover, :has(> .card-title:focus-visible), :has(> .karte-aktionen:focus-within)) > .card-title {
    -webkit-mask-image: none; mask-image: none;
  }
  /* Die hervortretende Karte liegt ueber ihren Nachbarn (Fach unter ihr, `anzeigeregeln.css`); der Platzhalter-Rahmen der Auslagerung
     (`content-visibility`) wuerde das Fach abschneiden. Auf dem Bildschirm ist die Karte ohnehin gezeichnet: nichts aendert sich. */
  .dash-wrap .task-card:hover, .dash-wrap .task-card:focus-within, .dash-wrap .task-card.fach-halt { content-visibility: visible; z-index: 3; }
}
.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 {
  container: zeilen / inline-size;      /* die Zeilen richten sich nach der Breite ihres Behaelters, nicht des Fensters (`chipwahl.css`) */
  /* Waagerecht beschnitten wie vorher, senkrecht nicht: das Fach der leeren Eigenschaften steht unter der Zeile und ragt bei der letzten Zeile
     einer Gruppe ueber deren Rand (es lag sonst abgeschnitten, nur „Mittel“ war zu sehen). Die Ecken fuehren die Kinder selbst (unten). */
  margin: 0 0 var(--s-4); padding: 0; overflow-x: clip; overflow-y: visible;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-3);
}
.dash-wrap .list-group > .status-section-title { border-radius: var(--r-3) var(--r-3) 0 0; }
.dash-wrap .list-group > .status-section-title:only-child { border-radius: var(--r-3); }
.dash-wrap .list-group > .group-body > .task-card:last-child,
.dash-wrap .list-group > .group-body > .subgroup-zone:last-child > .group-body > .task-card:last-child { border-radius: 0 0 var(--r-3) 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; padding-block: 0; display: -webkit-box; line-height: 1.35;
  }
  /* Tippflaeche 44 px (Abnahme R7 M2): eine unsichtbare ::before-Flaeche. Sie ist absolut gegen die Karte gesetzt (die erste Zeile der Karte, rechts vom Statuskreis, 44 px hoch), also nicht vom
     `overflow: hidden` des Titels beschnitten, und aendert weder Hoehe noch Textausrichtung des Titels (keine Punkte, kein Mittigsetzen). */
  .dash-wrap .task-card > .card-title::before {
    content: ""; position: absolute; top: 0; right: 0; left: 44px; height: 44px; pointer-events: auto;
  }
  /* Kein `min-height: 44px` und kein `-webkit-box-align: center` am Titel (QA 2026-10-22 B4, iPhone): in einer senkrechten Box heisst
     „center“ waagerecht mittig, ein kurzer Titel stand mitten in der Karte; und das Mindestmass von 44 px liess hinter der Kappung auf zwei
     Zeilen den Anfang einer dritten Zeile als Punkte stehen. Die 44 px Tippflaeche liefert der Statuskreis daneben, der Titel steht in der
     Zeile mittig zu ihm (`align-self`). */
  .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). */
/* Der Larry-Knopf sitzt oben rechts in der Kopfzeile, nicht schwebend über dem Inhalt: er deckt so auf keiner Seite und bei keiner Breite
   eine Aktion ab (Larry 2026-10-23; vorher unten rechts über „Erinnern“, „Später“ usw.). Die Kopfzeile lässt ihm rechts Platz. */
.larry-chat-toggle {
  position: fixed;
  right: var(--s-3);
  top: var(--s-1);
  bottom: auto;
  z-index: 80;
  min-width: 4.6rem;
  min-height: var(--s-6);      /* am Rechner passt er in die Kopfzeile (43 px); am Handy gilt unten 44 px */
  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: var(--s-2); }
  .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); }
}
/* Dieselbe Ausweichregel gilt am Rechner (Abnahme R9 L3): „Spaeter“ in Rueckstand und Heute lag dauerhaft unter dem Knopf. Am Handy zieht er
   sich nach rechts zurueck, am Rechner nach unten (nach rechts ragte er ueber den Seitenrand). */
.larry-chat-toggle.larry-knopf-weg { transform: translateY(calc(-100% - var(--s-3))); }
@media (max-width: 720px) {
  .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 (prefers-reduced-motion: no-preference) {
  .larry-chat-toggle { transition: transform calc(var(--dur) * 1.5) var(--ease); }
}

/* Platz für den Knopf in der Kopfzeile */
.app-stage > header { padding-inline-end: var(--larry-platz); }

/* Larry-Knopf auf jedem Touchgerät mindestens 44 px hoch, auch bei 768 px (Valerie N-4: 32 px) */
@media (pointer: coarse) { .larry-chat-toggle { min-height: var(--tap); } }
/* 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); }
/* Touch: Zeilen des Menüs (Optionen, Plus) mindestens 44 px hoch (Valerie M-1) */
@media (pointer: coarse), (max-width: 720px) { .slash-zeile { min-height: var(--tap); display: flex; align-items: center; font-size: var(--fs-md); } }

/* --- 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-muted); 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: 2px 0 0; accent-color: var(--accent); }
@media (min-width: 721px) and (pointer: fine) { .blk-check { width: var(--s-5); height: var(--s-5); } }      /* am Handy gilt die 44-px-Fläche aus document_tasks.css */
.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-muted); } }
/* 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-muted); 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([aria-disabled="true"]) { background: var(--surface-3); color: var(--fg-strong); }
.blk-lk:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.blk-lk[aria-disabled="true"] { color: var(--fg-subtle); cursor: default; }      /* nicht mit Deckkraft gedämpft: Symbole bleiben mindestens 3:1 (Valerie M-F) */
.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); }
}

/* Hinweisblock im Editor (nicht aktiver Block): Titel fett, Text darunter, Fläche und Rand wie in der Lesesicht */
.blk-callout { display: block; padding: var(--s-2) var(--s-3); background: var(--surface-1); border: 1px solid var(--line); border-left: 3px solid var(--accent-border); border-radius: var(--r-2); color: var(--fg); }
.blk-callout-titel { display: block; font-weight: 650; color: var(--fg-strong); }
.blk-callout-text { display: block; margin-top: var(--s-1); white-space: pre-wrap; }
.blk-callout-warning, .blk-callout-danger { border-left-color: var(--warn); }

/* Handy: Plus, Optionen (Griff) und Einklappen sind 44 x 44 px und stehen nicht mehr in der schmalen Randspalte über dem Kästchen, sondern als Zeile unter dem
 * gerade bearbeiteten Block (Valerie H-A: 24 px breit, „Erledigt“ hing am Griff). Andere Blöcke zeigen sie nicht; so liegt nie etwas übereinander. */
@media (max-width: 720px), (pointer: coarse) {
  .blocks-editor { padding-left: var(--s-4); }
  .editor-form.blocks-an { padding-bottom: calc(var(--tap) + var(--s-6)); }      /* Speichern und Abbrechen am Seitenende liegen nicht unter der festen Formatleiste */
  .blk { flex-wrap: wrap; }
  .blk-tools, .blk-tools { position: static; left: auto; top: auto; order: 3; flex: 1 0 100%; gap: var(--s-2); opacity: 1; display: none; }
  .blk.fokus .blk-tools, .blk.zu .blk-tools { display: flex; }
  .blk-plus, .blk-grip, .blk-fold { width: var(--tap); height: var(--tap); font-size: var(--fs-md); }
  .blk-body { flex: 1 1 100%; }
  .blocks-editor input.blk-check[type="checkbox"] { width: var(--tap); height: var(--tap); margin: 0; }      /* schlägt die 24-px-Regel für alle Kästchen (grundlagen.css) */
  .blocks-editor input.blk-check::before { inline-size: var(--s-5); block-size: var(--s-5); border-width: 2px; border-color: var(--fg-muted); }
}

/* „Zu Aufgabe“ in der Checklistenzeile des Editors: ein 44-px-Symbol rechts in der Zeile, die Zeile wird nicht doppelt so hoch (Valerie N-5) */
.blocks-editor .blk-todo .blk-body { position: relative; }
.blocks-editor .blk-todo .blk-body > .document-task-convert {
  position: absolute; top: 0; right: 0; margin: 0; padding: 0; display: inline-flex; align-items: center; justify-content: center;
  width: var(--tap); height: var(--tap); min-width: var(--tap); min-height: var(--tap); color: var(--fg-muted); background: transparent; border: 0;
}
.blocks-editor .blk-todo.blk .blk-inhalt { padding-inline-end: var(--tap); }
/* 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); }
/* Markierfarbe wählen: 44 x 44 px auf Touch (Valerie N-3: 26 x 44) */
@media (pointer: coarse), (max-width: 720px) { .blk-lk[data-befehl="markierfarbe"] { min-width: var(--tap); } }
/* 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; }
.pdf-suche-box input[type="search"] { width: 9.5rem; border: 1px solid var(--fg-subtle); border-radius: var(--r-2); padding: 2px 6px; background: var(--surface-1); color: var(--fg); font-size: var(--fs-sm); }   /* Rahmen am Feld selbst, mindestens 3:1 (B81) */
.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; } }


/* Fundstelle eines Wissenselements (?el=): bleibt sichtbar, auch nach dem Blinken */
.pdf-markierung.element { background: color-mix(in srgb, var(--mark-gelb-kante) 38%, transparent); outline: 2px solid var(--mark-gelb-kante); pointer-events: none; }

/* Seite nicht zeichenbar: Hinweis mit Weg zum Original */
.pdf-seitenfehler { position: absolute; inset: auto 0 auto 0; top: var(--s-5); margin: 0 var(--s-4); padding: var(--s-3) var(--s-4); border: 1px solid var(--warn); border-radius: var(--r-2); background: var(--surface-2); color: var(--fg-strong); font-size: var(--fs-ui); z-index: 3; }
.pdf-seitenfehler a { color: var(--accent); text-decoration: underline; display: inline-flex; align-items: center; min-height: var(--tap); }

/* Handy (Valerie H-B): die Leiste ist eine Zeile zum Seitwärtswischen statt 315 px Höhe, die Ansicht bekommt den Rest des Fensters (ein Scroll, kein Doppel-Scroll),
 * alle Knöpfe sind mindestens 44 x 44 px, die Seitenleiste (Wissenselemente, Gliederung) öffnet über „Leiste“ als Blatt unten. */
@media (max-width: 720px) {
  .pdf-reader { height: calc(100dvh - var(--s-7) - var(--s-5) - var(--s-3)); min-height: 0; }
  .pdf-leiste { flex-direction: column; align-items: stretch; flex-wrap: nowrap; gap: var(--s-1); padding-bottom: var(--s-2); }
  .pdf-titel { font-size: var(--fs-md); max-width: 100%; }
  .pdf-steuer { flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; padding-bottom: var(--s-1); scrollbar-width: thin; }
  .pdf-steuer > *, .pdf-steuer .pdf-tools { flex: none; }
  .pdf-steuer button, .pdf-steuer select, .pdf-steuer .nav-btn, .pdf-steuer input, .pdf-steuer a.nav-btn, .pdf-tool-btn {
    min-height: var(--tap); min-width: var(--tap); display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box;
  }
  .pdf-steuer select { min-width: 7rem; height: var(--tap); }      /* native Auswahl ignoriert min-height */
  main:has(.pdf-reader) { padding-bottom: var(--s-2); }
  .pdf-seite input { width: 4.5rem; }
  .pdf-suche-box { display: flex; align-items: center; gap: var(--s-1); flex: none; }
  .pdf-suche-box input { width: 9rem; border-color: var(--fg-subtle); }
  .pdf-rahmen { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); }
  .pdf-ansicht { padding: var(--s-2); }
  .pdf-seitenleiste { display: none; }
  .pdf-reader.fokus-modus .pdf-seitenleiste {          /* am Handy ist „Leiste“ der Schalter: an = Blatt unten */
    display: block; position: fixed; inset: auto 0 0 0; z-index: 60; max-height: 55dvh; overflow: auto; padding: var(--s-3);
    background: var(--surface-2); border-top: 1px solid var(--line-strong); box-shadow: var(--shadow-pop);
  }
  .pdf-reader.fokus-modus .pdf-rahmen { grid-template-columns: minmax(0, 1fr); }
}

/* Markierung anlegen: am Handy nur Art, Kommentar, Speichern und Abbrechen; alles andere hinter „Mehr“ (Valerie M-B). Am Rechner steht alles da, wie bisher. */
.pdf-erweitert { display: contents; }
.pdf-mehr-knopf { display: none; }
@media (max-width: 720px) {
  .pdf-erweitert { display: none; }
  .pdf-popover.mehr-offen .pdf-erweitert { display: grid; gap: var(--s-2); }
  .pdf-mehr-knopf { display: inline-flex; align-items: center; justify-content: center; min-height: var(--tap); }
  .pdf-popover button, .pdf-popover select, .pdf-popover-knoepfe button { min-height: var(--tap); min-width: var(--tap); }
  .pdf-popover select { height: var(--tap); }
  .pdf-popover { max-height: calc(100dvh - var(--s-5)); overflow: auto; }
}

/* Zeilen der Gliederung und der Markierungsliste im Leser: 44 px am Handy, 24 px sonst (Valerie M-C: 364 x 19 px) */
.pdf-gliederung-knopf { min-height: var(--s-5); }
@media (max-width: 720px), (pointer: coarse) { .pdf-gliederung-knopf, .pdf-liste button, .pdf-liste a { min-height: var(--tap); display: flex; align-items: center; } }

/* Feldränder im Leser mindestens 3:1 gegen den Grund (Valerie M-F) */
.pdf-reader input:not([type="checkbox"]), .pdf-reader select, .pdf-reader textarea, .pdf-popover input:not([type="checkbox"]), .pdf-popover select, .pdf-popover textarea,
.pdf-tool-btn, .pdf-tools { border-color: var(--feld-rand); }

.pdf-suche-box input, .pdf-seite input { appearance: none; -webkit-appearance: none; border: 1px solid var(--fg-subtle); border-radius: var(--r-2); padding-inline: var(--s-2); background: var(--surface-1); color: var(--fg); }

/* Tippflächen unabhängig von der Breite: jedes Touchgerät (auch ein iPad bei 768 px) bekommt mindestens 44 x 44 px (Valerie N-3, N-4) */
@media (pointer: coarse), (max-width: 720px) {
  .app-stage > header { min-height: calc(var(--tap) + var(--s-2)); }
  .pdf-steuer button, .pdf-steuer select, .pdf-steuer .nav-btn, .pdf-steuer input, .pdf-tool-btn, .pdf-suche-box button {
    min-height: var(--tap); min-width: var(--tap); box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center;
  }
  .pdf-steuer select { height: var(--tap); min-width: 7rem; }
  .pdf-seite input, .pdf-suche-box input { min-height: var(--tap); }
  .pdf-schnell-punkt, .pdf-schnell-mehr { width: var(--tap); height: var(--tap); min-width: var(--tap); padding: var(--s-2); box-sizing: border-box; }
  .pdf-schnell-punkt[data-art] { background-clip: content-box; }
  .pdf-schnellleiste { padding: var(--s-1); gap: 0; }
}

/* Anlegen-Fenster am Handy: Blatt unten, höchstens so hoch wie der sichtbare Bereich (über der Tastatur), innen scrollbar, Knopfzeile unten angedockt (Valerie N-2) */
@media (max-width: 720px) {
  .pdf-popover.pdf-popover-blatt {
    position: fixed; left: 0; right: 0; top: auto; width: auto; max-width: none; box-sizing: border-box; border-radius: var(--r-3) var(--r-3) 0 0;
    max-height: calc(var(--vv-hoehe, 100dvh) - var(--s-4)); overflow-y: auto; overscroll-behavior: contain; padding-bottom: 0;
  }
  .pdf-popover.pdf-popover-blatt .pdf-popover-knoepfe {
    position: sticky; bottom: 0; z-index: 2; padding: var(--s-2) 0 calc(var(--s-2) + env(safe-area-inset-bottom, 0px)); background: var(--surface-3); border-top: 1px solid var(--line);
  }
}

/* Die Leiste scrollt seitwärts: am rechten Rand läuft sie aus (Hinweis „es geht weiter“), die Seitenzahl steht gleich nach den Werkzeugen (Valerie N-11) */
@media (max-width: 720px) {
  .pdf-steuer { -webkit-mask-image: linear-gradient(to right, black calc(100% - var(--s-6)), transparent); mask-image: linear-gradient(to right, black calc(100% - var(--s-6)), transparent); padding-inline-end: var(--s-6); }
}
/* 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; }
.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; }
/* Über einer Aufgabenzeile oder -karte ist die Vorschau nur zum Schauen (Moritz 2026-10-22): sie nimmt keine Mauseingabe an, auch nicht in der
   Lücke zu den Nachbarzeilen, und hat keinen Knopf. So bleiben Titel, Statuskreis und Chips der Zeilen darunter bedienbar (Klick und Überfahren
   gehen durch); sie schließt, sobald die Maus den Titel verlässt (220 ms). Höhe gekürzt, wo sie sonst die eigene Zeile deckte (`vorschau.js`). */
.vorschau-karte.nur-schauen { pointer-events: none; overflow: hidden; width: 18rem; }
.vorschau-karte.nur-schauen .vorschau-text { -webkit-line-clamp: 2; }
.vorschau-karte.nur-schauen .vorschau-titel { display: none; }        /* der Titel steht in der Zeile darueber: weniger Karte, weniger Verdecktes */
.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: die Zeilen sind die Komponente `Eintrag` (ui/eintrag.py, static/komponenten.css); hier steht nichts Eigenes. --- */

/* --- 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 {
  flex-wrap: wrap;
  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; flex-wrap: nowrap; }
  html[data-sb="rail"] .sb-abmelden { flex: none; width: var(--tap); margin-inline: calc((var(--row-nav) - var(--tap)) / 2); }   /* 44 x 44 px auch in der schmalen Leiste (B58, Querformat am Handy) */
  html[data-sb="rail"] .sb-abmelden-knopf { justify-content: center; padding: 0; width: var(--tap); }
  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; }

/* Tastenkürzel gibt es nur mit Tastatur: Schalter und Hinweis zeigt nur ein feiner Zeiger (Maus, Trackpad), nie ein Touchgerät (Valerie N-8) */
@media (pointer: coarse) { .ep-tasten { display: none; } }
/* 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; }
  /* Die Leiste haengt 8 px ueber die Kartenkante und liegt so ueber der ERSTEN Titelzeile. Diese Zeile bricht vor der Leiste um (ein leerer
     Schwimmer reserviert den Platz nur dort, die zweite Zeile bleibt breit): der Titel wird nie von der Leiste gedeckt (Abnahme R9 L4). */
  .dash-wrap .kanban-grid.density-compact .task-card > .karte-aktionen { top: calc(var(--s-2) * -1); }
  .dash-wrap .kanban-grid.density-compact .task-card > .card-title::before {
    content: ""; float: right; width: calc(var(--s-7) * 2 + var(--s-3)); height: 1.4em;
  }
  /* 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; }

/* --- Eigener Kalender für Berührung (static/datumswahl.js) ---------------------------------------------------------------
 * Auf dem Handy gehört die Wahl diesem Blatt, nicht dem Wähler des Geräts (der schloss sich in iOS von selbst wieder).
 * Das unsichtbare Feld nimmt dort kein Tippen mehr an; das Tippen trifft den Knopf. */
.dw-touch .dw-feld { pointer-events: none; }

.dw-kal {
  position: fixed; inset: 0; z-index: 1200; display: flex; align-items: flex-end; justify-content: center;
  background: var(--scrim); overscroll-behavior: contain;
}
.dw-kal-schutz { background: transparent; }
.dw-kal-blatt {
  box-sizing: border-box; width: 100%; max-width: 28rem; max-height: 100dvh; overflow-y: auto; overscroll-behavior: contain;
  padding: var(--s-3) var(--s-4) calc(var(--s-4) + env(safe-area-inset-bottom, 0px));
  border: 1px solid var(--line-strong); border-bottom: 0; border-radius: var(--r-3) var(--r-3) 0 0;
  background: var(--surface-2); color: var(--fg); box-shadow: var(--shadow-pop);
  padding-left: calc(var(--s-4) + env(safe-area-inset-left, 0px)); padding-right: calc(var(--s-4) + env(safe-area-inset-right, 0px));
}
.dw-kal-kopf { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); margin-bottom: var(--s-2); }
.dw-kal-titel { flex: 1 1 auto; text-align: center; font-size: var(--fs-lg); font-weight: 600; color: var(--fg-strong); }
.dw-kal-nav, .dw-kal-tag, .dw-kal-chip {
  box-sizing: border-box; min-height: var(--tap); min-width: var(--tap); margin: 0; padding: 0;
  border: 1px solid transparent; border-radius: var(--r-2); background: transparent; color: var(--fg);
  font: inherit; font-size: var(--fs-md); line-height: 1; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
.dw-kal-nav { border-color: var(--line-strong); background: var(--surface-1); color: var(--fg-strong); font-size: var(--fs-xl); }
.dw-kal-nav:disabled, .dw-kal-tag:disabled, .dw-kal-chip:disabled { opacity: 0.4; cursor: default; }
.dw-kal-wochen, .dw-kal-raster { display: grid; grid-template-columns: repeat(7, 1fr); gap: var(--s-1) 0; }
.dw-kal-wochen { margin-bottom: var(--s-1); text-align: center; font-size: var(--fs-sm); color: var(--fg-muted); }
.dw-kal-tag { width: 100%; }
.dw-kal-tag:hover:not(:disabled) { background: var(--surface-3); }
/* Heute: Ring (nicht nur Farbe); gewählt: gefüllt mit Akzent. */
.dw-kal-heute { border-color: var(--accent); font-weight: 700; }
.dw-kal-gewaehlt, .dw-kal-gewaehlt:hover:not(:disabled) { background: var(--accent); border-color: var(--accent); color: var(--on-accent); font-weight: 700; }
.dw-kal-schnell, .dw-kal-fuss { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-3); }
.dw-kal-chip { padding: 0 var(--s-3); border-color: var(--line-strong); background: var(--surface-1); color: var(--fg-strong); font-size: var(--fs-ui); }
.dw-kal-chip:hover:not(:disabled) { background: var(--surface-3); }
.dw-kal-fuss { justify-content: flex-end; }
.dw-kal-abbrechen { color: var(--fg-muted); }
.dw-kal-nav:focus-visible, .dw-kal-tag:focus-visible, .dw-kal-chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Scroll-Sperre: die Seite bleibt an ihrer Stelle (die Position steht in --dw-kal-scroll und wird beim Schließen wiederhergestellt). */
.dw-kal-sperre { position: fixed; left: 0; right: 0; width: 100%; top: var(--dw-kal-scroll, 0); overflow: hidden; }

/* Querformat am Handy: wenig Höhe, Raster dichter; das Blatt scrollt in sich. */
@media (max-height: 500px) {
  .dw-kal-blatt { max-width: 40rem; padding-top: var(--s-2); }
  .dw-kal-nav, .dw-kal-tag, .dw-kal-chip { min-height: var(--tap); }
  .dw-kal-schnell, .dw-kal-fuss { margin-top: var(--s-2); }
}
@media (prefers-reduced-motion: no-preference) {
  .dw-kal:not(.dw-kal-schutz) .dw-kal-blatt { animation: dw-kal-hoch var(--dur) var(--ease); }
}
@keyframes dw-kal-hoch { from { transform: translateY(var(--s-5)); opacity: 0; } to { transform: none; opacity: 1; } }
/* 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):not(.task-card .dw-chip) > .dw-leeren { opacity: 0; width: 0; min-width: 0; padding: 0; overflow: hidden; }
  /* Auf der Karte behält das „ד seinen Platz (nur unsichtbar): erschiene es erst beim Überfahren, bräche das Datum in eine neue Zeile um
     und die Karte wüchse um eine Chipzeile (Abnahme R7 L1: 1 von 163 Karten, 4 px). */
  .dash-wrap .task-card .dw-chip:not(:hover):not(:focus-within) > .dw-leeren { opacity: 0; pointer-events: none; }
}

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

/* Kommentar zur Änderung (Moritz 2026-10-22): neben „Rückgängig“ der Knopf „Kommentar“, geöffnet ein einzeiliges Feld mit „Senden“. */
.app-toast .toast-kommentar { margin-left: var(--s-2); }
.app-toast .toast-kommentar-form { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); }
.app-toast .toast-kommentar-feld {
  flex: 1 1 14rem; min-width: 0; min-height: 44px; box-sizing: border-box; padding: 0 var(--s-3); border: 1px solid var(--feld-rand);
  border-radius: var(--r-2); background: var(--surface-1); color: var(--fg-strong); font: inherit; font-size: var(--fs-lg); /* mindestens 16 px: sonst zoomt iOS beim Fokus */
}
.app-toast .toast-kommentar-feld:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.app-toast .toast-kommentar-fehler { flex-basis: 100%; font-size: var(--fs-sm); color: var(--danger); }
.app-toast .toast-kommentar-fehler[hidden] { display: none; }
/* Handy: die Meldung steht über dem Larry-Knopf und bricht um, statt Text und Knöpfe zu quetschen; Safe-Area unten. */
@media (max-width: 720px) {
  .app-toast {
    left: var(--s-3); right: var(--s-3); bottom: calc(var(--s-3) + var(--tap) + var(--s-2) + env(safe-area-inset-bottom, 0px));
    display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1) var(--s-2); min-width: 0;
  }
  .app-toast[hidden] { display: none; }
  .app-toast .toast-text { flex: 1 1 100%; margin-right: 0; }
}
/* 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; }
/* Volle Deckkraft: mit 0,85 lag die Zahl im gewaehlten Chip bei 3,97 zu 1 (Abnahme R9, M1); sie unterscheidet sich vom Wort durch die Ziffernform */
.tv-zahl { font-variant-numeric: tabular-nums; }
@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 (Karten): 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 (Zeilen): EIN Muster, die Leiste hat einen eigenen Platz in der Zeilenaufteilung (siehe unten, `--aktionen-b`). */
@media (hover: hover) and (pointer: fine) {
  .dash-wrap .task-card > .karte-aktionen { top: calc(var(--s-1) * -1); bottom: auto; }
  /* 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; }
}

/* Zeilen (Liste, Baum, gruppiert; Rechner mit Zeiger): Status | Titel (nimmt den Rest) | Chips (Datum, Prioritaet ...) | Aktionen.
   Die Leiste steht in der vierten Spalte der Zeile, nicht ueber ihr: Sie hat dort in Ruhe schon ihren Platz (`opacity: 0`, die Zeile
   aendert beim Ueberfahren weder Breite noch Hoehe), und die Chips der dritten Spalte rechnet die Aufteilung dagegen. So ist
   „Leiste ueber dem Datum“ nicht mehr moeglich, statt durch eine Zahl im Rand der Zeile (vorher 132 px) knapp vermieden zu sein
   (Moritz 2026-10-22: „warum nicht nebeneinander? genug Platz“). `--aktionen-b` ist die Breite der Leiste mit vier Knoepfen
   (4 x 24 px + 3 x 2 px Luecke + 2 x 2 px Innenrand + 2 x 1 px Rand = 108 px).
   Das Fach der leeren Eigenschaften (`anzeigeregeln.css`) steht ebenfalls in dieser Spalte, unter der Zeile: es liegt nur ueber dem
   freien Platz der Nachbarzeile, nie ueber deren Chips. */
@media (hover: hover) and (pointer: fine) and (min-width: 721px) {
  .dash-wrap .list-group .task-card, .dash-wrap .tree-node .task-card {
    --aktionen-b: calc(var(--s-6) * 3 + var(--s-3));
    grid-template-columns: 28px minmax(0, 1fr) auto var(--aktionen-b); padding-inline-end: var(--s-2);
  }
  .dash-wrap .list-group .task-card > .karte-aktionen, .dash-wrap .tree-node .task-card > .karte-aktionen {
    position: relative; inset: auto; grid-column: 4; grid-row: 1; align-self: center; justify-self: end; margin: 0; transform: none;
  }
  /* Der Titel ist nur so breit wie sein Text: die Vorschau (nach 300 ms) geht nur ueber dem Text auf, nicht ueber dem leeren Rest der Zeile bis
     zu den Chips (dort oeffnete sie sich, sobald die Maus zur Leiste wanderte, und deckte die Zeilen darunter). */
  .dash-wrap .list-group .task-card > .card-title, .dash-wrap .tree-node .task-card > .card-title { justify-self: start; max-width: 100%; }
  /* Schmale Zeile (schmaler Behaelter): kein Platz fuer Chips und Leiste nebeneinander. Dann ersetzt die Leiste beim Ueberfahren die
     Chips: beide teilen sich die dritte Spalte, die Chips werden unsichtbar (bleiben im Fluss, die Zeile aendert sich nicht) und
     nichts liegt je halb unter der Leiste. Das Fach gehoert nicht dazu: es ist eine Ebene unter der Zeile. */
  @container zeilen (max-width: 560px) {
    .dash-wrap .list-group .task-card, .dash-wrap .tree-node .task-card { grid-template-columns: 28px minmax(0, 1fr) minmax(var(--aktionen-b), auto); }
    .dash-wrap .list-group .task-card > .card-meta, .dash-wrap .tree-node .task-card > .card-meta { grid-column: 3; }
    .dash-wrap .list-group .task-card > .karte-aktionen, .dash-wrap .tree-node .task-card > .karte-aktionen { grid-column: 3; }
    .dash-wrap .task-card:hover > .card-meta > :not(.karte-leer-fuss),
    .dash-wrap .task-card:has(> .card-title:focus-visible) > .card-meta > :not(.karte-leer-fuss),
    .dash-wrap .task-card:has(> .karte-aktionen:focus-within) > .card-meta > :not(.karte-leer-fuss) { visibility: hidden; }
  }
}
/* 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; }

/* --- Leere, gewählte Eigenschaften beim Überfahren der Karte (Moritz 2026-10-19) ---------------------------------------
   Was die Ansicht über „Anpassen“ zeigen soll, aber am Objekt noch leer ist und keinen Platzhalter im Ruhezustand hat („Wenn gefüllt“),
   steht als Gruppe `.karte-leer-fuss` in der Meta-Zeile (`views/karten.py`). Im Ruhezustand ist sie weg: die Karte bleibt so hoch wie ohne.
   Rechner, Board, Liste, Baum und Heute: beim Überfahren oder bei Tastaturfokus erscheint sie als Fach UNTER der Karte (über der Lücke und
   dem Anfang des Nachbarn, wie ein Menü; rechtsbündig: der Statuskreis der Nachbarkarte links bleibt frei und erreichbar, F2), nichts in der Karte wird verdeckt, die Höhe ändert sich nicht, auch nicht in der Liste (dort
   nahmen die Chips vorher Zeilenbreite, ein langer Titel brach um und die Zeile sprang um 10,8 px, QA 2026-10-19 F1). Das Fach ist EINE Zeile:
   die ersten zwei Chips, der Rest hinter „+N“ (ein Klick zeigt alle); drei Reihen Chips deckten sonst die ganze Nachbarkarte samt ihrem
   Statuskreis (F2). Die Karte hält das Fach offen (`fach-halt`, `karte_leer.js`), solange ein Menü zu einem seiner Chips offen ist: in
   WebKit fokussiert der Klick den Knopf nicht, das Fach verschwand und das Menü stand ohne Anker da (F6). Die letzte Karte einer Spalte
   oder Gruppe öffnet das Fach nach oben (sonst wüchse die Spalte, die Gruppe schnitte es ab). Handy: die Chips stehen in der geöffneten
   Karte (Tipp auf die Karte), alle, mit 44 px Fläche (grundlagen.css). Die Chips selbst sind die Platzhalter oben. */
.karte-leer-fuss { display: none; }
.karte-leer-mehr { display: none; }
/* Steht in der Meta-Zeile nur diese Gruppe, hat die Zeile weder Höhe noch Abstand: die Karte bleibt so hoch wie ohne sie. */
.dash-wrap .task-card > .card-meta:not(:has(> :not(.karte-leer-fuss))) { margin: 0; min-height: 0; }
@media (hover: hover) and (pointer: fine) and (min-width: 721px) {
  .dash-wrap .task-card:hover .karte-leer-fuss, .dash-wrap .task-card:focus-within .karte-leer-fuss,
  .dash-wrap .task-card.fach-halt .karte-leer-fuss { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1); }
  .dash-wrap .task-card > .card-meta > .karte-leer-fuss {
    position: absolute; top: calc(100% - 1px); right: 0; width: max-content; max-width: 100%; box-sizing: border-box; padding: var(--s-1);
    background: var(--surface-2); border: 1px solid var(--line-strong); border-radius: var(--r-2); box-shadow: var(--shadow-pop);
  }
  /* Die letzte Karte einer Spalte öffnet das Fach nach oben, über der Leiste (sie hängt bis 8 px über die Kartenkante: sonst lägen Fach und
     Leiste aufeinander, QA-Probe kompakt 21 Befunde); die Lücke füllt ein durchsichtiger Streifen, damit das Überfahren nicht abreißt. */
  .dash-wrap .kanban-col .task-card:last-of-type > .card-meta > .karte-leer-fuss { top: auto; bottom: calc(100% + var(--s-2)); }
  .dash-wrap .kanban-col .task-card:last-of-type > .card-meta > .karte-leer-fuss::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: var(--s-2); }
  /* Eine Zeile: ab dem dritten Chip steht „+N“. Mit Klick (`weit`) stehen alle da, bis die Maus die Karte verlässt. */
  .dash-wrap .task-card > .card-meta > .karte-leer-fuss:not(.weit) > :nth-child(n+3):not(.karte-leer-mehr) { display: none; }
  .dash-wrap .task-card > .card-meta > .karte-leer-fuss > .karte-leer-mehr {
    display: inline-block; flex: none; margin: 0; padding: 0 var(--s-2); border: 1px solid var(--feld-rand); border-radius: var(--r-full);
    background: transparent; color: var(--fg-muted); font: inherit; font-size: var(--fs-sm); line-height: var(--lh-base); cursor: pointer;
  }
  .dash-wrap .task-card > .card-meta > .karte-leer-fuss > .karte-leer-mehr:hover { color: var(--fg-strong); border-color: var(--fg-muted); }
  .dash-wrap .task-card > .card-meta > .karte-leer-fuss.weit > .karte-leer-mehr { display: none; }
  /* Liste und Baum (Zeilen): das Fach steht in der Spalte der Leiste (`--aktionen-b`, `chipwahl.css`), unter der Zeile, und ist so breit wie
     sie: die Chips stehen untereinander, damit es nur ueber dem freien Platz der Nachbarzeile liegt (dort steht in Ruhe nichts) und
     nie ueber deren Datum, Prioritaet oder Projekt (Moritz 2026-10-22; vorher zwei Chips nebeneinander, 130 px, und die Kante lag
     ueber dem Datum der Nachbarzeile). Mit „+N“ (Klick) stehen alle Chips da, auch sie untereinander. */
  .dash-wrap .list-group .task-card > .card-meta > .karte-leer-fuss, .dash-wrap .tree-node .task-card > .card-meta > .karte-leer-fuss {
    right: var(--s-2); width: var(--aktionen-b); max-width: none; flex-direction: column; align-items: stretch; flex-wrap: nowrap;
  }
  .dash-wrap .list-group .task-card > .card-meta > .karte-leer-fuss > *, .dash-wrap .tree-node .task-card > .card-meta > .karte-leer-fuss > * { min-width: 0; }
  .dash-wrap .list-group .task-card > .card-meta > .karte-leer-fuss .property-chip,
  .dash-wrap .tree-node .task-card > .card-meta > .karte-leer-fuss .property-chip { max-width: 100%; box-sizing: border-box; }
  .dash-wrap .list-group .task-card > .card-meta > .karte-leer-fuss > .karte-leer-mehr,
  .dash-wrap .tree-node .task-card > .card-meta > .karte-leer-fuss > .karte-leer-mehr { text-align: center; }
  .dash-wrap .list-group .task-card:last-child > .card-meta > .karte-leer-fuss, .dash-wrap .tree-node .task-card:last-child > .card-meta > .karte-leer-fuss {
    top: auto; bottom: calc(100% - 1px);
  }
}
@media (max-width: 720px), (hover: none) {
  .dash-wrap .task-card.karte-offen > .card-meta > .karte-leer-fuss { display: flex; flex: 1 0 100%; flex-wrap: wrap; gap: var(--s-1) var(--s-2); }
  /* Ein blasser Chip ist hier eine Eingabe: 44 px Fläche (der Rand um gefüllte Chips gilt für Platzhalter nicht). */
  .karte-leer-fuss .property-chip { min-height: var(--tap); }
}

/* --- 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; }
}
/* =========================================================================
 * Lesedarstellung von Notizen (Paket P1, Moritz 2026-10-22, iPhone)
 *
 * Gilt fuer den gerenderten Notiztext (`.note-content`, `.prose`). Vorbilder: Craft, Notion und Bear zeigen
 * Listen mit einer Markierung je Punkt (Punkt, Zahl oder Kaestchen, nie zwei), den Text in der Zeile nach der Markierung
 * eingerueckt (haengender Einzug), Unterpunkte nur eine Stufe tiefer, Tabellen in einem eigenen Scrollbereich.
 * Nur Tokens aus tokens.css. Kommt vor zugang.css, damit 44 px und Kontrast dort das letzte Wort behalten.
 * ========================================================================= */

/* --- Listen: Einzug nur so tief wie noetig, Unterpunkte klar, lange Woerter brechen ------------------------------- */
.note-content ul, .note-content ol { margin-block: var(--s-2); padding-inline-start: var(--s-5); }
.note-content ol { padding-inline-start: calc(var(--s-5) + var(--s-1)); }
.note-content li > ul, .note-content li > ol { margin-block: var(--s-1) 0; }
.note-content li { overflow-wrap: anywhere; }
.note-content li > p { margin-block: 0; }

/* Checkliste: das Kaestchen ersetzt den Punkt. Raster aus Kaestchen und Text; Unterpunkte stehen in der Textspalte. */
.note-content ul.task-list { padding-inline-start: 0; list-style: none; }
.note-content li.todo { display: grid; grid-template-columns: var(--s-5) minmax(0, 1fr); column-gap: var(--s-2); list-style: none; align-items: start; }
.note-content li.todo > input[type="checkbox"] { grid-column: 1; grid-row: 1; margin: 0; align-self: start; }
.note-content li.todo > span { grid-column: 2; grid-row: 1; min-width: 0; }
.note-content li.todo > ul, .note-content li.todo > ol { grid-column: 2; padding-inline-start: var(--s-4); }
.note-content li.todo.done > span { color: var(--fg-muted); text-decoration: line-through; text-decoration-color: var(--line-strong); }
/* Kästchen im Lesetext: 44 px Tippfläche, gezeichnet 24 px; Rand 3:1 gegen den Grund (--fg-muted), Haken in --on-accent auf --accent.
 * Gilt für jedes Kästchen der Liste, auch für nicht antippbare (Selbsttest Q-05: 24 px am Handy). */
.note-content ul > li.todo > input[type="checkbox"], .note-content ol > li.todo > input[type="checkbox"] {
  appearance: none; -webkit-appearance: none; box-sizing: border-box; display: grid; place-items: center; cursor: pointer;
  width: var(--tap); height: var(--tap); margin: calc((var(--s-5) - var(--tap)) / 2); padding: 0; background: transparent; border: 0; accent-color: var(--accent);
}
.note-content li.todo > input[type="checkbox"]::before {
  content: ""; box-sizing: border-box; width: var(--s-5); height: var(--s-5); border: 2px solid var(--fg-muted); border-radius: var(--r-2);
  display: grid; place-items: center; font-size: var(--fs-md); font-weight: 700; line-height: 1; background: var(--surface-1);
}
.note-content li.todo > input[type="checkbox"]:checked::before { content: "✓"; background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.note-content li.todo > input[type="checkbox"]:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: var(--r-2); }
.note-content li.todo > input[disabled] { cursor: default; }

/* "Zu Aufgabe": ein Knopf in einer Zeile, Text bricht nie um. */
/* „Zu Aufgabe“: ein Symbol je Zeile, 44 px, rechts am Zeilenrand statt eigener Zeile darunter (Valerie M-E) */
.note-content li.todo:has(> span > .document-task-convert) { position: relative; padding-inline-end: var(--tap); }
.note-content .document-task-convert {
  position: absolute; top: 0; right: 0; display: inline-flex; align-items: center; justify-content: center; width: var(--tap); height: var(--tap); min-width: var(--tap);
  min-height: var(--tap); margin: 0; padding: 0; color: var(--fg-muted); background: transparent; border: 0;
}
.note-content .document-task-convert:hover { color: var(--accent); background: var(--surface-3); }

/* --- Bloecke: Zitat, Code, Bild, Tabelle ---------------------------------------------------------------------------- */
.note-content img { max-width: 100%; height: auto; }
.note-content pre { font-size: var(--fs-base); line-height: var(--lh-base); tab-size: 2; }
.note-content blockquote > :first-child { margin-top: 0; }
.note-content blockquote > :last-child { margin-bottom: 0; }
.note-content .table-wrap { margin-block: var(--s-3); border: 1px solid var(--line); border-radius: var(--r-2); }
.note-content .table-wrap > table { width: 100%; }        /* passt in die Spalte; nur was nicht schmaler werden kann (viele Spalten) scrollt im Block */
.note-content .styled-table td, .note-content .styled-table th { min-width: 7em; max-width: 22em; vertical-align: top; }
.note-content .styled-table th { position: static; }

@media (max-width: 720px) {
  /* Lesespalte: der Text bekommt die Breite, nicht der Rand (vorher 16 + 24 + 32 px je Seite). */
  .note-workspace .note-pane.note-content, .note-workspace.details-zu .note-content { padding: var(--s-3) var(--s-1); }
  .note-content.prose { font-size: var(--fs-lese); line-height: 1.6; }
  .note-content.prose p, .note-content.prose li { margin-block: var(--s-1); }
  .note-workspace.details-zu .note-content.prose { font-size: var(--fs-lese); line-height: 1.6; }
  .note-content.prose h1 { font-size: var(--fs-lese-1); line-height: 1.25; margin-block: var(--s-4) var(--s-2); }
  .note-content.prose h2 { font-size: var(--fs-lese-2); line-height: 1.3; margin-block: var(--s-5) var(--s-2); }
  .note-content.prose h3 { font-size: var(--fs-lese); line-height: 1.35; margin-block: var(--s-4) var(--s-1); }
  .note-content.prose h4 { font-size: var(--fs-lese); margin-block: var(--s-3) var(--s-1); }
  .note-content ul, .note-content ol { padding-inline-start: var(--s-4); }
  .note-content ol { padding-inline-start: var(--s-5); }
  .note-content ul.task-list { padding-inline-start: 0; }
  .note-content li.todo { grid-template-columns: var(--s-5) minmax(0, 1fr); }
  .note-content li.todo > ul, .note-content li.todo > ol { padding-inline-start: var(--s-4); }
  .note-content pre { font-size: var(--fs-sm); }
}

/* --- P4: Leiste an der markierten Stelle (Kommentar, Markieren, Frage an Larry) ---------------------------------------
 * Handy: unten angedockt (Safe-Area, über der Tastatur per visualViewport), damit sie nie gegen das iOS-Menü an der Auswahl
 * kämpft. Rechner: schwebt über der Auswahl. Alle Flächen 44 px, Text und Rand 4,5:1 über die Flächen-Tokens. */
.sel-leiste {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 950; box-sizing: border-box;
  padding: var(--s-2) var(--s-2) calc(var(--s-2) + env(safe-area-inset-bottom, 0px));
  background: var(--surface-4); color: var(--fg-strong); border-top: 1px solid var(--line-strong); box-shadow: var(--shadow-pop);
}
.sel-leiste[hidden] { display: none; }
.sel-leiste.sel-schwebt { right: auto; border: 1px solid var(--line-strong); border-radius: var(--r-3); padding: var(--s-1); max-width: calc(100vw - var(--s-4)); }
.sel-knoepfe, .sel-zeile { display: flex; gap: var(--s-2); }
.sel-leiste button {
  min-height: var(--tap); min-width: var(--tap); padding: 0 var(--s-4); flex: 1 1 auto; font: inherit; font-size: var(--fs-ui);
  color: var(--fg-strong); background: var(--surface-2); border: 1px solid var(--line-strong); border-radius: var(--r-2); cursor: pointer; white-space: nowrap;
}
.sel-leiste button:hover { background: var(--surface-3); }
.sel-leiste button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.sel-leiste .sel-senden { color: var(--on-accent); background: var(--accent); border-color: var(--accent); font-weight: 600; }
.sel-leiste.sel-offen .sel-knoepfe { display: none; }
.sel-form { display: grid; gap: var(--s-2); }
.sel-form[hidden] { display: none; }
.sel-form label { display: grid; gap: var(--s-1); font-size: var(--fs-ui); color: var(--fg-strong); }
.sel-form textarea { width: 100%; box-sizing: border-box; font: inherit; font-size: var(--fs-lese); color: var(--fg-strong); background: var(--surface-1); border: 1px solid var(--line-strong); border-radius: var(--r-2); padding: var(--s-2); resize: none; }
.sel-leiste.sel-schwebt .sel-form { min-width: 20rem; }
/* Gelbe Markierung in der Lesesicht: Text bleibt lesbar (marker.css trägt die Farben) */
.note-content mark.vw-gelb { padding: 0 var(--s-1); border-radius: var(--r-1); }

/* --- P3a: fester „Bearbeiten“-Knopf am Handy ---------------------------------------------------------------------------
 * Der Stift oben bleibt. Unten links, damit er nicht unter dem Larry-Knopf (rechts) liegt; die Seite lässt unten Platz. */
.lese-bearbeiten { display: none; }
@media (max-width: 720px) {
  .lese-bearbeiten {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2); position: fixed; z-index: 70;
    left: var(--s-4); bottom: calc(var(--s-4) + env(safe-area-inset-bottom, 0px)); min-height: var(--tap); min-width: var(--tap); padding: 0 var(--s-4);
    font-size: var(--fs-ui); font-weight: 600; color: var(--on-accent); background: var(--accent); border-radius: var(--r-full);
    box-shadow: var(--shadow-pop); text-decoration: none;
  }
  .lese-bearbeiten svg { width: var(--s-4); height: var(--s-4); }
  /* Platz am Seitenende: auch das Letzte lässt sich über den Knopf hinaus scrollen (Selbsttest B13/B15: Knopf lag auf dem letzten Inhalt) */
  .note-workspace { padding-bottom: calc(var(--tap) + var(--s-7)); }
}

/* --- Dateiverweise als Chip (Selbsttest Q-04): Symbol, Art, Dateiname ohne Ordnerpfad, eine Zeile mit Auslassung ----------- */
.datei-chip {
  display: inline-flex; align-items: center; gap: var(--s-1); max-width: 100%; box-sizing: border-box; vertical-align: middle;
  min-height: var(--s-5); padding: var(--s-1) var(--s-2); font-size: var(--fs-ui); line-height: var(--lh-tight);
  color: var(--fg); background: var(--surface-1); border: 1px solid var(--line-strong); border-radius: var(--r-full);
  text-decoration: none; white-space: nowrap; overflow: hidden;
}
a.datei-chip:hover { background: var(--surface-3); }
.datei-chip .datei-symbol { flex: none; }
.datei-chip .datei-art { flex: none; font-size: var(--fs-micro); font-weight: 650; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--fg-muted); }
.datei-chip .datei-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.datei-chip.datei-fehlt { color: var(--fg-muted); border-style: dashed; }
[data-document-id] a.wikilink.datei-chip, .note-content a.wikilink.datei-chip { text-decoration: none; color: var(--fg); }
/* 44 px Tippfläche; die Schrift wächst mit (Zeilenhöhe bleibt unter dem 2,6fachen der Schrift, also einzeilig) */
@media (max-width: 720px), (pointer: coarse) { .datei-chip { min-height: var(--tap); font-size: var(--fs-lese); } }

/* --- Eingabefelder am Handy: mindestens 16 px (iOS zoomt darunter beim Antippen; Selbsttest Q-10, auch das Suchfeld „Alles durchsuchen“) ---
 * Absichtlich mit hoher Selektorstärke statt !important: viele Seiten setzen die Feldschrift in eigenen Regeln. */
@media (max-width: 720px), (pointer: coarse) {      /* auch im Querformat: iOS zoomt dort genauso */
  body input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]):not([type="hidden"]):not([type="submit"]):not([type="button"]),
  body select:not([hidden]):not([data-x1]):not([data-x2]),
  body textarea:not([hidden]):not([data-x1]):not([data-x2]) { font-size: var(--fs-feld); }
}

/* --- Tabellen im Lesetext am Handy: Zellen und Kopf mindestens 16 px, Kopf ohne Großschrift (Valerie M3: td 14 px, th 11 px) --- */
@media (max-width: 720px) {
  .note-content .styled-table, .note-content .styled-table td, .note-content .styled-table th { font-size: var(--fs-feld); }
  .note-content .styled-table th { text-transform: none; letter-spacing: normal; color: var(--fg-strong); }
}

/* Kommentarstatus lesbar: Text in der Schriftfarbe (4,5:1), die Farbe steht im Rand davor (Selbsttest Q-06: „offen“ 2,5:1) */
.comment-status.offen, .comment-status.erledigt { color: var(--fg); font-weight: 600; }
.comment-status.offen::before, .comment-status.erledigt::before { content: ""; display: inline-block; width: var(--s-2); height: var(--s-2); margin-inline-end: var(--s-1); border-radius: var(--r-full); background: var(--st-waiting); }
.comment-status.erledigt::before { background: var(--st-done); }

/* Tabellen am Handy: Zellen mit Mindestbreite, Wörter brechen nie mitten im Wort (Valerie M-A, vorher Q-31) */
@media (max-width: 720px) {
  /* Spalten bleiben so breit, dass Wörter ganz stehen (nie „Sch/mal“); reicht die Spalte nicht, scrollt der Block, die erste Spalte steht fest (Valerie M-A) */
  .note-content .styled-table td, .note-content .styled-table th { min-width: 7em; overflow-wrap: normal; word-break: normal; hyphens: manual; }
}

/* Fester „Bearbeiten“-Knopf: weicht beim Scrollen nach unten zur Seite aus (wie der Larry-Knopf), damit er nie auf „Zu Aufgabe“ & Co. liegen bleibt (Selbsttest B13) */
@media (max-width: 720px) {
  .lese-bearbeiten { transition: transform var(--dur) var(--ease); }
  .lese-bearbeiten.lese-bearbeiten-weg { transform: translateX(calc(-100% - var(--s-5))); }
}

/* Chips im Seitenkopf am Handy: 44 px Tippfläche statt 36 px (Selbsttest Q-05: „Plan“, „Frist“); die Zeile bricht um, nichts wird breiter */
@media (max-width: 720px), (pointer: coarse) {
  .objekt-kopf .property-chip, .objekt-kopf .dw, .objekt-kopf .dw-feld, .objekt-kopf .schnell-knopf, .kopf-schnell .schnell-knopf { min-height: var(--tap); }
}

/* Breite Tabellen am Handy: scrollt der Block seitwärts, bleibt die erste Spalte stehen (verankert, ab drei Spalten), damit man nie ohne Zeilenbezug liest
 * (Moritz: kein unverankerter Quer-Scroll; Selbsttest Q-31). Opaker Grund, sonst scheint der Text darunter durch. */
@media (max-width: 720px) {
  .table-wrap table:has(tr > :nth-child(3)) tr > :first-child, .table-scroll table:has(tr > :nth-child(3)) tr > :first-child {
    position: sticky; left: 0; z-index: 1; background: var(--surface-3); box-shadow: 1px 0 0 var(--line-strong);
  }
}

/* Listenzeilen am Handy: der Titel einer Karte ist eine 44-px-Zeile (Valerie M-C: 316 x 38 und 316 x 24 px in der Projektliste) */
@media (max-width: 720px), (pointer: coarse) {
  /* Zwei Zeilen genau 44 px hoch (Zeilenhöhe = halbe Tippfläche), nie eine angeschnittene dritte Zeile (Valerie N-6: min-height über dem Klemmmaß ließ sie durchscheinen) */
  a.card-title, .dash-wrap .task-card > a.card-title, .dash-wrap .list-group .task-card > a.card-title, .dash-wrap .tree-node .task-card > a.card-title { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-height: calc(var(--tap) / 2); min-height: var(--tap); max-height: var(--tap); overflow: hidden; padding-block: 0; }
}

/* Zusammenfassungen mit Zähler („Herkunft und Technik · 10 Angaben“): Text und Zähler auf einer Mittellinie (Valerie L-B: „schief“) */
details > summary { align-items: center; }
.eig-technik > summary, .note-unten details > summary { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); }
.blick-link .blick-zahl { margin-inline-start: var(--s-1); }

/* Kästchen im PDF-Anlegen-Fenster wie die übrigen (Valerie N-14: im Dunkelmodus weiß und grell): eigene Zeichnung, Tippfläche 44 px über das Label */
.pdf-popover input[type="checkbox"] { appearance: none; -webkit-appearance: none; flex: none; display: inline-grid; place-items: center; width: var(--tap); height: var(--tap); margin: 0; border: 0; background: transparent; cursor: pointer; }
.pdf-popover input[type="checkbox"]::before { content: ""; box-sizing: border-box; width: var(--s-5); height: var(--s-5); border: 2px solid var(--fg-muted); border-radius: var(--r-2); display: grid; place-items: center; font-size: var(--fs-md); line-height: 1; color: var(--on-accent); }
.pdf-popover input[type="checkbox"]:checked::before { content: "✓"; background: var(--accent); border-color: var(--accent); }
.pdf-popover input[type="checkbox"]:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: var(--r-2); }
/* 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); }
/* Checkliste ("- [ ]") ohne Aufzaehlungspunkt: das Kaestchen ersetzt den Punkt (Moritz 2026-10-22, iPhone: Punkt UND Kaestchen). */
li.todo { list-style: none; }
ul > li.todo > input[type="checkbox"], ol > li.todo > input[type="checkbox"] { margin-inline-start: calc(-1 * var(--s-6)); }

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

/* --- Was noch zu tun ist: Arbeitsfelder ------------------------------------------------------------------------------- */
/* Karten untereinander am Handy; am Rechner zwei bis drei nebeneinander. Fläche, Rand und Schrift wie die Karten des Boards. */
.ent-af-liste { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); gap: var(--s-3); align-items: stretch; }
.ent-af { display: flex; flex-direction: column; gap: var(--s-2); padding: var(--s-3) var(--s-4); }
.ent-af-kopf { display: grid; grid-template-columns: auto 1fr; gap: var(--s-3); align-items: start; }
.ent-af-titel { overflow-wrap: anywhere; }
.ent-af .ent-chips { margin-top: 0; }
.ent-af-ziel { margin: 0; color: var(--fg-strong); font-size: var(--fs-md); overflow-wrap: anywhere; }
.ent-af-messung, .ent-af-mehr { margin: 0; color: var(--fg-muted); font-size: var(--fs-ui); overflow-wrap: anywhere; }
.ent-af-messung .ent-etikett, .ent-af-mehr .ent-etikett { display: block; margin-bottom: var(--s-1); }
.ent-af .ent-fortschritt { margin: 0; }
.ent-af-leer { margin: 0; color: var(--fg-subtle); font-size: var(--fs-ui); }
.ent-af-zahlen { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-3); color: var(--fg-muted); font-size: var(--fs-ui); }
.ent-af-n { color: var(--fg-strong); font-weight: 600; font-variant-numeric: tabular-nums; }
.ent-af-weiter { margin-top: 0; }
.ent-af-weiter[open] { gap: var(--s-2); }
.ent-af .ent-e-fuss { margin-top: auto; padding-top: var(--s-1); }   /* die Knöpfe stehen in jeder Reihe auf einer Linie */
.ent-af .ent-komm-panel, .ent-af .ent-status { margin-top: var(--s-1); }
.ent-feld-chip { white-space: nowrap; }
.ent-af-fuss { justify-content: flex-start; gap: var(--s-1) var(--s-4); }
.ent-af-fuss .ent-link { display: inline-flex; align-items: center; min-height: var(--s-5); font-size: var(--fs-ui); }
.ent-af-ganz { margin: 0 0 var(--s-3); }
@media (max-width: 720px) {
  .ent-af-fuss .ent-link, .ent-af-ganz .ent-link { min-height: var(--tap); }
}
/* Handy: eine Zeile je Karte (QA 2026-10-19 B1: 14 Karten waren 6900 px lang). Zeile: Nummer, Kurztitel, Balken, Zähler, Chip der Linie; alles
   andere (Ziel, Stand, Zahlen, Kommentar, Links) steht aufgeklappt darunter (`<details>`, Tippfläche `--tap`). „Läuft“ und „Als Nächstes“ stehen
   zuerst. Am Rechner (über 720 px) ist die Zeile weg und alles steht ohne Klick da wie bisher; die Karte ist dort ein `<details>` ohne Kopf. */
.ent-af { padding: 0; }
.ent-af-auf { display: flex; flex: 1; flex-direction: column; }
.ent-af-voll { display: flex; flex: 1; flex-direction: column; gap: var(--s-2); padding: var(--s-3) var(--s-4); }
.ent-af-kurz { display: none; }
.ent-af-auf::details-content { display: flex; flex: 1; flex-direction: column; content-visibility: visible; }
@media (max-width: 720px) {
  .ent-af-auf:not([open])::details-content { content-visibility: hidden; }
  .ent-af-kurz {
    display: grid; grid-template-columns: var(--s-5) minmax(0, 1fr) var(--s-4); align-items: center; gap: var(--s-1) var(--s-3);
    min-height: var(--tap); padding: var(--s-2) var(--s-3); list-style: none; cursor: pointer;
  }
  .ent-af-kurz::-webkit-details-marker { display: none; }
  .ent-af-kurz::after {
    content: ""; grid-column: 3; grid-row: 1; justify-self: center; width: var(--s-2); height: var(--s-2); margin-top: calc(var(--s-1) * -1);
    border-right: 2px solid var(--fg-muted); border-bottom: 2px solid var(--fg-muted); transform: rotate(45deg);
  }
  .ent-af-auf[open] > .ent-af-kurz::after { margin-top: var(--s-1); transform: rotate(225deg); }
  .ent-af-kurz:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: var(--r-2); }
  .ent-af-kurztitel {
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere;
    color: var(--fg-strong); font-size: var(--fs-ui); font-weight: 600; line-height: var(--lh-tight);
  }
  .ent-af-kurzfort { grid-column: 2 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1) var(--s-2); min-width: 0; color: var(--fg-muted); font-size: var(--fs-sm); }
  .ent-af-kurzfort .progress-bar-bg { width: var(--s-7); flex: none; }
  .ent-af-kurz .property-chip { display: inline-flex; align-items: center; min-height: 0; padding: 0 var(--s-2); }   /* keine Eingabe: die ganze Zeile ist die Tippfläche */
  .ent-af-kurzzahl { font-variant-numeric: tabular-nums; white-space: nowrap; }
  .ent-af-voll { padding: 0 var(--s-3) var(--s-3); }
  /* Die Nummer und die Zeile über der Karte nennen den Titel schon; der volle Titel steht nur noch da, wenn die Zeile ihn gekürzt hat. */
  .ent-af-voll .ent-af-kopf { grid-template-columns: 1fr; }
  .ent-af-voll .ent-af-kopf .ent-nr, .ent-af[data-kurz="gleich"] .ent-af-voll .ent-af-kopf, .ent-af-voll .ent-fortschritt { display: none; }
  .ent-af .ent-af-voll .ent-chips span.property-chip.ent-chip-linie { display: none; }   /* die Zeile darüber zeigt es schon (stärker als `grundlagen.css`) */
  .ent-af-voll .ent-chips:empty { display: none; }
  .ent-af-voll .ent-af-titel { font-size: var(--fs-ui); font-weight: 500; color: var(--fg-muted); }
  .ent-af[data-linie="laeuft"] { order: -2; }
  .ent-af[data-linie="naechstes"] { order: -1; }
}
.ent-af-fuss .ent-komm-knopf { padding: 0; font-size: var(--fs-ui); }   /* gleiche Schrift und Kante wie die beiden Links daneben */

/* --- Karten-Durchsicht an den Arbeitsfeld-Karten (Fortschritt je Kartentyp) ------------------------------------------- */
/* Satz, schmaler Balken, Zwischenstufen. Der Balken trägt role="progressbar" und Text daneben; Farbe ist nie der einzige Hinweis. */
.ent-dz { display: flex; flex-direction: column; gap: var(--s-2); padding-top: var(--s-2); border-top: 1px solid var(--line); }
.ent-dz-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-3); }
.ent-dz-zeile { display: flex; flex-direction: column; gap: var(--s-1); }
.ent-dz-satz, .ent-dz-detail, .ent-dz-stand { margin: 0; overflow-wrap: anywhere; }
.ent-dz-satz { color: var(--fg-strong); font-size: var(--fs-ui); }
.ent-dz-prozent, .ent-dz-detail, .ent-dz-stand { color: var(--fg-muted); font-size: var(--fs-ui); }
.ent-dz-offen { color: var(--fg-muted); font-style: italic; }
.ent-dz-balken { display: block; height: var(--s-2); max-width: 100%; border-radius: var(--r-full); background: var(--surface-4); border: 1px solid var(--line-strong); overflow: hidden; }
.ent-dz-fuell { display: block; height: 100%; background: var(--accent); }
/* Wissen: Ueberblick, Wissenselemente, Literatur, Gliederung (K86). Nur Tokens aus tokens.css/theme.css.
 * Handy zuerst: Tippflaechen mindestens --tap, nichts laeuft seitwaerts. Art traegt nie nur Farbe: Text und Form dazu. */

.wi-wurzel { display: grid; gap: var(--s-3); align-content: start; min-width: 0; }
.wi-wurzel > * { min-width: 0; }
.wi-wurzel .view-heading { margin-bottom: 0; }
.wi-kopfzeile { align-items: flex-start; }
.wi-neu { flex: none; border: 1px solid var(--line-strong); background: var(--surface-3); color: var(--fg-strong); min-height: 36px; display: inline-flex; align-items: center; padding: 0 var(--s-3); }
.wi-h2 { margin: var(--s-3) 0 var(--s-1); font-size: var(--fs-lg); color: var(--fg-strong); }
.wi-hinweis { margin: 0 0 var(--s-2); color: var(--fg-muted); font-size: var(--fs-sm); }
.wi-zahl { color: var(--fg-muted); font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
.wi-leer { margin: 0; color: var(--fg-muted); font-size: var(--fs-ui); }

/* --- Art-Chip: Farbe, Text und eine kleine Form --------------------------------------------------------- */
.wi-art {
  display: inline-flex; align-items: center; gap: var(--s-1); padding: var(--s-1) var(--s-2); border-radius: var(--r-full);
  border: 1px solid var(--mark-gelb-kante); background: var(--mark-gelb); color: var(--mark-fg);
  font-size: var(--fs-sm); font-weight: 600; line-height: var(--lh-tight); white-space: nowrap;
}
.wi-art::before { content: ""; width: 7px; height: 7px; border-radius: var(--r-full); background: currentColor; flex: none; }
.wi-art[data-art="indirektes_zitat"] { border-color: var(--mark-blau-kante); background: var(--mark-blau); }
.wi-art[data-art="indirektes_zitat"]::before { border-radius: 0; }
.wi-art[data-art="zusammenfassung"] { border-color: var(--mark-gruen-kante); background: var(--mark-gruen); }
.wi-art[data-art="zusammenfassung"]::before { border-radius: 0; transform: rotate(45deg); }
.wi-art[data-art="gedanke"] { border-color: var(--relation-border); background: var(--relation-soft); color: var(--chip-relation); }
.wi-art[data-art="gedanke"]::before { height: 3px; border-radius: 0; width: 9px; }
.wi-art[data-art="bild"] { border-color: var(--mark-rot-kante); background: var(--mark-rot); }
.wi-art[data-art="bild"]::before { border-radius: 0; width: 9px; height: 6px; }

/* --- Filter -------------------------------------------------------------------------------------------- */
.wi-filter { display: grid; gap: var(--s-2); padding: var(--s-3); border: 1px solid var(--line); border-radius: var(--r-3); background: var(--surface-2); }
.wi-filter-zeile { display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: flex-end; }
.wi-suche { flex: 1 1 16rem; min-width: 0; min-height: 40px; font-size: var(--fs-md); }
.wi-suchen { min-height: 40px; padding: 0 var(--s-4); }
.wi-feld-label { display: grid; gap: var(--s-1); font-size: var(--fs-sm); color: var(--fg-muted); min-width: 0; flex: 1 1 9rem; }
.wi-feld-label select, .wi-feld-label input { min-height: 40px; min-width: 0; width: 100%; font-size: var(--fs-ui); }
.wi-filter-zwei { align-items: flex-end; }
.wi-feld { flex: 1 1 9rem; position: relative; min-width: 0; align-self: flex-end; }
.wi-feld-knopf {
  display: flex; align-items: center; min-height: 40px; padding: 0 var(--s-3); border: 1px solid var(--line); border-radius: var(--r-2);
  background: var(--surface-1); color: var(--fg); font-size: var(--fs-ui); cursor: pointer; list-style: none;
}
.wi-feld-knopf::-webkit-details-marker { display: none; }
.wi-feld-knopf::after { content: "▾"; margin-left: auto; color: var(--fg-muted); }
.wi-feld[open] > .wi-feld-knopf { border-color: var(--accent-border); }
.wi-feld-knopf:hover { border-color: var(--line-strong); }
.wi-kat-inhalt {
  margin-top: var(--s-1); padding: var(--s-3); border: 1px solid var(--line-strong); border-radius: var(--r-3); background: var(--surface-2);
  max-height: 60vh; overflow: auto; min-width: min(100%, 22rem);
}
.wi-baum, .wi-baum ul { list-style: none; margin: 0; padding: 0; }
.wi-baum ul { margin-left: var(--s-4); border-left: 1px solid var(--line); }
.wi-baum summary, .wi-blatt { display: flex; align-items: center; gap: var(--s-2); min-height: 36px; list-style: none; cursor: pointer; }
.wi-baum summary::-webkit-details-marker { display: none; }
.wi-baum .wi-ast > summary::before { content: "▸"; width: var(--s-3); color: var(--fg-muted); flex: none; }
.wi-baum .wi-ast[open] > summary::before { content: "▾"; }
.wi-blatt { cursor: default; padding-left: var(--s-4); }
.wi-haken { position: relative; display: inline-flex; align-items: center; justify-content: center; min-width: 36px; min-height: 36px; margin: 0; cursor: pointer; }
/* Haken, Schalter und Auswahlpunkt: das Eingabefeld deckt die ganze Tippflaeche (Label), das sichtbare Kaestchen ist ::before */
.wi-haken input, .wi-schalter input, .wi-radio input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; opacity: 0; cursor: pointer; }
.wi-haken::before, .wi-schalter::before, .wi-radio::before {
  content: ""; box-sizing: border-box; width: 18px; height: 18px; flex: none; display: inline-flex; align-items: center; justify-content: center;
  border: 2px solid var(--fg-muted); border-radius: var(--r-1); background: var(--surface-1); color: var(--on-accent); font-size: var(--fs-sm); line-height: 1;
}
.wi-radio::before { border-radius: var(--r-full); }
.wi-haken:has(input:checked)::before, .wi-schalter:has(input:checked)::before { content: "✓"; background: var(--accent); border-color: var(--accent); }
.wi-radio:has(input:checked)::before { background: var(--accent); border-color: var(--accent); box-shadow: inset 0 0 0 3px var(--surface-1); }
.wi-kat-name { flex: 1 1 auto; min-width: 0; font-size: var(--fs-ui); color: var(--fg); overflow-wrap: anywhere; }
.wi-kat-knoepfe { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-3); position: sticky; bottom: 0; background: var(--surface-2); padding-top: var(--s-2); }
.wi-arten { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.wi-wahl { display: inline-flex; align-items: center; gap: var(--s-2); min-height: 36px; padding: 0 var(--s-2); border: 1px solid var(--line); border-radius: var(--r-full); background: var(--surface-1); cursor: pointer; }
.wi-wahl:hover { border-color: var(--line-strong); background: var(--surface-3); }
.wi-wahl { position: relative; }
.wi-wahl input { position: absolute; opacity: 0; width: calc(100% + 2px); height: calc(100% + 2px); inset: -1px; margin: 0; cursor: pointer; }
.wi-wahl:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.wi-wahl:has(input:checked)::before { content: "✓"; color: var(--fg-strong); font-size: var(--fs-sm); font-weight: 700; }
.wi-wahl:focus-within, .wi-haken:focus-within, .wi-schalter:focus-within, .wi-radio:focus-within, .wi-feld-knopf:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

.wi-zusammen { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-4); }
.wi-zaehler { margin: 0; color: var(--fg-muted); font-size: var(--fs-ui); }
.wi-zaehler strong { color: var(--fg-strong); font-variant-numeric: tabular-nums; }
.wi-aktive { display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center; }
.wi-aktiv {
  display: inline-flex; align-items: center; gap: var(--s-2); min-height: 32px; padding: 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); max-width: 100%;
}
.wi-aktiv:hover { background: var(--surface-3); }
.wi-aktiv-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 28ch; }
.wi-zurueck { font-size: var(--fs-sm); color: var(--fg-muted); text-decoration: underline; padding: var(--s-2) var(--s-1); }

.wi-werkzeuge { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; }
.wi-schalter { position: relative; display: inline-flex; align-items: center; gap: var(--s-2); min-height: 36px; font-size: var(--fs-ui); color: var(--fg); cursor: pointer; }

/* Unsichtbares Feld fuer den Kopier-Notbehelf ohne Zwischenablage-Schnittstelle */
.wi-kopierfeld { position: fixed; top: 0; left: 0; opacity: 0; pointer-events: none; }

/* --- Knoepfe --------------------------------------------------------------------------------------------- */
.wi-knopf {
  display: inline-flex; align-items: center; justify-content: center; min-height: 36px; padding: 0 var(--s-3); border: 1px solid var(--line-strong);
  border-radius: var(--r-2); background: var(--surface-3); color: var(--fg-strong); font-size: var(--fs-ui); cursor: pointer; text-align: center; white-space: normal; min-width: 0; overflow-wrap: anywhere;
}
.wi-knopf:hover { background: var(--surface-4); }
.wi-knopf:focus-visible, .wi-link:focus-visible, .wi-chip:focus-visible, .gl-el:focus-visible, .li-label:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.wi-kopieren { border-color: var(--accent-border); background: var(--accent-soft); font-weight: 600; }
.wi-kopieren:hover { background: var(--surface-3); }
.wi-kopieren.kopiert { border-color: var(--ok); }

/* --- Karte ----------------------------------------------------------------------------------------------- */
.wi-liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 26rem), 1fr)); gap: var(--s-3); align-items: start; }
.wi-karte, .wi-zitatkarte {
  display: grid; gap: var(--s-2); padding: var(--s-3) var(--s-4); border: 1px solid var(--line); border-radius: var(--r-3);
  background: var(--surface-2); min-width: 0;
}
.wi-karte:hover { border-color: var(--line-strong); }
.wi-karte:focus-within { border-color: var(--accent-border); }
.wi-kopf { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); min-width: 0; }
.wi-quelle { color: var(--fg-strong); font-size: var(--fs-ui); font-weight: 600; overflow-wrap: anywhere; }
.wi-quelle:hover { color: var(--accent); }
.wi-quelle-lose { color: var(--fg-muted); font-weight: 400; }
.wi-kopf .wi-seite { color: var(--fg-muted); font-size: var(--fs-sm); white-space: nowrap; font-variant-numeric: tabular-nums; }
.wi-kern { margin: 0; font-size: var(--fs-md); font-weight: 600; line-height: var(--lh-tight); color: var(--fg-strong); overflow-wrap: anywhere; }
.wi-kern a { color: inherit; overflow-wrap: anywhere; }
.wi-kern a:hover { color: var(--accent); }
.wi-text, .wi-wortlaut { margin: 0; font-size: var(--fs-ui); line-height: var(--lh-base); color: var(--fg); overflow-wrap: anywhere; white-space: pre-line; }
.wi-wortlaut { padding-left: var(--s-3); border-left: 3px solid var(--mark-gelb-kante); color: var(--fg); }
.wi-bild { max-width: 100%; max-height: 16rem; object-fit: contain; border-radius: var(--r-2); border: 1px solid var(--line); background: var(--surface-1); justify-self: start; }
.wi-lang > summary { list-style: none; cursor: pointer; display: grid; gap: var(--s-1); }
.wi-lang > summary::-webkit-details-marker { display: none; }
.wi-lang-knopf { color: var(--accent); font-size: var(--fs-sm); }
.wi-lang-knopf::before { content: "▸ "; }
.wi-lang[open] .wi-kurz, .wi-lang[open] .wi-lang-knopf { display: none; }
.wi-lang > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.wi-lang .wi-voll { margin-top: var(--s-1); }
.wi-lang:not([open]) .wi-voll { display: none; }
.wi-lang[open] > summary::after { content: "Weniger anzeigen"; color: var(--accent); font-size: var(--fs-sm); }
.wi-kats, .wi-kat-zeile { display: flex; flex-wrap: wrap; gap: var(--s-1); }
.wi-chip {
  display: inline-flex; align-items: center; max-width: 100%; padding: var(--s-1) var(--s-2); border: 1px solid var(--tag-border); border-radius: var(--r-1);
  background: var(--tag-soft); color: var(--fg-muted); font-size: var(--fs-sm); overflow-wrap: anywhere; min-width: 0;
}
a.wi-chip:hover { color: var(--fg-strong); border-color: var(--line-strong); }
.wi-aktionen { display: flex; flex-wrap: wrap; gap: var(--s-2); padding-top: var(--s-1); }
.wi-fuss { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-3); align-items: center; font-size: var(--fs-sm); color: var(--fg-muted); }
.wi-link { color: var(--accent); }
.wi-link:hover { text-decoration: underline; }
.wi-zitatkarte { margin: var(--s-3) 0; border-left: 4px solid var(--mark-gelb-kante); }
.wi-zitatkarte[data-art="indirektes_zitat"] { border-left-color: var(--mark-blau-kante); }
.wi-zitatkarte[data-art="zusammenfassung"] { border-left-color: var(--mark-gruen-kante); }
.wi-zitatkarte[data-art="gedanke"] { border-left-color: var(--relation-border); }
.wi-zitatkarte[data-art="bild"] { border-left-color: var(--mark-rot-kante); }

/* --- Fenster (In Notiz einfuegen, Quellenliste) ------------------------------------------------------------ */
.wi-dialog { width: min(32rem, calc(100% - var(--s-5))); 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); }
.wi-dialog::backdrop { background: var(--scrim); }
.wi-dlg-form { display: grid; gap: var(--s-3); padding: var(--s-4); }
.wi-dlg-form h2 { margin: 0; font-size: var(--fs-lg); color: var(--fg-strong); }
.wi-dlg-element { margin: 0; color: var(--fg-muted); font-size: var(--fs-ui); overflow-wrap: anywhere; }
.wi-dlg-feld { display: grid; gap: var(--s-1); font-size: var(--fs-sm); color: var(--fg-muted); }
.wi-dlg-feld input, .wi-dlg-feld select { min-height: 40px; font-size: var(--fs-ui); width: 100%; }
.wi-dlg-wege { display: grid; gap: var(--s-1); border: 0; padding: 0; margin: 0; }
.wi-dlg-wege legend { padding: 0; font-size: var(--fs-sm); color: var(--fg-muted); }
.wi-radio { position: relative; display: flex; align-items: center; gap: var(--s-2); min-height: 36px; font-size: var(--fs-ui); color: var(--fg); cursor: pointer; }
.wi-dlg-knoepfe { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.wi-dlg-knoepfe button { min-height: 40px; padding: 0 var(--s-4); }
.wi-liste-nummern { margin: 0; padding-left: var(--s-5); display: grid; gap: var(--s-1); font-size: var(--fs-ui); max-height: 50vh; overflow: auto; }

/* --- Hilfe ------------------------------------------------------------------------------------------------- */
.wi-hilfe { border: 1px solid var(--line); border-radius: var(--r-3); background: var(--surface-2); padding: 0 var(--s-4); }
.wi-hilfe > summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; font-weight: 600; color: var(--fg-strong); font-size: var(--fs-ui); }
.wi-hilfe > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.wi-schritte { margin: 0 0 var(--s-3); padding-left: var(--s-5); display: grid; gap: var(--s-2); font-size: var(--fs-ui); line-height: var(--lh-base); color: var(--fg); }

/* --- Ueberblick ------------------------------------------------------------------------------------------- */
.wi-naechster-zeile { margin: 0; }
.wi-naechster { display: inline-flex; align-items: center; min-height: 36px; padding: var(--s-1) var(--s-3); border: 1px solid var(--warn); border-radius: var(--r-2); background: var(--surface-2); color: var(--fg-strong); font-size: var(--fs-ui); }
a.wi-naechster:hover { background: var(--surface-3); }
.wi-kacheln { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: var(--s-3); }
.wi-kachel { display: grid; 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); min-height: var(--tap); }
.wi-kachel:hover { border-color: var(--accent-border); background: var(--surface-3); }
.wi-kachel:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.wi-kachel-zahl { font-size: var(--fs-2xl); font-weight: 700; color: var(--fg-strong); font-variant-numeric: tabular-nums; line-height: var(--lh-tight); }
.wi-kachel-name { font-size: var(--fs-md); font-weight: 600; color: var(--fg-strong); }
.wi-kachel-text { font-size: var(--fs-ui); color: var(--fg-muted); }
.wi-zwei { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); gap: var(--s-3); }
.wi-zwei .card { margin: 0; }
.wi-proj-liste { list-style: none; margin: 0; padding: 0; }
.wi-proj { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); min-height: var(--tap); padding: 0 var(--s-1); border-top: 1px solid var(--line); color: var(--fg); font-size: var(--fs-ui); }
.wi-proj:hover { background: var(--surface-3); }
.wi-proj-liste li:first-child .wi-proj { border-top: 0; }

/* --- Literatur --------------------------------------------------------------------------------------------- */
.li-kopfzeile { display: none; }
.li-liste { border: 1px solid var(--line); border-radius: var(--r-3); background: var(--surface-2); overflow: hidden; }
.li-zeile { display: grid; gap: var(--s-2); padding: var(--s-3) var(--s-4); }
.li-zeile + .li-zeile { border-top: 1px solid var(--line); }
.li-zeile:hover { background: var(--surface-3); }
.li-haupt { display: grid; gap: var(--s-1); min-width: 0; }
.li-label { font-size: var(--fs-md); font-weight: 600; color: var(--fg-strong); overflow-wrap: anywhere; }
.li-label:hover { color: var(--accent); }
.li-titel { font-size: var(--fs-ui); color: var(--fg); overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.li-autoren { font-size: var(--fs-sm); color: var(--fg-muted); overflow-wrap: anywhere; }
.li-meta { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-3); font-size: var(--fs-sm); color: var(--fg-muted); align-items: baseline; min-width: 0; }
.li-jahr { font-variant-numeric: tabular-nums; color: var(--fg); }
.li-journal { overflow-wrap: anywhere; }
.li-seite { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-3); align-items: center; }
.li-anzahl, .li-pdf { font-size: var(--fs-ui); color: var(--accent); min-height: 32px; display: inline-flex; align-items: center; }
.li-anzahl:hover, .li-pdf:hover { text-decoration: underline; }
.li-anzahl-leer, .li-pdf-fehlt { color: var(--fg-muted); }
.li-anzahl-leer:hover, .li-pdf-fehlt:hover { text-decoration: none; }
.li-hinweis {
  display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--s-1) var(--s-2); width: fit-content; max-width: 100%; min-height: 32px; padding: var(--s-1) var(--s-2);
  border: 1px solid var(--warn); border-radius: var(--r-1); background: var(--surface-1); color: var(--fg-strong); font-size: var(--fs-sm); font-weight: 600;
}
.li-hinweis:hover { background: var(--surface-3); }
.li-hinweis-was { font-weight: 400; color: var(--fg-muted); }
.li-detail-titel { margin: 0; font-size: var(--fs-xl); color: var(--fg-strong); overflow-wrap: anywhere; }
.li-detail-lang { margin: 0; font-size: var(--fs-md); color: var(--fg); overflow-wrap: anywhere; }
.li-detail-meta { display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center; margin: 0; }
.li-detail-knoepfe { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.li-detail-knoepfe .nav-btn { min-height: 40px; display: inline-flex; align-items: center; border: 1px solid var(--line-strong); padding: 0 var(--s-3); }
.li-detail-knoepfe .nav-btn.primary { border-color: transparent; }

/* --- Gliederung ---------------------------------------------------------------------------------------------- */
.gl-reiter-zahl { color: var(--fg-muted); font-size: var(--fs-sm); font-variant-numeric: tabular-nums; margin-left: var(--s-1); }
.gl-werkzeuge { display: flex; gap: var(--s-2); flex-wrap: wrap; }
.gl-baum, .gl-baum ul { list-style: none; margin: 0; padding: 0; }
.gl-baum { border: 1px solid var(--line); border-radius: var(--r-3); background: var(--surface-2); padding: var(--s-2) var(--s-3); }
.gl-kinder { margin-left: var(--s-3); padding-left: var(--s-3); border-left: 1px solid var(--line); }
.gl-kopf { display: flex; align-items: center; gap: var(--s-2); min-height: 40px; list-style: none; cursor: pointer; padding: 0 var(--s-1); border-radius: var(--r-2); }
.gl-kopf::-webkit-details-marker { display: none; }
.gl-ast > .gl-kopf::before { content: "▸"; width: var(--s-3); color: var(--fg-muted); flex: none; }
.gl-ast[open] > .gl-kopf::before { content: "▾"; }
.gl-leer { cursor: default; padding-left: calc(var(--s-3) + var(--s-2) + var(--s-1)); color: var(--fg-muted); }
.gl-kopf:hover { background: var(--surface-3); }
.gl-leer:hover { background: transparent; }
.gl-kopf:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.gl-name { flex: 1 1 auto; min-width: 0; font-size: var(--fs-ui); font-weight: 600; color: var(--fg-strong); overflow-wrap: anywhere; }
.gl-leer .gl-name { font-weight: 400; color: var(--fg-muted); }
.gl-zahl { flex: none; min-width: 28px; 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); text-align: center; font-variant-numeric: tabular-nums; }
.gl-zahl-quellen { background: var(--tag-soft); border-color: var(--tag-border); color: var(--fg-muted); }
.gl-inhalt { padding: 0 0 var(--s-2) var(--s-4); display: grid; gap: var(--s-1); }
.gl-elemente { display: grid; gap: 0; }
.gl-el { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s-1) var(--s-2); align-items: center; min-height: 36px; padding: var(--s-1) var(--s-2); border-radius: var(--r-2); color: var(--fg); }
.gl-el:hover { background: var(--surface-3); }
.gl-el-titel { font-size: var(--fs-ui); overflow-wrap: anywhere; }
.gl-el-quelle { grid-column: 2; font-size: var(--fs-sm); color: var(--fg-muted); overflow-wrap: anywhere; }
.gl-quellen > summary { min-height: 36px; display: flex; align-items: center; cursor: pointer; color: var(--fg-muted); font-size: var(--fs-sm); }
.gl-quellen ul { display: grid; gap: 0; padding-left: var(--s-3); }
.gl-quelle { display: grid; gap: 0; padding: var(--s-1) var(--s-2); border-radius: var(--r-2); color: var(--accent); font-size: var(--fs-ui); min-height: 32px; }
.gl-quelle:hover { background: var(--surface-3); }
.gl-quelle-titel { color: var(--fg-muted); font-size: var(--fs-sm); overflow-wrap: anywhere; }

/* --- Breite ------------------------------------------------------------------------------------------------ */
@media (min-width: 901px) {
  .li-kopfzeile, .li-zeile { display: grid; grid-template-columns: minmax(0, 1fr) 14rem 12rem; gap: var(--s-4); align-items: start; }
  .li-kopfzeile { padding: 0 var(--s-4); color: var(--fg-muted); font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: var(--tracking-label); }
  .li-seite { justify-content: flex-end; }
}

/* --- Handy und Beruehrung: Flaechen mindestens --tap -------------------------------------------------------- */
@media (max-width: 720px), (hover: none) {
  .wi-knopf, .wi-neu, .wi-suchen, .wi-suche, .wi-feld-knopf, .wi-feld-label select, .wi-feld-label input, .wi-wahl, .wi-schalter,
  .wi-aktiv, .wi-radio, .wi-dlg-knoepfe button, .wi-dlg-feld input, .wi-dlg-feld select, .li-anzahl, .li-pdf, .li-hinweis,
  .wi-baum summary, .wi-blatt, .gl-kopf, .gl-el, .gl-quelle, .gl-quellen > summary, .wi-kat-knoepfe button, .wi-zurueck { min-height: var(--tap); }
  .wi-haken { min-width: var(--tap); min-height: var(--tap); }
  /* WebKit uebernimmt min-height bei Auswahlfeldern nicht (app.css setzt 18 px): die Hoehe selbst setzen */
  .wi-feld-label select, .wi-dlg-feld select, .wi-feld-label input, .wi-dlg-feld input { height: var(--tap); }
  /* Titel und Quelle einer Karte: der Link ist die ganze Zeile */
  .wi-kern a, .wi-quelle, .li-label, .gl-name { display: flex; align-items: center; min-height: var(--tap); }
  .wi-quelle { display: inline-flex; }
  .wi-zurueck { display: inline-flex; align-items: center; }
  a.wi-chip, .wi-wurzel > .eyebrow a, .wi-wurzel > .muted-line a { display: inline-flex; align-items: center; min-height: var(--tap); }
  .wi-aktionen .wi-knopf { flex: 1 1 8rem; }
  .li-detail-knoepfe .nav-btn { min-height: var(--tap); }
}
.wi-hinweistext { color: var(--fg-muted); font-style: italic; }
@media (max-width: 720px) { .wi-feld { flex: 1 1 100%; } }
/* Komponenten des View-Systems (Welle 0): Eintrag (Zeile, Karte, kompakt), Eigenschafts-Chip, Kartenliste.
   Weitere Komponenten (Blatt, Tabelle, Kopf, Reiter, Filter, Zustände): komponenten_flaechen.css.
   Erzeuger: ui/eintrag.py, ui/chip.py, Register und Zustandsmatrix: ui/katalog.py, Vorführung: /baukasten.
   Regeln: nur Tokens (DESIGN.md); alle Klassen tragen das Präfix vk- (die Klassen-Ratsche kennt es); die Größe richtet sich nach der
   Breite des BEHÄLTERS (@container der Liste), nicht nach dem Bildschirm. Behälter-Grenzen: 30rem (schmal) und 48rem (breit). */

.vk-liste { container: vk-liste / inline-size; min-width: 0; }
.vk-liste__eintraege { display: grid; min-width: 0; }

/* --- Eintrag, gemeinsame Teile ------------------------------------------------------------------------------------------ */
.vk-eintrag {
  position: relative; box-sizing: border-box; min-width: 0; min-height: var(--tap);
  display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: var(--s-3); align-items: start;
  padding: var(--s-2) var(--s-3); background: var(--layer-card); color: var(--fg);
}
.vk-eintrag:hover { background: var(--surface-3); }
.vk-eintrag:focus-within { outline: 2px solid var(--accent); outline-offset: -2px; }
.vk-eintrag__haupt { min-width: 0; display: grid; gap: var(--s-1); }
.vk-eintrag__kopf { min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; column-gap: var(--s-2); }
.vk-eintrag__titel {
  min-width: 0; max-width: 100%; color: var(--fg-strong); font-size: var(--fs-md); font-weight: 500; line-height: var(--lh-tight);
  text-decoration: none; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden;
}
/* Die ganze Fläche ist die Tippfläche: der Titel-Link spannt sich über den Eintrag, Chips und Knöpfe liegen darüber. */
a.vk-eintrag__titel::after { content: ""; position: absolute; inset: 0; }
a.vk-eintrag__titel:focus-visible { outline: none; }
.vk-eintrag__hinweis { color: var(--fg-subtle); font-size: var(--fs-sm); font-style: normal; white-space: nowrap; }
.vk-eintrag__kicker { margin: 0; color: var(--fg-muted); font-size: var(--fs-sm); line-height: var(--lh-tight); overflow-wrap: anywhere; }
.vk-eintrag__auszug {
  margin: 0; color: var(--fg-muted); font-size: var(--fs-ui); line-height: var(--lh-base); overflow-wrap: anywhere;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden;
}
.vk-eintrag__neben { color: var(--fg-subtle); font-size: var(--fs-sm); white-space: nowrap; }
.vk-eintrag__symbol {
  --typ-farbe: var(--fg-subtle);
  box-sizing: border-box; inline-size: var(--s-6); block-size: var(--s-6); display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid color-mix(in srgb, var(--typ-farbe) 55%, transparent); border-radius: var(--r-2);
  background: color-mix(in srgb, var(--typ-farbe) 18%, transparent); color: var(--fg-strong); font-size: var(--fs-sm); font-weight: 600;
}
.vk-eintrag__symbol[data-farbe="blue"] { --typ-farbe: var(--accent); }
.vk-eintrag__symbol[data-farbe="indigo"] { --typ-farbe: var(--st-open); }
.vk-eintrag__symbol[data-farbe="purple"] { --typ-farbe: var(--relation); }
.vk-eintrag__symbol[data-farbe="green"] { --typ-farbe: var(--ok); }
.vk-eintrag__symbol[data-farbe="teal"] { --typ-farbe: var(--st-in-progress); }
.vk-eintrag__symbol[data-farbe="red"] { --typ-farbe: var(--danger); }
.vk-eintrag__symbol[data-farbe="orange"] { --typ-farbe: var(--warn); }
.vk-eintrag__symbol[data-farbe="yellow"] { --typ-farbe: var(--st-waiting); }
.vk-eintrag__symbol[data-farbe="brown"] { --typ-farbe: var(--st-paused); }

/* --- Eigenschafts-Chip -------------------------------------------------------------------------------------------------- */
.vk-eintrag__chips { position: relative; z-index: 1; min-width: 0; display: flex; flex-wrap: wrap; gap: var(--s-1); margin-top: var(--s-1); }
.vk-chip {
  box-sizing: border-box; max-width: 100%; min-height: var(--s-5); padding: 0 var(--s-2); display: inline-flex; align-items: center;
  border: 1px solid var(--line-strong); border-radius: var(--r-full); background: transparent; color: var(--fg);
  font: inherit; font-size: var(--fs-sm); line-height: var(--lh-tight); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.vk-chip--relation { color: var(--chip-relation); --vk-rand: var(--relation-border); border-color: var(--relation-border); background: var(--relation-soft); }
.vk-chip--tag { color: var(--fg-muted); --vk-rand: var(--tag-border); border-color: var(--tag-border); background: var(--tag-soft); }
.vk-chip--akzent { color: var(--fg-strong); --vk-rand: var(--accent-border); border-color: var(--accent-border); background: var(--accent-soft); }
.vk-chip--warn { color: var(--warn); --vk-rand: var(--warn); border-color: var(--warn); }
.vk-chip--danger { color: var(--danger); --vk-rand: var(--danger); border-color: var(--danger); }
.vk-chip--ok { color: color-mix(in srgb, var(--ok) 55%, var(--fg-strong)); --vk-rand: var(--ok); border-color: var(--ok); }
.vk-chip--leer { color: var(--fg-muted); border-style: dashed; }
.vk-chip--mehr { color: var(--fg-muted); }
button.vk-chip { cursor: pointer; }
.vk-chip__wahl { display: contents; }
/* Datum als Chip: die Datumswahl (datumswahl.css) bekommt die Pillenform des Chips; das Feld darüber bleibt unsichtbar. */
.dw.vk-chip { min-width: 0; min-height: var(--s-5); padding: 0 var(--s-2); border-radius: var(--r-full); background: transparent; color: var(--fg); font-size: var(--fs-sm); }
.dw.vk-chip:hover { background: var(--surface-3); }
.dw.vk-chip.dw-gesetzt { color: var(--fg); }
button.vk-chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
/* Antippbar (K91): am Handy 44 px Trefferfläche durch einen durchsichtigen Rand; sichtbar bleibt die Pille innen. */
@media (hover: none) {
  .vk-chip.vk-chip--antippbar {
    min-height: var(--tap); border-block: var(--s-2) solid transparent; background-clip: padding-box;
    box-shadow: inset 0 0 0 1px var(--vk-rand, var(--line-strong));
  }
}

/* --- Zeile (Standard) und kompakt: Liste mit Trennlinien in einem gerundeten Rahmen ------------------------------------ */
.vk-liste--zeile .vk-liste__eintraege, .vk-liste--kompakt .vk-liste__eintraege {
  border: 1px solid var(--line); border-radius: var(--r-3); overflow: hidden;
}
.vk-liste--zeile .vk-eintrag + .vk-eintrag, .vk-liste--kompakt .vk-eintrag + .vk-eintrag { border-top: 1px solid var(--line); }
.vk-eintrag--zeile .vk-eintrag__neben { grid-column: 2; }                  /* schmal: das Datum steht unter dem Titel */
.vk-eintrag--zeile { padding-block: var(--s-3); }
.vk-eintrag--kompakt { align-items: center; padding-block: var(--s-1); }
.vk-eintrag--kompakt .vk-eintrag__symbol { inline-size: var(--s-5); block-size: var(--s-5); font-size: var(--fs-micro); border-radius: var(--r-1); }
.vk-eintrag--kompakt .vk-eintrag__titel { -webkit-line-clamp: 1; line-clamp: 1; font-size: var(--fs-ui); }
.vk-eintrag--kompakt .vk-eintrag__neben { display: none; }

/* --- Karte: Raster aus gleich breiten Karten; eine Spalte, solange der Behälter schmal ist ------------------------------- */
.vk-liste--karte .vk-liste__eintraege { gap: var(--s-3); grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr)); }
.vk-eintrag--karte {
  grid-template-columns: minmax(0, 1fr); row-gap: var(--s-2); align-content: start; min-height: var(--s-7);
  border: 1px solid var(--line); border-radius: var(--r-3); background: var(--surface-2); padding: var(--s-3);
}
.vk-eintrag--karte:hover { border-color: var(--line-strong); background: var(--surface-2); }
.vk-eintrag--karte .vk-eintrag__symbol { grid-row: 1; justify-self: start; }
.vk-eintrag--karte .vk-eintrag__haupt { grid-row: 2; }
.vk-eintrag--karte .vk-eintrag__neben { grid-row: 3; }
.vk-eintrag--karte .vk-eintrag__titel { -webkit-line-clamp: 3; line-clamp: 3; }

/* --- Breite Behälter: Zeile in einer Reihe (Titel | Chips | Datum) ------------------------------------------------------- */
@container vk-liste (min-width: 48rem) {
  .vk-eintrag--zeile { grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; }
  .vk-eintrag--zeile .vk-eintrag__neben { grid-column: 3; justify-self: end; }
  .vk-eintrag--zeile .vk-eintrag__haupt { grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: var(--s-4); }
  .vk-eintrag--zeile .vk-eintrag__kopf, .vk-eintrag--zeile .vk-eintrag__kicker { grid-column: 1; }
  .vk-eintrag--zeile .vk-eintrag__chips { grid-column: 2; grid-row: 1 / span 2; margin-top: 0; justify-content: flex-end; }
}

/* --- Fuß der Liste („N von M“) ------------------------------------------------------------------------------------------- */
.vk-liste__fuss { margin: var(--s-2) 0 0; color: var(--fg-muted); font-size: var(--fs-sm); }
.vk-liste__mehr { display: inline-flex; align-items: center; min-height: var(--tap); padding-inline: var(--s-2); color: var(--accent); }

/* Antippbar: ein leiser Hinweis beim Überfahren (am Handy gibt es keinen Zeiger, dort trägt die Form und die Größe). */
button.vk-chip--antippbar:hover { background: var(--surface-3); border-color: var(--accent-border); }
.vk-chip--datum { cursor: pointer; }
/* Komponenten des View-Systems (Welle 0), Teil 2: Blatt und Auswahl, Zustände, Kopf, Gruppe, Reiter, Filter, Tabelle, Eigenschaftsliste.
   Erzeuger: ui/blatt.py, ui/zustand.py, ui/kopf.py, ui/tabelle.py, ui/eigenschaftsliste.py. Register und Zustandsmatrix: ui/katalog.py.
   Regeln: nur Tokens (DESIGN.md); alle Klassen tragen das Präfix vk-; die Größe richtet sich nach der Breite des BEHÄLTERS
   (@container), nur das Blatt hängt am Bildschirm (es liegt über der Seite, nicht in einem Behälter). Behälter-Grenzen: 30rem und 48rem. */

/* --- Blatt: Bottom-Sheet am Handy, Dialog am Rechner ------------------------------------------------------------------- */
dialog.vk-blatt {
  box-sizing: border-box; padding: 0; border: 0; background: transparent; color: var(--fg); overflow: visible;
  max-inline-size: none; max-block-size: none;
}
dialog.vk-blatt:not([open]) { display: none; }
dialog.vk-blatt[open] { position: fixed; inset: 0; margin: auto; inline-size: min(28rem, calc(100% - var(--s-5))); block-size: fit-content; }
dialog.vk-blatt::backdrop { background: var(--scrim); }
.vk-blatt__flaeche {
  box-sizing: border-box; display: flex; flex-direction: column; min-inline-size: 0; overflow: hidden;
  border: 1px solid var(--line-strong); border-radius: var(--r-3); background: var(--surface-2); box-shadow: var(--shadow-pop);
}
.vk-blatt--mittel .vk-blatt__flaeche { max-block-size: 60dvh; }
.vk-blatt--gross .vk-blatt__flaeche { max-block-size: 90dvh; }
.vk-blatt__kopf { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); padding: var(--s-2) var(--s-2) var(--s-2) var(--s-4); border-bottom: 1px solid var(--line); }
.vk-blatt__titel { margin: 0; min-inline-size: 0; color: var(--fg-strong); font-size: var(--fs-lg); line-height: var(--lh-tight); overflow-wrap: anywhere; }
.vk-blatt__zu {
  flex: none; inline-size: var(--tap); block-size: var(--tap); display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: var(--r-2); background: transparent; color: var(--fg-strong); font: inherit; font-size: var(--fs-xl); cursor: pointer;
}
.vk-blatt__zu:hover { background: var(--surface-3); }
.vk-blatt__inhalt { min-block-size: 0; overflow-y: auto; overscroll-behavior: contain; padding: var(--s-2) 0; }
.vk-blatt__fuss { display: flex; flex-wrap: wrap; gap: var(--s-2); justify-content: flex-end; padding: var(--s-3) var(--s-4); border-top: 1px solid var(--line); }
.vk-blatt__fuss { padding-block-end: calc(var(--s-3) + env(safe-area-inset-bottom)); }
.vk-blatt__satz { margin: 0; padding: var(--s-3) var(--s-4); color: var(--fg-strong); font-size: var(--fs-lg); line-height: var(--lh-base); overflow-wrap: anywhere; }
.vk-blatt__satz--leer { color: var(--fg-muted); }
.vk-blatt__leer { margin: 0; padding: var(--s-3) var(--s-4); color: var(--fg-muted); font-size: var(--fs-ui); }
.vk-blatt__knopf {
  box-sizing: border-box; min-height: var(--tap); padding: 0 var(--s-4); display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line-strong); border-radius: var(--r-2); background: var(--surface-1); color: var(--fg-strong);
  font: inherit; font-size: var(--fs-ui); cursor: pointer; touch-action: manipulation;
}
.vk-blatt__knopf:hover { background: var(--surface-3); }
.vk-blatt__knopf--haupt { border-color: var(--accent); background: var(--accent); color: var(--on-accent); }
.vk-blatt__knopf--haupt:hover { background: var(--accent); filter: brightness(1.08); }
.vk-blatt__feld { display: grid; gap: var(--s-1); padding: var(--s-3) var(--s-4); color: var(--fg-muted); font-size: var(--fs-sm); }
.vk-blatt__eingabe {
  box-sizing: border-box; inline-size: 100%; min-height: var(--tap); 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; font-size: var(--fs-lg);
}
.vk-blatt__knopf:focus-visible, .vk-blatt__zu:focus-visible, .vk-blatt__eingabe:focus-visible, .vk-auswahl__zeile:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
/* Vorschau im Katalog: dasselbe Blatt fest in der Seite, so breit wie sein Behälter. */
.vk-blatt--vorschau { max-inline-size: 28rem; }
/* Handy: unten verankert, volle Breite, oben gerundet. */
@media (max-width: 720px) {
  dialog.vk-blatt[open] { inset: auto 0 0 0; margin: 0; inline-size: 100%; max-inline-size: 100%; }
  dialog.vk-blatt .vk-blatt__flaeche { border-block-end: 0; border-radius: var(--r-3) var(--r-3) 0 0; }
  .vk-blatt--vorschau { max-inline-size: none; }
}
@media (prefers-reduced-motion: no-preference) {
  dialog.vk-blatt[open] .vk-blatt__flaeche { animation: vk-blatt-ein var(--dur) var(--ease); }
}
@keyframes vk-blatt-ein { from { transform: translateY(var(--s-5)); opacity: 0; } }

/* --- Auswahlzeile ------------------------------------------------------------------------------------------------------- */
.vk-auswahl { display: grid; }
.vk-auswahl__zeile {
  box-sizing: border-box; inline-size: 100%; min-height: var(--tap); padding: var(--s-2) var(--s-4); display: grid;
  grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--s-3); align-items: center; text-align: start;
  border: 0; border-bottom: 1px solid var(--line); background: transparent; color: var(--fg); font: inherit; font-size: var(--fs-md); cursor: pointer;
}
.vk-auswahl__zeile:hover { background: var(--surface-3); }
.vk-auswahl__zeile--leise { color: var(--fg-muted); }
.vk-auswahl__zeile--gewaehlt { color: var(--fg-strong); font-weight: 600; }
.vk-auswahl__text { min-inline-size: 0; overflow-wrap: anywhere; }
.vk-auswahl__unter { grid-column: 1; color: var(--fg-muted); font-size: var(--fs-sm); font-weight: 400; overflow-wrap: anywhere; }
.vk-auswahl__haken { grid-column: 2; grid-row: 1; inline-size: var(--s-4); block-size: var(--s-4); box-sizing: border-box; position: relative; }
/* Einzelwahl: nur die gewählte Zeile trägt ein Häkchen. Mehrfach: jede Zeile hat ein Kästchen, gewählt gefüllt mit Häkchen. */
[aria-current="true"] > .vk-auswahl__haken::after, [aria-pressed="true"] > .vk-auswahl__haken::after {
  content: ""; position: absolute; inset-inline-start: 5px; inset-block-start: 1px; inline-size: 5px; block-size: 10px;
  border-inline-end: 2px solid var(--fg-strong); border-block-end: 2px solid var(--fg-strong); transform: rotate(45deg);
}
[aria-pressed] > .vk-auswahl__haken { border: 1px solid var(--line-strong); border-radius: var(--r-1); }
[aria-pressed="true"] > .vk-auswahl__haken { background: var(--accent); border-color: var(--accent); }
[aria-pressed="true"] > .vk-auswahl__haken::after { border-color: var(--on-accent); }

/* --- Leer-, Fehler- und Ladezustand ------------------------------------------------------------------------------------- */
.vk-leer, .vk-fehler {
  box-sizing: border-box; display: grid; gap: var(--s-2); justify-items: start; padding: var(--s-4); min-inline-size: 0;
  border: 1px dashed var(--line-strong); border-radius: var(--r-3); color: var(--fg-muted); font-size: var(--fs-ui);
}
.vk-fehler { border-style: solid; border-color: var(--danger); color: var(--fg-strong); }
.vk-leer__satz, .vk-fehler__satz { margin: 0; overflow-wrap: anywhere; line-height: var(--lh-base); }
.vk-leer__aktion, .vk-fehler__aktion {
  box-sizing: border-box; min-height: var(--tap); padding: 0 var(--s-3); display: inline-flex; align-items: center;
  border: 1px solid var(--line-strong); border-radius: var(--r-2); background: var(--surface-1); color: var(--fg-strong);
  font: inherit; font-size: var(--fs-ui); text-decoration: none; cursor: pointer;
}
.vk-leer__aktion:hover, .vk-fehler__aktion:hover { background: var(--surface-3); }
.vk-laden { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2); }
.vk-laden__zeile { display: grid; gap: var(--s-1); padding: var(--s-3); border: 1px solid var(--line); border-radius: var(--r-3); }
.vk-laden__balken { display: block; block-size: var(--s-3); inline-size: 70%; border-radius: var(--r-1); background: var(--surface-4); }
.vk-laden__balken--kurz { inline-size: 40%; background: var(--surface-3); }
@media (prefers-reduced-motion: no-preference) {
  .vk-laden__balken { animation: vk-laden-puls 1.4s ease-in-out infinite; }
}
@keyframes vk-laden-puls { 50% { opacity: 0.55; } }

/* --- Seitenkopf --------------------------------------------------------------------------------------------------------- */
.vk-kopf { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--s-3); min-inline-size: 0; }
.vk-kopf__text { flex: 1 1 16rem; min-inline-size: 0; }
.vk-kopf__titel { margin: 0; color: var(--fg-strong); font-size: var(--fs-xl); line-height: var(--lh-tight); overflow-wrap: anywhere; }
.vk-kopf__zaehler { color: var(--fg-muted); font-size: var(--fs-md); font-weight: 400; }
.vk-kopf__unter { margin: var(--s-1) 0 0; color: var(--fg-muted); font-size: var(--fs-ui); overflow-wrap: anywhere; }
.vk-kopf__aktionen { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); }
.vk-kopf__aktion {
  box-sizing: border-box; min-height: var(--tap); padding: 0 var(--s-3); display: inline-flex; align-items: center; list-style: none;
  border: 1px solid var(--line-strong); border-radius: var(--r-2); background: var(--surface-1); color: var(--fg-strong);
  font: inherit; font-size: var(--fs-ui); text-decoration: none; cursor: pointer;
}
.vk-kopf__aktion:hover { background: var(--surface-3); }
.vk-kopf__aktion--haupt { border-color: var(--accent); background: var(--accent); color: var(--on-accent); }
.vk-kopf__aktion--haupt:hover { background: var(--accent); filter: brightness(1.08); }
.vk-kopf__mehr { position: relative; }
.vk-kopf__mehr > summary::-webkit-details-marker { display: none; }
.vk-kopf__menue {
  position: absolute; inset-inline-end: 0; z-index: 5; margin-block-start: var(--s-1); min-inline-size: 12rem; display: grid;
  border: 1px solid var(--line-strong); border-radius: var(--r-2); background: var(--surface-2); box-shadow: var(--shadow-pop); overflow: hidden;
}
.vk-kopf__menuepunkt { min-height: var(--tap); display: flex; align-items: center; padding: 0 var(--s-3); color: var(--fg); font-size: var(--fs-ui); text-decoration: none; }
.vk-kopf__menuepunkt:hover { background: var(--surface-3); }
.vk-kopf a:focus-visible, .vk-kopf summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* --- Gruppenkopf -------------------------------------------------------------------------------------------------------- */
.vk-gruppe { min-inline-size: 0; }
.vk-gruppe__kopf {
  display: flex; align-items: center; gap: var(--s-2); min-height: var(--tap); padding: 0 var(--s-1); list-style: none; cursor: pointer;
  color: var(--fg-strong); font-size: var(--fs-md); font-weight: 600;
}
.vk-gruppe__kopf::-webkit-details-marker { display: none; }
.vk-gruppe__kopf:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.vk-gruppe__name { min-inline-size: 0; overflow-wrap: anywhere; }
.vk-gruppe__zaehler { color: var(--fg-muted); font-size: var(--fs-ui); font-weight: 400; }
.vk-gruppe__pfeil {
  flex: none; inline-size: var(--s-2); block-size: var(--s-2); border-inline-end: 2px solid currentcolor; border-block-end: 2px solid currentcolor;
  transform: rotate(-45deg); transition: transform var(--dur) var(--ease);
}
.vk-gruppe[open] > .vk-gruppe__kopf > .vk-gruppe__pfeil { transform: rotate(45deg); }
.vk-gruppe__inhalt { min-inline-size: 0; padding-block-start: var(--s-2); }

/* --- Reiter: breit eine Reihe von Links, schmal ein Auswahlfeld ------------------------------------------------------- */
.vk-reiter { container: vk-reiter / inline-size; min-inline-size: 0; }
.vk-reiter__reihe { display: none; flex-wrap: wrap; gap: var(--s-1); border-block-end: 1px solid var(--line); }
.vk-reiter__reiter {
  box-sizing: border-box; min-height: var(--tap); padding: 0 var(--s-3); display: inline-flex; align-items: center; gap: var(--s-1);
  border-block-end: 2px solid transparent; color: var(--fg-muted); font-size: var(--fs-ui); text-decoration: none; overflow-wrap: anywhere;
}
.vk-reiter__reiter:hover { color: var(--fg-strong); background: var(--surface-3); }
.vk-reiter__reiter--aktiv { border-block-end-color: var(--accent); color: var(--fg-strong); font-weight: 600; }
.vk-reiter__reiter:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.vk-reiter__zaehler { color: var(--fg-muted); font-size: var(--fs-sm); font-weight: 400; }
.vk-reiter__wahl label { display: grid; gap: var(--s-1); }
.vk-reiter__etikett { color: var(--fg-muted); font-size: var(--fs-sm); }
.vk-reiter__feld {
  appearance: none; background-image: linear-gradient(45deg, transparent 50%, currentcolor 50%), linear-gradient(135deg, currentcolor 50%, transparent 50%);
  background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%; background-size: 5px 5px; background-repeat: no-repeat; padding-inline-end: var(--s-6);
  box-sizing: border-box; inline-size: 100%; min-height: var(--tap); padding: 0 var(--s-3); border: 1px solid var(--line-strong);
  border-radius: var(--r-2); background-color: var(--surface-1); color: var(--fg); font: inherit; font-size: var(--fs-lg);
}
@container vk-reiter (min-width: 30rem) {
  .vk-reiter__reihe { display: flex; }
  .vk-reiter__wahl { display: none; }
}

/* --- Filterleiste ------------------------------------------------------------------------------------------------------- */
.vk-filter { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--s-2); min-inline-size: 0; }
.vk-filter__suche, .vk-filter__sort { display: grid; gap: var(--s-1); min-inline-size: 0; max-inline-size: 100%; }
.vk-filter__suche { flex: 1 1 14rem; }
.vk-filter__etikett { color: var(--fg-muted); font-size: var(--fs-sm); }
.vk-filter__feld {
  appearance: none; background-image: linear-gradient(45deg, transparent 50%, currentcolor 50%), linear-gradient(135deg, currentcolor 50%, transparent 50%);
  background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%; background-size: 5px 5px; background-repeat: no-repeat; padding-inline-end: var(--s-6);
}
.vk-filter__eingabe, .vk-filter__feld {
  box-sizing: border-box; inline-size: 100%; min-inline-size: 0; max-inline-size: 100%; text-overflow: ellipsis; min-height: var(--tap); padding: 0 var(--s-3); border: 1px solid var(--line-strong);
  border-radius: var(--r-2); background-color: var(--surface-1); color: var(--fg); font: inherit; font-size: var(--fs-lg);
}
.vk-filter__chips { display: flex; flex-wrap: wrap; gap: var(--s-2); min-inline-size: 0; max-inline-size: 100%; }
.vk-filter__chip {
  box-sizing: border-box; min-height: var(--tap); padding: 0 var(--s-3); display: inline-flex; align-items: center; gap: var(--s-2);
  border: 1px solid var(--line-strong); border-radius: var(--r-full); color: var(--fg); font-size: var(--fs-ui); cursor: pointer;
  max-inline-size: 100%; min-inline-size: 0; overflow-wrap: anywhere; justify-content: flex-start; text-align: start;
}
.vk-filter__chip:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); color: var(--fg-strong); font-weight: 600; }
.vk-filter__chip:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
.vk-filter__los, .vk-filter__zurueck {
  box-sizing: border-box; min-height: var(--tap); padding: 0 var(--s-3); display: inline-flex; align-items: center;
  border: 1px solid var(--line-strong); border-radius: var(--r-2); background: var(--surface-1); color: var(--fg-strong);
  font: inherit; font-size: var(--fs-ui); text-decoration: none; cursor: pointer;
}
.vk-filter__los:hover, .vk-filter__zurueck:hover { background: var(--surface-3); }
.vk-filter__eingabe:focus-visible, .vk-filter__feld:focus-visible, .vk-filter__los:focus-visible, .vk-filter__zurueck:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* --- Tabelle: schmal Kartenliste, breit Tabelle mit festem Kopf und fester erster Spalte ------------------------------ */
.vk-tabelle { container: vk-tabelle / inline-size; min-inline-size: 0; }
.vk-tabelle__tabelle { display: none; }
.vk-tabelle--tabelle > .vk-tabelle__tabelle { display: block; }
.vk-tabelle--tabelle > .vk-tabelle__karten { display: none; }
@container vk-tabelle (min-width: 48rem) {
  .vk-tabelle--auto > .vk-tabelle__karten { display: none; }
  .vk-tabelle--auto > .vk-tabelle__tabelle { display: block; }
}
.vk-tabelle__bereich { box-sizing: border-box; max-block-size: 36rem; overflow: auto; border: 1px solid var(--line); border-radius: var(--r-3); background: var(--layer-card); }
.vk-tabelle__bereich:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.vk-tabelle__hinweis { display: none; margin: 0; padding: var(--s-2) var(--s-3); position: sticky; inset-inline-start: 0; color: var(--fg-muted); font-size: var(--fs-sm); }
@container vk-tabelle (max-width: 47.99rem) {
  .vk-tabelle__hinweis { display: block; }
  .vk-tabelle__t { min-inline-size: 36rem; }
}
.vk-tabelle__t { border-collapse: separate; border-spacing: 0; inline-size: 100%; color: var(--fg); font-size: var(--fs-ui); }
.vk-tabelle__kopf, .vk-tabelle__zelle { padding: var(--s-2) var(--s-3); text-align: start; vertical-align: middle; border-block-end: 1px solid var(--line); overflow-wrap: break-word; }
.vk-tabelle__kopf { position: sticky; inset-block-start: 0; z-index: 2; background: var(--surface-3); color: var(--fg-strong); font-weight: 600; white-space: nowrap; }
.vk-tabelle__zelle--anker { position: sticky; inset-inline-start: 0; z-index: 1; inline-size: 9rem; max-inline-size: 9rem; background: var(--layer-card); font-weight: 500; border-inline-end: 1px solid var(--line); overflow-wrap: anywhere; }
.vk-tabelle__kopf.vk-tabelle__zelle--anker { z-index: 3; background: var(--surface-3); }
@container vk-tabelle (min-width: 48rem) {
  .vk-tabelle__zelle--anker { inline-size: auto; max-inline-size: 22rem; }
}
.vk-tabelle__zelle--zahl { text-align: end; font-variant-numeric: tabular-nums; }
.vk-tabelle__zeile:hover > * { background: var(--surface-3); }
.vk-tabelle__link { min-height: var(--tap); display: flex; align-items: center; color: var(--fg-strong); text-decoration: none; }
.vk-tabelle__link:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.vk-tabelle__leer { color: var(--fg-muted); }
.vk-tabelle tfoot th, .vk-tabelle tfoot td { position: sticky; inset-block-end: 0; z-index: 2; background: var(--surface-3); color: var(--fg-strong); font-weight: 600; }
.vk-tabelle tfoot th { z-index: 3; inset-inline-start: 0; }
.vk-tabelle__fuss { padding-inline: var(--s-3); }

/* --- Eigenschaftsliste -------------------------------------------------------------------------------------------------- */
.vk-eigenschaften { container: vk-eigenschaften / inline-size; min-inline-size: 0; }
.vk-eigenschaften__zone { margin-block-end: var(--s-3); }
.vk-eigenschaften__zonenkopf { margin: 0 0 var(--s-1); color: var(--fg-muted); font-size: var(--fs-sm); font-weight: 600; text-transform: uppercase; letter-spacing: var(--tracking-label); }
summary.vk-eigenschaften__zonenkopf { display: flex; align-items: center; min-height: var(--tap); margin: 0; cursor: pointer; }
.vk-eigenschaften__liste { margin: 0; }
.vk-eigenschaften__zeile { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-1); padding: var(--s-2) 0; border-block-end: 1px solid var(--line); }
.vk-eigenschaften__name { margin: 0; color: var(--fg-muted); font-size: var(--fs-ui); overflow-wrap: anywhere; }
.vk-eigenschaften__wert { margin: 0; min-inline-size: 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1); }
.vk-eigenschaften__leer { color: var(--fg-muted); font-size: var(--fs-ui); }
@container vk-eigenschaften (min-width: 30rem) {
  .vk-eigenschaften__zeile { grid-template-columns: 10rem minmax(0, 1fr); align-items: center; column-gap: var(--s-3); }
}

/* Ausdrückliche Varianten (ohne eigene Gestalt, aber mit Definition, damit die Klassen-Ratsche sie im Katalog findet) */
.vk-tabelle--karten > .vk-tabelle__tabelle { display: none; }
.vk-eigenschaften__zone--technik { margin-block-end: var(--s-2); }
.vk-tabelle__summe { color: var(--fg-strong); font-weight: 600; }