:root {
    --color-primary: #0f6ecd;
    --color-secondary: #333f5a;
    --color-background: #ffffff; /* Weiß für Hellmodus Hintergrund */
    --color-background-secondary: #f0f0f0; /* Weiß für Hellmodus Hintergrund */
    --color-card: #f0f0f0;      /* Hellgrau für Karten */
    --color-text-primary: #1e1f22; /* Dunkler Text für Hellmodus */
    --color-text-dark: #1e1f22;
    --color-text-light: #f8fafc;
    --color-lines-decent: #374151;
    --color-text-secondary: #646464; /* Mittlerer Text */
    --color-text-secondary-2: #6b7280; /* Mittlerer Text */
}

/* Dark Theme - überschreibt die Variablen, wenn die Klasse 'styleDark' vorhanden ist */
.styleDark {
    --color-primary: #44c0ea;
    --color-secondary: #333f5a;
    --color-background: #1e1f22;
    --color-background-secondary: #2b2d30; /* Weiß für Hellmodus Hintergrund */
    --color-card: #2b2d30;
    --color-lines-decent: #374151;
    --color-text-primary: #f8fafc;
    --color-text-light: #f8fafc;
    --color-text-dark: #1e1f22;
    --color-text-secondary: #94a3b8;
    --color-text-secondary-2: #98989c; /* Mittlerer Text */
}


@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);
    }
}

.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) */
}