/** Shopify CDN: Minification failed

Line 121:32 Expected ":"
Line 122:0 Expected "}" to go with "{"

**/
.hafa-sys-scroll__spacer { height: var(--scroll-vh); }
.hafa-sys-scroll__sticky {
  position: sticky;
  top: 0;
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding-top: 32px;
  padding-bottom: 32px;
}

.hafa-sys-scroll{
  /* wenn bg-use=1 -> nutze Custom, sonst Theme Background */
  background: rgba(var(--color-background), 1);
}

.hafa-sys-scroll[style*="--bg-use: 1"]{
  background: var(--bg-custom);
}


.hafa-sys-scroll__grid{
  width: 100%;
  display: grid;
  grid-template-columns: 58% 42%;
  gap: 28px;
  align-items: center;
  min-height: var(--min-h);
}

.hafa-sys-scroll__frame{
  position: relative;
  border-radius: var(--img-radius);
  overflow: visible; /* wichtig: damit Schatten/Labels nicht abgeschnitten werden */
  background: transparent;
  box-shadow: none; /* optional: weg, wenn du wirklich “nahtlos” willst */
}


.hafa-sys-scroll__img{
  display:block;
  width:100%;
  height:auto;
}

.hafa-sys-scroll__img--color{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit: cover;
  opacity: 0;
  transform: translateZ(0);
}

.hafa-sys-scroll__labels{
  position:absolute;
  inset:0;
  pointer-events:none;
}

.hafa-sys-scroll__label{
  position:absolute;
  display:flex;
  align-items:center;
  gap:10px;
  opacity:0;
  transform: translateY(6px);
  transition: opacity .25s ease, transform .25s ease;
  color: rgb(var(--color-foreground));
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
}

.hafa-sys-scroll__label-text{
  background: rgba(var(--color-background), 0.86);
  border: 1px solid rgba(var(--color-foreground), 0.14);
  padding: 6px 10px;
  border-radius: 999px;
}

.hafa-sys-scroll__label-line{
  height:2px;
  background: rgba(var(--color-foreground), 0.55);
  display:block;
}

.hafa-sys-scroll__label--left { flex-direction: row-reverse; }
.hafa-sys-scroll__label--left .hafa-sys-scroll__label-line { transform-origin: right center; }

.hafa-sys-scroll__ph{
  aspect-ratio: 4/3;
  display:grid;
  place-items:center;
  color: rgba(0,0,0,.6);
  font-size: 14px;
}

.hafa-sys-scroll__box{
  width: min(520px, 100%);
}

.hafa-sys-scroll__title{ 
  
      margin: 0 0 28px 0;
    font-weight: 700;
    font-size: 4rem;
}
.hafa-sys-scroll__actions{ margin-top: 14px; display:flex; gap:12px; flex-wrap:wrap; }
.hafa-sys-scroll__hint{ margin-top: 12px; color: rgba(var(--color-foreground), .68); font-size: 13px; }

@media (max-width: 989px){
  .hafa-sys-scroll__grid{ grid-template-columns: 1fr; }
  .hafa-sys-scroll__sticky{ padd