:root{
  --page:#F4F1EA; --header:#17150F; --gold:#B0862F; --goldl:#D9B24A;
  --ink:#1e1b16; --mut:#8a8478; --hmut:#b6b0a3; --card:#fff; --line:#E4DECF;
  --green:#2f9e5b; --amber:#cf9327; --red:#cc4b47;
}
*{box-sizing:border-box}
body{margin:0;background:var(--page);color:var(--ink);
  font-family:Carlito,"Segoe UI",system-ui,sans-serif;-webkit-font-smoothing:antialiased}
.header{background:var(--header);border-bottom:3px solid var(--goldl);
  padding:16px 40px;display:flex;justify-content:space-between;align-items:center}
.header .brand b{color:#fff;font-size:26px}
.header .brand span{color:var(--goldl);font-size:26px;font-weight:bold;margin-left:10px}
.header .brand small{display:block;color:var(--hmut);font-size:14px;margin-top:2px}
.header .meta{text-align:right;color:#fff;font-size:15px}
.header .meta small{display:block;color:var(--hmut);font-size:13px}
.header .meta a{color:var(--hmut);font-size:12px;text-decoration:none;border:1px solid #3a352c;
  padding:3px 8px;border-radius:6px;margin-top:6px;display:inline-block}
.wrap{padding:26px 40px;max-width:1480px;margin:0 auto}
h2{font-size:19px;margin:26px 0 10px}
.sub{color:var(--mut);font-size:13px;margin:-6px 0 12px}
.cards{display:grid;grid-template-columns:repeat(5,1fr);gap:18px}
.card{background:var(--card);border:1px solid var(--line);border-radius:12px;
  padding:16px 18px;position:relative;box-shadow:0 3px 10px rgba(58,50,32,.06)}
.card .bar{position:absolute;left:0;top:14px;bottom:14px;width:6px;border-radius:3px;background:var(--gold)}
.card label{color:var(--mut);font-size:13px;letter-spacing:.4px;padding-left:12px}
.card .val{font-size:30px;font-weight:bold;padding-left:12px;margin-top:8px}
.card .foot{color:var(--mut);font-size:13px;padding-left:12px;margin-top:6px}
.bar.green{background:var(--green)} .bar.amber{background:var(--amber)} .bar.red{background:var(--red)}
.liq{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:18px}
.liq .total{background:var(--header);border-radius:12px;padding:16px 20px;position:relative;color:#fff}
.liq .total .bar{background:var(--goldl)}
.liq .total label{color:var(--hmut)} .liq .total .val{color:#fff;font-size:40px}
.liq .total .foot{color:var(--hmut)}
table{width:100%;border-collapse:separate;border-spacing:0 8px}
th{text-align:left;color:var(--mut);font-size:13px;font-weight:normal;padding:0 14px}
td{background:var(--card);padding:13px 14px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
td:first-child{border-left:1px solid var(--line);border-radius:8px 0 0 8px}
td:last-child{border-right:1px solid var(--line);border-radius:0 8px 8px 0}
.dot{display:inline-block;width:12px;height:12px;border-radius:50%;margin-right:12px;vertical-align:middle}
.dot.rot{background:var(--red)} .dot.gelb{background:var(--amber)} .dot.gruen{background:var(--green)}
.tf.rot{color:var(--red)} .tf.gelb{color:var(--amber)} .tf.gruen{color:var(--green)}
.dot.grau{background:var(--mut)} .bar.grau{background:var(--mut)}
.footer{color:var(--mut);font-size:12px;padding:20px 40px;border-top:1px solid var(--line);margin-top:20px}
/* Stufe 2 */
.cards.c4{grid-template-columns:repeat(4,1fr)}
.klist .krow{cursor:pointer}
.klist .krow:hover td{background:#fbf9f3;border-color:var(--goldl)}
.chip{display:inline-block;font-size:11px;padding:2px 8px;border-radius:20px;margin-left:6px;vertical-align:middle;font-weight:bold}
.chip.rot{background:#fdeceb;color:var(--red)} .chip.gelb{background:#fbf1dc;color:var(--amber)}
.chip.gruen{background:#e6f4ec;color:var(--green)} .chip.grau{background:#eceae3;color:var(--mut)}
.banner{padding:10px 16px;border-radius:10px;margin-bottom:8px;font-size:14px}
.banner.grau{background:#eceae3;color:var(--mut)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:30px;align-items:start}
.panel{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:16px 18px;box-shadow:0 3px 10px rgba(58,50,32,.06)}
.ptext{margin:0 0 10px;line-height:1.5} .ptext.mut{color:var(--mut)}
.kv div{display:flex;gap:10px;padding:6px 0;border-top:1px solid var(--line);font-size:14px}
.kv div span{color:var(--mut);min-width:110px;display:inline-block}
.task{display:flex;align-items:center;gap:10px;padding:8px 0;border-top:1px solid var(--line)}
.task span{flex:1;font-size:14px} .task small{color:var(--mut);font-size:12px}
.task.done span{text-decoration:line-through;color:var(--mut)}
.task form{margin:0} .tbox{width:22px;height:22px;border:1.5px solid var(--gold);border-radius:6px;
  background:#fff;cursor:pointer;color:var(--green);font-weight:bold;line-height:1}
.task.done .tbox{background:var(--green);color:#fff;border-color:var(--green)}
.addrow{display:flex;gap:8px;margin:12px 0}
.addrow input{flex:1;padding:9px 11px;border:1px solid var(--line);border-radius:9px;font-size:14px}
.addrow button,.edit button{padding:9px 16px;background:var(--header);color:#fff;border:none;border-radius:9px;font-weight:bold;cursor:pointer;font-size:14px}
.note{padding:10px 0;border-top:1px solid var(--line)} .note small{color:var(--mut);font-size:12px}
.note p{margin:4px 0 0;font-size:14px;line-height:1.45}
.edit label{display:block;font-size:13px;color:var(--mut);margin:12px 0 5px}
.edit input,.edit textarea{width:100%;padding:9px 11px;border:1px solid var(--line);border-radius:9px;font-size:14px;font-family:inherit}
.edit .row3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px}
.edit button{margin-top:16px}
@media(max-width:900px){.grid2{grid-template-columns:1fr}.cards.c4{grid-template-columns:1fr 1fr}.edit .row3{grid-template-columns:1fr}}
/* Login */
.login{max-width:380px;margin:8vh auto;background:var(--card);border:1px solid var(--line);
  border-radius:14px;padding:34px 30px;box-shadow:0 6px 24px rgba(58,50,32,.10)}
.login .brand{text-align:center;margin-bottom:22px}
.login .brand b{font-size:26px}.login .brand span{color:var(--gold);font-size:26px;font-weight:bold;margin-left:8px}
.login label{display:block;font-size:13px;color:var(--mut);margin:14px 0 6px}
.login input{width:100%;padding:11px 12px;border:1px solid var(--line);border-radius:9px;font-size:16px}
.login button{width:100%;margin-top:20px;padding:12px;background:var(--header);color:#fff;
  border:none;border-radius:9px;font-size:16px;font-weight:bold;cursor:pointer}
.login .err{background:#fdeceb;color:var(--red);padding:9px 12px;border-radius:8px;font-size:14px;margin-top:14px}
.login .hint{color:var(--mut);font-size:12px;text-align:center;margin-top:16px}