/*!
 *      __  ____  
 *     / / |___ \ 
 *    / /    __) |
 *   < <    |_ Wetter-Puls
 *    \ \   ___) |
 *     \_\ |____/ 
 *
 *  (c) 2025-2026 Daniel Frey | https://wetter-puls.de
 *  Author:  Daniel Frey <daniel@dan.jetzt>
 *  License: Proprietary & Confidential - All Rights Reserved
 */

[data-bs-theme="dark"] select option,
.bg-dark option {
            background-color: #212529 !important;
            color: #f8f9fa !important;
        }
        body {
            font-family: 'K2D', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
            font-weight: 400;
        }
        .card-header, .widget-header, .widget-title, .badge {
            font-weight: 600;
        }
        h1, h2, h3, h4, h5, h6 {
            font-weight: 700;
        }
        .navbar-brand, .hero-val, .hero-metric, .stat-value {
            font-weight: 800 !important;
        }
        body, header, .card, .form-control, .form-select, .input-group-text, footer {
            transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
        }
        
        html[data-theme="dark"] {
            color-scheme: dark;
        }
        html[data-theme="dark"] body {
            background-color: #0b0f19 !important;
            color: #e2e8f0;
        }
        html[data-theme="dark"] .card,
        html[data-theme="dark"] .card.bg-dark {
            background-color: rgba(20, 20, 20, 0.6) !important;
            backdrop-filter: blur(20px) saturate(180%);
            -webkit-backdrop-filter: blur(20px) saturate(180%);
            border: 1px solid rgba(255, 255, 255, 0.06) !important;
            box-shadow: 0 15px 45px 0 rgba(0, 0, 0, 0.35) !important;
        }
        html[data-theme="dark"] .card-header {
            background-color: rgba(0, 0, 0, 0.25) !important;
            border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
        }
        html[data-theme="dark"] .card-footer {
            background-color: rgba(0, 0, 0, 0.25) !important;
            border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
        }
        
        /* Härtung & Veredelung der Formulare (Dark Mode) */
        .form-control, .form-select {
            background-color: rgba(255, 255, 255, 0.03) !important;
            color: #e9ecef !important;
            border: 1px solid rgba(255, 255, 255, 0.12) !important;
            border-radius: 10px !important;
            box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15) !important;
            transition: all 0.2s ease-in-out !important;
        }
        .form-control:focus, .form-select:focus {
            background-color: rgba(255, 255, 255, 0.05) !important;
            border-color: rgba(0, 168, 255, 0.6) !important;
            box-shadow: 0 0 0 3px rgba(0, 168, 255, 0.25), inset 0 1px 2px rgba(0, 0, 0, 0.15) !important;
        }
        
        /* ===================================================
           ECHTER LIGHT-MODE (High Contrast & Clean Glass)
           =================================================== */

        /* Sanfter, heller Hintergrund statt Knallblau */
        html[data-theme="light"] body {
            background: linear-gradient(135deg, #e6eef9 0%, #cfdef3 100%);
            background-attachment: fixed;
            color: #2e2d2d;
        }

        /* Schwarze Text-Härtung für alle Überschriften */
        html[data-theme="light"] h1, 
        html[data-theme="light"] h2, 
        html[data-theme="light"] h3, 
        html[data-theme="light"] h4, 
        html[data-theme="light"] h5, 
        html[data-theme="light"] h6 {
            color: #1a1a1a !important;
        }

        /* WICHTIG: Die .text-light Klasse im Light-Mode ins Gegenteil umkehren */
        html[data-theme="light"] .text-light {
            color: #2e2d2d !important;
        }
        html[data-theme="light"] .text-muted {
            color: #6c757d !important;
        }
        html[data-theme="light"] .link-secondary {
            color: #495057 !important;
        }
        html[data-theme="light"] .link-secondary:hover {
            color: #1a1a1a !important;
        }

        /* Helle Glaskarten mit dunkler Schrift */
        html[data-theme="light"] .card,
        html[data-theme="light"] .card.bg-dark {
            background: rgba(255, 255, 255, 0.75) !important;
            backdrop-filter: blur(25px) saturate(180%);
            -webkit-backdrop-filter: blur(25px) saturate(180%);
            border: 1px solid rgba(0, 0, 0, 0.1) !important;
            color: #2e2d2d !important;
            box-shadow: 0 10px 30px 0 rgba(0, 0, 0, 0.05) !important;
        }
        html[data-theme="light"] .card h1,
        html[data-theme="light"] .card h2,
        html[data-theme="light"] .card h3,
        html[data-theme="light"] .card h4,
        html[data-theme="light"] .card h5,
        html[data-theme="light"] .card h6,
        html[data-theme="light"] .card .fw-bold,
        html[data-theme="light"] .card .alert-heading {
            color: #1a1a1a !important;
        }
        html[data-theme="light"] .card .text-light {
            color: #2e2d2d !important;
        }
        html[data-theme="light"] .card .text-muted {
            color: #6c757d !important;
        }

        /* Card-Header und Footer leicht absetzen */
        html[data-theme="light"] .card-header,
        html[data-theme="light"] .card-footer {
            background: rgba(0, 0, 0, 0.04) !important;
            border-color: rgba(0, 0, 0, 0.08) !important;
            color: #1a1a1a !important;
        }

        html[data-theme="light"] .card-header * {
            color: #1a1a1a !important;
        }

        /* Navbar Oben */
        html[data-theme="light"] header.navbar {
            background: rgba(255, 255, 255, 0.85) !important;
            backdrop-filter: blur(15px);
            -webkit-backdrop-filter: blur(15px);
            border-bottom: 1px solid rgba(0, 0, 0, 0.1) !important;
        }
        html[data-theme="light"] .nav-pills .nav-link {
            color: #2e2d2d !important;
        }
        html[data-theme="light"] .nav-pills .nav-link.active {
            background-color: rgba(0, 0, 0, 0.08) !important;
            color: #1a1a1a !important;
            border: 1px solid rgba(0, 0, 0, 0.12) !important;
        }

        /* Formulare und Inputs im Light-Mode invertieren */
        html[data-theme="light"] .form-control,
        html[data-theme="light"] .form-select,
        html[data-theme="light"] .input-group-text {
            background-color: rgba(255, 255, 255, 0.9) !important;
            color: #2e2d2d !important;
            border-color: rgba(0, 0, 0, 0.15) !important;
        }
        html[data-theme="light"] .form-control:focus,
        html[data-theme="light"] .form-select:focus {
            background-color: #ffffff !important;
            border-color: rgba(0, 168, 255, 0.6) !important;
            box-shadow: 0 0 0 3px rgba(0, 168, 255, 0.2), inset 0 1px 2px rgba(0, 0, 0, 0.05) !important;
        }
        html[data-theme="light"] .form-control::placeholder {
            color: #888 !important;
        }
        html[data-theme="light"] .form-select option {
            background-color: #fff !important;
            color: #2e2d2d !important;
        }

        /* Das Warnungs-Widget (DWD Warnungen) zwingend lesbar machen */
        html[data-theme="light"] .widget-warn-card {
            background-color: rgba(255, 255, 255, 0.6) !important;
            color: #2e2d2d !important;
            border: 1px solid rgba(0, 0, 0, 0.1) !important;
        }

        /* Dropdowns im Top-Menü anpassen */
        html[data-theme="light"] .dropdown-menu-dark {
            background-color: rgba(255, 255, 255, 0.95) !important;
            border-color: rgba(0, 0, 0, 0.1) !important;
        }
        html[data-theme="light"] .dropdown-item.text-light {
            color: #2e2d2d !important;
        }
        html[data-theme="light"] .dropdown-item:hover {
            background-color: #e0eafc !important;
        }

        /* Zusätzliche Anpassungen für die allgemeine Lesbarkeit */
        html[data-theme="light"] .alert-info {
            background-color: rgba(0, 168, 255, 0.1) !important;
            color: #0066cc !important;
            border: 1px solid rgba(0, 168, 255, 0.2) !important;
        }
        html[data-theme="light"] footer {
            border-top: 1px solid rgba(0, 0, 0, 0.08) !important;
        }
        html[data-theme="light"] footer .text-muted {
            color: #6c757d !important;
        }
        html[data-theme="light"] #crowdMapOverlay {
            background: rgba(230, 238, 249, 0.95) !important;
        }
        html[data-theme="light"] .bg-dark:not(.card) {
            background-color: rgba(0, 0, 0, 0.04) !important;
        }
        html[data-theme="light"] .list-group-item.bg-dark {
            background-color: rgba(0, 0, 0, 0.03) !important;
            color: #2e2d2d !important;
            border-color: rgba(0, 0, 0, 0.08) !important;
        }
        html[data-theme="light"] .border-secondary {
            border-color: rgba(0, 0, 0, 0.1) !important;
        }

        /* Anpassungen für die PLZ-Kapsel im hellen Design */
        html[data-theme="light"] .header-plz-capsule {
            background: rgba(0, 0, 0, 0.03) !important;
            border: 1px solid rgba(0, 0, 0, 0.1) !important;
            box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05), 0 4px 12px rgba(0, 0, 0, 0.02) !important;
        }
        html[data-theme="light"] .header-plz-capsule:hover {
            background: rgba(0, 0, 0, 0.05) !important;
            border-color: rgba(0, 0, 0, 0.15) !important;
        }
        html[data-theme="light"] .header-plz-capsule:focus-within {
            background: #fff !important;
            border-color: rgba(0, 168, 255, 0.5) !important;
            box-shadow: 0 0 10px rgba(0, 168, 255, 0.15) !important;
        }
        html[data-theme="light"] .header-plz-label,
        html[data-theme="light"] .header-plz-label i {
            color: #2e2d2d !important;
        }
        html[data-theme="light"] .header-plz-input {
            color: #2e2d2d !important;
        }
        html[data-theme="light"] .header-plz-input::placeholder {
            color: #888 !important;
        }

        /* Admin-Bereich Anpassungen für Hell-Design */
        html[data-theme="light"] .admin-container .card.bg-dark {
            background: rgba(255, 255, 255, 0.8) !important;
            color: #333 !important;
            border-color: rgba(0, 0, 0, 0.1) !important;
            box-shadow: 0 4px 30px rgba(0, 0, 0, 0.05) !important;
            backdrop-filter: blur(10px);
        }
        html[data-theme="light"] .admin-container .card.bg-dark h2,
        html[data-theme="light"] .admin-container .card.bg-dark h3,
        html[data-theme="light"] .admin-container .card.bg-dark h4,
        html[data-theme="light"] .admin-container .card.bg-dark .text-light,
        html[data-theme="light"] .admin-container .card.bg-dark label {
            color: #2c3e50 !important;
        }
        html[data-theme="light"] .admin-container .card.bg-dark .border-secondary {
            border-color: rgba(0, 0, 0, 0.1) !important;
        }
        html[data-theme="light"] .admin-container .module-item {
            background: rgba(0, 0, 0, 0.03) !important;
            border-color: rgba(0, 0, 0, 0.1) !important;
        }
        html[data-theme="light"] .admin-container .module-item input.form-control,
        html[data-theme="light"] .admin-container .module-item select.module-type {
            background-color: #fff !important;
            color: #333 !important;
            border-color: rgba(0, 0, 0, 0.15) !important;
        }
        html[data-theme="light"] .admin-container .module-item input.form-control::placeholder {
            color: #888 !important;
        }
        html[data-theme="light"] .admin-container .module-item select.module-type option {
            background-color: #fff !important;
            color: #333 !important;
        }
        html[data-theme="light"] .admin-container #adminLogsContainer {
            background-color: #f8f9fa !important;
            color: #2c3e50 !important;
        }
        html[data-theme="light"] .admin-container .bg-black {
            background-color: rgba(0, 0, 0, 0.05) !important;
        }
        
        /* Admin-Bereich Tabellen-Overrides für Light-Mode */
        html[data-theme="light"] .admin-container .table-dark {
            --bs-table-bg: rgba(255, 255, 255, 0.3) !important;
            --bs-table-color: #2c3e50 !important;
            --bs-table-border-color: rgba(0, 0, 0, 0.1) !important;
            --bs-table-hover-bg: rgba(0, 0, 0, 0.05) !important;
            --bs-table-hover-color: #1e272e !important;
            color: #2c3e50 !important;
        }
        html[data-theme="light"] .admin-container .table-dark th,
        html[data-theme="light"] .admin-container .table-dark td {
            background-color: transparent !important;
            color: #2c3e50 !important;
            border-color: rgba(0, 0, 0, 0.1) !important;
        }
        html[data-theme="light"] .admin-container .table-dark thead th {
            color: #1e272e !important;
            border-bottom: 2px solid rgba(0, 0, 0, 0.1) !important;
        }
        html[data-theme="light"] .admin-container .table-dark .text-light,
        html[data-theme="light"] .admin-container .table-dark td.text-light {
            color: #2c3e50 !important;
        }
        html[data-theme="light"] .admin-container .table-dark .text-muted,
        html[data-theme="light"] .admin-container .table-dark td.text-muted {
            color: #57606f !important;
        }
        html[data-theme="light"] .admin-container .table-dark .text-secondary,
        html[data-theme="light"] .admin-container .table-dark td.text-secondary {
            color: #747d8c !important;
        }
        html[data-theme="light"] .admin-container .table-dark a.text-light {
            color: #1e272e !important;
        }
        html[data-theme="light"] .admin-container .table-dark a.text-light:hover {
            color: #00a8ff !important;
        }
        html[data-theme="light"] .admin-container .table-dark .btn-link.text-danger {
            color: #d63031 !important;
        }
        html[data-theme="light"] .admin-container .table-dark .font-monospace {
            color: #2f3542 !important;
        }
        html[data-theme="light"] .admin-container .table-dark td.font-monospace.text-info {
            color: #0984e3 !important;
        }
        
        .form-control:disabled,
        .form-select:disabled,
        .form-check-input:disabled {
            opacity: 0.55 !important;
            cursor: not-allowed !important;
        }
        html[data-theme="light"] .form-control:disabled,
        html[data-theme="light"] .form-select:disabled {
            color: rgba(255, 255, 255, 0.45) !important;
            background-color: rgba(255, 255, 255, 0.05) !important;
        }
        html[data-theme="light"] .info-control {
            background: rgba(255, 255, 255, 0.8) !important;
            color: #333 !important;
            border: 1px solid rgba(255, 255, 255, 0.3) !important;
        }
        html[data-theme="light"] .leaflet-popup-content-wrapper {
            background: rgba(255, 255, 255, 0.95) !important;
            color: #333 !important;
            border: 1px solid rgba(255, 255, 255, 0.2) !important;
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
        }
        html[data-theme="light"] .leaflet-popup-tip {
            background: rgba(255, 255, 255, 0.95) !important;
        }
        html[data-theme="light"] .dwd-popup-header {
            background: rgba(0, 0, 0, 0.05) !important;
            color: #111 !important;
            border-bottom: 1px solid rgba(0, 0, 0, 0.1) !important;
        }
        html[data-theme="light"] .dwd-warn-item {
            border-bottom: 1px solid rgba(0, 0, 0, 0.1) !important;
        }
        .logo-container { width: 58px; height: 58px; position: relative; margin-right: 0; display: flex; align-items: center; justify-content: center; }
        .logo { position: absolute; top:0; left:0; width:100%; height:100%; background-size: contain; background-repeat: no-repeat; background-position: center center; }
        .logo-main { z-index: 10; }
        .bg-level-1 { background-color: #ffeb3b; color: #000; } .bg-level-2 { background-color: #fb8c00; color: #000; } .bg-level-3 { background-color: #e53935; color: #fff; } .bg-level-4 { background-color: #880e4f; color: #fff; }
        .info-control { background: rgba(0,0,0,0.7); color: #fff; padding: 5px; border-radius: 4px; font-size: 0.8rem; }
        .leaflet-popup-content-wrapper { background: #222; color: #eee; border-radius: 6px; border: 1px solid #444; }
        .leaflet-popup-tip { background: #222; border: 1px solid #444; border-top: none; border-left: none; }
        .leaflet-popup-content { margin: 0; min-width: 260px; max-width: 320px; max-height: 400px; overflow-y: auto; font-size: 13px; }
        
        /* MapLibre Popup Custom Styling */
        .maplibregl-popup-content {
            background: #222 !important;
            color: #eee !important;
            border-radius: 8px !important;
            border: 1px solid #444 !important;
            padding: 0 !important;
            box-shadow: 0 4px 15px rgba(0,0,0,0.5) !important;
            font-size: 13px !important;
            overflow: hidden !important;
        }
        .maplibregl-popup-close-button {
            color: #fff !important;
            padding: 4px 8px !important;
            font-size: 16px !important;
            outline: none !important;
            border: none !important;
            background: none !important;
        }
        .maplibregl-popup-close-button:hover {
            background-color: rgba(255,255,255,0.1) !important;
        }
        .maplibregl-popup-anchor-top .maplibregl-popup-tip { border-bottom-color: #222 !important; }
        .maplibregl-popup-anchor-bottom .maplibregl-popup-tip { border-top-color: #222 !important; }
        .maplibregl-popup-anchor-left .maplibregl-popup-tip { border-right-color: #222 !important; }
        .maplibregl-popup-anchor-right .maplibregl-popup-tip { border-left-color: #222 !important; }
        .maplibregl-popup-anchor-top-left .maplibregl-popup-tip { border-bottom-color: #222 !important; }
        .maplibregl-popup-anchor-top-right .maplibregl-popup-tip { border-bottom-color: #222 !important; }
        .maplibregl-popup-anchor-bottom-left .maplibregl-popup-tip { border-top-color: #222 !important; }
        .maplibregl-popup-anchor-bottom-right .maplibregl-popup-tip { border-top-color: #222 !important; }

        html[data-theme="light"] .maplibregl-popup-content {
            background: rgba(255, 255, 255, 0.95) !important;
            color: #333 !important;
            border: 1px solid rgba(0, 0, 0, 0.15) !important;
            box-shadow: 0 4px 15px rgba(0,0,0,0.15) !important;
        }
        html[data-theme="light"] .maplibregl-popup-close-button {
            color: #333 !important;
        }
        html[data-theme="light"] .maplibregl-popup-anchor-top .maplibregl-popup-tip { border-bottom-color: rgba(255, 255, 255, 0.95) !important; }
        html[data-theme="light"] .maplibregl-popup-anchor-bottom .maplibregl-popup-tip { border-top-color: rgba(255, 255, 255, 0.95) !important; }
        html[data-theme="light"] .maplibregl-popup-anchor-left .maplibregl-popup-tip { border-right-color: rgba(255, 255, 255, 0.95) !important; }
        html[data-theme="light"] .maplibregl-popup-anchor-right .maplibregl-popup-tip { border-left-color: rgba(255, 255, 255, 0.95) !important; }
        html[data-theme="light"] .maplibregl-popup-anchor-top-left .maplibregl-popup-tip { border-bottom-color: rgba(255, 255, 255, 0.95) !important; }
        html[data-theme="light"] .maplibregl-popup-anchor-top-right .maplibregl-popup-tip { border-bottom-color: rgba(255, 255, 255, 0.95) !important; }
        html[data-theme="light"] .maplibregl-popup-anchor-bottom-left .maplibregl-popup-tip { border-top-color: rgba(255, 255, 255, 0.95) !important; }
        html[data-theme="light"] .maplibregl-popup-anchor-bottom-right .maplibregl-popup-tip { border-top-color: rgba(255, 255, 255, 0.95) !important; }

        .dwd-popup-header { background: #111; padding: 8px 12px; border-bottom: 1px solid #444; font-weight: bold; font-size: 14px; color: #fff; }
        .dwd-warn-item { padding: 10px 12px; border-bottom: 1px solid #333; }
        .dwd-warn-item:last-child { border-bottom: none; }
        .dwd-warn-title { display: block; font-weight: bold; color: #ffcc00; margin-bottom: 4px; font-size: 14px; }
        .dwd-warn-time { display: block; font-size: 12px; color: #aaa; margin-bottom: 2px; }
        .dwd-error { padding: 15px; color: #ff6b6b; text-align: center; } .dwd-empty { padding: 15px; color: #aaa; text-align: center; font-style: italic; }
        .crowd-marker-icon-wrapper { color: white; padding: 5px; border-radius: 50%; border: 2px solid white; box-shadow: 0 0 5px rgba(0,0,0,0.5); width: 30px; height: 30px; text-align: center; line-height: 18px; font-size: 14px; font-weight: bold; }
        #crowdMapOverlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(46, 45, 45, 0.95); color: #e9ecef; display: flex; justify-content: center; align-items: center; flex-direction: column; z-index: 999; border-radius: inherit; pointer-events: none; }
        /* Veredelter Theme Toggle Button & PLZ Capsule (Dark Mode) */
        #themeToggleBtn {
            background: rgba(15, 15, 15, 0.8) !important;
            border: 1px solid rgba(255, 255, 255, 0.08) !important;
            color: #b2bec3 !important;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25) !important;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
        }
        #themeToggleBtn:hover {
            background: rgba(0, 0, 0, 0.95) !important;
            border-color: rgba(0, 168, 255, 0.5) !important;
            color: #00a8ff !important;
            box-shadow: 0 6px 15px rgba(0, 168, 255, 0.2) !important;
            transform: translateY(-1px);
        }
        
        .header-plz-capsule {
            background: linear-gradient(135deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.02) 100%) !important;
            border: 1px solid rgba(255, 255, 255, 0.12) !important;
            box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2), 0 4px 10px rgba(0, 0, 0, 0.15) !important;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
        }
        .header-plz-capsule:hover {
            background: linear-gradient(135deg, rgba(255, 255, 255, 0.09) 0%, rgba(255, 255, 255, 0.03) 100%) !important;
            border-color: rgba(0, 168, 255, 0.4) !important;
            box-shadow: 0 6px 15px rgba(0, 168, 255, 0.2), inset 0 1px 1px rgba(255, 255, 255, 0.1) !important;
        }
        .header-plz-capsule:focus-within {
            background: rgba(255, 255, 255, 0.02) !important;
            border-color: #00a8ff !important;
            box-shadow: 0 0 15px rgba(0, 168, 255, 0.35), inset 0 1px 2px rgba(0, 0, 0, 0.15) !important;
        }
        .header-plz-input {
            color: #00a8ff !important;
            outline: none !important;
            box-shadow: none !important;
        }
        .header-plz-input::placeholder {
            color: rgba(0, 168, 255, 0.5) !important;
        }
        .header-plz-label {
            color: rgba(255, 255, 255, 0.9) !important;
            transition: color 0.3s ease !important;
        }
        .header-plz-capsule:hover .header-plz-label {
            color: #00a8ff !important;
        }

        /* Veredelter Theme Toggle Button (Light Mode) */
        html[data-theme="light"] #themeToggleBtn {
            background: #ffffff !important;
            border: 1px solid rgba(0, 0, 0, 0.15) !important;
            color: #2e2d2d !important;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06) !important;
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
        }
        html[data-theme="light"] #themeToggleBtn:hover {
            background: rgba(255, 255, 255, 0.85) !important;
            border-color: rgba(0, 0, 0, 0.25) !important;
            color: #1a1a1a !important;
            box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1) !important;
            transform: translateY(-1px);
        }

        /* PLZ-Kapsel im hellen Design */
        html[data-theme="light"] .header-plz-capsule {
            background: rgba(0, 0, 0, 0.05) !important;
            border: 1px solid rgba(0, 0, 0, 0.15) !important;
            box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.08) !important;
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
        }
        html[data-theme="light"] .header-plz-capsule:hover {
            background: rgba(0, 0, 0, 0.08) !important;
            border-color: rgba(0, 0, 0, 0.25) !important;
        }
        html[data-theme="light"] .header-plz-capsule:focus-within {
            background: #ffffff !important;
            border-color: #00a8ff !important;
            box-shadow: 0 0 12px rgba(0, 168, 255, 0.25), inset 0 1px 2px rgba(0, 0, 0, 0.05) !important;
        }
        html[data-theme="light"] .header-plz-label,
        html[data-theme="light"] .header-plz-label i {
            color: #1a1a1a !important;
        }
        html[data-theme="light"] .header-plz-input {
            color: #1a1a1a !important;
        }
        html[data-theme="light"] .header-plz-input::placeholder {
            color: #888 !important;
        }

        /* Header-Lesbarkeit im Light-Mode */
        html[data-theme="light"] header.navbar .navbar-brand {
            color: #1a1a1a !important;
        }
        html[data-theme="light"] header.navbar .nav-link {
            color: #2e2d2d !important;
        }
        html[data-theme="light"] header.navbar .nav-link:hover {
            color: #00a8ff !important;
        }
        html[data-theme="light"] header.navbar .nav-link.active {
            color: #00a8ff !important;
            font-weight: bold;
        }
        html[data-theme="light"] header.navbar .btn-outline-info {
            color: #00a8ff !important;
            border-color: #00a8ff !important;
        }
        html[data-theme="light"] header.navbar .btn-outline-info:hover,
        html[data-theme="light"] header.navbar .btn-outline-info.active {
            background-color: #00a8ff !important;
            color: #fff !important;
        }
        html[data-theme="light"] header.navbar .btn-info {
            background-color: #00a8ff !important;
            border-color: #00a8ff !important;
            color: #fff !important;
        }
        html[data-theme="light"] header.navbar .btn-info:hover {
            background-color: #0097e6 !important;
            border-color: #0097e6 !important;
        }

        /* Hover Schatten-Verlauf und Float-Animation für Karten im hellen Modus */
        html[data-theme="light"] .card,
        html[data-theme="light"] .card.bg-dark {
            transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease, border-color 0.3s ease !important;
        }
        html[data-theme="light"] .card:hover,
        html[data-theme="light"] .card.bg-dark:hover {
            box-shadow: 0 15px 45px rgba(0, 168, 255, 0.6) !important;
            transform: translateY(-2px);
        }

        /* ===================================================
           EINHEITLICHES TYPOGRAFIE- & KONTRAST-SYSTEM FÜR WIDGETS
           =================================================== */

        /* Einheitliche Schriftart für das gesamte Dashboard & Widgets */
        body,
        #sidebarWidgetsContainer,
        #dashboardWidgetsContainer,
        .widget-item,
        .card {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
        }

        /* Standard-Fließtext in Widgets */
        #sidebarWidgetsContainer .card-body p,
        #dashboardWidgetsContainer .card-body p {
            font-size: 13px;
            line-height: 1.45;
            color: #e2e8f0;
        }

        /* Widget-Karten Titel */
        .card-header .widget-title,
        .card-header h5,
        .card-header h6 {
            font-size: 14px !important;
            font-weight: 600 !important;
            letter-spacing: 0.2px;
            color: #f8fafc !important;
        }

        /* Prominente KPI-Werte (z.B. Temperatur, CAPE, Wolkenuntergrenze, Taupunkt) */
        .widget-kpi-value,
        #cloudBaseCurrentValue,
        #cloudTopCurrentValue,
        #capeCurrentValue,
        #dewpointCurrentValue {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
            font-weight: 700 !important;
            letter-spacing: -0.5px;
            line-height: 1.1;
        }

        /* Sekundäre Metadaten & Labels */
        .widget-subtext,
        .text-slate-300 {
            color: #cbd5e1 !important;
        }
        .text-slate-400 {
            color: #94a3b8 !important;
        }

        /* ===================================================
           GLOBALE BADGE- & STATUS-KONTRAST-REGELN (WCAG AAA)
           =================================================== */

        /* Einheitliche Badge-Basis */
        .badge {
            font-size: 11px !important;
            line-height: 1.35 !important;
            letter-spacing: 0.2px;
            padding: 0.28em 0.6em !important;
            border-radius: 6px;
        }
        .badge.rounded-pill {
            border-radius: 50rem !important;
        }

        /* 1. Solide Badges */
        /* Roter Hintergrund -> Immer reinweiße Schrift */
        .badge.bg-danger,
        .badge-danger {
            background-color: #dc2626 !important;
            color: #ffffff !important;
            font-weight: 700 !important;
            text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
        }

        /* Gelber / Orange Hintergrund -> Immer dunkle / anthrazitfarbene Schrift (#0f172a) */
        .badge.bg-warning,
        .badge-warning {
            background-color: #f59e0b !important;
            color: #0f172a !important;
            font-weight: 700 !important;
            text-shadow: none !important;
        }

        /* Grüner Hintergrund -> Immer reinweiße Schrift */
        .badge.bg-success,
        .badge-success {
            background-color: #16a34a !important;
            color: #ffffff !important;
            font-weight: 700 !important;
            text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
        }

        /* Blauer / Info Hintergrund -> Immer reinweiße Schrift */
        .badge.bg-info,
        .badge-info {
            background-color: #0284c7 !important;
            color: #ffffff !important;
            font-weight: 700 !important;
            text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
        }

        /* Primary Hintergrund -> Immer reinweiße Schrift */
        .badge.bg-primary,
        .badge-primary {
            background-color: #2563eb !important;
            color: #ffffff !important;
            font-weight: 700 !important;
        }

        /* Sekundär / Neutral Hintergrund -> Reinweiße Schrift */
        .badge.bg-secondary,
        .badge-secondary {
            background-color: rgba(255, 255, 255, 0.15) !important;
            color: #ffffff !important;
            font-weight: 600 !important;
        }

        /* 2. Getönte Badges (mit bg-opacity) auf dunklem Hintergrund */
        /* Roter Tint -> Weißer oder hellroter Text */
        .badge.bg-danger[class*="bg-opacity-"],
        .badge.text-danger {
            color: #ffffff !important;
            background-color: rgba(220, 38, 38, 0.3) !important;
            border-color: rgba(239, 68, 68, 0.7) !important;
            font-weight: 700 !important;
        }

        /* Gelber Tint -> Leuchtend hellgelber Text mit hohem Kontrast */
        .badge.bg-warning[class*="bg-opacity-"] {
            background-color: rgba(245, 158, 11, 0.3) !important;
            border-color: rgba(251, 191, 36, 0.7) !important;
            color: #fef08a !important;
            font-weight: 700 !important;
        }

        /* Grüner Tint -> Leuchtend hellgrüner Text */
        .badge.bg-success[class*="bg-opacity-"] {
            background-color: rgba(22, 163, 74, 0.3) !important;
            border-color: rgba(74, 222, 128, 0.7) !important;
            color: #dcfce7 !important;
            font-weight: 700 !important;
        }

        /* Blauer / Info Tint -> Leuchtend hellblauer Text */
        .badge.bg-info[class*="bg-opacity-"] {
            background-color: rgba(2, 132, 199, 0.3) !important;
            border-color: rgba(56, 189, 248, 0.7) !important;
            color: #e0f2fe !important;
            font-weight: 700 !important;
        }

        /* Verhindern, dass FontAwesome-Icons extrem mitskalieren oder schrumpfen */
        #sidebarWidgetsContainer .card-body i.fas, #sidebarWidgetsContainer .card-body i.far, #sidebarWidgetsContainer .card-body i.fab,
        #dashboardWidgetsContainer .card-body i.fas, #dashboardWidgetsContainer .card-body i.far, #dashboardWidgetsContainer .card-body i.fab {
            font-size: inherit;
        }

        /* Falls Leaflet-Karten-Popups zerschossen werden, diese gezielt wieder befreien */
        .leaflet-popup-content-wrapper * {
            font-size: initial !important; 
        }

        /* Schriftgrößen-Optimierung im Header (Titel ausgenommen) & größere PLZ-Kapsel */
        header.navbar .nav-link,
        header.navbar .btn,
        .nav-pills .nav-link {
            font-size: 13.5px !important;
        }
        .header-plz-capsule {
            padding: 4px 14px !important;
        }
        .header-plz-label {
            font-size: 14.5px !important;
        }
        .header-plz-input {
            font-size: 14.5px !important;
            width: 75px !important;
        }
        @keyframes pulse-live {
            0% { transform: rotate(-15deg) scale(1); box-shadow: 0 0 0 0 rgba(255, 71, 87, 0.7); }
            50% { transform: rotate(-15deg) scale(1.05); box-shadow: 0 0 0 10px rgba(255, 71, 87, 0); }
            100% { transform: rotate(-15deg) scale(1); box-shadow: 0 0 0 0 rgba(255, 71, 87, 0); }
        }
        .pulse-live {
            animation: pulse-live 2s infinite;
        }
        @keyframes pulse-warning {
            0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255, 0, 0, 0.7); }
            50% { transform: scale(1.05); box-shadow: 0 0 0 8px rgba(255, 0, 0, 0); }
            100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255, 0, 0, 0); }
        }
        .pulse-warning-dialog {
            animation: pulse-warning 2s infinite;
        }
        .pulse-warning-dialog:hover {
            animation: none;
            transform: scale(1.05);
        }
        .pulse-live:hover {
            animation: none;
            transform: rotate(0deg) scale(1.1) !important;
            transition: all 0.3s ease;
        }

        /* === GLOBALE WIDGET VOLLBILD STYLES === */
        .widget-fullscreen {
            position: fixed !important;
            top: 0 !important;
            left: 0 !important;
            width: 100vw !important;
            height: 100vh !important;
            z-index: 99999 !important;
            background: rgba(10, 15, 25, 0.98) !important;
            backdrop-filter: blur(15px) !important;
            -webkit-backdrop-filter: blur(15px) !important;
            padding: 1.25rem !important;
            overflow-y: auto !important;
            margin: 0 !important;
            border-radius: 0 !important;
            display: flex !important;
            flex-direction: column !important;
        }
        html[data-theme="light"] .widget-fullscreen {
            background: rgba(245, 247, 250, 0.98) !important;
        }
        .widget-fullscreen .dropdown {
            display: none !important;
        }
        .widget-fullscreen > .card {
            height: 100% !important;
            width: 100% !important;
            border-radius: 16px !important;
            border: 1px solid rgba(255, 255, 255, 0.15) !important;
            background: rgba(25, 30, 40, 0.95) !important;
            display: flex !important;
            flex-direction: column !important;
        }
        html[data-theme="light"] .widget-fullscreen > .card {
            background: rgba(255, 255, 255, 0.98) !important;
            border: 1px solid rgba(0, 0, 0, 0.1) !important;
        }
        .widget-fullscreen > .card > .card-body {
            flex-grow: 1 !important;
            height: calc(100% - 50px) !important;
            min-height: 0 !important;
            overflow-y: auto !important;
        }
        /* Nested list items and warning cards must remain compact and auto-sized */
        .widget-fullscreen .widget-warn-card,
        .widget-fullscreen .card.widget-warn-card,
        .widget-fullscreen .dwd-warnings-widget .card {
            height: auto !important;
            min-height: auto !important;
            flex: 0 0 auto !important;
            margin-bottom: 0.65rem !important;
            border-radius: 8px !important;
        }
        .widget-fullscreen .widget-warn-card .card-body,
        .widget-fullscreen .card.widget-warn-card .card-body,
        .widget-fullscreen .dwd-warnings-widget .card-body {
            height: auto !important;
            flex-grow: 0 !important;
            overflow-y: visible !important;
        }
        .widget-fullscreen .chart-container,
        .widget-fullscreen #ensembleChartContainerWidget,
        .widget-fullscreen #ensembleChartContainer,
        .widget-fullscreen #wxCanvasContainerWidget,
        .widget-fullscreen #wxCanvasContainer {
            height: 100% !important;
            min-height: calc(100vh - 160px) !important;
            flex-grow: 1 !important;
        }

        /* Header Control Buttons Styling & Spacing */
        .header-control-btn {
            display: inline-flex !important;
            align-items: center !important;
            justify-content: center !important;
            width: 20px !important;
            height: 20px !important;
            line-height: 1 !important;
            box-shadow: none !important;
            text-decoration: none !important;
            border-radius: 4px !important;
            transition: color 0.15s ease, background 0.15s ease, transform 0.15s ease !important;
        }
        .header-control-btn:hover {
            color: #ffffff !important;
            background: rgba(255, 255, 255, 0.1) !important;
            transform: scale(1.15) !important;
        }

        /* Smooth Widget Body Scrolling without visible scrollbars */
        .widget-body-scrollable {
            overflow-y: auto !important;
            scrollbar-width: none !important; /* Firefox */
            -ms-overflow-style: none !important; /* IE / Edge */
        }
        .widget-body-scrollable::-webkit-scrollbar {
            display: none !important; /* Chrome / Safari / Opera */
            width: 0 !important;
            height: 0 !important;
        }

        /* === RESPONSIVE WETTERALARM BANNER & TOAST === */
        .wp-alarm-banner {
            position: fixed;
            top: 1rem;
            left: 50%;
            transform: translateX(-50%);
            z-index: 99999;
            background-color: #d63031;
            color: #fff;
            border: none;
            max-width: 90vw;
            border-radius: 12px;
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5) !important;
        }

        @media (max-width: 768px) {
            .wp-alarm-banner {
                position: relative !important;
                top: auto !important;
                left: auto !important;
                transform: none !important;
                width: 100% !important;
                max-width: 100% !important;
                margin: 8px 0 !important;
                z-index: 1020 !important;
                border-radius: 8px !important;
            }
        }

        /* === HEADER WARNSTUFEN-PILLE (MOBILE NO-WRAP) === */
        #warningSummaryContainer {
            display: inline-block;
            max-width: 90vw;
        }

        #warningSummaryContainer .badge,
        .badge-warning-summary {
            white-space: nowrap !important;
            overflow: hidden !important;
            text-overflow: ellipsis !important;
            max-width: 90vw !important;
        }

        /* ===================================================
           WETTERFROSCH HEADER & PERCH INTEGRATION
           =================================================== */
        :root {
            --wp-header-bg: #212529;
            --wp-header-border: rgba(255, 255, 255, 0.15);
        }

        html[data-theme="light"] {
            --wp-header-bg: rgba(255, 255, 255, 0.95);
            --wp-header-border: rgba(0, 0, 0, 0.12);
        }

        header.navbar {
            background-color: var(--wp-header-bg) !important;
            border-bottom: none !important;
            padding-top: 4px !important;
            padding-bottom: 4px !important;
            min-height: 52px;
            position: relative;
            overflow: visible !important;
        }

        header.navbar .container-fluid {
            overflow: visible !important;
            position: relative;
            z-index: 5;
        }

        /* ===================================================
           BRAND MASCOT & IMAGE-PROTECTION
           =================================================== */
        .brand-mascot-wrapper {
            position: relative;
            display: inline-block;
            user-select: none;
            -webkit-user-select: none;
        }

        .brand-mascot-img {
            display: block;
            pointer-events: none; /* Verhindert direktes Ansprechen des Bildes */
            user-select: none;
            -webkit-user-select: none;
            -webkit-user-drag: none;
        }

        .brand-mascot-overlay {
            position: absolute;
            inset: 0; /* Deckt 100% von Breite und Höhe ab */
            z-index: 10;
            background: transparent;
            display: block;
            cursor: pointer;
        }

        .header-brand-wrap {
            position: relative;
            display: inline-flex;
            align-items: center;
            text-decoration: none;
            line-height: 1;
            overflow: visible !important;
            padding: 0 !important;
            z-index: 10;
        }

        .header-frog-perch {
            position: relative;
            display: inline-flex;
            align-items: flex-end;
            justify-content: center;
            height: 82px;
            margin-top: -4px; /* Antennen bleiben oben bündig an der Header-Kante */
            margin-bottom: -28px; /* Frosch ist größer und Zehen überlappen die Linie für 3D-Effekt */
            z-index: 6;
            flex-shrink: 0;
            overflow: visible !important;
        }

        .header-frog-img {
            height: 82px !important;
            min-height: 82px;
            width: auto;
            max-width: none;
            object-fit: contain;
            filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.55));
            transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
            position: relative;
            z-index: 2;
        }

        .header-brand-wrap:hover .header-frog-img,
        .brand-mascot-wrapper:hover .header-frog-img,
        .brand-mascot-overlay:hover ~ .brand-mascot-img {
            transform: scale(1.06) rotate(-1.5deg);
        }

        .header-frog-shadow {
            position: absolute;
            bottom: -3px;
            left: 5%;
            width: 90%;
            height: 6px;
            background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0) 75%);
            border-radius: 50%;
            pointer-events: none;
            z-index: 1;
        }

        .header-brand-text {
            font-size: 1.45rem;
            font-weight: 800;
            letter-spacing: -0.02em;
            color: #ffffff;
            white-space: nowrap;
            display: inline-flex;
            align-items: center;
            align-self: center;
            line-height: 1;
            margin-left: 8px;
            transform: translateY(-2px); /* Vertikal mittig zur Frosch-Grafik */
        }

        .header-brand-tld {
            color: #00d2d3 !important;
            font-weight: 700;
        }

        /* === DIE GESCHWUNGENE SITZFLÄCHE / AUSBEULUNG === */
        .header-perch-shelf {
            position: absolute;
            left: 0;
            right: 0;
            bottom: -16px;
            height: 17px;
            pointer-events: none;
            z-index: 2;
            overflow: visible;
        }

        .header-perch-svg {
            position: absolute;
            left: 0;
            top: 0;
            width: 110px;
            height: 17px;
        }

        .header-perch-fill {
            fill: var(--wp-header-bg);
        }

        .header-perch-stroke {
            fill: none;
            stroke: var(--wp-header-border);
            stroke-width: 1px;
            stroke-linecap: butt;
            stroke-linejoin: round;
        }

        .header-perch-line-rest {
            position: absolute;
            left: 110px;
            right: 0;
            top: 0px;
            border-top: 1px solid var(--wp-header-border);
        }

        /* Light Mode Overrides */
        html[data-theme="light"] .header-brand-text {
            color: #1a1a1a !important;
        }

        html[data-theme="light"] .header-brand-tld {
            color: #00a8ff !important;
        }

        html[data-theme="light"] .header-frog-shadow {
            background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0) 75%);
        }

        /* Mobile Optimierung (< 768px) */
        @media (max-width: 767.98px) {
            header.navbar {
                padding-top: 2px !important;
                padding-bottom: 2px !important;
                min-height: 48px;
            }
            .header-frog-perch {
                height: 64px;
                margin-top: -2px;
                margin-bottom: -22px;
            }
            .header-frog-img {
                height: 64px !important;
                min-height: 64px;
            }
            .header-brand-text {
                font-size: 1.2rem;
                transform: translateY(-1px);
            }
            .header-brand-tld {
                display: none !important;
            }
            .header-perch-shelf {
                bottom: -14px;
                height: 15px;
            }
            .header-perch-svg {
                width: 90px;
                height: 15px;
            }
            .header-perch-line-rest {
                left: 90px;
            }
        }

        @media (min-width: 576px) and (max-width: 767.98px) {
            .header-brand-tld {
                display: inline !important;
            }
        }

        /* ==========================================================================
           WIDGET TYPOGRAFIE & DESIGN-SYSTEM (GLOBAL HARMONISIERT)
           ========================================================================== */

        /* 1. Globaler Font-Reset für alle Cards, Widgets & UI-Elemente */
        .card,
        .widget-grid-item,
        .card h1, .card h2, .card h3, .card h4, .card h5, .card h6,
        .card input, .card select, .card textarea, .card button,
        .card .badge, .card .btn,
        .card-header, .card-body, .card-footer {
            font-family: 'K2D', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
        }

        /* Schutz & Erhaltung aller Webfont-Icons (FontAwesome & Material Symbols) */
        .fa, .fas, .far, .fal, .fab, .fad, .fak, 
        [class*="fa-"], [class^="fa-"] {
            font-family: "Font Awesome 6 Free", "FontAwesome" !important;
        }

        .fab, .fa-brands, [class*="fa-brands"] {
            font-family: "Font Awesome 6 Brands" !important;
        }

        .material-symbols-outlined {
            font-family: 'Material Symbols Outlined' !important;
        }

        .material-symbols-rounded {
            font-family: 'Material Symbols Rounded' !important;
        }

        .material-symbols-sharp {
            font-family: 'Material Symbols Sharp' !important;
        }

        .material-icons, .material-icons-outlined {
            font-family: 'Material Icons' !important;
        }

        /* 2. Einheitliche Schriftgrößen-Hierarchie (Typo-Scale) */

        /* Widget-Titel (Header) */
        .card-header,
        .card-header h1, .card-header h2, .card-header h3,
        .card-header h4, .card-header h5, .card-header h6,
        .card-header .card-title,
        .widget-grid-item .card-header,
        .widget-grid-item h5,
        .widget-grid-item h6,
        .widget-title {
            font-size: 12px !important;
            font-weight: 700 !important;
            text-transform: none !important;
            line-height: 1.3 !important;
        }

        /* Große Messwerte (KPIs / Grad / Index) */
        .widget-kpi,
        .kpi-value,
        .widget-main-value,
        .widget-metric,
        .extreme-val,
        .card .h2, .card .h3, .card .h4,
        .card .font-monospace.h4,
        .card .display-value,
        .card .metric-val {
            font-size: 16px !important;
            font-weight: 800 !important;
            font-family: 'K2D', sans-serif !important;
            line-height: 1.2 !important;
        }

        /* Fließtext / Beschreibung / Listen */
        .card-body,
        .widget-grid-item p,
        .widget-grid-item .card-body,
        .widget-grid-item ul,
        .widget-grid-item ol,
        .widget-grid-item table,
        .widget-desc,
        .widget-content {
            font-size: 11px !important;
            line-height: 1.4 !important;
            font-weight: 400 !important;
        }

        /* Labels / Subtexte */
        .card .text-muted,
        .card .card-footer,
        .card small,
        .card .small,
        .widget-subtext,
        .widget-label,
        .card-footer small {
            font-size: 9.5px !important;
            font-weight: 600 !important;
            letter-spacing: 0.2px !important;
        }

        /* ==========================================================================
           WIDGET & APP BADGE DESIGN SYSTEM (100% UNIFIED PILL-FORMAT)
           ========================================================================== */
        .badge,
        .card .badge,
        .widget-grid-item .badge,
        .table .badge,
        .wp-badge {
            display: inline-flex !important;
            align-items: center !important;
            justify-content: center !important;
            font-family: 'K2D', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
            font-size: 9px !important;
            font-weight: 700 !important;
            line-height: 1.1 !important;
            padding: 2.5px 7px !important;
            border-radius: 9999px !important; /* Immer konsistente Pill-Form */
            letter-spacing: 0.2px !important;
            white-space: nowrap !important;
            vertical-align: middle !important;
            box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2) !important;
            transition: all 0.15s ease-in-out !important;
        }

        /* Icon-Abstand in allen Badges vereinheitlichen */
        .badge i,
        .badge svg,
        .card .badge i,
        .widget-grid-item .badge i,
        .table .badge i {
            margin-right: 3px !important;
            font-size: 8.5px !important;
            line-height: 1 !important;
            display: inline-block !important;
        }

        /* Standard-Farbpaletten für Badges mit harmonischem Glasmorphismus & Kontrast */
        .badge.bg-success,
        .badge-success {
            background: rgba(34, 197, 94, 0.16) !important;
            color: #4ade80 !important;
            border: 1px solid rgba(34, 197, 94, 0.38) !important;
        }

        .badge.bg-warning,
        .badge-warning {
            background: rgba(245, 158, 11, 0.18) !important;
            color: #fbbf24 !important;
            border: 1px solid rgba(245, 158, 11, 0.40) !important;
        }

        .badge.bg-danger,
        .badge-danger {
            background: rgba(239, 68, 68, 0.18) !important;
            color: #f87171 !important;
            border: 1px solid rgba(239, 68, 68, 0.40) !important;
        }

        .badge.bg-info,
        .badge-info {
            background: rgba(6, 182, 212, 0.16) !important;
            color: #22d3ee !important;
            border: 1px solid rgba(6, 182, 212, 0.38) !important;
        }

        .badge.bg-primary,
        .badge-primary {
            background: rgba(59, 130, 246, 0.16) !important;
            color: #60a5fa !important;
            border: 1px solid rgba(59, 130, 246, 0.38) !important;
        }

        .badge.bg-secondary,
        .badge-secondary {
            background: rgba(148, 163, 184, 0.14) !important;
            color: #cbd5e1 !important;
            border: 1px solid rgba(148, 163, 184, 0.28) !important;
        }

        .badge.bg-dark,
        .badge-dark {
            background: rgba(15, 23, 42, 0.65) !important;
            color: #94a3b8 !important;
            border: 1px solid rgba(255, 255, 255, 0.12) !important;
        }

        /* Solide Warnstufen-Badges (Lvl 1 bis Lvl 4) */
        .badge.bg-level-1 {
            background: #eab308 !important;
            color: #0f172a !important;
            border: 1px solid #ca8a04 !important;
            font-weight: 800 !important;
        }

        .badge.bg-level-2 {
            background: #fb8c00 !important;
            color: #0f172a !important;
            border: 1px solid #ea580c !important;
            font-weight: 800 !important;
        }

        .badge.bg-level-3 {
            background: #e53935 !important;
            color: #ffffff !important;
            border: 1px solid #b91c1c !important;
            font-weight: 800 !important;
        }

        .badge.bg-level-4 {
            background: #880e4f !important;
            color: #ffffff !important;
            border: 1px solid #4a044e !important;
            font-weight: 800 !important;
        }

        /* 3. Card-Padding & Spacing angleichen */
        .card-header,
        .widget-grid-item .card-header {
            padding: 6px 10px !important;
            min-height: 32px !important;
            display: flex !important;
            align-items: center !important;
            justify-content: space-between !important;
        }

        .card-body,
        .widget-grid-item .card-body {
            padding: 10px !important;
        }

        /* 4. Tabellarische Widget-Metriken (Icon-Spalte + rechtsbündiger Wert) */
        .widget-metric-row {
            display: flex !important;
            align-items: center !important;
            justify-content: space-between !important;
            gap: 6px !important;
            line-height: 1.2 !important;
        }

        .widget-metric-icon {
            color: #ffffff !important;
            font-size: 11px !important; /* 1-1.5pt größer als 9.5px Text */
            width: 14px !important;
            text-align: center !important;
            flex-shrink: 0 !important;
            display: inline-flex !important;
            align-items: center !important;
            justify-content: center !important;
        }

        .widget-metric-val {
            font-size: 9.5px !important;
            font-weight: 500 !important;
            text-align: right !important;
            white-space: nowrap !important;
            color: #cbd5e1 !important;
        }

        /* 5. Widget Settings Dropdown Overlay & Z-Index */
        .widget-grid-item {
            position: relative;
        }
        .widget-grid-item:has(.dropdown-menu.show),
        .widget-grid-item.dropdown-active {
            z-index: 1050 !important;
        }
        .widget-grid-item:has(.dropdown-menu.show) .card,
        .widget-grid-item.dropdown-active .card {
            overflow: visible !important;
        }
        .widget-grid-item .dropdown-menu {
            z-index: 1060 !important;
            position: absolute !important;
        }

        /* 6. Dashboard Grid Drag & Drop (SortableJS) */
        .dashboard-grid-container .widget-grid-item.sortable-ghost {
            opacity: 0.25 !important;
            border: 2px dashed #00e5ff !important;
            border-radius: 12px !important;
            background: rgba(0, 229, 255, 0.05) !important;
        }
        .dashboard-grid-container .widget-grid-item.sortable-chosen {
            cursor: grabbing !important;
        }
        .dashboard-grid-container .widget-grid-item.sortable-drag {
            opacity: 0.95 !important;
            transform: scale(1.02);
            box-shadow: 0 14px 35px rgba(0, 0, 0, 0.6) !important;
            z-index: 99999 !important;
        }
        .dashboard-grid-container .drag-handle {
            cursor: grab;
            user-select: none;
        }
        .dashboard-grid-container .drag-handle:active {
            cursor: grabbing;
        }
        .dashboard-grid-container .drag-handle:hover .drag-handle-icon {
            opacity: 1 !important;
            color: #00e5ff !important;
            transition: color 0.15s ease, opacity 0.15s ease;
        }