/* === Reset & Base === */
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; font-size: 0.9rem; color: #1a202c; background: #f7fafc; }
a { color: #2b6cb0; text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4 { margin: 0 0 0.5rem; }

/* === Page Layout === */
.page-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; }
.page-header div { display: flex; gap: 0.5rem; }
.breadcrumb { margin-bottom: 1rem; font-size: 0.85rem; color: #718096; }
.breadcrumb a { color: #4a5568; }

/* === Buttons === */
.btn { display: inline-flex; align-items: center; justify-content: center; min-width: 185px; padding: 0.45rem 1.1rem; border: none; border-radius: 6px; cursor: pointer; font-size: 0.85rem; font-weight: 600; letter-spacing: 0.01em; transition: all 0.15s; white-space: nowrap; }
.btn-primary { background: linear-gradient(135deg, #3b82f6, #2563eb); color: white; box-shadow: 0 1px 3px rgba(37,99,235,0.3); }
.btn-primary:hover { background: linear-gradient(135deg, #2563eb, #1d4ed8); box-shadow: 0 3px 8px rgba(37,99,235,0.4); transform: translateY(-1px); }
.btn-secondary { background: linear-gradient(135deg, #0ea5e9, #0284c7); color: white; box-shadow: 0 1px 3px rgba(2,132,199,0.3); }
.btn-secondary:hover { background: linear-gradient(135deg, #0284c7, #0369a1); box-shadow: 0 3px 8px rgba(2,132,199,0.4); transform: translateY(-1px); }
.btn-sm { padding: 0.28rem 0.75rem; font-size: 0.78rem; }
.btn-icon { background: none; border: none; color: #64748b; cursor: pointer; font-size: 0.8rem; padding: 0.25rem 0.5rem; border-radius: 4px; transition: all 0.12s; }
.btn-icon:hover { color: #2563eb; background: #eff6ff; }
.info-badge { display: inline-flex; align-items: center; justify-content: center; width: 15px; height: 15px; border-radius: 50%; background: #4a9eda; color: white; font-size: 0.6rem; font-weight: 700; cursor: help; margin-left: 4px; vertical-align: middle; font-style: normal; }
.beratung-modus-bar { display: flex; align-items: center; gap: 0.5rem; }
.modus-badge { padding: 0.25rem 0.75rem; border-radius: 1rem; font-size: 0.85rem; font-weight: 600; }
.modus-ist { background: #eff6ff; color: #1d4ed8; border: 1px solid #bfdbfe; }
.modus-nachher { background: #f0fff4; color: #276749; border: 1px solid #9ae6b4; }
.btn-danger { background: linear-gradient(135deg, #f87171, #dc2626); color: white; border: none; min-width: 0; padding: 0.28rem 0.75rem; border-radius: 6px; cursor: pointer; font-size: 0.8rem; font-weight: 600; transition: all 0.15s; box-shadow: 0 1px 3px rgba(220,38,38,0.25); }
.btn-danger:hover { background: linear-gradient(135deg, #dc2626, #b91c1c); box-shadow: 0 3px 8px rgba(220,38,38,0.35); transform: translateY(-1px); }

/* === Search === */
.search-bar { margin-bottom: 1rem; }
.search-bar input { width: 100%; max-width: 400px; padding: 0.5rem 0.75rem; border: 1px solid #cbd5e0; border-radius: 4px; font-size: 0.85rem; }

/* === Tables === */
.data-table { width: 100%; border-collapse: collapse; background: white; border-radius: 6px; overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
.data-table th { background: #edf2f7; padding: 0.6rem 1rem; text-align: left; font-weight: 600; font-size: 0.8rem; color: #4a5568; border-bottom: 2px solid #e2e8f0; }
.data-table td { padding: 0.6rem 1rem; border-bottom: 1px solid #edf2f7; }
.data-table tr.clickable { cursor: pointer; }
.data-table tr.clickable:hover { background: #ebf8ff; }
.data-table .actions { text-align: right; white-space: nowrap; }
.data-table.compact th, .data-table.compact td { padding: 0.35rem 0.6rem; font-size: 0.8rem; }
.btn-icon.danger { color: #c53030; }
.btn-icon.danger:hover { color: #9b2c2c; }
.nested-card { background: #f7fafc; border: 1px solid #e2e8f0; border-radius: 6px; padding: 1rem; margin: 0.75rem 0; }
.nested-card h5 { margin: 0 0 0.5rem 0; font-size: 0.9rem; }

/* === Cards & Forms === */
.card { background: white; border-radius: 6px; padding: 1.25rem; box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
.form-card { margin-bottom: 1.5rem; }
.form-grid { display: grid; grid-template-columns: 180px 1fr; gap: 0.5rem 1rem; align-items: center; margin-bottom: 1rem; }
.form-grid label { font-weight: 500; font-size: 0.85rem; color: #4a5568; }
.form-grid input, .form-grid select { padding: 0.4rem 0.6rem; border: 1px solid #cbd5e0; border-radius: 4px; font-size: 0.85rem; max-width: 300px; }
.form-grid input[type="checkbox"] { width: 1.25rem; height: 1.25rem; max-width: none; margin: 0; justify-self: start; }

/* Checkboxen generell groesser & leichter treffbar */
input[type="checkbox"] { width: 1.25rem; height: 1.25rem; cursor: pointer; accent-color: #6b46c1; vertical-align: middle; }
.form-actions { display: flex; gap: 0.5rem; margin-top: 0.75rem; }

/* === Status === */
.status-badge { padding: 0.25rem 0.75rem; border-radius: 12px; font-size: 0.75rem; font-weight: 600; background: #bee3f8; color: #2a4365; }
.empty-hint { color: #a0aec0; font-style: italic; }

/* === Blazor defaults === */
h1:focus { outline: none; }
.valid.modified:not([type=checkbox]) { outline: 1px solid #26b050; }
.invalid { outline: 1px solid #e50000; }
.validation-message { color: #e50000; }
.blazor-error-boundary { background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121; padding: 1rem 1rem 1rem 3.7rem; color: white; }
.blazor-error-boundary::after { content: "An error has occurred." }

/* === Wizard === */
.wizard-nav { display: flex; gap: 0; margin-bottom: 1.5rem; border-bottom: 2px solid #e2e8f0; }
.wizard-step { display: flex; align-items: center; gap: 0.4rem; padding: 0.6rem 1.25rem; border: none; background: none; cursor: pointer; font-size: 0.85rem; color: #718096; border-bottom: 2px solid transparent; margin-bottom: -2px; transition: all 0.15s; }
.wizard-step:hover { color: #2b6cb0; }
.wizard-step.active { color: #2b6cb0; border-bottom-color: #2b6cb0; font-weight: 600; }
.wizard-step.done { color: #38a169; }
.wizard-step .step-nr { display: inline-flex; align-items: center; justify-content: center; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: #e2e8f0; font-size: 0.75rem; font-weight: 600; }
.wizard-step.active .step-nr { background: #2b6cb0; color: white; }
.wizard-step.done .step-nr { background: #38a169; color: white; }

/* === Beratung Layout (Wizard + Sidebar) === */
.beratung-layout { display: flex; gap: 1.5rem; }
.beratung-layout .wizard-content { flex: 1; min-height: 300px; }
.beratung-layout .ergebnis-sidebar { width: 320px; flex-shrink: 0; }
.beratung-layout .ergebnis-sidebar.zwei-spaltig { width: 480px; }

/* === Details/Summary collapsible === */
details > summary { user-select: none; list-style: none; }
details > summary::-webkit-details-marker { display: none; }
details > summary span:first-child { display: inline-block; transition: transform 0.2s; font-size: 0.6rem; color: #94a3b8; }
details[open] > summary span:first-child { transform: rotate(90deg); }

/* === Ergebnis Sidebar === */
.ergebnis-sidebar { background: white; border: 1px solid #e2e8f0; border-radius: 6px; padding: 1rem; position: sticky; top: 1rem; font-size: 0.85rem; }
.ergebnis-sidebar h4 { font-size: 0.9rem; margin-bottom: 0.5rem; color: #2d3748; border-bottom: 1px solid #e2e8f0; padding-bottom: 0.3rem; }
.ergebnis-zeile { display: flex; justify-content: space-between; padding: 0.25rem 0; border-bottom: 1px solid #f7fafc; }
.ergebnis-zeile span:first-child { color: #718096; }
.ergebnis-zeile-zwei { display: grid; grid-template-columns: 1fr 90px 90px; gap: 0.25rem; }
.ergebnis-zeile-zwei span:first-child, .ergebnis-zeile-zwei label:first-child { color: #718096; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ergebnis-zeile-zwei span:not(:first-child), .ergebnis-zeile-zwei strong { text-align: right; white-space: nowrap; }
.ergebnis-vergleich-header { display: grid; grid-template-columns: 1fr 90px 90px; gap: 0.25rem; padding: 0.2rem 0; margin-bottom: 0.2rem; border-bottom: 2px solid #e2e8f0; }
.ergebnis-col-label { font-size: 0.75rem; font-weight: 700; color: #4a5568; text-align: right; }
.ergebnis-zeile.highlight { background: #ebf8ff; padding: 0.3rem 0.25rem; border-radius: 3px; margin: 0.2rem 0; }
.ergebnis-zeile.highlight span { color: #2a4365; }
.ergebnis-zeile-klappbar { cursor: pointer; }
.ergebnis-zeile-klappbar:hover { background: #f7fafc; }
.klapp-pfeil { font-size: 0.65rem; color: #a0aec0; margin-left: 0.25rem; }
.ergebnis-detail { display: flex; justify-content: space-between; padding: 0.15rem 0 0.15rem 0.75rem; font-size: 0.8rem; color: #718096; border-bottom: 1px solid #f7fafc; }
.ergebnis-detail.ergebnis-zeile-zwei { display: grid; grid-template-columns: 1fr 90px 90px; gap: 0.25rem; padding: 0.15rem 0 0.15rem 0.75rem; }
.ergebnis-detail.ergebnis-zeile-zwei span:not(:first-child) { text-align: right; white-space: nowrap; }

.wizard-footer { display: flex; justify-content: space-between; align-items: center; margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid #e2e8f0; }
.wizard-footer-right { display: flex; gap: 0.5rem; }

.wizard-message { padding: 0.6rem 1rem; border-radius: 4px; margin-top: 1rem; font-size: 0.85rem; }
.wizard-message.success { background: #c6f6d5; color: #22543d; }
.wizard-message.error { background: #fed7d7; color: #9b2c2c; }
.wizard-message.info { background: #bee3f8; color: #2a4365; }

.wizard-banner { position: sticky; top: 0; z-index: 50; padding: 0.85rem 1.2rem; border-radius: 6px; margin: 0 0 1rem 0; font-size: 0.95rem; font-weight: 600; display: flex; align-items: center; gap: 0.6rem; box-shadow: 0 2px 6px rgba(0,0,0,0.08); border-left: 6px solid transparent; }
.wizard-banner.error { background: #fed7d7; color: #742a2a; border-left-color: #c53030; }
.wizard-banner .banner-icon { font-size: 1.3rem; }
.wizard-banner .banner-text { flex: 1; }
:root.dark .wizard-banner.error { background: #742a2a; color: #feb2b2; border-left-color: #fc8181; }

/* === Ergebnis === */
.ergebnis-container { display: flex; gap: 1.5rem; }
.ergebnis-spalte { flex: 1; }
.ergebnis-spalte.differenz { flex: 0.8; }

.ergebnis-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.ergebnis-table td { padding: 0.3rem 0.5rem; border-bottom: 1px solid #edf2f7; }
.ergebnis-table .val { text-align: right; font-variant-numeric: tabular-nums; }
.ergebnis-table .bold { font-weight: 600; }
.ergebnis-table .section-header td { font-weight: 600; color: #4a5568; background: #edf2f7; padding: 0.4rem 0.5rem; border-bottom: 2px solid #e2e8f0; }
.ergebnis-table .netto-row td { background: #ebf8ff; font-weight: 600; }
.ergebnis-table .ergebnis-highlight td { background: #c6f6d5; font-weight: 600; color: #22543d; }

/* === Ergebnis-Visualisierung === */
.ergebnis-viz { display: flex; flex-direction: column; gap: 1.25rem; margin-bottom: 1.25rem; }
.viz-block { background: #f7fafc; border: 1px solid #e2e8f0; border-radius: 8px; padding: 0.9rem 1rem; }
.viz-titel { margin: 0 0 0.75rem; font-size: 0.95rem; color: #2d3748; }
.viz-legende { display: flex; flex-wrap: wrap; gap: 0.75rem 1.25rem; margin-bottom: 0.75rem; font-size: 0.78rem; color: #4a5568; }
.viz-legende-item { display: inline-flex; align-items: center; gap: 0.35rem; }
.viz-swatch { width: 12px; height: 12px; border-radius: 3px; flex-shrink: 0; }
.viz-zeile { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.5rem; }
.viz-zeile-label { width: 4.5rem; flex-shrink: 0; font-size: 0.82rem; font-weight: 600; color: #4a5568; }
.viz-mini-label { width: 4.5rem; flex-shrink: 0; font-size: 0.78rem; color: #718096; }
.viz-bar { flex: 1; display: flex; height: 26px; border-radius: 5px; overflow: hidden; background: #edf2f7; }
.viz-bar-track { background: #edf2f7; }
.viz-seg { display: flex; align-items: center; justify-content: center; min-width: 2px; overflow: hidden; transition: width 0.3s ease; }
.viz-seg-text { font-size: 0.72rem; color: #fff; font-variant-numeric: tabular-nums; white-space: nowrap; padding: 0 0.3rem; text-shadow: 0 1px 1px rgba(0,0,0,0.25); }
.viz-vergleich { margin-bottom: 1rem; }
.viz-vergleich:last-child { margin-bottom: 0; }
.viz-vergleich-kopf { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 0.35rem; }
.viz-delta { font-size: 0.85rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.viz-delta-pos { color: #2f855a; }
.viz-delta-neg { color: #c53030; }
:root.dark .viz-block { background: #2d3748; border-color: #4a5568; }
:root.dark .viz-titel { color: #e2e8f0; }
:root.dark .viz-legende { color: #a0aec0; }
:root.dark .viz-zeile-label { color: #cbd5e0; }
:root.dark .viz-mini-label { color: #a0aec0; }
:root.dark .viz-bar, :root.dark .viz-bar-track { background: #1a202c; }
:root.dark .viz-delta-pos { color: #9ae6b4; }
:root.dark .viz-delta-neg { color: #feb2b2; }

/* === Inline Row (Netto-Positionen etc.) === */
.inline-row { display: flex; gap: 0.5rem; align-items: center; margin-bottom: 0.4rem; }
.inline-row input[type="text"] { flex: 1; padding: 0.4rem 0.6rem; border: 1px solid #cbd5e0; border-radius: 4px; font-size: 0.85rem; }
.inline-row input[type="number"] { width: 120px; padding: 0.4rem 0.6rem; border: 1px solid #cbd5e0; border-radius: 4px; font-size: 0.85rem; }

.hint { font-size: 0.8rem; color: #718096; margin-bottom: 0.75rem; }
.radio-row { display: flex; gap: 1rem; align-items: center; font-size: 0.85rem; }
.radio-row label { display: flex; align-items: center; gap: 0.3rem; cursor: pointer; }

/* === Schablonen-Grid (Profil) === */
.schablonen-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 0.35rem 1rem; margin-bottom: 1rem; }
.schablone-item { display: flex; align-items: center; gap: 0.4rem; }
.schablone-item input[type="checkbox"] { flex-shrink: 0; }
.schablone-name { font-size: 0.85rem; flex: 1; }
.schablone-betrag { width: 90px; padding: 0.25rem 0.4rem; border: 1px solid #cbd5e0; border-radius: 4px; font-size: 0.8rem; }

/* === Berechnungs-Indikator (Beratung) === */
.berechnung-laeuft { display: flex; align-items: center; gap: 0.5rem; font-size: 0.8rem; color: #718096; margin-bottom: 0.5rem; }

/* === Sidebar Laden-Indikator === */
.sidebar-laden { display: flex; align-items: center; gap: 0.4rem; font-size: 0.75rem; color: #718096; margin-bottom: 0.5rem; }
.sidebar-spinner { display: inline-block; width: 10px; height: 10px; border: 2px solid #cbd5e0; border-top-color: #4a9eda; border-radius: 50%; animation: spin 0.7s linear infinite; flex-shrink: 0; }
@keyframes spin { to { transform: rotate(360deg); } }

/* === Navbar Version-Link === */
.navbar-version { color: rgba(255,255,255,0.55); font-size: 0.75rem; margin-left: auto; margin-right: 0.75rem; text-decoration: none; font-variant-numeric: tabular-nums; transition: color 0.15s; }
.navbar-version:hover { color: white; text-decoration: none; }
:root.dark .navbar-version { color: rgba(144,205,244,0.6); }
:root.dark .navbar-version:hover { color: #90cdf4; }

/* === Changelog-Seite === */
.changelog-version { margin-bottom: 1.25rem; }
.changelog-header { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.75rem; }
.changelog-version-nr { font-size: 1.1rem; font-weight: 700; color: #2b6cb0; }
.changelog-datum { font-size: 0.8rem; color: #718096; }
.changelog-aktuell-badge { background: #c6f6d5; color: #22543d; font-size: 0.75rem; font-weight: 600; padding: 0.15rem 0.5rem; border-radius: 1rem; }
.changelog-liste { margin: 0; padding-left: 1.25rem; }
.changelog-liste li { font-size: 0.875rem; padding: 0.2rem 0; color: #2d3748; }
:root.dark .changelog-version-nr { color: #90cdf4; }
:root.dark .changelog-aktuell-badge { background: #276749; color: #9ae6b4; }
:root.dark .changelog-liste li { color: #e2e8f0; }

/* === Generischer Mini-Toggle === */
.toggle-track { position: relative; width: 34px; height: 18px; background: #cbd5e0; border-radius: 9px; cursor: pointer; transition: background 0.2s; flex-shrink: 0; }
.toggle-track.toggle-on { background: #3b82f6; }
.toggle-thumb { position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; background: white; border-radius: 50%; transition: transform 0.2s; }
.toggle-track.toggle-on .toggle-thumb { transform: translateX(16px); }
:root.dark .toggle-track { background: #4a5568; }
:root.dark .toggle-track.toggle-on { background: #3b82f6; }

/* === Dark Mode Toggle Schalter === */
.dark-toggle { display: flex; align-items: center; gap: 0.5rem; cursor: pointer; margin-left: auto; user-select: none; }
.dark-toggle-label { font-size: 0.75rem; color: rgba(255,255,255,0.7); }
.dark-toggle-track { position: relative; width: 40px; height: 22px; background: rgba(255,255,255,0.25); border-radius: 11px; transition: background 0.2s; flex-shrink: 0; }
.dark-toggle-thumb { position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; background: white; border-radius: 50%; transition: transform 0.2s; }
:root.dark .dark-toggle-track { background: #3b82f6; }
:root.dark .dark-toggle-thumb { transform: translateX(18px); }

/* ArbN-Veränderung: Investition (blau) vs. positive Veränderung (grün) — Dark-Mode-tauglich */
.arbn-investition { color: #2b6cb0; border-color: #2b6cb0; }
.arbn-positiv { color: #2f855a; border-color: #2f855a; }
:root.dark .arbn-investition { color: #90cdf4; border-color: #63b3ed; }
:root.dark .arbn-positiv { color: #9ae6b4; border-color: #68d391; }

/* === Dark Mode === */
:root.dark { color-scheme: dark; }
:root.dark body, :root.dark { color: #e2e8f0; background: #1a202c; }
:root.dark .navbar { background: #2d3748; border-bottom-color: #4a5568; }
:root.dark .navbar-brand a { color: #90cdf4; }
:root.dark .card, :root.dark .form-card { background: #2d3748; border-color: #4a5568; }
:root.dark .nested-card { background: #374151; border-color: #4a5568; }
:root.dark .data-table th { background: #374151; color: #a0aec0; }
:root.dark .data-table td { border-bottom-color: #4a5568; }
:root.dark .data-table tr:hover td { background: #374151; }
:root.dark input[type="text"], :root.dark input[type="number"], :root.dark input[type="email"], :root.dark select, :root.dark textarea { background: #374151; border-color: #4a5568; color: #e2e8f0; }
:root.dark input:focus, :root.dark select:focus { border-color: #63b3ed; }
:root.dark label { color: #cbd5e0; }
:root.dark h2, :root.dark h3, :root.dark h4, :root.dark h5 { color: #e2e8f0; }
:root.dark .breadcrumb { color: #a0aec0; }
:root.dark .breadcrumb a { color: #90cdf4; }
:root.dark .ergebnis-sidebar { background: #2d3748; border-color: #4a5568; }
:root.dark .ergebnis-sidebar h4 { color: #e2e8f0; border-bottom-color: #4a5568; }
:root.dark .ergebnis-zeile { border-bottom-color: #374151; }
:root.dark .ergebnis-zeile span:first-child { color: #a0aec0; }
:root.dark .ergebnis-zeile.highlight { background: #2a4365; }
:root.dark .ergebnis-zeile.highlight span, :root.dark .ergebnis-zeile.highlight strong { color: #90cdf4; }
:root.dark .ergebnis-zeile-klappbar:hover { background: #374151; }
:root.dark .ergebnis-detail { color: #a0aec0; border-bottom-color: #374151; }
:root.dark .wizard-nav { border-bottom-color: #4a5568; }
:root.dark .wizard-step { color: #a0aec0; }
:root.dark .wizard-step.active { color: #90cdf4; border-bottom-color: #3b82f6; }
:root.dark .wizard-step.done { color: #68d391; }
:root.dark .wizard-footer { border-top-color: #4a5568; }
:root.dark .empty-hint { color: #718096; }
:root.dark .hint { color: #a0aec0; }
:root.dark details summary { color: #a0aec0; }
:root.dark .modus-badge { background: #374151; color: #a0aec0; }
:root.dark .modus-badge.modus-ist { background: #2a4365; color: #90cdf4; }
:root.dark .modus-badge.modus-nachher { background: #276749; color: #9ae6b4; }
:root.dark .wizard-message.success { background: #276749; color: #9ae6b4; }
:root.dark .wizard-message.error { background: #742a2a; color: #feb2b2; }
:root.dark .wizard-message.info { background: #2a4365; color: #90cdf4; }
:root.dark .ergebnis-vergleich-header { border-bottom-color: #4a5568; }
:root.dark .ergebnis-col-label { color: #a0aec0; }
/* Links */
:root.dark a { color: #90cdf4; }
:root.dark a:hover { color: #bee3f8; }
/* Tabellen */
:root.dark .data-table { background: #2d3748; }
:root.dark .data-table td { color: #e2e8f0; }
:root.dark .data-table tr.clickable:hover { background: #374151; }
/* Ergebnis-Tabelle */
:root.dark .ergebnis-table td { color: #e2e8f0; border-bottom-color: #4a5568; }
:root.dark .ergebnis-table .section-header td { background: #374151; color: #a0aec0; border-bottom-color: #4a5568; }
:root.dark .ergebnis-table .netto-row td { background: #2a4365; color: #90cdf4; }
:root.dark .ergebnis-table .ergebnis-highlight td { background: #276749; color: #9ae6b4; }
/* Wizard Step-Nummern (inaktiv) */
:root.dark .wizard-step .step-nr { background: #4a5568; color: #e2e8f0; }
:root.dark .wizard-step { color: #718096; }
:root.dark .wizard-step:hover { color: #90cdf4; }
/* Disabled / Readonly Inputs */
:root.dark input:disabled, :root.dark select:disabled, :root.dark textarea:disabled { background: #2d3748 !important; color: #a0aec0 !important; border-color: #4a5568 !important; }
:root.dark input[readonly], :root.dark select[readonly], :root.dark textarea[readonly] { background: #2d3748 !important; color: #a0aec0 !important; border-color: #4a5568 !important; }
/* Inline-Styles mit hellem Hintergrund überschreiben */
:root.dark [style*="background:#f7fafc"], :root.dark [style*="background: #f7fafc"] { background: #2d3748 !important; }
:root.dark [style*="background:white"], :root.dark [style*="background: white"] { background: #2d3748 !important; }
:root.dark [style*="background:#fff"], :root.dark [style*="background: #fff"] { background: #2d3748 !important; }
:root.dark [style*="background:#fffbeb"], :root.dark [style*="background: #fffbeb"] { background: #5f3a0e !important; border-color: #8b6914 !important; }
/* Text-Farben in Inline-Styles */
:root.dark [style*="color:#2d3748"], :root.dark [style*="color: #2d3748"] { color: #e2e8f0 !important; }
:root.dark [style*="color:#4a5568"], :root.dark [style*="color: #4a5568"] { color: #a0aec0 !important; }
:root.dark [style*="color:#718096"], :root.dark [style*="color: #718096"] { color: #a0aec0 !important; }
/* Allgemeiner Text */
:root.dark .main-content { color: #e2e8f0; background: #1a202c; }
:root.dark p { color: #e2e8f0; }
:root.dark span { color: inherit; }
/* Details/Summary */
:root.dark details > summary { color: #a0aec0; }
:root.dark details > summary span:first-child { color: #718096; }
/* Inline-Row Inputs */
:root.dark .inline-row input[type="text"], :root.dark .inline-row input[type="number"] { background: #374151; border-color: #4a5568; color: #e2e8f0; }
/* Schablonen */
:root.dark .schablone-betrag { background: #374151; border-color: #4a5568; color: #e2e8f0; }
/* Ergebnis-Sidebar Zeilen */
:root.dark .ergebnis-zeile-zwei span:first-child, :root.dark .ergebnis-zeile-zwei label:first-child { color: #a0aec0; }
:root.dark .klapp-pfeil { color: #718096; }

/* === bAV Vertrags-Donut === */
.bav-split-donut { display: flex; align-items: center; gap: 1rem; margin-top: 0.75rem; padding: 0.5rem 0; }
.bav-split-legend { display: flex; flex-direction: column; gap: 0.3rem; font-size: 0.85rem; }
.bav-split-swatch { display: inline-block; width: 0.7rem; height: 0.7rem; border-radius: 2px; margin-right: 0.4rem; vertical-align: middle; }
:root.dark .bav-split-donut svg text { fill: #e2e8f0 !important; }
:root.dark .bav-split-donut svg text[fill="#718096"] { fill: #a0aec0 !important; }
:root.dark .bav-split-donut svg circle[stroke="#edf2f7"] { stroke: #2d3748; }

/* === Druck-Abrechnung === */
.druck-bar { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin-top: 1rem; padding-top: 0.75rem; border-top: 1px solid #e2e8f0; }
.druck-bar strong { margin-right: 0.25rem; }
.druck-modal-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.55); z-index: 1000; display: flex; align-items: center; justify-content: center; }
.druck-modal { background: #fff; width: 90vw; height: 92vh; max-width: 900px; border-radius: 6px; display: flex; flex-direction: column; box-shadow: 0 12px 36px rgba(0,0,0,0.4); }
.druck-modal-kopf { display: flex; justify-content: space-between; align-items: center; padding: 0.6rem 1rem; border-bottom: 1px solid #e2e8f0; font-weight: 600; }
.druck-modal-frame { flex: 1; width: 100%; border: 0; background: #f7fafc; }
:root.dark .druck-bar { border-top-color: #2d3748; }
:root.dark .druck-modal { background: #1a202c; color: #e2e8f0; }
:root.dark .druck-modal-kopf { border-bottom-color: #2d3748; }
:root.dark .druck-modal-frame { background: #1a202c; }

/* === Dark Mode – Ergänzungen (Klassen + Inline-Styles) === */
/* Klassen, die bisher keinen Dark-Override hatten */
:root.dark .status-badge { background: #2a4365; color: #90cdf4; }
:root.dark .btn-icon { color: #a0aec0; }
:root.dark .btn-icon:hover { color: #90cdf4; background: #2a4365; }
:root.dark .btn-icon.danger { color: #fc8181; }
:root.dark .btn-icon.danger:hover { color: #feb2b2; background: #4a1d1d; }
:root.dark .search-bar input { background: #374151; border-color: #4a5568; color: #e2e8f0; }
:root.dark .changelog-datum { color: #a0aec0; }
:root.dark .info-badge { background: #2b6cb0; }
:root.dark .berechnung-laeuft { color: #a0aec0; }
:root.dark .sidebar-laden { color: #a0aec0; }
:root.dark .sidebar-spinner { border-color: #4a5568; border-top-color: #90cdf4; }
:root.dark .bav-split-legend { color: #e2e8f0; }
:root.dark .schablone-name { color: #e2e8f0; }
:root.dark .modus-ist { background: #2a4365; color: #90cdf4; border-color: #2c5282; }
:root.dark .modus-nachher { background: #1c4532; color: #9ae6b4; border-color: #276749; }
:root.dark .login-error { background: #4a1d1d; border-color: #9b2c2c; color: #feb2b2; }

/* CSS-Variablen für LoginPage & andere var()-Konsumenten im Dark-Mode */
:root.dark { --bg-page: #1a202c; --bg-card: #2d3748; --border: #4a5568; --surface-alt: #374151; --color-text-muted: #a0aec0; --color-danger: #fc8181; }

/* Inline-Text-Farben (zusätzlich zu den bestehenden Matchern) */
:root.dark [style*="color:#666"], :root.dark [style*="color: #666"] { color: #a0aec0 !important; }
:root.dark [style*="color:#888"], :root.dark [style*="color: #888"] { color: #a0aec0 !important; }
:root.dark [style*="color:#999"], :root.dark [style*="color: #999"] { color: #a0aec0 !important; }
:root.dark [style*="color:#a0aec0"], :root.dark [style*="color: #a0aec0"] { color: #a0aec0 !important; }
:root.dark [style*="color:#92400e"], :root.dark [style*="color: #92400e"] { color: #fbd38d !important; }
:root.dark [style*="color:#1e40af"], :root.dark [style*="color: #1e40af"] { color: #90cdf4 !important; }
:root.dark [style*="color:#374151"], :root.dark [style*="color: #374151"] { color: #e2e8f0 !important; }
:root.dark [style*="color:#2f855a"], :root.dark [style*="color: #2f855a"] { color: #9ae6b4 !important; }
:root.dark [style*="color:#22543d"], :root.dark [style*="color: #22543d"] { color: #9ae6b4 !important; }
:root.dark [style*="color:#d69e2e"], :root.dark [style*="color: #d69e2e"] { color: #fbd38d !important; }
:root.dark [style*="color:#e67e22"], :root.dark [style*="color: #e67e22"] { color: #fbd38d !important; }
:root.dark [style*="color:red"], :root.dark [style*="color: red"] { color: #fc8181 !important; }
:root.dark [style*="color:green"], :root.dark [style*="color: green"] { color: #9ae6b4 !important; }

/* Inline-Hintergründe */
:root.dark [style*="background:#fef3c7"], :root.dark [style*="background: #fef3c7"] { background: #5f3a0e !important; color: #fbd38d !important; }
:root.dark [style*="background:#fefcbf"], :root.dark [style*="background: #fefcbf"] { background: #5f3a0e !important; color: #fbd38d !important; }
:root.dark [style*="background:#dbeafe"], :root.dark [style*="background: #dbeafe"] { background: #2a4365 !important; color: #90cdf4 !important; }
:root.dark [style*="background:#e5e7eb"], :root.dark [style*="background: #e5e7eb"] { background: #4a5568 !important; color: #e2e8f0 !important; }
:root.dark [style*="background:#fee"], :root.dark [style*="background: #fee"] { background: #4a1d1d !important; }

/* Inline-Borders */
:root.dark [style*="border:1px solid #cbd5e0"], :root.dark [style*="border: 1px solid #cbd5e0"] { border-color: #4a5568 !important; }
:root.dark [style*="border-color:#f6e05e"], :root.dark [style*="border-color: #f6e05e"] { border-color: #8b6914 !important; }
:root.dark [style*="border-left:3px solid #d97706"], :root.dark [style*="border-left: 3px solid #d97706"] { border-left-color: #d97706 !important; }

/* ===== Shared-Komponenten ===== */

/* PageHeader: Titel + Untertitel links gestapelt, Aktionen rechts.
   Höhere Spezifität als das Legacy `.page-header div { display:flex }`. */
.page-header .ph-main { display: flex; flex-direction: column; gap: 0.1rem; align-items: flex-start; }
.page-header .ph-sub { font-size: 0.9rem; color: #718096; font-weight: 400; }
.page-header .ph-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }
:root.dark .page-header .ph-sub { color: #a0aec0; }

/* SectionCard */
.section-card-head { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; }
.section-card-head h3 { margin: 0 0 0.75rem 0; }
.section-card-actions { display: flex; gap: 0.5rem; }

/* AccessBadge */
.access-badge { display: inline-block; padding: 0.1rem 0.55rem; border-radius: 999px; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.02em; }
.access-badge.owner { background: #c6f6d5; color: #22543d; }
.access-badge.guest { background: #e2e8f0; color: #4a5568; }
:root.dark .access-badge.owner { background: #276749; color: #9ae6b4; }
:root.dark .access-badge.guest { background: #4a5568; color: #e2e8f0; }

/* EntityCard */
.entity-card { background: white; border: 1px solid #e2e8f0; border-radius: 8px; padding: 1rem 1.1rem; box-shadow: 0 1px 3px rgba(0,0,0,0.08); display: flex; flex-direction: column; gap: 0.4rem; transition: all 0.15s; }
.entity-card.clickable { cursor: pointer; }
.entity-card.clickable:hover { border-color: #90cdf4; box-shadow: 0 4px 12px rgba(37,99,235,0.18); transform: translateY(-2px); }
.entity-card-head { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; }
.entity-card-titel { font-weight: 600; font-size: 0.95rem; color: #2d3748; }
.entity-card-sub { font-size: 0.82rem; color: #718096; }
.entity-card-body { font-size: 0.82rem; color: #4a5568; display: flex; gap: 1rem; flex-wrap: wrap; }
.entity-card-footer { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-top: 0.25rem; }
:root.dark .entity-card { background: #2d3748; border-color: #4a5568; }
:root.dark .entity-card.clickable:hover { border-color: #63b3ed; }
:root.dark .entity-card-titel { color: #e2e8f0; }
:root.dark .entity-card-sub { color: #a0aec0; }
:root.dark .entity-card-body { color: #cbd5e0; }

/* Karten-Raster */
.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1rem; margin-bottom: 1.5rem; }
.card-row { display: flex; gap: 1rem; overflow-x: auto; padding-bottom: 0.5rem; margin-bottom: 1.5rem; }
.card-row > .entity-card { min-width: 260px; flex: 0 0 auto; }

/* Dashboard-Sektion */
.dashboard-section-title { font-size: 1.05rem; margin: 1.25rem 0 0.6rem; color: #2d3748; }
:root.dark .dashboard-section-title { color: #e2e8f0; }

/* EmptyState */
.empty-state { text-align: center; padding: 2rem 1rem; color: #a0aec0; }
.empty-state-icon { font-size: 1.8rem; margin-bottom: 0.5rem; }
.empty-state-text { font-style: italic; margin: 0 0 0.75rem; }
.empty-state-actions { display: flex; justify-content: center; gap: 0.5rem; }

/* Tab-Inhalts-Toolbar (Aktionen oberhalb der Tab-Tabelle) */
.tab-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: 1rem; flex-wrap: wrap; }

/* TabBar (Optik wie Wizard-Nav) */
.tab-bar { display: flex; gap: 0; margin-bottom: 1.5rem; border-bottom: 2px solid #e2e8f0; }
.tab-bar-item { padding: 0.6rem 1.25rem; border: none; background: none; cursor: pointer; font-size: 0.88rem; color: #718096; border-bottom: 2px solid transparent; margin-bottom: -2px; transition: all 0.15s; font-weight: 500; }
.tab-bar-item:hover { color: #2b6cb0; }
.tab-bar-item.active { color: #2b6cb0; border-bottom-color: #2b6cb0; font-weight: 600; }
:root.dark .tab-bar { border-bottom-color: #4a5568; }
:root.dark .tab-bar-item { color: #a0aec0; }
:root.dark .tab-bar-item:hover, :root.dark .tab-bar-item.active { color: #90cdf4; }
:root.dark .tab-bar-item.active { border-bottom-color: #90cdf4; }

/* === Vorsorgeplaner === */
.vp-step { display: block; }
.vp-step > .vp-bereich-card { display: block; width: 100%; margin: 0 0 1rem 0; padding: 1rem 1.25rem; }
.vp-bereich-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 1.5rem; flex-wrap: wrap; }
.vp-bereich-header > .vp-bereich-info { flex: 1 1 280px; min-width: 240px; }
.vp-bereich-header > .vp-donut { flex: 0 0 auto; }
.vp-donut { display: flex; gap: 1rem; align-items: center; }
.vp-donut-legend { display: flex; flex-direction: column; gap: 0.3rem; font-size: 0.85rem; min-width: 170px; }
.vp-swatch { display: inline-block; width: 0.75rem; height: 0.75rem; border-radius: 2px; margin-right: 0.4rem; vertical-align: middle; }
.vp-row-empf { background: rgba(190, 227, 248, 0.25); }
.vp-row-adhoc { background: rgba(254, 252, 191, 0.35); }
:root.dark .vp-row-empf { background: rgba(49, 130, 206, 0.2); }
:root.dark .vp-row-adhoc { background: rgba(214, 158, 46, 0.2); }
.vp-table { width: 100%; }
.vp-table th, .vp-table td { vertical-align: middle; }
.vp-wunsch-row { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.6rem; flex-wrap: wrap; }
.vp-toolbar { display: flex; align-items: center; gap: 0.5rem; margin: 0.5rem 0 1rem; padding: 0.5rem 0.75rem; background: #edf2f7; border-radius: 6px; flex-wrap: wrap; }
:root.dark .vp-toolbar { background: #2d3748; }
.vp-zielwert { font-weight: 600; color: #2b6cb0; }
:root.dark .vp-zielwert { color: #90cdf4; }

/* Inline-Feldvalidierung (z.B. E-Mail-Format) */
.input-fehler { border-color: #dc2626 !important; box-shadow: 0 0 0 1px #dc2626; }
.feld-fehler { display: block; margin-top: 0.2rem; font-size: 0.78rem; color: #dc2626; }
.error-text { color: #dc2626; }
:root.dark .feld-fehler, :root.dark .error-text { color: #f87171; }
:root.dark .input-fehler { border-color: #f87171 !important; box-shadow: 0 0 0 1px #f87171; }

/* Beratungs-Modus: Ist-Berechnung (grün) / Nachher-Berechnung (blau) */
.berechnung-titel { font-weight: 700; }
.berechnung-titel.ist { color: #38a169; }
.berechnung-titel.nachher { color: #2b6cb0; }
:root.dark .berechnung-titel.ist { color: #68d391; }
:root.dark .berechnung-titel.nachher { color: #90cdf4; }

/* Wizard-Tabs je nach Modus einfärben — nur Schrift + aktiver Unterstrich,
   der Hintergrund des Schritt-Nummernkreises bleibt unverändert (Feedback Punkt 9). */
.wizard-nav.modus-ist .wizard-step.active { color: #38a169; border-bottom-color: #38a169; }
.wizard-nav.modus-nachher .wizard-step.active { color: #2b6cb0; border-bottom-color: #2b6cb0; }
:root.dark .wizard-nav.modus-ist .wizard-step.active { color: #68d391; border-bottom-color: #68d391; }
:root.dark .wizard-nav.modus-nachher .wizard-step.active { color: #90cdf4; border-bottom-color: #3b82f6; }