:root{
  --primary:#2E6478;
  --primary-dark:#213B47;
  --primary-soft:#D2E0E5;
  --bg:#F3F7F8;
  --surface:#FFFFFF;
  --surface-2:#E4EBEE;
  --border:#D2DEE2;
  --ink:#20282B;
  --ink-soft:#5C6B70;
  --good:#3C7A5A;
  --good-soft:#E4F0EA;
  --warn:#B8752B;
  --warn-soft:#F6E9D8;
  --error:#B94A4A;
  --error-soft:#F6DEDE;
  --shadow: 0 16px 32px -18px rgba(33,59,71,.35);
  --radius:18px;
  --font-display:"Space Grotesk", "Segoe UI", system-ui, sans-serif;
  --font-body:"Source Sans 3", "Segoe UI", system-ui, sans-serif;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --primary:#8FC2D6; --primary-dark:#C9E4EE; --primary-soft:#213B47;
    --bg:#161B1D; --surface:#1E2528; --surface-2:#242D30; --border:#374045;
    --ink:#E7EEF0; --ink-soft:#A6B4B8;
    --good:#7FC6A4; --good-soft:#1F332A; --warn:#E3AE6E; --warn-soft:#3A2E1C;
    --error:#E38A8A; --error-soft:#3A2222;
    --shadow: 0 16px 32px -18px rgba(0,0,0,.6);
  }
}
:root[data-theme="dark"]{
  --primary:#8FC2D6; --primary-dark:#C9E4EE; --primary-soft:#213B47;
  --bg:#161B1D; --surface:#1E2528; --surface-2:#242D30; --border:#374045;
  --ink:#E7EEF0; --ink-soft:#A6B4B8;
  --good:#7FC6A4; --good-soft:#1F332A; --warn:#E3AE6E; --warn-soft:#3A2E1C;
  --error:#E38A8A; --error-soft:#3A2222;
  --shadow: 0 16px 32px -18px rgba(0,0,0,.6);
}

*{box-sizing:border-box;}
body{
  background:var(--bg); color:var(--ink); font-family:var(--font-body);
  margin:0; min-height:100vh;
}
h1,h2,h3{font-family:var(--font-display); font-weight:600; margin:0;}

.app-shell-header{ padding:16px 20px; }
.brand-strip{
  display:flex; align-items:center; gap:7px;
  font-family:var(--font-display); font-weight:600; font-size:.92rem; color:var(--primary);
}

.wrap{ max-width:420px; margin:0 auto; padding:8px 18px 100px; }
.wrap-wide{ max-width:900px; }

.loading, .muted{ color:var(--ink-soft); font-size:.9rem; text-align:center; padding:24px 0; }
.error-box{ background:var(--error-soft); color:var(--error); border-radius:12px; padding:14px; font-size:.85rem; }

.app-header{ display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }
.app-header .who{ font-size:.72rem; color:var(--ink-soft); }
.app-header .name{ font-family:var(--font-display); font-size:1.15rem; color:var(--primary-dark); }
.avatar{
  width:34px; height:34px; border-radius:50%; background:var(--primary-soft);
  color:var(--primary-dark); display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:.85rem; font-family:var(--font-display); flex-shrink:0;
}

.budget-card{
  background:linear-gradient(155deg, var(--primary) 0%, var(--primary-dark) 100%);
  border-radius:var(--radius); padding:18px 20px; color:#fff; margin-bottom:18px;
}
.budget-card .label{ font-size:.72rem; opacity:.85; text-transform:uppercase; letter-spacing:.08em; }
.budget-card .amount{ font-family:var(--font-display); font-size:2rem; margin:.15em 0; }
.budget-card .sub{ font-size:.78rem; opacity:.85; }
.bar-track{ height:8px; border-radius:99px; background:rgba(255,255,255,.25); margin-top:12px; overflow:hidden; }
.bar-fill{ height:100%; background:#fff; border-radius:99px; width:0%; transition:width .3s ease; }

.section-label{ font-size:.78rem; font-weight:700; color:var(--ink-soft); text-transform:uppercase; letter-spacing:.06em; margin:18px 0 10px; }

.tile-grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.tile{
  background:var(--surface-2); border:1px solid var(--border); border-radius:14px;
  padding:14px 12px; text-align:left; cursor:pointer; transition:.15s ease;
  font-family:var(--font-body); color:var(--ink);
}
.tile:hover{ border-color:var(--primary); transform:translateY(-1px); }
.tile-selected{ border-color:var(--primary); background:var(--primary-soft); box-shadow:0 0 0 1.5px var(--primary) inset; }
.tile .ic{ font-size:1.3rem; }
.tile .t{ font-weight:700; font-size:.86rem; margin-top:8px; display:block; }
.tile .p{ font-size:.74rem; color:var(--ink-soft); }

/* --- Kategorie-Karten mit Aufgaben-Checkliste --- */
.kategorie-list{ display:flex; flex-direction:column; gap:10px; }
.kategorie-card{
  background:var(--surface-2); border:1px solid var(--border); border-radius:14px;
  overflow:hidden; transition:.15s ease;
}
.kategorie-card.tile-selected{ border-color:var(--primary); box-shadow:0 0 0 1.5px var(--primary) inset; }
.kategorie-head{
  width:100%; display:flex; align-items:center; gap:10px; padding:14px 14px;
  background:transparent; border:none; cursor:pointer; text-align:left;
  font-family:var(--font-body); color:var(--ink);
}
.kategorie-head .ic{ font-size:1.3rem; }
.kategorie-head .t{ font-weight:700; font-size:.88rem; flex:1; }
.kategorie-head .p{ font-size:.74rem; color:var(--ink-soft); }
.aufgaben-liste{
  flex-direction:column; gap:2px; padding:0 14px 12px 42px;
}
.aufgabe-item{
  display:flex; align-items:center; gap:8px; font-size:.82rem; padding:5px 0; cursor:pointer; color:var(--ink-soft);
}
.aufgabe-item input{ accent-color:var(--primary); width:15px; height:15px; flex-shrink:0; }

.activity-row{
  display:flex; justify-content:space-between; align-items:center;
  padding:10px 0; border-bottom:1px solid var(--border); font-size:.82rem;
}
.activity-row:last-child{ border-bottom:none; }
.activity-row .who{ font-weight:600; }
.activity-row .when{ color:var(--ink-soft); font-size:.74rem; }
.activity-row .hint{ color:var(--primary); font-size:.72rem; font-weight:600; margin-top:2px; }
.pill{ font-size:.68rem; font-weight:700; padding:3px 9px; border-radius:99px; white-space:nowrap; }
.pill.erbracht{ background:var(--good-soft); color:var(--good); }
.pill.laufend{ background:var(--primary-soft); color:var(--primary-dark); }
.pill.gebucht{ background:var(--warn-soft); color:var(--warn); }
.pill.storniert{ background:var(--error-soft); color:var(--error); }

.confirm-screen{
  display:flex; flex-direction:column; align-items:center; text-align:center; gap:14px;
  padding:60px 10px;
}
.confirm-icon{
  width:64px; height:64px; border-radius:50%; background:var(--good-soft);
  color:var(--good); display:flex; align-items:center; justify-content:center; font-size:1.8rem;
}
.confirm-title{ font-family:var(--font-display); font-size:1.25rem; color:var(--primary-dark); }
.confirm-detail{
  background:var(--surface-2); border-radius:14px; padding:14px 16px; text-align:left;
  font-size:.85rem; line-height:1.7; width:100%;
}
.btn{
  font-family:var(--font-body); font-weight:700; font-size:.85rem;
  padding:12px 18px; border-radius:12px; border:none; cursor:pointer;
  background:var(--primary); color:#fff;
}
.btn:hover{ background:var(--primary-dark); }
.btn:disabled{ opacity:.6; cursor:default; }
.btn-ghost{ background:transparent; color:var(--primary); border:1.5px solid var(--border); }
.btn-ghost:hover{ background:var(--surface-2); color:var(--primary); }

.text-input{
  font-family:var(--font-body); font-size:.95rem; padding:12px 14px; border-radius:12px;
  border:1px solid var(--border); background:var(--surface); color:var(--ink); width:100%;
}
.text-input:focus{ outline:none; border-color:var(--primary); }

.logout-link{
  background:none; border:none; color:var(--ink-soft); font-size:.72rem; font-family:var(--font-body);
  cursor:pointer; text-decoration:underline; padding:0;
}
.logout-link:hover{ color:var(--primary); }

.review-row{ display:flex; justify-content:space-between; padding:6px 0; font-size:.86rem; border-bottom:1px solid var(--border); }
.review-row:last-child{ border-bottom:none; }
.review-row span{ color:var(--ink-soft); }

.warenkorb-bar{
  position:fixed; left:50%; bottom:18px; transform:translateX(-50%);
  width:calc(100% - 36px); max-width:400px;
  background:var(--surface); border:1px solid var(--border); box-shadow:var(--shadow);
  border-radius:16px; padding:12px 16px; display:flex; align-items:center; justify-content:space-between;
  gap:12px; font-size:.85rem; z-index:10;
}
.warenkorb-bar .btn{ padding:9px 16px; font-size:.8rem; flex-shrink:0; }

.dashboard{
  background:var(--surface); border:1px solid var(--border); border-radius:20px;
  box-shadow:var(--shadow); padding:28px; display:flex; flex-direction:column; gap:22px;
  margin:24px auto;
}
.dash-head h2{ font-size:1.35rem; color:var(--primary-dark); }
.dash-head p{ color:var(--ink-soft); font-size:.85rem; margin:.3em 0 0; }
.panel{ background:var(--surface-2); border:1px solid var(--border); border-radius:16px; padding:18px 20px; }
.panel h3{ font-size:.95rem; margin-bottom:12px; }

.task-list{ display:flex; flex-direction:column; gap:8px; }
.task{
  display:flex; align-items:center; gap:10px; background:var(--surface);
  border:1px solid var(--border); border-radius:12px; padding:12px 14px; cursor:pointer;
  transition:.15s ease; font-size:.85rem; font-weight:600;
}
.task:hover{ border-color:var(--primary); }
.task .box{
  width:20px; height:20px; border-radius:6px; border:2px solid var(--ink-soft);
  flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:.7rem;
}
.task.checked .box{ background:var(--good); border-color:var(--good); color:#fff; }
.task.checked{ opacity:.6; }

table{ width:100%; border-collapse:collapse; font-size:.82rem; }
th{ text-align:left; color:var(--ink-soft); font-weight:600; font-size:.72rem; text-transform:uppercase; letter-spacing:.04em; padding-bottom:8px; }
td{ padding:9px 0; border-top:1px solid var(--border); }
td.num{ font-variant-numeric:tabular-nums; text-align:right; }
.bar-mini{ height:6px; background:var(--border); border-radius:99px; overflow:hidden; margin-top:4px; }
.bar-mini span{ display:block; height:100%; background:var(--primary); border-radius:99px; }