@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap');
        /* --- Globale Stile --- */
        /* Scroll-Leisten ausblenden, aber Funktionalität beibehalten */
        ::-webkit-scrollbar {
            display: none; /* Für Webkit-Browser (Chrome, Safari, etc.) */
        }
        body, html {
            scrollbar-width: none; /* Für Firefox */
        }
        body {
            font-family: 'Inter', sans-serif;
            /* background-color: #0c0a09; -> moved to body class */
            /* color: #e5e7eb; -> moved to body class */
        }
        .header-bg {
            background-color: #3b0764;
        }
        .content-box {
            background-color: #1a1b1e;
            border: 1px solid #4b5563;
            padding: 0.5rem;
            border-radius: 0;
            transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }
        .content-box:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 10px rgba(0, 0, 0, 0.2);
        }
        .list-container {
            overflow-y: hidden;
            height: 100%;
        }
        .alert-item {
            padding: 0; /* Padding wird jetzt direkt auf die Spalten-Elemente angewendet */
            border-bottom: 1px solid #374151; /* Tailwind gray-700 */
        }
        .alert-item:last-child {
            border-bottom: none;
        }
        .hoverable-row:hover {
            background-color: #44403c; /* bg-stone-700 */
        }
        .traffic-light {
            width: 2rem;
            height: 2rem;
        }
        .section-header {
            border-bottom: 2px solid #4b5563;
            padding-bottom: 0.1rem; /* Weniger Abstand */
            margin-bottom: 0.2rem; /* Weniger Abstand */
        }
        @keyframes blink {
            50% {
                opacity: 0.5;
            }
        }
        .blinking {
            animation: blink 1s infinite;
        }
        @keyframes pulse-bg {
            0% { background-color: rgba(59, 7, 100, 0.3); } /* violet-900 with opacity */
            50% { background-color: rgba(59, 7, 100, 0.6); }
            100% { background-color: rgba(59, 7, 100, 0.3); }
        }
        .pulse-bg-animation {
            animation: pulse-bg 2s infinite;
        }
        .light-mode .pulse-bg-animation {
            animation-name: pulse-bg-light;
        }
        @keyframes pulse-bg-light {
            0% { background-color: rgba(139, 92, 246, 0.15); } /* violet-500 with opacity */
            50% { background-color: rgba(139, 92, 246, 0.3); }
            100% { background-color: rgba(139, 92, 246, 0.15); }
        }
        @keyframes blink-light {
            50% {
                opacity: 0.6;
            }
        }
        .calendar {
            width: 100%;
        }
        .calendar-grid {
            display: grid;
            /* KW Spalte + 7 Tage */
            grid-template-columns: 2em repeat(7, 1fr);
            text-align: center;
            gap: 0.1rem;
            align-items: center;
        }
        .calendar-day {
            display: flex;
            justify-content: center;
            align-items: center;
            aspect-ratio: 1 / 1;
        }
        .current-day {
            background-color: #3b0764; /* header-bg color */
            color: white;
            font-weight: bold;
            border-radius: 9999px; /* rounded-full */
        }
        .holiday {
            color: #f59e0b; /* amber-500 */
            font-weight: bold;
        }
        .loader {
            border: 4px solid #4b5563; /* gray-600 */
            border-top: 4px solid #a78bfa; /* violet-400 */
            border-radius: 50%;
            width: 32px;
            height: 32px;
            animation: spin 1s linear infinite;
        }
        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
        /* Light Mode Overrides */
        .light-mode {
            background-color: #f9fafb; /* bg-gray-50 */
            color: #111827; /* text-gray-900 */
        }
        .light-mode .bg-stone-900 { background-color: #f9fafb !important; }
        .light-mode .bg-stone-950 { background-color: #f3f4f6 !important; } /* bg-gray-100 */
        .light-mode .bg-stone-800 { background-color: #e5e7eb !important; } /* bg-gray-200 */
        .light-mode .text-stone-200 { color: #111827 !important; } /* text-gray-900 */
        .light-mode .content-box {
            background-color: #ffffff !important;
            border-color: #e5e7eb !important; /* border-gray-200 */
        }
        .light-mode .alert-item { border-bottom-color: #e5e7eb !important; }
        .light-mode .section-header { border-bottom-color: #d1d5db !important; } /* border-gray-300 */
        .light-mode .loader {
            border-color: #e5e7eb !important; /* border-gray-200 */
            border-top-color: #8b5cf6 !important; /* violet-500 */
        }
        .light-mode .hoverable-row:hover {
            background-color: #f3f4f6; /* bg-gray-100 */
        }
        .light-mode .text-gray-300 { color: #374151 !important; } /* text-gray-700 */
        .light-mode .text-gray-400 { color: #4b5563 !important; } /* text-gray-600 */
        .light-mode .text-gray-500 { color: #6b7280 !important; } /* text-gray-500 */
        .light-mode .text-red-400 { color: #dc2626 !important; } /* text-red-600 */
        .light-mode .text-green-400 { color: #16a34a !important; } /* text-green-600 */
        .light-mode .text-yellow-400 { color: #f59e0b !important; } /* text-yellow-500 */
        .light-mode .holiday { color: #d97706 !important; } /* amber-600 */
        .light-mode #theme-toggle { color: #6b7280; }
        .light-mode #theme-toggle:hover { background-color: #e5e7eb; }
        .light-mode #theme-toggle:focus { --tw-ring-color: #d1d5db; }
        .light-mode .blinking {
            animation-name: blink-light;
        }
        .light-mode .filter-select {
            background-color: #f3f4f6; /* bg-gray-100 */
            color: #1f2937; /* text-gray-800 */
            border-color: #d1d5db; /* border-gray-300 */
        }
        /* Styles for collapsible sections on mobile */
        @media (max-width: 767px) { /* Below md breakpoint */
            .section-header {
                cursor: pointer;
            }
            .section-content-wrapper.is-collapsed {
                display: none;
            }
        }
        .collapse-icon {
            transition: transform 0.2s ease-in-out;
        }
        .section-header.is-collapsed .collapse-icon {
            transform: rotate(-90deg);
        }
        /* TV-Ansicht für große Bildschirme / Lesbarkeit aus der Ferne */
        /* Aktiviert durch URL-Parameter ?view=tv */
        .tv-mode {
            --tv-text-sm: 1.25rem;    /* 20px */
            --tv-text-base: 1.5rem;   /* 24px */
            --tv-text-lg: 1.875rem;  /* 30px */
            --tv-text-xl: 2.25rem;   /* 36px */
            --tv-text-2xl: 2.75rem;  /* 44px */
            --tv-text-3xl: 3.5rem;   /* 56px */
        }
        /* NEU: Hochkontrast-Farbvariablen für den TV-Modus */
        .tv-mode.dark {
            --tv-bg-body: #000000; /* Reiner Schwarz-Hintergrund */
            --tv-bg-content: #111111; /* Dunkelgrau für Inhaltsboxen */
            --tv-bg-header: #111111; /* Dunkelgrau für Header */
            --tv-border-color: #333333; /* Dunkelgrau für Ränder */
            --tv-text-primary: #ffffff; /* Reines Weiß für Haupttext */
            --tv-text-secondary: #bbbbbb; /* Helles Grau für Sekundärtext */
            --tv-text-muted: #888888; /* Gedämpftes Grau für tertiären Text */
            --tv-color-red: #ff5555; /* Leuchtendes Rot */
            --tv-color-yellow: #ffff55; /* Leuchtendes Gelb */
            --tv-color-green: #55ff55; /* Leuchtendes Grün */
            --tv-color-violet: #d8b4fe; /* Leuchtendes Violett (Tailwind violet-300) */
        }
        /* NEU: Überschreiben der Standardfarben im TV-Modus */
        .tv-mode.dark body { background-color: var(--tv-bg-body); color: var(--tv-text-primary); }
        .tv-mode.dark .content-box { background-color: var(--tv-bg-content); border-color: var(--tv-border-color); }
        .tv-mode.dark .header-bg { background-color: var(--tv-bg-header); }
        .tv-mode.dark .text-red-400 { color: var(--tv-color-red) !important; }
        .tv-mode.dark .text-yellow-400 { color: var(--tv-color-yellow) !important; }
        .tv-mode.dark .text-green-400 { color: var(--tv-color-green) !important; }
        .tv-mode.dark .text-gray-400 { color: var(--tv-text-secondary) !important; }
        .tv-mode.dark .text-gray-500 { color: var(--tv-text-muted) !important; }
        .tv-mode.dark .text-violet-400 { color: var(--tv-color-violet) !important; }

        /* Am Anfang der Datei */
        :root {
            color-scheme: light dark;
        }

        /* Dark mode Grundfarben */
        .dark {
            --bg-primary: #1a1a1a;
            --text-primary: #ffffff;
        }

        /* Light mode Grundfarben */
        :root:not(.dark) {
            --bg-primary: #ffffff;
            --text-primary: #1a1a1a;
        }

        /* Dark mode styles */
        .dark body {
            background-color: rgb(28, 25, 23);
            color: rgb(255, 255, 255);
        }

        .dark .content-box {
            background-color: rgb(41, 37, 36);
        }

        .dark .header-bg {
            background-color: rgb(28, 25, 23);
        }
        /* Styles for the tab buttons in modals */
        .tab-button-inner {
            @apply py-2 px-3 text-sm font-medium text-gray-400 hover:text-white focus:outline-none;
        }
        
        .tab-button-inner.active {
            @apply border-b-2 border-violet-500 text-white;
        }
        
        /* Styles for the prose content within the modal */
        .prose {
            /* Default light mode styles */
            color: #374151; /* gray-700 */
        }
        
        .dark .prose {
            /* Dark mode styles */
            color: #D1D5DB; /* gray-300 */
        }
        
        .prose pre {
            @apply bg-stone-800 text-white p-3 rounded-md overflow-x-auto;
        }
        
        .dark .prose pre {
            @apply bg-stone-950;
        }
        
        .prose code {
            @apply bg-gray-200 text-gray-800 px-1 py-0.5 rounded;
        }
        
        .dark .prose code {
            @apply bg-gray-700 text-gray-200;
        }