/* Page-specific background photography. Text stays in the document flow. */
.hero.hero-photo-stage {
  isolation:isolate;
  min-height:460px;
  padding:48px 0 50px;
  border-bottom:1px solid var(--rule);
}
.hero.hero-photo-stage::before { display:none; }
.hero-photo {
  display:block;
  position:absolute;
  inset:0 0 0 auto;
  width:min(72%,1200px);
  z-index:-2;
}
.hero-photo img {
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:70% 25%;
}
.hero.hero-photo-stage::after {
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:linear-gradient(90deg,var(--bogen) 0%,var(--bogen) 35%,rgba(241,243,240,.95) 49%,rgba(241,243,240,.7) 61%,transparent 80%);
  background:linear-gradient(90deg,var(--bogen) 0%,var(--bogen) 35%,color-mix(in srgb,var(--bogen) 95%,transparent) 49%,color-mix(in srgb,var(--bogen) 70%,transparent) 61%,transparent 80%);
}
.hero-photo-stage > .wrap { position:relative; pointer-events:none; }
.hero-photo-stage > .wrap > * { max-width:60%; pointer-events:auto; }
.hero-photo-stage h1 { width:60%; max-width:24ch; overflow-wrap:break-word; hyphens:auto; }
.hero-photo-stage .lead { width:60%; max-width:50ch; }
.hero-photo-stage .hero-facts { gap:20px 28px; }
.hero-photo-stage .hero-facts div span { color:var(--text-2); }
.hero-photo-stage .hero-facts div { flex:0 1 auto; }
.hero-photo-stage .btn { max-width:100%; white-space:normal; text-align:center; min-height:44px; }
.hero-photo-stage .btn:not(.btn-gruen):not(.btn-line) { background:#9C2F2A; color:#fff; }
.hero-photo-stage .btn:not(.btn-gruen):not(.btn-line):hover { background:#86241F; }
@media (min-width:1800px) {
  .hero.hero-photo-stage::after {
    background:linear-gradient(90deg,var(--bogen) 0%,var(--bogen) 40%,color-mix(in srgb,var(--bogen) 94%,transparent) 52%,transparent 77%);
  }
}
@media (prefers-color-scheme:dark) {
  :root:not([data-theme="light"]) .hero-photo img { filter:brightness(.72); }
}
:root[data-theme="dark"] .hero-photo img { filter:brightness(.72); }
@media (max-width:1000px) and (min-width:761px) {
  .hero-photo-stage > .wrap > * { max-width:66%; }
  .hero-photo-stage h1,.hero-photo-stage .lead { width:66%; }
  .hero.hero-photo-stage::after {
    background:linear-gradient(90deg,var(--bogen) 0%,color-mix(in srgb,var(--bogen) 98%,transparent) 37%,color-mix(in srgb,var(--bogen) 88%,transparent) 59%,transparent 88%);
  }
}
@media (max-width:760px) {
  .hero.hero-photo-stage { padding:225px 0 30px; min-height:0; }
  .hero-photo { width:100%; height:300px; }
  .hero-photo img { object-position:75% 22%; }
  .hero.hero-photo-stage::after {
    background:linear-gradient(180deg,transparent 90px,rgba(241,243,240,.38) 170px,var(--bogen) 270px);
    background:linear-gradient(180deg,transparent 90px,color-mix(in srgb,var(--bogen) 38%,transparent) 170px,var(--bogen) 270px);
  }
  .hero-photo-stage > .wrap > * { max-width:100%; }
  .hero-photo-stage h1,.hero-photo-stage .lead { width:100%; }
  .hero-photo-stage h1 { font-size:clamp(2rem,7vw,2.8rem); }
  .hero-photo-stage .lead { font-size:1.1rem; }
  .hero-photo-stage .hero-facts { gap:20px 24px; }
}
@media print {
  .hero-photo { display:none; }
  .hero.hero-photo-stage { padding:20px 0; min-height:0; }
  .hero.hero-photo-stage::after { display:none; }
  .hero-photo-stage > .wrap > *, .hero-photo-stage h1,.hero-photo-stage .lead { width:auto; max-width:100%; }
}

/* Captions are part of the visible figure, including on narrow screens. */
.hero-figure { display:contents; }
.hero-caption {
  position:absolute; right:max(22px,calc((100% - 1260px)/2 + 22px)); bottom:22px;
  width:min(32%,400px); margin:0; padding:12px 15px;
  background:var(--surface); color:var(--text-2); border:1px solid var(--rule);
  border-radius:var(--radius); font-family:var(--sans); font-size:.76rem; line-height:1.55;
}
@media (max-width:1000px) and (min-width:761px) { .hero-caption { width:28%; } }
@media (max-width:760px) {
  .hero-figure { display:block; position:relative; height:225px; margin:-225px 0 0; }
  .hero-caption { right:16px; left:16px; bottom:12px; width:auto; padding:9px 12px; font-size:.72rem; }
}
@media print { .hero-figure { display:none; } }