@charset "UTF-8";

/* 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: 0;
    margin: 0;
}

/* 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 */
}

/* *******************************************************************************
*** 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: 100%;
    background-color: #ffffff;
}

#content-grid {
    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;
}


/* ********** 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;
    border: 2px solid #7c7b7b;
    background: #FFFFFF none;
    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 {
    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: 0 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: 0;
}

/* *************************************************
*** 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: 10px 0 0 0;
}

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

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

.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 0;
}

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

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

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

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

/* *************************************************
*** 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 {
    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 .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;
}

/* ********** 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: 800px;
}

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

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

.defaultform textarea,
.form-row textarea {
    display: block;
    width: 800px;
    max-width: 800px;
    border: 2px 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: 2px solid #007cc4;
    color: #007cc4;
}

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

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

.form-row label {
    display: block;
    width: auto;
    padding: 5px 0;
}

.form-row input {
}

.form-row input[type='text'],
.form-row input[type='password'] {
    width: 800px;
    max-width: 800px;
    border: 2px 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 {
    cursor: pointer;
    margin-left: 0;
    font-size: 16px;
    color: #ffffff;
    background-color: #007cc4;
    padding: 10px 200px;
    border-radius: 5px;
    border: 1px solid #007cc4;

    display: inline-block;
    line-height: 22px;
    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 {
    border-color: #008ee0;
    text-decoration: none;
    color: #ffffff;
    background-color: #008ee0;
}

.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: 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;
}

/*
************************************************************
1000px CSS
************************************************************
*/
@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;
    }
}

/*
************************************************************
320px Responsive CSS
************************************************************
*/
@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 0 no-repeat;
        background-size: 19px 100px;
    }

    .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;
    }


    .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;
    }

    .defaultform .calltoaction {
        width: 92%;
    }

    #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: 0;
        left: 0;
        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;
    }

    #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;
    }

    /* *************************************************
       *** 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;
        padding-left: 20%;
        padding-right: 20%;
    }

    .pageelement-contactform {
        width: 100%;
    }

    .ds-inhalt {
        width: 100%;
    }

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

    .nomobile {
        display: none !important;
    }
}

/*
************************************************************
760px Responsive CSS
************************************************************
*/
@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;
    }
}

/*
************************************************************
480px Responsive CSS
************************************************************
*/
/* 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;
    }
}


/* quill adaptions
*****************************************  */

p[linebreak='true'] {
    margin-bottom: 0;
    padding-bottom: 0;
}

ol li[data-list='bullet'] {
    list-style: disc outside;
    margin-left: 20px;
}

ol li[data-list='ordered'] {
    list-style: decimal outside;
    margin-left: 20px;
}

.texteditor ol li[data-list='bullet'] {
    list-style: disc outside;
}

.texteditor p {
    margin-bottom: 10px;
}

.texteditor p[linebreak='true'] {
    margin-top: -10px;
}

.texteditor p[linebreak='true']:first-child {
    margin-top: 0;
}

.texteditor > :not(:last-child) {
    margin-bottom: 20px;
}

.texteditor ol,
.texteditor ul {
    margin-left: 20px;
    margin-top: 10px;
    margin-bottom: 10px;
}

.texteditor ol li[data-list='bullet'] {
    list-style: disc outside;
}


/* form adaptions
*****************************************  */

.radiobuttons-wrapper input {
    /* Float entfernt - nutzt Flexbox */
}

.radiobuttons-wrapper {
    display: flex;
    gap: 25px;
    flex-wrap: wrap;
    row-gap: 0.4rem;
}

.radiobuttons-wrapper .radiobutton-wrapper {
    display: flex;
    width: fit-content;
    align-items: center;
    padding: 0;
    cursor: pointer;
}

.form-row label {
}

.form-row.salutation legend {
    padding: 5px 0;
}