/* rentenrechner UI hardening (namespaced) */
.rr-toggle-wrap[aria-disabled="true"] { opacity: 0.55; pointer-events: none; }
.rr-toggle-label { user-select: none; }
.rr-visually-hidden { position: absolute !important; width: 1px; height: 1px; margin: -1px; border: 0; padding: 0; clip: rect(0 0 0 0); overflow: hidden; white-space: nowrap; }

/* Optional generic disabled look for inputs when activate=false */
input[disabled][data-toggle] { cursor: not-allowed; }
.rr-dim { opacity: 0.6; }

/* Table column disabled cue (when hidden, display:none kommt aus Controller; hier nur Fallback) */
.rr-col-hidden { display: none !important; }

/* ---------- Finetuning (scoped) ---------- */
.rr-scope {
  --rr-accent: #ff6b00; /* Orange toggle color */
  --rr-border: #7a7a7a;
  --rr-border-focus: #0b5fff;
  --rr-border-disabled: #a0a0a0;
  --rr-bg-disabled: #f5f5f5;
}

/* Always-visible borders for text-like inputs (scoped) */
.rr-scope input[type="text"],
.rr-scope input[type="number"],
.rr-scope input[type="email"],
.rr-scope input[type="tel"],
.rr-scope input[type="search"],
.rr-scope textarea {
  border: 1.5px solid var(--rr-border);
  background-clip: padding-box;
  outline: none;
}

.rr-scope input[type="text"]:focus,
.rr-scope input[type="number"]:focus,
.rr-scope input[type="email"]:focus,
.rr-scope input[type="tel"]:focus,
.rr-scope input[type="search"]:focus,
.rr-scope textarea:focus {
  border-color: var(--rr-border-focus);
}

/* Disabled inputs remain visible */
.rr-scope input[disabled],
.rr-scope textarea[disabled] {
  background-color: var(--rr-bg-disabled);
  border-color: var(--rr-border-disabled);
  opacity: 0.85; /* keep readable */
}

/* Native checkbox toggles get a consistent accent color */
.rr-scope input[type="checkbox"][data-toggle] {
  accent-color: var(--rr-accent);
}

/* Optional: visually dim labels of disabled toggles */
.rr-scope .rr-toggle-wrap[aria-disabled="true"] .rr-toggle-label {
  opacity: 0.75;
}

/* --- mirrored from #taxsv-card for #tax-card and #sv-card (auto-generated) --- */
#tax-card .taxsv-header{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:8px}
#sv-card .taxsv-header{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:8px}
#tax-card .taxsv-header h2{margin:0}
#sv-card .taxsv-header h2{margin:0}
#tax-card .inline-toggle{display:flex;align-items:center}
#sv-card .inline-toggle{display:flex;align-items:center}
#tax-card .tax-grid{display:grid;grid-template-columns:repeat(4,minmax(160px,1fr));gap:12px}
#sv-card .tax-grid{display:grid;grid-template-columns:repeat(4,minmax(160px,1fr));gap:12px}
#tax-card .tax-grid{grid-template-columns:repeat(3,minmax(160px,1fr))}
#sv-card .tax-grid{grid-template-columns:repeat(3,minmax(160px,1fr))}
#tax-card .tax-grid{grid-template-columns:repeat(2,minmax(150px,1fr))}
#sv-card .tax-grid{grid-template-columns:repeat(2,minmax(150px,1fr))}
#tax-card .tax-grid{grid-template-columns:1fr}
#sv-card .tax-grid{grid-template-columns:1fr}
#tax-card .toggle{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.4rem .75rem; border-radius:20px; line-height:1;
  background:#f4f4f4; border:1px solid #ccc; color:#333;
}
#sv-card .toggle{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.4rem .75rem; border-radius:20px; line-height:1;
  background:#f4f4f4; border:1px solid #ccc; color:#333;
}
#tax-card .toggle .knob{
  width:16px; height:16px; border-radius:50%;
  background:#fff; border:1px solid #bbb; display:inline-block;
}
#sv-card .toggle .knob{
  width:16px; height:16px; border-radius:50%;
  background:#fff; border:1px solid #bbb; display:inline-block;
}
#tax-card .toggle.on{
  background:#ff8a00; border-color:#ff8a00; color:#fff;
}
#sv-card .toggle.on{
  background:#ff8a00; border-color:#ff8a00; color:#fff;
}
#tax-card .toggle.on .knob{
  box-shadow:0 0 0 1px rgba(255,255,255,.5);
}
#sv-card .toggle.on .knob{
  box-shadow:0 0 0 1px rgba(255,255,255,.5);
}
#tax-card .toggle{
  position: relative;
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: .45rem 1.0rem;
  padding-left: 3.1rem;      /* Platz für Track+Knob reservieren */
  gap: .6rem;
  line-height: 1.1;
  transition: background .2s ease, border-color .2s ease, color .2s ease;
}
#sv-card .toggle{
  position: relative;
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: .45rem 1.0rem;
  padding-left: 3.1rem;      /* Platz für Track+Knob reservieren */
  gap: .6rem;
  line-height: 1.1;
  transition: background .2s ease, border-color .2s ease, color .2s ease;
}
#tax-card .toggle .knob{
  position: absolute !important;
  top: 50%;
  left: 1.0rem;                  /* Startposition im Track */
  transform: translateY(-50%);
  width: 18px; height: 18px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid rgba(0,0,0,.25);
  box-shadow: 0 0 0 1px rgba(255,255,255,.6) inset;
  transition: left .22s ease;
}
#sv-card .toggle .knob{
  position: absolute !important;
  top: 50%;
  left: 1.0rem;                  /* Startposition im Track */
  transform: translateY(-50%);
  width: 18px; height: 18px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid rgba(0,0,0,.25);
  box-shadow: 0 0 0 1px rgba(255,255,255,.6) inset;
  transition: left .22s ease;
}
#tax-card .toggle.on{
  background:#ff8a00;
  border-color:#ff8a00;
  color:#fff;
}
#sv-card .toggle.on{
  background:#ff8a00;
  border-color:#ff8a00;
  color:#fff;
}
#tax-card .toggle.on::before{
  background: rgba(255,255,255,.3);
  border-color: rgba(255,255,255,.7);
}
#sv-card .toggle.on::before{
  background: rgba(255,255,255,.3);
  border-color: rgba(255,255,255,.7);
}
#tax-card .toggle.on .knob{
  left: 2.5rem; /* Knob nach rechts im Track */
}
#sv-card .toggle.on .knob{
  left: 2.5rem; /* Knob nach rechts im Track */
}
#tax-card .toggle{
  display: grid;
  grid-template-columns: 46px auto; /* fixes width for icon area */
  align-items: center;
  gap: 10px;
  padding: .45rem .9rem;
  border-radius: 999px;
  line-height: 1.1;
  transition: background .2s ease, border-color .2s ease, color .2s ease;
}
#sv-card .toggle{
  display: grid;
  grid-template-columns: 46px auto; /* fixes width for icon area */
  align-items: center;
  gap: 10px;
  padding: .45rem .9rem;
  border-radius: 999px;
  line-height: 1.1;
  transition: background .2s ease, border-color .2s ease, color .2s ease;
}
#tax-card .toggle .toggle-icon{
  position: relative;
  width: 40px; height: 22px;
  border-radius: 999px;
  background: rgba(0,0,0,.07);
  border: 1px solid rgba(0,0,0,.15);
  box-sizing: border-box;
}
#sv-card .toggle .toggle-icon{
  position: relative;
  width: 40px; height: 22px;
  border-radius: 999px;
  background: rgba(0,0,0,.07);
  border: 1px solid rgba(0,0,0,.15);
  box-sizing: border-box;
}
#tax-card .toggle .toggle-icon .knob{
  position: absolute;
  top: 50%; left: 2px;
  transform: translateY(-50%);
  width: 18px; height: 18px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid rgba(0,0,0,.25);
  box-shadow: 0 0 0 1px rgba(255,255,255,.6) inset;
  transition: left .22s ease;
}
#sv-card .toggle .toggle-icon .knob{
  position: absolute;
  top: 50%; left: 2px;
  transform: translateY(-50%);
  width: 18px; height: 18px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid rgba(0,0,0,.25);
  box-shadow: 0 0 0 1px rgba(255,255,255,.6) inset;
  transition: left .22s ease;
}
#tax-card .toggle.on .toggle-icon .knob{ left: 20px; }
#sv-card .toggle.on .toggle-icon .knob{ left: 20px; }
#tax-card .toggle{ background:#f4f4f4; border:1px solid #ccc; color:#333; }
#sv-card .toggle{ background:#f4f4f4; border:1px solid #ccc; color:#333; }
#tax-card .toggle.on{ background:#ff8a00; border-color:#ff8a00; color:#fff; }
#sv-card .toggle.on{ background:#ff8a00; border-color:#ff8a00; color:#fff; }
#tax-card */

/* Keep handle crisp/visible */

/* Track color spec — OFF: light gray, ON: green */

/* Collapse content when taxSv is disabled */
#taxsv-card.is-collapsed > :not(.taxsv-header){ display:none !important; }
#sv-card */

/* Keep handle crisp/visible */

/* Track color spec — OFF: light gray, ON: green */

/* Collapse content when taxSv is disabled */
#taxsv-card.is-collapsed > :not(.taxsv-header){ display:none !important; }
#tax-card .grid.tax-grid,
#taxsv-card .grid.sv-grid{
  display:grid!important;
  grid-template-columns:repeat(4,minmax(200px,1fr));
  gap:14px 18px;
}
#sv-card .grid.tax-grid,
#taxsv-card .grid.sv-grid{
  display:grid!important;
  grid-template-columns:repeat(4,minmax(200px,1fr));
  gap:14px 18px;
}
#tax-card .grid.tax-grid>*,
#taxsv-card .grid.sv-grid>*{min-width:0;}
#sv-card .grid.tax-grid>*,
#taxsv-card .grid.sv-grid>*{min-width:0;}
#tax-card .grid.tax-grid,
  #taxsv-card .grid.sv-grid{grid-template-columns:repeat(2,minmax(200px,1fr));}
#sv-card .grid.tax-grid,
  #taxsv-card .grid.sv-grid{grid-template-columns:repeat(2,minmax(200px,1fr));}
#tax-card .grid.tax-grid,
  #taxsv-card .grid.sv-grid{grid-template-columns:1fr;}
#sv-card .grid.tax-grid,
  #taxsv-card .grid.sv-grid{grid-template-columns:1fr;}


/* === 2.5.41: Sozialversicherung layout ===
   - Place KVdR/SV-as-Abzug toggles on a single row
   - Inputs start on the next row in a 4-column grid (wrap after 4)
*/
#sv-card #kvdr_toggle,
#sv-card #svAsDeduction_toggle{
  display: inline-flex;
  align-items: center;
  margin-right: 16px;
  margin-bottom: 12px;
}

#sv-card .tax-grid{
  display: grid;
  grid-template-columns: repeat(4, minmax(220px, 1fr));
  gap: 16px;
  width: 100%;
}

@media (max-width: 1280px){
  #sv-card .tax-grid{ grid-template-columns: repeat(2, minmax(220px, 1fr)); }
}
@media (max-width: 720px){
  #sv-card .tax-grid{ grid-template-columns: 1fr; }
}

/* Ensure form fields align within grid cells */
#sv-card .tax-grid .field,
#sv-card .tax-grid .form-field,
#sv-card .tax-grid .rr-field{
  width: 100%;
}


/* === 2.5.41 layout fix for Sozialversicherung ===
   Goal: two toggles in first row; inputs start next row; 4 fields per row.
*/
#sv-card .taxsv-section__body{
  display: grid !important;
  grid-template-columns: repeat(4, minmax(240px, 1fr)) !important;
  gap: 16px !important;
  align-items: start !important;
}

/* make both toggles sit in the first row, side by side */
#sv-card #kvdr_toggle,
#sv-card #svAsDeduction_toggle{
  grid-column: span 2 !important;
  margin: 0 !important;
}

/* ensure form fields are grid items and take one column each */
#sv-card .taxsv-section__body .rr-field,
#sv-card .taxsv-section__body .form-field,
#sv-card .taxsv-section__body .field{
  grid-column: span 1 !important;
  width: 100% !important;
}

/* Inputs full width inside their cells */
#sv-card .taxsv-section__body .rr-field input,
#sv-card .taxsv-section__body .rr-field select,
#sv-card .taxsv-section__body .rr-field .rr-input{
  width: 100% !important;
}

/* Responsive: reduce columns on smaller widths */
@media (max-width: 1280px){
  #sv-card .taxsv-section__body{ grid-template-columns: repeat(2, minmax(220px, 1fr)) !important; }
  #sv-card #kvdr_toggle, #sv-card #svAsDeduction_toggle{ grid-column: span 1 !important; }
}
@media (max-width: 720px){
  #sv-card .taxsv-section__body{ grid-template-columns: 1fr !important; }
  #sv-card #kvdr_toggle, #sv-card #svAsDeduction_toggle{ grid-column: 1 / -1 !important; }
}



/* === 2.5.41 layout fix v2 (targets real DOM) === */
/* Grid lives on the SV field grid container */
#taxsv-card fieldset.taxsv-sec.social .sv-grid{
  display:grid !important;
  grid-template-columns: repeat(4, minmax(240px, 1fr)) !important;
  gap:16px !important;
  width:100%;
}
/* Put both toggles in first row, two columns each */
#taxsv-card fieldset.taxsv-sec.social .sv-grid .field:has(#kvdr_toggle),
#taxsv-card fieldset.taxsv-sec.social .sv-grid .field:has(#svAsDeduction_toggle){
  grid-column: span 2 !important;
  margin:0 !important;
  align-items:center;
}
/* Regular fields: one column each */
#taxsv-card fieldset.taxsv-sec.social .sv-grid .field{
  grid-column: span 1 !important;
}
#taxsv-card fieldset.taxsv-sec.social .sv-grid .field input,
#taxsv-card fieldset.taxsv-sec.social .sv-grid .field select,
#taxsv-card fieldset.taxsv-sec.social .sv-grid .field .rr-input{
  width:100% !important;
}
/* Responsive */
@media (max-width:1280px){
  #taxsv-card fieldset.taxsv-sec.social .sv-grid{ grid-template-columns: repeat(2, minmax(220px,1fr)) !important; }
  #taxsv-card fieldset.taxsv-sec.social .sv-grid .field:has(#kvdr_toggle),
  #taxsv-card fieldset.taxsv-sec.social .sv-grid .field:has(#svAsDeduction_toggle){
    grid-column: span 1 !important;
  }
}
@media (max-width:720px){
  #taxsv-card fieldset.taxsv-sec.social .sv-grid{ grid-template-columns: 1fr !important; }
  #taxsv-card fieldset.taxsv-sec.social .sv-grid .field{ grid-column: 1 / -1 !important; }
}



/* SV toggles row (3 toggles in first line) */
#taxsv-card .sv-toggles-row{ grid-column:1 / -1; display:flex; gap:14px; flex-wrap:wrap; align-items:center; }
#taxsv-card .sv-toggles-row .field{ margin:0; }

/* ===== Tax/SV compact section + dialog ===== */
#taxsv-card .taxsv-header--compact{
  margin-bottom: 10px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  flex-wrap: wrap;
}
#taxsv-card .taxsv-header-actions{ display:flex; align-items:center; gap:8px; }

#taxsv-card .taxsv-compact{
  display:flex;
  flex-direction:column;
  gap: 10px;
}

#taxsv-card .taxsv-compact-row{
  display:flex;
  align-items:center;
  gap: 12px;
  padding: 8px 10px;
  border: 1px solid rgba(0,0,0,.12);
  border-radius: 12px;
  overflow: hidden;
}



/* Steuer-Toggle (TaxSV): feste Breite wie im Entnahmeplan (kein vw-"Atmen") */
#taxsv-card{ --taxsv-toggle-w: 240px; }

/*
  IMPORTANT: In styles.css there are global "safety" selectors that paint
  all buttons.rr-toggle inside #taxsv-card orange with !important.
  For the compact section, we want:
  - both toggles same width
  - only the toggle changes color when enabled/disabled
  - the rest of the row/summary stays neutral
*/
#taxsv-card .taxsv-compact-toggle{
  /*
    FIX: Der Steuer/SV-Toggle darf seine Breite NIE ändern.
    In manchen CSS-Kombinationen (global overrides / button defaults) wird
    flex/width am Wrapper oder Button überschrieben, wodurch der Toggle
    „atmet“ (z.B. bei Label/ARIA-Text-Updates).

    Daher: Wrapper UND Button bekommen explizit die gleiche feste Breite
    (min/max/width) und sind komplett von Flex-Shrink/Grow entkoppelt.
  */
  flex: 0 0 var(--taxsv-toggle-w);
  width: var(--taxsv-toggle-w);
  min-width: var(--taxsv-toggle-w);
  max-width: var(--taxsv-toggle-w);
}

/* Toggle-Optik: zentrale Definition in lib/toggle.css */
@media (max-width: 560px){
  #taxsv-card .taxsv-compact-toggle{ flex: 1 1 auto; }
  #taxsv-card .taxsv-compact-row{ flex-direction: column; align-items: stretch; }
  #taxsv-card .taxsv-compact-summary{ min-width: 0; }
}
#taxsv-card .taxsv-compact-row.is-disabled{ background: transparent !important; }

#taxsv-card .taxsv-compact-summary{
  flex: 1 1 320px;
  min-width: 220px;
  display:flex;
  flex-wrap: wrap;
  gap: 8px 10px;
  align-items:center;
  align-content: center;
  min-height: 44px;
  line-height: 1.25;
  padding-top: 0;
}

#taxsv-card .taxsv-chip{
  display:inline-flex;
  align-items:center;
  gap: 6px;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.12);
  background: rgba(0,0,0,.03);
  font-size: 0.95rem;
  white-space: nowrap;
}


/* Dark theme: visible frames for compact toggles + chips */
:root[data-theme="dark"] #taxsv-card .taxsv-compact-row{
  border-color: rgba(255,255,255,.24);
}
:root[data-theme="dark"] #taxsv-card .taxsv-chip{
  border-color: rgba(255,255,255,.28);
  background: rgba(255,255,255,.06);
}
#taxsv-card .taxsv-compact-header{
  display:flex;
  align-items:center;
  gap: 12px;
  width: 100%;
}

/* Dialog */
.rr-taxsv-dialog{ border: 0; padding: 0; background: transparent; }
.rr-taxsv-dialog::backdrop{ background: rgba(0,0,0,.55); }

.rr-taxsv-dialog[open]{
  width: min(920px, calc(100vw - 24px));
  max-width: 920px;
}

.rr-taxsv-dialog__panel{
  background: #fff;
  color: inherit;
  border-radius: 16px;
  box-shadow: 0 18px 60px rgba(0,0,0,.35);
  overflow: hidden;
  max-height: calc(100vh - 24px);
  display:flex;
  flex-direction:column;
}

.rr-taxsv-dialog__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(0,0,0,.12);
}

.rr-taxsv-dialog__title{
  font-weight: 800;
  font-size: 1.1rem;
}

.rr-taxsv-dialog__close{
  border: 1px solid rgba(0,0,0,.18);
  background: rgba(0,0,0,.03);
  border-radius: 10px;
  width: 38px;
  height: 38px;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}

.rr-taxsv-dialog__body{
  padding: 14px 16px;
  overflow-y: auto;
  overflow-x: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
  box-sizing: border-box;
  min-width: 0;
}

/* Bordered section boxes inside dialog: identical width and box model */
.rr-taxsv-dialog__sec{
  border: 1px solid rgba(0,0,0,.18);
  border-radius: 12px;
  padding: 14px 16px 12px;
  background: rgba(0,0,0,.015);
  box-sizing: border-box;
  width: 100%;
  align-self: stretch;
  margin: 0;
}
:root[data-theme="dark"] .rr-taxsv-dialog__sec{
  border-color: rgba(255,255,255,.22);
  background: rgba(255,255,255,.03);
}
.rr-taxsv-dialog__sec[hidden]{ display:none !important; }

.rr-taxsv-dialog__secTitle{
  margin: 0 0 12px;
  font-size: 1.05rem;
  font-weight: 700;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(0,0,0,.10);
}
:root[data-theme="dark"] .rr-taxsv-dialog__secTitle{
  border-bottom-color: rgba(255,255,255,.14);
}

/* Unified field styling inside the dialog (tax + SV look identical).
   Exclude the SV toggle row whose ".field" wrappers contain button toggles
   that must remain inline-flex pills. */
.rr-taxsv-dialog .rr-taxsv-dialog__sec .grid .field,
.rr-taxsv-dialog .rr-taxsv-dialog__sec .rr-tax-field{
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 6px !important;
  margin: 0;
  width: 100%;
  min-width: 0;
}

/* SV toggle row inside dialog: keep toggles side-by-side, full row span */
.rr-taxsv-dialog .rr-taxsv-dialog__sec .sv-toggles-row{
  display: flex !important;
  flex-wrap: wrap;
  gap: 10px 14px;
  align-items: center;
  margin: 0 0 10px;
  width: 100%;
}
.rr-taxsv-dialog .rr-taxsv-dialog__sec .sv-toggles-row > .field{
  margin: 0;
  width: auto;
}
.rr-taxsv-dialog .rr-taxsv-dialog__sec .field > span,
.rr-taxsv-dialog .rr-taxsv-dialog__sec .rr-tax-field > span{
  display: block !important;
  font-size: 0.92rem;
  opacity: 0.85;
  line-height: 1.2;
}
.rr-taxsv-dialog .rr-taxsv-dialog__sec .field input:not(.visually-hidden),
.rr-taxsv-dialog .rr-taxsv-dialog__sec .field select:not(.visually-hidden),
.rr-taxsv-dialog .rr-taxsv-dialog__sec .rr-tax-field input:not(.visually-hidden){
  width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box;
}

/* SV field grid: same look/columns as tax grid inside dialog */
.rr-taxsv-dialog .rr-taxsv-dialog__sec .grid.sv-grid{
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(var(--w-tax-field-width, 200px), 1fr)) !important;
  gap: 12px 12px !important;
  align-items: end !important;
}
.rr-taxsv-dialog .rr-taxsv-dialog__sec .grid.tax-grid{
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(var(--w-tax-field-width, 200px), 1fr)) !important;
  gap: 12px 12px !important;
  align-items: end !important;
}
.rr-taxsv-dialog .rr-taxsv-dialog__sec .grid.tax-grid > .rr-tax-field{
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
}

@media (max-width: 520px){
  .rr-taxsv-dialog .rr-taxsv-dialog__sec .grid.sv-grid,
  .rr-taxsv-dialog .rr-taxsv-dialog__sec .grid.tax-grid{
    grid-template-columns: 1fr !important;
  }
}

.rr-taxsv-dialog__secActions{
  display:flex;
  justify-content:flex-end;
  margin-top: 12px;
}

.rr-taxsv-dialog__foot{
  display:flex;
  justify-content:flex-end;
  gap: 10px;
  padding: 12px 16px;
  border-top: 1px solid rgba(0,0,0,.12);
}

/* Make grid responsive inside dialog */
.rr-taxsv-dialog .grid.tax-grid,
.rr-taxsv-dialog .grid.sv-grid{
  display:grid !important;
  grid-template-columns: repeat(3, minmax(180px, 1fr));
  gap: 12px 14px;
}

/* ------------------------------------------------------------
   Rentenrechner – Steuerfelder wie im Entnahmeplan
   Ziel:
   - Kachel-Grid mit fixer Feldbreite (Variable), sauberem Umbruch
   - Desktop/Tablet: gleich breite Kacheln, linksbündig
   - Mobile: einspaltig, volle Breite
   ------------------------------------------------------------ */

/* Default Feldbreite (kann später zentral überschrieben werden) */
.rr-taxsv-dialog{ --w-tax-field-width: 200px; }

.rr-taxsv-dialog .rr-tax-fields.w-tax-inline.w-tax-fields{
  max-width: 100% !important;
  width: 100% !important;

  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(var(--w-tax-field-width, 200px), 1fr)) !important;
  gap: 12px 12px !important;

  justify-content: stretch !important;
  justify-items: stretch !important;
  align-items: end !important;
}

.rr-taxsv-dialog .rr-tax-fields.w-tax-inline.w-tax-fields > .rr-tax-field{
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
}

@media (max-width: 520px){
  .rr-taxsv-dialog .rr-tax-fields.w-tax-inline.w-tax-fields{
    grid-template-columns: 1fr !important;
  }
  .rr-taxsv-dialog .rr-tax-fields.w-tax-inline.w-tax-fields > .rr-tax-field{
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }
}

@media (max-width: 900px){
  .rr-taxsv-dialog .grid.tax-grid,
  .rr-taxsv-dialog .grid.sv-grid{ grid-template-columns: repeat(2, minmax(160px, 1fr)); }
}

@media (max-width: 620px){
  #taxsv-card .taxsv-compact-row{ padding: 8px; }
  #taxsv-card .taxsv-chip{ font-size: 0.9rem; }
  .rr-taxsv-dialog .grid.tax-grid,
  .rr-taxsv-dialog .grid.sv-grid{ grid-template-columns: 1fr; }
}

.rr-taxsv-dialog .sv-toggles-row{
  display:flex;
  flex-wrap:wrap;
  gap: 10px 12px;
  align-items:center;
}


/* Entnahmeplan: Toggle-Optik kommt zentral aus lib/toggle.css */


/* -------------------------------
   Rentenrechner – Steuerfelder inline wie Entnahmeplan
   Ziel:
   - Toggle blendet Felder ein/aus (Collapsible Panel)
   - Labels über Inputs (nicht daneben)
   - Grid-Kacheln nebeneinander mit fixer Kachelbreite
-------------------------------- */

#taxsv-card{ --w-tax-field-width: 200px; }

#taxsv-card .rr-tax-inline-collapsible{
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: max-height 220ms ease, opacity 180ms ease;
}

#taxsv-card .rr-tax-inline-collapsible.is-open{
  /* groß genug für alle Felder; Höhe wird nur als Animations-Hilfsmittel genutzt */
  max-height: 1200px;
  opacity: 1;
}

#taxsv-card .rr-tax-inline-inner{
  padding: 10px 0 0 0;
}

#taxsv-card .rr-tax-inline-host .rr-tax-fields.w-tax-inline.w-tax-fields{
  max-width: 100% !important;
  width: 100% !important;

  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(var(--w-tax-field-width, 200px), var(--w-tax-field-width, 200px))) !important;
  gap: 12px 12px !important;

  justify-content: start !important;
  justify-items: start !important;
  align-items: end !important;
}

/* Jede Kachel folgt exakt der Spaltenbreite */
#taxsv-card .rr-tax-inline-host .rr-tax-fields.w-tax-inline.w-tax-fields > .rr-tax-field{
  width: var(--w-tax-field-width, 200px) !important;
  min-width: var(--w-tax-field-width, 200px) !important;
  max-width: var(--w-tax-field-width, 200px) !important;
}

/* Label oben, Input darunter (gilt für Dialog UND Inline) */
#taxsv-card .rr-tax-field{
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 6px !important;
}

#taxsv-card .rr-tax-field > span{
  display:block !important;
  font-size: 0.95rem;
  opacity: 0.9;
  line-height: 1.2;
}

/* Mobile: einspaltig, volle Breite */
@media (max-width: 520px){
  #taxsv-card .rr-tax-inline-host .rr-tax-fields.w-tax-inline.w-tax-fields{
    grid-template-columns: 1fr !important;
  }
  #taxsv-card .rr-tax-inline-host .rr-tax-fields.w-tax-inline.w-tax-fields > .rr-tax-field{
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }
}

/* Per-section "Bearbeiten" button next to summary */
#taxsv-card .taxsv-compact-edit{
  flex: 0 0 auto;
  margin-left: auto;
  display:flex;
  align-items:center;
}
#taxsv-card .taxsv-compact-row .sv-header.taxsv-compact-header{ width:100%; }

/* "deaktiviert" chip styling */
#taxsv-card .taxsv-chip--off{
  opacity: 0.7;
  font-style: italic;
}
:root[data-theme="dark"] #taxsv-card .taxsv-chip--off{ opacity: 0.75; }

@media (max-width: 560px){
  #taxsv-card .taxsv-compact-edit{
    margin-left: 0;
    width: 100%;
  }
  #taxsv-card .taxsv-compact-edit .btn{ width: 100%; }
}