@layer init,layout,util,shop;

:root  {
  --color-link: black;
}

body {
  margin:0px;
  padding: 0px;
  font-family: "systemui";
  font-size: 14pt;
}

@layer layout {
  body {
    width:100%;
    width: 100vw;
    width: 100dvw;
    min-height: 100vh;
    min-height: 100dvh;
    display: grid;
    grid-template-columns: auto;
    grid-template-rows: min-content 25px auto min-content min-content min-content;
    grid-template-areas: 
        "top"
        "nav"
        "left"
        "content"
        "right"
        "foot";
  }
}

@layer init {
  :where(a, a:link,a:active, a:visited) {  color: var(--color-link);  text-decoration: none;}
  
  /*input:required:empty { outline: blue 2px solid; }*/
  input:required:valid { outline: none; }
  input:invalid:not(:empty) { outline: yellow 3px solid; }
  input:valid:not(:empty) { outline: green 2px solid; }
  .hide { display: none;}
  
  tr:has(:required) {
    font-weight:bold;
  }
}

menu li {
  list-style: none;
  display: inline-block;
}

.switchtitle {
    position: relative;
    display: none;
}

.menuButton {
    position: absolute;
    right: 0;
}

.ie_warning {
    background: yellow;
    color: red;
    font-weight: bold;
    padding: 10px;
    text-align: center;
    font-size: 20px;
}

#grouplist, #grouplist.show {display: grid; grid-template-columns: repeat(auto-fit, minmax( 130px,1fr ));}

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

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

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

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

.zmit { display: none; }
#zg_ohne.show {
    display: block;
}

.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;
}

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

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

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

#topnav .submenu {
  background: Bisque;
}

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

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

#bottommenu menu > li {position:relative;}
#bottommenu menu > li > ul { position: absolute; display:none;}
#bottommenu menu li {  padding: 2px;  text-align: center;}

/* GroupMenu */
#groups	{background: AliceBlue;grid-area: left;}

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

/* Content */
#top {
  font-family: "serif";
}

#top a {color: green; text-decoration: none; text-shadow: red 10px 5px 10px;}
#top h1 { margin:0px;padding-left: 15px; padding-top:5px;}
#top h1::first-letter { color: yellow; font-size: 1.5em; }
#top p.title {
  margin:0px; text-align: center;
  font-size: 1.3em; font-weight: bold;
  &:first-letter { font-size: 2em; }
}
#top p.info {
  margin: 0px;
  margin-left: 3em;
}

#col1 table { width:99%;}
@layer init {
  :where(#col1 h1,#col1 h2,#col1 h3,#col1 h4) {clear:both;}
}

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

.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; 
  display: grid;
  grid-template-columns: repeat(auto-fill,150px);
  gap: 1em;
  & li {
    display: grid;
    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;
  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; margin-left: 5px;}
.add { color: green; }
.rm { color: red; }

#CartButtonFrame {text-align:center;}

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

/* main #col1 examples */
#col1 {
  container-name: main;
  /*! container-type: inline-size; */
  
  contain: content;
  
  & section:nth-of-type(even) {
    background-color: orange;
  }
  
  & section:nth-of-type(odd) {
    background-color: lightgray;
  }

  & header {
    background-color: lightblue;
  }
}

#top {
  contain: content;
  container: top / inline-size;
}

#groups {
  contain: content;
  container: left / inline-size;
}

#cartFrame {
  contain: content;
  container: right / inline-size;
}


main#col1 a[href^="http:"], main#col1 a[href^="https:"] { text-decoration: underline; color: blue; }
main#col1 a[href^="mailto:"]:before {content: "\2709  "; }
main#col1 a[href^="tel:"]:after {content: " \1F4F2"; }

/* Layput */
@media (width < 550px) {
    body {
        grid-template-columns: auto;
        grid-template-rows: min-content 1.5em min-content auto min-content;
        grid-template-areas: 
            "top"
            "nav"
            "left"
            "content"
            "right"
            "foot";
        font-size: 16pt;
    }
    #zg_ohne { display: none; }
    .zmit { display: flex; }
    .switchtitle { display: block; }
    #grouplist { display: none;}
    #grouplist.show {display: grid; grid-template-columns: repeat(auto-fit, minmax( 130px,1fr ));}
    #col1 img { max-width: 90vw; }
    #col1 table { max-width: 95vw; }
}
@media (550px <= width <= 815px) {
    body {
        grid-template-columns: minmax(260px,1fr) auto;
        grid-template-rows: min-content 25px min-content min-content 2fr 3em;
        grid-template-areas: 
            "top    top"
            "nav    nav"
            "left   content"
            "right  content"
            ".   content"
            "foot   foot";
        font-size: 16px;
    }
     #zg_ohne { display: block; }
    .zmit { display: flex; }
    /*! .switchtitle { display: block; }*/
    /* #grouplist { display: none; }*/
}

@media (815px < width < 1000px) {
    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 (width >= 1000px) {
    body {
        grid-template-columns: 150px minmax(600px,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 (width >= 1900px) {
    body {
        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;
        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 .";
    }
}

@media (width <= 815px) {
  body:not(.start,.page) {
    #top {
      display: none;
    }
  }
}