/* styles.css - Original von MS Copilot */
body {
    font-family: Arial, sans-serif;
    background: #00FFFF;  /*  r-g-b: 00-FF-FF  = türkis */
}

/*   just specifying  .logo  is not sufficient, you must begin with:   img.   */
img.logo
{  
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.vertical-menu {
	 /* introduce new attribute font-size: */
	 font-size: 14px;        /*  gut für Menu items auf Smartphone, urspr. 14px */
    width: 40%;   /*  Breite des Menüpunkte oberster Stufe */
    /* adjust from original 300 to n to reduce width of menu item */
    /* max-width: 220px;  */
    /* introduce new attribute background-color: #333 (black):  */
    background-color: #333;
}

.vertical-menu ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
                width: 100%;   /* % von Breite des obersten Menüs */
}

.vertical-menu ul li {
	 /* NO change from #ddd (hellgrau) to #666 (dunkelgrau): */ 
    border-bottom: 1px solid #ddd;
    position: relative;
        width: 100%;  /* % von Breite des obersten Menüs */
}

.vertical-menu ul li a {
    display: block;
    padding: 10px;
    text-decoration: none;
    /* change from #333 (schwarz) to #fff (weiß): */ 
    color: #fff;

}

.vertical-menu ul li a:hover {
	 /* change from #f4f4f4 (sehr helles Grau) to #00f (blau):  */ 
    /* background-color: #00f; */
    background-color: slateblue;
}

.vertical-menu ul ul {
    display: block;
    position: absolute;
    left: 100%;
    top: 0;
        width: 30%;
    /* war: width: 200px;
    /* change from #fff (weiß) to #333 (black): ?????????? */
    background-color: #fff;
    /* change from #ddd (hellgrau) to #666 (dunkelgrau): */ 
    border: 1px solid #666;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.vertical-menu ul li:hover > ul {
    display: block;
}

.vertical-menu .submenu {
    display: none;
    position: absolute;
    left: 100%;
    top: 0;
    /* reduce original 150 to n:  */
    width: 100px;
    /* change background-color from #fff (weiß) to #333 (black):  */
    background-color: #333;
    border: 1px solid #ddd;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.vertical-menu ul li:hover .submenu {
    display: block;
}

.vertical-menu .sub-submenu {
    display: none;
    position: absolute;
    left: 100%;
    top: 0;
    /* reduce original 150 to n */
    width: 100px;
    /* change background-color from #fff (weiß) to #333 (black): */
    background-color: #333;
    border: 1px solid #ddd;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.vertical-menu ul li:hover .sub-submenu {
    display: block;
}

/* für <div id="MyOutput">  */

#MyOutput {
	/* margin: 8px;   */
	font-size: 12px;  
}  

.Tabelle {
  font-family:monospace,monospace;
  /*	  font-size: 1em;   1em = 16px, but the user can enlarge/reduce the font when using em  */
  table-layout: "auto" ;	
  padding: 0px 0px 0px 0px;  /* oben rechts unten links */
  /* width: 100%;  */
  overflow: scroll; /* für Handys: man kann die Tabelle nach rechts oder links verschieben,
                     Tipp aus:   https://www.mediaevent.de/css/table-responsive.html     */
}

.Tabelle th {
	padding: 0px 0px 0px 8px;  
}
.Tabelle td {
	padding: 0px 0px 0px 8px;  
	  font-size: 1em;  /* 1em = 16px, but the user can enlarge/reduce the font when using em  */
}

.Liste {
	  margin: 10pt;
     padding: 10pt;
}

#MyOutput ul li {
	margin-left: 15pt;               
   margin-top: 5pt;  
}
                 
#MyOutput ol li {
	margin-left: 15pt;  
	margin-top: 5pt;  
}