/*! HTML5 Boilerplate v7.3.0 | MIT License | https://html5boilerplate.com/ */

/* main.css 2.0.0 | MIT License | https://github.com/h5bp/main.css#readme */
/*
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */

/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */

html {
  color: #222;
 font-size:16px;
  line-height: 1.4;
}


/*
 * Remove text-shadow in selection highlight:
 * https://twitter.com/miketaylr/status/12228805301
 *
 * Vendor-prefixed and regular ::selection selectors cannot be combined:
 * https://stackoverflow.com/a/16982510/7133471
 *
 * Customize the background color to match your design.
 */

::-moz-selection {
  background: #b3d4fc;
  text-shadow: none;
}

::selection {
  background: #b3d4fc;
  text-shadow: none;
}

/*
 * A better looking default horizontal rule
 */

hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #ccc;
  margin: 1em 0;
  padding: 0;
}

/*
 * Remove the gap between audio, canvas, iframes,
 * images, videos and the bottom of their containers:
 * https://github.com/h5bp/html5-boilerplate/issues/440
 */

audio,
canvas,
iframe,
img,
svg,
video {
  vertical-align: middle;
}

/*
 * Remove default fieldset styles.
 */

fieldset {
  border: 0;
  margin: 0;
  padding: 0;
}

/*
 * Allow only vertical resizing of textareas.
 */

textarea {
  resize: vertical;
}

/* ==========================================================================
   Browser Upgrade Prompt
   ========================================================================== */

.browserupgrade {
  margin: 0.2em 0;
  background: #ccc;
  color: #000;
  padding: 0.2em 0;
}

/* ==========================================================================
   Author's custom styles
   ========================================================================== */

/* montserrat-200 - latin */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 200;
  src: url('fonts/montserrat-v14-latin-200.eot'); /* IE9 Compat Modes */
  src: local('Montserrat ExtraLight'), local('Montserrat-ExtraLight'),
       url('fonts/montserrat-v14-latin-200.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/montserrat-v14-latin-200.woff2') format('woff2'), /* Super Modern Browsers */
       url('fonts/montserrat-v14-latin-200.woff') format('woff'), /* Modern Browsers */
       url('fonts/montserrat-v14-latin-200.ttf') format('truetype'), /* Safari, Android, iOS */
       url('fonts/montserrat-v14-latin-200.svg#Montserrat') format('svg'); /* Legacy iOS */
}
/* montserrat-300 - latin */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 300;
  src: url('fonts/montserrat-v14-latin-300.eot'); /* IE9 Compat Modes */
  src: local('Montserrat Light'), local('Montserrat-Light'),
       url('fonts/montserrat-v14-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/montserrat-v14-latin-300.woff2') format('woff2'), /* Super Modern Browsers */
       url('fonts/montserrat-v14-latin-300.woff') format('woff'), /* Modern Browsers */
       url('fonts/montserrat-v14-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */
       url('fonts/montserrat-v14-latin-300.svg#Montserrat') format('svg'); /* Legacy iOS */
}
/* montserrat-regular - latin */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/montserrat-v14-latin-regular.eot'); /* IE9 Compat Modes */
  src: local('Montserrat Regular'), local('Montserrat-Regular'),
       url('fonts/montserrat-v14-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/montserrat-v14-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('fonts/montserrat-v14-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('fonts/montserrat-v14-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('fonts/montserrat-v14-latin-regular.svg#Montserrat') format('svg'); /* Legacy iOS */
}
/* montserrat-500 - latin */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 500;
  src: url('fonts/montserrat-v14-latin-500.eot'); /* IE9 Compat Modes */
  src: local('Montserrat Medium'), local('Montserrat-Medium'),
       url('fonts/montserrat-v14-latin-500.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/montserrat-v14-latin-500.woff2') format('woff2'), /* Super Modern Browsers */
       url('fonts/montserrat-v14-latin-500.woff') format('woff'), /* Modern Browsers */
       url('fonts/montserrat-v14-latin-500.ttf') format('truetype'), /* Safari, Android, iOS */
       url('fonts/montserrat-v14-latin-500.svg#Montserrat') format('svg'); /* Legacy iOS */
}
/* montserrat-600 - latin */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 600;
  src: url('fonts/montserrat-v14-latin-600.eot'); /* IE9 Compat Modes */
  src: local('Montserrat SemiBold'), local('Montserrat-SemiBold'),
       url('fonts/montserrat-v14-latin-600.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/montserrat-v14-latin-600.woff2') format('woff2'), /* Super Modern Browsers */
       url('fonts/montserrat-v14-latin-600.woff') format('woff'), /* Modern Browsers */
       url('fonts/montserrat-v14-latin-600.ttf') format('truetype'), /* Safari, Android, iOS */
       url('fonts/montserrat-v14-latin-600.svg#Montserrat') format('svg'); /* Legacy iOS */
}
/* montserrat-700 - latin */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  src: url('fonts/montserrat-v14-latin-700.eot'); /* IE9 Compat Modes */
  src: local('Montserrat Bold'), local('Montserrat-Bold'),
       url('fonts/montserrat-v14-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/montserrat-v14-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
       url('fonts/montserrat-v14-latin-700.woff') format('woff'), /* Modern Browsers */
       url('fonts/montserrat-v14-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
       url('fonts/montserrat-v14-latin-700.svg#Montserrat') format('svg'); /* Legacy iOS */
}
/* montserrat-800 - latin */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 800;
  src: url('fonts/montserrat-v14-latin-800.eot'); /* IE9 Compat Modes */
  src: local('Montserrat ExtraBold'), local('Montserrat-ExtraBold'),
       url('fonts/montserrat-v14-latin-800.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/montserrat-v14-latin-800.woff2') format('woff2'), /* Super Modern Browsers */
       url('fonts/montserrat-v14-latin-800.woff') format('woff'), /* Modern Browsers */
       url('fonts/montserrat-v14-latin-800.ttf') format('truetype'), /* Safari, Android, iOS */
       url('fonts/montserrat-v14-latin-800.svg#Montserrat') format('svg'); /* Legacy iOS */
}
/* montserrat-900 - latin */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 900;
  src: url('fonts/montserrat-v14-latin-900.eot'); /* IE9 Compat Modes */
  src: local('Montserrat Black'), local('Montserrat-Black'),
       url('fonts/montserrat-v14-latin-900.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/montserrat-v14-latin-900.woff2') format('woff2'), /* Super Modern Browsers */
       url('fonts/montserrat-v14-latin-900.woff') format('woff'), /* Modern Browsers */
       url('fonts/montserrat-v14-latin-900.ttf') format('truetype'), /* Safari, Android, iOS */
       url('fonts/montserrat-v14-latin-900.svg#Montserrat') format('svg'); /* Legacy iOS */
}


html, body{font-family:"Montserrat" ,"Helvetica Neue",Arial,"Noto Sans",sans-serif;
    font-size:1em;
}
* {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    
    
   /*  hyphens: auto;
    -webkit-hyphens: auto;
-webkit-hyphenate-limit-chars: auto 3;
-webkit-hyphenate-limit-lines: 4;
-ms-hyphens: auto;
-ms-hyphenate-limit-chars: auto 3;
-ms-hyphenate-limit-lines: 4;*/
}

*:focus,
div:focus,
input:focus,
textarea:focus,
select:focus {
    outline: none;
}



body, .container, .container-fluid{
    background-position: center center; 
    background-size: 1270px 100%;
    background-repeat:no-repeat;

 /* background-lines  */
 /* background-image: repeating-linear-gradient(
  to right,
  #f3f3f3,
  #f3f3f3 1px,
  transparent 1px,
  transparent 24.99%
  );*/
    

  }

body>.container, main>.container{background-color:#fff;}

.container-fluid, .container-fluid .container{ 
 /*   background-image: repeating-linear-gradient(
  to right,
 #f0f0f0,
  #f0f0f0 1px,
  transparent 1px,
    transparent 24.99%);
    */
}


@media (max-width: 1270px){
    body, .container, .container-fluid{background-size: 100vw 100%;}  
    
}

button:focus,
div:focus,
input:focus,
textarea:focus,
select:focus {
    outline: none;
}

@media (min-width: 576px){
.container, .container-sm {
  max-width: 100vw;
}
}
@media (min-width: 768px){
.container, .container-md, .container-sm {
    max-width: 100vw;
}}

@media (min-width: 1280px){
.container, .container-lg, .container-md, .container-sm, .container-xl {
    max-width: 1270px;
}
}







/* Navigation */

#bgsubnav{position:fixed;z-index:10;width:100%;height:0%;background:#2F2F2E;opacity:0.5;transition:all 0.4s ease; top:0;}
#bgsubnav.show{width:100%;height:100%;opacity:0.9;transition:all 0.4s ease}
  #bgsubnav.showmobile {
        width:100%;
        height: 0
    }


nav.navbar{z-index:20;
position: absolute;
    top:0;
   left: 0;
    right: 0;
    margin: auto;
}
.bg-primary {
    background-color: #23315A!important;
       border-left:1px solid #f3f3f3;
    border-right:1px solid #f3f3f3;
}



.bereich-elektrik .bg-primary {
    background:#E74124 !important;
}

.bereich-gebaeudetechnik .bg-primary {
    background:#23315A!important;
}

.bereich-kundendienst .bg-primary {
    background:#61BFE6!important;
}

nav .nav-sub{
    background: #FFF!important;
    height:160px;
    border-left:1px solid #f3f3f3;
    border-right:1px solid #f3f3f3;
    border-bottom:1px solid #f3f3f3;
}


.navbar-nav .nav-link {
    color:#6E6E6E;
}

.navbar-dark .navbar-nav .nav-link {
    color:#fff;
}
.navbar-dark .navbar-nav .nav-link:focus, .navbar-dark .navbar-nav .nav-link:hover {
    color: rgba(255,255,255,1);
}


.nav-item.nav-elektrik a.nav-link.selected {background:#fff;color:#E74124}
.nav-item.nav-gebauede a.nav-link.selected {background:#fff;color:#23315A}
.nav-item.nav-kundendienst a.nav-link.selected {background:#fff;color:#61BFE6}
.nav-item.nav-jobs a.nav-link.selected {background:#fff;color:#6E6E6E}
.nav-item:hover{transition:background 0.4s;}
.nav-item.nav-gebauede:hover{background:#23315A;}
.nav-item.nav-kundendienst:hover{background:#2bbfe3;}
.nav-item.nav-elektrik:hover{background:#E74124;}
.nav-item.nav-jobs:hover{background:#BCBCBC;}


#navbarNav .nav-link {
    font-weight: 600;
    font-size: 0.73rem;
    letter-spacing: 0.02em;
    padding:0.9em 3em;
}
#navbarNav .nav-item:nth-child(-n+3) {border-right:1px solid #fff;}
#navbarNav .nav-item.bg-grey{background:#BCBCBC; }

.dropdown-menu {
    position: absolute;
    top: 300%;
    left: 0;
    z-index: 1000;
    display: none;
    float: left;
    min-width: 10rem;
    padding: .5rem 0;
    margin: .125rem 0 0;
    font-size: 1rem;
    color: #212529;
    text-align: left;
    list-style: none;
    background-color: transparent;
    background-clip: inherit;
    border:none;
    border-radius: .25rem;
     opacity:0;
}


.dropdown-toggle::after {
    display: inline-block;
    margin-left: .555em;
    vertical-align: .255em;
    content: "";
    border: solid rgba(0,0,0,.5);
    border-width: 0 2px 2px 0;
    display: inline-block;
    padding: 3px;
    transform: rotate(45deg)
}
.navbar-light .navbar-toggler {
    color: rgba(0,0,0,.5);
    border-color: rgba(0,0,0,.1);
    transform: scale(0.8);
}

#navbarSub .nav-link {
    font-weight: 600;
    font-size: 0.73rem;
    letter-spacing: 0.02em;
    padding:2.5em 3em;
}





#navbarSub .nav-link:hover{text-decoration:underline;
text-decoration: underline;
text-underline-offset: 8px;
}
/* #navbarSub .nav-item {border-right:1px solid #ddd;}*/

.dropdown .drop-sub{
    opacity:0;
    width: 450%;
    top: 220%;
    left: -150%;
    transition:all 0.5s;
}

.dropdown.show .drop-sub {
    opacity:1;
    transition:all 0.5s;
}


.drop-sub>div{float:left}

.drop-sub h4{color: #fff;
    font-weight: 500;
    font-size: 1.5rem;
    margin-right: 3em;}

.drop-sub a.dropdown-item {color:#949494;    font-size: 1.25rem;  font-weight: 500;transition:color 0.15s}
.drop-sub a.dropdown-item:hover{color:#fff;background:transparent}

li.mcnv{display:none;}
.mcnv a.nav-link{color:#bbb !important;font-weight:500 !important}


@media (min-width: 576px){
.navbar-expand-sm {
   -ms-flex-flow: column;
    flex-flow: column;
    -ms-flex-pack: center;
    justify-content: center;
}
.navbar-brand{margin-left:3.5em}
    
    .navbar-brand img{height:50px}    
    
.smallnav nav .nav-sub {
    position: fixed;
    top: 0px;
    height:90px;
    left:0;
    right:0;
} 
  #navbarSub>ul>li>a{text-transform:uppercase}
 
}

@media (max-width: 575px) {
    
    
    body, .container, .container-fluid{
        background-image: none;
  }
    
    #navbarNav {
        display: none
    }

    nav .nav-sub {
        background-color: transparent !important;
        height: auto;
        border:0;
    }
    nav .nav-sub:before{content:"";position:absolute;width:100%;height:95px;background:#fff;top:0;z-index:-1;border-left: 1px solid #f3f3f3;
    border-right: 1px solid #f3f3f3;
    border-bottom: 1px solid #f3f3f3;}

    .drop-sub-1 {
        display: none
    }

    #bgsubnav.show {
        width:100%;
        height: 0
    }
    #bgsubnav.showmobile{width:100%;height:100%;opacity:0.9;transition:all 0.3s ease; transition-delay:0;}

    .nav-sub {
        position: fixed;
        top: 0px;
        margin:0 1.5em;
        width:calc(100% - 3em);
        padding:0.5em;
    }
      .nav-sub .navbar-brand{margin-left:24px}
    .nav-sub .navbar-brand img{    height: 35px;margin-top:27px;}
    .navbar-toggler {margin-right: 10px;border:0;margin-top:25px}
    .navbar-expand-sm>.container{padding-top:0}
    
    #navbarSub{margin-top:22px;}
    
    .dropdown-toggle::after {
    display: inline-block;
    margin-left: .555em;
    vertical-align: .255em;
    content: "";
    border: solid #fff;
    border-width: 0 2px 2px 0;
    display: inline-block;
    padding: 3px;
    transform: rotate(45deg)
}
    
    #navbarSub .nav-link {
    font-weight: 700;
    font-size:0.9rem;
    letter-spacing: 0.02em;
    padding: 1em 2em 1em 0em;
        border-bottom:1px solid #707070;
        color:#fff;

    }
    
    .drop-sub a.dropdown-item {
    font-size: 14px;
    font-size:0.875em;
    font-weight: 600;
        padding-left:0;
        padding:0.6em 0
    }
       li.mcnv{display:block}
    #navbarSub li.mcnv .nav-link{border:0}
    .nav-link a{text-decoration:none;}
    #navbarSub .nav-link:hover {
    text-decoration: none;
}
    
}



@media (max-width: 991px){
#navbarNav .nav-link {
    padding: 0.9em 1.5em;
    }
}

@media (max-width: 720px){
#navbarNav .nav-link {
    padding: 0.9em 0.5em;
    }
}

/* Headslider */

#headslider .carousel-item, #headslider .carousel-item > .container, #headslider .carousel-item > .container > .row {
    /* min-height: calc(100vh - 4rem);*/
}

#headslider {
    width:100%;
    max-width:1440px;
    top:0;
   left: 0;
    right: 0;
    margin: auto;
    overflow: hidden;
}

#headslider .slick-slide {
    height: 100vh;
    max-height: 790px;
    min-height:620px;
    padding-top: 250px;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

.bereich-elektrik  .slidermotiv1 {
      background-image: url(../images/slider/GTB_Elektrik_SmartHome.jpg);
}
.bereich-elektrik .slidermotiv2 {
    background-image: url(../images/slider/GTB_Elektrik_Elektroinstallation.jpg);
}
.bereich-elektrik  .slidermotiv3 {
    background-image: url(../images/slider/GTB_Elektrik_Kommunikationstechnik.jpg);
}

.bereich-elektrik  .slidermotiv4 {
    background-image: url(../images/slider/GTB_Elektrik_DatenNetzwerk.jpg);
}
.bereich-elektrik  .slidermotiv5 {
    background-image: url(../images/slider/GTB_Elektrik_Elektromobilitaet_Ladesaeulen.jpg);
}

.bereich-elektrik  .slidermotiv6 {
    background-image: url(../images/slider/GTB_Elektrik_Blitzschutz.jpg);
}
.bereich-elektrik  .slidermotiv7 {
    background-image: url(../images/slider/GTB_Elektrik_jobs.jpg);
}

.bereich-gebaeudetechnik .slidermotiv1 {
      background-image: url(../images/slider/GTB_Gebaeudetechnik_Sanitaer.jpg);
}

.bereich-gebaeudetechnik .slidermotiv2 {
      background-image: url(../images/slider/GTB_Gebaeudetechnik_Lueftung.jpg);
}

.bereich-gebaeudetechnik .slidermotiv3 {
      background-image: url(../images/slider/GTB_Gebaeudetechnik_heizung.jpg);
}

.bereich-gebaeudetechnik .slidermotiv4 {
      background-image: url(../images/slider/GTB_Gebaeudetechnik_badplaner.jpg);
}
.bereich-gebaeudetechnik .slidermotiv5 {
      background-image: url(../images/slider/GTB_Gebaeudetechnik_heizungsrechner.jpg);
}
.bereich-gebaeudetechnik  .slidermotiv7 {
    background-image: url(../images/slider/GTB_Elektrik_jobs.jpg);
}
.bereich-gebaeudetechnik .slidermotiv8 {
    background-image: url(../images/slider/GTB_Gebaeudetechnik_Klimadecke.jpg);
}


.bereich-kundendienst .slidermotiv1 {
      background-image: url(../images/slider/GTB_Kundendienst_Beratung.jpg);
}

.bereich-kundendienst .slidermotiv2 {
      background-image: url(../images/slider/GTB_Kundendienst_Wartung.jpg);
}

.bereich-kundendienst .slidermotiv3 {
      background-image: url(../images/slider/GTB_Kundendienst_Legionellen.jpg);
}
.bereich-kundendienst .slidermotiv4 {
      background-image: url(../images/slider/GTB_Kundendienst_ServiceHotline.jpg);
}
.bereich-kundendienst .slidermotiv5 {
      background-image: url(../images/slider/GTB_Kundendienst_Not.jpg);
}

.bereich-kundendienst .slidermotiv7 {
    background-image: url(../images/slider/GTB_Elektrik_jobs.jpg);
}




#headslider .slick-dots {
    bottom: inherit;
    top:280px;
    text-align: left;
    margin-left: 27.5%;
}

#headslider .slick-dots li {
    position: relative;
    display: inline-block;
    width: 3.2rem;
    height: 20px;
    margin: 0 5px;
    padding: 0;
    cursor: pointer;  
}

.slick-dots span {
     display: block;
    width: 1.7em;
    font-size: 0.6em;
    margin: 0 0.1rem;
    color: #fff;
    font-weight: 300;
    float:left;
    text-align:left
}


.slick-dots span.theline {
    display: block;
   float:left;
    width: 1.7rem;
    padding-top: 0.7em;
    border-bottom: 1px solid #949494;
    margin-right: 0rem;
}

.slick-dots span.theline:after {
    content: "";
    width: 0em;
    height: 1px;
    background: #fff;
    position: absolute; 
}

.slick-dots .slick-active span.theline:after {
    width: 1.7rem; transition: width 5s ease;
}
.breadcrumb{background-color:transparent; margin:0;padding:0; margin-left:-2.7rem}


.breadcrumb span {
    display: block;
    width: auto;
    font-size: 0.625em;
    margin: 0 0.1rem;
    margin-right:0.5rem;
    color: #fff;
    font-weight: normal;
    float: left;
    text-align: left;
    text-transform: uppercase;
}


.breadcrumb span.theline {
    display: block;
   float:left;
    width: 1.7rem;
    padding-top: 0.7em;
    border-bottom: 1px solid #fff;
    margin-right: 0.4rem;
}


#headslider .slick-slide h2 {
    font-weight: 700;
    font-size: 4.375em;
    color: #fff;
    margin-top: 2em;
}

#headslider .slick-slide p {
    font-size:1.125em;
    color:#fff;
    font-weight:600;
    margin-top:1.3em;
    
}

#headslider .slick-slide .btn-more {
    border: 1px solid #fff;
    border-radius: 0;
    color: #fff;
    font-size: 0.875em;
    text-transform: uppercase;
    padding: 1.5em 5em; 
    font-weight:bold;
}


.scrollicons{position:absolute; 
    top:225px;
    margin:0 auto;
    left: 0;
    right: 0;
    width:100%;
    max-width: 1270px;
    pointer-events:none;
}
.scrollicons>*{display:block;margin-bottom:1em}
.icn-scroll{width:1em;margin-top:4em}
.icn-social{ pointer-events:all;width:40px;}
.scrollicons a:hover{opacity:0.7}


/* headimage */

#headimage .container, #headslider .container{background:none;}

#headimage {
    width:100%;
    max-width:1440px;
    top:0;
    left: 0;
    right: 0;
    margin: auto;
}
#headimage>div {
    height: 100vh;
    max-height: 570px;
    min-height:500px;
    padding-top: 280px;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top center;
}

.bereich-gebaeudetechnik #headimage>div , .bereich-kundendienst #headimage>div{background-position: center;}

.bereich-gebaeudetechnik #headimage>.slidermotiv7, .bereich-kundendienst #headimage>.slidermotiv3, .bereich-kundendienst #headimage>.slidermotiv2,  .bereich-kundendienst #headimage>.slidermotiv7{ background-position: top center;}




#headimage h2 {
    font-weight: 700;
    font-size: 4.375em;
    color: #fff;
    margin-top: 0.4em;
    line-height:1
}
/* content */


body{color:#2F2F2D}
h1 {
    font-size: 2.6em;
    line-height: 1.15;
    letter-spacing: 0.018em;
    margin-bottom:0.65em;
    font-weight: 700;
}
h2 {
    font-size: 3.44em;
    font-weight: 700;
    color:#2F2F2E;
        margin-left: -0.05em;
}
h3 {
    font-size: 2.64em;
    font-weight: 700;
    line-height: 1.15;
    margin-bottom: 0.65em
}

h4 {
    font-size: 1.4em;
    font-weight: 700;
    line-height: 1.25;
    margin-bottom: 0.65em
}

h5{font-size:0.8em;font-weight:500;color:#ACACAC; letter-spacing:0.05em}


p{font-size:1.125em;line-height:1.4;font-weight:normal;}

p.p-larger{font-size:1.25em;line-height:1.3}


.subpage main>.container:first-child{margin-top:-5em;}


.subinfo-hl h3_{background:#fff;transform:translate(-70%, 170%);font-size: 1.86em;}

.subinfo-hl h3{background:#fff;font-size: 1.86em;position:absolute;
bottom:0;margin-left:-5em;margin-bottom:-0.1em;width:85%}


.subinfo-hl.sublarge h3_{transform:translate(-35%, 160%)}
.subinfo-hl.sublarge2 h3{transform:translate(-55%, 120%)}


.container-leistungen{background-color:#F6F6F6}

#sliderleistungen .slick-slide{position:relative;height:30em; width:21em;;}
.sl-bg {
  width: 100%;
    font-size: 9.2em;
    font-weight: 800;
    position: absolute;
    color: #fff;
    text-align: center;
    /* padding-top: 1em; 
     text-shadow: 0px 0px 50px rgba(0,0,0,0.15);
    */
    margin-left: 0.7em;
   letter-spacing: 0.04em;
    transition: all 0.3s;
    transform: rotate(-90deg);
    padding-bottom: 0.3em;
}

#sliderleistungen .slick-slide:hover .sl-bg{ color:#eee;    text-shadow: 0px 0px 50px rgba(0,0,0,0.1);}

.sl-img {
    position: absolute;
    transition:transform 0.3s ease;
    padding:3em
}

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    .sl-img img.img-fluid{width:99.9%}
}

 
#sliderleistungen .slick-slide:hover  .sl-img{transform:translateY(-2.2em) scale(1.2)}

.sl-hl {
    font-size: 1.6em;
    line-height:1.1em;
    font-weight: bold;
    margin-top: 80%;
    padding:0 3rem
}

.sl-wt {
    background: #fff;
    height: 100%;
    width: 0;
    position: absolute;
    transition: width 0.3s ease
}

#sliderleistungen .slick-slide:hover .sl-wt {
    width: 100%;
}

.sl-info {
    font-weight: normal;
    position: absolute;
    margin-top: 55%;
    font-size: 1.1em;
    padding: 3rem 2rem 0 3rem;
    ;
    opacity: 0;
    transition: opacity 0.3s
}

#sliderleistungen .slick-slide:hover .sl-info {
    opacity: 1;
}

.sl-link {
    text-transform: uppercase;
    font-weight:600;
    font-size: 0.8em;
    position: absolute;
    bottom: 2em;
    margin-left: 3rem;
    transition: margin 0.3s ease;
    letter-spacing: 0.05em;
    color:#23315A;
    cursor:pointer;
}

.sl-link a{color:#23315A;text-decoration: none;}

.sl-link:before {
    content: "";
    position: absolute;
    width: 2.5rem;
    height: 1px;
    background: #cdcdcd;
    margin-left: -3rem;
    margin-top: 10px;
}

.sl-link a:before {
    content: "";
    position: absolute;
    border: solid black;
    border-width: 0 1px 1px 0;
    display: inline-block;
    padding: 3px;
    transform: rotate(-45deg);
    margin-left: -14px;
    margin-top: 7px;
    opacity: 0
}

#sliderleistungen .slick-slide:hover .sl-link a:before{opacity:1}

#sliderleistungen .slick-slide:hover .sl-link {margin-left:6rem}

#sliderleistungen .slick-slide:hover .sl-link:before{background:black}

ul.listbereiche  {
  list-style-type: none;
}
ul.listbereiche li{ margin-left: -1.1em;margin-top:1.5em;padding-right: 1.5em;}

ul.listbereiche li:before {
  content: "–";
  position: absolute;
  /*change margin to move dash around*/
  margin-left: -1.2em;
}




i {
  border: solid black;
  border-width: 0 2px 2px 0;
  display: inline-block;
  padding: 4px;
}

.right {
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
}

.left {
  transform: rotate(135deg);
  -webkit-transform: rotate(135deg);
}

.dirbuttons {
    margin: 0 auto;
    text-align: center;
}

.dirbuttons button {
    background:#fff;
    border: 1px solid #000;
    width: 4em;
    height: 4em;
    margin: 0;
    transition:background 0.3s;
}

#btright {
    margin-left: -1px;
}

.dirbuttons button:hover {
    background: #23315A;
}

.bereich-elektrik .dirbuttons button:hover {
    background: #E74124;
}

.bereich-elektrik .dirbuttons button:hover {
    background: #E74124;
}

.bereich-kundendienst .dirbuttons button:hover {
    background: #61BFE6;
}


.dirbuttons button:hover i {
    border: solid white;
  border-width: 0 2px 2px 0;
  display: inline-block;
  padding: 4px;
}

.container-leistungen h2{font-size:3.44em;font-weight:700}

.linebefore{margin-left:4em}
.linebefore:before{content:"";background:#ACACAC;width:3.4em;height:1px;margin-left:-4em;margin-top:0.4rem; position:absolute;}

.lineafter:after{content:"";background:#ACACAC;width:3.4em;height:1px;;margin-left:0.3em;margin-top:0.4rem; position:absolute;}

.numberrow{margin-left:0.1rem;color:#F6F6F6;font-size:4.375em;font-weight:bold;}

.numberrow.linebefore:before{content:"";background:#D0D0D0;width:2.5rem;height:1px;display:block;margin-left:-3rem;margin-top:0.4rem; position:absolute;margin-top:3.5rem}

.btn-contact, a.btn-contact{
    border: 1px solid #E74124;
    background:#E74124;
    border-radius: 0;
    color: #fff;
    font-size: 0.875em;
    text-transform: uppercase;
    padding: 1.5em 5em;
    transition:all 0.2s!important;
    transition-delay: 0;
    font-weight:600;
}

.btn-contact:hover, a.btn-contact:hover{color:#23315A;background:#fff;}
.btn-more:hover{background:#fff;color:#E74124 ;}
.bereich-elektrik .btn-more:hover{background:#fff;color:#E74124 !important;}

.bereich-kundendienst .btn-contact, .bereich-kundendienst a.btn-contact{
    border: 1px solid #61BFE6;
    background:#61BFE6;
    border-radius: 0;
    color: #fff;
    font-size: 0.875em;
    text-transform: uppercase;
    padding: 1.5em 5em;
    transition:background 0.2s;
    font-weight:600;
}

.bereich-kundendienst .btn-contact:hover, .bereich-kundendienst a.btn-contact:hover{color:#23315A;background:#fff;}
.bereich-kundendienst .btn-more:hover{color:#23315A;background:#61BFE6;}


.bereich-gebaeudetechnik .btn-contact, .bereich-gebaeudetechnik a.btn-contact{
    border: 1px solid #23315A;
    background:#23315A;
    border-radius: 0;
    color: #fff;
    font-size: 0.875em;
    text-transform: uppercase;
    padding: 1.5em 5em;
    transition:background 0.2s;
    font-weight:600;
}

.bereich-gebaeudetechnik .btn-contact:hover, .bereich-gebaeudetechnik a.btn-contact:hover{color:#23315A;background:#fff;}
.bereich-gebaeudetechnik .btn-more:hover{color:#23315A;background:#23315A;}




.kontaktseite, .impressumdatenschutz{margin-top:300px}
.hotline.kontaktseite{margin-top:inherit}
.hotline.kontaktseite main>.container:first-child{margin-top:-5em;!important}
.kontaktseite h1, .impressumdatenschutz h1{color:#E74124;font-weight:800;font-size:2.75em}
.kontaktseite h4{font-size:1.125;}
.kontaktseite label, .jobseite label{font-size:0.75em;font-weight:600;color:#949494}
.kontaktseite input, .jobseite input {background:#F6F6F6; border:0;border-radius:0;height:4rem;line-height:100%; font-size:1.3em;}
.kontaktseite textarea, .jobseite textarea{background:#F6F6F6; border:0;border-radius:0;font-size:1.3em;}
.kontaktseite a, .jobseite a{color:#23315A;font-weight:600}

.jobseite select {background:#F6F6F6; border:0;border-radius:0;height:4rem;line-height:100%; font-size:1.3em;padding-right:1em;padding-left:1em}

.jobseite h1{font-size:2.75em}
.jobseite h2{font-size:2.75em; font-weight:800}
.jobseite .container-fluid .row{max-width: 1270px; margin:0 auto}
.jobseite .container-fluid:nth-child(even){background:#F6F6F6}
.jobseite .container-fluid p{margin-bottom:0;color:#898989}
.jobseite .container-fluid p strong{font-weight:600}
.jobseite strong{font-weight:600}
.jobseite li, .impressumdatenschutz li{font-size:1.125em}
.jobseite a.btn-contact{color:#fff}
.jobseite a.btn-contact:hover {
    color: #23315A;
    background: #fff;
}

.impressumdatenschutz strong{font-weight:600}
.impressumdatenschutz p, .impressumdatenschutz li{color:#898989;}
.impressumdatenschutz p a{color:#898989;}

.bereich-gebaeudetechnik .kontaktseite h1,.bereich-gebaeudetechnik .impressumdatenschutz h1{color:#2F2F2D;}


.bereich-kundendienst .kontaktseite h1,.bereich-kundendienst .impressumdatenschutz h1{color:#61BFE6;}


.hotline.kontaktseite h1{color:#2F2F2D;font-size:2.75em}
.hotline.kontaktseite h2 {color:#61BFE6;font-size:4.3em; font-weight:800;margin-bottom:0.3em}
.hotline.kontaktseite h2 a{font-weight:800;color:#61BFE6;}
.bgwhite{background:#fff;}

/* Page footer */

.page-footer{background:#F6F6F6; margin-top:5rem}

.page-footer>.container{background:#fff;}

.page-footer nav>.container{background:#fff;}

#navbarFooter li{float:left}
.page-footer a.navbar-brand {
    float: left;
    margin-top: 1rem;
}

#navbarFooter .nav-link {
    font-weight: 700;
    font-size: 0.73rem;
    letter-spacing: 0.03em;
    padding:2.5em 3em;
}
.page-footer a.nav-link{text-transform: uppercase}

#navbarFooter .nav-link:hover{text-decoration:underline;}
#navbarFooter .nav-item {border-right:1px solid #ddd;}

.footer-copyright{color:#9F9F9F;font-weight:600;font-size:0.75em}

.twocolumns  { column-count: 2;
    column-gap: 1em;}
/* responsive */
@media (max-width: 1275px)
{
.scrollicons>* {
    margin-left: 1em;
}
    .slick-slide{font-size:0.9em}
    .sl-bg{font-size:8em}
    
  
    
.sl-link:before {
    margin-top: 9px;
}    
 .sl-link a:before{margin-top:6px;}
    
    #headslider .slick-dots {
    margin-left: 25%;
}
    .hotline.kontaktseite h2 {
        font-size: 3.3em;}
    
}


@media (max-width: 991px)
{
    html, body{
    font-size:0.9em;
}
    
.subinfo-hl h3{background:#fff;position:relative;
bottom:0;margin-left:0;margin-bottom:1rem;width:100%}
    
   .container-leistungen h2 {
    font-size: 1.8em;
}
     .slick-slide{font-size:1em}
    .sl-bg{font-size:10em}
    
    .sl-link:before {
    margin-top: 8px;
}  
    .sl-link a:before{margin-top:5px;}
}

@media (max-width: 767px){
    
    .scrollicons, .breadcrumb{display:none !important;}
    
    #headslider .slick-dots {

   margin-left: 24px;
}
    
}

@media (max-width: 575px)
{
    html, body{
    font-size:1em;
}

.sl-link:before {
    margin-top: 10px;
}
.sl-link a:before {
    margin-top: 7px;}
    
.slick-dots span.theline {
    width: 1rem;}
    
#headslider .slick-dots li {
    width: 2.4rem;
    height: 20px;
    margin: 0 1px;
}
    .slick-dots .slick-active span.theline:after {
    width: 1rem; 
}
    
    .drop-sub a.dropdown-item:hover{color:#949494;}
    
  #headslider .slick-slide h2,   #headimage h2{font-size:2em}
    #headimage h2 {
    margin-top: 1.9em;
}
    #headslider .slick-dots {
        top: 137px;}
    
    #headslider .slick-slide {
        padding-top: 152px;}
        
     .hotline.kontaktseite h1{font-size:1.7em}
    .hotline.kontaktseite h2{font-size:2.3em}
    
    #headimage>div {
    height: 80h;
    max-height: 390px;
    min-height: 420px;
    padding-top: 200px;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}
  
    h1, .jobseite h1, .kontaktseite h1,.impressumdatenschutz h1 {
        font-size: 1.7em;margin-top:0.6em;margin-bottom: 0.8em;}
     h3{font-size:1.7em}
    h2, .jobseite h2{font-size:1.7em;line-height:1.1}
    h4{font-size:1.2em;margin-bottom:1em}
    p{font-size:1.1em}
    p.p-larger {
    font-size: 1.1em;
    line-height: 1.3;
}
    .subinfo-hl h3 {
        transform: translate(0,0);}
   .container-leistungen h2 {
    margin-top: 1.8em;   
    font-size: 1.8em;
}
    #sliderleistungen .slick-slide {
    height: 28em;
    width: 100vw;
         width: 20em;
}
    .col, .col-1, .col-10, .col-11, .col-12, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-auto, .col-lg, .col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-auto, .col-md, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-auto, .col-sm, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-auto, .col-xl, .col-xl-1, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-auto
    {    position: relative;
    width: 100%;
    padding-right: 24px;
    padding-left: 24px;}
    
    .container-fluid, .container-lg, .container-md, .container-sm, .container-xl {
    width: 100%;
    padding-right: 24px;
    padding-left: 24px;
    margin-right: auto;
    margin-left: auto;
}
    
    .sl-hl{font-size:1.4em}   
    
    .numberrow {
    margin-left: 0.1rem;
    font-size: 2.8em;
}
    .numberrow.linebefore:before {margin-top:2.2rem;width:2rem}
    
    .page-footer nav>.container {
    background: #fff;
    margin:0 1.5em;
    width: calc(100% - 3em);
}
   .page-footer a.navbar-brand {
    float: none;
    margin-top: 1rem;
   width:100%;
       text-align:center;
}
    .page-footer a.navbar-brand img{height:35px}

   #navbarFooter .nav-link {
    font-weight: 700;
    font-size: 0.73rem;
    letter-spacing: 0.03em;
    padding:1.3em 0.5em;
}
    
  #navbarFooter  .navbar-nav {
    display: unset;
    }
    #navbarFooter .nav-item:last-child {
    border-right: 0;
}
    
    .kontaktseite, .impressumdatenschutz {
    margin-top: 160px;
}
    
      .btn-contact, a.btn-contact {
    padding: 1.5em 3em;
        width: calc(100vw - 48px);
          overflow:hidden;

}
    
    form{width:100%;margin:0;padding:0}
    form p{margin:0}
    
    .twocolumns  { column-count: unset;}
}


@media (min-width: 992px){
.pl-lg-0, .px-lg-0 {
    padding-left: 1em!important;
}}
@media (min-width: 1268px){
.pl-lg-0, .px-lg-0 {
    padding-left: 0!important;
}}


/* animation */
.container-fluid{opacity:0;}

.slick-slider{opacity:0}
.slick-slider.in-view{opacity:1;   transition: opacity 1s}

.container-fluid.in-view{opacity:1;   transition: opacity 0.8s}

.container .row>div, .container-fluid .row>div  {  
    transform: translateY(50px);
    opacity: 0;}

.container .row > div.in-view, .container-fluid .row > div.in-view {
    opacity: 1;
    transform: translateY(0px);
    transition: opacity 0.8s, transform 0.8s ease;}

#headimage .container .row>div{ transform: translateY(0px);}


.container .row > div.in-view:nth-child(1) {
     transition-delay: 0s;
}
.container .row > div.in-view:nth-child(2) {
     transition-delay: 0.1s;
}
.container .row > div.in-view:nth-child(3) {
   transition-delay: 0.2s;
}
.container .row > div.in-view:nth-child(4) {
   transition-delay: 0.3s;
}
.container .row > div.in-view:nth-child(5) {
   transition-delay: 0.4s;
}
.container .row > div.in-view:nth-child(6) {
   transition-delay: 0.5s;
}
.container .row > div.in-view:nth-child(7) {
   transition-delay: 0.6s;
}
.container .row > div.in-view:nth-child(8) {
   transition-delay: 0.7s;
}
.container .row > div.in-view:nth-child(9) {
   transition-delay: 0.8s;
}


#sliderleistungen .slick-slide{opacity:0;transform: translateY(50px);}
#sliderleistungen.in-view .slick-slide{opacity:1;transform: translateY(0px); transition: opacity 0.8s, transform 0.8s ease;}



#sliderleistungen.in-view .slick-slide:nth-child(1) {
     transition-delay: 0.15s;
}
#sliderleistungen.in-view .slick-slide:nth-child(2) {
     transition-delay: 0.3s;
}
#sliderleistungen.in-view .slick-slide:nth-child(3) {
   transition-delay: 0.45s;
}
#sliderleistungen.in-view .slick-slide:nth-child(4) {
   transition-delay: 0.6s;
}
#sliderleistungen.in-view .slick-slide:nth-child(5) {
   transition-delay: 0.75s;
}
#sliderleistungen.in-view .slick-slide:nth-child(6) {
   transition-delay: 0.9s;
}
#sliderleistungen.in-view .slick-slide:nth-child(7) {
   transition-delay: 1.05s;
}
#sliderleistungen.in-view .slick-slide:nth-child(8) {
   transition-delay: 1.2s;
}
#sliderleistungen.in-view .slick-slide:nth-child(9) {
   transition-delay: 1.35s;
}


 .container .row>div h2 span, .container-fluid h1 span   {  
    transform: translateX(50px);
    opacity: 0;}

.row>div.in-view h2 span, .container-fluid.in-view h1 span {
    opacity: 1;
    transform: translateX(0px);
    transition: opacity 0.8s, transform 0.8s ease;}

.container .row>div h2 span:nth-child(3), .container-fluid h1 span:nth-child(3);{
     transform: translateY(-0.5rem) translateX(50px);
}
.container .row>div h2 span:nth-child(5), .container-fluid h1 span:nth-child(5);{
     transform: translateY(-0.5rem) translateX(50px);
}

.container .row>div.in-view h2 span:nth-child(1), .container-fluid.in-view h1 span:nth-child(1){
     transition-delay: 0.15s;
}
/*
.container .row>div.in-view h2 span:nth-child(2), .container-fluid.in-view h1 span:nth-child(2){
     transition-delay: 0.3s;
}*/
.container .row>div.in-view h2 span:nth-child(3), .container-fluid.in-view h1 span:nth-child(3){
     transform: translateY(-0.5rem) translateX(0);
     transition-delay: 0.45s;
}
.container .row>div.in-view h2 span:nth-child(5), .container-fluid.in-view h1 span:nth-child(5){
     transform: translateY(-1rem) translateX(0);
     transition-delay: 0.6s;
    z-index:1;
}

footer .container{opacity: 1;    transform: translateX(0px);}
footer .container .row > div{opacity: 1;    transform: translateX(0px);}

form>* {opacity:0;transition: all 0.5s ease; transform: translateX(50px); }
.in-view  form>* {opacity:1; transform: translateX(0px);}
.in-view  form>*:nth-child(1) {
     transition-delay: 0.1s;
}
.in-view  form>*:nth-child(2) {
     transition-delay: 0.2s;
}
.in-view  form>*:nth-child(3) {
     transition-delay: 0.3s;
}
.in-view  form>*:nth-child(4) {
     transition-delay: 0.4s;
}
.in-view  form>*:nth-child(5) {
     transition-delay: 0.5s;
}
.in-view  form>*:nth-child(6) {
     transition-delay: 0.6s;
}
.in-view  form>*:nth-child(7) {
     transition-delay: 0.7s;
}
.in-view  form>*:nth-child(8) {
     transition-delay: 0.8s;
}
.in-view  form>*:nth-child(9) {
     transition-delay: 0.9s;
}
/* animated Burger Menu */

/* Icon 1 */

.animated-icon1, .animated-icon2, .animated-icon3 {
width: 30px;
height: 20px;
position: relative;
margin: 0px;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .5s ease-in-out;
-moz-transition: .5s ease-in-out;
-o-transition: .5s ease-in-out;
transition: .5s ease-in-out;
cursor: pointer;
}

.animated-icon1 span, .animated-icon2 span, .animated-icon3 span {
display: block;
position: absolute;
height: 3px;
width: 100%;
border-radius: 9px;
opacity: 1;
left: 0;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .25s ease-in-out;
-moz-transition: .25s ease-in-out;
-o-transition: .25s ease-in-out;
transition: .25s ease-in-out;
}

.animated-icon1 span {
background: #6E6E6E;
}

.animated-icon2 span {
background: #6E6E6E;
}

.animated-icon3 span {
background: #6E6E6E;;
}

.animated-icon1 span:nth-child(1) {
top: 0px;
}

.animated-icon1 span:nth-child(2) {
top: 10px;
}

.animated-icon1 span:nth-child(3) {
top: 20px;
}

.animated-icon1.open span:nth-child(1) {
top: 11px;
-webkit-transform: rotate(135deg);
-moz-transform: rotate(135deg);
-o-transform: rotate(135deg);
transform: rotate(135deg);
}

.animated-icon1.open span:nth-child(2) {
opacity: 0;
left: -60px;
}

.animated-icon1.open span:nth-child(3) {
top: 11px;
-webkit-transform: rotate(-135deg);
-moz-transform: rotate(-135deg);
-o-transform: rotate(-135deg);
transform: rotate(-135deg);
}

/* Icon 3*/

.animated-icon2 span:nth-child(1) {
top: 0px;
}

.animated-icon2 span:nth-child(2), .animated-icon2 span:nth-child(3) {
top: 10px;
}

.animated-icon2 span:nth-child(4) {
top: 20px;
}

.animated-icon2.open span:nth-child(1) {
top: 11px;
width: 0%;
left: 50%;
}

.animated-icon2.open span:nth-child(2) {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}

.animated-icon2.open span:nth-child(3) {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}

.animated-icon2.open span:nth-child(4) {
top: 11px;
width: 0%;
left: 50%;
}

/* Icon 4 */

.animated-icon3 span:nth-child(1) {
top: 0px;
-webkit-transform-origin: left center;
-moz-transform-origin: left center;
-o-transform-origin: left center;
transform-origin: left center;
}

.animated-icon3 span:nth-child(2) {
top: 9px;
    width:22px;
-webkit-transform-origin: left center;
-moz-transform-origin: left center;
-o-transform-origin: left center;
transform-origin: left center;
}

.animated-icon3 span:nth-child(3) {
top: 18px;
-webkit-transform-origin: left center;
-moz-transform-origin: left center;
-o-transform-origin: left center;
transform-origin: left center;
}

.animated-icon3.open span:nth-child(1) {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
top: 0px;
left: 8px;
}

.animated-icon3.open span:nth-child(2) {
width: 0%;
opacity: 0;
}

.animated-icon3.open span:nth-child(3) {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
top: 21px;
left: 8px;
}

/* ==========================================================================
   Helper classes
   ========================================================================== */

/*
 * Hide visually and from screen readers
 */

.hidden {
  display: none !important;
}

/*
* Hide only visually, but have it available for screen readers:
* https://snook.ca/archives/html_and_css/hiding-content-for-accessibility
*
* 1. For long content, line feeds are not interpreted as spaces and small width
*    causes content to wrap 1 word per line:
*    https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe
*/

.sr-only {
  border: 0;
  clip: rect(0, 0, 0, 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap;
  width: 1px;
  /* 1 */
}

/*
* Extends the .sr-only class to allow the element
* to be focusable when navigated to via the keyboard:
* https://www.drupal.org/node/897638
*/

.sr-only.focusable:active,
.sr-only.focusable:focus {
  clip: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  position: static;
  white-space: inherit;
  width: auto;
}

/*
* Hide visually and from screen readers, but maintain layout
*/

.invisible {
  visibility: hidden;
}

/*
* Clearfix: contain floats
*
* For modern browsers
* 1. The space content is one way to avoid an Opera bug when the
*    `contenteditable` attribute is included anywhere else in the document.
*    Otherwise it causes space to appear at the top and bottom of elements
*    that receive the `clearfix` class.
* 2. The use of `table` rather than `block` is only necessary if using
*    `:before` to contain the top-margins of child elements.
*/

.clearfix:before,
.clearfix:after {
  content: " ";
  /* 1 */
  display: table;
  /* 2 */
}

.clearfix:after {
  clear: both;
}

/* ==========================================================================
   EXAMPLE Media Queries for Responsive Design.
   These examples override the primary ('mobile first') styles.
   Modify as content requires.
   ========================================================================== */

@media only screen and (min-width: 35em) {
  /* Style adjustments for viewports that meet the condition */
}

@media print,
  (-webkit-min-device-pixel-ratio: 1.25),
  (min-resolution: 1.25dppx),
  (min-resolution: 120dpi) {
  /* Style adjustments for high resolution devices */
}

/* ==========================================================================
   Print styles.
   Inlined to avoid the additional HTTP request:
   https://www.phpied.com/delay-loading-your-print-css/
   ========================================================================== */

@media print {
  *,
  *:before,
  *:after {
    background: transparent !important;
    color: #000 !important;
    /* Black prints faster */
    box-shadow: none !important;
    text-shadow: none !important;
  }
  a,
  a:visited {
    text-decoration: underline;
  }
  a[href]:after {
    content: " (" attr(href) ")";
  }
  abbr[title]:after {
    content: " (" attr(title) ")";
  }
  /*
     * Don't show links that are fragment identifiers,
     * or use the `javascript:` pseudo protocol
     */
  a[href^="#"]:after,
  a[href^="javascript:"]:after {
    content: "";
  }
  pre {
    white-space: pre-wrap !important;
  }
  pre,
  blockquote {
    border: 1px solid #999;
    page-break-inside: avoid;
  }
  /*
     * Printing Tables:
     * https://web.archive.org/web/20180815150934/http://css-discuss.incutio.com/wiki/Printing_Tables
     */
  thead {
    display: table-header-group;
  }
  tr,
  img {
    page-break-inside: avoid;
  }
  p,
  h2,
  h3 {
    orphans: 3;
    widows: 3;
  }
  h2,
  h3 {
    page-break-after: avoid;
  }
}


/* Datenschutz & Consent */

.impressumdatenschutz p, .impressumdatenschutz li {
    color: #2F2F2D;
}

@media only screen and (max-width: 1279px) {
.datenschutztext{padding:1rem}
}
@media only screen and (min-width: 768px) {
.datenschutztext {
  column-count: 2;
padding-top:8.3rem;}

.datenschutztext h1{margin-top: -8.3rem;}
}
.datenschutztext h2 {
    font-size: 1.6em;
    font-weight: 700;
    line-height: 1.5;
    margin-bottom: 0.65em;
}

.datenschutztext h3 {
    font-size: 1.2em;
}