@charset "utf-8";

/* Generelle Angaben * --------------------------------------- */
body {
	font-size: 1.2rem;
	font-style: normal;
	background: #1b1b1f;
	font-family: 'Montserrat', sans-serif;
	/* nötig, um Animationen ablaufen zu lassen mit wow. Alternativ: scrollBar: true setzen im fullpage*/
	/* overflow: hidden !important;*/
}

/* montserrat-regular - latin */
@font-face {
	font-family: 'Montserrat';
	font-style: normal;
	font-weight: 400;
	src: url('../fonts/montserrat-v14-latin-regular.eot');
	/* IE9 Compat Modes */
	src: local('Montserrat Regular'), local('Montserrat-Regular'),
		url('../fonts/montserrat-v14-latin-regular.eot?#iefix') format('embedded-opentype'),
		/* IE6-IE8 */
		url('../fonts/montserrat-v14-latin-regular.woff2') format('woff2'),
		/* Super Modern Browsers */
		url('../fonts/montserrat-v14-latin-regular.woff') format('woff'),
		/* Modern Browsers */
		url('../fonts/montserrat-v14-latin-regular.ttf') format('truetype'),
		/* Safari, Android, iOS */
		url('../fonts/montserrat-v14-latin-regular.svg#Montserrat') format('svg');
	/* Legacy iOS */
}

/* Was passiert, wenn kein Javascript aktiviert ist * --------------------------------------- */
.noscript_text {
	display: block;
	widht: inherit;
	font-size: 14px;
	font-weight: bold;
	color: #fff;
	background-color: #f00;
	padding: 5px;
	position: absolute;
	top: 0;
	left: 0;
}

/* Nichts gefunden oder nichts ausgewählt * --------------------------------------- */
.fehler {
	color: red;
	font-weight: bold;
	padding-top: 1%;
	padding-bottom: 0%;
	margin-bottom: 0%;
}

#section0.fp-section,
#section1.fp-section,
#section2.fp-section,
#section3.fp-section,
#section4.fp-section,
#section5.fp-section,
#section6.fp-section,
#section7.fp-section {
	/*height: auto !important;
	min-height: 100%;*/
}

#icons li {
	margin: 2px;
	position: relative;
	padding: 4px 0;
	cursor: pointer;
	float: left;
	list-style: none;
}

/*-------------CSS Document Backgrounds will cover all the section  --------------------------------------- */
.section {}

.slide {
	background-size: cover;
}

#maerkte,
#sache,
#jahr_anfang,
#jahr_ende,
#ausgabe {
	height: 2em;
}

#jahr_anfang {
	margin-right: 5%;
}

#slider {
	width: 100%;

}

#navi_oben h1 {
	padding-top: 70px;
	color: antiquewhite;
}

/*-------------Button, der immer einen Pfeil nach oben anzeigt  --------------------------------------- */

#button_up {
	display: inline-block;
	background-color: #FFAD70;
	width: 50px;
	height: 50px;
	text-align: center;
	border-radius: 4px;
	margin: 30px;
	position: fixed;
	bottom: 30px;
	right: 30px;
	transition: background-color .3s,
		opacity .5s, visibility .5s;
	opacity: 0;
	visibility: hidden;
	z-index: 1000;
}

#button_up:hover {
	cursor: pointer;
	background-color: #333;
}

#button_up:active {
	background-color: #555;
}

#button_up::after {
	font-family: "Font Awesome 5 Free";
	content: "\f077";
	color: #fff;
	font-weight: 900;
	font-size: 2em;

}

#button_up.show {
	opacity: 1;
	visibility: visible;
}

.banner::before {
	font-family: "Font Awesome 5 Free";
	content: "\f309";
	color: #fff;
}

.banner {

	background-color: #FFAD70;
	font-weight: 900;
	font-size: 2em;
	width: 50px;
	height: 50px;
	text-align: center;
	border-radius: 4px;
	margin: 30px;
	bottom: 30px;

}

/* Formular - Suchmaske * --------------------------------------- */
form {
	background-color: rgba(255, 255, 255, 0.75);
	width: 100%;

}

.flex-outer {
	display: flex;
	flex-flow: column;
	height: 85vh;
	justify-content: space-around;
	border-radius: 2px;
	border-color: white;
	padding-top: 2%;
	padding-left: 10vw;
	padding-right: 10vw;
	margin-top: 1vh;
}

flex-outer li {
	padding-left: 12.5%;
	padding-right: 12.5%;
}

.flex-outer button,
.button {

	margin-bottom: 10vh;
	padding: 12px 24px;
	border: none;
	background: #FFAD70;
	color: black;
	cursor: pointer;
	text-transform: uppercase;
	letter-spacing: .09em;
	border-radius: 2px;
	font-size: 1em;
}

.flex-outer button:hover,
.button:hover {
	background: #FFFFFF
}

label {
	display: inline-block;
	padding-top: 1.5ex;
	padding-bottom: 1.5ex;
	width: 8%;

	color: black;
}

.label2 {
	display: inline-block;
	padding-top: 1.5ex;
	padding-bottom: 1.5ex;
	padding-right: 1.5ex;
}

input[type="text"] {
	font-family: 'Montserrat', sans-serif;
	font-size: 1rem;
	text-align: center;
	border: 1px solid #aaa;
	border-radius: 4px;
}

ul {
	list-style-type: none;
}

.iScrollIndicator {
	background-color: antiquewhite !important;
}


.head2 {}

.head2 h1 {
	color: white;
	margin-top: 5vh;
	margin-bottom: 5vh;
}


/* Ausgewählte Bereiche in ajax-box.  --------------------------------------- */
.select2-container--default .select2-results__option--highlighted[aria-selected] {
	background-color: #CC5900 !important;
}

.select2-selection__choice__remove:hover {
	color: #BDF9FF !important;
}

.select2-selection__choice__remove {
	float: right;
	transform: scale(2);
	color: #60ACB3 !important;
	margin-left: 1vh;
}

/*Ausgewähltes Element*/
.select2-selection__choice {
	background-color: #FFD9BD !important;
}

/* Fixed header and footer.  --------------------------------------- */
#header,
#footer {
	position: fixed;
	height: 50px;
	display: block;
	width: 100%;
	background: hsla(0, 0%, 0%, 1);
	z-index: 1;
	text-align: center;
	color: #f2f2f2;
	padding: 0px 0 0 0;
}

.sponsor_item a{
	color: white !important;
}

#header {
	z-index: 100;
}

#footer {
	bottom: 0px;
}


.start {
	display: flex;
	flex-direction: column;
	margin: auto;
	margin-top: 50px;
	width: 70%;
	height: 100%;
	justify-content: space-between;
	align-items: center;

}

.glass {
	background-color: white;
}

.glass::before {
	display: block;
	width: 100%;
	height: 100%;
	background-size: cover;
	content: ' ';
	opacity: 0.4;
}

.start2 {
	display: flex;
	flex-wrap: wrap;
	max-width: 100%;
	margin-top: 90px;
	justify-content: center;
}

.start2 p {
	color: white;
	font-size: 1.15em;
	margin-left: 25% !important;
	margin-right: 25% !important;

}

.start2 img {
	display: flex;
}

h1,
h2,
p,
h3 {
	text-align: center;
	margin: 0;
	width: auto;
}

.flex-outer h1 {
	color: #FF9B4D;
	color: #CC5900;
}

article h2 {
	width: 50%;
	margin-left: 15%;
	margin-right: 1%;

}

h2,
h3 {
	/*color: #FF9B4D;*/
	color: #CC5900;
	font-weight: bold;
}

.start2 p {
	line-height: 1.5;
	margin-left: 30%;
	margin-right: 30%;
}

article {
	display: flex;
	background-color: rgba(255, 255, 255, 0.75);
	width: 70%;
	height: 100%;
	justify-content: center;
	align-items: center;
	margin: auto;


}

#bg,
#search-bg {
	background-image: url('/Bilder/book-3266096_1920.jpg');
	background-repeat: no-repeat;
	background-size: 1080px auto;
}

#bg {
	background-position: center top;
	padding: 70px 90px 120px 90px;
}

#search-container {
	position: relative;
}

#search-bg {
	/* Absolutely position it, but stretch it to all four corners, then put it just behind #search's z-index */
	position: absolute;
	top: 0px;
	right: 0px;
	bottom: 0px;
	left: 0px;
	z-index: 99;

	/* Pull the background 70px higher to the same place as #bg's */
	background-position: center -70px;

	-webkit-filter: blur(10px);
	filter: url('/media/blur.svg#blur');
	filter: blur(10px);
}

#search {
	/* Put this on top of the blurred layer */
	position: relative;
	z-index: 100;
	padding: 20px;
	background: rgb(34, 34, 34);
	/* for IE */
	background: rgba(34, 34, 34, 0.75);
}

article p,
.mitarbeiter {
	hyphens: auto;
	line-height: 1.5;
	width: 50%;
	margin-left: 1%;
	margin-right: 15%;
	margin-top: 10%;
	margin-bottom: 10%;
	text-align: left;
}

lbl {
	color: wheat;
}

.search {
	display: flex;
	align-items: center;
	justify-content: center;
	list-style-type: none;
	max-width: 40rem;
}

.search ul {
	list-style-type: none;
}

.search li {
	color: antiquewhite;
	flex: 1;
}

/* Centered texts in each section * --------------------------------------- */
.section {
	display: flex;
}

/* Adding background for the slides * --------------------------------------- */

h3 {
	color: #FFD9BC;
	width: 50%;
}

.head1>p {
	width: 100%;
	text-align: center;
	color: antiquewhite;
}

.start3 {
	margin-top: 50px;
	display: flex;
	margin-left: 15vw;
	margin-right: 15vw;
}

.start3 ul {
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
}

.start3 li {
	display: flex;
	flex: 1;
	flex-direction: column;
	background: #2c2c32;
	margin: 2vh;

}

.start3 h2 {
	margin-top: 2vh;
	margin-bottom: 1vh;
}

.details {
	margin-top: auto;
	color: white;
	margin-bottom: auto;
	padding-left: 2vh;
	padding-right: 2vh;
}

.bild_start {
	width: 100%;
}

.button_more {
	margin-top: 2vh;
	margin-left: 2vw;
	margin-right: 2vw;
	height: 50px;
	margin-bottom: 2vw;
	background-color: #FF9B4D;
	display: flex;
	align-items: center;
	justify-content: center;
}

.button_more:hover {
	background-color: #804D26;
	color: #CCF9FF;
}

.button_more:active {
	background-color: #CCF9FF;
}

a.button_more {
	color: white;

}

/* Bottom menu * --------------------------------------- */
#infoMenu li a {
	color: #fff;
}

/* Ergebnissseite * --------------------------------------- */
.ergebnisseite {
	color: wheat;
	text-align: center;
	margin-top: 2vh;
}

.nav_ergebnisse {
	text-align: center;
	color: wheat;
	display: flex;
	justify-content: center;
	width: 100%;
}

/* Untere Navigation * --------------------------------------- */
.pagination {
	text-align: center;
}

.pagination a,
.pagi_act {
	border: 2px solid hsla(25, 39%, 36%, 0.50);
	;
	padding: 8px 16px;
	display: inline-block;
	margin: 1vh;
	color: whitesmoke;
	background-color: hsla(25, 39%, 36%, 0.50);
}

.pagi_act {
	background-color: #FFAD70;
	color: black;
}

.pagination a.active {}

.pagination a:hover:not(.active) {
	background-color: #FFD9BC;
	color: black;
}

.pagination a:visited {}

.pagination a:first-child {
	border-top-left-radius: 9px;
	border-bottom-left-radius: 9px;
}

.pagination a:last-child {
	border-top-right-radius: 9px;
	border-bottom-right-radius: 9px;
}

/* Einzelne Datensätze * --------------------------------------- */
.datensatz {
	display: flex;
	flex-wrap: nowrap;
	justify-content: center;
	margin-top: 2%;
	margin-left: 9vw;
	margin-right: 9vw;
	color: hsla(0, 0%, 100%, 1.00);
	background-color: hsla(0, 0%, 0%, 0.50);
	border-width: thin;
	border-radius: 5px;
	border-style: none;
	padding: 1%;
	top: 0px;
	line-height: 1.25em;
}

.datensatz p,
.datensatz h3 {
	text-align: left;
	padding-bottom: 0.5vh;
	padding-top: 1vh;

}

.zusatzinformationen {
	width: 50%;
	display: flex;
	flex-wrap: wrap;
	align-content: flex-start;
}

/* jeder 2. Datensatz andere Farbe * --------------------------------------- */
.datensatz:nth-of-type(even) {
	background-color: #402C1C;
}

.datensatz:nth-of-type(odd) {
	background-color: #805738;
}

.datum,
.zusatz {
	font-size: 1.25em;
	text-align: center;
	padding-bottom: 2%;
	margin-top: 2%;
}

.datensatz .zusatz:first-child{
	padding-top: 1%;
}

.dsatz_links {
	width: 70%;
	margin-right: 2%;
}

.dsatz_rechts {
	width: 50%;
	margin-left: 2%;
}

/* Ergebnisseite oberer Bereich * --------------------------------------- */
.anzahl_Datensaetze {
	color: hsla(26, 100%, 72%, 1.00);
	margin-top: 2%;
	margin-right: auto;
	margin-left: 9vw;
	margin-bottom: 2%;
}

.button {
	margin-left: 9vw;
}

.button.multiple{
	margin-left: 1vw !important;
}

.suche-buttons{
	margin-left: 8vw;
}

.suche-buttons.start, .button.multiple, #section0 p{
	margin: 0;
}

.landingpage#section0 .suche-buttons.start{
	width: 100%;
	display: flex;
	flex-direction: row;
	justify-content: space-around;
	margin: 5% 0%;
}

.landingpage#section0 p{
	width: 90%;
	margin-top: -5%;
}

.landingpage#section0 .flex-outer{
	justify-content: flex-start;
	height: 53vh !important;
	margin-top: 10% !important;
}

.landingpage#section0 .flex-outer h1.landingpage{
	padding: 5%;
	line-height: 200%;
	margin-bottom: 5%;
}

/* Impressum */
#impressum-wrap{
	background: rgba(255,255,255,0.75);
	width: 80%;
	margin: auto;
}

#impressum-content{
	padding: 8% 6%;
}
 #impressum-content h2, #impressum-content .subtitle, #impressum-content table, #impressum-content tr, #impressum-content td{
	text-align: left !important;
}

#impressum-content p{
	line-height: 150%;
	text-align: justify;
}

#impressum-content p.block{
	padding-bottom: 1%;
}

#impressum-content h2{
	line-height: 150%;
	padding-top: 2%;
}

#impressum-content h3{
	text-align: left;
	color: #CC5900;
	line-height: 150%;
	padding-bottom: 1%;
}

/* Mobile Ansicht * --------------------------------------- */
@media screen and (max-width:800px) {
	body {
		font-size: 1.25em;
	}

	#header,
	#footer {
		background: black;
		height: 0px;
		display: block;
	}

	#header {
		z-index: 100;
		height: auto;
		overflow-y: hidden;
		-webkit-overflow-scrolling: touch;
	}

	/* sorgt dafür, dass die einzelnen sections nicht abgeschnitten werden. Hier müssen ALLE sections rein*/
	#section0.fp-section,
	#section1.fp-section,
	#section2.fp-section,
	#section3.fp-section,
	#section4.fp-section,
	#section5.fp-section,
	#section6.fp-section,
	#section7.fp-section {
		height: auto !important;
		min-height: 100%;
	}

	/* die rechten Hinweise zu Sektionen werden deaktiviert * --------------------------------------- */
	#fp-nav ul li .fp-tooltip {
		display: none;
	}

	.start h1 {
		font-size: 1.2em;
		width: 95vw;
		margin-top: 20px;
	}

	.start {
		margin-top: 10%;
		width: auto;
	}

	article {
		/* [disabled]justify-content: flex-start;
*/
		align-items: flex-start;
		flex-flow: column;
		width: auto;
		align-content: stretch;
		height: 100%;
	}

	article p,
	article h2 {
		width: auto;
		text-align: left;
		margin-top: 1vh;
		margin-left: 2vh;
		margin-right: 2vw;
		hyphens: auto;
	}

	form {
		width: auto;
	}

	.flex-outer {
		border-radius: 0.5px;
		border-color: white;
		padding: 2%;
		height: 90%;
	}

	.flex-outer button,
	.button {
		margin-left: 25%;
		margin-right: 25%;
	}

	label {
		padding: 0;
		padding-top: 1%;
		padding-bottom: 2%;
		width: 15%;
	}

	#ausgabe {
		margin-bottom: 2vh;
	}

	.datensatz {
		flex-flow: column;
	}

	.dsatz_links,
	.dsatz_rechts {
		margin: 0;
		margin-top: 2%;
		width: 100%;
	}

	.nav_ergebnisse {
		font-size: 1.5em;
	}
}