/* NIKdesign · Hero der Startseite: »Konstruktion« (.v14) und »Punktwolke« (.v15)
   ERZEUGT von werkzeuge/startseite/hero-bauen.py – nicht von Hand ändern, sondern dort. Siehe dokumentation/TECHNIK.md */

.hero.v14{min-height:max(calc(100svh - 50px),760px);padding:0;display:grid;align-content:end;overflow:hidden;background:#fafaf8}
.hero.v14 .hk{position:absolute;inset:0;width:100%;height:100%;display:block}
.hero.v14 .hk-text{z-index:2;padding:0 1.4rem clamp(3rem,7vh,5rem)}
/* Erst die Konstruktion, dann der Claim */
.hero.v14 .dachzeile,.hero.v14 .unterzeile,.hero.v14 .hero-aktion{animation-delay:4.6s}
.hero.v14 h1.setzen{opacity:0;transform:translateY(24px);animation-delay:4.6s,4.6s;animation-fill-mode:forwards,forwards}
.hero.v14 .unterzeile{animation-delay:4.75s}.hero.v14 .hero-aktion{animation-delay:4.9s}
.hk-bau{color:var(--petrol);animation:hk-ruhe 1.6s var(--uebergang) 5.4s forwards}
@keyframes hk-ruhe{to{opacity:.32}}
.hk-raster{opacity:0;animation:hk-ein 1.2s ease .1s forwards}
@keyframes hk-ein{to{opacity:.16}}
.hk-l{fill:none;stroke:currentColor;stroke-width:1;vector-effect:non-scaling-stroke;stroke-dasharray:1;stroke-dashoffset:1;opacity:.55;
  animation:hk-zieh 1.1s cubic-bezier(.3,.6,.2,1) var(--d,0s) forwards}
.hk-kreis{opacity:.4}
/* gestrichelte Kreise drehen sich nach dem Aufbau langsam weiter (80 s je Umlauf) */
.hk-strich{stroke-dasharray:.012 .008;stroke-dashoffset:0;opacity:0;animation:hk-auf .9s ease var(--d,0s) forwards,hk-dreh 80s linear 5.4s infinite}
@keyframes hk-dreh{to{stroke-dashoffset:-1}}
@keyframes hk-zieh{to{stroke-dashoffset:0}}
@keyframes hk-auf{to{opacity:.5}}
.hk-mass line{stroke:currentColor;stroke-width:1;vector-effect:non-scaling-stroke}
.hk-mass > line:not(.hk-l){opacity:0;animation:hk-auf .6s ease calc(var(--d,0s) + .5s) forwards}
/* Nachmessen: reihum zieht sich eine Maßlinie noch einmal nach (alle 16 s) */
.hk-mass .hk-l{animation:hk-zieh 1.1s cubic-bezier(.3,.6,.2,1) var(--d,0s) forwards,hk-nachmess 16s linear calc(var(--d,0s) * 3 + 7s) infinite}
@keyframes hk-nachmess{0%,100%{stroke-dashoffset:0}3%{stroke-dashoffset:1}12%{stroke-dashoffset:0}}
.hk-mass text{opacity:0;animation:hk-voll .6s ease calc(var(--d,0s) + .6s) forwards;
  font:500 13px/1 "Open Sans","Open Sans Ersatz",sans-serif;font-variation-settings:"wdth" 90,"wght" 500;fill:currentColor;letter-spacing:.02em;paint-order:stroke;stroke:#fafaf8;stroke-width:4;stroke-linejoin:round}
/* Eckkreuze: springen auf, pulsieren danach reihum (Vierteldrehung, alle 9 s) */
.hk-kreuz line{stroke:var(--orange);stroke-width:1.4;vector-effect:non-scaling-stroke}
.hk-kreuz{opacity:0;transform-box:fill-box;transform-origin:center;transform:scale(.2);animation:hk-pop .5s cubic-bezier(.3,1.5,.5,1) var(--d,0s) forwards,hk-puls 9s ease-in-out calc(var(--d,0s) * 4 + 6s) infinite}
@keyframes hk-puls{0%,100%{transform:none}50%{transform:rotate(90deg) scale(1.25)}}
@keyframes hk-pop{to{opacity:1;transform:none}}
/* Lupe: eine zweite, volle Kopie der Konstruktion, nur im Kreis um den Zeiger sichtbar */
.hk-lupe-bild{opacity:0;color:var(--petrol-tief);transition:opacity .4s;pointer-events:none}
.hk.zeiger .hk-lupe-bild{opacity:.9}
/* Marke: Umriss zieht sich, Füllung blendet auf, Umriss geht */
.hk-umriss{fill:none;stroke:var(--schriftzug);stroke-width:1.1;vector-effect:non-scaling-stroke;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;
  animation-name:hk-zieh,hk-weg;animation-duration:1.7s,.8s;animation-delay:1.9s,4.2s;animation-timing-function:cubic-bezier(.4,.2,.3,1),ease;animation-fill-mode:forwards,forwards}
.hk-hand .hk-umriss{stroke:var(--orange);animation-duration:1.3s,.8s;animation-delay:3s,4.9s}
@keyframes hk-weg{to{opacity:0}}
.hk-fuell{fill:var(--schriftzug);opacity:0;animation:hk-voll .8s ease 3.4s forwards}
.hk-fuell-hand{fill:var(--orange);animation-delay:4.1s}
@keyframes hk-voll{to{opacity:1}}
@media(max-width:760px){
  .hero.v14{min-height:0;padding-top:4.2rem;align-content:start}
  .hero.v14 .hk{position:relative;inset:auto;width:100%;height:auto;aspect-ratio:760/270}
  .hero.v14 .hk-text{padding-top:1.2rem;padding-bottom:3rem}
  .hk-mass text{font-size:16px}
}
@media(prefers-reduced-motion:reduce){
  .hero.v14 h1.setzen{opacity:1;transform:none}
  .hk *{animation:none!important}
  .hk-l{stroke-dashoffset:0}.hk-strich{opacity:.5}.hk-raster{opacity:.16}.hk-bau{opacity:.32}.hk-mass > *,.hk-mass text{opacity:1}
  .hk-kreuz{opacity:1;transform:none}.hk-fuell{opacity:1}.hk-umriss{opacity:0}
}

.hero.v15{min-height:calc(100svh - 50px);padding:5.6rem 1.4rem 4rem;display:grid;align-content:center;background:#fafaf8}
.hw15{position:relative;width:min(100%,900px);height:clamp(280px,50vh,520px);margin:0 auto .4rem}
.hw15 canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.hero.v15 .dachzeile{margin-top:1.4rem}
@media(max-width:760px){.hw15{height:clamp(220px,38vh,320px)}}