:root { --paper:#f3ede0; --ink:#1b1815; --accent:#7a2018; --muted:#847c6e; --line:#d8d2c4;
        --card:#fff; --accent-tint:#f0e3df; --warn:#8a1f1f; }
* { box-sizing: border-box; }
body { margin:0; font-family: system-ui, sans-serif; background: var(--paper); color: var(--ink); }
a { color: var(--accent); }

/* ---- App-Layout: Seitenleiste + Inhalt ---- */
.app { display:flex; min-height:100vh; }
.sidebar { width:230px; flex:0 0 230px; background:var(--card); border-right:1px solid var(--line);
           display:flex; flex-direction:column; position:sticky; top:0; height:100vh; }
.sidebar .brand { display:block; color:var(--accent); font-weight:800; font-size:1.35rem;
                  text-decoration:none; padding:1.1rem 1.2rem .8rem; }
.sidebar .brand small { color:var(--muted); font-weight:400; margin-left:.25rem; font-size:.8rem; }
.sidebar nav { display:flex; flex-direction:column; gap:.1rem; padding:.4rem .6rem; flex:1; overflow-y:auto; }
.sidebar nav a { display:flex; align-items:center; gap:.6rem; padding:.55rem .7rem; border-radius:8px;
                 color:var(--ink); text-decoration:none; font-weight:600; font-size:.95rem; }
.sidebar nav a:hover { background:var(--paper); }
.sidebar nav a.active { background:var(--accent-tint); color:var(--accent); }
.sidebar nav a.disabled { color:var(--muted); cursor:default; font-weight:500; }
.sidebar nav a.disabled:hover { background:none; }
.sidebar nav a .ic { width:1.3rem; text-align:center; font-size:1rem; }
.sidebar .soon { margin-left:auto; font-size:.6rem; text-transform:uppercase; letter-spacing:.05em;
                 background:var(--line); color:var(--muted); padding:.1rem .35rem; border-radius:99px; }
.navsep { font-size:.68rem; text-transform:uppercase; letter-spacing:.08em; color:var(--muted);
          padding:.9rem .8rem .3rem; }
.sidebar .logout { padding:.8rem 1rem; border-top:1px solid var(--line); }
.sidebar .logout button { background:none; border:none; color:var(--muted); cursor:pointer; font:inherit; }
.sidebar .logout button:hover { color:var(--accent); }

.content { flex:1; min-width:0; }
main { max-width: 1000px; margin: 0 auto; padding: 1.6rem 1.4rem 3rem; }

/* ---- Seitenkopf ---- */
.pagehead { display:flex; align-items:center; justify-content:space-between; gap:1rem;
            flex-wrap:wrap; margin-bottom:1.2rem; }
.pagehead h1 { margin:0; }
h1 { font-size:1.5rem; }
h2 { font-size:1.05rem; margin:0 0 .7rem; }

/* ---- Dashboard-Kennzahlen ---- */
.kpis { display:grid; grid-template-columns: repeat(auto-fit,minmax(180px,1fr)); gap:1rem; margin-bottom:1.4rem; }
.kpi { background:var(--card); border:1px solid var(--line); border-radius:14px; padding:1.1rem 1.2rem; }
.kpi .label { font-size:.72rem; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); }
.kpi .value { font-size:1.7rem; font-weight:800; margin-top:.3rem; }
.kpi .sub { font-size:.78rem; color:var(--muted); margin-top:.25rem; }
.kpi.accent { background:var(--accent); border-color:var(--accent); }
.kpi.accent .label, .kpi.accent .value, .kpi.accent .sub { color:#fff; }
.kpi.warn .value { color:var(--warn); }

.cols { display:grid; grid-template-columns: 1fr 1fr; gap:1.2rem; align-items:start; }
.card { background:var(--card); border:1px solid var(--line); border-radius:14px; padding:1.1rem 1.2rem; }
.card .list { border:none; }
.empty { color:var(--muted); font-size:.9rem; }

/* ---- Tabellen / Buttons / Formulare / Badges ---- */
table.list { width:100%; border-collapse:collapse; background:var(--card); border:1px solid var(--line);
             border-radius:10px; overflow:hidden; }
table.list th { text-align:left; font-size:.72rem; text-transform:uppercase; letter-spacing:.05em;
                color:var(--muted); padding:.55rem .7rem; border-bottom:1px solid var(--line); }
table.list td { padding:.55rem .7rem; border-bottom:1px solid var(--line); font-size:.92rem; }
table.list tr:last-child td { border-bottom:none; }
table.list a { color:var(--accent); font-weight:600; text-decoration:none; }
.num { text-align:right; white-space:nowrap; }
.btn { display:inline-block; background:var(--accent); color:#fff; border:none; padding:.5rem .9rem;
       border-radius:8px; font-weight:700; text-decoration:none; cursor:pointer; font-size:.9rem; }
.btn:hover { filter:brightness(1.08); }
.btn.secondary { background:var(--card); color:var(--ink); border:1px solid var(--line); }
.btn.danger { background:var(--warn); color:#fff; }
.actions { display:flex; gap:.5rem; flex-wrap:wrap; }
form.stacked p { display:flex; flex-direction:column; gap:.25rem; margin:.6rem 0; }
form.stacked label { font-weight:600; font-size:.9rem; }
form.stacked input, form.stacked textarea, form.stacked select {
  padding:.5rem; border:1px solid var(--line); border-radius:8px; font:inherit; background:var(--card); }
.badge { display:inline-block; padding:.15rem .5rem; border-radius:99px; font-size:.72rem; font-weight:700;
         background:var(--line); color:var(--ink); }
.badge.entwurf { background:#e6e0d2; } .badge.festgeschrieben { background:#d9c9a8; }
.badge.versendet { background:#c9d6e8; } .badge.bezahlt { background:#cfe3c9; }
.badge.überfällig { background:#eac7c0; } .badge.storniert { background:#ddd; color:var(--muted); }
.badge.angenommen { background:#cfe3c9; } .badge.abgelehnt { background:#eac7c0; }
.msg { padding:.6rem .9rem; border-radius:8px; background:var(--card); border:1px solid var(--line); margin-bottom:.8rem; }
.msg-error { border-color:#b33; }
.itemrows td { padding:.3rem .4rem; }
.itemrows input { width:100%; }

/* ---- Login (nicht angemeldet: zentrierte Karte, keine Seitenleiste) ---- */
.noauth .content { display:flex; align-items:center; justify-content:center; min-height:100vh; }
.noauth main { max-width:360px; width:100%; }
.loginbox { background:var(--card); border:1px solid var(--line); border-radius:16px;
            padding:2rem 1.8rem; box-shadow:0 12px 40px rgba(27,24,21,.08); }
.loginbrand { color:var(--accent); font-weight:800; font-size:1.9rem; text-align:center; margin-bottom:1.4rem; }
.loginbrand small { color:var(--muted); font-weight:400; font-size:.8rem; margin-left:.35rem; }
.loginbox form.stacked input { width:100%; }

/* ---- Mobil: Seitenleiste wird oben zur Tab-Leiste ---- */
@media (max-width: 760px) {
  .app { flex-direction:column; }
  .sidebar { width:100%; flex:none; height:auto; position:sticky; top:0; z-index:10;
             flex-direction:column; border-right:none; border-bottom:1px solid var(--line);
             box-shadow:0 2px 10px rgba(27,24,21,.05); }
  .sidebar .brand { padding:.7rem 1rem .3rem; font-size:1.2rem; }
  .sidebar nav { flex-flow:row nowrap; overflow-x:auto; gap:.15rem; padding:.3rem .6rem .5rem;
                 -webkit-overflow-scrolling:touch; }
  .sidebar nav a { flex:0 0 auto; font-size:.82rem; padding:.4rem .6rem; white-space:nowrap; }
  .sidebar nav a .ic { display:none; }
  .sidebar .soon, .navsep { display:none; }
  .sidebar .logout { border-top:none; padding:.2rem 1rem .5rem; position:absolute; top:.6rem; right:.4rem; }
  main { padding:1.1rem 1rem 2.5rem; }
  .pagehead { flex-direction:column; align-items:stretch; gap:.7rem; }
  .cols { grid-template-columns: 1fr; }
  table.list { font-size:.85rem; }
  table.list th, table.list td { padding:.45rem .5rem; }
}