/* ============================================================================
   4founder redesign — page CSS for route "domizil"
   GENERATED by tools/redesign-port/extract.mjs from domizil/Domizil-v13-yves.dc.html
   (re-running the extractor overwrites this file). Loaded only on this route;
   shared rules live in ../base.css, palette/scale vars in ../tokens.css.
   ============================================================================ */

input[type=range].ff-range{-webkit-appearance:none;appearance:none;width:100%;height:6px;border-radius:999px;background:#dbe7fb;outline:none;cursor:pointer}
input[type=range].ff-range::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;border-radius:50%;background:#fff;border:3px solid var(--ff-brand);box-shadow:0 2px 10px rgba(var(--ff-brand-rgb),0.45);cursor:pointer}
input[type=range].ff-range::-moz-range-thumb{width:22px;height:22px;border-radius:50%;background:#fff;border:3px solid var(--ff-brand);cursor:pointer}
.ff-field{font:inherit;font-size:1rem;color:var(--ff-heading);background:#fff;border:1.5px solid var(--ff-border);border-radius:0.8rem;padding:12px 14px;width:100%;transition:border-color .18s ease,box-shadow .18s ease;outline:none}
.ff-field:focus{border-color:var(--ff-brand);box-shadow:0 0 0 4px rgba(var(--ff-brand-rgb),0.12)}
details.ff-faq .ff-faq-ic{color:var(--ff-brand)}
details.ff-faq[open] .ff-faq-ic{transform:rotate(45deg);background:var(--ff-brand);color:#fff;border-color:var(--ff-brand)}
.ff-ltbl{width:100%;border-collapse:collapse;font-size:0.9rem;min-width:900px}
.ff-ltbl th,.ff-ltbl td{padding:12px 14px;text-align:left;border-bottom:1px solid #eef1f7;white-space:nowrap}
.ff-ltbl thead th{background:#f4f8ff;color:var(--ff-heading);font-weight:700;position:sticky;top:0}
.ff-ltbl td:first-child,.ff-ltbl th:first-child{white-space:normal}
.ff-ltbl tbody tr:hover{background:#fafcff}

/* ── extracted style-hover/style-focus rules (must beat inline style="") ── */
.ff-redesign .ffh-1:hover{transform:translateY(-2px) !important;box-shadow:0 14px 32px rgba(var(--ff-brand-rgb),0.38) !important}
.ff-redesign .ffh-2:hover{border-color:var(--ff-brand) !important;color:var(--ff-brand) !important}
.ff-redesign .ffh-3:hover{transform:translateY(-2px) !important}
.ff-redesign .ffh-4:hover{border-color:#a8d0ff !important}

/* ============================================================================
   Hand-finished additions (Phase 4) — interactive states for the hero package
   thumbs, configurator package options, monthly-payment switch and quickstart
   submit states. The design's selected/notSelected node variants are collapsed
   to one node + .is-selected (toggled by src/scripts/redesign/domizil.js).
   ============================================================================ */

/* Generic hide (design's sc-if swap states: extra plans, form <-> success). */
.ff-redesign .ff-hide{display:none !important}

/* Hero package thumbs (design: active = brand border/tinted, inactive = white). */
.ff-redesign .ff-pkg-thumb{min-height:72px;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:10px 6px;border-radius:0.75rem;border:2px solid var(--ff-border);background:#fff;cursor:pointer;text-align:center;font-family:inherit;transition:border-color .18s ease,background .18s ease}
.ff-redesign .ff-pkg-thumb:not(.is-selected):hover{border-color:#a8d0ff}
/* Full package names ("Standard+", "Unternehmer+"), not the old mixed-style
   abbreviations (Budget / Standard / Std+ / Premium / Untern. / Untern.+ —
   three naming conventions in one control). They only fit if the label may
   wrap and hyphenate, hence min-height 72px so a two-line name doesn't make
   the row jump. */
.ff-redesign .ff-pkg-thumb .ff-pkg-thumb-name{display:block;font-size:0.86rem;font-weight:800;color:var(--ff-heading);line-height:1.18;overflow-wrap:break-word;-webkit-hyphens:auto;hyphens:auto}
@media (max-width:520px){.ff-redesign .ff-pkg-thumb .ff-pkg-thumb-name{font-size:0.78rem}}
.ff-redesign .ff-pkg-thumb .ff-pkg-thumb-price{display:block;font-size:0.8rem;font-weight:600;color:#8b93a7;margin-top:4px}
.ff-redesign .ff-pkg-thumb.is-selected{border-color:var(--ff-brand);background:rgba(var(--ff-brand-rgb),0.07)}
.ff-redesign .ff-pkg-thumb.is-selected .ff-pkg-thumb-name{color:var(--ff-brand-deep)}
.ff-redesign .ff-pkg-thumb.is-selected .ff-pkg-thumb-price{color:var(--ff-brand);font-weight:700}

/* Configurator package options ("Bitte wählen Sie Ihr Paket"). */
.ff-redesign .ff-pkg-opt{text-align:left;padding:14px;border-radius:0.9rem;border:2px solid var(--ff-border);background:#fff;cursor:pointer;font-family:inherit;transition:border-color .18s ease,background .18s ease}
.ff-redesign .ff-pkg-opt:not(.is-selected):hover{border-color:#a8d0ff}
.ff-redesign .ff-pkg-opt .ff-pkg-opt-name{display:block;font-weight:800;color:var(--ff-heading);font-size:0.98rem}
.ff-redesign .ff-pkg-opt .ff-pkg-opt-price{display:block;font-size:0.82rem;color:#747487;margin-top:2px}
.ff-redesign .ff-pkg-opt.is-selected{border-color:var(--ff-brand);background:rgba(var(--ff-brand-rgb),0.06)}
.ff-redesign .ff-pkg-opt.is-selected .ff-pkg-opt-name{color:var(--ff-brand-deep)}
.ff-redesign .ff-pkg-opt.is-selected .ff-pkg-opt-price{color:var(--ff-brand)}

/* Monthly-payment switch (design: off = grey/left knob, on = brand/right). */
.ff-redesign .ff-toggle{width:48px;height:28px;border:none;border-radius:999px;background:#dbe2ec;padding:0 3px;display:flex;align-items:center;justify-content:flex-start;cursor:pointer;flex:none;transition:background .2s ease}
.ff-redesign .ff-toggle .ff-toggle-knob{width:22px;height:22px;border-radius:50%;background:#fff;box-shadow:0 1px 5px rgba(0,0,0,0.25);display:block}
.ff-redesign .ff-toggle.is-on{background:var(--ff-brand);justify-content:flex-end}

/* Leistungsübersicht summary: title and "Alle Leistungen anzeigen" share one
   flex row. On a narrow screen the row cannot hold both, so the label used to
   be squeezed into two or three lines and pulled the section header out of
   shape. Allowing the row to wrap moves the label onto a line of its own the
   moment it no longer fits (below ~460px) and leaves the wide layout exactly
   as it was. The inline style="" on the summary makes !important necessary. */
.ff-redesign [data-ffd="lst"] > summary{flex-wrap:wrap !important}

/* Quickstart submit states. */
.ff-redesign [data-ffd="qs-submit"][disabled]{opacity:0.65;cursor:default;transform:none !important}
.ff-redesign .ff-qs-status{font-size:0.92rem;font-weight:600;line-height:1.5}
.ff-redesign .ff-qs-status:empty{display:none}
.ff-redesign .ff-qs-status.is-error{color:#b91c1c}

/* ── Daňové srovnání na úzkých obrazovkách ───────────────────────────────────
   Pět kantonů v 230px řádku dává 38px na sloupec. Nejdelší popisek
   („Schindellegi“) potřebuje 69px, takže vyčníval 15px na každou stranu a
   slil se se sousedem do „chindellegiZug“. Zmenšit písmo nejde — do 38px by
   muselo klesnout na 7px. Pod 560px proto graf dostane vodorovné posouvání a
   sloupec 76px, do kterého se nejdelší popisek vejde i s rezervou. Všechna
   data zůstávají, jen se ke krajním kantonům šoupne; částečně viditelný
   sloupec u pravého okraje je zároveň signál, že tam ještě něco je.
   `!important` je tu proto, že rozvržení sloupců je v šabloně inline. */
@media (max-width: 560px) {
  .ff-tax-bars {
    overflow-x: auto;
    padding-bottom: 10px;
    scrollbar-width: thin;
  }
  .ff-tax-col {
    flex: 1 0 76px !important;
    min-width: 76px !important;
  }
}