/* Hausenergie Funnel – Farben wie im Webdesign */
.he-funnel {
  --he-green: #2F5D46;
  --he-green-light: #EEF4F0;
  --he-accent: #F0A53C;
  --he-ink: #1F2A24;
  --he-text: #3C4842;
  --he-muted: #5A6660;
  --he-line: #E8E1D5;
  --he-sand: #FBF9F5;
  --he-track: #EFE8DC;
  font-family: inherit;
  color: var(--he-ink);
  max-width: 760px;
  margin: 0 auto;
  line-height: 1.55;
}
.he-funnel *, .he-funnel *::before, .he-funnel *::after { box-sizing: border-box; }
.he-funnel__card {
  background: #fff;
  border-radius: 24px;
  padding: clamp(20px, 4vw, 40px);
  box-shadow: 0 16px 48px rgba(31, 42, 36, 0.10);
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.he-funnel__progress-meta { display: flex; justify-content: space-between; font-size: 14px; font-weight: 600; color: var(--he-muted); margin-bottom: 10px; }
.he-funnel__bar { height: 10px; border-radius: 999px; background: var(--he-track); overflow: hidden; }
.he-funnel__bar-fill { height: 100%; width: 16%; background: var(--he-green); border-radius: 999px; transition: width .3s ease; }
.he-funnel__title { margin: 0 0 6px; font-size: clamp(24px, 3.4vw, 32px); line-height: 1.2; font-weight: 800; letter-spacing: -0.02em; color: var(--he-ink); }
.he-funnel__sub { margin: 0 0 20px; font-size: 16px; color: var(--he-muted); }
.he-funnel__options { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.he-option {
  display: flex; flex-direction: column; align-items: flex-start; gap: 4px; text-align: left;
  min-height: 96px; padding: 18px 20px; border-radius: 16px; border: 2px solid var(--he-line);
  background: var(--he-sand); font: inherit; color: var(--he-ink); cursor: pointer; transition: border-color .15s, background .15s, transform .15s;
}
.he-option:hover { border-color: var(--he-green); transform: translateY(-1px); }
.he-option:focus-visible, .he-pill:focus-visible, .he-btn:focus-visible { outline: 3px solid var(--he-accent); outline-offset: 2px; }
.he-option.is-selected { border-color: var(--he-green); background: var(--he-green-light); }
.he-option__label { font-size: 18px; font-weight: 800; }
.he-option__sub { font-size: 14px; color: var(--he-muted); }
.he-funnel__actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 20px; }
.he-btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 26px;
  border-radius: 999px; font: inherit; font-weight: 800; cursor: pointer; text-decoration: none; border: none;
}
.he-btn--primary { background: var(--he-accent); color: var(--he-ink); }
.he-btn--primary:disabled { background: var(--he-track); color: var(--he-muted); cursor: not-allowed; }
.he-btn--ghost { background: #fff; color: var(--he-text); border: 1.5px solid #D9D0C1; font-weight: 700; }
.he-btn--dark { background: var(--he-green); color: #fff; margin-top: 8px; }
.he-btn--dark:hover { color: #fff; }
.he-field { display: flex; flex-direction: column; gap: 8px; font-weight: 700; font-size: 15px; }
.he-field input {
  min-height: 52px; padding: 0 16px; font: inherit; font-weight: 500; border: 2px solid #D9D0C1; border-radius: 12px; color: var(--he-ink); background: #fff; width: 100%;
}
.he-field input:focus { border-color: var(--he-green); outline: none; }
.he-field--plz input { max-width: 260px; font-size: 22px; font-weight: 700; letter-spacing: .08em; min-height: 56px; }
.he-funnel__fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.he-funnel__group { margin-top: 20px; display: flex; flex-direction: column; gap: 10px; }
.he-funnel__label { font-weight: 700; font-size: 15px; }
.he-funnel__pills { display: flex; flex-wrap: wrap; gap: 10px; }
.he-pill { min-height: 44px; padding: 0 18px; border-radius: 999px; border: 2px solid var(--he-line); background: #fff; color: var(--he-text); font: inherit; font-size: 15px; font-weight: 700; cursor: pointer; }
.he-pill.is-selected { border-color: var(--he-green); background: var(--he-green-light); color: #1F3F2F; }
.he-consent { display: flex; gap: 12px; align-items: flex-start; margin-top: 20px; font-size: 14px; color: var(--he-text); cursor: pointer; }
.he-consent input { width: 22px; height: 22px; margin: 2px 0 0; accent-color: var(--he-green); flex: none; }
.he-msg { margin: 16px 0 0; padding: 14px 18px; border-radius: 14px; font-weight: 700; }
.he-msg--ok { background: var(--he-green-light); color: #1F3F2F; }
.he-msg--warn { background: #FDF3E3; color: #6B4510; font-weight: 600; }
.he-error { margin: 16px 0 0; padding: 12px 16px; border-radius: 12px; background: #FBE9E4; color: #8A2A12; font-weight: 600; }
.he-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.he-done { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.he-done__icon { width: 72px; height: 72px; border-radius: 999px; background: var(--he-green-light); color: var(--he-green); font-size: 36px; font-weight: 800; display: flex; align-items: center; justify-content: center; margin-bottom: 8px; }
.he-funnel__trust { margin: 0; padding-top: 18px; border-top: 1px solid var(--he-track); font-size: 14px; color: var(--he-muted); }
.he-funnel__advisor { display: flex; gap: 14px; align-items: center; margin-top: 18px; font-size: 15px; color: var(--he-text); }
.he-funnel__advisor img { width: 64px; height: 64px; border-radius: 999px; object-fit: cover; object-position: 50% 6%; background: #F6C77A; flex: none; }
.he-funnel__advisor strong { color: var(--he-ink); }