
<style type="text/css">


/* 1em = 100% =16px */



body {
    font-size:0.75em;
    padding-top:0em; 
    padding-bottom:0em;     
    color: black;
    --bg-color1: #e5e5e5;  /* e5e5e5 - grau */
    --bg-color2: #FF9D3C;  /* FF9D3C - orange */
    --bg-color3: coral;  
    --link-color1: coral;  
    --link-color2: coral;  
}


 body {
    background-color: #e5e5e5; 
   }





/* ------------------------------------*/

#menutitle
{
font-weight:bold;
margin-top:1em;
}

    
 
    .flex-container, .flex-title-container {
        display: -webkit-flex;
        display: flex;
        flex-wrap: wrap;   
}

    .flex-container, .flex-title-container,  
     .left, .title-left, .title-mitte,  .content, .footer {
        flex: 1 100%;
    }



    .left, .title-left {
     flex: 1 1 0%;
    }

    .content, .title-mitte  {
     flex: 4 1 0%;
    }

    .flex-container, .left,  .flex-title-container {
         background-color: #FF9D3C;
    }

     .content, .footer {
         background-color:#fffaf0;
   }
     .content, .footer, .title-mitte {
         padding-left: 1em; 
         padding-right: 1em;
         padding-top:0em;
         padding-bottom:0.5em;
   }


    .left {
         line-height:1.3em;
         font-size:	1.2em;
    }


 


    p    /* Beschreibt einen Absatz  */
    {margin-top:0px;
     margin-bottom: 1em;
     padding: 0;
    font-size:1.2em;
    font-weight:  normal;
    line-height: 1.5em; 
    text-align: justify;
    }

/* hr {border:1px solid #FF9D3C;   }*/
hr {border:solid #FF9D3C 1px; background-color:#FF9D3C; height:3px;margin:30px 0px;}

/* �berschriften */
	h1 {line-height: 1.8em;font-size:		1.6em;font-weight:	bold;text-align:		center;	margin-bottom:0px}
	h2 {line-height: 1.6em;font-size:		1.3em;font-weight:	bold;text-align:		center;	}
	h3 {line-height: 1.3em;font-size:		1.2em;font-weight:	bold;text-align:		center;}
	h4 {line-height: 1.5em;font-size:       1.2em;font-weight:	normal; font-family: 'Comic Sans MS';
         text-align: left}
	h5 {line-height: 1.0em;font-size:		1.0em;font-weight:	bold;text-align:		center;
        margin-top:3px;       margin-bottom:3px;
		color:			white;
		background-color:	#FF9D3C;
    	}
	h6 { line-height: 2.8em; font-size:2.5em;font-weight:	normal; font-family: 'Comic Sans MS';
         text-align: center}


/* Responsive Stylesheeet */


    /* ganz kleine Monitore / Smartphones   */
    @media only screen and (max-width: 240px) {
        img { max-width:98%; height: auto }
        .table-termine {max-width: 80%}
        .reframe { max-width: 98%; margin: 0 auto }

        body {
                padding-left: 0em; 
                padding-right: 0em;
           }

        /* box links,  Mitte=Inhalt */
         .left, .content, .title-mitte {
           padding-left:0.5em;
            padding-right:0.5em;
         }

        .left,  .dropdown, .dropdown-content {
            display: none;
        }
}


    /* Kleine Monitore / Smartphones  320x480 px */
    @media only screen and (max-width: 480px) {
        img { max-width:80%; height: auto }

        .table-termine {max-width: 80%}
        .reframe { max-width: 80%; margin: 0 auto }

        body {
                padding-left: 0em; 
                padding-right: 0em;
        }
    
         .left, .content, .title-mitte {
           padding-left:0.5em;
            padding-right:0.5em;
        }
        .left,  .dropdown, .dropdown-content {
            display: none;
        }
     }


    /* Tabletts 768 x 1024 px */
    @media only screen and (max-width: 1024px) {
         img { max-width:90%; height: auto }

        .reframe { max-width: 90%; margin: 0 auto }

        body {
                padding-left: 1em; 
                padding-right: 1em;
         }
    
         /* box links,  Mitte=Inhalt */
         .left, .content, .title-mitte {
           padding-left:0.8em;
           padding-right:0.8em;
       }
    
        .left,  .dropdown, .dropdown-content {
            display: none;
        }
}


    /* Mittlere Monitore / Laptops 1280 x 802 px  und gro�e Monitore  */
    @media only screen and (min-width: 1024px) {
        img { max-width: 100%; height: auto }

        .reframe { max-width: 1024px }
    
        /* box links, Mitte=Inhalt */
        body {
                padding-left: 9em; 
                padding-right: 9em;
         }

    
         .left, .content, .title-mitte {     
            height: 100%;
            overflow: auto;
            padding-left:1.2em;
            padding-right:1.2em;
        }


        .navicon-link, .navicon-menu {
        display: none;
          }

}

   

/* Navigation standard */


nav,               
  nav ul,
  nav li,
  nav ul ul,
  nav ul ul li {           /* Normalisierung */
    list-style: none; 
    margin: 0; 
    padding: 0;
    border: 0;
    background-color:transparent;
  }


  nav ul {
    margin: 0 0 0 0;
    padding: 0.2em ;    
  }

 
  nav li {
    list-style: none;
    margin-left: 0.1em ;
    margin-right: 0.4em;
    margin-top: 0.0em ;
    margin-bottom: 0.6em;
   padding: 0;
 }

  nav ul ul {
    margin: 0 0.5em 0 1em;
    padding: 0.1em 0.1em 0.1em 0.1em;
    border: none;
}


  nav ul ul li {
    display: block;
    margin:  0.1em 0  0 0.3em;
    padding: 0.1em 0.1em 0.1em 0.1em;
  }

    nav a, nav span, .dropbtn  {
        display: inline-block;
        padding: 0.1em 0.1em 0.1em 0.1em;        
        text-decoration: none;
        font-weight: bold;
        font-style: italic;
        box-shadow: 0 5px 5px transparent inset;
      color: black;
        transition: all .25s ease-in;
    }
     a {
        display: inline-block;
        padding: 0.1em 0.1em 0.1em 0.1em;        
        text-decoration: underline;
        font-weight: bold;
        box-shadow: 0 5px 5px transparent inset;
        color: #ff8309;
      transition: all .25s ease-in;
    }

  
     nav  a:hover:not(.active) {
             color:black; background-color:#ff8309;  
    }
      a:hover:not(.active) {
            color:black; background-color:#ff8309;  
     }

/*--------
     nav  a .active {
            background-color: #4CAF50;
        }
      a .active {
            background-color: #4CAF50;
        }

      nav a:focus,
          nav a:hover,
          nav span {color:black ; background-color:#ff8309;  
        }
       a:focus,
           a:hover,
           span {color:black ; background-color:#ff8309;  
        }
--*/

    .dropdown-content {
        display: none;
        position: absolute;
        background-color: #ddffdd;
        box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    }


    .dropdown-content a {
        color: black;
        margin:  0.1em 0  0 2em;
        padding: 0.1em 0.1em 0.1em 0.1em;        
        text-decoration: none;
        display: block;
        text-align: left;
    }


    .dropdown-content a:hover 
        {color:black ; background-color:#ff8309; 
    }


    .dropdown:hover .dropdown-content {
        display: block;
    }


    /* feste Position für Smbol zum Seitenanfang */  

    div.fixed-seitenanfang {
      position: fixed;
     font-size:36px;
     bottom: 0;
      right: 0;
    }

    /* Navicon */  


    .navicon-link {
	    font-size: 2em;
	    text-decoration: none;
	    position: relative;
	    display: inline-block;
	    width: 1px;
	    padding-left: 1.25em;
	    margin-right: 2.5rem;
    }
			
    .navicon-link::before {
	    content: "";
	    position: absolute;
	    top: 0.2em;
	    left: 0;
	    width: 1em;
	    height: 0.2em;
	    border-top: 0.6em double #FF9D3C;
	    border-bottom: 0.2em solid #FF9D3C;
    }

    .navicon-menu {
        
     }



    a .info{visibility:hidden;}
    a:hover .info{visibility:visible;}




/* Navigation horizontal (f�r box oben) */

nav.navquer,               
  nav.navquer ul,
  nav.navquer li {           /* Normalisierung */
    list-style: none; 
    margin: 0; 
    padding: 0;
    border: 0;
    background-color:transparent;

  }

  nav.navquer ul {
    text-align: center;
    margin: 0 0 0 0em;
    padding: 0.1em ;
  }

  nav.navquer li {
    list-style: none;
    display: inline-block;
    margin: 0.1em 0 0 0.4em;
    padding: 0;
  }

  nav.navquer a {
    display: block;
    padding: 0.1em 0.1em 0.1em 0.1em;
    width: 8em;
    text-decoration: none; 
    font-weight: bold;
    font-style: italic;
    box-shadow: 0px 5px 5px transparent inset;
    color: black; 
    -webkit-transition: all .25s ease-in;
    transition: all .25s ease-in;
  }

  nav.navquer a:focus,
  nav.navquer a:hover, 
  nav.navquer span {
     color:black ; 
     background-color:#ff8309; 
  }

/*-----------
    nav.navquer a:active {
      color:black ; background-color:#ff8309;  
    }
----*/

    /* Breadcrumble Navigation */

    .breadcrumbs {
        text-align:  left;
        font-weight:	bold;
        color:	black;
        padding-top: 0.5em;
        padding-bottom: 2.5em; 
}

    .breadcrumbs a {
        text-decoration:none;
         font-style: italic;
    }

    .breadcrumbs a:hover {
     color:black ; 
     background-color:#ff8309; 
    }

    /* Titelelemente */

           

    .title-left {
        padding-top:1em;
        padding-left:1em;
        padding-right:3px;
        padding-bottom:0px;
        border-color: black;
    }

    .title-mitte {
        padding-top: 1em;
        text-align:left;
    } 

	em.willkommen {
				font-size:		1.8em;
			    line-height:    2em; 
                font-weight:	bold;
				font-style:		normal;
                font-family:   'Comic Sans MS';
                color:          #FFFFE1;
				text-align:		left;
			}

	em.blockweise {
				font-size:		2em;
			    line-height:    2em; 
                font-weight:	bold;
				font-style:		normal;
                font-family:    Arial;
                color:          #000000;
				text-align:		left;
			}
			
			
	em.ensemble {
				font-size:		1em;
			    line-height:    1em; 
                font-weight:	bold;
				font-style:		normal;
                font-family:    Arial;
                color:          #000000;
				text-align:		left;
			}

    em.atemlos {
    			font-size:		2em;
			    line-height:    2em; 
                font-weight:	normal;
				font-style:		normal;
                font-family:    Comic Sans MS;
                color:          #000000;
				text-align:		left;  
    }



    /* Infobl�cke, Tabellen u.a. */


    
	/* Schrift wichtig */
	#schrift-wichtig {
		font-weight:	bold;
		font-size:		1.1em;
		color:			#009900;
	}

	/* Schrift sch�n */
	#schrift-schoen {
        font-size:   1.2em;
        font-weight:	normal; 
        font-family: 'Comic Sans MS';
        text-align: left	
    }


	/* Datumstyle */
	#datum {
        padding-top:0.1em;
        padding-bottom:0.1em;
	    padding-right:0.5em;
    	text-align:		right;
        vertical-align: text-bottom;
		font-size:		0.8em;
		font-style:		italic;
        color:			Black;
	}
	
	

	/* "�nderung" */
	#aenderung	{
		color:			red;
		}



	
	/*------------------------ allgemeine Tabellen -----------------------*/	
    /* Tabelle mit div-Elementen und display:table */

  div.table,  div.table-termine, div.table-no-border { 
        display: table; 
        margin:auto;
        margin-bottom: 2em;
        padding: 0;
    	border: 1px solid #FF9D3C;
    	border-collapse:collapse;
		background-color:	#fffaf0;
		empty-cells:	show;
        font-size:		1.0em;
		text-align:		left;
        max-width: 90%;
   }

    div.caption, div.th {
        border: 1px solid;
	    border-color:	#FF9D3C;
        background-color:#FF9D3C;
        line-height: 1.5em;
        font-size:		1.0em;
        font-weight:	bold;
        text-align:		center;
    	}  



    div.table-no-border { 
	    border: 0 none;
   }
  
     div.caption {
             display:table-caption; 
     }
 
     div.th {
             display:table-row-group; 
     }


    div.tr { 
        display:table-row; 
 	    border-top: 1px solid #FF9D3C;;
	    border-bottom: 1px solid #FF9D3C;;
   }
    div.tr-no-border { 
        display:table-row; 
	    border: 0 none;
   }

    div.tr:hover {background-color: #f5f5f5;}
    div.tr-no-border:hover {background-color: #f5f5f5;}

    div.tr:first-child {
	    border-top: 0 none;
    }
    div.tr:last-child {
	    border-bottom: 0 none;
    }


    div.td, div.td-left { 
      display:table-cell; 
      padding:0.5em; 
      vertical-align: top;
    }
    
    div.td-left{
 	   text-align:		left;
    }

	/* Darstellung von Bildern */
	   img {
        padding: 0.5em;
    }

	
	/* einzelnes Bild: mittig */

	div.img-single {
		  text-align: center;
    }


	/* Box f�r Bild mit Text  */

		div.bildunterschrift  {
			font-size:		1em;
			font-weight:	lighter;
			font-style:		normal;
			text-align:	    center;
			padding-left: 1em;
			margin-bottom: 2em;
		}

		div.img-schatten {
		  text-align: center;
		  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
		}
		div.img-schatten img {
		  width: 100%;
		}


    div.bild-links {
	    float: left;
        padding-right: 0.5em;
        margin-right:  0.5em; 
    }
    div.bild-rechts {
	    float: right;
        padding-left: 0.5em;
        margin-left:  0.5em;
   }

    div.bildtext {
         padding: 0.5em;
        margin:  0.5em;
   }

	/* Box für mehrere Bilder  */
	
	/* 
		div.gallery {
		  margin: 1em;
		  border: 1px solid #ccc;
		  float: left;
		  width: 180px;
		}

		div.gallery img {
		  width: 100%;
		  height: auto;
		}

		div.desc {
		  padding: 0.5em;
		  text-align: center;
		}
	*/
		
    div.bildbox {
		display: inline-block;
    }
	
	



//-->

</style>
