/* ── Reset & Base ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
    /* Farben */
    --bg:             #F7F8FA;
    --bg-card:        #FFFFFF;
    --bg-input:       #FFFFFF;
    --border:         #E5E7EB;
    --border-focus:   #E53935;
    --text:           #111827;
    --text-muted:     #6B7280;
    --text-helper:    #9CA3AF;
    --navbar-bg:      #373737;
    --accent:         #E53935;
    --accent-hover:   #C62828;
    --accent-shadow:  rgba(229,57,53,0.18);
    --success:        #16a34a;
    --warning:        #d97706;
    --danger:         #dc2626;
    --purple:         #7c3aed;

    /* Spacing */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 16px;
    --space-4: 24px;
    --space-5: 32px;
    --space-6: 48px;

    /* Border Radius */
    --radius-sm: 6px;
    --radius:    8px;
    --radius-md: 12px;
    --radius-lg: 16px;

    /* Shadows */
    --shadow-xs: 0 1px 3px rgba(0,0,0,0.04);
    --shadow-sm: 0 2px 8px rgba(0,0,0,0.06);
    --shadow:    0 4px 16px rgba(0,0,0,0.06);
    --shadow-md: 0 8px 24px rgba(0,0,0,0.08);
    --shadow-lg: 0 16px 40px rgba(0,0,0,0.10);

    /* Transitions */
    --transition: all 0.15s ease;
}

html, body {
    height: 100%;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 14px;
    line-height: 1.6;
    background: var(--bg);
    color: var(--text);
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
strong { font-weight: 600; }

/* ── Layout ── */
.main-content {
    max-width: 1280px;
    margin: 0 auto;
    padding: var(--space-5) var(--space-4);
    min-height: calc(100vh - 52px - 48px);
}

/* Admin main content (sidebar pushes it right) */
.admin-main {
    margin-left: 232px;
    max-width: none;
}

.footer {
    text-align: center;
    padding: 1rem;
    color: var(--text-muted);
    border-top: 1px solid var(--border);
    font-size: 12px;
    background: var(--bg-card);
}

/* ── Navbar ── */
.navbar {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    padding: 0 24px;
    height: 52px;
    background: var(--navbar-bg);
    position: sticky;
    top: 0;
    z-index: 1000;
    box-shadow: 0 1px 0 rgba(0,0,0,0.12), 0 2px 8px rgba(0,0,0,0.18);
}

.nav-brand {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 700;
    font-size: 15px;
    color: #ffffff;
    text-decoration: none;
    white-space: nowrap;
    letter-spacing: -0.01em;
    flex-shrink: 0;
}
.nav-brand:hover { text-decoration: none; }

.nav-links {
    display: flex;
    align-items: center;
    gap: 4px;
    flex: 1;
}

.navbar .nav-link,
.navbar .nav-item > a,
.navbar-nav > li > a,
.nav-link,
.nav-item > a {
    height: 52px;
    display: inline-flex;
    align-items: center;
    padding: 0 14px;
    border-radius: 0;
    color: rgba(255,255,255,0.88);
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
    transition: all 0.15s ease;
}
.navbar .nav-link:hover,
.navbar .nav-item > a:hover,
.nav-link:hover,
.nav-item > a:hover {
    background: rgba(255,255,255,0.12);
    color: #fff;
    text-decoration: none;
}
.navbar .nav-link.active,
.navbar .nav-item.active > a,
.navbar .nav-link[aria-current="page"],
.nav-link.active,
.nav-item.active > a {
    background: var(--navbar-active, rgba(255,255,255,0.18));
    color: #fff;
    font-weight: 600;
}
.navbar .dropdown.active > a,
.navbar .dropdown-toggle.active {
    background: var(--navbar-active, rgba(255,255,255,0.18));
    color: #fff;
    font-weight: 600;
}

/* ── Nav Icon Buttons ── */
.nav-icon-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 6px;
    background: none;
    border: none;
    cursor: pointer;
    color: rgba(255,255,255,0.9);
    text-decoration: none;
    transition: var(--transition);
    flex-shrink: 0;
}
.nav-icon-btn:hover,
.nav-icon-btn.active {
    background: rgba(255,255,255,0.15);
    color: #fff;
    text-decoration: none;
}

/* ── Nav Dropdown ── */
.nav-dropdown { position: relative; }

.nav-dropdown-toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    border-radius: 6px;
    color: #fff;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    background: none;
    border: none;
    white-space: nowrap;
    font-family: inherit;
    line-height: 1.4;
    transition: var(--transition);
}
.nav-dropdown-toggle:hover,
.nav-dropdown.open .nav-dropdown-toggle,
.nav-dropdown-toggle.active {
    background: rgba(255,255,255,0.15);
    color: #fff;
}

.nav-dropdown-arrow {
    font-size: 14px;
    opacity: 0.7;
    transition: transform 0.18s;
    line-height: 1;
    display: inline-block;
}
.nav-dropdown.open .nav-dropdown-arrow { transform: rotate(180deg); }

.nav-icon {
    width: 18px;
    height: 18px;
    stroke: rgba(255,255,255,0.85);
    stroke-width: 1.75;
    cursor: pointer;
    transition: var(--transition);
    flex-shrink: 0;
}
.nav-icon-btn:hover .nav-icon,
.nav-icon-btn.active .nav-icon { stroke: white; }

.nav-chevron {
    width: 14px;
    height: 14px;
    stroke: rgba(255,255,255,0.7);
    stroke-width: 2;
    margin-left: 4px;
    transition: transform 0.18s;
    flex-shrink: 0;
}
.nav-dropdown.open .nav-chevron { transform: rotate(180deg); }

.nav-dropdown::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    height: 10px;
}

.nav-dropdown-menu {
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.12s ease, visibility 0s linear 0.15s;
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
    min-width: 200px;
    z-index: 1000;
    overflow: hidden;
    padding: 8px;
}
.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown.open .nav-dropdown-menu {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    transition: opacity 0.12s ease, visibility 0s linear 0s;
}

.nav-dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    border-radius: 8px;
    font-size: 14px;
    color: var(--text);
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.1s;
    font-family: inherit;
}
.nav-dropdown-item:hover {
    background: #F7F8FA;
    color: var(--text);
    text-decoration: none;
}
.nav-dropdown-item.active {
    background: #F7F8FA;
    color: var(--text);
    font-weight: 600;
}
button.nav-dropdown-item {
    width: 100%;
    text-align: left;
    border: none;
    cursor: pointer;
    background: none;
    line-height: inherit;
}
.nav-dropdown-sep {
    border: none;
    border-top: 1px solid var(--border);
    margin: 4px 8px;
}
.nav-dropdown-item--danger { color: var(--danger) !important; }
.nav-dropdown-item--danger:hover { background: #fef2f2; }

/* ── Tools Mega-Menü ── */
.nav-mega-menu.nav-dropdown-menu {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
    padding: 16px;
    min-width: 480px;
    overflow: visible;
}
.nav-mega-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 14px;
    border-radius: 8px;
    text-decoration: none;
    transition: background .15s;
    cursor: pointer;
}
.nav-mega-icon {
    width: 16px;
    height: 16px;
    margin-top: 2px;
    flex-shrink: 0;
}
.nav-mega-item:hover { background: #F7F8FA; text-decoration: none; }
.nav-mega-item__name {
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
    line-height: 1.3;
}
.nav-mega-item__desc {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 2px;
    line-height: 1.3;
}
.nav-mega-item--locked .nav-mega-item__name { color: #9CA3AF; font-style: italic; }
.nav-mega-item--locked .nav-mega-item__desc { color: #D1D5DB; }

/* Konto-Dropdown Profil-Header */
.nav-dd-profile {
    padding: 10px 16px 8px;
}
.nav-dd-name  { font-size: 14px; font-weight: 600; color: var(--text); margin-bottom: 1px; }
.nav-dd-email { font-size: 12px; color: var(--text-muted); margin-bottom: 6px; }
.nav-dd-role  { font-size: 11px; color: var(--text-muted); margin-top: 2px; }

.nav-dd-plan {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px 0;
    font-size: 12px;
}
.nav-dd-plan-name { color: #374151; font-weight: 500; }
.nav-dd-upgrade {
    color: #DE3031;
    text-decoration: none;
    font-size: 11px;
    font-weight: 600;
}
.nav-dd-upgrade:hover { text-decoration: underline; }

.nav-dd-credits {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 3px 0;
    font-size: 12px;
    color: #374151;
}
.nav-dd-credits-val { color: #DE3031; display: inline; }
.nav-dd-credits-buy {
    color: #DE3031;
    text-decoration: none;
    font-size: 11px;
    font-weight: 600;
}
.nav-dd-credits-buy:hover { text-decoration: underline; }

.mm-user-info {
    padding: 10px 16px 8px;
    border-bottom: 1px solid #f3f4f6;
    margin-bottom: 4px;
}
.mm-user-plan {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 13px;
    margin-bottom: 4px;
}

.nav-user {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-left: auto;
    flex-shrink: 0;
}

.nav-username {
    color: rgba(255,255,255,0.9);
    font-size: 13px;
}

.badge-nav {
    background: rgba(255,255,255,0.2);
    color: #fff;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    padding: 1px 5px;
    margin-left: 4px;
}

/* ── Notification Bell ── */
.notif-bell { position: relative; display: inline-flex; align-items: center; }
.notif-bell-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 5px 6px;
    color: rgba(255,255,255,0.9);
    position: relative;
    display: flex;
    align-items: center;
    border-radius: 6px;
    transition: var(--transition);
}
.notif-bell-btn:hover { background: rgba(255,255,255,0.15); color: #fff; }
.notif-badge {
    display: none;
    position: absolute;
    top: 0;
    right: 0;
    background: #fff;
    color: #DE3031;
    border-radius: 50%;
    font-size: 10px;
    font-weight: 700;
    min-width: 16px;
    height: 16px;
    line-height: 16px;
    text-align: center;
    padding: 0 2px;
}
.notif-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + .5rem);
    right: 0;
    width: 320px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0,0,0,.15);
    border: 1px solid #e0e2e6;
    z-index: 9999;
}
.notif-dropdown-head {
    padding: .75rem 1rem;
    border-bottom: 1px solid #f0f1f3;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.notif-title { font-size: 13px; font-weight: 700; color: #1a1a1a; }
.notif-read-all { background: none; border: none; cursor: pointer; font-size: 12px; color: #6b7280; font-family: inherit; }
.notif-list { max-height: 300px; overflow-y: auto; }
.notif-footer { padding: .6rem 1rem; border-top: 1px solid #f0f1f3; text-align: center; }
.notif-footer a { font-size: 12px; color: #DE3031; text-decoration: none; font-weight: 600; }

/* ── Admin Sub-Navigation ── */
.admin-nav {
    background: var(--accent-hover);
    padding: 0 1.5rem;
    display: flex;
    position: sticky;
    top: 52px;
    z-index: 99;
    box-shadow: 0 2px 6px rgba(0,0,0,0.18);
}

.admin-nav-links {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0;
}

.admin-nav-link {
    padding: 0.5rem 0.9rem;
    color: rgba(255,255,255,0.82);
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.15s, color 0.15s;
    border-bottom: 2px solid transparent;
}
.admin-nav-link:hover {
    background: rgba(255,255,255,0.12);
    color: #fff;
    text-decoration: none;
}
.admin-nav-link.active {
    color: #fff;
    font-weight: 600;
    border-bottom: 2px solid rgba(255,255,255,0.85);
    background: rgba(255,255,255,0.1);
}

.admin-nav-sep {
    display: inline-block;
    width: 1px;
    height: 18px;
    background: rgba(255,255,255,0.25);
    margin: 0 0.25rem;
    align-self: center;
}

.admin-nav + main.main-content {
    min-height: calc(100vh - 100px - 48px);
}

/* ── Admin Sidebar ── */
.admin-sidebar {
    width: 232px;
    background: #fff;
    border-right: 1px solid var(--border);
    position: fixed;
    top: 52px;
    left: 0;
    height: calc(100vh - 52px);
    overflow-y: auto;
    z-index: 50;
}

.sidebar-inner {
    padding: 0.75rem 0 1.5rem;
}

.sidebar-section-sep {
    border: none;
    border-top: 1px solid #f3f4f6;
    margin: 0.4rem 0;
}

.sidebar-link {
    display: flex;
    align-items: center;
    padding: 0.58rem 1.25rem;
    font-size: 13.5px;
    font-weight: 500;
    color: var(--text-muted);
    text-decoration: none;
    border-left: 3px solid transparent;
    transition: var(--transition);
}
.sidebar-link:hover  { background: var(--bg); color: var(--text); text-decoration: none; }
.sidebar-link.active { background: #fef2f2; color: var(--accent); border-left-color: var(--accent); font-weight: 600; }

.sidebar-group { margin-top: 1px; }

.sidebar-group-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 0.45rem 1rem 0.45rem 1.25rem;
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--text-helper);
    background: none;
    border: none;
    border-left: 3px solid transparent;
    cursor: pointer;
    font-family: inherit;
    transition: color 0.12s;
}
.sidebar-group-btn:hover { color: var(--text-muted); }

.sidebar-arrow {
    font-size: 11px;
    opacity: 0.5;
    transition: transform 0.18s;
    display: inline-block;
}
.sidebar-group.open > .sidebar-group-btn .sidebar-arrow { transform: rotate(90deg); }

.sidebar-group-items { display: none; padding-bottom: 2px; }
.sidebar-group.open > .sidebar-group-items { display: block; }

.sidebar-sublink {
    display: block;
    padding: 0.48rem 1.25rem 0.48rem 2rem;
    font-size: 13px;
    color: var(--text-muted);
    text-decoration: none;
    border-left: 3px solid transparent;
    transition: var(--transition);
}
.sidebar-sublink:hover  { background: var(--bg); color: var(--text); text-decoration: none; }
.sidebar-sublink.active { background: #fef2f2; color: var(--accent); border-left-color: var(--accent); font-weight: 600; }

.sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.42);
    z-index: 1050;
}
.sidebar-overlay.visible { display: block; }

@media (max-width: 900px) {
    .admin-sidebar {
        top: 0;
        height: 100vh;
        z-index: 1100;
        transform: translateX(-100%);
        transition: transform 0.24s ease;
        box-shadow: 4px 0 24px rgba(0,0,0,0.18);
    }
    .admin-sidebar.open { transform: translateX(0); }
    .admin-main { margin-left: 0; padding: 1rem; }
}

/* ── Mobile Navigation ── */
.hamburger {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 6px 4px;
    margin-left: auto;
    flex-shrink: 0;
}
.hamburger span {
    display: block;
    width: 22px;
    height: 2px;
    background: rgba(255,255,255,0.9);
    border-radius: 2px;
    transition: transform 0.22s ease, opacity 0.22s ease;
}
.hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.mobile-menu {
    display: none;
    background: #fff;
    position: fixed;
    top: 52px;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1100;
    box-shadow: 0 6px 20px rgba(0,0,0,0.1);
    overflow-y: auto;
    border-top: 1px solid #e5e7eb;
}
.mobile-menu.open { display: block; }

.mobile-menu-close-row {
    display: flex;
    justify-content: flex-end;
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid #f0f1f3;
}
.mobile-menu-close-btn {
    background: none;
    border: none;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    padding: 4px 10px;
    color: #6b7280;
    border-radius: 6px;
    font-family: inherit;
}
.mobile-menu-close-btn:hover { background: #f3f4f6; color: #111827; }

.mobile-menu-item {
    display: block;
    width: 100%;
    text-align: left;
    padding: 0.8rem 1.25rem;
    color: var(--accent);
    font-size: 14px;
    font-weight: 500;
    border: none;
    background: none;
    cursor: pointer;
    text-decoration: none;
    box-sizing: border-box;
    transition: background 0.12s;
    font-family: inherit;
}
.mobile-menu-item:hover  { background: #F7F8FA; color: var(--accent-hover); text-decoration: none; }
.mobile-menu-item.active { color: var(--accent); font-weight: 700; background: #fef2f2; }

.mobile-menu-sep {
    border: none;
    border-top: 1px solid #e5e7eb;
    margin: 0.3rem 0;
}

.mobile-menu-label {
    padding: 0.55rem 1.25rem 0.2rem;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--text-muted);
}

.mobile-menu-user {
    padding: 0.6rem 1.25rem 0.2rem;
    color: var(--text-muted);
    font-size: 13px;
}

.mobile-menu-admin { background: var(--accent-hover); }
.mobile-menu-admin .mobile-menu-item {
    font-size: 14px;
    padding: 0.7rem 1.25rem;
    color: rgba(255,255,255,0.88);
}

@media (max-width: 767px) {
    .nav-links,
    .nav-user   { display: none !important; }
    .hamburger  { display: flex; }
}

/* ── Mobile Menu Accordion Groups ── */
.mm-group { border-bottom: 1px solid #f0f1f3; }
.mm-group-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 0.8rem 1.25rem;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
    text-align: left;
    font-family: inherit;
    transition: background 0.12s;
}
.mm-group-header:hover { background: #F7F8FA; }
.mm-chevron { font-size: 11px; color: var(--text-muted); transition: transform 0.22s; flex-shrink: 0; }
.mm-group.open .mm-chevron { transform: rotate(180deg); }
.mm-group-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.28s ease;
    background: #FAFAFA;
}
.mm-group.open .mm-group-body { max-height: 700px; }
.mm-group-body .mobile-menu-item { padding-left: 1.75rem; }

/* ── KI-Assistent Chat Widget ── */
#ki-chat-btn {
    position: fixed; bottom: 1.5rem; right: 1.5rem; z-index: 9990;
    width: 52px; height: 52px; border-radius: 50%;
    background: var(--accent); border: none; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 4px 16px rgba(229,57,53,0.3);
    transition: transform .15s, box-shadow .15s;
}
#ki-chat-btn:hover { transform: scale(1.05); box-shadow: 0 6px 24px rgba(229,57,53,0.4); }
#ki-chat-modal {
    display: none; position: fixed; bottom: 5.5rem; right: 1.5rem; z-index: 9991;
    width: 380px; max-width: calc(100vw - 2rem);
    border-radius: 16px; box-shadow: var(--shadow-lg);
    background: #fff; overflow: hidden; flex-direction: column;
}
#ki-chat-modal.open { display: flex; }
.ki-chat-head {
    display: flex; align-items: center; gap: .75rem;
    padding: 16px 20px; min-height: 56px;
    background: var(--accent); color: #fff;
}
.ki-chat-head-info { flex: 1; }
.ki-chat-head-title { font-size: 15px; font-weight: 600; line-height: 1.2; }
.ki-chat-head-sub   { font-size: 12px; opacity: .85; margin-top: 2px; }
.ki-chat-close {
    background: none; border: none; cursor: pointer;
    color: #fff; font-size: 20px; line-height: 1; padding: 0;
    opacity: .85; flex-shrink: 0;
}
.ki-chat-close:hover { opacity: 1; }
.ki-chat-body {
    background: #F7F8FA; padding: 16px;
    min-height: 280px; max-height: 320px;
    overflow-y: auto; display: flex; flex-direction: column; gap: .75rem;
}
.ki-msg { max-width: 85%; padding: 10px 14px; font-size: 14px; line-height: 1.5; }
.ki-msg-bot  {
    background: #fff; color: var(--text);
    border-radius: 12px 12px 12px 4px;
    box-shadow: var(--shadow-xs); align-self: flex-start;
}
.ki-msg-user {
    background: var(--accent); color: #fff;
    border-radius: 12px 12px 4px 12px;
    align-self: flex-end; margin-left: auto;
}
.ki-schnell {
    padding: 8px 16px 12px; background: #F7F8FA;
    display: flex; flex-wrap: wrap; gap: 6px;
}
.ki-schnell-btn {
    background: #fff; border: 1px solid var(--border); border-radius: 20px;
    padding: 6px 14px; font-size: 12px; color: var(--text);
    cursor: pointer; white-space: nowrap;
    transition: border-color .15s, color .15s;
}
.ki-schnell-btn:hover { border-color: var(--accent); color: var(--accent); background: #fff; }
.ki-chat-footer {
    display: flex; gap: 8px; padding: 12px 16px;
    background: #fff; border-top: 1px solid var(--border);
}
.ki-chat-input {
    flex: 1; font-size: 14px; font-family: inherit;
    border: 1px solid var(--border); border-radius: 8px;
    padding: 9px 14px; outline: none;
}
.ki-chat-input:focus { border-color: var(--accent); }
.ki-chat-send {
    background: var(--accent); color: #fff; border: none;
    border-radius: 8px; padding: 9px 16px;
    cursor: pointer; font-size: 13px; font-weight: 500;
    font-family: inherit; white-space: nowrap;
}
.ki-chat-send:hover { background: var(--accent-hover); }
.ki-chat-send:disabled { opacity: .5; cursor: default; }
.ki-chat-link {
    background: #fff; border-top: 1px solid var(--border);
    padding: 10px 16px; font-size: 12px; color: var(--text-muted);
    display: flex; gap: 1rem;
}
.ki-chat-link a { color: var(--text-muted); text-decoration: none; font-weight: 500; }
.ki-chat-link a:hover { color: var(--accent); }
.ki-voice-btn {
    background: #f3f4f6; border: 1px solid var(--border);
    padding: 0 12px; font-size: 1.15em; cursor: pointer;
    border-radius: 8px; flex-shrink: 0; transition: background .15s, color .15s;
    line-height: 1;
}
.ki-voice-btn:hover { background: var(--accent); color: #fff; border-color: var(--accent); }
.ki-voice-btn.recording { background: var(--accent); color: #fff; border-color: var(--accent); animation: ki-voice-pulse .8s ease-in-out infinite; }
#ki-voice-overlay {
    display: none; position: absolute; inset: 0;
    background: rgba(220,38,38,0.95); color: #fff;
    flex-direction: column; align-items: center; justify-content: center;
    gap: 14px; z-index: 100; border-radius: 16px;
}
#ki-voice-overlay.active { display: flex; }
.ki-recording-pulse { font-size: 3.5em; animation: ki-voice-pulse 1.4s ease-in-out infinite; }
#ki-voice-timer { font-size: 2em; font-weight: 700; font-variant-numeric: tabular-nums; }
#ki-voice-status { font-size: 13px; opacity: .9; }
@keyframes ki-voice-pulse {
    0%,100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.18); opacity: .7; }
}

/* ── Cockpit Tabs ── */
.cockpit-tab-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    margin-bottom: 1.5rem;
    border-bottom: 2px solid var(--border);
}
.cockpit-tab,
.cockpit-nav-link {
    padding: 12px 16px;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-muted);
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    background: transparent;
    border-radius: 0;
    text-decoration: none;
    white-space: nowrap;
    transition: color .15s;
    display: inline-block;
}
.cockpit-tab.active,
.cockpit-nav-link.active {
    color: var(--accent);
    border-bottom: 2px solid var(--accent);
    background: transparent;
    font-weight: 600;
}
.cockpit-tab:hover,
.cockpit-nav-link:hover {
    color: var(--text);
    background: transparent;
    text-decoration: none;
}

/* ── Feature Hint Banner ── */
.feature-hint-banner {
    display: flex;
    align-items: center;
    gap: .75rem;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: 10px;
    padding: .85rem 1.25rem;
    margin-bottom: 1.5rem;
    font-size: 13px;
    color: #1e40af;
    line-height: 1.5;
}
.feature-hint-banner a { color: #2563eb; font-weight: 700; margin-left: .35rem; }

/* ── Auth Pages ── */
.auth-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 100vh;
    padding-top: 80px;
    padding-left: 1rem;
    padding-right: 1rem;
    padding-bottom: 0;
    background: #F7F8FA;
}

.auth-container {
    width: 100%;
    max-width: 520px;
}

.auth-logo {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 28px;
    text-align: center;
}

.auth-logo-img {
    max-width: 180px;
    height: 36px;
    object-fit: contain;
    display: block;
}

.auth-logo-text {
    font-size: 22px;
    font-weight: 700;
    color: var(--text);
    letter-spacing: -0.5px;
}

.auth-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 44px 64px;
    box-shadow: var(--shadow-md);
}
@media (max-width: 640px) {
    .auth-card { padding: 1.75rem 1.25rem; }
}

.auth-card h2,
.auth-title {
    font-size: 26px;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 10px;
    letter-spacing: -0.02em;
}

.auth-subtitle {
    color: var(--text-muted);
    font-size: 15px;
    line-height: 1.6;
    margin-bottom: 24px;
}

.auth-card .alert { margin-bottom: 1.5rem; }

.auth-form {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.auth-footer {
    text-align: center;
    color: var(--text-muted);
    margin-top: 1.75rem;
    font-size: 13px;
}

/* Auth field: wrapper for label + input */
.auth-field { display: flex; flex-direction: column; margin-bottom: 16px; }

/* Auth field header: label + inline link (e.g. "Passwort vergessen") */
.auth-field-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
}
.auth-field-header .auth-label { margin-bottom: 0; }

/* Checkbox row */
.auth-checkbox {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    padding: 0.85rem;
    background: var(--bg);
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
}
.auth-checkbox input[type="checkbox"] {
    width: auto;
    flex-shrink: 0;
    margin-top: 0.15rem;
    accent-color: var(--accent);
}
.auth-checkbox label {
    margin: 0;
    font-size: 13px;
    line-height: 1.5;
    color: var(--text-muted);
    cursor: pointer;
}

.auth-required { color: var(--accent); }

.auth-label {
    display: block;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-muted);
    margin-bottom: 6px;
    letter-spacing: 0.01em;
}

.auth-input {
    width: 100%;
    height: 48px;
    border: 1px solid #E5E7EB;
    border-radius: 8px;
    padding: 15px 18px;
    font-size: 15px;
    line-height: 1.5;
    font-family: inherit;
    color: var(--text);
    background: var(--bg-card);
    transition: var(--transition);
    box-sizing: border-box;
    outline: none;
}
.auth-input:focus {
    border-color: #E53935;
    box-shadow: 0 0 0 3px rgba(229,57,53,0.1);
}
.auth-input::placeholder { color: var(--text-helper); }

.auth-button {
    width: 100%;
    height: 50px;
    margin-top: 8px;
    background: var(--accent);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 6px 16px rgba(229,57,53,0.25);
    transition: all 0.2s ease;
    font-family: inherit;
    letter-spacing: 0.01em;
}
.auth-button:hover {
    background: var(--accent-hover);
    transform: translateY(-1px);
    box-shadow: 0 10px 24px rgba(229,57,53,0.3);
}

.auth-helper {
    font-size: 12px;
    color: var(--text-helper);
    margin-top: 4px;
}

.auth-link {
    color: var(--accent);
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
}
.auth-link:hover { text-decoration: underline; }

.auth-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 18px 0;
    color: var(--text-helper);
    font-size: 12px;
}
.auth-divider::before,
.auth-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--border);
}

/* ── App Component System ── */
.app-card {
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border);
}
.app-card-sm {
    padding: var(--space-3);
    border-radius: var(--radius-md);
}
.app-card-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--text);
    margin-bottom: var(--space-2);
}

/* ── Section Title + Link ── */
.section-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
    margin: 0 0 14px;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.section-link {
    font-size: 12px;
    color: var(--accent);
    font-weight: 400;
    margin-left: auto;
    text-decoration: none;
}
.section-link:hover { text-decoration: underline; }

/* ── Checkbox Item ── */
.checkbox-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
    color: var(--text);
    transition: var(--transition);
}
.checkbox-item:hover { background: var(--bg); }
.checkbox-item input[type="checkbox"] {
    width: 15px;
    height: 15px;
    accent-color: var(--accent);
    cursor: pointer;
    flex-shrink: 0;
}

.app-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 15px;
    border-radius: var(--radius);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: var(--transition);
    border: none;
    font-family: inherit;
    text-decoration: none;
    white-space: nowrap;
}
.app-btn:hover { text-decoration: none; }
.app-btn-primary {
    background: var(--accent);
    color: white;
    box-shadow: 0 2px 8px var(--accent-shadow);
}
.app-btn-primary:hover {
    background: var(--accent-hover);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px var(--accent-shadow);
}
.app-btn-secondary {
    background: transparent;
    color: var(--text);
    border: 1px solid var(--border);
}
.app-btn-secondary:hover {
    background: var(--bg);
    border-color: #D1D5DB;
}
.app-btn-ghost {
    background: transparent;
    color: var(--text-muted);
}
.app-btn-ghost:hover {
    background: var(--bg);
    color: var(--text);
}

.app-input {
    width: 100%;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 9px 12px;
    font-size: 14px;
    font-family: inherit;
    color: var(--text);
    background: var(--bg-card);
    transition: var(--transition);
    box-sizing: border-box;
    outline: none;
}
.app-input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-shadow);
}
.app-label {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-muted);
    margin-bottom: 5px;
}

/* ── Cards ── */
.card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}

.card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.9rem 1.25rem;
    border-bottom: 1px solid var(--border);
    background: var(--bg-card);
}

.card-header h2, .card-header h3 {
    font-size: 14px;
    font-weight: 600;
}

.card-body { padding: 1.25rem; }

/* ── Page Header ── */
.page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: var(--space-4);
    flex-wrap: wrap;
    gap: 1rem;
}

.page-header h1 { font-size: 20px; font-weight: 600; color: var(--text); }
.page-title  { font-size: 20px; font-weight: 600; color: var(--text); }
.page-subtitle { color: var(--text-muted); margin-top: 0.2rem; font-size: 13px; }

/* ── Stats Grid ── */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1rem;
}

.stat-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 1.1rem 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    box-shadow: var(--shadow-xs);
    border-top: 2px solid var(--accent);
}

.stat-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.stat-icon-blue   { background: rgba(229,57,53,0.08); color: var(--accent); }
.stat-icon-green  { background: rgba(22,163,74,0.08);  color: var(--success); }
.stat-icon-purple { background: rgba(124,58,237,0.08); color: var(--purple); }

.stat-content { display: flex; flex-direction: column; gap: 0.1rem; }
.stat-label { font-size: 11px; color: var(--text-helper); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 500; }
.stat-value { font-size: 26px; font-weight: 700; line-height: 1.15; color: var(--text); }
.stat-limit { font-size: 12px; color: var(--text-muted); }

.stat-bar {
    height: 4px;
    background: var(--bg);
    border-radius: 2px;
    overflow: hidden;
}
.stat-bar-fill {
    height: 100%;
    background: var(--accent);
    border-radius: 2px;
    transition: width 0.3s ease;
    min-width: 2px;
}
.stat-bar-full { background: var(--danger); }

/* ══ Dashboard ══════════════════════════════════════════════ */

/* Section title */
.db-section-title { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--text-helper); margin: 0 0 .75rem; }

/* Hero */
.db-hero { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.25rem; }
.db-hero-name  { font-size: 20px; font-weight: 700; color: var(--text); margin: 0 0 .15rem; }
.db-hero-email { font-size: 13px; color: var(--text-muted); margin: 0; }
.db-hero-email strong { font-weight: 500; color: #374151; }

/* Stat chips row (Credits / Jobs / Termine / Network) */
.db-stats-row { display: flex; flex-wrap: wrap; gap: .75rem; margin-bottom: 1.5rem; }
.db-stat-chip { display: flex; align-items: center; gap: .65rem; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-md); padding: .75rem 1rem; flex: 1; min-width: 150px; box-shadow: var(--shadow-xs); transition: var(--transition); text-decoration: none; }
.db-stat-chip:hover { box-shadow: var(--shadow-sm); text-decoration: none; }
.db-stat-chip-icon { width: 36px; height: 36px; border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.db-stat-chip-icon--accent  { background: rgba(229,57,53,.08);  color: var(--accent); }
.db-stat-chip-icon--blue    { background: rgba(37,99,235,.08);   color: #2563eb; }
.db-stat-chip-icon--green   { background: rgba(22,163,74,.08);   color: var(--success); }
.db-stat-chip-icon--purple  { background: rgba(124,58,237,.08);  color: var(--purple); }
.db-stat-chip-icon--yellow  { background: rgba(234,179,8,.08);   color: #ca8a04; }
.db-stat-num { font-size: 20px; font-weight: 700; color: var(--text); line-height: 1; }
.db-stat-lbl { font-size: 11px; font-weight: 500; color: var(--text-helper); text-transform: uppercase; letter-spacing: .04em; margin-top: 2px; }
.db-stat-chips { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .35rem; }
.db-job-chip { font-size: 10px; background: #eff6ff; color: #2563eb; border-radius: 4px; padding: .1rem .4rem; text-decoration: none; font-weight: 600; }
.db-termine-head { font-size: 11px; font-weight: 600; color: var(--text-helper); text-transform: uppercase; letter-spacing: .04em; margin-bottom: .35rem; }
.db-termin-row { display: flex; justify-content: space-between; align-items: center; gap: .5rem; font-size: 12px; margin-bottom: .15rem; }
.db-termin-titel { color: var(--text); font-weight: 600; text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 140px; display: block; }
.db-termin-datum { color: var(--text-helper); white-space: nowrap; font-size: 11px; }

/* Trial banner */
.db-trial { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; border-radius: var(--radius-md); padding: .9rem 1.25rem; margin-bottom: 1.25rem; border: 1px solid; }
.db-trial--normal  { background: linear-gradient(135deg,#f0f9ff,#e0f2fe); border-color: #bae6fd; color: #0c4a6e; }
.db-trial--warning { background: linear-gradient(135deg,#fff7ed,#fef3c7); border-color: #fde68a; color: #92400e; }
.db-trial--urgent  { background: linear-gradient(135deg,#fff5f5,#fee2e2); border-color: #fca5a5; color: #7f1d1d; }
.db-trial-text { display: flex; align-items: center; gap: .65rem; font-size: 13px; font-weight: 600; }
.db-trial-note { font-weight: 400; }
.db-trial-link { font-size: 12px; font-weight: 600; white-space: nowrap; color: inherit; text-decoration: none; }
.db-trial-link:hover { text-decoration: underline; }

/* News banners */
.db-banner { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; border-radius: var(--radius-md); padding: .9rem 1.25rem; margin-bottom: .85rem; border: 1px solid; }
.db-banner--info    { background: #eff6ff; border-color: #bfdbfe; color: #1e3a8a; }
.db-banner--warnung { background: #fffbeb; border-color: #fde68a; color: #92400e; }
.db-banner--erfolg  { background: #f0fdf4; border-color: #bbf7d0; color: #14532d; }
.db-banner--wichtig { background: #fef2f2; border-color: #fecaca; color: #7f1d1d; }
.db-banner-body { display: flex; align-items: flex-start; gap: .65rem; flex: 1; }
.db-banner-icon { flex-shrink: 0; margin-top: 2px; }
.db-banner-close { background: none; border: none; cursor: pointer; opacity: .6; font-size: 16px; line-height: 1; padding: 0; flex-shrink: 0; color: inherit; font-family: inherit; }

/* Tool grid */
.db-tools-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1rem; margin-bottom: 1.5rem; }
.db-tool-card { display: flex; flex-direction: column; gap: .65rem; }
.db-tool-card--locked { opacity: .4; }
.db-tool-head { display: flex; align-items: center; gap: .6rem; }
.db-tool-info { min-width: 0; }
.db-tool-name   { font-weight: 600; font-size: 13px; color: var(--text); line-height: 1.2; }
.db-tool-status-ok     { font-size: 11px; color: var(--success); font-weight: 600; margin-top: .15rem; }
.db-tool-status-wait   { font-size: 11px; color: var(--warning); font-weight: 600; margin-top: .15rem; }
.db-tool-status-locked { font-size: 11px; color: var(--text-helper); margin-top: .15rem; }

/* Module icon (tool cards + reseller tiles) */
.db-mod-icon { width: 36px; height: 36px; border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.db-mod-icon--blue   { background: rgba(59,130,246,.1);  color: #2563eb; }
.db-mod-icon--orange { background: rgba(249,115,22,.1);  color: #ea580c; }
.db-mod-icon--yellow { background: rgba(234,179,8,.1);   color: #ca8a04; }
.db-mod-icon--green  { background: rgba(34,197,94,.1);   color: #16a34a; }

/* Reseller overview grid */
.db-reseller-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .75rem; margin-bottom: 1.5rem; }
.db-reseller-tile { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 1rem; display: flex; flex-direction: column; gap: .5rem; box-shadow: var(--shadow-xs); text-decoration: none; transition: var(--transition); }
.db-reseller-tile:hover { box-shadow: var(--shadow-sm); text-decoration: none; }
.db-rt-icon { width: 36px; height: 36px; border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.db-rt-val  { font-size: 26px; font-weight: 700; color: var(--text); line-height: 1; }
.db-rt-lbl  { font-size: 11px; font-weight: 500; color: var(--text-helper); text-transform: uppercase; letter-spacing: .04em; }

/* Activity card list */
.db-activity-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 1rem; margin-bottom: 1.5rem; }
.db-act-row { display: flex; align-items: center; justify-content: space-between; padding: .6rem 1.25rem; border-bottom: 1px solid var(--bg); font-size: 13px; gap: .75rem; text-decoration: none; transition: var(--transition); color: inherit; }
.db-act-row:last-child { border-bottom: none; }
.db-act-row:hover { background: var(--bg); text-decoration: none; }
.db-act-name  { font-weight: 600; color: var(--text); flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.db-act-date  { font-size: 11px; color: var(--text-helper); white-space: nowrap; }
.db-act-empty { padding: 1.25rem; color: var(--text-muted); font-size: 13px; }

/* Status badges (activity rows) */
.db-status-badge { display: inline-flex; align-items: center; gap: .3rem; font-size: 10px; font-weight: 600; padding: .2rem .5rem; border-radius: 99px; white-space: nowrap; flex-shrink: 0; }
.db-status-badge::before { content: ''; width: 4px; height: 4px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
.db-status-gruen  { background: rgba(22,163,74,.1);   color: #16a34a; }
.db-status-orange { background: rgba(245,158,11,.1);  color: #b45309; }
.db-status-rot    { background: rgba(239,68,68,.1);   color: #dc2626; }
.db-status-grau   { background: rgba(107,114,128,.1); color: #6b7280; }

/* Plan card */
.db-plan-header { display: flex; align-items: center; justify-content: space-between; gap: .75rem; flex-wrap: wrap; padding-bottom: 1rem; margin-bottom: 1rem; border-bottom: 1px solid var(--border); }
.db-plan-title { font-size: 14px; font-weight: 600; color: var(--text); margin: 0; }
.db-plan-meta  { display: flex; gap: .5rem; align-items: center; }
.db-plan-name  { font-weight: 700; font-size: 15px; color: var(--text); }
.db-plan-body  { display: flex; flex-direction: column; gap: 1rem; }
.db-plan-empty { color: var(--text-muted); font-size: 14px; margin: 0; }

/* Progress bars */
.db-progress-label { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: .35rem; }
.db-progress-label span { font-size: 13px; font-weight: 500; color: var(--text); }
.db-progress-label em   { font-size: 12px; color: var(--text-muted); font-style: normal; }
.db-progress-label em strong { color: var(--text); font-style: normal; font-weight: 600; }
.db-progress-track { height: 6px; background: var(--bg); border-radius: 99px; overflow: hidden; }
.db-progress-fill  { height: 100%; border-radius: 99px; transition: width .4s ease; }
.db-progress-fill--green  { background: var(--success); }
.db-progress-fill--orange { background: var(--warning); }
.db-progress-fill--red    { background: var(--danger); }

/* Dashboard redesign helpers */
.db-two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; margin-bottom: 1.25rem; }
@media (max-width: 768px) { .db-two-col { grid-template-columns: 1fr; } }
.db-card-title { font-size: 14px; font-weight: 600; color: var(--text); margin: 0; }
.db-empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 2rem 1.25rem; gap: .6rem; text-align: center; }
.db-empty-icon { width: 36px; height: 36px; color: var(--text-muted); opacity: .5; }
.db-empty-text { font-size: 13px; color: var(--text-muted); margin: 0; }
.db-tool-badge { display: inline-flex; align-items: center; font-size: 10px; font-weight: 600; padding: .2rem .55rem; border-radius: 99px; white-space: nowrap; flex-shrink: 0; }
.db-termin-icon { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 8px; flex-shrink: 0; font-size: 14px; }
.db-act-date--accent { color: var(--accent); font-weight: 600; }
.db-quick-actions { display: flex; flex-wrap: wrap; gap: .6rem; padding: 1rem 1.25rem; }
.db-qa-btn { border: 1px solid var(--border) !important; font-size: 12px !important; }
.db-progress-fill--unlimited { width: 100%; opacity: .25; background: var(--success); }

/* Plan dates */
.db-laufzeit    { padding-top: 1rem; border-top: 1px solid var(--border); }
.db-dates       { display: flex; gap: 1.5rem; flex-wrap: wrap; margin-bottom: .65rem; }
.db-date-item   { font-size: 12px; color: var(--text-muted); }
.db-date-item strong { color: var(--text); font-size: 13px; display: block; font-weight: 600; }
.db-date-item span   { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; }
.db-date-expired { color: var(--danger) !important; }
.db-date-warn    { color: var(--warning) !important; }

/* Module chips in plan card */
.db-mod-chips { display: flex; flex-wrap: wrap; gap: .35rem; padding-top: .75rem; border-top: 1px solid var(--border); }

/* Upgrade wall */
.db-upgrade-wall { text-align: center; padding: 2rem; }
.db-upgrade-wall-icon { width: 56px; height: 56px; border-radius: 50%; background: rgba(239,68,68,.1); color: #dc2626; display: flex; align-items: center; justify-content: center; margin: 0 auto 1rem; }
.db-upgrade-title { font-size: 20px; font-weight: 700; color: var(--text); margin: 0 0 .4rem; }
.db-upgrade-desc  { font-size: 14px; color: var(--text-muted); margin: 0 0 .25rem; }
.db-upgrade-hint  { font-size: 13px; color: var(--text-helper); margin: 0; }

/* Wartende Uploads */
.db-wartende-uploads { margin-bottom: 1.5rem; padding: 1rem 1.25rem; }
.db-wartende-header { display: flex; align-items: center; gap: .5rem; font-weight: 600; font-size: 14px; color: var(--text); margin-bottom: .75rem; }
.db-wartende-count { background: var(--accent); color: #fff; border-radius: 10px; padding: 1px 7px; font-size: 12px; font-weight: 700; margin-left: .25rem; }
.db-wartende-list { display: flex; flex-direction: column; gap: .5rem; }
.db-wartende-item { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .6rem .75rem; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-sm); flex-wrap: wrap; }
.db-wartende-info { display: flex; align-items: center; gap: .75rem; flex: 1; min-width: 0; }
.db-wartende-tool { font-size: 12px; font-weight: 600; color: var(--text-muted); white-space: nowrap; background: var(--bg-card); border: 1px solid var(--border); border-radius: 4px; padding: 1px 6px; }
.db-wartende-titel { font-size: 14px; color: var(--text); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.db-wartende-datum { font-size: 12px; color: var(--text-helper); white-space: nowrap; }
.db-wartende-actions { display: flex; align-items: center; gap: .5rem; flex-shrink: 0; }

/* Plan selection (expired trial) */
.db-plan-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1rem; margin-bottom: 2rem; }
.db-plan-option { background: var(--bg-card); border: 2px solid var(--border); border-radius: var(--radius-md); padding: 1.5rem; display: flex; flex-direction: column; gap: 1rem; transition: border-color var(--transition); cursor: pointer; position: relative; }
.db-plan-option:hover { border-color: var(--accent); }
.db-plan-option--recommended { border-color: var(--accent); }
.db-plan-badge { position: absolute; top: -1px; left: 50%; transform: translateX(-50%); background: var(--accent); color: #fff; font-size: 10px; font-weight: 700; padding: .15rem .65rem; border-radius: 0 0 6px 6px; letter-spacing: .05em; white-space: nowrap; }
.db-plan-opt-name   { font-size: 16px; font-weight: 700; color: var(--text); margin-bottom: .15rem; }
.db-plan-opt-type   { font-size: 13px; color: var(--text-muted); }
.db-plan-price      { font-size: 28px; font-weight: 800; color: var(--accent); line-height: 1; }
.db-plan-price-eur  { font-size: 14px; font-weight: 500; color: var(--text-muted); }
.db-plan-price-per  { font-size: 13px; font-weight: 400; color: var(--text-helper); }
.db-plan-features   { list-style: none; padding: 0; margin: 0; font-size: 13px; color: var(--text); display: flex; flex-direction: column; gap: .35rem; }
.db-plan-feat-note  { color: var(--text-helper); font-size: 12px; }
.db-plan-none       { color: var(--text-muted); font-size: 14px; grid-column: 1/-1; margin: 0; }

/* Zusatz-Pläne */
.db-zusatz-row  { display: flex; justify-content: space-between; align-items: center; padding: .6rem .75rem; background: var(--bg); border-radius: var(--radius-sm); }
.db-zusatz-name { font-weight: 600; font-size: 13px; color: var(--text); }
.db-zusatz-price{ font-size: 13px; font-weight: 600; color: var(--accent); }

/* Marketplace */
.db-marketplace      { margin-top: 1.75rem; }
.db-marketplace-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: .85rem; }
.db-marketplace-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(260px,1fr)); gap: 1rem; }

/* Setup wizard modal */
.db-wiz-overlay  { position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 9500; display: flex; align-items: center; justify-content: center; padding: 1rem; }
.db-wiz-modal    { background: var(--bg-card); border-radius: 18px; width: 100%; max-width: 520px; box-shadow: var(--shadow-lg); overflow: hidden; position: relative; }
.db-wiz-progress { height: 4px; background: var(--bg); }
.db-wiz-bar      { height: 4px; background: var(--accent); transition: width .3s; width: 33%; }
.db-wiz-body     { padding: 2rem 2rem 1.5rem; }
.db-wiz-dots     { display: flex; gap: .5rem; align-items: center; margin-bottom: 1.5rem; }
.db-wiz-dot      { width: 8px; height: 8px; border-radius: 50%; background: #d1d5db; transition: background .2s; flex-shrink: 0; }
.db-wiz-dot--on  { background: var(--accent); }
.db-wiz-step-lbl { font-size: 11px; color: var(--text-helper); margin-left: auto; }
.db-wiz-step     { }
.db-wiz-step--hidden { display: none; }
.db-wiz-emoji    { font-size: 32px; margin-bottom: .5rem; }
.db-wiz-title    { font-size: 20px; font-weight: 800; margin: 0 0 .35rem; color: var(--text); }
.db-wiz-desc     { font-size: 13px; color: var(--text-muted); margin: 0 0 1.25rem; line-height: 1.6; }
.db-wiz-2col     { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; margin-bottom: .85rem; }
.db-wiz-hint     { font-size: 12px; color: var(--text-helper); margin: .75rem 0 0; }
.db-wiz-actions  { display: flex; align-items: center; justify-content: space-between; margin-top: 1.5rem; gap: .5rem; }
.db-wiz-right    { display: flex; gap: .5rem; margin-left: auto; }
.db-wiz-btn-back { background: none; border: 1px solid var(--border); border-radius: var(--radius); padding: .5rem 1rem; font-size: 13px; font-weight: 600; color: var(--text); cursor: pointer; font-family: inherit; }
.db-wiz-btn-skip { background: none; border: none; font-size: 13px; color: var(--text-helper); cursor: pointer; padding: .5rem; font-family: inherit; }
.db-wiz-footer   { margin-top: 1rem; padding-top: .85rem; border-top: 1px solid var(--border); display: flex; align-items: center; gap: .5rem; }
.db-wiz-footer label { font-size: 12px; color: var(--text-helper); cursor: pointer; margin: 0; line-height: 1.4; }

/* ── Buttons ── */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 0.9rem;
    border-radius: var(--radius);
    font-size: 13px;
    font-weight: 500;
    border: none;
    cursor: pointer;
    transition: var(--transition);
    text-decoration: none;
    white-space: nowrap;
    font-family: inherit;
}
.btn:hover { text-decoration: none; }

.btn-primary  { background: var(--accent); color: #fff; box-shadow: 0 1px 4px var(--accent-shadow); }
.btn-primary:hover { background: var(--accent-hover); box-shadow: 0 3px 10px var(--accent-shadow); transform: translateY(-1px); }
.btn-secondary { background: var(--bg-card); color: var(--text); border: 1px solid var(--border); }
.btn-secondary:hover { background: var(--bg); border-color: #D1D5DB; }
.btn-ghost    { background: transparent; color: var(--text-muted); border: 1px solid var(--border); }
.btn-ghost:hover { background: var(--bg); color: var(--text); }

.navbar .btn-ghost {
    color: rgba(255,255,255,0.88);
    border-color: rgba(255,255,255,0.3);
}
.navbar .btn-ghost:hover {
    background: rgba(255,255,255,0.14);
    color: #fff;
    border-color: rgba(255,255,255,0.5);
}

.btn-success  { background: var(--success); color: #fff; }
.btn-warning  { background: var(--warning); color: #fff; }
.btn-danger   { background: var(--danger);  color: #fff; }
.btn-full     { width: 100%; justify-content: center; }
.btn-sm       { padding: 0.28rem 0.6rem; font-size: 12px; }

/* ── Forms ── */
.form-group {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.form-group label, .form-label {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-muted);
}

.form-group input,
.form-group select,
.form-group textarea,
.form-control {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text);
    padding: 0.48rem 0.75rem;
    font-size: 14px;
    font-family: inherit;
    outline: none;
    transition: var(--transition);
    width: 100%;
}

.form-group input:focus,
.form-group select:focus,
.form-control:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-shadow);
}

.form-group input::placeholder { color: var(--text-helper); }

.form-hint {
    font-size: 11px;
    color: var(--text-helper);
}

.form-vertical { display: flex; flex-direction: column; gap: 1rem; }

.form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
}
.form-group-full { grid-column: 1 / -1; }

.form-inline {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
}
.form-inline select,
.form-inline input { width: auto; }

/* ── Badges ── */
.badge {
    display: inline-flex;
    align-items: center;
    padding: 0.18rem 0.55rem;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.02em;
}
.badge-blue    { background: rgba(229,57,53,0.08); color: #c62828; }
.badge-green   { background: rgba(22,163,74,0.1);  color: #15803d; }
.badge-success { background: rgba(22,163,74,0.1);  color: #15803d; }
.badge-error   { background: rgba(220,38,38,0.08); color: #b91c1c; }
.badge-warning { background: rgba(217,119,6,0.1);  color: #b45309; }
.badge-admin    { background: rgba(124,58,237,0.08); color: #6d28d9; }
.badge-reseller { background: var(--bg); color: var(--text-muted); border: 1px solid var(--border); }

/* Tool-status badges */
.badge-gruen  { background: rgba(22,163,74,0.1);  color: #15803d; }
.badge-orange { background: rgba(217,119,6,0.1);  color: #b45309; }
.badge-rot    { background: rgba(220,38,38,0.08); color: #b91c1c; }
.badge-grau   { background: var(--bg); color: var(--text-muted); border: 1px solid var(--border); }

/* ── Alerts ── */
.alert {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.7rem 1rem;
    border-radius: var(--radius-md);
    font-size: 13px;
    border-width: 1px;
    border-style: solid;
}
.alert-error   { background: #fef2f2; border-color: #fecaca; color: #b91c1c; }
.alert-success { background: #f0fdf4; border-color: #bbf7d0; color: #15803d; }
.alert-warning { background: #fffbeb; border-color: #fde68a; color: #92400e; }

/* ── Table ── */
.table-wrapper { overflow-x: auto; }

.table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.table th {
    padding: 0.65rem 1rem;
    text-align: left;
    font-size: 10.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--text-helper);
    border-bottom: 1px solid var(--border);
    background: var(--bg);
}

.table td {
    padding: 0.8rem 1rem;
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
}

.table tbody tr:hover td { background: #fafafa; }
.table tbody tr:last-child td { border-bottom: none; }

/* ── User Cell ── */
.user-cell {
    display: flex;
    align-items: center;
    gap: 0.65rem;
}

.user-avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--accent);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    flex-shrink: 0;
}

.user-name { font-weight: 500; }

/* ── Actions ── */
.action-group {
    display: flex;
    gap: 0.35rem;
    flex-wrap: wrap;
}

/* ── Inline Form ── */
.inline-form {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 1rem;
    margin: 0.25rem 0;
}

/* ── Plan Info ── */
.plan-info { display: flex; flex-direction: column; gap: 1rem; }

.plan-name {
    font-size: 17px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    color: var(--text);
}

.plan-details {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 0.75rem;
}

.plan-detail-item {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0.75rem;
}

.plan-detail-label { font-size: 11px; color: var(--text-muted); text-transform: uppercase; }
.plan-detail-value { font-size: 14px; font-weight: 600; color: var(--text); }
.plan-description { color: var(--text-muted); font-size: 13px; }

/* ── Admin Nav Grid ── */
.admin-nav-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1rem;
}

.admin-nav-card {
    display: flex;
    align-items: center;
    gap: 1.1rem;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 1.25rem 1.5rem;
    color: var(--text);
    text-decoration: none;
    transition: var(--transition);
    box-shadow: var(--shadow-xs);
}
.admin-nav-card:hover {
    border-color: var(--accent);
    box-shadow: 0 4px 16px var(--accent-shadow);
    transform: translateY(-1px);
    text-decoration: none;
}

.admin-nav-icon {
    width: 48px;
    height: 48px;
    border-radius: 10px;
    background: rgba(229,57,53,0.08);
    color: var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.admin-nav-card h3 { font-size: 14px; font-weight: 600; margin-bottom: 0.2rem; color: var(--text); }
.admin-nav-card p  { font-size: 12px; color: var(--text-muted); }

/* ── Info Row ── */
.info-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.7rem 0;
    border-bottom: 1px solid var(--border);
}
.info-row:last-child { border-bottom: none; }
.info-label { color: var(--text-muted); font-size: 13px; }
.info-value { font-weight: 500; }

/* ── Empty State ── */
.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    padding: 2.5rem 2rem;
    color: var(--text-muted);
    text-align: center;
}

/* ── Utility ── */
.text-muted  { color: var(--text-muted); }
.fw-400      { font-weight: 400; }
.fw-600      { font-weight: 600; }
.fsize-12    { font-size: 12px; }
.fsize-13    { font-size: 13px; }
.ml-2        { margin-left: .5rem; }
.mt-4        { margin-top: 1rem; }
.mb-3        { margin-bottom: .85rem; }
.m-0         { margin: 0; }
.link-accent { color: var(--accent); text-decoration: none; }
.link-accent:hover { text-decoration: underline; }
.input-inline { width: auto; margin: 0; flex-shrink: 0; }

/* ── Modal Row ── */
.modal-row td { padding: 0 1rem 1rem; background: var(--bg); }

/* ── Feature-Lock UI ── */
.feature-lock-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.1rem 1.5rem;
    background: #f3f4f6;
    border: 1px solid #d1d5db;
    border-radius: var(--radius-md);
    margin: 1rem 0;
}
.feature-lock-icon { font-size: 1.6rem; flex-shrink: 0; }
.feature-lock-text { flex: 1; font-size: 14px; color: #374151; }
.feature-lock-btn {
    display: inline-block;
    padding: 0.42rem 0.9rem;
    background: var(--accent);
    color: #fff;
    border: none;
    border-radius: var(--radius);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    font-family: inherit;
}
.feature-lock-btn:hover { opacity: 0.88; text-decoration: none; }
.feature-lock-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.12rem 0.5rem;
    background: #f3f4f6;
    color: #4b5563;
    border: 1px solid #9ca3af;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    vertical-align: middle;
    cursor: default;
}

/* ── Responsive ── */
@media (max-width: 640px) {
    .nav-links { display: none; }
    .nav-username { display: none; }
    .main-content { padding: 1rem; }
    .stats-grid { grid-template-columns: 1fr; }
}

/* ── Clickable name links ── */
.name-link:hover { text-decoration: underline; }

/* ── Notification Toast ── */
.notif-toast {
    position: fixed;
    bottom: 24px;
    right: 24px;
    background: #fff;
    border-left: 4px solid #DE3031;
    padding: 14px 18px;
    border-radius: 8px;
    box-shadow: 0 8px 32px rgba(0,0,0,.15);
    max-width: 340px;
    transform: translateX(110%);
    transition: transform .3s ease;
    z-index: 99990;
}
.notif-toast--show { transform: translateX(0); }

/* ── Responsive Table → Card Layout ── */
@media (max-width: 767px) {
    .table-responsive-card thead { display: none; }
    .table-responsive-card tbody tr {
        display: block;
        border: 1px solid #e5e7eb;
        border-radius: 8px;
        margin-bottom: 0.75rem;
        background: #fff;
        padding: 0.5rem 0;
    }
    .table-responsive-card tbody td {
        display: flex;
        padding: 0.4rem 1rem;
        font-size: 13px;
        border: none !important;
        gap: 0.5rem;
        align-items: flex-start;
        white-space: normal !important;
        max-width: 100% !important;
        overflow: visible !important;
        text-overflow: unset !important;
    }
    .table-responsive-card tbody td::before {
        content: attr(data-label);
        font-weight: 600;
        color: var(--text-muted);
        min-width: 90px;
        flex-shrink: 0;
        font-size: 11px;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        padding-top: 2px;
    }
    .table-responsive-card tbody td[data-label=""]::before { display: none; }
    .table-responsive-card tfoot { display: none; }
    .table-responsive-card .td-actions {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 6px;
        padding-top: 10px;
        border-top: 1px solid #f3f4f6;
        margin-top: 4px;
    }
    .table-responsive-card .td-actions::before { display: none; }
    .table-responsive-card .td-actions .btn { flex: 1; text-align: center; }
}

@media (min-width: 768px) {
    .mobile-only { display: none !important; }
}

/* ── Feature-Gate UI ── */
.feature-badge-lock {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    background: #f3f4f6;
    border: 1px solid #9ca3af;
    border-radius: 12px;
    color: #4b5563;
    font-size: 0.75em;
    font-weight: 500;
    cursor: help;
    vertical-align: middle;
}
.feature-badge-tier { text-transform: uppercase; font-size: 0.85em; }

.nav-item.nav-locked { opacity: 0.75; }

.feature-gate { position: relative; min-height: 400px; }
.feature-gate-preview {
    filter: blur(4px) grayscale(0.5);
    pointer-events: none;
    user-select: none;
    opacity: 0.6;
}
.feature-gate-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(249,250,251,.92);
    backdrop-filter: blur(3px);
    z-index: 10;
    padding: 24px;
}
.feature-gate-card {
    background: #fff;
    padding: 40px 32px;
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(0,0,0,.12);
    text-align: center;
    max-width: 480px;
    border: 1px solid #e5e7eb;
}
.feature-gate-icon { font-size: 3em; margin-bottom: 16px; }
.feature-gate-card h2 { margin: 0 0 12px; color: #111827; font-size: 1.4em; }
.feature-gate-desc { color: #4b5563; line-height: 1.5; margin: 0 0 16px; }
.feature-gate-tier {
    color: #DE3031;
    font-size: 0.95em;
    margin: 0 0 24px;
    padding: 8px 16px;
    background: #fef2f2;
    border-radius: 8px;
    display: inline-block;
}
.feature-gate-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

.feature-hint {
    background: #f3f4f6;
    border-left: 4px solid #9ca3af;
    padding: 12px 16px;
    border-radius: 6px;
    color: #374151;
    margin-bottom: 20px;
    font-size: 0.95em;
}
.feature-hint a { color: #DE3031; font-weight: 500; text-decoration: none; }

/* ── feature_section ─────────────────────────────────────────── */
.feature-section {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    padding: 20px 24px;
    margin-bottom: 1.5rem;
    position: relative;
}
.feature-section.feature-locked {
    background: #fafafa;
    border-color: #d1d5db;
}
.feature-section-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid #f0f1f3;
    flex-wrap: wrap;
}
.feature-section.feature-locked .feature-section-header {
    border-bottom-color: #e5e7eb;
}
.feature-section-title {
    font-size: 13px;
    font-weight: 700;
    color: #374151;
    text-transform: uppercase;
    letter-spacing: .05em;
    flex: 1;
}
.feature-section-lock {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    background: #f3f4f6;
    border: 1px solid #9ca3af;
    border-radius: 20px;
    color: #4b5563;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}
.feature-section-tier {
    text-transform: uppercase;
    font-size: 10px;
    letter-spacing: .04em;
}
.feature-section-desc {
    margin: 0 0 14px;
    color: #4b5563;
    font-size: 13px;
    line-height: 1.5;
    background: #f3f4f6;
    padding: 8px 12px;
    border-radius: 6px;
}
.feature-section-content.disabled {
    pointer-events: none;
}
.feature-section-content.disabled input,
.feature-section-content.disabled textarea,
.feature-section-content.disabled select {
    background: #ffffff !important;
    color: #374151 !important;
    cursor: not-allowed !important;
    border-color: #d1d5db !important;
}
.feature-section-content.disabled button {
    background: #e5e7eb !important;
    color: #9ca3af !important;
    cursor: not-allowed !important;
}
.feature-section-content.disabled label {
    color: #374151;
}
.feature-section-content.disabled .hint,
.feature-section-content.disabled p {
    color: #6b7280;
}
.feature-section-cta {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px dashed #e5e7eb;
    text-align: right;
}

/* ── landingpage-features (in Reseller-Einstellungen) ─────────── */
.landingpage-features ul {
    list-style: none;
    padding-left: 0;
    margin: 0 0 16px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 4px 16px;
}
.landingpage-features li {
    padding: 4px 0;
    font-size: 13px;
    color: #4b5563;
}

/* ── Mobile Overrides (max-width: 767px) ─────────────────────── */
@media (max-width: 767px) {
    /* KI-Chat: kleiner + fullscreen-Modal */
    #ki-chat-btn {
        width: 44px;
        height: 44px;
        bottom: 1rem;
        right: 1rem;
        box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    }
    #ki-chat-modal {
        bottom: 0 !important;
        right: 0 !important;
        left: 0 !important;
        top: auto !important;
        width: 100vw !important;
        max-width: 100vw !important;
        border-radius: 0 !important;
        height: 85vh !important;
        max-height: 85vh !important;
    }
    /* Toast: über KI-Chat, volle Breite */
    .notif-toast {
        bottom: 4.5rem;
        right: 1rem;
        left: 1rem;
        max-width: none;
    }
}

/* ── ISO-Export Modal ───────────────────────────────────────────────── */
.n-stufen-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    margin-bottom: 8px;
}

@media (max-width: 500px) {
    .n-stufen-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.mapping-preview-table {
    background: #f8f9fa;
    padding: 12px;
    border-radius: 4px;
    font-family: monospace;
    font-size: 13px;
    max-height: 200px;
    overflow-y: auto;
}

.mapping-preview-table table {
    width: 100%;
    border-collapse: collapse;
}

.mapping-preview-table th,
.mapping-preview-table td {
    padding: 4px 8px;
    text-align: left;
    border-bottom: 1px solid #dee2e6;
}

.mapping-preview-table th {
    font-weight: 700;
    color: #374151;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.iso-export-history-item {
    border-bottom: 1px solid #eee;
    padding: 8px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: .5rem;
}

.iso-export-history-item:last-child {
    border-bottom: none;
}

.iso-export-history-item.fertig { color: #166534; }
.iso-export-history-item.fehler { color: #dc2626; }

/* Info-Modal Type-Akzente (border-left wird inline gesetzt; Klassen für Icon-Farbe) */
.info-modal-icon-info    { color: #2563eb; }
.info-modal-icon-success { color: #16a34a; }
.info-modal-icon-warning { color: #f59e0b; }
.info-modal-icon-error   { color: #dc2626; }

/* Thermal-Badges (PV Phase 1) */
.thermal-badge { display:inline-block; font-size:.7rem; padding:1px 5px; border-radius:4px; margin-left:4px; vertical-align:middle; line-height:1.4; font-weight:500; }
.thermal-badge.thermal-radiometric { background:#e6f4ea; color:#1e8e3e; border:1px solid #b6dfb9; }
.thermal-badge.thermal-only        { background:#fef7e0; color:#b06000; border:1px solid #f3d488; }

/* Thermal-Temperatur-Anzeige (PV Phase 2) */
.thermal-temp-info    { font-size:.7rem; color:#1d4ed8; font-weight:500; }
.thermal-temp-pending { font-size:.7rem; color:#6b7280; font-style:italic; }
.thermal-temp-failed  { font-size:.7rem; color:#b06000; cursor:help; }

/* ── Thermal-Bilder-Sektion (PV Phase 2 Detail-View) ─────────────── */
.thermal-section { margin-top:2rem; margin-bottom:1.5rem; }
.thermal-section-meta { margin:.3rem 0 .25rem; font-size:13px; }
.thermal-section-meta .text-hotspot { color:#c62828; }
.thermal-section-hint { font-size:.8rem; margin-bottom:1rem; }

.thermal-filters {
    display:flex; flex-wrap:wrap; gap:.75rem; align-items:center;
    margin-bottom:1.25rem; padding:.6rem .85rem;
    background:#f5f5f5; border-radius:6px;
}
.filter-group { display:flex; align-items:center; gap:.4rem; }
.filter-label { font-size:.8rem; font-weight:600; color:#555; }
.filter-pill {
    display:inline-block; padding:3px 11px;
    border:1px solid #d0d0d0; border-radius:14px;
    background:#fff; color:#333; text-decoration:none; font-size:.8rem;
}
.filter-pill:hover { background:#fafafa; }
.filter-pill.active { background:#424242; color:#fff; border-color:#424242; }
.filter-checkbox { display:inline-flex; align-items:center; gap:5px; font-size:.8rem; cursor:pointer; }

.thermal-grid {
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(260px, 1fr));
    gap:.85rem;
}

.thermal-card {
    border:1px solid #e0e0e0; border-radius:6px;
    padding:.65rem; background:#fff;
}
.thermal-card-header {
    display:flex; justify-content:space-between; align-items:center;
    margin-bottom:.4rem;
}
.thermal-card-id { font-weight:700; font-size:1rem; }
.thermal-format-badge {
    font-size:.65rem; padding:2px 5px; border-radius:3px;
    background:#e8f5e9; color:#1e8e3e;
}
.thermal-format-badge.thermal-format-thermal_JPEG { background:#fef7e0; color:#b06000; }

.thermal-card-image {
    display:block; width:100%; aspect-ratio:4/3; overflow:hidden;
    border-radius:3px; margin-bottom:.4rem;
    background:#f0f0f0; cursor:pointer;
}
.thermal-card-image img { width:100%; height:100%; object-fit:cover; }

.thermal-card-filename { font-size:.65rem; color:#777; word-break:break-all; margin-bottom:.4rem; }

.thermal-card-stats { width:100%; font-size:.75rem; margin-bottom:.4rem; border-collapse:collapse; }
.thermal-card-stats td { padding:1px 3px; }
.thermal-card-stats td:nth-child(odd) { color:#666; font-weight:600; }

.thermal-card-delta {
    display:inline-block; padding:3px 9px; border-radius:4px;
    font-weight:600; font-size:.82rem;
}
.thermal-delta-neutral  { background:#f0f0f0; color:#555; }
.thermal-delta-notice   { background:#fff8e1; color:#f57c00; }
.thermal-delta-warning  { background:#ffe0b2; color:#e65100; }
.thermal-delta-hotspot  { background:#ffcdd2; color:#c62828; }
.thermal-delta-unknown  { background:#f0f0f0; color:#999; }

.thermal-lightbox {
    position:fixed; top:0; left:0; right:0; bottom:0;
    background:rgba(0,0,0,.85); z-index:9999;
    display:flex; align-items:center; justify-content:center; padding:1.5rem;
}
.thermal-lightbox-content {
    background:#fff; border-radius:8px; max-width:860px; width:100%;
    max-height:90vh; overflow:auto; padding:1.25rem; position:relative;
}
.thermal-lightbox-close {
    position:absolute; top:.4rem; right:.65rem;
    background:none; border:none; font-size:1.8rem;
    cursor:pointer; line-height:1; color:#666;
}
.thermal-lightbox-image {
    width:100%; max-height:58vh; object-fit:contain;
    background:#000; border-radius:4px; display:block; margin:.75rem 0;
}
.thermal-lightbox-stats {
    display:grid; grid-template-columns:repeat(3,1fr); gap:.4rem; margin:.75rem 0;
    font-size:.85rem;
}
.thermal-lightbox-filename { font-size:.8rem; color:#666; word-break:break-all; margin:.15rem 0; }
.thermal-lightbox-hint { font-size:.75rem; color:#999; font-style:italic; margin:.25rem 0 0; }

/* ── Thermal Triage Sub-Sektionen ─────────────────────────────────── */
.thermal-subsection { margin-top:1.5rem; padding-top:1rem; border-top:1px solid #e0e0e0; }
.thermal-subsection h4 {
    display:flex; align-items:center; gap:.45rem;
    font-size:13px; font-weight:700; margin:0 0 .2rem;
}
.thermal-subsection-icon {
    display:inline-block; width:11px; height:11px;
    border-radius:50%; flex-shrink:0;
}
.thermal-subsection-primary .thermal-subsection-icon { background:#ff8f00; }
.thermal-subsection-extreme .thermal-subsection-icon { background:#c62828; }
.thermal-subsection-count { color:#888; font-weight:400; font-size:.9em; }

.thermal-subsection-hint { font-size:.8rem; color:#555; margin-bottom:.85rem; }

.thermal-subsection-warning {
    padding:.6rem .75rem; background:#fff8e1;
    border-left:3px solid #ff8f00; border-radius:4px;
    color:#5d4037; line-height:1.5;
}
.thermal-subsection-warning strong { color:#c62828; }
.thermal-subsection-warning em { font-weight:600; font-style:normal; }

.text-pv-relevant { color:#e65100; }
.text-extreme { color:#c62828; }

/* Collapsible Sektion 3 */
.thermal-low-details summary {
    cursor:pointer; user-select:none; list-style:none;
    display:flex; align-items:center; gap:.45rem;
    padding:.3rem 0;
}
.thermal-low-details summary::-webkit-details-marker { display:none; }
.thermal-low-details summary::before {
    content:"▶"; font-size:.7rem; color:#888;
    transition:transform .15s; flex-shrink:0;
}
.thermal-low-details[open] summary::before { content:"▼"; }

/* ── Thermal-Zusammenfassung (Detail-View, Seite) ──────────────────── */
.thermal-summary {
    margin-top:2rem; margin-bottom:1.5rem;
    padding:1rem 1.25rem; border:1px solid #e5e7eb;
    border-radius:8px; background:#fafafa;
}
.thermal-summary-header {
    display:flex; justify-content:space-between; align-items:center;
    margin-bottom:.6rem; gap:.75rem; flex-wrap:wrap;
}
.thermal-summary-header h3 {
    font-size:15px; font-weight:700; margin:0;
}
.btn-thermal-diagnose {
    display:inline-block; padding:6px 14px;
    background:#1d4ed8; color:#fff; border:none; border-radius:6px;
    font-size:.82rem; font-weight:600; cursor:pointer; white-space:nowrap;
}
.btn-thermal-diagnose:hover  { background:#1e40af; }
.btn-thermal-diagnose:disabled { background:#9ca3af; cursor:not-allowed; }

.thermal-summary-list {
    list-style:none; padding:0; margin:0;
    display:flex; flex-wrap:wrap; gap:.25rem .9rem;
    font-size:.82rem; color:#374151;
}
.thermal-summary-list li { white-space:nowrap; }
.thermal-summary-failed { color:#c62828; }
.thermal-summary-pending { color:#b06000; }

/* ── Load-More Button ──────────────────────────────────────────────── */
.thermal-load-more-wrap { margin-top:.85rem; }
.thermal-load-more-btn {
    display:inline-block; padding:6px 16px;
    background:#f3f4f6; color:#374151;
    border:1px solid #d1d5db; border-radius:6px;
    font-size:.82rem; cursor:pointer;
}
.thermal-load-more-btn:hover    { background:#e5e7eb; }
.thermal-load-more-btn:disabled { color:#9ca3af; cursor:not-allowed; }

/* ── Phase 3: Thermal-Suggest-Hinweis im Defekt-Modal ──────────────── */
.thermal-suggest-hint {
    margin:.15rem 0 .75rem;
    padding:.6rem .75rem;
    border-radius:5px;
    font-size:.8rem;
    line-height:1.55;
}
.thermal-suggest-hint strong {
    display:block; margin-bottom:.2rem; font-size:.82rem;
}
.thermal-suggest-hint em { color:inherit; opacity:.75; font-style:italic; }

.thermal-suggest-exact {
    background:#e8f5e9; border-left:3px solid #2e7d32; color:#1b5e20;
}
.thermal-suggest-near {
    background:#fff8e1; border-left:3px solid #f57c00; color:#5d4037;
}
.thermal-suggest-too-far {
    background:#ffebee; border-left:3px solid #c62828; color:#b71c1c;
}

/* ── Anlagen-Edit + PDF-Modal (PV UX Sub-Sequenz 1) ── */

.btn-anlage-edit {
    background: none;
    border: 1px solid #d1d5db;
    padding: 3px 10px;
    font-size: 12px;
    cursor: pointer;
    border-radius: 4px;
    color: #6b7280;
    line-height: 1.4;
    margin-left: auto;
}
.btn-anlage-edit:hover {
    background: #f9fafb;
    border-color: #9ca3af;
    color: #374151;
}

.anlage-modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.45);
    z-index: 10000;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}
.anlage-modal-box {
    background: #fff;
    border-radius: 10px;
    width: min(480px, 100%);
    box-shadow: 0 8px 40px rgba(0,0,0,.2);
    overflow: hidden;
}
.anlage-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .9rem 1.25rem;
    border-bottom: 1px solid #e5e7eb;
}
.anlage-modal-header h3 {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    color: #111827;
}
.anlage-modal-close {
    background: none;
    border: none;
    font-size: 20px;
    cursor: pointer;
    color: #9ca3af;
    line-height: 1;
    padding: 0 4px;
}
.anlage-modal-close:hover { color: #374151; }
.anlage-modal-body { padding: 1.25rem; }
.anlage-form-row { margin-bottom: .85rem; }
.anlage-form-row label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: #374151;
    margin-bottom: .3rem;
}
.anlage-form-row input {
    width: 100%;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    padding: .45rem .7rem;
    font-size: 13px;
    color: #111827;
    box-sizing: border-box;
    transition: border-color .15s;
}
.anlage-form-row input:focus {
    outline: none;
    border-color: #DE3031;
    box-shadow: 0 0 0 3px rgba(222,48,49,.1);
}
.anlage-form-actions {
    display: flex;
    justify-content: flex-end;
    gap: .5rem;
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid #f0f1f3;
}
.anlage-edit-error {
    background: #fef2f2;
    border-left: 3px solid #dc2626;
    color: #991b1b;
    padding: .65rem .85rem;
    margin-bottom: .85rem;
    border-radius: 4px;
    font-size: 12px;
}

/* ── PDF-Erstellungs-Modal ── */
.pdf-modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.5);
    z-index: 10000;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}
.pdf-modal-box {
    background: #fff;
    border-radius: 10px;
    width: min(440px, 100%);
    padding: 1.75rem 2rem;
    box-shadow: 0 8px 40px rgba(0,0,0,.22);
}
.pdf-modal-box h3 {
    margin: 0 0 1.25rem;
    font-size: 17px;
    font-weight: 700;
    text-align: center;
    color: #111827;
}
.pdf-spinner {
    width: 38px;
    height: 38px;
    border: 3px solid #e5e7eb;
    border-top-color: #DE3031;
    border-radius: 50%;
    animation: pdfSpin 1s linear infinite;
    margin: 0 auto 1.5rem;
}
@keyframes pdfSpin { to { transform: rotate(360deg); } }

.pdf-steps {
    list-style: none;
    padding: 0;
    margin: 0 0 1.25rem;
}
.pdf-step {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .45rem .75rem;
    border-left: 3px solid #e5e7eb;
    margin-bottom: .35rem;
    transition: border-color .3s, color .3s;
    font-size: 13px;
    color: #9ca3af;
}
.pdf-step.active {
    border-left-color: #DE3031;
    color: #111827;
    font-weight: 600;
}
.pdf-step.done {
    border-left-color: #16a34a;
    color: #16a34a;
}
.pdf-step-status {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .04em;
    min-width: 64px;
    flex-shrink: 0;
}
.pdf-modal-hint {
    text-align: center;
    color: #6b7280;
    font-size: 12px;
    line-height: 1.6;
    margin: 0;
}
.pdf-status-success {
    color: #15803d;
    font-weight: 600;
    text-align: center;
    padding: 1rem 0;
    font-size: 14px;
}
.pdf-status-error {
    color: #dc2626;
    font-weight: 600;
    text-align: center;
    padding: 1rem 0;
    font-size: 14px;
}
.pdf-modal-actions {
    display: flex;
    justify-content: center;
    gap: .65rem;
    margin-top: 1.25rem;
}

/* ── PV Viewer – Hintergrund ───────────────────────────────────────── */
/* Alle Viewer-Container (Thermal, RGB, Vergleich, Vollbild) auf #1a1a1a.
   !important überschreibt inline background:#111 in detail.html. */
#viewer-wrap,
#viewer-compare,
#viewer-camera,
#fs-viewer-area { background: #1a1a1a !important; }

/* ── PV Wizard – Datei entfernen ───────────────────────────────────── */
.file-remove {
    background: none;
    border: none;
    color: #9ca3af;
    cursor: pointer;
    font-size: 1.1rem;
    padding: 0 .35rem;
    line-height: 1;
    flex-shrink: 0;
}
.file-remove:hover { color: #dc2626; }
.file-remove:disabled {
    color: #d1d5db;
    cursor: not-allowed;
    opacity: .4;
}

/* ── PV Detail – Processing-Banner ────────────────────────────────── */
.processing-banner {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: .85rem 1.25rem;
    background: #fff3e0;
    border-left: 4px solid #f57c00;
    border-radius: 4px;
    margin-bottom: 1.25rem;
    flex-wrap: wrap;
}
.processing-spinner {
    width: 18px;
    height: 18px;
    border: 2px solid #f57c00;
    border-top-color: transparent;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    flex-shrink: 0;
}
.processing-text {
    display: flex;
    flex-direction: column;
    gap: .2rem;
}
.processing-text strong { color: #e65100; font-size: 13px; }
.processing-text span   { font-size: 12px; color: #555; }
.processing-hint {
    font-size: 11px;
    color: #666;
    margin-left: auto;
    text-align: right;
    max-width: 260px;
}