Ihr Netzwerk-Profi IT-Partner aus dem Norden.

// HTML baut die Struktur
<article class="karte">
  <h4>Ihr Projekt</h4>
  <p><b id="zahl">0</b> % fertig</p>
</article>

/* CSS gestaltet sie */
.karte {
  background: var(--color-surface);
  border-radius: 14px;
}

// TypeScript bringt sie zum Leben
let wert = 0;
const tick = () => {
  wert = Math.min(100, wert + 1.2);
  zahl.textContent = String(wert | 0);
  if (wert < 100) requestAnimationFrame(tick);
};

// Jeder Pfad kennt seine eigene Länge —
// daraus wird die Strichelung gebaut.
const laenge = pfad.getTotalLength();

pfad.style.strokeDasharray  = String(laenge);
pfad.style.strokeDashoffset = String(laenge);

// Offset auf 0 = die Linie zeichnet sich selbst
pfad.style.transition =
  'stroke-dashoffset 1.6s cubic-bezier(.16,1,.3,1)';
pfad.style.strokeDashoffset = '0';

// Punkte driften, nahe Punkte werden verbunden
for (const p of knoten) {
  p.x += p.vx; p.y += p.vy;
  if (p.x < 0) p.x = breite;
  if (p.x > breite) p.x = 0;

  ctx.beginPath();
  ctx.arc(p.x, p.y, p.r, 0, Math.PI * 2);
  ctx.fill();
}

// Der Abstand entscheidet, wie kräftig die Linie wird
const d2 = dx * dx + dy * dy;
if (d2 < 5200) ctx.stroke();

// Text entschlüsselt sich Zeichen für Zeichen
const glyphen = 'ABCDEF…0123456789#/*<>_·';

const anteil = frame / gesamt;
const fertig = Math.floor(anteil * text.length);

let aus = text.slice(0, fertig);
for (let i = fertig; i < text.length; i++) {
  aus += glyphen[Math.random() * glyphen.length | 0];
}
ziel.textContent = aus;

// Schwerkraft, Boden, Dämpfung — mehr braucht es nicht
p.vy += 0.35;              // beschleunigen
p.x  += p.vx;
p.y  += p.vy;

if (p.y + p.r > boden) {
  p.y  = boden - p.r;
  p.vy *= -0.62;          // abprallen, Energie verlieren
  p.vx *= 0.98;           // Reibung
}

if (p.x - p.r < 0 || p.x + p.r > breite) p.vx *= -1;