
/*
------------------------------------------------------------------------------
RESPONSIVE
------------------------------------------------------------------------------
*/

@media only screen and (max-width: 680px) {

	.wrapper
	{
		width: 400px;
	}

	h2,
	.content-element-facts h2
	{
		font-size: 23px;
		line-height: 30px;
	}

	h3
	{
		font-size:19px;
		line-height: 28px;
	}

	.content-element-keyvisual.big h1
	{
		font-size:45px;
		line-height: 55px;
	}
	.content-element-keyvisual.small h1,
	.content-element-start-slideshow .slideshow-element .info h1,
	.content-element-start-slideshow .slideshow-element .info h2
	{
		font-size:23px;
		line-height: 30px;
	}

	.content-element-video.width-66 p
	{
		font-family:"Metropolis regular";
		font-size: 15px;
		line-height: 24px;
	}

	.content-element-start-slideshow .slideshow-element .info .text
	{
		font-family:"Metropolis regular";
		font-size:17px;
		line-height: 26px;
	}

	.content-element-teaser .headline
	{
		font-family: "Metropolis bold";
		font-size: 29px;
		line-height: 36px;
		text-transform: uppercase;
		letter-spacing: 1.5px;
	}



	/*
	------------------------------------------------------------------------------
	HEADER
	------------------------------------------------------------------------------
	*/

	header
	{
		height: 60px;
	}
	header .wrapper
	{
		height: inherit;
	}

	header .logo
	{
		top: 10px;
	}

	header .navigation-button
	{
		top: 17px;
		left: 15px;
	}

	header nav.meta
	{
		position: absolute;
		z-index: 10;
		right: 0px;
		top: 10px;
	}

	header .leichteSprache .text,
	header nav.meta .divider.englischDivider,
	header nav.meta .leichteSprache .divider,
	header nav.meta a.share-button,
	header nav.meta .divider  {
		display:none;
	}

	header nav.meta .englischLink a {
		margin-right: 4px;
	}

	.navigation-overlay
	{
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;

		padding: 40px 20px;
	}

	.overlay-active .navigation-overlay
	{
		top: 60px;
		height: 100%;
	}
	.navigation-overlay
	{
		top: -1000px;
	}

	.navigation-overlay .main
	{
		position: relative;

		width: 360px;
    	margin-top: 20px;
    	margin-left: 0px;
	}

	.navigation-overlay .main > a {
		max-width: calc(100% - 30px);
    display: block;
	}

	.navigation-overlay .sub
	{
		width: 330px;
		max-height: 0px;
		position: relative;

		left: 0px;
		opacity: 0;
		visibility:hidden;

		margin: 0px 10px 0px 20px;
		overflow: hidden;
	}
	.navigation-overlay .main.open .sub
	{
		max-height: 400px;
		opacity: 1;
		visibility:visible;

		margin: 10px 10px 20px 20px;
	}

	.navigation-background
	{
		display: none;
	}

	.navigation-additional
	{
		display: none;
	}

	.navigation-overlay .main .hitarea
	{
		display: block;
		position: absolute;
		right:0px;
		top:0px;

		height: 20px;
		width: 20px;

		background: url(../image/sprite-sheet.svg);
		background-size: 338px 530px;
		background-position: -130px -115px;

		transition: transform 150ms ease;
		-webkit-transition: -webkit-transform 150ms ease;
	}

	.navigation-overlay .main.open .hitarea
	{
		transform: rotate(45deg);
		-webkit-transform: rotate(45deg);
	}




	/*
	------------------------------------------------------------------------------
	FOOTER
	------------------------------------------------------------------------------
	*/

	footer
	{
		height: auto;
	}

	footer .wrapper
	{
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;

		padding: 0px 15px;
	}

	footer .info
	{
		width: 320px;
	}

	footer .info p
	{
		margin-top: 10px;
	}
	footer .info img
	{
		width: 340px;
	}

	footer .service
	{
		margin: 40px 0px 0px 15px;
	}

	footer .social
	{
		margin: 40px 0px 0px 40px;
	}

	footer .social strong
	{
		margin-bottom: 10px;
	}

	footer .social a
	{
		display: inline-block;
	}

	footer .social a p
	{
		display: none;
	}




	/*
	------------------------------------------------------------------------------
	MAIN
	------------------------------------------------------------------------------
	*/

	main
	{
		padding-top: 61px;
	}




	/*
	------------------------------------------------------------------------------
	STRUCTURE-ELEMENT
	------------------------------------------------------------------------------
	*/

	.structure-element .content-element
	{
		float: none;
	}




	/*
	------------------------------------------------------------------------------
	STRUCTURE-ELEMENT-SINGLE.WHITE
	------------------------------------------------------------------------------
	*/

	.structure-element-single.white
	{
		width: 400px;

		padding: 20px 0px;
	}




	/*
	------------------------------------------------------------------------------
	STRUCTURE-ELEMENT-SINGLE.GREY
	------------------------------------------------------------------------------
	*/

	.structure-element-single.grey
	{
		width: 400px;

		padding: 20px 0px;
	}




	/*
	------------------------------------------------------------------------------
	STRUCTURE-ELEMENT-DOUBLE
	------------------------------------------------------------------------------
	*/

	.structure-element-double
	{
		width: 400px;
	}

	.structure-element-double .structure-item
	{
		width: 400px;
		float: none;
	}

	.structure-element-double .structure-item:nth-child(2)
	{
		margin-top: 30px;
	}

	.structure-element-double .structure-item .content-element:first-child
	{
		margin-top: 15px;
	}




	/*
	------------------------------------------------------------------------------
	STRUCTURE-ELEMENT-30-70
	------------------------------------------------------------------------------
	*/

	.structure-element-30-70
	{
		width: 400px;
	}

	.structure-element-30-70 .structure-item
	{
		width: 400px;
		float: none;
	}
	.structure-element-30-70 .structure-item:first-child
	{
		width: 400px;
	}
	.structure-element-30-70 .structure-item:nth-child(2)
	{
		margin-top: 30px;
	}

	.structure-element-30-70 .structure-item .content-element:first-child
	{
		margin-top: 15px;
	}




	/*
	------------------------------------------------------------------------------
	STRUCTURE-ELEMENT-70-30
	------------------------------------------------------------------------------
	*/

	.structure-element-70-30
	{
		width: 400px;
	}

	.structure-element-70-30 .structure-item
	{
		width: 400px;
		float: none;
	}
	.structure-element-70-30 .structure-item:first-child
	{
		width: 400px;
	}
	.structure-element-70-30 .structure-item:nth-child(2)
	{
		margin-top: 30px;
	}

	.structure-element-70-30 .structure-item .content-element:first-child
	{
		margin-top: 15px;
	}




	/*
	------------------------------------------------------------------------------
	STRUCTURE-ELEMENT-ACCORDION
	------------------------------------------------------------------------------
	*/

	.structure-element-accordion .structure-item,
	.structure-element-accordion .structure-element
	{
		width: 370px !important;
	}




	/*
	------------------------------------------------------------------------------
	STRUCTURE-ELEMENT-SLIDESHOW
	------------------------------------------------------------------------------
	*/

	.structure-element-slideshow.width-25 { width:370px; }
	.structure-element-slideshow.width-33 { width:370px; }
	.structure-element-slideshow.width-50 { width:370px; }
	.structure-element-slideshow.width-66 { width:370px; }
	.structure-element-slideshow.width-75 { width:370px; }
	.structure-element-slideshow.width-100 { width:370px; }

	.structure-element-slideshow.width-25.height-1 { height:329px; }
	.structure-element-slideshow.width-25.height-2 { height:370px; }
	.structure-element-slideshow.width-25.height-3 { height:699px; }
	.structure-element-slideshow.width-25.height-4 { height:781px; }

	.structure-element-slideshow.width-33.height-1 { height:240px; }
	.structure-element-slideshow.width-33.height-2 { height:270px; }
	.structure-element-slideshow.width-33.height-3 { height:510px; }
	.structure-element-slideshow.width-33.height-4 { height:570px; }

	.structure-element-slideshow.width-50.height-1 { height:156px; }
	.structure-element-slideshow.width-50.height-2 { height:175px; }
	.structure-element-slideshow.width-50.height-3 { height:331px; }
	.structure-element-slideshow.width-50.height-4 { height:370px; }

	.structure-element-slideshow.width-66.height-1 { height:115px; }
	.structure-element-slideshow.width-66.height-2 { height:130px; }
	.structure-element-slideshow.width-66.height-3 { height:245px; }
	.structure-element-slideshow.width-66.height-4 { height:274px; }

	.structure-element-slideshow.width-75.height-1 { height:102px; }
	.structure-element-slideshow.width-75.height-2 { height:115px; }
	.structure-element-slideshow.width-75.height-3 { height:216px; }
	.structure-element-slideshow.width-75.height-4 { height:242px; }



	/*
	------------------------------------------------------------------------------
	STRUCTURE-ELEMENT-GALLERY
	------------------------------------------------------------------------------
	*/

	.structure-element-gallery
	{
		width: 400px;
		height: auto !important;
	}
	.structure-element-gallery .content-element
	{
		position: relative;

		left:auto !important;
		top:auto !important;
	}



	/*
	------------------------------------------------------------------------------
	CONTENT-ELEMENT-CROSSHEADING
	------------------------------------------------------------------------------
	*/

	.content-element-crossheading
	{
		margin-top: 15px;
	}




	/*
	------------------------------------------------------------------------------
	CONTENT-ELEMENT-TEXT
	------------------------------------------------------------------------------
	*/

	.content-element-text{ width:370px; }
	.content-element-text.width-25 { width:370px; }
	.content-element-text.width-33 { width:370px; }
	.content-element-text.width-50 { width:370px; }
	.content-element-text.width-66 { width:370px; }

	.structure-element-70-30 .content-element-text,
	.structure-element-30-70 .content-element-text,
	.structure-element-50-50 .content-element-text
	{
		margin: 15px;
	}

	.content-element-text.textalign-left,
	.content-element-text.textalign-right
	{
		text-align: left;
	}




	/*
	------------------------------------------------------------------------------
	CONTENT-ELEMENT-IMAGE
	------------------------------------------------------------------------------
	*/

	.content-element-image.width-25 { width:370px; }
	.content-element-image.width-33 { width:370px; }
	.content-element-image.width-50 { width:370px; }
	.content-element-image.width-66 { width:370px; }
	.content-element-image.width-75 { width:370px; }
	.content-element-image.width-100 { width:370px; }

	.content-element-image { height:auto !important; }
	.content-element-image img { width: inherit; height: inherit; }

	.content-element-image .caption p
	{
		position: relative !important;
		top:5px;
	}

	.content-element-image .caption .right { width: auto; }
	.content-element-image .caption .left { width: auto; text-align: left; }



	/*
	------------------------------------------------------------------------------
	CONTENT-ELEMENT-TEASER
	------------------------------------------------------------------------------
	*/

	.content-element-teaser.width-25 { width:370px; }
	.content-element-teaser.width-33 { width:370px; }
	.content-element-teaser.width-50 { width:370px; }

	.content-element-teaser{ height:auto; }
	.content-element-teaser.minus-margin, .content-element-teaser.minus-margin-2
	{
		margin-top: 15px;
	}

	.content-element-teaser.width-33 .text { width:310px; }
	.content-element-teaser.width-50 .text { width:310px; }

	.content-element-teaser.width-25 .link { width:310px; }
	.content-element-teaser.width-33 .link { width:310px; }
	.content-element-teaser.width-50 .link { width:310px; }

	.content-element-teaser .text
	{
		bottom: 70px;
	}

	.content-element-teaser.height-4.width-50
	{
		width: 370px;
		height: 370px;
	}
	.content-element-teaser.height-3
	{
		height: 370px;
	}

	.content-element-teaser.minus-margin, .content-element-teaser.minus-margin-2
	{
		margin-top: 0px !important;
	}

	.content-element-teaser .image
	{
		left: 50px;
		width: 270px;
		height: auto;
	}



	/*
	------------------------------------------------------------------------------
	CONTENT-ELEMENT-TEASER-NEWS
	------------------------------------------------------------------------------
	*/

	.content-element-teaser-news
	{
		display: block;
	}

	.content-element-teaser-news.image-left
	{
		height: 510px !important;
		width: 370px !important;
	}

	.content-element-teaser-news.image-left .image
	{
		height: 270px !important;
		width: 370px !important;

		border-radius: 10px 10px 0px 0px;
	}

	.content-element-teaser-news.image-left img
	{
		display: block;

		height: 270px !important;
		width: 370px !important;

    	margin-left: 0px;
	}

	.content-element-teaser-news.image-left .info
	{
		display: block;

		width: 310px !important;
		margin:30px !important;
	}

	.content-element-teaser-news.image-left .link
	{
		width: 310px !important;
	}




	/*
	------------------------------------------------------------------------------
	CONTENT-ELEMENT-VIDEO
	------------------------------------------------------------------------------
	*/

	.content-element-video.width-66
	{
		height:205px;
		width:370px;
	}
	.content-element-video.width-66.title
	{
		height:205px;
	}
	.content-element-video.width-66 iframe
	{
		height:205px;
		width:inherit;
	}

	.content-element-video.width-66 p
	{
		padding: 5px 30px;
	}



	/*
	------------------------------------------------------------------------------
	CONTENT-ELEMENT-FACTS
	------------------------------------------------------------------------------
	*/

	.content-element-facts
	{
		margin:0px 15px;
	}

	.content-element-facts.width-50
	{
		width:370px;
	}
	.content-element-facts.width-50 .fact-element .headline
	{
		width: 370px;
	}
	.content-element-facts.width-50 .fact-element .text
	{
		width: 370px;
	}
	.content-element-facts.width-66
	{
		width:370px;
	}
	.content-element-facts.width-66 .fact-element .headline
	{
		width: 370px;
	}
	.content-element-facts.width-66 .fact-element .text
	{
		width: 370px;
	}



	/*
	------------------------------------------------------------------------------
	CONTENT-ELEMENT-KEYVISUAL
	------------------------------------------------------------------------------
	*/

	.content-element-keyvisual.big
	{
		height: 200px;
	}
	.content-element-keyvisual.small
	{
		height: 140px;
	}

	.content-element-keyvisual h1
	{
		left: 20px;
	}
	.content-element-keyvisual.big h1
	{
		top: 30px;
	}
	.content-element-keyvisual.small h1
	{
		top: 50px;
	}




	/*
	------------------------------------------------------------------------------
	CONTENT-ELEMENT-LINKBOX
	------------------------------------------------------------------------------
	*/

	.content-element-linkbox.minus-margin, .content-element-linkbox.minus-margin-2
	{
		margin-top: 0px !important;
	}
	.content-element-linkbox.width-33 { width:370px; }
	.content-element-linkbox.width-50 { width:370px; }
	.content-element-linkbox.width-66 { width:370px; }

	.content-element-linkbox.fixed-height
	{
		height: auto;
	}
	.content-element-linkbox .link p
	{
		width: 290px;
		word-wrap: break-word;
	}



	/*
	------------------------------------------------------------------------------
	CONTENT-ELEMENT-START-SLIDESHOW
	------------------------------------------------------------------------------
	*/

	.content-element-start-slideshow
	{
		height: 400px;
	}

	.content-element-start-slideshow .slideshow-element .info
	{
		top: 60px;

		width: 360px;

		margin-left: -180px;
	}
	.content-element-start-slideshow .slideshow-element .info h1
	{
		text-shadow: 0px 0px 5px rgba(0,0,0,1);
	}

	.content-element-start-slideshow .slideshow-element .info .text
	{
		margin-top: 20px;
		text-shadow: 0px 0px 5px rgba(0,0,0,1);
	}

	.content-element-start-slideshow .slideshow-element .info .button
	{
		margin-top: 60px;
	}

	.content-element-start-slideshow .controller .button
	{
		display: none;
	}

	.content-element-start-slideshow .slideshow-elements .slideshow-element.dark-image .image
	{
		opacity: 0.6;
	}



	/*
	------------------------------------------------------------------------------
	CONTENT-ELEMENT-FORM
	------------------------------------------------------------------------------
	*/

	.content-element-form
	{
		width:370px;

		margin: 30px auto;
	}

	.content-element-form .form-item input.width-33 { width:370px; }
	.content-element-form .form-item input.width-50 { width:370px; }
	.content-element-form .form-item input.width-66 { width:370px; }
	.content-element-form .form-item input.width-100 { width:370px; }
	.content-element-form .form-item textarea { width:370px; }

	.content-element-form .form-item-input
	{
		float:none;
		margin-top: 10px;
	}
	.content-element-form .form-item-input:first-child
	{
		margin-top: 0px;
	}




	/*
	------------------------------------------------------------------------------
	CONTENT-ELEMENT-BREADCRUMB
	------------------------------------------------------------------------------
	*/


	.content-element-breadcrumb
	{
		margin: 15px;
	}




	/*
	------------------------------------------------------------------------------
	CONTENT-ELEMENT-MAP
	------------------------------------------------------------------------------
	*/


	.content-element-map
	{
		width: 370px;

		margin: 0 auto;
	}

	.content-element-map .frame
	{
		width: 390px;
	}

	/*
	------------------------------------------------------------------------------
	Sonstiges
	------------------------------------------------------------------------------
	*/

	a[name] {
		padding-top: 70px;
		margin-top: -70px;
	}

	.cc-banner .cc-message {
		margin-right:0;
	}

}
