:root{
  --cream:#f7f1e7;
  --navy:#0f2a44;
  --gold:#c8a463;
}
*{box-sizing:border-box}
html,body{
  margin:0;
  min-height:100%;
  background:var(--cream);
}
body{
  overflow-x:hidden;
}
.hero{
  position:relative;
  width:100%;
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--cream);
}
.hero img{
  display:block;
  width:100%;
  height:auto;
  max-width:1536px;
}
.hotspot{
  position:absolute;
  display:block;
  z-index:2;
  border-radius:8px;
}
.hotspot:focus-visible{
  outline:3px solid var(--gold);
  outline-offset:3px;
}
/* Clickable areas correspond to the visible footer text in the image */
.email{
  left:29.2%;
  top:91.0%;
  width:17.0%;
  height:4.2%;
}
.impressum{
  left:47.0%;
  top:91.0%;
  width:10.0%;
  height:4.2%;
}
.datenschutz{
  left:58.4%;
  top:91.0%;
  width:12.5%;
  height:4.2%;
}
@media (max-aspect-ratio: 3/2){
  .hero{
    align-items:flex-start;
  }
}