/* SH Digital – Wachstumsgrafik SEO & GEO, Shortcode [shd_wachstum]
   Liniendiagramm ohne Rahmen, Achsen und eigenen Hintergrund. Die Kurve
   zeichnet sich, die Schritte erscheinen von unten nach oben, das Marken-Icon
   klettert mit hoch. Schriftfarbe und -familie erbt die Grafik von der Seite.

   Zwei Fassungen im Markup, hier umgeschaltet:
     .g-svg--wide    Querformat fuer Desktop und Tablet
     .g-svg--narrow  Hochformat fuers Handy, Wert 1.2rem, Bezeichnung 1rem
   Die Schriftgroessen stehen als Inline-Angabe am Element, weil sie zur
   jeweiligen viewBox gehoeren. */

.shd-growth{
  --shd-cycle:15s;
  width:100%;margin:0 auto;font-family:inherit;color:inherit;
}
.shd-growth .g-svg{display:block;width:100%;height:auto;overflow:visible}
.shd-growth .g-svg--narrow{display:none}
.shd-growth text{font-family:inherit;fill:currentColor}
.shd-growth .g-band-title{font-weight:500;letter-spacing:.02em;fill-opacity:.6}
.shd-growth .g-band-value{font-weight:600}
.shd-growth .g-dot{fill:#fff;stroke-width:2.6}

@media (max-width:600px){
  .shd-growth .g-svg--wide{display:none}
  .shd-growth .g-svg--narrow{display:block}
}

/* Kurve zeichnet sich, stroke kommt als Attribut aus dem Template.
   Linear, damit das Icon exakt auf der Zeichenspitze sitzt. */
.shd-growth .g-line{
  fill:none;stroke-width:5;stroke-linecap:round;
  stroke-dasharray:100;stroke-dashoffset:100;
  animation:shd-draw var(--shd-cycle) linear infinite;
}
.shd-growth .g-svg--narrow .g-line{stroke-width:4}
@keyframes shd-draw{0%{stroke-dashoffset:100;opacity:1}46%,88%{stroke-dashoffset:0;opacity:1}96%,100%{stroke-dashoffset:0;opacity:0}}

/* Die Schritte erscheinen einzeln von unten nach oben, bleiben dann stehen
   und werden am Ende der Schleife gemeinsam zurueckgesetzt. */
.shd-growth .g-band{opacity:0;animation-duration:var(--shd-cycle);animation-timing-function:cubic-bezier(.3,0,.2,1);animation-iteration-count:infinite}
.shd-growth .b1{animation-name:shd-band-1}
.shd-growth .b2{animation-name:shd-band-2}
.shd-growth .b3{animation-name:shd-band-3}
.shd-growth .b4{animation-name:shd-band-4}
.shd-growth .b5{animation-name:shd-band-5}
.shd-growth .b6{animation-name:shd-band-6}
.shd-growth .b7{animation-name:shd-band-7}
.shd-growth .b8{animation-name:shd-band-8}

@keyframes shd-band-1{0%{opacity:0}5.5%,88%{opacity:1}96%,100%{opacity:0}}
@keyframes shd-band-2{0%,5.5%{opacity:0}11%,88%{opacity:1}96%,100%{opacity:0}}
@keyframes shd-band-3{0%,11%{opacity:0}16.5%,88%{opacity:1}96%,100%{opacity:0}}
@keyframes shd-band-4{0%,16.5%{opacity:0}22%,88%{opacity:1}96%,100%{opacity:0}}
@keyframes shd-band-5{0%,22%{opacity:0}27.5%,88%{opacity:1}96%,100%{opacity:0}}
@keyframes shd-band-6{0%,27.5%{opacity:0}33%,88%{opacity:1}96%,100%{opacity:0}}
@keyframes shd-band-7{0%,33%{opacity:0}38.5%,88%{opacity:1}96%,100%{opacity:0}}
@keyframes shd-band-8{0%,38.5%{opacity:0}44%,88%{opacity:1}96%,100%{opacity:0}}

/* Marken-Icon klettert die Kurve hoch und waechst dabei mit. Die Stuetzpunkte
   liegen auf der Kurve, die Prozentwerte folgen der Bogenlaenge – so bleibt das
   Icon auf der Linie statt sie abzukuerzen. Jede Fassung hat ihre eigene Kurve. */
.shd-growth .g-icon{
  opacity:0;transform-box:fill-box;transform-origin:center;
  animation-duration:var(--shd-cycle);animation-timing-function:linear;animation-iteration-count:infinite;
}
.shd-growth .g-svg--wide .g-icon{animation-name:shd-climb-wide}
.shd-growth .g-svg--narrow .g-icon{animation-name:shd-climb-narrow}

@keyframes shd-climb-wide{
  0%{opacity:0;transform:translate(-500px,356px) scale(.45) rotate(-90deg)}
  5.1%{opacity:1;transform:translate(-434.6px,334.7px) scale(.51) rotate(-80deg)}
  10.7%{transform:translate(-372.9px,291.4px) scale(.58) rotate(-69deg)}
  16.3%{transform:translate(-308.9px,253px) scale(.64) rotate(-58deg)}
  21.6%{transform:translate(-247.7px,215.8px) scale(.71) rotate(-48deg)}
  27%{transform:translate(-193.5px,166.4px) scale(.77) rotate(-37deg)}
  32.9%{transform:translate(-136.1px,112.5px) scale(.84) rotate(-26deg)}
  39.7%{transform:translate(-65.4px,55.1px) scale(.92) rotate(-12deg)}
  46%{opacity:1;transform:translate(0,0) scale(1) rotate(0deg)}
  88%{opacity:1;transform:translate(0,0) scale(1) rotate(45deg)}
  96%,100%{opacity:0;transform:translate(0,0) scale(1) rotate(45deg)}
}
@keyframes shd-climb-narrow{
  0%{opacity:0;transform:translate(-76px,410px) scale(.45) rotate(-90deg)}
  2.9%{opacity:1;transform:translate(-66.1px,385.6px) scale(.48) rotate(-84deg)}
  8.4%{transform:translate(-56.7px,335.5px) scale(.55) rotate(-73deg)}
  13.4%{transform:translate(-47px,291.4px) scale(.61) rotate(-64deg)}
  18.3%{transform:translate(-37.7px,248.5px) scale(.67) rotate(-54deg)}
  24.6%{transform:translate(-29.4px,191.7px) scale(.74) rotate(-42deg)}
  31.5%{transform:translate(-20.7px,129.6px) scale(.83) rotate(-28deg)}
  38.9%{transform:translate(-9.9px,63.4px) scale(.91) rotate(-14deg)}
  46%{opacity:1;transform:translate(0,0) scale(1) rotate(0deg)}
  88%{opacity:1;transform:translate(0,0) scale(1) rotate(45deg)}
  96%,100%{opacity:0;transform:translate(0,0) scale(1) rotate(45deg)}
}

.shd-growth .g-glow{opacity:0;transform-box:fill-box;transform-origin:center;animation:shd-glow var(--shd-cycle) ease-in-out infinite}
@keyframes shd-glow{0%,44%{opacity:0;transform:scale(.6)}54%{opacity:.5;transform:scale(1)}70%{opacity:.24;transform:scale(1.1)}88%{opacity:.5;transform:scale(1)}96%,100%{opacity:0;transform:scale(1)}}

/* Reduzierte Bewegung: sofort der fertige Zustand */
@media (prefers-reduced-motion:reduce){
  .shd-growth *{animation:none !important}
  .shd-growth .g-line{stroke-dashoffset:0}
  .shd-growth .g-band{opacity:1}
  .shd-growth .g-icon{opacity:1;transform:none}
  .shd-growth .g-glow{opacity:.4}
}