/* Mietbiene Prototyp — Bordeaux-Welt, Werte 1:1 aus den Design-Vorlagen (design/Bordeaux*.dc.html) */
/* Die Token liegen in ../designsystem/tokens/tokens.css -- EINE Quelle der Wahrheit,
   nach dem Muster von formundfrist (App-Engine/designsystem/). Hier werden keine
   Farb- oder Groessenwerte mehr hart gesetzt; wer einen Wert aendern will, aendert
   ihn dort. Bens Ansage 31.08.: "Dann haben wir eine Designsprache ueber alles." */
@import url("tokens.css");

/* ---------- Roboto Slab: die Schrift der Wortmarke ----------
   Selbst gehostet, kein Google-CDN (DSGVO). Auf die Zeichen gekuerzt, die
   deutsche Oberflaechen brauchen: 14 kB statt 169 kB je Schnitt.
   Lizenz und Herkunft: designsystem/schriften/LIZENZ.md */
@font-face {
  font-family: "Roboto Slab"; font-style: normal; font-weight: 500;
  font-display: swap;
  src: url("schriften/RobotoSlab-Medium.woff2") format("woff2"),
       url("schriften/RobotoSlab-Medium.woff") format("woff");
}
@font-face {
  font-family: "Roboto Slab"; font-style: normal; font-weight: 700;
  font-display: swap;
  src: url("schriften/RobotoSlab-Bold.woff2") format("woff2"),
       url("schriften/RobotoSlab-Bold.woff") format("woff");
}

/* Bordeaux (Zweitwelt): --held:#6E0F2E; --verlauf:linear-gradient(135deg,#5E0B27,#9E2747);
   --karten-ton:#FBF5F7; --akzent-bg:#F6E3E9; --hero-label:#D9A3B2; --balken:#E4708F; --trenner:#F1E3E9; */

* { box-sizing: border-box; }

/* Das HTML-Attribut `hidden` bedeutet "nicht da". Sein Standard-`display: none`
   traegt aber nur die Spezifitaet eines Typselektors -- jede Klassenregel mit
   eigenem `display` gewinnt dagegen. Genau so blieb am 06.09.2026 die
   Einheitenliste sichtbar, obwohl der Reiter "Zahlungen" offen war.
   Deshalb hier einmal hart, statt es an jeder Klasse einzeln nachzuziehen. */
[hidden] { display: none !important; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--tinte);
  min-height: 100vh;
}

#app {
  max-width: 480px;
  margin: 0 auto;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  padding-bottom: calc(var(--tabs-h) + var(--space-3));
}

/* ---------- Hero (dunkle Kopffläche, Karten schieben sich hinein) ---------- */
.hero {
  background: var(--verlauf);
  color: var(--hero-text);
  padding: 18px 22px 52px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.hero.knapp { padding-bottom: 42px; gap: 10px; }
.hero .kopfzeile { display: flex; justify-content: space-between; align-items: center; }
.hero .kopfzeile .gruss { font-size: var(--t-seitentitel); font-weight: 800; letter-spacing: -0.01em; }
.hero .rundknopf {
  width: 34px; height: 34px; border-radius: 999px; border: none; cursor: pointer;
  background: rgba(255,255,255,0.14); color: var(--hero-text);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.hero .zurueckzeile { display: flex; align-items: center; gap: 12px; }
.hero .zurueckzeile .titel { font-size: var(--t-seitentitel); font-weight: 800; letter-spacing: -0.01em; line-height: 1.2; }
.hero .zurueckzeile button {
  background: rgba(255,255,255,0.14); border: none; cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px;
  min-height: var(--ziel-min); padding: 0 var(--space-4) 0 var(--space-3);
  border-radius: var(--radius-pill);
  color: var(--hero-text); font-family: inherit;
  font-size: var(--t-label); font-weight: 700;
}
.hero .zurueckzeile button:hover { background: rgba(255,255,255,0.22); }
.hero .zurueckzeile { flex-wrap: wrap; gap: 10px 12px; }
.hero .zurueckzeile .titel { flex-basis: 100%; }
.hero .label { font-size: var(--t-label); color: var(--hero-label); font-weight: 600; }
.hero .zahl { font-size: var(--t-kennzahl); font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.hero .unter { font-size: var(--t-label); color: var(--hero-label); font-weight: 600; }
.hero .stapel { display: flex; flex-direction: column; gap: 3px; }
.hero .balken { height: 8px; border-radius: 999px; background: rgba(255,255,255,0.16); }
.hero .balken > div { height: 8px; border-radius: 999px; background: var(--balken); }

/* ---------- Inhalt & Karten ---------- */
.inhalt {
  flex-grow: 1;
  background: var(--blatt);
  border-radius: 22px 22px 0 0;
  margin-top: -30px;
  padding: 20px 16px 150px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.hero.knapp + .inhalt { margin-top: -22px; }
.karte {
  background: var(--karte);
  border-radius: 18px;
  padding: 16px;
}
.liste {
  background: var(--karte);
  border-radius: 18px;
  padding: 6px 4px;
  display: flex;
  flex-direction: column;
}
.reihe {
  display: flex; align-items: center; gap: 12px;
  padding: 13px 14px;
  min-height: var(--ziel-min);   /* einzeilige Zeilen ohne Kachel waren 46-47 px (gemessen 10.09.2026) */
  border-bottom: 1px solid var(--trenner);
  background: none; border-left: none; border-right: none; border-top: none;
  font-family: inherit; text-align: left; width: 100%; cursor: default;
}
.reihe:last-child { border-bottom: none; }
button.reihe { cursor: pointer; }
.kachel {
  width: 40px; height: 40px; border-radius: 12px; flex-shrink: 0;
  background: var(--akzent-bg);
  display: flex; align-items: center; justify-content: center;
}
.kachel.warn { background: var(--warn-bg); }
.reihe .mitte { flex-grow: 1; display: flex; flex-direction: column; min-width: 0; }
.reihe .titel { font-size: var(--t-text); font-weight: 700; color: var(--tinte); }
.reihe .unter { font-size: var(--t-label); color: var(--gedaempft); font-weight: 600; }
.reihe .betrag { font-size: var(--t-text); font-weight: 800; font-variant-numeric: tabular-nums; flex-shrink: 0; }
/* Belegzeile am Handy: Betrag neben dem Betreff, die Unterzeile bekommt die ganze Breite.
   Vorher stand der Betrag mittig rechts und drueckte "22.05.2026 · Reparatur und
   Instandhaltung · nicht umlagefähig" auf vier Zeilen (gesehen 09.09.2026, 390 px). */
@media (max-width: 999px) {
  .reihe.beleg { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; column-gap: 12px; row-gap: 2px; align-items: center; }
  .reihe.beleg .mitte { display: contents; }
  .reihe.beleg .kachel { grid-column: 1; grid-row: 1 / 3; }
  .reihe.beleg .titel { grid-column: 2; grid-row: 1; }
  /* "Gebäudeversicherung" ist laenger als die Spalte und lief in den Betrag (09.09.2026) */
  .reihe.beleg .titel, .reihe.beleg .unter { min-width: 0; overflow-wrap: anywhere; hyphens: auto; }
  .reihe.beleg .betrag { grid-column: 3; grid-row: 1; }
  .reihe.beleg > svg { grid-column: 4; grid-row: 1 / 3; }
  .reihe.beleg .unter { grid-column: 2 / 4; grid-row: 2; }
}
.status { font-size: var(--t-label); font-weight: 800; }
.status.gut { color: var(--gut); }
.status.warn { color: var(--warn); display: flex; align-items: center; gap: 6px; }
/* Tippziel vergroessern, ohne das Aussehen zu aendern: Polster rein, Rand wieder raus.
   12 px Schrift ergibt sonst ein Ziel weit unter den 48 px aus der UX-Pruefung. */
button.status {
  background: none; border: none; cursor: pointer; font-family: inherit;
  padding: 17px 8px; margin: -17px -8px;
}

.abschnitt-titel {
  font-size: var(--t-abschnitt); font-weight: 800; letter-spacing: -0.01em;
  color: var(--tinte); margin: 14px 2px 2px; line-height: 1.2;
}
.fussnote { font-size: var(--t-label); color: #8B978F; font-weight: 600; text-align: center; }

/* ---------- Knöpfe & Formulare ---------- */
.knopf {
  display: block; width: 100%; min-height: var(--ziel-min);
  background: var(--verlauf); color: var(--hero-text);
  border: none; border-radius: 14px;
  font-size: var(--t-text); font-weight: 800;
  font-family: inherit; cursor: pointer; text-align: center;
}
.knopf.zweit {
  background: var(--karte); color: var(--held);
  border: 1.5px solid var(--akzent-bg);
}
.knopf.hell { background: #fff; color: var(--held); }
.knopf.glas { background: rgba(255,255,255,0.14); color: var(--hero-text); }

label.feld { display: block; margin-bottom: 12px; }
label.feld span { display: block; font-size: var(--t-label); font-weight: 700; color: var(--gedaempft); margin-bottom: 5px; }
input, select {
  width: 100%; padding: 14px 12px; min-height: 48px; border-radius: 12px;
  border: 1.5px solid #E9DCE1; background: #fff;
  font-size: var(--t-text); font-family: inherit; color: var(--tinte);
}
input:focus, select:focus { outline: 2px solid var(--held); border-color: transparent; }
.feld-reihe { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.hinweistext { font-size: var(--t-label); line-height: 1.5; color: var(--gedaempft); font-weight: 600; }

/* ---------- Etappen (Abrechnung, wie Vorlage) ---------- */
.etappe { display: flex; align-items: center; gap: 12px; padding: 13px 14px; border-bottom: 1px solid var(--trenner); }
.etappe:last-child { border-bottom: none; }
.etappe.aktiv { background: var(--aktiv-bg); border-radius: 12px; }
.etappe .kreis {
  width: 28px; height: 28px; border-radius: 999px; flex-shrink: 0;
  border: 2px solid #D5DDD6;
  display: flex; align-items: center; justify-content: center;
}
.etappe.fertig .kreis { background: var(--gut); border-color: var(--gut); }
.etappe.aktiv .kreis { background: var(--held); border-color: var(--held); }
.etappe.aktiv .kreis::after { content: ""; width: 9px; height: 9px; border-radius: 999px; background: var(--balken); }
.etappe .name { flex-grow: 1; font-size: var(--t-label); font-weight: 700; color: var(--leise); }
.etappe.aktiv .name { font-size: var(--t-text); font-weight: 800; color: var(--tinte); }
.etappe.fertig .name { color: var(--gedaempft); }
.etappe .hinweis { font-size: var(--t-label); color: var(--leise); font-weight: 700; }

/* ---------- Tab-Leiste ---------- */
.tabs {
  position: fixed; bottom: 0; left: 0; right: 0;
  background: var(--karte);
  display: flex; max-width: 480px; margin: 0 auto;
  padding: 10px 8px max(14px, env(safe-area-inset-bottom));
}
/* Die meistgetippte Flaeche der App. Vorher 10,5 px Schrift und 37 px hoch --
   beides unter den Grenzen aus `ux-pruefung` (Tippziel 48, Text lesbar).
   Bens Entscheidung 31.08.2026: bauen. Die untere Leiste wird dadurch hoeher. */
.tabs button {
  flex: 1; background: none; border: none; cursor: pointer;
  font-family: inherit; font-size: var(--text-3); font-weight: 700;
  color: #8B978F; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: var(--space-1);
  min-height: var(--ziel-min); padding: var(--space-1) 2px;
  border-radius: var(--radius-2); line-height: 1.1;
}
.tabs button.aktiv { color: var(--held); font-weight: 800; }
.tabs button svg { width: 20px; height: 20px; }

/* ---------- Urteil zur Umlagefaehigkeit ----------
   Antwortet auf die Frage, die die App bis 06.09.2026 dem Nutzer gestellt hat.
   Ruhig gehalten: gruen und rot nur als schmale Kante, keine Ampelflaeche --
   das Urteil soll erklaeren, nicht alarmieren. */
.urteil {
  border-radius: var(--radius-2); padding: var(--space-3) var(--space-4);
  margin: 0 0 var(--space-3); border-left: 4px solid var(--trenner);
  background: var(--karte);
}
.urteil .satz { font-size: var(--t-text); font-weight: 700; display: flex;
  align-items: center; gap: var(--space-2); }
.urteil .quelle { font-size: var(--t-label); color: var(--gedaempft);
  font-weight: 700; margin-top: var(--space-1); }
.urteil .hinweis { font-size: var(--t-label); color: var(--gedaempft);
  line-height: 1.45; margin-top: var(--space-2); }
.urteil.ja   { border-left-color: var(--gut); }
.urteil.nein { border-left-color: var(--warn); background: var(--warn-bg); }
.urteil.nein .satz { color: var(--warn); }
.urteil.frage { border-left-color: var(--held); background: var(--akzent-bg); }
.urteil.frage .wahl { display: flex; flex-direction: column; gap: var(--space-2);
  margin-top: var(--space-3); }
.urteil.frage .wahl .knopf { margin: 0; }

/* ---------- Diagramme (Bens Konzept 06.09.2026) ---------- */
.karte.diagramm { padding: var(--space-4); }
.diagramm-kopf { display: flex; justify-content: space-between; align-items: baseline;
  flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-3); }
.diagramm-kopf .titel { font-size: var(--t-karte); font-weight: 800; letter-spacing: -.01em; }
.diagramm-kopf .legende { font-size: var(--t-label); color: var(--gedaempft); font-weight: 600;
  display: flex; align-items: center; gap: var(--space-2); }
.diagramm-kopf .legende i { width: 11px; height: 11px; border-radius: 3px; display: inline-block;
  margin-right: 3px; vertical-align: -1px; }
/* Platz fuer die feste Aktionsleiste am Handy; am Rechner steht die Leiste im Fluss. */
.leisten-platz { height: 52px; flex: none; }
.balken-svg { width: 100%; height: auto; display: block; }
/* Monatsnamen unter Balkendiagrammen: HTML statt SVG-Text, damit sie nie unter 12 px fallen. */
.balken-monate { display: flex; margin-top: 4px; }
.balken-monate span { flex: 1 1 0; min-width: 0; text-align: center; font-size: var(--text-1); font-weight: 600; color: var(--gedaempft); }
.balken-monate .spitze { font-weight: 800; color: var(--tinte); }
.hero-diagramm { margin-top: 6px; }
.hero-diagramm svg { display: block; }
.hero-diagramm .balken-monate span { color: var(--hero-label); }
.hero-diagramm .balken-monate .spitze { color: var(--hero-text); }
.hero-legende { display: flex; gap: 16px; margin-top: 6px; font-size: var(--text-1); color: var(--hero-label); font-weight: 600; }
.diagramm-fuss { font-size: var(--t-label); color: var(--gedaempft); margin-top: var(--space-2); }
.ring-zeile { display: flex; align-items: center; gap: var(--space-5); flex-wrap: wrap; }
.ring-svg { width: 148px; height: 148px; flex: none; }
.ring-legende { flex: 1 1 220px; min-width: 0; }
.ring-legende .zeile { display: flex; align-items: center; gap: var(--space-2);
  font-size: var(--t-label); padding: var(--space-1) 0; }
.ring-legende i { width: 11px; height: 11px; border-radius: 3px; flex: none; }
.ring-legende .was { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; font-weight: 600; }
.ring-legende .anteil { color: var(--gedaempft); font-variant-numeric: tabular-nums; white-space: nowrap; min-width: 36px; text-align: right; }   /* "30 %" brach am Handy um (09.09.2026) */
.ring-legende .wert { font-weight: 700; font-variant-numeric: tabular-nums;
  min-width: 78px; text-align: right; }

/* ---------- Reiter in der Objektansicht (Bens Konzept 06.09.2026) ----------
   Unterstrich statt Pille: Reiter wechseln INNERHALB einer Seite, Filter waehlen
   aus einer Menge. Zwei verschiedene Handlungen brauchen zwei verschiedene Formen
   (ux-pruefung: gleiches Element = gleiche Bedeutung). */
.reiter {
  display: flex; flex-wrap: wrap; gap: 0 var(--space-5);
  border-bottom: 1px solid var(--trenner); margin: 0 0 var(--space-2);
}
/* Umbrechen statt waagerecht scrollen: fuenf Reiter (helle Fassung) brauchen 542 px,
   am Handy sind 358 px da (gemessen 09.09.2026). Ein Reiter hinter einer Wischgeste
   ist fuer die Zielgruppe unsichtbar (ux-pruefung). */
.reiter-knopf {
  flex: none; background: none; border: none; cursor: pointer; font-family: inherit;
  font-size: var(--t-text); font-weight: 700; color: var(--gedaempft);
  min-height: var(--ziel-min); padding: 0 0 var(--space-2);
  border-bottom: 3px solid transparent; margin-bottom: -1px;
}
.reiter-knopf:hover { color: var(--held); }
/* Handlungszeile in einer Liste ("Einheit & Mieter anlegen"): Lila statt Tinte. Die Klasse
   stand seit dem 06.09. im Markup beider Fassungen, ohne Regel (gefunden 09.09.2026). */
.reihe .titel.held { color: var(--held); }
.reiter-knopf.aktiv { color: var(--held); border-bottom-color: var(--held); }

/* ---------- Filterzeile ueber Listen (Bens Konzept 06.09.2026) ----------
   Vier Gruppen passen am Handy nicht nebeneinander. Bis 09.09.2026 scrollte die Zeile
   waagerecht -- der dritte und vierte Filter lagen hinter einer Wischgeste, die die
   Zielgruppe nicht entdeckt (ux-pruefung). Jetzt bricht sie um, alles bleibt sichtbar.
   Jeder Filter ist ein volles Tippziel; die Anzahl steht als Abzeichen dabei,
   damit man vor dem Tippen weiss, ob sich der Filter lohnt. */
.filterzeile { display: flex; flex-wrap: wrap; gap: var(--space-2); padding: 0 0 var(--space-1); }
.filter {
  flex: none; display: inline-flex; align-items: center; gap: var(--space-2);
  min-height: var(--ziel-min); padding: 0 var(--space-4);
  border-radius: var(--radius-pill); border: 1px solid var(--trenner);
  background: var(--blatt); color: var(--gedaempft);
  font-family: inherit; font-size: var(--t-label); font-weight: 700; cursor: pointer;
}
.filter .anzahl {
  background: var(--akzent-bg); color: var(--held); border-radius: var(--radius-pill);
  padding: 1px var(--space-2); font-size: var(--t-label); font-variant-numeric: tabular-nums;
}
.filter:hover { border-color: var(--held); color: var(--held); }
.filter.aktiv { background: var(--held); border-color: var(--held); color: #FFFFFF; }
.filter.aktiv .anzahl { background: rgba(255,255,255,.22); color: #FFFFFF; }
.filterergebnis {
  font-size: var(--t-label); color: var(--gedaempft); font-weight: 600;
  padding: var(--space-1) var(--space-1) 0;
}

/* ---------- Kennzahl-Kacheln (Vorbild: Bens Bild 14, immocloud) ----------
   Am Handy zwei Spalten, am Rechner drei -- ueber auto-fit, ohne eigenen
   Umbruchpunkt. Jede Kachel ist EIN Tippziel, nicht Zahl und Link getrennt:
   zwei kleine Ziele nebeneinander sind fuer zittrige Haende schlechter als
   ein grosses (ux-pruefung). */
/* Kleine Kennwerte auf der Objektseite (Fläche, Kaltmiete, Vorauszahlung).
   Bis 09.09.2026 mit Inline-Stilen und fremden Größen (10,5 / 15 px) --
   jetzt auf der Hausleiter. */
/* Objektfoto -- nur wenn das Objekt eines hat. */
.objektfoto { border-radius: 18px; overflow: hidden; height: 170px; margin-top: -6px; }
.objektfoto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.kpi { background: var(--karten-ton); border-radius: var(--radius-2); padding: var(--space-3); display: flex; flex-direction: column; gap: 2px; }
.kpi-l { font-size: var(--text-1); color: var(--gedaempft); font-weight: 700; letter-spacing: 0.04em; }
.kpi-w { font-size: var(--text-3); font-weight: 800; font-variant-numeric: tabular-nums; }

.kennzahlen {
  display: grid; gap: var(--space-3);
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
.kennzahl {
  background: var(--karte); border: none; border-radius: var(--radius-3);
  padding: var(--space-4); cursor: pointer; font-family: inherit;
  display: flex; flex-direction: column; gap: var(--space-3);
  text-align: left; min-height: var(--ziel-min);
}
.kennzahl:hover { background: var(--akzent-bg); }
.kennzahl .oben { display: flex; align-items: center; gap: var(--space-3); }
.kennzahl .ring { width: 46px; height: 46px; flex: none; }
/* Wo es keine echte Bezugsgroesse gibt, steht ein Sinnbild statt eines Rings --
   ein Ring gegen ein erfundenes Ziel waere eine Luege in Diagrammform. */
.kennzahl .sinnbild {
  width: 46px; height: 46px; flex: none; border-radius: var(--radius-2);
  background: var(--akzent-bg); display: flex; align-items: center; justify-content: center;
}
.kennzahl .sinnbild svg { width: 22px; height: 22px; }
.kennzahl .werte { display: flex; flex-direction: column; min-width: 0; }
.kennzahl .gross {
  font-size: var(--t-abschnitt); line-height: 1.1; font-weight: 800;
  color: var(--tinte); font-variant-numeric: tabular-nums;
  letter-spacing: var(--tracking-tight);
}
/* Kein Abschneiden: "Mieten A..." zwingt zum Raten. Lieber zwei Zeilen --
   ux-pruefung, nichts verstecken, was man lesen muss. */
.kennzahl .was {
  font-size: var(--t-label); color: var(--gedaempft); font-weight: 600;
  line-height: 1.25;
}
/* Die Zeile, die weiterfuehrt -- das ist der eigentliche Punkt der Kachel. */
.kennzahl .weiter {
  display: flex; align-items: center; gap: var(--space-1);
  font-size: var(--t-label); font-weight: 700; color: var(--held);
  border-top: 1px solid var(--trenner); padding-top: var(--space-2);
}

/* ---------- Fertig-Moment (wie Vorlage) ---------- */
.fertig-hero {
  background: var(--verlauf); color: var(--hero-text); text-align: center;
  padding: 44px 22px 28px; position: relative; overflow: hidden;
}
.fertig-hero .haken {
  width: 74px; height: 74px; border-radius: 999px; background: #fff;
  color: var(--held);
  display: flex; align-items: center; justify-content: center; margin: 0 auto 18px;
}
.fertig-hero h2 { font-size: var(--t-abschnitt); font-weight: 800; margin: 0 0 6px; }
.fertig-hero p { font-size: var(--t-label); color: var(--hero-label); margin: 0; font-weight: 600; line-height: 1.5; }
.konfetti { position: absolute; border-radius: 999px; background: rgba(255,255,255,0.5); }

.leer { text-align: center; color: var(--gedaempft); font-weight: 600; font-size: var(--t-text); padding: 28px 16px; line-height: 1.5; }
.willkommen-titel { font-size: var(--t-karte); font-weight: 800; margin-bottom: 6px; }

/* ---------- Rechner-Ansicht: Tab-Leiste wird zur Seitenleiste ----------
   Nur Anordnung, keine neue Bedienlogik: dieselben vier Bereiche, dieselben
   Knoepfe. Ab 1000 px, darunter bleibt alles wie am Handy.
   Schriftgroessen steigen leicht (ux-pruefung: Fliesstext ab 16 px). */
.leisten-marke, .leisten-fuss { display: none; }

@media (min-width: 1000px) {
  /* GEAENDERT 29.08.2026 auf Bens Ansage: "In der App selber bleibt es oben. Das ist
     nur auf dem Mac, also am PC bleibt es an der Seite."
     Am Rechner wandert das Lila also in die Seitenleiste; die Mitte wird hell und
     traegt die Kacheln. Am Handy (unter 1000 px) bleibt alles wie es war: Band oben.
     Die Fassung mit dem Band ueber die ganze Breite (Ansage 28.08.) liegt in
     stil.css.vor-leiste-lila-20260829. Regel: entwuerfe/REGEL-wo-das-lila-sitzt.md */
  body { display: grid; grid-template-columns: 264px minmax(0, 1fr); background: var(--karte); }

  .tabs {
    position: sticky; top: 0; bottom: auto; left: auto; right: auto;
    grid-column: 1; grid-row: 1;
    height: 100vh; max-width: none; margin: 0;
    flex-direction: column; align-items: stretch; gap: 4px;
    padding: 18px 14px 18px; border-right: none;
    background: var(--held);
  }
  /* Das Band ist am Rechner weg, also traegt die Leiste die Marke. */
  .leisten-marke { display: flex; align-items: center; gap: 9px;
    color: #FFFFFF; font-family: var(--font-marke); font-weight: var(--marke-weight);
    font-size: 22px; letter-spacing: 0;
    padding: 8px 14px 20px; text-decoration: none; }
  .tabs button {
    flex: none; flex-direction: row; justify-content: flex-start; gap: 12px;
    font-size: 15.5px; padding: 13px 14px; border-radius: 12px; min-height: 50px;
    color: #DCC9EC;
  }
  .tabs button:hover { background: rgba(255, 255, 255, .12); color: #FFFFFF; }
  .tabs button.aktiv { background: rgba(255, 255, 255, .17); color: #FFFFFF; }
  .tabs button svg { width: 22px; height: 22px; flex: none; }
  .leisten-fuss {
    display: block; margin-top: auto; padding: 13px 14px; border-radius: 12px;
    font-size: 14.5px; font-weight: 700; color: #DCC9EC; text-decoration: none;
  }
  .leisten-fuss:hover { background: rgba(255, 255, 255, .12); color: #FFFFFF; }

  /* margin:0 auto laesst ein Grid-Element schrumpfen statt fuellen — hier zuruecknehmen. */
  #app { grid-column: 2; grid-row: 1; max-width: none; margin: 0; justify-self: stretch;
         padding-bottom: 0; background: var(--bg); }
  .hero, .hero.knapp {
    margin-left: 0; padding: 26px 40px 24px;
    box-sizing: border-box;
    background: var(--bg); color: var(--tinte);
    border-bottom: 1px solid var(--trenner);
    position: relative; z-index: 2; justify-content: flex-start; gap: 14px;
  }
  .hero .kopfzeile, .hero .zahl, .hero .zurueckzeile { color: var(--tinte); }
  .hero { --bogen-spur: var(--trenner); }   /* die weisse Spur (rgba) waere auf dem hellen Hero unsichtbar (gesehen 09.09.2026) */
  /* Gleiche Fehlerklasse im Finanz-Kopf: Beschriftung und Ausgaben-Balken waren fuer den
     Verlauf gedacht (hell auf lila) und standen am Rechner hell auf weiss. */
  .hero .label, .hero-diagramm .balken-monate span, .hero-legende { color: var(--gedaempft); }
  .hero-diagramm .balken-monate .spitze { color: var(--tinte); }
  .hero { --hero-balken-ein: var(--held); --hero-balken-aus: var(--diagramm-aus); }
  .hero-diagramm { max-width: 640px; }
  .leisten-platz { display: none; }
  /* Jahreskarte: drei Kennzahlen in einer Reihe statt 2 + 1 (gesehen 09.09.2026). */
  .karte.jahrgross { display: flex; align-items: flex-start; gap: 44px; padding: 20px 24px; }
  .jahrzahlen.gross { padding: 0; gap: 44px; }
  .jahrgeld.gross { padding: 0; }
  .jahrgeld.gross b { font-size: 30px; }
  /* KORREKTUR 31.08.2026: Am Rechner ist der Hero hell geworden, die Wortmarke
     in der Kopfzeile blieb aber weiss (logoWort(true) setzt fill hart auf #F4FAF6)
     — sie stand als Geisterschrift weiss auf weiss. Die Seitenleiste traegt die
     Marke ohnehin schon (.leisten-marke), also hier ausblenden. Das Kontosymbol
     war aus demselben Grund unsichtbar und wird auf die Tinte umgefaerbt.
     Am Handy (unter 1000 px) aendert sich nichts. */
  .hero .kopfzeile > svg { display: none; }
  .hero .kopfzeile { justify-content: space-between; }
  .hero .rundknopf { background: var(--karte); color: var(--tinte); }
  /* Der Zurueck-Weg sitzt am Rechner auf hellem Grund -- Knopf und Pfeil
     muessen mitwandern, sonst steht er weiss auf weiss (gleiche Fehlerklasse
     wie die Geistermarke vom 31.08.). */
  .hero .zurueckzeile button { background: var(--karte); color: var(--tinte); }
  .hero .zurueckzeile button:hover { background: var(--akzent-bg); }
  .hero .unter, .hero .hinweis { color: var(--gedaempft); }
  .hero .kopfzeile, .hero .zurueckzeile, .hero .stapel, .hero .balken { max-width: 1080px; }
  .hero + .inhalt, .hero.knapp + .inhalt { margin-top: 0; }
  .inhalt { padding: 26px 40px 120px; border-radius: 26px 26px 0 0; gap: 14px; }
  .inhalt > * { max-width: 1080px; width: 100%; }
  .karte, .liste { border-radius: 16px; }

}

/* ---------- Druckansicht ---------- */
@media print {
  .tabs, .knopf, .kein-druck { display: none !important; }
  body { background: #fff; }
  #app { padding-bottom: 0; max-width: none; }
  .inhalt { margin-top: 0; }
  .karte { box-shadow: none; border: 1px solid #ddd; break-inside: avoid; }
  .hero, .fertig-hero { display: none; }
}

/* ---------- Mittlerer Kamera-Knopf (Beleg ablegen, ueberall gleich) ---------- */
.tabs .fab-platz { flex: 0 0 76px; display: flex; justify-content: center; align-items: flex-start; padding: 0; }
.tabs .fab {
  width: 60px; height: 60px; border-radius: 999px; border: 4px solid #FFFFFF;
  background: var(--verlauf); cursor: pointer;
  margin-top: -30px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 18px rgba(110, 15, 46, 0.35);
}
/* Aktionsknopf: Form wie urspruenglich (rundherum gerundet), aber er sitzt jetzt auf
   einem Streifen in der Farbe der Tab-Leiste — nicht mehr auf dem weissen Blatt.
   Gemessen am 28.08.2026: Der Rand hatte laengst die Leistenfarbe; weiss war die
   FLAECHE ringsum. Ben sah also das Blatt, nicht den Rand. Deshalb faerbt jetzt der
   ganze Streifen, und Knopf und Leiste bilden einen zusammenhaengenden Fuss.        */
.aktionsleiste {
  position: fixed; bottom: calc(var(--tabs-h) - var(--space-4)); left: 0; right: 0;
  max-width: 480px; margin: 0 auto; padding: 10px 12px 0;
  background: var(--karte);
  border-radius: 18px 18px 0 0;
  z-index: 10;
}
.aktionsleiste .knopf {
  border: 0;
  border-radius: 14px;
  min-height: 52px;
}
/* Schliesst die drei Punkte zwischen Streifen und Leiste, damit kein weisser Spalt bleibt. */
.aktionsleiste::after {
  content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 12px;
  background: var(--karte);
}

/* ---------- Rechner: Aktionsleiste laeuft im Fluss mit ----------
   ACHTUNG, hier lag eine Falle (31.08.2026): Der grosse @media-Block weiter oben
   steht VOR dieser Basisregel. `@media` erhoeht die Spezifitaet nicht -- bei
   gleicher Spezifitaet gewinnt die spaeter notierte Regel. Eine Rechner-Regel
   dort oben war deshalb wirkungslos, obwohl sie richtig aussah; gemessen blieb
   `position: fixed`, links 400 px, Breite 480 px, quer ueber dem Inhalt.
   Wer hier etwas fuer den Rechner ueberschreibt, das unterhalb des grossen
   @media-Blocks definiert wird, MUSS es unterhalb der Basisregel tun. */
@media (min-width: 1000px) {
  .aktionsleiste {
    position: static; bottom: auto; left: auto; right: auto;
    max-width: none; width: 100%; margin: var(--space-2) 0 0; padding: 0;
    background: none; border-radius: 0;
  }
  .aktionsleiste::after { display: none; }
  .aktionsleiste .knopf {
    border-width: 0; max-width: 420px;
    box-shadow: 0 8px 24px rgba(52, 14, 69, 0.22);
  }
  /* Die Leiste liegt als Geschwister hinter .inhalt und bekam dort keinen Rand:
     gemessen 09.09.2026 sass der Knopf buendig an der Spaltenkante (x = 264) und
     120 px unter dem letzten Inhalt. Jetzt fluchtet er mit dem Inhalt. */
  #app > .aktionsleiste { padding: 0 40px 40px; }
  .inhalt:has(+ .aktionsleiste) { padding-bottom: 24px; }
}

/* ---------- Einrichtung (Interview-Stil) ---------- */
.interview-punkte { display: flex; gap: 7px; }
.interview-punkte span { width: 8px; height: 8px; border-radius: 999px; background: rgba(255,255,255,0.3); }
.interview-punkte span.an { background: #fff; }
.interview-frage { font-size: var(--t-abschnitt); font-weight: 800; line-height: 1.3; }

/* ---------- Splash: Logo, dann schliesst sich der Kreis ---------- */
#splash {
  position: fixed; inset: 0; z-index: 100;
  background: var(--verlauf);
  display: flex; align-items: center; justify-content: center;
  animation: splash-zu 700ms ease-in 1100ms forwards;
}
#splash svg { width: 132px; height: 132px; animation: splash-atmen 1100ms ease-out; }
@keyframes splash-atmen {
  from { transform: scale(0.86); opacity: 0; }
  30% { opacity: 1; }
  to { transform: scale(1); opacity: 1; }
}
@keyframes splash-zu {
  from { clip-path: circle(120% at 50% 50%); }
  to { clip-path: circle(0% at 50% 50%); visibility: hidden; }
}

@media print {
  .aktionsleiste, .tabs, .knopf, .kein-druck, #splash { display: none !important; }
  body { background: #fff; }
  #app { padding-bottom: 0; max-width: none; }
  .inhalt { margin-top: 0; padding-bottom: 0; }
  .karte { background: #fff; border: 1px solid #ddd; break-inside: avoid; }
  .hero, .fertig-hero { display: none; }
}

/* ---------- „Ihr Jahr mit Mietbiene" ----------------------------------------
   Nutzen in Zahlen. Erscheint erst, wenn es etwas zu zeigen gibt (jahrKarte() gibt
   davor einen leeren String zurueck) — ein leerer Kasten waere das Gegenteil von
   Ermutigung. Die Zahlen tragen die Held-Farbe, die Beschriftungen bleiben leise. */
.jahrkarte {
  display: block; width: 100%; text-align: left; border: none; cursor: pointer;
  font-family: inherit; background: var(--akzent-bg); padding: 0; overflow: hidden;
}
.jahrkopf {
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 16px 4px; font-size: var(--t-karte); font-weight: 800;
  letter-spacing: -0.01em; color: var(--held);
}
.jahrzahlen { display: flex; gap: 20px; padding: 8px 16px 16px; }
.jahrzahlen > span { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.jahrzahlen b {
  font-size: 24px; font-weight: 800; color: var(--held);
  font-variant-numeric: tabular-nums; letter-spacing: -.02em; line-height: 1.1;
}
.jahrzahlen > span > span { font-size: var(--t-label); color: var(--gedaempft); font-weight: 600; }
.karte.jahrgross { padding: 4px 0; }
.jahrzahlen.gross { gap: 26px; padding: 16px 16px 4px; }
.jahrzahlen.gross b { font-size: 30px; }

/* Der Geldbetrag bekommt eine eigene Zeile. Drei Zahlen nebeneinander passen auf
   390 px nicht, sobald eine davon ein Betrag ist — „1.140,00 €" brach um und das
   Euro-Zeichen rutschte in die naechste Zeile (gemessen 29.08.2026).            */
.jahrgeld {
  display: flex; flex-direction: column; gap: 1px;
  padding: 4px 16px 16px; white-space: nowrap;
}
.jahrgeld b {
  font-size: 26px; font-weight: 800; color: var(--held); line-height: 1.1;
  font-variant-numeric: tabular-nums; letter-spacing: -.02em;
}
.jahrgeld > span { font-size: var(--t-label); color: var(--gedaempft); font-weight: 600; }
.jahrgeld.gross { padding: 0 16px 16px; }
.jahrgeld.gross b { font-size: 34px; }
.jahrgeld.gross > span { font-size: var(--t-label); }
.jahrzahlen b { white-space: nowrap; }

/* ---------- Zugeklappte Zusatzangaben ---------------------------------------
   Alles Neue aus der Rechts-Recherche vom 29.08. liegt hier drin. Bens Vorgabe:
   „Muessen nur aufpassen, dass es dann uebersichtlich bleibt." Also: gebaut ist
   alles, sichtbar wird nur, was gerade zaehlt.                                 */
details.mehr { margin-top: 4px; }
details.mehr > summary {
  list-style: none; cursor: pointer; padding: 13px 16px; min-height: 48px;
  display: flex; align-items: center; gap: 9px;
  background: var(--karte); border-radius: 14px;
  font-size: var(--t-text); font-weight: 700; color: var(--held);
}
details.mehr > summary::-webkit-details-marker { display: none; }
details.mehr > summary::after {
  content: ""; margin-left: auto; width: 9px; height: 9px;
  border-right: 2px solid var(--held); border-bottom: 2px solid var(--held);
  transform: rotate(45deg); transition: transform 160ms var(--ease);
}
details.mehr[open] > summary { border-radius: 14px 14px 0 0; }
details.mehr[open] > summary::after { transform: rotate(-135deg); }
.feldhinweis {
  display: block; margin-top: 5px; font-size: var(--t-label); line-height: 1.45;
  color: var(--gedaempft); font-weight: 400;
}
label.feld.ankreuz { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
label.feld.ankreuz input[type="checkbox"] { width: 22px; height: 22px; flex: 0 0 auto; margin: 0; }
label.feld.ankreuz > span { font-weight: 700; font-size: var(--t-text); }
label.feld.ankreuz .feldhinweis { flex: 1 0 100%; margin-top: 0; }

/* Unterzeile: gehoert zum Ergebnis darueber, ist aber nachgeordnet. Eingerueckt und
   leiser, damit die Hauptzeile die Hauptzeile bleibt. */
.reihe.unterzeile {
  padding-left: 22px; background: var(--karten-ton);
  border-left: 2px solid var(--akzent-bg);
}
.reihe.unterzeile .titel { font-size: var(--t-label); }
.reihe.unterzeile .unter { font-size: var(--t-label); }

/* Mietverhaeltnisse: mehrere Bloecke in einer Karte, klar getrennt. */
.mietzeit-trenner { height: 1px; background: var(--trenner); margin: 14px 0; }
.knopf.klein { min-height: var(--ziel-min); font-size: var(--t-label); margin-top: 4px; }

/* § 6a: Verbrauchszeile mit den drei Vergleichen */
.verbrauchzeile .vergleiche {
  display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 2px;
  font-size: var(--t-label); color: var(--gedaempft); font-weight: 600;
}
.delta { font-weight: 800; }
.delta.hoch { color: var(--warn); }
.delta.runter { color: var(--gut); }