/* Finanzkompass · Offline-Oberfläche ohne externe Schriften oder Assets. */
:root {
  color-scheme: light;
  --paper:#f3f4ed; --surface:#fffefa; --surface-2:#f0f3ed;
  --ink:#172e29; --muted:#52675f; --line:#dce3d8;
  --accent:#126154; --accent-on:#fff; --tint:#ddece2; --gold:#c7a466;
  --danger:#a13f36; --danger-bg:#f8e9e4; --shadow:0 8px 26px -18px #324a3a36;
  --nav:rgba(255,254,250,.96); --focus:#b06d22; --outer:1120px;
}
:root[data-theme="dark"] {
  color-scheme:dark; --paper:#111b1a; --surface:#192724; --surface-2:#21322e;
  --ink:#eff2e9; --muted:#b3c4b9; --line:#34463e; --accent:#a4d6bd; --accent-on:#123c32;
  --tint:#2b473b; --gold:#d9b97d; --danger:#ffb2a3; --danger-bg:#482e2b;
  --nav:rgba(25,39,36,.96); --shadow:none; --focus:#e8bb74;
}
@media(prefers-color-scheme:dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) {
    color-scheme:dark; --paper:#111b1a; --surface:#192724; --surface-2:#21322e;
    --ink:#eff2e9; --muted:#b3c4b9; --line:#34463e; --accent:#a4d6bd; --accent-on:#123c32;
    --tint:#2b473b; --gold:#d9b97d; --danger:#ffb2a3; --danger-bg:#482e2b;
    --nav:rgba(25,39,36,.96); --shadow:none; --focus:#e8bb74;
  }
}
* { box-sizing:border-box; }
html { min-width:0; min-height:100%; scroll-padding:16px 0 100px; -webkit-text-size-adjust:100%; }
body { margin:0; background:var(--paper); color:var(--ink); font:400 15px/1.48 -apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif; -webkit-font-smoothing:antialiased; }
body:has(dialog[open]) { overflow:hidden; }
button,input,select,textarea { font:inherit; }
button,.btn { cursor:pointer; touch-action:manipulation; }
button,.btn,input,select,textarea { color:inherit; }
button, .btn {
  display:inline-flex; justify-content:center; align-items:center; gap:.48em; vertical-align:middle;
  min-height:44px; padding:9px 14px; border:1px solid var(--line); border-radius:12px;
  background:var(--surface); text-decoration:none; font-weight:620; line-height:1.24; text-align:center;
  transition:background .15s,border-color .15s,transform .15s; -webkit-tap-highlight-color:transparent;
}
button:not(:disabled):active, .btn:not(:disabled):active { transform:translateY(1px); }
button:disabled { opacity:.45; cursor:not-allowed; }
button.primary,.btn.primary { background:var(--accent); color:var(--accent-on); border-color:var(--accent); }
button.danger,.btn.danger { background:var(--danger-bg); color:var(--danger); border-color:transparent; }
.danger, .negative { color:var(--danger); }
.positive { color:var(--accent); }
@media(hover:hover) {
  button:not(:disabled):hover,.btn:hover { border-color:var(--accent); }
}
:focus-visible { outline:3px solid var(--focus); outline-offset:3px; }
[hidden] { display:none !important; }
h1,h2,h3,p,figure { margin:0; }
h1,h2,h3,strong,.big,.metric { font-variant-numeric:tabular-nums; }
h1,h2,h3 { text-wrap:balance; }
h1 { font-size:clamp(31px,4.2vw,48px); line-height:1.08; font-weight:650; letter-spacing:-.055em; }
h2 { font-size:clamp(19px,2.2vw,24px); line-height:1.22; letter-spacing:-.035em; }
h3 { font-size:17px; line-height:1.3; letter-spacing:-.018em; }
p,small { overflow-wrap:anywhere; }
small { font-size:.84em; }
a { color:var(--accent); }
svg { max-width:100%; }
button svg,.btn svg,nav svg { width:20px; height:20px; flex:none; }
.mast {
  display:flex; justify-content:space-between; align-items:center; gap:12px;
  padding:max(13px,env(safe-area-inset-top)) max(22px,calc((100vw - var(--outer)) / 2),env(safe-area-inset-right)) 13px max(22px,calc((100vw - var(--outer)) / 2),env(safe-area-inset-left));
  border-bottom:1px solid var(--line); background:var(--surface);
}
.brand { display:inline-flex; align-items:center; gap:10px; color:var(--ink); text-decoration:none; padding:0; background:transparent; border:0; font-size:21px; letter-spacing:-.055em; }
.brand img { display:block; width:40px; height:40px; border-radius:13px; }
.brand strong { font-weight:700; }
.tools,.actions,.tabs { display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.tools { justify-content:flex-end; }
main { max-width:calc(var(--outer) + 44px); margin:auto; padding:0 max(22px,env(safe-area-inset-right)) calc(116px + env(safe-area-inset-bottom)) max(22px,env(safe-area-inset-left)); }
.pagehead { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:flex-end; gap:12px 20px; margin:clamp(26px,4vw,46px) 0 22px; }
.pagehead:has(>h1) { display:block; }
.sub, .muted { color:var(--muted); }
.sub { margin-top:6px; }
.eyebrow,.kicker { display:block; margin-bottom:7px; font-size:11px; font-weight:750; letter-spacing:.12em; line-height:1.45; text-transform:uppercase; color:var(--accent); }
.grid { display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:16px; align-items:stretch; }
.grid>* { min-width:0; grid-column:span 12; }
.grid>.span5 { grid-column:span 5; }
.grid>.span6 { grid-column:span 6; }
.grid>.span7 { grid-column:span 7; }
.grid>.span12 { grid-column:1/-1; }
.card,.hero { min-width:0; padding:clamp(19px,2.6vw,31px); border-radius:23px; overflow-wrap:anywhere; }
.card { background:var(--surface); border:1px solid var(--line); box-shadow:var(--shadow); }
.card>h2,.card>h3 { margin-bottom:14px; }
.card>.actions,.card>.tabs { margin-top:14px; }
.hero { color:#fffef2; background:linear-gradient(118deg,#103e3b 4%,#18574e 78%,#276459); position:relative; isolation:isolate; overflow:hidden; box-shadow:var(--shadow); }
.hero::before {
  position:absolute; pointer-events:none; z-index:-1; content:""; width:410px; height:410px; right:-180px; top:-210px; border-radius:100%;
  background:repeating-radial-gradient(circle,transparent 0 19px,rgba(205,234,214,.135) 20px,transparent 21px 22px);
}
.hero::after {
  content:""; position:absolute; pointer-events:none; z-index:-1; top:-85px; right:18%; height:190px; width:1px; background:#a8c8b34d; transform:rotate(42deg);
}
.hero .eyebrow,.hero .kicker { color:#edcf93; }
.hero .sub,.hero .muted,.hero small { color:#c5d8cb; }
.hero .row { border-color:#ffffff29; }
.hero .btn,.hero button { background:#ffffff10; border-color:#ffffff4a; color:#fff; }
.hero .primary { background:#f0d497; color:#193c33; border-color:#f0d497; }
.hero .chip { color:#f0d497; background:#ffffff12; }
.hero .negative,.hero .danger { color:#ffb49c; }
.metric { display:block; margin:5px 0; font-size:clamp(23px,3.4vw,38px); font-weight:620; line-height:1.1; letter-spacing:-.055em; }
.big { margin:6px 0; display:block; font-size:clamp(36px,5.8vw,66px); font-weight:570; line-height:1.08; letter-spacing:-.065em; }
.chip { display:inline-flex; align-items:center; gap:5px; width:fit-content; padding:4px 9px; color:var(--accent); background:var(--tint); border-radius:99px; font-weight:650; font-size:12px; }
.accounts { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; }
.account { min-width:0; padding:15px; border-radius:15px; border:1px solid var(--line); background:var(--surface-2); }
.account strong { display:block; font-size:clamp(17px,2vw,23px); line-height:1.35; letter-spacing:-.04em; }
.account .muted { font-size:13px; }
.row { min-width:0; display:flex; align-items:center; justify-content:space-between; gap:10px; padding:12px 0; border-bottom:1px solid var(--line); }
.row:last-child { border-bottom:0; }
.row>* { min-width:0; }
.row p, .row small, .row .muted { line-height:1.4; }
.row strong { font-weight:650; }
.row small { display:block; color:var(--muted); }
.bar { height:8px; background:var(--surface-2); border-radius:20px; overflow:hidden; margin:13px 0; }
.bar>i,.bar>span { display:block; height:100%; max-width:100%; background:var(--accent); border-radius:inherit; }
.hero .bar { background:#ffffff2b; }
.hero .bar>i,.hero .bar>span { background:#e7c883; }
.empty { margin:12px 0 4px; padding:18px; border:1px dashed var(--line); background:var(--surface-2); border-radius:14px; color:var(--muted); font-size:14px; }
.chart { max-width:100%; min-width:0; }
.ring { width:min(130px,38vw); aspect-ratio:1; border-radius:50%; display:grid; place-items:center; position:relative; }
.legend { display:grid; gap:5px; font-size:13px; }
.tabs { margin:12px 0; }
.tabs button { min-height:42px; font-size:14px; }
.tabs button.active,.tabs button[aria-selected="true"] { background:var(--tint); color:var(--accent); border-color:var(--accent); }
.bottom {
  position:fixed; bottom:calc(14px + env(safe-area-inset-bottom)); left:50%; transform:translateX(-50%); z-index:5;
  display:flex; align-items:stretch; justify-content:center; gap:3px; width:max-content; max-width:calc(100% - 24px);
  padding:5px; background:var(--nav); border:1px solid var(--line); border-radius:20px; box-shadow:0 6px 28px #0b291b26; backdrop-filter:blur(12px);
}
.bottom button { flex:1; gap:6px; min-width:0; background:none; border-color:transparent; color:var(--muted); border-radius:15px; font-size:13px; font-weight:650; }
.bottom button.active,.bottom button[aria-current="page"] { background:var(--tint); color:var(--accent); }
dialog { width:min(560px,calc(100vw - 30px)); max-width:100%; max-height:calc(100dvh - 44px); overflow:auto; overscroll-behavior:contain;
  padding:clamp(19px,4vw,30px); border:1px solid var(--line); border-radius:24px; color:var(--ink); background:var(--surface); box-shadow:0 18px 70px #0a211d4a; }
dialog::backdrop { background:#10282280; backdrop-filter:blur(4px); }
dialog h2 { margin:0 0 14px; }
dialog .actions { justify-content:flex-end; margin-top:19px; }
.fields { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:13px; }
label { display:block; color:var(--ink); font-size:14px; font-weight:600; }
label.wide,.fields>.wide { grid-column:1/-1; }
input,select,textarea {
  width:100%; display:block; min-width:0; min-height:46px; margin-top:5px; padding:10px 11px;
  border:1px solid var(--line); background:var(--surface-2); border-radius:11px; font-size:16px; line-height:1.25; font-weight:450;
}
input[type="checkbox"],input[type="radio"] { display:inline-block; width:20px; height:20px; min-height:0; padding:0; vertical-align:middle; accent-color:var(--accent); }
input[type="date"] { -webkit-appearance:none; }
input[type="file"] { padding:8px; }
textarea { min-height:80px; resize:vertical; }
.error { margin:10px 0; border-radius:10px; padding:10px 13px; color:var(--danger); background:var(--danger-bg); }
.error:empty { display:none; }
#toast { position:fixed; z-index:12; left:50%; bottom:calc(90px + env(safe-area-inset-bottom)); transform:translateX(-50%); max-width:min(460px,90vw); width:max-content; padding:11px 17px; border-radius:13px; background:var(--ink); color:var(--surface); box-shadow:var(--shadow); }
#toast:empty { display:none; }
@media(max-width:760px) {
  .grid { gap:12px; }
  .grid>.span5,.grid>.span6,.grid>.span7 { grid-column:1/-1; }
  .accounts { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .pagehead { margin:24px 0 18px; }
  .bottom { bottom:0; border-radius:19px 19px 0 0; border-bottom:0; padding:5px max(5px,env(safe-area-inset-right)) max(5px,env(safe-area-inset-bottom)) max(5px,env(safe-area-inset-left)); width:100%; max-width:none; }
  .bottom button { flex-direction:column; gap:3px; min-height:53px; border-radius:14px; padding:4px 2px; font-size:11px; }
  .mast { padding-left:max(16px,env(safe-area-inset-left)); padding-right:max(16px,env(safe-area-inset-right)); }
  main { padding-left:max(14px,env(safe-area-inset-left)); padding-right:max(14px,env(safe-area-inset-right)); }
  .card,.hero { border-radius:19px; }
}
@media(max-width:430px) {
  .mast .brand { font-size:19px; gap:7px; }
  .brand img { width:34px; height:34px; border-radius:10px; }
  .tools { gap:5px; }
  .tools button { padding:8px; font-size:13px; }
  .account { padding:12px; }
  .row .actions { gap:4px; }
  .actions button { padding:9px 11px; }
  .row:has(>.actions) { flex-wrap:wrap; }
  dialog { width:100vw; border-radius:23px 23px 0 0; margin:auto 0 0; max-height:calc(100dvh - max(18px,env(safe-area-inset-top))); padding-bottom:max(20px,env(safe-area-inset-bottom)); }
}
@media(max-width:360px) {
  .fields { grid-template-columns:1fr; }
  .card,.hero { padding:16px; }
  .bottom button { font-size:10px; }
}
@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after { scroll-behavior:auto !important; animation:none !important; transition:none !important; }
}
#toast:not(.show){display:none}.analysis{margin-top:18px}.dialoghead,.weeknav,.hist{display:flex;align-items:center;justify-content:space-between;gap:12px}.dialoghead{margin-bottom:18px}.dialoghead h2{margin:0}.close,.circle{width:44px;padding:0;font-size:24px}.weeknav{justify-content:flex-start;margin-bottom:15px}.account span{display:block}.accounticon{color:var(--accent);margin-bottom:7px}.accountwrap h2{margin:12px 0}.accountwrap .accounts{grid-template-columns:repeat(2,minmax(0,1fr))}.account{background:var(--surface)}.hero{min-height:220px;display:flex;flex-direction:column;justify-content:center}.herofoot{margin-top:26px;font-size:12px;letter-spacing:.025em;color:#e2e9dc}.live-dot,.dot{display:inline-block;height:8px;width:8px;border-radius:50%;background:#e5c388;margin-right:6px}.hero .big{z-index:1}.hero p{color:#dee8df}.row>div:last-child{text-align:right}.textbtn{border:0;background:transparent;color:var(--accent);min-height:44px;padding:5px 0;font-size:13px}.hist{margin:12px 0}.hist>div{flex:1}.hist .bar{margin:4px 0;height:6px}.hist .bar:nth-child(2)>i{background:#b19460}.hist small{text-align:right}.ring{margin:14px auto}.ring span{display:grid;place-items:center;background:var(--surface);border-radius:50%;width:76%;height:76%;font-weight:650}.note+.note,dialog p+.fields,dialog p+form,.card>p+.actions{margin-top:12px}.compass-art{position:absolute;pointer-events:none;right:-44px;bottom:-58px;width:240px;height:240px;border:1px solid #ffffff32;border-radius:50%;opacity:.7;z-index:-1;transform:rotate(28deg)}.compass-art:before,.compass-art:after{content:'';position:absolute;inset:12px;border-radius:50%;border:1px dashed #ffffff55}.compass-art:after{inset:36px;border-style:solid}.compass-art i,.compass-art b{position:absolute;left:44%;width:12%;height:42%;top:8%;background:#d9c08f7a;clip-path:polygon(50% 0,100% 100%,0 100%)}.compass-art b{top:50%;background:#e3f3e63d;transform:rotate(180deg)}
@media(min-width:761px){.hero{align-self:start;min-height:270px}.grid:has(.hero){grid-template-rows:auto auto}.grid:has(.hero)>.hero{grid-row:span 1}.hero+.card{grid-row:span 2}.accountwrap{align-self:start}.accountwrap+.card{grid-column:span 5}.grid:has(.hero) .span7:has(+.span5:last-child){grid-column:span 7}}
@media(max-width:760px){.hero{min-height:200px}.pagehead .sub{font-size:14px}.accountwrap{order:0}.herofoot{margin-top:18px}.compass-art{width:200px;height:200px;right:-55px}}
.trend{width:100%;height:72px;color:var(--accent);border-bottom:1px solid var(--line);margin-bottom:8px}.sr{position:absolute;width:1px;height:1px;clip-path:inset(50%);overflow:hidden;white-space:nowrap}.dialoghead+details{margin-bottom:16px}summary{cursor:pointer;color:var(--accent);padding:10px 0}
@media(max-width:430px){.pagehead:has(.primary){display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:8px}.pagehead:has(.primary) .eyebrow{letter-spacing:.04em;font-size:10px}.pagehead .primary{padding:8px 11px}.hero{min-height:185px}.weeknav{gap:9px}.herofoot{max-width:78%}}