@charset "utf-8";
/* CSS Document */
@font-face {
    font-family: "Lato";
    src: url("../Fonts/Lato/Lato-Regular.ttf");
    font-display: swap;
    font-weight: 400;
    font-style: normal;
}
@font-face {
    font-family: "NeueHaasDisplay";
    src: url("../Fonts/NeueHaasDisplay/NeueHaasDisplayLight.ttf");
    font-display: swap;
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: "NeueHaasDisplay Medium";
    src: url("../Fonts/NeueHaasDisplay/NeueHaasDisplayMediu.ttf");
    font-display: swap;
    font-weight: 400;
    font-style: normal;
}

:root
{
    /*** colours ***/
    --greyClr: #EfEfEf;
    --blueClr: #0057ff;
    --greenClr: #bcff2c;
    --redClr: #bc0810;
    --darkClr: #101010;
    --defaultFontClr: #1E1E1E;
    --headerBGClr: white;
    --contentBGClr: #788898;
    --bodyBGClr: var(--contentBGClr);
    --tableHeaderColor: black;
    --tableHeaderGB: transparent;
    --linkClr: #0025ed;

    /*** sizes ***/
    --maxOuterWidth: min(99vw,1800px);
    --headerHeight: 5.5rem;
    --maxContentWidth: 1200px;
    --contentWidth: min(98vw,var(--maxContentWidth));
    --teaserHeight: calc(100vh - var(--headerHeight) - 4rem);
    --stdInset: min(4rem,2.5vw);
    --boxPadding: 2rem;
    --boxRadius: 2.1rem;
    --generalPadding: 1.5rem;  /* 24px */
    --extraSmallSpacing: 0;
    --smallSpacing: 1rem;
    --mediumSpacing: 2rem;
    --largeSpacing: 3.5rem;
    --extraLargeSpacing: 4.5rem;
    --stdColGap: 1.5rem;
    --productBoxHeight: 28rem;
    --scBoxSize: max(300px,var(--contentWidth)/4 - 5rem);

    /*** fonts ***/
    --mediumFont: "NeueHaasDisplay", Lato, Helvetica, Arial, sanserif;
    --stdFont: "NeueHaasDisplay", Lato, Helvetica, Arial, sanserif;
    --stdFontSize: 18px;
    --mainHeaderFontSize: 2rem;
    --hirHeaderFontSize: 3rem;
    --textPicHeaderFontSize: 2rem;
}

html
{
    font-family: var(--stdFont);
    font-size: var(--stdFontSize);

    --webkit-scrollbar-width: thin;
    scrollbar-width: thin;
    --webkit-scrollbar-color: var(--headerBGClr) var(--defaultFontClr);
    scrollbar-color: var(--headerBGClr) var(--defaultFontClr);

    scroll-behavior: smooth;
}

html *
{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    scroll-margin-top: calc(var(--headerHeight) + 1rem);
    scroll-padding-top: calc(var(--headerHeight) + 1rem);
    scroll-snap-margin-top: calc(var(--headerHeight) + 1rem);
    z-index: auto;
}

body
{
    margin: 0;
    padding: 0;
    background-color: var(--bodyBGClr);
    font-weight: 400;
    line-height: 1.2;
    color: var(--defaultFontClr);
}

a, a:visited
{
    text-decoration: none;
}

.mainContent a:not(.moreLink),
.mainContent a:not(.moreLink):visited
{
    color: var(--linkClr);
    font-weight: 600;
}

#teaser ul,
#teaser ol
{
    padding-left: 1.6rem;
    margin-left: 0;
}


h1,h2
{
    margin-bottom: 2rem;
    font-size: var(--mainHeaderFontSize);
    letter-spacing: 2px;
    text-wrap: balance;
}

header h2
{
    font-weight: 400;
}

header:has(h2) h1,
header:has(h3) h2
{
    margin-bottom: 0.5rem;
}

.mainContent h3
{
    font-size: 1.2rem;
    letter-spacing: 1px;
    text-wrap: balance;
}

h2 + h3
{
    margin-bottom: 1.5rem;
}

#contentWrapper p,
#contentWrapper ul,
#contentWrapper ol
{
    text-wrap: pretty;
}

#centreAreaWrapper > article.frame-type-header h1
{
    padding-block: 0.35rem;
    margin-bottom: 1rem;
    text-transform: uppercase;
    text-align: center;
    /*font-size: 2.2rem;*/
    font-size: clamp(1.4rem, 1.8vw + 0.5rem, 2.2rem);
    border-top: 1px #888 solid;
    border-bottom: 1px #888 solid;
}

.mainContent ul, .mainContent p, .mainContent ol
{
    padding-top: 0.2em;
    padding-bottom: 0.3em;
}

.mainContent ul, .mainContent ol
{
    margin-left: 1em;
    padding-left: 1em;
}

ul.menu
{
    margin-left: unset;
    padding-left: unset;
    list-style: none;
}

#outerWrapper
{
    max-width: var(--maxOuterWidth);
    min-height: 100vh;
    margin-inline: auto;
    margin-block: 0.5rem;
    overflow: clip;
}

#outerWrapper > *
{
    max-width: 100%;
}
/*
.outerFrame
{
    display: grid;
    grid-template-columns: auto var(--contentWidth) auto;
}
*/
.outerFrame > *
{
    grid-column: 2;
}

.innerInsetFrame
{
    padding-inline: var(--stdInset);
}

#headerWrapper
{
    display: grid;
    grid-template-columns: auto var(--maxOuterWidth) auto;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    background-color: var(--headerBGClr);
    z-index: 100;
}

#header
{
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    height: var(--headerHeight);
}

.indexPage #header
{
    gap: 2rem;
}

#header > *
{
    width: fit-content;
}

.menuTitle
{
    display: flex;
    justify-content: flex-end;
    align-items: center;
    max-width: 0;
    max-height: 0;
    width: 100%;
    height: 3rem;
    font-size: 1.2rem;
    color: transparent;
    overflow: clip;

    transition: max-width var(--mobileMenuTransitionTime) ease-in, max-height var(--mobileMenuTransitionTime) ease-in;
}

#header:has(#openSearchForm:checked) #logoTopWrapper
{
    margin-top: 1.1rem;
    z-index: 200;
}

#logo > a
{
    display: block;
}

#logo img
{
    display: block;
    height: calc(var(--headerHeight) - 2rem);
    width: auto;
    margin-block: 1rem;
}

.searchButtonWrapper
{
    --searchButtonSize: 2rem;
    --shortSearchFormHeight: 0;

    margin-right: 0.4rem;
    z-index: 100;
}

.indexPage .searchButtonWrapper
{
    margin-right: 0;
}

#searchButtonWrapper
{
    width: var(--searchButtonSize);
    height: var(--searchButtonSize);
}

#searchButtonWrapper .form-label
{
    display: block;
    padding-left: 0.06rem;
    font-weight: 400;
    font-size: 0.9em;
    font-family: Arial, Helvetica, sans-serif;
}

.searchButtonLabel
{
    display: block;
    width: var(--searchButtonSize);
    height: var(--searchButtonSize);
    margin-right: 0.5rem;
    margin-top: 0.15rem;
    padding-inline: 0.4rem;
    padding-block: 0.4rem;
    border: none;
    background-color: transparent;
    border-radius: 0.5rem;
    cursor: pointer;
    transition: background-color 0.5s ease-in;
}

.searchButtonLabel input
{
    position: absolute;
    top: -500px;
}

.searchButtonLabel svg
{
    display: block;
    height: 100%;
    width: 100%;
    opacity: 1;
    overflow: clip;
    transition: all 0.3s ease-in;
}

.searchButtonLabel svg.close
{
    height: 0;
    width: 0;
    opacity: 0;
}

.searchButtonLabel:has(input:checked)
{
    position: fixed !important;
    top: 0;
    right: 0;
    z-index: 10;
}

.searchButtonWrapper:has(input:checked)
{
    --shortSearchFormHeight: 8rem;
}

.searchButtonLabel:has(input:checked) svg.lupe
{
    height: 0;
    width: 0;
    opacity: 0;
}

.searchButtonLabel:has(input:checked) svg.close
{
    height: 100%;
    width: 100%;
    opacity: 1;
}

.searchButtonLabel:hover
{
    background-color: black;
    fill: white;
}

.searchButtonLabel:focus,
.searchButtonLabel:focus-visible,
.searchButtonLabel:active
{
    background-color: white;
    fill: black;
}

.shortSearchFormWrapper
{
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    top: 0;
    right: 0;
    height: var(--shortSearchFormHeight);
    width: 100%;
    background-color: white;
    box-shadow: 0.5rem 0.5rem 0.5rem rgba(0,0,0,0.5);
    overflow: clip;
    z-index: 1;
}

.searchButtonWrapper:has(.fullSearchForm)
{
    display: none;
}

.shortSearchFormWrapper > *
{
    width: fit-content;
    height: fit-content;
}

.shortSearchFormWrapper #search
{
    width: fit-content;
}

/*** teaser header ***/
#teaserBox
{
    --imgSpacing: 6rem;
    --teaserFadeSpeed: 1.2s;

    position: relative;
    top: var(--headerHeight);
    margin-bottom: var(--headerHeight);
    overflow: clip;
    letter-spacing: 2px;
}

/** make teaser on index page start right below header **/
.indexPage #teaserBox
{
    top: calc(var(--headerHeight) - 0.5rem);
}

#teaser
{
    position: relative;
    height: var(--teaserHeight);
    width: 100%;
}

.indexPage #teaser
{
    grid-column: 1 / -1;
}

.teaserElement
{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: var(--teaserHeight);
    overflow: clip;
    pointer-events: none;

    opacity: 0;
    z-index: 1;
    transition: all var(--teaserFadeSpeed) ease-in;
}

.teaserElement.active
{
    pointer-events: auto;
    opacity: 1;
}

.teaserImg
{
    position: absolute;
    display: block;
    top: 50%;
    left: 50%;
    width: 100%;
    min-height: 100%;
    height: auto;
    object-fit: cover;
    transform: translate(-50%,-50%);
}

.teaserElementcontain
{
    object-fit: contain;
    /*background-position: left top;*/
}

.teaserImgcontain
{
    height: 100%;
    width: auto;
    min-width: 100%;
    left: unset;
    right: 0;
    object-fit: contain;
    transform: translate(0,-50%);
}

.teaserText
{
    position: absolute;
    right: min( 100% - (430px + var(--stdInset)), 50% + var(--imgSpacing) + 4rem);
    top: var(--boxPadding);
    width: max(430px, var(--contentWidth)/2 - var(--imgSpacing) - var(--stdInset) - 4rem);
    padding-inline: 2rem;
    padding-block: 2rem;
    background-color: rgba(255,255,255,0.6);
    border-radius: 1.5em;
}

.teaserElementdark .teaserText
{
    color: white;
    background-color: rgba(0,0,0,0.4);
}

.teaserTextright
{
    right: unset;
    left: calc(50% + var(--imgSpacing));
}

.teaserText h1,
.teaserText h2
{
    font-size: 2.4rem;
}

.indexPage .teaserText h1,
.indexPage .teaserText h2
{
    font-size: clamp(1.8rem, 2vw + 0.8rem ,2.5rem);
    letter-spacing: 3px;
    font-weight: 400;
}

.pageLayout0 #teaser:has(.bodytext),
.pageLayout4 #teaser:has(.bodytext)
{
    --teaserHeight: calc(100vh - var(--headerHeight) - 4rem);
}

.buttonLink,
.buttonLink2
{
    display: block;
    width: fit-content;
    margin-top: 1.5rem;
    padding-inline: 1rem;
    padding-block: 0.5rem;
    color: white;
    background-color: var(--redClr);
    border-radius: 0.5rem;
}
.buttonLink2
{
    color: black;
    background-color: var(--greenClr);
}

.imageNavigation
{
    display: flex;
    justify-content: center;
    column-gap: 2.5rem;

    position: absolute;
    bottom: 0.1rem;
    left: 50%;
    width: fit-content;
    /*min-width: 45%;*/
    padding-inline: var(--boxPadding);
    background-color: rgba(100, 100, 100, 0.5);
    border-radius: 1em;
    transform: translate(-50%, -50%);
    z-index: 5;
}

.dotWrapper
{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
}

.imageDot
{
    width: 1rem;
    aspect-ratio: 1 / 1;
    background-color: rgba(240, 240, 250, 0.5);
    border-radius: 50%;
    box-shadow: 0 0 0.6em 0.1em rgba(0,0,20,0.8);
    transition: all var(--teaserFadeSpeed) ease-in;
    cursor: pointer;
}

.imageDot.active
{
    width: 1.5rem;
    background-color: rgba(255, 255, 255, 0.95);
    /*box-shadow: 0 0 0.9em 0.15em rgba(240,240,255,0.8);*/
    mix-blend-mode: difference;
}

/*
.pageLayout0 #teaser,
.pageLayout4 #teaser
{
    height: auto;
    padding: 0;
}

.pageLayout0 #teaser article,
.pageLayout4 #teaser article
{
    width: 100%;
    position: relative;
}

.pageLayout0 #teaser header,
.pageLayout4 #teaser header
{
    position: absolute;
    color:  white;
    width: 40em;
    height: 20em;
    padding: 48px;
    z-index: 1;
}

.pageLayout0 #teaser h1,
.pageLayout4 #teaser h1
{
    font-size: 72px;
    font-weight: 400;
    line-height: 84px;
}

.pageLayout0 #teaser img,
.pageLayout4 #teaser img
{
    width: 100%;
    border-radius: 30px;
}

.pageLayout0 #teaser .ce-textpic,
.pageLayout4 #teaser .ce-textpic
{
    position: relative;
}

.pageLayout0 #teaser .ce-bodytext,
.pageLayout4 #teaser .ce-bodytext
{
    position: absolute;
    width: 515px;
    transform: translate(0, -400px);
    font-size: var(--generalPadding);
    line-height: 30px;
    font-weight: 450;
    left: 0;
    color: white;
}

.pageLayout0 #teaser .ce-bodytext > *,
.pageLayout4 #teaser .ce-bodytext > *
{
    padding-left: 48px;
}
 */

#page:not(.indexPage)
{
    #teaser
    {
        --teaserHeight: calc(80vh - var(--headerHeight) - 6rem);
        --boxPadding: 3rem;
        --boxRadius: 3rem;

        background-color: var(--bodyBGClr);
    }

    #teaser:has(.hirTextWrapper)
    {
        height: auto;
        min-height: var(--teaserHeight);
    }

    .teaserText
    {
        background-color: unset;
    }

    .teaserElementdark .teaserText,
    .teaserElementblack .teaserText
    {
        background-color: rgba(0,0,0,0.5);
        color: white;
    }

    .teaserElement
    {
        position: static;
    }

    .teaserImg
    {
        position: static;
        border-radius: var(--boxRadius);
        transform: unset;
    }

    .teaserElement
    {
        border-radius: var(--boxRadius);
        overflow: clip;
    }
}

.teaserImgDescription
{
    position: absolute;
    bottom: 2rem;
    left: 10%;
    width: 80%;
    padding-inline: var(--boxPadding);
    padding-block: var(--boxPadding);
    border-radius: var(--boxRadius);
    background-color: rgba(255,255,255,0.7);
}

.headerImageRight .gridFlexWrapper
{
    display: grid;
    grid-template-columns: 5fr 7fr;
    grid-column-gap: var(--stdColGap);
    grid-row-gap: 4rem;
}

.headerImageRight .gridFlexWrapper > *
{
    display: table-cell;
    min-height: 100%;
    /*max-height: var(--teaserHeight);*/
}

.hirTextWrapper
{
    width: 100%;
    padding-inline: var(--boxPadding);
    padding-top: calc(var(--boxPadding) / 2);
    border-radius: var(--boxRadius);
    background-color: #000000;
    color: #ffffff;
    overflow-y: auto;
}

.hirTitle header > *
{
    font-size: var(--hirHeaderFontSize);
    line-height: 1.2;
    font-weight: 400;
    letter-spacing: 3px;
}

.textPage .hirTitle header > *
{
    font-size: 3rem;
    hyphens: auto;
}

.hirBodytext
{
    font-weight: 450;
    font-size: 1.2em;
    line-height: 1.4;
    text-wrap: pretty;
    padding-bottom: 1.5rem;
}

.hirTextWrapper:has(.bottomMedia) .hirBodytext
{
    padding-bottom: 4rem;
}

.hirBodytext p
{
    padding-bottom: 0.5rem;
}

@media screen and (max-height: 740px) and (orientation: landscape)
{
    :root
    {
        --hirHeaderFontSize: 2rem;

    }
    .hirTitle header > *
    {
        margin-bottom: 0.8rem;
    }
    .hirBodytext
    {
        font-size: 1rem;
        line-height: 1.2;
    }
}

.hirBodytext ul
{
    padding-inline-start: 60px;
}

.hirTextWrapper:has(.bottomMedia)
{
    position: relative;
}

.hirTextWrapper .bottomMedia
{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2rem;
    position: absolute;
    bottom: 1.5rem;
    left: 50%;
    width: fit-content;
    transform: translateX(-50%);
}

.hirTextWrapper .bottomMedia > img
{
    height: 1rem;
    width: auto;
}

.hirImage
{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    max-width: calc((var(--contentWidth) - 4rem) * 0.6);
    border-radius: var(--boxRadius);
    overflow: clip;
}

.headerImageRight .hirImage
{
    min-width: 100%;
    margin-left: auto;
}

.hirImageBGwhite
{
    background-color: white;
}

.hirImageBGblack
{
    background-color: black;
}

.hirImageBGred,
.hirImageBGrot
{
    background-color: var(--redClr);
}

.hirImageBGgreen
{
    background-color: var(--greenClr);
}

.hirImageBGblue
{
    background-color: var(--blueClr);
}

.hirImageBGgrey
{
    background-color: var(--greyClr);
}
/*
.hirTextWrapper
{
    max-width: calc((var(--contentWidth) - 4rem) * 0.4);
}
*/
.hirImage img
{
    display: block;
    min-width: 100%;
    width: auto;
    min-height: 100%;
    height: auto;
    object-fit: cover;
}

.hirImage[data-contain="1"] img
{
    width: auto;
    max-width: 100%;
    min-width: unset;
    height: auto;
    max-height: 100%;
    min-height: unset;
    object-fit: contain;
}

.headerImageRightWrapper,
.headerImageRight,
.gridFlexWrapper
{
    height: 100%;
}

/*** main content ***/
#contentWrapper
{
    /*--stdFontSize: 24px;
    --mainHeaderFontSize: 3rem;*/
}
#contentWrapper
{
    font-size: var(--stdFontSize);
    line-height: 1.3;
}

#contentWrapper h2,
#contentWrapper h3
{
    line-height: 1.2;
}
#headerWrapper + main
{
    margin-top: var(--headerHeight);
}
#centreAreaWrapper
{
    display: grid;
    grid-template-columns: auto var(--maxContentWidth) auto;
    padding-inline: var(--stdInset);
    background-color: var(--contentBGClr);
    letter-spacing: 1px;
    overflow-x: clip;
}

#centreAreaWrapper > *
{
    grid-column: 2;
}

#breadCrumbWrapper
{
    position: relative;
    margin-top: calc((var(--boxPadding) / 2) + 0.5rem);
    margin-bottom: 1.5rem;
    z-index: 10;
}

#outerWrapper:has(#teaserBox) #breadCrumb
{
    position: absolute;
    left: 0;
    top: calc(50% + 0.5rem);
    transform: translateY(-50%);
}
#breadCrumb
{
    display: flex;
    position: relative;
    top: 1rem;
    width: 100%;
    padding-inline: var(--boxPadding);
    padding-block: calc(var(--boxPadding) / 2);
    border-radius: calc(var(--boxRadius) / 2);
    background-color: white;
    font-size: max(12px, 0.8em);
    color: black;
    border: 1px var(--linkClr) ridge;
    box-shadow: 0.5rem 0.5rem 0.5rem rgba(0,0,0,0.4);
}

#breadCrumb > span
{
    white-space: nowrap;
}

nav[aria-label="Breadcrumb"] ol
{
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    padding: 0;
    list-style: none;
}

nav[aria-label="Breadcrumb"] li::after
{
    content: "›";
    margin: 0 0.5rem;
}

nav[aria-label="Breadcrumb"] li:last-child::after
{
    content: "";
}

#page.globalElements #centreAreaWrapper
{
    display: grid;
    grid-template-columns: repeat(5,1fr) !important;
}

#page.globalElements #lowerContent
{
    display: grid;
    grid-template-columns: auto var(--contentWidth) auto;
}

#page.globalElements #lowerContent > *
{
    grid-column: 2;
}

#centreAreaWrapper > *
{
    grid-column: 2;
    max-width: calc(100dvw - 1rem);
}

.globalElements #centreAreaWrapper > *
{
    grid-column: auto;
}

#centreAreaWrapper > .frame-layout-3
{
    display: grid;
    grid-template-columns: var(--stdInset) auto var(--stdInset);
    grid-column: 1 / -1;
}

#centreAreaWrapper > .frame-layout-3 > *
{
    grid-column: 2;
}

#page:not(.indexPage) #centreAreaWrapper > *:last-child
{
    margin-bottom: var(--boxPadding);
}

#centreAreaWrapper > .frame:not(.frame-layout-3)
{
    padding-block: var(--boxPadding);
}

#centreAreaWrapper > article.frame-type-menu_subpages
{
    padding-top: 0 !important;
    margin-inline: 5px;
}

#centreAreaWrapper > .frame-default.frame-type-mask_selection_menu
{
    padding-top: calc(var(--boxPadding) / 2);
    padding-bottom: var(--boxPadding);
}

.frame
{
    max-width: 100dvw;
    overflow: clip;
}

.frame-darkBG
{
    margin-block: var(--boxPadding);
    padding-block: calc(var(--boxPadding) * 2);

    background-color: black;
    color: white;
}

.frame-darkBG:has(.tx-powermail)
{
    margin-block: unset;
}

#centreAreaWrapper > .frame:first-child
{
    margin-top: 0;
}

.moreLink
{
    display: block;
    width: fit-content;
    padding-inline: var(--stdInset);
    padding-block: calc(var(--boxPadding)/2);
    margin-block: var(--boxPadding);
    color: white;
    background-color: black;
    border: 1px solid #000000;
    font-size: var(--stdFontSize);
    font-weight: bold;
    letter-spacing: 2px;
    border-radius: var(--boxPadding);
}

.moreLink:hover
{
    border: 1px solid #000000;
    background-color: var(--greyClr);
    color: #000000;
}

.boxItemBGblack .moreLink
{
    background-color: white;
    color: black;
}

.intext .textpicImage
{
    float: left;
    margin-bottom: 1rem;
}

.imageHPosRight.intext .textpicImage
{
    margin-left: 1rem;
}

.imageHPosRight.intext:has(img) .textpicBodytext > *
{
    float: left;
}

.imageHPosLeft.intext .textpicImage
{
    margin-right: 1rem;
}

.imageHPosLeft.intext .textpicBodytext > *:first-child
{
    float: right;
}

.ce-image figure.image
{
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1rem;
    border-radius: var(--generalPadding);
    background-color: #ffffff;
}

.ce-image img.image-embed-item
{
    width: 100%;
    border-radius: var(--generalPadding);
}

.mainContent .frame-type-text,
.mainContent .frame-type-textpic:not(:has(.ce-gallery))
{
    padding-inline: var(--boxPadding);
    padding-block: var(--boxPadding);
    margin-top: var(--boxPadding);
    background-color: white;
    border-radius: var(--boxRadius);
}

.mainContent section[data-maxcols] article
{
    display: flex;
    flex-direction: column;
    margin-top: 0;
}

/*** tables ***/
figure:has(table),
.textpicBodytext > table
{
    min-width: 100% !important;
    max-width: 100%;
    overflow-x: auto;
}
figure > table,
table.contenttable
{
    width: 100%;
}
p + table
{
    margin-top: 2rem;
}

.textpicBodytext table
{
    border: 1px black solid;
    border-collapse: collapse;
}

.textpicBodytext td,
.textpicBodytext th
{
    padding-inline: 1rem;
    padding-block: 0.3rem;
    border: 1px solid black;
    border-collapse: collapse;
    /*white-space: nowrap;*/
    text-wrap: balance;
}

.textpicBodytext td:nth-child(2),
.textpicBodytext td[colspan]
{
    white-space: normal;
}

.textpicBodytext td > a
{
    display: block;
}

.textpicBodytext td a > img
{
    max-height: 3rem;
    /*width: auto;*/
}

#page:not(.accordionPage) .textpicBodytext td a > img
{
    width: auto;
}

.textpicBodytext thead tr,
.textpicBodytext tbody tr:first-child
{
    background-color: var(--tableHeaderGB);
    color: var(--tableHeaderColor);
    white-space: normal;
}

.textpicBodytext thead tr:has(img)
{
    color: revert;
    background-color: revert;
}

.textpicBodytext table:has(thead tr img)
{
    width: max(60%,600px);
    max-width: 100%;
    margin-inline: auto;
}

.textpicBodytext table:has(thead) tbody tr:first-child,
.textpicBodytext tbody tr:last-child
{
    background-color: revert;
    color: revert;
}

.textpicBodytext td:has(a > img)
{
    width: 2rem;
    padding-inline: 0;
    text-align: center;
}

.textpicBodytext td p:has(a img)
{
    margin-top: auto;
    margin-bottom: auto;
}
/*** accordion display ***/
.accordionElement
{
    margin-bottom: var(--boxPadding);
}
.accordionElement > header
{
    position: relative;
    padding-left: var(--boxPadding);
    padding-right: var(--boxPadding);
    padding-block: calc(var(--boxPadding)/3);
    background-color: black;
    color: white;
    border-radius: 0.5rem;
    cursor: pointer;

    transition: background-color 1s ease-in, color 1s ease-in;
}
.accordionElement > header:before
{
    content: "→";
    position: absolute;
    left: 0.5rem;
    top: 50%;
    color: white;
    font-weight: bold;
    font-size: 1rem;
    transform: translate(0,-50%) rotate(0);
    ;
    transition: transform 0.2s ease-in;
}
.accordionElement.active > header
{
    /*background-color: #444;*/
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
}
.accordionElement.active > header:before
{
    transform: translate(0,-50%) rotate(90deg);
}
.accordionElement > header > *
{
    padding: 0;
    margin: 0;
    font-size: 1.2rem;
    letter-spacing: 2px;
    line-height: 1;
}
.accordionElement.active > header > *
{
    font-weight: 550 !important;
}
.accContent
{
    max-height: 0;
    overflow: clip;

    transition: max-height 1s ease-in;
}

.accContent .frame-type-mask_textpic .textpicBodytextWrapper
{
    padding-top: 1rem;
    padding-inline: var(--boxPadding);
    border-top-right-radius: 0;
    border-top-left-radius: 0;
}

.accordionElement.active .accContent
{
    max-height: 300vh;
    /*transition: max-height 1s ease-in;*/
    overflow-y: auto;
}

    /*** footer ***/
#footerWrapper
{
    grid-column: 1 / -1 !important;
    padding-block: var(--boxPadding);
    background-color: black;
    color: white;
}
#footer a
{
    color: inherit;
}

.footerIcons img
{
    display: block;
    width: 100%;
    height: auto;
}
#footer
{
    display: grid;
    grid-template-columns: repeat(auto-fill,minmax(calc(var(--contentWidth)/4 - 2rem),1fr));
    max-width: min(98vw,var(--maxContentWidth));
    margin-inline: auto;
    margin-block: var(--boxPadding);
    font-size: 1.2rem;
    font-weight: 300;
    color: #f0f0f0;
    line-height: 1.5em;
}
#footer .submenuHeader
{
    margin-bottom: 0.2em;
    font-weight: 600;
    letter-spacing: 1px;
    color: white;
}
#footer .submenuHeader,
.footerShipping,
.footerAccept
{
    margin-top: 1rem;
}
#footer .submenuHeader:first-child
{
    margin-top: 0;
}
/** lower menu **/
#bottomMenu
{
    /**/
}

/** shipping **/
/** payment **/
.paymentIcons
{
    display: grid;
    grid-template-columns: repeat(3, 70px);
    grid-column-gap: 0.4rem;
    grid-row-gap: 0;
}

/** social media **/
.socialMediaIcons
{
    display: flex;
    gap: 1rem;
}
.socialMediaIcon
{
    width: 40px;
    height: auto;
}
/** copyright **/
#copyright
{
    grid-column: -2 / -1;
}

#paypalPayment
{
    /** this svg is different! **/
    margin-top: 0.6rem;
}

/* contact Text Element */

.frame-type-mask_element_group:has(.tx-powermail) .frame-type-text
{
    background-image: url("images/paperPlane.png");
    background-repeat: no-repeat;
    background-position: right bottom;
    background-size: auto 50%;
}

    /*** mask elements ***/
/** general **/

/** Distributoren **/

.frame-type-mask_element_group:has(.frame-type-mask_distributor_element)
{
    align-items: stretch;
}

.frame-type-mask_distributor_element .distributorWrapper
{
    position: relative;
    height: 100%;
    border-radius: 38px;
    background-color: #000000;
    color: #ffffff;
}

.frame-type-mask_distributor_element a,
.frame-type-mask_distributor_element a:visited
{
    color: #ffffff;
}

.frame-type-mask_distributor_element .imageWrapper img
{
    width: 100%;
    height: 200px;
    border-radius: 38px 38px 0 0;
    background-color: #ffffff;
}

.distributorText
{
    padding: var(--generalPadding);
    padding-right: 60px;
    margin-bottom: 40px;
}

.distributorArrow
{
    position: absolute;
    background-image: url("images/arrow-45.png");
    background-repeat: no-repeat;
    height: 38px;
    width: 37px;
    background-position: top right;
    bottom: 20px;
    right: 20px;
}

.distributorArrow:hover
{
    background-image: url("images/arrow-45red.png");
}

.distributorText > a
{
    display: block;
    font-size: 27px;
    line-height: 34px;
    margin-bottom: 20px;
}

.distributorText a
{
    word-break: break-word;
}

.frame-type-mask_distributor_element .bodyText
{
    font-size: 18px;
    line-height: 24px;
}

/* linkGroup - Produktdetaillinks */

.linkGroup
{
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.linkGroup a
{
    display: flex;
    align-items: center;
    justify-content: center;
    padding-block: 16px;
    padding-inline: 36px;
    border-radius: var(--generalPadding);
    background-color: #000000;
    color: #ffffff !important;
}

.linkGroup .groupLink1,
.linkGroup .groupLink4
{
    flex: 1;
    min-width: calc(100% / 3);
}

.linkGroup .groupLink2,
.linkGroup .groupLink3
{
    flex: 2;
    min-width: calc(100% / 3);
}

.boxItem
{
    padding-block: var(--boxPadding);
    padding-inline: var(--boxPadding);
    border-radius: calc(var(--boxPadding) - 2px);
    background-color: white;
    border: 1px white solid;
    color: var(--defaultFontClr);

    /* transition: all 0.3s ease-in; */
}
.boxItem:has(.productImage)
{
    border: none;
}
.distributorWrapper.boxItem
{
    padding-block: 0;
    padding-inline: 0;
}
.distributorWrapper a
{
    display: block;
}
.boxItemBGblack,
.newsColorblack .newsImage
{
    background-color: black;
    border-color: black;
    color: white;
}
.boxItemBGblue,
.newsColorblue .newsImage
{
    background-color: var(--blueClr);
    border-color: var(--blueClr);
    color: white;
}
.boxItemBGgreen,
.newsColorgreen .newsImage
{
    background-color: var(--greenClr);
    border-color: var(--greenClr);
    color: var(--defaultFontClr);
}
.boxItemBGred,
.newsColorred .newsImage
{
    background-color: var(--redClr);
    border-color: var(--redClr);
    color: white;
}
.boxItemBGgrey,
.newsColorgrey .newsImage
{
    background-color: var(--greyClr);
    border-color: var(--greenClr);
    color: var(--defaultFontClr);
}
.boxItemBGwhite,
.newsColorwhite .newsImage
{
    background-color: white;
    border-color: white;
    color: var(--defaultFontClr);
}
.indexPage section.frame-type-mask_text_image_link.frame-layout-3:has(.boxItemBGwhite)
{
    margin-block: var(--boxPadding);
    background-color: white;
}
article:hover .boxItemHoverBGblue
{
    background-color: var(--blueClr);
    border-color: var(--blueClr);
    color: white;
}
.boxItemHoverBGblue:hover
{
    background-color: var(--blueClr);
    border-color: var(--blueClr);
    color: white;
}
.boxItemHoverBGgreen:hover
{
    background-color: var(--greenClr);
    border-color: var(--greenClr);
    color: black;
}
.boxItemHoverBGred:hover
{
    background-color: var(--redClr);
    border-color: var(--redClr);
    color: white;
}
.boxItemHoverBGgrey:hover
{
    background-color: var(--greyClr);
    border-color: var(--greyClr);
    color: var(--defaultFontClr);
}
.boxItemHoverBGwhite:hover
{
    background-color: white;
    border-color: white;
    color: var(--defaultFontClr);
}
.boxItemHoverBGblack:hover
{
    background-color: black;
    border-color: black;
    color: white;
}

.boxItem a:not(.moreLink),
.boxItem a:not(.moreLink):visited
{
    color: inherit;
}
.boxItemBGblack:has(.imageText)
{
    background: transparent;
}
.boxItem .imageText
{
    display: flex;
    justify-content: flex-start;
    column-gap: var(--stdColGap);
    row-gap: var(--stdInset);
}
.boxItem:nth-child(odd) > .imageText
{
    flex-direction: row-reverse;
    justify-content: flex-end;
}
.imageText > *
{
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 50%;
    /*max-width: calc(var(--contentWidth) / 2 - var(--stdColGap));*/
    border-radius: var(--boxPadding);
}
.boxItemBGblack .imageText > .textContent
{
    background-color: black;
}


/** shortcut **/
.frame-type-mask_shortcut
{
    aspect-ratio: 1/1;
}

.shortcutWrapper
{
    width: 100%;
    aspect-ratio: 1;
    border-radius: 20px;
    margin-bottom: 20px;
    transition: all 0.3s ease-in;
}

.shortcut,
.shortcut a,
.shortcutHeaderWrapper,
.shortcutHeader,
.shortcutIcon
{
    height: 100%;
    width: 100%;
}

.shortcut a,
.shortcut a:visited
{
    display: block;
    color: inherit;
    padding: 1.5em;
}

.mainContent .shortcut a,
.mainContent .shortcut a:visited
{
    color: inherit;
}

.shortcutHeaderWrapper
{
    position: relative;
}

.shortcutHeader,
.shortcutIcon
{
    position: absolute;
}

.shortcutHeader
{
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
    font-size: 2rem;
}

.shortcutWrapper .shortcutIcon
{
    background-repeat: no-repeat;
    background-position: top left;
}

.shortcutWrapper .shortcutHeader
{
    background-repeat: no-repeat;
    background-position: top right;
}

.shortcutWrapper.house .shortcutIcon
{
    background-image: url("/typo3conf/ext/displayvisions/Resources/Public/Icons/homeWT.png");
}

.shortcutWrapper.bell .shortcutIcon
{
    background-image: url("/typo3conf/ext/displayvisions/Resources/Public/Icons/bellBK.png");
}

.shortcutWrapper.display .shortcutIcon
{
    background-image: url("/typo3conf/ext/displayvisions/Resources/Public/Icons/displayWT.png");
}

.shortcutWrapper.shpcart .shortcutIcon
{
    background-image: url("/typo3conf/ext/displayvisions/Resources/Public/Icons/shpcartBK.png");
}

.bell.boxItemHoverBGblack.shortcutWrapper:hover .shortcutIcon
{
    background-image: url("/typo3conf/ext/displayvisions/Resources/Public/Icons/bellWT.png");
}

.shpcart.boxItemHoverBGblack.shortcutWrapper:hover .shortcutIcon
{
    background-image: url("/typo3conf/ext/displayvisions/Resources/Public/Icons/shpcartWT.png");
}

.boxItemBGblue .shortcutHeader,
.boxItemBGred .shortcutHeader
{
    background-image: url("/typo3conf/ext/displayvisions/Resources/Public/Css/images/arrow45.png");
}

.boxItemBGwhite .shortcutHeader,
.boxItemBGgreen .shortcutHeader
{
    background-image: url("/typo3conf/ext/displayvisions/Resources/Public/Css/images/arrow45blk.png");
}

.boxItemHoverBGblack.shortcutWrapper:hover .shortcutHeader
{
    background-image: url("/typo3conf/ext/displayvisions/Resources/Public/Css/images/arrow45.png");
}

.shortcutWrapper.boxItemBGgreen
{
    color: var(--defaultFontClr);
}

.boxItemHoverBGblack.shortcutWrapper:hover
{
    color: white;
}


/* newsElement */
.newsWrapper
{
    height: 480px;
}

.newsElement
{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
    width: 100%;
    height: 100%;
    grid-column-gap: var(--stdColGap);
    grid-row-gap: var(--stdColGap);
}

.newsElement.imageorient26 .newsText,
.frame:nth-child(odd) .newsElement.imageorient0 .newsText
{
    order: 2;
}

.frame:nth-child(odd) .newsElement.imageorient0.newsColorred .newsImage
{
    background-color: black;
}

.newsElement.imageorient26 .newsImage
{
    order: 1;
}

.newsText,
.newsImage
{
    border-radius: var(--generalPadding);
}

.newsText
{
    background-color: white;
    padding-inline: var(--boxPadding);
    padding-block: var(--boxPadding);
}

.newsImage
{
    position: relative;
}

.newsSubtitle
{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 200px;
    font-weight: bold;
}

section:nth-last-of-type(2) .newsSubtitle
{
    font-size: 100px;
}

.newsElement .bodyText
{
    font-weight: 450;
    font-size: 24px;
    line-height: 36px;
}

.newsElement h2
{
    font-size: 54px;
    font-weight: 400;
}

/** box collage **/
.boxCollageElements
{
    --inlineBoxPadding: 1.4rem;
    --blockBoxPadding: 1.2rem;

    display: grid;
    grid-template-columns: repeat(12,1fr);
    grid-template-rows: 1fr 1fr;
    grid-column-gap: var(--stdColGap);
    grid-row-gap: 1.5rem;
}
.boxCollageElement
{
    position: relative;
}
.boxCollageElement1
{
    grid-column: 1 / 7;
    grid-row: 1 / -1;
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: clip;
}
.boxCollageElement2
{
    grid-column: 7 / -1;
    grid-row: 1;
    position: relative;
    overflow: clip;
}
.boxCollageElement3
{
    grid-column: 7 / 10;
    grid-row: 2;
}
.boxCollageElement4
{
    grid-column: 10 / -1;
    grid-row: 2;
}

.boxCollageElement .bodyText
{
    /*font-size: 1.2rem;
    line-height: 1.5;*/
}

.boxCollageElement1 *
{
    position: relative;
    z-index: 2;
}

.boxCollageElement1 .bodyText
{
    padding-top: 1rem;
}

.boxCollageElement2 .bodyText
{
    width: 35%;
}

.boxCollageElement3 .bodyText,
.boxCollageElement4 .bodyText
{
    display: flex;
    justify-content: flex-end;
    flex-direction: column;
    height: 100%;
}

.boxCollageElement1 .bgImage
{
    position: absolute;
    width: 100%;
    left: 10%;
    top: 55%;
    z-index: 1;
    transform: translate(0,-50%);
}

.boxCollageElement1 .bgImage img
{
    display: block;
    width: auto;
    height: 80%;
    margin-bottom: 10%;
}

.boxCollageElement2 .bgImage
{
    position: absolute;
    width: 100%;
    left: 40%;
    top: 50%;
    transform: translate(0,-50%);
}

.boxCollageElement2 .bgImage img
{
    display: block;
    width: 65%;
    height: auto;
}

.boxCollageLink
{
    display: block;
    position: absolute;
}

.boxCollageElement1 .boxItemLink
{
    color: var(--defaultFontClr);
}

.boxCollageElement1 .boxItemLink
{
    position: absolute;
    left: 2rem;
    bottom: 4.5rem;
    width: fit-content;
    font-weight: bold;
    z-index: 10;
}

.boxCollageElement1 .boxCollageLink
{
    display: flex;
    align-items: center;
    height: 3rem;
    padding-inline: 2rem;
    font-family: var(--mediumFont);
    background-color: white;
    border-radius: 1rem;
    white-space: nowrap;
}

.boxCollageElement1.boxItemBGwhite .boxCollageLink
{
    box-shadow: 0.5rem 0.5rem 0.5rem rgba(0,0,0,0.4);
}

.boxCollageElement1  .boxCollageLink:hover
{
    background-color: var(--greyClr);
}

.boxCollageElement1.boxItemHoverBGgrey  .boxCollageLink:hover
{
    background-color: var(--blueClr);
    color: white;
}

.boxCollageElement > .boxCollageLink
{
    display: block;
    position: absolute;
    top: var(--blockBoxPadding);
    left: var(--inlineBoxPadding);
    height: calc(100% - 2 * var(--blockBoxPadding));
    width: calc(100% - 2 * var(--inlineBoxPadding) );
    background-repeat: no-repeat;
    background-size: 1.2rem auto;
}

.boxCollageElement2 > .boxCollageLink
{
    background-image: url("images/arrowblk.png");
    background-position: left bottom;

    /*transition: all 1s ease-in;*/
}

.boxCollageElement2.boxItemHoverBGred > .boxCollageLink:hover,
.boxCollageElement2.boxItemHoverBGblack > .boxCollageLink:hover
{
    background-image: url("images/arrow.png");
}

.boxCollageElement3 > .boxCollageLink,
.boxCollageElement4 > .boxCollageLink
{
    background-image: url("images/arrow45blk.png");
    background-position: right top;
    /* transition: all 0.3s ease-in; */
}

.boxCollageElement3.boxItemHoverBGred:hover > .boxCollageLink,
.boxCollageElement4.boxItemHoverBGred:hover > .boxCollageLink,
.boxCollageElement3.boxItemHoverBGblack:hover > .boxCollageLink,
.boxCollageElement4.boxItemHoverBGblack:hover > .boxCollageLink
{
    background-image: url("images/arrow45.png");
}

/** text image link **/
.frame-type-mask_text_bild_link
{
    --textImageTextWidth: min(38rem,65vw);
}

.frame-type-mask_text_bild_link .textImageArticle
{
    overflow: clip;
}
.textImageLinkBox
{
    display: block;

}
.textImageLink
{
    display: block;
    position: relative;
}
.indexPage .textImageLink
{
    border-radius: var(--boxRadius);
    overflow: clip;
}
.textImageLink .textImageLinkBox
{
    border-radius: var(--boxPadding);
    background-image: url(images/arrow45.png);
    background-repeat: no-repeat;
    background-position: 98% var(--boxPadding);
    background-size: 2em auto;
}
.textImageLinkBox .textContent
{
    max-width: var(--textImageTextWidth);
}
.frame-type-mask_text_bild_link .bgImage
{
    position: absolute;
    top: 50%;
    min-height: 100%;
    left: calc( var(--stdInset) + var(--textImageTextWidth) );
    transform: translateY(-50%);
}

/** text image link button **/
.frame-type-mask_text_image_link
{
    --imageWidth: min(35%,36rem);
    color: black;
}
.frame-type-mask_text_image_link .textImageArticle
{
    position: relative;
    margin-left: var(--stdInset);
}
.frame-type-mask_text_image_link .textContent
{
    padding-inline: var(--boxPadding);
    padding-block: var(--boxPadding);
    max-width: calc(100% - var(--imageWidth) + var(--boxPadding));
}
.frame-type-mask_text_image_link .textContent header
{
    padding-top: var(--boxPadding);
}
.frame-type-mask_text_image_link .bgImage
{
    position: absolute;
    top: 0;
    right: calc(var(--stdInset) * -2);
    width: calc(var(--imageWidth) + var(--boxPadding));
}
.frame-type-mask_text_image_link .bgImage img
{
    width: 100%;
    height: auto;
}
.frame-type-mask_text_image_link .bgImage img.rotate
{
    animation: 5s infinite reverse img-rotate linear;
}
@keyframes img-rotate
{
    from {
        transform: rotate(0);
    }
    to {
        transform: rotate(360deg);
    }
}
/** Product Box **/
.productLink
{
    height: 100%;
    background-image: url("images/arrow-45.png");
    background-position: calc(100% - 1.5em) calc(100% - 1.3em);
    background-repeat: no-repeat;
    background-size: 1.8em auto;
}
#page.indexPage .productBoxElement .productImage
{
    height: calc( var(--productBoxHeight) * 0.45);
}
#page.indexPage .productBoxElement .textContent
{
    height: calc( var(--productBoxHeight) * 0.55);
}

.productBoxElement[data-layout="1"] .textContent
{
    flex-grow: 1;
    flex-basis: 100%;
    height: auto;
}
.productLinkHoverred:hover
{
    background-image: url("images/arrow-45red.png");
}
.productLinkHoverblue:hover
{
    background-image: url("images/arrow-45blue.png");
}
.productLinkHovergreen:hover
{
    background-image: url("images/arrow-45green.png");
}
.productBoxElement
{
    height: 100%;
    padding-inline: 0;
    padding-block: 0;
    background: transparent;
    overflow: clip;
}
.productBoxElement .productImage
{
    position: relative;
    display: flex;
    justify-content: center;
    vertical-align: middle;
    transition: all 1s ease-in;
}
.productBoxElement .productImage img
{
    display: block;
    height: 100%;
    width: auto;
    min-width: 100%;
    object-fit: cover;
}
.productBoxElement .productImage[data-layout="1"] img
{
    width: 100%;
}
.productBoxElement .productImage img.svgImg,
.productBoxElement .productImage:not([data-layout="1"]) img.pngImg
{
    position: absolute;
    left: 50%;
    top: 50%;
    height: auto;
    max-height: 95%;
    max-width: 98%;
    object-fit: contain;
    transform: translate(-50%,-50%);
}
.productLink:hover .boxItemHoverBGred
{
    background-color: var(--redClr);
}
.productLink:hover .boxItemHoverBGblue
{
    background-color: var(--blueClr);
}
.productLink:hover .boxItemHoverBGgreen
{
    background-color: var(--greenClr);
}
.productBoxElement .textContent
{
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding-inline: 2rem;
    padding-top: 1.7rem;
}
.productBoxElement header
{
    padding-bottom: 1rem;
    min-height: 3.3em;
}
.productBoxElement .textContent *
{
    /*font-weight: 600;*/
}

.productBoxElement .bodyText *
{
    font-size: var(--stdFontSize);
}
.indexPage .productBoxElement h3
{
    /*font-size: 1.6rem;*/
    line-height: 1.2;
    font-weight: 600;
}
.indexPage .productBoxElement .bodyText *
{
    font-size: max(12px,0.8rem);
    letter-spacing: 1px;
}
.imageText .productImage
{
    display: block;
    min-height: 20rem;
    overflow: clip;
}
.imageText .productImage img
{
    display: block;
    max-height: 85% !important;
    opacity: 1;

    transition: opacity 1s ease-in;
}
.imageText .productImage img.jpgImg
{
    position: absolute;
    left: 50%;
    top: 50%;
    max-height: unset !important;
    min-height: 100%;
    min-width: 100%;
    object-fit: cover;
    transform: translate(-50%,-50%);
}
.imageText .productImage img.secondImage
{
    opacity: 0;
}
.imageText .productImage:has(.secondImage):hover img.firstImage
{
    opacity: 0;
}
.imageText .productImage:hover img.secondImage
{
    opacity: 1;
}
.productBoxElement .moreLink
{
    padding-inline: calc(var(--stdInset)/2);
    padding-block: calc(var(--boxPadding)/2);
    margin-block: 1rem;
    color: black;
    background-color: var(--greenClr);
    font-size: var(--stdFontSize);
    font-weight: 600;
}

.productBoxElement .moreLink:hover
{
    background-color: var(--greyClr);
}

    /** Element Group **/
.frame-type-mask_element_group
{
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(var(--groupItemWidth),1fr));
    grid-column-gap: var(--stdColGap);
    grid-row-gap: 2rem;
    padding-block: calc(var(--boxPadding) * 2);
}
.frame-type-mask_element_group:has( > *:nth-child(4))
{
    grid-template-columns: repeat(auto-fit, minmax(var(--groupItemWidth),1fr));
}
.frame-type-mask_element_group[data-maxcols="1"]
{
    --groupItemWidth: calc(var(--contentWidth));

    max-width: var(--contentWidth);
}
.frame-type-mask_element_group[data-maxcols="1"] > *
{
    max-width: var(--groupItemWidth);
}
.frame-type-mask_element_group[data-maxcols="2"]
{
    --groupItemWidth: calc(var(--maxContentWidth)/2 - 5rem);
}
.frame-type-mask_element_group[data-maxcols="3"]
{
    --groupItemWidth: calc(var(--maxContentWidth)/3 - 5rem);
}
.frame-type-mask_element_group[data-maxcols="4"]
{
    --groupItemWidth: calc(var(--maxContentWidth)/4 - 4rem);
}
.indexPage .frame-type-mask_element_group[data-maxcols="4"]
{
    --groupItemWidth: calc(var(--maxContentWidth)/4 - 3rem);
}
.frame-type-mask_element_group[data-maxcols="5"]
{
    --groupItemWidth: calc(var(--maxContentWidth)/5 - 5rem);
}
.frame-type-mask_element_group[data-maxcols="6"]
{
    --groupItemWidth: calc(var(--maxContentWidth)/6 - 5rem);
}
.frame-type-mask_element_group.frame-layout-1[data-maxcols="2"]
{
    /*
    --groupItemWidth: calc(var(--maxContentWidth)/2 - 10rem);

    display: flex;
     */
    grid-template-columns: 5fr 7fr;
}
.frame-type-mask_element_group.frame-layout-1[data-maxcols="2"] > *
{
    flex-grow: 1;
    flex-shrink: 1;
    min-width: 380px;
}
.frame-type-mask_element_group.frame-layout-1[data-maxcols="2"] > *:first-child
{
    flex-basis: min(var(--groupItemWidth), 98vw);
    flex-shrink: 0;
}
.frame-type-mask_element_group + .frame-darkBG
{
    margin-top: 0;
}

.frame-type-mask_element_group.frame-layout-0:has(.frame-type-mask_shortcut)
{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: var(--stdColGap);
    justify-content: center;
}

/** textSmallImage **/
.textSmallImage
{
    display: grid;
    grid-template-columns: 4fr 8fr;
    grid-column-gap: var(--stdColGap);
    grid-row-gap: var(--stdColGap);
}

.textSmallImage .wideText
{
    order: 2;
    flex: 2;
    padding: var(--boxPadding);
    border-radius: var(--boxRadius);
    background-color: #ffffff;
}

.textSmallImage .smallImage
{
    order: 1;
    flex: 1;
}

.textSmallImage .smallImage img
{
    height: 100%;
    width: auto;
    object-fit: cover;
    border-radius: var(--boxRadius);
}

/* Mask Textpic */

.frame-type-mask_textpic .flexGridWrapper.imageorient25,
.frame-type-mask_textpic .flexGridWrapper.imageorient26
{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    grid-column-gap: var(--stdColGap);
    grid-row-gap: 5px;
}

.flexGridWrapper.imageorient25 > *,
.flexGridWrapper.imageorient26 > *
{
    display: table-cell;
    height: 100%;
}

.frame-type-mask_textpic .flexGridWrapper.imageorient26 .textpicBodytextWrapper
{
    order: 2;
}

.frame-type-mask_textpic .flexGridWrapper.imageorient26 .textpicImageWrapper
{
    order: 1;
}

.imageVPosAbove .flexGridWrapper
{
    display: flex;
    flex-direction: column-reverse;
}

.imageVPosAbove:has(.textpicImageWrapper) .textpicBodytextWrapper
{
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

.imageVPosAbove .textpicImageWrapper
{
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.imageVPosBelow .flexGridWrapper
{
    display: flex;
    flex-direction: column;
}

.imageVPosBelow:has(.textpicImageWrapper) .textpicBodytextWrapper
{
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.imageVPosBelow .textpicImageWrapper
{
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

.frame-type-mask_textpic .textpicImageWrapper:has(.textpicImage2)
{
    flex-wrap: wrap;
}

.imageVPosBelow .textpicImageWrapper:has(.textpicImage2) > *
{
    flex-basis: 400px;
    flex-grow: 1;
    flex-shrink: 1;
}

.imageHPosLeft.imageVPosAbove .flexGridWrapper .texpicImageWrapper,
.imageHPosLeft.imageVPosBelow .flexGridWrapper .texpicImageWrapper
{
    justify-content: flex-start;
}

.imageHPosRight.imageVPosAbove .flexGridWrapper .texpicImageWrapper,
.imageHPosRight.imageVPosBelow .flexGridWrapper .texpicImageWrapper
{
    justify-content: flex-end;
}

.frame-type-mask_textpic .textpicHeader header
{
    font-size: var(--textPicHeaderFontSize);
    line-height: 44px;
    font-weight: 400;
}

.frame-type-mask_textpic .textpicHeader header > *
{
    font-size: inherit;
    line-height: inherit;
    font-weight: inherit;
}

.textPage .frame-type-mask_textpic .textpicHeader header > h3
{
    font-size: 1.5rem;
    line-height: 1.3;
    padding-bottom: 0.4rem;
}

.textpicBodytext
{
    font-size: 18px;
    line-height: 24px;
    font-weight: 450;
}

.textpicBodytext img
{
    max-width: 100%;
    height: auto;
}

img[data-htmlarea-zoom="true"],
.gslide-media img
{
    border-top-left-radius: var(--boxRadius);
    border-top-right-radius: var(--boxRadius);
}

.gslide-description
{
    border-bottom-left-radius: var(--boxRadius);
    border-bottom-right-radius: var(--boxRadius);
}

/** hide search form on search page *
.fullSearchForm
{
    height: 0;
    width: 0;
    overflow: clip;
}
*/
.textpicBodytextWrapper,
.textpicImageWrapper,
.stdMenuWrapper,
article:has(.tx-indexedsearch-searchbox)
{
    padding: 38px;
    border-radius: var(--generalPadding);
}

.textpicImageWrapper.noneBackground
{
    padding: 0;
}

.frame-type-mask_textpic .textpicImageWrapper.noneBackground img
{
    border-radius: var(--generalPadding);
    width: 100%;
    height: auto;
}

.stdMenuWrapper,
article:has(.tx-indexedsearch-searchbox)
{
    font-size: max(0.8rem,12px);
}

.frame-type-mask_textpic .textpicImageWrapper
{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2rem;
    overflow: hidden;
    width: 100%;
}

.frame-type-mask_textpic .textpicImage img,
.frame-type-mask_textpic .textpicImage video
{
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: 100%;
    inset: auto;
    object-fit: contain;
    border-radius: var(--boxRadius);
}

.textpicImage
{
    height: auto;
    max-height: 720px;
    overflow-y: clip;
}

.textpicImage:has(iframe)
{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.flexGridWrapper:has(iframe) > .textpicBodytextWrapper
{
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.textpicImage iframe
{
    width: 90%;
    aspect-ratio: 4 / 3;
    border-radius: var(--boxRadius);
}

.textpicBodytextWrapper,
.stdMenuWrapper
{
    background-color: #ffffff;
}

.frame-type-mask_textpic .textpicImageWrapper.whiteBackground
{
    background-color: #ffffff;
}
.frame-type-mask_textpic .textpicImageWrapper.blackBackground
{
    background-color: #000000;
}
.frame-type-mask_textpic .textpicImageWrapper.redBackground
{
    background-color: var(--redClr);
}
.frame-type-mask_textpic .textpicImageWrapper.greenBackground
{
    background-color: var(--greenClr);
}
.frame-type-mask_textpic .textpicImageWrapper.blueBackground
{
    background-color: var(--blueClr);
}
.frame-type-mask_textpic .textpicImageWrapper.greyBackground
{
    background-color: var(--greyClr);
}

.frame-type-mask_textpic .textpicImageWrapper.whiteHover:hover
{
    background-color: #ffffff;
}
.frame-type-mask_textpic .textpicImageWrapper.blackHover:hover
{
    background-color: #000000;
}
.frame-type-mask_textpic .textpicImageWrapper.redHover:hover
{
    background-color: var(--redClr);
}
.frame-type-mask_textpic .textpicImageWrapper.greenHover:hover
{
    background-color: var(--greenClr);
}
.frame-type-mask_textpic .textpicImageWrapper.blueHover:hover
{
    background-color: var(--blueClr);
}
.frame-type-mask_textpic .textpicImageWrapper.greyHover:hover
{
    background-color: var(--greyClr);
}

.frame-darkBG .blackBackground .textpicBodytextWrapper
{
    background-color: transparent;
}

    /* Page Title */
.pageTitleWrapper,
.frame-type-menu_subpages > header
{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    text-align: center;
    padding-block: var(--boxPadding);
    padding-inline: var(--boxPadding);
    border-radius: var(--generalPadding);
    background-color: #ffffff;
}

.pageTitleWrapper  header > *
{
    font-size: var(--mainHeaderFontSize);
    font-weight: 400;
    line-height: 1.2;
    margin-bottom: 0;
    text-transform: uppercase;
}

.frame-type-menu_subpages > header
{
    margin-bottom: 0;
    font-size: 1.8rem;
    line-height: 1.1;
}

.pagesItemTitle > h3
{
    font-size: 1.2rem;
    line-height: 1.2;
}

/* Display Hinergrundbeleuchtung */

.displayWrapper
{
    width: 100%;
    height: 500px;
    background-color: #000000;
}

.displayElement,
.displayElement .flexGridWrapper,
.displayAnimationWrapper .displays
{
    width: 100%;
    height: 100%;
}

.displayAnimationWrapper .displays
{
    position: relative;
    width: 100%;
    height: 80%;
}

.displayElement .flexGridWrapper
{
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.displayElement .textWrapper
{
    color: #ffffff;
    padding: 60px;
}

.displayImageWrapper
{
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 550px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.displayImage
{
    width: 100%;
    height: auto;
}

.displayTitle
{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80%;
    text-align: center;
    white-space: pre-line;
}

.displayImageWrapper,
.displayTitle
{
    display: none;
}

.displayColors
{
    display: flex;
    justify-content: space-around;
    align-items: center;
}

.displayColor
{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    border-radius: 20px;
}

.displayColor > div
{
    width: inherit;
    height: inherit;
    border-radius: inherit;
}

.displayColor.active > div
{
    width: 20px;
    height: 20px;
}

.displayImageWrapper.active
{
    display: flex;
}
.displayTitle.active
{
    display: block;
}

#gelb_gruenCl{background-color: #EAFBA0;}
#weissCl{background-color: #FFFFFF;}
#blauCl{background-color: #0057FF;}
#amberCl{background-color: #FF9E15;}
#rotCl{background-color: #FA023C;}
#vollfarbigCl{background-image: linear-gradient(to right, #FF0000,#FAFF00,#14FF00,#00FFF0,#0029FF,#FF00E5,#FF0000);}
#stn_positivCl{background-color: #FFFFFF;}
#stn_blau_negativCl{background-color: #7835DD;}
#stn_gelb_gruenCl{background-color: #C5FF3E;}
#stn_reflektivCl{background-color: #6BBC1F;}
#fstn_negativCl{background-color: #000000; border: solid #ffffff 2px;}

#displayTitle1, #displayTitle2, #displayTitle4, #displayTitle5,
#displayTitle6, #displayTitle7, #displayTitle9. #displayTitle10
{color: #000000 !important;}

#displayTitle3, #displayTitle8, #displayTitle11
{color: #ffffff !important;}

/** Mask Bilder **/
#centreAreaWrapper .frame-type-mask_element_group:has(.frame-type-mask_bilder)
{
    padding-bottom: 0;
}
.frame-type-mask_bilder .textpicBodytextWrapper
{
    margin-bottom: calc(var(--stdColGap) / 2);
}
.frame-type-mask_bilder .textpicHeader header > *
{
    margin: 0 !important;
    text-align: center;
}
.maskImagesWrapper
{
    --minImageElWidth: 400px;
    display: grid;
    grid-column-gap: var(--stdColGap);
    grid-row-gap: var(--stdColGap);
    grid-template-columns: repeat(auto-fit,minmax(var(--minImageElWidth),1fr));
    margin-inline: auto;
}
.maskImagesWrapper[data-cols="1"]
{
    grid-template-columns: 1fr;
    width: fit-content;
}
.frame-type-mask_element_group .maskImagesWrapper[data-cols="1"]
{
    width: 100%;
}
.maskImagesWrapper[data-cols="3"]
{
    --minImageElWidth: 360px;
}
.maskImagesWrapper[data-cols="4"]
{
    --minImageElWidth: 300px;
}
@media screen and (min-width: 1290px)
{
    .maskImagesWrapper[data-cols="2"]
    {
        --minImageElWidth: 620px;
    }
}
@media screen and (max-width: 990px)
{
    .maskImagesWrapper[data-cols="2"]
    {
        grid-template-columns: repeat(auto-fit,minmax(360px,1fr));
    }
}
.maskImagesWrapper .textpicImage
{
    max-height: unset;
}
.maskImagesWrapper .imageWrapper
{
    display: flex;
    align-items: center;
    justify-content: center;
    padding-block: var(--generalPadding);
    padding-inline: var(--generalPadding);
    border-radius: var(--boxRadius);
}

.maskImagesWrapper > .imageWrapper
{
    background-color: white;
}

.maskImagesWrapper .textpicImage  img
{
    max-width: 100%;
    height: auto;
}

.textpicImage > .descriptionWrapper
{
    padding-bottom: var(--boxPadding);
    text-align: center;
}

    /*** end mask elements ***/

/*** standard content elements ***/
/** textpic **/

/*** Suche ***/
.tx-indexedsearch-info-noresult
{
    width: fit-content;
    margin-block: 1rem;
    margin-inline: auto;
}
.tx-indexedsearch-browsebox a.tx-indexedsearch-page-selector
{
    color: var(--defaultFontClr);
}
.tx-indexedsearch-browsebox a.tx-indexedsearch-page-selector:hover
{
    color: var(--linkClr);
}
.tx-indexedsearch-browsebox strong > a.tx-indexedsearch-page-selector
{
    color: var(--linkClr);
    cursor: default;
    pointer-events: none;
}
.tx-indexedsearch-form.input-group
{
    padding-inline: var(--boxPadding);
    padding-block: var(--boxPadding);
    border-radius: var(--boxRadius);
    background-color: white;
}
.tx-indexedsearch-rules,
.tx-indexedsearch-info-sword + .tx-indexedsearch-browsebox
{
    display: none;
}

.tx-indexedsearch-res
{
    padding-block: var(--boxPadding);
    padding-inline: var(--boxPadding);
    margin-block: 1rem;
    border-radius: 1.5em;
    font-size: 0.9rem;
    background-color: white;
    border: 1px #eeecf0 solid;
}

h3.searchResultHeader
{
    font-size: 1rem;
}

.tx-indexedsearch-res dl
{
    display: flex;
    column-gap: 1rem;
    row-gap: 1.5rem;
    margin-top: 1rem;
    font-size: 0.9em;
}
ul.tx-indexedsearch-browsebox
{
    display: flex;
    gap: 1em;
    flex-wrap: wrap;
    list-style: none;
    margin-inline: auto;
    padding-left: 0;
    width: fit-content;
}

.tx-indexedsearch-browsebox > li
{
    padding-block: 0.2rem;
    padding-inline: 0.5rem;
    background-color: white;
    border-radius: 0.3rem;
}

.tx-indexedsearch-res dd
{
    padding-right: 1em;
    border-right: 1px dotted var(--defaultFontClr);
}

.tx-indexedsearch-res dd:last-child
{
    padding-right: 0;
    border-right: none;
}

#tx-indexedsearch-searchbox-sword
{
    padding-block: 0.2rem;
    padding-inline: 0.3rem;
    font-size: 1em;
    border-width: 1px;
    border-radius: 0.3rem;
}

#tx-indexedsearch-searchbox-sword::placeholder
{
    font-size: 0.8em;
    font-style: italic;
}

#tx-indexedsearch-searchbox-button-submit
{
    padding-block: 0.4rem;
    padding-inline: 0.5rem;
    font-size: 0.9em;
    background-color: black;
    color: white;
    border-color: white;
    border-width: 1px;
    border-radius: 0.3rem;

    transition: all 0.5s ease-in;
}

#tx-indexedsearch-searchbox-button-submit:hover
{
    background-color: white;
    color: black;
    border-color: black;
    border-style: outset;
    box-shadow: 0.5rem 0.5rem 0.5rem rgba(0,0,0,0.5);
}

#tx-indexedsearch-searchbox-button-submit
{
    margin-left: 1rem;
    cursor: pointer;
}

#tx_indexedsearch fieldset + p:has(a)
{
    display: none;
}

.tx-indexedsearch-info-sword
{
    padding-top: var(--boxPadding);
    padding-inline: var(--boxPadding);
    font-weight: bold;
}

/*** menu elements ***/
/* submenu items */
.subMenuItem
{
    display: table-cell;
    height: 100%;
    border-radius: var(--boxPadding);
    overflow: clip;
    background-color: white;
    box-shadow: 1em 1em 1em rgba(0,0,0,0.4);

    transition: all 0.5s ease-in;
}
.pagesImage
{
    position: relative;
    height: calc(var(--scBoxSize) / 2 + 2.5rem);
    overflow: clip;
}
.pagesImage > img
{
    position: absolute;
    left: 50%;
    top: 50%;
    min-width: 100%;
    width: auto;
    min-height: 100%;
    height: auto;
    object-fit: cover;

    transform: translate(-50%,-50%);
}
.pagesImage > img.dummyImg
{
    width: 90%;
    min-width: unset;
    min-height: unset;
}
.pagesImage:has(.dummyImg)
{
    background-color: white;
}
.subMenuItem .menuItemText
{
    padding-inline: var(--boxPadding);
    padding-block: var(--boxPadding);

    transition: all 0.5s ease-in;
}
.subMenuItem:hover
{
    background-color: var(--blueClr);
    color: white;
}

.subMenuItem:hover .menuItemText
{
    color: white;
}

.subMenuItem:nth-child(odd):hover
{
    background-color: black;
}

.pagesItemTitle
{
    display: flex;
    align-items: center;
    min-height: 5rem;
    padding-bottom: 0.5em;
}

.pageInfo
{
    font-size: 0.8em;
}

/** spacing **/
/* before */
.frame-space-before-extra-small
{
    padding-top: var(--extraSmallSpacing) !important;
}
.frame-space-before-small
{
    padding-top: var(--smallSpacing) !important;
}
.frame-space-before-medium
{
    padding-top: var(--mediumSpacing) !important;
}
.frame-space-before-large
{
    padding-top: var(--largeSpacing) !important;
}
.frame-space-before-extra-large
{
    padding-top: var(--extraLargeSpacing) !important;
}
/* after */
.frame-space-after-extra-small
{
    padding-bottom: var(--extraSmallSpacing) !important;
}
.frame-space-after-small
{
    padding-bottom: var(--smallSpacing) !important;
}
.frame-space-after-medium
{
    padding-bottom: var(--mediumSpacing) !important;
}
.frame-space-after-large
{
    padding-bottom: var(--largeSpacing) !important;
}
.frame-space-after-extra-large
{
    padding-bottom: var(--extraLargeSpacing) !important;
}
/*** standard content elements end ***/

/*** powermail ***/
fieldset
{
    border: none;
}

.frame-layout-1 .powermail_form
{
    padding: 1em;
}

.powermail_submit
{
    margin-top: 3rem;
    padding-block: 1rem;
    padding-inline: 2.25rem;
    border-radius: 1.5rem;
    background-color: var(--greenClr);
    font-size: 1.5rem;
    line-height: 2rem;
    border: unset;
    cursor: pointer;
}

.powermail_submit:hover
{
    background-color: var(--greyClr);
}

.powermail_fieldwrap_type_captcha
{
    display: flex;
    align-items: center;
    column-gap: 1rem;
    padding-right: 0.3rem;
    margin-top: 1rem;
}

.powermail_fieldwrap_type_captcha > label
{
    text-align: right;
}

.powermail_fieldwrap_type_captcha .powermail_field
{
    display: flex;
    align-items: center;
    column-gap: 1rem;
}

.powermail_fieldwrap_type_captcha .powermail_field > input
{
    flex-basis: 4rem;
    flex-grow: 0;
    flex-shrink: 1;
    width: 4rem;
    min-width: 2rem;
    height: 1.8rem;
    text-align: center;
    border-bottom: 2px white solid;
}

.powermail_fieldwrap_type_captcha .powermail_field > img
{
    flex-grow: 1;
    flex-shrink: 0;
    width: 10rem;
    height: auto;
}

.powermail_form input[type="text"],
.powermail_form input[type="email"],
.powermail_form textarea
{
    width: 100%;
    padding-inline: 0.2rem;
    padding-block: 0.2rem;
    font-size: 0.9em;
    background-color: black;
    color: white;
    border-left: none;
    border-top: none;
    border-right: none;
    border-bottom: 2px white solid;
    font-size: 1.2em;
}

.powermail_fieldwrap.layout3
{
    position: relative;
    padding-block: 1.2rem;
    font-size: 1.8rem;
}

.powermail_fieldwrap:has(.powermail-errors-list.filled)
{
    position: relative;
}

.powermail_fieldwrap.layout3 *
{
    font-size: inherit;
}

.layout3 > .powermail_label
{
    position: absolute;
    top: 0.5rem;
    left: 0.2rem;
    pointer-events: none;

    transition: all 0.5s ease-in;
}

.powermail_fieldwrap .powermail-errors-list.filled
{
    position: absolute;
    top: calc(100% - 1.5rem);
    margin-left: 0;
    list-style: none;
    font-size: 0.8rem;
    color: #CC2222;
    background-color: white;
    pointer-events: none;
}

.powermail_fieldwrap.layout3:has(input:focus) > .powermail_label,
.powermail_fieldwrap.layout3:has(input:valid) > .powermail_label,
.powermail_fieldwrap.layout3:has(textarea:focus) > .powermail_label,
.powermail_fieldwrap.layout3:has(textarea:valid) > .powermail_label
{
    top: -0.35rem;
    font-size: 0.7em;
}

.powermail_field .checkbox label
{
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1.5rem;
    font-size: 1rem;
    font-weight: 300;
    line-height: 1.3;
}
.powermail_fieldwrap.layout3 input,
.powermail_fieldwrap.layout3 textarea
{
    font-size: 0.9em;
}

.powermail_field .checkbox [type="checkbox"]
{
    -webkit-appearance: none;
}

.powermail_field .checkbox [type="checkbox"]::before
{
    content: "";

    position: relative;
    display: block;
    width: 1em;
    height: 1em;
    margin-right: 0;
    margin-top: 0.1rem;
    background-color: #000;
    border: 3px white solid;
    font-size: 1.2rem;
    z-index: 5;
}

.powermail_field .checkbox [type="checkbox"]:checked::before
{
    content: "X";
    color: white;
    text-align: center;
}

/*** TYPO3 gallery items ***/
.ce-gallery a
{
    display: block;
    width: fit-content;
}
.ce-textpic.ce-nowrap
{
    --maxImgWidth: calc(var(--contentWidth)/2 - 5rem);
    display: flex;
    column-gap: var(--stdColGap);
    row-gap: 1rem;
    flex-wrap: wrap;
    max-width: 100%;
}

.ce-textpic.ce-right.ce-nowrap
{
    flex-direction: row-reverse;
}

.ce-textpic.ce-right.ce-intext .ce-gallery,
.textpicElement.imageHPosRight.imageVPosBody.intext .textpicImage
{
    float: right;
    margin-left: 1rem;
}

.ce-textpic.ce-left.ce-intext .ce-gallery
{
    float: left;
    margin-right: 1rem;
}

#centreAreaWrapper .frame.frame-layout-1
{
    padding-bottom: calc(var(--boxPadding) * 2);
}

.frame-layout-1 .ce-textpic.ce-nowrap
{
    display: grid;
    grid-template-columns: repeat(auto-fill,minmax(var(--maxImgWidth),1fr));
}

.frame-type-textpic:not(.frame-darkBG):has(.ce-gallery)
{
    padding-inline: var(--boxPadding);
    padding-block: var(--boxPadding);
    margin-block: var(--boxPadding);
    background-color: white;
    border-radius: var(--boxRadius);
}

.ce-intext img
{
    max-width: 100%;
    height: auto;
    border-radius: 1rem;
}

.ce-textpic.ce-nowrap > *
{
    flex-basis: 300px;
    flex-shrink: 1;
    flex-grow: 1;
}
.ce-textpic.ce-nowrap .ce-gallery,
.ce-textpic.ce-nowrap .ce-row,
.ce-textpic.ce-nowrap .ce-column,
.ce-textpic.ce-nowrap figure
{
    width: fit-content;
}
.frame-layout-1 .ce-textpic.ce-nowrap .ce-gallery,
.frame-layout-1 .ce-textpic.ce-nowrap .ce-row,
.frame-layout-1 .ce-textpic.ce-nowrap .ce-column,
.frame-layout-1 .ce-textpic.ce-nowrap figure,
.frame-layout-1 .ce-textpic.ce-nowrap figure img
{
    width: 100%;
}

.frame-layout-1 .ce-textpic.ce-nowrap img,
.frame-layout-1 .ce-textpic.ce-nowrap > *,
.frame-layout-1 .frame
{
    border-radius: 2rem;
}
.ce-textpic.ce-nowrap .ce-gallery
{
    flex-basis: 0;
}
.ce-gallery img
{
    max-width: 100%;
    height: auto;
}
figure:has(figcaption)
{
    display: flex;
    flex-direction: column;
    align-items: anchor-center;
    gap: 1rem;
}
figcaption
{
    max-width: 80%;
    padding-inline: 2rem;
}
.frame-layout-3 .ce-gallery img
{
    border-radius: 1.5rem;
}

.frame-layout-1 .ce-textpic.ce-nowrap .ce-bodytext,
.frame-layout-1 .frame
{
    height: 100%;
    padding-block: var(--boxPadding);
    padding-inline: var(--boxPadding);
    background-color: white;
}

.frame-layout-1 .frame-darkBG
{
    background-color: black;
}

.text-center
{
    text-align: center;
}

.text-right
{
    text-align: revert;
}

.text-justify
{
    text-align: justify;
}

#stoerer
{
    --boxPadding: 0.5rem;
    --boxRadius: 1rem;
    position: fixed;
    top: calc(var(--headerHeight) + 5rem);
    right: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    row-gap: 0.5rem;

    z-index: 100;
}

#stoerer > div
{
    border-top-left-radius: var(--boxRadius);
    border-bottom-left-radius: var(--boxRadius);
}

#langSwitcher
{
    width: fit-content;
}

#langSwitcher a
{
    display: flex;
    justify-content: center;
    align-items: center;
    width: fit-content;
    height: fit-content;
}

#langSwitcher img
{
    width: 2rem;
    height: 1.8rem;
    border-top-left-radius: 1rem;
    border-bottom-left-radius: 1rem;
    box-shadow: 0 0 8px rgba(255,255,255,0.8);
    object-fit: cover;
}
#shortSearchForm
{
    display: flex;
    align-items: center;
    justify-content: flex-end;
    column-gap: 0;
    height: 2.2rem;
    overflow: clip;
    background-color: transparent;
    transition: background-color 1s ease-in;
}

#shortSearchForm.opened
{
    background-color: white;
}

#shortSearchForm .searchFormWrapper
{
    max-width: 0;
    width: auto;
    overflow: clip;

    transition: max-width 1s ease-in;
}

#shortSearchForm.opened .searchFormWrapper
{
    max-width: 90vw;
}
#searchOpenBtn
{
    width: 2rem;
    height: 2rem;
    background-image: url("../Images/lupe.png");
    background-size: cover;
    border: none;
    border-top-left-radius: 1rem;
    border-bottom-left-radius: 1rem;
    border-top-right-radius: 0.25rem;
    border-bottom-right-radius: 0.25rem;
    cursor: pointer;
}

#shortSearchForm form
{
    display: flex;
    column-gap: 0.2rem;
    align-items: center;
    padding-inline: 0.5rem;
    padding-block: 0.3rem;
}

#shortSearchForm #search_item
{
    width: 10rem;
    padding-inline: 0.2rem;
    padding-block: 0.1rem;
    border: 2px #EEE inset;
    border-radius: 0.2rem;
    font-size: var(--stdFontSize);
}

#shortSearchForm #searchSubmit
{
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 0.2rem;
    border: 2px #EEE outset;
    cursor: pointer;
}

#formattedFileDownloads
{
    background-color: white;
    padding-inline: var(--boxPadding);
    padding-block: var(--boxPadding);
    border-radius: var(--boxRadius);
}

/*** Cookie consent ***/
#CookieBox
{
    border-radius: 2rem;
    box-shadow: 0.5rem 0.5rem 0.6rem rgba(0, 0, 0, 0.5);
}
#CookieBox a.cookie-btn
{
    background-color: var(--blueClr);
}

#CookieBox .cookie-management,
#CookieBox .cookie-refuse
{
    display: block;
}

@media screen and (max-width: 1350px)
{
    .boxCollageElements,
    .frame-type-mask_text_bild_link .textImageArticle
    {
        max-width: min(100%,95vw);
    }
    .frame-type-mask_text_bild_link .bgImage
    {
        left: unset;
        right: -1rem;
    }

    :root
    {
        --stdFontSize: 16px
    }

}

@media screen and (max-width: 1220px)
{
    #centreAreaWrapper
    {
        grid-template-columns: 1fr;
    }
}

@media screen and (max-width: 1100px)
{
    .textSmallImage
    {
        grid-template-columns: 1fr;
    }
    .textSmallImage .smallImage
    {
        display: flex;
        justify-content: center;
    }
    .frame-type-mask_element_group[data-maxcols="3"]
    {
        --groupItemWidth: 330px;
    }
    .frame-type-mask_text_image_link .bgImage
    {
        top: 0;
        right: -3%;
        width: 25vw;
    }
    .frame-type-mask_text_image_link .bodyText > p:first-of-type
    {
        padding-right: 5rem;
        background-blend-mode: difference;
    }
}

@media screen and (max-width: 860px)
{
    .indexPage .teaserText h1
    {
        font-size: 2.2rem;
    }

    :root
    {
        --stdFontSize: 14px;
    }
}

@media screen and (max-width: 840px)
{
    .ce-textpic.ce-nowrap
    {
        display: block;
    }

    .ce-textpic.ce-nowrap .ce-gallery
    {
        max-width: 50%;
        float: left;
        margin-left: 1.5rem;
    }
    .ce-textpic.ce-right.ce-nowrap .ce-gallery
    {
        float: right;
        margin-left: unset;
        margin-right: 1.5rem;
    }
    .ce-textpic.ce-nowrap .ce-gallery
    {
        max-width: 100%;
        float: none !important;
        margin-inline: unset !important;
        margin-bottom: 1.5rem;
    }
    .frame-type-mask_text_image_link .bgImage
    {
        top: -2.5%;
        right: -4%;
        width: 30vw;
    }
}
@media screen and (max-height: 740px) and (orientation: landscape)
{
    #page:not(.indexPage) #teaser
    {
        --teaserHeight: auto;
    }
}