diff --git a/.DS_Store b/.DS_Store
index c3f93eb..b58b51e 100644
Binary files a/.DS_Store and b/.DS_Store differ
diff --git a/public/.DS_Store b/public/.DS_Store
index fe2cddf..006c957 100644
Binary files a/public/.DS_Store and b/public/.DS_Store differ
diff --git a/public/bestellformular.html b/public/bestellformular.html
index 2b3b3c0..9c50d1f 100644
--- a/public/bestellformular.html
+++ b/public/bestellformular.html
@@ -5,25 +5,53 @@
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Second Harvest</title>
-    <link rel="stylesheet" href="css/desktop.css">
-    <script src="js/formchecker.js" async="true" ></script>
+    <style>
+        @import 'css/mobile.css' (max-width: 480px);
+        @import 'css/desktop.css' (min-width: 480px);
+    </style>
+    <script src="javascript/formchecker.js" async="true" ></script>
 </head>
 
 
 <body>
     <header>
-        <div class="header_logo">
-            <a href="index.html">
+        <nav>
+            <div class="navbar-mobile">
+                <div class="nav-container">
+                  <input class="checkbox" type="checkbox" name="" id="" />
+                    <div class="hamburger-lines">
+                        <span class="line line1"></span>
+                        <span class="line line2"></span>
+                        <span class="line line3"></span>
+                    </div>
+                    <nav class="navbar menu-items">
+                        <a href="ueber_uns.html">Über uns</a>
+                        <a href="produkte.html">Produkte</a>
+                        <a href="warenkorb.html">Warenkorb</a>
+                        <a href="kontakt.html">Kontakt</a>
+                        <a href="impressum.html">Impressum</a>
+                        <a href="datenschutz.html">Datenschutz</a>
+                    </nav> 
+                </div>
+            </div>
+        </nav>
+        <nav> 
+            <div class="header_logo">
+                <a href="index.html">
                 <img src="pictures/logo_secondharvest_transparent.png" width="200" alt="Second Harvest Logo"></a>
-        </div>
-        <h1>Second Harvest</h1>
-        <p>Gib Lebensmitteln eine zweite Chance</p>
-        <nav class="navbar" style="--items: 4;">
-            <a href="ueber_uns.html">Über uns</a>
-            <a href="produkte.html">Produkte</a>
-
-            <a href="warenkorb.html">Warenkorb</a>
-            <a href="kontakt.html">Kontakt</a>
+            </div>
+            <div class="header_desktop">
+                <h1>Second Harvest</h1>
+                <p>Gib Lebensmitteln eine zweite Chance</p>
+            </div>
+            <div class="header_desktop">
+                <nav class="navbar-desktop" style="--items: 4;">
+                    <a href="ueber_uns.html">Über uns</a>
+                    <a href="produkte.html">Produkte</a>
+                    <a href="warenkorb.html">Warenkorb</a>
+                    <a href="kontakt.html">Kontakt</a>
+                </nav>
+            </div>
         </nav>
     </header>
 
@@ -67,7 +95,7 @@
                 <tr>
                     <th class="feld_vorn"><label for="plz">&nbsp;PLZ</label></th>
                     <th class="stern">*</th>
-                    <td><input type="number" min="0" id="plz" pattern="[0-9]*"></td>
+                    <td><input type="text" min="0" id="plz"></td>
                 </tr>
                 <tr>
                     <th class="feld_vorn"> <label for="wohnort">&nbsp;Wohnort</label></th>
@@ -99,12 +127,12 @@
         
     
     <div class="button_abschließen_position">
-        <p><a class="button_abschließen" href="produkte.html" onclick="checkform()" >Kostenpflichtig bestellen</a></p>
+        <p><a class="button_abschließen" onclick="checkform()" href="bestellung_erfolgreich.html"  >Kostenpflichtig bestellen</a></p>
 
     </div>
 
     <footer>
-        <nav class="navbar" style="--items: 2;">
+        <nav class="navbar-desktop" style="--items: 2;">
             <a href="impressum.html">Impressum</a>
             <a href="datenschutz.html">Datenschutz</a>
         </nav>
diff --git a/public/bestellung_erfolgreich.html b/public/bestellung_erfolgreich.html
index ee27898..7026680 100644
--- a/public/bestellung_erfolgreich.html
+++ b/public/bestellung_erfolgreich.html
@@ -5,23 +5,51 @@
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Bestellung fehlgeschlagen</title>
-    <link rel="stylesheet" href="css/desktop.css">
+    <style>
+        @import 'css/mobile.css' (max-width: 480px);
+        @import 'css/desktop.css' (min-width: 480px);
+    </style>
 </head>
 
 <body>
     <header>
-        <div class="header_logo">
-            <a href="index.html">
+        <nav>
+            <div class="navbar-mobile">
+                <div class="nav-container">
+                  <input class="checkbox" type="checkbox" name="" id="" />
+                    <div class="hamburger-lines">
+                        <span class="line line1"></span>
+                        <span class="line line2"></span>
+                        <span class="line line3"></span>
+                    </div>
+                    <nav class="navbar menu-items">
+                        <a href="ueber_uns.html">Über uns</a>
+                        <a href="produkte.html">Produkte</a>
+                        <a href="warenkorb.html">Warenkorb</a>
+                        <a href="kontakt.html">Kontakt</a>
+                        <a href="impressum.html">Impressum</a>
+                        <a href="datenschutz.html">Datenschutz</a>
+                    </nav> 
+                </div>
+            </div>
+        </nav>
+        <nav> 
+            <div class="header_logo">
+                <a href="index.html">
                 <img src="pictures/logo_secondharvest_transparent.png" width="200" alt="Second Harvest Logo"></a>
-        </div>
-        <h1>Second Harvest</h1>
-        <p>Gib Lebensmitteln eine zweite Chance</p>
-        <nav class="navbar" style="--items: 4;">
-            <a href="ueber_uns.html">Über uns</a>
-            <a href="produkte.html">Produkte</a>
-
-            <a href="warenkorb.html">Warenkorb</a>
-            <a href="kontakt.html">Kontakt</a>
+            </div>
+            <div class="header_desktop">
+                <h1>Second Harvest</h1>
+                <p>Gib Lebensmitteln eine zweite Chance</p>
+            </div>
+            <div class="header_desktop">
+                <nav class="navbar-desktop" style="--items: 4;">
+                    <a href="ueber_uns.html">Über uns</a>
+                    <a href="produkte.html">Produkte</a>
+                    <a href="warenkorb.html">Warenkorb</a>
+                    <a href="kontakt.html">Kontakt</a>
+                </nav>
+            </div>
         </nav>
     </header>
 
@@ -36,7 +64,7 @@
 
 
     <footer>
-        <nav class="navbar" style="--items: 2;">
+        <nav class="navbar-desktop" style="--items: 2;">
             <a href="impressum.html">Impressum</a>
             <a href="datenschutz.html">Datenschutz</a>
         </nav>
diff --git a/public/bestellung_fehlgeschlagen.html b/public/bestellung_fehlgeschlagen.html
index e67b356..9608f42 100644
--- a/public/bestellung_fehlgeschlagen.html
+++ b/public/bestellung_fehlgeschlagen.html
@@ -5,23 +5,51 @@
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Bestellung fehlgeschlagen</title>
-    <link rel="stylesheet" href="css/desktop.css">
+    <style>
+        @import 'css/mobile.css' (max-width: 480px);
+        @import 'css/desktop.css' (min-width: 480px);
+    </style>
 </head>
 
 <body>
     <header>
-        <div class="header_logo">
-            <a href="index.html">
+        <nav>
+            <div class="navbar-mobile">
+                <div class="nav-container">
+                  <input class="checkbox" type="checkbox" name="" id="" />
+                    <div class="hamburger-lines">
+                        <span class="line line1"></span>
+                        <span class="line line2"></span>
+                        <span class="line line3"></span>
+                    </div>
+                    <nav class="navbar menu-items">
+                        <a href="ueber_uns.html">Über uns</a>
+                        <a href="produkte.html">Produkte</a>
+                        <a href="warenkorb.html">Warenkorb</a>
+                        <a href="kontakt.html">Kontakt</a>
+                        <a href="impressum.html">Impressum</a>
+                        <a href="datenschutz.html">Datenschutz</a>
+                    </nav> 
+                </div>
+            </div>
+        </nav>
+        <nav> 
+            <div class="header_logo">
+                <a href="index.html">
                 <img src="pictures/logo_secondharvest_transparent.png" width="200" alt="Second Harvest Logo"></a>
-        </div>
-        <h1>Second Harvest</h1>
-        <p>Gib Lebensmitteln eine zweite Chance</p>
-        <nav class="navbar" style="--items: 4;">
-            <a href="ueber_uns.html">Über uns</a>
-            <a href="produkte.html">Produkte</a>
-
-            <a href="warenkorb.html">Warenkorb</a>
-            <a href="kontakt.html">Kontakt</a>
+            </div>
+            <div class="header_desktop">
+                <h1>Second Harvest</h1>
+                <p>Gib Lebensmitteln eine zweite Chance</p>
+            </div>
+            <div class="header_desktop">
+                <nav class="navbar-desktop" style="--items: 4;">
+                    <a href="ueber_uns.html">Über uns</a>
+                    <a href="produkte.html">Produkte</a>
+                    <a href="warenkorb.html">Warenkorb</a>
+                    <a href="kontakt.html">Kontakt</a>
+                </nav>
+            </div>
         </nav>
     </header>
 
@@ -35,7 +63,7 @@
 
 
     <footer>
-        <nav class="navbar" style="--items: 2;">
+        <nav class="navbar-desktop" style="--items: 2;">
             <a href="impressum.html">Impressum</a>
             <a href="datenschutz.html">Datenschutz</a>
         </nav>
diff --git a/public/css/desktop.css b/public/css/desktop.css
index 1b66e72..3a60e08 100644
--- a/public/css/desktop.css
+++ b/public/css/desktop.css
@@ -1,362 +1,510 @@
-* {
-    box-sizing: border-box;
-    font-family: Helvetica, Arial, sans-serif;
-}
-
-body {
-    min-height: 100vh;
-    padding: 0;
-}
-
-body::-webkit-scrollbar {
-    width: 10px
-}
-
-body::-webkit-scrollbar-track {
-    background-color: white;
-}
-
-body::-webkit-scrollbar-thumb {
-    background: #476B1C;
-}
-
-header {
-    background-color: #9BB558;
-        
-}
-
-header > h1 {
-    padding-top: 0.1em;
-    padding-left: 7em;
-    margin: 0;
-    font-size: 1.875em;
-}
-
-header > p {
-    padding-left: 17.6em;
-    margin-top: 0em;
-    margin-bottom: 0.5em;
-    font-size: 0.75em;
-}
-
-.header_logo {
-    float: left;
-    margin-top: -18px;
-    margin-bottom: -20px;
-    margin-left: -20px;
-    transform: scale(0.8);
-}
-
-.navbar {
-    background-color: #476B1C;
-    display: grid;
-	grid-template-columns: repeat(var(--items), 1fr);
-    width: 100%;
-}
-
-.navbar a {
-    text-align: center;
-    text-decoration: none;
-    color: white;
-    padding: 0.5em 0 0.5em 0;
-}
-.aktuell a {
-    color: #f4eb49;
-}
-
-.content {
-    position: relative;
-    color: black;
-}
-
-.content p {
-    margin-top: 0.1em;
-    margin-bottom: 0.1em;
-}
-
-.content :not(h1, strong) {
-    margin-left: 3.5em;
-    color: #606060;
-}
-
-.content h1 {
-    text-align: center;
-    font-size: 1.875em;
-    font-weight: normal;
-    margin-top: 0;
-}
-
-.content h2 {
-    font-size: 1em;
-    text-align: center;
-}
-.content a {
-    margin-left: 0em;
-}
-
-html body.index .content::before,
-html body.datenschutz .content::before,
-html body.ueberuns .content::before,
-html body.kontakt .content::before,
-html body.impressum .content::before{
-    content: "";
-    background-image: url('../pictures/gemuese_transparent.png');
-    background-repeat: no-repeat;
-    background-position: center top;
-    position: absolute;
-    overflow: auto;
-    top: 0px;
-    right: 0px;
-    bottom: 0px;
-    left: 0px;
-    opacity: 0.2;
-    pointer-events: none;
-}
-
-#aktuelle_auswahl {
-    margin-left: 2.7em;
-    margin-bottom: -0.5em;
-    font-size: 1em;
-}
-
-
-.beispiel_produkte img {
-    border: #606060 1px solid;
-    height: 160px;
-    width: 150px;
-    margin-top: 1em;
-    margin-left: 2em;
-
-}
-
-#button_produkte {
-    background-color: #476B1C;
-    color: white;
-    padding: 5px 20px;
-    border-radius: 15px;
-    text-align: center;
-    text-decoration: none;
-    display: inline-block;
-    font-size: 1em;
-    cursor: pointer;
-    margin-left: -1em;
-}
-
-#balken {
-    background-color: #9BB558;
-    height: 20px;
-    position: relative;
-    left: 0;
-    bottom: 0;
-    width: 100%;
-}
-
-input {
-    font-family: Arial, Helvetica, sans-serif;
-    color: #606060
-}
-
-
-label {
-    font-weight: normal;
-    border: none;
-}
-
-#anrede,
-#titel,
-#vorname,
-#name,
-#straße,
-#hausnummer,
-#plz,
-#wohnort,
-#email {
-    border: none;
-    width:600px;
-}
-
-.bestellung_tabelle {
-    font-family: Arial, Helvetica, sans-serif;
-    font-size: 0.8em;
-    color: #606060;
-    text-align: left;
-    margin-top:30px;
-    margin-left: 50px;
-    border: thin solid #606060;
-    border-collapse: collapse;
-}
-
-.bestellung_tabelle th {
-    border: thin solid #606060;
-}
-
-.bestellung_tabelle td {
-    border: thin solid #606060;
-    width: 600px;
-}
-.bestellung_tabelle tr{
-    height: 25px;
-}
-
-.stern {
-    width: 30px;
-    text-align: center;
-}
-
-.feld_vorn {
-    width: 115px;
-}
-#tabellenbeschreibung{
-    font-size: 0.8em;
-    margin-top: 6px;
-    margin-left: 60px;
-}
-#gesamtkosten{
-    font-size: 1em;
-    color: black;
-    margin-top: 40px;
-    margin-left: 50px;
-}
-.checkboxen{
-    display: inline-block;
-    font-size: 0.8em;
-    text-align:justify;
-}
-.checkbox_ausrichtung{
-    margin-left: 50px;
-}
-#begrueßung_bestellung_abschließen{
-    font-size: 2em;
-    font-family: Arial, Helvetica, sans-serif;
-    color: black;
-    text-align: center;
-    margin-top: 0.5px;
-}
-.button_abschließen{
-    background-color: #476B1C;
-    color: white;
-    padding: 3px 10px;
-    border-radius: 6px;
-    text-align: center;
-    text-decoration: none;
-    display: inline-block;
-    font-size: 0.8em;
-    margin: 4px 2px;
-    cursor: pointer;
-    font-weight: normal;
-}
-.button_abschließen_position{
-    margin-left: 100px;
-}
-
-.produktueberschrift{
-    text-align: center;
-    margin:50px;
-}
-
-.parent{
-    display: flex;
-    justify-content: space-around;
-    flex-wrap:wrap;
-    align-content: center;
-}
-
-.produkte{
-    display: flex;
-    border:#606060 3px solid;
-    display: inline-block;
-    margin: 25px;
-}
-
-.produktbottom{
-    justify-content: space-between;
-    display: flex;
-    margin:10px;
-}
-
-.produkte_warenkorb{
-    position: relative;
-    max-width: 88%;
-    height: 165px;
-    border: thin solid #606060;
-    margin-top: 22.5px;
-    margin-bottom: 22.5px;
-    display: flex;
-    align-items: center;
-  }
-
-.produkte_warenkorb img {
-    margin-right: -60px;
-    height:60%;
-
-}
-.produkte_details {
-    width: 150px;
-    display: block;
-    font-size: 0.8em;
-    margin-top: -40px;
-}
-.button_mit_menue{
-    display: flex;
-    align-items: center;
-    position:absolute;
-    bottom: 50px;
-    right: 30px;
-
-}
-.button_entfernen{
-    background-color: #ebebeb;
-    border: thin solid black;
-    color: black;
-    width: 115px;
-    height: 31px;
-    padding: 6px;
-    border-radius: 3px;
-    text-align: center;
-    text-decoration: none;
-    display: inline-block;
-    font-size: 0.8em;
-    margin: 4px 2px;
-    cursor: pointer;
-    font-weight: normal;
-
-}
-#menue{
-    width: 35px;
-    height: 25px;
-    margin-left: 10px;
-}
-.gesamtbetrag{
-    position: absolute;
-    font-size: 1em;
-    bottom: 15px;
-    right: 15px;
-}
-a:hover{ 
-    color: #f4eb49;
-}
-.gesamtbetrag{
-    position: absolute;
-    font-size: 1em;
-    bottom: 15px;
-    right: 15px;
-}
-.foodampel {
-    display: flex;
-    align-items: top;
-
-  }
-  
-  .foodampel img {
-    height: 120px;
-    margin-left: -0.7em;
-  }
-  
-  .foodampel p {
-    margin-left: 0.65em;
-    margin-top: 0.8em;
-    
-  }
-  #hinweis{
-    color: red;
-  }
\ No newline at end of file
+    
+    /* DESKTOP Version T4Web 0.1 */
+
+    /* NONE FROM MOBILE */
+
+    .header_mobile {
+        display:none;
+    }
+    .header_mobilelogo {
+        display:none;
+    }
+    .navbar-mobile{
+        display:none;
+    }
+
+    /* ALL-FORMAT */
+
+    * {
+        box-sizing: border-box;
+        font-family: Helvetica, Arial, sans-serif;
+    }
+    
+    #hinweis {
+        color: red;
+    }
+
+    /* BACKGROUND-IMAGE-FORMAT-DESKTOP */
+
+    html body.index .content::before,
+    html body.datenschutz .content::before,
+    html body.ueberuns .content::before,
+    html body.kontakt .content::before,
+    html body.impressum .content::before {
+        content: "";
+        background-image: url('../pictures/gemuese_transparent.png');
+        background-repeat: no-repeat;
+        background-position: center top;
+        background-size: 470px;
+        position: absolute;
+        overflow: auto;
+        top: 20px;
+        right: 0px;
+        bottom: 0px;
+        left: 0px;
+        opacity: 0.2;
+        pointer-events: none;
+    }
+
+    /* NAV-DESKTOP-FORMAT */
+
+    .navbar-desktop {
+        background-color: #476B1C;
+        display: grid;
+        grid-template-columns: repeat(var(--items), 1fr);
+        width: 100%;
+    }
+    
+    .navbar-desktop a {
+        text-align: center;
+        text-decoration: none;
+        color: white;
+        padding: 0.5em 0 0.5em 0;
+    }
+
+    .navbar-desktop a:hover {
+        color: #f4eb49;
+    }
+
+    /* BODY-FORMAT */
+
+    body {
+        min-height: 100vh;
+        padding: 0;
+    }
+    
+    body::-webkit-scrollbar {
+        width: 10px
+    }
+    
+    body::-webkit-scrollbar-track {
+        background-color: white;
+    }
+    
+    body::-webkit-scrollbar-thumb {
+        background: #476B1C;
+    }
+    
+    /* HEADER-FORMAT */
+
+    header {
+        background-color: #9BB558;
+    
+    }
+    
+    .header_desktop > h1 {
+        padding-top: 0.1em;
+        padding-left: 7em;
+        margin: 0;
+        font-size: 1.875em;
+    }
+    
+    .header_desktop > p {
+        padding-left: 17.6em;
+        margin-top: 0em;
+        margin-bottom: 0.5em;
+        font-size: 0.75em;
+    }
+    
+    .header_logo {
+        float: left;
+        margin-top: -18px;
+        margin-bottom: -20px;
+        margin-left: -20px;
+        transform: scale(0.8);
+    }
+    
+    /* CONTENT-FORMAT */
+    
+    .content {
+        position: relative;
+        color: black;
+    }
+    
+    .content p {
+        margin-top: 0.1em;
+        margin-bottom: 0.1em;
+    }
+    
+    .content :not(h1, strong, a) {
+        margin-left: 3.5em;
+        color: #606060;
+    }
+    
+    .content h1 {
+        text-align: center;
+        font-size: 1.875em;
+        font-weight: normal;
+        margin-top: 0;
+    }
+    
+    .content h2 {
+        font-size: 1em;
+        text-align: center;
+    }
+    
+    .content a {
+        margin-left: 0em;
+    }
+    
+    /* PRODUKTE-FORMAT */
+
+    #aktuelle_auswahl {
+        margin-left: 2.7em;
+        margin-bottom: -0.5em;
+        font-size: 1em;
+    }
+    
+    
+    .beispiel_produkte img {
+        border: #606060 1px solid;
+        height: 160px;
+        width: 150px;
+        margin-top: 1em;
+        margin-left: 2em;
+    
+    }
+    
+    .button_produkte {
+        background-color: #476B1C;
+        color: #fff;
+        padding: 5px 20px;
+        border-radius: 15px;
+        text-align: center;
+        text-decoration: none;
+        display: inline-block;
+        font-size: 1em;
+        cursor: pointer;
+        margin-left: -1em;
+    }
+
+    a:hover {
+        color:#f4eb49;
+    }
+
+    
+    /* FOOTER-FORMAT */
+
+    #balken {
+        background-color: #9BB558;
+        height: 20px;
+        position: relative;
+        left: 0;
+        bottom: 0;
+        width: 100%;
+    }
+    
+    /* BESTELLUNG-FORMAT */
+
+    input {
+        font-family: Arial, Helvetica, sans-serif;
+        color: #606060
+    }
+    
+    
+    label {
+        font-weight: normal;
+        border: none;
+    }
+    
+    #anrede,
+    #titel,
+    #vorname,
+    #name,
+    #straße,
+    #hausnummer,
+    #plz,
+    #wohnort,
+    #email {
+        border: none;
+        width: 600px;
+    }
+    
+    .bestellung_tabelle {
+        font-family: Arial, Helvetica, sans-serif;
+        font-size: 0.8em;
+        color: #606060;
+        text-align: left;
+        margin-top: 30px;
+        margin-left: 50px;
+        border: thin solid #606060;
+        border-collapse: collapse;
+    }
+    
+    .bestellung_tabelle th {
+        border: thin solid #606060;
+    }
+    
+    .bestellung_tabelle td {
+        border: thin solid #606060;
+        width: 600px;
+    }
+    
+    .bestellung_tabelle tr {
+        height: 25px;
+    }
+    
+    .stern {
+        width: 30px;
+        text-align: center;
+    }
+    
+    .feld_vorn {
+        width: 115px;
+    }
+    
+    #tabellenbeschreibung {
+        font-size: 0.8em;
+        margin-top: 6px;
+        margin-left: 60px;
+    }
+    
+    #gesamtkosten {
+        font-size: 1em;
+        color: black;
+        margin-top: 40px;
+        margin-left: 50px;
+    }
+    
+    .checkboxen {
+        display: inline-block;
+        font-size: 0.8em;
+        text-align: justify;
+    }
+    
+    .checkbox_ausrichtung {
+        margin-left: 50px;
+    }
+    
+    #begrueßung_bestellung_abschließen {
+        font-size: 2em;
+        font-family: Arial, Helvetica, sans-serif;
+        color: black;
+        text-align: center;
+        margin-top: 0.5px;
+    }
+    
+    .button_abschließen {
+        background-color: #476B1C;
+        color: white;
+        padding: 3px 10px;
+        border-radius: 6px;
+        text-align: center;
+        text-decoration: none;
+        display: inline-block;
+        font-size: 0.8em;
+        margin: 4px 2px;
+        cursor: pointer;
+        font-weight: normal;
+    }
+    
+    .button_abschließen_position {
+        margin-left: 100px;
+    }
+    
+    .produktueberschrift {
+        text-align: center;
+        margin: 50px;
+    }
+    
+    .parent {
+        display: flex;
+        justify-content: space-around;
+        flex-wrap: wrap;
+        align-content: center;
+    }
+    
+    .produkte {
+        display: flex;
+        border: #606060 3px solid;
+        display: inline-block;
+        margin: 25px;
+    }
+    
+    .produktbottom {
+        justify-content: space-between;
+        display: flex;
+        margin: 10px;
+    }
+    
+    .produktbottom a {
+        position: relative;
+    }
+    
+    .produkte_warenkorb {
+        position: relative;
+        max-width: 88%;
+        height: 165px;
+        border: thin solid #606060;
+        margin-top: 22.5px;
+        margin-bottom: 22.5px;
+        display: flex;
+        align-items: center;
+    }
+    
+    .produkte_warenkorb img {
+        margin-right: 0px;
+        height: 60%;
+    
+    }
+    
+    .content .produkte_details {
+        color: black;
+        font-weight: bold;
+        width: 150px;
+        display: block;
+        font-size: 0.8em;
+        margin-top: -40px;
+    }
+    
+    .button_mit_menue {
+        display: flex;
+        align-items: center;
+        position: absolute;
+        bottom: 50px;
+        right: 30px;
+    
+    }
+    
+    .button_entfernen {
+        background-color: #ebebeb;
+        border: thin solid black;
+        color: black;
+        width: 115px;
+        height: 31px;
+        padding: 6px;
+        border-radius: 3px;
+        text-align: center;
+        text-decoration: none;
+        display: inline-block;
+        font-size: 0.8em;
+        margin: 4px 2px;
+        cursor: pointer;
+        font-weight: normal;
+    
+    }
+    
+    #menue {
+        width: 35px;
+        height: 25px;
+        margin-left: 10px;
+    }
+    
+    .content .gesamtbetrag {
+        font-weight: bold;
+        color: black;
+        position: absolute;
+        font-size: 1em;
+        bottom: 15px;
+        right: 15px;
+    }
+    
+    .gesamtbetrag {
+        position: absolute;
+        font-size: 1em;
+        bottom: 15px;
+        right: 15px;
+    }    
+    
+    .button_hinzufuegen {
+        background-color: #9BB558;
+        color: white;
+        padding: 10px;
+        border-radius: 50%;
+        text-align: center;
+        text-decoration: none;
+        display: inline-block;
+        font-size: 0.8em;
+        cursor: pointer;
+        width: 35px;
+        height: 35px;
+        position: relative;
+        box-shadow: 0px 4px 3px rgba(0, 0, 0, 0.3);
+        margin-top: 0.5em;
+    }
+    
+    .button_hinzufuegen::before {
+        content: "+";
+        position: absolute;
+        transform: translate(-50%, -40%);
+        font-size: 3em;
+        font-weight: normal;
+    }
+    
+    #notification {
+        display: none;
+        position: fixed;
+        top: 0;
+        left: 0;
+        right: 0;
+        background-color: #4CAF50;
+        color: white;
+        text-align: center;
+        padding: 10px;
+        z-index: 999;
+    }
+    
+    .content .äußererContainer {
+        position: relative;
+        bottom: 0;
+        width: 400px;
+        padding-left: 50px;
+        margin-top: 22.5px;
+        margin-left: auto;
+        margin-bottom: 22.5px;
+        display: grid;
+        grid-template-rows: auto auto;
+    }
+    
+    .content .kostenContainer {
+    
+        position: relative;
+        width: 300px;
+        height: 60px;
+        font-weight: bold;
+        font-size: 0.9em;
+        display: inline-block;
+        margin-left: 0px;
+    }
+    
+    .content .lieferkosten_text {
+        color: black;
+        display: inline-block;
+        margin-left: 0px;
+        margin-right: 110px;
+        text-align: right;
+    }
+    
+    .content .lieferkosten_preis {
+        color: black;
+        display: inline-block;
+    }
+
+    .content .gesamtkosten_text{
+        color: black;
+        display: inline-block;
+        text-align: left;
+        margin-left: 0;
+        margin-right: 63px;
+    }
+
+    .content .gesamtpreis{
+        color: black;
+        display: inline-block;
+        margin-left: 0;
+    
+    }
+    
+    .content .button_bestellung_abschließen {
+        background-color: #476B1C;
+        color: white;
+        padding: 3px 10px;
+        border-radius: 6px;
+        text-align: center;
+        text-decoration: none;
+        display: inline-block;
+        font-size: 0.8em;
+        margin: 4px 2px;
+        cursor: pointer;
+        font-weight: normal;
+    }
diff --git a/public/css/mobile.css b/public/css/mobile.css
new file mode 100644
index 0000000..d1ba3e1
--- /dev/null
+++ b/public/css/mobile.css
@@ -0,0 +1,580 @@
+
+    /* MOBILE-Version T4Web 0.1 */
+
+    /* NONE FROM DESKTOP */
+
+    .navbar-desktop{
+        display:none;
+    }
+
+    .header_logo {
+        display:none;
+    }
+
+    .header_desktop {
+        display:none;
+    }
+
+    #balken {
+        display:none;
+    }
+
+    /* ALL-FORMAT */
+
+    * {
+        box-sizing: border-box;
+        font-family: Helvetica, Arial, sans-serif;
+    }
+
+    a:hover {
+        color: #f4eb49;
+    }
+
+    .aktuell a {
+        color: #f4eb49;
+    }
+    
+    #hinweis {
+        color: red;
+    }
+
+    /* BACKGROUND-IMAGE-FORMAT-MOBILE */
+
+    html body.index .content::before,
+    html body.datenschutz .content::before,
+    html body.ueberuns .content::before,
+    html body.kontakt .content::before,
+    html body.impressum .content::before{
+        content: "";
+        background-image: url('../pictures/gemuese_transparent.png');
+        background-repeat: no-repeat;
+        background-position: center top;
+        background-size: 250px;
+        position: absolute;
+        overflow: auto;
+        top: 80px;
+        bottom: 0px;
+        left: 0px;
+        right: 0px;
+        opacity: 0.2;
+        pointer-events: none;
+    }
+    
+    /* NAV-MOBILE-FORMAT */ 
+  
+    .navbar-mobile {
+        display: grid;
+        grid-template-columns: 380px auto;
+        background-image: url('../pictures/mobile_header.png');
+        background-repeat: no-repeat;
+        background-position: center;
+        background-size: cover;
+        position: sticky;
+        height: 60px;
+        
+    }
+    .navbar-mobile .nav-container a {
+        text-decoration: none;
+        text-align: left;
+        color: #fff;
+        font-weight: 100;
+        font-size: 1.2rem;
+        line-height: 1.5em;
+    }
+  
+    .navbar-mobile .nav-container a:hover{
+        color: #f4eb49;
+    }
+  
+    /*.nav-container {
+        
+    }*/
+  
+    .nav-container .checkbox {
+        position: absolute;
+        display: flex;
+        height: 60px;
+        width: 60px;
+        background: #476B1C;
+        top: 0px;
+        left: 0px;
+        z-index: 3;
+        opacity: 0;
+        cursor:pointer;
+    }
+  
+    .nav-container .hamburger-lines {
+        height: 26px;
+        width: 32px;
+        position: absolute;
+        top: 17px;
+        left: 20px;
+        z-index: 0;
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+    }
+  
+    .nav-container .hamburger-lines .line {
+        display: block;
+        height: 6px;
+        width: 100%;
+        border-radius: 0px;
+        background: #fff;
+    }
+  
+    .nav-container .hamburger-lines .line1 {
+        transform-origin: 0% 0%;
+        transition: transform 0.4s ease-in-out;
+    }
+    
+    .nav-container .hamburger-lines .line2 {
+        transition: transform 0.2s ease-in-out;
+    }
+    
+    .nav-container .hamburger-lines .line3 {
+        transform-origin: 0% 100%;
+        transition: transform 0.4s ease-in-out;
+    }
+  
+    .navbar-mobile .menu-items {
+        margin-top: 60px;
+        padding-top: 15px;
+        background-color: #476B1C;
+        height: 35vh;
+        width: 80%;
+        transform: translate(-150%);
+        display: flex;
+        flex-direction: column;
+        margin-left: -40px;
+        padding-left: 50px;
+        transition: transform 0.5s ease-in-out;
+        text-align: left;
+    }
+  
+    .nav-container input[type="checkbox"]:checked ~ .menu-items {
+        transform: translateX(0);
+    }
+    
+    .nav-container input[type="checkbox"]:checked ~ .hamburger-lines .line1 {
+        transform: rotate(45deg);
+    }
+    
+    .nav-container input[type="checkbox"]:checked ~ .hamburger-lines .line2 {
+        transform: scaleY(0);
+    }
+    
+    .nav-container input[type="checkbox"]:checked ~ .hamburger-lines .line3 {
+        transform: rotate(-45deg);
+    }
+
+    /* BODY-FORMAT */
+
+    body {
+        min-height: 100vh;
+        padding: 0;
+    }
+    
+    body::-webkit-scrollbar {
+        width: 6px
+    }
+    
+    body::-webkit-scrollbar-track {
+        background-color: white;
+    }
+    
+    body::-webkit-scrollbar-thumb {
+        background: #476B1C;
+    }
+
+    /* HEADER-FORMAT */
+
+    header {
+        background-color: #9BB558;
+    }
+
+    /* CONTENT-FORMAT */
+    
+    .content {
+        position: static;
+        color: black;
+    }
+    
+    .content p {
+        margin-top: 0.1em;
+        margin-bottom: 0.1em;
+    }
+    
+    .content :not(h1, strong, a) {
+        margin-left: 3.5em;
+        color: #606060;
+    }
+    
+    .content h1 {
+        text-align: center;
+        font-size: 1.875em;
+        font-weight: normal;
+        margin-top: 0;
+    }
+    
+    .content h2 {
+        font-size: 1em;
+        text-align: center;
+    }
+    
+    .content a {
+        margin-left: 0em;
+    }
+
+    /* FOOTER-FORMAT */
+    /* KEIN FOOTER IN DER MOBILE ANSICHT */
+    
+    
+    /* PRODUKTE-FORMAT */
+
+    #aktuelle_auswahl {
+        margin-left: 2.7em;
+        margin-bottom: -0.5em;
+        font-size: 1em;
+    }
+    
+    .beispiel_produkte img {
+        border: #606060 1px solid;
+        height: 160px;
+        width: 150px;
+        margin-top: 1em;
+        margin-left: 2em;
+    
+    }
+    
+    .button_produkte {
+        background-color: #476B1C;
+        color: white;
+        padding: 5px 20px;
+        border-radius: 15px;
+        text-align: center;
+        text-decoration: none;
+        display: inline-block;
+        font-size: 1em;
+        cursor: pointer;
+        margin-left: -1em;
+    }
+
+    a:hover {
+        color:#f4eb49;
+    }
+    
+    /* BESTELLUNG-FORMAT */
+
+    input {
+        font-family: Arial, Helvetica, sans-serif;
+        color: #606060
+    }
+
+    label {
+        font-weight: normal;
+        border: none;
+    }
+    
+    #anrede,
+    #titel,
+    #vorname,
+    #name,
+    #straße,
+    #hausnummer,
+    #plz,
+    #wohnort,
+    #email {
+        border: none;
+        width: 600px;
+    }
+    
+    .bestellung_tabelle {
+        font-family: Arial, Helvetica, sans-serif;
+        font-size: 0.8em;
+        color: #606060;
+        text-align: left;
+        margin-top: 30px;
+        margin-left: 50px;
+        border: thin solid #606060;
+        border-collapse: collapse;
+    }
+    
+    .bestellung_tabelle th {
+        border: thin solid #606060;
+    }
+    
+    .bestellung_tabelle td {
+        border: thin solid #606060;
+        width: 600px;
+    }
+    
+    .bestellung_tabelle tr {
+        height: 25px;
+    }
+    
+    .stern {
+        width: 30px;
+        text-align: center;
+    }
+    
+    .feld_vorn {
+        width: 115px;
+    }
+    
+    #tabellenbeschreibung {
+        font-size: 0.8em;
+        margin-top: 6px;
+        margin-left: 60px;
+    }
+    
+    #gesamtkosten {
+        font-size: 1em;
+        color: black;
+        margin-top: 40px;
+        margin-left: 50px;
+    }
+    
+    .checkboxen {
+        display: inline-block;
+        font-size: 0.8em;
+        text-align: justify;
+    }
+    
+    .checkbox_ausrichtung {
+        margin-left: 50px;
+    }
+    
+    #begrueßung_bestellung_abschließen {
+        font-size: 2em;
+        font-family: Arial, Helvetica, sans-serif;
+        color: black;
+        text-align: center;
+        margin-top: 0.5px;
+    }
+    
+    .button_abschließen {
+        background-color: #476B1C;
+        color: white;
+        padding: 3px 10px;
+        border-radius: 6px;
+        text-align: center;
+        text-decoration: none;
+        display: inline-block;
+        font-size: 0.8em;
+        margin: 4px 2px;
+        cursor: pointer;
+        font-weight: normal;
+    }
+    
+    .button_abschließen_position {
+        margin-left: 100px;
+    }
+    
+    .produktueberschrift {
+        text-align: center;
+        margin: 50px;
+    }
+    
+    .parent {
+        display: flex;
+        justify-content: space-around;
+        flex-wrap: wrap;
+        align-content: center;
+    }
+    
+    .produkte {
+        display: flex;
+        border: #606060 3px solid;
+        display: inline-block;
+        margin: 25px;
+    }
+    
+    .produktbottom {
+        justify-content: space-between;
+        display: flex;
+        margin: 10px;
+    }
+    
+    .produktbottom a {
+        position: relative;
+    }
+    
+    .produkte_warenkorb {
+        position: relative;
+        max-width: 88%;
+        height: 165px;
+        border: thin solid #606060;
+        margin-top: 22.5px;
+        margin-bottom: 22.5px;
+        display: flex;
+        align-items: center;
+    }
+    
+    .produkte_warenkorb img {
+        margin-right: 0px;
+        height: 60%;
+    
+    }
+    
+    .content .produkte_details {
+        color: black;
+        font-weight: bold;
+        width: 150px;
+        display: block;
+        font-size: 0.8em;
+        margin-top: -40px;
+    }
+    
+    .button_mit_menue {
+        display: flex;
+        align-items: center;
+        position: absolute;
+        bottom: 50px;
+        right: 30px;
+    
+    }
+    
+    .button_entfernen {
+        background-color: #ebebeb;
+        border: thin solid black;
+        color: black;
+        width: 115px;
+        height: 31px;
+        padding: 6px;
+        border-radius: 3px;
+        text-align: center;
+        text-decoration: none;
+        display: inline-block;
+        font-size: 0.8em;
+        margin: 4px 2px;
+        cursor: pointer;
+        font-weight: normal;
+    
+    }
+    
+    #menue {
+        width: 35px;
+        height: 25px;
+        margin-left: 10px;
+    }
+    
+    .content .gesamtbetrag {
+        font-weight: bold;
+        color: black;
+        position: absolute;
+        font-size: 1em;
+        bottom: 15px;
+        right: 15px;
+    }
+    
+    
+    
+    .gesamtbetrag {
+        position: absolute;
+        font-size: 1em;
+        bottom: 15px;
+        right: 15px;
+    }
+
+    .button_hinzufuegen {
+        background-color: #9BB558;
+        color: white;
+        padding: 10px;
+        border-radius: 50%;
+        text-align: center;
+        text-decoration: none;
+        display: inline-block;
+        font-size: 0.8em;
+        cursor: pointer;
+        width: 35px;
+        height: 35px;
+        position: relative;
+        box-shadow: 0px 4px 3px rgba(0, 0, 0, 0.3);
+        margin-top: 0.5em;
+    }
+    
+    .button_hinzufuegen::before {
+        content: "+";
+        position: absolute;
+        transform: translate(-50%, -40%);
+        font-size: 3em;
+        font-weight: normal;
+    }
+    
+    #notification {
+        display: none;
+        position: fixed;
+        top: 0;
+        left: 0;
+        right: 0;
+        background-color: #4CAF50;
+        color: white;
+        text-align: center;
+        padding: 10px;
+        z-index: 999;
+    }
+    
+    .content .äußererContainer {
+        position: relative;
+        bottom: 0;
+        width: 400px;
+        padding-left: 50px;
+        margin-top: 22.5px;
+        margin-left: auto;
+        margin-bottom: 22.5px;
+        display: grid;
+        grid-template-rows: auto auto;
+    }
+    
+    .content .kostenContainer {
+    
+        position: relative;
+        width: 300px;
+        height: 60px;
+        font-weight: bold;
+        font-size: 0.9em;
+        display: inline-block;
+        margin-left: 0px;
+    }
+    
+    .content .lieferkosten_text {
+        color: black;
+        display: inline-block;
+        margin-left: 0px;
+        margin-right: 110px;
+        text-align: right;
+    }
+    
+    .content .lieferkosten_preis {
+        color: black;
+        display: inline-block;
+    }
+    .content .gesamtkosten_text{
+        color: black;
+        display: inline-block;
+        text-align: left;
+        margin-left: 0;
+        margin-right: 63px;
+    }
+    .content .gesamtpreis{
+        color: black;
+        display: inline-block;
+        margin-left: 0;
+    
+    }
+    .content .button_bestellung_abschließen {
+        background-color: #476B1C;
+        color: white;
+        padding: 3px 10px;
+        border-radius: 6px;
+        text-align: center;
+        text-decoration: none;
+        display: inline-block;
+        font-size: 0.8em;
+        margin: 4px 2px;
+        cursor: pointer;
+        font-weight: normal;
+    }
+
+    
\ No newline at end of file
diff --git a/public/datenschutz.html b/public/datenschutz.html
index 14e34bb..ab9d8ec 100644
--- a/public/datenschutz.html
+++ b/public/datenschutz.html
@@ -5,23 +5,51 @@
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Datenschutzerklärung</title>
-    <link rel="stylesheet" href="css/desktop.css">
+    <style>
+        @import 'css/mobile.css' (max-width: 480px);
+        @import 'css/desktop.css' (min-width: 480px);
+    </style>
 </head>
 
 <body class="datenschutz">
     <header>
-        <div class="header_logo">
-            <a href="index.html">
+        <nav>
+            <div class="navbar-mobile">
+                <div class="nav-container">
+                  <input class="checkbox" type="checkbox" name="" id="" />
+                    <div class="hamburger-lines">
+                        <span class="line line1"></span>
+                        <span class="line line2"></span>
+                        <span class="line line3"></span>
+                    </div>
+                    <nav class="navbar menu-items">
+                        <a href="ueber_uns.html">Über uns</a>
+                        <a href="produkte.html">Produkte</a>
+                        <a href="warenkorb.html">Warenkorb</a>
+                        <a href="kontakt.html">Kontakt</a>
+                        <a href="impressum.html">Impressum</a>
+                        <a href="datenschutz.html">Datenschutz</a>
+                    </nav>
+                </div>
+            </div>
+        </nav>
+        <nav> 
+            <div class="header_logo">
+                <a href="index.html">
                 <img src="pictures/logo_secondharvest_transparent.png" width="200" alt="Second Harvest Logo"></a>
-        </div>
-        <h1>Second Harvest</h1>
-        <p>Gib Lebensmitteln eine zweite Chance</p>
-        <nav class="navbar" style="--items: 4;">
-            <a href="ueber_uns.html">Über uns</a>
-            <a href="produkte.html">Produkte</a>
-
-            <a href="warenkorb.html">Warenkorb</a>
-            <a href="kontakt.html">Kontakt</a>
+            </div>
+            <div class="header_desktop">
+                <h1>Second Harvest</h1>
+                <p>Gib Lebensmitteln eine zweite Chance</p>
+            </div>
+            <div class="header_desktop">
+                <nav class="navbar-desktop" style="--items: 4;">
+                    <a href="ueber_uns.html">Über uns</a>
+                    <a href="produkte.html">Produkte</a>
+                    <a href="warenkorb.html">Warenkorb</a>
+                    <a href="kontakt.html">Kontakt</a>
+                </nav>
+            </div>
         </nav>
     </header>
 
@@ -285,7 +313,7 @@
 
 
     <footer>
-        <nav class="navbar" style="--items: 2;">
+        <nav class="navbar-desktop" style="--items: 2;">
             <a href="impressum.html">Impressum</a>
             <a class="aktuell" href="datenschutz.html">Datenschutz</a>
         </nav>
diff --git a/public/impressum.html b/public/impressum.html
index 7a3e983..5404f7e 100644
--- a/public/impressum.html
+++ b/public/impressum.html
@@ -5,23 +5,51 @@
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Beschreibung der Seite</title>
-    <link rel="stylesheet" href="css/desktop.css">
+    <style>
+        @import 'css/mobile.css' (max-width: 480px);
+        @import 'css/desktop.css' (min-width: 480px);
+    </style>
 </head>
 
 <body class="impressum">
     <header>
-        <div class="header_logo">
-            <a href="index.html">
+        <nav>
+            <div class="navbar-mobile">
+                <div class="nav-container">
+                  <input class="checkbox" type="checkbox" name="" id="" />
+                    <div class="hamburger-lines">
+                        <span class="line line1"></span>
+                        <span class="line line2"></span>
+                        <span class="line line3"></span>
+                    </div>
+                    <nav class="navbar menu-items">
+                        <a href="ueber_uns.html">Über uns</a>
+                        <a href="produkte.html">Produkte</a>
+                        <a href="warenkorb.html">Warenkorb</a>
+                        <a href="kontakt.html">Kontakt</a>
+                        <a href="impressum.html">Impressum</a>
+                        <a href="datenschutz.html">Datenschutz</a>
+                    </nav>
+                </div>
+            </div>
+        </nav>
+        <nav> 
+            <div class="header_logo">
+                <a href="index.html">
                 <img src="pictures/logo_secondharvest_transparent.png" width="200" alt="Second Harvest Logo"></a>
-        </div>
-        <h1>Second Harvest</h1>
-        <p>Gib Lebensmitteln eine zweite Chance</p>
-        <nav class="navbar" style="--items: 4;">
-            <a href="ueber_uns.html">Über uns</a>
-            <a href="produkte.html">Produkte</a>
-
-            <a href="warenkorb.html">Warenkorb</a>
-            <a href="kontakt.html">Kontakt</a>
+            </div>
+            <div class="header_desktop">
+                <h1>Second Harvest</h1>
+                <p>Gib Lebensmitteln eine zweite Chance</p>
+            </div>
+            <div class="header_desktop">
+                <nav class="navbar-desktop" style="--items: 4;">
+                    <a href="ueber_uns.html">Über uns</a>
+                    <a href="produkte.html">Produkte</a>
+                    <a href="warenkorb.html">Warenkorb</a>
+                    <a href="kontakt.html">Kontakt</a>
+                </nav>
+            </div>
         </nav>
     </header>
 
@@ -48,7 +76,7 @@
 
 
     <footer>
-        <nav class="navbar" style="--items: 2;">
+        <nav class="navbar-desktop" style="--items: 2;">
             <a href="impressum.html">Impressum</a>
             <a href="datenschutz.html">Datenschutz</a>
         </nav>
diff --git a/public/index.html b/public/index.html
index 07ea3a5..0d836b9 100644
--- a/public/index.html
+++ b/public/index.html
@@ -5,23 +5,50 @@
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Second Harvest</title>
-    <link rel="stylesheet" href="css/desktop.css">
+    <style>
+        @import 'css/mobile.css' (max-width: 480px);
+        @import 'css/desktop.css' (min-width: 480px);
+    </style>
 </head>
-
 <body class="index">
     <header>
-        <div class="header_logo">
-            <a href="index.html">
+        <nav>
+            <div class="navbar-mobile">
+                <div class="nav-container">
+                  <input class="checkbox" type="checkbox" name="" id="" />
+                    <div class="hamburger-lines">
+                        <span class="line line1"></span>
+                        <span class="line line2"></span>
+                        <span class="line line3"></span>
+                    </div>
+                    <nav class="navbar menu-items">
+                        <a href="ueber_uns.html">Über uns</a>
+                        <a href="produkte.html">Produkte</a>
+                        <a href="warenkorb.html">Warenkorb</a>
+                        <a href="kontakt.html">Kontakt</a>
+                        <a href="impressum.html">Impressum</a>
+                        <a href="datenschutz.html">Datenschutz</a>
+                    </nav> 
+                </div>
+            </div>
+        </nav>
+        <nav> 
+            <div class="header_logo">
+                <a href="index.html">
                 <img src="pictures/logo_secondharvest_transparent.png" width="200" alt="Second Harvest Logo"></a>
-        </div>
-        <h1>Second Harvest</h1>
-        <p>Gib Lebensmitteln eine zweite Chance</p>
-        <nav class="navbar" style="--items: 4;">
-            <a href="ueber_uns.html">Über uns</a>
-            <a href="produkte.html">Produkte</a>
-
-            <a href="warenkorb.html">Warenkorb</a>
-            <a href="kontakt.html">Kontakt</a>
+            </div>
+            <div class="header_desktop">
+                <h1>Second Harvest</h1>
+                <p>Gib Lebensmitteln eine zweite Chance</p>
+            </div>
+            <div class="header_desktop">
+                <nav class="navbar-desktop" style="--items: 4;">
+                    <a href="ueber_uns.html">Über uns</a>
+                    <a href="produkte.html">Produkte</a>
+                    <a href="warenkorb.html">Warenkorb</a>
+                    <a href="kontakt.html">Kontakt</a>
+                </nav>
+            </div>
         </nav>
     </header>
 
@@ -32,11 +59,23 @@
             verschwenden.</p>
         <br />
         <p>Alle Produkte auf unserer Seite sind mit drei Fähnchen gekennzeichnet.</p>
-        <div class="foodampel">
-            <img src="pictures/Foodampel_transparent.png">
-            <p class="foodampel">muss sofort verarbeitet werden</br></br>kann ein paar Tage liegen</br></br>lange
-                Haltbarkeit</p>
-        </div>
+
+            <table>
+                <tr>
+                    <td><img src="pictures/FoodAmpel_rot.png"></td>
+                    <td>muss sofort verarbeitet werden</td>
+                </tr>
+                <tr>
+                    <td><img src="pictures/FoodAmpel_gelb.png"></td>
+                    <td>kann ein paar Tage liegen</td>
+                </tr>
+                <tr>
+                    <td><img src="pictures/FoodAmpel_gruen.png"></td>
+                    <td>lange Haltbarkeit</td>
+                </tr>
+            </table>
+        
+        
         <p>Damit kannst du deinen Einkauf perfekt an deinen Essensplan anpassen und weißt bereits vorher, wann Du
             etwas verbrauchen musst.<br />Bestellungen, die <strong>bis 10 Uhr</strong> bei uns eingehen, werden
             <strong>noch am selben Tag</strong>
@@ -48,13 +87,14 @@
         <a class="beispiel_produkte" href="produkte.html"><img src="pictures/karotten.png" alt="Karotten"></a>
         <a class="beispiel_produkte" href="produkte.html">
             <img src="pictures/sellerie.png" alt="Sellerie"></a>
-        <p><a id="button_produkte" href="produkte.html">zu den Produkten</a></p>
-
+        <p>
+            <a class= "button_produkte" href="produkte.html">zu den Produkten</a>
+        </p>
         <h2>Viel Spaß bei Deinem Einkauf. Dein Second Harvest Team.</h2>
     </div>
 
     <footer>
-        <nav class="navbar" style="--items: 2;">
+        <nav class="navbar-desktop" style="--items: 2;">
             <a href="impressum.html">Impressum</a>
             <a href="datenschutz.html">Datenschutz</a>
         </nav>
diff --git a/public/javascript/formchecker.js b/public/javascript/formchecker.js
new file mode 100644
index 0000000..6cfaecf
--- /dev/null
+++ b/public/javascript/formchecker.js
@@ -0,0 +1,22 @@
+
+let x = Number(localStorage.getItem("gesamtpreis")).toFixed(2);
+let y = document.getElementById("gesamtkosten");
+y.innerHTML = "Die Gesamtkosten (inkl. MwSt.) belaufen sich auf: " + x + "€";
+
+function checkform() {
+    let vorname = document.getElementById('vorname').value;
+    let name = document.getElementById('name').value;
+    let straße = document.getElementById('straße').value;
+    let hausnummer = document.getElementById('hausnummer').value;
+    let plz = document.getElementById('plz').value;
+    let wohnort = document.getElementById('wohnort').value;
+    let email = document.getElementById('email').value;
+
+    if (/[a-zA-Z]{2,}/.test(vorname) === false) alert('vorname falsch');
+    if (/[a-zA-Z]{2,}/.test(name) === false) alert('name falsch');
+    if (/[a-zA-Z]{2,}/.test(straße) === false) alert('straße falsch');
+    if (/[0-9]{1,}/.test(hausnummer) === false) alert('hausnummer falsch');
+    if (/[0-9]{4,5}/.test(plz) === false) alert('plz falsch');
+    if (/[a-zA-Z]{2,}/.test(wohnort) === false) alert('wohnort falsch');
+    if (/^([a-zA-Z0-9]+([-_\.]?[a-zA-Z0-9])+@[a-zA-Z0-9]+([-_\.]?[a-zA-Z0-9])+\.[a-z]{2,4}){0,}$/.test(email) === false) alert('email falsch');
+}
\ No newline at end of file
diff --git a/public/javascript/warenkorb.js b/public/javascript/warenkorb.js
new file mode 100644
index 0000000..dfe95c7
--- /dev/null
+++ b/public/javascript/warenkorb.js
@@ -0,0 +1,542 @@
+var warenkorb = [];
+if (window.location.pathname.includes("/produkte.html")) {
+    document.addEventListener("DOMContentLoaded", function () {
+
+
+        const produktpreise = {
+            "karotte": 0.95, // Preis für Karotten
+            "sellerie": 1.10, // Preis für Sellerie
+            "birnen": 0.50, // Preis für Birnen
+            "kiwi": 0.95, // Preis für Kiwi
+            "orangen": 2.0, //Preis für Orangen
+            "aepfel": 2.0 //Preis für Aepfel
+        };
+        // Hole button1 - button6
+        for (let i = 1; i <= 6; i++) {
+            const button = document.getElementById("button" + i);
+
+            button.addEventListener("click", function (event) {
+                // verhindern Sie das Standardverhalten des Links
+                event.preventDefault();
+
+                // ermitteln Sie die ausgewählte Anzahl, die ID und den Preis des Produkts
+                const select = button.previousElementSibling;
+                const anzahl = select.options[select.selectedIndex].value;
+                const produktID = this.parentElement.parentElement.querySelector('img[data-id]').getAttribute('data-id');
+                console.log(produktID);
+                const preis = produktpreise[produktID];
+
+                //Produkt in den Warenkorb hinzufügen
+                produktHinzufuegen(produktID, anzahl, preis);
+            });
+        }
+
+
+        function produktHinzufuegen(produktID, anzahl, preis) {
+            // Objekt mit Produktinformationen erstellen
+            let produkt = {
+                id: produktID,
+                anzahl: anzahl,
+                preis: preis // Gesamtpreis berechnen
+            };
+
+            // Produkt zum Warenkorb hinzufügen
+            warenkorb.push(produkt);
+            const notification = document.getElementById('notification');
+
+            // Anzeigen der Nachricht
+            notification.textContent = 'Produkt wurde zum Warenkorb hinzugefügt!';
+            notification.style.display = 'block';
+
+            // Nachricht nach 3s ausblenden
+            setTimeout(function () {
+                notification.style.display = 'none';
+            }, 3000);
+
+            // Ausgabe des aktuellen Warenkorbs (zum Testen)
+            console.log(warenkorb);
+
+            localStorage.setItem("warenkorb", JSON.stringify(warenkorb));
+        }
+
+    });
+}
+function createWarenkorbDiv(warenkorb) {
+
+    for (const produkt of warenkorb) {
+        if (produkt.id === "karotte") {
+            const warenkorbDiv = document.createElement("div");
+            warenkorbDiv.setAttribute("data-id", "karotte");
+            warenkorbDiv.classList.add("produkte_warenkorb");
+            const produktBild = document.createElement("img");
+            produktBild.src = "pictures/karotte_ohne_preis.webp"
+            produktBild.alt = produkt.id;
+            warenkorbDiv.appendChild(produktBild);
+
+            const produktDetails = document.createElement("div");
+            produktDetails.classList.add("produkte_details");
+            const produktBeschreibung = document.createTextNode("Karotten 1kg");
+            const produktPreis = document.createTextNode("Kosten: 0.95€");
+            const aufLager = document.createTextNode("Auf Lager: 250");
+            produktDetails.appendChild(produktBeschreibung);
+            produktDetails.appendChild(document.createElement("br"));
+            produktDetails.appendChild(produktPreis);
+            produktDetails.appendChild(document.createElement("br"));
+            produktDetails.appendChild(document.createElement("br"));
+            produktDetails.appendChild(aufLager);
+
+            const buttonMitMenue = document.createElement("div");
+            buttonMitMenue.classList.add("button_mit_menue");
+            const paraButton = document.createElement("p");
+            const buttonEntfernen = document.createElement("a");
+            buttonEntfernen.classList.add("button_entfernen");
+            buttonEntfernen.innerText = "Entfernen";
+            buttonEntfernen.setAttribute("href", "#");
+
+            const menue = document.createElement("input");
+            menue.setAttribute("type", "number");
+            menue.setAttribute("id", "menue");
+            menue.setAttribute("value", produkt.anzahl);
+            menue.setAttribute("max", produkt.anzahl);
+            menue.setAttribute("min", "0");
+            menue.setAttribute("pattern", "[0-9]*");
+            paraButton.appendChild(buttonEntfernen);
+            buttonMitMenue.appendChild(paraButton);
+            buttonMitMenue.appendChild(menue);
+
+            const gesamtPreis = document.createElement("p");
+            gesamtPreis.classList.add("gesamtbetrag");
+            const gesamtPreisText = document.createTextNode("Betrag Gesamt (inkl. MwSt): " + ((produkt.preis * produkt.anzahl).toFixed(2)));
+            gesamtPreis.appendChild(gesamtPreisText);
+
+
+            warenkorbDiv.appendChild(produktDetails);
+            warenkorbDiv.appendChild(gesamtPreis);
+            warenkorbDiv.appendChild(buttonMitMenue);
+            const warenkorbContainer = document.querySelector(".warenkorb-container");
+            warenkorbContainer.appendChild(warenkorbDiv);
+            buttonEntfernen.addEventListener("click", function (event) {
+                if (produkt.anzahl > 1) {
+                    produkt.anzahl--;
+                    localStorage.setItem("warenkorb", JSON.stringify(warenkorb));
+                } else {
+                    entferneProdukt("karotte");
+                    console.log("Hier ausgabe vom Warenkorb:");
+                    console.log(warenkorb);
+                    const karotteContainer = document.querySelector('[data-id="karotte"]');
+                    //Löschen vom warenkorbDiv
+                    warenkorbContainer.removeChild(karotteContainer);
+                }
+                location.reload(true);
+            });
+        } else if (produkt.id === "sellerie") {
+            const warenkorbDiv = document.createElement("div");
+            warenkorbDiv.setAttribute("data-id", "sellerie");
+            warenkorbDiv.classList.add("produkte_warenkorb");
+            const produktBild = document.createElement("img");
+            produktBild.src = "pictures/sellerie_ohne_preis.webp"
+            produktBild.alt = produkt.id;
+            warenkorbDiv.appendChild(produktBild);
+
+            const produktDetails = document.createElement("div");
+            produktDetails.classList.add("produkte_details");
+
+            const produktBeschreibung = document.createTextNode("Sellerie 1 Stück");
+            const produktPreis = document.createTextNode("Kosten: 1.10€");
+            const aufLager = document.createTextNode("Auf Lager: 1000");
+
+            produktDetails.appendChild(produktBeschreibung);
+            produktDetails.appendChild(document.createElement("br"));
+            produktDetails.appendChild(produktPreis);
+            produktDetails.appendChild(document.createElement("br"));
+            produktDetails.appendChild(document.createElement("br"));
+            produktDetails.appendChild(aufLager);
+
+            const buttonMitMenue = document.createElement("div");
+            buttonMitMenue.classList.add("button_mit_menue");
+            const paraButton = document.createElement("p");
+            const buttonEntfernen = document.createElement("a");
+            buttonEntfernen.classList.add("button_entfernen");
+            buttonEntfernen.innerText = "Entfernen";
+            buttonEntfernen.setAttribute("href", "#");
+
+            const menue = document.createElement("input");
+            menue.setAttribute("type", "number");
+            menue.setAttribute("id", "menue");
+            menue.setAttribute("value", produkt.anzahl);
+            menue.setAttribute("max", produkt.anzahl);
+            menue.setAttribute("min", "0");
+            menue.setAttribute("pattern", "[0-9]*");
+            paraButton.appendChild(buttonEntfernen);
+            buttonMitMenue.appendChild(paraButton);
+            buttonMitMenue.appendChild(menue);
+
+            const gesamtPreis = document.createElement("p");
+            gesamtPreis.classList.add("gesamtbetrag");
+            const gesamtPreisText = document.createTextNode("Betrag Gesamt (inkl. MwSt): " + ((produkt.preis * produkt.anzahl).toFixed(2)));
+            gesamtPreis.appendChild(gesamtPreisText);
+
+
+            warenkorbDiv.appendChild(produktDetails);
+            warenkorbDiv.appendChild(gesamtPreis);
+            warenkorbDiv.appendChild(buttonMitMenue);
+            const warenkorbContainer = document.querySelector(".warenkorb-container");
+            warenkorbContainer.appendChild(warenkorbDiv);
+            buttonEntfernen.addEventListener("click", function (event) {
+                if (produkt.anzahl > 1) {
+                    produkt.anzahl--;
+                    localStorage.setItem("warenkorb", JSON.stringify(warenkorb));
+                } else {
+                    entferneProdukt("sellerie");
+                    console.log("Hier ausgabe vom Warenkorb:");
+                    console.log(warenkorb);
+                    const sellerieContainer = document.querySelector('[data-id="sellerie"]');
+                    //Löschen vom warenkorbDiv
+                    warenkorbContainer.removeChild(sellerieContainer);
+                }
+                location.reload(true);
+            });
+        } else if (produkt.id === "birnen") {
+            const warenkorbDiv = document.createElement("div");
+            warenkorbDiv.setAttribute("data-id", "birnen");
+            warenkorbDiv.classList.add("produkte_warenkorb");
+            const produktBild = document.createElement("img");
+            produktBild.src = "pictures/birne_ohne_preis.webp"
+            produktBild.alt = produkt.id;
+            warenkorbDiv.appendChild(produktBild);
+
+            const produktDetails = document.createElement("div");
+            produktDetails.classList.add("produkte_details");
+
+            const produktBeschreibung = document.createTextNode("Birne 0.5kg");
+            const produktPreis = document.createTextNode("Kosten: 0.50€");
+            const aufLager = document.createTextNode("Auf Lager: 500");
+
+            produktDetails.appendChild(produktBeschreibung);
+            produktDetails.appendChild(document.createElement("br"));
+            produktDetails.appendChild(produktPreis);
+            produktDetails.appendChild(document.createElement("br"));
+            produktDetails.appendChild(document.createElement("br"));
+            produktDetails.appendChild(aufLager);
+
+            const buttonMitMenue = document.createElement("div");
+            buttonMitMenue.classList.add("button_mit_menue");
+            const paraButton = document.createElement("p");
+            const buttonEntfernen = document.createElement("a");
+            buttonEntfernen.classList.add("button_entfernen");
+            buttonEntfernen.innerText = "Entfernen";
+            buttonEntfernen.setAttribute("href", "#");
+
+            const menue = document.createElement("input");
+            menue.setAttribute("type", "number");
+            menue.setAttribute("id", "menue");
+            menue.setAttribute("value", produkt.anzahl);
+            menue.setAttribute("max", produkt.anzahl);
+            menue.setAttribute("min", "0");
+            menue.setAttribute("pattern", "[0-9]*");
+            paraButton.appendChild(buttonEntfernen);
+            buttonMitMenue.appendChild(paraButton);
+            buttonMitMenue.appendChild(menue);
+
+            const gesamtPreis = document.createElement("p");
+            gesamtPreis.classList.add("gesamtbetrag");
+            const gesamtPreisText = document.createTextNode("Betrag Gesamt (inkl. MwSt): " + ((produkt.preis * produkt.anzahl).toFixed(2)));
+            gesamtPreis.appendChild(gesamtPreisText);
+
+
+            warenkorbDiv.appendChild(produktDetails);
+            warenkorbDiv.appendChild(gesamtPreis);
+            warenkorbDiv.appendChild(buttonMitMenue);
+            const warenkorbContainer = document.querySelector(".warenkorb-container");
+            warenkorbContainer.appendChild(warenkorbDiv);
+            buttonEntfernen.addEventListener("click", function (event) {
+                if (produkt.anzahl > 1) {
+                    produkt.anzahl--;
+                    localStorage.setItem("warenkorb", JSON.stringify(warenkorb));
+                } else {
+                    entferneProdukt("birnen");
+                    console.log("Hier ausgabe vom Warenkorb:");
+                    console.log(warenkorb);
+                    const birnenContainer = document.querySelector('[data-id="birnen"]');
+                    //Löschen vom warenkorbDiv
+                    warenkorbContainer.removeChild(birnenContainer);
+                }
+                location.reload(true);
+            });
+        } else if (produkt.id === "kiwi") {
+            const warenkorbDiv = document.createElement("div");
+            warenkorbDiv.setAttribute("data-id", "kiwi");
+            warenkorbDiv.classList.add("produkte_warenkorb");
+            const produktBild = document.createElement("img");
+            produktBild.src = "pictures/kiwi_ohne_preis.png.avif"
+            produktBild.alt = produkt.id;
+            warenkorbDiv.appendChild(produktBild);
+
+            const produktDetails = document.createElement("div");
+            produktDetails.classList.add("produkte_details");
+
+            const produktBeschreibung = document.createTextNode("Kiwi 0.5kg");
+            const produktPreis = document.createTextNode("Kosten: 0.95€");
+            const aufLager = document.createTextNode("Auf Lager: 250");
+            produktDetails.appendChild(produktBeschreibung);
+            produktDetails.appendChild(document.createElement("br"));
+            produktDetails.appendChild(produktPreis);
+            produktDetails.appendChild(document.createElement("br"));
+            produktDetails.appendChild(document.createElement("br"));
+            produktDetails.appendChild(aufLager);
+
+            const buttonMitMenue = document.createElement("div");
+            buttonMitMenue.classList.add("button_mit_menue");
+            const paraButton = document.createElement("p");
+            const buttonEntfernen = document.createElement("a");
+            buttonEntfernen.classList.add("button_entfernen");
+            buttonEntfernen.innerText = "Entfernen";
+            buttonEntfernen.setAttribute("href", "#");
+
+            const menue = document.createElement("input");
+            menue.setAttribute("type", "number");
+            menue.setAttribute("id", "menue");
+            menue.setAttribute("value", produkt.anzahl);
+            menue.setAttribute("max", produkt.anzahl);
+            menue.setAttribute("min", "0");
+            menue.setAttribute("pattern", "[0-9]*");
+            paraButton.appendChild(buttonEntfernen);
+            buttonMitMenue.appendChild(paraButton);
+            buttonMitMenue.appendChild(menue);
+
+            const gesamtPreis = document.createElement("p");
+            gesamtPreis.classList.add("gesamtbetrag");
+            const gesamtPreisText = document.createTextNode("Betrag Gesamt (inkl. MwSt): " + ((produkt.preis * produkt.anzahl).toFixed(2)));
+            gesamtPreis.appendChild(gesamtPreisText);
+
+
+            warenkorbDiv.appendChild(produktDetails);
+            warenkorbDiv.appendChild(gesamtPreis);
+            warenkorbDiv.appendChild(buttonMitMenue);
+            const warenkorbContainer = document.querySelector(".warenkorb-container");
+            warenkorbContainer.appendChild(warenkorbDiv);
+            buttonEntfernen.addEventListener("click", function (event) {
+                if (produkt.anzahl > 1) {
+                    produkt.anzahl--;
+                    localStorage.setItem("warenkorb", JSON.stringify(warenkorb));
+                } else {
+                    entferneProdukt("kiwi");
+                    console.log("Hier ausgabe vom Warenkorb:");
+                    console.log(warenkorb);
+                    const kiwiContainer = document.querySelector('[data-id="kiwi"]');
+                    //Löschen vom warenkorbDiv
+                    warenkorbContainer.removeChild(kiwiContainer);
+                }
+                location.reload(true);
+            });
+        } else if (produkt.id === "orangen") {
+            const warenkorbDiv = document.createElement("div");
+            warenkorbDiv.setAttribute("data-id", "orangen");
+            warenkorbDiv.classList.add("produkte_warenkorb");
+            const produktBild = document.createElement("img");
+            produktBild.src = "pictures/orangen_ohne_preis.png.avif";
+            produktBild.alt = produkt.id;
+            warenkorbDiv.appendChild(produktBild);
+
+            const produktDetails = document.createElement("div");
+            produktDetails.classList.add("produkte_details");
+
+            const produktBeschreibung = document.createTextNode("Orangen 1kg");
+            const produktPreis = document.createTextNode("Kosten: 2€");
+            const aufLager = document.createTextNode("Auf Lager: 350");
+
+            produktDetails.appendChild(produktBeschreibung);
+            produktDetails.appendChild(document.createElement("br"));
+            produktDetails.appendChild(produktPreis);
+            produktDetails.appendChild(document.createElement("br"));
+            produktDetails.appendChild(document.createElement("br"));
+            produktDetails.appendChild(aufLager);
+
+            const buttonMitMenue = document.createElement("div");
+            buttonMitMenue.classList.add("button_mit_menue");
+            const paraButton = document.createElement("p");
+            const buttonEntfernen = document.createElement("a");
+            buttonEntfernen.classList.add("button_entfernen");
+            buttonEntfernen.innerText = "Entfernen";
+            buttonEntfernen.setAttribute("href", "#");
+
+            const menue = document.createElement("input");
+            menue.setAttribute("type", "number");
+            menue.setAttribute("id", "menue");
+            menue.setAttribute("value", produkt.anzahl);
+            menue.setAttribute("max", produkt.anzahl);
+            menue.setAttribute("min", "0");
+            menue.setAttribute("pattern", "[0-9]*");
+            paraButton.appendChild(buttonEntfernen);
+            buttonMitMenue.appendChild(paraButton);
+            buttonMitMenue.appendChild(menue);
+
+            const gesamtPreis = document.createElement("p");
+            gesamtPreis.classList.add("gesamtbetrag");
+            const gesamtPreisText = document.createTextNode("Betrag Gesamt (inkl. MwSt): " + ((produkt.preis * produkt.anzahl).toFixed(2)));
+            gesamtPreis.appendChild(gesamtPreisText);
+
+
+            warenkorbDiv.appendChild(produktDetails);
+            warenkorbDiv.appendChild(gesamtPreis);
+            warenkorbDiv.appendChild(buttonMitMenue);
+            const warenkorbContainer = document.querySelector(".warenkorb-container");
+            warenkorbContainer.appendChild(warenkorbDiv);
+            buttonEntfernen.addEventListener("click", function (event) {
+                if (produkt.anzahl > 1) {
+                    produkt.anzahl--;
+                    localStorage.setItem("warenkorb", JSON.stringify(warenkorb));
+                } else {
+                    entferneProdukt("orangen");
+                    console.log("Hier ausgabe vom Warenkorb:");
+                    console.log(warenkorb);
+                    const orangenContainer = document.querySelector('[data-id="orangen"]');
+                    //Löschen vom warenkorbDiv
+                    warenkorbContainer.removeChild(orangenContainer);
+                }
+                location.reload(true);
+            });
+        } else if (produkt.id === "aepfel") {
+            const warenkorbDiv = document.createElement("div");
+            warenkorbDiv.setAttribute("data-id", "aepfel");
+            warenkorbDiv.classList.add("produkte_warenkorb");
+            const produktBild = document.createElement("img");
+            produktBild.src = "pictures/aepfel_ohne_preis.png.avif"
+            produktBild.alt = produkt.id;
+            warenkorbDiv.appendChild(produktBild);
+
+            const produktDetails = document.createElement("div");
+            produktDetails.classList.add("produkte_details");
+
+            const produktBeschreibung = document.createTextNode("Äpfel 1kg");
+            const produktPreis = document.createTextNode("Kosten: 2€");
+            const aufLager = document.createTextNode("Auf Lager: 500");
+
+            produktDetails.appendChild(produktBeschreibung);
+            produktDetails.appendChild(document.createElement("br"));
+            produktDetails.appendChild(produktPreis);
+            produktDetails.appendChild(document.createElement("br"));
+            produktDetails.appendChild(document.createElement("br"));
+            produktDetails.appendChild(aufLager);
+
+            const buttonMitMenue = document.createElement("div");
+            buttonMitMenue.classList.add("button_mit_menue");
+            const paraButton = document.createElement("p");
+            const buttonEntfernen = document.createElement("a");
+            buttonEntfernen.classList.add("button_entfernen");
+            buttonEntfernen.innerText = "Entfernen";
+            buttonEntfernen.setAttribute("href", "#");
+
+            const menue = document.createElement("input");
+            menue.setAttribute("type", "number");
+            menue.setAttribute("id", "menue");
+            menue.setAttribute("value", produkt.anzahl);
+            menue.setAttribute("max", produkt.anzahl);
+            menue.setAttribute("min", "0");
+            menue.setAttribute("pattern", "[0-9]*");
+            paraButton.appendChild(buttonEntfernen);
+            buttonMitMenue.appendChild(paraButton);
+            buttonMitMenue.appendChild(menue);
+
+            const gesamtPreis = document.createElement("p");
+            gesamtPreis.classList.add("gesamtbetrag");
+            const gesamtPreisText = document.createTextNode("Betrag Gesamt (inkl. MwSt): " + ((produkt.preis * produkt.anzahl).toFixed(2)));
+            gesamtPreis.appendChild(gesamtPreisText);
+
+
+            warenkorbDiv.appendChild(produktDetails);
+            warenkorbDiv.appendChild(gesamtPreis);
+            warenkorbDiv.appendChild(buttonMitMenue);
+            const warenkorbContainer = document.querySelector(".warenkorb-container");
+            warenkorbContainer.appendChild(warenkorbDiv);
+            buttonEntfernen.addEventListener("click", function (event) {
+                if (produkt.anzahl > 1) {
+                    produkt.anzahl--;
+                    localStorage.setItem("warenkorb", JSON.stringify(warenkorb));
+                } else {
+                    entferneProdukt("aepfel");
+                    console.log("Hier ausgabe vom Warenkorb:");
+                    console.log(warenkorb);
+                    const apfelContainer = document.querySelector('[data-id="aepfel"]');
+                    //Löschen vom warenkorbDiv
+                    warenkorbContainer.removeChild(apfelContainer);
+                }
+                location.reload(true);
+            });
+        }
+
+    }
+    const contentContainer = document.querySelector(".content");
+    const äußererContainer = document.createElement("div");
+    äußererContainer.classList.add("äußererContainer");
+    const kostenContainer = document.createElement("div");
+    kostenContainer.classList.add("kostenContainer");
+
+    const lieferkostenText = document.createElement("p");
+    lieferkostenText.classList.add("lieferkosten_text");
+    lieferkostenText.innerText = "Lieferkosten:";
+
+    const lieferkostenPreis = document.createElement("p");
+    lieferkostenPreis.classList.add("lieferkosten_preis");
+    lieferkostenPreis.innerText = "2.90€";
+
+    const preisZusammen = ermittleGesamtpreis() + 2.9;
+    const gesamtPreisText = document.createElement("p");
+    gesamtPreisText.classList.add("gesamtkosten_text")
+    gesamtPreisText.innerText = "Gesamtkosten (inkl. MwSt): ";
+    const gesamtPreis = document.createElement("p");
+    gesamtPreis.classList.add("gesamtpreis");
+    gesamtPreis.innerText = "" + preisZusammen.toFixed(2) + "€";
+    const buttonBestellungAbschließen = document.createElement("div");
+    const buttonBestellungAbschließenAnchor = document.createElement("a");
+    buttonBestellungAbschließenAnchor.classList.add("button_bestellung_abschließen");
+    buttonBestellungAbschließenAnchor.setAttribute("href", "bestellformular.html");
+    buttonBestellungAbschließenAnchor.innerText = "Kostenpflichtig bestellen";
+    console.log(preisZusammen);
+    localStorage.setItem("gesamtpreis", preisZusammen);
+
+    if (warenkorb.length === 0) {
+        const warenkorbLeer = document.createElement("p");
+        warenkorbLeer.classList.add("warenkorbLeer");
+        warenkorbLeer.innerText = "Der Warenkorb ist zur Zeit leer.";
+        contentContainer.appendChild(warenkorbLeer);
+    } else {
+        contentContainer.appendChild(äußererContainer);
+        äußererContainer.appendChild(kostenContainer);
+        kostenContainer.appendChild(lieferkostenText);
+        kostenContainer.appendChild(lieferkostenPreis);
+        kostenContainer.appendChild(gesamtPreisText);
+        kostenContainer.appendChild(gesamtPreis);
+        buttonBestellungAbschließen.appendChild(buttonBestellungAbschließenAnchor);
+        äußererContainer.appendChild(buttonBestellungAbschließen);
+    }
+}
+function ermittleGesamtpreis() {
+    var preis = 0;
+    const warenkorb = JSON.parse(localStorage.getItem("warenkorb")) || [];
+    console.log(warenkorb);
+    for (produkt of warenkorb) {
+        preis += produkt.preis * produkt.anzahl;
+    }
+    return preis;
+}
+function entferneProdukt(produktID) {
+    const warenkorb = JSON.parse(localStorage.getItem("warenkorb")) || [];
+    for (let i = 0; i < warenkorb.length; i++) {
+        if (warenkorb[i].id === produktID) {
+            warenkorb.splice(i, 1)// entferne das Element aus dem Array
+
+            break; // breche die Schleife ab, da das Element gefunden wurde
+        }
+    }
+    localStorage.setItem("warenkorb", JSON.stringify(warenkorb)); // speichere das aktualisierte Array im LocalStorage
+}
+
+// prüfe, ob der Benutzer sich auf der warenkorb.html-Seite befindet und erstelle das DIV
+document.addEventListener("DOMContentLoaded", function () {
+    // prüfe, ob der Benutzer sich auf der warenkorb.html-Seite befindet und erstelle das DIV
+    if (window.location.pathname.includes("/warenkorb.html")) {
+        const warenkorb = JSON.parse(localStorage.getItem("warenkorb")) || [];
+        createWarenkorbDiv(warenkorb);
+    }
+});
diff --git a/public/js/formchecker.js b/public/js/formchecker.js
deleted file mode 100644
index 83d4066..0000000
--- a/public/js/formchecker.js
+++ /dev/null
@@ -1,17 +0,0 @@
-function checkform() {
-    let vorname = document.getElementById('vorname').value;
-    let name = document.getElementById('name').value;
-    let straße = document.getElementById('straße').value;
-    let hausnummer = document.getElementById('hausnummer').value;
-    let plz = document.getElementById('plz').value;
-    let wohnort = document.getElementById('wohnort').value;
-    let email = document.getElementById('email').value;
-
-    if(/[a-zA-Z]{2,}/.test(vorname) === false) alert('vorname falsch');
-    if(/[a-zA-Z]{2,}/.test(name) === false) alert('name falsch');
-    if(/[a-zA-Z]{2,}/.test(straße) === false) alert('straße falsch');
-    if(/[0-9]{1,}/.test(hausnummer) === false) alert('hausnummer falsch');
-    if(/[0-9]{4,5}/.test(plz) === false) alert('plz falsch');
-    if(/[a-zA-Z]{2,}/.test(wohnort) === false) alert('wohnort falsch');
-    if(/^([a-zA-Z0-9]+([-_\.]?[a-zA-Z0-9])+@[a-zA-Z0-9]+([-_\.]?[a-zA-Z0-9])+\.[a-z]{2,4}){0,}$/.test(email) === false) alert('email falsch');
-}
\ No newline at end of file
diff --git a/public/kontakt.html b/public/kontakt.html
index a11b95d..b0d19ac 100644
--- a/public/kontakt.html
+++ b/public/kontakt.html
@@ -5,23 +5,51 @@
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Beschreibung der Seite</title>
-    <link rel="stylesheet" href="css/desktop.css">
+    <style>
+        @import 'css/mobile.css' (max-width: 480px);
+        @import 'css/desktop.css' (min-width: 480px);
+    </style>
 </head>
 
 <body class="kontakt">
     <header>
-        <div class="header_logo">
-            <a href="index.html">
+        <nav>
+            <div class="navbar-mobile">
+                <div class="nav-container">
+                  <input class="checkbox" type="checkbox" name="" id="" />
+                    <div class="hamburger-lines">
+                        <span class="line line1"></span>
+                        <span class="line line2"></span>
+                        <span class="line line3"></span>
+                    </div>
+                    <nav class="navbar menu-items">
+                        <a href="ueber_uns.html">Über uns</a>
+                        <a href="produkte.html">Produkte</a>
+                        <a href="warenkorb.html">Warenkorb</a>
+                        <a href="kontakt.html">Kontakt</a>
+                        <a href="impressum.html">Impressum</a>
+                        <a href="datenschutz.html">Datenschutz</a>
+                    </nav>
+                </div>
+            </div>
+        </nav>
+        <nav> 
+            <div class="header_logo">
+                <a href="index.html">
                 <img src="pictures/logo_secondharvest_transparent.png" width="200" alt="Second Harvest Logo"></a>
-        </div>
-        <h1>Second Harvest</h1>
-        <p>Gib Lebensmitteln eine zweite Chance</p>
-        <nav class="navbar" style="--items: 4;">
-            <a href="ueber_uns.html">Über uns</a>
-            <a href="produkte.html">Produkte</a>
-
-            <a href="warenkorb.html">Warenkorb</a>
-            <a href="kontakt.html">Kontakt</a>
+            </div>
+            <div class="header_desktop">
+                <h1>Second Harvest</h1>
+                <p>Gib Lebensmitteln eine zweite Chance</p>
+            </div>
+            <div class="header_desktop">
+                <nav class="navbar-desktop" style="--items: 4;">
+                    <a href="ueber_uns.html">Über uns</a>
+                    <a href="produkte.html">Produkte</a>
+                    <a href="warenkorb.html">Warenkorb</a>
+                    <a href="kontakt.html">Kontakt</a>
+                </nav>
+            </div>
         </nav>
     </header>
 
@@ -40,7 +68,7 @@
 </div>
 
     <footer>
-        <nav class="navbar" style="--items: 2;">
+        <nav class="navbar-desktop" style="--items: 2;">
             <a href="impressum.html">Impressum</a>
             <a href="datenschutz.html">Datenschutz</a>
         </nav>
diff --git a/public/pictures/.DS_Store b/public/pictures/.DS_Store
new file mode 100644
index 0000000..5008ddf
Binary files /dev/null and b/public/pictures/.DS_Store differ
diff --git a/public/pictures/aepfel.png b/public/pictures/aepfel.png
new file mode 100644
index 0000000..0084582
Binary files /dev/null and b/public/pictures/aepfel.png differ
diff --git a/public/pictures/aepfel_ohne_preis.png.avif b/public/pictures/aepfel_ohne_preis.png.avif
new file mode 100644
index 0000000..3423ef2
Binary files /dev/null and b/public/pictures/aepfel_ohne_preis.png.avif differ
diff --git a/public/pictures/kiwi.png b/public/pictures/kiwi.png
new file mode 100644
index 0000000..ed47fc6
Binary files /dev/null and b/public/pictures/kiwi.png differ
diff --git a/public/pictures/kiwi_ohne_preis.png.avif b/public/pictures/kiwi_ohne_preis.png.avif
new file mode 100644
index 0000000..abcc5aa
Binary files /dev/null and b/public/pictures/kiwi_ohne_preis.png.avif differ
diff --git a/public/pictures/mobile_header.png b/public/pictures/mobile_header.png
new file mode 100644
index 0000000..7c70aa3
Binary files /dev/null and b/public/pictures/mobile_header.png differ
diff --git a/public/pictures/orangen.png b/public/pictures/orangen.png
new file mode 100644
index 0000000..798e4a2
Binary files /dev/null and b/public/pictures/orangen.png differ
diff --git a/public/pictures/orangen_ohne_preis.png.avif b/public/pictures/orangen_ohne_preis.png.avif
new file mode 100644
index 0000000..9681972
Binary files /dev/null and b/public/pictures/orangen_ohne_preis.png.avif differ
diff --git a/public/produkte.html b/public/produkte.html
index c9ab6bf..f086226 100644
--- a/public/produkte.html
+++ b/public/produkte.html
@@ -5,31 +5,61 @@
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Second Harvest</title>
-    <link rel="stylesheet" href="css/desktop.css">
+    <style>
+      @import 'css/mobile.css' (max-width: 480px);
+      @import 'css/desktop.css' (min-width: 480px);
+  </style>
+    <script src="javascript/warenkorb.js"></script>
 </head>
 
 <body>
-    <header>
+  <header>
+    <nav>
+        <div class="navbar-mobile">
+            <div class="nav-container">
+              <input class="checkbox" type="checkbox" name="" id="" />
+                <div class="hamburger-lines">
+                    <span class="line line1"></span>
+                    <span class="line line2"></span>
+                    <span class="line line3"></span>
+                </div>
+                <nav class="navbar menu-items">
+                  <a href="ueber_uns.html">Über uns</a>
+                  <a href="produkte.html">Produkte</a>
+                  <a href="warenkorb.html">Warenkorb</a>
+                  <a href="kontakt.html">Kontakt</a>
+                  <a href="impressum.html">Impressum</a>
+                  <a href="datenschutz.html">Datenschutz</a>
+              </nav>
+            </div>
+        </div>
+    </nav>
+    <nav> 
         <div class="header_logo">
             <a href="index.html">
-                <img src="pictures/logo_secondharvest_transparent.png" width="200" alt="Second Harvest Logo"></a>
+            <img src="pictures/logo_secondharvest_transparent.png" width="200" alt="Second Harvest Logo"></a>
         </div>
-        <h1>Second Harvest</h1>
-        <p>Gib Lebensmitteln eine zweite Chance</p>
-        <nav class="navbar" style="--items: 4;">
-            <a href="ueber_uns.html">Über uns</a>
-            <a href="produkte.html">Produkte</a>
-            <a href="warenkorb.html">Warenkorb</a>
-            <a href="kontakt.html">Kontakt</a>
-        </nav>
-    </header>
+        <div class="header_desktop">
+            <h1>Second Harvest</h1>
+            <p>Gib Lebensmitteln eine zweite Chance</p>
+        </div>
+        <div class="header_desktop">
+            <nav class="navbar-desktop" style="--items: 4;">
+                <a href="ueber_uns.html">Über uns</a>
+                <a href="produkte.html">Produkte</a>
+                <a href="warenkorb.html">Warenkorb</a>
+                <a href="kontakt.html">Kontakt</a>
+            </nav>
+        </div>
+    </nav>
+</header>
 
     <div class="content">
     <h1> Produkte</h1>
     </div>
     <div class="parent">
         <div class="produkte">
-          <img src="pictures/karotten.png" width = "300" height="300" alt="Karotten">
+          <img src="pictures/karotten.png" width="300" height="300" alt="Karotten" data-id="karotte">
             <div class ="produktbottom">
                <img src ="pictures/FoodAmpel_gelb.png" width = "50" height="50" alt="FoodAmpel gelb">
                 <select name="quantity">
@@ -37,11 +67,13 @@
                   <option value="2">2 Stück</option>
                   <option value="3">3 Stück</option>
                 </select>
+                <a class="button_hinzufuegen" href="#" id="button1"></a>
+                <div id="notification"></div>
             </div>
           </div>
 
           <div class="produkte">
-            <img src="pictures/sellerie.png" width = "300" height="300" alt="Sellerie">
+            <img src="pictures/sellerie.png" width = "300" height="300" alt="Sellerie" data-id="sellerie">
             <div class ="produktbottom">
               <img src ="pictures/FoodAmpel_gelb.png" width = "50" height="50" alt="FoodAmpel gelb">
               <select name="quantity" >
@@ -49,11 +81,12 @@
                 <option value="2">2 Stück</option>
                 <option value="3">3 Stück</option>
               </select>
+              <a class="button_hinzufuegen" href="#" id="button2"></a>
             </div>
           </div>
         
           <div class="produkte">
-            <img src="pictures/birnen.png" width = "300" height= "300" alt="Birnen">
+            <img src="pictures/birnen.png" width = "300" height= "300" alt="Birnen" data-id="birnen">
             <div class ="produktbottom">
               <img src ="pictures/FoodAmpel_rot.png" width = "50" height="50" alt="FoodAmpel gelb">
               <select name="quantity">
@@ -61,11 +94,12 @@
                 <option value="2">2 Stück</option>
                 <option value="3">3 Stück</option>
               </select>
+              <a class="button_hinzufuegen" href="#" id="button3"></a>
             </div>
           </div>
 
           <div class="produkte">
-            <img src="pictures/birnen.png" width = "300" height="300" alt="Kiwi">
+            <img src="pictures/kiwi.png" width = "300" height="300" alt="Kiwi" data-id="kiwi">
             <div class ="produktbottom">
               <img src ="pictures/FoodAmpel_gruen.png" width = "50" height="50" alt="FoodAmpel gelb">
               <select name="quantity" >
@@ -73,11 +107,12 @@
                 <option value="2">2 Stück</option>
                 <option value="3">3 Stück</option>
               </select>
+              <a class="button_hinzufuegen" href="#" id="button4"></a>
             </div>
           </div>
 
           <div class="produkte">
-            <img src="pictures/birnen.png" width = "300" height="300" alt="Orangen">
+            <img src="pictures/orangen.png" width = "300" height="300" alt="Orangen" data-id="orangen">
             <div class ="produktbottom">
               <img src ="pictures/FoodAmpel_gelb.png" width = "50" height="50" alt="FoodAmpel gelb">
               <select name="quantity">
@@ -85,11 +120,12 @@
                 <option value="2">2 Stück</option>
                 <option value="3">3 Stück</option>
               </select>
+              <a class="button_hinzufuegen" href="#" id="button5"></a>
             </div>
           </div>
 
           <div class="produkte">
-            <img src="pictures/birnen.png" width = "300" height="300" alt="Äpfel">
+            <img src="pictures/aepfel.png" width = "300" height="300" alt="Äpfel" data-id="aepfel">
             <div class ="produktbottom">
               <img src ="pictures/FoodAmpel_gelb.png" width ="50" height="50" alt="FoodAmpel gelb">
               <select name="quantity">
@@ -97,12 +133,13 @@
                 <option value="2">2 Stück</option>
                 <option value="3">3 Stück</option>
               </select>
+              <a class="button_hinzufuegen" href="#" id="button6"></a>
             </div>
           </div>    
   </div>
 
     <footer>
-        <nav class="navbar" style="--items: 2;">
+        <nav class="navbar-desktop" style="--items: 2;">
             <a href="impressum.html">Impressum</a>
             <a href="datenschutz.html">Datenschutz</a>
         </nav>
diff --git a/public/ueber_uns.html b/public/ueber_uns.html
index 9a6e043..8545c8c 100644
--- a/public/ueber_uns.html
+++ b/public/ueber_uns.html
@@ -5,23 +5,51 @@
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Beschreibung der Seite</title>
-    <link rel="stylesheet" href="css/desktop.css">
+    <style>
+        @import 'css/mobile.css' (max-width: 480px);
+        @import 'css/desktop.css' (min-width: 480px);
+    </style>
 </head>
 
 <body class="ueberuns">
     <header>
-        <div class="header_logo">
-            <a href="index.html">
+        <nav>
+            <div class="navbar-mobile">
+                <div class="nav-container">
+                  <input class="checkbox" type="checkbox" name="" id="" />
+                    <div class="hamburger-lines">
+                        <span class="line line1"></span>
+                        <span class="line line2"></span>
+                        <span class="line line3"></span>
+                    </div>
+                    <nav class="navbar menu-items">
+                        <a href="ueber_uns.html">Über uns</a>
+                        <a href="produkte.html">Produkte</a>
+                        <a href="warenkorb.html">Warenkorb</a>
+                        <a href="kontakt.html">Kontakt</a>
+                        <a href="impressum.html">Impressum</a>
+                        <a href="datenschutz.html">Datenschutz</a>
+                    </nav>
+                </div>
+            </div>
+        </nav>
+        <nav> 
+            <div class="header_logo">
+                <a href="index.html">
                 <img src="pictures/logo_secondharvest_transparent.png" width="200" alt="Second Harvest Logo"></a>
-        </div>
-        <h1>Second Harvest</h1>
-        <p>Gib Lebensmitteln eine zweite Chance</p>
-        <nav class="navbar" style="--items: 4;">
-            <a href="ueber_uns.html">Über uns</a>
-            <a href="produkte.html">Produkte</a>
-
-            <a href="warenkorb.html">Warenkorb</a>
-            <a href="kontakt.html">Kontakt</a>
+            </div>
+            <div class="header_desktop">
+                <h1>Second Harvest</h1>
+                <p>Gib Lebensmitteln eine zweite Chance</p>
+            </div>
+            <div class="header_desktop">
+                <nav class="navbar-desktop" style="--items: 4;">
+                    <a href="ueber_uns.html">Über uns</a>
+                    <a href="produkte.html">Produkte</a>
+                    <a href="warenkorb.html">Warenkorb</a>
+                    <a href="kontakt.html">Kontakt</a>
+                </nav>
+            </div>
         </nav>
     </header>
 
@@ -50,7 +78,7 @@
 
 
     <footer>
-        <nav class="navbar" style="--items: 2;">
+        <nav class="navbar-desktop" style="--items: 2;">
             <a href="impressum.html">Impressum</a>
             <a href="datenschutz.html">Datenschutz</a>
         </nav>
diff --git a/public/warenkorb.html b/public/warenkorb.html
index 48f4e61..deecc87 100644
--- a/public/warenkorb.html
+++ b/public/warenkorb.html
@@ -5,29 +5,58 @@
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Second Harvest</title>
-    <link rel="stylesheet" href="css/desktop.css">
+    <style>
+        @import 'css/mobile.css' (max-width: 480px);
+        @import 'css/desktop.css' (min-width: 480px);
+    </style>
+    <script src="javascript/warenkorb.js"></script>
 </head>
 
 <body>
     <header>
-        <div class="header_logo">
-            <a href="index.html">
+        <nav>
+            <div class="navbar-mobile">
+                <div class="nav-container">
+                  <input class="checkbox" type="checkbox" name="" id="" />
+                    <div class="hamburger-lines">
+                        <span class="line line1"></span>
+                        <span class="line line2"></span>
+                        <span class="line line3"></span>
+                    </div>
+                    <nav class="navbar menu-items">
+                        <a href="ueber_uns.html">Über uns</a>
+                        <a href="produkte.html">Produkte</a>
+                        <a href="warenkorb.html">Warenkorb</a>
+                        <a href="kontakt.html">Kontakt</a>
+                        <a href="impressum.html">Impressum</a>
+                        <a href="datenschutz.html">Datenschutz</a>
+                    </nav>
+                </div>
+            </div>
+        </nav>
+        <nav> 
+            <div class="header_logo">
+                <a href="index.html">
                 <img src="pictures/logo_secondharvest_transparent.png" width="200" alt="Second Harvest Logo"></a>
-        </div>
-        <h1>Second Harvest</h1>
-        <p>Gib Lebensmitteln eine zweite Chance</p>
-        <nav class="navbar" style="--items: 4;">
-            <a href="ueber_uns.html">Über uns</a>
-            <a href="produkte.html">Produkte</a>
-
-            <a href="warenkorb.html">Warenkorb</a>
-            <a href="kontakt.html">Kontakt</a>
+            </div>
+            <div class="header_desktop">
+                <h1>Second Harvest</h1>
+                <p>Gib Lebensmitteln eine zweite Chance</p>
+            </div>
+            <div class="header_desktop">
+                <nav class="navbar-desktop" style="--items: 4;">
+                    <a href="ueber_uns.html">Über uns</a>
+                    <a href="produkte.html">Produkte</a>
+                    <a href="warenkorb.html">Warenkorb</a>
+                    <a href="kontakt.html">Kontakt</a>
+                </nav>
+            </div>
         </nav>
     </header>
 
     <div class="content">
         <h1>Warenkorb</h1>
-        <div class="produkte_warenkorb">
+        <!-- <div class="produkte_warenkorb">
             <img src="pictures/karotte_ohne_preis.webp" alt="karotten">
             <div class="produkte_details">
                 <p><strong>Karotten 1kg</br>Kosten: 0,95€</strong></p>
@@ -39,18 +68,15 @@
                 <input type="number" id="menue" min="0" pattern="[0-9]*">   
             </div>
             <p class="gesamtbetrag"><strong>Betrag Gesamt (inkl. MwSt.) : xx€</strong></p>
-        </div>
+        </div> -->
+        <div class="warenkorb-container"></div>
+        <!-- <p class="lieferkosten">Lieferkosten +2.90€</br>Gesamtkosten (inkl. MwSt.):</p> -->
 
-        <div class="produkte_warenkorb">
-        </div>
-
-        <div class="produkte_warenkorb">
-        </div>
 
     </div>
 
     <footer>
-        <nav class="navbar" style="--items: 2;">
+        <nav class="navbar-desktop" style="--items: 2;">
             <a href="impressum.html">Impressum</a>
             <a href="datenschutz.html">Datenschutz</a>
         </nav>
