/* **************************************************myCss.css 
Datenverdreher.de,  2020, zu Zeiten von Corona 
bbsss
Verwendete Farben:
- Dunkel-Blau der topnav: #0a255c
- Mittel-Blau der sidenav: #d1dffa              
- Sehr helles Blau der sidenav: #e8effc   (so geht's) 
- gelbe Schrift => aktive button TopNav: #ffff00
- Leichtes gelb der sidenav: #ffffb3 

- ein relativ dunkles Blau: #1241a1 
- sehr schwaches Gelb: #ffffe6   
- leichtes Grau:  #f2f2f2 
******************************************************myCss.css */



/* CSS-Variablen--------------------------------------start
Dopple-Minus vorneweg => CSS-Variable, rechts vom Doppelpunkt steht der Wert
Mit Var(--VarName) wird der Variablenwert an der gewünschten Stelle eingesetzt. */

:root {
	--me-color: hsl(350,50%,50%);
	--sBorder: 0px;
}
/* CSS-Variablen---------------------------------------end  */


* {
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;	
	font-family:  Verdana , Arial, Helvetica, sans-serif ;				
}

body {
	font-size: 100%; /* <--so ist's empfohlen auf: https://www.w3schools.com/css/css_font_size.asp */
}

var {
  font-size: 1em;	
}

figure {
	
	
}

ffigure {
  float: right;
  width: 30%;
  text-align: center;
  font-style: italic;
  font-size: smaller;
  text-indent: 0;
  border: thin silver solid;
  margin: 0.5em;
  padding: 0.5em;
}

figcaption {
  text-align: center;
  font-size: smaller;	
	
}

h1
{
	background-color: #e8effc  ;	        
	color: #0A255C;                    /* helles blau der sidenav: #e8effc    das etwas dunklere blau der sidenav:#d1dffa              #1241a1 ein relativ dunkles blau */
	border-top: 1px solid grey;
	border-bottom: 1px solid grey;
	padding-top: 2px;
	padding-bottom: 2px;
	padding-left: 10px;
}

h4
{
	background-color: #e8effc  ;	        
	color: #0A255C;                    /* helles blau der sidenav: #e8effc    das etwas dunklere blau der sidenav:#d1dffa              #1241a1 ein relativ dunkles blau */
	border-top: 1px solid grey;
	border-bottom: 1px solid grey;
	padding-top: 5px;
	padding-bottom: 5px;
	padding-left: 30px;
	background: #e8effc url("info.png") no-repeat 10px;
}

h6
{
	min-height: 5px;	
	background-color: #e8effc  ;	        
	color: #0A255C;                    /* helles blau der sidenav: #e8effc    das etwas dunklere blau der sidenav:#d1dffa              #1241a1 ein relativ dunkles blau */
	border-top: 1px solid grey;
	border-bottom: 1px solid grey;
	padding-top: 0px;
	padding-bottom: 0px;
	padding-left: 30px;
	font-size: 4px;
	text-align: center;
	margin-left: 0%;
	margin-right: 2%;
	margin-top: 50px;
	margin-bottom: 20px;
}

.myMaxWidthOverall {
	max-width: 1600px;	
	margin: auto;  /*<--bewirkt dass der Bereich zentriert wird */
	/*outline-style: double;*/
	/* outline: #eeeeee solid 1000px;*/
}	

.myMaxWidth {
	max-width: 697px;	
}	

#myColor {  /*  wird für die Farbe des "&" bei der Tabelle der Tastenkürzel verwendet */
	color: silver;	
}

/*  Tabelle mit Id 't01' ---------------start */
/*  wird bei der Seite für Tastenkürzel verwendet */
table#t01 {
	border-spacing: 1px;
}

table#t01 tr:nth-child(even) {
	background-color: #eee;
}

table#t01 tr:nth-child(odd) {
	background-color: #fff;
}

table#t01 td {
	border: 1px solid silver;
	padding: 6px;
}
/*  Tabelle mit Id 't01' ---------------end */


mark {
	background-color: #ffff99;	
}

.Aufzaehlung {
	background: #FFFFB3;
	font-size: 1.4em;
	font-weight: bold;	
}	


em  {
	color: #0A255C;
	padding-left: 0px;
}

hr {
	min-height: 2px;	
	background-color: #e8effc;	        
	color: #0A255C;                    
	border-top: 1px solid grey;
	border-bottom: 1px solid grey;
	margin-left: 80px;
	margin-right: 70px;
	padding-left: 10px;
}

.my_hr {
	min-height: 4px;	
	background-color: #e8effc;	        
	color: #0A255C;                    
	border-top: 1px solid grey;
	border-bottom: 1px solid grey;
	border-left: 0;
	border-right: 0;
	margin-left: 50px;
	margin-right: 50px;
}


code {
	font: 1.0em/normal Consolas, monospace;
	/*color: #0000e6;*/
}	


.box_code_xxx, .box_success, .box_warning, .box_fail {
    padding: 0.7em;
    padding-left: 36px;
    border-radius: 7px;
	box-shadow: 3px 3px 3px #aaa;
    -webkit-box-shadow: 3px 3px 3px #aaa;	
}

.box_code_wrapper {
	color: black; 
    padding: 0.7em;	
	padding-left: 15px;
	box-shadow: 3px 3px 3px #aaa;
    -webkit-box-shadow: 3px 3px 3px #aaa;		
	background: rgb(255,255,240);
    border: 1px solid #dddddd;  /* #0000e6 blau */
    border-radius: 7px;
	overflow: auto;
	white-space: pre; /* dann werden Leerzeilen und Leerzeichen wie mit <pre> behandelt also gezeigt. Die Verwendung von <pre> hat jedoch den Nachteil dass immer erst eine Leerzeile generiert wird, warum auch immer. Mit white-space: pre  ist das nicht so.*/
	font: 1.0em/normal Consolas, monospace;	
	line-height: 100%;
	margin-top: 10px;
	width: 100%; /* smartphone first*/
	max-width: 900px;
}

.box_code_blue {
	color: #0000cc; 
	font: 1.0em/normal Consolas, monospace;
	line-height: 100%;
}

.box_code_green {
	color: green;
	font: 1.0em/normal Consolas, monospace;	
	line-height: 100%;
}

.box_code_black {
	color: black;
}

.box_success {
    background: #e1f8cb url("success.png") no-repeat 10px;
    color: #37620d;
    border: 1px solid #c6d880;
	box-shadow: 3px 3px 3px #aaa;
    -webkit-box-shadow: 3px 3px 3px #aaa;	
}

.box_warning {
    background: #ffffbb url("warning.png") no-repeat 10px;
    color: #756730;
    border: 1px solid #ffd324;
	box-shadow: 3px 3px 3px #aaa;
    -webkit-box-shadow: 3px 3px 3px #aaa;	
}

.box_fail {
    background: #fbe5e2 url("fail.png") no-repeat 10px;
    color: #992213;
    border: 1px solid #f2a197;
	box-shadow: 3px 3px 3px #aaa;
    -webkit-box-shadow: 3px 3px 3px #aaa;		
}
	
.box_code1stRow{
	background: rgb(255,255,255);
	color: #37620d;
	font: 1.0em/normal Consolas, monospace;
	font-weight: bold;
	border: 0px solid #0000e6;
	border-bottom: 1px solid #dddddd;
	margin-top: -10px;
	margin-left: 10px;
	margin-right: 10px;
	text-align: center;
 }

img {
	max-width: 100%; /*Responsive Regel: max-width ANSTELLE von width auf 100% setzen, dann wird das Bild nicht vergrössert. Zusätzlich noch height auf auto setzen.  */	
	height: auto;
}	

.img, .imgR, .imgL  {
	border: 0px solid #d1dffa;   
	padding: 3px; 
	box-shadow: 3px 3px 3px 3px #aaa;
    -webkit-box-shadow: 3px 3px 3px 3px #aaa;
	margin-bottom: 20px;	
}

.right
{
	text-align: right;

}

.left
{
	text-align: left;

}

.center
{
	justify-content: center;
	align-items: center;
	text-align: center;
	align: center;	
}

.imgR  {
	float: right;
	margin-right: 15px;
	margin-left: 10px;
	margin-top: 5px;

}
.imgR2  {
	float: right;
	margin-top: 5px;
	margin-left: 10px;

}

.imgL {
	float: left;
	text-align: left;
	margin-left: 0px;
	margin-right: 20px;
	margin-top: 5px;

}

.imgC {
/* 			Das Zentrieren eines Bildes geschieht so:  (die Klasse imgC wird also gar nicht benötigt)
			<div class="center">
				<?php  echo "<img class='img' src=\"".$sPath.$pic3." \" alt='' >";  ?>
			</div>

*/
}

.imgR_besidesCode  {
	float: right;
	/* margin-left: 50px;  wird nun in "nur PC" gesetzt  smartphone first */
	/* margin-right: 100px;  wird nun in "nur PC" gesetzt   */
	
}

.imgL_besidesCode  {
	border: 0px solid #d1dffa; 
	float: left;
	/*margin-left: 50px;  wird nun in "nur PC" gesetzt */
	/*margin-right: 50px;  wird nun in "nur PC" gesetzt */
}


.bigLetter {
  width: 0.7em;
  float: left;
  color: darkblue;
  font-size: 200%;
  font-family: Algerian, Courier, Consolas;
  line-height: 80%;
  padding: 0px;
  margin-right: 5px;
}

.Letter {
  color: #0a255c; 
  font-size: 200%;
  font-family: Courier, Consolas, Algerian  ;

}


/************************************ header */
.header {
	border: var(--sBorder) solid #ff8000;
	background:   #ffffff;    
	background-image: linear-gradient(#d1dffa, #ffffff);
	background-size: 0 0;  /*<--smartphone first, so sieht man im smartphone kein Bild hinter Datenverdreher.de, welches Bild im PC-Modus gezeigt wird, kann über php gesteuert werden, da die Bild-Angabe per style=... in das div-tag geschrieben wird */
	height: 80px;  /*<--smartphone first  100px*/
	padding: 15px;
	padding-left: 80px;  /*<--smartphone first  180px*/
	margin-left: 5px;
	margin-top: -8px;	/* komischerweise wird per "user agent css", also vom browser aus 8px margin-top voreingestellt, um das zu korrigieren hier die -8  */
	/*display: box;*/
	position: static; /*<--smartphone first*/
	z-index: 1;
	float: clear;
}

.header a {
	text-decoration: none;
}	



/************************************* topnav */			
.topnav {  	
	border: var(--sBorder) solid green;
	border-top: 0px solid #ff8000;
	/*border-bottom: 1px solid #0a255c;*/
	background-color: white; /* #5e8eed  #556699;*/
	color: white;	
	overflow: hidden;

	padding: 1px;
	padding-left: 0; /*<--smartphone first*/
	padding-bottom: 3px;
	padding-top: 2px;
	
	margin-left: 0;
	position: static;  /*<--smartphone first*/
	/*top: 100px;*/
	z-index: 1;
	float: clear;	
}

#topicHeader {
	/*margin-left: 50px;*/
	float: left;
	color: #cccccc  ;  /*#bacff7 (helles blau) #a3bef5;  #D1DFFA; */
	font-weight: bold;
	z-index: -1;
display: none;	
}

#id_openSign {
	 /*
	 position: -webkit-sticky;
	 position: sticky; */
	position: fixed;
	top:13px; 
	left:0px; 
	font-size:30px; 
	font-weight: bold; 
	cursor: pointer; 
	z-index: 2; 
	padding: 4px;
border: 3px ridge #dddddd; /*solid #0a255c;	*/
background: #ffffb3;
}		
		
#id_closeSign {		
	position: sticky;
	top:0px; 
	right:0px; 
	float:right;
	background: #ffffb3; 
	color: black; 
	font-size:33px; 
	font-weight: bold; 	
	cursor:pointer; 
	z-index:1;
	padding-left: 10px;
	padding-right: 10px;

border-left: 4px solid #0a255c;
border-bottom: 4px solid #0a255c;
}

#id_MaennchenAmSchreibtisch {
/*		display: none; */
}


.topnav a {
	/* height: 1.9em;*/
width: 100%; /*<--smartphone first*/	
	color: #333333; 
	/*border-left: 0px;
	border-right: 0px;	
	border-top: 0px;	*/
	border-radius: 3px; 
border: 1px solid #8c8c8c;  	
	text-align: center;
	padding: 1px 2px;
	text-decoration: none;
	font-size: 17px;
	margin: 0px;
	padding-left: 8px;
	padding-right: 8px; 
	padding-top: 5px;
	padding-bottom: 3px;  
	font-weight: bold; 
	float: left;
}

.topnav a:hover {
	background-color: #ffffe6; 
	color: black;
	font-weight: bold;
	border: 1px solid #0a255c;

}

.topnav a.active {
	/*
	background-color: #0a255c; 
	color: #ffff66;	
	font-weight: bold;
border: 2px solid #0a255c;
*/
	background-color: #ffffe6; 
	color: black; 
	font-weight: bold; 
	border: 1px solid #0a255c; 
	/* 
font-size: 1.8em;	 */
}	

.topnav ul{
	background-color: #eeeeee;			
	list-style-type: none;
	margin: 0;
	padding: 0;
	/*overflow: hidden;*/
}

.topnav li {
width: 100%;   /*<--smartphone first*/		
	background-color: #eeeeee; 
	float: left;
	padding-right: 0px;
	box-shadow: 0 3px 3px rgba(0,0,0,0.12), 0 3px 3px rgba(0,0,0,0.24);			
	margin-right: 6px;
}

		
.clearfix::after {
  content: "";
  clear: both;
  display: table;
}			

/************************************* sideleft */		

#id_sideleftOuter {
	/*width: 0; 100%*/

	display: block;
}

.sideleftOuter {
	/*height:633px;*/
	background: white; 
	max-width: 186px;
	border: 0px solid #0a255c ;  /*<--smartphone first*/		
	padding: 0px;
	margin-left: 5px;	
	margin-top: 0px;

height: 100%;	
	position: sticky;  /*sticky*/
	
	top: 0; /* <--smartphone first*/	
	left: 0;  /*<--smartphone first*/	
	width: 0;  /*<--smartphone first*/	
	float: left;
	z-index: 2;
	transition: 1.5s;	
}		

.sideleft {

	max-height: 390px; /*435px; 420px;*/
	/*min-height: 500px;*/
	background: white;   				/* #f2f2f2; leichtes Grau     transparent*/

	font-size: 14px;
	overflow-x: hidden;	
	/*overflow-y: scroll;  wird nun in _sideleft.php mittels style=... gesetzt und nur dann wenn es viele buttons gibt, damit ansonsten kein scroll-Balken bzw der Hintergrund davon angezeigt wird. */
	float: clear;	
	border: var(--sBorder) solid blue;
	border-top: 0px double #EEEEEE; /*#808080;*/
	border-bottom: 3px ridge #DDDDDD;
	border-left: 0px solid #d9d9d9;
}


.sideleft:hover{
    /* overflow-y: scroll;
	 margin-right: -130px;*/
}

.sideleft::-webkit-scrollbar { /*   https://css-tricks.com/almanac/properties/s/scrollbar/   */
	height: 11px;
	/*width: 4px;*/
	background-color: #eeeeee;	
	/*-webkit-appearance: none;*/
}

.sideleft::-webkit-scrollbar-thumb {
	heigth: 10px;
	background-color: #cccccc;	
	border-radius: 8px; /**/
	border: 1px solid grey ; /* #0a255c; Angleichen mit Hintergrundfarbe-nicht transparent! */
	scrollbar-width: 80px;
	scrollbar-height: 80px;
}

.sideleft::-webkit-scrollbar-thumb:vertical {
    height: 4px;
    /*background-color: black;*/
}

.sideleft a {
	text-decoration: none;	
	display: block; /*das komplette Feld erscheint als link*/
}			

.sideleft ul li.active {
	background-color: #ffffcc ;  /* #ffffb3 = schwaches gelb */
}

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

.sideleft ul ul.notVisible {			/* komplettes ul der 2.Ebene wird ausgeblendet */
	display: none;
}

.sideleft ul ul li {              		/* Sub-Rubrik-Punkte */
	background-color: #ffffff ;     	/* #e8effc sehr schwaches Blau , edf1f7 ist noch schwächer*/
	padding-left: 20px; 
	font-weight: normal;
	border: 0px solid #bbbbbb;            /* ;  #0a255c ein schönes dunkles blau       #8c8c8c ein grau */
	border-top: 1px solid #cccccc;
	border-radius: 0px; /**/  		
}

.sideleft li.active {        			/* Aktiver Main-Rubrik-Punkt */
	/* background-color: #5f91ec;  		 #5f91ec; dezentes blau */
	/* background-color: #0d2f73; 			#0a255c = sehr dunkler blau ; #0d2f73 = sehr dunkles blau aber einen Hauch heller    */	
	background-color: #ffffcc ;  /* #ffffb3 = schwaches gelb */
	color: white;	
}

.sideleft ul ul li.active {             /* Aktiver Sub-Rubrik-Punkt */
	/*background-color: #5f91ec;  		 #5f91ec; dezentes blau */
	/*background-color: #0d2f73; 			#0a255c = sehr dunkler blau ; #0d2f73 = sehr dunkles blau aber einen Hauch heller    */
	background-color: #ffffcc ;  /* #ffffb3 = schwaches gelb */			
	
}

.sideleft li {  /* Main- & Sub-Rubrik-Punkte (die Subs werden durch 'ul ul li' überschrieben) */
	padding: 4px;
	margin-top: 1px;
	margin-bottom: 0px;
	
	background-color: #eeeeee;  /* #d1dffa = leichtes Blau der Main-Rubrik-Punkte #bbd0f7 =etwas stärkeres aber noch schwaches Blau; */
	/*color: #ffffff;*/
	/*box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);*/
	font-weight: bold;
	border-top: 1px solid #cccccc;   /* ;  #0a255c ein schönes dunkles blau       #8c8c8c ein grau */
	border-bottom: 0px solid #cccccc;
	border-radius: 0px; /**/  	

}
			
.sideleft a:any-link { 
	color: black; /* #441708; */
} 			
.sideleft a {
	color: black;
}	

.sideleft li:hover {
	background-color: #ffffcc; /*#ffffe6 = sehr schwaches gelb       #ffffb3 = schwaches gelb*/
	color: black;}			

	
.sideleft ul.notActiv {
	display: none;
}

.separator {
		background-color: #edf1f7 ;     	/* #e8effc sehr schwaches Blau */
	background-color: #d1dffa;  /* #d1dffa = leichtes Blau der Main-Rubrik-Punkte #bbd0f7 =etwas stärkeres aber noch schwaches Blau; */
	background-color: white ;
	
	font-size: 0.7em;
	font-weight: bold;
text-align:center;	
color: #0a255c;

	border: 0px solid #bbbbbb;            /* ;  #0a255c ein schönes dunkles blau       #8c8c8c ein grau */
	border-radius: 8px; /**/  

	padding: 4px;
	padding-top: 1px;
	padding-bottom: 1px;
	margin-bottom: 4px;

	/*color: #ffffff;*/
	box-shadow: 0 5px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
	
	border: 1px solid #0a255c;   /*  #8c8c8c ein grau ;  #0a255c ein schönes dunkles blau       */
	border-radius: 8px; /**/ 	
	width: 100%;
}


/*ein workaround da die Sprungmarken etwas zu tief springen lassen, warum auch immer...*/
.sprung {
	visibility: hidden; 
	height: 100px !important; 
	position: absolute; 
	margin: -100px;
}

.sprungTabelle {
	visibility: hidden; 
	height: 150px !important; 
	position: absolute; 
	margin: -150px;
}

/************************************* content */						
.content {
	min-height: 500px;
	/*background: #ffffff;*/  /* #f7f7f7, leichtes grau, super, aber weiß ist bei Bildern besser   #ffffff */	
	border-left: 1px solid #eeeeee;
	border-right: 1px solid #d9d9d9;
	margin-top: 0px;
	float: left;
	padding: 2px; /* smartphone first */
}  


/************************************* sideright */			
.sideright {
	background: white; /*der Hintergrund muss weiss sein, da sideRight so breit ist wie notwendig*/
	float: left;/**/
	overflow-y: hidden;     /*scroll hidden ;*/
}
  
/************************************* footer */			 
.footer {
	height: 80px;
	border: var(--sBorder) solid blue;
	background: #f7f7f7;
	background-color: #eeeeee;
	color: #0a255c;
	padding: 15px;
	/*padding-left: 195px;*/
	margin-left: 5px;
	margin-right: 5px;
	margin-top: 5px;
	z-index: 2;
} 

/************************************* myDIV */						
#myDIV {
	font-size: 1.2em;
	max-width: 300px;
	height: auto;
	background-color: transparent;
	color: #D1DFFA;  /* #0a255c: dunkles blau      #ff8000: mein Orange    #999999: grau */
	margin-left: 0%;
	/*margin: 0;*/
	border: 0px solid red;
	-webkit-animation: mymove 5s infinite; /* Chrome, Safari, Opera */
	animation: mymove 5s infinite;
}


/************************************* keyframes */				
/* Chrome, Safari, Opera */
@-webkit-keyframes mymove {
  50% {-webkit-transform: rotate(10deg);}
}

/* Standard syntax */
@keyframes mymove {
  50% {transform: rotate(10deg);}
}		




/************************************* media screen */			
/************************************* media screen */			
/************************************* media screen */			

/********************************************* Smartphone *************************************************************************************/
/* --- Smartphone -------start 767 */
@media screen and (max-width: 767px) {  
/*	.sideleft {
		/* width: 180px; <<<----- Menu-Breite hier eingeben
		float: left;
		display: block;
	}
*/
.header {  /*nur Smartphone*/
	position: static;
	top: 0;	
}

.topnav {  /*nur Smartphone*/
	position: static; 
	padding-left: 0; 
}

.topnav a { /*nur Smartphone*/       
	width: 100%;
}	

.topnav li {  /*nur Smartphone*/
	width: 100%;
}


.sideleftOuter { /*nur Smartphone*/
	position: fixed;   
	top: 50px;
top: 0;
left: 0;
	width: 0;
	margin-left: 0px;
	transition: 1.5s;
	
	/*border: var(--sBorder) solid green; */
	
	/*display: none;*/
}

.sideleft { /*nur Smartphone*/
	/*width: 180px;  <<<----- Menu-Breite hier eingeben*/
	/*transition: 1.7s;*/
	border-bottom: 2px ridge #EEEEEE;
}

.content {  /*nur Smartphone*/
	width: 100%;
	margin-left: 0px;
	border: var(--sBorder) solid black;
	float: clear;
}

.sideright {  /*nur Smartphone*/
	display: none;
	/*width: 100%;*/
	/*width: calc(30% - 180px - 5px - 5px);*/   /* width: calc(30% - 180px - 5px - 5px); */
	/*min-height: 500px;*/
}

body {
	font-size: 0.8em;
}

h1 {	
	font-size: 1.8em;
}

h2 {	
	font-size: 1.6em;
}

h3 {	
	font-size: 1.2em;
}

h5 {	
	font-size: 1.0em;
}


}
/* Smartphone  ------end */
/*"background: #0a255c; color: #ffff00; font-size:30px; font-weight: bold; cursor:pointer; position:sticky; top:10px; left:10px; z-index:1;"*/




/*********************************************** PC ***********************************************************************************/
			
/* PC ------start    eigtl (min-width: 1024px) */
@media screen and (min-width: 768px)	{

.header {  /*nur PC*/
	position: sticky; 
	height: 100px;
	top: 0;
	padding-left: 180px;
	background-size: auto; /* damit wird das Hintergrundbild sichtbar */
}
	
.topnav {  /*nur PC*/
	position: sticky;
	top: 100px;
	padding-left: 186px; 
}

.topnav a {   /*nur PC*/      
	width: auto;
}	

.topnav li {  /*nur PC*/
	width: auto;
}

.sideleftOuter {  /*nur PC*/
	position: sticky;   
	top: 144px;
	float: left;
	border: var(--sBorder) solid green;
width: 100%;
display: block;
left: 0;	
}

.sideleft {  /*nur PC*/
	width: 180px; /* <<<----- Menu-Breite hier eingeben*/

	
	}

.content {  /*nur PC*/
	width: 69%;  /*1% Sicherheit...*/
	margin-left: 0px;
	background: white;  /* #f1f1f1; */
float: left;
/*border: var(--sBorder) solid black;*/
padding: 15px;
}

.sideright {   /*nur PC*/
	width: calc(30% - 180px - 5px - 5px);   /*      */
	min-height: 500px;
	border: var(--sBorder) solid orange;
}

.imgL {   /*nur PC*/
	margin-left: 50px;	
}	

.imgR {  /*nur PC*/
	margin-right: 100px;	
}

.imgL_besidesCode  { /*nur PC*/
	float: left;
	margin-left: 50px;  
	margin-right: 50px;  
}

.imgR_besidesCode  { /*nur PC*/
	 margin-left: 50px;  
	 margin-right: 100px; 
}
ffigure {  /*nur PC*/  
	 margin-left: 50px;  
	 margin-right: 100px;	
}	

body {  /*nur PC*/
	font-size: 1.0em;
}

h1 {	/*nur PC*/
	font-size: 2.0em;
}

h2 {	/*nur PC*/
	font-size: 1.8em;
}

h3 {	/*nur PC*/
	font-size: 1.4em;
}

h5 {	/*nur PC*/
	font-size: 1.2em;
}

#id_openSign {    /*nur PC*/
	display: none; 
}

#id_closeSign {   /*nur PC*/
	display: none; 
}

#id_MaennchenAmSchreibtisch {
		display: Block;
}




}
/* PC ------end */

			
/**********************************************************************************************************************************/			



* {
	/* font-size: 1.0em; */
}
			
.centerPic { 
    display: flex; 
    justify-content: center; 
    align-items: center;
}

.centerImg 
{display: block; 
width:60%; 
text-align:center;
object-fit: cover;
vertical-align: middle;

}

.centerImg2
{ 
     /* top: 50%; 
     width: 100px; 
     height: 100px; 
     background-color: #000; 
     transform: translate(-50%,-50%);*/ 
	 
     position: absolute; 
     left: 50%; 
}		
		

		
		
	
		
		
		
/*  Typical media queries values   		
	https://www.w3schools.com/css/css_rwd_mediaqueries.asp	
		
		
/* Extra small devices (phones, 600px and down) 
@media only screen and (max-width: 600px) {...}

/* Small devices (portrait tablets and large phones, 600px and up) 
@media only screen and (min-width: 600px) {...}

/* Medium devices (landscape tablets, 768px and up) 
@media only screen and (min-width: 768px) {...}

/* Large devices (laptops/desktops, 992px and up) 
@media only screen and (min-width: 992px) {...}

/* Extra large devices (large laptops and desktops, 1200px and up) 
@media only screen and (min-width: 1200px) {...}
			
*/