/* §42c Wirtschaftlichkeitsrechner — Custom Styles */

[data-theme="dark"] {
  --pico-primary: #e8b339;
  --pico-primary-background: #e8b339;
  --pico-primary-hover: #f0c44a;
  --pico-color: #e0e0e0;
  --pico-h1-color: #f5f5f5;
  --pico-h2-color: #e8b339;
}

body { min-height: 100vh; display: flex; flex-direction: column; }
header { background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%); border-bottom: 2px solid #e8b339; padding: 1.5rem 0 0.5rem; }
header h1 { font-size: 1.6rem; }
nav[aria-label="breadcrumb"] { margin-top: 1rem; }
nav[aria-label="breadcrumb"] ul { display: flex; gap: 0.5rem; list-style: none; padding: 0; }
nav button { background: none; border: none; padding: 0.5rem 1rem; color: #888; border-bottom: 2px solid transparent; cursor: pointer; }
nav button.active, nav button:hover { color: #e8b339; border-bottom-color: #e8b339; }
main.container { flex: 1; padding: 2rem 0; }

.tab-panel { display: none; }
.tab-panel.active { display: block; animation: fadeIn 0.3s ease; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }

.szenario-card { background: linear-gradient(145deg, #1e1e3f 0%, #16213e 100%); border: 1px solid #2a2a4a; border-radius: 8px; padding: 1.5rem; margin-bottom: 1rem; }
.szenario-card h3 { color: #e8b339; margin-top: 0; }
.szenario-kpi { font-size: 1.4rem; font-weight: bold; margin: 0.5rem 0; }

.mini-kpi-grid { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 0.8rem; margin: 1rem 0; }
.mini-kpi-grid div { background: #1a1a2e; padding: 0.5rem; border-radius: 6px; text-align: center; font-size: 0.9rem; }
.mini-kpi-grid div strong { display: block; color: #888; font-size: 0.75rem; margin-bottom: 0.2rem; }

.mini-table { font-size: 0.85rem; margin-top: 1rem; }
.mini-table td { padding: 0.3rem 0.5rem; border-bottom: 1px solid #2a2a4a; }
.mini-table td:first-child { color: #888; }

.charts-grid { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1rem; }
.chart-card { background: #1a1a2e; border: 1px solid #2a2a4a; border-radius: 8px; padding: 1rem; }
canvas { max-height: 300px; }

.info-box { background: #1a2a3a; border: 1px solid #2a4a6a; border-radius: 8px; padding: 1rem; }
.info-box h4 { margin-top: 0; color: #5a8abf; }

.demo-banner { background: linear-gradient(90deg, #2a2a0a 0%, #3a3a10 100%); border-bottom: 1px solid #666620; padding: 0.5rem 0; }
.demo-banner article { background: transparent !important; color: #e8e8a0; font-size: 0.85rem; text-align: center; margin: 0; }
.demo-banner a { color: #e8b339; }

.loading-overlay { text-align: center; padding: 3rem; }
footer { margin-top: auto; text-align: center; color: #555; }
footer a { color: #e8b339; }

@media (max-width: 768px) {
  .mini-kpi-grid { grid-template-columns: repeat(3, 1fr); }
  .charts-grid { grid-template-columns: 1fr; }
  header h1 { font-size: 1.2rem; }
}