    /*====================================================================
	BODY
    
    ====================================================================*/	    
    body {
    background: #fff;
    line-height: 150%;
    hyphens: auto;
    margin:0;
    color:#232426;
    
    font-size: calc(21px + (27 - 21) * ((100vw - 320px) / (1600 - 320)));}
    
    html {scroll-behavior: smooth;}
    
    img { width: 100%; height: 100%;} 
    hr {background: #fff; border: none; color: #fff; height: 1px; width: 100%; margin-top: 15px;}
    
    .bkf-camp { margin-bottom: -14px; }
    
    /*====================================================================
	BUTTON NAVIGATION HAMBURG
    ====================================================================*/    
    IMG.displayed {display: block; margin: auto;}
    
    .openbtn {cursor:pointer;}
    .rechts {text-align: right;}
    
    .top10 {padding-top: 10px;}
    .top15 {padding-top: 15px;}
    .top20 {padding-top: 20px;}
    .bottom15 {padding-bottom: 15px;}

	/*====================================================================
	GRID 
	====================================================================*/
    .grid {width: 100%; max-width: 1400px; margin: 0 auto;

    /* Umbrechen, sobald die Box 300 Pixel Breite hat */
    display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));}
    .grid div {margin: 0.5em; padding: 0.5em;}
    
	/*====================================================================
	COLOR
	====================================================================*/	        
    .white {background: #ffffff;}
    .lightgrey {background: #D9D9D9;}
    .grey {background: #BFBFBF;}
    .darkgrey {background: #A6A6A6;}
    .dimgrey {background: #8C8C8C;}
    .softblack {background: #232426;} /* BG Skyline*/
    .yellow {background: #F2CA04;}
              
    .rahmen_white {border: 2px solid #ffffff;}
    .rahmen_lightgrey {border: 2px solid #D9D9D9;}
    .rahmen_grey {border: 2px solid #BFBFBF;}
    .rahmen_darkgrey {border: 2px solid #A6A6A6;}
    .rahmen_dimgrey {border: 2px solid #8C8C8C;}
    .rahmen_softblack {border: 2px solid #232426;}
    .rahmen_yellow {border: 2px solid #F2CA04;}	
    
    .check_yellow {color: #F2CA04;} 
    .check_white {color: #ffffff;}
    .check_green {color: #008000;}
    .check_softblack {color: #232426;}
    
    .hr-lightgrey {height:2px; border-width:0; color:#D9D9D9; background-color:#D9D9D9}
    .hr-grey {height:2px; border-width:0; color:#BFBFBF; background-color:#BFBFBF}
    .hr-darkgrey {height:2px; border-width:0; color:#A6A6A6; background-color:#A6A6A6}
    .hr-dimgrey {height:2px; border-width:0; color:#8C8C8C; background-color:#8C8C8C}
    .hr-softblack {height:2px; border-width:0; color:#232426; background-color:#232426}
    .hr-yellow {height:2px; border-width:0; color:#F2CA04; background-color:#F2CA04}

    /*====================================================================
	ELEMENT: DIV CLASS BUTTON
	====================================================================*/
    .info-button {width: 50px; height: 50px;}
    .vorschau {width: 960px; height: 960px;} 
       
    /*====================================================================
	ELEMENT: ACCORDION
	====================================================================*/
	.first {padding-top: 30px;}
    .last {padding-bottom: 30px;}
    .container20	{ padding: 20px 0px 0px 0px;}
	.content { margin: 10px 0px; }

	#akkordeon .title { cursor: pointer;}
	#akkordeon .content { margin-bottom: 50px;}
	
	/* ICONS für Accordions */
	#akkordeon .accordion-close h3 {background: url(../img/arrow-down.png) no-repeat right;}
	#akkordeon .accordion-open h3 {background: url(../img/arrow-up.png) no-repeat right;}
    
    /*====================================================================
	ELEMENT: TERMINKALENDER
	====================================================================*/
    table {
    border-collapse: collapse;
    border-spacing: 0;
    width: 100%;
    border: 1px solid #F5F5F5;
    }

    th {
   	  font-family: 'Oswald';
  font-style: normal;
  font-weight: 500;
	font-size: 0.85em;
	letter-spacing: 0.05em; 
	line-height:1.5em;
    padding: 20px 10px 0px 10px;

    text-align: left;
    padding: 8px;
    }
    
    td {
   	  font-family: 'Oswald';
  font-style: normal;
  font-weight: 400;
	font-size: 0.85em;
	letter-spacing: 0.05em; 
	line-height:1.5em;
    padding: 20px 10px 0px 10px;

    text-align: left;
    padding: 8px;
    }

    tr:nth-child(even){background-color: #F5F5F5}
    
    .tb-style {overflow-x:auto;}
    
    /*====================================================================
	ELEMENT: SCROLL TO TOP
    ====================================================================*/	
	.scrollToTop{
	background: none repeat scroll 0 0 #f2ca04;
    border-radius: 3px;
    bottom: 15px;
    color: #ffffff;
    cursor: pointer;
    font-size: 0.9em;
    padding: 12px 12px 12px 17px;
    position: fixed;
    right: 20px;

    text-align: center;
    transition: background-color 0.2s ease-in-out 0s;
    z-index: 9999;
	}

	.scrollToTop:hover{
	text-decoration:none;
	background: #f2ca04;
	color: #ffffff;
	}
    
    /*====================================================================
	ELEMENT: LOGO-TARN 
    ====================================================================*/
    @media screen and (max-width:960px){
    #lo1 { display:none; }
    }    
 
     @media screen and (max-width:1220px){
    #lo2 { display:none; }
    } 
       
    @media screen and (max-width:500px){
    #lo3 { display:none; }
    } 
    
    /*====================================================================
	ELEMENT: MODUL-TARN 
    ====================================================================*/
    .lo10  { display:none; }
    
    @media screen and (max-width:918px){
    .lo10 { display:block; }
    }
    
    @media screen and (max-width:616px){
    .lo10 { display:none; }
    } 
    
    @media screen and (max-width:918px){
    .lo11 { display:none; }
    }
    
    @media screen and (max-width:616px){
    .lo12 { display:none; }
    }  
    
