@charset "utf-8";

:root {
	--vc1			: #FFFFFF;
	--vc2			: #FFFF00;
	--vc3			: #00FF00;
	--vci1			: #000000;
	--bc1			: #000000;
	--bc2			: #102c15;
	--bc3			: #FF6600;
	--bci1			: #FFFFFF;
	
	--bc1t75		: #FFFFAACC;
	--bcdk75		: #000000CC;
	--bc275			: #213024cc;
	--bc375			: #2e4131cc;
	
	--error			: #FF0000;
	--information	: #6666FF;
	--succes		: #00FF00;
	--disabled		: #888888;
	--mark			: #AAAAFF;
	
	--black			: #000000;
	--dgray			: #444444;
	--gray			: #888888;
	--lgray			: #BBBBBB;
	--white			: #FFFFFF;
	--dblue			: #000088;
	--blue			: #0000FF;
	--lblue			: #6666FF;
	--dmagenta		: #880088;
	--magenta		: #FF00FF;
	--lmagenta		: #FF88FF;
	--dred			: #880000;
	--red			: #FF0000;
	--lred			: #FF6666;
	--dorange		: #884400;
	--orange		: #FF8800;
	--dorange		: #FFBB88;
	--dyellow		: #888800;
	--yellow		: #FFFF00;
	--lyellow		: #FFFF66;
	--dgreen		: #008800;
	--green			: #00FF00;
	--lgreen		: #88FF88;
}

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

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

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

*::-webkit-scrollbar-thumb {
  background-color: var(--bc1);
  border-radius: 20px;
  border: 3px solid var(--vc1);
}

/* elemente */

html, body {
	overflow-x:hidden;
	color: var(--vc1);
	background-color: var(--bc1);
	background-image: url("../media/web/forestbg.webp");
    background-repeat:no-repeat;
    background-size:cover;
    background-position: center center;
    background-attachment: fixed;
}

.main {
	padding-left: 16px;
	padding-right: 16px;
	color: var(--vc1);
}

.maininv {
	padding-left: 16px;
	padding-right: 16px;
	color: var(--vci1);
	background-color: var(--bci1);
}

/* links */


.pointernav {
	text-decoration: underline;
}
.pointernav:hover {
	text-decoration: none;
}
a {
	text-decoration: none;
	color: var(--vc1);
}
a:hover {
	text-decoration: underline;
	color: var(--vc2);
}

a.kontent {
	text-decoration: none;
	color: var(--vc2);
}
a.kontent:hover {
	text-decoration: underline;
	color: var(--vc1);
}

a.inv {
	text-decoration: none;
	color: var(--vci1);
}
a.inv:hover {
	text-decoration: underline;
}

a.tnav {
	text-decoration: none;
	font-size: 14px;
	color: var(--vci1);
	padding: 0px 8px;
}
a.tnav:hover {
	text-decoration: underline;
}

a.mnav {
	text-decoration: none;
	color: var(--vc1);
}
a.mnav:hover {
	text-decoration: underline;
	color: var(--vc2);
}

a.snav {
	text-decoration: none;
	color: var(--vc2);
}
a.snav:hover {
	text-decoration: underline;
	color: var(--vc3);
}

a.fnav {
	text-decoration: none;
	color: var(--vc2);
	padding: 0px 8px;
}
a.fnav:hover {
	text-decoration: underline;
	color: var(--vc3);
}

.pointer {
	color: var(--mark);
	font-weight: 600;
	text-decoration: none;
}
.pointer:hover {
	text-decoration: none;
}

.dispointer {
	color: var(--disabled);
	text-decoration: none;
}
.dispointer:hover {
	text-decoration: none;
}
/* navigation */

.ninanav {
	border-bottom: 1px solid var(--vc1);
}

.topnav {
}

.topnavline {
	min-height: 4px;
}

.fodnav {
}

.fodnavline {
	min-height: 4px;
}

.dropnav {
	border-radius: 8px;
}

nav {
}

.linav {
	list-style-type: none;
	margin: 0;
	padding: 0;
}

.lihdir {
	float: left;
}

.livdir {
	display: block;
	width: 100%;
}

/* boxen */

.kontent {
	padding: 8px;
}

.note {
	border: 0px solid var(--vc1);
	background-color: var(--bc3);
	border-radius: 8px;
	padding: 12px;
}

.bgwtrn {
	background: rgba(255, 255, 255, 0.7);
	color: var(--vc1);
	padding: 12px;
}

.bgbtrn {
	background: rgba(0, 0, 0, 0.7);
	color: var(--vc1);
	padding: 12px;
}

.imgbox {
	background-color: var(--bc2);
	float: left;
	margin: 0px;
	padding: 8px;
	width: 100%;
}

.disttop {
	margin-top: 16px;
}

.distbottom {
	margin-bottom: 16px;
}

.disttopdbl {
	margin-top: 32px;
}

.distbottomdbl {
	margin-bottom: 32px;
}

.stdborder {
	border: 1px solid var(--vc1);
	border-radius: 8px;
}

.stdborderinv {
	border: 1px solid var(--bc1);
	border-radius: 8px;
}


.listbox {
	background-color: var(--bc1);	
	border: 0px dotted var(--vc1);
	display: inline-block;
	border-radius: 0px;
	padding: 8px;
}

/* tabellen */

.fullwidth {
	width: 100%;
}

.col7 {
	width: 14%;
}

.tbhover {
}

.tbhover:hover {
	background-color: var(--bc375);
}

.tbborder {
	border: 1px solid var(--maincolor);
}

.tli {
	margin-left: 2em;
}

/* inhaltssteuerung */

.floatleft {
	float: left;
}

.floatright {
	float: right;
}

.marginstd {
	margin: 8px;
}

.paddingstd {
	padding: 8px;
}

.margindbl {
	margin: 16px;
}

.paddingdbl {
	padding: 16px;
}

/* bilder */

.galimg {
	width: 100%;
}

.imgcase {
	float: left;
	margin: 0px;
	padding: 8px;
	background-color: var(--bc2);
	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;
}

/* text */

.inv {
	color: var(--vci1);
}

.multicol {
	columns: 2 300px;
    column-gap: 2em;
    text-align: justify;
}

.multicolbox {
  -moz-column-count:    4;
  -webkit-column-count: 4;
  column-count:         4;
}

.txbold {
	font-weight: 600;
}
.txthin {
	font-weight: 200;
}

.txmark {
	color: var(--mark);
	font-weight: 600;
}

.tcerr {
	color: var(--error);
	text-decoration: underline;
}

.tcinfo {
	color: var(--information);
}

.tcok {
	color: var(--succes);
}

.tcdisable {
	color: var(--disabled);
}

.tcblack {
	color: var(--black);
}

.tcdgray {
	color: var(--dgray);
}

.tcgray {
	color: var(--gray);
}

.tclgray {
	color: var(--lgray);
}

.tcwhite {
	color: var(--white);
}

.tcdblue {
	color: var(--dblue);
}

.tcblue {
	color: var(--blue);
}

.tclblue {
	color: var(--lblue);
}

.tcdmagenta {
	color: var(--dmagenta);
}

.tcmagenta {
	color: var(--magenta);
}

.tclmagenta {
	color: var(--lmagenta);
}

.tcdred {
	color: var(--dred);
}

.tcred {
	color: var(--red);
}

.tclred {
	color: var(--lred);
}

.tcdorange {
	color: var(--dorange);
}

.tcorange {
	color: var(--orange);
}

.tclorange {
	color: var(--lorange);
}

.tcdyellow {
	color: var(--dyellow);
}

.tcyellow {
	color: var(--yellow);
}

.tclyellow {
	color: var(--lyellow);
}

.tcdgreen {
	color: var(--dgreen);
}

.tcgreen {
	color: var(--green);
}

.tclgreen {
	color: var(--lgreen);
}

.tcstd  {
	color: var(--vc1);
}

.task {
	background-color: var(--bc275);
}
.left {
	text-align: left;
}
.center {
	text-align: center;
	align-items: center;
	vertical-align: center;
	justify-content: center;
}
.hcenter {
	align-items: center;
	vertical-align: center;
	justify-content: center;
}
.right {
	text-align: right;
}

.dflex {
	display: flex;
	flex-wrap: wrap;
}

/* formulare */

button, .button {
	color: var(--vc1);
	background-color: var(--bc1);
	border: 0px solid var(--vc1);
	border-radius: 4px;
	cursor: pointer;
}

input, select, textarea {
	color: var(--vc1);
	background-color: var(--bc2);
	border: 1px solid var(--vc1);
	border-radius: 4px;
}

option {
	color: var(--vc1);
	background-color: var(--bc1);
	border: 0px solid var(--vc1);
}

.ipsend {
	color: var(--succes);
	font-weight: 600;
	background-color: var(--bc1);
	border-radius: 4px;
	border: 1px solid var(--vc1);
}

.ipbutton {
	color: var(--vc1);
	font-weight: 600;
	background-color: var(--bc1);
	border: 1px solid var(--vc1);
	border-radius: 4px;
}

.ipstop {
	color: var(--error);
	font-weight: 600;
	background-color: var(--bc1);
	border: 1px solid var(--vc1);
	border-radius: 4px;
}
.ipsend:hover, .ipbutton:hover, .ipstop:hover  {
	cursor: pointer;
}

.clstd, .cl {
	color: var(--vc1);
	background-color: var(--bc2);
	border: 1px solid var(--vc1);
	border-radius: 4px;
}

.clerr {
	color: var(--error);
	background-color: var(--bc1);
	border: 0px solid var(--error);
	border-radius: 4px;
}

/*   Bootstrapelemente - Overlay */

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