/* Rechner im Stil der Website (Entwurf 2026-10-09)
   Wird nach den alten Rechner-Styles geladen und überschreibt sie. */
:root {
  --r-sm: 0; --r-md: 3px; --r-lg: 0; --r-xl: 0; --r-pill: 100px;
  --shadow-sm: none; --shadow-md: none;
  --primary: #0B4D62; --primary-dark: #072F3D; --primary-light: #F2F5F7;
  --teal: #0B4D62; --border: #DCE4E9; --bg: #F2F5F7; --muted: #5A6A72; --text: #1A2930;
  --green: #0B4D62; --green-light: #F2F5F7; --v1: #0B4D62; --v2: #4BB8D8;
}
/* Karten: flach, feine Linie */
.input-card, .result-card, .chart-box, .variant-card, .breakeven-box, .quiz-card { border: 1px solid #DCE4E9; box-shadow: none; }
.card-title, .bar-label, .wf-section-label, .variant-title { text-transform: none; letter-spacing: 0; font-size: 14px; font-weight: 600; color: #5A6A72; }
.field label, .kist-label { font-weight: 600; font-size: 14px; color: #1A2930; }
.field .hint { font-size: 13px; color: #5A6A72; }
/* Eingabefelder */
.zve-wrap input, .input-wrap input, .kist-select-wrap select { border: 1px solid #C9D5DC; border-radius: 3px; font-weight: 500; color: #0B4D62; }
.zve-wrap input:focus, .input-wrap input:focus { border-color: #0B4D62; box-shadow: 0 0 0 3px rgba(75,184,216,.18); }
.toggle-btn { border: 1px solid #C9D5DC; border-radius: 3px; font-weight: 500; color: #5A6A72; }
.toggle-btn.active { background: #F2F5F7; border: 1.5px solid #0B4D62; color: #0B4D62; font-weight: 600; }
.toggle-btn:focus:not(:focus-visible) { outline: none; }
.toggle-btn:hover:not(.active) { border-color: #0B4D62; color: #0B4D62; }
.switch input:checked + .switch-slider { background: #0B4D62; }
/* Ergebnis Einkommensteuer */
.result-total { background: #072F3D; border-radius: 0; padding: 26px 28px; }
.result-total-amount, .result-total-rate .rate-val { font-weight: 300; font-size: 34px; letter-spacing: -0.02em; }
.result-total-rate .rate-val { color: #4BB8D8; }
.breakdown { gap: 0; border-top: 1px solid #DCE4E9; }
.breakdown-row, .breakdown-row.grenz { background: none; border: 0; border-bottom: 1px solid #DCE4E9; border-radius: 0; padding: 14px 0; }
.breakdown-label { font-weight: 500; color: #1A2930; }
.breakdown-amount { font-weight: 600; color: #0B4D62; }
.bar-track { height: 8px; border-radius: 0; background: #E6EDF1; }
.bar-seg.netto, .bar-dot span.netto { background: #9FC4D2; }
.bar-seg.est, .bar-dot span.est { background: #0B4D62; }
.bar-seg.soli, .bar-dot span.soli { background: #4BB8D8; }
.bar-seg.kist, .bar-dot span.kist { background: #5A6A72; }
.bar-dot span { border-radius: 0; }
.disclaimer { background: #F2F5F7; border-radius: 0; border-left: 2px solid #4BB8D8; }
.disclaimer p { color: #1A2930; }
.chart-box h3, .compare-text h3 { font-weight: 500; font-size: 20px; letter-spacing: -0.01em; }
canvas#steuer-chart { border-radius: 0; }
/* Gehalt oder Ausschüttung */
.variant-header.v1 { background: #072F3D; }
.variant-header.v2 { background: #0B4D62; }
.variant-name { font-weight: 500; }
.variant-netto-val, .compare-amount .vorteil-val { font-weight: 300; font-size: 30px; }
.compare-amount .vorteil-val { color: #0B4D62; }
.compare-banner, .compare-banner.v1-better { background: #F2F5F7; border: 0; border-left: 2px solid #4BB8D8; border-radius: 0; }
.compare-icon, .be-icon { display: none; }
.wf-amount { font-weight: 600; }
.wf-amount.neg { color: #9A3B2E; }
.wf-row.total .wf-label, .wf-row.total .wf-amount { font-weight: 600; }
.wf-label .tag { border-radius: 3px; background: #F2F5F7; }
.wf-saving svg { stroke: #0B4D62; } .wf-saving-text { color: #0B4D62; }
.quote-bar-track, .quote-bar-fill { border-radius: 0; }
/* Rechtsform-Finder */
.quiz-wrapper { min-height: 0; padding: 0; }
.quiz-card, .result-card { max-width: 760px; }
.progress-bar { height: 3px; border-radius: 0; background: #E6EDF1; }
.progress-fill { border-radius: 0; }
.question-text { font-weight: 400; font-size: clamp(22px, 2.6vw, 30px); letter-spacing: -0.015em; }
.answers { gap: 0; border-top: 1px solid #DCE4E9; }
.answer-btn { border: 0; border-bottom: 1px solid #DCE4E9; border-radius: 0; padding: 18px 4px; font-size: 16.5px; background: none; }
.answer-btn:hover { background: #F2F5F7; color: #0B4D62; padding-left: 14px; }
.answer-btn.selected { background: #F2F5F7; font-weight: 600; }
.result-check { display: none; }
.result-subtitle, .result-desc { text-align: left; }
.result-name { text-align: left; font-weight: 300; color: #0B4D62; font-size: clamp(34px, 4.6vw, 56px); letter-spacing: -0.03em; }
.result-advantages, .kennzahl { background: none; border-radius: 0; padding: 0; }
.result-advantages ul { gap: 0; border-top: 1px solid #DCE4E9; }
.result-advantages ul li { padding: 12px 0; border-bottom: 1px solid #DCE4E9; font-size: 15.5px; }
.result-advantages ul li svg { stroke: #4BB8D8; }
.kennzahlen-grid { gap: 0; border-top: 1px solid #DCE4E9; }
.kennzahl { padding: 14px 0; border-bottom: 1px solid #DCE4E9; }
.kennzahl-value { font-weight: 600; }
/* Buttons wie auf der übrigen Website */
.btn-primary { background: #0B4D62; border-radius: 3px; box-shadow: none; font-weight: 600; padding: 16px 30px; }
.btn-primary:hover { background: #072F3D; transform: none; }
.restart-btn { border: 0; border-radius: 0; padding: 4px 0; color: #0B4D62; text-decoration: underline; text-decoration-color: #4BB8D8; text-underline-offset: 5px; }
.compare-amount .vorteil-val { color: #0B4D62 !important; }
.variant-title { color: rgba(255,255,255,.72) !important; }

/* Schieberegler rund */
.switch-slider { border-radius: 100px; background: #DCE4E9; }
.switch-slider::before { border-radius: 50%; }