/* Haushaltsplan — Gestaltung
 *
 * ══════════════════════════════════════════════════════════════════════════════════════
 * WORAN SICH DAS HÄLT, UND WORAN NICHT
 * ══════════════════════════════════════════════════════════════════════════════════════
 *
 * Julian: „designtechnisch kannst du dich komplett auslassen … du musst dich nicht an
 * Petreechor oder sonstiges halten." Der Gestaltungsbaukasten des Hauses gilt hier also
 * NICHT. Übernommen sind trotzdem seine eigenen Farbwerte aus `haushaltsplan.html` — sie
 * sind gut gewählt (warme Neutraltöne, ein Blau und ein Orange als Reihen, ein Grün für
 * „bleibt übrig"), und sie sind ihm vertraut.
 *
 * 🔴 HANDY ZUERST, und das ist keine Floskel: Ein Haushaltsplan wird abends auf dem Sofa
 * angesehen, nicht am Schreibtisch. Die Grundgestaltung ist deshalb eine Spalte mit
 * Karten; Tabellen entstehen erst ab 900 px. Andersherum — Tabelle zuerst, dann für das
 * Handy zusammenquetschen — entsteht eine Tabelle, die seitlich scrollt, und darin findet
 * niemand seine Stromrechnung.
 *
 * ⚠️ Zahlenfelder tragen `inputmode="decimal"`: Auf dem iPhone erscheint damit die
 * Zifferntastatur mit Komma statt der Volltastatur. Ohne das tippt man dreißig Beträge
 * über eine Buchstabentastatur.
 */

:root {
  color-scheme: light;
  --grund: #f9f9f7;
  --karte: #fcfcfb;
  --feld: #ffffff;
  --schrift: #0b0b0b;
  --schrift-zwei: #52514e;
  --leise: #898781;
  --linie: rgba(11, 11, 11, 0.1);
  --linie-stark: rgba(11, 11, 11, 0.16);
  --raster: #e1e0d9;
  --reihe-a: #2a78d6;
  --reihe-b: #eb6834;
  --rest: #1baf7a;
  --gut: #0ca30c;
  --warnt: #fab219;
  --ernst: #ec835a;
  --schlimm: #d03b3b;
  --schweben: rgba(11, 11, 11, 0.04);
  --radius: 14px;
  --radius-klein: 9px;
  --schatten: 0 1px 2px rgba(11, 11, 11, 0.04), 0 8px 24px -12px rgba(11, 11, 11, 0.12);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-thema='hell']) {
    color-scheme: dark;
    --grund: #0d0d0d;
    --karte: #1a1a19;
    --feld: #232322;
    --schrift: #ffffff;
    --schrift-zwei: #c3c2b7;
    --leise: #898781;
    --linie: rgba(255, 255, 255, 0.1);
    --linie-stark: rgba(255, 255, 255, 0.18);
    --raster: #2c2c2a;
    --reihe-a: #3987e5;
    --reihe-b: #d95926;
    --rest: #199e70;
    --schweben: rgba(255, 255, 255, 0.06);
    --schatten: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px -12px rgba(0, 0, 0, 0.6);
  }
}

:root[data-thema='dunkel'] {
  color-scheme: dark;
  --grund: #0d0d0d;
  --karte: #1a1a19;
  --feld: #232322;
  --schrift: #ffffff;
  --schrift-zwei: #c3c2b7;
  --leise: #898781;
  --linie: rgba(255, 255, 255, 0.1);
  --linie-stark: rgba(255, 255, 255, 0.18);
  --raster: #2c2c2a;
  --reihe-a: #3987e5;
  --reihe-b: #d95926;
  --rest: #199e70;
  --schweben: rgba(255, 255, 255, 0.06);
  --schatten: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px -12px rgba(0, 0, 0, 0.6);
}

* {
  box-sizing: border-box;
}

html {
  /* Kein Zoom-Sprung beim Drehen des iPhones. */
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  /* Systemschriften: keine geladene Schrift, kein fremder Host, kein Aufblitzen von
     unformatiertem Text. Bei einer privaten Fläche ist das die richtige Wahl. */
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: var(--schrift);
  background: var(--grund);
  /* Die Sicherheitsabstände des iPhones (Notch, Home-Balken). */
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom)
    env(safe-area-inset-left);
}

h1,
h2,
h3 {
  margin: 0;
  font-weight: 600;
  letter-spacing: -0.011em;
}
h1 {
  font-size: 1.35rem;
}
h2 {
  font-size: 1.05rem;
}
h3 {
  font-size: 0.94rem;
}

.huelle {
  max-width: 1180px;
  margin: 0 auto;
  padding: 14px 14px 96px;
}

/* ── Kopfleiste ─────────────────────────────────────────────────────────── */

.kopf {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  padding: 10px 14px;
  margin: 0 -14px 14px;
  background: color-mix(in srgb, var(--grund) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--linie);
}
.kopf .titel {
  display: flex;
  flex-direction: column;
  min-width: 0;
  margin-right: auto;
}
.kopf .titel small {
  color: var(--leise);
  font-size: 0.78rem;
}
.kopf .titel strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
}

/* ── Karten ─────────────────────────────────────────────────────────────── */

.karte {
  background: var(--karte);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  box-shadow: var(--schatten);
  padding: 14px;
  margin-bottom: 14px;
}
.karte > header {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: baseline;
  margin-bottom: 10px;
}
.karte > header .hin {
  margin-left: auto;
  color: var(--leise);
  font-size: 0.82rem;
}
.hinweis {
  color: var(--schrift-zwei);
  font-size: 0.86rem;
  margin: 4px 0 0;
}

/* ── Kennzahlen ─────────────────────────────────────────────────────────── */

.kacheln {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
@media (min-width: 720px) {
  .kacheln {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
.kachel {
  border: 1px solid var(--linie);
  border-radius: var(--radius-klein);
  padding: 10px 12px;
  background: var(--grund);
}
.kachel .marke {
  display: block;
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--leise);
}
.kachel .wert {
  display: block;
  margin-top: 2px;
  font-size: clamp(1.15rem, 4.6vw, 1.6rem);
  font-weight: 600;
  /* Tabellenziffern: Beim Tippen springt die Zahl sonst in der Breite. */
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}
.kachel .fuss {
  display: block;
  font-size: 0.76rem;
  color: var(--leise);
}
.kachel[data-ton='gut'] .wert {
  color: var(--gut);
}
.kachel[data-ton='schlimm'] .wert {
  color: var(--schlimm);
}
.kachel[data-ton='warnt'] .wert {
  color: var(--warnt);
}
.kachel[data-ton='rest'] .wert {
  color: var(--rest);
}

/* ── Zeilen: Handy = Karte, ab 900px = Tabelle ──────────────────────────── */

.gruppe {
  border: 1px solid var(--linie);
  border-radius: var(--radius-klein);
  margin-bottom: 10px;
  overflow: hidden;
}
.gruppe > summary {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 11px 12px;
  cursor: pointer;
  background: var(--grund);
  font-weight: 600;
  list-style: none;
}
.gruppe > summary::-webkit-details-marker {
  display: none;
}
.gruppe > summary .pfeil {
  transition: transform 0.15s ease;
  color: var(--leise);
}
.gruppe[open] > summary .pfeil {
  transform: rotate(90deg);
}
.gruppe > summary .summe {
  margin-left: auto;
  font-variant-numeric: tabular-nums;
  color: var(--schrift-zwei);
  font-weight: 600;
}
.gruppe[data-art='sparen'] > summary {
  box-shadow: inset 3px 0 0 var(--rest);
}
.gruppe .koerper {
  padding: 8px 10px 12px;
}

.zeile {
  display: grid;
  gap: 6px 8px;
  grid-template-columns: 1fr auto;
  align-items: center;
  padding: 8px 2px;
  border-top: 1px solid var(--linie);
}
.zeile:first-child {
  border-top: 0;
}
.zeile .bez {
  grid-column: 1 / -1;
}
.zeile .felder {
  grid-column: 1 / -1;
  display: grid;
  gap: 6px;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
}
.zeile .felder.drei {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.1fr);
}
.zeile .monat {
  grid-column: 1 / -1;
  font-size: 0.8rem;
  color: var(--leise);
  font-variant-numeric: tabular-nums;
}
.zeile .weg {
  grid-row: 1;
  grid-column: 2;
}

/* 🔴 Diese Regel muss VOR der Medienabfrage stehen, nicht danach.
 *
 * Sie stand zuerst dahinter — und bei gleicher Spezifitaet gewinnt die SPAETERE Regel,
 * unabhaengig von der Medienabfrage. Ergebnis: Die Spaltenkoepfe erschienen auf dem Rechner
 * NIE, obwohl die Medienabfrage sie auf `grid` setzte. Am laufenden System bei 953 px
 * gemessen (`display: none`), nicht im Kopf gefunden. */
.kopfzeile {
  display: none;
}

@media (min-width: 900px) {
  .zeile {
    grid-template-columns: minmax(0, 2.2fr) 7.5rem 8.5rem 9rem 6.5rem 2rem;
    align-items: center;
    gap: 8px;
  }
  .zeile .bez,
  .zeile .felder,
  .zeile .monat,
  .zeile .weg {
    grid-column: auto;
    grid-row: auto;
  }
  .zeile .felder {
    display: contents;
  }
  .zeile .monat {
    text-align: right;
    /* Kein Umbruch: „4.800,00 € / Monat" brach zweizeilig um und die Zeile wurde hoeher als
       alle anderen. Der Zusatz „/ Monat" faellt hier ohnehin weg — er steht im Spaltenkopf. */
    white-space: nowrap;
  }
  .zeile .monat .je {
    display: none;
  }
  .kopfzeile {
    display: grid;
    grid-template-columns: minmax(0, 2.2fr) 7.5rem 8.5rem 9rem 6.5rem 2rem;
    gap: 8px;
    padding: 0 2px 6px;
    font-size: 0.74rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--leise);
  }
  .kopfzeile .r {
    text-align: right;
  }
}

/* ── Felder ─────────────────────────────────────────────────────────────── */

input,
select,
button,
textarea {
  font: inherit;
  color: inherit;
}

input[type='text'],
input[type='password'],
input.betrag,
select {
  width: 100%;
  min-width: 0;
  padding: 9px 10px;
  background: var(--feld);
  border: 1px solid var(--linie-stark);
  border-radius: 9px;
  /* 🔴 16px Mindestgröße: Alles darunter lässt iOS Safari beim Fokus HINEINZOOMEN, und
     danach steht die Seite verschoben. Der häufigste Formularfehler auf dem iPhone. */
  font-size: 16px;
}
input.betrag {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
input:focus-visible,
select:focus-visible,
button:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--reihe-a);
  outline-offset: 2px;
}
input[aria-invalid='true'],
input:user-invalid {
  border-color: var(--schlimm);
}
.mangel {
  color: var(--schlimm);
  font-size: 0.82rem;
  margin-top: 4px;
}
.pflicht {
  color: var(--schlimm);
  font-weight: 600;
}

/* ── Knöpfe ─────────────────────────────────────────────────────────────── */

button {
  cursor: pointer;
  border-radius: 10px;
  border: 1px solid var(--linie-stark);
  background: var(--karte);
  padding: 9px 14px;
  font-weight: 500;
  /* 44px Zielgröße: Apples eigene Mindestangabe für Fingerbedienung. */
  min-height: 44px;
}
button:hover {
  background: var(--schweben);
}
button.haupt {
  background: var(--schrift);
  color: var(--grund);
  border-color: var(--schrift);
}
button.haupt:hover {
  opacity: 0.9;
  background: var(--schrift);
}
button.stumm {
  border-color: transparent;
  background: transparent;
  color: var(--schrift-zwei);
  padding: 6px 8px;
  min-height: 36px;
}
button.stumm:hover {
  background: var(--schweben);
}
button.weg {
  border: 0;
  background: transparent;
  color: var(--leise);
  padding: 4px 6px;
  min-height: 36px;
  min-width: 36px;
  font-size: 1.1rem;
  line-height: 1;
}
button.weg:hover {
  color: var(--schlimm);
  background: var(--schweben);
}

/* ── Balken und Trend ──────────────────────────────────────────────────── */

.balken {
  display: flex;
  height: 12px;
  border-radius: 999px;
  overflow: hidden;
  background: var(--raster);
  margin: 8px 0 4px;
}
.balken span {
  display: block;
  height: 100%;
}
.legende {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  font-size: 0.8rem;
  color: var(--schrift-zwei);
}
.legende i {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 3px;
  margin-right: 5px;
  vertical-align: baseline;
}

svg.trend {
  width: 100%;
  height: auto;
  display: block;
  /* Ohne das quetscht Safari die SVG bei schmalen Fenstern. */
  overflow: visible;
}

/* ── Anmeldung ──────────────────────────────────────────────────────────── */

.tor {
  min-height: 78vh;
  display: grid;
  place-items: center;
  padding: 16px;
}
.tor .karte {
  width: 100%;
  max-width: 380px;
  margin: 0;
}
.tor h1 {
  margin-bottom: 4px;
}

/* ── Planauswahl ────────────────────────────────────────────────────────── */

.plaene {
  display: grid;
  gap: 12px;
  grid-template-columns: 1fr;
}
@media (min-width: 700px) {
  .plaene {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  }
}
.planwahl {
  text-align: left;
  width: 100%;
  padding: 14px;
  border-radius: var(--radius);
  background: var(--karte);
  border: 1px solid var(--linie);
  box-shadow: var(--schatten);
  display: grid;
  gap: 4px;
  min-height: 0;
}
.planwahl .name {
  font-weight: 600;
  font-size: 1.02rem;
}
.planwahl .wer {
  color: var(--leise);
  font-size: 0.84rem;
}
.planwahl .zahlen {
  margin-top: 6px;
  display: flex;
  gap: 12px;
  font-size: 0.84rem;
  color: var(--schrift-zwei);
  font-variant-numeric: tabular-nums;
  flex-wrap: wrap;
}

/* ── Melder ─────────────────────────────────────────────────────────────── */

.melder {
  position: fixed;
  left: 50%;
  bottom: calc(16px + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  z-index: 60;
  background: var(--schrift);
  color: var(--grund);
  padding: 10px 16px;
  border-radius: 999px;
  box-shadow: var(--schatten);
  font-size: 0.88rem;
  max-width: calc(100vw - 32px);
  text-align: center;
}
.melder[hidden] {
  display: none;
}

.leer {
  color: var(--leise);
  font-size: 0.88rem;
  padding: 10px 2px;
}

.reihe {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.rechts {
  margin-left: auto;
}
.abstand {
  margin-top: 12px;
}

@media print {
  .kopf,
  button,
  .melder {
    display: none !important;
  }
  .karte {
    box-shadow: none;
    break-inside: avoid;
  }
}