@charset "utf-8";

:root {
	--maincolor: #000000;
	--mainbgcolor1: #FFFFFF;
	--mainbgcolor2: #FF0000;
	--mainbgcolor3: #0000ff;
	--mainbgcolor4: #c6bdec;
	
	--colordark1: #000000;
	--colordark2: #111111;
	--colordark3: #FF0000;
	--colordarkgreen: #008800;
	--colordarkred: #880000;
	--colordarkblue: #000088;
	--colordarkmage: #880088;
	--colorgreen: #00FF00;
	--colorred: #FF0000;
	--colorblue: #0000FF;
	--colormage: #FF00FF;
	--coloryellow: #FFFF00;
	--colorwhite: #FFFFFF;
}

/* elemente */

html, body {
	overflow-x:hidden;
	color: var(--maincolor);
	background-color: var(--mainbgcolor1);
}
a {
	text-decoration: none;
	color: var(--maincolor);
}
a:hover {
	text-decoration: underline;
	color: var(--colordark3);
}
a.kontent {
	text-decoration: none;
	color: var(--maincolor);
}
a.kontent:hover {
	text-decoration: underline;
	color: var(--colordark2);
}
main {
	padding-left: 16px;
	padding-right: 16px;
	color: var(--maincolor);
	background-color: var(--mainbgcolor2);
}
nav {
	background-color: var(--mainbgcolor1);	
}
.container {
}
.bgwtrn {
	padding: 12px;
	background: rgba(255,255,255,0.7);
}
.space {
	height: 20px;
}
.ninanav {
	border-bottom: 0px;
}
.fodnav {
	border-bottom: 20px solid var(--colorgreen);
}
.conbox {
	background-color: RGBA(0, 0, 0, 0.7);	
	padding: 8px;
	margin: 8px;
}
.note {
	background-color: var(--mainbgcolor1);	
	border: 3px solid var(--colordark3);
	border-radius: 7px 7px 7px 7px;
	padding: 8px;
}
.fullkon {
    background: rgba(255,255,255,0.5);
	border: 1px solid var(--maincolor);
	color: var(--maincolor);
	margin-top: 20px;
	padding: 8px;
}
.headnav {
	background-color: var(--colordarkblue);
    margin: 0 auto; 
    position: relative;
}
.headnavlink {
	background-color: var(--colordarkblue);
	color: var(--colorwhite);
	font-size: 24pt;
}
.headnavlink:hover {
	background-color: var(--colordarkblue);
	color: var(--mainbgcolor2);
}
.pointernav {
	background-color: var(--mainbgcolor2);
	color: var(--colorwhite);
	font-size: 24pt;
}
.pointernav:hover {
	background-color: var(--mainbgcolor1);
	color: var(--maincolor);
}
.botnav {
	padding-top: 20px;
	padding-bottom: 20px;
	background-color: var(--colorblue);
    margin: 0 auto; 
    position: relative;
}
.fodnavlink {
	color: var(--maincolor);
	font-size: 12pt;
}
.fodnavlink:hover {
	color: var(--mainbgcolor3);
}
.floatleft {
	float: left;
}
.margin4 {
	margin: 4px;	
}
.imgcase {
	float: left;
	margin: 0px;
	padding: 8px;
	background-color: var(--mainbgcolor1);
	width: 100%;
}
.galimg {
	width: 100%;
}
.sliderfull {
    background-color: var(--mainbgcolor2);  
}

/*   Bootstrapelemente - Overlay */

.card {
	border: 1px solid var(--maincolor);
}
.card-header {
	background-color: var(--mainbgcolor1);
}
.card-body {
	background-color: var(--mainbgcolor1);
}

.multicol {
	columns: 2 300px;
    column-gap: 2em;
    text-align: justify;
}
button {
	background-color: var(--mainbgcolor2);	
	border: 3px solid var(--mainbgcolor3);
	border-radius: 7px 7px 7px 7px;
	cursor: pointer;
}

/*   farben und markierungen          */

.err {
	color: var(--colorred);
	background-color: var(--mainbgcolor2);
	border-bottom: 1px solid var(--colorred);
}
.clstd {
	color: var(--colordark);
	background-color: var(--mainbgcolor2);
	border: 1px solid var(--colordark2);
}
.clerr {
	color: var(--colordarkred);
	background-color: var(--mainbgcolor2);
	border: 1px solid var(--colordarkred);
}
.tcstd {
	color: var(--colordark);
}
.tcerr {
	color: var(--colordarkred);
}
.tcgreen {
	color: var(--colorgreen);
}
.tcred {
	color: var(--colorred);
}
.tcblue {
	color: var(--colorblue);
}
.tcmage {
	color: var(--colormage);
}
.tcyellow {
	color: var(--coloryellow);
}
.tcwhite {
	color: var(--colorwhite);
}
.txmark {
	color: var(--colordark);
	font-weight: 600;
	text-decoration: underline;
}
.txbold {
	font-weight: 600;
}

/*   formulare          */

input, select, textarea {
	color: var(--maincolor);
	background-color: var(--mainbgcolor1);
	border: 1px solid var(--colordark3);
	border-radius: 4px 4px 4px 4px;
}
option {
	color: var(--maincolor);
	background-color: var(--mainbgcolor1);
	border: 0px;
}
.ipsend {
	color: var(--colorgreen);
	background-color: var(--mainbgcolor1);
	border: 1px solid var(--colordark3);
	border-radius: 4px 4px 4px 4px;
	font-weight: 600;
}
.ipbutton {
	color: var(--colordark2);
	background-color: var(--mainbgcolor1);
	border: 1px solid var(--colordark3);
	border-radius: 4px 4px 4px 4px;
	font-weight: 600;
}
.ipstop {
	color: var(--colorred);
	background-color: var(--mainbgcolor1);
	border: 1px solid var(--colordark3);
	border-radius: 4px 4px 4px 4px;
	font-weight: 600;
}
.clstd {
	color: var(--colordark);
	background-color: var(--mainbgcolor1);
	border: 1px solid var(--colordark3);
}
.clerr {
	color: var(--colorred);
	background-color: var(--mainbgcolor1);
	border: 1px solid var(--colordarkred);
}
.tcstd {
	color: var(--colordark);
}
.tcyel {
	color: var(--coloryellow);
}
.tcerr {
	color: var(--colorred);
}

/*   tabellen             */

.tbborder {
	border: 1px solid var(--maincolor);
}
.tbhover {
}
.tbhover:hover {
	background-color: var(--mainbgcolor1);
}
.pointer {
	font-weight: 600;
}
.dispointer {
	font-weight: 200;
}
.task {
	background-color: var(--mainbgcolor1);
}
.left {
	align-items: left;
	justify-content: left;
	text-align: left;
}
.center {
	align-items: center;
	justify-content: center;
	text-align: center;
}
.right {
	align-items: right;
	justify-content: right;
	text-align: right;
}
table.fullwidth, .fullwidth {
	width: 100%;
}
.col7 {
	width: 14%;
}
.disttop {
	margin-top: 16px;
}
.distbottom {
	margin-bottom: 16px;
}