/* ─── CSS Variables ──────────────────────────────────────────────── */
:root,
[data-theme="light"] {
    --bg: #edf1f7;
    --surface: #ffffff;
    --surface-raised: #f4f7fc;
    --text: #0f172a;
    --text-muted: #5e7a99;
    --border: #dde5f0;
    --border-strong: #9ab0cc;

    --primary: #1a3a6b;
    --primary-hover: #112e5a;
    --primary-light: #2563a8;
    --primary-soft: rgba(26,58,107,.07);
    --primary-glow: rgba(26,58,107,.16);

    --nav-bg: #060f1e;
    --nav-text: #7295b5;
    --nav-text-active: #f1f5f9;
    --nav-active-bg: rgba(255,255,255,.07);
    --nav-border: rgba(255,255,255,.055);

    --shadow-sm: 0 1px 2px rgba(15,23,42,.04), 0 1px 5px rgba(15,23,42,.06);
    --shadow:    0 2px 4px rgba(15,23,42,.04), 0 6px 20px rgba(15,23,42,.08);
    --shadow-lg: 0 4px 8px rgba(15,23,42,.04), 0 18px 44px rgba(15,23,42,.11);
    --shadow-primary: 0 4px 18px rgba(26,58,107,.22);

    --radius: 10px;
    --radius-sm: 7px;
    --radius-lg: 14px;
    --radius-xl: 20px;
    --transition: .18s cubic-bezier(0.4, 0, 0.2, 1);
}

[data-theme="dark"] {
    --bg: #0b1018;
    --surface: #111820;
    --surface-raised: #182130;
    --text: #e2e8f0;
    --text-muted: #7a8fa8;
    --border: #1c2d40;
    --border-strong: #263d57;

    --primary: #2b72c8;
    --primary-hover: #1e5ea8;
    --primary-light: #4a8fd8;
    --primary-soft: rgba(43,114,200,.12);
    --primary-glow: rgba(43,114,200,.22);

    --nav-bg: #040b14;
    --nav-text: #6b8faa;
    --nav-text-active: #e2e8f0;
    --nav-active-bg: rgba(255,255,255,.07);
    --nav-border: rgba(255,255,255,.05);

    --shadow-sm: 0 1px 2px rgba(0,0,0,.45);
    --shadow:    0 1px 3px rgba(0,0,0,.4), 0 4px 18px rgba(0,0,0,.28);
    --shadow-lg: 0 8px 36px rgba(0,0,0,.48);
    --shadow-primary: 0 4px 18px rgba(43,114,200,.28);

    --radius: 10px;
    --radius-sm: 7px;
    --radius-lg: 14px;
    --radius-xl: 20px;
    --transition: .18s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ─── Base ───────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
    font-family: 'Outfit', system-ui, -apple-system, sans-serif;
    background: var(--bg);
    color: var(--text);
    min-height: 100dvh;
    transition: background var(--transition), color var(--transition);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ─── Grain texture overlay (hinter dem Inhalt, blockiert keine Klicks) ─ */
body::after {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: .022;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size: 200px 200px;
}

/* ─── Scroll Progress Bar ────────────────────────────────────────── */
#scroll-progress {
    position: fixed;
    top: 0; left: 0;
    height: 2px;
    width: 0%;
    background: linear-gradient(90deg, var(--primary), var(--primary-light));
    z-index: 1100;
    pointer-events: none;
    transition: width .08s linear;
}

/* ─── Layout ─────────────────────────────────────────────────────── */
.app-main { padding-bottom: 3rem; }

.app-container {
    max-width: 1200px;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

.app-content { padding-top: 2rem; }

@media (max-width: 768px) { .app-content { padding-top: 1.25rem; } }
@media (max-width: 480px) { .app-content { padding-top: 1rem; } }

/* ─── Navigation ─────────────────────────────────────────────────── */
.app-header {
    background: var(--nav-bg);
    border-bottom: 1px solid var(--nav-border);
    position: sticky;
    top: 0;
    z-index: 1030;
    transition: box-shadow .25s ease, border-color .25s ease;
}

.app-header.is-scrolled {
    box-shadow: 0 2px 24px rgba(0,0,0,.45), 0 1px 0 rgba(255,255,255,.04);
    border-bottom-color: rgba(255,255,255,.08);
}

.app-brand {
    font-weight: 700;
    font-size: .95rem;
    color: var(--nav-text-active) !important;
    letter-spacing: -.025em;
    text-decoration: none !important;
    display: flex;
    align-items: center;
    gap: .6rem;
}

.app-brand-icon {
    width: 30px;
    height: 30px;
    background: linear-gradient(135deg, var(--primary-light), var(--primary));
    color: #fff;
    border-radius: var(--radius-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .75rem;
    font-weight: 700;
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(26,58,107,.35);
}

.navbar-nav .nav-link {
    color: var(--nav-text) !important;
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .01em;
    text-transform: uppercase;
    padding: .4rem .75rem !important;
    border-radius: var(--radius-sm);
    transition: color var(--transition), background var(--transition);
    position: relative;
}

.navbar-nav .nav-link:hover {
    color: var(--nav-text-active) !important;
    background: rgba(255,255,255,.06);
}

.navbar-nav .nav-link.active {
    color: var(--nav-text-active) !important;
    background: var(--nav-active-bg);
}

.navbar-nav .nav-link.active::before {
    content: '';
    position: absolute;
    bottom: -1px;
    left: .75rem;
    right: .75rem;
    height: 2px;
    background: var(--primary-light);
    border-radius: 2px 2px 0 0;
    opacity: .7;
}

.navbar-toggler {
    border: 1px solid rgba(255,255,255,.12);
    border-radius: var(--radius-sm);
    padding: .35rem .55rem;
}

.navbar-toggler:focus { box-shadow: none; }

[data-theme="dark"] .navbar-toggler-icon,
[data-theme="light"] .navbar-toggler-icon {
    filter: invert(1) brightness(1.4);
}

/* Mobile Menüs (Offcanvas) über Cookie-Banner und anderen Layern */
.offcanvas-backdrop { z-index: 1040 !important; }
.offcanvas { z-index: 1045 !important; }

.app-nav-offcanvas,
.landing-offcanvas {
    background: var(--nav-bg);
    color: var(--nav-text);
    max-width: min(320px, 88vw);
}

.app-nav-offcanvas .offcanvas-header,
.landing-offcanvas .offcanvas-header {
    border-bottom: 1px solid rgba(255,255,255,.08);
}

.app-nav-offcanvas .offcanvas-title,
.landing-offcanvas .offcanvas-title {
    color: var(--nav-text-active);
    font-size: 1rem;
    font-weight: 700;
}

@media (max-width: 991.98px) {
    .app-nav-offcanvas .navbar-nav .nav-link,
    .landing-offcanvas-link {
        display: block;
        padding: .75rem .25rem !important;
        min-height: 44px;
        touch-action: manipulation;
    }

    .app-nav-offcanvas .dropdown-toggle {
        pointer-events: none;
    }

    .app-nav-offcanvas .dropdown-toggle::after {
        display: none;
    }

    .app-nav-offcanvas .dropdown-menu {
        display: block;
        position: static !important;
        float: none;
        border: none;
        box-shadow: none;
        background: transparent;
        padding: 0 0 .25rem .75rem;
        margin-top: 0 !important;
    }

    .app-nav-offcanvas .dropdown-item {
        padding: .6rem .5rem;
        min-height: 44px;
        touch-action: manipulation;
    }

    .app-nav-offcanvas .app-nav-actions {
        flex-direction: column;
        align-items: stretch !important;
        margin-top: 1rem;
        padding-top: 1rem;
        border-top: 1px solid rgba(255,255,255,.08);
    }

    .app-nav-offcanvas .nav-activity-panel {
        position: static !important;
        width: 100%;
        max-width: none;
        margin-top: .5rem;
    }
}

body.app-nav-open,
body.offcanvas-open {
    overflow: hidden;
}

/* ─── Dropdown ───────────────────────────────────────────────────── */
.dropdown-menu {
    background: #0a1929;
    border: 1px solid rgba(255,255,255,.09);
    border-radius: var(--radius);
    box-shadow: 0 12px 40px rgba(0,0,0,.55), 0 2px 8px rgba(0,0,0,.3);
    padding: .4rem;
    margin-top: .35rem !important;
}

.dropdown-item {
    color: var(--nav-text);
    font-size: .82rem;
    font-weight: 500;
    border-radius: 6px;
    padding: .5rem .85rem;
    transition: background var(--transition), color var(--transition);
    display: flex;
    align-items: center;
}

.dropdown-item:hover,
.dropdown-item:focus {
    background: rgba(255,255,255,.07);
    color: var(--nav-text-active);
}

[data-theme="light"] .dropdown-menu { background: #0a1929; }

/* ─── Typography ─────────────────────────────────────────────────── */
.page-title {
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: -.04em;
    margin: 0;
    line-height: 1.2;
    color: var(--text);
}

.page-subtitle {
    color: var(--text-muted);
    margin: .3rem 0 0;
    font-size: .875rem;
}

/* ─── Page Header ────────────────────────────────────────────────── */
.page-header { margin-bottom: 1.75rem; }

/* ─── Cards ──────────────────────────────────────────────────────── */
.app-card,
.card.app-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    transition: box-shadow .22s ease, border-color .22s ease, transform .22s cubic-bezier(0.34,1.56,0.64,1);
    position: relative;
}

.app-card:hover,
.card.app-card:hover {
    box-shadow: var(--shadow-lg);
    border-color: var(--border-strong);
    transform: translateY(-1px);
}

.app-card a.text-reset,
.card.app-card a.text-reset {
    color: inherit;
}

.app-card a.text-reset:hover,
.app-card a.text-reset:focus-visible,
.card.app-card a.text-reset:hover,
.card.app-card a.text-reset:focus-visible {
    color: inherit;
    text-decoration: none;
}

[data-theme="dark"] .card {
    background: var(--surface);
    border-color: var(--border);
}

[data-theme="dark"] .card-footer {
    background: transparent;
    border-color: var(--border);
}

/* ─── KPI Cards ──────────────────────────────────────────────────── */
.kpi-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 1.35rem 1.5rem;
    box-shadow: var(--shadow);
    display: flex;
    flex-direction: column;
    gap: .15rem;
    transition: box-shadow .22s ease, border-color .22s ease, transform .22s cubic-bezier(0.34,1.56,0.64,1);
    position: relative;
    overflow: hidden;
}

.kpi-card::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--primary), var(--primary-light));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .25s cubic-bezier(0.4, 0, 0.2, 1);
}

.kpi-card:hover {
    box-shadow: var(--shadow-lg);
    border-color: var(--border-strong);
    transform: translateY(-2px);
}

.kpi-card:hover::after { transform: scaleX(1); }

.kpi-icon {
    width: 38px;
    height: 38px;
    border-radius: var(--radius-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .95rem;
    flex-shrink: 0;
    margin-bottom: .75rem;
}

.kpi-label {
    font-size: .68rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: .1em;
    font-weight: 700;
}

.kpi-value {
    font-size: 2.35rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -.055em;
    color: var(--text);
    font-variant-numeric: tabular-nums;
}

.kpi-sub {
    font-size: .76rem;
    color: var(--text-muted);
    margin-top: .2rem;
}

/* ─── Buttons ────────────────────────────────────────────────────── */
.btn {
    font-family: 'Outfit', system-ui, sans-serif;
    font-weight: 600;
    border-radius: var(--radius-sm);
    font-size: .83rem;
    letter-spacing: .01em;
    transition: all .18s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn:active { transform: scale(.97) translateY(1px); }

.btn-primary {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,.12), 0 2px 8px rgba(26,58,107,.18);
}

.btn-primary:hover,
.btn-primary:focus {
    background: var(--primary-hover);
    border-color: var(--primary-hover);
    color: #fff;
    box-shadow: var(--shadow-primary);
    transform: translateY(-1px);
}

.btn-primary:active {
    transform: scale(.97) translateY(1px);
    box-shadow: none;
}

.btn-ghost {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text);
}

.btn-ghost:hover {
    background: var(--surface-raised);
    border-color: var(--border-strong);
}

.theme-toggle {
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.1);
    color: var(--nav-text);
    border-radius: var(--radius-sm);
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    font-size: .9rem;
    transition: all var(--transition);
    cursor: pointer;
}

.theme-toggle:hover {
    background: rgba(255,255,255,.12);
    border-color: rgba(255,255,255,.2);
    color: var(--nav-text-active);
    transform: rotate(12deg);
}

/* ─── Forms ──────────────────────────────────────────────────────── */
.form-control,
.form-select {
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--text);
    border-radius: var(--radius-sm);
    font-size: .875rem;
    font-family: 'Outfit', system-ui, sans-serif;
    transition: border-color .18s ease, box-shadow .18s ease;
}

.form-control:focus,
.form-select:focus {
    background: var(--surface);
    border-color: var(--primary-light);
    color: var(--text);
    box-shadow: 0 0 0 3px var(--primary-soft);
}

[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select {
    background: var(--surface-raised);
    border-color: var(--border);
    color: var(--text);
    color-scheme: dark;
}

[data-theme="dark"] .form-control:focus,
[data-theme="dark"] .form-select:focus {
    background: var(--surface-raised);
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(43,114,200,.18);
}

[data-theme="dark"] .form-control::placeholder { color: var(--text-muted); }

.form-label {
    font-size: .72rem;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: .07em;
    margin-bottom: .4rem;
}

.form-check-input {
    border-color: var(--border);
    background-color: var(--surface);
    border-radius: 3px;
}

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

[data-theme="dark"] .form-check-input { background-color: var(--surface-raised); }

.input-group-text {
    background: var(--surface-raised) !important;
    border-color: var(--border) !important;
    color: var(--text-muted) !important;
    font-family: 'Outfit', system-ui, sans-serif;
}

/* ─── Tables ─────────────────────────────────────────────────────── */
.table {
    color: var(--text);
    --bs-table-bg: transparent;
    --bs-table-hover-bg: var(--primary-soft);
    --bs-table-border-color: var(--border);
    margin-bottom: 0;
}

.table > :not(caption) > * > * {
    color: var(--text);
    border-bottom-color: var(--border);
    background-color: transparent;
    padding: .85rem 1rem;
    font-size: .875rem;
}

.table thead th {
    font-size: .67rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .09em;
    color: var(--text-muted);
    border-bottom: 1px solid var(--border) !important;
    white-space: nowrap;
}

.table-hover tbody tr {
    transition: background var(--transition);
    cursor: default;
}

.table-hover tbody tr:hover {
    background: var(--primary-soft) !important;
}

[data-theme="dark"] .table > :not(caption) > * > * {
    color: var(--text);
    border-bottom-color: var(--border);
}

/* Responsive table — card layout on mobile */
@media (max-width: 640px) {
    .table-cards thead { display: none; }

    .table-cards tbody tr {
        display: block;
        border: 1px solid var(--border);
        border-radius: var(--radius-sm);
        margin-bottom: .75rem;
        overflow: hidden;
    }

    .table-cards tbody td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: .6rem 1rem;
        border-bottom: 1px solid var(--border) !important;
    }

    .table-cards tbody td:last-child { border-bottom: none !important; }

    .table-cards tbody td[data-label]::before {
        content: attr(data-label);
        font-size: .68rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .07em;
        color: var(--text-muted);
        flex-shrink: 0;
        margin-right: 1rem;
    }
}

/* ─── Badges ─────────────────────────────────────────────────────── */
.status-badge,
.priority-badge,
.ticket-type-badge {
    font-family: 'Outfit', system-ui, sans-serif;
    font-weight: 700;
    font-size: .67rem;
    padding: .3em .7em;
    border-radius: 5px;
    letter-spacing: .04em;
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    gap: .3em;
    white-space: nowrap;
}

.ticket-type-schaden { background: #ffedd5; color: #9a3412; }
.ticket-type-frage   { background: #e0f2fe; color: #075985; }
[data-theme="dark"] .ticket-type-schaden { background: rgba(154,52,18,.28); color: #fdba74; }
[data-theme="dark"] .ticket-type-frage   { background: rgba(7,89,133,.28); color: #7dd3fc; }

/* Status — light */
.status-neu        { background: #dbeafe; color: #1e40af; }
.status-pruefung   { background: #fef3c7; color: #92400e; }
.status-rueckfrage { background: #fce7f3; color: #9d174d; }
.status-handwerker { background: #e0e7ff; color: #3730a3; }
.status-erledigt   { background: #dcfce7; color: #166534; }
.status-abgelehnt  { background: #fee2e2; color: #991b1b; }
.status-geschlossen{ background: #f3f4f6; color: #374151; }

/* Status — dark mode */
[data-theme="dark"] .status-neu        { background: rgba(30,64,175,.25);   color: #93c5fd; }
[data-theme="dark"] .status-pruefung   { background: rgba(180,130,0,.22);   color: #fcd34d; }
[data-theme="dark"] .status-rueckfrage { background: rgba(157,23,77,.22);   color: #f9a8d4; }
[data-theme="dark"] .status-handwerker { background: rgba(55,48,163,.28);   color: #a5b4fc; }
[data-theme="dark"] .status-erledigt   { background: rgba(22,101,52,.28);   color: #86efac; }
[data-theme="dark"] .status-abgelehnt  { background: rgba(153,27,27,.28);   color: #fca5a5; }
[data-theme="dark"] .status-geschlossen{ background: rgba(107,114,128,.25); color: #d1d5db; }

/* Priority — light */
.priority-niedrig  { background: #f1f5f9; color: #475569; }
.priority-normal   { background: #dbeafe; color: #1e40af; }
.priority-hoch     { background: #ffedd5; color: #c2410c; }
.priority-dringend { background: #fee2e2; color: #991b1b; }

/* Priority — dark mode */
[data-theme="dark"] .priority-niedrig  { background: rgba(71,85,105,.35);  color: #cbd5e1; }
[data-theme="dark"] .priority-normal   { background: rgba(30,64,175,.22);  color: #93c5fd; }
[data-theme="dark"] .priority-hoch     { background: rgba(194,65,12,.22);  color: #fed7aa; }
[data-theme="dark"] .priority-dringend { background: rgba(153,27,27,.28);  color: #fca5a5; }

/* ─── Alerts ─────────────────────────────────────────────────────── */
.alert {
    border-radius: var(--radius-sm);
    border: 1px solid transparent;
    font-size: .875rem;
    border-left-width: 3px;
}

[data-theme="dark"] .alert-success {
    background: rgba(22,101,52,.18);
    border-color: rgba(22,101,52,.35);
    color: #86efac;
}

[data-theme="dark"] .alert-danger {
    background: rgba(153,27,27,.18);
    border-color: rgba(153,27,27,.35);
    color: #fca5a5;
}

[data-theme="dark"] .alert-info {
    background: rgba(28,61,110,.2);
    border-color: rgba(28,61,110,.4);
    color: #93c5fd;
}

[data-theme="dark"] .alert-warning {
    background: rgba(146,64,14,.18);
    border-color: rgba(146,64,14,.35);
    color: #fcd34d;
}

[data-theme="dark"] .btn-close { filter: invert(1) brightness(1.5); }

/* ─── Comments & Timeline ────────────────────────────────────────── */
.comment-item {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    padding: .85rem;
    border-radius: var(--radius-sm);
    margin-bottom: .5rem;
    border: 1px solid var(--border);
}

.comment-item:last-child { margin-bottom: 0; }

.comment-item__icon {
    flex-shrink: 0;
    width: 2.1rem;
    height: 2.1rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    margin-top: .1rem;
}

.comment-item__body {
    flex: 1;
    min-width: 0;
}

.comment-item--email {
    background: rgba(59, 130, 246, .05);
    border-color: rgba(59, 130, 246, .18);
}

.comment-item--email .comment-item__icon {
    background: rgba(59, 130, 246, .12);
    color: #2563eb;
}

.comment-item--internal {
    background: rgba(251, 191, 36, .06);
    border-color: rgba(251, 191, 36, .22);
}

.comment-item--internal .comment-item__icon {
    background: rgba(251, 191, 36, .16);
    color: #d97706;
}

[data-theme="dark"] .comment-item--email {
    background: rgba(37, 99, 235, .1);
    border-color: rgba(96, 165, 250, .2);
}

[data-theme="dark"] .comment-item--email .comment-item__icon {
    background: rgba(37, 99, 235, .2);
    color: #93c5fd;
}

[data-theme="dark"] .comment-item--internal {
    background: rgba(180, 130, 0, .1);
    border-color: rgba(180, 130, 0, .25);
}

[data-theme="dark"] .comment-item--internal .comment-item__icon {
    background: rgba(180, 130, 0, .2);
    color: #fcd34d;
}

.timeline {
    list-style: none;
    padding: 0;
    margin: 0;
}

.timeline-item {
    padding: .6rem 0 .6rem 1.1rem;
    border-left: 2px solid var(--border);
    margin-left: .6rem;
    position: relative;
}

.timeline-item::before {
    content: '';
    position: absolute;
    left: -5px;
    top: .85rem;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--primary);
    border: 2px solid var(--bg);
}

/* ─── Auth Layout ────────────────────────────────────────────────── */
.auth-layout {
    min-height: 100dvh;
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.has-marketing-header .auth-layout {
    min-height: calc(100dvh - 4.5rem);
}

/* Decorative building SVG illustration */
.auth-aside-visual {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 280px;
    opacity: .55;
    pointer-events: none;
    z-index: 1;
}

/* Premium aside with radial gradient + dot pattern */
.auth-aside {
    background: var(--nav-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3rem 2.5rem;
    position: relative;
    overflow: hidden;
}

/* Radial glow behind content */
.auth-aside::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 70% 60% at 30% 40%, rgba(37,99,168,.18) 0%, transparent 65%),
        radial-gradient(ellipse 50% 50% at 75% 70%, rgba(26,58,107,.22) 0%, transparent 60%);
    pointer-events: none;
}

/* Subtle dot grid */
.auth-aside::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(255,255,255,.045) 1px, transparent 1px);
    background-size: 26px 26px;
    pointer-events: none;
}

.auth-aside-inner {
    position: relative;
    z-index: 2;
    max-width: 340px;
}

.auth-aside-logo {
    width: 52px;
    height: 52px;
    background: linear-gradient(135deg, var(--primary-light), var(--primary));
    color: #fff;
    border-radius: var(--radius);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    font-weight: 700;
    margin-bottom: 1.65rem;
    box-shadow: 0 4px 16px rgba(26,58,107,.4), inset 0 1px 0 rgba(255,255,255,.15);
}

.auth-aside-inner h2 {
    color: #f1f5f9;
    font-size: 1.65rem;
    font-weight: 800;
    letter-spacing: -.04em;
    line-height: 1.2;
    margin-bottom: .8rem;
}

.auth-aside-inner > p {
    color: #6b8faa;
    font-size: .9rem;
    line-height: 1.7;
    margin-bottom: 1.85rem;
}

.auth-features {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: .7rem;
}

.auth-features li {
    color: #8faec8;
    font-size: .875rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: .65rem;
}

.auth-features li i {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: rgba(43,114,200,.18);
    color: #4a8fd8;
    font-size: .72rem;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.auth-aside-more-link {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    margin-top: 1.75rem;
    padding: .55rem 1rem;
    border-radius: var(--radius);
    border: 1px solid rgba(74,143,216,.28);
    background: rgba(37,99,168,.12);
    color: #a8c8e0;
    font-size: .84rem;
    font-weight: 600;
    text-decoration: none;
    transition: background var(--transition), border-color var(--transition), color var(--transition), transform var(--transition);
}

.auth-aside-more-link:hover {
    background: rgba(37,99,168,.22);
    border-color: rgba(74,143,216,.45);
    color: #d4e8f8;
    transform: translateX(3px);
}

.auth-aside-more-link i {
    font-size: .78rem;
    transition: transform var(--transition);
}

.auth-aside-more-link:hover i {
    transform: translateX(2px);
}

.auth-main {
    background: var(--bg);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2.5rem 2rem;
}

.auth-main-inner {
    width: 100%;
    max-width: 380px;
}

.auth-main-inner h1 {
    font-size: 1.45rem;
    font-weight: 800;
    letter-spacing: -.04em;
    color: var(--text);
    margin-bottom: .3rem;
}

.auth-main-inner > .auth-subtitle {
    color: var(--text-muted);
    font-size: .875rem;
    margin-bottom: 1.75rem;
}

/* ─── Registrierung: Pakete ─────────────────────────────────────── */
.auth-layout-register .auth-main-wide {
    align-items: flex-start;
    padding-top: 2rem;
    padding-bottom: 2.5rem;
}

.auth-layout-register .auth-aside {
    align-items: flex-start;
    justify-content: center;
    padding-top: 20rem;
}

.auth-layout-register .auth-aside-visual {
    bottom: auto;
    top: 35rem;
}

.auth-main-inner-wide { max-width: 920px; }

.trial-banner {
    display: flex;
    align-items: flex-start;
    gap: .85rem;
    padding: .9rem 1.1rem;
    background: linear-gradient(135deg, var(--primary-soft), rgba(16, 185, 129, .08));
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    font-size: .82rem;
    line-height: 1.45;
}

.trial-banner-icon {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-sm);
    background: var(--primary);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: .95rem;
}

.trial-banner strong {
    display: block;
    color: var(--text);
    font-size: .9rem;
    margin-bottom: .15rem;
}

.trial-banner span { color: var(--text-muted); }

.auth-audience-notice {
    display: flex;
    gap: .875rem;
    align-items: flex-start;
    padding: 1rem 1.125rem;
    border-radius: var(--radius-lg, 12px);
    border: 1px solid var(--border-strong);
    background: var(--surface-raised);
    font-size: .875rem;
    line-height: 1.55;
}

.auth-audience-notice-content {
    flex: 1;
    min-width: 0;
}

.auth-audience-notice-lead {
    font-weight: 600;
    color: var(--text);
    margin-bottom: .35rem;
}

.auth-audience-notice-text {
    color: var(--text-muted);
    text-wrap: pretty;
}

.auth-audience-notice-icon {
    flex-shrink: 0;
    width: 2.25rem;
    height: 2.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    font-size: 1rem;
}

.auth-audience-notice--register {
    border-color: rgba(37, 99, 168, .25);
    background: rgba(37, 99, 168, .06);
}

.auth-audience-notice--register .auth-audience-notice-icon {
    background: rgba(37, 99, 168, .12);
    color: var(--primary);
}

.auth-audience-notice--login {
    border-color: rgba(16, 185, 129, .25);
    background: rgba(16, 185, 129, .06);
}

.auth-audience-notice--login .auth-audience-notice-icon {
    background: rgba(16, 185, 129, .12);
    color: #059669;
}

.auth-audience-notice--register .auth-audience-notice-lead,
.auth-audience-notice--register strong:first-child {
    display: block;
    font-weight: 600;
    color: var(--text);
    margin-bottom: .35rem;
}

.auth-audience-notice--register p {
    color: var(--text-muted);
    text-wrap: pretty;
}

.auth-main-inner-wide .auth-audience-notice {
    margin-bottom: 1.25rem;
}

.plan-section-label {
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: .75rem;
    width: 100%;
}

.billing-toggle-wrap {
    display: flex;
    justify-content: center;
    width: 100%;
}

.billing-toggle {
    display: inline-flex;
    padding: .25rem;
    background: var(--surface-2, #f1f5f9);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    gap: .25rem;
}

.billing-toggle-option {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .45rem .85rem;
    font-size: .78rem;
    font-weight: 600;
    color: var(--text-muted);
    border-radius: calc(var(--radius-lg) - 2px);
    cursor: pointer;
    transition: background var(--transition), color var(--transition), box-shadow var(--transition);
    margin: 0;
}

.billing-toggle-option.is-active {
    background: var(--surface);
    color: var(--text);
    box-shadow: var(--shadow-sm);
}

.billing-toggle-input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.billing-toggle-badge {
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: #059669;
    background: rgba(16, 185, 129, .12);
    padding: .15rem .4rem;
    border-radius: 99px;
}

.billing-hint {
    font-size: .78rem;
    font-weight: 600;
    color: #059669;
    margin: 0;
}

.billing-hint i { margin-right: .25rem; }

.plan-yearly-note {
    font-size: .68rem;
    font-weight: 600;
    color: var(--text-muted);
    margin-bottom: .15rem;
}

.plan-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: .75rem;
}

.plan-card {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 1.1rem 1rem 1rem 2.5rem;
    background: var(--surface);
    border: 2px solid var(--border);
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: border-color var(--transition), box-shadow var(--transition), background var(--transition);
    box-shadow: var(--shadow-sm);
}

.plan-card:hover {
    border-color: var(--border-strong);
    box-shadow: var(--shadow);
}

.plan-card.is-selected {
    border-color: var(--primary);
    background: var(--primary-soft);
    box-shadow: 0 0 0 3px var(--primary-soft);
}

.plan-select-mark {
    position: absolute;
    top: .85rem;
    left: .85rem;
    width: 1.2rem;
    height: 1.2rem;
    border: 2px solid var(--border-strong);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: transparent;
    background: var(--surface);
    transition: border-color var(--transition), background var(--transition), color var(--transition);
    flex-shrink: 0;
}

.plan-select-mark i {
    font-size: .72rem;
    font-weight: 800;
    line-height: 1;
}

.plan-card.is-selected .plan-select-mark {
    border-color: var(--primary);
    background: var(--primary);
    color: #fff;
}

.plan-card-input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.plan-badge {
    position: absolute;
    top: -.55rem;
    right: .75rem;
    background: var(--primary);
    color: #fff;
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    padding: .2rem .5rem;
    border-radius: 99px;
}

.plan-name {
    font-size: .95rem;
    font-weight: 800;
    letter-spacing: -.025em;
    color: var(--text);
    margin-bottom: .35rem;
}

.plan-price {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .1rem;
    margin-bottom: .15rem;
}

.plan-price-amount {
    font-size: 1.35rem;
    font-weight: 800;
    letter-spacing: -.03em;
    color: var(--text);
    white-space: nowrap;
    line-height: 1.1;
}

.plan-price-period {
    font-size: .75rem;
    color: var(--text-muted);
    font-weight: 500;
    line-height: 1.3;
}

.plan-trial-hint {
    font-size: .72rem;
    font-weight: 600;
    color: #10b981;
    margin-bottom: .5rem;
}

.plan-desc {
    font-size: .75rem;
    color: var(--text-muted);
    line-height: 1.45;
    margin: 0 0 .65rem;
}

.plan-features {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: .35rem;
}

.plan-features li {
    font-size: .72rem;
    color: var(--text-muted);
    display: flex;
    align-items: flex-start;
    gap: .4rem;
    line-height: 1.35;
}

.plan-features li i {
    color: var(--primary);
    font-weight: 700;
    flex-shrink: 0;
    margin-top: .1rem;
}

.register-form-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 1.25rem 1.25rem 1.1rem;
    box-shadow: var(--shadow-sm);
}

.register-form-title {
    font-size: .95rem;
    font-weight: 700;
    letter-spacing: -.02em;
    margin-bottom: 1rem;
    color: var(--text);
}

.register-legal a {
    color: var(--primary);
    font-weight: 600;
}

/* ─── Paket-Limits (Dashboard / Admin) ───────────────────────────── */
.plan-usage-banner {
    padding: .85rem 1rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

.plan-usage-banner--warn {
    border-color: rgba(245, 158, 11, .45);
    background: linear-gradient(135deg, rgba(245, 158, 11, .06), var(--surface));
}

.plan-usage-banner--link {
    display: block;
    text-decoration: none;
    color: inherit;
    transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
}

.plan-usage-banner--link:hover,
.plan-usage-banner--link:focus-visible {
    border-color: rgba(59, 130, 246, .35);
    box-shadow: var(--shadow-md);
    color: inherit;
}

.plan-usage-manage {
    display: inline-flex;
    align-items: center;
    margin-top: .55rem;
    font-weight: 600;
    color: var(--primary);
}

.plan-usage-banner-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem .75rem;
    margin-bottom: .45rem;
}

.plan-usage-badge {
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--primary);
    background: var(--primary-soft);
    padding: .2rem .55rem;
    border-radius: 99px;
}

.plan-usage-trial {
    font-size: .78rem;
    font-weight: 600;
    color: #10b981;
}

.plan-usage-stats {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem 1.25rem;
    font-size: .82rem;
    color: var(--text-muted);
    font-weight: 500;
}

.plan-usage-warn {
    color: #b45309;
    font-weight: 600;
}

/* Fallback for old auth-body usage */
.auth-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100dvh;
    background: var(--bg);
    padding: 1.5rem 1rem;
}

.auth-wrapper { width: 100%; max-width: 400px; }

.auth-card {
    background: var(--surface);
    border-radius: var(--radius-lg);
    padding: 2.5rem 2rem;
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--border);
    width: 100%;
}

[data-theme="light"] .auth-card {
    box-shadow: 0 4px 6px rgba(0,0,0,.04), 0 20px 50px rgba(15,23,42,.1);
}

.auth-brand { text-align: center; }

.auth-logo {
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, var(--primary-light), var(--primary));
    color: #fff;
    border-radius: var(--radius);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 1.1rem;
    margin-bottom: .85rem;
    box-shadow: 0 4px 14px rgba(26,58,107,.32);
}

/* ─── User badge (nav) ───────────────────────────────────────────── */
.user-badge {
    font-size: .78rem;
    font-weight: 600;
    color: var(--nav-text);
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.app-header .btn-outline-secondary {
    color: var(--nav-text);
    border-color: rgba(255,255,255,.14);
    font-size: .78rem;
}

.app-header .btn-outline-secondary:hover {
    background: rgba(255,255,255,.08);
    border-color: rgba(255,255,255,.22);
    color: var(--nav-text-active);
}

/* ─── Legal Pages ────────────────────────────────────────────────── */
.legal-body { min-height: 100dvh; display: flex; flex-direction: column; }
.legal-header { background: var(--surface); border-bottom: 1px solid var(--border); }
.legal-container { max-width: 760px; padding-bottom: 2rem; }
.legal-page .page-title { margin-bottom: .5rem; }
.legal-section { margin-top: 2rem; }
.legal-section h2 { font-size: 1.1rem; font-weight: 700; margin-bottom: .75rem; }
.legal-section h3 { margin-top: 1rem; font-size: .95rem; font-weight: 600; }
.legal-table { font-size: .875rem; }
.legal-footer {
    margin-top: auto;
    border-top: 1px solid var(--border);
    background: var(--surface);
    font-size: .8rem;
    color: var(--text-muted);
}
.legal-footer-inner { max-width: 1200px; margin: 0 auto; padding: .75rem 1.5rem; }
.legal-footer-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    align-content: flex-start;
    justify-content: flex-start;
    gap: .35rem 1rem;
    width: 100%;
    margin: 0;
}
.legal-footer-copy {
    white-space: nowrap;
    flex-shrink: 0;
    line-height: 1.5;
}
.legal-footer-row a {
    color: var(--text-muted);
    text-decoration: none;
    white-space: nowrap;
    line-height: 1.5;
    transition: color var(--transition);
}
.legal-footer-row a:hover { color: var(--primary); }

.auth-main .legal-footer,
.auth-body .legal-footer {
    border-top: 1px solid var(--border);
    border-bottom: none;
    background: transparent;
    margin-top: 1.5rem;
    margin-bottom: 0;
    padding: 0;
    width: 100%;
    font-size: .72rem;
}
.auth-main .legal-footer-inner,
.auth-body .legal-footer-inner { max-width: none; margin: 0; padding: .85rem 0 0; width: 100%; }
.legal-footer--compact { font-size: .68rem; letter-spacing: -.01em; }

/* ─── Aktivitätsprotokoll ─────────────────────────────────────────── */
.activity-log-table td { vertical-align: top; }
.activity-log-details { max-width: 28rem; word-break: break-word; }
.activity-badge {
    font-weight: 600;
    font-size: .72rem;
    background: var(--primary-soft);
    color: var(--primary);
}
.font-monospace { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; }

/* ─── Activity list ──────────────────────────────────────────────── */
.activity-list li:last-child { border-bottom: none !important; }

/* ─── Empty States ───────────────────────────────────────────────── */
.empty-state {
    padding: 2.5rem 1.5rem;
    text-align: center;
    color: var(--text-muted);
}

.empty-state-icon {
    width: 48px;
    height: 48px;
    background: var(--surface-raised);
    color: var(--text-muted);
    border-radius: var(--radius-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    margin: 0 auto 1rem;
    border: 1px solid var(--border);
}

/* ─── Misc helpers ───────────────────────────────────────────────── */
.text-muted { color: var(--text-muted) !important; }

.badge.bg-secondary {
    background: var(--surface-raised) !important;
    color: var(--text-muted) !important;
    border: 1px solid var(--border);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .03em;
}
.badge.bg-success  { background: #dcfce7 !important; color: #166534 !important; }
.badge.bg-light    { background: var(--surface-raised) !important; color: var(--text-muted) !important; border: 1px solid var(--border); }

[data-theme="dark"] .badge.bg-success { background: rgba(22,101,52,.3) !important; color: #86efac !important; }

/* ─── Outline buttons dark mode ──────────────────────────────────── */
[data-theme="dark"] .btn-outline-primary {
    color: var(--primary-light);
    border-color: var(--primary);
}
[data-theme="dark"] .btn-outline-primary:hover {
    background: var(--primary);
    color: #fff;
}
[data-theme="dark"] .btn-outline-secondary {
    color: var(--text-muted);
    border-color: var(--border);
}
[data-theme="dark"] .btn-outline-secondary:hover {
    background: var(--surface-raised);
    color: var(--text);
    border-color: var(--border);
}
[data-theme="dark"] .btn-outline-danger {
    color: #fca5a5;
    border-color: rgba(153,27,27,.55);
}
[data-theme="dark"] .btn-outline-danger:hover {
    background: rgba(153,27,27,.25);
    color: #fca5a5;
    border-color: rgba(153,27,27,.55);
}

/* ─── List group dark mode ───────────────────────────────────────── */
[data-theme="dark"] .list-group-item {
    background: var(--surface);
    border-color: var(--border);
    color: var(--text);
}

/* ─── Chart canvas ───────────────────────────────────────────────── */
.chart-wrap { position: relative; height: 220px; }
.chart-wrap canvas { max-width: 100%; }

/* ─── Card title ─────────────────────────────────────────────────── */
.card-title { font-weight: 700; letter-spacing: -.02em; font-size: .95rem; }

/* ─── Divider dark mode ──────────────────────────────────────────── */
[data-theme="dark"] .dropdown-divider { border-color: rgba(255,255,255,.07); }

/* ─── Attachments ────────────────────────────────────────────────── */
.attachment-list .attachment-item:last-child {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
    border-bottom: none !important;
}
.attachment-thumb-grid { display: flex; flex-wrap: wrap; gap: .65rem; }
.attachment-thumb {
    display: block;
    width: 96px; height: 96px;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: var(--surface-raised);
    cursor: zoom-in;
    transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.attachment-thumb:hover {
    transform: translateY(-2px);
    border-color: var(--primary-light);
    box-shadow: 0 4px 16px rgba(26,58,107,.15);
}
.attachment-thumb:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.attachment-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.attachment-lightbox .modal-content { background: var(--surface); border-color: var(--border); }
.attachment-lightbox-img {
    display: block; max-width: 100%; max-height: min(78vh, 900px);
    width: auto; height: auto; margin: 0 auto; object-fit: contain; border-radius: var(--radius-sm);
}
.attachment-preview-pdf {
    display: block; width: 100%; height: min(420px, 70vh); background: var(--surface-raised);
}

/* ─── Ripple animation ───────────────────────────────────────────── */
@keyframes rippleOut { to { transform: scale(40); opacity: 0; } }

/* ─── Responsive ─────────────────────────────────────────────────── */

@media (max-width: 1024px) {
    .app-container { max-width: 100%; }
}

/* Auth split — collapse aside below 900px */
@media (max-width: 900px) {
    .auth-layout { grid-template-columns: 1fr; }
    .auth-aside  { display: none; }
    .auth-main   {
        padding: 2.5rem 1.5rem;
        min-height: 100dvh;
        align-items: flex-start;
        padding-top: 3rem;
    }
    .auth-main-inner { max-width: 100%; }
    .auth-main-inner-wide { max-width: 100%; }
    .plan-cards { grid-template-columns: 1fr; }
}

@media (max-width: 1100px) and (min-width: 901px) {
    .plan-cards { grid-template-columns: 1fr; }
    .plan-card { padding: 1rem 1.1rem; }
}

@media (max-width: 768px) {
    .page-title  { font-size: 1.25rem; }
    .kpi-value   { font-size: 1.75rem; }

    .app-container { padding-left: 1rem; padding-right: 1rem; }
    .app-main { padding-bottom: 2rem; }

    .page-header { margin-bottom: 1.25rem; }
    .page-header.d-flex { flex-direction: column; align-items: flex-start !important; gap: .75rem !important; }
    .page-header .btn   { align-self: flex-start; }

    .card-body { padding: 1rem !important; }
    .card-body.p-4 { padding: 1rem !important; }
    .kpi-card { padding: 1rem 1.1rem; }

    .form-control,
    .form-select,
    .input-group-text { min-height: 44px; }

    .btn { min-height: 40px; padding-top: .45rem; padding-bottom: .45rem; }
    .btn-sm { min-height: 36px; }

    .auth-card { padding: 1.75rem 1.25rem; }

    .chart-wrap { height: 180px; }

    .d-flex.gap-2.align-items-center.flex-wrap { gap: .5rem !important; }

    .table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .table > :not(caption) > * > * { padding: .6rem .75rem; font-size: .82rem; }
    .table thead th { font-size: .64rem; }

    .card-body .d-flex.justify-content-between { flex-wrap: wrap; gap: .5rem; }

    .timeline-item { padding-left: .85rem; }

    .status-badge, .priority-badge { font-size: .63rem; padding: .25em .55em; }

    .legal-footer-inner { padding: .6rem 1rem; }
    .legal-footer-row { gap: .3rem .75rem; }
}

@media (max-width: 640px) {
    .attachment-thumb { width: 80px; height: 80px; }
    .page-header .btn-primary { width: 100%; justify-content: center; }
    .row.g-3 { --bs-gutter-y: .6rem; }
    .row.g-4 { --bs-gutter-y: .75rem; }
}

@media (max-width: 480px) {
    .page-title { font-size: 1.1rem; }
    .kpi-value  { font-size: 1.5rem; }
    .kpi-card   { padding: .9rem 1rem; }
    .kpi-icon   { width: 32px; height: 32px; font-size: .85rem; margin-bottom: .5rem; }

    .auth-main  { padding: 1.5rem 1rem; }

    .d-flex.gap-2 > .btn { flex: 1 1 auto; }

    .card-body { padding: .85rem !important; }

    .mb-4 { margin-bottom: 1rem !important; }
    .mb-3 { margin-bottom: .75rem !important; }
    .row.g-4 { --bs-gutter-y: .6rem; }

    .table > :not(caption) > * > * { padding: .5rem .6rem; font-size: .8rem; }
}

@media (max-width: 375px) {
    .app-container { padding-left: .75rem; padding-right: .75rem; }
    .navbar > .app-container { padding-left: .75rem; padding-right: .75rem; }
    .page-title { font-size: 1rem; }
    .kpi-value  { font-size: 1.35rem; }
    .auth-main  { padding: 1.25rem .75rem; }
    .card-body  { padding: .75rem !important; }
}

/* ─── Activity Dropdown (Navbar) ────────────────────────────────── */
.nav-activity-btn {
    position: relative;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: var(--radius-sm);
    color: var(--nav-text);
    font-size: .9rem;
    cursor: pointer;
    transition: background var(--transition), border-color var(--transition), color var(--transition);
    padding: 0;
}

.nav-activity-btn:hover {
    background: rgba(255,255,255,.12);
    border-color: rgba(255,255,255,.2);
    color: var(--nav-text-active);
}

.nav-activity-dot {
    position: absolute;
    top: 5px;
    right: 5px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--primary-light);
    border: 1px solid var(--nav-bg);
}

.nav-activity-panel {
    width: 340px;
    padding: 0;
    background: #0a1929;
    border: 1px solid rgba(255,255,255,.09);
    border-radius: var(--radius-lg);
    box-shadow: 0 12px 40px rgba(0,0,0,.55), 0 2px 8px rgba(0,0,0,.3);
    overflow: hidden;
}

.nav-activity-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .75rem 1rem;
    border-bottom: 1px solid rgba(255,255,255,.07);
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: #6b8faa;
}

.nav-activity-header a {
    color: var(--primary-light);
    text-decoration: none;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    transition: color var(--transition);
}

.nav-activity-header a:hover { color: #fff; }

.nav-activity-list {
    list-style: none;
    padding: .35rem 0;
    margin: 0;
    max-height: 320px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,.1) transparent;
}

.nav-activity-item {
    display: flex;
    align-items: flex-start;
    gap: .65rem;
    padding: .55rem 1rem;
    transition: background var(--transition);
}

.nav-activity-item--link {
    padding: 0;
}

.nav-activity-link {
    display: flex;
    align-items: flex-start;
    gap: .65rem;
    width: 100%;
    padding: .55rem 1rem;
    color: inherit;
    text-decoration: none;
    cursor: pointer;
    transition: background var(--transition);
}

.nav-activity-item:hover,
.nav-activity-link:hover,
.nav-activity-link:focus-visible {
    background: rgba(255,255,255,.04);
    color: inherit;
}

.nav-activity-icon {
    width: 28px;
    height: 28px;
    border-radius: 7px;
    background: rgba(43,114,200,.15);
    color: var(--primary-light);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .75rem;
    flex-shrink: 0;
    margin-top: .05rem;
}

.nav-activity-body { flex: 1; min-width: 0; }

.nav-activity-label {
    font-size: .8rem;
    font-weight: 600;
    color: #cdd9e8;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.nav-activity-detail { color: #6b8faa; font-weight: 400; }

.nav-activity-meta {
    display: flex;
    align-items: center;
    gap: .3rem;
    font-size: .72rem;
    color: #4a6880;
    margin-top: .15rem;
}

.nav-activity-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .5rem;
    padding: 2rem 1rem;
    color: #4a6880;
    font-size: .82rem;
}

.nav-activity-empty i { font-size: 1.4rem; }

@media (max-width: 991.98px) {
    .nav-activity-panel {
        width: min(340px, calc(100vw - 2rem));
        right: 0 !important;
        left: auto !important;
    }
}

/* ─── Lease totals ───────────────────────────────────────────────── */
.lease-total-item {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: .5rem 1rem;
    box-shadow: var(--shadow);
}

.lease-total-label {
    font-size: .75rem;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: .04em;
}

.lease-total-value {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--text);
    font-variant-numeric: tabular-nums;
}

/* ─── Mietentwicklung (Homeday-Vergleich) ─────────────────────────── */
.market-rent-table {
    table-layout: auto;
    width: 100%;
    min-width: 56rem;
}

/* Einheit + Zahlen: nur so breit wie nötig; Mieter füllt den Rest */
.market-rent-col-num,
.market-rent-col-potential { width: 1%; }

.market-rent-panel .market-rent-col-unit {
    width: var(--market-rent-unit-width, auto);
}

.market-rent-table th.market-rent-unit,
.market-rent-table td.market-rent-unit {
    white-space: nowrap;
    width: var(--market-rent-unit-width, auto);
}

.market-rent-table th.market-rent-num,
.market-rent-table td.market-rent-num {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    width: 1%;
    word-break: normal;
    overflow-wrap: normal;
}

.market-rent-table thead th.market-rent-num {
    white-space: nowrap;
}

.market-rent-table thead th {
    vertical-align: bottom;
    font-weight: 600;
}

.market-rent-table th.market-rent-unit,
.market-rent-table td.market-rent-unit,
.market-rent-table th.market-rent-tenant,
.market-rent-table td.market-rent-tenant {
    vertical-align: top;
}

.market-rent-property-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .45rem .65rem;
}

.market-rent-data-meta {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: .35rem .65rem;
    width: 100%;
}

.market-rent-property-block + .market-rent-property-block {
    margin-top: 1.25rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--border);
}

.market-rent-unit .badge {
    margin-left: .35rem;
    vertical-align: middle;
}

.market-rent-tenant {
    overflow-wrap: break-word;
    width: auto;
}

.market-rent-tenant-label {
    display: block;
    line-height: 1.4;
}

.market-rent-panel a:hover {
    text-decoration: underline !important;
}

.market-rent-history-wrap {
    margin-top: .75rem;
}

.market-rent-history-toggle.btn-outline-secondary {
    color: var(--text);
    border-color: var(--border);
    background: var(--surface-raised);
}

.market-rent-history-toggle.btn-outline-secondary:hover,
.market-rent-history-toggle.btn-outline-secondary:focus,
.market-rent-history-toggle.btn-outline-secondary:focus-visible,
.market-rent-history-toggle.btn-outline-secondary:active {
    color: var(--text);
    background: var(--surface-raised);
    border-color: var(--border);
    box-shadow: none;
}

.market-rent-history-toggle.btn-outline-secondary:hover .text-muted,
.market-rent-history-toggle.btn-outline-secondary:focus .text-muted,
.market-rent-history-toggle.btn-outline-secondary:focus-visible .text-muted {
    color: var(--text-muted);
}

.market-rent-history-chevron {
    transition: transform .2s ease;
    flex-shrink: 0;
}

.market-rent-history-toggle[aria-expanded="true"] .market-rent-history-chevron {
    transform: rotate(90deg);
}

.market-rent-history-panel {
    border-top: 1px dashed var(--border);
    margin-top: .75rem;
    padding-top: .25rem;
}

.market-rent-history-chart {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(3.5rem, 1fr));
    gap: .65rem;
    align-items: end;
    min-height: 8.5rem;
    padding: .35rem .15rem 0;
}

.market-rent-history-bar-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .35rem;
    min-width: 0;
}

.market-rent-history-value {
    font-size: .72rem;
    font-weight: 600;
    color: var(--text);
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
}

.market-rent-history-bar-track {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    width: 100%;
    height: 5.5rem;
}

.market-rent-history-bar {
    width: min(2.4rem, 72%);
    min-height: .35rem;
    border-radius: .35rem .35rem .15rem .15rem;
    background: linear-gradient(180deg, rgba(var(--bs-info-rgb), .92), rgba(var(--bs-info-rgb), .55));
}

.market-rent-history-label {
    font-size: .68rem;
    color: var(--text-muted);
    text-align: center;
    line-height: 1.2;
    white-space: nowrap;
}

/* ─── Cookie Banner ──────────────────────────────────────────────── */
.cookie-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1035;
    background: var(--surface);
    border-top: 1px solid var(--border);
    box-shadow: 0 -4px 24px rgba(0,0,0,.10);
    padding: 1.25rem 1.5rem;
}

.cookie-banner-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: flex-start;
    gap: 2rem;
}

.cookie-banner-body { flex: 1; min-width: 0; }

.cookie-banner-title {
    font-weight: 700;
    font-size: .95rem;
    color: var(--text);
    margin: 0 0 .4rem;
    display: flex;
    align-items: center;
}

.cookie-banner-text {
    font-size: .84rem;
    color: var(--text-muted);
    margin: 0 0 .6rem;
    line-height: 1.55;
}

.cookie-banner-link {
    color: var(--primary-light);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.cookie-banner-link:hover { color: var(--primary); }

.cookie-banner-details-toggle {
    background: none;
    border: none;
    padding: 0;
    font-size: .82rem;
    color: var(--text-muted);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    font-family: inherit;
    transition: color var(--transition);
}
.cookie-banner-details-toggle:hover { color: var(--text); }

.cookie-banner-details {
    margin-top: .85rem;
    display: flex;
    flex-direction: column;
    gap: .75rem;
}

.cookie-category {
    background: var(--surface-raised);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: .75rem 1rem;
}

.cookie-category-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    margin-bottom: .3rem;
}

.cookie-category-name {
    font-weight: 600;
    font-size: .85rem;
    color: var(--text);
}

.cookie-category-badge--always {
    font-size: .72rem;
    font-weight: 600;
    color: #15803d;
    background: rgba(21,128,61,.1);
    border-radius: 4px;
    padding: .1rem .45rem;
    white-space: nowrap;
}

[data-theme="dark"] .cookie-category-badge--always {
    color: #4ade80;
    background: rgba(74,222,128,.1);
}

.cookie-category-desc {
    font-size: .79rem;
    color: var(--text-muted);
    margin: 0;
    line-height: 1.5;
}

/* Toggle switch */
.cookie-toggle { position: relative; display: inline-block; cursor: pointer; }
.cookie-toggle input { opacity: 0; width: 0; height: 0; position: absolute; }
.cookie-toggle-track {
    display: block;
    width: 36px; height: 20px;
    border-radius: 10px;
    background: var(--border-strong);
    transition: background var(--transition);
    position: relative;
}
.cookie-toggle-track::after {
    content: '';
    position: absolute;
    top: 2px; left: 2px;
    width: 16px; height: 16px;
    border-radius: 50%;
    background: #fff;
    transition: transform var(--transition);
    box-shadow: 0 1px 3px rgba(0,0,0,.25);
}
.cookie-toggle input:checked + .cookie-toggle-track { background: var(--primary-light); }
.cookie-toggle input:checked + .cookie-toggle-track::after { transform: translateX(16px); }
.cookie-toggle input:focus-visible + .cookie-toggle-track {
    outline: 2px solid var(--primary-light);
    outline-offset: 2px;
}

/* Action buttons */
.cookie-banner-actions {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    flex-shrink: 0;
    min-width: 180px;
    align-self: center;
}

.cookie-btn-accept {
    background: var(--primary);
    color: #fff;
    border: 1px solid var(--primary);
    font-size: .85rem;
    padding: .45rem 1rem;
    border-radius: var(--radius-sm);
    font-weight: 600;
    transition: background var(--transition), border-color var(--transition);
    text-align: center;
    white-space: nowrap;
}
.cookie-btn-accept:hover { background: var(--primary-hover); border-color: var(--primary-hover); color: #fff; }

.cookie-btn-reject {
    background: transparent;
    color: var(--text-muted);
    border: 1px solid var(--border);
    font-size: .85rem;
    padding: .45rem 1rem;
    border-radius: var(--radius-sm);
    font-weight: 500;
    transition: border-color var(--transition), color var(--transition), background var(--transition);
    text-align: center;
    white-space: nowrap;
}
.cookie-btn-reject:hover { border-color: var(--border-strong); color: var(--text); background: var(--surface-raised); }

.cookie-btn-selection {
    background: transparent;
    color: var(--primary-light);
    border: 1px solid var(--primary-light);
    font-size: .85rem;
    padding: .45rem 1rem;
    border-radius: var(--radius-sm);
    font-weight: 600;
    transition: background var(--transition), color var(--transition);
    text-align: center;
    white-space: nowrap;
}
.cookie-btn-selection:hover { background: var(--primary-soft); color: var(--primary); }

/* ─── Admin form sections ─────────────────────────────────────────── */
.admin-form-section-head {
    display: flex;
    align-items: flex-start;
    gap: .875rem;
    margin-bottom: .25rem;
}

.admin-form-section-icon {
    width: 42px;
    height: 42px;
    border-radius: var(--radius-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 1.1rem;
    background: rgba(99, 102, 241, 0.1);
    color: #6366f1;
}

.admin-form-section-icon--accent {
    background: rgba(16, 185, 129, 0.1);
    color: #10b981;
}

.admin-form-section-title {
    font-size: 1rem;
    font-weight: 700;
    margin: 0 0 .15rem;
    line-height: 1.3;
}

.admin-form-section-desc {
    font-size: .8125rem;
    color: var(--text-muted);
    margin: 0;
    line-height: 1.45;
}

.mandant-form-sidebar {
    position: sticky;
    top: 1rem;
}

.mandant-form-meta li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .65rem 0;
    border-bottom: 1px solid var(--border);
    font-size: .875rem;
}

.mandant-form-meta li:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.mandant-form-meta-label {
    color: var(--text-muted);
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    font-weight: 600;
}

/* ─── Benutzerliste: Gruppierung nach Rolle ─────────────────────── */
.user-groups-table .user-group + .user-group .user-group__head td {
    border-top: 2px solid var(--border);
}

.user-group__head td {
    background: var(--surface-2, rgba(0, 0, 0, .03));
    padding: .55rem 1rem;
    border-bottom: 1px solid var(--border);
}

.user-group__title {
    font-size: .75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--text-muted);
}

.user-group__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.35rem;
    height: 1.35rem;
    margin-left: .45rem;
    padding: 0 .35rem;
    border-radius: 999px;
    background: var(--border);
    font-size: .7rem;
    font-weight: 600;
    color: var(--text-muted);
    vertical-align: middle;
}

.user-group-mobile__head {
    display: flex;
    align-items: center;
    gap: .45rem;
    margin-bottom: .75rem;
    padding-bottom: .5rem;
    border-bottom: 1px solid var(--border);
}

[data-theme="dark"] .user-group__head td {
    background: rgba(255, 255, 255, .04);
}

/* ─── Rechtematrix ───────────────────────────────────────────────── */
.permissions-group-head {
    background: var(--surface-2, rgba(0, 0, 0, .03));
    border-bottom: 1px solid var(--border);
}

.permissions-matrix th,
.permissions-matrix td {
    vertical-align: middle;
}

.permissions-matrix__role {
    width: 7.5rem;
    white-space: nowrap;
}

.permissions-matrix tbody tr:last-child td {
    border-bottom: 0;
}

[data-theme="dark"] .permissions-group-head {
    background: rgba(255, 255, 255, .04);
}

.permissions-save-status {
    border-radius: .5rem;
    padding: .5rem .75rem;
    font-size: .875rem;
}

.permissions-save-status--saving {
    background: rgba(var(--bs-primary-rgb), .1);
    color: var(--bs-primary);
}

.permissions-save-status--success {
    background: rgba(var(--bs-success-rgb), .12);
    color: var(--bs-success);
}

.permissions-save-status--error {
    background: rgba(var(--bs-danger-rgb), .12);
    color: var(--bs-danger);
}

.permissions-matrix__cell.is-saving .form-check-input {
    opacity: .45;
    pointer-events: none;
}

.permissions-matrix__cell.is-saved .form-check-input {
    box-shadow: 0 0 0 .2rem rgba(var(--bs-success-rgb), .35);
}

.permissions-matrix--readonly .form-check-input:disabled {
    opacity: 1;
    cursor: default;
}

.property-card-tabs {
    border-bottom: 1px solid var(--bs-border-color);
    gap: 0;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
}

.property-card-tabs::-webkit-scrollbar {
    display: none;
}

.property-card-tabs .nav-link {
    padding: .35rem .45rem;
    font-size: .74rem;
    font-weight: 600;
    color: var(--bs-secondary-color);
    border: none;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    white-space: nowrap;
}

.property-card-tabs .nav-link:hover {
    color: var(--bs-body-color);
    border-color: transparent;
}

.property-card-tabs .nav-link.active {
    color: var(--bs-primary);
    background: transparent;
    border-color: transparent transparent var(--bs-primary);
}

.property-card {
    --property-card-row-height: 2.35rem;
    --property-card-tab-max-rows: 7;
    --property-card-tab-body-height: calc(var(--property-card-tab-max-rows) * var(--property-card-row-height));
}

.property-card .card-body {
    display: flex;
    flex-direction: column;
}

.property-card-tab-content {
    flex: 0 0 auto;
    height: calc(var(--property-card-tab-body-height) + .5rem);
}

.property-card-tab-content > .tab-pane {
    height: var(--property-card-tab-body-height);
    min-height: var(--property-card-tab-body-height);
    max-height: var(--property-card-tab-body-height);
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-gutter: stable;
    scrollbar-width: thin;
    scrollbar-color: rgba(var(--bs-secondary-rgb), .35) transparent;
}

.property-card-tab-content > .tab-pane::-webkit-scrollbar {
    width: 5px;
}

.property-card-tab-content > .tab-pane::-webkit-scrollbar-thumb {
    background: rgba(var(--bs-secondary-rgb), .35);
    border-radius: 999px;
}

.property-card-list li {
    min-height: var(--property-card-row-height);
}

.property-card-list li:last-child {
    border-bottom: none !important;
}

.property-card-section-label {
    font-size: .68rem;
    letter-spacing: .06em;
}

.property-card-dl dt,
.property-card-dl dd {
    padding-top: .15rem;
    padding-bottom: .15rem;
}

.property-card .card-footer {
    align-items: flex-start;
}

.property-card .card-footer .btn {
    flex-shrink: 0;
}

.sale-price-card-link {
    color: var(--primary-light, #2563eb);
    font-weight: 600;
    line-height: 1.35;
    min-width: 0;
    flex: 1 1 0;
    text-align: right;
    overflow-wrap: break-word;
}

.sale-price-card-link:hover {
    color: var(--primary, #1a3a6b);
}

.sale-price-page {
    --sale-price-factor-pct: 32%;
}

.sale-price-object-banner {
    border-left: 3px solid var(--primary-light, #2563eb);
}

.sale-price-object-icon {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-sm, .5rem);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(37, 99, 235, .12), rgba(37, 99, 235, .04));
    color: var(--primary-light, #2563eb);
    font-size: 1.15rem;
    flex-shrink: 0;
}

.sale-price-rent-input .input-group-text {
    background: var(--surface-muted, #f8fafc);
    border-color: var(--border, rgba(0, 0, 0, .08));
}

.sale-price-rent-input .form-control {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    letter-spacing: -.01em;
}

.sale-price-factor-block {
    padding: 1.15rem 1.25rem;
    border-radius: var(--radius-lg, .75rem);
    background: var(--surface-muted, rgba(248, 250, 252, .85));
    border: 1px solid var(--border, rgba(0, 0, 0, .08));
}

.sale-price-factor-badge {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 4.75rem;
    padding: .45rem .85rem;
    border-radius: var(--radius-md, .65rem);
    background: linear-gradient(145deg, var(--primary, #1a3a6b), var(--primary-light, #2563eb));
    color: #fff;
    box-shadow: 0 4px 14px rgba(26, 58, 107, .22);
}

.sale-price-factor-badge-label {
    font-size: .58rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .12em;
    opacity: .82;
}

.sale-price-factor-badge-value {
    font-size: 1.35rem;
    font-weight: 800;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}

.sale-price-factor-track {
    position: relative;
    padding: .35rem 0;
}

.sale-price-factor-track::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    height: 6px;
    border-radius: 999px;
    background: var(--border, rgba(0, 0, 0, .1));
    pointer-events: none;
}

.sale-price-factor-track::after {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: var(--sale-price-factor-pct, 32%);
    height: 6px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--primary-light, #2563eb), var(--primary, #1a3a6b));
    pointer-events: none;
    transition: width .12s ease-out;
}

.sale-price-factor-range {
    position: relative;
    z-index: 1;
    height: 1.4rem;
    margin: 0;
    cursor: pointer;
}

.sale-price-factor-range::-webkit-slider-runnable-track {
    height: 6px;
    background: transparent;
}

.sale-price-factor-range::-webkit-slider-thumb {
    margin-top: -7px;
    width: 20px;
    height: 20px;
    border: 2px solid #fff;
    box-shadow: 0 2px 8px rgba(26, 58, 107, .28);
}

.sale-price-factor-presets {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
}

.sale-price-preset-btn {
    min-width: 2.75rem;
    border-radius: 999px;
    border-color: var(--border, rgba(0, 0, 0, .12));
    color: var(--text-muted, #64748b);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.sale-price-preset-btn:hover,
.sale-price-preset-btn.is-active {
    background: var(--primary, #1a3a6b);
    border-color: var(--primary, #1a3a6b);
    color: #fff;
}

.card.sale-price-result-panel,
.sale-price-result-panel {
    overflow: hidden;
    background: linear-gradient(160deg, var(--primary, #1a3a6b) 0%, #0f2744 55%, #091a30 100%);
    border: none;
    box-shadow: 0 18px 40px rgba(15, 39, 68, .28);
    color: #fff;
}

.sale-price-result-panel .card-body {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.sale-price-result-panel .sale-price-annual-kpi {
    margin-top: auto;
}

.sale-price-result-panel .section-eyebrow--light {
    color: rgba(255, 255, 255, .55);
}

.sale-price-result-panel .section-eyebrow--light::after {
    background: rgba(255, 255, 255, .15);
}

.sale-price-result-panel .kpi-label {
    color: rgba(255, 255, 255, .62);
}

.sale-price-result-value {
    font-size: clamp(2rem, 5vw, 2.65rem);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -.04em;
    color: #fff;
    font-variant-numeric: tabular-nums;
    margin-top: .15rem;
}

.sale-price-result-hint {
    min-height: 1.25rem;
    font-size: .8rem;
    color: rgba(255, 255, 255, .58);
    margin-top: .35rem;
}

.sale-price-formula-flow {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    gap: .35rem;
    padding: .85rem .65rem;
    border-radius: var(--radius-md, .65rem);
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(255, 255, 255, .1);
}

.sale-price-formula-step {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: .2rem;
}

.sale-price-formula-step-label {
    font-size: .58rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: rgba(255, 255, 255, .48);
}

.sale-price-formula-step-value {
    font-size: .92rem;
    font-weight: 700;
    color: #fff;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.sale-price-formula-op {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: center;
    width: 1.25rem;
    flex-shrink: 0;
    font-size: .85rem;
    font-weight: 700;
    color: rgba(255, 255, 255, .35);
}

.sale-price-annual-kpi {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .85rem 1rem;
    border-radius: var(--radius-md, .65rem);
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .08);
    color: #fff;
}

.sale-price-annual-kpi-icon {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-sm, .5rem);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, .1);
    color: rgba(255, 255, 255, .85);
    flex-shrink: 0;
}

.sale-price-annual-kpi .small.text-muted {
    color: rgba(255, 255, 255, .52) !important;
}

.sale-price-annual-kpi #sale-price-annual-rent {
    color: #fff;
}

.sale-price-comparison {
    border-top: 3px solid var(--primary-light, #2563eb);
}

.sale-price-compare-card {
    padding: 1.15rem 1.25rem;
    border-radius: var(--radius-lg, .75rem);
    background: var(--surface-muted, rgba(248, 250, 252, .85));
    border: 1px solid var(--border, rgba(0, 0, 0, .08));
}

.sale-price-compare-card--sale {
    background: linear-gradient(145deg, rgba(37, 99, 235, .08), rgba(37, 99, 235, .02));
    border-color: rgba(37, 99, 235, .18);
}

.sale-price-compare-card-head {
    display: flex;
    align-items: center;
    gap: .45rem;
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--text-muted, #64748b);
    margin-bottom: .55rem;
}

.sale-price-compare-card--sale .sale-price-compare-card-head {
    color: var(--primary-light, #2563eb);
}

.sale-price-compare-card-value {
    font-size: 1.45rem;
    font-weight: 800;
    letter-spacing: -.03em;
    font-variant-numeric: tabular-nums;
    color: var(--text, #0f172a);
}

.sale-price-compare-card-note {
    margin-top: .35rem;
    font-size: .78rem;
    color: var(--text-muted, #64748b);
}

.sale-price-compare-arrow {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--surface-muted, #f1f5f9);
    border: 1px solid var(--border, rgba(0, 0, 0, .08));
    color: var(--primary-light, #2563eb);
    font-size: 1.1rem;
}

.sale-price-metric {
    display: flex;
    flex-direction: column;
    gap: .25rem;
    padding: .95rem 1.1rem;
    border-radius: var(--radius-md, .65rem);
    background: var(--surface, #fff);
    border: 1px solid var(--border, rgba(0, 0, 0, .08));
    height: 100%;
}

.sale-price-metric-label {
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--text-muted, #64748b);
}

.sale-price-metric-value {
    font-size: 1.15rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    letter-spacing: -.02em;
}

.sale-price-metric-value.is-positive {
    color: var(--success, #198754);
}

.sale-price-metric-value.is-negative {
    color: var(--danger, #dc3545);
}

.sale-price-metric-value.is-neutral {
    color: var(--text-muted, #64748b);
}

[data-theme="dark"] .sale-price-object-icon {
    background: rgba(96, 165, 250, .12);
    color: #93c5fd;
}

[data-theme="dark"] .card.sale-price-result-panel,
[data-theme="dark"] .sale-price-result-panel {
    background: linear-gradient(160deg, #1e3a5f 0%, #0f2744 55%, #091a30 100%);
    border: none;
}

[data-theme="dark"] .sale-price-factor-block,
[data-theme="dark"] .sale-price-compare-card {
    background: rgba(255, 255, 255, .04);
}

[data-theme="dark"] .sale-price-compare-card--sale {
    background: rgba(96, 165, 250, .08);
    border-color: rgba(96, 165, 250, .2);
}

[data-theme="dark"] .sale-price-compare-arrow,
[data-theme="dark"] .sale-price-metric {
    background: rgba(255, 255, 255, .04);
}

[data-theme="dark"] .sale-price-rent-input .input-group-text {
    background: rgba(255, 255, 255, .04);
}

@media (max-width: 767.98px) {
    .sale-price-compare-arrow {
        transform: rotate(90deg);
    }

    .sale-price-formula-step-value {
        font-size: .82rem;
    }
}

@media (min-width: 992px) {
    .sale-price-result-panel.sticky-lg-top {
        top: 1.25rem;
    }
}

/* Objekt bewerten */
.property-evaluator-money-input .input-group-text {
    background: var(--surface-muted, #f8fafc);
    border-color: var(--border, rgba(0, 0, 0, .08));
}

.property-evaluator-money-input .form-control {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.property-evaluator-costs-block {
    padding: 1rem 1.15rem;
    border-radius: var(--radius-lg, .75rem);
    background: var(--surface-muted, rgba(248, 250, 252, .85));
    border: 1px solid var(--border, rgba(0, 0, 0, .08));
}

.property-evaluator-costs-toggle {
    position: relative;
    padding: 0 1.75rem 0 0;
    border: 0;
    background: transparent;
}

.property-evaluator-costs-chevron {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    transition: transform .2s ease;
}

.property-evaluator-costs-toggle[aria-expanded="true"] .property-evaluator-costs-chevron {
    transform: translateY(-50%) rotate(180deg);
}

.card.property-evaluator-result,
.property-evaluator-result {
    overflow: hidden;
    background: linear-gradient(160deg, var(--primary, #1a3a6b) 0%, #0f2744 55%, #091a30 100%);
    border: none;
    box-shadow: 0 18px 40px rgba(15, 39, 68, .28);
    color: #fff;
}

.property-evaluator-result .card-body {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.property-evaluator-result .section-eyebrow--light {
    color: rgba(255, 255, 255, .55);
}

.property-evaluator-result .section-eyebrow--light::after {
    background: rgba(255, 255, 255, .15);
}

.property-evaluator-result .kpi-label {
    color: rgba(255, 255, 255, .62);
}

.property-evaluator-verdict {
    display: flex;
    flex-direction: column;
    gap: .2rem;
    padding: .85rem 1rem;
    border-radius: var(--radius-md, .65rem);
    border: 1px solid rgba(255, 255, 255, .12);
    background: rgba(255, 255, 255, .06);
}

.property-evaluator-verdict-label {
    font-size: .58rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: rgba(255, 255, 255, .5);
}

.property-evaluator-verdict-text {
    font-size: 1.15rem;
    font-weight: 800;
    letter-spacing: -.02em;
}

.property-evaluator-verdict--excellent {
    background: rgba(16, 185, 129, .22);
    border-color: rgba(52, 211, 153, .45);
}

.property-evaluator-verdict--excellent .property-evaluator-verdict-text {
    color: #6ee7b7;
}

.property-evaluator-verdict--good {
    background: rgba(34, 197, 94, .18);
    border-color: rgba(34, 197, 94, .35);
}

.property-evaluator-verdict--good .property-evaluator-verdict-text {
    color: #86efac;
}

.property-evaluator-verdict--moderate {
    background: rgba(234, 179, 8, .16);
    border-color: rgba(234, 179, 8, .35);
}

.property-evaluator-verdict--moderate .property-evaluator-verdict-text {
    color: #fde047;
}

.property-evaluator-verdict--low {
    background: rgba(239, 68, 68, .16);
    border-color: rgba(239, 68, 68, .35);
}

.property-evaluator-verdict--low .property-evaluator-verdict-text {
    color: #fca5a5;
}

.property-evaluator-verdict--empty .property-evaluator-verdict-text {
    color: rgba(255, 255, 255, .75);
}

.property-evaluator-kpi-value {
    font-size: clamp(2rem, 5vw, 2.65rem);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -.04em;
    color: #fff;
    font-variant-numeric: tabular-nums;
}

.property-evaluator-kpi-hint {
    min-height: 1.25rem;
    font-size: .8rem;
    color: rgba(255, 255, 255, .58);
    margin-top: .35rem;
}

.property-evaluator-metrics {
    display: flex;
    flex-direction: column;
    gap: .65rem;
}

.property-evaluator-metric {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    padding: .55rem .75rem;
    border-radius: var(--radius-sm, .5rem);
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .08);
}

.property-evaluator-metric-label {
    font-size: .72rem;
    font-weight: 600;
    color: rgba(255, 255, 255, .55);
}

.property-evaluator-metric-value {
    font-size: .92rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: #fff;
    text-align: right;
}

.property-evaluator-metric-value.is-positive {
    color: #86efac;
}

.property-evaluator-metric-value.is-negative {
    color: #fca5a5;
}

.property-evaluator-benchmark {
    margin-top: auto;
    padding-top: 1rem;
}

.property-evaluator-benchmark-list {
    list-style: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .35rem;
    font-size: .78rem;
    color: rgba(255, 255, 255, .72);
}

.property-evaluator-benchmark-list li {
    display: flex;
    align-items: center;
    gap: .5rem;
}

.property-evaluator-dot {
    width: .5rem;
    height: .5rem;
    border-radius: 50%;
    flex-shrink: 0;
}

.property-evaluator-dot--excellent {
    background: #10b981;
}

.property-evaluator-dot--good {
    background: #22c55e;
}

.property-evaluator-dot--moderate {
    background: #eab308;
}

.property-evaluator-dot--low {
    background: #ef4444;
}

[data-theme="dark"] .property-evaluator-costs-block {
    background: rgba(255, 255, 255, .04);
}

[data-theme="dark"] .card.property-evaluator-result,
[data-theme="dark"] .property-evaluator-result {
    box-shadow: 0 18px 40px rgba(0, 0, 0, .35);
}

@media (min-width: 992px) {
    .property-evaluator-result.sticky-lg-top {
        top: 1.25rem;
    }
}

.unit-entry {
    padding: 1rem;
    border: 1px solid var(--mp-border, rgba(0, 0, 0, .08));
    border-radius: .75rem;
    background: var(--mp-surface-muted, rgba(248, 250, 252, .75));
}

.unit-entry-financials {
    margin-top: .85rem;
    padding-top: .85rem;
    border-top: 1px dashed var(--mp-border, rgba(0, 0, 0, .1));
}

.unit-entry-financials-label {
    font-size: .78rem;
    letter-spacing: .02em;
    text-transform: uppercase;
}

.unit-entry-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: .5rem;
    margin-top: .85rem;
    padding-top: .85rem;
    border-top: 1px solid var(--mp-border, rgba(0, 0, 0, .08));
}

@media (max-width: 991.98px) {
    .mandant-form-sidebar { position: static; }
}

@media (max-width: 767.98px) {
    .cookie-banner { padding: 1rem; }
    .cookie-banner-inner { flex-direction: column; gap: 1rem; }
    .cookie-banner-actions { flex-direction: row; min-width: 0; width: 100%; }
    .cookie-banner-actions .btn { flex: 1; }
}

/* ─── Abonnement / Kündigung ─────────────────────────────────────── */
/* ─── Abonnement: Paket-Karten (wie Registrierung) ─────────────── */
.plan-cards--subscription {
    margin-top: .25rem;
}

.plan-card--subscription {
    cursor: default;
    min-height: 100%;
}

.plan-card--subscription:not(.is-selected) {
    padding-left: 1rem;
}

.plan-card--subscription.is-selected {
    padding-left: 2.5rem;
}

.plan-badge-current {
    background: var(--success, #10b981);
}

.plan-card-actions {
    margin-top: auto;
    padding-top: .85rem;
}

.plan-card-status {
    display: block;
    line-height: 1.4;
}

.subscription-plans-section .plan-section-label {
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: -.02em;
    color: var(--text);
}

.subscription-cancel-card {
    border-color: rgba(220, 53, 69, .18);
}

.subscription-cancel-status {
    display: flex;
    gap: .875rem;
    align-items: flex-start;
    padding: 1rem 1.125rem;
    border-radius: .75rem;
    background: rgba(255, 193, 7, .08);
    border: 1px solid rgba(255, 193, 7, .22);
}

.subscription-cancel-status i {
    font-size: 1.25rem;
    color: #b58100;
    margin-top: .125rem;
}

.subscription-cancel-status--locked {
    background: rgba(108, 117, 125, .08);
    border-color: rgba(108, 117, 125, .18);
}

.subscription-cancel-status--locked i { color: var(--text-muted); }

.subscription-cancel-form .btn-danger { min-width: 12rem; }
.subscription-revoke-form .btn-success { min-width: 12rem; }

/* ─── Live filter (AJAX) ───────────────────────────────────────── */
.mp-live-filter-target.is-loading {
    opacity: .55;
    pointer-events: none;
    transition: opacity .2s ease;
}

.mp-live-filter-form .mp-live-filter-reset {
    min-width: 2.5rem;
}

.mp-stat-tile {
    border: 1px solid var(--border);
    background: var(--surface);
    cursor: pointer;
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.mp-stat-tile:hover {
    border-color: var(--border-strong);
    box-shadow: var(--shadow);
    transform: translateY(-1px);
}

.mp-stat-tile.is-active {
    border-color: var(--primary);
    box-shadow: 0 0 0 1px rgba(28, 61, 110, .12);
}

.mp-stat-tile:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

/* ─── Finanzstatistik ───────────────────────────────────────────── */
.finanz-stat-factor-block {
    padding: .85rem 1rem;
}

.finanz-stat-table th,
.finanz-stat-table td {
    font-size: .875rem;
}

.finanz-stat-table th {
    white-space: nowrap;
}

.finanz-kpi-value-gain-pct {
    display: block;
}

@media (max-width: 768px) {
    .finanz-stat-factor-block .sale-price-factor-presets {
        display: none;
    }
}

@media (max-width: 480px) {
    .finanz-stat-page .mp-stat-tiles .fs-5 {
        font-size: 1.1rem !important;
    }
}

a.kpi-card--link {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    text-decoration: none;
    color: inherit;
}

a.kpi-card--link:hover {
    color: inherit;
}

/* ─── Lease lists grouped by property ──────────────────────────── */
.lease-property-group__header,
.lease-unit-group__header[data-mp-lease-collapse-trigger] {
    cursor: pointer;
}

.lease-property-group__header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: .75rem 1.25rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--border);
    background: color-mix(in srgb, var(--surface) 88%, var(--border));
}

.lease-property-group__toggle,
.lease-unit-group__toggle {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    margin: 0;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--card-bg);
    color: var(--muted);
    transition: transform .2s ease, color .2s ease, border-color .2s ease;
}

.lease-property-group__toggle:hover,
.lease-unit-group__toggle:hover {
    color: var(--text);
    border-color: color-mix(in srgb, var(--border) 50%, var(--text));
}

.lease-property-group__toggle.collapsed .bi,
.lease-unit-group__toggle.collapsed .bi {
    transform: rotate(-90deg);
}

.lease-property-group__toggle .bi,
.lease-unit-group__toggle .bi {
    transition: transform .2s ease;
}

.lease-property-group__title-wrap {
    flex: 1 1 auto;
    min-width: 0;
}

.lease-property-group__title {
    font-weight: 600;
    letter-spacing: -.01em;
}

.lease-property-group__badges {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    align-items: center;
}

.lease-property-group__table thead th {
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--muted);
    border-bottom-width: 1px;
    background: transparent;
}

.lease-property-group__mobile {
    padding: .5rem 1rem 1rem;
}

.lease-unit-card {
    padding: .85rem 0;
    border-bottom: 1px solid var(--border);
}

.lease-unit-card:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.lease-unit-group {
    border-top: 1px solid var(--border);
}

.lease-unit-group:first-of-type {
    border-top: 0;
}

.lease-unit-group__header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .5rem 1rem;
    padding: .75rem 1.25rem;
    background: color-mix(in srgb, var(--card-bg) 92%, var(--border));
    border-bottom: 1px solid var(--border);
}

.lease-unit-group__header .fw-semibold {
    flex: 1 1 auto;
    min-width: 0;
}

.lease-unit-group__table thead th {
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--muted);
    background: transparent;
}

.lease-unit-group__mobile {
    padding: 0 1rem .75rem;
}

.lease-history-entry {
    padding: .75rem 0;
    border-bottom: 1px solid var(--border);
}

.lease-history-entry:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.lease-detail-list dt {
    color: var(--text-muted);
    font-weight: 500;
}

.lease-detail-list dd {
    margin-bottom: .75rem;
}

/* ─── Toast notifications ──────────────────────────────────────── */
.mp-toast-stack {
    position: fixed;
    top: 1rem;
    right: 1rem;
    z-index: 1090;
    display: flex;
    flex-direction: column;
    gap: .625rem;
    width: min(22rem, calc(100vw - 2rem));
    pointer-events: none;
}

.mp-toast {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    padding: .875rem 1rem;
    border-radius: .75rem;
    background: var(--surface-raised);
    border: 1px solid var(--border-strong);
    box-shadow: 0 8px 24px rgba(15, 23, 42, .12), 0 2px 6px rgba(15, 23, 42, .06);
    pointer-events: auto;
    overflow: hidden;
    position: relative;
    transform: translateX(calc(100% + 1.5rem));
    opacity: 0;
    transition: transform .35s cubic-bezier(.22, 1, .36, 1), opacity .35s ease;
}

.mp-toast.is-visible {
    transform: translateX(0);
    opacity: 1;
}

.mp-toast.is-leaving {
    transform: translateX(calc(100% + 1.5rem));
    opacity: 0;
}

.mp-toast__icon {
    flex-shrink: 0;
    width: 1.375rem;
    height: 1.375rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.125rem;
    margin-top: .0625rem;
}

.mp-toast__body {
    flex: 1;
    min-width: 0;
}

.mp-toast__text {
    margin: 0;
    font-size: .875rem;
    line-height: 1.45;
    color: var(--text);
    font-weight: 500;
}

.mp-toast__close {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    margin: -.125rem -.25rem 0 0;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--text-muted);
    border-radius: .375rem;
    cursor: pointer;
    transition: color .15s ease, background .15s ease;
}

.mp-toast__close:hover {
    color: var(--text);
    background: rgba(0, 0, 0, .06);
}

[data-theme="dark"] .mp-toast__close:hover {
    background: rgba(255, 255, 255, .08);
}

.mp-toast__progress {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 3px;
    width: 100%;
    transform-origin: left center;
    transform: scaleX(1);
}

.mp-toast--success .mp-toast__icon { color: #198754; }
.mp-toast--success .mp-toast__progress { background: #198754; }

.mp-toast--error .mp-toast__icon { color: #dc3545; }
.mp-toast--error .mp-toast__progress { background: #dc3545; }

.mp-toast--info .mp-toast__icon { color: var(--primary); }
.mp-toast--info .mp-toast__progress { background: var(--primary); }

.mp-toast--warning .mp-toast__icon { color: #b58100; }
.mp-toast--warning .mp-toast__progress { background: #b58100; }

.mp-toast--success {
    border-color: rgba(25, 135, 84, .25);
    background: linear-gradient(135deg, var(--surface-raised) 0%, rgba(25, 135, 84, .06) 100%);
}

.mp-toast--error {
    border-color: rgba(220, 53, 69, .25);
    background: linear-gradient(135deg, var(--surface-raised) 0%, rgba(220, 53, 69, .06) 100%);
}

@media (max-width: 575.98px) {
    .mp-toast-stack {
        top: auto;
        bottom: 1rem;
        right: 1rem;
        left: 1rem;
        width: auto;
    }

    .mp-toast {
        transform: translateY(calc(100% + 1.5rem));
    }

    .mp-toast.is-visible {
        transform: translateY(0);
    }

    .mp-toast.is-leaving {
        transform: translateY(calc(100% + 1.5rem));
    }
}

/* ─── Landing / Marketing Page ───────────────────────────────────── */
.landing-body {
    background: var(--bg);
    scroll-padding-top: 4.5rem;
}

.landing-section[id] {
    scroll-margin-top: 4.5rem;
}

.landing-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: rgba(6, 15, 30, .82);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid rgba(255,255,255,.06);
    transition: box-shadow var(--transition);
}

.landing-header.is-scrolled {
    box-shadow: 0 4px 24px rgba(0,0,0,.25);
}

.landing-header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-top: .85rem;
    padding-bottom: .85rem;
}

.landing-brand {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    font-weight: 800;
    font-size: 1rem;
    color: #f1f5f9 !important;
    letter-spacing: -.03em;
    flex-shrink: 0;
}

.landing-brand-icon {
    width: 34px;
    height: 34px;
    border-radius: var(--radius-sm);
    background: linear-gradient(135deg, var(--primary-light), var(--primary));
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .95rem;
}

.landing-nav {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.landing-nav-link {
    color: #7a9ab8;
    font-size: .84rem;
    font-weight: 500;
    text-decoration: none;
    transition: color var(--transition);
}

.landing-nav-link:hover { color: #e2e8f0; }

.landing-header-actions {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-shrink: 0;
}

.landing-theme-toggle {
    border-color: rgba(255,255,255,.12);
    color: #c8d8ea;
    background: rgba(255,255,255,.04);
}

.landing-theme-toggle:hover {
    background: rgba(255,255,255,.08);
    border-color: rgba(255,255,255,.2);
    color: #e2e8f0;
}

.landing-nav-toggle {
    width: 40px;
    height: 40px;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: var(--radius-sm);
    background: rgba(255,255,255,.04);
    color: #e2e8f0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    padding: 0;
    transition: background var(--transition), border-color var(--transition);
}

.landing-nav-toggle:hover {
    background: rgba(255,255,255,.08);
    border-color: rgba(255,255,255,.2);
}

.landing-offcanvas {
    background: #0f172a;
    color: #e2e8f0;
    border-left: 1px solid rgba(255,255,255,.08);
    max-width: min(320px, 88vw);
}

.landing-offcanvas-title {
    font-size: 1rem;
    font-weight: 700;
    color: #f8fafc;
}

.landing-offcanvas-nav {
    display: flex;
    flex-direction: column;
    gap: .25rem;
    margin-bottom: 1.5rem;
}

.landing-offcanvas-link {
    color: #cbd5e1;
    text-decoration: none;
    font-weight: 500;
    padding: .75rem .5rem;
    border-radius: var(--radius-sm);
    transition: background var(--transition), color var(--transition);
}

.landing-offcanvas-link:hover {
    color: #fff;
    background: rgba(255,255,255,.06);
}

.landing-offcanvas-actions {
    margin-top: auto;
    padding-top: 1rem;
    border-top: 1px solid rgba(255,255,255,.08);
}

.landing-btn-login {
    color: #8faec8 !important;
    border-color: rgba(255,255,255,.12) !important;
}

.landing-btn-login:hover {
    color: #e2e8f0 !important;
    background: rgba(255,255,255,.06) !important;
}

.landing-btn-cta {
    font-weight: 600;
    padding-left: 1rem;
    padding-right: 1rem;
}

/* Hero */
.landing-hero {
    position: relative;
    overflow: hidden;
    background: var(--nav-bg);
    color: #e2e8f0;
    padding: 4.5rem 0 5rem;
}

.landing-hero-bg {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 70% 60% at 80% 20%, rgba(37,99,168,.35) 0%, transparent 60%),
        radial-gradient(ellipse 50% 50% at 10% 80%, rgba(16,185,129,.08) 0%, transparent 55%);
    pointer-events: none;
}

.landing-hero-inner {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: center;
}

.landing-badge {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .4rem .85rem;
    border-radius: 999px;
    background: rgba(37,99,168,.2);
    border: 1px solid rgba(74,143,216,.3);
    color: #8ec5f0;
    font-size: .78rem;
    font-weight: 600;
    margin-bottom: 1.25rem;
}

.landing-hero-title {
    font-size: clamp(2rem, 4.5vw, 3.1rem);
    font-weight: 900;
    letter-spacing: -.045em;
    line-height: 1.08;
    margin-bottom: 1.1rem;
    color: #f8fafc;
}

.landing-gradient-text {
    background: linear-gradient(135deg, #6db3f2 0%, #34d399 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.landing-hero-lead {
    font-size: 1.05rem;
    color: #7a9ab8;
    line-height: 1.7;
    max-width: 520px;
    margin-bottom: 1.75rem;
}

.landing-hero-cta {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    margin-bottom: 1.75rem;
}

.landing-cta-primary {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-weight: 700;
    padding: .75rem 1.5rem;
    border-radius: var(--radius-lg);
}

.landing-cta-primary i { transition: transform var(--transition); }
.landing-cta-primary:hover i { transform: translateX(3px); }

.landing-cta-secondary {
    border-color: rgba(255,255,255,.2) !important;
    color: #c8d8ea !important;
    font-weight: 600;
    padding: .75rem 1.5rem;
    border-radius: var(--radius-lg);
}

.landing-cta-secondary:hover {
    background: rgba(255,255,255,.08) !important;
    color: #fff !important;
}

.landing-trust {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
}

.landing-trust li {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-size: .82rem;
    color: #6b8faa;
    font-weight: 500;
}

.landing-trust i { color: #34d399; }

/* Mockup */
.landing-mockup {
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: 0 24px 64px rgba(0,0,0,.35);
}

.landing-mockup-bar {
    display: flex;
    gap: .4rem;
    padding: .75rem 1rem;
    background: rgba(0,0,0,.2);
    border-bottom: 1px solid rgba(255,255,255,.06);
}

.landing-mockup-bar span {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(255,255,255,.15);
}

.landing-mockup-bar span:first-child { background: #ef4444; opacity: .7; }
.landing-mockup-bar span:nth-child(2) { background: #f59e0b; opacity: .7; }
.landing-mockup-bar span:nth-child(3) { background: #22c55e; opacity: .7; }

.landing-mockup-body {
    display: grid;
    grid-template-columns: 172px 1fr;
    min-height: 280px;
}

.landing-mockup-sidebar {
    padding: 1rem .65rem;
    border-right: 1px solid rgba(255,255,255,.06);
    display: flex;
    flex-direction: column;
    gap: .35rem;
    overflow: hidden;
    min-width: 0;
}

.landing-mockup-nav-item {
    display: flex;
    align-items: flex-start;
    gap: .4rem;
    padding: .45rem .55rem;
    border-radius: var(--radius-sm);
    font-size: .67rem;
    line-height: 1.3;
    color: #6b8faa;
    font-weight: 500;
    min-width: 0;
}

.landing-mockup-nav-item i {
    flex-shrink: 0;
    margin-top: .1rem;
    font-size: .75rem;
}

.landing-mockup-nav-item span {
    min-width: 0;
    overflow-wrap: break-word;
    word-break: break-word;
    hyphens: auto;
}

.landing-mockup-nav-item.active {
    background: rgba(37,99,168,.25);
    color: #a8d4f8;
}

.landing-mockup-main {
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: .65rem;
}

.landing-mockup-stat {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: .55rem .75rem;
    background: rgba(255,255,255,.04);
    border-radius: var(--radius-sm);
    font-size: .75rem;
}

.landing-mockup-stat .label { color: #6b8faa; }
.landing-mockup-stat .value { font-weight: 800; color: #f1f5f9; font-size: 1rem; }
.landing-mockup-stat .value.success { color: #34d399; }

.landing-mockup-ticket {
    padding: .65rem .75rem;
    background: rgba(255,255,255,.03);
    border: 1px solid rgba(255,255,255,.06);
    border-radius: var(--radius-sm);
    display: flex;
    flex-direction: column;
    gap: .15rem;
}

.landing-mockup-ticket strong { font-size: .78rem; color: #e2e8f0; }
.landing-mockup-ticket .meta { font-size: .68rem; color: #5e7a99; }

.badge-status {
    align-self: flex-start;
    font-size: .62rem;
    font-weight: 700;
    padding: .15rem .45rem;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.badge-status.open { background: rgba(245,158,11,.15); color: #fbbf24; }
.badge-status.done { background: rgba(52,211,153,.12); color: #34d399; }

/* Sections */
.landing-section {
    padding: 5rem 0;
}

.landing-section-head { margin-bottom: 3rem; }

.landing-section-label {
    display: inline-block;
    font-size: .75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--primary-light);
    margin-bottom: .6rem;
}

.landing-section-head h2 {
    font-size: clamp(1.65rem, 3vw, 2.25rem);
    font-weight: 800;
    letter-spacing: -.04em;
    margin-bottom: .75rem;
}

.landing-section-sub {
    color: var(--text-muted);
    font-size: 1rem;
    max-width: 580px;
    margin: 0 auto;
    line-height: 1.65;
}

/* Pain points */
.landing-pain { background: var(--surface); }

.landing-pain-card {
    height: 100%;
    padding: 1.75rem;
    background: var(--surface-raised);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    transition: transform var(--transition), box-shadow var(--transition);
}

.landing-pain-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow);
}

.landing-pain-icon {
    width: 48px;
    height: 48px;
    border-radius: var(--radius);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    margin-bottom: 1rem;
}

.landing-pain-icon.pain {
    background: rgba(239,68,68,.08);
    color: #ef4444;
}

.landing-pain-card h3 {
    font-size: 1.05rem;
    font-weight: 700;
    margin-bottom: .5rem;
}

.landing-pain-card p {
    color: var(--text-muted);
    font-size: .9rem;
    margin: 0;
    line-height: 1.6;
}

.landing-solution-banner {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    margin-top: 2.5rem;
    padding: 1.5rem 2rem;
    background: linear-gradient(135deg, var(--primary-soft), rgba(52,211,153,.06));
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
}

.landing-solution-icon {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--primary);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    flex-shrink: 0;
}

.landing-solution-banner strong {
    display: block;
    font-size: 1.05rem;
    margin-bottom: .2rem;
}

.landing-solution-banner span {
    color: var(--text-muted);
    font-size: .9rem;
}

/* Feature grid */
.landing-feature-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
}

.landing-feature-card {
    padding: 1.75rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}

.landing-feature-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow);
    border-color: var(--border-strong);
}

.landing-feature-card--hero {
    grid-column: span 2;
    grid-row: span 2;
    background: linear-gradient(145deg, var(--surface) 0%, var(--primary-soft) 100%);
    border-color: rgba(26,58,107,.15);
}

.landing-feature-icon {
    width: 44px;
    height: 44px;
    border-radius: var(--radius);
    background: var(--primary-soft);
    color: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    margin-bottom: 1rem;
}

.landing-feature-card h3 {
    font-size: 1.05rem;
    font-weight: 700;
    margin-bottom: .5rem;
}

.landing-feature-card p {
    color: var(--text-muted);
    font-size: .88rem;
    line-height: 1.6;
    margin: 0;
}

.landing-feature-list {
    list-style: none;
    padding: 0;
    margin: 1.25rem 0 0;
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.landing-feature-list li {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: .85rem;
    color: var(--text-muted);
    font-weight: 500;
}

.landing-feature-list i { color: #22c55e; font-weight: 700; }

/* Steps */
.landing-steps { background: var(--surface-raised); }

.landing-steps-row {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 1rem;
    max-width: 900px;
    margin: 0 auto;
}

.landing-step {
    flex: 1;
    text-align: center;
    padding: 1.5rem 1rem;
}

.landing-step-num {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--primary);
    color: #fff;
    font-weight: 800;
    font-size: 1.2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
    box-shadow: var(--shadow-primary);
}

.landing-step h3 {
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: .4rem;
}

.landing-step p {
    font-size: .85rem;
    color: var(--text-muted);
    margin: 0;
    line-height: 1.55;
}

.landing-step-connector {
    padding-top: 1.5rem;
    color: var(--border-strong);
    font-size: 1.25rem;
}

/* Roles */
.landing-role-card {
    height: 100%;
    padding: 1.5rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    text-align: center;
    transition: transform var(--transition), box-shadow var(--transition);
}

.landing-role-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm);
}

.landing-role-card i {
    font-size: 1.75rem;
    color: var(--primary);
    margin-bottom: .75rem;
    display: block;
}

.landing-role-card h4 {
    font-size: .95rem;
    font-weight: 700;
    margin-bottom: .35rem;
}

.landing-role-card p {
    font-size: .82rem;
    color: var(--text-muted);
    margin: 0;
    line-height: 1.5;
}

/* Pricing */
.landing-pricing { background: var(--surface); }

.landing-pricing-cards {
    max-width: 1180px;
    margin: 0 auto;
}

.landing-pricing-cards .plan-cards--landing {
    margin-top: .25rem;
}

a.plan-card--link {
    text-decoration: none;
    color: inherit;
    padding: 1.1rem 1rem 1rem;
}

a.plan-card--link:hover {
    border-color: var(--primary);
}

a.plan-card--link:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

.property-image-preview {
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--surface-2, #f8fafc);
    max-width: 320px;
}

.property-image-preview-img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 220px;
    object-fit: cover;
}

.property-image-preview + .d-flex .form-text {
    flex: 1 1 auto;
}

/* ─── Property form (anlegen / bearbeiten) ─────────────────────── */
.property-form-page {
    max-width: 1180px;
}

.property-form-card,
.property-form-card:hover {
    transform: none;
    z-index: 0;
}

.property-form-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    position: relative;
    z-index: 2;
    margin-top: 0;
    padding-top: .25rem;
    padding-bottom: 1rem;
}

.property-cash-panel {
    padding: 1rem 1.1rem;
    border-radius: var(--radius);
    background: var(--surface-raised);
    border: 1px solid var(--border);
}

.property-cash-summary {
    padding-bottom: 1rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid var(--border);
}

.property-cash-costs .property-cash-label {
    display: flex;
    align-items: flex-end;
    min-height: 2.5rem;
    margin-bottom: .35rem;
    line-height: 1.25;
}

.property-cash-footer {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-top: 1rem;
    padding-top: .85rem;
    border-top: 1px solid var(--border);
}

.property-cash-footer .sale-price-card-link {
    flex: 0 0 auto;
    text-align: right;
}

.property-cash-readout {
    background: var(--surface) !important;
    border-color: var(--border);
}

[data-theme="dark"] .property-cash-panel {
    background: rgba(255, 255, 255, .03);
}

.property-image-upload .form-control[type="file"] {
    padding: .65rem .85rem;
    border-style: dashed;
    background: var(--surface-raised);
}

.property-image-upload .form-control[type="file"]:hover {
    border-color: var(--primary-light);
    background: var(--primary-soft);
}

.property-form-next-steps {
    position: sticky;
    top: 1rem;
}

.property-form-next-steps:hover {
    transform: none;
}

.property-form-next-title {
    font-size: .92rem;
    font-weight: 700;
    margin: 0 0 1rem;
}

.property-form-next-list {
    list-style: none;
    margin: 0 0 1rem;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .85rem;
}

.property-form-next-item {
    display: flex;
    gap: .75rem;
    align-items: flex-start;
}

.property-form-next-item strong {
    display: block;
    font-size: .875rem;
    margin-bottom: .1rem;
}

.property-form-next-item p {
    margin: 0;
    font-size: .78rem;
    color: var(--text-muted);
    line-height: 1.4;
}

.property-form-next-num {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: .72rem;
    font-weight: 800;
    background: var(--border);
    color: var(--text-muted);
}

.property-form-next-item--current .property-form-next-num {
    background: var(--primary-soft);
    color: var(--primary);
    box-shadow: inset 0 0 0 1px var(--primary-glow);
}

.property-form-next-item--current strong {
    color: var(--primary);
}

.property-form-next-links {
    display: flex;
    flex-direction: column;
    gap: .35rem;
    padding-top: .85rem;
    border-top: 1px solid var(--border);
}

.property-form-next-link {
    display: flex;
    align-items: center;
    gap: .55rem;
    padding: .5rem .65rem;
    border-radius: var(--radius-sm);
    text-decoration: none;
    font-size: .84rem;
    font-weight: 600;
    color: var(--text);
    transition: background var(--transition), color var(--transition);
}

.property-form-next-link i {
    color: var(--primary);
}

.property-form-next-link:hover {
    background: var(--primary-soft);
    color: var(--primary);
}

@media (min-width: 992px) {
    .app-main--help-enabled .property-form-page--create .property-form-aside {
        display: none !important;
    }

    .app-main--help-enabled .property-form-page--create .property-form-main {
        flex: 0 0 100%;
        width: 100%;
        max-width: 100%;
    }
}

@media (max-width: 991.98px) {
    .property-form-actions .btn-lg {
        width: 100%;
        justify-content: center;
    }
}

.landing-plan-card {
    position: relative;
    height: 100%;
    padding: 2rem 1.75rem;
    background: var(--surface-raised);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    display: flex;
    flex-direction: column;
    transition: transform var(--transition), box-shadow var(--transition);
}

.landing-plan-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

.landing-plan-card--featured {
    background: var(--surface);
    border-color: var(--primary);
    box-shadow: var(--shadow-primary);
}

.landing-plan-badge {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    padding: .3rem .85rem;
    background: var(--primary);
    color: #fff;
    font-size: .7rem;
    font-weight: 700;
    border-radius: 999px;
    white-space: nowrap;
}

.landing-plan-card h3 {
    font-size: 1.2rem;
    font-weight: 800;
    margin-bottom: .35rem;
}

.landing-plan-desc {
    font-size: .82rem;
    color: var(--text-muted);
    margin-bottom: 1.25rem;
    line-height: 1.5;
}

.landing-plan-price {
    margin-bottom: 1.25rem;
}

.landing-plan-price .amount {
    font-size: 2rem;
    font-weight: 900;
    letter-spacing: -.04em;
    color: var(--primary);
}

.landing-plan-price .period {
    font-size: .85rem;
    color: var(--text-muted);
}

.landing-plan-features {
    list-style: none;
    padding: 0;
    margin: 0 0 1.5rem;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: .55rem;
}

.landing-plan-features li {
    display: flex;
    align-items: flex-start;
    gap: .5rem;
    font-size: .84rem;
    color: var(--text-muted);
    line-height: 1.4;
}

.landing-plan-features i {
    color: #22c55e;
    font-size: .9rem;
    flex-shrink: 0;
    margin-top: .1rem;
}

.landing-pricing-note {
    margin-top: 2rem;
    font-size: .82rem;
    color: var(--text-muted);
}

.landing-pricing-note i { margin-right: .3rem; }

/* FAQ */
.landing-faq-list {
    max-width: 720px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: .65rem;
}

.landing-faq-item {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.landing-faq-item summary {
    padding: 1.1rem 1.35rem;
    font-weight: 700;
    font-size: .95rem;
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: background var(--transition);
}

.landing-faq-item summary::-webkit-details-marker { display: none; }

.landing-faq-item summary::after {
    content: '\F282';
    font-family: 'bootstrap-icons';
    font-size: .85rem;
    color: var(--text-muted);
    transition: transform var(--transition);
}

.landing-faq-item[open] summary::after { transform: rotate(180deg); }

.landing-faq-item summary:hover { background: var(--surface-raised); }

.landing-faq-item p {
    padding: 0 1.35rem 1.1rem;
    margin: 0;
    font-size: .88rem;
    color: var(--text-muted);
    line-height: 1.65;
}

.landing-faq-item a { color: var(--primary-light); }

/* Final CTA */
.landing-cta-final {
    padding: 5rem 0;
    background: var(--nav-bg);
    color: #e2e8f0;
}

.landing-cta-final h2 {
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 800;
    letter-spacing: -.04em;
    margin-bottom: .6rem;
    color: #f8fafc;
}

.landing-cta-final > .container > p {
    color: #7a9ab8;
    font-size: 1rem;
    margin-bottom: 1.75rem;
}

.landing-cta-sub {
    margin-top: 1.25rem !important;
    font-size: .85rem !important;
    color: #6b8faa !important;
}

.landing-cta-sub a {
    color: #8ec5f0;
    font-weight: 600;
    text-decoration: none;
}

.landing-cta-sub a:hover { text-decoration: underline; }

/* Landing responsive */
@media (max-width: 991.98px) {
    .landing-hero-inner { grid-template-columns: 1fr; gap: 2.5rem; }
    .landing-hero-visual { max-width: 480px; margin: 0 auto; width: 100%; }
    .landing-feature-grid { grid-template-columns: 1fr 1fr; }
    .landing-feature-card--hero { grid-column: span 2; grid-row: span 1; }
}

@media (max-width: 767.98px) {
    .landing-hero { padding: 3rem 0 3.5rem; }
    .landing-section { padding: 3.5rem 0; }
    .landing-feature-grid { grid-template-columns: 1fr; }
    .landing-feature-card--hero { grid-column: span 1; }
    .landing-steps-row { flex-direction: column; align-items: center; }
    .landing-step-connector { transform: rotate(90deg); padding: 0; }
    .landing-solution-banner { flex-direction: column; text-align: center; }
}

/* ─── Dashboard: Offene Tickets nach Objekt (schmal) ─────────────── */
.dashboard-by-property-title {
    font-size: .88rem;
    line-height: 1.25;
}

.dashboard-by-property-list {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.dashboard-by-property-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .2rem;
    padding: .5rem 0;
    border-bottom: 1px solid var(--border);
    min-width: 0;
}

.dashboard-by-property-item:last-child { border-bottom: none; }

.dashboard-by-property-name {
    font-size: .8rem;
    font-weight: 600;
    min-width: 0;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dashboard-by-property-name a {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dashboard-by-property-open {
    font-size: .74rem;
    color: var(--text-muted);
    line-height: 1.3;
}

.dashboard-by-property-open a,
a.dashboard-by-property-open {
    display: inline-block;
    color: var(--text-muted);
    text-decoration: none;
    transition: color var(--transition);
}

.dashboard-by-property-open a:hover,
.dashboard-by-property-open a:focus-visible,
a.dashboard-by-property-open:hover,
a.dashboard-by-property-open:focus-visible {
    color: var(--primary);
}

.dashboard-by-property-open strong {
    color: var(--primary);
    font-weight: 700;
}

/* ─── Page Hero (Dashboard / Admin) ─────────────────────────────── */
.page-hero {
    position: relative;
    margin-top: -2rem;
    margin-left: -1.5rem;
    margin-right: -1.5rem;
    margin-bottom: 2rem;
    padding: 2.25rem 1.5rem 2rem;
    overflow: hidden;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
}

/* Top accent gradient line — connects to the brand nav */
.page-hero::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--primary) 0%, var(--primary-light) 40%, transparent 80%);
    pointer-events: none;
}

/* Subtle radial glow — depth without darkness */
.page-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 55% 120% at 100% 50%, var(--primary-soft) 0%, transparent 65%);
    pointer-events: none;
}

.page-hero-inner {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}

/* ─── Welcome badge ──────────────────────────────────────────────── */
.welcome-badge {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .28rem .75rem;
    border-radius: 999px;
    background: var(--primary-soft);
    border: 1px solid var(--primary-glow);
    color: var(--primary);
    font-size: .7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    margin-bottom: .55rem;
}

[data-theme="dark"] .welcome-badge {
    background: rgba(43,114,200,.15);
    border-color: rgba(43,114,200,.3);
    color: #4a8fd8;
}

.welcome-badge i { font-size: .8rem; }

/* ─── Section eyebrow ────────────────────────────────────────────── */
.section-eyebrow {
    display: flex;
    align-items: center;
    gap: .4rem;
    font-size: .63rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .14em;
    color: var(--primary-light);
    margin-bottom: .75rem;
}

.section-eyebrow::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--border);
    max-width: 60px;
}

[data-theme="dark"] .section-eyebrow { color: #4a8fd8; }

/* ─── Mandant avatar ─────────────────────────────────────────────── */
.mandant-avatar {
    width: 34px;
    height: 34px;
    border-radius: var(--radius-sm);
    background: linear-gradient(135deg, var(--primary-light), var(--primary));
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: -.01em;
    flex-shrink: 0;
    text-transform: uppercase;
    box-shadow: 0 2px 6px rgba(26,58,107,.25);
}

.mandant-name-cell {
    display: flex;
    align-items: center;
    gap: .65rem;
}

.mandant-name-cell strong {
    font-weight: 700;
    font-size: .875rem;
}

/* ─── Admin stat pills ───────────────────────────────────────────── */
.admin-stat-row {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
    margin-bottom: 1.5rem;
}

.admin-stat-pill {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .55rem 1rem .55rem .75rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    font-size: .8rem;
    color: var(--text-muted);
    font-weight: 500;
    transition: border-color var(--transition), box-shadow var(--transition);
}

.admin-stat-pill:hover {
    border-color: var(--border-strong);
    box-shadow: var(--shadow);
}

.admin-stat-pill-icon {
    width: 28px;
    height: 28px;
    border-radius: 7px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .78rem;
    flex-shrink: 0;
}

.admin-stat-pill strong {
    color: var(--text);
    font-weight: 800;
    font-size: .95rem;
    letter-spacing: -.025em;
    font-variant-numeric: tabular-nums;
    margin: 0 .15rem 0 0;
}

/* ─── Badge improvements ─────────────────────────────────────────── */
.badge-active {
    display: inline-flex;
    align-items: center;
    gap: .3em;
    background: rgba(16,185,129,.1);
    color: #059669;
    border: 1px solid rgba(16,185,129,.2);
    font-size: .65rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    padding: .28em .65em;
    border-radius: 5px;
}

.badge-active::before {
    content: '';
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: currentColor;
    flex-shrink: 0;
}

.badge-locked {
    display: inline-flex;
    align-items: center;
    gap: .3em;
    background: rgba(239,68,68,.09);
    color: #dc2626;
    border: 1px solid rgba(239,68,68,.18);
    font-size: .65rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    padding: .28em .65em;
    border-radius: 5px;
}

.badge-locked::before {
    content: '';
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: currentColor;
    flex-shrink: 0;
}

[data-theme="dark"] .badge-active {
    background: rgba(16,185,129,.16);
    color: #34d399;
    border-color: rgba(16,185,129,.28);
}

[data-theme="dark"] .badge-locked {
    background: rgba(239,68,68,.14);
    color: #f87171;
    border-color: rgba(239,68,68,.22);
}

/* ─── Table action group ─────────────────────────────────────────── */
.table-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: .35rem;
}

.table-actions form {
    display: inline-flex;
    margin: 0;
}

.btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    line-height: 1;
}

.btn-icon .bi {
    font-size: .95rem;
    margin: 0 !important;
}

/* ─── Page hero responsive ───────────────────────────────────────── */
@media (max-width: 768px) {
    .page-hero {
        margin-top: -1.25rem;
        margin-left: -1rem;
        margin-right: -1rem;
        padding: 1.5rem 1rem 1.4rem;
    }
}

@media (max-width: 480px) {
    .page-hero {
        margin-top: -1rem;
        margin-left: -1rem;
        margin-right: -1rem;
        padding: 1.25rem 1rem 1.2rem;
    }
}

@media (max-width: 375px) {
    .page-hero {
        margin-left: -.75rem;
        margin-right: -.75rem;
        padding-left: .75rem;
        padding-right: .75rem;
    }
}

/* ─── Setup Checklist ─────────────────────────────────────────────── */
.setup-checklist {
    background: linear-gradient(135deg, rgba(26,58,107,.06), rgba(99,102,241,.05));
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 1.25rem 1.5rem;
}

.setup-checklist-head {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.setup-checklist-badge {
    display: inline-flex;
    align-items: center;
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--primary);
    margin-bottom: .35rem;
}

.setup-checklist-title {
    font-size: 1.15rem;
    font-weight: 700;
    margin-bottom: .25rem;
}

.setup-checklist-sub {
    color: var(--text-muted);
    font-size: .9rem;
}

.setup-checklist-progress-wrap { min-width: 120px; }

.setup-checklist-progress-label {
    font-size: .78rem;
    font-weight: 600;
    color: var(--text-muted);
    text-align: right;
    margin-bottom: .35rem;
}

.setup-checklist-progress {
    height: 6px;
    background: rgba(0,0,0,.06);
    border-radius: 999px;
    overflow: hidden;
}

[data-theme="dark"] .setup-checklist-progress { background: rgba(255,255,255,.08); }

.setup-checklist-progress-bar {
    height: 100%;
    background: linear-gradient(90deg, var(--primary), #6366f1);
    border-radius: 999px;
    transition: width .4s ease;
}

.setup-checklist-steps {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: .65rem;
}

.setup-checklist-step {
    display: flex;
    align-items: center;
    gap: .85rem;
    padding: .75rem .85rem;
    border-radius: var(--radius-md);
    background: var(--surface);
    border: 1px solid var(--border);
}

.setup-checklist-step--done {
    opacity: .72;
}

.setup-checklist-step-icon {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,.04);
    color: var(--text-muted);
    flex-shrink: 0;
}

.setup-checklist-step--done .setup-checklist-step-icon {
    background: rgba(16,185,129,.12);
    color: #10b981;
}

.setup-checklist-step-body { flex: 1; min-width: 0; }

.setup-checklist-step-label {
    font-weight: 600;
    font-size: .92rem;
}

.setup-checklist-step-desc {
    font-size: .82rem;
    color: var(--text-muted);
}

.setup-checklist-optional {
    font-size: .68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--text-muted);
    margin-left: .35rem;
}

.setup-checklist-step-action { flex-shrink: 0; }

.setup-checklist-dismiss { margin-top: .75rem; text-align: right; }

/* ─── Tenant Welcome ────────────────────────────────────────────── */
.tenant-welcome {
    background: linear-gradient(135deg, rgba(99,102,241,.08), rgba(6,182,212,.06));
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.tenant-welcome-inner {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 1.5rem;
    padding: 1.5rem;
}

.tenant-welcome-badge {
    display: inline-flex;
    align-items: center;
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #6366f1;
    margin-bottom: .35rem;
}

.tenant-welcome-title {
    font-size: 1.25rem;
    font-weight: 800;
    margin-bottom: .5rem;
}

.tenant-welcome-text { color: var(--text-muted); }

.tenant-welcome-steps {
    margin: 0 0 1rem;
    padding-left: 1.1rem;
    color: var(--text-muted);
    font-size: .88rem;
}

.tenant-welcome-steps li + li { margin-top: .35rem; }

.tenant-welcome-visual {
    display: flex;
    flex-direction: column;
    gap: .75rem;
    justify-content: center;
}

.tenant-welcome-card {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .85rem 1rem;
    border-radius: var(--radius-md);
    background: var(--surface);
    border: 1px solid var(--border);
    font-weight: 600;
    font-size: .88rem;
}

.tenant-welcome-card i {
    font-size: 1.1rem;
    color: var(--primary);
}

.tenant-welcome-card--accent i { color: #06b6d4; }

/* ─── Trial Phase Banner ────────────────────────────────────────── */
.trial-phase-banner-slot:not(:empty) {
    margin-bottom: 1.25rem;
}

.trial-phase-banner-slot:empty {
    display: none;
}

.trial-phase-banner {
    padding: 1rem 1.15rem;
    background: linear-gradient(135deg, rgba(26,58,107,.05), rgba(99,102,241,.04));
    border: 1px solid var(--border);
    border-left: 3px solid var(--primary);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

.trial-phase-banner--urgent {
    background: linear-gradient(135deg, rgba(245,158,11,.08), rgba(239,68,68,.05));
    border-color: rgba(245, 158, 11, .35);
    border-left-color: #d97706;
}

.trial-phase-banner-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem 1.25rem;
    flex-wrap: wrap;
}

.trial-phase-banner-main {
    display: flex;
    align-items: flex-start;
    gap: .85rem;
    flex: 1;
    min-width: min(100%, 280px);
}

.trial-phase-banner-icon {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--primary-soft);
    color: var(--primary);
    flex-shrink: 0;
    font-size: 1.05rem;
}

.trial-phase-banner--urgent .trial-phase-banner-icon {
    background: rgba(245,158,11,.15);
    color: #d97706;
}

.trial-phase-banner-copy {
    flex: 1;
    min-width: 0;
}

.trial-phase-banner-headline-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .45rem .65rem;
    margin-bottom: .25rem;
}

.trial-phase-banner-badge {
    display: inline-flex;
    align-items: center;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--primary);
    background: var(--primary-soft);
    padding: .18rem .5rem;
    border-radius: 99px;
}

.trial-phase-banner--urgent .trial-phase-banner-badge {
    color: #b45309;
    background: rgba(245,158,11,.15);
}

.trial-phase-banner-title {
    font-size: .95rem;
    font-weight: 700;
    line-height: 1.35;
}

.trial-phase-banner-meta {
    font-size: .84rem;
    color: var(--text-muted);
    line-height: 1.45;
}

.trial-phase-banner-cta {
    flex-shrink: 0;
    white-space: nowrap;
}

@media (max-width: 575.98px) {
    .trial-phase-banner {
        padding: .95rem 1rem;
    }

    .trial-phase-banner-cta {
        width: 100%;
    }
}

@media (max-width: 767.98px) {
    .tenant-welcome-inner { grid-template-columns: 1fr; }
    .tenant-welcome-visual { flex-direction: row; flex-wrap: wrap; }
    .tenant-welcome-card { flex: 1 1 140px; }
    .setup-checklist-step { flex-wrap: wrap; }
    .setup-checklist-step-action { width: 100%; margin-left: calc(28px + .85rem); }
    .tenant-home-hero-inner { flex-direction: column; align-items: stretch; }
    .tenant-home-cta { width: 100%; }
    .tenant-quick-help { flex-wrap: wrap; }
}

/* ─── Tenant Home ─────────────────────────────────────────────────── */
.tenant-home-hero {
    background: linear-gradient(135deg, rgba(99,102,241,.1), rgba(6,182,212,.08));
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}

.tenant-home-hero-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem;
    flex-wrap: wrap;
}

.tenant-home-cta { white-space: nowrap; }

.tenant-status-strip {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.tenant-status-pill {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .45rem .85rem;
    border-radius: 999px;
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--text);
    text-decoration: none;
    font-size: .88rem;
    font-weight: 600;
    transition: border-color var(--transition), background var(--transition);
}

.tenant-status-pill:hover {
    border-color: var(--primary);
    color: var(--primary);
}

.tenant-status-pill--open {
    background: rgba(99,102,241,.08);
    border-color: rgba(99,102,241,.2);
    color: #4f46e5;
}

.tenant-quick-help {
    display: flex;
    align-items: center;
    gap: .85rem;
    padding: 1rem 1.15rem;
    border-radius: var(--radius-md);
    background: var(--surface);
    border: 1px solid var(--border);
}

.tenant-quick-help-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(26,58,107,.08);
    color: var(--primary);
    flex-shrink: 0;
}

/* ─── Tenant Contact ──────────────────────────────────────────────── */
.tenant-contact-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 1.25rem;
    height: 100%;
}

.tenant-contact-head {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin-bottom: 1rem;
    color: var(--primary);
}

.tenant-contact-head i { font-size: 1.1rem; }

.tenant-contact-title { font-size: 1rem; font-weight: 700; }

.tenant-contact-section + .tenant-contact-section { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--border); }

.tenant-contact-label {
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--text-muted);
    margin-bottom: .5rem;
}

.tenant-contact-unit + .tenant-contact-unit { margin-top: .65rem; }

.tenant-contact-meta {
    font-size: .82rem;
    color: var(--text-muted);
    margin-top: .15rem;
}

.tenant-contact-units {
    font-size: .86rem;
    margin-top: .35rem;
}

.tenant-contact-units li {
    padding: .1rem 0;
    color: var(--text);
}

.tenant-contact-units li::before {
    content: '·';
    margin-right: .35rem;
    color: var(--text-muted);
}

.tenant-contact-person + .tenant-contact-person {
    margin-top: .85rem;
    padding-top: .85rem;
    border-top: 1px dashed var(--border);
}

.tenant-contact-person-name {
    font-weight: 600;
    margin-bottom: .35rem;
}

.tenant-contact-role {
    display: inline-block;
    margin-left: .35rem;
    font-size: .72rem;
    font-weight: 600;
    color: var(--text-muted);
}

.tenant-contact-links {
    font-size: .86rem;
}

.tenant-contact-links li + li { margin-top: .25rem; }

.tenant-contact-links a {
    color: var(--primary);
    text-decoration: none;
}

.tenant-contact-links a:hover { text-decoration: underline; }

.tenant-contact-empty,
.tenant-contact-note {
    font-size: .86rem;
    color: var(--text-muted);
}

.tenant-contact-more {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    margin-top: 1rem;
    font-size: .86rem;
    font-weight: 600;
    color: var(--primary);
    text-decoration: none;
}

.tenant-contact-more:hover { text-decoration: underline; }

/* ─── Tenant Help Page ───────────────────────────────────────────── */
.tenant-help-steps {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.tenant-help-steps li {
    display: flex;
    gap: .85rem;
    align-items: flex-start;
}

.tenant-help-step-num {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(26,58,107,.1);
    color: var(--primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    flex-shrink: 0;
}

.tenant-help-steps p {
    margin: .2rem 0 0;
    color: var(--text-muted);
    font-size: .9rem;
}

.tenant-help-faq details {
    border-bottom: 1px solid var(--border);
    padding: .75rem 0;
}

.tenant-help-faq details:last-child { border-bottom: 0; }

.tenant-help-faq summary {
    cursor: pointer;
    font-weight: 600;
    list-style: none;
}

.tenant-help-faq summary::-webkit-details-marker { display: none; }

.tenant-help-faq p {
    margin: .5rem 0 0;
    color: var(--text-muted);
    font-size: .9rem;
}

/* ─── Kontext-Handbuch (Sidebar + Mobile) ────────────────────────── */
.handbook-panel-toggle {
    margin-bottom: 1.25rem;
}

.handbook-panel-toggle-label {
    font-size: .95rem;
    color: var(--text);
}

.handbook-panel-switch {
    flex-shrink: 0;
    padding-left: 2.75rem;
}

.handbook-panel-switch .form-check-input {
    width: 2.5rem;
    height: 1.3rem;
    cursor: pointer;
}

.handbook-panel-switch .form-check-label {
    cursor: pointer;
    white-space: nowrap;
}

/* Sidebar nur wenn Nutzer auf /hilfe eingeschaltet hat */
.app-main--has-help .context-help-sidebar {
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
}

.app-main--help-enabled .context-help-sidebar {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
}

.app-main--help-enabled .app-content {
    padding-right: calc(1.5rem + 300px);
    transition: padding-right .25s ease;
}

.app-main--help-enabled.app-main--help-collapsed .app-content {
    padding-right: calc(1.5rem + 48px);
}

.context-help-sidebar {
    position: fixed;
    top: 5.5rem;
    right: max(1rem, calc((100vw - 1400px) / 2 + 1rem));
    width: 280px;
    max-height: calc(100vh - 7rem);
    z-index: 1020;
    transition: transform .25s ease, opacity .25s ease, visibility .25s ease;
}

.app-main--help-collapsed .context-help-sidebar {
    transform: translateX(calc(100% - 42px));
}

.app-main--help-collapsed .context-help-sidebar-body {
    display: none;
}

.app-main--help-collapsed .context-help-sidebar-inner {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px 0 0 12px;
    box-shadow: var(--shadow-sm);
    width: 42px;
    overflow: visible;
}

.app-main--help-collapsed .context-help-collapse {
    left: 50%;
    transform: translateX(-50%);
    position: relative;
    margin-top: .5rem;
}

.context-help-sidebar-inner {
    max-height: calc(100vh - 7rem);
    overflow: auto;
    position: relative;
}

.context-help-collapse {
    position: absolute;
    top: .65rem;
    left: -.5rem;
    transform: translateX(-100%);
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    cursor: pointer;
    box-shadow: var(--shadow-sm);
    z-index: 1;
}

.app-main--help-collapsed .context-help-collapse i {
    transform: rotate(180deg);
}

.context-help-sidebar-body {
    padding: 1rem 1.1rem 1.1rem;
}

.context-help-panel-head {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    margin-bottom: .65rem;
    padding-right: .5rem;
}

.context-help-panel-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: rgba(26, 58, 107, .1);
    color: var(--primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.context-help-panel-title {
    font-size: .95rem;
    font-weight: 700;
    margin: 0;
    line-height: 1.3;
}

.context-help-panel-intro {
    font-size: .86rem;
    color: var(--text-muted);
    margin-bottom: .85rem;
}

.context-help-steps {
    list-style: none;
    padding: 0;
    margin: 0 0 .85rem;
    display: flex;
    flex-direction: column;
    gap: .65rem;
}

.context-help-steps li {
    display: flex;
    gap: .55rem;
    align-items: flex-start;
}

.context-help-step-num {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: rgba(26, 58, 107, .1);
    color: var(--primary);
    font-size: .72rem;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.context-help-steps p {
    margin: .15rem 0 0;
    font-size: .8rem;
    color: var(--text-muted);
}

.context-help-tips {
    margin: 0 0 .85rem;
    padding-left: 1.1rem;
    font-size: .84rem;
    color: var(--text-muted);
}

.context-help-tips li + li { margin-top: .35rem; }

.context-help-faq details { padding: .5rem 0; }

.context-help-faq summary { font-size: .86rem; }

.context-help-faq p { font-size: .82rem; }

.context-help-more {
    display: inline-flex;
    align-items: center;
    font-size: .84rem;
    font-weight: 600;
    color: var(--primary);
    text-decoration: none;
    margin-top: .25rem;
}

.context-help-more:hover { text-decoration: underline; }

.context-help-panel-footer {
    margin-top: 1rem;
    padding-top: .85rem;
    border-top: 1px solid var(--border);
}

.context-help-panel-switch .form-check-input {
    cursor: pointer;
}

.context-help-panel-switch .form-check-label {
    cursor: pointer;
    font-size: .84rem;
}

.context-help-panel-footer-hint {
    margin-top: .45rem;
    font-size: .75rem;
    color: var(--text-muted);
    line-height: 1.45;
}

.context-help-panel-footer-hint a {
    color: var(--primary);
    font-weight: 600;
    text-decoration: none;
}

.context-help-panel-footer-hint a:hover {
    text-decoration: underline;
}

/* Mobile FAB + Sheet — nur wenn Seiten-Hilfe aktiv */
.context-help-fab {
    display: none;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    position: fixed;
    bottom: 1.25rem;
    right: 1.25rem;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    border: none;
    background: var(--primary);
    color: #fff;
    font-size: 1.45rem;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 20px rgba(26, 58, 107, .35);
    z-index: 1040;
    cursor: pointer;
}

.context-help-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .4);
    z-index: 1045;
    opacity: 0;
    transition: opacity .25s ease;
}

.context-help-backdrop.is-open { opacity: 1; }

.context-help-sheet {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    max-height: 75vh;
    background: var(--surface);
    border-radius: 16px 16px 0 0;
    z-index: 1050;
    transform: translateY(100%);
    transition: transform .28s ease;
    display: flex;
    flex-direction: column;
    box-shadow: 0 -8px 32px rgba(0, 0, 0, .15);
}

.context-help-sheet.is-open { transform: translateY(0); }

.context-help-sheet-handle {
    width: 40px;
    height: 4px;
    border-radius: 2px;
    background: var(--border);
    margin: .65rem auto 0;
    flex-shrink: 0;
}

.context-help-sheet-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .75rem 1.25rem;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}

.context-help-sheet-title {
    font-size: 1rem;
    font-weight: 700;
    margin: 0;
}

.context-help-sheet-close {
    border: none;
    background: transparent;
    color: var(--text-muted);
    font-size: 1.1rem;
    padding: .25rem;
    cursor: pointer;
}

.context-help-sheet-body {
    padding: 1rem 1.25rem 1.5rem;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

body.context-help-sheet-open { overflow: hidden; }

/* Vollständiges Handbuch (/hilfe) */
.handbook-toc {
    position: sticky;
    top: 1rem;
}

.handbook-toc-title {
    font-size: .75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--text-muted);
    margin-bottom: .65rem;
}

.handbook-toc-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.handbook-toc-list li.is-hidden { display: none; }

.handbook-toc-link {
    display: block;
    padding: .4rem 0;
    font-size: .88rem;
    color: var(--text);
    text-decoration: none;
    border-bottom: 1px solid var(--border);
}

.handbook-toc-link:hover { color: var(--primary); }

.handbook-toc-list li:last-child .handbook-toc-link { border-bottom: 0; }

.handbook-sidebar-sticky { position: sticky; top: 1rem; }

.handbook-chapter:target {
    outline: 2px solid rgba(26, 58, 107, .2);
    outline-offset: 4px;
}

@media (max-width: 991.98px) {
    .app-main--help-enabled .app-content { padding-right: 1rem; }
    .context-help-sidebar { display: none; }
    .app-main--help-enabled .context-help-fab {
        display: inline-flex;
        visibility: visible;
        opacity: 1;
        pointer-events: auto;
    }
}

@media (min-width: 992px) {
    .context-help-fab,
    .context-help-sheet,
    .context-help-backdrop { display: none !important; }
}

/* ─── KI-Import Wizard ───────────────────────────────────────────── */
.smart-import-steps .nav-link {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    color: var(--bs-secondary-color);
    background: transparent;
    border: 1px solid rgba(0, 0, 0, .08);
    border-radius: 999px;
    padding: .35rem .85rem;
    font-size: .875rem;
}

.smart-import-steps .nav-link.active {
    color: var(--bs-primary);
    border-color: rgba(26, 58, 107, .25);
    background: rgba(26, 58, 107, .06);
    font-weight: 600;
}

.smart-import-steps .nav-link.done {
    color: var(--bs-success);
    border-color: rgba(25, 135, 84, .2);
}

.smart-import-steps .step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.35rem;
    height: 1.35rem;
    border-radius: 50%;
    font-size: .75rem;
    font-weight: 700;
    background: rgba(0, 0, 0, .06);
}

/* ─── Profile page ───────────────────────────────────────────────── */
.profile-page {
    max-width: 1120px;
}

.profile-hero {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1.25rem 1.5rem;
    padding: 1.5rem 1.65rem;
    margin-bottom: 1.5rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background:
        radial-gradient(ellipse 80% 120% at 100% 0%, rgba(26, 58, 107, .08), transparent 55%),
        radial-gradient(ellipse 60% 80% at 0% 100%, rgba(6, 182, 212, .06), transparent 50%),
        var(--surface);
    box-shadow: var(--shadow-sm);
}

[data-theme="dark"] .profile-hero {
    background:
        radial-gradient(ellipse 80% 120% at 100% 0%, rgba(43, 114, 200, .12), transparent 55%),
        radial-gradient(ellipse 60% 80% at 0% 100%, rgba(6, 182, 212, .08), transparent 50%),
        var(--surface);
}

.profile-hero-main {
    display: flex;
    align-items: center;
    gap: 1.1rem;
    min-width: 0;
}

.profile-avatar {
    width: 64px;
    height: 64px;
    border-radius: var(--radius-lg);
    background: linear-gradient(145deg, var(--primary-light), var(--primary));
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    font-weight: 800;
    letter-spacing: -.02em;
    flex-shrink: 0;
    box-shadow: var(--shadow-primary);
}

.profile-hero-badge { margin-bottom: .45rem; }

.profile-hero-title {
    font-size: 1.65rem;
    text-wrap: balance;
}

.profile-hero-subtitle {
    max-width: 36rem;
    line-height: 1.5;
}

.profile-hero-meta {
    display: flex;
    flex-direction: column;
    gap: .65rem;
    min-width: min(100%, 240px);
    padding: .85rem 1rem;
    border-radius: var(--radius);
    background: var(--surface-raised);
    border: 1px solid var(--border);
}

.profile-hero-meta-item {
    display: flex;
    flex-direction: column;
    gap: .1rem;
}

.profile-hero-meta-label {
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--text-muted);
}

.profile-hero-meta-value {
    font-size: .875rem;
    font-weight: 600;
    color: var(--text);
    word-break: break-word;
}

.profile-email-pending {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.1rem 1.25rem;
    border-radius: var(--radius-lg);
    border: 1px solid rgba(245, 158, 11, .35);
    background: linear-gradient(135deg, rgba(245, 158, 11, .1), rgba(245, 158, 11, .04));
}

[data-theme="dark"] .profile-email-pending {
    border-color: rgba(251, 191, 36, .28);
    background: linear-gradient(135deg, rgba(251, 191, 36, .12), rgba(251, 191, 36, .04));
}

.profile-email-pending-icon {
    width: 42px;
    height: 42px;
    border-radius: var(--radius-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 1.15rem;
    color: #d97706;
    background: rgba(245, 158, 11, .15);
}

[data-theme="dark"] .profile-email-pending-icon {
    color: #fbbf24;
    background: rgba(251, 191, 36, .15);
}

.profile-email-pending-title {
    display: block;
    font-size: .95rem;
    margin-bottom: .35rem;
}

.profile-email-pending-text {
    font-size: .875rem;
    color: var(--text-muted);
    line-height: 1.55;
}

.profile-form-card:hover {
    transform: none;
}

.profile-form-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    padding: .25rem 0 1rem;
}

.profile-hint {
    display: flex;
    align-items: flex-start;
    gap: .55rem;
    padding: .7rem .9rem;
    border-radius: var(--radius-sm);
    font-size: .8125rem;
    line-height: 1.45;
}

.profile-hint i {
    flex-shrink: 0;
    margin-top: .1rem;
}

.profile-hint--info {
    color: var(--text-muted);
    background: var(--primary-soft);
    border: 1px solid var(--primary-glow);
}

.profile-hint--success {
    color: var(--text-muted);
    background: rgba(16, 185, 129, .08);
    border: 1px solid rgba(16, 185, 129, .2);
}

.profile-hint--success a {
    color: var(--primary);
    font-weight: 600;
}

.profile-notify-options {
    display: flex;
    flex-direction: column;
    gap: .55rem;
}

.profile-notify-option {
    display: block;
    margin: 0;
    cursor: pointer;
}

.profile-notify-option input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.profile-notify-option-body {
    display: flex;
    align-items: center;
    gap: .85rem;
    padding: .85rem 1rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    transition: border-color var(--transition), background var(--transition), box-shadow var(--transition);
}

.profile-notify-option:hover .profile-notify-option-body {
    border-color: var(--border-strong);
    background: var(--surface-raised);
}

.profile-notify-option input:focus-visible + .profile-notify-option-body {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

.profile-notify-option input:checked + .profile-notify-option-body {
    border-color: var(--primary);
    background: var(--primary-soft);
    box-shadow: inset 0 0 0 1px var(--primary-glow);
}

.profile-notify-option-icon {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 1rem;
    color: var(--primary);
    background: rgba(26, 58, 107, .08);
}

[data-theme="dark"] .profile-notify-option-icon {
    background: rgba(43, 114, 200, .15);
    color: #4a8fd8;
}

.profile-notify-option-copy {
    display: flex;
    flex-direction: column;
    gap: .1rem;
    min-width: 0;
}

.profile-notify-option-copy strong {
    font-size: .875rem;
    font-weight: 600;
    color: var(--text);
}

.profile-notify-option-copy small {
    font-size: .78rem;
    color: var(--text-muted);
    line-height: 1.35;
}

.profile-sidebar {
    position: sticky;
    top: 1rem;
}

.profile-sidebar-card:hover {
    transform: none;
}

.profile-sidebar-title {
    font-size: .92rem;
    font-weight: 700;
    margin: 0 0 .85rem;
    letter-spacing: -.01em;
}

.profile-meta-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.profile-meta-list li {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    padding: .65rem 0;
    border-bottom: 1px solid var(--border);
}

.profile-meta-list li:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.profile-meta-list li:first-child {
    padding-top: 0;
}

.profile-meta-label {
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--text-muted);
}

.profile-meta-value {
    font-size: .875rem;
    font-weight: 600;
    color: var(--text);
}

.profile-meta-value--wrap {
    word-break: break-word;
    line-height: 1.45;
}

.profile-quick-links {
    display: flex;
    flex-direction: column;
    gap: .35rem;
}

.profile-quick-link {
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .65rem .75rem;
    border-radius: var(--radius-sm);
    text-decoration: none;
    color: var(--text);
    font-size: .875rem;
    font-weight: 600;
    transition: background var(--transition), color var(--transition);
}

.profile-quick-link > i:first-child {
    width: 1.25rem;
    text-align: center;
    color: var(--primary);
    font-size: .95rem;
}

.profile-quick-link-arrow {
    margin-left: auto;
    font-size: .75rem;
    color: var(--text-muted);
    transition: transform var(--transition), color var(--transition);
}

.profile-quick-link:hover {
    background: var(--primary-soft);
    color: var(--primary);
}

.profile-quick-link:hover .profile-quick-link-arrow {
    color: var(--primary);
    transform: translateX(2px);
}

.profile-welcome-desc {
    font-size: .8125rem;
    color: var(--text-muted);
    line-height: 1.45;
}

@media (max-width: 991.98px) {
    .profile-sidebar { position: static; }
    .profile-hero-main { align-items: flex-start; }
    .profile-hero-meta { width: 100%; }
}

@media (max-width: 575.98px) {
    .profile-hero { padding: 1.15rem; }
    .profile-avatar { width: 52px; height: 52px; font-size: 1rem; }
    .profile-hero-title { font-size: 1.35rem; }
    .profile-form-actions .btn { width: 100%; justify-content: center; }
}

/* ─── Reduced motion ─────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
    }
}