/* Einzige Quelle für die Bildgestaltung im Bordeaux-Hero.
   Feste Containerhöhe; das Bild liegt ohne Abstand über der gesamten Fläche. */
.hero-visual {
  position: relative;
  width: 100%;
  min-width: 0;
  height: 530px;
  overflow: hidden;
  border-radius: 220px 220px 3px 3px;
  isolation: isolate;
}
.hero-visual > .hero-visual__image {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  object-fit: cover;
  object-position: 32% 0%;
}
.hero-visual::after {
  content: "";
  position: absolute;
  inset: 55% 0 0;
  background: linear-gradient(to bottom, transparent, rgba(35, 14, 23, .65));
  pointer-events: none;
  z-index: 1;
}
.hero-visual > .hero-visual__caption {
  position: absolute;
  left: 38px;
  right: 24px;
  bottom: 24px;
  z-index: 2;
  color: var(--paper);
  font: italic 26px/1.3 var(--serif);
  text-shadow: 0 1px 5px rgba(35, 14, 23, .3);
}
@media (min-width: 1500px) {
  .hero-visual { height: 600px; }
}
@media (min-width: 851px) and (max-width: 1100px) {
  .hero-visual > .hero-visual__image { object-position: min(-25px, calc(40% + 45px)) 0%; }
}
@media (min-width: 601px) and (max-width: 850px) {
  .hero-visual { height: 450px; }
  .hero-visual > .hero-visual__image { object-position: min(-25px, calc(42% + 45px)) 0%; }
}
@media (max-width: 600px) {
  .hero-visual { height: 400px; max-width: 390px; margin: auto; }
  .hero-visual > .hero-visual__image { object-position: 40% 0%; }
  .hero-visual > .hero-visual__caption { left: 28px; right: 20px; bottom: 20px; }
}
/* iPad: gegenüber der vorherigen Position exakt 25px zurück nach links,
   auch wenn der vorherige Versatz an der linken Bildkante begrenzt war. */
@media (min-width: 1101px) and (max-width: 1366px) {
  .hero-visual > .hero-visual__image {
    object-position: min(-25px, calc(32% + 45px)) 0%;
  }
}