/* styling/base.css
===== CSS RESET & BASE STYLES ===== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    background: #0a0a0a; /* NEU */
    scroll-behavior: smooth;
    overflow-x: hidden;
    overflow-y: auto;
}

body {
    font-family: 'Inter', sans-serif;
    background: #0a0a0a;
    background-attachment: fixed; /* NEU */
    color: #e0e0e0;
    line-height: 1.7;
    overflow-x: hidden;
}

/* ===== SCROLLBAR STYLING ===== */
::-webkit-scrollbar {
    width: 12px;
}

::-webkit-scrollbar-track {
    background: #1a1a1a;
    border-radius: 6px;
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(to bottom, #66dd66, #66aaff);
    border-radius: 6px;
    border: 2px solid #1a1a1a;
}

::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(to bottom, #88ff88, #88ccff);
}

html {
    scrollbar-width: thin;
    scrollbar-color: #66dd66 #1a1a1a;
}

/* ===== CSS VARIABLES ===== */
:root {
    --primary-green: #66dd66;
    --primary-blue: #66aaff;
    --primary-orange: #ffaa00;
    --dark-bg: #0a0a0a;
    --card-bg: rgba(26, 26, 46, 0.6);
    --border-color: rgba(102, 221, 102, 0.2);
    --text-primary: #e0e0e0;
    --text-secondary: #ccc;
    --text-muted: #888;
}

/* In base.css hinzufügen */
@media (max-width: 768px) {
    .header-content {
        padding: 0 1rem;
        flex-direction: column;
        gap: 1rem;
    }
    
    .main-content {
        padding: 2rem 1rem;
    }
}