/* Kategorieseiten Gin & Tonic, Tonic Water, Cognac & Brandy, Rum, Drinks & Cocktails:
   Foto-Hero hinter dem Einleitungstext (nur auf diesen Seiten eingebunden).
   Die Fotos sind in beiden Farbschemata dunkel; Schriftfarben sind daher fest hell. */
.cat-hero{
  position:relative;
  isolation:isolate;
  display:flex;
  align-items:center;
  min-height:clamp(320px, 28vw, 420px);
  background:#0A0907 var(--hero-m) 65% center / cover no-repeat;
  color:#F6F1E6;
  margin-top:12px;
}
@media (min-width:700px){
  .cat-hero{ background-image:var(--hero-d); background-position:right center; }
}
.cat-hero::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:linear-gradient(90deg, rgba(7,6,5,.76) 0%, rgba(7,6,5,.60) 42%, rgba(7,6,5,.10) 72%, rgba(7,6,5,0) 100%);
}
.cat-hero .hero{ width:100%; padding-block:56px; }
.cat-hero .kicker{ color:#E7C97A; }
.cat-hero h1{ color:#FFFFFF; text-shadow:0 1px 18px rgba(0,0,0,.5); }
.cat-hero .lede{ color:#EDE8DC; text-shadow:0 1px 12px rgba(0,0,0,.55); max-width:min(50ch, 54%); }
@media (max-width:699px){
  .cat-hero::before{ background:linear-gradient(180deg, rgba(7,6,5,.74) 0%, rgba(7,6,5,.64) 55%, rgba(7,6,5,.82) 100%); }
  .cat-hero .hero{ padding-block:44px; }
  .cat-hero .lede{ max-width:none; }
}
.cat-hero--gintonic{ --hero-m:url("../img/gintonic/hero-gintonic-900.webp"); --hero-d:url("../img/gintonic/hero-gintonic-2000.webp"); }
.cat-hero--tonic{ --hero-m:url("../img/tonic/hero-tonic-900.webp"); --hero-d:url("../img/tonic/hero-tonic-2000.webp"); }
.cat-hero--cognac{ --hero-m:url("../img/cognac/hero-cognac-900.webp"); --hero-d:url("../img/cognac/hero-cognac-2000.webp"); }
.cat-hero--rum{ --hero-m:url("../img/rum/hero-rum-900.webp"); --hero-d:url("../img/rum/hero-rum-2000.webp"); }
.cat-hero--drinks{ --hero-m:url("../img/drinks/hero-drinks-900.webp"); --hero-d:url("../img/drinks/hero-drinks-2000.webp"); }