/* Landingpage, Formular und Danke-Seite fuer den Erstgespraech-Funnel.
   Baut auf den Markenfarben/-schriften aus styles.css auf. */

.bc-funnel-body { background: var(--ivory); }

.bc-hero-wrap {
  max-width: 1080px;
  margin: 0 auto;
  padding: 56px 24px 80px;
}

.bc-hero-logo {
  text-align: center;
  margin-bottom: 36px;
}
.bc-hero-logo img { height: 64px; }

.bc-hero-eyebrow {
  text-align: center;
  font-size: 13px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--soft-sage);
  font-weight: 700;
  margin: 0 0 18px;
}

.bc-hero-headline {
  text-align: center;
  font-family: Georgia, 'Times New Roman', serif;
  font-weight: 400;
  font-size: 44px;
  line-height: 1.25;
  color: var(--deep-petrol);
  max-width: 760px;
  margin: 0 auto 20px;
}
.bc-hero-headline .accent { color: var(--soft-sage); }

.bc-hero-sub {
  text-align: center;
  font-size: 19px;
  line-height: 1.65;
  color: var(--anthracite);
  max-width: 560px;
  margin: 0 auto 64px;
}

/* Grid statt Flexbox: bei Flexbox bestimmt ein hochkantiges Foto (mit height:100%)
   ueber sein eigenes Seitenverhaeltnis die Zeilenhoehe, dadurch wuerde der Text
   auf die Fotohoehe gestreckt statt das Foto auf die Texthoehe zugeschnitten.
   Grid gibt beiden Spalten zuerst eine gemeinsame Hoehe vor, danach schneidet
   object-fit:cover das Foto sauber darauf zu. */
.bc-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  gap: 48px;
  margin-bottom: 56px;
}
.bc-split-text, .bc-split-image {
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.bc-split-heading {
  font-size: 21px;
  line-height: 1.5;
  color: var(--anthracite);
  margin: 0 0 24px;
}
.bc-split-heading .accent {
  color: var(--soft-sage);
  font-weight: 700;
}

.bc-bullets {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
  flex: 1;
}
.bc-bullet {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
.bc-bullet-icon {
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--soft-sage);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  margin-top: 2px;
}
.bc-bullet-text { font-size: 17px; line-height: 1.6; color: var(--anthracite); }

.bc-split-image {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  background: var(--warm-sand-light);
  min-height: 340px;
}
.bc-split-image img {
  /* Absolut positioniert, damit das Foto per eigenem Seitenverhaeltnis nicht
     mehr die Hoehe der Spalte bestimmt. Die Spalte richtet sich stattdessen
     nach der Texthoehe, und object-fit:cover schneidet das Foto sauber darauf zu. */
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.bc-cta-block { text-align: center; }
.bc-cta-btn {
  display: inline-block;
  background: var(--deep-petrol);
  color: var(--ivory);
  font-size: 19px;
  font-weight: 700;
  letter-spacing: 0.3px;
  padding: 20px 56px;
  border-radius: 8px;
  text-decoration: none;
  transition: background 0.2s, transform 0.15s;
}
.bc-cta-btn:hover { background: var(--deep-petrol-dark); transform: translateY(-1px); }
.bc-cta-sub {
  margin-top: 14px;
  font-size: 14px;
  color: #7A7F82;
}

@media (max-width: 800px) {
  .bc-hero-headline { font-size: 32px; }
  .bc-hero-sub { font-size: 17px; margin-bottom: 44px; }
  .bc-split { grid-template-columns: 1fr; gap: 40px; margin-bottom: 44px; }
  .bc-split-image { min-height: 260px; }
  .bc-cta-btn { width: 100%; padding: 18px 20px; font-size: 18px; }
}

/* ---------- Formular ---------- */
.bc-form-wrap {
  max-width: 620px;
  margin: 0 auto;
  padding: 56px 24px 80px;
}
.bc-form-progress {
  text-align: center;
  font-size: 13px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--deep-petrol);
  margin-bottom: 32px;
}
.bc-step { display: none; }
.bc-step.bc-step-active { display: block; }
.bc-step h2 {
  font-family: Georgia, 'Times New Roman', serif;
  font-weight: 400;
  color: var(--deep-petrol);
  font-size: 26px;
  margin: 0 0 28px;
  text-align: center;
}
.bc-field { margin-bottom: 20px; }
.bc-field label {
  display: block;
  font-size: 13px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--deep-petrol);
  margin-bottom: 8px;
}
.bc-field input[type="text"],
.bc-field input[type="email"],
.bc-field input[type="tel"],
.bc-field select,
.bc-field textarea {
  width: 100%;
  padding: 14px 16px;
  border: 1px solid var(--warm-sand);
  border-radius: 6px;
  font-size: 16px;
  font-family: Arial, Helvetica, sans-serif;
  background: #fff;
  color: var(--anthracite);
}
.bc-field textarea { min-height: 110px; resize: vertical; }
.bc-radio-row, .bc-check-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid var(--warm-sand);
  border-radius: 6px;
  margin-bottom: 10px;
  cursor: pointer;
}
.bc-radio-row input, .bc-check-row input { margin-top: 3px; }
.bc-radio-row:hover, .bc-check-row:hover { border-color: var(--deep-petrol); }
.bc-sonstiges-text { margin-top: 10px; display: none; }
.bc-sonstiges-text.bc-visible { display: block; }

.bc-consent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: var(--warm-sand-light);
  border-radius: 8px;
  padding: 18px 20px;
  margin: 8px 0 28px;
}
.bc-consent input { margin-top: 4px; }
.bc-consent label { font-size: 14px; line-height: 1.6; color: var(--anthracite); }
.bc-consent a { color: var(--deep-petrol); }
.bc-privacy-note h2 {
  font-family: Georgia, 'Times New Roman', serif;
  font-weight: 400;
  color: var(--deep-petrol);
  font-size: 18px;
  text-align: left;
  margin: 0 0 10px;
}
.bc-privacy-note p { font-size: 14px; line-height: 1.65; color: #5a5f61; margin: 0 0 20px; }

.bc-form-nav {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-top: 32px;
}
.bc-btn-primary, .bc-btn-secondary {
  padding: 15px 32px;
  border-radius: 6px;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  border: none;
}
.bc-btn-primary { background: var(--deep-petrol); color: var(--ivory); margin-left: auto; }
.bc-btn-primary:hover { background: var(--deep-petrol-dark); }
.bc-btn-secondary { background: transparent; color: var(--deep-petrol); border: 1px solid var(--warm-sand); }
.bc-btn-secondary:hover { border-color: var(--deep-petrol); }
.bc-btn-secondary:disabled { visibility: hidden; }
.bc-form-error {
  color: #8a2f27;
  font-size: 14px;
  margin-top: 10px;
  display: none;
}
.bc-form-error.bc-visible { display: block; }

/* ---------- Danke-Seite ---------- */
.bc-thanks-wrap {
  max-width: 520px;
  margin: 0 auto;
  padding: 96px 24px 96px;
  text-align: center;
}
.bc-thanks-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--soft-sage);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  margin: 0 auto 28px;
}
.bc-thanks-wrap h1 {
  font-family: Georgia, 'Times New Roman', serif;
  font-weight: 400;
  color: var(--deep-petrol);
  font-size: 32px;
  margin: 0 0 16px;
}
.bc-thanks-wrap p { font-size: 18px; line-height: 1.7; color: var(--anthracite); }