/* finanzfride.ch/teuerung – Teuerungsrechner. Baut auf site.css und rechner.css auf (Knöpfe, Fragen, Regler, Band,
   Blöcke, «Wie wir rechnen»). Hier nur, was der Teuerungsrechner zusätzlich braucht: die drei Zahlen auf dem Start,
   die Aufteilung mit einem Regler pro Bereich, die Balken und das Ersparte. Farben nur aus der Tonleiter, Schrift
   immer mit Kernfarbe (siehe Kopf von rechner.css). Keine Inline-Styles (CSP): Breiten kommen als Custom Properties. */

/* ------------------------------------------------------------------ Start: die Schätzfrage statt «Los geht's» */
.tr-tipp { align-self: end; max-width: 30rem; }
@media (min-width: 960px) { .ng-start-raster.tr-start-raster { align-items: start; } .tr-tipp { align-self: start; } }   /* Abnahme R7-4 */
.tr-tipp-frage { margin: 0 0 14px; font-family: var(--bold); font-weight: 700; font-size: clamp(1.35rem, 5vw, 1.75rem); letter-spacing: -0.04em; line-height: 1.2; text-wrap: balance; }
.tr-tipp-knoepfe { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.tr-tipp-knopf {
  min-height: 60px; padding: 12px 14px; border: 2px solid var(--gruen); border-radius: 12px; cursor: pointer;
  background: var(--creme-hell2); color: var(--gruen); text-align: left;
  font-family: var(--bold); font-weight: 700; font-size: 1.125rem; letter-spacing: -0.04em; line-height: 1.2;
  transition: background-color 0.15s ease, transform 0.15s ease;
}
.tr-tipp-knopf:hover { background: var(--creme-hell3); }
@media (max-width: 359.98px) { .tr-tipp-knopf { padding-left: 10px; padding-right: 10px; font-size: 1rem; } }
.tr-tipp-knopf:active { transform: translateY(1px); }
.tr-tipp-knopf:focus-visible { outline: 3px solid var(--gruen); outline-offset: 3px; }
.tr-tipp-knopf[aria-pressed="true"] { background: var(--gruen); color: var(--creme-hell2); }
.tr-tipp-hinweis { margin: 12px 0 0; color: var(--wald); }
.tr-tipp-lead { margin: 18px 0 6px; max-width: 30em; }
.tr-start-raster .ng-start-titel { margin-bottom: 0; }
.tr-tipp .ng-start-privat { margin: 0; }

/* ------------------------------------------------------------------ Frage 5: Aufteilung */
.tr-aufteilung { max-width: none; }
.tr-liste { list-style: none; margin: 0; padding: 0; display: grid; }
.tr-zeile { padding: 12px 0 6px; border-top: 1px solid var(--creme-tief1); }
.tr-zeile:first-child { border-top: 0; padding-top: 0; }
.tr-zeile-kopf { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; align-items: center; }
.tr-name { font-family: var(--bold); font-weight: 700; font-size: var(--gr-text); letter-spacing: -0.04em; line-height: 1.25; }
.tr-name-hilfe { display: block; font-family: var(--text); font-weight: 400; font-size: 0.875rem; letter-spacing: 0; line-height: 1.35; color: var(--wald); }
.tr-betrag { display: inline-flex; align-items: baseline; gap: 6px; }
.tr-betrag-eingabe {
  width: 5.4em; min-height: 44px; padding: 6px 8px; border: 2px solid var(--wald); border-radius: 10px;
  background: var(--creme-hell2); color: var(--gruen); text-align: right;
  font-family: var(--bold); font-weight: 700; font-size: 1.125rem; letter-spacing: -0.04em; font-variant-numeric: tabular-nums;
}
.tr-betrag-eingabe:hover { border-color: var(--gruen); }
.rechner .tr-betrag-eingabe:focus-visible { outline: 3px solid var(--gruen); outline-offset: 2px; border-color: var(--gruen); }
.tr-einheit { font-family: var(--bold); font-weight: 700; font-size: var(--gr-klein); letter-spacing: -0.04em; color: var(--wald); }
.tr-anteil { min-width: 3.2em; text-align: right; font-size: 0.875rem; color: var(--wald); font-variant-numeric: tabular-nums; }
/* Fokus nie hinter den klebenden Leisten (WCAG 2.2, 2.4.11; Abnahme R1, Punkt 5) */
.tr-betrag-eingabe, .tr-regler, .tr-zurueck-schluessel { scroll-margin-bottom: 170px; }
@media (min-width: 960px) { .tr-betrag-eingabe, .tr-regler, .tr-zurueck-schluessel { scroll-margin-bottom: 90px; } }
/* Unter 400 px steht der Anteil unter dem Feld, damit die Namen Platz haben */
@media (max-width: 399.98px) {
  .tr-betrag { display: grid; grid-template-columns: auto auto; column-gap: 6px; align-items: baseline; }
  .tr-anteil { grid-column: 1 / -1; min-width: 0; }
}
/* Sechs Fragen: kleinere Zettel unter 380 px, der sechste steht auch schräg */
.ng-tab:nth-child(6) { --r: 3deg; }
@media (max-width: 379.98px) { .ng-tabs { gap: 5px; } .ng-tab.ist-fertig { width: 20px; height: 20px; } }

/* Die Summe klebt unten am Fenster, solange die Liste läuft. Unter 960 px klebt dort schon die Leiste mit «Zurück» und
   «Weiter» (rechner.css, .ng-nav: 12 + 52 + 12 px + 2 px Linie), die Summe sitzt darüber. */
.tr-summe {
  position: sticky; bottom: calc(78px + env(safe-area-inset-bottom, 0px)); z-index: 3; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 16px;
  margin: 8px calc(var(--rand) * -1) 0; padding: 12px var(--rand) calc(12px + env(safe-area-inset-bottom, 0px));
  background: var(--creme) var(--korn) repeat 0 0 / 256px 256px; border-top: 3px solid var(--gruen); box-shadow: 0 -14px 18px -16px var(--schatten-creme);
}
.tr-summe-zeile { margin: 0; font-family: var(--bold); font-weight: 700; font-size: var(--gr-text); letter-spacing: -0.04em; }
.tr-summe-zahl { font-size: 1.375rem; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.tr-zurueck-zeile { margin: 6px 0 0; }
.tr-zurueck-schluessel { min-height: 44px; padding: 8px 0; }
.tr-schluessel-quelle { margin: 12px 0 0; color: var(--wald); }
@media (min-width: 760px) { .tr-summe { margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0; } }
@media (min-width: 960px) { .tr-summe { bottom: 0; } }

/* ------------------------------------------------------------------ Ergebnis: Band */
.tr-band-raster { display: grid; gap: 28px; }
.tr-band-wahl { order: -1; }   /* Wahl zuerst, damit die Knöpfe beim Tippen nicht springen (Abnahme R1, Punkt 3) */
.tr-vor { margin-bottom: 6px; }
.tr-gross { margin: 0; font-family: var(--mega); font-weight: 400; font-size: clamp(3.5rem, 17vw, 9rem); letter-spacing: -0.02em; line-height: 0.95; color: var(--creme); font-variant-numeric: tabular-nums; }
/* Drei Ebenen (Abnahme R1, Punkt 15): deine Zahl, die offizielle in Creme, der Rest in Textschrift Creme tief 2 */
.tr-offiziell { margin: 14px 0 0; font-family: var(--bold); font-weight: 700; font-size: clamp(1.35rem, 5vw, 1.75rem); letter-spacing: -0.04em; line-height: 1.25; color: var(--creme); max-width: 24em; }
/* Auflösung des Tipps (Andrea 14.10.2026: «checkt man nicht» zur Skala): drei beschriftete Balken auf einer Achse */
.tr-vgl { margin: 26px 0 0; max-width: 36rem; }
.tr-vgl-titel { margin: 0; font-family: var(--bold); font-weight: 700; font-size: clamp(1.25rem, 4.6vw, 1.5rem); letter-spacing: -0.04em; line-height: 1.25; color: var(--creme); }
.tr-vgl-unter { margin: 4px 0 12px; font-family: var(--text); font-size: var(--gr-klein); line-height: 1.45; color: var(--creme-tief2); }
.tr-vgl-zeilen { --null: 0; display: grid; gap: 8px; }
.tr-vgl-zeile { display: grid; grid-template-columns: 5.6em minmax(0, 1fr); align-items: center; gap: 10px; }
.tr-vgl-zeile[hidden] { display: none; }
.tr-vgl-name { font-family: var(--bold); font-weight: 700; font-size: var(--gr-klein); letter-spacing: -0.04em; color: var(--creme-tief2); white-space: nowrap; }
.tr-vgl-spur { position: relative; height: 34px; }
@media (max-width: 399.98px) { .tr-vgl-spur { margin-right: 3em; } }   /* Platz für den Wert rechts (Abnahme R7-1) */
.tr-vgl-spur::before { content: ""; position: absolute; top: -4px; bottom: -4px; left: calc(var(--null) * 100%); width: 2px; margin-left: -1px; background: var(--creme-tief2); }
.tr-vgl-balken { --von: 0; --breite: 0; position: absolute; top: 4px; bottom: 4px; left: calc(var(--von) * 100%); width: calc(var(--breite) * 100%); border-radius: 6px; box-sizing: border-box; }
.tr-vgl-balken.ist-du { background: var(--gold); }
.tr-vgl-balken.ist-offiziell { background: var(--creme-tief2); }
.tr-vgl-balken.ist-tipp { border: 2px dashed var(--creme); background: rgb(225 196 147 / 0.16); }
.tr-vgl-wert { --ende: 0; position: absolute; top: 50%; left: calc(var(--ende) * 100% + 8px); transform: translateY(-50%); white-space: nowrap;
  font-family: var(--bold); font-weight: 700; font-size: 1.0625rem; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; color: var(--creme); }
.tr-vgl-wert.ist-du { color: var(--gold); }
.tr-vgl-wert.ist-offiziell { color: var(--creme-tief2); }
.tr-spar-unter { margin: -8px 0 12px; font-family: var(--text); font-size: var(--gr-klein); line-height: 1.45; color: var(--creme-tief2); }

/* Andrea 14.10.2026: «visuell aufzeigen». 10'000 Franken auf dem Sparkonto, damals und heute (Kaufkraft), als zwei Balken */
.tr-spar { margin: 26px 0 0; max-width: 36rem; }
.tr-spar-titel { margin: 0 0 12px; font-family: var(--bold); font-weight: 700; font-size: 1.125rem; letter-spacing: -0.04em; line-height: 1.3; color: var(--creme); }
.tr-spar-zeile { display: grid; grid-template-columns: 3em minmax(0, 1fr) max-content; align-items: center; gap: 10px; margin: 0 0 8px; }
.tr-spar-aussen { display: none; }
@media (max-width: 479.98px) {
  /* Abnahme R7-2: im schmalen Balken würde der Betrag abgeschnitten. Hier steht er neben dem Jahr, der Balken darunter. */
  .tr-spar-zeile { grid-template-columns: minmax(0, 1fr) max-content; grid-template-areas: "kopf diff" "spur spur"; gap: 4px 10px; margin-bottom: 12px; }
  .tr-spar-jahr { grid-area: kopf; }
  .tr-spar-diff { grid-area: diff; }
  .tr-spar-spur { grid-area: spur; height: 24px; }
  .tr-spar-balken .tr-spar-wert { display: none; }
  .tr-spar-aussen { display: inline; margin-left: 10px; font-size: 1.0625rem; color: var(--creme); }
}
.tr-spar-jahr { font-family: var(--bold); font-weight: 700; font-size: var(--gr-klein); letter-spacing: -0.04em; color: var(--creme-tief2); }
.tr-spar-spur { display: flex; height: 42px; }
.tr-spar-balken { --anteil: 1; flex: none; width: calc(var(--anteil) * 100%); display: flex; align-items: center; padding: 0 12px; box-sizing: border-box;
  background: var(--creme); color: var(--gruen); border-radius: 8px 0 0 8px; overflow: hidden; }
.tr-spar-balken.ist-damals { border-radius: 8px; }
.tr-spar-wert { font-family: var(--bold); font-weight: 700; font-size: 1.125rem; letter-spacing: -0.04em; white-space: nowrap; font-variant-numeric: tabular-nums; }
.tr-spar-luecke { --anteil: 0; flex: none; width: calc(var(--anteil) * 100%); box-sizing: border-box; border: 2px dashed var(--gold); border-left: 0; border-radius: 0 8px 8px 0; }
.tr-spar-diff { font-family: var(--bold); font-weight: 700; font-size: 1.125rem; letter-spacing: -0.04em; color: var(--gold); white-space: nowrap; font-variant-numeric: tabular-nums; }
.tr-spar-diff.ist-plus { color: var(--creme); }
/* Abnahme R8, L1 und L2: am Handy flache Balken (die Grundregel oben würde sonst gewinnen), Laufweite am Element */
@media (max-width: 479.98px) { .tr-spar-zeile .tr-spar-spur { height: 24px; } }
.tr-spar-aussen { letter-spacing: -0.04em; }
.tr-spar-fuss { margin: 10px 0 0; font-family: var(--text); font-size: var(--gr-text); line-height: 1.5; color: var(--creme-tief2); }
.tr-zins-satz, .tr-band .tr-rechenweg { margin: 10px 0 0; font-family: var(--text); font-weight: 400; font-size: var(--gr-text); letter-spacing: 0; line-height: 1.5; color: var(--creme-tief2); max-width: 34em; }
.tr-band .tr-rechenweg { margin: 0 0 8px; }
.tr-wahl-titel { margin: 0 0 8px; font-family: var(--bold); font-weight: 700; font-size: var(--gr-klein); letter-spacing: -0.04em; color: var(--creme-tief2); }
/* Die Zeitraum-Wahl auf Dunkelgrün: Creme statt Dunkelgrün */
.tr-wahlen { border-color: var(--creme-tief2); }
.tr-wahlen .ng-wahl { color: var(--creme); min-height: 48px; padding: 10px 16px; font-size: var(--gr-text); }
.tr-wahlen .ng-wahl + .ng-wahl { border-left-color: var(--creme-tief2); }
.tr-wahlen .ng-wahl[aria-pressed="true"] { background: var(--creme); color: var(--gruen); }
.tr-wahlen .ng-wahl:focus-visible { outline-color: var(--gold); }
@media (max-width: 379.98px) { .tr-wahlen .ng-wahl { padding-left: 10px; padding-right: 10px; white-space: nowrap; } }
@media (min-width: 960px) {
  .tr-band-raster { grid-template-columns: minmax(0, 1fr) auto; align-items: start; column-gap: 48px; }
  .tr-band-wahl { order: 0; }
}

/* ------------------------------------------------------------------ Balken: was teurer geworden ist */
.tr-block-vor { max-width: 36em; }
.tr-balken-liste { --null: 0; --gold-tief2: #996D14;   /* Gold tief 2: 3,18 : 1 auf der Spur (Abnahme R1, Punkt 14) */ list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 14px; max-width: 40rem; }
.tr-balken-kopf { display: grid; gap: 2px; justify-content: start; margin: 0 0 6px; }
.tr-balken-name { font-family: var(--bold); font-weight: 700; font-size: var(--gr-text); letter-spacing: -0.04em; }
.tr-balken-werte { font-size: 0.95rem; color: var(--wald); font-variant-numeric: tabular-nums; }
.tr-balken-werte strong { font-family: var(--bold); font-weight: 700; letter-spacing: -0.04em; color: var(--gruen); }
/* Die Spur hat ihre Nulllinie bei --null (Anteil der grössten Senkung an der ganzen Breite) */
.tr-spur { position: relative; display: block; height: 18px; background: var(--creme-hell1); border-radius: 4px; }
.tr-spur::before { content: ""; position: absolute; top: -3px; bottom: -3px; left: calc(var(--null) * 100%); width: 2px; background: var(--gruen); }
.tr-fuellung { --breite: 0; position: absolute; top: 0; bottom: 0; left: calc(var(--null) * 100%); width: calc(var(--breite) * 100%); background: var(--gruen); border-radius: 0 4px 4px 0; transform-origin: 0 50%; }
.tr-fuellung.ist-minus { left: auto; right: calc((1 - var(--null)) * 100%); background: var(--gold-tief2); border-radius: 4px 0 0 4px; transform-origin: 100% 50%; }
.tr-gesundheit { margin: 22px 0 0; padding: 12px 0 0 14px; border-left: 3px solid var(--gold); max-width: 36em; font-family: var(--bold); font-weight: 700; letter-spacing: -0.04em; }

/* ------------------------------------------------------------------ Erspartes */
.tr-geld-frage { display: grid; gap: 8px; max-width: 26rem; margin-bottom: 18px; }
.tr-geld-vor { font-family: var(--bold); font-weight: 700; font-size: var(--gr-text); letter-spacing: -0.04em; }
.tr-geld-liste { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 10px; max-width: 44rem; }
.tr-geld { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 6px 16px; padding: 14px 16px 16px; border-top: 3px solid var(--gruen); background: var(--creme-hell1); }
.tr-geld p { margin: 0; }
.tr-geld-name { grid-column: 1 / -1; font-family: var(--bold); font-weight: 700; font-size: 1.125rem; letter-spacing: -0.04em; }
.tr-geld-was { display: block; font-family: var(--text); font-weight: 400; font-size: 0.875rem; letter-spacing: 0; color: var(--wald); }
.tr-geld-zahl { display: block; white-space: nowrap; font-family: var(--bold); font-weight: 700; font-size: clamp(1.25rem, 5vw, 1.6rem); letter-spacing: -0.04em; line-height: 1.15; font-variant-numeric: tabular-nums; }
.tr-geld-unter { display: block; font-size: 0.875rem; line-height: 1.35; color: var(--wald); }
.tr-leise { color: var(--braun); max-width: 40em; }
.tr-zins-zeile { margin: 14px 0 0; }
.tr-ruhe { margin: 18px 0 14px; max-width: 36em; }
@media (min-width: 960px) {
  .tr-geld { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
  .tr-geld-name { grid-column: auto; }
}

/* ------------------------------------------------------------------ Warum, Teilen */
.tr-warum-liste { list-style: none; margin: 0 0 22px; padding: 0; display: grid; max-width: 40em; }
.tr-warum-liste li { padding: 14px 0; border-top: 1px solid var(--creme-tief1); }
.tr-warum-liste li:first-child { padding-top: 0; border-top: 0; }
.tr-warum-liste strong { display: block; margin-bottom: 4px; font-family: var(--bold); font-weight: 700; font-size: 1.125rem; letter-spacing: -0.04em; line-height: 1.3; }
.tr-satz { margin: 0; font-family: var(--bold); font-weight: 700; font-size: var(--gr-block); letter-spacing: -0.04em; line-height: 1.2; max-width: 22em; text-wrap: balance; }
/* Die Nachricht, wie sie im Chat ankommt: Sprechblase wie bei Marty, Spitze unten links */
.tr-teilen-blase {
  margin: 0 0 18px; padding: 14px 18px; max-width: 26em;
  background: var(--creme-hell2); color: var(--gruen);
  border: 2px solid var(--gruen); border-radius: 18px 18px 18px 4px;
  font-family: var(--bold); font-weight: 700; font-size: 1.125rem; letter-spacing: -0.04em; line-height: 1.35; text-wrap: balance;
}
.ng-block-inhalt > .tr-teilen-blase { max-width: 26em; }
.tr-teilen-zeile { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }

@media (prefers-reduced-motion: reduce) {
  .tr-fuellung { transition: none; }
}