:root {
    /* Primary & Secondary */
    --color-primary: #0f6ecd;
    --color-secondary: #333f5a;

    /* Backgrounds */
    --color-background: #ffffff;
    --color-background-secondary: #f0f0f0;
    --color-card: #f0f0f0;

    /* Text */
    --color-text-primary: #1e1f22;
    --color-text-secondary: #6b7280;
    --color-text-light: #f8fafc;
    --color-text-dark: #1e1f22;

    /* UI Elements */
    --color-lines-decent: #374151;
    --color-accent-1: #ff8c00; /* NEU */
    --color-accent-2: #a8d83a; /* Angepasst & NEU */
    --color-accent-3: #ff5733; /* NEU */

    /* Status Colors */
    --color-success: #28a745; /* NEU */
    --color-warning: #ffc107; /* NEU */
    --color-error: #dc3545; /* NEU */
}

.styleDark {
    /* Primary & Secondary */
    --color-primary: #44c0ea;
    --color-secondary: #333f5a;

    /* Backgrounds */
    --color-background: #1e1f22;
    --color-background-secondary: #2b2d30;
    --color-card: #2b2d30;

    /* Text */
    --color-text-primary: #e5e7eb;
    --color-text-secondary: #94a3b8;

    /* UI Elements */
    --color-lines-decent: #4a5568; /* Angepasst */
    --color-accent-1: #ff9a28; /* Angepasst & NEU */
    --color-accent-2: #a8d83a; /* Angepasst & NEU */
    --color-accent-3: #e02b8c; /* Angepasst & NEU */

    /* Status Colors */
    --color-success: #34c759; /* Angepasst & NEU */
    --color-warning: #ffcc00; /* Angepasst & NEU */
    --color-error: #ff3b30; /* Angepasst & NEU */
}
.header-gradient-border::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px; /* Die Dicke deines Randes */
    background: linear-gradient(to right, var(--color-primary), var(--color-secondary));
}

@layer utilities {
    .scrollbar::-webkit-scrollbar {
        width: 5px;
        height: 5px;
    }

    .scrollbar::-webkit-scrollbar-track {
        border-radius: 100vh;
        background:var(--color-background);
    }

    .scrollbar::-webkit-scrollbar-thumb {
        background: var(--color-card);
        border-radius: 4vh;
        border: 1px solid var(--color-background);
    }

    .scrollbar::-webkit-scrollbar-thumb:hover {
        background:var(--color-background);
    }
}
.jodit-add-new-line {
    display: none;
}
.tw-nav li{
    margin: 0;
}

@import url('https://rsms.me/inter/inter.css');
html {
    font-family: 'Inter', sans-serif;
}
h2{
    font-size: 1.7rem !important;
    font-weight: 100 !important;
}
/* Verbesserte Hervorhebung für aktive Tabs */
.tab-active, .tab-active:hover {
    background-color: #44c0ea; /* Blauer Hintergrund */
    color: #ffffff; /* Weißer Text */
    font-weight: 600; /* Schrift fetter machen (semibold) */
}

body {
    font-family: 'Inter', sans-serif;
}

/* Keyframes für die Ladeanimation */
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes counter-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(-360deg); } /* Gegenläufige Drehung */
}

/* Klassen für die Animation */
.animate-spin-slow {
    animation: spin 2s linear infinite;
}

.animate-counter-spin {
    animation: counter-spin 2s linear infinite; /* Auf das SVG angewendet */
}