/* -----------------------------------------------------------------------------

  FONTS
  
----------------------------------------------------------------------------- */

/* oxygen-regular - latin */
@font-face {
  font-family: 'Oxygen';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/oxygen/oxygen-v14-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/oxygen/oxygen-v14-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/oxygen/oxygen-v14-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/oxygen/oxygen-v14-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/oxygen/oxygen-v14-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/oxygen/oxygen-v14-latin-regular.svg#Oxygen') format('svg'); /* Legacy iOS */
}
/* oxygen-700 - latin */
@font-face {
  font-family: 'Oxygen';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/oxygen/oxygen-v14-latin-700.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/oxygen/oxygen-v14-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/oxygen/oxygen-v14-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/oxygen/oxygen-v14-latin-700.woff') format('woff'), /* Modern Browsers */
       url('../fonts/oxygen/oxygen-v14-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/oxygen/oxygen-v14-latin-700.svg#Oxygen') format('svg'); /* Legacy iOS */
}

/* -----------------------------------------------------------------------------

  ICONSET
  
----------------------------------------------------------------------------- */

 @font-face {
	font-weight: normal;
	font-style: normal;
	font-family: 'iconset';
	src: url("../fonts/iconset.eot");
	src: url("../fonts/iconset.eot?#iefix") format("embedded-opentype"), url("../fonts/iconset.woff") format("woff"), url("../fonts/iconset.ttf") format("truetype"), url("../fonts/iconset.svg#iconset") format("svg");
}


.iconset::before {
	vertical-align: middle;
	display: inline-block;
	text-align: center;
	text-transform: none;
	font-weight: normal;
	font-style: normal;
	font-variant: normal;
	font-family: 'iconset';
	-webkit-font-smoothing: antialiased;
}

.nav-iconset::before {
	font-size:20px;
	padding:0;
	margin:0;
	vertical-align: middle;
	line-height:35px;
	display: inline-block;
	text-align: center;
	text-transform: none;
	font-weight: normal;
	font-style: normal;
	font-variant: normal;
	font-family: 'iconset';
	-webkit-font-smoothing: antialiased;
}

.xl-iconset::before {
	font-size: 68px;
	vertical-align: middle;
	display: inline-block;
	text-align: center;
	text-transform: none;
	font-weight: 100;
	font-style: normal;
	font-variant: normal;
	font-family: 'iconset';
	-webkit-font-smoothing: antialiased;
}


.icon-datenschutz:before {
	content: "\e903";
}

.icon-impressum:before {
	content: "\e906";
}

.icon-kontakt:before {
	content: "\e907";
}

.icon-up:before {
	content: "\e909";
}

.icon-logo:before {
	content: "\e900";
}

.icon-hoerer:before {
	content: "\e905";
}

.icon-link:before {
	content: "\e910";
}

/* -----------------------------------------------------------------------------

 FARBSCHEMA
  
----------------------------------------------------------------------------- */

@media (prefers-color-scheme: dark) {
		:root {
			/*  Farbschema */
			--hintergrund:#191919;
			--abgesetzter_hintergrund: #242424;
			--footer-hintergrund: #3b3b3b;
			--haupttext: #fff;

			/*  Links  */
			--haupttext_links: rgb(251, 221, 151);
			--haupttext_links-hover: #daa520;
			--footerlink: #daa520;
			--footerlink-hover: #f5700a;

			--menu-hintergrund:#101010;
			
			--iframe_invert:90%;
		}
	}
	

@media (prefers-color-scheme: light) {
	:root {
			/*  Farbschema */
			--hintergrund:#fff;
			--abgesetzter_hintergrund: #eeeeee;
			--footer-hintergrund: #3b3b3b;
			--haupttext: #3b3b3b;

			/*  Links  */
			--haupttext_links: #3b3b3b;
			--haupttext_links-hover: #f2d99b;
			--footerlink: #daa520;
			--footerlink-hover: #f5700a;

			--menu-hintergrund:#2b2b2b;
			
			--iframe_invert:0%;
		}
}

:root {
	/* Navigationsbar */
	--menulinks-hoover: #fff;
	--menulinks-aktiv: #f2d99b;
	--menulinks-ebene1: #fff;
	--menulinks-ebene2: #daa520;
	--linie_erste_ebene:#fff;
	--linie_zweite_ebene:#fff;
	--linie_dritte_ebene:#fff;
	--menulinks-hoover:#f5700a;
	--menulinks-aktiv_hover:#daa520;
}

/* -----------------------------------------------------------------------------

  ROOT ELEMENTS
  
----------------------------------------------------------------------------- */
html,
body {
	height: 100%;
	margin: 0;
	padding: 0;

}

body {
	background-color: var(--hintergrund);
	color: var(--haupttext);
	font-family:"Oxygen", Helvetica, sans-serif;
	font-size: 14px;
	line-height: 1.8;
}


h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 300;
  text-align:center;
  line-height:1.4;
}

h1 {
	font-size:3em;
}

h2 {
	font-size:2.25em;
}

h3 {
	font-size:1.75em;
}

h4 {
	font-size:1.5em;
	line-height:1.2;
}

h5 {
	font-size:1.25em;
}

h6 {
	font-size:1.05em;
}


.abgesetzter_hintergrund {
	display:block;
	margin: 0 auto;
	width:100%;
	background-color: var(--abgesetzter_hintergrund);
	margin-top:20px;
	padding-top:25px;
	padding-bottom:25px;
}


/* -----------------------------------------------------------------------------

  HEADER
  
----------------------------------------------------------------------------- */


/* -- HAUPTLOGOS  ----------------------------------------------*/
.willkommen-logo {
	background: url(../images/willkommen.jpg) no-repeat top center; 
	  	-webkit-background-size: cover;
		-moz-background-size: cover;
		-o-background-size: cover;
		background-size: cover;
}

.willkommen-logo {
	margin-top:40px;
}

.willkommen-wrapper {
	/*background-color:violet;*/
	display:block;
	height: 60px;
}




/* -- HAUPTLOGO-TEXTE  ----------------------------------------------*/

.header-text  {
	font-size:170%;
	color: #fff;
	text-align:left;
	margin:0 0 0 50px;
	padding-bottom:5%;
	line-height:1;
	text-shadow: 2px 2px 6px #000;
}

.header-main {
	font-size:300%;
	color: #fff;
	text-align:left;
	margin:300px 0 0 50px;
	line-height:1;
	text-shadow: 2px 2px 8px #000;
}



/* -----------------------------------------------------------------------------

Grid-System 

-----------------------------------------------------------------------------*/


/*  GRID SECTIONS  ============================================================================= */

.section {	
	clear: both;
	padding: 0;
	display: block;
    margin-left: auto;
    margin-right: auto;
	width:100%;
	max-width:960px;
}


/*  GROUPING GRIDS ============================================================================= */

.group:before,
.group:after {
    content:"";
    display:table;
}
.group:after {
    clear:both;
}
.group {
    zoom:1; /* For IE 6/7 (trigger hasLayout) */
}

/*  GRID COLUMN SETUP   ==================================================================== */

.col {
	display: block;
	float:left;
}


/*  GRID    ==================================================================== */

.span_1_of_2 {
	width: 65%;
}

.span_2_of_2 {
	width: 35%;
}


@media only screen and (max-width: 1000px) {
	
	.span_1_of_2 {
		width: 50%;
	}
	
	.span_2_of_2 {
		width: 48%;
	}
}


/*  GO FULL WIDTH AT LESS THAN 720 PIXELS */

@media only screen and (max-width: 720px) {
	
	.span_1_of_2 {
		display:block;
		margin:0 auto;
		padding:0 auto;
		width: 98%;
	}

	.span_2_of_2 {
		display:block;
		margin:0 auto;
		padding:0 auto;
		width: 98%;
	}
	


}

/* -----------------------------------------------------------------------------

  DIASCHAU
  
----------------------------------------------------------------------------- */

.crossfade  {
	width: 330px;
	height:250px;
}


.crossfade > figure {
	border-radius:1.5em;
	animation: imageAnimation 8s linear infinite 0s;
	backface-visibility: hidden;
	background-size: cover;
	background-position: center center;
	color: transparent;
	height: 220px;
	width: 330px;
	opacity: 0;
	position: absolute; 
	margin-left: auto; 
	margin-right: auto;

}

.crossfade > figure:nth-child(1) {
  background-image: url('../images/slider1.jpg');
}
.crossfade > figure:nth-child(2) {
  animation-delay: 4s;
  background-image: url('../images/slider2.jpg');
}





@keyframes imageAnimation {
  0% {
    animation-timing-function: ease-in;
    opacity: 0;
  }
  25% {
    animation-timing-function: ease-out;
    opacity: 1;
  }
  50% {
    opacity: 1;
  }
  75% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}



@media all and (max-width: 720px) {
	
	.crossfade > figure {
		height:170px;
		min-height:100%;
		width: 720px;
		max-width:100%;
		margin-left:6px;
	}

	.crossfade  {
		position:relative;
		width: 720px;
		max-width:100%;
	}	
}



/* -----------------------------------------------------------------------------

  MEDIA ELEMENTS
  
----------------------------------------------------------------------------- */

.hide640px {
	display: inline;
	width: 100%;
}

.hide900px {
	display: inline;
	width: 100%;
}

/* -----------------------------------------------------------------------------

Button nach oben
  
----------------------------------------------------------------------------- */ 

#scrolltop {
 display:none;
}


#scrolltop {
	position: fixed;
	top:5px;
	margin-left:60px;
	max-height:40px;
	max-width:40px;
	border-radius: 100%;
	background-color:rgba(0, 0, 0, 0.3);
	z-index:1001;
}


#scrolltop a {
	font-size:22px;
	display:block;
	color:#fff;
	text-decoration:none;
	text-align:center;
	width:30px;
	height:30px;
	max-height:30px;
	line-height:23px;
	border-radius: 100%;
}

#scrolltop a:hover,
#scrolltop a:active {
	overflow:hidden;
	background-color: rgba(0, 0, 0, 0.7);
	text-decoration: none;
	user-select: none; 
	-webkit-user-select: none; 
	-webkit-touch-callout: none;
}

/*------------------------------------------------------------------------------------

HAMBURGER MENU

-------------------------------------------------------------------------------------*/

/* -----------  TOPLLEISE MENU -----------  */
	
.hamburger-menu,
.navbar_top {
	position: fixed;
	top: 0;
	background:var(--hintergrund);
	z-index: 998;
	-webkit-tap-highlight-color: #ffffff00;
}



.hamburger-menu {
	padding-top: 7px;
	left: 0;
	width: 60px;
	height: 20px;
	cursor: pointer;
	color: var(--haupttext);
}


.navbar_top {
	right: 0;
	width: 100%;
	height: 40px;
	z-index: 997;
}

.navbar_top a {
	float:right;
	padding-left:10px;
	line-height:40px;
	text-decoration:none;
	color: var(--haupttext);
}

.navbar_top a:first-child {
	padding-right:2%;
}

.navbar_top a:hover {
	color: var(--haupttext_links-hover);
}

/* -----------  ÖFFNFN/SCHLIESSEN BAR -----------  */
.bar,
.bar:after,
.bar:before {
	width: 30px;
	height: 3px;
}


.bar {
	margin-left: 10px;
	position: relative;
	transform: translateY(10px);
	background: var(--haupttext);
	transition: all 0ms 300ms;
	height:5px;
	border-radius:5px;
}


.bar.animate {
	background: rgba(0, 0, 0, 0.0);
}

.bar:before {
	z-index: 998;
	content:"";
	position: absolute;
	left: 0;
	bottom: 10px;
	height:5px;
	border-radius:2px;
	background: var(--haupttext);
	transition: bottom 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms cubic-bezier(0.23, 1, 0.32, 1);
}

.bar:after {
	content:"";
	position: absolute;
	left: 0;
	top: 10px;
	height:5px;
	border-radius:5px;
	background: var(--haupttext);
	transition: top 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms cubic-bezier(0.23, 1, 0.32, 1);
}

.bar.animate:after {
	top: 0;
	transform: rotate(45deg);
	transition: top 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1);
}

.bar.animate:before {
	bottom: 0;
	transform: rotate(-45deg);
	transition: bottom 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1);
}
	
	
	


/*-----------------------------------------------------------------

		Mobiles Menu - LINKGESTALTUNG

-----------------------------------------------------------------*/
	
/* -----------  MOBILES MENU -----------  */
.mobile-menu {
	padding-top: 10px;
}
.mobile-menu li,
.mobile-menu ul {
	margin: 0;
	padding: 0;
}
	
/* Hide scrollbar for Chrome, Safari and Opera */
.mobile-menu::-webkit-scrollbar {
	display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
.mobile-menu {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}
	
/* -----------  LINKS IM MOBILEN MENÜ -----------  */
.erster_menuelink a,
.erster_menuelink span {
	font-size:20px;
	color:#fff;


}

.erster_menuelink li {
	padding-bottom: 5px;
	border-bottom: 1px solid #fff;
	margin-left:10px;
	margin-right:10px;
}
/* -----------  WEITERE LINKS -----------  */

.mobile-menu a {
	text-decoration: none;
	list-style:none;
}


.menu-links > li,
.menu-links > li > ul > li,
.menu-links > li > ul > li > ul > li {
	margin: 0;
	overflow: hidden;
	position: relative;
	margin-left:10px;
}

.menu-links > li  {
	border-bottom: 1px solid;
	border-color: var(--linie_erste_ebene);
	padding: 3px 0px 3px 0px;
	margin-right:10px;
}

.menu-links > li > ul > li {
	border-bottom: 1px solid var(--linie_zweite_ebene);
	margin-left: 15px;
}

.menu-links > li > ul > li > ul > li  {
	border-bottom: 1px solid var(--linie_dritte_ebene);
	margin-left: 20px;
	width:110%;
}

.menu-links > li > ul > li:last-child,
.menu-links > li > ul > li > ul > li:last-child {
	border-bottom: none;
}

.menu-links > li:last-child {
	border-bottom: none;
}

.menu-links > li a {
	min-width:300px;
	font-size: 14px;
	color: var(--menulinks-ebene1);
}

.menu-links > li > ul > li a {
	font-size: 12px;
	color: var(--menulinks-ebene2);
}

.menu-links ul li ul li:hover,
.menu-links > li a:hover {
	color: var(--menulinks-hoover)!important;
}

.menu-links > li > ul > li a:hover {
	color: var(--menulinks-hoover)!important;
}

.rechtliches {
	text-decoration: none;
	list-style:none;
	color:#fff!important;
	font-size:10px!important;
}	

.aktiv {
	color: var(--menulinks-aktiv)!important;
}	


/*-----------------------------------------------------------------

		Mobiles Menu - SLIDE IN & BLENDE 
			
-----------------------------------------------------------------*/

.blende {
	top: 0;
	min-width: 100%;
	height: 100%;
	left: -100%;
	background-color: #000;
	position: fixed;
	z-index: 991;
	overflow-y: auto;
	animation-name: fadeInOpacity;
	animation-iteration-count: 0;
	animation-timing-function: ease-in;
	animation-duration: 2s;
}


.blende.active {
	left: 0;
	opacity: 0.8;
	animation-name: fadeInOpacity;
	animation-iteration-count: 1;
	animation-timing-function: ease-in;
	animation-duration: 2s;
}
	
	
.mobile-menu {
	top: 40px;
	max-width: 300px;
	left: -100%;
	width: 100%;
	background: var(--menu-hintergrund);
	height: 100%;
	position: fixed;
	z-index: 992;
	overflow-y: auto;
	-webkit-transform: translate3d(0, 0, 300px);
	-moz-transform: translate3d(0, 0, 300px);
	transform: translate3d(0, 0, 300px);
	-webkit-transition: all 250ms ease-in-out;
	-moz-transition: all 250ms ease-in-out;
	transition: all 250ms ease-in-out;
}

.mobile-menu.active {
	left: 0;
	-webkit-transform: translate3d(0, 0, 0);
	-moz-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
	-webkit-transition: all 250ms ease-in-out;
	-moz-transition: all 250ms ease-in-out;
	transition: all 250ms ease-in-out;
}

/* -----------------------------------------------------------------------------

Knopf ANRUFEN
  
----------------------------------------------------------------------------- */ 


/* Nur bei @media all and (max-width: 640px)  */

/* -----------------------------------------------------------------------------

Karte Anfahrt
  
----------------------------------------------------------------------------- */ 

#anfahrt-karte {
	min-height:500px;
	max-width:900px;
	margin:0 auto;
	background-position: center center;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}



/* ------ karte hell/dunkel ----- */



@media (prefers-color-scheme: dark) {
	#anfahrt-karte {
		background-image: url('../images/karte-dunkel.webp');
	}

  @supports not (background-image: url('../images/karte-dunkel.webp')) {
	#anfahrt-karte {
	  background-image: url('../images/karte-dunkel.jpg');
	}
	  }
}


@media (prefers-color-scheme: light) {
	#anfahrt-karte {
		background-image: url('../images/karte-hell.webp');
	}

  @supports not (background-image: url('../images/karte-hell.webp')) {
	#anfahrt-karte {
	  background-image: url('../images/karte-hell.jpg');
	}
  }
}



/* -----------------------------------------------------------------------------

  TEXTAUSZEICHNUNGEN
  
----------------------------------------------------------------------------- */
a {
  /*color: #87BC65;*/
  color: var(--haupttext_links);
  text-decoration: none;
}

a:hover {
  color: var(--haupttext_links-hover);
  
}

b,
strong {
  font-weight: 700;
}

i,
em {
  font-style: italic;
}

.main_text {
	margin:0 auto;
	max-width:90%;
	width:900px;
	text-align:justify;
	padding-top:60px;
	padding-bottom:60px;
}	

/*  ----- ANRUFEN - ZEILE KONTAKT -----  */

.main_text_link {
	line-height:1;
	font-size:180%;
	margin:0 auto;
	text-align:center;
	width:90%;
	max-width:900px;
}

.main_text_link a {
	color: var(--haupttext_links);
}

.main_text_link a:hover {
	  color: var(--haupttext_links-hover);
}



/*  ----- HVV - LINK -----  */
.HVV_link {
	line-height:1;
	font-size:150%;
	margin:0 auto;
	margin-top:15px;
	text-align:center;

}
.HVV_link  a {
	color: var(--footerlink);
}

.HVV_link  a:hover {
	color: var(--footerlink-hover);
}

.HVV_link  img {
	width:60px;
}



/* -----------------------------------------------------------------------------

  BILDAUSZEICHNUNGEN/iFRAME
  
----------------------------------------------------------------------------- */

iframe {
	display:block;
	text-align:center;
	margin: 0 auto;
	width:100%;
	max-width:80%;
	border:1px solid;
	border-color: fff;
	filter: invert(var(--iframe_invert))
}


/* -----------------------------------------------------------------------------

  FOOTER
  
----------------------------------------------------------------------------- */
.footer {
	background-color:var(--footer-hintergrund);
	padding: 12px 0;
	text-align: center;
}

.footer-inhalt {
	width:900%;
	max-width: 95%;
}

.footer a {
	text-align: center;
	color:#fff;
}

.footer a:hover {
	color:var(--footerlink-hover);
}

.footer p {
	line-height:1.8;
	margin:0;
	padding:0;
	color:#fff;	
}

.sonder-footerlink a  {
	color: var(--footerlink);
	font-size:150%;
}

.sonder-footerlink a:hover {
	color: var(--footerlink-hover);
}



/* -----------------------------------------------------------------------------

  MEDIA EINSTELLUNGEN
  
----------------------------------------------------------------------------- */


@media all and (max-width: 900px) {

	.hide900px {
		display: none;
	}
}

@media all and (max-width: 640px) {

/*-- HEADER  --------------------------------*/
	
	.header-text {
		font-size:150%;
		margin:0px 0 0 15px;
	}
	
	.header-main {
		font-size:200%;
		margin:150px 0 0 15px;
	}
	

	.willkommen-logo {
		margin-top:40px;
	}

/*-- KNOPF 'NACH OBEN' -----------------------*/

	#scrolltop {
		display:block;
		position: fixed;
		left:auto;
		right:30px;
		top:auto;
		bottom:40px;
		max-height:60px;
		max-width:60px;
		border-radius: 100%;
		outline: 0;
		z-index:1010;
		background-color:rgba(0, 0, 0, 0.3);
	}


	#scrolltop a {
		font-size:40px;
		height:60px;
		line-height:45px;
		margin-left:-1px;
		max-height:60px;
		padding:0;
		width:60px;
	}


	
	
/*-- KNOPF 'ANRUFEN' -----------------------*/

	
	#anrufen {
		display:block;
		position: fixed;
		left:30px;
		top:auto;
		bottom:40px;
		max-height:60px;
		max-width:60px;
		border-radius: 100%;
		outline: 0;
		z-index:1010;
		background-color: #40e35c;
	}


	#anrufen a {
		font-size:40px;
		margin-left:-1px;
		padding:0;
		display:block;
		color:#fff;
		text-decoration:none;
		text-align:center;
		width:60px;
		height:60px;
		max-height:60px;
		line-height:45px;
		border-radius: 100%;
	}

	#anrufen a:hover,
	#anrufen a:active {
		overflow:hidden;
		color:#fff;
		background-color: rgba(64, 337, 92, 0.5);
		text-decoration: none;
		user-select: none; 
		-webkit-user-select: none; 
		-webkit-touch-callout: none;
	}
	
	
/*-- SACHEN AUSBLENDEN -----------------------*/
	
	
	.hide640px {
		display: none;
	}

/*-- TEXTAUSZEICHNUNGEN MediaEvent----------------*/


	.main_text {
		margin:0 auto;
		width:95%;
	}

	.main_text p {	
		text-align:left;
		max-width:900px;
		font-size:130%;
		hyphens: auto;
			-ms-hyphens: auto;
			-webkit-hyphens: auto;
	}
	

	.main_text li{
		line-height:1.3;
		text-align:left;
		margin-bottom:5px;
		font-size:130%;
	}	
	
	
	iframe {
		margin:0;
		padding:0;
		max-width:100%;
	}
	


}