:root {
    --primary-color: #3498db;
    --secondary-color: #2ecc71;
    --background-color: #f4f4f4;
    --text-color: black;
    --highlight-color: #e74c3c;
    --nav-background: rgba(255, 255, 255, 0.8);
    --nav-background-scrolled: rgba(255, 255, 255, 1);
    --border-radius: 8px;
    --bg: #0b0e12;
    --card: #14171b;
    --muted: #9aa4b2;
    --text: #e7eef7;
    --accent: #7dd3fc; /* helles cyan */
    --accent-2: #9b8cff; /* helle lila */
    --glass: rgba(255,255,255,0.04);
    --glass-strong: rgba(255,255,255,0.08);
    --shadow: 0 12px 40px rgba(0,0,0,0.5);
    --radius: 16px;

    /* Gradient background variables */
    --grad-a: #0ea5e9;    /* blau */
    --grad-b: #7dd3fc;    /* helles cyan */
    --grad-c: #9b8cff;    /* lila */
    --grad-d: #6b21a8;    /* dunkleres lila */
    --gradient-duration: 22s; /* langsam und dezent */
    --gradient-opacity: 0.9;

    --container: 980px;
    --space-1: 8px;
    --space-2: 12px;
    --space-3: 18px;
    --space-4: 24px;
    --space-5: 36px;
    --space-6: 56px;
}