html,
body {
	height: 100%;
}

body {
	line-height: 1.6;
	color: #555;
	font-family: 'Alegreya Sans', sans-serif;
	font-size: 18px;
}

/*------------------------------------*\
  #BOOTSTRAP
\*------------------------------------*/
.form-navigation button.btn.btn-primary {
	border: 1px solid transparent;
	padding: 0.75rem 1rem;
	font-size: 1.1rem;
	line-height: 1.25;
	border-radius: 0.25rem;
	background: #de674f !important;
	color: white;
	margin-top: 20px;
	display: inline-block;
}

/*------------------------------------*\
  #ÜBERSCHRIFTEN
\*------------------------------------*/
.h1,
h1,
.h2,
h2,
.h3,
h3 {
	margin-bottom: 15px;
}

.h1,
h1 {}

.h2,
h2 {}

.h3,
h3 {}

.fluid-container .frame-layout-fluid-container header h3.ce-headline-center {
	text-transform: uppercase;
}

.mask-balken-ueberschrift-volle-breite.bg-color {
	background: #de674f;
	padding-top: 40px;
	padding-bottom: 40px;
	text-align: center;
}

.mask-balken-ueberschrift-volle-breite {
	background: #fff;
	padding-top: 40px;
	padding-bottom: 40px;
	text-align: center;
}

.mask-balken-ueberschrift-volle-breite.bg-color .container h3 {
	color: #fff;
	margin-bottom: 0;
}

.mask-balken-ueberschrift-volle-breite .container h3 {
	color: #de674f;
	margin-bottom: 0;
}

.mask-balken-ueberschrift-volle-breite .container h3 span:first-child {
	font-size: 50px;
	font-weight: 300;
	text-transform: uppercase;
}

.mask-balken-ueberschrift-volle-breite .container h3 span:nth-child(2) {
	font-size: 50px;
	text-transform: uppercase;
}

/*------------------------------------*\
  #HEADER
\*------------------------------------*/
.top {
	background: url(/typo3conf/ext/bim_template_klara/Resources/Public/Images/Template/Hintergrund/trans-weiss-60.png);
	position: absolute;
	width: 100%;
	height: 90px;
	display: flex;
	align-items: flex-end;
}

.top .container {
	height: 90px;
	display: flex;
	align-items: center;
}

.top .container span {
	color: #de674f;
	font-size: 36px;
	font-weight: 300;
	letter-spacing: 2px;
}


.kopfbild {
	height: 70vh;
	background: center center;
	background-size: cover;
	background-repeat: no-repeat;
}

html,
body {
	height: 100%;
}

.slogan {
	position: absolute;
	width: 100%;
	text-align: center;
	top: 30vh;
}

.slogan span {
	font-size: 96px;
	color: #fff;
	text-transform: uppercase;
	line-height: 1.2;
}

.slogan span:first-child {
	font-weight: 300;
}

.slogan span:nth-child(2) {
	font-weight: 600;
}

#c56 {
	margin-bottom: 0;
}

.mobile-beschriftung {
	display: none;
}

/*------------------------------------*\
  #NAVIGATION
\*------------------------------------*/
.navigation-wrap {
	background: #de674f;
	height: 60px;
}

/* nav.navigation-wrap .container.navigation.fixed-navi {
    width: 100%;
    max-width: 100%;
} */

nav.navigation-wrap.fixed-navi {
	position: fixed;
	width: 100%;
	z-index: 1;
	top: 0;
	display: flex !important;
	justify-content: center;
}

/*------------------------------------*\
  #ROOTLINE
\*------------------------------------*/


/*------------------------------------*\
  #CONTENT
\*------------------------------------*/


/*------------------------------------*\
  #FOOTER
\*------------------------------------*/
footer {
	background: #de674f;
	padding: 30px 15px;
	color: #e5e7e9;
}

footer p {
	margin: 0;
}

footer a {
	color: #fff;
}


footer a:hover {
	color: #eee;
	text-decoration: none;
}

/*------------------------------------*\
  #COLORBOX
\*------------------------------------*/
#cboxCurrent {
	bottom: 0;
	font-size: 14px;
}

#cboxSlideshow {
	bottom: 1px;
	color: #555;
	font-size: 14px;
}

#cboxTitle {
	position: absolute;
	bottom: 28px;
	left: 0;
	text-align: center;
	width: 100%;
	color: #fff;
	background: rgba(0, 0, 0, .5);
	font-size: 15px;
}

/*------------------------------------*\
  #MASK
\*------------------------------------*/
/*---------- BILDERGALERIE -----------*/
.bildspalte {
	margin-top: 5px;
	margin-bottom: 5px;
	padding-left: 5px;
	padding-right: 5px;
}

.fluid-container .frame-1_standard.frame-type-mask_bildergalerie .row.mask-bildergalerie {
	margin-left: 0;
	margin-right: 0;
}

.bildspalte .zoom {
	overflow: hidden;
	position: relative;
}

.bildspalte .zoom img {
	width: 100%;
	height: auto;
	transition: all 0.5s ease-in-out;
}

.bildspalte .zoom:hover img {
	width: 100%;
	height: auto;
	transform: scale(1.1);
}

.bildspalte figcaption {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	height: 100%;
	width: 100%;
	opacity: 0;
	transition: .5s ease;
	background: url(/typo3conf/ext/bim_template_klara/Resources/Public/Images/Template/Hintergrund/trans-schwarz-60.png);
}

.bildspalte:hover figcaption {
	opacity: 1;
}

.bildspalte figcaption div {
	text-align: center;
	font-size: 18px;
	line-height: 1.2;
	color: #fff;
	padding: 0 10px;
	position: absolute;
	width: 100%;
	bottom: 20px;
}

/*---- NAVIGATIONSBUTTON ----*/
a .mask-navigationsbalken {
	color: #fff;
	background: #de674f;
	text-align: center;
	padding: 10px 15px;
	margin-bottom: 25px;
	border-radius: 5px;
}

 a .mask-navigationsbalken span {
	color: #fff;
}

/*------------------------------------*\
  #MAP
\*------------------------------------*/
.map iframe {
	width: 100%;
}


div.privacy-msg {
	background: #eeeeee;
}

div.privacy-msg p {
	max-width: 900px;
	padding-top: 50px;
	text-align: center;
	margin-left: auto;
	margin-right: auto;
}

div.privacy-msg p .privacy-btn {
	border: 1px solid transparent;
	padding: 0.75rem 1rem;
	font-size: 1.1rem;
	line-height: 1.25;
	border-radius: 0.25rem;
	background: #de674f;
	color: white;
	margin-top: 20px;
	display: inline-block;
}


#c433 div.privacy-msg {
	height: 800px;
}

#belkal div.privacy-msg {
	height: 800px;
}

/*------------------------------------*\
  #FORMULAR
\*------------------------------------*/
#kontaktformular-196 {
	background: #FFF8F2;
	padding: 15px;
}

#kontaktformular-196 h2 {
	color: #de674f;
	font-size: 24px;
	font-weight: 300;
	text-align: center;
}

#kontaktformular-196 .form-group {
	margin-bottom: 15px;
	display: flex;
}

#kontaktformular-196 label {
	display: inline-block;
	margin: 0;
	width: 20%;
}

#kontaktformular-196 .input {
	width: 80%;
	border-radius: 0;
	border: 2px solid #fff;
}

#kontaktformular-196 .form-control {
	display: block;
	width: 100%;
	padding: .5rem .75rem;
	font-size: 1rem;
	line-height: 1.25;
	color: #555555;
	background-color: rgba(81, 81, 81, 0.15);
	border: none;
	border-radius: 0;
	transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}

#kontaktformular-196 nav {
	background: none;
	height: auto;
}

/*------------------------------------*\
  #TYPO3
\*------------------------------------*/
.ce-element {
	margin-top: 40px;
	margin-bottom: 40px;
}

#c12 {
	margin: 0;
}

.ce-intext.ce-left .ce-gallery {
	margin-right: 20px;
	margin-top: 7px;
}

.ce-gallery img {
	display: block;
	width: 100%;
	height: auto;
}

/*------------------------------------*\
  #SONSTIGES
\*------------------------------------*/
.back-to-top {
	background: #555;
	position: fixed;
	bottom: 20px;
	right: 20px;
	padding: 10px 15px;
	border-radius: 5px;
}

a.back-to-top i.fas.fa-angle-up {
	color: #fff;
	font-size: 36px;
}

#op-section-136 {
	clear: both;
}

.privacy-msg.privacy-script-msg,
.privacy-msg.privacy-map-msg,
.privacy-msg.privacy-kalender-msg,
.privacy-msg.privacy-video-msg {
	position: relative;
	background: #eee;
	height: auto !important;
	width: 100% !important;
}

.privacy-msg.privacy-script-msg p,
.privacy-msg.privacy-kalender-msg p,
.privacy-msg.privacy-calendar-msg p,
.privacy-msg.privacy-map-msg p,
.privacy-msg.privacy-video-msg p {
	padding: 15px;
	background: #eee;
	text-align: center;
	position: absolute;
}

.privacy-msg.privacy-script-msg p a.btn,
.privacy-msg.privacy-calendar-msg p a.btn,
.privacy-msg.privacy-kalender-msg p a.btn,
.privacy-msg.privacy-map-msg p a.btn,
.privacy-msg.privacy-video-msg p a.btn {
	background: #347327;
	border-color: #347327;
	color: #fff;
	margin-top: 15px;
	margin-bottom: 15px;
}

/*------------------------------------*\
  #MEDIA-QUERIES
\*------------------------------------*/
@media (max-width: 1199px) {}


@media (max-width: 991px) {
	.mobile-beschriftung {
		display: block;
		position: absolute;
		z-index: 999999;
		color: #fff;
		left: 20px;
		top: 10px;
	}

	.container {
		max-width: 100%;
	}

	.logo-mobil {
		padding: 6px 0 0 15px;
	}

	.logo-mobil a {
		color: #fff;
	}

	.logo-mobil a:hover {
		text-decoration: none;
	}

	.slogan span {
		font-size: 75px;
	}

	.ce-textpic,
	.ce-image,
	.ce-nowrap .ce-bodytext,
	.ce-gallery,
	.ce-row,
	.ce-uploads li,
	.ce-uploads div {
		overflow: visible;
	}

	.ce-intext.ce-left .ce-gallery {
		margin-right: 0;
		width: 100%;
	}

	.mask-balken-ueberschrift-volle-breite .container h3 span:first-child,
	.mask-balken-ueberschrift-volle-breite .container h3 span:nth-child(2) {
		font-size: 40px;
	}
}

@media (max-width: 767px) {

	.mask-balken-ueberschrift-volle-breite .container h3 span:first-child,
	.mask-balken-ueberschrift-volle-breite .container h3 span:nth-child(2) {
		font-size: 35px;
	}

	.slogan span {
		font-size: 48px;
	}

	#kontaktformular-196 .form-group {
		display: block;
	}

	/* #colorbox #cboxCurrent,
  #cboxSlideshow {
    display: none !important;
  }
  
  #colorbox #cboxContent #cboxTitle {
    bottom: 0px;
    font-size: 14px;
  } */
}

@media (max-width: 575px) {

	.mask-balken-ueberschrift-volle-breite .container h3 span:first-child,
	.mask-balken-ueberschrift-volle-breite .container h3 span:nth-child(2) {
		font-size: 25px;
	}

	.mask-balken-ueberschrift-volle-breite {
		padding-top: 0;
		padding-bottom: 0;
	}

	.h3,
	h3 {
		font-size: 1.5rem;
	}

	#c177 iframe {
		height: 400px !important;
	}

	#c177 p {
		position: absolute;
		width: 90%;
	}


}




/* ----------- iPhone 4 and 4S ----------- */

/* Portrait and Landscape */
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) {
	.kopfbild {
		background: center center;
		height: 550px;
		background-size: cover;
	}
}

/* Portrait */
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait) {
	.kopfbild {
		background: center center;
		height: 550px;
		background-size: cover;
	}
}

/* Landscape */
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape) {
	.kopfbild {
		background: center center;
		height: 550px;
		background-size: cover;
	}
}

/* ----------- iPhone 5, 5S, 5C and 5SE ----------- */

/* Portrait and Landscape */
@media only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2) {
	.kopfbild {
		background: center center;
		height: 550px;
		background-size: cover;
	}
}

/* Portrait */
@media only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait) {
	.kopfbild {
		background: center center;
		height: 550px;
		background-size: cover;
	}
}

/* Landscape */
@media only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape) {
	.kopfbild {
		background: center center;
		height: 550px;
		background-size: cover;
	}

}

/* ----------- iPhone 6, 6S, 7 and 8 ----------- */

/* Portrait and Landscape */
@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2) {
	.kopfbild {
		background: center center;
		height: 550px;
		background-size: cover;
	}
}

/* Portrait */
@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait) {
	.kopfbild {
		background: center center;
		height: 550px;
		background-size: cover;
	}
}

/* Landscape */
@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape) {
	.kopfbild {
		background: center center;
		height: 550px;
		background-size: cover;
	}
}

/* ----------- iPhone 6+, 7+ and 8+ ----------- */

/* Portrait and Landscape */
@media only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3) {
	.kopfbild {
		background: center center;
		height: 550px;
		background-size: cover;
	}
}

/* Portrait */
@media only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3) and (orientation: portrait) {
	.kopfbild {
		background: center center;
		height: 550px;
		background-size: cover;
	}
}

/* Landscape */
@media only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3) and (orientation: landscape) {
	.kopfbild {
		background: center center;
		height: 550px;
		background-size: cover;
	}
}

/* ----------- iPhone X ----------- */

/* Portrait and Landscape */
@media only screen and (min-device-width: 375px) and (max-device-width: 812px) and (-webkit-min-device-pixel-ratio: 3) {
	.kopfbild {
		background: center center;
		height: 550px;
		background-size: cover;
	}
}

/* Portrait */
@media only screen and (min-device-width: 375px) and (max-device-width: 812px) and (-webkit-min-device-pixel-ratio: 3) and (orientation: portrait) {
	.kopfbild {
		background: center center;
		height: 550px;
		background-size: cover;
	}
}

/* Landscape */
@media only screen and (min-device-width: 375px) and (max-device-width: 812px) and (-webkit-min-device-pixel-ratio: 3) and (orientation: landscape) {
	.kopfbild {
		background: center center;
		height: 550px;
		background-size: cover;
	}
}