@charset "UTF-8";

/* menu_6_1_1_media.css   */

:root {
   	--def-mnu-line-height: 1.5rem;
  	--def-mnu-item-width: 230px;   
   	--def-mnu-size: 0.9em;
   	--def-size: 1.0em;
   	--radius-size: 10px;
   	--def-mnu-offset: 231px;
   	--font-size: 1.0em;  /* clamp(0.9em, calc(0.8em + 1vw), 1.3em);      1.0em;  */
    --line-height:  1.3rem;
}

 

:root div#kopf {
    --def-mnu-line-height: 30px;
    --def-mnu-item-width: 230px;
    --def-mnu-size: 0.9em;
    --def-size: 1.0em;
    --radius-size: 10px;
    --def-mnu-offset: 231px;
    --font-size:0.9rem;
  /* clamp(1.0em, calc(1.0em + 1vw), 1.3em);      1.0em;  */
    --line-height: 1.5rem;
}
/* root/default variables   --bg-color: rgb(243,243,243);  #343434; */
:root body.dark {
    --app-bg-dark: #4a525a;
    --app-tx-dark: #f8f9fa;
    --app-btn-dark: #FFFFEC;
    --font-color: rgb(255, 255, 255);
    --link-color: #1C75B9;
    --link-white-color: #fff;
    --hx-color: rgb(255,  55, 0);
 /*   --font-size: clamp(1.0em, calc(1.0em + 1vw), 1.3em); */
   /*  1.0em;  */
    --font-size:  1.0rem;
    --line-height: 1.2rem;
    --nav-size: 0.9rem;
}

:root body.nodark {
    --app-bg-dark: #FFFFFF;
    --app-tx-dark: #010101;
    --app-btn-dark: #4a525a;
    --font-color: #000;
    --link-color: #1C75B9;
    --link-white-color: #fff;
    --hx-color: rgb(255,  155, 100);
 /*   --font-size: clamp(1.0em, calc(1.0em + 1vw), 1.3em); */
   /*  1.0em;  */
    --font-size:  1.0rem;
    --line-height: 1.2rem;
    --nav-size: 0.9rem;
}





@media only screen and (max-width: 450px)  {
	
	 
	div[class*="grid_"]  {
	     width: 99%  !important;   
		float: left;
		display: block;
		padding-left:2px;
	}
	table#checkl_tab, table.checkl_tab_bog  {font-size: 0.75rem; } 
 
}



@media only screen and (max-width: 900px)  {
	 
	.grid_1 { width: 8.33333333%; }
	.grid_2 { width: 16.66666667%; }
	.grid_3 { width: 49%  !important; }
	.grid_4 { width: 49% !important; }
	.grid_5 { width: 99%; }
	.grid_6 { width: 49%; }
	.grid_7 { width: 99%;}
	.grid_8 { width: 66.66666667%; }
	.grid_9 { width: 99%; }
	.grid_10 { width:99%; }
	.grid_11 { width: 99%; }
	.grid_12 { width: 99%; }
	table#checkl_tab, table.checkl_tab_bog {font-size: 0.8rem; } 
}



/* root/default variables   --bg-color: rgb(243,243,243);   
:root body.dark {
    --app-bg-dark: #343434;
    --app-tx-dark: #f8f9fa;
    --font-color: #000;
    --link-color: #1C75B9;
    --link-white-color: #fff;
}
*/
/*

rem 	Font size of the root element.
lh 	Line height of the element.
rlh 	Line height of the root element. When used on the font-size or line-height 
        properties of the root element, it refers to the properties' initial value.

vw 	1% of the viewport's width.
vh 	1% of the viewport's height.
vmin 	1% of the viewport's smaller dimension.
vmax 	1% of the viewport's larger dimension.

*/
/*  verwendet Custum Propertie Fallback
 https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties#custom_property_fallback_values
 */

/* if dark mode isn't set, fallback to light. */


div.grid_12 {
	width: 99.7%;
    background-color: var( --app-bg-dark, white ) !important;
    color: var( --app-tx-dark, black ) !important;
}

/*
div#sw_dark {
    float: left;
    position: relative;
    margin-left: 10px;
    width: 90px;
    height: 40px;
    margin-top: -2px;
    padding-left: 5px;
    background-color: #3B5998;
    z-index: 1100;
}
*/
/*
div#sw_dark label {
    margin-right: 1em;
}
 */
 
 /*
div#sw_dark {
    margin-right: 1em;
}
*/ 

 
 /** ================================================
          definitionen für Anhang_kopf  
 */
 div#sw_dark_div {
  float: right;
  position: relative;
 vertical-align:bottom;
  margin-right: 1px;
  width: 85px;
  top: 1px;
  height: 48px;
}

sw_dark_div tgl_scheme {width: 83px; }
div#sw_dark {
  float: right;
  position: relative;
  top: 4px;
  margin-left: 4px;
  padding-left:  2px;
  width: 80px;
  line-height: 45px;
  height: 45px;
  border-top-left-radius: var(--radius-size);
  border-top-right-radius: var(--radius-size);
  background-color: #3B5998;
  z-index: 1100;
}
 
div#show_prg_ctrl_div {
  float: left;
  position: relative;
 
  margin-right: 5px;
  width: 85px;
  top: 1px;
  height: 48px;
  font-size:1.2rem;
} 
 
div#show_hide_ul .mnu_anh{ width: 85px ! important; vertical-align: top;}
ul#show_hide_li{  width: 70px ! important; }
 
span.anh_dreieck {font-size:1.10rem; color: white; vertical-align: top; }
span.anh_ico {font-size:1.5rem; color: white;	 vertical-align:bottom; }

table.xdebug-error  {width:  90%;margin-left: 30px; }
table.xdebug-error th  {font-size: 1.0rem; }
table.xdebug-error td  {font-size: 1.0rem; }

/*   switch_scheme  für Darkmode
   verwendet Custum Propertie Fallback
  if dark mode isn't set, fallback to light. 
 https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties#custom_property_fallback_values
 */
body{
    background-color: var( --app-bg-dark, white ) !important;
    color: var( --app-tx-dark, black ) !important;
    font-size: 1.0rem;
}
 
/*   > only direct childs     
     + is the immediate next p element and 
     ~ is all of the next p elements (after each div element) 
*/

body.nodark  h2.nodark, body.dark  h3.nodark  , h2.nodark ~ p , 
 h3.nodark ~ p    {color: #010101 !important; }
 
body.dark h1,body.dark h2,body.dark h3 ,body.dark h4{
	  color: var(--hx-color, --font-color) ! important; 
}
body.dark  h3.h3_sw  {background-color: #CFCFCF; display:block; padding-left:10px;}
body.dark  h3.flx {
color: #000000 !important;
background-color: #CFCFCF;
width:99%;
}
body.dark  h3 {
color: var( --app-tx-dark, --font-color ); 
body.dark h4.frage_kopf {color: #010101 !important; font-size: 1.2rem; line-height: 1.3rem;}
body.dark h4 {color: rgb(240, 235, 49);}

body.dark   div#dsc_checkl_div  {color: #010101; } 
body.dark   div#conf_stat  {color: #010101; } 
body.dark   p.msg_data  {color: #010101; } 
body.dark  span.msg_data ,body.dark  span.call  {color: #010101; } 
body.dark   p ,  fieldset{
  color: var( --app-tx-dark, --font-color ) ; 
  font-size: 1.1rem;
  line-height: 1.2rem;;
}


body.dark  p.nodark  {color: #010101 !important; }
body.dark  nav li{
  color: var( --app-tx-dark, --font-color ) !important; 
  font-size: var( --nav-size);
}

body.dark  {color: #FFFFFE; }
body.dark  p,  body.dark  p.pad_10,  body.dark  p.pad10{ color: #FFFFFE; }


}

body.dark input  {background-color: #FFFFFE; color: #010101; }

body.dark span.w150  { color: #010101;  }










/*  body.dark div[class*="grid_"] { border-right: solid 2px white; }  */
div.wrapper
 {
    background-color: var( --app-bg-dark, white ) !important;
    color: var( --app-tx-dark, --font-color ) !important;
}

div.grid_12 , div#infodiv  {
    background-color: var( --app-bg-dark, white ) !important;
    color: var( --app-tx-dark, black ) !important;
}

div.dragline { 
	float: left;
	width:100%;
    background-color: rgb(255, 255, 0) !important;
    color:black !important;
    font-weight: bold;
    }
    
div.draggable span.headtxt{
   color: #010101;
   vertical-align: top; 
   font-size: 1.2rem;
   margin-bottom:4px;
}

div#info_div { 
    background-color: var( --app-bg-dark, white ) !important;
    color: var( --app-tx-dark, --font-color ) !important;
/*    border: solid 2px blue;  20.02.23 */
 }

div#kopf {background-color:grey; }

div.kopf_anhang ,div#kopf_anhang{float:left; 
    background-color:   lightblue;  /*var( --app-bg-dark, white ) !important;  */
    color: var( --app-tx-dark, --font-color ) !important;
    }
input.btnInpLogin  {background-color: #CFCFCF !important;} 
input.btnInpLogin:focus {background-color: lightgreen !important;} 
 
input[type="reset"],input[type="submit"] {    
     background-color: var( --app-btn-dark, white ) !important;
     color: black   !important;
     border: outset red 5px; 
     border-radius: var(--radius-size); 
     font-size:  1.0rem;
     font-weight: bold;
     padding: 2px 5px 2px;  /* top 2, left riht 10 botton 2 */
   
}

div#mnu_icons  {position: relative; float:left; }
div.mnu_ico {float: left; width:2.5rem;  margin-left: 5px;
    background-color:  var( --app-bg-dark, white ) !important;  
    color: var( --app-tx-dark, black ) !important;
    font-size: 2.0rem;
    }
div.mnu_ico size {height:3.4rem;   display: flex; justify-content: center; align-items: center; }
input[type="text"] { color:   black   !important; } 


/*  Checkbox und Icon für  hell/dunkel   */
div#sw_dark  {float:left; position: relative; top:1px;
	margin: 4px 15px; padding-left: 15px;
	width: 80px;  
	line-height:  45px;
	height: 50px;
 	border-top-left-radius: var(--radius-size); 
	border-top-right-radius: var(--radius-size); 
	background-color:  #3B5998; z-index: 1100; 
	}
div#sw_dark:hover { background-color: #0099ff; }

body.dark  select , body.dark  span.w150 {color: #010101 !important;  }
/*
body.dark  select  {color: #010101; }
body.dark  span.w150  { color: #010101;  }
body.dark  span.w160  { color: #010101; display:inline; } 
*/
/*  switch  dark Hell */
span.sw_scheme { top: 1px;font-size:   1.2rem !important; }
input[type="checkbox"] {transform: scale(1.1);   }
input[type="checkbox"] #tglScheme {top:5px; width:20px;  height: 20px;padding-bottom: 4px;}
 
/*   ======  ende switch_scheme  ========== */

div#online  {color: #010101; }
div#aufg_txt p, div#aufg_txt ul li {color: #010101  !important; }
span.fix_size {color: black; font-size: 1.1em;}
span.red {color: red; font-weight: bold; }
span.green {color: green; font-weight: bold; }
span.big {  font-size: 2.0rem; font-weight: bold;margin-bottom: 15px; }

.m_left  {margin-left:10px; padding-left: 5px; }

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

a.up      { font-size: 1.4rem; line-height:  1.5rem; 
           background-color: red; color: #FFFFFE; padding:2px; 
           border:  solid 1px  black; text-decoration: none;}


/*   Kopf Anhang   */

span.big_icon { font-size: 2.0rem; font-weight: bold;margin-bottom: 15px;vertical-align: middle;}

div#kopf {background-color: lightblue;  position: fixed;
   top: 0; width: 100%;}

div.anhang { float:left;  height: 48px;  top: 7px; padding-left:2px; margin-left: 3px;
background-color: #3B5998; border-top-left-radius: 8px; border-top-right-radius: 8px; } 


p.myp {font-size: 1.1rem; }
li.show_hide_prg_ctrl { display:inline; width:4.0rem;  height:48px; top:1px; background-color: #3B5998; }
li.show_hide_prg_ctrl a { width:3.5rem;}
 li.show_hide_li { display:inline; font-size: 1.1rem; margin-left:2px; height: 48px; top: 0px; }
li.w_show_hide  { width: 9.0rem; }


li.show_hide_li a {color: white;   width:4.5rem; vertical-align: middle; z-index:1000;}
 
div.modTxtSize{
	float:left; padding-left:5px;margin-left: 5px; 
    margin-right:5px; top:  5px; background-color: #3B5998;
    top: 1px;
    width:130px;
  	color: white;
	margin: 2px;
	padding: 5px 5px;
	height: 48px;
	border-top-left-radius: 8px;
	border-top-right-radius: 8px;
 }
a#txtSizePos , a#rel_page { width: 10.0rem; }
 li.modTxtSize	{ width:12em; font-size: 1.0em; background:#cfcfcf;padding-left: 3px;  color: black;}

a.lg_button img { width:45px;}
div.lginLgout{
	float:left; padding-left:5px;margin-left:5px; width:3.5rem; 
    margin-right:5px; top: 16px; background-color: #3B5998;
  	color: white;
	margin: 2px;
	padding: 5px 5px;
	height: 48px;
	border-top-left-radius: 8px;
	border-top-right-radius: 8px;
 } 
 
input[type="button"].button , input[type="button"].btn {border-radius: 8px; height:1.5rem;padding:5px; font-size:1.0rem;}
 
p.col_black {color: black; }
span.incr {  font-size: 2.0rem; font-weight: bold;margin-bottom: 10px; background-color: #3B5998; }

span.decr {  font-size: 1.1rem; font-weight: bold;margin-bottom: 10px; background-color: #3B5998; }
* {
	box-sizing: border-box;
/*	 -moz-box-sizing: border-box; */
}


table.bordered,  td , th {   margin: 1px; border: 1px solid black; border-collapse: separate; border-spacing: 3px;}
table.bordered tbody tr:nth-child(2n), tr:nth-child(2n) {background-color: #FFFFCF; color:black; font-weight: bold;}
table.bordered tbody tr:nth-child(2n-1), tr:nth-child(2n-1)  {background-color: #CFCFCF; color:black; font-weight: bold;}
table.bordered tbody tr:hover  {background-color: yellow; }


.navdrop {width:130px; }

.float-left, .float_left { float: left;}

.float_anh {float:left; margin-left:10px;width:5.0rem;height:50px; 
  padding-left: 5px;
  margin-left: 15px;
  margin-right: 5px;
  top: 1px;
  background-color: #3B5998;
  color: white;
  margin: 2px;
  padding: 5px 5px;
  height: 48px;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px
}

div.mittig {width: 90%;
     margin-left: auto;
	margin-right: auto; 
/*	color:black;  */
}



body{
   scrollbar-width: auto;          /*  nur  "auto" or "thin"   or "none"*/
        scrollbar-color: blue orange;   /* scroll thumb & track */
} 


body {cursor:default; font-size: 1.1rem; background-color: #d9d9d9;}
 /* width */
::-webkit-scrollbar {
  width: 20px;
}

/* Track */
::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px grey;
  border-radius: 10px;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: red;
  border-radius: 10px;
} 


h1.nodark, h2.nodark, h3.nodark {color: black;} 

div#cook-menu_div  {float:left;   background-color: #3B5998; color:white; font-size: 1.2rem;}
li#show_cookieInfo_li{width:220px; background-color: #3B5998; color:white; font-size: 1.2rem;}
span.cookTxt { background-color: #3B5998; color:white;font-size: 1.2rem;}
ul.cooknodrop { display: none;  color:white; }
ul.cooknodrop li a , ul.cookdrop li a {  text-decoration:none; color:white; }
ul.cooknodrop:hover {display:block;  color:white; font-size: 1.2rem;}

ul.cookdrop:hover {display:inline-block;   width: var(--def-mnu-item-width); z-index: 1100; color:white; }     /* wird per js gesetzt  (toogle)  */


ul.cook-menu {

	margin-bottom: 60px;
	height: 40px;
	width:170px;
	list-style: none;
	list-style-image: none;
	color:white;
}

 li.cookdrop {
	font-size: 1.2rem; 
	border-radius: var(--radius-size);
	width:120px;
	height: 40px;
	text-align: center; 
	z-index:1000;
}

li.cookdrop:hover{
	width:120px;
    height: 40px;
	background: #006464;  
	color:#fff;
	text-align: center; 
	z-index:1000;
}

/*div#kopf {background-color: white; } */
span.neu {background-color:yellow; color:red;}


li#show_hide_li { background-color: #3B5998; }

.menu-toggle{
	display:block;
	float:right;
	width: 45px;
	height: 40px;
	padding:5px;
	margin:5px 0 0;
	background:  #0064b4; 
	color:#fff;
	cursor:default;
	text-transform:uppercase;
	font-size:1.2rem;
}
.menu-toggle.toggled-on{
	background:#0099ff;
	display:block;
	position:relative;
	float:left;
	z-index:10;
}

menu-toogle_on > li {
	margin-bottom: 10px; 
}
nav-menu {
	clear: both;
	margin-bottom: 60px;
	list-style-type:none;
}

.nav-menu.toggled-on {
	display: block;
	position: relative;
	max-width:60px;  /*var(--def-mnu-item-width); */
	z-index: 10;
	
	background: #006464;  
}
.nav ul, nav ol {
	list-style: none;
	list-style-image: none;
	max-width:var(--def-mnu-item-width);
	padding: 0;
	margin: 0;
}

.nav-menu li {
	float: left;
	position: relative;
	margin-left: 1px;
	border-radius: var(--radius-size);
	font-size:calc( var(--font-size) - 0.2em);
}

.nav-menu li a:hover{
	background: #006464;  
	color:#fff;
	display:blocK;
	z-index:1200;
}
.nav-menu li li a {
	background:#e8e8e8;
	padding-left:10px;
}
.nav-menu li li li a {
	background:#efefef;
	padding-left:50px;
}         
/*    SECONDARY MENU  */
#secondary-navigation{
	margin-bottom:20px;  /* 60 */
}
#secondary-navigation ul{
	margin:0;
	padding:0;
}
#secondary-navigation ul li a{ 
	background:#E6E6E6;
	display:block;
	margin:5px 0; 
	padding:5px 10px 5px;
	text-decoration:none;
}
#secondary-navigation ul li a:hover,
#secondary-navigation ul li.current a{
	background:#0099ff;
	color:#fff;
}


.nav_right {float:right;  margin-right: 10px; padding-left: 10px;}
#sub_nav {padding-left: 20px;  }
#menu-sub-navigation {
	display: block;
}
#menu-sub-navigation .toggled-on{
	display: block;

} 	
#sub_nav, .nav-tail-menu {
	float:left;
	margin: .05em 0 0 0;
 
}
#sub_nav {display: block; width:400px;}
nav-tail-menu {
	clear: both;
	margin-bottom: 60px;
}
.nav-tail-menu ul, nav ol {
	list-style: none;
	list-style-image: none;
	padding: 0;
	margin: 0;
}
nav-tail-menu ul, nav ol {
	list-style: none;
	list-style-image: none;
	display: block;
}

.nav-tail-menu li {
	float: left;
	position: relative;
	width:130px;
	margin-left: 1px;
	border-radius: var(--radius-size);
}

.nav-tail-menu  ul li ul { display:none; }
.nav-tail-menu li:hover > a, .nav-tail-menu li.current a {
    color: #fff;
    background: #0099ff;
    display:block;
}
.nav-tail-menu li a:hover {
    background: #006464;
    color: #fff;
    z-index: 10;
}
.nav-tail-menu li a {
    background: #3B5998;
    color: black;
    margin: 2px;
    padding: 10px 10px;
    height: 48px;
    width:130px;
    border-top-left-radius: var(--radius-size);
    border-top-right-radius: var(--radius-size);
    font-size:1.1rem;
}
.nav-tail-menu li a {
    background: #dadada;
    display: block;
    margin: 1px 0;
    padding: 5px 10px 5px;
    text-decoration: none;
    width:130px;
}


/*  css fü nav.left-menu   
*/
div#l_nav_id  {background-color: #FFCFCF; border: solid 2px black; }
 
ul#l-nav li  {list-style: none; margin: 0 0 0 5px; line-height: 1.5rem; }

ul#l-nav li:hover  { background-color:yellow; color: #010101; line-height: 1.5rem; z-index: 1000;}
ul#l-nav li a { text-decoration:none;}



article h5 { background-color:yellow;  color: #010101;line-height: 1.2rem;  font-size: 1.1rem;display: block; border-bottom: solid black 3px; }
article h4 { background-color:yellow;  color: #010101;line-height: 1.4rem;  font-size: 1.25rem;display: block; border-bottom: solid black 3px; 
            border-bottom: solid black 3px;}
.head_bg {
	background:#3B5998;
	border-top:1px solid #e2e2e2;
	border-bottom:1px solid #e2e2e2;
	color: white;
	height: 58px;
	padding:5px;
    width:98.5%;
	margin: auto;
	border-radius: var(--radius-size); 
}


input[type="checkbox"] {
	outline: solid 1px black !important;
}

div#cbk {
       display:block;font-size:0.8em;text-decoration:none;background-color: #5b78a4;
       color:#f00; width:170px;font-weight: bold; line-height: var(--def-mnu-line-height); z-index:250;
       }
div#cbk   .menu ul:hover, .menu ul ul li:hover
 	{   color: black;   background-color: #fefdd0;}
ul#cbkshow_ul {width: 210px;  background-color: #5b78a4;}
/* line-height: auto;   auto geht nicht */
ul#cbkshow_ul li.cbkdrop {  background-color: #5b78a4; width: 11em;  color: #ffffff; 
                    font-size:1.0em;  padding-top:4px; font-weight: bold;
                    border: solid 1px black;}
ul#cbkshow_ul li.cbkdrop:hover {  background-color: #FFFECF; color:#010101; font-weight: bold;}

/*
ul#cbkshow_ul {width: 220px;  background-color: #5b78a4;} */
/*  line-height: auto; var(--def-mnu-line-height);  */
ul#cbkshow_ul  li {
	   line-height: var(--def-mnu-line-height); 
}
ul#cbkshow_ul li.cbkdropblue {  background-color: yellow; color: #010101 !important; 
    width: var(--def-mnu-item-width);
    line-height: 50px; 
	border-top-left-radius: var(--radius-size);
    font-size:1.1em;  
	font-weight: bold;
	padding-top:4px; 
	border: solid 1px black;}
                                             	/*   #3B5998 */
ul#cbkshow_ul li.cbkdropblue:hover {  	 background: yellow; color: #010101 !important; line-height: 50px; }

/*  background-color: #5b78a4;  */
ul#cookshow_ul {width: 210px;  background: yellow;font-size:1.2rem;}
/* line-height: auto;   auto geht nicht */
ul  li.cookdrop  {  background: yellow;  color: #010101; 
                    font-size:1.2rem;  padding-top:4px; font-weight: bold;
                    border: solid 1px black; width:210px;}
ul  li.cookdrop a  {  color: rgb(0, 0, 0); text-decoration: none; width: 210px;}                    
ul  li.cookdrop :hover {  background-color: #FFFECF; color: blue; font-weight: bold;}



/* li.cbkdrop  input.checkb {width:30px; padding-bottom: 8px; height:40px;} */
span.checkboxtext { width: 160px;  color: #010101 !important;  line-height:1.8rem; display:  inline-block;}
span.checkboxtext:hover {width: 160px;  color: #010101 !important; line-height:1.8rem;  display:  inline-block;}

li.cbkdropblue {   line-height:1.8rem; color: #010101;}
input.checkb { width:20px; height: 20px; padding-bottom: 8px;}
 

ul#cbk_ul li {
  list-style-type:none;
  z-index: 1000;
  background-color: #FFFFCF;
  min-width: 220px;
  height:1.8rem !important;
  color: #010101;
  font-size:1.0rem;
  padding-left: 10px;
  border-top: 1px solid rgba(255,255,255,.2);
  border-bottom: #010101;
}

span.incr {  font-size: 2.0rem; font-weight: bold;margin-bottom: 10px; background-color: #3B5998; }

span.decr {  font-size: 1.1rem; font-weight: bold;margin-bottom: 10px; background-color: #3B5998; }

span.reset  { font-size: 2.0rem; font-weight: bold;margin-bottom: 10px;vertical-align: middle; color:#111111; }



span.mod_red  {background-color: #CFCFCF; color:red; display: block; }
input#btnInpLogin:focus {background-color: yellow; }


/*    ***************** Ende  allgemeingültiges css  **************  */






/* ============================================================================ 
             and (pointer: fine)   (max-width: 900px) 
  ============================================================================= */

@media only screen and (max-width: 900px)  {
    div#prog_ende::after { content: ' 900    (max-width: 900px)  and (pointer: fine) ';  color: red;  }


.grid_1, grid_2, grid_4, grid_5, grid_6,grid_7, grid_8, grid_9, grid_10, grid_11, grid_12 { width: 100%; }
[class*="grid_"] { width: 100%;}
.grid_3 {width: 49%; }
body {background-color:#cccccc; }

div.mittig {width: 98%; }	
.wrapper{
	max-width: 99.8%; 
	margin: .05em auto;
}

span.sw_scheme { top:-5px;font-size: 1.5rem; }  /* Moon hell/dark  */
input[type="checkbox"] #tglScheme {top:-5px; width:30px;  height: 30px;}
div#sw_dark_div:hover { background-color: #0099ff; }
 
h1, h2, h3, h4, h5, h6 {
    font-weight: normal;
    font-family: 'Droid Serif', Arial, Helvetica, sans-serif;
    line-height: 1.2rem;
     font-size: 1.1rem;
    margin: .45em 0 0;
    padding: 0;
}

 
p.myp {font-size: 1.1rem; }
/*
li.show_hide_prg_ctrl { display:inline; width:4.0rem;   height:48px; background-color: #3B5998; }
li.show_hide_prg_ctrl  a{   width:3.5rem;    }
*/
/*
li.show_hide_li { display:inline; font-size: 1.1rem; margin-left:2px; height: 48px; 
       top: 0; }
li.w_show_hide  { width: 9.0rem; border: solid 1px black;}
*/
article h5 { background-color:yellow; display: block; border-bottom: solid black 3px; }

div#donate {width: 400px;}

table.bordered,  td , th {   margin: 1px; border: 1px solid black; border-collapse: separate; border-spacing: 3px;}
table.bordered tbody tr:nth-child(2n), tr:nth-child(2n-1) {background-color: #FFFFCF; color:black; font-weight: normal;}
table.bordered tbody tr:nth-child(2n-1), tr:nth-child(2n-1)  {background-color: #CFCFCF; color:black; font-weight: normal;}
table.bordered tbody tr:hover  {background-color: yellow; }
div#HelpText {font-size:1.1rem; }
div#HelpText li.box {margin-left:1rem; }

/*
div[class*="grid_"] {
    width: 99.0%  !important;
	float: left;
	padding-left:5px;
	margin-left:5px;
}
*/		
	
#main_nav{
	float:left;
	text-align:left;
	margin-bottom:-10px;/*this depends on the height of the logo*/
}
.menu-toggle{/*make menu float right, instead of sitting under the logo*/
/*	margin-top:10px;          / *this depends on the height of the logo*/
	float:right;
	padding-right:10px;
	z-index:10;
	display: block;
	padding: 2px;
	margin: 2px 0 0;      
	background: #666;
	color: #fff;
	cursor:default;
	text-transform: uppercase;
	font-size: 1.2rem;
	float: right;
	width: 45px;
    height: 40px;
}

nav-menu.toggled-on{
	display:block;
	position:relative;
	z-index:10;
	max-width: var(--def-mnu-item-width);
}

.nav-menu li {
	float: left;
	z-index:1200;
	list-style-type: none;
	position: relative;
	margin-left: 1px;
	border-top-left-radius: var(--radius-size);
	border-top-right-radius: var(--radius-size);
/* 	width:var(--def-mnu-item-width);  */
	line-height: var(--def-mnu-line-height);
}



/** =================================================================
*   Hamburger
*  ================================================================== */


	input#hamburg { display: none; }
	label.hamburg {
    display: block;
    background: #555;
    width: 40px;
    height: 35px;
    position: relative;
    margin-top: -1em;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 0.3em;
    border-radius: 4px;
    transition: border-radius .5s;
	}
	
	
	label.hamburg .line { 
		position: absolute; 
		height: 3px; 
		background: #fff;
		border-radius: 2px;
		width: 20px; 
		display: block; 
		left:5px;
		transition: 0.5s; 
		transform-origin: center; 
	}



	label.hamburg .line:nth-child(1) { top: 8px;  left:4px;}
	label.hamburg .line:nth-child(2) { top: 18px;  left:4px }
	label.hamburg .line:nth-child(3) { top: 28px;  left:4px}
	
    #hamburg:checked	{	background:#0099ff; }
	#hamburg:checked + .hamburg .line:nth-child(1) {
		transform: translateY(5px) rotate(-45deg);
	}

	#hamburg:checked + .hamburg .line:nth-child(2) {
		opacity:0;
	}

	#hamburg:checked + .hamburg .line:nth-child(3) {
		transform: translateY(-15px) rotate(45deg);
	}
	
	#hamburg:checked + .hamburg { background:#0099ff;} /* background: #333;   */

	#hamburg:checked + .hamburg + .menu-toggle.toggled-on  { height: auto; max-height: 100px; background: crimson; }




input[type="checkbox"] #hamburg {
    outline: solid 1px black !important;
}
#menu-sub-navigation  {
	display: none;
	float:left;
	text-align:left;
	margin-bottom:-10px;/*this depends on the height of the logo*/
	width: 250px;
 
} 	
#menu-sub-navigation  .toggled-on{
	display: block;
 } 	
	
/* Ein Element mit float wird nur so breit wie sein Inhalt, auch wenn es ein Block-Element ist.
  Elemente mit CSS float brauchen darum immer die Angabe der Breite durch width.	*/
#main_nav{
	float:left;
	text-align:left;
	margin-bottom:-10px;/*this depends on the height of the logo*/
	width: 250px;
}
 
/*  ===========================================================  */


nav-menu ul{
	position:		absolute;
	margin-top:1px;
	display:none;
	width:			var(--nav-item-size); /* 12em; left offset of submenus need to match (see below) */
    background: #CFCFCF;
}

nav-menu ul.drop{
	position:		relative;
	margin-top:1px;
	display:block;
	z-index:		1000;
	margin-left: 	var(--def-mnu-offset);
 	width:			var(--nav-item-size); /* 12em; left offset of submenus need to match (see below) */
    background: #CFCFCF;
}
nav-menu ul.drop:hover {z-index:2000; }

.nav-menu ul li {
	width:			100%;
	border-top-left-radius: var(--radius-size); 
	border-top-right-radius: var(--radius-size); 
	line-height: var(--def-mnu-line-height);
}
.nav-menu li:hover {
	visibility:		inherit; /* fixes IE7 'sticky bug' */
	z-index:2000;
}
.nav-menu li {
	float:			left;
	position:		relative;
	margin-left:1px;
    border-top-left-radius: var(--radius-size); 
	border-top-right-radius: var(--radius-size); 
	line-height: var(--def-mnu-line-height);
	font-size:0.9em;
}
.nav-menu li li {
	margin-left:0px;
	
}
.nav-menu a {
	display:		block;
	position:		relative;
}



nav-menu li li a {
		border-top:		1px solid rgba(255,255,255,.2);
		background:		#333; /*fallback for old IE*/
		background:rgba(50,0,51,.6);   /* rgba(0,0,0,.6);  fast schwarz , rgba(0,198,201,.6); türkis*/
		color:	#fff;
		padding-left:10px;
		height:auto;
}
/*  .nav-menu li li a:visited{color:#fff;}  
.nav-menu li li li a,
.nav-menu li.current * li a{
/ *	float:			left;
	position:		relative; * /
	top:0;
	z-index:		1000;
	margin-left: 	100px; 
	padding-left:10px;
	background:   rgba(250,0,0,.6);
}
*/
li ul.drop  { 

	left: 20px; /* 10em; var (--nav-item-size); funktioniert nicht   match ul width */
	top:0;
	z-index:		1000;
	background:   rgba(250,0,0,.6);
	-webkit-box-shadow:  2px 3px 2px 0px rgba(00, 00, 00, .3);
    box-shadow:  2px 3px 2px 0px rgba(00, 00, 00, .3);
	}
li ul.drop:hover   { z-index:2000; }

ul ul.drop  { 
	position:		relative;
	display:block;
	/*left: var(--nav-item-size);   10em; var (--nav-item-size); funktioniert nicht   match ul width */
	top:0;
	z-index:		1000;
	-webkit-box-shadow:  2px 3px 2px 0px rgba(00, 00, 00, .3);
    box-shadow:  2px 3px 2px 0px rgba(00, 00, 00, .3);
	}
ul ul.drop:hover   { 	 z-index:2000; }
	
ul#modTxt.drop{  /* prog_ctrl darf nicht  eingerückt werden */
	left: 10px; /* 10em; var (--nav-item-size); funktioniert nicht   match ul width */
	top:-10px;
	width:13em;
	z-index:	1000;
/*	background: rgb(255, 255, 0);  */
	-webkit-box-shadow:  2px 3px 2px 0px rgba(00, 00, 00, .3);
    box-shadow:  2px 3px 2px 0px rgba(00, 00, 00, .3);
	}
	
 li.liModTxtSize	{ width:13em; font-size: 1.0em; background: rgb(255, 255, 0);padding-left: 3px;  color: black;}
 li.modTxtSize	{ width:13em; font-size: 1.0em; background: rgb(255, 255, 0);padding-left: 3px;  color: black;}
	
}	   /* ende scren only maxwidth 900  */

.nav-menu  ul.nodrop{ 	display: none;  }
.nav-menu ul.nodrop:hover {display:block; }

 
 
 /*  ===========================================================  
     */
 
 
 div#show_hide_div  {
	position:relative; top: 1px; 
	border-top-left-radius: var(--radius-size);
	border-top-right-radius: var(--radius-size);
	margin-left:5px; margin-right:5px;
	padding-left:2px;
 	 width: 70px !important;  
	 line-height: 48px;
	 display: inline-block;
	 background: #3B5998;
}

 
 div#show_hide_div ul.drop  a{
	 width: 75px !important;  
     line-height: 45px;padding-bottom: 5px;
	 display: inline-block;
	 background: #3B5998;
}

 /*
 	border-top-left-radius: var(--radius-size);
	border-top-right-radius: var(--radius-size);
	margin-bottom: 2px;
	padding-left:5px;
	*/
ul#show_ctrl_ul ul.drop  a,  ul#show_hide_ul.drop  li a{
	 line-height: 44px;
	 display: inline-block;
	 background: #3B5998;
	 color: #010101;
}

ul.drop  a{
 
	border-top-left-radius: var(--radius-size);
	border-top-right-radius: var(--radius-size);
	margin-bottom: 2px;
   
	padding-left:5px;
   	 width: 150px;         /* var(--def-mnu-item-width); */
	 line-height: var(--def-mnu-line-height);
	 display: inline-block;
	 background: #3B5998;
}
ul.drop   w_show_hide{
	 
	 width:8rem;
	 line-height: 1.8rem;
}
 
w_show_hide{
	 
	 width: 8rem;
	 
}
 

div#tabs  table  tr  { line-height: 1.3rem; font-size: 1.2rem; margin-bottom: 20px;}
div#trace_log_div {width:97%; font-size: 0.9rem;}
div#trace_msg { font-size: 0.9rem; }

div#trace_msg textarea {width: 99%; }

ul.nodrop{ 	display: none; }
ul.nodrop:hover {display:block; }
ul.drop {display:block;  z-index:1000; color:white;} 
ul.drop:hover {display:block;  z-index:1000;  color:white;}     /* wird per js gesetzt  (toogle)  */

div#show_hide_div ul.drop {display:block;  z-index:1000; color:white;} 
div#show_hide_div ul.drop:hover {display:block;  z-index:1000;  color:white;}     /* wird per js gesetzt  (toogle)  */

div.anhang { float:left;  height: 50px;  top: 1px; padding-left:1px; 
 margin-left: 3px; margin-right: 3px;background-color: #3B5998; 
 border-top-left-radius: 8px; border-top-right-radius: 8px; 
 width: 60px;} 

a.lg_button img { width:45px;}
li.show_hide_li a {color: white; vertical-align: middle; z-index:1000;}

span.incr {  font-size: 2.0rem; font-weight: bold;margin-bottom: 10px; background-color: #3B5998; }

span.decr {  font-size: 1.1rem; font-weight: bold;margin-bottom: 10px; background-color: #3B5998; }

span.big_icon { font-size: 1.7rem; font-weight: bold;margin-bottom: 10px;vertical-align: middle; color:white; }

span.reset  { font-size: 1.7rem; font-weight: bold;margin-bottom: 10px;vertical-align: middle; color: black; }
* {
	box-sizing: border-box;
/*	-moz-box-sizing: border-box;  */
}


/*   div#heared {position: absolute; left: 1px; }  */


/* =================================================== */


/*   Coarse  Tooch Device */
@media  (hover: none) and (pointer: coarse)  { 
	.wrapper{
	max-width: 99.8%; 
	margin: .05em auto;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: normal;
    font-family: 'Droid Serif', Arial, Helvetica, sans-serif;
    line-height: 1.2rem;
     font-size: 1.1rem;
    margin: .45em 0 0;
    padding: 0;
}

 span.sw_scheme { font-size: 1.3rem;}
 
div[class*="grid_"]  {
/*    width: 99%  !important;  */
	float: left;
	display: block;
	padding-left:2px;
}
 
div#donate {width: 400px;}
div#cbk {
       display:block;font-size:0.8em;text-decoration:none;background-color: #5b78a4;
       color:#f00; width:170px;font-weight: bold; line-height: var(--def-mnu-line-height); z-index:250;
       }
div#cbk   .menu ul:hover, .menu ul ul li:hover
 	{   color: black;   background-color: #fefdd0;}
ul#cbkshow_ul {width: 210px;  background-color: #5b78a4;}
/* line-height: auto;   auto geht nicht */
ul#cbkshow_ul li.cbkdrop {  background-color: #5b78a4; width: 11em;  color: #ffffff; 
                    font-size:1.0em;  padding-top:4px; font-weight: bold;
                    border: solid 1px black;}
ul#cbkshow_ul li.cbkdrop:hover {  background-color: #FFFECF; color: blue; font-weight: bold;}

/*
ul#cbkshow_ul {width: 220px;  background-color: #5b78a4;} */
/*  line-height: auto; var(--def-mnu-line-height);  */
ul#cbkshow_ul li.cbkdropblue {  background-color: yellow; color: #010101 !important; 
    width: var(--def-mnu-item-width);
    line-height: 50px; 
	border-top-left-radius: var(--radius-size);
    font-size:1.1em;  
	font-weight: bold;
	padding-top:4px; 
	border: solid 1px black;}
                                             	/*   #3B5998 */
ul#cbkshow_ul li.cbkdropblue:hover {  	 background: yellow; color: blue !important;   line-height: 50px;  }
ul#cbkshow_ul  li {
	   line-height: var(--def-mnu-line-height); 
}

article h5 { background-color:yellow; display: block; border-bottom: solid black 3px; }
article h4 { background-color:yellow; line-height: 1.4rem;  font-size: 1.25rem;display: block; border-bottom: solid black 3px; 
            border-bottom: solid black 3px;}

div#HelpText {font-size:1.1rem; }
div#HelpText li.box {margin-left:1rem; }

.nav-menu li li a {
	background: #e8e8e8;
	padding-left: 40px;
}

a, a:visited, a:active, a:hover {
	color: #0099ff;
}

 body {
 font-family: Georgia, "Times New Roman", Times, serif; font-size: 1.1em; line-height: 1.25em;}
    div#trace_log_div { font-size:1.0rem; }


 
		
	
#main_nav{
	float:left;
	text-align:left;
	margin-bottom:-10px;/*this depends on the height of the logo*/
}
.menu-toggle{/*make menu float right, instead of sitting under the logo*/
	margin-top:10px;          /*this depends on the height of the logo*/
	float:right;
	padding-right:10px;
	z-index:10;
	display: block;
	padding: 2px;
	margin: 5px 0 0;
	background: #666;
	color: #fff;
	cursor: default;
	text-transform: uppercase;
	font-size: 1.2rem;
	float: right;
	width: 45px;
    height: 40px;
}

nav-menu.toggled-on{
	display:block;
	position:relative;
	z-index:10;
	max-width: var(--def-mnu-item-width);
}

.nav-menu li {
	float: left;
	position: relative;
	margin-left: 1px;
	border-radius: var(--radius-size);
	width:var(--def-mnu-item-width);
	line-height: var(--def-mnu-line-height);
}

ul.drop  a{
	border-top-left-radius: var(--radius-size);
	border-top-right-radius: var(--radius-size);
	padding-left:5px;
	 width: var(--def-mnu-item-width);
	 line-height: var(--def-mnu-line-height);
	 display: inline-block;
	 background: #3B5998;
}
 
	input#hamburg { display: none; }
	label.hamburg {
    display: block;
    background: #555;
    width: 40px;
    height: 35px;
    position: relative;
    margin-top: -1em;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 0.3em;
    border-radius: 4px;
    transition: border-radius .5s;
	}
	
	
	label.hamburg .line { 
		position: absolute; 
		height: 3px; 
		background: #fff;
		border-radius: 2px;
		width: 20px; 
		display: block; 
		left:5px;
		transition: 0.5s; 
		transform-origin: center; 
	}



	label.hamburg .line:nth-child(1) { top: 8px;  left:4px;}
	label.hamburg .line:nth-child(2) { top: 18px;  left:4px }
	label.hamburg .line:nth-child(3) { top: 28px;  left:4px}
	
    #hamburg:checked	{	background:#0099ff; }
	#hamburg:checked + .hamburg .line:nth-child(1) {
		transform: translateY(5px) rotate(-45deg);
	}

	#hamburg:checked + .hamburg .line:nth-child(2) {
		opacity:0;
	}

	#hamburg:checked + .hamburg .line:nth-child(3) {
		transform: translateY(-15px) rotate(45deg);
	}
	
	#hamburg:checked + .hamburg { background:#0099ff;} /* background: #333;   */

	#hamburg:checked + .hamburg + .menu-toggle.toggled-on  { height: auto; max-height: 100px; background: crimson; }




input[type="checkbox"] #hamburg {
    outline: solid 1px black !important;
}
div#tabs  table  tr  { line-height: 1.3rem; font-size: 1.2rem; margin-bottom: 20px;}
div#trace_log_div {width:97%; font-size: 0.9rem;}
div#trace_msg { font-size: 0.9rem; }

div#trace_msg textarea {width: 99%; }

ul.nodrop{ 	display: none; font-size: 1.0em; }
ul.nodrop:hover {display:block; font-size: 1.0em; }
ul.drop:hover {display:block; font-size: 1.0em; z-index:2000;}     /* wird per js gesetzt  (toogle)  */


span.incr {  font-size: 2.0rem; font-weight: bold;margin-bottom: 10px; background-color: #3B5998; }

span.decr {  font-size: 1.1rem; font-weight: bold;margin-bottom: 10px; background-color: #3B5998; }

span.big_icon { font-size: 2.0rem; font-weight: bold;margin-bottom: 10px;vertical-align: middle; color:white; }

span.reset  { font-size: 2.0rem; font-weight: bold;margin-bottom: 10px;vertical-align: middle; color: black; }

}


/* ============================================================================
TABLET & SMALLER LAPTOPS & DESKTOP 
The average viewing window and preferred media query for those is 768px.
But I think that some more breathing space is good:)

Ab hier wird das volle Menu angezeigt.
*/
@media only screen and  (min-width:901px)  {
table#checkl_tab, table.checkl_tab_bog  {font-size: 0.95rem; } 
body {   background-color: #FFFFFF;  }
div#prog_ende:after { content: '901   screen and    (min-width: 901px)  ';  color: red; }

/*
li.show_hide_li { display:inline; font-size: 1.1rem; margin-left:2px; 
        height: 48px; top: 0px; }
li.w_show_hide  { width: 9.0rem; }
*/
div.mittig {width: 95%;}

.wrapper  {
 	width: 99%;
	margin: .15em auto;
}
 

header{
	padding:0;
}

 
.grid_1 { width: 8.33333333%; }
.grid_2 { width: 16.66666667%; }
.grid_3 { width: 24%; }
.grid_4 { width: 33.33333333% !important; }
.grid_5 { width: 41.66666667%; }
.grid_6 { width: 49%; }
.grid_7 { width: 58.33333333%; }
.grid_8 { width: 66.66666667%; }
.grid_9 { width: 75%; }
.grid_10 { width: 83.33333333%; }
.grid_11 { width: 91.66666667%; }
.grid_12 { width: 100%; }



#content, #info {  
/*	float:left; */
	width:99%;
	margin: auto;
	background-color: #fff;
	padding-left: 4px;
	
}
#content.wide-content{
	float:none;
	width:99%;
    background-color: var( --app-bg-dark, white ) !important;
    color: var( --app-tx-dark, --font-color ) !important;
    /*
	border: 4px solid #fff; 
	-webkit-border-radius: 4px; 
		-o-border-radius: 4px; 
	border-radius: 4px;
	*/
}

.flexslider{
display:block;
/*demo 1 slider theme*/	
margin: 0 0 60px; 
background: #fff; 
border: 4px solid #fff; 
-webkit-border-radius: 4px; 
-o-border-radius: 4px; 
border-radius: 4px; 
box-shadow: 0 1px 4px rgba(0,0,0,.2); 
-webkit-box-shadow: 0 1px 4px rgba(0,0,0,.2); 
-o-box-shadow: 0 1px 4px rgba(0,0,0,.2);
}

div#donate {width:600px; color:black;}

/*
aside { 
	float:right;
	width:30%;
}
*/
/*** MAIN MENU - ESSENTIAL STYLES ***/
.menu-toggle{display:none;}
#menu-main-navigation{display:block;}
#menu-subnav-navigation{display:block;}

#menu-subnav-navigation  .toggled_on {display:block; max-width: 220px;}

.nav-menu, .nav-menu * {
	margin:			0;
	padding:		0;
	list-style:		none;

}
.nav-menu ul {
	position:		absolute;
	margin-top:1px;
	display:none;
	width:			var(--nav-item-size); /* 12em; left offset of submenus need to match (see below) */
    background: #CFCFCF;
}
.nav-menu ul li {
	width:			100%;
	border-top-left-radius: var(--radius-size); 
	border-top-right-radius: var(--radius-size); 
	line-height:1.8rem;  /* var(--def-mnu-line-height); */
}
.nav-menu li:hover {
	visibility:		inherit; /* fixes IE7 'sticky bug' */
	z-index: 2000;
}
.nav-menu li {
	float:			left;
	position:		relative;
	margin-left:1px;
    border-top-left-radius: var(--radius-size); 
	border-top-right-radius: var(--radius-size); 
	line-height: var(--def-mnu-line-height);
	font-size:0.8rem;
}
.nav-menu li li {
	margin-left:0px;
	
}
.nav-menu a {
	display:		block;
	position:		relative;
}
.nav-menu li:hover ul,
.nav-menu li.sfHover ul {
	display:block;
	left:			0;
	top:			45px; /* Abstand oberes listitem vom topeintrag , da listitem 48 hoch überlagert es um 3 Pixel. Muss sein  */
	z-index:		2000;
	-webkit-box-shadow:  2px 3px 2px 0px rgba(00, 00, 00, .3);
    box-shadow:  2px 3px 2px 0px rgba(00, 00, 00, .3);

}
ul.nav-menu li:hover li ul,
ul.nav-menu li.sfHover li ul {
	top:			-999em;
}
ul.nav-menu li li:hover ul,
ul.nav-menu li li.sfHover ul {
	left:			var(--nav-item-size); /* 10em; var (--nav-item-size); funktioniert nicht   match ul width */
	top:			0;
}
ul.nav-menu li li:hover li ul,
ul.nav-menu li li.sfHover li ul {
	top:			-999em;
}
ul.nav-menu li li li:hover ul,
ul.nav-menu li li li.sfHover ul {
	left:			var(--nav-item-size); /* 10em;   var (--nav-item-size);   match ul width */
	top:			0;
}
.nav-menu  ul.nodrop{ 	display: none;  }
.nav-menu ul.nodrop:hover {display:block; }

.nav-menu ul.drop:hover {display:block; z-index: 2000;}

/* SHOW   HIDE */
ul#cbk_ul  {background-color: #FFFFCF; min-width:220px; color: #010101 !important;}
ul#cbk_ul li {background-color: #FFFFCF; min-width:220px; height:40px;  color:#010101 !important;}
ul#cbk_ul li:hover {  height:40px;  background-color: yellow  !important; color:#010101 !important;}
ul#cbk_ul li input[type="checkbox"] {  vertical-align: middle;}


div#cbk {
       display:block;font-size:0.8em;text-decoration:none;background-color: #5b78a4;
       color:#f00; width:170px;font-weight: bold; line-height: var(--def-mnu-line-height); z-index:250;
       }
div#cbk   .menu ul:hover, .menu ul ul li:hover
 	{   color: black;   background-color: #fefdd0;}
ul#cbkshow_ul {width: 210px;  background-color: #5b78a4;}
/* line-height: auto;   auto geht nicht   #5b78a4; */
ul#cbkshow_ul li.cbkdrop {  background-color:#FFFECF;  width: 11em;  color: #ffffff; 
                    font-size:1.0em;  padding-top:4px; font-weight: bold;
                    border: solid 1px black;}
ul#cbkshow_ul li.cbkdrop:hover {  background-color: #FFFECF; color: blue; font-weight: bold;}

/*
ul#cbkshow_ul {width: 220px;  background-color: #5b78a4;} */
/*  line-height: auto; var(--def-mnu-line-height);  */
ul#cbkshow_ul li.cbkdropblue {  background-color: yellow; color: #010101 !important; 
    width: var(--def-mnu-item-width);
    line-height: 50px; 
	border-top-left-radius: var(--radius-size);
    font-size:1.1em;  
	font-weight: bold;
	padding-top:4px; 
	border: solid 1px #010101;
	color:  #010101;}
                                             	/*   #3B5998 */
ul#cbkshow_ul li.cbkdropblue:hover {  	 background-color: yellow; color: #010101 !important;  line-height: 50px;  }
ul#cbkshow_ul  li {
	   line-height: 50px; 
}
/*** DEMO1 SKIN ***/
#topnav, .nav-menu {
	float:left;
	margin: 0 0 0 0;
}
.nav-menu a {
	text-decoration:none;
}
.nav-menu li a {
	background:#3B5998;
	color: white;
	margin: 3px 5px;    /* bottom top   3px, left-right 20*/
	padding:10px 2px;
	height:48px;
	border-top-left-radius:8px;
	border-top-right-radius:8px;
}
.nav-menu a, .nav-menu a:visited  { /* visited pseudo selector so IE6 applies text colour*/
	color:			white;
	
}
.nav-menu li li a {
		border-top:		1px solid rgba(255,255,255,.2);
		background:		#333; /*fallback for old IE*/
		background:rgba(0,0,51,.6);   /* rgba(0,0,0,.6);  fast schwarz , rgba(0,198,201,.6); türkis*/
		color:	#fff;
		padding-left:10px;
		height:auto;
}
.nav-menu li li a:visited{color:#fff;}
.nav-menu li li li a,
.nav-menu li.current * li a{
	padding-left:10px;
	background:rgba(0,0,0,.6);
}

.nav-menu li:hover > a,
.nav-menu li.current a{ 
	color:#fff;
	background:#0099ff;
}
.nav-menu li li:hover > a{
	color:#fff;
	background:#0099ff;
}
 
 
pre   { background-color: #FFFFEC; color: #010101; border: solid 1px blue; padding: 5px; margin-left: 2px;}
div.code   { background-color: #FFFFEC;  padding: 5px; margin-left: 5px; width: 73%; }
pre.code   { background-color: #F4F4EC; border-style: none; padding: 5px; margin-left: 5px; width: 73%; }
span.codehead {    width:98%; background-color: #8080FF; display: block; color: #FFFFFF; font-weight: bold;  }	
pre.box {margin-left:20px; border:solid blue 2px; width: 70%;} 
 

/* @notation inspired by tinyGrid, .row and percentage by Twitter Bootstrap
#hero [class*="grid_"] { margin-bottom:-10px;}
 */
/*
http://www.w3.org/TR/css3-selectors/#sibling-combinators
6.3.2. Substring matching attribute selectors
[att*=val]
    Represents an element with the att attribute whose value contains at least one instance of the substring "val". 
    If "val" is the empty string then the selector does not represent anything. 
*/ 
#info[class*="grid_"] { margin-bottom:-10px;    border:solid 2px white;}
}

/*
DESKTOP
This is the average viewing window. So Desktops, Laptops, and
in general anyone not viewing on a mobile device. Here's where
you can add resource intensive styles.
*/
@media only screen and (min-width: 1024px) {
    body {
        background-color: #FFFFFF;
    }  /*   #dfdfdf;  #4466aa;  */
    div#prog_ende:after {
        content: ' 1024    (min-width: 1024px) ';
        color: red;
    }

    div.mittig {
        width: 90%;
    }

    input.more_info {
        padding-left: 15px;
        padding-right: 5px;
        background-color: red;
        color: white;
    }

    .noshow {
        display: block;
        visibility: visible;
    }

    div#donate {
        width: 705px;
        color: black;
    }

    input#payme {
        display: inline;
    }

    .wrapper {
        max-width: 99.5%;
        margin: .15em auto;
    }

    .middle {
        width: 66.66666667%;
    }

    div.middle {
        position: absolute;
        left: 16%;
        width: 66.66666667%;
        background-color: #ffa;
    }        

/* Diese Elemente sollen nur bei einem grossen Display  dargestellt werden */
    div.more_info {
        display: block;
        visibility: visible;
    }

    input.more_info {
        padding-left: 10px;
        padding-right: 10px;
        background-color: red;
        color: white;
    }

    .noshow {
        display: block;
        visibility: visible;
    }

    header {
        height: 50px;
    }

    div#donate {
        width: 705px;
        color: black;
    }

    input#payme {
        display: inline;
    }

    nav-menu li li a {
        border-top: 1px solid rgba(255,255,255,.2);
        background: #333;
 /*fallback for old IE*/
        background: rgba(0,0,51,.6);
   /* rgba(0,0,0,.6);  fast schwarz , rgba(0,198,201,.6); türkis*/
        color: #fff;
        padding-left: 10px;
        height: 40px;
        ;
    }

    ul#cbk_ul li.dropblue {
        background-color: #FFFFCF;
        min-width: 250px;
        height: 40px;
        line-height: var(--def-mnu-line-height);
        color: black !important;
        font-size: 1.0rem;
    }
    ul#cbk_ul li.dropblue:hover {
           background-color: yellow;
       }
    ul#cbk_ul li.dropblue span.checkboxtext {
        color: #010101 !important;
    }  /* #080707; */
} 






/** if the primary input mechanism of the device includes a pointing device of limited accuracy, 
    we use coarse .
     smartphones, touchscreens
    */
@media  (hover: none) and (pointer: coarse) {
    body:after {
        content: ' all  (pointer: coarse)';
        color: red;
    }

    body {
        font-size: var(--def-size);
        line-height: var(--def-line-height);
        font-family: Georgia, "Times New Roman", Times, serif;
  /*      font-family: Helvetica, "Helvetica Neue", sans-serif; */
    }

    input {
        height: 30px;
        margin-bottom: 5px;
    }

    span.sw_scheme {
        font-size: 1.3rem;
    }

    div#tabs  table  tr {
        line-height: 1.3rem;
        font-size: 1.2rem;
        margin-bottom: 20px;
    }

    div#trace_log_div,div#trace_msg {
        border: outset 3px red;
        width: 99%;
        font-size: 0.6rem;
    }

    div#trace_msg {
        font-size: 0.5rem;
        width: 98%;
    }

    textarea.trace_txt {
        font-size: 0.5rem;
        width: 98%;
    }
/*   
    li.show_hide_li { display:inline; font-size: 1.1rem; margin-left:2px; 
                     height: 48px; top: 0px; }
    li.w_show_hide  { width: 9.0rem; }
*/
    ul.nodrop {
        display: none;
    }

    ul.nodrop:hover {
        display: block;
    }

    ul.drop:hover {
        display: block;
        z-index:2000;
    }     /* wird per js gesetzt  (toogle)  */

    .nav-menu li {
        float: left;
        position: relative;
        margin-left: 1px;
        border-radius: var(--radius-size);
        width: var(--def-mnu-item-width);
        line-height: var(--def-mnu-line-height);
    }
}
/* if the primary input mechanism of the device includes an accurate pointing device, we use fine 
 * any-pointer is used to query the presence and accuracy of pointing devices. 
 * It does not take into account any additional non-pointing device inputs, and can not be used 
 * to test for the presence of other input mechanisms, such as d-pads or keyboard-only controls, 
 * that don’t move an on-screen pointer. ‘any-pointer: none’ will only evaluate to true 
 * if there are no pointing devices at all present. 
 * mouse, touch pad */
@media (hover: hover) and (any-pointer: fine) {
    body {
        font-size: var(--def-size);
        line-height: var(--def-line-height);
        font-family: Georgia, "Times New Roman", Times, serif;
  /*      font-family: Helvetica, "Helvetica Neue", sans-serif;  */
    }

    div#trace_log_div {
        border: outset 3px red;
        font-size: 0.9em;
    }

    trace_msg {
        font-size: 0.9em;
    }

    textarea.trace_txt {
        font-size: 0.9em;
    }
}