public/bestellformular.html

@@ -6,8 +6,8 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Bestellungen</title>
     <style>
-        @import 'css/mobile.css' (max-width: 800px);
+        @import 'css/mobile.css' (max-width: 480px);
-        @import 'css/desktop.css' (min-width: 801px);
+        @import 'css/desktop.css' (min-width: 481px);
     </style>
     <script src="javascript/formchecker.js" async="true" ></script>
 </head>
@@ -67,7 +67,7 @@
 
    
     <h1 id="begrueßung_bestellung_abschließen">Bestellung abschließen</h1>
-    <div id="fehlerbox"></div>
+
         <form name="Bestellformular" >
             <table class="bestellung_tabelle">
                 <tr>
@@ -124,20 +124,20 @@
         <p id="gesamtkosten"><strong>Die Gesamtkosten (inkl. MwSt.)</br>belaufen sich auf: 5,30€</strong>
 
         <p>
-            <input id="barzahlung_box" type="checkbox" class="checkbox_ausrichtung">
+            <input 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 id="datenschutz_box" type="checkbox" class="checkbox_ausrichtung">
+            <input 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>
         
     
     <div class="button_abschließen_position">
-        <p><a id="bestellbutton" class="button_abschließen" href="bestellung_erfolgreich.html"  >Kostenpflichtig bestellen</a></p>
+        <p><a class="button_abschließen" onclick="checkform()" href="bestellung_erfolgreich.html"  >Kostenpflichtig bestellen</a></p>
 
     </div>
 

public/bestellung_erfolgreich.html

@@ -6,8 +6,8 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Bestellung erfolgreich</title>
     <style>
-        @import 'css/mobile.css' (max-width: 800px);
+        @import 'css/mobile.css' (max-width: 480px);
-        @import 'css/desktop.css' (min-width: 801px);
+        @import 'css/desktop.css' (min-width: 481px);
     </style>
 </head>
 

public/bestellung_fehlgeschlagen.html

@@ -6,8 +6,8 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Bestellung fehlgeschlagen</title>
     <style>
-        @import 'css/mobile.css' (max-width: 800px);
+        @import 'css/mobile.css' (max-width: 480px);
-        @import 'css/desktop.css' (min-width: 801px);
+        @import 'css/desktop.css' (min-width: 481px);
     </style>
 </head>
 

public/css/desktop.css

@@ -147,11 +147,6 @@
         text-align: center;
     }
     
-    .content h3{
-        color: black;
-        margin-bottom: 0.2em;
-    }
-    
     .content a {
         margin-left: 0em;
     }
@@ -516,13 +511,3 @@
         cursor: pointer;
         font-weight: normal;
     }
-
-    #fehlerbox{
-        text-align: center;
-        color: red;
-        display: none;
-    }
-    
-    .mobile_ansicht{
-        display:none;
-    }

public/css/mobile.css

@@ -81,7 +81,7 @@
     .navbar-mobile {
         display:grid;
         grid-template-columns: 60px auto auto;
-        grid-template-rows: 65px;
+        grid-template-rows: 60px;
         
     }
     .navbar-mobile .nav-container a {
@@ -151,7 +151,7 @@
         margin-top: 60px;
         padding-top: 15px;
         background-color: #476B1C;
-        height: 400%;
+        height: 40vh;
         width: 400%;
         transform: translate(-150%);
         display: flex;
@@ -160,8 +160,6 @@
         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 {
@@ -235,7 +233,7 @@
     }
     
     .content :not(h1, strong, a) {
-        margin-left: 0em;
+        margin-left: 3.5em;
         color: #606060;
     }
     
@@ -251,11 +249,6 @@
         text-align: center;
     }
     
-    .content h3{
-        color: black;
-        margin-bottom: 0.2em;
-    }
-    
     .content a {
         margin-left: 0em;
     }
@@ -307,7 +300,7 @@
     #wohnort,
     #email {
         border: none;
-        width: auto;
+        width: 600px;
     }
     
     .bestellung_tabelle {
@@ -319,7 +312,6 @@
         margin-left: 50px;
         border: thin solid #606060;
         border-collapse: collapse;
-        width: 80%;
     }
     
     .bestellung_tabelle th {
@@ -328,7 +320,7 @@
     
     .bestellung_tabelle td {
         border: thin solid #606060;
-        width: auto;
+        width: 600px;
     }
     
     .bestellung_tabelle tr {
@@ -422,65 +414,41 @@
         position: relative;
     }
     
-    .content .produkte_warenkorb {
+    .produkte_warenkorb {
-        display: grid;
-        grid-template-columns: 1fr 1fr;
-        grid-template-rows: auto 1fr;
-        border: thin solid black;
-        margin-left: 4em;
-        margin-top: 20px;
-        align-items: center;
-        justify-items: left;
         position: relative;
-        
+        max-width: 88%;
+        height: 165px;
+        border: thin solid #606060;
+        margin-top: 22.5px;
+        margin-bottom: 22.5px;
+        display: flex;
+        align-items: center;
     }
     
-    .content .produkte_warenkorb .bild_mobil img {
+    .produkte_warenkorb img {
-        align-items: center;
+        margin-right: 0px;
+        height: 60%;
+    
     }
     
     .content .produkte_details {
-        display: flex;
+        color: black;
-        flex-direction: column;
+        font-weight: bold;
+        width: 150px;
+        display: block;
         font-size: 0.8em;
-        margin-top: -25px;
+        margin-top: -40px;
-        justify-content: space-between;
-        width: 95%;
     }
     
-    .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;
+        position: absolute;
+        bottom: 50px;
+        right: 30px;
+    
     }
     
-    .button_mit_menue p{
-       margin-left: 10px;
-    }
-    
-    #menue1,
-    #menue2,
-    #menue3,
-    #menue4,
-    #menue5,
-    #menue6 {
-        width: 35px;
-        height: 25px;
-        margin-left: 10px;      
-    }
-
-
-    
     .button_entfernen {
         background-color: #ebebeb;
         border: thin solid black;
@@ -496,19 +464,31 @@
         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;
     }
     
     
-    .content .gesamtbetrag1,
+    
-    .content .gesamtbetrag2,
+    .gesamtbetrag {
-    .content .gesamtbetrag3,
+        position: absolute;
-    .content .gesamtbetrag4,
-    .content .gesamtbetrag5,
-    .content .gesamtbetrag6 {
-        font-weight: bold;
-        color: black;
         font-size: 1em;
-        margin-left: 0;
+        bottom: 15px;
+        right: 15px;
     }
 
     .button_hinzufuegen {
@@ -553,8 +533,8 @@
         position: relative;
         bottom: 0;
         width: 400px;
-        padding-left: 30px;
+        padding-left: 50px;
-        margin-top: 120px;
+        margin-top: 22.5px;
         margin-left: auto;
         margin-bottom: 22.5px;
         display: grid;
@@ -584,22 +564,19 @@
         color: black;
         display: inline-block;
     }
-    
+    .content .gesamtkosten_text{
-    .content .gesamtkosten_text {
         color: black;
         display: inline-block;
         text-align: left;
         margin-left: 0;
         margin-right: 63px;
     }
-    
+    .content .gesamtpreis{
-    .content .gesamtpreis {
         color: black;
         display: inline-block;
         margin-left: 0;
     
     }
-    
     .content .button_bestellung_abschließen {
         background-color: #476B1C;
         color: white;
@@ -614,19 +591,4 @@
         font-weight: normal;
     }
 
-    .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

@@ -6,8 +6,8 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Datenschutzerklärung</title>
     <style>
-        @import 'css/mobile.css' (max-width: 800px);
+        @import 'css/mobile.css' (max-width: 480px);
-        @import 'css/desktop.css' (min-width: 801px);
+        @import 'css/desktop.css' (min-width: 481px);
     </style>
 </head>
 
@@ -80,13 +80,13 @@
                 </p>
             <p>Stand: 6. April 2023</p>
             <h3>Verantwortlicher</h3>
-            <p>
+                <ul>
                     WEB A4 -Team</br>
                     Paul-Wittsack-Straße 10</br>
                     68163 Mannheim</br>
                     E-Mail-Adresse:</br>
                     info@secondharvest.com</br>
-                </p>
+                </ul>
             <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/impressum.html

@@ -6,8 +6,8 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Impressum</title>
     <style>
-        @import 'css/mobile.css' (max-width: 800px);
+        @import 'css/mobile.css' (max-width: 480px);
-        @import 'css/desktop.css' (min-width: 801px);
+        @import 'css/desktop.css' (min-width: 481px);
     </style>
 </head>
 

public/index.html

@@ -6,8 +6,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/mobile.css' (max-width: 480px);
-        @import 'css/desktop.css' (min-width: 801px);
+        @import 'css/desktop.css' (min-width: 481px);
     </style>
 </head>
 <body class="index">

public/javascript/formchecker.js

@@ -3,8 +3,7 @@ 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(event) {
+function checkform() {
-    let anrede = document.getElementById('anrede').value;
     let vorname = document.getElementById('vorname').value;
     let name = document.getElementById('name').value;
     let straße = document.getElementById('straße').value;
@@ -13,30 +12,11 @@ function checkform(event) {
     let wohnort = document.getElementById('wohnort').value;
     let email = document.getElementById('email').value;
 
-    fehlerbox.innerHTML = 'Fehler: <br>';
+    if (/[a-zA-Z]{2,}/.test(vorname) === false) alert('vorname falsch');
-
+    if (/[a-zA-Z]{2,}/.test(name) === false) alert('name falsch');
-    if(!anrede || /^[A-Z][a-z]{1,}$/.test(anrede) === false) fehlerbox.innerHTML += 'Bitte teilen Sie uns Ihre Anrede mit <br>';
+    if (/[a-zA-Z]{2,}/.test(straße) === false) alert('straße falsch');
-    if(!vorname || /^[A-ZÄÜÖ][a-zäüöß]{1,}(?:-[A-ZÄÜÖ][a-zäüöß]+)?$/.test(vorname) === false) fehlerbox.innerHTML += 'Vorname: mindestens zwei Buchstaben <br>';
+    if (/[0-9]{1,}/.test(hausnummer) === false) alert('hausnummer falsch');
-    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 (/[0-9]{4,5}/.test(plz) === false) alert('plz falsch');
-    if(!straße || /^[A-ZÄÖÜ][a-zäöüß]+(?:-[A-ZÄÖÜ][a-zäöüß]+)*$/.test(straße) === false) fehlerbox.innerHTML += 'Straße: mindestens zwei Zeichen <br>';
+    if (/[a-zA-Z]{2,}/.test(wohnort) === false) alert('wohnort falsch');
-    if(!hausnummer || /[0-9]{1,}/.test(hausnummer) === false) fehlerbox.innerHTML += 'Hausnummer: mindestens eine Zahl <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) alert('email falsch');
-    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();
-        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

@@ -1,37 +1,9 @@
-window.addEventListener('DOMContentLoaded', function () {
+let standardWerte = [10, 10, 10];
-    let standardWerte = [10, 10, 10];
+const preise = [0.95, 2.0, 1.10];
-    const preise = [0.95, 2.0, 1.10];
 
-    berechnePreise();
+window.addEventListener('DOMContentLoaded', berechnePreise);
 
-    document.getElementById("button1").addEventListener('click', function () {
+function entferneAusWarenkorb(index) {
-        entferneAusWarenkorb(1);
-    });
-
-    document.getElementById("button2").addEventListener('click', function () {
-        entferneAusWarenkorb(2);
-    });
-
-    document.getElementById("button3").addEventListener('click', function () {
-        entferneAusWarenkorb(3);
-    });
-
-    document.getElementById("button4").addEventListener('click', function () {
-        entferneAusWarenkorb(4);
-    });
-
-    document.getElementById("button5").addEventListener('click', function () {
-        entferneAusWarenkorb(5);
-    });
-
-    document.getElementById("button6").addEventListener('click', function () {
-        entferneAusWarenkorb(6);
-    });
-
-    var bestellbutton1 = document.getElementById("bestellbutton_desktop").addEventListener('click', checkObFeldLeer);
-    var bestellbutton2 = document.getElementById("bestellbutton_mobil").addEventListener('click', checkObFeldLeer);
-
-    function entferneAusWarenkorb(index) {
     let inputId = 'menue' + index;
     let inputElement = document.getElementById(inputId);
     let testVar = inputElement.value;
@@ -41,17 +13,8 @@ window.addEventListener('DOMContentLoaded', function () {
     } else {
         let verringereUm = parseInt(inputElement.value);
 
-            if (index === 4) {
-                index = 1;
-            }
-            if (index === 5) {
-                index = 2;
-            }
-            if (index === 6) {
-                index = 3;
-            }
         if ((standardWerte[index - 1] - verringereUm) < 0) {
-                zeigeHinweisfenster("Der Wert darf nicht negativ sein/die Anzahl darf nicht unter 0 fallen.");
+            zeigeHinweisfenster("Der Wert darf nicht negativ sein.");
         } else {
             zeigeHinweisfenster("");
             let aktuellerWert = standardWerte[index - 1] - verringereUm;
@@ -61,28 +24,22 @@ window.addEventListener('DOMContentLoaded', function () {
     }
     berechnePreise();
 
-    }
+}
-
+function berechnePreise() {
-    function berechnePreise() {
     for (let i = 0; i < standardWerte.length; i++) {
         let preisID = 'gesamtbetrag' + (i + 1);
         let preisElement = document.getElementById(preisID);
         let preisEinzeln = (standardWerte[i] * preise[i]).toFixed(2);
         preisElement.innerText = "Betrag Gesamt (inkl. MwSt.): " + preisEinzeln + '€';
-        }
+
-        for (let i = 0; i < standardWerte.length; i++) {
-            let preisID = 'gesamtbetrag' + (i + 4);
-            let preisElement = document.getElementById(preisID);
-            let preisEinzeln = (standardWerte[i] * preise[i]).toFixed(2);
-            preisElement.innerText = "Betrag Gesamt (inkl. MwSt.): " + preisEinzeln + '€';
     }
     gesamtpreis = ((standardWerte[0] * preise[0]) + (standardWerte[1] * preise[1]) + (standardWerte[2] * preise[2])) + 2.90;
     let gesamtkostenText = document.getElementById("gesamtpreis");
     gesamtkostenText.innerText = gesamtpreis.toFixed(2) + "€";
     localStorage.setItem("gesamtpreis", gesamtpreis);
-    }
+}
 
-    function zeigeHinweisfenster(text) {
+function zeigeHinweisfenster(text) {
     var hinweisfenster = document.getElementById("notification");
     hinweisfenster.innerText = text;
     if (text !== "") {
@@ -90,86 +47,6 @@ window.addEventListener('DOMContentLoaded', function () {
     } else {
         hinweisfenster.style.display = "none";
     }
-    }
+}
 
-    function checkObFeldLeer(event) {
-        let feld1 = document.getElementById("menue1").value;
-        let feld2 = document.getElementById("menue2").value;
-        let feld3 = document.getElementById("menue3").value;
-        let feld4 = document.getElementById("menue4").value;
-        let feld5 = document.getElementById("menue5").value;
-        let feld6 = document.getElementById("menue6").value;
 
-        if ((feld1 === "") || (feld2 === "") || (feld3 === "") || (feld4 === "") || (feld5 === "") || (feld6 === "")) {
-            event.preventDefault();
-            zeigeHinweisfenster("Kein Feld darf leer sein!");
-
-        }
-        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 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/kontakt.html

@@ -6,8 +6,8 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Kontakt</title>
     <style>
-        @import 'css/mobile.css' (max-width: 800px);
+        @import 'css/mobile.css' (max-width: 480px);
-        @import 'css/desktop.css' (min-width: 801px);
+        @import 'css/desktop.css' (min-width: 481px);
     </style>
 </head>
 

public/produkte.html

@@ -6,8 +6,8 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Produkte</title>
     <style>
-      @import 'css/mobile.css' (max-width: 800px);
+      @import 'css/mobile.css' (max-width: 480px);
-      @import 'css/desktop.css' (min-width: 801px);
+      @import 'css/desktop.css' (min-width: 481px);
   </style>
     <script src="javascript/warenkorb.js"></script>
 </head>

public/ueber_uns.html

@@ -6,8 +6,8 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Ueber uns</title>
     <style>
-        @import 'css/mobile.css' (max-width: 800px);
+        @import 'css/mobile.css' (max-width: 480px);
-        @import 'css/desktop.css' (min-width: 801px);
+        @import 'css/desktop.css' (min-width: 481px);
     </style>
 </head>
 

public/warenkorb.html

@@ -6,8 +6,8 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Warenkorb</title>
     <style>
-        @import 'css/mobile.css'(max-width: 800px);
+        @import 'css/mobile.css'(max-width: 480px);
-        @import 'css/desktop.css'(min-width: 801px);
+        @import 'css/desktop.css'(min-width: 481px);
     </style>
     <script src="javascript/warenkorb.js"></script>
 </head>
@@ -67,9 +67,6 @@
 
     <div class="content">
         <h1>Warenkorb</h1>
-
-        <div id="notification"></div>
-        <div class="desktop_ansicht">
         <div class="produkte_warenkorb">
             <img src="pictures/karotte_ohne_preis.webp" alt="karotten">
             <div class="produkte_details">
@@ -78,9 +75,9 @@
                 <p>Auf Lager: 250</p>
             </div>
             <div class="button_mit_menue">
-                    <p><a class="button_entfernen" href="#" id="button1">Entfernen</a></p>
+                <p><a class="button_entfernen" href="#" id="button1" onclick="entferneAusWarenkorb(1)">Entfernen</a></p>
                 <input type="text" id="menue1" value="10">
-
+                <div id="notification"></div>
             </div>
             <p class="gesamtbetrag1" id="gesamtbetrag1"></p>
         </div>
@@ -93,9 +90,9 @@
                 <p>Auf Lager: 500</p>
             </div>
             <div class="button_mit_menue">
-                    <p><a class="button_entfernen" href="#" id="button2">Entfernen</a></p>
+                <p><a class="button_entfernen" href="#" id="button2" onclick="entferneAusWarenkorb(2)">Entfernen</a></p>
                 <input type="text" id="menue2" value="10">
-
+                <div id="notification"></div>
             </div>
             <p class="gesamtbetrag2" id="gesamtbetrag2"></p>
         </div>
@@ -108,9 +105,9 @@
                 <p>Auf Lager: 1000</p>
             </div>
             <div class="button_mit_menue">
-                    <p><a class="button_entfernen" href="#" id="button3">Entfernen</a></p>
+                <p><a class="button_entfernen" href="#" id="button3" onclick="entferneAusWarenkorb(3)">Entfernen</a></p>
                 <input type="text" id="menue3" value="10">
-
+                <div id="notification"></div>
             </div>
             <p class="gesamtbetrag3" id="gesamtbetrag3"></p>
         </div>
@@ -122,86 +119,11 @@
                 <p class="gesamtpreis" id="gesamtpreis"></p>
             </div>
             <div>
-                    <a class="button_bestellung_abschließen" id="bestellbutton_desktop"
+            <a class="button_bestellung_abschließen" href="bestellformular.html">Kostenpflichtig bestellen</a>
-                        href="bestellformular.html">Kostenpflichtig
-                        bestellen</a>
             </div>
         </div>
     </div>
 
-        <div class="mobile_ansicht">
-            <div class="produkte_warenkorb">
-                <div class="bild_mobil">
-                    <img src="pictures/karotte_ohne_preis.webp" width="100" height="100" alt="karotten">
-                </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>
-                </div>
-                <p class="gesamtbetrag4" id="gesamtbetrag4"></p>
-            </div>
-
-            <div class="produkte_warenkorb">
-                <div class="bild_mobil">
-                    <img src="pictures/aepfel_ohne_preis.png.avif" width="100" height="100" alt="aepfel">
-                </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>
-                </div>
-                <p class="gesamtbetrag5" id="gesamtbetrag5"></p>
-            </div>
-
-            <div class="produkte_warenkorb">
-                <div class="bild_mobil">
-                    <img src="pictures/sellerie_ohne_preis.webp" width="100" height="100" alt="sellerie">
-                </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>
-                    
-
-                </div>
-                <p class="gesamtbetrag6" id="gesamtbetrag6"></p>
-            </div>
-            <div class="äußererContainer">
-                <div class="kostenContainer">
-                    <p class="lieferkosten_text">Lieferkosten:</p>
-                    <p class="lieferkosten_preis">2,90€</p>
-                    <p class="gesamtkosten_text">Gesamtkosten (inkl. MwSt): </p>
-                    <p class="gesamtpreis" id="gesamtpreis"></p>
-                </div>
-                <div>
-                    <a class="button_bestellung_abschließen" id="bestellbutton_mobil"
-                        href="bestellformular.html">Kostenpflichtig
-                        bestellen</a>
-                </div>
-            </div>
-        </div>
-    </div>
-
-
     <footer>
         <nav class="navbar-desktop" style="--items: 2;">
             <a href="impressum.html">Impressum</a>