:root {
    --bg-main: #f8fafc; 
    --bg-card: #ffffff; 
    --bg-input: #f1f5f9; 
    --border-color: #e2e8f0; 
    --text-muted: #64748b; 
    --text-light: #1e293b;
    --color-pv: #eab308; 
    --color-hgue: #10b981; 
    --color-h2: #06b6d4; 
    --color-load: #f43f5e;
}

* { box-sizing: border-box; }

body.dashboard-body { 
    background-color: var(--bg-main); 
    color: var(--text-light); 
    margin: 0; 
    font-family: ui-sans-serif, system-ui, sans-serif; 
}

.dashboard-header { 
    background-color: var(--bg-card); 
    border-bottom: 1px solid var(--border-color); 
    padding: 1.25rem 2rem; 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
}

.header-brand h1 { 
    margin: 0.5rem 0 0 0; 
    font-size: 1.35rem; 
    font-weight: 700; 
}

.badge-container { 
    display: flex; 
    gap: 0.5rem; 
}

.badge-academic { 
    background: #eff6ff; 
    color: #2563eb; 
    padding: 0.25rem 0.5rem; 
    border-radius: 4px; 
    font-size: 0.75rem; 
    font-weight: 600; 
}

.badge-status { 
    background: #f1f5f9; 
    color: #475569; 
    padding: 0.25rem 0.5rem; 
    border-radius: 4px; 
    font-size: 0.75rem; 
}

.status-badge-green { 
    display: flex; 
    align-items: center; 
    gap: 0.5rem; 
    background: #f8fafc; 
    padding: 0.5rem 0.75rem; 
    border-radius: 6px; 
    border: 1px solid var(--border-color); 
}

.status-dot-amber { 
    width: 8px; 
    height: 8px; 
    background: #f59e0b; 
    border-radius: 50%; 
    display: inline-block; 
}

.status-dot-green { 
    width: 8px; 
    height: 8px; 
    background: #10b981; 
    border-radius: 50%; 
    display: inline-block; 
}

.status-text-amber { font-size: 0.85rem; color: #b45309; font-weight: 500; }
.status-text-green { font-size: 0.85rem; color: #047857; font-weight: 500; }

.dashboard-grid { 
    display: grid; 
    grid-template-columns: 320px 1fr; 
    gap: 1.5rem; 
    padding: 1.5rem; 
    max-width: 1600px; 
    margin: 0 auto; 
}

.control-sidebar { 
    display: flex; 
    flex-direction: column; 
    gap: 1rem; 
}

.panel-card, .info-card, .block-section, .chart-container-card { 
    background: var(--bg-card); 
    border: 1px solid var(--border-color); 
    border-radius: 8px; 
    padding: 1.25rem; 
}

.panel-header h2 { margin: 0; font-size: 1.1rem; }
.panel-header p { margin: 0.25rem 0 1rem 0; font-size: 0.85rem; color: var(--text-muted); }

.input-stack { 
    display: flex; 
    flex-direction: column; 
    gap: 1rem; 
}

.input-group label { 
    display: block; 
    font-size: 0.85rem; 
    font-weight: 600; 
    margin-bottom: 0.35rem; 
}

.input-wrapper { 
    display: flex; 
    border: 1px solid var(--border-color); 
    border-radius: 6px; 
    overflow: hidden; 
}

.input-wrapper input { 
    flex: 1; 
    border: none; 
    padding: 0.5rem; 
    font-size: 0.95rem; 
    background: var(--bg-input); 
    outline: none; 
}

.input-wrapper .unit { 
    background: #e2e8f0; 
    padding: 0.5rem 0.75rem; 
    font-size: 0.85rem; 
    color: #475569; 
    font-weight: 600; 
}

.info-card h3 { margin: 0 0 0.5rem 0; font-size: 0.95rem; }
.info-card p { margin: 0; font-size: 0.85rem; color: var(--text-muted); line-height: 1.4; }

.content-area { 
    display: flex; 
    flex-direction: column; 
    gap: 1.25rem; 
}

.section-title { 
    margin: 0 0 1rem 0; 
    font-size: 1rem; 
    color: #475569; 
    border-left: 4px solid #cbd5e1; 
    padding-left: 0.5rem; 
}

.section-title.title-blue { border-left-color: #3b82f6; }

.stats-row { 
    display: grid; 
    grid-template-columns: repeat(4, 1fr); 
    gap: 1rem; 
}

.stat-box { 
    background: #f8fafc; 
    border: 1px solid var(--border-color); 
    border-radius: 6px; 
    padding: 0.75rem; 
}

.stat-box.box-blue { background: #f0fdf4; border-color: #bbf7d0; }

.stat-label { font-size: 0.75rem; color: var(--text-muted); font-weight: 500; display: block; margin-bottom: 0.25rem; }
.stat-label.label-blue { color: #166534; }

.stat-value { font-size: 1.15rem; font-weight: 700; color: #0f172a; }
.stat-value.text-blue { color: #15803d; }
.stat-unit { font-size: 0.8rem; font-weight: 400; color: var(--text-muted); }

.chart-card-header { 
    display: flex; 
    justify-content: space-between; 
    align-items: flex-start; 
    margin-bottom: 1rem; 
}

.chart-card-header h3 { margin: 0; font-size: 1.1rem; }
.chart-card-header p { margin: 0.25rem 0 0 0; font-size: 0.85rem; color: var(--text-muted); }

.custom-chart-legend { 
    display: flex; 
    gap: 1rem; 
    font-size: 0.85rem; 
    font-weight: 500; 
}

.legend-item { display: flex; align-items: center; gap: 0.35rem; }
.color-dot { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.color-dot.pv { background: var(--color-pv); }
.color-dot.hgue { background: var(--color-hgue); }
.color-dot.h2 { background: var(--color-h2); }
.color-line { width: 16px; height: 3px; background: var(--color-load); display: inline-block; }

.chart-wrapper { position: relative; 
    height: 400px; /* Erhöht von 320px auf 400px für bessere Lesbarkeit */
    min-height: 400px; /* Zwingt den Browser, den Platz physisch bereitzustellen */
    width: 100%; 
    margin-top: 1rem; }

.kpi-row { 
    display: grid; 
    grid-template-columns: repeat(4, 1fr); /* Geändert von 3 auf 4 */
    gap: 1rem; 
}

.kpi-box { 
    border-radius: 8px; 
    padding: 1rem; 
    color: white; 
    display: flex; 
    flex-direction: column; 
    justify-content: space-between; 
}

.kpi-box.danger { background: linear-gradient(135deg, #ef4444, #b91c1c); }
.kpi-box.primary { background: linear-gradient(135deg, #0284c7, #0369a1); }
.kpi-box.water { background: linear-gradient(135deg, #0d9488, #115e59); }

.kpi-meta { display: flex; justify-content: space-between; align-items: center; }
.kpi-title { font-size: 0.85rem; opacity: 0.9; font-weight: 500; }
.kpi-number { font-size: 1.75rem; font-weight: 800; margin-top: 0.5rem; display: block; }