:root{
  color-scheme: light;
  --bg:#f7f2e9; --surface:#ffffff; --surface-2:#f1ead9; --surface-3:#e9dfc9;
  --border: rgba(32,20,8,0.12); --border-soft: rgba(32,20,8,0.07);
  --text-primary:#201a10; --text-secondary:#6b5d47; --text-muted:#93856c;
  --accent:#b6752e; --accent-strong:#8a5a20; --accent-soft: rgba(182,117,46,0.13);
  --income:#1baf7a; --income-soft: rgba(27,175,122,0.14);
  --expense:#e34948; --expense-soft: rgba(227,73,72,0.13);
  --baseline:#c3b8a2; --grid:#e6dcc8;
  --slot1:#2a78d6; --slot2:#eb6834; --slot4:#eda100; --slot5:#e87ba4; --slot6:#008300; --slot7:#4a3aa7;
  --shadow: 0 1px 2px rgba(32,20,8,0.06), 0 8px 24px -12px rgba(32,20,8,0.18);
}
@media (prefers-color-scheme: dark){
  html:not(.theme-light){
    color-scheme: dark;
    --bg:#161209; --surface:#201a11; --surface-2:#291f13; --surface-3:#332616;
    --border: rgba(255,240,220,0.12); --border-soft: rgba(255,240,220,0.07);
    --text-primary:#f5ecdc; --text-secondary:#cabca0; --text-muted:#93856c;
    --accent:#e0a256; --accent-strong:#f0b56c; --accent-soft: rgba(224,162,86,0.16);
    --income:#199e70; --income-soft: rgba(25,158,112,0.18);
    --expense:#e66767; --expense-soft: rgba(230,103,103,0.16);
    --baseline:#4a4028; --grid:#332a18;
    --slot1:#3987e5; --slot2:#d95926; --slot4:#c98500; --slot5:#d55181; --slot6:#1ea31e; --slot7:#9085e9;
    --shadow: 0 1px 2px rgba(0,0,0,0.3), 0 8px 24px -12px rgba(0,0,0,0.5);
  }
}
html.theme-dark{
  color-scheme: dark;
  --bg:#161209; --surface:#201a11; --surface-2:#291f13; --surface-3:#332616;
  --border: rgba(255,240,220,0.12); --border-soft: rgba(255,240,220,0.07);
  --text-primary:#f5ecdc; --text-secondary:#cabca0; --text-muted:#93856c;
  --accent:#e0a256; --accent-strong:#f0b56c; --accent-soft: rgba(224,162,86,0.16);
  --income:#199e70; --income-soft: rgba(25,158,112,0.18);
  --expense:#e66767; --expense-soft: rgba(230,103,103,0.16);
  --baseline:#4a4028; --grid:#332a18;
  --slot1:#3987e5; --slot2:#d95926; --slot4:#c98500; --slot5:#d55181; --slot6:#1ea31e; --slot7:#9085e9;
  --shadow: 0 1px 2px rgba(0,0,0,0.3), 0 8px 24px -12px rgba(0,0,0,0.5);
}

*{box-sizing:border-box;}
html,body{ background:var(--bg); }
body{
  color:var(--text-primary);
  font-family:"Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  margin:0;
  padding: 20px 16px 48px;
}
h1,h2{ font-family:"Fraunces", Georgia, serif; margin:0; }
a{ color:inherit; }

.app{ max-width:1180px; margin:0 auto; display:flex; flex-direction:column; gap:18px; }

/* topbar */
.topbar{ display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; max-width:1180px; margin:0 auto 18px; }
.brand{ display:flex; align-items:center; gap:10px; }
.brand-mark{ width:12px; height:12px; border-radius:3px; background:var(--accent); transform:rotate(45deg); flex:none; }
.brand h1{ font-size:1.5rem; font-weight:600; letter-spacing:-0.01em; }
.brand h1 em{ font-style:italic; color:var(--accent-strong); font-weight:500; }
.main-nav{ display:flex; flex-wrap:wrap; gap:4px; background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:4px; box-shadow:var(--shadow); }
.main-nav a{ text-decoration:none; font-size:0.85rem; font-weight:700; color:var(--text-secondary); padding:7px 14px; border-radius:8px; }
.main-nav a.active, .main-nav a:hover{ background:var(--accent-soft); color:var(--accent-strong); }
.nav-user{ display:flex; align-items:center; gap:10px; }
.icon-btn{ appearance:none; border:1px solid var(--border); background:var(--surface); color:var(--text-secondary); width:34px; height:34px; border-radius:10px; cursor:pointer; font-size:1rem; }
.icon-btn:hover{ color:var(--text-primary); }
.who{ display:flex; align-items:center; gap:6px; font-size:0.85rem; font-weight:700; color:var(--text-secondary); }
.logout-link{ font-size:0.8rem; font-weight:700; color:var(--text-muted); text-decoration:none; border:1px solid var(--border); padding:7px 12px; border-radius:10px; background:var(--surface); }
.logout-link:hover{ color:var(--expense); border-color:var(--expense); }

/* period nav */
.period-nav-row{ display:flex; }
.period-nav{ display:flex; align-items:center; gap:6px; background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:4px; box-shadow:var(--shadow); }
.period-nav a{ text-decoration:none; color:var(--text-secondary); width:30px; height:30px; border-radius:8px; font-size:1rem; display:flex; align-items:center; justify-content:center; }
.period-nav a:hover{ background:var(--surface-2); color:var(--text-primary); }
#periodLabel{ font-weight:700; font-size:0.92rem; padding:0 8px; min-width:132px; text-align:center; }
.today-btn{ font-size:0.78rem !important; width:auto !important; padding:0 10px !important; color:var(--accent-strong) !important; font-weight:700; border-left:1px solid var(--border); }

/* cards */
.card{ background:var(--surface); border:1px solid var(--border); border-radius:16px; padding:18px 20px; box-shadow:var(--shadow); }
.card-head{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:14px; }
.card-head h2{ font-size:1.05rem; font-weight:600; }
.legend{ display:flex; gap:14px; font-size:0.78rem; color:var(--text-secondary); }
.legend span{ display:inline-flex; align-items:center; gap:6px; }
.legend i{ width:9px; height:9px; border-radius:3px; display:inline-block; }

/* KPI */
.kpi-row{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.kpi-tile{ background:var(--surface); border:1px solid var(--border); border-radius:16px; padding:16px 18px; box-shadow:var(--shadow); display:flex; flex-direction:column; gap:6px; }
.kpi-label{ font-size:0.75rem; font-weight:700; text-transform:uppercase; letter-spacing:0.05em; color:var(--text-muted); }
.kpi-value{ font-size:1.55rem; font-weight:800; letter-spacing:-0.01em; }
.kpi-value.income{ color:var(--income); }
.kpi-value.expense{ color:var(--expense); }
.kpi-delta{ font-size:0.78rem; color:var(--text-muted); font-weight:600; }
.kpi-delta.up{ color:var(--income); }
.kpi-delta.down{ color:var(--expense); }

/* entry form */
.form-card form{ display:flex; gap:10px; flex-wrap:wrap; align-items:flex-end; }
.field{ display:flex; flex-direction:column; gap:5px; }
.field label{ font-size:0.72rem; font-weight:700; text-transform:uppercase; letter-spacing:0.04em; color:var(--text-muted); }
.field label .hint{ text-transform:none; font-weight:500; letter-spacing:0; color:var(--text-muted); }
.field input, .field select, .field textarea{
  font: inherit; font-size:0.9rem; color:var(--text-primary); background:var(--surface-2);
  border:1px solid var(--border); border-radius:10px; padding:8px 10px; min-height:38px;
}
.field input:focus, .field select:focus, .field textarea:focus, button:focus-visible, a:focus-visible{ outline:2px solid var(--accent); outline-offset:1px; }
.f-date{ width:150px; } .f-cat{ width:190px; } .f-amount{ width:120px; } .f-note{ width:100%; min-width:180px; } .field:has(> .f-note){ flex:1 1 220px; } .f-name{ width:170px; }
.f-receipt{ width:200px; padding:7px 8px; }
.submit-btn{ appearance:none; border:none; background:var(--accent); color:#fff; font:inherit; font-weight:700; font-size:0.88rem; padding:9px 18px; border-radius:10px; cursor:pointer; min-height:38px; }
.submit-btn:hover{ background:var(--accent-strong); }
.hint{ font-size:0.8rem; color:var(--text-muted); }
.ocr-status{ font-size:0.78rem; font-weight:600; color:var(--accent-strong); align-self:center; }
.ocr-status.done{ color:var(--income); }
.ocr-status.fail{ color:var(--text-muted); }

/* charts */
.charts-grid{ display:grid; grid-template-columns:1.35fr 1fr; gap:14px; }
.chart-card svg{ width:100%; height:auto; display:block; }
.toggle-row{ display:flex; gap:6px; }
.toggle-row button{ appearance:none; border:1px solid var(--border); background:var(--surface-2); color:var(--text-secondary); font:inherit; font-size:0.76rem; font-weight:700; padding:5px 10px; border-radius:8px; cursor:pointer; }
.toggle-row a{ text-decoration:none; border:1px solid var(--border); background:var(--surface-2); color:var(--text-secondary); font-size:0.76rem; font-weight:700; padding:5px 10px; border-radius:8px; }
.toggle-row a.active{ background:var(--accent-soft); color:var(--accent-strong); border-color:var(--accent); }
.toggle-row button.active{ background:var(--accent-soft); color:var(--accent-strong); border-color:var(--accent); }

.cat-rows{ display:flex; flex-direction:column; gap:10px; }
.cat-row{ display:grid; grid-template-columns:112px 1fr auto; align-items:center; gap:10px; }
.cat-label{ font-size:0.82rem; color:var(--text-secondary); font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cat-track{ height:10px; background:var(--surface-2); border-radius:6px; overflow:hidden; }
.cat-fill{ height:100%; border-radius:6px; min-width:3px; }
.cat-value{ font-size:0.82rem; font-weight:700; font-variant-numeric:tabular-nums; color:var(--text-primary); text-align:right; min-width:76px; }
.cat-empty{ font-size:0.85rem; color:var(--text-muted); padding:12px 0; }

/* tooltip */
.viz-tooltip{ position:fixed; z-index:50; background:var(--surface); border:1px solid var(--border); border-radius:10px; box-shadow:var(--shadow); padding:8px 10px; font-size:0.78rem; color:var(--text-primary); pointer-events:none; max-width:220px; }
.viz-tooltip b{ font-variant-numeric:tabular-nums; }
.viz-tooltip .tt-date{ font-weight:700; margin-bottom:3px; }
.viz-tooltip .tt-row{ display:flex; justify-content:space-between; gap:12px; }
.viz-tooltip .tt-row.income{ color:var(--income); }
.viz-tooltip .tt-row.expense{ color:var(--expense); }

/* ledger */
.day-group{ margin-bottom:6px; }
.day-header{ display:flex; justify-content:space-between; align-items:center; padding:9px 4px 6px; border-bottom:1px solid var(--border-soft); font-size:0.8rem; }
.day-header .d-date{ font-weight:700; color:var(--text-secondary); }
.day-header .d-net{ font-weight:800; font-variant-numeric:tabular-nums; }
.day-header .d-net.up{ color:var(--income); } .day-header .d-net.down{ color:var(--expense); }
.entry-row{ display:flex; align-items:center; gap:10px; padding:9px 4px; border-bottom:1px solid var(--border-soft); flex-wrap:wrap; }
.entry-row:last-child{ border-bottom:none; }
.type-dot{ width:8px; height:8px; border-radius:50%; flex:none; }
.type-dot.einnahme{ background:var(--income); } .type-dot.ausgabe{ background:var(--expense); }
.e-cat{ font-size:0.82rem; font-weight:700; min-width:120px; }
.e-note{ font-size:0.82rem; color:var(--text-secondary); flex:1 1 140px; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.e-author{ display:flex; align-items:center; gap:6px; font-size:0.76rem; color:var(--text-muted); }
.author-badge{ width:20px; height:20px; border-radius:50%; color:#fff; font-size:0.62rem; font-weight:800; display:flex; align-items:center; justify-content:center; flex:none; }
.e-amount{ font-weight:800; font-variant-numeric:tabular-nums; min-width:92px; text-align:right; }
.e-amount.einnahme{ color:var(--income); } .e-amount.ausgabe{ color:var(--expense); }
.e-receipt{ font-size:0.74rem; font-weight:700; color:var(--accent-strong); text-decoration:none; border:1px solid var(--border); background:var(--accent-soft); padding:4px 8px; border-radius:8px; }
.e-receipt:hover{ border-color:var(--accent); }
.del-form{ margin:0; }
.e-del{ appearance:none; border:1px solid var(--border); background:var(--surface-2); color:var(--text-muted); font:inherit; font-size:0.72rem; font-weight:700; padding:5px 9px; border-radius:8px; cursor:pointer; }
.e-del:hover{ color:var(--expense); border-color:var(--expense); }
.ledger-empty{ font-size:0.88rem; color:var(--text-muted); padding:22px 4px; text-align:center; }

.foot{ display:flex; justify-content:space-between; align-items:center; font-size:0.76rem; color:var(--text-muted); padding:2px 4px; flex-wrap:wrap; gap:8px; }

/* auth pages */
.auth-wrap{ min-height:80vh; display:flex; align-items:center; justify-content:center; }
.auth-card{ background:var(--surface); border:1px solid var(--border); border-radius:18px; padding:28px 26px; box-shadow:var(--shadow); width:100%; max-width:380px; display:flex; flex-direction:column; gap:14px; }
.auth-card .brand{ justify-content:center; margin-bottom:4px; }
.auth-lead{ font-size:0.86rem; color:var(--text-secondary); text-align:center; margin:0; }
.auth-form{ display:flex; flex-direction:column; gap:12px; }
.auth-form label{ display:flex; flex-direction:column; gap:5px; font-size:0.78rem; font-weight:700; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.04em; }
.auth-form label .hint{ text-transform:none; font-weight:500; letter-spacing:0; }
.auth-form input{ font:inherit; font-size:0.95rem; color:var(--text-primary); background:var(--surface-2); border:1px solid var(--border); border-radius:10px; padding:10px 12px; }
.auth-note{ font-size:0.85rem; border-radius:10px; padding:8px 12px; margin:0; }
.auth-note.err{ background:var(--expense-soft); color:var(--expense); }
.auth-note.ok{ background:var(--income-soft); color:var(--income); }

/* admin users */
.user-list{ display:flex; flex-direction:column; }
.user-row{ display:flex; align-items:center; gap:10px; padding:10px 4px; border-bottom:1px solid var(--border-soft); flex-wrap:wrap; }
.user-row:last-child{ border-bottom:none; }
.u-name{ font-weight:700; font-size:0.88rem; min-width:120px; }
.u-email{ font-size:0.82rem; color:var(--text-secondary); flex:1 1 160px; }
.u-role{ font-size:0.74rem; font-weight:700; text-transform:uppercase; letter-spacing:0.04em; color:var(--text-muted); background:var(--surface-2); padding:3px 8px; border-radius:6px; }
.u-role.is-admin{ color:var(--accent-strong); background:var(--accent-soft); }
.u-you{ font-size:0.76rem; color:var(--text-muted); font-style:italic; }

@media (max-width: 860px){
  .kpi-row{ grid-template-columns:repeat(2,1fr); }
  .charts-grid{ grid-template-columns:1fr; }
  .f-note, .f-name{ flex:1 1 100%; width:auto; }
}
@media (max-width: 480px){
  .kpi-row{ grid-template-columns:1fr 1fr; }
  body{ padding:16px 12px 40px; }
  .cat-row{ grid-template-columns:88px 1fr auto; }
}

/* kontakte / aufgaben / termine */
.field textarea{ resize:vertical; min-height:38px; line-height:1.4; }
.f-wide{ flex:1 1 260px; } .f-wide input{ width:100%; }
.f-full{ flex:1 1 100%; } .f-full textarea{ width:100%; }
.f-time{ width:110px; }
a.e-del{ text-decoration:none; display:inline-block; }
.count{ font-family:"Manrope", system-ui, sans-serif; font-size:0.78rem; font-weight:700; color:var(--text-muted); background:var(--surface-2); padding:2px 8px; border-radius:999px; vertical-align:middle; margin-left:4px; }
.filter-form{ display:flex; gap:6px; flex-wrap:wrap; align-items:center; }
.filter-form input, .filter-form select{ font:inherit; font-size:0.85rem; color:var(--text-primary); background:var(--surface-2); border:1px solid var(--border); border-radius:10px; padding:6px 10px; min-height:34px; }
.filter-form input{ width:180px; }
.chip{ font-size:0.74rem; font-weight:700; color:var(--text-secondary); background:var(--surface-2); border:1px solid var(--border-soft); padding:3px 8px; border-radius:999px; text-decoration:none; white-space:nowrap; }
a.chip:hover{ border-color:var(--accent); color:var(--accent-strong); }
.c-main{ display:flex; flex-direction:column; gap:2px; flex:1 1 200px; min-width:0; }
.c-name{ font-size:0.9rem; font-weight:700; }
.c-sub{ font-size:0.8rem; color:var(--text-secondary); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.c-links{ display:flex; flex-direction:column; gap:2px; font-size:0.8rem; }
.c-links a{ color:var(--accent-strong); text-decoration:none; }
.c-links a:hover{ text-decoration:underline; }
.contact-row .e-note{ flex:1 1 120px; }
.check-btn{ appearance:none; width:24px; height:24px; border-radius:7px; border:2px solid var(--baseline); background:var(--surface); color:#fff; font-weight:800; font-size:0.8rem; cursor:pointer; display:flex; align-items:center; justify-content:center; padding:0; }
.check-btn:hover{ border-color:var(--income); }
.check-btn.checked{ background:var(--income); border-color:var(--income); }
.task-row.is-done .c-name{ text-decoration:line-through; color:var(--text-muted); }
.due{ font-size:0.76rem; font-weight:700; color:var(--text-secondary); white-space:nowrap; }
.due.overdue{ color:var(--expense); } .due.today{ color:var(--accent-strong); }
.ev-date{ display:flex; flex-direction:column; align-items:center; justify-content:center; width:44px; height:44px; border-radius:10px; background:var(--surface-2); flex:none; line-height:1.05; }
.ev-date b{ font-size:1.05rem; font-weight:800; }
.ev-date small{ font-size:0.66rem; font-weight:700; color:var(--text-muted); text-transform:uppercase; }
.ev-date.today{ background:var(--accent); color:#fff; } .ev-date.today small{ color:#fff; }
.d-count{ font-size:0.76rem; color:var(--text-muted); font-weight:600; }
.linked{ display:flex; flex-direction:column; gap:8px; margin-top:14px; padding-top:12px; border-top:1px solid var(--border-soft); }
.linked > div{ display:flex; gap:6px; flex-wrap:wrap; align-items:center; }
.linked-title{ font-size:0.72rem; font-weight:700; text-transform:uppercase; letter-spacing:0.04em; color:var(--text-muted); margin-right:4px; }
@media (max-width: 480px){
  .filter-form input{ flex:1 1 100%; width:auto; }
  .c-links{ flex:1 1 100%; }
}

/* start page */
.sub-nav{ display:flex; gap:18px; max-width:1180px; margin:-6px auto 16px; padding:0 4px; border-bottom:1px solid var(--border); flex-wrap:wrap; }
.sub-nav a{ text-decoration:none; font-size:0.85rem; font-weight:700; color:var(--text-muted); padding:6px 2px 9px; border-bottom:2px solid transparent; margin-bottom:-1px; }
.sub-nav a:hover{ color:var(--text-primary); }
.sub-nav a.active{ color:var(--accent-strong); border-bottom-color:var(--accent); }
.hello{ display:flex; justify-content:space-between; align-items:flex-end; gap:14px; flex-wrap:wrap; }
.hello h2{ font-size:1.7rem; font-weight:600; letter-spacing:-0.01em; }
.hello p{ margin:4px 0 0; color:var(--text-secondary); font-size:0.9rem; }
.quick-actions{ display:flex; gap:8px; flex-wrap:wrap; }
.quick-btn{ text-decoration:none; font-size:0.84rem; font-weight:700; color:var(--accent-strong); background:var(--surface); border:1px solid var(--border); padding:8px 13px; border-radius:10px; box-shadow:var(--shadow); }
.quick-btn:hover{ border-color:var(--accent); background:var(--accent-soft); }
.kpi-link{ text-decoration:none; color:inherit; transition:border-color .15s; }
.kpi-link:hover{ border-color:var(--accent); }
.start-grid{ display:grid; grid-template-columns:1fr 1fr; gap:14px; align-items:start; }
.card-link{ font-size:0.8rem; font-weight:700; color:var(--accent-strong); text-decoration:none; }
.card-link:hover{ text-decoration:underline; }
.card-foot-note{ margin:10px 4px 0; font-size:0.8rem; }
.card-foot-note a{ color:var(--text-secondary); font-weight:600; }
a.plain{ text-decoration:none; color:inherit; }
a.event-row.plain:hover .c-name, a.c-name.plain:hover{ color:var(--accent-strong); }
@media (max-width: 860px){
  .start-grid{ grid-template-columns:1fr; }
}

/* aufträge / projects */
.chip-project{ color:var(--accent-strong); background:var(--accent-soft); border-color:transparent; }
.status-pill{ display:inline-block; font-size:0.68rem; font-weight:800; text-transform:uppercase; letter-spacing:0.05em; padding:3px 8px; border-radius:6px; background:var(--surface-2); color:var(--text-secondary); }
.status-pill.st-anfrage{ background:rgba(237,161,0,0.16); color:var(--slot4); }
.status-pill.st-bestaetigt{ background:var(--income-soft); color:var(--income); }
.status-pill.st-abgeschlossen{ background:var(--surface-3); color:var(--text-secondary); }
.status-pill.st-abgesagt{ background:var(--expense-soft); color:var(--expense); }
.project-list{ display:grid; grid-template-columns:repeat(auto-fill, minmax(250px, 1fr)); gap:12px; }
.project-card{ display:flex; flex-direction:column; gap:6px; text-decoration:none; color:inherit; background:var(--surface-2); border:1px solid var(--border-soft); border-radius:12px; padding:14px; transition:border-color .15s; }
.project-card:hover{ border-color:var(--accent); }
.pc-top{ display:flex; justify-content:space-between; align-items:center; gap:8px; }
.pc-date{ font-size:0.76rem; font-weight:700; color:var(--text-muted); }
.pc-name{ font-family:"Fraunces", Georgia, serif; font-size:1.08rem; font-weight:600; }
.pc-sub{ font-size:0.8rem; color:var(--text-secondary); }
.pc-stats{ display:flex; justify-content:space-between; gap:8px; font-size:0.8rem; color:var(--text-secondary); border-top:1px solid var(--border-soft); padding-top:8px; margin-top:2px; }
.pc-stats .up{ color:var(--income); font-weight:800; } .pc-stats .down{ color:var(--expense); font-weight:800; }
.back-link{ font-size:0.84rem; font-weight:700; color:var(--text-secondary); text-decoration:none; align-self:flex-start; }
.back-link:hover{ color:var(--accent-strong); }
.project-head{ display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap; }
.project-title{ font-size:1.6rem; font-weight:600; margin:8px 0 4px; }
.project-meta{ margin:0; font-size:0.88rem; color:var(--text-secondary); }
.project-meta a{ color:var(--accent-strong); text-decoration:none; }
.project-notes{ margin:10px 0 0; font-size:0.86rem; color:var(--text-secondary); max-width:70ch; line-height:1.5; }
.project-actions{ display:flex; gap:6px; align-items:flex-start; }
.project-edit{ margin-top:16px; padding-top:16px; border-top:1px solid var(--border-soft); }
.project-edit form{ display:flex; gap:10px; flex-wrap:wrap; align-items:flex-end; }
.project-entry-form{ display:flex; gap:10px; flex-wrap:wrap; align-items:flex-end; margin-bottom:12px; padding-bottom:14px; border-bottom:1px solid var(--border-soft); }
.quick-add{ display:flex; gap:6px; flex-wrap:wrap; margin-top:12px; padding-top:12px; border-top:1px dashed var(--border); }
.quick-add input, .quick-add select{ font:inherit; font-size:0.85rem; color:var(--text-primary); background:var(--surface-2); border:1px solid var(--border); border-radius:10px; padding:6px 9px; min-height:36px; }
.quick-add .qa-title{ flex:1 1 180px; min-width:0; }
.quick-add .submit-btn{ min-height:36px; padding:6px 14px; }
.notify-bar{ display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap; font-size:0.82rem; color:var(--text-secondary); background:var(--surface-2); border-radius:10px; padding:8px 12px; margin:-4px 0 12px; }
.pw-form{ display:flex; gap:6px; align-items:center; }
.pw-form input{ font:inherit; font-size:0.8rem; color:var(--text-primary); background:var(--surface-2); border:1px solid var(--border); border-radius:8px; padding:5px 8px; width:150px; }

/* project page (tabs: Übersicht / Finanzen / Aufgaben / Termine) */
.project-page{ gap:14px; }
.project-header{ display:flex; flex-direction:column; gap:6px; }
.project-header .project-title{ margin:2px 0 0; }
.project-header .status-pill{ align-self:flex-start; }
.project-tabs{ display:flex; gap:4px; border-bottom:1px solid var(--border); overflow-x:auto; scrollbar-width:none; }
.project-tabs a{ text-decoration:none; font-weight:800; font-size:0.9rem; color:var(--text-muted); padding:10px 12px; border-bottom:2px solid transparent; margin-bottom:-1px; white-space:nowrap; }
.project-tabs a:hover{ color:var(--text-primary); }
.project-tabs a.active{ color:var(--accent-strong); border-bottom-color:var(--accent); }
.tab-count{ font-size:0.72rem; background:var(--surface-2); color:var(--text-secondary); padding:1px 7px; border-radius:999px; margin-left:3px; }
.overview-grid{ display:grid; grid-template-columns:1fr 1fr; gap:14px; align-items:start; }
.overview-grid .span-2{ grid-column:1 / -1; }
.facts{ display:grid; grid-template-columns:1fr 1fr; gap:12px 16px; margin:0; }
.facts div{ min-width:0; }
.facts dt, .facts-label{ font-size:0.7rem; font-weight:800; text-transform:uppercase; letter-spacing:0.05em; color:var(--text-muted); margin-bottom:2px; display:block; }
.facts dd{ margin:0; font-size:0.92rem; font-weight:600; }
.facts dd a{ color:var(--accent-strong); }
.facts-notes{ margin-top:14px; padding-top:12px; border-top:1px solid var(--border-soft); }
.facts-notes p{ margin:0; font-size:0.9rem; color:var(--text-secondary); line-height:1.5; }
.edit-foot{ display:flex; justify-content:space-between; gap:8px; margin-top:12px; flex-wrap:wrap; }
.e-del.danger{ color:var(--expense); }
.client{ display:flex; gap:12px; align-items:center; }
.client-badge{ width:42px; height:42px; font-size:0.9rem; }
.client-main{ display:flex; flex-direction:column; min-width:0; }
.client-main b{ font-size:1rem; }
.client-lines{ display:flex; flex-direction:column; gap:6px; margin-top:12px; }
.client-line{ font-size:0.9rem; color:var(--text-primary); text-decoration:none; padding:8px 10px; background:var(--surface-2); border-radius:10px; overflow-wrap:anywhere; }
a.client-line:hover{ color:var(--accent-strong); }
.fin-teaser{ text-decoration:none; color:inherit; display:flex; flex-direction:column; gap:10px; transition:border-color .15s; }
.fin-teaser:hover{ border-color:var(--accent); }
.fin-teaser-nums{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:12px; align-items:end; }
.fin-teaser-nums > div{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.fin-teaser-nums .num{ font-weight:800; }
.fin-big{ font-size:1.6rem; letter-spacing:-0.01em; }
.pos{ color:var(--income); } .neg{ color:var(--expense); }
.paid-line{ display:flex; justify-content:space-between; gap:8px; font-size:0.8rem; color:var(--text-secondary); flex-wrap:wrap; }
.paid-bar{ height:8px; border-radius:6px; background:var(--surface-2); overflow:hidden; }
.paid-bar i{ display:block; height:100%; background:var(--income); border-radius:6px; }
.fin-summary{ display:flex; flex-direction:column; gap:10px; }
.add-pair{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.add-btn{ display:flex; align-items:center; justify-content:center; text-decoration:none; border:none; border-radius:14px; padding:14px; font:inherit; font-weight:800; font-size:1rem; color:#fff; cursor:pointer; min-height:50px; }
.add-btn.in{ background:var(--income); } .add-btn.ex{ background:var(--expense); }
.add-btn.ghost{ background:var(--surface-2); color:var(--text-secondary); }
.add-btn:hover{ filter:brightness(0.95); }
.entry-sheet{ display:flex; flex-direction:column; gap:14px; border-color:var(--accent); }
.type-seg{ display:grid; grid-template-columns:1fr 1fr; gap:4px; background:var(--surface-2); padding:4px; border-radius:12px; }
.type-seg a{ text-align:center; text-decoration:none; padding:10px; border-radius:9px; font-weight:800; font-size:0.9rem; color:var(--text-secondary); }
.type-seg a.on-in{ background:var(--surface); color:var(--income); box-shadow:0 1px 3px rgba(0,0,0,0.08); }
.type-seg a.on-ex{ background:var(--surface); color:var(--expense); box-shadow:0 1px 3px rgba(0,0,0,0.08); }
.sheet-form{ display:flex; flex-direction:column; gap:14px; }
.amount-field{ display:flex; align-items:center; gap:10px; background:var(--surface-2); border:1px solid var(--border); border-radius:14px; padding:6px 14px; }
.amount-field span{ font-weight:800; color:var(--text-muted); }
.amount-field input{ flex:1; min-width:0; border:none; background:transparent; font:inherit; font-size:2rem; font-weight:800; text-align:right; color:var(--text-primary); padding:6px 0; font-variant-numeric:tabular-nums; }
.amount-field input:focus{ outline:none; }
.amount-field:focus-within{ outline:2px solid var(--accent); outline-offset:1px; }
.amount-field.in input{ color:var(--income); } .amount-field.ex input{ color:var(--expense); }
.cat-chips{ border:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:6px; }
.cat-chips legend{ margin-bottom:6px; }
.cat-chips label{ cursor:pointer; }
.cat-chips input{ position:absolute; opacity:0; pointer-events:none; }
.cat-chips span{ display:inline-block; border:1px solid var(--border); background:var(--surface); border-radius:999px; padding:8px 13px; font-size:0.86rem; font-weight:700; color:var(--text-secondary); }
.cat-chips input:checked + span{ background:var(--accent-soft); color:var(--accent-strong); border-color:var(--accent); }
.cat-chips input:focus-visible + span{ outline:2px solid var(--accent); outline-offset:1px; }
.sheet-input{ font:inherit; font-size:0.95rem; color:var(--text-primary); background:var(--surface-2); border:1px solid var(--border); border-radius:12px; padding:12px; width:100%; }
.sheet-row{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.sheet-small{ display:flex; flex-direction:column; gap:4px; font-size:0.7rem; font-weight:800; text-transform:uppercase; letter-spacing:0.05em; color:var(--text-muted); min-width:0; }
.sheet-small input{ font:inherit; font-size:0.88rem; text-transform:none; letter-spacing:0; font-weight:500; color:var(--text-primary); background:var(--surface-2); border:1px solid var(--border); border-radius:10px; padding:8px; min-width:0; width:100%; }
.sheet-actions{ display:grid; grid-template-columns:1fr 2fr; gap:10px; }
.group-head{ display:flex; justify-content:space-between; font-size:0.78rem; font-weight:800; text-transform:uppercase; letter-spacing:0.05em; padding-bottom:8px; border-bottom:1px solid var(--border-soft); }
.money-row{ display:grid; grid-template-columns:auto minmax(0,1fr) auto auto; gap:10px; align-items:center; padding:10px 0; border-bottom:1px solid var(--border-soft); }
.money-row:last-child{ border-bottom:none; }
.money-ico{ width:34px; height:34px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-weight:800; }
.money-ico.in{ background:var(--income-soft); color:var(--income); } .money-ico.ex{ background:var(--expense-soft); color:var(--expense); }
.money-amt{ font-weight:800; }
.money-actions{ display:flex; gap:4px; align-items:center; }
.table-scroll{ overflow-x:auto; }
.source-table{ min-width:460px; }
.source-table .num{ text-align:right; font-variant-numeric:tabular-nums; }
.source-table th.num{ text-align:right; }

/* one layout for every screen: a centred phone-style column with the
   navigation bar at the bottom; "Events" sits in the middle, highlighted */
.app, .topbar, .sub-nav{ max-width:760px; }
.topbar{ margin-bottom:12px; flex-wrap:nowrap; }
.nav-user .author-badge{ width:30px; height:30px; font-size:0.72rem; }
body{ padding-bottom:calc(100px + env(safe-area-inset-bottom, 0px)); }
.bottom-nav{ display:grid; grid-template-columns:repeat(5, 1fr); align-items:end; position:fixed; left:0; right:0; bottom:0; z-index:40; background:var(--surface); border-top:1px solid var(--border); padding:6px 4px calc(8px + env(safe-area-inset-bottom, 0px)); box-shadow:0 -6px 20px -12px rgba(0,0,0,0.25); }
.bottom-nav > a, .bottom-nav summary{ display:flex; flex-direction:column; align-items:center; gap:1px; font-size:0.7rem; font-weight:800; color:var(--text-muted); text-decoration:none; padding:4px 0; cursor:pointer; list-style:none; }
.bottom-nav > a:hover, .bottom-nav summary:hover{ color:var(--text-primary); }
.bottom-nav summary::-webkit-details-marker{ display:none; }
.bottom-nav b{ font-size:1.2rem; line-height:1.3; }
.bottom-nav > a.active, .bottom-nav .more.active summary{ color:var(--accent-strong); }
.bottom-nav .nav-events b{ width:52px; height:52px; margin-top:-26px; border-radius:18px; background:var(--accent); color:#fff; display:flex; align-items:center; justify-content:center; font-size:1.4rem; box-shadow:0 6px 16px -6px rgba(138,90,32,0.6); border:3px solid var(--bg); }
.bottom-nav .nav-events{ color:var(--accent-strong); }
.bottom-nav .nav-events.active b{ background:var(--accent-strong); }
.more{ position:relative; }
.more-menu{ position:absolute; right:6px; bottom:calc(100% + 12px); background:var(--surface); border:1px solid var(--border); border-radius:14px; box-shadow:var(--shadow); padding:6px; display:flex; flex-direction:column; min-width:200px; }
.more-menu a{ text-decoration:none; font-weight:700; font-size:0.95rem; color:var(--text-primary); padding:11px 12px; border-radius:10px; }
.more-menu a:hover, .more-menu a.active{ background:var(--surface-2); }
.more-menu .more-logout{ color:var(--expense); border-top:1px solid var(--border-soft); border-radius:0 0 10px 10px; font-size:0.88rem; }
@media (min-width: 761px){
  /* on wide screens the bar floats as a rounded dock under the column */
  .bottom-nav{ left:50%; right:auto; transform:translateX(-50%); width:min(560px, calc(100% - 32px)); bottom:16px; border:1px solid var(--border); border-radius:20px; padding:6px 6px 8px; box-shadow:var(--shadow); }
}
.overview-grid, .start-grid, .charts-grid{ grid-template-columns:1fr; }
.kpi-row{ grid-template-columns:repeat(2, 1fr); }
.facts div:last-child{ grid-column:1 / -1; }
.project-tabs{ justify-content:space-between; gap:0; }
.project-tabs a{ padding:10px 6px; font-size:0.88rem; }
.fin-teaser-nums{ grid-template-columns:1fr 1fr; }
.fin-teaser-nums > div:first-child{ grid-column:1 / -1; }
.project-list{ grid-template-columns:1fr; }
.f-note, .f-name{ flex:1 1 100%; width:auto; }
@media (max-width: 760px){
  .project-header .project-title{ font-size:1.45rem; }
  .sheet-row{ grid-template-columns:1fr; }
  .quick-add select, .quick-add input[type=date], .quick-add input[type=time]{ flex:1 1 40%; }
}

/* start page: upcoming events first */
.event-list{ display:flex; flex-direction:column; gap:10px; }
.event-card{ display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:14px; align-items:center; text-decoration:none; color:inherit; background:var(--surface-2); border:1px solid var(--border-soft); border-radius:14px; padding:12px 14px; transition:border-color .15s; }
.event-card:hover{ border-color:var(--accent); }
.event-card .ev-date{ width:52px; height:52px; background:var(--surface); }
.event-card .ev-date b{ font-size:1.2rem; }
.ev-main{ display:flex; flex-direction:column; gap:3px; min-width:0; }
.ev-main .pc-name{ font-size:1.05rem; }
.ev-badges{ display:flex; gap:6px; flex-wrap:wrap; align-items:center; }
.ev-days{ font-size:0.74rem; font-weight:800; color:var(--accent-strong); white-space:nowrap; text-align:right; }
.ev-days.soon{ color:var(--expense); }

/* consistent form controls (Safari draws native selects/dates otherwise) */
.field input:not([type=file]), .field select{ height:42px; min-height:42px; line-height:1.2; }
.field select, .filter-form select, .quick-add select, .report-toolbar select{
  -webkit-appearance:none; appearance:none; padding-right:30px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%2393856c' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 11px center; background-size:10px 6px;
}
.field input[type=date], .field input[type=time]{ -webkit-appearance:none; appearance:none; }
.field input[type=date]::-webkit-date-and-time-value{ text-align:left; }
.field input[type=file]{ height:42px; padding:6px 8px; }
.form-card form > .submit-btn{ height:42px; }

/* current date under the brand, on every page */
.topbar{ flex-wrap:wrap; row-gap:2px; }
.today-date{ order:3; flex-basis:100%; font-size:0.82rem; font-weight:700; color:var(--text-secondary); padding-left:22px; }

/* rechnungen */
.upload-form{ display:flex; flex-direction:column; gap:12px; }
.drop-zone{ position:relative; display:flex; flex-direction:column; gap:6px; align-items:center; text-align:center; padding:28px 18px; border:2px dashed var(--border); border-radius:16px; background:var(--surface-2); cursor:pointer; }
.drop-zone:hover, .drop-zone:focus-within{ border-color:var(--accent); }
.drop-zone input{ position:absolute; inset:0; opacity:0; cursor:pointer; }
.drop-zone b{ font-size:1.05rem; }
.drop-zone span{ font-size:0.86rem; color:var(--text-secondary); max-width:46ch; }
.drop-zone .file-name{ font-weight:700; color:var(--accent-strong); }
.add-btn:disabled{ opacity:0.7; cursor:wait; }
.ai-note{ margin:0; font-size:0.86rem; border-radius:10px; padding:9px 12px; }
.ai-note.ok{ background:var(--income-soft); color:var(--income); }
.ai-note.warn{ background:rgba(237,161,0,0.16); color:var(--slot4); }
.paid-choice{ border:none; margin:0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.paid-choice legend{ margin-bottom:6px; }
.paid-choice label{ cursor:pointer; }
.paid-choice input{ position:absolute; opacity:0; pointer-events:none; }
.paid-choice span{ display:flex; flex-direction:column; gap:2px; height:100%; border:1px solid var(--border); background:var(--surface); border-radius:12px; padding:10px 12px; }
.paid-choice small{ font-size:0.76rem; color:var(--text-muted); }
.paid-choice input:checked + span{ border-color:var(--accent); background:var(--accent-soft); }
.paid-choice input:focus-visible + span{ outline:2px solid var(--accent); outline-offset:1px; }
.sheet-form:not(:has(input[name=paid][value="1"]:checked)) .paid-date{ display:none; }
.invoice-row{ display:grid; grid-template-columns:minmax(0,1fr) auto auto; gap:10px; align-items:center; padding:11px 0; border-bottom:1px solid var(--border-soft); }
.invoice-row:last-child{ border-bottom:none; }
.invoice-row .ev-badges{ margin-top:3px; }
.invoice-row.is-paid .money-amt{ color:var(--text-secondary); }
.invoice-actions{ display:flex; gap:5px; align-items:center; }
.pay-btn{ appearance:none; border:1px solid var(--income); background:var(--income-soft); color:var(--income); font:inherit; font-size:0.78rem; font-weight:800; padding:6px 10px; border-radius:9px; cursor:pointer; white-space:nowrap; }
.pay-btn:hover{ background:var(--income); color:#fff; }
.invoice-link{ font-size:0.9rem; }
@media (max-width: 480px){
  .invoice-row{ grid-template-columns:minmax(0,1fr) auto; }
  .invoice-actions{ grid-column:1 / -1; justify-content:flex-end; }
}

/* report / printable yearly overview */
.report-toolbar{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.report-toolbar .field{ flex-direction:row; align-items:center; gap:8px; }
.report-toolbar select{ font:inherit; font-size:0.9rem; color:var(--text-primary); background:var(--surface-2); border:1px solid var(--border); border-radius:10px; padding:7px 10px; }
.report-head{ text-align:center; margin-bottom:6px; }
.report-head h1{ font-size:1.6rem; font-weight:600; }
.report-head p{ color:var(--text-secondary); font-size:0.88rem; margin:4px 0 0; }
.report-table{ width:100%; border-collapse:collapse; font-size:0.86rem; }
.report-table th, .report-table td{ text-align:left; padding:7px 10px; border-bottom:1px solid var(--border-soft); }
.report-table th{ font-size:0.72rem; text-transform:uppercase; letter-spacing:0.04em; color:var(--text-muted); font-weight:700; }
.report-table td.num{ text-align:right; font-variant-numeric:tabular-nums; }
.report-table tr.total td{ font-weight:800; border-top:2px solid var(--border); border-bottom:none; }
.report-table td.income{ color:var(--income); } .report-table td.expense{ color:var(--expense); }
.report-section-title{ font-family:"Fraunces", Georgia, serif; font-size:1.05rem; font-weight:600; margin:22px 0 10px; }

@media print{
  body{ background:#fff; padding:0; }
  .no-print{ display:none !important; }
  .card{ box-shadow:none; border:none; padding:0; }
  a{ text-decoration:none; color:inherit; }
  .report-table{ page-break-inside:auto; }
  .report-table tr{ page-break-inside:avoid; }
  h2, .report-section-title{ page-break-after:avoid; }
  @page{ margin:16mm 14mm; }
}
.money-row .c-sub{ white-space:normal; }
.quick-btn.primary{ background:var(--accent); color:#fff; border-color:var(--accent); }
.quick-btn.primary:hover{ background:var(--accent-strong); }
.sub-nav{ flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; gap:16px; }
.sub-nav a{ white-space:nowrap; }