:root {
  --text: #1d2733; --muted: #5b6876; --line: #d5dbe2; --bg: #eef1f5; --card: #fff;
  --accent: #1f5a96; --accent-2: #e6eef6; --ok: #1f6f43; --ok-bg: #e5f3ea; --warn: #8a5a00; --warn-bg: #fff3d6;
  --err: #a12a2a; --err-bg: #fbe7e7;
  --akte: #5b7fd6; --akte-bg: #e8eefc; --vorgang: #3f9b5a; --vorgang-bg: #e4f4e8; --dokument: #c9a20f; --dokument-bg: #fdf6d8;
}
* { box-sizing: border-box; }
body { margin: 0; font: 14.5px/1.45 system-ui, -apple-system, "Segoe UI", Arial, sans-serif; color: var(--text); background: var(--bg); }
a { color: var(--accent); }

/* Menüleiste und Kopf */
.menue { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 6px 20px;
  background: var(--accent); flex-wrap: wrap; }
.menue a, .menue .link { color: #fff; text-decoration: none; font-size: 13.5px; }
.menue-links { display: flex; gap: 4px; flex-wrap: wrap; }
.menue-links a { padding: 4px 10px; border-radius: 4px; }
.menue-links a:hover, .menue-links a.aktiv { background: rgba(255,255,255,.18); }
.kopf { display: flex; justify-content: space-between; align-items: center; padding: 10px 20px; background: var(--card);
  border-bottom: 1px solid var(--line); }
.kopf strong { font-size: 16px; } .kopf span { margin-left: 10px; color: var(--muted); }
.kopf .marke { font-weight: 700; font-size: 18px; color: var(--accent); letter-spacing: .2px; }
.hinweis { background: var(--warn-bg); color: var(--warn); padding: 6px 20px; font-size: 13px; }
main { max-width: 1500px; margin: 0 auto; padding: 16px 20px 32px; }

/* Panels der Startseite */
.panel { background: var(--card); border: 1px solid var(--line); border-radius: 6px; margin-bottom: 16px; overflow: hidden; }
.panel-titel { background: var(--accent-2); color: var(--accent); font-weight: 600; text-align: center; padding: 6px 12px;
  border-bottom: 1px solid var(--line); }
.zwei { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 12px; }
@media (max-width: 800px) { .zwei { grid-template-columns: 1fr; } }

/* Registerkarten */
.reiter { display: flex; gap: 2px; padding: 8px 12px 0; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.reiter a { padding: 6px 14px; border: 1px solid var(--line); border-bottom: 0; border-radius: 5px 5px 0 0; background: #f6f8fa;
  color: var(--muted); text-decoration: none; font-size: 13.5px; margin-bottom: -1px; }
.reiter a.aktiv { background: var(--card); color: var(--text); font-weight: 600; }

/* Werkzeugleisten */
.leiste { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 12px; flex-wrap: wrap;
  border-bottom: 1px solid var(--line); background: #fafbfc; }
.leiste-links, .leiste-rechts { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.werkzeug { background: #f4f6f8; }
.radio { color: var(--text); text-decoration: none; font-size: 13px; }
.radio::before { content: ""; display: inline-block; width: 11px; height: 11px; border: 1.5px solid var(--muted); border-radius: 50%;
  margin-right: 6px; vertical-align: -1px; }
.radio.an::before { background: var(--accent); border-color: var(--accent); box-shadow: inset 0 0 0 2px #fff; }

/* Listen */
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 6px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { font-size: 12.5px; color: var(--muted); font-weight: 600; background: #f6f8fa; }
.liste.klickbar tbody tr { cursor: pointer; }
.liste tbody tr:hover { background: #f3f7fc; }
tr.faellig td:nth-child(2) { color: var(--err); font-weight: 600; }
tr.st-aktiv { background: var(--warn-bg); } tr.st-erledigt { color: var(--muted); }
td.rechts { text-align: right; }
.zeichen { font-family: ui-monospace, Menlo, monospace; font-size: 12.5px; white-space: nowrap; }
.kuerzel { display: inline-block; min-width: 42px; font-weight: 700; color: var(--accent); }
.klein { font-size: 12.5px; color: var(--muted); }
.leer { color: var(--muted); font-style: italic; }
.status { font-size: 12px; padding: 1px 8px; border-radius: 10px; background: var(--accent-2); color: var(--accent); white-space: nowrap; }
.s-im-Geschäftsgang { background: var(--warn-bg); color: var(--warn); }
.s-abgeschlossen, .s-aktuell { background: var(--ok-bg); color: var(--ok); }

/* Baum (Favoriten, Ablagenexplorer, Explorer) */
.baum ul { list-style: none; margin: 0; padding-left: 18px; }
.baum > ul { padding-left: 4px; }
.baum li { padding: 2px 0; }
.baum a { text-decoration: none; color: var(--text); }
.baum a:hover { color: var(--accent); text-decoration: underline; }
.baum-kopf { font-weight: 600; font-size: 13px; color: var(--muted); padding: 4px 4px 6px; border-bottom: 1px solid var(--line); margin-bottom: 6px; }
.baum.gross { padding: 12px 16px; }
.kennz { font-family: ui-monospace, Menlo, monospace; background: var(--accent-2); padding: 1px 6px; border-radius: 3px; }

/* Icons in den Farben der Schriftgutobjekte */
.ic { width: 16px; height: 16px; vertical-align: -3px; fill: none; stroke-width: 1.3; }
.ic rect, .ic circle { stroke-width: 1.3; }
.ic-akte { stroke: #2d4fa3; } .ic-akte rect { fill: var(--akte); }
.ic-vorgang { stroke: #23673a; } .ic-vorgang rect { fill: #7fd197; }
.ic-dokument { stroke: #8a6d00; } .ic-dokument rect { fill: #f3dc5c; }
.ic-ggv { stroke: var(--accent); } .ic-ggv rect { fill: var(--accent-2); }
.ic-wv { stroke: var(--warn); } .ic-wv circle { fill: var(--warn-bg); }

/* Objektansicht: Explorer links, Deckblatt rechts */
main.objekt-main { max-width: none; }
.objekt { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 14px; align-items: start; }
@media (max-width: 1000px) { .objekt { grid-template-columns: 1fr; } }
.explorer { background: var(--card); border: 1px solid var(--line); border-radius: 6px; padding: 10px; position: sticky; top: 10px; }
.explorer-kopf { display: flex; gap: 6px; margin-bottom: 8px; }
.explorer .baum { font-size: 13.5px; }
.explorer li.sel > a { background: var(--accent-2); border-radius: 3px; padding: 1px 4px; font-weight: 600; }
.deckblatt { background: var(--card); border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
.titelleiste { text-align: center; font-weight: 700; padding: 8px 12px; border-bottom: 1px solid var(--line); }
.titelleiste .ic { width: 18px; height: 18px; }
.t-akte { background: var(--akte-bg); } .t-vorgang { background: var(--vorgang-bg); } .t-dokument { background: var(--dokument-bg); }
.reiter-inhalt { padding: 0 0 8px; }
.felder { display: grid; grid-template-columns: 150px minmax(0, 1fr) 150px minmax(0, 1fr); gap: 8px 12px; padding: 14px 16px; align-items: start; }
@media (max-width: 1100px) { .felder { grid-template-columns: 140px minmax(0, 1fr); } }
.felder label { font-size: 13px; color: var(--muted); padding-top: 5px; }
.feld { border: 1px solid var(--line); background: #f7f9fb; border-radius: 4px; padding: 4px 8px; min-height: 30px; }
.feld.gross { min-height: 54px; }
.abschnitt { font-size: 14px; margin: 14px 12px 0; }
.api-leiste { border-top: 1px solid var(--line); padding: 6px 12px 10px; background: #fafbfc; }
.api-leiste summary { cursor: pointer; font-size: 13px; color: var(--muted); padding: 4px 0; }
.erlassen-box { margin: 12px; border: 1px solid var(--line); border-radius: 6px; padding: 8px 12px; }
.erlassen-box summary { cursor: pointer; font-weight: 600; color: var(--accent); }

table.api code { font-size: 12.5px; } table.api td.url { word-break: break-all; }
table.api.kompakt td, table.api.kompakt th { font-size: 12.5px; padding: 3px 6px; }
tr.fehler td { background: var(--err-bg); }

/* Formulare */
input, select, button { font: inherit; font-size: 13.5px; }
input, select { padding: 5px 8px; border: 1px solid var(--line); border-radius: 4px; background: #fff; }
button, .knopf { padding: 5px 12px; border: 1px solid var(--accent); border-radius: 4px; background: var(--accent); color: #fff; cursor: pointer;
  text-decoration: none; white-space: nowrap; display: inline-block; font-size: 13.5px; }
button:disabled { opacity: .45; cursor: default; }
button.zweit, .knopf.zweit { background: #fff; color: var(--accent); border-color: var(--line); }
button.gefahr { background: var(--err); border-color: var(--err); }
button.link { background: none; border: 0; color: var(--accent); padding: 0; text-decoration: underline; }
.menue button.link { color: #fff; text-decoration: none; }
form.inline { display: inline; }
.eng-feld { width: auto; } .breit-feld { min-width: 320px; }
.zeile { display: flex; gap: 8px; margin-top: 8px; } .zeile input { flex: 1; min-width: 0; }
.formular { display: grid; gap: 10px; } .formular label { display: grid; gap: 4px; font-size: 13px; color: var(--muted); }
.raster { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); align-items: end; margin-top: 10px; }
.raster .breit { grid-column: 1 / -1; }
.raster input, .raster select { width: 100%; }
.karte { background: var(--card); border: 1px solid var(--line); border-radius: 6px; padding: 16px 20px; margin-bottom: 16px; }
.karte.schmal { max-width: 440px; margin: 40px auto; }
h1 { font-size: 20px; margin: 0 0 10px; } h2 { font-size: 16px; margin: 0 0 10px; }
.meldung { padding: 8px 12px; border-radius: 4px; margin-bottom: 12px; background: var(--ok-bg); color: var(--ok); }
.meldung.fehler { background: var(--err-bg); color: var(--err); }

/* Personensuche (OX) im Formular Verfügung erlassen */
.personenwahl { display: grid; gap: 6px; }
.personenwahl .treffer { display: flex; flex-wrap: wrap; gap: 6px; }
.personenwahl .treffer:empty { display: none; }
.personenwahl button.person { background: var(--card); color: var(--text); border: 1px solid var(--line); font-weight: 500; }
.personenwahl button.person:hover { border-color: var(--accent); }
.personenwahl button.person .klein { color: var(--muted); margin-left: 4px; }