{
  box-sizing: border-box;
}

/* Hintergrund der Seite und Schriftart */
body {
  font-family: Arial;
  background-color: #CFD0D0;
}

/*Aussehen des Headers */
.header {
  grid-area: header;
  text-align: center;
  font-size: 20px;
}

/* Container für alle Elemente */
.grid-container {
  display: grid;
  grid-template-areas: 
    'header header header header' 
    'monthBack monthBack monthBack monthBack'
	'monthBack monthBack monthBack monthBack'
	'monthBack monthBack monthBack monthBack';
  grid-template-rows: 60px repeat(3, 24vw);
  grid-template-columns: repeat(4, 24vw);
  grid-gap: 10px;
}

/* Hintergrund eines Monats */
.monthBack {
  background-color: #95938C;
}

/* Titel eines Monats */
.monthHeader {
	background-color: #E69124;
	text-align: center;
	padding: 10px;
	margin: 5px;
	font-weight: bold;
	font-size: 1vw;
}

/* Container eines einzelnen Monats */
.grid-monat {
  display: grid;
  grid-template-areas: 
    'kw wd wd wd wd wd wd wd' 
    'w t t t t t t t'
	'w t t t t t t t'
	'w t t t t t t t'
	'w t t t t t t t'
	'w t t t t t t t'
	'w t t t t t t t';
  grid-gap: 3px;
  height: 85%;
  margin-left: 5px;
  margin-right: 5px;
}

/* Aussehen der Wochen Felder der Monate */
.w, .kw {
  background-color: #E2686A;
  padding-top: 0.9vw;
  text-align: center;
}

/* Aussehen der Wochentags Felder der Monate */
.wd {
  background-color: #79DC68;
  padding-top: 0.9vw;
  text-align: center;
}

/* Aussehen der Tagesfelder der Monate */
.t {
  background-color: #E3D491;
  padding-top: 0.9vw;
  text-align: center;
}

/* Aussehen des Menü Buttons */
.hamburg-icon {
	position: sticky;
	bottom: 5px;
	left: 100%;
	z-index: 1;
	line-height: 40px;
	text-align: center;
	width: 50px;
	height: 50px;
	background-color: #E47822;
	border-radius: 30%;
	color: #FFFFFF;
	font-size: 30px;
}

/* Hovereffekt des Menü Buttons */
.hamburg-icon:hover {
	background-color: #E19050;
}

/* Aussehen des Home Buttons */
.home {
	position: sticky;
	bottom: 5px;
	z-index: 1;
	text-align: center;
	width: 50px;
	height: 50px;
	background-color: #E47822;
	border-radius: 30%;
	color: #FFFFFF;
	font-size: 40px;
}

/* Hovereffekt des Menü Buttons */
.home:hover {
	background-color: #E19050;
}

/* Aussehen der Sidebar */
.sidebar {
	height: 0;
	width: 100%;
	position: fixed;
	z-index: 1;
	top: 0;
	left: 0;
	background-color: rgba(84, 84, 84, 0.6);
	/*opacity: 0.5;*/
	transition: 0.25s;
}

/* Aussehen des Sidebar Texts */
.sidebar_Text {
	text-align: center;
	color: white;
	font-weight: bold;
	visibility: hidden;
}

/* Aussehen der gesamten Dropdown Button Auswahl */
.dropdown {
	margin: auto;
	width: 4%;
	visibility: hidden;
}

/* Aussehen der Elemente innerhalbs des Dropsdown Buttons */
.dropdown select {
	background-color: #ff9900;
	color: white;
	font-size: 18px;
}

/* Hovereffekt des Dropdown Buttons */
.dropdown select:hover {
	background-color: #ffad33;
}

/* Aussehen des Buttons zum Übernehmen des ausgewählten Jahres */
.dropdownButton {
	margin-left: 49%;
	padding-top: 3px;
	padding-bottom: 3px;
	background-color: #ff9900;
	color: white;
	visibility: hidden;
}

/* Aussehen des aktuellen Tages */
.dayCircle {
	background-color: green;
}

/* Responsive Layout - Anpassung der Struktur an Breite des Fensters */
/* Bei voller Größe vier Monate nebeneinander */

@media (max-width: 1300px) {
	/* Ab dieser Größe 3 Monate nebeneinander */
	.grid-container {
		grid-template-areas:
		'header header header'
		'jan feb maerz'
		'april mai jun'
		'jul aug sep'
		'okt nov dez';
		grid-template-rows: 60px repeat(4, 31.2vw);
		grid-template-columns: repeat(3, 31.2vw);
	}
	
	.monat {
		font-size: 1.5vw;
	}
	
	.grid-monat {
		height: 82.25%;
	}
	
	.dropdown {
		width: 8%;
	}
	
	.dropdownButton {
	margin-left: 48%;
	}
	
	.monthHeader {
	font-size: 1.5vw;
	}
}

@media (max-width: 780px) {
	/* Ab dieser Größe zwei Monate nebeneinander */
  .grid-container {
	  grid-template-areas:
	  'header header'
	  'jan feb'
	  'maerz april'
	  'mai jun'
	  'jul aug'
	  'sep okt'
	  'nov dez';
	  grid-template-rows: 60px repeat(6, 47vw);
	  grid-template-columns: repeat(2, 47vw);
  }
  .monat {
	  font-size: 2.5vw;
  }
  .grid-monat {
		height: 80%;
	}
	
	.dropdown {
		width: 9%;
	}
	
	.monthHeader {
	font-size: 2.5vw;
	}
}

@media (max-width: 470px) {
	/* Ab dieser Größe alle Monate untereinander */
	.grid-container  {
		grid-template-areas: 
		'header' 
		'jan' 
		'feb' 
		'maerz' 
		'april'
		'mai'
		'jun'
		'jul'
		'aug'
		'sep'
		'okt'
		'nov'
		'dez';
		grid-template-rows: 60px repeat(12, 92vw);
		grid-template-columns: 92vw;
	}
	
	.monat {
		font-size: 4vw;
	}
	
	.grid-monat {
		height: 77.75%;
		font-size: 5vw;
	}
	
	.dropdown {
		width: 19%;
	}
	
	.dropdownButton {
	margin-left: 46%;
	}
	
	.monthHeader {
	font-size: 5vw;
	}
}