@import url(webfonts/webfonts.css);
@import url(colorset/colorset.php);

.container {background-color: var(--color1)}
h1, h2, b, strong  {color: var(--color3);}
h3, h4, h5, h6  {color: var(--color5);}
a { color: var(--color6); transition: 0.5s color;}
a:hover {color: var(--color7); } 
body.bodycolor {color: var(--color2);} /*Fix, damit im Editor schwarz bleibt */


@supports (-webkit-text-fill-color: transparent) {
  /* CSS-Deklarationen für moderne Layouts */

	h1, h3 {
	background-image: linear-gradient(90deg, var(--color3), var(--color4));
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
		/*width: fit-content;*/		
		display: inline-block;	
	}
	
	h3:hover {
	background-image: linear-gradient(90deg, var(--color4), var(--color3));			
	}	
	
	h2{
	background-image: linear-gradient(-90deg, var(--color3), var(--color4));
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
		/*width: fit-content;*/
		display: inline-block;;	
	}	
}



body { 
	font-family: Monda, Arial, Verdana, Helvetica, sans-serif; 	
	font-size: 1em;
	line-height:150%;
}
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	Customise the standard HTML
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
a:link, a:visited, a:active {
	text-decoration: none;
}
a:hover {
	text-decoration: underline;
}

img {max-width:100%; height:auto;}
a img {border:0}


/* ------------------------------------------------ */
h1, h2, h3, h4, h5, h6, strong {}
h1, h2, h3 {	line-height:100%; font-family: 'Oswald', impact, arial, serif; font-weight:normal; }

p {margin:0 0 5px 0; line-height: 150%; }


h1 { 
 	font-family: 'Oswald', impact, arial, serif; font-weight:normal;
	margin:0 0 10px 0;
	font-size: 3em;
	
}

h2 { 	
	margin:10px 0 4px 0;
	font-size: 1.8em;		
}

h3 { margin:10px 0 4px 0;
	font-size: 1.5em;	
}

h4 {	
	margin:10px 0 0 0;	
	font-size: 1.2em;	
	
}

h5 {
	margin:10px 0 0 0;	
	font-size: 0.9em;	
}

h6 {
	margin:3px 0 0 0;	
	font-size: 0.75em;	
}


form {margin: 0;}
input, textarea, select {color: var(--color2); background-color: #222; padding:4px; border:1px solid #666;}

hr {
	margin: 15px 0px 15px 0px;
	color: var(--color3);
	border: 0;
	border-top: 1px dotted var(--color3);
	height: 1px;
}



ul li {	
	padding-bottom: 0px;

			
} 

ul {	
	line-height: 150%;
	margin-top: 0;
	margin-bottom: 10px;
	margin-left: 0.7em;
	padding-left: 0.7em;
		
}

ol {
	
	line-height: 150%;
	margin-top: 0;
	margin-bottom: 10px;
	margin-left: 0.9em;
	padding-left: 0.9em;		
}


blockquote{
	background-color: rgba(255,255,255,0.2);
	padding: 5px;
	border-radius: 10px;
	border-left: 4px solid var(--color3);
	border-right: 4px solid var(--color3);
	margin: 10px 0 20px 0;
}

pre, .code {
	color: #fff;
	padding: 6px 0 20px 6px;
	border-top: 1px solid #aaa;
	border-right: 1px solid #aaa;
	border-bottom: 1px solid #aaa;
	border-left: 6px solid #aaa;
	background-color: rgba(255,255,255,0.2);
	margin: 3px 0 20px 0;
	
	font-size:1em;	
	overflow:auto; 
	line-height:2.2em;	
}

address {
	line-height:120%;
	margin: 10px 0 20px 0;
	padding-left: 10px;
	border-left: 6px solid var(--color4);
	font-style: normal;
	font-weight: bold;
	}


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

table {border-collapse:collapse; border:0;}


abbr				{}
acroynm			{}
cite				{}
address			{}
strong			{}
em					{}

responsiveVideo, .flex-video {
   position: relative; padding-bottom: 56.25%; padding-top: 30px;  height: 0; overflow: hidden;
}

.responsiveVideo iframe, .flex-video iframe, .responsiveVideo object, .flex-video object, .responsiveVideo embed, .flex-video embed  {
   position: absolute; top: 0; left: 0; width: 100%; height: 100%;
}


editlink {}


table {
	border-collapse:collapse;
	border: none;
}

table.table {
	clear:both;	
	border-collapse:collapse;
	border: none;	
	border-top: 1px solid #666;
	margin: 20px 0 5px 0;
	width:100%;
	font: 0.85em;	
}

table.table caption {font-size:1.1em; text-align:left; }
table.table th {font-size:0.9em; padding: 4px; text-align:left; vertical-align: top;   border: none; border-bottom: 1px solid #999;}
table.table tbody td {font-size:0.9em; padding: 4px; vertical-align: top;  border: none; border-bottom: 1px solid #999;}
table.table tbody tr:hover td {background-color:#555;}
table.table tbody td p, table.table tbody td h1, table.table tbody td h2, table.table tbody td h3, table.table tbody td h4 {margin: 0; line-height:110%;}

.picfull {max-width:100%; height:auto;}
.pic2left {float:left; max-width:48%; margin: 3px 3% 2px 0; height:auto;}
.pic2right {float:right; max-width:48%; margin: 3px 0 2px 0.9%; height:auto;}

.pic3left {float:left; max-width:32%; margin: 3px 1.5% 2px 0; height:auto;}
.pic3right {float:right; max-width:32%; margin: 3px 0 2px 0.3%; height:auto;}

.pic4left {float:left; max-width:24%; margin: 3px 1% 2px 0; height:auto;}
.pic4right {float:right; max-width:24%; margin: 3px 0 2px 0.5%; height:auto;}



/*Show and Hide Responsive*/
.hideOnDesktops {display: none;}	

	



/* Small devices (tablets, up to 768px) */
@media (max-width: 768px) {
	.pic2left, .pic2right {max-width: 100%;  margin: 3px 0 2px 0;}
	.pic3left, .pic3right, .pic4left, .pic4right  {max-width: 49%;}
	
	/*Show and Hide Responsive*/
	body .hideOnTablets {display: none;}
	.hideOnDesktops {display: block;}
	
	
	

}

/* Small devices (Smartphone, up to <480px) */
@media (max-width: 479px) {
	.pic2left, .pic2right {max-width: 100%;  margin: 3px 0 2px 0;}
	.pic3left, .pic3right, .pic4left, .pic4right  {max-width: 49%;}
	
	/*Show and Hide Responsive*/
	.hideOnMobiles {display: none;}
	body .hideOnTablets {display: block;}
	body .hideOnDesktops {display: block;}
		
	

}