body {
    min-height: 100vh;
    min-height: 100svh;
}

.font-semibold {
    font-weight: 600;
}

.font-bold {
    font-weight: 700;
}

/* no top space for first element on page - align all the same */
.main > div:first-child {
    padding-top: 0;
    margin-top: 0;
}

.main.pt-\[84px\] {
    padding-top: 68px;
}
.main.pt-\[84px\],
main {
    /* min height so footer is at bottom */
    min-height: calc(100vh - var(--footer-height, 30px));
}

/* general title typography improvements */
h1, h2, h3, h4 {
    text-wrap: balance;
}



/* fix spacing in tile view (home) */
.article .bg-span.flex-text-date span:after,
.article .bg-span.flex-text-title span:after {
    width: calc(101% + 11px);
}
@media (min-width: 2200px){
    .article .bg-span.flex-text-date span:after, .article .bg-span.flex-text-title span:after {
        width: calc(101% + 16px);
    }
}
.article.article--text-over-image .mb-3,
.article.article--text-over-image .embed.my-2 {
    margin-bottom: 0;
}

.article.article--text-over-image div.absolute.bottom-0 {
    margin-bottom: 10px;
}

.pb-12 {
    padding-bottom: 84px;
}

/* spacer contents ut new --category-bg */
.spacer {
    background-color: var(--category-bg, light-dark(#fff, #000));
}


/* space between title and subtitle in articles grid */
[data-enhancer="packery"] h3 + h4 {
    padding-top: 0.05em;
}


/* space between title and media in normal articles in grid */
.w--normal .flex-text-title + img,
.w--normal .flex-text-title + video,
.w--normal .flex-text-title + .embed.my-2 {
    margin-top: 12px;
}

/* space between title and excerpt in normal articles in grid (different if madia is in between) */
.w--normal .flex-text-title + .excerpt.mt-3 {
    margin-top: 10px;
}
/* space between excerpt and media in normal articles in grid */
.w--normal .excerpt + img.mb-3,
.w--normal .excerpt + video.mb-3,
.w--normal .excerpt + .embed.my-2 {
    margin-top: 15px;
}

/* space between label and media in normal articles in grid */
.w--normal .secondary.flex-text-date + img.mb-3,
.w--normal .secondary.flex-text-date + video.mb-3,
.w--normal .secondary.flex-text-date + .embed.my-2 {
    margin-top: 10px;
}


/* space between label and title in normal articles in grid */
.w--normal .secondary.flex-text-date + .flex-text-title{
    padding-top: 0.1em;
}


.w--normal  .flex-text-title + .flex-text-date {
    margin-top: 0.35em;
}



/* articles grid small */

.w--small img,
.w--small video,
.w--small .embed {
    margin-top: 12px;
    margin-bottom: 10px;
}

.w--small .flex-text-date-small + img,
.w--small .flex-text-date-small + video {
    margin-top: 8px;
}


.w--small img + .flex-text-date-small,
.w--small video + .flex-text-date-small {
    margin-top: -2px;
}



.w--small .excerpt {
    margin-top: 10px;
}

.w--small img + .excerpt,
.w--small video + .excerpt {
    margin-top: 14px;
}

.w--small .flex-text-date-small + .excerpt{
    margin-top: 6px;
}

/* 
    modify header in list/grid view:
    - add line in list view 
    - cover space above bar so contents dont peek through
*/
.fixed-list-header {
    padding-bottom: 10px;
}

.fixed-list-header:after {
    content: "";
    display: block;
    position: absolute;
    bottom: -1px;
    --gap: 10px;
    left: var(--gap);
    width: calc(100% - 2 * var(--gap));
    height: 1px;
    background-color: var(--category-primary, currentColor);
    box-sizing: border-box;
}
[data-view="grid"] .fixed-list-header:after {
    content: none;
}

.tags-page .fixed-list-header:after {
    --gap: 0px;
}

.tags-page .wysiwyg ul {
    margin-left: 0;
}
.tags-page .wysiwyg .flex li {
    padding-left: 0;
}

/* the dynamic font size changes the height and therefore the position of the :after line - make height fixed to align with main navigation */
.fixed-list-header > div{
    height: 24px;
}
.no-search-results{
    margin-top: 3px;
}

@media (min-width: 768px) {
    body.category-fieldnotes [data-view="list"] .fixed-list-header:after  {
        --gap: 15px;
    }
}

@media (min-width: 480px) {
    .fixed-list-header:before {
        --gap: -30px;
    }
}

/* optimize wrap in on mobile */
.header-navigation {
    white-space: nowrap;
}
.fixed-list-header .font-semibold {
    display: inline-block;
}

/* hover effect to the right of the date in list view*/
.list-view time{
    display: block;
    padding-top: 0.3em;
}

[data-view="list"] .contentgroup {
    margin-bottom: 3px;
}

/* space after p in excerpt */
.excerpt p {
    margin-bottom: 1.3em;
}
.excerpt p:last-child {
    margin-bottom: 0;
}

/* remove top line of first entry list view */
[data-view="list"] .article:first-child > div {
    border-top-color: transparent !important;
}

/* fix top alignment in grid view  with list view line */
[data-view="grid"] .article:not(.fieldnotes) .p-2 {
    padding-top: 0 !important;
}

/* add space above text when visible in grid view */
[data-view="grid"] a:hover .text {
    padding-top: 5px;
}


/* fix long tiles cut off in grid view */
.group:hover .group-hover\:max-h-\[200px\] {
    max-height: 300px;
}

.scrolled-down:not(.menu-opened) .fixed-list-header {
    --tw-translate-y: -54px !important;
}

.fixed-list-header:before {
    content: "";
    display: block;
    position: absolute;
    --gap: -10px;
    top: -80px;
    left: var(--gap);
    width: calc(100% - 2 * var(--gap));
    height: 80px;
    background-color: #fff;
}
.dark .fixed-list-header:before {
    background-color: #000;
}

body.category-fieldnotes .grid-view .article > div{
    padding-top: 0 !important;
}




/* grid view text block on category, tag and search results */
.grid-view .flex-col-text-normal {
    max-width: 28ch;
}
.font-size-71 {
    font-size: 0.71em;
}


/* space in grid view below text - does not work because spacing is done in js */
/*
[data-view="grid"] a > div {
    padding-bottom: 0px;
    transition: padding-bottom 03s;
}
[data-view="grid"] a > div:hover {
    padding-bottom: 20px;
}

@media (max-width: 767px) {
    [data-view="grid"] a > div{
        padding-bottom: 40px;
    }
}
*/

/* attempt two:  space in grid view below text - does not work because spacing is done in js */
/*
[data-view="grid"] a::after {
    content: '';
    display: block;
    height: 0px;
}
[data-view="grid"] a:hover::after {
    height: 40px;
}
*/


/* align main nav to fixed header in list/grid view */
nav.main-nav {
    padding-top: 43px;
}

/* fix sizes in tile view (home) */

@media (min-width: 522px) {
    .col2\:w-\[49\%\] {
        width: 53%;
    }
}

@media (max-width: 479px) {

    .flex-text-title-small-enlarged {
        font-size: 18.5px !important;
    }
    
    .flex-text-date-small-enlarged {
        font-size: 13.2px !important;
    }


    .title-over-image-mobile > * {
        line-height: 23px !important;
    }

    .title-over-image-mobile {
        width: 235px !important;
    }

    .article .bg-span.flex-text-date-small-enlarged span::after,
    .article .bg-span.flex-text-title-small-enlarged span::after{
        border-bottom-width: 32px;
    }
}

/* normal article block in grid: space beneath media */
.w--normal .embed.my-2,
.w--normal img.mb-3,
.w--normal video.mb-3 {
    margin-bottom: 12px;
}

/* strange bug with disapearing titles */
@media (min-width: 479px) and (max-width: 521px) {
    .w--large .flex-text-title {
        font-size: 4vw !important;
    }
    .w--large .article-large-category,
    .w--large .flex-text-date-small-enlarged {
        font-size: 3vw !important;
    }   
}
.article.w--small .article--inner {
    padding-bottom: 10px;
}



/* make list view expand on click */
.css-foldout-focus .css-foldout {
    height: 0;
    overflow: clip;
    transition: height 0.3s ease;
    interpolate-size: allow-keywords;
}
.css-foldout-focus .title {
    cursor: pointer;
}

.css-foldout-focus.open .css-foldout {
    height: auto;
}

@media (min-width: 1024px) {
    /* open mobile accordions on desktop */
    .ce-related .css-foldout-focus .css-foldout {
        height: auto;
    }
}




/* underlines for links on hover */

#language-menu a:hover,
.more-link a:hover,
.header-navigation a:hover,
.social-share-links a:hover,
.legal-links a:hover,
.tags a:hover,
a.backlink:hover,
.wysiwyg a[href="#top"]:hover {
    text-decoration: underline !important;
    text-underline-offset: 0.3em;
    transition: none !important;
}

a.backlink {
    text-decoration: none;
}

/* Taglinks Unterstrich vor Hover zu nah am Text und... */
.tags.relative.flex.items-start ul a,
/* ..auf Tagsübersicht zu nah am Text */
.page-template-template-tags .wysiwyg.taglist a,
.page-template-template-tags .wysiwyg.taglist a:hover {
    text-underline-offset: 0.3em;
}

/* link colors menus with active state: main & language */

#main-menu,
#language-menu-toggle,
#language-menu {
    font-weight: 400;
    color: #191919;
}
.dark #main-menu,
.dark #language-menu,
.dark #language-menu-toggle {
    color: #f5f5f5;
}

#language-menu a {
    color: inherit;
}

#main-menu a:hover,
#language-menu a:hover{
    color: #999;
    color: #aaa; /* better distinction to 8c8c8c */
}
.dark #main-menu a:hover,
.dark #language-menu a:hover{
    color: #646464;
}

/* active state */
#language-menu [aria-selected="true"],
.current-menu-item {
    color: #8C8C8C; /* same color in light and dark mode */
}


/* link colors for navigation links: more,  fixed header, back, top, tags and share */
.more-link,
.header-navigation {
    font-weight: 400;
    color: #191919;
}
.more-link a,
.header-navigation a{
    color: inherit;
}
.dark .more-link,
.dark .header-navigation {
    color: #f5f5f5;
}

.more-link a:hover,
.header-navigation a:hover,
.social-share-links a:hover,
.legal-links a:hover,
.tags a:hover,
.wysiwyg a.backlink:hover,
.sub_menu a:hover,
.sub_menu a:hover svg,
.wysiwyg a[href="#top"]:hover 
{
    color: #8C8C8C !important; /* same color in light and dark mode */

    .dark & {
        color: #8C8C8C !important; /* same color in light and dark mode */
    }
}


/* Tags trigger on touch devices (scripts/modules/link-menu.js): the first
   tap only opens the list, but leaves a sticky hover/focus state on the
   /tags/ link — suppress its color change and underline... */
@media (hover: none) {
    .tags-block .link-menu__trigger a:hover,
    .tags-block .link-menu__trigger a:focus,
    .tags-block .link-menu__trigger a:active {
        color: inherit !important;
        -webkit-text-decoration-line: none !important;
        text-decoration-line: none !important;
    }

    /* ...but while the list is open the trigger acts as a link on the
       second tap, so show it underlined. Longhands (incl. -webkit-) so the
       markup's "!no-underline" utility loses and "decoration-1" keeps the
       1px thickness. */
    .tags-block.is-open .link-menu__trigger a,
    .tags-block.is-open .link-menu__trigger a:hover,
    .tags-block.is-open .link-menu__trigger a:focus,
    .tags-block.is-open .link-menu__trigger a:active {
        -webkit-text-decoration-line: underline !important;
        text-decoration-line: underline !important;
        text-underline-offset: 0.3em;
    }
}




/* list<>grid toggle: make clickabe area bigger */
.toggle-icon-wrap {
    padding: 15px;
    margin: -10px;
}




/*  TAGS PAGE — T1 TYPOGRAPHY REACTIVATION  */
.taglist {
    max-width: 55ch;
}



/* Navigation: Text size options */

li[data-size="large"] {
    font-size: 17px;
}

li[data-size="largest"] {
    font-size: 20px;
}


/* allow two column in grid view on small devices */
@media (min-width: 750px) and (max-width: 1024px) {
    .w--normal {
        width: 49%;
    }
}

@media (min-width: 522px) and (max-width: 750px) {
    .w--normal {
        width: 100%;
    }
    .flex-col-text-normal {
        font-size: 3.95vw;
    }
}




/* New Language Navigation */

#language-menu {
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    margin-right: -10px;
    font-size: 13px;

    & ul {
        gap: 1em;
        display: flex;
        padding: 1em;
        padding-right: 0.5em;

        &[hidden]{
            display: none;
        }
    }
}
#language-menu-toggle {
    width: 33px;
    min-width: 33px;
    height: 33px;
    flex: 0 0 33px;
    box-sizing: content-box;
    display: block;
    appearance: none;
    border: 0 none transparent;
    cursor: default;
    position: relative;
    background-color: transparent;
    
    &::after {
        content: '';
        display: block;
        width: 11px;
        aspect-ratio: 1;
        border-radius: 2ex;
        border: 1px solid currentColor;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translateX(-50%) translateY(-50%);
    }

}
@media (max-width: 670px) {
    /* jumping logo has been killed*/
    /* #language-menu {
        width: auto;
        min-width: 33px;
    } */
     
    /* hide logo when language-menu is expanded*/
    body:has(#language-menu [aria-expanded="true"]) .top-bar a[href="/"] {
        display: none;
    }
}



/* new blog name */

#sitetitle {
    position: absolute;
    left: 4.3em;
    top: 6px;
    width: max-content;
    color: #0000ff;
}

.dark #sitetitle {
    color: #ffff00;
}
@media (max-width: 750px) {
    #sitetitle {
        display: none;
    }
}


/* logotype monogram smaller on mobile */
@media (max-width: 480px) {
    .logo img {
        transform: scale(0.9);
    }
}



/* new related Articles content element */

.two-columns {
    --gap: 20px;
    width: calc(200% + var(--gap));
    display: grid;
    grid-template-columns: repeat(2, calc(50% - calc(var(--gap) / 2)));
    column-gap: var(--gap);
}
/* .two-columns .ce-related {
    grid-column-start: 1;
} */

.two-columns .ce-article_section {

    display: contents;

    & .title--sub {
        position: relative;
        grid-column-start: 1;
        grid-row-start: 1;
    }
    & .large--sub {
        grid-row-start: 1;
        grid-row-end: span 3;
        grid-column-start: 1;
    }
}

.ce-related .related-pages {
    gap: 10px;
    position: absolute;
}

@media (max-width: 1023px) {
    .two-columns {
        display: flex;
        flex-direction: column;
        width: auto;
        gap: var(--gap);
    }
    .two-columns .ce-related:not(:has(.hidden)) {
        margin: 0 -10px;
        /* padding-bottom: 42px; */
    }
    .two-columns .ce-article_section {
        display: block;
    }
    .ce-related .related-pages {
        position: static;
    }
    .ce-related .title {
        margin: 0 10px; /* offset negativ margin of parent */
        /* border-top: 1px solid currentColor; */
        padding-top: 0.5em;
        padding-bottom: 1em;
    }
    .ce-related .css-foldout {
        /* border-bottom: 1px solid currentColor; */
    }
    .ce-related .title::after {
        content: '';
        display: inline-block;
        width: 1em ;
        height: 1em;
        margin-left: 0.5em;
        transform: translateY(0.1em);
        background-color: currentColor;
        /* vertical-align: middle; */
        mask: url('img/Icon_Cross_a.svg') center/contain no-repeat;
    }
    .ce-related .open .title::after {
        mask-image: url('img/Icon_Cross_b.svg');
    }
}


/* underlines in excerpt */
.excerpt a {
    text-decoration: underline;
    text-underline-offset: 0.3em;
}
.excerpt a:hover {
    opacity: 0.7;
}


/* fix rte default */
.wysiwyg strong, .wysiwyg b,
.wysiwyg.wysiwyg--serif strong, .wysiwyg.wysiwyg--serif b {
    font-weight: 500;
}

/* wysiwyg: abstände */
.wysiwyg figure {
    margin: 0;
}




/* interview inhalt anpassungen */

.question strong,
.answer strong {
    padding-right: 1.5em;
}
.answer {
    padding-right: 1em;
}





/* detail page Mobile view*/
@media (max-width: 1024px) {
    .wp-singular .ce-introduction .article {
        width: calc(100% + 20px);
    }

    /* Title Block Detail View Mobile */
    .ce-introduction .relative {
        --tw-translate-y: 0;
    }
}

/* Excerpt minimalgrösse, T1 T2 T3 */

html[data-size="large"] .selected-size-modifier {
    font-size: 1.1em;
}

html[data-size="largest"] .selected-size-modifier {
    font-size: 1.2em;
}

/*
==============================
NORMAL ARTICLE BLOCKS – FONT SIZE / LINE HEIGHT
==============================
*/


/* Title & subtitle */
.article.w--normal .flex-text-title {
    line-height: 1.22 !important;
}
/* Date and category */
.article.w--normal .flex-text-date {
    line-height: 1.22 !important;
}

/* Mobile-specific 90% sizes */



.article {
    --max-txtcol-width: 400px;
}

/* Title & Subtitle */
.article.w--normal .flex-text-title,
.ce-introduction .article--nohover .flex-text-title {
    font-size: min(6.7vw, 30px) !important;
    max-width: var(--max-txtcol-width);
}

/* Date */
.article.w--normal .flex-text-date,
.ce-introduction .article--nohover .flex-text-date {
    font-size: min(4.8vw, 22px) !important;
}

/* Excerpt */
.article.w--normal .flex-text-lede-small,
.article.w--large .flex-text-lede-small {
    max-width: var(--max-txtcol-width);
}


@media (min-width: 1025px) and (max-width: 1280px) {
    .article.w--normal .flex-text-title {
        font-size: min(2.15vw, 30px) !important;
    }
    .article.w--normal .flex-text-date {
        font-size: min(1.5vw, 22px) !important;
    }
}

@media (min-width: 1025px) and (max-width: 1600px) {
    .ce-introduction .article--nohover .flex-text-title {
        font-size: min(calc(19.5px + 0.7vw), 30px) !important;
    }

    .ce-introduction .article--nohover .flex-text-date {
        font-size: min(calc(14px + 0.7vw), 22px) !important;
    }
}



/*  Video in carousel  */
.splide__slide video {
    width: auto;
    height: 100%;
}



/*  Single media in list view: no carousel, but the same height-driven sizing
    the .splide__slide used to provide. Images already carry w-auto h-full.  */
.article-line-media > video {
    width: auto;
    height: 100%;
}



/*   Pagination dots in carousel   */
.splide__pagination li::before {
    content: none;
    display: none;
}

/* Full-width media inside the constrained article column. */
body {
    /* Updated by fixes.js on load and resize. */
    --scrollbarwidth: 15px;
    --relative-wysiwyg-left: -80px;
}

.fullwidth-nobars,
.relative.wysiwyg .fullwidth-nobars {
    width: calc(100vw - var(--scrollbarwidth));
    max-width: calc(100vw - var(--scrollbarwidth));
    margin-left: var(--relative-wysiwyg-left);
}

/* Configurable article divider; override the generic WYSIWYG hr styling. */
.wysiwyg hr.article-divider__line {
    width: var(--divider-width, 100%);
    height: 0;
    margin: 0;
    border: 0;
    border-top: var(--divider-thickness, 1px) solid var(--divider-color-light, currentColor);
    background: transparent;
}

.dark .wysiwyg hr.article-divider__line {
    border-top-color: var(--divider-color-dark, var(--divider-color-light, currentColor));
}

/* Per-section title and subtitle colors configured in the Article Section module. */
.wysiwyg .title--sub.article-section__title--light-color {
    color: var(--article-section-title-color-light);
}

.wysiwyg .title--sub .secondary.article-section__subtitle--light-color {
    color: var(--article-section-subtitle-color-light);
}

.dark .wysiwyg .title--sub.article-section__title--custom-color {
    color: var(--article-section-title-color-dark, var(--article-section-title-color-light));
}

.dark .wysiwyg .title--sub .secondary.article-section__subtitle--custom-color {
    color: var(--article-section-subtitle-color-dark, var(--article-section-subtitle-color-light));
}

/* Keep desktop hover images interactive when their mobile effect is disabled. */
@media (min-width: 480px) {
    .group:hover .article-hover-image--desktop-only,
    .group:focus-within .article-hover-image--desktop-only {
        opacity: 1;
    }
}

.correct-iframe,
.correct-iframe > *,
.correct-iframe iframe {
    max-width: 100%;
}

.correct-iframe iframe {
    width: 100%;
}

.responsive-embed {
    position: relative;
    width: 100%;
    max-width: 100%;
    aspect-ratio: var(--embed-aspect-ratio, 16 / 9);
    overflow: hidden;
}

.responsive-embed--fill {
    height: 100%;
    aspect-ratio: auto;
}
/* fix list veiw embed */
.article-line-media .responsive-embed {
    position: relative;
    width: auto;
    height: 100%;
}

/* Sticky embeds use their intrinsic ratio on mobile and fill configured heights on desktop. */
@media (min-width: 1024px) {
    .responsive-embed--sticky-fill,
    .vimeo--sticky-fill,
    .vimeo--sticky-fill video {
        height: 100%;
    }

    .responsive-embed--sticky-fill {
        aspect-ratio: auto;
    }

    .vimeo--sticky-fill video {
        object-fit: cover;
    }
}

[data-enhancer="carrouselArticleLine"] .responsive-embed {
    width: auto !important;
    height: 100%;
}

.wysiwyg .iframe .responsive-embed,
.wysiwyg .iframe .responsive-embed > *,
.wysiwyg .iframe .responsive-embed iframe,
.responsive-embed > :not(script),
.responsive-embed iframe,
.responsive-embed object,
.responsive-embed embed {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
}


/* single media: position of hover image*/
.group .absolute:not(.icon) {
    top: 0;
}

/* landing page: add solid backgrouind to article-wrap so announcement are covered */
.landing-article-wrap {
    background-color: var(--category-bg, light-dark(#fff, #000));
    position: relative;
    z-index: 20;
}


/* no gap / gutter option on media columns */
.\!gap-0 {
    gap: 0 !important;
}





/* new UT category for "static" pages */

body.category-ut .ce-introduction .flex-text-date,
.article.ut time {
    display: none;
}





/* titles in RTE */

.ce-text .title--sub {
    position: static;
    transform: none;
}



/*
Text Table: Linke Spalte schmaler / mehr Abstand zwischen Spalten
*/

.ce-text_table dt p {
    padding-right: 1em;
}





/* position flexible fixed announcement */

/* The rail is what is fixed now, so the announcement no longer picks up its
   horizontal position from whichever wrapper the template happens to put it in.
   left/right pin it to the viewport; the article column's own classes inside it
   (see partials/article/announcement.php) do the left alignment. */
.imsc__announcement-rail {
    position: fixed;
    top: 84px;
    left: 0;
    right: 0;
    z-index: 10;
}

/* Legacy: only the to_delete/ homepage partials still fix .imsc__intro-text
   itself. Can go once those are removed. */
.imsc__intro-text {
    top: 84px
}



/* sticky figure-grid */

.wysiwyg .fullwidth-nobars .figure-grid {
    width: 100%;
}




/* fix instagram iframe  */
iframe.instagram-media {
    min-width: initial !important;
}




/* fix link color in anouncement block */
.imsc__intro-text a {
    color: inherit;
    text-decoration: none !important
}

.dark .imsc__intro-text a {
    color: inherit;
}

.imsc__intro-text.wysiwyg a:hover {
    opacity: .66;
    color: inherit;
}
.dark .imsc__intro-text.wysiwyg a:hover {
    opacity: .66;
    color: inherit;
}


/* fix hr length based on font size context */
p.medium + .hr--wide {
    width: 80%;
}

p.small + .hr--wide {
    width: 70%;
}



/* facebook ifram bg */

[data-service="facebook"] {
    background-color: #f2f3f5;
}

.dark [data-service="facebook"] {
    background-color: #fff;
}

/* 
#######################################################################################################################################
    Homepage  from additional css 
#######################################################################################################################################
*/

/*
==================================================
NORMAL ARTICLE BLOCKS – SPACING
==================================================
*/

/* SPACING LABEL - IMAGE */
/* .article.w--normal .secondary.flex-text-date ~ img,
.article.w--normal .secondary.flex-text-date ~ video,
.article.w--normal .secondary.flex-text-date ~ .vimeo {
    margin-top: 0.5rem !important;
}
@media (max-width: 767px) {
    .article.w--normal .secondary.flex-text-date ~ img,
    .article.w--normal .secondary.flex-text-date ~ video,
    .article.w--normal .secondary.flex-text-date ~ .vimeo {
        margin-top: 0.5rem !important;
    }
} */


/* SPACING IMAGE – TITLE */
.article.w--normal img + h3.flex-text-title {
    margin-top: 0.7rem !important;
}


/* SPACING IMAGE – SUBTITLE */
.article.w--normal img + h4.secondary.flex-text-title {
    margin-top: 0.7rem !important;
}

/* SPACING TITLE – IMAGE */
.article.w--normal h3.flex-text-title + img {
    margin-top: 1.2rem !important;
}

/* SPACING SUBTITLE – IMAGE */

/* .article.w--normal h4.secondary.flex-text-title + img {
    margin-top: 1.2rem !important;
} */

/* SPACING LABEL – EXCERPT */
.article.w--normal .secondary.flex-text-date + p.flex-text-lede-small {
    margin-top: 0.15rem !important;
}

/* SPACING TITLE – EXCERPT */
.article.w--normal h3.flex-text-title + p.flex-text-lede-small {
    margin-top: 0.8rem !important;
}

/* SPACING SUBTITLE – EXCERPT */
.article.w--normal h4.secondary.flex-text-title + p.flex-text-lede-small {
    margin-top: 0.8rem !important;
}

/* SPACING IMAGE – DATE */
.article.w--normal img + time.flex-text-date {
    margin-top: 0.5rem !important;
}

/* SPACING EXCERPT – IMAGE */
.article.w--normal p.flex-text-lede-small + img {
    margin-top: 1.1rem !important;
}

/* SPACING EXCERPT – DATE */
.article.w--normal p.flex-text-lede-small + time.flex-text-date {
    margin-top: -0.2rem !important;
}





/* Mobile only */

@media (max-width: 1025px) {
    .wysiwyg .title--sub {
        font-size: 25px !important;
        line-height: 1.2 !important;
    }
}




/*
==================================================
Bullet List Indents
==================================================
*/

.wysiwyg ul:not(.nodots, .sub_menu, .splide__list) li {
    position: relative;
    padding-inline-start: 0.6em;
    text-indent: 0;
}

.wysiwyg ul:not(.nodots, .sub_menu, .splide__list) li::before {
    position: absolute;
    left: 0;
    inset-inline-start: 0;
}

.wysiwyg ul:not(.nodots, .sub_menu, .splide__list) li::marker{
    content: none;
} 





/*
==================================================
ANNOTATION COLORS — LIGHT MODE
==================================================
*/


/* Trigger "A" */
.A.note,
.note--annotation {
    color: #0000ff !important;
}

/* Active annotated text */
.annotated.active,
.annotated.active * {
    color: #0000ff !important;
}

/* Floating annotation panel */
.the-annotation,
.the-annotation * {
    color: #0000ff !important;
}

/* 50% grey rich-text in annotation > 50% blue */
.wysiwyg .the-annotation .grey {
    opacity: 0.5 !important;
}

/* Close icon */
.the-annotation svg path {
    fill: #0000ff !important;
    stroke: none !important;
}


/*
==================================================
ANNOTATION COLORS — DARK MODE
==================================================
*/

.dark .A.note,
.dark .note--annotation {
    color: #ffff00 !important;
}

/* Active annotated text */
.dark .annotated.active,
.dark .annotated.active * {
    color: #ffff00 !important;
}

/* Floating annotation panel */
.dark .the-annotation,
.dark .the-annotation * {
    color: #ffff00 !important;
}

/* 50% grey rich-text in annotation > 50% yellow */
.dark .wysiwyg .the-annotation .grey {
    opacity: 0.5 !important;
}

/* Close icon */
.dark .the-annotation svg path {
    fill: #ffff00 !important;
    stroke: none !important;
}





/*
==================================================
ANNOTATION TYPOGRAPHY
==================================================
*/

.the-annotation {
    line-height: 1.52 !important;
}

.the-annotation strong,
.the-annotation b {

    font-weight: 500 !important;

}



/*
==================================================
NOTE + ANNOTATION TRIGGER UNDERLINE
==================================================
*/

.wysiwyg .note,

.A.note,

.note--annotation {

    text-decoration-thickness: 2px !important;

}



/*
==================================================
ANNOTATION CLOSE ICON SPACING
==================================================
*/

.close-annotation {

    margin-bottom: 4px !important;

}



/*
==================================================
ANNOTATION TRIGGER — LARGER CLICK AREA
==================================================
*/

.A.note,

.note--annotation {

    display: inline-block;
    padding: 6px !important;
    margin: -6px !important;

}



/*

==================================================
NOTE TYPOGRAPHY
==================================================

*/

.the-note,
.the-note p,
.the-note span,
.the-note div,
.the-note li {

    font-weight: 400 !important;
    line-height: 1.47 !important;

}

/* preserve bold */

.the-note strong,
.the-note b {

    font-weight: 500 !important;

}



/* ==============================================
ANNOTATED TEXT
ONLY WHEN ANNOTATION IS OPEN
============================================== */

/* RESET DEFAULT CLOSED STATE */

span.annotated {

    color: inherit !important;

    -webkit-text-fill-color: inherit !important;

}


/* OPEN / ACTIVE STATE — LIGHT MODE */

span.annotated.active,
span.annotated.active *,
span.annotated.active[style],
span.annotated.active[style] * {

    color: #0000ff !important;

    -webkit-text-fill-color: #0000ff !important;

}



/* ==============================================
OPEN / ACTIVE STATE — DARK MODE
============================================== */

.dark span.annotated.active,
.dark span.annotated.active *,
.dark span.annotated.active[style],
.dark span.annotated.active[style] * {

    color: #ffff00 !important;

    -webkit-text-fill-color: #ffff00 !important;

}













/* ==================================================
COMPLIANZ COOKIE BANNER — CLEAN OVERRIDE
================================================== */

/* new light-handed overrides */
body{
    --cmplz_button_font_size: 13px;
    --cmplz_category_header_title_font_size: 13px;

    --cmplz_category_header_always_active_color: #0000ff;

    & .cmplz-cookiebanner {
        right: calc(50% - var(--cmplz_banner_width) / 2);
        bottom: 40px;
        padding: 20px;
        
        & .cmplz-header,
        /* & .cmplz-divider-header, */
        & .cmplz-links {
            display: none;
        }
        & .cmplz-buttons .cmplz-btn {
            font-weight: 400;
        }
        & .cmplz-categories .cmplz-category {
            background-color: transparent;
        }
    }
}

@media (max-width: 768px) {
    body{
        --cmplz_banner_width: 370px;
        --cmplz_button_font_size: 14px;
        
        .cmplz-cookiebanner {
            /* right: initial; */
            max-width: var(--cmplz_banner_width);
        }
    }
}

@media (max-width: 410px) {
    body .cmplz-cookiebanner {
        right: initial;
        bottom: 0;
        padding: 20px;
        max-width: 100%;
    }
}


/* complianz ookies page */



#cmplz-document h2,
#cmplz-document h3,

.editor-styles-wrapper .cmplz-unlinked-mode h2,
.editor-styles-wrapper .cmplz-unlinked-mode h3,

#cmplz-cookies-overview .cmplz-dropdown summary h3,
#cmplz-document .cmplz-dropdown summary h3,
.editor-styles-wrapper .cmplz-unlinked-mode .cmplz-dropdown summary h3{
    font-size: inherit;
}

#cmplz-document h2,
#cmplz-document h3 {
    margin-top: 1.6em;
    margin-bottom: 0;
    padding-bottom: 0.4em;
}
#cmplz-document h2 + h3 {
    margin-top: 0;
}

#cmplz-document, 
#cmplz-document p, #cmplz-document li, #cmplz-document td, .editor-styles-wrapper .cmplz-unlinked-mode p, .editor-styles-wrapper .cmplz-unlinked-mode li, .editor-styles-wrapper .cmplz-unlinked-mode td {
    font-size: revert;
}
#cmplz-document h2 {
    /* lead approximation */
    font-size: calc(1em / 14 * 18);
}
#cmplz-document h3 {
    padding-bottom: 0;
}
#cmplz-cookies-overview,
.cmplz-manage-consent-container {
    width: calc(200%  + 30px);
}

#cmplz-cookies-overview .cmplz-dropdown p, #cmplz-cookies-overview .cmplz-dropdown h4, #cmplz-cookies-overview .cmplz-dropdown ul, #cmplz-document .cmplz-dropdown p, #cmplz-document .cmplz-dropdown h4, #cmplz-document .cmplz-dropdown ul, .editor-styles-wrapper .cmplz-unlinked-mode .cmplz-dropdown p, .editor-styles-wrapper .cmplz-unlinked-mode .cmplz-dropdown h4, .editor-styles-wrapper .cmplz-unlinked-mode .cmplz-dropdown ul {
    padding: 0;
}

@media (max-width: 1023px) {
   #cmplz-cookies-overview,
    .cmplz-manage-consent-container {
        width: auto;
    } 
}
#cmplz-cookies-overview .cmplz-dropdown summary, #cmplz-document .cmplz-dropdown summary, .editor-styles-wrapper .cmplz-unlinked-mode .cmplz-dropdown summary {
    margin: 10px 0 0 0;
}

#cmplz-cookies-overview .cmplz-dropdown .cookies-per-purpose, #cmplz-document .cmplz-dropdown .cookies-per-purpose:last-child,
.editor-styles-wrapper .cmplz-unlinked-mode .cmplz-dropdown .cookies-per-purpose:last-child {
    margin-bottom: 0;
}


.dark {
    #cmplz-cookies-overview,
    .cmplz-manage-consent-container {
        color: #000;
        background-color: #fff;
        filter: invert(1) hue-rotate(180deg);
    }


    #cmplz-cookies-overview .cmplz-dropdown, #cmplz-document .cmplz-dropdown, .editor-styles-wrapper .cmplz-unlinked-mode .cmplz-dropdown,
    #cmplz-manage-consent-container.cmplz-manage-consent-container .cmplz-categories .cmplz-category{
        background-color: #999;
    }

    #cmplz-cookies-overview .cmplz-dropdown .cookies-per-purpose,
    #cmplz-document .cmplz-dropdown .cookies-per-purpose,
    .editor-styles-wrapper .cmplz-unlinked-mode .cmplz-dropdown .cookies-per-purpose {
        border-color: #999;
        background-color:#999;
    }


}


/* Deactivate to see default style */

/*

/* COOKIE BANNER CONTAINER * /

.cmplz-cookiebanner {

    box-sizing: border-box !important;

    width: min(585px, calc(100vw - 80px)) !important;

    max-width: calc(100vw - 80px) !important;

    left: 50% !important;

    transform: translateX(-50%) !important;

    right: auto !important;

    bottom: 20px !important;

    top: auto !important;

    padding: 28px !important;

    display: flex !important;

    flex-direction: column !important;

    gap: 24px !important;

}


/* BODY LAYOUT * /

.cmplz-cookiebanner .cmplz-body {

    display: flex !important;

    flex-direction: column !important;

    gap: 18px !important;

    width: 100% !important;

}


/* MESSAGE * /

.cmplz-cookiebanner .cmplz-message {

    width: 100% !important;

    margin: 0 0 30px 0 !important;

    padding: 0 !important;

}


/* PREFERENCES * /

.cmplz-cookiebanner .cmplz-categories {

    width: 100% !important;

    display: none;

}


.cmplz-cookiebanner.cmplz-show-preferences .cmplz-categories,
.cmplz-cookiebanner.view-preferences .cmplz-categories,
.cmplz-cookiebanner[data-view="preferences"] .cmplz-categories {

    display: block !important;

}


/* BUTTONS * /

.cmplz-cookiebanner .cmplz-buttons {

    display: flex !important;

    flex-wrap: wrap !important;

    gap: 16px !important;

    width: 100% !important;

}


.cmplz-cookiebanner .cmplz-btn {

    min-width: 160px !important;

    margin: 0 !important;

}


/* LIGHT MODE * /

.cmplz-cookiebanner,
.cmplz-cookiebanner .cmplz-btn,
.cmplz-cookiebanner .cmplz-categories {

    background-color: #e1e1e1 !important;

}


/* DARK MODE * /

.dark .cmplz-cookiebanner,
.dark .cmplz-cookiebanner .cmplz-btn,
.dark .cmplz-cookiebanner .cmplz-categories {

    background-color: #333333 !important;

}


/* CATEGORY TOGGLE ROWS * /

.cmplz-cookiebanner .cmplz-category,
.cmplz-cookiebanner .cmplz-category-header,
.cmplz-cookiebanner summary {

    background-color: #e1e1e1 !important;

}


.dark .cmplz-cookiebanner .cmplz-category,
.dark .cmplz-cookiebanner .cmplz-category-header,
.dark .cmplz-cookiebanner summary {

    background-color: #333333 !important;

}


/* DISMISSED * /

.cmplz-cookiebanner.cmplz-dismissed {

    display: none !important;

}


/* TABLET * /

@media (max-width: 1024px) {

    .cmplz-cookiebanner {

        width: calc(100vw - 32px) !important;

        max-width: calc(100vw - 32px) !important;

        padding: 24px !important;

    }

}


/* MOBILE * /

@media (max-width: 768px) {

    .cmplz-cookiebanner {

        left: 16px !important;

        right: 16px !important;

        width: auto !important;

        max-width: none !important;

        transform: none !important;

        bottom: 16px !important;

        padding: 20px !important;

    }

    .cmplz-cookiebanner .cmplz-buttons {

        flex-direction: column !important;

    }

    .cmplz-cookiebanner .cmplz-btn {

        width: 100% !important;

        min-width: 0 !important;

    }

}
    */


/* disable interaction blocking */

/* REMOVE INVISIBLE OVERLAY */

.cmplz-cookiebanner-container:empty {
    display: none !important;
    pointer-events: none !important;
}


.cmplz-cookiebanner-container {
    pointer-events: none !important;
}


.cmplz-cookiebanner {
    pointer-events: auto !important;
}


.cmplz-cookiebanner.cmplz-dismissed {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;

}
	


/* ==============================================
FIX INVISIBLE FULLSCREEN OVERLAY BLOCKING SCROLL
============================================== */

.nav-background {

    pointer-events: none !important;

}


.main-nav.translate-x-\[-100\%\] + .nav-background {

    pointer-events: none !important;

}


.nav-background.hidden {

    display: none !important;

}



/* ==============================================
DESKTOP BUTTON ALIGNMENT
============================================== */

@media (min-width: 769px) {

    .cmplz-cookiebanner .cmplz-buttons {

        justify-content: space-between !important;

    }

    .cmplz-cookiebanner .cmplz-btn {

        flex: 1 1 0 !important;

        min-width: 0 !important;

        max-width: none !important;

    }

}






/* ==============================================
LEGAL FOOTER
============================================== */

.legal-footer {
    opacity: 0.6;
    /* Bottom spacing (was 5px) now comes from the legal-block's
       10px hover padding, which must stay inside the footer: pushed
       past the body's end it paints on the page background instead. */
    padding-bottom: 0;

}

/* Reserve a line so opening the menu doesn't grow the page.
   The 10px paddings enlarge the hover area above and below (the menu
   closes on mouseleave of this block, so slight vertical drift while
   moving along the links no longer closes it); the negative top margin
   cancels the layout shift, with an extra -4px to move the block up. */

.legal-footer .legal-block {

    min-height: 44px; /* 24px line + 2 x 10px hover padding */

    padding-top: 10px;
    padding-bottom: 10px;

    margin-top: -14px;    /* -10px padding compensation - 4px shift up */

}

/* Same label column width as the Tags trigger */

.legal-footer .legal-trigger {

    display: inline-block;

    width: 53px;

    flex-shrink: 0;

}

.legal-footer .legal-links li {

    margin-bottom: 4px;

}

/* On templates that show the Tags/Share block, pull the legal
   footer up so the gap matches the 50px Tags->Share rhythm
   (the .main wrapper's pb-12 plus the min-height:90px container
   slack add up to ~64px otherwise). Tweak here if needed. */
/*
body.single .legal-footer,
body.page-template-template-landing-page .legal-footer {
    margin-top: -38px;
}
*/



/*
==============================
SMALL ARTICLE BLOCKS
==============================
*/




/*
==================================================
SMALL ARTICLE BLOCKS — DESKTOP / TABLET
==================================================
*/

@media (min-width: 768px) {

/* ----------------------------------------------
LABEL → IMAGE
---------------------------------------------- */

    .article.w--small .mb-\[2px\] {

        margin-bottom: 4px !important;

    }

/* ----------------------------------------------
LABEL → TITLE
---------------------------------------------- */

    .article.w--small h4.mb-0 {

        margin-bottom: 3px !important;

    }

/* ----------------------------------------------
TITLE LINE HEIGHT
---------------------------------------------- */

    .article.w--small h3.flex-text-title-small,
    .article.w--small h3 {

        line-height: 1.3 !important;

    }

/* ----------------------------------------------
SUBTITLE → DATE
---------------------------------------------- */

    .article.w--small h4.flex-text-title-small {

        margin-bottom: 4.5px !important;
        line-height: 1.3 !important;

    }

    .article.w--small time.flex-text-date-small {

        display: block !important;

    }

/* ----------------------------------------------
IMAGE → TITLE
---------------------------------------------- */

    .article.w--small img.mb-3 {

        margin-bottom: 10px !important;

    }

/* ----------------------------------------------
LABEL FONT SIZE
---------------------------------------------- */

    .article.w--small .article-category,
    .article.w--small .flex-text-category,
    .article.w--small div.secondary:not(.flex-text-title-small) {

        font-size: 0.96vw !important;

    }

/* ----------------------------------------------
DATE FONT SIZE
---------------------------------------------- */

    .article.w--small time.flex-text-date-small {

        font-size: 0.96vw !important;

    }

}





/*
==================================================
SMALL ARTICLE BLOCKS — MOBILE
==================================================
*/

@media (max-width: 767px) {

.w--small .flex-text-date-small.mb-\[2px\]:has(+ img),
.w--small .flex-text-date-small.mb-\[2px\]:has(+ video) {
   margin-bottom: -2px !important;
}

/* ----------------------------------------------
LABEL → IMAGE
---------------------------------------------- */

    .article.w--small .mb-\[2px\] {

        margin-bottom: 4px !important;

    }

/* ----------------------------------------------
IMAGE-ABOVE-TITLE LAYOUT
EXTRA SPACE BETWEEN LABEL + IMAGE
---------------------------------------------- */

    .article.w--small .mb-\[2px\] + img {

        margin-top: 6px !important;

    }

/* ----------------------------------------------
LABEL → TITLE
---------------------------------------------- */

    .article.w--small h4.mb-0 {

        margin-bottom: 3px !important;

    }



/* ----------------------------------------------

TITLE FONT SIZE

---------------------------------------------- */

.article.w--small h3 {
    font-size: 18.5px !important;
}



/* ----------------------------------------------
TITLE LINE HEIGHT
---------------------------------------------- */

    .article.w--small h3.flex-text-title-small,
    .article.w--small h3 {

        line-height: 1.3 !important;

    }



/* ----------------------------------------------
SUBTITLE FONT SIZE
---------------------------------------------- */

.article.w--small h4.flex-text-title-small {

    font-size: 15.5px !important;

}


/* ----------------------------------------------
SUBTITLE LINE HEIGHT
---------------------------------------------- */

.article.w--small h4.flex-text-title-small {

    line-height: 1.3 !important;

}
	


/* ----------------------------------------------
SUBTITLE → DATE
---------------------------------------------- */

    .article.w--small h4.flex-text-title-small {

        margin-bottom: 4.5px !important;
        line-height: 1.3 !important;

    }

    .article.w--small time.flex-text-date-small {

        margin-top: 0 !important;
        display: block !important;

    }


/* ----------------------------------------------
LABEL FONT SIZE
---------------------------------------------- */

    .article.w--small .article-category,
    .article.w--small .flex-text-category,
    .article.w--small div.secondary:not(.flex-text-title-small) {

        font-size: 12px !important;

    }

/* ----------------------------------------------
DATE FONT SIZE
---------------------------------------------- */

    .article.w--small time.flex-text-date-small {

        font-size: 12px !important;

    }

/* ----------------------------------------------
SUBTITLE FONT SIZE SAFETY
---------------------------------------------- */

    .article.w--small h4.flex-text-title-small {

        font-size: inherit !important;

    }

}



/* mobile excerpt in small artigcle can overflow  */
@media (max-width: 440px) {
    .w--small .flex-text-title-small,
    .w--small .excerpt{
        margin-right: -10px;
    }

}