/* ═══════════════════════════════════════════════════════════════════════
   HANSEKREDIT — Hero-Verlauf, eine Quelle für alle Unterseiten
   04.11.2026 (Calvin): Gestaltung wie auf beamte-eigentum.html — das Bild
   läuft vollflächig hinter dem Text und verschwimmt weich ins Blau, statt
   in der Mitte hart abgeschnitten zu werden. Insgesamt deutlich heller und
   freundlicher, das Orange unten links nur noch als blasser Schimmer.
   Seiten ohne Bild bekommen denselben Verlauf.

   Wird als LETZTES Stylesheet im <head> geladen und schlägt so die
   Hero-Regeln der einzelnen Seiten (die stehen dort inline).
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  --hv-tief: #0d3f99;     /* linke, textstarke Seite — heller als das alte #001e6e */
  --hv-mitte: #1a5fc8;
  --hv-hell: #3a8ae6;
  --hv-orange: rgba(255, 150, 80, .14);
  --hv-licht: rgba(150, 200, 255, .30);
}

/* ── Seiten mit Bild: Bild vollflächig, Text links ─────────────────── */
.af-hero, .bk-hero, .ek-hero, .ik-hero, .ks-hero, .mk-hero, .um-hero, .zv-hero {
  position: relative !important;
  isolation: isolate;
  overflow: hidden;
  background: var(--hv-tief) !important;
  padding-inline: max(0px, calc((100% - 1440px) / 2));
}
.af-hero-image, .bk-hero-image, .ek-hero-image, .ik-hero-image,
.ks-hero-image, .mk-hero-image, .um-hero-image, .zv-hero-image {
  position: absolute !important;
  inset: 0;
  z-index: -2;
  display: block !important;
}
.af-hero-image::before, .bk-hero-image::before, .ek-hero-image::before, .ik-hero-image::before,
.ks-hero-image::before, .mk-hero-image::before, .um-hero-image::before, .zv-hero-image::before,
.af-hero-image::after, .bk-hero-image::after, .ek-hero-image::after, .ik-hero-image::after,
.ks-hero-image::after, .mk-hero-image::after, .um-hero-image::after, .zv-hero-image::after {
  display: none !important;
}
.af-hero-image img, .bk-hero-image img, .ek-hero-image img, .ik-hero-image img,
.ks-hero-image img, .mk-hero-image img, .um-hero-image img, .zv-hero-image img {
  width: 100%; height: 100%; object-fit: cover; object-position: 75% 35%; display: block;
}
.af-hero::before, .bk-hero::before, .ek-hero::before, .ik-hero::before,
.ks-hero::before, .mk-hero::before, .um-hero::before, .zv-hero::before {
  content: '';
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(55% 70% at 4% 100%, var(--hv-orange) 0%, transparent 62%),
    radial-gradient(45% 60% at 96% 6%, var(--hv-licht) 0%, transparent 65%),
    linear-gradient(100deg,
      var(--hv-tief) 0%,
      rgba(16, 72, 172, .93) 30%,
      rgba(26, 95, 200, .66) 50%,
      rgba(40, 120, 225, .26) 70%,
      rgba(40, 120, 225, .12) 100%);
}

/* Handy und kleines Tablet: Bild oben sichtbar, darunter weich ins Blau */
@media (max-width: 860px) {
  .af-hero-image img, .bk-hero-image img, .ek-hero-image img, .ik-hero-image img,
  .ks-hero-image img, .mk-hero-image img, .um-hero-image img, .zv-hero-image img {
    object-position: 65% 30%;
  }
  .af-hero::before, .bk-hero::before, .ek-hero::before, .ik-hero::before,
  .ks-hero::before, .mk-hero::before, .um-hero::before, .zv-hero::before {
    background:
      radial-gradient(90% 40% at 0% 100%, var(--hv-orange) 0%, transparent 65%),
      linear-gradient(180deg,
        rgba(13, 63, 153, .55) 0%,
        rgba(16, 72, 172, .82) 26%,
        rgba(20, 82, 186, .95) 48%,
        var(--hv-mitte) 72%,
        #2a74da 100%);
  }
}

/* ── Seiten ohne Bild (blaue Köpfe): derselbe Verlauf ──────────────── */
.kb-hero, .au-hero, .sf-hero, .nw-hero, .ar-hero, .pf-kopf, .pf-detail-kopf {
  background:
    radial-gradient(55% 80% at 2% 100%, var(--hv-orange) 0%, transparent 62%),
    radial-gradient(50% 70% at 98% 0%, var(--hv-licht) 0%, transparent 65%),
    linear-gradient(115deg, var(--hv-tief) 0%, var(--hv-mitte) 55%, var(--hv-hell) 100%) !important;
}

/* ── Beamten-Landingpage: gleiche hellere Farben ───────────────────── */
.be-hero::before {
  background:
    radial-gradient(55% 70% at 4% 100%, var(--hv-orange) 0%, transparent 62%),
    radial-gradient(45% 60% at 96% 6%, var(--hv-licht) 0%, transparent 65%),
    linear-gradient(100deg,
      var(--hv-tief) 0%,
      rgba(16, 72, 172, .93) 30%,
      rgba(26, 95, 200, .66) 50%,
      rgba(40, 120, 225, .26) 70%,
      rgba(40, 120, 225, .12) 100%) !important;
}
@media (max-width: 900px) {
  .be-hero::before {
    background:
      radial-gradient(90% 40% at 0% 100%, var(--hv-orange) 0%, transparent 65%),
      linear-gradient(180deg,
        rgba(13, 63, 153, .55) 0%,
        rgba(16, 72, 172, .82) 26%,
        rgba(20, 82, 186, .95) 48%,
        var(--hv-mitte) 72%,
        #2a74da 100%) !important;
  }
}

/* ── Wissensseiten (FAQ, Glossar, Jobs): bisher weißer Kopf ────────── */
.w-hero {
  background:
    radial-gradient(55% 80% at 2% 100%, var(--hv-orange) 0%, transparent 62%),
    radial-gradient(50% 70% at 98% 0%, var(--hv-licht) 0%, transparent 65%),
    linear-gradient(115deg, var(--hv-tief) 0%, var(--hv-mitte) 55%, var(--hv-hell) 100%);
  color: #fff;
  padding-bottom: 56px !important;
}
.w-hero h1 { color: #fff !important; }
.w-hero .w-eyebrow { color: #FFB27A !important; }
.w-hero .w-lead, .w-hero p:not(.w-eyebrow) { color: rgba(255, 255, 255, .88) !important; }
.w-hero a.w-more, .w-hero .w-letters a {
  color: #fff !important;
  background: rgba(255, 255, 255, .12) !important;
  border: 1px solid rgba(255, 255, 255, .24) !important;
  border-radius: 100px; padding: 6px 13px !important; text-decoration: none;
}
.w-hero a.w-more:hover, .w-hero .w-letters a:hover { background: rgba(255, 255, 255, .22) !important; }
/* Der weiße Kopf ging früher nahtlos in den Inhalt über — jetzt braucht
   der erste Abschnitt Abstand zur farbigen Fläche. */
.w-hero { margin-bottom: 48px; }
/* Ohne die Bubbles am Handy braucht die Überschrift etwas Luft zur Leiste. */
@media (max-width: 640px) { .be-hero h1 { margin-top: 16px !important; } }