/* style.css */

:root {
    --glass-bg: rgba(17, 24, 39, 0.7);
    --glass-border: rgba(255, 255, 255, 0.1);
}

/* Grundschriftart & Hintergrund */
body {
    margin: 0;
    font-family: 'Inter', sans-serif;
    /* Der coole Hintergrund-Verlauf, den du hinzugefügt hast: */
    background-color: #111827; /* Fallback Farbe */
    background-image:
        radial-gradient(circle at 20% 30%, rgba(138, 43, 226, 0.4) 0%, transparent 40%),
        radial-gradient(circle at 80% 70%, rgba(59, 130, 246, 0.2) 0%, transparent 40%);
    background-attachment: fixed;
    color: #e5e7eb; /* text-gray-200 */
    min-height: 100vh;
    /* WICHTIG: Kein "display: flex" hier, das macht Tailwind im HTML! */
    overflow-y: auto; /* Erzwingt Scrollbar falls nötig */
}

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #111827; 
}

::-webkit-scrollbar-thumb {
    background: #374151; 
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #4b5563; 
}

/* Glass Effekt Header */
.glass-header-bg {
    background: var(--glass-bg);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--glass-border);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    width: 100%;
    height: 100%;
}