/* ── HERO — Zwei Köpfe, riesig ──────────────────────────────── */
.hero{
  position:relative;
  width:100%;height:100svh;
  min-height:620px;
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  overflow:hidden;
  background:var(--wine);
}
/* Sanfter Übergang von Wine → Dunkel am unteren Rand */
.hero::after{
  content:'';position:absolute;
  bottom:0;left:0;right:0;height:25%;
  background:linear-gradient(to bottom,transparent 0%,var(--bg) 100%);
  pointer-events:none;z-index:1;
}
/* Dezenter Gold-Schimmer hinter dem Logo */
.hero-glow{
  position:absolute;
  top:50%;left:50%;
  transform:translate(-50%,-55%);
  width:min(600px,80vw);height:min(500px,65vw);
  border-radius:50%;
  background:radial-gradient(ellipse,
    rgba(201,168,76,.07) 0%,
    rgba(201,168,76,.03) 30%,
    transparent 65%);
  pointer-events:none;
}

/* Container der ZWEI Köpfe */
.hero-heads{
  position:relative;z-index:2;
  display:flex;align-items:center;justify-content:center;
  gap:clamp(1rem,3vw,4rem);
  padding:0 1rem;
}

/* Jeder einzelne Kopf */
.hero-head{
  display:flex;align-items:center;justify-content:center;
  height:clamp(240px,46svh,540px);
  flex-shrink:0;
}
.hero-head img{height:100%;width:auto;object-fit:contain;}

/* Logo */
.hero-head-l img{
  filter:url(#hair)
    drop-shadow(0 0 40px rgba(201,168,76,.35))
    drop-shadow(0 0 100px rgba(10,3,5,.6));
  transition:filter .4s;
}
.hero-head-l img:hover{
  filter:url(#hair)
    drop-shadow(0 0 60px rgba(201,168,76,.6))
    drop-shadow(0 0 120px rgba(10,3,5,.5));
}

/* Fallback Wordmark */
.hero-logo-fb{
  display:none;font-family:var(--ff-h);font-size:clamp(3rem,8vw,7rem);
  font-style:italic;font-weight:300;color:var(--gold);
}

/* Standort-Zeile */
.hero-location{
  position:relative;z-index:3;
  margin-top:clamp(.6rem,1.8svh,1.8rem);
  display:flex;align-items:center;gap:.9rem;
  font-size:.62rem;font-weight:500;letter-spacing:.32em;
  text-transform:uppercase;color:var(--gold-light);opacity:.6;
}
.hero-location::before,.hero-location::after{
  content:'';width:28px;height:1px;background:var(--muted2);
}

/* Scroll-Pfeil */
.hero-arrow{
  position:absolute;bottom:1.8rem;left:50%;
  transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:.4rem;
  font-size:.56rem;letter-spacing:.25em;text-transform:uppercase;color:var(--muted2);
  animation:arr 2.5s ease-in-out infinite;z-index:3;cursor:pointer;
}
.hero-arrow svg{width:18px;height:18px;stroke:var(--gold);stroke-width:1.5;fill:none}
@keyframes arr{
  0%,100%{transform:translateX(-50%) translateY(0);opacity:.5}
  50%{transform:translateX(-50%) translateY(8px);opacity:1}
}

/* Mobile */
@media(max-width:580px){
  .hero-head{height:clamp(180px,35svh,300px)}
}