This commit is contained in:
2026-08-18 23:11:17 +02:00
parent 6b48fcb363
commit 52b46f09a4
11 changed files with 958 additions and 137 deletions
+480
View File
@@ -383,3 +383,483 @@ code { color:#b8c3ff; }
.stats-summary { grid-template-columns:1fr 1fr; }
.category-stat-head > div:last-child { flex-direction:column; align-items:flex-end; gap:0; }
}
/* v3.9: Finanzcockpit, Bewegungen, Drilldowns, Szenarien, Belastungsprofil */
.cockpit-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.text-metric small { color:var(--muted); font-size:11px; margin-top:5px; }
.funding-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.funding-card { background:#0d131c; border:1px solid #29364a; border-radius:14px; padding:15px; min-width:0; }
.funding-head { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; padding-bottom:12px; border-bottom:1px solid #202a39; }
.funding-head strong:first-child { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.funding-head span { flex:0 0 auto; font-size:11px; font-weight:850; }
.funding-numbers { display:grid; gap:8px; margin-top:12px; }
.funding-numbers div { display:flex; justify-content:space-between; gap:10px; align-items:baseline; }
.funding-numbers span { color:var(--muted); font-size:10px; }
.funding-numbers strong { font-size:12px; white-space:nowrap; }
.reserve-total { display:flex; flex-direction:column; align-items:flex-end; gap:2px; white-space:nowrap; }
.reserve-total span { color:var(--muted); font-size:10px; }
.reserve-total strong { font-size:16px; }
.reserve-list { display:grid; gap:8px; }
.reserve-row { display:flex; justify-content:space-between; align-items:center; gap:16px; padding:11px 12px; background:#0d131c; border:1px solid #263244; border-radius:11px; }
.reserve-row > div:first-child { min-width:0; }
.reserve-row > div:first-child strong { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:13px; }
.reserve-row > div:first-child span { display:block; color:var(--muted); font-size:9px; margin-top:3px; }
.reserve-row > div:last-child { flex:0 0 auto; text-align:right; }
.reserve-row > div:last-child span { display:block; color:var(--muted); font-size:9px; }
.reserve-row > div:last-child strong { font-size:12px; }
.movement-toolbar { display:flex; align-items:center; justify-content:space-between; gap:12px; background:#101722; border:1px solid var(--line); border-radius:15px; padding:8px; }
.movement-tabs { display:flex; gap:5px; min-width:0; }
.movement-tabs button { display:flex; align-items:center; gap:7px; border:0; border-radius:10px; background:transparent; color:var(--muted); padding:9px 12px; font-weight:750; }
.movement-tabs button small { min-width:20px; padding:2px 6px; border-radius:999px; background:#202a39; color:#9aa8ba; font-size:9px; }
.movement-tabs button.active { background:#202a39; color:var(--text); }
.movement-tabs button.active small { background:#34415a; color:#dfe5ee; }
.category-stat-row { border-radius:11px; }
.category-stat-row > summary { list-style:none; cursor:pointer; padding:3px 0; }
.category-stat-row > summary::-webkit-details-marker { display:none; }
.category-stat-row[open] { background:#0c121b; border:1px solid #263244; padding:10px; }
.category-stat-row[open] > summary { padding:0; }
.category-drilldown { display:grid; gap:6px; margin-top:10px; padding-top:9px; border-top:1px solid #202b3b; }
.category-drill-row { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:7px 8px; border-radius:8px; background:#111925; }
.category-drill-row > div { min-width:0; }
.category-drill-row > div strong { display:block; font-size:11px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.category-drill-row > div span { display:block; color:var(--muted); font-size:8px; margin-top:2px; }
.category-drill-row > strong { flex:0 0 auto; font-size:10px; white-space:nowrap; }
.burden-bars { display:grid; gap:8px; }
.burden-row { display:grid; grid-template-columns:34px minmax(0,1fr) 105px; align-items:center; gap:9px; }
.burden-row > span { color:var(--muted); font-size:9px; font-weight:800; text-transform:uppercase; }
.burden-row > div { height:11px; border-radius:999px; background:#0a1018; border:1px solid #202b3b; overflow:hidden; }
.burden-row > div i { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,#5869b7,#8b9cff); }
.burden-row.peak > div i { background:linear-gradient(90deg,#c35c68,#ff7c86); }
.burden-row.peak > span,.burden-row.peak > strong { color:#ff9ba3; }
.burden-row > strong { text-align:right; font-size:10px; white-space:nowrap; }
.scenario-toolbar { display:flex; align-items:end; justify-content:space-between; gap:14px; background:#101722; border:1px solid var(--line); border-radius:15px; padding:13px; }
.scenario-toolbar > div:first-child { display:grid; gap:5px; min-width:min(420px,55%); }
.scenario-toolbar > div:first-child > span { color:var(--muted); font-size:9px; text-transform:uppercase; font-weight:850; letter-spacing:.06em; }
.scenario-toolbar select,.year-account-filter select { width:100%; background:#0b111a; color:white; border:1px solid #2a374a; border-radius:10px; padding:10px 11px; }
.danger-button { color:#ff929a; }
.scenario-adjustments { display:grid; gap:8px; }
.scenario-adjustment { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:12px; border:1px solid #29364a; background:#0d131c; border-radius:12px; }
.scenario-adjustment > div:first-child { min-width:0; display:grid; grid-template-columns:auto minmax(0,1fr); align-items:center; column-gap:8px; }
.scenario-adjustment > div:first-child strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.scenario-adjustment > div:first-child small { grid-column:2; color:var(--muted); font-size:9px; }
.scenario-adjustment > div:last-child { flex:0 0 auto; text-align:right; }
.scenario-adjustment > div:last-child > strong { font-size:12px; }
.scenario-type { grid-row:1 / span 2; padding:4px 7px; border-radius:999px; font-size:8px; font-weight:850; text-transform:uppercase; background:#202b3b; }
.scenario-type.income { color:var(--good); background:#15392f; }
.scenario-type.expense { color:var(--bad); background:#401d25; }
.scenario-type.transfer { color:#adb9ff; background:#1c2340; }
.scenario-account-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.scenario-account { border:1px solid #29364a; background:#0d131c; border-radius:12px; padding:12px; }
.scenario-account > strong { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; margin-bottom:9px; }
.scenario-account div { display:flex; justify-content:space-between; gap:9px; padding:4px 0; }
.scenario-account div span { color:var(--muted); font-size:9px; }
.scenario-account div b { font-size:10px; }
@media (max-width:1050px) {
.cockpit-grid,.funding-grid,.scenario-account-grid { grid-template-columns:1fr 1fr; }
}
@media (max-width:760px) {
.mobile-nav { grid-template-columns:repeat(7,minmax(50px,1fr)); }
.movement-toolbar { align-items:stretch; flex-direction:column; }
.movement-tabs { display:grid; grid-template-columns:repeat(3,1fr); }
.movement-tabs button { justify-content:center; padding:9px 5px; font-size:11px; }
.movement-toolbar > .primary { width:100%; }
.cockpit-grid,.funding-grid,.scenario-account-grid { grid-template-columns:1fr 1fr; gap:8px; }
.scenario-toolbar { align-items:stretch; flex-direction:column; }
.scenario-toolbar > div:first-child { min-width:0; width:100%; }
.scenario-adjustment { align-items:flex-start; flex-direction:column; }
.scenario-adjustment > div:last-child { width:100%; text-align:left; }
.scenario-adjustment .actions { margin-top:5px; text-align:left; }
.scenario-adjustment .actions button { margin-left:0; margin-right:5px; }
.reserve-panel .section-head { align-items:flex-start; }
.reserve-row { gap:8px; }
.burden-row { grid-template-columns:28px minmax(0,1fr) 86px; gap:6px; }
.burden-row > strong { font-size:9px; }
}
@media (max-width:430px) {
.cockpit-grid,.funding-grid,.scenario-account-grid { grid-template-columns:1fr; }
.reserve-panel .section-head { flex-direction:column; }
.reserve-total { align-items:flex-start; }
.reserve-row { align-items:flex-start; flex-direction:column; }
.reserve-row > div:last-child { text-align:left; }
.category-drill-row { align-items:flex-start; flex-direction:column; }
.category-drill-row > strong { align-self:flex-end; }
}
/* v3.10: mobile Bewegungen + Daten, Planung als eigener Bereich */
.movement-mobile-list { display:none; }
.data-summary-grid { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:10px; }
.data-summary-card { min-width:0; background:#0d131c; border:1px solid #29364a; border-radius:12px; padding:13px; }
.data-summary-card span { display:block; color:var(--muted); font-size:9px; font-weight:800; text-transform:uppercase; letter-spacing:.055em; }
.data-summary-card strong { display:block; margin-top:5px; font-size:22px; letter-spacing:-.035em; }
.data-subhead { display:flex; align-items:end; justify-content:space-between; gap:12px; margin:18px 0 8px; }
.data-subhead strong { font-size:13px; }
.data-subhead span { color:var(--muted); font-size:9px; }
.data-json-mobile { display:none; }
.planning-summary { grid-template-columns:repeat(4,minmax(0,1fr)); }
@media (max-width:1050px) {
.data-summary-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
.planning-summary { grid-template-columns:1fr 1fr; }
}
@media (max-width:760px) {
main { min-width:0; overflow-x:hidden; padding:18px 12px 92px; }
.topbar { margin-bottom:16px; }
.topbar h1 { font-size:24px; }
.topbar p { max-width:none; font-size:11px; }
.content-stack { gap:12px; }
.panel { min-width:0; padding:13px; }
.mobile-nav {
grid-template-columns:repeat(8,minmax(0,1fr));
width:100%;
max-width:100%;
overflow-x:hidden;
padding-left:3px;
padding-right:3px;
}
.mobile-nav button {
min-width:0;
padding:5px 0;
font-size:8px;
gap:2px;
overflow:hidden;
}
.mobile-nav button span {
width:100%;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
text-align:center;
}
.mobile-nav svg { width:17px; height:17px; }
.movements-page .movement-toolbar {
padding:6px;
gap:7px;
border-radius:13px;
}
.movement-tabs { gap:3px; }
.movement-tabs button {
min-width:0;
padding:9px 3px;
font-size:10px;
gap:4px;
}
.movement-tabs button small {
min-width:17px;
padding:2px 4px;
font-size:8px;
}
.movement-toolbar > .primary {
min-height:42px;
border-radius:10px;
}
.movement-list-panel .section-head {
margin-bottom:12px;
}
.movement-list-panel .section-head h2 { font-size:17px; }
.movement-list-panel .section-head p { font-size:10px; line-height:1.4; }
.movement-desktop-table { display:none; }
.movement-mobile-list { display:grid; gap:9px; }
.movement-card {
min-width:0;
border:1px solid #29364a;
background:#0d131c;
border-radius:13px;
padding:12px;
}
.movement-card-head {
display:flex;
justify-content:space-between;
align-items:flex-start;
gap:10px;
padding-bottom:10px;
border-bottom:1px solid #202a39;
}
.movement-card-head > div {
min-width:0;
display:flex;
flex-direction:column;
align-items:flex-start;
gap:6px;
}
.movement-card-head > div > strong {
max-width:100%;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
font-size:14px;
}
.movement-card-head > strong {
flex:0 0 auto;
font-size:15px;
white-space:nowrap;
}
.movement-card .category-badge { font-size:8px; padding:3px 6px; }
.movement-card-grid {
display:grid;
grid-template-columns:1fr 1fr;
gap:9px 12px;
padding:11px 0;
}
.movement-card-grid > div { min-width:0; }
.movement-card-grid span,
.transfer-route span {
display:block;
color:#718096;
font-size:8px;
text-transform:uppercase;
letter-spacing:.055em;
font-weight:800;
margin-bottom:3px;
}
.movement-card-grid strong,
.transfer-route strong {
display:block;
font-size:10px;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}
.movement-card-actions {
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:6px;
padding-top:10px;
border-top:1px solid #202a39;
}
.movement-card-actions button {
min-width:0;
border:1px solid #2a374a;
background:#171f2d;
color:#d8e0ea;
border-radius:9px;
padding:8px 3px;
font-size:9px;
font-weight:750;
}
.movement-card-actions button.danger { color:#ff929a; }
.transfer-route {
display:grid;
grid-template-columns:minmax(0,1fr) 20px minmax(0,1fr);
align-items:center;
gap:6px;
padding:11px 0 2px;
}
.transfer-route > div { min-width:0; }
.route-arrow {
color:#8b9cff !important;
font-size:17px !important;
text-align:center;
margin:0 !important;
}
.transfer-card .movement-card-grid {
grid-template-columns:repeat(3,minmax(0,1fr));
}
.data-page .section-head { margin-bottom:12px; }
.data-page .section-head h2 { font-size:17px; }
.data-page .section-head p { font-size:10px; line-height:1.45; }
.data-actions {
display:grid;
grid-template-columns:1fr;
gap:8px;
}
.data-actions .button-link {
width:100%;
min-height:44px;
justify-content:center;
text-align:center;
}
.data-summary-grid {
grid-template-columns:repeat(3,minmax(0,1fr));
gap:7px;
}
.data-summary-card {
padding:10px;
border-radius:10px;
}
.data-summary-card span { font-size:7px; }
.data-summary-card strong { font-size:19px; }
.data-json-desktop { display:none; }
.data-json-mobile {
display:block;
margin-top:12px;
border:1px solid #29364a;
background:#0d131c;
border-radius:11px;
overflow:hidden;
}
.data-json-mobile > summary {
list-style:none;
cursor:pointer;
padding:12px;
}
.data-json-mobile > summary::-webkit-details-marker { display:none; }
.data-json-mobile > summary span {
display:block;
font-size:11px;
font-weight:800;
}
.data-json-mobile > summary small {
display:block;
color:var(--muted);
font-size:8px;
margin-top:2px;
}
.data-json-mobile .json-preview {
max-height:50vh;
border:0;
border-top:1px solid #202a39;
border-radius:0;
font-size:9px;
padding:10px;
}
.planning-summary { grid-template-columns:1fr 1fr; gap:8px; }
.planning-summary .metric { min-height:84px; padding:12px; }
.planning-summary .metric strong { font-size:18px; }
.planning-page .funding-grid { grid-template-columns:1fr; }
}
@media (max-width:430px) {
.data-summary-grid { grid-template-columns:1fr 1fr; }
.planning-summary { grid-template-columns:1fr 1fr; }
.transfer-card .movement-card-grid { grid-template-columns:1fr 1fr; }
}
/* v3.12: reduziertes Dashboard + persistenter Mehrfach-Kontofilter + PWA polish */
.dashboard-account-filter {
border:1px solid #29364a;
background:#0f1621;
border-radius:14px;
overflow:hidden;
}
.dashboard-account-filter > summary {
list-style:none;
cursor:pointer;
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
padding:12px 14px;
user-select:none;
}
.dashboard-account-filter > summary::-webkit-details-marker { display:none; }
.dashboard-account-filter > summary > div { min-width:0; }
.dashboard-account-filter > summary span:first-child {
display:block;
color:var(--muted);
font-size:9px;
font-weight:850;
text-transform:uppercase;
letter-spacing:.075em;
}
.dashboard-account-filter > summary strong {
display:block;
margin-top:2px;
font-size:14px;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}
.dashboard-account-filter[open] > summary .accordion-chevron { transform:rotate(180deg); }
.dashboard-filter-options {
display:flex;
flex-wrap:wrap;
gap:7px;
padding:0 14px 14px;
border-top:1px solid #202a39;
padding-top:12px;
}
.filter-chip {
border:1px solid #2e3b50;
background:#121a26;
color:#98a6b8;
border-radius:999px;
padding:7px 10px;
font-size:10px;
font-weight:800;
}
.filter-chip.active {
color:#e9edff;
background:#202a45;
border-color:#5a6cc7;
box-shadow:inset 0 0 0 1px #7587e533;
}
.dashboard-balances .section-head { align-items:flex-end; }
.dashboard-selected-total { flex:0 0 auto; text-align:right; }
.dashboard-selected-total span {
display:block;
color:var(--muted);
font-size:9px;
font-weight:800;
text-transform:uppercase;
letter-spacing:.06em;
margin-bottom:2px;
}
.dashboard-selected-total strong { font-size:23px; white-space:nowrap; letter-spacing:-.035em; }
.dashboard-toggle { margin-top:2px; }
.stats-kpi-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.stats-kpi-grid .metric { min-height:98px; padding:15px; }
.stats-kpi-grid .metric strong { font-size:21px; }
@media (display-mode: standalone) {
body { overscroll-behavior-y:none; }
.topbar { padding-top:max(0px, env(safe-area-inset-top)); }
}
@media (max-width:900px) {
.stats-kpi-grid { grid-template-columns:1fr 1fr; }
}
@media (max-width:760px) {
.dashboard-page { gap:10px; }
.dashboard-account-filter > summary { padding:10px 11px; }
.dashboard-filter-options { padding:10px 11px 11px; gap:6px; }
.filter-chip { padding:7px 9px; font-size:9px; }
.dashboard-balances { padding:12px; }
.dashboard-balances .section-head { margin-bottom:10px; }
.dashboard-balances .section-head h2 { font-size:17px; }
.dashboard-balances .section-head p { font-size:9px; }
.dashboard-selected-total span { font-size:7px; }
.dashboard-selected-total strong { font-size:18px; }
.dashboard-toggle { padding:12px; }
.dashboard-toggle strong { font-size:11px; }
.dashboard-toggle span:not(.switch span) { font-size:9px; line-height:1.35; }
.stats-kpi-grid { grid-template-columns:1fr 1fr; gap:8px; }
.stats-kpi-grid .metric { min-height:82px; padding:11px; }
.stats-kpi-grid .metric span { font-size:9px; }
.stats-kpi-grid .metric strong { font-size:17px; }
}
@media (max-width:430px) {
.dashboard-balances .section-head { align-items:flex-start; }
.dashboard-selected-total { text-align:left; }
.stats-kpi-grid { grid-template-columns:1fr 1fr; }
}
/* v3.14: Jahresansicht trennt Wirtschaftssicht und Konto-Liquidität */
.year-flow-breakdown { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; padding:10px 0 12px; border-bottom:1px solid #202a39; }
.year-flow-breakdown > div { min-width:0; background:#0b111a; border:1px solid #202c3c; border-radius:10px; padding:9px 10px; }
.year-flow-breakdown span { display:block; color:#7f8da1; font-size:8px; font-weight:800; text-transform:uppercase; letter-spacing:.05em; margin-bottom:4px; }
.year-flow-breakdown strong { display:block; font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.year-detail-group { padding-top:10px; }
.year-detail-group + .year-detail-group { margin-top:3px; border-top:1px dashed #2a3546; }
.year-detail-group-title { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:2px 0 4px; }
.year-detail-group-title > span { color:#a9b5c6; font-size:9px; font-weight:850; text-transform:uppercase; letter-spacing:.065em; }
.year-detail-group-title > strong { font-size:11px; white-space:nowrap; }
@media (max-width:760px) {
.year-flow-breakdown { grid-template-columns:1fr 1fr; gap:6px; }
.year-flow-breakdown > div { padding:8px; }
}