* {
  font-family: Sans-Serif;
  font-size: x-large;
  box-sizing: border-box;
  user-select: none;
  /* no text selection allowed */
}
html {
  overflow: visible;
}
body {
  width: 100dvw;
  /*   height: 100dvh;  if there is height, sticky soes not work */
  overflow-y: hidden;
  margin: 0px;
  padding: 0px;
}
#generalDisplay {
  display: grid;
  grid-template-rows: auto 1fr auto;
  height: 100dvh;
}
div {
  padding: 10px;
}
#header {
  position: sticky;
  top: 0;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 50% 50%;
  grid-template-rows: auto auto;
}
#selectList {
  grid-column: 1 / span 2;
  margin: 10px;
}
.footer {
  position: sticky;
  bottom: 0;
}
.tab {
  display: inline-block;
  padding: 10px;
  text-align: center;
  font-size: larger;
}
#radioPreparing:not(:checked) ~ .preparing {
  display: none;
}
#radioShopping:not(:checked) ~ .shopping {
  display: none;
}
.preparing {
  background-color: aquamarine;
}
.preparing.contrast {
  background-color: hsl(160, 100%, 40%);
}
.shopping {
  background-color: bisque;
}
.shopping.contrast {
  background-color: orange;
}
.scrollable {
  overflow-y: scroll;
}
input[type="radio"] {
  display: none;
}
.footer.preparing {
  display: flex;
  flex-direction: row;
  gap: 10px;
}
.footer.preparing > input {
  width: 0;
  flex-grow: 2;
}
.footer.shopping {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
#action {
  z-index: 10;
  position: absolute;
  top: 0;
  left: -100dvw;
  height: 100dvh;
  width: 100dvw;
  background-color: beige;
}
#action.show {
  left: 0;
}
#shopList details {
  pointer-events: none;
}
#shopList details summary {
  background-color: burlywood;
}
#shopList details div {
  pointer-events: all;
}
#shopList details div:nth-child(2n+1) {
  background-color: #f4dcb4;
}
#shopList summary {
  font-weight: bold;
}
.quantity input {
  width: 3ch;
  text-align: center;
  background-color: white;
}
.quantity button {
  width: 2ch;
}
.item3 {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 10px;
  padding: 3px 5px 2px 0;
}
#prepareList div:nth-child(2n+1) {
  background-color: hsl(160, 100%, 50%);
}
/* Muss hinten stehen oder !important sein */
.hide {
  display: none;
}