/* ——— UNTERSEITEN-HEADER ———
   Kompakte Variante des Hero-Panels für Datenschutz, Impressum,
   Kontakt und Job-Detailseiten. Gleiches Farbschema und "Insel"-
   Prinzip (nur eine Ecke gerundet) wie der Rest der Seite. */
.page-hero { padding: 24px 56px 0; }
.page-hero-panel {
  position: relative;
  background: var(--accent);
  color: #fff;
  border-radius: 0 var(--side-round) var(--side-round) 0;
  padding: 56px;
  padding-right: 400px;
}
.page-hero-crumb {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: rgba(255,255,255,.75);
  text-decoration: none;
  margin-bottom: 22px;
}
.page-hero-crumb:hover { color: #fff; }
.page-hero-panel h1 {
  color: #fff;
  font-size: var(--fs-h1);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.12;
  max-width: 24ch;
}
.page-hero-panel .lead {
  margin-top: 16px;
  font-size: var(--fs-lead);
  line-height: 1.55;
  font-weight: 500;
  color: rgba(255,255,255,.88);
  max-width: 58ch;
}
.page-hero-panel .actions { margin-top: 26px; }

/* ——— HERO-FOTO: liegt über dem Panel, in voller Blockhöhe, und
   reicht bis an die eigene rechte Kante des blauen Blocks — nicht
   darüber hinaus. Gleiche Kantensprache wie der Rest der Seite:
   flush an der Seite, an der es am Panel "klebt", gerundet an der
   freien Außenkante. ——— */
.page-hero-photo-frame {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: 400px;
  border-radius: 0 var(--side-round) var(--side-round) 0;
  overflow: hidden;
}
.page-hero-photo-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }

@media (max-width: 860px) {
  .page-hero { padding: 20px 20px 0; }
  .page-hero-panel { padding: 32px 24px; padding-right: 24px; border-radius: 0 28px 28px 0; }
  .page-hero-photo-frame {
    position: static;
    width: auto;
    height: 220px;
    margin-top: 24px;
    border-radius: 20px;
  }
}