/*! Finyana — Calculadora de Ahorro. Quelle: finyana-datos/public/ahorro.css
    Die geteilten Regeln stehen in fy-calc.css (erzeugt aus src/calc-base.css).
    Hier steht nur, was diesen Rechner von den anderen unterscheidet: die drei
    umschaltbaren Eingabegruppen und der Satz unter der grossen Zahl. */
@import url("./fy-calc.css");

  /* Die Modusauswahl steht allein ueber dem Raster und darf breit sein. */
  .fy-ah__row { margin-bottom: 18px; }

  /* Nur eine Gruppe ist sichtbar. Ein div ist von Haus aus block, [hidden]
     wirkt also ohne eigene Regel — die Regel steht hier trotzdem, damit ein
     spaeteres display:grid an dieser Klasse sie nicht still aushebelt. */
  .fy-ah__grupo[hidden] { display: none; }

  /* Auch die einzelnen Felder werden umgeschaltet: Modus 1 fragt nach der
     Meta, Modus 2 nach der Rate, an derselben Stelle im Raster. */
  .fy-ah__grid > div[hidden] { display: none; }

  .fy-ah__frase {
    margin: 8px 0 0;
    font-size: 14px;
    line-height: 1.5;
    color: #4A5450;
  }

  /* Der Fall "das Ersparte reicht schon" und der Fall "das Einkommen deckt
     die Ausgaben" sind keine Fehler, aber auch keine Zahl. Dann traegt der
     Satz das Ergebnis und die grosse Zahl tritt zurueck. */
  .fy-ah__value[data-fy-state="sin-cifra"] {
    font-size: 20px;
    line-height: 1.3;
    color: #17342B;
  }

  @media (max-width: 767px) {
    .fy-ah__value[data-fy-state="sin-cifra"] { font-size: 18px; }
  }