@CHARSET "UTF-8";
@import "style-w3norm.css";
@import "style-fontface.css";

/* default 6/2020 */

:root {
	--wimax: 900px; /*1200*/
	
	--pad: 2em;
	--padhalf: 1em;
	--padthird: 0.666em;
	
	--padr: 2rem;
	--padrhalf: 1rem;
	
	--bgall-color: white;	
	
	--bg-color: white;	
	--text-color: black;
	--texth-color: #333333;
	--link-color: #333333;
	--btn-color: darkgray;	
	--btntext-color: white;
	--alarm-color: #842e84;
	--border-color: gray;
	--even-color: #f3f3f3;
	--odd-color: #eaeaea;
	
	--bg1-color: #8abfc9;	
	--text1-color: white;	
	--texth1-color: white;		
	--link1-color: white;
	--btn1-color: darkgray;	
	--btntext1-color: white;
	--alarm1-color: #842e84;
	--border1-color: gray;
	--even1-color: #e4e4e4;
	--odd1-color: #eeeeee;	

	--menubg-color: #6c5843;
	--menu-color: white;
	--menuactive-color: #4e9ece;
	
	/* --menubg1-color: rgba(78,158,206,0.9); */
	--menubg1-color: #ffffff;	
	--menu1-color: black; 
	--menuactive1-color: black;

	--color2: #575656;	
	--color3: #6488a2;
	--color4: #187275;
	--color5: #457f81;
	--color6: #f1f2f2;
	--color7: #abcbcc;
	/*--featurebg2-color: gray;
	--featurebg3-color: lightgray;
	--featurebg4-color: gray; */
	
	--logow: 220px;
	--headimg-h: 200px;
	
	--shiftx: calc((100vw - var(--wimax)) * -0.5);
	--shiftw: calc(var(--shiftx) * -1);
}

/*allgemeine Formate*/
* {
	box-sizing: border-box;
}
body {
	font-family: 'PT Sans';
	font-size: 17px;
	line-height: 1.6em;
	overflow-x: hidden;
	color: var(--text-color);
	/* background-color: var(--bgall-color, red); */
	/* background-color: lightgray;*/
	background-color: white;
	hyphens: auto;
}
h1, h2, h3, h4, h5, h6 {
	hyphens: none;
}
#anc29 h1 {
	font-size: 2.6em:
}
#anc29 h1, #anc48 h1{
	color: var(--color4);
}
h1 {
	font-size: 2.3em;
	padding-top: 50px;
	padding-left: var(--padr);
	padding-right: var(--padr);
	text-align: center;	
	line-height: 1.2em;
	margin-bottom: 1.3em;
	font-style: italic;	
}
h2 {
	font-size: 1.6em;
	padding-left: 0; 
	margin-bottom: 0em;
	font-style: italic;
}
h3 {
	margin-top: 2.3em;
	font-size: 1.25em;
	font-weight: bold;
	color: var(--texth-color, red);
}
h4, h5, h6 {
	font-size: 1.1em;
}
h1::before {
  content: "";
  clear: both;
  display: table;
}

a, a:focus, a:visited {
	color: var(--link-color, red);
	text-decoration: underline;
}
a:hover {
	color: var(--link-color, red);
	text-decoration: underline;
}

ul {
	padding-left: 1.3em;
}

/* spezieller Listensatz
#flixcontent ul {
	list-style: none;
	padding: 0;
}
#flixcontent ul li{
	padding-left: 1.3em;
}
#flixcontent ul li::before {
	//content: "\f0d9\f0da";	
	content: "\f0da";	
	font-family: "fontawesome";
	font-style: normal;
	font-weight: normal;
	font-size: inherit;
	display: inline-block;
	text-decoration: inherit;
	width: 1.3em; 
	margin-left: -1.3em; 
	color: var(--alarm-color, red);
}
*/

table {
	border-collapse: collapse;
}
th, td {
	padding: 0.2em;
	border: solid 1px gray;
}
th, td, table {
    padding: 1.2em;
    border: none;
}
tr:nth-child(odd) td {
	background-color: var(--odd-color, red);
}
tr:nth-child(even) td {
	background-color: var(--even-color, red);
}

figure, caption {
	border: solid 1px #ccc;
	border-radius: 2px;
	background: lightgray;
}
figure {
	text-align: center;
	border: solid 1px #ccc;
	border-radius: 2px;
	padding: 0.2em;
	margin: 0px 0px;
	display: inline-block;
	max-width: 95%;
}


/* utilities */
.contentwide {	
}
.nodisplay {
	display: none;
}
.clearafter:after {
	content: '';
	display: table;
	clear: both;	
}
.fullwidth {
	position: relative;
	width: 100vw;
	right: calc(50vw - 50%);
}

/*Boxes*/
header.top {
	background-color: white; 
	top: 0;
	right: 0;
	width: 100%;
}
#navbar {
	position: relative;
	font-size: 1.2em;
	height: 170px;
	color: white;
	text-align: center;
	border-bottom: 0.8em solid var(--color4);
}
#navbar #lgbox {
	position: relative;
	z-index: 1;
	padding-top: 1.7em;
}
#lgbox img {
	width: 290px;
}


/*
.logodt {
	text-align: center;
}
 .logo {
	width: 120px;	
	border: 17px solid white;
}
.top .logo {
	display: inline-block;
	position: absolute;
	top: -80px;
	left: 0px;
	//width: 120px;
}
*/

/* mobile navigation */
#menubtn-wrp {
	position: absolute;
	top: 35px;
	width: 100%;
	height: 0px;
	text-align: right;
	z-index: 2;
}
#menubtn {
	/* position: absolute;
	top: 0px;
	right: 10px;
	*/
	display: inline-block;
	width: 60px;
	height: 60px;
	color: var(--texth-color, red);
	/* background-color: var(--color3, red); */	
	font-size: 40px;
	font-weight: bold;
	text-decoration: none;
	padding: 0px;
	text-align: center;
	line-height: 1.4em;
}
#menubtn.on  {
}
#menubtn.on i.fa-bars::before {
	/* content: "\f00d"; */
}
nav {
	position: fixed;
	top: 0px;
	right: 0px;
	color: var(--menu1-color, red);
	background-color: var(--color6, red);	
	width: 100%;
	height: 100vh;
	padding-top:100px;
	text-align: center;
}

nav ul{
	list-style: none;
	padding-left: 0px;
}
nav li ul {
	display: none;
}
nav li.on ul {
	display: block;
}
nav li {
	position: relative;
	width: 100%;
	border-top: var(--color4) solid 1px;
}
nav li .showbtn::before {
	display: inline-block;
	position: absolute;
	right: 5px;
	top: 8px;
	padding-right: 30px;
	padding-left: 30px;
	font-family: "Fontawesome";
	font-size: 25px;
	font-style: normal;
	content: "\f055";
}
nav li.on .showbtn::before {
	content: "\f056";
}
nav li .showbtn:hover {
	cursor: pointer;
}
nav a, nav a:focus, nav a:visited {
	/*position: absolute; */
	left: 0;
	top: 0;
	display: inline-block;
	text-decoration: none;
	padding: 15px 40px;	
	font-size: 18px;
	font-weight: normal;
	color: var(--menu1-color, red);
	background-color: transparent;
	width: 100%;		
}
nav li li a {
	padding-left: 70px !important;
}
nav a.active, nav a:hover {
	color: black;
	background-color: #cccccc;	
	text-decoration: none;
}
nav a.brdcrb {
	font-weight: bold;
}

/* to top button */
#totop {
	position: fixed;
	right: 20px;
	bottom: 30px;
	display: none;
	font-size: 22px;
	padding: 8px 10px 10px 10px;
	width: 45px;
	height: 45px;
	color: var(--texth-color, red);
	background-color: var(--menubg1-color, red);
	text-align: center;
	vertical-align: middle;
	text-decoration: none;
	line-height: 1em;
}
#totop.on {
	display: block;
}
a#totop:hover, a#totop:focus, a#totop:visited  {
	/*color: green; */
}

/* dt - navi*/
#menudt {
	position: relative;
	top: 32px;
	z-index: 1;
	text-align: center;
	padding: 0px;
	background-color: var(--menubg-color, red);
	text-transform: lowercase;
}
#menudt ul {
	margin: 0;
	padding: 0;
}
#menudt ul li {
	 display: inline-block;
	 list-style: none;
	 position: relative;
}
#menudt a {
	 padding: 1em 0.5em;
	 display: inline-block;
	 color:  var(--menu-color, red);
	 text-decoration: none;
}
#menudt a:hover, #menudt a.active {
	 /* color:  var(--menuactive-color, red); */
	 font-weight: bold;
	 text-decoration: none;
}
#menudt ul ul {
	display: none;
	position: absolute;
	/*top: 3.1em; */
	left: -0.5em;
	background-color: var(--menubg-color, red);
	text-align: left;
	padding: 0;	
	font-size: 0.75em;
	line-height: 2em;
}
#menudt ul ul li {
	border-top: var(--border-color) 1px solid;
	/* min-width: 80px; */
	width: 150px;
}
#menudt ul ul li:last-of-type {
	padding-bottom: 30px;
}
#menudt ul ul a {
	display: inline-block;
	padding: 0em 1.2em;
}
#menudt li:hover ul {
	display: block;
}


/* content */
#flixcontent {
	position: relative;
	min-height: 200px;
}
h1.pgheader {
}

.home #main p:first-of-type {
	padding: 0;
	margin: 0;
}
#main {
	position: relative;
	/*padding-top: 100px; */
 	max-width: var(--wimax);
	margin: auto;
	background-color: var(--bg-color, red);
}

/* Vorlagen spezial */
.p1.wr, .p55.wr, .spaltensatz, .extra2, .singlepostpage #flixcontent {
	padding: 0 var(--pad) 0 var(--pad);
}

/* .extra1 .p55, .extra1 .p333, .extra1 .p2222 {
	padding: calc( var(--pad) * 0.5 );
}
*/


#anc29, #anc44, #anc48, #anc49, .tabcontent {
	position: relative;
  	width: 100vw;
  	right: calc(50vw - 50%);
  	color: white;
  	padding-left: var(--shift);
  	padding-right: var(--shift);
  	padding-bottom: 4em;
  	margin-bottom: 9em;
  }
#anc29 {
	color: initial;
	margin-bottom: 0em;
}
#anc44 {
  	background-color: var(--color3);  
}
#anc48 {
	background-color: var(--color6); 
	color: initial;
}
#anc49 {
	background-color: var(--color5); 
}


#anc49 .p1 blockquote{
	color: white;
}



.feature.wri {
	/*text-align: right; */
	width: 100%;
}



/* Img, Imgcaption & float */
img {
	max-width: 100%;
	height: auto !important;
}
a>img {
	padding: 1px;
	border: none;
}
img.mwinopen:HOVER, a:HOVER>img {
	opacity: 0.4;
}

/* Positionenierung f�r Edit-Klassen*/
.align-left {
	float: left;
	margin-left: 0;
	margin-right: 1.5em;
	margin-top: 0.3em;
	margin-bottom: 0.5em;
}
.align-right {
	float: right;
	margin-right: 0;
	margin-left: 20px;
	margin-top: 0.3em;
	margin-bottom: 0.5em;
}
.align-center {
	text-align: center;
	margin-top: 0.3em;
	margin-bottom: 0.5em;
}
/* Editor Vorlagen
--------------------------------*/

/* Blocks & Box*/
.wr, .wri {
	background-color: inherit;
	margin: 0;
	padding: 0;	
	width: 100%;
}
.wri .wri {
	padding: 0;
	border: none;
}
.extra1 {
	background-color: gray;		
}
.extra2 {
	text-align: center;
}
.p1 {
	width: 100%;
}
.p55, .p333, .p2222 {
	display: flex;;
}
.p55 .wri {
	width: 50%;
}
.p55 .col1 {
	padding-right: var(--padhalf);
}
.p55 .col2 {
	padding-left: var(--padhalf);
}
.p333 .wri {
	width: 33.333%;
}
.p2222 .wri {
	width: 25%;
}

.spaltensatz {
	column-width: 350px;
	column-gap: 20px;
	padding: 6px;
}
.spaltensatz *:first-child {
	margin-top: 0;
}
/* btn & tabs */
.buttonlink, a.buttonlink, button.tablink {
	text-decoration: none;
	padding: 0.4em 0.8em;
	display: inline-block;
	/* margin-bottom: 0.3em; */
	/* color: var(--btntext-color, white); */
	/* background-color: var(--btn-color, red); */
	color: white;
	background-color: var(--color3);
}
.buttonlink, a.buttonlink:hover, button.tablink:hover {
	/* background-color: var(--btn-color, red); */
	background-color: var(--color3);	
	text-decoration: none;	
}

/* imgs wide */
.imgwide.wri, .imgwide2.wri {
	margin: 0;
	padding: 0;
	line-height: 0;
	position: relative;
	width: 100vw;
	right: calc(50vw - 50%);
	text-align: center;
	border: none;
}
div.imgwide.wri img {
	display: block !important;
	width: 100% !important;
	height: calc(30vw) !important;
	object-fit: cover;
}
div.imgwide2.wri img {
	display: block !important;
	width: 100% !important;
	height: auto !important;
	max-width: none;
	object-fit: cover;
}

/* accordion */
.accordion-wrp {
	width: 100%;
}
.accordion {
	margin: 0;
	padding: 0.5em 0em 0.5em 1.3em;
	display: block;
	font-size: 1.1em;
	line-height: 1.5em;
	text-align: left;
	border: none;
	cursor: pointer;
	clear: both;
	color: var(--color4);
}
.accordion:HOVER, .accordion.show {
	/*background-color: inherit; */
	/* color: #de6a1c; */
}
.accordion+div.wri {
	display: none;
}
.accordion:after {
	content: "\f0da";
	font-family: "FontAwesome"; 
	font-weight: 900;
	font-style: normal;	
	display: inline-block;
	margin-left: 15px;
}
.accordion.show:after {
	content: "\f0d7";
}
.accordion.show+div.wri {
	display: block;
	box-sizing: border-box;
	padding: 0.5em 1.3em 0.5em 1.3em !important;
	width: 100% !important;		
	border: none;
}
h6.accordion {
	font-weight: normal;
  	font-size: 1.35em;
  	padding: 1em 1em 1em 1em;
}
.accordion-wrp, .accordion:nth-of-type(odd), .accordion:nth-of-type(odd) + div {
	/* background-color: var(--odd-color, red); */
	background-color: white;
	color: var(--color4);
	
}
.accordion:nth-of-type(even), .accordion:nth-of-type(even) + div {
	/* background-color: var(--even-color, red); */
}


/* Icons*/
.iconlist-wrp ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
}
.iconlist-wrp ul li {
	/*padding-left: 1.5em; */
	padding-bottom: 1em;
	padding-left: 3.5em;
	position: relative;
}
.iconlist-wrp li span.fa {
	position: absolute;
	top: 0;
	left: 0;
}
.iconlist-wrp .fa-fw {
	font-size: 2em;
	margin-right: 1.7rem;
}
.iconlist-wrp .fa-mobile-phone {
	font-size: 2.2em;
	transform: translate(0,-0.2em);
}
.iconlist-wrp .fa-phone {
	font-size: 1.5em;
	transform: translate(0.16em,0.2em);
}
.iconlist-wrp .fa-envelope {
	font-size: 1.4em;
	transform: translate(0.17em,0.1em);
}


/** Sonderformate **/
blockquote {
	display: block;
	border: none;
	padding: 1.5em;
	line-height: 1.35em; 
	margin: 0;
	color: white;
	/* text-align: center; */
	background-color: var(--color5);
		
}
blockquote a {
	text-decoration: underline;
}
blockquote h2, blockquote h3, blockquote h4, blockquote a {
	/* color: var(--btntext-color, red); */
}
.spaltensatz {
	column-gap: var(--pad);
	column-width: 400px;
	padding: 0 var(--pad) var(--pad) var(--pad);
}

blockquote.wschild {
}
blockquote.wschild a, blockquote.wschild h2, blockquote.wschild h3 {
	color: white;
}




/* Plugins und Spezalsatz aus Funktionen
-----------------------------------------------*/

/* tabsatz */
.tabwrp {

}

.tabwrp button {
	text-align: center;
	/* position: relative; */
}
.tabwrp button.active, .tabwrp button:hover  {
	cursor: pointer;
}
.tabwrp > div:first-of-type {
	padding: var(--padhalf) var(--pad);
	padding-bottom: 0;
}
.tabwrp button {
	padding: 0.6em 1.9em;
	border: none;
	color: white;
	text-transform: uppercase;
	font-size: 1.1em;
	margin-right: 1px;
	margin-top: 1px;
}
.tabwrp button.tabnr-0 {
	background-color: var(--color4);
}
.tabwrp button.tabnr-1 {
	background-color: #2e5e82;
}
.tabwrp button.tabnr-2 {
	background-color: var(--color2);
}
.tabwrp button.active, .tabwrp button:hover  {
}
.tabcontent {
	/* border: 1px solid gray; */
	text-align: initial !important;
	border: none;
	columns: none;
	background-color: var(--color6);
	color: initial;
	margin-bottom: 1em;
	border-bottom: 1.5em solid var(--color5);
}
.tabcontent.tabnr-0,.tabcontent.tabnr-1, .tabcontent.tabnr-2 {
	padding-top: 1em;
	padding-bottom: 2.3em;
}

/* Galery */
.galery-wrp.flixwallpaper {
	background-color: white;
}
.flixwallpaper .imgs {
  	column-gap: 0.8em !important;
}
.flixwallpaper .imgs img {
	padding: 0;
	margin-bottom: 0.8em;
}
.galery-wrp.flixthumb.tbstart {
	max-width: none !important;
}
.galery-wrp.flixthumb.tbstart img{
	margin: 0;
	width: 1200px !important;
}
.galery-wrp.flixthumb.tbstart .imgs{
	position: relative;
}

figure, caption, .galery-wrp .gatitle {
    background-color: var(--even-color, red) !important;
    font-weight: normal;
}


/* Icons*/
.adressicons span.faspace {
	display: inline-block; 
	width: 30px;
	margin-right: 15px;
}
.adressicons span.fa {
    display: block;
	font-size: 30px;
    width: 30px;
	margin-right: 15px;
    float: left;
}

/* Spezialsatz von Obejkten */
#anc44 .col1 img {
	margin-top: 30px;
	margin-left: 70px;
}
img.align-left {
	max-width: 50%;
}
img[src*="-lang-"] {
	height: 3.6em !important;
  	width: auto !important;
  	margin-top: 2.5em;
  	transform: translateX(-0.5em);
}
#anc34 h1.onpagesection {
	display: none;
}
#anc34 {
	margin-top: 7em;
}


@media (max-width:600px) {
	#main {
		padding-left: 0;
		padding-right: 0;
	}
	.wri {
		/* margin-bottom: 20px; */
	}
	body {
		/* font-size: 19px; */
	}
	nav {
		max-width: inherit;
		width: 100%;
		right: 0;
	}
	.p55 .wri {
    	width: initial;
	}
	img.align-left {
		max-width: 90%;
		float: none;
		display: block;		
	}	
	#menubtn-wrp {
  		top: 5px;
	}
	#navbar {
		height: 110px;
		text-align: initial;
	}
	#navbar #lgbox {
		position: relative;
		z-index: 1;
		padding-top: 1em;
		padding-left: 1em;
	}
	#lgbox img {
		width: 9em;
	}
	.tabwrp > div:first-of-type {
		padding: 0em 0.5em;
		padding-bottom: 0;
	}
	.tabwrp button {
  		padding: 0.6em 1.9em;
  		font-size: 0.8em;
	}
}

@media (min-width: 601px) {		
	* {
	}
	#menubtn-wrp {
  		/* top: 35px; */
	}
}


@media (min-width:961px) {
	* {
		--pad: 2.8em;
		--padr: 3.2rem;
		--shift: calc((100vw - var(--wimax)) / 2 );
		--shiftl: calc(var(--shift) * -1);
	}
	#menubtn, #menubtn-wrp, #navbarmob, .top .logo  {
		/*display: none !important;*/
	}
	#footerwrp {
		display: flex;	
	}
	.extra1 {
		position: relative;
		width: 100vw !important;
		padding: 0 var(--shift) !important;
		left: var(--shiftl) !important;		
	}	
}

@media (max-width:960px) {
	#menudt {
		display: none;
	}
	#summary {
		margin-top: 80px;
		position: relative;
		top: 15px;
	}
	body {
		/* font-size: 17px; */
	}
	.p55, .p333, .p2222 {
		display: block;
	}
	.p55 .wri, .p333 .wri, .p2222, .wri {
		width: 100% !important;
	}
	#anc44 .col1 img {
		display: block;
		width: 250px;
		padding-top: 20px;
		padding-bottom: 20px;
		margin: auto;
		position: relative;
		right: 60px;
	}
	#anc44 .col2 {
  		padding: var(--pad);
	}
	.p55 .col2 {
  		padding-left: 0;
	}
	.p55 p img {
		max-width: 50%;
	}
	
	.tabwrp div:first-child {
	}
	.tabwrp button {
	}
	.tabwrp button.tabnr-0 {		
	}
	.tabwrp button.tabnr-1 {
	}
	.tabwrp button.tabnr-2 {		
	}
}


@media ( max-width: 1000px) {
	h1.pgheader {
		padding: 1em 1em !important;
	}
	.home #flixcontent > p img {
	}
	#totop {
	}
}

@media ( min-width: 1001px) 
{
	* {
		--padh: 50px;
		--shift: calc((100vw - var(--wimax)) / 2 );
		--shiftl: calc(var(--shift) * -1);
	}
	header.top	{
		right: calc((100vw - 1100px) / 2 - 8px);
	}
	#footerwrp {
	}
	.ears {
		position: relative;
		background-color: var(--bg1-color, red);
		width: 100vw;
		padding: 0 var(--shift);
		left: var(--shiftl);
	}
	.extra1 {
		position: relative;
		width: 100vw !important;
		padding: 0 var(--shift) !important;
		left: var(--shiftl) !important;		
	}
	#him {
		height: 800px;
	}
}



@media only print {
	.noprint {
		display: none !important;
	}
	.printit {
		display: block !important;
	}
}


