:root{--bg:#0b1220;--panel:#fff;--muted:#667085;--line:#e5e7eb;--text:#101828;--brand:#0d6efd;--shadow:0 18px 60px rgba(15,23,42,.14)}*{box-sizing:border-box}body{margin:0;background:linear-gradient(135deg,#07101e,#1d335c 44%,#f4f7fb 44%);font-family:Inter,Segoe UI,Arial,sans-serif;color:var(--text)}.topbar{color:#fff;padding:34px clamp(20px,4vw,56px);display:flex;align-items:flex-start;justify-content:space-between;gap:24px}.eyebrow{text-transform:uppercase;letter-spacing:.16em;color:#b8c7df;font-size:12px;font-weight:800}.topbar h1{margin:.35rem 0 0;font-size:clamp(26px,3vw,42px);line-height:1.1}.language-form{display:flex;gap:10px;align-items:center;background:rgba(255,255,255,.12);padding:12px 14px;border-radius:14px}.language-form select{border:0;border-radius:10px;padding:8px 10px}.shell{max-width:1480px;margin:0 auto;padding:0 clamp(14px,2.5vw,36px) 34px}.card{background:rgba(255,255,255,.96);border:1px solid rgba(255,255,255,.6);border-radius:24px;box-shadow:var(--shadow);overflow:hidden}.hero-card{padding:22px}.form-grid{display:grid;grid-template-columns:repeat(4,minmax(210px,1fr));gap:18px}.form-grid fieldset{border:1px solid var(--line);border-radius:18px;padding:16px;margin:0;background:#fbfcff}.form-grid legend{font-weight:800;color:#263755;padding:0 8px}.field{display:grid;gap:6px;margin:10px 0}.field span{font-size:13px;color:#344054}.field input{width:100%;padding:9px 10px;border:1px solid #cbd5e1;border-radius:10px;font-size:14px;background:#fff}.field.check{display:flex;align-items:center;justify-content:space-between}.field.check input{width:auto;transform:scale(1.2)}.actions{grid-column:1/-1;display:flex;gap:12px;flex-wrap:wrap}.primary,.secondary{border:0;border-radius:14px;padding:12px 18px;text-decoration:none;font-weight:800;cursor:pointer}.primary{background:linear-gradient(135deg,#0d6efd,#05a7c9);color:white}.secondary{background:#eef2f7;color:#263755}.alert{background:#fff1f2;color:#9f1239;border:1px solid #fecdd3;border-radius:16px;padding:14px 18px;margin-bottom:16px}.kpi-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin:18px 0}.kpi{background:#fff;border-radius:22px;padding:22px;box-shadow:var(--shadow);border-top:5px solid var(--brand)}.kpi span{display:block;color:var(--muted);font-size:13px;font-weight:800}.kpi strong{display:block;font-size:clamp(24px,2.4vw,34px);margin:6px 0}.kpi small{color:var(--muted)}.workspace{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:18px;align-items:start}.section-head{padding:18px 20px;border-bottom:1px solid var(--line)}.section-head h2,.table-card h2{margin:0;font-size:20px}.diagram-card{overflow:visible}.schema-wrap{background:#050505;padding:28px 42px 34px;border-radius:0 0 24px 24px;overflow:visible}.schema-imagebox{position:relative;display:block;width:min(100%,580px);margin:0 auto;overflow:visible}.schema-wrap img{display:block;width:100%;height:auto;object-fit:contain}.overlay{position:absolute;transform:translate(-50%,-50%);background:rgba(255,255,255,.94);border:1px solid #cbd5e1;border-radius:8px;padding:3px 6px;font-size:clamp(10px,1vw,13px);font-weight:800;color:#0f172a;white-space:nowrap;box-shadow:0 4px 12px rgba(0,0,0,.2)}.overlay.edge-right{transform:translate(-100%,-50%)}.overlay.edge-left{transform:translate(0,-50%)}.hx-wrap{padding:16px;background:#fff}.hx-svg{width:100%;height:auto;display:block}.svg-bg{fill:#fff}.grid{stroke:#e5e7eb;stroke-width:1}.axis{stroke:#111827;stroke-width:2}.axis-label,.tick{font:12px Inter,Arial;fill:#475467}.rh-curve{stroke:#aab3c2}.sat-curve{stroke:#3b27d9}.sat-label{font:13px Inter,Arial;fill:#3b27d9;font-weight:800}.comfort{fill:rgba(4,167,119,.16);stroke:#04a777;stroke-width:2}.comfort-label{font:13px Inter,Arial;fill:#039269;font-weight:900}.comfort-label.sub{font-size:11px}.comfort-cap-label{font:10px Inter,Arial;fill:#039269;font-weight:800}.base-process{stroke:#111827}.sorp-process{stroke:#ef0000}.pt.base{fill:#111827}.pt.sorp{fill:#ef0000}.pt-label{font:14px Georgia,serif;font-weight:800}.pt-label.base{fill:#111827}.pt-label.sorp{fill:#ef0000}.tables{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:18px}.table-card{padding:20px}.table-card table{width:100%;border-collapse:collapse;margin-top:12px}.table-card th,.table-card td{border-bottom:1px solid var(--line);padding:9px 0;text-align:left;vertical-align:top}.table-card th{color:#475467;font-weight:600;padding-right:14px}.table-card td{text-align:right;font-weight:800}.empty{padding:30px;margin-top:18px}footer{text-align:center;color:#667085;padding:25px}@media(max-width:1280px){.form-grid{grid-template-columns:repeat(2,1fr)}.workspace,.tables{grid-template-columns:1fr}.kpi-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:620px){.topbar{display:block}.language-form{margin-top:18px}.form-grid,.kpi-grid{grid-template-columns:1fr}.overlay{font-size:9px}.table-card td{text-align:left}.table-card th,.table-card td{display:block}}

/* v7: fixed two-image schema switch */
.schema-frame {
  background: #ffffff;
  border-radius: 14px;
  padding: 14px;
  overflow: auto;
}

.schema-frame img {
  display: block;
  width: 100%;
  max-width: 980px;
  height: auto;
  margin: 0 auto;
  background: #ffffff;
}

.range-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 6px;
  font-size: 13px;
  color: #344054;
}

.range-meta span {
  font-weight: 400;   /* links normal */
}

.range-meta output {
  font-weight: 400;   /* rechts NICHT fett */
  text-align: right;
  min-width: 32px;    /* sorgt für saubere Ausrichtung */
}

.field output {
  font-weight: 400;
}

.pre-cooler-toggle {
  border: 1px solid rgba(13, 110, 253, 0.25);
  background: rgba(13, 110, 253, 0.06);
  border-radius: 12px;
  padding: 10px 12px;
}

.field input[type="range"] {
  padding: 0;
}

.field input[type="range"].is-disabled {
  opacity: 0.35;
}

/* v7b: Vorkühler-Umschaltung */
.schema-frame {
  background: #ffffff;
  border-radius: 14px;
  padding: 14px;
  overflow: auto;
}

.schema-frame img {
  display: block;
  width: 100%;
  max-width: 980px;
  height: auto;
  margin: 0 auto;
  background: #ffffff;
}

.pre-cooler-toggle {
  margin: 10px 0;
  padding: 10px 12px;
  border: 1px solid rgba(13, 110, 253, 0.25);
  background: rgba(13, 110, 253, 0.06);
  border-radius: 12px;
  font-weight: 700;
}

/* v7 visual cleanup */
.workspace {
  display: grid;
  grid-template-columns: minmax(520px, 1.05fr) minmax(520px, 0.95fr);
  gap: 18px;
  align-items: start;
}

.diagram-card,
.hx-card {
  overflow: visible;
}

.schema-wrap,
.schema-imagebox,
.schema-frame {
  background: #ffffff !important;
}

.schema-imagebox {
  border-radius: 18px;
  padding: 18px;
  overflow: auto;
}

.schema-frame {
  position: relative;
  border-radius: 14px;
  padding: 0;
  overflow: visible;
}

.schema-frame img {
  display: block;
  width: 100%;
  max-width: 980px;
  height: auto;
  margin: 0 auto;
  background: #ffffff;
  border-radius: 8px;
}

.overlay {
  font-weight: 500 !important;
  font-size: 11px !important;
  line-height: 1.15 !important;
  padding: 3px 6px !important;
  border-radius: 7px !important;

  background: transparent !important;
  border: none !important;
  box-shadow: none !important;

  color: #111827 !important;
}

.hx-wrap svg {
  display: block;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  overflow: visible !important;
}

@media (max-width: 1100px) {
  .workspace {
    grid-template-columns: 1fr;
  }
}

/* v7b: sauberes Schema, h-x-Karte und Solarkollektor-Block */
.workspace {
  display: grid;
  grid-template-columns: minmax(560px, 1.05fr) minmax(520px, 0.95fr);
  gap: 22px;
  align-items: start;
}

.diagram-card,
.hx-card {
  overflow: hidden;
}

.schema-wrap,
.schema-imagebox,
.schema-frame {
  background: #ffffff !important;
}

.schema-imagebox {
  border-radius: 18px;
  padding: 18px;
  overflow: auto;
}

.schema-frame {
  position: relative;
  border-radius: 14px;
  padding: 0;
  overflow: visible;
}

.schema-frame img {
  display: block;
  width: 100%;
  max-width: 980px;
  height: auto;
  margin: 0 auto;
  background: #ffffff;
  border-radius: 8px;
}

.overlay {
  font-weight: 500 !important;
  font-size: 11px !important;
  line-height: 1.15 !important;
  padding: 3px 6px !important;
  border-radius: 7px !important;

  background: transparent !important;
  border: none !important;
  box-shadow: none !important;

  color: #111827 !important;
}

.hx-card {
  display: flex;
  flex-direction: column;
}

.hx-wrap {
  padding: 14px 18px 4px;
  overflow: hidden !important;
}

.hx-wrap svg {
  display: block;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  max-height: 430px;
  margin: 0 auto;
}

.solar-strip {
  padding: 8px 18px 18px;
}

.solar-box {
  border: 1px solid rgba(13, 110, 253, 0.18);
  background: rgba(13, 110, 253, 0.045);
  border-radius: 16px;
  padding: 14px 16px;
}

.solar-title {
  font-size: 0.95rem;
  font-weight: 800;
  margin-bottom: 12px;
  color: #0f172a;
}

.solar-values {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.solar-values div {
  background: rgba(255,255,255,0.82);
  border: 1px solid rgba(15,23,42,0.06);
  border-radius: 12px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.solar-values strong {
  font-size: 1.08rem;
  font-weight: 800;
  color: #0f172a;
}

.solar-values span {
  font-size: 0.78rem;
  color: #667085;
}

@media (max-width: 1180px) {
  .workspace {
    grid-template-columns: 1fr;
  }

  .hx-wrap svg {
    max-height: none;
  }
}

@media (max-width: 760px) {
  .solar-values {
    grid-template-columns: 1fr;
  }
}

/* v7c: rechte Spalte mit h-x oben und Solarthermie unten */
.workspace {
  display: grid !important;
  grid-template-columns: minmax(620px, 1.08fr) minmax(520px, 0.92fr) !important;
  gap: 22px !important;
  align-items: stretch !important;
}

.diagram-card {
  height: 100%;
  overflow: hidden !important;
}

.right-column {
  display: flex;
  flex-direction: column;
  gap: 22px;
  height: 100%;
  min-height: 0;
}

.hx-card {
  flex: 1 1 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden !important;
}


.hx-wrap {
  flex: 1 1 auto;
  min-height: 0;
  padding: 14px 18px 16px !important;
  overflow: hidden !important;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hx-wrap svg {
  display: block;
  width: 100% !important;
  height: auto !important;
  max-height: none !important;
}

.solar-card {
  flex: 1 1 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.solar-content {
  padding: 18px 20px 20px;
}

.solar-main {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
}

.solar-icon {
  width: 46px;
  height: 46px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  font-size: 24px;
  background: linear-gradient(135deg, #fff7cc, #ffe08a);
  box-shadow: 0 10px 24px rgba(245, 158, 11, 0.18);
}

.solar-title {
  font-size: 1.05rem;
  font-weight: 850;
  color: #0f172a;
}

.solar-subtitle {
  margin-top: 3px;
  font-size: 0.82rem;
  color: #667085;
}

.solar-values {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.solar-values div {
  background: rgba(255,255,255,0.88);
  border: 1px solid rgba(15,23,42,0.08);
  border-radius: 14px;
  padding: 12px 13px;
  min-width: 0;
}

.solar-values span {
  display: block;
  font-size: 0.76rem;
  color: #667085;
  margin-bottom: 6px;
  line-height: 1.25;
}

.solar-values strong {
  display: block;
  font-size: 1.12rem;
  font-weight: 850;
  color: #0f172a;
  white-space: nowrap;
}

/* Schema sauber auf weiss, keine schwarze Spucki-Flaeche */
.schema-wrap,
.schema-imagebox,
.schema-frame {
  background: #ffffff !important;
}

.schema-imagebox {
  border-radius: 18px;
  padding: 18px !important;
  overflow: auto !important;
}

.schema-frame {
  position: relative;
  border-radius: 14px;
  padding: 0 !important;
  overflow: visible !important;
}

.schema-frame img {
  display: block;
  width: 100%;
  max-width: 980px;
  height: auto;
  margin: 0 auto;
  background: #ffffff;
  border-radius: 8px;
}

/* Overlays dezenter */
.overlay {
  font-weight: 500 !important;
  font-size: 11px !important;
  line-height: 1.15 !important;

  padding: 0 !important;              /* wichtig */
  border-radius: 0 !important;        /* wichtig */

  background: transparent !important;
  border: none !important;
  box-shadow: none !important;

  color: #111827 !important;
}

@media (max-width: 1180px) {
  .workspace {
    grid-template-columns: 1fr !important;
  }

  .right-column {
    height: auto;
  }

  .hx-wrap svg {
    max-height: none !important;
  }
}

@media (max-width: 760px) {
  .solar-values {
    grid-template-columns: 1fr;
  }
}

.state-table-wrap {
  margin-top: 18px;
  display: grid;
  gap: 14px;
  overflow-x: auto;
}

.state-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 11px;
  background: rgba(255,255,255,0.88);
  border: 1px solid rgba(15,23,42,0.12);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 8px 22px rgba(15,23,42,0.08);
}

.state-table th,
.state-table td {
  padding: 6px 8px;
  text-align: center;
  white-space: nowrap;
  border-right: 1px solid rgba(15,23,42,0.10);
  border-bottom: 1px solid rgba(15,23,42,0.10);
}

.state-table th:last-child,
.state-table td:last-child {
  border-right: none;
}

.state-table tr:last-child th,
.state-table tr:last-child td {
  border-bottom: none;
}

.state-title-row th {
  background: #0b1f4d !important;   /* dunkel */
  color: #ffffff !important;        /* weißer Text */
  font-weight: 700;
  text-align: left;
}

.state-title-row.sorp th {
  background: linear-gradient(135deg, #7f1d1d, #dc2626);
}

.state-point-row th {
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  color: #ffffff;
}

.state-table th:first-child {
  text-align: left;
  background: rgba(241,245,249,0.95);
  font-weight: 700;
}

.state-table td {
  background: rgba(255,255,255,0.72);
}

.state-table tr:nth-child(even) td {
  background: rgba(248,250,252,0.72);
}
.field .range-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.field .range-output {
  margin-left: auto;
  text-align: right;
}
.solar-bar {
  margin-top: 16px;
  height: 10px;
  background: #e5e7eb;
  border-radius: 999px;
  overflow: hidden;
}

.solar-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #facc15, #f59e0b);
}

.solar-note {
  margin: 14px 0 0;
  font-size: 0.82rem;
  line-height: 1.4;
  color: #667085;
}
.solar-hero {
  margin: 14px 0 10px;
  padding: 14px 18px;
  border-radius: 18px;
  background: linear-gradient(135deg, #fff7cc, #ffedd5);
  border: 1px solid rgba(245, 158, 11, 0.25);
}
.solar-hero span {
  display: block;
  font-size: 0.82rem;
  color: #92400e;
  font-weight: 800;
  margin-bottom: 6px;
}

.solar-hero strong {
  display: block;
  font-size: 2.25rem;
  line-height: 1;
  color: #0f172a;
  font-weight: 900;
}

.solar-hero small {
  display: block;
  margin-top: 8px;
  color: #92400e;
  font-weight: 700;
}
/* ===== SOLAR PREMIUM CARD ===== */

.solar-content {
  padding: 16px 18px 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.solar-topline {
  display: flex;
  align-items: center;
  gap: 14px;
}

.solar-badge {
  width: 46px;
  height: 46px;
  border-radius: 14px;
  background: linear-gradient(135deg,#ffe082,#ffca28);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  flex: 0 0 auto;
}

.solar-heading {
  flex: 1;
  min-width: 0;
}

.solar-title {
  font-size: 1.15rem;
  font-weight: 850;
  color: #0f172a;
  line-height: 1.1;
}

.solar-subtitle {
  margin-top: 4px;
  font-size: 0.78rem;
  color: #667085;
}

.solar-share {
  text-align: right;
}

.solar-share strong {
  display: block;
  font-size: 1.8rem;
  line-height: 1;
  font-weight: 900;
  color: #d97706;
  letter-spacing: -0.04em;
}

.solar-share span {
  font-size: 0.72rem;
  color: #92400e;
  font-weight: 700;
}

.solar-hero {
  display: flex;
  justify-content: space-between;
  align-items: center;

  padding: 14px 16px;

  border-radius: 18px;

  background:
    linear-gradient(
      135deg,
      rgba(255,247,204,0.95),
      rgba(255,237,213,0.92)
    );

  border: 1px solid rgba(245,158,11,0.24);
}

.solar-hero-left span {
  display: block;
  font-size: 0.78rem;
  font-weight: 700;
  color: #92400e;
  margin-bottom: 6px;
}

.solar-big-number {
  font-size: 3.1rem;
  line-height: 0.95;
  font-weight: 950;
  letter-spacing: -0.06em;
  color: #020617;
}

.solar-temp-label {
  font-size: 0.72rem;
  color: #667085;
  margin-bottom: 4px;
  text-align: right;
}

.solar-temp {
  font-size: 1.25rem;
  font-weight: 850;
  letter-spacing: -0.03em;
  color: #0f172a;
  text-align: right;
}

.solar-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 10px;
}

.solar-kpi {
  padding: 10px 12px;

  border-radius: 14px;

  background: rgba(248,250,252,0.72);

  border: 1px solid rgba(15,23,42,0.08);
}

.solar-kpi span {
  display: block;
  font-size: 0.70rem;
  color: #667085;
  margin-bottom: 4px;
  line-height: 1.15;
}

.solar-kpi strong {
  display: block;
  font-size: 1.02rem;
  line-height: 1.1;
  font-weight: 850;
  letter-spacing: -0.03em;
  color: #020617;
}

.solar-kpi.subtle {
  opacity: 0.92;
}

@media (max-width: 760px) {

  .solar-grid {
    grid-template-columns: 1fr;
  }

  .solar-hero {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .solar-temp,
  .solar-temp-label {
    text-align: left;
  }
}
.tech-details {
  grid-column: 1 / -1;
  background: rgba(255,255,255,0.96);
  border-radius: 22px;
  box-shadow: var(--shadow);
  padding: 18px 20px;
}

.tech-details > summary {
  cursor: pointer;
  font-weight: 900;
  color: #0f172a;
  list-style: none;
}

.tech-details > summary::-webkit-details-marker {
  display: none;
}

.tech-details > summary::after {
  content: "▾";
  float: right;
  color: #667085;
}

.tech-details[open] > summary {
  margin-bottom: 16px;
}
/* Form select fields: same look as numeric inputs + prevent column overflow */
.form-grid,
.form-grid fieldset,
.field {
  min-width: 0;
}

.field select {
  width: 100%;
  max-width: 100%;
  min-width: 0;

  padding: 9px 10px;
  border: 1px solid #cbd5e1;
  border-radius: 10px;
  font-size: 14px;
  background: #fff;
  color: #101828;

  font-family: inherit;
  line-height: 1.35;
}

.field select:focus,
.field input:focus {
  outline: none;
  border-color: #0d6efd;
  box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.14);
}

.form-grid fieldset {
  overflow: hidden;
}
.field input.is-disabled {
  background: #eef2f7;
  color: #98a2b3;
  cursor: not-allowed;
  opacity: 1;
}
.calculated-field {
  background: #eef2f7 !important;
  color: #445;
  border-color: #cfd8e3;
  cursor: default;
  font-weight: 600;
}

.calculated-field:disabled {
  opacity: 1;
}