/* Haushaltsbuch – Oberfläche. Farbrollen zentral definiert, helle und dunkle Variante. */
:root {
  --flaeche: #f9f9f7;
  --karte: #fcfcfb;
  --tinte: #0b0b0b;
  --tinte-2: #52514e;
  --tinte-3: #898781;
  --linie: #e1e0d9;
  --rand: rgba(11, 11, 11, 0.10);
  --akzent: #2a78d6;          /* Serie 1: Einnahmen */
  --akzent-rot: #e34948;      /* Serie 6: Ausgaben */
  --gut: #006300;
  --schlecht: #b93030;
}
@media (prefers-color-scheme: dark) {
  :root {
    --flaeche: #0d0d0d;
    --karte: #1a1a19;
    --tinte: #ffffff;
    --tinte-2: #c3c2b7;
    --tinte-3: #898781;
    --linie: #2c2c2a;
    --rand: rgba(255, 255, 255, 0.10);
    --akzent: #3987e5;
    --akzent-rot: #e66767;
    --gut: #0ca30c;
    --schlecht: #e66767;
  }
}

* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--flaeche);
  color: var(--tinte);
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 15px;
  line-height: 1.5;
}
h1 { font-size: 1.5rem; margin: 0; }
h2 { font-size: 1.05rem; margin: 0 0 0.75rem; }
a { color: var(--akzent); }

/* Kopfzeile */
.kopf {
  background: var(--karte);
  border-bottom: 1px solid var(--linie);
  position: sticky; top: 0; z-index: 10;
}
.kopf-innen {
  max-width: 1080px; margin: 0 auto; padding: 0.6rem 1.25rem;
  display: flex; align-items: center; gap: 1.5rem;
}
.marke { font-weight: 700; text-decoration: none; color: var(--tinte); }
.kopf nav { display: flex; gap: 0.25rem; flex: 1; }
.kopf nav a {
  text-decoration: none; color: var(--tinte-2);
  padding: 0.35rem 0.75rem; border-radius: 8px;
}
.kopf nav a:hover { background: var(--flaeche); }
.kopf nav a.aktiv { color: var(--tinte); font-weight: 600; background: var(--flaeche); }
.kopf-rechts { display: flex; align-items: center; gap: 0.75rem; }
.person-chip {
  padding: 0.2rem 0.7rem; border-radius: 999px; font-weight: 600; font-size: 0.85rem;
  background: var(--akzent); color: #fff;
}
.abmelden { color: var(--tinte-3); text-decoration: none; font-size: 0.9rem; }
.abmelden:hover { color: var(--tinte); }

/* Layout */
.inhalt { max-width: 1080px; margin: 0 auto; padding: 1.5rem 1.25rem 3rem; }
.seitenkopf {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 0.75rem; margin-bottom: 1.25rem;
}
.seiten-hinweis { color: var(--tinte-2); margin: -0.5rem 0 1.25rem; max-width: 60rem; }
.monatswahl { display: flex; align-items: center; gap: 0.5rem; }
.monat-titel { font-weight: 600; min-width: 9.5rem; text-align: center; }
.monat-pfeil {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2rem; height: 2rem; border-radius: 8px; text-decoration: none;
  color: var(--tinte-2); border: 1px solid var(--linie); background: var(--karte);
  font-size: 1.1rem;
}
.monat-pfeil:hover { color: var(--tinte); border-color: var(--tinte-3); }

/* Kacheln */
.kacheln {
  display: grid; gap: 0.9rem; margin-bottom: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(11.5rem, 1fr));
}
.kachel {
  background: var(--karte); border: 1px solid var(--rand);
  border-radius: 12px; padding: 0.9rem 1.1rem;
}
.kachel-label { color: var(--tinte-2); font-size: 0.85rem; }
.kachel-wert { font-size: 1.45rem; font-weight: 700; margin-top: 0.15rem; }
.kachel-detail { color: var(--tinte-3); font-size: 0.8rem; margin-top: 0.2rem; }
.plus { color: var(--gut); }
.minus { color: var(--schlecht); }

/* Karten & Diagramme */
.karte {
  background: var(--karte); border: 1px solid var(--rand);
  border-radius: 12px; padding: 1.1rem 1.25rem; margin-bottom: 1.25rem;
}
.diagramm-reihe {
  display: grid; gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
}
.diagramm { min-height: 260px; }
.karten-kopf {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 0.6rem; margin-bottom: 0.5rem;
}
.karten-kopf h2 { margin: 0; }
.karten-hinweis { color: var(--tinte-3); font-weight: 400; font-size: 0.85rem; }
.leer-hinweis { color: var(--tinte-3); }

.legende { display: flex; gap: 1.1rem; flex-wrap: wrap; margin-top: 0.6rem; font-size: 0.85rem; color: var(--tinte-2); }
.legende-eintrag { display: inline-flex; align-items: center; gap: 0.4rem; }
.legende-punkt { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }

/* Tabellen */
.tabelle { width: 100%; border-collapse: collapse; }
.tabelle th {
  text-align: left; color: var(--tinte-3); font-size: 0.8rem;
  font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em;
  padding: 0.45rem 0.6rem; border-bottom: 1px solid var(--linie);
}
.tabelle td { padding: 0.5rem 0.6rem; border-bottom: 1px solid var(--linie); }
.tabelle tr:last-child td { border-bottom: none; }
.tabelle tr:hover td { background: var(--flaeche); }
.rechts { text-align: right; }
td.rechts { font-variant-numeric: tabular-nums; }
.badge {
  font-size: 0.7rem; padding: 0.1rem 0.45rem; border-radius: 999px;
  border: 1px solid var(--linie); color: var(--tinte-3); vertical-align: middle;
}

/* Formulare */
.buchung-formular {
  display: flex; flex-wrap: wrap; gap: 0.9rem; align-items: flex-end;
}
.buchung-formular label {
  display: flex; flex-direction: column; gap: 0.25rem;
  font-size: 0.85rem; color: var(--tinte-2); min-width: 8.5rem; flex: 1;
}
.buchung-formular label.breit { flex: 2; min-width: 14rem; }
input, select {
  padding: 0.5rem 0.65rem; border: 1px solid var(--linie); border-radius: 8px;
  background: var(--flaeche); color: var(--tinte); font: inherit;
}
input:focus, select:focus { outline: 2px solid var(--akzent); outline-offset: 1px; border-color: transparent; }
button {
  padding: 0.55rem 1.2rem; border: none; border-radius: 8px;
  background: var(--akzent); color: #fff; font: inherit; font-weight: 600; cursor: pointer;
}
button:hover { filter: brightness(1.08); }
.knopf-sekundaer {
  text-decoration: none; font-size: 0.9rem; padding: 0.4rem 0.9rem;
  border: 1px solid var(--linie); border-radius: 8px; color: var(--tinte-2); background: var(--karte);
}
.knopf-sekundaer:hover { color: var(--tinte); border-color: var(--tinte-3); }
.knopf-klein { padding: 0.35rem 0.7rem; font-size: 0.85rem; }
.knopf-loeschen {
  background: none; color: var(--tinte-3); padding: 0.2rem 0.5rem; font-weight: 400;
}
.knopf-loeschen:hover { color: var(--schlecht); filter: none; }
.inline-formular { display: inline-flex; gap: 0.4rem; align-items: center; }
.betrag-eingabe { width: 7rem; text-align: right; font-variant-numeric: tabular-nums; }
.status-knopf { padding: 0.25rem 0.8rem; font-size: 0.8rem; border-radius: 999px; }
.status-knopf.an { background: var(--gut); }
.status-knopf.aus { background: var(--tinte-3); }

/* Filter-Chips */
.filter-reihe { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.filter-chip {
  text-decoration: none; font-size: 0.85rem; padding: 0.25rem 0.8rem;
  border-radius: 999px; border: 1px solid var(--linie); color: var(--tinte-2);
}
.filter-chip.aktiv { background: var(--akzent); border-color: var(--akzent); color: #fff; font-weight: 600; }

/* Meldungen */
.meldung {
  padding: 0.6rem 1rem; border-radius: 10px; margin-bottom: 1rem;
  border: 1px solid var(--rand); background: var(--karte);
}
.meldung-ok { border-left: 4px solid var(--gut); }
.meldung-fehler { border-left: 4px solid var(--schlecht); }

/* Anmeldung */
.login-buehne { min-height: 85vh; display: grid; place-items: center; }
.login-karte {
  background: var(--karte); border: 1px solid var(--rand); border-radius: 16px;
  padding: 2.25rem 2.5rem; width: min(24rem, 92vw);
  display: flex; flex-direction: column; gap: 0.9rem;
}
.login-logo { font-size: 2.2rem; text-align: center; }
.login-karte h1 { text-align: center; }
.login-untertitel { color: var(--tinte-2); text-align: center; margin: -0.4rem 0 0.4rem; font-size: 0.9rem; }
.login-karte label { display: flex; flex-direction: column; gap: 0.3rem; font-size: 0.9rem; color: var(--tinte-2); }
.login-karte button { margin-top: 0.4rem; }

/* Tooltip für Diagramme */
.tooltip {
  position: fixed; z-index: 50; pointer-events: none;
  background: var(--karte); color: var(--tinte);
  border: 1px solid var(--rand); border-radius: 8px;
  padding: 0.4rem 0.65rem; font-size: 0.85rem;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
}
.tooltip .t-titel { font-weight: 600; }
.tooltip .t-zeile { color: var(--tinte-2); white-space: nowrap; }

/* ---------- Mobil (Smartphones) ---------- */
@media (max-width: 720px) {
  .kopf-innen { flex-wrap: wrap; gap: 0.5rem; padding: 0.5rem 0.9rem; }
  .kopf nav {
    order: 3; flex: 0 0 100%; overflow-x: auto; flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
  }
  .kopf nav::-webkit-scrollbar { display: none; }
  .kopf nav a { white-space: nowrap; }
}

@media (max-width: 640px) {
  body { font-size: 16px; } /* verhindert Auto-Zoom von iOS bei Eingabefeldern */
  .inhalt { padding: 1rem 0.9rem 2.5rem; }
  .seitenkopf { margin-bottom: 0.9rem; }
  .monatswahl { width: 100%; justify-content: space-between; }
  .monat-pfeil { width: 2.6rem; height: 2.6rem; }

  .kacheln { grid-template-columns: repeat(2, 1fr); gap: 0.6rem; }
  .kachel { padding: 0.7rem 0.85rem; }
  .kachel-wert { font-size: 1.15rem; }

  .buchung-formular label, .buchung-formular label.breit { flex: 1 1 100%; min-width: 0; }
  .buchung-formular button[type="submit"] { width: 100%; padding: 0.75rem; }
  input, select { padding: 0.65rem 0.75rem; }

  /* Tabellen werden zu Karten: Kopfzeile weg, jede Zeile ein kleines Raster. */
  .karten-tabelle, .karten-tabelle tbody { display: block; }
  .karten-tabelle thead { display: none; }
  .karten-tabelle tr {
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-areas:
      "datum person aktion"
      "kategorie kategorie betrag"
      "beschreibung beschreibung beschreibung";
    column-gap: 0.6rem; row-gap: 0.15rem;
    padding: 0.65rem 0; border-bottom: 1px solid var(--linie);
  }
  .karten-tabelle tr:last-child { border-bottom: none; }
  .karten-tabelle tr:hover td { background: none; }
  .karten-tabelle td { display: block; padding: 0; border: none; }
  .t-datum { grid-area: datum; color: var(--tinte-3); font-size: 0.8rem; }
  .t-person { grid-area: person; color: var(--tinte-3); font-size: 0.8rem; }
  .t-person::before { content: "· "; }
  .t-kategorie { grid-area: kategorie; font-weight: 600; }
  .t-beschreibung { grid-area: beschreibung; color: var(--tinte-2); font-size: 0.9rem; }
  .t-betrag { grid-area: betrag; font-weight: 600; align-self: center; }
  .t-status { grid-area: status; }
  .t-aktion { grid-area: aktion; }
  .knopf-loeschen { padding: 0.3rem 0.7rem; font-size: 1rem; }

  /* Daueraufträge: zusätzlich Status-Zeile und Betrag-Formular in voller Breite. */
  .da-karten tr {
    grid-template-areas:
      "datum person aktion"
      "kategorie kategorie status"
      "beschreibung beschreibung beschreibung"
      "betrag betrag betrag";
  }
  .da-karten .t-datum::before { content: "Tag "; }
  .da-karten .t-person::before { content: "· "; }
  .da-karten .t-betrag { margin-top: 0.4rem; }
  .da-karten .t-betrag .inline-formular { display: flex; width: 100%; }
  .da-karten .betrag-eingabe { flex: 1; width: auto; min-width: 0; }
}