/* Brutto-Netto-Rechner (Paul 28.10.2026: neu im Stil des Job-Passes). Links helle Eingabe, rechts dunkle Ergebniskarte mit einem Balken,
   darunter KV-Vergleich und Fragen. Farben nur aus den Tokens in styles.css; Lime nur auf Dunkel bzw. als Fläche. */
.rk { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "ein aus" "kv aus"; gap: var(--s5); align-items: start; }
.rk-ein { grid-area: ein; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s4); padding: var(--s6); background: var(--surface); border-radius: var(--r-l); box-shadow: var(--sh-1); }
.rk-aus { grid-area: aus; position: sticky; top: var(--s5); padding: var(--s6); border-radius: var(--r-l); background: var(--night); color: #fff; box-shadow: var(--sh-3); overflow: hidden; }
.rk-aus::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 7px; background: var(--lime); }
.rk-kv { grid-area: kv; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s3); padding: var(--s6); background: var(--surface); border-radius: var(--r-l); box-shadow: var(--sh-1); }

.rk-label { font-size: var(--t-s); font-weight: 700; color: var(--ink); }
.rk-hin { font-size: var(--t-xs); color: var(--muted); }
.rk-betrag { display: flex; align-items: center; gap: var(--s2); border: 2px solid var(--ink); border-radius: var(--r-m); padding: 0 var(--s4); background: var(--surface); }
.rk-betrag:focus-within { box-shadow: 0 0 0 4px var(--lime); }
.rk-betrag input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: inherit; font-size: clamp(32px, 4vw, 44px); font-weight: 800; letter-spacing: -.03em; color: var(--ink); padding: 10px 0; font-variant-numeric: tabular-nums; }
.rk-betrag span { font-size: clamp(24px, 3vw, 32px); font-weight: 800; color: var(--ink-2); }
.rk-seg { justify-self: start; }
.rk-zeile { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s2); padding-top: var(--s4); border-top: 1px solid var(--line); }
.rk-std { display: flex; align-items: center; gap: var(--s3); }
.rk-std input { width: 110px; min-height: 48px; border: 1px solid var(--field); border-radius: var(--r-s); padding: 0 12px; font: inherit; font-size: var(--t-m); font-weight: 700; background: var(--surface); color: var(--ink); }
.rk-chips { display: flex; flex-wrap: wrap; gap: var(--s2); }
.rk-pendler { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s2); padding: var(--s4); border-radius: var(--r-m); background: var(--soft); }
.rk-check { display: flex; align-items: center; gap: var(--s2); min-height: 44px; font-size: var(--t-s); }
.rk-check input { width: 20px; height: 20px; accent-color: var(--night); }
/* Zahlen-Pfeile weg, sie stören im großen Feld */
.rk input[type=number]::-webkit-inner-spin-button, .rk input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.rk input[type=number] { -moz-appearance: textfield; appearance: textfield; }

.rk-kicker { font-size: var(--t-xs); font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--night-muted); }
.rk-netto { margin: var(--s2) 0 0; font-size: clamp(48px, 7vw, 76px); font-weight: 800; letter-spacing: -.045em; line-height: 1; font-variant-numeric: tabular-nums; color: #fff; }
.rk-von { margin-top: var(--s2); color: var(--night-muted); font-size: var(--t-s); }
.rk-von b { color: var(--lime); }
.rk-balken { display: flex; height: 16px; margin: var(--s5) 0 var(--s4); border-radius: 16px; overflow: hidden; background: var(--night-2); }
.rk-balken i { display: block; height: 100%; transition: flex-basis .3s var(--ease); }
.rk-balken i + i { box-shadow: -2px 0 0 var(--night); }
.rk-legende { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s2); }
.rk-legende li { display: grid; grid-template-columns: 12px minmax(0, 1fr) auto auto; align-items: center; gap: var(--s3); font-size: var(--t-s); color: var(--night-muted); }
.rk-legende li::before { content: ""; width: 12px; height: 12px; border-radius: 4px; background: var(--f); }
.rk-legende b { color: #fff; font-variant-numeric: tabular-nums; }
.rk-legende small { min-width: 3.2em; text-align: right; font-size: var(--t-xs); }
.rk-legende li.netto { color: #fff; font-weight: 700; }
.rk-legende li.netto b { color: var(--lime); }
.rk-jahr { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); margin-top: var(--s5); padding: var(--s4); border-radius: var(--r-m); background: var(--night-2); }
.rk-jahr span { display: grid; font-weight: 700; }
.rk-jahr small { font-weight: 400; color: var(--night-muted); font-size: var(--t-xs); }
.rk-jahr b { font-size: clamp(22px, 2.6vw, 28px); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.rk-fein { margin-top: var(--s4); font-size: var(--t-xs); color: var(--muted); }
.rk-aus .rk-fein { color: var(--night-muted); }

.rk-kv h2 { font-size: var(--t-l); }
.rk-kv-felder { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: var(--s3); }
.rk-kv-info { padding: var(--s3) var(--s4); border-radius: var(--r-m); background: var(--soft); font-size: var(--t-s); }
.rk-kv-info.gut { background: var(--lime-soft); }
.rk-kv-info.unter { background: #fde8e4; }

.rk-mehr { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: var(--s5); align-items: start; }
.rk-fragen { padding: var(--s5) var(--s6) var(--s3); }
.rk-fragen h2 { font-size: var(--t-l); margin-bottom: var(--s2); }
.rk-fragen details { border-top: 1px solid var(--line); }
.rk-fragen summary { min-height: 56px; display: flex; align-items: center; cursor: pointer; font-weight: 700; }
.rk-fragen details p { padding-bottom: var(--s4); color: var(--ink-2); }
.rk-cta { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s3); padding: var(--s6); border-radius: var(--r-l); background: var(--lime); color: var(--ink); }
.rk-cta .rk-kicker { color: var(--lime-ink); }
.rk-cta h2 { font-size: var(--t-l); }
.rk-cta .rk-btn { justify-self: start; background: var(--night); color: #fff; border-color: var(--night); }

@media (max-width: 860px) {
  .rk { grid-template-columns: minmax(0, 1fr); grid-template-areas: "ein" "aus" "kv"; }
  .rk-aus { position: relative; top: auto; } /* relative, sonst hängt der Lime-Rand (::before) an der ganzen Seite */
  .rk-mehr { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 520px) {
  .rk-ein, .rk-aus, .rk-kv, .rk-cta { padding: var(--s5) var(--s4); }
  .rk-fragen { padding: var(--s4) var(--s4) var(--s2); }
  .rk-seg { justify-self: stretch; }
  .rk-seg button { flex: 1 1 0; min-width: 0; padding: 0 8px; }
}