/* mulish-300 - latin */
@font-face {
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 300;
  src: url('fonts/mulish-v12-latin-300.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('fonts/mulish-v12-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/mulish-v12-latin-300.woff2') format('woff2'), /* Super Modern Browsers */
       url('fonts/mulish-v12-latin-300.woff') format('woff'), /* Modern Browsers */
       url('fonts/mulish-v12-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */
       url('fonts/mulish-v12-latin-300.svg#Mulish') format('svg'); /* Legacy iOS */
}

/* mulish-regular - latin */
@font-face {
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/mulish-v12-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('fonts/mulish-v12-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/mulish-v12-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('fonts/mulish-v12-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('fonts/mulish-v12-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('fonts/mulish-v12-latin-regular.svg#Mulish') format('svg'); /* Legacy iOS */
}

/* mulish-300italic - latin */
@font-face {
  font-family: 'Mulish';
  font-style: italic;
  font-weight: 300;
  src: url('fonts/mulish-v12-latin-300italic.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('fonts/mulish-v12-latin-300italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/mulish-v12-latin-300italic.woff2') format('woff2'), /* Super Modern Browsers */
       url('fonts/mulish-v12-latin-300italic.woff') format('woff'), /* Modern Browsers */
       url('fonts/mulish-v12-latin-300italic.ttf') format('truetype'), /* Safari, Android, iOS */
       url('fonts/mulish-v12-latin-300italic.svg#Mulish') format('svg'); /* Legacy iOS */
}

body { padding: 0; margin: 0; background-color: #fff; font-family: 'Mulish', sans-serif; font-size: 18px; line-height: 30px; font-weight: 300; color: #312b2e; text-decoration: none; text-align: left; }
h1 { padding: 0; margin: 0; font-family: 'Mulish', sans-serif; font-size: 40px; line-height: 50px; font-weight: 300; color: #312b2e; letter-spacing: -0,3; }
h2 { padding: 0; margin: 0 0 31px 0; font-family: 'Mulish', sans-serif; font-size: 30px; line-height: 40px; font-weight: 300; color: #312b2e; }
h3 { padding: 0; margin: 6px 0 26px 0; font-family: 'Mulish', sans-serif; font-size: 24px; line-height: 34px; font-weight: 300; color: #312b2e; }
h4 { padding: 0; margin: 20px 0; font-family: 'Mulish', sans-serif; font-size: 20px; line-height: 30px; font-weight: 400; color: #312b2e; }
a { color: #312b2e; text-decoration: underline; }
p { padding: 0; margin: 0 0 22px 0; }
hr { clear: both; height: 1px; border: none; margin: 20px 0 40px 0; border-bottom: 1px solid #cbcacb; }
ul, ol { margin: 0 0 22px 0; padding: 0 0 0 17px; }
.rosa { color: #b3575e; }
.clearer { clear: both; }
.contentclearer { height: 22px; clear: both; }
.h4clearer { height: 70px; }
#mobilebutton { display: none; }

#top { width: 1160px; padding: 0; margin-left: auto; margin-right: auto; text-align: left; }
#hide { position: absolute; margin: 240px 0 0 310px; z-index: 100; }
#logo { float: left; margin: 52px 0 0 28px; font-size: 18px; line-height: 45px; letter-spacing: -.03em; text-align: center; }
#logo span { font-size: 50px; letter-spacing: -.03em; }
#logo a { text-decoration: none; }
#navi { float: right; margin: 97px 48px 35px 0; }
#navi ul { list-style-type: none; margin: 0; padding: 0; }
#navi .naviitem { float: left; margin: 0 0 0 23px; padding: 8px 0 7px 0; }
#navi .naviitem a { text-decoration: none; }
#navi .naviitem a:hover { color: #b3575e; }
#navi .active { background: #f8e0de; padding: 8px 20px 7px 20px; }
#navi .naviitem ul { position: absolute; z-index: 100; top: 110px; padding: 42px 0 0 0; margin: 0 0 0 -20px; left: -999em; text-align: left; }
#navi .naviitem ul li { padding: 8px 20px 7px 20px; margin: 0 0 1px 0; background: #fff; border-bottom: 1px solid #f8e0de; }
#navi .naviitem ul li a.subactive, #navi .naviitem ul li a:hover { color: #b3575e; }
#navi .naviitem ul li a, #navi .naviitem ul ul li a { color: #312b2e; }
#navi ul li:hover ul ul, #navi ul li:hover ul ul ul, #navi ul li.sfhover ul ul, #navi ul li.sfhover ul ul ul { left: -999em; }
#navi ul li:hover ul, #navi ul li li:hover ul, #navi ul li li li:hover ul, #navi ul li.sfhover ul, #navi ul li li.sfhover ul, #navi ul li li li.sfhover ul { left: auto; }
#navi select { display: none; }

#header { position: relative; width: 1160px; height: 641px; padding: 0; margin-left: auto; margin-right: auto; background: url(img/header.jpg) no-repeat; text-align: center; }
#impressionen { position: relative; width: 1160px; height: 641px; padding: 0; margin-left: auto; margin-right: auto; background: url(img/impressionen.jpg) no-repeat center; text-align: center; }
#leistungen { position: relative; width: 1160px; height: 641px; padding: 0; margin-left: auto; margin-right: auto; background: url(img/leistungen.jpg) no-repeat top; text-align: center; }
.short { height: 290px!important; }
.language { position: absolute; right: 30px; background: #5c97ab; padding: 8px 17px 7px 17px; font-size: 13px; font-weight: 400; text-transform: uppercase; letter-spacing: .1em; }
.language a { color: #fff; text-decoration: none; }
.portraet, .team { position: absolute; width: 100%; bottom: 90px; }
.short .portraet, .short .team { bottom: 0; }
.short .portraet img { width: 300px; height: auto; }
.short .team img { width: 610px; height: auto; }
.header { position: absolute; left: 28px; bottom: -92px; width: 1102px; background: #f8e0de; padding: 43px 0 23px 0; }
.short .header { bottom: -24px; padding: 12px 0; }

#content { width: 1064px; padding: 167px 0 90px 0; margin-left: auto; margin-right: auto; border-bottom: 1px solid #cbcacb; text-align: left; }
.sub { padding: 99px 0 90px 0!important; }
#content span { font-size: 22px; margin: 0 6px; }
#content span.tab { display: inline-block; width: 145px; font-size: 18px; margin: 0; font-weight: 400; }
.text { float: left; width: 627px; margin: 0 88px 0 0; }
#textlist { margin: 0 0 22px 0; }
.textlistitem { padding: 0 0 0 27px; background: url(img/arrow.png) no-repeat left; }
#textlist span { padding: 0 0 0 27px; font-size: 18px; margin: 0; }
.sidebar { float: left; width: 349px; }
#list {  }
.listitem { width: 286px; border-bottom: 1px solid #cbcacb; padding: 5px 0 6px 0; }
.listitem a { padding: 0 0 0 27px; background: url(img/arrow.png) no-repeat left; color: #b3575e; text-decoration: none; }
.textblock { float: left; width: 502px; }
.textblockfour { float: left; width: 236px; margin: 0 30px 0 0; }
.textblockfour h4 { margin: 20px 0 6px 0; }
.textblockfour p { line-height: 24px; }
#content img { max-width: 100%; height: auto; }
#content .imgright { float: right; margin: 0 0 20px 20px; }
#content .last { margin: 0 30px 0 30px; }
.gallery { float: left; width: 324px; margin: 0 30px 30px 0; }
.gallery img { max-width: 100%; height: auto; }

#teasercontainer { width: 100%; padding: 0; margin: 0; background: #f8e0de url(img/teaser.gif) repeat-x top; }
#teaser { width: 1100px; padding: 43px 0 32px 0; margin-left: auto; margin-right: auto; background: #fff; text-align: left; }
#teaser h3 { color: #b3575e; }
.column { float: left; width: 366px; }
.column img { margin-top: 10px; }
.column p { margin: 0 0 22px 0; }
.center { text-align: center; }
.center p, .center h3 { margin-left: 40px; margin-right: 40px; }
.middle p, .middle h3 { margin-left: 20px; margin-right: 40px; }
#teaser .last p, #teaser .last h3 { margin-right: 20px; }
.column span { display: inline-block; width: 60px; }
.button { width: auto!important; display: inline-block; background: #f8e0de; padding: 8px 20px 7px 20px; }
.button a { text-decoration: none; }

#footercontainer { width: 100%; padding: 0; margin: 0; background: #f8e0de; }
#footer { width: 1100px; padding: 58px 0 32px 0; margin-left: auto; margin-right: auto; text-align: left; background: url(img/footer.png) repeat-x; }
#footer .center { position: relative; }
#footer .center p { margin-top: 120px; }
.jameda { position: absolute; top: -58px; left: 139px; }

/* Responsive */

@media only screen and (max-width: 1160px) {
#mobilebutton { display: block; position: fixed; z-index: 80; bottom: 0; width: 100%; background: #5c97ab; text-align: center; padding: 5px 0; }
#top { width: 100%; margin: 0; }
#hide { margin: 187px 0 0 25%; }
#hide img { max-width: 100%; height: auto; }
#logo { margin: 42px 0 0 15px; }
#navi { margin: 87px 15px 35px 0; }
#header { width: 100%; margin: 0; }
#impressionen { width: 100%; margin: 0; }
#leistungen { width: 100%; margin: 0; }
.language { right: 0; }
.header { left: 2%; width: 96%; }
.header h1, .header h3 { padding: 0 15px; }
#content { width: 96%; margin: 0 2%; }
.text { width: 66%; margin: 0 4% 0 0; }
.sidebar { width: 30%; }
.listitem { width: 100%; }
.textblock { width: 48%; margin: 0 4% 0 0; }
.textblockfour { width: 25%; margin: 0; }
.textblockfour img { max-width: 90%!important; }
#content .last { margin: 0; }
.gallery { width: 29%; margin: 0 4% 30px 0; }
#teaser { width: 96%; margin: 0; padding: 43px 2% 32px 2%; }
#teaser img { max-width: 100%; height: auto; }
.column { width: 30%; margin: 0 4% 0 0; }
.center { text-align: left; }
.center p, .center h3, .middle p, .middle h3, #teaser .last p, #teaser .last h3 { margin-left: 0; margin-right: 0; }
.last { margin: 0; }
#footer { width: 96%; margin: 0; padding: 58px 2% 32px 2%; }
.jameda { left: 0; }
iframe { max-width: 100%; }
}

@media only screen and (max-width: 995px) {
#hide { margin: 187px 0 0 15%; }
#logo { float: none; margin: 30px 15px 0 15px; }
#navi { float: none; width: 100%; margin: 15px 0 0 0; }
#navi .naviitem { display: none; }
#navi select { width: 100%; display: block; text-align: center; background: #f8e0de url(data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0Ljk1IDEwIj48ZGVmcz48c3R5bGU+LmNscy0xe2ZpbGw6I2ZmZjt9LmNscy0ye2ZpbGw6IzQ0NDt9PC9zdHlsZT48L2RlZnM+PHRpdGxlPmFycm93czwvdGl0bGU+PHJlY3QgY2xhc3M9ImNscy0xIiB3aWR0aD0iNC45NSIgaGVpZ2h0PSIxMCIvPjxwb2x5Z29uIGNsYXNzPSJjbHMtMiIgcG9pbnRzPSIxLjQxIDQuNjcgMi40OCAzLjE4IDMuNTQgNC42NyAxLjQxIDQuNjciLz48cG9seWdvbiBjbGFzcz0iY2xzLTIiIHBvaW50cz0iMy41NCA1LjMzIDIuNDggNi44MiAxLjQxIDUuMzMgMy41NCA1LjMzIi8+PC9zdmc+) no-repeat 100% 50%; padding: 10px 15px; border: 0; font-family: 'Mulish', sans-serif; font-size: 20px; line-height: 30px; font-weight: 300; color: #312b2e; text-transform: none; -moz-appearance: none; -webkit-appearance: none; appearance: none; }
#navi select option { padding: 10px 0; }
#header { height: 380px; background-size: 100%; }
.portraet img { width: 260px; height: auto; }
.header { bottom: -52px; padding: 23px 0 3px 0; }
#content { padding: 100px 0 40px 0; }
.sub { padding: 60px 0 40px 0!important; }
}

@media only screen and (max-width: 802px) {
h1 { font-size: 30px; line-height: 40px; }
h2 { font-size: 24px; line-height: 34px; }
h3 { font-size: 20px; line-height: 30px; }
.h4clearer { display: none; }
#hide { margin: 187px 0 0 10%; }
.header { bottom: -38px; }
#leistungen, #impressionen { height: 180px!important; background-size: 100%; }
#content { padding: 80px 0 40px 0; border-bottom: none; }
.sub { border-bottom: 1px solid #cbcacb!important; }
#content span.tab { display: block; width: 100%; }
.text { float: none; width: 100%; margin: 0 0 50px 0; }
.sidebar { float: none; width: 100%; }
.textblock { float: none; width: 100%; }
.textblockfour { width: 50%; }
.textblockfour img { max-width: 96%!important; }
.button { margin: 0 0 20px 0; }
.gallery { width: 46%; margin: 0 4% 30px 0; }
.column { float: none; width: 100%; margin: 0; }
.column h3 { margin: 6px 0; }
.jameda { top: -178px; }
}

@media only screen and (max-width: 614px) {
#hide img { max-width: 90%; }
#header { height: 300px; }
.portraet img { width: 180px; height: auto; }
.header { bottom: -78px; }
#leistungen, #impressionen { background-size: 140%; }
#content { padding: 120px 0 40px 0; }
}

@media only screen and (max-width: 479px) {
#header { background-size: 140%; }
#leistungen, #impressionen { height: 100px!important; background-size: 100%; }
.header { left: 0; width: 100%; }
}

@media only screen and (max-width: 455px) {
#logo { font-size: 14px; line-height: 38px; margin: 25px 15px 0 15px; }
#logo span { font-size: 38px; }
.header { bottom: -108px; }
#content { padding: 140px 0 40px 0; }
}

@media only screen and (max-width: 350px) {
#logo { font-size: 12px; line-height: 32px; }
#logo span { font-size: 33px; }
.header { bottom: -148px; }
#content { padding: 180px 0 40px 0; }
}