/* ==========================================================================
   Marktplatz-Steuerberichte – Kontierung & DATEV-Export
   Gemeinsames Stylesheet für Login und Dashboard (baut auf Bootstrap 5.3 auf)
   ========================================================================== */

:root {
    --ink: #0f172a;
    --ink-2: #334155;
    --muted: #64748b;
    --line: #e2e8f0;
    --line-strong: #cbd5e1;
    --bg: #f4f6fa;
    --surface: #ffffff;
    --surface-2: #f8fafc;

    --primary: #2552d0;
    --primary-hover: #1d43ad;
    --primary-soft: #eaf0fe;
    --success: #15803d;
    --success-soft: #e7f6ec;
    --warning: #b45309;
    --warning-soft: #fdf3e3;
    --danger: #c42020;
    --danger-soft: #fdeceb;
    --info: #0369a1;
    --info-soft: #e6f3fa;

    --ebay: #2552d0;
    --real: #0e8f63;

    --sidebar: #0f172a;
    --sidebar-ink: #cbd5e1;

    --radius: 14px;
    --radius-sm: 10px;
    --shadow-sm: 0 1px 2px rgba(15, 23, 42, .06);
    --shadow: 0 1px 2px rgba(15, 23, 42, .05), 0 6px 24px rgba(15, 23, 42, .06);
    --shadow-lg: 0 20px 50px rgba(15, 23, 42, .18);

    --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
    --mono: ui-monospace, SFMono-Regular, "Cascadia Mono", "Segoe UI Mono", Consolas, monospace;

    /* Bootstrap-Variablen */
    --bs-body-font-family: var(--font);
    --bs-body-color: var(--ink);
    --bs-body-bg: var(--bg);
    --bs-border-color: var(--line);
    --bs-primary: var(--primary);
    --bs-primary-rgb: 37, 82, 208;
    --bs-link-color: var(--primary);
    --bs-link-color-rgb: 37, 82, 208;
    --bs-link-hover-color: var(--primary-hover);
    --bs-border-radius: 10px;
    --bs-border-radius-sm: 8px;
    --bs-border-radius-lg: 14px;
    --bs-secondary-color: var(--muted);
}

body {
    background: var(--bg);
    color: var(--ink);
    font-family: var(--font);
    -webkit-font-smoothing: antialiased;
}

/* ---------- Buttons ------------------------------------------------------ */
.btn {
    font-weight: 550;
    border-radius: var(--radius-sm);
    --bs-btn-padding-y: .5rem;
    --bs-btn-padding-x: 1rem;
}
.btn-sm { --bs-btn-padding-y: .3rem; --bs-btn-padding-x: .65rem; border-radius: 8px; }
.btn-lg { --bs-btn-padding-y: .75rem; --bs-btn-padding-x: 1.5rem; }

.btn-primary {
    --bs-btn-bg: var(--primary);
    --bs-btn-border-color: var(--primary);
    --bs-btn-hover-bg: var(--primary-hover);
    --bs-btn-hover-border-color: var(--primary-hover);
    --bs-btn-active-bg: var(--primary-hover);
    --bs-btn-active-border-color: var(--primary-hover);
    --bs-btn-disabled-bg: var(--primary);
    --bs-btn-disabled-border-color: var(--primary);
}
.btn-success {
    --bs-btn-bg: var(--success);
    --bs-btn-border-color: var(--success);
    --bs-btn-hover-bg: #116a33;
    --bs-btn-hover-border-color: #116a33;
    --bs-btn-active-bg: #116a33;
    --bs-btn-active-border-color: #116a33;
}
.btn-outline-primary {
    --bs-btn-color: var(--primary);
    --bs-btn-border-color: var(--line-strong);
    --bs-btn-hover-bg: var(--primary-soft);
    --bs-btn-hover-color: var(--primary);
    --bs-btn-hover-border-color: var(--primary);
    --bs-btn-active-bg: var(--primary);
    --bs-btn-active-border-color: var(--primary);
}
.btn-outline-secondary {
    --bs-btn-color: var(--ink-2);
    --bs-btn-border-color: var(--line-strong);
    --bs-btn-hover-bg: var(--surface-2);
    --bs-btn-hover-color: var(--ink);
    --bs-btn-hover-border-color: var(--line-strong);
    --bs-btn-active-bg: var(--line);
    --bs-btn-active-color: var(--ink);
    --bs-btn-disabled-color: var(--muted);
    --bs-btn-disabled-border-color: var(--line);
    background: var(--surface);
}
.btn-outline-warning {
    --bs-btn-color: var(--warning);
    --bs-btn-border-color: var(--line-strong);
    --bs-btn-hover-bg: var(--warning-soft);
    --bs-btn-hover-color: var(--warning);
    --bs-btn-hover-border-color: var(--warning);
    --bs-btn-active-bg: var(--warning);
    --bs-btn-active-border-color: var(--warning);
}
.btn-outline-success {
    --bs-btn-color: var(--success);
    --bs-btn-border-color: var(--line-strong);
    --bs-btn-hover-bg: var(--success-soft);
    --bs-btn-hover-color: var(--success);
    --bs-btn-hover-border-color: var(--success);
    --bs-btn-active-bg: var(--success);
    --bs-btn-active-border-color: var(--success);
}
.btn-outline-info {
    --bs-btn-color: var(--info);
    --bs-btn-border-color: var(--line-strong);
    --bs-btn-hover-bg: var(--info-soft);
    --bs-btn-hover-color: var(--info);
    --bs-btn-hover-border-color: var(--info);
    --bs-btn-active-bg: var(--info);
    --bs-btn-active-border-color: var(--info);
}
.btn-info {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--info);
    --bs-btn-border-color: var(--info);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #075985;
    --bs-btn-hover-border-color: #075985;
}

/* ---------- Formulare ---------------------------------------------------- */
.form-control, .form-select {
    border-color: var(--line-strong);
    border-radius: var(--radius-sm);
}
.form-control:focus, .form-select:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 .2rem rgba(37, 82, 208, .15);
}
.form-label { font-weight: 550; font-size: .875rem; color: var(--ink-2); margin-bottom: .35rem; }
.form-check-input:checked { background-color: var(--primary); border-color: var(--primary); }
.form-check-input:focus { box-shadow: 0 0 0 .2rem rgba(37, 82, 208, .15); }

/* ---------- Karten ------------------------------------------------------- */
.card {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    background: var(--surface);
}
.card-header {
    background: transparent;
    border-bottom: 1px solid var(--line);
    padding: 1rem 1.25rem;
    font-weight: 600;
}
.card-header:first-child { border-radius: var(--radius) var(--radius) 0 0; }
.card-body { padding: 1.25rem; }

/* ---------- Badges (dezent statt knallig) -------------------------------- */
.badge { font-weight: 600; border-radius: 999px; padding: .35em .7em; }
.badge.bg-success   { background: var(--success-soft) !important; color: var(--success) !important; }
.badge.bg-danger    { background: var(--danger-soft) !important;  color: var(--danger) !important; }
.badge.bg-warning   { background: var(--warning-soft) !important; color: var(--warning) !important; }
.badge.bg-info      { background: var(--info-soft) !important;    color: var(--info) !important; }
.badge.bg-secondary { background: var(--line) !important;         color: var(--ink-2) !important; }
.btn .badge.bg-secondary { background: rgba(15, 23, 42, .08) !important; color: inherit !important; }

/* ---------- Hinweise ----------------------------------------------------- */
.alert { border-radius: var(--radius-sm); border-width: 1px; }
.alert-info    { background: var(--info-soft);    border-color: #bfe0f2; color: #0c4a6e; }
.alert-success { background: var(--success-soft); border-color: #bfe5cc; color: #14532d; }
.alert-warning { background: var(--warning-soft); border-color: #f5d9a8; color: #78350f; }
.alert-danger  { background: var(--danger-soft);  border-color: #f5c2c0; color: #7f1d1d; }

/* ==========================================================================
   Login
   ========================================================================== */
.login-page {
    min-height: 100vh;
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    background: var(--surface);
}
.login-aside {
    position: relative;
    overflow: hidden;
    background: radial-gradient(1200px 600px at -10% -10%, #2f5fe0 0%, transparent 60%),
                radial-gradient(900px 500px at 110% 110%, #0e8f63 0%, transparent 55%),
                #0f172a;
    color: #e2e8f0;
    padding: 56px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.login-aside h1 { color: #fff; font-size: 2.1rem; font-weight: 700; letter-spacing: -.02em; line-height: 1.2; margin: 0 0 1rem; }
.login-aside p.lead { color: #cbd5e1; font-size: 1.05rem; max-width: 30rem; }
.login-features { list-style: none; padding: 0; margin: 2rem 0 0; display: grid; gap: .9rem; }
.login-features li { display: flex; gap: .75rem; align-items: flex-start; color: #e2e8f0; }
.login-features i {
    flex: none; width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center;
    background: rgba(255, 255, 255, .08); color: #93c5fd;
}
.login-aside small { color: #94a3b8; }

.login-main { display: flex; align-items: center; justify-content: center; padding: 40px 24px; }
.login-box { width: 100%; max-width: 380px; }
.login-box h2 { font-size: 1.5rem; font-weight: 700; letter-spacing: -.01em; margin-bottom: .25rem; }
.login-box .form-control { padding: .7rem .9rem; }
.login-box .btn-primary { padding: .75rem 1rem; }
.input-icon { position: relative; }
.input-icon > i { position: absolute; left: .9rem; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.input-icon > .form-control { padding-left: 2.5rem; }

.brand { display: flex; align-items: center; gap: .7rem; text-decoration: none; }
.brand-mark {
    width: 38px; height: 38px; border-radius: 11px; flex: none;
    display: grid; place-items: center; color: #fff; font-size: 1.1rem;
    background: linear-gradient(135deg, #3b82f6 0%, #2552d0 100%);
    box-shadow: 0 4px 14px rgba(37, 82, 208, .35);
}
.brand-name { font-weight: 700; color: #fff; line-height: 1.15; }
.brand-name small { display: block; font-weight: 500; color: #94a3b8; font-size: .75rem; }

@media (max-width: 991.98px) {
    .login-page { grid-template-columns: 1fr; }
    .login-aside { display: none; }
}

/* ==========================================================================
   App-Layout (Sidebar + Inhalt)
   ========================================================================== */
.app-shell { display: grid; grid-template-columns: 252px minmax(0, 1fr); min-height: 100vh; }

.sidebar {
    position: sticky; top: 0; height: 100vh;
    background: var(--sidebar); color: var(--sidebar-ink);
    display: flex; flex-direction: column;
    padding: 20px 14px;
}
.sidebar .brand { padding: 4px 8px 22px; }
.side-nav { list-style: none; padding: 0; margin: 0; display: grid; gap: 4px; }
.side-nav .nav-link {
    display: flex; align-items: center; gap: .75rem;
    color: var(--sidebar-ink); padding: .65rem .8rem; border-radius: var(--radius-sm);
    font-weight: 550; font-size: .925rem;
    transition: background .15s, color .15s;
}
.side-nav .nav-link i { font-size: 1.05rem; opacity: .85; }
.side-nav .nav-link:hover { background: rgba(255, 255, 255, .06); color: #fff; }
.side-nav .nav-link.active { background: rgba(96, 165, 250, .16); color: #fff; box-shadow: inset 3px 0 0 #60a5fa; }
.side-section { font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; color: #64748b; padding: 0 .8rem; margin: 6px 0 8px; }

.sidebar-footer { margin-top: auto; border-top: 1px solid rgba(255, 255, 255, .08); padding-top: 14px; }
.user-chip { display: flex; align-items: center; gap: .65rem; padding: .4rem .5rem; }
.user-avatar {
    width: 34px; height: 34px; border-radius: 50%; flex: none;
    display: grid; place-items: center; font-weight: 700; color: #fff;
    background: #334155;
}
.user-chip .name { color: #fff; font-weight: 600; font-size: .9rem; line-height: 1.1; }
.user-chip .role { color: #94a3b8; font-size: .75rem; }
.btn-logout {
    margin-left: auto; color: #94a3b8; background: transparent; border: 0;
    width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center;
}
.btn-logout:hover { background: rgba(255, 255, 255, .08); color: #fff; }

.main { padding: 32px 36px 56px; min-width: 0; }
.page-header { display: flex; flex-wrap: wrap; gap: 1rem; align-items: flex-end; justify-content: space-between; margin-bottom: 1.5rem; }
.page-header h1 { font-size: 1.55rem; font-weight: 700; letter-spacing: -.02em; margin: 0; }
.page-header p { color: var(--muted); margin: .25rem 0 0; }

@media (max-width: 991.98px) {
    .app-shell { grid-template-columns: minmax(0, 1fr); }
    .sidebar { position: static; height: auto; min-width: 0; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px 16px; padding: 12px 16px; }
    .sidebar .brand { padding: 0; }
    .side-section { display: none; }
    .side-nav { grid-auto-flow: column; justify-content: start; overflow-x: auto; order: 3; width: 100%; min-width: 0; }
    .side-nav .nav-link { white-space: nowrap; }
    .side-nav .nav-link.active { box-shadow: inset 0 -2px 0 #60a5fa; }
    .sidebar-footer { margin: 0 0 0 auto; border: 0; padding: 0; }
    .user-chip .meta, .user-avatar, .brand-name small { display: none; }
    .main { padding: 20px 16px 40px; }
}

/* ---------- Schrittanzeige ---------------------------------------------- */
.step-indicator {
    display: flex; align-items: center;
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
    padding: 14px 18px; margin-bottom: 1.5rem; box-shadow: var(--shadow-sm);
    overflow-x: auto;
}
.step { display: flex; align-items: center; gap: .6rem; flex: 1; min-width: max-content; color: var(--muted); font-weight: 550; font-size: .9rem; }
.step:not(:last-child)::after { content: ""; flex: 1; min-width: 16px; height: 2px; background: var(--line); margin: 0 .75rem; border-radius: 2px; }
.step-dot {
    width: 34px; height: 34px; border-radius: 50%; flex: none;
    display: grid; place-items: center;
    border: 2px solid var(--line-strong); background: var(--surface); color: var(--muted);
    transition: all .2s;
}
.step.active { color: var(--ink); }
.step.active .step-dot { background: var(--primary); border-color: var(--primary); color: #fff; box-shadow: 0 0 0 4px var(--primary-soft); }
.step.completed { color: var(--ink-2); }
.step.completed .step-dot { background: var(--success-soft); border-color: var(--success); color: var(--success); }
.step.completed::after { background: var(--success); }
@media (max-width: 767.98px) {
    .step { min-width: 0; }
    .step.active { min-width: max-content; }
    .step:not(.active) > span:last-child { display: none; }
    .step:not(:last-child)::after { margin: 0 .4rem; }
}

/* ---------- Import-Karten & Upload-Fläche -------------------------------- */
.import-card .card-header { display: flex; align-items: center; gap: .75rem; }
.platform-chip {
    width: 36px; height: 36px; border-radius: 10px; flex: none;
    display: grid; place-items: center; font-size: 1.05rem;
}
.platform-chip.ebay { background: var(--primary-soft); color: var(--ebay); }
.platform-chip.real { background: #e3f5ee; color: var(--real); }
.import-card .card-header .title { font-weight: 650; line-height: 1.2; }
.import-card .card-header .sub { font-weight: 400; color: var(--muted); font-size: .8rem; }

.upload-area {
    border: 2px dashed var(--line-strong);
    border-radius: var(--radius);
    padding: 2.25rem 1.5rem;
    text-align: center;
    cursor: pointer;
    background: var(--surface-2);
    transition: border-color .15s, background .15s;
}
.upload-area:hover, .upload-area:focus-visible { border-color: var(--primary); background: #f5f8ff; outline: none; }
.upload-area.dragover { border-color: var(--primary); background: var(--primary-soft); }
.upload-area i { display: inline-grid !important; place-items: center; width: 56px; height: 56px; border-radius: 16px; background: var(--surface); box-shadow: var(--shadow-sm); font-size: 1.6rem !important; margin-bottom: .9rem !important; }
.upload-area i.text-muted { color: var(--primary) !important; }
.upload-area p { font-weight: 600; margin-bottom: .25rem !important; }
.upload-area .file-selected { color: var(--success); }
.upload-area small.file-meta { color: var(--success) !important; }

/* ---------- Buchungstabelle --------------------------------------------- */
.preview-table {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
}
.booking-controls { background: var(--surface-2); border-bottom: 1px solid var(--line) !important; }
.booking-pagination { padding: .85rem 1rem; background: var(--surface-2); border-top: 1px solid var(--line); margin-top: 0 !important; gap: 1rem; flex-wrap: wrap; }
.pagination-info, .pagination-size { font-size: .875rem; }
.pagination-controls .btn-group { margin: 0 1rem; }

#bookingPreview { table-layout: fixed; margin: 0; }
#bookingPreview thead th {
    position: sticky; top: 0; z-index: 2;
    background: var(--surface-2); color: var(--muted);
    font-size: .72rem; font-weight: 650; text-transform: uppercase; letter-spacing: .05em;
    border-bottom: 1px solid var(--line); padding: .7rem .6rem;
}
#bookingPreview td { vertical-align: middle; padding: .7rem .6rem; border-color: var(--line); }
#bookingPreview tbody tr:hover > * { background: #fafbfd; }
#bookingPreview th:nth-child(1) { width: 110px; }
#bookingPreview th:nth-child(2) { width: auto; }
#bookingPreview th:nth-child(3) { width: 130px; }
#bookingPreview th:nth-child(4) { width: 110px; }
#bookingPreview th:nth-child(5) { width: 110px; }
#bookingPreview th:nth-child(6) { width: 170px; }
#bookingPreview th:nth-child(7) { width: 70px; }
.booking-description { overflow: hidden; text-overflow: ellipsis; }

code.small, .account-code {
    font-family: var(--mono); font-size: .8rem;
    background: var(--surface-2); color: var(--ink-2);
    border: 1px solid var(--line); padding: .15rem .45rem; border-radius: 6px;
}

.error-row > * { background: #fffaf0 !important; }
.error-row > td:first-child { box-shadow: inset 3px 0 0 #f59e0b; }

.editable-account {
    font-family: var(--mono); font-size: .8rem; text-align: center;
    border: 1px dashed #f59e0b; background: #fffbeb;
}
.editable-account:focus { border: 1px solid var(--success); background: var(--success-soft); box-shadow: 0 0 0 .2rem rgba(21, 128, 61, .15); }

.booking-type-editor { display: flex; gap: .35rem; align-items: center; }
.booking-type-editor select { font-size: .8rem; margin: 0 !important; }

.filter-btn.active { background: var(--primary); border-color: var(--primary); color: #fff; }

@media (max-width: 768px) {
    #bookingPreview th:nth-child(4), #bookingPreview th:nth-child(5),
    #bookingPreview td:nth-child(4), #bookingPreview td:nth-child(5) { display: none; }
    .pagination-controls { order: 3; }
}

/* ---------- Exportzeitraum & Export ------------------------------------- */
.export-bar {
    display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; justify-content: space-between;
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
    padding: 1rem 1.25rem; margin-top: 1.25rem;
}
.export-bar .hint { color: var(--muted); font-size: .875rem; }

/* ---------- Kennzahlen (Summenprüfung) ---------------------------------- */
.kpi { display: flex; align-items: center; gap: 1rem; padding: 1.1rem 1.25rem; }
.kpi-icon { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; font-size: 1.25rem; flex: none; }
.kpi-label { color: var(--muted); font-size: .8rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.kpi-value { font-size: 1.5rem; font-weight: 700; letter-spacing: -.02em; line-height: 1.2; }
.kpi-value.text-success { color: var(--success) !important; }
.kpi-value.text-warning { color: var(--warning) !important; }
.kpi-value.text-danger  { color: var(--danger) !important; }
#totalDifference { font-size: 1.5rem; font-weight: 700; letter-spacing: -.02em; line-height: 1.2; margin: 0; }
#totalDifference.text-success { color: var(--success) !important; }
#totalDifference.text-warning { color: var(--warning) !important; }
#totalDifference.text-danger  { color: var(--danger) !important; }

.accordion { --bs-accordion-border-color: var(--line); --bs-accordion-border-radius: var(--radius-sm); --bs-accordion-inner-border-radius: var(--radius-sm); }
.accordion-item { margin-bottom: .5rem; border: 1px solid var(--line) !important; border-radius: var(--radius-sm) !important; overflow: hidden; }
.accordion-button { font-size: .9rem; }
.accordion-button:not(.collapsed) { background: var(--surface-2); color: var(--ink); box-shadow: inset 0 -1px 0 var(--line); }
.accordion-button:focus { box-shadow: 0 0 0 .2rem rgba(37, 82, 208, .15); }
.gruppe-balanced   { box-shadow: inset 3px 0 0 var(--success); }
.gruppe-unbalanced { box-shadow: inset 3px 0 0 #f59e0b; }
.gruppe-error      { box-shadow: inset 3px 0 0 var(--danger); }
.monatsuebergreifend-badge { background: var(--info-soft); color: var(--info); padding: .2rem .55rem; border-radius: 999px; font-size: .72rem; font-weight: 600; margin-left: .5rem; }
.summenpruefung-table { font-size: .875rem; }
.summenpruefung-table td { padding: .45rem .5rem; }
.summe-row { font-weight: 700; background: var(--surface-2); }
.differenz-ok { color: var(--success); font-weight: 700; }
.differenz-warnung { color: var(--warning); font-weight: 700; }
.differenz-fehler { color: var(--danger); font-weight: 700; }

/* ---------- Kontierungsvorlage ------------------------------------------ */
.account-list .list-group-item { border-color: var(--line); }
.konto-row {
    display: grid; grid-template-columns: minmax(0, 1fr) 150px 82px; gap: .75rem; align-items: center;
    padding: .65rem 0; border-bottom: 1px solid var(--line);
}
.konto-row:last-of-type { border-bottom: 0; }
.konto-row .konto-label { font-weight: 600; font-size: .9rem; }
.konto-row .konto-help { color: var(--muted); font-size: .78rem; }
.konto-row input[type="text"] { font-family: var(--mono); }
.konto-row .form-switch { margin: 0; display: flex; align-items: center; gap: .4rem; padding-left: 2.5em; }
.konto-row .form-switch .form-check-label { font-size: .8rem; color: var(--muted); }
.konto-group-title { font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin: 1.25rem 0 .25rem; }
.konto-group-title:first-child { margin-top: 0; }
@media (max-width: 575.98px) {
    .konto-row { grid-template-columns: minmax(0, 1fr) 110px; }
    .konto-row .form-switch { grid-column: 2; }
}

.empty-state { text-align: center; color: var(--muted); padding: 3.5rem 1rem; }
.empty-state i { font-size: 2.2rem; display: inline-grid; place-items: center; width: 64px; height: 64px; border-radius: 18px; background: var(--surface-2); color: var(--primary); margin-bottom: 1rem; }

.pulse-success { animation: pulse-success 1s; }
@keyframes pulse-success {
    0% { box-shadow: 0 0 0 0 rgba(21, 128, 61, .5); }
    70% { box-shadow: 0 0 0 10px rgba(21, 128, 61, 0); }
    100% { box-shadow: 0 0 0 0 rgba(21, 128, 61, 0); }
}

/* ---------- Ladeanzeige & Meldungen ------------------------------------- */
.loading-overlay {
    position: fixed; inset: 0; z-index: 9999;
    background: rgba(15, 23, 42, .35); backdrop-filter: blur(3px);
    display: flex; align-items: center; justify-content: center;
}
.loading-card {
    background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow-lg);
    padding: 1.5rem 2rem; display: flex; align-items: center; gap: 1rem; font-weight: 600;
}
.loading-card .spinner-border { color: var(--primary); }

.toast-stack { position: fixed; top: 20px; right: 20px; z-index: 10000; display: grid; gap: .6rem; width: min(420px, calc(100vw - 32px)); }
.toast-stack .alert { box-shadow: var(--shadow-lg); margin: 0; display: flex; gap: .6rem; align-items: flex-start; padding-right: 3rem; }
.toast-stack .alert i { margin-top: .1rem; }

.tab-content.d-none { display: none !important; }

/* ---------- Dialog "Mein Zugang" ---------------------------------------- */
.nav-pills {
    --bs-nav-pills-link-active-bg: var(--primary);
    --bs-nav-link-color: var(--ink-2);
    --bs-nav-link-hover-color: var(--primary);
    --bs-nav-pills-border-radius: var(--radius-sm);
}
.modal-content { border: 0; border-radius: var(--radius); box-shadow: var(--shadow-lg); }
.modal-header { border-bottom: 1px solid var(--line); padding: 1rem 1.25rem; }
.modal-body { padding: 1.25rem; }

.btn-outline-danger {
    --bs-btn-color: var(--danger);
    --bs-btn-border-color: var(--line-strong);
    --bs-btn-hover-bg: var(--danger-soft);
    --bs-btn-hover-color: var(--danger);
    --bs-btn-hover-border-color: var(--danger);
    --bs-btn-active-bg: var(--danger);
    --bs-btn-active-border-color: var(--danger);
}