/* ============================================================
   Fondssparrechner – lokale Stile (nur echte Fonds-Eigenheiten)
   ------------------------------------------------------------
   Geteiltes Layout in lib/tokens.css + lib/components/*.
   Hier nur was es im Sparrechner nicht gibt:
     - Erträgs-Ausschüttung (distMode = "dist") + Inline-Feld
     - Steuerfelder mit auto-fit (statt fixer Spalten)
     - Tabellen-Header mit "Verlauf" + View-Toggle (Jahre/Monate)
     - .fs-view-btn segmented control
     - Eingabe-Spalte wächst bei aktiver Steuer
   ============================================================ */

/* Inputs-Spalte: kompakter auf kleinem Desktop, breiter bei aktiver
   Steuer, max 1000px bei viel Platz. */
#calc-form.fonds-app{
  --w-inputs-max: 560px;
}
@media (max-width: 1040px){
  #calc-form.fonds-app{
    --w-inputs-max: 480px;
  }
}
@media (min-width: 900px) and (max-width: 1099px){
  #calc-form.fonds-app:has(#z_taxEnabled:checked){
    --w-inputs-max: 880px;
  }
}
@media (min-width: 1100px){
  #calc-form.fonds-app{
    --w-inputs-max: min(1000px, 100%);
  }
}

/* Steuerfelder: flexibles Raster statt fixer 110px-Spalten (5 Felder
   müssen je nach Breite umbrechen). */
#calc-form.fonds-app{
  --tax-col-min: 118px;
  --tax-col-max: 1fr;
}
#calc-form.fonds-app .fs-tax-fields{
  max-width:558px;       /* Deckel: max ~4 Spalten Inhalt */
  white-space:normal;
}

/* Ausschüttungen-Feld neben Endkapital (nur sichtbar bei distMode=dist):
   Label links, Wert rechts – alles in einer Zeile, damit die Zeilenhöhe
   identisch mit allen anderen Eingabezeilen bleibt. */
#calc-form.fonds-app .fs-dist-total{
  display:flex;
  flex-direction:row;
  align-items:center;
  gap:6px;
  min-width:0;
  box-sizing:border-box;
  flex-shrink:0;
}
#calc-form.fonds-app .fs-dist-total > span{
  font-size:inherit;
  font-weight:700;
  color:inherit;
  white-space:nowrap;
  flex-shrink:0;
}
#calc-form.fonds-app .fs-dist-total > input{
  width:120px;
  min-width:0;
  flex-shrink:0;
}

/* Jährliche Erträge (%): das innere Span-Label ausblenden, damit die Zeile
   nicht höher als alle anderen Eingabezeilen wird. */
#calc-form.fonds-app .z-dist-yield{
  flex-direction:row;
  align-items:center;
  gap:0;
  min-width:0;
}
#calc-form.fonds-app .z-dist-yield > span{ display:none; }

/* Tabellen-Header: "Verlauf" links, View-Umschalter rechts */
.fs-table-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  margin-bottom:10px;
}

/* Segmented Toggle für Jahres-/Monatswerte (Optik wie Depot/Zinskonto im Entnahmeplan) */
#fsViewToggle{
  display:inline-flex;
  border:1px solid var(--br);
  border-radius:8px;
  overflow:hidden;
  flex-shrink:0;
}
.fs-view-btn{
  padding:5px 16px;
  min-width:110px;
  text-align:center;
  font-size:13px;
  font-weight:500;
  line-height:1.3;
  background:transparent;
  color:var(--txt);
  border:none;
  cursor:pointer;
  transition:background 0.15s, color 0.15s;
  white-space:nowrap;
}
.fs-view-btn + .fs-view-btn{
  border-left:1px solid var(--br);
}
.fs-view-btn.is-active{
  background:var(--accent);
  color:#fff;
  font-weight:600;
}
.fs-view-btn:hover:not(.is-active){
  background:rgba(128,128,128,0.12);
}

/* w-layout: einspaltig (keine rechte Ergebnis-Spalte).
   form-card schrumpft auf Inhalt und ist mittig (kein width:100%),
   damit Form und Diagramm/Tabelle gleich aussehen. */
#calc-form.fonds-app .w-layout{
  display:block !important;
  width:100%;
}
@media (min-width: 1100px){
  #calc-form.fonds-app .w-layout{
    grid-template-columns: 1fr !important;
  }
}
#calc-form.fonds-app #z_cards{ display:none !important; }