:root{--bg:#0f1115;--card:#171a21;--text:#e7e7e7;--muted:#a9b1bd;--accent:#5aa9ff;--warn:#3a2a18;}
*{box-sizing:border-box}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;background:var(--bg);color:var(--text)}
.container{max-width:min(96vw,2200px);margin:0 auto;padding:20px}
h1{margin:0 0 10px 0}
h2{margin:0 0 10px 0;font-size:18px}
p{margin:8px 0}
.muted{color:var(--muted);font-size:13px}
.grid{display:grid;grid-template-columns:1fr;gap:14px;align-items:start;grid-auto-flow:row dense}
.grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.card{background:var(--card);border:1px solid #252a35;border-radius:12px;padding:14px}
.card.full{grid-column:1 / -1}
.card.warn{background:var(--warn);border-color:#5a3a12}
label{display:block;margin:10px 0 6px 0;font-size:13px;color:var(--muted)}
.label-help{display:flex;align-items:center;gap:6px}
.label-help-text{display:inline-block}
.info-wrap{position:relative;display:inline-flex;align-items:center}
.info-btn{
  width:18px;height:18px;border-radius:50%;
  border:1px solid #3a475f;background:#111724;color:#9ec7ff;
  font-size:12px;line-height:1;font-weight:700;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;
  padding:0;
}
.info-btn:hover{border-color:var(--accent);color:var(--accent)}
.info-popover{
  position:absolute;z-index:40;top:24px;left:0;min-width:280px;max-width:420px;
  background:#0d121c;border:1px solid #2d3a50;border-radius:10px;padding:10px 12px;
  box-shadow:0 8px 24px rgba(0,0,0,.35);display:none;color:var(--text);font-size:12px;
}
.info-wrap:hover .info-popover,.info-wrap.open .info-popover{display:block}
.info-popover .t{font-weight:700;color:#d7e7ff;margin-bottom:6px}
.info-popover p{margin:4px 0}
.info-popover b{color:#c9dcff}
input,select,textarea{width:100%;padding:10px;border-radius:10px;border:1px solid #2a3140;background:#0f131b;color:var(--text)}
input,select,textarea{min-height:44px}
textarea{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;height:44px;resize:vertical}
button{background:var(--accent);color:#04101f;border:none;border-radius:12px;padding:12px 14px;font-weight:700;cursor:pointer}
button:hover{filter:brightness(1.05)}
.btn-secondary{background:transparent;color:var(--text);border:1px solid #2a3140}
.btn-secondary:hover{border-color:var(--accent);filter:none}
.checkbox{display:flex;gap:10px;align-items:center}
.checkbox input{width:auto}
.two{display:grid;grid-template-columns:1fr 1fr;gap:10px}
table{width:100%;border-collapse:collapse;font-size:13px}
td,th{padding:8px;border-bottom:1px solid #262c38}
th{text-align:left;color:var(--muted);font-weight:600}
.row{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.btn{display:inline-block;padding:10px 12px;border-radius:10px;border:1px solid #2a3140;color:var(--text);text-decoration:none}
.btn:hover{border-color:var(--accent)}
/* Ausklappbare Tageswerte */
.days-accordion{ margin-top:8px }
.month-block{ margin-bottom:6px; border:1px solid #252a35; border-radius:10px; overflow:hidden }
.month-block summary{ padding:10px 12px; cursor:pointer; list-style:none; display:flex; align-items:center; gap:8px; background:#1c1f28 }
.month-block summary::-webkit-details-marker{ display:none }
.month-block summary::before{ content: "▶"; font-size:10px; margin-right:6px; transition:transform .15s }
.month-block[open] summary::before{ transform: rotate(90deg) }
.month-label{ font-weight:600 }
.month-days{ padding:8px; background:var(--card) }
.day-block{ margin-bottom:6px; border:1px solid #2a3140; border-radius:8px; overflow:hidden }
.day-block summary{ padding:8px 10px; cursor:pointer; list-style:none; font-size:13px; display:flex; flex-wrap:wrap; gap:10px; align-items:center; background:#171a21 }
.day-block summary::-webkit-details-marker{ display:none }
.day-block summary::before{ content: "▸"; font-size:10px; margin-right:4px }
.day-block[open] summary::before{ content: "▾" }
.day-date{ font-weight:600; min-width: 100px }
.hourly-table-wrap{ padding:10px; background:var(--bg); overflow-x:auto }
.hourly-table{ font-size:12px; min-width:320px }
.hourly-table td,.hourly-table th{ padding:4px 8px }
.aux-value{color:#ffb3b3;font-weight:700}
.aux-badge{
  display:inline-block;
  margin-left:6px;
  padding:1px 6px;
  border-radius:999px;
  border:1px solid #7a2d2d;
  background:#3a1b1b;
  color:#ffb3b3;
  font-size:11px;
  vertical-align:middle;
}
.aux-needed-row td{background:rgba(180, 40, 40, 0.08)}
.aux-needed-row td:first-child{border-left:2px solid #b94848}
.hourly-table .aux-needed-row td{background:rgba(180, 40, 40, 0.12)}

/* Grafik */
.chart-card{ }
.chart-toggle{ display:flex; align-items:center; gap:10px; margin-bottom:12px }
.chart-toggle span{ color:var(--muted); font-size:13px }
.chart-toggle select{ width:auto; min-width:140px }
.chart-wrap{ position:relative; height:280px }
.chart-wrap canvas{ max-height:280px }

/* Lade-Overlay beim Absenden */
.submit-overlay{ position:fixed; inset:0; background:rgba(15,17,21,0.85); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px; z-index:9999; opacity:0; visibility:hidden; transition:opacity .2s, visibility .2s }
.submit-overlay.visible{ opacity:1; visibility:visible }
.submit-overlay .spinner{ width:48px; height:48px; border:4px solid #2a3140; border-top-color:var(--accent); border-radius:50%; animation:spin 0.9s linear infinite }
.submit-overlay p{ margin:0; color:var(--muted); font-size:15px }
@keyframes spin{ to{ transform:rotate(360deg) } }
button:disabled{ opacity:0.7; cursor:not-allowed }
.wizard-form{position:relative}
.wizard-form .card[data-step]{
  grid-column:1 / -1;
  width:min(100%,1400px);
  margin-inline:auto;
}
.wizard-header{position:sticky;top:12px;z-index:30;background:rgba(23,26,33,0.95);backdrop-filter:blur(4px)}
.wizard-header-top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.wizard-progress{height:8px;border-radius:999px;background:#111724;border:1px solid #2a3140;overflow:hidden;margin:10px 0 12px}
.wizard-progress-bar{height:100%;width:0;background:linear-gradient(90deg,#4e8fe0,#69b5ff);transition:width .2s ease}
.wizard-tabs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.wizard-tab{
  background:#111724;color:#d0d8e7;border:1px solid #2a3140;border-radius:10px;padding:9px 10px;
  display:flex;align-items:center;justify-content:center;
  text-align:center;font-size:12px;line-height:1.3;min-height:44px;
}
.wizard-tab.active{border-color:var(--accent);box-shadow:0 0 0 1px rgba(90,169,255,0.3) inset;color:#eef6ff}
.wizard-tab.is-complete{border-color:#39608f;color:#b7d3f5}
.wizard-step-hidden{display:none !important}
.wizard-actions{display:flex;justify-content:space-between;gap:10px;position:sticky;bottom:12px;z-index:25}
.wizard-actions button{min-width:120px}
.wizard-actions #wizard-next{margin-left:auto}
.wizard-review{display:grid;grid-template-columns:repeat(2,minmax(280px,1fr));gap:12px;margin:8px 0 14px}
.wizard-review-section{border:1px solid #2a3140;border-radius:10px;padding:10px;background:#0f131b}
.wizard-review-section h3{margin:0 0 8px 0;font-size:14px}
.wizard-review-section ul{list-style:none;padding:0;margin:0;display:grid;gap:4px}
.wizard-review-section li{display:flex;justify-content:space-between;gap:10px;font-size:12px}
.wizard-review-key{color:var(--muted)}
.source-map{height:420px;border:1px solid #2a3140;border-radius:10px;margin-top:8px}
.source-map-actions{margin-top:8px;display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.source-map-actions .checkbox{margin:0}

@media (min-width: 900px){
  .grid{grid-template-columns:repeat(2,minmax(320px,1fr))}
  .wizard-tabs{grid-template-columns:repeat(3,minmax(0,1fr))}
}

@media (min-width: 1400px){
  .grid{grid-template-columns:repeat(12,minmax(0,1fr));gap:16px}
  .container{padding:24px}
  .card-source{grid-column:span 3;order:1}
  .card-heating{grid-column:span 3;order:2}
  .card-building{grid-column:span 3;order:3}
  .card-season{grid-column:span 3;order:4}
  .card-wp{grid-column:span 8;order:5}
  .card-pv{grid-column:span 4;order:6}
  .card.full{grid-column:1 / -1}
  .wizard-tabs{grid-template-columns:repeat(6,minmax(0,1fr))}
  .source-map{height:500px}
}

@media (min-width: 2000px){
  .grid{grid-template-columns:repeat(16,minmax(0,1fr));gap:18px}
  .container{max-width:min(98vw,2400px);padding:28px}
  .card-source{grid-column:span 4;order:1}
  .card-heating{grid-column:span 4;order:2}
  .card-building{grid-column:span 4;order:3}
  .card-season{grid-column:span 4;order:4}
  .card-wp{grid-column:span 10;order:5}
  .card-pv{grid-column:span 6;order:6}
  table{font-size:14px}
  .card{padding:16px}
  .wizard-form .card[data-step]{width:min(100%,1600px)}
  .source-map{height:560px}
}

@media (max-width: 900px){
  .grid,.grid2{grid-template-columns:1fr}
  .day-summary{ flex-direction:column; align-items:flex-start }
  .wizard-tabs{grid-template-columns:repeat(2,minmax(0,1fr))}
  .wizard-header{position:static}
  .wizard-actions{position:static}
  .wizard-review{grid-template-columns:1fr}
}