.ranked { display: grid; gap: 10px; }
.ranked .chips { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; padding: 4px 0; justify-content: center; }
.ranked .chips button { padding: 14px 18px; }
.ranked label { display: grid; gap: 5px; }
.ranked select { padding: 12px; background: #ececec; border: 0; border-radius: 12px; }
.stepper { display: flex; align-items: center; gap: 8px; }
.stepper button, .choice-button { padding: 11px; background: #000; border: 0; border-radius: 12px; color: #fff; }
.stepper input { max-width: 100px; text-align: center; }
.tip { display: grid; gap: 4px; padding: 16px; background: #ececec; border-radius: 15px; }
.video > img { width: 54px; height: 54px; margin-right: 10px; border-radius: 50%; object-fit: cover; vertical-align: middle; }
.recommendation { margin: 15px 0; color: #333; font-weight: 700; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips button { padding: 10px 14px; background: #ececec; border: 0; border-radius: 50px; color: #000; font: inherit; font-size: .95rem; cursor: pointer; }
.chips button.selected { background: #faff00; }
.ranked .chips button.rank-1 { background: #1d6b3a; outline-color: #124c28; outline-style: solid; outline-width: 4px; color: #fff; }
.ranked .chips button.rank-2 { background: #62a66f; outline-color: #43824f; outline-style: solid; outline-width: 3px; color: #102b18; }
.ranked .chips button.rank-3 { background: #b8dfbe; outline-color: #8fc69a; outline-style: solid; outline-width: 2px; color: #102b18; }
.chips button span { display: inline-grid; min-width: 20px; margin-right: 4px; place-items: center; font-weight: 800; }
.manufacturer-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: stretch; }
.manufacturer-cards .choice span { display: flex; height: 100%; flex-direction: column; justify-content: center; text-align: center; font-size: 1.05rem; font-weight: 400; }
.manufacturer-logo { display: block; width: 100%; height: 42px; margin-bottom: 8px; object-fit: contain; border-radius: 8px; }
.manufacturer-name { display: block; font-weight: 600; }
.details-description { margin: 12px 0 6px; color: #333; }
.funding-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 14px; }
.funding-cards .choice.selected span { background: #faff00; }
.funding-approved-options { margin-top: 18px; }
.funding-approved-options .approved-path-heading { margin: 0 0 4px; font-weight: 700; }
.funding-approved-options .choices { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.funding-cards .choice-button { min-height: 58px; background: #f3f3ef; color: #000; font: inherit; }
.choice-button.selected { background: #faff00; color: #000; }
.income-guidance { margin: 18px 0; padding: 16px; background: #f3f3ef; border-radius: 15px; }
.income-guidance summary { display: flex; align-items: center; gap: 10px; cursor: pointer; font-weight: 700; }
.info-icon { display: inline-grid; width: 24px; height: 24px; place-items: center; background: #000; border-radius: 50%; color: #fff; font-family: serif; font-weight: 700; }
.info-panel { margin-top: 12px; color: #333; }
.funding-rate span { display: inline; margin: 0; font-size: inherit; }
.funding-rate-head strong { font-size: 1.05rem; }
/* Inline with the rate text: the icon stays below cap height. The transparent
   button is a 44px touch target whose negative margins keep the former 26px
   footprint, so the dock does not grow. The extra width extends over the
   static rate text, not over the adjacent mobile toggle (#2468). */
.rate-edit { display: inline-flex; min-width: 44px; min-height: 44px; margin: -10px -6px -10px -12px; padding: 0; align-items: center; justify-content: center; vertical-align: baseline; background: transparent; border: 0; border-radius: 6px; color: #333; cursor: pointer; font-size: 1.05rem; line-height: 1; }
.rate-edit svg { width: 0.9em; height: 0.9em; }
/* The hit area overlaps the rate badge, so hover highlights only the glyph. */
.rate-edit:hover { color: #000; }
.rate-edit:hover svg { background: #0000000d; border-radius: 3px; box-shadow: 0 0 0 4px #0000000d; }
.rate-editor { margin-top: 10px; }
.rate-editor label, .manual-rate-fallback label { display: block; margin-bottom: 6px; font-weight: 700; }
.rate-editor-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.rate-editor input, .manual-rate-fallback input { width: 7em; min-height: 48px; padding: 10px 12px; background: #fff; border: 0; border-radius: 12px; color: #000; font: inherit; }
.link-button { padding: 0; background: none; border: 0; color: inherit; cursor: pointer; font: inherit; font-weight: 400; text-decoration: underline; }
/* 44px touch target for the 22px text link; the margins keep its 12px offset and
   line box, and the hit area stays inside the gap below the buttons (#2468). */
.rate-editor .link-button { display: inline-flex; align-items: center; min-height: 44px; margin: 1px 0 -11px; }
.funding-breakdown { margin: 8px 0 0; padding: 0; list-style: none; font-size: .9rem; }
.funding-breakdown li { display: flex; justify-content: space-between; gap: 12px; max-width: 420px; padding: 3px 0; }
.funding-cap { color: #333; }
.funding-warning, .funding-unavailable { margin: 10px 0 0; }
.consent-checkbox { display: flex; gap: 14px; align-items: flex-start; padding: 18px 20px; background: #ececec; border-radius: 12px; line-height: 1.5; cursor: pointer; }
/* Contact step (#2401): short labelled sections, related fields side by side. */
.form-section--person .section-fields, .form-section--project-address .section-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 20px; }
.form-section--project-address .section-fields { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
.form-section--person .section-fields > .field, .form-section--project-address .section-fields > .field { grid-column: 1 / -1; margin-top: 0; }
#field-firstName, #field-lastName, #field-email, #field-phone, #field-postalCode, #field-city { grid-column: auto !important; }
.question-card > #field-dataUsageConsent { margin-top: 56px; }
/* Floating KfW 458 rate (#2401): a dark rounded bar centred above Zurück / Weiter. */
.rate-dock .funding-rate { width: fit-content; max-width: 100%; margin: 0; padding: 14px 22px; background: #000; border-radius: 20px; box-shadow: 0 10px 30px #00000038; color: #fff; }
.rate-dock .funding-rate-head { display: flex; align-items: center; justify-content: center; gap: 6px; flex-wrap: wrap; }
.rate-dock .funding-rate-head strong { font-size: 1.05rem; }
.rate-dock .estimate-value { color: #000; }
.rate-dock .rate-edit, .rate-dock .rate-edit:hover { color: #fff; }
.rate-dock .rate-edit:hover svg { background: #ffffff26; box-shadow: 0 0 0 4px #ffffff26; }
.rate-dock .funding-breakdown { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px 18px; margin: 6px 0 0; font-size: .85rem; color: #ddd; }
.rate-dock .funding-breakdown li { max-width: none; padding: 0; gap: 6px; }
.rate-dock .funding-breakdown li.funding-cap { display: block; flex-basis: 100%; color: #bbb; text-align: center; }
.rate-dock .rate-editor-actions .button:not(.primary) { background: #fff; color: #000; }
/* The page-wide primary hover turns black, which would vanish on the black bar. */
.rate-dock .button:hover { background: #fff; color: #000; }
.rate-dock .rate-editor { text-align: left; }
.breakdown-toggle { display: none; padding: 0; background: none; border: 0; color: inherit; cursor: pointer; font: inherit; font-size: .85rem; text-decoration: underline; }
.consent-checkbox input { width: 22px; height: 22px; flex: 0 0 auto; }
.mobile-step-menu { display: none; }
.field input, .field select, .field textarea, .field summary { scroll-margin-block: 110px; }
@media (max-width: 767px) {
  .manufacturer-cards, .funding-cards, .funding-approved-options .choices { display: grid; }
  .manufacturer-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ranked .chips, .funding-cards, .funding-approved-options .choices { grid-template-columns: 1fr; }
  .mobile-step-menu { display: block; }
  .form-section--person .section-fields, .form-section--project-address .section-fields { grid-template-columns: minmax(0, 1fr); }
  #field-firstName, #field-lastName, #field-email, #field-phone, #field-postalCode, #field-city { grid-column: 1 / -1 !important; }
  .rate-dock .funding-rate { width: 100%; padding: 12px 14px; }
  .rate-dock .funding-rate-head strong { font-size: .9rem; text-align: center; }
  /* 44px touch target, the negative margin keeps the 20px text line (#2468). */
  .breakdown-toggle { display: inline-flex; align-items: center; min-height: 44px; margin: -12px 0; }
  .rate-dock .funding-rate:not(.show-breakdown) .funding-breakdown { display: none !important; }
  .mobile-step-menu summary { cursor: pointer; font-weight: 700; }
  .mobile-step-menu a, .mobile-step-menu span { display: block; padding: 7px 0; color: inherit; }
  .mobile-step-menu span { opacity: .45; }
}

/* Button groups share one spacing rule, so adjacent buttons never touch, neither
   side by side nor when they wrap and stack (#2471). It comes last on purpose:
   it outranks the older per-group gaps above and in app.css. */
.error-actions, .rate-editor-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.nav-row { gap: 12px; }