/* Basis */
* {
	box-sizing: border-box;
}

html,body {
	margin: 0; padding:0;
	font-family: Arial, sans-serif;
	font-size: 11pt;
	height: 100%;
}
body.flex {
	xbackground-color: #ffc;

	display:flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: center;
}

svg {
	background-color: #fff;
	margin-top: 40px;
}
#idIcons {
	min-width: 165px;
}
#idIcons img:hover {
	background-color: rgba(0,0,0,0.3);
}
.imgIcon {
	height: 32px;
	margin: 4px;
	cursor: pointer;
}

div.header1 {
	font-size: 28pt;
	font-weight: bold;
	text-align: center;
	width: 100%;
	padding: 2rem;
	color: #008;
	background-color: #eef;
}
div.header2 {
	font-size: 22pt;
	font-weight: bold;
	text-align: center;
	width: 100%;
	padding: 2rem;
	color: #008;
}
div.header3 {
	font-size: 16pt;
	font-weight: bold;
	padding: .3rem 1rem;
	width: 100%;
	color: #008;
	background-color: #eef;
}
div.header4 {
	font-size: 14pt;
	font-weight: bold;
	padding:  .3rem 1rem;
	color: #008;
}
div.projectheader {
	font-size: 14pt;
	font-weight: bold;
	padding:  .3rem 1rem;
	color: #008;
}
div.error {
	background-color: #800;
	color: #DDD;
}

div.projektinfo {
	margin-top: 1rem;
	margin-bottom: 1rem;
	font-size: 12pt;
	text-align: center;
	Xcolor: #008;
}
div.projektinfo div#idTitle {
	font-weight: bold;
}

div.textBlock {
	padding: 1rem;
	margin: 1rem;
	border: 1px solid #008;
	border-radius: 1rem;
}

div.qtx {
	font-family: Courier, monospace;
	/*white-space:pre;*/
	margin-left:2em;
}
div.footnote {
	margin-top: 1rem;
	font-size: 8pt;
	color: #008;
	padding: 1rem;
	border-top: solid 1px #008;
}

div.infolinks {
	font-size: .8rem;
}
div.infolinks a {
	color: #66c;
	text-shadow: 0 0 6px #66c;
	text-decoration: none;
	margin-left: .3rem;
}
div.infolinks a:hover {
	text-decoration: underline;
}

.clickable{
	cursor: pointer;
}

.button {
	font-size: 22pt;
	font-weight: bold;
	text-align: center;
	padding: 1rem;
	margin: .3rem;
	color: #008;
	background-color: #eef;
	text-decoration: none;
	border: 1px solid #008;
	border-radius: .5rem;
	filter: drop-shadow(.1rem .1rem .2rem gray);
}
.button:hover {
	background-color: #ccf;
	animation: btn-hover .5s;
	filter: drop-shadow(.2rem .2rem .4rem #008); 
}
@keyframe btn-hover {
	from { filter: drop-shadow(.1rem .1rem .2rem gray); }
	to { filter: drop-shadow(.2rem .2rem .4rem #008); }
}

/* Schließen-Button (rotes X) */
div.btnBack {
	width: 30px;
	height: 100%;
	background-color: #a00;
	color: #fff;
	font-weight: 900;
	float: right;
	padding: 7px;
	text-align: center;
	cursor: pointer;
}
div.btnBack:hover {
	background-color: #c00;
}

div.markKommentarAktiv {
	position: absolute;
	background-color: rgb( 128 0 0 / 10% );
}
div.markKommentarCompleted {
	position: absolute;
	background-color: rgb( 0 128 0 / 10% );
}

/* #################### allg ####################################### */
.color-ok    { background-color: #cfc; color: #393; }
.color-warn  { background-color: #ffc; color: #000; }
.color-error { background-color: #fcc; color: #933; }
.bk-ok    { background-color: #cfc; color: #393; }
.bk-warn  { background-color: #ffc; color: #000; }
.bk-error { background-color: #fcc; color: #933; }

.left   { text-align: left;   }
.center { text-align: center; }
.right  { text-align: right;  }

/* ####################Index-Page####################################### */
div#idGreeting {
	font-size: 16pt;
	font-weight: bold;
	#text-align: center;
	padding: 1rem;
	color: #008;
}
div#idSelectProject {
	font-size: 16pt;
	font-weight: bold;
	padding: 1rem;
	color: #008;
	
	border: 1px solid #008;
	border-radius: 1rem;
}

div#idBeschreibung {
	padding-left: 1.5rem;
	white-space: pre-line;
}

div#idOpenLink {
	padding-left: 1.5rem;
	white-space: pre;
}


/* ##################Start-Page########################################## */
@keyframes aniRotate180 {
	from { transform: rotate(  0deg); }
	to   { transform: rotate(180deg); }
}
@keyframes aniRotate-180 {
	from { transform: rotate(180deg); }
	to   { transform: rotate(  0deg); }
}
#idImgDiagList.up {
	animation: aniRotate-180 .3s;
}
#idImgDiagList.down {
	animation: aniRotate180 .3s;
}

#idImgKommList.up {
	animation: aniRotate-180 .3s;
}
#idImgKommList.down {
	animation: aniRotate180 .3s;
}

#idBurgerAgb {
	position: absolute;
	top: 2.5rem;
	right: 5px;
	padding: .3rem;
	background-color: #eef;

	font-size: 1rem;
}

#idBurgerAgb a {
	color: #008;
	display: block;
	text-decoration: none;
	padding-top: .3rem;
	padding-bottom: .3rem;
}
#idBurgerAgb a:hover {
	text-decoration: underline;
	
}

a.kommListEntry10 {
	display: block;
	text-decoration: none;
	margin: .5rem;
	background-color: rgb( 128 0 0 / 10%)
}
a.kommListEntry20 {
	display: block;
	text-decoration: none;
	margin: .5rem;
	background-color: rgb( 0 255 0 / 10%)
}
a.kommListEntry30 {
	display: block;
	text-decoration: line-trough;
	margin: .5rem;
}

div.tooltip {
	position: absolute;
	right: .5em;
	display: inline-block;

	border: 1px solid #008;
	border-radius: .3em;
	padding: .2em;
	background-color: #ccf;
	color: #008;
}