@charset "ISO-8859-1";


* {margin:0em;padding:0em;}



/*Schriften*/

/* source-sans-pro-300 - latin */
@font-face {
  font-family: 'Source Sans Pro';
  font-style: normal;
  font-weight: 300;
  src: url('../fonts/source-sans-pro-v11-latin-300.eot'); /* IE9 Compat Modes */
  src: local('Source Sans Pro Light'), local('SourceSansPro-Light'),
       url('../fonts/source-sans-pro-v11-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/source-sans-pro-v11-latin-300.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/source-sans-pro-v11-latin-300.woff') format('woff'), /* Modern Browsers */
       url('../fonts/source-sans-pro-v11-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/source-sans-pro-v11-latin-300.svg#SourceSansPro') format('svg'); /* Legacy iOS */
}

/* source-sans-pro-regular - latin */
@font-face {
  font-family: 'Source Sans Pro';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/source-sans-pro-v11-latin-regular.eot'); /* IE9 Compat Modes */
  src: local('Source Sans Pro Regular'), local('SourceSansPro-Regular'),
       url('../fonts/source-sans-pro-v11-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/source-sans-pro-v11-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/source-sans-pro-v11-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/source-sans-pro-v11-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/source-sans-pro-v11-latin-regular.svg#SourceSansPro') format('svg'); /* Legacy iOS */
}

/* source-sans-pro-600 - latin */
@font-face {
  font-family: 'Source Sans Pro';
  font-style: normal;
  font-weight: 600;
  src: url('../fonts/source-sans-pro-v11-latin-600.eot'); /* IE9 Compat Modes */
  src: local('Source Sans Pro SemiBold'), local('SourceSansPro-SemiBold'),
       url('../fonts/source-sans-pro-v11-latin-600.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/source-sans-pro-v11-latin-600.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/source-sans-pro-v11-latin-600.woff') format('woff'), /* Modern Browsers */
       url('../fonts/source-sans-pro-v11-latin-600.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/source-sans-pro-v11-latin-600.svg#SourceSansPro') format('svg'); /* Legacy iOS */
}



h1                                  {font-size:3.000em;line-height:1.150em;}
h2                                  {font-size:2.650em;line-height:1.150em;padding: 0em 0em 1.250em 0em;font-family:'Source Sans Pro', Arial, sans-serif;font-weight:300;color:#6699cc;/*margin-top:2.250em;margin-bottom:1.250em;*/}
h4                                  {font-size:1.125em;line-height:1.400em;padding: 0em;font-family:'Source Sans Pro', Arial, sans-serif;font-weight:600;color:#000000;/*margin-top:2.750em;margin-bottom:0em;*/}
p,ul,ol,li,div,td,th,adress,nobr,b,i{font-size:1.000em;line-height:1.250em;word-spacing:normal;letter-spacing:normal;color:#000000;text-align:left}
p                                   {padding:0em 0em 1.250em 0em;/*margin-bottom: 1.250em;*/}

/*noch benutzt? style13_gr*/
.style13_gr                         {font-family:'Source Sans Pro', Arial, sans-serif;font-weight:300;color:#6699cc;}
.style_menu                         {font-family:'Source Sans Pro', Arial, sans-serif;font-weight:400;font-size:0.875em;line-height:1em;}
.style_menu2                        {font-family:'Source Sans Pro', Arial, sans-serif;font-size: 1.000em;}
.style_menu4                        {font-family:'Source Sans Pro', Arial, sans-serif;font-size: 1.000em;}
.style_menu3                        {font-family:'Source Sans Pro', Arial, sans-serif;font-size: 0.625em;}
#main-content                       {z-index:0;padding:0.000em 2.000em;text-align:left;font-family:'Source Sans Pro', Arial, sans-serif;font-weight:400;/*min-height:100%;*/}
a:link                              {text-decoration:none;color:#000033; outline:none;}
a:visited                           {text-decoration:none;color:#000033; outline:none;}
a:hover                             {text-decoration:none;color:#6699cc; outline:none; cursor:pointer;}
a:active                            {text-decoration:none;color:#6699cc; outline:none;}
a:focus                             {text-decoration:none;color:#6699cc; outline:none;}



/*  SECTIONS  *//*  COLUMN SETUP  *//*  GROUPING  *//*  GRID OF TWO  *//*  GO FULL WIDTH AT LESS THAN 480 := 30em PIXELS*/
.section {clear: both;padding: 0em;margin: 0em;}
.col {display: block;float:left;margin: 1% 0 1% 2.5%;}
.col:first-child { margin-left: 0; }
.group:before,.group:after {content:"";display:table;}
.group:after {clear:both;}
.group {zoom:1; /* For IE 6/7 */}
.span_2_of_2 { width: 100%;}
.span_1_of_2 {width: calc((100% - (2.5% * 1)) / 2);}

.span_3_of_3 { width: 100%; }
.span_2_of_3 {width: calc((100% - (2.5% * 2)) / 3 * 2 + 2.5%);}
.span_1_of_3 {width: calc((100% - (2.5% * 2)) / 3);}

.span_4_of_4 { width: 100%; }
.span_3_of_4 {width: calc((100% - (2.5% * 3)) / 4 * 3 + 2.5% * 2);}
.span_2_of_4 {width: calc((100% - (2.5% * 3)) / 4 * 2 + 2.5% * 1);}
.span_1_of_4 {width: calc((100% - (2.5% * 3)) / 4);}

.span_6_of_6 {width: 100%;}
.span_5_of_6 {width: calc((100% - (2.5% * 5)) / 6 * 5 + 2.5% * 4);}
.span_4_of_6 {width: calc((100% - (2.5% * 5)) / 6 * 4 + 2.5% * 3);}
.span_3_of_6 {width: calc((100% - (2.5% * 5)) / 6 * 3 + 2.5% * 2);}
.span_2_of_6 {width: calc((100% - (2.5% * 5)) / 6 * 2 + 2.5% * 1);}
.span_1_of_6 {width: calc((100% - (2.5% * 5)) / 6);}

.span_8_of_8 {width: 100%;}
.span_7_of_8 {width: calc((100% - (2.5% * 7)) / 8 * 7 + 2.5% * 6);}
.span_6_of_8 {width: calc((100% - (2.5% * 7)) / 8 * 6 + 2.5% * 5);}
.span_5_of_8 {width: calc((100% - (2.5% * 7)) / 8 * 5 + 2.5% * 4);}
.span_4_of_8 {width: calc((100% - (2.5% * 7)) / 8 * 4 + 2.5% * 3);}
.span_3_of_8 {width: calc((100% - (2.5% * 7)) / 8 * 3 + 2.5% * 2);}
.span_2_of_8 {width: calc((100% - (2.5% * 7)) / 8 * 2 + 2.5% * 1);}
.span_1_of_8 {width: calc((100% - (2.5% * 7)) / 8);}

.boxone {min-height:5em; padding:0.625em 1em 0.625em 1em; margin-bottom: 1em; text-align:center; -webkit-box-shadow: 0.125em 0.125em 0.250em 0em rgba(194,194,194,1);-moz-box-shadow: 0.125em 0.125em 0.250em 0em rgba(194,194,194,1);box-shadow: 0.125em 0.125em 0.250em 0em rgba(194,194,194,1);}
.boxpic {width: 100%; padding:1.000em 0em; height:auto;}
.sliderindex{position:relative;top:auto;left:auto;margin-top:2em;z-index:1;}
.li_leistung{list-style:square;position:relative;left:+0.875em;margin-top:0em;padding-left:1em;}
.halbbild{position:relative;width:100%;border-style:hidden;border-width:0px;}
.drittelbilder{width:80%;padding:10% 20% 0% 0%;}
/*
.tabspace {margin-left:1.500em;}
*/
.img-gallery {width: 100%; -webkit-box-shadow: 0.125em 0.125em 0.250em 0em rgba(194,194,194,1);-moz-box-shadow: 0.125em 0.125em 0.250em 0em rgba(194,194,194,1);box-shadow: 0.125em 0.125em 0.250em 0em rgba(194,194,194,1);}
.nolist {list-style: square;margin-left:1em;padding-left:1em;}
/*.img-gallery:hover {width:90%;position:relative;left:5%;top:-5%;}*/


/*in nächstem Schritt hier die Breite dynamisch gestalten -> 80%?*/
/*Basis-Layout*/

html,body,#wrapper {height:100%;}

body                    {display:flex;justify-content:center;width:100%;background:none;z-index:0;overflow-y:scroll;}
#wrapper                {display:table;width:65.875em;z-index:1;background-color:#fff;/*border:none;border-collapse:collapse;*//*position:relative;*//*top:0.000em;*/}
header                  {display:table-row;position:fixed;z-index:99;width:65.875em;background-color:#fff;-webkit-box-shadow: 0em 0.125em 0.250em 0em rgba(194,194,194,1);-moz-box-shadow: 0em 0.125em 0.250em 0em rgba(194,194,194,1);box-shadow: 0em 0.125em 0.250em 0em rgba(194,194,194,1);}
main                    {display:table-row;height:100%;padding:0em 0.875em;background-color:#fff;/*position:static;*//*top:2em;*/}
footer                  {display:table-row;width:57.500em;min-height:2.40em;background-color:#fff;border:solid 1px black;/*margin-top:5.000em;*//*position:relative;bottom:0;*/}

/*Imprint-Specials*/
#imprint                {float:right;background-color:#fff;-webkit-box-shadow: 0em 0.050em 0.250em 0em rgba(194,194,194,1);-moz-box-shadow: 0em 0.050em 0.250em 0em rgba(194,194,194,1);box-shadow: 0em 0.050em 0.250em 0em rgba(194,194,194,1);}
#imprint li             {float:left;list-style:none;}
#imprint a              {display:block;height:100%;padding: 1.000em 1.750em 1.000em 1.750em;text-decoration:none;color:#000000;background-color:#fff;}
#imprint a:hover        {background-color:#6699cc;color:#fff}


/*Workaround ---> Versuch! wirklich über CSS das Menü ein und auszublenden!*/

.imprint-small, .privacy-small          {display:none;}
.placeholder-small                      {display:none;}
.menu-button                            {display:none;/*height:4.000em;*/}
.submenu-small                          {display:block;padding-left:1.500em;}

/*Menü-Layout*/
#logoarea                               {float:left;height:4.250em;z-index:100;width:auto;background-color:#fff;border-collapse: collapse;}
#logo                                   {width:6.000em;height:2.250em;padding:1.000em 1.000em 1.000em 2.125em;background-color:#fff;}
#navigation                             {float:right;background-color:#fff;}
#navigation li                          {float:left;list-style:none;}


/*font height menu 0.875em line height 17.5px / logoarea: 4.250 -> 68px - 17.5 px = 51,5 /2 = 25,25px -> 1.804em bei 14 em padding nav a: */
#navigation a                           {display:block;height:100%;padding:1.804em 1.750em 1.804em 1.750em;text-decoration:none;color:#000000;background-color:#fff; outline:none;}
#navigation a:hover                     {background-color:#6699cc;color:#ffffff; outline:none;}
#navigation ul li .toggleBox            {display:none;}



/* Projektreferenzen neu */
/*
.hover-container                        {display:flex;border-radius: 0em;margin: 0em;background-color:transparent;}
.hover-content                          {width:100%; height:100%;}
.hover-image                            {background-color:green;}
.hover-text                             {position:relative;top:-3em;min-width:100%;background-color:blue;}
.hover-text p                           {display:none;color:#000;background-color:yellow ;width:30%;padding:1em 1em 0 1em;word-wrap:break-word; -webkit-hyphens: auto;-moz-hyphens: auto;-ms-hyphens: auto;-o-hyphens: auto;hyphens: auto;}

a:hover .hover-text p                   {display:flex;}
a:hover .hover-image                    {opacity:0.1;}
*/


/*Custom Pfeile Nivo-Slider*/
.position-custom_arrow                  {position:relative; height:1.5em; float:right;top:-1.125em;right:-0.750em;}
.nivo-custom-left_arrow                 {display:inline-block;width: 0.75em; height:1.5em;background-color:transparent;padding:0 0.75em;cursor:pointer;margin-right:0.325em;}
.nivo-custom-right_arrow                {display:inline-block;width: 0.75em; height:1.5em;background-color:transparent;padding:0 0.75em;cursor:pointer;}

/*Responsive Layout-Change*/
/*Responsive    kleiner 1104 px*/


/*Neue Image Hover*/

.hover-image {max-width: 100%;/*height: auto;*/}


/*.row{}*/

.more:link, .more:visited {transition-duration: 0.2s;transition-timing-function: ease-out;}

/*[class*='col-']{float:left;}*/



.show{

  width: 100%;
  height: 100%;
  /*-webkit-box-shadow: 0.125em 0.125em 0.250em 0em rgba(194,194,194,1);-moz-box-shadow: 0.125em 0.125em 0.250em 0em rgba(194,194,194,1);box-shadow: 0.125em 0.125em 0.250em 0em rgba(194,194,194,1);*/
  float: left;
  overflow: visible;
  position: relative;
  cursor: default;
  background: #fff;
  display: block;

}

.show .mask{

  /*width: 32%;left: 34%;*/
  width:100%;
  height: /*92%*//*91.48%*/100%; bottom: +1.3%;
  position: absolute;
  overflow: hidden;
  opacity: 0;
  background-color: rgba(255,255,255, 0.8);
  transition: all 0.2s ease-in-out;  
  text-align: center;
  padding:0;
}


/* THIRD */


.show-third {
  height:100%;
}

.show-third h2 {
  color: #000;
  padding: 1.750em 0em 0.250em 0em;
  text-align: center;
  transition: all 0.2s ease-in-out;
}

.show-third p{
  font-size: 1.000em;
  text-align: center;
}

.show-third a.more {
  display: inline-block;
  text-decoration: none;
  padding: 0.500em 1.00em 0.500em 1.500em;
  background: #000;
  color: #fff;
  text-transform: uppercase;
  box-shadow: 0 0 0.001em #000;
  position: relative;
}

.show-third img{
  -webkit-box-shadow: 0.125em 0.125em 0.250em 0em rgba(194,194,194,1);-moz-box-shadow: 0.125em 0.125em 0.250em 0em rgba(194,194,194,1);box-shadow: 0.125em 0.125em 0.250em 0em rgba(194,194,194,1);
  transition: all 0.2s ease-in-out;
  width:100%
}


.show-third:hover img {
/*
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
    filter: gray;
    -webkit-filter: grayscale(100%);
*/
}


.show-third:hover .mask,
.show-third:hover h2,
.show-third:hover p {
  opacity: 1;
}

.show-third a.more:hover {
  box-shadow: 0 0 0.300em #fff;
  background-color: #222;
}

.show-third:hover p {
  transition-delay: 0.1s;
}

/*
.show .mask{
  display:block;
  position:relative;
  text-align: left;
  opacity:1.0;
}

.show-third h2 {
  color: #000;
  padding: 0.750em 0em 0.250em 0em;
  text-align: left;
  transition: all 0.2s ease-in-out;
}

.show-third p{
  font-size: 1.000em;
  text-align: left;
}

*/

/*Neue Image Hover*/









@media only screen and (max-width: 69em) {
    

/*html,body,#wrapper {height:100%;}*/

#wrapper        {width:100%;/*position:relative;top:0.000em;*/}
header          {position:absolute;width:100%;background-color: transparent;}
main            {position:relative;}
#main-content   {padding:0.000em 1.063em;}
#logoarea       {width:100%;-webkit-box-shadow: 0em 0.125em 0.250em 0em rgba(194,194,194,1);-moz-box-shadow: 0em 0.125em 0.250em 0em rgba(194,194,194,1);box-shadow: 0em 0.125em 0.250em 0em rgba(194,194,194,1);}
#logo           {float:left;padding:1.000em 1.000em 1.000em 1.000em;}
#navigation     {display:none;background-color:#fff;float:left;width:100%;height:100%;margin-top:0.350em;}
#navigation li  {width:100%;border-bottom: 0.020em solid silver;}
#navigation a   {padding-left:5em;}

/* toggleBox level 1 = Leistungen Level 3 = Str&Ci , PD SD, WS SEM */

#navigation ul li .toggleBox                          {display:flex;flex-direction:column;/*justify-content:space-between;*/background-color:transparent;}
#navigation ul li .toggleBox #level1                  {display:block;/*flex:1;*//*width:100%;*/background-color:transparent;border-top: 0.020em solid silver;}
#navigation ul li .toggleBox span                     {display:block;/*width:100%;*/}   
#navigation ul li .toggleBox #level1:hover            {/*display:table-cell;width:100%;*/background-color:#6699cc;color:#fff}
#navigation ul li .toggleBox div ul li                {display:block;border-bottom:none;/*border-top:0.0200em solid silver;*/padding-left:0.000em;background-color:/*#e8e8e8*/#fff;}
#navigation ul li .toggleBox #level3                  {display:block;/*table-cell;flex-wrap:wrap;width:100%;*/background-color:transparent;}
#navigation ul li .toggleBox #level3:hover            {/*width:100%;*/background-color:#6699cc;color:#fff}
 
/* Ausblenden des input-Feldes */
.toggleBox input                                      {position: absolute;left: -99999px;}
 
/* Gestaltung der labels */
.toggleBox label                                      {display:block;position:relative;top:5.000em;left:0em;width:3em;padding:1.75em 0em 1.5em 2em;/*text-align: center;*/cursor: pointer;background-color:transparent;}
.toggleBox label:hover                                {background:transparent;}
 
/* Der Aufklappmechanismus */
.toggleBox input:checked ~ .mlevel3                   {display: none;}
.toggleBox input:checked ~ .mlevel2                   {display:block;/*width:100%;*/background-color:transparent;}

.toggleBox input:not(:checked) ~  .mlevel3            {display:table-cell;flex:10;/*flex-grow:1;*/background-color:#fff;}
.toggleBox input:not(:checked) ~  .mlevel2            {display:table-cell;flex:1;/*display:table-cell;flex-grow:3;background-color:lime;*/}
 
/* Steuerung der Sichtbarkeit der labels */
.toggleBox input:not(:checked) ~ .open,.toggleBox input:checked ~ .close {display: none;}


#imprint                                    {display:none;}
footer                                      {display:none;}
#nav-menu:target #navigation                {display:block;}
#nav-menu:target .menu-button-beschr-open   {display:none;}

.submenu-small                              {display:none;}
.placeholder-small                          {display:block;height:5.000em;}
.imprint-small, .privacy-small              {display:block;}

/* Menubutton (Ein ausblenden) */
.menu-button            {background-color:#fff;display: block;position: absolute;right: 0em;top: 0em;height:1em;padding:1.625em 1.500em 1.625em 1.500em;cursor: pointer;text-decoration: none;}
/*.menu-button:hover      {color: black; background:#ffb651;}*/



/*Neue Image Hover*/
/*
.show{

  max-width: 100%;
  max-height: 20.625em;
}

  .wrap{
    width: 100%;
    margin: auto;
    overflow: hidden;}
*/
.show {
  width:100%;
}

.show .mask{
  display:block;
  position:relative;
  text-align: left;
  opacity:1.0;
}

.show-third h2 {
  color: #000;
  padding: 0.600em 0em 0.200em 0em;
  text-align: left;
  transition: all 0.2s ease-in-out;
}

.show-third p{
  font-size: 1.000em;
  text-align: left;
}

.more {
  margin: 0 0 1.750em 0;
}

/* /////////// Eventuell hier schon auf Daueranzeige umstellen! Hover bei Touch? Klick? ////////// */
    
/*Neue Image Hover*/




}

@media only screen and (max-width: 56.250em) {


.drittelbilder      {max-width:18.750em;}
.halbbild           {max-width:28.125em;}

.col { margin: 0.6em 0% 0.6em 0%;}
.span_2_of_2, .span_1_of_2 { width: 100%; }
.span_3_of_3, .span_2_of_3, .span_1_of_3 {width:100%;}
.span_4_of_4, .span_3_of_4, .span_2_of_4, .span_1_of_4 {width:100%;}
.span_1_of_8, .span_2_of_8, .span_3_of_8, .span_4_of_8, .span_5_of_8, .span_6_of_8, .span_7_of_8, .span_8_of_8 { width: 100%; }
.span_1_of_6, .span_2_of_6, .span_3_of_6, .span_4_of_6, .span_5_of_6, .span_6_of_6 { width: 100%; }


/*
.hover-container    {min-width:100%;overflow: visible;flex-wrap:nowrap;justify-content:space-between;float:none;}
.hover-image        {display:flex;position:relative;width:auto;}
.hover-text         {display:flex;position:relative;width:auto;background-color:transparent;float:none;}
.hover-text p       {min-width:7em; color:#000; padding:0em 0em 0em 1.000em; word-wrap:break-word; -webkit-hyphens: auto;-moz-hyphens: auto;-ms-hyphens: auto;-o-hyphens: auto;hyphens: auto;}
*/
/*Custom Pfeile Nivo-Slider*/
/*.position-custom_arrow                  {right:-0.750em;}*/







}

/*Eventuell in ganz kleinem Fall unter 624px auf kleinere Schrift bei Headlines umstellen */

@media only screen and (max-width: 39em) {





}



/* CSS-Regeln für alle Ausgabegeräte */
@media print {
  /* zusätzliche oder abweichende CSS-Regeln für Drucker */
}