/* muli-300 - latin */
@font-face {
  font-family: 'Muli';
  font-style: normal;
  font-weight: 300;
  src: local('Muli Light'), local('Muli-Light'),
       url('files/Fonts/muli-v11-latin-300.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('files/Fonts/muli-v11-latin-300.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* muli-regular - latin */
@font-face {
  font-family: 'Muli';
  font-style: normal;
  font-weight: 400;
  src: local('Muli Regular'), local('Muli-Regular'),
       url('files/Fonts/muli-v11-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('files/Fonts/muli-v11-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

html {
  overflow-y: scroll;
}

body {
  font-family: 'Muli', sans-serif;
  font-weight: 300;
  font-size: 120%;
  color: #565757;
  background-color: #508b4f;
}

@media only screen and (max-width: 1024px) {
  body {
    font-size: 100%;
  }
}

@media print {
  html {
    overflow-y: visible;
  }
  body {
    font-size: 100%;
    color: black;
    background-color: white;
  }
}

/* ----------------------- Helper ------------------------- */

p { margin: 0 0 0.8em 0; } /* MSIE nimmt sonst einen erheblich größeren Abstand */
p:last-child { margin: 0; }

hr { height: 1px; border: 0; border-top: 1px solid #565757; padding: 0; margin: 0 0 1em 0; color: white;  }

.thinspace { margin-left: -0.17em; }

.big { font-size: larger; }
.big .big { font-size: 1em; }

.nowrap { white-space: nowrap; }

.wordwrap {
  white-space: pre-wrap; /* CSS3 */
  white-space: -moz-pre-wrap; /* Mozilla, FF2 und Camino2 aber nicht  */
  white-space: -pre-wrap; /* Opera 4-6 */
  white-space: -o-pre-wrap; /* Opera 7 */
  word-wrap: break-word; /* MSIE 5.5+ */
}

.silbentrennung { 
  -webkit-hyphens: auto;
  -moz-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto; 
}

.ellipse { 
  display: block;
  white-space: nowrap;
  overflow: hidden; /* "overflow" value must be different from "visible" */ 
  -o-text-overflow: ellipsis;  
  text-overflow: ellipsis;  
}

.clearfix:after {
  visibility: hidden;
  display: block;
  font-size: 0;
  content: " ";
  clear: both;
  height: 0;
}

.hidden {
  display: none;
  visibility: hidden;
}

.noview { /* identisch mit .printonly */
  height: 1px !important;
  width: 1px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  overflow: hidden !important;
  line-height: 2 !important;
  position: absolute !important;
  clip: rect(1px 1px 1px 1px); /* IE6, IE7 und alle anderen Browser */
  clip: rect(1px, 1px, 1px, 1px); /* FF macht zusammen mit margin: -1px einen oberen und linken Abstand */
}
body:hover .noview a, /* damit die unsichtbaren Elemente auf mausbedienbaren Geräten keinen Fokus annehmen können */
body:hover .noview input,
body:hover .noview button { display: none !important; }

@media screen, projection, tv, handheld {
  .printonly { /* identisch mit .noview */
    height: 1px !important;
    width: 1px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    overflow: hidden !important;
    line-height: 2 !important;
    position: absolute !important;
    clip: rect(1px 1px 1px 1px); /* IE6, IE7 und alle anderen Browser */
    clip: rect(1px, 1px, 1px, 1px); /* alle Browser */
  }
}

@media print, embossed {
  .noprint { display: none !important; }
  #cms_vorschau_label { display: none; }
}

del { color: #BB0000; }
ins { color: #009900; }

#nojs .if-js,
#js .if-nojs {
  display: none;
}

/*
a[rel="prev"]:before { content: "« "; speak: none; }
a[rel="next"]:after { content: " »"; speak: none; }
*/

/* ----------------------- Normalize.css (Auszüge) ------------------------- */
/* https://github.com/necolas/normalize.css/blob/master/normalize.css */

html {
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
}

body,
figure {
  margin: 0;
}

article,
aside,
details,
figcaption,
figure, /* Safari iPhone 3, MSIE 8 */
footer,
header,
hgroup,
main,
nav,
section,
summary {
  display: block;
}

audio,
canvas,
progress,
video {
  display: inline-block; /* MSIE 8/9 */
  vertical-align: baseline; /* 'progress' in Chrome, Firefox und Opera */
}

a { background: transparent; } /* Remove the gray background color from active links in MSIE 10 */

a:active { outline: 0; }

b, strong { font-weight: 400; }

small { font-size: 82%; }
small small { font-size: 1em; }

sub, sup {
  font-size: 82%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}
sup { top: -0.34em; }
sub { bottom: -0.25em; }

img { border: 0; }

button,
input,
optgroup,
select,
textarea {
  font-size: inherit;
  margin: 0; /* Firefox 4+, Safari, and Chrome */
}

button { overflow: visible; } /* `overflow` set to `hidden` in MSIE 8-11 */

button::-moz-focus-inner, /* Remove inner padding and border in Firefox 4+ */
input::-moz-focus-inner {
  border: 0;
  padding: 0;
}

textarea { overflow: auto; } /* Remove default vertical scrollbar in MSIE 8-11. */
nav {
  background-color: #3b3b3a;
  position: relative;
}

nav .logo a {
  display: inline-block;
  vertical-align: bottom;
  height: 0;
  padding-top: 72px;
  width: 136px;
  background-image: url(files/Layout/Logo.png?ver=1446106644);
  background-repeat: no-repeat;
  background-position: left center;
  overflow: hidden;
}

@media screen {
  .id1 nav .logo a {
    visibility: hidden;
  }
}
@media only screen and (max-width: 1110px) {
  .id1 nav .logo a {
    visibility: visible;
  }
}

@media only screen and (max-width: 580px) {
  nav .logo a {
    padding-top: 58px;
  }
}

@media print {
  nav {
    background-color: transparent;
  }
  nav .logo a {
    display: block;
    padding: 0;
    width: auto;
    height: auto;
    background: none;
    overflow: auto;
  }
}


nav .briefkasten a {
  position: absolute;
  top: 0;
  right: 0;
  display: block;
  width: 86px;
  height: 72px;
  overflow: hidden;
  text-indent: -20em;
  background-image: url(files/Layout/Kontakt_Umschlag.png?ver=1446106643);
  background-repeat: no-repeat;
  background-position: center center;
}

nav .briefkasten a:hover,
nav .briefkasten a:active {
  opacity: 0.85;
}


@media only screen and (max-width: 580px) {
  nav .briefkasten a {
    width: 78px;
    height: 58px;
  }
}

@media print {
  nav .briefkasten a {
    display: none;
  }
}
/* die folgenden Stylesheets sind nur auf der Startseite wirksam */

header {
  background-color: #d9dadb;
  height: 469px;
  background-image: url(files/Layout/Kopfmotiv-2.jpg?ver=1547463774);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: right bottom;
}

header .img {
  width: 320px;
  height: 93px;
  background-image: url(files/Layout/Logo_terraplan_Baumanagement.svg?ver=1573734768);
  background-repeat: no-repeat;
  background-position: left bottom;
  padding-top: 320px;
}

@media only screen and (max-width: 1110px) {
  header .img {
    display: none;
  }
}

header a {
  color: rgb(180,13,9);
  font-weight: bold;
  font-size: 2em;
  text-decoration: none;

  position: absolute;
  top: 130px;
}
header a:hover {
  color: #444;
}

header a.show-slider {
  transform: translateX(0);
  transition: transform 1000ms 1000ms;
}


@media only screen and (max-width: 937px) {
  header {
    height: 0;
    padding-bottom: 50%;
  }
  header a {
    top: 110px;
  }
}
@media only screen and (max-width: 360px) {
  header a {
    font-size: 1.8em;
  }
}

@media print {
  header {
    display: none;
  }
}
main {
  line-height: 1.25;
  background-color: #ececed;
  padding-top: 54px;
  padding-bottom: 47px;
}

@media only screen and (max-width: 1280px) {
  main {
    padding-top: 4%;
    padding-bottom: 3.5%;
  }
}

@media only screen and (max-width: 580px) {
  main {
    padding-top: 23px;
    padding-bottom: 20px;
  }
}

@media only screen and (max-width: 479px) {
  main {
    font-weight: 300;
  }
}

main a         { color: #508b4f; }
main a:visited { color: gray; }
main a:hover   { color: black; }
main a:active  { color: gray; }

@media print {
  main {
    background-color: transparent;
    padding-top: 24px;
    padding-bottom: 0;
  }
  main a,
  main a:visited,
  main a:hover,
  main a:active { color: black; text-decoration: underline; }
  main a[href^="http"]:after { content: " <"attr(href)">"; }
  main .notprinturl a[href^="http"]:after,
  main a[href^="http"].notprinturl:after { content: ""; }
}
h1, h2, h3, h4, h5, h6 {
  font-weight: normal;
  font-weight: 400;
  margin-top: 0;
}

h1, h2.h1, .super-teaser { 
  font-size: 1.47em;
}

h1, h2.h1 { 
  color: #508b4f;
  line-height: 1.3;
  margin-bottom: 0.5em;
}

h2, .teaser { 
  font-size: 1.2em;
}
h2 {
  margin-bottom: 0.5em;
}

h3, h4, h5, h6 {
  font-size: 1.1em;
  margin-bottom: 0;
}

@media print {
  h1, h2.h1 { 
    color: inherit;
    font-size: 1.8em;
    line-height: 1.35;
    margin-bottom: 0.3em;
  }

  h2 { 
    font-size: 1.25em;
    margin-bottom: 0.5em;
  }
}
.absatz ul, .absatz ol {
  padding-top: 0; 
  margin-top: 0; 
  padding-bottom: 0; 
  margin-bottom: 1em;
}

.listemptyline li {
  margin-bottom: 1em;
}

.blindlist {
  list-style: none;
  margin-left: 0;
  padding-left: 0;
}

.absatz ul {
  list-style: none;
  margin-left: 0;
  padding-left: 0;
}

/* Runde Bullits */

.absatz li {
  padding-left: 0.92em;
  position: relative;
}

.absatz li:before {
  content: '•';
  position: absolute;
  left: 2px;
  color: black;
  font-weight: bold;
  font-family: Arial, sans-serif; /* sonst werden die Bullits unter Mac und Win unterschiedlich groß */
  font-size: 1.05em;
  line-height: 1.15;
}

.blindlist li,
.absatz .blindlist li { padding-left: 0; }
.blindlist li:before,
.absatz .blindlist li:before { display: none; }
/* Hinweis: die Thumbnails werden als Hintergrundgrafik ausgeführt, 
   damit sie auf Smartphones gar nicht erst geladen werden. */

@media screen {
  .thumb-boxen .dir a {
    display: block;
  }

  .thumb-boxen .dir .bild {
    height: 0;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    padding-bottom: 66%;
    margin-bottom: 8px;
  }

  .thumb-boxen .dir .linktext {
    display: block;
  }

  .thumb-boxen .dir li {
    margin-bottom: 36px;
  }

  .thumb-boxen-4 .dir .w-special {
    width: 25%;
  }
  .thumb-boxen-5 .dir .w-special {
    width: 20%;
  }

  .thumb-boxen .dir .w-special:last-child .bild {
    background-color: #ddd;
  }
}


@media only screen and (max-width: 639px) {
  .thumb-boxen .page-padding {
    padding-left: 0;
    padding-right: 0;
  }

  .thumb-boxen .dir .w-special {
    display: block;
    width: auto;
    padding: 0;
    margin: 0 0 1px 0;
  }

  .thumb-boxen .dir a {
    display: block;
    color: inherit;
    background-color: #d9dadb;
    font-weight: 400;
    text-decoration: none;
    text-transform: uppercase;
    max-width: none;
    padding: 21px 3.5%;
  }

  .thumb-boxen .dir .bild {
    display: none;
  }
}

@media print {
  .thumb-boxen .dir .w-special {
    display: block;
    width: auto;
  }
  .thumb-boxen .dir .bild {
    display: none;
  }
}
.id1445581390 h2[id]:not(:target) + .dir {
  height: 1px;
  overflow: hidden;
  opacity: 0;
}

.id1445581390 h2[id]:target + .dir {
  margin-top: 0.5em;
  opacity: 1;
  transition: opacity 750ms;
}


.link-liste .dir li {
  margin-bottom: 0.5em;
}

.link-liste .dir li a {
  text-decoration: none;
}

.link-liste .dir li div {
  font-weight: 400;
}

.link-liste .dir li a div {
  text-decoration: underline;
}

.link-liste .dir li span {
  color: gray;
}

@media only screen and (max-width: 640px) {
  .link-liste .dir .w33 {
    width: 50%;
  }
}

@media only screen and (max-width: 479px) {
  .link-liste .dir .w33 {
    display: block;
    width: auto;
  }
}

@media print {
  .link-liste .dir .w33 {
    display: block;
    width: auto;
  }
}
@media screen {
  .root-cell {
    margin: 0 auto;
    display: block;
    max-width: 1280px;
  }
}

.grid-cell {
  display: inline-block;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  padding: 0 2%;
  margin: 0;
}

@media (max-width: 479px) {
  .grid-cell {
    padding: 0 1.5%;
  }
}

.grid-cell img {
  vertical-align: baseline;
}

.grid-cell.w100 {
  display: block;
}

.top > .grid-cell,
.top > .grid-cell img {
  vertical-align: top;
}

.middle > .grid-cell,
.middle > .grid-cell img {
  vertical-align: middle;
}

.bottom > .grid-cell,
.bottom > .grid-cell img {
  vertical-align: bottom;
}


ul.grid-cell,
ol.grid-cell {
  list-style: none;
}

/* Achtung: hier nicht max-width verwenden, da im MSIE 8 das box-sizing sonst nicht funktioniert */
.w80 { width: 80%; }
.w75 { width: 75%; }
.w66 { width: 66.66666%; }
.w60 { width: 60%; }
.w50 { width: 50%; }
.w40 { width: 40%; }
.w33 { width: 33.33333%; }
.w25 { width: 25%; }
.w20 { width: 20%; }

@media (max-width: 479px) {
  .grid-cell { display: block; }
  .w80,
  .w75,
  .w66,
  .w60,
  .w50,
  .w40,
  .w33,
  .w25,
  .w20 { width: auto; }
}

.lte480 .msie8 .grid-cell { display: block; }
.lte480 .msie8 .w80,
.lte480 .msie8 .w75,
.lte480 .msie8 .w66,
.lte480 .msie8 .w60,
.lte480 .msie8 .w50,
.lte480 .msie8 .w40,
.lte480 .msie8 .w33,
.lte480 .msie8 .w25,
.lte480 .msie8 .w20 { width: auto; }

.page-padding {
  padding: 0 2%;
}

.grid-cell.fit {
  padding: 0;
}

@media print {
  .page-padding { padding: 0; }
}


.lte768 .msie8 .grid-cell    { padding: 0 2.5%; }
.lte480 .msie8 .grid-cell    { padding: 0 3.5%; }
.lte360 .msie8 .grid-cell    { padding: 0 5%; }

.responsive-box {
  position: relative;
  height: 0; 
}

.responsive-box img {
  width: 100%;
  height: auto;
  vertical-align: bottom;
}

/* Bild überschreitet niemals seine natürliche Größe; Hochformate lassen sich in der Breite begrenzen */
.responsive-box.natural-size img {
  position: absolute;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 100%;
}

.responsive-box iframe,
.responsive-box video,
.responsive-box object {
  position: absolute;
  width: 100%;
  height: 100%;
}
.absatz { margin-bottom: 1.5em; }
.absatz:empty { display: none; }

.absatz:last-child,
.absatz * p:last-child,
.absatz:last-child > *:last-child { margin-bottom: 0; }

section {
  margin-bottom: 47px;
}

section:last-child {
  margin-bottom: 0;
}


@media only screen and (max-width: 1280px) {
  section {
    margin-bottom: 3.5%;
  }
}

@media only screen and (max-width: 580px) {
  section {
    margin-bottom: 20px;
  }
}

@media print {
  .absatz,
  section {
    margin-bottom: 1.8em;
  }
}

#js .bildershow {
  /* height: 2px, um den border der Bilder "freizulegen" */
  overflow: hidden;
}
#nojs .bildershow.responsive-box {
  height: auto !important;
  padding-bottom: 0 !important;
}

#js .bildershow.hand-cursor {
  cursor: pointer;
}


#js .bildershow .slidebar {
  position: absolute; /* parentElement .responsive-box ist standardmäßig position: relative; */
  width: 100%;
  height: 100%;
  
  -webkit-transform: translate3d(0,0,0);
  transform: translate3d(0,0,0);
  -webkit-backface-visibility: hidden; /* unterdrückt im Safari das "Flickern" beim Zurückspringen des Filmstreifens */
}


#js .bildershow .frame {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  /* height: 0 wird durch responsive-box gesetzt */
}

#nojs .bildershow .frame {
  margin-bottom: 2em;
}

#js .bildershow .frame:first-child {
  z-index: 1; /* damit beim Laden der Seite sofort das erste Bild angezeigt wird (sonst läge das letzte oben) */
}
footer {
  font-weight: normal;
  font-weight: 400;
  padding-top: 25px;
  padding-bottom: 25px;
}


@media only screen and (max-width: 479px) {
  footer {
    padding-top: 15px;
  }
}

@media print {
  footer { display: none; }
}


footer hr {
  border-top-color: #508b4f;
  margin-bottom: 0;
}


footer li {
  display: inline-block;
  margin-right: 7%;
}
footer li:last-child {
  margin-right: 0;
}

footer li a {
  display: inline-block;
  color: white;
  text-decoration: none;
  text-transform: uppercase;
}


@media only screen and (max-width: 767px) {
  footer li {
    display: block;
    margin-right: 0;
  }

  footer li a {
    display: inline-block;
    padding: 10px 0;
  }
}


footer li a:hover {
  text-decoration: underline;
}
.startseite .super-teaser {
  margin-bottom: 0.8em;
}
@media screen {
  .referenz {
    background-color: #d8d9db;
    padding: 24px 0;
  }

  .referenz h1 {
    margin-bottom: 0;
  }

  .referenz .bildbox > div {
    max-width: 580px;
  }
}

@media screen {
  .m1437395758 main {
    padding-top: 24px;
  }
}

@media only screen and (max-width: 644px) {
  .referenz .grid-cell.w50.bildbox,
  .referenz .grid-cell.w50.textbox {
    display: block;
    width: auto;
  }

  .referenz .grid-cell.w50.textbox {
    padding-top: 21px;
  }
}

@media only screen and (max-width: 580px) { /* 580 = Breite des Fotos */
  .referenz,
  .m1437395758 main {
    padding-top: 0;
  }

  .referenz .grid-cell.w50.bildbox,
  .referenz .grid-cell.w50.textbox {
    padding: 0;
  }

  .referenz img {
    outline: none;
  }

  .referenz .page-padding {
    padding-left: 0;
    padding-right: 0;
  }

  .referenz .grid-cell.w50.textbox {
    padding: 21px 4% 0 4%;
  }
}

@media only screen and (max-width: 479px) {
  .referenz .grid-cell.w50.textbox {
    padding: 21px 3.5% 0 3.5%;
  }
}

@media print {
  .referenz .grid-cell.w50.bildbox,
  .referenz .grid-cell.w50.textbox {
    display: block;
    width: auto;
  }

  .referenz .bildbox .responsive-box {
    height: auto;
    padding-bottom: 1.8em !important;
  }

  .referenz img {
    width: auto;
  }
}
.impressum table { border-collapse: collapse; margin: 1em 0; }
.impressum th, .impressum td { vertical-align: top; padding: 0; }
.impressum th { font-weight: normal; text-align: left; padding-right: 0.3em; }

.impressum .foto { border: 1px solid silver; float: left; margin-right: 20px; }

.impressum .links {
  font-size: 0.8em;
  line-height: 1.2;
  color: #aaa;
}

.impressum .links li {
  white-space: nowrap;
  display: inline-block;
  margin-top: 1em;
}

.impressum .links li:not(:last-child):after {
  content: ' · ';
  display: inline-block;
  margin: 0 5px;
}

.impressum .links a {
  color: #aaa;
}

.impressum .bildnachweis {
  font-size: 0.8em;
  padding-top: 1em;
}