// out: ../css/styles.css, sourcemap: false, compress: true

@import "import/settings.less";
@import "import/grid.less";
@import "import/forms.less";
@import "import/navigation.less";
@import "import/default.less";
@import "import/mixins.less";

// // Für Druckansicht
// @media print {
//     @import 'import/print.less';
// }

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes fade_move_down {
    0%   { transform:translate(0,-10px); opacity: 0.3;  }
    50%  { transform:translate(0,10px); opacity: 1;  }
    100% { transform:translate(0,-10px); opacity: 0.3; }
}

#breadcrumbs {
    display: none;
}

.fade_in {
    opacity: 0!important;
    // visibility: hidden;
    pointer-events: none;
    .transition(all 1s);
    &.fadeIn {
        opacity: 1!important;
        // visibility: visible;
        pointer-events: all;
        .transition(all 1s);
    }
}

@media (max-width: @xlarge_breakpoint) {
    .mobile-reverse {
        .brz-row {
            flex-direction: column-reverse!important;
        }
    }
}

// .headline-font {
//     font-family: @font_family_headline!important;
// }
//
picture {
    img {
        width: auto!important;
    }
}

// .brz-column__content {
//     max-width: none !important;
// }
//
// .brz-picture,
// .brz-picture img,
// .brz-img {
//     max-width: none !important;
//     width: auto !important;
//     height: auto !important;
// }
//
// [class*="brz-css-d-image"] {
//     max-width: none !important;
//     width: auto !important;
// }

.goto-content {
    background: rgba(red(@text_color),green(@text_color),blue(@text_color),0.75);
    border-radius: 50%;
    bottom: 4rem;
    display: inline-block;
    height: 35px;
    left: 0;
    opacity: 0;
    margin: 0 auto;
    position: absolute;
    right: 0;
    text-align: center;
    width: 35px;
    z-index: 98;
    webkit-animation: fade_move_down 2s ease-in-out infinite 2s;
    -moz-animation: fade_move_down 2s ease-in-out infinite 2s;
    animation: fade_move_down 2s ease-in-out infinite 2s;
    @media (max-width: @xlarge_breakpoint) {
        height: 25px;
        width: 25px;
    }
    .arrow {
        border: solid white;
        border-width: 0 3px 3px 0;
        display: inline-block;
        margin-top: 12px;
        padding: 3px;
        transform: rotate(45deg);
        -webkit-transform: rotate(45deg);
        @media (max-width: @xlarge_breakpoint) {
            border-width: 0 2px 2px 0;
            margin-top: 8px;
        }
    }
}


.home {
    .image-wrapper {
        @media (min-width: @xlarge_breakpoint) {
            min-height: 100vh;
        }
        .logo {
            padding: 15rem 0 10rem;
            @media (max-width: @large_breakpoint) {
                padding: 20rem 0 10rem;
            }
            @media (max-width: @medium_breakpoint) {
                padding: 15rem 0 13rem;
            }
        }
        .header_image {
            background-size: contain;
            background-position: 50% 50%;
            @media (max-width: @xxlarge_breakpoint) {
                background-size: 130%;
            }
            @media (max-width: @large_breakpoint) {
                background-size: 170%;
            }
        }
    }
}

#header {
    position: relative;
}

.image-wrapper {
    align-items: center;
    // min-height: 55vh;
    position: relative;
    text-align: center;
    justify-content: center;
    .flex();
    .logo {
        display: inline-block;
        opacity: 0;
        padding: 15rem 0 8rem;
        animation-name: fadeIn;
        animation-duration: 1.5s;
        animation-delay: 300ms; /* Wartet 1 Sekunde vor dem Start */
        animation-fill-mode: forwards; /* Bleibt im Endzustand */
        @media (max-width: @xxlarge_breakpoint) {
            padding: 13rem 0 8rem;
        }
        @media (max-width: @large_breakpoint) {
            padding: 10rem 0 4rem;
        }
        img {
            max-width: 60%;
            @media (max-width: @xxlarge_breakpoint) {
                max-width: 50%;
            }
            @media (max-width: @large_breakpoint) {
                max-width: 40%;
            }
            @media (max-width: @medium_breakpoint) {
                max-width: 45%;
            }
        }
    }
    .header_image {
        background-size: 100%;
        background-repeat: no-repeat;
        background-position: 50% 100%;
        bottom: 0;
        left: 0;
        min-height: 100%;
        position: absolute;
        right: 0;
        @media (max-width: @xxlarge_breakpoint) {
            background-size: 120%;
        }
        @media (max-width: @xlarge_breakpoint) {
            background-position: 50% 60%;
            background-size: 130%;
        }
    }
}

.highlighted-section {
    .highlighted-section-inner {
        background: @main_color;
        border-radius: 20px;
        max-width: 90%;
        padding: 10rem 30rem 10rem 2rem!important;
        position: relative;
        z-index: 1;
        @media (max-width: @xlarge_breakpoint) {
            max-width: 95%;
            padding: 8rem 15rem 8rem 2rem!important;
        }
        @media (max-width: @large_breakpoint) {
            padding: 6rem 2rem 6rem 2rem!important;
        }
        &:after {
            background-image: url('../images/Slice5.png');
            background-position: 50% 100%;
            background-repeat: no-repeat;
            background-size: contain;
            bottom: 0;
            content: '';
            height: 460px;
            right: -5%;
            position: absolute;
            width: 250px;
            @media (max-width: @xlarge_breakpoint) {
                height: 420px;
                right: -15%;
            }
            @media (max-width: @large_breakpoint) {
                height: 280px;
                right: -20%;
            }
            @media (max-width: @medium_breakpoint) {
                height: 150px;
                right: -30%;
            }
        }
        &:before {
            background: @main_color;
            bottom: 0;
            content: '';
            display: block;
            left: -80%;
            height: 100%;
            position: absolute;
            top: 0;
            width: 100%;
            z-index: -1;
        }
        a {
            display: inline-block;
            position: relative;
            z-index: 5;
        }
    }
}

.intro {
    p {
        margin-left: auto!important;
        margin-right: auto!important;
        max-width: 680px;
    }
}

.right-overlay {
    margin-left: -50px;
    @media (max-width: @large_breakpoint) {
        margin-left: 0px;
    }

    &.background {
        position: relative;
        z-index: -1;
    }
}

.about-me {
    padding: 0 2rem!important;
    @media (max-width: @large_breakpoint) {
        padding: 0 1.5rem!important;
        .portrait {
            max-width: 70%;
            text-align: center;
        }
    }
    .right {
        margin-left: -50px;
        @media (max-width: @large_breakpoint) {
            margin-left: 0px;
            margin-top: -60px;
        }
        picture {
            text-align: center;
        }
    }

}

// .contact {
    .contact-inner {
        background: @body_bg_color_light;
        border-radius: 20px;
        margin-left: 1rem!important;
        // max-width: 95%;
        padding: 5rem 0 5rem 4rem!important;
        position: relative;
        z-index: 1;
        // @media (max-width: @xxlarge_breakpoint) {
        //     max-width: 95%;
        // }
        @media (max-width: @xxlarge_breakpoint) {
            padding: 5rem 0 5rem 1.5rem!important;
        }
        @media (max-width: @large_breakpoint) {
            padding: 5rem 1rem 5rem 1rem!important;
        }
        &:before {
            background-image: url('../images/Slice6.png');
            background-position: 50% 100%;
            background-repeat: no-repeat;
            background-size: contain;
            bottom: 12%;
            content: '';
            height: 460px;
            left: -16.5%;
            position: absolute;
            width: 250px;
            z-index: 1;
            @media (max-width: @xxlarge_breakpoint) {
                bottom: 0;
            }
            @media (max-width: @xlarge_breakpoint) {
                left: -11%;
                height: 300px;
            }
            @media (max-width: @large_breakpoint) {
                left: 50%;
            }
        }
        &:after {
            background: @body_bg_color_light;
            bottom: 0;
            content: '';
            display: block;
            right: -80%;
            height: 100%;
            position: absolute;
            top: 0;
            width: 100%;
            z-index: -1;
        }

        a {
            text-decoration: underline!important;
            &:hover {
                text-decoration: none!important;
            }
        }

        > div {
            align-items: center;
        }

        .contact-icon {
            @media (max-width: @large_breakpoint) {
                .brz-css-ttj4td, .brz-css-1bsws2, .contact-icon {
                    flex: 1 1 16%!important;
                    max-width: 16%!important;
                }
                .brz-css-pd5kl3, .brz-css-f7p6rq, .contact-text {
                    flex: 1 1 84%!important;
                    max-width: 84%!important;
                }
            }
        }
    }
// }

.footer {
    a {
        display: inline-block;
        text-decoration: underline!important;
        &:hover {
            text-decoration: none!important;
        }
    }
    .footer-logo {
        margin: 0 0 2rem;
        text-align: center;
    }
}



// 404
// ----------------------------------------

.error404 {
    #header {
        .logo {
            left: auto;
            margin: 50px 0 0;
            position: relative;
            text-align: center;
            top: auto;
        }
    }

    .errorpage {

        .highlighted-section {
            margin: 15rem auto 4rem;
            text-align: center;
            .kc_button, .button {
                display: inline-block;
                margin: 2rem auto 0!important;
            }
        }
    }
}


// Cookie Banner
// ----------------------------------------
#cookie_banner {
    background: rgba(red(@default_border_color),green(@default_border_color),blue(@default_border_color),0.9);
    bottom: 0;
    font-size: 80%;
    left: 0;
    opacity: 0;
    padding: 1rem;
    position: fixed;
    right: 0;
    text-align: center;
    visibility: hidden;
    z-index: 5;
    .transition(all 500ms);
    &.show {
        opacity: 1;
        visibility: visible;
        .transition(all 500ms);
    }
    a {
        text-decoration: underline;
    }
}