Logo-Ring mit runden Übergängen in die Kachel-Lücken

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

assets/site.js

@@ -24,6 +24,36 @@
     }).observe(hero);
   }
 
+  // Ring um das Logo-Siegel: Kreis + die vier Kachel-Lücken, Übergänge mit Radius f abgerundet
+  const seal = document.querySelector('.seal');
+  const joint = document.querySelector('.seal-joint');
+  if (seal && joint) {
+    const drawJoint = () => {
+      const gap = parseFloat(getComputedStyle(seal.parentElement).columnGap) || 14;
+      const h = gap / 2;                     // halbe Lückenbreite
+      const R = seal.offsetWidth / 2 + gap;  // Außenradius des Rings
+      const f = 18;                          // Radius der Rundung
+      const yd = Math.sqrt((R + f) ** 2 - (h + f) ** 2);
+      const k = R / (R + f);
+      const L = Math.ceil(R + f + 2);        // Arme reichen bis zum Rand der Fläche
+      const rot = ([x, y], n) => { for (let i = 0; i < n; i++) [x, y] = [-y, x]; return [x + L, y + L]; };
+      const pt = (p, n) => rot(p, n).map(v => v.toFixed(2)).join(' ');
+      let d = `M${pt([-(h + f) * k, -yd * k], 0)}`;
+      for (let n = 0; n < 4; n++) {
+        d += ` A${f} ${f} 0 0 0 ${pt([-h, -yd], n)}`
+          + ` L${pt([-h, -L], n)} L${pt([h, -L], n)} L${pt([h, -yd], n)}`
+          + ` A${f} ${f} 0 0 0 ${pt([(h + f) * k, -yd * k], n)}`
+          + ` A${R} ${R} 0 0 1 ${pt([-(h + f) * k, -yd * k], n + 1)}`;
+      }
+      joint.setAttribute('width', 2 * L);
+      joint.setAttribute('height', 2 * L);
+      joint.setAttribute('viewBox', `0 0 ${2 * L} ${2 * L}`);
+      joint.firstElementChild.setAttribute('d', d + ' Z');
+    };
+    drawJoint();
+    addEventListener('resize', drawJoint);
+  }
+
   // Elemente beim Scrollen einblenden
   const items = document.querySelectorAll('.reveal');
   if ('IntersectionObserver' in window) {