diff --git a/Johannesbeeressig/index.html b/Johannesbeeressig/index.html
new file mode 100644
index 0000000..b34f6dc
--- /dev/null
+++ b/Johannesbeeressig/index.html
@@ -0,0 +1,265 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Rezept-Seite</title>
+    <style>
+        body {
+            font-family: Arial, sans-serif;
+            margin: 0;
+            padding: 0;
+            background-color: #f4f4f4;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+        }
+
+        .container {
+            width: 90%;
+            max-width: 900px;
+            padding: 20px;
+            background-color: white;
+            border-radius: 8px;
+            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+            text-align: center;
+        }
+
+        img {
+            width: 100%;
+            height: auto;
+            border-radius: 8px;
+            display: block;
+        }
+
+        h1, h2 {
+            color: #333;
+        }
+
+        .cl-checkbox {
+            display: flex;
+            align-items: center;
+            justify-content: flex-start;
+        }
+
+        .cl-checkbox input {
+            margin-right: 10px;
+        }
+
+        .card {
+            width: 100%;
+            max-width: 500px;
+            background: white;
+            padding: 20px;
+            box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.1);
+            border-radius: 8px;
+            text-align: left;
+        }
+
+        ul, ol {
+            padding-left: 20px;
+        }
+
+        footer {
+            text-align: center;
+            padding: 10px;
+            background-color: #333;
+            color: white;
+            width: 100%;
+            position: relative;
+            margin-top: 20px;
+        }
+
+        @media (max-width: 600px) {
+            .card {
+                width: 100%;
+            }
+        }
+        .button {
+            cursor: pointer;
+            padding: 1em;
+            font-size: 1em;
+            width: 7em;
+            aspect-ratio: 1/0.25;
+            color: white;
+            background: #212121;
+            background-size: cover;
+            background-blend-mode: overlay;
+            border-radius: 0.5em;
+            outline: 0.1em solid #353535;
+            border: 0;
+            box-shadow: 0 0 1em 1em rgba(0, 0, 0, 0.1);
+            transition: all 0.3s ease-in-out;
+            position: relative;
+          }
+          
+          .button:hover {
+            transform: scale(1.1);
+            box-shadow: 0 0 1em 0.45em rgba(0, 0, 0, 0.1);
+            background: linear-gradient(45deg, #212121, #252525);
+            background: radial-gradient(circle at bottom, rgba(50, 100, 180, 0.5) 10%, #212121 70%);
+            outline: 0;
+          }
+          
+          .modal {
+            display: none;
+            position: fixed;
+            z-index: 1000;
+            left: 0;
+            top: 0;
+            width: 100%;
+            height: 100%;
+            overflow: auto;
+            background-color: rgba(0, 0, 0, 0.5);
+          }
+          
+          .modal-content {
+            background-color: #fefefe;
+            margin: 15% auto;
+            padding: 20px;
+            border: 1px solid #888;
+            width: 80%;
+            max-width: 400px;
+            text-align: center;
+            border-radius: 10px;
+          }
+
+          .social-icons {
+            display: flex;
+            justify-content: center;
+            gap: 20px;
+            margin-top: 20px;
+        }
+
+            .social-icons a img {
+                width: 60px;
+                height: 60px;
+                transition: transform 0.2s;
+            }
+
+            .social-icons a img:hover {
+                transform: scale(1.1);
+            }
+    </style>
+</head>
+<body>
+    <div class="card">
+        <img src="/johannesbeeressig.png" alt="Johannesbeeressig">
+        
+        <h2>Zutaten:</h2>
+        <ul>
+            <li><label class="cl-checkbox"><input type="checkbox"><span>500g Tomaten</span></label></li>
+            <li><label class="cl-checkbox"><input type="checkbox"><span>200g Nudeln</span></label></li>
+            <li><label class="cl-checkbox"><input type="checkbox"><span>100g Parmesan</span></label></li>
+            <li><label class="cl-checkbox"><input type="checkbox"><span>2 Esslöffel Olivenöl</span></label></li>
+            <li><label class="cl-checkbox"><input type="checkbox"><span>Salz und Pfeffer nach Geschmack</span></label></li>
+        </ul>
+
+        <h2>Zubereitung:</h2>
+        <ol>
+            <li><label class="cl-checkbox"><input type="checkbox"><span>Die Nudeln in einem großen Topf mit Salzwasser kochen.</span></label></li>
+            <li><label class="cl-checkbox"><input type="checkbox"><span>Während die Nudeln kochen, die Tomaten klein schneiden und in einer Pfanne mit Olivenöl anbraten.</span></label></li>
+            <li><label class="cl-checkbox"><input type="checkbox"><span>Mit Salz und Pfeffer abschmecken.</span></label></li>
+            <li><label class="cl-checkbox"><input type="checkbox"><span>Die fertigen Nudeln in die Pfanne mit den Tomaten geben und gut vermengen.</span></label></li>
+            <li><label class="cl-checkbox"><input type="checkbox"><span>Mit frisch geriebenem Parmesan bestreuen und servieren.</span></label></li>
+        </ol>
+    </div>
+    <br>
+    <br>
+    <!-- Neuer Share-Button mit den alten Funktionen -->
+<button class="button" onclick="openSharePopup()">
+    <svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg" class="icon">
+      <path d="M307 34.8c-11.5 5.1-19 16.6-19 29.2v64H176C78.8 128 0 206.8 0 304C0 417.3 81.5 467.9 100.2 478.1c2.5 1.4 5.3 1.9 8.1 1.9c10.9 0 19.7-8.9 19.7-19.7c0-7.5-4.3-14.4-9.8-19.5C108.8 431.9 96 414.4 96 384c0-53 43-96 96-96h96v64c0 12.6 7.4 24.1 19 29.2s25 3 34.4-5.4l160-144c6.7-6.1 10.6-14.7 10.6-23.8s-3.8-17.7-10.6-23.8l-160-144c-9.4-8.5-22.9-10.6-34.4-5.4z"></path>
+    </svg>
+    Share
+  </button>
+  
+  <!-- Modal für Sharing-Optionen -->
+  <div id="shareModal" class="modal">
+    <div class="modal-content">
+      <h2>Teilen</h2>
+      <!--
+      <button onclick="shareViaWhatsApp()">WhatsApp</button>
+      <button onclick="shareViaTelegram()">Telegram</button>
+      <button onclick="shareViaPinterest()">Pinterest</button>
+      <button onclick="shareViaEmail()">E-Mail</button>
+      <button onclick="copyToClipboard()">Link kopieren</button>
+      <button onclick="closeSharePopup()">Schließen</button>
+      -->
+      <div class="social-icons">
+      <a href="#" onclick="shareViaWhatsApp()">
+          <img src="/icons/whatsapp.svg" alt="WhatsApp" />
+        </a>
+        <a href="#" onclick="shareViaPinterest()">
+            <img src="/icons/pinterest.svg" />
+        </a>
+        <a href="#" onclick="shareViaTelegram()">
+            <img src="/icons/telegram.svg" alt="Telegram" />
+        </a>
+        <a href="#" onclick="shareViaEmail()">
+            <img src="/icons/email.svg" alt="E-Mail" />
+        </a>
+        <!-- Kopieren -->
+        <a href="#" onclick="copyToClipboard()">
+            <img src="/icons/copy.svg" />
+        </a>
+        </div>
+    </div>
+  </div>
+
+  
+  <script>
+  function openSharePopup() {
+    document.getElementById("shareModal").style.display = "block";
+  }
+  
+  function closeSharePopup() {
+    document.getElementById("shareModal").style.display = "none";
+  }
+  
+  function shareViaWhatsApp() {
+    const text = encodeURIComponent('Check out this fantastic recipe! https://test.somachtstefaniedas.de/Johannesbeeressig/');
+    const url = 'https://api.whatsapp.com/send?text=' + text;
+    window.open(url, '_blank');
+  }
+  
+  function shareViaTelegram() {
+    const text = encodeURIComponent('Check out this fantastic recipe! https://test.somachtstefaniedas.de/Johannesbeeressig/');
+    const url = 'https://t.me/share/url?url=' + text;
+    window.open(url, '_blank');
+  }
+  
+  function shareViaPinterest() {
+    const media = encodeURIComponent('URL_ZU_DEINEM_BILD');
+    const text = encodeURIComponent('Check out this fantastic recipe! https://test.somachtstefaniedas.de/Johannesbeeressig/');
+    const url = 'https://pinterest.com/pin/create/button/?url=' + text + '&media=' + media;
+    window.open(url, '_blank');
+  }
+  
+  function shareViaEmail() {
+    const subject = encodeURIComponent('Klick the Witch');
+    const body = encodeURIComponent('Check out this fantastic recipe! https://test.somachtstefaniedas.de/Johannesbeeressig/');
+    window.location.href = 'mailto:?subject=' + subject + '&body=' + body;
+  }
+  
+  function copyToClipboard() {
+    const text = 'Check out this fantastic recipe! https://test.somachtstefaniedas.de/Johannesbeeressig/';
+    navigator.clipboard.writeText(text).then(function() {
+      alert('Text wurde in die Zwischenablage kopiert!');
+    }, function(err) {
+      alert('Fehler beim Kopieren in die Zwischenablage: ', err);
+    });
+  }
+  
+  window.onclick = function(event) {
+    const modal = document.getElementById('shareModal');
+    if (event.target == modal) {
+      closeSharePopup();
+    }
+  }
+  </script>
+  <br>
+  <br>
+  
+</body>
+</html>
diff --git a/breakfast.jpg b/breakfast.jpg
new file mode 100644
index 0000000..a716337
Binary files /dev/null and b/breakfast.jpg differ
diff --git a/breakfast.png b/breakfast.png
new file mode 100644
index 0000000..15af109
Binary files /dev/null and b/breakfast.png differ
diff --git a/früchte teller.png b/früchteteller.png
similarity index 100%
rename from früchte teller.png
rename to früchteteller.png
diff --git a/icons/Controller.png b/icons/Controller.png
new file mode 100644
index 0000000..b5e411c
Binary files /dev/null and b/icons/Controller.png differ
diff --git a/icons/Link.svg b/icons/Link.svg
new file mode 100644
index 0000000..3f04714
--- /dev/null
+++ b/icons/Link.svg
@@ -0,0 +1 @@
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="283" height="337.81532" viewBox="0,0,283,337.81532"><g transform="translate(-98.5,-11.09234)"><g data-paper-data="{&quot;isPaintingLayer&quot;:true}" fill-rule="nonzero" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" style="mix-blend-mode: normal"><g><g><g><path d="M98.5,180.63739c0,-11.26462 9.13178,-20.3964 20.3964,-20.3964c11.26462,0 20.3964,9.13178 20.3964,20.3964c0,11.26462 -9.13178,20.3964 -20.3964,20.3964c-11.26462,0 -20.3964,-9.13178 -20.3964,-20.3964z" fill="#000000" stroke="none" stroke-width="1" stroke-linecap="butt"/><g fill="none" stroke="#000000" stroke-width="5" stroke-linecap="round"><path d="M360.1391,32.83909l-240.27819,147.24468"/><path d="M119.8609,180.71295l240.27819,147.24468" data-paper-data="{&quot;index&quot;:null}"/></g></g><path d="M340.70721,328.51126c0,-11.26462 9.13178,-20.3964 20.3964,-20.3964c11.26462,0 20.3964,9.13178 20.3964,20.3964c0,11.26462 -9.13178,20.3964 -20.3964,20.3964c-11.26462,0 -20.3964,-9.13178 -20.3964,-20.3964z" fill="#000000" stroke="none" stroke-width="1" stroke-linecap="butt"/></g><path d="M340.70721,31.48874c0,-11.26462 9.13178,-20.3964 20.3964,-20.3964c11.26462,0 20.3964,9.13178 20.3964,20.3964c0,11.26462 -9.13178,20.3964 -20.3964,20.3964c-11.26462,0 -20.3964,-9.13178 -20.3964,-20.3964z" fill="#000000" stroke="none" stroke-width="1" stroke-linecap="butt"/></g></g></g></svg><!--rotationCenter:141.50000000000006:168.90765765765772-->
\ No newline at end of file
diff --git a/icons/copy-clipboard.png b/icons/copy-clipboard.png
new file mode 100644
index 0000000..00ee199
Binary files /dev/null and b/icons/copy-clipboard.png differ
diff --git a/icons/copy.svg b/icons/copy.svg
new file mode 100644
index 0000000..6af51b7
--- /dev/null
+++ b/icons/copy.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path d="M384 336l-192 0c-8.8 0-16-7.2-16-16l0-256c0-8.8 7.2-16 16-16l140.1 0L400 115.9 400 320c0 8.8-7.2 16-16 16zM192 384l192 0c35.3 0 64-28.7 64-64l0-204.1c0-12.7-5.1-24.9-14.1-33.9L366.1 14.1c-9-9-21.2-14.1-33.9-14.1L192 0c-35.3 0-64 28.7-64 64l0 256c0 35.3 28.7 64 64 64zM64 128c-35.3 0-64 28.7-64 64L0 448c0 35.3 28.7 64 64 64l192 0c35.3 0 64-28.7 64-64l0-32-48 0 0 32c0 8.8-7.2 16-16 16L64 464c-8.8 0-16-7.2-16-16l0-256c0-8.8 7.2-16 16-16l32 0 0-48-32 0z"/></svg>
\ No newline at end of file
diff --git a/icons/email-icon.png b/icons/email-icon.png
new file mode 100644
index 0000000..d23013e
Binary files /dev/null and b/icons/email-icon.png differ
diff --git a/icons/email.svg b/icons/email.svg
new file mode 100644
index 0000000..3fbf6a4
--- /dev/null
+++ b/icons/email.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path d="M64 112c-8.8 0-16 7.2-16 16l0 22.1L220.5 291.7c20.7 17 50.4 17 71.1 0L464 150.1l0-22.1c0-8.8-7.2-16-16-16L64 112zM48 212.2L48 384c0 8.8 7.2 16 16 16l384 0c8.8 0 16-7.2 16-16l0-171.8L322 328.8c-38.4 31.5-93.7 31.5-132 0L48 212.2zM0 128C0 92.7 28.7 64 64 64l384 0c35.3 0 64 28.7 64 64l0 256c0 35.3-28.7 64-64 64L64 448c-35.3 0-64-28.7-64-64L0 128z"/></svg>
\ No newline at end of file
diff --git a/icons/instagram.svg b/icons/instagram.svg
new file mode 100644
index 0000000..3129cfc
--- /dev/null
+++ b/icons/instagram.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path d="M224.1 141c-63.6 0-114.9 51.3-114.9 114.9s51.3 114.9 114.9 114.9S339 319.5 339 255.9 287.7 141 224.1 141zm0 189.6c-41.1 0-74.7-33.5-74.7-74.7s33.5-74.7 74.7-74.7 74.7 33.5 74.7 74.7-33.6 74.7-74.7 74.7zm146.4-194.3c0 14.9-12 26.8-26.8 26.8-14.9 0-26.8-12-26.8-26.8s12-26.8 26.8-26.8 26.8 12 26.8 26.8zm76.1 27.2c-1.7-35.9-9.9-67.7-36.2-93.9-26.2-26.2-58-34.4-93.9-36.2-37-2.1-147.9-2.1-184.9 0-35.8 1.7-67.6 9.9-93.9 36.1s-34.4 58-36.2 93.9c-2.1 37-2.1 147.9 0 184.9 1.7 35.9 9.9 67.7 36.2 93.9s58 34.4 93.9 36.2c37 2.1 147.9 2.1 184.9 0 35.9-1.7 67.7-9.9 93.9-36.2 26.2-26.2 34.4-58 36.2-93.9 2.1-37 2.1-147.8 0-184.8zM398.8 388c-7.8 19.6-22.9 34.7-42.6 42.6-29.5 11.7-99.5 9-132.1 9s-102.7 2.6-132.1-9c-19.6-7.8-34.7-22.9-42.6-42.6-11.7-29.5-9-99.5-9-132.1s-2.6-102.7 9-132.1c7.8-19.6 22.9-34.7 42.6-42.6 29.5-11.7 99.5-9 132.1-9s102.7-2.6 132.1 9c19.6 7.8 34.7 22.9 42.6 42.6 11.7 29.5 9 99.5 9 132.1s2.7 102.7-9 132.1z"/></svg>
\ No newline at end of file
diff --git a/icons/link.png b/icons/link.png
new file mode 100644
index 0000000..cfb56c8
Binary files /dev/null and b/icons/link.png differ
diff --git a/icons/link1.png b/icons/link1.png
new file mode 100644
index 0000000..1ca70c3
Binary files /dev/null and b/icons/link1.png differ
diff --git a/icons/link1.svg b/icons/link1.svg
new file mode 100644
index 0000000..9b73326
--- /dev/null
+++ b/icons/link1.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M280 64h40c35.3 0 64 28.7 64 64V448c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V128C0 92.7 28.7 64 64 64h40 9.6C121 27.5 153.3 0 192 0s71 27.5 78.4 64H280zM64 112c-8.8 0-16 7.2-16 16V448c0 8.8 7.2 16 16 16H320c8.8 0 16-7.2 16-16V128c0-8.8-7.2-16-16-16H304v24c0 13.3-10.7 24-24 24H192 104c-13.3 0-24-10.7-24-24V112H64zm128-8a24 24 0 1 0 0-48 24 24 0 1 0 0 48z"/></svg>
\ No newline at end of file
diff --git a/icons/meine-spiele.png b/icons/meine-spiele.png
new file mode 100644
index 0000000..28e44a3
Binary files /dev/null and b/icons/meine-spiele.png differ
diff --git a/icons/pinterest.svg b/icons/pinterest.svg
new file mode 100644
index 0000000..95c7c8d
--- /dev/null
+++ b/icons/pinterest.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path d="M204 6.5C101.4 6.5 0 74.9 0 185.6 0 256 39.6 296 63.6 296c9.9 0 15.6-27.6 15.6-35.4 0-9.3-23.7-29.1-23.7-67.8 0-80.4 61.2-137.4 140.4-137.4 68.1 0 118.5 38.7 118.5 109.8 0 53.1-21.3 152.7-90.3 152.7-24.9 0-46.2-18-46.2-43.8 0-37.8 26.4-74.4 26.4-113.4 0-66.2-93.9-54.2-93.9 25.8 0 16.8 2.1 35.4 9.6 50.7-13.8 59.4-42 147.9-42 209.1 0 18.9 2.7 37.5 4.5 56.4 3.4 3.8 1.7 3.4 6.9 1.5 50.4-69 48.6-82.5 71.4-172.8 12.3 23.4 44.1 36 69.3 36 106.2 0 153.9-103.5 153.9-196.8C384 71.3 298.2 6.5 204 6.5z"/></svg>
\ No newline at end of file
diff --git a/icons/playbutton.png b/icons/playbutton.png
new file mode 100644
index 0000000..9b3cb06
Binary files /dev/null and b/icons/playbutton.png differ
diff --git a/icons/schuessel.png b/icons/schuessel.png
new file mode 100644
index 0000000..ff8f29c
Binary files /dev/null and b/icons/schuessel.png differ
diff --git a/icons/spiele.png b/icons/spiele.png
new file mode 100644
index 0000000..097fd25
Binary files /dev/null and b/icons/spiele.png differ
diff --git a/icons/spielen-button.png b/icons/spielen-button.png
new file mode 100644
index 0000000..459c841
Binary files /dev/null and b/icons/spielen-button.png differ
diff --git a/icons/telegram.svg b/icons/telegram.svg
new file mode 100644
index 0000000..c2f0b0b
--- /dev/null
+++ b/icons/telegram.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512"><!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path d="M248 8C111 8 0 119 0 256S111 504 248 504 496 393 496 256 385 8 248 8zM363 176.7c-3.7 39.2-19.9 134.4-28.1 178.3-3.5 18.6-10.3 24.8-16.9 25.4-14.4 1.3-25.3-9.5-39.3-18.7-21.8-14.3-34.2-23.2-55.3-37.2-24.5-16.1-8.6-25 5.3-39.5 3.7-3.8 67.1-61.5 68.3-66.7 .2-.7 .3-3.1-1.2-4.4s-3.6-.8-5.1-.5q-3.3 .7-104.6 69.1-14.8 10.2-26.9 9.9c-8.9-.2-25.9-5-38.6-9.1-15.5-5-27.9-7.7-26.8-16.3q.8-6.7 18.5-13.7 108.4-47.2 144.6-62.3c68.9-28.6 83.2-33.6 92.5-33.8 2.1 0 6.6 .5 9.6 2.9a10.5 10.5 0 0 1 3.5 6.7A43.8 43.8 0 0 1 363 176.7z"/></svg>
\ No newline at end of file
diff --git a/icons/whatsapp.svg b/icons/whatsapp.svg
new file mode 100644
index 0000000..1cfc756
--- /dev/null
+++ b/icons/whatsapp.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path d="M380.9 97.1C339 55.1 283.2 32 223.9 32c-122.4 0-222 99.6-222 222 0 39.1 10.2 77.3 29.6 111L0 480l117.7-30.9c32.4 17.7 68.9 27 106.1 27h.1c122.3 0 224.1-99.6 224.1-222 0-59.3-25.2-115-67.1-157zm-157 341.6c-33.2 0-65.7-8.9-94-25.7l-6.7-4-69.8 18.3L72 359.2l-4.4-7c-18.5-29.4-28.2-63.3-28.2-98.2 0-101.7 82.8-184.5 184.6-184.5 49.3 0 95.6 19.2 130.4 54.1 34.8 34.9 56.2 81.2 56.1 130.5 0 101.8-84.9 184.6-186.6 184.6zm101.2-138.2c-5.5-2.8-32.8-16.2-37.9-18-5.1-1.9-8.8-2.8-12.5 2.8-3.7 5.6-14.3 18-17.6 21.8-3.2 3.7-6.5 4.2-12 1.4-32.6-16.3-54-29.1-75.5-66-5.7-9.8 5.7-9.1 16.3-30.3 1.8-3.7 .9-6.9-.5-9.7-1.4-2.8-12.5-30.1-17.1-41.2-4.5-10.8-9.1-9.3-12.5-9.5-3.2-.2-6.9-.2-10.6-.2-3.7 0-9.7 1.4-14.8 6.9-5.1 5.6-19.4 19-19.4 46.3 0 27.3 19.9 53.7 22.6 57.4 2.8 3.7 39.1 59.7 94.8 83.8 35.2 15.2 49 16.5 66.6 13.9 10.7-1.6 32.8-13.4 37.4-26.4 4.6-13 4.6-24.1 3.2-26.4-1.3-2.5-5-3.9-10.5-6.6z"/></svg>
\ No newline at end of file
diff --git a/index.html b/index.html
index 1883b43..3550a71 100644
--- a/index.html
+++ b/index.html
@@ -4,12 +4,13 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta name="description" content="Tauche ein in die wunderbare Welt der Kulinarik und entdecke köstliche Rezepte.">
-    <link href="/fa/css/fontawesome.css" rel="stylesheet" />
-    <link href="/fa/css/brands.css" rel="stylesheet" />
+    <link href="/fa/css/fontawesome.css" rel="stylesheet">
+    <link href="/fa/css/brands.css" rel="stylesheet">
     <title>so.mach.ich.das</title>
     <style>
+        /* Grundlegendes Styling */
         body {
-            font-family: Arial, sans-serif;
+            font-family: system-ui, sans-serif;
             margin: 0;
             padding: 0;
             display: flex;
@@ -18,36 +19,45 @@
             text-align: center;
             background-color: white;
         }
+
+        /* Header */
         header {
             display: flex;
             justify-content: space-between;
+            align-items: center;
             width: 100%;
             padding: 20px;
-            align-items: center;
             max-width: 1200px;
+            flex-wrap: wrap;
         }
-        .left, .right {
+
+        nav {
             display: flex;
             gap: 20px;
         }
+
         h1 {
-            flex-grow: 1;
             margin: 0;
+            font-size: 1.8em;
         }
+
         a {
             text-decoration: none;
             color: black;
         }
+
+        /* Social Links (links positioniert) */
         .social-links {
             display: flex;
             gap: 10px;
-            position: absolute;
-            top: 20px;
-            left: 20px;
+            align-items: center;
         }
+
         .social-links a {
-            font-size: 1.5em; /* Default size for larger screens */
+            font-size: 1.5em;
         }
+
+        /* Ladebildschirm */
         .loading-overlay {
             position: fixed;
             top: 0;
@@ -59,10 +69,8 @@
             align-items: center;
             justify-content: center;
             z-index: 9999;
-            visibility: hidden;
-            opacity: 0;
-            transition: opacity 0.3s ease-in-out;
         }
+
         .spinner {
             width: 50px;
             height: 50px;
@@ -71,40 +79,45 @@
             border-radius: 50%;
             animation: spin 1s linear infinite;
         }
+
         @keyframes spin {
             0% { transform: rotate(0deg); }
             100% { transform: rotate(360deg); }
         }
+
+        /* Inhalt */
         .content {
             display: flex;
-            flex-direction: row;
+            flex-wrap: wrap;
             align-items: center;
             justify-content: center;
-            text-align: left;
+            text-align: center;
             width: 100%;
             max-width: 1200px;
             padding: 20px;
             box-sizing: border-box;
         }
-        .text {
+
+        .text, .image {
             flex: 1;
-            margin-right: 20px;
-        }
-        .image {
-            flex: 1;
-            text-align: right;
+            width: 100%;
+            text-align: center;
         }
+
         .image img {
             max-width: 100%;
             height: auto;
-            border-radius: 8px; /* Optional: Für abgerundete Ecken */
+            border-radius: 8px;
         }
+
         .divider {
             width: 100%;
             height: 2px;
             background-color: black;
             margin: 20px 0;
         }
+
+        /* Karte */
         .card {
             max-width: 300px;
             background: white;
@@ -117,112 +130,113 @@
             display: inline-block;
             margin: 10px;
         }
+
         .card:hover {
             transform: translate(-2px, -4px);
             box-shadow: 16px 16px 0 rgba(32,33,37,.06);
         }
+
+        .card img {
+            max-width: 100%;
+            height: auto;
+        }
+
         .card .title {
             font-weight: bold;
             margin-top: 1.5em;
         }
+
         .card .description {
             line-height: 1.5em;
         }
+
         .card a {
             color: #1967d2;
             font-size: .8em;
             font-weight: 600;
         }
-        .description-title {
-            font-size: 1.5em;
-            font-weight: bold;
-            text-transform: uppercase;
-            margin-bottom: 10px;
-        }
 
-        /* Media Query für responsives Design */
-        @media (max-width: 600px) {
+        /* Responsives Design */
+        @media (max-width: 768px) {
+            header {
+                flex-direction: column;
+                align-items: center;
+                text-align: center;
+            }
+
+            .social-links {
+                width: 100%;
+                justify-content: center;
+                margin-top: 10px;
+            }
+
             .content {
                 flex-direction: column;
                 align-items: center;
             }
+
             .text, .image {
-                flex: none;
                 width: 100%;
-                text-align: center;
-                margin-right: 0;
             }
+
             .card {
                 max-width: 90%;
                 margin: 10px 0;
             }
-            .social-links a {
-                font-size: 1.2em; /* Kleinere Icons auf mobilen Geräten */
-            }
         }
     </style>
 </head>
 <body>
     <header>
-        <div class="left">
-            <a href="index.html">HOME</a>
-            <a href="recipes.html">RECIPES</a>
-        </div>
-        <h1>so.mach.ich.das</h1>
-        <div class="right">
-            <a href="contact.html">CONTACT</a>
-            <a href="about.html">ABOUT</a>
-        </div>
         <div class="social-links">
-            <a href="https://www.instagram.com/so.mach.ich.das/" target="_blank" rel="noopener noreferrer">
+            <a href="https://www.instagram.com/so.mach.ich.das/" target="_blank">
                 <i class="fa-brands fa-instagram"></i>
             </a>
-            <a href="https://youtube.com/@somachtstefaniedasstefanie435?feature=shared" target="_blank" rel="noopener noreferrer">
+            <a href="https://youtube.com/@somachtstefaniedasstefanie435?feature=shared" target="_blank">
                 <i class="fa-brands fa-youtube"></i>
             </a>
         </div>
+        <nav>
+            <a href="index.html">HOME</a>
+            <a href="recipes.html">RECIPES</a>
+        </nav>
+        <h1>so.mach.ich.das</h1>
+        <nav>
+            <a href="contact.html">CONTACT</a>
+            <a href="about.html">ABOUT</a>
+        </nav>
     </header>
+
     <div class="loading-overlay">
         <div class="spinner"></div>
     </div>
-    <div class="content">
-        <div class="text">
-            <div class="description-title">Beschreibung</div>
-            <p>Tauche ein in die wunderbare Welt der Kulinarik und entdecke eine Vielzahl 
-            von köstlichen Rezepten, die ich persönlich kuratiert habe.<br>
-            Egal, ob du ein Anfänger in der Küche bist oder ein erfahrener Gourmet –
-            hier findest du Inspiration und Anleitungen für jede Gelegenheit.</p>
-        </div>
-        <div class="image">
-            <img src="obstteller1.png" alt="Obstteller mit frischen Früchten">
-        </div>
-    </div>
-    <div class="divider"></div>
-    <div class="card">
-        <img src="johannesbeeressig.png" width="100%" alt="Johannesbeeressig">
-        <div class="title">Johannesbeeressig</div>
-        <p class="description">Verleihe deinem Salat eine außergewöhnliche 
-        Note mit selbstgemachtem Johannisbeeressig.<br>
-        Der fruchtige Geschmack der Johannisbeeren harmoniert perfekt 
-        mit der feinen Säure des Essigs und verleiht jedem Salat ein besonderes Aroma.</p>
-        <a href="#" class="link">See the recipe</a>
-    </div>
+
+    <main>
+        <section class="content">
+            <div class="text">
+                <p>Tauche ein in die wunderbare Welt der Kulinarik und entdecke eine Vielzahl 
+                von köstlichen Rezepten, die ich persönlich kuratiert habe.</p>
+            </div>
+            <div class="image">
+                <img src="obstteller.png" alt="Breakfast Image">
+            </div>
+        </section>
+
+        <div class="divider"></div>
+
+        <article class="card">
+            <img src="johannesbeeressig.png" width="100%" alt="Johannesbeeressig">
+            <h3 class="title">Johannesbeeressig</h3>
+            <p class="description">Verleihe deinem Salat eine außergewöhnliche Note mit selbstgemachtem Johannisbeeressig.</p>
+            <a href="/Johannesbeeressig/" class="link">See the recipe</a>
+        </article>
+    </main>
+
     <script>
-        function showLoading() {
-            const overlay = document.querySelector('.loading-overlay');
-            overlay.style.visibility = 'visible';
-            overlay.style.opacity = '1';
-        }
-        function hideLoading() {
-            const overlay = document.querySelector('.loading-overlay');
-            overlay.style.opacity = '0';
-            setTimeout(() => {
-                overlay.style.visibility = 'hidden';
-            }, 300);
-        }
-        document.addEventListener('DOMContentLoaded', function() {
-            hideLoading();
-        });
+        // Funktion, die die Ladeanimation nach dem Laden der Seite ausblendet
+        window.onload = function() {
+            document.querySelector('.loading-overlay').style.display = 'none';
+        };
     </script>
 </body>
 </html>
