added flip hint animation labeled flip buttons and tap anywhere on front fixed flash on reload with anchor smaller footer on mobile

index.html

@@ -11,6 +11,7 @@
         <link rel="apple-touch-icon" href="assets/img/apple-touch-icon.png">
         <link rel="canonical" href="https://www.elias-mueller.com/aboutme/">        
 
+        <script>document.documentElement.classList.add("preload");</script>
         <script src="assets/js/script.js" defer></script>
    
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
@@ -43,7 +44,7 @@
                         </ul>
                         <p class="slogan">Von Elektronik über Infrastruktur<br>und Applikationen bis zum Nutzer</p>
                     </div>
-                    <a class="cap-visibleWhenCanHover flip-button" href="#flip" aria-label="Karte umdrehen"><i class="fa-solid fa-angles-right"></i></a>
+                    <a class="flip-button flip-front" href="#flip">Umdrehen<i class="fa-solid fa-angles-right"></i></a>
                 </div>
                 <div class="back">
                     <a class="details-button details-open" href="#details">Mehr<i class="fa-solid fa-chevron-down"></i></a>
@@ -113,7 +114,7 @@
                             Am meisten Spaß macht es mir, Dinge von Grund auf zu bauen: vom ersten Gespräch über die Anforderungen bis zur fertigen Lösung.
                         </p>
                     </div>
-                    <a class="cap-visibleWhenCanHover flip-button" href="#unflip" aria-label="Karte zurückdrehen"><i class="fa-solid fa-angles-left"></i></a>
+                    <a class="cap-visibleWhenCanHover flip-button" href="#unflip"><i class="fa-solid fa-angles-left"></i>Zurück</a>
                     <a class="cap-visibleWhenUnPinned flip-button" href="#flip" aria-label="Rückseite anpinnen" title="Anpinnen"><i class="fa-solid fa-thumbtack"></i></a>
                     <a class="cap-visibleWhenPinned flip-button" href="#unflip" aria-label="Rückseite lösen" title="Lösen"><i class="fa-solid fa-thumbtack-slash"></i></a>
                 </div>