* {
  box-sizing: border-box;
}

:root {
  --gold: #d09b28;
  --white: white;
  --black: black;
  --beige: #f6f5e3;
}

body
{
    font-size: 14px;
    font-family: Roboto, sans-serif;
}

.column1 {
  width: 33%;
  float: left;
  padding: 50px;
  border: 0px;
}

.img-responsive {
  max-width: 100%;
  height: auto;
}

.column2 {
  width: 67%;
  float: left;
  padding: 15px;
  border: 0px;
}

.heading-2 {
    font-family: Raleway, sans-serif;
    font-weight: 600;
    line-height: 1.3;
	color: var(--gold);
}

.overlay-heading {
    font-family: Raleway, sans-serif;
    font-weight: 600;
    line-height: 1.3;
	color: var(--gold);
	text-align: center;
	margin-top: 80px;
}
.form-field {
	height: 50px;
}

.form-button {
    border-radius: 5px;
	line-height: inherit;
    cursor: pointer;
    border: 0;
    padding: 9px 15px;
    text-decoration: none;
	background-color: var(--gold);
    color: #333;
    background-image: linear-gradient(135deg, #b37c1c, #f4db66 35%, #deb550 75%, #edd15c);
}

.form-item {
	width: 300px;
	margin-top: 20px;
	text-transform: uppercase;
    font-family: Roboto, sans-serif;
    display: block;
}

.form-label {
	width: 300px;
	margin-top: 20px;
	text-transform: uppercase;
    font-family: Roboto, sans-serif;
    display: block;
	text-align: left;
}


.je-alter {
    display: inline-block;
	text-align: right;
    width:55%;
}
.je-energie {
    display: inline-block;
	text-align: center;
    width:45%;
}

.je-aktuell { 
    background-color: #769576;
	color: #000000;
}

#gebdat {
	margin-top: 5px;
	font-size: 18px;
}

#gesundheit-overlay {
  position: fixed; /* Sit on top of the page content */
  display: none; /* Hidden by default */
  width: 100%; /* Full width (cover the whole page) */
  height: 100%; /* Full height (cover the whole page) */
  overflow-y: scroll;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(255,255,255,0.9); /* Black background with opacity */
  z-index: 2; /* Specify a stack order in case you're using a different order for other elements */
  cursor: pointer; /* Add a pointer on hover */
}

#jahresenergien-overlay {
  position: fixed; /* Sit on top of the page content */
  display: none; /* Hidden by default */
  width: 100%; /* Full width (cover the whole page) */
  height: 100%; /* Full height (cover the whole page) */
  overflow-y: scroll;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(255,255,255,0.9); /* Black background with opacity */
  z-index: 2; /* Specify a stack order in case you're using a different order for other elements */
  cursor: pointer; /* Add a pointer on hover */
}

.grid-container {
    display: grid;
	grid-template-columns: 1fr auto 4fr 1fr 1fr 1fr; /* Unterschiedliche Breiten für jede Spalte */
	grid-template-rows: repeat(9, 1fr);    /* 9 Zeilen mit gleicher Höhe */
	gap: 0px; /* Abstand zwischen den Zellen */
	max-width: 1024;
	margin-left: 50px;
	margin-right: 50px;
	//height: 100vh; /* Volle Höhe des Viewports */
	box-sizing: border-box;
}

.grid-item {
	background-color: #FFFFFF;
	border: 1px solid #e0e058;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 16px;
	font-family: Roboto, sans-serif;
	color: var(--gold);
}

.grid-item.gold {
    background-color: var(--gold);
	color: #FFFFFF;
}

.grid-item.left-align {
	align-items: left;
	justify-content: left;
	padding-left: 8px;
}

.grid-item.textrotate {
	writing-mode: horizontal-tb;
}

.grid-item.double-column {
    grid-column: span 2; /* Dieses Element erstreckt sich über zwei Spalten */
}

.header1 {
  grid-row: 1;
  grid-column: 1;
}
.header2 {
  grid-row: 1;
  grid-column: 2;
}
.header3 {
  grid-row: 1;
  grid-column: 3;
}

.clickable-image
{
    cursor: pointer;
}

.jahresenergien-container {
    display: grid;
	grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
	grid-auto-flow: column;    
	gap: 0px; /* Abstand zwischen den Zellen */
	max-width: 750;
	margin-left: 50px;
	margin-right: 50px;
	box-sizing: border-box;
}

.jahresenergien-text {
	max-width: 750;
    margin-left: 50px;
	margin-right: 50px;
}


@media only screen and (max-width: 1024px) {
  /* For mobile phones: */
  [class*="column"] {
    width: 100%;
	text-align: center;
  }
  
}

@media only screen and (max-width: 700px) {
  .overlay-heading {
	margin-top:20px;
  }
  .grid-container {
	grid-template-columns: 0 auto 4fr 1fr 1fr 1fr; 
	margin-left: 5px;
	margin-right: 5px;
  }
  
  .jahresenergien-container {
	grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
	margin-left: 5px;
	margin-right: 5px;
  }
  
  .jahresenergien-text {
    margin-left: 5px;
	margin-right: 5px;
  }
  
  .header3 {
	  display:none;
  }
  
  .grid-item {
	font-size: 14px;
  }

  .grid-item.textrotate {
	writing-mode: vertical-lr;
  }
  
  .grid-container {
	grid-template-columns: 0 auto 4fr 1fr 1fr 1fr; 
	margin-left: 5px;
	margin-right: 5px;
  }
}