/* ============================================================
   P/W Consulting GmbH — Bestellstrecke
   Energieausweis bestellen (Verbrauch, 7 Schritte),
   Bedarfsausweis anfragen (2 Schritte) und die beiden
   Ergebnisseiten nach dem Checkout.

   Setzt css/werkzeuge.css voraus: die ea_*-Klassen (Fragen,
   Auswahlkacheln, Zahlenfelder, Ergebniskaesten) werden von beiden
   Funnels mitbenutzt und stehen dort.

   Die Klassennamen sind die Schnittstelle zu
   js/energieausweis-bestellen.js und -bedarfsausweis.js. Beim
   Umbenennen immer beide Seiten anpassen.
   ============================================================ */

/* --- Seitenrahmen ------------------------------------------ */
.bs_page {
  min-height: 60vh;
  /* Oben zusaetzlich der Platz fuer die schwebende Navigation. */
  padding-block: calc(var(--pw-nav-hoehe) + clamp(28px, 4vw, 52px)) clamp(44px, 6vw, 80px);
  background: var(--pw-surface);
}
.bs_container {
  width: 100%;
  max-width: 780px;
  margin-inline: auto;
  padding-inline: var(--pw-rand);
}

/* --- Fortschritt ------------------------------------------- */
.bs_head { margin-bottom: clamp(16px, 2.4vw, 24px); }

.bs_progress {
  display: flex;
  gap: 4px;
}
.bs_progress_seg {
  flex: 1 1 0;
  height: var(--pw-linie-stark);
  background: var(--pw-border-strong);
  transition: background-color var(--pw-dauer) var(--pw-kurve);
}
.bs_progress_seg.is_done { background: var(--pw-mint-ink); }
.bs_progress_seg.is_current { background: var(--pw-petrol); }

.bs_step_label {
  margin-top: 10px;
  font-family: var(--pw-font-display);
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--pw-ink-mid);
}

/* --- Panel -------------------------------------------------- */
.bs_panel {
  background: var(--pw-white);
  border: 1px solid var(--pw-border);
  border-top: var(--pw-linie-stark) solid var(--pw-petrol);
  border-radius: var(--pw-radius-kachel);
}
.bs_step_sub {
  padding: 14px clamp(20px, 2.8vw, 32px) 0;
  font-size: .875rem;
  line-height: 1.55;
  color: var(--pw-ink-mid);
}

/* --- Schritt-Navigation ------------------------------------- */
.bs_nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: clamp(16px, 2.2vw, 22px);
}
.bs_back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 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_back[hidden] { display: none !important; }
.bs_back_chevron { flex: 0 0 auto; }

/* Unvollstaendiger Schritt: der Button bleibt klickbar (das Skript
   markiert dann die fehlenden Felder), sieht aber gedaempft aus. */
.bs_next.is_incomplete {
  background: var(--pw-surface-2);
  color: var(--pw-muted);
}
.bs_next.is_incomplete:hover {
  background: var(--pw-surface-2);
  transform: none;
}

/* --- Preisleiste -------------------------------------------- */
.bs_price_strip {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 14px;
  margin-top: clamp(16px, 2.2vw, 22px);
  padding: 16px 18px;
  background: var(--pw-petrol);
  border-radius: var(--pw-radius-kachel);
  color: var(--pw-white);
}
.bs_price_head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px;
}
.bs_price_strip .bs_price_amt {
  font-family: var(--pw-font-display);
  font-size: clamp(1.3rem, 1.1rem + .8vw, 1.6rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--pw-mint);
}
.bs_price_extra {
  font-size: .8125rem;
  color: var(--pw-on-dark-2);
}
.bs_price_lbl {
  font-size: .8125rem;
  color: var(--pw-on-dark-3);
}

/* --- Eingabefelder ------------------------------------------ */
.bs_field_row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.bs_field_row > .bs_text_input { flex: 1 1 160px; }
.bs_col_small { flex: 0 1 120px !important; }

.bs_textarea,
.bs_select {
  width: 100%;
  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_textarea {
  min-height: 110px;
  resize: vertical;
  line-height: 1.55;
}
.bs_textarea:focus,
.bs_select:focus { outline: none; border-color: var(--pw-petrol); }
.bs_textarea.is_error,
.bs_select.is_error,
.bs_text_input.is_error { border-color: #c0392b; background: #fdf3f2; }

/* Fehlende Pflichtauswahl markieren */
.ea_opts.is_error {
  padding: 8px;
  margin: -8px;
  border-radius: var(--pw-radius-chip);
  background: #fdf3f2;
  box-shadow: inset 0 0 0 1px #c0392b;
}

/* Mehrfachauswahl: gleiche Kachel wie beim Radiobutton, aber mit
   Haken statt gefuellter Flaeche. */
.ea_opt.bs_chk.sel .ea_mark {
  position: relative;
  background: var(--pw-mint);
  border-color: var(--pw-mint);
}
.ea_opt.bs_chk.sel .ea_mark::after {
  content: '';
  position: absolute;
  left: 3px;
  top: 0;
  width: 4px;
  height: 8px;
  border: solid var(--pw-petrol-deep);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* --- Wiederholbare Bloecke (Leerstand, Nutzungen) ----------- */
.bs_block {
  margin-bottom: 10px;
  padding: 14px;
  background: var(--pw-surface);
  border: 1px solid var(--pw-border);
  border-radius: var(--pw-radius-chip);
}
.bs_block_head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.bs_block_title {
  font-family: var(--pw-font-display);
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--pw-ink-mid);
}
.bs_block_remove {
  padding: 4px 0;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--pw-border-strong);
  font-size: .8125rem;
  color: var(--pw-ink-mid);
}
.bs_block_remove:hover { color: #c0392b; border-bottom-color: #c0392b; }

.bs_add_row {
  margin-top: 10px;
  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);
}
.bs_add_row:hover { background: var(--pw-mint-tint); border-color: var(--pw-mint-ink); }

/* --- Verbrauchsperioden ------------------------------------- */
.bs_periods {
  width: 100%;
  border-collapse: collapse;
  font-size: .875rem;
}
.bs_periods th {
  padding: 0 8px 8px 0;
  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;
  text-align: left;
  color: var(--pw-muted);
}
.bs_periods td {
  padding: 10px 8px 10px 0;
  border-bottom: 1px solid var(--pw-border);
  vertical-align: top;
}
.bs_periods td:last-child, .bs_periods th:last-child { padding-right: 0; }
.bs_periods .bs_text_input { width: 100%; }
.bs_period_range {
  margin-top: 2px;
  font-size: .75rem;
  color: var(--pw-muted);
}

/* --- Uploads ------------------------------------------------ */
.bs_upload_note {
  padding: 12px 14px;
  background: var(--pw-mint-tint);
  border-left: var(--pw-linie-stark) solid var(--pw-mint-ink);
  font-size: .8125rem;
  line-height: 1.55;
  color: var(--pw-ink-soft);
}
.bs_upload_grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 14px;
}
.bs_upload {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px;
  background: var(--pw-white);
  border: 1px dashed var(--pw-border-strong);
  border-radius: var(--pw-radius-chip);
  cursor: pointer;
  transition: border-color var(--pw-dauer) var(--pw-kurve),
              background-color var(--pw-dauer) var(--pw-kurve);
}
.bs_upload:hover { border-color: var(--pw-petrol-500); background: var(--pw-surface); }
.bs_upload input[type='file'] { display: none; }
.bs_upload.has_file {
  border-style: solid;
  border-color: var(--pw-mint-ink);
  background: var(--pw-mint-tint);
}
.bs_upload_icon {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  background: var(--pw-mint-tint);
  border-radius: 2px;
  color: var(--pw-petrol);
}
.bs_upload.has_file .bs_upload_icon {
  background: var(--pw-mint-ink);
  color: var(--pw-white);
}
.bs_upload_text { min-width: 0; }
.bs_upload_label {
  font-family: var(--pw-font-display);
  font-size: .875rem;
  font-weight: 600;
  color: var(--pw-ink);
}
.bs_upload_meta {
  display: inline-block;
  margin-top: 3px;
  font-size: .75rem;
  color: var(--pw-ink-mid);
  overflow-wrap: anywhere;
}
.bs_upload.has_file .bs_upload_meta { color: var(--pw-mint-ink); font-weight: 600; }

/* Fehlender Pflicht-Upload (highlightMissing() im Funnel-Skript) */
.bs_upload.is_error {
  border-style: solid;
  border-color: #c0392b;
  background: #fdf3f2;
}
.bs_upload.is_error .bs_upload_icon { background: #f6dcd8; color: #c0392b; }
.bs_upload.is_error .bs_upload_meta { color: #c0392b; font-weight: 600; }

/* --- Preistabelle im letzten Schritt ------------------------ */
.bs_price_table {
  margin: clamp(18px, 2.2vw, 24px) clamp(20px, 2.8vw, 32px) 0;
  padding: 14px 16px;
  background: var(--pw-surface);
  border: 1px solid var(--pw-border);
  border-radius: var(--pw-radius-chip);
}
.bs_price_line {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding-block: 6px;
  font-size: .9375rem;
}
.bs_price_line span:last-child { font-variant-numeric: tabular-nums; white-space: nowrap; }
.bs_price_total {
  margin-top: 6px;
  padding-top: 10px;
  border-top: 1px solid var(--pw-border-strong);
  font-family: var(--pw-font-display);
  font-weight: 700;
}

/* --- Zusammenfassung ---------------------------------------- */
.bs_summary_group {
  margin: 0 clamp(20px, 2.8vw, 32px) 12px;
  border: 1px solid var(--pw-border);
  border-radius: var(--pw-radius-chip);
  overflow: hidden;
}
.bs_summary_group_head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  background: var(--pw-surface-2);
}
.bs_summary_group_title {
  font-family: var(--pw-font-display);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--pw-ink-mid);
}
.bs_change_link {
  padding: 0;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--pw-mint-ink);
  font-family: var(--pw-font-display);
  font-size: .8125rem;
  font-weight: 600;
  color: var(--pw-mint-ink);
}
.bs_change_link:hover { color: var(--pw-petrol); border-bottom-color: var(--pw-petrol); }

.bs_summary_row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 9px 14px;
  border-top: 1px solid var(--pw-border);
  font-size: .875rem;
}
.bs_summary_row span:first-child { color: var(--pw-ink-mid); }
.bs_summary_row span:last-child { font-weight: 600; text-align: right; overflow-wrap: anywhere; }

/* --- Einwilligungen ----------------------------------------- */
.bs_consent {
  margin: clamp(18px, 2.2vw, 24px) clamp(20px, 2.8vw, 32px) 0;
  padding: 14px 16px;
  background: var(--pw-surface);
  border: 1px solid var(--pw-border);
  border-radius: var(--pw-radius-chip);
}
.bs_consent_row {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding-block: 7px;
  font-size: .875rem;
  line-height: 1.5;
  cursor: pointer;
}
.bs_consent_row input { margin-top: 3px; accent-color: var(--pw-petrol); }
.bs_consent_row.is_error {
  margin-inline: -8px;
  padding-inline: 8px;
  border-radius: var(--pw-radius-chip);
  background: #fdf3f2;
  color: #c0392b;
}
.bs_consent_row.is_error input { outline: 2px solid #c0392b; outline-offset: 2px; }

/* --- Bestellabschluss --------------------------------------- */
.bs_order_btn_row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: clamp(18px, 2.2vw, 24px) clamp(20px, 2.8vw, 32px);
}
.bs_order_total .bs_price_amt {
  font-family: var(--pw-font-display);
  font-size: clamp(1.5rem, 1.25rem + 1.1vw, 1.9rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--pw-petrol);
}
.bs_order_total .bs_price_lbl {
  font-size: .8125rem;
  color: var(--pw-ink-mid);
}

/* --- Ergebnisseiten nach dem Checkout ----------------------- */
.bs_ergebnis { padding: 0 clamp(20px, 2.8vw, 32px) clamp(20px, 2.6vw, 28px); }
.bs_ergebnis .ea_verdict p { margin-top: 6px; }
.bs_ergebnis_aktion {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 20px;
}

/* ============================================================
   Info-Buttons an den Eingabefeldern (js/energieausweis-info.js)
   Desktop: Hover/Fokus. Touch: Tippen oeffnet, is_open.
   ============================================================ */
.ea_info_wrap {
  position: relative;
  display: inline-block;
  margin-left: 6px;
  vertical-align: middle;
}
.ea_info_btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 17px;
  height: 17px;
  padding: 0;
  background: var(--pw-surface-2);
  border: 1px solid var(--pw-border-strong);
  border-radius: 2px;
  font-family: var(--pw-font-display);
  font-size: .625rem;
  font-weight: 700;
  line-height: 1;
  color: var(--pw-ink-mid);
}
.ea_info_btn:hover { background: var(--pw-mint-tint); border-color: var(--pw-mint-ink); color: var(--pw-mint-ink); }

.ea_info_popover {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 20;
  display: none;
  width: max-content;
  max-width: min(300px, calc(100vw - 24px));
  padding: 11px 13px;
  background: var(--pw-petrol-deep);
  border-radius: var(--pw-radius-chip);
  font-family: var(--pw-font-text);
  font-size: .8125rem;
  font-weight: 400;
  line-height: 1.5;
  text-transform: none;
  letter-spacing: 0;
  color: var(--pw-on-dark-1);
  white-space: normal;
}
.ea_info_wrap:hover .ea_info_popover,
.ea_info_btn:focus-visible + .ea_info_popover,
.ea_info_wrap.is_open .ea_info_popover { display: block; }

/* ============================================================
   Bedarfsausweis — eigene Bausteine
   ============================================================ */
.bd_bgf_line {
  margin-top: 10px;
  font-size: .875rem;
  color: var(--pw-ink-mid);
}

.bd_usage_row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-bottom: 8px;
}
.bd_usage_row > .bs_select { flex: 1 1 200px; }
.bd_usage_row > .bs_text_input { flex: 0 1 120px; }
.bd_usage_remove {
  flex: 0 0 auto;
  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);
}
.bd_usage_remove:hover { border-color: #c0392b; color: #c0392b; }

/* Unterlagen-Checkliste */
.bd_checklist { display: grid; gap: 8px; }
.bd_checklist label {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 11px 13px;
  background: var(--pw-white);
  border: 1px solid var(--pw-border-strong);
  border-radius: var(--pw-radius-chip);
  font-size: .9375rem;
  cursor: pointer;
}
.bd_checklist label:hover { border-color: var(--pw-petrol-500); }
.bd_checklist input { margin-top: 3px; accent-color: var(--pw-petrol); }
.bd_doclabel { line-height: 1.45; }

.bd_docstatus {
  margin-top: 12px;
  padding: 11px 13px;
  border-radius: var(--pw-radius-chip);
  font-size: .875rem;
  line-height: 1.5;
}
.bd_docstatus.ok {
  background: var(--pw-mint-tint);
  border-left: var(--pw-linie-stark) solid var(--pw-mint-ink);
  color: var(--pw-ink-soft);
}
.bd_docstatus.miss {
  background: #fff7e6;
  border-left: var(--pw-linie-stark) solid #e0a106;
  color: #6b4e07;
}

.bd_estimate_empty {
  font-size: .875rem;
  color: var(--pw-muted);
}
/* Steht als Listeneintrag im hellen Hinweiskasten, nicht auf dunklem
   Grund — deshalb dunkle Schrift. */
.bd_begeh {
  font-weight: 600;
  color: var(--pw-ink-soft);
}

/* Abschlussmeldung der Anfrage */
.bd_done { padding: 0 clamp(20px, 2.8vw, 32px) clamp(22px, 2.8vw, 30px); }
.bd_done h3 {
  font-size: clamp(1.15rem, 1rem + .6vw, 1.4rem);
  color: var(--pw-petrol);
}
.bd_done p {
  margin-top: 10px;
  font-size: .9375rem;
  line-height: 1.6;
  color: var(--pw-ink-soft);
}

/* Der Bedarfsausweis fuellt den Ergebniskasten mit einer Liste —
   basis.css nimmt Listen die Marker, hier bekommen sie einen eigenen. */
.ea_verdict ul {
  margin-top: 8px;
  display: grid;
  gap: 5px;
}
.ea_verdict li {
  position: relative;
  padding-left: 15px;
  font-size: .875rem;
  line-height: 1.5;
  color: var(--pw-ink-soft);
}
.ea_verdict li::before {
  content: '';
  position: absolute;
  left: 0;
  top: .62em;
  width: 7px;
  height: 2px;
  background: currentColor;
  opacity: .5;
}

/* --- Breakpoints -------------------------------------------- */
@media (max-width: 640px) {
  .bs_upload_grid { grid-template-columns: 1fr; }
  .bs_col_small { flex: 1 1 100px !important; }
  .bs_order_btn_row { flex-direction: column; align-items: stretch; }
  .bs_order_btn_row .pw-btn { width: 100%; }
  .bs_ergebnis_aktion .pw-btn { width: 100%; }
  .bs_periods th:first-child, .bs_periods td:first-child { padding-right: 6px; }
  .bs_periods { font-size: .8125rem; }
}