:root{
  --blau:#3a7bd5; --blau-d:#2f63ab; --bg:#eef1f5; --panel:#ffffff;
  --linie:#d4dae2; --text:#1f2733; --grau:#6b7684; --gruen:#2e9e5b; --rot:#d0402a;
  --sidebar:#f4f6f9; --head:#e8edf3;
}
*{box-sizing:border-box}
body{margin:0;font-family:"Segoe UI",Tahoma,Arial,sans-serif;font-size:14px;
  color:var(--text);background:var(--bg)}
a{color:var(--blau-d);text-decoration:none}
a:hover{text-decoration:underline}

/* Menuezeile */
.menubar{display:flex;align-items:center;gap:8px;background:linear-gradient(#fbfcfe,#e7edf4);
  border-bottom:1px solid var(--linie);padding:6px 12px}
.brand{font-weight:700;margin-right:14px;color:#243447}
.mb-btn{background:#fff;border:1px solid var(--linie);border-radius:5px;padding:4px 10px;
  color:var(--text);font-size:13px}
.mb-btn:hover{background:#f0f5fb;text-decoration:none;border-color:var(--blau)}
.mb-right{margin-left:auto;color:var(--grau);font-size:12px}

/* Layout */
.layout{display:flex;min-height:calc(100vh - 41px)}
.sidebar{width:200px;background:var(--sidebar);border-right:1px solid var(--linie);padding:10px 0;flex-shrink:0}
.sidebar a{display:block;padding:8px 16px;color:var(--text);border-left:3px solid transparent}
.sidebar a:hover{background:#e9eff6;text-decoration:none}
.sidebar a.active{background:#dce8f7;border-left-color:var(--blau);font-weight:600}
.side-group{padding:12px 16px 4px;font-size:11px;text-transform:uppercase;
  letter-spacing:.5px;color:var(--grau)}
.content{flex:1;padding:20px 26px;overflow:auto}

/* Karten / Tabellen */
h1{font-size:22px;margin:0 0 16px;font-weight:600}
h2{font-size:16px;margin:22px 0 10px;font-weight:600;color:#33424f}
.cards{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:22px}
.card{background:var(--panel);border:1px solid var(--linie);border-radius:8px;
  padding:14px 18px;min-width:150px;box-shadow:0 1px 2px rgba(0,0,0,.03)}
.card .zahl{font-size:26px;font-weight:700;color:#243447}
.card .lbl{color:var(--grau);font-size:12px;text-transform:uppercase;letter-spacing:.4px}
.card.gruen .zahl{color:var(--gruen)} .card.rot .zahl{color:var(--rot)}

table{width:100%;border-collapse:collapse;background:var(--panel);
  border:1px solid var(--linie);border-radius:8px;overflow:hidden}
thead th{background:var(--head);text-align:left;padding:9px 12px;font-size:12px;
  text-transform:uppercase;letter-spacing:.4px;color:#41505e;border-bottom:1px solid var(--linie)}
tbody td{padding:9px 12px;border-bottom:1px solid #eef1f5}
tbody tr:hover{background:#f6f9fc}
.num{text-align:right;font-variant-numeric:tabular-nums}
.muted{color:var(--grau)}

.badge{display:inline-block;padding:2px 9px;border-radius:11px;font-size:12px;font-weight:600}
.b-offen{background:#fdeede;color:#b5651a}
.b-eingereicht{background:#e2ebfb;color:#2f63ab}
.b-bezahlt{background:#e3f4ea;color:#2e7d47}
.b-vers{background:#f0e6fb;color:#7b3fbf}

/* Buttons */
.btn{display:inline-block;background:var(--blau);color:#fff;border:none;border-radius:6px;
  padding:8px 16px;font-size:14px;cursor:pointer}
.btn:hover{background:var(--blau-d);text-decoration:none;color:#fff}
.btn.grau{background:#eaeef3;color:var(--text)} .btn.grau:hover{background:#dde4ec}
.btn.rot{background:var(--rot)} .btn.rot:hover{background:#a8331f}
.btn.sm{padding:4px 10px;font-size:13px}
.toolbar{display:flex;gap:8px;align-items:center;margin-bottom:14px}
.toolbar .spacer{flex:1}

/* Formulare */
.form-panel{background:var(--panel);border:1px solid var(--linie);border-radius:8px;padding:18px 22px;max-width:900px}
.form-row{display:flex;gap:16px;flex-wrap:wrap;margin-bottom:4px}
.fld{display:flex;flex-direction:column;margin-bottom:12px;flex:1;min-width:180px}
.fld.klein{max-width:150px} .fld.mini{max-width:110px}
.fld label{font-size:12px;color:var(--grau);margin-bottom:4px}
input,select,textarea{font-family:inherit;font-size:14px;padding:7px 9px;border:1px solid #c6ccd5;
  border-radius:5px;background:#fff}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--blau);
  box-shadow:0 0 0 2px rgba(58,123,213,.15)}
.flash{background:#e3f4ea;border:1px solid #b6e0c4;color:#256b3d;padding:9px 14px;
  border-radius:6px;margin-bottom:16px}

/* Rechnungseditor */
.editor-head{display:flex;gap:16px;flex-wrap:wrap;background:var(--panel);
  border:1px solid var(--linie);border-radius:8px;padding:16px 20px;margin-bottom:16px}
.pos-tabelle input,.pos-tabelle select{padding:5px 6px;font-size:13px;width:100%}
.pos-tabelle td{padding:4px 6px}
.pos-tabelle .col-menge{width:70px}.pos-tabelle .col-nr{width:90px}
.pos-tabelle .col-preis{width:100px}.pos-tabelle .col-mwst{width:90px}
.pos-tabelle .col-rab{width:70px}.pos-tabelle .col-x{width:34px}
.summen{background:var(--panel);border:1px solid var(--linie);border-radius:8px;
  padding:14px 20px;margin-top:16px;max-width:360px;margin-left:auto}
.summen .zeile{display:flex;justify-content:space-between;padding:3px 0}
.summen .gesamt{border-top:2px solid var(--linie);margin-top:6px;padding-top:8px;
  font-weight:700;font-size:16px}
.vers-box{background:#faf6ff;border:1px solid #e5d5f7;border-radius:8px;padding:14px 20px;margin-bottom:16px}
.hidden{display:none}
.hinweis{background:#fff8e6;border:1px solid #f0e0a8;border-radius:6px;padding:10px 14px;
  font-size:13px;color:#7a5c12;margin-bottom:14px}

/* Logo */
.logo-box{display:flex;gap:20px;align-items:flex-start;margin-bottom:12px}
.logo-vorschau{width:200px;height:110px;border:1px dashed #bcc4cf;border-radius:8px;
  display:flex;align-items:center;justify-content:center;background:#fafbfc;
  text-align:center;padding:8px;flex-shrink:0}
.logo-vorschau img{max-width:100%;max-height:100%}

/* Login */
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,#e8edf3,#dbe6f2)}
.login-card{background:#fff;border:1px solid var(--linie);border-radius:12px;
  padding:32px 34px;width:340px;box-shadow:0 8px 30px rgba(30,50,80,.12);text-align:center}
.login-card h1{font-size:20px;margin:6px 0 4px}
.login-card p{color:var(--grau);margin:0 0 20px;font-size:13px}
.login-card input[type=password]{width:100%;margin-bottom:14px}
.login-card .btn{width:100%}
.login-logo{font-size:34px;margin-bottom:4px}
.mb-logout{color:var(--grau);font-size:12px;margin-left:14px}