/* #### stylesheet für Onepager - magenta Kommunikation, Design und Neue Medien GmbH & Co KG 2015 #### */

/* +-+-+-+-+ HTML-Elemente +-+-+-+-+ */
body { background: #000; color: #fff; font-family: Verdana; margin: 0; }
li { list-style-type: square; font-size: 17px; line-height: 27px; }
input, textarea { width: /*400px*/100%; font-size: 18px; border: 0; box-sizing: border-box; margin: 0 50px 25px 0; padding: 10px 15px; font-weight: 400; font-family: Verdana; display: block; }
input.grey, textarea.grey { color: #c2c2c2; }
strong { font-weight: 600; }
/* +-+-+-+-+ Wrapper & Boxen +-+-+-+-+ */
.wrap_all { margin: auto; /*max-width: 1300px;*/ overflow: hidden; padding: 0; boder: 0; }
.content_box { background: none repeat scroll 0 0 #5b6e7b; background-color: rgba(0, 0, 100, 0.2); margin: 50px 0; max-width: 1100px; min-width: 920px; }
.content_box.middle { margin: 10px 0; }
.content_box.top { margin-bottom: 10px; }
.content_box.bottom { margin-top: 10px; }
.content_box.single { margin-bottom: 0; color:#888888; background-color: rgba(255, 255, 255, 0.85);}
.content_box.single a {color:#888888;}
.content_box a.orange {color:#f58a22;}
.content_main { height: auto; width: 100%; font-size: 17px; /*font-weight: 100;*/ display: table; }
.content_main a { color: #888888; font-weight: bold; Text-decoration: none; }
.content_main a:hover { Text-decoration: underline; }
.content_main h1 { font-family: Verdana; font-size: 32px; font-weight: 300; line-height: 50px; margin: 58px 85px; display: table-caption; }
.content_main h2 { font-family: Verdana; font-size: 24px; font-weight: 600; }
.content_main h3 { font-family: Verdana; font-size: 24px; font-weight: 400; margin-left: -20px; }
.content_main p { line-height: 25px; margin-top: 0; }
.content_main div h1 { color: #f58a22; display: block; line-height: 40px; margin: 0 0 1em; }
.content_main div h2 {
  color: #f58a22;
  display: block;
  font-family: Verdana;
  font-size: 17px;
  line-height: 20px;
  margin: 20px 0 0;
}
.content_main div h2.trigger {
  border-bottom: 1px solid;
  cursor: pointer;
  margin-bottom: 1em;
  padding-bottom: 1em;
}
.textlinkicon {
  background: url("../img/linkicon_orange.svg") no-repeat;
	background-size: contain;
  display: inline-block;
  height: 13px;
  margin-left: 6px;
  width: 21px;
}
.open {
  background: url("../img/icon-program-arrow.png") no-repeat;
  display: inline-block;
  height: 13px;
  margin-left: 6px;
  width: 21px;
}
#kontakt .content_main { background-color: #c2c2c2; margin: 44px; width: calc(100% - 88px); }
#kontakt .content_rechts p { /*color: #000;*/ font-family: Verdana; font-weight: 300; }
#kontakt .content_rechts a { /*color: #000;*/ }
.content_rechts { display: table-cell; /*padding: 50px 85px 50px 25px;*/padding: 42px 42px 42px 21px; width: 50%; vertical-align: top; }
.content_rechts img { margin: 0 75px 75px; }
.content_links { display: table-cell; /*padding: 50px 25px 50px 85px;*/padding: 42px 21px 42px 42px; width: 50%; vertical-align: top; }
.portrait {
  padding: 42px 0 0 0;
  vertical-align: top;
}
.content_links.portrait > img {
  display: block;
  width: 100%;
}
.no_padding { padding: 50px 0; }
.no_right_padding { padding-right: 0; }
.spacer { height: 0px; display: block; width: auto; margin-top: -1px; }
.small_spacer { height: 75px; display: block; width: auto; }
.clearer { clear: both; float: none; height: 1px; }
/* +-+-+-+-+ Header & Navigation +-+-+-+-+ */
nav { position: fixed; top: 0; left: 0; width: 100%; height: 100px; background: #ffffff; z-index: 500; display: table; /* opacity:.98; */ /*box-shadow: 0px 10px 10px rgba(0,0,0,.5);*/box-shadow: 0 15px 50px rgba(0, 0, 0, 0.25); }
.content_header { width: auto; background: #f58a22; color: #fff; padding: 15px 22px; font-size: 17px; text-align: center; }
.content_header h1 { font-size: 24px; font-weight: normal; letter-spacing: 2px; margin: 0; /*font-family:eurostyle-bold;*/ text-shadow: 0 0 5px #888888; text-transform: uppercase; }
.logo, .logo_imp { background: url(../img/logo_header.png) no-repeat center; width: 370px; height: 93px; display: table-cell; vertical-align: middle; cursor: pointer; }
.logo.footer { height: 100px; }
.nav_link { color: #f58a22; display: inline-block; /*font-family: Verdana;*/ letter-spacing: 2px; margin: 30px 5px; text-decoration: none; text-transform: uppercase; }
.nav_link:hover { color: #888888; }
.nav_link_wrapper { float: right; display: table-cell; font-family: Verdana; margin-right: 50px; }
#impressum, #datenschutz {font-size:0.75em;}

.nav_mobile { display: none; }
/* +-+-+-+-+ Footer +-+-+-+-+ */
footer { width: 100%; height: 100px; background: /*#00354d*/ #fff; /*display: table;*/ margin: 0; border: 0; }
footer a { color: #fff; display: inline-block; margin: 20px 0; font-weight: 300; font-size: 22px; text-decoration: none; font-weight: bold; line-height: 39px; }
footer a:before { content: ""; display: inline-block; background: url(../img/pfeil_weiss.png); width: 17px; height: 12px; margin-right: 10px; transition: margin .5s; }
.content_footer { width: auto; background: #f4e7d9; color: #e20813; padding: 20px 72px 10px; font-size: 17px; }
.footer_statement { width: auto; height: 75px; background: url(../img/underline.png) no-repeat center center; background-size: contain; }
.content_footer a { font-size: 22px; color: #00354d; text-decoration: none; font-weight: bold; line-height: 39px; }
.content_footer a:before { content: ""; display: inline-block; background: url(../img/pfeil_rot.png); width: 17px; height: 13px; margin-right: 10px; transition: margin .5s; }
.content_footer a:hover:before, footer a:hover:before { margin-left: 5px; margin-right: 5px; transition: margin 0s; }
.telefon { display: none; }
.map { margin-bottom: -4px; }
/* +-+-+-+-+ Stempel Telefonnummer +-+-+-+-+ */
.wrapper_stempel_links { display: block; float: left; margin-top: 100px; margin-left: 80px; overflow: hidden; width: 400px; }
.wrapper_stempel_rechts { display: block; float: right; /*margin-top: 100px;*/ overflow: hidden; width: 500px; }
.stempel { background: url(../img/logo.png) no-repeat center center; width: 400px; height: 162px; position: relative; left: 0px; }
.margin_110 { margin-top: 110px; }
.stempel.inset { margin-left: 85px; }
.unterschrift { background: url("../img/unterschrift.png") no-repeat 50px top; height: 170px; padding-top: 15px; width: 100%; }
.name_titel { padding-top: 140px; margin-left: 140px; }
/* +-+-+-+-+ Hintergrund +-+-+-+-+ */
#bg_slider1 { position: fixed; width: 100%; overflow: hidden; top: 0; left: 0; padding: 0; margin: 0; border: 0; z-index: -1; }
#bg_slider1 img { width: 100%; }
.hd_text { max-width: 80%; height: auto; }
/* +-+-+-+-+ Fokus +-+-+-+-+ */
.whitebox { background: /*#f4e7d9*/#fff; color: #888888; /*width: 35%;*/ margin: 44px; padding: 42px; box-sizing: border-box; position: relative; width: 50%; }
.whitebox.top { margin-bottom: 0; }
.whitebox.left { /*padding-right: 160px;*/ }
.whitebox.right { /*padding-left: 160px;*/ float: right; }
.whitebox.wide img { width: 450px; height: 300px; }
.whitebox.full { margin-top: 0; margin-bottom: 0; }
.whitebox.bottom { margin-top: 0px; }
.whitebox h3 { margin-left: 0px; }
.whitebox p { font-size: 17px; }
.bild_links { margin: 44px; }
.bild_rechts { float: right; margin: 44px; }

/* +-+-+-+-+ Formular +-+-+-+-+ */

.submit_button { background: none repeat scroll 0 0 rgba(0, 0, 0, 0); border: 1px solid #fff; color: #fff; cursor: pointer; font-family: Verdana; font-size: 26px; font-weight: 400; letter-spacing: 2px; margin-bottom: 0; margin-top: 25px; padding: 15px; text-shadow: 0 0 5px #888888; text-transform: uppercase; /*width: 430px;*/ }
.submit_button:hover { background: rgba(255, 255, 255, 0.5); /*color: #00354d; border: #f4e7d9 solid 3px;*/ }
.mistake { background: #888888; }
input.captcha { display: inline-block; float: right; margin: -2px 0 20px; width: calc(100% - 150px); }

/* +-+-+-+-+ Misc +-+-+-+-+ */
.red { color: #888888; }
.superspacer { height: 800px; width: 100%; color: #fff; font-size: 40px; padding-top: 200px; text-align: center; }
.headline { height: 800px; width: 100%; color: #fff; font-size: 40px; padding-top: 150px; text-align: center; position: absolute; top: 0px; left: 0px; opacity: 1; transition: opacity 2s; }
.headline { background: url(../img/big_logo.png) no-repeat 50% 60%; }
.fadeOut { opacity: 0; }

.bild {
  height: auto;
  left: calc(-100% + 88px);
  max-width: 418px;
  position: absolute;
  top: 0;
  width: calc(100% - 44px);
}
.left .bild { left: calc(100% + 44px); }
@media screen and (max-width: 1099px) {
	.bild {
		width: calc(100% - 132px);
	}
}
.bild > img {
  display: block;
  height: auto;
  width: 100%;
}

/* #### tablets und kleine displays #### */
@media screen and (max-width: 1024px) {
/* +-+-+-+-+ HTML-Elemente +-+-+-+-+ */
nav { display: none; }
/*form { margin-top: 40px; }*/
input, textarea {
  margin: 0 0 25px 0;
  /*width: 400px;*/
}
/* +-+-+-+-+ Wrapper & Boxen +-+-+-+-+ */
.content_box { max-width: none; min-width: 0; width: 100%; }
.content_main { /*display: block;*/ padding: 35px 0; }
.content_main.mob_no_padding { padding: 0; }
.content_links, .content_rechts { /*display: block;*/ margin: auto; /*padding: 0;*/ /*width: 75%;*/ }
.content_rechts img {
  height: auto;
  max-width: 291px;
  width: 100%;
}
.content_main h1 { display: block; }
#kontakt .content_links {
  min-width: 260px;
}
/* +-+-+-+-+ Stempel Telefonnummer +-+-+-+-+ */
.wrapper_stempel_links, .wrapper_stempel_rechts, .hl_spacer, .stempel { display: none; }
/* +-+-+-+-+ Fokus +-+-+-+-+ */	
.whitebox.right { float: none; margin-left: auto; }
.whitebox.wide img { width: 270px; height: 180px; }
/* +-+-+-+-+ Misc +-+-+-+-+ */
.superspacer { /*width: 300px;*/ overflow: hidden; }
/* +-+-+-+-+ Inhalte +-+-+-+-+ */	
.certificate_wrapper { padding: 0; }
.certificate_elmnt { display: inline-block; font-size: 20px; height: auto; line-height: 22px; text-align: center; width: 32%; padding: 0; }
/* +-+-+-+-+ Formular +-+-+-+-+ */
.check { display: inline; }
.datenschutz { max-width: 450px; width: auto; }
/* +-+-+-+-+ Header & Navigation +-+-+-+-+ */
.nav_mobile { display: block; position: fixed; top: 0; left: 0; width: 100%; height: 100px; z-index: 500; /*box-shadow: 0px 10px 10px rgba(0,0,0,.5);*/box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25); background: url(../img/3bars.png) no-repeat /*#00354d*/ #ffffff; background-position: 95% 50%; }
.logo { background: url(../img/logo_header.png) no-repeat center; width: 370px; height: 88px; padding-top:10px;}
#nav_container { display: none; position: fixed; top: 100px; left: 0; width: 100%; background: /*#00354d*/ #f58a22; /*box-shadow: 0px 10px 10px rgba(0,0,0,.5);*/box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5); cursor: pointer; }
#nav_container a { display: block; border-top: solid 1px #fff; line-height: none; width: 100%; /*padding: 15px;*/ margin: 0; padding: 15px 15px 15px 30px; box-sizing: border-box; }
.nav_link { color: #fff; }
.nav_link:hover { color: #888888; }
#impressum {font-size:1em;}
/* +-+-+-+-+ Hintergrund +-+-+-+-+ */
.headline { background-size: 90%; }
#bg_slider1 { top: 77px; }

}

/* #### smartphones #### */
@media screen and (max-width: 640px) {
/* +-+-+-+-+ HTML-Elemente +-+-+-+-+ */
iframe { height: 200px; width: 100%; }
form { margin-top: 0; }
/* +-+-+-+-+ Formular +-+-+-+-+ */
.submit_button { margin-bottom: 25px; }
.datenschutz { max-width: 90%; width: auto; }
input, textarea { margin: 0 0 25px; padding: 10px 0 10px 15px; /*width: 96%;*/ }
.content_main { /*display: block;*/ padding: 35px 0; }
.content_links, .content_rechts { display: block; margin: auto; padding: 0; /*width: 75%;*/ }
.content_links {
  margin-bottom: 25px;
}
#kontakt .content_main {
  margin: 20px;
  width: calc(100% - 40px);
}
#kontakt .content_links {
  min-width: auto;
}
/* +-+-+-+-+ Wrapper & Boxen +-+-+-+-+ */
.content_main h1 { font-size: 22px; line-height: 28px; margin: 0 20px 35px; }
.content_main h2 { font-size: 25px; }
.content_links, .content_rechts { width: 90%; }
/* +-+-+-+-+ Fokus +-+-+-+-+ */		
.whitebox.left, .whitebox.right { padding: 35px 20px; margin: 20px; }
.whitebox img { display: block; position: inherit; left: 0; float: none; margin: auto; }
.whitebox { width: auto; }
/* +-+-+-+-+ Inhalte +-+-+-+-+ */
.ref_wrapper { padding: 35px; ; margin: 0; font-size: 19px; line-height: 24px; }
.ref_item:after { height: 2px; margin: 2px 2px 4px 5px; width: 2px; }
.certificate_elmnt { display: block; font-size: 17px; height: auto; line-height: 19px; padding: 0; text-align: center; width: 100%; }
.ref_img { margin: 20px auto; }
.ref_text { margin: 0 30px 35px; }
.ref_item { margin-right: 0; margin-left: 10px; display: block; }
.ref_item:after { display: none; }
.ref_item:before { display: inline-block; }
/* +-+-+-+-+ Footer +-+-+-+-+ */
.content_footer { font-size: 15px; padding: 10px 20px 5px; display: block; }
.content_footer a, footer a { font-size: 19px; }
/* +-+-+-+-+ Header & Navigation +-+-+-+-+ */
.nav_mobile { background: url("../img/3bars.png") no-repeat scroll 95% 50% / auto 50% /*#00354d*/ #fff; height: 60px; cursor: pointer; }
#nav_container { top: 60px; }
#nav_container a { padding: 10px 10px 10px 25px; }
.logo, .logo.footer {
    background-position: 17px 5px;
    background-size: 250px;
    height: 50px; 
    width: 250px;
}
footer { height: 60px; }
.nav_link_wrapper { margin: auto; float: none }
/* +-+-+-+-+ Hintergrund +-+-+-+-+ */
#bg_slider1 { top: 40px; }

.headline { background-size: contain; padding-top: 100px; }
.bild, .left .bild {
  left: 0;
  margin-bottom: 1em;
  position: relative;
  width: /*50%*/auto;
}
.content_links.portrait > img, .bild > img {
  margin: 0;
  max-width: 240px;
  width: 100%;
}

}

@media screen and (max-height: 740px) {
/* +-+-+-+-+ Hintergrund +-+-+-+-+ */
.headline img { display: none; }
}

.impressum h1 {
    font-size: 20px;
}
.impressum .content_box.single {
    margin-bottom: 50px;
}
@media screen and (max-width: 359px) {
    .impressum h1 {
        font-size: 17px;
    }
}