body {
    font-family: var(--font-family-normal);
    font-size: var(--font-size-base);
    color: var(--text-color);
}

body.hamburger-active {
    overflow: hidden;
}

.splide {
    max-width: 100%;
}
figure {
    position: relative;
    figcaption {
        z-index: 10;
        background-color: rgba(255, 255, 255, 0.5);
        position: absolute;
        bottom: 0px;
        left: 0px;
        padding: 0 10px;
        border-top-right-radius: 3px;
        font-size: calc(var(--font-size-base) * 0.8);
        backdrop-filter: blur(0.5rem);
    -webkit-backdrop-filter: blur(0.5rem)
    }
}
.uppercase {
    text-transform: uppercase;
}

span.main-color {
    color: var(--main-color);
}

a, a:visited {
    color: var(--text-color);
    text-decoration: none;
}
p {
    font-size: var(--font-size-p);
    line-height: var(--line-height-p);
    margin-bottom:  var(--font-margin-p);
    hyphens: auto;
    hyphenate-limit-chars: auto 3;
    hyphenate-limit-lines: 4;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-family-display);
    font-weight: 900;
    letter-spacing: 1.1px;
    text-transform: uppercase;
    hyphens: auto;
    hyphenate-limit-chars: auto 6;
    hyphenate-limit-lines: 4;

    a {
        text-decoration: none;
        color: var(--text-color);
    }
}

h1 {
    font-size: var(--font-size-h1);
    line-height: var(--line-height-h1);
    margin-bottom: var(--font-margin-p);

}

h2, .h2 {
    font-size: var(--font-size-h2);
    line-height: var(--line-height-h2);
    margin-bottom:  var(--font-margin-p);
}

h3 {
    font-size: var(--font-size-h3);
    line-height: var(--line-height-h3);
    margin-bottom:  var(--font-margin-p);
}

a.btn {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    height: 42px;
    padding: 0 20px;
    border: 1px solid var(--text-color);
    background-color: var(--text-color);
    text-decoration: none;
    color: #fff;
    transition: ease-in-out all 0.3s;
}

a.btn:hover {
    transform: scale(105%);
}

a.btn-small {
    height: 32px;
}

.icon-mail-before,
.icon-phone-before {
    display: flex;
    align-items: center;
    gap: 8px;
    
    &::before {
        background: var(--text-color);
        content: '';
        height: 25px;
        width: 25px;
        mask-size: contain;
    }
}
.icon-mail-before {
    &::before {
        mask-image: url('data:image/svg+xml,<svg width="7.4083mm" height="7.4083mm" version="1.1" viewBox="0 0 7.4083 7.4083" xmlns="http://www.w3.org/2000/svg"><defs><clipPath id="a"><rect width="27.872" height="20.136" fill="%23001a33" data-name="Rechteck 539"/></clipPath></defs><g transform="matrix(.26458 0 0 .26458 .016933 1.0403)" data-name="Gruppe 540"><g clip-path="url(%23a)" data-name="Gruppe 539"><path d="m24.749 0h-21.625a3.127 3.127 0 0 0-3.124 3.124v13.89a3.126 3.126 0 0 0 3.124 3.122h21.625a3.126 3.126 0 0 0 3.123-3.122v-13.89a3.127 3.127 0 0 0-3.123-3.124m-14.749 9.469-8.006 8.173a1.274 1.274 0 0 1-0.164-0.628v-13.89a1.255 1.255 0 0 1 0.037-0.3zm4.766 0.238a1.358 1.358 0 0 1-1.6-0.014l-9.621-7.863h20.784c-3.429 2.811-8.629 7.07-9.562 7.877m-3.345 0.924 0.614 0.5a3.546 3.546 0 0 0 2.023 0.674 2.846 2.846 0 0 0 1.9-0.711c0.117-0.1 0.3-0.256 0.544-0.457l7.474 7.67h-20.072zm6.492-1.164c2.442-2.016 6.355-5.225 8.092-6.646a1.244 1.244 0 0 1 0.037 0.3v13.89a1.284 1.284 0 0 1-0.163 0.627z" fill="%23001a33" data-name="Pfad 1084"/></g></g></svg>');
    }
}
.icon-phone-before {
    &::before {
        mask-image: url('data:image/svg+xml,<svg width="7.4083mm" height="7.4083mm" version="1.1" viewBox="0 0 7.4083 7.4083" xmlns="http://www.w3.org/2000/svg"><defs><clipPath id="a"><rect width="18.302" height="20.011" fill="%23001a33" data-name="Rechteck 540"/></clipPath></defs><g transform="matrix(.26458 0 0 .26458 1.283 1.0569)" data-name="Gruppe 542"><g clip-path="url(%23a)" data-name="Gruppe 541"><path d="m12.385 13.276a1.313 1.313 0 0 1 0.813-0.5 7.028 7.028 0 0 1 1.452 0.47 20.434 20.434 0 0 1 2.889 1.312c0.549 0.326 0.788 0.5 0.761 1.2a4.652 4.652 0 0 1-3.323 4.1c-4.023 0.985-8.092-3.007-10.452-5.8-2.036-2.405-4.847-6.44-4.495-9.734a4.549 4.549 0 0 1 3.802-4.241c1.449-0.23 2.136-0.049 2.545 1.41 0.223 0.807 0.423 1.757 0.573 2.586a8.254 8.254 0 0 1 0.212 1.386c-0.042 0.79-1.426 1.035-1.945 1.376-0.411 0.27-0.272 0.663-0.149 1.073a12.765 12.765 0 0 0 3.28 4.861 11.134 11.134 0 0 0 2.615 1.846 0.547 0.547 0 0 0 0.409-0.029c0.395-0.192 0.7-0.961 1.012-1.316" fill="%23001a33" data-name="Pfad 1085"/></g></g></svg>');
    }
}
a.btn-ghost {
    background-color: transparent;
    color: var(--text-color);
}

p > br + a.btn {
    margin-top: calc(var(--font-margin-p) / 3);
}

hr, iframe {
    margin-bottom: var(--font-margin-p);
}

.margin-small {
    margin-top: var(--margin-small);
}

.margin-medium {
    margin-top: var(--margin-medium);
}

.margin-large {
    margin-top: var(--margin-large);
}

.margin-huge {
    margin-top: var(--margin-huge);
}

.padding-top-small {
    padding-top: var(--margin-small);
}

.padding-top-medium {
    padding-top: var(--margin-medium);
}

.padding-top-large {
    padding-top: var(--margin-large);
}

.padding-top-huge {
    padding-top: var(--margin-huge);
}

.padding-bottom-small {
    padding-bottom: var(--margin-small);
}

.padding-bottom-medium {
    padding-bottom: var(--margin-medium);
}

.padding-bottom-large {
    padding-bottom: var(--margin-large);
}

.padding-bottom-huge {
    padding-bottom: var(--margin-huge);
}

.container {
    width: 100%;
    max-width: var(--page-max-width);
    margin: 0 auto;
}

nav>ul {
    list-style: none;
    padding: 0;
    margin: 0;
    li {
        a {
            text-decoration: none;
        }
    }
}

main {
    margin-top: var(--header-height);
}

.richtext {
    figure {
        img {
            position: relative;
            z-index: 10;
        }
    }

    figure.image.bottom-right {
        position: relative;

        &::after {
            content: '';
            background-color: var(--main-color, #8bd6e6);
            position: absolute;
            width: 55%;
            height: 85%;
        }
    }

    figure.image.bottom-right {
        padding-bottom: 26px;
        padding-right: 26px;

        &::after {
            z-index: 0;
            right: 0px;
            bottom: 0px;
        }
    }
}


.search_it-form {
    box-sizing: border-box;
    font-size: 1rem;
    font-family: sans-serif;
    margin: 0 auto;
    display: block;
    position: absolute;
    right: var(--gutter);
    left: var(--gutter);
    top: 45px;
    z-index: 101;
    visibility: hidden;
    opacity: 0;
    transition: ease all 0.3s;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 4px 0px;

    fieldset {
        padding: 10px;
        background-color: var(--light-gray);
        border: none;

        input[name="search"] {
            width: 100%;
            height: 38px;
            padding: 0 5px;
        }
        input[name="search"]:focus-visible {
            outline: none;
        }
        #suggest-result {
            background-color: #fff;
            .ac_results {
                padding: 0;
                list-style: none;
                li {
                    padding: 5px;
                    cursor: pointer;
                    &.ac_over {
                        background-color: var(--light-blue);
                    }
                    .ac_match {
                        text-decoration: underline;
                        font-weight: var(--font-weight-bold);
                    }
                }
            }
        }
    }
}

.search-field-open .search_it-form {
    visibility: visible;
    opacity: 1;
    top: 60px;
}

.search_it-form legend,
label {
    display: none;
}

.search_it-form input:focus::-webkit-input-placeholder {
    color: transparent;
}

.search_it-form input:focus::-moz-placeholder {
    color: transparent;
}

.search_it-form input:focus:-ms-input-placeholder {
    color: transparent;
}

.search_it-form input:focus:-moz-placeholder {
    color: transparent;
}
.search_it-title {
    font-weight: var(--font-weight-bold);
}
mark {
  background-color: var(--light-blue);
}



/* Laptop L */

@media (min-width: 1024px) {
    .search_it-form {
        right: 0;
        left: initial;
        &::after {
            width: 46px;
            height: 4px;
            content: '';
            position: absolute;
            top: -4px;
            right: 0px;
            background-color: var(--light-blue);
        }
        fieldset {
            input[name="search"] {
                width: 300px;
                height: 38px;
                padding: 0 5px;
            }
        }
    }
}