/*  Media responsive
****************************************************/
/*  iPad-responsive
------------------------------------------------------------------------------*/
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {

}

/*  Breakpoint bis 1600px
------------------------------------------------------------------------------*/
@media only screen and (max-width: 1600px) {

}


/*  Breakpoint bis 1200px
------------------------------------------------------------------------------*/
@media only screen and (max-width: 1200px) {
	#hhmenue ul {
		margin-top: 8px;
		padding-bottom: 8px;
		font-size: 24px;
	}
	
	h1 {
		font-size: 24px;
	}

	h2 {
		font-size: 18px;
		line-height: 24px;
	}
/*
	.text-standard {
		font-size: 15px;
		line-height: 24px;
	}

	.text-small {
		font-size: 11px;
		line-height: 13px;
	}
	*/

  #subnavi li {
  	margin: 4px 70px -20px 0;
  }
  

  .klapp-b .image {
    margin-top: 7px;
  }
  
  .klapp-b .image img {
  	_width: 100px;
  	height: 100px;
  }

  .klapp-a svg {
  	top: 38px;
  }

  .klapp-b svg {
  	top: 60px;
  }

	.form-label-cell {
		font-size: 15px;
	}

	.icon-list.col-5 .separator {
		display: block;
		width: 100%;
		clear: both;
	}
}


/* Breakpoint bis  980px
------------------------------------------------------------------------------*/
@media only screen and (max-width: 980px) {
	
	#hauptnavibalken {
		display: none;
		float: none;
	}
	
	#btn-open {
		display: block;
	}
	
	#serviceleiste {
		width: 90%;
		margin: 0 5%;
	}
	
	#logo {
		margin: 2px 0;
	}
	
	#servicenavi {
		display: none;
	}
	
	#serviceleiste .suchbereich {
		display: none;
	}
	
	#serviceleiste .sprachennavi {
		display: none;
	}

  #ebene2balken {
    margin-bottom: 6px;
  }

	
	/*
	.sprachennavi {
		margin-top: 30px;
		margin-left: 30px;
	}*/
	
	/*
  #hhmenue ul {
		margin-top: 6px;
		padding-bottom: 6px;
		font-size: 22px;
	}
	*/


	#contentwhite h1 span,
	#contentgrey h1 span{
		padding: 0 10px;
	}

	h1 {
		font-size: 22px;
	}

	h2 {
		font-size: 16px;
		line-height: 22px;
	}

/*
	.text-standard {
		font-size: 14px;
		line-height: 22px;
	}

	.text-small {
		font-size: 10px;
		line-height: 12px;
	}
*/

  .klapp-b .image {
    margin-top: 6px;
  }

	.form-label-cell {
		font-size: 14px;
	}

	.slice-column {
		float: none;
		width: 100% !important;
		margin: 0 !important;
	}

	.slice-column-inner {
		margin: 0 !important;
	}

  .dl-thumbblock img.iconon {
    display: none;
  }


	/*
	.slice-column {
		float: none;
		width: 100% !important;
		margin-bottom: 20px;
	}

	.slice-column-inner {
		_margin: auto 0 !important;
  		margin: 0 auto !important;
	}

	.field-table {
		max-width: 90%;
	}
	*/
	
	#subnavi li {
		margin: 4px 40px -20px 0;
	}	
	
	.footnavicol {
    width: 46%;
    max-width: 100%;
    margin-right: 4%;
    float: left;
  }


	
}

@media only screen and (max-width: 860px) {
	
	.cycle-prev, .cycle-next {
		background-size: 12% auto;
	}

	.slide h3 {
		display: none;
	}
	
	.slide .content {
		width: 26%;
	}
	
	.content-block {
		width: 40%;
		margin: 0 5%;
	}

	#subnavi ul li {
		width: 40%;
		margin: 4px 5% 20px 0;
		background-image: url('../../media/subnavi_aktiv_d.png');
		background-position: top left;
	}

}

/* Breakpoint bis  720px
------------------------------------------------------------------------------*/
@media only screen and (max-width: 720px) {
	.form-label-cell {
		width: 44%;
		min-width: 180px;
		max-width: 720px;
	}
  
	.form-field-cell {
		width: 54%;
		min-width: 180px;
		max-width: 720px;
	}

	#login-form .form-label-cell, 
	#login-form .form-field-cell {
		min-width: 0;
	}

	.klapp-wrapper .arrow {
		display: none;
		visibility: hidden;
	}

  .klapp-b .image {
    margin-top: 3px;
  }

  .klapp-b .image img {
  	_width: 60px;
  	height: 60px;
  }

	.klapp-b .fa {
		color: #6CC247;
	} 

	.klapp-wrapper .fa-caret-down {
		display: inline-block;
	} 

	.klapp-wrapper.open .fa-caret-up {
		display: inline-block;
	} 

	.klapp-wrapper.open .fa-caret-down {
		display: none;
	}

	#content .klapp-b .text > h1, 
	#subcontent .klapp-b .text > h1 {
	    padding: 18px 0;
	    __font-size: 34px;
	}

	.klapp-b .klapp-content {
		border: 1px solid red; /* ----- TODO ----- */
		background-color: red;
	}
	
	.video-outer {
		width: 100% !important;
	}
	
	/*
	.klapp-b svg {
 	   margin: 36px -1% 0 0;
	}
	
	
	#content .klapp-wrapper svg, 
	#subcontent .klapp-wrapper svg {
	    transform: scale(0.4);
	}*/

/*
	.klapp-wrapper .klapp-content {
	    margin: 0 33.3% 0 33.3%;
    	padding: 0 0 15px 0;
	}*/
	
	.icon-list.col-5 .separator {
		display: none;
	}

	.slide img {
    	width: 130%;
    	margin: 0 -15% 0 -15%;
	}
	
	.cycle-prev, 
	.cycle-next {
	    width: 18%;
	    background-size: 25% auto;
   }
   
   #content .klapp-wrapper .text > h1 {
		background-image: none;
   }
   
   
}


/*  Breakpoint bis 560px
------------------------------------------------------------------------------*/
@media only screen and (max-width: 560px) { 
	h1 {
		overflow: hidden;
		text-overflow: ellipsis;

    width: 100%;
    margin: 0%;
    background: none;
  }

    	#contentwhite h1 span,
	#contentgrey h1 span{
		padding: 0;
	}


	.slide h1 {
		font-size: 15px;
	}





	h2 {
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.form-label-cell {
		width: 100% !important;
	}

	.form-field-cell {
		width: 100% !important;
	}

	.submit-button {
		width: 100% !important;
		max-width: 560px;
	}

	#gbform {
		margin-top: -90px;
		height: 90px;
	}
	
	.klapp-b .image {
		display: none;
	}
	
	.content-block {
		float: none;
		width: 90%;
		margin: -22px 0 22px 0;
	}

/*
	#subnavi ul li {
		width: 40%;
		margin: 4px 5% 20px 0;
	}
*/

  #subnavi ul li {
  	float: none;
		width: 90%;
		margin: 0 auto;
	}

	#footleiste-links {
		width: 100%;
	}
  
	#footleiste-rechts {
		width: 100%;
		float: left;
		text-align: left;
	}
	
	.footnavicol {
    width: 100%;
    max-width: 100%;
    margin-right: 0;
    float: left;
  }



}


/*  Breakpoint bis 420px
------------------------------------------------------------------------------*/
@media only screen and (max-width: 420px) {

	.slide h1 {
		font-size: 12px;
	}

}