/*
Theme Name: Astra Child
Theme URI: https://wpastra.com/
Description: A child theme of the Astra WordPress theme
Author: Your Name
Author URI: https://yourwebsite.com/
Template: astra
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
*/

/* Import parent theme styles */
@import url('../astra/style.css');

/*Temp wird eingeblendet wenn benutzer auswahl getrffen hat*/
header {
    display: none;
}

body {
    hyphens: auto;
    background-color: #FBF0E1 !important;
}
.entry-content h1,
.entry-content h2,
.entry-content h3,
.entry-content h4,
.entry-content h5,
.entry-content h6 {
    margin-bottom: 0;
}
.entry-content h3 {
    font-size: 22px !important;

    @media (min-width: 1024px) {
        font-size: 36px !important;
    }
}

article {
    padding: 0 !important;
}

/* Add your custom styles below this line */
.m-video__video {
    width: 100%;
    height: 50vh;
    object-fit: fill;
}

.h-33 {
    height: 33vh;
}
#text {
    @media (min-width: 1024px) {
        height: 65vh;
    }
}
#teaser-image-hover {
    justify-content: flex-start;
    min-height: 50vh;
}
#teaser-image-hover  > .flex-50 {
    row-gap: 1.5rem;
    column-gap: 1.5rem;
    @media (min-width: 1024px) {
        row-gap: 3rem;
        column-gap: 3rem;
    }
}
#teaser-image-hover .flex-50 > * {
    width: 100%;

    @media (min-width: 1024px) {
        width: calc(50% - 3rem);
    }

}
#teaser-image-hover  .flex-50 .wrapper {
    margin-bottom: 40px;
}
#teaser-image-hover  .flex-50 .wrapper .flex-50 {
    row-gap: 1.5rem;
    column-gap: 1.5rem;
    @media (min-width: 1024px) {
        row-gap: 3rem;
        column-gap: 3rem;
    }
}
#teaser-image-hover  .flex-50 .wrapper .flex-50 > * {
    width: calc(100% - 1.5rem);
    margin-bottom: 0;

    @media (min-width: 768px) {
        width: calc(50% - 1.5rem);
    }

    @media (min-width: 1024px) {
        width: calc(50% - 3rem);
    }

}

#teaser-image-hover .image {
    position: relative;
    min-height: 250px;
}

#teaser-image-hover .image img {
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    @media (min-width: 1024px) {
        padding: 0 5rem;
    }
    object-fit: cover;
    transition: opacity .75s;
}

#teaser-image-hover .image img {
    opacity: 0;
}
#teaser-image-hover .image img.active {
    opacity: 1;
}
.video-container {
    height: 100vh;
    position: relative;
}

.video-container .video-wrapper {
    position: relative;
}

.video-container .video-wrapper img {
    height: 100vh;
    object-fit: cover;
}

.video-container #left-text {
        position: absolute;
        top: 20%;
        left: 5%;
        opacity: 0;
    z-index: 2;
}
.video-container #right-text {
        color: #fff;
        position: absolute;
        top: 20%;
        right: 5%;
        opacity: 0;
        text-align: end;
    z-index: 2;
}
.video-container #sun-up {
    position: absolute;
    bottom: 50%;
    left: 50%;
    transform: translate(-50%, 50%);
    opacity: 0;
    width: auto;
}
.video-container #sun-down {
    position: absolute;
    bottom: 50%;
    left: 50%;
    transform: translate(-50%, 50%);
    opacity: 0;
    width: auto;
}
/*.video-container:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #ffffff;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.1) 84%, rgba(255, 255, 255, 1) 100%);
    z-index: 1;
}*/

.flex-33-66 {
    display: flex;
}
.flex-33-66 *:first-of-type {
    @media (min-width: 1024px) {
        width: 66%;
    }
    @media (min-width: 1024px) {
        width: 33%;
    }

}
.flex-33-66 *:nth-child(2) {
    @media (min-width: 1024px) {
        width: 66%;
    }

}

.big-font {
    font-size: 1.5rem !important;

    @media (min-width: 1024px) {
        font-size: 3rem !important;
    }

}
.information {
    padding: 35px 25px;
    display: flex;
    justify-content: center;
    flex-direction: column;
    gap: 1.5rem;

    @media (min-width: 1024px) {
        padding: 80px;
        gap: 3rem;
    }
}
.information  > * {
    margin-right: 0 !important;
    margin-left: 0 !important;
}


.flex-50 {
    display: flex;
    margin-left: 0 !important;
    margin-right: 0 !important;
    flex-wrap: wrap;
    height: 100%;
}
.flex-50 > * {
    width: 50%;
}


.flex-33 {
    display: flex;
    > * {
        width: 33%;
    }
}

.animate {
    opacity: 0;
}

.teaser {
    width: 100%;
}

.accordion-item {
    background: transparent !important;
}

.accordion-body {
    background: white;
}