/* Casheli — mobile first. Die Kinder schauen am Handy, die Eltern meist auch. */

:root {
  --grund: #fbfaf8;
  --karte: #ffffff;
  --text: #1f2124;
  --leise: #6b7075;
  --linie: #e3e0da;
  --akzent: #c92a2a;
  --akzent-text: #ffffff;
  --plus: #2b8a3e;
  --minus: #c92a2a;
  --warnung-grund: #fff4e6;
  --warnung-linie: #f2b25c;
  --ok-grund: #ebfbee;
  --ok-linie: #8ce99a;
  --fehler-grund: #fff5f5;
  --fehler-linie: #ffa8a8;
  --rundung: 12px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --grund: #16181a;
    --karte: #1e2124;
    --text: #e8e6e3;
    --leise: #9aa0a6;
    --linie: #33383d;
    --akzent: #e03131;
    --plus: #51cf66;
    --minus: #ff8787;
    --warnung-grund: #2d2416;
    --warnung-linie: #8f6224;
    --ok-grund: #16291c;
    --ok-linie: #2f6b3c;
    --fehler-grund: #2b1a1a;
    --fehler-linie: #7a3535;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--grund);
  color: var(--text);
  font: 16px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  -webkit-text-size-adjust: 100%;
}

/* ------------------------------------------------------------------ Gerüst */

.kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.9rem 1rem;
  background: var(--karte);
  border-bottom: 1px solid var(--linie);
}

.marke {
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--akzent);
  text-decoration: none;
  letter-spacing: -0.01em;
}

.abmelden { display: flex; align-items: center; gap: 0.6rem; margin: 0; }
.wer { color: var(--leise); font-size: 0.9rem; }

.navi {
  display: flex;
  gap: 0.25rem;
  padding: 0.5rem;
  overflow-x: auto;
  background: var(--karte);
  border-bottom: 1px solid var(--linie);
  -webkit-overflow-scrolling: touch;
}

.navi a {
  flex: 0 0 auto;
  padding: 0.5rem 0.85rem;
  border-radius: 999px;
  color: var(--leise);
  text-decoration: none;
  font-size: 0.95rem;
  white-space: nowrap;
}

.navi a.hier { background: var(--akzent); color: var(--akzent-text); }

.inhalt {
  max-width: 46rem;
  margin: 0 auto;
  padding: 1rem 1rem 3rem;
}

.fuss {
  max-width: 46rem;
  margin: 0 auto;
  padding: 0 1rem 2rem;
  color: var(--leise);
  font-size: 0.82rem;
}

/* ------------------------------------------------------------------ Karten */

.karte {
  background: var(--karte);
  border: 1px solid var(--linie);
  border-radius: var(--rundung);
  padding: 1.1rem;
  margin-bottom: 1rem;
}

.karte.schmal { max-width: 26rem; margin-inline: auto; }
.karte.warnung { background: var(--warnung-grund); border-color: var(--warnung-linie); }
.karte.total { text-align: center; }

h1 { font-size: 1.35rem; margin: 0 0 0.75rem; letter-spacing: -0.01em; }
h2 { font-size: 1.05rem; margin: 1.25rem 0 0.6rem; }
h2:first-child { margin-top: 0; }
h3 { font-size: 1rem; margin: 0 0 0.35rem; }

/* Links in Überschriften und Listen sollen wie Text aussehen, nicht wie das
   Browser-Blau — die Karte selbst ist schon das Ziel. */
.karte h2 a, .karte h3 a { color: inherit; text-decoration: none; }
.karte h2 a:hover, .karte h3 a:hover { text-decoration: underline; }

.raster { display: grid; gap: 1rem; }
@media (min-width: 34rem) { .raster { grid-template-columns: 1fr 1fr; } }

/* ----------------------------------------------------------------- Beträge */

.grossbetrag {
  font-size: 2.1rem;
  font-weight: 700;
  margin: 0.2rem 0;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

.grossbetrag.minus { color: var(--minus); }

.beschriftung { color: var(--leise); font-size: 0.85rem; margin: 0.15rem 0; }

/* ------------------------------------------------------------- Sparziel */

.ziel-zeile {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.5rem;
  margin: 0.9rem 0 0.35rem;
}

.ziel-titel { font-weight: 600; }
.prozent { color: var(--leise); font-variant-numeric: tabular-nums; font-size: 0.9rem; }

.fortschritt {
  height: 10px;
  background: var(--linie);
  border-radius: 999px;
  overflow: hidden;
}

.fortschritt.gross { height: 16px; }

.fortschritt .balken {
  height: 100%;
  background: var(--plus);
  border-radius: 999px;
  transition: width 0.3s ease;
}

/* --------------------------------------------------------------- Auszug */

.auszug, .liste { list-style: none; margin: 0.5rem 0 0; padding: 0; }

.auszug li, .liste li {
  display: grid;
  align-items: baseline;
  gap: 0.3rem 0.75rem;
  padding: 0.7rem 0;
  border-top: 1px solid var(--linie);
}

/* Am Handy: Datum links, Betrag rechts, Beschreibung darunter über die ganze
   Breite. Sonst quetscht eine lange Notiz die mittlere Spalte zu einem
   vierzeiligen Strang zusammen. */
.auszug li { grid-template-columns: 1fr auto; }
.auszug li .zeile-datum { grid-column: 1; grid-row: 1; }
.auszug li .zeile-betrag { grid-column: 2; grid-row: 1; }
.auszug li .zeile-text { grid-column: 1 / -1; }

@media (min-width: 34rem) {
  .auszug li { grid-template-columns: auto 1fr auto; }
  .auszug li .zeile-text { grid-column: 2; grid-row: 1; }
  .auszug li .zeile-betrag { grid-column: 3; }
}

.liste li { grid-template-columns: 1fr auto auto; }
.auszug li:first-child, .liste li:first-child { border-top: 0; }

.zeile-datum {
  color: var(--leise);
  font-size: 0.82rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.zeile-text { min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.4rem; }
.zeile-text a { color: inherit; font-weight: 600; }

.zeile-betrag {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  text-align: right;
}

.zeile-betrag.plus { color: var(--plus); }
.zeile-betrag.minus { color: var(--minus); }

.zeile-aktion { grid-column: 1 / -1; justify-self: start; margin: 0; }

.notiz { color: var(--leise); font-size: 0.88rem; }

.marke-typ, .marke-status, .periode, .version {
  font-size: 0.72rem;
  padding: 0.12rem 0.45rem;
  border-radius: 999px;
  border: 1px solid var(--linie);
  color: var(--leise);
  white-space: nowrap;
}

.marke-status { border-color: var(--warnung-linie); }

/* Storniert: durchgestrichen, aber sichtbar — gelöscht wird nie etwas. */
.auszug li.entwertet .zeile-betrag,
.auszug li.entwertet .marke-typ { text-decoration: line-through; }
.auszug li.entwertet { opacity: 0.65; }
.auszug li.gegenbuchung { border-left: 3px solid var(--warnung-linie); padding-left: 0.6rem; }
.auszug li.offen { opacity: 0.8; }

.archiviert { opacity: 0.55; }

/* ------------------------------------------------------------- Formulare */

.formular { display: flex; flex-direction: column; gap: 0.35rem; margin-top: 0.5rem; }
.formular.eng { margin-top: 0.35rem; }

label { font-size: 0.85rem; color: var(--leise); margin-top: 0.5rem; }

input[type="text"], input[type="password"], input[type="date"],
input[type="number"], select {
  width: 100%;
  padding: 0.65rem 0.7rem;
  font-size: 1rem;
  font-family: inherit;
  color: var(--text);
  background: var(--grund);
  border: 1px solid var(--linie);
  border-radius: 8px;
}

input:focus-visible, select:focus-visible, button:focus-visible, a:focus-visible, summary:focus-visible {
  outline: 2px solid var(--akzent);
  outline-offset: 2px;
}

fieldset.wahl { border: 0; padding: 0; margin: 0.75rem 0 0; }
fieldset.wahl legend { font-size: 0.85rem; color: var(--leise); padding: 0; }

.wahl-feld {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  margin: 0.4rem 0 0;
  padding: 0.6rem 0.7rem;
  border: 1px solid var(--linie);
  border-radius: 8px;
  color: var(--text);
  cursor: pointer;
}

.wahl-feld span { display: flex; flex-direction: column; }
.wahl-feld small { color: var(--leise); font-size: 0.8rem; }
.wahl-feld input { margin-top: 0.25rem; accent-color: var(--akzent); }
.wahl-feld:has(input:checked) { border-color: var(--akzent); }

/* --------------------------------------------------------------- Knöpfe */

.knopf {
  display: inline-block;
  padding: 0.6rem 1rem;
  margin-top: 0.75rem;
  font-size: 0.95rem;
  font-family: inherit;
  font-weight: 600;
  color: var(--akzent-text);
  background: var(--akzent);
  border: 1px solid var(--akzent);
  border-radius: 8px;
  text-decoration: none;
  cursor: pointer;
}

.knopf.gross { width: 100%; padding: 0.8rem 1rem; font-size: 1rem; }
.knopf.klein { padding: 0.4rem 0.75rem; font-size: 0.87rem; }
.knopf.winzig { padding: 0.25rem 0.6rem; font-size: 0.8rem; margin-top: 0.35rem; }

.knopf.leise {
  color: var(--leise);
  background: transparent;
  border-color: var(--linie);
}

.knopf.warnend { background: #e8590c; border-color: #e8590c; }

.knopfreihe { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.5rem; }
.knopfreihe .knopf { margin-top: 0; }

/* ------------------------------------------------------------- Meldungen */

.meldung {
  padding: 0.7rem 0.9rem;
  border-radius: 8px;
  border: 1px solid var(--ok-linie);
  background: var(--ok-grund);
  margin: 0 0 1rem;
}

.meldung.fehler { border-color: var(--fehler-linie); background: var(--fehler-grund); }
.meldung.hinweis { border-color: var(--warnung-linie); background: var(--warnung-grund); }

.hinweis-text { color: var(--leise); font-size: 0.82rem; margin: 0.6rem 0 0; }

/* ---------------------------------------------------------------- Regeln */

.regel { padding: 0.85rem 0; border-top: 1px solid var(--linie); }
.regel:first-of-type { border-top: 0; padding-top: 0.25rem; }
.regel.pausiert, .regel.beendet { opacity: 0.6; }
.regel h3 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.4rem; }
.regel-text { font-weight: 600; margin: 0.2rem 0; }
.regel-aktionen { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; margin-top: 0.5rem; }
.regel-aktionen form { margin: 0; }
.regel-aktionen .knopf { margin-top: 0; }

.version { margin-right: 0.25rem; }

/* -------------------------------------------------------------- Details */

.ausklapp { margin-top: 0.5rem; }
.ausklapp summary { cursor: pointer; color: var(--leise); font-size: 0.87rem; }
.ausklapp[open] summary { margin-bottom: 0.35rem; }

.befehl {
  background: var(--grund);
  border: 1px solid var(--linie);
  border-radius: 8px;
  padding: 0.7rem;
  overflow-x: auto;
  font-size: 0.85rem;
}

code { font-size: 0.88em; }

/* -----------------------------------------------------------------------
   Breiten für den Fortschrittsbalken.
   Als Klassen statt als style-Attribut, damit die Content-Security-Policy
   ohne 'unsafe-inline' auskommt.
   ----------------------------------------------------------------------- */
.fortschritt .b0 { width: 0%; }
.fortschritt .b1 { width: 1%; }
.fortschritt .b2 { width: 2%; }
.fortschritt .b3 { width: 3%; }
.fortschritt .b4 { width: 4%; }
.fortschritt .b5 { width: 5%; }
.fortschritt .b6 { width: 6%; }
.fortschritt .b7 { width: 7%; }
.fortschritt .b8 { width: 8%; }
.fortschritt .b9 { width: 9%; }
.fortschritt .b10 { width: 10%; }
.fortschritt .b11 { width: 11%; }
.fortschritt .b12 { width: 12%; }
.fortschritt .b13 { width: 13%; }
.fortschritt .b14 { width: 14%; }
.fortschritt .b15 { width: 15%; }
.fortschritt .b16 { width: 16%; }
.fortschritt .b17 { width: 17%; }
.fortschritt .b18 { width: 18%; }
.fortschritt .b19 { width: 19%; }
.fortschritt .b20 { width: 20%; }
.fortschritt .b21 { width: 21%; }
.fortschritt .b22 { width: 22%; }
.fortschritt .b23 { width: 23%; }
.fortschritt .b24 { width: 24%; }
.fortschritt .b25 { width: 25%; }
.fortschritt .b26 { width: 26%; }
.fortschritt .b27 { width: 27%; }
.fortschritt .b28 { width: 28%; }
.fortschritt .b29 { width: 29%; }
.fortschritt .b30 { width: 30%; }
.fortschritt .b31 { width: 31%; }
.fortschritt .b32 { width: 32%; }
.fortschritt .b33 { width: 33%; }
.fortschritt .b34 { width: 34%; }
.fortschritt .b35 { width: 35%; }
.fortschritt .b36 { width: 36%; }
.fortschritt .b37 { width: 37%; }
.fortschritt .b38 { width: 38%; }
.fortschritt .b39 { width: 39%; }
.fortschritt .b40 { width: 40%; }
.fortschritt .b41 { width: 41%; }
.fortschritt .b42 { width: 42%; }
.fortschritt .b43 { width: 43%; }
.fortschritt .b44 { width: 44%; }
.fortschritt .b45 { width: 45%; }
.fortschritt .b46 { width: 46%; }
.fortschritt .b47 { width: 47%; }
.fortschritt .b48 { width: 48%; }
.fortschritt .b49 { width: 49%; }
.fortschritt .b50 { width: 50%; }
.fortschritt .b51 { width: 51%; }
.fortschritt .b52 { width: 52%; }
.fortschritt .b53 { width: 53%; }
.fortschritt .b54 { width: 54%; }
.fortschritt .b55 { width: 55%; }
.fortschritt .b56 { width: 56%; }
.fortschritt .b57 { width: 57%; }
.fortschritt .b58 { width: 58%; }
.fortschritt .b59 { width: 59%; }
.fortschritt .b60 { width: 60%; }
.fortschritt .b61 { width: 61%; }
.fortschritt .b62 { width: 62%; }
.fortschritt .b63 { width: 63%; }
.fortschritt .b64 { width: 64%; }
.fortschritt .b65 { width: 65%; }
.fortschritt .b66 { width: 66%; }
.fortschritt .b67 { width: 67%; }
.fortschritt .b68 { width: 68%; }
.fortschritt .b69 { width: 69%; }
.fortschritt .b70 { width: 70%; }
.fortschritt .b71 { width: 71%; }
.fortschritt .b72 { width: 72%; }
.fortschritt .b73 { width: 73%; }
.fortschritt .b74 { width: 74%; }
.fortschritt .b75 { width: 75%; }
.fortschritt .b76 { width: 76%; }
.fortschritt .b77 { width: 77%; }
.fortschritt .b78 { width: 78%; }
.fortschritt .b79 { width: 79%; }
.fortschritt .b80 { width: 80%; }
.fortschritt .b81 { width: 81%; }
.fortschritt .b82 { width: 82%; }
.fortschritt .b83 { width: 83%; }
.fortschritt .b84 { width: 84%; }
.fortschritt .b85 { width: 85%; }
.fortschritt .b86 { width: 86%; }
.fortschritt .b87 { width: 87%; }
.fortschritt .b88 { width: 88%; }
.fortschritt .b89 { width: 89%; }
.fortschritt .b90 { width: 90%; }
.fortschritt .b91 { width: 91%; }
.fortschritt .b92 { width: 92%; }
.fortschritt .b93 { width: 93%; }
.fortschritt .b94 { width: 94%; }
.fortschritt .b95 { width: 95%; }
.fortschritt .b96 { width: 96%; }
.fortschritt .b97 { width: 97%; }
.fortschritt .b98 { width: 98%; }
.fortschritt .b99 { width: 99%; }
.fortschritt .b100 { width: 100%; }