/* open-sans-light - latin */
@font-face {
    font-family: opensans300;
    src: url('../fonts/opensans-light-webfont.woff2') format('woff2'),
         url('../fonts/opensans-light-webfont.woff') format('woff');
}

/* open-sans-regular - latin */
@font-face {
  font-family: opensans400;
  src: url('../fonts/open-sans-v15-latin-regular.woff2') format('woff2'), 
       url('../fonts/open-sans-v15-latin-regular.woff') format('woff'); 
}

/* open-sans-regular - latin */
@font-face {
  font-family: opensans600;
  src: url('../fonts/open-sans-v23-latin-600.woff2') format('woff2'),
       url('../fonts/open-sans-v23-latin-600.woff') format('woff'); 
}

/* open-sans-700 - latin */
@font-face {
  font-family: opensans700;
  src: url('../fonts/open-sans-v15-latin-700.woff2') format('woff2'), 
       url('../fonts/open-sans-v15-latin-700.woff') format('woff'); 
}
/* 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');
}

/* gantari-300 - latin */
@font-face {
  font-family: gantari300;
  src: url('../fonts/gantari-v4-latin-300.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* gantari-regular - latin */
@font-face {
  font-family: gantari400;
  src: url('../fonts/gantari-v4-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* gantari-500 - latin */
@font-face {
  font-family: gantari500;
  src: url('../fonts/gantari-v4-latin-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* gantari-600 - latin */
@font-face {
  font-family: gantari600;
  src: url('../fonts/gantari-v4-latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* gantari-700 - latin */
@font-face {
  font-family: gantari700;
  src: url('../fonts/gantari-v4-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}


* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
	font: 300 1rem gantari300, sans-serif;
	line-height: 1.8rem;
	color: #666666;
}
/* ----------------------------------------------------
	seiten hintergrund
------------------------------------------------------- */
body {
	background-image: url(../img/Hintergrund2.jpg);
	background-size: 100% 100%
}
img {
	max-width: 100%;
	height: auto;
	display: block;
}
#all {
	max-width: 1170px;
	margin: auto;
	box-shadow:0 0 8px #39633C;
	background:#FFFCF7;
}




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

	}
}

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

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

	#burger {
		position: fixed;
		top: 78px;
		right: 0px;
		height: 3.5rem;
		width: 3.5rem;
		background: #ffa800aa;
		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: rgba(240, 240, 240, 0.9);
		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: #76b62f;
		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: #353535;
	}
	#topnav ul {
		list-style: none;
		display: flex;
		justify-content: space-between;
	}
	#topnav li {
		flex-basis:0;
		flex-grow: 0;
	}
	#topnav a {
		color: #ffa800;
		text-decoration: none;
		letter-spacing: 0.03em;
		line-height: 26px;
		white-space: nowrap;
		font-weight: 400;
	}
	#topnav a:hover,
	#topnav a.akt {
		color: #fff;

	}
}

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

/* ----------------------------------------------------
	text
------------------------------------------------------- */
h2 {
	color: #666666;
	font: 2rem gantari400, sans-serif;
	line-height: 2.2rem;
	letter-spacing: 0.01rem;
}

h3 {
	color: #3E7742;
	font: 1.375rem gantari500, sans-serif;
	letter-spacing: 0.02rem;
	margin-bottom: 0.5rem;
}

h4 {
	color: #76b62f;
	font:700 1rem gantari, sans-serif;
	line-height: 1.3rem;
	letter-spacing: 0.01rem;
	padding: 0 0 5px 0;
}
strong {
	color:#666666;
	font: 0.9rem gantari700, sans-serif;
}
extra {
	color:#666666;
	font: 0.9rem gantari600, sans-serif;
}

.kleiner {
	font-size: 0.8rem;
}
.header2 {
	color: #ffa800;
	font: 1.375rem gantari700, sans-serif;
	letter-spacing: 0.02rem;
	padding-bottom: 1.37rem;
}
.header1 {
	color: #76b62f;
	text-decoration: none;
	font-family: Roboto, sans-serif;
	font-weight: 700;
	font-size: 24px;
	line-height: 30px;
	letter-spacing: 0.01em;
	margin-bottom: 10em;
}
.programmtitel2 {
	color: #ffa800;
	font: 1.375rem opensans600, sans-serif;
	line-height: 25px;
	letter-spacing: 0.02rem;
	margin-bottom: 0;
}
.programmtitel {
	color: #ffa800;
	font: 1.375rem opensans600, sans-serif;
	letter-spacing: 0.02rem;
	margin-bottom: 0;
}
.programmtitel:hover {
	color: #ffa800;
}

.datum {
	font: 1rem opensans700, sans-serif;
	line-height: 1.2rem;
	color: #666666;
}
.subtext {
	font: 0.9rem opensans600, sans-serif;
	line-height: 1rem;
	color: #666666;
}

.beschreibung {
	font: 0.9rem opensans400, sans-serif;
	line-height: 1.2rem;
	color: #666666;
	text-decoration: none;
}

ul.a {
	list-style: none;
  padding: 0 0 0 12px;
  text-indent: -12px;
	text-decoration: none;
 
}
ul.a li {
  content:"\25CF"; 
	padding-right: 5px;
	color: #ffa800;
  font: 0.9rem opensans400, sans-serif;
	line-height: 1.2rem;
	color: #666666;
	text-decoration: none;
}

ol {
	list-style: none;
    padding: 0 0 0 15px;
    text-indent: -15px;
	text-decoration: none;
}
ol li::before {
	content:"\25CF"; 
	padding-right: 5px;
	color: #ffa800;
	line-height: 1rem;
} 

p {
	line-height: 1.5rem;
	margin-bottom: 0.5rem;
}
main ul {
	list-style: none;
    padding: 0 0 0 12px;
    text-indent: -12px;
	text-decoration: none;
}
main ul li::before {
	content:"\25CF"; 
	padding-right: 5px;
	font-size: 0.9rem;
	color: #ffcc66;
	line-height: 1rem;
} 
main a {
	text-decoration: none;
	color:#666666;
}
main a:hover {
	color: #4F9854;
}
.aktiv {
	color:#666666;
}
.button {
	font: 400 1rem opensans400, sans-serif;
	color: #ffffff;
	cursor: pointer;
    padding-right: 5px;
    padding-left: 5px;
	background: #c2c0ba
}
.buttonohne {
	font-family: opensans400, sans-serif;
	font-size: 12px;
	color: #ffffff;
	cursor: pointer;
	padding: 2px;
	padding-right: 5px;
	padding-left: 5px;
	background: #c2c0ba
}
.button:hover {
	color: #ffffff;
	background: #4F9854;
}
.abstand {
	margin-top: 20px;
	padding-bottom: 40px;
}
.cookie {
	font: 0.7rem opensans400, sans-serif;
	letter-spacing: 0.05rem;
	padding-top: 5px;
}
.link {	
	font-family: opensans400, sans-serif;
	text-decoration: none;
	font-size: 14px;
	line-height: 14px;
	color: #666666;
}
.link:hover {
	color: #ffa800;
}
.link:a {
	color: #666666;
}

/* ----------------------------------------------------
	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: #154C19;
}
/* -------------------------
	footer spez. desktop
---------------------------- */
@media (min-width:700px) {
	footer {
		height: 130px;
		display: flex;
		justify-content: space-between;
		margin: 40px 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: 30%, 10%;
	}
}
/* -------------------------
	Spalten
---------------------------- */
.spalten > div {
	margin: 2% 0;
}
@media (min-width:700px) {
	.spalten {
		display: flex;
		justify-content: space-between;	
	}
	.spalten > div {
		flex-basis: 30%, 10%;
	}
}

/* -------------------------
	Reihe
---------------------------- */

 /* Three image containers (use 25% for four, and 50% for two, etc) */
.column {
  float: left;
  width: 33.33%;
  padding: 0px;
}

/* Clear floats after image containers */
.row::after {
  content: "";
  clear: both;
  display: table;
} 

/* -------------------------
	Programmübersicht
---------------------------- */

/* Two unequal columns that floats next to each other */
.column2 {
  float: left;
}

.left {
  width: 25%;
  padding-bottom: 30px;
  padding-top: 5px;
}

.right {
  width: 75%;
  padding-left: 30px;
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}
@media (max-width:950px) {
	.column2 {
  float: left;
  }
  .left {
  width: 20%;
  padding-bottom: 30px;
  padding-top: 5px;
  }

  .right {
  width: 80%;
  padding-left: 10px;
  }

  /* Clear floats after the columns */
  .row:after {
  content: "";
  display: table;
  clear: both;
  }
}