Regex angepasst

public/bestellformular.html

@@ -124,13 +124,13 @@
         <p id="gesamtkosten"><strong>Die Gesamtkosten (inkl. MwSt.)</br>belaufen sich auf: 5,30€</strong>
 
         <p>
-            <input type="checkbox" class="checkbox_ausrichtung">
+            <input id="barzahlung_box" type="checkbox" class="checkbox_ausrichtung">
             <label for="checkbox_barzahlung" class="checkboxen">Ich akzeptiere die Barzahlung und habe
                 den</br>Rechnungsbetrag bei
                 Lieferung verfügbar.</label>
         </p>
         <p>
-            <input type="checkbox" class="checkbox_ausrichtung">
+            <input id="datenschutz_box" type="checkbox" class="checkbox_ausrichtung">
             <label for="checkbox_datenschutzerklärung" class="checkboxen">Ich akzeptiere die Bestimmungen der</label>
             <a href="datenschutz.html" class="checkboxen">Datenschutzerklärung.</a>
         </p>

public/css/desktop.css

@@ -147,6 +147,11 @@
         text-align: center;
     }
 
+    .content h3{
+        color: black;
+        margin-bottom: 0.2em;
+    }
+    
     .content a {
         margin-left: 0em;
     }

public/css/mobile.css

@@ -81,7 +81,7 @@
     .navbar-mobile {
         display:grid;
         grid-template-columns: 60px auto auto;
-        grid-template-rows: 60px;
+        grid-template-rows: 65px;
         
     }
     .navbar-mobile .nav-container a {
@@ -160,6 +160,8 @@
         padding-left: 50px;
         transition: transform 0.5s ease-in-out;
         text-align: left;
+        position: relative;
+        z-index: 9999;
     }
   
     .nav-container input[type="checkbox"]:checked ~ .menu-items {
@@ -233,7 +235,7 @@
     }
     
     .content :not(h1, strong, a) {
-        margin-left: 3.5em;
+        margin-left: 0em;
         color: #606060;
     }
     
@@ -249,6 +251,11 @@
         text-align: center;
     }
 
+    .content h3{
+        color: black;
+        margin-bottom: 0.2em;
+    }
+    
     .content a {
         margin-left: 0em;
     }
@@ -300,7 +307,7 @@
     #wohnort,
     #email {
         border: none;
-        width: 600px;
+        width: auto;
     }
     
     .bestellung_tabelle {
@@ -312,6 +319,7 @@
         margin-left: 50px;
         border: thin solid #606060;
         border-collapse: collapse;
+        width: 80%;
     }
     
     .bestellung_tabelle th {
@@ -320,7 +328,7 @@
     
     .bestellung_tabelle td {
         border: thin solid #606060;
-        width: 600px;
+        width: auto;
     }
     
     .bestellung_tabelle tr {
@@ -414,40 +422,50 @@
         position: relative;
     }
     
-    .produkte_warenkorb {
+    .content .produkte_warenkorb {
         display: grid;
         grid-template-columns: 1fr 1fr;
         grid-template-rows: auto 1fr;
         border: thin solid black;
-        margin-left: -55px;
+        margin-left: 4em;
         margin-top: 20px;
         align-items: center;
         justify-items: left;
+        position: relative;
+        
     }
     
     .content .produkte_warenkorb .bild_mobil img {
-        margin-left: -50px;
         align-items: center;
     }
     
     .content .produkte_details {      
-        display: block;
-        margin-left: 0;
+        display: flex;
+        flex-direction: column;
         font-size: 0.8em;
-        justify-content: left;
+        margin-top: -25px;
+        justify-content: space-between;
+        width: 95%;
     }
 
-    .content .produkte_details p{
-        margin-left: 0;
+    .content .produkte_details p {
+        display: inline-block;
     }
 
+    .content .produkte_warenkorb .produkte_details .eingabefeld_entfernen {
+        align-self: flex-end;
+        margin-top: -30px;
+        
+    }
+    
+    
     .button_mit_menue {
         display: flex;
         align-items: center;
     }
     
     .button_mit_menue p{
-        margin-left: -45px;
+       margin-left: 10px;
     }
     
     #menue1,
@@ -461,6 +479,8 @@
         margin-left: 10px;      
     }
 
+
+    
     .button_entfernen {
         background-color: #ebebeb;
         border: thin solid black;
@@ -533,8 +553,8 @@
         position: relative;
         bottom: 0;
         width: 400px;
-        padding-left: 50px;
-        margin-top: 22.5px;
+        padding-left: 30px;
+        margin-top: 120px;
         margin-left: auto;
         margin-bottom: 22.5px;
         display: grid;
@@ -595,9 +615,18 @@
     }
 
     .content .mobile_ansicht{
+        position: relative;
+        z-index: 0;
         margin-left: -55px;
     }
     
+    
+    #fehlerbox{
+        text-align: center;
+        color: red;
+        display: none;
+    }
+
     .desktop_ansicht{
         display: none;
     }

public/datenschutz.html

@@ -80,13 +80,13 @@
                 </p>
             <p>Stand: 6. April 2023</p>
             <h3>Verantwortlicher</h3>
-                <ul>
-                    WEB A4 -Team</br>
+            <p>
+            WEB A4 -Team</br>
                     Paul-Wittsack-Straße 10</br>
                     68163 Mannheim</br>
                     E-Mail-Adresse:</br>
                     info@secondharvest.com</br>
-                </ul>
+                </p>
             <h3>Übersicht der Verarbeitungen</h3>
                 <p>Die nachfolgende Übersicht fasst die Arten der verarbeiteten Daten und die 
                     Zwecke ihrer Verarbeitung zusammen und verweist auf die betroffenen Personen.

public/includes/head.php

@@ -1,12 +0,0 @@
-<!doctype html>
-<html lang="de">
-
-<head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title><?php $websitename; ?></title>
-    <style>
-        @import 'css/mobile.css' (max-width: 800px);
-        @import 'css/desktop.css' (min-width: 801px);
-    </style>
-</head>

public/includes/header.php

@@ -1,51 +0,0 @@
-
-<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>
-                    <div 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>
-                    </div>
-                </div>
-                <div id="header-mobile-farbe">
-                    <span class="header-mobile-text">
-                        <h1>Second Harvest</h1>
-                        <p>Gib Lebensmitteln eine zweite Chance</p>
-                    </span>
-                </div>
-                <div id="header-mobile-farbe" class="header-mobile-logo">
-                    <a href="index.html">
-                    <img src="pictures/logo_secondharvest_transparent.png" width="120" alt="Second Harvest Logo"></a>
-                </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>
-            <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>

public/index.html

@@ -0,0 +1,116 @@
+<!doctype html>
+<html lang="de">
+
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Second Harvest</title>
+    <style>
+        @import 'css/mobile.css' (max-width: 800px);
+        @import 'css/desktop.css' (min-width: 801px);
+    </style>
+</head>
+<body class="index">
+    <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>
+                    <div 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>
+                    </div>
+                </div>
+                <div id="header-mobile-farbe">
+                    <span class="header-mobile-text">
+                        <h1>Second Harvest</h1>
+                        <p>Gib Lebensmitteln eine zweite Chance</p>
+                    </span>
+                </div>
+                <div id="header-mobile-farbe" class="header-mobile-logo">
+                    <a href="index.html">
+                    <img src="pictures/logo_secondharvest_transparent.png" width="120" alt="Second Harvest Logo"></a>
+                </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>
+            <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>Herzlich Willkommen</h1>
+        <p>Wir freuen uns über Deinen Besuch.</p>
+        <p>Es ist schön zu sehen, dass immer mehr Menschen sich bewusst entscheiden, keine Lebensmittel zu
+            verschwenden.</p>
+        <br />
+        <p>Alle Produkte auf unserer Seite sind mit drei Fähnchen gekennzeichnet.</p>
+
+            <table>
+                <tr>
+                    <td><img src="pictures/food_ampel_rot.png"></td>
+                    <td>muss sofort verarbeitet werden</td>
+                </tr>
+                <tr>
+                    <td><img src="pictures/food_ampel_gelb.png"></td>
+                    <td>kann ein paar Tage liegen</td>
+                </tr>
+                <tr>
+                    <td><img src="pictures/food_ampel_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>
+            ausgeliefert. <br />Bestellungen nach 10, liefern wir am nächsten Tag aus.
+        </p>
+        </br>
+        <p id="aktuelle_auswahl">Aktuelle Auswahl aus unserem Angebot:</p>
+
+        <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 class= "button_produkte" href="produkte.html">zu den Produkten</a>
+        </p>
+        <h2 id="greeting-desktop">Viel Spaß bei Deinem Einkauf. Dein Second Harvest Team.</h2>
+        <h2 id="greeting-mobile">Viel Spaß bei Deinem Einkauf.</h2>
+    </div>
+
+    <footer>
+        <nav class="navbar-desktop" style="--items: 2;">
+            <a href="impressum.html">Impressum</a>
+            <a href="datenschutz.html">Datenschutz</a>
+        </nav>
+        <div id="balken"></div>
+    </footer>
+</body>
+
+</html>

public/index.php

@@ -1,61 +0,0 @@
-<?php
-$websitename = "Second Harvest - Startseite";
-include_once("includes/head.php");
-?>
-<body class="index">
-<?php
-include_once("includes/header.php");
-?>  
-
-    <div class="content">
-        <h1>Herzlich Willkommen</h1>
-        <p>Wir freuen uns über Deinen Besuch.</p>
-        <p>Es ist schön zu sehen, dass immer mehr Menschen sich bewusst entscheiden, keine Lebensmittel zu
-            verschwenden.</p>
-        <br />
-        <p>Alle Produkte auf unserer Seite sind mit drei Fähnchen gekennzeichnet.</p>
-
-            <table>
-                <tr>
-                    <td><img src="pictures/food_ampel_rot.png"></td>
-                    <td>muss sofort verarbeitet werden</td>
-                </tr>
-                <tr>
-                    <td><img src="pictures/food_ampel_gelb.png"></td>
-                    <td>kann ein paar Tage liegen</td>
-                </tr>
-                <tr>
-                    <td><img src="pictures/food_ampel_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>
-            ausgeliefert. <br />Bestellungen nach 10, liefern wir am nächsten Tag aus.
-        </p>
-        </br>
-        <p id="aktuelle_auswahl">Aktuelle Auswahl aus unserem Angebot:</p>
-
-        <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 class= "button_produkte" href="produkte.html">zu den Produkten</a>
-        </p>
-        <h2 id="greeting-desktop">Viel Spaß bei Deinem Einkauf. Dein Second Harvest Team.</h2>
-        <h2 id="greeting-mobile">Viel Spaß bei Deinem Einkauf.</h2>
-    </div>
-
-    <footer>
-        <nav class="navbar-desktop" style="--items: 2;">
-            <a href="impressum.html">Impressum</a>
-            <a href="datenschutz.html">Datenschutz</a>
-        </nav>
-        <div id="balken"></div>
-    </footer>
-</body>
-
-</html>

public/javascript/formchecker.js

@@ -15,22 +15,28 @@ function checkform(event) {
 
     fehlerbox.innerHTML = 'Fehler: <br>';
 
-    if (/^[a-zA-Z]{2,}$/.test(anrede) === false) fehlerbox.innerHTML += 'Anrede: mindestens zwei Buchstaben <br>';
-    if (/^[a-zA-Z]{2,}$/.test(vorname) === false) fehlerbox.innerHTML += 'Vorname: mindestens zwei Buchstaben <br>';
-    if (/^[a-zA-Z]{2,}$/.test(name) === false) fehlerbox.innerHTML +=  'Name: mindestens zwei Buchstaben <br>';
-    if (/[a-zA-Z0-9]{2,}/.test(straße) === false) fehlerbox.innerHTML += 'Straße: mindestens zwei Zeichen <br>';
-    if (/[0-9]{1,}/.test(hausnummer) === false) fehlerbox.innerHTML += 'Hausnummer: mindestens eine Zahl <br>';
-    if (/[0-9]{5}/.test(plz) === false) fehlerbox.innerHTML += 'Postleitzahl: gültige Postleitzahl eingeben, z.B 66265 (fünf Zahlen) <br>';
-    if (/^[a-zA-ZÄäÜüÖö]{2,}$/.test(wohnort) === false) fehlerbox.innerHTML += 'Wohnort: mindestens zwei Buchstaben <br>';
-    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) fehlerbox.innerHTML += 'EMail: bitte nach dem Muster "email@beispiel.de" <br>';
+    if(!anrede || /^[A-Z][a-z]{1,}$/.test(anrede) === false) fehlerbox.innerHTML += 'Bitte teilen Sie uns Ihre Anrede mit <br>';
+    if(!vorname || /^[A-ZÄÜÖ][a-zäüöß]{1,}(?:-[A-ZÄÜÖ][a-zäüöß]+)?$/.test(vorname) === false) fehlerbox.innerHTML += 'Vorname: mindestens zwei Buchstaben <br>';
+    if(!name || /^[A-ZÄÜÖ][a-zäüöß]{1,}(?:-[A-ZÄÜÖ][a-zäüöß]+)?(?:\s[a-zA-ZÄÜÖäüöß]+)?$/.test(name) === false) fehlerbox.innerHTML +=  'Name: mindestens zwei Buchstaben <br>';
+    if(!straße || /^[A-ZÄÖÜ][a-zäöüß]+(?:-[A-ZÄÖÜ][a-zäöüß]+)*$/.test(straße) === false) fehlerbox.innerHTML += 'Straße: mindestens zwei Zeichen <br>';
+    if(!hausnummer || /[0-9]{1,}/.test(hausnummer) === false) fehlerbox.innerHTML += 'Hausnummer: mindestens eine Zahl <br>';
+    if(!plz || Number(plz) < 01001 || /^[0-9]{5}$/.test(plz) === false) fehlerbox.innerHTML += 'Postleitzahl: gültige Postleitzahl fünf Zahlen bspw. 66265 <br>';
+    if(!wohnort || /^[A-Z][a-z]*(?:[- ][A-Z][a-z]*)*$/.test(wohnort) === false) fehlerbox.innerHTML += 'Wohnort: mindestens zwei Buchstaben <br>';
+    if(!email || /^([a-zA-Z0-9]+([-_\.]?[a-zA-Z0-9])+@[a-zA-Z0-9]+([-_\.]?[a-zA-Z0-9])+\.[a-z]{2,4}){0,}$/.test(email) === false) fehlerbox.innerHTML += 'EMail: bitte nach dem Muster "email@beispiel.de" <br>';
+
+    if(barzahlbox.checked === false) fehlerbox.innerHTML += 'Bitte akzeptieren Sie die Barzahlung <br>';
+    if(datenschutzbox.checked === false) fehlerbox.innerHTML += 'Bitte akzeptieren Sie die Datenschutzerklärung <br>';
 
      if(fehlerbox.innerHTML.length > 12) {
         event.preventDefault();
-        let fehlerboxstyle = document.getElementById('fehlerbox');
         fehlerbox.style = 'display: block;'
     }
+
 }
 
 const fehlerbox = document.getElementById('fehlerbox');
 const bestellbutton = document.getElementById('bestellbutton');
+const barzahlbox = document.getElementById('barzahlung_box');
+const datenschutzbox = document.getElementById('datenschutz_box');
+
 bestellbutton.addEventListener('click', checkform, false);

public/javascript/warenkorb.js

@@ -62,6 +62,7 @@ window.addEventListener('DOMContentLoaded', function () {
         berechnePreise();
 
     }
+
     function berechnePreise() {
         for (let i = 0; i < standardWerte.length; i++) {
             let preisID = 'gesamtbetrag' + (i + 1);
@@ -107,12 +108,68 @@ window.addEventListener('DOMContentLoaded', function () {
         else if ((/^[0-9]{1,}$/.test(feld1) === false) || (/^[0-9]{1,}$/.test(feld2) === false) || (/^[0-9]{1,}$/.test(feld3) === false)
             || (/^[0-9]{1,}$/.test(feld4) === false) || (/^[0-9]{1,}$/.test(feld5) === false) || (/^[0-9]{1,}$/.test(feld6) === false)) {
             event.preventDefault();
-            zeigeHinweisfenster("Es stehten keine (gültigen) Nummern in den Feldern.   [gültig = positive Zahlen 0-9]")
+            zeigeHinweisfenster("Es stehen keine (gültigen) Zahlen in den Feldern. [gültig = positive Zahlen 0-9]");
         }
         else {
             window.location.href = event.target.href;
             // zeigeHinweisfenster("Feld ist nicht leer");
         }
     }
-});
 
+    var menue1 = document.getElementById('menue1');
+    var menue2 = document.getElementById('menue2');
+    var menue3 = document.getElementById('menue3');
+    var gesamtbetrag1 = document.getElementById('gesamtbetrag1');
+    var gesamtbetrag2 = document.getElementById('gesamtbetrag2');
+    var gesamtbetrag3 = document.getElementById('gesamtbetrag3');
+    var gesamtpreis = document.getElementById('gesamtpreis');
+
+    // Funktion zum Aktualisieren des Gesamtbetrags für Produkt 1
+    function updateGesamtbetrag1() {
+        var menueValue = menue1.value;
+        var kosten = 0.95;
+        var gesamtbetrag = kosten * menueValue;
+        gesamtbetrag1.innerHTML = "Betrag Gesamt (inkl. MwSt.): " + gesamtbetrag.toFixed(2) + "€";
+        updateGesamtpreis();
+    }
+
+    // Funktion zum Aktualisieren des Gesamtbetrags für Produkt 2
+    function updateGesamtbetrag2() {
+        var menueValue = menue2.value;
+        var kosten = 2;
+        var gesamtbetrag = kosten * menueValue;
+        gesamtbetrag2.innerHTML = "Betrag Gesamt (inkl. MwSt.): " + gesamtbetrag.toFixed(2) + "€";
+        updateGesamtpreis();
+    }
+
+    // Funktion zum Aktualisieren des Gesamtbetrags für Produkt 3
+    function updateGesamtbetrag3() {
+        var menueValue = menue3.value;
+        var kosten = 1.1;
+        var gesamtbetrag = kosten * menueValue;
+        gesamtbetrag3.innerHTML = "Betrag Gesamt (inkl. MwSt.): " + gesamtbetrag.toFixed(2) + "€";
+        updateGesamtpreis();
+    }
+
+    // Funktion zum Aktualisieren des Gesamtpreises
+    function updateGesamtpreis() {
+        var menueValue1 = menue1.value;
+        var menueValue2 = menue2.value;
+        var menueValue3 = menue3.value;
+        var kosten1 = 0.95;
+        var kosten2 = 2;
+        var kosten3 = 1.1;
+        var gesamtpreisValue = (kosten1 * menueValue1) + (kosten2 * menueValue2) + (kosten3 * menueValue3) + 2.9;
+        gesamtpreis.innerHTML = gesamtpreisValue.toFixed(2) + "€";
+    }
+
+    // Event-Listener für Änderungen der Anzahl
+    menue1.addEventListener('input', updateGesamtbetrag1);
+    menue2.addEventListener('input', updateGesamtbetrag2);
+    menue3.addEventListener('input', updateGesamtbetrag3);
+
+    // Initialisierung des Gesamtbetrags und Gesamtpreises
+    updateGesamtbetrag1();
+    updateGesamtbetrag2();
+    updateGesamtbetrag3();
+});

public/warenkorb.html

@@ -67,6 +67,7 @@
 
     <div class="content">
         <h1>Warenkorb</h1>
+
         <div id="notification"></div>
         <div class="desktop_ansicht">
             <div class="produkte_warenkorb">
@@ -135,13 +136,15 @@
                 </div>
                 <div class="produkte_details">
                     <p><strong>Karotten 1kg</br>Kosten: 0,95€</strong></p>
+                        <span class="eingabefeld_entfernen">
+                            <input type="text" id="menue4" value="10">
+                        </span>
+                    
                     </br>
                     <p>Auf Lager: 250</p>
                 </div>
                 <div class="button_mit_menue">
                     <p><a class="button_entfernen" href="#" id="button4">Entfernen</a></p>
-                    <input type="text" id="menue4" value="10">
-                    
                 </div>
                 <p class="gesamtbetrag4" id="gesamtbetrag4"></p>
             </div>
@@ -152,13 +155,14 @@
                 </div>
                 <div class="produkte_details">
                     <p><strong>Äpfel 1kg</br>Kosten: 2€</strong></p>
+                        <span class="eingabefeld_entfernen"><input type="text"
+                                id="menue5" value="10"></span>
+                            
                     </br>
                     <p>Auf Lager: 500</p>
                 </div>
                 <div class="button_mit_menue">
                     <p><a class="button_entfernen" href="#" id="button5">Entfernen</a></p>
-                    <input type="text" id="menue5" value="10">
-                    
                 </div>
                 <p class="gesamtbetrag5" id="gesamtbetrag5"></p>
             </div>
@@ -169,12 +173,14 @@
                 </div>
                 <div class="produkte_details">
                     <p><strong>Sellerie 1 Stück</br>Kosten: 1,10€</strong></p>
+                        <span class="eingabefeld_entfernen"> <input type="text" id="menue6" value="10"></span>
+                    
                     </br>
                     <p>Auf Lager: 1000</p>
                 </div>
                 <div class="button_mit_menue">
                     <p><a class="button_entfernen" href="#" id="button6">Entfernen</a></p>
-                    <input type="text" id="menue6" value="10">
+                    
 
                 </div>
                 <p class="gesamtbetrag6" id="gesamtbetrag6"></p>
@@ -187,7 +193,8 @@
                     <p class="gesamtpreis" id="gesamtpreis"></p>
                 </div>
                 <div>
-                    <a class="button_bestellung_abschließen" id="bestellbutton_mobil" href="bestellformular.html">Kostenpflichtig
+                    <a class="button_bestellung_abschließen" id="bestellbutton_mobil"
+                        href="bestellformular.html">Kostenpflichtig
                         bestellen</a>
                 </div>
             </div>