﻿.dark {
    --color-background: #020617; /* slate-950 */
    --color-surface: #020617;
    --color-text-primary: #E2E8F0; /* slate-200 */
    --color-text-secondary: #94A3B8; /* slate-400 */
    --color-text-tertiary: #64748B; /* slate-500 */

    --color-border: #1E293B; /* slate-800 */

    --shadow-cta: 0 6px 16px rgba(0, 128, 255, 0.45);
}

    .dark header {
        background-color: rgb(var(--color-surface-rgb, 14 23 42) / var(--tw-bg-opacity));
    }

    .dark .btn-primary {
        background-color: rgb(0 48 96);
    }

    .dark .btn-primary:hover {
        background-color: rgb(0 64 128);
    }

    .dark .btn-secondary {
        background-color: rgb(0 32 64);
        border: 2px solid rgb(0 64 128);
    }

    .dark .btn-outline {
        border: 2px solid rgb(0 64 128);
        color: rgb(0 128 255);
        background: transparent;
    }

    .dark .bg-surface {
        --tw-bg-opacity: .05;
    }

    .dark .text-text-primary {
        --tw-text-opacity: .8;
        color: var(--color-text-primary, 1);
    }

    .dark .text-text-secondary {
        --tw-text-opacity: 1;
        color: rgb(165 180 201 / var(--tw-text-opacity, 1));
    }

    .dark .text-text-tertiary {
        --tw-text-opacity: .75;
        color: rgb(165 180 201 / var(--tw-text-opacity, 1));
    }

    .dark .text-primary {
        color: rgb(128 192 255);
    }

    .dark .bg-primary-50 {
        background-color: rgba(240, 248, 255, .1);
    }

    .dark .bg-primary-50:hover {
        background-color: rgba(240, 248, 255, .2);
    }

    .dark .bg-primary {
        background-color: rgb(0 32 64);
    }

    .dark header .bg-white {
        background-color: rgb(0 32 64);
    }

    .dark .card {
        --tw-bg-opacity: .1;
    }

    .dark table.bg-white {
        --tw-bg-opacity: 0.05;
    }

    .dark .overlay-box .text-text-primary {
        color: black;
    }

    .dark .overlay-box .text-text-secondary {
        color: black;
    }

    .dark *,
    .dark ::before,
    .dark ::after {
        border-color: #696b6e;
    }

    .dark table.bg-white thead tr {
        --tw-bg-opacity: 0.05;
    }

    .dark .divide-border > :not([hidden]) ~ :not([hidden]) {
        --tw-divide-opacity: 1;
        border-color: #394156;
    }

    /* Dark Mode: Formulare & Buttons */
    .dark input,
    .dark textarea,
    .dark select {
        background-color: rgb(18 25 43); /* dunkles Feld, nicht zu grell */
        color: var(--color-text-primary); /* lesbarer Text */
        border-color: #394156; /* dezente Border */
    }

        .dark input::placeholder,
        .dark textarea::placeholder {
            color: var(--color-text-secondary); /* placeholder etwas heller */
            opacity: 1;
        }

        .dark input:focus,
        .dark textarea:focus,
        .dark select:focus {
            border-color: rgb(128 192 255); /* Fokusfarbe passend zu text-primary */
            box-shadow: 0 0 0 2px rgba(128,192,255,0.3);
            outline: none;
        }

    .dark .border-primary {
        border-color: rgba(0, 128, 255, .5);
    }

        .dark .border-primary:hover {
            border-color: rgb(0, 128, 255);
        }
