/* Referenzzins — calc UI (mockup-aligned) + results */

.rz-title-em {
  color: #cc0000;
  font-style: italic;
  font-weight: 600;
}

.rz-wrap {
  flex: 1;
  width: min(100%, 100%);
  margin: 0 auto;
  padding: var(--space-2) 0 var(--space-4);
  background: linear-gradient(180deg, #faf8f5 0%, #fff 100%);
}

.rz-page-body {
  margin: 0 auto;
  padding-top: 0;
  padding-bottom: 0;
}

.back-link {
  display: inline-block;
  margin-bottom: 12px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-3);
  text-decoration: none;
}

/* Calculator card */
.calc-card {
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: 10px;
  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.04);
  padding: 20px;
  margin-bottom: 16px;
}

.rz-result-host > .calc-card {
  padding: 0;
  margin-bottom: 0;
}

.rz-result-host > .calc-card.pro-card {
  padding: 20px;
}

.rz-result-host > .calc-card.rz-monitor-card,
.rz-result-host > .calc-card.rz-upsell-nk,
.rz-result-host > .calc-card.rz-upsell-pro-teaser {
  padding: 20px;
}

.rz-result-host > * + * {
  margin-top: 12px;
}

.rz-monitor-card .rz-h2 {
  margin-bottom: 8px;
}

.rz-monitor-card > p:first-of-type {
  margin-bottom: 4px;
}

.rz-upsell-nk__text {
  font-size: 15px;
  color: var(--ink-2);
  line-height: 1.55;
  margin: 0 0 14px;
}

.rz-upsell-nk__cta {
  display: block;
  text-align: center;
  padding: 13px 16px;
  border-radius: 8px;
  border: 1.5px solid var(--red);
  color: var(--red);
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
  font-family: var(--font-body);
}

.rz-upsell-pro-teaser__kicker {
  font-size: 10px;
  font-weight: 600;
  color: var(--ink-4);
  text-transform: uppercase;
  letter-spacing: 1.2px;
  margin: 0 0 6px;
}

.rz-upsell-pro-teaser__title {
  font-family: "Playfair Display", var(--font-display, serif);
  font-size: 20px;
  font-weight: 600;
  margin: 0 0 8px;
  color: var(--ink);
}

.rz-upsell-pro-teaser .rz-upsell-pro-teaser__text {
  margin-bottom: 14px;
}

#result-host .rz-upsell-nk,
#result-host .rz-upsell-pro-teaser {
  margin-bottom: 16px;
}

.calc-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-2);
  margin-bottom: 6px;
}

.calc-input {
  width: 100%;
  padding: 12px 14px;
  min-height: 48px;
  font-size: 16px;
  font-family: var(--font-body);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--white);
  color: var(--ink);
  box-sizing: border-box;
}

.calc-select {
  flex: 1;
  padding: 12px 8px;
  min-height: 48px;
  font-size: 15px;
  font-family: var(--font-body);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--white);
  color: var(--ink);
  box-sizing: border-box;
}

.calc-row {
  display: flex;
  gap: 8px;
}

.calc-checkbox {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--ink-3);
  cursor: pointer;
  margin: 9px 0 0;
}

.calc-checkbox input {
  width: 18px;
  height: 18px;
  accent-color: var(--ink-2);
}

.calc-btn {
  display: block;
  width: 100%;
  padding: 15px;
  min-height: 52px;
  border: none;
  border-radius: 8px;
  background: var(--red);
  color: #fff;
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(204, 0, 0, 0.2);
  box-sizing: border-box;
}

.calc-btn[disabled] {
  opacity: 0.7;
  cursor: not-allowed;
}

.calc-btn.is-loading .btn-loading {
  display: inline-block;
}

.calc-btn.is-loading .btn-label {
  margin-right: 6px;
}

.calc-trust {
  font-size: 11px;
  color: var(--ink-4);
  line-height: 1.5;
  text-align: center;
  margin: 14px 0 10px;
}

/* Headings */
.rz-title,
.rz-h2 {
  font-family: "Playfair Display", var(--font-display, serif);
  font-weight: 600;
}

.rz-title {
  font-size: 28px;
  line-height: 1.15;
  margin-bottom: 10px;
}

@media (min-width: 768px) {
  .rz-title {
    font-size: 36px;
  }

  .rz-intro {
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
  }
}

.rz-intro p {
  color: var(--ink-2);
  line-height: 1.45;
}

.rz-intro p + p {
  margin-top: 10px;
}

.rz-h2 {
  font-size: 23px;
  margin-bottom: 10px;
}

/* Calculator field groups */
.rz-q {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 6px;
  padding: 13px 12px;
  margin-bottom: 11px;
}

.rz-q-label {
  margin-bottom: 4px;
}

.rz-q-help {
  font-size: 11.5px;
  color: var(--ink-4);
  line-height: 1.45;
  margin-bottom: 9px;
}

.rz-money-wrap {
  position: relative;
}

.rz-money-prefix {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 16px;
  color: var(--ink-4);
  pointer-events: none;
}

.rz-money-input {
  padding-left: 43px;
}

#baseline-group {
  transition: opacity 0.15s;
}

.rz-dk {
  font-size: 12.5px;
  color: var(--ink-4);
}

.rz-date-inputs.is-disabled {
  opacity: 0.4;
  pointer-events: none;
}

/* ── Rate auto-detect component ── */
.rz-rate-auto,
.rz-rate-override {
  background: #fff;
  border: 1px solid #e0dcd5;
  border-radius: 10px;
  padding: 18px;
  margin-bottom: 12px;
}

.rz-rate-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: #888;
  margin-bottom: 10px;
}

.rz-rate-display {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: #f8f7f4;
  border: 1px solid #e8e4de;
  border-radius: 8px;
}

.rz-rate-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.rz-rate-value {
  font-size: 22px;
  font-weight: 700;
  color: #1a1a1a;
}

.rz-rate-badge {
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  background: #f0faf0;
  color: #2d8a4e;
  border: 1px solid #c3e6c3;
}

.rz-rate-badge--fallback {
  background: #f5f3ee;
  color: #888;
  border-color: #e0dcd5;
}

.rz-rate-source {
  font-size: 11px;
  color: #999;
  margin-top: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.rz-rate-edit {
  font-size: 11px;
  color: #7c3aed;
  cursor: pointer;
  font-weight: 600;
  text-decoration: none;
  border: none;
  background: none;
  font-family: inherit;
  padding: 0;
}

.rz-rate-edit:hover { text-decoration: underline; }

.rz-rate-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}

.rz-rate-pill {
  padding: 8px 14px;
  border: 1.5px solid #e8e4de;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  color: #666;
  background: #fff;
  cursor: pointer;
  transition: all 0.1s;
  font-family: inherit;
  text-align: center;
  line-height: 1.3;
}

.rz-rate-pill:hover {
  border-color: #ccc;
  background: #fdfcfa;
}

.rz-rate-pill.rz-rate-pill--selected {
  border-color: #cc0000;
  background: #fef2f2;
  color: #cc0000;
}

.rz-rate-pill-bwo {
  font-size: 8px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  color: #2d8a4e;
  display: block;
  margin-top: 1px;
}

.rz-rate-back {
  font-size: 11px;
  color: #999;
  cursor: pointer;
  text-decoration: none;
  border: none;
  background: none;
  font-family: inherit;
  padding: 0;
}

.rz-rate-back:hover { color: #666; }

/* "Ich weiss es nicht genau" green state */
.rz-rate-auto.rz-rate-auto--dont-know .rz-rate-display {
  background: #f0faf0;
  border-color: #c3e6c3;
}

.rz-rate-auto--dont-know .rz-rate-value { color: #2d8a4e; }

.form-error {
  min-height: 20px;
  color: var(--red);
  font-size: 14px;
}
/* Dražen r5.1: don't reserve an empty band when there's no error (it bloated the gap above
   the CTA, esp. on mobile). min-height + margin return the moment an error text appears. */
.form-error:empty {
  min-height: 0;
  margin: 0;
}

.btn-loading {
  display: none;
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255, 255, 255, 0.5);
  border-top-color: #fff;
  border-radius: 999px;
  animation: spin 0.8s linear infinite;
  vertical-align: middle;
}

/* ── Result cards ── */
.result-card {
  border-radius: 10px;
  overflow: hidden;
}

.result-card--green {
  background: var(--green-bg);
  border: 1px solid var(--green-border);
}

.result-card--grey {
  background: #f5f4f2;
  border: 1px solid var(--rule);
}

.result-label {
  font-size: 13px;
  color: var(--ink-3);
  margin-bottom: 4px;
}

.result-amount {
  font-family: "Playfair Display", var(--font-display, serif);
  font-weight: 700;
  color: var(--green);
}

.result-annual {
  font-size: 13px;
  color: var(--ink-3);
}

.result-annual strong {
  font-weight: 600;
  color: var(--ink-2);
}

.result-headline {
  font-family: "Playfair Display", var(--font-display, serif);
  font-weight: 700;
  font-size: 20px;
  color: var(--ink);
  line-height: 1.25;
  margin-bottom: 8px;
}

.result-body {
  font-size: 13px;
  color: var(--ink-3);
  line-height: 1.5;
}

/* ── PRO gate (reduction found) ── */
.pro-gate {
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: 10px;
}

.pro-gate__title {
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
}

.pro-gate__list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.pro-gate__list li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 13px;
  color: var(--ink-2);
  line-height: 1.45;
  padding: 3px 0;
}

.pro-gate__list li::before {
  content: "✓";
  color: var(--green);
  font-weight: 700;
  flex-shrink: 0;
}

.pro-gate__price {
  font-family: "Playfair Display", var(--font-display, serif);
  font-weight: 700;
  color: var(--ink);
  text-align: center;
}

.pro-gate__sub {
  font-size: 12px;
  color: var(--ink-4);
  text-align: center;
}

.pro-gate__cta {
  display: block;
  width: 100%;
  padding: 15px;
  min-height: 52px;
  border: none;
  border-radius: 8px;
  background: var(--red);
  color: #fff;
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  text-align: center;
  box-shadow: 0 2px 8px rgba(204, 0, 0, 0.2);
}

.pro-gate__cta[disabled] {
  opacity: 0.7;
  cursor: not-allowed;
}

/* .pro-gate__inline-checkout / __email-label / __email / __cta--submit /
   __inline-error selectors removed T-RZ-PAYWALL-PROBLEM-B-FIX 2026-05-22 —
   inline email collection deleted from /referenzzins/ paywall flow per
   D-204 + Problem B. Email now collected by Stripe Checkout. */

.pro-gate__note {
  font-size: 11px;
  color: var(--ink-4);
  text-align: center;
}

/* D-204 two-tier purchase block */
.pro-gate__tier-header {
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 8px;
}

.pro-gate__list--tier1 {
  margin: 0 0 16px;
}

.pro-gate__divider {
  height: 1px;
  background: #e5e2dc;
  border: 0;
  margin: 0 0 16px;
}

.pro-gate__transition {
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 8px;
}

.pro-gate__list--tier2 {
  margin: 0 0 16px;
}

.pro-gate__disclosure {
  font-family: "Source Sans 3", sans-serif;
  font-size: 13px;
  font-weight: 400;
  color: #5f5b50;
  line-height: 1.5;
  margin: 0 0 4px;
  text-align: center;
}

.pro-gate__subline {
  font-family: "Source Sans 3", sans-serif;
  font-size: 13px;
  font-weight: 400;
  font-style: italic;
  color: #5f5b50;
  line-height: 1.5;
  margin: 0 0 14px;
  text-align: center;
}

@media (max-width: 767px) {
  .pro-gate__list li {
    line-height: 1.55;
  }
}

/* ── Monitor card (no reduction) ── */
.monitor-card {
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: 10px;
}

.monitor-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 6px;
}

.monitor-body {
  font-size: 13px;
  color: var(--ink-3);
  line-height: 1.5;
  margin-bottom: 14px;
}

.monitor-input {
  width: 100%;
  padding: 12px 14px;
  min-height: 48px;
  font-size: 16px;
  font-family: var(--font-body);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--white);
  box-sizing: border-box;
  margin-bottom: 10px;
}

.monitor-btn {
  display: block;
  width: 100%;
  padding: 14px;
  border: none;
  border-radius: 8px;
  background: var(--red);
  color: #fff;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(204, 0, 0, 0.2);
}

.monitor-btn[disabled] {
  opacity: 0.7;
  cursor: not-allowed;
}

.monitor-note {
  font-size: 11px;
  color: var(--ink-4);
  text-align: center;
  margin-top: 8px;
}

.monitor-date {
  font-size: 12px;
  color: var(--ink-4);
  text-align: center;
  margin-top: 10px;
}

/* ── Recalc link ── */
/* F-RZ-CLAIM-REFRAME §2.4: tertiary on ALL result states — smaller + more
   muted than the primary CTA / secondary email-capture, no button chrome. */
.recalc-link {
  font-size: 12px;
  color: var(--ink-4);
  text-decoration: underline;
  cursor: pointer;
  opacity: 0.8;
}

/* ── Legacy result styles (kept for positive card internals) ── */
.pro-card h3 {
  font-family: "Playfair Display", var(--font-display, serif);
  font-weight: 600;
  font-size: 22px;
  margin-bottom: 10px;
}

.rz-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.rz-list li {
  position: relative;
  padding-left: 22px;
}

.rz-list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--green);
  font-weight: 700;
}

.rz-list li + li {
  margin-top: 8px;
}

.pro-price {
  margin: 10px 0 4px;
  font-weight: 600;
}

.pro-price-main {
  font-size: 1.15em;
}

.pro-price-sub {
  margin: 0 0 12px;
  font-size: 14px;
  color: var(--ink-3);
  font-weight: 400;
}

.cta-note {
  margin-top: 8px;
  font-size: 13px;
  color: var(--ink-3);
}

.info-line {
  margin-top: 5px;
  color: var(--ink-3);
  font-size: 12px;
  line-height: 1.6;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

@media (max-width: 767px) {
  .rz-wrap {
    padding-top: var(--space-3);
  }

  .rz-intro {
    margin-bottom: 28px;
  }

  .rz-intro .rz-title {
    margin-bottom: 14px;
  }

  #rz-calc-section.calc-card {
    padding: 22px 18px 24px;
  }

  .rz-q {
    padding: 15px 14px;
    margin-bottom: 14px;
  }

  .rz-rate-value { font-size: 20px; }

  .rz-rate-source {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }

  .rz-rate-pill {
    padding: 8px 12px;
    font-size: 12px;
  }

  .calc-trust {
    margin-top: 6px;
    margin-bottom: 16px;
  }

  #rz-calc-section .form-error {
    margin-bottom: 8px;
  }

  #rz-calc-section .calc-btn {
    margin-top: 6px;
  }
}

@media (min-width: 768px) {
  .rz-page-body {
    padding-top: var(--space-7);
    padding-bottom: var(--space-7);
  }
}

/* ── Pending letter box (D-115) ── */
.rz-pending {
  background: #faf8f5;
  border: 1px solid #e8e4de;
  border-radius: 10px;
  overflow: hidden;
  margin-top: 16px;
}

.rz-pending-head {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 20px 20px 16px;
}

.rz-pending-icon {
  font-size: 24px;
  flex-shrink: 0;
  line-height: 1;
  padding-top: 2px;
}

.rz-pending-text {
  flex: 1;
}

.rz-pending-kicker {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--ink-4);
  margin-bottom: 4px;
}

.rz-pending-title {
  font-family: "Playfair Display", var(--font-display, serif);
  font-size: 17px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 6px;
}

.rz-pending-desc {
  font-size: 13px;
  color: var(--ink-3);
  line-height: 1.55;
}

.rz-pending-divider {
  height: 1px;
  background: #e8e4de;
}

.rz-pending-notify {
  padding: 16px 20px 18px;
}

.rz-pending-notify-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-2);
  margin-bottom: 10px;
}

.rz-pending-notify-row {
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
}

.rz-pending-input {
  flex: 1;
  padding: 10px 12px;
  min-height: 44px;
  font-size: 15px;
  font-family: var(--font-body);
  border: 1px solid var(--rule);
  border-radius: 6px;
  background: var(--white);
  color: var(--ink);
  box-sizing: border-box;
}

.rz-pending-input:focus {
  outline: none;
  border-color: var(--ink-3);
}

.rz-pending-btn {
  padding: 10px 14px;
  min-height: 44px;
  white-space: nowrap;
  border: none;
  border-radius: 6px;
  background: var(--ink);
  color: #fff;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

.rz-pending-btn[disabled] {
  opacity: 0.6;
  cursor: not-allowed;
}

.rz-pending-note {
  font-size: 11px;
  color: var(--ink-4);
  line-height: 1.5;
}

.rz-pending-error {
  font-size: 12px;
  color: var(--red);
  margin-top: 6px;
}

.rz-pending-success {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: #f0faf0;
  border: 1px solid #c3e6c3;
  border-radius: 8px;
  font-size: 13px;
  color: #2d8a4e;
  font-weight: 500;
}

.rz-pending-success-icon {
  font-size: 18px;
  flex-shrink: 0;
}

@media (max-width: 480px) {
  .rz-pending-notify-row {
    flex-direction: column;
  }

  .rz-pending-btn {
    width: 100%;
  }
}

/* ─── T-MZ-FORM-VALIDITY-INTAKE — form-validity radio group ───────────── */

.rz-radio-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 6px 0 0;
}

.rz-radio {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid var(--rule, #e5e2dc);
  border-radius: 6px;
  background: var(--white, #ffffff);
  cursor: pointer;
  font-size: 14px;
  line-height: 1.4;
  transition: border-color 120ms ease, background-color 120ms ease;
}

.rz-radio:hover {
  border-color: var(--ink-4, #888);
}

.rz-radio input[type="radio"] {
  flex-shrink: 0;
  margin-top: 2px;
  width: 18px;
  height: 18px;
  cursor: pointer;
}

.rz-radio:has(input[type="radio"]:checked) {
  border-color: var(--ink, #1a1a1a);
  background: var(--paper, #fafaf8);
}

.rz-radio input[type="radio"]:focus-visible {
  outline: 2px solid var(--ink, #1a1a1a);
  outline-offset: 2px;
}

.rz-mietbeginn-group {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px dashed var(--rule, #e5e2dc);
}

#form-validity-group .rz-q-help {
  margin-top: 8px;
}

/* ─── §9 UNKNOWN_BASELINE handler card ─────────────────────────────────── */
/* Spec §9.4: paper-variant bg, info-blue 4px left accent (NOT red — info,
   not error). Playfair headline, Source Sans 3 body, italic on the
   canonical D-118 term in body para 1.                                    */

.rz-unknown-baseline-card {
  background: #fafaf8;
  border: 1px solid #e5e2dc;
  border-left: 4px solid #1a4a8a;
  padding: 20px 16px;
  border-radius: 6px;
  margin-bottom: 20px;
}

.rz-unknown-baseline-card__headline {
  font-family: "Playfair Display", serif;
  font-weight: 700;
  font-size: 22px;
  line-height: 1.25;
  margin: 0 0 12px;
  color: var(--ink, #1a1a1a);
}

.rz-unknown-baseline-card__body {
  font-family: "Source Sans 3", sans-serif;
  font-size: 16px;
  line-height: 1.5;
  margin: 0 0 12px;
  color: var(--ink-2, #2a2a2a);
}

.rz-unknown-baseline-card__body em {
  font-style: italic;
}

.rz-unknown-baseline-card__cta {
  display: inline-block;
  font-family: "Source Sans 3", sans-serif;
  font-weight: 600;
  font-size: 16px;
  color: #1a4a8a;
  text-decoration: none;
  padding: 12px 0;
  min-height: 44px;
  margin-bottom: 6px;
}

.rz-unknown-baseline-card__cta:hover,
.rz-unknown-baseline-card__cta:focus {
  text-decoration: underline;
}

@media (min-width: 769px) {
  .rz-unknown-baseline-card {
    padding: 24px 20px;
  }

  .rz-unknown-baseline-card__headline {
    font-size: 26px;
  }
}

/* ─── T-45 Architecture C++ — form-validity assumption note (VIABLE only) */

.rz-assumption-note {
  margin: 0 0 16px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--ink-3, #555);
  text-align: center;
}

/* ─── T-SOCIAL-PROOF-FE-IMPLEMENT — Hünibach callout, below the result card,
   above the PRO gate (spec Variant 2: paper-tint, sachlich, mobile 375px). ─── */
.rz-social-proof {
  background: var(--paper-2, #f4f2ee);
  border-left: 3px solid var(--color-accent, #c0392b);
  border-radius: 4px;
  padding: 12px 14px;
  margin: 0 0 16px;
  text-align: left;
}

.rz-social-proof__heading {
  font-family: "Playfair Display", Georgia, serif;
  font-style: italic;
  font-size: 14px;
  margin: 0 0 6px;
  color: var(--ink-1, #333);
}

.rz-social-proof__body {
  font-size: 13px;
  line-height: 1.5;
  margin: 0 0 6px;
  color: var(--ink-3, #555);
}

.rz-social-proof__source {
  font-size: 11px;
  margin: 0;
  color: var(--ink-4, #999);
}

/* ─── T-81 (Option B) early CTA cluster — bare (no .pro-gate card chrome);
   reuses .pro-gate__disclosure + .pro-gate__cta so it matches the close CTA ─── */
/* T-81 desktop-redundancy fix (UX 2026-06-04): the above-fold early CTA only solves
   the MOBILE below-the-fold case (100% of calculator traffic is mobile). On desktop it
   duplicated the offer-block "Jetzt starten – CHF 79" + its auto-renewal disclosure, so
   hide it ≥768px. D-204 legal placement preserved — the disclosure still sits directly
   above every VISIBLE buy button (one on desktop, two on mobile). */
.rz-early-cta { display: none; }
@media (max-width: 767px) { .rz-early-cta { display: block; margin-bottom: 16px; } }
.rz-early-cta .pro-gate__disclosure { margin-bottom: 8px; }

/* ─── T-83 (D-246) positive-path lead capture — SUBORDINATE to the CHF-79 primary
   (spec §4.1 hierarchy is load-bearing): a plain underlined text-link, NOT a bordered
   full-width pill (which would read as a 2nd primary). The revealed field/button/note/
   error reuse the existing .rz-pending-* chrome (.rz-pending-notify-row/-input/-btn/
   -note/-error/-success). */
.rz-lead-capture { text-align: center; margin: 0 0 16px; }
.rz-lead-link {
  display: inline-block;
  padding: 6px 4px;
  background: none;
  border: none;
  color: var(--ink-3);
  font-size: 14px;
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.rz-lead-form { text-align: left; margin-top: 8px; }
.rz-lead-consent-row { margin-top: 10px; font-size: 12.5px; }

/* Phase 1 (D-246 amend 2026-06-12 / KI-138): VISIBLE subordinate capture card,
   replacing the collapsed click-to-reveal link (rz_positive_email_captured = 0 ever).
   Subordinate to the CHF-79 primary by chrome weight (muted card), not hidden. */
.rz-lead-card {
  text-align: left;
  background: var(--paper, #faf9f7);
  border: 1px solid var(--rule, #e5e2dc);
  border-radius: 8px;
  padding: 12px 14px;
}
.rz-lead-card__heading {
  margin: 0;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-1, #333);
}

/* T-81 fix (UX 2026-06-04): on desktop the early CTA is hidden, so the subordinate
   email link would otherwise sit ABOVE the offer block. Reorder the VIABLE result column
   so the email link drops below the offer's CHF-79 CTA; keep "Andere Miete berechnen?"
   (the recalc row, :last-child) last. #result-host carries class .rz-result-host; flex
   applies to all states (non-VIABLE = single card + recalc → visually unchanged). */
@media (min-width: 768px) {
  .rz-result-host { display: flex; flex-direction: column; }
  .rz-lead-capture { order: 1; }
  .rz-result-host > :last-child { order: 2; }
}

/* ─── D2 construction_year intake + Help expander + disabled state ─── */

#construction-year.is-disabled,
#construction-year:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  background: #f5f4f2;
  border-color: #e0dcd5;
  color: var(--ink-4, #888);
}

.form-help-expander {
  margin-top: 10px;
  padding: 12px 14px;
  background: var(--paper, #fafaf8);
  border: 1px solid var(--rule, #e5e2dc);
  border-left: 3px solid var(--ink-3, #555);
  border-radius: 6px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-2, #2a2a2a);
}

.form-help-expander[hidden] {
  display: none;
}

.form-help-expander__intro {
  margin: 0 0 8px;
  font-weight: 600;
}

.form-help-expander__sources {
  margin: 0 0 8px;
  padding-left: 20px;
}

.form-help-expander__sources li {
  margin-bottom: 4px;
}

.form-help-expander__sources li:last-child {
  margin-bottom: 0;
}

.form-help-expander__return {
  margin: 8px 0 0;
  font-style: italic;
  color: var(--ink-3, #555);
}

/* T-82: baseline-help expander ratgeber link — plain underlined link, clearly
   subordinate (not a button). Reuses the construction-year expander chrome. */
.form-help-expander__cta {
  display: inline-block;
  margin: 8px 0 0;
  color: var(--accent, #c1121f);
  font-weight: 600;
  text-decoration: underline;
}

#construction-year-group .form-error {
  display: block;
  margin-top: 6px;
  min-height: 0;
}

#construction-year-group .form-error[hidden] {
  display: none;
}

/* ─── Stage 2B state cards: NONE / NEGATIVE_NET / BELOW_THRESHOLD / ──── */
/* ─── UNKNOWN_BUILDING_AGE / UNKNOWN_BASELINE-data-unavailable ───────── */
/* Shared chrome inherited from .rz-unknown-baseline-card; modifier
   classes are present for hooks but currently share the base styling. */

.rz-none-card,
.rz-negative-net-card,
.rz-below-threshold-card,
.rz-unknown-building-age-card,
.rz-unknown-baseline-card--data-unavailable {
  /* Inherit .rz-unknown-baseline-card chrome unchanged. */
}

.rz-below-threshold-card__breakdown {
  margin: 12px 0 16px;
  padding: 12px 14px;
  background: var(--white, #ffffff);
  border: 1px solid var(--rule, #e5e2dc);
  border-radius: 6px;
  font-family: "Source Sans 3", sans-serif;
}

.rz-below-threshold-card__breakdown-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 15px;
  line-height: 1.5;
  padding: 4px 0;
}

.rz-below-threshold-card__breakdown-row + .rz-below-threshold-card__breakdown-row {
  border-top: 1px dashed var(--rule, #e5e2dc);
  margin-top: 2px;
  padding-top: 8px;
}

.rz-below-threshold-card__breakdown-label {
  font-weight: 500;
  color: var(--ink-3, #555);
}

.rz-below-threshold-card__breakdown-value {
  font-weight: 600;
  color: var(--ink, #1a1a1a);
}

.rz-state-card-recalc {
  margin-top: 20px; /* §2.4 generous top-margin — clearly subordinate */
  text-align: center;
}

.rz-state-card-recalc .recalc-link {
  font-size: 12px;
}

/* ── F-RZ-CLAIM-REFRAME §2.1 — NEGATIVE_NET offset breakdown ── */
.rz-offset-breakdown {
  margin: 12px 0 16px;
  padding: 12px 14px;
  background: var(--white, #ffffff);
  border: 1px solid var(--rule, #e5e2dc);
  border-radius: 6px;
  font-family: "Source Sans 3", sans-serif;
}
.rz-offset-breakdown__title {
  font-weight: 600;
  font-size: 14px;
  color: var(--ink, #1a1a1a);
  margin-bottom: 6px;
}
.rz-offset-breakdown__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 15px;
  line-height: 1.5;
  padding: 4px 0;
}
.rz-offset-breakdown__row + .rz-offset-breakdown__row {
  border-top: 1px dashed var(--rule, #e5e2dc);
  margin-top: 2px;
  padding-top: 8px;
}
.rz-offset-breakdown__label { font-weight: 500; color: var(--ink-3, #555); }
.rz-offset-breakdown__value {
  font-weight: 600;
  color: var(--ink, #1a1a1a);
  font-variant-numeric: tabular-nums;
}
/* D-262: the per-month unit on each breakdown value — muted + lighter so it reads as a unit,
   not part of the number. Stays muted even on the bold Netto row (own color/weight wins). */
.rz-offset-breakdown__unit {
  font-weight: 400;
  color: var(--ink-4, #888);
  font-variant-numeric: normal;
}
.rz-offset-breakdown__row--net {
  border-top: 1.5px solid var(--ink-4, #888);
  margin-top: 4px;
  padding-top: 8px;
  font-size: 16px;
}
.rz-offset-breakdown__row--net .rz-offset-breakdown__label,
.rz-offset-breakdown__row--net .rz-offset-breakdown__value {
  font-weight: 700;
  color: var(--ink, #1a1a1a);
}
.rz-offset-breakdown__note { margin: 8px 0 0; font-size: 13.5px; color: var(--ink-3, #555); }
.rz-offset-breakdown__legend { margin: 6px 0 0; font-size: 12.5px; color: var(--ink-4, #888); font-style: italic; }

/* ── §2.2 re-entry nudge ── */
.rz-reentry-nudge {
  margin: 14px 0;
  padding: 10px 12px;
  background: var(--sand, #faf8f4);
  border-left: 3px solid var(--accent, #c8a24a);
  border-radius: 4px;
}
.rz-reentry-nudge__text { margin: 0 0 4px; font-size: 14px; color: var(--ink-2, #333); line-height: 1.45; }
.rz-reentry-nudge__link { font-size: 14px; font-weight: 600; color: var(--accent-ink, #8a6d2a); text-decoration: underline; cursor: pointer; }

/* ── §2.3 monitor capture (NEGATIVE_NET email) ── */
.rz-monitor-capture { margin: 16px 0; text-align: left; }
.rz-monitor-capture__title { font-weight: 600; font-size: 15px; color: var(--ink, #1a1a1a); margin-bottom: 4px; }
.rz-monitor-capture__body { margin: 0 0 10px; font-size: 14px; color: var(--ink-2, #333); line-height: 1.45; }


/* ── T-84: Formular disclosure + exact-entry panel (§3 amendment) ── */
.rz-formular-disclosure {
  margin: 10px 0 0;
  font-size: 12px;
  line-height: 1.5;
  color: #6b6657;
}

.rz-exact-toggle {
  display: inline-block;
  margin-top: 6px;
  font-size: 12px;
  color: #7c3aed;
  cursor: pointer;
  font-weight: 600;
  text-decoration: none;
  border: none;
  background: none;
  font-family: inherit;
  padding: 0;
}

.rz-exact-toggle:hover { text-decoration: underline; }

.rz-exact-panel { margin-top: 10px; }

.rz-exact-panel .calc-input {
  max-width: 180px;
  margin-top: 4px;
}

/* ═══════════════ F-RZ-RESULT-REDESIGN (KI-138) ═══════════════
   Conversion-first positive (VIABLE) result. Mobile-first single column; desktop 2-col
   (NK /ergebnis/ pattern). Playfair ONLY on .rzr-hero__amount. .rzr-left/.rzr-right are
   display:contents on mobile so the source order (left: hero/trust/legal · right:
   offer/lead) reflows to the conversion order via `order`; on desktop they become the two
   grid columns (right sticky). */
.rzr { display: flex; flex-direction: column; gap: 11px; }
.rzr-left, .rzr-right { display: contents; }
.rzr-back { order: 0; }
.rzr-hero { order: 1; }
.rzr-breakdown { order: 2; }
.rzr-offer { order: 3; }
/* D-261/§4 un-demote: K-Tipp sits DIRECTLY after the offer/CTA (the decision point) on
   mobile — the e-mail card drops below it. Reverses the 2026-06-14 below-the-e-mail demotion;
   the K-Tipp is now the sole social-proof surface. Do NOT push .rzr-trust back below the lead. */
.rzr-trust { order: 4; }
.rzr .rz-lead-capture { order: 5; }
.rzr-legal { order: 6; }

/* back button — kept secondary so it never rivals the CTA (KI-138 input-distrust loop) */
.rzr-back { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 600; color: var(--ink-3); padding: 6px 2px; text-decoration: none; }
.rzr-back:hover { color: var(--ink); }

/* result hero */
.rzr-hero { background: #fff; border: 1px solid var(--rule); border-top: 3px solid var(--green); border-radius: 10px; padding: 16px 18px 15px; text-align: center; }
.rzr-hero__label { font-size: 12px; font-weight: 600; letter-spacing: 0.4px; color: var(--green); text-transform: uppercase; }
.rzr-hero__amount { font-family: "Playfair Display", var(--font-display, serif); font-weight: 700; color: var(--green); font-size: 38px; line-height: 1.04; margin: 4px 0 5px; }
/* D-262: small "/Monat" unit on the hero figure so the headline is unmistakably monthly
   (mirrors the "pro Jahr" annual line). Body font + muted + ~0.38em so the big green
   number still dominates; nowrap keeps "/Monat" intact. */
.rzr-hero__unit { font-family: var(--font-body); font-size: 0.38em; font-weight: 600; color: var(--ink-3); letter-spacing: 0; white-space: nowrap; }
.rzr-hero__annual { font-size: 14.5px; color: var(--ink-3); }
.rzr-hero__annual strong { color: var(--ink-1); font-weight: 700; box-shadow: inset 0 -8px 0 var(--green-bg); padding: 0 2px; }

/* K-Tipp trust — PROMINENT at the decision point (D-261/§4 un-demote 2026-06-15: sole
   social-proof surface; mobile order:4 right after the CTA, desktop lifted under the hero) */
.rzr-trust { background: #fff; border: 1px solid var(--rule); border-radius: 8px; padding: 13px 15px 13px 16px; position: relative; overflow: hidden; }
.rzr-trust::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--blue); }
.rzr-trust__top { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; flex-wrap: wrap; }
.rzr-trust__cite { display: inline-block; text-decoration: none; font-size: 10px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; color: var(--blue); background: var(--blue-bg); border: 1px solid var(--blue-bdr); border-radius: 999px; padding: 2px 9px; }
.rzr-trust__cite:hover { background: var(--blue-bdr); }
.rzr-trust__heading { font-size: 13.5px; font-weight: 700; color: var(--ink-1); }
.rzr-trust__body { font-size: 12.5px; color: var(--ink-3); line-height: 1.46; }
.rzr-trust__body strong { color: var(--ink-1); }
.rzr-trust__readmore { display: inline-block; margin-top: 7px; font-size: 12px; font-weight: 600; color: var(--blue); text-decoration: none; }
.rzr-trust__readmore:hover { text-decoration: underline; }

/* T-137: official-data trust band (RZ variant) — BWO/SNB-BFS/OR-VMWG are the real engine
   inputs. order:5 mobile (right after the K-Tipp at order:4); order:1 desktop (under K-Tipp). */
.rzr-databand { order: 5; padding: 13px 12px 11px; border: 1px solid var(--rule); border-radius: 8px; background: var(--paper); }
.rzr-databand__kicker { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: var(--ink-4); text-align: center; margin: 0 0 9px; }
.rzr-databand__row { display: flex; align-items: stretch; justify-content: center; }
.rzr-databand__item { flex: 1 1 0; min-width: 0; text-align: center; padding: 0 8px; border-right: 1px solid var(--rule); }
.rzr-databand__item:last-child { border-right: none; }
.rzr-databand__src { font-size: 13px; font-weight: 700; color: var(--ink-1); letter-spacing: 0.2px; }
.rzr-databand__lbl { display: block; font-size: 9.5px; color: var(--ink-4); margin-top: 2px; line-height: 1.25; overflow-wrap: anywhere; }

/* legal bundle — Art. 269d note (KI-140) + Index/Staffel, collapsed but present */
.rzr-legal { border: 1px solid var(--rule); border-radius: 8px; background: #fff; }
.rzr-legal > summary { list-style: none; cursor: pointer; font-size: 12.5px; font-weight: 600; color: var(--ink-3); display: flex; align-items: center; justify-content: space-between; padding: 11px 14px; }
.rzr-legal > summary::-webkit-details-marker { display: none; }
.rzr-legal > summary::after { content: "\25BE"; color: var(--ink-4); font-size: 11px; }
.rzr-legal[open] > summary::after { transform: rotate(180deg); }
.rzr-legal__body { padding: 0 14px 13px; }
.rzr-legal__note { font-size: 11.5px; color: var(--ink-4); line-height: 1.5; }
.rzr-legal__staffel { display: block; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--rule); font-size: 11.5px; }
.rzr-legal__staffel a { color: var(--ink-3); text-decoration: underline; }

/* reduction breakdown — collapsible (collapsed by default = mobile-fold-safe; opened on
   desktop by wirePositiveState). Rows reuse the approved .rz-offset-breakdown__* styles. */
.rzr-breakdown { border: 1px solid var(--rule); border-radius: 8px; background: #fff; }
.rzr-breakdown > summary { list-style: none; cursor: pointer; font-size: 13px; font-weight: 700; color: var(--ink-1); display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; }
.rzr-breakdown > summary::-webkit-details-marker { display: none; }
.rzr-breakdown > summary::after { content: "\25BE"; color: var(--ink-4); font-size: 11px; }
.rzr-breakdown[open] > summary::after { transform: rotate(180deg); }
.rzr-breakdown__body { padding: 0 14px 10px; }
.rzr-breakdown__body .rz-offset-breakdown__row { font-size: 14px; }

/* offer + close (one card) */
.rzr-offer { background: #fff; border: 1px solid var(--rule); border-radius: 10px; padding: 16px; box-shadow: var(--shadow-sm); }
.rzr-offer__head { font-size: 15px; font-weight: 700; color: var(--ink); margin-bottom: 10px; }
.rzr-list { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.rzr-list li { position: relative; padding-left: 26px; font-size: 14px; color: var(--ink-1); line-height: 1.36; }
.rzr-list li::before { content: ""; position: absolute; left: 0; top: 1px; width: 18px; height: 18px; border-radius: 50%; background: var(--green-bg); border: 1px solid var(--green-border); }
.rzr-list li::after { content: ""; position: absolute; left: 6px; top: 5px; width: 5px; height: 9px; border: solid var(--green); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.rzr-more { margin-top: 11px; border-top: 1px solid var(--rule); padding-top: 10px; }
.rzr-more > summary { list-style: none; cursor: pointer; font-size: 13px; font-weight: 600; color: var(--ink-2); display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.rzr-more > summary::-webkit-details-marker { display: none; }
.rzr-more > summary::after { content: "\25BE"; color: var(--ink-4); font-size: 12px; }
.rzr-more[open] > summary::after { transform: rotate(180deg); }
.rzr-list--secondary { margin-top: 10px; }
.rzr-list--secondary li { font-size: 13px; color: var(--ink-2); }
.rzr-close { margin-top: 13px; border-top: 1px solid var(--rule); padding-top: 13px; }
.rzr-btn { display: block; width: 100%; background: var(--red); color: #fff; font-size: 17px; font-weight: 700; letter-spacing: 0.2px; padding: 15px 20px; border: none; border-radius: 8px; cursor: pointer; font-family: inherit; }
.rzr-btn:hover { background: var(--red-dark); }
.rzr-disclosure { font-size: 10.5px; color: var(--ink-4); line-height: 1.5; margin-top: 11px; text-align: center; }
/* D-261 disclosure: the AGB/Datenschutz links must be visibly distinguishable as links
   (§2.2 accessibility) — the fine-print gray rendered them identical to the body text.
   Underline + darker ink on both the VIABLE (.rzr-disclosure) and BELOW_THRESHOLD
   (.pro-gate__disclosure) acceptance-via-purchase disclosures. */
.rzr-disclosure a,
.pro-gate__disclosure a { color: var(--ink-2, #444); text-decoration: underline; text-underline-offset: 2px; }

/* payment-trust row — official-style SVG marks (TWINT live in Stripe; card confirmed) */
.rzr-pay { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 11px; flex-wrap: wrap; }
.rzr-pay__lbl { font-size: 11.5px; color: var(--ink-4); }
.rzr-pay__logo { height: 22px; width: auto; display: inline-block; vertical-align: middle; }

/* ═══════════════ T-136 / D-265 — DUAL OFFER (one-time CHF 39 + PRO) ═══════════════
   Shared by the VIABLE card (.rzr-offer) and the BELOW_THRESHOLD card (.pro-gate--dual).
   Offer A (one-time CHF 39) carries PRIMARY visual weight at the decision point — a
   green-accented panel + solid-red CTA. Offer B (PRO) is the secondary upsell below a
   labelled divider — lighter panel + outlined CTA so it never out-shouts A. Mobile-first;
   both panels are full-width flowing text (no fixed-width columns → 375px-safe by construction). */
.rzr-offer-a,
.rzr-offer-b { border-radius: 10px; padding: 15px 15px 16px; overflow-wrap: anywhere; }
.rzr-offer-a { background: var(--green-bg); border: 1px solid var(--green-border); }
.rzr-offer-b { background: #fff; border: 1px solid var(--rule); margin-top: 0; }

/* offer head — badge + title */
.rzr-offer-a__head,
.rzr-offer-b__head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 9px; margin-bottom: 4px; }
.rzr-offer-a__badge,
.rzr-offer-b__badge { display: inline-block; font-size: 10px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; padding: 2px 8px; border-radius: 999px; white-space: nowrap; }
.rzr-offer-a__badge { color: var(--green); background: #fff; border: 1px solid var(--green-border); }
.rzr-offer-b__badge { color: var(--ink-3); background: var(--paper); border: 1px solid var(--rule); }
.rzr-offer-a__title { font-size: 16.5px; font-weight: 700; color: var(--ink); line-height: 1.25; }
.rzr-offer-b__title { font-size: 15px; font-weight: 700; color: var(--ink-1); line-height: 1.25; }
.rzr-offer-a__sub { font-size: 12.5px; color: var(--ink-3); line-height: 1.45; margin: 4px 0 11px; }

/* Offer A bullets sit on the tinted panel — keep the same green check marks, white plate */
.rzr-list--a { margin-bottom: 14px; }
.rzr-list--a li::before { background: #fff; }
.rzr-list--b { margin-top: 10px; }

/* Offer B PRO bonus (BELOW_THRESHOLD renders the transition flat, VIABLE uses .rzr-more) */
.rzr-offer-b__transition { margin-top: 11px; padding-top: 10px; border-top: 1px solid var(--rule); font-size: 13px; font-weight: 600; color: var(--ink-2); }
.rzr-offer-b__credit { margin-top: 12px; font-size: 12.5px; font-weight: 600; color: var(--green); line-height: 1.4; }

/* CTAs — A solid red (primary); B outlined red (secondary, clearly clickable but subordinate) */
.rzr-btn--a { margin-top: 4px; }
.rzr-btn--b { margin-top: 13px; background: #fff; color: var(--red); border: 1.5px solid var(--red); font-size: 15.5px; box-shadow: none; }
.rzr-btn--b:hover { background: var(--red); color: #fff; }

/* per-offer disclosure — same fine-print treatment as the shared .rzr-disclosure */
.rzr-disclosure--a,
.rzr-disclosure--b { margin-top: 9px; }

/* labelled divider between the two offers — "Zwei Wege zu Ihrem Brief" */
.rzr-offer-divider { display: flex; align-items: center; gap: 11px; margin: 15px 0; }
.rzr-offer-divider::before,
.rzr-offer-divider::after { content: ""; flex: 1; height: 1px; background: var(--rule); }
.rzr-offer-divider span { font-size: 10.5px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; color: var(--ink-4); white-space: nowrap; }

/* BELOW_THRESHOLD card adopts the dual offer: drop the legacy two-tier list padding so the
   two offer panels own their own chrome. The pro-gate__tier-header stays as the card heading. */
.pro-gate--dual .pro-gate__tier-header { margin-bottom: 12px; }

/* ── one-time-letter success surface (/referenzzins/?brief=bereit) ── */
.rz-brief-ready { background: #fff; border: 1px solid var(--green-border); border-top: 3px solid var(--green); border-radius: 12px; padding: 30px 22px 28px; text-align: center; max-width: 540px; margin: 8px auto 0; box-shadow: var(--shadow-sm); }
.rz-brief-ready__icon { width: 52px; height: 52px; margin: 0 auto 14px; border-radius: 50%; background: var(--green-bg); border: 1px solid var(--green-border); color: var(--green); font-size: 28px; font-weight: 700; line-height: 50px; }
.rz-brief-ready__title { font-family: "Playfair Display", var(--font-display, serif); font-size: 23px; font-weight: 700; color: var(--ink); line-height: 1.25; margin: 0 0 10px; }
.rz-brief-ready__body { font-size: 14.5px; color: var(--ink-3); line-height: 1.5; margin: 0 auto 18px; max-width: 420px; }
.rz-brief-ready__dl { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 54px; padding: 14px 26px; margin: 16px 0 0; border: none; border-radius: 13px; background: var(--red); color: #fff; font-family: var(--font-body); font-size: 16px; font-weight: 700; cursor: pointer; box-shadow: 0 6px 18px rgba(204, 0, 0, .18); }
.rz-brief-ready__dl:hover { background: var(--red-dark); }
.rz-brief-ready__dl:disabled { opacity: .6; cursor: default; }
.rz-brief-ready__dlnote { font-size: 13px; color: var(--ink-3); line-height: 1.45; margin: 12px auto 0; max-width: 420px; }
.rz-brief-ready__pro { font-size: 13px; color: var(--ink-3); line-height: 1.5; margin: 20px auto 16px; max-width: 440px; padding-top: 16px; border-top: 1px solid var(--rule); }
.rz-brief-ready__back { display: inline-block; font-size: 14px; font-weight: 600; color: var(--blue); text-decoration: none; }
.rz-brief-ready__back:hover { text-decoration: underline; }

/* desktop — 2-col (NK /ergebnis/ pattern; offer/CTA column sticky) */
@media (min-width: 768px) {
  .rzr { display: grid; grid-template-columns: 1fr min(42%, 380px); gap: 24px; align-items: start; }
  .rzr-left, .rzr-right { display: flex; flex-direction: column; gap: 16px; }
  /* D-261/§4 un-demote: lift the K-Tipp directly under the result hero (above the breakdown)
     so it stays prominent next to the sticky offer/CTA — the sole social-proof surface. */
  .rzr-trust { order: 1; }
  .rzr-databand { order: 1; }
  .rzr-back { grid-column: 1 / -1; }
  .rzr-right { position: sticky; top: 88px; }
  .rzr-hero { padding: 30px 28px 26px; }
  .rzr-hero__amount { font-size: 56px; }
  .rzr-offer { padding: 22px; }
}

/* The form lives in .container--narrow (640px). The VIABLE result needs room for the
   desktop 2-col, so renderResultCard adds .rz-result-wide to .rz-page-body (VIABLE only;
   removed for the form + non-VIABLE states). Higher specificity than .container--narrow,
   so it wins without !important. Mobile stays narrow (single column). */
@media (min-width: 768px) {
  .rz-page-body.rz-result-wide { max-width: 960px; }
}
@media (min-width: 1440px) {
  .rz-page-body.rz-result-wide { max-width: 1040px; }
}

/* ═══════════ F-RZ-FORM-REDESIGN — calculator entry page (Dražen 2026-06-15) ═══════════
   Hero + live-rate hook · single card with 3 numbered steps · auto-rate chip · advanced
   tucked · Swiss-credible trust marks. Re-skin only — all form IDs/wiring preserved. */
.rz2-hero { text-align: center; padding: 8px 0 4px; }
.rz2-hero .rz-title { margin-bottom: 0; }
.rz2-lede { font-size: 18px; color: var(--ink-3); margin: 12px auto 0; max-width: 520px; }

.rz2-ratehero { display: flex; align-items: center; gap: 18px; background: var(--white); border: 1px solid var(--green-border); border-radius: 16px; padding: 16px 20px; margin: 24px auto 0; max-width: 540px; box-shadow: var(--shadow-sm); position: relative; overflow: hidden; }
.rz2-ratehero::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--green); }
.rz2-ratehero__num { font-family: var(--font-display); font-weight: 700; font-size: 44px; line-height: 1; color: var(--green); }
.rz2-ratehero__mid { flex: 1; text-align: center; }
.rz2-ratehero__lbl { font-size: 12px; font-weight: 600; letter-spacing: 0.4px; text-transform: uppercase; color: var(--ink-4); }
.rz2-ratehero__trend { display: inline-flex; align-items: center; gap: 6px; font-size: 15px; color: var(--ink-3); margin-top: 3px; }
.rz2-ratehero__trend svg { width: 16px; height: 16px; color: var(--green); }
.rz2-ratehero__trend strong { color: var(--green); font-weight: 700; }
.rz2-badge { display: inline-flex; align-items: center; gap: 6px; background: var(--green-bg); border: 1px solid var(--green-border); color: var(--green); font-size: 12.5px; font-weight: 700; padding: 5px 11px; border-radius: 999px; white-space: nowrap; }
.rz2-badge svg { width: 14px; height: 14px; }

.rz2-promise { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px 22px; margin: 16px auto 0; font-size: 14.5px; color: var(--ink-3); }
.rz2-promise > span { display: inline-flex; align-items: center; gap: 7px; }
.rz2-promise svg { width: 17px; height: 17px; color: var(--green); flex: none; }

.calc-card.rz2-card { background: var(--white); border: 1px solid var(--rule); border-radius: 18px; box-shadow: var(--shadow-md); padding: 12px 30px 26px; margin-top: 28px; }
.rz2-step { padding: 22px 0; border-top: 1px solid var(--rule); }
.rz2-step:first-child { border-top: 0; }
.rz2-step__head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.rz2-step__no { flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--green-bg); border: 1px solid var(--green-border); color: var(--green); font-weight: 700; font-size: 15px; display: flex; align-items: center; justify-content: center; }
.rz2-step__q { font-size: 18px; font-weight: 600; color: var(--ink); }
.rz2-step__hint { font-size: 14px; color: var(--ink-4); margin: -8px 0 14px 40px; line-height: 1.45; }
.rz2-step__hint:empty { display: none; }
.rz2-field { margin-left: 40px; }

.rz2-money { max-width: 320px; border-radius: 11px; }
.rz2-yearinput { width: 150px; border-radius: 11px; font-size: 18px; font-weight: 600; }
.rz2-dates { max-width: 420px; gap: 12px; }
.rz2-dates .calc-select { border-radius: 11px; }
.rz2-dk { margin-top: 14px; font-size: 14.5px; color: var(--ink-3); }

.rz2-rate { margin-left: 40px; margin-top: 16px; }
.rz2-ratechip.rz-rate-auto { background: var(--green-bg); border: 1px solid var(--green-border); border-radius: 13px; padding: 13px 16px; }
.rz2-ratechip .rz2-ratechip__lbl { font-size: 12px; font-weight: 600; letter-spacing: 0.4px; text-transform: uppercase; color: var(--ink-4); margin-bottom: 4px; }
.rz2-ratechip .rz-rate-value { font-family: var(--font-display); font-size: 24px; font-weight: 700; color: var(--green); }
.rz2-ratechip__src { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 5px; font-size: 13px; color: var(--ink-4); }
.rz2-ratechip .rz-rate-edit { color: var(--blue); font-weight: 600; background: none; border: 0; cursor: pointer; font-family: inherit; font-size: 12.5px; white-space: nowrap; padding: 0; }
.rz2-rate .rz-formular-disclosure { margin-top: 10px; }

/* Dražen r5: slim rate chip (Option B) — label + value + badge on one row, source below.
   IDs (rz-rate-container/-value/-badge/-source-text/-edit-btn) preserved for updateRateDisplay;
   the badge className is reset by JS each tick, so the slim sizing hangs off the parent. */
.rz2-ratechip--slim { padding: 12px 14px; }
.rz2-ratechip__main { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.rz2-ratechip__left { flex: 1; min-width: 0; }
.rz2-ratechip--slim .rz2-ratechip__lbl { display: block; font-size: 13.5px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--ink-2); margin: 0; }
.rz2-ratechip--slim .rz2-ratechip__src { margin-top: 5px; }
/* Dražen r5 (chip B): confirmed-value box — "BWO bestätigt" small on top, value prominent below,
   right side. JS resets the badge className each tick, so the box styling hangs off __stat. */
/* Dražen r5.1: "Korrigieren" sits UNDER the confirmed-value box (it corrects that rate), not
   stranded in the left source line. Right column = box on top, edit link below. */
.rz2-ratechip__statcol { flex: none; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.rz2-ratechip__stat { display: flex; flex-direction: column; align-items: center; gap: 2px; background: var(--white); border: 1px solid var(--green-border); border-radius: 9px; padding: 6px 13px; }
.rz2-ratechip__stat .rz-rate-badge { background: none; border: 0; border-radius: 0; padding: 0; font-size: 9px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; color: #2d8a4e; }
.rz2-ratechip__stat .rz-rate-value { font-family: var(--font-body); font-size: 21px; font-weight: 700; line-height: 1; color: var(--green); }

/* Dražen r5: step-3 guidance = 1-line lead + a "Was zählt genau?" toggle (full guidance moves
   into #rz-baseline-more). The T-84 Formular-disclosure below stays visible. */
.rz2-step__hint--lead { color: var(--ink-3); }
.rz-baseline-toggle { background: none; border: 0; padding: 0; margin: 0; font: inherit; color: var(--blue); font-weight: 600; cursor: pointer; white-space: nowrap; }
.rz-baseline-toggle::after { content: "\25be"; margin-left: 4px; display: inline-block; transition: transform 0.15s; }
.rz-baseline-toggle[aria-expanded="true"]::after { transform: rotate(180deg); }

/* ── Rail extras: So funktioniert's + trust + Staffel note. Desktop = stacked in the left
   value rail (grid col 1, under the hero); mobile = naturally after the form (DOM order). ── */
.rz2-rail-extras { margin-top: 6px; }
.rz2-howitworks { display: none; } /* desktop-only — the form's own numbered steps guide mobile */
/* Dražen r5: railband wraps So-funktioniert's + trust. MOBILE = display:contents so the
   children flow in the rail unchanged (hiw hidden, trust = 3-across strip, no divider/kicker);
   DESKTOP = a 2-col grid with a divider (see the 900 block). */
.rz2-railband { display: contents; }
.rz2-railband__sep { display: none; }
.rz2-trust__kicker { display: none; }

/* Trust marks — MOBILE: a light 3-column strip (icon over a short label, no card chrome,
   subtitle hidden). DESKTOP (in the rail): stacked cards with subtitle — see the 900 block. */
.rz2-trust { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin: 18px 0 0; }
.rz2-trust__item { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; background: transparent; border: 0; padding: 2px; min-width: 0; }
.rz2-trust__ic { flex: none; width: 34px; height: 34px; border-radius: 9px; background: var(--paper-2); display: flex; align-items: center; justify-content: center; color: var(--ink-1); }
.rz2-trust__ic svg { width: 19px; height: 19px; display: block; }
.rz2-trust__ic--flag { background: transparent; }
.rz2-trust__ic--flag svg { width: 28px; height: 28px; }
.rz2-trust__item > div { display: flex; flex-direction: column; gap: 0; min-width: 0; }
.rz2-trust__t { font-size: 10.5px; font-weight: 600; color: var(--ink-2); line-height: 1.25; }
.rz2-trust__s { display: none; }

/* Staffel note — Dražen r5: contained info-note (icon + text + link) instead of a loose grey
   line. Full-width footnote below the form/rail (S-B). setAboveFoldVisible still hides it by
   .rz-indexstaffel-link on the result view. */
.rz-indexstaffel-link { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 4px 10px; background: #faf9f6; border: 1px solid var(--rule); border-radius: 10px; padding: 12px 16px; font-size: 13px; color: var(--ink-3); line-height: 1.45; margin: 20px 0 0; }
.rz-indexstaffel-ic { display: inline-flex; flex: none; color: var(--ink-4); }
.rz-indexstaffel-ic svg { width: 16px; height: 16px; display: block; }
/* Dražen r4: the sentence is plain muted text; only "Mehr erfahren →" is the link. */
.rz-indexstaffel-more { color: var(--blue); text-decoration: none; font-weight: 600; white-space: nowrap; }
.rz-indexstaffel-more:hover { text-decoration: underline; }

/* Dražen r5: FAQ accordion — DESKTOP-ONLY rail filler (reuses the page's 3 FAQ-schema Q&As;
   crawlers + mobile still get the JSON-LD FAQPage). All rows collapsed by default. */
.rz2-faq { display: none; }
.rz2-faq__kicker { font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-4); margin-bottom: 4px; }
.rz2-faq__item { border-bottom: 1px solid var(--rule); }
.rz2-faq__q { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; text-align: left; background: none; border: 0; padding: 12px 0; font-family: inherit; font-size: 14px; font-weight: 600; color: var(--ink); cursor: pointer; }
.rz2-faq__ic { flex: none; color: var(--green); font-size: 18px; line-height: 1; transition: transform 0.15s; }
.rz2-faq__q[aria-expanded="true"] .rz2-faq__ic { transform: rotate(45deg); }
.rz2-faq__a { font-size: 13px; color: var(--ink-3); line-height: 1.55; padding: 0 0 13px; }

.calc-btn.rz2-cta { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; border-radius: 13px; padding: 18px; font-size: 18px; font-weight: 700; margin-top: 22px; box-shadow: 0 6px 18px rgba(204, 0, 0, 0.18); }
.rz2-cta__arrow { width: 20px; height: 20px; flex: none; }
.calc-btn.rz2-cta.is-loading .rz2-cta__arrow { display: none; }
.rz2-reassure { text-align: center; font-size: 13px; color: var(--ink-4); margin-top: 12px; }

@media (max-width: 640px) {
  .rz2-lede { font-size: 16px; }
  /* Dražen r5.2 (A): rate-hero = centred stack on mobile (label / number / trend / badge).
     display:contents on __mid lets its label + trend reorder around the number. Desktop unchanged. */
  .rz2-ratehero { flex-direction: column; align-items: center; text-align: center; gap: 7px; padding: 18px 16px; }
  .rz2-ratehero__mid { display: contents; }
  .rz2-ratehero__lbl { order: 1; }
  .rz2-ratehero__num { order: 2; font-size: 42px; }
  .rz2-ratehero__trend { order: 3; }
  .rz2-ratehero .rz2-badge { order: 4; margin: 3px 0 0; }
  .calc-card.rz2-card { padding: 8px 18px 22px; border-radius: 16px; }
  .rz2-step__hint { margin-left: 40px; }
  .rz2-field, .rz2-rate { margin-left: 0; }
  .rz2-money, .rz2-dates { max-width: none; }
  /* Dražen r5.1: Baujahr field matches the full-width Monatsmiete field above. */
  .rz2-yearinput { width: 100%; }
  /* Dražen r5.1: Staffel note flows as one paragraph (icon inline) instead of the flex
     items wrapping to separate centred lines (icon-alone-on-top / link-alone-on-bottom). */
  .rz-indexstaffel-link { display: block; text-align: left; }
  .rz-indexstaffel-ic { vertical-align: -3px; margin-right: 4px; }
}

/* ═══ F-RZ-FORM-REDESIGN — desktop 2-col entry (Dražen 2026-06-15 staging review) ═══
   ≥900px: hero value-prop LEFT (on the cream page, no card), form RIGHT, aligned to the
   nav's container--wide (1200/1320px). Fills the width + collapses the height — the 640px
   single column looked stranded on wide desktops (Dražen r2: drop hero card, widen, steps 2-up). Scoped to the FORM
   VIEW via the .rz2-formgrid wrapper (around .rz-intro + #rz-calc-section); the result view
   is untouched (it owns its width via .rz-result-wide on .rz-page-body). The grid BREAKS OUT
   of .container--narrow (translateX-centred on the page-body's centre, width-agnostic) so
   .rz-page-body stays 640px → #result-host + non-VIABLE result cards keep their narrow width.
   <900px = unchanged single-column stack (Dražen-approved mobile/tablet preserved). */
@media (min-width: 900px) {
  .rz2-formgrid {
    width: min(1200px, calc(100vw - 48px));
    margin-left: 50%;
    transform: translateX(-50%);
    padding: 0 24px;
    box-sizing: border-box;
    display: grid;
    grid-template-columns: minmax(0, 1.18fr) minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    column-gap: 44px;
    row-gap: 0;
    align-items: start;
  }
  /* left VALUE RAIL = hero (row 1, on the cream — no card) + rail-extras (row 2: So
     funktioniert's, trust cards, Staffel note). The form spans both rows on the right, so
     the rail fills the height instead of leaving a void (Dražen r3). */
  .rz2-formgrid > .rz2-hero {
    grid-column: 1; grid-row: 1;
    max-width: none; margin: 0; padding: 4px 0 0;
    text-align: left; background: transparent; border: 0; box-shadow: none;
  }
  .rz2-formgrid > #rz-calc-section { grid-column: 2; grid-row: 1 / 3; margin-top: 0; }
  .rz2-formgrid > .rz2-rail-extras {
    grid-column: 1; grid-row: 2; align-self: start;
    display: flex; flex-direction: column; gap: 16px; margin: 20px 0 0;
  }
  .rz2-formgrid > .rz2-hero .rz2-lede { margin: 12px 0 0; max-width: none; }
  .rz2-formgrid > .rz2-hero .rz2-ratehero { margin: 22px 0 0; max-width: none; }
  /* Promise — Dražen r4: one tight row in the rail (dropped "& unverbindlich"; it's in the
     reassurance line under the button), no 2-row wrap. */
  .rz2-formgrid > .rz2-hero .rz2-promise { justify-content: flex-start; flex-wrap: nowrap; gap: 0 14px; font-size: 12.5px; }

  /* So funktioniert's — desktop-only VERTICAL TIMELINE (Dražen r4): green icon-dots
     connected by a line, distinct from the form's outlined number circles. */
  /* Dražen r5: "So funktioniert's" (left) + trust (right) side-by-side with a divider — was stacked. */
  .rz2-railband { display: grid; grid-template-columns: 1fr 1px 1fr; column-gap: 26px; align-items: start; border-top: 1px solid var(--rule); padding-top: 16px; }
  .rz2-railband__sep { display: block; background: var(--rule); align-self: stretch; }
  .rz2-howitworks { display: block; }
  .rz2-hiw__kicker { font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-4); margin-bottom: 12px; }
  .rz2-hiw__steps { position: relative; }
  .rz2-hiw__steps::before { content: ""; position: absolute; left: 13px; top: 13px; bottom: 13px; width: 2px; background: var(--rule); }
  .rz2-hiw__row { display: flex; align-items: flex-start; gap: 13px; position: relative; }
  .rz2-hiw__row + .rz2-hiw__row { margin-top: 16px; }
  .rz2-hiw__ic { flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--green); color: #fff; display: flex; align-items: center; justify-content: center; z-index: 1; }
  .rz2-hiw__ic svg { width: 14px; height: 14px; }
  .rz2-hiw__txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; padding-top: 3px; }
  .rz2-hiw__t { font-size: 13px; font-weight: 600; color: var(--ink); line-height: 1.25; }
  .rz2-hiw__s { font-size: 12px; color: var(--ink-4); line-height: 1.3; }

  /* Trust marks — DESKTOP: same light 3-across strip as mobile (Dražen r4: the stacked
     cards left big empty space to the right of each label). The base 3-col grid applies;
     just reset the mobile top-margin (the rail's flex-gap handles spacing). */
  /* Dražen r5: trust marks vertical with subtitles + a parallel kicker (band's right column). */
  .rz2-trust { display: flex; flex-direction: column; gap: 14px; margin: 0; }
  .rz2-trust__kicker { display: block; font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-4); margin-bottom: 0; }
  .rz2-trust__item { flex-direction: row; align-items: center; text-align: left; gap: 12px; padding: 0; }
  .rz2-trust__t { font-size: 13px; }
  .rz2-trust__s { display: block; font-size: 11.5px; color: var(--ink-4); line-height: 1.3; }

  /* Staffel note — left-aligned in the rail, below the trust cards. */
  /* Dražen r5 (S-B): Staffel note = full-width footnote spanning below both columns. */
  .rz2-formgrid > .rz-indexstaffel-link { grid-column: 1 / -1; margin: 24px 0 0; }

  /* Dražen r5: steps 1 & 2 input fields matched width (calmer read); step-3 dates keep their pair. */
  .rz2-money { max-width: 240px; }
  .rz2-yearinput { width: 240px; font-size: 16px; font-weight: 400; }

  /* Dražen r5: FAQ accordion fills the lower rail (desktop only). */
  .rz2-faq { display: block; border-top: 1px solid var(--rule); padding-top: 16px; }

  /* Dražen r4: Option A — all 3 steps STACKED (the 1+2 side-by-side row was lopsided:
     step 1 = one field vs step 2 = field + checkbox). The .rz2-steps-row wrapper stays a
     plain block on desktop too, so steps 1→2→3 stack with their separators (step1
     :first-child no border, step2 + step3 border-top). The form card is narrower now
     (grid ratio ~1:1.04) with a wider value rail on the left. */
}

/* ≥1440px the nav's container--wide grows to 1320px (DESIGN_SYSTEM §1) — match it so the
   form stays aligned with the logo/nav on large screens. */
@media (min-width: 1440px) {
  .rz2-formgrid { width: min(1320px, calc(100vw - 48px)); }
}