diff --git a/website/assets/KoalaDeploy-1x.webp b/website/assets/KoalaDeploy-1x.webp
index 0298531..9163993 100644
Binary files a/website/assets/KoalaDeploy-1x.webp and b/website/assets/KoalaDeploy-1x.webp differ
diff --git a/website/assets/PlatformJuggler_New-1x.webp b/website/assets/PlatformJuggler_New-1x.webp
index a6a9fe4..20ba2fe 100644
Binary files a/website/assets/PlatformJuggler_New-1x.webp and b/website/assets/PlatformJuggler_New-1x.webp differ
diff --git a/website/index.html b/website/index.html
index 2b723eb..f13ee55 100644
--- a/website/index.html
+++ b/website/index.html
@@ -139,8 +139,8 @@
                     <span lang="de">Dein Kino-Abend auf Distanz. Keine Lags, keine Anmeldung. Einfach Link teilen und zusammen schauen.</span>
                 </h2>
                 <div class="hero-mascot-container" data-reveal>
-                    <img src="assets/LookDownKoala-1x.webp" srcset="assets/LookDownKoala-1x.webp 1x, assets/LookDownKoala.webp 2x" alt="A cute koala standing and looking down at the download buttons" class="hero-lookdown-mascot" lang="en" width="90" height="132" loading="lazy">
-                    <img src="assets/LookDownKoala-1x.webp" srcset="assets/LookDownKoala-1x.webp 1x, assets/LookDownKoala.webp 2x" alt="Ein niedlicher Koala steht da und schaut nach unten auf die Download-Buttons" class="hero-lookdown-mascot" lang="de" width="90" height="132" loading="lazy">
+                    <img src="assets/LookDownKoala-1x.webp" srcset="assets/LookDownKoala-1x.webp 90w, assets/LookDownKoala.webp 205w" sizes="90px" alt="A cute koala standing and looking down at the download buttons" class="hero-lookdown-mascot" lang="en" width="90" height="132" loading="lazy">
+                    <img src="assets/LookDownKoala-1x.webp" srcset="assets/LookDownKoala-1x.webp 90w, assets/LookDownKoala.webp 205w" sizes="90px" alt="Ein niedlicher Koala steht da und schaut nach unten auf die Download-Buttons" class="hero-lookdown-mascot" lang="de" width="90" height="132" loading="lazy">
                 </div>
                 <div class="cta-group" data-reveal>
                     <a href="https://chromewebstore.google.com/detail/koalasync/obbnmkmlaaddodakcbdljknjpagklifc" class="btn btn-primary">
@@ -440,8 +440,8 @@
 
     <section class="compat-section">
         <div class="container">
-            <img src="assets/PlatformJuggler_New-1x.webp" srcset="assets/PlatformJuggler_New-1x.webp 1x, assets/PlatformJuggler_New.webp 2x" alt="A cute koala juggling multiple browser tabs showing streaming platforms" class="compat-mascot" lang="en" width="300" height="233" loading="lazy" data-reveal>
-            <img src="assets/PlatformJuggler_New-1x.webp" srcset="assets/PlatformJuggler_New-1x.webp 1x, assets/PlatformJuggler_New.webp 2x" alt="Ein niedlicher Koala jongliert mit mehreren Browser-Tabs, auf denen verschiedene Streamingdienste laufen" class="compat-mascot" lang="de" width="300" height="233" loading="lazy" data-reveal>
+            <img src="assets/PlatformJuggler_New-1x.webp" srcset="assets/PlatformJuggler_New-1x.webp 368w, assets/PlatformJuggler_New.webp 643w" sizes="(max-width: 768px) calc(100vw - 2rem), 368px" alt="A cute koala juggling multiple browser tabs showing streaming platforms" class="compat-mascot" lang="en" width="300" height="233" loading="lazy" data-reveal>
+            <img src="assets/PlatformJuggler_New-1x.webp" srcset="assets/PlatformJuggler_New-1x.webp 368w, assets/PlatformJuggler_New.webp 643w" sizes="(max-width: 768px) calc(100vw - 2rem), 368px" alt="Ein niedlicher Koala jongliert mit mehreren Browser-Tabs, auf denen verschiedene Streamingdienste laufen" class="compat-mascot" lang="de" width="300" height="233" loading="lazy" data-reveal>
             <p class="compat-heading" data-reveal>
                 <span lang="en">Works on your favorite platforms</span>
                 <span lang="de">Funktioniert auf deinen Lieblingsplattformen</span>
@@ -495,8 +495,8 @@
             </p>
             <div class="use-cases-grid">
                 <div class="use-case-card" data-reveal>
-                    <img src="assets/PopcornFriends-1x.webp" srcset="assets/PopcornFriends-1x.webp 1x, assets/PopcornFriends.webp 2x" alt="Two cute koalas sitting together and sharing a bucket of popcorn" class="use-case-image" lang="en" width="272" height="150" loading="lazy">
-                    <img src="assets/PopcornFriends-1x.webp" srcset="assets/PopcornFriends-1x.webp 1x, assets/PopcornFriends.webp 2x" alt="Zwei niedliche Koalas sitzen zusammen und teilen sich einen Eimer Popcorn" class="use-case-image" lang="de" width="272" height="150" loading="lazy">
+                    <img src="assets/PopcornFriends-1x.webp" srcset="assets/PopcornFriends-1x.webp 272w, assets/PopcornFriends.webp 543w" sizes="(max-width: 768px) calc(100vw - 2rem), 272px" alt="Two cute koalas sitting together and sharing a bucket of popcorn" class="use-case-image" lang="en" width="272" height="150" loading="lazy">
+                    <img src="assets/PopcornFriends-1x.webp" srcset="assets/PopcornFriends-1x.webp 272w, assets/PopcornFriends.webp 543w" sizes="(max-width: 768px) calc(100vw - 2rem), 272px" alt="Zwei niedliche Koalas sitzen zusammen und teilen sich einen Eimer Popcorn" class="use-case-image" lang="de" width="272" height="150" loading="lazy">
                     <h3>
                         <span lang="en">Movie Night with Friends</span>
                         <span lang="de">Filmabend mit Freunden</span>
@@ -505,8 +505,8 @@
                     <p lang="de">Synchronisiere eure Filme in Echtzeit und quatscht nebenbei auf Discord, Zoom oder im Tool eurer Wahl. Es fühlt sich an, als säßet ihr im selben Raum.</p>
                 </div>
                 <div class="use-case-card" data-reveal>
-                    <img src="assets/RemoteProf-1x.webp" srcset="assets/RemoteProf-1x.webp 1x, assets/RemoteProf.webp 2x" alt="A koala professor presenting on a screen to two remote student koalas" class="use-case-image" lang="en" width="272" height="150" loading="lazy">
-                    <img src="assets/RemoteProf-1x.webp" srcset="assets/RemoteProf-1x.webp 1x, assets/RemoteProf.webp 2x" alt="Ein Koala-Professor hält einen Vortrag auf einem Bildschirm vor zwei remote zugeschalteten Schüler-Koalas" class="use-case-image" lang="de" width="272" height="150" loading="lazy">
+                    <img src="assets/RemoteProf-1x.webp" srcset="assets/RemoteProf-1x.webp 272w, assets/RemoteProf.webp 507w" sizes="(max-width: 768px) calc(100vw - 2rem), 272px" alt="A koala professor presenting on a screen to two remote student koalas" class="use-case-image" lang="en" width="272" height="150" loading="lazy">
+                    <img src="assets/RemoteProf-1x.webp" srcset="assets/RemoteProf-1x.webp 272w, assets/RemoteProf.webp 507w" sizes="(max-width: 768px) calc(100vw - 2rem), 272px" alt="Ein Koala-Professor hält einen Vortrag auf einem Bildschirm vor zwei remote zugeschalteten Schüler-Koalas" class="use-case-image" lang="de" width="272" height="150" loading="lazy">
                     <h3>
                         <span lang="en">Remote Learning</span>
                         <span lang="de">Gemeinsam Lernen</span>
@@ -515,8 +515,8 @@
                     <p lang="de">Analysiert Online-Tutorials, Vorlesungen oder Streams gemeinsam mit Mitschülern oder Kollegen. Pausiert und besprecht komplizierte Schritte in perfektem Sync.</p>
                 </div>
                 <div class="use-case-card" data-reveal>
-                    <img src="assets/KoalaCupple_New-1x.webp" srcset="assets/KoalaCupple_New-1x.webp 1x, assets/KoalaCupple_New.webp 2x" alt="A cute koala couple watching together remotely; one is sitting at a PC and the other is in bed with a laptop, with flying hearts between them" class="use-case-image" lang="en" width="272" height="150" loading="lazy">
-                    <img src="assets/KoalaCupple_New-1x.webp" srcset="assets/KoalaCupple_New-1x.webp 1x, assets/KoalaCupple_New.webp 2x" alt="Ein niedliches Koala-Pärchen schaut remote zusammen; einer sitzt am PC und sie liegt mit dem Laptop im Bett, während Herzen zwischen ihnen fliegen" class="use-case-image" lang="de" width="272" height="150" loading="lazy">
+                    <img src="assets/KoalaCupple_New-1x.webp" srcset="assets/KoalaCupple_New-1x.webp 272w, assets/KoalaCupple_New.webp 579w" sizes="(max-width: 768px) calc(100vw - 2rem), 272px" alt="A cute koala couple watching together remotely; one is sitting at a PC and the other is in bed with a laptop, with flying hearts between them" class="use-case-image" lang="en" width="272" height="150" loading="lazy">
+                    <img src="assets/KoalaCupple_New-1x.webp" srcset="assets/KoalaCupple_New-1x.webp 272w, assets/KoalaCupple_New.webp 579w" sizes="(max-width: 768px) calc(100vw - 2rem), 272px" alt="Ein niedliches Koala-Pärchen schaut remote zusammen; einer sitzt am PC und sie liegt mit dem Laptop im Bett, während Herzen zwischen ihnen fliegen" class="use-case-image" lang="de" width="272" height="150" loading="lazy">
                     <h3>
                         <span lang="en">Long-Distance Relationships</span>
                         <span lang="de">Fernbeziehungen</span>
@@ -530,8 +530,8 @@
 
     <section id="features">
         <div class="container">
-            <img src="assets/KoalaQuestions-1x.webp" srcset="assets/KoalaQuestions-1x.webp 1x, assets/KoalaQuestions.webp 2x" alt="A cute koala with a question mark above its head wondering why to choose KoalaSync" class="features-questions-mascot" lang="en" width="250" height="211" loading="lazy" data-reveal>
-            <img src="assets/KoalaQuestions-1x.webp" srcset="assets/KoalaQuestions-1x.webp 1x, assets/KoalaQuestions.webp 2x" alt="Ein niedlicher Koala mit einem Fragezeichen über dem Kopf, der sich fragt, warum er KoalaSync wählen soll" class="features-questions-mascot" lang="de" width="250" height="211" loading="lazy" data-reveal>
+            <img src="assets/KoalaQuestions-1x.webp" srcset="assets/KoalaQuestions-1x.webp 250w, assets/KoalaQuestions.webp 355w" sizes="(max-width: 768px) calc(100vw - 2rem), 250px" alt="A cute koala with a question mark above its head wondering why to choose KoalaSync" class="features-questions-mascot" lang="en" width="250" height="211" loading="lazy" data-reveal>
+            <img src="assets/KoalaQuestions-1x.webp" srcset="assets/KoalaQuestions-1x.webp 250w, assets/KoalaQuestions.webp 355w" sizes="(max-width: 768px) calc(100vw - 2rem), 250px" alt="Ein niedlicher Koala mit einem Fragezeichen über dem Kopf, der sich fragt, warum er KoalaSync wählen soll" class="features-questions-mascot" lang="de" width="250" height="211" loading="lazy" data-reveal>
             <h2 style="font-size: 2.5rem; text-align: center; margin-bottom: 1rem;">
                 <span lang="en">Why KoalaSync?</span><span lang="de">Warum KoalaSync?</span>
             </h2>
@@ -602,8 +602,8 @@
 
     <section id="comparison" class="comparison-section">
         <div class="container">
-            <img src="assets/ProContraKoala-1x.webp" srcset="assets/ProContraKoala-1x.webp 1x, assets/ProContraKoala.webp 2x" alt="A cute koala weighing options in both hands to compare KoalaSync vs Teleparty" class="comparison-mascot" lang="en" width="260" height="184" loading="lazy" data-reveal>
-            <img src="assets/ProContraKoala-1x.webp" srcset="assets/ProContraKoala-1x.webp 1x, assets/ProContraKoala.webp 2x" alt="Ein niedlicher Koala, der Optionen in beiden Händen abwägt, um KoalaSync mit Teleparty zu vergleichen" class="comparison-mascot" lang="de" width="260" height="184" loading="lazy" data-reveal>
+            <img src="assets/ProContraKoala-1x.webp" srcset="assets/ProContraKoala-1x.webp 260w, assets/ProContraKoala.webp 423w" sizes="(max-width: 768px) calc(100vw - 2rem), 260px" alt="A cute koala weighing options in both hands to compare KoalaSync vs Teleparty" class="comparison-mascot" lang="en" width="260" height="184" loading="lazy" data-reveal>
+            <img src="assets/ProContraKoala-1x.webp" srcset="assets/ProContraKoala-1x.webp 260w, assets/ProContraKoala.webp 423w" sizes="(max-width: 768px) calc(100vw - 2rem), 260px" alt="Ein niedlicher Koala, der Optionen in beiden Händen abwägt, um KoalaSync mit Teleparty zu vergleichen" class="comparison-mascot" lang="de" width="260" height="184" loading="lazy" data-reveal>
             <h2 class="section-title" data-reveal style="text-align: center; font-size: 2.2rem; margin-bottom: 1rem;">
                 <span lang="en">KoalaSync vs. Teleparty</span>
                 <span lang="de">KoalaSync vs. Teleparty</span>
@@ -920,8 +920,8 @@
 
             <!-- Mascot Self-Hosting / Deploy Illustration -->
             <div style="display: flex; justify-content: center; margin-bottom: 2.5rem;" data-reveal>
-                <img src="assets/KoalaDeploy-1x.webp" srcset="assets/KoalaDeploy-1x.webp 1x, assets/KoalaDeploy.webp 2x" alt="A cute koala sitting at a laptop deploying a Docker container for self-hosting" class="selfhost-mascot" lang="en" width="300" height="201" loading="lazy">
-                <img src="assets/KoalaDeploy-1x.webp" srcset="assets/KoalaDeploy-1x.webp 1x, assets/KoalaDeploy.webp 2x" alt="Ein niedlicher Koala sitzt am Laptop und deployt einen Docker-Container für das Self-Hosting" class="selfhost-mascot" lang="de" width="300" height="201" loading="lazy">
+                <img src="assets/KoalaDeploy-1x.webp" srcset="assets/KoalaDeploy-1x.webp 300w, assets/KoalaDeploy.webp 600w" sizes="(max-width: 768px) calc(100vw - 2rem), 300px" alt="A cute koala sitting at a laptop deploying a Docker container for self-hosting" class="selfhost-mascot" lang="en" width="300" height="201" loading="lazy">
+                <img src="assets/KoalaDeploy-1x.webp" srcset="assets/KoalaDeploy-1x.webp 300w, assets/KoalaDeploy.webp 600w" sizes="(max-width: 768px) calc(100vw - 2rem), 300px" alt="Ein niedlicher Koala sitzt am Laptop und deployt einen Docker-Container für das Self-Hosting" class="selfhost-mascot" lang="de" width="300" height="201" loading="lazy">
             </div>
 
             <div class="terminal-container" data-reveal>
@@ -1002,8 +1002,8 @@
             </div>
             
             <a href="https://github.com/Shik3i/KoalaSync" target="_blank" data-reveal style="display: inline-block; text-decoration: none;">
-                <img src="assets/KoalaGithub-1x.webp" srcset="assets/KoalaGithub-1x.webp 1x, assets/KoalaGithub.webp 2x" alt="A cute koala holding a GitHub repository page next to the GitHub mascot Octocat" class="cta-github-mascot" lang="en" width="250" height="165" loading="lazy">
-                <img src="assets/KoalaGithub-1x.webp" srcset="assets/KoalaGithub-1x.webp 1x, assets/KoalaGithub.webp 2x" alt="Ein niedlicher Koala hält eine GitHub-Projektseite zusammen mit dem GitHub Maskottchen Octocat" class="cta-github-mascot" lang="de" width="250" height="165" loading="lazy">
+                <img src="assets/KoalaGithub-1x.webp" srcset="assets/KoalaGithub-1x.webp 250w, assets/KoalaGithub.webp 454w" sizes="(max-width: 768px) calc(100vw - 2rem), 250px" alt="A cute koala holding a GitHub repository page next to the GitHub mascot Octocat" class="cta-github-mascot" lang="en" width="250" height="165" loading="lazy">
+                <img src="assets/KoalaGithub-1x.webp" srcset="assets/KoalaGithub-1x.webp 250w, assets/KoalaGithub.webp 454w" sizes="(max-width: 768px) calc(100vw - 2rem), 250px" alt="Ein niedlicher Koala hält eine GitHub-Projektseite zusammen mit dem GitHub Maskottchen Octocat" class="cta-github-mascot" lang="de" width="250" height="165" loading="lazy">
             </a>
             
             <div class="cta-group" data-reveal style="justify-content: center; margin-top: 1rem;">