/*
Theme Name: betriebssicher
Author: Damaro
Description: The7 is perfectly scalable, performance and SEO optimized, responsive, retina ready multipurpose WordPress theme. It will fit every site – big or small. From huge corporate portals to studio or personal sites – The7 will become a great foundation for your next project!
Version: 1.0.0
License: This WordPress theme is comprised of two parts: (1) The PHP code and integrated HTML are licensed under the GPL license as is WordPress itself.  You will find a copy of the license text in the same directory as this text file. Or you can read it here: http://wordpress.org/about/gpl/ (2) All other parts of the theme including, but not limited to the CSS code, images, and design are licensed according to the license purchased. Read about licensing details here: http://themeforest.net/licenses/regular_extended
Template: dt-the7
*/

/* =========================================
   BETRIEBSSICHER PRELOADER
========================================= */

#bs-preloader {
    position: fixed;
    inset: 0;
    z-index: 99999;

    display: flex;
    align-items: center;
    justify-content: center;

    background: white;

    opacity: 1;
    visibility: visible;

    transition:
        opacity .5s ease,
        visibility .5s ease;
}

#bs-preloader.loaded {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}


/* =========================================
   LOGO WRAPPER
========================================= */

.bs-preloader-logo {
    width: 360px;
    max-width: 80vw;
}

.bs-preloader-logo svg {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
}


/* =========================================
   AUSGANGSZUSTÄNDE
========================================= */

/* Zahnrad */
#gear {
    transform-box: fill-box;
    transform-origin: center;

    opacity: 0;

    animation:
        bsGearIn .85s cubic-bezier(.22,.8,.3,1) forwards;
}


/* Blauer Kreis + ausgestanzter Haken */
#check-circle {
    transform-box: fill-box;
    transform-origin: center;

    opacity: 0;

    animation:
        bsCheckIn .55s cubic-bezier(.25,1.25,.5,1)
        .50s forwards;
}


/* Gesamtes Icon fährt später nach oben */
#logo-icon {
    transform-box: fill-box;
    transform-origin: center;

    transform: translateY(190px);

    animation:
        bsIconUp .7s cubic-bezier(.22,.8,.3,1)
        1.15s forwards;
}


/* Wortmarke zunächst ausblenden */
#word-betriebs,
#word-sicher {
    transform-box: fill-box;
    transform-origin: center;

    opacity: 0;
    transform: translateY(35px);

    animation:
        bsWordIn .65s cubic-bezier(.22,.8,.3,1)
        1.28s forwards;
}


/* Claim kommt zuletzt */
#claim {
    transform-box: fill-box;
    transform-origin: center;

    opacity: 0;
    transform: translateY(20px);

    animation:
        bsClaimIn .55s ease
        1.65s forwards;
}


/* =========================================
   ANIMATIONEN
========================================= */

@keyframes bsGearIn {

    0% {
        opacity: 0;
        transform: rotate(-28deg) scale(.88);
    }

    100% {
        opacity: 1;
        transform: rotate(0deg) scale(1);
    }

}


@keyframes bsCheckIn {

    0% {
        opacity: 0;
        transform: scale(.35);
    }

    72% {
        opacity: 1;
        transform: scale(1.09);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }

}


@keyframes bsIconUp {

    from {
        transform: translateY(190px);
    }

    to {
        transform: translateY(0);
    }

}


@keyframes bsWordIn {

    0% {
        opacity: 0;
        transform: translateY(35px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }

}


@keyframes bsClaimIn {

    0% {
        opacity: 0;
        transform: translateY(20px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }

}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 767px) {

    .bs-preloader-logo {
        width: 280px;
        max-width: 82vw;
    }

}


/* =========================================
   REDUCED MOTION
========================================= */

@media (prefers-reduced-motion: reduce) {

    #gear,
    #check-circle,
    #logo-icon,
    #word-betriebs,
    #word-sicher,
    #claim {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }

}

html.bs-preloader-skip #bs-preloader {
    display: none !important;
}

h2 > span, h3 > span {
	hyphens: auto !important;
}


/*KONTAKT HERVORHEBEN*/

/* Letzten Top-Level-Menüpunkt als CTA stylen */
header .dt-nav-menu-horizontal > li:last-child > a, header .dt-nav-menu > li:last-child > a, .dt-sub-menu-display-on_click .dt-nav-menu > li:last-child > a {
	color: var(--the7-btn-color);
    background: var(--the7-btn-bg, transparent linear-gradient(135deg, #1ebbf0 30%, #39dfaa 100%));
    border-radius: 3px;
    padding: 10px 24px !important;
    transition: all .45s ease;
}
.dt-nav-menu > li:last-child > a, .dt-sub-menu-display-on_click .dt-nav-menu > li:last-child > a {
	margin-right: 20px;
}

/* Text weiß */
header .dt-nav-menu-horizontal > li:last-child > a .menu-text, header .dt-nav-menu > li:last-child > a .menu-text, .dt-sub-menu-display-on_click .dt-nav-menu > li:last-child > a .menu-text {
    color: #fff !important;
}

/* Hover */
header .dt-nav-menu-horizontal > li:last-child > a:hover, header .dt-nav-menu > li:last-child > a:hover, .dt-sub-menu-display-on_click .dt-nav-menu > li:last-child > a:hover {
   	background: var(--the7-btn-hover-bg);
}

/* Pfeil ausblenden */
header .dt-nav-menu-horizontal > li:last-child > a .submenu-indicator, header .dt-nav-menu > li:last-child > a .submenu-indicator, .dt-sub-menu-display-on_click .dt-nav-menu > li:last-child > a .submenu-indicator {
    display: none !important;
}

#bs-preloader.loaded {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}