/**
 * assets/rendite-rechner.css — Styling fuer den Rendite-/Sparplan-Rechner
 * (/rendite-rechner/). Additiv zum Design-System. Nutzt ausschliesslich die
 * vorhandenen CSS-Variablen aus assets/kredus.css (Marke = var(--brand-*)),
 * beruehrt Marke/Logo/Tokens NICHT. Wird nur auf der Rechner-Seite geladen.
 * Machart analog assets/bu-rechner.css / assets/rentenluecke-rechner.css.
 * Erstellt 2026-07-27.
 */

/* Layout: Eingaben links, Ergebnis rechts; ab 860px zweispaltig. */
.rr-sec { padding-top: clamp(8px, 2vw, 20px); }
.rr-card {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-6);
  background: var(--ground);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-2);
  padding: clamp(20px, 3.2vw, 34px);
}
@media (min-width: 860px) {
  .rr-card { grid-template-columns: 1.05fr 1fr; gap: var(--s-8); align-items: start; }
}

.rr-form { margin: 0; min-width: 0; }
.rr-form h2, .rr-results h2 {
  font-size: 1.16rem; margin: 0 0 var(--s-5); letter-spacing: -.01em; color: var(--ink);
}

.rr-field { margin-bottom: var(--s-5); }
.rr-field:last-child { margin-bottom: 0; }
.rr-field > label {
  display: block; font-size: .82rem; font-weight: 700; color: var(--ink);
  margin: 0 0 6px; letter-spacing: .01em;
}
.rr-field .opt { font-weight: 500; color: var(--muted-2); text-transform: none; letter-spacing: 0; }

.rr-inputwrap { position: relative; display: flex; align-items: stretch; }
.rr-inputwrap input {
  width: 100%; min-height: 50px; box-sizing: border-box;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  padding: 12px 46px 12px 14px; font-size: 1.05rem; font-family: var(--font-num);
  background: var(--ground); color: var(--ink); -moz-appearance: textfield;
}
.rr-inputwrap input::-webkit-outer-spin-button,
.rr-inputwrap input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.rr-inputwrap input:focus {
  outline: 3px solid var(--brand-200); outline-offset: 1px; border-color: var(--brand-400);
}
.rr-inputwrap .rr-unit {
  position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
  color: var(--muted); font-weight: 600; pointer-events: none; font-size: 1rem;
}
.rr-hint { color: var(--muted); font-size: var(--fs-xs); margin: 6px 0 0; line-height: 1.45; }

/* Zwei schmale Felder nebeneinander (Laufzeit / Rendite) */
.rr-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); }

/* Ergebnis-Panel */
.rr-results {
  background: var(--brand-050); border: 1px solid var(--brand-100);
  border-radius: var(--r); padding: clamp(18px, 2.6vw, 26px); min-width: 0;
}
.rr-headline { margin-bottom: var(--s-5); }
.rr-headline .rr-label {
  font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
  color: var(--brand-600); margin: 0 0 4px;
}
.rr-big {
  font-family: var(--font-num); font-size: clamp(2rem, 1.4rem + 3vw, 2.9rem);
  font-weight: 700; line-height: 1.05; color: var(--brand-800); letter-spacing: -.02em;
}
.rr-band { margin-top: 6px; font-size: .96rem; color: var(--ink-soft); line-height: 1.5; }
.rr-band strong { color: var(--brand-700); font-weight: 700; }

/* Balken: Einzahlung vs. Wertzuwachs */
.rr-bar {
  display: flex; height: 16px; margin-top: var(--s-5); border-radius: var(--r-pill);
  overflow: hidden; background: var(--brand-100);
}
.rr-bar-ein { background: var(--brand-400); transition: width .35s var(--ease); }
.rr-bar-zu { background: var(--brand-700); transition: width .35s var(--ease); }
.rr-legend { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 10px; font-size: var(--fs-xs); color: var(--muted); }
.rr-legend span { display: inline-flex; align-items: center; gap: 6px; }
.rr-legend i { width: 11px; height: 11px; border-radius: 3px; flex: none; }
.rr-legend .lg-ein { background: var(--brand-400); }
.rr-legend .lg-zu { background: var(--brand-700); }

.rr-rows { margin-top: var(--s-5); border-top: 1px solid var(--brand-100); }
.rr-row {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-4);
  padding: 12px 0; border-bottom: 1px solid var(--brand-100);
}
.rr-row:last-child { border-bottom: 0; }
.rr-row .rr-k { color: var(--ink-soft); font-size: .95rem; }
.rr-row .rr-v {
  font-family: var(--font-num); font-weight: 700; color: var(--brand-800);
  font-size: 1.08rem; text-align: right; white-space: nowrap;
}
.rr-row .rr-v small { display: block; font-family: var(--font); font-weight: 500; font-size: .78rem; color: var(--muted); white-space: normal; }

.rr-note {
  display: flex; gap: 10px; align-items: flex-start;
  margin-top: var(--s-5); padding: 12px 14px; border-radius: var(--r-sm);
  background: var(--accent-050); border: 1px solid var(--accent-100);
  color: var(--ink-soft); font-size: .9rem; line-height: 1.5;
}
.rr-note svg { width: 18px; height: 18px; flex: none; color: var(--accent-700); margin-top: 1px; }
.rr-note[hidden] { display: none; }

.rr-disc { margin: var(--s-4) 0 0; font-size: var(--fs-xs); color: var(--muted); line-height: 1.5; }

.rr-cta { margin-top: var(--s-6); }
.rr-cta .btn { width: 100%; justify-content: center; }

/* Reine No-JS-Absicherung: Hinweis, falls JS aus ist. */
.rr-nojs { display: none; color: var(--muted); font-size: .95rem; line-height: 1.6; }
html:not(.js) .rr-nojs { display: block; }
html:not(.js) .rr-results .rr-live { display: none; }

/* Methodik-Aufklappbox im Ergebnis-Kontext */
.rr-method { margin-top: var(--s-4); }
.rr-method summary {
  cursor: pointer; font-size: var(--fs-xs); font-weight: 700; color: var(--brand-700);
  padding: 4px 0; list-style: none;
}
.rr-method summary::-webkit-details-marker { display: none; }
.rr-method summary::before { content: "+ "; }
.rr-method[open] summary::before { content: "– "; }
.rr-method .rr-method-body { font-size: var(--fs-xs); color: var(--muted); line-height: 1.6; margin-top: 6px; }
.rr-method .rr-method-body ul { margin: 6px 0 0; padding-left: 18px; }
.rr-method .rr-method-body li { margin: 3px 0; }

/* E-E-A-T Autoren-Box und Quellen (im .article-Kontext) — analog bu-rechner.css */
.article .k-authorbox {
  display: flex; gap: var(--s-4); align-items: flex-start;
  margin: var(--s-8) 0 var(--s-6); padding: clamp(16px, 2.4vw, 22px);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r);
}
.article .k-authorbox-ic {
  flex: none; width: 44px; height: 44px; border-radius: var(--r-pill);
  display: flex; align-items: center; justify-content: center;
  background: var(--brand-050); color: var(--brand-700); border: 1px solid var(--brand-100);
}
.article .k-authorbox-ic svg { width: 24px; height: 24px; }
.article .k-authorbox-name { margin: 0 0 4px; font-weight: 700; color: var(--ink); font-size: 1.02rem; }
.article .k-authorbox-role { margin: 0; color: var(--muted); font-size: .92rem; line-height: 1.55; }
.article .k-sources { font-size: .88rem; color: var(--muted); line-height: 1.6; margin: 0 0 var(--s-4); }
.article .k-sources strong { color: var(--ink-soft); }