/* Private Dashboard – ruhig, gut lesbar, Handy zuerst */
:root {
  --bg: #f5f3ef; --fl: #ffffff; --fl2: #faf8f5; --rand: #e4dfd6; --text: #22201c; --leise: #6d675e;
  --akz: #2f5d50; --akz-h: #24493f; --akz-weich: #e3eee9;
  --hoch: #b3412e; --hoch-w: #f8e3dd; --mittel: #a8710f; --mittel-w: #f8edd6; --info: #3f6390; --info-w: #e2eaf4;
  --ein: #2f7a4f; --aus: #b3412e; --uebung: #c2620c;
  --r: 14px; --schatten: 0 1px 2px rgba(40, 30, 10, .06), 0 4px 16px rgba(40, 30, 10, .05);
  --schrift: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --zahl: "Inter", system-ui, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #161714; --fl: #1f201c; --fl2: #242520; --rand: #34352f; --text: #ecebe6; --leise: #a19f96;
    --akz: #7fbfa8; --akz-h: #98cfbb; --akz-weich: #23332d;
    --hoch: #f08a74; --hoch-w: #3a2420; --mittel: #e2b04e; --mittel-w: #352c19; --info: #8fb3e0; --info-w: #1f2a38;
    --ein: #7cc79a; --aus: #f08a74; --schatten: none;
  }
}
:root[data-theme="dark"] {
  --bg: #161714; --fl: #1f201c; --fl2: #242520; --rand: #34352f; --text: #ecebe6; --leise: #a19f96;
  --akz: #7fbfa8; --akz-h: #98cfbb; --akz-weich: #23332d;
  --hoch: #f08a74; --hoch-w: #3a2420; --mittel: #e2b04e; --mittel-w: #352c19; --info: #8fb3e0; --info-w: #1f2a38;
  --ein: #7cc79a; --aus: #f08a74; --schatten: none;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--bg); color: var(--text); font: 15px/1.5 var(--schrift); -webkit-font-smoothing: antialiased; }
a { color: var(--akz); }
h1 { font-size: 26px; line-height: 1.2; margin: 0 0 4px; letter-spacing: -.01em; }
h2 { font-size: 17px; margin: 0 0 12px; }
.leise { color: var(--leise); }
.klein { font-size: 13px; }
.zahl { font-family: var(--zahl); font-variant-numeric: tabular-nums; }
.ein { color: var(--ein); }
.aus { color: var(--aus); }

/* Rahmen */
.band { background: var(--uebung); color: #fff; font-size: 13px; padding: 7px 16px; display: flex; gap: 12px; align-items: center; justify-content: center; flex-wrap: wrap; position: sticky; top: 0; z-index: 30; }
.band button { background: rgba(255,255,255,.18); color: #fff; border: 0; border-radius: 99px; padding: 3px 10px; font: inherit; cursor: pointer; }
.huelle { display: grid; grid-template-columns: 232px 1fr; min-height: 100vh; background: linear-gradient(to right, var(--fl) 231px, var(--rand) 231px, var(--rand) 232px, transparent 232px); }
.seite { padding: 28px 32px 96px; max-width: 1080px; width: 100%; }
nav.leiste { padding: 22px 14px; position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; gap: 2px; }
.marke { font-weight: 700; font-size: 16px; padding: 0 10px 18px; display: flex; gap: 8px; align-items: center; }
.marke i { width: 26px; height: 26px; border-radius: 8px; background: var(--akz); display: inline-block; position: relative; }
.marke i::after { content: ""; position: absolute; inset: 7px; border-radius: 3px; border: 2px solid var(--fl); border-top-color: transparent; }
nav.leiste a { display: flex; gap: 10px; align-items: center; padding: 9px 10px; border-radius: 10px; color: var(--text); text-decoration: none; }
nav.leiste a:hover { background: var(--fl2); }
nav.leiste a.an { background: var(--akz-weich); color: var(--akz); font-weight: 600; }
nav.leiste .zahlpunkt { margin-left: auto; background: var(--hoch); color: #fff; border-radius: 99px; font-size: 11px; padding: 0 7px; line-height: 18px; }
nav.leiste .unten { margin-top: auto; padding: 10px; font-size: 13px; color: var(--leise); }
nav.unten-mobil { display: none; }

/* Bausteine */
.karte { background: var(--fl); border: 1px solid var(--rand); border-radius: var(--r); padding: 18px 20px; box-shadow: var(--schatten); }
.gitter { display: grid; gap: 16px; }
.g2 { grid-template-columns: 1fr 1fr; }
.g4 { grid-template-columns: repeat(4, 1fr); }
.kz .wert { font-size: 24px; font-weight: 650; letter-spacing: -.01em; }
.kz .titel { font-size: 13px; color: var(--leise); }
.kopf { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; margin-bottom: 20px; flex-wrap: wrap; }
.zeile { display: flex; gap: 10px; align-items: center; }
.abstand { margin-top: 16px; }
button, .knopf { font: inherit; border: 1px solid var(--rand); background: var(--fl); color: var(--text); padding: 8px 14px; border-radius: 10px; cursor: pointer; text-decoration: none; display: inline-flex; gap: 6px; align-items: center; }
button:hover, .knopf:hover { background: var(--fl2); }
button.primaer { background: var(--akz); border-color: var(--akz); color: #fff; }
button.primaer:hover { background: var(--akz-h); }
button.ki { background: #6b4fbb; border-color: #6b4fbb; color: #fff; }
button.ki:hover { background: #5a40a6; }
button.klein { padding: 4px 10px; font-size: 13px; }
button:disabled { opacity: .5; cursor: default; }
input, select, textarea { font: inherit; color: var(--text); background: var(--fl); border: 1px solid var(--rand); border-radius: 10px; padding: 8px 11px; width: 100%; }
input:focus, select:focus, textarea:focus, button:focus-visible { outline: 2px solid var(--akz); outline-offset: 1px; }
label { display: block; font-size: 13px; color: var(--leise); margin: 12px 0 4px; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chip { border: 1px solid var(--rand); border-radius: 99px; padding: 4px 12px; font-size: 13px; background: var(--fl); cursor: pointer; }
.chip.an { background: var(--akz); color: #fff; border-color: var(--akz); }
.marke-s { font-size: 12px; border-radius: 99px; padding: 1px 9px; font-weight: 600; white-space: nowrap; }
.s-hoch { background: var(--hoch-w); color: var(--hoch); }
.s-mittel { background: var(--mittel-w); color: var(--mittel); }
.s-info { background: var(--info-w); color: var(--info); }
.s-ok { background: var(--akz-weich); color: var(--akz); }
.leer { text-align: center; color: var(--leise); padding: 28px 12px; }

/* Listen */
.liste { display: flex; flex-direction: column; }
.eintrag { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; align-items: start; padding: 14px 0; border-top: 1px solid var(--rand); }
.eintrag:first-child { border-top: 0; }
.eintrag .t { font-weight: 600; }
.eintrag .aktionen { grid-column: 2; display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.eintrag .aktionen:empty { display: none; }
.balken { width: 4px; align-self: stretch; border-radius: 4px; }
.b-hoch { background: var(--hoch); } .b-mittel { background: var(--mittel); } .b-info { background: var(--info); } .b-ok { background: var(--akz); }
table { width: 100%; border-collapse: collapse; }
td { overflow-wrap: anywhere; }
td.zahl, td .zahl { white-space: nowrap; overflow-wrap: normal; }
.klickbar { cursor: pointer; }
.klickbar:hover { color: var(--akz); }
th, td { text-align: left; padding: 9px 8px; border-top: 1px solid var(--rand); vertical-align: top; }
th { font-size: 12px; color: var(--leise); font-weight: 600; border-top: 0; cursor: default; }
td.r, th.r { text-align: right; }
.abo-verlauf { display: flex; gap: 2px; align-items: flex-end; height: 26px; }
.abo-verlauf span { width: 6px; background: var(--akz); border-radius: 2px 2px 0 0; opacity: .75; }
.bereich-kacheln { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; }
.bereich-kacheln .karte { padding: 14px 16px; }
.symbol { font-size: 22px; }

/* Monatsbalken */
.monate { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 6px; align-items: end; height: 120px; margin-top: 8px; }
.monate .m { display: flex; flex-direction: column; align-items: center; gap: 4px; height: 100%; justify-content: flex-end; }
.monate .paar { display: flex; gap: 2px; align-items: flex-end; height: 100%; width: 100%; justify-content: center; }
.monate .e { background: var(--ein); width: 40%; border-radius: 3px 3px 0 0; opacity: .8; }
.monate .a { background: var(--leise); width: 40%; border-radius: 3px 3px 0 0; opacity: .55; }
.monate small { font-size: 10px; color: var(--leise); }

/* Import */
.ablage { border: 2px dashed var(--rand); border-radius: var(--r); padding: 36px 18px; text-align: center; background: var(--fl2); cursor: pointer; }
.ablage.drueber { border-color: var(--akz); background: var(--akz-weich); }

/* Dialog */
dialog { border: 0; border-radius: var(--r); padding: 0; width: min(520px, calc(100vw - 32px)); background: var(--fl); color: var(--text); box-shadow: 0 10px 40px rgba(0,0,0,.25); }
dialog::backdrop { background: rgba(20, 18, 14, .45); }
dialog .innen { padding: 20px 22px; }
dialog .fuss { display: flex; justify-content: flex-end; gap: 8px; padding: 14px 22px; border-top: 1px solid var(--rand); }
.meldung { position: fixed; bottom: 84px; left: 50%; transform: translateX(-50%); background: var(--text); color: var(--bg); padding: 10px 16px; border-radius: 10px; z-index: 50; font-size: 14px; }

/* Handy */
@media (max-width: 820px) {
  .huelle { grid-template-columns: 1fr; }
  nav.leiste { display: none; }
  .seite { padding: 18px 16px 96px; }
  .g2, .g4 { grid-template-columns: 1fr 1fr; }
  .g2 { grid-template-columns: 1fr; }
  h1 { font-size: 22px; }
  .kz .wert { font-size: 19px; }
  nav.unten-mobil { display: grid; grid-template-columns: repeat(6, 1fr); position: fixed; bottom: 0; left: 0; right: 0; background: var(--fl); border-top: 1px solid var(--rand); padding: 6px 4px calc(6px + env(safe-area-inset-bottom)); z-index: 20; }
  nav.unten-mobil a { display: flex; flex-direction: column; align-items: center; font-size: 11px; color: var(--leise); text-decoration: none; gap: 1px; position: relative; }
  nav.unten-mobil a.an { color: var(--akz); font-weight: 600; }
  nav.unten-mobil a span.s { font-size: 19px; line-height: 1.2; }
  nav.unten-mobil .zahlpunkt { position: absolute; top: -2px; right: 18%; background: var(--hoch); color: #fff; border-radius: 99px; font-size: 10px; padding: 0 5px; line-height: 15px; }
  .huelle { background: none; }
  .karte { padding: 14px 14px; }
  th, td { padding: 8px 5px; }
  .nur-gross { display: none; }
}

/* Klickbare Kacheln und Titel (Übersicht) */
a.klickkarte { display: block; text-decoration: none; color: inherit; transition: border-color .15s, transform .15s; }
a.klickkarte:hover { border-color: var(--akz); }
a.klickkarte:active { transform: scale(.99); }
a.titellink { color: inherit; text-decoration: none; }
a.titellink:hover { color: var(--akz); }
.monate a.m { text-decoration: none; color: inherit; border-radius: 6px; }
.monate a.m:hover { background: var(--fl2); }

/* Postfach */
pre.mailtext { white-space: pre-wrap; word-break: break-word; font: 14px/1.5 var(--schrift); background: var(--fl2); border: 1px solid var(--rand); border-radius: 10px; padding: 12px 14px; max-height: 50vh; overflow: auto; margin: 12px 0 0; }
.eintrag.klickbar:hover { background: var(--fl2); }

/* Assistent */
label.haken { display: flex; gap: 8px; align-items: center; color: var(--text); font-size: 14px; flex-wrap: wrap; }
label.haken input[type=checkbox] { width: 18px; height: 18px; flex: none; }
.entsch-felder { margin-top: 4px; }
.entsch-felder select, .entsch-felder input:not([type=checkbox]) { max-width: 460px; }