/* --- PERFORMANCE SPECIFIC STYLES --- */
        .kpi-large {
            text-align: center;
            padding: 2.5rem 1rem;
        }
        .kpi-large-value {
            font-size: 4rem;
            font-weight: 800;
            font-family: var(--font-mono);
            color: var(--success);
        }
        .kpi-large-label {
            font-size: 0.8rem;
            color: var(--text-muted);
            text-transform: uppercase;
            letter-spacing: 1px;
        }

        .chart-container {
            height: 250px;
            width: 100%;
            position: relative;
            overflow: auto;
        }
        .chart-container::-webkit-scrollbar {
            height: 6px;
        }
        .chart-container::-webkit-scrollbar-thumb {
            background: linear-gradient(90deg, var(--primary), rgba(var(--primary-rgb), 0.5));
            border-radius: 6px;
        }
        .chart-container::-webkit-scrollbar-thumb:hover {
            background: var(--primary);
        }

        /* NEUER STIL: Horizontal Stacked Bar Chart (Wöchentlich Soll/Ist) */
        .stacked-bar-chart {
            display: flex;
            flex-direction: column;
            gap: 12px;
            padding: 10px 0;
            margin-top: 10px;
        }
        .week-row {
            display: grid;
            grid-template-columns: 80px 1fr 100px; /* KW-Label, Bar, Wert */
            align-items: center;
            gap: 15px;
        }
        .week-label {
            font-weight: 600;
            color: var(--text-muted);
            font-size: 0.9rem;
        }
        .bar-container-wrapper {
            position: relative;
            height: 12px;
            background: var(--expected-color);
            border-radius: 6px;
            overflow: hidden;
        }
        .bar-actual-fill {
            position: absolute;
            top: 0;
            left: 0;
            height: 100%;
            background: var(--work-color);
            transition: width 0.8s ease;
            border-radius: 6px;
        }
        .bar-target-overlay {
            position: absolute;
            top: 0;
            bottom: 0;
            width: 0;
            border-left: 2px solid rgba(255, 255, 255, 0.4);
            z-index: 1;
        }
        .bar-value-label {
            font-size: 0.9rem;
            font-family: var(--font-mono);
            font-weight: 600;
            text-align: right;
            color: var(--text-main);
        }
        
        
        /* Deep Dive Charts */
        .chart-deep-row {
            display: grid;
            grid-template-columns: 1fr 2fr; /* Wochentag | Heatmap */
            gap: 1.5rem;
            margin-bottom: 1.5rem;
        }
        
        /* Horizontal Saldo Bar Chart (Produktivität) */
        .horizontal-bar-container {
            padding: 20px 0;
        }
        .horizontal-bar-row {
            display: grid;
            grid-template-columns: 40px 1fr 60px; /* Tag, Bar, Wert */
            align-items: center;
            gap: 10px;
            margin-bottom: 15px;
        }
        .bar-label-day {
            font-weight: 600;
            color: var(--text-main);
            text-align: center;
        }
        .bar-chart-area {
            height: 10px;
            background: rgba(255,255,255,0.05);
            position: relative;
            border-radius: 4px;
        }
        .bar-zero-line {
            position: absolute;
            top: 0;
            bottom: 0;
            left: 50%;
            width: 1px;
            background: var(--text-muted);
            opacity: 0.5;
            z-index: 1;
        }
        .bar-value {
            position: absolute;
            top: 0;
            bottom: 0;
            border-radius: 4px;
            transition: width 0.8s ease, left 0.8s ease;
        }
        .bar-value.positive {
            background: var(--success);
            left: 50%;
        }
        .bar-value.negative {
            background: var(--danger);
            right: 50%;
        }
        .bar-text-value {
             font-size: 0.9rem;
             font-family: var(--font-mono);
             font-weight: 600;
             text-align: right;
        }
        
        /* Heatmap Styles */
        .heatmap-grid {
            display: grid;
            grid-template-columns: repeat(16, 1fr); /* 8-23 Uhr = 16 Stunden */
            gap: 5px;
            padding: 10px 0;
        }
        .heatmap-cell {
            height: 30px;
            width: 100%;
            border-radius: 4px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.7rem;
            color: var(--text-main);
            transition: background-color 0.5s ease;
        }
        .heatmap-label {
            text-align: center;
            font-size: 0.7rem;
            color: var(--text-muted);
            margin-bottom: 5px;
        }