/* ============================================================
   Tools (Rechner & Checks) – Wizard, Fortschritt, Ergebnis.
   Lädt zusätzlich zu site.css (+ form.css für das Lead-Formular am Ende).
   Helles Layout auf Seitengrund; Lead-Formular am Ende = Navy-Karte (form.css).
   ============================================================ */
.tool{max-width:46rem;margin:0 auto;}

/* Fortschritt */
.tool-progress{margin:0 0 var(--space-6);}
.tool-progress__track{height:8px;background:var(--navy-050,#eef1f4);border-radius:var(--radius-pill);overflow:hidden;}
.tool-progress__bar{display:block;height:100%;width:25%;background:var(--brass-500);border-radius:var(--radius-pill);transition:width .3s ease;}
.tool-progress__label{margin:.5rem 0 0;font-size:var(--text-sm);color:var(--text-muted);}
@media (prefers-reduced-motion:reduce){.tool-progress__bar{transition:none;}}

/* Schritt */
.tool-step{border:0;padding:0;margin:0;min-width:0;}
.tool-step[hidden]{display:none;}
.tool-step__lead{font-size:var(--text-sm);color:var(--text-muted);margin:.2rem 0 var(--space-5);line-height:1.5;}

/* Felder (hell) */
.tool-field{margin-bottom:var(--space-5);border:0;padding:0;min-width:0;}
.tool-field > label,.tool-field > legend{display:block;font:var(--fw-semibold) var(--text-md)/1.4 var(--font-body);color:var(--navy-900);margin-bottom:.5rem;padding:0;}
.tool-field .tool-hint{display:block;font-weight:var(--fw-regular);font-size:var(--text-sm);color:var(--text-muted);margin-top:.15rem;}
.tool-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-4);}
/* Inline-Frage: Text links, kleines Zahlenfeld rechts (genug Platz vorhanden) */
.tool-field--inline{display:flex;flex-wrap:wrap;align-items:center;column-gap:1.25rem;row-gap:.3rem;}
.tool-field--inline[hidden]{display:none;}
.tool-field--inline > label{flex:1 1 13rem;margin-bottom:0;}
.tool-field--inline .tool-hint{display:inline;}
.tool-field.tool-field--inline > input[type=number]{flex:0 0 auto;width:6rem;text-align:center;}
.tool-field--inline > .tool-err{flex-basis:100%;}
@media (max-width:480px){ .tool-field.tool-field--inline > input[type=number]{width:5rem;} }
.tool-affix{position:relative;display:flex;align-items:center;}
.tool-affix__unit{position:absolute;right:.85rem;color:var(--text-muted);font-size:var(--text-sm);pointer-events:none;}
.tool-field input[type=text],.tool-field input[type=number]{
  width:100%;font:var(--fw-regular) var(--text-base)/1.5 var(--font-body);color:var(--text-strong);
  background:var(--surface-card);border:1.5px solid var(--border);border-radius:var(--radius-md);
  padding:.7rem .85rem;-webkit-appearance:none;appearance:none;box-sizing:border-box;transition:border-color .15s,box-shadow .15s;}
.tool-field input:hover{border-color:var(--warm-500);}
.tool-field input:focus{outline:none;border-color:var(--brass-500);box-shadow:0 0 0 3px var(--brass-100,rgba(160,124,58,.18));}

/* Auswahl-Chips (hell) */
.tool-seg{display:flex;flex-wrap:wrap;gap:.5rem;}
.tool-seg input{position:absolute;opacity:0;width:0;height:0;}
.tool-seg label{display:inline-flex;align-items:center;justify-content:center;text-align:center;cursor:pointer;
  font:var(--fw-semibold) var(--text-sm)/1 var(--font-body);color:var(--navy-800);background:var(--surface-card);
  border:1.5px solid var(--border);border-radius:var(--radius-pill);padding:.6rem 1.1rem;transition:all .15s;}
.tool-seg label:hover{border-color:var(--brass-400);}
.tool-seg input:checked + label{background:var(--navy-900);color:var(--paper);border-color:var(--navy-900);}
.tool-seg input:focus-visible + label{outline:2px solid var(--brass-500);outline-offset:2px;}

/* Fehler */
.tool-err{display:block;font-size:var(--text-sm);color:#b3261e;margin-top:.35rem;min-height:0;}
.tool-field.is-error input{border-color:#b3261e;box-shadow:0 0 0 2px rgba(179,38,30,.18);}
.tool-field.is-error .tool-seg input:not(:checked) + label{border-color:#b3261e;}

/* Navigation */
.tool-nav{display:flex;justify-content:space-between;gap:1rem;margin-top:var(--space-6);}
.tool-nav [data-next]{margin-left:auto;}

/* Ergebnis */
.tool-result{background:var(--surface-card);border:1px solid var(--border);border-left:4px solid var(--brass-500);
  border-radius:var(--radius-lg);padding:clamp(1.25rem,3vw,1.75rem);margin-bottom:var(--space-6);}
.tool-result h3{font-family:var(--font-display);font-weight:var(--fw-medium);font-size:var(--text-xl);color:var(--navy-900);margin:0 0 .25rem;}
.tool-result__range{font-family:var(--font-display);font-weight:var(--fw-medium);font-size:clamp(1.6rem,5vw,2.3rem);color:var(--navy-900);margin:.4rem 0 .1rem;}
.tool-result__sub{font-size:var(--text-sm);color:var(--text-muted);margin:0 0 var(--space-5);}
.tool-result__rows{list-style:none;margin:0 0 var(--space-4);padding:0;border-top:1px solid var(--border);}
.tool-result__rows li{display:flex;justify-content:space-between;gap:1rem;padding:.5rem 0;border-bottom:1px solid var(--border);font-size:var(--text-md);}
.tool-result__rows .k{color:var(--text-body);} .tool-result__rows .v{font-weight:var(--fw-semibold);color:var(--navy-900);white-space:normal;text-align:right;}
.tool-result__assumptions{font-size:var(--text-sm);color:var(--text-muted);line-height:1.5;margin:.5rem 0 0;}
.tool-disclaimer{font-size:var(--text-sm);color:var(--text-muted);line-height:1.55;background:var(--navy-050,#eef1f4);border-radius:var(--radius-md);padding:.8rem 1rem;margin:var(--space-4) 0 0;}
.tool-cta{margin:var(--space-5) 0 var(--space-7);}

@media (max-width:560px){ .tool-row{grid-template-columns:1fr;gap:0;} }

/* Ergebnis gegated: kurzer, geblurrter Teaser – Formular sofort sichtbar */
.tool-result.is-gated{padding:.9rem 1.1rem;border-left-color:var(--warm-500);margin-bottom:var(--space-4);}
.tool-gate__line{display:flex;align-items:center;gap:.55rem;flex-wrap:wrap;font-family:var(--font-display);font-weight:var(--fw-medium);font-size:clamp(1.05rem,3.2vw,1.4rem);color:var(--navy-900);margin:0;}
.tool-gate__blur{filter:blur(7px);-webkit-user-select:none;user-select:none;font-weight:var(--fw-bold);letter-spacing:.03em;pointer-events:none;}
.tool-gate__hint{display:flex;align-items:center;gap:.45rem;font-size:var(--text-sm);color:var(--text-muted);margin:.5rem 0 0;}
.tool-gate__hint svg{width:1.05em;height:1.05em;flex:none;color:var(--brass-600);}

/* (i) Info-Bubble */
.tool-info{position:relative;display:inline-flex;vertical-align:middle;margin-left:.3rem;line-height:0;}
.tool-info__btn{width:1.2rem;height:1.2rem;padding:0;border:0;background:transparent;color:var(--warm-600);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;}
.tool-info__btn svg{width:100%;height:100%;}
.tool-info__btn:hover,.tool-info__btn[aria-expanded="true"]{color:var(--brass-600);}
.tool-info__btn:focus-visible{outline:2px solid var(--brass-500);outline-offset:2px;border-radius:50%;}
.tool-info__pop{position:absolute;left:50%;top:calc(100% + .55rem);transform:translateX(-50%);width:min(17rem,72vw);z-index:30;
  background:var(--navy-900);color:var(--paper);font:var(--fw-regular) var(--text-sm)/1.45 var(--font-body);
  padding:.7rem .85rem;border-radius:var(--radius-md);box-shadow:var(--shadow-md);text-align:left;}
.tool-info__pop::before{content:"";position:absolute;bottom:100%;left:50%;transform:translateX(-50%);border:6px solid transparent;border-bottom-color:var(--navy-900);}
.tool-info__pop[hidden]{display:none;}

/* ===== Split-Layout: helles Info-Panel links, NAVY-Rechner rechts (Farbtausch 2026-06) ===== */
.tool-split{display:grid;grid-template-columns:0.82fr 1.18fr;border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;background:var(--surface-card);}
.tool-split__aside{background:var(--surface-card);color:var(--navy-900);padding:clamp(1.5rem,3.5vw,2.5rem);}
.tool-split__aside .sh__eyebrow{color:var(--brass-700);}
.tool-split__aside h1{font-family:var(--font-display);font-weight:var(--fw-medium);font-size:clamp(1.6rem,3.2vw,2.15rem);color:var(--navy-900);margin:.4rem 0 .6rem;line-height:1.2;}
.tool-split__lead{font-size:var(--text-md);line-height:1.55;color:var(--text-body);margin:0 0 1.3rem;}
.tool-split__trust{list-style:none;margin:0 0 1.5rem;padding:0;display:flex;flex-direction:column;gap:.7rem;}
.tool-split__trust li{display:flex;align-items:flex-start;gap:.6rem;font-size:var(--text-md);color:var(--text-body);}
.tool-split__trust li::before{content:"";width:.5em;height:.5em;margin-top:.5em;background:var(--brass-500);transform:rotate(45deg);flex:none;}
.tool-split__phone{display:inline-flex;align-items:center;gap:.5em;color:var(--brass-700);font-weight:var(--fw-semibold);text-decoration:none;font-size:var(--text-md);}
.tool-split__phone svg{width:1.05em;height:1.05em;}
.tool-split__main{padding:clamp(1.25rem,3vw,2rem);background:var(--navy-900);color:var(--paper);}
.tool-split__main .tool{max-width:none;}
@media (max-width:760px){ .tool-split{grid-template-columns:1fr;} }

/* --- Anpassungen der Wizard-Elemente an den dunklen rechten Bereich --- */
.tool-split__main .tool-progress__track{background:rgba(255,255,255,.16);}
.tool-split__main .tool-progress__label{color:rgba(255,255,255,.7);}
.tool-split__main .tool-field > label,.tool-split__main .tool-field > legend,
.tool-split__main .tool-field-title{color:var(--paper);}
.tool-split__main .tool-hint,.tool-split__main .tool-step__lead{color:rgba(255,255,255,.65);}
.tool-split__main .tool-seg label{background:transparent;color:var(--paper);border-color:rgba(255,255,255,.45);}
.tool-split__main .tool-seg label:hover{border-color:var(--brass-300);}
.tool-split__main .tool-seg input:checked + label{background:var(--brass-400);color:var(--navy-900);border-color:var(--brass-400);}
.tool-split__main .tool-err{color:#ffb4ab;}
.tool-split__main .tool-field.is-error input{border-color:#ff8a7a;box-shadow:0 0 0 2px rgba(255,138,122,.28);}
.tool-split__main .tool-field.is-error .tool-seg input:not(:checked) + label{border-color:#ff8a7a;}
/* Weißes Ergebnis-/Teaser-Kärtchen auf Navy: Textfarbe defensiv dunkel setzen
   (z. B. für die unklassifizierte JS-Fehlermeldung „Berechnung nicht möglich.") */
.tool-split__main .tool-result{color:var(--text-body);}
.tool-split__main .tool-nav .btn--primary{background:var(--paper);color:var(--navy-900);border-color:var(--paper);}
.tool-split__main .tool-nav .btn--primary:hover{background:#fff;color:var(--navy-900);}
.tool-split__main .btn--ghost{color:var(--paper);border-color:rgba(255,255,255,.45);background:transparent;}
.tool-split__main .btn--ghost:hover{background:rgba(255,255,255,.12);color:var(--paper);}
.tool-split__main .tool-info__btn{color:rgba(255,255,255,.6);}
.tool-split__main .tool-info__btn:hover,.tool-split__main .tool-info__btn[aria-expanded="true"]{color:var(--brass-300);}
.tool-split__main .tool-info__pop{background:var(--paper);color:var(--navy-900);}
.tool-split__main .tool-info__pop::before{border-bottom-color:var(--paper);}
.tool-split__main .tool-note{background:rgba(255,255,255,.1);color:rgba(255,255,255,.8);}
/* Lead-Formular: Navy-Karte auf Navy-Grund → nahtlos einbetten (kein Karten-Doppel) */
.tool-split__main .lead-formwrap{background:transparent;box-shadow:none;padding:0;}

/* ---- Nach dem Absenden: Ergebnis links (helles Panel), Aktionen rechts (Navy) ---- */
.tool-aside__result{margin:0;}
.tool-aside__result h3{color:var(--navy-900);}
.tool-done__thanks{font-size:var(--text-sm);color:rgba(255,255,255,.72);line-height:1.5;margin:0 0 var(--space-5);}
.tool-done__block{margin-bottom:var(--space-6);} .tool-done__block:last-child{margin-bottom:0;}
.tool-done__h{font-family:var(--font-display);font-weight:var(--fw-medium);font-size:var(--text-lg);color:var(--paper);margin:0 0 var(--space-3);}
.tool-done__links{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.55rem;}
.tool-done__links a{display:flex;align-items:center;justify-content:space-between;gap:.6em;font-weight:var(--fw-semibold);
  color:var(--navy-800);background:var(--surface-card);border:1.5px solid var(--border);border-radius:var(--radius-md);
  padding:.7rem 1rem;text-decoration:none;transition:border-color .15s,color .15s;}
.tool-done__links a:hover{border-color:var(--brass-400);color:var(--navy-900);}
.tool-done__links svg{width:1.05em;height:1.05em;flex:none;color:var(--brass-600);}
/* Übrige Rechner: kommagetrennte Textlinks in einer Zeile */
.tool-done__more{font-size:var(--text-sm);color:rgba(255,255,255,.65);line-height:1.6;margin:.7rem 0 0;}
.tool-done__more a{color:var(--brass-300);text-decoration:underline;text-underline-offset:.15em;}
.tool-done__more a:hover{color:var(--brass-200,#dcc79a);}
/* Beratungs-Box: groß, hell, mit USP-Bullets */
.tool-done__consult{background:var(--surface-card);border-left:4px solid var(--brass-500);border-radius:var(--radius-lg);
  padding:clamp(1.15rem,3vw,1.6rem);}
.tool-done__consult h3{font-family:var(--font-display);font-weight:var(--fw-medium);font-size:var(--text-xl);color:var(--navy-900);margin:0 0 .7rem;}
.tool-done__usps{list-style:none;margin:0 0 var(--space-5);padding:0;display:flex;flex-direction:column;gap:.55rem;}
.tool-done__usps li{display:flex;align-items:flex-start;gap:.6rem;font-size:var(--text-sm);line-height:1.5;color:var(--text-body);}
.tool-done__usps li::before{content:"";width:.5em;height:.5em;margin-top:.45em;background:var(--brass-500);transform:rotate(45deg);flex:none;}

/* Zusatzinhalte nach dem Absenden (erst nach Klick auf „Ergebnis erhalten" sichtbar) */
[data-tool-reveal][hidden]{display:none;}
.tool-next__h{font-family:var(--font-display);font-weight:var(--fw-medium);font-size:var(--text-xl);color:var(--navy-900);margin:0 0 var(--space-4);}
.tool-otherlinks{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.6rem;}
.tool-otherlinks a{display:inline-flex;align-items:center;gap:.4em;font-size:var(--text-sm);font-weight:var(--fw-semibold);color:var(--navy-800);background:var(--surface-card);border:1.5px solid var(--border);border-radius:var(--radius-pill);padding:.5rem 1rem;text-decoration:none;transition:border-color .15s,color .15s;}
.tool-otherlinks a:hover{border-color:var(--brass-400);color:var(--navy-900);}

/* Kompaktes Ergebnis + Erfolg in Schritt 3 */
.tool-result{padding:clamp(.95rem,2.4vw,1.3rem);}
.tool-result h3{font-size:1.02rem;margin-bottom:.1rem;}
.tool-result__range{font-size:clamp(1.35rem,4vw,1.75rem);margin:.15rem 0 .05rem;}
.tool-result__sub{font-size:var(--text-sm);margin-bottom:var(--space-3);}
.tool-result__rows li{padding:.4rem 0;font-size:var(--text-sm);}
.tool-result__assumptions,.tool-disclaimer{font-size:var(--text-xs);}
.tool-disclaimer{padding:.6rem .8rem;margin-top:var(--space-3);}
.tool-final .lead-success{padding:clamp(1rem,3vw,1.5rem) var(--space-4);}
.tool-final .lead-success__ic{width:36px;height:36px;margin-bottom:.5rem;}
.tool-final .lead-success h3{font-size:1.2rem;margin-bottom:.25rem;}
.tool-final .lead-success p{font-size:var(--text-sm);}
.tool-final .lead-success__cta-q{margin:var(--space-4) 0 .6rem;font-weight:var(--fw-semibold);color:var(--paper);}

/* Datumsfeld modern & konsistent (native Picker bleibt erhalten) */
.tool-field input[type=date]{width:100%;font:var(--fw-regular) var(--text-base)/1.5 var(--font-body);color:var(--text-strong);background:var(--surface-card);border:1.5px solid var(--border);border-radius:var(--radius-md);padding:.65rem .85rem;box-sizing:border-box;color-scheme:light;transition:border-color .15s,box-shadow .15s;}
.tool-field input[type=date]:hover{border-color:var(--warm-500);}
.tool-field input[type=date]:focus{outline:none;border-color:var(--brass-500);box-shadow:0 0 0 3px var(--brass-100,rgba(160,124,58,.18));}
.tool-field input[type=date]::-webkit-calendar-picker-indicator{cursor:pointer;opacity:.55;}
.tool-field input[type=date]::-webkit-calendar-picker-indicator:hover{opacity:1;}

/* Kurzer Geltungs-Hinweis (z. B. Zugewinn nur bei Zugewinngemeinschaft) */
.tool-note{font-size:var(--text-sm);color:var(--text-muted);line-height:1.5;background:var(--navy-050,#eef1f4);border-radius:var(--radius-md);padding:.7rem .9rem;margin:0 0 var(--space-5);}