/* Keepbox im Browser – gleiches System wie die Apps (Taxbox-Richtung A in Beere):
   Abstände 4/8/12/16/22/28, Karten mit Radius 28, Pillen, Systemschrift. */
:root {
  --akzent: #9A2F5E; --akzent-sanft: #F4DFE7; --marke: #6E2346; --auf-marke: #FBF8F2;
  --grund: #F3F1EC; --karte: #FBFAF7; --vertieft: #E6E2DA; --tinte: #262420; --leise: #6B675F; --linie: #DDD8CE;
  --ok: #34482F; --ok-grund: #E3ECDD; --warn: #8C2219; --warn-grund: #FBE4DF;
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 22px; --s6: 28px;
  color-scheme: light dark;
  --vb-akzent: var(--akzent); --vb-sanft: var(--akzent-sanft); --vb-flaeche: var(--marke);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-thema="hell"]) {
    --akzent: #E58AB0; --akzent-sanft: #43202F; --grund: #1C1B18; --karte: #262420; --vertieft: #33302B;
    --tinte: #F3F1EC; --leise: #BDB7AC; --linie: #3A3732; --ok: #C2D8BC; --ok-grund: #2A3626; --warn: #F6C2BA; --warn-grund: #45231F;
  }
}
:root[data-thema="dunkel"] {
  --akzent: #E58AB0; --akzent-sanft: #43202F; --grund: #1C1B18; --karte: #262420; --vertieft: #33302B;
  --tinte: #F3F1EC; --leise: #BDB7AC; --linie: #3A3732; --ok: #C2D8BC; --ok-grund: #2A3626; --warn: #F6C2BA; --warn-grund: #45231F;
  color-scheme: dark;
}
:root[data-thema="hell"] { color-scheme: light; }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { font: 15px/1.45 -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif; background: var(--grund); color: var(--tinte); -webkit-font-smoothing: antialiased; }
button, input, textarea { font: inherit; color: inherit; }
a { color: var(--akzent); text-decoration: none; }

.layout { display: grid; grid-template-columns: 270px 1fr; min-height: 100vh; }
.seite { background: var(--grund); border-right: 1px solid var(--linie); padding: var(--s4) var(--s3); overflow-y: auto; height: 100vh; position: sticky; top: 0; display: flex; flex-direction: column; }
.konto-unten { margin-top: auto; padding-top: var(--s4); }
.oben-mobil { display: none; }
.inhalt { background: var(--karte); padding: var(--s6); min-width: 0; }
.marke { display: flex; align-items: center; gap: var(--s2); padding: 0 var(--s2) var(--s4); font-size: 19px; font-weight: 600; }
.zeichen { width: 26px; height: 26px; border-radius: 6px; background: var(--marke); display: inline-grid; place-items: center; color: var(--auf-marke); font-size: 14px; }
.nav { list-style: none; margin: 0 0 var(--s4); padding: 0; }
.nav li a, .nav li button { display: flex; justify-content: space-between; align-items: center; width: 100%; padding: 7px var(--s2); border-radius: 8px; color: var(--tinte); background: none; border: 0; text-align: left; cursor: pointer; }
.nav li a:hover, .nav li button:hover { background: var(--vertieft); }
.nav li a.aktiv { background: var(--akzent-sanft); color: var(--akzent); font-weight: 600; }
.nav .unter a { padding-left: 22px; font-size: 14px; }
.nav .zahl { font-size: 12.5px; color: var(--leise); }
.nav .zahl.akzent { color: var(--akzent); font-weight: 600; }
.abschnitt { font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--leise); padding: var(--s2) var(--s2) var(--s1); }
.fuss { font-size: 13px; color: var(--leise); padding: var(--s4) var(--s2); }

.eyebrow { font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--akzent); margin: 0 0 var(--s1); }
h1 { font-size: 26px; font-weight: 600; margin: 0; letter-spacing: -0.01em; }
h2 { font-size: 20px; font-weight: 600; margin: 0 0 var(--s3); }
.unterzeile { color: var(--leise); font-size: 13.5px; margin: var(--s1) 0 0; }
.kopf { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--s4); flex-wrap: wrap; margin-bottom: var(--s5); }
.knoepfe { display: flex; gap: var(--s2); flex-wrap: wrap; }

.karte { background: var(--karte); border: 1px solid var(--linie); border-radius: 28px; padding: var(--s5); margin-bottom: var(--s4); }
.karte.liste { padding: 0; overflow: hidden; }
.reihe { display: grid; gap: var(--s4); grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); margin-bottom: var(--s4); }
.reihe .karte { margin: 0; }

.pille { border: 1px solid var(--linie); background: var(--karte); border-radius: 999px; padding: 7px 16px; cursor: pointer; font-size: 14px; font-weight: 500; }
.pille:hover { background: var(--vertieft); }
.pille.haupt { background: var(--akzent); border-color: var(--akzent); color: #fff; }
.pille.haupt:hover { filter: brightness(1.06); }
.pille:disabled { opacity: .5; cursor: default; }
.chip { display: inline-block; font-size: 12px; font-weight: 600; padding: 2px 9px; border-radius: 999px; background: var(--vertieft); color: var(--tinte); white-space: nowrap; }
.chip.akzent { background: var(--akzent-sanft); color: var(--akzent); }
.chip.warn { background: var(--warn-grund); color: var(--warn); }
.chip.ok { background: var(--ok-grund); color: var(--ok); }

.zeile { display: flex; align-items: center; gap: var(--s3); padding: 10px var(--s5); min-height: 52px; border-bottom: 1px solid var(--linie); }
.zeile:last-child { border-bottom: 0; }
.zeile.klickbar { cursor: pointer; }
.zeile.klickbar:hover { background: color-mix(in srgb, var(--vertieft) 50%, transparent); }
.zeile .haupt { flex: 1; min-width: 0; }
.zeile .titel { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zeile .info { font-size: 13.5px; color: var(--leise); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zeile .rechts { font-size: 13.5px; color: var(--leise); white-space: nowrap; }
.symbol { width: 24px; text-align: center; color: var(--akzent); flex: none; }
.kreis { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--akzent); background: none; cursor: pointer; flex: none; padding: 0; }
.kreis:hover { background: var(--akzent-sanft); }
.leer { padding: var(--s5); color: var(--leise); font-size: 13.5px; }
.betrag { font-size: 26px; font-weight: 600; font-variant-numeric: tabular-nums; }
.paar { display: flex; justify-content: space-between; color: var(--leise); }
.paar b { color: var(--tinte); font-weight: 500; font-variant-numeric: tabular-nums; }
.ordner { display: grid; grid-template-columns: 1fr 1fr; gap: 2px var(--s4); }
.ordner button { display: flex; justify-content: space-between; border: 0; background: none; padding: 3px 0; cursor: pointer; text-align: left; }
.ordner button.aktiv { color: var(--akzent); font-weight: 600; }
.ordner button span:last-child { color: var(--leise); margin-left: var(--s2); font-variant-numeric: tabular-nums; }
.reiter { display: inline-flex; background: var(--vertieft); border-radius: 10px; padding: 2px; margin-bottom: var(--s4); flex-wrap: wrap; }
.reiter button { border: 0; background: none; padding: 5px 14px; border-radius: 8px; cursor: pointer; font-size: 14px; }
.reiter button.aktiv { background: var(--karte); font-weight: 600; box-shadow: 0 1px 2px rgba(0,0,0,.08); }

input[type=text], input[type=email], input[type=password], input[type=search], textarea {
  width: 100%; padding: 10px 14px; border: 1px solid var(--linie); border-radius: 12px; background: var(--karte); outline: none;
}
input:focus, textarea:focus { border-color: var(--akzent); }
textarea { min-height: 90px; resize: vertical; }
label.feld { display: block; margin-bottom: var(--s3); font-size: 13.5px; color: var(--leise); }
label.feld input { margin-top: var(--s1); color: var(--tinte); }

.fehler { color: var(--warn); font-size: 13.5px; margin: var(--s2) 0; }
.meldung { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); background: var(--tinte); color: var(--grund); padding: 10px 18px; border-radius: 999px; font-size: 13.5px; z-index: 10; }
.meldung.fehler { background: var(--warn-grund); color: var(--warn); margin: 0; }
.ablage { border: 2px dashed var(--akzent); background: color-mix(in srgb, var(--akzent-sanft) 40%, transparent); }
.menuknopf { display: none; }

@media (max-width: 760px) {
  .layout { grid-template-columns: 1fr; }
  .seite { display: none; height: auto; position: static; border-right: 0; border-bottom: 1px solid var(--linie); }
  .seite.offen { display: flex; }
  .oben-mobil { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--s4); }
  .menuknopf { display: inline-block; }
  .inhalt { padding: var(--s4); }
  .zeile { padding: 10px var(--s4); }
  .zeile .rechts.breit { display: none; }
}
.karte textarea + .knoepfe { margin-top: var(--s3); }
.karte > p:not(.eyebrow):not(.unterzeile) { margin: var(--s2) 0; }
a.zeile { color: var(--tinte); }
.karte .eyebrow + .liste, .karte > .eyebrow:not(:first-child) { margin-top: var(--s4); }
.karte .knoepfe { margin-top: var(--s3); }
.karte .paar { padding: var(--s1) 0; align-items: center; }

/* Einstellungen: kleine Formulare in Karten (vibits-Rahmen) */
.formular-klein { display: flex; flex-direction: column; gap: var(--s3); padding: var(--s2) 22px var(--s4); }
.formular-klein[hidden] { display: none; }
.formular-klein .vb-knopf { align-self: flex-start; }
.schluessel-text { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 15px; letter-spacing: .04em; user-select: all; margin: 0; }
.formular-klein p { margin: 0; }