/* Neuordnung der Bedienung (docs/plan-neuordnung.md). Bausteine aus src/ui.js
   mit Präfix n-, Werte aus den Token in web/style.css. Vorlage ist die
   Mockup-Welt docs/design/neuordnung/welt/quelle.html. */

/* ------------------------------------------------------------ Zeilen */
.n-h2 { font-size: 13px; font-weight: 600; color: var(--text-still); text-transform: uppercase; letter-spacing: .06em; margin: 26px 0 8px; }
.n-h2:first-child { margin-top: 0; }
.n-satz { color: var(--text-leise); margin: -2px 0 10px; font-size: 13.5px; }
.n-liste { border: 1px solid var(--linie); border-radius: var(--r-l); overflow: hidden; background: var(--grund); }
.n-zeile { display: flex; align-items: center; gap: var(--a-3); padding: 11px 14px; min-height: 56px; border-top: 1px solid var(--linie);
  text-decoration: none; color: var(--text); width: 100%; text-align: left; background: none; font: inherit; box-sizing: border-box; }
.n-liste > .n-zeile:first-child, .n-liste > :first-child .n-zeile { border-top: 0; }
a.n-zeile:hover { background: var(--flaeche); color: var(--text); }
/* Die Textspalte behält mindestens 40 % der Zeile: ein langer Wert rechts
   („unbekannt (Docker nicht erreichbar)“) bricht selbst um, statt Name und
   Unterzeile buchstabenweise zu zerdrücken. */
.n-zeile .n-text { min-width: 40%; flex: 1; display: flex; flex-direction: column; }
.n-titel { font-weight: 550; font-size: 14.5px; overflow-wrap: anywhere; }
.n-art { font-weight: 400; color: var(--text-still); font-size: 12.5px; margin-left: 6px; display: inline-block; }
.n-sub { color: var(--text-leise); font-size: 13px; overflow-wrap: anywhere; }
.n-sub .warn { color: var(--wartet); }
.n-wert { color: var(--text); font-size: 13.5px; text-align: right; flex: 0 1 auto; min-width: 0; max-width: 50%; overflow-wrap: break-word; font-weight: 500; }
.n-wert small { display: block; font-size: 12px; font-weight: 400; color: var(--wartet); }
.n-wert small.leise { color: var(--text-still); }
.n-wert.leise { color: var(--text-leise); font-weight: 400; }
.n-pfeil { color: var(--text-still); flex: none; }
.n-zeile.still { color: var(--text-leise); }
.n-zeile.n-neu { color: var(--akzent); font-weight: 500; min-height: 48px; }
.n-plus { width: 36px; display: grid; place-items: center; font-size: 20px; flex: none; }
.n-logo { width: 36px; height: 36px; border-radius: 9px; border: 1px solid var(--linie); background: #fff; display: grid; place-items: center; flex: none; overflow: hidden; }
.n-logo img { width: 22px; height: 22px; }
.n-logo.ini { background: oklch(40% 0.03 260); color: #fff; font-weight: 700; border: 0; }
.n-avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--flaeche-2); display: grid; place-items: center; font-weight: 600; color: var(--text-leise); flex: none; font-size: 14px; }
.n-avatar.firma { border-radius: 9px; background: var(--akzent-hell); color: var(--akzent-dunkel); font-size: 11px; }
.n-agentsym { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; color: #fff; font-weight: 700; flex: none;
  background: oklch(52% 0.13 var(--ton, 164)); }
.n-agentsym.schnell { background: var(--flaeche-2); color: var(--akzent); }
/* Fall 573: Zeichen des Dienstes, das Projekt oder die App klein unten rechts. */
.n-dienstsym { position: relative; flex: none; width: 36px; height: 36px; }
.n-dienstsym-ziel { position: absolute; right: -5px; bottom: -5px; width: 18px; height: 18px; border-radius: 6px; display: grid; place-items: center;
  font-size: 10px; font-weight: 700; line-height: 1; color: #fff; background: oklch(52% 0.13 var(--ton, 164)); box-shadow: 0 0 0 2px var(--grund); }
.n-dienstsym-ziel.n-appziel { background: linear-gradient(160deg, oklch(64% 0.14 var(--ton, 164)), oklch(50% 0.15 var(--ton, 164))); }
.n-dienstsym-ziel.schnell { background: var(--flaeche-2); color: var(--akzent); }

/* ------------------------------------------------------------ Punkt, Tag, Kürzel */
.n-punkt { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-leise); }
.n-punkt::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--ruht); flex: none; }
.n-punkt.laeuft::before { background: var(--laeuft); }
.n-punkt.wartet::before { background: var(--wartet); }
.n-punkt.fehler::before { background: var(--fehler); }
.n-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.n-tag { font-size: 11.5px; padding: 0 7px; line-height: 18px; border-radius: 999px; background: var(--akzent-hell); color: var(--akzent-dunkel); border: 0; }
button.n-tag { cursor: pointer; font: inherit; font-size: 11.5px; }
button.n-tag[aria-pressed="true"] { background: var(--akzent); color: #fff; }

/* ------------------------------------------------------------ Segment, Schalter */
.n-segment { display: flex; background: var(--flaeche-2); border-radius: 10px; padding: 3px; gap: 2px; margin: 0; }
.n-segment button { flex: 1; border: 0; background: transparent; padding: 7px 10px; border-radius: 8px; cursor: pointer; font: inherit; font-size: 13.5px; color: var(--text-leise); min-height: 36px; }
.n-segment button[aria-pressed="true"] { background: var(--grund); color: var(--text); font-weight: 550; box-shadow: 0 1px 3px oklch(0% 0 0 / .1); }
.n-segment button:disabled { cursor: default; opacity: .55; }
.n-schalter-form { margin: 0; display: inline-flex; }
/* „Verbindung prüfen“ (Blueprint v2): ein Knopf in einer Zeile oder neben „Neu verbinden“, ohne eigene Zeile. */
.n-pruefen { margin: 0; display: inline-flex; flex: none; }
.n-knopf-klein { min-height: 30px; padding: 5px 11px; font-size: 13px; }
/* Zuordnen zu einem Unternehmen: Stufe und Knopf nebeneinander. */
.n-zuordnen { gap: 6px; align-items: center; }
.n-zuordnen select { min-height: 30px; font-size: 13px; padding: 3px 6px; border-radius: 8px; border: 1px solid var(--linie-stark); background: var(--grund); color: var(--text); }
.n-zuordnen-knoepfe { display: inline-flex; gap: 6px; align-items: center; flex: none; }
/* Schmal: Stufe und Knopf rutschen unter Name und Satz, statt die Zeile zu sprengen. */
@media (max-width: 560px) {
  .n-zeile:has(> .n-zuordnen), .n-zeile:has(> .n-zuordnen-knoepfe) { flex-wrap: wrap; }
  .n-zeile > .n-zuordnen, .n-zeile > .n-zuordnen-knoepfe { flex: 1 1 100%; justify-content: flex-end; }
}
/* min-height: 0, sonst streckt die allgemeine Knopfregel (34px) den Schalter und der Knopf sitzt oben. */
.n-schalter { width: 44px; height: 26px; min-height: 0; border-radius: 999px; border: 0; background: var(--linie-stark); position: relative; cursor: pointer; flex: none; transition: background var(--zeit); padding: 0; }
.n-schalter::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px oklch(0% 0 0 / .25); transition: transform var(--zeit); }
.n-schalter[aria-checked="true"] { background: var(--laeuft); }
.n-schalter[aria-checked="true"]::after { transform: translateX(18px); }
.n-schalter:disabled { opacity: .45; cursor: default; }

/* ------------------------------------------------------------ Hinweise im Blatt */
.n-wirkt { padding: 10px 12px; border-radius: var(--r-m); background: var(--flaeche); font-size: 13.5px; }
.n-wirkt.ab { background: color-mix(in oklch, var(--wartet) 12%, white); }
.n-wirkt b { font-weight: 550; }
.n-trenn { border: 0; border-top: 1px solid var(--linie); margin: 4px 0; }
.n-feldzeile { display: flex; align-items: center; gap: 12px; }
.n-feldzeile .n-text { flex: 1; }
.n-knopf-breit { width: 100%; min-height: 44px; justify-content: center; }
.n-hinweis { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--r-l); background: var(--flaeche); border: 1px solid var(--linie); margin-bottom: 12px; }
.n-hinweis.akzent { background: var(--akzent-hell); border-color: var(--akzent-linie); }
.n-hinweis.warn { background: color-mix(in oklch, var(--wartet) 10%, white); border-color: color-mix(in oklch, var(--wartet) 30%, white); }
.n-hinweis .n-text { flex: 1; min-width: 0; }
.n-hinweis .n-text b { font-weight: 550; display: block; }
.n-hinweis .n-text span { color: var(--text-leise); font-size: 13px; }

/* ------------------------------------------------------------ Statuszeile */
.n-statuszeile { display: flex; align-items: flex-start; gap: 10px; padding: 8px 16px; font-size: 13px; margin: calc(-1 * var(--a-5)) calc(-1 * var(--a-6)) var(--a-4);
  background: color-mix(in oklch, var(--wartet) 10%, white); border-bottom: 1px solid color-mix(in oklch, var(--wartet) 25%, white); }
.n-statuszeile .n-punkt { color: var(--text); }
.n-statuszeile .n-zu { margin-left: auto; border: 0; background: none; cursor: pointer; color: var(--text-leise); font-size: 16px; }

/* ------------------------------------------------------------ Kacheln */
.n-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 22px 14px; }
.n-kachel { display: flex; flex-direction: column; align-items: center; gap: 8px; text-decoration: none; color: var(--text); text-align: center; padding: 6px; border-radius: var(--r-l); }
.n-kachel:hover { background: var(--flaeche); color: var(--text); }
.n-appsym { width: 64px; height: 64px; border-radius: 16px; display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 26px; position: relative;
  background: linear-gradient(160deg, oklch(64% 0.14 var(--ton, 164)), oklch(50% 0.15 var(--ton, 164))); box-shadow: 0 2px 6px oklch(0% 0 0 / .12); }
.n-kachelname { font-size: 13.5px; font-weight: 500; }
.n-kachelunter { font-size: 12px; color: var(--text-still); margin-top: -6px; }

/* ------------------------------------------------------------ Matrix */
.n-matrix { border-collapse: separate; border-spacing: 0; width: 100%; border: 1px solid var(--linie); border-radius: var(--r-l); overflow: hidden; }
.n-matrix th, .n-matrix td { padding: 10px 12px; border-top: 1px solid var(--linie); text-align: left; font-size: 13.5px; vertical-align: top; }
.n-matrix thead th { border-top: 0; background: var(--flaeche); font-weight: 550; font-size: 12.5px; color: var(--text-leise); vertical-align: bottom; }
.n-matrix thead th small { display: block; font-weight: 400; color: var(--text-still); }
.n-matrix tbody th { font-weight: 550; }
.n-matrix tbody th .n-sub { display: block; font-weight: 400; }
.n-zelle { display: block; padding: 4px 8px; margin: -4px -8px; border-radius: 6px; color: var(--text); text-decoration: none; }
a.n-zelle:hover { background: var(--akzent-hell); color: var(--text); }
.n-zelle.leer { color: var(--text-still); }
.n-zelle small { display: block; color: var(--wartet); font-size: 11.5px; }
.n-zelle small.leise { color: var(--text-still); }
.n-handyliste { display: none; }

/* ------------------------------------------------------------ Blatt (Sheet) */
dialog.n-blatt { position: fixed; inset: 0 0 0 auto; margin: 0; width: 440px; max-width: 100%; height: 100%; max-height: 100%; border: 0; padding: 0;
  background: var(--grund); box-shadow: var(--schatten-dialog); display: flex; flex-direction: column; }
dialog.n-blatt:not([open]) { display: none; }
dialog.n-blatt::backdrop { background: oklch(20% 0.02 275 / .28); }
dialog.n-blatt[open] { animation: n-rein .2s ease-out; }
/* Vorgehen zeigen (Fälle 487, 489): solange das Fenster läuft, füllt das Blatt
   den Bildschirm und zeigt nur das Fenster. */
dialog.n-blatt.n-vollbild { inset: 0; width: 100%; height: 100%; max-height: 100%; border-radius: 0; }
dialog.n-blatt.n-vollbild .n-griff { display: none; }
.n-vollbild .n-blatt-inhalt > :not(form[data-vorgehen]) { display: none; }
.n-vollbild form[data-vorgehen] > :not([data-livebild]) { display: none; }
.n-blatt-kopf { display: flex; align-items: center; gap: 10px; padding: 16px 18px 10px; }
/* Fall 450: ein langer Titel ohne Leerzeichen (eine Adresse) machte das Blatt
   breiter als den Bildschirm; der Inhalt rutschte links heraus. Höchstens zwei
   Zeilen, der Rest mit Auslassung, und nichts im Blatt wird breiter als es. */
.n-blatt-kopf h2 { margin: 0; font-size: 17px; flex: 1; line-height: 1.3; min-width: 0; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
.n-blatt-kopf button { flex: none; }
.n-blatt-rumpf { min-width: 0; overflow-x: hidden; overflow-wrap: anywhere; }
/* Zeilen einer Tabelle der Datenbank (Einstellungen › Datenbank): Wörter nicht
   mitten im Wort brechen; ist die Tabelle zu breit, scrollt sie (.scroll). */
.n-db-zeilen th, .n-db-zeilen td { overflow-wrap: normal; word-break: normal; vertical-align: top; }
.n-db-zeilen td { min-width: 7ch; }
/* Das × ist ein Kreis, überall (Chatkopf-Schliff 13.10.2026): die globale
   Knopfregel gab ihm 34 px Mindesthöhe (30×34, oval) und am Handy 44×44.
   Sichtbar 32 px, die Tippfläche von 44 px trägt ::after. Der Fokusring ist
   ein box-shadow, damit er dem Kreis folgt. */
.n-blatt-kopf [data-blatt-zu] { position: relative; flex: none; display: grid; place-items: center; box-sizing: border-box;
  width: 32px; height: 32px; min-width: 0; min-height: 0; aspect-ratio: 1; padding: 0; border: 0; border-radius: 50%;
  background: var(--flaeche-2); color: var(--text-leise); font: inherit; font-size: 18px; line-height: 1; cursor: pointer;
  transition: background-color .14s ease-out, color .14s ease-out; }
.n-blatt-kopf [data-blatt-zu]:hover { background: color-mix(in oklch, var(--text) 10%, var(--flaeche-2)); border-color: transparent; color: var(--text); }
.n-blatt-kopf [data-blatt-zu]:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--grund), 0 0 0 4px var(--akzent); }
.n-blatt-kopf [data-blatt-zu]::after { content: ""; position: absolute; inset: -6px; }
/* Der Titel nimmt beim Öffnen den Fokus (web/blatt.js), ohne Ring. */
#n-blatt-titel:focus { outline: none; }
.n-blatt-rumpf { padding: 4px 18px 22px; overflow: auto; flex: 1; }
.n-blatt-inhalt { display: grid; gap: 14px; align-content: start; }
dialog .n-nur-seite { display: none; }
.n-blatt-titel { font-size: var(--s-titel); margin: 0; }
.n-zurueck { color: var(--text-leise); text-decoration: none; font-size: 13px; }
.n-griff { display: none; }
.n-laden { display: grid; place-items: center; padding: 40px 0; color: var(--text-leise); }

/* Rückmeldung nach dem Speichern */
.n-toast { position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); background: oklch(24% .012 275); color: #fff; border-radius: 12px; padding: 10px 14px;
  display: flex; gap: 14px; align-items: center; z-index: 1000; font-size: 13.5px; box-shadow: var(--schatten-schwebend); max-width: calc(100% - 32px); animation: n-hoch .2s ease-out; }
.n-toast[hidden] { display: none; }
.n-toast button { background: none; border: 0; color: oklch(84% 0.07 164); cursor: pointer; font-weight: 600; font: inherit; }

@keyframes n-rein { from { transform: translateX(24px); opacity: .6; } }
@keyframes n-hoch { from { transform: translate(-50%, 10px); opacity: 0; } }
@keyframes n-unten { from { transform: translateY(40px); opacity: .5; } }
@media (prefers-reduced-motion: reduce) { dialog.n-blatt[open], .n-toast { animation: none; } .n-schalter, .n-schalter::after { transition: none; } }

/* ------------------------------------------------------------ Handy */
@media (max-width: 860px) {
  dialog.n-blatt { inset: auto 0 0 0; width: 100%; height: auto; max-height: 88%; border-radius: var(--r-xl) var(--r-xl) 0 0; }
  dialog.n-blatt[open] { animation: n-unten .22s ease-out; }
  .n-griff { display: block; width: 38px; height: 5px; border-radius: 3px; background: var(--linie-stark); margin: 8px auto 0; }
  .n-zeile { min-height: 60px; }
  .n-matrix { display: none; }
  .n-handyliste { display: grid; gap: 14px; }
  .n-raster { grid-template-columns: repeat(3, 1fr); gap: 18px 6px; }
  .n-hinweis { flex-direction: column; align-items: stretch; }
  .n-statuszeile { margin: 0 0 var(--a-3); }
  .n-toast { bottom: 84px; }
}

/* ------------------------------------------------------------ Seitenkopf der neuen Seiten */
.kopf-neu { display: flex; align-items: flex-start; gap: var(--a-3); margin: 0 0 var(--a-4); }
.kopf-neu h1 { font-size: var(--s-titel); line-height: 1.25; margin: 0; letter-spacing: -.01em; }
.kopf-neu .unter { color: var(--text-leise); margin: 4px 0 0; }
.kopf-neu .agent-beschreibung { color: var(--text); }
.kopf-neu .aktion { margin-left: auto; flex: none; }
.kopf-neu .n-logo { width: 44px; height: 44px; }
.n-details { margin-top: 18px; }
.n-details > summary { cursor: pointer; color: var(--text-leise); font-size: 13px; }
.n-dl { display: grid; grid-template-columns: max-content 1fr; gap: 4px 14px; font-size: 13px; margin: 10px 0; }
.n-dl dt { color: var(--text-leise); }
.n-dl dd { margin: 0; font-family: var(--mono); font-size: 12.5px; overflow-wrap: anywhere; }
.n-zeile.n-gefahr .n-titel { color: var(--fehler); }
.n-form, .n-form-zeile { margin: 0; }
.n-form-zeile + .n-form-zeile .n-zeile { border-top: 1px solid var(--linie); }
button.n-zeile { cursor: pointer; border: 0; }
/* style.css färbt jeden Knopf beim Überfahren weiß; auf der hellen Zeile wäre
   die Beschriftung dann unsichtbar (Fall 439). */
button.n-zeile:hover:not(:disabled) { background: var(--flaeche); color: var(--text); border-color: transparent; }
button.n-zeile:disabled:hover { background: transparent; color: inherit; }
.n-logo .dz { width: 36px; height: 36px; display: block; }
.n-logo .dz-logo { display: grid; place-items: center; }
.kopf-neu .n-logo .dz { width: 44px; height: 44px; }
@media (max-width: 860px) {
  .kopf-neu { flex-wrap: wrap; }
  .kopf-neu .aktion { margin-left: 0; width: 100%; }
  .kopf-neu .aktion .knopf { width: 100%; justify-content: center; min-height: 44px; }
}
.n-feldzeile .n-text { display: flex; flex-direction: column; min-width: 0; }
.n-feldzeile select { flex: none; width: auto; }
a.n-link, a.n-link:hover { text-decoration: none; color: inherit; }
a.n-link .n-titel { color: var(--text); }
.n-pfeil-link { color: var(--text-still); text-decoration: none; font-size: 20px; padding: 0 4px; }
.n-agentsym.gross { width: 44px; height: 44px; font-size: 18px; border-radius: 12px; }

/* ------------------------------------------------------------ App-Kacheln auf /apps */
.n-appkachel { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.n-kachelwege { font-size: 12px; color: var(--text-leise); text-align: center; }
.n-kachelwege a { color: var(--text-leise); }
.n-kachelwege a:only-child { white-space: nowrap; }
.n-zustandpunkt { position: absolute; right: -3px; bottom: -3px; width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--grund); background: var(--ruht); }
.n-zustandpunkt.laeuft { background: var(--laeuft); }
.n-zustandpunkt.wartet { background: var(--wartet); }
.n-zustandpunkt.fehler { background: var(--fehler); }
.n-plakette { position: absolute; right: -6px; top: -6px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: var(--fehler); color: #fff; font-size: 13px; font-weight: 700; line-height: 20px; text-align: center; border: 2px solid var(--grund); }

/* ------------------------------------------------------------ Freigabeseite als Auswahlliste (L11) */
.n-appkachel { width: 100%; min-width: 0; }

/* ------------------------------------------------------------ Reiter „Apps“ im Agenten */
.n-appkarte { margin: 0 0 22px; }
.n-appkopf { display: flex; align-items: center; gap: 14px; margin-bottom: 10px; }
.n-appkopf .n-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.n-appkopf .n-text b { font-size: 17px; }
.n-appsym.klein { width: 48px; height: 48px; border-radius: 12px; font-size: 20px; flex: none; }
.n-appkopf .n-text .n-sub { font-size: 13px; }
.n-appkopf .knopf { flex: none; }
.n-appumbenennen { flex: none; font-size: 14px; color: var(--akzent-dunkel); text-decoration: none; }
.n-appumbenennen:hover { text-decoration: underline; }
@media (max-width: 520px) {
  .n-appkopf { flex-wrap: wrap; gap: 10px 14px; }
  .n-appkopf .n-text { flex-basis: calc(100% - 62px); }
  .n-appumbenennen { margin-left: 62px; }
  .n-appkopf .knopf { margin-left: auto; }
  .n-appkarte .n-wert { white-space: normal; max-width: 38%; text-align: right; font-size: 12.5px; }
}
.n-appkarte .n-liste + .n-liste { margin-top: 10px; }

/* ------------------------------------------------------------ „Heute“ über der Chatliste (L10) */
.z-heute { flex: none; margin: 0 12px 10px; padding: 10px 12px; border: 1px solid var(--linie); border-radius: 12px; background: var(--grund); }
.z-heute h2 { margin: 0 0 6px; font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--text-leise); }
.z-heute-zeile { display: flex; gap: 10px; align-items: flex-start; padding: 7px 0; text-decoration: none; color: var(--text); }
.z-heute-zeile + .z-heute-zeile { border-top: 1px solid var(--linie); }
/* Der Text ist das zweite Kind; dahinter kann das × stehen (Fall 525). */
.z-heute-zeile > span:nth-child(2) { display: flex; flex-direction: column; min-width: 0; flex: 1; font-size: 13px; }
.z-heute-zeile > span:nth-child(2) b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.z-heute-zeile > span:nth-child(2) span { color: var(--text-leise); }
.z-heute-zeichen { flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 700; background: var(--akzent-hell); color: var(--akzent); }
/* Fall 525: das × zum Ausblenden, rechts in der Zeile, erst beim Überfahren deutlich. */
.z-heute-x { flex: none; align-self: center; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; color: var(--text-still); font-size: 16px; line-height: 1; opacity: .55; }
.z-heute-zeile:hover .z-heute-x, .z-heute-x:focus-visible { opacity: 1; }
.z-heute-x:hover { background: var(--flaeche-2); color: var(--text); }
.z-heute-zeile:hover b { text-decoration: underline; }

/* ------------------------------------------------------------ Schnellchats in der Chatliste, Konten im Chatkopf */
a.z-schnellzeile { display: block; color: inherit; text-decoration: none; }
a.z-schnellzeile .z-projektname { color: var(--akzent); }

/* Chatliste: Filter als Segmente (Alle / Meine / Warten auf mich) */
.z-schnellfilter { display: flex; gap: 4px; padding: 0 16px 10px; flex: none; }
.z-schnellfilter button { flex: 1; }
.zentral-seite .n-statuszeile { margin: 0; }

/* Neuer Agent: Name und Vorlage untereinander, beschriftet */
.agent-anlegen { display: flex; flex-direction: column; gap: 16px; margin-top: 4px; }
.agent-anlegen .reihe { display: flex; align-items: center; gap: 6px; font-weight: 400; }
.agent-anlegen .reihe input { flex: 1; min-width: 0; }
.agent-anlegen select { width: 100%; font-weight: 400; }
.agent-anlegen .n-satz { margin: 0; }
/* Ein Satz unter einem Feld (Mockup: .satz unter dem Eingabefeld). */
.n-feld .n-satz-feld { font-weight: 400; margin: 0; }
/* Neuer Agent, Schritt 2: gleich bei Claude und ChatGPT anmelden */
.aa-anmelden { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }
.aa-anmelden .n-liste { margin: 0; }
.aa-zeile .n-text { flex: 1; min-width: 0; }
.aa-zeile .aa-form { display: flex; align-items: center; gap: 6px; margin: 0; flex-wrap: nowrap; justify-content: flex-end; }
.aa-zeile .aa-konto { max-width: 170px; min-width: 0; }
.aa-anmelden .klein { margin: 0; }
@media (max-width: 520px) {
  .aa-zeile { flex-wrap: wrap; }
  .aa-zeile .aa-form { width: 100%; justify-content: flex-start; flex-wrap: wrap; }
  .aa-zeile .aa-konto { max-width: none; flex: 1; }
}

/* Zahl wartender Chats an „Chats“ in der Leiste und unten am Handy */
.nav-zahl { margin-left: auto; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--wartet); color: #fff;
  font-size: 11px; font-weight: 700; line-height: 18px; text-align: center; }
.leiste-schmal .nav .nav-zahl { position: absolute; margin: 0; transform: translate(10px, -10px); }
.hnav a { position: relative; }
.hnav .nav-zahl { position: absolute; top: 2px; left: 50%; margin-left: 6px; }

/* Neuer Chat: Schritt 1 „Mit wem?“ und die zugeklappten Optionen */
/* Fall 445: die Liste scrollt selbst, wie das Formular daneben; sonst waren
   die unteren Agenten am Handy nicht erreichbar. */
.z-mitwem { padding: 20px; max-width: 640px; flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; width: 100%; align-self: center; }
.z-mitwem h3 { margin: 0 0 12px; font-size: 17px; }
.z-optionen { border: 1px solid var(--linie); border-radius: 10px; padding: 0; margin: 4px 0; }
.z-optionen > summary { display: flex; align-items: center; gap: 10px; padding: 10px 12px; cursor: pointer; list-style: none; font-size: 13px; }
.z-optionen > summary::-webkit-details-marker { display: none; }
.z-optionen-satz { flex: 1; min-width: 0; color: var(--text); }
.z-optionen-aendern { color: var(--akzent); font-weight: 600; white-space: nowrap; }
.z-optionen[open] > summary .z-optionen-aendern { visibility: hidden; }
.z-optionen[open] { padding-bottom: 8px; }
.z-optionen > :not(summary) { margin-left: 12px; margin-right: 12px; }

/* Chatkopf: Optionen-Pille (Konten · Zugang · Modell), öffnet das ⋯-Menü mit allen Angaben */
/* Chatkopf-Schliff 13.10.2026: 28 px hoch wie das Schild daneben, gleiche
   Innenabstände links und rechts, ein kleiner Winkel nach unten zeigt, dass
   hier etwas zur Wahl steht. */
.z-optionenpille { display: inline-flex; align-items: center; gap: 6px; box-sizing: border-box; height: 28px; min-height: 0; min-width: 0; padding: 0 10px; margin: 0 4px;
  border: 1px solid var(--linie-stark); border-radius: var(--r-voll); background: var(--grund); color: var(--text-leise);
  font: inherit; font-size: 12.5px; font-weight: 500; line-height: 1; cursor: pointer;
  transition: background-color .14s ease-out, border-color .14s ease-out, color .14s ease-out; }
.z-optionenpille::after { content: ""; flex: none; width: 5px; height: 5px; margin: -3px 1px 0 1px; border: solid currentColor; border-width: 0 1.5px 1.5px 0;
  transform: rotate(45deg); opacity: .75; }
.z-optionenpille:hover { background: var(--flaeche-2); border-color: var(--linie-stark); color: var(--text); }
.z-optionenpille:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--grund), 0 0 0 4px var(--akzent); }
.z-pillentext { white-space: nowrap; }
.z-menu .z-menukontext:not([hidden]) { display: block; padding-bottom: 4px; margin-bottom: 4px; border-bottom: 1px solid var(--linie); }
.z-menu > div:has(.z-menukontext:not([hidden])) { width: 320px; }

/* Chatverlauf: „Diese Mail würde ich senden“ und „Dafür fehlt ein Recht“ */
.wkzBestaetigung .mailKopf { font-weight: 600; color: var(--text); }
.mailVorschau { border: 1px solid var(--linie); border-radius: 8px; background: var(--grund); padding: 8px 10px; margin: 4px 0 8px; font-size: 13px; }
.mailVorschau .mailZeile { color: var(--text-leise); }
.mailVorschau .mailText { white-space: pre-wrap; font-family: inherit; margin: 6px 0 0; max-height: 240px; overflow: auto; color: var(--text); }

/* Beschriftete Felder in Blättern; eingebettete Blöcke der App-Seite */
.n-feld { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 600; }
.n-feld input, .n-feld textarea { width: 100%; font-weight: 400; }
/* Einstellungen › Vorgänge (docs/plan-vorgaenge.md): ein Kasten je Profilfeld. */
.n-feldsatz { border: 1px solid var(--linie); border-radius: var(--r-s); padding: 10px 12px 12px; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.n-feldsatz legend { font-size: 13px; font-weight: 600; padding: 0 4px; }
.n-feld select { width: 100%; font-weight: 400; }
.n-check { display: flex; align-items: center; gap: 8px; font-size: 13px; }
/* „Wie arbeitet das Projekt?“ (src/vorgaenge-html.js wahlHtml): Radioknöpfe als Karten und Chips, Umschalten über :has(). */
.vg-wahl { display: flex; flex-direction: column; gap: 8px; }
.vg-karte { display: flex; gap: 12px; align-items: flex-start; border: 1px solid var(--linie-stark); border-radius: var(--r-m); background: var(--grund); padding: 12px; cursor: pointer; }
.vg-karte:hover { border-color: var(--akzent-linie, var(--linie-stark)); }
.vg-karte input { position: absolute; opacity: 0; pointer-events: none; }
.vg-karte:has(input:checked) { border-color: var(--akzent); background: var(--akzent-hell); box-shadow: inset 0 0 0 1px var(--akzent); }
.vg-karte:has(input:focus-visible) { outline: 2px solid var(--akzent); outline-offset: 2px; }
.vg-zeichen { flex: none; width: 32px; height: 32px; border-radius: var(--r-m); background: var(--flaeche-2); display: grid; place-items: center; color: var(--akzent); }
.vg-karte:has(input:checked) .vg-zeichen { background: var(--grund); }
.vg-text b { display: block; font-size: 14px; font-weight: 600; }
.vg-text span { display: block; font-size: 12.5px; color: var(--text-leise); line-height: 1.45; margin-top: 2px; }
.vg-zusatz { display: none; flex-direction: column; gap: 8px; border-top: 1px solid var(--linie); padding-top: 12px; margin-top: 4px; }
.vg-wahl:has(input[value="vorgaenge"]:checked) .vg-zusatz { display: flex; }
.vg-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.vg-chip { cursor: pointer; }
.vg-chip input { position: absolute; opacity: 0; pointer-events: none; }
.vg-chip span { display: inline-block; border: 1px solid var(--linie-stark); background: var(--grund); border-radius: 999px; padding: 4px 11px; font-size: 13px; }
.vg-chip:has(input:checked) span { background: var(--akzent); border-color: var(--akzent); color: #fff; }
.vg-chip:has(input:focus-visible) span { outline: 2px solid var(--akzent); outline-offset: 2px; }
.vg-eigen { display: none; grid-template-columns: 1fr 1fr 90px; gap: 8px; }
.vg-wahl:has(input[value="eigen"]:checked) .vg-eigen { display: grid; }
.vg-felder { display: none; list-style: none; margin: 0; padding: 0; flex-wrap: wrap; gap: 6px; }
.vg-felder li { font-size: 12.5px; background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--r-s); padding: 3px 8px; }
.vg-felder li i { font-style: normal; color: var(--text-still); margin-left: 4px; }
.vg-felder .vg-leer { color: var(--text-leise); }
.vg-wahl:has(input[value="vorgang"]:checked) .vg-felder[data-art="vorgang"],
.vg-wahl:has(input[value="schadenfall"]:checked) .vg-felder[data-art="schadenfall"],
.vg-wahl:has(input[value="akte"]:checked) .vg-felder[data-art="akte"],
.vg-wahl:has(input[value="objekt"]:checked) .vg-felder[data-art="objekt"],
.vg-wahl:has(input[value="mandat"]:checked) .vg-felder[data-art="mandat"] { display: flex; }
@media (max-width: 520px) { .vg-eigen { grid-template-columns: 1fr 1fr; } }
.n-blatt-bloecke > * { margin: 0 0 16px; }
.n-blatt-bloecke .block { border: 0; padding: 0; box-shadow: none; }
.n-blatt-bloecke fieldset { border: 0; padding: 0; margin: 0 0 14px; min-width: 0; }
.n-blatt-bloecke legend { padding: 0; margin-bottom: 6px; font-size: 13px; font-weight: 600; color: var(--text); }
.n-blatt-bloecke label.zeile { display: flex; align-items: center; gap: 10px; padding: 6px 0; margin: 0; flex-wrap: nowrap; }
.n-blatt-bloecke label.zeile input { flex: none; margin: 0; }
.n-blatt-bloecke ul.liste { list-style: none; padding: 0; margin: 0 0 12px; }
.n-blatt-bloecke ul.liste li.zeile { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--linie); flex-wrap: wrap; }
.n-blatt-bloecke ul.liste li.zeile form { margin: 0; }

/* Chatliste wie im Mockup: Symbol links, Zustand als eigene Zeile */
.z-chatzeile.z-mitsym { position: relative; padding-left: 58px; }
.z-zeilensym { position: absolute; left: 12px; top: 12px; width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center;
  background: var(--akzent); color: #fff; font-weight: 700; font-size: 14px; }
.z-zeilensym.schnell { background: var(--flaeche-2); color: var(--akzent); }
.z-zeilenzustand { display: flex; align-items: center; gap: 5px; font-size: 12px; color: var(--text-leise); margin-top: 2px; }
.z-zeilenzustand svg { flex: none; }
.z-logo { display: block; border-radius: 3px; }
.z-optionen-logos { display: inline-flex; gap: 3px; flex: none; }
.z-optionen-logos:empty { display: none; }
.wkzLogo { display: inline-block; vertical-align: -2px; margin-right: 4px; border-radius: 3px; }
.z-chatzeile.z-mitsym > .z-zeilensym { display: grid; place-items: center; line-height: 1; }
.z-chatzeile.z-mitsym > .z-zeilensym svg { display: block; }

/* Blätter in /chats: Teilen (Häkchen rechts) */
.n-schalterzeile { display: flex; align-items: center; gap: 12px; cursor: pointer; }
.n-schalterzeile .n-text { flex: 1; }
.n-schalterzeile input { width: 18px; height: 18px; accent-color: var(--akzent); flex: none; }
.n-blatt-rumpf .n-h2 { margin: 16px 0 6px; }

/* Vereinfachung, Etappe 1: Bausteine (src/ui.js nStufe, nFrist, nPersonenwahl, nKontenwahl, Rückfrage) */
.n-satz-blatt { margin: 0; }
.n-frist .n-satz { margin: 0 0 6px; }
.n-form-zeile .n-zeile .n-pfeil { margin-left: 2px; }
dialog.n-dialog { border: 0; padding: 0; background: transparent; margin: auto; width: fit-content; max-width: calc(100% - 32px); box-shadow: none; border-radius: 18px; overflow: visible; }
dialog.n-dialog::backdrop { background: oklch(20% 0.02 275 / .28); }
.n-rueckfrage-box { width: 340px; max-width: 100%; box-sizing: border-box; background: var(--grund); border-radius: 18px; box-shadow: var(--schatten-dialog);
  padding: 22px 20px 16px; display: grid; gap: 12px; text-align: center; animation: n-aufpop .18s ease-out; }
.n-rueckfrage-box .n-symbole { display: flex; justify-content: center; align-items: center; gap: 10px; color: var(--text-still); }
.n-rueckfrage-box h3 { margin: 0; font-size: 17px; line-height: 1.35; }
.n-rueckfrage-box p { margin: 0; color: var(--text-leise); font-size: 13.5px; }
.n-rueckfrage-box .n-knoepfe { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 4px; }
.n-rueckfrage-box .n-knoepfe .knopf { justify-content: center; min-height: 40px; }
.n-rueckfrage-box .n-fuss { font-size: 12px; }
@keyframes n-aufpop { from { transform: scale(.94); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .n-rueckfrage-box { animation: none; } }
/* Ein Kästchen, das wie ein Schalter aussieht: Formulare, die ohnehin
   Kästchen lesen (Neuer Chat, „Konten in diesem Chat“), bleiben unverändert. */
input.n-schalter-kaestchen { appearance: none; -webkit-appearance: none; margin: 0; width: 44px; height: 26px; min-height: 0; border-radius: 999px; border: 0;
  background: var(--linie-stark); position: relative; cursor: pointer; flex: none; transition: background var(--zeit); }
input.n-schalter-kaestchen::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff;
  box-shadow: 0 1px 3px oklch(0% 0 0 / .25); transition: transform var(--zeit); }
input.n-schalter-kaestchen:checked { background: var(--laeuft); }
input.n-schalter-kaestchen:checked::after { transform: translateX(18px); }
input.n-schalter-kaestchen:disabled { opacity: .45; cursor: default; }
input.n-schalter-kaestchen:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { input.n-schalter-kaestchen, input.n-schalter-kaestchen::after { transition: none; } }
#z-systeme .n-liste { margin: 0 0 8px; }
#z-systeme label.n-zeile { margin: 0; cursor: pointer; font-weight: 400; }
#z-systeme label.n-zeile.aus { cursor: default; }
#z-systeme .n-satz { margin: 0 0 8px; }
#z-systeme .z-systeme-fuss { margin: 8px 0 0; }

/* Navigation wie im Mockup (`zeichne()`): Unternehmen und Betreiber abgesetzt
   unter den fünf Zielen, unten die Profilzeile mit Kreis, Name und „Profil“. */
.nav .navgruppe:first-child { margin-bottom: 14px; }
.nav .navgruppe-verwaltung { border-top: 1px solid var(--linie); padding-top: 10px; }
.konto-kreis { width: 36px; height: 36px; border: 0; background: var(--flaeche-2); color: var(--text-leise); font-size: 14px; font-weight: 600; }
.konto-text b { font-weight: 550; }
@media (max-width: 860px) {
  .hnav > a { flex: 1; }
}
/* „Mehr“ und „Für Techniker“ wie im Mockup (details.technik): Linie darüber, Pfeil statt Dreieck. */
details.n-details { border-top: 1px solid var(--linie); padding-top: 10px; }
details.n-details > summary { list-style: none; display: flex; align-items: center; gap: 6px; }
details.n-details > summary::-webkit-details-marker { display: none; }
details.n-details > summary::before { content: "›"; display: inline-block; font-size: 16px; transition: transform var(--zeit); }
details.n-details[open] > summary::before { transform: rotate(90deg); }
.n-blatt-inhalt details.n-details { margin-top: 0; }
.n-blatt-inhalt details.n-details .n-form { margin-top: 8px; }

/* Karte „hier fehlt etwas“ im Chat (Etappe 2, Mockup `fehltKarte`) */
.wkzMitKarte { display: flex; flex-direction: column; gap: 8px; margin: 0 0 14px; }
.wkzMitKarte > .msg { margin-bottom: 0; }
.n-chatkarte { max-width: 420px; border: 1px solid oklch(80% 0.08 72); background: var(--grund); border-radius: 16px; padding: 14px;
  display: grid; gap: 10px; box-shadow: var(--schatten-panel); box-sizing: border-box; }
.n-chatkarte-kopf { display: flex; align-items: center; gap: 10px; }
.n-chatkarte-kopf b { font-weight: 600; font-size: 14.5px; line-height: 1.35; overflow-wrap: anywhere; }
.n-chatkarte-satz { margin: 0; color: var(--text-leise); font-size: 13.5px; }
/* Regelkarte (docs/plan-vorgaenge.md, Etappe 3): Vorschläge für das Wissen der Rolle, je Regel entscheiden. */
.n-regelkarte { border-color: var(--akzent-linie); max-width: 520px; }
.n-regeln { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
.n-regel { border: 1px solid var(--linie); border-radius: var(--r-m); padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; }
.n-regel.entschieden { background: var(--flaeche); }
.n-regel-titel { font-size: 13.5px; }
.n-regel-text { margin: 0; font-size: 13.5px; color: var(--text); white-space: pre-wrap; }
.n-regel-feld { width: 100%; font: inherit; font-size: 13.5px; border: 1px solid var(--linie-stark); border-radius: var(--r-s); padding: 6px 8px; }
.n-regel-stand { margin: 0; font-size: 12.5px; color: var(--text-leise); }
.n-regel-stand.ja { color: var(--laeuft); }
.n-regel-fehler { margin: 0; font-size: 12.5px; color: var(--fehler); }
/* Karte „Weiter im Agenten“: der Schnellchat schlägt die Übergabe vor. */
.n-chatkarte-uebergabe { border-color: var(--akzent); max-width: 520px; }
/* Die Wahlkarte (B5) darf nicht breiter werden als der Verlauf, auch mit der
   Liste daneben: eine Spalte, die schrumpfen kann, Knöpfe brechen um. */
.n-chatkarte-uebergabe { grid-template-columns: minmax(0, 1fr); min-width: 0; }
.n-chatkarte-uebergabe .n-kartenknopf { flex-wrap: wrap; align-items: center; }
.n-uebergabe-auftrag { width: 100%; box-sizing: border-box; min-height: 96px; resize: vertical; font: inherit; font-size: 14px; line-height: 1.45;
  padding: 10px 12px; border: 1px solid var(--linie); border-radius: 10px; background: var(--flaeche, var(--grund)); color: inherit; }
.n-uebergabe-auftrag:focus { outline: 2px solid var(--akzent); outline-offset: 1px; }
.n-chatkarte-uebergabe a.textKnopf { justify-self: start; color: var(--akzent); font-size: 13.5px; }
/* Karte „Auftrag an ein Projekt“ (docs/plan-orchestrator.md). */
.n-chatkarte-auftrag { max-width: 520px; border-color: var(--linie-stark); }
.n-chatkarte-auftrag.zustand-wartet { border-color: var(--akzent); }
.n-chatkarte-auftrag.zustand-fehler { border-color: var(--fehler); }
.n-auftrag-titel { display: grid; min-width: 0; flex: 1; }
.n-auftrag-projekt { font-size: 12.5px; color: var(--text-leise); }
.n-auftrag-chip { flex: none; font-size: 12px; padding: 2px 9px; border-radius: 999px; border: 1px solid var(--linie-stark); color: var(--text-leise); white-space: nowrap; }
.zustand-wartet .n-auftrag-chip { border-color: var(--akzent); color: var(--akzent); }
.zustand-fertig .n-auftrag-chip { border-color: var(--ok, var(--akzent)); color: var(--ok, var(--akzent)); }
.zustand-fehler .n-auftrag-chip { border-color: var(--fehler); color: var(--fehler); }
.n-auftrag-ergebnis > summary { cursor: pointer; font-size: 13.5px; color: var(--akzent); }
.n-auftrag-ergebnis-inhalt { margin-top: 8px; font-size: 14px; max-height: 360px; overflow: auto; }
.n-chatkarte-auftrag .n-kartenknopf { flex-wrap: wrap; align-items: center; }
.n-chatkarte-auftrag a.knopf { text-decoration: none; display: inline-flex; align-items: center; }
.n-kartenknopf { display: flex; gap: 8px; }
.n-kartenknopf .knopf { min-height: 36px; }
.n-kartenknopf .n-kartenknopf-haupt { flex: 1; justify-content: center; }
/* Abnahmetest Runde 3 (Handy 390 px): der Hauptknopf der Wahl- und Auftragskarte wird nie
   schmaler als sein Text; passt der zweite Knopf nicht daneben, rückt er in die nächste Zeile. */
.n-chatkarte-uebergabe .n-kartenknopf .n-kartenknopf-haupt,
.n-chatkarte-auftrag .n-kartenknopf .n-kartenknopf-haupt { flex: 1 0 auto; max-width: 100%; white-space: normal; }
.n-systemzeile { align-self: center; margin: 4px auto 14px; max-width: 560px; width: fit-content; border: 1px dashed var(--linie-stark); border-radius: 16px;
  color: var(--text-leise); font-size: 12.5px; padding: 6px 12px; text-align: center; box-sizing: border-box; }
.n-chatblatt-hinweis { font-size: 12px; color: var(--text-still); text-align: center; margin: 0; }
.n-chatblatt { display: grid; gap: 14px; align-content: start; }
.n-chatblatt .n-segment { margin: 0; }
.n-chatblatt .n-segment button { white-space: normal; line-height: 1.25; }
.n-chatblatt .n-trenn { margin: 0; }
.n-livebild { border: 1px solid var(--linie); border-radius: var(--r-m); background: var(--flaeche); aspect-ratio: 16 / 10; display: grid; place-items: center;
  color: var(--text-still); font-size: 12.5px; overflow: hidden; }
.n-livebild.laeuft { aspect-ratio: auto; display: block; background: #fff; }
.n-livebild.laeuft iframe { display: block; width: 100%; border: 0; }
.n-livebild.fertig { aspect-ratio: auto; padding: 18px; color: var(--text); font-weight: 550; }
.n-livebild-start { display: grid; gap: 10px; justify-items: center; text-align: center; padding: 16px; }
.n-livebild-start p { margin: 0; }
.n-eingabefeld { width: 100%; box-sizing: border-box; border: 1px solid var(--linie-stark); border-radius: var(--r-m); padding: 10px 12px; font: inherit; min-height: 96px; resize: vertical; }
.z-heute-bitte > span:last-child { flex: 1; }
.z-heute-bitte > span:last-child b { white-space: normal; }
.z-heute-bitte .z-heute-zeichen { background: var(--akzent); color: #fff; }
.z-heute-zeile > span:last-child .z-heute-knoepfe { display: flex; flex-direction: row; gap: 6px; justify-content: flex-end; margin-top: 6px; color: inherit; }
.z-heute-knoepfe form { margin: 0; }
.z-heute-knoepfe .knopf { min-height: 30px; padding: 4px 12px; font-size: 13px; }

/* ------------------------------------------------------------ Vereinfachung, Etappe 3: Konten
   Werte aus dem Mockup (docs/design/vereinfachung/welt/quelle.html: .dienste,
   .dienst, .warte, .kreisel, .erfolg, .haken, .qr, .schritt, .listesteuer, .suche). */
.n-dienste { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); grid-auto-rows: 1fr; gap: 8px; }
.n-dienst { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 14px 8px; border: 1px solid var(--linie); border-radius: var(--r-l);
  background: var(--grund); cursor: pointer; font-size: 13px; color: var(--text); text-decoration: none; text-align: center; min-width: 0; overflow-wrap: break-word; hyphens: manual; }
.n-dienst:hover { border-color: var(--akzent-linie); background: var(--akzent-hell); color: var(--text); }
.n-dienst .n-logo { width: 42px; height: 42px; }
.n-dienst .n-logo .dz { width: 42px; height: 42px; }
.n-warte { display: grid; place-items: center; gap: 14px; padding: 40px 0; color: var(--text-leise); text-align: center; }
.n-warte[hidden] { display: none; }
.n-kreisel { width: 28px; height: 28px; border-radius: 50%; border: 3px solid var(--akzent-hell); border-top-color: var(--akzent); animation: n-dreh .8s linear infinite; }
.n-kreisel.klein { width: 14px; height: 14px; border-width: 2px; }
.n-kreisel[hidden] { display: none; }
.n-erfolg { display: grid; justify-items: center; gap: 8px; padding: 10px 0 4px; text-align: center; }
.n-erfolg h3 { margin: 4px 0 0; font-size: 16px; }
.n-erfolg .n-satz { margin: 0; }
.n-haken { width: 54px; height: 54px; border-radius: 50%; background: var(--laeuft); color: #fff; display: grid; place-items: center; font-size: 28px; animation: n-aufpop .3s ease-out; }
@keyframes n-aufpop { from { transform: scale(.6); opacity: 0; } }
.n-qr { display: grid; place-items: center; min-height: 190px; }
.n-qr img { width: 190px; height: 190px; border: 10px solid #fff; outline: 1px solid var(--linie); border-radius: 6px; background: #fff; }
.n-qr img[hidden] { display: none; }
.n-qr .n-warte { padding: 20px 0; }
.n-schritte { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.n-schritte li { display: flex; gap: 10px; align-items: center; font-size: 13.5px; }
/* Ablauf-Blatt (Runde 10): je Schritt das Zeichen des Dienstes wie in den Kontozeilen,
   der Auslöser als Uhr, Globus oder Blitz, sonst ein neutraler Punkt. */
.n-schrittsym { width: 26px; height: 26px; border-radius: 7px; display: grid; place-items: center; flex: none; overflow: hidden; }
.n-schrittsym-dienst { border: 1px solid var(--linie); background: #fff; }
.n-schrittsym-dienst .dz { width: 26px; height: 26px; display: block; }
.n-schrittsym-dienst svg.dz { width: 26px; height: 26px; }
.n-schrittsym-dienst .dz-logo { display: grid; place-items: center; }
.n-schrittsym-dienst .dz-logo img { width: 16px; height: 16px; }
.n-schrittsym-blitz, .n-schrittsym-uhr, .n-schrittsym-globus { background: var(--akzent-hell); color: var(--akzent-dunkel); }
.n-schrittsym-neutral { background: var(--flaeche); color: var(--text-leise); border: 1px solid var(--linie); }
.n-schritttext { min-width: 0; overflow-wrap: anywhere; }
.n-nr { width: 22px; height: 22px; border-radius: 50%; background: var(--akzent-hell); color: var(--akzent-dunkel); display: grid; place-items: center; font-size: 12px; font-weight: 600; flex: none; }
.n-listesteuer { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 4px 0 10px; }
.n-suche { flex: 1; min-width: 140px; border: 1px solid var(--linie-stark); border-radius: 10px; padding: 8px 12px; font: inherit; font-size: 13.5px; background: var(--grund); }
.n-matrix-rahmen { overflow-x: auto; }
.n-matrix [hidden], .n-handyliste [hidden] { display: none; }
.n-liste-abstand { margin-top: 22px; }
.n-liste-abstand-klein { margin-top: 8px; }
.n-teilechips { margin: -4px 0 12px; }
.n-verlaufsatz { margin-top: 10px; }
.n-satz-fuss { margin-top: 12px; }
.n-wirkt .n-knopf-wirkt { margin-top: 8px; }
.n-feld select { width: 100%; font-weight: 400; border: 1px solid var(--linie-stark); border-radius: var(--r-m); padding: 8px 10px; font: inherit; font-size: 13.5px; background: var(--grund); }
.n-feld input { box-sizing: border-box; border: 1px solid var(--linie-stark); border-radius: var(--r-m); padding: 10px 12px; font: inherit; font-weight: 400; }
.n-blatt-inhalt .n-form { display: grid; gap: 12px; }
.n-blatt-inhalt details.n-details .n-form { margin-top: 10px; }
.n-abo-schritt { display: grid; gap: 10px; }
.n-abo-schritt[hidden] { display: none; }
.n-livebild[hidden] { display: none; }
.n-zeile .knopf { flex: none; }
@media (max-width: 860px) { .n-dienste { grid-template-columns: repeat(3, 1fr); } }
@media (prefers-reduced-motion: reduce) { .n-kreisel, .n-haken { animation: none; } }
@keyframes n-dreh { to { transform: rotate(360deg); } }
/* Eingabefeld mit Platzhalter (Mockup .eingabefeld) */
.n-eingabe { width: 100%; box-sizing: border-box; border: 1px solid var(--linie-stark); border-radius: var(--r-m); padding: 10px 12px; font: inherit; background: var(--grund); }
.n-eingabe[hidden] { display: none; }
a.n-schalter { display: inline-block; vertical-align: middle; }
@media (max-width: 520px) { .n-zeile .n-wert { max-width: 45%; text-align: right; } .n-wert .n-punkt { white-space: normal; } }

/* ------------------------------------------------------------ Vereinfachung, Etappe 4: Agent
   Werte aus dem Mockup (quelle.html: details.technik dl, .schluessel, .schritt,
   .lauf, .pillen). */
.n-zeilenknopf { margin: 0; flex: none; }
.n-zeilenknopf .knopf { min-height: 32px; padding: 4px 12px; font-size: 13px; }
/* Mail-Eingang im Reiter Abläufe (docs/plan-mail-eingang.md) */
.n-postfach .n-titel { word-break: break-all; font-family: var(--mono); font-size: 13.5px; }
.n-postfach-aktionen { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.n-postfach-aktionen > .knopf { min-height: 32px; padding: 4px 12px; font-size: 13px; }
.n-postfach-filter { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; align-items: center; }
.n-postfach-filter input[type="text"] { flex: 1 1 220px; min-width: 0; box-sizing: border-box; border: 1px solid var(--linie-stark); border-radius: var(--r-m); padding: 6px 10px; font: inherit; font-size: 13px; background: var(--grund); }
.n-postfach-filter .knopf { min-height: 32px; padding: 4px 12px; font-size: 13px; }
.n-eingaenge { margin: 6px 0 0; padding-left: 18px; font-size: 12.5px; }
.n-eingaenge li { margin: 2px 0; overflow-wrap: anywhere; }
.n-zeile.n-gefahr .n-titel { color: var(--fehler); }
/* Rückfrage auf der Zeile (window.nZeileBestaetigen, Fall 460). */
.n-zeile.n-bestaetigen { background: color-mix(in oklch, var(--fehler) 7%, transparent); }
.n-zeile.n-mono .n-titel { font-family: var(--mono); font-size: 13px; font-weight: 500; overflow-wrap: anywhere; }
details.n-technik { margin-top: 18px; }
details.n-technik > summary { cursor: pointer; color: var(--text-leise); font-size: 13px; }
details.n-technik .n-h2:first-of-type { margin-top: 12px; }
details.n-technik code { font-family: var(--mono); font-size: 12px; overflow-wrap: anywhere; }
.n-fakten { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 4px 14px; font-size: 13px; margin: 16px 0 0; }
.n-fakten dt { color: var(--text-leise); }
.n-fakten dd { margin: 0; font-family: var(--mono); font-size: 12.5px; overflow-wrap: anywhere; }
.n-schluessel { width: 100%; box-sizing: border-box; font-family: var(--mono); font-size: 12.5px; background: var(--flaeche); border: 1px solid var(--linie);
  border-radius: var(--r-m); padding: 8px 10px; color: var(--text); }
.n-zeile .n-segment { flex: none; margin: 0; }
@media (max-width: 520px) { .n-zeile:has(> .n-segment) { flex-wrap: wrap; } .n-zeile > .n-segment { width: 100%; } }
.n-zeile-link { display: flex; align-items: center; gap: var(--a-3); flex: 1; min-width: 0; color: inherit; text-decoration: none; align-self: stretch; }
.n-zeile-link:hover .n-titel { color: var(--akzent-dunkel); }
.n-laeufe { display: grid; }
/* Fall 506: frühere Browser-Läufe als anklickbare Zeilen, mit Knopf zum Zeigen. */
.n-lauf-zeile { cursor: pointer; }
.n-lauf-zeile:hover, .n-lauf-zeile:focus-visible { background: var(--flaeche); }
.n-lauf-zeile .n-lauf-zeigen { flex: none; min-height: 0; padding: 4px 9px; font-size: 12px; white-space: nowrap; }
.n-lauf { display: flex; gap: 10px; align-items: baseline; font-size: 13px; padding: 6px 0; border-top: 1px solid var(--linie); }
.n-lauf:first-child { border-top: 0; }
.n-lauf .n-punkt { flex: none; min-width: 110px; }
.n-schritte li.n-tief { padding-left: calc(var(--tiefe) * 16px); }
.n-knopfstapel { display: grid; gap: 8px; margin-top: 4px; }
.n-knopfstapel .n-form { margin: 0; }
.n-pillen { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
.n-pille { border: 1px solid var(--linie-stark); background: var(--grund); border-radius: 999px; padding: 4px 12px; font-size: 13px; color: var(--text); text-decoration: none; }
.n-pille:hover { background: var(--flaeche-2); color: var(--text); }
.n-pille[aria-current="page"] { background: var(--akzent); border-color: var(--akzent); color: #fff; }

/* ------------------------------------------------------------ Etappe 5: Apps */
/* Die App-Erlaubnis steht in der Mitte (Mockup `appDialog`), ohne Kopf des Blatts. */
dialog.n-blatt.n-mitte { inset: 0; margin: auto; width: 360px; max-width: calc(100% - 32px); height: fit-content; max-height: calc(100% - 32px);
  background: transparent; box-shadow: none; border-radius: 18px; animation: none; }
dialog.n-blatt.n-mitte .n-griff, dialog.n-blatt.n-mitte .n-blatt-kopf { display: none; }
/* Rumpf mit Basis auto statt flex: 1 (Basis 0): sonst rechnet Safari
   `height: fit-content` des Dialogs auf fast null, das Blatt erscheint als
   winziger Streifen mit Scrollbalken. Schrumpfen darf er weiter (max-height). */
dialog.n-blatt.n-mitte .n-blatt-rumpf { padding: 0; overflow: auto; flex: 0 1 auto; }
.n-erlauben { width: 360px; max-width: 100%; margin: 0 auto; }
.n-erlauben .n-liste { text-align: left; margin: 0; }
.n-erlauben .n-liste .n-zeile { min-height: 48px; cursor: pointer; }
.n-erlauben .n-liste .n-titel { font-size: 13.5px; overflow-wrap: anywhere; }
.n-erlauben .n-klein { font-size: 12.5px; }
.n-erlauben .n-liste + .n-klein { text-align: left; margin-top: -6px; font-size: 12px; }
.n-erlauben .n-tag { font-size: 13px; }
label.n-zeile { cursor: pointer; }
label.n-zeile input.n-schalter-kaestchen { flex: none; }
/* Kopf der App als Zeile (Mockup `agentApps`), Umbenennen und Öffnen rechts. */
.n-appkopfliste { margin-bottom: 14px; }
.n-appkopfliste .n-appkopf { margin: 0; }
.n-appkopfliste .n-titel { font-size: 15px; }
.n-satz-nach { margin: 8px 0 0; }
.n-frage { margin: 0 0 6px; color: var(--text); }
.n-h3 { font-size: 14px; margin: 18px 0 6px; }
.n-code { background: var(--flaeche); border-radius: var(--r-m); padding: 10px 12px; overflow-x: auto; font-size: 12px; margin: 0 0 10px; white-space: pre; }
details.n-technik .n-feldzeile { margin-top: 14px; }
details.n-technik .n-satz { margin: 10px 0; }
.n-appraster { margin: 4px 0 26px; }
.n-apps-fuss { margin-top: 10px; }
@media (max-width: 860px) {
  .n-appkopfliste .n-appkopf { flex-wrap: wrap; }
}

/* ------------------------------------------------------------ Vereinfachung, Etappe 6: Unternehmen
   Werte aus dem Mockup (quelle.html: Kopf mit Firmen-Avatar 44px, .titel 450
   bei stillen Zeilen, .pillen). */
.n-avatar.firma.gross { width: 44px; height: 44px; font-size: 14px; }
.n-titel-leicht { font-weight: 450; }
.n-satz-unter { margin: 8px 0 0; }
.n-liste button.n-zeile { border-radius: 0; }
.n-segment-eigen { flex: 0 0 auto; white-space: nowrap; display: grid; place-items: center; padding: 7px 10px; border-radius: 8px; font-size: 13.5px; color: var(--akzent);
  text-decoration: none; min-height: 36px; box-sizing: border-box; text-align: center; }
.n-segment-eigen:hover { background: var(--grund); color: var(--akzent-dunkel); }
.n-tagwahl { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.n-tagwahl label { margin: 0; display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border: 1px solid var(--linie-stark); border-radius: 999px; font-size: 13px; cursor: pointer; }
.n-tagwahl input { margin: 0; accent-color: var(--akzent); }
.n-vorschau { white-space: pre-wrap; font-family: inherit; font-size: 13px; background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--r-m);
  padding: 10px 12px; max-height: 280px; overflow: auto; margin: 0; }
.n-zeile.n-zeile-rahmen { border: 1px solid var(--linie); border-radius: var(--r-l); }
.n-protokollsteuer { display: flex; flex-wrap: wrap; gap: 0 18px; }
.n-zeile .n-sub.n-klein { font-size: 12px; color: var(--text-still); }
.n-blatt-inhalt > .knopf.n-knopf-breit, .n-blatt-inhalt > .knopf[data-kopieren] { justify-content: center; }
.n-liste label.n-zeile { margin: 0; font-weight: 400; cursor: pointer; }
@media (max-width: 520px) { .n-blatt-inhalt .n-segment button { white-space: normal; line-height: 1.2; padding: 6px 4px; min-width: 0; } .n-segment-eigen { padding: 6px 6px; } }

/* ------------------------------------------------------------ Vereinfachung, Etappe 7: Profil, Nutzung, Anmelden
   Werte aus dem Mockup (quelle.html: .aussen, .karte-a, .marke, .glyphe,
   .eingabefeld, .nutzbalken, .qr). */
.n-balken { height: 6px; border-radius: 3px; background: var(--flaeche-2); overflow: hidden; margin: 6px 0 2px; }
.n-balken > span { display: block; height: 100%; background: var(--akzent); }
.n-balken.warn > span { background: var(--wartet); }
.n-balken.voll > span { background: var(--fehler); }
.n-wert.stark { font-weight: 600; }
.n-satz-abstand { margin-top: 14px; }
.n-profil-fuss { margin-top: 18px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; font-size: 13px; color: var(--text-still); }
.n-profil-fuss form { margin: 0; }
.n-profil-fuss .n-recht a { color: var(--text-still); }
.n-feld-einzeln { width: 100%; box-sizing: border-box; border: 1px solid var(--linie-stark); border-radius: var(--r-m); padding: 10px 12px; font: inherit; background: var(--grund); }
.n-form-stapel { display: grid; gap: 12px; margin: 0; }
.n-qr-bild { display: grid; place-items: center; }
.n-qr-bild svg { width: 168px; height: 168px; border: 10px solid #fff; outline: 1px solid var(--linie); border-radius: 6px; background: #fff; }
/* Die Wiederherstellungscodes: groß genug zum Abschreiben, in einer Spalte. */
.n-codes { font-family: var(--mono); font-size: 15px; letter-spacing: .06em; background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--r-m);
  padding: 12px 14px; margin: 0; line-height: 1.8; white-space: pre; user-select: all; overflow-x: auto; }
.n-geheimnis { font-family: var(--mono); font-size: 12.5px; }
button.n-zeile.n-fb[hidden] { display: none; }
.n-suchzeile { display: flex; gap: 8px; margin: 0 0 12px; }
.n-suchzeile .n-suche { flex: 1; }
details.n-zeile { display: block; padding: 0; min-height: 0; }
details.n-zeile > summary { list-style: none; display: flex; align-items: center; gap: var(--a-3); padding: 11px 14px; min-height: 56px; box-sizing: border-box; cursor: pointer; }
details.n-zeile > summary::-webkit-details-marker { display: none; }
details.n-zeile > summary .n-pfeil { transition: transform var(--zeit); }
details.n-zeile[open] > summary .n-pfeil { transform: rotate(90deg); }
details.n-zeile > summary:hover { background: var(--flaeche); }
details.n-zeile > .n-antwort { padding: 0 14px 14px; margin: 0; color: var(--text-leise); font-size: 13.5px; }
.n-wissen-text { font-size: 14px; line-height: 1.6; }
.n-browser-rahmen { width: 100%; height: min(80vh, 760px); border: 0; display: block; }
.n-livebild.n-browser { aspect-ratio: auto; min-height: 240px; display: block; background: var(--grund); overflow: hidden; }

/* Anmelden, Einladung und ihre Fehlerseiten: eine Karte ohne Seitenleiste. */
body.n-aussen-seite { margin: 0; background: var(--flaeche); }
body.n-aussen-seite main.n-aussen { width: 100%; max-width: none; margin: 0; }
.n-aussen { min-height: 100dvh; display: grid; grid-template-columns: minmax(0, 1fr); place-items: center; align-content: center; gap: 14px;
  background: var(--flaeche); padding: 24px 16px; box-sizing: border-box; }
.n-karte-a { width: min(380px, 100%); justify-self: center; background: var(--grund); border: 1px solid var(--linie); border-radius: 20px; padding: 28px 24px;
  display: grid; gap: 14px; box-shadow: var(--schatten-panel); box-sizing: border-box; }
.n-karte-a h1 { font-size: 22px; margin: 0; line-height: 1.3; }
.n-karte-a p { margin: 0; }
.n-karte-a form { display: grid; gap: 14px; margin: 0; }
.n-karte-a .knopf { width: 100%; min-height: 44px; justify-content: center; margin: 0; box-sizing: border-box; }
.n-karte-a .knopf.text { min-height: 36px; color: var(--akzent); font-weight: 500; }
.n-karte-a .knopf.text:hover { background: var(--akzent-hell); color: var(--akzent-dunkel); }
.n-karte-a .n-hinweis, .n-karte-a .hinweis { margin: 0; }
.n-marke { display: flex; align-items: center; gap: 9px; font-weight: 600; font-size: 15px; color: var(--marke, #1f4d3a); text-decoration: none; }
.n-marke small { display: block; font-weight: 400; color: var(--text-still); font-size: 12px; margin-top: -2px; }
.n-glyphe { width: 28px; height: 28px; display: flex; flex: none; }
.n-karte-fuss { text-align: center; color: var(--text-leise); font-size: 13.5px; }
.n-karte-fuss a { color: var(--akzent); }
.n-einladt { display: flex; gap: 10px; align-items: center; }
.n-ms-knopf .ic { flex: none; }
details.n-passwort-weg > summary { list-style: none; }
details.n-passwort-weg > summary::-webkit-details-marker { display: none; }
details.n-passwort-weg[open] > summary { display: none; }
details.n-passwort-weg > div { display: grid; gap: 14px; }
.n-zurueck-oben { display: inline-block; margin-bottom: 10px; }
.n-zurueck-oben:hover { color: var(--text); }
/* Die Profilzeile unten in der Seitenleiste führt direkt ins Profil (Mockup `.ich`):
   Hilfe, Rechtstexte und Abmelden stehen dort. */
.konto-menue > a.konto-zeile { display: flex; gap: 10px; align-items: center; padding: 10px 8px; border-radius: var(--r-m); color: var(--text); text-decoration: none; }
.konto-menue > a.konto-zeile:hover { background: var(--flaeche-2); }
.konto-menue > a.konto-zeile[aria-current] { background: var(--akzent-hell); }
.leiste-schmal .konto-menue > a.konto-zeile { justify-content: center; padding: 8px 0; }
/* Zeilen als Knopf (auch in einem Formular) tragen dieselbe Trennlinie wie Links. */
.n-liste > button.n-zeile, .n-liste > form > button.n-zeile { border-top: 1px solid var(--linie); }
.n-liste > button.n-zeile:first-child, .n-liste > form:first-child > button.n-zeile { border-top: 0; }
.n-liste > form { margin: 0; }
.n-aussen-fuss { margin: 0; text-align: center; font-size: 12.5px; color: var(--text-still); }
.n-aussen-fuss a { color: var(--text-still); }
.n-sub .n-klein { font-size: 12px; color: var(--text-still); }

/* Etappe 8, Betreiber: Zeilen als Knopf (Ansicht als, Wechseln) brechen um
   wie jede andere Zeile; style.css hält Knopftext sonst in einer Zeile. */
button.n-zeile { white-space: normal; }
button.n-zeile[aria-current="true"] { background: var(--flaeche); }
/* Fakten in Worten statt Technik (Blatt eines Agenten, EU-Guthaben). */
.n-fakten.weich dd { font-family: inherit; font-size: 13px; }

/* Handy: der Kreis oben rechts ist ein Link ins Profil (Nacharbeit Etappe 7). */
.hprofil { display: none; }
@media (max-width: 860px) {
  .hkopf .hprofil { display: grid; place-items: center; flex: none; min-height: 44px; min-width: 44px; text-decoration: none; }
  .hkopf .hprofil .konto-kreis { width: 32px; height: 32px; font-size: 13px; }
  .hkopf .hprofil[aria-current="page"] .konto-kreis { background: var(--akzent-hell); color: var(--akzent); }
}
/* Zeilen, die nur am Handy fehlen würden (Abläufe, Zeichnungen im Profil). */
@media (min-width: 861px) { .n-zeile.n-nur-handy { display: none; } }

/* Probe-Entwurf im Betreiberbereich (src/betreiber-html.js `blattProbe`). */
.n-probe-fall { white-space: pre-wrap; }
.n-probe-knoepfe { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; }
.n-probe-offen { margin: 0 0 12px; padding-left: 1.2em; font-size: 14px; }
.n-probe-offen li { margin: 2px 0; }

/* B9: die Kette im Blatt „Betrieb: Vorgaben“ als drei Kästchen. */
.n-kette { display: flex; gap: 4px; align-items: stretch; margin: 10px 0 14px; font-size: 12.5px; }
.n-kette > div { flex: 1 1 0; min-width: 0; overflow-wrap: anywhere; border: 1px solid var(--linie); border-radius: 8px; padding: 6px 8px; background: var(--flaeche); }
.n-kette > div b { display: block; font-size: 12.5px; }
.n-kette > div span { color: var(--text-leise); }
.n-kette-pfeil { align-self: center; color: var(--text-still); }
.n-vgzeile { display: grid; gap: 6px; margin: 0 0 12px; }
.n-vgzeile .n-titel { display: block; font-weight: 550; }
.n-vgzeile .n-sub { display: block; font-size: 12.5px; color: var(--text-leise); }
.n-vg-zurueck { margin: 0; }
/* Ohne eigenes Abo: Europa plus und Direkt grau, daneben der Weg zum Abo. */
.n-vg-abo { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0 0 12px; padding: 8px 10px; border: 1px solid var(--linie); border-radius: 8px; background: var(--flaeche); }
.n-vg-abo .n-satz { flex: 1 1 220px; margin: 0; font-size: 13px; }
.n-blatt-zwischen { margin: 16px 0 6px; font-size: 14px; }
.n-zeile-segment { display: grid; gap: 8px; }

/* B5: die Auftragskarte zeigt den Stand in einer Zeile und nimmt Antworten an. */
.n-chatkarte-auftrag.zustand-frage { border-color: var(--wartet, var(--akzent)); background: var(--flaeche); }
.zustand-frage .n-auftrag-chip { border-color: var(--wartet, var(--akzent)); color: var(--wartet, var(--akzent)); }
.n-auftrag-stand { display: flex; align-items: baseline; gap: 8px; }
.n-auftrag-punkt { flex: 0 0 8px; width: 8px; height: 8px; border-radius: 50%; background: var(--text-still); transform: translateY(-1px); }
.n-auftrag-punkt.laeuft { background: var(--akzent); animation: n-auftrag-puls 1.6s ease-in-out infinite; }
.n-auftrag-punkt.frage { background: var(--wartet, var(--akzent)); }
.n-auftrag-punkt.fertig { background: var(--laeuft, var(--akzent)); }
@keyframes n-auftrag-puls { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .n-auftrag-punkt.laeuft { animation: none; } }
.n-auftrag-antwort { width: 100%; box-sizing: border-box; min-height: 56px; resize: vertical; font: inherit; font-size: 14px; line-height: 1.45;
  padding: 8px 10px; border: 1px solid var(--linie-stark); border-radius: 8px; background: var(--grund); color: var(--text); margin: 4px 0 6px; }
.n-auftrag-antwort:focus { outline: 2px solid var(--akzent); outline-offset: 1px; }
/* Befund 10.10.2026: eine Karte aus dem Chat des Projekts (Freigabe, Konto, Rolle) in der Auftragskarte. */
.n-auftrag-handlung { margin: 8px 0 4px; padding: 10px 12px; border: 1px solid var(--wartet, var(--akzent)); border-radius: 8px; background: var(--grund); }
.n-auftrag-handlung .n-chatkarte-kopf { gap: 8px; }
.n-auftrag-handlung .n-chatkarte-satz { margin: 6px 0 0; }
.n-auftrag-handlung .n-kartenknopf { margin-top: 8px; }
.n-auftrag-handlung.erledigt { border-color: var(--linie); }
/* „Anderes Projekt“ auf der Wahlkarte. */
.n-uebergabe-wahl { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 2px 0 8px; }
.n-uebergabe-wahl-text { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; font-size: 13.5px; }
.n-uebergabe-wahl.unsicher .n-uebergabe-wahl-text { color: var(--text); font-weight: 550; }
.n-uebergabe-projekt { font: inherit; font-size: 14px; max-width: 100%; padding: 5px 8px; border: 1px solid var(--linie-stark); border-radius: 8px; background: var(--grund); color: var(--text); }
.n-uebergabe-projekt:focus { outline: 2px solid var(--akzent); outline-offset: 1px; }

/* Bildschirm eines Windows-Rechners (docs/plan-windows-bildschirm.md) */
.bildschirm { display: flex; flex-direction: column; gap: 10px; margin-bottom: 20px; }
.bs-oben { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.bs-schalter { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; cursor: pointer; }
.bs-oben .klein.fehler { color: var(--fehler); }
.bs-leiste { display: flex; flex-direction: column; gap: 8px; }
.bs-tippen { display: flex; gap: 8px; }
.bs-tippen .n-eingabe { flex: 1; min-width: 0; }
.bs-tasten { display: flex; flex-wrap: wrap; gap: 6px; }
.bs-rahmen { position: relative; border: 1px solid var(--linie); border-radius: var(--r-l); overflow: hidden; background: #111; outline: none; }
.bs-rahmen.steuert { box-shadow: 0 0 0 2px var(--akzent); }
.bs-rahmen.steuert img { cursor: crosshair; }
.bs-rahmen img { display: block; width: 100%; height: auto; user-select: none; -webkit-user-drag: none; }
.bs-leer { color: #ccc; padding: 40px 16px; text-align: center; margin: 0; }
.bs-aufnahme, .bs-aufnahme-laeuft { display: flex; align-items: center; gap: 8px; flex: 1; flex-wrap: wrap; }
.bs-aufnahme .n-eingabe { flex: 1; min-width: 180px; }
.bs-aufnahme-laeuft .n-text { flex: 1; }

/* ------------------------------------------------------------ Datenbank in groß
   /projekte/<name>/datenbank (src/agenten-html.js seiteDatenbank, web/datenbank.js) */
.db-seite { display: flex; flex-direction: column; min-height: calc(100dvh - 64px); }
.db-kopf { margin: 6px 0 16px; }
.db-kopf h1 { margin: 0; font-size: var(--s-titel); }
.db-kopf .unter { margin: 2px 0 0; color: var(--text-leise); font-size: var(--s-klein); }
.db-rahmen { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: var(--a-4); flex: 1; min-height: 0; }
.db-tabellen { display: flex; flex-direction: column; border: 1px solid var(--linie); border-radius: var(--r-l); background: var(--grund);
  overflow: auto; align-self: start; max-height: calc(100dvh - 180px); }
.db-tab { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; text-align: left; padding: 9px 12px; min-height: 0;
  background: none; border: 0; border-top: 1px solid var(--linie); border-radius: 0; color: var(--text); font: inherit; width: 100%; }
.db-tab:first-child { border-top: 0; }
.db-tab:hover { background: var(--flaeche); color: var(--text); border-color: var(--linie); }
.db-tab[aria-current="true"] { background: var(--akzent-hell); box-shadow: inset 3px 0 0 var(--akzent); }
.db-tab-name { font-weight: 550; font-size: 14px; overflow-wrap: anywhere; }
.db-tab-sub { font-size: 12.5px; color: var(--text-leise); }
.db-inhalt { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.db-leiste { display: flex; gap: var(--a-2); align-items: center; flex-wrap: wrap; }
.db-suche { flex: 1 1 260px; min-width: 0; height: 36px; padding: 0 12px; border: 1px solid var(--linie-stark); border-radius: var(--r-m); font: inherit; font-size: 14px; background: var(--grund); color: var(--text); }
.db-filter-knopf.db-an { border-color: var(--akzent); color: var(--akzent); }
.db-filter { margin-top: var(--a-2); padding: 10px 12px; border: 1px solid var(--linie); border-radius: var(--r-l); background: var(--flaeche); display: flex; flex-direction: column; gap: 8px; }
.db-filter[hidden] { display: none; }
.db-filter-zeile { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.db-filter-zeile select { width: auto; flex: 0 0 auto; max-width: 14rem; }
.db-filter-zeile select, .db-filter-zeile input { box-sizing: border-box; margin: 0; height: 32px; padding: 0 8px; border: 1px solid var(--linie-stark); border-radius: var(--r-s); font: inherit; font-size: 13.5px; background: var(--grund); color: var(--text); }
.db-filter-zeile input { flex: 1 1 160px; min-width: 0; }
.db-filter-weg { min-width: 32px; }
.db-filter-fuss { display: flex; gap: 8px; }
.db-satz { margin: 10px 0 8px; }
.db-satz.db-warn { color: var(--fehler); }
.db-raster { border: 1px solid var(--linie); border-radius: var(--r-l); overflow: auto; background: var(--grund); flex: 1; min-height: 240px; max-height: calc(100dvh - 300px); }
.db-laedt .db-raster { opacity: .55; transition: opacity .15s .1s; }
.db-tabelle { border-collapse: separate; border-spacing: 0; width: max-content; min-width: 100%; font-size: 13.5px; }
.db-tabelle th { position: sticky; top: 0; z-index: 1; background: var(--flaeche); border-bottom: 1px solid var(--linie); padding: 0; text-align: left; white-space: nowrap; }
.db-sort { display: flex; align-items: baseline; justify-content: flex-start; gap: 6px; width: 100%; padding: 8px 12px; min-height: 0; background: none; border: 0; border-radius: 0;
  color: var(--text); font: inherit; font-weight: 600; font-size: 13px; text-align: left; }
.db-sort:hover { background: var(--flaeche-2); color: var(--text); border-color: transparent; }
.db-sort small { font-weight: 400; color: var(--text-still); font-size: 11.5px; }
.db-pfeil { color: var(--akzent); }
.db-tabelle td { padding: 7px 12px; border-bottom: 1px solid var(--linie); max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: top; }
.db-tabelle tr:last-child td { border-bottom: 0; }
.db-tabelle td.db-zahl { text-align: right; font-variant-numeric: tabular-nums; }
.db-tabelle td.db-nichts { color: var(--text-still); }
.db-tabelle td.db-zeit { color: var(--text-leise); font-variant-numeric: tabular-nums; }
.db-tabelle td.db-leer { text-align: center; color: var(--text-leise); padding: 28px 12px; white-space: normal; }
.db-klickbar { cursor: pointer; }
.db-klickbar:hover td, .db-klickbar:focus-visible td { background: var(--akzent-hell); }
.db-klickbar:focus-visible { outline: none; }
.db-fuss { display: flex; justify-content: space-between; align-items: center; gap: var(--a-2); margin-top: 8px; font-size: var(--s-klein); color: var(--text-leise); }
.db-blaettern { display: flex; gap: 6px; }
.db-dialog { max-width: 40rem; max-height: calc(100dvh - 2rem); overflow: auto; padding: 0; }
.db-dialog form { display: flex; flex-direction: column; }
.db-dialog-titel { position: sticky; top: 0; z-index: 1; background: var(--grund); margin: 0; padding: 18px 22px 12px; border-bottom: 1px solid var(--linie); font-size: var(--s-block); }
.db-felder { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 12px 14px; padding: 14px 22px 0; }
.db-felder .db-breit, .db-felder .db-meta { grid-column: 1 / -1; }
.db-dialog .db-dialog-fehler { padding: 0 22px; }
.db-dialog .knoepfe { position: sticky; bottom: 0; background: var(--grund); padding: 12px 22px 16px; margin: 12px 0 0; border-top: 1px solid var(--linie); }
.db-felder .n-feld { gap: 4px; }
.db-felder .n-feld > span { font-size: 12.5px; color: var(--text-leise); }
.db-felder textarea { font-family: inherit; }
.db-meta { font-size: 12px; margin: 4px 0 0; }
.db-dialog-fehler { color: var(--fehler); margin: 12px 0 0; font-size: 13.5px; }
.db-dialog .knoepfe { display: flex; gap: 8px; align-items: center; }
.db-luecke { flex: 1; }
@media (max-width: 760px) {
  .db-rahmen { grid-template-columns: 1fr; }
  .db-tabellen { flex-direction: row; overflow-x: auto; max-height: none; }
  .db-tab { width: auto; flex: none; border-top: 0; border-left: 1px solid var(--linie); }
  .db-tab:first-child { border-left: 0; }
  .db-tab[aria-current="true"] { box-shadow: inset 0 -3px 0 var(--akzent); }
  .db-raster { max-height: none; }
}

/* Karte „In dieses Projekt holen“ (Plan Konten-Reiter, E6): eine Zeile je Wahl, der Kreis rechts. */
.n-wahlzeile { cursor: pointer; }
.n-wahlzeile input[type="radio"] { margin-left: auto; flex: none; width: 18px; height: 18px; accent-color: var(--akzent); }