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

    
    /* DESKTOP Version T4Web 0.1 */

    /* NONE FROM MOBILE */

    .header_mobile {
        display:none;
    }
    .header_mobilelogo {
        display:none;
    }
    .navbar-mobile{
        display:none;
    }

    #greeting-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;
    
    }
    
    #menue1,
    #menue2,
    #menue3 {
        width: 35px;
        height: 25px;
        margin-left: 10px;
    }
    
    .content .gesamtbetrag1,
    .content .gesamtbetrag2,
    .content .gesamtbetrag3 {
        font-weight: bold;
        color: black;
        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-right: 150px;
        margin-bottom: 22.5px;
        display: grid;
        grid-template-rows: auto auto;
    }
    
    .content .kostenContainer {
    
        position: relative;
        width: 320px;
        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: 118px;
        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;
    }