/* Contao Open Source CMS, (c) 2005-2016 Leo Feyer, LGPL license */
@media (max-width:767px){#wrapper{margin:0;width:auto}#container{padding-left:0;padding-right:0}#main,#left,#right{float:none;width:auto}#left{right:0;margin-left:0}#right{margin-right:0}}img{max-width:100%;height:auto}.ie7 img{-ms-interpolation-mode:bicubic}.ie8 img{width:auto}
/* Contao Open Source CMS, (c) 2005-2016 Leo Feyer, LGPL license */
body,div,h1,h2,h3,h4,h5,h6,p,blockquote,pre,code,ol,ul,li,dl,dt,dd,figure,table,th,td,form,fieldset,legend,input,textarea{margin:0;padding:0}table{border-spacing:0;border-collapse:collapse}caption,th,td{text-align:left;text-align:start;vertical-align:top}abbr,acronym{font-variant:normal;border-bottom:1px dotted #666;cursor:help}blockquote,q{quotes:none}fieldset,img{border:0}ul{list-style-type:none}sup{vertical-align:text-top}sub{vertical-align:text-bottom}del{text-decoration:line-through}ins{text-decoration:none}header,footer,nav,section,aside,article,figure,figcaption{display:block}body{font:12px/1 "Lucida Grande","Lucida Sans Unicode",Verdana,sans-serif;color:#000}input,button,textarea,select{font-family:inherit;font-size:99%;font-weight:inherit}pre,code{font-family:Monaco,monospace}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:400}h1{font-size:1.8333em}h2{font-size:1.6667em}h3{font-size:1.5em}h4{font-size:1.3333em}table{font-size:inherit}caption,th{font-weight:700}a{color:#00f}h1,h2,h3,h4,h5,h6{margin-top:1em}h1,h2,h3,h4,h5,h6,p,pre,blockquote,table,ol,ul,form{margin-bottom:12px}
/* Contao Open Source CMS, (c) 2005-2016 Leo Feyer, LGPL license */
legend{width:100%;display:block;font-weight:700;border:0}input[type=text],input[type=password],input[type=date],input[type=datetime],input[type=email],input[type=number],input[type=search],input[type=tel],input[type=time],input[type=url],input:not([type]),textarea{width:100%;display:inline-block;padding:3px 6px;background:#fff;border:1px solid #ccc;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;-moz-box-shadow:inset 0 1px 1px #eee;-webkit-box-shadow:inset 0 1px 1px #eee;box-shadow:inset 0 1px 1px #eee;-moz-transition:all .15s linear;-webkit-transition:all .15s linear;-o-transition:all .15s linear;transition:all .15s linear;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}input[type=text]:focus,input[type=password]:focus,input[type=date]:focus,input[type=datetime]:focus,input[type=email]:focus,input[type=number]:focus,input[type=search]:focus,input[type=tel]:focus,input[type=time]:focus,input[type=url]:focus,input:not([type]):focus,textarea:focus{outline:0;background:#fcfcfc;border-color:#bbb}input[type=file]{cursor:pointer}select,input[type=file]{display:block}input[type=file],input[type=image],input[type=submit],input[type=reset],input[type=button],input[type=radio],input[type=checkbox]{width:auto}textarea,select[multiple],select[size]{height:auto}input[type=radio],input[type=checkbox]{margin:0 3px 0 0}input[type=radio],input[type=checkbox],label{vertical-align:middle}input[disabled],select[disabled],textarea[disabled],input[readonly],select[readonly],textarea[readonly]{cursor:not-allowed;background:#eee}input[type=radio][disabled],input[type=checkbox][disabled],input[type=radio][readonly],input[type=checkbox][readonly]{background:0 0}input[type=submit],.button{display:inline-block;padding:4px 15px 4px 14px;margin-bottom:0;text-align:center;vertical-align:middle;line-height:16px;font-size:11px;color:#000;cursor:pointer;border:1px solid #ccc;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;background-color:#ececec;background-image:-moz-linear-gradient(top,#fff,#ececec);background-image:-webkit-linear-gradient(top,#fff,#ececec);background-image:-ms-linear-gradient(top,#fff,#ececec);background-image:-o-linear-gradient(top,#fff,#ececec);background-image:linear-gradient(to bottom,#fff,#ececec);background-repeat:repeat-x;-moz-transition:background .15s linear;-webkit-transition:background .15s linear;-o-transition:background .15s linear;transition:background .15s linear}input[type=submit]:hover,.button:hover{text-decoration:none;background-position:0 -15px!important}input[type=submit]:active,.button:active{background-color:#e6e6e6;background-position:0 -30px!important}input[type=submit].blue,.button.blue{background-color:#2f96b4;background-image:-moz-linear-gradient(top,#5bc0de,#2f96b4);background-image:-webkit-linear-gradient(top,#5bc0de,#2f96b4);background-image:-ms-linear-gradient(top,#5bc0de,#2f96b4);background-image:-o-linear-gradient(top,#5bc0de,#2f96b4);background-image:linear-gradient(to bottom,#5bc0de,#2f96b4);border-color:#2f96b4;color:#fff}input[type=submit].blue:active,.button.blue:active{background-color:#2e95b3}input[type=submit].green,.button.green{background-color:#51a351;background-image:-moz-linear-gradient(top,#62c462,#51a351);background-image:-webkit-linear-gradient(top,#62c462,#51a351);background-image:-ms-linear-gradient(top,#62c462,#51a351);background-image:-o-linear-gradient(top,#62c462,#51a351);background-image:linear-gradient(to bottom,#62c462,#51a351);border-color:#51a351;color:#fff}input[type=submit].green:active,.button.green:active{background-color:#4f9f4f}input[type=submit].orange,.button.orange{background-color:#f89406;background-image:-moz-linear-gradient(top,#fbb450,#f89406);background-image:-webkit-linear-gradient(top,#fbb450,#f89406);background-image:-ms-linear-gradient(top,#fbb450,#f89406);background-image:-o-linear-gradient(top,#fbb450,#f89406);background-image:linear-gradient(to bottom,#fbb450,#f89406);border-color:#f89406;color:#fff}input[type=submit].orange:active,.button.orange:active{background-color:#f28f04}input[type=submit].red,.button.red{background-color:#bd362f;background-image:-moz-linear-gradient(top,#ee5f5b,#bd362f);background-image:-webkit-linear-gradient(top,#ee5f5b,#bd362f);background-image:-ms-linear-gradient(top,#ee5f5b,#bd362f);background-image:-o-linear-gradient(top,#ee5f5b,#bd362f);background-image:linear-gradient(to bottom,#ee5f5b,#bd362f);border-color:#bd362f;color:#fff}input[type=submit].red:active,.button.red:active{background-color:#be322b}
/* Contao Open Source CMS, (c) 2005-2016 Leo Feyer, LGPL license */
body,form,figure{margin:0;padding:0}img{border:0}header,footer,nav,section,aside,article,figure,figcaption{display:block}body{font-size:100.01%}select,input,textarea{font-size:99%}#container,.inside{position:relative}#main,#left,#right{float:left;position:relative}#main{width:100%}#left{margin-left:-100%}#right{margin-right:-100%}#footer{clear:both}#main .inside{min-height:1px}.ce_gallery>ul{margin:0;padding:0;overflow:hidden;list-style:none}.ce_gallery>ul li{float:left}.ce_gallery>ul li.col_first{clear:left}.float_left{float:left}.float_right{float:right}.block{overflow:hidden}.clear,#clear{height:.1px;font-size:.1px;line-height:.1px;clear:both}.invisible{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.custom{display:block}#container:after,.custom:after{content:"";display:table;clear:both}
.rs-columns {
  clear: both;
  display: inline-block;
  width: 100%;
}

.rs-column {
  float: left;
  width: 100%;
  margin-top: 7.69231%;
  margin-right: 7.69231%;
}
.rs-column.-large-first {
  clear: left;
}
.rs-column.-large-last {
  margin-right: -5px;
}
.rs-column.-large-first-row {
  margin-top: 0;
}
.rs-column.-large-col-1-1 {
  width: 100%;
}
.rs-column.-large-col-2-1 {
  width: 46.15385%;
}
.rs-column.-large-col-2-2 {
  width: 100%;
}
.rs-column.-large-col-3-1 {
  width: 28.20513%;
}
.rs-column.-large-col-3-2 {
  width: 64.10256%;
}
.rs-column.-large-col-3-3 {
  width: 100%;
}
.rs-column.-large-col-4-1 {
  width: 19.23077%;
}
.rs-column.-large-col-4-2 {
  width: 46.15385%;
}
.rs-column.-large-col-4-3 {
  width: 73.07692%;
}
.rs-column.-large-col-4-4 {
  width: 100%;
}
.rs-column.-large-col-5-1 {
  width: 13.84615%;
}
.rs-column.-large-col-5-2 {
  width: 35.38462%;
}
.rs-column.-large-col-5-3 {
  width: 56.92308%;
}
.rs-column.-large-col-5-4 {
  width: 78.46154%;
}
.rs-column.-large-col-5-5 {
  width: 100%;
}
.rs-column.-large-col-6-1 {
  width: 10.25641%;
}
.rs-column.-large-col-6-2 {
  width: 28.20513%;
}
.rs-column.-large-col-6-3 {
  width: 46.15385%;
}
.rs-column.-large-col-6-4 {
  width: 64.10256%;
}
.rs-column.-large-col-6-5 {
  width: 82.05128%;
}
.rs-column.-large-col-6-6 {
  width: 100%;
}
@media screen and (max-width: 900px) {
  .rs-column {
    margin-top: 7.69231%;
    margin-right: 7.69231%;
  }
  .rs-column.-large-first {
    clear: none;
  }
  .rs-column.-large-last {
    margin-right: 7.69231%;
  }
  .rs-column.-large-first-row {
    margin-top: 7.69231%;
  }
  .rs-column.-medium-first {
    clear: left;
  }
  .rs-column.-medium-last {
    margin-right: -5px;
  }
  .rs-column.-medium-first-row {
    margin-top: 0;
  }
  .rs-column.-medium-col-1-1 {
    width: 100%;
  }
  .rs-column.-medium-col-2-1 {
    width: 46.15385%;
  }
  .rs-column.-medium-col-2-2 {
    width: 100%;
  }
  .rs-column.-medium-col-3-1 {
    width: 28.20513%;
  }
  .rs-column.-medium-col-3-2 {
    width: 64.10256%;
  }
  .rs-column.-medium-col-3-3 {
    width: 100%;
  }
  .rs-column.-medium-col-4-1 {
    width: 19.23077%;
  }
  .rs-column.-medium-col-4-2 {
    width: 46.15385%;
  }
  .rs-column.-medium-col-4-3 {
    width: 73.07692%;
  }
  .rs-column.-medium-col-4-4 {
    width: 100%;
  }
  .rs-column.-medium-col-5-1 {
    width: 13.84615%;
  }
  .rs-column.-medium-col-5-2 {
    width: 35.38462%;
  }
  .rs-column.-medium-col-5-3 {
    width: 56.92308%;
  }
  .rs-column.-medium-col-5-4 {
    width: 78.46154%;
  }
  .rs-column.-medium-col-5-5 {
    width: 100%;
  }
  .rs-column.-medium-col-6-1 {
    width: 10.25641%;
  }
  .rs-column.-medium-col-6-2 {
    width: 28.20513%;
  }
  .rs-column.-medium-col-6-3 {
    width: 46.15385%;
  }
  .rs-column.-medium-col-6-4 {
    width: 64.10256%;
  }
  .rs-column.-medium-col-6-5 {
    width: 82.05128%;
  }
  .rs-column.-medium-col-6-6 {
    width: 100%;
  }
}
@media screen and (max-width: 599px) {
  .rs-column {
    margin-right: 7.69231%;
  }
  .rs-column.-medium-first {
    clear: none;
  }
  .rs-column.-medium-last {
    margin-right: 7.69231%;
  }
  .rs-column.-medium-first-row {
    margin-top: 7.69231%;
  }
  .rs-column.-small-first {
    clear: left;
  }
  .rs-column.-small-last {
    margin-right: -5px;
  }
  .rs-column.-small-first-row {
    margin-top: 0;
  }
  .rs-column.-small-col-1-1 {
    width: 100%;
  }
  .rs-column.-small-col-2-1 {
    width: 46.15385%;
  }
  .rs-column.-small-col-2-2 {
    width: 100%;
  }
  .rs-column.-small-col-3-1 {
    width: 28.20513%;
  }
  .rs-column.-small-col-3-2 {
    width: 64.10256%;
  }
  .rs-column.-small-col-3-3 {
    width: 100%;
  }
  .rs-column.-small-col-4-1 {
    width: 19.23077%;
  }
  .rs-column.-small-col-4-2 {
    width: 46.15385%;
  }
  .rs-column.-small-col-4-3 {
    width: 73.07692%;
  }
  .rs-column.-small-col-4-4 {
    width: 100%;
  }
  .rs-column.-small-col-5-1 {
    width: 13.84615%;
  }
  .rs-column.-small-col-5-2 {
    width: 35.38462%;
  }
  .rs-column.-small-col-5-3 {
    width: 56.92308%;
  }
  .rs-column.-small-col-5-4 {
    width: 78.46154%;
  }
  .rs-column.-small-col-5-5 {
    width: 100%;
  }
  .rs-column.-small-col-6-1 {
    width: 10.25641%;
  }
  .rs-column.-small-col-6-2 {
    width: 28.20513%;
  }
  .rs-column.-small-col-6-3 {
    width: 46.15385%;
  }
  .rs-column.-small-col-6-4 {
    width: 64.10256%;
  }
  .rs-column.-small-col-6-5 {
    width: 82.05128%;
  }
  .rs-column.-small-col-6-6 {
    width: 100%;
  }
}

@charset "UTF-8";
/* Paths */
/*  then use this in your scss like so to avoid invalid css errors:

header {
	background: url("/files/layout/hero-image.jpg") no-repeat left bottom;
}

*/
/* COLORS */
/* SIZES */
/* MAPS */
/* Create a step size.*/
/* This is the percentage each heading will be reduced by. */
/* The mixin */
/* MIXINS */
.bg-soft img {
  background: aliceblue; }

.foldedcorner {
  background: #EBEFE1;
  /* fallback */
  background: linear-gradient(45deg, rgba(0, 0, 0, 0.1) 50%, transparent 0) 100% 0/25px 25px no-repeat, linear-gradient(-135deg, transparent 18px, #EBEFE1 0) 0/auto;
  /* ceil(25/sqrt(2)) = 18 */ }

.rounded, #kundenstimme img,
.kundenstimme img {
  border-radius: 2.8125em;
  margin: 0 0.9375em 0 0; }

.box-friendly {
  background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 40%, rgba(255, 255, 255, 0.4) 50%, rgba(255, 255, 255, 0.3) 60%, rgba(255, 255, 255, 0) 100%);
  border-top: 0.0625em solid #E7E8E3;
  margin: 1.5625em 0 0;
  padding: 1.5625em 0 0.3125em;
  border-bottom: 0.0625em solid #E7E8E3; }

.bottom-2 {
  margin-bottom: 3%; }

.spacer-top, div.message {
  margin-top: 1.25em; }

.spacer-bottom {
  margin-bottom: 1.25em !important; }

.cta {
  margin-top: 1.875em;
  margin-bottom: 2em;
  width: 100%;
  text-align: center;
  box-sizing: border-box; }

.centered-figure {
  text-align: center; }

body.logodesigntest #logoline {
  background: url("/files/test/logo-design-zukunft.jpg") no-repeat;
  background-size: cover;
  min-height: 12.5em;
  /* will be overwritten for mobile devices later */
  height: auto; }

.toplink {
  bottom: 1.5625em;
  display: none;
  position: fixed;
  right: 0; }

.contact-button {
  display: inline-block;
  background-color: #A5A1A7;
  padding: 1.0625em;
  top: 0;
  right: 7.375em;
  position: fixed;
  box-shadow: 0.1875em 0.125em 0.5em #393b39;
  transition: background-color 1s;
  z-index: 9998; }

@media only all and (min-width: 768px) {
  .contact-button {
    top: 7.25em;
    right: 0; } }

.contact-button:hover {
  background-color: #6F6276;
  box-shadow: 0.0625em 0.0625em 0.1875em #393b39; }

.button-basic, .button-blue, .button-offwhite-comp, a.button-green, a.button-startpage, input[type="submit"], p.back, .list-taetig li,
.more {
  border-radius: 0.3125em;
  text-shadow: 0 1px 1px #fff 1px 1px #000;
  display: inline-block;
  /* für Abstand benötigt */
  border: 0.0625em solid #E3E7EA;
  padding: 0.9375em 1.125em 0.9375em;
  color: #76AE31;
  background: #FAFAF0;
  text-decoration: none;
  font-weight: bold; }

.button-blue {
  transition: background 1s;
  background: #35aae0;
  color: white; }

.button-blue:hover {
  background: #1e90c4; }

.button-offwhite-comp {
  transition: background 1s;
  background: #A5A1A7;
  color: white; }

.button-offwhite-comp:hover {
  background: #6F6276;
  color: #FAFAF0; }

a.button-green {
  background: #76AE31; }

@media only all and (min-width: 900px) {
  .button-block {
    width: 50%; } }

a.button-startpage {
  transition: background 1s;
  background: rgba(255, 255, 255, 0.2);
  color: white;
  text-transform: uppercase;
  letter-spacing: 0.125em; }

a.button-startpage:hover, #footer a.button-startpage:hover {
  background: rgba(255, 255, 255, 0); }

input[type="submit"] {
  transition: background 1s;
  padding: 0.4375em 1.5em;
  color: white;
  background: #76AE31; }

input[type="submit"] {
  margin-top: 0.5em;
  font-size: 1.125em;
  line-height: 1.4;
  line-height: inherit; }
  @media screen and (min-width: 426px) {
    input[type="submit"] {
      font-size: 1.125em; } }
  @media screen and (min-width: 768px) {
    input[type="submit"] {
      font-size: 1.25em;
      line-height: 1.5; } }
  @media screen and (min-width: 900px) {
    input[type="submit"] {
      font-size: 1.25em; } }
  @media screen and (min-width: 1200px) {
    input[type="submit"] {
      font-size: 1.25em; } }
  @media screen and (min-width: 1360px) {
    input[type="submit"] {
      font-size: 1.25em;
      line-height: 1.5; } }
  @media screen and (min-width: 1460px) {
    input[type="submit"] {
      font-size: 1.25em; } }

/* #mainnav a.kontakt:hover, */
input[type="submit"]:hover {
  background: #9cd15b; }

#formular-praxisflyer input.submit {
  padding: 0.9375em; }

.button-box {
  width: 100%;
  margin-bottom: 1.875em;
  text-align: center;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between; }

.button-box a {
  margin: 0.625em 0;
  -webkit-flex: 0 0 auto;
  -ms-flex: 0 0 auto;
  flex: 0 0 auto; }

.button-box a.button-basic:first-child, .button-box a.button-blue:first-child, .button-box a.button-offwhite-comp:first-child, .button-box a.button-green:first-child, .button-box a.button-startpage:first-child {
  background: url("/files/layout/arrow-simple-black-left.svg") left center no-repeat;
  padding-left: 1.875em; }

.button-box a.button-basic:last-child, .button-box a.button-blue:last-child, .button-box a.button-offwhite-comp:last-child, .button-box a.button-green:last-child, .button-box a.button-startpage:last-child {
  background: url("/files/layout/arrow-simple-black-right.svg") center right no-repeat;
  padding-right: 1.875em; }

.ce_form {
  background: #EBEFE1;
  /* fallback */
  background: linear-gradient(45deg, rgba(0, 0, 0, 0.1) 50%, transparent 0) 100% 0/25px 25px no-repeat, linear-gradient(-135deg, transparent 18px, #EBEFE1 0) 0/auto;
  /* ceil(25/sqrt(2)) = 18 */
  padding: 0 20px 20px 20px; }

#sucheform.ce_form {
  background: none;
  padding: 0; }

input, textarea {
  margin-top: 0.3125em; }

.widget {
  margin-top: 0.625em; }

.radio_container span {
  margin-right: 1em; }

.form-project span {
  display: inline-block;
  margin: 0.1875em 0.9375em 0; }

#formular-praxisflyer .widget-text {
  display: inline-block;
  width: 49%; }

@media only screen and (max-width: 768px) {
  #formular-praxisflyer .widget-text {
    display: block;
    width: 100%; } }

#formular-praxisflyer .submit_container {
  text-align: center;
  width: 100%;
  margin: 1em; }

/* for website "Budgetanfrage" form  -  nur neue browser*/
textarea.message {
  margin-top: 8px; }

fieldset.checkbox_container {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin: 1.25em 0; }

fieldset.checkbox_container span {
  -webkit-flex: 0 1 12.5em;
  -ms-flex: 0 1 12.5em;
  flex: 0 1 12.5em; }

form#f4 label[for^="ctrl"],
form#f5 label[for^="ctrl"] {
  font-weight: bold;
  margin: 1.875em 0 0.3125em 0; }

label.budget {
  display: block;
  margin: 0 0 0 0; }

input[range] {
  display: inline-block;
  width: 80%;
  margin: 0 0 0.625em 0; }

output {
  position: relative;
  top: -0.5em; }

output::after {
  content: " Euro"; }

/* for Site Search form only */
div.extrabox {
  width: 10.625em;
  height: 55px;
  display: -webkit-inline-flex;
  display: -ms-inline-flexbox;
  display: inline-flex; }

.extrabox .widget {
  margin-top: 0; }

.extrabox div.ce_form {
  background: none;
  margin: 0.1875em 0 0 0;
  padding: 0; }

div input.submit.magnifier {
  background: rgba(234, 10, 150, 0) none repeat scroll 0 0;
  display: inline;
  float: right;
  position: relative;
  left: -0.3125em;
  top: -1.75em; }

/* smaller for small screens */
@media only screen and (max-width: 1200px) {
  #navline div.mod_form {
    position: absolute;
    top: 0.75em;
    right: 0;
    display: inline-block;
    width: 9.375em; }
  .extrabox input {
    font-size: 0.875em;
    padding: 0.3125em; }
  div input.submit.magnifier {
    top: -2.25em; } }

#searchengine-result form {
  margin: 0 0 1.25em 0; }

/* Video als iframe in HTML Content Element wegen rel=0 */
.intrinsic-container {
  position: relative;
  height: 0;
  overflow: hidden;
  margin: 0.625em 0 0 0; }

/* 16x9 Aspect Ratio */
.intrinsic-container-16x9 {
  padding-bottom: 56.25%; }

/* 4x3 Aspect Ratio */
.intrinsic-container-4x3 {
  padding-bottom: 75%; }

.intrinsic-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0; }

h2.video-heading {
  margin: 20px 0 0 0; }

h2.video-heading:first-child {
  margin: 0; }

.ce_teaser h3,
.item h3 {
  margin-top: 0.5em; }

.ce_teaser img,
.item img {
  margin-bottom: 0.625em; }

a {
  color: #35aae0;
  transition: color 1s; }

a:hover, #footer a:hover {
  color: #3A5795; }

#footer h2 {
  font-size: 1.5em;
  line-height: 1.875em; }

#footer a {
  color: #9B9B9B;
  text-decoration: none; }

.handfont {
  font-size: 1.25em;
  font-family: "ff-netto-web", Georgia, serif; }

@media screen and (min-width: 768px) {
  .handfont {
    font-size: 1.5em; } }

h1, #header-centered p {
  font-size: 1.3125em;
  display: inline;
  line-height: 1.375em;
  font-family: "lobster", sans-serif;
  color: #76AE31;
  text-shadow: 1px 1px 8px white; }
  @media screen and (min-width: 426px) {
    h1, #header-centered p {
      font-size: 1.5em; } }
  @media screen and (min-width: 768px) {
    h1, #header-centered p {
      font-size: 1.625em; } }
  @media screen and (min-width: 900px) {
    h1, #header-centered p {
      font-size: 1.875em; } }
  @media screen and (min-width: 1200px) {
    h1, #header-centered p {
      font-size: 2.125em; } }
  @media screen and (min-width: 1460px) {
    h1, #header-centered p {
      font-size: 2.125em; } }

h2 {
  font-size: 1.8125em;
  line-height: 1.125em;
  font-weight: bold;
  font-family: "ff-netto-web", Georgia, serif;
  margin: 1.25em 0 0.75em; }
  @media screen and (min-width: 426px) {
    h2 {
      font-size: 1.8125em; } }
  @media screen and (min-width: 768px) {
    h2 {
      font-size: 1.875em; } }
  @media screen and (min-width: 1200px) {
    h2 {
      font-size: 2.1875em; } }
  @media screen and (min-width: 1460px) {
    h2 {
      font-size: 2.3125em; } }

h3 {
  font-size: 1.575em;
  font-weight: bold;
  line-height: 130%; }

h4 {
  font-size: 1.425em;
  font-weight: bold;
  line-height: 130%; }

h5 {
  font-size: 1.35em;
  font-weight: bold; }

h6 {
  font-size: 1.2em;
  font-weight: bold; }

body {
  font-family: "Open Sans", Verdana, sans-serif;
  color: #393b39; }

p,
li,
label,
legend,
figcaption {
  font-size: 1.125em;
  line-height: 1.4; }
  @media screen and (min-width: 426px) {
    p,
    li,
    label,
    legend,
    figcaption {
      font-size: 1.125em; } }
  @media screen and (min-width: 768px) {
    p,
    li,
    label,
    legend,
    figcaption {
      font-size: 1.25em;
      line-height: 1.5; } }
  @media screen and (min-width: 900px) {
    p,
    li,
    label,
    legend,
    figcaption {
      font-size: 1.25em; } }
  @media screen and (min-width: 1200px) {
    p,
    li,
    label,
    legend,
    figcaption {
      font-size: 1.25em; } }
  @media screen and (min-width: 1360px) {
    p,
    li,
    label,
    legend,
    figcaption {
      font-size: 1.25em;
      line-height: 1.5; } }
  @media screen and (min-width: 1460px) {
    p,
    li,
    label,
    legend,
    figcaption {
      font-size: 1.25em; } }

figcaption {
  margin: 0 0 1.5625em 0;
  font-size: 0.875em; }

.referencelist-picture figcaption {
  font-size: 1.125em;
  line-height: 1.4; }
  @media screen and (min-width: 426px) {
    .referencelist-picture figcaption {
      font-size: 1.125em; } }
  @media screen and (min-width: 768px) {
    .referencelist-picture figcaption {
      font-size: 1.25em;
      line-height: 1.5; } }
  @media screen and (min-width: 900px) {
    .referencelist-picture figcaption {
      font-size: 1.25em; } }
  @media screen and (min-width: 1200px) {
    .referencelist-picture figcaption {
      font-size: 1.25em; } }
  @media screen and (min-width: 1360px) {
    .referencelist-picture figcaption {
      font-size: 1.25em;
      line-height: 1.5; } }
  @media screen and (min-width: 1460px) {
    .referencelist-picture figcaption {
      font-size: 1.25em; } }

#header-centered p {
  color: #393b39; }

#header-centered .mod_article {
  text-align: center; }

/*
// Old CSS rules
body.start #header-centered {
    display: block; !* table von standardstyle auflösen *!
}

body.start #header-centered a.homelink !* zentriert Logo vertikal *! {
    display: block;
    margin: 4% 0 0 0;
    width: 100% !important;
    text-align: center;
}

body.start .homelink img {  !* Logo nur auf Startseite gross machen *!
    height: 40vh;
}

div#supertext {
    width: 100%;
    font-family: "ff-netto-web", sans-serif;
    font-size: em(40);
    line-height: em(44);
    margin: em(40) 0 0 0;
    text-align: center;
}

#supertext > p > a {
    text-decoration: none;
}

.redorbluepill {
    display: block;
    width: 100vw;
    text-align: center;
}

.redorbluepill a {
    margin: 5%;
    font-size: em(22);
    padding: em(15) em(20);
}

.redorbluepill .button-blue {
    color: white;
}*/
html, body {
  -webkit-text-size-adjust: 100%;
  /* Prevent font scaling in landscape */ }

#logoline {
  height: auto;
  border-top: 0.3125em solid transparent;
  border-image: linear-gradient(to right, #E7E8E3 0%, #35aae0 33%, #76AE31 66%, #DFF2C3 100%);
  border-image-slice: 1;
  border-right: 0em solid transparent;
  border-left: 0em solid transparent; }

#naviline .inside,
#logoline .inside,
#header-centered {
  margin: 0 auto; }

#logoline .inside {
  box-sizing: border-box;
  /* wichtig in Verbindung mit padding und % Wert in mediaquery mit 90% Breite */
  padding: 6px 1.5625em;
  /* f�r li & re Abstand */ }

#main .inside {
  padding-top: 1.5625em; }

#header-centered {
  height: 25em;
  position: relative; }

#header-centered a.homelink {
  display: inline-block;
  line-height: 0;
  min-width: 15.625em;
  width: 100%;
  position: relative;
  top: 4.6875em;
  /* keep image_container 100% height */
  box-sizing: border-box; }

header .mod_article {
  display: inline-block;
  position: relative;
  top: 6.25em; }

header .mod_article div.ce_text {
  text-align: center; }

img.logo {
  width: 100%;
  height: auto;
  vertical-align: middle; }

#wrapper {
  color: #393b39;
  background: #FAFAF0;
  width: 100%; }

#container {
  position: relative;
  z-index: 0; }

/*
div.callme,
nav.mod_changelanguage {
   @include flex(0, 0, auto);
    width: auto;
}

#container {
    padding-left: 0; // reset from standard style set through Contao layout
}

#container-centered {
    margin: 0 auto;
    overflow: hidden;
    padding-bottom: em(40);
    padding-left: 0; // war 35%, Test mit 0 auf Ipad randlos aber ohne linke spalte
    width: 100%; !* scheint nicht gebraucht zu werden *!
}
*/
body.col-1 #container-centered {
  padding-left: 0 !important; }

/*
#left {
    padding: $gap 0 0 0;
    right: 0;
    width: 35%;
}

#main {
    padding: em(20) 0 0 35%;
    width: 65%;
}
*/
body.col-1 #main {
  width: 100% !important; }

div.inside {
  margin: 0 1.5625em; }

#footer {
  background: #F2F2F2;
  border-top: 0.0625em solid #E7E8E3;
  padding: 1.5625em 0; }

.footernav {
  -webkit-flex: 1 1 13.75em;
  -ms-flex: 1 1 13.75em;
  flex: 1 1 13.75em;
  padding: 0 1.5625em 1.5625em 1.5625em; }

div.footer-centered {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap; }

header {
  background-size: cover; }

body.start header {
  background: #D5D9E5 url("/files/bilder/rotterdam1.jpg") no-repeat center center;
  background-size: cover; }

body.logo-design header {
  background: url("/files/header/logo-design-zukunft.jpg") no-repeat;
  background-size: cover;
  background-position: center 55%; }

body.arbeiten header {
  background: url("/files/header/logo-design-zukunft.jpg") no-repeat;
  background-size: cover;
  background-position: center 55%; }

body.webdesign header {
  background: url("/files/header/bespoke-web-design.jpg") no-repeat;
  background-size: cover;
  background-position: center 55%; }
  body.webdesign header h1, body.webdesign header #header-centered p, #header-centered body.webdesign header p {
    text-shadow: 1px 1px 80px white; }

body.webdesign header p {
  color: white !important;
  text-shadow: 1px 1px 80px white; }

body.webdesign .logo {
  -webkit-filter: drop-shadow(17px 11px 10px white);
  filter: drop-shadow(17px 11px 10px white); }

#naviline {
  background-color: #393b39;
  height: 55px;
  position: relative;
  z-index: 99; }

nav {
  margin: 0; }

nav#mainnav ul {
  padding: 0;
  margin: 0;
  list-style: none;
  position: absolute;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  -webkit-justify-content: space-around;
  -ms-flex-pack: distribute;
  justify-content: space-around; }

/* Positioning the navigation items inline */
nav#mainnav ul li {
  height: 55px;
  margin: 0 -7px 0 0;
  display: inline-block;
  background-color: #393b39;
  -webkit-flex: 0 1 auto;
  -ms-flex: 0 1 auto;
  flex: 0 1 auto; }

/* Styling the links */
nav#mainnav a {
  display: block;
  padding: 0 0.625em;
  color: white;
  font-size: 1em;
  line-height: 55px;
  text-decoration: none;
  text-align: center;
  background-color: #393b39;
  transition: background-color 1s; }

nav#mainnav ul.level_1 > li.submenu > a {
  border-radius: 0.3125em 0.3125em 0 0; }

/* smaller for small screens */
@media only screen and (max-width: 1200px) {
  nav#mainnav a {
    font-size: 0.875em; } }

/* Styling the Submenu links */
nav#mainnav ul ul > li > a {
  font-size: 0.71875em;
  line-height: initial;
  text-align: initial;
  padding: 0.5em 0.8125em;
  background: #9B9B9B; }

nav#mainnav ul li.active {
  color: white;
  line-height: initial;
  text-align: initial; }

nav#mainnav ul li ul li span.active {
  height: 55px;
  padding: 0 0.8125em;
  line-height: 55px;
  font-size: 0.8em; }

nav#mainnav ul li.active.submenu {
  color: white;
  line-height: 55px; }

nav#mainnav ul li span.active {
  color: #76AE31;
  line-height: 55px; }

/* Background color change on Hover */
nav#mainnav a:hover {
  background-color: black; }

/*  nav#mainnav li.submenu a:hover {
     background-color: $middlegrey;
   }*/
nav#mainnav ul li.submenu:hover > a {
  background-color: pink; }

nav#mainnav li.submenu a:active {
  background-color: #9B9B9B; }

/* Hide Dropdowns by Default and giving it a position of absolute */
nav#mainnav ul ul {
  display: none;
  position: absolute;
  top: 100%;
  width: 100%;
  max-width: 17.5em;
  border: 1px solid #9B9B9B;
  background: #9B9B9B; }

/* Display Dropdowns on Hover */
nav#mainnav ul li:hover > ul {
  display: inherit; }

/* Fisrt Tier Dropdown */
nav#mainnav ul ul li {
  height: auto;
  display: list-item;
  position: relative;
  margin: 0;
  border-bottom: 1px solid #333333; }

nav#mainnav ul ul li.last {
  border-bottom: none; }

/* Change ' +' in order to change the Dropdown symbol */
nav#mainnav li > a:after,
nav#mainnav ul li.active.submenu > span:after {
  content: ' ▾'; }

nav#mainnav li > a:only-child:after {
  content: ''; }

.navlink {
  position: fixed;
  z-index: 9999;
  top: 0;
  right: 0;
  background-color: white;
  padding: 0.75em;
  box-shadow: 0.1875em 0.125em 0.5em #393b39; }

.navlink span,
.navlink img {
  vertical-align: middle; }

.navlink a {
  font-weight: bold; }

nav#subnav {
  background: #EBEFE1;
  /* fallback */
  background: linear-gradient(45deg, rgba(0, 0, 0, 0.1) 50%, transparent 0) 100% 0/25px 25px no-repeat, linear-gradient(-135deg, transparent 18px, #EBEFE1 0) 0/auto;
  /* ceil(25/sqrt(2)) = 18 */
  margin: 0 0 1.25em 0; }

nav#subnav ul {
  margin: 1.25em 1.125em; }

nav#subnav li {
  margin: 0;
  padding: 0; }

nav#subnav a {
  transition: color 1s;
  display: block;
  padding: 0.5em;
  color: #35aae0;
  text-decoration: none;
  border-bottom: 0.0625em dotted silver; }

nav#subnav a:hover {
  color: #3A5795; }

nav#subnav span.active {
  display: block;
  padding: 0.5em;
  color: #76AE31;
  text-decoration: none;
  border-bottom: 0.0625em dotted silver; }

/* Changelanguage navi */
.mod_changelanguage {
  position: absolute;
  top: -12px;
  right: -26px;
  padding: 4px 8px;
  background: #DFF2C3; }

.mod_changelanguage ul {
  margin-bottom: 0; }

.mod_changelanguage li {
  display: inline-block;
  font-size: 1em;
  margin-right: 0.1875em; }

/* Breadcrumb Navi */
.mod_breadcrumb li {
  background: url("/files/layout/arrow-re.svg") no-repeat left center;
  font-size: 0.875em;
  display: inline-block;
  padding: 0 0.3125em 0 0.9375em; }

.mod_breadcrumb li.first {
  background: none;
  padding: 0 0.3125em 0 0; }

.flex-container, .flex-container-percent {
  margin: 0 -0.3125em;
  /* Hack um Flexbox items links mit dem restl.
    Copytext bündig zu halten und dennoch inneren Marginabstand zu behalten.
    Erfordert separaten div class=flexbox-container im Backend*/
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap; }

.item-basic {
  -webkit-flex: 1 1 14.375em;
  -ms-flex: 1 1 14.375em;
  flex: 1 1 14.375em; }

.flex-container-percent {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
  margin: 1.25em 0; }

.item-percent {
  -webkit-flex: 0 1 46%;
  -ms-flex: 0 1 46%;
  flex: 0 1 46%; }

@media screen and (max-width: 768px) {
  .item-percent {
    -webkit-flex: 0 1 100%;
    -ms-flex: 0 1 100%;
    flex: 0 1 100%; } }

.ce_teaser,
.item {
  -webkit-flex: 1 1 14.375em;
  -ms-flex: 1 1 14.375em;
  flex: 1 1 14.375em;
  background: white;
  margin: 0.3125em;
  border: 1px solid #F2F2F2;
  padding: 0 0.9375em 0.9375em; }

.malzwei,
.item2 {
  -webkit-flex: 1 1 31.25em;
  -ms-flex: 1 1 31.25em;
  flex: 1 1 31.25em;
  background: white;
  margin: 0.3125em;
  border: 1px solid #F2F2F2;
  padding: 0 0.9375em 0.9375em; }

.item-bild {
  -webkit-flex: 1 1 47%;
  -ms-flex: 1 1 47%;
  flex: 1 1 47%;
  margin: 0.3125em; }
  .item-bild img {
    width: 100%; }

@media only screen and (min-width: 1200px) {
  .flex-container.nowrap, .nowrap.flex-container-percent {
    -webkit-flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap; } }

#kundenstimme,
.ce_text.kundenstimme {
  width: auto;
  padding: 1.875em 1.875em 0.9375em;
  vertical-align: middle;
  margin: 0.625em 0; }

div.kundenstimme {
  background: rgba(255, 255, 255, 0.75); }

span.slogan_author {
  font-style: italic;
  text-align: right;
  display: block;
  margin-top: 0.5em; }

#main .mod_article > div.ce_image.bilder-mit-abstand {
  width: calc(50% - 1.5625em);
  border: 1px solid hotpink; }

.flexrow {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center; }

@media only all and (min-width: 768px) {
  .flexrow {
    -webkit-flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap; } }

div.flexrow div.ce_image {
  margin: 0 0.9375em; }

div.flexrow img {
  width: 100%; }

.svgpic .image_container img,
.ce_teaser img[src*="svg"] {
  min-width: 100%;
  box-sizing: border-box; }

#social a {
  text-decoration: none;
  margin-right: 0.75em;
  margin-bottom: 0.75em;
  display: inline-block; }

#social a:last-child {
  margin-right: 0; }

div.toggler {
  background: #EBEFE1 url("/files/layout/pfeil-in-circle-50px.svg") no-repeat 0.4375em center; }

div.toggler:hover,
div.toggler.ui-state-active {
  background: #9B9B9B url("/files/layout/pfeil-in-circle-down-50px.svg") no-repeat 0.4375em center;
  color: #FAFAF0; }

.listitem-none {
  background: white none repeat scroll 0 0 !important;
  margin: 0 0.625em 0.625em 0 !important;
  padding: 0.625em 0.75em !important; }

.pricebadge {
  background: #3d5459 none repeat scroll 0 0;
  padding: 0.9375em;
  border: 0.9375em solid white;
  color: #EBEFE1; }

.spo {
  position: relative;
  top: -1.4375em; }

.price {
  font-size: 4.5em;
  line-height: 110%;
  text-shadow: 0.3125em 0.3125em 5.625em #ebefe1;
  color: #EBEFE1;
  border-top: 0.1875em double;
  border-bottom: 0.1875em double; }

.euro {
  display: block;
  padding: 0 0 1.25em; }

.net {
  display: block;
  padding: 1.25em 0 0 0; }

.ce_text ul {
  padding: 0.0625em 0 0 0; }

.ce_text ul li {
  /* padding:em(12) $abstand-big; */
  list-style-type: disc;
  margin: 0.625em 1.25em; }

div.checked-simple ul li {
  min-height: 2em;
  list-style-type: none;
  padding: 0 0 0 2.1875em;
  margin-left: 0;
  background: url("/files/layout/checked-green-simple.svg") no-repeat 0 0; }

div.arrow ul li {
  min-height: 2em;
  list-style-type: none;
  padding: 0 0 0 2.1875em;
  margin-left: 0;
  background: url("/files/layout/arrow-r-black.svg") no-repeat 0 0.125em; }

.blume .ce_text ul li, ul.blume li {
  list-style-type: none;
  background: url("/files/layout/blume-5.svg") no-repeat 0 0.1875em;
  padding: 0 0 0 1.5em;
  margin: 0 0 0.625em 0; }

.plus .ce_text ul li, ul.plus li {
  background: transparent url("/files/layout/plus.svg") no-repeat scroll 0 0.1875em;
  list-style-type: none;
  margin: 0 0 0.625em;
  padding: 0 0 0 1.5em; }

.minus .ce_text ul li, ul.minus li {
  background: transparent url("/files/layout/minus.svg") no-repeat scroll 0 0.1875em;
  list-style-type: none;
  margin: 0 0 0.625em;
  padding: 0 0 0 1.5em; }

.question .ce_text ul li, ul.question li {
  background: transparent url("/files/layout/question.svg") no-repeat scroll 0 0.1875em;
  list-style-type: none;
  margin: 0 0 0.625em;
  padding: 0 0 0 1.5em; }

.checked .ce_text ul li, ul.checked li {
  background: transparent url("/files/layout/checked-green.svg") no-repeat scroll 0 0.1875em;
  list-style-type: none;
  margin: 0 0 0.625em;
  padding: 0 0 0 0.25em;
  min-height: 2.3125em; }

.list-taetig li {
  list-style-type: none;
  color: #393b39;
  background: #FAFAF0 !important;
  margin: 0 0.375em 0.5em 0 !important;
  padding: 0.375em 0.5em !important; }

.striped h2, .darkblock {
  padding: 0.75em 15px 0.625em;
  color: white;
  background: #9B9B9B;
  margin: 0;
  text-align: center; }

.striped ul, ul.striped {
  padding: 0; }

.striped ul li, ul.striped li {
  margin: 0;
  padding: 0.75em 20px;
  list-style-type: none;
  border-bottom: 0.0625em dotted #9B9B9B; }

.striped ul li:nth-child(2n+1) {
  background: #f2f2f2 none repeat scroll 0 0; }

div.striped ul.checked li:nth-child(2n+1) {
  background: transparent url("/files/layout/checked-green.svg") no-repeat scroll 0 0.25em; }

.listicon-centered li {
  background-position: center left !important;
  background-color: transparent;
  padding-left: 1.875em !important;
  transition: background-color 1.3s; }

.listicon-centered li:hover {
  background-color: rgba(53, 170, 224, 0.2); }

td, th {
  padding: 0.5em 0.625em; }

td:nth-child(2n) {
  background: #F2F2F2; }

th.startup {
  background-color: #ff9000; }

td.startup.pricerange {
  background-color: #ffd399; }

th.business {
  background-color: #76AE31; }

td.business.pricerange {
  background-color: #c0e296; }

th.company {
  background-color: #133956;
  color: #FAFAF0; }

td.company.pricerange {
  background-color: #aed2ed; }

tr.accordion-row {
  cursor: pointer;
  width: 100%;
  border: none;
  outline: none;
  transition: .4s; }

tr.accordion-row.active, tr.accordion-row:hover {
  background-color: #ddd; }

tr.panel-row {
  display: none;
  background-color: yellow; }

div.layout_short.news4ward_list {
  margin: 0 0 1.875em 0; }

.socialButtons {
  margin: 0 0 10px; }

.news4ward_list h2 {
  margin: 0 0 0.625em 0; }

.news4ward_list p.info {
  display: inline-block;
  color: #393b39;
  padding: 0 5px;
  margin: 1.875em 0 0.75em 0; }

span.nextArticle,
span.prevArticle {
  display: inline-block;
  margin-bottom: 1.25em; }

.blogteaser figure {
  width: 27%;
  display: inline-block;
  box-sizing: border-box;
  margin: 0 2% 0 0; }

.blogteaser p {
  display: inline-block;
  width: 70%;
  box-sizing: border-box;
  vertical-align: top; }

/* ---------------   Blog teaser < 600px  ----------- */
@media only screen and (max-width: 768px) {
  .blogteaser figure {
    width: 100%;
    display: block;
    margin: 0; }
  .blogteaser p {
    display: block;
    width: 100%; } }

#ueber-mich img {
  border-radius: 9.375em;
  margin-bottom: 0.9375em; }

#ueber-mich .flex-container-vert-cent {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-flex-wrap: nowrap;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -webkit-align-content: center;
  -ms-flex-line-pack: center;
  align-content: center; }
  @media (max-width: 875px) {
    #ueber-mich .flex-container-vert-cent {
      /* media query mixin */
      -webkit-flex-direction: column;
      -ms-flex-direction: column;
      flex-direction: column; } }

#ueber-mich .item-vert-cent {
  -webkit-align-self: center;
  -ms-flex-item-align: center;
  -ms-grid-row-align: center;
  align-self: center; }
  @media (max-width: 875px) {
    #ueber-mich .item-vert-cent {
      text-align: center; } }

.perc40 {
  -webkit-flex: 1 1 auto;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  min-width: 9.375em; }

.perc60 {
  -webkit-flex: 1 1 auto;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto; }

#ueber-mich > div.flex-container-vert-cent.box-friendly.bottom-2 > div {
  margin: 0.625em; }

.blockquote:before {
  content: open-quote; }

.blockquote:after {
  content: close-quote; }

#cboxOverlay {
  background: #9B9B9B;
  opacity: 0.7 !important; }

#cboxClose {
  background: url("/files/layout/crossed-red-simple.svg") no-repeat center center;
  width: 3.125em;
  height: 3.125em; }

#cboxClose:hover {
  background: url("/files/layout/crossed-red-simple.svg") no-repeat center center;
  width: 3.125em;
  height: 3.125em; }

@media only all and (min-width: 768px) {
  #container-centered,
  .footer-centered {
    width: 80%;
    margin: 0 auto; }
  #header-centered {
    display: table;
    width: 100% !important; }
  #header-centered a.homelink {
    display: table-cell;
    position: static;
    line-height: 0;
    min-width: 15.625em;
    width: 40% !important;
    height: 100%;
    /* keep image_container 100% height */
    box-sizing: border-box;
    vertical-align: middle;
    text-align: center; }
  header .mod_article {
    position: static;
    display: table-cell;
    vertical-align: middle; }
  header .mod_article div.ce_text {
    text-align: center;
    padding: 0 16%; } }

@media screen and (min-width: 1200px) {
  #container-centered,
  .footer-centered {
    width: 60%;
    margin: 0 auto; }
  #naviline .inside {
    width: 60%;
    margin: 0 auto; } }

@media screen and (min-width: 1460px) {
  #container-centered,
  .footer-centered {
    width: 50%;
    margin: 0 auto; } }

/* IPad 3 + 4 */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 2) {
  /*  h1 {
    font-size: em(42);
    letter-spacing: em(-0.8);
  }

  p {
    font-size: em(19);
  }*/ }

/*
!* ---------------  XS Screens / Smartphonescreens < 400px  ----------- *!
@media only all 
and (max-width : 400px)  {
!* Styles *!

        .callme {
    width: 31px !important;
    overflow: hidden;
}

// BILDER in Artikeln
//Alte Browser und neue
#main .mod_article > div.ce_image.bilder-mit-abstand:nth-child(2n+1) {   
!* Abstand rechts fuer jedes 2. Bild ab dem 1. zuruecksetzen*!
    margin-right: 0;
}

#main .mod_article > div.ce_image.bilder-mit-abstand {
    width: 100%;
    display: inline-block;
    margin-bottom: $abstand-big;
    vertical-align: top;
}

.flexrow {
    @include flex-wrap(wrap);
    @include flexbox();
}

div.flexrow div.ce_image {
    margin: 0;
}
}


!* ---------------  Layoutbuilder Breakpoint < 876px  ----------- *!
@media only all
and (max-width : tablet)  {
!* Styles *!


#container-centered {
  padding-left: 0; !* reset from 20% in standard style *!
}

#left {
    width: 100%; !* reset from 20% in standard style *!
    margin-left: 0; !* fix issue with layoutbuilder -100% *!
}

#main {
    width: 100%; !* reset from 80% in standard style *!
    padding: em(40) 0 0 0;
    }

    // Superheader H1 Umbruch ermöglichen und erhöhen
    #superheader {
        height: auto;
    }
    #superheader {
        text-align: center;
        padding: $abstand-big / 4 0;
    }

    .flexbox #superheader div.inside {
        height: auto;
    }
}

!* ---------------  M Screens > tablet   ----------- *!
@media only all 
and (min-width : tablet)  {
!* Styles *!

#logoline .inside,
#navline .inside,
#header-centered {
    width: 70%;
}

#container-centered {
    width: 70%;
    margin:0 auto;
}
div.footer-centered {
    width: 70%;
    margin:0 auto;
}
}
!* --------------- Extra Style für col-1 1-sp. Layout ---- *!
!* behebt Layoutspalteneinteilungsfehler zw. tablet und desktop ---- *!

@media only all
and (min-width : tablet) and (max-width : desktop) {

    !* Styles *!
    // für 1-spaltiges Layout Breiten verändern
    body.col-1 #main {
        padding: em(40) 0 0 0;
        width: 70%;     !* main spalte erweitern *!
    }
}

!* ---------------  L Screens > 1200px   ----------- *!
@media only all and (min-width: map-get($breakpoints, desktop))  {
!* Styles *!

#logoline .inside,
#navline .inside,
#header-centered {
    width: 70%; //war 90
}

#container-centered {
    width: 70%;
    margin:0 auto;
    padding-left: 33%; !* war 27 mit 90, Platz umverteilen: linke spalte etw. mehr nach rechts verr�cken *!
}

div.footer-centered {
    width: 70%;
    margin:0 auto;
}

#left {
    padding: em(40) 0 0 0;
    right: 0;
    width: 33%;      !* Platz umverteilen: linke spalte verschm�lern *!
}

#main {
  padding: em(40) 0 0 0;
  width: 75%;     !* main spalte erweitern *!
}

    // für 1-spaltiges Layout Breiten verändern
    body.col-1 {
        #logoline .inside,
        #navline .inside,
        #header-centered {
            width: 70%; //war 90
        }

        #container-centered {
            width: 70%;
            margin:0 auto;
            padding-left: 33%; !* war 27 mit 90, Platz umverteilen: linke spalte etw. mehr nach rechts verr�cken *!
        }

        div.footer-centered {
            width: 70%;
            margin:0 auto;
        }

    }


//KUNDENSTIMME SEITE
.flexbox body.flexartikelpage div#main > div.inside {
    display: flex;
    flex-wrap: wrap;
}

.flexbox body.flexartikelpage div#main > div.inside .mod_article {
    display: inline;
    flex: 1 1 280px;
}
}

!* ---------------  XL Screens > 1600px   ----------- *!
@media only all and (min-width: map-get($breakpoints, largescreen)) {
!* Styles *!

#logoline .inside,
#navline .inside,
#header-centered {
    width: 45%;
}

#container-centered {
    width: 45%;
    margin:0 auto;
    padding-left: 42%; !* Platz umverteilen: linke spalte noch mehr nach rechts verr�cken mit footer b�ndig *!
}
div.footer-centered {
    width: 45%;
    margin:0 auto;
}
    // für 1-spaltiges Layout Breiten ändern
    body.col-1 {
        #logoline .inside,
        #navline .inside,
        #header-centered {
            width: 45%;
        }

        #container-centered {
            width: 45%;
            margin:0 auto;
            padding-left: 42%; !* Platz umverteilen: linke spalte noch mehr nach rechts verr�cken mit footer b�ndig *!
        }
        div.footer-centered {
            width: 45%;
            margin:0 auto;
        }
    }
}*/