.pageheader { background:var(--bg-purple);     overflow: hidden;  }
body.home .pageheader { background:white; }

.pageheader .txt header{ margin-bottom:calc(var(--h1_size) - (var(--h1_size) * 0.1666666666666667));margin-bottom:calc(var(--h1_size) - (var(--h1_size) * 0.375));  }
.pageheader .txt>p:not(.cta) { font-size: 36px;font-size: 28px;     max-width: 24em; }
.pageheader .txt>p:not(.cta)+p:not(.cta){ font-size: var(--bodytext_size); max-width:36em; }
.pageheader .txt>p:not(:last-child) { margin-bottom: 1.5em; margin-bottom:1em; }


.pageheader .txt header picture{ display:block; width: 100%; height: 120px;
    position: relative;}
.pageheader .txt header img{ object-fit: contain; object-position: left top; position: absolute; top: 0; left:0; width: 100%; height: 100%;  }

.herocards,
.pageheader > .wrapper { display: flex; justify-content: space-between; flex-wrap: wrap;}


.herocard,
.pageheader > .wrapper > :is(div,figure) { width:calc(50% - (var(--gutter_big) / 2)); }


/*
.pageheader > .wrapper > div.txt:only-child { width:100% !important; max-width: 720px; width: 100%; margin: 0 auto 0; }
*/

.herocard,
.pageheader > .wrapper > div:not(.image):not(#announcement) { padding: 96px 0 64px; }

@media all and (min-width:1200px) {
    .pageheader.profileheader > .wrapper > div:not(.image):not(#announcement) {
        padding: 64px 0;
    }

}

.pageheader > .wrapper > div.shop_card { align-self: flex-start; }

.pageheader > .wrapper > div.txt { padding: 96px 0; }

body.home .pageheader > .wrapper > div:not(:first-child,:nth-child(2)){ padding-top: 32px;}
body.home .pageheader > .wrapper > div:first-child { order: 10;}
body.home .pageheader > .wrapper > div:nth-child(2) { order: 20;}
body.home .pageheader > .wrapper > div:nth-child(3) { order: 30;}
body.home .pageheader > .wrapper > div:nth-child(4) { order: 40;}


.pageheader > .wrapper > .image {  display: flex; flex-direction: column;
    position: relative;   }

.pageheader > .wrapper > .image > picture  {  height: auto;

    width:calc(50vw - (var(--gutter_big) / 2)); height: 100%;
    position: absolute; left: 0; top:0; /*display: block; width: 100%;position: relative;*/
}
 

.pageheader > .wrapper > .image::before { display:block; content:""; width:100%; padding-bottom: 71.06481481481481%;  }
.pageheader > .wrapper > .image > picture img {   }



@media all and (max-width:1199px) {
    .herocard,
    .pageheader > .wrapper > div:not(.image):not(#announcement) {
        padding: 48px 0 ;
    }
    /*.pageheader .txt>p:not(.cta) { font-size:24px; }*/

    .pageheader .txt header picture{ height:90px; }
}
@media all and (max-width: 899px) {
    .herocards,
    .pageheader > .wrapper { flex-direction: column;}
    .herocard,
    .pageheader > .wrapper > :is(div,figure) { width:100%; }

    .pageheader > .wrapper > .image { width:calc(100% + var(--wrapper-margin) + var(--wrapper-margin)); left: calc(0px - var(--wrapper-margin)); }
    .pageheader > .wrapper > .image > picture { width: 100%; }

    .pageheader .txt header picture{ height:80px; }


    .pageheader > .wrapper > .image{ order: -1;}

    .herocard,
    .pageheader > .wrapper > div:not(.image):not(#announcement) {
        padding: 32px 0;
    }

    .herocard+div,
    .pageheader > .wrapper > div:not(.image):not(#announcement)+div {
        padding: 16px 0 ;
    }

    .pageheader > .wrapper > div.txt { padding-left: 16px; padding-right: 16px; }
    .pageheader .txt header{ margin-bottom:28px; }
    .pageheader .txt>p:not(.cta) { font-size:22px; }

}
@media all and (max-width: 599px) {
    .pageheader > .wrapper > .image::before { padding-bottom: 100%;}

    .pageheader .txt header picture{ height:75px; }

}