/* Contao 5 compatibility: modern content-element class names. */
/* Legacy ce_text elements also carried Contao's .block clearfix class. */
.content-text {
    overflow: hidden;
}

.subsite--header .subsite--image-fullwidth::after,
.subsite--header-news::after,
.start--slider::after {
    content: url("/files/wollwinderei/grafiken/mebold-header--bg.png");
    position: absolute;
    top: 0;
    left: 50%;
    z-index: 1;
    transform: translate(-50%, 0);
    pointer-events: none;
}

@media only screen and (max-width: 48em) {
    .subsite--header .subsite--image-fullwidth::after,
    .subsite--header-news::after,
    .start--slider::after {
        opacity: .6;
    }
}

@media only screen and (max-width: 30em) {
    .subsite--header .subsite--image-fullwidth::after,
    .subsite--header-news::after,
    .start--slider::after {
        opacity: .4;
    }
}

/* Content blocks: Contao 5 wraps text content in .content-text and .rte. */
.content--block .content-text {
    width: 100%;
}

.content--block .content-text h2 {
    color: #006ab3;
    margin-bottom: 2rem;
}

.content--block .content-text .rte h4 {
    margin-top: 2rem;
    margin-bottom: 0;
    font-family: "Chino ITC W01 Italic", sans-serif;
    font-size: 1.375rem;
}

.content--block.has--image .content-text {
    width: 60%;
    float: left;
}

.content--block.has--image .content-image {
    width: 40%;
    float: left;
}

.content--block.has--image .content-image img {
    position: absolute;
    right: 20%;
    bottom: 7rem;
}

@media only screen and (max-width: 73.75em) {
    .content--block.has--image .content-image img {
        right: 10%;
    }
}

@media only screen and (max-width: 30em) {
    .content--block.has--image .content-text,
    .content--block.has--image .content-image {
        width: 100%;
        float: none;
    }

    .content--block.has--image .content-image img {
        position: relative;
        right: auto;
        bottom: auto;
        left: 50%;
        margin-top: 2rem;
        transform: translate(-50%, 0);
    }
}

/* Leitlinien: preserve the legacy centred intro and numbered two-column layout. */
.leitlinien--container .content-text.col-70 {
    margin-left: 15%;
}

.leitlinien--container .content-text.col-70 .rte p {
    color: #fff;
}

.leitlinien--container .left .content-text,
.leitlinien--container .right .content-text {
    margin-bottom: 2.3125rem;
}

.leitlinien--container .left .content-text h2,
.leitlinien--container .right .content-text h2 {
    display: inline-block;
    float: left;
    width: 20%;
    color: #fff;
    font-family: "Chino ITC W01 Italic", sans-serif;
    font-size: 2.813rem;
}

.leitlinien--container .left .content-text .rte p,
.leitlinien--container .right .content-text .rte p {
    display: inline-block;
    float: left;
    width: 80%;
    color: #fff;
    font-size: 1rem;
}

@media only screen and (max-width: 56.875em) {
    .leitlinien--container .left .content-text h2,
    .leitlinien--container .right .content-text h2 {
        width: 25%;
    }

    .leitlinien--container .left .content-text .rte p,
    .leitlinien--container .right .content-text .rte p {
        width: 75%;
    }
}

@media only screen and (max-width: 36.25em) {
    .leitlinien--container .left .content-text h2,
    .leitlinien--container .right .content-text h2 {
        width: 30%;
    }

    .leitlinien--container .left .content-text .rte p,
    .leitlinien--container .right .content-text .rte p {
        width: 70%;
    }
}

@media only screen and (max-width: 30em) {
    .leitlinien--container .content-text.col-70 {
        width: 100%;
        margin-left: 0;
    }

    .leitlinien--container .left .content-text h2,
    .leitlinien--container .right .content-text h2 {
        width: 20%;
    }

    .leitlinien--container .left .content-text .rte p,
    .leitlinien--container .right .content-text .rte p {
        width: 80%;
    }
}

.start--genuss .content-text.is-center {
    margin-bottom: 3.25rem;
}

.start--genuss .content-text.is-center h2 {
    width: 28rem;
    color: #fff;
    line-height: 1.6;
    display: block;
    margin: 0 auto .8rem;
    font-size: 2.75rem;
}

.start--genuss .content-text.is-center .rte p {
    width: 33rem;
    color: #fff;
    display: block;
    margin: 0 auto;
    font-size: 1.375rem;
}

.start--genuss .content-text.is-center .rte a {
    display: inline-block;
    margin-top: 2rem;
    color: #fff;
    text-decoration: underline;
}

.start--genuss .content-text.is-center .rte a:hover {
    opacity: .7;
}

@media only screen and (max-width: 48em) {
    .start--genuss .content-text.is-center h2 {
        width: 80%;
        font-size: 2.2rem;
    }

    .start--genuss .content-text.is-center .rte p {
        width: 90%;
        font-size: 1.2rem;
    }
}

/* Newsletter: historical checkboxes use the browser's compact native size. */
.cr--newsletter p.info input[type="checkbox"] {
    appearance: checkbox !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    display: inline-block !important;
    float: right;
    margin: 4px .5rem 0 0;
    padding: 0 !important;
}

.subsite--header-news .content-text {
    width: 45%;
    float: left;
    overflow: visible;
    padding: 3.875rem 0 4.125rem;
    margin-right: 10%;
    position: relative;
    z-index: 2;
}

.subsite--header-news .content-text h2 {
    font-size: 2.75rem;
    color: #fff;
    margin-bottom: 1rem;
    position: relative;
    z-index: 2;
}

.subsite--header-news .content-text p {
    color: #fff;
    position: relative;
    z-index: 2;
}

.subsite--header-news .content-image {
    width: 45%;
    float: left;
    overflow: visible;
    position: absolute;
    right: 0;
    bottom: -3.5rem;
    z-index: 2;
}

.subsite--header-fachmarkt .content-image img,
.subsite--header-sortiment .content-image img,
.subsite--header-impressum .content-image img,
.subsite--header-angebote .content-image img,
.subsite--header-termine .content-image img,
.subsite--header-neuigkeiten .content-image img,
.subsite--header-kontakt .content-image img {
    box-shadow: 0 0 2.25rem rgba(82, 82, 82, .5);
}

@media only screen and (max-width: 48em) {
    .subsite--header-news .content-text {
        width: 100%;
        margin: 0;
        padding-bottom: 0;
    }

    .subsite--header-news .content-text h2 {
        font-size: 2rem;
    }

    .subsite--header-news .content-image {
        width: 80%;
        margin-left: 10%;
        position: relative;
        bottom: auto;
    }
}

/* Fachmarkt service: Contao 5 content-text compatibility. */
.fachmarkt-service--container .content-text.col-70 {
    margin-left: 15%;
}

.fachmarkt-service--container .content-text.col-70 h1,
.fachmarkt-service--container .content-text.col-70 .rte p,
.fachmarkt-service--container .content-text.col-70 .rte p strong,
.fachmarkt-service--container .left .content-text h2,
.fachmarkt-service--container .right .content-text h2,
.fachmarkt-service--container .left .content-text .rte p,
.fachmarkt-service--container .right .content-text .rte p,
.fachmarkt-service--container .left .content-text .rte p strong,
.fachmarkt-service--container .right .content-text .rte p strong,
.fachmarkt-service--container .left .content-text .rte p a,
.fachmarkt-service--container .right .content-text .rte p a {
    color: #fff;
}

/* Contao 5 renders active navigation entries as span instead of strong. */
.is--subsite-sidebar #right .nav_side ul li strong.active,
.is--subsite-sidebar #right .nav_side ul li span.active {
    color: #04406a;
    font-family: "Chino ITC W01 Italic", sans-serif;
    font-size: 1.875rem;
    line-height: 1.1;
}

.is--subsite-sidebar #right .nav_side ul li ul.level_2 li span.active {
    color: #04406a;
    font-size: 1.563rem;
}

/* Service headline: retain the legacy desktop scale on the Contao 5 DOM. */
.fachmarkt-service--container .content-text.col-70 > h1 {
    color: #fff;
    font-size: 2.75rem !important;
    font-family: "Chino ITC W01 Italic", sans-serif;
    line-height: 1.3;
    margin-bottom: .7rem;
}

@media only screen and (max-width: 30em) {
    .fachmarkt-service--container .content-text.col-70 {
        width: 100%;
        margin-left: 0;
    }
}

/* Leitlinien: Contao 5 content-text and RTE compatibility. */
.leitlinien--container .content-text.col-70 > h1 {
    color: #fff;
    font-size: 2.75rem !important;
    font-family: "Chino ITC W01 Italic", sans-serif;
    line-height: 1.3;
    margin-bottom: .7rem;
}

.leitlinien--container .content-text.col-70 .rte p,
.leitlinien--container .content-text.col-70 .rte p strong,
.leitlinien--container .left .content-text h2,
.leitlinien--container .right .content-text h2,
.leitlinien--container .left .content-text .rte p,
.leitlinien--container .right .content-text .rte p,
.leitlinien--container .left .content-text .rte p strong,
.leitlinien--container .right .content-text .rte p strong,
.leitlinien--container .left .content-text .rte a,
.leitlinien--container .right .content-text .rte a {
    color: #fff;
}

/* Fachmarkt service: the legacy component centres its two service columns. */
.fachmarkt-service--container .left .content-text,
.fachmarkt-service--container .right .content-text {
    margin-bottom: 2.3125rem;
}

.fachmarkt-service--container .left .content-text h2,
.fachmarkt-service--container .right .content-text h2 {
    display: inline-block;
    float: none;
    width: 90%;
    margin: 0 0 .7rem;
    text-align: center;
    font-size: 1.375rem;
}

.fachmarkt-service--container .left .content-text .rte p,
.fachmarkt-service--container .right .content-text .rte p {
    display: inline-block;
    float: none;
    width: 90%;
    margin: 0;
    text-align: center;
    font-size: 1rem;
}

.fachmarkt-service--container .left .content-text.kontakt .rte p,
.fachmarkt-service--container .right .content-text.kontakt .rte p,
.fachmarkt-service--container .left .content-text.kontakt .rte a,
.fachmarkt-service--container .right .content-text.kontakt .rte a {
    font-size: 1.536rem;
}

/* Contao 5 renders the active navigation item as strong, not span. */
.is--subsite-sidebar #right .nav_side ul li strong.active::before {
    content: "> ";
}

/* Footer banner: preserve the typography of the legacy ce_text element. */
footer .footer--top .content-text {
    margin-bottom: 2.375rem;
}

footer .footer--top .content-text .rte p {
    color: #006ab3;
    font-family: "ChinoITCW01-MediumItali", sans-serif;
    font-size: 2.75rem;
}

footer .footer--top .content-text .rte p strong {
    color: #04406a;
    font-family: "ChinoITCW01-MediumItali", sans-serif;
}

@media only screen and (max-width: 48em) {
    footer .footer--top .content-text .rte p {
        font-size: 2.2rem;
    }
}

@media only screen and (max-width: 30em) {
    footer .footer--top .content-text .rte p {
        font-size: 1.6rem;
        line-height: 1.3;
    }
}

/* Footer logo: Contao 5 uses content-image instead of ce_image. */
footer .footer--top .content-image {
    float: left;
    width: 20%;
}

footer .footer--top .content-image figure {
    width: 57%;
}

/* The legacy footer navigation styled its active item as a span. Contao 5
 * emits a strong.active instead, so retain the white italic navigation text. */
.footer--bottom .nav_top-bottom ul li > strong.active {
    color: #fff;
    font-family: "Chino ITC W01 Italic", sans-serif;
    font-weight: normal;
}

/* Contao keeps the active state on Mmenu's list item and renders its label as
 * strong.active. Match the inset and typography of an ordinary menu link. */
.mm-menu .mm-listitem.active > strong.active,
.mm-menu .mm-listitem--selected > .mm-listitem__text {
    padding: calc((var(--mm-listitem-size) - var(--mm-lineheight)) / 2) 1.25rem;
    background: #006ab3;
    color: #fff;
    font-family: "Chino ITC W01 Medium", sans-serif;
    font-weight: normal;
}

/* Mmenu assigns .mm-listitem__text only to a and span. Contao can render an
 * active/trail parent as strong, so recreate the text item's flex layout. */
.mm-menu .mm-listitem > strong {
    flex-grow: 1;
    flex-basis: 10%;
    display: block;
    min-width: 0;
    overflow: hidden;
    padding: calc((var(--mm-listitem-size) - var(--mm-lineheight)) / 2) 1.25rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* In the compact desktop header the legacy selector targeted .ce_image.
 * Contao 5 renders the logo as .content-image, so keep it above the fixed nav. */
@media only screen and (min-width: 48em) {
    header.scrolled .header--fullwidth .right .content-image {
        position: fixed;
        top: 0;
        right: 4rem;
        z-index: 9999999;
        width: 14%;
    }
}

@media only screen and (min-width: 137.5em) {
    header.scrolled .header--fullwidth .right .content-image {
        right: 12rem;
    }
}

@media only screen and (min-width: 162.5em) {
    header.scrolled .header--fullwidth .right .content-image {
        right: 20rem;
    }
}

@media only screen and (max-width: 48em) {
    footer .footer--top .content-image {
        float: right;
        width: 50%;
    }

    footer .footer--top .content-image figure {
        display: block;
        margin: 0 auto;
    }
}

@media only screen and (max-width: 38.125em) {
    footer .footer--top .content-image {
        width: 40%;
    }
}

@media only screen and (max-width: 30em) {
    footer .footer--top .content-image {
        float: none;
        width: 50%;
        margin: 0 auto 2rem;
    }
}

/* Employee quotation block (RSCE keeps its legacy ce_text markup). */
.mitarbeiter--container {
    margin-top: 4rem;
}

.mitarbeiter--container > .mitarbeiter--bg-text {
    background-position: right center;
    background-size: contain;
    background-repeat: no-repeat;
}

.mitarbeiter--container > .mitarbeiter--bg-text > .ce_text {
    width: 55%;
    padding: 6rem 0 2rem 15%;
    text-align: right;
}

.mitarbeiter--container h4 {
    font-family: "Chino ITC W01 Italic", sans-serif;
    font-size: 1.375rem;
    line-height: 2;
}

.mitarbeiter--container > .mitarbeiter--bg-text > .ce_text h4 {
    margin: 0 0 1.125rem;
    font-size: 1.75rem;
    line-height: 1.5;
}

.mitarbeiter--container > .mitarbeiter--bg-text > .ce_text p {
    color: #8d8d8d;
    font-size: 1rem;
}

.mitarbeiter--container > .mitarbeiter--bg-text > .ce_text p strong {
    color: #8d8d8d;
    font-family: "Chino ITC W01 Medium", sans-serif;
    font-size: 1.125rem;
}

@media only screen and (max-width: 66.25em) {
    .mitarbeiter--container {
        padding-right: 2rem;
        padding-left: 2rem;
    }

    .mitarbeiter--container > .mitarbeiter--bg-text > .ce_text {
        padding-right: 0;
        padding-left: 0;
    }
}

@media only screen and (max-width: 62.5em) {
    .mitarbeiter--container {
        margin-top: 0;
    }

    .mitarbeiter--container > .mitarbeiter--bg-text {
        padding: 0 0 35vw;
        background-position: center bottom;
    }

    .mitarbeiter--container > .mitarbeiter--bg-text > .ce_text {
        width: 100%;
    }
}

@media only screen and (max-width: 48em) {
    .mitarbeiter--container > .mitarbeiter--bg-text > .ce_text {
        padding: 2rem 0 20vw;
    }
}

@media only screen and (max-width: 30em) {
    .mitarbeiter--container > .mitarbeiter--bg-text {
        margin-bottom: 2rem;
    }
}

/* Team variant of the employee quotation block. */
.mitarbeiter--container.mitarbeiter--team > .mitarbeiter--bg-text > .ce_text {
    min-height: 450px;
    padding-left: 0;
    text-align: left;
}

.mitarbeiter--container.mitarbeiter--team > .mitarbeiter--bg-text > .ce_text h4 {
    margin-bottom: 0;
}

@media only screen and (max-width: 62.5em) {
    .mitarbeiter--container.mitarbeiter--team > .mitarbeiter--bg-text > .ce_text {
        min-height: 0;
    }
}

@media only screen and (max-width: 48em) {
    .mitarbeiter--container.mitarbeiter--team {
        margin-top: 2rem;
    }
}

/* The team block carries name and role in list items rather than paragraphs. */
.mitarbeiter--container.mitarbeiter--team > .mitarbeiter--bg-text > .ce_text li {
    margin-bottom: 1.125rem;
    font-size: 1.4rem;
    line-height: 1.5;
}

/* Externally loaded social SVGs retain the legacy icon dimensions and colour. */
.item--socials .icon--social {
    display: block;
    width: 24px;
    height: 24px;
}