@font-face {
    font-family: "AlegreyaSans";
    src: url("../../../fonts/AlegreyaSans-Regular.ttf");
    font-weight: 400;
    font-style: normal;
}
font-face {
    font-family: "AlegreyaSansMedium";
    src: url("../../../fonts/AlegreyaSans-Medium.ttf");
    font-weight: 600;
    font-style: normal;
}
@font-face {
    font-family: "Barlow";
    src: url("../../../fonts/Barlow-Regular.ttf");
    font-weight: 400;
    font-style: normal;
}
@font-face {
    font-family: "BarlowBold";
    src: url("../../../fonts/Barlow-Bold.ttf");
    font-weight: 600;
    font-style: normal;
}
:root
{
    /*** colours  1A4175  ***/
    --headerBackground: rgba(240,240,240,0.3);
    --headerHoverBackground: rgba(255,255,255,0.5);
    --primaryclr: #00639a;
    --secondaryclr: #CC1020;
    --tertiaryclr: #58595b;
    --bs-primary: #DA0320;
    --bs-secondary: #25FCD7/*hsl(218, 80%, 75%)*/;
    --hbGreyBG: rgba(130,120,120,0.4);

    /***  heights ***/
    --headerHeight: 5rem;
    --teaserHeight: calc(100vh - var(--headerHeight) - 10rem);
    --parallaxHeight: 40vh;

    /*** filters ***/
    --backdropFilter: blur(15px) saturate(100%);
    --backdropFilterTeaserText: blur(5px) saturate(100%);

    --stdAnimSpeed: 1s;
    --fastAnimSpeed: 0s;
    --slowAnimSpeed: 2.5s;
    --realSlowAnimSpeed: 3.5s;

    /*** fonts **/
    --headerFont: "AlegreyaSansMedium", "BarlowBold", Helvetica, Arial, sans-serif;
    --defaultFont: "Barlow", Helvetic, Arial, sans-serif;
    --menuFont: "AlegreyaSans", "Barlow", Helvetica, Arial, sans-serif;
    --headerFontSize: clamp(1.25rem, 5.5vw + 0.5rem, 1.9rem );
    --header2FontSize: clamp(1.15rem, 5.5vw + 0.5rem, 1.6rem );
    --header3FontSize: clamp(1rem, 5vw + 0.5rem, 1.3rem );
}

/*
body {
    display: grid;
    min-block-size: 100dvh;
    place-content: center;
}
 */

html
{
    --webkit-scrollbar-color: var(--primaryclr) var(--hbGreyBG);
    scrollbar-color: var(--primaryclr) var(--hbGreyBG);
    scroll-behavior: smooth;
}

html *
{
    scroll-margin-top: 10rem;
    scroll-padding-top: 10rem;
    scroll-snap-margin-top: 10rem;
}

#page
{
    padding-top: 0;

    --webkit-scrollbar-width: thin;
    scrollbar-width: thin;
    --webkit-scrollbar-color: var(--primaryclr) var(--bs-primary);
    scrollbar-color: var(--primaryclr) var(--bs-primary);
    --webkit-scrollbar-display: none;
    scroll-behavior: smooth;
}

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

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

.scrollable-content::-webkit-scrollbar {
    display: none;
}

.scrollable-content {
    -ms-overflow-style: none;
}

.scrollable-content {
    scrollbar-width: none;
}

#headerWrapper
{
    -webkit-backdrop-filter: var(--backdropFilterTeaserText);
    backdrop-filter: var(--backdropFilterTeaserText);

    transition: background-color var(--stdAnimSpeed) ease-in-out;

    background-color: rgba(0, 99, 154, 0.8);
    height: var(--headerHeight);
}

#headerWrapper:hover
{
    background-color: var(--primaryclr);
}


#logo
{
    position: relative;
    top: auto;
    left: auto;
    width: auto;
    padding-block: 0.25em;
    /*
    -webkit-box-shadow: 5px 5px 12px 5px rgba(0,0,0,0.75);
    box-shadow: 5px 5px 12px 5px rgba(0,0,0,0.75);

     */
}

#logo a.logoLink
{
    height: 100%;
}

#logo img
{
    width: auto;
    height: 140%;
    /*border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;*/
    border-radius: 0.2em;
    border: 5px #fff solid;
}

#wave
{
    display: none;
}

.teaserImgInnerWrapper
{
    /*align-items: flex-start;*/
}

.teaserTextWrapper
{
    top: 40%;
    justify-content: flex-start;
    transform: translate(-50%,-20%);
}

.teaserTextWrapper.animWrapper
{
    justify-content: center;
}

.animWrapper svg
{
    width: min(800px,96%);
    padding-inline: 2rem;
    padding-block: 2rem;
    margin-top: 3rem;
    border-radius: 1rem;

    background-color: rgba(255,255,255,0.4);
    -webkit-backdrop-filter: var(--backdropFilterTeaserText);
    backdrop-filter: var(--backdropFilterTeaserText);
    box-shadow: 5px 5px 10px 10px rgba(0,0,0,0.2);

    transition: all 0.5s ease-in;
}

.animWrapper svg:hover
{
    --backdropFilterTeaserText: blur(10px) saturate(80%);
    box-shadow: 5px 5px 10px 10px rgba(0,0,0,0.4);
}

.animWrapper svg .script
{
    fill: transparent;
    stroke: var(--secondaryclr);
    stroke-width: 0.6;
    stroke-dasharray: 120;
    stroke-dashoffset: 120;
    
    animation: svgTextAnimation 3s ease-in-out 1 forwards;
    animation-delay: 2s;
}

@keyframes svgTextAnimation
{
    0% {
        stroke-dashoffset: 120;
    }
    70% {
        fill: transparent;
    }
    100% {
        stroke-dashoffset: 0;
        fill: var(--secondaryclr);
    }
}

li.list-icon-text::marker
{
    content: "✔";
    color: green;
    font-size: 20px;
}

.teaserText
{
    -webkit-backdrop-filter: var(--backdropFilterTeaserText);
    backdrop-filter: var(--backdropFilterTeaserText);

    -webkit-box-shadow: 5px 5px 20px 10px rgba(0,0,0,0.6);
    box-shadow: 5px 5px 20px 10px rgba(0,0,0,0.6);
    border-radius: unset;
    background-color: rgba(255, 255, 255, 0.7);
    border-radius: 0.5rem;

    transition: background-color var(--stdAnimSpeed) ease-in-out;


}

.teaserText h2
{
    font-size: 18px;
}

#teaserWrapper
{
    top: 0;
    left: 0;
    margin-bottom: 0;
    max-width: 100vw;
    overflow-x: hidden;
}

#teaserWrapper:has(svg)
{
    z-index: unset;
}

#page.pastTeaser #teaserWrapper
{
    z-index: -1;
}

.indexPage .teaserHeaderWrapper,
header.hasIcon
{
    position: relative;
}

.indexPage .teaserHeaderWrapper:before
{
    display: none;
    /*
    position: absolute;
    top: 0.8rem;
    left: 0;
    width: 4rem;
    height: 4rem;
    content: " ";
    background-image: url("images/trbaubetreuung.jpg");
    background-repeat: no-repeat;
    background-size: 90%;
    background-position: center center;
    /*background-color: rgba(255,255,255,0.7);
    border-radius: 1rem;
    */
}

.menuPages h3
{
    padding: unset;
    color: #fff;
}

header.hasIcon
{
    text-indent: 3rem;
}
header.hasIcon:before
{
    position: absolute;
    top: -0.4rem;
    left: -0.2rem;
    width: 3.5rem;
    height: 3rem;
    content: " ";
    background-image: url("images/DK-Glasdesign-Logo-dunkler.png");
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: center center;
}

.content:has(.imageTextGroup)
{
    --contentWidth: 100vw;
}

#greyContent header.hasIcon:before
{
    display:none;
    /*
    background-image: url("images/trbaubetreuung.jpg");
     */
}

.menuLinkLevel1::after
{
    display: none;
}

.teaserHeaderWrapper > h1,
.teaserHeaderWrapper > h2
{
    color: var(--primaryclr);
    text-shadow: 1px 1px 1px rgba(31, 70, 138, 0.6);
    /*text-shadow: -6px -6px 12px #F0F0FF;*/
    text-wrap: balance;
    text-align: left;
    padding-left: 0;
}

.teaserHeaderWrapper .teaserSubHeader
{
    padding-top: 0.4em;
    padding-inline: clamp(3em, 5%, 1em);
}

[data-typeimage] .teaserHeaderWrapper *
{
    margin-bottom: 0;
    /*hyphens: auto;*/
    text-wrap: balance;
}

[data-typeimage] .teaserHeaderWrapper
{
    padding-block: 1em;
}

.hasGreyContent #mainContentWrapper
{
    background-color: var(--mainContentBG);
}

.hasGreyContent #mainContentWrapper section:first-child
{
    padding-top: 1.8em;
}

.hasGreyContent #mainContentWrapper section.twoColsItem
{
    padding-top: 0;
}

.hasGreyContent #mainContentWrapper > section:first-child header h3
{
    padding-top: 0;
}

.hasGreyContent #mainContentWrapper section.animType1:not(.visible):first-child
{
    margin-top: -8rem;
}

#mainContent h1
{
    font-size: var(--headerFontSize);
}
#mainContent h2
{
    font-size: var(--header2FontSize);
}
#mainContent h3
{
    font-size: var(--header3FontSize);
}

#mainContent h3.subHeader
{
    padding-top: 0;
    margin-top: -0.4rem;
    padding-inline: clamp(5em, 5%, 1.2em);
    color: var(--defaultColor);
    font-family: var(--defaultFont);
    font-weight: 400;
    font-optical-sizing: auto;
}

#mainContent:not(.hasGreyContent),
#greyContent
 {
    padding-top: 1rem;
    min-height: unset;
 }

#greyContent
{
    position: relative;

    -webkit-backdrop-filter: var(--backdropFilter);
    z-index: 1;

    background-color: rgba(00, 99, 154, 0.7);
    backdrop-filter: var(--backdropFilterTeaserText);
    color: #fff;
}

#greyContent h2
{
    color: #fff;
}

#greyContent header,
#greyContent header *
{
    /*mix-blend-mode: darken !important;*/
}

#greyContent .contentBody
{
    /*mix-blend-mode: difference;*/
    /*color: #ffffff;*/
}

#greyContent section:last-child
{
    padding-bottom: 0.8rem;
}

#greyContent header > *
{
    mix-blend-mode: hard-light;
    color: inherit;
    font-optical-sizing: auto;
    letter-spacing: 2px;
}
#greyContent .frame-type-text .contentBody
{
    columns: 400px;
}
section.stylegreyContent:has(+ #textAboveFooter),
.contentItemmenu_subpages:has(+ #textAboveFooter)
{
    padding-bottom: 2.5rem;
}

#textAboveFooter
{
    /*--accentclr: var(--hbGreyBG);*/

    padding-block: 2rem !important;
    background-color: var(--accentclr, var(--hbGreyBG)) !important;
}
#textAboveFooter .frameInner
{
    padding-inline: 2rem;
    padding-block: 2rem;
    border-radius: 2rem;
    background-color: white;
}
#textAboveFooter .contentBodyText
{
    columns: 400px;
}
#textAboveFooter header h3
{
    margin-bottom: 1rem;
}

a.buttonLink:hover
{
    color: white;
}
#greyContent a.buttonLink:hover
{
    box-shadow: 0.6rem 0.6rem 0.6rem rgba(0,0,0,0.6);
}
    /*
    #greyBG
    {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: var(--hblightGrey);
        -webkit-backdrop-filter: var(--backdropFilter);
        backdrop-filter: var(--backdropFilter);
        z-index: -1;
    }
    */
#mainContent.hasGreyContent
{
    background: transparent;
}

#mainContent section.stylegreyContent
{
    background-color: var(--tertiaryclr);
}

#mainContent .csc-frame-greyContent
{
    padding-inline: 2rem;
    padding-block: 2rem;
    background-color: white;
    border-radius: 1rem;
}
#mainContent .csc-frame-greyContent .frameInner
{
    padding-bottom: 0;
}
/*
section.animType1
{
    position: relative;
}

section.animType1:after
{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    transform: scale(1);
    background-color: var(--mainContentBG);
    z-index: -1;;
}
*/
#mainContentt:not(.hasGreyContent) > section:first-child,
#greyContent + section
{
    padding-top: 3em;
}

.pageLayout6 #mainContentWrapper .frame-type-text .contentBodyText
{
    columns: 400px;
}

a:hover
{
    color: var(--bs-primary);
}
section strong a,
section strong a:visited
{
    font-weight: 600;
}
a.primaryLink,
a.primaryLink:visited,
a.secondaryLink,
a.secondaryLink:visited
{
    display: block;
    width: fit-content;
    padding-right: 1rem;
    padding-left: 1em;
    padding-top: 0.5em;
    padding-bottom:  0.5em;
    text-decoration: none;
    text-transform: uppercase;
    color: white;
    background-color: var(--secondaryclr);
    border-radius: 0.5em;

    transition: all 1s ease-in-out;
}

a.secondaryLink,
a.secondaryLink:visited
{
    background-color: var(--bs-secondary);
}

a.primaryLink:hover,
a.primaryLink:focus
{
    color: var(--primaryclr);
    background-color: #fff;
}

a.secondaryLink:hover,
a.secondaryLink:focus
{
    background-color: var(--primaryclr);
    color: white;
}

a.moreLink,
a.moreLink:visited
{
    box-shadow: 3px 5px 8px 0px rgba(0,0,0,0.4);
    background-color: var(--bs-primary);

    transition: background-color var(--fastAnimSpeed) ease-in-out, box-shadow 1s ease-in-out;
}

a.moreLink:hover,
a.moreLink:focus,
a.primaryLink:hover,
a.primaryLink:focus,
a.secondaryLink:hover,
a.secondaryLink:focus
{
    box-shadow: 3px -5px 8px 0px rgba(0,0,0,0.6);
}

a.moreLink:hover,
a.moreLink:focus
{
    color: white;
}

.text-right .primaryLink,
.text-right .secondaryLink,
.text-right .moreLink
{
    margin-left: auto;
}

.text-center .primaryLink,
.text-center .secondaryLink,
.text-center .moreLink
{
    margin-left: auto;
    margin-right: auto;
}

ul.iconList,
.ce-intext ul.iconList
{
    padding-top: 0.5em;
    padding-left: 0;
}

.iconList li
{
    padding-left: 1.8em;
    margin-bottom: 0.2em;
    margin-left: 0.1em;
    background-image: url("images/dk.png");
    background-size: 1.2em auto;
    background-repeat: no-repeat;
    background-position: left 0.3em;
}

.ce-textpic.ce-left.ce-intext.ce-nowrap
{
    display: flex;
    column-gap: 2em;
    row-gap: 1em;
    flex-wrap: wrap;
}

.ce-gallery img
{
    border-radius: 0.5rem;
}

.gslide img
{
    border-top-right-radius: 1rem;
    border-top-left-radius: 1rem;
}

.gslide-description
{
    border-bottom-left-radius: 1rem;
    border-bottom-right-radius: 1rem;
}

.ce-textpic.ce-left.ce-intext.ce-nowrap > .ce-bodytext
{
    flex-shrink: 1;
    flex-basis: 400px;
}

.ce-textpic.ce-left.ce-intext.ce-nowrap .ce-gallery
{
    margin-top: 0.5em;
}

.ce-left.ce-intext .ce-column
{
    padding-top: 0.6rem;
}

/*** menus and sitemaps ***/
.frame-type-menu_subpages ul
{
    display: grid;
    grid-template-columns: repeat(4,1fr);
    grid-column-gap: 2.2em;
    grid-row-gap: 2.2em;
}
.frame-type-menu_subpages ul > li a,
.frame-type-menu_subpages ul > li a:visited
{
    text-transform: none;
    color: var(--primaryclr);
    white-space: normal;
    border-radius: 0;
    background: none;
}

ul.menuPages
{
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    grid-template-columns: repeat(3,1fr);
    grid-column-gap: 2em;
    grid-row-gap: 2.2em;
    list-style: none;
    margin-left: 0;
    padding-left: 0;
}

.menuPages > li
{
    flex-basis: 370px;
    display: table-cell;
    max-width: min(440px,100%);
    text-align: center;
    box-shadow: 5px 5px 15px 10px var(--tertiaryclr);
    border: 3px solid var(--primaryclr);

    transition: all 1s ease-in;
}

.menuItemLink
{
    display: block;
    height: 100%;
}

.menuPages .menuItemInner
{
    height: 100%;
    /*border: 3px solid transparent;*/

    transition: all 1s ease-in;
}

.menuPages li:hover
{
    box-shadow: unset;
    border-color: var(--tertiaryclr);
}

.menuPages .pagesImage
{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 180px;
    overflow: hidden;
}

.menuPages .pagesImage img
{
    width: 100%;
    height: auto;
    object-fit: cover;
}

.menuPages .menuItemText > *
{
    padding-inline: 1rem;
}

.pagesItemTitle
{
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 4em;
    background-color: var(--tertiaryclr);
    color: #fff;
    font-family: var(--headerFont);
    font-weight: 600;
    font-size: 1.2em;
    line-height: 1.2;
    letter-spacing: 1px;
    text-shadow: -1px -1px 5px black;

    transition: all 1s ease-in;
}

.pagesList2 .pagesItemTitle
{
    text-shadow: none;
}

.pageInfo
{
    padding-block: 1.5em;
    color: var(--defaultColor);
}

.menuItemInner:hover .pagesItemTitle
{
    color: var(--primaryclr);
    font-weight: 400;
    text-shadow: -1px -1px 5px white;
}

.pagesList .menuItemInner
{
    display: grid;
    grid-template-columns: 70px auto;
}

.pagesList2 .menuItemInner h4
{
    font-color: rgb(62, 62,62);
}

.pagesList2 li .menuItemInner
{
    background-color: #f0f0f0;
}

.pagesList2:has(.pagesList3) li a
{
    height: auto;
    background-color: unset;
}

.pagesList .pagesImage
{
    display: flex;
    justify-content: center;
    flex-direction: column;
    max-height: 90px;
    overflow: hidden;
}

.pagesList .pagesImage img
{
    width: 100%;
    object-fit: cover;
}

.pagesList .pagesItemTitle
{
    background: none;
    text-align: center;
    color: rgb(62, 62, 62);
}

.pagesList3 .menuItemText
{
    display: flex;
    justify-content: center;
}

.frame-type-menu_pages header + .contentBody,
.frame-type-menu_subpages header + .contentBody
{
    padding-top: 2em;
}

.twoColsItem
{
    display: table-cell;
    height: 100%;
}

.twoColsItem .csc-frame-greyContent
{
    height: 100%;
    padding-left: 2rem;
    padding-top: 1em;
}

@supports selector(:has(*))
{
    .twoCols:has(.tx-powermail)
    {
        display: grid;
        grid-template-columns: 3fr 1fr;
        grid-column-gap: 4rem;
    }

    .twoColsItem header:has(.ce-headline-left)
    {
        padding-bottom: 2em !important;
    }

    .twoCols:has(.tx-powermail) .csc-frame-greyContent
    {
        border-radius: 0.5em;
    }

    .twoColsItem:has(.csc-frame-greyContent) .sectionInnerWrapper,
    .twoColsItem:has(.csc-frame-greyContent) .sectionInner
    {
        height: 100%;
    }

    .sectionInner:has(.tx-powermail)
    {
        padding-inline: 1.5rem;
    }
}

@supports not selector(:has(*))
{
    .twoCols.hasPowermail
    {
        display: grid;
        grid-template-columns: 3fr 1fr;
        grid-column-gap: 4rem;
    }

    .twoCols.hasPowermail .csc-frame-greyContent
    {
        border-radius: 0.5em;
    }

    .twoColsItem.hasGreyContent .sectionInnerWrapper,
    .twoColsItem.hasGreyContent .sectionInner
    {
        height: 100%;
    }

    .hasPowermail .sectionInner
    {
        padding-inline: 1.5rem;
        border: 3px var(--hbGreyBG) outset;
    }

    .hasPowermail .hasGreyContent .sectionInner
    {
        padding-inline: 0;
        border: none;
    }
}

.info strong
{
    font-size: 1.2em;
    color: var(--primaryclr);
    font-family: var(--headerFont);
}

p.phone,
p.pdf,
p.weblink,
p.email,
p.address
{
    padding-left: 1.2em;
}

p.pdf:before,
p.weblink:before,
p.address:before,
p.phone:before,
p.email:before
{
    top: 0.5em;
    font-size: 0.8em;
}

.tx-powermail label
{
    font-weight: 600;
}

.tx-powermail .radio > label
{
    font-weight: 400;
}

.powermail_fieldwrap_type_radio.layout2
{
    background-color: var(--hblightGrey);
    padding-top: 0.5rem;
    padding-inline: 0.5em;
    border-radius: 0.3em;
}

/*** simple slider ***/
.sliderActive
{
    position: relative;
}
figure.multiImage
{
    display: flex;
    justify-content: center;
    align-items: center;
}

.sliderActive figure.multiImage
{
    position: absolute;
    left: 0;
    right: 0;
    height: 100%;
    width: 100%;
}

figure.multiImage img
{
    display: block;
    width: auto;
    height: auto;
    max-width: 0;
    max-height: 0;
    opacity: 0;

    transition: max-height var(--slowAnimSpeed) linear, max-width var(--slowAnimSpeed) linear, opacity var(--realSlowAnimSpeed) ease-in-out;
}
figure.multiImage.active img
{
    max-width: 600px;
    max-height: 800px;
    opacity: 1;
}


/*** For parallax  ****/
.parallax-wrapper
{
    position: relative;
    height: var(--parallaxHeight);
    overflow-y: hidden;
    /*perspective: 10px;
    transform-style: preserve-3d;*/
}
.ce-gallery[data-imagecols="10"] .ce-column
{
    width: 100%;
}

.parallax-wrapper > figure.image
{
    position: absolute;
    display: block;
    top: 0;
    left: 50%;

    transform: translateX(-50%);
    /*transform: translateX(-50%) translateZ(-10px) scale(2);*/
    /*transition: transform 0.02s linear;*/
}
.fullWidthImage img
{
    min-width: 100%;
    width: auto;
}
.parallax-wrapper img
{
    min-height: calc(100vh - var(--parallaxHeight)/2);
    height: auto;
    object-fit: cover;
    z-index: -1;
}
/*
#teaserWrapper
{
    position: relative;
}

#teaser
{
    overflow-y: auto;
    overflow-x: hidden;
    perspective: 10px;
}

.teaserImage
{
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    transform-style: preserve-3d;
    z-index: -1;
}

.teaserImgInnerWrapper
{
    position: absolute;
    height: 100%;
    width: 100%;
    object-fit: cover;
    z-index: -1;

    transform: translateZ(-10px) scale(2);
}


.bodyWrapper
{
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    max-width: 100vw;
    perspective: 10px;
    --webkit-scrollbar-width: thin;
    scrollbar-width: thin;
    --webkit-scrollbar-color: var(--hbGreyBG) var(--primaryclr);
    scrollbar-color: var(--hbGreyBG) var(--primaryclr);
}

.pageWrapper
{
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    transform-style: preserve-3d;
    z-index: -1;
}

.parallaxWrapper
{
    position: absolute;
    height: 200%;
    width: 100%;
    margin-top: -6em;
    object-fit: cover;
    z-index: -1;

    transform: translateZ(-10px) scale(2);
}
*/

.imageTextGroupleft .imageTextTextItem,
.imageTextGroupright .imageTextTextItem
{
    background-color: var(--primaryclr);
    color: #fff;
}

.imageTextTextBody p:has(.primaryLink)
{
    display: flex;
    justify-content: flex-end;
}

.textBody:has(img)
{
    max-width: 500px;
}

.contentBodyText td
{
    padding-inline: 2.5em;
}

input.powermail_input,
input.powermail_date,
textarea.powermail_textarea,
input.powermail_captcha,
select.powermail_select,
.powermail_fieldwrap_type_radio.layout2
{
    border: 1px var(--primaryclr) solid;
    background-color: #fafdff;
}

input[type="file"]
{
    margin-top: 1em;
}

.powermail_fieldwrap input[type="file"]::file-selector-button
{
    border: 1px var(--primaryclr) solid;
    background-color: #fafdff;
    border-radius: 3px;
}

.powermail_fieldwrap .custom-checkbox .checkmark:after
{
    color: red;
}

.powermail_legend
{
    display: none;
}

.multiImage.active a
{
    position: relative;
    display: inline-block;
}

.multiImage.active a::before {
    content: 'Zur Galerie';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 10px 20px;
    font-size: 16px;
    pointer-events: none;
    z-index: 1;
}

.multiImage.active img {
    display: block;
    width: 100%;
    height: auto;
}

.imageTextGroupleft .imageTextTextContent
{
    padding-inline: 1em;
}

.imageTextHalfGroup
{
    max-height: 100%;
}

.three-column-row
{
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(4rem, 1fr));
      align-items: stretch;
      padding-top: 1.8em;
}

.three-column-row .contentItemimage .contentBody img {
    max-height: 100%; /* Begrenzung auf die Höhe des Containers */
    width: auto; /* Stellt sicher, dass die Breite sich dynamisch anpasst */
    object-fit: contain; /* Erhält das Seitenverhältnis des Bildes */
}

.three-column-row:nth-child(2),
.three-column-row:nth-child(3)
{
    padding-top: 1.8em;
}

.three-column-row .ce-gallery figure.image
{
    width: 15em;
}

.three-column-row section:nth-child(3)
{
    align-self: center;
}

.hasGreyContent #mainContentWrapper .three-column-row section:first-child
{
    padding-top: 0;
}

.powermail_form
{
    max-width: 98%;
}

.tx-powermail form
{
    margin-top: 1rem;
    padding-inline: 1.5rem;
    padding-block: 1rem;
    background-color: var(--hbGreyBG);
}

.powermail_fieldwrap_type_text
{
    font-weight: 600;
    color: rgb(62, 62, 62);
}

.powermail_fieldset.layout3 .powermail_fieldwrap.layout2
{
    display: inline-block;
    width: max(380px,38%);
    max-width: 100%;
    margin-right: 2rem;
}

.powermail_fieldset.layout3 .powermail_fieldwrap.layout3
{
    display: inline-block;
    width: max(200px,22%);
    margin-right: 1rem;
}

.powermail_fieldset.nolabel .powermail_fieldwrap_type_submit > div
{
    justify-content: flex-end;
    display: flex;
}

.powermail_fieldset.nolabel input.powermail_submit
{
    margin-left: auto;
}

.pagesListLink
{
    text-align: center;
}

.noTeaser .spaceholder
{
    height: 5vh;
}
/*
.noTeaser #mainContent
{
    min-height: 130vh !important;
}

.noTeaser #footerWrapper
{
    position: absolute;
    bottom: 0;
}
*/

/*** breadcrumbs ***/
#breadCrumbWrapper
{
    position: relative;
    z-index: 10;
    padding-block: 1rem;
}

#outerWrapper:has(#teaserBox) #breadCrumb
{
    position: absolute;
    right: 0;
    top: 1rem;
}
#breadCrumb
{
    display: flex;
    justify-content: flex-end;
    align-items: center;
    column-gap: 0.5rem;
    position: relative;
    padding-top: calc(var(--boxPadding) / 2);
    font-size: max(12px, 0.8em);
}

#breadCrumbColor #breadCrumb
{
    color: #ffffff !important;
}

#breadCrumbColor #breadCrumb a,
#breadCrumbColor #breadCrumb a:visited
{
    color: #ffffff !important;
}

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

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

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

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

#breadCrumbColor
{
    background-color: rgba(00, 99, 154, 0.7);
    backdrop-filter: var(--backdropFilterTeaserText);
}

/*** breadcrumb end ***/

@media (min-width: 2400px)
{
    :root
    {
        --baseFontSize: 18px;
        --contentWidth: calc(2400px - 4rem);
    }
    body
    {
        background-color: var(--hbGreyBG);
    }
    #outerWrapper,
    #teaserWrapper
    {
        max-width: 2400px;
        margin-left: auto;
        margin-right: auto;
    }
}
@media only screen and (max-width: 1060px)
{
    :root
    {
        --logoWidth: auto;
        --headerHeight: 5em;
    }
    #mainContent:not(.hasGreyContent),
    #greyContent
    {
        padding-top: 2rem;
    }

    .ce-textpic.ce-left.ce-intext.ce-nowrap
    {
        justify-content: space-around;
    }
    .twoCols:has(.tx-powermail)
    {
        display: flex;
        flex-direction: column-reverse;
    }
    .twoCols:has(.tx-powermail) > *
    {
        flex-basis: 100%;
        flex-grow: 1;
        width: 100%;
    }
    .twoCols:has(.tx-powermail) .twoColsItem:has(.csc-frame-greyContent) .contentBody
    {
        column-count: 2;
        padding-bottom: 2em;
    }
}

@media only screen and (max-width: 760px)
{
    #mainMenu a.menuLinkLevel1
    {
        color: var(--primaryclr);
    }

    .menuSubtitle
    {
        display: none;
    }

    div#logo
    {
        margin-left: 1em;
    }
}

@media only screen and (max-width: 624px)
{
    .imageTextGroup .imageTextTextContent
    {
        max-width: none;
    }

    .three-column-row
    {
        grid-template-columns: unset;
    }

    .three-column-row section:first-child
    {
        display: flex;
        justify-content: center;
        text-align: center;
    }
}

@media only screen and (max-width: 600px)
{
    :root
    {
        --parallaxHeight: 30svh;
    }
    h1.teaserHeader
    {
        width: 85vw !important;
        padding-inline: 0.5rem;
    }
    h1.teaserHeader:first-line
    {
        /*font-size: inherit;*/
        font-size: 2.4rem;
    }
}

@media only screen and (max-width: 480px)
{
    :root
    {
        --parallaxHeight: 25svh;
    }
}
@media (prefers-reduced-motion)
{
    root
    {
        --stdAnimSpeed: 0s;
        --mobileMenuTransitionTime: 0s;
        --slowAnimSpeed: 0s;
        --realSlowAnimSpeed: 0s;
        --fastAnimSpeed: 0s;
    }
}


/*
@media (aspect-ratio >= 1.65)
{
    :root
    {
        --teaserHeight: calc(85svh - var(--headerHeight) - 3rem);
    }
    .teaserTextWrapperType8,
    .teaserTextWrapperType9,
    .teaserTextWrapperType10
    {
        bottom: 1rem;
    }
}

@media (aspect-ratio >= 2)
{
    :root
    {
        --teaserHeight: calc(100svh - var(--headerHeight) - 1rem);
    }
}

@media only screen and (orientation: landscape) and (max-width: 1000px)
{
    body.indexPage #teaserWrapper,
    body.indexPage #teaser,
    body.indexPage .teaserImage,
    body.indexPage .teaserImgInnerWrapper,
    body.indexPage #teaser div.teaserImg
    {
        max-height: 100vh !important;
        height: 100vh !important;
    }

    #teaser .teaserTextWrapper
    {
        top: 38%;
    }

    body.indexPage .teaserText
    {
        line-height: 18px;
    }
}
*/
@media (max-height: 680px)
{
    #teaserWrapper
    {
        /* for iPhone 8 */
        max-height: var(--teaserHeight);
        overflow: hidden;
        z-index: -1;
    }

    .teaserTextWrapper
    {
        top: 30%;
    }
}
@media only screen and (max-height: 660px)
{
    .teaserTextWrapper
    {
        bottom: -0.5rem;
    }
}
@media (max-height: 400px)
{
    :root
    {
        --teaserHeight: calc(100svh - var(--headerHeight) - 3rem);
    }
}

@media (max-height: 360px)
{
    :root
    {
        --teaserHeight: calc(100svh - var(--headerHeight) - 1rem);
    }
    .teaserTextWrapperType8,
    .teaserTextWrapperType9,
    .teaserTextWrapperType10
    {
        bottom: -1rem;
    }
}

@media (min-height: 2200px)
{
    :root
    {
        --teaserHeight: 45svh;
    }
}