.hero{padding:48px 0 40px}
.hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:start}
.hero-text{padding-top:24px}
.hero-text h1{margin-bottom:20px}
.hero-text .lead{margin-bottom:0}

.scene{position:relative;width:100%;aspect-ratio:4/3;border-radius:16px;overflow:hidden;background:var(--navy-deep)}
.sc{position:absolute;inset:0;width:100%;height:100%}
.sc-day{background:#EEEFED}                 
.sc-day,.sc-plan{opacity:0}

.steps{list-style:none;margin:20px 0 0;padding:0;display:grid;gap:10px;counter-reset:step}
.step{position:relative;display:grid;gap:0 8px;padding-left:40px;font-size:16px;line-height:1.45;counter-increment:step}
.step::before{content:counter(step);position:absolute;left:0;top:0;width:28px;height:28px;border-radius:50%;background:var(--navy);color:var(--paper);font-weight:700;font-size:15px;line-height:28px;text-align:center}
.step strong{color:var(--navy-deep)}

.demosajter-teaser{padding:28px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.demosajter-teaser-inner{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 32px}
.demosajter-teaser h2{margin:0 0 4px;font-size:clamp(22px,2.2vw,26px)}
.demosajter-teaser p{margin:0}

.teaser-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.teaser-list li{display:grid;gap:2px;padding:22px;border:1px solid var(--line);border-radius:var(--radius);background:var(--paper)}
.teaser-name{font-size:21px;font-weight:700;color:var(--navy-deep)}
.teaser-price{margin-top:8px;font-size:24px;font-weight:700;color:var(--navy-deep)}
.vat{font-size:15px;font-weight:400;color:var(--gray)}

@media (min-width:961px){
  .hero-grid{grid-template-columns:minmax(0,1fr);gap:40px;justify-items:center}
  .hero-text{padding-top:0;max-width:980px;text-align:center}
  .hero-text .lead{margin-inline:auto}
  .hero-text .btn-row{justify-content:center}
  .scene-track{width:100%}
  .scene-sticky{width:min(720px,100%,calc((100svh - var(--header-h) - 200px)*4/3));margin-inline:auto}
}
@media (max-width:960px){
  .hero{padding-top:28px}
  .hero-grid{grid-template-columns:1fr;gap:32px}
  .hero-text{padding-top:0}
}
@media (max-width:900px){
  .teaser-list{grid-template-columns:1fr}
}

@media (prefers-reduced-motion:no-preference) and (min-height:560px){
  @supports (animation-timeline:view()){
    .js .hero{overflow-x:clip}
    .js .scene-track{--build-scroll:140svh;height:calc(100svh - var(--header-h) + var(--build-scroll));view-timeline:--house block;view-timeline-inset:var(--header-h) 0px}
    .js .scene-sticky{position:sticky;top:calc(var(--header-h) + 16px)}
    .js .hero-text{position:sticky;top:calc(var(--header-h) + 40px)}

    .js .scene .sc:not(.sc-night):not(.sc-ground),.js .step{
      will-change:transform,opacity;
      animation-timing-function:linear;
      animation-fill-mode:both;
      animation-duration:auto;
      animation-timeline:--house;
      animation-range:contain 0% contain 100%;
    }
    .js .sc-day{animation-name:sc-day}
    .js .sc-plan{animation-name:sc-plan}
    .js .sc-slab{animation-name:sc-slab}
    .js .sc-studs{animation-name:sc-studs}
    .js .sc-rafters{animation-name:sc-rafters}
    .js .sc-wall{animation-name:sc-wall}
    .js .sc-roof-l{animation-name:sc-roof-l}
    .js .sc-roof-r{animation-name:sc-roof-r}
    .js .sc-lit{animation-name:sc-lit}
    .js .sc-cursor{animation-name:sc-cursor}
    @keyframes sc-day{0%,80%{opacity:1}94%,100%{opacity:0}}
    @keyframes sc-plan{0%,22%{opacity:1}40%,100%{opacity:0}}
    @keyframes sc-slab{0%,14%{opacity:0;transform:translateY(9%)}30%,100%{opacity:1;transform:none}}
    @keyframes sc-studs{0%,34%{opacity:0;transform:translateY(-8%)}48%,100%{opacity:1;transform:none}}
    @keyframes sc-rafters{0%,42%{opacity:0;transform:translateY(-10%)}56%,100%{opacity:1;transform:none}}
    @keyframes sc-wall{0%,58%{opacity:0;transform:translateY(3%)}70%,100%{opacity:1;transform:none}}
    @keyframes sc-roof-l{0%,64%{opacity:0;transform:translate(-12%,-14%)}76%,100%{opacity:1;transform:none}}
    @keyframes sc-roof-r{0%,68%{opacity:0;transform:translate(12%,-14%)}80%,100%{opacity:1;transform:none}}
    @keyframes sc-lit{0%,84%{opacity:0}94%,100%{opacity:1}}
    @keyframes sc-cursor{0%,90%{opacity:0;transform:translate(5%,7%)}100%{opacity:1;transform:none}}

    .js .steps{display:grid;gap:0;margin-top:16px}
    .js .step{grid-area:1/1;font-size:17px}
    .js .step-1{animation-name:step-1}
    .js .step-2{animation-name:step-2}
    .js .step-3{animation-name:step-3}
    .js .step-4{animation-name:step-4}
    .js .step-5{animation-name:step-5}
    @keyframes step-1{0%,14%{opacity:1}16%,100%{opacity:0}}
    @keyframes step-2{0%,16%{opacity:0}18%,34%{opacity:1}36%,100%{opacity:0}}
    @keyframes step-3{0%,36%{opacity:0}38%,56%{opacity:1}58%,100%{opacity:0}}
    @keyframes step-4{0%,58%{opacity:0}60%,78%{opacity:1}80%,100%{opacity:0}}
    @keyframes step-5{0%,80%{opacity:0}82%,100%{opacity:1}}
  }
}
@media (prefers-reduced-motion:no-preference) and (min-height:560px) and (max-width:960px){
  @supports (animation-timeline:view()){
    .js .scene-track{--build-scroll:120svh}
    .js .hero-text{position:static}
    .js .scene-sticky{width:min(100%,calc((100svh - var(--header-h) - 130px)*4/3));margin-inline:auto}
  }
}
@media (prefers-reduced-motion:no-preference) and (min-height:560px) and (min-width:961px){
  @supports (animation-timeline:view()){
    .js .hero{--build-scroll:140svh;height:calc(100svh - var(--header-h) + var(--build-scroll));padding:0;view-timeline:--house block;view-timeline-inset:var(--header-h) 0px}
    .js .hero-grid{position:sticky;top:var(--header-h);box-sizing:border-box;min-height:calc(100svh - var(--header-h));padding-block:16px;align-content:center;gap:24px}
    .js .hero-text{position:static}
    .js .scene-track{height:auto;view-timeline:none}
    .js .scene-sticky{position:static;width:min(720px,100%,calc((100svh - var(--header-h) - 416px)*4/3))}
  }
}
@media (prefers-reduced-motion:no-preference) and (min-height:560px) and (max-height:844px) and (min-width:961px){
  @supports (animation-timeline:view()){
    .js .hero-grid{grid-template-columns:minmax(0,min(510px,46%)) minmax(0,1fr);justify-items:stretch;align-items:center;gap:56px}
    .js .hero-text{max-width:none;text-align:left}
    .js .hero-text .lead{margin-inline:0}
    .js .hero-text .btn-row{justify-content:flex-start}
    .js .scene-sticky{width:min(720px,100%,calc((100svh - var(--header-h) - 140px)*4/3))}
  }
}
@media (prefers-reduced-motion:no-preference) and (min-height:560px) and (max-height:844px) and (min-width:961px) and (max-width:1099px){
  @supports (animation-timeline:view()){
    .js .hero-text h1{font-size:calc(5vw - 2px)}
  }
}