/*
 * Biberlook für die selbst gehosteten Widget-Seiten (Martin 17.10.2026):
 * selbstauskunft*.html, bonitaetsauskunft.html, gewerbefinanzierung.html.
 * „das design ist auch zu klein bitte mit google AI studio api mit dem blauen
 * biber" → Kopfleiste, Schritt-Reiter, Hero und Beraterkarte deutlich größer,
 * großer Biber (scripts/widgetHeroBiber.mjs, Gemini, 2K) im Hero.
 *
 * Einbau je Seite: <link rel="stylesheet" href="/widget-kopf/biber-hero.css">
 * und am Kopfabschnitt class="… biber-hero" + style="--biber:url(/widget-kopf/hero-<typ>.webp)".
 * Der Biber liegt als ::after mit weicher Kreismaske über dem Markenverlauf —
 * so zeichnen sich die Bildkanten nicht ab. Finanziererbild, Logo und Kontakt
 * bleiben HTML der Seite.
 */

/* ── Seitenbreite + Kopfleiste ─────────────────────────────────────────── */
:root:has(.biber-hero) {
  --header-h: 172px;
}
body:has(.biber-hero) .topbar-inner,
body:has(.biber-hero) .progress-wrap,
body:has(.biber-hero) .page {
  max-width: 1180px;
}
body:has(.biber-hero) .topbar-inner {
  padding-top: 16px;
  padding-bottom: 16px;
}
body:has(.biber-hero) .brand-img {
  /* breite Logos mit Claim (Firmenlogo aus dem Profil) brauchen Platz in der Breite */
  height: 76px;
  max-width: 460px;
  object-fit: contain;
  object-position: left center;
}
body:has(.biber-hero) .secure {
  font-size: 14px;
  padding: 9px 15px;
}
body:has(.biber-hero) .secure svg {
  width: 17px;
  height: 17px;
}
body:has(.biber-hero) .step .bar {
  height: 7px;
}
body:has(.biber-hero) .step .lbl {
  font-size: 14px;
  margin-top: 9px;
}

/* ── Hero ──────────────────────────────────────────────────────────────── */
.biber-hero {
  background: linear-gradient(110deg, #0177b3 0%, #016192 100%) !important;
}
.biber-hero:not(.pitch) {
  padding: 52px 44px 112px !important;
  min-height: 420px;
}
.biber-hero::before {
  /* Gitternetz der alten Navy-Fläche passt nicht zum Biberlook */
  display: none !important;
}
.biber-hero::after {
  content: "";
  position: absolute;
  z-index: 0;
  right: var(--biber-rechts, 360px);
  bottom: var(--biber-unten, 54px);
  height: var(--biber-hoehe, 350px);
  aspect-ratio: 1 / 1;
  background: var(--biber) center / contain no-repeat;
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 52%, transparent 71%);
  mask-image: radial-gradient(circle at 50% 50%, #000 52%, transparent 71%);
  pointer-events: none;
}
.biber-hero > * {
  position: relative;
  z-index: 1;
}
.biber-hero h1 {
  font-size: clamp(32px, 4.4vw, 48px) !important;
  margin-bottom: 24px !important;
}
.biber-hero h1 em,
.biber-hero .pcard-row svg {
  color: #bfe6f8 !important;
}
.biber-hero .hero-badge {
  font-size: 14px !important;
  padding: 9px 16px !important;
  margin-bottom: 22px !important;
}
.biber-hero .tchip {
  font-size: 14px !important;
  padding: 10px 16px !important;
}
.biber-hero .tchip svg {
  width: 17px;
  height: 17px;
}

/* ── Beraterkarte ──────────────────────────────────────────────────────── */
.biber-hero .pcard {
  background: rgba(1, 64, 98, 0.55) !important;
  border-color: rgba(255, 255, 255, 0.28) !important;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.biber-hero:not(.pitch) .pcard {
  flex: 0 1 390px !important;
  padding: 28px 30px !important;
}
.biber-hero .pcard-ava {
  width: 84px !important;
  height: 84px !important;
}
.biber-hero .pcard-ava img,
.biber-hero .pcard-ava .ini {
  width: 84px !important;
  height: 84px !important;
  font-size: 28px !important;
  border: 3px solid #fff !important;
}
.biber-hero .pcard-name {
  font-size: 21px !important;
}
.biber-hero .pcard-role {
  font-size: 14px !important;
}
.biber-hero .pcard-row {
  font-size: 15.5px !important;
  padding: 10px 0 !important;
}
.biber-hero .pcard-row svg {
  width: 19px !important;
  height: 19px !important;
}

/* Textspalte begrenzen, damit der Biber zwischen Text und Karte frei steht */
@media (min-width: 901px) {
  .biber-hero .hero-left {
    flex: 0 1 430px !important;
    max-width: 430px;
  }
}
@media (min-width: 901px) and (max-width: 1180px) {
  .biber-hero:not(.pitch) {
    --biber-hoehe: 290px;
    --biber-rechts: 330px;
  }
  .biber-hero .hero-left {
    flex-basis: 360px !important;
    max-width: 360px;
  }
}

/* ── Gewerbe: Pitch-Spalte, Biber groß oben ────────────────────────────── */
body:has(.pitch.biber-hero) .topbar-inner,
body:has(.pitch.biber-hero) .page {
  max-width: 1180px;
}
body:has(.pitch.biber-hero) .page {
  grid-template-columns: minmax(0, 1fr) 440px;
}
.pitch.biber-hero {
  padding: 290px 36px 36px !important;
  --biber-hoehe: 300px;
  --biber-rechts: 50%;
  --biber-unten: auto;
}
.pitch.biber-hero::after {
  top: -6px;
  transform: translateX(50%);
  /* Glas-Gebäude im Motiv reicht bis an den Rand — engere Maske */
  -webkit-mask-image: radial-gradient(circle at 50% 52%, #000 40%, transparent 58%);
  mask-image: radial-gradient(circle at 50% 52%, #000 40%, transparent 58%);
}
.pitch.biber-hero h1 {
  font-size: clamp(30px, 4.4vw, 48px) !important;
}
.pitch.biber-hero .lead {
  font-size: 16.5px !important;
}

/* ── Schmal: Biber oben mittig, Inhalt darunter ────────────────────────── */
@media (max-width: 900px) {
  .biber-hero:not(.pitch) {
    padding: 250px 20px 80px !important;
    --biber-hoehe: 260px;
    --biber-rechts: 50%;
  }
  .biber-hero:not(.pitch)::after {
    bottom: auto;
    top: -4px;
    transform: translateX(50%);
  }
  body:has(.biber-hero) .brand-img {
    height: 54px;
    max-width: 250px;
  }
  body:has(.pitch.biber-hero) .page {
    grid-template-columns: 1fr;
  }
  .pitch.biber-hero {
    padding: 240px 20px 26px !important;
    --biber-hoehe: 250px;
  }
  /* Fakten-Kacheln liefen schon vorher rechts aus der Karte */
  .pitch.biber-hero .facts {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }
  .pitch.biber-hero .fact {
    padding: 10px !important;
    min-width: 0;
  }
  .pitch.biber-hero .fact b {
    font-size: 14px !important;
  }
}