/* Roboto, sans-serif-300 - latin */
@font-face {
  font-family: roboto300;
  src: url('../fonts/roboto-v27-latin-300.woff2') format('woff2'), 
       url('../fonts/roboto-v27-latin-300.woff') format('woff');
}

/* Roboto, sans-serif-regular - latin */
@font-face {
  font-family: roboto400;
  src: url('../fonts/roboto-v27-latin-regular.woff2') format('woff2'), 
       url('../fonts/roboto-v27-latin-regular.woff') format('woff');
	}
	
/* Roboto, sans-serif-500 - latin */
@font-face {
  font-family: roboto500;
  src: url('../fonts/roboto-v27-latin-500.woff2') format('woff2'),
       url('../fonts/roboto-v27-latin-500.woff') format('woff');
}

/* Roboto, sans-serif-700 - latin */
@font-face {
  font-family: roboto700;
  src: url('../fonts/roboto-v27-latin-700.woff2') format('woff2'),
       url('../fonts/roboto-v27-latin-700.woff') format('woff');
}
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
	font:300 1rem roboto300, sans-serif;
}
/* ----------------------------------------------------
	seiten hintergrund
------------------------------------------------------- */
body {
	background:#e0e0e0;
}
img {
	max-width: 100%;
	height: auto;
	display: block;
}
#all {
	max-width: 1170px;
	margin: auto;
	box-shadow:0 0 8px #aeadac;
	background:#fff;
}




/* ----------------------------------------------------
	topheader
------------------------------------------------------- */
#topheader {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	height: 120px;
	padding: 0 18px;
}
/* -------------------------
	topheader spez. moblie
---------------------------- */
@media (max-width:950px) {
	#topheader img {
		height: 109px; 
	}
}
/* -------------------------
	topheader spez. desktop
---------------------------- */
@media (min-width:951px) {
	#topheader {
		height: 120px;
		padding: 0 70px;
	}
}

/* ----------------------------------------------------
	navi
------------------------------------------------------- */
input[id*="checker"] {display: none;}

/* -------------------------
	navi für moblie
---------------------------- */
@media (max-width:950px) {
	/* Burger-Button -------------------*/

	#burger {
		position: fixed;
		top: 120px;
		right: 0px;
		height: 3.5rem;
		width: 3.5rem;
		background: #F9A01Bb0;
		display: block;
		z-index: 101;
		transition: 1s;
	}


	/* Linien des Burgermenu ---*/
	#burger .line {
		height: 2px;
		width: 60%;
		position: absolute;
		left: 20%;
		background: #fff;
		transition: 0.5s 0.5s;
	}

	#burger .line:nth-of-type(1) {
		top: 34%;
	}

	#burger .line:nth-of-type(2) {
		top: 49%;
	}

	#burger .line:nth-of-type(3) {
		top: 64%;
	}

	#navchecker:checked+#burger .line:nth-of-type(1) {
		transform: rotate(45deg);
		top: 49%;
	}

	#navchecker:checked+#burger .line:nth-of-type(2) {
		transform: rotate(-135deg);
	}

	#navchecker:checked+#burger .line:nth-of-type(3) {
		transform: rotate(-45deg);
		top: 49%;
	}


	/* navi -----*/

	#navchecker {
		display: none;
	}
	#topnav {
		position: fixed;
		top: 0;
		right: 0;
		transform: translateX(100%);
		max-width: 400px;
		height: 100vh;
		line-height: 40px;
		background: #F9A01B;
		z-index: 99;
		transition: .5s;
	}

	#navchecker:checked~#topnav {
		transform: translateX(0%);
	}

	#topnav ul {
		list-style: none;
		margin-top: 78px
	}

	#topnav ul a {
		text-decoration: none;
		text-align: left;
		display: block;
		font-size: 1.2rem;
		color: #333;
		margin: 0 22vw 0 6vw;
		transform: scale(1);
		font-weight: 400;
		transition: 0.5s;
	}

	#topnav a:hover,
	#topnav a.akt {
		color: #ffffff;
		transform: scale(1.2) translateX(8px);
	}
	/* Zwischenschicht #backnav ---*/

	#backnav label {
		display: block;
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: -1;
		background: rgba(0,0,0,0.1);
		cursor: pointer;
		transition:0.5s;
	}

	#navchecker:checked~#backnav label {
		z-index: 98;
	}


}

/* -------------------------
	navi für desktop
---------------------------- */
@media (min-width:951px) {
	#topnav {
		padding: 0 70px;
		background: #F9A01B;
	}
	#topnav ul {
		list-style: none;
		display: flex;
		justify-content: space-between;
	}
	#topnav li {
		flex-basis:0;
		flex-grow: 0;
	}
	#topnav a {
		color: #fff;
		text-decoration: none;
		letter-spacing: 0.03em;
		line-height: 26px;
		white-space: nowrap;
		font-weight: 400;
	}
	#topnav a:hover,
	#topnav a.akt {
		color: #565656;
		font-weight: 700;

	}
}

/* ----------------------------------------------------
	main
------------------------------------------------------- */
main {
	margin-top: 36px;
	display: block;
	padding: 0 18px;
}
/* -------------------------
	main für desktop
---------------------------- */
@media (min-width:700px) {
	main {
		margin-top: 72px;
		padding: 0 70px;
	}
}

/* ----------------------------------------------------
	text
------------------------------------------------------- */
h1 {
	color: #7A7A7A;
	font:700 1.7rem roboto, sans-serif;
	line-height: 1.5rem;
	letter-spacing: 0.01rem;
}
h2 {
	color: #F9A01B;
	font:700 1.45rem roboto, sans-serif;
	line-height: 1.4rem;
	letter-spacing: 0.01rem;
	margin-top: 30px;
}

h3 {
	color: #7A7A7A;
	font:300 1.7rem roboto, sans-serif;
	line-height: 2.325rem;
	letter-spacing: 0.02rem;
	margin-bottom: 1.5em;
}

h4 {
	color: #F9A01B;
	font:700 1rem roboto, sans-serif;
	line-height: 1.3rem;
	letter-spacing: 0.01rem;
	padding: 5px 0 5px 0;
}
strong {
	color:#000000;
	font: 500 1rem roboto500;
}
.header2 {
	color: #F9A01B;
	font:700 1.5rem roboto, sans-serif;
	line-height: 1.875rem;
	letter-spacing: 0.02rem;
}
.header1 {
	color: #7A7A7A;
	font:300 2rem roboto, sans-serif;
	line-height: 3rem;
	letter-spacing: 0.01rem;
}
.teaser {
	font:400 1.375rem roboto, sans-serif;
	line-height: 1.625rem;
	letter-spacing: 0.05rem;
}
.teaser:hover {
	color: #F9A01B;
}
ol {
	list-style: none;
    padding: 0 0 0 15px;
    text-indent: -15px;
	text-decoration: none;
}
ol li::before {
	content:"\25CF"; 
	padding-right: 5px;
	color: #F9A01B;
	line-height: 1.375rem;
} 

p {
	line-height: 1.375rem;
}
main ul {
	list-style: none;
    padding: 0 0 0 12px;
    text-indent: -12px;
	text-decoration: none;
}
main ul li::before {
	content:"\276F"; 
	padding-right: 5px;
	font: 500 1rem roboto500;
	color: #F9A01B;
	line-height: 1.375rem;
} 
main a {
	text-decoration: none;
	color:#000;
}
main a:hover {
	background: #F6F6F6;
}
.aktiv {
	color:#fff;
}
.button {
	font: 400 1rem roboto400, sans-serif;
	color: #ffffff;
	cursor: pointer;
	padding: 2px;
    padding-right: 5px;
    padding-left: 5px;
	background: #c2c0ba
}
.button:hover
{
	background: #F9A01B;
}
.cookie {
	font:300 0.7rem roboto300, sans-serif;
	letter-spacing: 0.05rem;
	padding-top: 5px;
}
.zitiert {
	font:300 0.7rem roboto300, sans-serif;
	letter-spacing: 0.05rem;
	padding-top: 5px;
	color: #4a4a4a;
}
.beschreibung {
	font:300 1rem roboto300, sans-serif;
	margin-top: 10px;
	margin-left: 16px;
	line-height: 22px;
	color: #000;
}
.beschreibung2 {
	font:300 1rem roboto300, sans-serif;
	margin-top: 10px;
	margin-left: 0px;
	line-height: 22px;
	color: #000;
}

/* ----------------------------------------------------
	footer
------------------------------------------------------- */
footer {
	margin-top: 36px;
	color: #fff;
	font-size: 0.938rem;
	line-height: 1.5rem;
	letter-spacing: 0.03rem;
	background: #828282;
	padding: 23px 18px;
}
footer > section {
	margin-bottom: 1rem;
}
footer > section:last-of-type {
	margin: 0;
}
footer a {
	text-decoration: none;
	color: #fff;
}
footer a:hover {
	color: #f90;
}
/* -------------------------
	footer spez. desktop
---------------------------- */
@media (min-width:700px) {
	footer {
		height: 130px;
		display: flex;
		justify-content: space-between;
		margin: 80px 0 0;
		padding: 28px 70px;	
	}
	footer > section {
		margin: 0;
	}
}

/* ----------------------------------------------------
	frei Klassen
------------------------------------------------------- */
@media (max-width:950px) {
	.nomobile { display: none;}
}
@media (min-width:951px) {
	.nodesk { display: none;}
}

/* -------------------------
	Zweispalter
---------------------------- */
.zweispalter > div {
	margin: 2% 0;
}
@media (min-width:700px) {
	.zweispalter {
		display: flex;
		justify-content: space-between;
	}
	.zweispalter > div {
		flex-basis: 48%;
	}
}

/* ----------------------------------------------------
	eigen
------------------------------------------------------- */
	.div2 { margin-left:15%;}
	.div3 { margin-left:16%;}
	
	
.button {
	font: 400 1rem roboto400, sans-serif;
	color: #ffffff;
	cursor: pointer;
    padding-right: 5px;
    padding-left: 5px;
	background: #c2c0ba
}
.buttonohne {
	font-family: roboto400, sans-serif;
	font-size: 12px;
	color: #ffffff;
	cursor: pointer;
	padding: 2px;
	padding-right: 5px;
	padding-left: 5px;
	background: #c2c0ba
}
.button:hover {
	color: #ffffff;
	background: #F9A01B;
}