/* titillium-web-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Titillium Web';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/titillium-web-v17-latin-regular.eot'); /* IE9 Compat Modes */
  src: url('../fonts/titillium-web-v17-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/titillium-web-v17-latin-regular.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('../fonts/titillium-web-v17-latin-regular.woff') format('woff'), /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+, iOS 5+ */
       url('../fonts/titillium-web-v17-latin-regular.ttf') format('truetype'), /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
       url('../fonts/titillium-web-v17-latin-regular.svg#TitilliumWeb') format('svg'); /* Legacy iOS */
}

/* roboto-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/roboto-v30-latin-regular.eot'); /* IE9 Compat Modes */
  src: url('../fonts/roboto-v30-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/roboto-v30-latin-regular.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('../fonts/roboto-v30-latin-regular.woff') format('woff'), /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+, iOS 5+ */
       url('../fonts/roboto-v30-latin-regular.ttf') format('truetype'), /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
       url('../fonts/roboto-v30-latin-regular.svg#Roboto') format('svg'); /* Legacy iOS */
}


html {width:100%; margin:0; padding:0;}
body {margin:0; padding:0; font-family:'Roboto',Arial,sans-serif; font-size:16px; width:100%; min-width:900px; color:#39476A; background-color:#fff; text-align:center;}
div,* {box-sizing:border-box;}

.clear {clear:both; height:1px; width:100%; overflow:hidden;}
.marked {color:#c00;}
hr {border:none; border-top:2px #ccc solid; color:#fff; background-color:#fff; height:1px; margin:30px 0 0;}
a {color:#39476A;}

#headerOuter {position:fixed; height:55px; width:100%; z-index:25; color:#39476A; background-color:#fff; border-bottom:3px #39476A solid; overflow:hidden;}
#header {position:relative; width:auto; max-width:1680px; margin:0 auto; text-align:right;}
#logo {position:absolute; top:14px; left:15px;}
#headerAddress {position:absolute; top:-200px; left:0;}
#headerPic {position:relative; width:100%; margin:0 auto; width:100%; max-width:1680px; height:auto; min-height:340px; overflow:hidden;}
#headerPic img {position:relative; display:block; top:0; left:0; width:100%; max-width:1680px; height:auto; margin:0 auto; aspect-ratio:168 / 59;}
#headerPic {padding-top:53px;}
@keyframe headerScale {
  0% {transform: scale(1.2); -webkit-transform: scale(1.2);}
  100% {transform: scale(1.0); -webkit-transform: scale(1.0);}
}
@-webkit-keyframes headerScale {
  0% {transform: scale(1.2); -webkit-transform: scale(1.2);}
  100% {transform: scale(1.0); -webkit-transform: scale(1.0);}
}
#headerPic img {animation-name: headerScale; animation-duration: 4s;}

#header h1, #header p {position:relative; margin:0 0 0 140px; padding:10px 15px 0; font-family:'Titillium Web',Arial,sans-serif; font-size:1.4em; font-weight:normal; line-height:30px; letter-spacing:0.05em;}
#headline {position:absolute; left:0; top:-7.2em; letter-spacing:0.05em;}
#headline p, #headline h1,#headline h2 {clear:both; float:left; margin:5px 0 10px; padding:0.6rem 15px 0.3rem; font-size:2em; font-weight:normal; line-height:1.6rem; background:rgba(255,255,255,0.8);}
#headline h2 {padding:0.3rem 15px 0.3rem; font-size:1.3em; text-transform:none; color:#666;}
#headline span {font-size:0.65em; color:#666;}
#headline h1:after, #headline p:after {content:""; display:inline; font-size:0.65em;}

#mainOuter {font-size:1em; line-height:1.6em; background-color:#ededed; background-image:url(../img/bg_main.png); background-repeat:repeat-x;}
#main {position:relative; width:880px; margin:0 auto; padding:0; text-align:left;}
#mainContentOuter {position:relative; float:left; margin:0; width:650px; padding:3rem 15px; line-height:1.6em;}
#mainContent {width:auto; max-width:620px; margin:0 auto;}
#mainNav {float:right; padding:3rem 0 15px; margin:0;}
#footer {position:relative; color:#ccc; background:#313847; padding:25px; font-family:'Titillium Web',Arial,sans-serif; font-size:0.9em; line-height:2.5em; letter-spacing:0.05em;}

.page #mainOuter {position:relative;}
h2 {position:relative; font-size:1.6em; font-weight:normal; line-height:1.3em; text-transform:uppercase; margin:0; padding:5px 0;}
h2.noSubHead {padding:5px 0 1.2em; margin:0 0 1.2em;}
h3 {position:relative; font-size:1.1em; font-weight:normal; line-height:1.3em; margin:0 0 1.4em; padding:0.1em 0 1.2em;}
h2.noSubHead:after, h3:after {content:""; display:block; position:absolute; left:0; bottom:0; width:4.7em; height:2px; background-color:#ccc;}
h4 {font-size:1em; padding:3px 15px; margin:24px -15px 6px; color:#c00; background-image:url(../img/dot_l.png); background-position:1px 0.7em; background-repeat:no-repeat;}
h4.colored {padding:3px 15px; margin:24px -15px 6px; color:#fff; background:#D53C3C;}
#mainContent p {margin:0 0 1em; padding:0;}
#mainContent p.rightLink {text-align:right;}
#mainContent p.leftLink.half {margin:0 0 -1.6em;}
.l {font-size:1.2em;}
#mainContent ul {margin:15px 20px 25px; padding:0;}
#mainContent li {position:relative; list-style-type:none; margin:0 0 10px; padding: 0 0 0 1em; line-height:1.5em;}
#mainContent li:before {content:""; display:block; position:absolute; top:0.45em; left:0; height:0.5em; width:0.5em; background-color:#c00; border-radius:50%;}
#mainContent .listbox {margin:0 -15px 5px; padding:10px 15px 5px; background-color:#fff; border:2px #B4BCCB solid; border-radius:4px;}
#mainContent .listbox ul {margin:0; padding:10px 0 0;}
#mainContent .listbox p {margin:0 0 15px;}
#mainContent a {color:#39476A;}
a.more {display:inline-block; padding:0 0.5em 0 0; text-decoration:none; white-space:nowrap; border-radius:0.75em;}
a.more:before {content:">"; display:inline-block; height:1.1em; width:1.1em; line-height:1.1em; margin-right:0.3em; text-align:center; color:#fff; background-color:#8190AA; border-radius:50%; transition:0.2s;}
#mainContent p.bottomLine {position:relative; margin:3em 0 0; font-size:0.95em; text-align:center;}
.bottomLine em {position:relative; padding:0 5px; background-color:#ededed; z-index:2;}
.bottomLine:before {content:""; display:block; position:absolute; left:0; top:50%; height:2px; width:100%; background-color:#ccc;}
.bottomSubLeft {float:left; font-size:0.75em; line-height:1em; margin:10px 15px;}
.bottomSub {text-align:right; font-size:0.75em; line-height:1em; margin:10px 15px;}
.price {float:right; margin-top:-7px; margin-right:5px;}
.listbox.address {position:relative;}
.holiday {position:absolute; top:-10px; left:10px; max-width:90%;}
.holiday img {}

#mainNav li {height:92px; width:140px; list-style-type:none; margin:0 0 1.8em; padding:0; background-repeat:no-repeat; font-family:'Titillium Web',Arial,sans-serif; /*background-color:#8190aa; background-color:#8D9BB2;*/}
.aMain {display:block; position:relative; height:100%; width:100%;}
.aMain:before {content:""; display:block; height:92px; width:92px; background-size:auto 100%; background-repeat:no-repeat; filter:saturate(0.4) brightness(2.02) hue-rotate(-5deg);}
li.act .aMain:before {filter:none;}
.aMain span {display:block; position:absolute; bottom:10px; left:50px; width:auto; min-width:8em; padding:0.2em 0.5em; font-size:0.8em; line-height:1em; text-align:center; color:#fff; background-color:#8190aa; border:1px #eee solid; z-index:2;}
li.act .aMain span {background-color:#485779;}
#li_php:before {background-image:url(../img/li_php.png);}
#li_web:before {background-image:url(../img/li_web.png);}
#li_ref:before {background-image:url(../img/li_ref.png);}
#li_kon:before {background-image:url(../img/li_kontakt.png);}

#subNav {position:absolute; top:-27px; left:0; margin:0; padding:0;}
#subNav ul {margin:0; padding:0;}
#subNav li {float:left; list-style-type:none; height:27px; width:125px; overflow:hidden; margin:0 5px 0 0; padding:0;}
#subNav a {display:block; color:#fff; background-color:#8190AA; border:2px #ccc solid; border-bottom:none; font-size:0.9em; line-height:25px; text-align:center; text-decoration:none;}
#subNav a.act {color:#333; background-color:#fff; border-color:#fff;}

#footer a {color:#ccc; text-decoration:none; padding:0 5px; white-space:nowrap;}

/* Startseite */
.startPage {}
.startPage #mainOuter {padding-bottom:40px;}
.startPage #main {position:relative; width:880px; max-width:100%; margin:-2em auto 0; padding:30px; text-align:left; background:#fff; border:3px #ccc solid;}
.startPage #headline {top:-8.5em;}
.startPage #headline p {padding-left:30px;}
#startContent {position:relative; font-size:1em; line-height:1.4em;}
#startContentFull {margin:15px; padding:0 0 20px; font-size:1em; line-height:1.4em;}
#startContent a {display:block; position:absolute; top:0; left:0; height:100%; width:100%; z-index:10;}
.startBox {position:relative; padding:2rem 0; margin:0; border-bottom:2px #eee solid;}
.startBox.last {border:none;}
.startBox img {float:left; margin-right:15px;}
.startBox p {font-size:0.95em; margin:0 0 10px 120px; max-width:620px;}
.startBox em {font-weight:bold; font-style:normal;}
.startBox.half em {font-size:22px; line-height:30px; font-weight:normal; font-style:normal;}
.startLink {padding:20px 0 0 0px;}
.startLink a {opacity:0.8; display:block; padding:10px 0 12px 105px; font-size:19px; background-color:#eee; color:#39476A; background-image:url(../img/arrow_1.png); background-position:55px center; background-repeat:no-repeat;}
.startNav {position:relative; display:block; float:none; padding:10px; margin:0; background:#eee;}
.startNav ul {margin:0; padding:0; font-size:15px;}
.startNav ul:after {content:""; display:table; clear:both;}
.startNav li {list-style-type:none; margin:0; padding:0; float:left; width:33.3%;}
.startNav a {display:block; opacity:0.75; color:#39476A; text-decoration:none; padding:16px 5px 14px 51px; margin:0 0 5px; background-image:url(../img/arrow_m.png); background-position:5px center; background-repeat:no-repeat;}
.startPage .bottomLine {position:relative; margin:20px 15px 0; font-size:0.9em; text-align:center;}
.startPage .bottomLine em {background-color:#fff;}


/* Referenzen */
.refBox, .refIntroBox {margin:10px -15px; padding:10px 15px; background-color:#fff;}
.refLink {float:left; display:inline; margin:0 15px; padding:6px; background:#eee;}
.refLink img {display:block;}
#mainContent .refBox ul {margin:15px 20px 25px 160px; padding:0;}
#mainContent .refBox li {margin:0 0 2px;}
#fancybox-wrap, #fancybox-content {box-sizing:content-box;}

/* Media Queries */
@media screen and (min-width: 1200px) {
  #headerPic {min-height:415px;}
  #main, .startPage #main {width:1050px;}
  .startPage #main {padding:30px;}
  #startContent {width:690px; float:left;}
  .startBox p {margin-left:120px;}
  .startNav {float:right; display:inline; margin:15px 15px 0 0; padding:10px 10px 5px; background:#eee;}
  .startNav li {float:none; width:auto;}
  .half .startLink a {padding-left:120px;}
  .startBox.half {width:48%; padding:70px 0 30px; margin:0; border-bottom:none;}
  .left {float:left;}
  .right {float:right;}
  #mainOuter {background-color:#e5e5e5;background-image:url('../img/bg_main2.png');}
  #mainContentOuter {position:relative; width:820px; margin-bottom:40px; background-color:#F2F2F2; background-image:url(../img/bg_maininner.png); background-repeat:repeat-x;}
  #mainContent {z-index:10;}
  .bottomLine em {background-color:#f2f2f2;}
  .aMain:hover span {background-color:#485779;}
  #subNav {top:-37px;}
  #subNav li {height:37px; width:159px;}
  #subNav li a {letter-spacing:0.05em; line-height:35px;}
  a.more:hover {background-color:#fff;}
  a.more:hover:before {background-color:#384669; transform:scale(1.2);}
  #subNav a:hover {background-color:#5C6E92; border-color:#fff;}
  #subNav a.act:hover {color:#333; background-color:#fff;}
  .startLink a:hover {background-color:#ddd; opacity:1;}
  .startNav a:hover {background-color:#fff; opacity:1;}
  .refBox:hover {background-color:#f8f8f8;}
  .refLink:hover, .refBox:hover .refLink {background-color:#D7DBE2;}
}

@media screen and (min-width: 1680px) {
  body {font-size:18px;}
  #headerPic {min-height:585px;}
  #main, .startPage #main {width:1170px;}
  .startPage #main {padding:30px;}
  #startContent {width:810px;}
  .startBox img {width:110px; height:110px;}
  .startBox p {margin-left:140px; max-width:660px;}
  #mainContentOuter {width:900px}
  #mainContent {max-width:700px;}
  #mainNav li {height:110px;}
  .aMain:before {height:110px; width:110px;}
  .aMain span {left:55px;}
  #subNav {top:-42px;}
  #subNav li {height:42px; width:175px;}
  #subNav li a {line-height:40px;}
}

@media screen and (max-width: 989px) {
  body {min-width:320px;}
  #headerOuter {height:42px; width:100%; z-index:20; border-width:1px;}
  #header h1, #header p {font-size:1em; line-height:1.5em; padding-right:4em;}
  .startPage #header h1, .startPage #header p {padding-right:15px;}
  #logo {top:10px;}
  #headerPic, #main {width:auto;}
  #headerPic {padding-top:42px; overflow:hidden; min-height:323px;}
  #headerPic img {width:120%; margin-left:-10%;}
  #headline {top:-5em;}
  #mainNav {padding-right:5px;}
  .startBox.half {float:none; width:auto; margin:0;}
  #nav {position:fixed; top:42px; width:100%; background:#fff; border-bottom:1px #ccc solid; height:auto; max-height:1px; overflow:hidden; z-index:10; transition:0.3s;}
  .navOpened #nav {max-height:400px;}
  #nav .clear {display:none;}
  #mainNav {position:relative; top:0; left:0; padding:0; margin:0; float:none;}
  #mainNav ul {height:auto; margin-bottom:-1px;}
  #mainNav li {float:none; width:auto; height:auto; margin:0;}
  .aMain {height:auto; text-align:center; padding:5px 0; text-decoration:none; text-transform:uppercase; letter-spacing:0.05em;}
  .aMain:before {display:none;}
  .aMain span, li.act .aMain span {display:inline; position:relative; top:0; left:0; color:#000; background-color:#fff; border:none;}
  #mainNav li a {border:none; border-bottom:1px #ddd solid;}
  #subNav {position:relative; top:0; margin:0; padding:0; z-index:21; margin-bottom:-1px;}
  #subNav li {float:none; height:auto; width:auto;}
  #subNav li a {padding:5px 0; color:#000; background-color:#fff;}
  #subNav a.act {background-color:#eee;}
  #btnMenu {position:fixed; top:3px; right:15px; height:2.1em; height:2.1em; width:2.1em; background:#fff; cursor:pointer; z-index:22;}
  #btnMenu:before {content:""; display:block; position:absolute; top:0.6em; left:0.2em; height:3px; width:1.7em; background:#000; transition:0.3s;}
  #btnMenu:after {content:""; display:block; position:absolute; bottom:0.6em; left:0.2em; height:3px; width:1.7em; background:#000; transition:0.3s;}
  .navOpened #btnMenu:before {transform:rotate(45deg); top:1em;}
  .navOpened #btnMenu:after {transform:rotate(-45deg); top:1em;}  
   #mainContentOuter {float:none; margin:0 auto;}
}

@media screen and (max-width: 767px) {
  #mainContentOuter {width:auto; padding:2em 18px;}
  #mainContent {width:auto;}
  #headerPic {min-height:262px;}
  #headerPic img {width:130%; margin-left:-15%;}
  #headline {font-size:0.8em;}
  #headline span, #headline h2 {}
  #headline p, #headline h1, #headline h2 {margin-bottom:5px;}
  .startPage #main {margin:0 auto;}
  .startNav {padding:10px 20px;}
  .startNav li {float:none; width:auto;}
  .startLink {position:relative; top:0; left:0; width:auto;}
  #mainContent p.leftLink.half {text-align:right; margin:0 0 0.2em;}
  .bottomLine, .bottomSub {display:none;}
}

@media screen and (max-width: 575px) {
  #header h1, #header p {display:none;}
  #headerPic {min-height:175px;}
  #headerPic img {width:140%; margin-left:-20%;}
  .startPage #main {padding:15px;}
  .startBox img {display:block; float:none; margin:0 auto 25px;}
  .startBox p {margin:0 0 10px; text-align:center;}
  .startBox em {display:block;}
  .refLink {display:block; float:none;}
  #headline p {padding:0 15px; font-size:1.6em;}
  #mainContent .refBox ul {margin-left:15px;}
}