Fixes für Spoiler

index.html

@@ -8,7 +8,7 @@
     
     <!-- Open Graph Tags -->
     <meta property="og:title" content="Yagyuu.moe">
-    <meta property="og:description" content="Zufällige Bilder von Yagyuu Suminoe">
+    <meta property="og:description" content="Zufällige Bilder von Yagyuu">
     <meta property="og:image" content="https://yagyuu.moe/images/yagyuu.jpg">
     <meta property="og:url" content="https://yagyuu.moe">
     <meta property="og:type" content="website">
@@ -18,14 +18,20 @@
     
     <style>
         /* Basis-Styling aus style.css */
-        body { 
-            font: 14px/1.3 verdana, arial, helvetica, sans-serif;
+        html, body {
             margin: 0;
             padding: 0;
+            height: 100%;
+            overflow-x: hidden; /* Verhindert horizontales Scrollen */
+        }
+        
+        body { 
+            font: 14px/1.3 verdana, arial, helvetica, sans-serif;
             background-color: #f5f5f5;
             color: #333;
+            display: flex;
+            flex-direction: column;
             min-height: 100vh;
-            position: relative;
         }
         h1 { font-size: 1.5em; margin-top: 20px; }
         h2 { font-size: 1.2em; }
@@ -39,9 +45,12 @@
 
         /* Container für den Hauptinhalt */
         .container {
+            flex: 1;
             max-width: 1200px;
             margin: 0 auto;
             padding: 20px;
+            width: 100%;
+            box-sizing: border-box;
         }
 
         /* Button-Styling */
@@ -106,6 +115,7 @@
             transition: 0.4s;
             border-radius: 4px;
             margin-bottom: 10px;
+            box-sizing: border-box;
         }
         .active, .spoiler:hover {
             background-color: #ccc;
@@ -117,6 +127,9 @@
             overflow: hidden;
             transition: max-height 0.2s ease-out;
             border-radius: 0 0 4px 4px;
+            margin-bottom: 20px;
+            box-sizing: border-box;
+            width: 100%;
         }
         .panel ol {
             padding: 20px 40px;
@@ -129,10 +142,9 @@
             text-align: center;
             padding: 15px;
             border-top: 5px solid #4CAF50;
-            position: absolute;
-            bottom: 0;
             width: 100%;
             box-sizing: border-box;
+            margin-top: auto;
         }
         footer a {
             color: #b8ffbe; /* Hellere Farbe für bessere Lesbarkeit */
@@ -152,9 +164,6 @@
             .modal-content {
                 max-width: 100%;
             }
-            body {
-                padding-bottom: 120px; /* Angepasster Platz für den Footer auf mobilen Geräten */
-            }
         }
         
         /* Bild-Thumbnail */