/* Finanzplaner — App-eigene Styles auf der Notioneers UI-Basis (/public/notioneers-ui.css).
   Regeln: Komponenten (btn, input, select, ui-section, data-table, page-tabs, nav-item …) kommen aus der
   Basis. Hier stehen nur Layout, die Tabellen-Editoren und die Bausteine, die es in der Basis nicht gibt.
   Farben/Grössen ausschliesslich über Tokens (--color-*, --text-*). */

/* ---------- Grundlagen ---------- */
body { font-family: var(--font-sans); font-weight: 400; font-size: var(--text-body); color: var(--color-depth); background: var(--color-halo); }
.pl-shell { min-height: 100vh; }
.pl-main { background: var(--color-halo); }
.pl-group[hidden] { display: none; }

/* Monogramm (App-Kürzel) in Sidebar, Mobile-Kopf und Login */
.pl-monogram {
  width: 36px; height: 36px; border-radius: 10px; flex: none;
  background: var(--color-depth); color: var(--color-bloom);
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 600; font-size: var(--text-body); letter-spacing: 0.02em;
}
.pl-monogram-sm { width: 28px; height: 28px; border-radius: 8px; font-size: var(--text-meta); }
.pl-mobile-status { margin-left: auto; font-size: var(--text-meta); color: var(--color-stone); }
.hub-sidebar .nav-item { text-decoration: none; }
.hub-sidebar .hub-logo-link { text-decoration: none; }

/* Leiste oben: Jahre links, Status und Werkzeuge rechts */
.pl-topbar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  background: var(--color-white); border-bottom: 1px solid var(--color-veil); padding: 10px 32px;
}
.pl-topbar-right { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.pl-topbar .year-bar { margin: 0; }
.ed-status { font-size: var(--text-meta); color: var(--color-stone); min-width: 0; text-align: right; transition: color 0.2s ease; white-space: nowrap; }
.ed-status.saved { color: var(--color-success-check); }
.load-status { font-size: var(--text-meta); color: var(--color-stone); }

/* Seitenkopf pro Bereich: Titel, Untertitel, Aktionen, Page-Tabs */
.pl-ph { background: var(--color-white); padding: 18px 32px 0; }
.pl-ph-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-bottom: 14px; }
.pl-ph h1 { font-size: var(--text-page); letter-spacing: -0.015em; font-weight: 400; line-height: 1.2; margin: 0; }
.pl-ph p { margin: 4px 0 0; color: var(--color-stone); font-size: var(--text-body); }
.pl-ph-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pl-ph .page-tabs { border-bottom: 0; }
.page-tab { position: relative; background: none; border: 0; padding: 0 0 12px; cursor: pointer; font-family: inherit; }
.pl-body { padding: 22px 32px 56px; display: flex; flex-direction: column; gap: 18px; max-width: 1480px; }
.pl-body > div[id^="panel-"] { display: flex; flex-direction: column; gap: 18px; }
.pl-body > div[id^="panel-"][hidden] { display: none; }
body.wide .pl-body { max-width: none; }

/* Sektionen: Kopf aus der Basis, dazu Körper und Fuss */
.ui-section-head .total { font-weight: 600; font-variant-numeric: tabular-nums; font-size: var(--text-body); }
.ui-section-head .total.neg { color: var(--color-coral-label); }
.ui-section-head .total-span { font-weight: 400; font-size: var(--text-meta); color: var(--color-stone); margin-right: 6px; }
.ui-section-title .sw { margin-right: 8px; vertical-align: middle; }
.pl-sec-body { padding: 16px 20px; display: flex; flex-direction: column; gap: 8px; }
p.pl-sec-body { padding-bottom: 0; }
.pl-sec-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding: 12px 20px; border-top: 1px solid var(--color-halo); font-size: var(--text-meta); color: var(--color-stone);
}
.pl-sec-foot .note, .note { font-size: var(--text-meta); color: var(--color-stone); }
.pl-saved { display: inline-flex; align-items: center; gap: 6px; font-size: var(--text-meta); color: var(--color-stone); }
.pl-saved::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--color-veil); }
.pl-saved.on::before { background: var(--color-success-dot); }
.pl-saved.dirty { color: var(--color-solea-label); }
.pl-saved.dirty::before { background: var(--color-warning-dot, #E0A800); }
.pl-saved:empty { display: none; }
.ed-hint { font-size: var(--text-meta); color: var(--color-stone); margin: 0 2px; }
.bk-empty { font-size: var(--text-body); color: var(--color-stone); margin: 0; padding: 14px 20px; }
/* Leerzustand einer Liste: eigene Karte, zentriert */
.pl-list > .bk-empty {
  background: var(--color-white); border: 1px dashed var(--color-sage); border-radius: 14px; padding: 28px 20px; text-align: center;
}
.pl-fields { gap: 14px; }
.pl-form { display: grid; gap: 10px; }
.pl-check { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; }
.pl-check input { width: 16px; height: 16px; margin-top: 2px; accent-color: var(--color-depth); flex: none; }
.pl-check b { font-weight: 500; }
.pl-check small { display: block; color: var(--color-stone); font-size: var(--text-meta); }
.pl-set-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; }

/* Verwaltung (Planer-Liste) */
.pl-admin { max-width: 880px; margin: 0 auto; padding: 28px 20px 60px; }
.pl-admin-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 22px; }
.pl-admin-head h1 { font-size: var(--text-page); font-weight: 400; margin: 0; letter-spacing: -0.015em; }
.pl-admin .pl-login { margin-top: 6vh; }
.pl-list { display: grid; gap: 10px; }
.pl-row { display: flex; align-items: center; gap: 14px; padding: 12px 16px; }
.pl-row.archived { opacity: 0.6; }
.pl-row-title { font-size: var(--text-lead); font-weight: 500; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pl-row-meta { font-size: var(--text-meta); color: var(--color-stone); margin-top: 2px; }
.pl-row-actions { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.pl-toast {
  position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%); z-index: 30; pointer-events: none;
  background: var(--color-depth); color: var(--color-halo); font-size: var(--text-body); border-radius: 999px; padding: 9px 16px;
  animation: pop-in 0.2s ease;
}
@media (max-width: 640px) { .pl-row { flex-wrap: wrap; } .pl-row-actions { width: 100%; justify-content: flex-start; } }

/* Login */
.pl-login { max-width: 400px; margin: 12vh auto 0; padding: 0 16px; }
.pl-login-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.pl-login h1 { font-size: var(--text-title); font-weight: 500; margin: 2px 0 0; }
.text-caps-label { font-size: var(--text-caps); letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-stone); font-weight: 500; }
.pl-login p { margin: 0 0 14px; }

/* Dialog (Excel-Import) */
dialog.pl-dialog {
  border: 1px solid var(--color-veil); border-radius: 14px; padding: 20px 22px;
  width: min(520px, 92vw); background: var(--color-white); color: var(--color-depth); font-family: var(--font-sans);
}
dialog.pl-dialog::backdrop { background: rgba(0, 52, 13, 0.25); backdrop-filter: blur(2px); }
dialog.pl-dialog h3 { margin: 0 0 12px; }
dialog.pl-dialog .textarea { font-family: var(--font-mono); font-size: var(--text-meta); white-space: pre; min-height: 160px; }
.pl-dialog-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 4px; }

/* ---------- Plan-Grid (Zeilen × Monate) ---------- */
.ed-scroll { overflow-x: auto; }
table.ed-grid { border-collapse: collapse; width: 100%; min-width: 1060px; }
.ed-grid th {
  font-size: var(--text-caps); font-weight: 500; color: var(--color-stone); text-align: right;
  text-transform: uppercase; letter-spacing: 0.06em; padding: 10px 6px 8px; white-space: nowrap;
}
.ed-grid th.l { text-align: left; }
.ed-grid td { padding: 1px; }
.ed-grid input {
  width: 100%; border: 1px solid transparent; border-radius: 7px; background: transparent;
  font: 400 var(--text-body) var(--font-sans); color: var(--color-depth);
  height: 32px; padding: 0 8px; transition: background 0.12s ease, border-color 0.12s ease;
}
.ed-grid input:hover { background: var(--color-halo); }
.ed-grid input:focus { outline: none; border-color: var(--color-depth); background: var(--color-white); }
.ed-grid input.num { text-align: right; font-variant-numeric: tabular-nums; width: 74px; }
.ed-grid input.name { min-width: 170px; font-weight: 400; }
.ed-grid input.num.sel { background: var(--color-accent-faint); border-color: var(--color-ease); }
.ed-grid tbody tr:hover { background: rgba(0, 52, 13, 0.025); }
.ed-grid tbody td { border-bottom: 1px solid var(--color-halo); }
.ed-grid td.mcell, .ed-grid td.catcell, .ed-grid th:not(.l), .ed-grid th.cath { border-left: 1px solid var(--color-halo); }
.ed-grid td.ysplit, .ed-grid th.ysplit { border-left: 1.5px dashed var(--color-sage); }
.ed-grid th.tcol { font-weight: 600; color: var(--color-depth); }
.ed-grid td.rowtotal { text-align: right; font-size: var(--text-body); font-weight: 600; font-variant-numeric: tabular-nums; padding: 0 10px; white-space: nowrap; }
.ed-grid tfoot td {
  text-align: right; font-size: var(--text-body); font-weight: 600; color: var(--color-depth);
  font-variant-numeric: tabular-nums; padding: 8px 5px 10px; border-top: 1px solid var(--color-veil); white-space: nowrap;
}
.ed-grid tfoot td.l { text-align: left; font-weight: 400; color: var(--color-stone); padding-left: 12px; }
.ed-grid tfoot td.ftot { font-weight: 600; }
.fpill { display: inline-block; padding: 1px 8px 2px; border-radius: 6px; font-variant-numeric: tabular-nums; }
.fpill.in { background: var(--color-accent-faint); color: var(--color-depth); }
.fpill.out { background: var(--color-coral-light); color: var(--color-coral-label); }
.rowtools { white-space: nowrap; width: 34px; }
/* Löschen-Knopf: Basis-Icon-Button, in Tabellen erst beim Hover sichtbar */
.ed-grid tr:hover .ed-del, .ed-del:focus { opacity: 1; }
.ed-del:hover { background: var(--color-coral-light); color: var(--color-coral-label); }

/* Drag & Drop */
.ed-grid td.dragcell, .ed-grid th.dragcell { width: 22px; padding: 0; }
.drag-handle {
  display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 26px; border-radius: 6px;
  color: var(--color-sage); font-size: 12px; letter-spacing: -2px; user-select: none; cursor: grab; opacity: 0;
  transition: opacity 0.12s ease, background 0.12s ease, color 0.12s ease;
}
.ed-grid tr:hover .drag-handle { opacity: 1; }
.drag-handle:hover { background: var(--color-halo); color: var(--color-stone); }
.drag-handle:active { cursor: grabbing; }
tr.dragging { opacity: 0.45; }
tr.drop-above td { box-shadow: inset 0 2px 0 0 var(--color-pulse); }
tr.drop-below td { box-shadow: inset 0 -2px 0 0 var(--color-pulse); }

/* Erste Spalten (Griff + Name) bleiben beim horizontalen Scrollen stehen */
.ed-grid th.dragcell, .ed-grid td.dragcell,
.ed-grid th:nth-child(2), .ed-grid td:nth-child(2),
.ed-grid tr.ed-group td:first-child, .ed-grid tr.ed-gsum td.l, .ed-grid tfoot td.l { position: sticky; z-index: 2; background: var(--color-white); }
.ed-grid th.dragcell, .ed-grid td.dragcell, .ed-grid tr.ed-group td:first-child, .ed-grid tr.ed-gsum td.l, .ed-grid tfoot td.l { left: 0; }
.ed-grid th:nth-child(2), .ed-grid td:nth-child(2) { left: 22px; }
.ed-grid tr.ed-group td:nth-child(2), .ed-grid tr.ed-gsum td:nth-child(2), .ed-grid tfoot td:nth-child(2) { position: static; }
.ed-grid th:nth-child(2), .ed-grid td:nth-child(2), .ed-grid tr.ed-group td:first-child, .ed-grid tr.ed-gsum td.l, .ed-grid tfoot td.l { box-shadow: inset -1px 0 0 var(--color-veil); }
.ed-grid tbody tr:hover td.dragcell, .ed-grid tbody tr:hover td:nth-child(2) { background: #F9FAF9; }

/* Gruppierte Ansicht: Tag oben, Summe unten */
.ed-grid tr.ed-group td { padding: 14px 6px 5px; border-bottom: none; }
.ed-grid tr.ed-group td:first-child { padding-left: 30px; }
.grp-name { font-size: var(--text-meta); color: var(--color-root); white-space: nowrap; padding-left: 8px; }
.ed-grid td.gtot { text-align: right; font-size: var(--text-meta); color: var(--color-stone); font-variant-numeric: tabular-nums; padding: 6px 9px; white-space: nowrap; }
.ed-grid td.gtot.strong { font-weight: 600; color: var(--color-depth); }
.ed-grid tr.ed-gsum td { border-top: 1px solid var(--color-veil); border-bottom: 1px solid var(--color-halo); }
.ed-grid tr.ed-gsum td.l { font-size: var(--text-meta); color: var(--color-stone); padding: 6px 6px 6px 30px; white-space: nowrap; }
.ed-grid tr.ed-gsum:hover td.l { background: var(--color-white); }

/* Kategorie: Tag-Knopf + Dropdown (Notion-artig) — in Plan, Buchungen und Produkt-Typ gleich */
.cat-btn {
  border: none; background: transparent; height: 32px; padding: 0 8px; cursor: pointer; text-align: left; width: 100%;
  min-width: 120px; border-radius: 7px; font-family: var(--font-sans); transition: background 0.12s ease;
  display: inline-flex; align-items: center;
}
.cat-btn:hover { background: var(--color-halo); }
.cat-tag { display: inline-block; padding: 1px 9px 2px; border-radius: 999px; font-size: var(--text-meta); white-space: nowrap; }
.cat-empty { color: var(--color-sage); font-size: var(--text-meta); }
.cat-menu {
  background: var(--color-white); border: 1px solid var(--color-veil); border-radius: 12px;
  box-shadow: var(--shadow-md, 0 10px 30px rgba(0, 52, 13, 0.14)); padding: 6px; display: grid; gap: 2px; font-family: var(--font-sans);
  animation: pop-in 0.15s cubic-bezier(0.22, 1, 0.36, 1);
}
.cat-search {
  width: 100%; height: 34px; border: none; border-bottom: 1px solid var(--color-halo); padding: 0 10px 4px; margin-bottom: 4px;
  background: transparent; font: 400 var(--text-body) var(--font-sans); color: var(--color-depth); outline: none;
}
.cat-opts { display: grid; gap: 2px; max-height: 240px; overflow-y: auto; }
.cat-opt {
  border: none; background: transparent; text-align: left; cursor: pointer; padding: 6px 8px; border-radius: 8px;
  font: 400 var(--text-body) var(--font-sans); color: var(--color-depth); transition: background 0.12s ease;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.cat-opt:hover { background: var(--color-halo); }
.cat-opt.new { color: var(--color-aeris-label); }
.cat-opt.none { color: var(--color-stone); }
.cat-opt.dimtext { color: var(--color-stone); cursor: default; }
.chk { color: var(--color-success-check); font-size: var(--text-meta); }
@keyframes pop-in { from { opacity: 0; transform: translateY(4px); } }

/* ---------- Kontostände ---------- */
.bal-row { display: grid; grid-template-columns: 160px 170px 1fr 32px; gap: 8px; align-items: center; }

/* ---------- Buchungen ---------- */
.bk-kpi { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.bk-kpi:empty { display: none; }
.bk-tile { background: var(--color-white); border: 1px solid var(--color-veil); border-radius: 14px; padding: 14px 18px; box-shadow: var(--shadow-sm); }
.bk-tile .kpi-label { display: block; margin-bottom: 6px; font-size: var(--text-caps); text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-stone); font-weight: 500; }
.bk-tile .bk-val { font-size: var(--text-display); font-weight: 400; font-variant-numeric: tabular-nums; color: var(--color-depth); }
.bk-tile .bk-val.neg { color: var(--color-coral-label); }
.bk-tile .bk-of { font-size: var(--text-meta); color: var(--color-stone); margin-left: 8px; font-variant-numeric: tabular-nums; }
/* Erfassung: Felder mit Beschriftung, Speichern im Fuss */
.bk-add { display: grid; grid-template-columns: 150px auto minmax(150px, 1fr) 130px 1.4fr auto; gap: 10px; align-items: end; padding: 18px 20px 0; }
.bk-add .bk-foot { grid-column: 1 / -1; margin: 14px -20px 0; }
.pl-f { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.pl-f > span { font-size: var(--text-meta); color: var(--color-stone); }
.bk-kind.view-switcher { height: 38px; box-sizing: border-box; }
.bk-kind .view-seg { height: 30px; padding: 0 12px; border-radius: 8px; display: inline-flex; align-items: center; gap: 6px; border: 0; background: transparent; cursor: pointer; font-family: inherit; }
.bk-catbtn { justify-content: flex-start; cursor: pointer; border: 1px solid var(--color-veil); background: var(--color-white); height: 38px; min-width: 0; padding: 0 12px; }
.bk-catbtn:hover { border-color: var(--color-sage); background: var(--color-white); }
.bk-amount { text-align: right; font-variant-numeric: tabular-nums; }
.bk-clipbtn { gap: 6px; }
.bk-clipbtn b { font-size: var(--text-caps); font-weight: 600; }
.bk-clipbtn.has { border-color: #92D6F3; background: #EAF6FB; color: var(--color-aeris-label); }
/* Liste */
.bk-list-head .view-switcher .view-seg { height: 30px; padding: 0 12px; border-radius: 8px; display: inline-flex; align-items: center; gap: 6px; border: 0; background: transparent; cursor: pointer; font-family: inherit; }
#bk-list { padding: 4px 20px 10px; }
.bk-month { display: flex; justify-content: space-between; align-items: baseline; font-size: var(--text-meta); color: var(--color-stone); padding: 14px 0 4px; border-bottom: 1px solid var(--color-halo); }
.bk-month b { font-weight: 400; font-variant-numeric: tabular-nums; }
.bk-month b .in { color: var(--color-success-check); }
.bk-month b .out { color: var(--color-coral-label); margin-left: 8px; }
.bk-row { display: grid; grid-template-columns: 26px 118px minmax(0, 1fr) 170px 130px 32px 26px; gap: 8px; align-items: center; padding: 3px 0; border-bottom: 1px solid var(--color-halo); position: relative; }
.bk-row .bk-in { height: 32px; border-color: transparent; background: transparent; font-size: var(--text-body); padding: 0 8px; }
.bk-row .bk-in:hover { background: var(--color-halo); }
.bk-row .bk-in:focus { border-color: var(--color-depth); background: var(--color-white); box-shadow: none; }
.bk-row input.amt { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.bk-row input.amt.in { color: var(--color-success-check); }
.bk-row input.amt.out { color: var(--color-coral-label); }
.bk-row .cat-btn { height: 32px; }
.bk-row .ed-del { opacity: 1; }
.bk-kindic {
  width: 24px; height: 24px; border-radius: 50%; border: none; padding: 0; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; transition: transform 0.12s ease, filter 0.12s ease;
}
.bk-kindic svg { width: 13px; height: 13px; }
.bk-kindic.in { background: var(--color-accent-faint); color: var(--color-success-check); }
.bk-kindic.out { background: var(--color-coral-light); color: var(--color-coral-label); }
.bk-kindic:hover { transform: scale(1.08); }
/* Icons im Umschalter: klein, inaktiv grau; aktiv farbig hinterlegt */
#bk-kind i.bk-kindic, #bk-filter i.bk-kindic { width: 14px; height: 14px; cursor: inherit; background: transparent; border-radius: 0; }
#bk-kind i.bk-kindic.in, #bk-filter i.bk-kindic.in { color: var(--color-success-check); }
#bk-kind i.bk-kindic.out, #bk-filter i.bk-kindic.out { color: var(--color-coral-label); }
#bk-kind button:not(.view-seg-active) i.bk-kindic, #bk-filter button:not(.view-seg-active) i.bk-kindic { color: var(--color-sage); }
#bk-kind button[data-kind="in"].view-seg-active, #bk-filter button[data-filter="in"].view-seg-active { background: var(--color-accent-faint); color: var(--color-depth); box-shadow: inset 0 0 0 1px var(--color-ease); }
#bk-kind button[data-kind="out"].view-seg-active, #bk-filter button[data-filter="out"].view-seg-active { background: var(--color-coral-light); color: var(--color-coral-label); box-shadow: inset 0 0 0 1px #F0B9B9; }
/* Belege: Klammer pro Buchung, Popover mit Dateien, Drag & Drop */
.bk-clip { gap: 3px; }
.bk-clip.has { color: var(--color-aeris-label); border-color: #92D6F3; background: #EAF6FB; }
.bk-clip b { font-size: var(--text-caps); font-weight: 600; }
.bk-row.drop, .bk-add.drop { outline: 2px dashed #92D6F3; outline-offset: -2px; background: #EAF6FB; border-radius: 8px; }
.bk-pop {
  position: fixed; z-index: 40; width: 340px; max-width: calc(100vw - 24px);
  background: var(--color-white); border: 1px solid var(--color-veil); border-radius: 14px; padding: 8px 12px;
  box-shadow: var(--shadow-md, 0 12px 32px rgba(0, 52, 13, 0.12)); font-size: var(--text-body); animation: pop-in 0.14s ease;
}
.bk-file { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 7px 0; border-bottom: 1px solid var(--color-halo); }
.bk-file:last-of-type { border-bottom: none; }
.bk-ext { font-size: 10px; font-weight: 600; letter-spacing: 0.03em; color: var(--color-aeris-label); background: #EAF6FB; border-radius: 6px; padding: 3px 0; text-align: center; }
.bk-file .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--color-depth); }
.bk-file small { display: block; font-size: var(--text-caps); color: var(--color-stone); }
.bk-file .acts { display: inline-flex; gap: 2px; }
.bk-file .acts a, .bk-file .acts button {
  display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 7px;
  border: none; background: transparent; color: var(--color-stone); cursor: pointer; text-decoration: none;
}
.bk-file .acts a:hover, .bk-file .acts button:hover { background: var(--color-halo); color: var(--color-depth); }
.bk-file .acts button.rm:hover { background: var(--color-coral-light); color: var(--color-coral-label); }
.bk-file .acts svg { width: 15px; height: 15px; }
.bk-pop-add {
  display: flex; align-items: center; gap: 6px; width: 100%; margin-top: 6px; padding: 8px 6px;
  border: 1px dashed var(--color-veil); border-radius: 9px; background: transparent; color: var(--color-stone);
  font: 400 var(--text-meta) var(--font-sans); cursor: pointer;
}
.bk-pop-add svg { width: 15px; height: 15px; }
.bk-pop-add:hover, .bk-pop.drop .bk-pop-add { border-color: #92D6F3; background: #EAF6FB; color: var(--color-aeris-label); }
.bk-pop-empty { padding: 8px 0 4px; color: var(--color-stone); font-size: var(--text-meta); }
.m-only { display: none; }

/* ---------- Tablet ---------- */
@media (max-width: 1099px) {
  .pl-topbar, .pl-ph { padding-left: 20px; padding-right: 20px; }
  .pl-body { padding: 18px 20px 48px; }
  .pl-set-grid { grid-template-columns: 1fr; }
  .bk-add { grid-template-columns: 1fr 1fr 1fr; }
}

/* ---------- Mobile: Buchungen = Hauptfall am Handy (Beleg fotografieren, Betrag tippen) ---------- */
@media (max-width: 767px) {
  .m-only { display: inline; }
  .d-only { display: none; }
  html, body { overflow-x: hidden; }
  .pl-main { overflow-x: clip; }
  .hub-sidebar .nav-item { gap: 12px; padding: 9px 11px; }
  .pl-topbar { padding: 8px 14px; gap: 8px; }
  .pl-topbar-right .icon-btn { width: 34px; height: 34px; }
  .pl-ph { padding: 14px 16px 0; }
  .pl-ph h1 { font-size: var(--text-title); }
  .pl-ph-row { padding-bottom: 10px; gap: 10px; }
  .pl-ph-actions .btn { height: 34px; padding: 0 12px; }
  .pl-ph .page-tabs { gap: 18px; }
  .page-tab { font-size: var(--text-body); padding-bottom: 10px; }
  .pl-body { padding: 14px 12px 60px; gap: 14px; }
  .pl-body > div[id^="panel-"] { gap: 12px; }
  .ui-section-head { padding: 14px 14px 12px; flex-wrap: wrap; }
  .ui-section-actions { width: 100%; justify-content: flex-start; margin-left: 0; flex-wrap: wrap; }
  .pl-sec-body, .pl-sec-foot { padding-left: 14px; padding-right: 14px; }
  .pl-sec-foot .btn { width: 100%; justify-content: center; }
  /* Reihenfolge: Erfassung, Liste, Kennzahlen zuletzt */
  #panel-book { display: flex; flex-direction: column; }
  #panel-book .bk-kpi { order: 3; }
  .bk-kpi { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .bk-tile { padding: 10px 10px 12px; border-radius: 12px; }
  .bk-tile .kpi-label { font-size: 10px; line-height: 1.3; margin-bottom: 4px; letter-spacing: 0.04em; }
  .bk-tile .bk-val { font-size: var(--text-lead); }
  .bk-tile .bk-of { display: block; margin: 2px 0 0; font-size: var(--text-caps); }
  /* Erfassung: Art gross, Betrag gross, dann Kategorie, Kommentar, Datum, Beleg, Speichern */
  .bk-add { grid-template-columns: 1fr; gap: 10px; padding: 14px 14px 0; grid-template-areas: "kind" "amount" "cat" "comment" "date" "clip" "foot"; }
  .bk-add > :nth-child(1) { grid-area: date; }
  .bk-add > :nth-child(2) { grid-area: kind; }
  .bk-add > :nth-child(3) { grid-area: cat; }
  .bk-add > :nth-child(4) { grid-area: amount; }
  .bk-add > :nth-child(5) { grid-area: comment; }
  .bk-add > :nth-child(6) { grid-area: clip; }
  .bk-add .bk-foot { grid-area: foot; margin: 6px -14px 0; }
  .bk-add .bk-foot .note { display: none; }
  .bk-kind.view-switcher { display: grid; grid-template-columns: 1fr 1fr; height: 46px; }
  .bk-kind .view-seg span, #bk-filter .view-seg span { display: inline !important; } /* Basis blendet Segment-Texte am Handy aus — hier sind sie Pflicht */
  .bk-kind .view-seg { height: 40px; font-size: var(--text-lead); justify-content: center; }
  .bk-add #bk-amount { height: 56px; font-size: 26px; font-weight: 600; text-align: center; }
  .bk-add .input, .bk-add .cat-btn, .bk-row .bk-in, .cat-search { font-size: 16px; } /* iOS zoomt bei <16px in Felder hinein */
  .bk-add .input, .bk-add .cat-btn, .bk-add .bk-clipbtn { height: 44px; }
  .bk-add .bk-clipbtn { width: 100%; }
  .bk-add .bk-plus { width: 100%; height: 46px; font-size: var(--text-lead); }
  .bk-hint { display: none; }
  #bk-list { padding: 4px 14px 10px; }
  /* Buchung in zwei Zeilen: Datum · Betrag · Beleg · × / Kommentar · Kategorie */
  .bk-row {
    grid-template-columns: 26px minmax(0, 1fr) auto 32px 26px; gap: 4px 6px; padding: 6px 0;
    grid-template-areas: "ic date amt clip del" "ic com com cat cat";
  }
  .bk-row > :nth-child(1) { grid-area: ic; align-self: start; margin-top: 6px; }
  .bk-row > :nth-child(2) { grid-area: date; }
  .bk-row > :nth-child(3) { grid-area: com; }
  .bk-row > :nth-child(4) { grid-area: cat; justify-self: end; }
  .bk-row > :nth-child(5) { grid-area: amt; width: 100px; }
  .bk-row > :nth-child(6) { grid-area: clip; }
  .bk-row > :nth-child(7) { grid-area: del; }
  .bk-row input[type="date"]::-webkit-calendar-picker-indicator { display: none; }
  .bk-row input[type="date"] { padding: 0 4px; }
  .bk-row .bk-in { height: 34px; }
  /* Belege und Kategorie-Menü als Bottom-Sheet bzw. volle Breite */
  .bk-pop { left: 12px !important; right: 12px; top: auto !important; bottom: 12px; width: auto; max-height: 70vh; overflow: auto; }
  .bk-file .acts a, .bk-file .acts button { width: 36px; height: 36px; }
  .cat-menu { left: 12px !important; right: 12px; min-width: 0 !important; max-height: 55vh; overflow: auto; }
  /* Speicher-Status als kleiner Toast unten */
  .ed-status:not(:empty) {
    position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%); z-index: 60;
    background: var(--color-depth); color: var(--color-white); padding: 8px 14px; border-radius: 999px; font-size: var(--text-body); white-space: nowrap;
  }
  .bal-row { grid-template-columns: 1fr 1fr 32px; }
  .bal-row [data-f="comment"] { grid-column: 1 / 3; }
  /* iOS: Datumsfelder haben eine feste Eigenbreite — nie breiter als die Spalte */
  input[type="date"].input, .bk-row input[type="date"] { min-width: 0; width: 100%; -webkit-appearance: none; appearance: none; }
  dialog.pl-dialog { width: calc(100vw - 24px); }
}