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; }