/* Die Schriftarten der Anwendung. Beide Oberflächen bekommen diesen Block
   vorangestellt, damit er nur einmal existiert (siehe schrift.go).

   Die Pfade sind absolut und ohne Schema — sie zeigen auf dieselbe Herkunft
   wie die Seite. Nichts hier darf jemals auf einen fremden Rechner zeigen:
   das Portal ist öffentlich, und eine Schriftart von außen schickt die
   IP-Adresse der Kandidat:innen dorthin. internal/auslieferung wacht darüber. */

@font-face {
	font-family: "Inter";
	src: url("/schrift/inter.woff2") format("woff2");
	font-weight: 400 700;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Inter";
	src: url("/schrift/inter-kursiv.woff2") format("woff2");
	font-weight: 400 700;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: "Martian Mono";
	src: url("/schrift/martianmono.woff2") format("woff2");
	font-weight: 400 700;
	font-style: normal;
	font-display: swap;
}

/* Die Design-Grundlage beider Oberflächen (UI-Ticket 04).
   Eine Quelle: Farben aus Ticket 01, Schrift aus Ticket 02, Marke aus
   Ticket 03. Beide Oberflächen bekommen diese Datei vor ihrem eigenen
   Stylesheet — die alten Regeln dürfen noch koexistieren, solange sie
   schrumpfen und nicht wachsen. */

/* ------------------------------------------------------------------ *
 * Farben — Drei-Zustands-Aufbau
 *
 * Jeder Wert stammt aus internal/marke/ScaleUnitColors.svg, dem Farbblatt
 * der CI; die dunklen Flächen sind Scale Black 900 mit 8/16/24 % Scale
 * Blue 900. Die Kontraste sind gemessen und in palette_test.go festgenagelt.
 *
 * Die volle helle Palette steht auf blankem :root. Im Media-Block stehen
 * NUR die Abweichungen, abgesichert mit :not([data-theme="light"]), damit
 * eine ausdrückliche Wahl das System schlägt; dieselben noch einmal unter
 * [data-theme="dark"], damit der Wechsel in beide Richtungen gewinnt.
 * Keine Farbe darf ihre einzige Definition in einem Media-Block haben —
 * sonst rendert die Seite im dritten Zustand (System, ohne Wahl) die
 * Schrift des einen Modus auf dem Grund des anderen.
 * ------------------------------------------------------------------ */

:root {
	--grund: #FBF9F9;
	--blatt: #FFFFFF;
	--blatt-still: #F0F0F0;
	--strich: #D3D5D5;
	--kante: #888D90;
	--schrift: #162026;
	--schrift-leise: #50575D;
	--akzent: #B75A53;
	--auf-akzent: #FFFFFF;
	--akzent-sanft: #FBEAE9;
	--gefahr: #693430;
	--auf-gefahr: #FFFFFF;
	--fokus: #162026;

	/* Maße. Eine Leiter statt frei erfundener Pixelwerte. */
	--raum-1: 4px;
	--raum-2: 8px;
	--raum-3: 12px;
	--raum-4: 16px;
	--raum-5: 24px;
	--raum-6: 32px;
	--rundung: 8px;
	--rundung-klein: 5px;
	--rundung-voll: 999px;

	/* Schriftgrade. Inters x-Höhe ist 546/1000 gegen 508 beim System Font,
	   also liest sich dieselbe Pixelgröße rund 7,5 % größer. Die Grade
	   bleiben trotzdem, wo sie waren: der Zuwachs ist klein und in einem
	   textdichten Werkzeug eher willkommen. */
	--grad-klein: 0.857rem;   /* 12px bei 14px Grundgröße */
	--grad-text: 1rem;
	--grad-gross: 1.143rem;   /* 16px */
	--grad-titel: 1.429rem;   /* 20px */
	--zeile-eng: 1.35;
	--zeile-text: 1.55;
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		--grund: #18262B;
		--blatt: #1A2C31;
		--blatt-still: #1D3236;
		--strich: #50575D;
		--schrift: #FFFFFF;
		--schrift-leise: #ABAEB1;
		--akzent: #72F2EB;
		--auf-akzent: #162026;
		--akzent-sanft: #234244;
		--gefahr: #F09A95;
		--auf-gefahr: #162026;
		--fokus: #FFFFFF;
	}
}

:root[data-theme="dark"] {
	--grund: #18262B;
	--blatt: #1A2C31;
	--blatt-still: #1D3236;
	--strich: #50575D;
	--schrift: #FFFFFF;
	--schrift-leise: #ABAEB1;
	--akzent: #72F2EB;
	--auf-akzent: #162026;
	--akzent-sanft: #234244;
	--gefahr: #F09A95;
	--auf-gefahr: #162026;
	--fokus: #FFFFFF;
}

/* Formularelemente sollen im Dunkelmodus nicht hell gerendert werden. */
:root { color-scheme: light; }
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) { color-scheme: dark; }
}
:root[data-theme="dark"] { color-scheme: dark; }

/* ------------------------------------------------------------------ *
 * Grundregeln
 * ------------------------------------------------------------------ */

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

/* `hidden` muss verstecken. Der Browser setzt dafür nur `display: none` in
   seinem eigenen Stylesheet — jede Autoren-Regel schlägt das, und der
   Wortschatz unten ist voll davon (`.chip` ist inline-flex, `.knopf` auch,
   `.stepper` flex …). Ohne diese Zeile steht ein `<span class="chip" hidden>`
   sichtbar auf der Seite, und zwar genau dann, wenn er leer ist und niemand
   ihn bemerkt. Gefunden am Verwaltungs-Menü des Prototypen zu Ticket 05. */
[hidden] { display: none !important; }

body {
	background: var(--grund);
	color: var(--schrift);
	font-family: "Inter", system-ui, sans-serif;
	line-height: var(--zeile-text);
}

code, kbd, pre, samp, .mono {
	font-family: "Martian Mono", ui-monospace, Menlo, monospace;
	font-size: 0.92em;
}

/* Zahlen, die untereinander stehen sollen — Matrix, Historie, Budgets. */
table, .zahlen { font-variant-numeric: tabular-nums; }

/* Eine Tabelle, die breiter ist als ihr Platz, scrollt in diesem Rahmen —
   nie die Seite (WCAG 1.4.10 erlaubt zweidimensionalen Inhalt im eigenen
   Roller). Gedacht für schmale Spalten: Chat-Verlauf, enge Karten. */
.tabellen-roller { overflow-x: auto; max-width: 100%; }

a { color: var(--akzent); }

/* Der Fokusring sitzt AUSSERHALB des Elements (Ticket 01, Regel 3). Läge er
   innen, stünde er auf einem gefüllten Akzentknopf im Dunkeln mit 1,34:1
   gegen Cyan — unsichtbar. Außen steht er immer gegen --blatt oder
   --grund. */
:focus-visible {
	outline: 2px solid var(--fokus);
	outline-offset: 2px;
	border-radius: var(--rundung-klein);
}
:focus:not(:focus-visible) { outline: none; }

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* ------------------------------------------------------------------ *
 * Bauteil-Wortschatz
 * ------------------------------------------------------------------ */

.karte {
	background: var(--blatt);
	border: 1px solid var(--strich);
	border-radius: var(--rundung);
	padding: var(--raum-4) var(--raum-5);
}
.karte + .karte { margin-top: var(--raum-4); }
.karte > :first-child { margin-top: 0; }
.karte > :last-child { margin-bottom: 0; }

/* --- Chip ---------------------------------------------------------- *
 * „gut" trägt bewusst KEINE eigene Farbe (Roman, 2026-09-01). Die CI hat
 * genau zwei Töne: Rot ist als Akzent und als Gefahr vergeben, Cyan ist im
 * Dunkelmodus der Akzent. Ein dritter Ton wäre erfunden, und der beste
 * verfügbare Kandidat läge im Dunkeln bei ΔE 13 zum Akzent — zwei Teals,
 * die Verschiedenes bedeuten. Also trägt die Fläche neutral, und das
 * Zeichen trägt die Bedeutung. Das verlangt Ticket 01 ohnehin: Bedeutung
 * hängt nie am Farbton allein. */
.chip {
	display: inline-flex;
	align-items: center;
	gap: var(--raum-1);
	padding: 2px var(--raum-2);
	border: 1px solid var(--strich);
	border-radius: var(--rundung-voll);
	background: var(--blatt-still);
	color: var(--schrift-leise);
	font-size: var(--grad-klein);
	line-height: var(--zeile-eng);
	white-space: nowrap;
}
.chip .zeichen { font-weight: 700; }

.chip.gut { border-color: var(--kante); color: var(--schrift); font-weight: 500; }
.chip.gut .zeichen::before { content: "\2713"; }

/* Warnung ist der Akzent als Kontur, nicht als Füllung — so bleibt sie vom
   gefüllten Akzent-Chip unterscheidbar, ohne einen dritten Ton. Die sanfte
   Fläche trägt --schrift, nie --akzent (Ticket 01, Regel 1: Red 700 auf
   Red 100 ergibt 3,92:1). */
.chip.warnung {
	border-color: var(--akzent);
	background: var(--akzent-sanft);
	color: var(--schrift);
	font-weight: 500;
}
.chip.warnung .zeichen::before { content: "!"; }

/* Gefahr ist Füllung, nie Tönung (Ticket 01, Regel 2): eine zweite blasse
   Rotfläche läge bei ΔE 7,9 neben der sanften Akzentfläche. */
.chip.schlecht {
	border-color: var(--gefahr);
	background: var(--gefahr);
	color: var(--auf-gefahr);
	font-weight: 500;
}
.chip.schlecht .zeichen::before { content: "\2717"; }

.chip.ruhig { border-color: var(--strich); color: var(--schrift-leise); }

.chip.akzent {
	border-color: var(--akzent);
	background: var(--akzent);
	color: var(--auf-akzent);
	font-weight: 500;
}

/* --- Knopf --------------------------------------------------------- */

.knopf {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--raum-2);
	padding: var(--raum-2) var(--raum-4);
	border: 1px solid var(--kante);
	border-radius: var(--rundung-klein);
	background: var(--blatt);
	color: var(--schrift);
	font: inherit;
	font-weight: 500;
	line-height: var(--zeile-eng);
	cursor: pointer;
	transition: background-color 120ms ease, border-color 120ms ease;
}
.knopf:hover:not(:disabled) { background: var(--blatt-still); }
.knopf:disabled { opacity: 0.5; cursor: not-allowed; }

.knopf.primaer { background: var(--akzent); border-color: var(--akzent); color: var(--auf-akzent); }
.knopf.primaer:hover:not(:disabled) { filter: brightness(0.92); background: var(--akzent); }

.knopf.geister { background: transparent; border-color: var(--akzent); color: var(--akzent); }
.knopf.geister:hover:not(:disabled) { background: var(--akzent-sanft); color: var(--schrift); }

.knopf.leise { background: transparent; border-color: transparent; color: var(--schrift-leise); }
.knopf.leise:hover:not(:disabled) { background: var(--blatt-still); color: var(--schrift); }

.knopf.gefahr { background: var(--gefahr); border-color: var(--gefahr); color: var(--auf-gefahr); }
.knopf.gefahr:hover:not(:disabled) { filter: brightness(0.92); background: var(--gefahr); }

/* --- Stepper ------------------------------------------------------- */

.stepper { display: flex; flex-wrap: wrap; gap: var(--raum-2); list-style: none; margin: 0; padding: 0; }
.stepper > li {
	display: flex;
	align-items: center;
	gap: var(--raum-2);
	padding: var(--raum-2) var(--raum-3);
	border: 1px solid var(--strich);
	border-radius: var(--rundung-klein);
	background: var(--blatt);
	color: var(--schrift-leise);
	font-size: var(--grad-klein);
}
.stepper .nr {
	display: grid;
	place-items: center;
	width: 20px; height: 20px;
	border: 1px solid var(--kante);
	border-radius: var(--rundung-voll);
	font-weight: 600;
	flex: none;
}
.stepper > li.fertig { border-color: var(--kante); color: var(--schrift); }
.stepper > li.fertig .nr { background: var(--schrift); color: var(--grund); border-color: var(--schrift); }
.stepper > li.jetzt { border-color: var(--akzent); background: var(--akzent-sanft); color: var(--schrift); font-weight: 500; }
.stepper > li.jetzt .nr { background: var(--akzent); color: var(--auf-akzent); border-color: var(--akzent); }

/* --- Matrix -------------------------------------------------------- */

.matrix { width: 100%; border-collapse: collapse; }
.matrix th, .matrix td {
	text-align: left;
	padding: var(--raum-2) var(--raum-3);
	border-bottom: 1px solid var(--strich);
	vertical-align: top;
}
.matrix th { font-size: var(--grad-klein); font-weight: 600; color: var(--schrift-leise); }
.matrix tbody tr:hover { background: var(--blatt-still); }
.matrix .urteil { width: 1.6em; text-align: center; font-weight: 700; }
.matrix .urteil.erfuellt::before { content: "\2713"; }
.matrix .urteil.fehlt::before { content: "\2717"; color: var(--gefahr); }
.matrix .urteil.unklar::before { content: "?"; color: var(--schrift-leise); }
.matrix .begruendung { color: var(--schrift-leise); font-size: var(--grad-klein); }

/* --- Brotkrumen ---------------------------------------------------- */

.brotkrumen { display: flex; flex-wrap: wrap; align-items: center; gap: var(--raum-2); font-size: var(--grad-klein); color: var(--schrift-leise); }
.brotkrumen a { color: inherit; }
/* Das Trennzeichen sitzt im nachfolgenden Element; ohne das eigene
   text-decoration würde es die Unterstreichung des Links miterben. */
.brotkrumen > * + *::before {
	content: "\00B7";
	margin-right: var(--raum-2);
	color: var(--strich);
	display: inline-block;
	text-decoration: none;
}
.brotkrumen .hier { color: var(--schrift); font-weight: 500; }

/* --- Veraltet-Leiste ----------------------------------------------- */

.veraltet-leiste {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--raum-3);
	padding: var(--raum-2) var(--raum-4);
	border: 1px solid var(--akzent);
	border-left-width: 4px;
	border-radius: var(--rundung-klein);
	background: var(--akzent-sanft);
	color: var(--schrift);
}
.veraltet-leiste .text { flex: 1; min-width: 12rem; }

/* --- Budget-Punkte -------------------------------------------------- *
 * Als CSS-Kreise gezeichnet, nicht als Zeichen: so hängen sie an keiner
 * Schrift und skalieren mit der Zeile. */

.budget-punkte { display: inline-flex; align-items: center; gap: var(--raum-1); }
.budget-punkte .punkt {
	width: 9px; height: 9px;
	border: 1px solid var(--kante);
	border-radius: var(--rundung-voll);
}
.budget-punkte .punkt.voll { background: var(--schrift); border-color: var(--schrift); }
.budget-punkte .rest { margin-left: var(--raum-1); font-size: var(--grad-klein); color: var(--schrift-leise); }

/* --- Etikett -------------------------------------------------------- */

.etikett {
	display: block;
	font-size: var(--grad-klein);
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--schrift-leise);
}

/* ------------------------------------------------------------------ *
 * Zustände (UI-Ticket 11)
 *
 * Fünf Familien, und vier davon sind KEINE Fehler: nichts da (leer),
 * nicht erlaubt (gesperrt), nicht konfiguriert (hinweis), es dauert
 * (laeuft) — und Problem, das als Einziges zwei Tonlagen hat: Rot
 * ausschließlich für kaputt/unerwartet, neutral-stark für absichtlich
 * Angehaltenes (Contract-Check, StepStone-Sperre, Rechtsgrundlage).
 * Jeder Text beantwortet drei Fragen: was ist los, warum, was kann ich
 * jetzt tun — der rohe technische Grund steht klein darunter (.technik).
 * ------------------------------------------------------------------ */

/* Leer: ein Satz plus die nächste Handlung — und die Handlung ist
   berechnet, nicht behauptet: eine leere Arbeitsliste zeigt „Suchlauf
   starten" nur, wenn das Reifegrad-Gate offen ist, sonst den Weg ins
   Dossier (Roman, 2026-09-01). */
.zustand-leer {
	padding: var(--raum-5) var(--raum-4);
	border: 1px dashed var(--strich);
	border-radius: var(--rundung);
	color: var(--schrift-leise);
	text-align: center;
}
.zustand-leer .handlung { margin-top: var(--raum-3); }

/* Gesperrt: grau mit Schloss davor, sonst nichts (Ticket 05) — hier nur
   als Fläche; das Schloss-SVG klont die Anwendung aus ihrer Vorlage. */
.zustand-gesperrt {
	padding: var(--raum-4);
	border: 1px solid var(--strich);
	border-radius: var(--rundung);
	background: var(--blatt-still);
	color: var(--schrift-leise);
	display: flex;
	align-items: center;
	gap: var(--raum-2);
}

/* Nicht konfiguriert: ein Zustand, kein Fehler (503 der Sync-API). Er
   benennt, WER es beheben kann — sonst ruft jemand an. */
.zustand-hinweis {
	padding: var(--raum-4);
	border: 1px solid var(--strich);
	border-radius: var(--rundung);
	background: var(--blatt-still);
	color: var(--schrift);
}
.zustand-hinweis .wer { display: block; margin-top: var(--raum-1); font-size: var(--grad-klein); color: var(--schrift-leise); }

/* Läuft: Animation, verstrichene Zeit, Schritt. Die Kleinform steht im
   Knopf oder in der Zeile, die Großform (mit .schritt) in der
   Auftragsleiste. prefers-reduced-motion friert den Ring über die
   globale Regel ein — der Text trägt die Aussage dann allein. */
.laeuft-zeichen {
	width: 14px; height: 14px;
	border: 2px solid var(--strich);
	border-top-color: var(--akzent);
	border-radius: var(--rundung-voll);
	animation: zustand-drehen 800ms linear infinite;
	flex: none;
	display: inline-block;
	vertical-align: -2px;
}
@keyframes zustand-drehen { to { transform: rotate(360deg); } }
.zustand-laeuft { display: flex; align-items: baseline; gap: var(--raum-2); }
.zustand-laeuft .laeuft-zeichen { align-self: center; }
.zustand-laeuft .schritt { color: var(--schrift-leise); font-size: var(--grad-klein); }

/* Problem: Rot ist die Gefahrenstimme und bleibt es — nur kaputt trägt
   sie. Absichtlich Angehaltenes (.ist-angehalten) steht neutral-stark:
   gleiche Form, Kante statt Gefahr, Pause- statt Kreuz-Zeichen. Beides
   ist Kontur plus gefülltes Zeichen, nie eine blasse Tönung (Ticket 01,
   Regel 2). */
.zustand-problem {
	padding: var(--raum-3) var(--raum-4);
	border: 1px solid var(--gefahr);
	border-left-width: 4px;
	border-radius: var(--rundung-klein);
	background: var(--blatt);
	display: flex;
	gap: var(--raum-3);
	align-items: flex-start;
}
.zustand-problem .problem-zeichen {
	width: 22px; height: 22px;
	border-radius: var(--rundung-voll);
	background: var(--gefahr);
	color: var(--auf-gefahr);
	display: grid;
	place-items: center;
	font-weight: 700;
	flex: none;
}
.zustand-problem .problem-zeichen::before { content: "\2717"; }
.zustand-problem .handlung { margin-left: auto; align-self: center; }
.zustand-problem .technik {
	display: block;
	margin-top: var(--raum-1);
	font-family: "Martian Mono", ui-monospace, Menlo, monospace;
	font-size: var(--grad-klein);
	color: var(--schrift-leise);
	overflow-wrap: anywhere;
}
.zustand-problem.ist-angehalten { border-color: var(--kante); }
.zustand-problem.ist-angehalten .problem-zeichen { background: var(--schrift); color: var(--grund); }
/* Pause: zwei Balken aus currentColor — kein Zeichen, das der
   Schrift-Ausschnitt aus Ticket 02 nicht hätte. */
.zustand-problem.ist-angehalten .problem-zeichen::before {
	content: "";
	width: 7px; height: 9px;
	background: linear-gradient(to right, currentColor 0 2.5px, transparent 2.5px 4.5px, currentColor 4.5px 7px);
}

/* Gabelung: jemand anderes hat parallel geschrieben (409). Das ist kein
   Fehler, sondern eine Entscheidung mit zwei Wegen — Warnungs-Kontur wie
   beim Chip, die Knöpfe sind Teil des Bauteils. */
.gabelung {
	padding: var(--raum-3) var(--raum-4);
	border: 1px solid var(--akzent);
	border-left-width: 4px;
	border-radius: var(--rundung-klein);
	background: var(--akzent-sanft);
	color: var(--schrift);
	display: flex;
	flex-wrap: wrap;
	gap: var(--raum-3);
	align-items: center;
}
.gabelung .text { flex: 1; min-width: 14rem; }
.gabelung .wege { display: flex; gap: var(--raum-2); }

/* Klickort-Zeichen: am Knopf oder in der Zeile steht nur das Zeichen —
   Spinner (läuft, auch während Wiederholungen), ✓ (fertig), ✕ in Gefahr
   (kaputt), Pause neutral (absichtlich angehalten). Die Wörter und
   Gründe stehen ausschließlich in der Auftragsleiste. */
.klick-stand { display: inline-flex; align-items: center; gap: var(--raum-1); font-weight: 700; }
.klick-stand.fertig::before { content: "\2713"; }
.klick-stand.kaputt::before { content: "\2717"; color: var(--gefahr); }
.klick-stand.angehalten::before {
	content: "";
	width: 7px; height: 9px;
	background: linear-gradient(to right, currentColor 0 2.5px, transparent 2.5px 4.5px, currentColor 4.5px 7px);
}
/* Die interne Oberfläche. Farben, Schrift und Maße kommen aus
   internal/gestaltung (UI-Ticket 04) und stehen dieser Datei voran; hier
   steht nur noch, was diese Ansichten zusätzlich brauchen — Anordnung,
   Breiten, Eigenheiten einzelner Bildschirme.

   Eigene Farbwerte gibt es hier bewusst keine mehr. Vorher hatte diese
   Datei eine zweite Palette mit blauem Akzent und ohne Dunkelmodus; da sie
   nach der Grundlage geladen wird, hat sie deren Token still überschrieben
   und die Oberfläche im Dunkeln zerlegt (heller Grund, cyaner Knopf).
   Wer hier eine Farbe braucht, nimmt ein Token — oder das Token fehlt und
   gehört in die Grundlage. */

body { margin: 0; font-size: 14px; }

/* --- Kopfzeile ------------------------------------------------------- *
 * Ruhige Fläche mit Haarlinie statt dunklem Band: die Wortmarke folgt der
 * Schrift (UI-Ticket 03), und auf einer gefärbten Leiste müsste sie in
 * beiden Modi weiß bleiben. */
#kopf {
  display: flex; align-items: center; gap: 16px;
  /* flex-wrap: bei 200 % Zoom bricht die Kopfzeile um, statt die Seite
     waagerecht aufzuspannen (UI-Ticket 12). */
  flex-wrap: wrap;
  padding: 8px 16px;
  background: var(--blatt);
  border-bottom: 1px solid var(--strich);
}
#logo { color: var(--schrift); font-weight: 700; font-size: 17px; text-decoration: none;
        display: inline-flex; align-items: baseline; gap: 8px; }
/* Das Logo bringt kein eigenes Maß mit (viewBox statt width/height), damit
   es hier skalieren kann; ohne Höhe füllte es die ganze Kopfzeile. */
#logo .marke { height: 15px; width: auto; align-self: center; }
#kopf-hinweis { flex: 1; color: var(--schrift-leise); }
#haupt-nav { display: flex; align-items: center; gap: 16px; }
#haupt-nav > a, .menue-blatt a, .menue-blatt .gesperrt {
  color: var(--schrift-leise); text-decoration: none; font-size: 13px;
}
#haupt-nav > a:hover { color: var(--schrift); }
#haupt-nav > a.hier { color: var(--schrift); font-weight: 600; }

/* Verwaltung ist Einrichtung, kein Tagesgeschäft: sie klappt eine Ebene
   tiefer auf (UI-Ticket 05). */
.menue { position: relative; display: inline-flex; }
.menue-blatt {
  position: absolute; top: calc(100% + 6px); left: 0; min-width: 13rem; z-index: 20;
  display: flex; flex-direction: column; gap: 2px;
  padding: 6px; background: var(--blatt);
  border: 1px solid var(--strich); border-radius: var(--rundung);
  box-shadow: 0 6px 20px rgba(0,0,0,.18);
}
.menue-blatt a { padding: 6px 10px; border-radius: var(--rundung-klein); }
.menue-blatt a:not(.gesperrt):hover { background: var(--blatt-still); color: var(--schrift); }
/* Gezeigt und gesperrt (Roman, UI-Ticket 05): der Eintrag steht da, damit
   man weiß, dass es ihn gibt — und sonst nichts. Das Schloss sagt es schon. */
.menue-blatt a.gesperrt { cursor: not-allowed; opacity: .6; }
.schloss { width: 12px; height: 12px; flex: none; margin-right: 6px; vertical-align: -1px; }

/* Auftragsleiste (UI-Ticket 11): das Blatt hängt rechts am Knopf und
   listet Laufendes zuerst; die Bauteile (laeuft-zeichen, klick-stand,
   technik) kommen aus der Grundlage. */
#auftraege-marke { display: inline-flex; align-items: center; gap: 4px; margin-left: 6px; }
#auftraege-marke:empty { display: none; }
#auftraege-blatt { right: 0; left: auto; min-width: 24rem; max-width: min(32rem, 90vw); max-height: 70vh; overflow: auto; }
.auftrag-zeile { display: flex; gap: 10px; padding: 8px 10px; border-radius: var(--rundung-klein); align-items: flex-start; }
.auftrag-zeile + .auftrag-zeile { border-top: 1px solid var(--strich); }
.auftrag-zeile .stand-zeichen { flex: none; margin-top: 3px; }
.auftrag-zeile .text { min-width: 0; }
.auftrag-zeile .kopfzeile { font-weight: 600; font-size: 13px; }
.auftrag-zeile .kopfzeile .hinweis { font-weight: 400; }
.auftrag-zeile .technik { display: block; margin-top: 2px; font-family: "Martian Mono", ui-monospace, Menlo, monospace; font-size: 11px; color: var(--schrift-leise); overflow-wrap: anywhere; }
.auftraege-leer, .auftraege-hinweis { padding: 10px; color: var(--schrift-leise); font-size: 13px; max-width: 24rem; }
.klick-stand-platz { display: inline-flex; align-items: center; }

#nutzer-feld { font-size: 12px; color: var(--schrift-leise); }
#nutzer { margin-left: 6px; width: 140px; background: var(--grund); border: 1px solid var(--kante); color: var(--schrift); border-radius: var(--rundung-klein); padding: 3px 6px; }

main { padding: 16px; max-width: 1500px; margin: 0 auto; }
.karte { padding: 14px 16px; margin-bottom: 16px; }
/* Bei 200 % Zoom (Reflow, WCAG 1.4.10) scrollt eine breite Tabelle in
   ihrer Karte bzw. ihrem Reiter-Blatt — nicht die Seite als Ganzes
   (UI-Ticket 12). Auf dem Laptop ändert das nichts: dort passt alles. */
.karte, .reiter-blatt { overflow-x: auto; }
h1 { font-size: 20px; margin: 0; }
h2 { font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: var(--schrift-leise); margin: 0 0 10px; }
h2 + h2, form h2 { margin-top: 18px; }
.hinweis { color: var(--schrift-leise); font-weight: 400; text-transform: none; font-size: 12px; letter-spacing: 0; }

input, select, textarea, button { font: inherit; }
input, select, textarea { width: 100%; border: 1px solid var(--kante); border-radius: var(--rundung-klein); padding: 5px 8px; background: var(--blatt); color: var(--schrift); }
textarea { resize: vertical; }
label { display: block; margin-bottom: 8px; font-size: 12px; color: var(--schrift-leise); }
label > input, label > select, label > textarea { margin-top: 2px; font-size: 14px; color: var(--schrift); }
.zeile { display: flex; gap: 10px; }
.zeile > label { flex: 1; }
button { border: 1px solid var(--akzent); background: var(--akzent); color: var(--auf-akzent); border-radius: var(--rundung-klein); padding: 6px 12px; cursor: pointer; width: auto; }
button:hover:not(:disabled) { filter: brightness(.92); }
button:disabled { opacity: .5; cursor: default; }
button.dezent { background: var(--blatt); color: var(--akzent); }
button.klein { padding: 2px 8px; font-size: 12px; }
/* Destruktives trägt die Gefahrenfarbe — als Umrandung, nicht als Füllung:
   der Knopf ist nur der Einstieg, die Rückfrage stellt der Dialog. Hell
   fällt Gefahr mit dem Akzent zusammen (beides Scale Red), im Dunkeln
   trennt es sich: Löschen bleibt rot, während der Akzent Cyan wird. */
button.gefahr { border-color: var(--gefahr); color: var(--gefahr); }
button.gefahr:not(.dezent) { background: var(--gefahr); color: var(--auf-gefahr); }

table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--strich); vertical-align: top; }
th { font-size: 11px; text-transform: uppercase; color: var(--schrift-leise); }
#dossier-tabelle tbody tr { cursor: pointer; }

/* Der Tastatur-Einstieg in klickbare Zeilen (UI-Ticket 12): ein Link bzw.
   Knopf im Titel, der aussieht wie der Zellentext — die Zeile selbst bleibt
   Maus-Komfort. Kein Akzent: der Hover der Zeile trägt die Affordanz. */
.zeilen-link { color: inherit; text-decoration: none; font-weight: 500; }
.zeilen-knopf {
  background: none; border: 0; padding: 0; width: auto;
  color: inherit; font: inherit; font-weight: 500;
  text-align: left; cursor: pointer;
}
.zeilen-knopf:hover:not(:disabled) { filter: none; }
/* Zeilen-Hover ist eine Bewegung, keine Bedeutung — deshalb neutral und
   nicht in der Akzentfläche, die „jetzt dran" heißt. */
#dossier-tabelle tbody tr:hover { background: var(--blatt-still); }

/* Zwei Spalten (Chat-Ticket 4): links die Felder, rechts der Chat mit der
   Breite und die Reifestufen darunter — Fortschritt sichtbar, aber nicht
   mehr gleichrangig neben dem Gespräch. */
#detail-spalten { display: grid; grid-template-columns: 1fr 1.2fr; gap: 16px; align-items: start; }
#spalte-rechts { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
@media (max-width: 1100px) { #detail-spalten { grid-template-columns: 1fr; } }

.banner { border-radius: 6px; padding: 8px 10px; margin-bottom: 10px; }
/* Gefahr ist Füllung, nie Tönung (Ticket 01, Regel 2). */
.banner.fehler { background: var(--gefahr); color: var(--auf-gefahr); }
#speichern-zeile { display: flex; gap: 8px; margin-top: 12px; }
#speichern-zeile input { flex: 1; }
#speichern-zeile button { white-space: nowrap; }

/* --- Zustands-Chips -------------------------------------------------- *
 * Der Wortschatz der Grundlage: „gut" ohne eigene Farbe, Warnung als
 * Akzent-Kontur, Gefahr als Füllung. Die Zeichen, die die Bedeutung vom
 * Farbton lösen, setzt Ticket 11 — hier steht vorerst nur die Fläche. */
.chip { display: inline-block; border-radius: 10px; padding: 1px 9px; font-size: 12px; margin: 1px 2px 1px 0; }
.chip.ok, .chip.geprueft { border-color: var(--kante); background: var(--blatt-still); color: var(--schrift); font-weight: 500; }
.chip.offen { border-color: var(--gefahr); background: var(--gefahr); color: var(--auf-gefahr); }
.chip.unklar { border-color: var(--akzent); background: var(--akzent-sanft); color: var(--schrift); }
.chip.neutral { background: var(--blatt-still); color: var(--schrift-leise); }
/* „Neu" ist die eine Auszeichnung, die auffallen soll — sie ersetzt den
   Benachrichtigungskanal, den es bewusst nicht gibt (spec/03). */
.chip.neu { border-color: var(--akzent); background: var(--akzent); color: var(--auf-akzent); font-weight: 600; }
/* Absichtlich Angehaltenes (Widerruf, abgelaufene Höchstdauer) ist nicht
   kaputt — neutral-stark mit Pause-Zeichen, nie Rot (UI-Ticket 11/16). */
.chip.angehalten { border-color: var(--schrift-leise); background: var(--blatt-still); color: var(--schrift); font-weight: 500; }
.chip.angehalten::before { content: "⏸ "; }
label.schalter { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-size: 13px; color: var(--schrift-leise); }
label.schalter > input { width: auto; margin: 0; }

/* Die Stufe ist ein Knopf (UI-Ticket 12) — die Rücknahmen heben den
   generischen button-Stil (Akzentfläche) wieder auf. */
.stufe { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border: 1px solid var(--strich); border-radius: 6px; margin-bottom: 6px; cursor: pointer;
         width: 100%; background: var(--blatt); color: var(--schrift); font: inherit; text-align: left; }
.stufe:hover, .stufe.gewaehlt { background: var(--akzent-sanft); border-color: var(--akzent); }
.stufe:hover:not(:disabled) { filter: none; }
.stufe .nr { font-weight: 700; width: 18px; }
.stufe .name { flex: 1; }
#luecken-liste { margin: 4px 0 0; padding-left: 18px; }
#luecken-liste li { margin-bottom: 6px; }
#luecken-liste .begruendung { color: var(--schrift-leise); font-size: 13px; }

#session-liste { margin: 8px 0; font-size: 12px; }
/* Die Session ist ein Knopf (UI-Ticket 12) — daher die Rücknahmen des
   generischen button-Stils. */
#session-liste .session { display: inline-block; border: 1px solid var(--strich); border-radius: 10px; padding: 1px 9px; margin: 0 4px 4px 0; cursor: pointer;
                          background: var(--blatt); color: var(--schrift); font: inherit; font-size: 12px; width: auto; }
#session-liste .session:hover:not(:disabled) { filter: none; background: var(--blatt-still); }
#session-liste .session.aktiv { background: var(--akzent-sanft); border-color: var(--akzent); }
#chat-verlauf { height: 460px; overflow-y: auto; border: 1px solid var(--strich); border-radius: 6px; padding: 8px; background: var(--grund); }
.msg { max-width: 92%; margin: 6px 0; padding: 7px 10px; border-radius: 8px; white-space: pre-wrap; font-size: 13px; }
.msg.nutzer { background: var(--akzent-sanft); margin-left: auto; }
.msg.bot { background: var(--blatt); border: 1px solid var(--strich); }
/* Systemzeilen sind Belege, kein Gerede (UI-Ticket 14): keine Blase, volle
   Breite, leise Schrift, eine ruhige Kante links — sichtbar anders als der
   Bot-Text, der in einer Blase steht. */
.msg.system { max-width: 100%; background: none; border-left: 3px solid var(--strich);
              border-radius: 0; padding: 3px 10px; color: var(--schrift-leise); font-size: 12px; }
.msg.fehler { background: var(--gefahr); color: var(--auf-gefahr); }
/* Gerenderte Bot-Antworten: die Blase gibt das pre-wrap des Rohstroms auf,
   die Markdown-Blöcke übernehmen den Umbruch selbst. */
/* Auswahl-Chips einer Bot-Frage (Chat-Ticket 2): Eingabe-Beschleuniger —
   die Antwort geht als normaler Text, das Eingabefeld bleibt frei. Gewählt
   trägt den Akzent; stumme Chips (beantwortet oder Session zu) fallen auf
   die neutrale Fläche zurück, die gewählte Option bleibt markiert. */
.frage-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0 10px 4px; }
.frage-chip {
  border: 1px solid var(--akzent); background: var(--blatt); color: var(--akzent);
  border-radius: 999px; padding: 4px 13px; font-size: 13px; cursor: pointer;
}
/* :not(.gewaehlt): sonst gewinnt der Hover gegen die gewählte Fläche und
   legt helle Schrift auf die sanfte Tönung — gemessen im eigenen Durchgang. */
.frage-chip:hover:not(:disabled):not(.gewaehlt) { background: var(--akzent-sanft); }
.frage-chip.gewaehlt { background: var(--akzent); color: var(--auf-akzent); }
.frage-chip:disabled { border-color: var(--strich); background: var(--blatt-still); color: var(--schrift-leise); cursor: default; }
.frage-chip:disabled.gewaehlt { border-color: var(--schrift-leise); color: var(--schrift); font-weight: 500; }
.frage-chip:disabled.gewaehlt::before { content: "✓ "; }
.frage-chip.uebernehmen { font-weight: 600; }
.frage-chip.uebernehmen:not(:disabled) { background: var(--akzent); color: var(--auf-akzent); }

/* Abschluss-Zusammenfassung (Chat-Ticket 3): die Karte vor dem
   Prüf-Vermerk — was diese Session geändert hat, alt → neu je Feld. */
.zusammenfassung { border: 1px solid var(--strich); border-left: 3px solid var(--akzent); border-radius: 8px; background: var(--blatt); padding: 10px 12px; margin: 10px 0; font-size: 13px; }
.zusammenfassung .kopf { margin: 0 0 8px; font-weight: 600; }
.zusammenfassung .feld { display: grid; grid-template-columns: minmax(110px, max-content) 1fr max-content 1fr; gap: 8px; padding: 3px 0; align-items: baseline; }
.zusammenfassung .feld + .feld { border-top: 1px solid var(--strich); }
.zusammenfassung .name { font-weight: 500; }
.zusammenfassung .wert { white-space: pre-wrap; overflow-wrap: anywhere; }
.zusammenfassung .wert.alt { color: var(--schrift-leise); }
.zusammenfassung .pfeil { color: var(--schrift-leise); }
.zusammenfassung details.wert > summary { cursor: pointer; }
.zusammenfassung details.wert[open] > summary { display: none; }
.zusammenfassung .schritte { margin: 8px 0 0; padding-left: 18px; color: var(--schrift-leise); }
.zusammenfassung .fuss { margin: 8px 0 0; color: var(--schrift-leise); }

.msg.md { white-space: normal; }
.msg.md > :first-child { margin-top: 0; }
.msg.md > :last-child { margin-bottom: 0; }
.msg.md p, .msg.md ul, .msg.md ol, .msg.md pre, .msg.md .tabellen-roller { margin: 6px 0; }
.msg.md ul, .msg.md ol { padding-left: 20px; }
/* Modell-Überschriften sind gestylte Absätze, keine h-Elemente — die
   Gliederung der Seite gehört den Karten (UI-Ticket 12). */
.msg.md .md-u1, .msg.md .md-u2 { font-weight: 600; font-size: 14px; margin-top: 10px; }
.msg.md .md-u3, .msg.md .md-u4 { font-weight: 600; font-size: 13px; margin-top: 8px; }
.msg.md pre { background: var(--blatt-still); border: 1px solid var(--strich); border-radius: 6px;
              padding: 6px 8px; overflow-x: auto; font-size: 12px; }
.msg.md code { background: var(--blatt-still); border-radius: 4px; padding: 0 3px; font-size: 12px; }
.msg.md table { font-size: 12px; }
.msg.md th, .msg.md td { padding: 3px 8px; white-space: nowrap; }
/* Lebenszeichen während eines Turns: die Punkte sind gemalte Kreise, kein
   Schriftzeichen — der eingebettete Schrift-Ausschnitt bleibt außen vor. */
.msg.warten { display: inline-flex; align-items: baseline; gap: 5px;
              background: var(--blatt-still); color: var(--schrift-leise); font-size: 12px; }
.msg.warten .punkt { width: 5px; height: 5px; border-radius: 50%; background: currentColor;
                     opacity: 0.25; animation: chat-puls 1.2s ease-in-out infinite; }
.msg.warten .punkt:nth-of-type(2) { animation-delay: 0.2s; }
.msg.warten .punkt:nth-of-type(3) { animation-delay: 0.4s; }
@keyframes chat-puls { 0%, 80%, 100% { opacity: 0.25; } 40% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .msg.warten .punkt { animation: none; opacity: 0.6; } }
#chat-eingabe { display: flex; gap: 8px; margin-top: 8px; }
#chat-eingabe textarea { flex: 1; }

#versionslog .diff { max-width: 300px; }
#versions-dialog, #mail-dialog { border: 1px solid var(--strich); border-radius: 8px; max-width: 760px; width: 90%; background: var(--blatt); color: var(--schrift); }
#mail-dialog label { display: block; margin: 8px 0; }
#mail-dialog input, #mail-dialog textarea { width: 100%; font: inherit; }
#mail-dialog textarea { font-family: "Martian Mono", ui-monospace, Menlo, monospace; font-size: 12px; }
#mail-dialog .warnung { color: var(--gefahr); }
#versions-dialog pre { background: var(--blatt-still); padding: 10px; border-radius: 6px; overflow: auto; max-height: 60vh; font-size: 12px; }

/* Dossier-Sync (spec/08): eine Prüf-Oberfläche. Konflikte und Warnungen
   stehen am Feld, damit niemand ankreuzt, ohne sie gesehen zu haben. */
#sync-unkonfiguriert, #vorschlag-warnungen { border: 1px solid var(--akzent); background: var(--akzent-sanft); color: var(--schrift); }
.warnung { color: var(--schrift); font-size: 12px; }
#sync-vorschlaege-tabelle tbody tr { cursor: pointer; }
#sync-vorschlaege-tabelle tbody tr:hover { background: var(--blatt-still); }
#detail-sync { margin-top: 6px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
#vorschlag-dialog { border: 1px solid var(--strich); border-radius: 8px; max-width: 1000px; width: 94%; max-height: 88vh; background: var(--blatt); color: var(--schrift); }
#vorschlag-tabelle { width: 100%; table-layout: fixed; }
#vorschlag-tabelle th:first-child, #vorschlag-tabelle td:first-child { width: 34px; }
#vorschlag-tabelle .feld { width: 22%; word-break: break-word; }
#vorschlag-tabelle .alt, #vorschlag-tabelle .neu { white-space: pre-line; vertical-align: top; font-size: 13px; }
#vorschlag-tabelle .alt { color: var(--schrift-leise); }
#vorschlag-kopf { margin-bottom: 8px; }

/* Die Meldung dreht Vorder- und Hintergrund um — so hebt sie sich in
   beiden Modi ab, ohne eine eigene Farbe zu erfinden. */
#meldungen { position: fixed; bottom: 16px; right: 16px; display: flex; flex-direction: column; gap: 8px; z-index: 10; }
#meldungen .meldung { background: var(--schrift); color: var(--grund); border-radius: 6px; padding: 8px 14px; box-shadow: 0 2px 8px rgba(0,0,0,.25); }
#meldungen .meldung.fehler { background: var(--gefahr); color: var(--auf-gefahr); }

/* --- Stellen-Umgebung (UI-Ticket 05 und 06) ---------------------------- *
 * Eine Arbeitsumgebung je Stelle: Brotkrume, Prozess-Leiste, vier Reiter.
 * Brotkrume, Stepper, Matrix, Veraltet-Leiste und Budget-Punkte kommen aus
 * der Grundlage — hier steht nur die Anordnung drumherum. */

#ansicht-stelle .brotkrumen { margin-bottom: 10px; }
.titelzeile { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.titelzeile .leise { color: var(--schrift-leise); font-size: 13px; }

/* Umschalter Meine/Alle (UI-Ticket 15, Prototyp 05): kein Recht, sondern
   ein Umfang — fremde Stellen bleiben erreichbar und zeigen, wem sie
   gehören. Der gewählte Knopf invertiert (Schrift auf Grund). */
.umschalter { display: inline-flex; margin-left: auto; }
.umschalter button { width: auto; border-radius: 0; background: var(--blatt); color: var(--schrift);
                     border: 1px solid var(--strich); padding: 4px 12px; font-size: 13px; }
.umschalter button:first-child { border-radius: 6px 0 0 6px; }
.umschalter button:last-child { border-radius: 0 6px 6px 0; margin-left: -1px; }
.umschalter button.gewaehlt { background: var(--schrift); border-color: var(--schrift); color: var(--grund); }
.umschalter .zahl { font-variant-numeric: tabular-nums; opacity: .75; margin-left: 5px; }
#umfang-erklaerung { color: var(--schrift-leise); font-size: 13px; margin: 4px 0 10px; }
#dossier-tabelle .steht-an .chip { margin-right: 4px; }
/* leise als eigenständige Klasse: Nebentext in Zellen und Erklärabsätzen. */
.leise { color: var(--schrift-leise); }
p.leise { font-size: 13px; }

/* Die Prozess-Leiste ist zugleich der Weg: jede Stufe ist ein echter Link
   (UI-Ticket 12). Der Link übernimmt die Innenmaße des li, damit die ganze
   Fläche Ziel bleibt und der Fokusring die Stufe umschließt. */
/* Eine Zeile für Navigation und Aktionen (Chat-Ticket 4): links der
   Stepper, rechts die Knöpfe des gewählten Schritts. Bei wenig Platz
   bricht die Aktions-Gruppe als Ganzes unter die Stufen. */
#stelle-leiste {
  display: flex; align-items: center; gap: var(--raum-3);
  flex-wrap: wrap; margin: 14px 0;
}
#leisten-aktionen { display: flex; align-items: center; gap: 10px; margin-left: auto; }

.stepper.prozess { margin: 0; }
.stepper.prozess > li { cursor: pointer; padding: 0; }
.stepper.prozess > li > a {
  display: flex; align-items: center; gap: var(--raum-2);
  padding: var(--raum-2) var(--raum-3);
  color: inherit; text-decoration: none;
}
.stepper.prozess > li:hover { border-color: var(--kante); }
.stepper.prozess .stand { color: var(--schrift-leise); }
.stepper.prozess > li.jetzt .stand, .stepper.prozess > li.fertig .stand { color: var(--schrift); }

.werkzeugleiste { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.werkzeugleiste .budget-punkte { margin-left: auto; }
#suchlauf-stale { margin-bottom: 12px; }
#suchlauf-kopfzeile { margin: 0 0 10px; }
#stelle-werkbank { margin-bottom: 14px; }
#stelle-werkbank summary { cursor: pointer; }
#suchlauf-historie { margin: 8px 0; }
.zeile.schmal { align-items: center; gap: 10px; margin: 8px 0; }
.zeile.schmal > label { flex: none; margin-bottom: 0; }
.zeile.schmal input[type=number] { width: 6em; }

/* --- Arbeitsliste ------------------------------------------------------ */
.kandidaten .einstufung-kopf { width: 6rem; }
.kandidaten .urteil-kopf { width: 6rem; }
#pool-tabelle td, #merge-tabelle td { padding: 8px 10px; border-top: 1px solid var(--strich); vertical-align: top; }
#pool-tabelle th, #merge-tabelle th { text-align: left; padding: 4px 10px; font-size: 12px; color: var(--schrift-leise); }
#pool-tabelle, #merge-tabelle { width: 100%; border-collapse: collapse; }
.kandidat-zeile { cursor: pointer; }
.kandidat-zeile.verworfen { opacity: .45; }
/* Der Aufklapper der Kandidaten-Zeile (UI-Ticket 12): ein Knopf mit
   gedrehtem Plus wie am Portal-Aufklapper — die Zeile bleibt Maus-Komfort,
   der Knopf ist der Tastatur-Weg. */
/* td.profil, nicht .profil: die Grundlage setzt .matrix td und gewinnt
   sonst die Padding-Spezifität. */
td.profil { position: relative; padding-left: 32px; }
.aufklapper {
  position: absolute; left: 4px; top: 5px;
  width: 20px; height: 20px; padding: 0;
  display: inline-grid; place-items: center;
  background: none; border: 0; color: var(--schrift-leise);
  font-size: 15px; line-height: 1; cursor: pointer;
  transition: transform 120ms ease;
}
.aufklapper::before { content: "+"; }
.aufklapper:hover:not(:disabled) { filter: none; color: var(--schrift); }
.aufklapper[aria-expanded="true"] { transform: rotate(45deg); }
.einstufung { display: inline-block; width: 28px; height: 28px; line-height: 28px; text-align: center; border-radius: 6px; font-weight: 700; }
.einstufung.A { border: 1px solid var(--kante); background: var(--blatt-still); color: var(--schrift); }
.einstufung.B { border: 1px solid var(--akzent); background: var(--akzent-sanft); color: var(--schrift); }
.einstufung.C { background: var(--gefahr); color: var(--auf-gefahr); }
.einstufung.leer { background: var(--blatt-still); color: var(--schrift-leise); }
/* Die Muss-Kriterien in der Reihenfolge des Dossiers. Das Zeichen setzt die
   Grundlage (✓ ✕ ?), die Bedeutung hängt an der Klasse und nicht am Farbton
   — und jede Zelle trägt ihre Textentsprechung im aria-label. */
.urteile { white-space: nowrap; }
.urteile .urteil { display: inline-block; width: 1.4em; }
.begruendung-zelle { max-width: 340px; }
.kandidat-detail > td { background: var(--grund); }
.kandidat-detail .kriterien { margin-bottom: 10px; max-width: 60rem; }
.kandidat-detail .kriterien .urteil-wort { color: var(--schrift-leise); font-size: 12px; }
.historie { margin-top: 10px; }
.aktionen { white-space: nowrap; }
.aktionen button { margin: 0 4px 4px 0; }
#muss-legende { margin-top: 8px; max-width: 60rem; }
#machbarkeit-bericht {
  background: var(--blatt-still); padding: 12px; border-radius: 6px;
  overflow: auto; max-height: 70vh; font-size: 12px; white-space: pre-wrap;
}
.stellen a.chip, .vorschlaege .chip { text-decoration: none; display: inline-block; margin-bottom: 3px; }
.vorschlaege .chip a { text-decoration: none; font-weight: 700; margin: 0 2px; }

/* --- Quellen & Ingest (Ticket 07) ------------------------------------- */
#secret-banner { background: var(--blatt-still); border: 1px solid var(--kante); }
#secret-banner code { display: block; margin: 6px 0; padding: 6px 8px; background: var(--blatt); border-radius: 4px; font-size: 13px; user-select: all; overflow-wrap: anywhere; }
#deadletter-tabelle .detail { max-width: 320px; overflow-wrap: anywhere; }
#kf-dedup { margin-top: 6px; }

/* --- Journey-Panel (Ticket 10, Form aus UI-Ticket 07: Mockup E) -------- *
 * Spalten nebeneinander, auf schmalen Viewports untereinander (spec/05). */
.journey {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 18px; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--strich);
}
.journey > section > b { display: block; margin-bottom: 8px; }
.journey button { display: block; margin: 6px 0 0; }
/* Termine als Karten: Art und Zeit tragen, der Zustand steht leise darunter
   — und der Absage-Freitext aus dem Portal in voller Schriftfarbe. */
.journey .termin {
  background: var(--blatt-still); border-radius: var(--rundung-klein);
  padding: 8px 10px; margin-bottom: 6px; font-size: 13px;
}
.journey .termin > b { display: block; }
.journey .termin .absage { margin-top: 3px; }
.journey .termin-form { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.journey .termin-form button { margin: 0; align-self: start; }
/* Einwilligungen als Registry-Zeilen: Zweck links, Stand rechts. */
.journey .einwilligung-zeile {
  display: flex; justify-content: space-between; align-items: baseline; gap: 8px;
  padding: 5px 0; border-bottom: 1px solid var(--strich); font-size: 13px;
}
.journey .einwilligung-zeile:last-of-type { border-bottom: 0; }
.journey .einwilligung-stand { text-align: right; flex: none; max-width: 55%; }
/* Der Erfolgszustand der Vermittlung: „gut" ohne eigene Farbe (Ticket 01) —
   ruhige Fläche mit Kante, das Frist-Ende steht im Text. */
.journey .vermittelt-stand {
  background: var(--blatt-still); border: 1px solid var(--kante);
  border-radius: var(--rundung-klein); padding: 8px 10px;
  font-size: 13px; font-weight: 600; margin-top: 6px;
}
.journey .journey-log { margin-top: 10px; max-height: 9em; overflow-y: auto; }

/* Der Fuß jeder Kandidaten-Mail: sichtbar, aber nicht bearbeitbar — er reist
   beim Versand automatisch mit. */
.mail-fussnote {
  margin: .4rem 0 0;
  padding: .5rem .6rem;
  background: var(--blatt-still);
  border-left: 3px solid var(--strich);
  border-radius: 3px;
  font-size: .8rem;
  white-space: pre-wrap;
  color: var(--schrift-leise);
}

/* Laufender Hintergrund-Auftrag (Sync-Lauf, Bestands- und Erst-Import):
   sichtbare Pille mit Puls statt grauem Nebensatz. Die Fläche ist sanft,
   also trägt der Text --schrift (Ticket 01); der Punkt ist Anzeige, kein
   Text. Der Puls teilt sich die Keyframes mit der Chat-Wartezeile. */
.lauf-aktiv { display: inline-flex; align-items: center; gap: 8px;
              background: var(--akzent-sanft); color: var(--schrift);
              border-radius: 999px; padding: 4px 12px;
              font-variant-numeric: tabular-nums; }
.lauf-aktiv::before { content: ""; width: 8px; height: 8px; border-radius: 50%;
                      background: var(--akzent); flex: none;
                      animation: chat-puls 1.2s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .lauf-aktiv::before { animation: none; } }