:root {
    --fcc-primary: #013e57;
    --fcc-primary-dark: #00283c;
    --fcc-secondary: #18a3a1;
    --fcc-secondary-light: #00aaaa;
    --fcc-gold: #d4af37;
    --fcc-background: #f3f7fa;
    --fcc-surface: #ffffff;
    --fcc-text: #102f46;
    --fcc-muted: #6f8291;
    --fcc-border: #e4ecef;
    --fcc-radius: 18px;
    --fcc-shadow: 0 10px 30px rgba(2, 40, 60, .08);
}

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    min-height: 100%;
    background: var(--fcc-background);
    color: var(--fcc-text);
    font-family: Inter, Lato, Arial, sans-serif;
}

button,
input,
select,
textarea {
    font: inherit;
}


/* =========================================================
   NORMALE EINGABEFELDER
   ========================================================= */

body input:not([type="checkbox"]):not([type="radio"]):not([type="button"]):not([type="submit"]),
body textarea {
    color: var(--fcc-text) !important;
    background: linear-gradient( 135deg, rgba(24, 163, 161, 0.14), rgba(1, 62, 87, 0.075) ) !important;
    border: 1px solid rgba(24, 163, 161, 0.36) !important;
    border-radius: 18px !important;
    padding: 12px 15px !important;
    outline: none !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), 0 5px 14px rgba(1, 62, 87, 0.045) !important;
    transition: background 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease !important;
}


    /* =========================================================
   INPUT HOVER
   ========================================================= */

    body input:not([type="checkbox"]):not([type="radio"]):not([type="button"]):not([type="submit"]):hover,
    body textarea:hover {
        background: linear-gradient( 135deg, rgba(24, 163, 161, 0.18), rgba(1, 62, 87, 0.10) ) !important;
        border-color: rgba(24, 163, 161, 0.55) !important;
    }


    /* =========================================================
   INPUT FOCUS
   ========================================================= */

    body input:not([type="checkbox"]):not([type="radio"]):not([type="button"]):not([type="submit"]):focus,
    body textarea:focus {
        background: linear-gradient( 135deg, rgba(24, 163, 161, 0.22), rgba(1, 62, 87, 0.12) ) !important;
        border-color: rgba(24, 163, 161, 0.80) !important;
        box-shadow: 0 0 0 3px rgba(24, 163, 161, 0.12), 0 8px 22px rgba(1, 62, 87, 0.07) !important;
    }


    /* =========================================================
   PLACEHOLDER
   ========================================================= */

    body input::placeholder,
    body textarea::placeholder {
        color: rgba(16, 47, 70, 0.50) !important;
        opacity: 1;
    }


/* =========================================================
   SUCHFELDER
   ========================================================= */

body input[type="search"] {
    min-width: 180px;
}


    /* Chrome / Edge Suchfeld-X entfernen */

    body input[type="search"]::-webkit-search-cancel-button {
        display: none;
        -webkit-appearance: none;
    }


/* =========================================================
   CUSTOM SELECT
   ========================================================= */

body select,
body select::picker(select) {
    appearance: base-select;
}


/* Geoeffnete Liste
   =========================================================

   Sobald der Browser die Liste selbst zeichnet (base-select),
   bestimmt allein das CSS ihre Hoehe. Ohne Begrenzung waechst
   sie mit der Zahl der Eintraege ueber den Bildschirmrand
   hinaus - bei ueber vierzig Kunden stand der gesuchte Name
   dann ausserhalb des Sichtbaren und liess sich nicht
   erreichen.

   Deshalb: hoechstens 60 % der Fensterhoehe, darueber hinaus
   scrollt die Liste in sich selbst. */

body select::picker(select) {
    max-height: min(60vh, 460px);
    overflow-y: auto;

    /* Ist das Ende der Liste erreicht, scrollt nicht plötzlich
       die Seite dahinter weiter. */
    overscroll-behavior: contain;

    /* Auf Geräten mit Fingerbedienung ohne Ruckeln. */
    -webkit-overflow-scrolling: touch;
}


/* Eintraege bleiben gross genug zum sicheren Antippen. */

body select::picker(select) option {
    min-height: 40px;
    padding: 9px 12px;
    scroll-margin: 8px;
}


/* Geschlossenes Dropdown */

body select {
    color: var(--fcc-text) !important;
    background: linear-gradient( 135deg, rgba(24, 163, 161, 0.14), rgba(1, 62, 87, 0.075) ) !important;
    border: 1px solid rgba(24, 163, 161, 0.36) !important;
    border-radius: 18px !important;
    padding: 12px 14px !important;
    outline: none !important;
    cursor: pointer;
    width: auto !important;
    min-width: 155px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), 0 5px 14px rgba(1, 62, 87, 0.045) !important;
    transition: background 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease !important;
}


/* =========================================================
   SELECTS IN FORMULAREN BLEIBEN BREIT
   ========================================================= */

body .form-field select {
    width: 100% !important;
    min-width: 0;
}


/* =========================================================
   FILTER-DROPDOWNS BLEIBEN KOMPAKT RECHTS
   ========================================================= */

body .customer-filter,
body .object-filter,
body .einsatz-filter,
body .vertrag-filter {
    width: auto !important;
    min-width: 150px;
    flex: 0 0 auto;
}


/* =========================================================
   TOOLBAR-SUCHFELDER NEHMEN RESTLICHEN PLATZ
   ========================================================= */

body .customer-search,
body .object-search,
body .einsatz-search,
body .vertrag-search {
    flex: 1 1 auto;
    width: auto !important;
    min-width: 180px;
}


/* =========================================================
   SELECT HOVER
   ========================================================= */

body select:hover {
    background: linear-gradient( 135deg, rgba(24, 163, 161, 0.18), rgba(1, 62, 87, 0.10) ) !important;
    border-color: rgba(24, 163, 161, 0.55) !important;
}


/* =========================================================
   SELECT FOCUS / OFFEN
   ========================================================= */

body select:focus,
body select:open {
    background: linear-gradient( 135deg, rgba(24, 163, 161, 0.22), rgba(1, 62, 87, 0.12) ) !important;
    border-color: rgba(24, 163, 161, 0.80) !important;
    box-shadow: 0 0 0 3px rgba(24, 163, 161, 0.12), 0 8px 22px rgba(1, 62, 87, 0.07) !important;
}


/* =========================================================
   DROPDOWN-PFEIL
   ========================================================= */

body select::picker-icon {
    color: var(--fcc-primary) !important;
    opacity: 0.80;
    margin-left: 12px;
    transition: transform 0.18s ease, opacity 0.18s ease !important;
}


body select:hover::picker-icon,
body select:focus::picker-icon {
    opacity: 1;
}


body select:open::picker-icon {
    transform: rotate(180deg);
}


/* =========================================================
   AUFGEKLAPPTES DROPDOWN
   ========================================================= */

body select::picker(select) {
    margin-top: 7px;
    padding: 7px;
    background: rgba(235, 248, 248, 0.97);
    border: 1px solid rgba(24, 163, 161, 0.30);
    border-radius: 18px;
    box-shadow: 0 18px 45px rgba(1, 62, 87, 0.16);
    backdrop-filter: blur(16px);

    /* Hier stand "overflow: hidden". Das hat die Liste am
       Scrollen gehindert: Bei ueber vierzig Kunden lief sie
       ueber den Bildschirmrand hinaus, und die Namen weiter
       unten waren nicht erreichbar. Die Hoehenbegrenzung
       weiter oben braucht ein scrollbares Fenster, sonst
       wirkt sie nicht. */
    overflow-x: hidden;
    overflow-y: auto;
}


/* =========================================================
   DROPDOWN OPTIONEN
   ========================================================= */

body select option {
    color: #102f46;
    background: transparent;
    border-radius: 12px;
    padding: 10px 12px;
    margin: 2px 0;
    cursor: pointer;
    transition: background 0.12s ease, color 0.12s ease;
}


    /* OPTION HOVER */

    body select option:hover,
    body select option:focus-visible {
        background: rgba(24, 163, 161, 0.12);
        color: #013e57;
    }


    /* AUSGEWÄHLTE OPTION */

    body select option:checked {
        background: rgba(24, 163, 161, 0.20);
        color: #013e57;
        font-weight: 700;
    }


    /* CHECKMARK */

    body select option::checkmark {
        color: #18a3a1;
    }


/* =========================================================
   TEXTAREA
   ========================================================= */

body textarea {
    resize: vertical;
    min-height: 100px;
}


/* =========================================================
   CHECKBOX
   ========================================================= */

body input[type="checkbox"] {
    accent-color: var(--fcc-secondary);
    width: 18px;
    height: 18px;
    cursor: pointer;
}


/* =========================================================
   DEAKTIVIERTE FELDER
   ========================================================= */

body input:disabled,
body select:disabled,
body textarea:disabled {
    background: rgba(24, 163, 161, 0.07) !important;
    border-color: rgba(24, 163, 161, 0.18) !important;
    color: rgba(16, 47, 70, 0.50) !important;
    box-shadow: none !important;
    cursor: not-allowed;
}


/* =========================================================
   BLAZOR VALIDIERUNG
   ========================================================= */

body input.invalid,
body select.invalid,
body textarea.invalid {
    border-color: rgba(24, 163, 161, 0.80) !important;
    box-shadow: 0 0 0 3px rgba(24, 163, 161, 0.12) !important;
}


body .validation-message {
    color: #087c7a !important;
}


/* =========================================================
   CHROME / EDGE AUTOFILL
   ========================================================= */

body input:-webkit-autofill,
body input:-webkit-autofill:hover,
body input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--fcc-text) !important;
    -webkit-box-shadow: 0 0 0 1000px #dff3f2 inset !important;
    border-radius: 18px !important;
}
/* =========================================================
   FCC BUTTONS (zentral statt pro Seite dupliziert)
   ========================================================= */

.fcc-primary-button {
    background: #18A3A1;
    color: white;
    border: none;
    border-radius: 10px;
    padding: 11px 18px;
    font-weight: 600;
    cursor: pointer;
}

.fcc-primary-button:hover {
    background: #138c8a;
}

.fcc-primary-button:disabled {
    background: #a9d6d5;
    cursor: not-allowed;
}

.fcc-secondary-button {
    background: #edf3f5;
    color: #365467;
    border: none;
    border-radius: 10px;
    padding: 11px 18px;
    font-weight: 600;
    cursor: pointer;
}

.fcc-secondary-button:hover {
    background: #dde8eb;
}

.fcc-secondary-button:disabled {
    color: #a3b3ba;
    cursor: not-allowed;
}


/* =========================================================
   MOBILE – FUNKELFRITZE CONTROL CENTER
   Zentrale responsive Regeln
   ========================================================= */

@media (max-width: 850px) {

    /* =====================================================
       SEITENGRUNDLAGE
       ===================================================== */

    html,
    body {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        overflow-x: hidden;
    }

    body {
        -webkit-text-size-adjust: 100%;
    }

    .fcc-layout,
    .fcc-main,
    .fcc-content,
    .fcc-page {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }


    /* =====================================================
       MAIN CONTENT
       ===================================================== */

    .fcc-main {
        margin-left: 0 !important;
    }

    .fcc-content {
        padding: 18px 14px calc(80px + env(safe-area-inset-bottom)) !important;
        overflow-x: hidden !important;
    }


    /* =====================================================
       GENERISCHE SEITENKÖPFE
       ===================================================== */

    .page-header {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        width: 100% !important;
        max-width: 100% !important;
        gap: 14px !important;
        margin-bottom: 20px !important;
    }

        .page-header > div {
            width: 100%;
            min-width: 0;
            max-width: 100%;
        }

        .page-header h1 {
            margin: 0;
            font-size: 30px !important;
            line-height: 1.08 !important;
            overflow-wrap: break-word;
        }

        .page-header p {
            margin-top: 7px;
            font-size: 15px !important;
            line-height: 1.45 !important;
            overflow-wrap: break-word;
        }


    /* =====================================================
       PRIMÄRE BUTTONS
       ===================================================== */

    .fcc-primary-button {
        max-width: 100%;
        min-height: 46px;
        border-radius: 13px;
    }


    /* =====================================================
       STATISTIK-KARTEN ALLER SEITEN
       ===================================================== */

    .dashboard-stats,
    .stats-grid,
    .einsatz-stats,
    .vertrag-stats,
    .kunden-stats,
    .objekt-stats,
    .kalkulation-stats {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        gap: 12px !important;
    }

    .stat-card {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
        padding: 16px !important;
        overflow: hidden;
    }

        .stat-card span,
        .stat-card strong,
        .stat-card small {
            max-width: 100%;
            overflow-wrap: break-word;
            word-break: normal;
        }


    /* =====================================================
       HOME / DASHBOARD
       Home.razor verwendet eigene Klassen
       ===================================================== */

    .fcc-page {
        padding: 14px !important;
        overflow-x: hidden !important;
    }

        .fcc-page .fcc-dashboard-header {
            display: flex !important;
            flex-direction: column !important;
            align-items: flex-start !important;
            width: 100% !important;
            max-width: 100% !important;
            min-width: 0 !important;
            gap: 12px !important;
            margin-bottom: 20px !important;
        }

            .fcc-page .fcc-dashboard-header > div {
                width: 100%;
                max-width: 100%;
                min-width: 0;
            }

            .fcc-page .fcc-dashboard-header h1 {
                margin: 0;
                font-size: 32px !important;
                line-height: 1.05 !important;
            }

            .fcc-page .fcc-dashboard-header p {
                font-size: 16px !important;
                line-height: 1.4 !important;
            }

        .fcc-page .fcc-badge {
            width: fit-content;
            max-width: 100%;
            padding: 9px 14px;
            font-size: 14px;
            white-space: normal;
        }

        .fcc-page .fcc-grid {
            display: grid !important;
            grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
            width: 100% !important;
            max-width: 100% !important;
            min-width: 0 !important;
            gap: 12px !important;
            margin-bottom: 20px !important;
        }

        .fcc-page .fcc-card {
            width: 100% !important;
            max-width: 100% !important;
            min-width: 0 !important;
            box-sizing: border-box !important;
            padding: 16px !important;
            overflow: hidden;
        }

            .fcc-page .fcc-card span,
            .fcc-page .fcc-card strong,
            .fcc-page .fcc-card small {
                max-width: 100%;
                overflow-wrap: break-word;
            }

        .fcc-page .fcc-section {
            width: 100% !important;
            max-width: 100% !important;
            min-width: 0 !important;
            box-sizing: border-box !important;
        }


    /* =====================================================
       FORMULARE
       ===================================================== */

    .form-grid {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        width: 100% !important;
        gap: 14px !important;
    }

    .form-field,
    .form-field.full-width {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        grid-column: auto !important;
    }

    input,
    textarea {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    body .form-field select {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }


    /* =====================================================
       SUCHFELDER
       ===================================================== */

    body input[type="search"] {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    body .customer-search,
    body .object-search,
    body .einsatz-search,
    body .vertrag-search {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        flex: 1 1 100%;
    }


    /* =====================================================
       FILTER
       ===================================================== */

    body .customer-filter,
    body .object-filter,
    body .einsatz-filter,
    body .vertrag-filter {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        flex: 1 1 100%;
    }


    /* =====================================================
       TOOLBARS
       ===================================================== */

    .customer-toolbar,
    .object-toolbar,
    .einsatz-toolbar,
    .vertrag-toolbar,
    .table-toolbar,
    .toolbar {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        width: 100% !important;
        gap: 10px !important;
    }


    /* =====================================================
       PANELS
       ===================================================== */

    .einsatz-panel,
    .einsatz-form-panel,
    .profile-card {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }


    /* =====================================================
       TABELLEN
       ===================================================== */

    .table-wrapper {
        width: 100%;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }


    /* =====================================================
       MEDIEN / BILDER
       ===================================================== */

    img,
    svg {
        max-width: 100%;
    }
}


/* =========================================================
   IPHONE / KLEINE SMARTPHONES
   ========================================================= */

@media (max-width: 480px) {

    .fcc-content {
        padding: 15px 11px calc(80px + env(safe-area-inset-bottom)) !important;
    }


    /* Statistik 1-spaltig */

    .dashboard-stats,
    .stats-grid,
    .einsatz-stats,
    .vertrag-stats,
    .kunden-stats,
    .objekt-stats,
    .kalkulation-stats {
        grid-template-columns: minmax(0, 1fr) !important;
    }


    /* Home Dashboard */

    .fcc-page {
        padding: 11px !important;
    }

        .fcc-page .fcc-grid {
            grid-template-columns: minmax(0, 1fr) !important;
        }

        .fcc-page .fcc-dashboard-header h1 {
            font-size: 29px !important;
        }

        .fcc-page .fcc-card {
            min-height: 110px;
            padding: 17px !important;
        }

            .fcc-page .fcc-card strong {
                font-size: 27px !important;
            }


    /* allgemeine Cards */

    .stat-card {
        min-height: 110px !important;
    }


    /* Seitenüberschrift */

    .page-header h1 {
        font-size: 28px !important;
    }
}


/* =========================================================
   SEHR KLEINE SMARTPHONES
   ========================================================= */

@media (max-width: 370px) {

    .fcc-content {
        padding-left: 9px !important;
        padding-right: 9px !important;
    }

    .fcc-page {
        padding-left: 9px !important;
        padding-right: 9px !important;
    }

        .fcc-page .fcc-dashboard-header h1 {
            font-size: 27px !important;
        }
}


/* =========================================================
   FCC DARK 1.7 · INTERNE ANWENDUNG
   Das Kundenportal und öffentliche Seiten bleiben bewusst
   außerhalb dieses auf .fcc-layout begrenzten Themes.
   ========================================================= */

.fcc-layout {
    --fcc-primary: #6bd9d5;
    --fcc-primary-dark: #071b25;
    --fcc-secondary: #21b9b5;
    --fcc-secondary-light: #63d7d3;
    --fcc-background: #071a24;
    --fcc-surface: #102c38;
    --fcc-surface-2: #173743;
    --fcc-text: #edf7f9;
    --fcc-muted: #9aafb7;
    --fcc-border: #2b4c58;
    --fcc-shadow: 0 18px 48px rgba(0, 8, 14, .30);
    color: var(--fcc-text);
    color-scheme: dark;
    background:
        radial-gradient(circle at 88% 2%, rgba(26, 181, 177, .13), transparent 29rem),
        linear-gradient(155deg, #071a24 0%, #0a222c 58%, #081923 100%);
}

.fcc-layout .fcc-main,
.fcc-layout .fcc-content {
    background: transparent;
    color: var(--fcc-text);
}

.fcc-layout .fcc-content > div,
.fcc-layout .fcc-content .fcc-page,
.fcc-layout .fcc-content [class$="-page"],
.fcc-layout .fcc-content [class*="-page "] {
    color: var(--fcc-text);
    background: transparent !important;
}

.fcc-layout .fcc-sidebar {
    border-right: 1px solid rgba(107, 217, 213, .14);
    background: linear-gradient(180deg, #0d303d 0%, #071b25 66%, #06141d 100%);
    box-shadow: 12px 0 38px rgba(0, 7, 13, .22);
}

.fcc-layout .fcc-header {
    border-bottom: 1px solid rgba(112, 222, 217, .18);
    background: rgba(8, 31, 42, .88);
    box-shadow: 0 10px 32px rgba(0, 8, 14, .25);
    backdrop-filter: blur(18px);
}

.fcc-layout .fcc-header-title,
.fcc-layout .fcc-header-title-mobile {
    color: #f4fcfd;
}

.fcc-layout .fcc-version-badge {
    color: #76e3df;
    border-color: rgba(107, 217, 213, .25);
    background: rgba(33, 185, 181, .11);
}

.fcc-layout .fcc-content h1,
.fcc-layout .fcc-content h2,
.fcc-layout .fcc-content h3,
.fcc-layout .fcc-content h4,
.fcc-layout .fcc-content strong,
.fcc-layout .fcc-content label,
.fcc-layout .fcc-content legend {
    color: var(--fcc-text);
}

.fcc-layout .fcc-content p,
.fcc-layout .fcc-content small,
.fcc-layout .fcc-content time,
.fcc-layout .fcc-content .muted,
.fcc-layout .fcc-content [class*="-sub"],
.fcc-layout .fcc-content [class*="-hint"],
.fcc-layout .fcc-content [class*="-description"] {
    color: var(--fcc-muted);
}

.fcc-layout .fcc-content a:not(.fcc-primary-button):not(.primary) {
    color: #6ddbd7;
}

.fcc-layout .fcc-content input:not([type="checkbox"]):not([type="radio"]):not([type="button"]):not([type="submit"]),
.fcc-layout .fcc-content textarea,
.fcc-layout .fcc-content select {
    color: #eef8fa !important;
    border-color: #315461 !important;
    background: #0b2530 !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .025) !important;
}

.fcc-layout .fcc-content input::placeholder,
.fcc-layout .fcc-content textarea::placeholder {
    color: #708993 !important;
}

.fcc-layout .fcc-content input:focus,
.fcc-layout .fcc-content textarea:focus,
.fcc-layout .fcc-content select:focus {
    border-color: #54d4d0 !important;
    box-shadow: 0 0 0 3px rgba(51, 200, 195, .14) !important;
}

.fcc-layout .fcc-content select option {
    color: #edf7f9;
    background: #102c38;
}

.fcc-layout .fcc-content input:disabled,
.fcc-layout .fcc-content textarea:disabled,
.fcc-layout .fcc-content select:disabled,
.fcc-layout .fcc-content input[readonly],
.fcc-layout .fcc-content textarea[readonly] {
    color: #b9c8cd !important;
    background: #102933 !important;
    opacity: .82;
}

.fcc-layout .fcc-content .fcc-card,
.fcc-layout .fcc-content .stat-card,
.fcc-layout .fcc-content [class$="-card"],
.fcc-layout .fcc-content [class*="-card "],
.fcc-layout .fcc-content [class$="-panel"],
.fcc-layout .fcc-content [class*="-panel "],
.fcc-layout .fcc-content [class$="-modal"],
.fcc-layout .fcc-content [class*="-modal "],
.fcc-layout .fcc-content [class$="-section"],
.fcc-layout .fcc-content [class*="-section "],
.fcc-layout .fcc-content [class$="-tile"],
.fcc-layout .fcc-content [class*="-tile "],
.fcc-layout .fcc-content [class$="-empty"],
.fcc-layout .fcc-content [class*="-empty "],
.fcc-layout .fcc-content .folders,
.fcc-layout .fcc-content .empty,
.fcc-layout .fcc-content .empty-state {
    color: var(--fcc-text);
    border-color: var(--fcc-border) !important;
    background: linear-gradient(145deg, rgba(22, 55, 67, .97), rgba(13, 39, 50, .98)) !important;
    box-shadow: var(--fcc-shadow) !important;
}

.fcc-layout .fcc-content .stat-card,
.fcc-layout .fcc-content .fcc-card {
    position: relative;
    overflow: hidden;
}

.fcc-layout .fcc-content .stat-card::before,
.fcc-layout .fcc-content .fcc-card::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px;
    background: linear-gradient(180deg, #73e3df, #1aaea9);
    opacity: .78;
}

.fcc-layout .fcc-content .stat-card:hover,
.fcc-layout .fcc-content .stat-card.active,
.fcc-layout .fcc-content .fcc-card:hover {
    border-color: rgba(99, 215, 211, .58) !important;
    background: linear-gradient(145deg, #193d49, #102e39) !important;
    transform: translateY(-1px);
}

.fcc-layout .fcc-content table,
.fcc-layout .fcc-content [class$="-table"],
.fcc-layout .fcc-content [class*="-table "] {
    color: var(--fcc-text);
    border-color: var(--fcc-border) !important;
    background: #102c38 !important;
}

.fcc-layout .fcc-content th {
    color: #a9bec5 !important;
    border-color: #2a4a56 !important;
    background: #0b2530 !important;
}

.fcc-layout .fcc-content td,
.fcc-layout .fcc-content tr,
.fcc-layout .fcc-content [class$="-row"],
.fcc-layout .fcc-content [class*="-row "] {
    color: var(--fcc-text);
    border-color: #294854 !important;
}

.fcc-layout .fcc-content tbody tr:hover,
.fcc-layout .fcc-content [class$="-row"]:hover {
    background: rgba(57, 155, 157, .08) !important;
}

.fcc-layout .fcc-content .fcc-primary-button,
.fcc-layout .fcc-content button.primary,
.fcc-layout .fcc-content .primary[type="button"],
.fcc-layout .fcc-content .primary[type="submit"] {
    color: #062229 !important;
    border-color: transparent !important;
    background: linear-gradient(135deg, #6edbd7, #22b9b5) !important;
    box-shadow: 0 10px 24px rgba(13, 160, 157, .20);
}

.fcc-layout .fcc-content .fcc-secondary-button,
.fcc-layout .fcc-content button.secondary,
.fcc-layout .fcc-content button.ghost {
    color: #bce9e7 !important;
    border-color: #355965 !important;
    background: #143440 !important;
}

.fcc-layout .fcc-content button:not(:disabled) {
    transition: border-color .16s ease, background .16s ease, transform .16s ease, box-shadow .16s ease;
}

.fcc-layout .fcc-content button:not(:disabled):active {
    transform: translateY(1px);
}

.fcc-layout .fcc-content .folders button {
    color: #adc0c7;
}

.fcc-layout .fcc-content .folders button:hover,
.fcc-layout .fcc-content .folders button.active {
    color: #72dfdb;
    background: rgba(32, 184, 179, .13);
}

.fcc-layout .fcc-content .fcc-notification-button,
.fcc-layout .fcc-content .fcc-mail-button,
.fcc-layout .fcc-content .fcc-chart-basis button,
.fcc-layout .fcc-content .fcc-period-filter button,
.fcc-layout .fcc-content .fcc-calendar-link {
    color: #bce9e7 !important;
    border-color: #355965 !important;
    background: #143440 !important;
}

.fcc-layout .fcc-content .fcc-chart-basis button.active,
.fcc-layout .fcc-content .fcc-period-filter button.active,
.fcc-layout .fcc-content .fcc-calendar-link:hover {
    color: #062229 !important;
    border-color: transparent !important;
    background: linear-gradient(135deg, #6edbd7, #22b9b5) !important;
}

.fcc-layout .fcc-content .message-row,
.fcc-layout .fcc-content .message-open,
.fcc-layout .fcc-content .compose-attachment-item,
.fcc-layout .fcc-content .attachment-picker {
    color: var(--fcc-text);
    border-color: var(--fcc-border);
    background: #102c38;
}

.fcc-layout .fcc-content .message-row:hover,
.fcc-layout .fcc-content .message-open:hover,
.fcc-layout .fcc-content .attachment-picker:hover {
    background: #173b47;
}

.fcc-layout .fcc-content .compose-attachments {
    border-color: var(--fcc-border);
    background: rgba(8, 31, 42, .55);
}

.fcc-layout .fcc-content .compose-attachments .attachment-picker {
    position: relative;
    overflow: hidden;
}

.fcc-layout .fcc-content .compose-attachments .attachment-picker > span {
    color: #bce9e7 !important;
}

.fcc-layout .fcc-content .compose-attachments .attachment-picker input[type="file"] {
    position: absolute !important;
    width: 1px !important;
    min-width: 1px !important;
    height: 1px !important;
    min-height: 1px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    border: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

.fcc-layout .fcc-content .compose-attachment-remove,
.fcc-layout .fcc-content .danger,
.fcc-layout .fcc-content .delete-row {
    color: #ffb2b2 !important;
    border-color: rgba(248, 113, 113, .3) !important;
    background: rgba(127, 29, 29, .22) !important;
}

.fcc-layout .fcc-content .status.ok,
.fcc-layout .fcc-content .message.success {
    color: #9ce5ca;
    background: rgba(22, 101, 66, .28);
}

.fcc-layout .fcc-content .status.bad,
.fcc-layout .fcc-content .message.error,
.fcc-layout .fcc-content .fehler {
    color: #ffc0c0;
    background: rgba(128, 35, 35, .28);
}

.fcc-layout .fcc-content .mail-html-frame,
.fcc-layout .fcc-content .document-preview,
.fcc-layout .fcc-content .pdf-preview,
.fcc-layout .fcc-content iframe {
    color-scheme: light;
    background: #fff !important;
}

.fcc-create-menu {
    color: #edf7f9;
    border-color: #31525e;
    background: #102c38;
    box-shadow: 0 26px 70px rgba(0, 7, 12, .48);
}

.fcc-create-menu-head {
    border-color: #294854;
}

.fcc-create-menu-head strong,
.fcc-create-menu-text strong {
    color: #edf7f9;
}

.fcc-create-menu-head span,
.fcc-create-menu-text small {
    color: #94aab2;
}

.fcc-create-menu-item:hover {
    background: rgba(33, 185, 181, .12);
}

/* Ältere 1.4-Seiten (Statistik, Personal, Zeiterfassung) */
.fcc-layout .fcc-content .p140 h1,
.fcc-layout .fcc-content .p140 h2 {
    color: #f2fafb;
}

.fcc-layout .fcc-content .form140,
.fcc-layout .fcc-content .cards140 article,
.fcc-layout .fcc-content .table140 article,
.fcc-layout .fcc-content .kpi140 article,
.fcc-layout .fcc-content .fcc-stat-chart-card,
.fcc-layout .fcc-content .chart140 {
    color: #edf7f9;
    border-color: #2e505c !important;
    background: linear-gradient(145deg, #173844, #102c38) !important;
    box-shadow: 0 14px 36px rgba(0, 8, 14, .22);
}

.fcc-layout .fcc-content .kpi140 article {
    position: relative;
    overflow: hidden;
    min-height: 96px;
}

.fcc-layout .fcc-content .kpi140 article::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px;
    background: linear-gradient(180deg, #70e0dc, #21b9b5);
}

.fcc-layout .fcc-content .kpi140 span,
.fcc-layout .fcc-content .cards140 span,
.fcc-layout .fcc-content .fcc-stat-chart-head span,
.fcc-layout .fcc-content .bar140 small {
    color: #9eb2ba !important;
}

.fcc-layout .fcc-content .kpi140 strong,
.fcc-layout .fcc-content .cards140 strong,
.fcc-layout .fcc-content .fcc-stat-chart-head strong {
    color: #f2fafb !important;
}

.fcc-layout .fcc-content .cards140 article {
    min-height: 130px;
    align-content: start;
    gap: 10px;
}

.fcc-layout .fcc-content .bar140 i {
    background: linear-gradient(180deg, #6fdfdb, #1eaaa7) !important;
    box-shadow: 0 7px 18px rgba(24, 177, 173, .18);
}

.fcc-layout .fcc-content .circle140 {
    background: conic-gradient(#66d9d5 calc(var(--p) * 1%), #294955 0) !important;
}

.fcc-layout .fcc-content .circle140 b,
.fcc-layout .fcc-content .circle140 span {
    color: #edf7f9;
    background: #102c38 !important;
}

@media (max-width: 850px) {
    .fcc-layout .fcc-header {
        background: rgba(8, 31, 42, .94);
    }

    .fcc-layout .fcc-mobile-bottom-nav .fcc-mobile-nav-item svg {
        display: block !important;
        width: 24px !important;
        height: 24px !important;
        max-width: none !important;
        flex: 0 0 24px;
        fill: none !important;
        stroke: currentColor !important;
        stroke-width: 2.1 !important;
        opacity: 1 !important;
    }

    .fcc-layout .fcc-mobile-bottom-nav .fcc-mobile-nav-item {
        color: #9db2ba !important;
    }

    .fcc-layout .fcc-mobile-bottom-nav .fcc-mobile-nav-item.active {
        color: #76e3df !important;
        background: rgba(33, 185, 181, .16) !important;
        box-shadow: inset 0 0 0 1px rgba(107, 217, 213, .12);
    }

    .fcc-layout .fcc-content .dashboard-stats,
    .fcc-layout .fcc-content .stats-grid,
    .fcc-layout .fcc-content .einsatz-stats,
    .fcc-layout .fcc-content .vertrag-stats,
    .fcc-layout .fcc-content .kunden-stats,
    .fcc-layout .fcc-content .objekt-stats,
    .fcc-layout .fcc-content .kalkulation-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 9px !important;
    }

    .fcc-layout .fcc-content .stat-card {
        min-height: 94px !important;
        padding: 13px !important;
    }
}

@media (max-width: 380px) {
    .fcc-layout .fcc-content .dashboard-stats,
    .fcc-layout .fcc-content .stats-grid,
    .fcc-layout .fcc-content .einsatz-stats,
    .fcc-layout .fcc-content .vertrag-stats,
    .fcc-layout .fcc-content .kunden-stats,
    .fcc-layout .fcc-content .objekt-stats,
    .fcc-layout .fcc-content .kalkulation-stats {
        grid-template-columns: minmax(0, 1fr) !important;
    }
}