/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*
/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*
/*/*/*/* 											 											
/*/*/*/* 	Diese css ist alphatisch geordnet,							
/*/*/*/* 	normalerweise nach den classes (.) oder      					
/*/*/*/* 	über den Typ (p, h1, button etc.)							
/*/*/*/* 	Themen wie z.B. "Navigation" sind zusammengefasst 
/*/*/*/*  	und speziell gekennzeichnet. 
/*/*/*/*        Innerhalb von Themen gilt ebenfalls alphaetische Sortierung. 	
/*/*/*/*
/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*
/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*
*/

html, body {
    background-color: #8F3A84;
    height: 100%;
}

.Aktionsbutton {
  display: grid;
  grid-template-columns: minmax(auto, 30%);
  justify-content: center;
}

.Aktionsbutton div {
  text-align: center;
}

.EinkaufslisteGrid {
  display: grid;
  gap: 5px;
  grid-template-columns: repeat(4, auto); /* 50px auto 100px 100px; */
}

.EinkaufslisteGrid div {
  padding: 5px;
  text-align: center;
}

.EinkaufslisteGridZeile {
    display: contents;  /* Kinder werden direkt als Grid-Items platziert */
}

#footer_container {
    position: -webkit-sticky; /* Safari */
    position: sticky;
    bottom: 0; /*left: 0; right: 0;*/
    text-align: center;
    margin: 0;
    height: 0.05;
    z-index:3;
}

#footer {
    /* position:relative; */
    top: 0; left: 0; right: 0; bottom: 0;
    background-color:#000000;
    z-index:3;
    color:white;
    font-family: Courier, Arial,sans-serif;
    font-size:14pt;
}

.GerichtAufrufenHeader {
  display: grid;
  grid-template-columns: 100%;  
  background-color: #04AA6D;   
  align-items: center;
  padding: 5px;
}

.GerichtAufrufenTabelle {
  display: grid;
  grid-template-columns: auto auto auto;
  background-color: #8F3A84;
  padding: 5px;
}

.header {
	justify-self: center;
	font-size: 20px;
	color: rgb(20,35,108); /*5DC778;*/
        position: sticky;
        top: 70px;                  /* am oberen Rand „kleben“ */
        z-index: 1; 
}

/* Lebensmitteltabelle */
/* Lebensmitteltabelle */
/* Lebensmitteltabelle */

.LebensmittelGrid {
  grid-template-columns: repeat(6, auto);
  gap: 5px;
  display: grid;
}

.LebensmittelGrid div {
  padding: 5px;
  text-align: center;
}

.LebensmittelGridZeile {
   display: contents; /* Kinder werden direkt als Grid-Items platziert */
}

/* Ende Lebensmitteltabelle */
/* Ende Lebensmitteltabelle */
/* Ende Lebensmitteltabelle */

/* Merkzettel Grid */
/* Merkzettel Grid */
/* Merkzettel Grid */

.MerkzettelGrid {
  grid-template-columns: repeat(2, auto);
  gap: 5px;
  display: grid;
}

.MerkzettelGrid div {
  padding: 5px;
  text-align: center;
}

.MerkzettelGridZeile {
  display: contents;  /* Kinder werden direkt als Grid-Items platziert */
}

/* Ende Merkzettel Grid */
/* Ende Merkzettel Grid */
/* Ende Merkzettel Grid */



/* Rezeptanzeige */
/* Rezeptanzeige */
/* Rezeptanzeige */

.RezeptanzeigeGrid {
  display: grid;
  gap: 5px;
  grid-template-columns: repeat(3, auto);
}

.RezeptanzeigeGrid div {
  padding: 5px;
  text-align: center;
}

.RezeptanzeigeGridZeile {
  display: contents;  /* Kinder werden direkt als Grid-Items platziert */
}

/* Ende Rezeptanzeige */
/* Ende Rezeptanzeige */
/* Ende Rezeptanzeige */

/* Rezeptetabelle */
/* Rezeptetabelle */
/* Rezeptetabelle */

.Rezeptetabelle {
  grid-template-columns: repeat(2, auto);
  gap: 5px;
  display: grid;
}

.Rezeptetabelle div {
  padding: 5px;
  text-align: center;
}

.Rezeptzeile {
  display: contents;  /* Kinder werden direkt als Grid-Items platziert */
}

/* Ende Rezeptetabelle */
/* Ende Rezeptetabelle */
/* Ende Rezeptetabelle */

/* Navigation */
/* Navigation */
/* Navigation */

.dropdown {      /* The dropdown container */
  overflow: hidden;
  display: inline;
}

.dropdown .dropbtn {    /* Dropdown button */
  font-size: 16px;
  border: none;
  outline: none;
  color: white;
  margin: 0 100px 0 0;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit; /* Important for vertical align on mobile phones */
  margin: 0; /* Important for vertical align on mobile phones */
}

.dropdown-content {      /* Dropdown content (hidden by default) */
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 12;
}

.dropdown-content a {     /* Links inside the dropdown */
  float: none;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.dropdown-content a:hover {      /* Add a grey background color to dropdown links on hover */
  background-color: #ddd;
}

.dropdown:hover .dropdown-content {       /* Show the dropdown menu on hover */
  display: block;
}

.navbar {        /* The main navigation menu */
  overflow: hidden;
  background-color:rgb(20,35,108);
  /*background-color: #333;*/
}

.navbar a {   /* Navigation links */
  float: left;
  font-size: 16px;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  background-color:rgb(20,35,108);
}

.navbar a:hover, .subnav:hover .subnavbtn {    /* Add a red background color to navigation links on hover */
  background-color: red;
}

.navbar a:hover, .dropdown:hover .dropbtn {     /* Add a red background color to navbar links on hover */
  background-color: red;
}

.nav-container{  
    width: 100%;
    height: auto;
    border-style: solid;
    background-color:rgb(20,35,108);	
    padding: 2px;
    margin: 2px;
    color: white;
    display: flex;
    justify-content: space-between;
    vertical-align: middle;
    box-sizing: border-box;
    position: fixed;
}

.right-side, .left-side {
    list-style-type: none;
}

.right-side li, .left-side li {
    display:inline-block;
    color: white;
}

.right-side li a, .left-side li a {
    text-decoration: none;
    display:block;
    width:100%;
    height:100%;
    padding: 4px 6px;
    color: white;
}

.subnav {       /* The subnavigation menu */
  float: left;
  overflow: hidden;
}

.subnav-content {         /* Style the subnav content - positioned absolute */
  display: none;
  position: relative; /*absolute;*/
  left: 0;
  background-color:rgb(20,35,108);
  width: 100%;
  z-index: 1;  
}

.subnav-content a {      /* Style the subnav links */
  float: left;
  color: white;
  text-decoration: none;
  padding: 5px;
}

.subnav-content a:hover {      /* Add a grey background color on hover */
  background-color: #eee;
  color: black;
}

.subnav:hover .subnav-content {       /* When you move the mouse over the subnav container, open the subnav content */
  display: block;
}

.subnav .subnavbtn {        /* Subnav button */
  font-size: 16px;
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color:rgb(20,35,108);
  font-family: inherit;
  margin: 0;
}

/* Navigation Ende */
/* Navigation Ende */
/* Navigation Ende */

.textarea {
  width: 100%;
  max-width: 100%;
  font-size: 16px;
  line-height: 18px;
  padding: 8px 12px;
  box-sizing: border-box;
  border: none;
  border-bottom: 1px solid black;
  resize: none;        /* Nutzer kann nicht manuell ziehen */
  overflow: hidden;    /* keine Scrollbar, Feld wächst stattdessen */
}

/* ToDos Grid */
/* ToDos Grid */
/* ToDos Grid */


.ToDosGrid {
  grid-template-columns: repeat(4, auto);
  gap: 5px;
  display: grid;
}

.ToDosGrid div {
  padding: 5px;
  text-align: center;
}

.ToDosGridZeile {
  display: contents;  /* Kinder werden direkt als Grid-Items platziert */
}