/* Startseite: Foto-Hero hinter dem Einleitungstext (nur auf der Startseite eingebunden).
   Das Foto ist in beiden Farbschemata dunkel; Schriftfarben sind daher fest hell. */
.hero-photo{
  position:relative;
  isolation:isolate;
  display:flex;
  align-items:center;
  min-height:clamp(380px, 34vw, 520px);
  background:#0A0C0A url("../img/home/hero-gin-tonic-bar-1400.webp") right center / cover no-repeat;
  color:#F6F1E6;
  margin-bottom:40px;
}
@media (min-width:700px){
  .hero-photo{ background-image:url("../img/home/hero-gin-tonic-bar-2000.webp"); }
}
.hero-photo::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:linear-gradient(90deg, rgba(8,10,8,.9) 0%, rgba(8,10,8,.74) 38%, rgba(8,10,8,.18) 72%, rgba(8,10,8,0) 100%);
}
.hero-photo .hero{ width:100%; padding-block:56px; }
.hero-photo .kicker{ color:#E7BE73; }
.hero-photo h1{ color:#FFFFFF; text-shadow:0 1px 18px rgba(0,0,0,.45); }
.hero-photo .lede{ color:#EDE6D6; text-shadow:0 1px 12px rgba(0,0,0,.5); }
.hero-photo .btn-primary{ background:#E7BE73; color:#1A1F1B; }
.hero-photo .btn-ghost{ color:#F6F1E6; border-color:rgba(246,241,230,.55); background:rgba(8,10,8,.25); }
.hero-photo .btn:focus-visible{ outline:2px solid #FFFFFF; outline-offset:3px; }
@media (max-width:699px){
  .hero-photo::before{ background:linear-gradient(180deg, rgba(8,10,8,.72) 0%, rgba(8,10,8,.62) 55%, rgba(8,10,8,.8) 100%); }
  .hero-photo .hero{ padding-block:44px; }
}