/* protest-riot-regular - latin */
@font-face {
  font-display: swap;
  font-family: 'Protest Riot';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/protest-riot-v2-latin-regular.woff2') format('woff2');
}

/* titillium-web-200 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Titillium Web';
  font-style: normal;
  font-weight: 200;
  src: url('../fonts/titillium-web-v17-latin-200.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* titillium-web-200italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Titillium Web';
  font-style: italic;
  font-weight: 200;
  src: url('../fonts/titillium-web-v17-latin-200italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* titillium-web-300 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Titillium Web';
  font-style: normal;
  font-weight: 300;
  src: url('../fonts/titillium-web-v17-latin-300.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* titillium-web-300italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Titillium Web';
  font-style: italic;
  font-weight: 300;
  src: url('../fonts/titillium-web-v17-latin-300italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* titillium-web-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Titillium Web';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/titillium-web-v17-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* titillium-web-italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Titillium Web';
  font-style: italic;
  font-weight: 400;
  src: url('../fonts/titillium-web-v17-latin-italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* titillium-web-600 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Titillium Web';
  font-style: normal;
  font-weight: 600;
  src: url('../fonts/titillium-web-v17-latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* titillium-web-600italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Titillium Web';
  font-style: italic;
  font-weight: 600;
  src: url('../fonts/titillium-web-v17-latin-600italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* titillium-web-700 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Titillium Web';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/titillium-web-v17-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* titillium-web-700italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Titillium Web';
  font-style: italic;
  font-weight: 700;
  src: url('../fonts/titillium-web-v17-latin-700italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* titillium-web-900 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Titillium Web';
  font-style: normal;
  font-weight: 900;
  src: url('../fonts/titillium-web-v17-latin-900.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

body {
  margin: 0 auto;
  max-width: 70rem;
  font-family: Arial, sans-serif;
  color: #32268b;
  background-color: #6B8E23;
}

.grid-container-head {
  display: grid;
  margin: 1rem 0;
  grid-template-columns: auto 1fr 1fr 1fr;
  background-color: #6B8E23;
  grid-template-areas:
  "burger logo search user";
}

.grid-item-head {
  background-color: #6B8E23;
  text-align: center;
  vertical-align: middle;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.burger {
  grid-area: burger;
  padding-left: 1rem;
  padding-right: 2rem;
}

.logo {
  grid-area: logo;
  font-family: 'Protest Riot';
  font-size: 3rem;
  text-shadow: 1px 1px 0px white;
  justify-content: left;
} 
    
.search {
  grid-area: search;
}

.user {
  grid-area: user;
  justify-content: right;
  padding-left: 1rem;
  padding-right: 1rem;
}

.menu-toggle {
  display: flex;
  flex-direction: column;
  cursor: pointer;
}
      
.line {
  width: 30px;
  height: 3px;
  background-color: #32268b;
  margin: 3px 0;
}
      
.menu {
  display: none;
}

.open {
  display: block;
  position: absolute;
  top: 5rem;
  margin-left: 13rem;
  min-width: 15rem;
  background-color: #6B8E23;
  border-radius: 0.5rem;
  z-index: 99;
}

a.linkinmenu {
  color: white;
  font-family: 'Titillium Web';
  text-decoration: none;
}

.lineinmenu {
  width: 80%;
  height: 0.05rem;
  background-color: white;
  margin: 0 auto;
}

#search{
  font-family: 'Protest Riot';
  color: white !important;
  font-size: 1rem;
  text-shadow: 1px 1px 0px black;
  box-shadow: 2px 2px 2px hsl(80, 95%, 22%);
  min-width: 10rem;
  padding: 0.5rem 1rem;
  border-radius: 10px;
  border: thin solid white;
  background: #6B8E23;
}

#submit{
  font-family: 'Protest Riot';
  color: white !important;
  font-size: 1rem;
  text-shadow: 1px 1px 0px black;
  box-shadow: 2px 2px 2px hsl(80, 95%, 22%);
  padding: 0.5rem 0.5rem;
  border-radius: 10px;
  border: thin solid white;
  background: #6B8E23;
}

.user-menu {
  display: inline-block;
  cursor: pointer;
  transition: transform 0.3s ease;
}
      
.user-menu:hover {
  transform: scale(1.1); /* Vergrößere das Icon beim Hover */
}
      
.user-icon {
  width: 48px;
  height: 48px;
}
      
.user-icon path {
  transition: fill 0.3s ease; /* Füge eine sanfte Farbübergang beim Hover hinzu */
}

.grid-container-content {
  display: grid;
  margin: 0 2rem;
  grid-template-columns: 5% 35% 17% 43%;
  grid-template-rows: repeat(11, auto);
  background-color: #c6e0b4;
  border-radius: 0.5rem;
  padding: 0 2rem 2rem 2rem;
  justify-content: center;
  grid-template-areas:
  "buttons buttons name name"
  "gid seedpic marke brand"
  "gid seedpic eltern parents"
  "gid seedpic genetik genetic"
  "gid seedpic bluetetyp floweringtyp"
  "gid seedpic bluetezeit floweringtime"
  "gid seedpic gehaltthc thc"
  "gid seedpic gehaltcbd cbd"
  "gid seedpic hoehe height"
  "gid seedpic ertrag yield"
  "gid seedpic gattung genus";
}

.grid-item-content {
  min-height: 2.5rem;
  font-family: 'Titillium Web';
  background-color: #c6e0b4;
  text-align: center;
  vertical-align: middle;
  display: flex;
  align-items: center;
  justify-content: left;
}

.button {
  max-height: 3rem;
  margin-right: 2rem;
  cursor: pointer;
  border-radius: 50%;
  background: #6B8E23;
}

.buttons {
  grid-area: buttons;
  justify-content: left;
  margin-top: 0;
}

.topic {
  font-weight: bold;
  background: linear-gradient(to right, #6B8E23 0%, #c6e0b4 90%);
  padding-left: 2rem;
  border-bottom: thin solid white;
}

.data {
  background: linear-gradient(to right, #c6e0b4 0%, #6B8E23 90%);
  padding-left: 2rem;
  border-bottom: thin solid white;
}

.gid {
  grid-area: gid;
  justify-content: center;
  min-width: 2.5rem;
  padding-bottom: 2rem;
  font-size: 1.5rem;
  font-weight: bold;
  writing-mode: vertical-lr;
  rotate: 0.5turn;
  background: linear-gradient(to top, #6B8E23 0%, #c6e0b4 50%, #6B8E23 100%);
  border-radius: 0.5rem;
}

.seedpic {
  grid-area: seedpic;
  justify-content: center;
  margin: 0 2rem;
  padding: 0 2rem;
  background: radial-gradient(circle, #6B8E23 0%, #c6e0b4 50%, #6B8E23 100%);
  border-radius: 0.5rem;
}

.seedpic img {
  width: 100%; /* Bildbreite auf 100% der übergeordneten Div-Breite setzen */
  height: auto; /* Höhe automatisch berechnen, um das Seitenverhältnis beizubehalten */
  display: block; /* Damit die Margin-Automatik funktioniert */
  margin: 0 auto;
  border-radius: 0.5rem;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}

.name {
  grid-area: name;
  justify-content: left;
  padding-top: 2rem;
  padding-bottom: 1rem;
  font-size: 2rem;
  font-weight: 700;
}

.marke {
  grid-area: marke;
  border-top-left-radius: 0.5rem;
}

.brand {
  grid-area: brand;
  border-top-right-radius: 0.5rem;
}

.eltern {
  grid-area: eltern;
}

.parents {
  grid-area: parents;
}

.genetik {
  grid-area: genetik;
}

.genetic {
  grid-area: genetic;
}

.bluetetyp {
  grid-area: bluetetyp;
}

.floweringtyp {
  grid-area: floweringtyp;
}

.bluetezeit {
  grid-area: bluetezeit;
}

.floweringtime {
  grid-area: floweringtime;
}

.gehaltthc {
  grid-area: gehaltthc;
}

.thc {
  grid-area: thc;
}

.gehaltcbd {
  grid-area: gehaltcbd;
}

.cbd {
  grid-area: cbd;
}

.hoehe {
  grid-area: hoehe;
}

.height {
  grid-area: height;
}

.ertrag {
  grid-area: ertrag;
}

.yield {
  grid-area: yield;
}

.gattung {
  grid-area: gattung;
  border-bottom: none;
  border-bottom-left-radius: 0.5rem;
}

.genus {
  grid-area: genus;
  border-bottom: none;
  border-bottom-right-radius: 0.5rem;
}

.grid-container-details {
  display: grid;
  margin: 0 2rem;
  margin-top: 2rem;
  grid-template-columns: 20% 30% 50%;
  grid-template-rows: repeat(11, auto);
  background-color: #c6e0b4;
  border-radius: 0.5rem;
  padding: 2rem;
  justify-content: center;
  grid-template-areas:
  "saatdatum seeddate protokolllabel"
  "sprossdatum seedlingdate protokoll"
  "bluetedatum floweringdate protokoll"
  "erntedatum harvestdate protokoll"
  "abfuelldatum packingdate protokoll"
  "hoehecm heightcm protokoll"
  "ertraggramm yieldgramm protokoll"
  "kommentarlabel kommentarlabel protokoll"
  "comment comment protokoll"
  "konsumlabel konsumlabel konsumlabel"
  "konsum konsum konsum";
}

.grid-item-details {
  min-height: 2.5rem;
  font-family: 'Titillium Web';
  background-color: #c6e0b4;
  text-align: center;
  vertical-align: middle;
  display: flex;
  align-items: center;
  justify-content: left;
}

.dettopic {
  font-weight: bold;
  background: linear-gradient(to right, #6B8E23 0%, #c6e0b4 90%);
  padding-left: 2rem;
  border-bottom: thin solid white;
}

.detdata {
  background: linear-gradient(to right, #c6e0b4 0%, #6B8E23 90%);
  padding-left: 2rem;
  margin-right: 1rem;
  border-bottom: thin solid white;
}

.saatdatum {
  grid-area: saatdatum;
  border-top-left-radius: 0.5rem;
}

.seeddate {
  grid-area: seeddate;
  border-top-right-radius: 0.5rem;
}

.sprossdatum {
  grid-area: sprossdatum;
}

.seedlingdate {
  grid-area: seedlingdate;
}

.bluetedatum {
  grid-area: bluetedatum;
}

.floweringdate {
  grid-area: floweringdate;
}

.erntedatum {
  grid-area: erntedatum;
}

.harvestdate {
  grid-area: harvestdate;
}

.abfuelldatum {
  grid-area: abfuelldatum;
}

.packingdate {
  grid-area: packingdate;
}

.hoehecm {
  grid-area: hoehecm;
}

.heightcm {
  grid-area: heightcm;
}

.ertraggramm {
  grid-area: ertraggramm;
  border-bottom-left-radius: 0.5rem;
}

.yieldgramm {
  grid-area: yieldgramm;
  border-bottom-right-radius: 0.5rem;
}

.protokolllabel {
  grid-area: protokolllabel;
  font-weight: bold;
  background: linear-gradient(to right, #6B8E23 0%, #c6e0b4 50%, #6B8E23 100%);
  border-top-left-radius: 0.5rem;
  border-top-right-radius: 0.5rem;
  margin-left: 1rem;
  padding-left: 2rem;
}

.protokoll {
  grid-area: protokoll;
  background: linear-gradient(to right, #6B8E23 0%, #c6e0b4 50%, #6B8E23 100%);
  border-bottom-left-radius: 0.5rem;
  border-bottom-right-radius: 0.5rem;
  margin-left: 1rem;
  justify-content: center;
  padding: 0 2rem 2rem 2rem;
}

.kommentarlabel {
  grid-area: kommentarlabel;
  font-weight: bold;
  background: linear-gradient(to right, #6B8E23 0%, #c6e0b4 50%, #6B8E23 100%);
  border-top-left-radius: 0.5rem;
  border-top-right-radius: 0.5rem;
  margin-top: 2rem;
  margin-right: 1rem;
  padding-left: 2rem;
}

.kommentar {
  grid-area: comment;
  background: linear-gradient(to right, #6B8E23 0%, #c6e0b4 50%, #6B8E23 100%);
  border-bottom-left-radius: 0.5rem;
  border-bottom-right-radius: 0.5rem;
  margin-right: 1rem;
  padding: 0 2rem 2rem 2rem;
  min-height: 6rem;
}

.konsumlabel {
  grid-area: konsumlabel;
  font-weight: bold;
  background: linear-gradient(to right, #6B8E23 0%, #c6e0b4 50%, #6B8E23 100%);
  border-top-left-radius: 0.5rem;
  border-top-right-radius: 0.5rem;
  margin-top: 2rem;
  padding-left: 2rem;
}

.konsum {
  grid-area: konsum;
  background: linear-gradient(to right, #6B8E23 0%, #c6e0b4 50%, #6B8E23 100%);
  border-bottom-left-radius: 0.5rem;
  border-bottom-right-radius: 0.5rem;
  padding: 0 2rem 2rem 2rem;
  min-height: 6rem;
}


.icon {
  max-height: 2rem;
  padding-right: 1rem;
}

.detfield {
  font-family: 'Titillium Web';
  font-size: 0.9rem;
  text-align: center;
  color: #32268b;
  border: none;
  border-radius: 0.5rem;
}

.protfield {
  font-family: 'Titillium Web';
  color: #32268b;
  border: none;
  border-radius: 0.5rem;
  min-height: 100%;
  min-width: 100%;
  padding-left: 0.5rem;
}

.commfield {
  font-family: 'Titillium Web';
  color: #32268b;
  border: none;
  border-radius: 0.5rem;
  min-height: 100%;
  min-width: 100%;
  padding-left: 0.5rem;
}

.konsumfield {
  font-family: 'Titillium Web';
  color: #32268b;
  border: none;
  border-radius: 0.5rem;
  min-height: 100%;
  min-width: 100%;
  padding-left: 0.5rem;
}

.posanc {
  position: relative;
  width: 0;
  height: 0;        
}

.giessenpopup {
  display: none;
  position: absolute;
  top: 1.5rem;
  left: -15rem;
  background: #6B8E23;
  min-width: 10rem;
  min-height: 18rem;
  border-radius: 0.5rem;
}

.kommentarpopup {
  display: none;
  position: absolute;
  top: 1.5rem;
  left: -10rem;
  background: #6B8E23;
  min-width: 10rem;
  min-height: 18rem;
  border-radius: 0.5rem;
}

.konsumpopup {
  display: none;
  position: absolute;
  top: 1.5rem;
  left: -5rem;
  background: #6B8E23;
  min-width: 10rem;
  min-height: 18rem;
  border-radius: 0.5rem;
}

.grid-container-popupgiessen {
  display: grid;
  margin: 2rem 2rem 2rem 2rem;
  grid-template-columns: 45% 30% 25%;
  grid-template-rows: repeat(6, auto);
  background-color: #c6e0b4;
  border-radius: 0.5rem;
  padding: 2rem 2rem 2rem 2rem;
  justify-content: center;
  grid-template-areas:
  "bezeichnung bezeichnung bezeichnung"
  "a1 b1 c1"
  "a2 b2 b2"
  "a3 b3 c3"
  "a4 b4 b4"
  "ok ok ok";
}

.grid-container-popupkommentar {
  display: grid;
  margin: 2rem 2rem 2rem 2rem;
  grid-template-columns: 100%;
  grid-template-rows: repeat(4, auto);
  background-color: #c6e0b4;
  border-radius: 0.5rem;
  padding: 2rem 2rem 2rem 2rem;
  justify-content: center;
  grid-template-areas:
  "bezeichnung"
  "a1"
  "a2"
  "ok";
}

.grid-container-popupkonsum {
  display: grid;
  margin: 2rem 2rem 2rem 2rem;
  grid-template-columns: 100%;
  grid-template-rows: repeat(4, auto);
  background-color: #c6e0b4;
  border-radius: 0.5rem;
  padding: 2rem 2rem 2rem 2rem;
  justify-content: center;
  grid-template-areas:
  "bezeichnung"
  "a1"
  "a2"
  "ok";
}

.grid-item-popup {
  min-height: 2.5rem;
  font-family: 'Titillium Web';
  background-color: #c6e0b4;
  text-align: center;
  vertical-align: middle;
  display: flex;
  align-items: center;
  justify-content: left;
}
.bezeichnung{
  grid-area: bezeichnung;
  font-weight: bold;
}
.field-a1 {
  grid-area: a1;
}
.field-b1 {
  grid-area: b1;
}
.field-c1 {
  grid-area: c1;
}
.field-a2 {
  grid-area: a2;
}
.field-b2 {
  grid-area: b2;
}
.field-a3 {
  grid-area: a3;
}
.field-b3 {
  grid-area: b3;
}
.field-c3 {
  grid-area: c3;
}
.field-a4 {
  grid-area: a4;
}
.field-b4 {
  grid-area: b4;
}
.field-ok {
  grid-area: ok;
  justify-content: right;
  margin-top: 1rem;
}

.addentryfield {
font-family: 'Titillium Web';
font-size: 0.9rem;
text-align: left;
color: #32268b;
border: none;
border-radius: 0.5rem;
padding-left: 0.5rem;
max-width: 90%;
}

#commentpop, #consumpop {
  min-width: 15rem;
  min-height: 13rem;
}

#zeichenzahlconsum, #zeichenzahlcomment {
  justify-content: right;
}

.addentryfieldnr {
  font-family: 'Titillium Web';
  font-size: 0.9rem;
  text-align: left;
  color: #32268b;
  border: none;
  border-radius: 0.5rem;
  padding-left: 0.5rem;
  max-width: 3rem;
}

#giessensubmit, #kommentarsubmit, #konsumsubmit {
font-family: 'Protest Riot';
color: white !important;
font-size: 1rem;
text-shadow: 1px 1px 0px black;
box-shadow: 2px 2px 2px hsl(80, 95%, 22%);
padding: 0.5rem 0.5rem;
border-radius: 10px;
border: thin solid white;
background: #6B8E23;
cursor: pointer;
}





@media only screen and (max-width: 767px) {
  /* Für iPhone-Displays und andere kleine Geräte */

  .grid-container-head {
    display: grid;
    grid-template-columns: auto 1fr 1fr;
    grid-template-rows: auto auto;
    background-color: #6B8E23;
    grid-template-areas:
    "burger logo user"
    "search search search";
  }

  .grid-item-head {
    background-color: #6B8E23;
    text-align: center;
    vertical-align: middle;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .burger {
    grid-area: burger;
  }

  .logo {
    grid-area: logo;
    font-family: 'Protest Riot';
    font-size: 1.8rem;
    justify-content: left;
  } 
    
  .search {
    grid-area: search;
    padding-top: 0.1rem;
    padding-bottom: 0.2rem;
  }

  .user {
    grid-area: user;
    justify-content: right;
  }

  .grid-container-content {
    display: grid;
    margin: 0 1.2rem;
    grid-template-columns: 28% 72%;
    grid-template-rows: repeat(13, auto);
    background-color: #c6e0b4;
    border-radius: 0.5rem;
    padding: 1.2rem;
    justify-content: center;
    grid-template-areas:
    "buttons buttons"
    "gid name"
    "seedpic seedpic"
    "marke brand"
    "eltern parents"
    "genetik genetic"
    "bluetetyp floweringtyp"
    "bluetezeit floweringtime"
    "gehaltthc thc"
    "gehaltcbd cbd"
    "hoehe height"
    "ertrag yield"
    "gattung genus";
  }

  .grid-item-content {
    min-height: 1.8rem;
    font-family: 'Titillium Web';
    font-size: 0.7rem;
    background-color: #c6e0b4;
    text-align: center;
    vertical-align: middle;
    display: flex;
    align-items: center;
    justify-content: left;
  }

  .button {
    max-height: 2rem;
    margin-right: 2rem;
    cursor: pointer;
    border-radius: 50%;
    background: #6B8E23;
  }
  
  .buttons {
    grid-area: buttons;
    justify-content: left;
    margin-top: 0;
    margin-bottom: 1.2rem;
  }

  .topic {
    font-weight: bold;
    background: linear-gradient(to right, #6B8E23 0%, #c6e0b4 90%);
    padding-left: 1rem;
    border-bottom: thin solid white;
  }
  
  .data {
    background: linear-gradient(to right, #c6e0b4 0%, #6B8E23 90%);
    padding-left: 1rem;
    border-bottom: thin solid white;
  }

  .gid {
    grid-area: gid;
    justify-content: center;
    min-width: 3rem;
    margin: 0 1.2rem 1.2rem 0;
    padding-bottom: 0rem;
    font-size: 0.8rem;
    font-weight: bold;
    writing-mode: horizontal-tb;
    rotate: 0turn;
    background: linear-gradient(to right, #6B8E23 0%, #c6e0b4 50%, #6B8E23 100%);
    border-radius: 0.5rem;
  }

  .seedpic {
    grid-area: seedpic;
    justify-content: center;
    margin: 0 0 1.2rem 0;
    padding: 1.2rem 1.2rem;
    background: radial-gradient(circle, #6B8E23 0%, #c6e0b4 50%, #6B8E23 100%);
    border-radius: 0.5rem;
  }

  .seedpic img {
    width: auto;
    height: 9rem;
    display: block;
    margin: 0 auto;
    border-radius: 0.5rem;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
  }

  .name {
    grid-area: name;
    justify-content: right;
    padding-top: 0;
    padding-bottom: 1.2rem;
    font-size: 1.2rem;
    font-weight: 700;
  }

  .grid-container-details {
    display: grid;
    margin: 0 1.2rem;
    margin-top: 1.2rem;
    grid-template-columns: 50% 50%;
    grid-template-rows: repeat(11, auto);
    background-color: #c6e0b4;
    border-radius: 0.5rem;
    padding: 1.2rem;
    justify-content: center;
    grid-template-areas:
    "saatdatum seeddate"
    "sprossdatum seedlingdate"
    "bluetedatum floweringdate"
    "erntedatum harvestdate"
    "abfuelldatum packingdate"
    "hoehecm heightcm"
    "ertraggramm yieldgramm"
    "protokolllabel protokolllabel"
    "protokoll protokoll"
    "kommentarlabel kommentarlabel"
    "comment comment"
    "konsumlabel konsumlabel"
    "konsum konsum";
  }
  
  .grid-item-details {
    min-height: 1.8rem;
    font-family: 'Titillium Web';
    font-size: 0.7rem;
    background-color: #c6e0b4;
    text-align: center;
    vertical-align: middle;
    display: flex;
    align-items: center;
    justify-content: left;
  }

  .dettopic {
    font-weight: bold;
    background: linear-gradient(to right, #6B8E23 0%, #c6e0b4 90%);
    padding-left: 1rem;
    border-bottom: thin solid white;
  }
  
  .detdata {
    background: linear-gradient(to right, #c6e0b4 0%, #6B8E23 90%);
    padding-left: 1rem;
    margin-right: 0;
    border-bottom: thin solid white;
  }

  .protokolllabel {
    grid-area: protokolllabel;
    font-weight: bold;
    background: linear-gradient(to right, #6B8E23 0%, #c6e0b4 50%, #6B8E23 100%);
    border-top-left-radius: 0.5rem;
    border-top-right-radius: 0.5rem;
    margin-top: 1.2rem;
    margin-left: 0;
    padding-left: 1rem;
  }
  
  .protokoll {
    grid-area: protokoll;
    background: linear-gradient(to right, #6B8E23 0%, #c6e0b4 50%, #6B8E23 100%);
    border-bottom-left-radius: 0.5rem;
    border-bottom-right-radius: 0.5rem;
    justify-content: center;
    margin-left: 0;
    padding: 0 1.2rem 1.2rem 1.2rem;
    min-height: 6rem;
  }
  
  .kommentarlabel {
    grid-area: kommentarlabel;
    font-weight: bold;
    background: linear-gradient(to right, #6B8E23 0%, #c6e0b4 50%, #6B8E23 100%);
    border-top-left-radius: 0.5rem;
    border-top-right-radius: 0.5rem;
    margin-top: 1rem;
    margin-right: 0;
    padding-left: 1rem;
  }
  
  .kommentar {
    grid-area: comment;
    background: linear-gradient(to right, #6B8E23 0%, #c6e0b4 50%, #6B8E23 100%);
    border-bottom-left-radius: 0.5rem;
    border-bottom-right-radius: 0.5rem;
    margin-right: 0;
    padding: 0 1.4rem 1.2rem 1rem;
    min-height: 6rem;
  }
  
  .konsumlabel {
    grid-area: konsumlabel;
    font-weight: bold;
    background: linear-gradient(to right, #6B8E23 0%, #c6e0b4 50%, #6B8E23 100%);
    border-top-left-radius: 0.5rem;
    border-top-right-radius: 0.5rem;
    margin-top: 1rem;
    margin-right: 0;
    padding-left: 1rem;
  }
  
  .konsum {
    grid-area: konsum;
    background: linear-gradient(to right, #6B8E23 0%, #c6e0b4 50%, #6B8E23 100%);
    border-bottom-left-radius: 0.5rem;
    border-bottom-right-radius: 0.5rem;
    margin-right: 0;
    padding: 0 1.4rem 1.2rem 1rem;
    min-height: 6rem;
  }
  
  .icon {
    max-height: 1.2rem;
    padding-right: 0.8rem;
  }

  .detfield {
    font-family: 'Titillium Web';
    font-size: 0.7rem;
    text-align: center;
    color: #32268b;
    border: none;
    border-radius: 0.5rem;
  }

  .giessenpopup {
    display: none;
    position: absolute;
    top: 1rem;
    left: -16.5rem;
    background: #6B8E23;
    min-width: 10rem;
    min-height: 18rem;
    border-radius: 0.5rem;
  }
  
  .kommentarpopup {
    display: none;
    position: absolute;
    top: 1rem;
    left: -17.1rem;
    background: #6B8E23;
    min-width: 10rem;
    min-height: 18rem;
    border-radius: 0.5rem;
  }
  
  .konsumpopup {
    display: none;
    position: absolute;
    top: 1rem;
    left: -17.1rem;
    background: #6B8E23;
    min-width: 10rem;
    min-height: 18rem;
    border-radius: 0.5rem;
  }

  .grid-container-popupgiessen {
    display: grid;
    margin: 1rem 1rem 1rem 1rem;
    grid-template-columns: 45% 30% 25%;
    grid-template-rows: repeat(6, auto);
    background-color: #c6e0b4;
    border-radius: 0.5rem;
    padding: 1rem 1rem 1rem 1rem;
    justify-content: center;
    grid-template-areas:
    "bezeichnung bezeichnung bezeichnung"
    "a1 b1 c1"
    "a2 b2 b2"
    "a3 b3 c3"
    "a4 b4 b4"
    "ok ok ok";
  }
  
  .grid-container-popupkommentar {
    display: grid;
    margin: 1rem 1rem 1rem 1rem;
    grid-template-columns: 100%;
    grid-template-rows: repeat(4, auto);
    background-color: #c6e0b4;
    border-radius: 0.5rem;
    padding: 1rem 1rem 1rem 1rem;
    justify-content: center;
    grid-template-areas:
    "bezeichnung"
    "a1"
    "a2"
    "ok";
  }
  
  .grid-container-popupkonsum {
    display: grid;
    margin: 1rem 1rem 1rem 1rem;
    grid-template-columns: 100%;
    grid-template-rows: repeat(4, auto);
    background-color: #c6e0b4;
    border-radius: 0.5rem;
    padding: 1rem 1rem 1rem 1rem;
    justify-content: center;
    grid-template-areas:
    "bezeichnung"
    "a1"
    "a2"
    "ok";
  }

}