:root { --text: #1d1d1f; --grau: #6e6e73; --linie: #d2d2d7; --hell: #f5f5f7; --rot: #b3261e; --gruen: #1e7a34; --blau: #1d4ed8; --gelb: #8a6100; }
* { box-sizing: border-box; }
body { margin: 0; font: 15px/1.45 system-ui, -apple-system, "Segoe UI", sans-serif; color: var(--text); background: #fff; }
header { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .6rem 1rem; border-bottom: 1px solid var(--linie); background: var(--hell); flex-wrap: wrap; }
nav { display: flex; gap: 1rem; flex-wrap: wrap; align-items: center; }
nav a { color: var(--text); text-decoration: none; }
nav a:hover { text-decoration: underline; }
.abmelden { display: flex; gap: .5rem; align-items: center; }
main { max-width: 1100px; margin: 0 auto; padding: 1rem; }
h1 { font-size: 1.5rem; margin: .5rem 0 1rem; }
h2 { font-size: 1.1rem; margin: 1.5rem 0 .5rem; }
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; vertical-align: top; padding: .4rem .5rem; border-bottom: 1px solid var(--linie); }
th { font-weight: 600; color: var(--grau); font-size: .85rem; }
td.datum { white-space: nowrap; font-weight: 600; }
tr.unbestaetigt { background: #fdecea; }
tr.ueberfaellig td.datum { color: var(--rot); }
tr.gestrichen { color: var(--grau); text-decoration: line-through; }
small { color: var(--grau); }
code { font-size: .85em; word-break: break-all; }
.marke { display: inline-block; font-size: .75rem; font-weight: 600; padding: .05rem .4rem; border-radius: 3px; border: 1px solid; margin: .1rem .2rem .1rem 0; text-decoration: none; }
.marke.rot { color: var(--rot); } .marke.gruen { color: var(--gruen); } .marke.blau { color: var(--blau); } .marke.gelb { color: var(--gelb); } .marke.grau { color: var(--grau); }
.leer { color: var(--grau); }
.fehler { color: var(--rot); font-weight: 600; }
.warnung { border-left: 4px solid var(--rot); padding-left: .8rem; }
.hinweise { border-left: 4px solid var(--gelb); padding-left: .8rem; }
dl.daten { display: grid; grid-template-columns: max-content 1fr; gap: .3rem 1rem; }
dl.daten dt { color: var(--grau); }
dl.daten dd { margin: 0; }
.gross { font-size: 1.3rem; font-weight: 700; }
form { margin: .4rem 0; }
.aktionen form, .suche, .raster { display: flex; gap: .5rem; align-items: end; flex-wrap: wrap; }
label { display: flex; flex-direction: column; gap: .2rem; font-size: .85rem; color: var(--grau); }
input, select, button { font: inherit; padding: .35rem .5rem; border: 1px solid var(--linie); border-radius: 4px; background: #fff; color: var(--text); }
button { cursor: pointer; background: var(--hell); }
button.haupt { background: var(--gruen); color: #fff; border-color: var(--gruen); }
button.gefahr { color: var(--rot); border-color: var(--rot); }
.anmeldung { max-width: 340px; margin: 4rem auto; display: flex; flex-direction: column; gap: .8rem; }
details { margin: .5rem 0; }
@media (max-width: 700px) { table { font-size: .85rem; } dl.daten { grid-template-columns: 1fr; } }
.widerstreit { background: var(--rot); color: #fff; font-weight: 700; padding: .7rem 1rem; border-radius: 4px; font-size: 1.05rem; }
tr.widerstreit-zeile { background: #fdecea; }
.gericht { font-size: 1.05rem; margin: -.5rem 0 .5rem; }
details.rohdaten summary { color: var(--grau); font-size: .8rem; cursor: pointer; }