.hh-page{
  background:var(--cream);
}

/* treibt das Scrollen durch die ganze Zoom-Sequenz */
.hh-scroller{
  position:relative;
  height:700vh;
}

.hh-pin{
  position:sticky;
  top:0;
  height:100vh;
  overflow:hidden;
}

.hh-scene{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  text-align:center;
  padding:0 1.5rem;
  opacity:0;
}

.hh-scene[data-theme="haut"]{
  background:
    radial-gradient(circle at 50% 35%, rgba(194,154,69,.16), transparent 60%),
    var(--cream);
  color:var(--ink);
}

.hh-scene[data-theme="haar"]{
  background:
    radial-gradient(circle at 50% 65%, rgba(239,220,162,.14), transparent 60%),
    var(--teal-deep);
  color:var(--cream);
}

.hh-scene-img{
  display:block;
  width:min(40vw,260px);
  margin:0 auto 1.6rem;
  transform:scale(var(--scale,1));
}

.hh-scene-copy{
  max-width:480px;
}

.hh-eyebrow{
  text-transform:uppercase;
  letter-spacing:.26em;
  font-size:.72rem;
  font-weight:600;
  opacity:.75;
  margin-bottom:.6rem;
}

.hh-title{
  font-family:var(--display);
  font-style:italic;
  font-weight:400;
  font-size:clamp(2.2rem,6vw,3.2rem);
  margin-bottom:1.1rem;
}

.hh-scene[data-theme="haut"] .hh-title{color:var(--teal-deep);}
.hh-scene[data-theme="haar"] .hh-title{color:var(--gold-light);}

.hh-text{
  font-size:clamp(1rem,2vw,1.1rem);
  margin:0 auto 1.2rem;
  max-width:42ch;
}

.hh-tags{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:.6rem;
}
.hh-tags span{
  font-size:.78rem;
  font-weight:600;
  letter-spacing:.03em;
  padding:.35rem .9rem;
  border-radius:999px;
}
.hh-scene[data-theme="haut"] .hh-tags span{
  background:color-mix(in srgb, var(--gold) 18%, transparent);
  color:var(--teal-deep);
}
.hh-scene[data-theme="haar"] .hh-tags span{
  background:color-mix(in srgb, var(--gold-light) 20%, transparent);
  color:var(--gold-light);
}

/* runder Fortschritts-Slider über alle Stationen */
.hh-slider{
  position:absolute;
  top:50%;right:clamp(1.2rem,5vw,3rem);
  transform:translateY(-50%);
  z-index:5;
}

.hh-slider-track{
  position:relative;
  width:3px;
  height:260px;
  border-radius:3px;
  background:color-mix(in srgb, var(--teal-deep) 25%, transparent);
}

.hh-dot{
  position:absolute;
  left:50%;
  width:8px;height:8px;
  border-radius:50%;
  background:color-mix(in srgb, var(--teal-deep) 45%, transparent);
  transform:translate(-50%,-50%);
  transition:background .2s ease, transform .2s ease;
}
.hh-dot:nth-of-type(1){top:0%;}
.hh-dot:nth-of-type(2){top:20%;}
.hh-dot:nth-of-type(3){top:40%;}
.hh-dot:nth-of-type(4){top:60%;}
.hh-dot:nth-of-type(5){top:80%;}
.hh-dot:nth-of-type(6){top:100%;}
.hh-dot.is-active{
  background:var(--gold);
  transform:translate(-50%,-50%) scale(1.5);
}

.hh-slider-knob{
  position:absolute;
  left:50%;
  top:calc(var(--hh-progress, 0) * 100%);
  width:20px;height:20px;
  border-radius:50%;
  background:var(--gold);
  box-shadow:0 0 0 4px color-mix(in srgb, var(--gold) 25%, transparent);
  transform:translate(-50%,-50%);
}

.hh-hint{
  position:absolute;
  left:50%;bottom:2.2rem;
  transform:translateX(-50%);
  font-size:.85rem;
  color:var(--teal-deep);
  opacity:var(--hh-hint-opacity, 1);
  transition:opacity .3s ease;
  white-space:nowrap;
  z-index:5;
}

@media(max-width:560px){
  .hh-slider{right:.9rem;}
  .hh-slider-track{height:170px;}
  .hh-scene-img{width:min(55vw,200px);}
  .hh-title{font-size:clamp(1.9rem,9vw,2.6rem);}
}

.back{
  display:block;
  text-align:center;
  margin:3rem auto 4rem;
  color:var(--gold);
  text-decoration:underline;
  font-family:var(--body);
  font-size:.95rem;
}
p.back{text-decoration:none;}
p.back a{color:inherit;text-decoration:underline;}
p.back .sep{margin:0 .6em;text-decoration:none;color:var(--teal-deep);opacity:.5;}