feat(website): integrate KoalaSearching, KoalaImprintl, and KoalaPrivacy mascots with custom animations and tight layouts

website/datenschutz.html

@@ -43,6 +43,10 @@
 
     <main class="legal-content">
         <div class="legal-card" data-reveal style="padding: 2rem;">
+            <div style="display: flex; justify-content: center;">
+                <img src="assets/KoalaPrivacy.webp" alt="Cute Koala representing privacy and data security" class="legal-mascot" lang="en" width="180" height="180">
+                <img src="assets/KoalaPrivacy.webp" alt="Niedlicher Koala, der den Datenschutz repräsentiert" class="legal-mascot" lang="de" width="180" height="180">
+            </div>
             <h1 lang="de">Datenschutz</h1>
             <h1 lang="en">Privacy Policy</h1>
             <p lang="de" style="text-align: center; text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.8rem; border-bottom: 1px solid var(--glass-border); padding-bottom: 1.5rem; margin-bottom: 2rem;">

website/impressum.html

@@ -43,6 +43,10 @@
 
     <main class="legal-content">
         <div class="legal-card" data-reveal style="padding: 2rem;">
+            <div style="display: flex; justify-content: center;">
+                <img src="assets/KoalaImprintl.webp" alt="Cute Koala representing the legal notice page" class="legal-mascot" lang="en" width="180" height="180">
+                <img src="assets/KoalaImprintl.webp" alt="Niedlicher Koala, der das Impressum repräsentiert" class="legal-mascot" lang="de" width="180" height="180">
+            </div>
             <h1 lang="de">Impressum</h1>
             <h1 lang="en">Legal Notice</h1>
             <p lang="de" style="text-align: center; text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.8rem; border-bottom: 1px solid var(--glass-border); padding-bottom: 1.5rem; margin-bottom: 2rem;">

website/join.html

@@ -48,7 +48,10 @@
             <!-- Dynamic Status Icon & Pulsing Radar Wave -->
             <div class="join-status-visual">
                 <div class="status-ring active-pulse" id="status-ring"></div>
-                <div id="join-status-icon" style="font-size: 3rem; z-index: 2; transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);">🐨</div>
+                <div id="join-status-icon" style="z-index: 2; transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); display: flex; align-items: center; justify-content: center;">
+                    <img src="assets/KoalaSearching.webp" alt="A cute koala looking through a telescope searching for your extension" class="join-status-mascot searching-mascot join-status-pulse" lang="en">
+                    <img src="assets/KoalaSearching.webp" alt="Ein niedlicher Koala schaut durch ein Fernrohr und sucht nach deiner Erweiterung" class="join-status-mascot searching-mascot join-status-pulse" lang="de">
+                </div>
             </div>
 
             <h1 id="join-title" style="font-size: 2rem; margin-bottom: 1rem;"><span lang="en">Ready to sync?</span><span lang="de">Bereit zum Synchronisieren?</span></h1>

website/style.css

@@ -1759,6 +1759,42 @@ html.lang-de [lang="en"] {
     filter: drop-shadow(0 4px 12px rgba(0,0,0,0.15));
 }
 
+.join-status-mascot.searching-mascot {
+    width: 175px; /* Slightly wider due to antenna to keep main body scale identical */
+}
+
+.join-status-pulse {
+    animation: mascot-gentle-pulse 2s ease-in-out infinite;
+}
+
+@keyframes mascot-gentle-pulse {
+    0% {
+        transform: scale(0.96);
+        filter: drop-shadow(0 4px 10px rgba(99, 102, 241, 0.15));
+    }
+    50% {
+        transform: scale(1.04);
+        filter: drop-shadow(0 8px 20px rgba(99, 102, 241, 0.35));
+    }
+    100% {
+        transform: scale(0.96);
+        filter: drop-shadow(0 4px 10px rgba(99, 102, 241, 0.15));
+    }
+}
+
+.legal-mascot {
+    display: block;
+    width: 180px;
+    height: auto;
+    margin: -0.75rem auto 0.4rem auto;
+    filter: drop-shadow(0 4px 12px rgba(0,0,0,0.15));
+    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+}
+
+.legal-mascot:hover {
+    transform: scale(1.06) rotate(1.5deg);
+}
+
 .status-ring {
     position: absolute;
     width: 90px;