/* ============================================================
   P/W Consulting GmbH — Werkzeuge
   Energieausweis-Zulaessigkeitscheck und Foerderrechner.

   Die Klassennamen mit den Praefixen ea_/bs_/bd_/fr_ sind die
   Schnittstelle zur Rechenlogik (js/energieausweis-check.js,
   js/foerderrechner.js). Sie werden dort per Selektor gesucht —
   beim Umbenennen also immer beide Seiten anpassen.
   ============================================================ */

/* Rahmen fuer ein Werkzeug, das ueber einen Button im Seitenkopf
   aufklappt. Ist das Panel zu, faellt der Rahmen auf null Hoehe
   zusammen — die Seite sieht aus, als gaebe es ihn nicht. */
.pw-werkzeug-bereich > .pw-werkzeug {
  margin-block: clamp(26px, 4vw, 48px);
}

/* --- Gemeinsame Panel-Huelle -------------------------------- */
.pw-werkzeug {
  margin-block: clamp(10px, 2vw, 18px);
  background: var(--pw-white);
  border-top: var(--pw-linie-stark) solid var(--pw-mint);
  border-radius: var(--pw-radius-kachel);
  color: var(--pw-ink);
  overflow: hidden;
}
.pw-werkzeug--mint { background: var(--pw-mint-tint); }

.pw-werkzeug__kicker {
  margin: 0 0 10px;
  font-family: var(--pw-font-display);
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--pw-mint-ink);
}
/* "Zurueck" unten im Panel */
.ea_restart {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 4px clamp(20px, 2.8vw, 32px) clamp(20px, 2.6vw, 28px);
  padding: 10px 0;
  background: transparent;
  border: 0;
  font-family: var(--pw-font-display);
  font-size: .875rem;
  font-weight: 600;
  color: var(--pw-ink-mid);
}
.ea_restart:hover { color: var(--pw-petrol); }

/* ============================================================
   1) Energieausweis-Check
   ============================================================ */
.ea_panel { padding-bottom: 4px; }

.hero_checker_head {
  padding: clamp(22px, 2.6vw, 30px) clamp(20px, 2.8vw, 32px) 0;
}
.hero_checker_head h2 {
  font-size: clamp(1.25rem, 1.05rem + .8vw, 1.6rem);
}
.hero_kicker {
  margin: 0 0 10px;
  font-family: var(--pw-font-display);
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--pw-mint-ink);
}

.ea_q {
  padding: clamp(18px, 2.2vw, 24px) clamp(20px, 2.8vw, 32px) 0;
}
.ea_conditional { display: none; }
.ea_conditional.show { display: block; }

.ea_label {
  display: block;
  margin-bottom: 12px;
  font-family: var(--pw-font-display);
  font-size: .9375rem;
  font-weight: 600;
  color: var(--pw-ink);
}
.ea_hint {
  display: block;
  margin-top: 4px;
  font-family: var(--pw-font-text);
  font-size: .8125rem;
  font-weight: 400;
  color: var(--pw-ink-mid);
}

/* Auswahl-Kacheln (Radiobuttons ohne Punkt, eckig) */
.ea_opts {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.ea_opt {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  background: var(--pw-white);
  border: 1px solid var(--pw-border-strong);
  border-radius: var(--pw-radius-chip);
  font-size: .9375rem;
  cursor: pointer;
  transition: border-color var(--pw-dauer) var(--pw-kurve),
              background-color var(--pw-dauer) var(--pw-kurve),
              color var(--pw-dauer) var(--pw-kurve);
}
.ea_opt:hover { border-color: var(--pw-petrol-500); }
.ea_opt input { position: absolute; opacity: 0; width: 0; height: 0; }
.ea_mark {
  width: 14px;
  height: 14px;
  border: 2px solid var(--pw-border-strong);
  border-radius: 2px;
  transition: background-color var(--pw-dauer) var(--pw-kurve),
              border-color var(--pw-dauer) var(--pw-kurve);
}
.ea_opt.sel {
  background: var(--pw-petrol);
  border-color: var(--pw-petrol);
  color: var(--pw-white);
}
.ea_opt.sel .ea_mark {
  background: var(--pw-mint);
  border-color: var(--pw-mint);
}

/* Zahleneingabe mit Einheit */
.ea_num_field {
  display: inline-flex;
  align-items: stretch;
  max-width: 100%;
  border: 1px solid var(--pw-border-strong);
  border-radius: var(--pw-radius-chip);
  background: var(--pw-white);
  overflow: hidden;
}
.ea_num_field:focus-within { border-color: var(--pw-petrol); }
.ea_num_field input {
  width: 150px;
  max-width: 46vw;
  padding: 12px 14px;
  border: 0;
  background: transparent;
  font-size: 1rem;
}
.ea_num_field input:focus { outline: none; }
.ea_unit {
  display: flex;
  align-items: center;
  padding: 0 14px;
  background: var(--pw-surface-2);
  border-left: 1px solid var(--pw-border);
  font-size: .8125rem;
  color: var(--pw-ink-mid);
  white-space: nowrap;
}

/* "Bereits begonnen?" */
.bd_resume_entry { padding-top: 14px; }
.bd_resume_link {
  padding: 0;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--pw-border-strong);
  font-size: .875rem;
  color: var(--pw-ink-mid);
}
.bd_resume_link:hover { color: var(--pw-petrol); border-bottom-color: var(--pw-petrol); }

.bd_resume_row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}
.bs_text_input {
  flex: 1 1 220px;
  min-width: 0;
  padding: 12px 14px;
  background: var(--pw-white);
  border: 1px solid var(--pw-border-strong);
  border-radius: var(--pw-radius-chip);
  font-size: 1rem;
}
.bs_text_input:focus { outline: none; border-color: var(--pw-petrol); }
.bs_text_input.is_error { border-color: #c0392b; background: #fdf3f2; }

.bs_back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 0;
  background: transparent;
  border: 0;
  font-family: var(--pw-font-display);
  font-size: .875rem;
  font-weight: 600;
  color: var(--pw-ink-mid);
}
.bs_back:hover { color: var(--pw-petrol); }

.bs_nutzung_line {
  margin-top: 8px;
  font-size: .875rem;
  color: var(--pw-ink-mid);
}
.bs_placeholder_note,
.bs_callout {
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: var(--pw-radius-chip);
  font-size: .875rem;
  line-height: 1.5;
}
.bs_placeholder_note {
  background: var(--pw-surface-2);
  border-left: var(--pw-linie-stark) solid var(--pw-muted);
  color: var(--pw-ink-soft);
}
.bs_callout_amber {
  background: #fff7e6;
  border-left: var(--pw-linie-stark) solid #e0a106;
  color: #6b4e07;
}

/* Ergebnis */
.ea_result { display: none; }
.ea_result.show {
  display: block;
  margin-top: clamp(20px, 2.6vw, 28px);
  padding: clamp(20px, 2.6vw, 28px) clamp(20px, 2.8vw, 32px) 0;
  border-top: 1px solid var(--pw-border);
}

.ea_verdict {
  display: flex;
  gap: 14px;
  padding: 16px 18px;
  border-radius: var(--pw-radius-chip);
}
.ea_verdict h3 {
  font-size: 1.0625rem;
  font-weight: 700;
}
.ea_verdict p {
  margin-top: 8px;
  font-size: .9375rem;
  color: var(--pw-ink-soft);
}
.ea_verdict_icon {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 2px;
  font-family: var(--pw-font-display);
  font-weight: 800;
}
.ea_verdict_green {
  background: var(--pw-mint-tint);
  /* Innerhalb des mintfarbenen Panels braucht der Kasten Kontrast. */
}
.pw-werkzeug--mint .ea_verdict_green { background: var(--pw-white); }
.ea_verdict_green {
  border-left: var(--pw-linie-stark) solid var(--pw-mint-ink);
}
.ea_verdict_green .ea_verdict_icon {
  background: var(--pw-mint-ink);
  color: var(--pw-white);
}
.ea_verdict_amber {
  background: #fff7e6;
  border-left: var(--pw-linie-stark) solid #e0a106;
}
.ea_verdict_amber .ea_verdict_icon {
  background: #e0a106;
  color: var(--pw-white);
}

.ea_note_later {
  margin-top: 8px;
  font-size: .875rem;
  color: var(--pw-ink-mid);
}

.ea_result_actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 18px;
  padding-bottom: clamp(18px, 2.4vw, 24px);
}
.ea_price_reveal { display: flex; flex-direction: column; }
.ea_amt {
  font-family: var(--pw-font-display);
  font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2.1rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--pw-petrol);
}
.ea_from {
  margin-top: 2px;
  font-size: .8125rem;
  color: var(--pw-ink-mid);
}

.ea_alt_ausweis {
  margin-top: 4px;
  padding-top: 4px;
  border-top: 1px solid var(--pw-border);
}
.ea_alt_ausweis .ea_amt {
  font-size: clamp(1.15rem, 1rem + .6vw, 1.4rem);
  color: var(--pw-ink-soft);
}

/* ============================================================
   2) Foerderrechner
   ============================================================ */
.fr_header { padding: clamp(22px, 2.6vw, 30px) clamp(20px, 2.8vw, 32px) 0; }
.fr_header h2 { font-size: clamp(1.25rem, 1.05rem + .8vw, 1.6rem); }
.fr_sub {
  margin-top: 10px;
  font-size: .9375rem;
  color: var(--pw-ink-mid);
}

.fr_grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(18px, 2.4vw, 28px);
  padding: clamp(20px, 2.6vw, 28px) clamp(20px, 2.8vw, 32px);
}
.fr_card, .fr_result_card { min-width: 0; }
.fr_result_card {
  align-self: start;
  padding: clamp(20px, 2.4vw, 26px);
  background: var(--pw-surface);
  border: 1px solid var(--pw-border);
  border-top: var(--pw-linie-stark) solid var(--pw-petrol);
  border-radius: var(--pw-radius-kachel);
}

.fr_step_title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
  font-size: 1.0625rem;
  font-weight: 700;
}
.fr_step_title_gap { margin-top: 28px; }
.fr_step_num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  background: var(--pw-mint-tint);
  border-radius: 2px;
  font-size: .8125rem;
  color: var(--pw-mint-ink);
}

.fr_label {
  display: block;
  margin-bottom: 8px;
  font-family: var(--pw-font-display);
  font-size: .8125rem;
  font-weight: 600;
  color: var(--pw-ink-soft);
}
.fr_hint_inline { font-weight: 400; color: var(--pw-muted); }

.fr_segrow {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 20px;
}
.fr_seg {
  padding: 11px 16px;
  background: var(--pw-white);
  border: 1px solid var(--pw-border-strong);
  border-radius: var(--pw-radius-chip);
  font-size: .875rem;
  transition: background-color var(--pw-dauer) var(--pw-kurve),
              border-color var(--pw-dauer) var(--pw-kurve),
              color var(--pw-dauer) var(--pw-kurve);
}
.fr_seg:hover { border-color: var(--pw-petrol-500); }
.fr_seg.is_active {
  background: var(--pw-petrol);
  border-color: var(--pw-petrol);
  color: var(--pw-white);
}

.fr_row2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.fr_field { min-width: 0; }

.fr_input, .fr_select {
  width: 100%;
  min-width: 0;
  padding: 11px 12px;
  background: var(--pw-white);
  border: 1px solid var(--pw-border-strong);
  border-radius: var(--pw-radius-chip);
  font-size: .9375rem;
}
.fr_input:focus, .fr_select:focus { outline: none; border-color: var(--pw-petrol); }

.fr_table_head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 128px 34px;
  gap: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--pw-border);
  font-family: var(--pw-font-display);
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--pw-muted);
}
.fr_th_kosten { text-align: right; }

.fr_zeile {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 128px 34px;
  gap: 10px;
  align-items: start;
  padding-block: 12px;
  border-bottom: 1px solid var(--pw-border);
}
.fr_zeile_massnahme { min-width: 0; }
.fr_gruppe_tag {
  display: inline-block;
  margin-top: 7px;
  padding: 3px 8px;
  background: var(--pw-mint-tint);
  border-radius: 2px;
  font-family: var(--pw-font-display);
  font-size: .6875rem;
  font-weight: 600;
  color: var(--pw-mint-ink);
}
.fr_del {
  width: 34px;
  height: 42px;
  background: transparent;
  border: 1px solid var(--pw-border);
  border-radius: var(--pw-radius-chip);
  font-size: 1.05rem;
  line-height: 1;
  color: var(--pw-ink-mid);
}
.fr_del:hover:not([disabled]) { border-color: #c0392b; color: #c0392b; }
.fr_del[disabled] { opacity: .3; cursor: not-allowed; }

.fr_add {
  margin-top: 14px;
  padding: 10px 16px;
  background: transparent;
  border: 1px dashed var(--pw-border-strong);
  border-radius: var(--pw-radius-chip);
  font-family: var(--pw-font-display);
  font-size: .875rem;
  font-weight: 600;
  color: var(--pw-petrol);
}
.fr_add:hover { background: var(--pw-mint-tint); border-color: var(--pw-mint-ink); }

.fr_check {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin-top: 22px;
  font-size: .875rem;
  line-height: 1.5;
  cursor: pointer;
}
.fr_check input { margin-top: 3px; accent-color: var(--pw-petrol); }
.fr_wpb_note {
  margin-top: 10px;
  padding: 10px 12px;
  background: var(--pw-surface-2);
  border-left: var(--pw-linie-stark) solid var(--pw-muted);
  font-size: .8125rem;
  line-height: 1.5;
  color: var(--pw-ink-mid);
}

/* Ergebnis */
.fr_cmp {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.fr_cmp_col {
  padding: 14px;
  background: var(--pw-white);
  border: 1px solid var(--pw-border);
  border-radius: var(--pw-radius-chip);
}
.fr_cmp_hi {
  background: var(--pw-petrol);
  border-color: var(--pw-petrol);
}
.fr_cmp_label {
  font-family: var(--pw-font-display);
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--pw-muted);
}
.fr_cmp_label_hi { color: var(--pw-mint); }
.fr_cmp_val {
  margin-top: 6px;
  font-family: var(--pw-font-display);
  font-size: clamp(1.3rem, 1.1rem + .9vw, 1.7rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--pw-ink);
}
.fr_cmp_val_hi { color: var(--pw-white); }

.fr_schwelle {
  margin-top: 12px;
  padding: 10px 12px;
  background: #fff7e6;
  border-left: var(--pw-linie-stark) solid #e0a106;
  font-size: .8125rem;
  line-height: 1.5;
  color: #6b4e07;
}
.fr_wpb_badge {
  display: inline-block;
  margin-top: 12px;
  padding: 5px 10px;
  background: var(--pw-mint-tint);
  border-radius: 2px;
  font-family: var(--pw-font-display);
  font-size: .6875rem;
  font-weight: 700;
  color: var(--pw-mint-ink);
}

.fr_divider {
  height: 1px;
  margin-block: 20px;
  background: var(--pw-border);
}

.fr_be_title {
  margin-bottom: 10px;
  font-family: var(--pw-font-display);
  font-size: .9375rem;
  font-weight: 700;
}
.fr_be_table {
  width: 100%;
  border-collapse: collapse;
  font-size: .875rem;
}
.fr_be_table td { padding-block: 7px; }
.fr_be_num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.fr_be_sep td {
  padding-top: 10px;
  border-top: 1px solid var(--pw-border-strong);
  font-weight: 700;
}

.fr_verdict { margin-top: 18px; padding: 14px 16px; border-radius: var(--pw-radius-chip); }
.fr_verdict.is_positive {
  background: var(--pw-mint-tint);
  border-left: var(--pw-linie-stark) solid var(--pw-mint-ink);
}
.fr_verdict.is_negative {
  background: #fff7e6;
  border-left: var(--pw-linie-stark) solid #e0a106;
}
.fr_verdict_big {
  font-family: var(--pw-font-display);
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--pw-petrol);
}
.fr_verdict_big.is_warn { color: #8a6100; }
.fr_verdict_sub {
  margin-top: 6px;
  font-size: .875rem;
  line-height: 1.5;
  color: var(--pw-ink-soft);
}
.fr_verdict_muted { font-size: .875rem; color: var(--pw-ink-mid); }

.fr_termin_wrap { margin-top: 18px; }
.fr_termin_panel {
  margin-top: 12px;
  padding: 16px;
  background: var(--pw-white);
  border: 1px solid var(--pw-border);
  border-radius: var(--pw-radius-chip);
}
.fr_termin_title {
  font-family: var(--pw-font-display);
  font-size: 1rem;
  font-weight: 700;
}
.fr_termin_text {
  margin-top: 8px;
  font-size: .875rem;
  line-height: 1.55;
  color: var(--pw-ink-soft);
}
.fr_termin_summary { margin-top: 14px; }
.fr_termin_sum_row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding-block: 7px;
  border-bottom: 1px solid var(--pw-border);
  font-size: .875rem;
}
.fr_termin_sum_row span:last-child { font-weight: 600; text-align: right; }
.fr_termin_go { margin-top: 16px; width: 100%; }
.fr_termin_hint {
  margin-top: 10px;
  font-size: .75rem;
  color: var(--pw-muted);
}

.fr_disclaimer {
  margin-top: 18px;
  font-size: .75rem;
  line-height: 1.55;
  color: var(--pw-muted);
}

/* --- Breakpoints ------------------------------------------- */
@media (max-width: 860px) {
  .fr_grid { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .ea_opts { flex-direction: column; align-items: stretch; }
  .ea_opt { width: 100%; }
  .ea_result_actions { flex-direction: column; align-items: stretch; }
  .ea_result_actions .pw-btn { width: 100%; }
  .fr_row2 { grid-template-columns: 1fr; }
  .fr_table_head { display: none; }
  .fr_zeile {
    grid-template-columns: minmax(0, 1fr) 34px;
    grid-template-areas: 'massnahme del' 'kosten kosten';
  }
  .fr_zeile_massnahme { grid-area: massnahme; }
  .fr_zeile_kosten { grid-area: kosten; }
  .fr_del { grid-area: del; }
  .fr_cmp { grid-template-columns: 1fr; }
}