:root { --gruen: #1f4d3f; --grau: #f2f2f2; --rand: #d0d0d0; --rot: #a31d1d; }
* { box-sizing: border-box; }
body { font-family: Calibri, Carlito, system-ui, sans-serif; font-size: 16px; margin: 0; color: #111; background: #fafafa; }
header { background: var(--gruen); color: #fff; display: flex; align-items: center; gap: 1.5rem; padding: .6rem 1.5rem; }
header a { color: #fff; text-decoration: none; }
header nav { display: flex; gap: 1rem; flex: 1; }
header .benutzer { display: flex; gap: .8rem; align-items: center; font-size: .9rem; }
main { max-width: 1100px; margin: 1.5rem auto; padding: 0 1.5rem; }
h1 { font-size: 1.5rem; margin: 0 0 1rem; }
h2 { font-size: 1.15rem; margin: 1.6rem 0 .6rem; }
table { border-collapse: collapse; width: 100%; background: #fff; }
th, td { border-bottom: 1px solid var(--rand); padding: .4rem .6rem; text-align: left; vertical-align: top; }
th { background: var(--grau); font-weight: 600; }
td.zahl, th.zahl { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
tr.summe td { font-weight: 700; background: var(--grau); }
.karte { background: #fff; border: 1px solid var(--rand); padding: 1rem; margin: 1rem 0; }
.fehler { background: #fdeaea; border: 1px solid var(--rot); color: var(--rot); padding: .7rem 1rem; margin: 1rem 0; }
.warnung { background: #fff6dd; border: 1px solid #c9a227; padding: .7rem 1rem; margin: 1rem 0; }
.status { display: inline-block; padding: .1rem .6rem; border-radius: 1rem; background: var(--grau); font-size: .85rem; }
.status.freigegeben, .status.festgeschrieben { background: #d7eedd; }
.status.berechnet { background: #e3ecf8; }
form.inline { display: inline; }
label { display: block; margin: .5rem 0 .2rem; font-size: .9rem; }
input, select, textarea { font: inherit; padding: .35rem .5rem; border: 1px solid var(--rand); max-width: 100%; }
input[type=text], input[type=password], input[type=date], input[type=month], input[type=email], select, textarea { width: 100%; max-width: 32rem; }
textarea { font-family: Consolas, monospace; min-height: 4.5rem; }
button { font: inherit; background: var(--gruen); color: #fff; border: 0; padding: .45rem 1rem; cursor: pointer; }
button.link { background: none; color: #fff; padding: 0; text-decoration: underline; }
button.gefahr { background: var(--rot); }
button.sekundaer { background: #fff; color: var(--gruen); border: 1px solid var(--gruen); }
.leise { color: #666; font-size: .9rem; }
.zeile { display: flex; gap: 1rem; flex-wrap: wrap; align-items: flex-end; }
.zaehler { display: flex; gap: 1rem; flex-wrap: wrap; }
.zaehler div { background: #fff; border: 1px solid var(--rand); padding: .6rem 1rem; min-width: 8rem; }
.zaehler strong { display: block; font-size: 1.4rem; }