.anim1, .anim5, .anim2, .anim3 {opacity: 0;}
.anim1.animated {animation-name: fromup; animation-duration: 0.5s; animation-delay: 0.1s;animation-fill-mode: both;}
.anim5.animated {animation-name: fromdown; animation-duration: 0.5s; animation-delay: 0.1s;animation-fill-mode: both;  }
.anim2.animated {animation-name: fromright; animation-duration: 0.5s; animation-delay: 0.1s; animation-fill-mode: both; }
.anim3.animated {animation-name: fromleft; animation-duration: 0.5s; animation-delay: 0.1s; animation-fill-mode: both; }

@keyframes fromup {0% {opacity:0; transform: translatey(80px);} 100% {opacity:1; transform: none;}}
@keyframes fromdown {0% {opacity:0; transform: translatey(-80px);} 100% {opacity:1; transform: none;}}
@keyframes fromright {0% {opacity:0; transform: translatex(50px);} 100% {opacity:1; transform: none;}}
@keyframes fromleft {0% {opacity:0; transform: translatex(-50px);} 100% {opacity:1; transform: none;}}

.anim4.animated {animation-name: alpha; animation-duration: 0.5s; animation-delay: 0s;animation-fill-mode: both; }
.anim13.animated {animation-name: alpha; animation-duration: 0.75s; animation-delay: 0.25s;animation-fill-mode: both; }
.anim14.animated {animation-name: alpha; animation-duration: 0.1s; animation-delay: 0.5s;animation-fill-mode: both; }

@keyframes alpha {0% {opacity:0;} 100% {opacity:1;}}

.anim4a.animated {animation-name: fadefromout; animation-duration: 1s; animation-fill-mode: both; }
.anim4b.animated {animation-name: fadefromin; animation-duration: 1s; animation-fill-mode: both; } 

@keyframes fadefromout {0% {opacity:0; transform: scale(1.08);} 100% {opacity:1; transform: scale(1);}}
@keyframes fadefromin {0% {opacity:0; transform: scale(0.85);} 100% {opacity:1; transform: scale(1);}}

.anim6.animated {animation-name: zoomInLeft; animation-duration: 1s; } 
.anim7.animated {animation-name: zoomInRight; animation-duration: 1s; } 
.anim8.animated {animation-name: zoomInUp; animation-duration: 1s; }

@keyframes zoomInLeft {0% {opacity: 0; transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0); animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);} 60% {opacity: 1; transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0); animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);  } 100% {opacity:1;transform: none;}}
@keyframes zoomInRight {0% {opacity: 0; transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0); animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);  }  60% {opacity: 1;  transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0);   animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);  } 100% {opacity:1;transform: none;}}
@keyframes zoomInUp {  0% {  opacity: 0;   transform: scale3d(.1, .1, .1) translate3d(0, -500px, 0);  animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);  }  60% {  opacity: 1;  transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);  animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);  } 100% {opacity:1;transform: none;}}

.anim9.animated {animation-name: flipInY; animation-duration: 1s; animation-fill-mode: both;} 
.anim10.animated {animation-name: flipInX; animation-duration: 1s; animation-fill-mode: both;} 
.anim11.animated {animation-name: pulse; animation-duration: 1s; animation-fill-mode: both; animation-iteration-count: 2; } 
.anim12.animated {animation-name: tada; animation-duration: 1s; animation-fill-mode: both; animation-iteration-count: 1;} 
.anim15.animated {animation-name: tada2; animation-duration: 1s; animation-fill-mode: both; animation-iteration-count: 3;} 
.anim11a.animated {animation-name: pulse2; animation-duration: 0.3s; animation-fill-mode: both; animation-iteration-count: 5; animation-delay: 0.5s;} 
.anim12a.animated {animation-name: tada2; animation-duration: 1s; animation-fill-mode: both; animation-iteration-count: 1; animation-delay: 0.5s;} 
.anim12b.animated {animation-name: swing; animation-duration: 0.5s; animation-fill-mode: both; animation-iteration-count: 1; animation-delay: 0.5s;} 
.anim12c.animated {animation-name: bounce; animation-duration: 1s; animation-fill-mode: both; animation-iteration-count: 2; animation-delay: 0.5s;} 
.anim12d.animated {animation-name: shake; animation-duration: 1s; animation-fill-mode: both; animation-iteration-count: 1; animation-delay: 1s;} 
.anim18.animated {animation-name: bounceIn; animation-duration: 1s; animation-fill-mode: both;} 
.anim19.animated {animation-name: alphapulse; animation-duration: 5s; animation-fill-mode: both; animation-iteration-count: infinite; animation-timing-function: Ease-in-out;} 
.anim19a.animated {animation-name: alphapulse2; animation-duration: 4.5s; animation-fill-mode: both; animation-iteration-count: infinite; animation-timing-function: Ease-in-out;} 
.anim19b.animated {animation-name: alphapulse3; animation-duration: 10s; animation-fill-mode: both; animation-iteration-count: infinite; } 
.anim20 {transform: rotate3d(0, 0, 1, -7deg);}
.anim20.animated {animation-name: rotateIn; animation-duration: 0.4s; animation-fill-mode: both; animation-iteration-count: 1; ; animation-delay: 0.5s;} 
.anim21.animated {animation-name: flicker-in; animation-duration: 2s; animation-fill-mode: both; animation-iteration-count: 1;} 
.anim22.animated {animation: shadow-inset-br 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;z-index: 10;}
.anim23.animated {animation-name: blur; animation-duration: 1.2s; animation-fill-mode: forwards; }
.anim24.animated {animation: verbiegen 1800ms cubic-bezier(0.190, 1.000, 0.220, 1.000), color 100ms linear;}
.anim25.animated {animation: verbiegen2 1800ms cubic-bezier(0.190, 1.000, 0.220, 1.000), color 100ms linear;}
.kenburns {animation: kenburns-top 5s ease-out both; overflow: hidden;
}

@keyframes verbiegen2 {0% {opacity:0;transform:translate3d(100px,120px,0) scale(0.8) rotate(12deg) skew(20deg)} 100% {opacity:1;transform:translate3d(0,0,0) scale(1) rotate(0deg) skew(0deg);}}
@keyframes verbiegen {0% {opacity:0;transform:translate3d(-100px,120px,0) scale(0.8) rotate(-12deg) skew(-20deg)} 100% {opacity:1;transform:translate3d(0,0,0) scale(1) rotate(0deg) skew(0deg);}}
@keyframes blur {0% {filter: blur(12px);} 100% {filter: blur(0px);}}

@keyframes bounce {  0%, 20%, 53%, 80%, 100% {  transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);  transform: translate3d(0,0,0);  }  40%, 43% {  transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);  transform: translate3d(0, -30px, 0);  }  70% {  transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
  transform: translate3d(0, -15px, 0);  }  90% { transform: translate3d(0,-4px,0); } 100% {opacity:1;transform: none;}}
@keyframes flipInX {  0% { opacity:0; transform: perspective(400px) rotate3d(1, 0, 0, 90deg);  transition-timing-function: ease-in;  opacity: 0;
  }  40% {  transform: perspective(400px) rotate3d(1, 0, 0, -20deg);  transition-timing-function: ease-in;  }  60% {  transform: perspective(400px) rotate3d(1, 0, 0, 10deg);  opacity: 1;  }  80% {  transform: perspective(400px) rotate3d(1, 0, 0, -5deg);  }
  100% { transform: perspective(400px);opacity:1; }} 
@keyframes flipInY {  0% { opacity:0; transform: perspective(400px) rotate3d(0, 1, 0, 90deg);  transition-timing-function: ease-in;  opacity: 0;
  }  40% {  transform: perspective(400px) rotate3d(0, 1, 0, -20deg);  transition-timing-function: ease-in;  }  60% {  transform: perspective(400px) rotate3d(0, 1, 0, 10deg);  opacity: 1;  }  80% {  transform: perspective(400px) rotate3d(0, 1, 0, -5deg);  }
  100% {  transform: perspective(400px); opacity:1;}} 
@keyframes pulse_save {  0% {  transform: scale3d(1, 1, 1); opacity: 0; } 0% {  transform: scale3d(1, 1, 1); opacity: 1; } 50% {  transform: scale3d(1.05, 1.05, 1.05);  }  100% {  transform: scale3d(1, 1, 1);  opacity: 1; }  } 
@keyframes pulse { from { -webkit-transform: scale(1); transform: scale(1); -webkit-transform-origin: center center; transform-origin: center center; -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 10% { -webkit-transform: scale(0.91); transform: scale(0.91); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 17% { -webkit-transform: scale(0.98); transform: scale(0.98); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 33% { -webkit-transform: scale(0.87); transform: scale(0.87); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 45% { -webkit-transform: scale(1); transform: scale(1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } }
@keyframes pulse2 {  0% {  transform: scale3d(1, 1, 1); opacity: 1; }  50% {  transform: scale3d(1.05, 1.05, 1.05);  }  100% {  transform: scale3d(1, 1, 1);  opacity: 1; }  } 
@keyframes tada {  0% {  transform: scale3d(1, 1, 1); opacity: 0; }  10%, 20% {  transform: scale3d(.95, .95, .95) rotate3d(0, 0, 1, -0.5deg);  }  40%, 60% {  transform: scale3d(1.025, 1.025, 1.025) rotate3d(0, 0, 1, 0.5deg);  }  50%, 75% {  transform: scale3d(1.025, 1.025, 1.025) rotate3d(0, 0, 1, -0.5deg);  }  100% {  transform: scale3d(1, 1, 1); ; opacity: 1;   }} 
@keyframes tada2 {  0% {  transform: scale3d(1, 1, 1); opacity: 1;  }  10%, 20% {  transform: scale3d(.95, .95, .95) rotate3d(0, 0, 1, -0.5deg);  }  30%, 50%, 70%, 90% {  transform: scale3d(1.025, 1.025, 1.025) rotate3d(0, 0, 1, 0.5deg);  }  40%, 60%, 80% {  transform: scale3d(1.025, 1.025, 1.025) rotate3d(0, 0, 1, -0.5deg);  }  100% {  transform: scale3d(1, 1, 1); ; opacity: 1;   }} 
@keyframes swing { 20% { transform: rotate3d(0, 0, 1, 8deg);}40% {transform: rotate3d(0, 0, 1, -5deg);} 60% {transform: rotate3d(0, 0, 1, 3deg); } 80% {transform: rotate3d(0, 0, 1, -3deg); }100% { transform: rotate3d(0, 0, 1, 0deg); } }
@keyframes bounce {0%, 20%, 53%, 80%, 100% {transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);transform: translate3d(0,0,0);}40%, 43% {
  transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
  transform: translate3d(0, -30px, 0);} 70% {transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);transform: translate3d(0, -15px, 0);} 90% { -webkit-transform: translate3d(0,-4px,0); transform: translate3d(0,-4px,0);}} 
@keyframes bounceIn {0%, 20%, 40%, 60%, 80%, 100% {transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);}0% {opacity: 0;transform: scale3d(.3, .3, .3);}20% {transform: scale3d(1.1, 1.1, 1.1);} 40% {transform: scale3d(.9, .9, .9);}60% {opacity: 1;transform: scale3d(1.03, 1.03, 1.03);} 80% {transform: scale3d(.97, .97, .97);}100% {opacity: 1;transform: scale3d(1, 1, 1);}}
@keyframes shake {0%, 100% {transform: translate3d(0, 0, 0);} 10%, 30%, 50%, 70%, 90% {transform: translate3d(-10px, 0, 0);}20%, 40%, 60%, 80% {transform: translate3d(10px, 0, 0);}} 
@keyframes alphapulse {  0% { opacity: 0; }  50% {  opacity: 1; }  100% { opacity: 0; } }
@keyframes alphapulse2 {  0% { opacity: 0; }  20%, 80% {  opacity: 1; }  100% { opacity: 0; } }
@keyframes alphapulse3 {  0% { opacity: 0; }  40%, 60% {  opacity: 1; }  100% { opacity: 0; } }
@keyframes rotateIn {  0% {  transform-origin: center;  transform: rotate3d(0, 0, 1, -7deg); }  100% {  transform-origin: center;    transform: none; }}
@keyframes flicker-in { 0% { opacity: 0; } 10% { opacity: 0; } 10.1% { opacity: 1; } 10.2% { opacity: 0; } 20% { opacity: 0; } 20.1% { opacity: 1; } 20.6% { opacity: 0; } 30% { opacity: 0; } 30.1% { opacity: 1; } 30.5% { opacity: 1; } 30.6% { opacity: 0; } 45% { opacity: 0; } 45.1% { opacity: 1; } 50% { opacity: 1; } 55% { opacity: 1; } 55.1% { opacity: 0; } 57% { opacity: 0; } 57.1% { opacity: 1; } 60% { opacity: 1; } 60.1% { opacity: 0; } 65% { opacity: 0; } 65.1% { opacity: 1; } 75% { opacity: 1; } 75.1% { opacity: 0; } 77% { opacity: 0; } 77.1% { opacity: 1; } 85% { opacity: 1; } 85.1% { opacity: 0; } 86% { opacity: 0; } 86.1% { opacity: 1; } 100% { opacity: 1; } }
@keyframes shadow-inset-br { 0% { box-shadow: inset 0 0 0 0 rgba(0, 0, 0, 0);}  100% { box-shadow: inset -6px -6px 14px -6px rgba(0, 0, 0, 0.5);  }}
@keyframes kenburns-top { 0% { transform: scale(1) translateY(0); transform-origin: 50% 16%; } 100% { transform: scale(1.25) translateY(-15px); transform-origin: top; }}

.embed-container {
  position: relative; 
  padding-bottom: 56.25%; /* ratio 16x9 */
  height: 0; 
  overflow: hidden; 
  width: 100%;
  height: auto;
}
.embed-container iframe {
  position: absolute; 
  top: 0; 
  left: 0; 
  width: 100%; 
  height: 100%; 
}

/* ratio 4x3 */
.embed-container.ratio4x3 {
  padding-bottom: 75%;
}

header .container {	
    position:relative;	
}

#languages {
    position:absolute;
    top:20px;
    right:0px;
    visibility: hidden;
}

#languages ul.level1 {
    margin:0px;
    padding:0px 10px;
    background:url(../images/languages.png) right 10px no-repeat rgba(255,255,255,0.75);	;	
}

#languages li {
    list-style:none;	
}

#languages ul.level2 {
    margin:0px;
    padding:0px 0px 9px 0px;
    display:none;
}

#languages li:hover ul.level2 {
    display:block;	
}

#languages a {
    display:block;
    width:25px;
    height:22px;	
    margin-bottom:7px;
}

#languages .clang-de { 
    background:url(../images/clang-de.png);
}

#languages .clang-en { 
    background:url(../images/clang-en.png);
}

#languages .clang-fr { 
    background:url(../images/clang-fr.png);
}

#languages .clang-es { 
    background:url(../images/clang-es.png);
}

#languages .clang-ru { 
    background:url(../images/clang-ru.png);
}

#languages .clang-cn { 
    background:url(../images/clang-cn.png);
}

.pt-60 {
    padding-top: 60px;
}

.pt-200 {
    padding-top: 200px;
}
.pb-200 {
    padding-bottom: 200px;
}
.pb-60 {
    padding-bottom: 60px;
}
.pt-40 {
    padding-top: 40px;
}
.pb-40 {
    padding-bottom: 40px;
}
.ptb-6020 {
    padding-top: 60px;
    padding-bottom: 20px;
}
.pb-20 {
	padding-top: 40px;
    padding-bottom: 20px;
}
.pt-0 {
    padding-top: 0px;
}
.pbt-40 {
	padding-top: 40px;
    padding-bottom: 40px;
}
.pbt-20 {
	padding-top: 20px;
    padding-bottom: 20px;
}
.pbt-60 {
	padding-top: 80px;
    padding-bottom: 80px;
}
.pbt-80 {
	padding-top: 120px;
    padding-bottom: 120px;
}
.pbt-160 {
	padding-top: 160px;
    padding-bottom: 160px;
}
.pbt-200 {
	padding-top: 200px;
    padding-bottom: 200px;
}
.pbt-250 {
	padding-top: 230px;
    padding-bottom: 230px;
}
.pbt-300 {
	padding-top: 260px;
    padding-bottom: 260px;
}
.pbt-100 {
	padding-top: 20%;
    padding-bottom: 20%;
}
.pbt-120 {
	padding-top: 30%;
    padding-bottom: 30%;
}
.pbt-5 {
	padding-top: 2px;
    padding-bottom: 2px;
}
.pbt-0 {
	padding-top: 0px;
    padding-bottom: 0px;
}
.pad-45 {
    padding: 45px;
}
.pt40pb120 {
	padding-top: 40px;
    padding-bottom: 120px;
} 
.pt120pb40 {
	padding-top: 120px;
    padding-bottom: 40px;
} 
.pt40mb100 {
	padding-top: 40px;
	margin-bottom: -100px;
}
.mt50pb40 {
	margin-top: -50px;
}
.mt100pb40 {
	margin-top: -100px;
	padding-bottom: 40px;
}
.mt100mb100 {
	margin-top: -100px;
	margin-bottom: -100px;
}
.pt0pb120 {
	padding-top: 0px;
	padding-bottom: 120px;
}
.m20 {margin: 20px;}
.m40 {margin: 40px;}
.m60 {margin: 60px;}
.m20ou {margin: 20px 0;}
.m20lr {	margin: 0 20px;}
.m20lur {margin: 0 20px 20px;}
.m20lor {margin: 20px 20px 0;}
.m20l {	margin-left: 20px;}
.m20r {	margin-right: 20px;}
.-m20 {margin-top: -20px;}
.-m40 {margin-top: -40px;}
.-m60 {margin-top: -60px;}
.m10vw {margin: 0 14vw;}
.m20vw {margin: 0 18vw;}
.m30vw {margin: 0 22vw;}

 @media screen and (max-width: 991px) {
.pt-0, .pb-0, .pb-20, .pb-40, .pt-40, .pb-60, .pt-60, .pbt-40, .pbt-20, .pbt-40, .pbt-60, .pbt-80, .pbt-100, .pbt-120, .pbt-160, .pbt-200, .pbt-250, .pbt-300, .pbt-5, .ptb-6020, .pt40pb120, .pt120pb40, .pt40mb100, .mt100pb40, .mt100mb100, .pt0pb120 {padding-top: 20px; padding-bottom: 20px;}
.caption {margin-left: 10vw; margin-right: 10vw;}
.m20, .m40, .m60, .m20ou, .m20lr, .m20l, .m20r, .m20lur, .m20lor,.-m20, .-m40, .-m60 , .m10vw, .m20vw, .m30vw {margin: 0;}
}

.wrapper.consultant {
    background:#525252;
    color:#ffffff;
    font-size:22px;
}

.wrapper.consultant .container {
    width:100%;	
    max-width:1600px;
}

.wrapper.consultant .second,
.wrapper.consultant .third.col-p-20,
.wrapper.consultant .fourth.col-p-20 {
    padding-top:15px;	
    height:90px;
    border-right:1px solid #888888;	
}

.wrapper.consultant .fifth {
    padding-top:20px;	
}

.wrapper.consultant .col-p-20 {
    float:left;
    width:20%;	
    padding:0px 15px;
}

.wrapper.consultant .size {
    font-size:16px;
    text-align:center;
    width:25%;
    float:left;
    padding-top:10px;
    height:90px;		
    border-right:1px solid #888888;
    cursor:pointer;
}

.wrapper.consultant .home {
    width:50px;
    height:45px;
    background:url(../images/s30.png) left top no-repeat;
    margin:0px auto;
}

.wrapper.consultant .size.active .home,
.wrapper.consultant .size:hover .home {
    background-position:left bottom;	
}

.wrapper.consultant #s50 .home {
    background-image:url(../images/s50.png);
}

.wrapper.consultant #s100 .home {
    background-image:url(../images/s100.png);
}

.wrapper.consultant #s150 .home {
    background-image:url(../images/s150.png);
}

.wrapper.consultant #old {
    display:inline-block;
    border:1px solid #ffffff;
    height:23px;
    width:23px;
    line-height:20px;
    margin-right:20px;
    cursor:pointer;
    text-align:center;
}

.wrapper.consultant #old:hover {
    background:#ffffff;
    color:#525252;	
}


.wrapper.consultant label {
    line-height:58px;
    font-weight:normal;
}

.wrapper.consultant #kwh {
    margin-top:5px;
    height:45px;
    border:1px solid #ffffff;
    text-align:center;
    font-size:20px;
    -webkit-border-radius:0px;
    -moz-border-radius:0px;
    border-radius:0px;
}

.wrapper.consultant ul {
    padding:0px;
    margin:0px;	
}

.wrapper.consultant li {
    margin-top:5px;	
    list-style:none;
    display:inline-block;
    border:1px solid #ffffff;
    line-height:43px;	
    padding:0px 10px;
    font-size:20px;
    cursor:pointer;
}

.wrapper.consultant li.active,
.wrapper.consultant li:hover {
    background:#ffffff;
    color:var(--maincolor);
}

.wrapper.consultant .btn-primary {
    padding:15px;
    width:100%;	
}

.wrapper.consultant .btn-primary:focus,
.wrapper.consultant .btn-primary.focus {
    background:#333333;	
}

.wrapper.image .container,
.wrapper.image .container img {
    width:100%;	
}

.wrapper.image .container .col-sm-12 {
    padding:0px;
}

.downloads {
    padding-bottom:15px;	
}

.downloads .col-md-6 {
    padding:0px 70px;
}

.downloads .download {
    border-bottom:1px solid #d1d1d1;
    padding:10px 0px 10px 45px;
}

.downloads .no-0 .download,
.downloads .no-1 .download {
    border-top:1px solid #d1d1d1;
}

.downloads .button {
    float:right;
    margin:0px !important;
    padding-top:0px;
    padding-bottom:0px;
}

.downloads .text {
    margin-right:115px;
    display:block;
    padding-top:5px;
}

.downloads .pdf .download {
    background:url(../images/download-pdf.png) left 9px no-repeat;	
}

.downloads .jpg .download {
    background:url(../images/download-bild.png) left 9px no-repeat;	
}
.downloads .png .download {
    background:url(../images/download-bild.png) left 9px no-repeat;	
}
.downloads .tif .download {
    background:url(../images/download-bild.png) left 9px no-repeat;	
}
.downloads .link .download {
    background:url(../images/download-link.png) left 9px no-repeat;	
}

.downloads .doc .download {
    background:url(../images/download-doc.png) left 9px no-repeat;	
}

.downloads .docx .download {
    background:url(../images/download-docx.png) left 9px no-repeat;	
}

.downloads .xls .download {
    background:url(../images/download-xls.png) left 9px no-repeat;	
}

.downloads .xlsx .download {
    background:url(../images/download-xlsx.png) left 9px no-repeat;	
}

.downloads .ppt .download {
    background:url(../images/download-ppt.png) left 9px no-repeat;	
}

.downloads .pptx .download {
    background:url(../images/download-pptx.png) left 9px no-repeat;	
}

.contact-form .selectric-form-control {
    float:left;
    width:100%;
}

.has-error .selectric-form-control {
    border:1px solid #a94442;
}

.contact-form .radio,
.contact-form .checkbox {
    text-align:left;	
}

.contact-form #schlussrechnung {
    display:none;	
}

#article-1 .teaser .teaser-text {
    min-height:145px;
}

.image-text .media {
    display:none;	
}

.wrapper.counter {
    background-size:cover;
    padding:7% 0px;	
}

.wrapper.counter .count-number {
    font-size: var(--fs-mega);  /* fluid 48-100px - ersetzt 3 Breakpoint-Duplikate */
    font-weight: bold;
    text-align: center;
}

.animate .container {
    position:relative;
    transition:all 1.2s ease 0s;
}
.carousel a.carousel-control:focus {
    background-color: var(--maincolor);
}
.carousel a.carousel-control:focus i {
    color: #ffffff;
}

#to-top {
    padding:10px;
    cursor:pointer;
    text-align:center;
}

#to-top #arrow {
    display:inline-block;
    line-height:35px;
    font-size:18px;	
    padding-left:50px;
    background:url(../images/arrow-up.png) left top no-repeat;
}


@media screen and (max-width:1267px) {

	.pad-45 {
	padding: 30px !important;
    }
	
	.container {
		width: 100% !important;
	}
	
.animate .container {
    position:relative;
    transition:all 1s ease-in;
}

.animate.animation1 .container {
    opacity:1;
    bottom:0px;
}

.animate.animation1.animated .container {
    bottom:0px;
    opacity:1;
}

.animate.animation2 .container {
    right:0px;
    opacity:1;
}

.animate.animation2.animated .container {
    right:0px;
    opacity:1;
}

.animate.animation3 .container {
    opacity:0;
    left:0px;
}

.animate.animation3.animated .container {
    left:0px;
    opacity:1;
}

.animate.animation4 .container {
    opacity:1;
}

.animate.animation4.animated .container {
    opacity:1;	
}

.animate.animation5 .container {
    opacity:1;
    top:0px;
	z-index: -1;
}

.animate.animation5.animated .container {
    top:0px;
    opacity:1;
}

.animate.animation6 .container {
    opacity:1;
}

.animate.animation6.animated .container {
animation: none
    opacity:1;	
}
}

@media screen and (max-width:1168px) {

    .navigation {
        padding-right:0px;	
        height: 40px;
    }

    #languages {
        top:7px;
        right:80px
    }


    .downloads .button {
        padding:8px 10px !important;
    }

    .downloads .no-1 .download {
        border-top:0px;
    }

    #article-1 .teaser .teaser-text {min-height: 200px;}

}

@media screen and (max-width:767px) {

    #article-1 .teaser .teaser-text {
        min-height:0px;
    }

    .wrapper.counter .count-number {
        text-align:left;
        padding-bottom:30px;
    }
	
	.container {
		width: 100% !important;
	}
	
}

/* ===== video ===== */

.videocontainer, .picturecontainer {
    background: none;
    background-size: cover;
    position: relative;
    overflow: hidden;
    padding: 0;
    background-repeat: no-repeat;
/*	z-index: -1; */
}

.videocontainer video {
    min-width: 100%;
    min-height: 100%;
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute; 
    left: 50%; 
    top: 50%; 
    transform: translate(-50%, -50%);
    z-index: -1;
    flex-shrink: 0;
}

@media screen and (max-width: 767px) {
.imagecontainer {height: 29vh !important;}
.videocontainer {height: 27vh !important; background-position: center !important;}
.videocontainer video {height: 100% !important; margin-top: 0px !important;}
} 

@media screen and (min-width: 768px) and (max-width: 1023px) {
.imagecontainer {height: 55vh !important;}
.videocontainer {height: 36vh !important; background-position: center !important;} 
} 

@media screen and (orientation: landscape) and (max-width: 1023px) {
.imagecontainer {height: 90vh !important;}
.videocontainer {height: 90vh !important;} 
} 
 
@media screen and (min-width: 1024px) and (max-width: 1279px) {
.imagecontainer {height: 75vh !important;}
.videocontainer {height: 70vh !important; background-position: center !important;} 
.videocontainer video {height: 107% !important; margin-top: 0px !important;}
}  

@media screen and (min-width: 1024px) and (max-width: 1300px) {
	.videocontainer .container-fluid .row .col-sm-6 {padding: 20px !important;}
}

@media screen and (max-width: 1023px) {
.parallaxcontainer, .parallaxcontainer2 {background-attachment: scroll !important;}
}

@media (hover: none) {
.parallaxcontainer, .parallaxcontainer2 {background-attachment: scroll !important;}
}

.videocontainercontent {padding-bottom: 40px;}
@media screen and (max-width: 1023px) {.videocontainercontent {padding: 10px 20px;}} 

.parallaxcontainer, .parallaxcontainer2 {background-attachment: fixed;}


.videocontainer .container, .picturecontainer .container {
    height: 100%;
	position: inherit;
}

.mobile-element-box {
    position: relative;
}

.videocontainer .container .row, .picturecontainer .container .row {
    height: 100%;
    display: flex;
    align-items: flex-end;
    padding-bottom: 3vw;    
}

.videocontainer .container .row .col-sm-6, .picturecontainer .container .row .col-sm-6 {
    margin-left: 0px;
    width: calc(50% - 30px);
}

.videocontainer .container .row .col-sm-12, .picturecontainer .container .row .col-sm-12 {
    width: 80%;
	padding: 0;
}

.videocontainer .videooverlay, .picturecontainer .videooverlay {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
}

.videocontainer.boxtop > .container > .row, .picturecontainer.boxtop > .container > .row, .videocontainer.boxtop > .container-fluid > .row, .picturecontainer.boxtop > .container-fluid > .row   {
    padding-top: 3vw;
    align-items: flex-start;
    height: auto;
}

.videocontainer.boxtop2 > .container > .row, .picturecontainer.boxtop2 > .container > .row, .videocontainer.boxtop2 > .container-fluid > .row, .picturecontainer.boxtop2 > .container-fluid > .row   {
    padding-top: 0;
    align-items: flex-start;
    height: auto;
}

.videocontainer.boxbottom2 > .container > .row, .picturecontainer.boxbottom2 > .container > .row, .videocontainer.boxbottom2 > .container-fluid > .row, .picturecontainer.boxbottom2 > .container-fluid > .row   {
    padding-bottom: 0;
    align-items: flex-end;

}

.videocontainer.boxcenter > .container > .row, .picturecontainer.boxcenter > .container > .row, .videocontainer.boxcenter > .container-fluid > .row, .picturecontainer.boxcenter > .container-fluid > .row {
    align-items: center;
    height: 100%;
    padding-top: 3vw;
    padding-bottom: 3vw;
}

.videocontainer.boxcomplete > .container > .row, .picturecontainer.boxcomplete > .container > .row, .videocontainer.boxcomplete > .container-fluid > .row, .picturecontainer.boxcomplete > .container-fluid > .row {
    align-items: flex-start;
    height: 100%;
    padding: 0;
}

.videocontainer.boxcomplete > .container > .row > .col-sm-6, .picturecontainer.boxcomplete > .container > .row > .col-sm-6, .videocontainer.boxcomplete > .container-fluid > .row > .col-sm-6, .picturecontainer.boxcomplete > .container-fluid > .row > .col-sm-6 {
    height: 100%;
}


.spacer-5vw {
    height: 5vw;
}

.mod1_hoverbild {
    opacity: 0;
    position: absolute;
    top: 0;
    transition: 0.5s;
}

.breadcrumb {
    margin-bottom: 0;
	border-style: none;
	border-radius: 0;}

.breadcrumb ul {
    list-style: none;
    margin-left: 10px;
    padding: 0;
}

.breadcrumb ul li,
.breadcrumb ul li a,
.breadcrumb div {
    font-size: 18px;
    line-height: 24px;
}

.breadcrumb ul li a {
	    text-decoration: underline;
}

.breadcrumb ul li {
    float: left;
    list-style: none;
}

.breadcrumb ul li + li:before {
    content: '/';
    display: inline;
    font-size: 18px;
    line-height: 24px;
    margin: 0 5px;
}

.breadcrumb .breadcrumb-info {
}

.breadcrumb .container {
    display: flex;
}

.carouselnav-container {
    padding: 0 1vw 30px 1vw;
}

.carouselnav-container {
    margin-top: -2px;
    padding: 0 1vw 30px 1vw;
}

.carouselnav-container ul {
    display: block;
    width: 100%;
    text-align: center;
    font-size: 1px;
    padding-bottom: 0px;
}
.carouselnav-container li {
    display: inline-block;
    line-height: 44px;
}

.carouselnav2 li {
    display: inline-block;
    line-height: 44px;
	margin: -1px !important;
}

.carouselnav-container li + li {
    margin-left: 15px;
}

.carouselnav-container li a {
    border: 1px solid #ffffff;
    font-size: 20px;
    color: #ffffff;
    padding: 4px 10px;
    text-decoration: none;
    white-space: nowrap;
}

.carouselnav-container li a:focus {
    background-color: #000000;
}

.carousel-barrierefrei .image-detail {
    padding: 5px 0;
}

/* --- vimeo inhalts modul --- */

.plyr__video-embed iframe, .plyr__video-wrapper--fixed-ratio video {
    border: 0;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
}
.plyr__video-embed, .plyr__video-wrapper--fixed-ratio {
    aspect-ratio: 16/9;
}

.container {
    max-width: inherit;
}

@media (min-width: 992px) {
    .container, .container2 {
        width: 960px;
    }
}

@media (min-width: 1200px) {
    .container, .container2 {
        width: 1160px;
    }
}

@media (min-width: 1280px) {
    .container, .container2 {
        width: 1220px;
    }
}

@media (min-width: 1440px) {
    .container, .container2 {
        width: 1400px;
    }
}

@media (min-width: 1600px) {
    .container, .container2 {
        width: 1460px;
    }
}

@media (min-width: 1900px) {
    .container, .container2 {
        width: 1600px;
    }
}

@media (min-width: 2200px) {
    .container, .container2 {
        width: 2100px;
    }
}

@media (min-width: 2500px) {
    .container, .container2 {
        width: 2400px;
    }
}

.container::after {
    display: block;
    clear: both;
    content: "";
}

.visible-xs, .visible-sm, .visible-md, .visible-lg { display:none !important; }
.visible-xs-block, .visible-xs-inline, .visible-xs-inline-block,
.visible-sm-block, .visible-sm-inline, .visible-sm-inline-block,
.visible-md-block, .visible-md-inline, .visible-md-inline-block,
.visible-lg-block, .visible-lg-inline, .visible-lg-inline-block { display:none !important; }

@media (max-width:575px) {
    table.visible-xs                { display:table !important; }
    tr.visible-xs                   { display:table-row !important; }
    th.visible-xs, td.visible-xs    { display:table-cell !important; }

    .visible-xs  { display:block !important; }
    .visible-xs-block { display:block !important; }
    .visible-xs-inline { display:inline !important; }
    .visible-xs-inline-block { display:inline-block !important; }
}

@media (min-width:576px) and (max-width:767px) {
    table.visible-sm { display:table !important; }
    tr.visible-sm { display:table-row !important; }
    th.visible-sm,
    td.visible-sm { display:table-cell !important; }

    .visible-sm { display:block !important; }
    .visible-sm-block { display:block !important; }
    .visible-sm-inline { display:inline !important; }
    .visible-sm-inline-block { display:inline-block !important; }
}

@media (min-width:768px) and (max-width:991px) {
    table.visible-md { display:table !important; }
    tr.visible-md { display:table-row !important; }
    th.visible-md,
    td.visible-md { display:table-cell !important; }

    .visible-md { display:block !important; }
    .visible-md-block { display:block !important; }
    .visible-md-inline { display:inline !important; }
    .visible-md-inline-block { display:inline-block !important; }
}

@media (min-width:992px) and (max-width:1199px) {
    table.visible-lg { display:table !important; }
    tr.visible-lg { display:table-row !important; }
    th.visible-lg,
    td.visible-lg { display:table-cell !important; }

    .visible-lg { display:block !important; }
    .visible-lg-block { display:block !important; }
    .visible-lg-inline { display:inline !important; }
    .visible-lg-inline-block { display:inline-block !important; }
}

@media (min-width:1200px) {
    table.visible-xl { display:table !important; }
    tr.visible-xl { display:table-row !important; }
    th.visible-xl,
    td.visible-xl { display:table-cell !important; }

    .visible-xl { display:block !important; }
    .visible-xl-block { display:block !important; }
    .visible-xl-inline { display:inline !important; }
    .visible-xl-inline-block { display:inline-block !important; }
}

@media (max-width:575px)                        { .hidden-xs{display:none !important;} }
@media (min-width:576px) and (max-width:767px)  { .hidden-sm{display:none !important;} }
@media (min-width:768px) and (max-width:991px)  { .hidden-md{display:none !important;} }
@media (min-width:992px) and (max-width:1199px) { .hidden-lg{display:none !important;} }
@media (min-width:1200px)                       { .hidden-xl{display:none !important;} }

.img-fluid {
    display: block;
}

/* Modernisiert 2026-04-17: von background-image auf <img>-Markup umgestellt */
.img-wrapper {
    position: relative;
    overflow: hidden;
    height: 100%;
}
.img-wrapper figure {
    padding: 0;
    margin: 0;
    height: 100%;
    width: 100%;
}
.img-wrapper figure figcaption {
    position: absolute;
    bottom: 0;
}
.img-wrapper figure img,
.img-wrapper figure img.img-fluid {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
}
.img-wrapper figure.img-cover {
    min-height: 180px;
}
.img-wrapper figure.img-cover img,
.img-wrapper figure.img-cover img.img-fluid {
    width: 100%;
    height: 100%;
    min-height: 180px;
    object-fit: cover;
    object-position: center;
}
.img-wrapper figure.img-contain img,
.img-wrapper figure.img-contain img.img-fluid {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
}
.img-wrapper figure.img-intrinsic img {
    width: auto;
    height: auto;
    max-width: 100%;
    margin: 0 auto;
}
.img-wrapper figure.img-min-height {
    min-height: 380px;
}
.img-wrapper figure.img-min-height img {
    min-height: 380px;
}
.img-wrapper .img-hover {
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0;
    transition: all 0.4s ease-in-out;
}
.img-wrapper .img-hover:hover {
    opacity: 1;
}
.img-wrapper .img-hover figure {
    display: block;
    height: 100%;
    width: 100%;
}

.txt-wrapper .txt-inner {
    height: 100%;
}

.hidden {
    display: none;
}

.full-height {
    height: 100%;
}
.full-height .img-txt-wrapper,
.full-height .img-wrapper,
.full-height .img-cover {
    min-height: 100%;
}

.container-fluid {
	width: unset !important;
}   
.padding16666 {padding:0 22.222%;}
.padding8333 {padding:0 8.333%;}

@media screen and (max-width: 991px) {
    .padding8333 {padding: 0 0;}
	.padding16666 {padding:0 16.666%;}
}

.content-element .content {padding: 60px;}
.contenthover,.contenthover2 {transition: all .6s ease-in-out;}
.contenthover:hover {box-shadow: inset 280px 0px 0px 50px #FFFFFF;transform: scale(1) translatex(-50px);}
.contenthover2:hover {box-shadow: inset -280px 0px 0px 50px #FFFFFF;transform: scale(1) translatex(50px);}

@media (max-width:991px) {
.content-element .content, .content-element .container {padding: 20px 0 !important;} 
.contenthover:hover, .contenthover2:hover {box-shadow: none;transform: scale(1) translatex(0px)}
.img-txt-wrapper {padding: 20px} 
}

div[class^="custom-shape"] {pointer-events: none;}
@media (max-width:1168px) {div[class^="custom-shape"] {display: none;}}

.scroll {background-attachment: scroll;background-size: cover;background-repeat: no-repeat;}
.fixed {background-attachment: fixed;background-size: cover;overflow-y: scroll;} 

@media (orientation: portrait) and (max-width:700px) {
	.videocontainer {height: 37vh !important;}
	video {	width: 160% !important;  transform: translate(-20%,0);}
} 

@media (orientation: portrait) and (min-width:701px) and (max-width:991px) {
	video {width: 100% !important;}
} 


.flex {
    display: flex;
    column-gap: 20px;
}

.flex-center {
    justify-content: center;
}
.mod-countdown .counter-number {
    font-size: 48px;
    font-weight: bold;
    line-height: 68px;
}

.mod-countdown .flex p {
    margin-bottom: 0 !important;
}

.lexicon_overview {
	max-width: 410px;
}
.lexicon_overview li {
	width: 30px;
	height: 30px;
	line-height: 30px;
	margin: 0px 5px 5px 0px;
	background: #fff;
	text-align: center;
	list-style: none;
	float: left;
}

.lexicon_overview li a {
	color: #000;
}

.lexicon {
    width: 100%;
    margin: 0 auto;
}
.lexicon li {
    list-style: none;
}
.text-left {
	text-align: left !important;
	justify-items: left !important;
}
.text-center {
	text-align: center !important;
	justify-items: center !important;
}
.text-right {
	text-align: right !important;
	justify-items: right !important;
}

/* marker */

.marker {
    background: linear-gradient(to left, rgba(255,255,255,0) 50%, yellow 50%) right;
    transition: all 1s ease;
    transition-delay: 2s;
    background-size: 200% 100%;
    background-position: right bottom;
}

.mark-it {
    background-position: left bottom;
}

.unmark-it {
    background-position: right bottom;
}


/* accordion */
.accordion-body  {padding: 20px !important;}
.accordion-body .content-element .content {padding: 0px !important;}
.accordion-body .content-element .content p {padding-top: 20px !important;}
.accordion-header p {margin: 0px;}

/* ipad */
@media (min-width: 768px) and (max-width: 991px) {
  .img-wrapper {
    max-width: 75%;
    margin-left: 0;
    margin-right: auto;
  }
.container {padding: 20px !important;}

}

/* News – Kategorie-Filter-Buttons dezent */
.news-tiles__cats .btn.black {
    background-color: #f0f0f0;
    color: #555;
    border-color: transparent;
    font-size: 0.82rem;
    padding: 0.35em 1.1em;
    font-weight: 400;
    letter-spacing: 0.01em;
    transition: background-color 0.2s ease, color 0.2s ease;
}
.news-tiles__cats .btn.black:hover {
    background-color: #e0e0e0;
    color: #222;
    border-color: transparent;
}
.news-tiles__cats .btn.black.is-active {
    background-color: #222;
    color: #fff;
    border-color: transparent;
    font-weight: 500;
    filter: none;
}

/* ===== Video / Vimeo (Modul 01) ===== */
.mm-video {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: #000;
    margin: 0;
}
.mm-video video,
.mm-video iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    border: 0;
}
.mm-video-loop video { object-fit: cover; object-position: center; }
.mm-video-vimeo iframe { object-fit: cover; }
.mm-video-player {
    aspect-ratio: 16 / 9;
    background: #000;
}
.mm-video-player .plyr,
.mm-video-player .plyr__video-wrapper {
    width: 100%;
    height: 100%;
}

/* ===== Bootstrap Spacing Extensions (py-6 bis py-12) ===== */
/* Standard-Bootstrap hat nur py-0 bis py-5. Hier erweitert fuer Section-Abstaende. */
.py-6  { padding-top: 4rem  !important; padding-bottom: 4rem  !important; }
.py-7  { padding-top: 5rem  !important; padding-bottom: 5rem  !important; }
.py-8  { padding-top: 6rem  !important; padding-bottom: 6rem  !important; }
.py-9  { padding-top: 7rem  !important; padding-bottom: 7rem  !important; }
.py-10 { padding-top: 8rem  !important; padding-bottom: 8rem  !important; }
.py-11 { padding-top: 9rem  !important; padding-bottom: 9rem  !important; }
.py-12 { padding-top: 10rem !important; padding-bottom: 10rem !important; }

.pt-6  { padding-top: 4rem  !important; }
.pt-7  { padding-top: 5rem  !important; }
.pt-8  { padding-top: 6rem  !important; }
.pt-9  { padding-top: 7rem  !important; }
.pt-10 { padding-top: 8rem  !important; }

.pb-6  { padding-bottom: 4rem  !important; }
.pb-7  { padding-bottom: 5rem  !important; }
.pb-8  { padding-bottom: 6rem  !important; }
.pb-9  { padding-bottom: 7rem  !important; }
.pb-10 { padding-bottom: 8rem  !important; }


/* ===== Modul 77 bild100 (Bild einspaltig, ggf. randless): kein geerbter height:100% wenn kein Text nebendran ===== */
.row.img-txt-wrapper > .col-12:only-child > .img-wrapper,
.row.img-txt-wrapper > .col-12.p-0:first-child + .visually-hidden + *,
.row.img-txt-wrapper > .col-12:first-child:has(+ .visually-hidden) > .img-wrapper,
.row.img-txt-wrapper > .col-12.padding:has(+ .visually-hidden) > .img-wrapper {
    height: auto;
}
.row.img-txt-wrapper > .col-12:has(+ .visually-hidden) > .img-wrapper figure.img-contain img,
.row.img-txt-wrapper > .col-12:has(+ .visually-hidden) > .img-wrapper figure.img-contain img.img-fluid {
    height: auto;
    object-fit: initial;
}

/* Icon-Liste (CKE5-Style ul.icon-list) - Checkmark via Inline-SVG, Markenfarbe */
ul.icon-list { list-style: none; padding-left: 0; margin-left: 0; }
ul.icon-list li {
  position: relative;
  padding-left: 1.9em;
  margin-bottom: .5em;
  line-height: 1.5;
}
ul.icon-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .15em;
  width: 1.25em;
  height: 1.25em;
  background-color: var(--maincolor, #009fe3);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") no-repeat center / contain;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* Media Cards - Icon-Modus (icon-card) */
.mm-card.icon-card .mm-card-icon { font-size: 2.75rem; line-height: 1; margin-bottom: .75rem; color: var(--maincolor, #009fe3); }
.mm-card.icon-card.mm-card--ta-center .mm-card-icon { text-align: center; }

/* Bewertung / Rating (CKE5-Style span.rating-stars) - goldene Sterne, Redakteur tippt ★ */
.rating-stars { color: #f5a623; font-size: 1.15em; letter-spacing: .08em; white-space: nowrap; }

/* ============================================================
   KUNDE Dark-Theme: schwarzer Hintergrund, weisse Typo
   ============================================================ */
body { background-color:#000; color:#fff; }
#inhalt, #inhalt p, #inhalt li, #inhalt td, #inhalt span, #inhalt div { color:#fff; }
h1,h2,h3,h4,h5,h6 { color:#fff; }
#inhalt a { color:#fff; text-decoration:underline; }
#inhalt a:hover { color: var(--maincolor,#009fe3); }

/* Menue schwarz + weisse Typo */
#navigation { background-color:#000; }
#navigation, #navigation a, #navigation li > a, #navigation .menu a, #navigation span { color:#fff !important; }
/* dunkles Logo auf weiss umfaerben */
/* Task 1325: Weiss-Filter entfernt - Logo liegt jetzt als rote PNG-Datei vor */
#navigation img.logo, #navigation #logo2, img.logo, #logo2 { filter: none; }
/* Hamburger-Icon weiss */
#navigation .menu-toggle, #navigation .burger, #navigation button { color:#fff; }

/* Accordion dunkeltauglich */
.accordion, .accordion-item, .accordion-collapse, .accordion-body { background-color:transparent !important; color:#fff; }
.accordion-button { background-color:#111 !important; color:#fff !important; }
.accordion-button:not(.collapsed) { background-color:#1c1c1c !important; color:#fff !important; }
.accordion-item { border:1px solid #333 !important; }
.accordion-button::after { filter: invert(1) brightness(2); }

/* Media / Icon Cards */
.mm-card, .mm-card *, .mm-card-icon i { color:#fff; }

/* Footer dunkel + weisse Typo */
body > *:last-child, body > footer { background-color:#000; color:#fff; }
body > *:last-child a, body > *:last-child p, body > *:last-child li { color:#fff; }

/* Buttons lesbar lassen */
.btn-outline-primary { color:#fff; border-color: var(--maincolor,#009fe3); }

/* Header-Bar (Megamenue) schwarz - lag als weisse Flaeche ueber #navigation */
#navigation header.header, header.header, header.header.clearfix,
.sticky-menu header.header, header.header.sticky { background-color:#000 !important; }
#navigation .container, #navigation .navigation, #navigation .menu-collapser,
#navigation .has-megamenu { background-color:transparent !important; }
#navigation .lev-0, #navigation .megamenu, #navigation ul { background-color:#000 !important; }
#navigation .logo img, #navigation .logo #logo2, #logo2 { filter: none !important; }

/* --- Task 1298: Button-Kontrast gefüllte Buttons (.btn.color1) -----------
   glob_maincolor ist in den Global Settings #ffffff, .btn/.btn.color1 setzen
   background-color:var(--maincolor) -> weiße Fläche. Die Textfarbe kommt
   zusätzlich aus "#inhalt a {color:#fff}" (ID-Spezifität) -> weiß auf weiß,
   Buttons erscheinen als leere weiße Kästen (Modul 77 + Modul 44).
   Fix nur Textfarbe der gefüllten Variante; .color1a (transparent, weiße
   Schrift/Rand auf schwarzem Body) bleibt unverändert. */
#inhalt a.btn.color1,
#inhalt a.btn.color1:hover,
#inhalt a.btn.color1:focus,
.btn.color1,
.btn.color1:hover { color:#000; }

/* --- Aug 2026: gleicher Bug wie Task 1298, hier bei .color1a -----------
   .btn.color1a:hover setzt background-color:var(--maincolor) (=weiss)
   UND color:white gleichzeitig -> Schrift auf Hover unsichtbar
   (betroffen: "Mehr erfahren"-Buttons, 21 Vorkommen sitewide). */
#inhalt a.btn.color1a:hover,
#inhalt a.btn.color1a:focus,
.btn.color1a:hover,
.btn.color1a:focus { color:#000; }

/* ===== IBM Plex Sans (self-hosted, DSGVO) – variabel, filigran ===== */
@font-face{font-family:'IBM Plex Sans';src:url('/template/fonts/plexsans-latin.woff2') format('woff2');font-weight:100 700;font-style:normal;font-display:swap;unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'IBM Plex Sans';src:url('/template/fonts/plexsans-latinext.woff2') format('woff2');font-weight:100 700;font-style:normal;font-display:swap;unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}

:root{ --font-body:'IBM Plex Sans',system-ui,-apple-system,sans-serif; --font-heading:'IBM Plex Sans',system-ui,sans-serif; }
body{ font-family:var(--font-body) !important; font-weight:300; }
h1,h2,h3,h4,h5,h6,.mm-card h3{ font-family:var(--font-heading) !important; font-weight:500; letter-spacing:0; text-transform:none; }
h1{ font-weight:600; }
.accordion-button{ font-family:var(--font-heading) !important; font-weight:500; letter-spacing:0; text-transform:none; }
#navigation, #navigation a, .btn{ font-family:var(--font-heading) !important; font-weight:400; text-transform:none; letter-spacing:0; }

/* ==========================================================================
   Task 1300 - Mega-Menü (Leistungen / Für Architekten & Planer)
   Markup: Template 4, Klassen .mm-panel/.mm-col/.mm-grid/.mm-box/.mm-list
   Dark-Theme: schwarzes Panel, weiße Typo, Font Awesome Icons.
   ========================================================================== */

.mm-panel { display: none; }
.mm-head { display: block;
    font-size: 13px !important;
    font-weight: 600 !important;
    letter-spacing: .12em !important;
    text-transform: uppercase !important;
    color: rgba(255,255,255,.55) !important;
    margin: 0 0 18px !important;
    padding: 0 !important;
    line-height: 1.2 !important;
}

/* ---------- Desktop ---------- */
@media (min-width: 1025px) {
    /* Der Header ist der Vollbreiten-Anker; der Bootstrap-Container darf das
       absolut positionierte Panel nicht auf seine eigene Breite begrenzen. */
    .header { position: relative; }
    .header .container.has-megamenu { position: static !important; }

    /* Top-Level-Elemente auf die gesamte Headerhöhe strecken. Dadurch bleibt
       :hover vom Link bis zum bündig am Headerboden beginnenden Panel aktiv. */
    .header .navigation,
    .header ul.megamenu { align-self: stretch; }
    .header ul.megamenu {
        display: flex;
        align-items: stretch;
    }
    .header ul.megamenu > li {
        display: flex;
        align-items: center;
    }

    .megamenu > li.has-mega { position: static !important; }
    /* Fix Hover-Luecke: durch Header-Padding (Fix 1325) ist der Header 20px hoeher,
       das Panel (top:100% relativ zum Header) beginnt jetzt 20px unter dem li-Ende.
       li-Hoverbox um exakt diese 20px verlaengern, damit die Maus beim Ueberqueren
       nicht den :hover verliert. */
    .megamenu > li.has-mega { padding-bottom: 20px; margin-bottom: -20px; }

    .mm-panel {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: #000;
        border-top: 1px solid rgba(255,255,255,.14);
        box-shadow: 0 18px 40px rgba(0,0,0,.5);
        z-index: 999;
        text-align: left;
    }
    .megamenu > li.has-mega:hover > .mm-panel,
    .megamenu > li.has-mega:focus-within > .mm-panel { display: block; }

    .mm-panel-inner {
        display: flex;
        align-items: flex-start;
        gap: 56px;
        width: 100%;
        margin-inline: auto;
        padding: 36px .75rem 40px;
    }

    /* Identische Containerbreite wie .header .container.has-megamenu.
       Die Basis-Gutter (.75rem je Seite) stammen aus Bootstrap 5; dadurch
       beginnt der Panelinhalt exakt an der Logo-Innenkante. */
    /* style.css hält den Header-Container bis 1267px per !important auf 100%. */
    @media (min-width: 1268px) { .mm-panel-inner { width: 1160px; } }
    @media (min-width: 1280px) { .mm-panel-inner { width: 1220px; } }
    @media (min-width: 1440px) { .mm-panel-inner { width: 1400px; } }
    @media (min-width: 1600px) { .mm-panel-inner { width: 1460px; } }
    @media (min-width: 1900px) { .mm-panel-inner { width: 1600px; } }
    @media (min-width: 2200px) { .mm-panel-inner { width: 2100px; } }
    @media (min-width: 2500px) { .mm-panel-inner { width: 2400px; } }
    .mm-col-featured { flex: 2 1 0; min-width: 0; }
    .mm-col-more     { flex: 1 1 0; min-width: 0; align-self: center; }

    .mm-grid { display: grid; gap: 22px 32px; }
    .mm-grid-4 { grid-template-columns: repeat(2, 1fr); }
    .mm-grid-3 { grid-template-columns: repeat(3, 1fr); }
    .mm-grid-2 { grid-template-columns: repeat(2, 1fr); }
    .mm-grid-1 { grid-template-columns: 1fr; }
}

/* ---------- Icon-Box ---------- */
.mm-box {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 10px 12px;
    border-radius: 6px;
    text-decoration: none !important;
    transition: background .18s;
}
.mm-box:hover, .mm-box:focus { background: rgba(255,255,255,.08); }
.mm-box-icon {
    flex: 0 0 auto;
    width: 52px; height: 52px;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid rgba(255,255,255,.22);
    border-radius: 6px;
    font-size: 22px;
    color: #fff !important;
}
.mm-box:hover .mm-box-icon { border-color: rgba(255,255,255,.6); }
.mm-box-text  { display: block; min-width: 0; }
.mm-box-title {
    display: block;
    font-size: 15px; font-weight: 600; line-height: 1.25;
    color: #fff !important;
    hyphens: auto;
}
.mm-box-desc {
    display: block;
    margin-top: 3px;
    font-size: 13px; font-weight: 400; line-height: 1.4;
    color: rgba(255,255,255,.62) !important;
}

/* ---------- "Weitere Leistungen" Liste ---------- */
.mm-list { list-style: none; margin: 0; padding: 0; }
.mm-list > li { margin: 0; padding: 0; }
.mm-list > li + li { border-top: 1px solid rgba(255,255,255,.10); }
.mm-list a {
    display: block;
    padding: 11px 4px;
    font-size: 14px; line-height: 1.35;
    color: rgba(255,255,255,.85) !important;
    text-decoration: none !important;
    transition: color .18s, padding-left .18s;
}
.mm-list a:hover, .mm-list a:focus {
    color: #fff !important;
    padding-left: 10px;
}

/* ---------- Mobile Drawer (<=1024px) ---------- */
@media (max-width: 1024px) {
    /* Drawer dunkel statt weiß - passt zum Dark-Theme und vermeidet
       weiß-auf-weiß durch die globale #navigation a{color:#fff} Regel. */
    .header ul.megamenu { background: #000 !important; }
    .header ul.megamenu > li { border-top: 1px solid rgba(255,255,255,.12) !important; }
    .header ul.megamenu > li > a,
    .header ul.megamenu > li.active > a,
    .header ul.megamenu > li > a.active,
    .header ul.megamenu > li > a:hover,
    .header ul.megamenu > li > a:focus {
        color: #fff !important;
        background: transparent !important;
    }
    .header ul.megamenu > li.active > a { background: rgba(255,255,255,.07) !important; }
    .mm-sub-toggle { color: #fff !important; }

    .mm-panel {
        position: static !important;
        background: rgba(255,255,255,.05);
        border: 0;
        box-shadow: none;
    }
    .header ul.megamenu > li.mm-open > .mm-panel { display: block; }

    .mm-panel-inner { display: block; padding: 4px 0 10px; }
    .mm-col { padding: 10px 12px 4px; }
    .mm-head { margin: 6px 0 10px !important; font-size: 12px !important; }

    .mm-grid { display: block; }
    /* Bestehende Mobile-Regel setzt Nav-Links auf display:block -> Icon stünde
       sonst über dem Titel. Flex-Row erzwingen. */
    .mm-box { display: flex !important; padding: 9px 4px; gap: 12px; }
    .mm-box-icon { width: 32px; height: 32px; font-size: 15px; }
    .mm-box-title { font-size: 14px; }
    .mm-box-desc { font-size: 12px; }
    .mm-list a { padding: 10px 4px; }
    .mm-list a:hover, .mm-list a:focus { padding-left: 4px; }
}

/* Reset gegen megamenu.css/style.css: li im Panel erbt sonst weißen Hintergrund
   (weiß auf weiß -> Links unsichtbar). */
.mm-panel li,
.mm-list > li { background: transparent !important; }

/* Font-Awesome-Glyph erbt die Farbe nicht: ::before wird von einer globalen
   Regel auf #000 gesetzt -> schwarz auf schwarz. Explizit weiß erzwingen. */
.mm-box-icon i,
.mm-box-icon i::before { color: #fff !important; }

/* Fliesstext-Gewicht reduziert (leichter) */
#inhalt p, #inhalt li, #inhalt td, .mm-card p, .accordion-body, .accordion-body p, .accordion-body li { font-weight:300; }

/* ===== Typo-Skala: größer, Headlines dünner (Angleich ans Original) ===== */
body{ font-size:1.2rem; line-height:1.6; }
#inhalt p, #inhalt li, #inhalt td, .accordion-body, .accordion-body p, .accordion-body li, .mm-card p{ font-size:1.2rem; line-height:1.65; }
h1{ font-size:clamp(2.2rem, 5.5vw, 3.6rem) !important; font-weight:300 !important; line-height:1.12; }
h2{ font-size:clamp(1.8rem, 3.8vw, 2.7rem) !important; font-weight:400 !important; line-height:1.2; }
h3{ font-size:clamp(1.45rem, 2.2vw, 1.9rem) !important; font-weight:500 !important; line-height:1.25; }
h4,h5,h6{ font-size:clamp(1.2rem, 1.7vw, 1.4rem) !important; font-weight:500 !important; }

/* =====================================================================
   ORIGINAL-KACHEL-LOOK (aus wir-vergessen-nichts.de übernommen, 2026-08-18)
   Roter Glow-Strich am oberen Kartenrand + dunkle Kartenbasis + Tiefenschatten.
   Betrifft alle Media-Cards (Modul 101) projektweit.
   ===================================================================== */
.mm-mediacards .card.mm-card{
    background:none !important;
    box-shadow:none !important;
    overflow:hidden;
}

/* Media-Card: Icon direkt über die Headline (kein isoliertes Ecken-Icon) */
.mm-card-icon{ margin:0 0 .6rem 0 !important; line-height:1; }
.mm-card__content > :first-child{ margin-top:0 !important; }
.mm-card .d-flex.flex-column > .mm-card-icon + .mm-card__content h1,
.mm-card .d-flex.flex-column > .mm-card-icon + .mm-card__content h2,
.mm-card .d-flex.flex-column > .mm-card-icon + .mm-card__content h3{ margin-top:0 !important; }

/* Icon-Card: Content-Top-Padding weg, damit HL direkt unter dem Icon sitzt */
.mm-card-icon + .mm-card__content{ padding-top:0 !important; }

/* ---- Kachel: weißer Rand weg + ORIGINAL Foto-Hover via echtem Layer (2.5s, Box bleibt stehen) ---- */
.mm-mediacards .card.mm-card{
    border:1px solid transparent !important;
    transition:border-color .3s ease, box-shadow .3s ease;
}
/* Zwei getrennte Hintergrund-Layer: Grundzustand + Hover-Bild.
   Das regulaere Feld "Bild / Video" bleibt davon unabhaengig. */
.mm-mediacards .card.mm-card .mm-card__base-bg,
.mm-mediacards .card.mm-card .mm-card__hover{
    position:absolute;
    inset:0;
    background-size:cover;
    background-position:center;
    pointer-events:none;
}
.mm-mediacards .card.mm-card .mm-card__base-bg{
    opacity:1;
    z-index:0;
}
.mm-mediacards .card.mm-card .mm-card__hover{
    opacity:0;
    transition:opacity 2.5s ease;
    z-index:1;
}
.mm-mediacards .card.mm-card:hover .mm-card__hover{
    opacity:1;
}
/* Text und Lesbarkeitsverlauf bleiben auch beim Mouse-leave ueber beiden Bildern.
   Dadurch kein ungedimmtes 100%-Aufblitzen beim Rueckblenden. */
.mm-mediacards .card.mm-card .mm-card__inner{
    position:relative;
    z-index:3;
}
.mm-mediacards .card.mm-card.has-base-bg .mm-card__inner,
.mm-mediacards .card.mm-card.has-hover-img .mm-card__inner{
    background:linear-gradient(180deg, rgba(10,0,0,.55) 0%, rgba(10,0,0,.75) 100%);
}

/* ===== Icon-Card Feinschliff (neu eingebaut) + weißer Top-Glow entfernt ===== */
/* Icon: 20% kleiner, Luft oben/unten, linksbündig, HL direkt darunter */
.mm-card.icon-card .mm-card-icon, .mm-card-icon{ font-size:2.2rem !important; margin:.9rem 0 1.3rem 0 !important; text-align:left !important; line-height:1; }
.mm-card-icon i{ font-size:2.2rem !important; }
.mm-card-icon + .mm-card__content{ padding-top:0 !important; }
.mm-card__content > :first-child{ margin-top:0 !important; }
/* Weißer Glossy-Top-Glow + weißer Inset-Rand entfernt (rote Glows bleiben) */
.card.mm-card::before, .mm-card.icon-card::before{ background:none !important; background-image:none !important; }
.card.mm-card::after, .mm-card.icon-card::after{ box-shadow:none !important; }
/* Icon linksbündig mit HL (Content hat 1.5rem left-padding) */
.mm-card.icon-card .mm-card-icon, .mm-card-icon{ padding-left:1.5rem !important; }

/* Task 1304 – Rote Trennlinie ueber dem Footer (Original wir-vergessen-nichts.de) */
body > section.mm-mediacards:last-child { position: relative; }
body > section.mm-mediacards:last-child::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--secondcolor, #FF0000), transparent);
  pointer-events: none;
}

/* Task 1304 – 4-Spalten-Struktur mit rotem linken Trennstrich (Leistungen-Uebersicht) */
.mm-4cols .mm-4col{ border-left:3px solid var(--secondcolor,#FF0000); padding-left:1.25rem; height:100%; }
.mm-4cols .mm-4col h3{ margin-top:0; }

/* Task 1304 – Kundenstimmen-Karten (Home): Rahmen.
   Task 1325: roter Top-Akzent (border-top auf .mm-card__inner) ENTFERNT –
   erzeugte durch border-radius den ungewollten roten Bogen oben an den
   Testimonial-Karten UND an der Footer-NAP-Karte. Der weisse Glas-Rahmen
   aus style.css (.fx-frame::after) bleibt als Design-Intention erhalten. */
#article-441 .mm-mediacards .mm-card.text-card.fx-frame{ position:relative; }

/* Task 1305: Mobile-Hero-Titel (ehemals doppeltes <h1>, jetzt <p class="mm-hero-h1">) */
.mm-hero-h1{
  color:#fff;
  font-family:var(--font-heading) !important;
  font-weight:300 !important;
  letter-spacing:0;
  text-transform:none;
  font-size:clamp(2.2rem, 5.5vw, 3.6rem) !important;
  line-height:1.12;
  margin-top:0;
  margin-bottom:.5rem;
}

/* Task 1305: Karten-Headlines duerfen je nach Seitenstruktur h2 sein (Heading-Hierarchie),
   sollen aber optisch weiterhin wie die h3-Kartentitel wirken. */
.mm-card h2{ font-size:clamp(1.45rem, 2.2vw, 1.9rem) !important; font-weight:500 !important; line-height:1.25; }


/* ==================== Task 1325 ==================== */

/* FIX 1: Header Desktop – 20px Innenabstand oben/unten (Mobile unveraendert) */
@media (min-width: 1025px) {
  .header > .container,
  .header > .container-fluid { padding-top: 20px; padding-bottom: 20px; }
}

/* FIX 3a: Google-G vor "Google-Bewertung" in den Testimonial-Karten.
   Font Awesome Brands ist bereits per CDN eingebunden. */
#article-441 .mm-mediacards .mm-card.text-card .mm-google-badge{
  display:inline-flex; align-items:center; gap:.4em;
}
#article-441 .mm-mediacards .mm-card.text-card .fa-google{
  font-size:1em; line-height:1; color:#4285F4;
}

/* ---- Modul 77 (01-Inhalt): neues Hintergrundbild-Feld (media1) ---- */
.content-element.has-bgimage{ position:relative; overflow:hidden; }
.content-element.has-bgimage::before{
    content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
}
.content-element.has-bgimage.bgimage-overlay-dark::before{
    background:linear-gradient(180deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.78) 100%);
}
.content-element.has-bgimage.bgimage-overlay-red::before{
    background:linear-gradient(180deg, rgba(207,46,46,.50) 0%, rgba(10,0,0,.72) 100%);
}
.content-element.has-bgimage > .container{ position:relative; z-index:1; }

/* =====================================================================
   Task 1328 - Systemische Angleichung an das Original
   ===================================================================== */

/* --- Fix 1: Roter Telefon-CTA im Header ------------------------------
   Original (wir-vergessen-nichts.de) hat auf JEDER Seite einen roten
   Telefon-Button im Header. Markup steht im Template "Megamenue [4]"
   als drittes Flex-Kind von .header > .container.has-megamenu.
   Reihenfolge per order: Desktop Logo|Navi|CTA, Mobile Logo|CTA|Burger. */
.header > .container,
.header > .container-fluid { gap: 16px; }

.header .logo       { order: 1; }
.header .navigation { order: 2; }
.header .header-cta { order: 3; }

.header .header-cta {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
    background-color: #ff0000;           /* Original-Buttonrot (rgb(255,0,0)) */
    color: #fff !important;
    border: 1px solid #ff0000;
    border-radius: 4px;
    padding: 10px 18px;
    font-family: var(--font-heading);
    font-size: clamp(15px, 0.0247vw + 0.75rem, 18px);
    line-height: 1.2;
    text-decoration: none !important;
    transition: background-color .25s ease, border-color .25s ease;
}
.header .header-cta:hover,
.header .header-cta:focus {
    background-color: #cf2e2e;
    border-color: #cf2e2e;
    color: #fff !important;
}
.header .header-cta__icon { flex: 0 0 auto; }

@media (max-width: 1024px) {
    /* Mobile: Logo | Telefon-Button | Hamburger. Navi darf nicht mehr
       den Restplatz fressen, sonst rutscht der CTA aus dem Viewport. */
    .header .header-cta { order: 2; }
    .header .navigation { order: 3; flex: 0 0 auto; }
    .header > .container,
    .header > .container-fluid { gap: 10px; }
    .header .header-cta { padding: 9px 14px; font-size: 15px; }
}

@media (max-width: 600px) {
    /* Kein Platz für die Nummer -> Icon-only Button (Ziel bleibt tel:). */
    .header .header-cta__text { display: none; }
    .header .header-cta {
        padding: 0;
        width: 40px;
        height: 40px;
        justify-content: center;
        border-radius: 50%;
    }
}

/* --- Fix 2/3: rot gefuellte CTA-Buttons ------------------------------
   glob_maincolor ist #ffffff, deshalb sind .btn.color1 / .color1a beide
   weiss. Das Original nutzt für "Kontakt aufnehmen" / "Projekt anfragen"
   durchgehend rgb(255,0,0) mit weisser Schrift. Neue Klasse .btn.rotcta,
   damit color1/color1a (Hero-Startseite u.a.) unverändert bleiben. */
.btn.rotcta,
#inhalt a.btn.rotcta {
    background-color: #ff0000;
    border-color: #ff0000;
    color: #fff;
    transition: background-color .3s ease, border-color .3s ease;
}
.btn.rotcta:hover,
.btn.rotcta:focus,
#inhalt a.btn.rotcta:hover,
#inhalt a.btn.rotcta:focus {
    background-color: #cf2e2e;
    border-color: #cf2e2e;
    color: #fff;
}

/* Fix: .mm-card p { font-size:1.2rem } (Zeile 1672) uebersteuert die mm-text--Groessenklassen
   wegen hoeherer Spezifitaet (Klasse+Element schlaegt einzelne Klasse). Explizite
   Kombi-Selektoren stellen die beabsichtigten Groessen innerhalb von Karten wieder her. */
.mm-card p.mm-text--sm{ font-size:clamp(12px,0.2632vw + 10.9474px,16px) !important; }
.mm-card p.mm-text--md{ font-size:clamp(20px,0.6579vw + 17.3684px,30px) !important; }
.mm-card p.mm-text--lg{ font-size:clamp(24px,1.0526vw + 19.7895px,36px) !important; }
.mm-card p.mm-text--xl{ font-size:clamp(30px,1.9737vw + 22.1053px,60px) !important; }

/* ===== Mobile-Header: CTA an Hamburger, Logo linksbündig mit Body ===== */
@media (max-width: 1024px) {
  /* roter Telefon-Button rückt mit dem Burger nach rechts zusammen */
  .header .header-cta { margin-left: auto !important; }
  /* Logo linksbündig mit dem Body-Text (Container-Padding angleichen) */
  .header > .container.has-megamenu { padding-left: 12px !important; }
  .header .logo { margin-left: 0 !important; padding-left: 0 !important; }
}

/* ===== Task #1352 – Ajax-Landingpage (Artikel 469): einheitliches 4:3-Bildformat =====
   Alle Content-Bilder der Landingpage auf ein gemeinsames Seitenverhältnis zwingen.
   Vorher: jedes Bild behielt sein Originalformat (16:9, 2.4:1 beim Hub-2-Produktfoto,
   1.78:1 beim Teamfoto) → optisch uneinheitlich.
   Scope bewusst auf #article-469 begrenzt, damit Modul 77 auf allen anderen Seiten
   unverändert bleibt. Der Hero (Modul 44) rendert außerhalb von .img-wrapper und
   ist daher nicht betroffen. */
#article-469 .content-element .img-wrapper .mm-media-figure {
  aspect-ratio: 4 / 3;
  width: 100%;
  overflow: hidden;
}
#article-469 .content-element .img-wrapper .mm-media-figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
}
/* Hub-2-Produktfoto (Design-Sektion, Slice 10998): Mediamanager liefert 1600x750
   (2,13:1), die Zentrale sitzt bei ca. 72 % der Bildbreite. Beim 4:3-Crop bleiben
   nur 1000 px Breite übrig – bei zentriertem Ausschnitt würde das Gerät rechts
   angeschnitten. 95 % rückt den Ausschnitt so weit nach rechts, dass die Zentrale
   komplett und mit Rand im Bild steht. */
#article-469 #img_wrp10998 .mm-media-figure img {
  object-position: 95% center;
}

/* ---- Modul 122 (Ajax-Konfigurator) + 123 (Kontaktformular einfach): Hintergrundbild ---- */
.ax-konfig.ax-has-bg, .sk-kf.sk-kf-has-bg { position:relative; }
.ax-konfig.ax-has-bg::before, .sk-kf.sk-kf-has-bg::before {
    content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
}
.ax-konfig.ax-overlay-dark::before, .sk-kf.sk-kf-overlay-dark::before {
    background:linear-gradient(180deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.78) 100%);
}
.ax-konfig.ax-overlay-red::before, .sk-kf.sk-kf-overlay-red::before {
    background:linear-gradient(180deg, rgba(207,46,46,.50) 0%, rgba(10,0,0,.72) 100%);
}
.ax-konfig.ax-has-bg > *, .sk-kf.sk-kf-has-bg > * { position:relative; z-index:1; }
.ax-konfig.ax-has-bg > .ax-ambient { position:absolute !important; }

/* ---- Autofill-Kontrast-Fix: Browser ueberschreiben sonst Hintergrund mit Weiss/Gelb,
   ohne die (helle) Schriftfarbe im Dark-Theme anzupassen -> unlesbar. ---- */
.ax-konfig input:-webkit-autofill,
.sk-kf input:-webkit-autofill {
    -webkit-text-fill-color: #f5f5f5 !important;
    -webkit-box-shadow: 0 0 0px 1000px #141414 inset !important;
    box-shadow: 0 0 0px 1000px #141414 inset !important;
    caret-color: #f5f5f5 !important;
    transition: background-color 5000s ease-in-out 0s;
}

/* SEO-Fix: Footer-Spaltentitel visuell wie h3, aber kein Heading-Tag (Task Aug 2026) */
.footer-heading { font-size: clamp(1.45rem, 2.2vw, 1.9rem); font-weight: 500; line-height: 1.25; margin: 0 0 0.5rem; display: block; }