/* Haushaltsbuch - Weboberfläche.
   Bewusst große Schrift und große Flächen: die App wird von älteren Augen und
   Fingern bedient. Farben wie in der Android-App (Grün/Rot/Blau). */

:root {
  --gruen: #2E7D32;
  --rot: #C62828;
  --blau: #1565C0;
  --tinte: #111111;
  --grau: #6B6B6B;
  --hellgrau: #EEEEEE;
  --rand: #CFCFCF;
  --grund: #FAFAFA;
  --flaeche: #FFFFFF;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--grund);
  color: var(--tinte);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 18px;
  line-height: 1.35;
  /* Auf dem iPhone nicht unter die Systemleisten rutschen */
  padding: env(safe-area-inset-top) env(safe-area-inset-right)
           env(safe-area-inset-bottom) env(safe-area-inset-left);
}

button { font-family: inherit; }

.seite {
  max-width: 640px;
  margin: 0 auto;
  padding: 16px 16px 120px;
}

/* ---------- Monatsleiste ---------- */

.monatsleiste {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.pfeil {
  width: 52px;
  height: 52px;
  flex: 0 0 auto;
  border: none;
  border-radius: 50%;
  background: #E3EFE3;
  color: var(--gruen);
  font-size: 30px;
  line-height: 1;
  cursor: pointer;
}
.pfeil:active { background: #CFE3CF; }

.monatsname {
  flex: 1 1 auto;
  border: none;
  background: none;
  font-size: 26px;
  font-weight: 700;
  color: var(--tinte);
  padding: 6px 8px;
  cursor: pointer;
  transition: transform 120ms ease-out;
  -webkit-tap-highlight-color: transparent;
}
.monatsname.aktuell { color: var(--gruen); }
.monatsname:active { transform: scale(1.15); }

/* ---------- Die drei Summen ---------- */

/* Beschriftung links, Betrag rechts in einer Zeile - so bleibt unter den drei
   Karten genug Platz, dass man die Buchungen ohne Scrollen sieht. */
.karte {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  border-radius: 12px;
  padding: 10px 16px;
  margin-top: 8px;
  color: #FFFFFF;
}
.karte.gruen { background: var(--gruen); }
.karte.rot   { background: var(--rot); }
.karte.blau  { background: var(--blau); }

.karte-titel  { font-size: 18px; }
.karte-betrag { font-size: 26px; font-weight: 700; white-space: nowrap; }

/* ---------- Knöpfe mit Rand ---------- */

.knopf-rand {
  display: block;
  width: 100%;
  margin-top: 10px;
  padding: 12px 16px;
  border: 1px solid var(--rand);
  border-radius: 10px;
  background: var(--flaeche);
  color: var(--gruen);
  font-size: 18px;
  cursor: pointer;
}
.knopf-rand:active { background: #F0F0F0; }
.versteckt { display: none; }

/* ---------- Buchungsliste ---------- */

.abschnitt { font-size: 23px; margin: 18px 0 4px; }

.hinweis { color: var(--grau); font-size: 16px; margin: 4px 0 10px; }
.hinweis.gross { font-size: 20px; }

.buchung {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  text-align: left;
  background: var(--flaeche);
  border: 1px solid #E4E4E4;
  border-radius: 12px;
  padding: 14px 10px 14px 20px;
  margin-bottom: 12px;
}

/* Die ganze Zeile ist ein Knopf zum Bearbeiten - deshalb müssen die
   Standard-Eigenschaften eines Knopfes (Rahmen, zentrierter Text) weg. */
.buchung-text {
  flex: 1 1 auto;
  min-width: 0;
  cursor: pointer;
  border: none;
  background: none;
  padding: 0;
  font-family: inherit;
  color: inherit;
  text-align: left;
}
.buchung-titel {
  font-size: 21px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.buchung-unten {
  display: flex;
  font-size: 15px;
  color: var(--grau);
  margin-top: 2px;
  white-space: nowrap;
}
.buchung-kategorie { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.buchung-datum { flex: 0 0 auto; margin-left: 5px; }

.buchung-betrag { font-size: 21px; font-weight: 700; white-space: nowrap; }
.buchung-betrag.wert-plus  { color: var(--gruen); }
.buchung-betrag.wert-minus { color: var(--rot); }

.muell {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border: none;
  background: none;
  color: var(--grau);
  font-size: 22px;
  cursor: pointer;
  border-radius: 50%;
}
.muell:active { background: var(--hellgrau); }

/* ---------- Plus-Knopf ---------- */

.plus-knopf {
  position: fixed;
  right: calc(20px + env(safe-area-inset-right));
  bottom: calc(24px + env(safe-area-inset-bottom));
  width: 68px;
  height: 68px;
  border: none;
  border-radius: 50%;
  background: var(--gruen);
  color: #FFFFFF;
  font-size: 38px;
  line-height: 1;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .3);
  cursor: pointer;
}
.plus-knopf:active { background: #256428; }

/* ---------- Dialoge ---------- */

.ueberlagerung {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .45);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  z-index: 10;
}
.ueberlagerung[hidden] { display: none; }

.dialog {
  background: var(--flaeche);
  border-radius: 16px;
  padding: 20px;
  width: 100%;
  max-width: 480px;
  max-height: 90vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.dialog.schmal { max-width: 420px; }
.dialog h2 { font-size: 23px; margin: 0 0 16px; }

.dialog-text { font-size: 18px; margin: 0 0 16px; }
.dialog-text.klein { font-size: 15px; color: var(--grau); }

.dialog-knoepfe {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 20px;
}
.dialog-knoepfe.spalte { flex-direction: column; }

.text-knopf {
  border: none;
  background: none;
  color: var(--gruen);
  font-size: 19px;
  padding: 12px 14px;
  border-radius: 8px;
  cursor: pointer;
}
.text-knopf.stark { font-weight: 700; }
.text-knopf.gefahr { color: var(--rot); font-weight: 700; }
.text-knopf:disabled { color: #B5B5B5; cursor: default; }

/* ---------- Eingabefelder ---------- */

.zeile { display: flex; gap: 12px; }
.zeile > .feld { flex: 1 1 0; min-width: 0; }

.feld { display: block; margin-bottom: 16px; }
.feld-name { display: block; font-size: 15px; color: var(--grau); margin-bottom: 4px; }

.feld input {
  width: 100%;
  font-size: 19px;
  font-family: inherit;
  color: var(--tinte);
  background: var(--flaeche);
  padding: 12px 12px;
  border: 1px solid var(--rand);
  border-radius: 8px;
  /* Safari auf dem iPhone stylt Felder sonst eigenwillig */
  -webkit-appearance: none;
  appearance: none;
  min-height: 48px;
}
.feld input:focus { outline: 2px solid var(--gruen); outline-offset: -1px; }

.betrag-huelle { position: relative; display: block; }
.betrag-huelle input { padding-right: 34px; }
.euro {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 18px;
  color: var(--grau);
}

.zaehler {
  display: block;
  text-align: right;
  font-size: 14px;
  color: var(--grau);
  margin-top: 4px;
}

/* Bei Einnahmen bleibt das "Wofür?"-Feld unsichtbar stehen,
   damit der Dialog nicht springt - genau wie in der Android-App. */
#wofuerFeld.unsichtbar { visibility: hidden; }

/* ---------- Art und Kategorien ---------- */

.art-zeile { margin-bottom: 16px; }

.art-knopf {
  flex: 1 1 0;
  padding: 12px 8px;
  font-size: 18px;
  border: 1px solid var(--rand);
  border-radius: 22px;
  background: var(--flaeche);
  color: var(--tinte);
  cursor: pointer;
  min-height: 48px;
}
.art-knopf.gewaehlt { color: #FFFFFF; border-color: transparent; font-weight: 600; }
#artAusgabe.gewaehlt  { background: var(--rot); }
#artEinnahme.gewaehlt { background: var(--gruen); }

.kategorien {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 4px 0 16px;
}

.kategorie {
  padding: 12px 8px;
  font-size: 16px;
  text-align: center;
  border: 1px solid var(--rand);
  border-radius: 10px;
  background: var(--flaeche);
  color: var(--tinte);
  cursor: pointer;
  min-height: 46px;
}
.kategorie.gewaehlt {
  background: #E3EFE3;
  border-color: var(--gruen);
  color: var(--gruen);
  font-weight: 600;
}
/* Leere Platzhalter halten die Dialoghöhe konstant */
.kategorie.platzhalter { visibility: hidden; }

/* ---------- Monats-Verlauf ---------- */

.verlauf { max-height: 60vh; overflow-y: auto; padding-right: 6px; }

.verlauf-zeile { margin-bottom: 14px; }
.verlauf-kopf {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 17px;
  margin-bottom: 4px;
}
.verlauf-wert { font-weight: 700; }

.verlauf-massstab {
  height: 18px;
  background: var(--hellgrau);
  border-radius: 4px;
  overflow: hidden;
}
.verlauf-balken { height: 100%; border-radius: 4px; }
.verlauf-balken.wert-plus  { background: var(--gruen); }
.verlauf-balken.wert-minus { background: var(--rot); }

/* ---------- Kurze Meldung unten ---------- */

.meldung {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(28px + env(safe-area-inset-bottom));
  background: #333333;
  color: #FFFFFF;
  font-size: 17px;
  padding: 12px 18px;
  border-radius: 10px;
  z-index: 20;
  max-width: 90vw;
  text-align: center;
}
.meldung[hidden] { display: none; }

/* Das Datumsfeld teilt sich die Zeile mit dem Betrag - auf schmalen Handys
   wird es sonst zu eng für "18.08.2026" samt Kalendersymbol. */
#eingabeDatum { font-size: 17px; padding-left: 10px; padding-right: 6px; }

/* ---------- Erinnerung ans Ablesen ---------- */

/* Gelber Kasten unter der Monatsleiste - erscheint nur, wenn im laufenden
   Monat noch ein Zählerstand fehlt, und lässt sich für den Monat wegtippen. */
.zaehler-hinweis {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  padding: 10px 44px 10px 12px;
  border: 1px solid #E8B84B;
  border-radius: 12px;
  background: #FFF6E0;
  font-size: 17px;
}
.zaehler-hinweis-text { flex: 1 1 160px; font-size: 16px; }

.hinweis-knopf {
  padding: 8px 14px;
  border: none;
  border-radius: 8px;
  background: var(--gruen);
  color: #FFFFFF;
  font-size: 16px;
  cursor: pointer;
  min-height: 44px;
}
.hinweis-knopf:active { background: #256428; }

.hinweis-aus {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 50%;
  background: none;
  color: var(--grau);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
}
.hinweis-aus:active { background: #F0E3C2; }

/* ---------- Zähler ---------- */

.zaehler-karte {
  background: var(--flaeche);
  border: 1px solid #E4E4E4;
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 12px;
}

/* Die ganze Fläche ist ein Knopf zum Eintragen - deshalb müssen die
   Standard-Eigenschaften eines Knopfes (Rahmen, zentrierter Text) weg. */
.zaehler-haupt {
  display: block;
  width: 100%;
  border: none;
  background: none;
  padding: 0;
  font-family: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.zaehler-name { font-size: 21px; font-weight: 600; }
.zaehler-stand { font-size: 18px; margin-top: 4px; }
.zaehler-stand.fehlt { color: var(--rot); }
.zaehler-verbrauch { font-size: 16px; color: var(--grau); margin-top: 2px; }

.zaehler-aktionen {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}

.klein-knopf {
  flex: 0 0 auto;
  padding: 8px 14px;
  border: 1px solid var(--rand);
  border-radius: 8px;
  background: var(--flaeche);
  color: var(--gruen);
  font-size: 16px;
  cursor: pointer;
  min-height: 40px;
}
.klein-knopf:active { background: #F0F0F0; }

.zaehler-tipp {
  display: block;
  font-size: 14px;
  color: var(--grau);
  margin-top: 6px;
}

/* Art und Einheit im Zähler-Dialog: ausgewählt ist grün. Die roten und grünen
   Sonderfälle für Ausgabe/Einnahme stehen weiter oben und bleiben davon
   unberührt (ID schlägt Klasse). */
.art-knopf.gewaehlt { background: var(--gruen); }

/* Verbrauch ist weder gut noch schlecht - deshalb blau statt grün/rot. */
.verlauf-balken.wert-neutral { background: var(--blau); }

.knopf-rand.gefahr { color: var(--rot); border-color: #E9B4B4; }

/* Warnung im Zählerstand-Dialog (Stand kleiner als zuletzt) - fällt auf, ohne
   das Speichern zu verbieten: ein Zählerwechsel ist ja möglich. */
.dialog-text.warnung { color: var(--rot); }

/* ---------- Reiter: Geld / Verbrauch ---------- */

/* Der ausgewählte Reiter ist grün UND fett UND unterstrichen - so bleibt er
   auch ohne Farbwahrnehmung eindeutig zu erkennen. */
.reiter {
  display: flex;
  gap: 4px;
  margin-top: 18px;
  border-bottom: 2px solid var(--rand);
}

.reiter-knopf {
  flex: 1 1 0;
  min-height: 56px;
  padding: 14px 8px;
  border: none;
  border-bottom: 4px solid transparent;
  margin-bottom: -2px;
  background: none;
  color: var(--grau);
  font-size: 20px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.reiter-knopf.aktiv {
  color: var(--gruen);
  font-weight: 700;
  border-bottom-color: var(--gruen);
}
.reiter-knopf:active { background: #F0F0F0; }

/* Die erste Karte steht direkt unter den Reitern */
#bereichGeld .karte:first-child { margin-top: 16px; }

#zaehlerEinleitung { margin-top: 16px; }
#bereichVerbrauch .zaehler-karte:first-of-type { margin-top: 4px; }

/* ---------- Zähler anlegen: ein Tipp je Art ---------- */

.zaehler-arten {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 4px 0 8px;
}

.art-gross {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  width: 100%;
  min-height: 66px;
  padding: 14px 18px;
  border: 1px solid var(--rand);
  border-radius: 12px;
  background: var(--flaeche);
  color: var(--tinte);
  font-size: 21px;
  text-align: left;
  cursor: pointer;
}
.art-gross:active { background: #E3EFE3; }
.art-einheit { font-size: 15px; color: var(--grau); }

/* ---------- Verbrauch je Monat als Tabelle ---------- */

.tabelle-huelle {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-bottom: 24px;
}

.verbrauchstabelle {
  width: 100%;
  border-collapse: collapse;
  font-size: 16px;
}
.verbrauchstabelle th,
.verbrauchstabelle td {
  padding: 8px 6px;
  text-align: left;
  white-space: nowrap;
  border-bottom: 1px solid #E4E4E4;
}
.verbrauchstabelle th {
  position: sticky;
  top: 0;
  background: var(--grund);
  font-size: 15px;
  font-weight: 600;
  color: var(--grau);
  vertical-align: bottom;
}
/* Lange Zählernamen dürfen umbrechen, damit die Tabelle aufs Handy passt */
.verbrauchstabelle th.zahl {
  max-width: 92px;
  white-space: normal;
  overflow-wrap: anywhere;
}
.verbrauchstabelle th.zahl,
.verbrauchstabelle td.zahl { text-align: right; }

.spalten-einheit {
  display: block;
  font-size: 13px;
  font-weight: 400;
  color: var(--grau);
}

.verbrauchstabelle tbody tr:nth-child(even) { background: #FAFAFA; }
/* Der oben gewählte Monat ist in der Tabelle hervorgehoben */
.verbrauchstabelle tr.jetzt { background: #E3EFE3; font-weight: 600; }
.verbrauchstabelle tr.schnitt {
  background: #F0F0F0;
  font-weight: 700;
}
.verbrauchstabelle tr.schnitt td { border-bottom: none; }