h1,
h2,
h3,
h4 {
    text-wrap: balance;
}

header {
    --tw-backdrop-blur: 0;
    background: transparent;
    padding: .5rem 0;
    position: sticky;
    top: 0;
    transition: none;
}

main {
    padding-top: 0;
    margin-top: 0;
}

.btn {
    outline: solid var(--color-button-text) .1rem;
    transition: none;
    padding: .25rem .75rem !important;
}

.btn.selected {
    color: var(--color-body-bg);
    background-color: var(--color-button-text);
    outline: none;
}

.btn:hover {
    color: var(--color-button-text);
    background-color: var(--color-button-bg-highlight);
    outline: none;
}

.custom-nav {
    flex-wrap: wrap;
}

.custom-nav .btn {
    margin-right: .125em;
    margin-bottom: .25rem;
}
/* PHP-Script Gilles adressieren */
.is-block-type-img-comparison-slider,
.is-block-type-heading-sticker {
    position: relative;
    max-width: 1848px;
    margin-left: auto;
    margin-right: auto;
}

.is-block-type-heading-sticker .__center {
    padding-top: 6.5rem;
}

img-comparison-slider {
    --divider-width: .1rem;
    --divider-color: var(--color-body-text);
    --default-handle-opacity: 1;
}

img-comparison-slider:focus {
    outline: none;
}

img-comparison-slider [slot="handle"] {
    fill: var(--color-body-text);
    transition: opacity .25s;
    animation: wiggle 1s alternate infinite ease-in-out;
}

@keyframes wiggle {
    0% {
        transform: translateX(-5%);
    }

    100% {
        transform: translateX(5%);
    }
}

img-comparison-slider:focus [slot="handle"] {
    opacity: 0;
    animation: none;
}

.is-block-type-img-comparison-slider img-comparison-slider {
    margin-top: 4rem;
}

.callout {
    display: inline;
    position: absolute;
    top: .5rem;
    right: 1rem;
    transform-origin: center;
    transform: rotate(-8deg);
    pointer-events: none;
    z-index: 10;
}

.callout h5 {
    font-size: 1.5rem;
    text-wrap: balance;
    display: inline;
    padding: .1em 0em;
    background-color: var(--color-footer-bg);
    box-shadow: .25em 0 0 var(--color-footer-bg), -.25em 0 0 var(--color-footer-bg);
    box-decoration-break: clone;
}

.callout.sm h5 {
    font-size: 1rem;
}

article ul {
    margin-left: 2.25em;
}

.is-block-type-list-arrows li {
    list-style: none;
    position: relative;
}

.is-block-type-list-arrows li::before {
    content: '';
    width: 1.25em;
    height: 1.25em;
    display: inline-block;
    background-image: url(../img/arrow.svg);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    position: absolute;
    left: -2.25em;
    top: .05em;
}

.is-block-type-list-arrows li:not(:last-child) {
    margin-bottom: .25em;
}

.is-block-type-testimonial .__center {
    display: flex;
    flex-direction: column-reverse;
    gap: 2rem;
}

.is-block-type-testimonial .quote {
    height: fit-content;
    background-color: var(--color-footer-bg);
    padding: 2.5rem;
    position: relative;
}

.is-block-type-testimonial .quote::before {
    content: '';
    display: inline-block;
    width: 3rem;
    height: 3rem;
    background-color: var(--color-footer-bg);
    position: absolute;
    mask: url("../img/quote-spike-vert.svg") no-repeat center;
    mask-size: contain;
    -webkit-mask: url("../img/quote-spike-vert.svg") no-repeat center;
    -webkit-mask-size: contain;
    bottom: -3rem;
    left: 75%;
}

.is-block-type-testimonial img {
    width: 75%;
}

.is-block-type-testimonial .quote p {
    margin-bottom: .5em;
}

.is-block-type-testimonial .quote p:not(.caption)::before {
    content: '«';
}

.is-block-type-testimonial .quote p:not(.caption)::after {
    content: '»';
}

.is-block-type-testimonial .quote .caption {
    font-size: .75em;
}

.is-block-type-testimonial .quote *:last-child {
    margin-bottom: 0;
}


@media (min-width: 768px) {
    main {
        padding-top: 0rem;
    }

    h1,
    h2,
    h3,
    h4 {
        width: 66.666667%;
    }

    article ul {
        margin-left: 0;
    }

    .custom-nav {
        display: flex;
        justify-content: flex-start;
    }

    .custom-nav .btn {
        margin-right: 0;
        margin-right: .5rem;
        margin-bottom: .5rem;
    }

    .is-layout-standard {
        width: 83.3333% !important;
        margin-left: 16.6667%;
    }
}

@media (min-width: 1200px) {
    .is-block-type-img-comparison-slider img-comparison-slider {
        margin-top: 0;
    }

    .callout h5 {
        font-size: 2rem;
    }

    .callout {
        transform: translateY(-50%) rotate(-16deg);
    }

    .is-block-type-testimonial .__center {
        flex-direction: row;
    }

    .is-block-type-testimonial img {
        object-fit: contain;
        width: 33.3333%;
    }

    .is-block-type-testimonial .quote::before {
        left: -3rem;
        top: calc(50% + .5rem);
        transform: translateY(-50%);
        mask: url("../img/quote-spike.svg") no-repeat center;
        -webkit-mask: url("../img/quote-spike.svg") no-repeat center;
    }

    .is-block-type-heading-sticker .__center {
        padding-top: 0rem;
    }

}