:root { --rand:#d0d4da; --grau:#5b6470; --blau:#0b5cad; --rot:#b42318; --gelb:#b54708; --gruen:#067647; --hell:#f5f6f8; }
* { box-sizing: border-box; }
body { margin:0; font: 14px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color:#1d2127; background:#fff; }
a { color: var(--blau); text-decoration: none; } a:hover { text-decoration: underline; }
header { display:flex; align-items:center; gap:18px; padding:8px 16px; border-bottom:1px solid var(--rand); background:var(--hell); flex-wrap:wrap; }
header .marke { font-weight:700; color:#1d2127; }
header nav { display:flex; gap:14px; flex-wrap:wrap; }
header nav a.aktiv { font-weight:600; text-decoration: underline; }
header .wer { margin-left:auto; color:var(--grau); display:flex; gap:10px; align-items:center; }
.testband { background:#fde68a; color:#78350f; text-align:center; font-weight:700; padding:3px; letter-spacing:.05em; }
main { padding:16px; max-width:1400px; }
h1 { font-size:20px; margin:4px 0 12px; } h2 { font-size:16px; margin:22px 0 8px; border-bottom:1px solid var(--rand); padding-bottom:3px; }
table { border-collapse: collapse; width:100%; }
th, td { text-align:left; padding:5px 7px; border-bottom:1px solid #eceef1; vertical-align:top; }
th { background:var(--hell); font-weight:600; white-space:nowrap; }
td.zahl, th.zahl { text-align:right; font-variant-numeric: tabular-nums; }
tr.geliefert td { color:var(--grau); }
.filter { display:flex; gap:8px; flex-wrap:wrap; align-items:end; margin-bottom:12px; padding:8px; background:var(--hell); border:1px solid var(--rand); border-radius:4px; }
.filter label { display:flex; flex-direction:column; font-size:12px; color:var(--grau); }
input, select, textarea, button { font: inherit; padding:4px 6px; border:1px solid #b8bec7; border-radius:3px; }
button, .knopf { background:var(--blau); color:#fff; border-color:var(--blau); cursor:pointer; padding:5px 10px; border-radius:3px; display:inline-block; }
button.zweit, .knopf.zweit { background:#fff; color:var(--blau); }
.marke-status { display:inline-block; padding:0 6px; border-radius:9px; font-size:12px; background:#e8eef7; white-space:nowrap; }
.marke-status.GELIEFERT { background:#e7f5ec; color:var(--gruen); }
.termin-BESTAETIGT { color:var(--gruen); font-weight:600; }
.termin-VORGESCHLAGEN { color:var(--gelb); }
.termin-fehlt { color:var(--rot); }
.hinweis { color:var(--grau); font-size:12px; }
.raster { display:grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap:4px 28px; }
dl.daten { display:grid; grid-template-columns: 170px 1fr; gap:3px 10px; margin:0; }
dl.daten dt { color:var(--grau); } dl.daten dd { margin:0; }
.kasten { border:1px solid var(--rand); border-radius:4px; padding:10px 12px; margin:8px 0; background:#fff; }
.meldungen { list-style:none; padding:0; margin:0 0 12px; }
.meldungen li { padding:6px 10px; border-radius:3px; margin-bottom:4px; }
.meldungen .success { background:#e7f5ec; } .meldungen .error { background:#fde8e7; color:var(--rot); }
.rot { color:var(--rot); } .gruen { color:var(--gruen); } .gelb { color:var(--gelb); }
form.zeile { display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin:4px 0; }
.blaettern { margin:10px 0; display:flex; gap:10px; align-items:center; }
.ereignisse td:first-child { white-space:nowrap; color:var(--grau); }
.errorlist { color:var(--rot); margin:2px 0; padding-left:16px; }
form.formular p { margin:6px 0; } form.formular label { display:inline-block; min-width:170px; color:var(--grau); }
.ueberschneidung td { background:#fff4e5; }
td:first-child a, td:nth-child(3) a { white-space:nowrap; }
.ampel { display:inline-block; width:11px; height:11px; border-radius:50%; vertical-align:middle; background:#c4c9d0; }
.ampel.rot { background:var(--rot); } .ampel.gelb { background:#f79009; } .ampel.gruen { background:var(--gruen); }
.stufe-rot { color:var(--rot); font-weight:600; } .stufe-gelb { color:var(--gelb); font-weight:600; } .stufe-gruen { color:var(--gruen); font-weight:600; }
.balken { position:relative; height:14px; background:#eef0f3; border-radius:3px; min-width:70px; overflow:hidden; }
.balken > span { position:absolute; left:0; top:0; bottom:0; background:#8fb3dd; }
.balken.voll > span { background:#f0a3a0; } .balken > em { position:relative; font-size:11px; font-style:normal; padding-left:4px; }
code, .mono { font-family: ui-monospace, Consolas, monospace; font-size:12.5px; word-break:break-all; }
.schritte { margin:4px 0 8px 18px; padding:0; } .schritte li { margin:2px 0; }
details.aktion { display:inline-block; margin:2px 6px 2px 0; } details.aktion > summary { cursor:pointer; color:var(--blau); }
details.aktion[open] { display:block; border:1px solid var(--rand); border-radius:4px; padding:6px 8px; margin:6px 0; }
.leiste { display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin:6px 0; }
@media (max-width: 700px) { dl.daten { grid-template-columns: 1fr; } header .wer { margin-left:0; } table { font-size:13px; display:block; overflow-x:auto; } main { padding:12px 16px; } }