/***************************************
 * Large headline Pattern
 ****************************************/
/* when not in WordPress editor */
body:not(.block-editor-page) .graessel-large-headline *:not(img, br):empty {
    display: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.graessel-large-headline h1 {
    padding: 120px 40px;
    margin: 0;
    font-family: var(--wp--preset--font-family--bona-nova);
    font-size: var(--wp--preset--font-size--x-large);
    line-height: 1;
    font-weight: 400;
}

.graessel-large-headline h1 mark {
    font-style: italic;
}

@media (max-width: 1800px) {
    .graessel-large-headline h1 {
        padding: 120px 20px;
        font-size: 8rem;
    }
}

@media (max-width: 1440px) {
    .graessel-large-headline h1 {
        font-size: var(--wp--preset--font-size--large);
    }
}

@media (max-width: 1024px) {
    .graessel-large-headline h1 {
        padding: 60px 20px;
    }
}


/***************************************
 * Text Info Pattern
 ****************************************/
/* when not in WordPress editor */
body:not(.block-editor-page) .graessel-text-info *:not(img, br):empty {
    display: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.graessel-text-info {
    padding: 120px 40px;
    font-family: var(--wp--preset--font-family--bona-nova);
}

.graessel-text-info .title {
    font-family: var(--wp--preset--font-family--poppins);
    font-size: var(--wp--preset--font-size--medium-large);
    line-height: 1;
    text-transform: uppercase;
    margin-bottom: 80px;
    font-weight: 300;
}

.graessel-text-info .description {
    font-size: var(--wp--preset--font-size--medium-large-alt);
    line-height: 1.2;
    color: var(--wp--preset--color--quaternary);
    max-width: 1470px;
}

.graessel-text-info .description + .description {
    margin-top: 1em;
}

@media (max-width: 1440px) {
    .graessel-text-info .title {
        margin-bottom: 40px;
    }

    .graessel-text-info .description {
        font-size: var(--wp--preset--font-size--medium-large);
    }
}

@media (max-width: 1024px) {
    .graessel-text-info {
        padding: 60px 20px;
    }
}

/***************************************
 * Highlight Pattern
 ****************************************/
/* when not in WordPress editor */
body:not(.block-editor-page) .graessel-highlight *:not(img, br):empty {
    display: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.graessel-highlight {
    padding: 120px 40px;
    font-family: var(--wp--preset--font-family--bona-nova);
    line-height: 1.2;
    font-weight: 400;
}

.graessel-highlight .pre-title {
    font-size: var(--wp--preset--font-size--medium-large);
    font-family: var(--wp--preset--font-family--poppins);
    text-transform: uppercase;
    font-weight: 300;
}

.graessel-highlight .title {
    font-size: var(--wp--preset--font-size--x-large);
    font-weight: 400;
    text-align: left;
    line-height: 1;
    margin-top: 40px;
}

.graessel-highlight .title mark {
    display: block;
}

.graessel-highlight .title mark:last-child {
    font-style: italic;
}

.graessel-highlight .title mark:first-child {
    text-align: center;
}

.graessel-highlight .title mark:last-child {
    text-align: left;
}

@media (max-width: 1440px) {
    .graessel-highlight .title mark:first-child {
        text-align: left;
    }
}

@media (max-width: 1024px) {
    .graessel-highlight {
        padding: 60px 40px;
    }

    .graessel-highlight .pre-title {
        font-size: var(--wp--preset--font-size--medium);
    }

    .graessel-highlight .title {
        margin-top: 20px;
        font-size: var(--wp--preset--font-size--large);
    }
}

/***************************************
 * Media-Text Pattern
 ****************************************/
/* when not in WordPress editor */
body:not(.block-editor-page) .graessel-media-text *:not(img, br):empty {
    display: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.graessel-media-text {
    background-color: var(--wp--preset--color--tertiary);
}

.graessel-media-text .wp-block-media-text__content {
    padding: 80px 20px;
    max-width: 600px;
    margin: 0 auto;
}

.wp-block-media-text.graessel-media-text > .wp-block-media-text__media {
    height: 100%;
}

.graessel-media-text .wp-block-media-text__media img,
.graessel-media-text .wp-block-media-text__media video {
    height: 100%;
    max-width: unset;
    vertical-align: middle;
    width: 100%;
    max-height: 1080px;
    object-fit: cover;
}

.graessel-media-text .title {
    font-family: var(--wp--preset--font-family--bona-nova);
    font-size: var(--wp--preset--font-size--large);
    line-height: 1;
    font-weight: 400;
    margin: 0;
}

.graessel-media-text .description {
    color: var(--wp--preset--color--primary);
    margin-top: 40px;
    margin-bottom: 40px;
}

.graessel-media-text .description + .description {
    margin-top: 1em;
}

.graessel-media-text .buttons {
    gap: 20px;
}

.graessel-media-text .buttons .wp-block-button__link {
    font-family: var(--wp--preset--font-family--bona-nova);
    padding: 10px 32px;
    text-transform: uppercase;
    font-size: var(--wp--preset--font-size--medium);
}

@media (max-width: 1024px) {
    .graessel-media-text.wp-block-media-text.is-stacked-on-mobile {
        grid-template-columns: 100% !important;
    }

    .graessel-media-text.wp-block-media-text.is-stacked-on-mobile > .wp-block-media-text__content {
        grid-column: 1;
        grid-row: 2;
    }

    .graessel-media-text.wp-block-media-text.is-stacked-on-mobile > .wp-block-media-text__media {
        grid-column: 1;
        grid-row: 1;
    }

    .graessel-media-text .wp-block-media-text__media img,
    .graessel-media-text .wp-block-media-text__media video {
        max-height: 400px;
    }

    .graessel-media-text .wp-block-media-text__content {
        max-width: var(--wp--style--global--content-size);
        width: 90%;
    }

    .graessel-media-text .description {
        margin-top: 40px;
        margin-bottom: 40px;
    }
}

/***************************************
 * Color-Info Pattern
 ****************************************/
/* when not in WordPress editor */
body:not(.block-editor-page) .graessel-color-info *:not(img, br):empty {
    display: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.graessel-color-info {
    position: relative;
    padding: 120px 0;
}

.graessel-color-info::before,
.graessel-color-info::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 50%;
    background-color: var(--wp--preset--color--tertiary);
}

.graessel-color-info::before {

}

.graessel-color-info::after {
    top: 50%;
    background-color: var(--wp--preset--color--quaternary);
    background: linear-gradient(rgba(2, 72, 92, 0.9)), url('assets/images/nebliger_wald.jpg');
    background-size: cover;
}

.graessel-color-info .info-area {
    background-color: var(--wp--preset--color--primary);
    border-radius: 9999px;
    padding: 80px 40px;
    color: var(--wp--preset--color--secondary);
    position: relative;
    z-index: 1;
}

.graessel-color-info .info-area .title {
    margin: 0;
    font-size: var(--wp--preset--font-size--large);
    font-family: var(--wp--preset--font-family--bona-nova);
    font-weight: 400;
}

.graessel-color-info .info-area .description {
    margin: 60px 0;
    font-size: var(--wp--preset--font-size--small);
}

.graessel-color-info .info-area .wp-block-button__link {
    font-family: var(--wp--preset--font-family--bona-nova);
    text-transform: uppercase;
    font-size: var(--wp--preset--font-size--medium);
    padding: 10px 20px;
}

@media (max-width: 1024px) {
    .graessel-color-info {
        padding: 60px 0;
    }

    .graessel-color-info .info-area {
        padding: 40px 20px;
    }

    .graessel-color-info .info-area .title {
        font-size: var(--wp--preset--font-size--medium-large);
    }

    .graessel-color-info .info-area .description {
        margin: 40px 0;
    }
}

/***************************************
 * Form-Container Pattern
 ****************************************/
.graessel-form-container {
    padding: 120px 40px;
    background-color: var(--wp--preset--color--secondary);
    color: var(--wp--preset--color--quaternary);
}

.graessel-form-container .title {
    font-size: var(--wp--preset--font-size--large);
    margin-bottom: 80px;
    font-weight: 400;
}

@media (max-width: 1024px) {
    .graessel-form-container {
        padding: 60px 20px;
    }

    .graessel-form-container .title {
        font-size: var(--wp--preset--font-size--large);
        margin-bottom: 40px;
    }
}