@charset "utf-8";

:root {
	--maincolor: #220011;
	--mainbgcolor1: #ffe502;
	--mainbgcolor2: #ffffff;
	--mainbgcolor3: #ca1b18;
	--mainbgcolor4: #e98106;
	--mainbgcolor5: #2499de;
	
	--colordark1: #000000;
	--colordark2: #482581;
	--colordarkgreen: #106600;
	--colordarkred: #880011;
	--colordarkblue: #111088;
	--colordarkmage: #660066;
	--colorgreen: #20ff00;
	--colorred: #ca1b18;
	--colorblue: #3311FF;
	--colormage: #da3b75;
	--colororange: #e98106;
	--coloryellow: #ffe502;
	--colorwhite: #ffffff;
}

/* elemente */

html, body {
	overflow-x:hidden;
	color: var(--maincolor);
	background: linear-gradient(to bottom, var(--mainbgcolor2), var(--mainbgcolor1));
}

/* Works on Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--mainbgcolor5) var(--mainbgcolor2);
}

/* Works on Chrome, Edge, and Safari */
*::-webkit-scrollbar {
  width: 12px;
}

*::-webkit-scrollbar-track {
  background: var(--mainbgcolor2);
}

*::-webkit-scrollbar-thumb {
  background-color: var(--mainbgcolor5);
  border-radius: 2px;
  border: 3px solid var(--mainbgcolor2);
}

a {
	text-decoration: none;
	color: var(--maincolor);
}
a:hover {
	text-decoration: underline;
	color: var(--maincolor);
}
a.kontent {
	text-decoration: none;
	color: var(--maincolor);
}
a.kontent:hover {
	text-decoration: underline;
	color: var(--colorblue);
}
.altbg {
	text-decoration: none;
	color: var(--mainbgcolor1);
}
.altbg:hover {
	text-decoration: none;
	color: var(--mainbgcolor1);
}
.main, .headnav {
	padding-left: 16px;
	padding-right: 16px;
	color: var(--maincolor);
}
.mainfod {
	padding-left: 24px;
	padding-right: 24px;
	color: var(--maincolor);
	z-index: 1000;
    background-color: var(--mainbgcolor1);
}
nav {
	background-color: var(--mainbgcolor1);	
}
.container {
}
.bgwtrn {
	padding: 12px;
	background: rgba(255,255,0,0.7);
}
.space {
	height: 20px;
}
.ninanav {
	background: linear-gradient(to bottom, var(--mainbgcolor5), var(--colorblue));
	border-bottom: 2px solid var(--mainbgcolor3);
}
.ninatnav {
	background-color: var(--mainbgcolor5);	
	padding-top: 12px;
	border-top: 2px solid var(--mainbgcolor3);
}
.conbox {
	background-color: RGBA(255, 255, 255, 0.7);	
	padding: 8px;
	margin: 8px;
}
.note {
	background-color: var(--mainbgcolor1);	
	border: 1px solid var(--colordark1);
	border-radius: 8px;
	padding: 8px;
}

.notecons {
	position: fixed;
	top: 150px;
	left: 25vw;
	width: 50vw;
	z-index: 1000;

	background-color: var(--mainbgcolor1);	
	border: 1px solid var(--colordark1);
	border-radius: 8px;
	padding: 8px;
}

.fullkon {
    background: rgba(255,255,255,0.5);
	border: 1px solid var(--maincolor);
	color: var(--maincolor);
	margin-top: 20px;
	padding: 8px;
}
.headnav {
    margin: 0 auto; 
    position: relative;
}
.headnavlink {
	font-size: 16pt;
	font-weight: 600;
	margin: 8px;
	margin-bottom: 0px;
}
.headnavlink:hover {
	text-decoration: none;
}
.pointernavheadnavlink {
	font-size: 16pt;
	font-weight: 600;
}
.pointernavheadnavlink:hover {
	text-decoration: none;
}
.pointernav {
}
.fodnav {
    margin: 0 auto; 
    position: relative;
	background-color: var(--mainbgcolor1);
}
.fodnavlink {
	font-size: 11pt;
	font-weight: 600;
}
.fodnavlink:hover {
	background-color: var(--mainbgcolor2);
}
.tnavlink {
	font-size: 10pt;
	font-weight: 400;
	margin: -12px;
	padding: -12px;
}
.tnavlink:hover {
	font-weight: 600;
}
.floatleft {
	float: left;
}
.margin4 {
	margin: 4px;	
}
.imgcase {
	float: left;
	margin: 0px;
	padding: 8px;
	background-color: var(--mainbgcolor1);
	width: 100%;
}
.galimg {
	width: 100%;
}
.imgbgcase {
	background-image: url("media/dummy.gif");
    background-repeat:no-repeat;
    background-size:cover;
    background-position: center center;
	min-height: 300px;
	text-align: center;
}
.multicol {
	columns: 2 300px;
    column-gap: 2em;
    text-align: justify;
}
.conbox {
	background-color: RGBA(255, 255, 255, 0.7);	
	color: var(--colordark2);
	padding: 8px;
	margin: 8px;
}
#imgbgosmm {
	background-image: url(../media/web/map.jpg);
    background-repeat:no-repeat;
    background-size:cover;
    background-position: center;
    height: 99%;
    min-height: 450px;
}
.bordercase {
	border: 1px solid var(--mainbgcolor1);
}
.sliderfull {
    background-color: var(--mainbgcolor2);  
}

/*   Bootstrapelemente - Overlay */

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

button {
	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(--colorred);
	font-weight: 600;
	text-decoration: underline;
}
.txbold {
	font-weight: 600;
}

/*   formulare          */

input, select, textarea {
	color: var(--colordark1);
	background-color: var(--mainbgcolor1);
	border: 1px solid var(--colordark2);
	border-radius: 6px;
}
option {
	color: var(--colordark1);
	background-color: var(--mainbgcolor1);
	border: 0px solid var(--colordark2);
	border-radius: 6px;
}
.ipsend {
	color: var(--colordarkgreen);
	font-weight: 600;
	background-color: var(--mainbgcolor1);
	border: 1px solid var(--colordark2);
	border-radius: 6px;
}
.ipbutton {
	color: var(--colorblue);
	font-weight: 600;
	background-color: var(--mainbgcolor1);
	border: 1px solid var(--colordark2);
	border-radius: 6px;
}
.ipstop {
	color: var(--colorred);
	font-weight: 600;
	background-color: var(--mainbgcolor1);
	border: 1px solid var(--colordark2);
	border-radius: 6px;
}
.clstd {
	color: var(--colordark);
	background-color: var(--mainbgcolor2);
	border: 1px solid var(--colordark2);
}
.clerr {
	color: var(--colorred);
	background-color: var(--mainbgcolor2);
	border: 1px solid var(--colordarkred);
}
.tcstd {
	color: var(--colordark);
}
.tcerr {
	color: var(--colorred);
}

/*   tabellen             */

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