/* ==========================================================================
   campwiigo – Design-System "Sunset Drive"
   Nachtblau als Basis, Sonnenuntergangs-Verlauf (Orange → Pink → Violett) als Markenelement.
   Ladereihenfolge: Bootstrap 5.3 -> theme.css -> site.css -> cw-ui.css (eigene Komponenten)
   Alle Farben/Radien/Schatten nur über die --crb-* Tokens verwenden.
   Kontraste geprüft (WCAG AA): weißer Text auf --crb-sunset-strong >= 4.6:1.
   ========================================================================== */

/* ---------- Fonts (selbst gehostet, kein externer Request) ---------- */
@font-face {
    font-family: 'Outfit';
    font-style: normal;
    font-display: swap;
    font-weight: 100 900;
    src: url('../fonts/outfit-latin-wght-normal.woff2') format('woff2-variations');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Outfit';
    font-style: normal;
    font-display: swap;
    font-weight: 100 900;
    src: url('../fonts/outfit-latin-ext-wght-normal.woff2') format('woff2-variations');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Nunito Sans';
    font-style: normal;
    font-display: swap;
    font-weight: 200 1000;
    src: url('../fonts/nunito-sans-latin-wght-normal.woff2') format('woff2-variations');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Nunito Sans';
    font-style: normal;
    font-display: swap;
    font-weight: 200 1000;
    src: url('../fonts/nunito-sans-latin-ext-wght-normal.woff2') format('woff2-variations');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------- Design-Tokens ---------- */
:root {
    /* Nachtblau (Primär) */
    --crb-primary: #1B2440;
    --crb-primary-rgb: 27, 36, 64;
    --crb-primary-hover: #141B33;
    --crb-primary-pressed: #0E1326;
    --crb-primary-50: #EEF0F7;
    --crb-primary-100: #DCE0EE;
    --crb-primary-200: #B9C0DC;
    --crb-primary-300: #8C95BD;
    --crb-primary-gradient: linear-gradient(160deg, #0E1326 0%, #1B2440 45%, #3A2A5C 100%);

    /* Sonnenuntergang (Akzent / CTA) */
    --crb-accent: #FF7A2F;
    --crb-accent-rgb: 255, 122, 47;
    --crb-accent-strong: #C2410C; /* Text/Buttons, AA auf Weiß */
    --crb-accent-strong-hover: #A8370A;
    --crb-accent-50: #FFF1E8;
    --crb-accent-100: #FFDCC7;
    --crb-pink: #FF4F7B;
    --crb-violet: #8E5CF7;
    --crb-violet-strong: #6A3CC9;
    --crb-sun: #FFC857;
    --crb-sunset: linear-gradient(120deg, #FF7A2F 0%, #FF4F7B 55%, #8E5CF7 100%); /* dekorativ, auf dunklem Grund */
    --crb-sunset-strong: linear-gradient(120deg, #C2410C 0%, #D63369 55%, #7C4DDB 100%); /* Buttons mit weißem Text */
    --crb-sunset-strong-hover: linear-gradient(120deg, #A8370A 0%, #B42C5B 55%, #6A3CC9 100%);
    --crb-sunset-soft: linear-gradient(120deg, #FFF1E8 0%, #FFE8EF 55%, #F1EBFE 100%);

    /* Flächen */
    --crb-bg: #F7F6FB;
    --crb-bg-rgb: 247, 246, 251;
    --crb-surface: #FFFFFF;
    --crb-surface-alt: #F1EFF8;
    --crb-surface-sunken: #E9E6F3;
    --crb-border: #E4E2EE;
    --crb-border-strong: #CFCBE0;

    /* Text */
    --crb-text: #141826;
    --crb-text-rgb: 20, 24, 38;
    --crb-text-muted: #5B6178;
    --crb-text-subtle: #6B6F85;
    --crb-text-on-dark: #F4F2FF;
    --crb-text-on-dark-muted: #C9CDE4;

    /* Status */
    --crb-success: #168257;
    --crb-success-rgb: 22, 130, 87;
    --crb-success-hover: #13704B;
    --crb-success-50: #E6F5EE;
    --crb-warning: #F5A524;
    --crb-warning-rgb: 245, 165, 36;
    --crb-warning-text: #7A4A00;
    --crb-warning-50: #FEF3DC;
    --crb-danger: #D23A3F;
    --crb-danger-rgb: 210, 58, 63;
    --crb-danger-hover: #B92F34;
    --crb-danger-50: #FDECEC;
    --crb-info: #2563EB;
    --crb-info-rgb: 37, 99, 235;
    --crb-info-hover: #1D4ED8;
    --crb-info-50: #E8F0FE;
    --crb-rating: #F5A524;

    /* Footer */
    --crb-footer-bg: #141B33;
    --crb-footer-text: #C9CDE4;

    /* Typografie */
    --crb-font-body: 'Nunito Sans', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --crb-font-heading: 'Outfit', 'Nunito Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --crb-fs-xs: 0.75rem;
    --crb-fs-sm: 0.875rem;
    --crb-fs-base: 1rem;
    --crb-fs-lg: 1.125rem;
    --crb-fs-xl: 1.25rem;
    --crb-fs-2xl: clamp(1.375rem, 1.2rem + 0.8vw, 1.75rem);
    --crb-fs-3xl: clamp(1.625rem, 1.3rem + 1.4vw, 2.25rem);
    --crb-fs-4xl: clamp(2rem, 1.4rem + 2.6vw, 3.25rem);
    --crb-fs-5xl: clamp(2.4rem, 1.5rem + 4.2vw, 4.75rem);

    /* Form */
    --crb-radius-xs: 8px;
    --crb-radius-sm: 12px;
    --crb-radius-md: 16px;
    --crb-radius-lg: 20px;
    --crb-radius-xl: 28px;
    --crb-radius-pill: 999px;

    --crb-shadow-xs: 0 1px 2px rgba(20, 24, 38, 0.05);
    --crb-shadow-sm: 0 1px 2px rgba(20, 24, 38, 0.05), 0 4px 12px rgba(27, 36, 64, 0.06);
    --crb-shadow-md: 0 8px 24px rgba(27, 36, 64, 0.10), 0 2px 6px rgba(27, 36, 64, 0.06);
    --crb-shadow-lg: 0 24px 48px rgba(27, 36, 64, 0.18), 0 6px 12px rgba(27, 36, 64, 0.08);
    --crb-glow-cta: 0 10px 28px -8px rgba(214, 51, 105, 0.55);
    --crb-focus-ring: 0 0 0 0.25rem rgba(124, 77, 219, 0.30);

    /* Abstände */
    --crb-space-1: 0.25rem;
    --crb-space-2: 0.5rem;
    --crb-space-3: 0.75rem;
    --crb-space-4: 1rem;
    --crb-space-5: 1.5rem;
    --crb-space-6: 2rem;
    --crb-space-7: 3rem;
    --crb-space-8: 4rem;
    --crb-space-9: 6rem;

    --crb-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
    --crb-transition: 180ms var(--crb-ease);
    --crb-navbar-height: 72px;
    --crb-content-max: 1280px;

    /* ---------- Bootstrap 5.3 Mapping ---------- */
    --bs-primary: var(--crb-primary);
    --bs-primary-rgb: var(--crb-primary-rgb);
    --bs-secondary: var(--crb-text-muted);
    --bs-secondary-rgb: 91, 97, 120;
    --bs-success: var(--crb-success);
    --bs-success-rgb: var(--crb-success-rgb);
    --bs-info: var(--crb-info);
    --bs-info-rgb: var(--crb-info-rgb);
    --bs-warning: var(--crb-warning);
    --bs-warning-rgb: var(--crb-warning-rgb);
    --bs-danger: var(--crb-danger);
    --bs-danger-rgb: var(--crb-danger-rgb);
    --bs-light: var(--crb-surface-alt);
    --bs-light-rgb: 241, 239, 248;
    --bs-dark: var(--crb-text);
    --bs-dark-rgb: var(--crb-text-rgb);

    --bs-primary-text-emphasis: var(--crb-primary-pressed);
    --bs-primary-bg-subtle: var(--crb-primary-50);
    --bs-primary-border-subtle: var(--crb-primary-200);
    --bs-secondary-text-emphasis: #3D4258;
    --bs-secondary-bg-subtle: var(--crb-surface-alt);
    --bs-secondary-border-subtle: var(--crb-border-strong);
    --bs-success-text-emphasis: #0F5A3C;
    --bs-success-bg-subtle: var(--crb-success-50);
    --bs-success-border-subtle: #B5DFCB;
    --bs-info-text-emphasis: #1A43A8;
    --bs-info-bg-subtle: var(--crb-info-50);
    --bs-info-border-subtle: #BCD0FB;
    --bs-warning-text-emphasis: var(--crb-warning-text);
    --bs-warning-bg-subtle: var(--crb-warning-50);
    --bs-warning-border-subtle: #F9D894;
    --bs-danger-text-emphasis: #8F2226;
    --bs-danger-bg-subtle: var(--crb-danger-50);
    --bs-danger-border-subtle: #F3BDBF;
    --bs-light-text-emphasis: var(--crb-text-muted);
    --bs-light-bg-subtle: var(--crb-bg);
    --bs-light-border-subtle: var(--crb-border);
    --bs-dark-text-emphasis: var(--crb-text);
    --bs-dark-bg-subtle: var(--crb-surface-sunken);
    --bs-dark-border-subtle: var(--crb-border-strong);

    --bs-body-font-family: var(--crb-font-body);
    --bs-body-font-size: 1rem;
    --bs-body-font-weight: 400;
    --bs-body-line-height: 1.6;
    --bs-body-color: var(--crb-text);
    --bs-body-color-rgb: var(--crb-text-rgb);
    --bs-body-bg: var(--crb-bg);
    --bs-body-bg-rgb: var(--crb-bg-rgb);
    --bs-emphasis-color: var(--crb-text);
    --bs-secondary-color: rgba(var(--crb-text-rgb), 0.72);
    --bs-secondary-bg: var(--crb-surface-alt);
    --bs-tertiary-color: rgba(var(--crb-text-rgb), 0.5);
    --bs-tertiary-bg: var(--crb-bg);
    --bs-heading-color: var(--crb-text);
    --bs-link-color: var(--crb-violet-strong);
    --bs-link-color-rgb: 106, 60, 201;
    --bs-link-hover-color: var(--crb-primary);
    --bs-link-hover-color-rgb: var(--crb-primary-rgb);
    --bs-border-color: var(--crb-border);
    --bs-border-color-translucent: rgba(var(--crb-primary-rgb), 0.1);
    --bs-border-radius: var(--crb-radius-sm);
    --bs-border-radius-sm: var(--crb-radius-xs);
    --bs-border-radius-lg: var(--crb-radius-md);
    --bs-border-radius-xl: var(--crb-radius-lg);
    --bs-border-radius-xxl: var(--crb-radius-xl);
    --bs-border-radius-pill: var(--crb-radius-pill);
    --bs-box-shadow: var(--crb-shadow-md);
    --bs-box-shadow-sm: var(--crb-shadow-sm);
    --bs-box-shadow-lg: var(--crb-shadow-lg);
    --bs-focus-ring-color: rgba(124, 77, 219, 0.30);
    --bs-form-valid-color: var(--crb-success);
    --bs-form-valid-border-color: var(--crb-success);
    --bs-form-invalid-color: var(--crb-danger);
    --bs-form-invalid-border-color: var(--crb-danger);
}

/* ==========================================================================
   Base
   ========================================================================== */
html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--crb-navbar-height) + 1rem);
}

body {
    font-family: var(--crb-font-body);
    color: var(--crb-text);
    background-color: var(--crb-bg);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--crb-font-heading);
    color: var(--crb-text);
    font-weight: 650;
    letter-spacing: -0.02em;
    line-height: 1.15;
}

h1, .h1 { font-size: var(--crb-fs-4xl); font-weight: 800; letter-spacing: -0.03em; }
h2, .h2 { font-size: var(--crb-fs-3xl); font-weight: 750; }
h3, .h3 { font-size: var(--crb-fs-2xl); font-weight: 700; }
h4, .h4 { font-size: var(--crb-fs-xl); }
h5, .h5 { font-size: var(--crb-fs-lg); }
h6, .h6 { font-size: var(--crb-fs-base); }

.display-hero {
    font-family: var(--crb-font-heading);
    font-size: var(--crb-fs-5xl);
    font-weight: 800;
    letter-spacing: -0.035em;
    line-height: 1.02;
}

.lead {
    font-size: var(--crb-fs-lg);
    color: var(--crb-text-muted);
}

a {
    color: var(--crb-violet-strong);
    text-decoration-color: rgba(106, 60, 201, 0.35);
    text-underline-offset: 0.18em;
    transition: color var(--crb-transition), text-decoration-color var(--crb-transition);
}

    a:hover {
        color: var(--crb-primary);
        text-decoration-color: currentColor;
    }

::selection {
    background: #F7D7E3;
    color: var(--crb-text);
}

:focus-visible {
    outline: 2px solid var(--crb-violet);
    outline-offset: 2px;
}

hr {
    border-color: var(--crb-border);
    opacity: 1;
}

small, .small {
    font-size: var(--crb-fs-sm);
}

.text-muted, .text-body-secondary {
    color: var(--crb-text-muted) !important;
}

img {
    max-width: 100%;
}

/* ==========================================================================
   Layout-Helfer
   ========================================================================== */
.crb-page {
    width: 100%;
    max-width: var(--crb-content-max);
    margin-inline: auto;
    padding: var(--crb-space-5) var(--crb-space-4);
}

@media (min-width: 768px) {
    .crb-page {
        padding: var(--crb-space-7) var(--crb-space-5);
    }
}

.crb-container {
    width: 100%;
    max-width: var(--crb-content-max);
    margin-inline: auto;
    padding-inline: var(--crb-space-4);
}

@media (min-width: 768px) {
    .crb-container {
        padding-inline: var(--crb-space-5);
    }
}

.crb-page-header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--crb-space-3);
    margin-bottom: var(--crb-space-6);
}

    .crb-page-header h1, .crb-page-header h2 {
        margin-bottom: 0;
    }

.crb-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--crb-font-heading);
    font-size: var(--crb-fs-xs);
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--crb-accent-strong);
    margin-bottom: var(--crb-space-2);
}

    .crb-eyebrow::before {
        content: "";
        width: 1.5rem;
        height: 2px;
        border-radius: 2px;
        background: var(--crb-sunset-strong);
    }

.crb-section {
    padding-block: var(--crb-space-8);
}

.crb-section-alt {
    background-color: var(--crb-surface-alt);
}

.crb-section-title {
    max-width: 46rem;
    margin-bottom: var(--crb-space-6);
}

    .crb-section-title.text-center {
        margin-inline: auto;
    }

    .crb-section-title h2 {
        margin-bottom: var(--crb-space-2);
    }

    .crb-section-title p {
        color: var(--crb-text-muted);
        font-size: var(--crb-fs-lg);
        margin-bottom: 0;
    }

.crb-section-header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--crb-space-4);
    margin-bottom: var(--crb-space-6);
}

    .crb-section-header.text-center {
        justify-content: center;
    }

    .crb-section-header .crb-section-actions {
        display: flex;
        flex-wrap: wrap;
        gap: var(--crb-space-2);
    }

/* ==========================================================================
   Flächen, Karten, Kacheln
   ========================================================================== */
.crb-card {
    background-color: var(--crb-surface);
    border: 1px solid var(--crb-border);
    border-radius: var(--crb-radius-lg);
    box-shadow: var(--crb-shadow-sm);
    transition: box-shadow var(--crb-transition), transform var(--crb-transition), border-color var(--crb-transition);
}

.crb-card-body {
    padding: var(--crb-space-5);
}

.crb-card-hover {
    cursor: pointer;
}

    .crb-card-hover:hover {
        box-shadow: var(--crb-shadow-md);
        transform: translateY(-3px);
        border-color: var(--crb-primary-100);
    }

.crb-surface {
    background-color: var(--crb-surface);
    border-radius: var(--crb-radius-lg);
}

/* Glas-Karte (auf Bildern/Verläufen) */
.crb-glass {
    background: rgba(255, 255, 255, 0.86);
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: var(--crb-radius-xl);
    box-shadow: 0 30px 60px -20px rgba(14, 19, 38, 0.45);
    -webkit-backdrop-filter: blur(18px) saturate(1.4);
    backdrop-filter: blur(18px) saturate(1.4);
}

.crb-glass-dark {
    background: rgba(20, 27, 51, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.14);
    color: var(--crb-text-on-dark);
    border-radius: var(--crb-radius-lg);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
}

/* Kachel mit Icon (Schnellzugriffe, Profil-Apps) */
.crb-tile {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--crb-space-3);
    height: 100%;
    padding: var(--crb-space-5);
    background: var(--crb-surface);
    border: 1px solid var(--crb-border);
    border-radius: var(--crb-radius-lg);
    box-shadow: var(--crb-shadow-sm);
    color: var(--crb-text);
    text-decoration: none;
    overflow: hidden;
    transition: transform var(--crb-transition), box-shadow var(--crb-transition), border-color var(--crb-transition);
}

    .crb-tile::after {
        content: "";
        position: absolute;
        inset: auto 0 0 0;
        height: 3px;
        background: var(--crb-sunset-strong);
        transform: scaleX(0);
        transform-origin: left;
        transition: transform 260ms var(--crb-ease);
    }

    .crb-tile:hover {
        color: var(--crb-text);
        transform: translateY(-4px);
        box-shadow: var(--crb-shadow-md);
        border-color: var(--crb-primary-100);
    }

        .crb-tile:hover::after {
            transform: scaleX(1);
        }

    .crb-tile h3, .crb-tile .crb-tile-title {
        font-size: var(--crb-fs-xl);
        margin: 0;
    }

    .crb-tile p {
        color: var(--crb-text-muted);
        margin: 0;
    }

    .crb-tile .crb-tile-link {
        margin-top: auto;
        font-weight: 700;
        color: var(--crb-accent-strong);
    }

.crb-icon-circle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: var(--crb-radius-md);
    background-color: var(--crb-primary-50);
    color: var(--crb-primary);
    font-size: 1.15rem;
    flex-shrink: 0;
}

    .crb-icon-circle.is-round {
        border-radius: 50%;
    }

    .crb-icon-circle.is-sunset {
        background: var(--crb-sunset-strong);
        color: #fff;
        box-shadow: var(--crb-glow-cta);
    }

    .crb-icon-circle.crb-confirm-danger {
        background: var(--crb-danger-50);
        color: var(--crb-danger);
    }

    .crb-icon-circle.is-sm {
        width: 2.25rem;
        height: 2.25rem;
        font-size: 0.95rem;
        border-radius: var(--crb-radius-sm);
    }

.crb-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.3rem 0.75rem;
    font-size: var(--crb-fs-sm);
    font-weight: 600;
    color: var(--crb-primary);
    background-color: var(--crb-primary-50);
    border: 1px solid var(--crb-primary-100);
    border-radius: var(--crb-radius-pill);
    line-height: 1.3;
}

    .crb-chip.is-accent {
        color: var(--crb-accent-strong);
        background: var(--crb-accent-50);
        border-color: var(--crb-accent-100);
    }

    .crb-chip.is-success {
        color: #0F5A3C;
        background: var(--crb-success-50);
        border-color: #B5DFCB;
    }

    .crb-chip.is-muted {
        color: var(--crb-text-muted);
        background: var(--crb-surface-alt);
        border-color: var(--crb-border);
    }

    .crb-chip.is-dark {
        color: var(--crb-text-on-dark);
        background: rgba(255, 255, 255, 0.12);
        border-color: rgba(255, 255, 255, 0.2);
    }

    .crb-chip .crb-chip-remove {
        border: 0;
        background: transparent;
        color: inherit;
        padding: 0 0 0 0.15rem;
        line-height: 1;
        cursor: pointer;
        opacity: 0.7;
    }

        .crb-chip .crb-chip-remove:hover {
            opacity: 1;
        }

.crb-badge-sun {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.3rem 0.8rem;
    border-radius: var(--crb-radius-pill);
    background: var(--crb-sun);
    color: var(--crb-primary);
    font-family: var(--crb-font-heading);
    font-size: var(--crb-fs-xs);
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.crb-gradient-text {
    background: var(--crb-sunset);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

    /* Auf hellem Grund die kräftige Variante verwenden */
    .crb-gradient-text.is-strong {
        background-image: var(--crb-sunset-strong);
    }

.bg-sand { background-color: var(--crb-bg) !important; }
.bg-surface { background-color: var(--crb-surface) !important; }
.bg-forest, .bg-night { background: var(--crb-primary-gradient) !important; color: var(--crb-text-on-dark); }
.bg-sunset { background: var(--crb-sunset-strong) !important; color: #fff; }
.text-accent { color: var(--crb-accent-strong) !important; }
.text-forest, .text-night { color: var(--crb-primary) !important; }

/* Tabellenspalte so schmal wie ihr Inhalt */
.crb-td-fit {
    width: 1px;
    white-space: nowrap;
}

/* ==========================================================================
   Hero (Nachthimmel + Sonnenuntergang)
   ========================================================================== */
.crb-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    color: var(--crb-text-on-dark);
    background:
        radial-gradient(60% 55% at 85% 100%, rgba(255, 122, 47, 0.55) 0%, rgba(255, 79, 123, 0.25) 40%, transparent 70%),
        radial-gradient(45% 50% at 10% 95%, rgba(142, 92, 247, 0.45) 0%, transparent 70%),
        linear-gradient(180deg, #0B1022 0%, #141B33 38%, #2A2350 72%, #4A2A5E 100%);
}

    .crb-hero h1, .crb-hero h2, .crb-hero h3 {
        color: #fff;
    }

    .crb-hero p, .crb-hero .lead {
        color: var(--crb-text-on-dark-muted);
    }

    /* Sternenhimmel */
    .crb-hero::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: -1;
        background-image:
            radial-gradient(1.5px 1.5px at 12% 18%, rgba(255, 255, 255, 0.9), transparent),
            radial-gradient(1px 1px at 26% 42%, rgba(255, 255, 255, 0.7), transparent),
            radial-gradient(1.5px 1.5px at 38% 12%, rgba(255, 255, 255, 0.8), transparent),
            radial-gradient(1px 1px at 52% 30%, rgba(255, 255, 255, 0.6), transparent),
            radial-gradient(2px 2px at 64% 16%, rgba(255, 255, 255, 0.9), transparent),
            radial-gradient(1px 1px at 72% 38%, rgba(255, 255, 255, 0.6), transparent),
            radial-gradient(1.5px 1.5px at 84% 10%, rgba(255, 255, 255, 0.85), transparent),
            radial-gradient(1px 1px at 92% 28%, rgba(255, 255, 255, 0.6), transparent),
            radial-gradient(1px 1px at 6% 36%, rgba(255, 255, 255, 0.5), transparent),
            radial-gradient(1.5px 1.5px at 46% 50%, rgba(255, 255, 255, 0.5), transparent);
        animation: crb-twinkle 6s ease-in-out infinite alternate;
    }

.crb-hero-skyline {
    position: absolute;
    inset: auto 0 -1px 0;
    z-index: -1;
    width: 100%;
    height: auto;
    pointer-events: none;
}

@keyframes crb-twinkle {
    from { opacity: 0.55; }
    to { opacity: 1; }
}

/* CTA-Band (Seitenende) */
.crb-cta-band {
    position: relative;
    overflow: hidden;
    border-radius: var(--crb-radius-xl);
    padding: var(--crb-space-7) var(--crb-space-5);
    background: var(--crb-primary-gradient);
    color: var(--crb-text-on-dark);
    box-shadow: var(--crb-shadow-lg);
}

    .crb-cta-band::after {
        content: "";
        position: absolute;
        width: 26rem;
        height: 26rem;
        right: -8rem;
        top: -10rem;
        border-radius: 50%;
        background: var(--crb-sunset);
        opacity: 0.35;
        filter: blur(40px);
        pointer-events: none;
    }

    .crb-cta-band h2 {
        color: #fff;
    }

    .crb-cta-band p {
        color: var(--crb-text-on-dark-muted);
    }

/* ==========================================================================
   Auswahl-Kacheln (statt btn-success/btn-light-Toggles)
   ========================================================================== */
.crb-choice-group {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
    gap: var(--crb-space-3);
}

.crb-choice {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--crb-space-3);
    width: 100%;
    min-height: 3.25rem;
    padding: 0.75rem 1rem;
    text-align: left;
    font-weight: 600;
    color: var(--crb-text);
    background: var(--crb-surface);
    border: 1.5px solid var(--crb-border-strong);
    border-radius: var(--crb-radius-md);
    cursor: pointer;
    transition: border-color var(--crb-transition), background-color var(--crb-transition), box-shadow var(--crb-transition), transform var(--crb-transition);
}

    .crb-choice:hover {
        border-color: var(--crb-violet);
        background: #FAF8FF;
    }

    .crb-choice:focus-visible {
        outline: none;
        box-shadow: var(--crb-focus-ring);
    }

    .crb-choice:disabled, .crb-choice.disabled {
        opacity: 0.55;
        cursor: not-allowed;
    }

    .crb-choice > i:first-child, .crb-choice > .fa-solid:first-child, .crb-choice > .fas:first-child {
        color: var(--crb-text-muted);
        width: 1.25rem;
        text-align: center;
    }

    .crb-choice.is-selected, .crb-choice.active {
        border-color: var(--crb-violet-strong);
        background: #F4EFFF;
        color: var(--crb-primary);
        box-shadow: 0 0 0 3px rgba(124, 77, 219, 0.14);
    }

        .crb-choice.is-selected > i:first-child, .crb-choice.active > i:first-child {
            color: var(--crb-violet-strong);
        }

        /* Häkchen rechts oben */
        .crb-choice.is-selected::after, .crb-choice.active::after {
            content: "\f00c";
            font-family: "Font Awesome 6 Free";
            font-weight: 900;
            position: absolute;
            top: -0.55rem;
            right: -0.55rem;
            width: 1.4rem;
            height: 1.4rem;
            display: grid;
            place-items: center;
            font-size: 0.7rem;
            color: #fff;
            background: var(--crb-violet-strong);
            border-radius: 50%;
            box-shadow: 0 2px 6px rgba(106, 60, 201, 0.4);
        }

    /* Teilweise ausgewählt (z.B. Land mit einzelnen Regionen) */
    .crb-choice.is-partial {
        border-style: dashed;
        border-color: var(--crb-violet);
        background: #FAF8FF;
    }

    .crb-choice.is-compact {
        min-height: 2.5rem;
        padding: 0.45rem 0.85rem;
        width: auto;
        font-size: var(--crb-fs-sm);
    }

/* Segment-Umschalter (z.B. Liste/Karte) */
.crb-segmented {
    display: inline-flex;
    padding: 4px;
    gap: 4px;
    background: var(--crb-surface-alt);
    border: 1px solid var(--crb-border);
    border-radius: var(--crb-radius-pill);
}

    .crb-segmented > button, .crb-segmented > a {
        display: inline-flex;
        align-items: center;
        gap: 0.45rem;
        border: 0;
        background: transparent;
        color: var(--crb-text-muted);
        font-weight: 700;
        font-size: var(--crb-fs-sm);
        padding: 0.45rem 1rem;
        border-radius: var(--crb-radius-pill);
        text-decoration: none;
        cursor: pointer;
        transition: background-color var(--crb-transition), color var(--crb-transition), box-shadow var(--crb-transition);
    }

        .crb-segmented > button:hover, .crb-segmented > a:hover {
            color: var(--crb-primary);
        }

        .crb-segmented > .active, .crb-segmented > .is-selected {
            background: var(--crb-surface);
            color: var(--crb-primary);
            box-shadow: var(--crb-shadow-sm);
        }

/* ==========================================================================
   Stepper (Wizard) und Tab-Leiste (Dashboard, Profil)
   ========================================================================== */
.crb-stepper {
    display: flex;
    gap: var(--crb-space-2);
    counter-reset: crb-step;
    list-style: none;
    padding: 0;
    margin: 0;
}

    .crb-stepper > li {
        flex: 1 1 0;
        min-width: 0;
    }

    .crb-stepper .crb-step {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
        width: 100%;
        padding: 0;
        border: 0;
        background: transparent;
        text-align: left;
        color: var(--crb-text-subtle);
        font-weight: 700;
        font-size: var(--crb-fs-sm);
        cursor: pointer;
    }

        .crb-stepper .crb-step::before {
            content: "";
            display: block;
            height: 6px;
            border-radius: var(--crb-radius-pill);
            background: var(--crb-surface-sunken);
            transition: background var(--crb-transition);
        }

        .crb-stepper .crb-step .crb-step-label {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

            .crb-stepper .crb-step .crb-step-label::before {
                counter-increment: crb-step;
                content: counter(crb-step);
                display: grid;
                place-items: center;
                flex-shrink: 0;
                width: 1.6rem;
                height: 1.6rem;
                border-radius: 50%;
                font-size: var(--crb-fs-xs);
                background: var(--crb-surface-sunken);
                color: var(--crb-text-muted);
            }

        .crb-stepper .crb-step.is-done::before, .crb-stepper .crb-step.is-current::before {
            background: var(--crb-sunset-strong);
        }

        .crb-stepper .crb-step.is-done, .crb-stepper .crb-step.is-current {
            color: var(--crb-primary);
        }

            .crb-stepper .crb-step.is-done .crb-step-label::before {
                content: "\f00c";
                font-family: "Font Awesome 6 Free";
                font-weight: 900;
                background: var(--crb-success);
                color: #fff;
            }

            .crb-stepper .crb-step.is-current .crb-step-label::before {
                background: var(--crb-primary);
                color: #fff;
            }

        .crb-stepper .crb-step:disabled {
            cursor: default;
        }

@media (max-width: 575.98px) {
    .crb-stepper .crb-step:not(.is-current) .crb-step-text {
        display: none;
    }
}

.crb-tabbar {
    display: flex;
    gap: 0.35rem;
    overflow-x: auto;
    scrollbar-width: none;
    padding: 0.35rem;
    background: var(--crb-surface);
    border: 1px solid var(--crb-border);
    border-radius: var(--crb-radius-pill);
    box-shadow: var(--crb-shadow-sm);
    scroll-snap-type: x proximity;
}

    .crb-tabbar::-webkit-scrollbar {
        display: none;
    }

    .crb-tabbar > a, .crb-tabbar > button {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        flex-shrink: 0;
        padding: 0.55rem 1rem;
        border: 0;
        border-radius: var(--crb-radius-pill);
        background: transparent;
        color: var(--crb-text-muted);
        font-weight: 700;
        font-size: var(--crb-fs-sm);
        text-decoration: none;
        white-space: nowrap;
        cursor: pointer;
        scroll-snap-align: start;
        transition: background-color var(--crb-transition), color var(--crb-transition);
    }

        .crb-tabbar > a:hover, .crb-tabbar > button:hover {
            color: var(--crb-primary);
            background: var(--crb-primary-50);
        }

        .crb-tabbar > .active, .crb-tabbar > .is-selected {
            color: #fff;
            background: var(--crb-primary);
        }

            .crb-tabbar > .active:hover, .crb-tabbar > .is-selected:hover {
                color: #fff;
                background: var(--crb-primary-hover);
            }

/* Klebende Aktionsleiste (Detailseiten, Wizard-Fuß) */
.crb-sticky-actions {
    position: sticky;
    bottom: 0;
    z-index: 20;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--crb-space-3);
    padding: var(--crb-space-3) var(--crb-space-4);
    margin-top: var(--crb-space-5);
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid var(--crb-border);
    border-radius: var(--crb-radius-lg);
    box-shadow: 0 -8px 30px rgba(27, 36, 64, 0.12);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
}

@media (max-width: 575.98px) {
    .crb-sticky-actions {
        border-radius: var(--crb-radius-lg) var(--crb-radius-lg) 0 0;
        margin-inline: calc(var(--crb-space-4) * -1);
    }
}

/* ==========================================================================
   Leer-, Lade- und Fehlerzustände
   ========================================================================== */
.crb-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--crb-space-3);
    padding: var(--crb-space-7) var(--crb-space-5);
    background: var(--crb-surface);
    border: 1.5px dashed var(--crb-border-strong);
    border-radius: var(--crb-radius-lg);
}

    .crb-empty .crb-empty-icon {
        display: grid;
        place-items: center;
        width: 4.5rem;
        height: 4.5rem;
        border-radius: 50%;
        background: var(--crb-sunset-soft);
        color: var(--crb-accent-strong);
        font-size: 1.75rem;
    }

    .crb-empty h3 {
        font-size: var(--crb-fs-xl);
        margin: 0;
    }

    .crb-empty p {
        max-width: 32rem;
        color: var(--crb-text-muted);
        margin: 0;
    }

/* Status-Seiten (Fehler, kein Zugriff, 404) */
.crb-status {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--crb-space-6);
    padding: var(--crb-space-6);
    overflow: hidden;
    position: relative;
}

    .crb-status::before {
        content: "";
        position: absolute;
        inset: 0 0 auto 0;
        height: 4px;
        background: var(--crb-sunset-strong);
    }

    .crb-status .crb-status-image {
        width: 100%;
        max-width: 18rem;
        flex-shrink: 0;
    }

@media (min-width: 768px) {
    .crb-status {
        flex-direction: row;
        padding: var(--crb-space-8) var(--crb-space-7);
    }
}

.crb-skeleton {
    display: block;
    border-radius: var(--crb-radius-sm);
    background: linear-gradient(90deg, var(--crb-surface-alt) 0%, var(--crb-surface-sunken) 40%, var(--crb-surface-alt) 80%);
    background-size: 200% 100%;
    animation: crb-shimmer 1.4s linear infinite;
}

@keyframes crb-shimmer {
    from { background-position: 200% 0; }
    to { background-position: -200% 0; }
}

.crb-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--crb-space-3);
    padding: var(--crb-space-6);
    color: var(--crb-text-muted);
    font-weight: 600;
}

.crb-loader {
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    background: conic-gradient(from 0deg, transparent 0 25%, #D63369 60%, #7C4DDB 100%);
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3px));
    mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3px));
    animation: crb-spin 0.9s linear infinite;
}

@keyframes crb-spin {
    to { transform: rotate(360deg); }
}

/* ==========================================================================
   Animationen (Scroll-Reveal, Zähler)
   ========================================================================== */
.crb-reveal {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 600ms var(--crb-ease), transform 600ms var(--crb-ease);
    transition-delay: var(--crb-reveal-delay, 0ms);
}

    .crb-reveal.is-visible {
        opacity: 1;
        transform: none;
    }

/* Ohne JavaScript (z.B. Prerendering) sichtbar bleiben */
.no-js .crb-reveal {
    opacity: 1;
    transform: none;
}

.crb-float {
    animation: crb-float 6s ease-in-out infinite;
}

@keyframes crb-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

/* ==========================================================================
   Bootstrap-Komponenten
   ========================================================================== */
.btn {
    --bs-btn-font-family: var(--crb-font-body);
    --bs-btn-font-weight: 700;
    --bs-btn-padding-x: 1.15rem;
    --bs-btn-padding-y: 0.55rem;
    --bs-btn-border-radius: var(--crb-radius-sm);
    --bs-btn-focus-box-shadow: var(--crb-focus-ring);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    letter-spacing: 0.005em;
    transition: color var(--crb-transition), background-color var(--crb-transition), border-color var(--crb-transition), box-shadow var(--crb-transition), transform var(--crb-transition), filter var(--crb-transition);
}

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

    /* Blockbuttons behalten ihr Verhalten */
    .btn.w-100, .btn.d-block {
        display: flex;
    }

.btn-sm {
    --bs-btn-padding-x: 0.8rem;
    --bs-btn-padding-y: 0.35rem;
    --bs-btn-font-size: var(--crb-fs-sm);
    --bs-btn-border-radius: var(--crb-radius-xs);
    gap: 0.35rem;
}

.btn-lg {
    --bs-btn-padding-x: 1.6rem;
    --bs-btn-padding-y: 0.8rem;
    --bs-btn-font-size: var(--crb-fs-lg);
    --bs-btn-border-radius: var(--crb-radius-md);
}

/* Primär: Nachtblau */
.btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--crb-primary);
    --bs-btn-border-color: var(--crb-primary);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--crb-primary-hover);
    --bs-btn-hover-border-color: var(--crb-primary-hover);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--crb-primary-pressed);
    --bs-btn-active-border-color: var(--crb-primary-pressed);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--crb-primary-300);
    --bs-btn-disabled-border-color: var(--crb-primary-300);
    --bs-btn-focus-shadow-rgb: var(--crb-primary-rgb);
}

    .btn-primary:hover {
        box-shadow: 0 8px 20px -8px rgba(var(--crb-primary-rgb), 0.6);
    }

/* Haupt-CTA: Sonnenuntergang (nur eine pro Ansicht) */
.btn-accent {
    --bs-btn-color: #fff;
    --bs-btn-bg: #C2410C;
    --bs-btn-border-color: transparent;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-border-color: transparent;
    --bs-btn-active-color: #fff;
    --bs-btn-active-border-color: transparent;
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-border-color: transparent;
    --bs-btn-focus-box-shadow: 0 0 0 0.25rem rgba(214, 51, 105, 0.35);
    --bs-btn-border-radius: var(--crb-radius-pill);
    background-image: var(--crb-sunset-strong);
    background-size: 140% 100%;
    background-position: 0% 0%;
    box-shadow: var(--crb-glow-cta);
    transition: background-position 400ms var(--crb-ease), box-shadow var(--crb-transition), transform var(--crb-transition);
}

    .btn-accent:hover, .btn-accent:focus-visible {
        background-image: var(--crb-sunset-strong-hover);
        background-position: 100% 0%;
        box-shadow: 0 14px 34px -10px rgba(214, 51, 105, 0.7);
        transform: translateY(-1px);
    }

    .btn-accent:disabled, .btn-accent.disabled {
        background-image: none;
        background-color: #D9B0C4;
        box-shadow: none;
    }

/* Erfolg: echtes Grün (nicht mehr gleich wie Primär) */
.btn-success {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--crb-success);
    --bs-btn-border-color: var(--crb-success);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--crb-success-hover);
    --bs-btn-hover-border-color: var(--crb-success-hover);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #0F5A3C;
    --bs-btn-active-border-color: #0F5A3C;
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #8CC5AC;
    --bs-btn-disabled-border-color: #8CC5AC;
    --bs-btn-focus-shadow-rgb: var(--crb-success-rgb);
}

.btn-secondary {
    --bs-btn-color: var(--crb-text);
    --bs-btn-bg: var(--crb-surface-alt);
    --bs-btn-border-color: var(--crb-border);
    --bs-btn-hover-color: var(--crb-text);
    --bs-btn-hover-bg: var(--crb-surface-sunken);
    --bs-btn-hover-border-color: var(--crb-border-strong);
    --bs-btn-active-color: var(--crb-text);
    --bs-btn-active-bg: var(--crb-border);
    --bs-btn-active-border-color: var(--crb-border-strong);
    --bs-btn-disabled-color: var(--crb-text-subtle);
    --bs-btn-disabled-bg: var(--crb-surface-alt);
    --bs-btn-disabled-border-color: var(--crb-border);
}

.btn-light {
    --bs-btn-color: var(--crb-text);
    --bs-btn-bg: var(--crb-surface);
    --bs-btn-border-color: var(--crb-border);
    --bs-btn-hover-color: var(--crb-primary);
    --bs-btn-hover-bg: var(--crb-primary-50);
    --bs-btn-hover-border-color: var(--crb-primary-100);
    --bs-btn-active-color: var(--crb-primary);
    --bs-btn-active-bg: var(--crb-primary-100);
    --bs-btn-active-border-color: var(--crb-primary-200);
    --bs-btn-disabled-color: var(--crb-text-subtle);
    --bs-btn-disabled-bg: var(--crb-surface);
    --bs-btn-disabled-border-color: var(--crb-border);
}

.btn-dark {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--crb-primary-pressed);
    --bs-btn-border-color: var(--crb-primary-pressed);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #070A16;
    --bs-btn-hover-border-color: #070A16;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #05070F;
    --bs-btn-active-border-color: #05070F;
}

.btn-info {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--crb-info);
    --bs-btn-border-color: var(--crb-info);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--crb-info-hover);
    --bs-btn-hover-border-color: var(--crb-info-hover);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #1A43A8;
    --bs-btn-active-border-color: #1A43A8;
}

.btn-warning {
    --bs-btn-color: var(--crb-text);
    --bs-btn-bg: var(--crb-warning);
    --bs-btn-border-color: var(--crb-warning);
    --bs-btn-hover-color: var(--crb-text);
    --bs-btn-hover-bg: #E8961A;
    --bs-btn-hover-border-color: #E8961A;
    --bs-btn-active-color: var(--crb-text);
    --bs-btn-active-bg: #D88812;
    --bs-btn-active-border-color: #D88812;
}

.btn-danger {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--crb-danger);
    --bs-btn-border-color: var(--crb-danger);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--crb-danger-hover);
    --bs-btn-hover-border-color: var(--crb-danger-hover);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #9E2629;
    --bs-btn-active-border-color: #9E2629;
    --bs-btn-focus-shadow-rgb: var(--crb-danger-rgb);
}

.btn-outline-primary {
    --bs-btn-color: var(--crb-primary);
    --bs-btn-bg: var(--crb-surface);
    --bs-btn-border-color: var(--crb-primary-200);
    --bs-btn-hover-color: var(--crb-primary);
    --bs-btn-hover-bg: var(--crb-primary-50);
    --bs-btn-hover-border-color: var(--crb-primary);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--crb-primary);
    --bs-btn-active-border-color: var(--crb-primary);
    --bs-btn-disabled-color: var(--crb-primary-300);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: var(--crb-primary-100);
    --bs-btn-focus-shadow-rgb: var(--crb-primary-rgb);
}

.btn-outline-success {
    --bs-btn-color: var(--crb-success);
    --bs-btn-border-color: #8CC5AC;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--crb-success);
    --bs-btn-hover-border-color: var(--crb-success);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--crb-success-hover);
    --bs-btn-active-border-color: var(--crb-success-hover);
}

.btn-outline-secondary, .btn-outline-dark, .btn-outline-info, .btn-outline-light {
    --bs-btn-color: var(--crb-text);
    --bs-btn-bg: var(--crb-surface);
    --bs-btn-border-color: var(--crb-border-strong);
    --bs-btn-hover-color: var(--crb-primary);
    --bs-btn-hover-bg: var(--crb-primary-50);
    --bs-btn-hover-border-color: var(--crb-primary-200);
    --bs-btn-active-color: var(--crb-primary);
    --bs-btn-active-bg: var(--crb-primary-100);
    --bs-btn-active-border-color: var(--crb-primary-300);
    --bs-btn-disabled-color: var(--crb-text-subtle);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: var(--crb-border);
}

.btn-outline-danger {
    --bs-btn-color: var(--crb-danger);
    --bs-btn-bg: transparent;
    --bs-btn-border-color: #F3BDBF;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--crb-danger);
    --bs-btn-hover-border-color: var(--crb-danger);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #9E2629;
    --bs-btn-active-border-color: #9E2629;
}

.btn-outline-warning {
    --bs-btn-color: var(--crb-warning-text);
    --bs-btn-border-color: var(--crb-warning);
    --bs-btn-hover-color: var(--crb-text);
    --bs-btn-hover-bg: var(--crb-warning);
    --bs-btn-hover-border-color: var(--crb-warning);
}

/* Heller Button auf dunklem Grund (Hero, CTA-Band) */
.btn-on-dark {
    --bs-btn-color: #fff;
    --bs-btn-bg: rgba(255, 255, 255, 0.1);
    --bs-btn-border-color: rgba(255, 255, 255, 0.35);
    --bs-btn-hover-color: var(--crb-primary);
    --bs-btn-hover-bg: #fff;
    --bs-btn-hover-border-color: #fff;
    --bs-btn-active-color: var(--crb-primary);
    --bs-btn-active-bg: #fff;
    --bs-btn-active-border-color: #fff;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

.btn-link {
    --bs-btn-color: var(--crb-violet-strong);
    --bs-btn-hover-color: var(--crb-primary);
    --bs-btn-active-color: var(--crb-primary);
    font-weight: 700;
}

/* Nur-Icon-Button */
.btn-icon {
    --bs-btn-padding-x: 0;
    --bs-btn-padding-y: 0;
    width: 2.75rem;
    height: 2.75rem;
    flex-shrink: 0;
}

    .btn-icon.btn-sm {
        width: 2.25rem;
        height: 2.25rem;
    }

.card {
    --bs-card-border-color: var(--crb-border);
    --bs-card-border-radius: var(--crb-radius-lg);
    --bs-card-inner-border-radius: calc(var(--crb-radius-lg) - 1px);
    --bs-card-bg: var(--crb-surface);
    --bs-card-cap-bg: var(--crb-surface-alt);
    --bs-card-spacer-y: 1.35rem;
    --bs-card-spacer-x: 1.35rem;
}

    /* .card border-0 wird oft als reiner Wrapper genutzt -> dort keinen Schatten */
    .card:not(.border-0) {
        box-shadow: var(--crb-shadow-sm);
    }

.card-title {
    font-family: var(--crb-font-heading);
    font-weight: 700;
}

.card-img-top {
    object-fit: cover;
}

.form-control, .form-select {
    border-color: var(--crb-border-strong);
    border-radius: var(--crb-radius-sm);
    background-color: var(--crb-surface);
    color: var(--crb-text);
    min-height: 2.875rem;
}

    .form-control-sm, .form-select-sm {
        min-height: calc(1.5em + 0.5rem + 2px);
    }

    textarea.form-control {
        min-height: 5rem;
    }

    .form-control:focus, .form-select:focus {
        border-color: var(--crb-violet);
        box-shadow: var(--crb-focus-ring);
    }

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

.form-check-input:focus {
    border-color: var(--crb-violet);
    box-shadow: var(--crb-focus-ring);
}

.form-switch .form-check-input:focus {
    --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%238E5CF7'/%3e%3c/svg%3e");
}

.form-label {
    font-weight: 700;
    font-size: var(--crb-fs-sm);
    color: var(--crb-text);
}

.form-text {
    color: var(--crb-text-muted);
}

.form-range::-webkit-slider-thumb { background-color: var(--crb-violet-strong); }
.form-range::-moz-range-thumb { background-color: var(--crb-violet-strong); }

.alert {
    --bs-alert-border-radius: var(--crb-radius-md);
    border-width: 1px;
}

.badge {
    --bs-badge-font-weight: 700;
    --bs-badge-border-radius: var(--crb-radius-pill);
    --bs-badge-padding-x: 0.65em;
    --bs-badge-padding-y: 0.4em;
}

.nav-tabs {
    --bs-nav-tabs-border-color: var(--crb-border);
    --bs-nav-tabs-link-hover-border-color: transparent transparent var(--crb-border);
    --bs-nav-tabs-link-active-color: var(--crb-primary);
    --bs-nav-tabs-link-active-bg: transparent;
    --bs-nav-tabs-link-active-border-color: transparent transparent var(--crb-accent-strong);
}

    .nav-tabs .nav-link {
        border-width: 0 0 3px 0;
        font-weight: 700;
        color: var(--crb-text-muted);
    }

.nav-pills {
    --bs-nav-pills-border-radius: var(--crb-radius-pill);
    --bs-nav-pills-link-active-bg: var(--crb-primary);
}

.nav-link {
    --bs-nav-link-color: var(--crb-text);
    --bs-nav-link-hover-color: var(--crb-primary);
}

.dropdown-menu {
    --bs-dropdown-border-color: var(--crb-border);
    --bs-dropdown-border-radius: var(--crb-radius-md);
    --bs-dropdown-box-shadow: var(--crb-shadow-lg);
    --bs-dropdown-link-hover-bg: var(--crb-primary-50);
    --bs-dropdown-link-active-bg: var(--crb-primary);
    --bs-dropdown-item-padding-y: 0.55rem;
    box-shadow: var(--crb-shadow-lg);
}

.modal {
    --bs-modal-border-radius: var(--crb-radius-lg);
    --bs-modal-border-color: transparent;
    --bs-modal-box-shadow: var(--crb-shadow-lg);
}

.offcanvas {
    --bs-offcanvas-bg: var(--crb-surface);
    --bs-offcanvas-border-color: var(--crb-border);
    --bs-offcanvas-box-shadow: var(--crb-shadow-lg);
}

.table {
    --bs-table-border-color: var(--crb-border);
    --bs-table-striped-bg: rgba(var(--crb-primary-rgb), 0.03);
    --bs-table-hover-bg: rgba(var(--crb-primary-rgb), 0.05);
    --bs-table-bg: transparent;
}

    .table > thead {
        font-family: var(--crb-font-heading);
        color: var(--crb-text-muted);
        font-size: var(--crb-fs-sm);
    }

.list-group {
    --bs-list-group-border-color: var(--crb-border);
    --bs-list-group-border-radius: var(--crb-radius-md);
    --bs-list-group-action-hover-bg: var(--crb-primary-50);
    --bs-list-group-active-bg: var(--crb-primary);
    --bs-list-group-active-border-color: var(--crb-primary);
}

.progress {
    --bs-progress-bg: var(--crb-surface-sunken);
    --bs-progress-bar-bg: var(--crb-violet-strong);
    --bs-progress-border-radius: var(--crb-radius-pill);
}

.accordion {
    --bs-accordion-border-color: var(--crb-border);
    --bs-accordion-border-radius: var(--crb-radius-md);
    --bs-accordion-inner-border-radius: calc(var(--crb-radius-md) - 1px);
    --bs-accordion-active-color: var(--crb-primary);
    --bs-accordion-active-bg: var(--crb-primary-50);
    --bs-accordion-btn-focus-box-shadow: var(--crb-focus-ring);
}

.pagination {
    --bs-pagination-color: var(--crb-primary);
    --bs-pagination-hover-color: var(--crb-primary);
    --bs-pagination-hover-bg: var(--crb-primary-50);
    --bs-pagination-active-bg: var(--crb-primary);
    --bs-pagination-active-border-color: var(--crb-primary);
    --bs-pagination-border-color: var(--crb-border);
}

.crb-pagination {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.35rem;
}

    .crb-pagination .btn {
        min-width: 2.75rem;
    }

.spinner-border, .spinner-grow {
    color: var(--crb-violet-strong);
}

.breadcrumb {
    --bs-breadcrumb-divider-color: var(--crb-text-subtle);
    --bs-breadcrumb-item-active-color: var(--crb-text-muted);
    font-size: var(--crb-fs-sm);
    font-weight: 600;
}

/* ==========================================================================
   Validierung / Blazor-Fehler
   ========================================================================== */
.valid.modified:not([type=checkbox]) {
    outline: 1px solid var(--crb-success);
}

.invalid {
    outline: 1px solid var(--crb-danger);
}

.validation-message {
    color: var(--crb-danger);
    font-size: var(--crb-fs-sm);
    margin-top: var(--crb-space-1);
}

/* ==========================================================================
   Mobile
   ========================================================================== */
@media (max-width: 767.98px) {
    /* iOS zoomt bei Inputs < 16px */
    input, select, textarea, .form-control, .form-select {
        font-size: 16px !important;
    }

    .btn {
        min-height: 44px;
    }

    .btn-sm {
        min-height: 36px;
    }

    .crb-section {
        padding-block: var(--crb-space-7);
    }

    .cw-dialog-body {
        padding: 1rem;
    }

    .modal-dialog {
        margin: 0.5rem;
    }

    .offcanvas.offcanvas-start, .offcanvas.offcanvas-end {
        width: 100vw;
        max-width: 100vw;
    }

    .table-responsive, .cw-grid-scroll {
        -webkit-overflow-scrolling: touch;
    }

    h1, .h1 {
        word-break: break-word;
        hyphens: auto;
    }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
    }

    .crb-reveal {
        opacity: 1;
        transform: none;
    }
}