/* ============================================================================
   4founder redesign — shared wizard styles (configurator + services routes).
   Enqueued by Classes/Redesign/Assets.php (shared map) on migrated routes only.
   Tokens from tokens.css; markup from Classes/Redesign/WizardMarkup.php.

   Legacy structural classes kept by the wire contract (switch_body, summary_line,
   modal_container, single_similar_company_wrapper, …) are styled here so the
   redesign pages do not depend on the Oxygen-era Classes/main.css rules.
   ============================================================================ */

/* ------------------------------------------------------------- shell/chrome */

.ffw {
  font-family: var(--ff-font);
  color: var(--ff-text);
  max-width: 920px;
  margin: 0 auto;
  padding: clamp(12px, 2vw, 28px) clamp(20px, 5vw, 44px) clamp(56px, 7vw, 96px);
  transition: opacity 0.3s ease;
}
.ffw.hidden { display: none !important; }
.ffw .hidden { display: none !important; }
.ffw-modal .hidden { display: none !important; }

.ffw-chrome {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: clamp(24px, 3vw, 40px);
  flex-wrap: wrap;
}
.ffw-progresswrap {
  flex: 1;
  min-width: 220px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.ffw-steppill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--ff-border);
  box-shadow: 0 6px 16px rgba(103, 133, 219, 0.1);
  white-space: nowrap;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ff-brand-deep);
}
.ffw-bar {
  flex: 1;
  height: 8px;
  border-radius: 999px;
  background: #e4ecf7;
  overflow: hidden;
  min-width: 80px;
}
.ffw-fill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--ff-brand), #3aa3ff);
  width: 0%;
  transition: width 0.4s ease;
}
.ffw-steplabel {
  font-size: 0.86rem;
  font-weight: 700;
  color: #747487;
  white-space: nowrap;
}
.ffw-chrome-right {
  display: flex;
  align-items: center;
  gap: 8px;
}
.ffw-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 14px;
  border-radius: 0.7rem;
  border: 1.5px solid var(--ff-border);
  background: #fff;
  color: var(--ff-text-muted);
  font-family: inherit;
  font-size: 0.86rem;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  transition: border-color 0.18s ease, color 0.18s ease;
}
.ffw-chip:hover {
  border-color: #a8d0ff;
  color: var(--ff-brand-deep);
}

/* ------------------------------------------------------------------- card */

.ffw-card {
  background: #fff;
  border: 1px solid var(--ff-border);
  border-radius: 1.5rem;
  box-shadow: 0 0 40px 8px rgba(103, 133, 219, 0.14);
  padding: clamp(26px, 3.5vw, 48px);
  min-height: 440px;
  display: flex;
  flex-direction: column;
}
.ffw-footnote {
  text-align: center;
  margin: 22px 0 0;
  font-size: 0.88rem;
  color: #8b93a7;
}

.ffw-step { display: flex; flex-direction: column; }
.ffw-h1 {
  margin: 0;
  font-size: clamp(1.6rem, 2.8vw, 2.3rem);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.04em;
  color: var(--ff-heading);
}
.ffw-h1 span { color: var(--ff-brand); }
.ffw-h2 {
  margin: 0;
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--ff-heading);
}
.ffw-intro {
  margin: 12px 0 24px;
  font-size: 1.05rem;
  line-height: 1.5;
  color: var(--ff-text-muted);
}
.ffw-subtle {
  margin: 8px 0 16px;
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--ff-text-muted);
}
.ffw-infobox {
  margin: 0 0 24px;
  padding: 16px 20px;
  background: #f7faff;
  border: 1px solid var(--ff-border);
  border-radius: 1rem;
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--ff-text-muted);
}
.ffw-infobox strong { color: var(--ff-heading); }

/* ---------------------------------------------------------------- buttons */

.ffw-btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 30px;
  border-radius: 1rem;
  background: var(--ff-brand);
  color: #fff;
  font-family: inherit;
  font-weight: 800;
  font-size: 1.02rem;
  border: none;
  cursor: pointer;
  box-shadow: 0 10px 24px rgba(var(--ff-brand-rgb), 0.28);
  transition: transform 0.2s ease;
}
.ffw-btn-primary:hover { transform: translateY(-2px); }
/* Pending state — step 1.3 waits for the register answer (audit R5-3 #07). */
.ffw-btn-primary[disabled] {
  opacity: 0.55;
  box-shadow: none;
  cursor: progress;
}
.ffw-btn-primary[disabled]:hover { transform: none; }
.ffw-btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 24px;
  border-radius: 1rem;
  background: #fff;
  color: var(--ff-text-muted);
  font-family: inherit;
  font-weight: 700;
  font-size: 1rem;
  border: 2px solid var(--ff-border);
  cursor: pointer;
  transition: border-color 0.18s ease;
}
.ffw-btn-secondary:hover { border-color: #a8d0ff; }
.ffw-btn-block { width: 100%; }
.ffw-linkbtn {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  font-family: inherit;
  font-size: 0.94rem;
  font-weight: 700;
  color: var(--ff-brand-deep);
  cursor: pointer;
  padding: 6px 0;
  text-align: left;
}
/* At the owner cap the add button is disabled and a hint takes over (R5-3 #20). */
.ffw-linkbtn:disabled {
  color: var(--ff-text-muted);
  cursor: default;
}
.ffw-owners .ffw-hint { margin: 0; }
.ffw-stepnav {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 14px;
  margin-top: auto;
  padding-top: 32px;
}
/* v14 puts the back control at the bottom of the card next to "Weiter"; the
   chrome one stays in the DOM as the data-ff hook the harness resolves. */
.ffw-stepnav .ffw-navback { margin-right: auto; }
.ffw--configurator .ffw-chrome .ffw-back { display: none; }
/* Services too (2026-08-31): the in-card "← Zurück" on the summary and e-mail
   steps is the way back the customer can see — the small chrome chip sat under
   the cookie banner on phones. The chip stays in the DOM as the data-ff hook
   the harness resolves and the in-card buttons forward their click to it. */
.ffw--services .ffw-chrome .ffw-back { display: none; }

/* Free-text panel under a selected "Noch unsicher" option. */
.ffw-unsure-note {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px 18px;
  border: 1px solid #dbeaff;
  border-radius: 0.95rem;
  background: #f7faff;
}
.ffw-hint { font-size: 0.84rem; line-height: 1.45; color: var(--ff-text-muted); }
.ffw-optional { font-weight: 600; color: var(--ff-text-muted); }

/* Flat "Ihre Auswahl" read-out on the summary (v14). */
.ffw-readout { margin: 0 0 18px; display: flex; flex-direction: column; }
.ffw-readout-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 18px;
  padding: 9px 0;
  border-bottom: 1px solid #eef1f7;
}
.ffw-readout-row:last-child { border-bottom: none; }
.ffw-readout dt { font-size: 0.88rem; font-weight: 700; color: var(--ff-text-muted); flex: none; }
.ffw-readout dd { margin: 0; font-size: 0.94rem; font-weight: 600; color: var(--ff-heading); text-align: right; }

/* ----------------------------------------------------------------- fields */

.ffw .ff-field {
  width: 100%;
  box-sizing: border-box;
  padding: 13px 15px;
  border-radius: 0.8rem;
  border: 1.5px solid var(--ff-border);
  background: #fff;
  font-family: inherit;
  font-size: 0.98rem;
  color: var(--ff-heading);
  transition: border-color 0.18s ease;
}
.ffw .ff-field:focus,
.ffw-modal .ff-field:focus {
  outline: none;
  border-color: var(--ff-brand);
}
.ffw-form {
  display: flex;
  flex-direction: column;
  gap: 18px;
  max-width: 560px;
}
.ffw-fieldgroup { display: flex; flex-direction: column; gap: 7px; }
.ffw-label {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--ff-heading);
}
.ffw-fieldwarn {
  margin-left: 8px;
  font-size: 0.82rem;
  font-weight: 700;
  color: #d64545;
}
/* "optional" marker on a label — deliberately quiet: it must read as permission to
   skip the field, not as a second heading competing with the label itself. */
.ffw-labelopt {
  margin-left: 6px;
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--ff-text-muted);
}
.ffw-fieldhint {
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--ff-text-muted);
}
.ffw-nameline {
  display: flex;
  align-items: stretch;
  gap: 10px;
  /* R5-3 #19: the suffix is white-space:nowrap, so with a 0 flex-basis on the input
     the longest form name ate the row — 149px of input for Kollektivgesellschaft
     against 264px for AG at 390px, and the placeholder read "Zum Beispiel: Mu…".
     A real basis plus wrapping drops the suffix onto its own line instead. */
  flex-wrap: wrap;
}
.ffw-nameline .ff-field { flex: 1 1 15rem; min-width: 0; }
.ffw-nameline .ffw-namesuffix { flex: 0 1 auto; }
.ffw-namesuffix {
  display: inline-flex;
  align-items: center;
  padding: 0 14px;
  border-radius: 0.8rem;
  background: #f4f8ff;
  border: 1.5px solid var(--ff-border);
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--ff-brand-deep);
  white-space: nowrap;
}
.ffw-namesuffix:empty { display: none; }
.ffw-addr { max-width: 560px; }
.ffw-addr-line { display: flex; gap: 10px; }
.ffw-grow { flex: 1 1 auto; }
.ffw-short { flex: 0 1 130px; }
.ffw-charcount {
  font-size: 0.8rem;
  color: #8b93a7;
  text-align: right;
}

/* ------------------------------------------------------------ owner rows */

.ffw-owners { display: flex; flex-direction: column; gap: 14px; max-width: 560px; }
.ffw-owner-rows { display: flex; flex-direction: column; gap: 18px; }
.ffw-owner-row { display: flex; flex-direction: column; gap: 10px; }
.ffw-owner-fields { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
/* R5-3 #18: "Vorname(n) gemäss Ausweis" measures 210px, so a 180px basis clipped
   it. 240 + 130 + 130 + two 10px gaps = 520px, inside the 560px .ffw-owners cap. */
.ffw-owner-row .name { flex: 1 1 240px; }
/* "weiterer Vorname" measures 128px, so its box needs 158px with the field
   padding: 240 + 160 + 130 + two 10px gaps = 550px, still inside the cap. */
.ffw-owner-row .middle_name { flex: 1 1 160px; }
.ffw-owner-row .surname { flex: 1 1 130px; }
.ffw-owner-row .company_name_field { flex: 1 1 200px; }
.ffw-owner-row .company_seat_field { flex: 1 1 160px; }
.ffw-owner-row .company_uid_field { flex: 1 1 160px; }

/* Natürliche Person / Unternehmen switch (Konfigurator-v14). */
.ffw-entity-toggle {
  display: inline-flex;
  align-self: flex-start;
  padding: 3px;
  border: 1px solid var(--ff-border);
  border-radius: 999px;
  background: #f7faff;
}
.ffw-entity-btn {
  border: none;
  background: none;
  font: inherit;
  font-size: 0.86rem;
  font-weight: 700;
  color: var(--ff-text-muted);
  padding: 7px 16px;
  border-radius: 999px;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease;
}
.ffw-entity-btn.active { background: #fff; color: var(--ff-brand-deep); box-shadow: 0 1px 3px rgba(9, 22, 52, 0.12); }
/* Remove-person button — only on rows after the first (added by wizard-configurator.js). */
.ffw .ffw-owner-remove {
  flex: none;
  width: 34px;
  height: 34px;
  border: 1px solid var(--ff-border);
  border-radius: 50%;
  background: #fff;
  color: var(--ff-text-muted);
  font-size: 1.15rem;
  line-height: 1;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.ffw .ffw-owner-remove:hover,
.ffw .ffw-owner-remove:focus-visible {
  color: #c0392b;
  border-color: #c0392b;
  background: rgba(192, 57, 43, 0.06);
}
@media (max-width: 560px) {
  /* Inputs stack on narrow screens; keep the button on its own trailing line. */
  .ffw-owner-row .name,
  .ffw-owner-row .middle_name,
  .ffw-owner-row .surname { flex: 1 1 100%; }
  .ffw .ffw-owner-remove { margin-left: auto; }
}

/* ----------------------------------------------------------- details box */

.ffw-details {
  margin-top: 20px;
  background: #f7faff;
  border: 1px solid var(--ff-border);
  border-radius: 1rem;
  overflow: hidden;
}
.ffw-details summary {
  list-style: none;
  cursor: pointer;
  padding: 16px 20px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1rem;
  font-weight: 700;
  color: var(--ff-heading);
}
.ffw-details summary::-webkit-details-marker { display: none; }
.ffw-details summary::before {
  content: 'i';
  display: inline-grid;
  place-items: center;
  width: 19px;
  height: 19px;
  flex: none;
  border-radius: 6px;
  background: #eaf4ff;
  color: var(--ff-brand);
  font-size: 0.72rem;
  font-weight: 800;
  font-style: normal;
}
.ffw-details-body {
  padding: 0 20px 20px;
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--ff-text-muted);
}
.ffw-details-body strong { color: var(--ff-heading); }
.ffw-details-body ul { margin: 0; padding-left: 20px; }
.ffw-details-body li { margin-bottom: 6px; }

/* --------------------------------------------------------- legal-form grid */

.ffw-rf-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
.ffw-rf-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 22px 20px;
  border-radius: 1.1rem;
  border: 2px solid var(--ff-border);
  background: #fff;
  cursor: pointer;
  transition: border-color 0.18s ease;
}
.ffw-rf-card:hover { border-color: #a8d0ff; }
.ffw-rf-card.active,
.ffw-rf-card.is-selected {
  border-color: var(--ff-brand);
  background: rgba(var(--ff-brand-rgb), 0.06);
}
.ffw-pill {
  position: absolute;
  top: -11px;
  left: 18px;
  background: #eaf2fe;
  color: var(--ff-brand-deep);
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid #cfe2f7;
  white-space: nowrap;
}
.ffw-rf-card.active .ffw-pill,
.ffw-rf-card.is-selected .ffw-pill {
  background: var(--ff-brand);
  color: #fff;
  border-color: var(--ff-brand);
}
.ffw-rf-name {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--ff-heading);
}
.ffw-rf-card.active .ffw-rf-name,
.ffw-rf-card.is-selected .ffw-rf-name { color: var(--ff-brand-deep); }
.ffw-rf-vp {
  font-size: 0.9rem;
  color: var(--ff-text-muted);
  margin: 6px 0 14px;
  line-height: 1.4;
  min-height: 2.5em;
}
.ffw-rf-feats { display: flex; flex-direction: column; gap: 8px; flex: 1; }
.ffw-feat {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  font-size: 0.86rem;
  color: #1b1b1b;
  line-height: 1.35;
}
.ffw-feat svg { flex: none; margin-top: 3px; color: var(--ff-brand); }
.ffw-rf-price {
  margin-top: 15px;
  padding-top: 13px;
  border-top: 1px solid #eef1f7;
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--ff-heading);
}

/* ------------------------------------------------------------ domicile grid */

.ffw-dom-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  align-items: stretch;
}
.ffw-dom-card {
  padding: 22px;
  border-radius: 1rem;
  border: 2px solid var(--ff-border);
  background: #fff;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  transition: border-color 0.18s ease;
}
.ffw-dom-card:hover { border-color: #a8d0ff; }
.ffw-dom-card.active,
.ffw-dom-card.is-selected {
  border-color: var(--ff-brand);
  background: rgba(var(--ff-brand-rgb), 0.06);
}
.ffw-dom-card--wide { grid-column: 1 / -1; }
.ffw-dom-name { font-size: 1.08rem; font-weight: 800; color: var(--ff-heading); }
.ffw-dom-card.active .ffw-dom-name { color: var(--ff-brand-deep); }
.ffw-dom-desc {
  font-size: 0.88rem;
  color: var(--ff-text-muted);
  margin-top: 6px;
  line-height: 1.4;
}
.ffw-dom-price {
  margin-top: 10px;
  font-size: 0.98rem;
  font-weight: 800;
  color: var(--ff-heading);
}
.ffw-dom-note { margin-top: 6px; font-size: 0.82rem; color: #6e7180; }

/* ------------------------------------------------------------ option rows */

.ffw-options { display: flex; flex-direction: column; gap: 12px; }
.ffw-option {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 18px;
  border-radius: 0.95rem;
  border: 2px solid var(--ff-border);
  background: #fff;
  cursor: pointer;
  transition: border-color 0.18s ease;
}
.ffw-option:hover { border-color: #a8d0ff; }
.ffw-option.active,
.ffw-option.is-selected {
  border-color: var(--ff-brand);
  background: rgba(var(--ff-brand-rgb), 0.05);
}
.ffw-checkbox {
  width: 26px;
  height: 26px;
  border-radius: 8px;
  border: 2px solid #cdd6e6;
  background: #fff;
  flex: none;
  margin-top: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: transparent;
  box-sizing: border-box;
}
.ffw-option.active .ffw-checkbox,
.ffw-option.is-selected .ffw-checkbox {
  background: var(--ff-brand);
  border-color: var(--ff-brand);
  color: #fff;
}
.ffw-option-body { flex: 1; min-width: 0; }
.ffw-option-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: baseline;
  /* R5-3 #11: the price is white-space:nowrap and the name could not shrink below
     its min-content width, so on a narrow phone the price was pushed outside the
     viewport (320px: 5 prices on step 3.1; 360px: 2; 390px: "Preis auf Anfrage")
     and a wrapping name overlapped it. Let the row wrap and the name shrink; on
     any width with room — every desktop and tablet — nothing moves. */
  flex-wrap: wrap;
}
.ffw-option-name {
  font-size: 1rem;
  font-weight: 700;
  color: var(--ff-heading);
  flex: 1 1 auto;
  min-width: 0;
  overflow-wrap: anywhere;
}
.ffw-option-price {
  font-size: 0.9rem;
  font-weight: 800;
  color: var(--ff-brand-deep);
  white-space: nowrap;
}
.ffw-option-desc {
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--ff-text-muted);
  margin-top: 4px;
}
.ffw-option-bullets {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  margin-top: 10px;
}
.ffw-bullet {
  display: inline-flex;
  gap: 6px;
  align-items: baseline;
  font-size: 0.85rem;
  color: #6a6a6a;
}
.ffw-bullet::before {
  content: '\2022';
  color: var(--ff-brand);
  font-weight: 800;
}

/* ---------------------------------------------------------------- summary */

.ffw-donecheck {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(22, 163, 74, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  color: #16a34a;
}
.ffw-donecheck svg { width: 34px; height: 34px; }
.ffw-sumblock { text-align: left; margin-bottom: 26px; }
.ffw-sumblock-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}
.ffw-ber-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}
.ffw-ber-card {
  padding: 18px;
  border-radius: 1rem;
  border: 2px solid var(--ff-border);
  background: #fff;
  cursor: pointer;
  transition: border-color 0.18s ease;
  /* R5-3 #21: the cards already stretch to equal height as grid items, but the
     price followed the description directly, so headings that wrap differently
     ("Persönlich in Schindellegi") left the three price lines 21px apart at
     1440px. A column layout with the price pushed to the bottom lines them up. */
  display: flex;
  flex-direction: column;
}
.ffw-ber-card:hover { border-color: #a8d0ff; }
.ffw-ber-card.active {
  border-color: var(--ff-brand);
  background: rgba(var(--ff-brand-rgb), 0.06);
}
.ffw-ber-name { font-size: 0.98rem; font-weight: 800; color: var(--ff-heading); }
.ffw-ber-card.active .ffw-ber-name { color: var(--ff-brand-deep); }
.ffw-ber-desc {
  font-size: 0.86rem;
  color: var(--ff-text-muted);
  margin-top: 6px;
  line-height: 1.4;
}
.ffw-ber-price {
  /* auto pins the price to the bottom of the equal-height card (R5-3 #21); the
     padding keeps the 8px gap the design shows when the card is not stretched. */
  margin-top: auto;
  padding-top: 8px;
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--ff-heading);
}
.ffw-ber-card .switch_dot { display: none; }

.ffw-sumgroup {
  border: 1px solid var(--ff-border);
  border-radius: 1.1rem;
  background: #fff;
  margin-bottom: 12px;
  overflow: hidden;
}
.ffw-sumgroup-head {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 20px;
  background: none;
  border: none;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 800;
  color: var(--ff-heading);
  cursor: pointer;
  text-align: left;
}
.ffw-sumgroup-caret { color: #8b93a7; }
.ffw-sumgroup-body {
  padding: 0 20px 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ffw-switchline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 0;
  border-top: 1px solid #eef1f7;
}
.ffw-switchline-name {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--ff-heading);
}
.ffw-switchline-desc {
  font-size: 0.84rem;
  line-height: 1.45;
  color: var(--ff-text-muted);
}

/* Legacy switch element (frozen ids switch_*), modernized look. */
.ffw .switch_body {
  position: relative;
  width: 44px;
  height: 26px;
  border-radius: 999px;
  background: #dde4ef;
  flex: none;
  cursor: pointer;
  transition: background 0.18s ease;
}
.ffw .switch_body .switch_dot {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 6px rgba(9, 22, 52, 0.2);
  transition: transform 0.18s ease;
}
.ffw .switch_body.active { background: var(--ff-brand); }
.ffw .switch_body.active .switch_dot { transform: translateX(18px); }
/* Comfortable touch target on coarse pointers without changing the visual
   26px pill — the pseudo only widens the hit area (the knob is .switch_dot,
   a child element, so ::after is free). */
@media (pointer: coarse) {
  .ffw .ffw-switchline .switch_body::after {
    content: '';
    position: absolute;
    inset: -10px -8px;
  }
}
/* Consultation cards are switch_body carriers but render as radio cards. */
.ffw .ffw-ber-card.switch_body {
  width: auto;
  height: auto;
  border-radius: 1rem;
  background: #fff;
}
.ffw .ffw-ber-card.switch_body.active { background: rgba(var(--ff-brand-rgb), 0.06); }

/* ------------------------------------------------------------- cost panel */

.ffw-costs { text-align: left; margin-bottom: 18px; }
.ffw-costcard {
  background: #fff;
  border: 1px solid var(--ff-border);
  border-radius: 1.1rem;
  padding: 18px 20px;
  margin-bottom: 12px;
}
.ffw-costcard.ffw-empty { display: none; }
.ffw-costcard-head {
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #8b93a7;
  padding-bottom: 8px;
  border-bottom: 1px solid #eef1f7;
  margin-bottom: 6px;
}
.ffw .summary_line {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 14px;
  font-size: 0.96rem;
  padding: 8px 0;
  border-bottom: 1px solid #eef1f7;
}
.ffw .summary_line:last-child { border-bottom: none; }
.ffw .service_text { color: var(--ff-text-muted); }
/* R5-3 #22: with space-between and three children the price wrapper floated between
   the name and the remove-X, so its right edge moved with the name's length (48px of
   spread across five rows). Let the name take the slack and pin the price right. */
.ffw .summary_line .service_name_wrapper { flex: 1 1 auto; min-width: 0; }
.ffw .summary_line .service_cost_wrapper { flex: 0 0 auto; margin-left: auto; text-align: right; }
.ffw .service_price {
  color: var(--ff-heading);
  font-weight: 700;
  white-space: nowrap;
  text-align: right;
}
.ffw .service_price:empty::before {
  content: 'nach Bedarf';
  color: var(--ff-brand-deep);
  font-weight: 600;
}
.ffw .summary_line_remove_btn {
  background: none;
  border: none;
  /* The glyph IS the affordance here (the button has no visible label), so it
     falls under the 3:1 minimum for UI components. #aeb6c7 was 2.03:1. */
  color: #6b7385;
  font-size: 0.9rem;
  cursor: pointer;
  padding: 0 0 0 6px;
  line-height: 1;
}
.ffw .summary_line_remove_btn:hover { color: #d64545; }
.ffw-costnote {
  display: none;
  gap: 9px;
  align-items: flex-start;
  padding: 12px 14px;
  border-radius: 0.8rem;
  background: #f7faff;
  border: 1px solid #eef1f7;
  margin-bottom: 14px;
  font-size: 0.8rem;
  line-height: 1.45;
  color: #747487;
}
.ffw-costnote.is-visible { display: flex; }
.ffw-costnote-icon { flex: none; margin-top: 1px; }
.ffw-costnote strong { color: var(--ff-heading); }
.ffw-totals { border-top: 1px solid #eef1f7; }
.ffw-totalline {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 0 0;
  font-size: 1.02rem;
}
.ffw-totalline span:first-child { color: var(--ff-heading); font-weight: 800; }
.ffw-totalline span:last-child {
  color: var(--ff-brand-deep);
  font-weight: 800;
  white-space: nowrap;
}

/* --------------------------------------------------------- zefix results */

.ffw-similar {
  border: 1px solid var(--ff-border);
  border-radius: 0.9rem;
  background: #f7faff;
  padding: 8px 14px;
}
/* The list used to be four bare rows with no idea what they were (R5-3 #07). */
.ffw-similar-intro {
  margin: 6px 0 2px;
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1.4;
  color: var(--ff-heading);
}
/* Pending line while the register is being asked (R5-3 #07). */
.ffw-namecheck { margin: 0; }
.ffw .single_similar_company_wrapper {
  padding: 9px 0;
  border-bottom: 1px solid #eef1f7;
}
.ffw .single_similar_company_wrapper:last-child { border-bottom: none; }
.ffw .ssc_line_one {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: baseline;
}
.ffw .similar_company_name { font-size: 0.92rem; font-weight: 700; color: var(--ff-heading); }
/* The legal form is spelled out now ("Einzelunternehmen", not "EIU"), so it
   has to be allowed to wrap instead of pushing the row wide (R5-3 #12). */
.ffw .similar_company_type { font-size: 0.8rem; font-weight: 700; color: var(--ff-brand-deep); text-align: right; }
.ffw .vat_number_text { font-size: 0.76rem; color: #8b93a7; letter-spacing: 0.04em; }

/* ------------------------------------------------------- email + booking */

.ffw-email-wrapper { display: flex; flex-direction: column; flex: 1; }
.ffw-booking { min-height: 480px; }
.ffw-pdf { margin: 6px 0 0; }
.ffw-pdf a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--ff-brand-deep);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ---------------------------------------------------------------- comment */

.ffw-comment { text-align: left; margin: 6px 0 8px; }
.ffw-comment .comment_field_wrapper {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
}

/* -------------------------------------------------------------- dashboard */

.ffw--services { max-width: 1240px; }
.ffw-services-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: clamp(24px, 3vw, 36px);
  align-items: start;
}
.ffw-services-main { min-width: 0; }
.ffw-card--services { min-height: 0; }
/* Hide the (empty) step card while the dashboard is the active view. */
.ffw-card--services:not(:has(.ffw-step:not(.hidden))) { display: none; }
/* Services-v14 catalogue: every category and row on one page, expandable in
   place. The rows carry the frozen payload keys as ids — see WizardMarkup. */
.ffw-catalog {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-bottom: 20px;
}
/* The catalogue is the whole page here; the wizard chrome only appears from the
   confirm step on (wizard-services.js toggles .is-catalog). */
.ffw--services.is-catalog .ffw-chrome { display: none; }

.ffw-catcard {
  background: #fff;
  border: 1px solid var(--ff-border);
  border-radius: 1.3rem;
  box-shadow: 0 0 20px 4px rgba(103, 133, 219, 0.1);
  overflow: hidden;
}
.ffw-catcard-head {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 28px 30px 20px;
}
.ffw-catcard-icon {
  width: 52px;
  height: 52px;
  flex: none;
  border-radius: 1rem;
  background: rgba(var(--ff-brand-rgb), 0.09);
  display: flex;
  align-items: center;
  justify-content: center;
}
.ffw-catcard-icon img { width: 26px; height: 26px; }
.ffw-catcard-intro { flex: 1; min-width: 0; }
.ffw-catcard-intro .ffw-h2 {
  margin: 0 0 6px;
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--ff-heading);
}
.ffw-cat-desc {
  margin: 0;
  font-size: 0.98rem;
  line-height: 1.5;
  color: var(--ff-text-muted);
}
.ffw-catcard-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 0 30px 26px;
}

.ffw-srow {
  border: 1px solid var(--ff-border);
  border-radius: 0.95rem;
  background: #fff;
  transition: border-color .18s ease;
}
.ffw-srow.is-selected { border-color: #a8d0ff; }
.ffw-srow-head {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 13px 15px;
}
/* The disclosure is a real button spanning name → price → caret, so the row
   still reads as one wide target without nesting the checkbox inside it. */
.ffw-srow-toggle {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 0;
  border: none;
  background: none;
  font: inherit;
  text-align: left;
  cursor: pointer;
  color: inherit;
}
.ffw-srow-check:focus-visible,
.ffw-srow-toggle:focus-visible {
  outline: 2px solid var(--ff-brand);
  outline-offset: 3px;
  border-radius: 0.6rem;
}
.ffw-srow-check {
  width: 26px;
  height: 26px;
  flex: none;
  padding: 0;
  border: 2px solid #cdd6e6;
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: transparent;
  transition: background-color .15s ease, border-color .15s ease;
}
.ffw-srow-check:hover { border-color: #a8d0ff; }
.ffw-srow.is-selected .ffw-srow-check {
  background: var(--ff-brand);
  border-color: var(--ff-brand);
  color: #fff;
}
.ffw-srow-name {
  flex: 1;
  min-width: 0;
  font-size: 0.98rem;
  font-weight: 600;
  color: var(--ff-heading);
}
.ffw-srow-price {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--ff-brand-deep);
  white-space: nowrap;
}
/* #aeb6c7 measured 2.03:1 on white at 13px — a PRICE label nobody could read
   ("ab CHF 119/halbtags", "Preis auf Anfrage"). #6b7385 is 4.76:1, i.e. AA for
   small text, and stays in the same grey family so the row still reads as
   de-emphasised. Same change on the empty-state line below. */
.ffw-srow-price.is-muted { font-size: 0.82rem; font-weight: 600; color: #6b7385; }
.ffw-srow-caret {
  flex: none;
  display: flex;
  color: #aeb6c7;
  transition: transform .18s ease, color .18s ease;
}
.ffw-srow.is-open .ffw-srow-caret { transform: rotate(90deg); color: var(--ff-brand); }
.ffw-srow-detail {
  display: flex;
  gap: 18px;
  padding: 2px 16px 18px;
  border-top: 1px solid #eef1f7;
}
/* The photo the design reserves at 128x104 (Services-v15-yves, image-slot).
   Rendered from assets/img/redesign/services/ at 420x314 so it stays sharp
   on retina; see WizardMarkup::service_photos(). */
.ffw-srow-photo {
  flex: none;
  width: 128px;
  height: 104px;
  margin-top: 14px;
  border-radius: 0.7rem;
  object-fit: cover;
  background: #eef1f7;
}
.ffw-srow-detail-body {
  flex: 1;
  min-width: 0;
  margin-top: 14px;
}
.ffw-srow-desc {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--ff-text-muted);
}
.ffw-srow-bullets {
  margin: 10px 0 0;
  padding-left: 18px;
  columns: 2;
  column-gap: 22px;
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--ff-text-muted);
}
.ffw-srow-bullets li { break-inside: avoid; }

.ffw-sidebar {
  position: sticky;
  top: 120px;
  background: #fff;
  border: 1px solid var(--ff-border);
  border-radius: 1.4rem;
  box-shadow: 0 0 30px 6px rgba(103, 133, 219, 0.16);
  padding: clamp(24px, 2.4vw, 30px);
}
.ffw-sidebar .ffw-costcard {
  border: none;
  border-radius: 0;
  padding: 0 0 12px;
  margin-bottom: 4px;
}
.ffw-sidebar .ffw-costcard.ffw-empty { display: block; }
.ffw-costcard-empty { display: none; }
.ffw-sidebar .ffw-costcard.ffw-empty .ffw-costcard-empty {
  display: block;
  font-size: 0.86rem;
  color: #6b7385;                /* 4.76:1, was #aeb6c7 at 2.03:1 */
  padding: 8px 0;
}
.ffw-sidebar .ffw-btn-primary { margin-top: 12px; }

/* ---------------------------------------------------- configurator basket */
/* The "Übersicht" panel beside the configurator card (WizardMarkup::
   configurator_sidebar) — the Oxygen-era sticky basket, back by client request.
   Desktop only: below 1100px the 6.1 summary is the customer's overview; the
   e-mail/booking screens (.is-endgame, set by wizard-configurator.js
   setChrome()) drop it and the shell narrows back to the card width. */
.ffw-configurator-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(24px, 3vw, 36px);
  align-items: start;
}
.ffw-configurator-main { min-width: 0; }
.ffw-sidebar--configurator { display: none; top: 24px; }
@media (min-width: 1100px) {
  .ffw--configurator:not(.is-endgame) { max-width: 1260px; }
  .ffw--configurator:not(.is-endgame) .ffw-configurator-grid { grid-template-columns: minmax(0, 1fr) 340px; }
  .ffw--configurator:not(.is-endgame) .ffw-sidebar--configurator { display: block; }
}

/* --------------------------------------------- services mobile confirm bar */
/* WizardMarkup::services_mobilebar — the catalogue's "continue" control on
   narrow screens, where the sidebar CTA lands under all 23 rows. Shown only
   while the catalogue is the active view (.is-catalog). */
.ffw-services-mobilebar { display: none; }
@media (max-width: 980px) {
  .ffw--services.is-catalog .ffw-services-mobilebar,
  .ffw--services.is-summary .ffw-services-mobilebar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 500;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
    background: rgba(255, 255, 255, 0.94);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    border-top: 1px solid #e4e9f2;
    box-shadow: 0 -10px 30px rgba(9, 22, 52, 0.08);
  }
  /* The bar overlaps the page end — give the catalogue / summary room. */
  .ffw--services.is-catalog,
  .ffw--services.is-summary { padding-bottom: 100px; }
  .ffw-services-mobilebar-totals {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    font-size: 0.8rem;
    line-height: 1.3;
    color: var(--ff-text-muted);
  }
  .ffw-services-mobilebar-line strong { color: var(--ff-heading); font-weight: 800; margin-left: 4px; }
  .ffw-services-mobilebar-empty { display: none; font-weight: 700; }
  .ffw-services-mobilebar-totals:not(:has([data-ffw-total]:not(.hidden))) .ffw-services-mobilebar-empty { display: inline; }
  .ffw-services-mobilebar-btn { flex: none; padding: 12px 18px; font-size: 0.92rem; }
}

/* --------------------------------------------------------------- modal */

.ffw-modal,
.modal_container.ffw-modal {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(7, 7, 35, 0.45);
  padding: 20px;
}
.ffw-modal-box,
.ffw-modal .alert {
  position: relative;
  background: #fff;
  border-radius: 1.2rem;
  box-shadow: 0 24px 70px rgba(7, 19, 39, 0.3);
  padding: 28px;
  width: min(440px, 100%);
  display: flex;
  flex-direction: column;
  gap: 14px;
  text-align: left;
}
/* Corner close control (audit R5-3 #17): the dialogs could only be dismissed
   by a click outside or Escape, neither of which anybody can see. Absolutely
   positioned, so it stays out of the box's flex flow. */
.ffw-modal-close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 34px;
  height: 34px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--ff-text-muted);
  font-family: var(--ff-font);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
}
.ffw-modal-close:hover { background: #f1f4fa; color: var(--ff-heading); }
.ffw-modal-close:focus-visible { outline: 2px solid var(--ff-brand); outline-offset: 2px; }
.ffw-modal-box h1 {
  margin: 0;
  padding-right: 34px;
  font-size: 1.3rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--ff-heading);
  font-family: var(--ff-font);
}
.ffw-modal-box p {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--ff-text-muted);
  font-family: var(--ff-font);
}
.ffw-modal-box .alert_text { color: #d64545; font-weight: 700; font-size: 0.88rem; }
.ffw-modal-box .ff-field,
.ffw-modal-box .form_field {
  width: 100%;
  box-sizing: border-box;
  padding: 13px 15px;
  border-radius: 0.8rem;
  border: 1.5px solid var(--ff-border);
  font-family: var(--ff-font);
  font-size: 0.98rem;
  color: var(--ff-heading);
}
.ffw-modal-box .button_div_primary { cursor: pointer; font-family: var(--ff-font); }
/* Two-button confirm (ui.confirmAction): side by side, stacking when narrow. */
.ffw-modal-box .ffw-modal-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.ffw-modal-box .ffw-modal-actions > * {
  flex: 1 1 150px;
  justify-content: center;
  text-align: center;
}

/* ------------------------------------------------------------- responsive */

@media (max-width: 980px) {
  .ffw-services-grid { grid-template-columns: 1fr; }
  .ffw-sidebar { position: static; }
}
@media (max-width: 720px) {
  .ffw { padding-left: 16px; padding-right: 16px; }
  .ffw-catcard-head { padding: 22px 18px 16px; }
  .ffw-catcard-list { padding: 0 18px 20px; }
  .ffw-srow-bullets { columns: 1; }
  .ffw-srow-detail { flex-direction: column; gap: 12px; }
  .ffw-srow-photo { width: 100%; height: 130px; margin-top: 14px; }
  .ffw-srow-detail-body { margin-top: 0; }
  .ffw-srow-toggle { flex-wrap: wrap; row-gap: 4px; }
  .ffw-srow-name { flex: 1 1 60%; }
  .ffw-rf-grid,
  .ffw-dom-grid { grid-template-columns: 1fr; }
  .ffw-dom-card--wide { grid-column: auto; }
  .ffw-chrome { gap: 10px; }
  /* Progress comes FIRST on narrow screens. It used to be order:3, which put
     the "Neu anfangen" chip alone on the top line with the bar it resets
     stranded underneath it — on step 1 (no Back button yet) the row read as a
     single orphaned destructive action. */
  .ffw-progresswrap { order: 1; flex-basis: 100%; min-width: 0; flex-wrap: wrap; }
  /* The step label is the only thing in the chrome that names where you are, and on a
     narrow phone it was the thing that disappeared: .ffw-bar holds an 80px floor and the
     label may not wrap, so the row's minimum exceeded the viewport and the label was
     pushed off-screen entirely — 112px out at 320-414px, 135px on the summary, where
     "Zusammenfassung" is longest. Letting the row wrap and the bar shrink keeps the
     label on screen. Confined to <=720px, so the desktop chrome is untouched. */
  .ffw-bar { min-width: 40px; }
  .ffw-steplabel { white-space: normal; }
  .ffw-back { order: 2; }
  .ffw-chrome-right { order: 3; margin-left: auto; }
  .ffw-card { padding: 20px 16px; border-radius: 1.1rem; }
  .ffw-stepnav { flex-wrap: wrap; }
  .ffw-stepnav .ffw-btn-primary { width: 100%; justify-content: center; }
  .ffw-addr-line { flex-wrap: wrap; }
  .ffw-short { flex: 1 1 100%; }
}

/* The selection screens run without the site menu — the client asked for the
   header to disappear once the wizard starts and to come back on the landing
   page (Konfigurator-v14 renders it inside the not-started branch only).
   body.ff-wizard-top is set/cleared by wizard-configurator.js. */
body.ff-redesign.ff-wizard-top .ff-header-wrap { display: none; }
body.ff-redesign.ff-wizard-top [data-ff="wizard"] {
  margin-top: clamp(16px, 3vw, 32px);
}