:root { --blau: #0b3d6e; --grau: #f2f4f7; --linie: #d0d5dd; --rot: #b42318; --gelb: #b54708; --gruen: #067647; }
* { box-sizing: border-box; }
body { margin: 0; font: 16px/1.4 system-ui, sans-serif; color: #101828; background: #fff; }
header { display: flex; justify-content: space-between; align-items: center; padding: .75rem 1.5rem; background: var(--blau); color: #fff; }
header form { display: flex; gap: .75rem; align-items: center; margin: 0; }
main { max-width: 70rem; margin: 1.5rem auto; padding: 0 1.5rem; }
.karte { background: var(--grau); border: 1px solid var(--linie); border-radius: .5rem; padding: 1rem; margin-bottom: 1.5rem; display: grid; gap: .5rem; max-width: 36rem; }
section.karte { max-width: none; }
label { font-weight: 600; }
input { padding: .5rem; border: 1px solid var(--linie); border-radius: .25rem; background: #fff; }
button, .knopf { display: inline-block; padding: .5rem 1rem; border: 0; border-radius: .25rem; background: var(--blau); color: #fff; font: inherit; text-decoration: none; cursor: pointer; }
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: .5rem; border-bottom: 1px solid var(--linie); vertical-align: top; }
.status { font-weight: 600; }
.status.fertig { color: var(--gruen); }
.status.fehler { color: var(--rot); }
.status.rechnet, .status.eingegangen { color: var(--gelb); }
.meldung.fehler { color: var(--rot); font-weight: 600; margin-bottom: 1rem; }
h3.fehler, ul.fehler { color: var(--rot); }
h3.warnung, ul.warnung { color: var(--gelb); }
h3 { font-size: 1rem; margin: .5rem 0 0; }
ul { margin: .25rem 0; padding-left: 1.25rem; }
.blatt { color: #667085; }