:root {
    /* Hauptfarbe – Blau */
    --color-primary: #6e9dc6;
    --color-primary-light: #a4c3de;
    --color-primary-dark: #4b7192;
    --color-primary-very-dark: #2f3e4d;
    --color-primary-text: #ffffff;
    --color-primary-hover: #5e8ab0;
    /* Sekundärfarbe – ruhiges Grau-Blau */
    --color-secondary: #ffffff;
    --color-secondary-hover: #a4c3de;
    --color-secondary-text: #1e293b;
    --color-secondary-border: #5b6e87;
    /* Hintergrundfarben */
    --color-background: #f9fafb;
    --color-surface: #ffffff;
    --color-surface-alt: #f1f5f9;
    /* Textfarben */
    --color-text: #1e293b; /* fast schwarz-blau */
    --color-text-muted: #64748b; /* blaugrau */
    --color-text-inverse: #ffffff;
    /* Statusfarben */
    --color-success: #3cb371; /* mediumseagreen */
    --color-warning: #eab308; /* warmes Gelb */
    --color-danger: #dc2626; /* starkes Rot */
    --color-info: #3b82f6; /* reines Informationsblau */
    /* Rahmen & Schatten */
    --color-border: #e2e8f0;
    --color-shadow: rgba(0, 0, 0, 0.05);
    --font-size-base: 1rem; /* 16px */
    --font-size-lead: 1.25rem; /* 20px */
    --font-size-small: 0.875rem; /* 14px */
    --font-size-smaller: 0.75rem; /* 12px */
    --font-size-very-small: 0.625rem; /* 10px */
    --line-height-base: 1.6;
    --font-weight-bold: 600;
    --font-weight-normal: 400;
    --border-radius: 0.3rem;
    /*ICONS*/
    --color-icon-primary: #808080;
    --color-component-border: #d9d9d9;
}
/* width */
::-webkit-scrollbar {
    width: 5px;
    height: 5px;
}

/* Track */
::-webkit-scrollbar-track {
    background: #f2f2f2;
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: var(--color-primary-dark);
    cursor: pointer;
}

    /* Handle on hover */
    ::-webkit-scrollbar-thumb:hover {
        background: var(--color-primary-hover);
    }