/**
Theme Name: Astra Child Theme
Author: Brainstorm Force
Author URI: http://wpastra.com/about/
Description: Astra is the fastest, fully customizable & beautiful theme suitable for blogs, personal portfolios and business websites. It is very lightweight (less than 50KB on frontend) and offers unparalleled speed. Built with SEO in mind, Astra comes with schema.org code integrated so search engines will love your site. Astra offers plenty of sidebar options and widget areas giving you a full control for customizations. Furthermore, we have included special features and templates so feel free to choose any of your favorite page builder plugin to create pages flexibly. Some of the other features: # WooCommerce Ready # Responsive # Compatible with major plugins # Translation Ready # Extendible with premium addons # Regularly updated # Designed, Developed, Maintained & Supported by Brainstorm Force. Looking for a perfect base theme? Look no further. Astra is fast, fully customizable and beautiful theme!
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: astra-child-theme
Template: astra
*/



/* WPML Footer
****************************************************/
.otgs-development-site-front-end {
	display: none !important;
}

/* Counter
****************************************************/
.custom-counter .elementor-counter-number-wrapper {
    margin-bottom: 50px;
}


/* Anpassungen Header USPs
****************************************************/

.header-icon-list .elementor-icon-list-items .elementor-icon-list-item * {
    line-height: 32px !important;
    margin-bottom: 10px !important;
}

/* Anpassungen Element Dienstleistungen
****************************************************/

.dienstleistung-inner-special {
    min-height: 450px !important
}

.dienstleistung-special {
    transition: transform 500ms ease-in-out;
    margin: 15px;
    min-height: 450px !important;
}

.dienstleistung-special:hover {
    transform: scale(1.05);
}

@media screen and (min-width: 1025px) {

    .dienstleistung-inner-special {
        min-height: 350px !important;
    }

    .dienstleistung-special {
        min-height: 350px !important;
    }
}

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

    .dienstleistung-inner-special {
        min-height: 450px !important;
    }

    .dienstleistung-special {
        min-height: 450px !important;
        margin-left: -15px !important;
        left: 15px;
    }
}

.dienstleistung-inner {
    min-height: 350px !important;
}

.dienstleistung {
    transition: transform 500ms ease-in-out;
    margin: 15px;
    min-height: 350px !important;
}

.dienstleistung:hover {
    transform: scale(1.05);
}

.dienstleistung-button {
    position: absolute;
    bottom: 0;
    left: 0;
    margin-bottom: 33px;
    margin-right: 33px;
    text-align: center;
    padding: 0px 10px 0px 10px;
}

.dienstleistung-text {
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    margin: auto;
    left: 0;
    top: 42%;
    transform: translate(0, -50%);
    padding: 120px 33px 33px 33px !important;
    text-align: center !important;
}

@media screen and (max-width: 455px) {
    .dienstleistung-inner {
        min-height: 400px !important;
    }

    .dienstleistung {
        margin: 15px;
        min-height: 400px !important;
    }

    .dienstleistung-text {
        padding: 120px 20px 20px 20px !important;
    }

    .elementor-button {
        font-size: 12px !important;
    }
}

@media screen and (max-width: 320px) {
    .dienstleistung-inner {
        min-height: 400px !important;
    }

    .dienstleistung {
        margin: 0px;
        min-height: 400px !important;
    }

    .dienstleistung-text {
        padding: 120px 20px 20px 20px !important;
    }
}

/* 
****************************************************/

.list-hover .elementor-icon-list-text:hover {
    color: #916700 !important;
}

.darkmode--activated :is(.list-hover:hover) {
    color: #916700 !important;
}

.darkmode--activated .wpcf7-response-output {
	color: #fff;
}

/* Mobilanpassungen
****************************************************
@media only screen and (max-width: 480px) {
	.header-icon-list.elementor-widget .elementor-icon-list-item,
	.header-icon-list.elementor-widget .elementor-icon-list-item a {
		align-items: start;
	}
	
	.header-icon-list.elementor-widget .elementor-icon-list-item .elementor-icon-list-icon {
		position: relative;
		top: 5px;
	}
}

@media only screen and (max-width: 986px) {
	.header-icon-list.elementor-widget .elementor-icon-list-item,
	.header-icon-list.elementor-widget .elementor-icon-list-item a {
		align-items: start;
	}
	
	.header-icon-list.elementor-widget .elementor-icon-list-item .elementor-icon-list-icon {
		position: relative;
		top: 20px;
	}
}

@media only screen and (max-width: 986px) {
	.header-icon-list.elementor-widget .elementor-icon-list-item,
	.header-icon-list.elementor-widget .elementor-icon-list-item a {
		align-items: start;
	}
	
	.header-icon-list.elementor-widget .elementor-icon-list-item .elementor-icon-list-icon {
		position: relative;
		top: 20px;
	}
}

/* dings
****************************************************/

#links {
    color: #FFB400;
}

#links:hover {
    color: #9c6e00;
}

/* Navigation
****************************************************/

.sub-menu {
    width: 150% !important;
}

.hfe-menu-toggle.sub-arrow.hfe-menu-child-1 i {
    padding-right: 20px !important;
}

.hfe-menu-item {
    padding-left: 20px !important;
}

/* Checkmarks
****************************************************/

.header-icon-list .elementor-icon-list-items .elementor-icon-list-item * {
    line-height: 55.7167px;
    text-align: left !important;
}

.elementor-icon-list-items .elementor-icon-list-item * {
    line-height: 27.85px;
    text-align: left !important;
}

.elementor-icon-list-items .elementor-icon-list-item .elementor-icon-list-icon {
    align-self: baseline;
}

.elementor-button-icon.elementor-align-icon-right {
    display: flex;
    align-self: center;
}

.fas.fa-arrow-circle-right {
    line-height: 25, 4px;
}

*/
/* Dark Mode Toggle
****************************************************/

.darkmode-toggle::before {
    display: none !important;
}

.darkmode-toggle::after {
    display: none !important;
}

.tp_dm_style2 .darkmode-toggle {
    right: 15px !important;
}

.darkmode-toggle .tp-dark-mode-round:before {
    content: '';
    background-image: url('/wp-content/uploads/2022/12/sun.png');
    background-size: 80%;
    background-repeat: no-repeat;
    background-position: center;
}

.darkmode-toggle.darkmode-toggle--white .tp-dark-mode-round:before {
    background-image: url('/wp-content/uploads/2023/01/moon.png') !important;
}

.tp_dm_style2 .darkmode-toggle::before {
    content: "Light";
    left: -50px;
}

.tp_dm_style2 .darkmode-toggle--white.darkmode-toggle::before {
    content: "Dark";
    left: -50px;
}

/* Dark Mode
****************************************************/

.tp-dark-mode-slider.tp-dark-mode-round {
    background-color: #FFB400 !important;
}

.darkmode-layer {
    mix-blend-mode: normal !important;
    background: transparent !important;
}

.tp_dm_style2 .darkmode-toggle:before,
.tp_dm_style2 .darkmode-toggle:after {
    color: #FFB400 !important;
}

.tp_dm_style2 .darkmode-toggle:before {
    left: -50px !important;
}

.darkmode--activated {
    --e-global-color-b63758d: #0A223F !important;
    --e-global-color-secondary: #FFF !important;
    --e-global-color-text: #FFF !important;
    --e-global-color-astglobalcolor0: #FFF !important;
    --e-global-color-b2bedf6: #32648B !important;
    --e-global-color-1988afa: #FFB400 !important;
    --ast-global-color-0: #FFB400 !important;
    --ast-global-color-1: #9c6e00 !important;

}

/* Welle oben */
.darkmode--activated :is(.elementor-element-1659057a,
    .elementor-element-46021148,
    .elementor-element-23e7f4ea,
    .elementor-element-2ee3234f,
    .elementor-element-668b31e0,
    .elementor-element-6fdd7267,
    .elementor-element-26980c57,
    .elementor-element-1c8bd24f,
    .elementor-element-752bef78,
    .elementor-element-26980c57,
    .elementor-element-6fdd7267,
    .elementor-element-5b1585a5,
    .elementor-element-6b96f4cc,
    .elementor-element-3bf7edf2,
    .elementor-element-37561589,
    .elementor-element-4c37a5aa,
    .elementor-element-193c2092,
    .elementor-element-444763b3,
    .elementor-element-221ad28c,
    .elementor-element-38bba3a3,
    .elementor-element-28e18308,
    .elementor-element-5643b84e,
    .elementor-element-2d8eeb1,
    .elementor-element-6b745c4f,
    .elementor-element-6f5ce892,
    .elementor-element-bf7591b,
    .elementor-element-d8a51a6,
    .elementor-element-1a94188,
    .elementor-element-874efa6,
    .elementor-element-3fba4620,
    .elementor-element-4bf6c1fa,
    .elementor-element-3c47132f) {
    background-image: url(/wp-content/uploads/2022/09/divider3-new-2-darkmode.svg) !important;
}

/* Welle  unten */
.darkmode--activated :is(.elementor-element-4b238cc8,
    .elementor-element-3014576c,
    .elementor-element-660b0750,
    .elementor-element-792fbf1b,
    .elementor-element-570519f5,
    .elementor-element-7fd1e591,
    .elementor-element-211f39c2,
    .elementor-element-5b1585a5,
    .elementor-element-52abc6c4,
    .elementor-element-255abfd,
    .elementor-element-138acbf5,
    .elementor-element-7bd78e,
    .elementor-element-667fbc10,
    .elementor-element-3a71da99,
    .elementor-element-6456c248,
    .elementor-element-12bbbdb,
    .elementor-element-52abc6c4,
    .elementor-element-211f39c2,
    .elementor-element-2c7ab4ee,
    .elementor-element-27be5504,
    .elementor-element-78004ae8,
    .elementor-element-186d27a4,
    .elementor-element-39576417,
    .elementor-element-26df76bc,
    .elementor-element-7c5e0ffa,
    .elementor-element-51107f27,
    .elementor-element-2d7885ef,
    .elementor-element-119fba66,
    .elementor-element-20523c9f,
    .elementor-element-a589fb9,
    .elementor-element-5dc13bc0,
    .elementor-element-08c8cb0,
    .elementor-element-cc594c4,
    .elementor-element-6cc37937,
    .elementor-element-2f12fe22,
    .elementor-element-27d908ad,
    .elementor-element-645d4575,
    .elementor-element-2f8f6966,
    .elementor-element-6aadf0d3,
    .elementor-element-7baff0bd,
    .elementor-element-28569f87,
    .elementor-element-33c3e1ef,
    .elementor-element-3b8780ae,
    .elementor-element-5b5c5ecd,
    .elementor-element-5d373566,
    .elementor-element-7dfd8f2c,
    .elementor-element-158453c9,
    .elementor-element-6e290321,
    .elementor-element-148fabe,
    .elementor-element-b6699c3,
    .elementor-element-139a9cc,
    .elementor-element-710ed2b,
    .elementor-element-48fd282c,
    .elementor-element-be54a65,
    .elementor-element-56aca567,
    .elementor-element-1cc2aff,
    .elementor-element-157a642,
    .elementor-element-499faaef,
    .elementor-element-0abb6d1,
    .elementor-element-6fd507b3,
    .elementor-element-6b3b4837,
    .elementor-element-25b483a8,
    .elementor-element-6ea54c32,
    .elementor-element-611d975c,
    .elementor-element-44cb39bf,
    .elementor-element-22493288,
    .elementor-element-6dc030ee) {
    background-image: url(/wp-content/uploads/2022/09/divider2-new-darkmode.svg) !important;
}

.darkmode--activated :is(.front, .back) {
    box-shadow: 0px 10px 30px 0px rgba(66, 88, 150, 0.5) !important;
}

.darkmode--activated :is(.wpcf7 label, .pflichtfelder) {
    color: #FFF !important;
}

.darkmode--activated :is(.flip-3d figure figcaption) {
    background: rgba(255, 255, 255, 0.8);
}

.darkmode--activated :is(figcaption, figcaption p) {
    color: #0A223F !important;
}

.darkmode--activated :is(.gradient) {
    --size: 500px;
    --speed: 25s;
    --easing: cubic-bezier(0.8, 0.2, 0.2, 0.8);
    width: var(--size);
    height: var(--size);
    filter: blur(calc(var(--size) / 5));
    background-image: linear-gradient(hsla(158deg, 82%, 57%, 0.85), hsl(252deg, 82%, 57%));
    animation: rotate var(--speed) var(--easing) alternate infinite;
    border-radius: 30% 70% 70% 30%/30% 30% 70% 70%;
    opacity: 25%;
}


/*Dienstleistungen Drehen
********************************************/

.content2 {
    display: flex;
    margin: 0px;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}

.karte {
    color: inherit;
    cursor: pointer;
    width: 100%;
    min-width: 100%;
    height: 400px;
    min-height: 400px;
    perspective: 1000px;
    margin: 1rem;
    position: relative;
    border-radius: 22px;
}

.front h3 {
    color: #FFF;
    font-family: var(--e-global-typography-e9823c6-font-family), Sans-serif;
    font-size: var(--e-global-typography-e9823c6-font-size);
    font-weight: var(--e-global-typography-e9823c6-font-weight);
    text-transform: var(--e-global-typography-e9823c6-text-transform);
    line-height: var(--e-global-typography-e9823c6-line-height);
    letter-spacing: var(--e-global-typography-e9823c6-letter-spacing);
    word-spacing: var(--e-global-typography-e9823c6-word-spacing);
    text-shadow: 0px 6px 8px #000;
}

.back p.flip {
    color: #FFB400 !important;
    font-family: var(--e-global-typography-76476c9-font-family), Sans-serif;
    font-size: var(--e-global-typography-76476c9-font-size);
    font-weight: var(--e-global-typography-76476c9-font-weight);
    text-transform: var(--e-global-typography-76476c9-text-transform);
    line-height: 1.2em;
    letter-spacing: var(--e-global-typography-76476c9-letter-spacing);
    word-spacing: var(--e-global-typography-76476c9-word-spacing);
    text-align: center !important;
}

.back p {
    font-size: 15px;
    letter-spacing: 0px;
    font-family: var(--e-global-typography-9442f20-font-family), Sans-serif;
    font-size: var(--e-global-typography-9442f20-font-size);
    font-weight: var(--e-global-typography-9442f20-font-weight);
    line-height: var(--e-global-typography-9442f20-line-height);
    letter-spacing: var(--e-global-typography-9442f20-letter-spacing);
    word-spacing: var(--e-global-typography-9442f20-word-spacing);
    text-align: center !important;
}

.front,
.back {
    display: flex;
    border-radius: 22px;
    background-position: center;
    background-size: cover;
    text-align: center;
    justify-content: center;
    align-items: center;
    position: absolute;
    height: 100%;
    width: 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    transform-style: preserve-3d;
    transition: ease-in-out 600ms;
    box-shadow: 0px 0px 13px 0px rgba(66, 88, 150, 0.5) !important;
}

.front {
    background-size: cover;
    padding: 2rem;
    font-size: 11.618rem;
    font-weight: var(--e-global-typography-e9823c6-font-weight);
    overflow: hidden;
    font-family: var(--e-global-typography-e9823c6-font-family), Sans-serif;
}

.front:before {
    position: absolute;
    display: block;
    content: "";
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, #1a9be6, hsl(222deg, 80%, 50%));
    opacity: 0.25;
    z-index: -1;
}

.karte:hover .front {
    transform: rotateY(180deg);
}

.karte:nth-child(even):hover .front {
    transform: rotateY(-180deg);
}

.back {
    background: #FFF;
    transform: rotateY(-180deg);
    padding: 0 2em;
}

.back .button {
    font-family: var(--e-global-typography-acc0aae-font-family), Sans-serif;
    font-size: var(--e-global-typography-acc0aae-font-size);
    font-weight: var(--e-global-typography-acc0aae-font-weight);
    line-height: var(--e-global-typography-acc0aae-line-height);
    letter-spacing: var(--e-global-typography-acc0aae-letter-spacing);
    word-spacing: var(--e-global-typography-acc0aae-word-spacing);
    fill: #FFFFFF;
    color: #FFFFFF;
    background-color: #FFB400;
    border: 3px solid var(--e-global-color-accent) !important;
    border-radius: 40px 40px 40px 40px;
    display: inline-block;
}

.back .button:hover {
    font-family: var(--e-global-typography-acc0aae-font-family), Sans-serif;
    font-size: var(--e-global-typography-acc0aae-font-size);
    font-weight: var(--e-global-typography-acc0aae-font-weight);
    line-height: var(--e-global-typography-acc0aae-line-height);
    letter-spacing: var(--e-global-typography-acc0aae-letter-spacing);
    word-spacing: var(--e-global-typography-acc0aae-word-spacing);
    fill: #FFFFFF;
    color: #FFB400;
    background-color: #FFF;
    border: 3px solid var(--e-global-color-accent) !important;
    border-radius: 40px 40px 40px 40px;
}

.back .button:before {
    background-color: rgba(26, 87, 230, 0.25);
}

.karte:hover .back {
    transform: rotateY(0deg);
}

/*Sticky Banner
********************************************/

.sticky {
    position: fixed;
    top: 300px;
    right: -30px;
    transition: transform 500ms ease-in-out;
}

.sticky:hover {
    transform: translateX(-25px);
}

/*Kontaktformular
********************************************/


input[type=text],
input[type=tel],
input[type=email],
input[type=vorname],
input[type=nachname],
select,
textarea {
    position: relative;
    padding: 5px;
    color: #35393E;
    font-family: var(--e-global-typography-96647bb-font-family), Sans-serif;
    font-size: var(--e-global-typography-96647bb-font-size);
    font-weight: var(--e-global-typography-96647bb-font-weight);
    line-height: var(--e-global-typography-96647bb-line-height);
    letter-spacing: var(--e-global-typography-96647bb-letter-spacing);
    word-spacing: var(--e-global-typography-96647bb-word-spacing);
    background: #CDD5E1;
    border: 2px solid #FFF;
    border-radius: 22px;
    outline-color: #0170B9;
    resize: none;
}

.wpcf7 p {
    margin-bottom: -5px !important;
    margin-top: 10px !important;
}

.shadow {
    -moz-box-shadow: inset 0 0 10px rgba(68, 68, 68, 0.3) !important;
    -webkit-box-shadow: inset 0 0 10px rgba(68, 68, 68, 0.3) !important;
    box-shadow: inset 0 0 10px rgba(68, 68, 68, 0.3) !important;
}

.test span {
    color: #FFB400;
    margin-left: 1px;
}

.wpcf7-list-item {
    display: inline-block;
    margin: 0em;
}

.wpcf7 label {
    color: var(--e-global-color-accent);
    font-family: var(--e-global-typography-96647bb-font-family), Sans-serif;
    font-size: var(--e-global-typography-96647bb-font-size);
    font-weight: var(--e-global-typography-96647bb-font-weight);
    line-height: var(--e-global-typography-96647bb-line-height);
    letter-spacing: var(--e-global-typography-96647bb-letter-spacing);
    word-spacing: var(--e-global-typography-96647bb-word-spacing);
    position: relative;
    /* padding: 5px;*/
}

/* Hinweise */

.wpcf7-not-valid-tip {
    padding-top: 5px;
    font-size: 15px;
    letter-spacing: 0px;
    font-family: var(--e-global-typography-9442f20-font-family), Sans-serif;
    font-size: var(--e-global-typography-9442f20-font-size);
    font-weight: var(--e-global-typography-9442f20-font-weight);
    line-height: var(--e-global-typography-9442f20-line-height);
    letter-spacing: var(--e-global-typography-9442f20-letter-spacing);
    word-spacing: var(--e-global-typography-9442f20-word-spacing);
}

/* Absenden-Nachricht */

.wpcf7 form .wpcf7-response-output {
    font-family: var(--e-global-typography-9442f20-font-family), Sans-serif;
    font-weight: var(--e-global-typography-accent-font-weight);
    font-size: var(--e-global-typography-96647bb-font-size);
    margin: 2em 0.5em 1em;
    padding: 0.2em 1em;
    border: 2px solid #00a0d2;
    border-radius: 22px;
}

.pflichtfelder {
    font-family: var(--e-global-typography-9442f20-font-family), Sans-serif;
    font-weight: var(--e-global-typography-96647bb-font-weight);
    font-size: var(--e-global-typography-96647bb-font-size);
    position: relative;
    /* margin-left: auto;*/
}

.wpcf7-acceptance label {
    font-family: var(--e-global-typography-9442f20-font-family), Sans-serif;
    font-weight: var(--e-global-typography-96647bb-font-weight);
    font-size: var(--e-global-typography-96647bb-font-size);
    position: relative;
    cursor: pointer;
    padding: 5px;
    color: #FFB400 !important;
}

/* Datenschutzerklärung + Checkbox */

.wpcf7-acceptance input[type=checkbox] {
    position: relative;
    visibility: hidden;
    width: 30px;
    height: 30px;
    top: 0;
    left: 0;
}

.wpcf7-acceptance input[type=checkbox]+span:before {
    display: block;
    position: absolute;
    content: '';
    border-radius: 0;
    height: 30px;
    width: 30px;
    top: 0px;
    left: 0px;
    border: 2px solid #FFB400;
    border-radius: 22px;
}

.wpcf7-acceptance input[type=checkbox]+span:after {
    display: block;
    position: absolute;
    content: "\2713";
    height: 30px;
    width: 30px;
    top: 0;
    left: 0;
    visibility: hidden;
    font-size: 18px;
    text-align: center;
    line-height: 30px;
}

.wpcf7-acceptance input[type=checkbox]:checked+span:before {
    background: transparent;
}

.wpcf7-acceptance input[type=checkbox]:checked+span:after {
    visibility: visible;
}

/* Sonstiges */

.contact-form {
    margin-top: -4% !important;
}

.feld:focus {
    background: #FFF !important;
    border: 2px solid #0170B9 !important;
    border-radius: 22px !important;
    outline-color: #0170B9 !important;
}

.contact-form {
    padding: 0em !important;
    margin: 0em !important;
}

.contact-form span {
    color: #FFB400;
}

.absenden,
.submit {
    font-family: var(--e-global-typography-acc0aae-font-family), Sans-serif !important;
    font-size: var(--e-global-typography-acc0aae-font-size) !important;
    font-weight: var(--e-global-typography-acc0aae-font-weight) !important;
    line-height: var(--e-global-typography-acc0aae-line-height);
    letter-spacing: var(--e-global-typography-acc0aae-letter-spacing);
    word-spacing: var(--e-global-typography-acc0aae-word-spacing);
    color: #fff !important;
    background: #FFB400 !important;
    width: 220px !important;
    height: 50px !important;
    border: 0 !important;
    border-radius: 50px !important;
    text-align: center !important;
    padding: 0px !important;
    margin-top: 20px !important;
}

.absenden,
.submit  {
    align-self: center !important;
    justify-self: end !important;
}

.absenden:hover,
.absenden:focus,
.submit:hover,
.submit:focus  {
    background: #FFF !important;
    color: #FFB400 !important;
    border: 3px solid var(--e-global-color-accent) !important;
    outline: 0 !important;
    transition: background-color 0.3s ease-out !important;
    margin-top: 20px !important;
}

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

    .absenden,
	.submit {
        font-size: 12px !important;
    }

    .absenden:hover,
	.submit:hover {
        font-size: 12px !important;
    }
}


/* Box Offset
***********************************************************/
.box-offset {
    min-height: 480px;
}

.box-offset .elementor-container {
    position: relative;
}

.box-offset .elementor-container .left-box {
    left: 5%;
}

.box-offset .elementor-container .right-box {
    right: 5%;
}


/* Logo Tilt
********************************************/

.logo {
    position: relative;
    height: 200px;
    width: 300px;
    border-radius: 22px;
    transform-style: preserve-3d;
}



.logo .logo-bg {
    position: relative;
    z-index: -1;
    top: 0;
    left: 0;
    height: 200px;
    width: 250px;
    background: url('/wp-content/uploads/2022/08/nsb-logo-light-grey.png');
    background-color: #FFF;
    background-size: cover;
    background-position: center;
    border-radius: 22px;
    box-shadow: 0px 10px 30px 0px rgba(66, 88, 150, 0.5);
}


/* Picture-Flip
********************************************/

figcaption {
    font-family: var(--e-global-typography-acc0aae-font-family), Sans-serif;
    font-weight: var(--e-global-typography-96647bb-font-weight);
    font-size: var(--e-global-typography-76476c9-font-size);
    color: #fff;
}

figcaption p {
    font-family: var(--e-global-typography-acc0aae-font-family), Sans-serif;
    font-weight: var(--e-global-typography-9442f20-font-weight);
    font-size: 15px;
    color: #fff;
}

* {
    box-sizing: border-box;
}

.flip-3d {
    perspective: 1200px;
    width: 100%;
    display: inline-block;
    margin: 2%;
}

.flip-3d figure {
    position: relative;
    transform-style: preserve-3d;
    transition: .75s transform;
    font-size: 1.6rem;
}

.flip-3d figure img {
    width: 100%;
    height: 100%;
    border-radius: 22px;
    box-shadow: 0px 10px 30px 0px rgba(66, 88, 150, 0.5);
}

.flip-3d figure figcaption {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    border-radius: 22px;
    transform: rotateY(.5turn) translateZ(1px);
    background: rgb(1, 112, 185);
    background: linear-gradient(140deg, rgba(1, 112, 185, 0.75) 0%, rgba(0, 32, 53, 0.75) 100%);
    text-align: center;
    padding-top: 45%;
    opacity: 0.6;
    transition: .75s .5s opacity;
}

.flip-3d:hover figure {
    transform: rotateY(.5turn);
}

.flip-3d:hover figure figcaption {
    opacity: 1;
    border-radius: 22px;
}

.flip-3d:focus figure {
    transform: rotateY(.5turn);
}

.flip-3d:focus figure figcaption {
    opacity: 1;
    border-radius: 22px;
}


@media screen and (max-width: 800px) {
    div#flip-3d {
        perspective-origin: center top;
    }

    div#flip-3d figure {
        display: block;
        width: 50%;
        margin: 0 auto;
        margin-bottom: 12vw;
    }

    div#flip-3d figure:last-child {
        display: none;
    }
}

/********************************************************************************************************************************************************************************/
/********************************************************************** P A R T I K E L - E F F E K T E *************************************************************************/
/********************************************************************************************************************************************************************************/

/* Partikel Nummern
********************************************/
* {
    box-sizing: border-box;
}

.container {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    background: transparent;
    color: rgba(255, 255, 255, 0.25);
    font-family: var(--e-global-typography-e9823c6-font-family), Sans-serif;
    overflow: hidden;
}

.content {
    position: relative;
    width: 600px;
    max-width: 100%;
    margin: 20px;
    background: white;
    padding: 60px 40px;
    text-align: center;
    box-shadow: -10px 10px 67px -12px rgba(0, 0, 0, 0.2);
    opacity: 0;
    animation: apparition 0.8s 1.2s cubic-bezier(0.39, 0.575, 0.28, 0.995) forwards;
}

.content p {
    font-size: 1.3rem;
    margin-top: 0;
    margin-bottom: 0.6rem;
    letter-spacing: 0.1rem;
    color: #595959;
}

.content p:last-child {
    margin-bottom: 0;
}

.content button {
    display: inline-block;
    margin-top: 2rem;
    padding: 0.5rem 1rem;
    border: 3px solid #595959;
    background: transparent;
    font-size: 1rem;
    color: #595959;
    text-decoration: none;
    cursor: pointer;
    font-weight: bold;
}

.particle {
    position: absolute;
    display: block;
    pointer-events: none;
    -webkit-user-select: none;
    /* Safari */
    -moz-user-select: none;
    /* Firefox */
    -ms-user-select: none;
    /* IE10+/Edge */
    user-select: none;
    /* Standard */
}

.particle:nth-child(1) {
    top: 45.3760789149%;
    left: 2.9673590504%;
    font-size: 11px;
    filter: blur(0.02px);
    animation: 27s floatReverse2 infinite;
}

.particle:nth-child(2) {
    top: 45.6310679612%;
    left: 92.7734375%;
    font-size: 24px;
    filter: blur(0.04px);
    animation: 38s floatReverse2 infinite;
}

.particle:nth-child(3) {
    top: 24.3309002433%;
    left: 63.6007827789%;
    font-size: 22px;
    filter: blur(0.06px);
    animation: 38s float2 infinite;
}

.particle:nth-child(4) {
    top: 69.7788697789%;
    left: 50.2958579882%;
    font-size: 14px;
    filter: blur(0.08px);
    animation: 33s floatReverse infinite;
}

.particle:nth-child(5) {
    top: 9.768009768%;
    left: 93.2286555447%;
    font-size: 19px;
    filter: blur(0.1px);
    animation: 24s floatReverse infinite;
}

.particle:nth-child(6) {
    top: 25.0602409639%;
    left: 88.3495145631%;
    font-size: 30px;
    filter: blur(0.12px);
    animation: 28s float2 infinite;
}

.particle:nth-child(7) {
    top: 65.6862745098%;
    left: 45.2755905512%;
    font-size: 16px;
    filter: blur(0.14px);
    animation: 38s float infinite;
}

.particle:nth-child(8) {
    top: 80.8877928483%;
    left: 92.9772502473%;
    font-size: 11px;
    filter: blur(0.16px);
    animation: 39s float2 infinite;
}

.particle:nth-child(9) {
    top: 48.9596083231%;
    left: 87.5122910521%;
    font-size: 17px;
    filter: blur(0.18px);
    animation: 35s float infinite;
}

.particle:nth-child(10) {
    top: 62.5152625153%;
    left: 21.5897939156%;
    font-size: 19px;
    filter: blur(0.2px);
    animation: 34s float2 infinite;
}

.particle:nth-child(11) {
    top: 53.4629404617%;
    left: 32.2580645161%;
    font-size: 23px;
    filter: blur(0.22px);
    animation: 38s float infinite;
}

.particle:nth-child(12) {
    top: 14.5278450363%;
    left: 50.6822612086%;
    font-size: 26px;
    filter: blur(0.24px);
    animation: 39s float2 infinite;
}

.particle:nth-child(13) {
    top: 34.8668280872%;
    left: 8.7719298246%;
    font-size: 26px;
    filter: blur(0.26px);
    animation: 40s floatReverse2 infinite;
}

.particle:nth-child(14) {
    top: 41.3793103448%;
    left: 38.5375494071%;
    font-size: 12px;
    filter: blur(0.28px);
    animation: 37s floatReverse infinite;
}

.particle:nth-child(15) {
    top: 30.843373494%;
    left: 65.0485436893%;
    font-size: 30px;
    filter: blur(0.3px);
    animation: 25s floatReverse infinite;
}

.particle:nth-child(16) {
    top: 85.9584859585%;
    left: 61.8253189401%;
    font-size: 19px;
    filter: blur(0.32px);
    animation: 38s float infinite;
}

.particle:nth-child(17) {
    top: 34.9939246659%;
    left: 15.6402737048%;
    font-size: 23px;
    filter: blur(0.34px);
    animation: 39s float infinite;
}

.particle:nth-child(18) {
    top: 43.3734939759%;
    left: 27.1844660194%;
    font-size: 30px;
    filter: blur(0.36px);
    animation: 23s float infinite;
}

.particle:nth-child(19) {
    top: 12.6060606061%;
    left: 20.487804878%;
    font-size: 25px;
    filter: blur(0.38px);
    animation: 22s floatReverse infinite;
}

.particle:nth-child(20) {
    top: 93.6067551267%;
    left: 22.351797862%;
    font-size: 29px;
    filter: blur(0.4px);
    animation: 36s floatReverse2 infinite;
}

.particle:nth-child(21) {
    top: 67.6328502415%;
    left: 71.0116731518%;
    font-size: 28px;
    filter: blur(0.42px);
    animation: 27s floatReverse2 infinite;
}

.particle:nth-child(22) {
    top: 94.0024479804%;
    left: 68.8298918387%;
    font-size: 17px;
    filter: blur(0.44px);
    animation: 26s float infinite;
}

.particle:nth-child(23) {
    top: 21.2560386473%;
    left: 16.5369649805%;
    font-size: 28px;
    filter: blur(0.46px);
    animation: 36s floatReverse2 infinite;
}

.particle:nth-child(24) {
    top: 19.3236714976%;
    left: 80.7392996109%;
    font-size: 28px;
    filter: blur(0.48px);
    animation: 23s float2 infinite;
}

.particle:nth-child(25) {
    top: 64.2335766423%;
    left: 44.0313111546%;
    font-size: 22px;
    filter: blur(0.5px);
    animation: 25s floatReverse2 infinite;
}

.particle:nth-child(26) {
    top: 17.6039119804%;
    left: 63.8506876228%;
    font-size: 18px;
    filter: blur(0.52px);
    animation: 40s float2 infinite;
}

.particle:nth-child(27) {
    top: 90.931076179%;
    left: 63.2911392405%;
    font-size: 27px;
    filter: blur(0.54px);
    animation: 31s floatReverse infinite;
}

.particle:nth-child(28) {
    top: 89.3203883495%;
    left: 83.0078125%;
    font-size: 24px;
    filter: blur(0.56px);
    animation: 36s floatReverse2 infinite;
}

.particle:nth-child(29) {
    top: 68.2926829268%;
    left: 63.7254901961%;
    font-size: 20px;
    filter: blur(0.58px);
    animation: 35s float infinite;
}

.particle:nth-child(30) {
    top: 28.4662576687%;
    left: 30.5418719212%;
    font-size: 15px;
    filter: blur(0.6px);
    animation: 38s float2 infinite;
}

.particle:nth-child(31) {
    top: 84.1075794621%;
    left: 34.3811394892%;
    font-size: 18px;
    filter: blur(0.62px);
    animation: 35s float infinite;
}

.particle:nth-child(32) {
    top: 83.4355828221%;
    left: 82.7586206897%;
    font-size: 15px;
    filter: blur(0.64px);
    animation: 28s floatReverse2 infinite;
}

.particle:nth-child(33) {
    top: 21.3333333333%;
    left: 45.8536585366%;
    font-size: 25px;
    filter: blur(0.66px);
    animation: 27s float infinite;
}

.particle:nth-child(34) {
    top: 13.7254901961%;
    left: 93.5039370079%;
    font-size: 16px;
    filter: blur(0.68px);
    animation: 25s float infinite;
}

.particle:nth-child(35) {
    top: 38.7878787879%;
    left: 59.512195122%;
    font-size: 25px;
    filter: blur(0.7px);
    animation: 31s floatReverse infinite;
}

.particle:nth-child(36) {
    top: 57.7723378213%;
    left: 76.6961651917%;
    font-size: 17px;
    filter: blur(0.72px);
    animation: 32s float infinite;
}

.particle:nth-child(37) {
    top: 1.9728729963%;
    left: 61.3254203759%;
    font-size: 11px;
    filter: blur(0.74px);
    animation: 26s floatReverse2 infinite;
}

.particle:nth-child(38) {
    top: 31.5270935961%;
    left: 76.0869565217%;
    font-size: 12px;
    filter: blur(0.76px);
    animation: 34s floatReverse infinite;
}

.particle:nth-child(39) {
    top: 27.5522755228%;
    left: 86.8706811451%;
    font-size: 13px;
    filter: blur(0.78px);
    animation: 39s float infinite;
}

.particle:nth-child(40) {
    top: 65.3658536585%;
    left: 15.6862745098%;
    font-size: 20px;
    filter: blur(0.8px);
    animation: 35s floatReverse2 infinite;
}

.particle:nth-child(41) {
    top: 32.1167883212%;
    left: 71.4285714286%;
    font-size: 22px;
    filter: blur(0.82px);
    animation: 25s floatReverse2 infinite;
}

.particle:nth-child(42) {
    top: 59.512195122%;
    left: 68.6274509804%;
    font-size: 20px;
    filter: blur(0.84px);
    animation: 27s floatReverse infinite;
}

.particle:nth-child(43) {
    top: 69.9029126214%;
    left: 19.53125%;
    font-size: 24px;
    filter: blur(0.86px);
    animation: 22s floatReverse2 infinite;
}

.particle:nth-child(44) {
    top: 39.7575757576%;
    left: 8.7804878049%;
    font-size: 25px;
    filter: blur(0.88px);
    animation: 25s floatReverse infinite;
}

.particle:nth-child(45) {
    top: 94.5812807882%;
    left: 45.4545454545%;
    font-size: 12px;
    filter: blur(0.9px);
    animation: 33s floatReverse infinite;
}

.particle:nth-child(46) {
    top: 81.173594132%;
    left: 29.4695481336%;
    font-size: 18px;
    filter: blur(0.92px);
    animation: 24s float2 infinite;
}

.particle:nth-child(47) {
    top: 7.8720787208%;
    left: 95.7551826259%;
    font-size: 13px;
    filter: blur(0.94px);
    animation: 29s float2 infinite;
}

.particle:nth-child(48) {
    top: 51.2315270936%;
    left: 86.9565217391%;
    font-size: 12px;
    filter: blur(0.96px);
    animation: 21s floatReverse2 infinite;
}

.particle:nth-child(49) {
    top: 86.7469879518%;
    left: 58.2524271845%;
    font-size: 30px;
    filter: blur(0.98px);
    animation: 33s floatReverse infinite;
}

.particle:nth-child(50) {
    top: 10.8508014797%;
    left: 17.8041543027%;
    font-size: 11px;
    filter: blur(1px);
    animation: 32s floatReverse2 infinite;
}

.particle:nth-child(51) {
    top: 82.3244552058%;
    left: 86.7446393762%;
    font-size: 26px;
    filter: blur(1.02px);
    animation: 31s floatReverse2 infinite;
}

.particle:nth-child(52) {
    top: 65.0485436893%;
    left: 15.625%;
    font-size: 24px;
    filter: blur(1.04px);
    animation: 34s floatReverse infinite;
}

.particle:nth-child(53) {
    top: 34.9090909091%;
    left: 45.8536585366%;
    font-size: 25px;
    filter: blur(1.06px);
    animation: 30s floatReverse infinite;
}

.particle:nth-child(54) {
    top: 67.0716889429%;
    left: 0.9775171065%;
    font-size: 23px;
    filter: blur(1.08px);
    animation: 39s float infinite;
}

.particle:nth-child(55) {
    top: 92.7960927961%;
    left: 29.4406280667%;
    font-size: 19px;
    filter: blur(1.1px);
    animation: 40s floatReverse infinite;
}

.particle:nth-child(56) {
    top: 55.6776556777%;
    left: 26.4965652601%;
    font-size: 19px;
    filter: blur(1.12px);
    animation: 21s float infinite;
}

.particle:nth-child(57) {
    top: 71.8446601942%;
    left: 30.2734375%;
    font-size: 24px;
    filter: blur(1.14px);
    animation: 31s float2 infinite;
}

.particle:nth-child(58) {
    top: 25.2121212121%;
    left: 15.6097560976%;
    font-size: 25px;
    filter: blur(1.16px);
    animation: 39s floatReverse2 infinite;
}

.particle:nth-child(59) {
    top: 81.3725490196%;
    left: 38.3858267717%;
    font-size: 16px;
    filter: blur(1.18px);
    animation: 23s floatReverse infinite;
}

.particle:nth-child(60) {
    top: 86.3803680982%;
    left: 21.6748768473%;
    font-size: 15px;
    filter: blur(1.2px);
    animation: 21s floatReverse infinite;
}

.particle:nth-child(61) {
    top: 74.3276283619%;
    left: 89.3909626719%;
    font-size: 18px;
    filter: blur(1.22px);
    animation: 32s floatReverse2 infinite;
}

.particle:nth-child(62) {
    top: 71.8327183272%;
    left: 62.1915103653%;
    font-size: 13px;
    filter: blur(1.24px);
    animation: 23s floatReverse2 infinite;
}

.particle:nth-child(63) {
    top: 77.3561811506%;
    left: 65.8800393314%;
    font-size: 17px;
    filter: blur(1.26px);
    animation: 26s floatReverse infinite;
}

.particle:nth-child(64) {
    top: 25.1207729469%;
    left: 51.5564202335%;
    font-size: 28px;
    filter: blur(1.28px);
    animation: 32s float infinite;
}

.particle:nth-child(65) {
    top: 33.3333333333%;
    left: 72.8346456693%;
    font-size: 16px;
    filter: blur(1.3px);
    animation: 29s float infinite;
}

.particle:nth-child(66) {
    top: 89.9637243047%;
    left: 62.317429406%;
    font-size: 27px;
    filter: blur(1.32px);
    animation: 27s float2 infinite;
}

.particle:nth-child(67) {
    top: 70.0729927007%;
    left: 83.1702544031%;
    font-size: 22px;
    filter: blur(1.34px);
    animation: 32s float2 infinite;
}

.particle:nth-child(68) {
    top: 69.6932515337%;
    left: 26.6009852217%;
    font-size: 15px;
    filter: blur(1.36px);
    animation: 30s floatReverse2 infinite;
}

.particle:nth-child(69) {
    top: 19.7044334975%;
    left: 11.8577075099%;
    font-size: 12px;
    filter: blur(1.38px);
    animation: 24s float infinite;
}

.particle:nth-child(70) {
    top: 46.7153284672%;
    left: 12.7201565558%;
    font-size: 22px;
    filter: blur(1.4px);
    animation: 40s floatReverse2 infinite;
}

.particle:nth-child(71) {
    top: 18.5140073082%;
    left: 34.2801175318%;
    font-size: 21px;
    filter: blur(1.42px);
    animation: 40s float2 infinite;
}

.particle:nth-child(72) {
    top: 13.7423312883%;
    left: 97.5369458128%;
    font-size: 15px;
    filter: blur(1.44px);
    animation: 40s float2 infinite;
}

.particle:nth-child(73) {
    top: 53.0759951749%;
    left: 66.0835762877%;
    font-size: 29px;
    filter: blur(1.46px);
    animation: 30s float2 infinite;
}

.particle:nth-child(74) {
    top: 66.9902912621%;
    left: 45.8984375%;
    font-size: 24px;
    filter: blur(1.48px);
    animation: 27s floatReverse2 infinite;
}

.particle:nth-child(75) {
    top: 16.6871165644%;
    left: 91.6256157635%;
    font-size: 15px;
    filter: blur(1.5px);
    animation: 21s float2 infinite;
}

.particle:nth-child(76) {
    top: 94.1176470588%;
    left: 61.0236220472%;
    font-size: 16px;
    filter: blur(1.52px);
    animation: 23s floatReverse infinite;
}

.particle:nth-child(77) {
    top: 78.928136419%;
    left: 75.41625857%;
    font-size: 21px;
    filter: blur(1.54px);
    animation: 23s float infinite;
}

.particle:nth-child(78) {
    top: 85.1897184823%;
    left: 78.66273353%;
    font-size: 17px;
    filter: blur(1.56px);
    animation: 38s floatReverse2 infinite;
}

.particle:nth-child(79) {
    top: 15.4589371981%;
    left: 74.9027237354%;
    font-size: 28px;
    filter: blur(1.58px);
    animation: 29s float infinite;
}

.particle:nth-child(80) {
    top: 17.6039119804%;
    left: 34.3811394892%;
    font-size: 18px;
    filter: blur(1.6px);
    animation: 31s float infinite;
}

@keyframes apparition {
    from {
        opacity: 0;
        transform: translateY(100px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


@keyframes float {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(180px);
    }
}

@keyframes floatReverse {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-180px);
    }
}

@keyframes float2 {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(28px);
    }
}

@keyframes floatReverse2 {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-28px);
    }
}