/* Bildsprache an docuvia.de angeglichen (2026-08-28) – dieselben Farbtoken,
   dieselbe Typografie-Haltung, jetzt konsequent bis in Kopfzeile/Formulare/
   Buttons/Tabellen durchgezogen statt nur als lose Variable. */

:root {
  color-scheme: light dark;
  --schrift: system-ui, -apple-system, "Segoe UI", sans-serif;
  --rand: light-dark(#d7dde0, #2b363c);
  --flaeche: light-dark(#ffffff, #171f24);
  --grund: light-dark(#f4f6f7, #10161a);
  --text: light-dark(#16212b, #e7ecee);
  --text-schwach: light-dark(#4c5a64, #a3b2ba);
  --akzent: light-dark(#1f6f6b, #5cc4bb);
  --akzent-text: #ffffff;
  --schatten: 0 1px 2px light-dark(rgba(16, 22, 26, 0.06), rgba(0, 0, 0, 0.3));
  --schatten-gross: 0 8px 24px light-dark(rgba(16, 22, 26, 0.10), rgba(0, 0, 0, 0.45));
  --radius: 6px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--schrift);
  background: var(--grund);
  color: var(--text);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { line-height: 1.25; font-weight: 650; margin: 0 0 6px; }
h1 { font-size: 1.55rem; letter-spacing: -0.01em; }
h2 { font-size: 1.15rem; margin-top: 8px; }
h3 { font-size: 1rem; }
p { color: var(--text-schwach); }
a { color: var(--akzent); }
small { color: var(--text-schwach); }
/* Ohne Umbruch reißt ein langer JSON-Blob (z. B. Audit-Log-Details mit
   Volltext-Inhalt) die ganze Seite in die Breite - live im Audit-Log
   gefunden (5919px breites <pre>, Seite dadurch horizontal scrollbar). */
pre {
  white-space: pre-wrap; word-break: break-word; font-size: 13px;
  background: var(--grund); border: 1px solid var(--rand); border-radius: var(--radius);
  padding: 10px 12px; max-width: 100%;
}
code { font-family: ui-monospace, monospace; }

/* Kopfzeile */
.kopfzeile {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  padding: 12px 28px;
  background: var(--flaeche);
  border-bottom: 1px solid var(--rand);
  position: sticky; top: 0; z-index: 10;
}

.marke {
  display: flex; align-items: center; gap: 9px;
  font-size: 1.05rem; font-weight: 700; letter-spacing: -0.01em;
  color: var(--text); text-decoration: none; flex-shrink: 0;
}
.marke img { width: 22px; height: 22px; display: block; }
.marke span { color: var(--akzent); }

.kopfzeile--operator { border-bottom-color: light-dark(#a3391f, #e08a6f); }

.ansicht-banner {
  display: flex; justify-content: center; align-items: center; gap: 16px;
  padding: 10px 20px; font-size: 13px; text-align: center;
  background: light-dark(#a3391f, #e08a6f); color: #fff;
}
.ansicht-banner form { display: inline; }
.ansicht-banner button {
  background: rgba(255, 255, 255, 0.18); color: #fff; border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: var(--radius); padding: 5px 12px; font-size: 13px; cursor: pointer;
  font-family: inherit; white-space: nowrap;
}
.ansicht-banner button:hover { background: rgba(255, 255, 255, 0.3); }
.operator-testknopf {
  padding: 8px 16px; border-radius: var(--radius); border: 1px solid var(--rand);
  background: none; color: var(--text-schwach); cursor: pointer; font-size: 14px;
}
.operator-testknopf:hover { color: var(--text); background: var(--grund); }
.operator-abzeichen {
  background: light-dark(#a3391f, #e08a6f); color: #fff; font-size: 11px;
  font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 4px;
}
.hauptnav { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.hauptnav a {
  color: var(--text-schwach); text-decoration: none; font-size: 14px; font-weight: 500;
  padding: 4px 0; border-bottom: 2px solid transparent;
}
.hauptnav a:hover { color: var(--text); }
.hauptnav a.aktiv { color: var(--akzent); border-bottom-color: var(--akzent); }

.reiter {
  display: flex; gap: 4px; margin: 16px 0 24px; border-bottom: 1px solid var(--rand);
}
.reiter a {
  padding: 9px 18px; font-size: 14px; font-weight: 500; text-decoration: none;
  color: var(--text-schwach); background: var(--flaeche); border: 1px solid var(--rand);
  border-bottom: none; border-radius: var(--radius) var(--radius) 0 0;
  margin-bottom: -1px;
}
.reiter a:hover { color: var(--text); }
.reiter a.aktiv { color: var(--text); background: var(--grund); border-bottom: 1px solid var(--grund); }

.kopf-rechts { display: flex; align-items: center; gap: 16px; flex-shrink: 0; }
.kopf-rechts > a { color: var(--text-schwach); text-decoration: none; font-size: 14px; }
.kopf-rechts > a:hover { color: var(--text); }

.abmelden button {
  background: none; border: 1px solid var(--rand); border-radius: var(--radius);
  padding: 7px 14px; color: var(--text-schwach); cursor: pointer; font-size: 14px;
  font-family: inherit; transition: background 0.12s, color 0.12s;
}
.abmelden button:hover { color: var(--text); background: var(--grund); }

.inhalt { max-width: 1000px; margin: 0 auto; padding: 32px 28px 64px; }

/* Login/2FA-Formulare als ruhige, zentrierte Karte statt loser Felder */
.anmeldeformular {
  max-width: 360px; margin: 64px auto; display: flex; flex-direction: column; gap: 16px;
  background: var(--flaeche); border: 1px solid var(--rand); border-radius: 12px;
  padding: 36px 32px; box-shadow: var(--schatten-gross);
}
.anmeldeformular h1 { text-align: center; margin-bottom: 4px; }
.anmeldeformular label { display: flex; flex-direction: column; gap: 5px; font-size: 14px; font-weight: 500; }
.anmeldeformular input {
  padding: 9px 11px; border: 1px solid var(--rand); border-radius: var(--radius);
  background: var(--grund); color: var(--text); font-size: 14px; font-family: inherit;
  transition: border-color 0.12s;
}
.anmeldeformular input:focus {
  outline: none; border-color: var(--akzent);
  box-shadow: 0 0 0 3px light-dark(rgba(31, 111, 107, 0.15), rgba(92, 196, 187, 0.2));
}
.anmeldeformular button, .mandant-wechsel select {
  padding: 10px 14px; border-radius: var(--radius); border: 1px solid var(--rand);
  font-family: inherit; font-size: 14px;
}
.anmeldeformular button {
  background: var(--akzent); color: var(--akzent-text); border: none; cursor: pointer;
  font-weight: 600; transition: filter 0.12s;
}
.anmeldeformular button:hover { filter: brightness(1.08); }
.anmeldeformular-link { text-align: center; font-size: 13px; }

.meldungen { list-style: none; padding: 0; margin: 0 0 20px; }
.meldung {
  padding: 10px 14px; border-radius: var(--radius); margin-bottom: 8px; font-size: 14px;
  border: 1px solid transparent;
}
.meldung--erfolg {
  background: light-dark(#e3f3e5, #163420); color: light-dark(#1f6f2f, #7fd18f);
  border-color: light-dark(#c3e6c8, #245934);
}
.meldung--fehler {
  background: light-dark(#fbe4e0, #3a1f1a); color: light-dark(#a3391f, #e08a6f);
  border-color: light-dark(#f0c6bd, #5c2e24);
}

/* Globale Button-Politur: gilt für alle Buttons in der App, auch die vielen
   seitenspezifischen Regeln weiter unten (Cascading statt Neuschreiben). */
/* Basisoptik für JEDEN Button, auch die vielen ohne eigene seitenspezifische
   Regel (sonst fällt er auf die native Browser-Grafik zurück – im ganzen
   Haus verstreut gefunden, z. B. Mappe-Kommentar/Aktenzeichen-Formulare).
   Spezifischere Selektoren (".xyz button { background: var(--akzent) }")
   überschreiben das dank höherer Spezifität weiterhin wie bisher. */
button {
  font-family: inherit; font-size: 14px; cursor: pointer; border-radius: var(--radius);
  padding: 8px 16px; border: 1px solid var(--rand); background: var(--flaeche); color: var(--text);
  transition: filter 0.12s, background 0.12s, border-color 0.12s;
}
button:hover { filter: brightness(1.06); }
button:disabled { cursor: not-allowed; filter: none; opacity: 0.55; }

.knopf {
  display: inline-flex; align-items: center; gap: 6px; padding: 9px 16px;
  border-radius: var(--radius); border: 1px solid var(--rand); background: var(--flaeche);
  color: var(--text); font-size: 14px; font-weight: 600; text-decoration: none;
  font-family: inherit; cursor: pointer; transition: filter 0.12s, background 0.12s;
}
.knopf:hover { filter: none; background: var(--grund); }
.knopf--primaer { background: var(--akzent); color: var(--akzent-text); border-color: transparent; }
.knopf--primaer:hover { filter: brightness(1.08); background: var(--akzent); }
.knopf--gefahr { color: light-dark(#a3391f, #e08a6f); border-color: light-dark(#f0c6bd, #5c2e24); }
.knopf--gefahr:hover { background: light-dark(#fbe4e0, #3a1f1a); }

/* Auge-Knopf für maskierte Felder, s. app/static/js/pw-auge.js. Gleiche
   Klassennamen wie in net97/Lizenzserver (lib.php, pw_auge_assets()). */
.pwfeld { position: relative; display: block; }
.pwfeld > input { padding-right: 42px !important; }
.pwauge {
  position: absolute; top: 50%; right: 5px; transform: translateY(-50%);
  background: none; border: 0; padding: 5px; cursor: pointer;
  color: var(--text-schwach); line-height: 0; border-radius: 8px;
}
.pwauge:hover { color: var(--text); background: var(--grund); }
.pwauge svg {
  width: 19px; height: 19px; stroke: currentColor; fill: none;
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
.pwweg { display: none; }
.pwwahl {
  display: flex !important; align-items: center; gap: 7px; margin: 10px 0 0 !important;
  font-size: 0.78rem; color: var(--text-schwach); cursor: pointer; font-weight: 400;
}
.pwwahl input { width: auto !important; margin: 0; flex: 0 0 auto; }

.suche-filter {
  display: flex; flex-wrap: wrap; align-items: end; gap: 14px; margin-bottom: 20px;
}
.suche-filter label { display: flex; flex-direction: column; gap: 4px; font-size: 14px; }
.suche-filter input, .suche-filter select {
  padding: 8px 10px; border: 1px solid var(--rand); border-radius: 6px;
  background: var(--flaeche); color: var(--text);
}
.suche-papierkorb { flex-direction: row !important; align-items: center; gap: 6px !important; }
.suche-papierkorb input { width: auto; }
.suche-filter button {
  padding: 8px 16px; border-radius: 6px; border: none;
  background: var(--akzent); color: #fff; cursor: pointer;
}

.ergebnisliste { width: 100%; border-collapse: collapse; font-size: 14px; }
.ergebnisliste th, .ergebnisliste td {
  text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--rand);
}
.ergebnisliste a { color: var(--akzent); text-decoration: none; }
.ergebnisliste a:hover { text-decoration: underline; }
.ergebnis-papierkorb {
  margin-left: 8px; font-size: 0.75em; color: var(--text-schwach);
  border: 1px solid var(--rand); border-radius: 4px; padding: 1px 5px;
}
.suche-hinweis { color: var(--text-schwach); font-size: 14px; }
.ergebnis-ausschnitt { color: var(--text-schwach); font-size: 13px; margin-top: 3px; }
.ergebnis-ausschnitt mark {
  background: light-dark(#fdeeb0, #4a3f10); color: inherit; border-radius: 2px;
  padding: 0 1px;
}

.mappe-titel { display: flex; gap: 8px; margin-bottom: 4px; }
.mappe-titel input { flex: 1; font-size: 1.4rem; padding: 4px 8px; }
.mappe-hinweis { color: var(--text-schwach); font-size: 13px; }

.mappe-aktenzeichen { list-style: none; padding: 0; }
.mappe-aktenzeichen li {
  display: flex; align-items: center; gap: 10px; padding: 6px 0;
  border-bottom: 1px solid var(--rand);
}
.mappe-aktenzeichen li > span:first-child { flex: 1; }
.mappe-gesperrt {
  font-size: 0.75em; color: var(--text-schwach); border: 1px solid var(--rand);
  border-radius: 4px; padding: 1px 5px;
}
.mappe-aktenzeichen form, .mappe-az-hinzufuegen { display: inline-flex; gap: 6px; }
.mappe-az-hinzufuegen { margin-top: 8px; }

.mappe-zusatzinfo { display: flex; flex-direction: column; gap: 10px; align-items: start; }
.mappe-zusatzinfo label { display: flex; flex-direction: column; gap: 4px; font-size: 14px; }

.mappe-kommentare { list-style: none; padding: 0; }
.mappe-kommentare li { padding: 8px 0; border-bottom: 1px solid var(--rand); }
.mappe-kommentare small { color: var(--text-schwach); }
.mappe-kommentar-formular { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; max-width: 480px; }
.mappe-kommentar-formular textarea {
  padding: 8px 10px; border: 1px solid var(--rand); border-radius: 6px;
  background: var(--flaeche); color: var(--text); font-family: inherit; min-height: 70px;
}

.mappe-wiedervorlagen { list-style: none; padding: 0; }
.mappe-wiedervorlagen li {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 8px 0; border-bottom: 1px solid var(--rand);
}
.mappe-wiedervorlagen small { color: var(--text-schwach); }
.mappe-wiedervorlage-formular {
  display: flex; flex-wrap: wrap; align-items: end; gap: 12px; margin-top: 10px;
}
.mappe-wiedervorlage-formular label { display: flex; flex-direction: column; gap: 4px; font-size: 14px; }
.mappe-wiedervorlage-formular input, .mappe-wiedervorlage-formular select {
  padding: 8px 10px; border: 1px solid var(--rand); border-radius: 6px;
  background: var(--flaeche); color: var(--text);
}

.wv-stufe { margin-bottom: 22px; }
.wv-stufe h2 { font-size: 1rem; margin-bottom: 8px; }
.wv-stufe--ueberfaellig h2 { color: light-dark(#a3391f, #e08a6f); }
.wv-liste { list-style: none; padding: 0; }
.wv-liste li {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 8px 10px; border-bottom: 1px solid var(--rand);
}
.wv-liste a { color: var(--akzent); text-decoration: none; }
.wv-liste a:hover { text-decoration: underline; }
.wv-liste small { display: block; color: var(--text-schwach); }
.wv-liste button {
  padding: 6px 12px; border-radius: 6px; border: 1px solid var(--rand);
  background: none; color: var(--text-schwach); cursor: pointer; flex-shrink: 0;
}
.wv-liste button:hover { color: var(--text); background: var(--grund); }

.mappe-prozess {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 14px; margin-bottom: 16px; border: 1px solid var(--rand);
  border-radius: 8px; background: var(--flaeche);
}
.mappe-prozess p { margin: 0; }
.mappe-prozess small { display: block; color: var(--text-schwach); margin-top: 2px; }
.mappe-eskaliert {
  font-size: 0.78em; color: light-dark(#a3391f, #e08a6f);
  border: 1px solid currentColor; border-radius: 4px; padding: 1px 6px; margin-left: 6px;
}
.mappe-prozess button {
  padding: 8px 14px; border-radius: 6px; border: none;
  background: var(--akzent); color: #fff; cursor: pointer; flex-shrink: 0;
}

.af-stufe { margin-bottom: 22px; }
.af-stufe h2 { font-size: 1rem; margin-bottom: 8px; }
.af-stufe--eskaliert h2 { color: light-dark(#a3391f, #e08a6f); }
.af-liste { list-style: none; padding: 0; }
.af-liste li {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 8px 10px; border-bottom: 1px solid var(--rand);
}
.af-liste a { color: var(--akzent); text-decoration: none; }
.af-liste a:hover { text-decoration: underline; }
.af-liste small { display: block; color: var(--text-schwach); }
.af-liste button {
  padding: 6px 12px; border-radius: 6px; border: 1px solid var(--rand);
  background: none; color: var(--text-schwach); cursor: pointer; flex-shrink: 0;
}
.af-liste button:hover { color: var(--text); background: var(--grund); }

.vw-index { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.vw-index a { color: var(--akzent); text-decoration: none; font-size: 15px; }
.vw-index a:hover { text-decoration: underline; }

.start-kacheln { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 20px; }
.start-kachel {
  flex: 1 1 180px; max-width: 260px; display: flex; flex-direction: column; gap: 6px;
  background: var(--flaeche); border: 1px solid var(--rand); border-radius: var(--radius);
  box-shadow: var(--schatten); padding: 20px; text-decoration: none; color: var(--text);
  transition: box-shadow 0.12s;
}
.start-kachel:hover { box-shadow: var(--schatten-gross); }
.start-kachel strong { font-size: 28px; color: var(--akzent); }
.start-kachel span { font-size: 14px; color: var(--text-schwach); }
.start-kachel--info { cursor: default; }
.start-kachel--info:hover { box-shadow: var(--schatten); }
.start-kachel--warnung strong {
  color: light-dark(#a3391f, #e08a6f);
}

.zl-tabelle-scroll { overflow-x: auto; margin-bottom: 24px; }
.zl-tabelle-scroll .vw-tabelle { margin-bottom: 0; }
.vw-tabelle { width: 100%; border-collapse: collapse; font-size: 14px; margin-bottom: 24px; }
.vw-tabelle th, .vw-tabelle td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--rand); }
.vw-tabelle button {
  padding: 6px 12px; border-radius: 6px; border: 1px solid var(--rand);
  background: none; color: var(--text-schwach); cursor: pointer;
}
.vw-tabelle button:hover { color: var(--text); background: var(--grund); }

.vw-formular {
  display: flex; flex-wrap: wrap; gap: 14px; align-items: end; max-width: 640px;
}
.vw-formular label { display: flex; flex-direction: column; gap: 4px; font-size: 14px; flex: 1 1 160px; }
.vw-formular input, .vw-formular select {
  padding: 8px 10px; border: 1px solid var(--rand); border-radius: 6px;
  background: var(--flaeche); color: var(--text);
}
.vw-formular button {
  padding: 8px 16px; border-radius: 6px; border: none;
  background: var(--akzent); color: #fff; cursor: pointer; height: fit-content;
}

.vw-kategorien { list-style: none; padding: 0; margin-bottom: 24px; }
.vw-kategorien li {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 6px 0; border-bottom: 1px solid var(--rand);
}
.vw-kategorien small { display: block; color: var(--text-schwach); font-size: 0.8em; }
.vw-inaktiv {
  color: var(--text-schwach); border: 1px solid var(--rand); border-radius: 4px;
  padding: 1px 5px; font-size: 0.75em;
}
.vw-kategorien button {
  padding: 6px 12px; border-radius: 6px; border: 1px solid var(--rand);
  background: none; color: var(--text-schwach); cursor: pointer; flex-shrink: 0;
}
.vw-kategorien button:hover { color: var(--text); background: var(--grund); }

.zl-konto {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 16px;
  padding: 10px 14px; border: 1px solid var(--rand); border-radius: 8px; background: var(--flaeche);
}
.zl-konto input {
  padding: 6px 8px; border: 1px solid var(--rand); border-radius: 6px;
  background: var(--grund); color: var(--text);
}
.zl-fehlt { color: light-dark(#a3391f, #e08a6f); }
.zl-mono { font-family: ui-monospace, monospace; }

.zl-kopf { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 6px; }
.zl-kopf small { color: var(--text-schwach); }

.zl-tabelle { width: 100%; border-collapse: collapse; font-size: 13px; margin-bottom: 10px; }
.zl-tabelle th, .zl-tabelle td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--rand); vertical-align: top; }
.zl-tabelle input {
  width: 100%; padding: 4px 6px; border: 1px solid var(--rand); border-radius: 5px;
  background: var(--flaeche); color: var(--text); font-size: 13px;
}
.zl-tabelle .zl-zahl { text-align: right; }
.zl-tabelle small { color: var(--text-schwach); }
.zl-problem { background: light-dark(#fff7ed, #2a2013); }

.zl-aktionen { display: flex; gap: 10px; margin-bottom: 8px; }
.zl-aktionen button {
  padding: 8px 16px; border-radius: 6px; border: none;
  background: var(--akzent); color: #fff; cursor: pointer;
}
.zl-aktionen button[formaction] { background: none; border: 1px solid var(--rand); color: var(--text-schwach); }
.zl-hinweis { color: var(--text-schwach); font-size: 13px; }

.zl-abschnitt { margin-top: 22px; }
.zl-abschnitt h2 { font-size: 1rem; margin-bottom: 4px; }
.zl-abschnitt .zl-tabelle form { display: inline; }
.zl-abschnitt .zl-tabelle button {
  padding: 4px 10px; border-radius: 6px; border: 1px solid var(--rand);
  background: none; color: var(--text-schwach); cursor: pointer;
}
.zl-abschnitt .zl-tabelle button:hover { color: var(--text); background: var(--grund); }

.ba-import {
  display: flex; align-items: center; gap: 10px; margin-bottom: 16px;
  padding: 10px 14px; border: 1px solid var(--rand); border-radius: 8px; background: var(--flaeche);
}
.ba-import button {
  padding: 8px 14px; border-radius: 6px; border: none;
  background: var(--akzent); color: #fff; cursor: pointer;
}

.ba-tabelle { width: 100%; border-collapse: collapse; font-size: 13px; }
.ba-tabelle th, .ba-tabelle td { text-align: left; padding: 8px; border-bottom: 1px solid var(--rand); vertical-align: top; }
.ba-tabelle small { color: var(--text-schwach); }

.ba-status {
  display: inline-block; padding: 2px 8px; border-radius: 4px; font-size: 0.85em;
  border: 1px solid var(--rand); color: var(--text-schwach);
}
.ba-status--matched { color: light-dark(#1f6f2f, #7fd18f); border-color: currentColor; }
.ba-status--missing_receipt { color: light-dark(#a3391f, #e08a6f); border-color: currentColor; }
.ba-status--unmatched { color: light-dark(#9a6a00, #e0b84a); border-color: currentColor; }

.ba-belege { list-style: none; padding: 0; margin: 0; }
.ba-belege li { display: flex; align-items: center; gap: 6px; margin-bottom: 2px; }
.ba-belege form { display: inline; }
.ba-belege button {
  padding: 2px 6px; border-radius: 4px; border: 1px solid var(--rand);
  background: none; color: var(--text-schwach); cursor: pointer; font-size: 0.85em;
}

.ba-aktionen { display: flex; flex-direction: column; gap: 6px; min-width: 220px; }
.ba-aktionen form { display: flex; gap: 6px; }
.ba-aktionen select {
  flex: 1; padding: 4px 6px; border: 1px solid var(--rand); border-radius: 5px;
  background: var(--flaeche); color: var(--text); font-size: 13px;
}
.ba-aktionen button {
  padding: 4px 10px; border-radius: 6px; border: 1px solid var(--rand);
  background: none; color: var(--text-schwach); cursor: pointer; font-size: 13px; white-space: nowrap;
}
.ba-aktionen button:hover { color: var(--text); background: var(--grund); }

.ba-abschnitt { margin-top: 22px; }
.ba-abschnitt h2 { font-size: 1rem; margin-bottom: 4px; }
.ba-abschnitt .ba-tabelle form { display: inline; }
.ba-abschnitt .ba-tabelle button {
  padding: 4px 10px; border-radius: 6px; border: 1px solid var(--rand);
  background: none; color: var(--text-schwach); cursor: pointer;
}
.ba-abschnitt .ba-tabelle button:hover { color: var(--text); background: var(--grund); }

.vw-rolle, .vw-zusatzfeld, .vw-prozess { margin-bottom: 28px; padding-bottom: 16px; border-bottom: 1px solid var(--rand); }
.vw-rolle h2, .vw-zusatzfeld h2, .vw-prozess h2 { font-size: 1.05rem; display: flex; align-items: center; gap: 10px; }
.vw-vorlage { font-size: 0.75em; color: var(--text-schwach); font-weight: 400; }
.vw-inaktiv {
  color: var(--text-schwach); border: 1px solid var(--rand); border-radius: 4px;
  padding: 1px 5px; font-size: 0.75em; font-weight: 400;
}

.vw-rechte-liste { columns: 2; column-gap: 24px; font-size: 14px; }
.vw-rechte-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 6px 16px; margin-bottom: 10px; }
.vw-recht { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 400; }
.vw-recht input { width: auto; }

.vw-inline-form { display: inline; }
.vw-inline-form button {
  padding: 4px 10px; border-radius: 6px; border: 1px solid var(--rand);
  background: none; color: var(--text-schwach); cursor: pointer; font-size: 0.8em; font-weight: 400;
}
.vw-inline-form button:hover { color: var(--text); background: var(--grund); }

.vw-zuordnung { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin: 8px 0; }
.vw-zuordnung p { margin: 0; font-size: 13px; color: var(--text-schwach); flex-basis: 100%; }
.vw-zuordnung button {
  padding: 6px 12px; border-radius: 6px; border: none;
  background: var(--akzent); color: #fff; cursor: pointer; font-size: 13px;
}

.vw-schritte { list-style: none; padding: 0; margin: 10px 0; }
.vw-schritte > li { padding: 10px 0 10px 14px; border-left: 2px solid var(--rand); margin-bottom: 8px; }
.vw-schritt-kopf { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.vw-stufen-tabelle { margin: 6px 0 10px; font-size: 12px; }

.vw-formular--klein { max-width: 480px; margin-top: 8px; }
.vw-formular--klein label { flex: 1 1 120px; }

.vw-agent-secret {
  padding: 14px 16px; border-radius: var(--radius); margin-bottom: 20px;
  background: light-dark(#fdf3da, #3a2f12); color: light-dark(#7a5a10, #e0bd6f);
  border: 1px solid light-dark(#eed99a, #5c4a1f);
}
.vw-agent-secret dl { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; margin: 10px 0 0; }
.vw-agent-secret dt { font-weight: 600; }
.vw-agent-secret dd { margin: 0; }
.vw-agent-secret code { user-select: all; }

.mappe-dokumente { list-style: none; padding: 0; }
.mappe-dokumente li {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding: 8px 0; border-bottom: 1px solid var(--rand);
}
.mappe-dokumente a { color: var(--akzent); text-decoration: none; }
.mappe-dokumente small { display: block; color: var(--text-schwach); }
.mappe-dokument-aktionen { display: flex; align-items: center; gap: 12px; }
.mappe-dokument-aktionen form { display: flex; align-items: center; gap: 6px; }
.mappe-dokument-aktionen input[type=file] { font-size: 12px; max-width: 210px; }
.mappe-dokument-aktionen button {
  padding: 4px 10px; border-radius: 6px; border: 1px solid var(--rand);
  background: none; color: var(--text-schwach); cursor: pointer; font-size: 13px;
}

.mv-layout { display: flex; gap: 12px; align-items: stretch; height: 78vh; min-height: 400px; }
.mv-seiten {
  flex: 0 0 140px; overflow-y: auto; display: flex; flex-direction: column; gap: 8px;
  border: 1px solid var(--rand); border-radius: 8px; padding: 8px; background: var(--flaeche);
}
.mv-seiten img { width: 100%; border: 1px solid var(--rand); border-radius: 4px; }
.mv-pdf { flex: 1; border: 1px solid var(--rand); border-radius: 8px; background: var(--flaeche); }

.ms-formular { max-width: 100%; }
.ms-tabelle { width: 100%; border-collapse: collapse; margin-bottom: 16px; }
.ms-tabelle th, .ms-tabelle td { text-align: left; padding: 8px; border-bottom: 1px solid var(--rand); vertical-align: middle; }
.ms-tabelle img { width: 70px; border: 1px solid var(--rand); border-radius: 4px; vertical-align: middle; margin-right: 8px; }
.ms-tabelle select, .ms-tabelle input[type=number] {
  padding: 4px 6px; border: 1px solid var(--rand); border-radius: 5px;
  background: var(--flaeche); color: var(--text);
}
.ms-formular button {
  padding: 8px 16px; border-radius: 6px; border: none;
  background: var(--akzent); color: #fff; cursor: pointer;
}

.vw-tabelle-aktionen { display: flex; align-items: center; gap: 10px; }
.vw-tabelle-aktionen a { color: var(--akzent); text-decoration: none; font-size: 13px; }

.vw-ausnahmen { list-style: none; padding: 0; margin-bottom: 12px; }
.vw-ausnahmen li {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 6px 0; border-bottom: 1px solid var(--rand); font-size: 14px;
}

.pf-liste { list-style: none; padding: 0; margin-bottom: 20px; }
.pf-liste > li { border-bottom: 1px solid var(--rand); padding: 4px 0; }
.pf-liste summary { cursor: pointer; padding: 8px 0; font-size: 14px; }
.pf-liste details[open] summary { margin-bottom: 10px; }
.pf-liste .vw-formular { margin-bottom: 8px; }

/* Eigener Bestätigungsdialog statt Browser-confirm(), s.
   app/static/js/bestaetigen.js. */
.bestaetigen-dialog {
  padding: 0; border: 1px solid var(--rand); border-radius: 10px;
  background: var(--flaeche); color: var(--text); max-width: 420px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.25);
}
.bestaetigen-dialog::backdrop { background: rgba(0, 0, 0, 0.45); }
.bestaetigen-inhalt { padding: 20px; }
.bestaetigen-frage { margin: 0 0 18px; font-size: 15px; line-height: 1.5; }
.bestaetigen-aktionen { display: flex; justify-content: flex-end; gap: 10px; }
.bestaetigen-aktionen button {
  padding: 8px 16px; border-radius: 6px; border: 1px solid var(--rand);
  background: none; color: var(--text); cursor: pointer; font-size: 14px;
}
.bestaetigen-abbrechen:hover { background: var(--grund); }
.bestaetigen-fortfahren {
  background: light-dark(#a3391f, #c04a2e) !important; border-color: transparent !important;
  color: #fff !important;
}
.bestaetigen-fortfahren:hover { filter: brightness(1.1); }