/* ═══════════════════════════════════════════════════════════════════════
   HANSEKREDIT — Zielseite „Beamte mit Eigentum" (Google Ads)

   02.11.2026, zweite Fassung (Calvin: „Bitte passe sie auf das
   ursprüngliche Standarddesign an, was die Farben angeht, Überschriften
   und Anordnungen. Das Formular direkt ganz oben, aber im gewohnten
   Design — mit den Kacheln, nicht mit den Zeilen.")

   Die Seite ist eine Schwesterseite von eigentuemerkredit.html und
   beamtenkredit.html: gleiche Token, gleicher Hero-Verlauf, gleiche
   Abschnittsköpfe (section-label / section-title / section-sub), gleiche
   Karten, Zeitleiste, Akkordeon und Schlussband. Die Werte sind von dort
   übernommen, nicht neu erfunden. Das Formular nutzt assets/form-wizard.css
   (Kacheln .option-btn, Schritt-Tracker, Schieberegler) — hier stehen nur
   die Ergänzungen, die der Wizard nicht kennt (Ausstieg, Mehrfachauswahl,
   Fehlerzeilen, Danke-Zustand).

   Reihenfolge im <head> wie auf den Schwesterseiten: erst diese Datei,
   dann redesign.css — damit die dortigen Hero-, Kopf- und Handy-Regeln
   (Vorsatzmuster „-hero", „-hero-content", „counter-row") greifen.

   ⚠️ 15 px ist die Untergrenze für jede Schrift (BFSG/WCAG).
   ⚠️ Kein farbiger Strich am linken Rand von Karten oder Feldern.
   ═══════════════════════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --blue: #005fd9; --blue-dark: #003d99; --orange: #FF5F00;
  --white: #ffffff; --gray-bg: #F4F6F9; --gray-text: #6E6E6E;
  --text: #111; --font: 'DM Sans', sans-serif;
}
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { font-family: var(--font); color: var(--text); background: #001233; -webkit-font-smoothing: antialiased; }
main { display: block; }

/* ── BAUSTEINE DER PRODUKTSEITEN ── */
.section-label { display: inline-block; font-size: 15px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--blue); margin-bottom: 16px; }
.section-title { font-size: clamp(24px,4vw,40px); font-weight: 800; letter-spacing: -.5px; line-height: 1.2; margin-bottom: 16px; }
.section-sub { font-size: 17px; color: var(--gray-text); line-height: 1.6; }
.highlight { background: linear-gradient(90deg,#FFD166,#FF5F00,#FFD166); background-size: 200% auto; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; animation: shine 3s linear infinite; display: inline-block; }
@keyframes shine { to { background-position: 200% center; } }
.trust-badges { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 28px; }
.trust-badge { background: rgba(255,255,255,.15); border: 1px solid rgba(255,255,255,.28); border-radius: 100px; padding: 6px 14px; font-size: 15px; font-weight: 600; display: flex; align-items: center; gap: 6px; }
.trust-badge-dot { width: 7px; height: 7px; border-radius: 50%; background: #4ADE80; }
.stars-row { display: flex; align-items: center; gap: 10px; font-size: 15px; color: rgba(255,255,255,.7); margin-bottom: 32px; }

/* ── HERO ── */
.be-hero {
  background: linear-gradient(135deg,#001e6e 0%,var(--blue-dark) 40%,#0060d4 100%);
  color: #fff;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 540px);
  grid-template-rows: auto 1fr;
  column-gap: 40px;
  min-height: 620px;
}
.be-hero-content { grid-column: 1; grid-row: 1; padding: calc(var(--hk-head-h, 96px) + 56px) 0 0 48px; display: flex; flex-direction: column; justify-content: flex-end; }
.be-hero-mehr    { grid-column: 1; grid-row: 2; padding: 26px 0 56px 48px; align-self: start; }
.be-hero-form    { grid-column: 2; grid-row: 1 / span 2; padding: calc(var(--hk-head-h, 96px) + 20px) 48px 56px 0; align-self: start; }
/* Etwas Luft unter der Leiste: Auf den Schwesterseiten steht dort die
   Brotkrume, die eine reine Ads-Seite nicht hat. */
.be-hero h1 { font-size: clamp(26px,3.2vw,46px); font-weight: 800; line-height: 1.15; letter-spacing: -1px; margin: 12px 0 20px; }
.be-hero p { font-size: clamp(15px,1.4vw,17px); color: rgba(255,255,255,.85); max-width: 480px; margin: 0 0 32px; line-height: 1.7; }
.be-hero .hk-lede__claim { margin-bottom: 0; }
.be-hero-mehr > p { margin-bottom: 0; }
.be-hero .hk-lede__triad { margin-bottom: 24px; }

/* ── Hero neu (03.11.2026, Calvin: „zu unsortiert, Kästen zu groß") ──
   Links eine ruhige Spalte: zwei Merkmale, Überschrift, Zusage, Google-Badge,
   drei Vorteile als Haken-Liste, Kennzahlen als schmale Zeile ohne Kästen. */
.be-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.be-chip { display: inline-flex; align-items: center; gap: 7px; padding: 6px 13px; border-radius: 100px;
  background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.24);
  font-size: 15px; font-weight: 600; color: #fff; white-space: nowrap; }
.be-chip i { width: 7px; height: 7px; border-radius: 50%; background: #4ADE80; flex: none; }
.be-hero .be-claim { font-size: clamp(17px,1.6vw,20px); font-weight: 600; color: rgba(255,255,255,.92); line-height: 1.45; margin: 0; max-width: 46ch; }
.be-hero-badge { margin: 20px 0 0; }

.be-vorteile { list-style: none; display: grid; gap: 10px; margin: 0 0 26px; padding: 0; }
.be-vorteile li { display: flex; align-items: flex-start; gap: 10px; font-size: 17px; line-height: 1.4; color: rgba(255,255,255,.85); }
.be-vorteile b { color: #fff; font-weight: 700; }
.be-vorteile svg { width: 20px; height: 20px; flex: none; margin-top: 1px; fill: none; stroke: #FF8A3D; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }

.be-zahlen { display: flex; margin: 0; padding: 16px 0 0; border-top: 1px solid rgba(255,255,255,.18); max-width: 520px; }
.be-zahlen > div { flex: 1; padding: 0 16px; border-left: 1px solid rgba(255,255,255,.18); }
.be-zahlen > div:first-child { padding-left: 0; border-left: 0; }
.be-zahlen dt { font-size: clamp(18px,1.7vw,22px); font-weight: 800; color: #fff; letter-spacing: -.3px; white-space: nowrap; }
.be-zahlen dd { margin: 2px 0 0; font-size: 15px; color: rgba(255,255,255,.66); white-space: nowrap; }

/* Vertrauenszeile im Formular: eine Zeile statt drei */
.be-form .form-trust { flex-wrap: nowrap; justify-content: center; gap: 6px 16px; }
.be-form .form-trust span { white-space: nowrap; }
.be-form .form-trust svg { display: block; flex: none; }
@media (max-width: 480px) {
  .be-form .form-trust { gap: 6px 18px; padding: 10px 12px; margin-bottom: 20px; }
  .be-form .form-trust .be-trust-dsgvo { display: none; }   /* zwei Punkte passen in eine Zeile */
}

@media (max-width: 900px) {
  .be-hero-content, .be-hero-mehr, .be-hero-form { grid-column: auto; grid-row: auto; }
  .be-hero-content { padding: calc(var(--hk-head-h, 82px) + 18px) 20px 0; justify-content: flex-start; }
  .be-hero-form { padding: 20px 12px 0; }
  .be-hero-mehr { padding: 26px 20px 34px; }
  .be-hero h1 { margin: 6px 0 12px; }
  .be-hero-badge { margin: 16px 0 0; }
  .be-vorteile li { font-size: 16px; }
  .be-zahlen > div { padding: 0 10px; }
}
@media (max-width: 370px) {
  .be-zahlen > div { padding: 0 7px; }
  .be-zahlen dt { font-size: 17px; }
  .be-hero p { max-width: none; }
}
@media (min-width: 901px) and (max-height: 800px) {
  .be-hero-form { padding-top: calc(var(--hk-head-h, 96px) + 6px); }
}

/* ── FORMULARKARTE: Ergänzungen zum Wizard ── */
.be-form { text-align: center; margin: 0; width: 100%; max-width: none; }
.be-form.is-fertig .form-trust, .be-form.is-fertig .step-track { display: none; }
.be-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.be-form .form-step { text-align: center; }
.be-form .form-submit { margin-top: 4px; }

/* Mehrfachauswahl (Zweck): gewählte Kacheln tragen einen Haken */
[data-mehrfach] .option-btn { position: relative; }
[data-mehrfach] .option-btn.selected::after {
  content: ''; position: absolute; top: 8px; right: 8px; width: 18px; height: 18px; border-radius: 50%;
  background: var(--blue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 11px no-repeat;
}

/* Kontaktfelder: Fehlerzeile unter dem Feld, Rahmen orange wie im Wizard */
.be-feld { text-align: left; }
.be-feld-fehler { display: none; font-size: 15px; line-height: 1.4; color: #B34200; margin: -6px 0 12px; }
.be-feld.is-invalid .be-feld-fehler { display: block; }
.be-feld.is-invalid .form-input { border-color: var(--orange); }
select.form-input {
  appearance: none; -webkit-appearance: none; cursor: pointer; padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236E6E6E' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; background-size: 16px;
}
.be-sendefehler { display: none; text-align: left; font-size: 15px; line-height: 1.5; color: #7a2e00; background: #fff4ec; border: 1.5px solid rgba(255,95,0,.35); border-radius: 12px; padding: 12px 14px; margin: 0 0 12px; }
.be-sendefehler.is-visible { display: block; }
.be-sendefehler a { color: #B34200; font-weight: 700; }

/* Ausstieg (Beruf „Etwas anderes") */
.be-exit { display: none; text-align: center; }
.be-exit.active { display: block; }
.be-exit-knoepfe { display: grid; gap: 10px; }
.be-exit-btn {
  display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%;
  padding: 15px 20px; border-radius: 12px; font-family: var(--font); font-size: 16px; font-weight: 700;
  text-decoration: none; transition: transform .2s, box-shadow .2s, background .2s;
}
.be-exit-btn svg { width: 17px; height: 17px; flex: none; }
.be-exit-btn--orange { background: var(--orange); color: #fff; box-shadow: 0 6px 24px rgba(255,95,0,.35); }
.be-exit-btn--orange:hover { background: #e55500; transform: translateY(-2px); box-shadow: 0 10px 32px rgba(255,95,0,.45); }
.be-exit-btn--linie { background: #fff; color: #001845; border: 1.5px solid rgba(0,24,69,.25); }
.be-exit-btn--linie:hover { background: var(--gray-bg); }

/* Danke (Aufbau wie hkSuccessHTML in contact-handler.js) */
.be-danke { display: none; }
.be-danke.active { display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; padding: 8px 0 4px; }
.be-danke-haken { width: 56px; height: 56px; border-radius: 50%; background: rgba(5,150,105,.12); color: #059669; display: flex; align-items: center; justify-content: center; }
.be-danke-haken svg { width: 28px; height: 28px; }
.be-danke h3 { font-size: 22px; color: #001845; margin: 0; }
.be-danke p { font-size: 15px; color: #555; line-height: 1.65; max-width: 380px; margin: 0; }
.be-danke-btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; width: 100%; max-width: 340px; padding: 13px 24px; border-radius: 10px; font-size: 15px; font-weight: 700; text-decoration: none; }
.be-danke-btn svg { width: 16px; height: 16px; flex: none; }
.be-danke-btn--blau { background: var(--blue); color: #fff; }
.be-danke-btn--grau { background: var(--gray-bg); color: #001845; width: auto; }
.be-danke-note { font-size: 15px; color: #888; margin-top: -8px; max-width: 340px; line-height: 1.5; }
.be-danke-oder { font-size: 15px; color: #aaa; }

/* ── WAS DEN UNTERSCHIED MACHT (Kacheln wie die Verwendungszweck-Karten) ── */
.be-uses { padding: 88px 24px; background: #fff; }
.be-uses-head { text-align: center; max-width: 820px; margin: 0 auto 52px; }
.be-uses-head .section-sub { max-width: 640px; margin: 0 auto; }
.be-uses-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; max-width: 1100px; margin: 0 auto; }
.be-use-card { background: var(--gray-bg); border-radius: 18px; padding: 32px 24px 28px; border: 1.5px solid rgba(0,0,0,.05); display: flex; flex-direction: column; gap: 14px; transition: box-shadow .3s, transform .3s, border-color .3s; }
.be-use-card:hover { box-shadow: 0 10px 40px rgba(0,114,255,.11); transform: translateY(-4px); border-color: rgba(0,114,255,.18); }
.be-use-icon { width: 52px; height: 52px; border-radius: 14px; background: linear-gradient(135deg,rgba(0,114,255,.12),rgba(0,114,255,.04)); display: flex; align-items: center; justify-content: center; }
.be-use-icon svg { width: 26px; height: 26px; stroke: var(--blue); }
.be-use-icon--euro { font-size: 26px; font-weight: 600; line-height: 1; color: var(--blue); }
.be-use-card h3 { font-size: 18px; color: var(--text); line-height: 1.3; }
.be-use-card p { font-size: 15px; color: var(--gray-text); line-height: 1.65; flex: 1; }
.be-use-tag { display: inline-flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 700; color: var(--blue); padding: 5px 12px; background: rgba(0,114,255,.07); border-radius: 100px; width: fit-content; }
/* Drei Karten: drei Spalten oder eine — nie zwei plus eine. */
@media (max-width: 820px) { .be-uses-grid { grid-template-columns: 1fr; } }

/* ── ABLAUF (Zeitleiste wie auf den Produktseiten, Steuerung: assets/timeline.js) ── */
.be-tl { padding: 96px 24px; background: var(--gray-bg); }
.be-tl-head { text-align: center; margin-bottom: 64px; }
.be-tl-head .section-sub { max-width: 480px; margin: 0 auto; }
.be-tl-wrap { position: relative; max-width: 860px; margin: 0 auto; }
.be-tl-line { position: absolute; left: 50%; transform: translateX(-50%); width: 2px; background: rgba(0,0,0,.08); top: 0; bottom: 0; }
.be-tl-fill { position: absolute; left: 0; top: 0; width: 100%; background: var(--blue); height: 0%; border-radius: 2px; transition: height .08s linear; }
.be-tl-item { display: grid; grid-template-columns: 1fr 56px 1fr; gap: 0 24px; align-items: center; margin-bottom: 48px; }
.be-tl-item:last-child { margin-bottom: 0; }
.be-tl-card { background: #fff; border-radius: 14px; padding: 22px 24px; border: 1.5px solid transparent; transition: border-color .3s, box-shadow .3s; }
.be-tl-item.reached .be-tl-card:not(.be-tl-empty) { border-color: rgba(255,95,0,.2); box-shadow: 0 4px 24px rgba(255,95,0,.08); }
.be-tl-center { display: flex; justify-content: center; align-items: center; position: relative; z-index: 1; }
.be-tl-dot { width: 22px; height: 22px; border-radius: 50%; background: #ccc; border: 3px solid #fff; box-shadow: 0 0 0 2px #ccc; transition: background .3s, box-shadow .3s; }
.be-tl-item.reached .be-tl-dot { background: var(--orange); box-shadow: 0 0 0 2px var(--orange); animation: beDotPop .4s ease; }
@keyframes beDotPop { 40% { transform: scale(1.6); box-shadow: 0 0 0 7px rgba(255,95,0,.2); } 70% { transform: scale(.92); } 100% { transform: scale(1); } }
.be-tl-step { display: block; font-size: 15px; font-weight: 700; color: #bbb; letter-spacing: .06em; text-transform: uppercase; margin-bottom: 6px; transition: color .3s; }
.be-tl-item.reached .be-tl-step { color: var(--orange); }
.be-tl-card h3 { font-size: 18px; color: var(--text); margin-bottom: 6px; }
.be-tl-card p { font-size: 15px; color: #555; line-height: 1.65; }
.be-tl-empty { background: none; border: none; box-shadow: none; padding: 0; pointer-events: none; }
@media (max-width:680px) {
  .be-tl-item { grid-template-columns: 32px 1fr; gap: 0 16px; }
  .be-tl-line { left: 15px; transform: none; }
  .be-tl-item .be-tl-card { grid-column: 2; grid-row: 1; }
  .be-tl-item .be-tl-center { grid-column: 1; grid-row: 1; }
  .be-tl-empty { display: none; }
}

/* ── ANSPRECHPARTNER (Vertrauensblock der Produktseiten) ── */
.be-trust { padding: 96px 24px; background: #fff; }
.be-trust-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; max-width: 1060px; margin: 0 auto; align-items: center; }
.be-trust-img-wrap { position: relative; }
.be-trust-img { aspect-ratio: 1/1; border-radius: 20px; overflow: hidden; background: linear-gradient(135deg, var(--gray-bg), #e9eef6); display: flex; align-items: center; justify-content: center; padding: 14%; }
.be-trust-img img { width: 100%; height: 100%; object-fit: contain; display: block; }
.be-trust-badge { position: absolute; bottom: -14px; right: -14px; background: var(--orange); color: #fff; border-radius: 12px; padding: 10px 16px; font-size: 15px; font-weight: 800; box-shadow: 0 4px 20px rgba(255,95,0,.35); }
.be-trust-text { font-size: 16px; color: #555; line-height: 1.8; margin-bottom: 24px; }
.be-trust-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 24px; }
.be-trust-stat { background: var(--gray-bg); border-radius: 12px; padding: 18px 20px; }
.be-trust-stat-val { font-size: 26px; font-weight: 800; color: var(--blue); letter-spacing: -1px; line-height: 1; white-space: nowrap; }
.be-trust-stat-label { font-size: 15px; color: var(--gray-text); margin-top: 6px; font-weight: 600; }
.be-fakten { list-style: none; display: grid; gap: 10px; }
.be-fakten li { display: flex; align-items: flex-start; gap: 10px; font-size: 15px; color: #444; line-height: 1.5; }
.be-fakten svg { width: 18px; height: 18px; color: #059669; flex: none; margin-top: 2px; }
@media (max-width:768px) {
  .be-trust-inner { grid-template-columns: 1fr; gap: 48px; }
  .be-trust-img-wrap { max-width: 360px; margin: 0 auto; width: 100%; }
  .be-trust-badge { bottom: 12px; right: 12px; }
}
@media (max-width:400px) { .be-trust-stat-val { font-size: 22px; } }

/* ── FRAGEN (Akkordeon der Produktseiten) ── */
.be-faq { background: var(--gray-bg); padding: 100px 24px; }
.be-faq-inner { max-width: 800px; margin: 0 auto; }
.be-faq-head { text-align: center; margin-bottom: 56px; }
.be-accordion { display: flex; flex-direction: column; gap: 12px; }
.be-acc-item { border: 1.5px solid rgba(0,0,0,.08); border-radius: 14px; overflow: hidden; background: #fff; transition: border-color .25s; }
.be-acc-item.open { border-color: rgba(0,114,255,.25); }
.be-acc-trigger { width: 100%; background: none; border: none; padding: 22px 24px; display: flex; align-items: center; justify-content: space-between; gap: 16px; cursor: pointer; font-family: var(--font); text-align: left; }
.be-acc-question { font-size: 16px; font-weight: 700; color: var(--text); line-height: 1.4; }
.be-acc-icon { width: 28px; height: 28px; border-radius: 50%; background: var(--gray-bg); display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: background .25s, transform .35s; }
.be-acc-item.open .be-acc-icon { background: var(--blue); transform: rotate(45deg); }
.be-acc-icon svg { width: 14px; height: 14px; stroke: var(--gray-text); transition: stroke .25s; }
.be-acc-item.open .be-acc-icon svg { stroke: #fff; }
.be-acc-body { max-height: 0; overflow: hidden; transition: max-height .4s cubic-bezier(0.4,0,0.2,1); }
.be-acc-body-inner { padding: 0 24px 22px; font-size: 15px; color: #555; line-height: 1.7; }
.be-acc-body-inner p + p { margin-top: 10px; }

/* ── SCHLUSS-AUFRUF (Band der Produktseiten) ── */
.be-cta { background: linear-gradient(135deg,#001845 0%,#003080 55%,#001233 100%); padding: 96px 24px; text-align: center; position: relative; overflow: hidden; }
.be-cta::before { content: ''; position: absolute; width: 800px; height: 800px; border-radius: 50%; background: radial-gradient(circle,rgba(255,95,0,.12) 0%,transparent 70%); bottom: -400px; left: 50%; transform: translateX(-50%); }
.be-cta-inner { position: relative; z-index: 1; max-width: 640px; margin: 0 auto; }
.be-cta .section-label { color: rgba(255,255,255,.5); }
.be-cta h2 { font-size: clamp(28px,4vw,44px); font-weight: 800; color: #fff; line-height: 1.2; margin-bottom: 20px; }
.be-cta p { font-size: 18px; color: rgba(255,255,255,.75); line-height: 1.6; margin-bottom: 40px; }
.be-cta-btn { display: inline-flex; align-items: center; gap: 10px; background: var(--orange); color: #fff; font-size: 18px; font-weight: 700; padding: 20px 40px; border-radius: 12px; text-decoration: none; box-shadow: 0 8px 32px rgba(255,95,0,.4); transition: transform .2s, box-shadow .2s; }
.be-cta-btn:hover { transform: translateY(-2px); box-shadow: 0 12px 40px rgba(255,95,0,.55); }
.be-cta-btn svg { width: 20px; height: 20px; flex: none; }
@media (max-width: 480px) { .be-cta-btn { width: 100%; padding: 16px 20px; font-size: 17px; justify-content: center; } }
.be-cta-sub { margin-top: 20px; font-size: 15px; color: rgba(255,255,255,.4); }
.be-cta p.be-cta-sub { margin-bottom: 0; }
.be-cta-contacts { display: flex; justify-content: center; gap: 32px; margin-top: 40px; flex-wrap: wrap; }
.be-cta-contact { display: flex; align-items: center; gap: 10px; min-height: 44px; color: rgba(255,255,255,.65); font-size: 15px; text-decoration: none; transition: color .2s; }
.be-cta-contact:hover { color: #fff; }
.be-cta-contact svg { width: 18px; height: 18px; }

/* ── PFLICHTANGABEN ── */

/* ── FUSS ── */
footer { background: #001233; }

/* ── MOBILE LEISTE (sichtbar, sobald das Formular aus dem Bild ist) ── */
.be-sticky {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
  display: flex; align-items: center; gap: 10px;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
  background: rgba(255,255,255,.96); border-top: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 -8px 30px rgba(0,18,51,.12);
  transform: translateY(110%); transition: transform .3s ease;
}
.be-sticky.is-visible { transform: translateY(0); }
.be-sticky-btn { flex: 1; display: inline-flex; align-items: center; justify-content: center; min-height: 50px; background: var(--orange); color: #fff; font-size: 16px; font-weight: 700; border-radius: 12px; text-decoration: none; box-shadow: 0 6px 20px rgba(255,95,0,.3); }
.be-sticky-tel { flex: none; width: 52px; min-height: 50px; display: inline-flex; align-items: center; justify-content: center; border: 1.5px solid rgba(0,24,69,.25); border-radius: 12px; color: #001845; }
.be-sticky-tel svg { width: 22px; height: 22px; }
@media (min-width: 901px) { .be-sticky { display: none; } }
@media (prefers-reduced-motion: reduce) { .be-sticky { transition: none; } }

/* ── Hero mit Motiv (03.11.2026, Calvin: „zu klinisch, zu leer, Verlauf nicht
   erkennbar") — Bild der Beamtenkredit-Seite groß im Hintergrund, darüber ein
   kräftiger, sichtbarer Navy→Blau-Verlauf: links dicht für den Text, zur
   Mitte offen, damit Fahne und Ministerium wirken. ── */
.be-hero { position: relative; overflow: hidden; isolation: isolate; }
.be-hero-bild { position: absolute; inset: 0; z-index: -2; display: block; }
.be-hero-bild img { width: 100%; height: 100%; object-fit: cover; object-position: 58% 38%; display: block; }
.be-hero::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(55% 70% at 8% 100%, rgba(255,95,0,.22) 0%, transparent 62%),
    radial-gradient(40% 55% at 92% 8%, rgba(77,147,232,.35) 0%, transparent 65%),
    linear-gradient(100deg, #001233 0%, rgba(0,30,110,.95) 30%, rgba(0,42,130,.70) 50%, rgba(0,60,170,.40) 66%, rgba(0,40,130,.62) 82%, rgba(0,30,110,.82) 100%);
}
.be-hero h1, .be-hero .be-claim, .be-vorteile li { text-shadow: 0 2px 14px rgba(0,18,51,.45); }
@media (max-width: 900px) {
  .be-hero-bild img { object-position: 64% 30%; }
  .be-hero::before {
    background:
      radial-gradient(80% 40% at 0% 100%, rgba(255,95,0,.18) 0%, transparent 65%),
      linear-gradient(180deg, rgba(0,18,51,.62) 0%, rgba(0,30,110,.80) 30%, rgba(0,34,110,.94) 52%, #00288a 72%, #0050c0 100%);
  }
}

/* ── Formularkarte im Hero (03.11.2026, Calvin: „zu gequetscht, soll sich
   dem Design anpassen") ──
   Breitere Spalte, mehr Innenraum, höhere Kacheln. Ein heller Ring um die
   Karte bindet sie an den Hero an, statt sie als weißen Block abzusetzen.
   Die Schrittanzeige läuft über die volle Breite statt gedrängt in der Mitte. */
.be-hero { grid-template-columns: minmax(0, 1fr) minmax(0, 580px); column-gap: 48px; }
.be-hero-form .be-form {
  padding: 34px 38px 30px;
  border-radius: 22px;
  box-shadow: 0 0 0 8px rgba(255,255,255,.10), 0 36px 90px rgba(0,10,40,.45);
}
.be-form .form-trust { background: #F2F5FA; border-radius: 12px; margin-bottom: 26px; }
.be-form .step-track { justify-content: space-between; margin: 0 2px 30px; }
.be-form .step-connector { flex: 1 1 0; width: auto !important; min-width: 12px; margin: 0 6px 22px; }
.be-form .step-label-sm { font-weight: 600; color: #8A94A6; }
.be-form .step-title { font-size: 23px; letter-spacing: -.3px; }
.be-form .step-desc { margin-bottom: 22px; }
.be-form .option-grid { gap: 12px; }
.be-form .option-btn {
  min-height: 112px; justify-content: center; gap: 12px;
  padding: 20px 14px 18px; border-radius: 16px; font-size: 16px;
  background: #fff; border-color: #E3E8F0; box-shadow: 0 1px 2px rgba(0,24,69,.05);
  transition: border-color .2s, background .2s, color .2s, box-shadow .2s, transform .2s;
}
.be-form .option-btn:hover { transform: translateY(-1px); box-shadow: 0 10px 24px rgba(0,60,170,.10); }
.be-form .option-btn .opt-icon { width: 44px; height: 44px; border-radius: 12px; }
.be-form .option-btn--wide { min-height: 0; padding: 16px; }
@media (max-width: 900px) {
  .be-hero-form { padding: 22px 14px 0; }
  .be-hero-form .be-form { padding: 26px 18px 22px; border-radius: 20px; box-shadow: 0 0 0 6px rgba(255,255,255,.10), 0 24px 60px rgba(0,10,40,.40); }
  .be-form .step-track { margin-bottom: 26px; }
  .be-form .option-grid { gap: 10px; }
  .be-form .option-btn { min-height: 108px; padding: 16px 8px 14px; gap: 10px; }
  .be-form .option-btn--wide { min-height: 0; padding: 14px 16px; }
}
@media (prefers-reduced-motion: reduce) { .be-form .option-btn:hover { transform: none; } }



/* ── Hero mittiger (03.11.2026, Calvin: „mittiger, sauberer, aufgeräumter") ──
   Inhalt auf 1200 px begrenzt und mittig, statt an den Bildschirmrändern zu
   kleben. Die linke Spalte steht vertikal mittig zum Formular: Zeilen 1 und 4
   sind elastischer Leerraum. */
@media (min-width: 901px) {
  .be-hero {
    padding: calc(var(--hk-head-h, 96px) + 28px) max(48px, calc((100% - 1200px) / 2)) 56px;
    grid-template-columns: minmax(0, 1fr) minmax(0, 560px);
    grid-template-rows: 1fr auto auto 1fr;
    column-gap: clamp(40px, 5vw, 72px);
  }
  .be-hero-content { grid-row: 2; padding: 0; justify-content: flex-start; }
  .be-hero-mehr    { grid-row: 3; padding: 28px 0 0; }
  .be-hero-form    { grid-row: 1 / -1; padding: 0; align-self: center; }
}
@media (min-width: 901px) and (max-height: 800px) {
  .be-hero { padding-top: calc(var(--hk-head-h, 96px) + 14px); }
  .be-hero-form { padding-top: 0; }
}

/* Hero endet immer genau am unteren Bildschirmrand (Calvin 03.11.:
   „immer andockend an den Bildschirmboden"). svh, damit mobile Leisten
   nicht mitzählen; ist der Inhalt höher, wächst der Hero einfach mit. */
.be-hero { min-height: 100vh; min-height: 100svh; }
/* Flache Laptop-Bildschirme: Formular dichter, damit der Hero trotzdem
   am Bildschirmboden endet. */
@media (min-width: 901px) and (max-height: 820px) {
  .be-hero { padding-bottom: 24px; }
  .be-hero-form .be-form { padding: 24px 32px 20px; }
  .be-form .form-trust { margin-bottom: 16px; padding: 9px 14px; }
  .be-form .step-track { margin-bottom: 16px; }
  .be-form .step-title { font-size: 21px; }
  .be-form .step-desc { margin-bottom: 14px; }
  .be-form .option-grid { gap: 10px; margin-bottom: 14px; }
  .be-form .option-btn { min-height: 90px; padding: 12px 12px 11px; gap: 8px; }
  .be-form .option-btn .opt-icon { width: 38px; height: 38px; }
  .be-form .option-btn--wide { min-height: 0; padding: 11px 16px; }
  .be-chips { margin-bottom: 12px; }
  .be-hero-badge { margin-top: 16px; }
  .be-hero-mehr { padding-top: 18px; }
  .be-vorteile { gap: 7px; margin-bottom: 18px; }
}

/* ── BERUFSGRUPPEN als Dienstverzeichnis (03.11.2026, Neufassung) ──
   Hell und typografisch: links die Aussage, rechts eine Liste mit
   laufender Nummer, Beruf in der Überschriftenschrift und Punktlinie bis
   zur Beschreibung. Keine Kacheln, keine Symbole. */
.be-berufe { padding: 96px 24px; background: var(--gray-bg); }
.be-berufe-inner { max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(40px, 6vw, 96px); align-items: start; }
.be-berufe-text { position: sticky; top: calc(var(--hk-head-h, 96px) + 32px); }
.be-berufe-text .section-title { margin-bottom: 18px; }
.be-berufe-text p { font-size: 17px; line-height: 1.65; color: var(--gray-text); margin: 0 0 28px; max-width: 42ch; }
.be-berufe-btn { display: inline-flex; align-items: center; min-height: 48px; padding: 13px 26px; border-radius: 12px;
  background: linear-gradient(135deg, #FF7A22 0%, #FF5F00 55%, #E85400 100%); color: #fff; font-weight: 700; font-size: 16px;
  text-decoration: none; box-shadow: 0 6px 18px rgba(255,95,0,.30); transition: transform .2s, box-shadow .2s; }
@media (hover: hover) { .be-berufe-btn:hover { transform: translateY(-1px); box-shadow: 0 10px 26px rgba(255,95,0,.42); } }
.be-verz { margin: 0; border-top: 1px solid rgba(0,24,69,.12); }
.be-verz-zeile { display: flex; align-items: baseline; gap: 14px; padding: 17px 0; border-bottom: 1px solid rgba(0,24,69,.08); }
.be-verz-nr { flex: none; width: 26px; font-size: 15px; font-weight: 700; color: #FF5F00; font-variant-numeric: tabular-nums; }
.be-verz dt { flex: none; margin: 0; font-family: var(--hk-font-display, Georgia, serif); font-size: 21px; font-weight: 700; color: #001845; letter-spacing: -.2px; }
.be-verz-linie { flex: 1; min-width: 24px; border-bottom: 2px dotted rgba(0,24,69,.18); transform: translateY(-5px); }
.be-verz dd { flex: none; margin: 0; font-size: 16px; color: var(--gray-text); text-align: right; }
@media (max-width: 900px) {
  .be-berufe { padding: 64px 20px; }
  .be-berufe-inner { grid-template-columns: 1fr; gap: 28px; }
  .be-berufe-text { position: static; }
  .be-berufe-text p { margin-bottom: 22px; }
  .be-berufe-btn { display: none; }   /* am Handy trägt die feste Leiste unten den Aufruf */
}
@media (max-width: 560px) {
  .be-verz-zeile { display: grid; grid-template-columns: 26px 1fr; column-gap: 12px; row-gap: 2px; padding: 14px 0; }
  .be-verz-nr { grid-row: 1 / span 2; }
  .be-verz dt { font-size: 19px; }
  .be-verz-linie { display: none; }
  .be-verz dd { text-align: left; font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) { .be-berufe-btn:hover { transform: none; } }

/* 20 Berufsgruppen (Calvin 03.11.: „sind doch wesentlich mehr"):
   Kopf oben in zwei Spalten, Verzeichnis darunter zweispaltig. */
.be-berufe-inner { grid-template-columns: 1fr; gap: 44px; }
.be-berufe-kopf { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(32px, 6vw, 96px); align-items: end; }
.be-berufe-kopf .section-title { margin-bottom: 0; }
.be-berufe-text { position: static; }
.be-berufe-text p { margin-bottom: 22px; }
.be-verz { columns: 2; column-gap: 64px; border-top: 0; }
.be-verz-zeile { break-inside: avoid; padding: 15px 0; }
.be-verz dt { font-size: 20px; }
@media (max-width: 900px) {
  .be-berufe-kopf { grid-template-columns: 1fr; gap: 14px; }
  .be-verz { columns: 1; }
}
@media (max-width: 560px) {
  .be-verz-zeile { padding: 11px 0; }
  .be-verz dt { font-size: 18px; }
}
.be-verz dd { flex: 0 1 auto; min-width: 0; }
@media (max-width: 1100px) { .be-verz { column-gap: 40px; } .be-verz dt { font-size: 19px; } }

/* Über HANSEKREDIT: Foto statt Wappen (Calvin 03.11.: „das Bild passt nicht").
   Pexels-Foto 5816300 (freie Lizenz, keine Namensnennung nötig);
   quadratischer Ausschnitt auf Gesichter und Unterlagen. */
.be-trust-img { padding: 0; background: #e9eef6; box-shadow: 0 24px 60px rgba(0,24,69,.14); }
.be-trust-img img { object-fit: cover; object-position: 50% 45%; }