@charset "UTF-8";
/*
************************************************************
Styles:     flix//theme
Project:    interaktiv manufaktur - custom SCSS
Autor:      Michael Eipel, Fjodor Zimmermann
Copyright:  (c) 2017 interaktiv manufaktur
Website:    www.interaktiv-manufaktur.de
************************************************************
*/
/*
************************************************************
Styles:     flix//reset
Autor:      Thomas Tiedtke
Copyright:  (c) 2015 interaktiv manufaktur
Website:    www.interaktiv-manufaktur.de
************************************************************
*/
/* Styles normalisieren
*********************************************************** */
@import url(../_css/font-awesome.css);
@import url(../_css/spectrum.css);
@import url(../_css/bootstrap-colorpicker.min.css);
@import url(../_css/colorPicker.css);
* {
  padding: 0px;
  margin: 0px;
}

/* gegen Springen der Seite im Browser */
html {
  height: 100%;
  padding: 0 0 1px 0;
}

h1, h2, h3, h4, h5, h6 {
  font-size: 14px;
  font-weight: normal;
}

ol, ul {
  list-style: none;
}

address, caption, cite, code, dfn, em, strong, th, var {
  font-style: normal;
  font-weight: normal;
}

table {
  border-collapse: collapse;
}

fieldset, img {
  border: 0;
}

caption, th {
  text-align: left;
}

/* ******** Zum Einstellen ******** */
/*
************************************************************
Styles:     flix//reset
Autor:      Thomas Tiedtke
Copyright:  (c) 2015 interaktiv manufaktur
Website:    www.interaktiv-manufaktur.de
************************************************************
*/
/* Webfonts
*********************************************************** */
/* noto-sans-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: 'Noto Sans';
  font-style: normal;
  font-weight: 400;
  src: url('../_fonts/noto-sans-v28-latin-regular.eot'); /* IE9 Compat Modes */
  src: url('../_fonts/noto-sans-v28-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../_fonts/noto-sans-v28-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../_fonts/noto-sans-v28-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../_fonts/noto-sans-v28-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../_fonts/noto-sans-v28-latin-regular.svg#NotoSans') format('svg'); /* Legacy iOS */
}

/* noto-sans-700 - 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: 'Noto Sans';
  font-style: normal;
  font-weight: 700;
  src: url('../_fonts/noto-sans-v28-latin-700.eot'); /* IE9 Compat Modes */
  src: url('../_fonts/noto-sans-v28-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../_fonts/noto-sans-v28-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
       url('../_fonts/noto-sans-v28-latin-700.woff') format('woff'), /* Modern Browsers */
       url('../_fonts/noto-sans-v28-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../_fonts/noto-sans-v28-latin-700.svg#NotoSans') format('svg'); /* Legacy iOS */
}
/*
************************************************************
Styles:     flix//theme
Project:    interaktiv manufaktur - Main CSS
<<<<<<< HEAD
Autor:      Michael Eipel, Fjodor Zimmermann
Copyright:  (c) 2015-2017 interaktiv manufaktur
=======
Autor:      Michael Eipel
Copyright:  (c) 2017 interaktiv manufaktur
<<<<<<< HEAD
>>>>>>> dba4d44b2913b1bb4dd196236bd2e1dd48c2418e
=======
>>>>>>> origin/master
Website:    www.interaktiv-manufaktur.de
************************************************************
*/
/* *******************************************************************************
*** Allgemeine Styles
******************************************************************************** */
html, body {
  background-color: #f4f4f1;
  color: #7c7b7b;
  font-family: "Noto Sans", Arial, Helvetica, sans-serif;
  font-size: 16px;
  line-height: 20px;
  height: auto !important;
  padding: 0;
}

* {
  outline: none;
}

#page-canvas {
  position: relative;
  width: 1200px;
  margin: 0 auto;
  padding: 0;
  display: block;
  min-height: 100%;
  height: auto !important;
  height: 100%;
  background-color: #ffffff;
}

#content-grid {
  /* ***** Ist n├Âtig f├╝r Abstand nach oben wg. Sticky Header ***** */
  display: block;
}

.clear {
  clear: both;
}

h1 {
  font-family: "Noto Sans", Arial, Helvetica, sans-serif;
  font-weight: 700;
  font-size: 50px;
  line-height: 55px;
}

.start h1 {
  font-size: 40px;
  line-height: 45px;
}

.standard h1 {
  font-size: 40px;
  line-height: 45px;
  margin-bottom: 30px;
}

h2 {
  font-size: 22px;
  margin: 25px 0 6px 0;
  line-height: 28px;
}

p {
  margin-bottom: 20px;
  line-height: 23px;
}

a {
  text-decoration: none;
  color: #007cc4;
}

a:hover {
  color: #007cc4;
  text-decoration: underline;
}

.link-ext {
  padding-left: 17px;
  background: url(../_images/ic_linkextern_blue.png) left 2px no-repeat;
  background-size: 11px 11px;
}

strong {
  font-family: "Noto Sans", Arial, Helvetica, sans-serif;
  font-weight: 700;
}

em {
  font-style: italic;
}

img {
  display: block;
}

.mobile,
.linkbutton.mobile,
.nav2-mobile,
.nav1-mobile {
  display: none;
}

.nomobile {
  display: block;
}

.blue {
  color: #007cc4;
}

.linkbutton,
.linkbutton:visited {
  color: #ffffff;
  border: 1px solid #007cc4;
  border-radius: 5px;
  padding: 10px;
  display: inline-block;
  background-color: #007cc4;
}

.linkbutton:hover {
  /*
  color:#007cc4;
  border:1px solid #007cc4;
  background-color:#ffffff;
  text-decoration:none;
  */
  border-color: #008ee0;
  /* #009CF7 */
  text-decoration: none;
  color: #ffffff;
  background-color: #008ee0;
  /* #009CF7 */
}

.linkbutton.grey {
  background-color: #7B7C7E;
  border-color: #7B7C7E;
}

.linkbutton.grey:hover {
  background-color: #959698;
  border-color: #959698;
}

/* *************************************************
*** Header
************************************************* */
#head-canvas {
  position: relative;
  z-index: 300;
  width: 1200px;
  border-bottom: 1px solid #c9c9c9;
}

#head-main {
  padding: 0 30px 20px 30px;
  background-color: #ffffff;
}

#head-container {
  width: 100%;
  float: left;
  margin-top: 20px;
}

#logo {
  float: left;
  display: block;
  height: 100px;
  width: 315px;
  background: url(../_images/logo.svg) left top no-repeat;
  background-size: 100% auto;
}

/* ********** Sticky header ********** */
#head-canvas.sticky {
  position: fixed;
  top: 0;
  border-bottom: 1px solid #c9c9c9;
}

#head-canvas.sticky #head-trenner {
  height: 36px;
  background-position: left bottom;
}

#head-canvas.sticky .nav-meta {
  display: none;
}

#head-canvas.sticky #logo {
  margin-top: 10px;
}

#head-canvas.sticky .nav1-link {
  font-size: 18px;
}

/* *************************************************
*** Navigation
************************************************* */
/* ********** nav1 ********** */
.nav1 {
  float: right;
  display: block;
  margin-top: 36px;
}

.nav1-item {
  float: left;
  margin-right: 30px;
}

.nav1-link,
.nav1-link:visited {
  color: #7c7b7b;
  font-size: 22px;
}

.nav1-link:hover,
.nav1-link.active {
  color: #007cc4;
  text-decoration: none;
}

#nav1-6-item {
  display: none;
}

.nav1-flix,
.nav1-flix:visited {
  float: right;
  display: block;
  height: 29px;
  width: 48px;
  margin: 53px 0 0 0;
  padding: 7px 15px;
  border: 1px solid #7c7b7b;
  border-radius: 5px;
  background: url(../_images/ic_nav_flix.png) center 7px no-repeat;
  background-size: 48px 98px;
}

.nav1-flix:hover,
.nav1-flix.active {
  background-position: center -62px;
  background-color: #007cc4;
  text-decoration: none;
  border: 1px solid #007cc4;
}

/* ********** nav2********** */
.nav2 {
  display: block;
  margin-top: 22px;
}

.nav2-item {
  padding-bottom: 15px;
  margin-bottom: 15px;
  border-bottom: 1px solid #c8c8c8;
}

.nav2-link,
.nav2-link:visited {
  color: #7c7b7b;
  font-size: 20px;
}

.nav2-link:hover,
.nav2-link.active {
  color: #007cc4;
  text-decoration: none;
}

/* ********** nav-footer********** */
.nav-footer {
  float: left;
}

.nav-footer-item {
  float: left;
  margin-right: 5px;
}

.nav-footer-item:before {
  float: left;
  color: #cbcbcb;
  content: "·";
}

.nav-footer-item:first-child:before {
  content: "";
}

.nav-footer-link,
.nav-footer-link:visited {
  color: #cbcbcb;
  font-size: 14px;
  padding-left: 4px;
}

.nav-footer-item:first-child .nav-footer-link {
  padding-left: 0;
}

.nav-footer-link:hover {
  color: #e8e8e8;
  text-decoration: none;
}

.mainimage-wrapper {
  position: relative;
  height: 530px;
}

.mainimage-wrapper .overlay {
  position: absolute;
  top: 0;
  right: 0;
  width: 660px;
  background: rgba(255, 255, 255, 0.75);
  padding: 30px;
}

#main-canvas {
  margin: 45px 0 50px 0;
  padding: 0 40px 0 40px;
  display: block;
}

/* ********** input area ********** */
#input-canvas {
  background: #e8e8e8;
  width: 1120px;
  padding: 45px 40px;
  display: block;
}

#input-canvas .inputbox {
  width: 320px;
  float: left;
  margin-right: 80px;
}

#input-canvas .inputbox.last {
  margin-right: 0;
}

.inputbox.last > div {
  float: none;
  clear: both;
}

#input-canvas .inputbox label {
  display: block;
  font-family: "Noto Sans", Arial, Helvetica, sans-serif;
  font-weight: 700;
  font-size: 20px;
  line-height: 25px;
  margin-bottom: 8px;
}

#input-canvas .inputbox input {
  font-family: "Noto Sans", Arial, Helvetica, sans-serif;
  color: #7c7b7b;
  width: 90%;
  font-size: 20px;
  line-height: 25px;
  background: none;
  border: none;
  border: 2px solid #7c7b7b;
  background-color: #FFFFFF;
  padding: 10px;
}

#input-canvas .inputbox .colorbox {
  height: 45px;
  width: 45px;
  float: left;
  margin-right: 10px;
}

#input-canvas .inputbox .colorbox.red {
  background-color: #D41325;
  border: 2px solid #D41325;
}

#input-canvas .inputbox .colorbox.green {
  background-color: #58AB29;
  border: 2px solid #58AB29;
}

#input-canvas .inputbox .colorbox.blue {
  background-color: #FF8C00;
  border: 2px solid #FF8C00;
}

#input-canvas .inputbox .colorbox.picker {
  /*   background-color: #cc9c3e;*/
  border: 2px solid #7c7b7b;
  background: url("/_images/ic_colorpicker.png") center center no-repeat;
}

#input-canvas .inputbox .colorbox.input {
  width: 80px;
}

#input-canvas .inputbox .colorbox.selected {
  border: 2px solid #9c9b9b;
}

/* *************************************************
*** Content
************************************************* */
#content-canvas {
  display: block;
  width: 100%;
}

#content-canvas .systemtext {
  width: 100%;
  display: inline-block;
  margin-bottom: 20px;
}

#content-canvas .systemtext p {
  font-size: 20px;
  line-height: 35px;
}

.custom-page #content-canvas h2 {
  font-family: "Noto Sans", Arial, Helvetica, sans-serif;
  font-weight: 700;
  font-size: 45px;
  line-height: 50px;
  margin: 0 0 20px 0;
}

.color {
  color: #007cc4;
  /* default-color */
}

.usp {
  width: 100%;
  font-size: 25px;
  font-family: "Noto Sans", Arial, Helvetica, sans-serif;
  font-weight: 700;
  line-height: 30px;
  margin-bottom: 20px;
  display: inline-block;
}

.usp .fa {
  width: 40px;
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  font-size: 45px;
  line-height: 45px;
  padding-right: 20px;
}

.usp span {
  display: table-cell;
  vertical-align: middle;
}

.usp .usp-item {
  margin-bottom: 20px;
}

.button-anfrage {
  display: inline-block;
  color: #ffffff;
  border-radius: 10px;
  padding: 10px 30px;
  font-size: 25px;
  margin-top: 20px;
}

.button-anfrage.color {
  background-color: #007cc4;
}

.button-anfrage.color:hover {
  background-color: #007cc4;
  color: #ffffff;
  text-decoration: none;
}

/* ********** contact area contactform ********** */
.pageElement-contactform {
  display: inline-block;
  border: 0px solid gray;
  float: left;
  width: 55%;
}

.contactform-aside {
  border: 1px solid lightgray;
  float: left;
  padding: 30px 60px;
  margin-top: 42px;
  border-radius: 7px;
}
.contactform-aside .im-logo {
  display: block;
  width: 225px;
  height: 96px;
  background: url(/_images/logo_sinntun.svg) left top no-repeat;
  background-size: 135px 83px;
  margin: 0px;
}

/* *************************************************
*** Footer
************************************************* */
/* ********** footer area ********** */
#footer-canvas {
  position: relative;
  background-color: #e8e8e8;
  width: 1140px;
  display: block;
  padding: 50px 30px 20px 30px;
}

.footerbox {
  float: left;
}

.footerbox.im-logo {
  display: block;
  width: 135px;
  height: 83px;
  background: url(/_images/logo_sinntun.svg) left top no-repeat;
  background-size: 135px 83px;
  margin: 57px 50px 0 0;
}

.footerbox.text {
  line-height: 23px;
  margin: 101px 0 0 0;
}

.footerbox.text a {
  color: #7c7b7b;
}

.footerbox.text a:hover {
  color: #007cc4;
}

.footerbox.award {
  display: block;
  float: right;
  width: 140px;
  height: 140px;
  background: url(/_images/logo_bestof_cms_2016.png) left top no-repeat;
  background-size: 140px 140px;
}

/* ********** footerbar ********** */
#footerbar-canvas {
  height: 34px;
  width: 1140px;
  padding: 0 30px;
  background-color: #7c7b7b;
  line-height: 34px;
}

#footerbar-canvas .copy {
  float: right;
  color: #cbcbcb;
  font-size: 14px;
}

/* ********** Social Media ********** */
#social-canvas {
  width: 1200px;
  margin: 15px auto 0 auto;
}

#social-canvas .icon {
  float: right;
  height: 31px;
  width: 31px;
  display: block;
  margin-left: 10px;
  /*   background-position:left top;*/
  background-image: url(../_images/ic_social-media.png);
  background-repeat: no-repeat;
  background-size: 175px 31px;
}

#social-canvas .icon.xing {
  background-position: -108px 0px;
}

#social-canvas .icon.gplus {
  background-position: -72px 0px;
}

#social-canvas .icon.twitter {
  background-position: -36px 0px;
}

#social-canvas .icon.facebook {
  background-position: 0px 0px;
}

#social-canvas .icon.instagram {
  background-position: -144px 0px;
}

/* *************************************************
*** PageElements Main
************************************************* */
/* ********** teaser-start (static) ********** */
.teaser-start {
  position: relative;
  float: left;
  margin: 0 20px 50px 0;
  width: 590px;
  background-color: #e8e8e8;
  color: #7c7b7b;
}

.teaser-start.nomargin {
  margin: 0 0 40px 0;
}

.teaser-start:hover {
  color: #ffffff;
  text-decoration: none;
  background-color: #008ee0;
}

.teaser-start h2 {
  margin: 10px 40px;
  font-size: 40px;
  line-height: 45px;
  font-family: "Noto Sans",Arial,Helvetica,sans-serif;
  font-weight: 700;
}

.teaser-start .linkbutton {
  position: absolute;
  left: 20px;
  bottom: 20px;
  background-color: #7c7b7b;
  border-color: #ffffff;
}

.teaser-start:hover .linkbutton {
  background-color: #008ee0;
}

/* ********** pageElement-texteditor-main ********** */
.pageElement-texteditor-main {
  margin-bottom: 30px;
}

.pageElement-texteditor-main ul {
  margin-bottom: 18px;
}

.pageElement-texteditor-main li {
  padding-left: 15px;
  background: url(../_images/ic_list.png) left 5px no-repeat;
  background-size: 10px 10px;
  margin-bottom: 2px;
  line-height: 23px;
}

.pageElement-texteditor-main li:last-child {
  margin-bottom: 0;
}

.pageElement-texteditor-main .tabnav {
  cursor: pointer;
}

.pageElement-texteditor-main .tabnav h2 {
  display: table;
}

.pageElement-texteditor-main .tabtrigger {
  background: url("/_images/ic_subnav-flix.png") left 0 no-repeat;
  background-size: 19px 62px;
  height: 11px;
  margin: 8px 20px 0 0;
  width: 19px;
  display: block;
  float: left;
}

.pageElement-texteditor-main .tabnav.active .tabtrigger {
  background-position: left -51px;
}

.pageElement-texteditor-main .tabnav.active h2 {
  color: #007cc4;
}

.pageElement-texteditor-main .tabcontent {
  display: none;
  padding-left: 39px;
}

.pageElement-texteditor-main .tabcontent p {
  display: inline-block;
}

.pageElement-texteditor-main .introtext {
  padding-left: 39px;
  display: inline-block;
}

/* ********** references-main ********** */
.referenzbox {
  position: relative;
  display: block;
  width: 1122px;
  border: 1px solid #c8c8c8;
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 30px;
  background-color: #e8e8e8;
}

.references-main p {
  margin-bottom: 15px;
}

.references-main h3 {
  font-size: 22px;
  color: #007cc4;
}

.references-main .left {
  float: left;
  background-color: #e8e8e8;
  display: block;
  height: 100%;
  width: 299px;
}

.references-main .teaser {
  font-size: 22px;
  line-height: 28px;
  width: 500px;
}

.references-main .introtext {
  margin-bottom: 20px;
}

.references-main .calltoaction {
  margin-bottom: 20px;
  border: 1px solid #c8c8c8;
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 30px;
  background-color: #e8e8e8;
  padding: 10px;
}

.references-main .image-container {
  margin: 14px;
}

.references-main .image-container.border {
  border: 1px solid #c8c8c8;
  border-radius: 10px 0 0 0;
  overflow: hidden;
  display: block;
}

.references-main .image {
  display: block;
}

.references-main .ic_system {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 30px;
  padding: 10px;
  background-color: #f7f7f7;
  border-width: 1px 1px 0 0;
  border-style: solid;
  border-color: #c8c8c8;
  border-radius: 0 5px 0 0;
  background-size: auto 30px;
  background-repeat: no-repeat;
  background-position: center center;
}

.references-main .ic_system.flix {
  width: 51px;
  background-image: url(../_images/ic_leistungen/ic_flix.png);
}

.references-main .ic_system.wordpress {
  width: 50px;
  background-image: url(../_images/ic_leistungen/ic_wordpress.png);
}

.references-main .ic_system.typo3 {
  width: 111px;
  background-image: url(../_images/ic_leistungen/ic_typo3.png);
}

.references-main .ic_system.shopware {
  width: 139px;
  background-image: url(../_images/ic_leistungen/ic_shopware.png);
}

.references-main .right {
  float: left;
  width: 762px;
  min-height: 170px;
  padding: 15px 30px;
  background-color: #ffffff;
  border-left: 1px solid #c8c8c8;
}

.references-main h2 {
  font-size: 28px;
  color: #007cc4;
  margin: 10px 0 0 0;
  display: block;
}

.references-main .link,
.references-main .link:visited {
  color: #7c7b7b;
  font-size: 18px;
  display: block;
  padding-left: 14px;
  background: url(../_images/ic_linkextern.png) left 5px no-repeat;
  background-size: 9px 9px;
}

.references-main .link:hover {
  text-decoration: underline;
}

.references-main .teaser-text {
  margin-top: 20px;
  line-height: 21px;
}

.references-main .portfolioservices-container {
  margin: 20px 0 50px 0;
}

.references-main .leistungen_headline {
  font-size: 22px;
}

.references-main .leistung {
  float: left;
  display: block;
  background-color: #f7f7f7;
  border: 1px solid #c8c8c8;
  border-radius: 5px;
  padding: 7px 10px;
  margin: 0 5px 5px 0;
}

.references-main .link-detail {
  position: absolute;
  bottom: 0;
  right: 0;
  height: 30px;
  line-height: 30px;
  font-size: 18px;
  padding: 10px;
  text-decoration: none;
  color: #ffffff;
  background-color: #007cc4;
  border-width: 1px 0 0 1px;
  border-style: solid;
  border-color: #007cc4;
  border-radius: 5px 0 0;
}

.references-main .link-detail:hover {
  background-color: #f7f7f7;
  border-color: #c8c8c8;
  color: #7c7b7b;
}

/* ********** references detail ********** */
.references-main .link.detail,
.references-main .link.detail:visited {
  color: #007cc4;
  font-size: 18px;
  display: inline-block;
  padding-left: 14px;
  background: url(../_images/ic_linkextern_blue.png) left 5px no-repeat;
  background-size: 9px 9px;
}

.references-main h2.detail,
.references-detail h2 {
  color: #7c7b7b;
  font-size: 22px;
  margin-bottom: 3px;
}

.references-main h2.detail.leistungen_headline {
  margin-bottom: 6px;
}

.references-main .portfolioservices-container.detail {
  margin: 10px 0 30px 0;
}

.references-detail {
  position: relative;
  display: block;
  width: 100%;
  overflow: hidden;
  margin-bottom: 30px;
}

.references-detail .left {
  float: left;
  display: block;
  height: 100%;
  width: 285px;
  background: none;
  padding-right: 15px;
}

.references-detail .right {
  float: left;
  width: 600px;
  padding: 0 30px;
  border: 0;
}

.references-detail .right h2,
.references-detail .liste-haken h2 {
  margin-top: 0;
}

.pageElement-references-detail-main .referenzbox .right {
  border: none;
  /* padding-left: 20px; */
}

/* ********** contact formular ********** */
.defaultform .calltoaction {
  margin-top: 20px;
  border: 1px solid #c8c8c8;
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 30px;
  background-color: #e8e8e8;
  padding: 10px;
  width: 450px;
}

.defaultform .calltoaction .projecttext {
  color: #007cc4;
  margin-top: 4px;
}

.defaultform .calltoaction .projecttext strong {
  display: block;
}

.defaultform textarea,
.form-row textarea {
  display: block;
  width: 351px;
  max-width: 351px;
  border: 1px solid #bcbcbb;
  border-radius: 5px;
  padding: 5px 10px;
  font-family: "Noto Sans", Arial, Helvetica, sans-serif;
  color: #6f6f6e;
  font-size: 16px;
  line-height: 20px;
}

.defaultform textarea:focus,
.form-row textarea:focus,
.form-row input[type="text"]:focus,
.form-row input[type="password"]:focus {
  border: 1px solid #007cc4;
  color: #007cc4;
}

.form-row,
.defaultform .form-submit-container {
  float: left;
  width: 100%;
  display: block;
  margin-top: 10px;
}

.form-row.email {
  display: none;
}

.form-row label {
  float: left;
  width: 100px;
  padding: 5px 0;
}

.form-row input {
  float: left;
}

.form-row input[type="text"],
.form-row input[type="password"] {
  width: 351px;
  border: 1px solid #bcbcbb;
  border-radius: 5px;
  padding: 5px 10px;
  font-family: "Noto Sans", Arial, Helvetica, sans-serif;
  color: #6f6f6e;
  font-size: 16px;
  line-height: 20px;
}

.form-row select {
  width: 373px;
  border: 1px solid #bcbcbb;
  border-radius: 5px;
  padding: 5px 10px 2px 10px;
  font-family: "Noto Sans", Arial, Helvetica, sans-serif;
  color: #6f6f6e;
  font-size: 16px;
  line-height: 20px;
}

.form-row select option {
  padding: 3px 5px;
}

.form-row select#zimmer,
.form-row select#aufenthalt {
  width: 150px;
}

.form-row input#formAnreise,
.form-row input#formAbreise,
.form-row input#anzahl_erwachsene {
  width: 130px;
}

.form-row input[type="radio"] {
  margin: 5px 5px 0 0;
}

.form-row.no-display {
  display: none;
}

.form-row.bund select {
  width: 321px;
}

.form-row.mailmail {
  display: none;
}

.button-submit {
  border: none;
  cursor: pointer;
  margin-left: 100px;
  font-size: 16px;
  color: #ffffff;
  background-color: #007cc4;
  padding: 5px 8px 5px 8px;
  border-radius: 5px;
  border: 1px solid #007cc4;
  display: inline-block;
  line-height: 22px;
  color: #ffffff;
  font-family: "Noto Sans", Arial, Helvetica, sans-serif;
}

.button-submit.error {
  margin: 0;
  color: #ffffff !important;
}

.button-submit.anfrage {
  background-position: 226px 6px;
  margin-top: 15px;
}

.defaultform .form-submit-container {
  margin-top: 20px;
}

.button-submit:hover {
  /*   background:none;
     color:#007cc4;
     text-decoration:none;*/
  border-color: #008ee0;
  /* #009CF7 */
  text-decoration: none;
  color: #ffffff;
  background-color: #008ee0;
  /* #009CF7 */
}

.button-submit.confirm {
  color: #ffffff;
  margin: 0;
}

.form-row label.error,
.form-error {
  color: #ff0000;
}

.form-row input.Error {
  border: 1px solid #ff0000;
}

.form-row.plz label {
  float: left;
  width: auto;
}

.form-plz-ort-label {
  float: left;
  width: 100px;
}

.form-row.plz span {
  float: left;
  margin-top: 5px;
}

.plz-input,
.ort-input,
.plz-ort-input-wrapper {
  float: left;
}

.plz-input .textbox {
  width: 100px !important;
}

.ort-input .textbox {
  width: 217px !important;
  margin-left: 10px;
}

.form-error p {
  padding: 12px;
  border: 1px solid #ff0000;
  color: #ff0000;
  display: inline-block;
}

.form-row.sonstiges {
  display: none;
}

.ds-label {
  float: left;
  width: 100px;
  min-height: 1px;
}

.ds-inhalt {
  float: left;
  display: inline;
  width: 370px;
  margin-top: 5px;
}

.ds-inhalt input {
  float: left;
  margin: 2px 10px 0 0;
}

.ds-inhalt span {
  float: left;
  display: block;
  width: 340px;
  line-height: 20px;
}

.liste-haken {
  margin-bottom: 30px;
}

.liste-haken li:last-child {
  margin-bottom: 0;
}

.liste-haken li {
  padding-left: 23px;
  background: url(/_images/ic_vergleich_haken.png) left 3px no-repeat;
  background-size: auto auto;
  background-size: 15px 15px;
  margin-bottom: 2px;
  line-height: 23px;
}

.sp-container, .sp-container button, .sp-container input, .sp-color, .sp-hue, .sp-clear {
  font: normal 12px;
  font-family: "Noto Sans", Arial, Helvetica, sans-serif;
}

/*
************************************************************
Styles:     flix//theme
Project:    interaktiv manufaktur - 1000px CSS
Autor:      Michael Eipel
Copyright:  (c) 2015 interaktiv manufaktur
Website:    www.interaktiv-manufaktur.de
************************************************************
*/
@media only screen and (min-width: 1000px) and (max-width: 1218px) {
  #page-canvas,
  #head-canvas {
    width: 984px;
  }

  .nav1-item {
    margin-right: 25px;
  }

  .nav1-link,
  .nav1-link:visited {
    font-size: 20px;
  }

  .nav2-link,
  .nav2-link:visited {
    font-size: 20px;
  }

  #main-canvas {
    padding: 0 20px 0 20px;
  }

  #head-main {
    padding: 0 20px 20px 20px;
  }

  #content-canvas {
    width: 100%;
  }

  .mainimage-wrapper {
    height: auto;
  }

  .mainimage-wrapper img {
    width: 100%;
  }

  #input-canvas {
    width: 944px;
    padding: 45px 20px;
  }

  #input-canvas .inputbox {
    width: 288px;
    margin-right: 40px;
  }

  .teaser-start {
    width: 482px;
  }

  .teaser-start img {
    width: 100%;
    height: auto;
  }

  .teaser-start h2 {
    margin: 10px 40px;
    font-size: 40px;
  }

  /* *************************************************
  *** Referenzen
  ************************************************* */
  .referenzbox {
    width: 944px;
  }

  .referenzbox .left {
    width: 259px;
  }

  .referenzbox .right {
    width: 644px;
    padding: 15px 20px;
  }

  .referenzbox .image {
    width: 231px;
    height: auto;
  }

  /* ********** Referenzen Detail ********** */
  .references-detail {
    width: 660px;
  }

  .references-detail .left {
    width: 245px;
  }

  .references-detail .right {
    padding: 0 20px;
    width: 360px;
  }

  #footer-canvas {
    width: 944px;
    padding: 50px 20px 20px 20px;
  }

  .footerbox.text {
    margin: 53px 50px 0 0;
    width: 470px;
  }

  #footerbar-canvas {
    width: 944px;
    padding: 0 20px;
  }

  #social-canvas {
    width: 984px;
  }
}
/*
************************************************************
Styles:     flix//theme
Project:    interaktiv manufaktur - 320px Responsive CSS
Autor:      Michael Eipel
Copyright:  (c) 2015 interaktiv manufaktur
Website:    www.interaktiv-manufaktur.de
************************************************************
*/
@media only screen and (min-width: 0px) and (max-width: 1000px) {
  .mobile,
  #nav1-6-item {
    display: block;
  }

  .linkbutton.mobile {
    display: inline-block;
  }

  .nomobile,
  .nav2,
  .angebotbutton,
  .support-aside {
    display: none;
  }

  body {
    padding: 0;
    margin: 0 0 20px 0;
  }

  #page-canvas {
    width: 100%;
  }

  h1 {
    margin-bottom: 20px;
    font-size: 40px;
    line-height: 45px;
  }

  .custom-page h1 {
    padding: 0 3%;
  }

  h1.start {
    margin-bottom: 20px;
  }

  .custom-page #content-canvas h2 {
    font-size: 35px;
    line-height: 40px;
  }

  /* *************************************************
  *** Head
  ************************************************* */
  #head-canvas {
    width: 100%;
  }

  #head-main {
    padding: 0;
  }

  #head-container {
    margin: 0;
  }

  #logo {
    float: left;
    width: 190px;
    background-size: 190px auto;
    height: 90px;
    background-position: left 18px;
    margin-left: 2%;
  }

  .nav-mobile-box {
    display: block;
    float: right;
    height: 90px;
    width: 33%;
    border-left: 1px solid #c8c8c8;
    cursor: pointer;
  }

  .nav-mobile-box:hover {
    text-decoration: none;
  }

  .nav-mobile-box.navbutton {
    border-right: 0;
  }

  .nav-mobile-box .text {
    display: block;
    text-align: center;
    margin-top: 5px;
    font-size: 14px;
    color: #7c7b7b;
  }

  .nav-mobile-box .ic_contact {
    display: block;
    height: 23px;
    width: 35px;
    margin: 30px auto 0 auto;
    background: url(../_images/ic_contact_mobile.png) left top no-repeat;
    background-size: 35px 88px;
  }

  .nav-mobile-box .ic_menue {
    display: block;
    height: 20px;
    width: 40px;
    margin: 31px auto 0 auto;
    background: url(../_images/ic_mobile_menue.png) left top no-repeat;
    background-size: 40px 84px;
  }

  .nav-mobile-box.navbutton.active,
  .nav-mobile-box.navbutton.active .text,
  .nav-mobile-box.navbutton.active .ic_menue {
    background-color: #007bc2;
    color: #ffffff;
    background-position: left -64px;
  }

  #head-trenner {
    width: 100%;
    margin-top: -9px;
  }

  /* *************************************************
  *** Navigation
  ************************************************* */
  .nav1-mobile {
    position: relative;
    margin: 0;
    overflow: hidden;
    width: 100%;
    border-radius: 0;
    display: none;
    z-index: 80;
    border-top: 1px solid #c8c8c8;
  }

  .nav1-mobile-item {
    float: left;
    width: 100%;
    border-bottom: 1px solid #c8c8c8;
  }

  .nav1-mobile-item:last-child {
    border-bottom: 0;
  }

  .nav1-mobile-link,
  .nav1-mobile-link:visited {
    float: left;
    width: 94%;
    padding: 15px 3% 15px 3%;
    display: block;
    color: #7c7b7b;
    font-size: 22px;
  }

  .nav1-mobile-link:hover,
  .nav2-mobile-link:hover {
    text-decoration: none;
    color: #7c7b7b;
  }

  .nav1-mobile-link.active {
    background: none;
    color: #0560A2;
  }

  .nav1-mobile-link.subnav,
  .nav1-mobile-link.subnav:visited {
    float: left;
    /*      height:20px;*/
    width: 47%;
    padding: 15px 0 15px 3%;
  }

  .subnav-nav-trigger {
    float: left;
    height: 50px;
    padding: 0 3% 0 0;
    width: 47%;
    cursor: pointer;
  }

  .subnav-nav-trigger span {
    float: left;
    height: 11px;
    width: 100%;
    margin-top: 20px;
    background: url(/_images/subnav-trigger.png) right 0px no-repeat;
    background-size: 19px 100px;
  }

  /*   .subnav-nav-trigger:hover span {
        background-position:right -41px;
     }*/
  .subnav-nav-trigger.opened span {
    background-position: right -90px;
  }

  .nav1-mobile-item.opened,
  .nav1-mobile-item.opened .nav1-mobile-link,
  .subnav-nav-trigger.opened {
    color: #ffffff;
    background-color: #007bc2;
  }

  /*   .nav1-mobile-item:hover .subnav-nav-trigger span {
        background-position:right -41px;
     }*/
  /*   .nav1-mobile-item:hover .subnav-nav-trigger.opened span {
        background-position:right -90px !important;
     }*/
  .nav2-mobile {
    width: 100%;
    display: none;
    border-top: 1px solid #c8c8c8;
    margin: 0;
    background-color: #ffffff;
  }

  .nav2-mobile-item {
    border: 0;
    margin: 0;
    padding: 0;
  }

  .nav2-mobile-link,
  .nav2-mobile-link:visited {
    padding: 10px 3%;
    display: block;
    font-size: 18px;
    color: #7c7b7b;
  }

  .nav2-mobile-link.active {
    color: #007cc4;
  }

  /* *************************************************
  *** Main
  ************************************************* */
  #main-canvas {
    width: 94%;
    padding: 0 3%;
    margin: 0 0 25px 0;
  }

  #main-canvas.start,
  #main-canvas.standard {
    margin: 25px 0 25px 0;
  }

  #content-canvas {
    width: 100%;
  }

  .custom-page {
    margin-top: 25px;
  }

  .custom-page #main-canvas {
    margin-top: 25px;
  }

  .mainimage-wrapper {
    height: auto;
  }

  .mainimage-wrapper .overlay {
    position: relative;
    top: initial;
    right: initial;
    width: 100%;
    background: none;
    padding: 0;
  }

  .mainimage-wrapper img {
    width: 100%;
    height: auto;
    max-width: 1200px;
  }

  #input-canvas {
    width: 94%;
    padding: 45px 3%;
  }

  #input-canvas .inputbox {
    width: 100%;
    margin: 0 0 30px 0;
  }

  #input-canvas .inputbox.last {
    margin: 0;
  }

  .contactform-aside {
    padding: 15px 25px;
    margin-top: 20px;
  }
  .contactform-aside .im-logo {
    width: 140px;
    height: 87px;
    background: url(/_images/logo_sinntun.svg) left top no-repeat;
    background-size: 90%;
  }
  .contactform-aside .type {
    display: none;
  }

  .teaser-start h2 {
    margin: 10px 26px;
    font-size: 31px;
  }

  /* *************************************************
  *** Footer
  ************************************************* */
  #footer-canvas {
    width: 94%;
    padding: 30px 3%;
  }

  #footerbar-canvas {
    width: 94%;
    padding: 0 3%;
  }

  .footerbox {
    float: none;
  }

  .footerbox.im-logo {
    margin: 0 auto 30px auto;
  }

  .footerbox.text {
    margin: 0 auto 30px auto;
    text-align: center;
  }

  .footerbox.award {
    float: none;
    margin: 0 auto;
  }

  #footerbar-canvas .copy {
    display: none;
  }

  #social-canvas {
    width: 94%;
    padding: 0 3%;
    /*      margin-bottom: 63px;*/
  }

  #social-canvas .icon {
    float: left;
    margin: 0 10px 0 0;
  }

  /* ***** Footer Nav Mobile ***** */
  #footer-mobile {
    position: fixed;
    bottom: 0px;
    left: 0px;
    width: 100%;
    display: block;
    z-index: 300;
  }

  #footer-mobile .button {
    float: right;
    width: 110px;
    height: 40px;
    line-height: 40px;
    background-color: #007cc4;
    cursor: pointer;
    color: #ffffff;
    border-radius: 10px 0 0 0;
    border-width: 1px 0 0 1px;
    border-color: #ffffff;
    border-style: solid;
    margin-top: 7px;
    /* wegen 10-Jahre Footer */
  }

  #footer-mobile .button .text {
    float: left;
    display: block;
    margin-left: 10px;
  }

  #footer-mobile .button .image {
    float: left;
    height: 19px;
    width: 19px;
    margin: 11px 0 0 10px;
    background-image: url(/_images/ic_contact-trigger.png);
    background-repeat: no-repeat;
    background-position: left -1px;
    background-size: 19px 19px;
    display: block;
  }

  #footer-mobile .button.active {
    background-color: #007cc4;
  }

  #footer-mobile .button.active .image {
    -ms-transform: rotate(90deg);
    /* IE 9 */
    -webkit-transform: rotate(90deg);
    /* Chrome, Safari, Opera */
    transform: rotate(90deg);
    background-size: 19px 19px;
    background-position: -3px top;
  }

   /*   #footer-mobile .contact-canvas {
         float:left;
         width:100%;
         height:100px;
         background-color:#7c7b7b;
         display:none;
      }

      #footer-mobile .contact-box {
         float:left;
         width:33%;
         height:100px;
         border-right:1px solid #b7b7b6;
         background-repeat:no-repeat;
         background-position:center 21px;
         background-size:36px 32px;
      }

      #footer-mobile .contact-box:first-child {
         width:33.125%;
      }

      #footer-mobile .contact-box:last-child {
         width:33.2%;
         border-right:none;
      }

      #footer-mobile .contact-box span {
         float:left;
         width:100%;
         color:#ffffff;
         text-align:center;
         margin-top:62px;
      }

      .contact-box.tel {
         background-image:url(/_images/ic_phone-contact.png);
      }

      .contact-box.email {
         background-image:url(/_images/ic_email-contact.png);
      }

      .contact-box.anfahrt {
         background-image:url(/_images/ic_map-contact.png);
      }*/
  /* *************************************************
     *** Pageelements
     ************************************************* */
  /* ********** teaser-start ********** */
  .teaser-start {
    width: 100%;
    margin: 0 0 40px 0;
  }

  .teaser-start img {
    width: 100%;
    height: auto;
    max-width: 590px;
  }

  /* ********** Referenzen ********** */
  .referenzbox {
    width: 100%;
  }

  .referenzbox .left {
    width: 100%;
  }

  .referenzbox .right {
    width: 90%;
    padding: 0 5% 70px 5%;
    border-left: 0;
  }

  /* ********** Referenzen Detail ********** */
  .references-detail {
    width: 100%;
  }

  .references-detail .left {
    width: 100%;
    padding: 0;
  }

  .references-detail .right {
    width: 100%;
    padding: 0;
  }

  /* ********** piwik ********** */
  #optout {
    height: 340px !important;
  }

  /* ********** contact form ********** */
  .contactform {
    margin-bottom: 50px;
  }

  .form-row label[for="-1"],
  .form-row label[for="-2"] {
    width: 60px;
  }

  .form-row input[type="text"],
  .form-row input[type="password"] {
    width: 92%;
  }

  .form-row select {
    width: 97%;
  }

  label[for="optin_agb"] {
    width: 100%;
  }

  .form-row input[type="checkbox"] {
    float: left;
  }

  .plz-ort-input-wrapper {
    width: 100%;
  }

  .plz-input {
    width: 25%;
    margin-right: 2%;
  }

  .ort-input {
    width: 73%;
  }

  .plz-input .textbox {
    width: 77% !important;
  }

  .ort-input .textbox {
    width: 85% !important;
  }

  .defaultform textarea,
  .form-row textarea {
    width: 92%;
    max-width: none;
  }

  .button-submit {
    margin-left: 0;
  }

  .pageElement-contactform {
    width: 100%;
  }

  .ds-inhalt {
    width: 100%;
  }

  .ds-inhalt span {
    width: 90%;
  }

  .nomobile {
    display: none !important;
  }
}
/*
************************************************************
Styles:     flix//theme
Project:    interaktiv manufaktur - 760px Responsive CSS
Autor:      Michael Eipel, Fjodor Zimmermann
Copyright:  (c) 2015-2017 interaktiv manufaktur
Website:    www.interaktiv-manufaktur.de
************************************************************
*/
@media only screen and (min-width: 760px) and (max-width: 1000px) {
  #flixteaser-canvas .left {
    margin-right: 3%;
  }

  #flixteaser-canvas .right {
    width: 68%;
  }

  #footer-canvas .zitat {
    float: right;
    font-size: 28px;
    margin: 65px 120px 0 0;
    width: auto;
    padding: 0;
  }

  .label-canvas.leistungen .labelbox,
  .label-canvas.loesungen .labelbox {
    margin-right: 10%;
  }

  .label-canvas.leistungen .labelbox.last,
  .label-canvas.loesungen .labelbox.last {
    margin-right: 0;
  }

  #input-canvas .inputbox {
    width: 250px;
    margin: 0 30px 15px 0;
  }

  #input-canvas .inputbox.last {
    margin: 0;
  }

  /* *************************************************
  *** Pageelements
  ************************************************* */
  /* ********** Referenzen ********** */
  .referenzbox .right {
    width: 94%;
    padding: 0 3% 70px 3%;
  }

  /* ********** Contactform Main ********** */
  .plz-input .textbox {
    width: 86% !important;
  }

  .ort-input .textbox {
    width: 87% !important;
  }

  /* ********** piwik ********** */
  body #optout {
    height: 170px !important;
  }

  .teaser-start h2 {
    margin: 10px 26px;
    font-size: 31px;
  }
}
@media only screen and (min-width: 950px) and (max-width: 1000px) {
  .footer-contact-box {
    display: block;
  }
}
/*
************************************************************
Styles:     flix//theme
Project:    interaktiv manufaktur - 480px Responsive CSS
Autor:      Michael Eipel
Copyright:  (c) 2015 interaktiv manufaktur
Website:    www.interaktiv-manufaktur.de
************************************************************
*/
/* NOTE - This Style transformes only specific components from 320px.css  */
/* starting body tag increases the level without important */
@media only screen and (min-width: 480px) and (max-width: 1000px) {
  body .form-row select {
    width: 95%;
  }
}
@media only screen and (min-width: 480px) and (max-width: 760px) {
  /* ********** piwik ********** */
  body #optout {
    height: 230px !important;
  }
}
@media only screen and (min-width: 590px) and (max-width: 1000px) {
  .teaser-start {
    float: left;
    width: 49%;
    margin-right: 1%;
  }

  .teaser-start.nomargin {
    float: left;
    width: 49%;
    margin-left: 1%;
  }

  .teaser-start h2 {
    margin: 10px 26px;
    font-size: 31px;
  }
}

/*# sourceMappingURL=custom.css.map */