body                                                                                        
{
        margin-left:80px;
        margin-right:80px;
	background-color:#EFFFDD;
/*	width:750px;         */
        font-family: helvetica,arial;
        font-size: 90%;
}
   a:link {color: #0000FF;text-decoration: none;border-style: none;}
   a:visited {color: #3300FF;text-decoration: none;border-style: none;}
   a:hover {color: #ff0000;text-decoration: underline;border-style: none;}
   a:active {color: #ff0000;text-decoration: none;border-style: none;}
/**/
a.unten_rechts:link,
a.unten_rechts:visited,
a.unten_rechts:hover,
a.unten_rechts:active {
	color: #ccc;
	text-decoration: none;
	border-style: outset;
	position:fixed;
	bottom:5px;
	right:5px;
/*	background-color: #ccc; /**/
	background: transparent;
	border-radius: 5px;
	z-index: 500;
}

a.unten_links:link,
a.unten_links:visited,
a.unten_links:hover,
a.unten_links:active {
	color: #ccc;
	text-decoration: none;
	border-style: outset;
	position:fixed;
	bottom:5px;
	left:5px;
/*	background-color: #ccc; /**/
	background: transparent;
	border-radius: 5px;
	z-index: 500;
}
.normal {text-decoration:none; font-weight:normal;}
.durchgestrichen {text-decoration:line-through}
.unterstrichen {text-decoration:underline}
.ueberstrichen {text-decoration:overline}
.fett {font-weight:bold}
.kursiv {font-style: italic}
.small {font-size: 9pt}
.mittig {text-align: center;}
.blocksatz {text-align: justify;}
.highlight {background-color:yellow;}
span.small {color: black;
             font-size: 7pt;
             font-weight:normal;
}
.gross {font-size: 150%;}
.groesser {font-size: 120%;}
.gruen {color: #080;}
.rot {color: #800;}
.blau {color: #008;}
.red {color: #f00;}
.fettrot {color: #f00;
          font-weight:bold;}
          
.head
{
   text-align:center;
   color: #008000;
   font-size: 200%;
   font-weight: bold;
}

h1
{
        letter-spacing: 0.1cm;
        text-decoration: underline;
        font-family: arial,helvetica,sans-serif;
        font-weight: bolder;
        text-align: left;
        margin: 20px;
}
h2
{
        font-family: arial,helvetica,sans-serif;
        margin: 20px;
}
h2.small
{
        font-family: arial,helvetica,sans-serif;
	font-size: 80%;
        margin: 20px;
}
h3
{
	border-left: solid;
	border-left-width: 10px;
	border-bottom: solid;
	border-bottom-width: 1px;
	border-color: #008B00;
	width: auto;  // 750px;
	padding-left: 5px;
}
p
{
        font-weight: normal;
        font-family: arial,helvetica,sans-serif;
}

.dim
{
   color: gray;
}

.nodisplay
{
    display: none;
}

.small
{
	font-size: 50%;
    margin: 20px;
}

.right {
  text-align:right; 
  padding:0em 0 0 0;
}

/* Hier gefunden: https://wiki.selfhtml.org/extensions/Selfhtml/frickl.php/Beispiel:CSS2_display-table.html  */
div.table {
	display: table;
	border-collapse: collapse;
   margin-left: auto;
   margin-right: auto;      
}

div.tr {
	display: table-row;
}

div.td {
	display: table-cell;
	border: 0px solid red;     /* für Debugzwecke */
	padding: 2px;
	vertical-align: top;
}

/* Ab hier Test mit Hamburger-Menü            */
label.hamburg { 
   display: none;           /* block */
   background: #080; width: 25px; height: 24px; 
   position: relative; 
//   margin-left: 0px; margin-right: auto;
   margin-left: auto; margin-right: 0px;
   border-radius: 4px; 
}

label.hamburg:hover {
   cursor: pointer;
}

input#hamburg {display:none}


.line { 
   position: absolute; 
   left:3px;
   height: 2px; width: 19px; 
   background: #fff; border-radius: 2px;
   display: block; 
   transition: 0.5s; 
   transform-origin: center; 
}

.line:nth-child(1) { top: 5px; }
.line:nth-child(2) { top: 11px; }
.line:nth-child(3) { top: 17px; }

#hamburg:checked + .hamburg .line:nth-child(1){
   transform: translateY(6px) rotate(-45deg);
}

#hamburg:checked + .hamburg .line:nth-child(2){
   opacity:0;
}

#hamburg:checked + .hamburg .line:nth-child(3){
   transform: translateY(-6px) rotate(45deg);
}
#hamburg:checked + label.hamburg  + nav.topmenu  { 
    max-height: 60px;
//    overflow: visible;
}
nav.topmenu { 
    font-family: arial,helvetica,sans-serif;
    height: auto; 
    max-height:50px;          /* 50px */
    margin-top: -25px;
//    margin-left: 15px;
    margin-left: 0px;
    overflow: hidden; 
    transition: all 0.5s;
    background-color: #080;
    top: 5px; 
}
   .topmenu a:link {color: #FFFFFF;text-decoration: none;border-style: none;}
   .topmenu  a:visited {color: #FFFFFF;text-decoration: none;border-style: none;}
   .topmenu  a:hover {color: #F88;text-decoration:  none;border-style: none;}
   .topmenu  a:active {color: #000000;text-decoration: none;border-style: none;}
   
ul { 
    width: auto;
    margin-top: 25px;
    margin-bottom: 0px;
    padding-left: 15px;
    height: 25px;
    text-align: center;
}

@media all and (max-width: 520px)
{
  .head
  {
     font-size: 150%;
  }
  nav.topmenu { 
     max-height:0px;
  }
  label.hamburg { 
     display: block;           /* block */
  }
  ul { 
    height: auto;
    margin-top: 5px;
    margin-bottom: 5px;
  }
  body {
        margin-left:40px;
        margin-right:40px;
  }
  nav.topmenu { 
//     margin-left: 25px;
     margin-left: 0px;
  }
  label.hamburg { 
   display: block;           /* block */
  }
}
