@font-face {
 font-family: 'Montserrat';
 font-style: normal;
 src: url(../fonts/Montserrat-VariableFont_wght.ttf) format("truetype-variations");
 font-weight: 100 900;
}
@font-face {
 font-family: 'Montserrat';
 font-style: italic;
 src: url(../fonts/Montserrat-Italic-VariableFont_wght.ttf) format("truetype-variations");
 font-weight: 100 900;
}


h2 {
    margin-bottom:2.4rem;
    text-align: center;
    line-height: 1.24;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 2.4rem;
}
h3 {
    margin-bottom:1.6rem;
    font-weight:600;
}
h4 {
    font-weight:600;
}
h5 {
    text-transform: uppercase;
    color:#FFDA05;
    font-style: italic;
    font-size: 2.4rem;
    font-weight:600;
}
p {
    margin-bottom:1.6rem;
}
strong {
    font-weight:600;
}
:root {
    font-size:10px;
    scroll-behavior: smooth;
    scroll-padding-top: 5.4rem;
    --kby-acc-col:#ffda05;
    --kby-acc-hvr:#ffe345;
    --kby-acc-inv:#000;
}
ul li .kby-button {
    font-size:2rem;
}
.kby-button {
    text-transform: uppercase;
    font-weight:600;
    font-size:1.4rem;
    margin-top: 2.4rem;
}
.kby-form .kby-button {
    margin-top:1.6rem;
}
body {
    font-size: 1.7rem;
    font-family: 'Montserrat', sans-serif;
}
header {
    display:flex;
    align-items: center;
    height: 5.4rem;
    z-index: 999;
    justify-content: space-between;
    position: fixed;
    width: 100%;
    background-color: #fff;
    box-shadow: 0px 0.8rem 5.4rem -1.6rem rgba(0, 0, 0, 0.24);
}
header h1, header h1 a {
    height: 100%;
}
header #logo {
    height: 100%;
    width: auto;
}
#nav-button {
    margin:0;
    /* margin-right: 0.8rem; */
    --kby-btn-hgt: 5.4rem;
    color: #000;
}
nav {
    position: absolute;
    width: 100%;
    top: 5.4rem;
    background-color: #000;
    color: #fff;
    display:none;
}
nav li a{
    font-weight: 600;
    text-transform: uppercase;
    text-decoration: none;
    padding: 2.4rem;
    display: block;
    text-align: center;
}
nav.active {
    display:block;
}
main {padding-top: 5.4rem;}
.section-inner {
    padding: 4.8rem 2.4rem;
}
#house-map {
    position:relative;
}
#house-map figcaption {
    display: none;
}
#house-map .infopoint{
    position:absolute;
    background-color: #ffda05;
    border-radius: 9999px;
    width: 2.4rem;
    aspect-ratio: 1;
    transform: translate(-50%, -50%);
    cursor: pointer;
}
#photovoltaik-infopoint {
    left: 63%;
    top: 26%;
}
#smarthome-infopoint {
    left: 34%;
    top: 40%;
}
#brandmeldeanlagen-infopoint {
    left: 54%;
    top: 38%;
}
#klimaanlagen-infopoint {
    left: 32%;
    top: 59%;
}
#beleuchtung-infopoint {
    left: 77%;
    top: 53%;
}
#elektroinstallation-infopoint {
    left: 71%;
    top: 77%;
}
#house-map .infopoint:before, #house-map .infopoint:after{
    content:'';
    position:absolute;
    background-color:#ffda05;
    border-radius: 9999px;
    animation:infopointSizing 2s ease-in;
    animation-iteration-count: infinite;
    opacity:0.7;
    width:100%;
    height:100%;
    pointer-events: none;
}
#house-map .infopoint:after{
    animation-delay:240ms;
}
@keyframes infopointSizing {
    0% {transform:scale(1);}
    40% {transform:scale(2.4);opacity:0;filter:blur(0.4rem);}
    100% {transform:scale(1);opacity:0;}
}
#house-map .infopoint-info {
    position:absolute;
    background-color:#fff;
    padding: 0.8rem;
    transform: translateX(-50%);
    left: 50%;
    bottom: 100%;
    font-size: 1.2rem;
    border-radius: 0.8rem;
    min-width: 16rem;
    bottom: 100%;
    margin-bottom: 0.8rem;
    opacity:0;
    pointer-events:none;
    transition:opacity 240ms ease-out;
}
#house-map .infopoint:hover, #house-map .infopoint.active {
    z-index:10;
}
#house-map .infopoint:hover:before,#house-map .infopoint:hover:after,
#house-map .infopoint.active:before,#house-map .infopoint.active:after{
    animation:none;
    background-color:#fff;
}
#house-map .infopoint:hover .infopoint-info,
#house-map .infopoint.active .infopoint-info{
    opacity:1;
}
#house-map .infopoint-info h4{
    margin:0;
    text-transform: uppercase;
}
#house-map .infopoint-info p{
    margin:0
}
#photovoltaik-infopoint .infopoint-info {
    bottom:auto;
    top:100%;
    margin-bottom:0;
    margin-top:0.8rem;
}
#home-contact {
    display:none;
}

#home-contact-form {
    padding: 2.4rem;
    background-color: #fff;
    border-radius: 0.8rem;
    width: 64%;
    zoom: 0.6;
    position: relative;
    overflow: hidden;
}

#home-contact h3 {
   text-align: center;
   margin:0;
   font-size:2.4rem;
}

#home-contact-submit {
    align-self: stretch;
}

#leistungen-articles {
    margin-top:4.8rem;
    display:flex;
    flex-wrap: wrap;
    gap: 3.6rem;
}
#leistungen-articles article {
    border-radius: 0.8rem;
    overflow: hidden;
}
#leistungen-articles article figure{
    position:relative;
}
#leistungen-articles article figcaption{
    display: none;
    text-transform: uppercase;
    font-weight: 600;
}
#leistungen-articles figure img {
    width:100%;
}
#leistungen-articles article .article-info{
    background-color:#1D1D1E;
    color:#fff;
    padding: 2.4rem;
    border-top: 0.4rem solid #ffda05;
}
#service-figures {
    display:flex;
    flex-wrap:wrap;
    gap: 3.6rem;
    justify-content: center;
}
#service-figures figure {
    position:relative;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 14rem;
    width: 100%;
}
#service-figures figure .service-figure-graphic {
    width: 16rem;
    aspect-ratio: 1;
    background-color: #ffda0530;
    border-radius: 9999px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index:20;
}
#service-figures figure .service-figure-graphic:before {
    content:'';
    width: 14rem;
    aspect-ratio: 1;
    background-color: #ffda056e;
    border-radius: 9999px;
    transform: translate(-50%, -50%);
    position: absolute;
    left: 50%;
    top: 50%;
    z-index:10;
}

#service-figures figure .service-figure-graphic:after {
    content:'';
    width: 12rem;
    aspect-ratio: 1;
    background-color: #ffda05;
    transform: translate(-50%, -50%);
    border-radius: 9999px;
    position: absolute;
    left: 50%;
    top: 50%;
    z-index:50;
}

#service-figures figcaption {
    text-align: center;
    white-space: nowrap;
    font-weight: 600;
    line-height: 1.2;
    position: relative;
    z-index:100;
}
#service-figures figcaption span{
    font-weight:700;
    font-size:3.6rem;
}
#service-details {
    background-color:#f3f3f3;
}
#service-info {
    padding-bottom:2.4rem;
}
#service-info ul{
    padding:0;
    list-style:none;
}
#service-info ul li{
    margin-bottom:3.6rem;
}
.service-info-list-header h3{
    text-transform:uppercase;
}
#service-info img{
    width: 7.4rem;
    margin-bottom: 1.6rem;
    margin-left: -0.8rem;
}
#service-info-figure img{
    display:none;
}
#service-info-figure figcaption {
    background-color: #fff;
    padding: 2.4rem;
    padding-top: 4.8rem;
    border-radius: 2.4rem;
    background-image: url(../img/e-kg.at-icon-service-info-bg.svg);
    background-repeat: no-repeat;
    background-position: left top;
}
#service-edv {
    background-color:#1d1d1e;
    color:#fff;
}
#service-brandmeldeanlagen img{
    width:12rem;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 1.6rem;
}
#service-zertifikat {
    background-color:#2f2f2f;
    color: #fff;
}
#service-zertifikat img{
    width:12rem;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 1.6rem;
}
#kontakt {background-color: #ffda05;}
#kontakt img{display: none;}

#kontakt form{
    /* display: flex; */
    /* flex-direction: column; */
    /* gap: 1.6rem; */
}

#kontakt form .kby-row{
    gap: 1.6rem;
    flex-wrap: wrap;
}

#kontakt form .kby-row .kby-field{
    flex:1;
}

#contact-submit {
    align-self:stretch;
}

#contact-submit .kby-form-body{
    background-color:#1D1D1E;
    color:#fff;
}

#kontakt-details {
    background-color:#1D1D1E;
    color: #fff;
    text-align: center;
    
}

#kontakt-details .section-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
}

#kontakt-details img {
    margin-bottom:2.4rem;
    max-width: 36rem;
}

#kontakt-details h3 {
    margin:0;
}


#kontakt-details p {
    margin:0;
}

footer {
    display:flex;
    flex-wrap: wrap;
    flex-direction: column-reverse;
    align-items: center;
    justify-content: space-between;
    padding:0.8rem;
    text-transform:uppercase;
    background-color:#000;
    color:#ccc;
    gap: 0.8rem;
    font-size: 84%;
}

footer button {
    cursor:pointer;
    color:inherit;
    text-transform:uppercase;
}

footer a {
    text-decoration:none;
}

#impressum-dialog, #kcookie-dialog {
    width: 100%;
    height: 100%;
    max-width: calc(100% - 1.6rem);
    max-height: calc(100% - 1.6rem);
    border: 0;
    left: 0.8rem;
    top: 0.8rem;
    bottom: 0.8rem;
    right: 0.8rem;
    border-radius: 0.4rem;
    padding: 0;
    color:#fff;
    background-color:#0f0f0f;
}

#impressum-dialog .kby-button, #kcookie-dialog .kby-button{
    margin:0;
    position: sticky;
    margin-top: 0.8rem;
    margin-right: 0.8rem;
    margin-left:auto;
}

#impressum {
    margin-bottom: 3.6rem;
}

#impressum-dialog h2, #kcookie-dialog h2 {
    text-align:left;
}

.altcha-row {
    gap:1.6rem;
}

.altcha-row altcha-widget {
    flex-shrink:0;
}

#contact-form {
    position: relative;
    overflow: hidden;
    padding: 2.4rem;
    margin: -2.4rem;
}

#contact-form .form-result-success{
    background-color:#ffda05;
}

#another-button {
    position:absolute;
    bottom: 1.6rem;
    left:1.6rem;
    font-size: 2rem;
}

@media screen and (min-width:900px) {
    #another-button {
    display:none;
    }
    :root {
        scroll-padding-top: 7.4rem;
        --kby-btn-hgt:3.6rem;
    }
    .kby-button {
        margin-top:3.6rem;
    }
    header {
        height:7.4rem;
    }
    #nav-button {
        display:none;
    }
    nav {
        display:block;
        position: initial;
        background-color:transparent;
        color:#000;
        width: initial;
        margin-right: 2.4rem;
    }
    nav ul {
        display:flex;
        gap:1.6rem;
        align-items: center;
    }
    nav li a{
       padding:0;
    }
    nav li a.kby-button{
       padding:0;
        margin:0;
    }
    nav li a:hover{
       color:#ffda05;
    }
    main {
        padding-top: 7.4rem;
    }
    h2 {
        font-size: 4.2rem;
        margin-bottom: 3.6rem;
    }
    section {
        /* display:flex; */
        /* flex-direction: column; */
        /* align-items: center; */
    }
    .section-inner {
        padding: 8.4rem 2.4rem;
        max-width: 1200px;
        margin-left:auto;
        margin-right:auto;
    }
    #top {
        display:flex;
    }
    #house-map .infopoint {
        width:3.6rem;
    }
    #house-map .infopoint-info {
        font-size:1.6rem;
        padding:1.6rem;
        min-width: 24rem;
    }
    #leistungen .center-text {
        text-align: center;
        max-width:74rem;
        margin-left:auto;
        margin-right: auto;
    }
    #leistungen-articles article {
        width: calc(33% - 2.4rem);
        position: relative;
        overflow:hidden;
    }
    #leistungen-articles article figcaption {
        width: 100%;
        background-color: #ffda05;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 1.6rem;
    }
    #leistungen-articles article .article-info {
        border:none;
        position:absolute;
        top:0;
        left:0;
        width:100%;
        height:100%;
        opacity:0;
        transform: translateY(40%);
        transition: transform 240ms ease-out, opacity 240ms ease-out;
        font-size: 1.4rem;
    }
    #leistungen-articles article .kby-button {
        margin-top:2.4rem;
    }
    #leistungen-articles article:hover .article-info {
        opacity:1;
        transform: translateY(0);
    }
    #service-info {
        padding:0;
    }
    .service-info-list-header {
        display:flex;
        align-items: center;
        gap:1.6rem;
    }
    .service-info-list-header h3 {
        font-size: 2.4rem;
    }
    #service-details .section-inner{
        display: flex;
        gap: 3.6rem;
    }
    #service-figures {
        gap: 0;
    }
    #service-figures figure {
        width: 24rem;
    }
    #service-info-figure {
        padding-right: 14rem;
    }
    #service-info-figure img{
        display:block;
        border-radius: 2.4rem;
    }
    #service-info-figure figcaption {
        transform: translate(12rem, -8rem);
        box-shadow: 0px 0.8rem 5.4rem -1.6rem rgba(0, 0, 0, 0.24);
    }
    #service-edv {
        display:flex;
    }
    #service-edv .section-inner {
        max-width: 54rem;
    }
    #service-edv img {
        width: 50%;
        object-fit: cover;
    }
    #service-edv .kby-button {
        /* margin-left: auto; */
        /* margin-right: auto; */
    }
    #service-brandmeldeanlagen .section-inner {
        max-width:74rem;
    }
    #service-brandmeldeanlagen img {
        width:24rem;
    }
    #service-brandmeldeanlagen .kby-button {
        /* margin-left: auto; */
        /* margin-right: auto; */
    }
    #service-zertifikat .section-inner {
        max-width:74rem;
        text-align: center;
    }
    #service-zertifikat img {
        width:24rem;
    }
    #service-zertifikat .kby-button {
        margin-left: auto;
        margin-right: auto;
    }
    #kontakt {
        display: flex;
    }
    #kontakt > img{
        width: 40%;
        object-fit: cover;
        display: block;
    }
    #kontakt-details {
        text-align:right;
    }
    #kontakt-details .section-inner{
        flex-direction:row;
        max-width: 100%;
        justify-content: space-between;
        align-items:start;
    }
    footer {
        flex-direction:row;
        font-size:64%;
    }
}

@media screen and (min-width: 1200px) {
    #house-map {
        width: 60%;
    }
    #home-contact{
        width:40%;
        display: flex;
        justify-content: center;
        align-items: center;
        background-image: linear-gradient(180deg, #5D5D5D 0%, #232323 100%);
    }
}

@media screen and (min-width: 1400px) {
    #home-contact-form{
     zoom: 0.8; 
    }
}

@media screen and (min-width: 1800px) {
    #home-contact-form{
     zoom: 1; 
    }
}



form .form-result {
    display:none;
    font-weight:600;
}

form.success .form-result-success {
    display:initial;
    /* color:#1ad010; */
    position: absolute;
    background-color: #fff;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 2.4rem;
}

form.failed .form-result-failed {
    display:initial;
    color:#ff0000;
}

form.captcha-failed .form-result-captcha-failed {
    display:initial;
    color:#ff0000;
}


#kcookie-modal {
    position: fixed;
    z-index:900;
    bottom:2.4rem;
    left:2.4rem;
    background-color: #fff;
    padding:2.4rem;
    max-width:48rem;
    font-size:84%;
    border-radius:0.8rem;
    box-shadow: 0px 0.8rem 5.4rem -1.6rem rgba(0, 0, 0, 0.24);
    opacity:0;
    animation: kcookie 240ms;
    animation-delay: 240ms;
    animation-fill-mode: forwards;
}

#kcookie-modal .kby-row {
    gap:0.8rem;
}
#kcookie-modal #kcookie-footer .kby-button{
    margin-top:0.8rem;
    font-size:84%;
}

#kcookie-modal .kby-toggle:first-of-type {
    margin-bottom:0.8rem;
}

#kcookie-modal.accepted {
    display:none;
}

@keyframes kcookie {
    to {
        opacity:1;
    }
}

#kcookie-modal.canceled {
    display:none;
}