/* Sitzt bewusst in einer eigenen Datei und wird NACH kreditrechner.css geladen:
   style.css kommt im Header zuerst und wuerde bei gleicher Spezifitaet verlieren. */

/* ---------- Kreditrechner: Anpassung an das Seitendesign ---------- */
/* Der Rechner bringt eigene Farbtokens mit; hier wird er auf die Seite gezogen. */
.kr, .kr-sticky {
    --kr-accent: var(--color-primary);
    --kr-accent-dark: var(--color-primary-dark);
    --kr-accent-soft: #eef3f8;
    --kr-text: var(--color-text);
    --kr-muted: var(--color-text-light);
    --kr-line: var(--color-border);
    --kr-bg-alt: var(--color-bg-alt);
    --kr-go: #1e8449;
    --kr-radius: var(--radius);
}
/* Zahlen in der Auszeichnungsschrift der Seite */
.kr-card__big, .kr-facts dd, .kr-stress__box dd, .kr-sticky__num b, .kr-field__val input {
    font-family: var(--font-figure);
}
/* Die Handlungsaufforderung folgt dem Muster der Seite: dunkler Kasten, heller Button */
.kr-cta { background: var(--color-primary); border-color: var(--color-primary); box-shadow: var(--shadow); }
.kr-cta .kr-cta__title, .kr-cta p { color: #fff; }
.kr-cta .kr-cta__fine { color: rgba(255,255,255,0.72); }
.kr-cta .kr-btn { background: #fff; color: var(--color-primary-dark); }
.kr-cta .kr-btn:hover { background: #eef3f8; color: var(--color-primary-dark); }
.kr-sticky .kr-btn { background: var(--color-primary); color: #fff; }
.kr-sticky .kr-btn:hover { background: var(--color-primary-dark); color: #fff; }
/* Die Artikelregeln duerfen den Abstaenden des Rechners nicht dazwischenkommen */
.article-body .kr p { margin-bottom: 0.75em; }
.article-body .kr ul, .article-body .kr ol { margin: 0; }
.article-body .kr h2, .article-body .kr h3 { color: var(--color-text); }