/* Home css */

@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 300;
  src: url("../tq5_fonts/oswald/oswald-300.woff2") format('woff2');
}

@font-face {
  font-family: 'Tenor Sans';
  font-style: normal;
  font-weight: 400;
  src: url("../tq5_fonts/tenor_sans/TenorSans.woff2") format('woff2');
}

@font-face {
  font-family: 'Fira Sans';
  font-style: normal;
  font-weight: 100;
  src: url("../tq5_fonts/fira sans/fira-sans-300.woff2") format('woff2');
}

/* verhindert die Margins, die Browsers automatisch einfügen */
* {
    margin: 0;
	padding: 0;
}

/* Code fürs responsive images */
img {
	width: 100%;
	height: auto;
	max-width: 200px;
	min-width: 100px; /* original 100px  - Änderung ändert irgendwie nichts!*/
	display: block;
    margin-top: 20px;
	margin-bottom: 20px;
	margin-left: auto;
    margin-right: auto;
}

.box {
	padding: 10px 40px 5px 40px;
	font-size: 100%;
}

.grid-musicals {
	background-image: url("../tq5_hintergruende/tq5_home_hintergrund.jpg");
	background-size: cover;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%),1fr)); /* responsive grid */
	color: #660033;
	font-family: 'Oswald';
}

.grid-mehr {
	background-image: url("../tq5_hintergruende/tq5_home_hintergrund.jpg");
	background-size: cover;
	display: grid;
	grid-gap: 7px;
	grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%),1fr)); /* responsive grid */
	color: #660033;
}

.grid-studiotheater {
	background-image: url("../tq5_hintergruende/tq5_home_hintergrund.jpg");
	background-size: cover;
	display: grid;
	grid-gap: 7px;
	grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%),1fr)); /* responsive grid */
	color: #660033;
}

/* Um die Fontgröße responsive zu machen */
html {
	font-size: calc(15px + 0.390625vw);
}

h1 {
	font-family: Tenor Sans;
	line-height: 250%;
	font-size: 2rem; /* ist wie original*/
	text-align: center;
	background-color: MintCream;
	padding-top: 1.5rem;
	padding-bottom: 1.5rem;
	color: #023020;/*ein sehr dunkles grün;*/
}

h2 {
	font-family: Fira Sans;
	font-size: 1.18rem;
	/*padding-top: 0.3rem;*/
	padding-bottom: 0.7rem;
	text-align: center;
	color: #023020;
}

h3 {
	font-family: Fira Sans;
	font-size: 1.17rem;
	text-align: center;
	padding-top: 0.3rem;
	padding-bottom: 2rem;
	background-color: MintCream;
	color: #023020;
}

p {
	font-family: Fira Sans;
	font-size: 1rem;
	line-height: 150%;
	margin-bottom: 0.8rem;
	text-align: center;
	color: #023020;
}	

.footer p {
	font-family: Oswald;
	font-size: 0.9rem;
	line-height: 3rem;
	text-align: center;
	padding-bottom: 0; /* irgendwie notwendig, sonst bleibt etwas Abstand bis Ende der Seite! */
	margin-bottom: 0;
	color: #023020;
	background-color: #F0F8FF;
}

/* Cookie Warnung */
#cookie {
  position: fixed;
  display: block;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0;
  padding: 0;
}
#cookie input {
  display: none;
}
#cookie input:not(:checked) ~ span::before {
  content: "Diese Website verwendet keine Cookies, sie enthält aber Links zu Youtube-Videos der Musicals. Die Videos sind nicht auf der Website eingebettet. Erst beim Klicken auf einen Youtube-Link, wird das Video auf der Youtube-Seite in einem neuen Tab geöffnet. Youtube verwendet Cookies.";
  display: inline;
}
#cookie input:checked ~ * {
  display: none;
  pointer-events: none;
}
#cookie {
  color: White;
  background-color: DarkRed;
  text-align: center;
}
#cookie > * {
  margin: 0.5em;
}