/* ==========================================================================
   Navi layout system
   One page template for every screen. Source: "Navi Layout and User Flow
   Review V1.0" (10 Nov 2026), section 7. Loaded last so it wins over the
   older per-screen rules in main.css, ui-revamp.css and pipeline.css.

   Page     content on the background, max 1120 px, gutter 32 / 16 px
   Header   title left, 28/700 (26 on phone), one grey line below, no icon
   Type     28 title, 20 section, 15 body, 13 caption, 11.5 group label
   Spacing  4 8 12 16 24 32
   Controls 32 / 36 / 44 px, radius 10
   Cards    radius 12, padding 16, one step lighter than the page
   ========================================================================== */

:root {
    --ls-max: 1120px;
    --ls-gutter: 32px;
    --ls-title: 28px;
    --ls-section: 20px;
    --ls-body: 15px;
    --ls-caption: 13px;
    --ls-ctl-sm: 32px;
    --ls-ctl: 36px;
    --ls-ctl-lg: 44px;
    --ls-radius-ctl: 10px;
    --ls-radius-card: 12px;
    --ls-card-pad: 16px;
    --ls-field-gap: 16px;
    --ls-chat-clearance: 96px;
    --ls-ok: #22c55e;
    --ls-warn: #f59e0b;
}

body.dark-mode {
    --ls-card-bg: var(--surface-primary, #101012);
    --ls-input-bg: #18181b;
    --ls-input-border: rgba(255, 255, 255, 0.16);
    --ls-hairline: rgba(255, 255, 255, 0.08);
}

body:not(.dark-mode) {
    --ls-card-bg: #ffffff;
    --ls-input-bg: #ffffff;
    --ls-input-border: #ced4da;
    --ls-hairline: #e9ecef;
}

@media (max-width: 768px) {
    :root {
        --ls-gutter: 16px;
        --ls-title: 26px;
    }
}

/* --------------------------------------------------------------------------
   1. Page: one container, one gutter, no outer panel
   -------------------------------------------------------------------------- */
.content-area,
body.dark-mode .content-area {
    padding: 24px var(--ls-gutter) var(--ls-chat-clearance) !important;
}

#main-content > .module-container,
#main-content > .video-workflow-module,
#main-content > .trend-radar-module,
#main-content > .ideas-dashboard-module,
#main-content > .analytics-page,
#main-content > .content-planner-container,
#main-content > .admin-dashboard,
#main-content > .kb-module,
#main-content > .skills-module,
#main-content > .mem-dash-module,
#main-content > .debugger-unified-module,
#main-content > .cockpit-dashboard,
#main-content > .learning-hub,
#main-content > .compliance-coming-soon,
#main-content > .pipe {
    max-width: var(--ls-max) !important;
    width: 100%;
    margin: 0 auto !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

/* --------------------------------------------------------------------------
   2. Page header: title left, one line of context, actions right
   -------------------------------------------------------------------------- */
#main-content .module-header,
#main-content .video-header,
#main-content .radar-header,
#main-content .ideas-header-compact,
#main-content .kb-header,
#main-content .analytics-header,
#main-content .content-planner-header,
#main-content .admin-header,
#main-content .skills-header,
#main-content .mem-dash-header,
#main-content .debugger-header,
#main-content .delivery-map-head,
#main-content .pipe-head {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap;
    align-items: flex-end !important;
    justify-content: space-between !important;
    gap: 12px 24px;
    margin: 0 0 24px !important;
    padding: 0 0 16px !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    border-bottom: 1px solid var(--ls-hairline) !important;
    text-align: left !important;
    background: none !important;
    grid-template-columns: none !important;
}

/* Workflow screens used a three-column grid (code, title, text). One column now. */
#main-content .pipe-head {
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    gap: 6px;
}

#main-content .pipe-kicker { display: none !important; }

#main-content .module-header > div:first-child,
#main-content .video-header-left,
#main-content .radar-header .header-left,
#main-content .ideas-header-left,
#main-content .kb-header > div:first-child,
#main-content .skills-header > div:first-child,
#main-content .analytics-header .header-left,
#main-content .admin-header .header-left,
#main-content .debugger-header .header-left,
#main-content .delivery-map-head > div:first-child {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    min-width: 0;
    flex: 1 1 320px;
    text-align: left;
}

#main-content .module-title,
#main-content .video-title,
#main-content .radar-title,
#main-content .ideas-title-compact,
#main-content .kb-header h1,
#main-content .skills-header h1,
#main-content .mem-dash-header h1,
#main-content .admin-header h1,
#main-content .delivery-map-head h1,
#main-content .pipe-head h1 {
    display: block !important;
    margin: 0 !important;
    font-size: var(--ls-title) !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    letter-spacing: -0.02em !important;
    text-align: left !important;
    text-transform: none !important;
    color: var(--text-primary) !important;
    grid-column: auto !important;
    justify-self: start !important;
}

/* No icon in the page title */
#main-content .module-title > i,
#main-content .video-title > i,
#main-content .radar-title > i,
#main-content .ideas-title-compact > i,
#main-content .kb-header h1 > i,
#main-content .skills-header h1 > i,
#main-content .admin-header h1 > i,
#main-content .mem-dash-header h1 > i,
#main-content .pipe-head h1 > i {
    display: none !important;
}

/* Badge above the admin title */
#main-content .admin-header .admin-badge,
#main-content .admin-header .header-badge {
    order: 2;
}

#main-content .module-subtitle,
#main-content .video-subtitle,
#main-content .radar-subtitle,
#main-content .mem-dash-sub,
#main-content .ideas-subtitle-compact,
#main-content .skills-header > div > p,
#main-content .kb-header > div > p,
#main-content .analytics-header p,
#main-content .admin-header p,
#main-content .debugger-header p,
#main-content .delivery-map-head p,
#main-content .pipe-head p {
    margin: 0 !important;
    max-width: 72ch;
    font-size: 14px !important;
    line-height: 1.45 !important;
    font-weight: 400 !important;
    color: var(--text-secondary) !important;
    text-align: left !important;
    grid-column: auto !important;
}

/* Planner week navigation gets its own row with breathing room */
#main-content .content-planner-container > .week-navigation {
    margin: 0 0 24px !important;
}

/* --------------------------------------------------------------------------
   3. Section headings inside a page: left, sentence case, one size
   -------------------------------------------------------------------------- */
#main-content .pipe-card > h2,
#main-content .pipe-pane > h2,
#main-content .settings-section > h2,
#main-content .section-title {
    margin: 0 0 12px !important;
    font-size: 16px !important;
    font-weight: 650 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    text-align: left !important;
    line-height: 1.3;
}

/* Kontrollzentrum panel titles were right-aligned uppercase */
#main-content .cockpit-dashboard .panel-header,
#main-content .cockpit-dashboard .cockpit-panel-header {
    justify-content: flex-start !important;
    gap: 10px;
}
#main-content .cockpit-dashboard .panel-header h3,
#main-content .cockpit-dashboard .panel-header .panel-title,
#main-content .cockpit-dashboard .cockpit-panel-header h3 {
    margin: 0 !important;
    text-align: left !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    font-size: 15px !important;
    font-weight: 650 !important;
    order: 2;
}

/* --------------------------------------------------------------------------
   4. Buttons: three heights, one radius, one label size
   -------------------------------------------------------------------------- */
#main-content .btn {
    min-height: var(--ls-ctl);
    height: auto;
    padding: 0 14px !important;
    border-radius: var(--ls-radius-ctl) !important;
    font-size: 14px !important;
    font-weight: 600;
    line-height: 1.2 !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    white-space: nowrap;
}

#main-content .btn-sm,
#main-content .btn.btn-sm {
    min-height: var(--ls-ctl-sm);
    padding: 0 12px !important;
    font-size: 13px !important;
}

#main-content .btn-lg,
#main-content .btn-large,
#main-content .btn.btn-lg {
    min-height: var(--ls-ctl-lg);
    padding: 0 18px !important;
    font-size: 15px !important;
}

/* Empty-state buttons were 72 / 88 px tall with oversized icons */
#main-content .empty-state .btn,
#main-content .empty-state-compact .btn,
#main-content .settings-section .empty-state .btn {
    min-height: var(--ls-ctl) !important;
    height: auto !important;
    padding: 0 16px !important;
    font-size: 14px !important;
    flex-direction: row !important;
}
#main-content .empty-state .btn i,
#main-content .empty-state-compact .btn i {
    font-size: 14px !important;
    margin: 0 !important;
}

@media (pointer: coarse) {
    #main-content .btn { min-height: var(--ls-ctl-lg); }
}

/* --------------------------------------------------------------------------
   5. Fields: 13 px label, 6 px gap, 40 px input, visible border, 16 px apart
   -------------------------------------------------------------------------- */
#main-content .pipe label:not(.pipe-check-row):not(.pipe-drop):not(.pipe-card) {
    display: block;
    margin: var(--ls-field-gap) 0 6px !important;
    font-size: var(--ls-caption) !important;
    font-weight: 600 !important;
    color: var(--text-secondary);
}
#main-content .pipe .pipe-card > label:first-child:not(.pipe-check-row):not(.pipe-drop),
#main-content .pipe .pipe-card > h2 + label:not(.pipe-check-row):not(.pipe-drop) {
    margin-top: 0 !important;
}

#main-content .pipe input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
#main-content .pipe select,
#main-content .pipe textarea,
#main-content .form-control {
    min-height: 40px;
    border: 1px solid var(--ls-input-border) !important;
    background: var(--ls-input-bg) !important;
    border-radius: var(--ls-radius-ctl) !important;
    padding: 9px 12px;
    font-size: 14px;
    color: var(--text-primary);
}
#main-content .pipe textarea,
#main-content textarea.form-control {
    min-height: 88px;
    line-height: 1.5;
}
#main-content .pipe input:focus,
#main-content .pipe select:focus,
#main-content .pipe textarea:focus,
#main-content .form-control:focus {
    outline: none;
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.18) !important;
}

/* Long placeholders in search boxes (Wissensbasis was cut off) */
#main-content input[type="search"],
#main-content .kb-search-input {
    min-width: 0;
    text-overflow: ellipsis;
}
#main-content .kb-search-input {
    width: 300px !important;
    max-width: 100%;
}

/* --------------------------------------------------------------------------
   6. Checkbox rows: the box sits in a fixed column left of its text
   -------------------------------------------------------------------------- */
#main-content .pipe input[type="checkbox"],
#main-content .pipe input[type="radio"] {
    width: 18px !important;
    height: 18px !important;
    min-height: 0 !important;
    flex: 0 0 18px;
    margin: 0 !important;
    padding: 0 !important;
    accent-color: var(--primary);
}

#main-content .pipe-check-row {
    display: flex !important;
    align-items: center;
    gap: 12px;
    min-height: 44px;
    margin: 0 !important;
    padding: 8px 0;
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 1.4;
    color: var(--text-primary) !important;
    cursor: pointer;
}
#main-content .pipe-check-row > span { flex: 1; min-width: 0; }
#main-content .pipe-check-row.is-done > span {
    color: var(--text-secondary);
    text-decoration: line-through;
    text-decoration-color: rgba(255, 255, 255, 0.25);
}

#main-content .pipe-check {
    list-style: none;
    margin: 0;
    padding: 0;
}
#main-content .pipe-check li {
    display: block !important;
    padding: 0 !important;
    border-bottom: 1px solid var(--ls-hairline) !important;
}
#main-content .pipe-check li:last-child { border-bottom: 0 !important; }

#main-content .pipe-check-card > h2 {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}
#main-content .pipe-count {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
}

#main-content .pipe-check-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 0 16px;
}
#main-content .pipe-check-grid .pipe-check-row { min-height: 40px; }

/* Cards in a grid keep their own height (group B was stretched to A) */
#main-content .pipe-grid { align-items: start; gap: 16px; }

/* Status line on the checklist */
#main-content .pipe-status {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 16px;
}
#main-content .pipe-status > span {
    padding: 6px 10px;
    border-radius: 999px;
    background: var(--ls-card-bg);
    border: 1px solid var(--ls-hairline);
    font-size: 13px;
    color: var(--text-secondary);
}
#main-content .pipe-status > span.is-warn {
    color: var(--ls-warn);
    border-color: rgba(245, 158, 11, 0.35);
}

/* --------------------------------------------------------------------------
   7. Cards: one radius, one padding, no decorative coloured edges
   -------------------------------------------------------------------------- */
#main-content .pipe-card,
#main-content .pipe-pane {
    background: var(--ls-card-bg) !important;
    border: 1px solid var(--ls-hairline) !important;
    border-radius: var(--ls-radius-card) !important;
    padding: var(--ls-card-pad) !important;
    box-shadow: none !important;
}

#main-content .admin-quick-stats > *,
#main-content .checklist-item,
#main-content .plan-row,
#main-content .metric-card {
    border-left-width: 1px !important;
    border-left-color: var(--ls-hairline) !important;
}

/* Admin: six stat cards fill two rows of three, no orphans */
#main-content .admin-dashboard .admin-quick-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}
#main-content .admin-dashboard .admin-section > .section-title {
    margin: 0 0 12px !important;
    padding: 0 !important;
}
@media (max-width: 720px) {
    #main-content .admin-dashboard .admin-quick-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

/* --------------------------------------------------------------------------
   8. Result panels: labelled empty state instead of a black box
   -------------------------------------------------------------------------- */
#main-content .pipe-output {
    margin-top: 16px;
    min-height: 0 !important;
    border: 1px solid var(--ls-hairline);
    background: var(--ls-input-bg) !important;
    border-radius: var(--ls-radius-ctl) !important;
    padding: 14px 16px !important;
}
#main-content .pipe-card > h2 + .pipe-output,
#main-content .pipe-pane > h2 + .pipe-output { margin-top: 0; }
#main-content .pipe-output:empty {
    border-style: dashed;
    background: transparent !important;
    padding: 20px 16px !important;
}
#main-content .pipe-output:empty::before {
    content: attr(data-empty);
    display: block;
    color: var(--text-secondary);
    font-size: 14px;
    line-height: 1.5;
}

#main-content .pipe-actions { margin-top: 16px; gap: 8px; }

/* Drop zone reads as a drop zone, not as another text area */
#main-content .pipe-drop {
    margin-top: 16px;
    border: 1px dashed var(--ls-input-border) !important;
    background: transparent !important;
    border-radius: var(--ls-radius-card) !important;
}

/* --------------------------------------------------------------------------
   9. Channel status row (replaces seven heavy connect buttons)
   -------------------------------------------------------------------------- */
#main-content .pipe-connect {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin: 0 0 16px !important;
}
#main-content .pipe-connect-label {
    font-size: 13px;
    color: var(--text-secondary);
    margin-right: 4px;
}
#main-content .pipe-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 28px;
    padding: 0 10px;
    border-radius: 999px;
    border: 1px solid var(--ls-hairline);
    background: var(--ls-card-bg);
    color: var(--text-secondary);
    font: 500 12.5px/1 inherit;
    font-family: inherit;
    cursor: pointer;
}
#main-content .pipe-chip:hover { color: var(--text-primary); border-color: var(--ls-input-border); }
#main-content .pipe-chip-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--text-disabled, #636366);
}
#main-content .pipe-chip.is-on { color: var(--text-primary); }
#main-content .pipe-chip.is-on .pipe-chip-dot { background: var(--ls-ok); }
#main-content .pipe-connect-manage {
    margin-left: 6px;
    font-size: 13px;
    color: var(--text-secondary);
    text-decoration: underline;
    text-underline-offset: 3px;
}
#main-content .pipe-connect-manage:hover { color: var(--text-primary); }

/* Setup-Assistent channel tabs: one compact segmented row */
#main-content .pipe-channels { gap: 6px; margin: 0 0 12px !important; }
#main-content .pipe-channels .btn {
    min-height: var(--ls-ctl-sm);
    font-size: 13px !important;
}
#main-content .pipe-channels .btn[aria-pressed="true"] {
    background: var(--text-primary) !important;
    color: #0a0a0a !important;
    border-color: var(--text-primary) !important;
}
#main-content .pipe-pane > h2,
#main-content .pipe-card > h2 { font-size: 16px !important; }
#main-content .pipe-subhead { margin-top: 32px !important; padding-top: 16px; border-top: 1px solid var(--ls-hairline); }

/* --------------------------------------------------------------------------
   10. Loading: centred, appears only if loading takes > 300 ms, no flicker
   -------------------------------------------------------------------------- */
#main-content > .loading-state,
#main-content .loading-state {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-height: 50vh;
    width: 100%;
    margin: 0 !important;
    padding: 0 !important;
    text-align: center;
    background: transparent !important;
    border: 0 !important;
    color: var(--text-secondary);
}
#main-content .loading-state.is-deferred {
    opacity: 0;
    animation: ls-loader-in 160ms ease-out 300ms forwards;
}
@keyframes ls-loader-in { to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
    #main-content .loading-state.is-deferred { animation-duration: 1ms; }
}

/* --------------------------------------------------------------------------
   11. Top bar and floating chat button
   -------------------------------------------------------------------------- */
/* Pages end with bottom padding (--ls-chat-clearance) so the chat button never
   covers the last line. On phones the button moves into the top bar (section 13). */

/* --------------------------------------------------------------------------
   12. Sign-in
   -------------------------------------------------------------------------- */
.btn-login {
    justify-content: center !important;
    text-align: center !important;
}

/* --------------------------------------------------------------------------
   13. Phone: one 16 px gutter, two-item top bar, no sideways scroll
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
    html, body { overflow-x: hidden; }

    .content-area,
    body.dark-mode .content-area {
        padding: 16px var(--ls-gutter) var(--ls-chat-clearance) !important;
    }

    #main-content .module-header,
    #main-content .video-header,
    #main-content .radar-header,
    #main-content .ideas-header-compact,
    #main-content .kb-header,
    #main-content .analytics-header,
    #main-content .admin-header,
    #main-content .skills-header,
    #main-content .debugger-header,
    #main-content .delivery-map-head,
    #main-content .pipe-head {
        margin-bottom: 16px !important;
    }

    /* Header actions wrap under the title instead of pushing it */
    #main-content .module-header-actions,
    #main-content .video-header-actions,
    #main-content .radar-header-actions,
    #main-content .ideas-header-actions,
    #main-content .kb-header-actions,
    #main-content .admin-header .header-right {
        width: 100%;
        flex-wrap: wrap;
        justify-content: flex-start !important;
    }

    /* Nested grids collapse to one column */
    #main-content .pipe-grid.two,
    #main-content .pipe-setup {
        grid-template-columns: 1fr !important;
    }

    /* Wide strips scroll inside themselves, never the page */
    #main-content .settings-tabs,
    #main-content .chart-container,
    #main-content .pipe-channels,
    #main-content .debugger-tabs,
    #main-content .radar-kind-toggle,
    #main-content .stage-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        max-width: 100%;
        -webkit-overflow-scrolling: touch;
    }

    /* Trend-Radar: the radar fits the screen */
    #main-content .trend-radar-module,
    #main-content .radar-layout,
    #main-content .radar-visual,
    #main-content .radar-container {
        max-width: 100% !important;
        min-width: 0 !important;
    }
    #main-content .radar-container svg,
    #main-content .radar-visual svg,
    #main-content .radar-canvas {
        max-width: 100% !important;
        height: auto !important;
    }

    /* Planner week navigation stays inside its card */
    #main-content .week-navigation {
        flex-wrap: wrap;
        max-width: 100%;
    }

    /* Top bar: wordmark + brand switcher + account, the rest goes in the account menu */
    .top-header {
        padding-left: 12px !important;
        padding-right: 12px !important;
        gap: 8px;
    }
    .top-header .app-title { display: none !important; }
    .top-header .header-right,
    .top-header .header-actions {
        min-width: 0;
        gap: 6px !important;
    }
    .top-header .language-switcher,
    .top-header .notification-wrapper,
    .top-header .notifications-wrapper,
    .top-header #notification-btn,
    .top-header .notification-btn {
        display: none !important;
    }
    .top-header .user-account-name { display: none !important; }
    .top-header .brand-selector-btn {
        max-width: 46vw;
        min-width: 0;
    }
    .top-header .selected-brand-name {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        min-width: 0;
    }

    /* The fixed header already reserves its height; no second gap above the title */
    .content-area,
    body.dark-mode .content-area {
        margin-top: 0 !important;
    }

    /* Chat button moves into the top bar so it stops covering content */
    .chatbot-widget,
    body.dark-mode .chatbot-widget {
        z-index: 1001 !important;
        top: 9px !important;
        bottom: auto !important;
        left: 60px !important;
        right: auto !important;
    }
    .chatbot-widget .chatbot-toggle,
    body.dark-mode .chatbot-widget .chatbot-toggle,
    body.app-reveal .chatbot-widget .chatbot-toggle {
        transform: none !important;
        min-width: 0 !important;
        position: relative !important;
        inset: 0 auto auto 0 !important;
        margin: 0 !important;
        width: 38px !important;
        height: 38px !important;
        font-size: 16px !important;
        box-shadow: none !important;
    }
    :root { --ls-chat-clearance: 32px; }

    /* Primary actions are full width and easy to hit */
    #main-content .pipe-actions .btn-primary {
        flex: 1 1 100%;
        min-height: 48px;
    }
}

/* --------------------------------------------------------------------------
   14. Screen-specific fixes from section 4 of the review
   -------------------------------------------------------------------------- */

/* Kontrollzentrum: standard header, sentence-case panel titles on the left */
#main-content .cockpit-page-header .readiness-label {
    font-size: 12px !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}
#main-content .cockpit-dashboard .panel-header {
    justify-content: flex-start !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    font-size: 15px !important;
    font-weight: 650 !important;
    color: var(--text-primary) !important;
    gap: 10px;
}
#main-content .cockpit-dashboard .panel-header span {
    text-transform: none !important;
    letter-spacing: 0 !important;
}
#main-content .cockpit-dashboard .cockpit-panel {
    border-radius: var(--ls-radius-card) !important;
    background: var(--ls-card-bg) !important;
    box-shadow: none !important;
}
#main-content .cockpit-dashboard .checklist-item {
    border-left: 1px solid var(--ls-hairline) !important;
}

/* Trend-Radar: an empty clock pill under the Brand / Alle switch */
#main-content .radar-last-updated:empty { display: none !important; }

/* Video-Produktion: step tiles share one width */
#main-content .individual-stage-buttons {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 8px;
}
#main-content .individual-stage-buttons .btn-stage {
    width: 100%;
    min-height: var(--ls-ctl-lg) !important;
}

/* Einstellungen: section title smaller than the page title, inside the padding */
#main-content .settings-section .section-header h3 {
    font-size: var(--ls-section) !important;
    margin: 0 0 8px !important;
}

/* Admin: period select and refresh button stay on one row */
#main-content .admin-header .header-right {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap;
    align-items: center;
    gap: 8px;
    width: auto !important;
}
#main-content .admin-header select {
    width: auto !important;
    min-width: 160px;
}

/* Debugging: "Connected" chips are not drawn as errors */
#main-content .debugger-unified-module .status-mini-card.connected {
    border-color: rgba(34, 197, 94, 0.45) !important;
    color: var(--ls-ok) !important;
}

/* Prozesslandkarte: the embedded map uses the page height, not 440 px */
#main-content .delivery-map-frame {
    min-height: calc(100vh - 220px) !important;
    border-radius: var(--ls-radius-card);
}

/* Lernzentrum and Compliance-Prüfer: hero blocks start on the content edge */
#main-content .learning-hero,
#main-content .compliance-coming-soon .coming-soon-content {
    border-radius: var(--ls-radius-card) !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Sidebar: one label per group; no double "Demnächst" + "Bald" */
.nav-item-coming-soon .coming-soon-badge { display: none !important; }
.sidebar .nav-item a span,
.sidebar a.nav-item span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Account menu language row: only shown on phones, where the flag is hidden */
.user-dropdown-lang { display: none; }
@media (max-width: 768px) {
    .user-dropdown-lang {
        display: flex;
        gap: 6px;
        padding: 8px 12px;
        border-bottom: 1px solid var(--ls-hairline);
    }
    .user-dropdown-lang .lang-option {
        flex: 1;
        justify-content: center;
        min-height: 36px;
        border-radius: var(--ls-radius-ctl);
        border: 1px solid var(--ls-hairline);
        background: transparent;
        color: var(--text-primary);
        font: inherit;
        font-size: 13px;
    }
}

/* Einstellungen: the section card gets its inner padding back */
#main-content .settings-content { padding: 0 !important; }
#main-content .settings-section {
    padding: var(--ls-card-pad) !important;
    border-radius: var(--ls-radius-card) !important;
    margin-bottom: 24px !important;
}

/* Admin stat cards: no decorative colour strip, readable on a phone */
#main-content .quick-stat-card::before { display: none !important; }
#main-content .quick-stat-card {
    border-radius: var(--ls-radius-card) !important;
    padding: var(--ls-card-pad) !important;
}
@media (max-width: 480px) {
    #main-content .admin-dashboard .admin-quick-stats {
        grid-template-columns: 1fr !important;
    }
}

/* Wissensbasis: "Brand Memory" was shown twice (under the subtitle and in the folder list) */
#main-content .kb-module .kb-header-link { display: none !important; }

/* ==========================================================================
   DESIGN PASS 2 (UI audit, 10 Nov 2026)
   Principles: hierarchy from type and spacing, not from borders. One surface
   per card, never a card inside a card. Lists are inset and grouped. Status
   is a quiet tinted capsule. Red is for the one primary action. No glows.
   ========================================================================== */

body.dark-mode {
    --ls-surface-1: #151517;              /* card on the page */
    --ls-surface-2: #1f1f22;              /* grouped list / field inside a card */
    --ls-surface-3: #2a2a2e;              /* hover, pressed */
    --ls-label-2: rgba(235, 235, 245, 0.62);
    --ls-label-3: rgba(235, 235, 245, 0.38);
    --ls-separator: rgba(255, 255, 255, 0.07);
    --ls-card-bg: var(--ls-surface-1);
    --ls-input-bg: var(--ls-surface-2);
    --ls-input-border: rgba(255, 255, 255, 0.10);
    --ls-hairline: var(--ls-separator);
    --ls-ok: #30d158;
    --ls-warn: #ff9f0a;
    --ls-red: #e5342f;
    --ls-radius-card: 16px;
}

/* --------------------------------------------------------------------------
   A. Loader: a calm panel that names the page (mockup 2.1)
   -------------------------------------------------------------------------- */
#main-content > .loading-state {
    max-width: var(--ls-max);
    min-height: min(520px, 62vh);
    margin: 0 auto !important;
    border: 1px solid var(--ls-separator) !important;
    border-radius: 20px;
    background: var(--ls-surface-1) !important;
    gap: 20px;
}
#main-content > .loading-state p {
    margin: 0;
    font-size: 17px;
    font-weight: 500;
    letter-spacing: -0.01em;
    color: var(--ls-label-2);
}
#main-content > .loading-state .loading-spinner {
    width: 44px;
    height: 44px;
    margin: 0;
    border: 3px solid rgba(255, 255, 255, 0.10);
    border-top-color: var(--ls-red);
    border-right-color: var(--ls-red);
    border-radius: 50%;
    animation: ls-spin 0.9s linear infinite;
}
@keyframes ls-spin { to { transform: rotate(360deg); } }

/* --------------------------------------------------------------------------
   B. Checklist: grouped inset list with round checks (mockup 2.2)
   -------------------------------------------------------------------------- */
#main-content .pipe-check-card {
    padding: 16px !important;
    border-radius: 20px !important;
}
#main-content .pipe-check-card > .pipe-group-label {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin: 4px 8px 12px !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    color: var(--ls-label-2) !important;
}
#main-content .pipe-check-card .pipe-count {
    font-size: 12.5px;
    letter-spacing: 0.04em;
    color: var(--ls-label-2);
}
#main-content .pipe-check {
    background: var(--ls-surface-2);
    border-radius: 14px;
    overflow: hidden;
}
#main-content .pipe-check li {
    border-bottom: 0 !important;
    position: relative;
}
#main-content .pipe-check li + li::before {
    content: '';
    position: absolute;
    top: 0;
    left: 58px;
    right: 0;
    height: 1px;
    background: var(--ls-separator);
}
#main-content .pipe-check .pipe-check-row {
    min-height: 56px;
    padding: 10px 16px;
    gap: 16px;
    font-size: 15px !important;
    transition: background-color 120ms ease;
}
#main-content .pipe-check .pipe-check-row:hover { background: rgba(255, 255, 255, 0.03); }
#main-content .pipe-check .pipe-check-row:active { background: rgba(255, 255, 255, 0.06); }

/* Round check, used for every checkbox on the workflow screens */
#main-content .pipe input[type="checkbox"] {
    -webkit-appearance: none;
    appearance: none;
    width: 26px !important;
    height: 26px !important;
    flex: 0 0 26px;
    border: 2px solid rgba(255, 255, 255, 0.28) !important;
    border-radius: 50% !important;
    background: transparent center / 14px 14px no-repeat !important;
    cursor: pointer;
    transition: background-color 140ms ease, border-color 140ms ease, transform 140ms ease;
}
#main-content .pipe input[type="checkbox"]:hover { border-color: rgba(255, 255, 255, 0.5) !important; }
#main-content .pipe input[type="checkbox"]:active { transform: scale(0.92); }
#main-content .pipe input[type="checkbox"]:checked {
    border-color: var(--ls-ok) !important;
    background-color: var(--ls-ok) !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M2.5 7.4l3 3 6-6.6' fill='none' stroke='%23062b10' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
}
#main-content .pipe input[type="checkbox"]:focus-visible {
    outline: 2px solid rgba(48, 209, 88, 0.6);
    outline-offset: 2px;
}
#main-content .pipe-check-row.is-done > span {
    color: var(--ls-label-3);
    text-decoration: none;
}
#main-content .pipe-check-grid .pipe-check-row { gap: 12px; }
#main-content .pipe-check-grid input[type="checkbox"],
#main-content .pipe-card > .pipe-check-row input[type="checkbox"] {
    width: 22px !important;
    height: 22px !important;
    flex-basis: 22px;
    background-size: 12px 12px !important;
}

/* --------------------------------------------------------------------------
   C. App shell: neutral chrome, no glows
   -------------------------------------------------------------------------- */
body.dark-mode .top-header {
    box-shadow: none !important;
    border-bottom: 1px solid var(--ls-separator);
}
body.dark-mode .top-header .user-account-btn,
body.dark-mode .top-header .brand-selector-btn {
    height: 36px;
    padding: 0 12px !important;
    border: 1px solid var(--ls-separator) !important;
    border-radius: 10px !important;
    background: var(--ls-surface-1) !important;
    background-image: none !important;
    box-shadow: none !important;
    color: var(--text-primary) !important;
    font-size: 14px;
    font-weight: 500;
}
body.dark-mode .top-header .user-account-btn:hover,
body.dark-mode .top-header .brand-selector-btn:hover {
    background: var(--ls-surface-2) !important;
}
body.dark-mode .top-header .user-account-btn > i:first-child,
body.dark-mode .top-header .brand-selector-btn > i:first-child {
    color: var(--ls-label-2) !important;
}
body.dark-mode .top-header .brand-dropdown,
body.dark-mode .top-header .user-account-dropdown,
body.dark-mode .top-header .notifications-dropdown,
body.dark-mode .top-header .lang-dropdown {
    border: 1px solid rgba(255, 255, 255, 0.10) !important;
    border-radius: 14px !important;
    background: #1c1c1f !important;
    background-image: none !important;
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.55) !important;
}

/* Sidebar: active item is a quiet tinted row, red only on the icon */
body.dark-mode .sidebar .nav-menu > li.nav-item > a {
    border-radius: 10px;
    transition: background-color 120ms ease;
}
body.dark-mode .sidebar .nav-menu > li.nav-item.active > a {
    background: rgba(255, 255, 255, 0.08) !important;
    background-image: none !important;
    box-shadow: none !important;
    border: 0 !important;
    color: var(--text-primary) !important;
}
body.dark-mode .sidebar .nav-menu > li.nav-item.active > a > i { color: var(--ls-red) !important; }
body.dark-mode .sidebar .nav-menu > li.nav-item:not(.active) > a:hover {
    background: rgba(255, 255, 255, 0.04) !important;
}

/* --------------------------------------------------------------------------
   D. Buttons: flat fills, no glow. One red primary; the rest neutral.
   -------------------------------------------------------------------------- */
body.dark-mode #main-content .btn {
    box-shadow: none !important;
    text-shadow: none !important;
    transition: background-color 120ms ease, border-color 120ms ease, opacity 120ms ease, transform 120ms ease;
}
body.dark-mode #main-content .btn:active:not(:disabled) { transform: scale(0.98); }
body.dark-mode #main-content .btn-primary {
    background: var(--ls-red) !important;
    background-image: none !important;
    border: 0 !important;
    color: #fff !important;
}
body.dark-mode #main-content .btn-primary:hover:not(:disabled) { background: #f0453f !important; }
body.dark-mode #main-content .btn-secondary,
body.dark-mode #main-content .btn-outline,
body.dark-mode #main-content .btn-ghost {
    background: var(--ls-surface-2) !important;
    background-image: none !important;
    border: 1px solid var(--ls-separator) !important;
    color: var(--text-primary) !important;
}
body.dark-mode #main-content .btn-secondary:hover:not(:disabled),
body.dark-mode #main-content .btn-outline:hover:not(:disabled),
body.dark-mode #main-content .btn-ghost:hover:not(:disabled) {
    background: var(--ls-surface-3) !important;
}
body.dark-mode #main-content .btn:disabled,
body.dark-mode #main-content .btn[disabled] {
    opacity: 0.45;
    cursor: default;
}
body.dark-mode #main-content .btn:focus-visible {
    outline: 2px solid rgba(229, 52, 47, 0.7);
    outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   E. Schnell erstellen: landing form
   -------------------------------------------------------------------------- */
#main-content .content-selection-container {
    max-width: 760px;
    margin: 0 auto;
}
#main-content .chat-input-section,
#main-content .manual-selection-section {
    padding: 28px !important;
    border: 1px solid var(--ls-separator) !important;
    border-radius: 20px !important;
    background: var(--ls-surface-1) !important;
    box-shadow: none !important;
}
#main-content .chat-input-section h2,
#main-content .manual-selection-section h2 {
    font-size: 22px !important;
    font-weight: 700 !important;
    letter-spacing: -0.02em;
    margin: 0 0 6px !important;
}
#main-content .chat-input-section .helper-text {
    margin: 0 0 20px !important;
    font-size: 15px !important;
    color: var(--ls-label-2) !important;
}
#main-content .chat-input-large {
    min-height: 112px;
    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 1.5;
    border-radius: 14px !important;
    padding: 14px 16px !important;
}
/* Photo library sits on the card, separated by a hairline: no box in a box */
#main-content .chat-input-section .ref-images,
#main-content #quick-reference-wrap .ref-images {
    margin: 20px 0 !important;
    padding: 16px 0 0 !important;
    border: 0 !important;
    border-top: 1px solid var(--ls-separator) !important;
    border-radius: 0 !important;
    background: transparent !important;
}
#main-content .ref-images .ref-images-label {
    font-size: 15px !important;
    font-weight: 600 !important;
    color: var(--text-primary) !important;
    margin: 0 0 4px !important;
}
#main-content .ref-images .ref-images-label i { display: none; }
#main-content .ref-images .ref-images-hint {
    text-align: left !important;
    margin: 0 0 12px !important;
    font-size: 13px;
    color: var(--ls-label-2);
}
#main-content .ref-lib-kb-link {
    color: var(--text-primary) !important;
    text-decoration: underline;
    text-underline-offset: 3px;
    font-weight: 500;
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
}
#main-content .ref-folder-chip {
    height: 28px;
    padding: 0 12px !important;
    border: 1px solid var(--ls-separator) !important;
    background: transparent !important;
    color: var(--ls-label-2) !important;
    font-size: 13px !important;
}
#main-content .ref-folder-chip.is-active {
    background: rgba(255, 255, 255, 0.10) !important;
    border-color: transparent !important;
    color: var(--text-primary) !important;
}
#main-content .ref-library-grid { gap: 10px; }
#main-content .ref-lib-card,
#main-content .ref-thumb-add {
    width: 88px !important;
    height: 88px !important;
    border-radius: 12px !important;
    overflow: hidden;
}
#main-content .ref-lib-card .ref-lib-pick { width: 100%; height: 100%; padding: 0; border: 0; background: var(--ls-surface-2); display: block; }
#main-content .ref-lib-card img { width: 100%; height: 100%; object-fit: cover; display: block; }
#main-content .ref-lib-card.is-selected { outline: 2px solid var(--ls-ok); outline-offset: 2px; }
#main-content .ref-thumb-add {
    border: 1px dashed rgba(255, 255, 255, 0.18) !important;
    background: transparent !important;
    color: var(--ls-label-2) !important;
}
#main-content .ref-thumb-add:hover { background: rgba(255, 255, 255, 0.04) !important; color: var(--text-primary) !important; }

/* Single-phase buttons: a segmented row, not five heavy boxes */
#main-content .quick-stage-btn {
    min-height: 36px;
    padding: 0 14px !important;
    border: 1px solid var(--ls-separator) !important;
    border-radius: 10px !important;
    background: var(--ls-surface-2) !important;
    box-shadow: none !important;
    font-size: 13.5px;
    font-weight: 500;
    color: var(--text-primary) !important;
}
#main-content .quick-stage-btn.active {
    background: rgba(255, 255, 255, 0.14) !important;
    border-color: transparent !important;
}
#main-content .quick-stage-btn i { color: var(--ls-label-2) !important; }

/* Manual configuration: selection is a tint and a check, not a red glow */
#main-content .platform-card,
#main-content .content-type-option {
    border: 1px solid var(--ls-separator) !important;
    border-radius: 14px !important;
    background: var(--ls-surface-2) !important;
    background-image: none !important;
    box-shadow: none !important;
    transition: background-color 120ms ease, border-color 120ms ease;
}
#main-content .platform-card:hover,
#main-content .content-type-option:hover { background: var(--ls-surface-3) !important; }
#main-content .platform-card.selected,
#main-content .content-type-option.selected {
    border-color: var(--ls-red) !important;
    background: rgba(229, 52, 47, 0.10) !important;
}
#main-content .content-type-option {
    min-height: 40px;
    padding: 0 14px !important;
    font-size: 14px;
}
#main-content .content-type-selector-group {
    padding: 16px !important;
    border: 0 !important;
    border-radius: 14px !important;
    background: transparent !important;
    box-shadow: none !important;
    border-top: 1px solid var(--ls-separator) !important;
    border-radius: 0 !important;
    padding: 16px 0 !important;
    margin: 0 !important;
}

/* --------------------------------------------------------------------------
   F. Schnell erstellen: phases. One card per phase, content on the card.
   Before: stage list border > card (30) > body (40) > content border >
   output border > item. Content started 100 px inside the card.
   -------------------------------------------------------------------------- */
#main-content .draft-status-indicator {
    margin: 0 0 16px !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    color: var(--ls-label-2) !important;
    font-size: 13px !important;
}
#main-content .draft-status-indicator i { color: var(--ls-ok); }

/* Step rail */
#main-content .creation-status-bar {
    padding: 20px 24px !important;
    margin: 0 0 20px !important;
    border: 1px solid var(--ls-separator) !important;
    border-radius: 16px !important;
    background: var(--ls-surface-1) !important;
    box-shadow: none !important;
}
#main-content .creation-status-bar .status-icon {
    width: 36px !important;
    height: 36px !important;
    border: 0 !important;
    background: var(--ls-surface-3) !important;
    box-shadow: none !important;
    font-size: 13px !important;
    color: var(--ls-label-2) !important;
}
#main-content .creation-status-bar .status-step.active .status-icon,
#main-content .creation-status-bar .status-step.in-progress .status-icon {
    background: var(--ls-red) !important;
    color: #fff !important;
}
#main-content .creation-status-bar .status-step.completed .status-icon {
    background: rgba(48, 209, 88, 0.18) !important;
    color: var(--ls-ok) !important;
}
#main-content .creation-status-bar .status-label {
    margin-top: 8px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: var(--ls-label-2) !important;
}
#main-content .creation-status-bar .status-step.active .status-label,
#main-content .creation-status-bar .status-step.in-progress .status-label { color: var(--text-primary) !important; }

#main-content .creation-stages {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: none !important;
    box-shadow: none !important;
}
#main-content .stage-card {
    margin: 0 !important;
    padding: 20px 24px 24px !important;
    border: 1px solid var(--ls-separator) !important;
    border-radius: 16px !important;
    background: var(--ls-surface-1) !important;
    background-image: none !important;
    box-shadow: none !important;
}
#main-content .stage-card.collapsed { padding: 0 !important; }
#main-content .stage-card.inactive-pending {
    background: transparent !important;
    opacity: 1 !important;
}
#main-content .stage-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 32px;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: none !important;
}
#main-content .stage-card.collapsed .stage-card-header { padding: 14px 20px !important; }
#main-content .stage-card-header.clickable { cursor: pointer; }
#main-content .stage-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 17px !important;
    font-weight: 650 !important;
    letter-spacing: -0.01em;
    color: var(--text-primary) !important;
}
#main-content .stage-title > i:not(.collapse-icon) {
    width: 20px;
    text-align: center;
    font-size: 14px !important;
    color: var(--ls-label-2) !important;
}
#main-content .stage-title .collapse-icon {
    font-size: 11px !important;
    color: var(--ls-label-3) !important;
}
#main-content .stage-card.inactive-pending .stage-title { color: var(--ls-label-2) !important; font-weight: 500 !important; }
#main-content .stage-card.inactive-pending .stage-title .collapse-icon { display: none; }

/* Status capsule */
#main-content .stage-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 26px;
    padding: 0 10px !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, 0.08) !important;
    box-shadow: none !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
    color: var(--ls-label-2) !important;
    white-space: nowrap;
}
#main-content .stage-status-badge i { font-size: 11px; }
#main-content .stage-status-badge .stage-waiting-tip { display: none; }
#main-content .stage-status-badge.status-pending {
    background: transparent !important;
    color: var(--ls-label-3) !important;
    font-weight: 500 !important;
}
#main-content .stage-status-badge.status-in-progress {
    background: rgba(255, 159, 10, 0.16) !important;
    color: var(--ls-warn) !important;
}
#main-content .stage-status-badge.status-waiting-approval {
    background: rgba(229, 52, 47, 0.16) !important;
    color: #ff6b63 !important;
}
#main-content .stage-status-badge.status-completed,
#main-content .stage-status-badge.status-approved {
    background: rgba(48, 209, 88, 0.16) !important;
    color: var(--ls-ok) !important;
}

#main-content .stage-body {
    padding: 4px 0 0 !important;
    margin: 0 !important;
    border: 0 !important;
    background: none !important;
}
#main-content .stage-description {
    margin: 0 0 16px !important;
    font-size: 14px !important;
    color: var(--ls-label-2) !important;
}
#main-content .stage-content {
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: none !important;
    box-shadow: none !important;
}
#main-content .stage-content:empty { display: none; }
#main-content .stage-output {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 0 !important;
    border: 0 !important;
    background: none !important;
    box-shadow: none !important;
}
#main-content .stage-output .output-item {
    margin: 0 !important;
    padding: 14px 16px !important;
    border: 0 !important;
    border-radius: 12px !important;
    background: var(--ls-surface-2) !important;
    box-shadow: none !important;
}
#main-content .stage-output .output-item > strong {
    display: block;
    margin: 0 0 6px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ls-label-2);
}
#main-content .stage-output .output-item p,
#main-content .stage-output .output-item li {
    font-size: 15px;
    line-height: 1.5;
    color: var(--text-primary);
    background: none !important;
}
#main-content .stage-output .output-item ul { margin: 0; padding-left: 18px !important; }
#main-content .stage-output .output-item li { padding: 2px 0 !important; list-style: disc; }
#main-content .stage-output .output-item li::marker { color: var(--ls-label-3); }
#main-content .stage-output .output-item li::before { display: none !important; }

#main-content .stage-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 16px 0 0 !important;
    padding: 16px 0 0 !important;
    border: 0 !important;
    border-top: 1px solid var(--ls-separator) !important;
    background: none !important;
}
/* Approve is the one primary action of a finished phase; the rest are neutral */
body.dark-mode #main-content .stage-actions .btn-success {
    background: var(--ls-red) !important;
    border: 0 !important;
    color: #fff !important;
}
body.dark-mode #main-content .stage-actions .btn-success ~ .btn-primary {
    background: var(--ls-surface-2) !important;
    border: 1px solid var(--ls-separator) !important;
    color: var(--text-primary) !important;
}
#main-content .stage-loading {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 0;
    color: var(--ls-label-2);
    font-size: 14px;
}

/* Progress while a phase runs: sits on the card, no inner frame */
#main-content .planning-progress-container,
#main-content .concept-progress-container,
#main-content .creation-progress-container,
#main-content .visual-progress-container,
#main-content .images-progress-container {
    padding: 0 !important;
    border: 0 !important;
    background: none !important;
}
#main-content .stage-content .progress-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    text-align: left !important;
    margin: 0 0 12px !important;
}
#main-content .stage-content .progress-header h4 {
    margin: 0 !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    color: var(--text-primary) !important;
    text-transform: none !important;
}
#main-content .stage-content .progress-header h4 i { display: none; }
#main-content .stage-content .progress-header p {
    margin: 0 !important;
    font-size: 13px !important;
    color: var(--ls-label-2) !important;
}
#main-content .stage-content .progress-bar-container {
    height: 6px !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, 0.10) !important;
}
#main-content .stage-content .progress-bar-container > :not(.progress-bar-fill) { display: none !important; }
#main-content .stage-content .progress-bar-fill {
    background: var(--ls-red) !important;
    border-radius: 999px;
}
#main-content .stage-content .channel-progress-list {
    margin-top: 16px !important;
    border-radius: 12px;
    overflow: hidden;
    background: var(--ls-surface-2);
}
#main-content .stage-content .channel-progress-item {
    margin: 0 !important;
    padding: 12px 16px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
}
#main-content .stage-content .channel-progress-item + .channel-progress-item {
    border-top: 1px solid var(--ls-separator) !important;
}

/* Phase output is rendered with inline styles; calm them down here */
#main-content .stage-output .output-item li > i.fa-check-circle { display: none !important; }
#main-content .stage-output .output-item ul { list-style: disc !important; padding-left: 20px !important; }
#main-content .stage-output .output-item li {
    line-height: 1.5 !important;
    padding: 3px 0 !important;
    color: var(--text-primary) !important;
}
#main-content .stage-output .output-item > div[style*="border-left"] {
    border-left: 0 !important;
    padding-left: 0 !important;
    display: grid;
    gap: 12px;
}
#main-content .stage-output .output-item > div[style*="border-left"] > div {
    margin: 0 !important;
    padding: 0 !important;
    background: none !important;
}
#main-content .stage-output .output-item > div[style*="border-left"] > div > div:first-child {
    margin: 0 0 2px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--ls-label-2) !important;
}
#main-content .stage-output .output-item > div[style*="border-left"] > div > div:last-child {
    font-size: 15px !important;
    line-height: 1.5 !important;
    color: var(--text-primary) !important;
}
#main-content .stage-content details > summary {
    margin-top: 12px;
    font-size: 13px;
    color: var(--ls-label-2);
    cursor: pointer;
}

/* Step rail line runs through the icon centres (icons are 36 px, bar padding 20 px) */
#main-content .creation-status-bar { position: relative; }
#main-content .creation-status-bar::before {
    top: 37px !important;
    left: 10% !important;
    right: 10% !important;
    height: 2px !important;
    background: var(--ls-separator) !important;
}
#main-content .creation-status-bar .status-step { gap: 0 !important; }

/* A phase that has not produced anything yet takes no space */
#main-content .stage-body,
#main-content .stage-content { min-height: 0 !important; }
#main-content .stage-content:not(:has(*)) { display: none !important; }
#main-content .stage-card:not(.collapsed) .stage-body { height: auto !important; }

/* Real bullets */
#main-content .stage-output .output-item li {
    display: list-item !important;
    list-style: disc outside !important;
}

/* --------------------------------------------------------------------------
   G. Phase results with several posts (Konzept, Erstellung, Visuelles Konzept)
   Markup carries inline colours; these rules bring it onto the same surface
   and label system as the rest.
   -------------------------------------------------------------------------- */
#main-content .multi-content-output { padding: 0 !important; }

/* Approval bar: neutral, with one primary action */
#main-content .multi-content-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0 0 20px !important;
    padding: 10px 12px 10px 16px !important;
    border: 0 !important;
    border-radius: 12px !important;
    background: var(--ls-surface-2) !important;
}
#main-content .multi-content-header .approval-stats span {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: var(--text-primary) !important;
}
#main-content .multi-content-header .approval-stats i { color: var(--ls-ok) !important; margin-right: 6px; }
body.dark-mode #main-content .multi-content-header .btn-success {
    background: var(--ls-surface-3) !important;
    border: 1px solid var(--ls-separator) !important;
    color: var(--text-primary) !important;
}

/* Platform heading */
#main-content .platform-content-section { padding: 0 0 8px !important; margin: 0 0 16px !important; }
#main-content .platform-content-section > h4 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 10px !important;
    font-size: 15px !important;
    font-weight: 650 !important;
    color: var(--text-primary) !important;
}
#main-content .platform-content-section > h4 .badge {
    padding: 2px 8px !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    color: var(--ls-label-2) !important;
    background: rgba(255, 255, 255, 0.08) !important;
}

/* One post = one grouped list */
#main-content .content-items-grid { display: grid; gap: 12px; }
#main-content .content-item-card {
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 14px !important;
    background: var(--ls-surface-2) !important;
    box-shadow: none !important;
    overflow: hidden;
}
#main-content .content-item-card .item-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0 !important;
    padding: 12px 12px 12px 16px !important;
    border-bottom: 1px solid var(--ls-separator) !important;
}
#main-content .content-item-card .item-header > div:first-child {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}
#main-content .content-item-card .item-number {
    padding: 0 !important;
    min-width: 22px;
    background: none !important;
    color: var(--ls-label-3) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    font-variant-numeric: tabular-nums;
}
#main-content .content-item-card .item-header h5 {
    margin: 0 !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    color: var(--text-primary) !important;
    overflow: hidden;
    text-overflow: ellipsis;
}
#main-content .content-item-card .item-content { padding: 0 !important; }
#main-content .content-item-card .field-row {
    margin: 0 !important;
    padding: 12px 16px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: none !important;
}
#main-content .content-item-card .field-row + .field-row { border-top: 1px solid var(--ls-separator) !important; }
/* Field label: small grey caption, no coloured icon */
#main-content .content-item-card .field-row [style*="text-transform"],
#main-content .content-item-card .field-row strong,
#main-content .content-item-card .field-row .field-label {
    font-size: 12px !important;
    font-weight: 600 !important;
    letter-spacing: 0.05em !important;
    color: var(--ls-label-2) !important;
}
#main-content .content-item-card .field-row i[class*="fa-"] {
    color: var(--ls-label-3) !important;
    font-size: 11px !important;
}
#main-content .content-item-card .field-row [style*="color: #f87171"],
#main-content .content-item-card .field-row [style*="color:#f87171"],
#main-content .content-item-card .field-row [style*="color: rgb(248, 113, 113)"] {
    color: var(--ls-label-2) !important;
}
/* Approved post: green check on the row, no coloured frame */
#main-content .content-item-card.approved,
#main-content .content-item-card[style*="16, 185, 129"],
#main-content .content-item-card[style*="#10b981"] {
    border: 0 !important;
    background: var(--ls-surface-2) !important;
    box-shadow: inset 3px 0 0 var(--ls-ok) !important;
}
#main-content .content-item-card .item-header .btn {
    min-height: 30px;
    padding: 0 10px !important;
    font-size: 13px !important;
    background: transparent !important;
}

/* --------------------------------------------------------------------------
   H. One card surface across every screen
   -------------------------------------------------------------------------- */
body.dark-mode #main-content .admin-card,
body.dark-mode #main-content .cockpit-panel,
body.dark-mode #main-content .kb-tree,
body.dark-mode #main-content .kb-panel,
body.dark-mode #main-content .settings-section,
body.dark-mode #main-content .ideas-tab-content,
body.dark-mode #main-content .planning-table-container,
body.dark-mode #main-content .content-toolbar,
body.dark-mode #main-content .pipe-planner-dock,
body.dark-mode #main-content .quick-stat-card,
body.dark-mode #main-content .health-card {
    border: 1px solid var(--ls-separator) !important;
    border-radius: var(--ls-radius-card) !important;
    background: var(--ls-surface-1) !important;
    background-image: none !important;
    box-shadow: none !important;
}

/* Tiles inside a card use the second surface, without their own frame */
body.dark-mode #main-content .cockpit-dashboard .checklist-item,
body.dark-mode #main-content .cockpit-dashboard .launch-btn,
body.dark-mode #main-content .cockpit-dashboard .subsystem-btn,
body.dark-mode #main-content .cockpit-dashboard .module-control-card,
body.dark-mode #main-content .preview-stage {
    border: 0 !important;
    border-radius: 12px !important;
    background: var(--ls-surface-2) !important;
    box-shadow: none !important;
}
body.dark-mode #main-content .cockpit-dashboard .launch-btn:hover,
body.dark-mode #main-content .cockpit-dashboard .subsystem-btn:hover:not(.disabled) {
    background: var(--ls-surface-3) !important;
}
body.dark-mode #main-content .cockpit-dashboard .system-indicators { border-top-color: var(--ls-separator) !important; }

/* Admin: a section is a heading plus cards, not a frame around cards */
body.dark-mode #main-content .admin-dashboard .admin-section {
    padding: 0 !important;
    margin: 0 0 28px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: none !important;
    box-shadow: none !important;
}
#main-content .admin-dashboard .admin-section > .section-title {
    display: block;
    margin: 0 0 12px !important;
    font-size: var(--ls-section) !important;
    font-weight: 650 !important;
    letter-spacing: -0.01em;
}
#main-content .admin-dashboard .admin-section > .section-title i { display: none; }
#main-content .admin-dashboard .admin-grid { gap: 12px !important; margin-bottom: 28px; }
#main-content .admin-dashboard .admin-section .admin-grid { margin-bottom: 0; }
#main-content .admin-dashboard .admin-card .card-header {
    padding: 14px 16px !important;
    border-bottom: 1px solid var(--ls-separator) !important;
    background: none !important;
}
#main-content .admin-dashboard .admin-card .card-header h3 {
    margin: 0 !important;
    font-size: 15px !important;
    font-weight: 600 !important;
}
#main-content .admin-dashboard .admin-card .card-header h3 i { color: var(--ls-label-3) !important; margin-right: 6px; }
#main-content .admin-dashboard .admin-badge,
#main-content .admin-dashboard .header-badge {
    background: rgba(255, 255, 255, 0.08) !important;
    border: 0 !important;
    color: var(--ls-label-2) !important;
}

/* Tabs and selected rows: neutral tint instead of red */
body.dark-mode #main-content .ideas-tabs,
body.dark-mode #main-content .settings-tabs {
    display: inline-flex;
    gap: 2px;
    padding: 3px !important;
    border: 0 !important;
    border-radius: 12px !important;
    background: var(--ls-surface-1) !important;
}
body.dark-mode #main-content .ideas-tab,
body.dark-mode #main-content .settings-tab {
    min-height: 32px;
    padding: 0 14px !important;
    border: 0 !important;
    border-radius: 9px !important;
    background: transparent !important;
    color: var(--ls-label-2) !important;
    font-size: 13.5px;
    font-weight: 500;
    box-shadow: none !important;
}
body.dark-mode #main-content .ideas-tab.active,
body.dark-mode #main-content .settings-tab.active {
    background: var(--ls-surface-3) !important;
    color: var(--text-primary) !important;
}
body.dark-mode #main-content .ideas-tab .tab-count {
    background: rgba(255, 255, 255, 0.10) !important;
    color: var(--ls-label-2) !important;
}
body.dark-mode #main-content .kb-tree-item {
    border-radius: 10px !important;
    color: var(--text-primary) !important;
}
body.dark-mode #main-content .kb-tree-item.active {
    background: rgba(255, 255, 255, 0.08) !important;
    color: var(--text-primary) !important;
}
body.dark-mode #main-content .kb-tree-item.active i { color: var(--ls-red) !important; }

/* Selected brand: a clear ring, no glow */
body.dark-mode #main-content .brand-card {
    border: 1px solid var(--ls-separator) !important;
    border-radius: 14px !important;
    background: var(--ls-surface-2) !important;
    background-image: none !important;
    box-shadow: none !important;
}
body.dark-mode #main-content .brand-card.selected {
    border-color: transparent !important;
    box-shadow: 0 0 0 2px var(--ls-red) !important;
}
#main-content .brands-actions { border-top-color: var(--ls-separator) !important; }

/* Planner: content-type groups as quiet lists with a colour dot */
body.dark-mode #main-content .content-toolbar .toolbar-header {
    background: none !important;
    border-bottom: 1px solid var(--ls-separator) !important;
}
body.dark-mode #main-content .toolbar-category {
    border: 0 !important;
    border-radius: 12px !important;
    background: var(--ls-surface-2) !important;
    overflow: hidden;
}
body.dark-mode #main-content .toolbar-category .category-header {
    position: relative;
    padding: 10px 12px 10px 30px !important;
    background-image: linear-gradient(var(--ls-surface-2), var(--ls-surface-2)) !important;
    color: var(--ls-label-2) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    letter-spacing: 0.05em;
}
/* The category colour stays, as a dot (the inline background colour shows through it) */
body.dark-mode #main-content .toolbar-category .category-header::before {
    content: '';
    position: absolute;
    left: 12px;
    top: 50%;
    width: 8px;
    height: 8px;
    margin-top: -4px;
    border-radius: 50%;
    background: inherit;
    background-image: none;
    background-color: inherit;
}
body.dark-mode #main-content .planning-table thead { background: none !important; }
body.dark-mode #main-content .planning-table,
body.dark-mode #main-content .planning-table th,
body.dark-mode #main-content .planning-table td {
    background: transparent !important;
    border-color: var(--ls-separator) !important;
}
body.dark-mode #main-content .week-navigation .week-display,
body.dark-mode #main-content .week-navigation .btn {
    background: var(--ls-surface-2) !important;
    border: 1px solid var(--ls-separator) !important;
    border-radius: 10px !important;
}

/* Video-Produktion: the intro is content, not a billboard */
#main-content .video-welcome { padding: 24px 0 !important; }
#main-content .individual-stages-section { border-top-color: var(--ls-separator) !important; }

/* Ideen: filters sit on one row at the top left of the panel */
#main-content .ideas-toolbar { justify-content: flex-start !important; gap: 8px; padding: 12px 16px !important; }

/* Planner content-type items: neutral rows; the count badge keeps the category colour */
body.dark-mode #main-content .content-type-item {
    border: 0 !important;
    border-top: 1px solid var(--ls-separator) !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    margin: 0 !important;
    padding: 10px 12px !important;
    color: var(--text-primary) !important;
}
body.dark-mode #main-content .content-type-item:hover { background: rgba(255, 255, 255, 0.04) !important; }
body.dark-mode #main-content .content-type-item.depleted { opacity: 0.45; }
body.dark-mode #main-content .toolbar-category > :not(.category-header) { padding: 0 !important; background: none !important; }

/* Analysen uses the same card */
body.dark-mode #main-content .analytics-card,
body.dark-mode #main-content .analytics-page .summary-card,
body.dark-mode #main-content .analytics-page .stat-box {
    border: 1px solid var(--ls-separator) !important;
    border-radius: var(--ls-radius-card) !important;
    background: var(--ls-surface-1) !important;
    background-image: none !important;
    box-shadow: none !important;
}
#main-content .analytics-card .card-header {
    padding: 14px 16px !important;
    border-bottom: 1px solid var(--ls-separator) !important;
    background: none !important;
}
#main-content .analytics-card .card-header h3 { margin: 0 !important; font-size: 15px !important; font-weight: 600 !important; }
#main-content .analytics-card .card-header h3 i { color: var(--ls-label-3) !important; margin-right: 6px; }

/* Phone: phases and posts use the full width */
@media (max-width: 768px) {
    #main-content .stage-card { padding: 16px !important; }
    #main-content .stage-card.collapsed { padding: 0 !important; }
    #main-content .stage-card.collapsed .stage-card-header { padding: 14px 16px !important; }
    #main-content .stage-actions .btn { flex: 1 1 100%; min-height: 44px; }
    #main-content .creation-status-bar { padding: 14px 8px !important; overflow-x: auto; }
    #main-content .creation-status-bar::before { display: none !important; }
    #main-content .creation-status-bar .status-label { font-size: 11.5px !important; }
    #main-content .chat-input-section,
    #main-content .manual-selection-section { padding: 16px !important; border-radius: 16px !important; }
    #main-content > .loading-state { min-height: 50vh; border-radius: 16px; }
    #main-content .multi-content-header { flex-wrap: wrap; }
    #main-content .pipe-check .pipe-check-row { padding: 10px 12px; gap: 12px; }
    #main-content .pipe-check li + li::before { left: 50px; }
}

/* Phone: Schnell erstellen form rows wrap instead of running off the screen */
@media (max-width: 768px) {
    #main-content .chat-input-section .form-row,
    #main-content .manual-selection-section .form-row {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }
    #main-content .chat-input-section .form-row > .btn,
    #main-content .manual-selection-section .form-row > .btn {
        flex: 1 1 100%;
        width: 100%;
        margin: 0 !important;
    }
    #main-content .ref-lib-toolbar { flex-wrap: wrap; gap: 8px; }
    #main-content .ref-lib-toolbar .ref-lib-search { flex: 1 1 100%; width: 100% !important; }
    #main-content .chat-input-section h2 { font-size: 20px !important; }
    #main-content .quick-stage-buttons,
    #main-content .quick-stage-selector { flex-wrap: wrap; gap: 6px; }
}

/* ==========================================================================
   DESIGN PASS 3: the remaining screens
   Lernzentrum, Video-Produktion, Trend-Radar, Skills, Debugging,
   Compliance-Prüfer, dialogs. Same surfaces, same header, red only for the
   primary action.
   ========================================================================== */

/* --- Lernzentrum ---------------------------------------------------------- */
#main-content .learning-summary {
    display: grid;
    gap: 14px;
    margin: 0 0 24px;
    padding: 20px;
    border: 1px solid var(--ls-separator);
    border-radius: var(--ls-radius-card);
    background: var(--ls-surface-1);
}
#main-content .learning-summary-stats { display: flex; gap: 40px; flex-wrap: wrap; }
#main-content .learning-summary .hero-stat { display: flex; flex-direction: column; gap: 2px; }
#main-content .learning-summary .stat-value {
    font-size: 28px;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.1;
    color: var(--text-primary);
    background: none !important;
    -webkit-text-fill-color: currentColor;
}
#main-content .learning-summary .stat-label { font-size: 13px; color: var(--ls-label-2); font-weight: 400; }
#main-content .learning-summary .hero-progress-bar { margin: 0; max-width: none; }
#main-content .learning-summary .progress-track {
    height: 6px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.10);
    box-shadow: none !important;
    overflow: hidden;
}
#main-content .learning-summary .progress-fill { height: 100%; background: var(--ls-red) !important; border-radius: 999px; box-shadow: none !important; }
#main-content .learning-hub #learning-gamification > * {
    border: 0 !important;
    border-radius: 12px !important;
    background: var(--ls-surface-2) !important;
    box-shadow: none !important;
}
#main-content .learning-hub .quick-start-section h2,
#main-content .learning-hub .category-header h3 {
    font-size: var(--ls-section) !important;
    font-weight: 650 !important;
    letter-spacing: -0.01em !important;
    text-transform: none !important;
    color: var(--text-primary) !important;
    margin: 0 !important;
}
#main-content .learning-hub .quick-start-section h2 { margin: 0 0 12px !important; }
#main-content .learning-hub .quick-start-section h2 i,
#main-content .learning-hub .category-header > i { display: none !important; }
#main-content .learning-hub .category-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin: 28px 0 12px !important;
    padding: 0 !important;
    border: 0 !important;
    background: none !important;
}
#main-content .learning-hub .category-header::after,
#main-content .learning-hub .category-header::before { display: none !important; }
#main-content .learning-hub .category-header span,
#main-content .learning-hub .category-header .lesson-count {
    font-size: 13px !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    color: var(--ls-label-2) !important;
    font-weight: 400 !important;
}
body.dark-mode #main-content .learning-hub .qs-card,
body.dark-mode #main-content .learning-hub .lesson-card {
    border: 1px solid var(--ls-separator) !important;
    border-radius: 14px !important;
    background: var(--ls-surface-1) !important;
    background-image: none !important;
    box-shadow: none !important;
    transition: background-color 120ms ease;
}
body.dark-mode #main-content .learning-hub .qs-card:hover,
body.dark-mode #main-content .learning-hub .lesson-card:hover {
    background: var(--ls-surface-2) !important;
    transform: none !important;
}
body.dark-mode #main-content .learning-hub .qs-icon,
body.dark-mode #main-content .learning-hub .lesson-icon {
    background: var(--ls-surface-3) !important;
    background-image: none !important;
    color: var(--text-primary) !important;
    box-shadow: none !important;
    border: 0 !important;
}
body.dark-mode #main-content .learning-hub .qs-icon i,
body.dark-mode #main-content .learning-hub .lesson-icon i { color: var(--text-primary) !important; }
body.dark-mode #main-content .learning-search {
    padding: 0 14px !important;
    min-height: 44px;
    border: 1px solid var(--ls-input-border) !important;
    border-radius: 12px !important;
    background: var(--ls-surface-2) !important;
    box-shadow: none !important;
}
body.dark-mode #main-content .learning-search input {
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    min-height: 42px;
    font-size: 15px;
}

/* --- Video-Produktion: a short start screen, not a billboard --------------- */
#main-content .video-welcome {
    max-width: 760px;
    margin: 0 auto;
    padding: 28px !important;
    border: 1px solid var(--ls-separator);
    border-radius: 20px;
    background: var(--ls-surface-1);
    text-align: left !important;
}
#main-content .video-welcome .welcome-illustration { margin: 0 0 20px !important; justify-content: flex-start !important; }
#main-content .video-welcome .welcome-content { text-align: left !important; }
#main-content .video-welcome .welcome-content h2 {
    margin: 0 0 6px !important;
    font-size: 22px !important;
    font-weight: 700 !important;
    letter-spacing: -0.02em;
    text-align: left !important;
}
#main-content .video-welcome .welcome-content > p {
    margin: 0 0 16px !important;
    font-size: 15px !important;
    color: var(--ls-label-2) !important;
    text-align: left !important;
}
#main-content .video-welcome .workflow-benefits {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 6px 20px;
    margin: 0 0 20px !important;
    padding: 0 !important;
    text-align: left !important;
}
#main-content .video-welcome .workflow-benefits li {
    display: flex;
    align-items: baseline;
    gap: 8px;
    justify-content: flex-start !important;
    margin: 0 !important;
    font-size: 14px !important;
    color: var(--ls-label-2) !important;
}
#main-content .video-welcome .workflow-benefits li i { color: var(--ls-ok) !important; font-size: 12px; }
#main-content .video-welcome .welcome-actions,
#main-content .video-welcome .welcome-buttons { justify-content: flex-start !important; gap: 8px; }
#main-content .video-welcome .stage-icon-preview {
    background: var(--ls-surface-3) !important;
    color: var(--text-primary) !important;
}
#main-content .video-welcome .stage-icon-preview i { color: var(--text-primary) !important; }
#main-content .individual-stages-section { margin-top: 24px !important; }
#main-content .individual-stages-section > :first-child {
    text-align: left !important;
    font-size: 13px !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    color: var(--ls-label-2) !important;
}
#main-content .individual-stage-buttons .btn-stage i { color: var(--ls-label-2) !important; }

/* --- Trend-Radar ---------------------------------------------------------- */
body.dark-mode #main-content .radar-visualization,
body.dark-mode #main-content .trend-list-panel {
    border: 1px solid var(--ls-separator) !important;
    border-radius: var(--ls-radius-card) !important;
    background: var(--ls-surface-1) !important;
    background-image: none !important;
    box-shadow: none !important;
}
body.dark-mode #main-content .radar-kind-toggle {
    padding: 3px !important;
    border: 0 !important;
    border-radius: 10px !important;
    background: var(--ls-surface-1) !important;
}
body.dark-mode #main-content .radar-kind-toggle__btn {
    height: 28px;
    padding: 0 12px !important;
    border-radius: 8px !important;
    background: transparent !important;
    color: var(--ls-label-2) !important;
    font-weight: 500;
}
body.dark-mode #main-content .radar-kind-toggle__btn.is-active {
    background: var(--ls-surface-3) !important;
    color: var(--text-primary) !important;
}
body.dark-mode #main-content .radar-last-updated {
    padding: 0 !important;
    background: none !important;
    font-family: inherit !important;
    font-size: 13px !important;
    color: var(--ls-label-2) !important;
}
#main-content .radar-legend,
#main-content .radar-inspiration { border-top-color: var(--ls-separator) !important; }

/* --- Skills --------------------------------------------------------------- */
body.dark-mode #main-content .skill-card,
body.dark-mode #main-content .skills-empty {
    border: 1px solid var(--ls-separator) !important;
    border-radius: var(--ls-radius-card) !important;
    background: var(--ls-surface-1) !important;
    box-shadow: none !important;
}
body.dark-mode #main-content .skills-module .badge,
body.dark-mode #main-content .skills-module .scope-tag {
    background: rgba(255, 255, 255, 0.08) !important;
    color: var(--ls-label-2) !important;
    border: 0 !important;
    font-weight: 500;
    letter-spacing: 0.02em;
}
#main-content .skills-section > h2,
#main-content .skills-section > h3,
#main-content .skills-section-title {
    font-size: var(--ls-section) !important;
    font-weight: 650 !important;
    margin: 0 0 12px !important;
}
#main-content .skills-section > h2 i,
#main-content .skills-section > h3 i,
#main-content .skills-section-title i { display: none; }

/* --- Debugging ------------------------------------------------------------ */
body.dark-mode #main-content .debugger-progress-section,
body.dark-mode #main-content .debugger-tab-content,
body.dark-mode #main-content .status-mini-card {
    border: 1px solid var(--ls-separator) !important;
    border-radius: var(--ls-radius-card) !important;
    background: var(--ls-surface-1) !important;
    box-shadow: none !important;
}
body.dark-mode #main-content .status-mini-card {
    border-radius: 999px !important;
    padding: 6px 12px !important;
    font-size: 13px;
    color: var(--ls-label-2) !important;
}
body.dark-mode #main-content .status-mini-card.connected { color: var(--ls-ok) !important; border-color: rgba(48, 209, 88, 0.35) !important; }
body.dark-mode #main-content .status-mini-card i { color: inherit !important; }
body.dark-mode #main-content .debugger-unified-module .progress-bar-fill { background: var(--ls-red) !important; background-image: none !important; }
body.dark-mode #main-content .debugger-tabs-row {
    display: inline-flex;
    gap: 2px;
    padding: 3px;
    border-radius: 12px;
    background: var(--ls-surface-1);
    margin-bottom: 12px;
    border: 0 !important;
}
body.dark-mode #main-content .debugger-tab-btn {
    min-height: 32px;
    padding: 0 14px !important;
    border: 0 !important;
    border-radius: 9px !important;
    background: transparent !important;
    color: var(--ls-label-2) !important;
    font-size: 13.5px;
}
body.dark-mode #main-content .debugger-tab-btn.active { background: var(--ls-surface-3) !important; color: var(--text-primary) !important; }
body.dark-mode #main-content .debugger-tab-btn i { color: inherit !important; }
body.dark-mode #main-content .debugger-tab-btn .tab-badge {
    background: rgba(255, 255, 255, 0.10) !important;
    color: var(--ls-label-2) !important;
    padding: 2px 8px !important;
}
body.dark-mode #main-content .stage-progress-item.active {
    background: var(--ls-surface-3) !important;
    background-image: none !important;
    box-shadow: none !important;
}
body.dark-mode #main-content .stage-detail-panel { background: transparent !important; }

/* --- Compliance-Prüfer (coming soon): standard header, quiet cards -------- */
#main-content .compliance-coming-soon .coming-soon-bg,
#main-content .compliance-coming-soon .shield-animation,
#main-content .compliance-coming-soon .coming-soon-icon { display: none !important; }
#main-content .compliance-coming-soon { min-height: 0 !important; }
#main-content .compliance-coming-soon .coming-soon-content {
    max-width: none !important;
    padding: 0 !important;
    text-align: left !important;
    background: none !important;
}
#main-content .compliance-coming-soon .coming-soon-title {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    margin: 0 0 24px !important;
    padding: 0 0 16px;
    border-bottom: 1px solid var(--ls-separator);
    text-align: left !important;
}
#main-content .compliance-coming-soon .coming-soon-title h1 {
    order: 1;
    margin: 0 !important;
    font-size: var(--ls-title) !important;
    font-weight: 700 !important;
    letter-spacing: -0.02em;
    color: var(--text-primary) !important;
    background: none !important;
    -webkit-text-fill-color: currentColor;
    text-shadow: none !important;
}
#main-content .compliance-coming-soon .coming-soon-title p { order: 2; margin: 0 !important; font-size: 14px !important; color: var(--ls-label-2) !important; }
#main-content .compliance-coming-soon .badge-coming {
    order: 3;
    margin: 4px 0 0 !important;
    padding: 3px 10px !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: rgba(255, 159, 10, 0.16) !important;
    color: var(--ls-warn) !important;
    box-shadow: none !important;
    font-size: 12px !important;
    letter-spacing: 0.02em !important;
    text-transform: none !important;
}
#main-content .compliance-coming-soon .coming-soon-description {
    max-width: 72ch;
    margin: 0 0 20px !important;
    text-align: left !important;
    font-size: 15px;
    color: var(--ls-label-2) !important;
}
#main-content .compliance-coming-soon .features-grid,
#main-content .compliance-coming-soon .coming-soon-features {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)) !important;
    gap: 12px !important;
    max-width: none !important;
    margin: 0 0 20px !important;
}
body.dark-mode #main-content .compliance-coming-soon .feature-card,
body.dark-mode #main-content .compliance-coming-soon .coming-soon-cta {
    padding: 16px !important;
    border: 1px solid var(--ls-separator) !important;
    border-radius: var(--ls-radius-card) !important;
    background: var(--ls-surface-1) !important;
    box-shadow: none !important;
    text-align: left !important;
}
body.dark-mode #main-content .compliance-coming-soon .feature-icon {
    margin: 0 0 12px !important;
    background: var(--ls-surface-3) !important;
    color: var(--text-primary) !important;
}
body.dark-mode #main-content .compliance-coming-soon .feature-icon i { color: var(--text-primary) !important; }
#main-content .compliance-coming-soon .development-progress,
#main-content .compliance-coming-soon .progress-section { max-width: 480px; margin: 20px 0 0 !important; }

/* --- Dialogs: one sheet style everywhere ---------------------------------- */
body.dark-mode .modal-overlay,
body.dark-mode .ui-modal-overlay {
    background: rgba(0, 0, 0, 0.6) !important;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
body.dark-mode .modal-content,
body.dark-mode .radar-modal,
body.dark-mode .feedback-modal,
body.dark-mode .navi-modal-panel,
body.dark-mode .ui-modal-panel {
    border: 1px solid rgba(255, 255, 255, 0.10) !important;
    border-radius: 20px !important;
    background: #1c1c1f !important;
    background-image: none !important;
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.6) !important;
    overflow: hidden;
}
body.dark-mode .modal-header {
    padding: 18px 20px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07) !important;
    background: none !important;
}
body.dark-mode .modal-header h2,
body.dark-mode .modal-header h3 {
    margin: 0 !important;
    font-size: 17px !important;
    font-weight: 650 !important;
    letter-spacing: -0.01em;
    color: #f5f5f7 !important;
}
body.dark-mode .modal-header h2 i,
body.dark-mode .modal-header h3 i { color: rgba(235, 235, 245, 0.38) !important; }
body.dark-mode .modal-body { padding: 20px !important; }
body.dark-mode .modal-footer {
    padding: 14px 20px !important;
    border-top: 1px solid rgba(255, 255, 255, 0.07) !important;
    background: none !important;
    gap: 8px;
}
body.dark-mode .modal-close {
    width: 30px;
    height: 30px;
    border: 0 !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.08) !important;
    color: rgba(235, 235, 245, 0.62) !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
body.dark-mode .modal-close:hover { background: rgba(255, 255, 255, 0.14) !important; color: #fff !important; }
body.dark-mode .modal-content .btn,
body.dark-mode .radar-modal .btn {
    min-height: 36px;
    padding: 0 14px;
    border-radius: 10px !important;
    box-shadow: none !important;
    font-size: 14px;
    font-weight: 600;
}
body.dark-mode .modal-content .btn-primary,
body.dark-mode .radar-modal .btn-primary { background: #e5342f !important; background-image: none !important; border: 0 !important; color: #fff !important; }
body.dark-mode .modal-content .btn-secondary,
body.dark-mode .modal-content .btn-outline,
body.dark-mode .radar-modal .btn-secondary {
    background: #2a2a2e !important;
    border: 1px solid rgba(255, 255, 255, 0.07) !important;
    color: #f5f5f7 !important;
}
body.dark-mode .modal-content .form-control,
body.dark-mode .modal-content input[type="text"],
body.dark-mode .modal-content textarea,
body.dark-mode .modal-content select {
    border: 1px solid rgba(255, 255, 255, 0.10) !important;
    border-radius: 10px !important;
    background: #2a2a2e !important;
    color: #f5f5f7 !important;
}

/* Floating chat button: no glow */
body.dark-mode .chatbot-toggle {
    background: var(--ls-red, #e5342f) !important;
    background-image: none !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45) !important;
}

@media (max-width: 768px) {
    #main-content .learning-summary-stats { gap: 24px; }
    #main-content .video-welcome { padding: 16px !important; border-radius: 16px; }
    body.dark-mode .modal-content,
    body.dark-mode .radar-modal { border-radius: 16px !important; max-width: calc(100vw - 24px) !important; }
}

/* Video: five phase buttons on one row on desktop */
@media (min-width: 769px) {
    #main-content .video-welcome .individual-stage-buttons { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; }
}
#main-content .video-welcome .individual-stage-buttons .btn-stage { font-size: 12.5px !important; padding: 0 8px !important; }

/* Compliance-Prüfer uses the full content column like every other page */
#main-content > .compliance-coming-soon {
    display: block !important;
    max-width: var(--ls-max) !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
}
#main-content .compliance-coming-soon .coming-soon-content {
    width: 100% !important;
    margin: 0 !important;
    position: static !important;
}
/* While a lesson is open, the quick-start row steps aside */
#main-content .learning-hub:has(#lesson-view[style*="block"]) .quick-start-section { display: none; }

/* Phone: the video step preview is one swipeable row, not five stacked tiles */
@media (max-width: 768px) {
    #main-content .video-welcome .welcome-illustration,
    #main-content .video-welcome .workflow-preview,
    #main-content .video-welcome .stages-preview {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: stretch;
        gap: 8px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    #main-content .video-welcome .preview-stage { flex: 0 0 auto; padding: 10px 12px !important; }
    #main-content .video-welcome .preview-arrow,
    #main-content .video-welcome .stage-arrow { display: none !important; }
}
@media (max-width: 768px) {
    #main-content .video-welcome .welcome-illustration,
    #main-content .video-welcome .welcome-illustration > * { justify-content: flex-start !important; }
}

/* ==========================================================================
   Image settings in the Bilder phase: photo source, layout style, engine
   ========================================================================== */
#main-content .image-layout-settings {
    display: grid;
    gap: 20px;
    margin: 0 0 20px;
    padding: 16px;
    border-radius: 14px;
    background: var(--ls-surface-2);
}
#main-content .stage-card .image-layout-settings { margin: 0 0 16px; }
#main-content .image-layout-settings .ils-row { display: grid; gap: 8px; min-width: 0; }
#main-content .image-layout-settings .form-label {
    margin: 0 !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--ls-label-2) !important;
}
#main-content .ils-note {
    margin: 0;
    font-size: 13px;
    line-height: 1.45;
    color: var(--ls-label-2);
}
#main-content .ils-note.ils-warn { color: var(--ls-warn); }
#main-content .ils-notes { margin-top: 4px; }

/* Segmented control */
#main-content .ils-seg {
    display: inline-flex;
    gap: 2px;
    padding: 3px;
    border-radius: 11px;
    background: rgba(255, 255, 255, 0.06);
    justify-self: start;
}
#main-content .ils-seg-btn {
    min-height: 32px;
    padding: 0 16px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--ls-label-2);
    font: inherit;
    font-size: 13.5px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 120ms ease, color 120ms ease;
}
#main-content .ils-seg-btn:hover { color: var(--text-primary); }
#main-content .ils-seg-btn.is-active {
    background: var(--ls-surface-3);
    color: var(--text-primary);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}

/* Style cards */
#main-content .ils-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(98px, 1fr));
    gap: 8px;
}
#main-content .ils-card {
    display: grid;
    gap: 6px;
    padding: 8px 8px 10px;
    border: 1px solid transparent;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.04);
    color: var(--text-primary);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: background-color 120ms ease, border-color 120ms ease, transform 120ms ease;
}
#main-content .ils-card:hover { background: rgba(255, 255, 255, 0.08); }
#main-content .ils-card:active { transform: scale(0.98); }
#main-content .ils-card.is-active {
    border-color: var(--ls-red);
    background: rgba(229, 52, 47, 0.10);
}
#main-content .ils-card:focus-visible { outline: 2px solid rgba(229, 52, 47, 0.7); outline-offset: 2px; }
#main-content .ils-name { font-size: 13px; font-weight: 600; line-height: 1.2; }
#main-content .ils-sum {
    font-size: 11.5px;
    line-height: 1.3;
    color: var(--ls-label-2);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Schematic thumbnails (4:5) */
#main-content .ils-thumb {
    position: relative;
    display: block;
    aspect-ratio: 4 / 5;
    border-radius: 8px;
    overflow: hidden;
    background-image: linear-gradient(160deg, rgba(255, 255, 255, 0.18), rgba(0, 0, 0, 0.22));
}
#main-content .ils-thumb i { display: block; height: 7px; border-radius: 1px; }
#main-content .ils-block {
    position: absolute;
    top: 14%;
    left: 9%;
    right: 9%;
    display: grid;
    gap: 2px;
    transform-origin: left center;
}
#main-content .ils-block.ils-bottom { top: auto; bottom: 12%; gap: 4px; }
#main-content .ils-block.ils-serif { gap: 4px; }
#main-content .ils-badge {
    position: absolute;
    left: 10%;
    top: 52%;
    width: 26%;
    aspect-ratio: 1;
    border-radius: 50%;
}
#main-content .ils-badge.ils-burst { left: auto; right: 8%; top: 44%; width: 22%; border-radius: 30%; transform: rotate(18deg); }
#main-content .ils-sticker {
    position: absolute;
    top: 14%;
    left: 9%;
    width: 68%;
    padding: 8% 8%;
    display: grid;
    gap: 3px;
    border-radius: 9px;
    box-shadow: 3px 3px 0 #111;
}
#main-content .ils-sticker i { height: 5px; }
#main-content .ils-pill { display: block; width: 30%; height: 7px; margin-top: 2px; border-radius: 3px; background: #000; }
#main-content .ils-frame { position: absolute; inset: 5%; border: 1px solid rgba(255, 255, 255, 0.9); }
#main-content .ils-split {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 40%;
    padding: 9% 9% 0;
    display: grid;
    align-content: start;
    gap: 3px;
}
#main-content .ils-split i { height: 5px; }
#main-content .ils-circle {
    position: absolute;
    left: -8%;
    bottom: -14%;
    width: 62%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: linear-gradient(140deg, #cfd6dd, #6f7a86);
}
#main-content .ils-circle.ils-circle2 { left: auto; right: -10%; bottom: 14%; width: 46%; background: linear-gradient(140deg, #e9d2b8, #9a7b5a); }
#main-content .ils-thumb.ils-auto {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 2px;
    background: #111;
}
#main-content .ils-thumb.ils-auto i { height: auto; border-radius: 0; }
#main-content .ils-thumb.ils-auto i:nth-child(1) { background: #3b6ea5; }
#main-content .ils-thumb.ils-auto i:nth-child(2) { background: #ffd60a; }
#main-content .ils-thumb.ils-auto i:nth-child(3) { background: #12a150; }
#main-content .ils-thumb.ils-auto i:nth-child(4) { background: #ff2d92; }
#main-content .ils-thumb.ils-custom {
    display: grid;
    place-items: center;
    background: transparent;
    background-image: none;
    border: 1px dashed rgba(255, 255, 255, 0.22);
    color: var(--ls-label-2);
}
#main-content .ils-thumb.ils-custom i { height: auto; font-size: 18px; }

@media (max-width: 768px) {
    #main-content .image-layout-settings { padding: 12px; }
    #main-content .ils-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
    #main-content .ils-seg { display: flex; justify-self: stretch; }
    #main-content .ils-seg-btn { flex: 1; padding: 0 8px; min-height: 40px; }
}