:root{
  --bg:#c2dfcc;
  --card: rgba(18,70,40,.18);
  --line: rgba(12,50,28,.40);
  --text:#0e2a18;
  --muted: rgba(14,42,24,.70);
  --pos:#1f7a3f;
  --neg:#b00020;
  --shadow: 0 10px 30px rgba(0,40,20,.12);
  --radius: 16px;
  --input-bg: rgba(232, 255, 240, .95);
  --input-bg-ro: rgba(232, 255, 240, .70);
  --input-border: rgba(40, 120, 75, .40);
  --btn-bg: rgba(255,255,255,.78);
  --btn-primary: rgba(40, 140, 85, .16);
  --btn-danger: rgba(176,0,32,.12);
  --btn-soft: rgba(40, 140, 85, .18);
  --btn-soft-border: rgba(31,122,63,.28);
  --table-bg: rgba(255,255,255,.70);
  --thead-bg: rgba(235,255,244,.88);
  --headerGreen: rgba(31,122,63,.90);
  --hilite: rgba(31,122,63,.24);      /* geändert: von .14 auf .24 */
  --hiliteLine: rgba(31,122,63,.26);
  --dangerText: #b00020;
  --dangerBg: rgba(176,0,32,.14);
  --dangerBorder: rgba(176,0,32,.32);
  --pagePad: 14px;
  --bannerInnerPad: 8px;
}
*{ box-sizing:border-box; }
body{
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  background:var(--bg);
  color:var(--text);
  padding-bottom: 92px;
}
.login-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(8px);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}
.login-card {
  background: rgba(207,230,214,0.95);
  backdrop-filter: blur(16px);
  border: 1px solid var(--line);
  border-radius: 28px;
  box-shadow: 0 20px 35px rgba(0,0,0,0.2);
  width: min(90%, 420px);
  padding: 24px 20px 28px;
  text-align: center;
}
.login-card h2 {
  margin-top: 0;
  margin-bottom: 16px;
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--text);
}
.login-card .input-group {
  margin-bottom: 20px;
  text-align: left;
}
.login-card label {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--muted);
  display: block;
  margin-bottom: 6px;
}
.login-card input {
  width: 100%;
  padding: 12px;
  border-radius: 16px;
  border: 1px solid var(--input-border);
  background: var(--input-bg);
  font-size: 1rem;
}
.login-card .btn-row {
  display: flex;
  gap: 12px;
  justify-content: center;
  margin-top: 8px;
}
.login-card .btn {
  border: none;
  background: var(--btn-primary);
  border-radius: 40px;
  padding: 12px 18px;
  font-weight: bold;
  cursor: pointer;
  transition: 0.1s;
}
.login-card .btn.primary {
  background: var(--headerGreen);
  color: white;
}
.login-card .btn.danger {
  background: var(--dangerBg);
  color: var(--dangerText);
  border: 1px solid var(--dangerBorder);
}
.login-card .error {
  color: var(--neg);
  font-size: 0.8rem;
  margin-top: 8px;
}
.login-card .hint {
  font-size: 0.7rem;
  margin-top: 12px;
  color: var(--muted);
}
hr {
  margin: 20px 0;
  border: 0;
  border-top: 1px solid var(--line);
}
header{
  position:sticky;
  top:0;
  z-index:10;
  padding:14px 14px 10px 14px;
  background:linear-gradient(to bottom, rgba(207,230,214,.96), rgba(207,230,214,.78));
  backdrop-filter:blur(6px);
  border-bottom:1px solid var(--line);
}
h1{ margin:0 0 10px; font-size:18px; }
.row{ display:flex; gap:10px; flex-wrap:wrap; align-items:end; }
.row>*{ flex:1 1 160px; }
label{ font-size:12px; color:var(--muted); display:block; margin-bottom:6px; }
input, button, textarea, select{ font-family:inherit; }
input, select{
  width:100%; padding:12px;
  border-radius:12px; border:1px solid var(--input-border);
  background:var(--input-bg);
  font-size:16px;
  color:var(--text);
}
textarea{
  width:100%;
  min-height:130px;
  resize:vertical;
  padding:12px;
  border-radius:12px;
  border:1px solid var(--input-border);
  background:var(--input-bg);
  font-size:15px;
  line-height:1.35;
  color:var(--text);
}
input[readonly]{ background:var(--input-bg-ro); }
input[type="date"], input[type="month"]{ padding:10px 12px; }
.card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:12px;
}
.btn{
  border:1px solid var(--line);
  background:var(--btn-bg);
  border-radius:12px;
  padding:10px 12px;
  font-weight:900;
  cursor:pointer;
  user-select:none;
  touch-action:manipulation;
  white-space:nowrap;
  color:var(--text);
}
.btn:active{ transform:translateY(1px); }
.btn.primary{ background:var(--btn-primary); }
.btn.danger{ background:var(--btn-danger); border-color:rgba(176,0,32,.28); }
.btn.soft{
  background:var(--btn-soft);
  border-color:var(--btn-soft-border);
}
main{ padding:12px 14px 28px; display:grid; gap:12px; }
details summary{ cursor:pointer; font-weight:900; user-select:none; }
details .hint{ margin-top:8px; font-size:12px; color:var(--muted); }
.twoCols{ display:grid; gap:12px; grid-template-columns:1fr; }
@media(min-width:980px){ .twoCols{ grid-template-columns:1fr 1fr; } }
.blockTitle{
  display:flex; justify-content:space-between; align-items:baseline; gap:10px;
  margin:0 0 10px;
}
.blockTitle h2{ margin:0; font-size:16px; }
.smallHint{ font-size:12px; color:var(--muted); }
.hiliteBlock{
  background: var(--hilite);
  border: 1px solid var(--hiliteLine);
  border-radius: 14px;
  padding: 10px;
}
.bannerFullBleed{
  display:block;
  overflow:visible;
  width: calc(100% + var(--pagePad) + var(--pagePad));
  margin-left: calc(-1 * var(--pagePad));
  margin-right: calc(-1 * var(--pagePad));
  margin-top: 10px;
  margin-bottom: 8px;
  padding-left: var(--bannerInnerPad);
  padding-right: var(--bannerInnerPad);
}
.bannerImg{
  width:100%;
  height:auto;
  display:block;
  border-radius:14px;
  border:1px solid rgba(12,50,28,.18);
  box-shadow: 0 8px 18px rgba(0,0,0,.08);
}
.tblWrap{
  overflow:auto;
  border:1px solid var(--line);
  border-radius:14px;
  background:var(--table-bg);
}
table{
  width:100%;
  border-collapse:collapse;
  min-width:560px;
}
thead th{
  position:sticky; top:0; z-index:1;
  text-align:left;
  font-size:12px;
  color:var(--muted);
  background:var(--thead-bg);
  border-bottom:1px solid var(--line);
  padding:10px;
}
tbody td{
  border-bottom:1px solid var(--line);
  padding:8px 10px;
  vertical-align:top;
}
tbody tr:last-child td{ border-bottom:none; }
.amtWrap{
  display:flex;
  gap:8px;
  align-items:stretch;
}
.amtBtns{
  display:flex;
  gap:8px;
  flex:0 0 auto;
}
.miniBtn{
  width:46px;
  border-radius:12px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.70);
  font-weight:950;
  font-size:18px;
  cursor:pointer;
  user-select:none;
  touch-action:manipulation;
  color:var(--text);
}
.miniBtn:active{ transform:translateY(1px); }
.miniBtn.plus{ color:var(--pos); border-color:rgba(31,122,63,.30); background:rgba(31,122,63,.12); }
.miniBtn.minus{ color:var(--neg); border-color:rgba(176,0,32,.30); background:rgba(176,0,32,.10); }
.amtCell input{
  text-align:right;
  font-variant-numeric: tabular-nums;
  font-weight:900;
  min-width: 100px;
}
.amtPos input{ color:var(--pos); border-color:rgba(31,122,63,.35); }
.amtNeg input{ color:var(--neg); border-color:rgba(176,0,32,.35); }
.amtZero input{ color:var(--text); font-weight:800; }
.txtWrap{
  display:flex;
  gap:10px;
  align-items:center;
}
.txtWrap input{ flex:1 1 auto; }
.xBtn{
  flex:0 0 auto;
  width:40px;
  height:40px;
  border-radius:12px;
  border:1px solid var(--dangerBorder);
  background:var(--dangerBg);
  font-weight:950;
  font-size:18px;
  cursor:pointer;
  user-select:none;
  touch-action:manipulation;
  color:var(--dangerText);
}
.xBtn:active{ transform:translateY(1px); }
.sumRow{
  display:grid;
  gap:10px;
  grid-template-columns:1fr 1fr;
  margin-top:10px;
}
.sumBox{
  border:1px solid var(--line);
  border-radius:12px;
  padding:10px 12px;
  background:rgba(255,255,255,.72);
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:10px;
}
.sumBox .k{ font-size:12px; color:var(--muted); }
.sumBox .v{ font-size:18px; font-weight:950; font-variant-numeric:tabular-nums; }
.v.pos{ color:var(--pos); }
.v.neg{ color:var(--neg); }
dialog{
  width:min(980px, calc(100% - 20px));
  border:1px solid var(--line);
  border-radius:18px;
  padding:0;
  background:rgba(245,255,248,.94);
  box-shadow:var(--shadow);
}
dialog::backdrop{ background:rgba(0,0,0,.28); }
.dlgHead{
  padding:12px 14px;
  border-bottom:1px solid var(--line);
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  background:rgba(235,255,244,.88);
  border-top-left-radius:18px; border-top-right-radius:18px;
}
.dlgBody{ padding:14px; }
.calGrid{ display:grid; grid-template-columns:repeat(7,1fr); gap:8px; }
.dow{ font-size:12px; color:var(--muted); text-align:center; padding:6px 0; }
.dayCell{
  border:1px solid var(--line);
  border-radius:14px;
  padding:10px 8px;
  min-height:56px;
  background:rgba(255,255,255,.78);
  cursor:pointer;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:6px;
}
.dayCell.good{ background:rgba(31,122,63,.12); border-color:rgba(31,122,63,.22); }
.dayCell.bad{  background:rgba(176,0,32,.10); border-color:rgba(176,0,32,.22); }
.dayCell.empty{ opacity:.55; }
.dayNum{ font-weight:950; }
.dayVal{ font-variant-numeric:tabular-nums; font-weight:950; text-align:right; }
.dayVal.pos{ color:var(--pos); }
.dayVal.neg{ color:var(--neg); }
.notesHead{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:10px;
  margin-top:12px;
}
.notesHead h3{ margin:0; font-size:14px; }
.dayNav{
  position:fixed;
  left:0;
  right:0;
  bottom:10px;
  display:flex;
  justify-content:space-between;
  gap:12px;
  padding:0 12px;
  z-index:9999;
  pointer-events:none;
}
.dayBtn{
  pointer-events:auto;
  min-width:150px;
  padding:14px 14px;
  border:none;
  border-radius:16px;
  font-size:20px;
  font-weight:950;
  cursor:pointer;
  box-shadow:0 10px 20px rgba(0,0,0,.12);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  background:var(--headerGreen);
  color:#ffffff;
  user-select:none;
  touch-action:manipulation;
}
.dayBtn:active{ transform:translateY(1px); }
.dayBtn .arrow{ font-size:28px; line-height:1; }
.spTitle{
  font-weight:950;
  font-size:18px;
  margin:0;
}
.spAddCard{
  background:rgba(31,122,63,.08);
  border:1px solid rgba(31,122,63,.20);
  border-radius:14px;
  padding:12px;
  margin-bottom:14px;
}
.spList{
  display:grid;
  gap:10px;
}
.spItem{
  border:1px solid var(--line);
  border-radius:14px;
  background:rgba(255,255,255,.76);
  overflow:hidden;
}
.spItem details{
  padding:0;
}
.spItem summary{
  list-style:none;
  padding:12px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  background:rgba(31,122,63,.10);
}
.spItem summary::-webkit-details-marker{ display:none; }
.spSummaryLeft{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:4px;
}
.spPurpose{
  font-weight:900;
  font-size:15px;
  word-break:break-word;
}
.spAmount{
  font-weight:950;
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}
.spInner{
  padding:12px;
  border-top:1px solid var(--line);
}
.spMiniRow{
  display:grid;
  gap:10px;
  grid-template-columns:1fr;
  margin-top:10px;
}
@media(min-width:820px){
  .spMiniRow{ grid-template-columns:1fr 1fr 1fr 1fr; }
}
.spBox{
  border:1px solid var(--line);
  border-radius:12px;
  padding:10px 12px;
  background:rgba(255,255,255,.72);
}
.spBox .k{
  display:block;
  font-size:12px;
  color:var(--muted);
  margin-bottom:4px;
}
.spBox .v{
  font-weight:950;
  font-variant-numeric:tabular-nums;
}
.readonlyRow{
  opacity:.90;
}
@media print{
  body{ background:#fff; padding-bottom:0; }
  header, dialog, .dayNav, #openCalendar, #importBtn, #exportBtn, #pdfBtn, #resetMonth, #morePaymentsBtn, #savingsPlanBtn { display:none !important; }
  .bannerFullBleed{ display:none !important; }
  .card{ box-shadow:none; border:1px solid #bbb; background:#fff; }
  .tblWrap{ border:1px solid #bbb; background:#fff; }
  input, textarea, select{ border:1px solid #bbb !important; background:#fff !important; color:#111 !important; }
  .btn{ display:none !important; }
  main{ padding:0; }
}