@charset "utf-8";
/* CSS Document */
@font-face {font-family: 'Open Sans';src: url('../fonts/Open_Sans/OpenSans-Light.ttf') format('truetype'); }
@font-face {font-family: 'Open Sans reg';src: url('../fonts/Open_Sans/OpenSans-Regular.ttf') format('truetype'); }

body { 
  color:#838383; font-family: 'Open Sans', sans-serif; font-weight: 100;}
h1, h2, h3 { font-size:large;font-family: 'Open Sans reg', sans-serif; }

.logo { max-width:1100px; padding:30px 0px;     margin: auto;}
  .logo img { margin-right:0px;}

.navbar {background-color:#FFFFFF; margin-bottom:0px;}
  .navbar .container, .container-fluid>.navbar-collapse  { max-width:1200px; margin:auto;  }
  #mainNav .active* { background-color:#FFFFFF !important;}

  .navbar-default .navbar-nav>a:hover {background-color:#bcd4ec !important;color:#838383;}
  .navbar-default .navbar-nav>.active>a:hover, .active-parent {background-color:#bcd4ec !important;color:#838383;}
  

  .navbar-default .navbar-nav>a:link, .navbar-default .navbar-nav>a:visited {background-color:#bcd4ec !important;}
  .navbar-default .navbar-nav>.active>a:link, .navbar-default .navbar-nav>.active>a:visited {background-color:#bcd4ec !important;}

.spacer { margin-right:500px;}
  

.content-container {max-width:1200px; padding:50px 50px 4px 0px;}   
.sidebar-re, .sidebar, .inhalt { float:right;}
   .sidebar { padding-left:40px;}
   .inhalt { /*margin-top:-11px;*/}
   .solo { max-width:700px; margin:0 240px;}

.inhalt .ce-left img {max-width:300px; height:auto; margin-right:50px;}

.footer-container { max-width:1000px; text-align:center; border-top: 1px solid #bcd4ec; margin:50px auto 5px; padding-top:10px; color:#748acc;}


.home {max-width:1200px;  padding:50px 0px 4px 0px;  border: 0px;  -webkit-box-shadow:none;  -moz-box-shadow:none;  box-shadow: none;}

/*  Gridelements */
.drei-grids { max-width:700px; margin:auto;}
  .col-10, .col-20, .col-30 { float:left; max-width:370px; height:178px; margin-right:2%; margin-bottom:2%; text-align:center;}
 .col-10:hover, .col-20:hover, .col-30:hover {background-color:#bcd4ec; }
.col-30:after {clear:both;}

.col-30 div.ce-gallery {    margin-bottom: 30px;}

.home-grids { margin:50px 0 0 40px;}  
.home-grids .ce-bodytext { text-align:center; margin-top:-200px;}
.home-grids img:hover, .drei-grids img:hover {opacity: 0.0;} /*  */


.home-gr {float:left; max-width:370px; margin-right:1%; margin-bottom:1%; background-color:#bcd4ec;}

   .col-140 .ce-bodytext { height:170px; margin-top:-254px;}
  .col-150 .ce-bodytext { height:170px; margin-top:-180px;}
  .col-160 .ce-bodytext , .col-170 .ce-bodytext  { margin-top:-98px;max-width:300px; height:99px !important;}
  .col-160 h2, .col-170 h2 { margin-top:8px; margin-bottom:0px;}
  .col-160 .ce-bodytext, .col-170 .ce-bodytext { margin-bottom:-11px;}

/*
.news-list-container {width: 700px;    margin: auto;}
.news-list-item {margin: 20px auto;width:700px; height:180px; border-bottom:1px solid #BBB9B9; }
.news-img {width:150px; height:100px; overflow:hidden;}
.news-single-item {max-width:700px; margin:auto;}
.news-single-img { max-width:600px;}
.news-single-img img {max-width:280px; height: auto; float:left;}
.news-single-item h2 { font-size:14px;}
*/
.news time {visibility: hidden;  display: none;}
.news .lead { font-size: inherit;  }
.news .list-group-item {border:  0; }
.news .list-group-item img {max-width:250px; height:auto; }
.news .news-list-item {padding-bottom:  16px; border-bottom:1px solid #BBB9B9;}
.news .btn-primary, .pagination > .active > a, .pagination > .active > a:focus, .pagination > .active > a:hover, .pagination > .active > span, .pagination > .active > span:focus, .pagination > .active > span:hover {  background-color: #c9daec;}

/* ==================================================
   REFERENZEN
   ================================================== */
.referenz {max-width: 900px; margin:auto;}

/* Grid */
.referenz > .contentWidth {
    display: grid;
    grid-template-columns: repeat(auto-fit, 178px);
    gap: 20px;
    justify-content: center;
}


/* Einzelne Referenz-Kachel */
.referenz .frame {
    position: relative;
    width: 178px;
    height: 178px;
    overflow: hidden;
    margin: 0;
    background: #fff;
}


/* TYPO3 Bild-Wrapper */
.referenz .ce-textpic,
.referenz .ce-gallery,
.referenz .ce-outer,
.referenz .ce-inner,
.referenz .ce-row,
.referenz .ce-column,
.referenz figure.image {
    width: 100%;
    height: 100%;
    margin: 0;
}


/* Logo zentrieren */
.referenz .ce-column {
    display: flex;
    align-items: center;
    justify-content: center;
}


/* Logo */
.referenz img.image-embed-item {
    display: block;
    width: 100%;
    height: 100%;
    max-width: 178px;
    max-height: 178px;
    object-fit: contain;
    transition: transform .35s ease;
}


/* Text-Overlay */
.referenz .ce-bodytext {
    position: absolute;
    inset: 0;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    padding: 15px;
    box-sizing: border-box;

    background: #bcd4ec;
    color: #fff;
    text-align: center;

    opacity: 0;
    transition: opacity .35s ease;

    z-index: 10;
}


/* Overlay beim Hover */
.referenz .frame:hover .ce-bodytext {
    opacity: 1;
}


/* leichter Zoom des Logos */
.referenz .frame:hover img.image-embed-item {
    transform: scale(1.05);
}


/* Text */
.referenz .ce-bodytext p {
    margin: 4px 0;
    color: #fff;
    line-height: 1.3;
}


/* Firmenname */
.referenz .ce-bodytext p:first-child {
    font-size: 15px;
    font-weight: 600;
}


/* Beschreibung */
.referenz .ce-bodytext p + p {
    font-size: 13px;
}

.referenz .ce-bodytext {
    background: #bcd4ec;
    color: #333;
}

.referenz .ce-bodytext p {
    color: #333;
}

@media screen and (max-width: 1170px) {
  .spacer { margin-right:200px;}
}

@media screen and (max-width: 880px) {
  .spacer { margin-right:80px;}
}
@media screen and (max-width: 768px) {
.ce-textpic { }
.logo {  -webkit-box-shadow:none;  -moz-box-shadow:none;  box-shadow: none;}
  .logo img { max-width:90%; height:auto;}
  .content-container {      padding: 10px;}
  
.home-grids { margin:50px 0 0 0px;}  
.home-gr { max-width:300px; margin-right:0; margin-bottom:1%; }
.spacer { margin-right:0px;}

  .inhalt .ce-left img {    max-width: 100%;    height: auto;    margin-right: 0px;}
  
  .ce-bodytext {width:100%;}
 
  .news-list-container {width: 100%;    margin: auto;}
  .news-list-item {margin: 20px auto;width:100%; height:260px; border-bottom:1px solid #BBB9B9; }
.solo { max-width:300px; margin:0 10px;}
  .news .list-group-item img { max-width: 100px;}
}