:root { --text:#1b1d21; --leise:#6a6f78; --linie:#d9dce1; --hinter:#f5f6f8; --akzent:#0b5cad;
        --ok:#1d7a3a; --fehler:#b3261e; --warn:#8a5a00; }
* { box-sizing: border-box; }
body { margin:0; font: 15px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color:var(--text); background:#fff; }
a { color: var(--akzent); }
.kopf { display:flex; flex-wrap:wrap; gap:.5rem 1.2rem; align-items:center; padding:.6rem 1rem; border-bottom:1px solid var(--linie); background:var(--hinter); }
.kopf .marke { font-weight:700; text-decoration:none; color:var(--text); }
.kopf .marke span { color: var(--leise); font-weight:400; }
.kopf nav { display:flex; flex-wrap:wrap; gap:.3rem .9rem; align-items:center; }
.kopf nav a { text-decoration:none; }
main { padding: 1rem; max-width: 1200px; }
h1 { font-size: 1.4rem; margin:.2rem 0 1rem; } h2 { font-size:1.1rem; margin:1.4rem 0 .5rem; }
table { border-collapse: collapse; width:100%; margin:.5rem 0 1rem; }
th, td { text-align:left; padding:.35rem .5rem; border-bottom:1px solid var(--linie); vertical-align:top; }
th { background: var(--hinter); font-weight:600; }
td.zahl, th.zahl { text-align:right; white-space:nowrap; font-variant-numeric: tabular-nums; }
input, select, textarea { font:inherit; padding:.35rem .45rem; border:1px solid var(--linie); border-radius:4px; max-width:100%; }
textarea { width:100%; min-height:3.5rem; }
label { display:block; margin:.5rem 0; }
label input, label select, label textarea { display:block; width:100%; margin-top:.15rem; }
.raster { display:grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap:0 1rem; }
.knopf, button { font:inherit; padding:.4rem .8rem; border:1px solid var(--akzent); background:var(--akzent); color:#fff; border-radius:4px; cursor:pointer; }
.knopf.zweit, button.zweit { background:#fff; color:var(--akzent); }
button.gefahr { border-color: var(--fehler); background:#fff; color:var(--fehler); }
button.link { background:none; border:none; color:var(--akzent); padding:0; text-decoration:underline; }
.voll { width:100%; }
form.inline { display:inline; }
.aktionen { display:flex; flex-wrap:wrap; gap:.5rem; margin:.8rem 0; align-items:center; }
.meldungen { margin-bottom:1rem; }
.meldung { padding:.5rem .7rem; border-radius:4px; margin:.3rem 0; background:var(--hinter); border-left:4px solid var(--leise); }
.meldung.ok { border-color: var(--ok); } .meldung.fehler { border-color: var(--fehler); } .meldung.warnung { border-color: var(--warn); }
.kasten { border:1px solid var(--linie); border-radius:6px; padding:.8rem 1rem; margin:1rem 0; }
.kasten.warnung { border-color: var(--warn); background:#fff8e6; } .kasten.fehler { border-color: var(--fehler); background:#fdecea; }
.leise { color: var(--leise); } .klein { font-size:.85rem; }
.status { display:inline-block; padding:0 .4rem; border-radius:3px; background:var(--hinter); font-size:.85rem; }
.hervor { font-weight:700; font-size:1.1rem; }
.auth { background: var(--hinter); }
.karte { background:#fff; border:1px solid var(--linie); border-radius:8px; padding:1.2rem 1.4rem; margin:3rem auto; }
.schmal { max-width: 420px; }
.trenner { text-align:center; color:var(--leise); margin: .8rem 0; }
.qr { width: 200px; height: 200px; display:block; margin:.5rem 0; }
.codes { columns: 2; font-family: monospace; }
.liste { padding-left: 1.1rem; }
.positionen input, .positionen select { width:100%; }
.positionen td { padding:.25rem; }
.breit { min-width: 16rem; }
code { background: var(--hinter); padding: 0 .2rem; }
@media (max-width: 700px) { .positionen, .positionen tbody, .positionen tr, .positionen td { display:block; width:100%; } .positionen thead { display:none; } }