:root{
  --primary:#800020; --beige:#f5ede3; --moss:#556b2f; --royal:#003366;
}
*{box-sizing:border-box} html,body{height:100%}
body{margin:0;background:var(--beige);color:var(--royal);font-family:Inter,system-ui,"EB Garamond",serif;}
.wrapper{display:flex;min-height:100vh}
.sidebar{width:300px;background:var(--beige);padding:24px;border-right:2px solid var(--royal)}
.brand{display:flex;gap:12px;align-items:center}
.brand img{width:42px;height:42px;object-fit:contain;border-radius:8px;border:2px solid var(--primary)}
.brand h1{font-family:"EB Garamond",serif;font-size:20px;margin:0;color:var(--primary)}
.nav{display:flex;flex-direction:column;gap:8px;margin-top:12px}
.nav button{display:flex;gap:10px;align-items:center;border:2px solid var(--royal);background:transparent;padding:10px 12px;border-radius:12px;font-weight:700;cursor:pointer;color:var(--royal)}
.nav button.active{border-color:var(--primary);color:var(--primary)}
.content{flex:1;padding:24px}
.card{background:var(--beige);border-radius:16px;padding:18px;border:2px solid var(--royal)}
.section{display:none}
.section.active{display:block}
.section-title{font-family:"EB Garamond",serif;font-size:28px;color:var(--primary);margin:0 0 12px}
.grid{display:grid;gap:18px}
.cols-2{grid-template-columns:1fr 1fr}
.cols-3{grid-template-columns:1fr 1fr 1fr}
@media(max-width:1000px){.cols-2,.cols-3{grid-template-columns:1fr}}
.btn{appearance:none;border:2px solid var(--primary);border-radius:12px;padding:10px 14px;font-weight:700;cursor:pointer;background:var(--primary);color:var(--beige)}
.btn.ghost{background:transparent;color:var(--primary)}
.btn.moss{border-color:var(--moss);background:var(--moss);color:var(--beige)}
.input,select,textarea{width:100%;padding:10px 12px;border-radius:12px;border:2px solid var(--royal);background:transparent;color:var(--royal)}
.label{font-size:12px;font-weight:700;color:var(--royal);margin-bottom:6px;display:block}
.table{width:100%;border-collapse:collapse;border:2px solid var(--royal)}
.table th,.table td{padding:10px 8px;border-bottom:2px solid var(--royal);text-align:left}
.badge{font-size:11px;padding:4px 8px;border-radius:999px;border:2px solid var(--royal);color:var(--royal);background:transparent}
.status-open{border-color:var(--primary);color:var(--primary)}
.status-paid{border-color:var(--moss);color:var(--moss)}
.status-overdue{border-color:var(--royal);color:var(--royal)}
.topbar{display:none}
@media(max-width:780px){
  .sidebar{position:fixed;inset:0 auto 0 0;transform:translateX(-110%);transition:.2s;z-index:20}
  body.nav-open .sidebar{transform:none}
  .topbar{position:sticky;top:0;left:0;right:0;display:flex;gap:12px;align-items:center;background:var(--beige);padding:10px 16px;border-bottom:2px solid var(--royal);z-index:30}
}
.login-wrap{max-width:420px;margin:80px auto;padding:20px}
.login-title{font-family:"EB Garamond",serif;color:var(--primary);font-size:28px;margin:0 0 12px}
.small{color:var(--moss);font-size:12px}
/* Chips */
.chips-wrap{display:flex;flex-wrap:wrap;gap:6px;border:2px solid var(--royal);border-radius:12px;padding:6px}
.chip{display:inline-flex;align-items:center;gap:6px;padding:6px 8px;border-radius:999px;background:transparent;border:2px solid var(--primary);color:var(--primary);font-size:12px;font-weight:700}
.chip button{appearance:none;border:none;background:transparent;cursor:pointer;font-weight:900;line-height:1;color:var(--primary)}
.chips-wrap input{border:none;outline:none;min-width:160px;padding:6px;background:transparent;color:var(--royal)}
.link{color:var(--moss);text-decoration:underline;cursor:pointer}

/* --- Hover-Optimierungen (nur mit deinen Farben) --- */
.nav button:hover{ border-color:var(--primary); color:var(--primary); }
.btn:hover{ outline:2px solid var(--moss); }
.btn.ghost:hover{ color:var(--primary); border-color:var(--primary); }
.link:hover{ color:var(--primary); text-decoration:underline; }
.table tbody tr:hover td{ border-bottom-color:var(--primary); }