/*
================================================================================

Theme Name:     Unternehmer evoLution

Author:         WELCOME Marketing
Author URI:     http://www.welcome-ag.de

Version:        1.0

Date created:	08/08/2024 DH
Major update: 	12.12.2024 MU
Last modified:	26/03/2025

================================================================================
*/




/*============================================================================*/
/* ----- GENERAL ----- */
/*============================================================================*/

* {
    margin: 0;
    padding: 0;
}

html {
    height: 100%;
    overflow-x: hidden;
    scroll-behavior: smooth;
    scroll-padding-top: 100px; /* for fixed headers */
}

body {
    padding: 0;
    height: 100%;
    margin: 0px auto;
    background: #0A0C25;

    color: #FFF;
    font-size: clamp(.8rem, 1.333vw + 0.5rem, 1.2rem); /* 24-16 PX */
    font-weight: 400;
    line-height: 1.5;
    font-family: "Open Sans", sans-serif !important;
}

.colors {
    color: #0A0C25;
    color: #101338;
    color: #2A2450;
    color: #83B7FF;
    color: #F48404;
    color: #FFF;
    color: #000;
}

.copyright{position:absolute;top:20px;right:-20px;color:#fff;font-size:1.5em;}


/*============================================================================*/
/* ----- FONT ----- */
/*============================================================================*/

/* open-sans-300 - latin */
@font-face {
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
font-family: 'Open Sans';
font-style: normal;
font-weight: 300;
src: url('../fonts/open-sans-v40-latin-300.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* open-sans-300italic - latin */
@font-face {
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
font-family: 'Open Sans';
font-style: italic;
font-weight: 300;
src: url('../fonts/open-sans-v40-latin-300italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* open-sans-regular - latin */
@font-face {
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
src: url('../fonts/open-sans-v40-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* open-sans-italic - latin */
@font-face {
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
font-family: 'Open Sans';
font-style: italic;
font-weight: 400;
src: url('../fonts/open-sans-v40-latin-italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* open-sans-700 - latin */
@font-face {
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
font-family: 'Open Sans';
font-style: normal;
font-weight: 700;
src: url('../fonts/open-sans-v40-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* open-sans-700italic - latin */
@font-face {
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
font-family: 'Open Sans';
font-style: italic;
font-weight: 700;
src: url('../fonts/open-sans-v40-latin-700italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}



/*============================================================================*/
/* ----- TEXT ----- */
/*============================================================================*/


h1, h2 {
    color: #F48404;
    font-size: clamp(1.8rem, 4.26vw + -0.675rem, 2.825rem); /* 74-34 PX */
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 2px;
    text-transform: uppercase;

    margin: 1.25rem 0 1.25rem 0;
}


h3, .subline {
    color: #FFF;
    font-size: clamp(.8rem, 1.8vw + 0.15rem, 1.8rem); /* 34-20 PX */
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: clamp(0.125rem, 0.667vw + -0.125rem, 0.375rem);
    text-transform: uppercase;

    margin: 1.25rem 0 1.25rem 0;
}


.subline {
    color: #83B7FF;
}


h4, h5, h6 {
    color: #FFF;
    font-size: clamp(.8rem, 1.33vw + 0.25rem, 1.25rem); /* 26-16 PX */
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 2px;
    text-transform: uppercase;

    margin: 1.25rem 0 1.25rem 0;
}


sup, sub {
    line-height: 0;
}


small {
    font-size: 65%;
    line-height: 0;
}

p {margin: 2.5rem 0 2.5rem 0;}


b,strong {font-weight: 700;}


::selection {background: #83B7FF; color: #FFF;}
::-moz-selection { background: #83B7FF; color: #FFF;}


main a {color: #83B7FF; text-decoration: none;}
main a:hover {color: #83B7FF; text-decoration: none;}


main ul {
    list-style: disc;
    font-weight: 700;
    letter-spacing: 2px;

    font-size: clamp(0.675rem, 0.467vw + 0.525rem, 1rem);
    margin: 2.5rem 0 2.5rem 0;
}

    main li {
        margin: 0 0 .25rem 1.25rem;
    }


a.button {
    cursor: pointer;
    background: #F48404;
    border-radius: 25px;
    display: inline-block;
    transition: all ease 0.4s;
    margin: 1.25rem 0 1.25rem 0;

    padding-top: clamp(0.425rem, 1.367vw + 0rem, 1rem);
    padding-bottom: clamp(0.425rem, 1.367vw + 0rem, 1rem);
    padding-left: clamp(1rem, 2.333vw + 0rem, 2rem);
    padding-right: clamp(1rem, 2.333vw + 0rem, 2rem);

    color: #FFF;
    font-weight: 700;
    letter-spacing: clamp(0.063rem, 0.5vw + -0.125rem, 0.25rem);
    text-transform: uppercase;
}

a.button:hover {
    background: #83B7FF;

    color: #FFF;
    text-decoration: none;
}

a.button2 {
    cursor: pointer;
    background: #F48404;
    border-radius: 25px;
    display: inline-block;
    transition: all ease 0.4s;
    margin: 1.25rem 0 1.25rem 0;

    padding-top: clamp(0.225rem, 1vw + 0rem, .8rem);
    padding-bottom: clamp(0.225rem, 1vw + 0rem, .8rem);
    padding-left: clamp(.8rem, 1.333vw + 0rem, 1rem);
    padding-right: clamp(.8rem, 1.333vw + 0rem, 1rem);

    color: #FFF;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
}

a.button2:hover {
    background: #83B7FF;

    color: #FFF;
    text-decoration: none;
}

.alignright {
    text-align: right;
    margin-right: auto;
}


/*============================================================================*/
/* ----- TEMPLATE ----- */
/*============================================================================*/

/* ---------- HEADER ---------- */

header {
    position: relative;
    top: 0;
    z-index: 10;
    width: 100%;
    height: auto;
    margin: 0 auto;
    max-width: 1920px;
    background: #101338;
    padding-top: clamp(2.5rem, 8.333vw + -0.625rem, 5.625rem);
    padding-bottom: clamp(2.5rem, 3.333vw + 1.25rem, 3.75rem);

    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

    #logo {
		position: relative;
        width: 100%;
        height: auto;
        max-width: clamp(15.625rem, 58.333vw + -6.25rem, 37.5rem);
        margin: 0 0 0 6%;
    }

        #logo img {
            width: 100%;
            height: auto;
            display: block;
        }


/* ---------- MAIN CONTENT ---------- */

main {
    position: relative;
    width: 100%;
    height: auto;
    margin: 0 auto;
    max-width: 1920px;
    overflow: hidden;
}



    section {
        position: relative;
        width: 100%;
        height: auto;
    }

    .teaser-group{display:flex;flex-direction:row;}
    .teaser, .teaser2{background-color:#2b2451;border-radius:10px;padding:.6em 2em;max-width:300px;}
    .teaser2{margin-left:25px;}
    .teaser h3, .teaser2 h3{color: #F48404;}
    /* Backgrounds */
    .bg-dark-blue {
        background: #101338;
    }

    .bg-orange {
        background: #F48404;
    }

        article {
            width: 88%;
            margin: 0 auto;

      /*      animation-name: starting;
            animation-duration: 1.2s;
            animation-iteration-count: 1;
            animation-direction: alternate;
            animation-timing-function: ease-in-out;
            animation-fill-mode: forwards;

      */
        }

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

        .is-flex {
            display: flex;
            flex-wrap: wrap;
            align-items: flex-start;
            flex-direction: row;
            justify-content: space-between;
        }

            .media-text {
                width: 100%;

                display: flex;
                flex-wrap: wrap;
                align-items: center;
                flex-direction: row;
                justify-content: space-between;
            }

                .media-text img {
                    width: 100%;
                    height: auto;
                    display: block;
                }

                .round-text {
                    width: calc(60% - 20rem);
                    margin-right: -15%;
                    border-radius: 100%;
                    padding: 10rem;
                    background: #2A2450;
                }


            .topic {
                width: 26%
            }

                .topic-icon {
                    width: clamp(4rem, 10.667vw + 0rem, 8rem) /* 128-64 PX */;
                    height: auto;
                    margin-top: -132px;
                }

                .topic-title {
                    color: #FFF;
                    font-size: clamp(1.2rem, 1.467vw + 0.675rem, 1.8rem); /* 34-24 PX */
                    font-weight: 700;
                    line-height: 1.3;
                    letter-spacing: clamp(0.125rem, 0.667vw + -0.125rem, 0.375rem);
                    text-transform: uppercase;

                    margin: 1.25rem 0 1.25rem 0;
                }

            .topic-desc {
                width: 70%;
            }

/* ---------- FOOTER ---------- */

footer {
    position: relative;
    width: 100%;
    height: auto;
    color: #F48404;
    background: #101338;
    text-transform: uppercase;
    font-size: clamp(.8rem, 2vw + 0.1rem, 1.6rem);
    letter-spacing: clamp(0.125rem, 0.667vw + -0.125rem, 0.375rem);
}

    nav#footer-menu {
        width: 88%;
        margin: 0 auto;
        max-width: 1920px;
        padding-top: clamp(3.75rem, 23.333vw + -5rem, 12.5rem);
        padding-bottom: clamp(2.5rem, 6.667vw + 0rem, 5rem);
    }

        nav#footer-menu a {
            color: #F48404;
            text-decoration: none;
        }

        nav#footer-menu a:hover {
            text-decoration: underline;
        }


/*############################################################################*/
/* ----- BREAKPOINT @ 1200 Pixel ----- */
/*############################################################################*/

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

.topic {
    width: 100%;
    margin: 2.5rem 0 0 0;
}

.topic-icon {
    margin-top: 0;
}

.topic-title {
    width: 100%;
}

.topic-desc {
    width: 100%;
}

.round-text {
    width: 100%;
    margin: 0;
    padding: 2.5rem;
    border-radius: 60px;
}

} /* <--- END OF BREAKPOINT */



/*############################################################################*/
/* ----- BREAKPOINT @ 1280 Pixel ----- */
/*############################################################################*/

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

.media-text > div {
    width: 100% !important;
    margin: 0 !important;
}

.teaser-group{display:flex;flex-direction:row;}
.teaser2{margin-left:25px;margin-top:0px;}
.teaser, .teaser2{max-width:45%;}
.teaser p, .teaser2 p {
    margin: .8rem 0 .8rem 0;
}

} /* <--- END OF BREAKPOINT */



/*############################################################################*/
/* ----- BREAKPOINT @ 600 Pixel ----- */
/*############################################################################*/

@media only screen and (max-width: 600px) {
.teaser-group{display:flex;flex-direction:column;}
.teaser2{margin-left:0px;margin-top:25px;}
.teaser, .teaser2{max-width:100%;}
.teaser p, .teaser2 p {
    margin: .5rem 0 .5rem 0;
}

} /* <--- END OF BREAKPOINT */