/* ============================================================================
   demo-hub.css — die Mini-Demos im Look des Engineering AI Hub.

   Baut auf defaults.css auf, das die Design-Tokens des Hubs enthält (Kopie aus
   packages/shared-ui/src/defaults.css) — Navy #122d6e, Orange #ff5100, dieselbe
   Skala für Abstände, Radien und Schriftgrößen.

   Bewusst getrennt von app.css: Dort steht die brainCSM-Shell, hier das
   Schaufenster des Hubs. Ein Präfix (hd-) hält beide auseinander.

   Die Regeln stehen in der Reihenfolge, in der die Demos entstanden sind —
   die Agenten wechseln sich ab. Was wo liegt, sagt diese Liste; ein Test hält
   sie mit den Überschriften im Gleichklang.

   Inhalt:
   · Seitennavigation
   · Inhalt
   · Dashboard
   · Suche: Composer, Verlauf, QueryBox (shared-ui nachgebaut)
   · Stationen und Tafeln (Gutachtrude, Gefahrgudrun, Elvira)
   · Gutachtrude: Die neue Feststellung entsteht
   · Gutachtrude: Befundaufnahme, Plan, Gutachten
   · Gemeinsame Bausteine der übrigen Agenten
   · Tabellen (Gefahrgudrun, Elvira)
   · Archibald
   · Mailanie
   · Protokoliver
   · Gefahrgudrun
   · Elvira
   · Abstände, die erst im Zusammenspiel auffallen
   · Suche: Beispielknopf, Phasenliste, Filter-Modal
   · Suche: das Modal der erweiterten Suche
   · Normbert: Reiter, Zusammenfassung, Prüfergebnis, Quellen
   · Archibald: Trefferkarten mit aufklappbaren Details
   · Suche: Zeitraum-Regler mit zwei Griffen
   · Protokoliver: Projektansicht, Protokollliste, Protokollblatt
   · Protokoliver: Erfassungswege und ihre Oberflächen
   · Protokoliver: das Menü und die Fenster der Erfassungswege
   · Protokoliver: Sprachblasen, Datei-Auswertung, Aufgabenliste
   · Protokoliver: die Aufgabenliste
   · Protokoliver: Aufgabenfilter als Trichter-Menü
   · Protokoliver: Projekt-Einstellungen
   · Mailanie: Rücksprung ins Postfach an jeder Trefferzeile
   · Detailfenster rechts (SidePanel aus shared-ui)
   · Detailfenster: Dateizeilen und Fragen
   · Mailanie: Symbole und Belegstellen
   · Normbert: Warnung und Normtext
   · Die Führung durch den Termin
   · Gutachtrude: Unterlagen, Entwurf und Anlagen
   · Gutachtrude: Auswählen, was in den Text kommt
   · Gutachtrude: Die Vorschau — das Dokument im Textprogramm
   · Gutachtrude: Die Feststellung am Handy
   · Chatgar: Fragebox, Unterhaltung, Quellen
   · Elvira: Das Gedächtnis des Büros
   · Statusmarken im Stil des Hubs
   · Platzhalter: Der Klick-Dummy entsteht noch
   · Dashboard: die beiden Blöcke des Schaufensters
   ============================================================================ */
@font-face {
  /* Vendored — kein Google-Fonts-Abruf zur Laufzeit (tailnet-only). */
  font-family: "Manrope";
  src: url("/static/fonts/manrope-latin.woff2") format("woff2");
  font-weight: 200 800;
  font-display: swap;
}

.hd-body {
  margin: 0;
  font-family: "Manrope", system-ui, sans-serif;
  color: var(--color-body);
  background: var(--color-bg);
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
}

/* Wie `getAgentBackground()` im Hub: perzeptuell gemischt, damit der Ton auch
   bei hellen Primärfarben sichtbar bleibt und bei dunklen nicht kippt. */
.hd-body[data-agent] { background: color-mix(in oklch, var(--color-primary) 8%, white); }
/* Solange ein Fenster offen ist, scrollt die Seite darunter nicht mit. */
.hd-body.is-fenster-offen { overflow: hidden; }

.hd-shell { display: flex; min-height: 100vh; }

/* ── Seitennavigation ────────────────────────────────────────────────────────── */

/* Die Leiste bleibt stehen, während der Inhalt läuft. Ohne das wuchs sie mit
   der Seite mit — auf einem langen Kapitel stand der angemeldete Nutzer erst
   ganz unten, auf einem kurzen im Bild. Was immer da sein soll, muss immer
   sichtbar sein.
   Wie die Desktop-Spalte im Hub (`sidebarShell`): eine schwebende Karte mit
   Abstand zum Fensterrand, runden Ecken und leichtem Schatten. 20px breiter
   als dort, damit jede Rolle in einer Zeile steht. */
.hd-sidebar {
  flex: none;
  width: calc(var(--sidebar-width) - var(--space-xl));
  position: sticky;
  top: var(--space-xl);
  align-self: flex-start;
  height: calc(100vh - 2 * var(--space-xl));
  margin: var(--space-xl) 0 var(--space-xl) var(--space-xl);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  padding: var(--space-3xl) var(--space-xl);
  background: var(--color-card);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
}

/* Der Kopf ist der Weg zurück ins Portal — beim Überfahren hinterlegt wie die
   Agentenzeilen. Der negative Rand hält Logo und Schrift an ihrem Platz. */
.hd-brand { display: flex; align-items: center; gap: var(--space-md); margin: calc(-1 * var(--space-sm)); padding: var(--space-sm); border-radius: var(--radius); text-decoration: none; color: inherit; transition: background var(--transition-fast); }
.hd-brand:hover { background: var(--color-surface-hover); }
.hd-brand img { width: 34px; height: 34px; }
/* Der Name des Hubs bleibt auf jeder Agentenseite gleich: Off-Black, nie die
   Agentenfarbe. */
.hd-brand__name { display: block; font-size: var(--text-base); font-weight: var(--font-bold); color: var(--color-title); }
.hd-brand__sub { display: block; font-size: var(--text-xs); color: var(--color-secondary); }

.hd-nav { display: flex; flex-direction: column; gap: 2px; flex: 1; margin-top: var(--space-xl); }
.hd-nav__label {
  font-size: var(--text-sm);
  font-weight: var(--font-bold);
  letter-spacing: 0.04em;
  color: var(--color-title);
  margin-bottom: var(--space-sm);
}
/* Luft vor dem zweiten Block — sonst hängt „Spezialisten" am letzten Eintrag
   des Kerns und die beiden Listen verschwimmen. */
.hd-nav__item + .hd-nav__label { margin-top: var(--space-xl); }

.hd-nav__item {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-sm);
  border-radius: var(--radius);
  text-decoration: none;
  color: inherit;
}
a.hd-nav__item:hover { background: var(--color-surface-hover); }
.hd-nav__item.is-active { background: var(--color-primary-light); }

/* Wie im Hub: in der Navigation kein Portrait, nur die Agentenfarbe mit dem
   Anfangsbuchstaben — auf jeder Seite gleich. */
.hd-nav__avatar {
  flex: none;
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--radius-full);
  background: var(--color-primary);
  color: #fff;
  font-size: var(--text-base);
  font-weight: var(--font-bold);
}
.hd-nav__text { display: flex; flex-direction: column; min-width: 0; }
.hd-nav__name { font-size: var(--text-sm); font-weight: var(--font-semibold); }
.hd-nav__rolle { font-size: var(--text-xs); color: var(--color-secondary); }

/* Avatar und Einzug wie in den Agentenzeilen darüber: gleich groß, auf einer
   Linie mit den Buchstaben und ihrem Text. Hier sitzt im Kreis das Portrait —
   der Mensch vor dem Bildschirm, nicht einer der Agenten. */
.hd-user { display: flex; align-items: center; gap: var(--space-md); padding: var(--space-lg) var(--space-sm) 0; border-top: 1px solid var(--color-border); }
.hd-user__avatar {
  flex: none;
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  overflow: hidden;
  background: var(--color-primary); color: #fff;
  font-weight: var(--font-bold);
}
.hd-user__avatar img { width: 100%; height: 100%; object-fit: cover; }
.hd-user__meta { display: flex; flex-direction: column; min-width: 0; }
.hd-user__name { font-size: var(--text-sm); font-weight: var(--font-semibold); }
.hd-user__firma { font-size: var(--text-xs); color: var(--color-secondary); }

/* ── Inhalt ──────────────────────────────────────────────────────────────────── */

/* Im Portal und auf jeder Agentenseite liegt der ganze Inhalt in einer
   weißen Fläche, wie im Hub: gleicher Abstand zum Rand wie die Seitenleiste,
   dieselben runden Ecken, und immer bis an den rechten und unteren Rand
   gezogen — auch wenn der Inhalt kurz ist. Was für sich steht (der Verlauf),
   liegt mit Abstand in einer eigenen Fläche darunter; dann sind beide Flächen
   so hoch wie ihr Inhalt. */
.hd-seite {
  flex: 1;
  min-width: 0;
  box-sizing: border-box;
  min-height: calc(100vh - 2 * var(--space-xl));
  margin: var(--space-xl);
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
}
.hd-main, .hd-flaeche {
  box-sizing: border-box;
  padding: var(--space-2xl);
  background: var(--color-card);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
}
.hd-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}
.hd-main:has(+ .hd-flaeche) { flex: none; }
/* Mailanie: die weißen Flächen ohne Schatten. */
.hd-body[data-agent="mailanie"] :is(.hd-main, .hd-flaeche) { box-shadow: none; }
/* Die Karte in der Fläche rahmt nicht noch einmal; läuft eine Suche und der
   Verlauf tritt ab, verschwindet die Fläche mit. */
.hd-flaeche > .hd-card { border: none; padding: 0; }
/* Elvira: Jede Karte liegt direkt in der weißen Fläche, ohne zweiten Rahmen. */
.hd-body[data-agent="elvira"] .hd-main > .hd-card { border: none; padding: 0; }
.hd-flaeche > .hd-stationen { margin: 0; padding: 0; border: none; background: none; }
.hd-flaeche:has(> [hidden]) { display: none; }
/* Füllt die Hauptfläche den Rest nur, wenn darunter keine Fläche sichtbar ist —
   der verborgene Suchlauf zählt nicht mit. */
.hd-seite:not(:has(> .hd-flaeche > :not([hidden]))) > .hd-main { flex: 1; }
/* Elvira: Die Hauptfläche ist so hoch wie ihr Inhalt, auch wenn nichts darunter steht. */
.hd-body[data-agent="elvira"] .hd-seite > .hd-main { flex: none; }
.hd-flaeche > .hd-fortschritt { border: none; padding: 0; }

.hd-kopf h1 { margin: 0; font-size: var(--text-2xl); font-weight: var(--font-bold); color: var(--color-title); }
.hd-kopf p { margin: var(--space-xs) 0 0; color: var(--color-secondary); }

.hd-card {
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
}
.hd-card__titel {
  display: block;
  font-size: var(--text-sm);
  font-weight: var(--font-bold);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-secondary);
  margin-bottom: var(--space-md);
}

.hd-btn {
  align-self: flex-start;
  display: inline-block;
  padding: 10px 18px;
  border-radius: var(--radius);
  background: var(--color-primary);
  color: #fff;
  font-size: var(--text-sm);
  font-weight: var(--font-bold);
  text-decoration: none;
  margin-top: var(--space-lg);
}
/* Abgedunkelt aus der Palette des Agenten, nicht aus dem Hub-Navy: Auf Elviras
   blauem Knopf sprang der Hover sonst auf eine fremde Farbe. */
.hd-btn:hover { background: color-mix(in srgb, var(--color-primary) 75%, black); }

/* ── Dashboard ─────────────────────────────────────────────────────────────────
   Die Kacheln sind die AgentCard aus shared-ui — Markup und Regeln stehen in
   defaults.css (`.agent-card*`), hier steht nur das Raster darum und das,
   was ein Link statt einer Karte mit Knopf braucht. Werte wie im Portal. */

/* Mehr Luft zwischen Begrüßung und Kacheln als der übliche Abstand im Inhalt. */
.dashboard-agents { display: flex; flex-direction: column; gap: var(--space-sm); margin-top: var(--space-2xl); }
@media (min-width: 768px) {
  .dashboard-agents { display: grid; gap: var(--space-2xl); grid-template-columns: repeat(auto-fill, minmax(max(200px, calc((100% - 3 * var(--space-2xl)) / 4)), 1fr)); }
  /* Höchstens vier Kacheln je Reihe; darunter bricht das Raster wie gewohnt um.
     Höher als die Vorlage: ein längeres Farbband. */
  .dashboard-agents .agent-card { --agent-card-band: 150px; }
  /* Größerer Avatar bei gleicher Kachel: Er ragt weiter ins Farbband, unter
     dem Band bleiben wie bei 80px genau 40px — die Kachel wächst nicht. */
  .dashboard-agents .agent-card__avatar { width: 112px; height: 112px; margin-top: calc(40px - 112px); }
}

a.agent-card { text-decoration: none; color: inherit; }
a.agent-card:hover .agent-card__cta { filter: brightness(0.95); }
/* Die Kachel hebt sich beim Überfahren leicht an. */
a.agent-card { transition: transform var(--transition-base); }
a.agent-card:hover { transform: scale(1.02); }
@media (prefers-reduced-motion: reduce) { a.agent-card { transition: none; } }
/* Im Hub ist der Avatar ein <img> oder ein Buchstabe; Gefahrgudrun hat noch
   kein Portrait und trägt ihr Symbol — der Kreis bleibt derselbe. */
.agent-card__avatar .tool-ico { display: inline-flex; color: inherit; }
.agent-card__avatar .tool-ico svg { width: 28px; height: 28px; }

/* ── Suche: Composer, Verlauf, QueryBox (shared-ui nachgebaut) ─────────────────
   Vorlage sind `SearchComposer`, `SearchHistoryList` und `QueryBox` aus
   packages/shared-ui. Deren Maße stehen dort inline im TSX, deshalb hier als
   Regeln statt als Kopie einer Stylesheet-Datei. */

.hd-composer {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding: var(--space-md);
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
}
/* Die Karte um die Suche trägt keinen eigenen Rand und keinen Einzug: Auf
   der weißen Fläche rahmte sie die Suchbox ein zweites Mal, und die Suchbox
   stand eingerückt statt bündig mit Überschrift und Karten darunter. */
.hd-card:has(> .hd-composer) { border: none; padding: 0; }
/* Der Bestandsplan (Gutachtrude) ohne äußeren Rahmen — der Plan hat seinen eigenen. */
.hd-card--plan { border: none; padding: 0; }
/* Der Beispielknopf steht in der Box über dem Platzhalter, links bündig. */
.hd-composer > .hd-composer__beispiel { align-self: flex-start; margin-bottom: var(--space-sm); }
.hd-composer__beispiel[hidden] { display: none; }
/* Der Platzhalter steht, wo im Hub das Textfeld steht — getippt wird nicht. */
.hd-composer__eingabe {
  flex: 1;
  min-width: 0;
  min-height: 2.5em;
  padding: var(--space-xs) var(--space-sm);
  font-size: var(--text-sm);
  line-height: 1.4;
  color: var(--color-body);
}
.hd-composer__eingabe.is-leer { color: var(--color-placeholder); }
.hd-composer__aktionen { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); }
/* `font: inherit` und sonst nichts: Die Knöpfe laufen in der Schrift der Box.
   Eine eigene Größe und ein eigenes Gewicht standen hier einmal — und wurden
   900 Zeilen später von genau diesem `inherit` wieder aufgehoben. */
.hd-composer__erweitert,
.hd-composer__start {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  /* Maße wie `.hd-aktion` — gleiche Luft, gleiche Höhe wie die übrigen Knöpfe. */
  padding: 10px 18px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  font: inherit;
  font-size: var(--text-sm);
  cursor: pointer;
}
/* Nur das Zeichen: ein quadratischer Knopf. */
.hd-composer__start.is-nur-symbol { justify-content: center; width: 36px; height: 36px; padding: 0; }
.hd-composer__erweitert { border: 1px solid var(--color-border); background: none; color: var(--color-primary); }
/* Solange keine Frage gesetzt ist, bleibt der Knopf grau — nichts zu senden. */
.hd-composer__start:disabled { background: var(--color-surface-hover); color: var(--color-placeholder); cursor: default; }
.hd-composer__start:not(:disabled) { background: var(--color-primary); color: #fff; }
/* Worin gesucht wird: Symbol und Zahl statt einer Zeile Text. */
.hd-bestand { display: flex; flex-wrap: wrap; gap: var(--space-lg); margin-top: var(--space-md); font-size: var(--text-xs); color: var(--color-secondary); }
.hd-bestand__punkt { display: inline-flex; align-items: center; gap: var(--space-xs); }

.hd-vk {
  display: flex; align-items: center; gap: var(--space-xs);
  margin-bottom: var(--space-sm);
  color: var(--color-secondary);
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
}

.hd-verlaufsliste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-md); }
.hd-vz {
  display: flex; align-items: center; gap: var(--space-sm);
  padding-right: var(--space-md);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}
.hd-vz:hover { background: var(--color-surface-hover); }
.hd-vz__oeffnen { flex: 1; min-width: 0; display: flex; align-items: center; gap: var(--space-md); padding: var(--space-sm) var(--space-md); text-decoration: none; color: inherit; }
.hd-vz__ico { flex: none; display: inline-flex; color: var(--color-secondary); }
.hd-vz__text { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.hd-vz__titel { color: var(--color-title); font-weight: var(--font-semibold); }
.hd-vz__frage { color: var(--color-secondary); font-size: var(--text-sm); }
/* Feste Spaltenbreite, damit die Marken jeder Zeile an derselben Kante links beginnen. */
.hd-vz__meta { flex: 0 1 24rem; display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: center; gap: var(--space-sm); color: var(--color-secondary); font-size: var(--text-xs); }
/* Was in der Unterhaltung geschah — Datei hochgeladen, im Web gesucht — als
   Marke in der Agentenfarbe, damit es vor dem Öffnen ins Auge fällt. */
.hd-vz__marke { display: inline-flex; align-items: center; gap: 6px; padding: 3px 12px 3px 3px; border-radius: var(--radius-full); background: var(--color-primary-light); color: var(--color-primary); font-size: var(--text-sm); font-weight: var(--font-semibold); line-height: 20px; white-space: nowrap; }
/* Das Symbol im Kreis, wie bei den Statusmarken. */
.hd-vz__marke svg { flex: none; box-sizing: content-box; padding: 4px; border-radius: 50%; background: color-mix(in srgb, currentColor 22%, transparent); }
.hd-vz__marke.is-neutral { background: var(--color-surface-hover); color: var(--color-secondary); }
.hd-vz__datum { flex: none; min-width: 88px; text-align: right; color: var(--color-secondary); font-size: var(--text-xs); white-space: nowrap; }

/* Die gestellte Frage über der Antwort, auf kühlem Hellgrau. */
.hd-querybox {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px var(--space-md);
  padding: var(--space-md);
  border-radius: var(--radius-lg);
  background: #f5f6f8;
}
.hd-querybox__label { width: 100%; font-size: var(--text-sm); font-weight: var(--font-bold); color: var(--color-title); }
.hd-querybox__frage { flex: 1; min-width: 0; font-size: var(--text-sm); color: var(--color-body); }
.hd-querybox__neu { flex: none; font-size: var(--text-sm); font-weight: var(--font-semibold); color: var(--color-primary); text-decoration: none; }
.hd-querybox__neu:hover { text-decoration: underline; }
/* Wie im Hub: Die Antwort sitzt unten in der grauen Fläche der Frage. Die Fläche
   läuft unter die oberen Ecken der Karte weiter, damit Frage und Antwort als ein
   Block lesen — die Karte selbst behält Rahmen und Rundung. */
.hd-querybox:has(+ .hd-card) { padding-bottom: calc(var(--space-md) + var(--radius-lg) + var(--space-sm)); }
.hd-querybox + .hd-card { position: relative; margin-top: calc(-1 * (var(--space-lg) + var(--radius-lg))); }

.hd-antwort__kern { margin: 0 0 var(--space-lg); font-size: var(--text-lg); font-weight: var(--font-bold); color: var(--color-title); line-height: var(--leading-snug); }
.hd-antwort__text { margin: 0 0 var(--space-md); }

.hd-rechnung { margin: var(--space-lg) 0; padding: var(--space-lg); border-radius: var(--radius); background: var(--color-surface-hover); }
.hd-rechnung__titel { display: block; font-size: var(--text-xs); font-weight: var(--font-bold); text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-secondary); margin-bottom: var(--space-sm); }
.hd-rechnung__zeile { display: flex; justify-content: space-between; gap: var(--space-lg); padding: var(--space-xs) 0; font-size: var(--text-sm); }
.hd-rechnung__zeile.is-ergebnis { border-top: 1px solid var(--color-border); margin-top: var(--space-xs); padding-top: var(--space-sm); font-size: var(--text-md); color: var(--color-title); }

.hd-quellenblock { margin-top: var(--space-lg); padding-top: var(--space-lg); border-top: 1px solid var(--color-border); }
.hd-quelle__alt { margin-left: var(--space-sm); font-size: var(--text-xs); font-weight: var(--font-semibold); color: var(--color-accent); background: color-mix(in srgb, var(--color-accent) 12%, white); border-radius: var(--radius-full); padding: 2px var(--space-sm); }

.hd-folgen { margin-top: var(--space-lg); display: flex; flex-wrap: wrap; gap: var(--space-sm); align-items: center; }
.hd-folgen__titel { font-size: var(--text-xs); font-weight: var(--font-bold); text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-secondary); }
/* Anschlussfragen sind anklickbar — die Regel fiel beim Aufräumen der
   alten Suchmasken mit weg, und die Fragen standen als nackte Links da. */
.hd-chip { display: inline-block; padding: 4px var(--space-md); border: 1px solid var(--color-border); border-radius: var(--radius-full); background: var(--color-card); font-size: var(--text-sm); color: var(--color-body); text-decoration: none; }
.hd-chip:hover { border-color: var(--color-accent); color: var(--color-accent); }

/* ── Stationen und Tafeln (Gutachtrude, Gefahrgudrun, Elvira) ────────────────── */

/* Die Stationen als Schrittleiste: je Station ein Kreis, daneben ihr Titel,
   dazwischen eine Linie zur nächsten. Erledigt ist gefüllt mit Haken, aktiv
   trägt einen Ring, was noch kommt, bleibt blass. Gutachtrude, Gefahrgudrun
   und Elvira teilen dieselbe Form; der Satz zur Station steht im Hover. */
/* Die Leiste steht in einer eigenen Karte, mit Luft zum Kopf darüber und zur
   Arbeit darunter. */
.hd-stationen {
  --hd-kreis: 30px;
  display: flex; align-items: center;
  margin: var(--space-lg) 0;
  padding: var(--space-xl) var(--space-2xl);
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}
/* Die Leiste reicht von Rand zu Rand: Die Stationen sind so breit wie ihr
   Titel, Kreis und Titel stehen darin nebeneinander wie Nummer und Titel
   eines Kapitels, und zwischen zwei Stationen füllt eine Linie den Rest. */
.hd-station {
  position: relative;
  flex: 0 1 auto;
  min-width: 0;
  display: flex; align-items: center; gap: var(--space-sm);
  padding: var(--space-xs) 0;
  text-align: left;
  text-decoration: none; color: inherit;
}
.hd-stationen__linie {
  flex: 1 1 24px;
  min-width: 24px;
  height: 2px;
  margin: 0 var(--space-md);
  background: var(--color-border);
}
/* Gefüllt wird nur bis zur aktiven Station — der Weg danach ist noch nicht
   gegangen. */
.hd-stationen__linie.is-erledigt { background: var(--color-primary); }

.hd-station__nr {
  flex: none;
  width: var(--hd-kreis); height: var(--hd-kreis);
  box-sizing: border-box;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  border: 1.5px solid var(--color-border);
  background: var(--color-card); color: var(--color-secondary);
  font-size: var(--text-xs); font-weight: var(--font-bold);
  transition: box-shadow var(--transition-fast);
}
.hd-station__haken { display: none; }
.hd-station.is-erledigt .hd-station__nr { border-color: var(--color-primary); background: var(--color-primary); color: #fff; }
.hd-station.is-erledigt .hd-station__zahl { display: none; }
.hd-station.is-erledigt .hd-station__haken { display: block; }
.hd-station.is-active .hd-station__nr {
  border: 2px solid var(--color-primary);
  color: var(--color-primary);
  box-shadow: 0 0 0 4px var(--color-primary-light);
}
.hd-station:hover .hd-station__nr { box-shadow: 0 0 0 4px var(--color-primary-light); }

.hd-station__titel { font-size: var(--text-sm); font-weight: var(--font-semibold); color: var(--color-secondary); }
.hd-station.is-active .hd-station__titel, .hd-station.is-erledigt .hd-station__titel { color: var(--color-title); }
.hd-station:hover .hd-station__titel { color: var(--color-primary); }

/* Leuchtet eine Station, bekommt sie ringsum gleich viel Luft: links liegt
   der Kreis sonst am Rand des Scheins, rechts klebt der Titel daran. Die
   negativen Ränder nehmen die Luft zurück — die Leiste springt nicht. */
.hd-station.hd-naechster {
  padding: var(--space-xs) var(--space-md) var(--space-xs) var(--space-xs);
  margin: 0 calc(-1 * var(--space-md)) 0 calc(-1 * var(--space-xs));
  border-radius: var(--radius-full);
}

/* Die Tafel hinter einem Reiter. Die Reiterzeile selbst ist der bestehende
   Baustein .hd-reiter (weiter unten) — Normbert und Protokoliver benutzen ihn
   mit Links, hier sind es Knöpfe, weil die Demo ihren Zustand im DOM hält. */
.hd-tafel { margin-top: var(--space-lg); }
/* Die Tafel nimmt den Fokus auf, wenn ein Reiter gewählt wurde — ohne Rahmen,
   der Reiter darüber zeigt die Stelle bereits an. */
.hd-tafel:focus { outline: none; }


/* ── Gutachtrude: Die neue Feststellung entsteht ─────────────────────────────── */

/* Die Bilder einer Feststellung, alle gleich groß. Das feste Verhältnis 3:2
   entspricht den Aufnahmen (1200×800) — es beschneidet nichts, und die
   Markierung bleibt auf der Stelle, die sie bezeichnet. */
.hd-serie { display: flex; flex-wrap: wrap; gap: var(--space-md); margin-top: var(--space-md); }
.hd-serie__bild { position: relative; flex: 0 1 280px; margin: 0; }
.hd-serie__bild img { display: block; width: 100%; aspect-ratio: 3 / 2; border-radius: var(--radius); }

/* Die Kachel neben den Bildern: Eine Feststellung trägt beliebig viele Fotos.
   Sie sieht aus wie ein leerer Platz, weil sie einer ist. */
.hd-serie__plus {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-xs);
  flex: 0 1 280px; aspect-ratio: 3 / 2;
  border: 1px dashed var(--color-border); border-radius: var(--radius);
  background: var(--color-surface-subtle);
  font: inherit; font-size: var(--text-sm); color: var(--color-secondary); cursor: pointer;
}
button.hd-serie__plus:hover { border-color: var(--color-primary); color: var(--color-primary); background: var(--color-primary-light); }
/* Die stille Kachel zeigt die Möglichkeit, ohne sie zu versprechen. */
.hd-serie__plus.is-still { cursor: default; opacity: 0.55; }

/* Der Verschluss: zwei Lamellen fahren zusammen und wieder auseinander. Das
   ist der Moment des Auslösens — und er passiert dort, wo das Bild entsteht,
   nicht in einem Kasten daneben. */
.hd-blende { position: absolute; inset: 0; }
.hd-blende__lamelle { position: absolute; left: 0; right: 0; height: 50%; background: #1c1917; }
.hd-blende__lamelle--oben { top: 0; animation: hd-blende-oben 0.55s ease-in-out forwards; }
.hd-blende__lamelle--unten { bottom: 0; animation: hd-blende-unten 0.55s ease-in-out forwards; }
@keyframes hd-blende-oben {
  0% { transform: translateY(-100%); }
  42%, 58% { transform: translateY(0); }
  100% { transform: translateY(-100%); }
}
@keyframes hd-blende-unten {
  0% { transform: translateY(100%); }
  42%, 58% { transform: translateY(0); }
  100% { transform: translateY(100%); }
}

/* Der Stift sitzt im Bild, oben rechts — markiert wird dort, wo markiert
   werden soll, nicht über eine Werkzeugleiste daneben. */
.hd-stift {
  position: absolute; top: var(--space-sm); right: var(--space-sm);
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; padding: 0;
  border: 1px solid var(--color-border); border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.92); color: var(--color-title);
  cursor: pointer;
}
.hd-stift:hover:not(:disabled) { border-color: var(--color-danger); color: var(--color-danger); }
.hd-stift:disabled { cursor: default; opacity: 0.5; }
/* Derselbe Stift in einer Kopfzeile statt über einem Bild: im Fluss, ohne
   Rahmen und ohne Fläche — er zeigt an, mehr nicht. */
.hd-stift--still {
  position: static; width: auto; height: auto;
  border: none; background: none; color: var(--color-secondary);
}

/* Der Pfeil, der beim Markieren ins Bild gezogen wird. `non-scaling-stroke`
   ist nötig, weil das SVG über `preserveAspectRatio=none` auf die Bildfläche
   gespannt wird: Ohne das wäre der Strich waagrecht und senkrecht verschieden
   dick. `pathLength` normiert die Länge auf 100, damit die Zeichenanimation
   unabhängig vom konkreten Pfad stimmt. */
.hd-anno { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
/* Bewusst OHNE `non-scaling-stroke`: Der Effekt lässt auch `stroke-dasharray`
   in Bildschirmpixeln rechnen statt in Pfadeinheiten. Der Schaft misst am
   Schirm rund 120 px, das Muster aber 100 — er brach vor seinem Ende ab und
   das sah aus wie eine Lücke zur Pfeilspitze. Die viewBox hat dasselbe
   Seitenverhältnis wie das Bild, der Strich wird also ohnehin gleichmäßig
   skaliert. Mit `pathLength` normiert, deckt dasharray: 100 jeden Pfad ab. */
.hd-anno__zug {
  fill: none;
  stroke: var(--color-danger); stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 100; stroke-dashoffset: 100;
  animation: hd-ziehen 0.5s ease-out forwards;
}
/* Die Spitze kommt, wenn der Schaft steht — so zieht sich der Pfeil wie
   gezeichnet und nicht wie zwei Striche zugleich. */
.hd-anno__zug--spitze { animation-duration: 0.25s; animation-delay: 0.45s; }
@keyframes hd-ziehen { to { stroke-dashoffset: 0; } }

/* Transkript und Beschreibung stehen an derselben Stelle — der Spinner legt
   sich dazwischen darüber. Der Wechsel ist der Punkt der Demo; fände er weiter
   unten statt, sähe im Termin niemand hin. */
.hd-wandel { position: relative; margin-top: var(--space-lg); }
.hd-ueberlagerung {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center; gap: var(--space-sm);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.82);
  font-size: var(--text-sm); font-weight: var(--font-semibold); color: var(--color-secondary);
}
.hd-spinner { flex: none; width: 15px; height: 15px; border: 2px solid var(--color-border); border-top-color: var(--color-primary); border-radius: 50%; animation: hd-dreh 0.8s linear infinite; }

/* Ein Knopf, dessen Arbeit getan ist, bleibt stehen und sagt das — er
   verschwindet nicht, sonst wandert im Termin das Layout unter der Hand. */
.hd-aktion:disabled { opacity: 0.55; cursor: default; }
.hd-aktion:disabled:hover { border-color: var(--color-border); background: none; }

/* Ein Abschnitt, der noch nichts enthält. Er steht von Anfang an da, damit im
   Termin ablesbar ist, was zu einer Feststellung gehört — und was davon noch
   fehlt. */
.hd-leerfeld {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-md);
  margin-top: var(--space-md); padding: var(--space-lg);
  border: 1px dashed var(--color-border); border-radius: var(--radius);
  background: var(--color-surface-subtle);
  font-size: var(--text-sm); color: var(--color-placeholder);
}

/* Ein Feld, das noch auf seine Angabe wartet. Es steht da und sagt, dass es
   fehlt — leer bliebe unklar, ob es vergessen wurde. An die Zusammenfassung
   gebunden: Als nackte Zustandsklasse färbte die Regel auch Protokolivers
   geöffnete Menüs kursiv, die denselben Namen für „aufgeklappt" tragen. */
.hd-erkannt .is-offen { color: var(--color-placeholder); font-weight: var(--font-normal); font-style: italic; }

/* Während gesucht oder gerechnet wird. */
.hd-arbeitet { display: flex; align-items: center; gap: var(--space-sm); margin-top: var(--space-md); font-size: var(--text-sm); color: var(--color-secondary); }

/* Ein abgesetzter Teil der Feststellung — Fotos, Zusammenfassung, Beschreibung,
   Normen, Lage. Alle tragen dieselbe Überschriftgröße und denselben Abstand:
   Sie sind gleichrangige Teile eines Befunds, keiner wiegt schwerer. */
.hd-teil { margin-top: var(--space-xl); padding-top: var(--space-lg); border-top: 1px solid var(--color-border-subtle); }
.hd-teil--erster { margin-top: var(--space-lg); padding-top: 0; border-top: none; }
/* Direkt unter den Fotos: ohne Trennlinie, die Bilder grenzen den Teil schon ab. */
.hd-teil--ohne-linie { padding-top: 0; border-top: none; }
/* Steht der erste Teil ganz oben in der Karte, trägt die Karte den Abstand. */
.hd-card > .hd-teil--erster:first-child { margin-top: 0; }

/* Was im Kartenkopf rechts steht — hier der Abschluss der Feststellung. */
.hd-kopfaktion { display: inline-flex; align-items: center; gap: var(--space-md); }

/* Ein Akt führt mehrere Pläne; in der Demo ist einer hinterlegt. */
.hd-planwahl {
  display: inline-flex; align-items: center; gap: var(--space-sm);
  padding: var(--space-xs) var(--space-md);
  border: 1px solid var(--color-border); border-radius: var(--radius);
  background: var(--color-card); font-size: var(--text-sm); color: var(--color-secondary);
  opacity: 0.7; cursor: default;
}
/* Überschrift und eine Nebenhandlung auf einer Zeile. */
.hd-teil__kopf { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-md); }
.hd-teil__kopf .hd-block__label { margin: 0; }

/* Eine Norm je Zeile über die volle Breite: Kennung, Titel, Begründung, die
   beiden Wege in den Normtext — und im Suchfenster der Knopf, der sie
   übernimmt. Nebeneinander in Spalten wurden die Kärtchen hoch und die
   Begründung brach auf vier Zeilen um.

   Vier Spalten im Suchfenster, drei in der Feststellung: Dort fehlt das
   Kästchen, und eine leere vierte Spur ließe rechts eine Lücke. */
.hd-normz {
  display: grid; grid-template-columns: minmax(140px, auto) minmax(150px, 1fr) 1.3fr auto;
  align-items: center; gap: var(--space-md);
  padding: var(--space-sm) var(--space-md);
  border: 1px solid var(--color-border); border-radius: var(--radius);
  background: var(--color-card);
}
.hd-normz--ergebnis { grid-template-columns: minmax(140px, auto) minmax(150px, 1fr) 1.3fr; }
/* Schmal: Kennung oben mit dem Kästchen in der rechten Ecke, darunter Titel
   und Begründung über die ganze Breite. */
@media (max-width: 800px) {
  .hd-normz, .hd-normz--ergebnis { grid-template-columns: minmax(0, 1fr) auto; gap: 2px var(--space-sm); }
  .hd-normz > :is(.hd-normz__titel, .hd-normz__warum) { grid-column: 1 / -1; }
  .hd-normz__nehmen { grid-column: 2; grid-row: 1; justify-self: end; }
}
.hd-normz__kennung { display: inline-flex; align-items: center; gap: var(--space-xs); font-size: var(--text-sm); font-weight: var(--font-bold); color: var(--color-title); }
.hd-normz__kennung svg { flex: none; color: var(--color-secondary); }
.hd-normz__titel { font-size: var(--text-xs); color: var(--color-body); }
.hd-normz__warum { font-size: var(--text-xs); color: var(--color-secondary); }
/* Ein Knopf, der nur ein Symbol trägt: Fundstelle, Normtext, das Öffnen einer
   Beilage. Gesperrt wird er blass — so ist im Termin erkennbar, dass es den Weg
   gibt, ohne dass jemand darauf wartet. Das `disabled` sagt das, nicht der
   Klassenname: Derselbe Knopf tut an der einen Stelle etwas und an der anderen
   nicht. */
.hd-ikonknopf {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; padding: 0;
  border: 1px solid var(--color-border); border-radius: var(--radius-sm);
  background: none; color: var(--color-secondary); cursor: pointer;
}
.hd-ikonknopf:hover { border-color: var(--color-primary); color: var(--color-primary); }
.hd-ikonknopf:disabled { cursor: default; opacity: 0.5; }
.hd-ikonknopf:disabled:hover { border-color: var(--color-border); color: var(--color-secondary); }

/* Übernommen wird über das Kästchen: angehakt heißt, die Norm steht in der
   Feststellung. Vorher trug die Zeile dazu einen grünen Zustand — grün liest
   sich auf einem Mangel wie „in Ordnung" und sagte zweimal, was das Kästchen
   allein schon sagt. */
.hd-normz__nehmen { display: inline-flex; align-items: center; justify-self: end; cursor: pointer; }
/* Das Kästchen ist selbst gezeichnet: Das native saß auf halben Pixeln anders
   als der Schein um sein Label, und der Ring lag sichtbar schief. So zeichnen
   Kästchen und Schein mit derselben Kante. */
.hd-normz__nehmen input {
  appearance: none; flex: none; display: block;
  width: 18px; height: 18px; margin: 0;
  border: 1.5px solid color-mix(in srgb, var(--color-secondary) 55%, white); border-radius: 5px;
  background: var(--color-card) center / 12px no-repeat;
  cursor: pointer;
}
.hd-normz__nehmen input:checked {
  border-color: var(--color-primary);
  background-color: var(--color-primary);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}
.hd-normz__nehmen input:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
/* Leuchtet das Kästchen, folgt der Schein seiner Kante statt eines Kreises. */
.hd-normz__nehmen.hd-naechster { border-radius: 5px; }
/* Ein stilles Kästchen zeigt, dass die Norm zu haben wäre — und nimmt in der
   Demo nichts an. Es ist gesperrt, und der Zeiger verspricht nichts. */
.hd-normz__nehmen.is-still, .hd-normz__nehmen.is-still input { cursor: default; }
.hd-normz__nehmen.is-still input { opacity: 0.45; }

/* Die übernommenen Normen in der Feststellung. */
.hd-normliste { display: flex; flex-direction: column; gap: var(--space-sm); margin-top: var(--space-md); }

/* Das Suchfenster: breiter als die Filtermaske, weil jede Zeile eine ganze
   Norm trägt. Beide Klassen im Selektor, weil `.hd-modal` seine Breite weiter
   unten setzt — bei gleicher Spezifität gewinnt sonst die spätere Regel. */
.hd-modal.hd-normmodal { width: min(920px, calc(100vw - 2 * var(--space-xl))); }
/* Die Suche von Hand — sichtbar, aber ohne Funktion: Sie zeigt, dass es den
   Weg gibt. Eine Suche, die antwortet, bräuchte einen Normenpool dahinter,
   und ein Eingabefeld widerspräche der Regel, dass in den Demos nicht getippt
   wird (siehe test_keine_demo_nimmt_freien_text_entgegen). */
.hd-normsuche { display: flex; align-items: center; gap: var(--space-sm); }
.hd-normsuche__feld {
  flex: 1; display: flex; align-items: center; gap: var(--space-sm);
  padding: var(--space-md); border: 1px solid var(--color-border); border-radius: var(--radius);
  color: var(--color-secondary); font-size: var(--text-sm);
}
.hd-normsuche__wort { color: var(--color-placeholder); }
.hd-normsuche.is-still { opacity: 0.6; }
.hd-normsuche.is-still .hd-normsuche__feld { background: var(--color-surface-subtle); cursor: default; }
.hd-normsuche.is-still .hd-aktion { font: inherit; font-size: var(--text-sm); font-weight: var(--font-semibold); cursor: default; }

/* Woher die Vorschläge kommen: aus dem Abgleich, nicht aus der Suche darüber. */
.hd-normgruppe { display: flex; flex-direction: column; gap: var(--space-sm); }
.hd-normgruppe__kopf { display: inline-flex; align-items: center; gap: var(--space-xs); font-size: var(--text-xs); font-weight: var(--font-bold); text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-secondary); }
.hd-normgruppe__kopf .hd-sparkle { color: var(--color-primary); }
.hd-normstand { font-size: var(--text-sm); color: var(--color-secondary); }
.hd-normstand strong { color: var(--color-title); }

/* Derselbe Abschluss noch einmal am Fuß der Feststellung. */
.hd-fertigzeile {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--space-md);
  margin-top: var(--space-xl); padding-top: var(--space-lg); border-top: 1px solid var(--color-border-subtle);
}

/* Der Plan im Aufnahmeverlauf steht breiter als im Befundfenster. */
.hd-planmini--aufnahme { max-width: 460px; margin-top: var(--space-lg); }

/* Solange nicht gezeigt wurde, lädt der Plan zum Zeigen ein. */
.hd-planmini--waehlbar { cursor: crosshair; }
.hd-planmini--waehlbar:hover { border-color: var(--color-primary); }
.hd-planhinweis {
  position: absolute; left: 50%; top: var(--space-md); transform: translateX(-50%);
  padding: var(--space-xs) var(--space-md); border-radius: var(--radius-full);
  background: var(--color-primary); color: #fff;
  font-size: var(--text-xs); font-weight: var(--font-semibold); white-space: nowrap;
}

/* Diktat: eine angedeutete Wellenform, kein echtes Audio. */
.hd-diktat { display: flex; align-items: center; gap: var(--space-lg); padding: var(--space-lg); border-radius: var(--radius); background: var(--color-surface-hover); }
.hd-diktat__text { flex: 1; font-style: italic; font-size: var(--text-sm); color: var(--color-secondary); line-height: var(--leading-relaxed); }

.hd-split { display: grid; grid-template-columns: minmax(280px, 380px) 1fr; gap: var(--space-lg); align-items: start; }
/* Feste Breite statt minmax: Sonst misst das Raster je Kapitel neu, und die
   Kapitelliste springt beim Blättern in der Breite. */
.hd-split--kapitel { grid-template-columns: 320px 1fr; }
@media (max-width: 900px) { .hd-split, .hd-split--kapitel { grid-template-columns: 1fr; } }

/* ── Gutachtrude: Befundaufnahme, Plan, Gutachten ────────────────────────────── */

/* Das Foto der Feststellung — im Termin das, was vor Ort entsteht. */
.hd-foto { margin: 0; }
.hd-foto img { display: block; width: 100%; max-height: 320px; object-fit: cover; border-radius: var(--radius); }
.hd-foto figcaption { margin-top: var(--space-sm); font-size: var(--text-xs); color: var(--color-secondary); }

/* Was aus dem Gesprochenen strukturiert wurde. */
.hd-erkannt { display: flex; flex-direction: column; }
.hd-erkannt__zeile { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-lg); padding: var(--space-sm) 0; border-bottom: 1px solid var(--color-border-subtle); font-size: var(--text-sm); color: var(--color-secondary); }
.hd-erkannt__zeile:last-child { border-bottom: none; }
.hd-erkannt__zeile strong { color: var(--color-title); text-align: right; }
.hd-befundtext { margin: 0; font-size: var(--text-sm); line-height: var(--leading-relaxed); }

/* Die Detailbeschreibung in ihren Abschnitten — gesehen, gemessen, geschlossen.
   Die Überschrift steht über dem Absatz, nicht daneben: Der Befund erscheint
   einmal in der breiten Karte und einmal im schmalen Fenster, und eine
   Beschriftungsspalte drückt dort den Text auf vier Wörter je Zeile.

   Bewusst nicht versalgesetzt wie `.hd-block__label`: Die Abschnitte liegen
   eine Stufe unter „Detailbeschreibung" und dürfen nicht gleich laut sein. */
.hd-befundteil + .hd-befundteil { margin-top: var(--space-md); }
.hd-befundteil__label {
  display: block; margin-bottom: 2px;
  font-size: var(--text-xs); font-weight: var(--font-semibold); color: var(--color-title);
}
.hd-befundteil p { margin: 0; }

/* Die Liste der Befundpunkte mit ihrem Foto. */
/* Die Übersicht ist eine Tabelle ohne Tabelle: Nummer, Schweregrad, Name, Ort
   in ausgerichteten Spalten. Eine Zeile je Befund — elf Punkte sind damit auf
   einen Blick erfassbar, was Karten mit Vorschaubild nie schaffen. */
.hd-bpliste { display: flex; flex-direction: column; gap: 1px; margin-top: var(--space-md); }
/* Die Spaltenbreiten stehen fest, nicht `auto`: Jede Zeile ist ihr eigenes
   Grid, `auto` richtet sich deshalb je Zeile neu aus und die Namen begännen an
   verschiedenen Kanten. */
.hd-bp { display: grid; grid-template-columns: 48px 40px 100px 1fr 150px; align-items: center; gap: var(--space-md); padding: var(--space-xs) var(--space-md); border-radius: var(--radius); text-decoration: none; color: inherit; }
/* Die Marke so breit wie ihr Wort, mit Luft rechts — die Spalte fasst das längste. */
.hd-bp > .hd-schwere { justify-self: start; }
.hd-bp__bild { width: 48px; height: 36px; object-fit: cover; border-radius: var(--radius-sm); }
.hd-bp__ort { display: inline-flex; align-items: center; gap: var(--space-xs); font-size: var(--text-sm); color: var(--color-secondary); white-space: nowrap; }
.hd-bp__ort svg { flex: none; }
.hd-bp:hover { background: var(--color-surface-hover); }
.hd-bp__nr { font-size: var(--text-xs); font-weight: var(--font-bold); color: var(--color-secondary); }

/* Der Abspieler im Befundfenster, wie im Hub: eine gerahmte Zeile mit rundem
   Knopf, der Spur und der Zeit. Was schon gelaufen ist, trägt die
   Grundfarbe. */
.hd-abspieler {
  display: flex; align-items: center; gap: var(--space-md);
  padding: var(--space-sm) var(--space-md) var(--space-sm) var(--space-sm);
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
}
.hd-abspieler__knopf {
  flex: none;
  width: 40px; height: 40px;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0; border: none; border-radius: 50%;
  background: var(--color-surface-hover); color: var(--color-primary);
  cursor: pointer;
}
.hd-abspieler__knopf:not(:disabled):hover { background: color-mix(in srgb, var(--color-primary) 12%, white); }
.hd-abspieler__knopf:disabled { cursor: default; }
.hd-abspieler__play { margin-left: 2px; }
.hd-abspieler__pause, .hd-abspieler.is-laeuft .hd-abspieler__play { display: none; }
.hd-abspieler.is-laeuft .hd-abspieler__pause { display: block; }
.hd-abspieler__spur {
  --hd-stand: 0%;
  position: relative;
  flex: 1; min-width: 0;
  height: 36px;
  display: flex; align-items: center; justify-content: space-between;
  overflow: hidden;
}
.hd-abspieler__spur i {
  flex: none; display: block;
  width: 3px; border-radius: 2px;
  background: var(--color-border);
}
.hd-abspieler__spur i.is-gespielt { background: var(--color-primary); }
.hd-abspieler__kopf {
  position: absolute; top: 2px; bottom: 2px; left: var(--hd-stand); z-index: 1;
  width: 3px; margin-left: -1px; border-radius: 2px;
  background: var(--color-primary);
}
.hd-abspieler__zeit { flex: none; font-size: var(--text-sm); color: var(--color-secondary); font-variant-numeric: tabular-nums; }
.hd-diktat--aufnahme { flex-direction: column; align-items: stretch; gap: var(--space-md); }
.hd-diktat--aufnahme .hd-diktat__text { margin: 0; }

/* In der Demo lässt sich ein Befundpunkt öffnen, nicht elf (siehe DECISION bei
   `Befund.diktat`). Die übrigen stehen still da: gleiche Gestalt, aber kein
   Zeiger und kein Hover, der etwas verspricht, was nicht kommt. */
.hd-bp.is-still { cursor: default; }
.hd-bp.is-still:hover { background: none; }
.hd-bp__titel { font-size: var(--text-sm); font-weight: var(--font-semibold); color: var(--color-title); }
/* Die eben dokumentierte Feststellung taucht in der Liste auf. Sie kommt an
   einer Stelle dazu, auf die gerade niemand schaut — deshalb hebt sie sich
   beim Erscheinen kurz hervor, statt nur einzublenden. */
.hd-bp.is-neu { animation: hd-bp-auf 900ms ease-out; }
@keyframes hd-bp-auf {
  0% { opacity: 0; transform: translateY(-10px) scale(0.97); background: var(--color-primary-light); }
  35% { opacity: 1; transform: translateY(0) scale(1); background: var(--color-primary-light); }
  100% { background: transparent; }
}

/* Ursache oder Folge — die Unterscheidung trägt das ganze Gutachten. */
/* Schweregrad und Einordnung sind zwei Fragen, nicht eine: Wie schwer wiegt
   der Punkt — und ist er Ursache oder Folge. Die Skala für die Schwere steht
   weiter unten bei `.hd-schwere` (rot/amber/blau) und war seit dem Umbau des
   Datensatzes verwaist — sie kommt mit diesem Feld wieder in Gebrauch. */
.hd-bewertung--ursache { background: var(--color-danger-bg); color: var(--color-danger); }
.hd-bewertung--folge { background: var(--color-warning-bg); color: var(--color-warning-fg); }
.hd-bewertung--offen { background: var(--color-surface-hover); color: var(--color-secondary); }
/* In den Angaben des Befunds steht der Schweregrad als Kennzeichen mitten im
   Fließtext — dort darf er die Zeilenhöhe nicht sprengen. */
.hd-fakt .hd-schwere { vertical-align: middle; }

/* Der Bestandsplan mit den verorteten Punkten. */
.hd-plan { position: relative; margin-top: var(--space-md); border: 1px solid var(--color-border); border-radius: var(--radius); overflow: hidden; background: var(--color-card); }
.hd-plan img { display: block; width: 100%; }
.hd-pin { position: absolute; transform: translate(-50%, -50%); display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; border: 2px solid #fff; box-shadow: var(--shadow-sm); font-size: 10px; font-weight: var(--font-bold); color: #fff; text-decoration: none; }
.hd-pin--ursache { background: var(--color-danger); }
.hd-pin--folge { background: var(--color-warning-fg); }
.hd-pin--offen { background: var(--color-secondary); }
a.hd-pin:hover { transform: translate(-50%, -50%) scale(1.18); }
.hd-pin.is-neu { animation: hd-puls-pin 1.6s ease-out 3; }
@keyframes hd-puls-pin {
  0%, 100% { box-shadow: 0 0 0 0 rgba(185, 28, 28, 0.5); }
  50% { box-shadow: 0 0 0 8px rgba(185, 28, 28, 0); }
}
.hd-planlegende { display: flex; flex-wrap: wrap; gap: var(--space-lg); margin-top: var(--space-sm); font-size: var(--text-xs); color: var(--color-secondary); }
.hd-planlegende__eintrag { display: inline-flex; align-items: center; gap: var(--space-sm); }
.hd-planlegende i { position: static; transform: none; width: 12px; height: 12px; border-width: 1px; }

/* Der Plan hat seit den Reitern eine Tafel für sich. Ohne Grenze wüchse er auf
   großen Schirmen über jedes lesbare Maß — die Nadeln sitzen prozentual und
   zögen mit. */
.hd-card--plan { max-width: 900px; }

/* Zwei Angaben, die der Befundtext nicht hergibt — als Zeile, nicht als
   Tabelle: Für zwei Werte wäre eine Tabelle Apparat ohne Nutzen. */
.hd-fakten { display: flex; flex-direction: column; gap: var(--space-xs); margin-top: var(--space-md); padding-top: var(--space-lg); border-top: 1px solid var(--color-border-subtle); }
.hd-fakt { display: flex; align-items: center; gap: var(--space-md); min-height: 30px; margin: 0; font-size: var(--text-sm); color: var(--color-title); }
.hd-fakt span { flex: none; width: 120px; color: var(--color-secondary); }

/* Beleg und Ort nebeneinander: das Foto breit, der Planausschnitt daneben.
   Unter 760px stapeln sie — auf einem Telefon wäre der Plan sonst briefmarken-
   groß. */
.hd-belege { display: grid; grid-template-columns: 1fr 300px; gap: var(--space-lg); align-items: start; }
@media (max-width: 760px) { .hd-belege { grid-template-columns: 1fr; } }

/* Der Plan als Bild im Befund: klein, mit genau einer Nadel — der Stelle, um
   die es geht. Bewusst ohne Klickziel: Er zeigt, wo es war, und verspricht
   nichts weiter. */
.hd-planmini { position: relative; display: block; width: 100%; border: 1px solid var(--color-border); border-radius: var(--radius); overflow: hidden; background: var(--color-card); }
.hd-planmini img { display: block; width: 100%; }
.hd-planmini .hd-pin { width: 18px; height: 18px; font-size: 9px; }

/* Das Transkript belegt die Beschreibung, es ersetzt sie nicht: zuletzt und
   zugeklappt. Aufgeklappt wie im Hub — Titel mit Sprechblase, darunter der
   Wortlaut als hellgraue, rund abgesetzte Fläche in normaler Schrift. */
.hd-transkript { margin-top: var(--space-xl); border-top: 1px solid var(--color-border-subtle); padding-top: var(--space-lg); }
/* Im Kapitel steht das Transkript direkt unter dem Textfeld — dessen Rahmen
   trennt schon, eine Linie darunter wäre doppelt. */
.hd-transkript[data-kapitel-transkript] { margin-top: var(--space-lg); border-top: none; padding-top: 0; }
.hd-transkript summary {
  display: flex; align-items: center; justify-content: flex-start; gap: var(--space-sm);
  cursor: pointer; list-style: none;
  font-size: var(--text-sm); font-weight: var(--font-medium); color: var(--color-title);
}
.hd-transkript summary::-webkit-details-marker { display: none; }
.hd-transkript__wort { display: inline-flex; align-items: center; gap: var(--space-sm); }
.hd-transkript__wort svg { flex: none; color: var(--color-secondary); }
.hd-transkript__pfeil { flex: none; color: var(--color-secondary); transition: transform 0.15s ease; }
.hd-transkript summary:hover .hd-transkript__pfeil { color: var(--color-title); }
.hd-transkript[open] summary { margin-bottom: var(--space-md); }
/* Der Abspieler steht frei; grau hinterlegt ist nur der Wortlaut selbst. */
.hd-transkript .hd-diktat {
  flex-direction: column; align-items: stretch; gap: var(--space-sm);
  padding: 0; border-radius: 0; background: none;
}
.hd-transkript .hd-diktat__text {
  padding: var(--space-md) var(--space-lg);
  border-radius: 16px;
  background: color-mix(in srgb, var(--color-secondary) 12%, white);
  font-style: normal; color: var(--color-body);
}
.hd-transkript[open] .hd-transkript__pfeil { transform: rotate(180deg); }


/* Die Beteiligten der Befundaufnahme: Name, darunter wofür sie da waren.
   Nicht .hd-anwesend — den Namen trägt bereits Protokolivers Anwesenheits-
   zeile, deren align-items: center diese Liste mittig gezogen hätte. */
.hd-beteiligte { list-style: none; margin: var(--space-md) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-md); }
.hd-beteiligte li { display: flex; flex-direction: column; gap: 1px; }
.hd-beteiligte strong { font-size: var(--text-sm); }
.hd-beteiligte span { font-size: var(--text-xs); color: var(--color-secondary); }
/* Ein Textknopf mit Plus in der Agentenfarbe — steht da, tut in der Demo nichts. */
.hd-plusknopf {
  display: inline-flex; align-items: center; gap: var(--space-xs);
  margin-top: var(--space-md); padding: 0; border: none; background: none;
  color: var(--color-primary); font: inherit; font-size: var(--text-sm); font-weight: var(--font-medium);
}
.hd-plusknopf:disabled { cursor: default; }
/* Die Kapitel des Gutachtens. */
/* Die Kapitel als Tabelle ohne Tabelle: Nummer, Titel und Stand in festen
   Spalten, damit jede Zeile an denselben Kanten steht — auch wenn ein Titel
   umbricht. */
.hd-kapitel { display: flex; flex-direction: column; gap: var(--space-xs); }
.hd-kap { display: grid; grid-template-columns: 32px minmax(0, 1fr) 60px; align-items: center; column-gap: var(--space-md); padding: var(--space-md); border-radius: var(--radius); text-decoration: none; color: inherit; }
.hd-kap:hover { background: var(--color-surface-hover); }
.hd-kap.is-aktiv { background: var(--color-primary-light); }
.hd-kap__nr { font-size: var(--text-xs); font-weight: var(--font-bold); color: var(--color-secondary); }
.hd-kap__titel { font-size: var(--text-sm); line-height: var(--leading-snug); color: var(--color-title); }

.hd-werkzeuge { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-bottom: var(--space-lg); }
.hd-leerkapitel { padding: var(--space-xl); border: 1px dashed var(--color-border); border-radius: var(--radius); text-align: center; font-size: var(--text-sm); color: var(--color-placeholder); }

/* Was aus dem Diktat geworden ist. Die Paare gesagt → geschrieben standen
   früher darunter; sie erklärten einen Vorgang, den die Demo bereits zeigt. */
.hd-bereinigt { display: flex; flex-direction: column; gap: var(--space-sm); margin-top: var(--space-md); }
/* Der Abstand steht am Rahmen, nicht am Feld darin: Sonst lag er innerhalb des
   Scheins, und der Ring saß oben mit Luft über dem Textfeld. */
.hd-bereinigt > .hd-mdfeld { margin-top: 0; }
.hd-bereinigt.hd-naechster { border-radius: 12px; }

.hd-bpkurz { display: flex; flex-direction: column; margin-top: var(--space-lg); }
.hd-bpkurz__zeile { display: grid; grid-template-columns: 40px 1fr auto; align-items: center; gap: var(--space-md); padding: var(--space-sm) 0; border-bottom: 1px solid var(--color-border-subtle); font-size: var(--text-sm); }
.hd-bpkurz__zeile:last-child { border-bottom: none; }

/* Wie schwer ein Befundpunkt wiegt. Blau statt Grün für „gering": Grün läse
   sich an einem Schaden wie „in Ordnung" — gemeint ist „nicht dringend". */
.hd-schwere--schwer { background: #fee2e2; color: #b91c1c; }
.hd-schwere--mittel { background: #fef3c7; color: #b45309; }
.hd-schwere--gering { background: #e0f2fe; color: #0369a1; }

.hd-detail__block { margin-bottom: var(--space-lg); }
/* Der letzte Block einer Karte und das Letzte darin tragen keinen Abstand
   nach unten — den Rand gibt die Karte selbst. */
.hd-card > .hd-detail__block:last-child,
.hd-detail__block:last-child > :last-child { margin-bottom: 0; }
.hd-detail__block p { margin: 0; font-size: var(--text-sm); line-height: var(--leading-relaxed); }
.hd-leer { color: var(--color-secondary); }

/* Der agentenübergreifende Moment: Mangel trifft Fundstelle. */
.hd-normbezug { display: flex; flex-direction: column; gap: 2px; padding: var(--space-lg); border-radius: var(--radius); border-left: 3px solid var(--color-accent); background: var(--color-surface-hover); }
.hd-normbezug__label { font-size: var(--text-xs); font-weight: var(--font-bold); text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-accent); }
.hd-normbezug span:last-child { font-size: var(--text-sm); color: var(--color-secondary); }

/* Das erzeugte Dokument — Papier-Anmutung im Hauslayout. */
.hd-dokument { padding: var(--space-4xl); }
.hd-dokument__kopf { display: flex; justify-content: space-between; padding-bottom: var(--space-md); border-bottom: 2px solid var(--color-title); font-size: var(--text-sm); }
.hd-dokument__firma { font-weight: var(--font-bold); color: var(--color-title); }
.hd-dokument__typ { color: var(--color-secondary); }
.hd-dokument__rest { font-size: var(--text-sm); color: var(--color-secondary); font-style: italic; }

.hd-abschluss { display: flex; align-items: center; justify-content: space-between; gap: var(--space-lg); flex-wrap: wrap; padding: var(--space-xl); border-radius: var(--radius-lg); background: var(--color-primary); color: #fff; }
.hd-abschluss .hd-btn { margin-top: 0; background: var(--color-accent); }
.hd-abschluss .hd-btn:hover { background: color-mix(in srgb, var(--color-accent) 88%, black); }

/* ── Gemeinsame Bausteine der übrigen Agenten ────────────────────────────────── */

.hd-marke { background: var(--color-surface-hover); color: var(--color-secondary); }
.hd-marke.is-gruen { background: var(--color-success-bg); color: var(--color-success-fg); }
.hd-marke.is-pflicht { background: var(--color-info-bg); color: var(--color-info-fg); }
.hd-marke.is-neu { background: color-mix(in srgb, var(--color-accent) 14%, white); color: var(--color-accent); }
.hd-marke.is-blau { background: var(--color-info-bg); color: var(--color-info-fg); }
.hd-marke.is-violett { background: #f5f3ff; color: #6d28d9; }
.hd-marke.is-warnung { background: var(--color-warning-bg); color: var(--color-warning-fg); }

.hd-fussnote { display: block; margin: var(--space-md) 0 0; font-size: var(--text-xs); color: var(--color-secondary); }

/* Aktionen sind im Mockup bewusst tot: Es wird gezeigt, was der Hub kann —
   geklickt wird nur, was zur nächsten vorbereiteten Ansicht führt. */
.hd-exporte { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-top: var(--space-lg); }
/* Im Seitenfenster folgen die Knöpfe direkt auf den Block davor — den Abstand
   gibt das Fenster, Rand und Rand kämen sonst noch dazu. */
.hd-sp__body > .hd-detail__block:has(+ .hd-exporte) { margin-bottom: 0; }
.hd-sp__body > .hd-detail__block + .hd-exporte { margin-top: 0; }
.hd-aktion {
  display: inline-block;
  /* Die meisten Aktionen im Mockup sind bewusst tot — dann ist auch die Hand
     am Zeiger eine Zusage, die niemand einlöst. */
  cursor: default;
  /* Maße wie die Knöpfe im Hub („Speichern"): gut 40px hoch, großzügig seitlich. */
  padding: 10px 18px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--color-secondary);
  background: var(--color-card);
}
.hd-aktion.is-primaer { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
/* Mit Symbol steht das Symbol mittig neben dem Wort, nicht auf der Grundlinie. */
.hd-aktion:has(> svg) { display: inline-flex; align-items: center; gap: var(--space-xs); }
button.hd-aktion { display: inline-flex; align-items: center; gap: var(--space-sm); font: inherit; font-size: var(--text-sm); font-weight: var(--font-semibold); cursor: pointer; }
button.hd-aktion:hover { border-color: var(--color-primary); color: var(--color-primary); }
button.hd-aktion.is-primaer:hover {
  background: color-mix(in srgb, var(--color-primary) 75%, black);
  border-color: color-mix(in srgb, var(--color-primary) 75%, black);
  color: #fff;
}
/* Der Abschluss in der Akzentfarbe: Die Farbe sagt, dass alles da ist und nur
   noch der Klick fehlt. Grau, solange das nicht stimmt — auch beim Überfahren,
   ein gesperrter Knopf verspricht nichts. */
.hd-aktion.is-akzent { background: var(--color-accent); border-color: var(--color-accent); color: #fff; }
button.hd-aktion.is-akzent:hover {
  background: color-mix(in srgb, var(--color-accent) 88%, black);
  border-color: color-mix(in srgb, var(--color-accent) 88%, black);
  color: #fff;
}
/* Gesperrte gefüllte Knöpfe sind hellgrau — derselbe Ton wie Senden im Chat. */
button.hd-aktion.is-akzent:disabled,
button.hd-aktion.is-akzent:disabled:hover,
button.hd-aktion.is-primaer:disabled,
button.hd-aktion.is-primaer:disabled:hover {
  background: var(--color-surface-hover); border-color: var(--color-surface-hover); color: var(--color-placeholder); opacity: 1;
}
button.hd-aktion:active { transform: translateY(1px); }
/* Ein Knopf, der nur sein Symbol trägt — Pause braucht kein Wort. */
.hd-ikon { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 1px solid var(--color-border); border-radius: var(--radius-full); background: var(--color-card); color: var(--color-secondary); cursor: pointer; }
.hd-ikon:hover { border-color: var(--color-primary); color: var(--color-primary); }
.hd-ikon__aus { display: none; }
.hd-ikon.is-pausiert .hd-ikon__an { display: none; }
.hd-ikon.is-pausiert .hd-ikon__aus { display: inline-flex; }
.hd-ikon.is-pausiert { border-color: var(--color-primary); color: var(--color-primary); }
.hd-aufnahme.is-pausiert .hd-eq i { animation-play-state: paused; }
.hd-aufnahme.is-pausiert .hd-aufnahme__zeit { color: var(--color-secondary); }
/* Wo die KI arbeitet, stehen Funken — der Knopf trägt die Farbe des Agenten. */
.hd-aktion--ki { display: inline-flex; align-items: center; gap: var(--space-sm); border-color: var(--color-primary); color: var(--color-primary); }

/* Zweispaltig mit Panel rechts — das Gegenstück zu hd-split. */
.hd-split--rechts { grid-template-columns: 1fr minmax(320px, 420px); }
.hd-split.is-einspaltig { grid-template-columns: 1fr; }
.hd-spalte { display: flex; flex-direction: column; gap: var(--space-lg); min-width: 0; }
@media (max-width: 1100px) { .hd-split--rechts { grid-template-columns: 1fr; } }

.hd-detailkopf__zu { flex: none; font-size: var(--text-sm); color: var(--color-secondary); text-decoration: none; }
.hd-detailkopf__zu:hover { color: var(--color-accent); }

/* Die hochgestellte Belegnummer vor der Quelle. */
.hd-belegnr {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--color-primary); color: #fff;
  font-size: 10px;
}

/* ── Tabellen (Gefahrgudrun, Elvira) ─────────────────────────────────────────── */

.hd-tabelle { display: flex; flex-direction: column; font-size: var(--text-sm); }
.hd-tabelle__kopf,
.hd-tabelle__zeile {
  display: grid;
  gap: var(--space-md);
  align-items: center;
  padding: var(--space-sm) var(--space-md);
  /* Prüftabelle: Nr., Arbeitsstoff, Piktogramme, H-Sätze, CAS, Conf., Check. */
  grid-template-columns: 32px 1.6fr 1fr 1.2fr 0.9fr 62px 32px;
}
.hd-tabelle__kopf {
  font-size: var(--text-xs); font-weight: var(--font-bold);
  text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-secondary);
  border-bottom: 1px solid var(--color-border);
}
.hd-tabelle__zeile { border-bottom: 1px solid var(--color-border-subtle); text-decoration: none; color: inherit; }
a.hd-tabelle__zeile:hover { background: var(--color-surface-hover); }
.hd-tabelle__zeile.is-active { background: var(--color-primary-light); }
.hd-tabelle__zeile.is-fehler { background: var(--color-danger-bg); }
.hd-tabelle__zeile em { color: var(--color-secondary); }
.hd-tabelle--export .hd-tabelle__kopf,
.hd-tabelle--export .hd-tabelle__zeile { grid-template-columns: 32px 1.4fr 1.6fr 0.9fr 1.1fr 0.6fr 1.1fr 0.8fr; font-size: var(--text-xs); }
.hd-tabelle--lv .hd-tabelle__kopf,
.hd-tabelle--lv .hd-tabelle__zeile { grid-template-columns: 78px 1fr 96px 56px 100px 120px; }
/* Zahlenspalten stehen rechts und in gleicher Zifferbreite — sonst wandert
   das Komma von Zeile zu Zeile. */
.hd-tabelle--lv .is-zahl { text-align: right; font-variant-numeric: tabular-nums; }
/* Am Entwurf wird noch gearbeitet: Jede Zeile lässt sich öffnen. */
a.hd-tabelle__zeile { text-decoration: none; color: inherit; }
a.hd-tabelle__zeile:hover { background: var(--color-surface-hover); }
/* Geöffnet wird eine Zeile, nicht fünfundvierzig. */
.hd-tabelle__zeile.is-offenbar { box-shadow: inset 2px 0 0 var(--color-primary); }
.hd-tabelle__zeile.is-offen { background: color-mix(in srgb, var(--color-warning) 8%, white); }
.hd-tabelle__zeile.is-offen:hover { background: color-mix(in srgb, var(--color-warning) 14%, white); }
.hd-tabelle--lv .hd-tabelle__zeile.is-summe { border-bottom: none; border-top: 2px solid var(--color-title); font-weight: var(--font-bold); color: var(--color-title); }
/* Elvira: Die Tabelle des Entwurfs steht in einem eigenen grauen Rahmen,
   die Knöpfe darüber und die Seitenleiste darunter nicht. */
.hd-body[data-agent="elvira"] .hd-tabelle--lv {
  margin-top: var(--space-lg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}
.hd-preisquelle { display: block; font-size: var(--text-xs); font-style: normal; color: var(--color-secondary); }

/* ── Archibald ───────────────────────────────────────────────────────────────── */

/* Die Reihenfolge der Liste ist das Relevanzsignal — der Punkt nennt nur die
   Stufe, Prozentwerte gibt es bewusst nicht. */
.hd-relevanz { flex: none; width: 10px; height: 10px; border-radius: 50%; }
.hd-relevanz--hoch { background: var(--color-success); }
.hd-relevanz--mittel { background: var(--color-warning); }
.hd-relevanz--niedrig { background: var(--color-border); }

/* Frage und Antwort im Projekt-Chat und in Normberts Anschlussfragen. */
.hd-chat__frage { align-self: flex-end; max-width: 85%; padding: var(--space-md) var(--space-lg); border-radius: var(--radius-lg); background: var(--color-surface-hover); color: var(--color-body); font-size: var(--text-sm); }
.hd-chat__antwort p { margin: 0 0 var(--space-md); font-size: var(--text-sm); line-height: var(--leading-relaxed); }

/* ── Mailanie ────────────────────────────────────────────────────────────────── */

.hd-mailzeile { display: flex; flex-direction: column; gap: var(--space-sm); padding: var(--space-md); border: 1px solid var(--color-border); border-radius: var(--radius); text-decoration: none; color: inherit; }
.hd-mailzeile:hover { background: var(--color-surface-hover); }
.hd-mailzeile.is-active { background: var(--color-primary-light); }
.hd-mailzeile.is-schwach { opacity: 0.6; }
.hd-mailzeile__betreff { font-size: var(--text-sm); font-weight: var(--font-semibold); }
.hd-mailzeile__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm); font-size: var(--text-xs); color: var(--color-secondary); }
.hd-mailzeile__datum { margin-left: auto; }
/* Alle Teile der Zeile gleich hoch, Symbole als Block — sonst sitzen sie auf
   der Grundlinie des Textes und die Zeile wirkt verrutscht. */
.hd-mailzeile__meta > * { line-height: 20px; }
.hd-mailzeile__meta svg { display: block; flex: none; }
.hd-mailrahmen + .hd-mailrahmen { margin-top: var(--space-sm); }

/* Die automatische Projekt-Zuordnung — unsicher heißt gedämpft und gestrichelt. */
.hd-projektmarke { border: 1px solid var(--color-border); border-radius: var(--radius-full); padding: 1px var(--space-sm); color: var(--color-title); }
.hd-projektmarke.is-unsicher { border-style: dashed; opacity: 0.65; }

.hd-detailkopf { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-md); padding-bottom: var(--space-md); border-bottom: 1px solid var(--color-border); }
.hd-detailtitel { font-size: var(--text-sm); font-weight: var(--font-bold); color: var(--color-title); }

.hd-anhaenge { display: flex; flex-direction: column; gap: var(--space-xs); padding-top: var(--space-md); border-top: 1px solid var(--color-border-subtle); }
.hd-anhang em { color: var(--color-secondary); }

/* ── Protokoliver ────────────────────────────────────────────────────────────── */

/* Die Anwesenden wie im Hub: eine Überschrift, darunter je Person ein Feld
   über die ganze Breite — Personenzeichen, Name mit Rolle, rechts der Haken. */
.hd-anwesende__titel { display: block; margin-top: var(--space-xl); font-size: var(--text-lg); font-weight: var(--font-bold); letter-spacing: normal; text-transform: none; color: var(--color-title); }
.hd-anwesende { display: flex; flex-direction: column; gap: var(--space-sm); margin-top: 0; }
.hd-anwesend {
  display: flex; align-items: center; gap: var(--space-md);
  padding: var(--space-md) var(--space-lg);
  border: 1px solid var(--color-border); border-radius: var(--radius-lg);
  background: var(--color-card);
  font-size: var(--text-sm); color: var(--color-secondary);
}
.hd-anwesend__ico { flex: none; display: inline-flex; color: var(--color-secondary); }
.hd-anwesend__text { flex: 1; min-width: 0; }
.hd-anwesend strong { display: block; color: var(--color-body); font-weight: var(--font-semibold); }
.hd-anwesend input { flex: none; margin: 0; accent-color: var(--color-primary); }

/* Die Felder stehen ohne Trennlinien untereinander — der Rahmen um jeden Text
   grenzt sie schon ab. */
.hd-feld { padding: var(--space-md) 0; }
.hd-feld__label { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm); margin-bottom: var(--space-sm); font-size: var(--text-xs); font-weight: var(--font-bold); text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-secondary); }
.hd-feld p { margin: 0 0 var(--space-sm); font-size: var(--text-sm); line-height: var(--leading-relaxed); }

.hd-status--offen { background: var(--color-warning-bg); color: var(--color-warning-fg); }
.hd-status--in-Arbeit { background: var(--color-info-bg); color: var(--color-info-fg); }
.hd-status--erledigt { background: var(--color-success-bg); color: var(--color-success-fg); }

/* ── Gefahrgudrun ────────────────────────────────────────────────────────────── */

.hd-dropzone { display: flex; flex-direction: column; gap: var(--space-xs); align-items: center; padding: var(--space-2xl); border: 2px dashed var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface-subtle); text-align: center; }
.hd-dropzone strong { font-size: var(--text-md); color: var(--color-title); }
.hd-dropzone span { font-size: var(--text-sm); color: var(--color-secondary); }

.hd-uploadleiste { display: flex; gap: var(--space-md); margin-top: var(--space-lg); }
.hd-uploadleiste__stufe { flex: 1; display: flex; flex-direction: column; gap: 2px; padding: var(--space-md); border: 1px solid var(--color-border); border-radius: var(--radius); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-secondary); }
.hd-uploadleiste__stufe strong { font-size: var(--text-lg); color: var(--color-title); }
.hd-uploadleiste__stufe.is-fertig { border-color: var(--color-success-border); background: var(--color-success-bg); }

.hd-uploads { display: flex; flex-direction: column; margin-top: var(--space-lg); }
.hd-upload { display: flex; justify-content: space-between; gap: var(--space-lg); padding: var(--space-sm) var(--space-md); border-bottom: 1px solid var(--color-border-subtle); font-size: var(--text-sm); }
.hd-upload__ergebnis { flex: none; font-size: var(--text-xs); font-weight: var(--font-semibold); color: var(--color-success-fg); }
.hd-upload__ergebnis em { display: block; font-weight: var(--font-normal); font-style: normal; color: var(--color-secondary); }
.hd-upload--unvollstaendig .hd-upload__ergebnis { color: var(--color-warning-fg); }
.hd-upload--fehler { background: var(--color-danger-bg); }
.hd-upload--fehler .hd-upload__ergebnis { color: var(--color-danger-fg); }

.hd-piktos, .hd-hsaetze { display: flex; flex-wrap: wrap; gap: 2px; }
.hd-pikto, .hd-hsatz { font-size: 10px; font-weight: var(--font-semibold); border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: 1px 4px; color: var(--color-secondary); }
.hd-hsatz-lang { display: block; font-size: var(--text-xs); }

.hd-conf { font-weight: var(--font-bold); font-variant-numeric: tabular-nums; }
.hd-conf--gruen { color: var(--color-success-fg); }
.hd-conf--gelb { color: var(--color-warning-fg); }
.hd-conf--rot { color: var(--color-danger-fg); }
.hd-dupl { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: 50%; background: var(--color-warning-bg); color: var(--color-warning-fg); font-size: 10px; font-weight: var(--font-bold); }
.hd-check { text-align: center; color: var(--color-secondary); }

.hd-detailpanel { display: flex; flex-direction: column; gap: var(--space-md); }
.hd-stofffeld { display: flex; flex-direction: column; gap: 2px; padding-bottom: var(--space-sm); border-bottom: 1px solid var(--color-border-subtle); }
.hd-stofffeld__label { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm); font-size: var(--text-xs); font-weight: var(--font-bold); text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-secondary); }
.hd-stofffeld__wert { font-size: var(--text-sm); }
/* Zu jedem Wert steht, wie sicher er gelesen wurde — nicht nur zur Zeile. */
.hd-ampel { flex: none; width: 8px; height: 8px; border-radius: 50%; }
.hd-ampel--gruen { background: var(--color-success); }
.hd-ampel--gelb { background: var(--color-warning); }
.hd-ampel--rot { background: var(--color-danger); }

/* ── Elvira ──────────────────────────────────────────────────────────────────── */

.hd-ampelbalken { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-md); margin-top: var(--space-lg); }
.hd-ampelbalken__wert { font-size: var(--text-lg); font-weight: var(--font-bold); color: var(--color-title); font-variant-numeric: tabular-nums; }
.hd-ampelbalken__spur { display: flex; gap: 3px; }
.hd-ampelbalken__spur i { display: block; width: 22px; height: 10px; border-radius: 2px; background: var(--color-border); }
.hd-ampelbalken__spur i.is-voll { background: var(--color-primary); }
.hd-ampelbalken__text { font-size: var(--text-sm); color: var(--color-secondary); }

/* Die Ablagefläche mit dem Knopf darin — Elvira legt den Plan im Termin ab,
   statt ihn fertig vorzufinden. Liegt die Datei, tritt der Rahmen zurück. */
.hd-dropzone--knopf { gap: var(--space-md); min-height: 168px; justify-content: center; }
.hd-dropzone__einladung { display: flex; flex-direction: column; align-items: center; gap: var(--space-xs); }
.hd-dropzone--knopf .hd-btn {
  align-self: center; margin-top: var(--space-md);
  border: none; font: inherit; font-size: var(--text-sm); font-weight: var(--font-bold); cursor: pointer;
}
.hd-dropzone.is-belegt { border-style: solid; border-color: var(--color-primary); }

/* Die Datei fällt in dieselbe Fläche, auf die eben geklickt wurde: Pfeil,
   Name, Balken stehen in der Ablage, nicht darunter. */
.hd-dropzone__lauf { display: flex; align-items: center; gap: var(--space-lg); width: 100%; max-width: 420px; text-align: left; }
.hd-dropzone__pfeil {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 52px; height: 52px; border-radius: 50%;
  background: var(--color-primary-light); color: var(--color-primary);
  animation: hd-plan-pfeil 1.6s ease-in-out infinite;
}
@keyframes hd-plan-pfeil {
  0%, 100% { transform: translateY(2px); }
  50% { transform: translateY(-4px); }
}
.hd-dropzone__datei { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; }
.hd-dropzone__name { font-size: var(--text-sm); font-weight: var(--font-semibold); color: var(--color-title); }
.hd-dropzone__meta { font-size: var(--text-xs); color: var(--color-secondary); }
.hd-dropzone__spur { height: 6px; border-radius: var(--radius-full); background: var(--color-border); overflow: hidden; }
.hd-dropzone__spur i { display: block; width: 0; height: 100%; border-radius: var(--radius-full); background: var(--color-primary); }
.hd-dropzone__spur i.is-voll { width: 100%; transition: width 1.4s ease-out; }

/* Die zwei Zähler, die während des Abgleichs mitlaufen. Sie sind die
   Botschaft der Station: Der große Teil erledigt sich, der kleine will
   gesehen werden. */
.hd-zaehler { display: flex; flex-wrap: wrap; gap: var(--space-lg); margin-top: var(--space-lg); }
.hd-zaehler__feld {
  flex: 1 1 200px; display: flex; flex-direction: column; gap: var(--space-xs);
  padding: var(--space-lg); border-radius: var(--radius-lg);
  background: var(--color-primary-light);
}
.hd-zaehler__feld--pruefen { background: var(--color-warning-bg); }
.hd-zaehler__zahl {
  font-size: var(--text-3xl); font-weight: var(--font-bold);
  font-variant-numeric: tabular-nums; line-height: 1; color: var(--color-primary);
}
.hd-zaehler__feld--pruefen .hd-zaehler__zahl { color: var(--color-warning-fg); }
.hd-zaehler__label { font-size: var(--text-sm); color: var(--color-secondary); }

/* Die erzeugte Datei, wie ein Download im Browser: Zeichen, Name, Balken. */
.hd-download {
  display: flex; align-items: center; gap: var(--space-md);
  margin-top: var(--space-md); padding: var(--space-md) var(--space-lg);
  border: 1px solid var(--color-border); border-radius: var(--radius);
  background: var(--color-surface-subtle);
}
.hd-download__ico {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: var(--radius);
  background: var(--color-primary-light); color: var(--color-primary);
}
.hd-download__text { display: flex; flex-direction: column; gap: 2px; }
.hd-download__text strong { font-size: var(--text-sm); color: var(--color-title); }
.hd-download__text span { font-size: var(--text-xs); color: var(--color-secondary); }
.hd-download__spur { flex: 1; height: 6px; border-radius: var(--radius-full); background: var(--color-border); overflow: hidden; }
.hd-download__spur i { display: block; width: 0; height: 100%; border-radius: var(--radius-full); background: var(--color-primary); }
.hd-download__spur i.is-voll { width: 100%; transition: width 1.2s ease-out; }
.hd-download.is-fertig .hd-download__spur i { background: var(--color-success); }

/* Über dem Entwurf: die Ergänzungen links, der Export rechts außen. */
.hd-exporte--kopf { margin-top: 0; }
.hd-exporte--kopf .hd-aktion.is-primaer { margin-left: auto; }

/* Die Seitenleiste unter einer Liste: Seite 1 steht, die folgenden zeigen die
   Größe des Laufs und sind erkennbar nicht angelegt. */
.hd-seiten {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-md);
  margin-top: var(--space-lg); padding-top: var(--space-md);
  border-top: 1px solid var(--color-border-subtle);
  font-size: var(--text-xs); color: var(--color-secondary);
}
.hd-seiten__stand { font-variant-numeric: tabular-nums; }
.hd-seiten__blaetter { display: inline-flex; gap: var(--space-xs); }
.hd-seiten__blatt {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 26px; height: 26px; padding: 0 var(--space-xs);
  border: 1px solid var(--color-border); border-radius: var(--radius);
  color: var(--color-placeholder); font-variant-numeric: tabular-nums; cursor: not-allowed;
}
.hd-seiten__blatt.is-aktiv { border-color: var(--color-primary); background: var(--color-primary); color: #fff; cursor: default; }
.hd-seiten__blatt.is-leer { border: none; cursor: default; }

.hd-lvzeile { display: flex; flex-direction: column; gap: 2px; padding: var(--space-md); border-radius: var(--radius); text-decoration: none; color: inherit; }
.hd-lvzeile:hover { background: var(--color-surface-hover); }
.hd-lvzeile.is-active { background: var(--color-primary-light); }
/* Nur eine Zeile lässt sich öffnen — sie zeigt das auch. */
.hd-lvzeile.is-offenbar { border: 1px solid var(--color-border); }
.hd-lvzeile.is-offenbar:hover { border-color: var(--color-accent); }
/* Im Abgleich ist jede Zeile eine eigene Karte mit Rahmen. */
[data-abgleich] .hd-tafel { display: flex; flex-direction: column; gap: var(--space-sm); }
[data-abgleich] .hd-lvzeile { border: 1px solid var(--color-border); }
[data-abgleich] .hd-lvzeile.is-bestaetigt { border-color: transparent; }
[data-abgleich] .hd-seiten { border-top: none; padding-top: 0; }
.hd-lvzeile.is-bestaetigt { background: var(--color-success-bg); }

/* Modellname und Bezeichnung im Leistungsbuch stehen untereinander: Im
   Fenster ist die Spalte schmal, nebeneinander brachen beide Namen um. */
.hd-gegenueber { display: flex; flex-direction: column; gap: var(--space-lg); margin-bottom: var(--space-lg); }
.hd-gegenueber__seite { display: flex; flex-direction: column; gap: var(--space-xs); min-width: 0; }
.hd-gegenueber__seite strong { font-size: var(--text-sm); color: var(--color-title); }
.hd-gegenueber__meta { font-size: var(--text-xs); color: var(--color-secondary); }
.hd-lvzeile__kopf { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm); }
.hd-lvzeile__pos { font-size: var(--text-xs); font-weight: var(--font-bold); color: var(--color-secondary); }
.hd-lvzeile__menge { margin-left: auto; font-size: var(--text-xs); color: var(--color-secondary); font-variant-numeric: tabular-nums; }
.hd-lvzeile__bauteil { font-size: var(--text-sm); font-weight: var(--font-semibold); }
.hd-lvzeile__meta { font-size: var(--text-xs); color: var(--color-secondary); }

.hd-lvstatus--auto { background: var(--color-success-bg); color: var(--color-success-fg); }
.hd-lvstatus--review { background: var(--color-warning-bg); color: var(--color-warning-fg); }
.hd-lvstatus--frei { background: var(--color-info-bg); color: var(--color-info-fg); }
.hd-lvstatus--ignoriert { background: var(--color-surface-hover); color: var(--color-secondary); }
.hd-lvstatus--z { background: color-mix(in srgb, var(--color-accent) 14%, white); color: var(--color-accent); }

.hd-kandidat { display: flex; flex-direction: column; gap: 2px; padding: var(--space-md); margin-bottom: var(--space-sm); border: 1px solid var(--color-border); border-radius: var(--radius); }
.hd-kandidat.is-empfohlen { border-color: var(--color-accent); }
.hd-kandidat__pos { display: flex; align-items: center; gap: var(--space-sm); font-size: var(--text-sm); font-weight: var(--font-bold); color: var(--color-title); }
.hd-kandidat__text { font-size: var(--text-sm); }
.hd-kandidat__grund { font-size: var(--text-xs); color: var(--color-secondary); }

/* ── Abstände, die erst im Zusammenspiel auffallen ───────────────────────────── */

/* Nach einer Fußnote beginnt der nächste Block sonst auf halber Höhe der
   vorigen Zeile. */
.hd-ampelbalken + .hd-detail__block,
.hd-fussnote + .hd-detail__block { margin-top: var(--space-xl); }
.hd-uploads + .hd-normbezug { margin-top: var(--space-lg); }

/* Aktionen im Detailfenster bleiben so breit wie ihr Text. */
.hd-sp__body > .hd-aktion { align-self: flex-start; }

/* Das Info-Icon: Nutzungshinweise stehen dahinter, nie dauerhaft im Bild. */
.hd-info { display: inline-flex; color: var(--color-secondary); cursor: help; }

/* ── Suche: Beispielknopf, Phasenliste, Filter-Modal ─────────────────────────── */

.hd-composer__zeile { display: flex; align-items: flex-start; gap: var(--space-sm); }

/* Der Knopf, der eine vorbereitete Frage einsetzt — klein und unaufdringlich,
   damit im Termin die Box das Bild bestimmt, nicht die Hilfe dazu. */
.hd-composer__beispiel {
  flex: none;
  display: inline-flex; align-items: center; gap: var(--space-xs);
  padding: 2px var(--space-sm);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-full);
  background: none;
  color: var(--color-secondary);
  font: inherit;
  font-size: var(--text-xs);
  cursor: pointer;
}
.hd-composer__beispiel:hover { border-color: var(--color-accent); color: var(--color-accent); }
.hd-composer__beispiel:disabled { opacity: 0.4; cursor: default; }
/* Luft zwischen dem Knopf und dem Platzhalter darunter. */
.hd-composer__beispiel:not([hidden]) + .hd-composer__zeile { margin-top: var(--space-sm); }

/* Das Zeichen am Start-Knopf in einer Hülle, damit es seine Größe behält —
   die Lupe der Suchagenten oder das Zeichen des Agenten. */
.hd-composer__symbol { display: inline-flex; }
/* Links vom Start: das Zubehör des Agenten statt der erweiterten Suche. */
.hd-composer__zubehoer { display: inline-flex; align-items: center; gap: var(--space-md); }
/* Chatgar: Die Websuche steht rechts, direkt neben „Senden" — Mikrofon und
   Klammer bleiben links. */
.hd-composer__zubehoer:has(> .hd-cg__stand) { flex: 1; }
.hd-composer__zubehoer > .hd-cg__stand { margin-left: auto; }
.hd-composer__spinner { display: none; animation: hd-dreh 1s linear infinite; }
.hd-composer__start.is-laeuft { background: color-mix(in srgb, var(--color-primary) 55%, white); color: #fff; }
.hd-composer__start.is-laeuft .hd-composer__symbol { display: none; }
.hd-composer__start.is-laeuft .hd-composer__spinner { display: inline-block; }

@keyframes hd-dreh { to { transform: rotate(360deg); } }

/* `hidden` muss jede Layout-Regel schlagen: Eine Klasse mit `display: flex`
   gewinnt sonst gegen das Attribut, und der Block steht sichtbar da, obwohl er
   als versteckt markiert ist. Genau so war die Phasenliste vor dem Absenden zu
   sehen. */
[hidden] { display: none !important; }

/* Die Phasenliste während der Suche — Aufbau wie `SearchProgress`. */
.hd-fortschritt { display: flex; flex-direction: column; gap: var(--space-sm); padding: var(--space-md); }
.hd-fs { display: flex; align-items: center; gap: var(--space-sm); }
.hd-fs__ico { flex: none; display: inline-flex; width: 18px; height: 18px; color: var(--color-border); }
.hd-fs__laeuft, .hd-fs__fertig { display: none; }
.hd-fs.is-laeuft .hd-fs__ico { color: var(--color-primary); }
.hd-fs.is-laeuft .hd-fs__offen { display: none; }
.hd-fs.is-laeuft .hd-fs__laeuft { display: block; animation: hd-dreh 1s linear infinite; }
.hd-fs.is-fertig .hd-fs__ico { color: var(--color-primary); }
.hd-fs.is-fertig .hd-fs__offen { display: none; }
.hd-fs.is-fertig .hd-fs__fertig { display: block; }
.hd-fs__text { flex: 1; font-size: var(--text-sm); color: var(--color-secondary); }
.hd-fs.is-laeuft .hd-fs__text { color: var(--color-title); font-weight: var(--font-medium); }
.hd-fs.is-fertig .hd-fs__text { color: var(--color-title); }
.hd-fs__zeit { flex: none; font-size: var(--text-sm); color: var(--color-secondary); font-variant-numeric: tabular-nums; }
/* Ein Block zusammengehöriger Phasen — Normberts Prüfung. */
.hd-fs__block { margin-top: var(--space-sm); font-size: var(--text-xs); font-weight: var(--font-bold); text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-secondary); }
.hd-fs--im-block { padding-left: var(--space-lg); border-left: 2px solid var(--color-border-subtle); margin-left: var(--space-xs); }

/* ── Suche: das Modal der erweiterten Suche ──────────────────────────────────── */

.hd-modal {
  width: min(640px, calc(100vw - 2 * var(--space-xl)));
  max-height: 85vh;
  padding: 0;
  border: none;
  border-radius: var(--radius-lg);
  background: var(--color-card);
  color: var(--color-body);
  box-shadow: var(--shadow-lg);
}
.hd-modal::backdrop { background: rgba(0, 0, 0, 0.4); }
/* Beim Öffnen liegt der Fokus auf dem Fenster selbst, nicht auf
   dem Kreuz — sonst stand dort der blaue Fokusring des Browsers. */
.hd-modal:focus { outline: none; }
.hd-modal__kopf { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-md); padding: var(--space-xl) var(--space-xl) var(--space-lg); border-bottom: 1px solid var(--color-border); }
.hd-modal__titel { margin: 0; font-size: var(--text-xl); font-weight: var(--font-bold); color: var(--color-title); }
.hd-modal__sub { margin: var(--space-xs) 0 0; font-size: var(--text-sm); color: var(--color-secondary); }
.hd-modal__zu { flex: none; display: inline-flex; padding: var(--space-xs); border: none; border-radius: var(--radius); background: none; color: var(--color-secondary); cursor: pointer; }
.hd-modal__zu:hover { background: var(--color-surface-hover); }
.hd-modal__body { display: flex; flex-direction: column; gap: var(--space-lg); padding: var(--space-xl); overflow-y: auto; max-height: 55vh; }
.hd-modal__fuss { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); padding: var(--space-lg) var(--space-xl); border-top: 1px solid var(--color-border); }
.hd-modal__fuss .hd-aktion { cursor: pointer; font: inherit; font-size: var(--text-sm); font-weight: var(--font-semibold); }

.hd-mabschnitt { display: flex; flex-direction: column; gap: 2px; }
.hd-mabschnitt__titel { font-size: var(--text-sm); font-weight: var(--font-semibold); color: var(--color-title); }
.hd-mabschnitt__hinweis { font-size: var(--text-xs); color: var(--color-secondary); }

.hd-mf { display: flex; flex-direction: column; gap: var(--space-xs); }
.hd-mf__label { font-size: var(--text-sm); font-weight: var(--font-semibold); color: var(--color-title); }
.hd-mf__eingabe { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); padding: var(--space-md); border: 1px solid var(--color-border); border-radius: var(--radius); color: var(--color-placeholder); font-size: var(--text-sm); }

.hd-ml { display: flex; flex-direction: column; gap: var(--space-sm); }
.hd-ml__suche { display: flex; gap: var(--space-sm); }
.hd-ml__feld { flex: 1; display: flex; align-items: center; gap: var(--space-sm); padding: var(--space-sm) var(--space-md); border: 1px solid var(--color-border); border-radius: var(--radius); color: var(--color-placeholder); font-size: var(--text-sm); }
.hd-ml__filter { flex: none; display: inline-flex; align-items: center; padding: 0 var(--space-md); border: 1px solid var(--color-border); border-radius: var(--radius); color: var(--color-secondary); }
/* Der Filter zeigt nur noch die Normenwahl — die Liste darf den Platz nutzen. */
.hd-ml__liste { list-style: none; margin: 0; padding: var(--space-xs); max-height: 260px; overflow-y: auto; border: 1px solid var(--color-border); border-radius: var(--radius); }
.hd-ml__liste label { display: flex; align-items: center; gap: var(--space-sm); padding: var(--space-xs) var(--space-sm); border-radius: var(--radius-sm); font-size: var(--text-sm); color: var(--color-primary); cursor: pointer; }
.hd-ml__liste label:hover { background: var(--color-surface-hover); }
.hd-ml__liste input { accent-color: var(--color-primary); }
/* Die Sammelzeile über der Liste: Der Normalfall „alles durchsuchen" ist
   gesetzt, ohne dass jemand klicken muss. */
.hd-ml__alle { display: flex; align-items: center; gap: var(--space-sm); padding: var(--space-sm) 0 var(--space-md); font-size: var(--text-sm); font-weight: var(--font-semibold); color: var(--color-title); cursor: pointer; }

/* ── Normbert: Reiter, Zusammenfassung, Prüfergebnis, Quellen ────────────────── */

.hd-zurueck { align-self: flex-start; font-size: var(--text-sm); font-weight: var(--font-semibold); color: var(--color-primary); text-decoration: none; }
.hd-zurueck:hover { text-decoration: underline; }
/* Leuchtet „Zurück", bekommt es ringsum Luft; die negativen Ränder nehmen sie
   zurück, damit der Link an seinem Platz bleibt. */
.hd-zurueck.hd-naechster {
  padding: var(--space-xs) var(--space-md);
  margin: calc(-1 * var(--space-xs)) calc(-1 * var(--space-md));
  border-radius: var(--radius-full);
}
.hd-kopf--ergebnis h1 { font-size: var(--text-2xl); }

.hd-reiter { display: flex; gap: var(--space-xl); border-bottom: 1px solid var(--color-border); }
/* Unter einem Seitentitel etwas mehr Luft, bevor die Reiter beginnen. */
:is(.hd-kopf, .hd-pkopf) + .hd-reiter { margin-top: var(--space-lg); }
.hd-reiter__tab { display: inline-flex; align-items: center; gap: var(--space-xs); padding: 0 0 var(--space-sm); font-size: var(--text-sm); color: var(--color-secondary); text-decoration: none; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.hd-reiter__tab:hover { color: var(--color-title); }
/* Ein Reiter ist entweder ein Link (Normbert, Protokoliver — sie wechseln die
   Seite und kennzeichnen sich mit .is-aktiv) oder ein Knopf (Gutachtrude —
   dort schaltet das Skript im DOM um und führt den Zustand in aria-selected,
   wie es eine Reiterzeile ohnehin melden muss). Beide sehen gleich aus; ein
   zweites Reiter-Aussehen im selben Hub wäre der eigentliche Fehler. */
.hd-reiter__tab.is-aktiv,
.hd-reiter__tab[aria-selected="true"] { color: var(--color-primary); font-weight: var(--font-semibold); border-bottom-color: var(--color-primary); }
button.hd-reiter__tab { appearance: none; background: none; border: none; border-bottom: 2px solid transparent; cursor: pointer; font: inherit; font-size: var(--text-sm); }
button.hd-reiter__tab:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }

.hd-card__kopf { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-md); }
/* Zwischen dem Kopf der Vorschau und dem Dokument darunter etwas Luft. */
.hd-card__kopf + .hd-worddok { margin-top: var(--space-xl); }
.hd-antwort__titel { margin: 0; font-size: var(--text-xl); font-weight: var(--font-bold); color: var(--color-title); }
/* Das Prüfsiegel an der Antwort — der Kern der Erzählung „belegt statt geraten". */
.hd-siegel { display: inline-flex; align-items: center; gap: var(--space-xs); padding: 2px var(--space-md); border-radius: var(--radius-full); background: var(--color-success-bg); color: var(--color-success-fg); font-size: var(--text-sm); font-weight: var(--font-semibold); white-space: nowrap; text-decoration: none; }
/* Nicht jede Prüfung ist durchgegangen — das Siegel sagt es, bevor jemand den
   Reiter öffnet. */
.hd-siegel.is-vorbehalt { background: var(--color-warning-bg); color: var(--color-warning-fg); }
a.hd-siegel:hover { text-decoration: underline; }

.hd-block { padding-top: var(--space-lg); margin-top: var(--space-lg); border-top: 1px solid var(--color-border-subtle); }
.hd-card__kopf + .hd-block { border-top: none; margin-top: var(--space-md); padding-top: 0; }
/* Unter Foto und Plan im Befundfenster: ohne Linie, die Bilder trennen schon. */
.hd-block--ohne-linie { border-top: none; padding-top: 0; }
.hd-block__label { display: block; margin-bottom: var(--space-sm); font-size: var(--text-xs); font-weight: var(--font-bold); text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-secondary); }
.hd-block p { margin: 0; font-size: var(--text-sm); line-height: var(--leading-relaxed); }
/* Label und Herkunftspille auf einer Zeile. Muss nach `.hd-block__label`
   stehen: Beide sind einfache Klassen, bei gleicher Spezifität gewinnt die
   spätere — davor hätte `display: block` das Flex-Layout wieder aufgehoben. */
.hd-block__label--zeile { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); }
.hd-block__wort { display: inline-flex; align-items: center; gap: var(--space-xs); }
.hd-quelle { flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 4px var(--space-md) 4px 10px; border-radius: var(--radius-full); background: var(--color-surface-hover); color: var(--color-secondary); font-size: var(--text-sm); line-height: 20px; font-weight: var(--font-bold); text-transform: none; letter-spacing: 0; white-space: nowrap; }

.hd-liste-punkte { margin: 0; padding-left: var(--space-lg); font-size: var(--text-sm); line-height: var(--leading-relaxed); }
.hd-liste-punkte > li { margin-bottom: var(--space-xs); }
.hd-liste-punkte ul { margin: var(--space-xs) 0 0; padding-left: var(--space-lg); list-style: circle; color: var(--color-secondary); }

/* Aufklapper für Hintergrund und Quellen-Blöcke. */
.hd-aufklapp { padding: var(--space-lg) var(--space-xl); }
.hd-aufklapp summary { display: flex; align-items: center; gap: var(--space-sm); font-size: var(--text-md); font-weight: var(--font-semibold); color: var(--color-title); cursor: pointer; list-style: none; }
.hd-aufklapp summary::-webkit-details-marker { display: none; }
.hd-aufklapp summary::before { content: "›"; display: inline-block; color: var(--color-secondary); transition: transform var(--transition-fast); }
.hd-aufklapp[open] summary::before { transform: rotate(90deg); }
.hd-aufklapp summary em { font-style: normal; font-weight: var(--font-normal); color: var(--color-secondary); }
.hd-aufklapp p { margin: var(--space-md) 0 0; font-size: var(--text-sm); line-height: var(--leading-relaxed); color: var(--color-body); }

/* Weitere relevante Normen. */
.hd-wn { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-md); padding: var(--space-md) 0; border-bottom: 1px solid var(--color-border-subtle); }
.hd-wn:last-child { border-bottom: none; }
.hd-wn__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.hd-wn__nummer { font-size: var(--text-sm); font-weight: var(--font-bold); color: var(--color-title); }
.hd-wn__nummer em { font-style: normal; font-weight: var(--font-normal); color: var(--color-secondary); }
.hd-wn__titel { font-size: var(--text-sm); color: var(--color-secondary); }
.hd-wn__aktionen { display: flex; align-items: center; gap: var(--space-sm); }

/* Prüfergebnis. */
.hd-pruef__kopf { display: flex; align-items: flex-start; gap: var(--space-sm); padding: var(--space-md); margin-bottom: var(--space-sm); border-radius: var(--radius); background: var(--color-success-bg); color: var(--color-success-fg); }
.hd-pruef__kopf > svg { flex: none; margin-top: 2px; }
.hd-pruef__kopf strong { display: block; font-size: var(--text-md); }
.hd-pruef__kopf span span { font-size: var(--text-sm); }

/* Eine Prüfzeile. Wo ein Befund dahinterliegt, ist sie ein Aufklapper; die
   Zeile selbst bleibt in beiden Fällen gleich gebaut. */
.hd-pz { display: block; border-bottom: 1px solid var(--color-border-subtle); }
.hd-pz:last-child { border-bottom: none; }
/* Die leuchtende Zeile bekommt seitlich Luft — nach außen gezogen, damit Symbol
   und Zahl mit den Nachbarzeilen bündig bleiben. */
.hd-pz.hd-naechster { margin-inline: calc(-1 * var(--space-md)); }
.hd-pz.hd-naechster > .hd-pz__zeile { padding-inline: calc(var(--space-xs) + var(--space-md)); }
.hd-pz__zeile { display: flex; align-items: center; gap: var(--space-sm); padding: var(--space-md) var(--space-xs); list-style: none; }
.hd-pz__zeile::-webkit-details-marker { display: none; }
details.hd-pz > .hd-pz__zeile { cursor: pointer; }
details.hd-pz[open] > .hd-pz__zeile .hd-pz__pfeil { transform: rotate(90deg); }
.hd-pz__pfeil { flex: none; display: inline-block; width: 10px; text-align: center; color: var(--color-secondary); transition: transform var(--transition-fast); }
.hd-pz__ico { flex: none; display: inline-flex; color: var(--color-secondary); }
.hd-pz--bestanden .hd-pz__ico { color: var(--color-success); }
.hd-pz--hinweis .hd-pz__ico { color: var(--color-warning); }
.hd-pz__name { flex: 1; font-size: var(--text-sm); font-weight: var(--font-semibold); color: var(--color-title); }
.hd-pz__zahl { flex: none; width: 110px; text-align: left; font-size: var(--text-sm); color: var(--color-secondary); white-space: nowrap; }
/* Die zwei Blöcke des Prüfergebnisses: wie gesucht, wie kontrolliert wurde. */
.hd-pz__block { display: block; margin: var(--space-lg) 0 var(--space-xs); font-size: var(--text-xs); font-weight: var(--font-bold); text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-secondary); }
.hd-pz__block:first-of-type { margin-top: var(--space-md); }
/* Der aufgeklappte Befund: was durchsucht wurde und was aktueller wäre. */
.hd-befund { display: flex; flex-direction: column; gap: var(--space-xs); margin: 0 0 var(--space-lg); padding: var(--space-md) var(--space-lg); border: 1px solid var(--color-danger-border); border-left-width: 4px; border-radius: var(--radius-lg); background: var(--color-danger-bg); }
.hd-befund > div { display: flex; gap: var(--space-md); font-size: var(--text-sm); }
.hd-befund dt { flex: none; width: 130px; color: color-mix(in srgb, var(--color-danger) 70%, var(--color-secondary)); }
.hd-befund dd { margin: 0; color: var(--color-danger); }

/* Quellen. */
.hd-qgruppe { margin-top: var(--space-lg); }
.hd-qgruppe:first-of-type { margin-top: var(--space-md); }
.hd-qgruppe__norm { display: flex; align-items: center; gap: var(--space-sm); margin-bottom: var(--space-md); font-size: var(--text-sm); font-weight: var(--font-bold); color: var(--color-title); }
.hd-qz { display: flex; align-items: center; gap: var(--space-sm); padding: var(--space-sm) var(--space-md); border-radius: var(--radius); background: var(--color-success-bg); }
.hd-qz + .hd-qz { margin-top: var(--space-xs); }
.hd-qz__pfeil { flex: none; display: inline-flex; align-items: center; line-height: 1; color: var(--color-secondary); }
.hd-qz__haken { flex: none; display: block; color: var(--color-success); }
.hd-qz__text { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; column-gap: 0.3em; row-gap: var(--space-xs); font-size: var(--text-sm); color: var(--color-title); }
/* Die Marke ist höher als die Textzeile: ihr Übermaß nicht in die Zeilenhöhe
   rechnen, sonst sitzen Pfeil und Kreis nicht mittig zum Text. */
.hd-qz__text > :is(.hd-marke, .hd-quelle__alt) { margin-block: -4px; }
.hd-qz__auge { flex: none; color: var(--color-secondary); }
.hd-card__titel em { font-style: normal; font-weight: var(--font-normal); text-transform: none; letter-spacing: 0; }
/* Der Titel einer Karte, die ganze Abschnitte trägt. Klein und versalgesetzt
   stand er auf derselben Stufe wie „Fotos" darunter — und damit nicht mehr
   erkennbar als das, was alles darunter zusammenfasst. */
.hd-card__titel--gross {
  font-size: var(--text-lg); font-weight: var(--font-bold);
  text-transform: none; letter-spacing: 0; color: var(--color-title);
}

/* ── Archibald: Trefferkarten mit aufklappbaren Details ──────────────────────── */

.hd-abschnittstitel { font-size: var(--text-sm); font-weight: var(--font-semibold); color: var(--color-title); }

.hd-pk { display: flex; flex-direction: column; gap: var(--space-md); padding: var(--space-lg) var(--space-xl); }
.hd-pk.is-active { border-color: var(--color-primary); background: var(--color-primary-light); }
.hd-pk__kopf { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-md); }
.hd-pk__titel { display: flex; align-items: center; gap: var(--space-sm); min-width: 0; }
/* Die Zahl ist ein Suchsignal, kein Prozentwert — deshalb ohne Einheit. */
.hd-pk__score { font-size: var(--text-sm); color: var(--color-secondary); font-variant-numeric: tabular-nums; }
.hd-pk__name { font-size: var(--text-md); font-weight: var(--font-bold); color: var(--color-title); }
/* Die Hauptaktion der Karte: gefüllt in der Agentenfarbe. Umrandet ging sie
   im Termin neben den Eckdaten unter. */
.hd-pk__cta { display: inline-flex; align-items: center; gap: var(--space-sm); padding: var(--space-sm) var(--space-lg); border: 1px solid var(--color-primary); border-radius: var(--radius); font-size: var(--text-sm); font-weight: var(--font-semibold); color: #fff; background: var(--color-primary); text-decoration: none; white-space: nowrap; }
.hd-pk__cta:hover { background: var(--color-accent); border-color: var(--color-accent); }
.hd-pk__cta.is-zu { color: var(--color-secondary); background: none; border-color: var(--color-border); opacity: 0.5; }

/* Eckdaten als Label-Wert-Paare, zweispaltig ab mittlerer Breite. */
/* Zwei Spalten wie im Hub — bei drei zerfasert das Auge, weil die Werte
   unterschiedlich lang sind. */
.hd-pk__daten { display: grid; grid-template-columns: 1fr; gap: var(--space-xs) var(--space-3xl); margin: 0; }
@media (min-width: 900px) { .hd-pk__daten { grid-template-columns: 1fr 1fr; } }
.hd-pk__daten > div { display: flex; gap: var(--space-md); font-size: var(--text-sm); }
.hd-pk__daten dt { flex: none; width: 150px; color: var(--color-secondary); }
.hd-pk__daten dd { margin: 0; min-width: 0; }

.hd-pk__mehr summary { display: inline-flex; align-items: center; gap: var(--space-xs); font-size: var(--text-sm); font-weight: var(--font-semibold); color: var(--color-primary); cursor: pointer; list-style: none; }
.hd-pk__mehr summary::-webkit-details-marker { display: none; }
.hd-pk__mehr summary::after { content: "›"; display: inline-block; transition: transform var(--transition-fast); }
.hd-pk__mehr[open] summary::after { transform: rotate(90deg); }
.hd-pk__mehr .hd-block:first-of-type { margin-top: var(--space-md); }

/* Die aufgeklappten Treffer liegen im Aufklapper, nicht daneben. */
.hd-aufklapp .hd-pk { margin-top: var(--space-md); border: 1px solid var(--color-border); }

/* ── Suche: Zeitraum-Regler mit zwei Griffen ─────────────────────────────────── */

.hd-slider { display: flex; flex-direction: column; gap: var(--space-sm); }
.hd-slider__werte { display: flex; justify-content: space-between; font-size: var(--text-sm); color: var(--color-secondary); }
.hd-slider__werte strong { color: var(--color-title); font-variant-numeric: tabular-nums; }
/* Beide Regler liegen übereinander; nur die Griffe nehmen Klicks an, damit der
   untere nicht die Spur des oberen blockiert. */
.hd-slider__spur { position: relative; height: 24px; }
.hd-slider__spur::before { content: ""; position: absolute; top: 11px; left: 0; right: 0; height: 4px; border-radius: 2px; background: var(--color-border); }
.hd-slider__bereich { position: absolute; top: 11px; height: 4px; border-radius: 2px; background: var(--color-primary); }
.hd-slider__spur input { position: absolute; top: 0; left: 0; width: 100%; height: 24px; margin: 0; background: none; pointer-events: none; appearance: none; }
.hd-slider__spur input::-webkit-slider-thumb { pointer-events: auto; appearance: none; width: 18px; height: 18px; border: 2px solid var(--color-primary); border-radius: 50%; background: var(--color-card); cursor: grab; }
.hd-slider__spur input::-moz-range-thumb { pointer-events: auto; width: 18px; height: 18px; border: 2px solid var(--color-primary); border-radius: 50%; background: var(--color-card); cursor: grab; }
.hd-slider__skala { display: flex; justify-content: space-between; font-size: var(--text-xs); color: var(--color-secondary); }

/* ── Protokoliver: Projektansicht, Protokollliste, Protokollblatt ────────────── */

.hd-pkopf { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-md); }
.hd-pkopf h1 { margin: 0; font-size: var(--text-2xl); font-weight: var(--font-bold); color: var(--color-title); }
.hd-pkopf__aktionen { display: flex; gap: var(--space-sm); margin-left: auto; }
a.hd-aktion { text-decoration: none; cursor: pointer; }

/* Der Zeitstrahl: eine Linie, auf der die erreichten Punkte gefüllt sind. */
/* Der Einzug trägt Linie und Punkte; was über 16px hinausgeht, ist Luft zwischen Punkt und Titel. */
.hd-meilensteine { --hd-ms-einzug: 22px; list-style: none; margin: var(--space-md) 0 0; padding: 0 0 0 var(--hd-ms-einzug); position: relative; }
.hd-meilensteine::before { content: ""; position: absolute; top: 8px; bottom: 8px; left: 5px; width: 2px; background: var(--color-border); }
.hd-ms { display: flex; align-items: baseline; gap: var(--space-md); padding: var(--space-sm) 0; position: relative; font-size: var(--text-sm); }
/* Der Punkt sitzt auf der Mitte seiner Zeile, gleich welche Schrift sie trägt. */
.hd-ms__punkt { position: absolute; left: calc(-1 * var(--hd-ms-einzug) - 2px); top: 50%; transform: translateY(-50%); display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border: 2px solid var(--color-border); border-radius: 50%; background: var(--color-card); color: #fff; }
/* Erfüllt: gefüllt mit Häkchen. Verstrichen, aber nicht erfüllt: ein offener
   Ring in Warnfarbe — genau der Fall, den ein Projekt sehen muss. */
.hd-ms.is-erfuellt .hd-ms__punkt { border-color: var(--color-primary); background: var(--color-primary); }
.hd-ms.is-erreicht:not(.is-erfuellt):not(.is-heute) .hd-ms__punkt { border-color: var(--color-warning-fg); }
.hd-ms__name { flex: 1; color: var(--color-title); }
.hd-ms.is-erreicht .hd-ms__name { font-weight: var(--font-semibold); }
.hd-ms__datum { flex: none; color: var(--color-secondary); font-variant-numeric: tabular-nums; }
/* Heute: eine gestrichelte Linie quer durch den Strahl. Name und Datum liegen
   mit dem Hintergrund der Karte darüber, damit die Linie sie nicht durchkreuzt. */
.hd-ms.is-heute::before { content: ""; position: absolute; left: calc(-1 * var(--hd-ms-einzug) + 5px); right: 0; top: 50%; border-top: 2px dashed var(--color-primary); }
.hd-ms.is-heute .hd-ms__punkt { border-color: var(--color-primary); background: var(--color-primary); box-shadow: 0 0 0 3px var(--color-primary-light); }
/* Das Datum steht in derselben Spalte wie die anderen; dazwischen läuft die
   Linie durch, Name und Datum decken sie mit dem Kartengrund ab. */
.hd-ms.is-heute .hd-ms__name { flex: none; margin-right: auto; padding-right: var(--space-sm); }
.hd-ms.is-heute .hd-ms__datum { padding-left: var(--space-sm); }
.hd-ms.is-heute .hd-ms__name, .hd-ms.is-heute .hd-ms__datum { position: relative; background: var(--color-card); color: var(--color-primary); font-weight: var(--font-bold); }

.hd-listenkopf { display: flex; align-items: center; gap: var(--space-lg); font-size: var(--text-sm); color: var(--color-secondary); }
.hd-listenkopf strong { padding: var(--space-xs) var(--space-md); border: 1px solid var(--color-border); border-radius: var(--radius); color: var(--color-title); }
.hd-listenkopf .hd-fussnote { margin: 0; }

.hd-tabelle--protokolle .hd-tabelle__kopf,
.hd-tabelle--protokolle .hd-tabelle__zeile { grid-template-columns: 1fr 1fr 1fr 1.2fr; }
.hd-plink { color: var(--color-primary); font-weight: var(--font-semibold); }

/* Das Protokollblatt. */
.hd-pleiste { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-md); }

.hd-stempel { display: inline-flex; align-items: center; gap: var(--space-sm); margin-top: calc(-1 * var(--space-sm)); font-size: var(--text-xs); color: var(--color-secondary); }
.hd-stempel__marke.is-alt { background: var(--color-warning-bg); color: var(--color-warning-fg); }
.hd-stempel__marke.is-aktuell { background: var(--color-success-bg); color: var(--color-success-fg); }
.hd-stempel__marke.is-laeuft { background: var(--color-primary-light); color: var(--color-primary); }
/* Der Stand wird vor den Augen neu geschrieben: Die Zeile bleibt stehen und
   füllt sich, die Schreibmarke zeigt, wo der Text gerade entsteht. */
.hd-liste-punkte li.is-leer { min-height: 1.5em; }
/* Der Aufzählungspunkt kommt mit seinem Text: Solange ein Punkt leer wartet,
   steht er unsichtbar da und hält nur seinen Platz. */
.hd-liste-punkte li.is-leer:not(.is-schreibt)::marker { color: transparent; }
.hd-liste-punkte li.is-schreibt::after { content: "▍"; margin-left: 1px; color: var(--color-primary); animation: hd-schreibmarke 900ms steps(2, start) infinite; }
@keyframes hd-schreibmarke { 50% { opacity: 0; } }

.hd-abschnitt { margin: 0 0 var(--space-lg); padding-bottom: var(--space-sm); border-bottom: 1px solid var(--color-border); font-size: var(--text-lg); font-weight: var(--font-bold); color: var(--color-title); }
/* Über dem Kapiteltext (Gutachtrude) keine Linie: Das Textfeld darunter hat seinen eigenen Rahmen. */
[data-kapitel-nummer] > .hd-abschnitt { padding-bottom: 0; border-bottom: none; }
.hd-abschnitt--ohne-linie { padding-bottom: 0; border-bottom: none; }

.hd-pfelder { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--space-lg); margin-bottom: var(--space-lg); }
.hd-pfeld__label { display: flex; align-items: center; gap: var(--space-xs); margin-bottom: var(--space-xs); font-size: var(--text-sm); color: var(--color-title); }
.hd-pfeld__label svg { flex: none; color: var(--color-secondary); }
.hd-pfeld__label em, .hd-pflicht { font-style: normal; color: var(--color-danger); }
/* Die Werte sehen wie ein Feld aus, sind aber keines — getippt wird nicht. */
.hd-pfeld__wert { display: block; padding: var(--space-md) 0; font-size: var(--text-sm); color: var(--color-title); }
.hd-feld__wert { padding: var(--space-md) 0; }
.hd-pfeld__wert.is-eingabe, .hd-feld__wert.is-eingabe { padding: var(--space-md); border: 1px solid var(--color-border); border-radius: var(--radius); background: var(--color-card); cursor: text; }
.hd-pfeld__wert.is-eingabe:hover, .hd-feld__wert.is-eingabe:hover { border-color: var(--color-primary); }
.hd-feld__wert p { margin: 0 0 var(--space-sm); font-size: var(--text-sm); line-height: var(--leading-relaxed); }
.hd-feld__wert p:last-child { margin-bottom: 0; }
/* Das leere Blatt: dieselbe Fläche wie beim befüllten Protokoll, mit dem
   Hinweis darin statt einer Antwort. Getippt wird in der Demo nicht. */
.hd-pfeld__wert.is-leer { color: var(--color-placeholder); }
.hd-feld__wert.is-leer { min-height: 3.4em; font-size: var(--text-sm); color: var(--color-placeholder); }

.hd-status--abgeschlossen { background: var(--color-success-bg); color: var(--color-success-fg); }

/* ── Protokoliver: Erfassungswege und ihre Oberflächen ───────────────────────── */

.hd-mikro { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: var(--color-primary); color: #fff; }

.hd-telefon { display: flex; align-items: center; gap: var(--space-md); padding: var(--space-xl); border: 1px solid var(--color-border); border-radius: var(--radius); background: var(--color-surface-subtle); }
.hd-telefon__ico { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: var(--color-primary-light); color: var(--color-primary); }
.hd-telefon__nr { font-size: var(--text-lg); font-weight: var(--font-bold); color: var(--color-title); font-variant-numeric: tabular-nums; }

/* ── Protokoliver: das Menü und die Fenster der Erfassungswege ───────────────── */

.hd-dropdown { position: relative; display: inline-flex; }
.hd-dropdown .hd-aktion { border: none; font: inherit; font-size: var(--text-sm); font-weight: var(--font-semibold); }
.hd-dropdown .hd-aktion:not(.is-primaer) { border: 1px solid var(--color-border); }
.hd-menue {
  display: none;
  position: absolute; top: calc(100% + var(--space-xs)); right: 0; z-index: 20;
  min-width: 220px;
  padding: var(--space-sm);
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  text-align: left;
}
.hd-dropdown.is-offen .hd-menue { display: block; }
.hd-menue__gruppe { display: block; padding: var(--space-sm) var(--space-md) var(--space-xs); font-size: var(--text-xs); font-weight: var(--font-bold); text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-secondary); }
.hd-menue__gruppe:not(:first-child) { margin-top: var(--space-sm); border-top: 1px solid var(--color-border-subtle); padding-top: var(--space-md); }
.hd-menue--links { right: auto; left: 0; }
.hd-menue__eintrag { display: flex; align-items: center; gap: var(--space-sm); padding: var(--space-sm) var(--space-md); border-radius: var(--radius); font-size: var(--text-sm); color: var(--color-title); text-decoration: none; cursor: pointer; }
.hd-menue__eintrag svg { flex: none; color: var(--color-secondary); }
button.hd-menue__eintrag { width: 100%; border: none; background: none; font: inherit; font-size: var(--text-sm); text-align: left; }
.hd-menue__eintrag:hover { background: var(--color-surface-hover); }

/* Das Fenster einer Variante — im Hub ein Modal, hier eine Karte mit Kopf. */
.hd-kopfzeile { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--space-lg); }
.hd-kopfzeile .hd-btn { margin-top: 0; }
.hd-kopfzeile--mittig, .hd-kopfzeile--mittig .hd-btn { align-items: center; align-self: center; }

.hd-fenster { background: var(--color-card); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow); overflow: hidden; }
.hd-fenster__kopf { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-lg); padding: var(--space-xl) var(--space-xl) var(--space-lg); border-bottom: 1px solid var(--color-border); }
.hd-fenster__titel { margin: 0; font-size: var(--text-xl); font-weight: var(--font-bold); color: var(--color-title); }
.hd-fenster__sub { margin: var(--space-xs) 0 0; font-size: var(--text-sm); color: var(--color-secondary); }
.hd-fenster__body { display: flex; flex-direction: column; gap: var(--space-lg); padding: var(--space-xl); }

/* Die Wahl der Erfassungsart: eine Leiste mit Namen. Sie steht über dem
   Fenster, weil nach dem Knopf „+ Neues Protokoll" genau diese Frage kommt. */
.hd-wegwahl { display: flex; flex-wrap: wrap; gap: var(--space-xs); padding: var(--space-xs); border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-card); }
.hd-wegwahl__weg { display: inline-flex; align-items: center; gap: var(--space-xs); padding: var(--space-sm); border-radius: var(--radius); font-size: var(--text-sm); color: var(--color-secondary); text-decoration: none; white-space: nowrap; }
.hd-wegwahl__weg:hover { background: var(--color-surface-hover); color: var(--color-title); }
.hd-wegwahl__weg.is-aktiv { background: var(--color-primary-light); color: var(--color-primary); font-weight: var(--font-semibold); }

/* Die fünf Pegelbalken des Hubs. */
.hd-eq { display: inline-flex; align-items: center; gap: 3px; height: var(--eq, 28px); }
.hd-eq i { display: block; width: 4px; height: 35%; border-radius: 2px; background: var(--color-primary); animation: hd-eq 900ms ease-in-out infinite alternate; }
@keyframes hd-eq { to { height: 100%; } }


/* Das Chatfenster: Verlauf und Eingabe in einem Rahmen, wie in jedem
   Messenger. Ohne Höhenbegrenzung — im Termin wird der ganze Verlauf gezeigt,
   und ein abgeschnittener letzter Zug sieht nach einem Fehler aus. */
.hd-chat { display: flex; flex-direction: column; gap: var(--space-md); border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface-subtle); overflow: hidden; }
.hd-chat__verlauf { display: flex; flex-direction: column; gap: var(--space-lg); padding: var(--space-lg); }
.hd-chat__fuss { padding: var(--space-md) var(--space-lg); border-top: 1px solid var(--color-border); background: var(--color-card); }
.hd-chat__fuss .hd-chatzeile { padding: 0; border: 0; border-radius: 0; background: none; }
.hd-chat__fuss .hd-sprachzeile { padding: 0; border: 0; }

.hd-dz { position: relative; display: flex; flex-direction: column; gap: 2px; max-width: 78%; padding: var(--space-md); border-radius: var(--radius-lg); font-size: var(--text-sm); line-height: var(--leading-relaxed); }
.hd-dz--agent { align-self: flex-start; background: var(--color-primary-light); border-bottom-left-radius: var(--radius-sm); }
.hd-dz--mensch { align-self: flex-end; background: var(--color-card); border: 1px solid var(--color-border); border-bottom-right-radius: var(--radius-sm); }

/* Der Zipfel an der Blase. Die Blase des Menschen hat einen Rahmen — dort
   liegen zwei Dreiecke übereinander, das untere in der Randfarbe. */
.hd-dz--agent::after { content: ""; position: absolute; left: -7px; bottom: 6px; width: 0; height: 0; border: 7px solid transparent; border-right-color: var(--color-primary-light); border-left-width: 0; }
.hd-dz--mensch::before { content: ""; position: absolute; right: -8px; bottom: 5px; width: 0; height: 0; border: 8px solid transparent; border-left-color: var(--color-border); border-right-width: 0; }
.hd-dz--mensch::after { content: ""; position: absolute; right: -6px; bottom: 6px; width: 0; height: 0; border: 7px solid transparent; border-left-color: var(--color-card); border-right-width: 0; }

/* Wer spricht: Name über der Blase, daneben die Punkte, solange sie entsteht. */
.hd-dz__wer { display: flex; align-items: center; gap: var(--space-sm); margin-bottom: 2px; font-size: var(--text-xs); font-weight: var(--font-bold); color: var(--color-secondary); }
.hd-dz--agent .hd-dz__wer { color: var(--color-primary); }
.hd-dz__puls { display: none; align-items: center; gap: 3px; }
/* Nur beim Agenten: Die Aufnahme des Menschen zeigt schon die Wellenform. */
.hd-dz--agent.is-spricht .hd-dz__puls { display: inline-flex; }
.hd-dz__puls i { display: block; width: 4px; height: 4px; border-radius: 50%; background: currentColor; animation: hd-puls 1.1s ease-in-out infinite; }
.hd-dz__puls i:nth-child(2) { animation-delay: 160ms; }
.hd-dz__puls i:nth-child(3) { animation-delay: 320ms; }
@keyframes hd-puls {
  0%, 100% { opacity: 0.25; transform: translateY(1px); }
  50% { opacity: 1; transform: translateY(-2px); }
}

.hd-aufnahme { display: flex; flex-direction: column; align-items: center; gap: var(--space-md); padding: var(--space-xl) 0; }
.hd-aufnahme__zeit { font-size: 1.8rem; color: var(--color-title); font-variant-numeric: tabular-nums; }
.hd-aufnahme__knoepfe { display: flex; align-items: center; gap: var(--space-md); margin-top: var(--space-sm); }

/* ── Protokoliver: Sprachblasen, Datei-Auswertung, Aufgabenliste ─────────────── */

/* Gesprochene Antwort: dieselbe Blase wie beim Tippen, aber mit Spur. */
.hd-dz__spur { display: flex; align-items: center; gap: var(--space-sm); margin-bottom: var(--space-xs); opacity: 0.75; }
.hd-dz__welle { display: flex; align-items: center; gap: 2px; height: 16px; flex: 1; }
.hd-dz__welle i { display: block; width: 2px; border-radius: 1px; background: currentColor; }
.hd-dz__dauer { font-size: var(--text-xs); font-variant-numeric: tabular-nums; }
.hd-dz.is-sprache { border-left: 3px solid var(--color-primary); }

.hd-sprachzeile { display: flex; align-items: center; gap: var(--space-md); padding: var(--space-md); border: 1px solid var(--color-border); border-radius: var(--radius); }
.hd-sprachzeile__text { flex: 1; display: flex; flex-direction: column; }
.hd-sprachzeile__text strong { font-size: var(--text-sm); color: var(--color-title); }
.hd-sprachzeile__text span { font-size: var(--text-xs); color: var(--color-secondary); }

/* Die hochgeladene Datei sieht aus wie eine Datei. */
.hd-datei { display: flex; align-items: center; gap: var(--space-md); padding: var(--space-lg); border: 1px solid var(--color-border); border-radius: var(--radius); background: var(--color-surface-subtle); }
.hd-datei__ico { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: var(--radius); background: var(--color-primary-light); color: var(--color-primary); }
.hd-datei__text { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.hd-datei__name { font-size: var(--text-sm); font-weight: var(--font-semibold); color: var(--color-title); }
.hd-datei__meta { font-size: var(--text-xs); color: var(--color-secondary); }
.hd-datei__stand { flex: none; font-size: var(--text-sm); color: var(--color-secondary); }
.hd-datei__stand.is-fertig { color: var(--color-success-fg); font-weight: var(--font-semibold); }
.hd-fortschritt--flach { border: 1px solid var(--color-border); border-radius: var(--radius); }
/* Was die Auswertung ergeben hat — das Protokoll selbst liegt hinter dem
   Knopf, hier steht nur, dass es bereitsteht. */
.hd-fertig { display: flex; align-items: center; gap: var(--space-sm); padding: var(--space-md) var(--space-lg); border: 1px solid var(--color-success-border); border-radius: var(--radius); background: var(--color-success-bg); color: var(--color-success-fg); font-size: var(--text-sm); font-weight: var(--font-semibold); }

/* Solange gesprochen wird, steht die Wellenform allein — der Text kommt aus
   der Transkription hinterher. */
.hd-dz.is-spricht .hd-dz__welle i { animation: hd-welle 0.9s ease-in-out infinite; }
.hd-dz.is-spricht .hd-dz__text { min-height: 1em; }
@keyframes hd-welle {
  0%, 100% { transform: scaleY(0.35); }
  50% { transform: scaleY(1); }
}
.hd-ablagen { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--space-md); }
.hd-ablage { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-xs); padding: var(--space-lg); border: 1px dashed var(--color-border); border-radius: var(--radius); background: var(--color-surface-subtle); font: inherit; text-align: left; cursor: pointer; }
.hd-ablage:hover { border-color: var(--color-primary); background: var(--color-primary-light); }
.hd-ablage.is-gewaehlt { border-style: solid; border-color: var(--color-primary); background: var(--color-primary-light); }
.hd-ablage__ico { color: var(--color-primary); }
.hd-ablage__name { font-size: var(--text-sm); font-weight: var(--font-semibold); color: var(--color-title); }
.hd-ablage__was { font-size: var(--text-xs); color: var(--color-secondary); line-height: var(--leading-relaxed); }

.hd-lauf { display: flex; flex-direction: column; gap: var(--space-lg); }

/* Was Protokoliver aus dem Gespräch schon weiß — wächst Zeile um Zeile mit. */
.hd-wissen { display: flex; flex-direction: column; padding: var(--space-lg); border: 1px solid var(--color-border); border-radius: var(--radius); }
.hd-wissen__titel { font-size: var(--text-xs); font-weight: var(--font-bold); text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-secondary); margin-bottom: var(--space-sm); }
.hd-wissen__zeile { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-lg); padding: var(--space-sm) 0; border-bottom: 1px solid var(--color-border-subtle); font-size: var(--text-sm); color: var(--color-secondary); animation: hd-wissen-auf 400ms ease-out; }
.hd-wissen__zeile:last-child { border-bottom: none; }
.hd-wissen__zeile strong { color: var(--color-title); text-align: right; }
@keyframes hd-wissen-auf {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

.hd-telefon__text { flex: 1; display: flex; flex-direction: column; }
.hd-telefon__modus { font-size: var(--text-sm); color: var(--color-secondary); }

/* ── Protokoliver: die Aufgabenliste ─────────────────────────────────────────── */

/* Karten mit Abstand statt einem Block: Die Liste war eine graue Fläche, in
   der nichts mehr auseinanderging. */
.hd-aufgabenliste { display: flex; flex-direction: column; gap: var(--space-md); }
.hd-ag { display: flex; flex-direction: column; gap: var(--space-sm); padding: var(--space-lg); background: var(--color-card); border: 1px solid var(--color-border); border-radius: var(--radius-lg); border-left: 3px solid var(--color-border); }
.hd-ag--offen { border-left-color: var(--color-warning); }
.hd-ag--in-Arbeit { border-left-color: var(--color-info); }
.hd-ag--erledigt { border-left-color: var(--color-success); opacity: 0.65; }
.hd-ag__kopf { display: flex; align-items: baseline; gap: var(--space-md); }
.hd-ag__nr { flex: none; font-size: var(--text-xs); font-weight: var(--font-bold); color: var(--color-secondary); font-variant-numeric: tabular-nums; }
.hd-ag__titel { flex: 1; font-size: var(--text-md); font-weight: var(--font-semibold); color: var(--color-title); }
/* Die Frist steht rechts und färbt sich nach ihrem Fenster — im Termin die
   Antwort auf „was drängt". */
.hd-ag__frist { flex: none; padding: 2px var(--space-md); border-radius: var(--radius-full); font-size: var(--text-xs); font-weight: var(--font-semibold); font-variant-numeric: tabular-nums; background: var(--color-surface-hover); color: var(--color-secondary); white-space: nowrap; }
.hd-ag__frist--ueberfaellig { background: var(--color-danger-bg); color: var(--color-danger-fg); }
.hd-ag__frist--diese-woche { background: var(--color-warning-bg); color: var(--color-warning-fg); }
.hd-ag__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm); font-size: var(--text-sm); color: var(--color-secondary); }
.hd-ag__unter { margin: 0; padding-left: var(--space-lg); font-size: var(--text-sm); color: var(--color-secondary); }
.hd-ag__unter li { margin-top: var(--space-xs); }

/* Der Pfeil an einem Menü-Knopf sitzt auf der Grundlinie und nimmt die Farbe
   des Knopfs. Vorher stand dort das Zeichen „⌄", das tiefer hängt als die
   Schrift und wie ein Tippfehler aussah. */
.hd-chevron { display: inline-block; vertical-align: -2px; margin-left: 2px; opacity: 0.8; }

/* Ankreuzbares trägt die Farbe des Agenten — im Protokoll waren die Haken
   sonst im Blau des Browsers. */
.hd-body input[type="checkbox"],
.hd-body input[type="radio"],
.hd-body input[type="range"] { accent-color: var(--color-primary); }

/* ── Protokoliver: Aufgabenfilter als Trichter-Menü ──────────────────────────── */

.hd-filterzeile { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-lg); }
.hd-filterzeile .hd-fussnote { margin: 0; }

.hd-trichter { display: inline-flex; align-items: center; gap: var(--space-sm); padding: var(--space-sm) var(--space-lg); border: 1px solid var(--color-border); border-radius: var(--radius); background: var(--color-card); font: inherit; font-size: var(--text-sm); font-weight: var(--font-semibold); color: var(--color-secondary); cursor: pointer; }
.hd-trichter:hover { color: var(--color-title); }
/* Ein gesetzter Filter zeigt sich als Zahl — sonst fragt im Termin niemand,
   warum die Liste kürzer ist. */
.hd-trichter.is-aktiv { border-color: var(--color-primary); color: var(--color-primary); }
.hd-trichter__zahl { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: var(--radius-full); background: var(--color-primary); color: #fff; font-size: var(--text-xs); }

.hd-filtermenue {
  display: none;
  position: absolute; top: calc(100% + var(--space-xs)); left: 0; z-index: 20;
  min-width: 280px;
  padding: var(--space-md);
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  text-align: left;
}
.hd-dropdown.is-offen .hd-filtermenue { display: block; }
.hd-filtermenue__zeile { display: flex; align-items: center; gap: var(--space-sm); padding: var(--space-sm) var(--space-md); border-radius: var(--radius); font-size: var(--text-sm); cursor: pointer; }
.hd-filtermenue__zeile:hover { background: var(--color-surface-hover); }
.hd-filtermenue__zeile span:first-of-type { flex: 1; }
.hd-filtermenue__zahl { color: var(--color-secondary); font-size: var(--text-xs); font-variant-numeric: tabular-nums; }
.hd-filtermenue__fuss { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); margin-top: var(--space-md); padding-top: var(--space-md); border-top: 1px solid var(--color-border); }
.hd-filtermenue__fuss .hd-aktion { border: none; font: inherit; font-size: var(--text-sm); font-weight: var(--font-semibold); cursor: pointer; }

/* ── Protokoliver: Projekt-Einstellungen ─────────────────────────────────────── */

.hd-einst { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--space-lg); }
.hd-einst__block { padding: var(--space-lg) var(--space-xl); }
.hd-einst__werte { display: flex; flex-direction: column; gap: var(--space-sm); margin: 0; }
.hd-einst__werte > div { display: flex; flex-direction: column; gap: 2px; }
.hd-einst__werte dt { font-size: var(--text-xs); color: var(--color-secondary); }
.hd-einst__werte dd { margin: 0; font-size: var(--text-sm); color: var(--color-title); }

.hd-personen { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--space-md); margin-top: var(--space-md); }
.hd-person { display: flex; align-items: center; gap: var(--space-md); padding: var(--space-md); border: 1px solid var(--color-border); border-radius: var(--radius); }
.hd-person__avatar { flex: none; width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--color-primary-light); color: var(--color-primary); font-weight: var(--font-bold); }
.hd-person__text { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.hd-person__name { font-size: var(--text-sm); font-weight: var(--font-semibold); color: var(--color-title); }
.hd-person__rolle { font-size: var(--text-xs); color: var(--color-secondary); }
.hd-person__mail { font-size: var(--text-xs); color: var(--color-secondary); }
.hd-person__weg { flex: none; border: none; background: none; font: inherit; color: var(--color-secondary); cursor: pointer; }
.hd-person__weg:hover { color: var(--color-danger); }

/* ── Mailanie: Rücksprung ins Postfach an jeder Trefferzeile ─────────────────── */

.hd-mailrahmen { display: flex; align-items: center; gap: var(--space-md); }
.hd-mailrahmen .hd-mailzeile { flex: 1; min-width: 0; }
.hd-mailzeile__outlook { flex: none; font-size: var(--text-xs); font-weight: var(--font-semibold); color: var(--color-primary); white-space: nowrap; }
.hd-mailzeile:hover .hd-mailzeile__outlook { text-decoration: underline; }
.hd-mailzeile__kopf { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); }

/* ── Detailfenster rechts (SidePanel aus shared-ui) ──────────────────────────── */

/* Der abgedunkelte Hintergrund ist zugleich der Weg hinaus: ein Klick daneben
   schließt. Im Hub macht das ein Klick-Handler, hier ein Link über die
   ganze Fläche. */
.hd-sp__grund {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  background: rgba(15, 12, 10, 0.45);
  backdrop-filter: blur(2px);
  animation: hd-sp-grund var(--transition-base) ease;
}
@keyframes hd-sp-grund { from { opacity: 0; } }

.hd-sp {
  position: fixed;
  top: 0; right: 0;
  width: min(500px, 100vw);
  height: 100dvh;
  z-index: var(--z-modal);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--color-card);
  box-shadow: var(--shadow-lg);
  /* Fährt von rechts ein — dasselbe Verhalten wie im Hub, dort über einen
     Zustandswechsel, hier beim Aufbau der Seite. */
  animation: hd-sp-ein var(--transition-base) ease;
}
@keyframes hd-sp-ein { from { transform: translateX(100%); } }

/* Ab Desktop eine schwebende Karte mit Rand, wie die Seitennavigation. */
@media (min-width: 1025px) {
  .hd-sp {
    top: var(--space-xl);
    right: var(--space-xl);
    height: calc(100dvh - 2 * var(--space-xl));
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-xl);
  }
  @keyframes hd-sp-ein { from { transform: translateX(calc(100% + var(--space-xl))); } }
}

.hd-sp__kopf { flex: none; display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-md); padding: var(--space-xl) var(--space-2xl); border-bottom: 1px solid var(--color-border-subtle); }
.hd-sp__titel { display: flex; flex-direction: column; gap: var(--space-xs); min-width: 0; }
.hd-sp__titel h2 { margin: 0; font-size: var(--text-lg); font-weight: var(--font-semibold); color: var(--color-title); line-height: var(--leading-snug); }
.hd-sp__sub { font-size: var(--text-sm); color: var(--color-secondary); }
.hd-sp__zu { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: var(--radius-sm); color: var(--color-secondary); text-decoration: none; }
.hd-sp__zu:hover { background: var(--color-surface-hover); }
.hd-sp__body { flex: 1; min-height: 0; overflow-y: auto; scrollbar-gutter: stable; display: flex; flex-direction: column; gap: var(--space-lg); padding: var(--space-xl) var(--space-2xl); }
.hd-sp__fuss { flex: none; display: flex; align-items: center; gap: var(--space-sm); padding: var(--space-xl) var(--space-2xl); border-top: 1px solid var(--color-border-subtle); }
.hd-sp__fuss-rechts { margin-left: auto; }
/* Elvira: Der Fuß ohne Trennlinie, die Knöpfe an den Rändern — der erste links, der letzte rechts. */
.hd-body[data-agent="elvira"] .hd-sp__fuss { justify-content: space-between; border-top: none; }

/* ── Detailfenster: Dateizeilen und Fragen ───────────────────────────────────── */

/* Eine Datei sieht aus wie eine Datei: Symbol, Name, Ablageort, Pfeil nach
   außen. Vorher standen dort Marken, die nach Schlagwörtern aussahen. */
.hd-dateiliste { display: flex; flex-direction: column; gap: var(--space-xs); }
.hd-dateilink { display: block; text-decoration: none; color: inherit; }
.hd-dz-datei { display: flex; align-items: center; gap: var(--space-md); padding: var(--space-sm) var(--space-md); border: 1px solid var(--color-border); border-radius: var(--radius); background: var(--color-card); }
.hd-dateilink:hover .hd-dz-datei { border-color: var(--color-primary); }
.hd-dz-datei__ico { flex: none; color: var(--color-primary); }
.hd-dz-datei__text { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.hd-dz-datei__name { font-size: var(--text-sm); color: var(--color-title); }
.hd-dz-datei__meta { font-size: var(--text-xs); color: var(--color-secondary); }
.hd-dz-datei__marke { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%; background: var(--color-primary); color: #fff; font-size: 10px; }
.hd-dz-datei__auf { flex: none; color: var(--color-secondary); }

/* Werte-Tabelle in der Antwort: Label links, Wert rechts, Zeile für Zeile.
   Eigener Name, weil `.hd-tabelle` die Listenansichten aus Kacheln meint. */
.hd-werte { width: 100%; border-collapse: collapse; font-size: var(--text-sm); table-layout: fixed; }
.hd-werte tr { border-bottom: 1px solid var(--color-border-subtle); }
.hd-werte tr:last-child { border-bottom: none; }
.hd-werte th { width: 190px; padding: var(--space-sm) var(--space-md) var(--space-sm) 0; text-align: left; font-weight: var(--font-normal); color: var(--color-secondary); vertical-align: top; }
.hd-werte td { padding: var(--space-sm) 0; color: var(--color-title); }

/* Der Weg zur Antwort im Chat: drei Stationen nebeneinander mit Pfeil
   dazwischen — untereinander sah er aus wie eine Aufgabenliste. */
.hd-ss { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm); padding: var(--space-md); border: 1px solid var(--color-border); border-radius: var(--radius); }
.hd-ss__station { flex: none; gap: var(--space-xs); }
.hd-ss__station .hd-fs__text { flex: none; font-size: var(--text-xs); }
.hd-ss__station .hd-fs__ico { width: 16px; height: 16px; }
.hd-ss__pfeil { flex: none; color: var(--color-border); }

/* Die Eingabezeile am Fuß des Fensters. Getippt wird darin nichts: Die
   gewählte Frage steht kurz drin und geht dann raus — danach bleibt die Zeile
   stehen, sichtbar gesperrt. */
.hd-chatzeile { display: flex; align-items: center; gap: var(--space-md); width: 100%; padding: var(--space-md) var(--space-lg); border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-card); }
.hd-chatzeile__feld { flex: 1; min-width: 0; font-size: var(--text-sm); color: var(--color-title); }
.hd-chatzeile__feld.is-leer { color: var(--color-placeholder); }
.hd-chatzeile__senden { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: var(--radius); background: var(--color-surface-hover); color: var(--color-placeholder); }
.hd-chatzeile.is-bereit { border-color: var(--color-primary); }
.hd-chatzeile.is-bereit .hd-chatzeile__senden { background: var(--color-primary); color: #fff; }
.hd-chatzeile.is-gesperrt { background: var(--color-surface-hover); border-style: dashed; }
.hd-chatzeile.is-gesperrt .hd-chatzeile__feld { color: var(--color-placeholder); }

/* Die Quellen unter der Antwort sind zugeklappt — im Termin zählt zuerst die
   Aussage, der Beleg auf Zuruf. */
.hd-quellen { padding: var(--space-md) var(--space-lg); border: 1px solid var(--color-border); border-radius: var(--radius); }
.hd-quellen summary { font-size: var(--text-sm); }
.hd-quellen .hd-dateiliste { margin-top: var(--space-md); }

/* Die vorbereiteten Fragen im Fenster. */
.hd-fragen { display: flex; flex-direction: column; gap: var(--space-sm); }
.hd-fragechip { text-align: left; padding: var(--space-sm) var(--space-md); border: 1px solid var(--color-border); border-radius: var(--radius); background: var(--color-card); font: inherit; font-size: var(--text-sm); color: var(--color-body); cursor: pointer; }
.hd-fragechip:hover { border-color: var(--color-primary); }
.hd-fragechip.is-aktiv { border-color: var(--color-primary); background: var(--color-primary-light); }
.hd-antwortblock { display: flex; flex-direction: column; gap: var(--space-lg); }
.hd-antwortblock__text { display: flex; flex-direction: column; gap: var(--space-lg); }

/* ── Mailanie: Symbole und Belegstellen ──────────────────────────────────────── */

.hd-mi { flex: none; vertical-align: -2px; color: var(--color-secondary); }
.hd-mailzeile__von, .hd-mailzeile__datum, .hd-klammer, .hd-projektmarke { display: inline-flex; align-items: center; gap: 4px; }
/* In der Mailzeile ist jede Angabe unter dem Betreff eine Marke — Absender,
   Projekt, Anhänge, Datum —, im Stil der Marken im Verlauf: das Symbol im
   Kreis, das Wort daneben. Das Projekt trägt die Agentenfarbe. */
.hd-mailzeile__meta > :is(.hd-mailzeile__von, .hd-projektmarke, .hd-klammer, .hd-mailzeile__datum) {
  gap: 6px; padding: 3px 12px 3px 3px;
  border: none; border-radius: var(--radius-full);
  background: var(--color-surface-hover); color: var(--color-secondary);
  font-size: var(--text-sm); font-weight: var(--font-semibold); line-height: 20px; white-space: nowrap;
}
.hd-mailzeile__meta > * > .hd-mi {
  box-sizing: content-box; width: 12px; height: 12px; padding: 4px; border-radius: 50%;
  background: color-mix(in srgb, currentColor 22%, transparent); color: inherit;
}
.hd-mailzeile__meta > .hd-projektmarke { background: var(--color-primary-light); color: var(--color-primary); }
.hd-mailzeile__meta > .hd-projektmarke.is-unsicher { outline: 1px dashed currentColor; outline-offset: -1px; }

.hd-mailkopf { display: flex; flex-direction: column; gap: var(--space-xs); margin: 0; }
.hd-mailkopf > div { display: flex; gap: var(--space-md); font-size: var(--text-sm); }
.hd-mailkopf dt { flex: none; display: inline-flex; align-items: center; gap: 5px; width: 84px; color: var(--color-secondary); }
.hd-mailkopf dd { margin: 0; min-width: 0; color: var(--color-title); }

/* Die Belegstelle als Textmarker statt in der Agentenfarbe: Im Termin soll
   die Stelle auffallen, nicht das Farbschema — rosa hinterlegter Fließtext
   sah nach Dekoration aus und erklärte sich nicht. */
.hd-mailtext p { margin: 0 0 var(--space-md); font-size: var(--text-sm); line-height: var(--leading-relaxed); }
/* Die Belegstelle: blass in der Agentenfarbe hinterlegt, nur so lang wie der
   Satz, auf den es ankommt. Ein eingefärbter Absatz hebt nichts mehr hervor. */
.hd-marker { background: var(--color-primary-light); color: inherit; padding: 1px 2px; border-radius: 2px; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
/* Fett in der Antwort — sparsam gesetzt, deshalb ohne Farbe. */
.hd-antwort strong { font-weight: var(--font-bold); color: var(--color-title); }

/* Eine Quellenzeile: Belegnummer in eigener Spalte, damit Betreff und
   Absenderzeile bündig übereinanderstehen. */
.hd-mq { display: grid; grid-template-columns: auto 1fr auto; align-items: start; gap: var(--space-md); padding: var(--space-md); border-radius: var(--radius); text-decoration: none; color: inherit; }
.hd-mq + .hd-mq { margin-top: var(--space-sm); }
.hd-mq:hover { background: var(--color-surface-hover); }
.hd-mq .hd-belegnr { margin: 2px 0 0; }
.hd-mq__text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.hd-mq__betreff { font-size: var(--text-sm); font-weight: var(--font-semibold); color: var(--color-title); }
.hd-mq__meta { display: flex; flex-wrap: wrap; gap: var(--space-md); font-size: var(--text-xs); color: var(--color-secondary); }
.hd-mq__meta > span { display: inline-flex; align-items: center; gap: 4px; }
.hd-mq > .hd-mi { margin-top: 3px; }
.hd-anhang { display: inline-flex; align-items: center; gap: 5px; font-size: var(--text-xs); }

/* Ein Befund, keine Anmerkung: Die Prüfung ist nicht durchgegangen. */
.hd-pruef__kopf.is-vorbehalt { background: var(--color-warning-bg); color: var(--color-warning-fg); border-color: var(--color-warning-border); }
.hd-pz--nicht_bestanden .hd-pz__ico { color: var(--color-danger-fg); }
.hd-pz--nicht_bestanden .hd-pz__name { color: var(--color-danger-fg); font-weight: var(--font-semibold); }

/* Das Dokument im Fenster — der PDF-Viewer des Browsers, nicht ein Nachbau. */
.hd-sp--breit { width: min(860px, 100%); }
/* Der Blick in die Norm als großes Popup in der Mitte: Eine Seite PDF braucht
   Höhe und Breite, nicht eine Spalte am Rand. */
.hd-sp.hd-sp--mittig {
  inset: 0;
  margin: auto;
  width: min(1200px, calc(100vw - 2 * var(--space-xl)));
  height: calc(100dvh - 2 * var(--space-xl));
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-xl);
  animation: hd-sp-mittig var(--transition-base) ease;
}
@keyframes hd-sp-mittig { from { opacity: 0; transform: scale(0.97); } }
.hd-pdf { position: relative; flex: 1; display: flex; min-height: 60vh; width: 100%; border: 1px solid var(--color-border); border-radius: var(--radius); background: var(--color-surface-hover); overflow: hidden; }
.hd-pdf__blatt { flex: 1; width: 100%; border: none; }
.hd-pdf__laedt { position: absolute; inset: 0; z-index: 1; display: flex; align-items: center; justify-content: center; background: var(--color-surface-hover); font-size: var(--text-sm); color: var(--color-secondary); }

/* Die durchsuchten Abschnitte: grün, was trägt, grau der Rest. Im Termin die
   Antwort auf „habt ihr auch an … gedacht?" */
.hd-dsliste { display: flex; flex-direction: column; margin-top: var(--space-md); }
.hd-ds { display: flex; align-items: center; gap: var(--space-md); padding: var(--space-sm) 0; border-bottom: 1px solid var(--color-border-subtle); }
.hd-ds:last-child { border-bottom: none; }
.hd-ds__punkt { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--color-border); }
.hd-ds.is-tragend .hd-ds__punkt { background: var(--color-success); }
.hd-ds__text { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.hd-ds__stelle { font-size: var(--text-sm); color: var(--color-secondary); }
.hd-ds.is-tragend .hd-ds__stelle { color: var(--color-title); font-weight: var(--font-semibold); }
.hd-ds__norm { font-size: var(--text-xs); color: var(--color-secondary); }
.hd-ds__grund { flex: 0 0 40%; text-align: left; font-size: var(--text-xs); color: var(--color-secondary); }
.hd-ds.is-tragend .hd-ds__grund { color: var(--color-success-fg); font-weight: var(--font-semibold); }

/* Eine Fundstelle aus anderem Geltungsbereich steht als Umfeld da. */
.hd-qz__text.is-umfeld { color: var(--color-secondary); }
.hd-qz__haken.is-umfeld { color: var(--color-border); }

/* ── Normbert: Warnung und Normtext ──────────────────────────────────────────── */

/* Keine Nutzungshilfe, sondern eine Warnung: Sie steht sichtbar über der
   Antwort, weil sie deren Gültigkeit betrifft. */
.hd-warnung { display: flex; align-items: flex-start; gap: var(--space-md); margin-top: var(--space-lg); padding: var(--space-md) var(--space-lg); border: 1px solid var(--color-warning-border); border-radius: var(--radius); background: var(--color-warning-bg); color: var(--color-warning-fg); font-size: var(--text-sm); line-height: var(--leading-relaxed); }
.hd-warnung svg { flex: none; margin-top: 2px; }

/* Der Blick in die Norm: der Wortlaut, abgesetzt wie ein Zitat. */
.hd-normtext { border-left: 3px solid var(--color-primary-light); padding-left: var(--space-lg); }
.hd-normtext p { margin: 0 0 var(--space-md); font-size: var(--text-sm); line-height: var(--leading-relaxed); color: var(--color-body); }
.hd-normtext p:last-child { margin-bottom: 0; }
.hd-normtext__fuss { font-size: var(--text-xs); color: var(--color-secondary); }

/* Das Auge in der Quellenzeile ist ein Weg, kein Symbol. */
a.hd-qz__auge { display: inline-flex; align-items: center; padding: 2px; border-radius: var(--radius-sm); color: var(--color-secondary); }
a.hd-qz__auge:hover { color: var(--color-primary); background: var(--color-surface-hover); }

/* ── Die Führung durch den Termin ────────────────────────────────────────────── */

/* Der nächste Klick leuchtet. Ein klarer Ring in der Agentenfarbe, der aufgeht
   und wieder schmal wird — ohne Weichzeichner, damit er auf jedem Untergrund
   und über den Beamer sichtbar bleibt, und ohne Farbe oder Größe des Knopfes
   zu verändern, damit beim Wechsel nichts springt. */
.hd-naechster {
  --hd-ring: var(--color-primary);
  z-index: 1;
  border-radius: var(--radius);
  animation: hd-leuchten 2.4s ease-in-out infinite;
}
@keyframes hd-leuchten {
  0%, 100% { box-shadow: 0 0 0 2px color-mix(in srgb, var(--hd-ring) 35%, transparent); }
  50% { box-shadow: 0 0 0 7px color-mix(in srgb, var(--hd-ring) 30%, transparent); }
}
/* Angehoben, damit der Schein über den Nachbarn liegt — ohne Gewicht, damit
   ein Knopf, der schon positioniert ist, bleibt, wo er ist: Der Stift sitzt
   absolut im Bild und fiel mit `position: relative` unter das Bild, bis er
   geklickt war. */
:where(.hd-naechster) { position: relative; }
/* Der Schein nimmt die Farbe des Knopfs: Um den Abschluss in der Akzentfarbe
   zeigte einer in der Agentenfarbe auf zwei Dinge zugleich. */
.hd-naechster.is-akzent { --hd-ring: var(--color-accent); }
/* Ein Siegel mit Vorbehalt (gelb) leuchtet gelb, ein bestätigtes grün — das
   Leuchten spricht dieselbe Sprache wie das Siegel. */
.hd-naechster.hd-siegel { --hd-ring: var(--color-success); }
/* Ein Reiter hat nur unten Luft (für den Strich) — leuchtet er, bekommt er
   ringsum gleich viel, damit der Schein mittig um Symbol und Wort liegt. Die
   negativen Ränder nehmen die Luft wieder zurück: Die Reiterzeile springt nicht. */
.hd-reiter__tab.hd-naechster {
  padding: var(--space-xs) var(--space-sm);
  margin: calc(-1 * var(--space-xs)) calc(-1 * var(--space-sm)) calc(var(--space-sm) - var(--space-xs) - 1px);
  border-bottom-color: transparent;
}
.hd-naechster.hd-siegel.is-vorbehalt { --hd-ring: var(--color-warning); }
/* Der Ring folgt der eigenen Rundung des Knopfs: Bildkachel und Einfüge-Knopf
   sind eckiger als der allgemeine Ring. */
.hd-bildwahl__kachel.hd-naechster { border-radius: var(--radius-sm); }
.hd-mdeinfuegen.hd-naechster { border-radius: 8px; }
/* Ein gesperrter Knopf leuchtet nicht: Er ist der nächste Schritt, aber noch
   nicht dran — „Normen suchen" wartet auf die Beschreibung, der Abschluss auf
   das letzte Feld. Das Leuchten kommt mit der Freigabe. */
.hd-naechster:disabled { animation: none; box-shadow: none; }
@media (prefers-reduced-motion: reduce) {
  .hd-naechster { animation: none; box-shadow: 0 0 0 4px color-mix(in srgb, var(--hd-ring) 40%, transparent); }
}

/* ── Gutachtrude: Unterlagen, Entwurf und Anlagen ────────────────────────────── */

/* Kapitel 2: eine Zeile je Dokument, darunter der Weg, eines zu ergänzen. */
.hd-dokliste { display: flex; flex-direction: column; }
.hd-dok {
  display: flex; align-items: center; gap: var(--space-md);
  padding: var(--space-sm) 0; border-bottom: 1px solid var(--color-border-subtle);
  font-size: var(--text-sm); color: var(--color-title);
}
.hd-dok:last-child { border-bottom: none; }
.hd-dok svg { flex: none; color: var(--color-secondary); }
.hd-dok.is-neu { animation: hd-wissen-auf 500ms ease-out; }

/* Der Weg, eine Zeile zu ergänzen: gestrichelt, weil dort noch nichts steht. */
.hd-zeileplus {
  display: inline-flex; align-items: center; gap: var(--space-xs);
  margin-top: var(--space-md); padding: var(--space-sm) var(--space-lg);
  border: 1px dashed var(--color-border); border-radius: var(--radius);
  background: none; color: var(--color-primary);
  font: inherit; font-size: var(--text-sm); font-weight: var(--font-semibold); cursor: pointer;
}
.hd-zeileplus:hover { border-color: var(--color-primary); background: var(--color-primary-light); }
.hd-zeileplus:disabled { color: var(--color-placeholder); cursor: default; }
.hd-zeileplus:disabled:hover { border-color: var(--color-border); background: none; }

/* Kapitel 8: die Beilagen als Dateien — Kennung, Titel, Umfang, ein Weg hinein.

   Eigene Namen, nicht `.hd-datei`/`.hd-dateiliste`: Die eine gehört der
   hochgeladenen Datei in Protokoliver, die andere den Trefferlisten in
   Archibald und Normbert. Gleiche Namen hätten dort mitgewirkt. */
.hd-beilagen { display: flex; flex-direction: column; gap: var(--space-sm); }
.hd-beilage {
  display: grid; grid-template-columns: auto minmax(90px, auto) 1fr auto auto;
  align-items: center; gap: var(--space-md);
  padding: var(--space-sm) var(--space-md);
  border: 1px solid var(--color-border); border-radius: var(--radius);
  background: var(--color-card); font-size: var(--text-sm);
}
@media (max-width: 800px) { .hd-beilage { grid-template-columns: auto 1fr auto; } }
.hd-beilage__typ {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 46px; padding: 2px var(--space-sm);
  border-radius: var(--radius-sm); background: var(--color-surface-subtle);
  font-size: var(--text-xs); font-weight: var(--font-bold); letter-spacing: 0.04em;
  color: var(--color-secondary);
}
.hd-beilage__kennung { font-weight: var(--font-bold); color: var(--color-title); }
.hd-beilage__name { color: var(--color-title); }
.hd-beilage__meta { font-size: var(--text-xs); color: var(--color-secondary); white-space: nowrap; }

/* Ein Textfeld, wie es im Werkzeug aussieht. Die Leiste sagt: Der Text steht
   nicht fest, er wird geändert und formatiert. Bedient wird sie nicht — in den
   Demos wird nicht getippt —, deshalb trägt sie keine Knopf-Optik, sondern
   bleibt zurückgenommen. */
.hd-mdfeld {
  margin-top: var(--space-md);
  border: 1px solid var(--color-border); border-radius: 12px;
  background: var(--color-card); overflow: hidden;
}
.hd-mdleiste {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px;
  padding: var(--space-sm) var(--space-md);
  border-bottom: 1px solid var(--color-border-subtle);
  background: var(--color-surface-subtle);
  color: var(--color-secondary);
}
/* Im Stil des Hubs: jedes Werkzeug ein kleines, weiß hinterlegtes Quadrat mit
   feinem Rand und Symbol. */
.hd-mdknopf {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; flex: none;
  border: 1px solid var(--color-border); border-radius: 8px;
  background: var(--color-card); color: var(--color-secondary);
  font-size: var(--text-xs); line-height: 1;
}
.hd-mdknopf strong { font-weight: var(--font-bold); }
.hd-mdknopf em { font-style: italic; font-family: Georgia, "Times New Roman", serif; }
.hd-mdknopf s { text-decoration-thickness: 1px; }

/* Die Knöpfe, die wirklich etwas tun: Bild und Norm kommen über die Leiste in
   den Text. Klein und randlos — sie gehören zur Leiste, nicht über sie. */
.hd-mdeinfuegen {
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  height: 30px; padding: 0 10px;
  border: 1px solid var(--color-border); border-radius: 8px;
  background: var(--color-card); color: var(--color-primary);
  font: inherit; font-size: var(--text-sm); font-weight: var(--font-semibold); cursor: pointer;
}
.hd-mdeinfuegen:hover { border-color: var(--color-primary); background: var(--color-primary-light); }
.hd-mdeinfuegen:disabled { cursor: default; }
.hd-mdeinfuegen:disabled:hover { border-color: var(--color-border); background: var(--color-card); }
/* In der Leiste stehen Bild und Norm grau wie die übrigen Werkzeuge; orange
   werden sie erst, wenn sie als nächster Schritt leuchten. */
.hd-mdleiste .hd-mdeinfuegen { color: var(--color-secondary); }
.hd-mdleiste .hd-mdeinfuegen.hd-naechster,
.hd-mdleiste .hd-mdeinfuegen:not(:disabled):hover { color: var(--color-primary); }

/* Was eingefügt wurde, steht im Text — mit Abstand, nicht am Absatz geklebt. */
.hd-mdtext > .hd-foto { margin-top: var(--space-lg); }
.hd-mdtrenner { width: 1px; height: 24px; margin: 0 var(--space-sm); background: var(--color-border); }
/* Die Mindesthöhe sagt, dass hier geschrieben werden kann: Ein Feld von einer
   Zeile sieht aus wie eine Anzeige, nicht wie eine Fläche. Positioniert, damit
   sich eine Überlagerung — der Spinner beim Ausformulieren — über den Text
   legt und nicht über die Leiste. */
.hd-mdtext { position: relative; min-height: 110px; padding: var(--space-lg); font-size: var(--text-sm); line-height: var(--leading-relaxed); }
/* Nachfahren, nicht nur Kinder: Der erzeugte Text liegt eine Ebene tiefer. */
.hd-mdtext p { margin: 0; }
.hd-mdtext p + p { margin-top: var(--space-md); }
/* Das leere Feld sagt, dass noch nichts dasteht — so blass wie ein
   Platzhalter, weil es einer ist. */
.hd-mdplatzhalter { color: var(--color-placeholder); font-style: italic; }

/* Der Haken, mit dem die Prüfung abschließt. Grün, weil er hier genau das
   sagt, was Grün sagen darf: Es stimmt. */
.hd-pruefhaken { display: inline-flex; color: var(--color-success); }

/* Wohin weitere Beilagen kämen. Gestrichelt und blass: Die Fläche zeigt den
   Weg, sie nimmt nichts an. */
.hd-ablagezone {
  display: flex; align-items: center; justify-content: center; gap: var(--space-sm);
  margin-top: var(--space-md); padding: var(--space-xl);
  border: 1px dashed var(--color-border); border-radius: var(--radius);
  background: var(--color-surface-subtle);
  font-size: var(--text-sm); color: var(--color-placeholder);
}

/* ── Gutachtrude: Auswählen, was in den Text kommt ───────────────────────────── */

/* Das Menü unter der Leiste: Bilder und Normen, die das Gutachten schon kennt. */
.hd-wahlmenue {
  margin: var(--space-md) 0;
  padding: var(--space-lg);
  border: 1px solid var(--color-border); border-radius: var(--radius);
  background: var(--color-surface-subtle);
}
.hd-wahlmenue__kopf {
  display: block; margin-bottom: var(--space-md);
  font-size: var(--text-xs); font-weight: var(--font-bold); text-transform: uppercase;
  letter-spacing: 0.05em; color: var(--color-secondary);
}

/* Die Bilder als Kacheln — erkannt wird ein Foto am Foto, nicht am Titel. */
.hd-bildwahl { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: var(--space-sm); }
.hd-bildwahl__kachel {
  display: flex; flex-direction: column; gap: 2px; padding: 3px;
  border: 1px solid var(--color-border); border-radius: var(--radius-sm);
  background: var(--color-card); cursor: pointer;
}
.hd-bildwahl__kachel:hover { border-color: var(--color-primary); }
.hd-bildwahl__kachel img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 2px; }
.hd-bildwahl__nr {
  display: inline-flex; align-items: center; justify-content: center; gap: 2px;
  font-size: var(--text-xs); font-weight: var(--font-semibold); color: var(--color-secondary);
}
/* Was der Abgleich vorschlägt, weil das Diktat es nennt. */
.hd-bildwahl__kachel.is-vorschlag { border-color: var(--color-primary); background: var(--color-primary-light); }
.hd-bildwahl__kachel.is-vorschlag .hd-bildwahl__nr { color: var(--color-primary); }
/* Die übrigen zeigen den Bestand, gewählt wird der Vorschlag. */
.hd-bildwahl__kachel:disabled { cursor: default; }
.hd-bildwahl__kachel:disabled:hover { border-color: var(--color-border); }

/* Eine Norm zur Wahl: Ausgabe, Fundstelle, hineinsehen, zitieren. */
.hd-normwahlzeile {
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: var(--space-md);
  padding: var(--space-sm) 0; border-bottom: 1px solid var(--color-border-subtle);
}
.hd-normwahlzeile:last-child { border-bottom: none; }
.hd-normwahlzeile__kopf { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.hd-normwahlzeile__kopf strong { display: inline-flex; align-items: center; gap: var(--space-xs); font-size: var(--text-sm); color: var(--color-title); }
.hd-normwahlzeile__kopf strong .hd-sparkle { color: var(--color-primary); }
/* Auch hier: der Bestand steht da, zitiert wird die passende Norm. Die übrigen
   Zeilen bleiben voll lesbar — sie sind Bestand, nicht ausgegraut. */
.hd-normwahlzeile__kopf span { font-size: var(--text-xs); color: var(--color-secondary); }
/* Ein Zitat im Fließtext — eingerückt, kursiv, mit der Fundstelle darunter.
   Kein farbiger Kasten: Der Wortlaut gehört in den Text, nicht daneben. */
.hd-zitat {
  margin: var(--space-lg) 0 var(--space-lg) var(--space-lg);
  padding-left: var(--space-lg);
  border-left: 2px solid var(--color-border);
}
.hd-zitat p { margin: 0; font-style: italic; color: var(--color-body); }
.hd-zitat cite { display: block; margin-top: var(--space-xs); font-size: var(--text-xs); font-style: normal; color: var(--color-secondary); }

/* Der Knopf rechts in der Leiste, der das Feld füllt — mit einem Entwurf oder
   einem Diktat. Er steht dort, wo sonst „Markdown" steht — am Rand, nicht über
   dem Feld: Geschrieben werden kann jederzeit, Entwurf und Diktat sind ein
   Angebot. */
.hd-mdaktion {
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  margin-left: auto; height: 36px; padding: 0 var(--space-md);
  border: 1px solid var(--color-border); border-radius: 12px;
  background: var(--color-card); color: var(--color-secondary);
  font: inherit; font-size: var(--text-sm); font-weight: var(--font-medium); cursor: pointer;
}
.hd-mdaktion:hover { border-color: var(--color-primary); color: var(--color-primary); background: var(--color-card); }
.hd-mdaktion .hd-sparkle { color: var(--color-primary); }
/* Während das Diktat läuft, sagt der Knopf das und tut sonst nichts. */
.hd-mdaktion:disabled { opacity: 0.55; cursor: default; }
.hd-mdaktion:disabled:hover { background: var(--color-card); }

/* Solange nichts dasteht: der Hinweis im Feld selbst, nicht davor. */
.hd-mdleer { margin: 0; color: var(--color-placeholder); }

/* Woran man in der Kapitelliste ist: erledigt oder offen — beide mittig in
   der dritten Spalte, damit Haken und „offen" untereinander stehen. */
.hd-kapstand { grid-column: 3; justify-self: center; }
.hd-kapstand--fertig {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--color-primary); color: #fff;
}
/* Offen: ein leerer Kreis in derselben Größe wie der Haken — er füllt sich,
   wenn das Kapitel durch ist. */
.hd-kapstand--offen {
  box-sizing: border-box; width: 20px; height: 20px; border-radius: 50%;
  border: 1.5px solid color-mix(in srgb, var(--color-secondary) 45%, white);
}

/* Unter der Liste, außerhalb der Karte: der Knopf, der das Gutachten erstellt.
   So breit wie die Liste, weil er zu allen Kapiteln gehört. */
.hd-kapitelspalte { display: flex; flex-direction: column; gap: var(--space-lg); }
.hd-erstellen { display: flex; flex-direction: column; gap: var(--space-md); }
.hd-erstellen__knopf { width: 100%; justify-content: center; padding: var(--space-md) var(--space-lg); }
/* Während des Laufs ist der Knopf beschäftigt, nicht gesperrt: heller statt
   grau, mit Dreher statt Symbol. */
button.hd-aktion.hd-erstellen__knopf.is-laeuft:disabled { background: color-mix(in srgb, var(--color-accent) 60%, white); border-color: transparent; color: #fff; }
.hd-erstellen__knopf .hd-spinner { display: none; border-color: rgba(255, 255, 255, 0.45); border-top-color: #fff; }
.hd-erstellen__knopf.is-laeuft > svg { display: none; }
.hd-erstellen__knopf.is-laeuft .hd-spinner { display: inline-block; }
/* In der schmalen Spalte steht das Ergebnis eines Schritts unter seinem Namen,
   nicht daneben — sonst ragte es in die Kapitelkarte hinein. */
.hd-erstellen .hd-fs { flex-wrap: wrap; row-gap: 0; }
.hd-erstellen .hd-fs__zeit { flex-basis: 100%; padding-left: calc(18px + var(--space-sm)); font-size: var(--text-xs); }

/* ── Gutachtrude: Die Vorschau — das Dokument im Textprogramm ──────────────────

   Ein PDF-Betrachter sagt „fertig". Das Fenster eines Textprogramms sagt, dass
   noch geschrieben werden kann — und genau das ist der Stand bei der Abgabe.
   Die Seiten im Rahmen sind die abgegebene Datei selbst, kein Nachbau. */

.hd-worddok {
  --hd-word: #2b579a;        /* das Blau, an dem Word erkannt wird */
  --hd-word-hell: #41a5ee;
  --hd-word-grau: #f3f2f1;
  --hd-wordzoom: 0.7;
  border: 1px solid var(--hd-word); border-radius: var(--radius);
  overflow: hidden; background: var(--color-card);
}
.hd-worddok__titel {
  display: flex; align-items: center; gap: var(--space-sm);
  padding: var(--space-sm) var(--space-lg);
  background: var(--hd-word); color: #fff; font-size: var(--text-sm);
}
.hd-worddok__titel strong { font-weight: var(--font-semibold); }
.hd-worddok__titel span { margin-left: auto; font-size: var(--text-xs); color: rgba(255, 255, 255, 0.78); }
.hd-worddok__marke { flex: none; margin-left: var(--space-md); }

/* Die Reiter eines Textprogramms — sie tragen nichts, sie sagen nur, wo man ist. */
.hd-worddok__reiter {
  display: flex; gap: var(--space-lg); padding: 0 var(--space-lg);
  border-bottom: 1px solid var(--color-border-subtle); background: var(--color-card);
}
.hd-worddok__reiter span { padding: var(--space-sm) 0; font-size: var(--text-xs); color: var(--color-secondary); border-bottom: 2px solid transparent; }
.hd-worddok__reiter span.is-aktiv { color: var(--hd-word); border-bottom-color: var(--hd-word); font-weight: var(--font-semibold); }

/* Die Formatleiste ist dieselbe wie in den Kapiteln; davor steht, woran ein
   Textprogramm sofort erkennbar ist: Schriftart und Grad. Im Wordfenster
   tragen auch ihre Knöpfe das Blau. */
.hd-worddok__band { display: flex; align-items: center; background: var(--hd-word-grau); }
.hd-worddok__band .hd-mdleiste { flex: 1; background: transparent; }
.hd-worddok__schrift { display: flex; gap: 4px; padding-left: var(--space-lg); }
.hd-worddok__schrift span {
  padding: 3px var(--space-sm); border: 1px solid var(--color-border); border-radius: var(--radius-sm);
  background: var(--color-card); font-size: var(--text-xs); color: var(--color-secondary);
}
.hd-worddok .hd-mdeinfuegen { color: var(--hd-word); }
.hd-worddok .hd-mdeinfuegen:hover { border-color: var(--hd-word); background: rgba(43, 87, 154, 0.08); }

/* Das Lineal zeigt den Satzspiegel: heller Streifen für den Text, graue Enden
   für die Seitenränder. */
.hd-worddok__lineal {
  display: flex; align-items: center; height: 22px; padding: 0 var(--space-lg);
  border-bottom: 1px solid var(--color-border-subtle); background: var(--hd-word-grau);
}
/* Das Lineal ist so breit wie die Seite darunter — es misst sie ja. */
.hd-worddok__lineal span {
  width: calc(100% * var(--hd-wordzoom)); margin: 0 auto; height: 12px; border-radius: 1px;
  box-shadow: inset 0 0 0 1px rgba(43, 87, 154, 0.25);
  background:
    linear-gradient(90deg, #ccd6e5 0 12%, transparent 12% 88%, #ccd6e5 88% 100%),
    repeating-linear-gradient(90deg, rgba(43, 87, 154, 0.3) 0 1px, transparent 1px 24px),
    var(--color-card);
}

/* Die Fläche, über die geblättert wird. Der Zoom verbreitert das Fenster des
   Betrachters — er stellt die Seite darin auf volle Breite, also wächst sie mit. */
.hd-worddok__flaeche { overflow-x: auto; background: #e9e7e4; }
.hd-worddok__seiten {
  display: block; width: calc(100% * var(--hd-wordzoom)); height: 760px;
  margin: 0 auto; border: 0; background: #e9e7e4;
}

/* Die Statusleiste: Standort im Dokument links, Ansicht rechts. */
.hd-worddok__stand {
  display: flex; align-items: center; gap: var(--space-lg);
  padding: 5px var(--space-lg);
  background: var(--hd-word); color: rgba(255, 255, 255, 0.85);
  font-size: var(--text-xs);
}
.hd-worddok__stand b { color: #fff; font-weight: var(--font-semibold); }
.hd-worddok__zoom { margin-left: auto; }
@media (max-width: 760px) {
  .hd-worddok__stand-weit { display: none; }
}


/* ── Gutachtrude: Die Feststellung am Handy ────────────────────────────────────

   Aufgenommen wird vor Ort, mit dem Gerät in der Hand. Der Umschalter im Kopf
   stellt dieselbe Maske ins Handy: gleiches Markup, gleiche Knöpfe, nur eine
   schmale Fläche. Was darin anders liegen muss, sagen Container-Abfragen —
   damit gilt es auch, wenn die Demo wirklich auf einem Handy steht. */

.hd-ansicht {
  display: inline-flex; border: 1px solid var(--color-border);
  border-radius: var(--radius-sm); overflow: hidden;
}
.hd-ansicht__knopf {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 28px; padding: 0;
  border: 0; background: var(--color-card); color: var(--color-secondary); cursor: pointer;
}
.hd-ansicht__knopf + .hd-ansicht__knopf { border-left: 1px solid var(--color-border); }
.hd-ansicht__knopf:hover { color: var(--color-primary); }
.hd-ansicht__knopf.is-aktiv { background: var(--color-primary-light); color: var(--color-primary); }

/* Der Umschalter steht rechts in der Reiterzeile. Die Linie unter den Reitern
   läuft dann unter beiden durch; sichtbar ist er nur, solange die
   Feststellungen offen sind. */
.hd-reiterzeile { display: flex; align-items: center; gap: var(--space-lg); border-bottom: 1px solid var(--color-border); }
.hd-reiterzeile > .hd-reiter { flex: 1; align-self: flex-end; border-bottom: none; margin-bottom: -1px; }
.hd-reiterzeile .hd-reiter__tab { margin-bottom: 0; }
.hd-reiterzeile > .hd-ansicht { margin-bottom: var(--space-xs); }
.hd-reiterzeile:has([data-reiter-knopf="feststellungen"][aria-selected="false"]) > .hd-ansicht { visibility: hidden; }

.hd-geraet__leiste { display: none; }
.hd-geraet.is-mobil {
  container: geraet / inline-size;
  width: 393px; max-width: 100%; margin: 0 auto;
  padding: 10px; border-radius: 42px; background: #1c1917;
  box-shadow: 0 12px 32px rgba(28, 25, 23, 0.28);
}
.hd-geraet.is-mobil .hd-geraet__leiste {
  display: flex; align-items: center; justify-content: space-between;
  padding: 2px var(--space-lg) 8px;
  color: #fff; font-size: var(--text-xs); font-weight: var(--font-semibold);
}
/* Der Schirm scrollt für sich — ein Handy ist kürzer als die Feststellung. Er
   trägt die Fläche der App, nicht das Weiß einer Karte: Darin liegen Karten. */
/* Der Schirm selbst steht still und schneidet ab; gescrollt wird die Spalte
   darin. So können Fenster und Suchfenster über dem Schirm liegen, ohne
   mitzuscrollen. */
.hd-geraet.is-mobil .hd-geraet__schirm {
  position: relative; display: flex; flex-direction: column;
  height: 660px; overflow: hidden;
  border-radius: 30px;
  background: color-mix(in oklch, var(--color-primary) 8%, white);
}
.hd-geraet.is-mobil .hd-geraet__schirm > .hd-spalte {
  flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  padding: var(--space-md);
}
/* Ein Handy zeigt keinen Scrollbalken: Gescrollt wird trotzdem, nur ohne
   die graue Schiene am Rand — im Schirm, in Fenstern und im Suchfenster. */
.hd-geraet.is-mobil :is(.hd-spalte, .hd-sp__body, .hd-modal__body) { scrollbar-width: none; }
.hd-geraet.is-mobil :is(.hd-spalte, .hd-sp__body, .hd-modal__body)::-webkit-scrollbar { display: none; }
/* Am Handy nimmt die neue Feststellung den ganzen Schirm: Solange das Formular
   offen ist, weicht die Liste — wie im Gerät, wo eine neue Seite die alte
   verdeckt. Der Zustand steht im Markup, kein Skript schaltet: Ist das
   Formular sichtbar, ist die Liste es nicht. */
.hd-geraet.is-mobil:has([data-aufnahme]:not([hidden])) .hd-uebersicht { display: none; }
/* Die neue Feststellung ist am Handy eine eigene weiße Seite: kein getönter
   Schirm drumherum, keine Karte mit Rand darin. */
.hd-geraet.is-mobil:has([data-aufnahme]:not([hidden])) .hd-geraet__schirm { background: var(--color-card); }
.hd-geraet.is-mobil [data-aufnahme] { border: none; border-radius: 0; box-shadow: none; padding-inline: var(--space-xs); }

@container geraet (max-width: 440px) {
  .hd-card { padding: var(--space-md); }
  .hd-card__kopf { flex-wrap: wrap; gap: var(--space-sm); }
  .hd-serie__bild { flex: 1 1 100%; }
  /* Die Befundzeile stapelt: Bild links, Nummer und Schwere oben, Titel darunter.
     Sechs Spalten nebeneinander ergäben sechs Wortreste. */
  .hd-bp { grid-template-columns: 48px 1fr auto; gap: 2px var(--space-sm); padding: var(--space-sm); }
  .hd-bp__bild { grid-row: 1 / span 2; align-self: center; }
  .hd-bp__nr { grid-column: 2; grid-row: 1; }
  .hd-schwere { grid-column: 3; grid-row: 1; justify-self: end; }
  .hd-bp__titel { grid-column: 2; grid-row: 2; }
  .hd-bp__ort { display: none; }
  .hd-planmini--aufnahme { max-width: 100%; }
  /* Label über Wert: Nebeneinander bliebe von beidem ein Wortrest. */
  .hd-erkannt__zeile { flex-direction: column; align-items: flex-start; gap: 2px; }
  .hd-erkannt__zeile strong { text-align: left; }
  .hd-normz, .hd-normz--ergebnis { grid-template-columns: minmax(0, 1fr) auto; gap: 2px var(--space-sm); }
  .hd-normz > :is(.hd-normz__titel, .hd-normz__warum) { grid-column: 1 / -1; }
  .hd-normz__nehmen { grid-column: 2; grid-row: 1; justify-self: end; }
  .hd-fertigzeile { justify-content: flex-start; }
  .hd-teil__kopf { align-items: flex-start; }
  /* Am Handy ohne die Trennstriche: Mit ihnen wäre die Leiste um ein paar
     Pixel zu breit, und der Diktierknopf stünde hinter dem Bildrand. */
  .hd-mdtrenner { display: none; }
  .hd-mdleiste { padding: var(--space-sm); }
  .hd-mdknopf { width: 28px; height: 28px; }
  /* Überschriften und Durchstreichen setzt man am Handy nicht — die Leiste bleibt kürzer. */
  .hd-mdknopf--nur-breit { display: none; }
  /* Kopf der Liste: Titel oben, der Knopf darunter über die ganze Breite —
     nebeneinander drückte der Knopf den Titel an den Rand. */
  .hd-uebersicht > .hd-card__kopf { flex-direction: column; align-items: stretch; }
  .hd-uebersicht > .hd-card__kopf .hd-aktion { justify-content: center; }
  /* Der Titel bleibt einzeilig und endet mit „…". */
  .hd-bp { grid-template-columns: 48px minmax(0, 1fr) auto; }
  .hd-bp__titel { grid-column: 2; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  /* Die Schweremarke steht rechts, mittig zu Nummer und Titel. */
  .hd-bp > .hd-schwere { grid-row: 1 / span 2; align-self: center; }
  .hd-serie__plus { flex: 1 1 100%; }
  /* Während des Diktats am Handy nur Wortlaut und Pegel — das runde Mikrofon
     nähme der schmalen Zeile den Platz. */
  .hd-diktat > .hd-mikro { display: none; }
  /* „+ weiteres Foto" ist am Handy nur eine kleine Kachel unter dem Bild,
     links bündig — das große Feld gehört dem Foto. */
  .hd-serie__plus.is-still { flex: 0 0 120px; aspect-ratio: 1; padding: var(--space-sm); font-size: var(--text-xs); text-align: center; }
  /* Im Fenster: Foto und Plan untereinander, beide in voller Breite. */
  .hd-belege { grid-template-columns: 1fr; gap: var(--space-md); }
}

/* Fenster im Handy: Sie fahren als Blatt von unten in den Schirm, der Rest des
   Schirms dunkelt ab — wie in einer App, nicht als Fenster über der Seite. */
@keyframes hd-blatt-hoch { from { transform: translateY(100%); } }
.hd-geraet__schirm > .hd-sp__halter { position: absolute; inset: 0; z-index: 20; }
.hd-geraet__schirm .hd-sp__grund { position: absolute; }
.hd-geraet__schirm .hd-sp {
  position: absolute; inset: auto 0 0; width: 100%; height: calc(100% - 40px);
  border: none; border-radius: 22px 22px 0 0;
  animation: hd-blatt-hoch var(--transition-base) ease;
}
.hd-geraet__schirm .hd-sp__kopf { padding: var(--space-lg) var(--space-md) var(--space-md); }
.hd-geraet__schirm .hd-sp__titel h2 { font-size: var(--text-base); }
.hd-geraet__schirm .hd-sp__body { padding: var(--space-md); scrollbar-gutter: auto; }

/* Das Suchfenster nimmt den ganzen Schirm ein — am Handy eine eigene Seite,
   kein Blatt: Die Vorschläge brauchen die Höhe. */
.hd-geraet__schirm > .hd-normmodal[open] {
  position: absolute; inset: 0; z-index: 20;
  display: flex; flex-direction: column;
  width: 100%; height: 100%; max-width: none; max-height: none; margin: 0;
  border-radius: 0; box-shadow: none;
  animation: hd-blatt-hoch var(--transition-base) ease;
}
.hd-geraet__schirm > .hd-normmodal .hd-modal__kopf { padding: var(--space-lg) var(--space-md) var(--space-md); }
.hd-geraet__schirm > .hd-normmodal .hd-modal__titel { font-size: var(--text-lg); }
.hd-geraet__schirm > .hd-normmodal .hd-modal__body { flex: 1; min-height: 0; max-height: none; padding: var(--space-md); gap: var(--space-md); }
.hd-geraet__schirm > .hd-normmodal .hd-modal__fuss { padding: var(--space-md); }

/* ── Chatgar: Fragebox, Unterhaltung, Quellen ────────────────────────────────── */

/* Der Stand der Websuche als Angabe, nicht als Schalter: ein Feld mit Globus,
   das sagt, dass gesucht wird, wenn es hilft. Maße wie die Pille mit Mikrofon
   und Klammer daneben, damit die Eingabezeile eine Linie behält. */
.hd-cg__stand {
  flex: none; display: inline-flex; align-items: center; gap: var(--space-xs);
  height: 46px; box-sizing: border-box; padding: 7px 14px;
  border: none; border-radius: var(--radius-full);
  background: var(--color-card); color: var(--color-secondary);
  font: inherit; font-size: 13px; white-space: nowrap;
}
.hd-cg__stand svg { color: var(--color-primary); }

/* Ein Knopf, der nur sein Zeichen trägt — die Büroklammer. */
.hd-cg__knopf { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 1px solid var(--color-border); border-radius: var(--radius); background: var(--color-card); color: var(--color-body); }
.hd-mikro--klein { width: 34px; height: 34px; }
/* Mikrofon und Büroklammer als eine weiße Pille mit leichtem Schatten: das
   Mikrofon gefüllt in der Agentenfarbe, die Klammer als stilles Zeichen daneben. */
.hd-cg__werkzeuge {
  flex: none; display: inline-flex; align-items: center; gap: 16px;
  height: 46px; box-sizing: border-box; padding: 7px 10px 7px 7px;
  border-radius: var(--radius-full);
  background: var(--color-card);
  box-shadow: 0 1px 3px rgba(28, 25, 23, 0.12), 0 4px 12px rgba(28, 25, 23, 0.06);
}
.hd-cg__werkzeuge .hd-mikro--klein { width: 32px; height: 32px; }
.hd-cg__werkzeuge .hd-cg__knopf { width: 24px; height: 32px; border: none; border-radius: 0; background: none; color: var(--color-secondary); }

/* Die angehängte Datei als Kapsel: Symbol in einer Scheibe, Name, Größe,
   rechts der Stand — der Spinner, solange sie hochgeht, danach der Haken. */
.hd-dateichips { display: flex; flex-wrap: wrap; gap: var(--space-sm); }
.hd-entwuerfe { margin-bottom: var(--space-md); }
.hd-entwuerfe:empty { display: none; }
.hd-dateichip { display: inline-flex; align-items: center; gap: var(--space-sm); max-width: 100%; padding: 3px var(--space-md) 3px 4px; border-radius: var(--radius-full); background: color-mix(in srgb, var(--color-secondary) 12%, white); font-size: var(--text-xs); font-weight: var(--font-semibold); color: var(--color-body); }
.hd-dateichip__ico { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: color-mix(in srgb, var(--color-primary) 18%, white); color: var(--color-primary); }
.hd-dateichip__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 340px; }
.hd-dateichip__groesse { opacity: 0.8; font-weight: var(--font-normal); }
.hd-dateichip__stand { flex: none; display: inline-flex; align-items: center; color: var(--color-success); }
.hd-dateichip__stand .hd-spinner { display: none; width: 12px; height: 12px; }
.hd-dateichip.is-laedt .hd-dateichip__stand .hd-spinner { display: inline-block; }
.hd-dateichip.is-laedt .hd-dateichip__stand svg { display: none; }

/* Die Unterhaltung nimmt den Schirm: Der Verlauf scrollt in der Karte, die
   Eingabezeile bleibt unten stehen — wie im Hub, wie in jedem Chat. */
.hd-main:has(> .hd-cg) { height: calc(100vh - 2 * var(--space-xl)); }
.hd-cg { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: var(--space-lg); padding: var(--space-lg); }
.hd-cg__verlauf { flex: 1; min-height: 0; overflow-y: auto; scrollbar-gutter: stable; display: flex; flex-direction: column; gap: var(--space-xl); padding: var(--space-xs) var(--space-sm); }
.hd-cg__zug { display: flex; flex-direction: column; gap: var(--space-lg); }

/* Die Sprechblasen (`MessageBubble`): der Mensch rechts auf grauer Fläche,
   der Assistent links auf Weiß mit hauchdünnem Rand — ohne Namen, ohne
   Zipfel, wie im Hub. */
.hd-cb { display: flex; flex-direction: column; gap: var(--space-xs); }
.hd-cb--mensch { align-items: flex-end; }
.hd-cb--agent { align-items: flex-start; }
.hd-cb__blase { max-width: 80%; padding: var(--space-md) var(--space-lg); border-radius: var(--radius-xl); font-size: var(--text-base); line-height: var(--leading-relaxed); color: var(--color-body); overflow-wrap: anywhere; }
.hd-cb--mensch .hd-cb__blase { background: var(--color-surface-hover); }
.hd-cb--agent .hd-cb__blase { background: var(--color-card); border: 1px solid color-mix(in srgb, var(--color-border) 55%, white); }
.hd-cb__fuss { display: flex; flex-direction: column; gap: var(--space-sm); max-width: 80%; padding: 0 var(--space-sm); }
.hd-cb__meta { display: inline-flex; align-items: center; gap: var(--space-xs); font-size: var(--text-xs); color: var(--color-secondary); }
/* Die Aktionen unter der Antwort — Kopieren, Neu erzeugen — sind im Mockup
   Zeichen, keine Knöpfe. */
.hd-cb__aktionen { display: flex; gap: var(--space-xs); color: var(--color-secondary); }
.hd-cb__aktion { display: inline-flex; padding: 3px; }

/* Was der Assistent gerade tut, steht dort, wo gleich die Antwort steht. */
.hd-cg__status { display: flex; align-items: center; gap: var(--space-sm); padding: var(--space-xs) var(--space-lg); font-size: var(--text-sm); color: var(--color-secondary); }

/* Die Schreibmarke am Ende des Textes, der gerade hereinkommt. */
.hd-schreibmarke { display: inline-block; width: 6px; height: 1em; margin-left: 2px; vertical-align: text-bottom; background: var(--color-secondary); animation: hd-schreibmarke 1s steps(2, start) infinite; }

/* Die Antwort in Markdown, wie das Modell sie schreibt — Überschriften,
   Listen, Tabellen, Fett — im Prosa-Rhythmus des Hubs. */
.hd-md > :first-child { margin-top: 0; }
.hd-md > :last-child { margin-bottom: 0; }
.hd-md p, .hd-md ul, .hd-md ol { margin: 0 0 var(--space-md); }
.hd-md h1, .hd-md h2, .hd-md h3 { margin: var(--space-lg) 0 var(--space-sm); font-size: var(--text-base); font-weight: var(--font-semibold); color: var(--color-title); }
.hd-md h1 { font-size: var(--text-lg); }
.hd-md ul, .hd-md ol { padding-left: var(--space-xl); }
.hd-md li { margin-bottom: var(--space-xs); }
.hd-md strong { color: var(--color-title); }
.hd-md table { width: 100%; margin: 0 0 var(--space-md); border-collapse: collapse; font-size: var(--text-sm); }
.hd-md th { padding: var(--space-xs) var(--space-sm); text-align: left; font-weight: var(--font-medium); border-bottom: 1px solid var(--color-border); }
.hd-md td { padding: var(--space-xs) var(--space-sm); border-bottom: 1px solid var(--color-border-subtle); vertical-align: top; }

/* Die Fundstelle im Text: die Datei samt Seite, oder die Nummer der Quelle. */
.hd-fundstelle { display: inline-block; margin: 0 1px; padding: 0 5px; border-radius: var(--radius-full); background: var(--color-primary-light); color: var(--color-primary); font-size: 0.8em; font-weight: var(--font-semibold); white-space: nowrap; vertical-align: 1px; }

/* Die Quellen der Websuche (`ChatSources`): zugeklappt unter der Antwort,
   aufgeklappt eine nummerierte Liste — Titel in der Agentenfarbe, Domain
   daneben, die übrigen hinter „weitere Quellen". */
.hd-cq { font-size: var(--text-sm); }
.hd-cq__kopf { display: inline-flex; align-items: center; gap: var(--space-xs); list-style: none; cursor: pointer; font-size: var(--text-xs); font-weight: var(--font-semibold); letter-spacing: 0.02em; text-transform: uppercase; color: var(--color-secondary); }
.hd-cq__kopf::-webkit-details-marker { display: none; }
.hd-cq__kopf:hover { color: var(--color-primary); }
.hd-cq__kopf .hd-chevron { transform: rotate(-90deg); transition: transform var(--transition-fast); }
.hd-cq[open] > .hd-cq__kopf .hd-chevron { transform: none; }
.hd-cq__liste { list-style: none; margin: var(--space-sm) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-xs); }
.hd-cq__zeile { display: flex; align-items: baseline; gap: var(--space-sm); }
.hd-cq__nr { flex: none; color: var(--color-secondary); font-variant-numeric: tabular-nums; }
.hd-cq__titel { display: inline-flex; align-items: center; gap: 2px; color: var(--color-primary); }
.hd-cq__domain { color: var(--color-secondary); font-size: var(--text-xs); }
.hd-cq__mehr { margin-top: var(--space-sm); }
.hd-cq__mehr summary { list-style: none; cursor: pointer; font-size: var(--text-xs); color: var(--color-secondary); text-decoration: underline; }
.hd-cq__mehr summary::-webkit-details-marker { display: none; }

/* Die Eingabezeile unter der Unterhaltung (`ChatInput`): Klammer, Feld,
   Websuche, Mikrofon, Senden. Läuft die Antwort, wird aus Senden ein Stopp. */
.hd-cg__eingabe { flex: none; display: flex; align-items: center; gap: var(--space-sm); }
.hd-cg__feld { flex: 1; min-width: 0; min-height: 44px; box-sizing: border-box; padding: var(--space-sm) var(--space-lg); border: 1px solid var(--color-border); border-radius: var(--radius); font-size: var(--text-base); line-height: var(--leading-relaxed); color: var(--color-title); }
.hd-cg__feld.is-leer { color: var(--color-placeholder); }
.hd-cg__senden { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: none; border-radius: var(--radius); background: var(--color-accent); color: #fff; cursor: pointer; }
.hd-cg__senden:disabled { background: var(--color-surface-hover); color: var(--color-placeholder); cursor: default; }
.hd-cg__sendezeichen, .hd-cg__stopp { display: inline-flex; }
.hd-cg__stopp { display: none; }
.hd-cg__eingabe.is-laeuft .hd-cg__senden:disabled { background: var(--color-accent); color: #fff; }
.hd-cg__eingabe.is-laeuft .hd-cg__sendezeichen { display: none; }
.hd-cg__eingabe.is-laeuft .hd-cg__stopp { display: inline-flex; }

/* ── Elvira: Das Gedächtnis des Büros ────────────────────────────────────────── */

/* Phase 0 der Elvira-Demo — nachgebaut nach der Hub-Seite „Gedächtnis des
   Büros". Anzeigen, keine Knöpfe: Hier wird nichts geöffnet, deshalb trägt
   nichts davon einen Hover-Zustand. */

.hd-ged { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xl); margin-top: var(--space-lg); }
.hd-ged__text { flex: 1; min-width: 280px; display: flex; flex-direction: column; gap: var(--space-md); }
.hd-ged__stufe { display: flex; align-items: center; gap: var(--space-sm); }

/* Der Tacho: ein Halbkreis, auf dem viermal derselbe Pfad liegt. Die drei
   Zonen sind Abschnitte davon (`stroke-dasharray` auf dem Umfang π × 82 =
   257,6), der Wertbogen darüber bekommt seine Länge aus dem Stand. Eine Lücke
   von 2,5° an jeder Zonengrenze trennt die Farben sichtbar. */
.hd-tacho { position: relative; flex: none; }
.hd-tacho__bild { display: block; overflow: visible; }
.hd-tacho__zone { fill: none; stroke-width: 10; }
.hd-tacho__zone--rot { stroke: color-mix(in srgb, var(--color-danger) 16%, white); stroke-dasharray: 73.7 999; }
.hd-tacho__zone--gelb {
  stroke: color-mix(in srgb, var(--color-warning) 16%, white);
  stroke-dasharray: 95.9 999; stroke-dashoffset: -80.9;
}
.hd-tacho__zone--gruen {
  stroke: color-mix(in srgb, var(--color-success) 16%, white);
  stroke-dasharray: 73.7 999; stroke-dashoffset: -183.9;
}
/* Die Länge des Wertbogens steht als Inline-Angabe am Pfad. Bogen und Zonen in
   hellen Pastelltönen; die Zahl behält die volle Farbe, damit sie lesbar bleibt. */
.hd-tacho__wert { fill: none; stroke-width: 22; }
.hd-tacho__zahl {
  position: absolute; left: 0; right: 0; bottom: 30px;
  text-align: center; font-size: 40px; font-weight: var(--font-bold);
  font-variant-numeric: tabular-nums; line-height: 1;
}
.hd-tacho__label {
  position: absolute; left: 0; right: 0; bottom: 8px;
  text-align: center; font-size: var(--text-sm); color: var(--color-secondary);
}
.hd-tacho--rot .hd-tacho__wert { stroke: color-mix(in srgb, var(--color-danger) 50%, white); }
.hd-tacho--rot .hd-tacho__zahl { color: var(--color-danger); }
.hd-tacho--gelb .hd-tacho__wert { stroke: color-mix(in srgb, var(--color-warning) 50%, white); }
.hd-tacho--gelb .hd-tacho__zahl { color: var(--color-warning); }
.hd-tacho--gruen .hd-tacho__wert { stroke: color-mix(in srgb, var(--color-success) 50%, white); }
.hd-tacho--gruen .hd-tacho__zahl { color: var(--color-success); }

/* Die fünf Reifestufen als Band — wo das Büro steht, sagt das kräftige Feld. */
.hd-stufenband { display: flex; gap: var(--space-xs); }
.hd-stufenband i {
  flex: 1; height: 6px; border-radius: var(--radius-full);
  background: var(--color-border-subtle); cursor: help;
}
.hd-stufenband i.is-erreicht { background: color-mix(in srgb, var(--color-primary) 45%, white); }
.hd-stufenband i.is-aktiv { background: var(--color-primary); }

/* Was als Nächstes die meisten Punkte bringt. */
.hd-ziele { display: flex; flex-direction: column; gap: var(--space-sm); }
.hd-ziel {
  display: flex; align-items: center; gap: var(--space-md);
  padding: var(--space-md) var(--space-lg);
  border: 1px solid var(--color-border); border-radius: var(--radius);
  font-size: var(--text-sm);
}
.hd-ziel__punkte {
  flex: none; padding: 2px var(--space-sm); border-radius: var(--radius-full);
  background: color-mix(in srgb, var(--color-primary) 12%, white); color: var(--color-primary);
  font-size: 11px; font-weight: var(--font-semibold); font-variant-numeric: tabular-nums;
}
.hd-ziel__text { flex: 1; }

/* Die Bausteinwand: je Speicher eine Kachel mit Zahl, Nebenzahl und Punkten.
   Alle vier Zeilen stehen in jeder Kachel, auch leer — sonst springen die
   Reihen des Rasters gegeneinander. */
.hd-kacheln {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: var(--space-md); margin-top: var(--space-lg);
}
.hd-kachel {
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-xs);
  padding: var(--space-lg); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); background: var(--color-card); cursor: help;
}
/* Symbol und Titel in einer Zeile; die Zeile ist mindestens so hoch wie das
   Symbol, damit die Zahlen darunter in allen Kacheln auf einer Höhe stehen. */
.hd-kachel__kopf { display: flex; align-items: center; gap: var(--space-sm); min-height: 36px; margin-bottom: var(--space-xs); }
.hd-kachel__ico {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: var(--radius);
}
.hd-kachel__titel { min-width: 0; font-size: var(--text-sm); font-weight: var(--font-semibold); color: var(--color-title); line-height: 1.3; }
.hd-kachel__wert { height: 34px; display: flex; align-items: center; font-size: var(--text-2xl); font-weight: var(--font-bold); font-variant-numeric: tabular-nums; color: var(--color-title); }
/* „hinterlegt" statt einer Zahl — dasselbe Feld, kleinere Schrift. */
.hd-kachel__wert.is-wort { font-size: var(--text-lg); font-weight: var(--font-semibold); }
.hd-kachel__sub { min-height: 1.4em; font-size: var(--text-sm); color: var(--color-secondary); }
.hd-kachel__balken { display: flex; align-items: center; gap: var(--space-sm); width: 100%; min-height: 12px; margin-top: var(--space-xs); }
.hd-kachel__spur { flex: 1; height: 6px; border-radius: var(--radius-full); background: var(--color-border-subtle); overflow: hidden; }
.hd-kachel__spur i { display: block; height: 100%; border-radius: var(--radius-full); }
.hd-kachel__punkte { flex: none; font-size: 11px; color: var(--color-secondary); font-variant-numeric: tabular-nums; white-space: nowrap; }

.hd-kachel--rot .hd-kachel__ico { background: color-mix(in srgb, var(--color-danger) 25%, white); color: var(--color-danger); }
.hd-kachel--rot .hd-kachel__spur i { background: var(--color-danger); }
.hd-kachel--gelb .hd-kachel__ico { background: color-mix(in srgb, var(--color-warning) 25%, white); color: var(--color-warning); }
.hd-kachel--gelb .hd-kachel__spur i { background: var(--color-warning); }
.hd-kachel--gruen .hd-kachel__ico { background: color-mix(in srgb, var(--color-success) 25%, white); color: var(--color-success); }
.hd-kachel--gruen .hd-kachel__spur i { background: var(--color-success); }


/* ── Statusmarken im Stil des Hubs ────────────────────────────────────────────
   Eine Pille in der hellen Zustandsfarbe, vorn ein Kreis in einem kräftigeren
   Ton derselben Farbe mit dem Symbol darin. Kreis und Symbol hängen am CSS
   (`::before`/`::after`), nicht am Markup: So tragen auch die Marken, die das
   Skript umschaltet (Elvira bestätigt, Protokolliver fasst zusammen), das
   passende Symbol, ohne dass am Text etwas angefasst wird. */
.hd-status, .hd-lvstatus, .hd-bewertung, .hd-schwere, .hd-stempel__marke, .hd-marke {
  --hd-marke-symbol: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12.59 2.59A2 2 0 0 0 11.17 2H4a2 2 0 0 0-2 2v7.17a2 2 0 0 0 .59 1.41l8.7 8.7a2.43 2.43 0 0 0 3.42 0l6.58-6.58a2.43 2.43 0 0 0 0-3.42z'/%3E%3Ccircle cx='7.5' cy='7.5' r='.5' fill='black'/%3E%3C/svg%3E");
  position: relative;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 12px 3px 3px;
  border-radius: var(--radius-full);
  font-size: var(--text-sm); font-weight: var(--font-semibold); line-height: 20px;
  text-transform: none; letter-spacing: 0;
  white-space: nowrap;
}
:is(.hd-status, .hd-lvstatus, .hd-bewertung, .hd-schwere, .hd-stempel__marke, .hd-marke)::before {
  content: ""; flex: none;
  width: 20px; height: 20px; border-radius: 50%;
  background: color-mix(in srgb, currentColor 22%, transparent);
}
:is(.hd-status, .hd-lvstatus, .hd-bewertung, .hd-schwere, .hd-stempel__marke, .hd-marke)::after {
  content: "";
  position: absolute; left: 7px; top: 50%;
  width: 12px; height: 12px; margin-top: -6px;
  background: currentColor;
  -webkit-mask: var(--hd-marke-symbol) center / contain no-repeat;
  mask: var(--hd-marke-symbol) center / contain no-repeat;
}

/* Protokolliver: Status von Protokoll und Aufgabe */
.hd-status--offen { --hd-marke-symbol: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 6v6l4 2'/%3E%3C/svg%3E"); }
.hd-status--in-Arbeit { --hd-marke-symbol: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 12h-4l-3 9L9 3l-3 9H2'/%3E%3C/svg%3E"); }
.hd-status--erledigt,
.hd-status--abgeschlossen { --hd-marke-symbol: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); }
.hd-stempel__marke.is-alt { --hd-marke-symbol: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8'/%3E%3Cpath d='M3 3v5h5'/%3E%3Cpath d='M12 7v5l4 2'/%3E%3C/svg%3E"); }
.hd-stempel__marke.is-laeuft { --hd-marke-symbol: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8'/%3E%3Cpath d='M21 3v5h-5'/%3E%3Cpath d='M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16'/%3E%3Cpath d='M8 16H3v5'/%3E%3C/svg%3E"); }
.hd-stempel__marke.is-aktuell { --hd-marke-symbol: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); }

/* Elvira: Stand einer LV-Zeile */
.hd-lvstatus--auto { --hd-marke-symbol: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); }
.hd-lvstatus--review { --hd-marke-symbol: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.06 12.35a1 1 0 0 1 0-.7 10.75 10.75 0 0 1 19.88 0 1 1 0 0 1 0 .7 10.75 10.75 0 0 1-19.88 0'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E"); }
.hd-lvstatus--frei { --hd-marke-symbol: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 19.5v-15A2.5 2.5 0 0 1 6.5 2H19a1 1 0 0 1 1 1v18a1 1 0 0 1-1 1H6.5a1 1 0 0 1 0-5H20'/%3E%3C/svg%3E"); }
.hd-lvstatus--ignoriert { --hd-marke-symbol: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m4.9 4.9 14.2 14.2'/%3E%3C/svg%3E"); }
.hd-lvstatus--z { --hd-marke-symbol: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 9h16'/%3E%3Cpath d='M4 15h16'/%3E%3Cpath d='M10 3 8 21'/%3E%3Cpath d='M16 3l-2 18'/%3E%3C/svg%3E"); }

/* Gutachtrude: Einordnung und Schwere */
.hd-bewertung--ursache { --hd-marke-symbol: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Ccircle cx='12' cy='12' r='6'/%3E%3Ccircle cx='12' cy='12' r='2'/%3E%3C/svg%3E"); }
.hd-bewertung--folge { --hd-marke-symbol: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 10l5 5-5 5'/%3E%3Cpath d='M4 4v7a4 4 0 0 0 4 4h12'/%3E%3C/svg%3E"); }
.hd-bewertung--offen { --hd-marke-symbol: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E"); }
.hd-schwere--schwer { --hd-marke-symbol: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3'/%3E%3Cpath d='M12 9v4'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E"); }
.hd-schwere--mittel { --hd-marke-symbol: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 8v4'/%3E%3Cpath d='M12 16h.01'/%3E%3C/svg%3E"); }
.hd-schwere--gering { --hd-marke-symbol: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 16v-4'/%3E%3Cpath d='M12 8h.01'/%3E%3C/svg%3E"); }

/* Freie Marken */
.hd-marke.is-gruen { --hd-marke-symbol: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); }
.hd-marke.is-pflicht { --hd-marke-symbol: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12.83 2.18a2 2 0 0 0-1.66 0L2.6 6.08a1 1 0 0 0 0 1.83l8.58 3.91a2 2 0 0 0 1.66 0l8.58-3.9a1 1 0 0 0 0-1.83z'/%3E%3Cpath d='m2 12 10 4.5L22 12'/%3E%3Cpath d='m2 17 10 4.5L22 17'/%3E%3C/svg%3E"); }
.hd-marke.is-neu { --hd-marke-symbol: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.94 14.06A2 2 0 0 0 8.5 12.62L2.37 11.04a.5.5 0 0 1 0-.96L8.5 8.5a2 2 0 0 0 1.44-1.44l1.58-6.13a.5.5 0 0 1 .96 0L14.06 7.06A2 2 0 0 0 15.5 8.5l6.13 1.58a.5.5 0 0 1 0 .96L15.5 12.62a2 2 0 0 0-1.44 1.44l-1.58 6.13a.5.5 0 0 1-.96 0z'/%3E%3C/svg%3E"); }

/* ── Platzhalter: Der Klick-Dummy entsteht noch ──────────────────────────── */
/* Ein Agent, den es im Schaufenster schon gibt und als Dummy noch nicht: Die
   Fläche trägt seine Farbe, der gestrichelte Rand sagt, dass hier gearbeitet
   wird. Ein nachgebauter Halb-Dummy wäre im Termin die schlechtere Auskunft. */
.hd-baustelle {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--space-md);
  min-height: 320px;
  padding: var(--space-2xl);
  border: 2px dashed color-mix(in srgb, var(--color-primary) 35%, white);
  border-radius: var(--radius-lg);
  background: var(--color-card);
  text-align: center;
}
.hd-baustelle__zeichen {
  display: flex; align-items: center; justify-content: center;
  width: 72px; height: 72px;
  border-radius: var(--radius-full);
  background: var(--color-primary-light);
  color: var(--color-primary);
  overflow: hidden;
}
.hd-baustelle__zeichen img { width: 100%; height: 100%; object-fit: cover; }
.hd-baustelle__text { font-size: var(--text-lg); font-weight: var(--font-semibold); color: var(--color-title); }


/* ── Dashboard: die beiden Blöcke des Schaufensters ──────────────────────── */
/* Zwei Blöcke, damit im Termin sofort sichtbar ist, was der Hub in jedem Büro
   leistet und was ein Fach bedient. Unterschieden werden sie über die Fläche,
   nicht über die Kacheln: Die Karten sind die des Hubs und bleiben, wie sie
   sind. Vier Kacheln je Zeile — das ist die Aufteilung, in der die beiden
   Gruppen als gleich lange Reihen nebeneinander stehen. */
.hd-agentengruppe {
  padding: var(--space-xl);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border-subtle);
}
.hd-agentengruppe + .hd-agentengruppe { margin-top: var(--space-xl); }
/* Die Überschrift trägt die Einteilung, nicht die Fläche allein: Als kleines
   graues Band las sie sich wie eine Beschriftung der Kachelreihe statt wie ein
   Abschnitt. Jetzt steht sie in Titelgröße über einer Trennlinie. */
.hd-agentengruppe__titel {
  margin: 0 0 var(--space-lg);
  padding-bottom: var(--space-sm);
  border-bottom: 2px solid color-mix(in srgb, var(--color-primary) 20%, transparent);
  font-size: var(--text-xl);
  font-weight: var(--font-bold);
  color: var(--color-title);
}
/* Der Kern trägt den Ton des Hubs, die Spezialisten stehen auf hellem Grund —
   verwandt genug, dass die Seite ruhig bleibt, verschieden genug, dass die
   Trennung ohne Erklärung ankommt. */
.hd-agentengruppe--kern { background: color-mix(in srgb, var(--color-primary) 10%, white); }
.hd-agentengruppe--spezialisten { background: var(--color-card); }

@media (min-width: 768px) {
  .hd-agentengruppe .dashboard-agents { grid-template-columns: repeat(4, 1fr); gap: var(--space-xl); }
}