/* ══════════════════════════════════════════════════════════════
   Solar Pro – Design System
   Palette: Nacht-Blau + Sonnen-Gelb + Strom-Grün
   ══════════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Inter:wght@400;500;600&display=swap');

:root {
  --sp-night:    #0B1426;
  --sp-navy:     #1E3A5F;
  --sp-card:     #162340;
  --sp-card2:    #1a2e4a;
  --sp-sun:      #F5C518;
  --sp-sun-dim:  #d4a800;
  --sp-green:    #22C55E;
  --sp-green-dim:#16a34a;
  --sp-blue:     #60a5fa;
  --sp-purple:   #a855f7;
  --sp-red:      #EF4444;
  --sp-orange:   #f97316;
  --sp-text:     #F0F6FF;
  --sp-muted:    #94a3b8;
  --sp-border:   rgba(255,255,255,.08);
  --sp-radius:   12px;
  --sp-radius-sm:8px;
  --sp-shadow:   0 4px 24px rgba(0,0,0,.4);
  --sp-font-d:   'Space Grotesk', system-ui, sans-serif;
  --sp-font-b:   'Inter', system-ui, sans-serif;
}

/* ── Reset ── */
#sp-app *, #sp-app *::before, #sp-app *::after { box-sizing: border-box; margin: 0; padding: 0; }
#sp-app { font-family: var(--sp-font-b); font-size: 15px; color: var(--sp-text); background: var(--sp-night); border-radius: var(--sp-radius); overflow: hidden; max-width: 1180px; width: 100%; margin: 0 auto; }

/* ── App Shell ── */
.sp-app-inner { min-height: 500px; }

/* ── Progress Bar ── */
.sp-progress { display: flex; align-items: stretch; background: var(--sp-card); border-bottom: 1px solid var(--sp-border); }
.sp-progress-step { flex: 1; padding: 14px 10px; display: flex; align-items: center; gap: 10px; font-family: var(--sp-font-d); font-size: .82rem; font-weight: 600; color: var(--sp-muted); cursor: default; transition: all .25s; position: relative; }
.sp-progress-step.clickable { cursor: pointer; }
.sp-progress-step.clickable:hover { background: rgba(255,255,255,.03); color: var(--sp-text); }
.sp-progress-step::after { content: '›'; position: absolute; right: 0; color: var(--sp-border); font-size: 1.4rem; line-height: 1; }
.sp-progress-step:last-child::after { display: none; }
.sp-progress-step .sp-step-num { width: 28px; height: 28px; border-radius: 50%; background: rgba(255,255,255,.06); display: flex; align-items: center; justify-content: center; font-size: .8rem; flex-shrink: 0; transition: all .25s; }
.sp-progress-step.active { color: var(--sp-text); }
.sp-progress-step.active .sp-step-num { background: var(--sp-sun); color: var(--sp-night); }
.sp-progress-step.done { color: var(--sp-green); }
.sp-progress-step.done .sp-step-num { background: var(--sp-green); color: #fff; }

/* ── Panels ── */
.sp-panel { padding: 36px 44px; display: none; }
.sp-panel.active { display: block; }
@media (max-width: 900px) { .sp-panel { padding: 28px 28px; } }
@media (max-width: 620px) { .sp-panel { padding: 20px 18px; } }

/* ── Section Header ── */
.sp-section-title { font-family: var(--sp-font-d); font-size: 1.3rem; font-weight: 700; color: var(--sp-text); margin-bottom: 6px; }
.sp-section-sub   { font-size: .85rem; color: var(--sp-muted); margin-bottom: 24px; line-height: 1.5; }

/* ── Cards ── */
.sp-card { background: var(--sp-card); border: 1px solid var(--sp-border); border-radius: var(--sp-radius); padding: 24px 26px; margin-bottom: 18px; }
.sp-card-title { font-family: var(--sp-font-d); font-size: .95rem; font-weight: 600; color: var(--sp-sun); margin-bottom: 14px; display: flex; align-items: center; gap: 8px; }
.sp-card-title .sp-card-icon { font-size: 1.2rem; }

/* ── Grid ── */
.sp-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.sp-grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 20px; }
@media (max-width: 620px) { .sp-grid-2, .sp-grid-3 { grid-template-columns: 1fr; } }

/* ── Fields ── */
.sp-field { display: flex; flex-direction: column; gap: 5px; }
.sp-field label { font-size: .78rem; font-weight: 600; color: var(--sp-muted); text-transform: uppercase; letter-spacing: .04em; }
.sp-field .sp-help { font-size: .75rem; color: rgba(148,163,184,.7); line-height: 1.4; }

/* Inputs */
.sp-field input[type="number"],
.sp-field select {
  background: rgba(255,255,255,.04);
  border: 1.5px solid rgba(255,255,255,.1);
  border-radius: var(--sp-radius-sm);
  color: var(--sp-text);
  font-family: var(--sp-font-b);
  font-size: .95rem;
  padding: 9px 12px;
  width: 100%;
  transition: border-color .15s, background .15s;
  -webkit-appearance: none;
}
.sp-field input[type="number"]:focus,
.sp-field select:focus {
  outline: none;
  border-color: var(--sp-sun);
  background: rgba(245,197,24,.05);
}
.sp-field select option { background: var(--sp-card); }
.sp-field input.sp-err { border-color: var(--sp-red); }

/* Range Slider */
.sp-range-wrap { display: flex; align-items: center; gap: 12px; }
.sp-range-wrap input[type="range"] {
  flex: 1; -webkit-appearance: none; background: rgba(255,255,255,.1);
  height: 4px; border-radius: 2px; cursor: pointer;
}
.sp-range-wrap input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 18px; height: 18px; border-radius: 50%;
  background: var(--sp-sun); cursor: pointer; box-shadow: 0 0 0 3px rgba(245,197,24,.2);
}
.sp-range-val { font-family: var(--sp-font-d); font-size: 1rem; font-weight: 700; color: var(--sp-sun); min-width: 48px; text-align: right; }

/* ── Toggle Cards (Optionen) ── */
.sp-toggle-card { background: var(--sp-card2); border: 1.5px solid var(--sp-border); border-radius: var(--sp-radius); padding: 16px 20px; margin-bottom: 12px; transition: border-color .2s, background .2s; }
.sp-toggle-card.on { border-color: var(--sp-sun); background: rgba(245,197,24,.04); }
.sp-toggle-header { display: flex; align-items: center; gap: 14px; cursor: pointer; user-select: none; }
.sp-toggle-icon { font-size: 1.5rem; }
.sp-toggle-info { flex: 1; }
.sp-toggle-info strong { font-family: var(--sp-font-d); font-size: .95rem; display: block; }
.sp-toggle-info span  { font-size: .78rem; color: var(--sp-muted); }
/* Switch */
.sp-switch { width: 48px; height: 26px; background: rgba(255,255,255,.1); border-radius: 13px; position: relative; flex-shrink: 0; transition: background .2s; }
.sp-switch::after { content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.3); transition: transform .2s; }
.sp-switch.on { background: var(--sp-sun); }
.sp-switch.on::after { transform: translateX(22px); background: var(--sp-night); }
.sp-toggle-fields { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--sp-border); display: none; }
.sp-toggle-card.on .sp-toggle-fields { display: block; }

/* ── Persona Cards ── */
.sp-persona-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 20px; }
@media (max-width: 500px) { .sp-persona-grid { grid-template-columns: 1fr 1fr; } }
.sp-persona { background: var(--sp-card); border: 2px solid var(--sp-border); border-radius: var(--sp-radius); padding: 14px 10px; text-align: center; cursor: pointer; transition: all .2s; }
.sp-persona:hover { border-color: rgba(245,197,24,.4); background: var(--sp-card2); }
.sp-persona.sel { border-color: var(--sp-sun); background: rgba(245,197,24,.06); }
.sp-persona .sp-p-icon { font-size: 2rem; margin-bottom: 4px; }
.sp-persona .sp-p-name { font-family: var(--sp-font-d); font-size: .82rem; font-weight: 600; }
.sp-persona .sp-p-hint { font-size: .72rem; color: var(--sp-muted); margin-top: 2px; }

/* ── Buttons ── */
.sp-btn-row { display: flex; gap: 12px; justify-content: flex-end; margin-top: 28px; flex-wrap: wrap; }
.sp-btn { padding: 11px 24px; border-radius: 8px; border: none; font-family: var(--sp-font-d); font-size: .9rem; font-weight: 700; cursor: pointer; transition: all .15s; letter-spacing: .02em; }
.sp-btn-primary  { background: var(--sp-sun); color: var(--sp-night); }
.sp-btn-primary:hover  { background: var(--sp-sun-dim); transform: translateY(-1px); box-shadow: 0 4px 16px rgba(245,197,24,.3); }
.sp-btn-ghost    { background: transparent; color: var(--sp-muted); border: 1.5px solid var(--sp-border); }
.sp-btn-ghost:hover    { color: var(--sp-text); border-color: rgba(255,255,255,.2); }
.sp-btn-green    { background: var(--sp-green); color: #fff; }
.sp-btn-green:hover    { background: var(--sp-green-dim); transform: translateY(-1px); box-shadow: 0 4px 16px rgba(34,197,94,.3); }
.sp-btn:disabled { opacity: .5; cursor: not-allowed; transform: none !important; }

/* ── Loading ── */
.sp-spinner { width: 40px; height: 40px; border: 3px solid rgba(245,197,24,.15); border-top-color: var(--sp-sun); border-radius: 50%; animation: sp-spin .7s linear infinite; margin: 0 auto; }
@keyframes sp-spin { to { transform: rotate(360deg); } }
.sp-loading-overlay { text-align: center; padding: 60px 20px; }
.sp-loading-overlay p { color: var(--sp-muted); font-size: .88rem; margin-top: 14px; }

/* ── Ergebnis Phase 1 ── */
.sp-result-intro { background: linear-gradient(135deg, var(--sp-card), var(--sp-card2)); border: 1px solid var(--sp-border); border-radius: var(--sp-radius); padding: 20px 24px; margin-bottom: 20px; }
.sp-result-headline { font-family: var(--sp-font-d); font-size: 1.1rem; font-weight: 700; margin-bottom: 4px; }
.sp-result-sub { font-size: .83rem; color: var(--sp-muted); }

/* Kacheln */
.sp-kpi-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 20px; }
@media (max-width: 600px) { .sp-kpi-grid { grid-template-columns: 1fr 1fr; } }
.sp-kpi { background: var(--sp-card); border-radius: var(--sp-radius-sm); padding: 14px 16px; border-left: 3px solid; }
.sp-kpi .sp-kpi-label { font-size: .73rem; color: var(--sp-muted); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 4px; }
.sp-kpi .sp-kpi-val   { font-family: var(--sp-font-d); font-size: 1.25rem; font-weight: 700; }

/* Chart-Container */
.sp-chart-box { background: var(--sp-card); border: 1px solid var(--sp-border); border-radius: var(--sp-radius); padding: 16px 20px; margin-bottom: 14px; }
.sp-chart-box h3 { font-family: var(--sp-font-d); font-size: .9rem; font-weight: 600; margin-bottom: 14px; color: var(--sp-muted); text-transform: uppercase; letter-spacing: .05em; }
.sp-chart-wrap { position: relative; height: 200px; }

/* Energiefluss-Diagramm */
.sp-flow-diagram { display: flex; align-items: center; justify-content: space-around; padding: 24px 16px; flex-wrap: wrap; gap: 12px; }
.sp-flow-node { text-align: center; }
.sp-flow-node .sp-fn-icon { font-size: 2.2rem; margin-bottom: 4px; }
.sp-flow-node .sp-fn-label { font-size: .72rem; color: var(--sp-muted); }
.sp-flow-node .sp-fn-val { font-family: var(--sp-font-d); font-size: .9rem; font-weight: 700; }
.sp-flow-arrow { font-size: 1.4rem; color: var(--sp-border); flex-shrink: 0; }

/* Autarkie Gauge */
.sp-gauge-row { display: flex; gap: 16px; align-items: center; margin-bottom: 16px; flex-wrap: wrap; }
.sp-gauge-item { flex: 1; min-width: 140px; }
.sp-gauge-item .sp-g-label { font-size: .75rem; color: var(--sp-muted); margin-bottom: 6px; text-transform: uppercase; letter-spacing: .04em; }
.sp-gauge-bar { height: 8px; background: rgba(255,255,255,.08); border-radius: 4px; overflow: hidden; margin-bottom: 4px; }
.sp-gauge-fill { height: 100%; border-radius: 4px; transition: width .8s ease; }
.sp-gauge-item .sp-g-val { font-family: var(--sp-font-d); font-size: 1.1rem; font-weight: 700; }

/* Finanztabelle */
.sp-fin-table { width: 100%; border-collapse: collapse; font-size: .85rem; }
.sp-fin-table th { text-align: left; padding: 8px 10px; background: rgba(255,255,255,.04); color: var(--sp-muted); font-weight: 500; font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; }
.sp-fin-table td { padding: 8px 10px; border-bottom: 1px solid var(--sp-border); }
.sp-fin-table td:last-child { text-align: right; font-family: var(--sp-font-d); font-weight: 600; }
.sp-fin-table .sp-total td { background: rgba(245,197,24,.07); color: var(--sp-sun); font-weight: 700; font-size: .95rem; }
.sp-color-green  { color: var(--sp-green)  !important; }
.sp-color-sun    { color: var(--sp-sun)    !important; }
.sp-color-blue   { color: var(--sp-blue)   !important; }
.sp-color-red    { color: var(--sp-red)    !important; }
.sp-color-purple { color: var(--sp-purple) !important; }
.sp-color-orange { color: var(--sp-orange) !important; }

/* CO2 Banner */
.sp-co2-banner { background: linear-gradient(135deg, rgba(34,197,94,.12), rgba(34,197,94,.04)); border: 1px solid rgba(34,197,94,.3); border-radius: var(--sp-radius); padding: 16px 20px; display: flex; align-items: center; gap: 16px; }
.sp-co2-icon { font-size: 2.4rem; }
.sp-co2-text strong { font-family: var(--sp-font-d); font-size: 1.05rem; color: var(--sp-green); display: block; }
.sp-co2-text span { font-size: .8rem; color: rgba(134,239,172,.8); }

/* Hinweis */
.sp-hinweis { font-size: .75rem; color: rgba(148,163,184,.6); border-top: 1px solid var(--sp-border); padding-top: 14px; margin-top: 6px; line-height: 1.6; }

/* ── Phase-Trenner ── */
.sp-phase-divider { display: flex; align-items: center; gap: 14px; margin: 28px 0 20px; }
.sp-phase-divider::before, .sp-phase-divider::after { content: ''; flex: 1; height: 1px; background: var(--sp-border); }
.sp-phase-badge { background: var(--sp-sun); color: var(--sp-night); font-family: var(--sp-font-d); font-size: .78rem; font-weight: 700; padding: 4px 14px; border-radius: 20px; white-space: nowrap; letter-spacing: .04em; }

/* Scroll fix für lange Pages */
#sp-app { scroll-behavior: smooth; }