/* FONTS */

/* @font-face {
	font-family: Breuer-Light;
	src: url("fonts/BreuerText-Light.otf") format("opentype");
}

@font-face {
	font-family: Breuer-Medium;
	src: url("fonts/BreuerText-Medium.otf") format("opentype");
} */

@font-face {
	font-family: Breuer-Light;
	src: url("fonts/breuertext-light-webfont.ttf") format("truetype");
}

@font-face {
	font-family: Breuer-Medium;
	src: url("fonts/breuertext-medium-webfont.ttf") format("truetype");
}


/* ALLGEMEIN */

* {
	box-sizing: border-box;
}

html {
	max-width: 100vw;
	overflow-x: hidden;
	background-image: url("../img/body_rebe.jpg");
	background-size: cover;
	background-repeat: no-repeat;
	position: absolute;
}

.wrapper {
	max-width: 1200px;
	margin: 0 auto;
	padding-top: 124px;
}

.kategorie {
	padding: 4rem;
	background-color: rgba(245,245,245,.5);
	//background-color: rgba(240,240,248,.75);
	//border-bottom: 2px dashed red;
}

.show-more {
	cursor: pointer;
	font-size: 1.875rem;
}

.hideContent {
	height: 1rem;
  overflow: hidden;
}

.showContent {
  height: auto;
}

.unspinContent {
	display: inline-block;
  transform: rotate(0deg);
}

.spinContent {
	display: inline-block;
  transform: rotate(90deg);
}

.to-top {
	height: 5rem;
	width: 5rem;
	position: fixed;
	z-index: 100;
	bottom: 2%;
  right: 2%;
	background-color: #269f46;
	border-radius: 100%;
	box-shadow: 0px 0px 32px 0px rgba(0,0,0,0.5);
	text-decoration: none !important;
}

.to-top span {
	color: black;
	font-family: "Breuer-Light", "Arial Narrow", sans-serif;
	font-size: 3rem;
	display: block;
	text-align: center;
	margin: 20% auto 0 auto;
}


/* TEXTE */

h1, h2, h4 {
	font-family: "Breuer-Medium", "Arial Black", sans-serif;
}

h3, h5, h6, p, a, li {
	font-family: "Breuer-Light", "Arial Narrow", sans-serif;
}

.ueberschrift {
	font-size: 3rem;
	text-align: center;
	margin-bottom: 3rem;
}

h1 {
	font-size: 2rem;
	text-transform: uppercase;
}

h2.schnupper-h2 {
	border-bottom: 3px solid #a8d532;
	//text-decoration: underline;
	//text-decoration-color: #a8d532;
	display: inline-block;
}

h3 {
	font-size: 1.17rem;
}

h4 {
	padding: 5px;
	font-size: 1.5rem;
	line-height: 1.75;
	color: white;
	background-color: #8dcecb;
}

h5 {
	padding: 3px;
	font-size: 1.125rem;
	line-height: 2;
	color: white;
	background-color: #868889;
}

h6 {
	font-size: 1.25rem;
}

h4, h5, h6 {
	display: inline;
}

span.klammern-blau {
	color: #8dcecb;
}

span.klammern-gruen {
	color: #a8d532;
}


/* SEKTIONEN */

#header-wrapper {
	position: fixed;
	background-color: white;
	width: 100vw;
	z-index: 99;
}

#header {
	max-width: 1200px;
	margin: 0 auto;
	display: flex;
	align-items: center;
}

#header img {
	display: inline;
	margin-left: 3%;
	margin-right: 8%;
}

#header h1 {
	display: inline;
	text-align: center;
	font-size: 3rem;
	padding-bottom: 3px;
	border-bottom: 5px solid #b9ca3f;
}

#start {
	padding: 0;
}

#start img {
	width: 100%;
	height: auto;
}

.kategorie ul {
	list-style: none;
	padding-left: 0;
}

.kategorie ul li {
	border-bottom: 1px solid black;
}

.kategorie ul li:last-of-type {
	border-bottom: none;
}

.timetable-1 {
	display: flex;
}

.timetable-1 div:first-child {
	flex-basis: 30%;
	margin-top: 0.83em;
}

.timetable-1 div:last-child {
	flex-basis: 70%;
	margin: 0;
}

#navigation {
	padding-top: 5px;
	background-color: rgba(245,245,245,.5);
}

#navigation img {
	width: 8rem;
	height: auto;
}

/* #navigation img:hover {
	box-shadow: 10px 10px 55px 0px rgba(0,0,0,0.75);
	-webkit-filter: drop-shadow: 10px 10px 55px 0px rgba(0,0,0,0.75);
} */

.nav-erste-reihe {
	width: 40%;
	margin: 0 auto;
	padding-top: 5%;
	display: flex;
	justify-content: space-between;
}

.nav-zweite-reihe {
	width: 40%;
	margin: 0 auto;
	margin-top: 5%;
	padding-bottom: 5%;
	display: flex;
	justify-content: space-between;
}

#navigation a {
	text-decoration: none !important;
}

#navigation a p {
	color: black;
	font-weight: bold;
	font-size: 1.5rem;
	text-align: center;
}

#begruessung {
	padding-bottom: 5px;
	text-align: center;
	/border: 1px solid #a8d532;
}

#vorstellung-liste {
	line-height: 2;
}

#vorstellung-liste a {
	color: black;
	text-decoration: none;
}

#bubble-box {
	display: flex;
	justify-content: space-around;
	align-content: space-around;
	flex-wrap: wrap;
}

.master-bubble {
	width: 18rem;
	height: 18rem;
	border-radius: 100%;
	border: 15px solid #8dcecb;
	background-color: rgba(245,245,245,.8);
	margin: 1.5rem auto;
}

.master-bubble span {
	display: block;
	margin: 25% auto 0 auto;
	padding-left: 1rem;
	padding-right: 1rem;
	text-align: center;
}

#bubble-box > div:last-child span {
	margin: 10% auto 0 auto;
}

#lageplan img {
	max-width: 100%;
	height: auto;
}

#footer-wrapper {
	background-color: white;
	margin-top: -1.21rem;
	width: 100vw;
	height: 5rem;
}

#impressum {
	max-width: 1200px;
	margin: 0 auto;
	position: relative;
	top: 40%;
}

#impressum a {
	color: black;
	text-align: center;
}



/* MEDIA QUERIES */

@media only screen and (max-width: 1000px) {
	html {
		font-size: 1rem;
	}
	h1 {
		font-size: 2.5rem !important;
	}
	.wrapper {
		padding-top: 105px;
	}
	.nav-erste-reihe {
		width: 75%;
	}
	.nav-zweite-reihe {
		width: 55%;
	}
	#header img {
		margin-left: 2%;
		margin-right: 3%;
	}
}

@media only screen and (max-width: 760px) {
	html {
		font-size: .9rem;
	}
	#header {
		flex-direction: column;
		justify-content: center;
	}
	.wrapper {
		padding-top: 168px;
	}
	.nav-erste-reihe {
		width: 90%;
	}
	.nav-zweite-reihe {
		width: 65%;
	}
	.master-bubble {
		width: 24rem;
		height: 24rem;
	}
	.timetable-1 {
		flex-direction: column;
		-webkit-flex-direction: row;
	}
	.kategorie {
		padding: 2rem;
	}
}

@media only screen and (max-width: 555px) {
	html {
		font-size: .85rem;
	}
	.nav-erste-reihe {
		width: 100%;
	}
	.nav-zweite-reihe {
		width: 70%;
	}
}

@media only screen and (max-width: 480px) {
	html {
		font-size: .8rem;
	}
	.wrapper {
		padding-top: 157px;
	}
	#navigation img {
		width: 6rem;
	}
	p {
		font-size: 1rem !important;
	}
}

@media only screen and (max-width: 440px) {
	html {
		font-size: .7rem;
	}
	.wrapper {
		padding-top: 135px;
	}
	#navigation img {
		width: 5rem;
	}
	h1 {
		font-size: 2rem !important;
	}
}

@media only screen and (max-device-width: 760px) and (orientation: landscape) {
	#header h1 {
		display: none;
	}
	#header-wrapper, #header {
		max-height: 80px;
	}
	.wrapper {
		padding-top: 80px;
	}
}