:root {
  --bg: #f6f7f9; --flaeche: #ffffff; --text: #1d2430; --leise: #667085; --linie: #e3e6eb;
  --akzent: #1f5fbf; --akzent-hell: #e8f0fc;
  --gruen: #1d7a46; --gruen-bg: #e5f4ea; --rot: #b42318; --rot-bg: #fdecea; --grau-bg: #eef0f3;
  --gelb: #8a6100; --gelb-bg: #fff4d6; --orange: #b54708; --orange-bg: #fdeee2; --blau-bg: #e8f0fc;
  --radius: 8px;
}
* { box-sizing: border-box; }
body { margin: 0; font: 14px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color: var(--text); background: var(--bg); }
a { color: var(--akzent); text-decoration: none; }
a:hover { text-decoration: underline; }
a.still { color: inherit; }
h1 { font-size: 22px; margin: 0 0 4px; }
h1 small, h2 small { font-size: 14px; font-weight: normal; color: var(--leise); margin-left: 8px; }
h2 { font-size: 17px; margin: 28px 0 8px; }
code { background: var(--grau-bg); padding: 1px 5px; border-radius: 4px; font-size: 12px; }

.kopf { display: flex; align-items: center; gap: 24px; padding: 10px 24px; background: var(--flaeche); border-bottom: 1px solid var(--linie); position: sticky; top: 0; z-index: 5; }
.marke { font-weight: 700; font-size: 16px; color: var(--text); }
.marke span, .login h1 span { font-weight: 400; color: var(--leise); }
.kopf nav { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; flex: 1; }
.kopf nav a { padding: 6px 10px; border-radius: 6px; color: var(--text); }
.kopf nav .trenner { width: 1px; height: 18px; background: var(--linie); margin: 0 6px; }
.kopf nav a.aktiv, .kopf nav a:hover { background: var(--akzent-hell); color: var(--akzent); text-decoration: none; }
.abmelden { display: flex; gap: 10px; align-items: center; color: var(--leise); }
main { padding: 20px 24px 60px; max-width: 1500px; margin: 0 auto; }

.meldung { padding: 10px 14px; border-radius: var(--radius); margin-bottom: 14px; border: 1px solid; }
.meldung.ok { background: var(--gruen-bg); border-color: #b7e0c4; color: var(--gruen); }
.meldung.fehler { background: var(--rot-bg); border-color: #f5c2bd; color: var(--rot); }
.hinweis { color: var(--leise); font-size: 13px; margin: 6px 0 12px; }
.klein { color: var(--leise); font-size: 12px; }
.leer { color: var(--leise); padding: 24px 0; }
.nowrap { white-space: nowrap; }

.titelzeile { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 12px; }
.kennzahlen { display: flex; flex-wrap: wrap; gap: 6px; }
.kennzahlen a, .kennzahlen span { font-size: 12px; }
.kennzahlen > a:first-child { padding: 2px 8px; }

[class^="marke-"] { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 12px; white-space: nowrap; }
.marke-gruen { background: var(--gruen-bg); color: var(--gruen); }
.marke-rot { background: var(--rot-bg); color: var(--rot); }
.marke-grau { background: var(--grau-bg); color: var(--leise); }
.marke-gelb { background: var(--gelb-bg); color: var(--gelb); }
.marke-orange { background: var(--orange-bg); color: var(--orange); }
.marke-blau { background: var(--blau-bg); color: var(--akzent); }

input, select, textarea, button { font: inherit; color: inherit; }
input, select, textarea { border: 1px solid #cfd4dc; border-radius: 6px; padding: 6px 8px; background: #fff; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--akzent-hell); border-color: var(--akzent); }
button { border: 1px solid #cfd4dc; background: #fff; border-radius: 6px; padding: 6px 14px; cursor: pointer; }
button:hover { background: var(--grau-bg); }
button.primaer { background: var(--akzent); border-color: var(--akzent); color: #fff; }
button.primaer:hover { background: #184d9c; }
button:disabled { opacity: .5; cursor: default; }
button.link { border: 0; background: none; padding: 0; color: var(--akzent); }
button.link:hover { text-decoration: underline; background: none; }

.filter { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 4px; }
.filter .suche { min-width: 280px; flex: 1; max-width: 420px; }
.check { display: inline-flex; align-items: center; gap: 6px; }

.sammelleiste { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 12px; background: var(--flaeche);
  border: 1px solid var(--linie); border-bottom: 0; border-radius: var(--radius) var(--radius) 0 0; }
.sammelleiste[data-aktiv] { background: var(--akzent-hell); }

.tabelle-rahmen { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius); overflow-x: auto; }
.sammelleiste + .tabelle-rahmen { border-radius: 0 0 var(--radius) var(--radius); }
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 7px 10px; border-bottom: 1px solid var(--linie); vertical-align: top; }
thead th { background: #fafbfc; font-weight: 600; font-size: 12px; color: var(--leise); position: sticky; top: 0; }
thead th a { color: inherit; }
tbody tr:last-child td, tbody tr:last-child th { border-bottom: 0; }
table.liste tbody tr:hover { background: #fafbfd; }
.zahl { text-align: right; font-variant-numeric: tabular-nums; }
th.schmal { width: 32px; }
.kurztext { max-width: 360px; color: var(--leise); }

table.detail th { width: 150px; font-weight: 600; background: #fafbfc; }
table.detail td.alt { width: 30%; color: var(--leise); }
table.detail td.eingabe { width: 40%; }
table.detail td.eingabe input, table.detail td.eingabe select, table.detail td.eingabe textarea { width: 100%; }
table.detail textarea { resize: vertical; }
.textwert { white-space: pre-wrap; max-height: 220px; overflow: auto; word-break: break-word; }
tr.geaendert > th { box-shadow: inset 3px 0 0 var(--akzent); }
tr.geaendert td.eingabe input, tr.geaendert td.eingabe select, tr.geaendert td.eingabe textarea { background: var(--akzent-hell); }
tr.fehlerhaft td.eingabe input, tr.fehlerhaft td.eingabe select, tr.fehlerhaft td.eingabe textarea { border-color: var(--rot); }
td.abweichend { background: var(--orange-bg); }
.feldfehler { color: var(--rot); font-size: 12px; margin-top: 4px; }
.pflicht { color: var(--rot); }
.aktionen { margin-top: 12px; display: flex; gap: 14px; align-items: center; position: sticky; bottom: 0; padding: 10px 0; background: var(--bg); }

table.bq input { width: 100%; min-width: 120px; }
table.bq input.kurz { min-width: 90px; max-width: 120px; text-align: right; }
table.bq input.sehr-kurz { min-width: 60px; max-width: 80px; text-align: right; }
table.bq input[type=radio] { width: auto; min-width: 0; }
table.bq td { vertical-align: middle; }
table.bq tr.entfernt td { color: var(--leise); background: #fafafa; }
table.bq tr.entfernt input:not([type=radio]) { text-decoration: line-through; color: var(--leise); }
table.bq tr.geaendert td:first-child { box-shadow: inset 3px 0 0 var(--akzent); }
table.bq tr.neu td { background: #fbfcfe; }
.feld-geaendert { background: var(--akzent-hell) !important; }

.abstand-oben { margin-top: 12px; }
.karten { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 14px; }
.karte { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius); padding: 12px 16px; }
.karte.breit { grid-column: 1 / -1; }
.karte h3 { margin: 0 0 8px; font-size: 13px; color: var(--leise); text-transform: uppercase; letter-spacing: .03em; }
.karte dl { display: grid; grid-template-columns: minmax(110px, max-content) 1fr; gap: 4px 14px; margin: 0; }
.karte dt { color: var(--leise); }
.karte dd { margin: 0; word-break: break-word; }

/* Hilfe */
.hilfe-link { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%;
  border: 1px solid var(--linie); background: var(--flaeche); color: var(--leise); font-size: 12px; font-weight: 600; vertical-align: middle; margin-left: 6px; }
.hilfe-link:hover { border-color: var(--akzent); color: var(--akzent); text-decoration: none; }
details.tipp { background: var(--akzent-hell); border: 1px solid #c9dbf6; border-radius: var(--radius); padding: 8px 14px; margin: 0 0 14px; font-size: 13px; }
details.tipp summary { cursor: pointer; font-weight: 600; color: var(--akzent); }
details.tipp ul { margin: 8px 0 6px; padding-left: 18px; }
details.tipp li { margin: 3px 0; }
.hilfe { display: grid; grid-template-columns: 220px 1fr; gap: 28px; align-items: start; }
.hilfe-inhalt { position: sticky; top: 70px; display: grid; gap: 4px; background: var(--flaeche); border: 1px solid var(--linie);
  border-radius: var(--radius); padding: 12px 14px; font-size: 13px; }
.hilfe-inhalt strong { margin-bottom: 4px; }
.hilfe article { max-width: 860px; }
.hilfe section { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius); padding: 4px 20px 12px; margin-bottom: 14px; scroll-margin-top: 70px; }
.hilfe section h2 { margin-top: 14px; }
.hilfe li { margin: 4px 0; }
.begriffe { display: grid; grid-template-columns: minmax(150px, max-content) 1fr; gap: 6px 16px; }
.begriffe dt { font-weight: 600; }
.begriffe dd { margin: 0; }
.hilfe-tabelle th { width: 190px; background: none; }
.abweichend-beispiel { background: var(--orange-bg); color: var(--orange); padding: 0 4px; border-radius: 3px; }
@media (max-width: 800px) { .hilfe { grid-template-columns: 1fr; } .hilfe-inhalt { position: static; } .begriffe { grid-template-columns: 1fr; } }

.seiten { display: flex; gap: 16px; justify-content: center; margin-top: 14px; color: var(--leise); }

.login { max-width: 340px; margin: 12vh auto; background: var(--flaeche); padding: 28px; border: 1px solid var(--linie); border-radius: 12px; display: grid; gap: 14px; }
.login label { display: grid; gap: 4px; color: var(--leise); font-size: 13px; }

@media (max-width: 700px) {
  main { padding: 14px 16px 60px; }
  .kopf { padding: 10px 16px; gap: 12px; flex-wrap: wrap; }
  table.detail th, table.detail td { display: block; width: 100% !important; }
  table.detail thead { display: none; }
}