/* NotarFlow — Verwaltung, Hilfe, Erste-Schritte-Tour (A7).
 *
 * Bewusst eine eigene Datei und nicht ein Anhang an `notarflow.css`: an der
 * Oberfläche arbeiten in dieser Welle vier Sessions gleichzeitig, und `css/`
 * ist ein Konflikt-Hotspot mit genau einem Besitzer. Was hier steht, kollidiert
 * mit niemandem und lässt sich in einem Stück wieder herausnehmen.
 *
 * Die Farbwerte kommen aus den Tokens von `notarflow.css` (`--blau`, `--ink`,
 * `--warn` …). Es werden hier keine neuen Farben erfunden — Brand v2
 * „Klarwasser", 09-brand/BRAND.md.
 */

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

/* Der kleine Fragezeichen-Knopf, der in Überschriften einwandert. Er ist ein
   echter Knopf und kein Zeichen mit Klick-Handler: Tastaturbedienung und
   Vorlesesoftware brauchen das. */
.hilfe-knopf {
  flex: none;
  width: 19px; height: 19px;
  margin-left: 7px;
  border: 1px solid var(--line-stark);
  border-radius: 50%;
  background: none;
  color: var(--ink-soft);
  font-size: 11.5px; font-weight: 600; line-height: 1;
  display: inline-grid; place-items: center;
  padding: 0;
  transition: color 0.12s, border-color 0.12s, background 0.12s;
}
.hilfe-knopf:hover { color: var(--blau); border-color: var(--blau); background: var(--panel); }
.werkzeuge .hilfe-knopf { margin-left: 4px; }
/* In der Leiste ganz nach unten. `.leiste button` setzt dort `border: none` und
   34px — beides muss hier ausdrücklich zurückgeholt werden, sonst gewinnt die
   speziellere Regel aus notarflow.css und der Kreis verschwindet. */
.leiste .hilfe-knopf {
  width: 26px; height: 26px;
  margin: auto auto 4px; font-size: 13px;
  border: 1px solid var(--line-stark);
  border-radius: 50%;
}
.leiste .hilfe-knopf:hover { border-color: var(--blau); background: var(--panel-tief); }

/* --------------------------------------------------------------- Hilfe-Panel */

.hilfe-panel {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: min(430px, 92vw);
  z-index: 70;
  background: var(--paper);
  border-left: 1px solid var(--line-stark);
  box-shadow: -18px 0 46px rgba(11, 34, 57, 0.13);
  display: flex; flex-direction: column;
}
.hilfe-panel[hidden] { display: none; }
.hilfe-kopf {
  padding: 13px 16px; border-bottom: 1px solid var(--line);
  display: flex; align-items: center; gap: 8px;
}
.hilfe-kopf h2 { font-size: 15px; }
.hilfe-kopf .zu {
  margin-left: auto; background: none; border: none; color: var(--ink-soft);
  font-size: 19px; line-height: 1; padding: 2px 5px;
}
.hilfe-zurueck {
  background: none; border: 1px solid var(--line-stark); color: var(--ink-soft);
  font-size: 11.5px; padding: 3px 9px;
}
.hilfe-zurueck:hover { border-color: var(--ink-soft); color: var(--ink); }
.hilfe-koerper { flex: 1; overflow-y: auto; padding: 14px 16px 22px; }
.hilfe-kurz {
  font-size: 13.5px; color: var(--ink); margin: 0 0 12px;
  padding-left: 11px; border-left: 2px solid var(--blau);
}
.hilfe-koerper p { font-size: 12.5px; color: var(--ink-soft); margin: 0 0 10px; }
.hilfe-koerper h3 {
  font-size: 11px; letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--ink-soft); margin: 18px 0 8px; font-family: inherit; font-weight: 600;
}
.hilfe-koerper h3:first-child { margin-top: 0; }

.hilfe-video {
  display: flex; align-items: center; gap: 9px;
  width: 100%; text-align: left; text-decoration: none;
  border: 1px solid var(--line-stark); background: var(--panel);
  color: var(--ink); padding: 9px 11px; margin: 4px 0 12px;
}
.hilfe-video:hover { border-color: var(--blau); }
.hilfe-video svg { width: 17px; height: 17px; flex: none; color: var(--blau); }
.hilfe-video .vt { font-size: 12.5px; font-weight: 600; }
.hilfe-video .vs { font-size: 10.5px; color: var(--ink-soft); display: block; }

.hilfe-liste { display: flex; flex-direction: column; gap: 2px; }
.hilfe-liste button {
  display: block; width: 100%; text-align: left;
  background: none; border: none; border-bottom: 1px solid var(--line);
  padding: 8px 2px; color: var(--ink); font-size: 12.5px;
}
.hilfe-liste button:hover { color: var(--blau); }
.hilfe-liste button span { display: block; font-size: 11px; color: var(--ink-soft); }
.hilfe-fuss {
  border-top: 1px solid var(--line); padding: 10px 16px;
  display: flex; gap: 8px; flex-wrap: wrap;
}
.hilfe-fuss button {
  background: none; border: 1px solid var(--line-stark); color: var(--ink-soft);
  font-size: 11.5px; padding: 6px 11px;
}
.hilfe-fuss button:hover { border-color: var(--blau); color: var(--blau); }
.hilfe-quelle { font-size: 10.5px; color: var(--ink-soft); font-style: italic; margin: 12px 0 0; }

/* Sicherungsstand (Wunsch A3). Die Farbe steuert `einstufung` vom Server —
   nicht diese Datei: „älter als eine Woche" ist eine Betriebsentscheidung und
   keine Gestaltungsfrage. */
.hilfe-sicherung {
  font-size: 12.5px; padding-left: 11px; border-left: 2px solid var(--line-stark);
}
.hilfe-sicherung[data-einstufung="keine"] { border-left-color: var(--warn); color: var(--warn); }
.hilfe-sicherung[data-einstufung="alt"] { border-left-color: var(--warn); }
.hilfe-sicherung[data-einstufung="frisch"] { border-left-color: var(--ok); }

/* ------------------------------------------------------------------- Dialoge */

.nf-dialog {
  position: fixed; inset: 0; z-index: 80;
  background: rgba(11, 34, 57, 0.28);
  display: grid; place-items: center; padding: 20px;
}
.nf-dialog[hidden] { display: none; }
.nf-karte {
  background: var(--paper); border: 1px solid var(--line-stark);
  box-shadow: 0 24px 60px rgba(11, 34, 57, 0.22);
  width: min(660px, 100%); max-height: 88vh;
  display: flex; flex-direction: column;
}
.nf-karte--schmal { width: min(400px, 100%); }
.nf-kopf {
  display: flex; align-items: center; gap: 8px;
  padding: 15px 18px 12px; border-bottom: 1px solid var(--line);
}
.nf-kopf h2 { font-size: 17px; }
.nf-kopf .zu {
  margin-left: auto; background: none; border: none; color: var(--ink-soft);
  font-size: 19px; line-height: 1; padding: 2px 5px;
}
.nf-koerper { padding: 14px 18px 18px; overflow-y: auto; }
.nf-hinweis { font-size: 12px; color: var(--ink-soft); margin: 0 0 14px; }
.nf-fehler {
  font-size: 12px; color: var(--warn); margin: 0 0 12px;
  border-left: 2px solid var(--warn); padding-left: 10px;
}
.nf-erfolg {
  font-size: 12px; color: var(--ok); margin: 0 0 12px;
  border-left: 2px solid var(--ok); padding-left: 10px;
}

.nf-feld { display: flex; flex-direction: column; gap: 4px; margin-bottom: 11px; }
.nf-feld label { font-size: 11.5px; color: var(--ink-soft); }
.nf-feld input, .nf-feld select {
  font: inherit; padding: 8px 10px; border: 1px solid var(--line-stark);
  background: var(--paper); color: var(--ink);
}
.nf-feld input:focus, .nf-feld select:focus {
  outline: none; border-color: var(--blau); box-shadow: 0 0 0 2px rgba(20, 120, 232, 0.16);
}
.nf-feld .nf-mini { font-size: 10.5px; color: var(--ink-soft); }
.nf-feld input[data-fehler="true"] { border-color: var(--warn); }
.nf-zwei { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; }

.nf-rechte { display: flex; flex-direction: column; gap: 5px; margin: 2px 0 12px; }
.nf-rechte label {
  display: flex; align-items: baseline; gap: 8px;
  font-size: 12px; color: var(--ink);
}
.nf-rechte input { margin: 0; }
.nf-rechte .rw { color: var(--ink-soft); font-size: 11px; }

.nf-knopfreihe { display: flex; gap: 8px; align-items: center; margin-top: 4px; }
/* Ohne das strecken sich die Knöpfe über die ganze Breite — „Konto anlegen"
   sähe dann aus wie die Freigabe, und das ist es nicht. */
.nf-knopfreihe .knopf { flex: none; }
.nf-knopfreihe .weit { margin-left: auto; }

/* ------------------------------------------------------- Kontenliste */

.konto-liste { display: flex; flex-direction: column; }
.konto-zeile {
  display: grid; grid-template-columns: 1fr auto; gap: 8px;
  align-items: center; padding: 10px 2px; border-bottom: 1px solid var(--line);
}
.konto-zeile[data-gesperrt="true"] { opacity: 0.62; }
.konto-name { font-size: 13px; font-weight: 600; }
.konto-unter { font-size: 11px; color: var(--ink-soft); }
.konto-marken { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 4px; }
.konto-marke {
  font-size: 10px; letter-spacing: 0.04em; text-transform: uppercase;
  border: 1px solid var(--line-stark); color: var(--ink-soft); padding: 1px 6px;
}
.konto-marke--freigabe { border-color: var(--blau); color: var(--blau); }
.konto-marke--warn { border-color: var(--warn); color: var(--warn); }
.konto-marke--gesperrt { border-color: var(--warn); color: var(--warn); }
/* Demo-Kennwort: die einzige Marke, die gefüllt ist. Sie ist kein Zustand,
   sondern eine offene Tür — und soll sich vom Rest abheben. */
.konto-marke--rot {
  border-color: var(--warn); background: var(--warn); color: #fff;
}
.konto-knoepfe { display: flex; gap: 5px; }
.konto-knoepfe button {
  background: none; border: 1px solid var(--line-stark); color: var(--ink-soft);
  font-size: 11px; padding: 4px 9px; white-space: nowrap;
}
.konto-knoepfe button:hover:not([disabled]) { border-color: var(--blau); color: var(--blau); }
.konto-knoepfe button[disabled] { opacity: 0.4; cursor: not-allowed; }

.verwaltung-reiter { display: flex; gap: 4px; margin-bottom: 12px; }
.verwaltung-reiter button {
  background: none; border: none; border-bottom: 2px solid transparent;
  color: var(--ink-soft); font-size: 12.5px; padding: 5px 9px;
}
.verwaltung-reiter button[aria-pressed="true"] { color: var(--ink); border-bottom-color: var(--blau); }

.zugang-zeile {
  display: grid; grid-template-columns: 78px 1fr; gap: 9px;
  padding: 7px 2px; border-bottom: 1px solid var(--line); font-size: 12px;
}
.zugang-zeit { color: var(--ink-soft); font-size: 11px; }
.zugang-was { font-weight: 600; }
.zugang-wer, .zugang-mehr { color: var(--ink-soft); font-size: 11px; }

/* ------------------------------------------------------------------- Tour */

/* Die Hervorhebung ist ein Rahmen mit einem sehr grossen Schlagschatten nach
   aussen — dadurch wird alles ausserhalb abgedunkelt, ohne dass vier
   Blenden-Elemente ausgerechnet werden müssen, und der hervorgehobene Bereich
   bleibt anklickbar aussehend statt vernebelt. */
.tour { position: fixed; inset: 0; z-index: 90; pointer-events: none; }
.tour[hidden] { display: none; }
.tour-schleier { position: absolute; inset: 0; pointer-events: auto; }
.tour-fenster {
  position: absolute;
  border: 2px solid var(--blau);
  border-radius: 3px;
  box-shadow: 0 0 0 9999px rgba(11, 34, 57, 0.46);
  transition: all 0.28s var(--ease);
  pointer-events: none;
}
.tour-karte {
  position: absolute;
  width: min(330px, 88vw);
  background: var(--paper);
  border: 1px solid var(--line-stark);
  box-shadow: 0 20px 48px rgba(11, 34, 57, 0.28);
  padding: 15px 16px 13px;
  pointer-events: auto;
  transition: top 0.28s var(--ease), left 0.28s var(--ease);
}
.tour-zaehler {
  font-size: 10.5px; letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--blau); margin: 0 0 5px;
}
.tour-karte h2 { font-size: 16px; margin: 0 0 6px; }
.tour-karte p { font-size: 12.5px; color: var(--ink-soft); margin: 0 0 13px; }
.tour-punkte { display: flex; gap: 5px; align-items: center; }
.tour-punkt { width: 6px; height: 6px; border-radius: 50%; background: var(--line-stark); }
.tour-punkt[data-jetzt="true"] { background: var(--blau); }
.tour-fuss { display: flex; align-items: center; gap: 7px; margin-top: 2px; }
.tour-fuss .weit { margin-left: auto; }
.tour-fuss button {
  font-size: 12px; padding: 6px 12px;
  border: 1px solid var(--line-stark); background: none; color: var(--ink-soft);
}
.tour-fuss button:hover { border-color: var(--ink-soft); color: var(--ink); }
.tour-fuss .knopf-blau {
  background: var(--blau); border-color: var(--blau); color: #fff;
}
.tour-fuss .knopf-blau:hover { background: var(--blau-tief); border-color: var(--blau-tief); }

/* Der Knopf in der Kopfzeile neben „Abmelden". */
.kopf-benutzer .nf-kopfknopf {
  background: none; border: none; color: var(--ink-soft);
  font-size: 11px; text-decoration: underline; padding: 0 0 0 9px;
}
.kopf-benutzer .nf-kopfknopf:hover { color: var(--blau); }

/* ---------------------------------------------------------------------------
 * Wissensbasis (B3) — Charakter-Chips, Bestandsliste, Einlese-Lauf.
 *
 * Die Farben tragen hier eine Aussage und sind keine Dekoration: `standard`
 * bekommt gar keinen Chip (der Normalfall braucht kein Etikett), `ungeprueft`
 * ist neutral-grau (noch niemand hat hingesehen), `einzelfall` und `kulanz`
 * sind warnfarben — sie sind Erinnerungen und keine Vorbilder. Wer die Palette
 * aendert, aendert eine Aussage.
 * ------------------------------------------------------------------------ */

.charakter-chip {
  display: inline-block;
  font-size: 10.5px; font-weight: 600; letter-spacing: 0.02em;
  padding: 2px 8px; border-radius: 100px; margin: 0 6px 4px 0;
  border: 1px solid var(--line-stark); color: var(--ink-soft);
  background: var(--panel);
}
.charakter-chip[data-wert="ungeprueft"] { border-color: var(--line-stark); }
.charakter-chip[data-wert="einzelfall"],
.charakter-chip[data-wert="kulanz"] {
  color: var(--warn); border-color: var(--warn);
  background: rgba(180, 84, 10, 0.08);
}

/* Ein Treffer mit Warnschild bekommt zusaetzlich eine Kante — das Label allein
 * uebersieht, wer die Liste ueberfliegt. */
.treffer[data-charakter="einzelfall"],
.treffer[data-charakter="kulanz"] { border-left: 3px solid var(--warn); }
.treffer[data-charakter="ungeprueft"] { border-left: 3px solid var(--line-stark); }

.charakter-leiste { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 12px; }
.charakter-filter {
  background: none; border: 1px solid var(--line-stark); border-radius: 100px;
  padding: 4px 11px; font-size: 11.5px; color: var(--ink-soft);
}
.charakter-filter[aria-pressed="true"] {
  border-color: var(--blau); color: var(--blau-tief); background: var(--panel);
}
.charakter-filter[data-wert="einzelfall"][aria-pressed="true"],
.charakter-filter[data-wert="kulanz"][aria-pressed="true"] {
  border-color: var(--warn); color: var(--warn);
}

.wissen-stapel {
  display: flex; flex-wrap: wrap; gap: 7px; align-items: center;
  padding: 9px 11px; margin: 10px 0; border-radius: 8px;
  background: var(--panel); border: 1px solid var(--line);
}
.wissen-stapel select { font: inherit; font-size: 12.5px; padding: 5px 8px;
  border: 1px solid var(--line-stark); border-radius: 7px; background: var(--paper); }
.wissen-stapel .nf-mini { margin-left: auto; }

.wissen-liste { display: flex; flex-direction: column; gap: 7px; }
.wissen-zeile {
  display: flex; gap: 10px; align-items: flex-start;
  border: 1px solid var(--line); border-radius: 8px; padding: 9px 11px;
}
.wissen-zeile[data-charakter="einzelfall"],
.wissen-zeile[data-charakter="kulanz"] { border-left: 3px solid var(--warn); }
.wissen-zeile[data-charakter="standard"] { border-left: 3px solid var(--ok); }
.wissen-mitte { flex: 1; min-width: 0; }
.wissen-pfad {
  font-size: 12.5px; font-weight: 600; word-break: break-word;
}
.wissen-unter {
  display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center;
  font-size: 11px; color: var(--ink-soft); margin-top: 3px;
}
.wissen-warnung { color: var(--warn); font-size: 11px; }
.wissen-aktionen { display: flex; flex-wrap: wrap; gap: 5px; justify-content: flex-end; }
.wissen-aktionen .knopf { font-size: 11.5px; padding: 4px 9px; }

.wissen-einlesen { display: grid; gap: 4px; margin: 10px 0; }
.wissen-einlesen label { font-size: 11.5px; color: var(--ink-soft); margin-top: 6px; }
.wissen-einlesen input[type="file"] { font-size: 12px; }
.wissen-einlesen input[type="checkbox"] { justify-self: start; }
.wissen-einlesen select { font: inherit; font-size: 12.5px; padding: 5px 8px;
  border: 1px solid var(--line-stark); border-radius: 7px; background: var(--paper); }

.wissen-lauf { margin-top: 14px; }
.wissen-lauf[data-zustand] {
  border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px;
  background: var(--panel);
}
.wissen-lauf[data-zustand="laeuft"] { border-color: var(--blau); }
.wissen-lauf[data-zustand="fertig"] { border-color: var(--ok); }
.wissen-lauf[data-zustand="fehler"] { border-color: var(--warn); }
.wissen-lauf-titel { font-size: 12.5px; font-weight: 600; margin-bottom: 4px; }
.wissen-lauf p { font-size: 11.5px; color: var(--ink-soft); margin: 3px 0; }

/* ------------------------------------------------- Die eine Rückfrage (B8) */

/* `bestaetigung()` aus `js/nf-ui.js` — ein Muster für alles, was sich nicht
   zurücknehmen lässt: ein Gespräch löschen, einen schreibenden Skill freigeben,
   einen Einmal-Link ausstellen. Der Stil steht hier und nicht bei den drei
   Aufrufern, aus demselben Grund, aus dem der Dialog selbst nur einmal existiert:
   drei Rückfragen, die verschieden aussehen, liest man beim dritten Mal nicht
   mehr.

   Angehängt statt eingeflochten — dasselbe Rezept, mit dem in Sprint 2 zwei
   Sessions konfliktfrei in dieselben Sprachkataloge geschrieben haben. */

.nf-bestaetigung .nf-frage { font-size: 13px; line-height: 1.5; margin: 0 0 8px; }
/* Die Folgezeile trägt den Satz, der die Rückfrage rechtfertigt. Sie steht
   ruhig da und nicht rot: eine Warnfarbe an jeder Bestätigung ist nach der
   dritten keine Warnung mehr. */
.nf-bestaetigung .nf-folge {
  border-left: 2px solid var(--line-stark); padding-left: 9px;
  margin: 0 0 12px; line-height: 1.45;
}
.nf-punkte {
  list-style: none; margin: 0 0 10px; padding: 0;
  display: flex; flex-direction: column; gap: 3px;
}
.nf-punkte li {
  font-size: 12px; color: var(--ink); border-left: 2px solid var(--blau);
  padding: 2px 0 2px 9px;
}

/* Fabians Befund vom Deck-Bau (25.08., Brett: „Knopfreihe im
   Bestätigungs-Dialog", bis heute ohne Besitzer) — behoben von D1, Sprint 5.

   Symptom: in der Rückfrage lief die Knopfreihe über. „Abbrechen" nahm die
   volle Kartenbreite, der blaue „Ja, ausführen" stand daneben AUSSERHALB der
   Karte und wurde abgeschnitten. Ausgerechnet der Knopf, um den es beim
   Rückfrage-Prinzip geht — die Rückfrage war damit unbedienbar, und zwar
   sichtbar unbedienbar erst im Screenshot.

   Ursache: `.nf-knopfreihe .knopf { flex: none }` ein paar Zeilen weiter oben.
   Die Zeile ist RICHTIG und bleibt stehen — sie ist der Grund, warum „Konto
   anlegen" in der Verwaltung nicht wie eine Freigabe über die ganze Breite
   geht. Nur in der Bestätigung ist sie falsch: dort stehen zwei Knöpfe mit
   langen Beschriftungen in einer Karte von 400 px, und `flex: none` heisst
   „nicht schrumpfen".

   Deshalb hier scharf gestellt und NUR hier: `flex: 1 1 0` teilt die Breite,
   `min-width: 0` erlaubt das Schrumpfen unter die Textbreite, `flex-wrap`
   fängt den Rest — in einer Sprache mit längeren Wörtern rutscht der blaue
   Knopf unter den grauen, statt neben ihm zu verschwinden. Die Reihenfolge
   bleibt: Abbrechen links, Bestätigung rechts und blau, und der Fokus liegt
   weiter auf dem harmlosen ersten. */
.nf-bestaetigung .nf-knopfreihe { flex-wrap: wrap; gap: 12px; }
.nf-bestaetigung .nf-knopfreihe .knopf {
  flex: 1 1 0; min-width: 0;
  white-space: normal; overflow-wrap: anywhere;
}