v32

src/main.jsx

@@ -129,7 +129,7 @@ function Dashboard({totals,onToggle}){
     <section className="toggle-panel"><div><strong>Periodische Kosten in Monats-Saldo einrechnen</strong><span>Jährliche, halbjährliche und vierteljährliche Beträge werden auf einen Monatswert heruntergerechnet.</span></div><button className={`switch ${totals.includePeriodic?'on':''}`} onClick={onToggle} role="switch" aria-checked={totals.includePeriodic}><span/></button></section>
     <section className="summary-grid"><Metric label="Eingänge / Monat" value={totals.income} positive/><Metric label="Ausgänge / Monat" value={totals.expense} negative/><Metric label="Periodische Rücklage / Monat" value={totals.periodicExpenseReserve}/><Metric label="Monatlicher Gesamtsaldo" value={totals.balance} positive={totals.balance>=0} negative={totals.balance<0} featured/></section>
     {!totals.includePeriodic&&totals.periodicExpenseReserve>0&&<div className="info-note">Periodische Ausgaben von rechnerisch <strong>{formatMoney(totals.periodicExpenseReserve)} / Monat</strong> sind derzeit nicht im Saldo enthalten.</div>}
-    <section className="panel"><div className="section-head"><div><h2>Saldo je Konto</h2><p>Monatliche Fixwerte plus optional heruntergerechnete periodische Werte.</p></div></div>{totals.accounts.length===0?<Empty text="Lege zuerst ein Konto an."/>:<div className="account-summary-grid">{totals.accounts.map(s=><article className="account-summary" key={s.account.id}><div className="account-summary-top"><h3>{s.account.name}</h3><span className={s.balance>=0?'pill good':'pill bad'}>{s.balance>=0?'+':''}{formatMoney(s.balance)}</span></div><div className={`big-money ${s.balance>=0?'good-text':'bad-text'}`}>{formatMoney(s.balance)}</div><div className="muted">monatlicher Fix-Saldo</div><div className="mini-grid"><div><span>Eingänge</span><strong className="good-text">+{formatMoney(s.income)}</strong></div><div><span>Ausgänge</span><strong className="bad-text">−{formatMoney(s.expense)}</strong></div><div><span>Transfers rein</span><strong className="good-text">+{formatMoney(s.transferIn)}</strong></div><div><span>Transfers raus</span><strong className="bad-text">−{formatMoney(s.transferOut)}</strong></div></div></article>)}</div>}</section>
+    <section className="panel"><div className="section-head"><div><h2>Saldo je Konto</h2><p>Monatliche Fixwerte plus optional heruntergerechnete periodische Werte.</p></div></div>{totals.accounts.length===0?<Empty text="Lege zuerst ein Konto an."/>:<div className="account-balance-list">{totals.accounts.map(s=><details className="account-balance-card" key={s.account.id}><summary><div className="account-balance-title"><h3>{s.account.name}</h3><span>monatlicher Fix-Saldo</span></div><strong className={`account-balance-value ${s.balance>=0?'good-text':'bad-text'}`}>{s.balance>=0?'+':''}{formatMoney(s.balance)}</strong><span className="accordion-chevron" aria-hidden="true">⌄</span></summary><div className="account-balance-details"><div className="mini-grid"><div><span>Eingänge</span><strong className="good-text">+{formatMoney(s.income)}</strong></div><div><span>Ausgänge</span><strong className="bad-text">−{formatMoney(s.expense)}</strong></div><div><span>Transfers rein</span><strong className="good-text">+{formatMoney(s.transferIn)}</strong></div><div><span>Transfers raus</span><strong className="bad-text">−{formatMoney(s.transferOut)}</strong></div></div></div></details>)}</div>}</section>
     <section className="panel total-panel"><div><span className="eyebrow">GESAMT</span><h2>Monatlich nach Fixkosten übrig</h2><p>Interne Transfers verändern den Gesamtsaldo nicht.</p></div><div className={`grand-total ${totals.balance>=0?'good-text':'bad-text'}`}>{formatMoney(totals.balance)}</div></section>
   </div>;
 }

src/styles.css

@@ -212,3 +212,78 @@ code { color:#b8c3ff; }
 @media (max-width: 760px) {
   .mobile-nav { grid-template-columns:repeat(7,minmax(50px,1fr)); }
 }
+
+/* v3.2: kompakte Kontosalden als Akkordeon */
+.account-balance-list {
+  display:grid;
+  gap:10px;
+}
+.account-balance-card {
+  background:#0d131c;
+  border:1px solid #29364a;
+  border-radius:14px;
+  overflow:hidden;
+}
+.account-balance-card[open] {
+  border-color:#46577a;
+  background:#0f1621;
+}
+.account-balance-card summary {
+  list-style:none;
+  cursor:pointer;
+  display:grid;
+  grid-template-columns:minmax(0,1fr) auto 22px;
+  gap:14px;
+  align-items:center;
+  min-height:68px;
+  padding:12px 15px;
+  user-select:none;
+}
+.account-balance-card summary::-webkit-details-marker { display:none; }
+.account-balance-title { min-width:0; }
+.account-balance-title h3 {
+  margin:0;
+  overflow:hidden;
+  text-overflow:ellipsis;
+  white-space:nowrap;
+}
+.account-balance-title span {
+  display:block;
+  margin-top:2px;
+  color:var(--muted);
+  font-size:11px;
+}
+.account-balance-value {
+  font-size:19px;
+  font-weight:850;
+  letter-spacing:-.035em;
+  white-space:nowrap;
+}
+.account-balance-card[open] .accordion-chevron { transform:rotate(180deg); }
+.account-balance-details {
+  border-top:1px solid #202a39;
+  padding:0 15px 13px;
+}
+.account-balance-details .mini-grid {
+  margin-top:0;
+  padding-top:13px;
+}
+
+@media (max-width:760px) {
+  .account-balance-list { gap:8px; }
+  .account-balance-card summary {
+    grid-template-columns:minmax(0,1fr) auto 18px;
+    gap:8px;
+    min-height:58px;
+    padding:9px 10px;
+  }
+  .account-balance-title h3 { font-size:14px; }
+  .account-balance-title span { font-size:9px; }
+  .account-balance-value { font-size:16px; }
+  .account-balance-card .accordion-chevron { font-size:17px; }
+  .account-balance-details { padding:0 10px 10px; }
+  .account-balance-details .mini-grid {
+    gap:8px;
+    padding-top:10px;
+  }
+}