@import url("../fonts/fonts.css");
:root {
  --blue: #0063af;
  --red: #d60d47; 
  --black: #23160d;
  --white: #fff; 
  --gray:#d7d7d7;
  --graylight:#f7f7f7;

}


html {  lang: de;   overflow:auto;scroll-behavior: smooth;    }
body{ font-family: 'Open Sans';      font-weight: 400;line-height:1.4;font-size:18px;color:var(--black);}
.tm-page {    max-width: 1920px;    margin: 0 auto;}

h1,h2,h3,h4{    font-family: 'Poppins';  }
  
h1{ font-size: 45px;font-weight: 500;}
h1 span{   color:var(--red);display:block;font-size: 60px;font-weight: 700;}
h2 { font-size: 45px; font-weight: 500; line-height:1; }
h2 span{     color:var(--red);display:block;font-size: 60px;font-weight: 700;}
.uk-link, a {    color: var(--red);}
.btn, .uk-button {    font-family: 'Poppins';line-height: 1.1;padding:10px 20px;}
.uk-card-secondary.uk-card-body, .uk-card-secondary>:not([class*=uk-card-media]) {     color: var(--white)!important;}

.spacing-top{margin-top:170px;}
.spacing-top{margin-top:170px;}

.uk-logo {    padding: 10px 0;}
.uk-navbar-nav>li>a {    padding: 6px 0;}
.uk-navbar-nav>li.uk-active>a {    border-bottom: 2px solid var(--red);}
.uk-drop.uk-open {    display: block;    border-top: 2px solid var(--red);}
.uk-drop.uk-navbar-dropdown.uk-open:before {    position: absolute;    content: '';    top: -10px;    left: 60px;    width: 0;    height: 0;    border-left: 10px solid transparent;    border-right: 10px solid transparent;    border-bottom: 10px solid var(--red);}
.uk-navbar-sticky img{height:60px}
.uk-navbar-container.uk-navbar-sticky {    background: var(--graylight);    clip-path: polygon(100% 0%, 100% 80%, 30% 80%, 27% 100%, 0% 100%, 0% 0%);}
.uk-navbar-container.uk-navbar-sticky  .uk-navbar-nav {        margin-top: -20px;    }
  
  
.listblock ul {    padding-left: 0;}
.listblock li{  list-style: none;padding: 6px 0 6px 32px;    background: url(/images/assets/icon_done.svg) 0px 5px no-repeat;    background-size: 24px;    line-height: 1.4;}

#services .uk-width-1-3\@m {        padding: 10px;    }

#services{background:url(/images/assets/elect-hor5-01.svg) right  center no-repeat;background-size:contain;}
#services  h3 {    font-size: 40px;    font-weight: 700;}
#services .uk-overlay-title {    position: absolute;    top: 0;    left: 0;    right: 0;    bottom: 0;    display: flex;    flex-wrap: wrap;    align-content: center;    justify-content: center;    }
#services .uk-transition-toggle.uk-inline-clip:hover .uk-overlay-title{   display:none;}
.home #advice {    margin-top: 230px !important;}
#feed{clip-path: polygon(0% 0%, 47% 0%, 50% 5%, 100% 5%, 100% 100%, 0% 100%);}
#logos img { transform: scale(1);transition:all 400ms;}
#logos img:hover {    transform: scale(1.05); transition:all 400ms;}

.uk-accordion {  padding: 20px;    list-style: none;    background: #fff;    z-index: 10;    position: relative;    margin: -20px;}
.uk-accordion-title::before {    background-size: 22px;}
.videoframe{	position: relative;	padding-bottom: 56%;	padding-top: 30px;	height: 0;	overflow: hidden;}
.videoframe iframe,  .videoframeo object,  .videoframe embed {	position: absolute;	top: 0;	left: 0;	width: 100%;	height: 100%;}
.videoframe.jobvideo {    max-width: 750px;float: right;}
.hd-image-comparison img{    height: 600px !important;}


a.jobtellink {    font-size: 45px;    font-weight: 700;    display: block;    font-family: 'Poppins';}

#contact h2 {    font-size: 30px;}
#contact h2 span {    font-size: 45px;}

.convertforms .cf-input {    border: solid 1px var(--gray)!important;}	
.convertforms .cf-checkbox-group input[type="checkbox"] {  appearance: none;  width: 20px;  height: 20px;  border: solid 1px var(--gray);  border-radius: 3px;  vertical-align: middle;  position: relative;  cursor: pointer;  margin-right: 30px;  transition: border 0.2s, background 0.2s;}
.convertforms .cf-checkbox-group input[type="checkbox"]:checked {  background-color: var(--white);  border: solid 1px var(--red)!important;}
.convertforms .cf-checkbox-group input[type="checkbox"]:checked::after {content: "";    position: absolute;    left: 7px;    top: 2px;    width: 9px;    height: 15px;    border: solid var(--red);    border-width: 0 2px 2px 0;    transform: rotate(45deg);}
.convertforms .cf-label .cf-required-label {    color: var(--white)!important; display: inline-block;  width: 1em;}
.convertforms .cf-btn {    cursor: pointer;    font-family: 'Poppins';    line-height: 1.1;}
.convertforms .cf-btn:hover {    opacity: 1;background-color: transparent;    color: #303033;    border: 1px solid #303033;}

#jobform {    margin: 0 50px 0 0;}
.hiring-badge {    background: var(--red);    color: var(--white) !important;    padding: 10px 20px!important;    border-radius: 0;    font-weight: bold;    text-decoration: none;  transition: background 0.3s ease;   animation: pulse 2s infinite;}
.hiring-badge:hover {    background: var(--blue);   }
  #hero:has(video) .uk-width-3-5\@m .uk-panel.uk-width-1-1 div:nth-child(2) {                z-index: 1;    }
  
  
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(255,71,87,0.6); }
  70% { box-shadow: 0 0 0 12px rgba(255,71,87,0); }
  100% { box-shadow: 0 0 0 0 rgba(255,71,87,0); }
}


footer .uk-section-primary{clip-path: polygon(0% 5%, 47% 5%, 50% 0%, 100% 0%, 100% 100%, 0% 100%);    font-size: 14px;background: var(--red);color:var(--white)!important;opacity:1;}
footer	.cf-form-wrap.cf-col-16 {    padding: 0;}




@media (max-width: 1600px ){
#hero .uk-grid {    padding-right: 50px;}
	
	
	
	
}
@media (max-width: 1440px ){
#services h3 {    font-size: 30px;}

#hero .uk-width-3-5\@m .uk-panel.uk-width-1-1 div:nth-child(1) {    right: -115px!important;  }
#hero .uk-width-3-5\@m .uk-panel.uk-width-1-1 div:nth-child(2) {    left: 180px !important;}
#hero .uk-width-3-5\@m .uk-panel.uk-width-1-1 div:nth-child(3) {    left: 60px!important;}
#advice  .uk-width-1-2\@m:nth-child(2) {        width: 40%;    }	
#advice:has(.hd-image-comparison)  .uk-width-1-2\@m:nth-child(1) {            padding: 20px;      }		
#advice:has(.hd-image-comparison)	#a1 {    right: -425px!important;    top: -60px!important;}


}
@media (max-width: 1366px ){}

@media (max-width: 1280px ){

#advice  .uk-width-1-2\@m:nth-child(1) {            padding: 100px;      }	
#advice:has(iframe)  .uk-width-1-2\@m:nth-child(1) {            padding: 20px;      }	
#advice:has(.hd-image-comparison)  .uk-width-1-2\@m:nth-child(1) {            padding: 20px;      }	

#advice  .uk-width-1-2\@m:nth-child(2) {          }	
#advice  #a1 img{    max-width: 200px;}
#advice	#a1down img{    max-width: 200px;}
#advice	#a1down {    left: -20px!important;    bottom: 170px!important;}
#advice #overlaypanel {left: 235px!important;    bottom: -320px!important;}

#overlaypanel2 { left: 435px!important;    bottom: -170px!important;}
#overlaypanel3{    left: 95px!important;    bottom: -235px!important;}



}

@media (max-width: 1194px ){
h1, h2{ font-size: 35px;}
h1 span, h2 span{ font-size: 45px;}
.uk-section-large {        padding-top: 110px;        padding-bottom: 110px;    }


#hero	.uk-width-3-5\@m {        padding: 0 100px;    }
    #hero:has(video) .uk-width-3-5\@m {
        padding: 0;
    }
#advice .uk-width-1-2\@m:nth-child(1) {        padding: 0 100px 0 50px;    }
#advice #overlaypanel {        left: 235px !important;        bottom: -250px !important;    }
#advice:has(.hd-image-comparison) #a1 {        right: -390px !important;        top: -60px !important;    }
#overlaypanel3 {        left: 95px !important;        bottom: -95px !important;    }
	
	
	
	
}


@media (max-width: 1024px){

	
	
	
#hero  .uk-width-2-5\@m {        width: 50%;    }
#hero  .uk-width-3-5\@m {        width: 45%;    }	


#hero .uk-width-3-5\@m {        padding: 0 65px;    }
#hero .uk-width-3-5\@m .uk-panel.uk-width-1-1 div:nth-child(1) {        right: -40px !important;top: 85px!important;    }
#hero .uk-width-3-5\@m .uk-panel.uk-width-1-1 div:nth-child(1) img{     max-width: 200px;    }
#hero .uk-width-3-5\@m .uk-panel.uk-width-1-1 div:nth-child(2) {    left: 100px !important;    }
#hero .uk-width-3-5\@m .uk-panel.uk-width-1-1 div:nth-child(3) {        left: -35px !important;top: 170px !important;    }
#hero .uk-width-3-5\@m .uk-panel.uk-width-1-1 div:nth-child(3) img{         max-width: 240px;    }	
#services h3 {        font-size: 25px;    }
#services  .el-content.uk-panel.uk-margin-top {    font-size: 16px;}
#advice #a1  img {        max-width: 150px;    }
#advice #a1  {    right: -300px!important;}
#advice #overlaypanel{        left: 85px !important;        bottom: -140px !important;    }
#advice #a1down {        left: -20px !important;        bottom: 260px !important;    }	
#advice:has(.hd-image-comparison) #a1 {        right: -345px !important;        top: -60px !important;    }
#overlaypanel2 {        left: 290px !important;        bottom: -140px !important;    }	
#overlaypanel3 {        left: 95px !important;        bottom: 170px !important;    }	
  	
	
}
@media (max-width: 960px){

#hero .uk-width-2-5\@m {        width: 100%;    }
#hero .uk-width-3-5\@m {        width: 100%;    }	
#hero .uk-width-3-5\@m .uk-panel.uk-width-1-1 div:nth-child(1) img{     max-width: none;    }
#hero .uk-width-3-5\@m .uk-panel.uk-width-1-1 div:nth-child(3) img{         max-width: none;    }	
#services .uk-width-1-3\@m {    padding: 0;   display: flex;   }
#services .uk-width-1-3\@m > div {    width: 50%;    margin: 10px !important;}
#services #panel .uk-width-1-3\@m  > div {    width: 100%;    margin: 10px !important;}
#advice .uk-width-1-2\@m:nth-child(1) {order:2;}
#advice .uk-width-1-2\@m:nth-child(2) {order:1;}
#advice #a1  {        right: -470px !important;    }
#advice #a1  img {        max-width: 200px;    }
#advice .uk-width-1-2\@m:nth-child(1) {        padding: 0 100px 0 20px;    }	
#services:has(#overlaypanel) {  padding-bottom: 100px;    }
#services:has(#overlaypanel2) {  padding-bottom: 100px;    }
#feedlogo .uk-background-center-center {    background-size: cover;}
#advice #a1down {        left: -20px !important;        bottom: -45px !important;    }	
#advice:has(.hd-image-comparison) #a1 {        right: -520px !important;        top: -60px !important;    }	
#overlaypanel2 {        left: 130px !important;        bottom: -100px !important;    }	
#overlaypanel3 {        left: 95px !important;        bottom: -80px !important;    }
	#a32  {
    right: -115px !important;
    bottom: -5px !important;
}
footer {    padding: 50px 0 0 0;}	
h1 span, h2 span  {  padding-bottom: 10px; hyphens: auto;
hyphenate-limit-chars: auto 3;
hyphenate-limit-lines: 4;}
    h1 span{font-size: 40px;}
    .tm-header-placeholder{display:none;}
    .home #advice { margin-top: 30px !important;}
.spacing-top {
  margin-top: 0px;
}


.uk-nav-default .uk-nav-sub, .uk-nav-default { 
  font-size: 13px;
  line-height: 1.9;
}
}

@media (max-width: 736px){}
@media (max-width: 667px){}
@media (max-width: 600px){}
@media (max-width: 568px){}
@media (max-width: 430px){
#hero .uk-width-3-5\@m {        padding: 0;    }	
#hero .uk-width-3-5\@m .uk-panel.uk-width-1-1 div:nth-child(1) {        right: -65px !important;        top: 85px !important;    }
#hero .uk-width-3-5\@m .uk-panel.uk-width-1-1 div:nth-child(1) img {        max-width: 220px;    }
#hero .uk-width-3-5\@m .uk-panel.uk-width-1-1 div:nth-child(2) {        left: 45px !important;    }
#hero .uk-width-3-5\@m .uk-panel.uk-width-1-1 div:nth-child(2) img{        max-width: 300px;    }
#hero .uk-width-3-5\@m .uk-panel.uk-width-1-1 div:nth-child(3) {        left: 25px !important;        top: 170px !important;    }
#hero .uk-width-3-5\@m .uk-panel.uk-width-1-1 div:nth-child(3) img {        max-width: 200px;    }
#services .uk-width-1-3\@m {        flex-direction: column;    }
#services .uk-width-1-3\@m > div {    width: 100%;            margin: 10px 0 !important;}
#advice #a1  img {        max-width: 150px;    }
#advice #a1  {        right: -210px !important;        top: -30px!important;    }
#advice #overlaypanel {        left: 85px !important;        bottom: 35px !important;        position: relative !important;    }
#advice #a1down img {        max-width: 150px;    }
#advice:has(.hd-image-comparison) #a1 {        right: -255px !important;        top: -30px !important;    }	
.hd-image-comparison img {    height: 440px !important;}	
.hd-image-comparison {    margin: 0 !important;}
#overlaypanel2 {        left: 25px !important;        bottom: -155px !important;    }
#overlaypanel3 {        left: 95px !important;        bottom: -270px !important;    }
#a32 {
        right: -60px !important;
        bottom: -70px !important;
    }
	
}
@media (max-width: 390px) {
#hero .uk-width-3-5\@m .uk-panel.uk-width-1-1 div:nth-child(1) {        right: -45px !important;        top: 85px !important;    }
#advice .uk-width-1-2\@m .uk-panel.uk-width-1-1 div:nth-child(1) .uk-position-absolute img {        max-width: 100px;    }	
	
}
@media (max-width: 375px){
#hero .uk-width-3-5\@m .uk-panel.uk-width-1-1 div:nth-child(2) img {        max-width: 275px;    }
#hero .uk-width-3-5\@m .uk-panel.uk-width-1-1 div:nth-child(1) {        right: -55px !important;        top: 85px !important;    }
#hero .uk-width-3-5\@m .uk-panel.uk-width-1-1 div:nth-child(1) img {        max-width: 200px;    }
	
	
	
}
@media (max-width: 320px){}
