WEB-Team-A4/public/css/mobile.css

    /* MOBILE-Version T4Web 0.1 */

    /* NONE FROM DESKTOP */

    .navbar-desktop{
        display:none;
    }

    .header_logo {
        display:none;
    }

    .header_desktop {
        display:none;
    }

    #balken {
        display:none;
    }

    #aktuelle_auswahl {
        display:none;
    }

    .beispiel_produkte {
        display:none;
    }

    .button_produkte {
        display:none;
    }

    #greeting-desktop {
        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: 60px auto auto;
        grid-template-rows: 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 {
        background-color: #476B1C;
    }
  
    .nav-container .checkbox {
        position: absolute;
        display: flex;
        height: 60px;
        width: 60px;
        top: 0px;
        left: 0px;
        z-index: 3;
        opacity: 0;
        cursor:pointer;
    }
  
    .nav-container .hamburger-lines {
        height: 30px;
        width: 36px;
        position: absolute;
        top: 20px;
        left: 20px;
        z-index: 0;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }
  
    .nav-container .hamburger-lines .line {
        display: block;
        height: 7px;
        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: 400%;
        width: 400%;
        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-mobile-farbe {
        background-color: #9BB558;
    }

    .header-mobile-text h1 {
        margin-left: 2%;
        font-size:1.0em;
        margin-top:0.5em;
        
    }

    .header-mobile-text p {
        margin-left: 2%;
        font-size:0.8em;
        margin-top:-0.5em;
    }

    .header-mobile-logo {
        background-position: center;
    }

    /* 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;
    
    }

    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 {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto 1fr;
        border: thin solid black;
        margin-left: -55px;
        margin-top: 20px;
        align-items: center;
        justify-items: left;
    }
    
    .content .produkte_warenkorb .bild_mobil img {
        margin-left: -50px;
        align-items: center;
    }
    
    .content .produkte_details {
        display: block;
        margin-left: 0;
        font-size: 0.8em;
        justify-content: left;
    }
    
    .content .produkte_details p{
        margin-left: 0;
    }
    
    .button_mit_menue {
        display: flex;
        align-items: center;
    }
    
    .button_mit_menue p{
        margin-left: -45px;
    }
    
    #menue1,
    #menue2,
    #menue3,
    #menue4,
    #menue5,
    #menue6 {
        width: 35px;
        height: 25px;
        margin-left: 10px;
    }
    
    .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;
    }
    
    
    .content .gesamtbetrag1,
    .content .gesamtbetrag2,
    .content .gesamtbetrag3,
    .content .gesamtbetrag4,
    .content .gesamtbetrag5,
    .content .gesamtbetrag6 {
        font-weight: bold;
        color: black;
        font-size: 1em;
        margin-left: 0;
    }
    
    .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;
    }
    
    .content .mobile_ansicht{
        margin-left: -55px;
    }
    
    .desktop_ansicht{
        display: none;
    }