/* Wärme-Check im CI der Gothaer Stadtwerke ENERGIE.
   Überschreibt das Original-CSS des Kunden (waermecheck.css), ohne es zu ändern.
   Die App setzt --wc-primary/-primary-dark/-accent per Inline-Style aus waermecheck-daten.js;
   !important hält die CI-Farben unabhängig von Backend-Exporten. */

#wc-app.wc {
  --wc-primary: #00847e !important;
  --wc-primary-dark: #005057 !important;
  --wc-accent: #76b82a !important;
  --wc-bg: #ffffff;
  --wc-card: var(--surface-light);
  --wc-text: var(--text-color);
  --wc-muted: var(--text-muted);
  --wc-line: var(--surface-dark);

  max-width: none;
  padding: 0;
  border-radius: 0;
  background: transparent;
  font-family: var(--font-family-base);
  font-size: max(16px, 0.85rem);
}

/* Original-CSS setzt einen grauen Seitenhintergrund */
body { background: var(--white); }

/* Überschrift und Einleitung stehen im Seiten-Intro – im Tool bleiben nur die Schritte */
.wc-head { justify-content: flex-start; margin-bottom: 1.5rem; }
.wc-head > div:first-child { display: none; }

.wc-steps li { border: 2px solid var(--surface-mid); background: #fff; }
.wc-steps li.is-active { border-color: var(--petrol); font-weight: 700; }
.wc-steps li span { background: var(--surface-light); }
.wc-steps li em { font-style: normal; }

/* Flächen: flach und eckig wie Service-Bereich/Infoboxen im Entwurf */
.wc-card { border: 0; border-radius: 0; padding: 1.5rem; }
.wc-mapcard { padding: 0.75rem; }
.wc-map { border-radius: 0; }

.wc-panel h2 { font-size: clamp(1.4rem, 1.8vw, 1.7rem); font-weight: 900; }
.wc-panel h3 { font-weight: 700; }
.wc-sec { color: var(--purple); }

.wc-tile, .wc-kpi, .wc-note, .wc-split, .wc-details { border-radius: 0; }
.wc-num { background: var(--purple); }
.wc-check li::before { border-color: var(--purple); }
.wc-kpi strong { font-weight: 900; }
.wc-price { font-weight: 900; }
.wc-var { background: #fff; border-width: 2px; border-radius: 0; }
.wc-var--hl { border-color: var(--petrol); }
.wc-status { border-radius: 0; }
.wc-badge { font-weight: 700; letter-spacing: 0.02em; }

/* Eingaben als Pills wie der Tarifrechner der Startseite */
.wc-input, .wc select, .wc input[type=text], .wc input[type=email], .wc input[type=tel], .wc input[type=number] {
  border: 2px solid var(--surface-mid);
  border-radius: 100px;
  padding: 0.6em 1.1em;
}
.wc textarea { border: 2px solid var(--surface-mid); border-radius: 1rem; }
.wc-unit span { right: 1.1em; }
.wc-seg label { border: 2px solid var(--surface-mid); border-radius: 100px; background: #fff; }
.wc-results { border-radius: 1rem; background: #fff; }

/* Buttons als Pills */
.wc-btn {
  border: 2px solid var(--petrol);
  border-radius: 100px;
  padding: 0.55em 1.4em;
  font-weight: 700;
}
.wc-btn:hover { border-color: var(--petrol-dark); }
.wc-btn--ghost { background: #fff; border-width: 2px; }
.wc-btn--ghost:hover { background: var(--petrol); color: #fff; }
.wc-btn--accent { background: var(--green); border-color: var(--green); color: #fff; }
.wc-btn--accent:hover { background: var(--green-dark); border-color: var(--green-dark); }
.wc-btn--sm { padding: 0.4em 1em; }

.wc-grosshint { border-radius: 0; }
.wc-foot { margin-top: 1.5rem; }
.wc-foot a { color: var(--petrol); }

@media (max-width: 900px) {
  .wc-card { padding: 1rem; }
}

/* Leaflet setzt .75rem – bei 20px Basisschrift zu groß */
.wc .leaflet-control-attribution { font-size: 11px; }

/* Fehlermeldung beim Absenden (Anpassung in waermecheck-app.js, sendLead) */
.wc-fehler {
  display: block;
  margin-top: 0.5rem;
  padding: 0.75em 1em;
  border-left: 4px solid #b3261e;
  background: #fbeaea;
  color: var(--text-color);
  font-size: 0.875rem;
  line-height: 1.5;
}
.wc-fehler a { color: var(--petrol); font-weight: 700; }