:root {
  	--ORCAblau: #002b44;
	--taubenblau: #47617f;	
	--graublau: #85a6ba;	
	--eisblau: #bed4dc;	
	--ORCArot: #a90d00;	
	--hellrot: #e61300; /*#d63100; /*#d63d00;*/
 	--lachsrot: #ca7069;
  	--apricot: #dfb4a4;
  	--lila: #821c87;
  	--helllila: #bc90c1;
	--tuerkis:#006872;
	--helltuerkis:#76aab7;
	--weiss: #ffffff;
	--grau: #dfdfdf;
	--gruen: #286307;
  	--gruen1: #3a870d;
   	--gruen2: #4cb011;
}

* {
margin: 0;
padding: 0;
border: none;
font-family: Arial, sans-serif, Helvetica, "sans-serif";
}
strong {font-family: Arial, sans-serif, Helvetica, "sans-serif";
}


body {
background: var(--ORCAblau);
color:  var(--weiss);
}

/* unvisited link */
a {color:  var(--weiss);text-decoration: none}
a:link {  color: var(--weiss);text-decoration: none}
a:visited {  color: var(--weiss);text-decoration: none}
a:hover {  color: var(--weiss);text-decoration: none}
a:active {  color: var(--weiss);text-decoration: none}


header {
	height:80px;
	margin: 30px auto;
	width: 100%;
	background:  var(--ORCAblau);
	position: sticky;
    top: 0;
}

.header-icon {
width:300px;
margin-bottom:50px;
	float:left;
}

.header-icon2 {
margin-left:75px;
width:65px;
	margin-bottom:50px;
		float:left;
}
.header-icon3 {
margin-left:5px;
height:50px;
	margin-bottom:50px;
		float:left;
}

#container {
margin: 30px auto;
width: 1400px;
}

h3 {
margin: 20px 0 10px 0;
font-size: 1em;
color: var(--weiss);
margin-bottom:20px;
}

.ohneRahmen{
border: 1px solid var(--grau);
border-collapse: collapse;
padding: 8px;
}

table, th, td {
border: 1px solid var(--grau);
border-collapse: collapse;
padding: 8px;
}
th {
background-color: var(--lila);
color: var(--weiss);
border: 1px solid var(--weiss);
font-weight: normal;
}
.thtuerkis {
background-color: var(--tuerkis);
color: var(--weiss);
border: 1px solid var(--weiss);
font-weight: normal;
}
.clearer {
clear: both;
}

.barhoriz {
margin: 2px;
width: 800px;
height: 26px;
border: 0px solid #ddd;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
overflow: visible;
/*background: var(--weiss);*/
}

.hprogress {
height: 15px;
-webkit-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
font-family: Verdana, Arial, sans-serif, Helvetica, "sans-serif";
font-size: 11px;
font-weight: bold;
text-shadow: 0 0 2px #222;
line-height: 13px;
margin-top: 5px;
padding: 1px 0 0 4px;
color: var(--weiss);

}

.bargreen {background: #5fd35f;}
.barblue {background: #5599ff;}
.bargrey {background: #555555;}
.barorange {background: #ff7f2a;}
.ORCArot {background: var(--ORCArot);}
.hellrot {background: var(--hellrot);}
.ORCAhellila {background: var(--helllila);}
.ORCAtaubenblau {background: var(--taubenblau);}	
.ORCAgraublau {background: var(--graublau);}	
.ORCAeisblau {background: var(--eisblau);}
.ORCAlachsrot {background: var(--lachsrot);}	
.ORCAhelltuerkis {background: var(--helltuerkis);}	
.ORCAblau {background: var(--ORCAblau);}	
.tuerkis {background: var(--tuerkis);}
.lila	{background: var(--lila);}
.taubenblau	{background: var(--taubenblau);}

.beschreibung {font-size: 14px;
				  margin-top:-18px;
				color:var(--weiss);
}
/******************************************************
/* rahmen fürBilder */
/*****************************************************/
.rahmen {border:1px solid #dfdfdf;}
/******************************************************
/* Back and ToTop button css */
/*****************************************************/
#scroll {
    position:fixed;
    right:40px;
    bottom:40px;
    cursor:pointer;
    width:50px;
    height:50px;
    background-color:var(--taubenblau);
    text-indent:-9997px;
    display:none;
    -webkit-border-radius:5px;
    -moz-border-radius:5px;
    border-radius:5px;
}
#scroll span {
    position:absolute;
    top:50%;
    left:50%;
    margin-left:-8px;
    margin-top:-12px;
    height:0;
    width:0;
    border:8px solid transparent;
    border-bottom-color:#ffffff
}
#scroll:hover {
    background-color:var(--graublau);
    opacity:1;
    filter:"alpha(opacity=100)";
    -ms-filter:"alpha(opacity=100)";
}
#back {
    position:fixed;
    left:40px;
    top:40px;
    cursor:pointer;
    width:50px;
    height:50px;
    background-color:var(--taubenblau);
    text-indent:-9998px;
    display:none;
    -webkit-border-radius:5px;
    -moz-border-radius:5px;
    border-radius:5px;
	
}
#back span {
    position:absolute;
    top:50%;
    left:50%;
    margin-left:-12px;
    margin-top:-8px;
    height:0;
    width:0;
    border:8px solid transparent;
    border-bottom-color:#ffffff;
  	transform: rotate(-90deg);
}
#back:hover {
    background-color:var(--graublau);
    opacity:1;
    filter:"alpha(opacity=100)";
    -ms-filter:"alpha(opacity=100)";
}

#scrolldown {
    position:fixed;
    right:40px;
    top:40px;
    cursor:pointer;
    width:50px;
    height:50px;
    background-color:var(--taubenblau);
    text-indent:-9999px;
    display:none;
    -webkit-border-radius:5px;
    -moz-border-radius:5px;
    border-radius:5px;
	
}
#scrolldown span {
    position:absolute;
    top:50%;
    left:50%;
    margin-left:-10px;
    margin-top:-4px;
    height:0;
    width:0;
    border:8px solid transparent;
    border-bottom-color:#ffffff;
  	transform: rotate(180deg);
}
#scrolldown:hover {
    background-color:var(--graublau);
    opacity:1;
    filter:"alpha(opacity=100)";
    -ms-filter:"alpha(opacity=100)";
}