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

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

assets/site.css

@@ -196,7 +196,6 @@ svg { flex: none; }
   margin: 0;
   border-radius: 50%;
   background: var(--bg);
-  box-shadow: 0 0 0 var(--gap) var(--bg), 0 18px 50px rgba(25, 66, 66, .18);
   display: grid; place-items: center;
   transform: translate(-50%, -50%) scale(.9);
   opacity: 0;
@@ -205,6 +204,19 @@ svg { flex: none; }
 .seal img { width: 94%; height: 94%; object-fit: contain; }
 @keyframes seal { to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
 
+/* Ring um das Siegel mit runden Übergängen in die Kachel-Lücken (Form kommt aus site.js) */
+.seal-joint {
+  position: absolute;
+  left: 50%; top: 50%;
+  z-index: 4;
+  transform: translate(-50%, -50%);
+  fill: var(--bg);
+  pointer-events: none;
+  opacity: 0;
+  animation: fade .9s .35s var(--ease) forwards;
+}
+@keyframes fade { to { opacity: 1; } }
+
 .scroll-hint {
   position: absolute;
   left: 50%; bottom: calc(var(--pad) + 14px);
@@ -469,10 +481,10 @@ a.panel:hover .panel-arrow svg { transform: rotate(-45deg); }
     position: static;
     width: 210px;
     margin: 4px auto -6px;
-    box-shadow: none;
     transform: scale(.9);
   }
   @keyframes seal { to { opacity: 1; transform: none; } }
+  .seal-joint { display: none; }
   .scroll-hint { display: none; }
   .mosaic { gap: 12px; padding: 0 16px 16px; }
   .row { gap: 12px; }
@@ -486,7 +498,7 @@ a.panel:hover .panel-arrow svg { transform: rotate(-45deg); }
 
 @media (prefers-reduced-motion: reduce) {
   html { scroll-behavior: auto; }
-  .tile, .seal { animation: none; opacity: 1; }
+  .tile, .seal, .seal-joint { animation: none; opacity: 1; }
   .tile { transform: none; }
   .seal { transform: translate(-50%, -50%); }
   .scroll-hint { animation: none; }

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) {

index.html

@@ -28,6 +28,7 @@
   </header>
   <section class="hero">
     <nav class="tiles" aria-label="Bereiche">
+      <svg class="seal-joint" aria-hidden="true"><path/></svg>
       <h1 class="seal"><img src="https://schmacko-napf.de/wp-content/uploads/2024/12/Logo-Transparent-Rechnung.png" alt="Schmacko Napf &amp; Hundetraining by Katha"></h1>
       <a class="tile" href="hundeschule.html">
         <img src="https://schmacko-napf.de/wp-content/uploads/2025/01/KK-Fotografie-66.jpg" alt="Katha mit ihrem Hund auf einer Wiese im Abendlicht">

tools/build_pages.py

@@ -141,6 +141,7 @@ for href, name, sub, src, alt, pid in tiles:
 
 index = head("Schmacko Napf & Hundetraining by Katha", "Hundetraining, Ernährungs- und Gesundheitsberatung, Shop und maßgefertigte Transportboxen – Schmacko Napf by Katha.") + '<body class="is-home">\n' + header() + f'''  <section class="hero">
     <nav class="tiles" aria-label="Bereiche">
+      <svg class="seal-joint" aria-hidden="true"><path/></svg>
       <h1 class="seal"><img src="{LOGO}" alt="Schmacko Napf &amp; Hundetraining by Katha"></h1>
 {tile_html}      <a class="scroll-hint" href="#ueber-mich" aria-label="Weiter nach unten">{I["down"]}</a>
     </nav>