:root{--sand:#f5f0e3;--karte:#fffdf8;--terra:#c75c38;--terra-dunkel:#a84a2b;--salbei:#8c9a7a;--tinte:#2e2924;--tinte-60:#6f675e;--linie:#e5dcc9;--side:#2e2924;--side-ink:#f5f0e3;--gruen:#3d8b4f;--orange:#c98a2b;--rot:#b3402e}*{box-sizing:border-box;margin:0;padding:0}html,body{height:100%}body{background:var(--sand);color:var(--tinte);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:15px;line-height:1.5}a{color:var(--terra);text-decoration:none}a:hover{text-decoration:underline}button{font:inherit;cursor:pointer}input,select,textarea{font:inherit;color:var(--tinte);border:1px solid var(--linie);background:#fff;border-radius:8px;width:100%;padding:8px 10px}input:focus,select:focus,textarea:focus{outline:2px solid var(--terra);outline-offset:0;border-color:#0000}.app{min-height:100vh;display:flex}.side{background:var(--side);width:220px;color:var(--side-ink);flex-direction:column;flex-shrink:0;gap:4px;height:100vh;padding:20px 14px;display:flex;position:sticky;top:0}.side .logo{align-items:center;gap:10px;padding:4px 8px 18px;display:flex}.side .logo .zeichen{background:var(--terra);border-radius:9px;place-items:center;width:34px;height:34px;font-size:18px;display:grid}.side .logo .wort{letter-spacing:.2px;font-weight:700}.side nav{flex-direction:column;gap:2px;display:flex}.side nav a{color:var(--side-ink);opacity:.75;border-radius:8px;justify-content:space-between;align-items:center;padding:9px 10px;font-weight:500;display:flex}.side nav a:hover{opacity:1;background:#ffffff0f;text-decoration:none}.side nav a.aktiv{opacity:1;background:#ffffff1f}.side .zaehler{background:var(--terra);color:#fff;border-radius:99px;padding:1px 8px;font-size:11px;font-weight:700}.side .fuss{opacity:.6;margin-top:auto;padding:8px 10px;font-size:12px}.side .fuss button{color:var(--side-ink);background:0 0;border:1px solid #ffffff40;border-radius:8px;width:100%;margin-top:8px;padding:6px 12px}.side .fuss button:hover{background:#ffffff14}.inhalt{flex:1;max-width:1060px;padding:28px 34px}.inhalt h1{margin-bottom:18px;font-size:22px}.inhalt h2{margin:22px 0 10px;font-size:16px}.karte{background:var(--karte);border:1px solid var(--linie);border-radius:14px;padding:16px 18px}.kpis{grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px;margin-bottom:20px;display:grid}.kpi{background:var(--karte);border:1px solid var(--linie);border-radius:14px;padding:14px 16px}.kpi .kl{color:var(--tinte-60);text-transform:uppercase;letter-spacing:.4px;font-size:12px}.kpi .kw{margin-top:2px;font-size:20px;font-weight:700}table{border-collapse:collapse;width:100%}th{text-align:left;color:var(--tinte-60);text-transform:uppercase;letter-spacing:.4px;border-bottom:1px solid var(--linie);padding:8px 10px;font-size:12px}td{border-bottom:1px solid var(--linie);vertical-align:top;padding:10px}tr:last-child td{border-bottom:none}tr.klick{cursor:pointer}tr.klick:hover td{background:#c75c380d}.rechts{text-align:right}.chips{flex-wrap:wrap;gap:8px;margin-bottom:14px;display:flex}.chip{border:1px solid var(--linie);background:var(--karte);color:var(--tinte-60);border-radius:99px;padding:5px 14px;font-size:13px;font-weight:500}.chip.aktiv{background:var(--terra);border-color:var(--terra);color:#fff}.status{border-radius:99px;padding:2px 10px;font-size:12px;font-weight:600;display:inline-block}.status.bezahlt{color:var(--gruen);background:#3d8b4f24}.status.offen{color:var(--orange);background:#c98a2b29}.status.beauftragt{color:#5c6b4c;background:#8c9a7a33}.status.inbox{color:var(--terra);background:#c75c3824}.knopf{background:var(--terra);color:#fff;border:none;border-radius:9px;padding:9px 16px;font-weight:600}.knopf:hover{background:var(--terra-dunkel)}.knopf.zweit{background:var(--karte);color:var(--tinte);border:1px solid var(--linie)}.knopf.zweit:hover{background:var(--sand)}.knopf.gefahr{color:var(--rot);background:0 0;border:1px solid #b3402e66}.knopf.gefahr:hover{background:#b3402e12}.knopf:disabled{opacity:.5;cursor:default}.form-gitter{grid-template-columns:1fr 1fr;gap:12px;display:grid}.feld label{color:var(--tinte-60);margin-bottom:4px;font-size:12px;font-weight:600;display:block}.voll{grid-column:1/-1}.hinweis{color:var(--tinte-60);font-size:13px}.fehler{color:var(--rot);margin-top:8px;font-size:13px}.ok-meldung{color:var(--gruen);margin-top:8px;font-size:13px}.dropzone{border:2px dashed var(--linie);text-align:center;color:var(--tinte-60);background:var(--karte);border-radius:14px;padding:26px;transition:border-color .15s}.dropzone.drag{border-color:var(--terra);color:var(--terra)}.login-wrap{place-items:center;min-height:100vh;padding:20px;display:grid}.login-box{width:100%;max-width:380px}.login-box .logo{justify-content:center;align-items:center;gap:12px;margin-bottom:22px;display:flex}.login-box .logo .zeichen{background:var(--terra);border-radius:12px;place-items:center;width:44px;height:44px;font-size:22px;display:grid}.login-box h1{text-align:center;margin-bottom:4px;font-size:20px}.login-box .unter{text-align:center;color:var(--tinte-60);margin-bottom:20px;font-size:13px}.balken{background:var(--linie);border-radius:99px;height:8px;margin-top:6px;overflow:hidden}.balken>div{background:var(--salbei);height:100%}.balken>div.ueber{background:var(--rot)}@media (max-width:760px){.app{flex-direction:column}.side{flex-flow:wrap;align-items:center;width:100%;height:auto;padding:10px 12px;position:static}.side .logo{padding:4px 8px}.side nav{flex-flow:wrap}.side .fuss{margin:0 0 0 auto}.side .fuss button{width:auto;margin:0}.inhalt{padding:18px 14px}.form-gitter{grid-template-columns:1fr}}