/* ---------- App-Hülle: Header, Bottom-Nav, View-Container ---------- */
/* Struktur/Look 1:1 aus der Desktop-App (header.app/.mark/.brand/.modtag/h1/.spruch). */
#appHeader{
  display:flex; align-items:center; gap:12px;
  padding:calc(12px + var(--safe-t)) 16px 12px; background:var(--white);
  border-bottom:2px solid var(--navy); flex:none;
}
#appHeader .mark{
  width:40px; height:40px; flex:none; border-radius:12px; background:#fff;
  border:1.5px solid var(--line); display:grid; place-items:center;
  box-shadow:0 1px 3px rgba(15,23,38,.12);
}
#appHeader .mark svg{ width:64%; height:64%; display:block; }
#appHeader .brand{ line-height:1.15; min-width:0; }
#appHeader .modtag{
  font-size:10.5px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--hdr-accent, var(--ink-soft)); font-weight:700;
}
#appHeader h1{ font-family:Georgia,serif; font-size:20px; margin:0; color:var(--navy-deep); letter-spacing:-.01em; font-weight:600; }
#appHeader h1 .a{ color:var(--plus); }
#appHeader .spruch{ margin:1px 0 0; font-size:11.5px; color:var(--ink-soft); font-style:italic; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

#installBar{ display:none; align-items:center; gap:10px; background:#FBF1DE; border-bottom:1px solid #E8D5A8; padding:10px 18px; font-size:13px; color:#8A5A13; flex:none; }
#installBar button{ margin-left:auto; font:inherit; font-weight:700; background:var(--navy); color:#fff; border:0; border-radius:8px; padding:8px 14px; }

main#view{ flex:1; overflow-y:auto; padding:12px 14px calc(90px + var(--safe-b)); -webkit-overflow-scrolling:touch; }

#bottomNav{
  position:fixed; left:0; right:0; bottom:0; z-index:60;
  display:flex; background:var(--white); border-top:1px solid var(--line);
  padding-bottom:var(--safe-b);
}
#bottomNav button{
  flex:1; min-width:0; border:0; background:none; padding:8px 2px 7px; display:flex; flex-direction:column;
  align-items:center; gap:3px; color:var(--ink-soft); font-size:9px; font-weight:600; line-height:1.15;
}
#bottomNav button .ic{ font-size:18px; line-height:1; }
#bottomNav button span:last-child{ max-width:100%; }
#bottomNav button.on{ color:var(--nav-accent, var(--navy-deep)); }
#bottomNav button.on .ic{ color:var(--nav-accent, var(--plus)); }

/* ---------- FAB ---------- */
#fab{ position:fixed; right:20px; bottom:calc(90px + var(--safe-b)); width:58px; height:58px; border-radius:50%; background:var(--navy); color:#fff; border:0; font-size:29px; line-height:1; box-shadow:0 8px 24px rgba(15,23,38,.35); display:none; place-items:center; z-index:55; }
#fab.show{ display:grid; }
#fab:active{ background:var(--navy-deep); }

/* ---------- Sheet / Modal ---------- */
.sheet-overlay{ position:fixed; inset:0; background:rgba(15,23,38,.45); display:none; z-index:100; }
.sheet-overlay.on{ display:block; }
.sheet{ position:fixed; left:0; right:0; bottom:0; background:var(--white); border-radius:20px 20px 0 0; padding:16px 18px calc(18px + var(--safe-b)); max-height:88vh; overflow-y:auto; transform:translateY(100%); transition:transform .22s ease; z-index:101; }
.sheet.on{ transform:translateY(0); }
.sheet h2{ font-family:Georgia,serif; font-size:19px; margin:2px 0 16px; color:var(--navy-deep); }
.closeSheet{ position:absolute; top:14px; right:16px; border:0; background:none; font-size:20px; color:var(--ink-soft); padding:6px; }

/* ---------- Segmented Umschalter (Einnahme/Ausgabe, Filter u.ä.) ---------- */
.seg{ display:flex; background:var(--paper); border-radius:12px; padding:4px; margin-bottom:16px; }
.seg button{ flex:1; font:inherit; font-size:14px; font-weight:700; padding:11px 0; border:0; border-radius:9px; background:transparent; color:var(--ink-soft); }
.seg button.on{ background:var(--white); color:var(--navy-deep); box-shadow:0 1px 4px rgba(15,23,38,.15); }
.seg button.on.ausgabe{ color:var(--neg); }
.seg button.on.einnahme{ color:var(--pos); }

/* ---------- Betrags-Numpad ---------- */
.amt-display{ text-align:center; font-size:38px; font-weight:700; font-variant-numeric:tabular-nums; padding:10px 0 16px; color:var(--ink); }
.numpad{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-bottom:18px; }
.numpad button{ font:inherit; font-size:20px; font-weight:600; padding:16px 0; border:1px solid var(--line); border-radius:12px; background:var(--paper); color:var(--ink); }
.numpad button:active{ background:var(--line); }
.numpad button.wide{ font-size:15px; color:var(--ink-soft); }