body {
  margin:0px;
  padding: 0px;
  background: #eee;
  background: linear-gradient(to top, rgba(248,80,50,1) 0%, rgba(248,80,50,1) 24%, rgba(240,235,93,1) 39%, rgba(240,235,93,1) 65%, rgba(59,247,52,1) 79%, rgba(99,230,39,1) 100%);
  background-attachment: fixed;
  width: 100vw;
  max-width: 100%;
  min-height: 100vh;
  font-family: "Sans";
  font-size: 18px;
}


#grouplist.show, #zg_ohne.show {
    display: block;
}

.zmit {
  padding:0px;
  margin:0px;
  list-style: none;
  display:flex;
  flex-wrap: wrap;
}
.zmit.show { display: flex; }

.switchtitle {
    position: relative;
}

.menuButton {
    position: absolute;
    right: 0;
}
.ie_warning {
    background: yellow;
    color: red;
    font-weight: bold;
    padding: 10px;
    text-align: center;
    font-size: 20px;
}
@supports(display: grid) {
    body {
        display: grid;
        grid-template-columns: auto;
        grid-template-rows: min-content 25px auto min-content min-content min-content;
        grid-template-areas: 
            "top"
            "nav"
            "content"
            "right"
            "left"
            "foot";
    }
    #grouplist, #zg_ohne {
        display: none;
    }
    .zmit { display: none; }
    @media (min-width: 550px) {
        body {
            grid-template-columns: 260px auto;
            grid-template-rows: min-content 25px min-content auto min-content;
            grid-template-areas: 
                "top    top"
                "nav    nav"
                "right  content"
                "left   content"
                "foot   foot";
            font-size: 16px;
        }
        #grouplist, #zg_ohne { display: block; }
        .zmit { display: flex; }
        .menuButton { display: none; }
    }

    @media (min-width: 800px) {
        body {
            grid-template-columns: 150px auto 260px;
            grid-template-rows: min-content 25px auto min-content;
            grid-template-areas: 
                "top top top"
                "nav nav nav"
                "left content right"
                "foot foot foot";
        }
    }

    @media (min-width: 1900px) {
        body {
            grid-template-columns: auto 150px 1490px 260px auto;
            grid-template-rows: min-content 25px auto min-content;
            grid-template-areas: 
                ". top top top ."
                ". nav nav nav ."
                ". left content right ."
                ". foot foot foot .";
        }
    }
}

/* Confirm,Kasse & Danke */
#dank,#confirmTitel    {font-size:14pt;padding-left:10px;}

.confirmName {text-align:left; }
.confirmPreis {text-align:right;}

/* Produkt */
span.pathsymbol:before { content: ">";}

.zgruppe,.zauswahlgruppe, #zrest, #zohne {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  margin-top: 10px;
  margin-bottom: 10px;
}

.zgruppe:nth-child(even) ,.zauswahlgruppe:nth-child(even) , #zrest:nth-child(even) {
    background: #f0f0e0;
}

.atitle {
  flex: 0 0 100%;
}
.zutat {
  display: inline-block;
  vertical-align: top;
  flex: 0 0 150px;
  text-align: center;
  display: flex;
  flex-direction: column;
}

/* Gruppe */
.prodName { text-align: left;}
.prodPreis { text-align: right;}

.sdesc { font-size: 14px; }

#tabProd tr:nth-child(even),#tabMultiPreis tr:nth-child(even) {
    background: #fafaf0;
}

/* Elements */
#top {
    position: relative;
    background: Aquamarine;
    grid-area: top;
}
#top a {color: green; text-decoration: none; text-shadow: red 10px 5px 10px;}
#top h1::first-letter { color: yellow; font-size: 40px; }

#bottom {
  text-align:center;
  background: AntiqueWhite;
  grid-area: foot;
}

#col1 {
  background: white;
  color: black;
  grid-area: content;
}

/* Menu*/
#nav {
    background: AntiqueWhite;
    grid-area: nav; 
    position: sticky;
    top: 0;
}
#nav ul {list-style: none; margin:0px;padding:0px;}
#nav > ul { display: flex; flex-direction: row;}
#nav > ul > li {display: -moz-inline-stack;display:inline-block; position:relative; flex: 0 0 auto; min-width: 80px; padding: 3px;}
#nav > ul > li > ul { position: absolute; display:none; padding-left: 5px;}
#nav > ul img {border:0px;}

#nav .submenu {
  background: Bisque;
}

.switchtitle {
    width: 100%;
    text-align: left;
    font-weight: bold;
}

#leftmenu ul,#rightmenu ul,#bottommenu ul {list-style: none; margin:0px;padding:0px;}
#bottommenu ul li + li:before { content: "| "; }

#bottommenu ul > li {display: -moz-inline-stack;display:inline-block; position:relative;}
#bottommenu ul > li > ul { position: absolute; display:none;}
#bottommenu ul li {
  padding: 2px;
  text-align: center;
}
/* GroupMenu */
#groups	{background: AliceBlue;grid-area: left;}

#groupmenu ul { list-style: none; margin:0px;padding:0px;}
#groupmenu li, #leftmenu li,#rightmenu li {
text-align: center;
margin: 2px;
padding: 2px;
border-radius: 5px;
border: 4px outset Azure;
background: #ade5e5;
}
#groupmenu .submenu {margin-left: 5px;}

/* Content */
#top h1 { margin:0px;padding-left: 15px; padding-top:5px;}
#top p { margin:0px; text-align: center; font-size: 2em; font-weight: bold;}

#col1 table { width:99%;}
#col1 h1 {clear:both;}
#col1 h2 {clear:both;}

#col1 IMG.FASTORDER { vertical-align: baseline; border:none;}
#col1 IMG.ThumbPicture { vertical-align: top; max-height: 32px;}

.pause {
    background: yellow;
    color: red;
    font-weight: bold;
    font-size: 18px;
    padding: 8px;
}

#GruppenTitle {
  position: sticky;
  top: 20px;
  background: #fafafa;
  margin: 0;
}

#visualGroup {
  list-style: none; margin:0px;padding:0px; clear:both; vertical-align:top;
  justify-content: center;
  display: grid;
  grid-template-columns: repeat(auto-fill,150px);
}

#visualGroup li {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.attriblist {
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill,minmax(100px,1fr));
    grid-gap: 5px;
    list-style: none;
}

.Produkt {
    position: relative;
    border: outset;
    max-width:250px;
}

.Produkt img {
    width: 100%;
}

.Produkt .ProduktName {
    position: absolute;
    top: 10px;
    left: 5px;
}

.Produkt .ProduktPreis {
    position: absolute;
    bottom: 5px;
    right: 5px;
}

.textattriblist {
    margin: 0;
    padding: 0;
    list-style: none;
}

.TextProdukt {
    display: grid;
    grid-template-columns: auto 200px;
}

.ProduktPreis { text-align: right;}

#ProduktInfo input[type=number] {
    width: 80px;
    width: 5ch;
}

#ProduktPreis .preis {
  background: yellow;
  /*! color: red; */
  margin-right: 10px;
  padding: 5px;
  border-radius: 8px;
  box-shadow: 5px 5px 10px;
}

#ProduktPreis {
  display: grid;
  grid-template-columns: repeat(auto-fill,minmax(125px,1fr));
  grid-gap: 5px;
}

.pause {
  text-align:center;
}

#lieferwarnung {
  margin: 4px;
  padding: 10px;
}

#error {
  margin: 4px;
  padding: 10px;
}

/* cart */
#cartFrame {
    background:Cornsilk;
    grid-area: right;
}
#cardtab {width: 100%;}
#card {
    position: sticky;
    top: 25px;
    background:Cornsilk;
}

#liste h3 { margin:0px; text-align: center;}
#liste h3:after { content: "\1F6D2"; }
#liste td { vertical-align:top; }

#cardtab { border-collapse: collapse;}
.cartpreis { text-align: right;}
.cartname,.cartsumme { text-align: left;}

a.add,a.rm { font-size: 25px; font-weight: bold; text-decoration: none; margin-left: 5px;}
.add { color: green; }
.rm { color: red; }

#CartButtonFrame {text-align:center;}

.strikePreis {text-decoration: line-through;}

nav a:link, nav a:active, nav a:visited {
  color: black;
  text-decoration: none;
}
#col1 a:link, #col1 a:active, #col1 a:visited {
  color: black;
  text-decoration: none;
}