/* ============================================================
   bacap – Komponente: Inputs / Selects (innerhalb .calc-app)
   ------------------------------------------------------------
   Vereinheitlicht Input-/Select-Größen für alle Rechner.

   Parameter (Custom Properties, lokal überschreibbar):
     --field-h        Höhe der Eingabefelder (Default 32px)
     --field-pad-y/-x Innenabstand
     --field-font     Schriftgröße
     --field-radius   Eckenradius
     --field-w        Standardbreite für .w-grow-Felder
     --field-w-compact  Breite für .w-compact-Selects
   ============================================================ */

/* Basis-Höhe, -Padding und -Optik für alle Inputs/Selects in der Form-Tabelle.
   Hintergrund und Border kommen aus --w-field-bg/-br (Token), damit die
   Felder sich deutlich von der Card abheben (Light + Dark). */
.calc-app .w-form-table input[type="text"],
.calc-app .w-form-table input[type="number"],
.calc-app .w-form-table input[type="tel"],
.calc-app .w-form-table input[type="email"],
.calc-app .w-form-table select{
  height:var(--field-h, 32px);
  padding:var(--field-pad-y, 2px) var(--field-pad-x, 8px);
  font-size:var(--field-font, 15px);
  line-height:1.2;
  border-radius:var(--field-radius, 10px);
  background:var(--w-field-bg, #fff);
  border:1px solid var(--w-field-br, var(--br));
  box-shadow:var(--w-field-shadow, none);
}

/* Standard-Eingabebreite (Text/Number) */
.calc-app .w-form-table input[type="text"],
.calc-app .w-form-table input[type="number"]{
  width:var(--field-w, 180px);
  max-width:var(--field-w, 180px);
  flex:0 0 var(--field-w, 180px);
}

/* "Wachsende" Inputs – auf gleiche Standardbreite gefixt für Konsistenz */
.calc-app .w-form-table .w-grow{
  width:var(--field-w, 180px);
  max-width:var(--field-w, 180px);
  flex:0 0 var(--field-w, 180px);
  min-width:0;
}

/* Selects: nicht-kompakte Selects haben Standardbreite */
.calc-app .w-form-table select{
  max-width:130px;
}
.calc-app .w-form-table select:not(.w-compact){
  width:var(--field-w, 180px);
  flex:0 0 var(--field-w, 180px);
}

/* Kompakte Selects (z. B. monatlich/jährlich, Jahre/Monate) */
.calc-app .w-form-table .w-compact{
  width:var(--field-w-compact, 110px);
  min-width:var(--field-w-compact, 110px);
  flex:0 0 var(--field-w-compact, 110px);
}

/* Rate-Field mit Badge ("Effektivzins") */
.calc-app .w-rate-field{
  display:flex;
  align-items:center;
  gap:8px;
  flex:0 0 auto;
}
.calc-app .w-rate-field #effRateBadge{
  white-space:nowrap;
  flex-shrink:0;
}

/* Suffix-Variante (alternative Anordnung: Badge im Input rechts) */
.calc-app .with-suffix{ position:relative; width:100%; }
.calc-app .with-suffix #effRateBadge{
  position:absolute;
  right:10px;
  top:50%;
  transform:translateY(-50%);
  pointer-events:none;
  white-space:nowrap;
}

/* ------------------------------------------------------------
   Mobile-Stack (≤ 760 px): Felder nutzen die volle Breite
   ------------------------------------------------------------ */
@media (max-width: 760px){
  .calc-app .w-form-table input[type="text"],
  .calc-app .w-form-table input[type="number"],
  .calc-app .w-form-table .w-grow{
    width:100%;
    max-width:100%;
    flex:1 1 100%;
  }
  .calc-app .w-form-table select{ max-width:100%; }
  .calc-app .w-form-table .w-compact{
    flex:1 1 0;
    width:0;
    max-width:none;
    min-width:0;
  }
}