/* ============================================================
   APP.CSS – Globales Design-System

   Beschreibung:
   – Definiert alle CSS-Variablen, Reset-Regeln, Utility-Klassen und
     komponentenübergreifenden Styles des Design-Systems.
   – Referenz: Deep-Petrol-UI mit Teal/Cyan-Glow und Coral-Akzent.

   Zweck:
   – Gehört zum projekteinheitlichen Datei-Header-Standard.
   ============================================================ */

:root {
    --bg-app: #071316;
    --bg-app-deep: #03090d;
    --bg-app-alt: #0a171c;
    --bg-surface: #0d1a20;
    --bg-surface-2: #10212a;
    --bg-surface-3: #14262f;
    --bg-elevated: #19333c;
    --bg-input: #10212a;
    --surface-gradient: linear-gradient(155deg, rgba(25, 51, 60, 0.96) 0%, rgba(13, 26, 32, 0.98) 46%, rgba(5, 13, 17, 0.98) 100%);
    --surface-gradient-soft: linear-gradient(160deg, rgba(20, 38, 47, 0.9) 0%, rgba(10, 23, 28, 0.96) 100%);
    --button-gradient-primary: linear-gradient(135deg, #22e1cf 0%, #00bfae 54%, #0a8f8d 100%);
    --button-gradient-secondary: linear-gradient(135deg, #ff9b5a 0%, #ff7048 100%);

    --border-soft: rgba(142, 226, 220, 0.09);
    --border-strong: rgba(142, 226, 220, 0.19);
    --border-warm: rgba(255, 112, 72, 0.28);

    --text-main: #f3fbff;
    --text-soft: #9fb7bd;
    --text-muted: #5f777e;
    --text-faint: #3f565d;
    --text-on-accent: #031015;

    --accent-primary: #22e1cf;
    --accent-primary-strong: #00bfae;
    --accent-primary-soft: rgba(34, 225, 207, 0.14);
    --accent-primary-glow: rgba(34, 225, 207, 0.32);
    --accent-secondary: #ff7048;
    --accent-secondary-strong: #ff9b5a;
    --accent-secondary-soft: rgba(255, 112, 72, 0.15);
    --accent-secondary-glow: rgba(255, 112, 72, 0.3);
    --accent-blue: #1f9bff;
    --accent-blue-soft: rgba(31, 155, 255, 0.15);
    --accent-mint: #48e6b2;
    --accent-mint-soft: rgba(72, 230, 178, 0.15);

    --success: #48e6b2;
    --danger: #ff5f6d;
    --warning: #ff9b5a;
    --info: #1f9bff;

    --glow-primary: 0 0 0 1px rgba(34, 225, 207, 0.18), 0 0 22px rgba(34, 225, 207, 0.18);
    --glow-secondary: 0 0 0 1px rgba(255, 112, 72, 0.18), 0 0 22px rgba(255, 112, 72, 0.17);
    --shadow-soft: 0 12px 30px rgba(0, 0, 0, 0.32);
    --shadow-card: 0 18px 44px rgba(0, 0, 0, 0.46);
    --shadow-glow: 0 22px 56px rgba(0, 0, 0, 0.52), 0 0 34px rgba(34, 225, 207, 0.07);

    --radius-sm: 10px;
    --radius-md: 16px;
    --radius-lg: 22px;
    --radius-pill: 9999px;
    --space-xs: 6px;
    --space-sm: 10px;
    --space-md: 16px;
    --space-lg: 24px;
    --space-xl: 32px;
    --transition-fast: 0.18s ease;
    --transition-normal: 0.28s ease;
}

*, *::before, *::after { box-sizing: border-box; }

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    background:
        radial-gradient(circle at 14% -10%, rgba(34, 225, 207, 0.1) 0, transparent 28rem),
        radial-gradient(circle at 92% 4%, rgba(31, 155, 255, 0.08) 0, transparent 24rem),
        linear-gradient(135deg, var(--bg-app-deep) 0%, var(--bg-app) 52%, #08171b 100%);
    color: var(--text-main);
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
    font-size: 15px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
    color: var(--text-main);
    font-weight: 700;
    margin-top: 0;
}

a {
    color: var(--accent-primary);
    text-decoration: none;
    transition: color var(--transition-fast), text-shadow var(--transition-fast);
}

a:hover {
    color: var(--accent-primary-strong);
    text-shadow: 0 0 14px var(--accent-primary-glow);
}

p { color: var(--text-soft); margin-bottom: var(--space-sm); }
small, .small { color: var(--text-muted); }
::selection { background: var(--accent-primary-soft); color: var(--text-main); }

.page {
    display: flex;
    min-height: 100vh;
}

.main {
    flex: 1;
    padding: var(--space-xl);
    min-height: 100vh;
    background:
        linear-gradient(180deg, rgba(13, 26, 32, 0.54) 0%, rgba(3, 9, 13, 0.12) 44%),
        var(--bg-app);
    overflow-x: hidden;
}

@media (max-width: 768px) {
    .main { padding: var(--space-md); }
}

@media (max-width: 900px) {
    .finance-stat-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .db-header,
    .page-header,
    .finance-toolbar,
    .finance-detail-section__header {
        align-items: stretch;
        flex-direction: column;
    }

    .page-header__actions,
    .finance-toolbar__actions,
    .finance-detail-section__actions {
        justify-content: flex-start;
    }

    .finance-stat-grid {
        grid-template-columns: 1fr;
    }

    .finance-card-header,
    .finance-card-body {
        padding-inline: 18px;
    }
}

.page-title {
    font-size: 1.8rem;
    font-weight: 800;
    color: var(--text-main);
    margin: 0;
    letter-spacing: 0;
}

.page-subtitle {
    font-size: 0.88rem;
    color: var(--text-muted);
    margin: 2px 0 0 0;
}

.finance-page-shell {
    width: min(100%, 1900px);
    display: grid;
    gap: 18px;
}

.page-header {
    margin-bottom: 24px;
}

.page-header__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 10px;
}

.finance-toolbar,
.subscription-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 18px;
    padding: 12px 16px;
    border: 1px solid rgba(142, 226, 220, 0.1);
    border-radius: 18px;
    background: rgba(16, 33, 42, 0.48);
}

.finance-toolbar__meta,
.finance-toolbar > span,
.subscription-toolbar span {
    color: var(--text-muted);
    font-size: 0.78rem;
    font-weight: 850;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.finance-toolbar__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
}

.finance-toolbar__select {
    width: min(100%, 180px);
}

.lk-monatssumme {
    color: #f87171;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.lk-jahres-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 12px;
}

@media (max-width: 900px) {
    .lk-jahres-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 600px) {
    .lk-jahres-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.lk-jahres-monat {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding: 10px 12px;
    background: rgba(16, 33, 42, 0.5);
    border: 1px solid rgba(142, 226, 220, 0.08);
    border-radius: 10px;
}

.lk-jahres-monat__name {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.lk-jahres-monat__betrag {
    font-size: 0.95rem;
    font-weight: 700;
    color: #f87171;
}

.finance-stat-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
}

.finance-stat-card,
.saldo-card {
    position: relative;
    min-width: 0;
    padding: 18px 20px;
    border-radius: 22px;
    border: 1px solid rgba(142, 226, 220, 0.12);
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.035), transparent 34%),
        linear-gradient(155deg, rgba(20, 38, 47, 0.96) 0%, rgba(12, 25, 31, 0.98) 58%, rgba(5, 13, 17, 0.99) 100%);
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.035);
    overflow: hidden;
}

.finance-stat-card__label,
.saldo-label {
    display: block;
    color: var(--text-faint);
    font-size: 0.72rem;
    font-weight: 850;
    letter-spacing: 0.08em;
    line-height: 1.18;
    text-transform: uppercase;
}

.finance-stat-card__value,
.saldo-value {
    display: block;
    margin-top: 8px;
    color: var(--text-main);
    font-size: clamp(1.16rem, 1.08vw, 1.48rem);
    font-weight: 880;
    line-height: 1.05;
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
}

.finance-empty-state {
    display: grid;
    place-items: center;
    min-height: 120px;
    padding: 28px;
    color: var(--text-muted);
    font-size: 0.9rem;
    font-weight: 720;
    text-align: center;
}

.finance-alert,
.alert {
    margin-bottom: 18px;
    padding: 14px 16px;
    border-radius: 18px;
    border: 1px solid rgba(142, 226, 220, 0.12);
    background: rgba(16, 33, 42, 0.66);
    color: var(--text-soft);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.24);
}

.alert-danger {
    border-color: rgba(255, 95, 109, 0.32);
    background: rgba(255, 95, 109, 0.09);
    color: var(--danger);
}

.alert-warning {
    border-color: rgba(255, 155, 90, 0.32);
    background: rgba(255, 155, 90, 0.09);
    color: var(--warning);
}

.alert-info {
    border-color: rgba(31, 155, 255, 0.32);
    background: rgba(31, 155, 255, 0.09);
    color: var(--info);
}

.finance-detail-section {
    margin-top: 18px;
    padding: 18px 0 22px;
    border-top: 1px solid rgba(142, 226, 220, 0.1);
}

.finance-detail-section:first-child {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
}

.finance-detail-section__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 14px;
}

.finance-detail-section__title {
    color: var(--text-main);
    font-size: 1rem;
    font-weight: 850;
}

.finance-detail-section__meta {
    margin-top: 4px;
    color: var(--text-muted);
    font-size: 0.78rem;
}

.finance-detail-section__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
}

.fw-medium { font-weight: 500; }
.fw-semibold { font-weight: 600; }

.finance-card {
    position: relative;
    min-width: 0;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.035), transparent 34%),
        linear-gradient(155deg, rgba(20, 38, 47, 0.96) 0%, rgba(12, 25, 31, 0.98) 58%, rgba(5, 13, 17, 0.99) 100%);
    border: 1px solid rgba(142, 226, 220, 0.13);
    border-radius: 26px;
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.035);
    overflow: hidden;
    transition: transform var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.finance-card::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(135deg, rgba(34, 225, 207, 0.08), transparent 36%, rgba(255, 112, 72, 0.04));
    opacity: 0.85;
}

.finance-card:hover {
    transform: translateY(-1px);
    border-color: rgba(34, 225, 207, 0.19);
    box-shadow: 0 19px 44px rgba(0, 0, 0, 0.38), 0 0 12px rgba(34, 225, 207, 0.04);
}

.finance-card > * {
    position: relative;
    z-index: 1;
}

.finance-card-header {
    min-height: 58px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 22px;
    border-bottom: 1px solid var(--border-soft);
    font-weight: 850;
    font-size: 0.78rem;
    color: var(--text-main);
    background: linear-gradient(180deg, rgba(20, 38, 47, 0.74), rgba(16, 33, 42, 0.46));
    letter-spacing: 0.08em;
    line-height: 1.2;
    text-transform: uppercase;
}

.finance-card-body { padding: 22px; }

.table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--text-main);
    --bs-table-border-color: var(--border-soft);
    --bs-table-hover-bg: rgba(34, 225, 207, 0.06);
    --bs-table-hover-color: var(--text-main);
    --bs-table-striped-bg: rgba(16, 33, 42, 0.64);
    --bs-table-striped-color: var(--text-main);
    --bs-table-active-bg: var(--bg-elevated);
    --bs-table-active-color: var(--text-main);
    color: var(--text-main) !important;
    border-color: var(--border-soft) !important;
    margin-bottom: 0;
    background-color: transparent !important;
}

.table > :not(caption) > * > * {
    background-color: transparent !important;
    color: var(--text-main) !important;
    border-color: var(--border-soft) !important;
}

.table tbody,
.table thead,
.table tfoot,
.table tr {
    background-color: transparent !important;
}

.table th {
    color: var(--text-muted) !important;
    font-weight: 700;
    font-size: 0.76rem;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    border-color: var(--border-soft) !important;
    background: rgba(16, 33, 42, 0.82) !important;
    padding: 10px 14px;
    white-space: nowrap;
}

.table td {
    color: var(--text-main) !important;
    border-color: var(--border-soft) !important;
    background-color: transparent !important;
    padding: 9px 14px;
    vertical-align: middle;
    font-size: 0.9rem;
}

.table-responsive {
    border-radius: inherit;
    scrollbar-color: rgba(34, 225, 207, 0.36) rgba(16, 33, 42, 0.72);
}

.table-hover > tbody > tr:hover > * {
    background-color: rgba(34, 225, 207, 0.07) !important;
    color: var(--text-main) !important;
    --bs-table-bg-state: rgba(34, 225, 207, 0.07);
}

.table-light,
.table-light > th,
.table-light > td {
    --bs-table-bg: var(--bg-surface-2);
    background-color: var(--bg-surface-2) !important;
    color: var(--text-muted) !important;
}

.text-success { color: var(--success) !important; }
.text-danger { color: var(--danger) !important; }
.text-warning { color: var(--warning) !important; }
.text-info { color: var(--info) !important; }
.text-muted { color: var(--text-muted) !important; }

.bg-secondary {
    background: rgba(159, 183, 189, 0.14) !important;
    color: var(--text-soft) !important;
}

.bg-primary {
    background: var(--accent-primary-soft) !important;
    color: var(--accent-primary) !important;
    border-color: rgba(34, 225, 207, 0.25) !important;
}

.bg-info {
    background: var(--accent-blue-soft) !important;
    color: var(--accent-blue) !important;
    border-color: rgba(31, 155, 255, 0.25) !important;
}

.bg-warning {
    background: rgba(255, 155, 90, 0.16) !important;
    color: var(--warning) !important;
    border-color: rgba(255, 155, 90, 0.24) !important;
}

.bg-danger {
    background: rgba(255, 95, 109, 0.12) !important;
    color: var(--danger) !important;
    border-color: rgba(255, 95, 109, 0.25) !important;
}

.bg-light {
    background: rgba(159, 183, 189, 0.12) !important;
    color: var(--text-soft) !important;
    border-color: rgba(159, 183, 189, 0.18) !important;
}

.text-dark {
    color: var(--text-main) !important;
}

.btn {
    border-radius: var(--radius-sm);
    font-weight: 700;
    font-size: 0.85rem;
    padding: 7px 16px;
    border-width: 1px;
    transition: transform var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}

.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--accent-primary-soft), var(--glow-primary);
}

.btn-primary,
.btn-outline-primary:hover,
.btn-check:checked + .btn-outline-secondary,
.btn-check:checked + .btn-outline-primary {
    background: var(--button-gradient-primary) !important;
    border-color: rgba(34, 225, 207, 0.76) !important;
    color: var(--text-on-accent) !important;
    box-shadow: var(--glow-primary);
}

.btn-primary:hover,
.btn-primary:focus {
    background: linear-gradient(135deg, #4bf1df 0%, #22e1cf 48%, #00a89b 100%) !important;
    border-color: var(--accent-primary) !important;
    color: var(--text-on-accent) !important;
    box-shadow: 0 0 0 1px rgba(34, 225, 207, 0.26), 0 0 28px rgba(34, 225, 207, 0.25);
}

.btn-secondary,
.btn-outline-secondary {
    border-color: var(--border-strong) !important;
    color: var(--text-soft) !important;
    background: rgba(16, 33, 42, 0.74) !important;
}

.btn-secondary:hover,
.btn-outline-secondary:hover {
    background: rgba(34, 225, 207, 0.1) !important;
    border-color: rgba(34, 225, 207, 0.48) !important;
    color: var(--text-main) !important;
    box-shadow: var(--glow-primary);
}

.btn-outline-primary {
    border-color: rgba(34, 225, 207, 0.5) !important;
    color: var(--accent-primary) !important;
    background: rgba(34, 225, 207, 0.06) !important;
}

.btn-outline-danger {
    border-color: rgba(255, 95, 109, 0.58) !important;
    color: var(--danger) !important;
    background: rgba(255, 95, 109, 0.06) !important;
}

.btn-outline-danger:hover {
    background: rgba(255, 95, 109, 0.14) !important;
    border-color: var(--danger) !important;
    color: var(--danger) !important;
    box-shadow: 0 0 20px rgba(255, 95, 109, 0.16);
}

.btn-success {
    background: linear-gradient(135deg, var(--accent-mint), var(--accent-primary)) !important;
    border-color: var(--accent-mint) !important;
    color: var(--text-on-accent) !important;
    box-shadow: 0 0 22px rgba(72, 230, 178, 0.18);
}

.btn-danger {
    background: linear-gradient(135deg, #ff7b86, var(--danger)) !important;
    border-color: rgba(255, 95, 109, 0.72) !important;
    color: #21060a !important;
    box-shadow: 0 0 22px rgba(255, 95, 109, 0.18);
}

.btn-link {
    color: var(--accent-primary) !important;
    text-decoration: none;
}

.btn-link:hover {
    color: var(--accent-primary-strong) !important;
    text-shadow: 0 0 14px var(--accent-primary-glow);
}

.badge {
    border-radius: var(--radius-pill);
    font-size: 0.73rem;
    font-weight: 800;
    padding: 4px 10px;
    letter-spacing: 0.04em;
    border: 1px solid transparent;
}

.badge-niedrig {
    background: var(--accent-primary-soft);
    color: var(--accent-primary);
    border-color: rgba(34, 225, 207, 0.25);
}

.badge-mittel {
    background: var(--accent-secondary-soft);
    color: var(--accent-secondary-strong);
    border-color: rgba(255, 112, 72, 0.25);
}

.badge-hoch {
    background: rgba(255, 155, 90, 0.16);
    color: var(--warning);
    border-color: rgba(255, 155, 90, 0.24);
}

.badge-abgeschlossen {
    background: var(--accent-mint-soft);
    color: var(--success);
    border-color: rgba(72, 230, 178, 0.24);
}

.form-control,
.form-select {
    background-color: var(--bg-input) !important;
    border: 1px solid var(--border-strong) !important;
    color: var(--text-main) !important;
    border-radius: var(--radius-sm) !important;
    padding: 8px 12px;
    font-size: 0.9rem;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background-color var(--transition-fast);
}

.form-control:focus,
.form-select:focus {
    background-color: var(--bg-surface-2) !important;
    border-color: var(--accent-primary) !important;
    color: var(--text-main) !important;
    box-shadow: 0 0 0 3px var(--accent-primary-soft), 0 0 18px rgba(34, 225, 207, 0.12) !important;
    outline: none;
}

.form-control::placeholder { color: var(--text-faint) !important; }

.form-label {
    color: var(--text-soft);
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 5px;
}

.form-check-input {
    background-color: var(--bg-input);
    border-color: var(--border-strong);
    accent-color: var(--accent-primary);
}

.form-check-input:checked {
    background-color: var(--accent-primary);
    border-color: var(--accent-primary);
}

.modal-content {
    background: var(--surface-gradient);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-md);
    color: var(--text-main);
    box-shadow: var(--shadow-glow);
}

.modal-header {
    border-bottom: 1px solid var(--border-soft);
    background: rgba(16, 33, 42, 0.82);
}

.modal-title { color: var(--text-main); font-weight: 700; }

.modal-footer {
    border-top: 1px solid var(--border-soft);
    background: rgba(16, 33, 42, 0.72);
}

.btn-close { filter: invert(1) brightness(0.75); }
.modal-backdrop.show { opacity: 0.78; background: var(--bg-app-deep); }

.finance-card-footer {
    position: relative;
    z-index: 1;
    padding: 0 22px 18px;
    color: var(--text-muted);
}

.month-tabs-wrapper {
    padding: 14px 16px;
    border-bottom: 1px solid var(--border-soft);
    background: rgba(16, 33, 42, 0.28);
    overflow-x: auto;
}

.month-tabs {
    display: flex;
    gap: 8px;
    min-width: max-content;
}

.month-tab {
    min-height: 34px;
    padding: 6px 13px;
    border-radius: var(--radius-pill);
    border: 1px solid rgba(142, 226, 220, 0.1);
    background: rgba(255, 255, 255, 0.035);
    color: var(--text-muted);
    font-size: 0.76rem;
    font-weight: 850;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    transition: transform var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast), color var(--transition-fast);
}

.month-tab:hover {
    transform: translateY(-1px);
    border-color: rgba(34, 225, 207, 0.32);
    color: var(--text-soft);
}

.month-tab.active {
    border-color: rgba(34, 225, 207, 0.48);
    background: var(--accent-primary-soft);
    color: var(--accent-primary);
    box-shadow: 0 0 18px rgba(34, 225, 207, 0.12);
}

.month-detail {
    display: grid;
    gap: 18px;
}

.progress-ring-track { stroke: rgba(159, 183, 189, 0.13); }

.progress-ring-fill {
    stroke: var(--accent-primary);
    filter: drop-shadow(0 0 8px rgba(34, 225, 207, 0.34));
    transition: stroke-dashoffset 0.6s ease;
}

.status-niedrig .progress-ring-fill { stroke: var(--accent-primary); }
.status-mittel .progress-ring-fill { stroke: var(--accent-secondary); filter: drop-shadow(0 0 8px rgba(255, 112, 72, 0.3)); }
.status-hoch .progress-ring-fill { stroke: var(--warning); }
.status-abgeschlossen .progress-ring-fill { stroke: var(--success); }

.progress-ring-label {
    fill: var(--text-main);
    font-weight: 800;
    font-family: 'Segoe UI', sans-serif;
}

.progress-ring-untertext {
    color: var(--text-muted);
    font-size: 0.78rem;
    max-width: 160px;
    line-height: 1.35;
}

.kpi-card {
    position: relative;
    background: var(--surface-gradient-soft);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-md);
    padding: var(--space-lg);
    box-shadow: var(--shadow-soft);
    overflow: hidden;
}

.kpi-card::after {
    content: "";
    position: absolute;
    right: -30px;
    top: -40px;
    width: 120px;
    height: 120px;
    background: radial-gradient(circle, rgba(34, 225, 207, 0.14), transparent 70%);
    pointer-events: none;
}

.kpi-card__value {
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--text-main);
    letter-spacing: 0;
    line-height: 1.1;
}

.kpi-card__label {
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--text-muted);
    margin-top: 4px;
}

.db-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: var(--space-lg);
    margin-bottom: var(--space-xs);
}

.db-konto-switcher {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}

.db-konto-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.45rem 1.15rem;
    border-radius: 8px;
    border: 1.5px solid var(--border-soft);
    background: transparent;
    color: var(--text-muted);
    font-size: 0.88rem;
    font-weight: 500;
    cursor: pointer;
    transition: border-color 0.18s, color 0.18s, background 0.18s;
}

.db-konto-btn:hover {
    border-color: var(--accent-primary);
    color: var(--accent-primary);
}

.db-konto-btn--active {
    border-color: var(--accent-primary);
    color: var(--accent-primary);
    background: var(--accent-primary-soft);
    font-weight: 700;
}

.dashboard-shell {
    width: min(100%, 1400px);
    margin-left: 0;
    margin-right: auto;
}

.db-block { margin-bottom: 36px; }

.db-sonder-stats {
    display: flex;
    justify-content: space-around;
    border-top: 1px solid var(--border-soft);
    padding-top: var(--space-md);
    margin-bottom: var(--space-sm);
}

.db-sonder-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.db-sonder-stat__value {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-main);
    letter-spacing: 0;
}

.db-sonder-stat__label {
    font-size: 0.67rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    color: var(--text-faint);
}

.nav-tabs {
    border-bottom-color: var(--border-soft);
}

.nav-tabs .nav-link {
    color: var(--text-muted);
    border-color: transparent;
    background: transparent;
}

.nav-tabs .nav-link:hover {
    color: var(--text-main);
    border-color: var(--border-soft);
    background: rgba(34, 225, 207, 0.06);
}

.nav-tabs .nav-link.active {
    color: var(--accent-primary);
    background: var(--bg-surface-2);
    border-color: var(--border-strong) var(--border-strong) var(--bg-surface-2);
    box-shadow: inset 0 2px 0 var(--accent-primary);
}

::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--bg-app-deep); }
::-webkit-scrollbar-thumb { background: var(--bg-elevated); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: var(--accent-primary-strong); }

.text-accent { color: var(--accent-primary) !important; }
.text-orange { color: var(--accent-secondary) !important; }
.bg-surface { background: var(--bg-surface) !important; }
.border-soft { border-color: var(--border-soft) !important; }

/* Konten */
.konto-card { height: 100%; }
.konto-table td { font-size: 0.88rem; padding: 7px 0; border: none !important; }
.konto-row-gehalt td { padding: 10px 0; background: rgba(16, 33, 42, 0.72) !important; }
.konto-row-eigen td { padding: 10px 0; font-size: 0.95rem; }
.konto-del-btn { background: none; border: none; color: var(--text-faint); cursor: pointer; font-size: 0.75rem; padding: 0 4px; transition: color .18s ease, text-shadow .18s ease; }
.konto-del-btn:hover { color: var(--danger); text-shadow: 0 0 12px rgba(255, 95, 109, 0.36); }
.konto-actions { padding: var(--space-sm) var(--space-md); border-top: 1px solid var(--border-soft); }
.konto-neu-form { background: rgba(16, 33, 42, 0.72); border: 1px solid var(--border-soft); border-radius: var(--radius-sm); }
.konto-row-hover { cursor: pointer; transition: background .15s ease; }
.konto-row-hover:hover td { background: rgba(34, 225, 207, 0.07) !important; }
.konto-row-editing td { background: var(--bg-surface-3) !important; padding-top: 5px !important; padding-bottom: 5px !important; }
.konto-betrag-input { font-variant-numeric: tabular-nums; letter-spacing: 0.02em; }

.konto-modal-backdrop { position: fixed; inset: 0; background: rgba(3, 9, 13, .72); backdrop-filter: blur(6px); display: flex; align-items: center; justify-content: center; z-index: 1050; }
.konto-modal { background: var(--surface-gradient); border: 1px solid var(--border-strong); border-radius: var(--radius-md); padding: 0; min-width: 280px; box-shadow: var(--shadow-glow); }
.konto-modal-header { padding: 14px 20px; font-weight: 700; font-size: .95rem; color: var(--text-main); border-bottom: 1px solid var(--border-soft); background: rgba(16, 33, 42, 0.75); }
.konto-modal-body { display: flex; gap: 12px; padding: 20px; }
.konto-modal-btn { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 18px 12px; border-radius: var(--radius-sm); border: 2px solid transparent; background: rgba(16, 33, 42, 0.8); color: var(--text-soft); cursor: pointer; transition: all .18s ease; }
.konto-modal-btn--einnahme:hover { border-color: var(--success); background: var(--accent-mint-soft); box-shadow: 0 0 18px rgba(72, 230, 178, .16); }
.konto-modal-btn--ausgabe:hover { border-color: var(--danger); background: rgba(255, 95, 109, .1); box-shadow: 0 0 18px rgba(255, 95, 109, .15); }
.konto-modal-icon { font-size: 1.6rem; font-weight: 800; line-height: 1; }
.konto-modal-btn--einnahme .konto-modal-icon { color: var(--success); }
.konto-modal-btn--ausgabe .konto-modal-icon { color: var(--danger); }
.konto-modal-label { font-weight: 700; font-size: .9rem; color: var(--text-main); }
.konto-modal-preview { font-size: .8rem; font-weight: 600; }
.konto-fehler { font-size: .8rem; color: var(--danger); padding: 4px 6px; background: rgba(255, 95, 109, .1); border-radius: var(--radius-sm); border-left: 3px solid var(--danger); }
.konto-row-eigen td.text-success { color: var(--success) !important; }
.konto-row-eigen td.text-danger { color: var(--danger) !important; }
.konto-table td.text-success { color: var(--success) !important; }
.konto-table td.text-danger { color: var(--danger) !important; }
.konto-table td.text-warning { color: var(--warning) !important; }

.konto-drag-col { transition: opacity .2s ease, transform .2s ease; cursor: grab; }
.konto-drag-col:active { cursor: grabbing; }
.konto-dragging { opacity: .4; transform: scale(.97); }
.konto-drop-over > .finance-card { outline: 2px solid var(--accent-primary); outline-offset: 2px; box-shadow: var(--glow-primary), var(--shadow-card); }
.konto-umbuchung-icon { margin-right: 5px; color: var(--accent-primary); font-size: .85em; }
.konto-umbuchung-label { color: var(--text-muted) !important; font-style: italic; }

.konto-gruppe-header { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; padding-bottom: 8px; border-bottom: 1px solid var(--border-soft); }
.konto-gruppe-icon { font-size: 1.1rem; font-weight: 800; width: 28px; text-align: center; }
.konto-gruppe-titel { font-weight: 700; font-size: .95rem; color: var(--text-main); flex: 1; }
.konto-gruppe-summe { font-size: .9rem; font-weight: 700; }
.ktyp-einnahme { color: var(--success); }
.ktyp-budget { color: var(--accent-primary); }
.ktyp-darlehen { color: var(--danger); }
.ktyp-sonder { color: var(--accent-secondary); }
.konto-typ-icon { font-size: .9rem; font-weight: 800; }

.konto-modal--lg { min-width: 420px; max-width: 520px; width: 100%; }
.konto-typ-btn { display: flex; align-items: center; gap: 8px; padding: 10px 14px; background: rgba(16, 33, 42, 0.8); border: 2px solid var(--border-soft); border-radius: var(--radius-sm); color: var(--text-soft); font-size: .88rem; font-weight: 600; cursor: pointer; transition: all .18s ease; text-align: left; position: relative; }
.konto-typ-btn:hover { border-color: var(--border-strong); color: var(--text-main); background: var(--bg-surface-3); box-shadow: var(--glow-primary); }
.konto-typ-btn--active { border-color: currentColor; color: var(--text-main) !important; background: var(--bg-surface-3) !important; font-weight: 700 !important; }
.konto-typ-btn-icon { flex-shrink: 0; }
.konto-typ-info-wrap { position: relative; display: inline-flex; align-items: center; flex-shrink: 0; cursor: default; }
.konto-typ-info-icon { font-size: .8rem; color: var(--text-faint); line-height: 1; transition: color .15s ease; }
.konto-typ-info-wrap:hover .konto-typ-info-icon,
.konto-typ-info-wrap:focus .konto-typ-info-icon { color: var(--accent-primary); }
.konto-typ-tooltip { visibility: hidden; opacity: 0; position: absolute; bottom: calc(100% + 8px); right: 0; width: 220px; background: var(--bg-surface-3); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); padding: 8px 10px; font-size: .78rem; font-weight: 400; color: var(--text-soft); line-height: 1.45; box-shadow: var(--shadow-card); z-index: 1100; pointer-events: none; transition: opacity .15s ease; font-style: normal; text-align: left; white-space: normal; }
.konto-typ-tooltip::after { content: ''; position: absolute; top: 100%; right: 12px; border: 5px solid transparent; border-top-color: var(--border-strong); }
.konto-typ-info-wrap:hover .konto-typ-tooltip,
.konto-typ-info-wrap:focus .konto-typ-tooltip { visibility: visible; opacity: 1; }

.konto-typ-btn--active.ktyp-einnahme { border-color: var(--success) !important; box-shadow: 0 0 0 3px rgba(72, 230, 178, .16) !important; }
.konto-typ-btn--active.ktyp-budget { border-color: var(--accent-primary) !important; box-shadow: 0 0 0 3px rgba(34, 225, 207, .18) !important; }
.konto-typ-btn--active.ktyp-darlehen { border-color: var(--danger) !important; box-shadow: 0 0 0 3px rgba(255, 95, 109, .18) !important; }
.konto-typ-btn--active.ktyp-sonder { border-color: var(--accent-secondary) !important; box-shadow: 0 0 0 3px rgba(255, 112, 72, .18) !important; }

.konto-section { margin-bottom: 24px; padding: 18px; border: 1px solid rgba(142, 226, 220, 0.08); border-radius: 26px; background: rgba(16, 33, 42, 0.2); }
.konto-section + .konto-section { margin-top: 18px; }
.konto-section-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-md); }
.konto-section-label { display: flex; align-items: center; gap: 10px; }
.konto-section-badge { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 14px; font-size: 1rem; font-weight: 800; background: var(--bg-surface-2); }
.konto-section-badge.ktyp-einnahme { background: var(--accent-mint-soft); color: var(--success); }
.konto-section-badge.ktyp-budget { background: var(--accent-primary-soft); color: var(--accent-primary); }
.konto-section-badge.ktyp-darlehen { background: rgba(255, 95, 109, .12); color: var(--danger); }
.konto-section-badge.ktyp-sonder { background: var(--accent-secondary-soft); color: var(--accent-secondary); }
.konto-section-titel { font-size: 1rem; font-weight: 850; color: var(--text-main); }
.konto-section-anzahl { font-size: .72rem; color: var(--text-faint); font-weight: 800; padding: 3px 9px; background: var(--bg-surface-2); border-radius: var(--radius-pill); text-transform: uppercase; letter-spacing: 0.06em; }
.konto-section-summe { font-size: 1.02rem; font-weight: 850; font-variant-numeric: tabular-nums; }

.konto-typ-wrap { position: relative; }
.konto-typ-wrap .konto-typ-tooltip { visibility: hidden; opacity: 0; position: absolute; bottom: calc(100% + 8px); left: 0; right: 0; width: auto; min-width: 200px; background: var(--bg-surface-3); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); padding: 8px 10px; font-size: .8rem; font-weight: 400; color: var(--text-soft); line-height: 1.45; box-shadow: var(--shadow-card); z-index: 1200; pointer-events: none; transition: opacity .15s ease; white-space: normal; }
.konto-typ-wrap .konto-typ-tooltip::after { content: ''; position: absolute; top: 100%; left: 20px; border: 5px solid transparent; border-top-color: var(--border-strong); }
.konto-typ-wrap:hover .konto-typ-tooltip,
.konto-typ-wrap:focus-within .konto-typ-tooltip { visibility: visible; opacity: 1; }
.konto-typ-info-wrap,
.konto-typ-info-icon { display: none; }

/* =============================================================================
   Dashboard – KPI-Kacheln
   ============================================================================= */
.db-kpi-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-lg);
}
@media (max-width: 640px) { .db-kpi-grid { grid-template-columns: 1fr; } }

.db-kpi-tile {
    position: relative;
    background: var(--bg-surface-2);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-md);
    display: flex;
    flex-direction: row;
    align-items: stretch;
    overflow: hidden;
    min-height: 138px;
    box-shadow: var(--shadow-soft);
    transition: transform var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast);
}
.db-kpi-tile:hover {
    transform: translateY(-2px);
    border-color: rgba(34, 225, 207, 0.2);
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.42), 0 0 18px rgba(34, 225, 207, 0.08);
}
.db-kpi-tile__label {
    font-size: 0.66rem;
    font-weight: 650;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    color: var(--text-muted);
}
.db-kpi-tile__value {
    font-size: 1.46rem;
    font-weight: 820;
    letter-spacing: 0;
    font-variant-numeric: tabular-nums;
}
.db-kpi-tile__sub {
    font-size: 0.72rem;
    color: var(--text-muted);
    margin-top: 1px;
}

/* KPI Split Card – linke Inhaltsspalte */
.kpi-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: var(--space-lg);
    justify-content: center;
    min-width: 0;
}

/* KPI Split Card – rechter Chart-Block */
.kpi-chart-block {
    width: 36%;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 6px;
    padding: var(--space-xs) var(--space-sm);
    background: rgba(255, 255, 255, 0.03);
    border-left: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
}
.kpi-chart-block--positive {
    border-left-color: rgba(34, 225, 207, 0.14);
    box-shadow: inset 0 0 28px rgba(34, 225, 207, 0.045);
}
.kpi-chart-block--negative {
    border-left-color: rgba(255, 112, 72, 0.14);
    box-shadow: inset 0 0 28px rgba(255, 112, 72, 0.045);
}
.kpi-chart-title {
    font-size: 0.58rem;
    font-weight: 650;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-faint);
    opacity: 0.85;
}
.kpi-chart-trend {
    min-height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 2px 8px;
    border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, 0.035);
    border: 1px solid rgba(142, 226, 220, 0.1);
    font-size: 0.74rem;
    font-weight: 820;
    letter-spacing: -0.01em;
}
.kpi-chart-trend--up { color: var(--success); }
.kpi-chart-trend--down { color: var(--accent-secondary); }

/* =============================================================================
   Dashboard – Kompakte Konto-Kacheln
   ============================================================================= */
.db-account-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--space-lg);
    align-items: stretch;
}

.db-account-section {
    margin-top: 32px;
}

.db-section-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: var(--space-md);
    margin-bottom: var(--space-md);
    padding-bottom: var(--space-sm);
    border-bottom: 1px solid var(--border-soft);
}

.db-section-kicker {
    display: block;
    color: var(--text-muted);
    font-size: 0.7rem;
    font-weight: 760;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.db-section-heading h2 {
    margin: 2px 0 0;
    color: var(--text-main);
    font-size: 1.08rem;
    line-height: 1.2;
}

.db-section-link {
    color: var(--text-soft);
    font-size: 0.82rem;
    font-weight: 760;
    white-space: nowrap;
}
.db-section-link:hover {
    color: var(--accent-primary);
}

.db-acct-card {
    position: relative;
    min-height: 300px;
    background: linear-gradient(155deg, rgba(20, 38, 47, 0.96) 0%, rgba(13, 26, 32, 0.98) 54%, rgba(5, 13, 17, 0.98) 100%);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-md);
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    overflow: hidden;
    text-decoration: none;
    color: var(--text-main);
    box-shadow: var(--shadow-card);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast), background var(--transition-fast);
}
.db-acct-card::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(135deg, rgba(34, 225, 207, 0.08), transparent 42%, rgba(255, 112, 72, 0.04));
    opacity: 0.72;
}
.db-acct-card > * {
    position: relative;
    z-index: 1;
}
.db-acct-card:hover {
    border-color: rgba(34, 225, 207, 0.22);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.46), 0 0 18px rgba(34, 225, 207, 0.08);
    color: var(--text-main);
    text-shadow: none;
    transform: translateY(-2px);
}
.db-acct-card__header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--space-md);
}
.db-acct-card__title {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.db-acct-card__name {
    color: var(--text-main);
    font-size: 1.08rem;
    font-weight: 800;
    line-height: 1.18;
}
.db-acct-card__type {
    color: var(--text-muted);
    font-size: 0.78rem;
    font-weight: 700;
}
.db-section-pill {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    border-radius: var(--radius-pill);
    background: rgba(34, 225, 207, 0.08);
    border: 1px solid rgba(34, 225, 207, 0.15);
    color: var(--text-soft);
    font-size: 0.68rem;
    font-weight: 760;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.db-acct-card__badge {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 5px 12px;
    border-radius: var(--radius-pill);
    background: rgba(34, 225, 207, 0.1);
    border: 1px solid rgba(34, 225, 207, 0.16);
    color: var(--text-soft);
    font-size: 0.68rem;
    font-weight: 760;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.db-acct-card__main {
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.db-acct-card__main-label {
    color: var(--text-muted);
    font-size: 0.72rem;
    font-weight: 720;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.db-acct-card__balance {
    font-size: 1.7rem;
    font-weight: 850;
    letter-spacing: 0;
    line-height: 1.08;
    font-variant-numeric: tabular-nums;
}
.db-acct-card__stats {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-xs);
    border-top: 1px solid var(--border-soft);
    padding-top: var(--space-md);
}
.db-acct-card__stat {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 10px 12px;
    border: 1px solid rgba(142, 226, 220, 0.08);
    border-radius: var(--radius-sm);
    background: rgba(16, 33, 42, 0.55);
}
.db-acct-card__stat-label {
    font-size: 0.66rem;
    font-weight: 680;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
}
.db-acct-card__stat-value {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 0.92rem;
    font-weight: 800;
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
}
.db-acct-card__stat-icon {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    display: inline-grid;
    place-items: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
    font-size: 0.76rem;
    line-height: 1;
}
.db-acct-card__progress {
    margin-top: auto;
}
.db-acct-card__link {
    color: var(--accent-primary);
    font-size: 0.82rem;
    font-weight: 800;
    white-space: nowrap;
}
.db-acct-card__footer {
    display: flex;
    flex-direction: column;
    gap: 9px;
    padding-top: var(--space-sm);
    border-top: 1px solid var(--border-soft);
}
.db-acct-card__meta,
.db-acct-card__footer-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
}
.db-acct-card__meta {
    color: var(--text-faint);
    font-size: 0.75rem;
    font-weight: 700;
}
.db-acct-card__status {
    color: var(--text-soft);
    font-size: 0.86rem;
    font-weight: 760;
}
.db-acct-card .mini-progress {
    gap: 8px;
}
.db-acct-card .mini-progress__meta {
    color: var(--text-muted);
    font-size: 0.72rem;
}
.db-acct-card .mini-progress__track {
    height: 12px;
    background: rgba(159, 183, 189, 0.16);
    border: 1px solid rgba(142, 226, 220, 0.08);
}
.db-acct-card .mini-progress__fill--success {
    box-shadow: 0 0 16px rgba(34, 225, 207, 0.28);
}
.db-acct-card .mini-progress__fill--warning,
.db-acct-card .mini-progress__fill--danger {
    box-shadow: 0 0 16px rgba(255, 112, 72, 0.24);
}

.mini-sparkline {
    position: absolute;
    right: 14px;
    bottom: 13px;
    width: 118px;
    height: 38px;
    opacity: 0.72;
    pointer-events: none;
}
/* Sparkline im Split-Chart-Block: aus absolutem Flow herauslösen */
.kpi-chart-block .mini-sparkline {
    position: static;
    width: 100%;
    height: 56px;
    opacity: 0.92;
}
.mini-sparkline__area {
    opacity: 0.18;
}
.mini-sparkline__line {
    fill: none;
    stroke-width: 2.7;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
}
.mini-sparkline__dot {
    stroke: var(--bg-surface-2);
    stroke-width: 1.6;
    vector-effect: non-scaling-stroke;
}
.mini-sparkline--positive .mini-sparkline__line {
    stroke: var(--accent-primary);
    filter: drop-shadow(0 0 7px rgba(34, 225, 207, 0.32));
}
.mini-sparkline--positive .mini-sparkline__area {
    fill: var(--accent-primary);
}
.mini-sparkline--positive .mini-sparkline__dot {
    fill: var(--accent-primary);
}
.mini-sparkline--negative .mini-sparkline__line {
    stroke: var(--accent-secondary);
    filter: drop-shadow(0 0 7px rgba(255, 112, 72, 0.3));
}
.mini-sparkline--negative .mini-sparkline__area {
    fill: var(--accent-secondary);
}
.mini-sparkline--negative .mini-sparkline__dot {
    fill: var(--accent-secondary);
}

.dashboard-chart-card {
    background: linear-gradient(155deg, rgba(16, 33, 42, 0.96) 0%, rgba(10, 23, 28, 0.98) 100%);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-card);
    overflow: hidden;
    max-width: 1120px;
    margin-left: 0;
    margin-right: auto;
}
.dashboard-chart-card__header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--space-md);
    padding: var(--space-lg) var(--space-xl) 0;
}
.dashboard-chart-card__title {
    display: block;
    color: var(--text-main);
    font-size: 0.98rem;
    font-weight: 850;
}
.dashboard-chart-card__legend {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-md);
    margin-top: 6px;
    color: var(--text-soft);
    font-size: 0.78rem;
    font-weight: 720;
}
.dashboard-chart-card__legend span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}
.legend-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    display: inline-block;
}
.legend-dot--income {
    background: var(--success);
    box-shadow: 0 0 8px rgba(72, 230, 178, 0.38);
}
.legend-dot--expense {
    background: var(--accent-secondary);
    box-shadow: 0 0 8px rgba(255, 112, 72, 0.32);
}
.dashboard-chart-card__meta {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 10px;
    color: var(--text-soft);
    font-size: 0.78rem;
    font-weight: 760;
}
.dashboard-chart-card__meta span {
    min-height: 30px;
    display: inline-flex;
    align-items: center;
    padding: 4px 11px;
    border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--border-soft);
}
.dashboard-chart-card__body {
    height: 255px;
    padding: var(--space-md) var(--space-lg) var(--space-lg);
}
.dashboard-chart-card canvas {
    width: 100% !important;
    height: 100% !important;
}

.mini-progress {
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.mini-progress__meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-faint);
}
.mini-progress__track {
    height: 5px;
    background: rgba(159, 183, 189, 0.12);
    border-radius: var(--radius-pill);
    overflow: hidden;
}
.mini-progress__fill {
    display: block;
    height: 100%;
    border-radius: inherit;
    transition: width var(--transition-normal);
}
.mini-progress__fill--success {
    background: linear-gradient(90deg, var(--accent-mint), var(--accent-primary));
    box-shadow: 0 0 10px rgba(34, 225, 207, 0.18);
}
.mini-progress__fill--warning,
.mini-progress__fill--danger {
    background: linear-gradient(90deg, var(--accent-secondary), var(--danger));
    box-shadow: 0 0 10px rgba(255, 112, 72, 0.16);
}
.mini-progress__fill--neutral {
    background: var(--border-strong);
}

.db-sonder-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: var(--space-sm);
}

.special-financing-card {
    box-shadow: var(--shadow-soft);
}
.special-financing-card__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
}
.special-financing-card__type {
    margin-top: 2px;
    color: var(--text-faint);
    font-size: 0.72rem;
    font-weight: 500;
    line-height: 1.35;
}
.special-financing-card__body {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: var(--space-sm) var(--space-md);
}
.special-financing-card__amount {
    color: var(--text-muted);
    font-size: 0.78rem;
    font-variant-numeric: tabular-nums;
}
.special-financing-card__footer {
    display: grid;
    gap: 5px;
    padding: 0 var(--space-md) var(--space-sm);
    color: var(--text-muted);
    font-size: 0.76rem;
}
.special-financing-card__footer div {
    display: flex;
    justify-content: space-between;
    gap: var(--space-sm);
    border-top: 1px solid var(--border-soft);
    padding-top: 5px;
}
.special-financing-card__footer strong {
    color: var(--text-soft);
    font-weight: 700;
    text-align: right;
}

.half-gauge {
    width: 132px;
    max-width: 100%;
}
.half-gauge__svg {
    display: block;
    width: 100%;
    height: auto;
}
.half-gauge__track,
.half-gauge__fill {
    fill: none;
    stroke-linecap: round;
    stroke-width: 8;
}
.half-gauge__track {
    stroke: rgba(159, 183, 189, 0.14);
}
.half-gauge__fill {
    stroke-dashoffset: 0;
    transition: stroke-dasharray var(--transition-normal);
}
.half-gauge__fill--success {
    stroke: var(--accent-primary);
    filter: drop-shadow(0 0 8px rgba(34, 225, 207, 0.24));
}
.half-gauge__fill--warning {
    stroke: var(--accent-secondary);
    filter: drop-shadow(0 0 8px rgba(255, 112, 72, 0.22));
}
.half-gauge__fill--danger {
    stroke: var(--danger);
}
.half-gauge__value {
    fill: var(--text-main);
    font-family: 'Segoe UI', system-ui, sans-serif;
    font-size: 1rem;
    font-weight: 800;
}

@media (max-width: 980px) {
    .db-account-grid {
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    }
}

@media (max-width: 768px) {
    .dashboard-chart-card__header {
        flex-direction: column;
        align-items: stretch;
    }
    .dashboard-chart-card__meta {
        justify-content: flex-start;
    }
    .dashboard-chart-card__body { height: 210px; }
    .mini-sparkline {
        width: 104px;
        opacity: 0.56;
    }
    .db-account-grid {
        grid-template-columns: 1fr;
        gap: var(--space-md);
    }
    .db-section-heading {
        align-items: flex-start;
        flex-direction: column;
    }
    .db-acct-card {
        min-height: auto;
        padding: var(--space-lg);
    }
    .db-acct-card__stats {
        grid-template-columns: 1fr;
    }
    .db-acct-card__footer-row {
        align-items: flex-start;
        flex-direction: column;
        gap: var(--space-xs);
    }
    .special-financing-card__footer div {
        flex-direction: column;
        gap: 1px;
    }
    .special-financing-card__footer strong {
        text-align: left;
    }
}

/* =============================================================================
   Dashboard – Cockpit-Verbesserungen
   ============================================================================= */

/* KPI – Gesamtsaldo hervorgehoben */
.db-kpi-tile--primary {
    background: linear-gradient(155deg, rgba(34, 225, 207, 0.10) 0%, var(--bg-surface-2) 55%);
    border-color: rgba(34, 225, 207, 0.22);
    box-shadow: 0 0 0 1px rgba(34, 225, 207, 0.08), 0 10px 28px rgba(0,0,0,0.3);
}
.db-kpi-tile--primary .db-kpi-tile__value {
    font-size: 1.72rem;
}

/* KPI – Icon links */
.db-kpi-tile__icon {
    font-size: 0.95rem;
    line-height: 1;
    opacity: 0.58;
    user-select: none;
    margin-bottom: 2px;
}

/* =============================================================================
   Dashboard - Hero
   ============================================================================= */
.dashboard-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr);
    gap: var(--space-lg);
    align-items: stretch;
    grid-auto-rows: minmax(360px, auto);
}

.hero-main,
.hero-side,
.hero-side-stack {
    position: relative;
}

.hero-main,
.hero-side {
    overflow: hidden;
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-card);
}

.hero-main::before,
.hero-side::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(135deg, rgba(34, 225, 207, 0.08), transparent 42%, rgba(255, 112, 72, 0.035));
}

.hero-main > *,
.hero-side > * {
    position: relative;
    z-index: 1;
}

.hero-main {
    min-height: 360px;
    height: 100%;
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    gap: var(--space-xl);
    padding: 34px;
    background: linear-gradient(145deg, rgba(34, 225, 207, 0.11) 0%, rgba(16, 33, 42, 0.98) 48%, rgba(5, 13, 17, 0.98) 100%);
    border-color: rgba(34, 225, 207, 0.18);
}

.hero-side-stack {
    display: grid;
    grid-template-rows: repeat(2, minmax(0, 1fr));
    gap: var(--space-lg);
    min-height: 360px;
}

.hero-main__content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 7px;
    min-width: 0;
}

.hero-main__label,
.hero-main__metric-label {
    color: var(--text-muted);
    font-size: 0.74rem;
    font-weight: 720;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.hero-main__value {
    font-size: 2.92rem;
    font-weight: 880;
    line-height: 1.02;
    letter-spacing: 0;
    font-variant-numeric: tabular-nums;
}

.hero-main__sub {
    color: var(--text-soft);
    font-size: 0.94rem;
    font-weight: 650;
}

.hero-status-badge {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 4px 12px;
    border-radius: var(--radius-pill);
    font-size: 0.7rem;
    font-weight: 760;
    letter-spacing: 0.05em;
}

.hero-status-badge.badge-ok {
    background: rgba(72, 230, 178, 0.12);
    border: 1px solid rgba(72, 230, 178, 0.18);
    color: var(--success);
}

.hero-status-badge.badge-warn {
    background: rgba(255, 155, 90, 0.12);
    border: 1px solid rgba(255, 155, 90, 0.18);
    color: var(--warning);
}

.hero-status-badge.badge-danger {
    background: rgba(255, 95, 109, 0.12);
    border: 1px solid rgba(255, 95, 109, 0.18);
    color: var(--danger);
}

.hero-progress-fill.badge-ok {
    background: linear-gradient(90deg, var(--success), var(--accent-primary));
}

.hero-progress-fill.badge-warn {
    background: linear-gradient(90deg, var(--warning), var(--accent-secondary-strong));
}

.hero-progress-fill.badge-danger {
    background: linear-gradient(90deg, var(--danger), var(--accent-secondary));
    color: var(--text-main);
}

.hero-main__metric {
    flex: 0 0 205px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-end;
    gap: 8px;
}

.hero-main__metric-value {
    font-size: 1.9rem;
    font-weight: 850;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.hero-progress-track {
    width: 100%;
    height: 14px;
    border-radius: var(--radius-pill);
    background: rgba(159, 183, 189, 0.14);
    border: 1px solid rgba(142, 226, 220, 0.08);
    overflow: hidden;
}

.hero-progress-fill {
    height: 100%;
    border-radius: inherit;
    transition: width var(--transition-normal);
}

.hero-side {
    min-height: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 10px;
    padding: var(--space-lg);
    background: var(--surface-gradient-soft);
    transition: transform var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.hero-side:hover {
    transform: translateY(-2px);
    border-color: rgba(34, 225, 207, 0.18);
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.42), 0 0 16px rgba(34, 225, 207, 0.07);
}

.hero-side__title {
    color: var(--text-soft);
    font-size: 0.78rem;
    font-weight: 760;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.hero-side__value {
    font-size: 1.55rem;
    font-weight: 850;
    line-height: 1.05;
    font-variant-numeric: tabular-nums;
}

.hero-side p {
    margin: 0;
    color: var(--text-soft);
    font-size: 0.84rem;
    line-height: 1.45;
}
.hero-side__meta {
    display: inline-flex;
    align-self: flex-start;
    margin-top: auto;
    min-height: 26px;
    align-items: center;
    padding: 3px 9px;
    border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, 0.035);
    border: 1px solid var(--border-soft);
    color: var(--text-muted);
    font-size: 0.72rem;
    font-weight: 720;
}

@media (max-width: 1100px) {
    .dashboard-hero-grid {
        grid-template-columns: 1fr;
        grid-auto-rows: auto;
    }

    .hero-main,
    .hero-side,
    .hero-side-stack {
        min-height: auto;
    }

    .hero-side-stack {
        grid-template-rows: none;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .hero-main {
        flex-direction: column;
        padding: var(--space-lg);
        gap: var(--space-lg);
    }

    .hero-main__value {
        font-size: 2.35rem;
    }

    .hero-main__metric {
        align-items: flex-start;
        flex-basis: auto;
        width: 100%;
    }

    .hero-side-stack {
        grid-template-columns: 1fr;
    }
}

/* Sonderfinanzierungen – minimaler Empty-State */
.db-sonder-empty {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-xs) var(--space-sm);
    gap: var(--space-md);
    flex-wrap: wrap;
}
.db-sonder-empty__text {
    font-size: 0.85rem;
    color: var(--text-faint);
}

/* Sonderfinanzierungen – kompakter Wrapper ohne große Card */
.db-sonder-compact {
    background: var(--bg-surface-2);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-md);
    padding: var(--space-sm) var(--space-lg);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    flex-wrap: wrap;
}
.db-sonder-compact__label {
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    color: var(--text-muted);
}
.db-sonder-compact__text {
    font-size: 0.85rem;
    color: var(--text-faint);
    flex: 1;
}

/* =============================================================================
   Abos
   ============================================================================= */
.subscriptions-page {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
}

.subscription-summary-grid {
    gap: 18px;
}

.subscription-summary-card {
    min-height: 132px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 10px;
}

.subscription-summary-card__label {
    color: var(--text-faint);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.subscription-summary-card strong {
    color: var(--text-main);
    font-size: 1.6rem;
    font-weight: 850;
    line-height: 1.08;
    font-variant-numeric: tabular-nums;
}

.subscription-summary-card span:last-child {
    color: var(--text-muted);
    font-size: 0.82rem;
    font-weight: 700;
}

.subscription-toolbar {
    margin-bottom: 0;
}

.subscription-toolbar span {
    color: var(--text-muted);
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.subscription-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(360px, 1fr));
    gap: var(--space-lg);
}

.subscription-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    padding: 22px;
    border: 1px solid rgba(142, 226, 220, 0.13);
    border-radius: 26px;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.035), transparent 34%),
        linear-gradient(155deg, rgba(20, 38, 47, 0.96) 0%, rgba(12, 25, 31, 0.98) 58%, rgba(5, 13, 17, 0.99) 100%);
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.035);
    overflow: hidden;
    transition: transform var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.subscription-card::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(135deg, rgba(34, 225, 207, 0.07), transparent 46%, rgba(255, 112, 72, 0.04));
}

.subscription-card > * {
    position: relative;
    z-index: 1;
}

.subscription-card:hover {
    transform: translateY(-1px);
    border-color: rgba(34, 225, 207, 0.19);
    box-shadow: 0 19px 44px rgba(0, 0, 0, 0.38), 0 0 12px rgba(34, 225, 207, 0.04);
}

.subscription-card__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-md);
}

.subscription-card__header h2 {
    margin: 0;
    color: var(--text-main);
    font-size: 1.12rem;
    line-height: 1.2;
}

.subscription-card__header span {
    display: inline-block;
    margin-top: 3px;
    color: var(--text-muted);
    font-size: 0.82rem;
    font-weight: 700;
}

.subscription-status {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 5px 12px;
    border-radius: var(--radius-pill);
    border: 1px solid var(--border-soft);
    color: var(--text-soft);
    font-size: 0.68rem;
    font-weight: 900;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.subscription-status--active {
    background: var(--accent-primary-soft);
    border-color: rgba(34, 225, 207, 0.24);
    color: var(--accent-primary);
}

.subscription-status--paused {
    background: rgba(255, 155, 90, 0.14);
    border-color: rgba(255, 155, 90, 0.24);
    color: var(--warning);
}

.subscription-status--cancelled {
    background: rgba(255, 95, 109, 0.12);
    border-color: rgba(255, 95, 109, 0.22);
    color: var(--danger);
}

.subscription-card__amounts {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-sm);
    padding-top: var(--space-md);
    border-top: 1px solid var(--border-soft);
}

.subscription-card__amounts div {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 10px 12px;
    border: 1px solid rgba(142, 226, 220, 0.08);
    border-radius: var(--radius-sm);
    background: rgba(16, 33, 42, 0.55);
}

.subscription-card__amounts span {
    color: var(--text-faint);
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.subscription-card__amounts strong {
    color: var(--text-main);
    font-size: 1rem;
    font-weight: 850;
    line-height: 1.18;
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
}

.subscription-card__amounts small {
    color: var(--text-muted);
    font-size: 0.74rem;
}

.subscription-card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
}

.subscription-card__meta span {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 4px 10px;
    border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--border-soft);
    color: var(--text-soft);
    font-size: 0.76rem;
    font-weight: 800;
}

.subscription-card__note {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.86rem;
}

.subscription-card__actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-sm);
    margin-top: auto;
}

.subscription-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-md);
}

.subscription-form-grid__wide {
    grid-column: 1 / -1;
}

@media (max-width: 1100px) {
    .subscription-summary-grid,
    .subscription-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 768px) {
    .subscription-summary-grid,
    .subscription-list,
    .subscription-card__amounts,
    .subscription-form-grid {
        grid-template-columns: 1fr;
    }

    .subscription-card__actions {
        justify-content: stretch;
    }

    .subscription-card__actions .btn {
        flex: 1;
    }
}

/* =============================================================================
   Reconnect Modal – globaler Fallback (verhindert weißen Browser-Default)
   ============================================================================= */
#components-reconnect-modal {
    background: #0d1a20 !important;
    background-image: linear-gradient(155deg, #19333c 0%, #0d1a20 46%, #050d11 100%) !important;
    color: var(--text-main, #f3fbff) !important;
    border: 1px solid rgba(142, 226, 220, 0.22) !important;
    border-radius: var(--radius-md, 16px) !important;
    box-shadow: 0 22px 56px rgba(0,0,0,0.6), 0 0 36px rgba(34,225,207,0.1) !important;
}
#components-reconnect-modal p {
    color: var(--text-soft, #9fb7bd) !important;
    text-align: center;
}
#components-reconnect-modal::backdrop {
    background-color: rgba(3, 9, 13, 0.78);
    backdrop-filter: blur(4px);
}

/* =============================================================================
   Hilfe und Info
   ============================================================================= */
.info-page,
.help-content {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
}

.info-hero,
.info-panel {
    position: relative;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.035), transparent 34%),
        linear-gradient(155deg, rgba(20, 38, 47, 0.96) 0%, rgba(12, 25, 31, 0.98) 58%, rgba(5, 13, 17, 0.99) 100%);
    border: 1px solid rgba(142, 226, 220, 0.13);
    border-radius: 26px;
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.035);
    overflow: hidden;
}

.info-hero::before,
.info-panel::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(135deg, rgba(34, 225, 207, 0.06), transparent 42%, rgba(255, 112, 72, 0.04));
}

.info-hero > *,
.info-panel > * {
    position: relative;
    z-index: 1;
}

.info-hero {
    min-height: 330px;
    padding: 54px var(--space-xl);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.info-logo {
    position: relative;
    width: 82px;
    height: 82px;
    margin-bottom: var(--space-md);
    display: grid;
    place-items: center;
}

.info-logo__cube {
    width: 70px;
    height: 70px;
    display: grid;
    place-items: center;
    border: 3px solid var(--text-main);
    border-radius: 18px;
    color: var(--text-main);
    font-weight: 900;
    font-size: 1.2rem;
    box-shadow: 0 0 26px rgba(243, 251, 255, 0.08);
    transform: rotate(-12deg);
}

.info-logo__pulse {
    position: absolute;
    right: 2px;
    bottom: 12px;
    width: 38px;
    height: 4px;
    background: var(--accent-secondary);
    border-radius: var(--radius-pill);
    box-shadow: 0 0 14px rgba(255, 112, 72, 0.38);
    transform: rotate(-62deg);
}

.info-logo__pulse::before,
.info-logo__pulse::after {
    content: "";
    position: absolute;
    top: 50%;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent-secondary);
    transform: translateY(-50%);
}

.info-logo__pulse::before { left: -2px; }
.info-logo__pulse::after { right: -2px; }

.info-hero h1 {
    margin: 0;
    font-size: 2.6rem;
    line-height: 1.05;
    letter-spacing: 0;
}

.info-product {
    margin-top: 6px;
    color: var(--accent-secondary);
    font-size: 0.9rem;
    font-weight: 900;
    letter-spacing: 0.24em;
    text-transform: uppercase;
}

.info-hero p {
    max-width: 720px;
    margin: var(--space-md) auto var(--space-md) 0;
    color: var(--text-soft);
}

.info-version {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 13px;
    border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border-soft);
    color: var(--text-soft);
    font-size: 0.76rem;
    font-weight: 800;
}

.info-two-col {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-lg);
}

.info-panel__header {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-md) var(--space-lg);
    border-bottom: 1px solid var(--border-soft);
    background: rgba(16, 33, 42, 0.42);
}

.info-panel__header i {
    color: var(--text-soft);
    font-size: 1rem;
}

.info-panel__header h2 {
    margin: 0;
    font-size: 1rem;
    line-height: 1.3;
}

.info-panel__body {
    padding: var(--space-lg);
}

.info-kicker,
.info-feature-grid h3,
.help-grid h3 {
    display: block;
    margin-bottom: 8px;
    color: var(--accent-secondary);
    font-size: 0.78rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.info-check-list {
    display: grid;
    gap: 9px;
    padding: 0;
    margin: var(--space-md) 0 0;
    list-style: none;
}

.info-check-list li {
    display: flex;
    gap: 10px;
    color: var(--text-soft);
}

.info-check-list i {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    display: inline-grid;
    place-items: center;
    border-radius: 50%;
    background: var(--accent-secondary);
    color: var(--text-main);
    font-size: 0.72rem;
}

.info-note {
    margin-top: var(--space-lg);
    padding: var(--space-md);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-soft);
    background: rgba(255, 255, 255, 0.03);
}

.info-note strong {
    display: block;
    margin-bottom: 6px;
    color: var(--accent-secondary);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.info-note span {
    color: var(--text-soft);
    font-size: 0.88rem;
}

.info-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: var(--space-md);
}

.info-tags span {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 6px 14px;
    border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border-soft);
    color: var(--text-soft);
    font-size: 0.8rem;
    font-weight: 800;
}

.info-tags span:nth-child(5),
.info-tags span:nth-child(6) {
    color: var(--accent-secondary-strong);
    background: var(--accent-secondary-soft);
    border-color: rgba(255, 112, 72, 0.24);
}

.info-feature-grid,
.help-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-xl);
    padding: var(--space-lg);
}

.info-feature-grid article,
.help-grid article {
    min-width: 0;
    padding: 16px;
    border: 1px solid rgba(142, 226, 220, 0.08);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.028);
}

.info-feature-grid p,
.help-grid p {
    margin: 0;
    color: var(--text-soft);
}

.license-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 46px;
    padding: 4px 10px;
    border-radius: 6px;
    background: rgba(72, 230, 178, 0.16);
    color: var(--success);
    font-size: 0.76rem;
    font-weight: 900;
}

.help-layout {
    display: grid;
    grid-template-columns: 230px minmax(0, 1fr);
    gap: var(--space-lg);
    align-items: start;
}

.help-toc {
    position: sticky;
    top: var(--space-lg);
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: var(--space-sm);
    border: 1px solid var(--border-soft);
    border-radius: 22px;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.035), transparent 34%),
        linear-gradient(155deg, rgba(20, 38, 47, 0.96) 0%, rgba(12, 25, 31, 0.98) 58%, rgba(5, 13, 17, 0.99) 100%);
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.34);
}

.help-toc a {
    padding: 8px 10px;
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    font-size: 0.82rem;
    font-weight: 700;
}

.help-toc a:hover {
    background: rgba(34, 225, 207, 0.08);
    color: var(--text-main);
    text-shadow: none;
}

.help-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 280px;
    gap: var(--space-lg);
    padding: var(--space-lg);
}

.help-hero h2 {
    margin: 0 0 var(--space-sm);
    font-size: 1.35rem;
}

.help-hero p {
    margin: 0;
}

.help-steps {
    display: grid;
    gap: 8px;
}

.help-steps div {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-sm);
    background: rgba(255, 255, 255, 0.03);
}

.help-steps strong {
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    display: inline-grid;
    place-items: center;
    border-radius: 50%;
    background: var(--accent-primary-soft);
    color: var(--accent-primary);
    font-size: 0.82rem;
}

.help-steps span {
    color: var(--text-soft);
    font-weight: 700;
    font-size: 0.86rem;
}

@media (max-width: 1100px) {
    .info-two-col,
    .help-layout,
    .help-hero {
        grid-template-columns: 1fr;
    }

    .help-toc {
        position: static;
        flex-direction: row;
        overflow-x: auto;
        scrollbar-width: none;
    }

    .help-toc::-webkit-scrollbar {
        display: none;
    }

    .help-toc a {
        flex: 0 0 auto;
        white-space: nowrap;
    }
}

@media (max-width: 900px) {
    .info-feature-grid,
    .help-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .info-hero {
        min-height: auto;
        padding: var(--space-xl) var(--space-md);
    }

    .info-hero h1 {
        font-size: 2rem;
    }

    .info-product {
        letter-spacing: 0.14em;
    }

    .info-feature-grid,
    .help-grid {
        grid-template-columns: 1fr;
        gap: var(--space-lg);
        padding: var(--space-md);
    }

    .info-panel__header,
    .info-panel__body,
    .help-hero {
        padding: var(--space-md);
    }
}

/* =============================================================================
   Dashboard - App-Style Grid
   ============================================================================= */
.dashboard-shell {
    width: min(100%, 1900px);
}

.finance-dashboard-grid {
    display: grid;
    grid-template-rows: 118px 310px 280px;
    gap: 18px;
    align-items: stretch;
}

.finance-dashboard-row {
    display: grid;
    gap: 18px;
    min-width: 0;
    align-items: stretch;
}

.finance-dashboard-row--kpi {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.finance-dashboard-row--status {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.finance-dashboard-row--analysis {
    grid-template-columns: minmax(0, 2fr) repeat(2, minmax(0, 1fr));
}

.finance-dashboard-row > .db-kpi-tile,
.finance-dashboard-row > .card-month-status,
.finance-dashboard-row > .dashboard-visual-card,
.finance-dashboard-row > .card-chart,
.finance-dashboard-row > .dashboard-mini-card,
.finance-dashboard-grid .db-acct-card {
    position: relative;
    min-width: 0;
    border-radius: 26px;
    border: 1px solid rgba(142, 226, 220, 0.13);
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.035), transparent 34%),
        linear-gradient(155deg, rgba(20, 38, 47, 0.96) 0%, rgba(12, 25, 31, 0.98) 58%, rgba(5, 13, 17, 0.99) 100%);
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.035);
    overflow: hidden;
    transition: transform var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.finance-dashboard-row > .db-kpi-tile:hover,
.finance-dashboard-row > .card-month-status:hover,
.finance-dashboard-row > .dashboard-visual-card:hover,
.finance-dashboard-row > .card-chart:hover,
.finance-dashboard-row > .dashboard-mini-card:hover,
.finance-dashboard-grid .db-acct-card:hover {
    transform: translateY(-1px);
    border-color: rgba(34, 225, 207, 0.19);
    box-shadow: 0 19px 44px rgba(0, 0, 0, 0.38), 0 0 12px rgba(34, 225, 207, 0.04);
}

.finance-dashboard-row > .card-month-status {
    border-color: rgba(142, 226, 220, 0.24);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.48), 0 0 26px rgba(34, 225, 207, 0.09), inset 0 1px 0 rgba(255, 255, 255, 0.045);
}

.finance-dashboard-row > .card-chart {
    border-color: rgba(142, 226, 220, 0.17);
    box-shadow: 0 22px 54px rgba(0, 0, 0, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.035);
}

.finance-dashboard-row > .dashboard-mini-card,
.finance-dashboard-grid .card-account .db-acct-card {
    border-color: rgba(142, 226, 220, 0.1);
}

.finance-dashboard-row > .card-account {
    min-width: 0;
}

.finance-dashboard-row--status > .card-month-status {
    grid-column: span 2;
}

.finance-dashboard-row--status > .card-cost-structure {
    grid-column: span 2;
}

.finance-dashboard-row--status > .card-special-finance {
    grid-column: span 1;
}

/* Reihe 1: KPI */

/* Reihe 2: Status & Überblick */

/* Reihe 3: Analyse & Konten */

.finance-dashboard-row > .db-kpi-tile {
    height: 100%;
    min-height: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    padding: 14px 18px;
}

.finance-dashboard-row > .db-kpi-tile--primary {
    background:
        linear-gradient(145deg, rgba(34, 225, 207, 0.16), transparent 42%),
        linear-gradient(155deg, rgba(20, 46, 52, 0.98) 0%, rgba(11, 25, 31, 0.99) 62%, rgba(5, 13, 17, 0.99) 100%);
}

.kpi-card-top,
.kpi-card-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-width: 0;
}

.kpi-card-top {
    align-items: flex-start;
    flex-wrap: nowrap;
    overflow: hidden;
}

.finance-dashboard-grid .db-kpi-tile__label {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text-soft);
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    line-height: 1.18;
    text-align: right;
    text-transform: uppercase;
    overflow-wrap: anywhere;
}

.finance-dashboard-grid .db-kpi-tile__icon {
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    display: inline-grid;
    place-items: center;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.055);
    border: 1px solid rgba(255, 255, 255, 0.055);
    opacity: 1;
}

.finance-dashboard-grid .db-kpi-tile__value {
    display: block;
    max-width: 82%;
    font-size: clamp(1.28rem, 1.16vw, 1.66rem);
    font-weight: 880;
    letter-spacing: 0;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
}

.finance-dashboard-grid .db-kpi-tile__sub {
    flex: 1 1 auto;
    color: var(--text-faint);
    font-size: 0.7rem;
    font-weight: 720;
    line-height: 1.14;
    min-width: 0;
}

.finance-dashboard-grid .kpi-chart-trend {
    flex: 0 0 auto;
    min-height: 22px;
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: var(--radius-pill);
    font-size: 0.7rem;
    font-weight: 850;
    line-height: 1;
    background: rgba(255, 255, 255, 0.035);
    border: 1px solid rgba(255, 255, 255, 0.045);
}

.finance-dashboard-grid .kpi-chart-trend--up {
    color: var(--success);
    background: rgba(72, 230, 178, 0.09);
    border-color: rgba(72, 230, 178, 0.16);
}

.finance-dashboard-grid .kpi-chart-trend--down {
    color: var(--accent-secondary);
    background: rgba(255, 112, 72, 0.09);
    border-color: rgba(255, 112, 72, 0.16);
}

.kpi-card-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding-top: 5px;
    border-top: 1px solid rgba(142, 226, 220, 0.08);
    color: var(--text-faint);
    font-size: 0.68rem;
    font-weight: 760;
    line-height: 1.12;
}

.kpi-card-meta span {
    min-width: 0;
    overflow-wrap: anywhere;
}

.kpi-card-meta span:last-child {
    text-align: right;
}

.kpi-mini-chart {
    position: absolute;
    left: 18px;
    right: 18px;
    bottom: 10px;
    height: 24px;
    margin: 0;
    z-index: 0;
}

.kpi-mini-chart .mini-sparkline {
    position: static;
    width: 100%;
    height: 24px;
    opacity: 0.46;
}

.kpi-card-top,
.db-kpi-tile__value,
.kpi-card-bottom,
.kpi-card-meta {
    position: relative;
    z-index: 1;
}

.finance-dashboard-grid .mini-sparkline__line {
    stroke-width: 2.5;
}

.finance-dashboard-grid .mini-sparkline__area {
    opacity: 0.1;
}

.card-month-status {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 210px;
    gap: 24px;
    padding: 28px;
    background:
        radial-gradient(circle at 18% 12%, rgba(34, 225, 207, 0.2), transparent 34%),
        radial-gradient(circle at 82% 14%, rgba(31, 155, 255, 0.1), transparent 28%),
        linear-gradient(155deg, rgba(20, 46, 52, 0.98) 0%, rgba(10, 24, 30, 0.99) 60%, rgba(5, 13, 17, 1) 100%);
    border-color: rgba(34, 225, 207, 0.24);
}

.month-status-main,
.month-status-side {
    position: relative;
    z-index: 1;
    min-width: 0;
}

.month-status-main {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 10px;
}

/* Wert + Facts nebeneinander */
.month-status-value-row {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}

/* Inline-Facts: kompakte Spalte rechts neben dem Betrag */
.dashboard-donut-facts--inline {
    display: flex;
    flex-direction: column;
    gap: 6px;
    border-left: 1px solid rgba(255, 255, 255, 0.08);
    padding-left: 16px;
    min-width: 0;
}

.dashboard-donut-facts--inline div {
    display: flex;
    align-items: center;
    gap: 8px;
    background: none;
    border: none;
    padding: 0;
}

.dashboard-donut-facts--inline span {
    color: var(--text-muted);
    font-size: 0.72rem;
    font-weight: 700;
    white-space: nowrap;
}

.dashboard-donut-facts--inline strong {
    color: var(--text-main);
    font-size: 0.88rem;
    font-weight: 800;
    white-space: nowrap;
}

.month-status-side {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    align-items: stretch;
    gap: 14px;
}

.card-month-status .hero-main__value {
    font-size: clamp(1.5rem, 2.1vw, 3.28rem);
    overflow-wrap: normal;
    word-break: normal;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hero-main__micro {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 14px;
    padding-top: 8px;
    color: var(--text-muted);
    font-size: 0.82rem;
    font-weight: 760;
}

.hero-main__micro span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.card-month-status .hero-status-badge {
    align-self: flex-start;
    margin-top: 4px;
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(142, 226, 220, 0.12);
    color: var(--text-soft);
    box-shadow: none;
}

.month-status-side .hero-main__metric-label {
    text-align: left;
}

.card-month-status .hero-progress-track {
    height: 12px;
}

.month-status-gauge {
    align-self: center;
    width: 104px;
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background:
        radial-gradient(circle at center, rgba(16, 33, 42, 0.98) 0 58%, transparent 59%),
        conic-gradient(var(--accent-primary) var(--progress), rgba(159, 183, 189, 0.16) 0);
    box-shadow: inset 0 0 0 1px rgba(142, 226, 220, 0.1), 0 0 22px rgba(34, 225, 207, 0.08);
}

.month-status-gauge.badge-warn {
    background:
        radial-gradient(circle at center, rgba(16, 33, 42, 0.98) 0 58%, transparent 59%),
        conic-gradient(var(--warning) var(--progress), rgba(159, 183, 189, 0.16) 0);
}

.month-status-gauge.badge-danger {
    background:
        radial-gradient(circle at center, rgba(16, 33, 42, 0.98) 0 58%, transparent 59%),
        conic-gradient(var(--danger) var(--progress), rgba(159, 183, 189, 0.16) 0);
}

.month-status-gauge span {
    color: var(--text-main);
    font-size: 1.08rem;
    font-weight: 880;
    font-variant-numeric: tabular-nums;
}

.month-status-facts {
    display: grid;
    gap: 6px;
    margin-top: 2px;
}

.month-status-facts div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-height: 30px;
    padding: 5px 9px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.035);
    border: 1px solid rgba(142, 226, 220, 0.08);
}

.month-status-facts span {
    color: var(--text-muted);
    font-size: 0.7rem;
    font-weight: 760;
    line-height: 1.1;
}

.month-status-facts strong {
    color: var(--text-main);
    font-size: 0.84rem;
    font-weight: 850;
    font-variant-numeric: tabular-nums;
    text-align: right;
    line-height: 1.1;
}

.dashboard-visual-card {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 22px;
}

.card-cost-structure {
    background:
        linear-gradient(145deg, rgba(255, 112, 72, 0.055), transparent 42%),
        linear-gradient(155deg, rgba(17, 34, 42, 0.96) 0%, rgba(10, 23, 28, 0.98) 62%, rgba(5, 13, 17, 0.99) 100%);
}

.dashboard-donut {
    --donut-color: var(--accent-primary);
    position: relative;
    align-self: center;
    width: min(178px, 74%);
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background:
        radial-gradient(circle at center, rgba(8, 19, 24, 0.98) 0 54%, transparent 55%),
        conic-gradient(var(--donut-color) var(--progress), rgba(159, 183, 189, 0.14) 0);
    box-shadow:
        inset 0 0 0 1px rgba(142, 226, 220, 0.11),
        0 0 30px color-mix(in srgb, var(--donut-color) 24%, transparent);
}

.dashboard-donut--hero {
    width: 180px;
    flex-shrink: 0;
}

.dashboard-donut::before {
    content: "";
    position: absolute;
    width: 52%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: linear-gradient(160deg, rgba(16, 33, 42, 0.98), rgba(5, 13, 17, 0.98));
    border: 1px solid rgba(142, 226, 220, 0.1);
    box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.3);
}

.dashboard-donut span {
    position: relative;
    z-index: 1;
    color: var(--text-main);
    font-size: 1.45rem;
    font-weight: 900;
    font-variant-numeric: tabular-nums;
}

.dashboard-donut--hero span {
    font-size: 1.75rem;
}

.dashboard-donut--ok {
    --donut-color: var(--accent-primary);
}

.dashboard-donut--warn {
    --donut-color: var(--warning);
}

.dashboard-donut--danger {
    --donut-color: var(--danger);
}

.dashboard-donut-facts {
    display: grid;
    gap: 9px;
    margin-top: auto;
}

.dashboard-donut-facts--hero {
    margin-top: 0;
}

.dashboard-donut-facts div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.035);
    border: 1px solid rgba(142, 226, 220, 0.08);
}

.dashboard-donut-facts span {
    color: var(--text-muted);
    font-size: 0.76rem;
    font-weight: 780;
}

.dashboard-donut-facts strong {
    color: var(--text-main);
    font-size: 0.96rem;
    font-weight: 860;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.cost-structure-list {
    display: grid;
    gap: 14px;
    margin-top: auto;
}

.cost-structure-row {
    display: grid;
    gap: 7px;
}

.cost-structure-row__meta {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
}

.cost-structure-row__meta span {
    color: var(--text-soft);
    font-size: 0.82rem;
    font-weight: 830;
}

.cost-structure-row__meta strong {
    color: var(--text-main);
    font-size: 0.94rem;
    font-weight: 860;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.cost-structure-track {
    height: 13px;
    border-radius: var(--radius-pill);
    background: rgba(159, 183, 189, 0.14);
    overflow: hidden;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.035);
}

.cost-structure-track span {
    display: block;
    width: var(--share);
    height: 100%;
    border-radius: inherit;
    background: var(--bar-color);
    box-shadow: 0 0 16px color-mix(in srgb, var(--bar-color) 32%, transparent);
}

.cost-structure-row em {
    color: var(--text-faint);
    font-size: 0.7rem;
    font-style: normal;
    font-weight: 760;
}

.cost-structure-empty {
    display: flex;
    align-items: center;
    min-height: 72px;
    padding: 16px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.028);
    border: 1px solid rgba(142, 226, 220, 0.07);
    color: var(--text-muted);
    font-size: 0.84rem;
    font-weight: 760;
}

.cost-structure-row--recurring {
    --bar-color: var(--accent-secondary);
}

.cost-structure-row--household {
    --bar-color: var(--success);
}

.cost-structure-row--subscriptions {
    --bar-color: var(--accent-blue);
}

.cost-structure-row--other {
    --bar-color: rgba(159, 183, 189, 0.55);
}

.card-chart {
    padding: 0;
}

.card-chart .dashboard-chart-card {
    height: 100%;
    max-width: none;
    margin: 0;
    border: 0;
    border-radius: inherit;
    background: transparent;
    box-shadow: none;
}

.card-chart .dashboard-chart-card__header {
    padding: 18px 22px 0;
}

.card-chart .dashboard-chart-card__body {
    height: calc(100% - 76px);
    min-height: 0;
    padding: 10px 18px 18px;
}

.card-chart .dashboard-chart-card__meta span {
    min-height: 28px;
    padding-inline: 11px;
    font-size: 0.78rem;
}

.card-chart .dashboard-chart-card__legend {
    gap: 14px;
}

.card-chart .dashboard-chart-card__legend span {
    color: var(--text-muted);
}

.card-section-title {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.card-section-title span {
    color: var(--text-faint);
    font-size: 0.72rem;
    font-weight: 850;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.card-section-title strong {
    color: var(--text-main);
    font-size: 0.9rem;
    font-weight: 820;
    text-align: right;
}

.card-account .db-acct-card {
    height: 100%;
    min-height: 0;
    gap: 14px;
    padding: 22px;
    border-radius: 26px;
}

.card-account .db-acct-card__header {
    gap: 12px;
}

.card-account .db-acct-card__name {
    font-size: 1.08rem;
}

.card-account .db-acct-card__type,
.card-account .db-acct-card__main-label,
.card-account .db-acct-card__meta {
    font-size: 0.72rem;
}

.card-account .db-acct-card__badge {
    min-height: 27px;
    padding: 5px 11px;
    font-size: 0.66rem;
}

.card-account .db-acct-card__balance {
    font-size: 1.52rem;
}

.card-account .db-acct-card__summary {
    display: grid;
    gap: 5px;
    padding: 12px 13px;
    border-radius: 15px;
    background: rgba(255, 255, 255, 0.032);
    border: 1px solid rgba(142, 226, 220, 0.08);
}

.card-account .db-acct-card__summary span {
    color: var(--text-muted);
    font-size: 0.72rem;
    font-weight: 780;
}

.card-account .db-acct-card__summary strong {
    font-size: 1rem;
    font-weight: 860;
    font-variant-numeric: tabular-nums;
}

.card-account .db-acct-card__footer {
    gap: 8px;
    padding-top: 10px;
}

.card-account .db-acct-card__status,
.card-account .db-acct-card__link {
    font-size: 0.82rem;
}

.card-account .db-acct-card__link,
.dashboard-mini-card a {
    color: var(--accent-primary);
    text-shadow: 0 0 14px rgba(34, 225, 207, 0.12);
}

.dashboard-mini-card {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 22px;
    color: var(--text-main);
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.024), transparent 42%),
        linear-gradient(155deg, rgba(17, 34, 42, 0.95) 0%, rgba(10, 23, 28, 0.98) 62%, rgba(5, 13, 17, 0.99) 100%);
}

.dashboard-mini-card__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

.mini-card-kicker {
    color: var(--text-faint);
    font-size: 0.72rem;
    font-weight: 850;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.mini-card-badge {
    flex: 0 0 auto;
    min-height: 26px;
    display: inline-flex;
    align-items: center;
    padding: 4px 9px;
    border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, 0.045);
    border: 1px solid rgba(142, 226, 220, 0.1);
    color: var(--text-muted);
    font-size: 0.7rem;
    font-weight: 800;
}

.dashboard-mini-card__value {
    display: block;
    color: var(--text-main);
    font-size: 1.72rem;
    font-weight: 880;
    line-height: 1.05;
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
}

.dashboard-mini-card p {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.86rem;
    line-height: 1.42;
}

.dashboard-mini-card__stats {
    display: grid;
    gap: 7px;
    padding-top: 8px;
    border-top: 1px solid rgba(142, 226, 220, 0.1);
}

.dashboard-mini-card__stats span {
    color: var(--text-soft);
    font-size: 0.8rem;
    font-weight: 760;
}

.dashboard-mini-card a {
    margin-top: auto;
    color: var(--accent-primary);
    font-size: 0.88rem;
    font-weight: 850;
    text-decoration: none;
}

.dashboard-mini-card__note {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--text-faint);
    font-size: 0.76rem;
    font-weight: 760;
}

.micro-dot {
    flex: 0 0 auto;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--text-muted);
    box-shadow: 0 0 10px rgba(159, 183, 189, 0.22);
}

.micro-dot--success {
    background: var(--success);
    box-shadow: 0 0 12px rgba(72, 230, 178, 0.34);
}

.micro-dot--warning {
    background: var(--accent-secondary);
    box-shadow: 0 0 12px rgba(255, 112, 72, 0.3);
}

.micro-dot--info {
    background: #35acff;
    box-shadow: 0 0 12px rgba(53, 172, 255, 0.3);
}

.card-special-finance {
    background:
        linear-gradient(145deg, rgba(53, 172, 255, 0.07), transparent 44%),
        linear-gradient(155deg, rgba(17, 34, 42, 0.95) 0%, rgba(10, 23, 28, 0.98) 58%, rgba(5, 13, 17, 0.99) 100%);
}

.finance-dashboard-row > .card-next-special-income {
    background:
        linear-gradient(145deg, rgba(34, 225, 207, 0.11), transparent 44%),
        linear-gradient(155deg, rgba(17, 38, 46, 0.97) 0%, rgba(10, 25, 31, 0.99) 62%, rgba(5, 13, 17, 1) 100%);
    border-color: rgba(34, 225, 207, 0.22);
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.34), 0 0 14px rgba(34, 225, 207, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.035);
    padding-bottom: 18px;
}

.kpi-icon--teal {
    color: var(--accent-primary) !important;
    opacity: 0.85;
}

.kpi-value--muted {
    color: var(--text-faint) !important;
}

.kpi-badge {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: var(--radius-pill);
    font-size: 0.64rem;
    font-weight: 800;
    line-height: 1;
    white-space: nowrap;
}

.kpi-badge--next {
    color: var(--accent-primary);
    background: rgba(34, 225, 207, 0.09);
    border: 1px solid rgba(34, 225, 207, 0.18);
}

.kpi-badge--none {
    color: var(--text-muted);
    background: rgba(255, 255, 255, 0.035);
    border: 1px solid rgba(255, 255, 255, 0.045);
}

@media (min-width: 1500px) {
    .finance-dashboard-grid {
        gap: 22px;
        grid-template-rows: 118px 310px 292px;
    }
}

@media (max-width: 1199px) {
    .finance-dashboard-row {
        gap: 20px;
        overflow-x: auto;
        padding-bottom: 2px;
    }

    .finance-dashboard-row--kpi {
        grid-template-columns: repeat(5, minmax(190px, 1fr));
    }

    .finance-dashboard-row--status {
        grid-template-columns: repeat(5, minmax(190px, 1fr));
    }

    .finance-dashboard-row--analysis {
        grid-template-columns: minmax(420px, 2fr) repeat(2, minmax(240px, 1fr));
    }

    .finance-dashboard-grid {
        gap: 20px;
    }

    /* Explizite Desktop-Platzierungen zurücksetzen */
}

@media (max-width: 760px) {
    .dashboard-shell {
        width: calc(100vw - 2rem);
        max-width: 100%;
        overflow: hidden;
    }

    .finance-dashboard-grid {
        width: 100%;
        max-width: 100%;
        gap: 18px;
    }

    .finance-dashboard-row {
        gap: 18px;
    }

    .finance-dashboard-row--kpi {
        grid-template-columns: repeat(5, minmax(180px, 1fr));
    }

    .finance-dashboard-row--status {
        grid-template-columns: repeat(5, minmax(180px, 1fr));
    }

    .finance-dashboard-row--analysis {
        grid-template-columns: minmax(330px, 2fr) repeat(2, minmax(220px, 1fr));
    }

    .finance-dashboard-row > .db-kpi-tile {
        width: 100%;
        min-height: 158px;
    }

    .finance-dashboard-row > .db-kpi-tile .kpi-card-top,
    .finance-dashboard-row > .db-kpi-tile .kpi-card-bottom,
    .finance-dashboard-row > .db-kpi-tile .kpi-card-meta {
        justify-content: flex-start;
    }

    .finance-dashboard-row > .db-kpi-tile .db-kpi-tile__label,
    .finance-dashboard-row > .db-kpi-tile .kpi-card-meta span:last-child {
        text-align: left;
    }

    .finance-dashboard-row > .db-kpi-tile .kpi-card-meta {
        flex-wrap: wrap;
    }

    .card-month-status {
        grid-template-columns: 1fr;
        padding: 22px;
    }

    .card-chart .dashboard-chart-card__header {
        flex-direction: column;
        align-items: stretch;
    }

    .card-chart .dashboard-chart-card__meta {
        justify-content: flex-start;
    }

    .card-chart .dashboard-chart-card__body {
        height: 235px;
    }
}

/* =============================================================================
   RESPONSIVE ERWEITERUNGEN – Tablet (≤ 1199px) und Mobile (≤ 768px / ≤ 480px)
   Ergänzt und überschreibt bestehende Breakpoints für vollständige
   Responsive-Unterstützung auf allen Gerätegrößen.
   ============================================================================= */

/* ── Zwischen-Desktop (≤ 1500px) – KPI und Status-Reihe verbessern ──────── */
@media (max-width: 1500px) {

    /* KPI-Kacheln: Innenabstand kompakter, Wert etwas kleiner */
    .finance-dashboard-row > .db-kpi-tile {
        padding: 14px 14px 16px;
    }

    .db-kpi-tile__value {
        font-size: clamp(1.1rem, 1.4vw, 1.46rem);
    }

    /* Monatsstatus: Padding reduzieren */
    .card-month-status {
        padding: 20px;
        gap: 16px;
    }

    /* Donut behält feste Größe */
}

/* ── Enger Desktop / großes Tablet mit Sidebar (≤ 1350px) ───────────────── */
@media (max-width: 1350px) {

    /* KPI-Labels können umbrechen statt abzuschneiden */
    .db-section-pill {
        white-space: normal;
        text-overflow: clip;
        line-height: 1.2;
        padding: 3px 8px;
        letter-spacing: 0.04em;
    }

    /* Spezifischerer Override für Dashboard-Kacheln */
    .finance-dashboard-grid .db-kpi-tile__label {
        white-space: normal;
        text-overflow: clip;
        overflow: visible;
        letter-spacing: 0.05em;
    }

    /* kpi-card-top: Overflow erlauben damit 2-zeilige Labels sichtbar sind */
    .finance-dashboard-grid .kpi-card-top {
        overflow: visible;
    }

    /* Monatsstatus: linke Spalte wächst, rechte Spalte fix für den Donut */
    .card-month-status {
        grid-template-columns: minmax(0, 1fr) 210px;
        gap: 14px;
        padding: 18px;
    }

    /* Kachel-Höhe bei schmalem Desktop etwas höher für 2-zeilige Labels */
    .finance-dashboard-grid {
        grid-template-rows: 128px 310px 280px;
    }
}

/* ── Tablet (≤ 1199px) ────────────────────────────────────────────────────── */
@media (max-width: 1199px) {

    /* Seitentitel etwas kleiner */
    .page-title { font-size: 1.6rem; }

    .dashboard-shell {
        width: 100%;
        max-width: 100%;
    }

    .finance-dashboard-grid {
        grid-template-rows: none;
        gap: 18px;
    }

    .finance-dashboard-row {
        overflow-x: visible;
        padding-bottom: 0;
    }

    /* Dashboard-Reihen: Karten umbrechen statt horizontal aus dem Viewport zu laufen */
    .finance-dashboard-row--kpi {
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    }

    .finance-dashboard-row--status {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .finance-dashboard-row--analysis {
        grid-template-columns: 1fr;
    }

    .finance-dashboard-row--status > .card-month-status,
    .finance-dashboard-row--status > .card-cost-structure {
        grid-column: 1 / -1;
    }

    .finance-dashboard-row--status > .card-special-finance {
        grid-column: auto;
    }

    .finance-dashboard-row > .db-kpi-tile {
        min-height: 132px;
    }

    .card-month-status {
        min-height: 260px;
    }

    .card-chart .dashboard-chart-card__body {
        height: 300px;
    }

    /* Subscription-Grid: 2 Spalten */
    .subscription-list {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* ── Mobile (≤ 768px) ─────────────────────────────────────────────────────── */
@media (max-width: 768px) {

    /* Typografie */
    .page-title    { font-size: 1.35rem; }
    .page-subtitle { font-size: 0.82rem; }

    /* Seitenrahmen: weniger Abstand */
    .finance-page-shell { gap: 12px; }

    /* Karten: kompakter */
    .finance-card-header { padding: 12px 16px; min-height: 48px; }
    .finance-card-body   { padding: 16px; }
    .finance-card-footer { padding: 0 16px 14px; }

    /* KPI-Karte */
    .kpi-card { padding: var(--space-md); }
    .kpi-card__value { font-size: 1.35rem; }

    /* Tabellen: horizontales Scrollen innerhalb der Tabelle */
    .table-responsive {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        border-radius: var(--radius-md);
    }

    /* Finance-Stat-Grid: bereits abgedeckt (900px → 2 Spalten, 640px → 1 Spalte) */

    /* Dashboard: KPI-Kacheln 2 Spalten */
    .finance-dashboard-row--kpi {
        grid-template-columns: repeat(2, minmax(160px, 1fr));
    }

    .finance-dashboard-row--status {
        grid-template-columns: 1fr;
    }

    .finance-dashboard-row--analysis {
        grid-template-columns: 1fr;
    }

    /* Monatsstatus-Karte: volle Breite */
    .card-month-status {
        grid-template-columns: 1fr !important;
    }

    /* Account-Grid: kleinere Mindestbreite */
    .db-account-grid {
        grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    }

    /* Jahreskacheln: 3 Spalten */
    .lk-jahres-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    /* Subscriptions: 1 Spalte */
    .subscription-list {
        grid-template-columns: 1fr !important;
    }
    .subscription-summary-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* Toolbar: umbrechen statt quetschen */
    .finance-toolbar,
    .subscription-toolbar {
        flex-wrap: wrap;
        gap: 10px;
        padding: 10px 12px;
    }

    .finance-toolbar__actions {
        width: 100%;
        justify-content: flex-start;
    }

    /* Button-Gruppen umbrechen */
    .d-flex.gap-2,
    .btn-group {
        flex-wrap: wrap;
    }

    /* Formulare: Eingabefelder volle Breite */
    .row .col-md-6,
    .row .col-md-4,
    .row .col-md-3 {
        width: 100%;
    }

    /* Modale: fast volle Breite */
    .modal-dialog {
        margin: 0.5rem auto;
        max-width: calc(100vw - 1rem);
    }

    /* Konto-Sektion: etwas kompakter */
    .konto-section { padding: 14px; }

    /* KPI-Tile: etwas kleiner */
    .db-kpi-tile { min-height: 110px; }
    .db-kpi-tile__value { font-size: 1.25rem; }

    /* Dashboard chart body etwas flacher */
    .dashboard-chart-card__body { height: 220px !important; }

    /* Jahresübersicht-Hero: stack */
    .dashboard-hero-grid {
        grid-template-columns: 1fr !important;
    }
    .hero-side-stack {
        flex-direction: row !important;
        flex-wrap: wrap;
    }

    /* Monatsstatus: vertikal stapeln */
    .card-month-status {
        grid-template-columns: 1fr !important;
        padding: 18px;
        gap: 16px;
    }

    .card-month-status .hero-main__value {
        font-size: clamp(1.5rem, 5vw, 2.5rem);
        white-space: normal;
    }
}

/* ── Kleines Mobile (≤ 480px) ─────────────────────────────────────────────── */
@media (max-width: 480px) {

    /* Typografie noch kompakter */
    .page-title { font-size: 1.2rem; }

    /* KPI einspaltiger */
    .finance-dashboard-row--kpi,
    .finance-dashboard-row--status {
        grid-template-columns: 1fr;
    }

    /* Jahreskacheln: 2 Spalten */
    .lk-jahres-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* Subscription-Summary: 1 Spalte */
    .subscription-summary-grid {
        grid-template-columns: 1fr !important;
    }

    /* Modals: Vollbild-ähnlich */
    .modal-dialog {
        margin: 0;
        max-width: 100vw;
        min-height: 100dvh;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
    }

    .modal-content {
        border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    }

    /* Tabellen-Werte: keine Zeilenumbrüche bei Beträgen */
    .table td,
    .table th {
        white-space: nowrap;
    }

    /* Buttons in Aktionszeilen untereinander */
    .page-header__actions,
    .finance-detail-section__actions {
        flex-direction: column;
        align-items: stretch;
    }

    .page-header__actions .btn,
    .finance-detail-section__actions .btn {
        width: 100%;
        justify-content: center;
    }
}