/*

    PopBoard NRW
    
    Design: BOROS
    Entwicklung: Leon Klaßen—www.leonklassen.com
    
    2026

*/



*,
*:before,
*:after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

ol, ul {
    list-style: none;
}

b, strong {
    font-weight: normal;
}

i, em {
    font-style: normal;
}

dialog:modal {
    max-width: 100%;
    max-height: 100%;
}



/* ### FONTS ### */


@font-face {
    font-family: 'OverusedGrotesk';
    font-style: normal;
    font-weight: bold;
    src: url( 'fonts/OverusedGrotesk/OverusedGroteskRoman-Bold.otf' ) format( 'opentype' );
}

@font-face {
    font-family: 'OverusedGrotesk';
    font-style: normal;
    font-weight: 800;
    src: url( 'fonts/OverusedGrotesk/OverusedGroteskRoman-Black.otf' ) format( 'opentype' );
}

@font-face {
    font-family: 'OpenSans';
    font-style: normal;
    font-weight: normal;
    src: url( 'fonts/OpenSans/OpenSans-Regular.ttf' ) format( 'truetype' );
}

@font-face {
    font-family: 'OpenSans';
    font-style: italic;
    font-weight: normal;
    src: url( 'fonts/OpenSans/OpenSans-Italic.ttf' ) format( 'truetype' );
}



/* ### VARS ### */


:root {

    --color-dark: #000000;
    --color-light: #ffffff;
    
    --color-magenta: #F00078;
    --color-blue: #00C8F0;
    
    --font-small-size: 0.9375rem; /* 15 / 20 */
    --font-small-lineheight: 1.33333333em;
    
    --font-normal-size: 1.5625rem; /* 25 / 30 */
    --font-normal-lineheight: 1.2em;

    --font-large-size: 2.8125rem; /* 45 / 50 */
    --font-large-lineheight: 1.1em;

    --font-extralarge-size: 5rem; /* 80 / 75 */
    --font-extralarge-lineheight: 0.95em;
    
    --header-height: 110px;
    
    --page-padding-side: 20px;
    --page-margin-large: 120px;
    --page-margin-small: 30px;
    
    --content-max-width: 900px;
    
    --parallax-image-offset: -1vw; /* also defined in js */
    
    --animation-spring-timing: cubic-bezier(.28,.62,.46,1.15);

}

@media ( max-width: 750px ) {
    
    :root {
    
        --font-small-size: 0.9375rem; /* 15 / 20 */
        --font-small-lineheight: 1.33333333em;
        
        --font-normal-size: 0.9375rem; /* 15 / 20 */
        --font-normal-lineheight: 1.33333333em;
    
        --font-large-size: 1.5625rem; /* 25 / 25 */
        --font-large-lineheight: 1em;
    
        --font-extralarge-size: 2.1875rem; /* 35 / 35 */
        --font-extralarge-lineheight: 1em;
        
        --header-height: 75px;

        --page-padding-side: 10px;
        --page-margin-large: 80px;
        --page-margin-small: 20px;

    }
    
}

@media ( min-width: 1550px ) {
   
    :root {
        
        --font-small-size: 1.25rem; /* 20 / 25 */
        --font-small-lineheight: 1.25em;
        
    }
     
}



/* ### GENERAL ### */


body {
    margin: 0px;
    padding: 0px;
    font-family: 'OpenSans', sans-serif;
    font-size: var( --font-normal-size );
    line-height: var( --font-normal-lineheight );
    background-color: var( --color-light );
    color: var( --color-dark );
    cursor: default;
    -webkit-user-select: text; 
    -moz-user-select: text; 
    -ms-user-select: text; 
    user-select: text;
    font-weight: normal;
    overflow-wrap: break-word;
    min-height:100%;
    height: 100%;
    width: 100%;
}

::selection {
    background: var( --color-dark );
    color: var( --color-light );
}

::-moz-selection {
    background: var( --color-dark );
    color: var( --color-light );
}

a {
    color: inherit;
    text-decoration: inherit;
    cursor: pointer;
}

button {
    background-color: transparent;
    text-align: left;   
    color: inherit;     
}

a:hover {

}

strong {
    font-family: 'OverusedGrotesk', sans-serif;
    font-weight: bold;
}

em {
    font-style: normal;
}

button:focus-visible,
a:focus-visible,
*[tabindex = "0"]:focus-visible,
details summary:focus-visible {
    outline: 3px solid var( --color-magenta );
    outline-offset: 5px;
    border-radius: 5px;
}



/* ### HIGH CONTRAST ### */


@media (prefers-contrast: more) { 

    body {
        
        --color-dark: #ffffff;
        --color-light: #000000;
        
        --color-magenta: #000000;
        --color-blue: #000000;
        
    }
    
    button:focus-visible,
    a:focus-visible,
    *[tabindex = "0"]:focus-visible,
    details summary:focus-visible {
        outline: 3px solid #F00078;
    }

}

body.mode-highcontrast {
    
    --color-dark: #ffffff;
    --color-light: #000000;
    
    --color-magenta: #000000;
    --color-blue: #000000;
    
}

body.mode-highcontrast button:focus-visible,
body.mode-highcontrast a:focus-visible,
body.mode-highcontrast *[tabindex = "0"]:focus-visible,
body.mode-highcontrast details summary:focus-visible {
    outline: 3px solid #F00078;
}



/* ### COMPONENTS ### */


.wp-element-button {
    position: relative;
    display: block;
    font-family: 'OverusedGrotesk', sans-serif;
    font-weight: bold;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    border: 1px solid var( --color-dark );   
    height: 2.16em;
    border-radius: 50vw;
    padding-left: 20px;
    padding-right: 20px; 
    display: flex;
    align-items: center;
    cursor: pointer;
    z-index: 1;
    transition: border-color .6s;
}

.wp-element-button:focus-visible {
    border-radius: 50vw;
}

a.wp-element-button:not( [href] ) {
    opacity: 0.2;
    cursor: default;
    pointer-events: none;
}

.wp-element-button::before {
    content: "";
    display: block;
    position: absolute;
    width: auto;
    height: auto;
    inset: -1px;
    border-radius: 50vw;
    border: 10px solid var( --color-magenta );
    z-index: -1;
    opacity: 0;
    transition: opacity .6s;
    transition-delay: 0s;
}

.wp-element-button::after {
    content: "";
    display: block;
    position: absolute;
    width: auto;
    height: auto;
    inset: 9px;
    border-radius: 50vw;
    background-color: var( --color-blue );
    z-index: -1;
    opacity: 0;
    transition: opacity .7s;
}

.wp-element-button.wp-element-button--white {
    border-color: var( --color-light );
}

@media (hover: hover) {

    .wp-element-button:hover {
        border-color: transparent;
    }

}

@media (prefers-contrast: more) { 

    .wp-element-button.wp-element-button--white:hover {
        color: var( --color-dark );
    }

}

body.mode-highcontrast .wp-element-button.wp-element-button--white:hover {
    color: var( --color-dark );
}

@media (hover: hover) {

    .wp-element-button:hover::before {
        opacity: 1;
        transition: opacity .3s;
        transition-delay: .3s;
    }
    
    .wp-element-button:hover::after {
        opacity: 1;
        transition: opacity .1s;
    }

}



/* ### MAIN ### */


body {
    display: flex;
    flex-direction: column;
    min-height: 100svh;
}

main {
    flex-grow: 1;    
    padding-bottom: var( --page-margin-large );
}



/* ### SPLASH ### */


.splash {
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    background-color: var( --color-light );
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    transition: opacity 1s;
}

.splash.hidden {
    display: none;
}

.splash .circles {
    position: relative;
    width: 8vw;
    height: 8vw;
    border-radius: 50%;
    background-color: var( --color-magenta );
    transition: scale 0.5s, background-color 0.2s;
}

.splash .circles .circle {
    position: absolute;
    inset: 0px;
    margin: auto;
    border-radius: 50%;
    transition: background-color 0.2s;
}

.splash .circles .circle.one {
    width: 75%;
    height: 75%;
    background-color: var( --color-blue );
}

.splash .circles .circle.two {
    width: 50%;
    height: 50%;
    background-color: var( --color-magenta );
}

.splash .circles .circle.three {
    width: 25%;
    height: 25%;
    background-color: var( --color-blue );
}



/* ### HEADER ### */


header {
    position: sticky;
    top: 0px;
    margin-top: 0px;
    height: var( --header-height );
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 9991;
    background-color: var( --color-light );
    transition: transform 1s;
}

@media (prefers-reduced-motion) {

    header { 
        transition: none;
    }
    
}

header.shifted {
    transform: translate3d( 0px, -300px, 0 );
}

header .logo {
    height: var( --header-height );
    padding: 20px var( --page-padding-side );
    flex-shrink: 0;
    background-color: white;
}

header .logo:focus-visible {
    outline-offset: -6px;
}

header .logo svg {
    display: block;
    height: 100%;
    width: auto;
}

@media ( max-width: 750px ) {
    
    header .logo {
        padding: 15px var( --page-padding-side );
    }

}



/* ### MENU ### */


.main-menu {
    position: fixed;
    display: flex;
    inset: 0px;
    width: 100%;
    height: 100%;
    background-color: var( --color-light );
    z-index: 9999;    
    flex-direction: column;
    justify-content: flex-end;
    pointer-events: none;
    transform: translate3d( 0px, 100%, 0 );
    transition: transform .8s;
    transition-timing-function: var( --animation-spring-timing );
}

@media (prefers-reduced-motion) {

    .main-menu {
        transition: none;
    }
    
}

.main-menu.visible {
    transform: none;
    pointer-events: all;
}

.main-menu .close-button {
    position: absolute;
    right: 0px;
    top: 0px;
    width: 140px;
    height: 140px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 100;
}

.main-menu .close-button:focus-visible {
    outline-offset: -6px;
}

.main-menu .close-button svg {
    width: 80px;
    height: auto;
    fill: var( --color-dark );
}

.main-menu .primary-menu {
    overflow: hidden;
    overflow-y: auto;
}

.main-menu .primary-menu > li {
    position: relative;
    overflow: hidden;
}

.main-menu .primary-menu > li > a {
    display: block;
    width: 100%;
    position: relative;
    font-family: 'OverusedGrotesk', sans-serif;
    font-size: 100px;
    line-height: 1.05em;
    font-weight: 800;
    padding-top: 10px;
    padding-bottom: 10px;
    padding: 10px calc( 30px + 80px + var( --page-padding-side ) ) 10px var( --page-padding-side );
    cursor: pointer;
}

.main-menu .primary-menu > li > a:focus-visible {
    outline-offset: -6px;
}

.main-menu .primary-menu > li:nth-child( even ) a {
    outline-color: var( --color-blue );
}

.main-menu .primary-menu > li::before {
    content: "";
    display: block;
    position: absolute;
    inset: 0px;
    z-index: -1;
    opacity: 0;
    transform: translate3d( -100%, 0px, 0 );
    transition: transform .5s, opacity .5s;
}

@media (prefers-reduced-motion) {

    .main-menu .primary-menu > li::before {
        transition: opacity .5s;
    }

}

.main-menu .primary-menu > li:nth-child( odd )::before {
    background-color: var( --color-blue );
}

.main-menu .primary-menu > li:nth-child( even )::before {
    background-color: var( --color-magenta );
}

@media (hover: hover) {

    .main-menu .primary-menu > li:hover::before {
        transform: none;
        opacity: 1;
    }

}

.main-menu .primary-menu > li:has( .sub-menu.extended )::before {
    transform: none;
    opacity: 1;
}

.main-menu .sub-menu {
    position: relative;
    font-family: 'OverusedGrotesk', sans-serif;
    font-weight: bold;
    padding: 0px calc( 30px + 80px + var( --page-padding-side ) ) 0px var( --page-padding-side );
    display: none;
    top: -15px;
    transition: height .5s;
    transition-timing-function: var( --animation-spring-timing );
}

@media (prefers-reduced-motion) {

    .main-menu .sub-menu {
        transition: none;
    }
    
}

.main-menu .sub-menu.extended {
    display: block;
}

.main-menu .sub-menu > li {
    padding-top: 5px;
    padding-bottom: 5px;
}

@media ( max-width: 750px ) {
    
    .main-menu .close-button {
        width: 50px;
        height: var( --header-height );
    }
    
    .main-menu .close-button svg {
        width: 30px;    
    }
    
    .main-menu .primary-menu > li > a {
        font-size: var( --font-extralarge-size );
        line-height: var( --font-extralarge-lineheight );
        padding: 10px calc( 10px + 30px + var( --page-padding-side ) ) 10px var( --page-padding-side );
    }
    
    .main-menu .sub-menu {
        font-weight: 800;
        padding: 0px calc( 10px + 30px + var( --page-padding-side ) ) 0px var( --page-padding-side );
        top: -5px;
    }

}



/* ### MENU BAR ### */


.menu-bar {
    flex-shrink: 0;    
    padding: 20px var( --page-padding-side );
    display: flex;
    align-items: center;
    gap: 20px;
}

.menu-bar .button {
    position: relative;
    cursor: pointer;
    width: 40px;
    height: 40px;
    border-radius: 5px;
}

.menu-bar .button svg {
    position: absolute;
    inset: 0px;
    width: 100%;
    height: 100%;
    fill: var( --color-dark );
}

.menu-bar .button[aria-pressed="true"] {
    background-color: var( --color-dark );
}

.menu-bar .button[aria-pressed="true"] svg {
    fill: var( --color-light );
}

.menu-bar .menu-button {
    font-family: 'OverusedGrotesk', sans-serif;
    font-size: var( --font-large-size );
    line-height: var( --font-large-lineheight );
    font-weight: 800;
    cursor: pointer;
    margin-left: 20px;
}

.menu-bar .search-wrapper {
    height: 40px;
    width: auto;
    display: flex;
    align-items: center;
}

.menu-bar .search-wrapper .search-field {
    width: 0px;
    margin-left: 0px;
    transition: width .6s, margin-left .6s;
}

@media (prefers-reduced-motion) {

    .menu-bar .search-wrapper .search-field {
        transition: none;
    }

}

.menu-bar .search-wrapper.extended .search-field {
    width: 10em;
    margin-left: 10px;
}

.menu-bar .search-wrapper.extended .search-field:focus-visible {
    outline: 3px solid var( --color-magenta );
    outline-offset: 5px;
    border-radius: 5px;
}

.main-menu .menu-bar {
    margin-bottom: auto;
    display: none;
}

.menu-bar .language-button {
    font-family: 'OverusedGrotesk', sans-serif;
    font-size: var( --font-large-size );
    line-height: var( --font-large-lineheight );
    font-weight: bold;
    cursor: pointer;
}

@media ( max-width: 750px ) {
    
    header .menu-bar > :not( .menu-button ) {
        display: none;
    }
    
    .main-menu .menu-bar {
        display: flex;
        padding-top: 0px;
        gap: 10px;
    }
    
    .menu-bar .button {
        height: 34px;
        width: 34px;
    }

}



/* ### SOCIAL BAR ### */


.social-bar {
    flex-shrink: 0;    
    padding: 20px var( --page-padding-side );
    display: flex;
    align-items: center;
    gap: 10px;   
}

.social-bar .icon {
    height: 45px;
    width: auto;
}

.social-bar .icon svg {
    height: 100%;
    width: auto;
    fill: var( --color-dark );
}

.main-menu .social-bar {
    margin-top: 28px;
    margin-bottom: auto;
}

@media ( max-width: 750px ) {

    .main-menu .social-bar {
        margin-bottom: 0px;
        margin-top: 0px;
    }
    
    .social-bar .icon {
        height: 34px;
    }

}



/* ### CONTENT ### */


.content {
    transition: transform 1s;
}

@media (prefers-reduced-motion) {

    .content {
        transition: none;
    }

}

.content.shifted {
    transform: translate3d( 0px, 300px, 0 );
}



/* ### CONTENT: HERO IMAGE ### */


.content .hero-image {
    position: relative;
    transition: transform 1s;
}

.content.shifted .hero-image {
    transform: translate3d( 0px, -600px, 0px );
}

.content .hero-image img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    max-height: calc( 100svh - var( --header-height ) );
}

.content .hero-image .title {
    position: absolute;
    left: 0px;
    bottom: 0px;
    width: 100%;
    font-family: 'OverusedGrotesk', sans-serif;
    font-size: var( --font-extralarge-size );
    line-height: var( --font-extralarge-lineheight );
    font-weight: 800;
    color: var( --color-light );
    padding: 80px var( --page-padding-side );
}

@media ( max-width: 750px ) {

    .content .hero-image .title {
        padding: var( --page-margin-small ) var( --page-padding-side );
    }

}

@media ( max-width: 550px ) {

    .content .hero-image img {
        aspect-ratio: 4 / 5;
    }

}

@media (prefers-contrast: more) { 

    .content .hero-image .title {
        background-color: var( --color-dark );
    }

}

body.mode-highcontrast .content .hero-image .title {
    background-color: var( --color-dark );
}



/* ### CONTENT: HEADING ### */


.content .wp-block-heading {
    font-family: 'OverusedGrotesk', sans-serif;
    font-weight: bold;
    max-width: var( --content-max-width );
    text-wrap: balance;
    padding-left: var( --page-padding-side );
    padding-right: var( --page-padding-side );
    scroll-margin-top: var( --header-height );
}

.content h1.wp-block-heading,
.content h2.wp-block-heading {
    font-size: var( --font-extralarge-size );
    line-height: var( --font-extralarge-lineheight );
    font-weight: 800;
    margin-bottom: var( --page-margin-small );
    max-width: unset;
}

.content h1.wp-block-heading:not( :first-child ),
.content h2.wp-block-heading:not( :first-child ) {
    margin-top: var( --page-margin-large );
}

.content h3.wp-block-heading {
    font-size: var( --font-large-size );
    line-height: var( --font-large-lineheight );
    font-weight: 800;
    margin-bottom: 10px;
}

.content h3.wp-block-heading:not( :first-child ) {
    margin-top: 50px;
}

.content h4.wp-block-heading,
.content h5.wp-block-heading,
.content h6.wp-block-heading {
    font-size: var( --font-normal-size );
    line-height: var( --font-normal-lineheight );
    font-weight: bold;
    margin-bottom: 10px;
}

.content h4.wp-block-heading:not( :first-child ),
.content h5.wp-block-heading:not( :first-child ),
.content h6.wp-block-heading:not( :first-child ) {
    margin-top: var( --page-margin-small );
}



/* ### CONTENT: P ### */


.content p {
    max-width: var( --content-max-width );
    padding-left: var( --page-padding-side );
    padding-right: var( --page-padding-side );
}

.content p.has-small-font-size {
    font-size: var( --font-small-size );
    line-height: var( --font-small-lineheight );
}

.content p + p {
    margin-top: var( --font-normal-lineheight );
}

.content p a,
.content li a {
    font-family: 'OverusedGrotesk', sans-serif;
    font-weight: bold;
    color: var( --color-magenta );
}

@media (prefers-contrast: more) { 

    .content p a,
    .content li a {
        color: var( --color-dark );
        text-decoration: underline;
    }

}

body.mode-highcontrast .content p a,
body.mode-highcontrast .content li a {
    color: var( --color-dark );
    text-decoration: underline;
}



/* ### CONTENT: LIST ### */


.content .wp-block-list {
    padding-left: var( --page-padding-side );
    padding-right: var( --page-padding-side );
}

.content .wp-block-list:not(:first-child) {
    margin-top: 20px;
}

.content .wp-block-list:not(:last-child) {
    margin-bottom: 20px;
}

.content .wp-block-list li {
    position: relative;
    padding-left: 50px;
    max-width: var( --content-max-width );
}

.content .wp-block-list li::before {
    content: "";
    display: block;
    position: absolute;
    left: 0px;
    top: 0px;
    bottom: 0px;
    margin-top: auto;
    margin-bottom: auto;
    width: 30px;
    height: 30px;
    border-radius: 15px;
}

.content .wp-block-list li:nth-child( even )::before {
    background-color: var( --color-magenta );
}

.content .wp-block-list li:nth-child( odd )::before {
    background-color: var( --color-blue );
}

.content .wp-block-list li + li {
    margin-top: 20px;
}

@media (prefers-contrast: more) { 

    .content .wp-block-list li:nth-child( even )::before,
    .content .wp-block-list li:nth-child( odd )::before {
        background-color: var( --color-dark );
    }

}

body.mode-highcontrast .content .wp-block-list li:nth-child( even )::before,
body.mode-highcontrast .content .wp-block-list li:nth-child( odd )::before {
    background-color: var( --color-dark );
}

/* +++ LIST LARGE LINKS +++ */

.content .wp-block-list li.has-arrow {
    max-width: none;
}

.content .wp-block-list li.has-arrow::after {
    content: url( 'graphics/icon-goto.svg' );
    background-size: cover;
    background-repeat: no-repeat;
    display: block;
    position: absolute;
    right: 0px;
    width: 30px;
    height: 25px;
    top: 0px;
    bottom: 0px;
    margin-top: auto;
    margin-bottom: auto;
    pointer-events: none;
    transition: filter .6s;
}

.content .wp-block-list li:nth-child( odd ).has-arrow::after {
    content: url( 'graphics/icon-goto-blue.svg' );
}

.content .wp-block-list li:nth-child( even ).has-arrow::after {
    content: url( 'graphics/icon-goto-magenta.svg' );
}

@media (prefers-contrast: more) { 

    .content .wp-block-list li:nth-child( odd ).has-arrow::after,
    .content .wp-block-list li:nth-child( even ).has-arrow::after {
        content: url( 'graphics/icon-goto-black.svg' );
        filter: invert();
    }

}

body.mode-highcontrast .content .wp-block-list li:nth-child( odd ).has-arrow::after,
body.mode-highcontrast .content .wp-block-list li:nth-child( even ).has-arrow::after {
    content: url( 'graphics/icon-goto.svg' );
    filter: invert();
}

.content .wp-block-list li.has-arrow a {
    font-family: inherit;
    font-weight: inherit;
    color: inherit;
    display: block;
    width: 100%;
    padding-right: 50px;
}

@media ( max-width: 750px ) {

    .content .wp-block-list li.has-arrow {
        padding-right: 30px;
    }

    .content .wp-block-list li.has-arrow::after {
        width: 20px;
        height: 17px;
    }
    
}



/* ### CONTENT: BUTTONS ### */


.content .wp-block-buttons {
    max-width: var( --content-max-width );
    padding-left: var( --page-padding-side );
    padding-right: var( --page-padding-side );
    display: flex;
    gap: var( --page-padding-side );
}

.content .wp-block-buttons:not( :first-child ) {
    margin-top: var( --page-margin-small );
}

.content .wp-block-buttons:not( :last-child ) {
    margin-bottom: var( --page-margin-small );
}

.content .wp-block-buttons.full-color {
    max-width: unset;
    transition: background-color .6s, color .6s;
}

.content .wp-block-buttons.full-color:nth-of-type( even ) {
    background-color: var( --color-magenta );
}

.content .wp-block-buttons.full-color:nth-of-type( odd ) {
    background-color: var( --color-blue );
}

@media (hover: hover) {

    .content .wp-block-buttons.full-color:hover:nth-of-type( even ) {
        background-color: var( --color-light );
    }
    
    .content .wp-block-buttons.full-color:hover:nth-of-type( odd ) {
        background-color: var( --color-dark );
        color: var( --color-light );
    }

}

.content .wp-block-buttons.full-color .wp-element-button::before,
.content .wp-block-buttons.full-color .wp-element-button::after {
    display: none;
}

.content .wp-block-buttons.full-color .wp-block-button {
    flex-grow: 1;
    position: relative;
    max-width: 100%;
}

.content .wp-block-buttons.full-color .wp-block-button::after {
    content: url( 'graphics/icon-goto.svg' );
    background-size: cover;
    background-repeat: no-repeat;
    display: block;
    position: absolute;
    right: 0px;
    bottom: 15px;
    height: 40px;
    width: 50px;
    pointer-events: none;
    transition: filter .6s;
}

@media (hover: hover) {

    .content .wp-block-buttons.full-color:hover:nth-of-type( odd ) .wp-block-button::after {
        filter: invert( 100% );
    }

}

.content .wp-block-buttons.full-color .wp-element-button {   
    display: block;
    border: none;
    padding: 0px;
    font-size: var( --font-large-size );
    line-height: var( --font-large-lineheight );
    font-weight: 800;
    height: auto;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-right: calc( 60px + var( --page-padding-side ) );
    white-space: wrap;
    border-radius: 0px;
}

.content .wp-block-buttons.full-color .wp-element-button:focus-visible {   
    outline-offset: -6px;
}

.content .wp-block-buttons.full-color:nth-of-type( even ) .wp-element-button:focus-visible {
    outline-color: var( --color-blue );
}

.content .wp-block-buttons.full-color:nth-of-type( odd ) .wp-element-button:focus-visible {
    outline-color: var( --color-magenta );
}

.content .wp-block-buttons.full-color + .wp-block-buttons.full-color {
    margin-top: 0px !important;
}

.content .wp-block-buttons.full-color:has( + .wp-block-buttons.full-color ) {
    margin-bottom: 0px !important;
}

@media ( max-width: 750px ) {

    .content .wp-block-buttons.full-color .wp-block-button::after {
        width: 30px;
        height: 25px;
        bottom: 10px;
    }
    
    .content .wp-block-buttons.full-color .wp-element-button {   
        padding-right: calc( 30px + var( --page-padding-side ) );
        padding-top: 10px;
        padding-bottom: 10px;
    }

}

@media (prefers-contrast: more) { 
    
    .content .wp-block-buttons.full-color:hover:nth-of-type( even ),
    .content .wp-block-buttons.full-color:hover:nth-of-type( odd ) {
        background-color: var( --color-dark );
        color: var( --color-light );
    }
    
    .content .wp-block-buttons.full-color .wp-block-button::after {
        filter: invert( 100% );
    }
    
    .content .wp-block-buttons.full-color:hover .wp-block-button::after {
        filter: none;
    }

}

body.mode-highcontrast .content .wp-block-buttons.full-color:hover:nth-of-type( even ),
body.mode-highcontrast .content .wp-block-buttons.full-color:hover:nth-of-type( odd ) {
    background-color: var( --color-dark );
    color: var( --color-light );
}

body.mode-highcontrast .content .wp-block-buttons.full-color .wp-block-button::after {
    filter: invert( 100% );
}

body.mode-highcontrast .content .wp-block-buttons.full-color:hover .wp-block-button::after {
    filter: none;
}



/* ### CONTENT: IMAGE ### */


.content .wp-block-image {
    overflow: hidden;
    background-color: white;
}

.content .wp-block-image:not( :first-child ) {
    margin-top: 50px;
}

.content .wp-block-image:not( :last-child ) {
    margin-bottom: 50px;
}

.content .wp-block-image img {
    display: block;
    width: 100% !important;
    height: auto !important;
}

.content > .wp-block-image > img {
    margin-top: var( --parallax-image-offset );
    margin-bottom: var( --parallax-image-offset );
}



/* ### CONTENT: VIDEO ### */


.content .wp-block-video {
    overflow: hidden;
    background-color: white;
    position: relative;
}

.content .wp-block-video:not( :first-child ) {
    margin-top: 50px;
}

.content .wp-block-video:not( :last-child ) {
    margin-bottom: 50px;
}

.content .wp-block-video video {
    display: block;
    width: 100% !important;
    height: auto !important;
}

.content .wp-block-video .control {
    position: absolute;
    inset: 0px;
    margin: auto;
    width: 54px;
    height: 54px;
    background-color: var( --color-magenta );
    border-radius: 50%;
    cursor: pointer;
    transition: opacity .6s;
}

@media (hover: hover) {

    .content .wp-block-video .control.running {
        opacity: 0;
    }
    
    .content .wp-block-video:hover .control.running,
    .content .wp-block-video .control.running:focus-visible {
        opacity: 1;
    }

}

.content .wp-block-video .control svg {
    fill: var( --color-dark );
    position: absolute;
    inset: 0px;
    width: 100%;
    height: 100%;
}

.content .wp-block-video .control svg.pause { 
    display: none;
}

.content .wp-block-video .control.running svg.play { 
    display: none;
}

.content .wp-block-video .control.running svg.pause { 
    display: block;
}

@media ( max-width: 750px ) {

    .content .wp-block-video video {
        aspect-ratio: 16 / 9 !important;
        object-fit: cover;
    }

}

@media ( max-width: 550px ) {

    .content .wp-block-video video {
        aspect-ratio: 4 / 5 !important;
        object-fit: cover;
    }

}



/* ### CONTENT: IFRAME ### */


.content > iframe {
    position: relative;
    width: 100%;
}

.content > iframe:not(:first-child) {
    margin-top: var( --page-margin-large );
}

.content > iframe:not(:last-child) {
    margin-bottom: var( --page-margin-large );
}



/* ### CONTENT: EMBED ### */


.content .wp-block-embed {
    position: relative;
    max-width: var( --content-max-width );
    padding-left: var( --page-padding-side );
    padding-right: var( --page-padding-side );
}

.content .wp-block-embed:not( :first-child ) {
    margin-top: 50px;
}

.content .wp-block-embed:not( :last-child ) {
    margin-bottom: 50px;
}

.content .wp-block-embed iframe {
    aspect-ratio: 16 / 9;
    width: 100%;
    height: auto;
}



/* ### CONTENT: GALLERY CIRCLE ### */


.content .wp-block-gallery.circle {
    width: calc( 100% - var( --page-padding-side ) * 2 );
    margin-left: var( --page-padding-side );
    position: relative;
}

.content .wp-block-gallery.circle:not( :first-child ) {
    margin-top: var( --page-margin-large );
}

.content .wp-block-gallery.circle:not( :last-child ) {
    margin-bottom: var( --page-margin-large );
}

.content .wp-block-gallery.circle .wrapper {
    position: relative;
    aspect-ratio: 2 / 1;
    max-height: calc( 100svh - 20px - 16px - var( --header-height ) - ( var( --page-margin-small ) * 2 ) );
    margin-left: auto;
    margin-right: auto;
}

.content .wp-block-gallery.circle figure {
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    margin-left: auto;
    margin-right: auto;
    width: 50%;
    border-radius: 50%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    margin-top: 0px;
    margin-bottom: 0px;
    transition: transform 1s, scale 1s, z-index 1s;
}

@media (prefers-reduced-motion) {
    
    .content .wp-block-gallery.circle figure {
        transition: transform 0.1s, scale 0.1s, z-index 0.1s;
    }

}

.content .wp-block-gallery.circle figure img {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
}

.content .wp-block-gallery.circle figure.center {

}

.content .wp-block-gallery.circle figure.left {
    transform: translate3d( -60.5%, 0px, 0 );
    scale: 0.9;
}

.content .wp-block-gallery.circle figure.right {
    transform: translate3d( 60.5%, 0px, 0 );
    scale: 0.9;
}

.content .wp-block-gallery.circle figure.center-back {
    scale: 0.8;
}

.content .wp-block-gallery.circle figure::after {
    content: "";
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    inset: 0px;
    border-radius: 50%;
    background-color: var( --color-magenta );
    mix-blend-mode: color;
    opacity: 0;
    pointer-events: none;
    transition: opacity 1s;
}

.content .wp-block-gallery.circle figure.left::after,
.content .wp-block-gallery.circle figure.right::after,
.content .wp-block-gallery.circle figure.center-back::after {
    opacity: 1;
}

.content .wp-block-gallery.circle figure .play {
    position: absolute;
    width: 54px;
    height: 54px;
    inset: 0px;
    margin: auto;
    pointer-events: none;
    opacity: 0;
    background-color: var( --color-magenta );
    border-radius: 50%;
    transition: opacity 1s;
}

.content .wp-block-gallery.circle figure.center .play {
    opacity: 1;
}

.content .wp-block-gallery.circle figure .play svg {
    fill: var( --color-dark );
}

.content .wp-block-gallery.circle figure img {
    transform: none !important; /*disable parralax for performance */
}

.content .wp-block-gallery.circle .dots {
    position: relative;
    width: 100%;
    display: flex;
    justify-content: center;
    gap: 5px;
    margin-top: 20px;
}

.content .wp-block-gallery.circle .dots .dot {
    width: 16px;
    height: 16px;
    border-radius: 8px;
    transition: width 1s, opacity 1s;
    cursor: pointer;
    background-color: var( --color-dark );
    opacity: 0.5;
}

@media (prefers-reduced-motion) {

    .content .wp-block-gallery.circle .dots .dot {
        transition: width 0.1s, opacity 0.1s;
    }

}

.content .wp-block-gallery.circle .dots .dot.current {
    width: 64px;
    opacity: 1;
}

@media ( max-width: 750px ) {

    .content .wp-block-gallery.circle .wrapper {
        aspect-ratio: 2 / 1.2;
    }
    
    .content .wp-block-gallery.circle figure {
        width: 60%;
    }
    
    .content .wp-block-gallery.circle figure.left {
        transform: translate3d( -42%, 0px, 0 );
    }
    
    .content .wp-block-gallery.circle figure.right {
        transform: translate3d( 42%, 0px, 0 );
    }
    
    .content .wp-block-gallery.circle figure .play {
        width: 40px;
        height: 40px;
    }
    
    .content .wp-block-gallery.circle .dots .dot {
        width: 8px;
        height: 8px;
    }
    
    .content .wp-block-gallery.circle .dots .dot.current {
        width: 24px;
    }

}

@media (prefers-contrast: more) { 

    .content .wp-block-gallery.circle .dots .dot {
        opacity: 1;
        border: 1px solid var( --color-dark );
        background-color: transparent;
    }
    
    .content .wp-block-gallery.circle .dots .dot.current {
        opacity: 1;
        background-color: var( --color-dark );
    }
    
    .content .wp-block-gallery.circle figure.center .play {
        opacity: 1;
    }
    
    .content .wp-block-gallery.circle figure .play svg {
        fill: var( --color-dark );
    }

}

body.mode-highcontrast .content .wp-block-gallery.circle .dots .dot {
    opacity: 1;
    border: 1px solid var( --color-dark );
    background-color: transparent;
}

body.mode-highcontrast .content .wp-block-gallery.circle .dots .dot.current {
    opacity: 1;
    background-color: var( --color-dark );
}

body.mode-highcontrast .content .wp-block-gallery.circle figure.center .play {
    opacity: 1;
}

body.mode-highcontrast .content .wp-block-gallery.circle figure .play svg {
    fill: var( --color-dark );
}
    


/* ### CONTENT: SLIDER ### */


.content .slider {
    position: relative;   
    overflow: clip;
    overflow-y: visible;
}

.content .slider:not( :first-child ) {
    margin-top: var( --page-margin-large );
}

.content .slider:not( :last-child ) {
    margin-bottom: var( --page-margin-large );
}

.content .slider .wrapper {
    position: relative;   
}

.content .slider .wrapper .strip {
    display: flex;
    transition: transform .6s;
}

@media (prefers-reduced-motion) {

    .content .slider .wrapper .strip {
        transition: none;
    }

}

.content .slider .wrapper .strip .element {
    display: flex; 
    gap: 30px;
    padding-left: var( --page-padding-side );
    padding-right: var( --page-padding-side );
}

.content .slider .wrapper .strip .element:focus-visible {
    outline-offset: -3px;
}

.content .slider .wrapper .strip .element .index-mobile {
    font-family: 'OverusedGrotesk', sans-serif;
    font-size: var( --font-large-size );
    line-height: var( --font-large-lineheight );
    font-weight: 800;
    padding-left: 0px;
    padding-right: 0px;
    text-align: right;
    display: none;
}


.content .slider .wrapper .strip .element .column.cover {
    flex-basis: 60%;
}

.content .slider .wrapper .strip .element .column.cover .wp-block-image img {
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

.content .slider .wrapper .strip .element .column.cover .wp-block-image img.wp-image-229 {
    object-fit: contain;
}

.content .slider .wrapper .strip .element .column.content {
    flex-basis: 40%;
}

.content .slider .wrapper .strip .element .column > * {
    padding-left: 0px;
    padding-right: 0px;
}

.content .slider .wrapper .strip .element .column.content .index {
    font-family: 'OverusedGrotesk', sans-serif;
    font-size: var( --font-large-size );
    line-height: var( --font-large-lineheight );
    font-weight: 800;
    margin-bottom: 10px;
    text-align: right;
    flex-shrink: 0;
}

.content .slider .wrapper .strip .element .column.content .index-wrapper {
    display: flex;
    justify-content: space-between;
    gap: var( --page-padding-side );
    margin-bottom: 30px;
}

.content .slider .wrapper .strip .element .column.content .index-wrapper > * {
    padding-left: 0px;
    padding-right: 0px;
}

.content .slider .wrapper .arrows {
    position: absolute;
    right: 0px;
    top: -94px;
    width: 60px;
    height: 54px;
    background-image: url( 'graphics/icon-goto.svg' );
    background-size: contain;
    background-repeat: no-repeat;
    cursor: pointer;
    transition: opacity .6s;
}

.content .slider .wrapper .arrows.right {
    right: var( --page-padding-side );
}

.content .slider .wrapper .arrows.left {
    right: calc( var( --page-padding-side ) + 60px + 22px );
    transform: rotateY( 180deg );
}

.content .slider .wrapper .arrows.disabled {
    opacity: 0.2;
}

@media (prefers-contrast: more) { 

    .content .slider .wrapper .arrows {
        filter: invert();
    }
    
    .content .slider .wrapper .arrows.disabled {
        opacity: 0;
    }

}

body.mode-highcontrast .content .slider .wrapper .arrows {
    filter: invert();
}

body.mode-highcontrast .content .slider .wrapper .arrows.disabled {
    opacity: 0;
}

@media ( max-width: 750px ) {

    .content .slider .wrapper .strip .element {
        flex-direction: column;
        gap: 20px;
    }
    
    .content .slider .wrapper .strip .element .index-mobile {
        display: block;
    }
    
    .content .slider .wrapper .strip .element .column.cover,
    .content .slider .wrapper .strip .element .column.content {
        flex-basis: 0;
    }
    
    .content .slider .wrapper .strip .element .column.content .index-wrapper {
        margin-bottom: 0px;
    }
    
    .content .slider .wrapper .strip .element .column.content .index {
        display: none;
    }
    
    .content .slider .wrapper .arrows {
        width: 32px;
        height: 30px;
        top: -51px;
    }
    
    .content .slider .wrapper .arrows.left {
        right: calc( var( --page-padding-side ) + 32px + 15px );
    }

}


@media ( min-width: 1600px ) {

    .content .slider .wrapper .strip .element .column.cover {
        flex-basis: 40%;
    }
    
    .content .slider .wrapper .strip .element .column.content {
        flex-basis: 60%;
    }

}



/* ### CONTENT: GALLERY ENDLESS ### */


.content .wp-block-gallery.endless {
    position: relative;
}

.content .wp-block-gallery.endless:not( :first-child ) {
    margin-top: var( --page-margin-large );
}

.content .wp-block-gallery.endless:not( :last-child ) {
    margin-bottom: var( --page-margin-large );
}

.content .wp-block-gallery.endless .wrapper {
    position: relative;
    overflow: hidden;
    display: flex;
    gap: 0px;
}

.content .wp-block-gallery.endless .wrapper figure {
    flex-shrink: 0;
    margin-top: 0px;
    margin-bottom: 0px;
}

.content .wp-block-gallery.endless .wrapper figure img {
    height: 480px !important;
    width: auto !important;
}

.content .wp-block-gallery.endless .control {
    position: absolute;
    inset: 0px;
    margin: auto;
    width: 54px;
    height: 54px;
    background-color: var( --color-magenta );
    border-radius: 50%;
    cursor: pointer;
    transition: opacity .6s;
}

@media (hover: hover) {

    .content .wp-block-gallery.endless:not( :hover ) .control.running {
        opacity: 0;
    }

}

.content .wp-block-gallery.endless .control svg {
    fill: var( --color-dark );
    position: absolute;
    inset: 0px;
    width: 100%;
    height: 100%;
}

.content .wp-block-gallery.endless .control svg.pause { 
    display: none;
}

.content .wp-block-gallery.endless .control.running svg.play { 
    display: none;
}

.content .wp-block-gallery.endless .control.running svg.pause { 
    display: block;
}

@media ( max-width: 750px ) {

    .content .wp-block-gallery.endless .wrapper figure img {
        height: 250px !important;
    }

}



/* ### CONTENT: COLUMNS ### */


.content .wp-block-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;    
    column-gap: 100px;
}

.content .wp-block-columns:not( :first-child ) {
    margin-top: var( --page-margin-large );
}

.content .wp-block-columns:not( :last-child ) {
    margin-bottom: var( --page-margin-large );
}

.content .wp-block-column .wp-block-image {
    padding-left: var( --page-padding-side );
    padding-right: var( --page-padding-side );
}

@media ( max-width: 950px ) {

    .content .wp-block-columns {
        gap: 50px;
    }

}

@media ( max-width: 750px ) {

    .content .wp-block-columns {
        grid-template-columns: 1fr;    
    }

}



/* ### CONTENT: GRID ### */


.content .wp-block-columns.grid-three,
.content .wp-block-columns.grid-four {
    padding-left: var( --page-padding-side );
    padding-right: var( --page-padding-side );
    display: grid;
    column-gap: 10px;
    row-gap: 50px;
}

.content .wp-block-columns.grid-three {
    grid-template-columns: 1fr 1fr 1fr;    
}

.content .wp-block-columns.grid-four {
    grid-template-columns: 1fr 1fr 1fr 1fr;    
}

.content .wp-block-columns.grid-three .wp-block-column,
.content .wp-block-columns.grid-four .wp-block-column {
    display: flex;
    flex-direction: column;
    min-width: 0px;
}

.content .wp-block-columns.grid-three .wp-block-column > *,
.content .wp-block-columns.grid-four .wp-block-column > * {
    padding-left: 0px;
    padding-right: 0px;
}

.content .wp-block-columns.grid-three .wp-block-column > .wp-block-buttons:last-child {
    margin-top: auto;
}

.content .wp-block-columns.grid-three .wp-block-column > p {
    margin-top: 10px;
    margin-bottom: var( --page-margin-small );
}

@media ( max-width: 950px ) {

    .content .wp-block-columns.grid-four {
        grid-template-columns: 1fr 1fr 1fr;    
    }
    
    .content .wp-block-columns.grid-three {
        grid-template-columns: 1fr 1fr;    
    }

}

@media ( max-width: 750px ) {

    .content .wp-block-columns.grid-four {
        grid-template-columns: 1fr 1fr;    
    }
    
    .content .wp-block-columns.grid-three {
        grid-template-columns: 1fr 1fr;    
    }

}

@media ( max-width: 550px ) {

    .content .wp-block-columns.grid-four {
        grid-template-columns: 1fr;    
    }
    
    .content .wp-block-columns.grid-three {
        grid-template-columns: 1fr;    
    }
    
}



/* ### CONTENT: TEAM MEMBER ### */


.content .team-member {
    position: relative;
    width: 100%;
    overflow: hidden;
    overflow-wrap: break-word;
}

.content .team-member .action {
    position: absolute;
    left: var( --page-padding-side );
    top: 15px;
    width: 42px;
    height: 42px;
    cursor: pointer;
}

.content .team-member .action::before,
.content .team-member .action::after {
    content: "";
    display: block;
    position: absolute;
    height: 42px;
    width: 10px;
    inset: 0px;
    margin: auto;
    background-color: var( --color-dark );
}

.content .team-member .action::after {
    rotate: 90deg;
}

.content .team-member.extended .action::after {
    background-color: var( --color-light );
}

.content .team-member.extended .action::before {
    opacity: 0;
}

.content .team-member > .wp-block-group__inner-container {
    width: 200%;
    display: flex;
}

.content .team-member .main-info {
    flex-basis: 0;
    flex-grow: 1;
    flex-shrink: 0;
    overflow: hidden;
    padding-bottom: 5px;
}

.content .team-member.extended .main-info {
    pointer-events: none;
}

.content .team-member .main-info figure {
    position: relative;
    margin: 0px;
    aspect-ratio: 1 / 1;
    padding-left: 0px;
    padding-right: 0px;
    background-color: var( --color-blue );
}

.content .wp-block-columns.grid-four .wp-block-column:nth-of-type( odd ) .team-member .main-info figure {
    background-color: var( --color-blue );
}

.content .wp-block-columns.grid-four .wp-block-column:nth-of-type( even ) .team-member .main-info figure {
    background-color: var( --color-magenta );
}

@media ( min-width: 951px ) {

    .content .wp-block-columns.grid-four .wp-block-column:nth-of-type( 8n + 5 ) .team-member .main-info figure,
    .content .wp-block-columns.grid-four .wp-block-column:nth-of-type( 8n + 7 ) .team-member .main-info figure {
        background-color: var( --color-magenta );
    }
    
    .content .wp-block-columns.grid-four .wp-block-column:nth-of-type( 8n + 6 ) .team-member .main-info figure,
    .content .wp-block-columns.grid-four .wp-block-column:nth-of-type( 8n + 8 ) .team-member .main-info figure {
        background-color: var( --color-blue );
    }

}

@media ( min-width: 751px ) and ( max-width: 950px ) {

    .content .wp-block-columns.grid-four .wp-block-column:nth-of-type( 6n + 4 ) .team-member .main-info figure,
    .content .wp-block-columns.grid-four .wp-block-column:nth-of-type( 6n + 6 ) .team-member .main-info figure {
        background-color: var( --color-magenta );
    }
    
    .content .wp-block-columns.grid-four .wp-block-column:nth-of-type( 6n + 5 ) .team-member .main-info figure {
        background-color: var( --color-blue );
    }

}

@media ( min-width: 551px ) and ( max-width: 750px ) {

    .content .wp-block-columns.grid-four .wp-block-column:nth-of-type( 4n + 3 ) .team-member .main-info figure {
        background-color: var( --color-magenta );
    }
    
    .content .wp-block-columns.grid-four .wp-block-column:nth-of-type( 4n + 4 ) .team-member .main-info figure {
        background-color: var( --color-blue );
    }
    
}

.content .team-member .main-info figure img {
    height: 100% !important;
    object-fit: cover;
}

.content .team-member .main-info p {
    padding-left: 0px;
    padding-right: 0px;
}

.content .team-member .main-info figure + p {
    margin-top: 10px;
}

.content .team-member .main-info p + p {
    font-size: var( --font-small-size );
    line-height: var( --font-small-lineheight );
}

.content .team-member .more-info {
    position: relative;
    background-color: var( --color-dark );
    color: var( --color-light );
    flex-basis: 0;
    flex-grow: 1;
    flex-shrink: 0;
    left: -50%;
    overflow: hidden;
    height: 0px;
    opacity: 0;
    pointer-events: none;
    transition: opacity .6s, height .6s;
}

@media (prefers-reduced-motion) {

    .content .team-member .more-info {
        transition: opacity .6s;
    }

}

.content .team-member.extended .more-info {
    opacity: 1;
    pointer-events: all;
}

.content .team-member .more-info > .wp-block-group__inner-container {
    padding-top: calc( 15px + 42px );
    padding-bottom: var( --page-padding-side );
}

.content .team-member .more-info .wp-block-heading {
    font-family: 'OverusedGrotesk', sans-serif;
    font-weight: bold;
    margin-bottom: var( --page-margin-small );
}

.content .team-member:nth-child( odd ) .more-info .wp-block-heading {
    color: var( --color-blue );
}

.content .team-member:nth-child( even ) .more-info .wp-block-heading {
    color: var( --color-magenta );
}

.content .team-member .more-info p {
    font-size: var( --font-small-size );
    line-height: var( --font-small-lineheight );
}



/* ### CONTENT: DETAILS ### */


.content .wp-block-details {
    transition: color .4s, background-color .4s;
}

.content .wp-block-details:not(:first-child ) {
    margin-top: 10px;
}

.content .wp-block-details:not(:last-child ) {
    margin-bottom: 10px;
}

.content .wp-block-details + .wp-block-details {
    margin-top: 0px !important;
}

.content .wp-block-details:has( + .wp-block-details ) {
    margin-bottom: 0px !important;
}

.content .wp-block-details:nth-of-type( odd ) {
    background-color: var( --color-blue );
}

@media (prefers-contrast: more) { 

    .content .wp-block-details:nth-of-type( odd ) {
        background-color: var( --color-dark );
        color: var( --color-light );
    }

}

body.mode-highcontrast .content .wp-block-details:nth-of-type( odd ) {
    background-color: var( --color-dark );
    color: var( --color-light );
}

.content .wp-block-details:not( .detail-sw ):nth-of-type( even ) summary:focus-visible {
    outline-color: var( --color-blue );
}

@media (prefers-contrast: more) { 

    .content .wp-block-details:not( .detail-sw ):nth-of-type( even ) summary:focus-visible {
        outline-color: var( --color-dark );
    }

}

body.mode-highcontrast .content .wp-block-details:not( .detail-sw ):nth-of-type( even ) summary:focus-visible {
    outline-color: var( --color-dark );
}

.content .wp-block-details:nth-of-type( even ) {
    background-color: var( --color-magenta );
}

.content .wp-block-details.detail-sw:nth-of-type( odd ) {
    background-color: var( --color-dark );
    color: var( --color-light );
}

.content .wp-block-details.detail-sw:nth-of-type( even ) {
    background-color: var( --color-light );
}

.content .wp-block-details[open] {
    background-color: var( --color-light );
    color: var( --color-dark );
}

.content .wp-block-details > summary {
    position: relative;
    list-style: none;
    padding: 10px calc( var( --page-padding-side ) + 25px + var( --page-padding-side ) ) 10px var( --page-padding-side );
    font-family: 'OverusedGrotesk', sans-serif;
    font-weight: bold;
    cursor: pointer;
    transition: color .4s;
}

.content .wp-block-details > summary:focus-visible {
    outline-offset: -6px;
}

.content .wp-block-details.detail-sw:nth-of-type( odd ) > summary {
    color: var( --color-light );
}

.content .wp-block-details[open] > summary {
    color: var( --color-dark );
}

.content .wp-block-details:not( .detail-sw )[open]:nth-of-type( odd ) {
    background-color: var( --color-dark );
    color: var( --color-light );
}

.content .wp-block-details:not( .detail-sw )[open]:nth-of-type( odd ) > summary {
    color: var( --color-blue );
}

.content .wp-block-details:not( .detail-sw )[open]:nth-of-type( even ) > summary {
    color: var( --color-magenta );
}

@media (prefers-contrast: more) { 

    .content .wp-block-details:not( .detail-sw )[open]:nth-of-type( even ) > summary {
        color: var( --color-dark );
    }

}

body.mode-highcontrast .content .wp-block-details:not( .detail-sw )[open]:nth-of-type( even ) > summary {
    color: var( --color-dark );
}

.content .wp-block-details > summary > .arrow {
    position: absolute;
    right: var( --page-padding-side );
    top: 0px;
    bottom: 0px;
    margin-top: auto;
    margin-bottom: auto;
    height: 30px;
    pointer-events: none;
}

.content .wp-block-details.detail-sw:nth-of-type( odd ) > summary > .arrow > svg {
    fill: var( --color-light );
}

.content .wp-block-details > summary > .arrow > svg {
    height: 100%;
    width: auto;
    fill: var( --color-dark );
    transition: fill .4s, rotate .4s;
}

@media (prefers-reduced-motion) {

    .content .wp-block-details > summary > .arrow > svg {
        transition: fill .4s;
    }

}

.content .wp-block-details[open] > summary > .arrow > svg {
    fill: var( --color-dark );
    rotate: 180deg;
}

.content .wp-block-details:not( .detail-sw )[open]:nth-of-type( odd ) > summary > .arrow > svg {
    fill: var( --color-blue );
}

.content .wp-block-details:not( .detail-sw )[open]:nth-of-type( even ) > summary > .arrow > svg {
    fill: var( --color-magenta );
}

@media (prefers-contrast: more) { 

    .content .wp-block-details:not( .detail-sw ):nth-of-type( odd ) > summary > .arrow > svg {
        fill: var( --color-light );
    }
    
    .content .wp-block-details:not( .detail-sw ):nth-of-type( even ) > summary > .arrow > svg {
        fill: var( --color-dark );
    }

}

body.mode-highcontrast .content .wp-block-details:not( .detail-sw ):nth-of-type( odd ) > summary > .arrow > svg {
    fill: var( --color-light );
}

body.mode-highcontrast .content .wp-block-details:not( .detail-sw ):nth-of-type( even ) > summary > .arrow > svg {
    fill: var( --color-dark );
}

.content .wp-block-details > .wrapper {
    height: 0px;
    overflow: hidden;
    transition: height .4s;
    transition-timing-function: var( --animation-spring-timing );
}

@media (prefers-reduced-motion) {

    .content .wp-block-details > .wrapper {
        transition: none;
    }

}

.content .wp-block-details > .wrapper > *:last-child {
    margin-bottom: 20px;
}

@media ( max-width: 750px ) {

    .content .wp-block-details > summary {
        padding: 10px calc( var( --page-padding-side ) + 15px + var( --page-padding-side ) ) 10px var( --page-padding-side );
    }
    
    .content .wp-block-details > summary > .arrow {
        height: 20px;
    }

}

/* +++ DETAILS + OTHER ELEMENTS +++ */

.content .wp-block-details:not( .detail-sw ):nth-of-type( odd ) .wp-element-button {
    border-color: var( --color-light );
}

@media (prefers-contrast: more) { 

    .content .wp-block-details:not( .detail-sw ):nth-of-type( odd ) .wp-element-button:hover {
        color: var( --color-dark );
    }

}

body.mode-highcontrast .content .wp-block-details:not( .detail-sw ):nth-of-type( odd ) .wp-element-button:hover {
    color: var( --color-dark );
}

@media (prefers-contrast: more) { 

    .content .wp-block-details:not( .detail-sw ):nth-of-type( odd ) .wp-block-list li::before {
        background-color: var( --color-light );
    }

}

body.mode-highcontrast .content .wp-block-details:not( .detail-sw ):nth-of-type( odd ) .wp-block-list li::before {
    background-color: var( --color-light );
}

@media (prefers-contrast: more) { 

    .content .wp-block-details:not( .detail-sw ):nth-of-type( odd ) .wp-block-list li:nth-child( odd ).has-arrow::after,
    .content .wp-block-details:not( .detail-sw ):nth-of-type( odd ) .wp-block-list li:nth-child( even ).has-arrow::after {
        filter: none;
    }

}

body.mode-highcontrast .content .wp-block-details:not( .detail-sw ):nth-of-type( odd ) .wp-block-list li:nth-child( odd ).has-arrow::after,
body.mode-highcontrast .content .wp-block-details:not( .detail-sw ):nth-of-type( odd ) .wp-block-list li:nth-child( even ).has-arrow::after {
    filter: none;
}



/* ### CONTENT: CARD STACK ### */


.content .card-stack {
    --card-stack-overlap: 7.1875rem;
    --card-height: min( 36vw, calc( 100vh - 4.75rem - var( --page-margin-small ) * 2 - var( --header-height ) - var( --card-stack-overlap ) * 2 ) );
}

.content .card-stack > .wp-block-group__inner-container {
    position: relative;
}

.content .card-stack .card-stack-wrapper > .wp-block-group__inner-container {
    display: flex;
    align-items: flex-start;
}

.content .card-stack .card-stack-card {
    position: relative;
    width: 100vw;
}

.content .card-stack .card-stack-wrapper .wp-block-group__inner-container:not( .hidden-0 ) .card-stack-card:nth-child(2):not( .manual-hidden ),
.content .card-stack .card-stack-wrapper .wp-block-group__inner-container:not( .hidden-1 ) .card-stack-card:nth-child(3):not( .manual-hidden ) {
    pointer-events: all;
}

.content .card-stack .card-stack-card:not( :first-child ) {
    margin-left: -100vw;
    pointer-events: none;
}

.content .card-stack .card-stack-card:not( :last-child ) {
    cursor: pointer;
}

.content .card-stack .card-stack-card:nth-child( 2 ) {
    margin-top: calc( 1 * var( --card-stack-overlap ) );
}

.content .card-stack .card-stack-card:nth-child( 3 ) {
    margin-top: calc( 2 * var( --card-stack-overlap ) );
}

.content .card-stack .card-stack-card .wp-block-group__inner-container {
    position: relative;
    overflow: hidden;
    height: auto;
    min-height: var( --card-height );
    padding-top: 20px;
    padding-bottom: 20px;
    transition: transform .6s, opacity .6s;
    transition-timing-function: var( --animation-spring-timing );
}

@media (prefers-reduced-motion) {

    .content .card-stack .card-stack-card .wp-block-group__inner-container {
        transition: opacity .6s;
    }

}

.content .card-stack .card-stack-wrapper .wp-block-group__inner-container .card-stack-card:not(:first-child) .wp-block-group__inner-container {
    transform: translate3d( 0px, 10vw, 0px );
    opacity: 0;
}

.content .card-stack .card-stack-wrapper .wp-block-group__inner-container:not( .hidden-0 ) .card-stack-card:nth-child(2):not( .manual-hidden ) .wp-block-group__inner-container,
.content .card-stack .card-stack-wrapper .wp-block-group__inner-container:not( .hidden-1 ) .card-stack-card:nth-child(3):not( .manual-hidden ) .wp-block-group__inner-container {
    transform: none;
    opacity: 1;
}

.content .card-stack .card-stack-card:nth-child( odd ) .wp-block-group__inner-container {
    background-color: var( --color-magenta );
}

.content .card-stack .card-stack-card:nth-child( even ) .wp-block-group__inner-container {
    background-color: var( --color-blue );
}

.content .card-stack .card-stack-card .wp-block-group__inner-container::before {    
    position: absolute;
    content: "";
    display: block;
    width: 100%;
    height: var( --card-height );
    background-position: left center;
    background-size: auto 100%;
    background-repeat: no-repeat;
    left: var( --page-padding-side );
    /*top: calc( 100% - var( --card-height ) );
    transition: top .6s;
    transition-timing-function: var( --animation-spring-timing );*/
    top: 0px;
}

@media (prefers-contrast: more) { 

    .content .card-stack .card-stack-card .wp-block-group__inner-container::before {
        filter: invert();
    }

}

body.mode-highcontrast .content .card-stack .card-stack-card .wp-block-group__inner-container::before {
    filter: invert();
}

@media (prefers-reduced-motion) {

    .content .card-stack .card-stack-card .wp-block-group__inner-container::before {    
        transition: none;
    }

}

.content .card-stack .card-stack-card:nth-child( 1 ) .wp-block-group__inner-container::before {    
    background-image: url( 'graphics/card-stack-number-1.svg' );
}

.content .card-stack .card-stack-card:nth-child( 2 ) .wp-block-group__inner-container::before {    
    background-image: url( 'graphics/card-stack-number-2.svg' );
}

.content .card-stack .card-stack-card:nth-child( 3 ) .wp-block-group__inner-container::before {    
    background-image: url( 'graphics/card-stack-number-3.svg' );
}

.content .card-stack .card-stack-wrapper .wp-block-group__inner-container:not( .hidden-0 ) .card-stack-card:nth-child( 1 ) .wp-block-group__inner-container::before,
.content .card-stack .card-stack-wrapper .wp-block-group__inner-container:not( .hidden-1 ) .card-stack-card:nth-child( 2 ) .wp-block-group__inner-container::before {
    top: 0px;
}

.content .card-stack .card-stack-card .wp-block-group__inner-container > * {
    margin-left: calc( var( --page-padding-side ) + ( var( --card-height ) * 0.8 ) );
    margin-right: 40px;
}

.content .card-stack .card-stack-card .wp-block-group__inner-container h3.wp-block-heading {
    font-size: var( --font-extralarge-size );
    line-height: var( --font-extralarge-lineheight );
    margin-bottom: var( --page-margin-small );
}

@media ( max-width: 750px ) {

    .content .card-stack {
        --card-stack-overlap: 5.7rem;
    }
    
    .content .card-stack .card-stack-card .wp-block-group__inner-container {
        padding-top: 10px;
        padding-bottom: 10px;
    }
    
    .content .card-stack .card-stack-card .wp-block-group__inner-container > * {
        margin-right: 0px;
    }

}



/* ### CONTENT: IMAGE AND TEXT ### */


.wp-block-group.image-and-text {
    overflow: hidden;   
}

.wp-block-group.image-and-text:not( :first-child ) {
    margin-top: var( --page-margin-large );
}

.wp-block-group.image-and-text:not( :last-child ) {
    margin-bottom: var( --page-margin-large );
}

.wp-block-group.image-and-text .wp-block-image {
    padding-left: 0px;
    padding-right: 0px;
}

.wp-block-group.image-and-text .wp-block-image img {
    margin-top: var( --parallax-image-offset );
    margin-bottom: var( --parallax-image-offset );
}

.wp-block-group.image-and-text h2.wp-block-heading {
    position: relative;
    font-size: 13vw;
    line-height: 0.9em;
    z-index: 100;
}

.wp-block-group.image-and-text h3.wp-block-heading {
    margin-top: -10px;
    margin-bottom: var( --page-margin-small );
    line-height: 0.9em;
}

.wp-block-group.image-and-text .wp-block-heading > span {
    display: inline-block;
    overflow: hidden;
}

.wp-block-group.image-and-text .wp-block-heading > span > span {
    display: inline-block;
    transition: transform 1s;
}

@media (prefers-reduced-motion) {

    .wp-block-group.image-and-text .wp-block-heading > span > span {
        transition: opacity 1s;
    }

}

.wp-block-group.image-and-text .wp-block-heading.animationscroll.hidden > span > span {
    transform: translate3d( 0px, 100%, 0 );
}

@media (prefers-reduced-motion) {

    .wp-block-group.image-and-text .wp-block-heading.animationscroll.hidden > span > span {
        opacity: 0;
    }

}

.wp-block-group.image-and-text.image-top .wp-block-image {
    margin-left: 42.2vw;
    margin-bottom: 0px;
    margin-right: calc( var( --page-padding-side ) + 9vw );
}

.wp-block-group.image-and-text.image-top h2.wp-block-heading {
    margin-top: -15.5vw;
    margin-bottom: 0px;
}

.wp-block-group.image-and-text.image-top > .wp-block-group__inner-container > *:not( .wp-block-image, h2.wp-block-heading ) {
    margin-left: 25vw;
}

.wp-block-group.image-and-text.image-left h2.wp-block-heading {
    margin-left: -32vw;
    margin-right: 0px !important;
    margin-bottom: 0px;
}

.wp-block-group.image-and-text.image-left .wp-block-columns {
    gap: 30px;
    margin-top: 0px;
}

.wp-block-group.image-and-text.image-left .wp-block-columns .wp-block-column:last-child {
    width: 50vw;
}

.wp-block-group.image-and-text.image-left .wp-block-columns .wp-block-column:last-child > * {
    margin-right: calc( var( --page-padding-side ) + 9vw );
}

.wp-block-group.image-and-text.image-left .wp-block-image {
    margin-top: 22vw;
    margin-left: var( --page-padding-side );
}

.wp-block-group.image-and-text.image-right .wp-block-image {
    margin-right: var( --page-padding-side );
    margin-top: 1.4vw;
}

.wp-block-group.image-and-text.image-right h2.wp-block-heading {
    margin-right: -7vw;
}

.wp-block-group.image-and-text.image-right .wp-block-columns {
    gap: var( --page-padding-side );
}

.wp-block-group.image-and-text.image-right .wp-block-columns .wp-block-column:first-child {
    width: 66vw;
}

.wp-block-group.image-and-text.image-right .wp-block-columns .wp-block-column:first-child > *:not( h2.wp-block-heading ) {
    margin-left: 25vw;
}

@media ( max-width: 750px ) {

    .wp-block-group.image-and-text h3.wp-block-heading {
        margin-top: 20px;    
    }
    
    .wp-block-group.image-and-text.image-top .wp-block-image {
        margin-left: 20vw;
        margin-right: var( --page-padding-side );
    }
    
    .wp-block-group.image-and-text.image-top h2.wp-block-heading {
        margin-top: -2vw;
    }
    
    .wp-block-group.image-and-text.image-top > .wp-block-group__inner-container > *:not( .wp-block-image, h2.wp-block-heading ),
    .wp-block-group.image-and-text.image-left .wp-block-columns .wp-block-column:last-child > *,
    .wp-block-group.image-and-text.image-right .wp-block-columns .wp-block-column:first-child > *:not( h2.wp-block-heading ) {
        margin-left: 0px;
        margin-right: 0px;
    }
    
    .wp-block-group.image-and-text.image-left .wp-block-columns {
        gap: 0px;
    }
    
    .wp-block-group.image-and-text.image-left .wp-block-columns .wp-block-column:last-child {
        width: 100%;
    }
    
    .wp-block-group.image-and-text.image-left h2.wp-block-heading {
        margin-top: -2vw;
    }
    
    .wp-block-group.image-and-text.image-left .wp-block-image {
        margin-left: 20vw;
        margin-right: var( --page-padding-side );
        margin-top: 0px;
    }
    
    .wp-block-group.image-and-text.image-right .wp-block-columns {
        display: flex;
        gap: 0px;
        flex-direction: column-reverse;
    }
    
    .wp-block-group.image-and-text.image-right .wp-block-columns .wp-block-column:first-child {
        width: 100%;
    }
    
    .wp-block-group.image-and-text.image-right h2.wp-block-heading {
        margin-right: 0px;
        margin-top: -2vw;
    }
    
    .wp-block-group.image-and-text.image-right .wp-block-image {
        margin-left: 20vw;
        margin-top: 0px;
    }

}



/* ### CONTENT: SPECIAL MARGINS ### */


.content h1.wp-block-heading.main-headline {
    max-width: 18em;    
}

.content > .wp-block-heading:first-child {
    margin-top: var( --page-margin-small );
}

.content .wp-block-heading + .wp-block-columns {
    margin-top: 0px !important;
}

.content .hero-image + h1.wp-block-heading,
.content .wp-block-video + h1.wp-block-heading {
    margin-top: 20px;
}

.content .wp-block-columns.grid-three .wp-block-image,
.content .wp-block-columns.grid-four .wp-block-image {
    margin-top: 0px !important;
    margin-bottom: 0px !important;
}

.content .wp-block-heading + .wp-block-gallery {
    margin-top: 0px !important;
}

.content .wp-block-heading + .slider {
    margin-top: 0px !important;
}

.content:has( .wp-block-gallery.endless:last-child ) {
    padding-bottom: 0px;
}

.content p + .wp-block-details {
    margin-top: 20px !important;
}



/* ### NEWSLETTER ### */


.newsletter {
    position: relative;
    background-color: var( --color-dark );
    color: var( --color-light );
    position: relative;
}

.newsletter .bar {
    position: relative;
    display: flex;
    gap: 28px;
    align-items: center;
    justify-content: space-between;
    padding: 28px var( --page-padding-side );
}

.newsletter .bar .title {
    font-family: 'OverusedGrotesk', sans-serif;
    font-weight: bold;
}

.newsletter .bar .action {
    flex-shrink: 0;
}

.newsletter.extended .bar .action {
    display: none;
}

.newsletter .bar .close-button {
    position: absolute;
    right: 0px;
    top: 0px;
    width: calc( var( --page-padding-side ) + 30px + var( --page-padding-side ) );
    height: calc( 28px + 30px + 28px );
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    display: none;
    flex-shrink: 0;
}

.newsletter.extended .bar .close-button {
    display: block;
}

.newsletter .bar .close-button svg {
    position: absolute;
    inset: 0px;
    margin: auto;
    width: 30px;
    height: auto;
    fill: var( --color-light );
}

.newsletter .form {
    position: relative;
    padding: 0px var( --page-padding-side );
    display: none;
    overflow: hidden;
    transition: height .5s;
    transition-timing-function: var( --animation-spring-timing );
}

@media (prefers-reduced-motion) {

    .newsletter .form {
        transition: none;
    }
    
}

.newsletter.extended .form {
    display: block;
}

.newsletter .form .form-line {
    position: relative;
    margin-top: 28px;
    margin-bottom: 28px;
}

.newsletter .form .form-line .form-label {
    display: block;
}

.newsletter .form .form-line .form-input {
    display: block;
    background-color: transparent;
    border-bottom: 1px solid var( --color-light );
    padding: 10px 0px;
    margin-top: 10px;
    width: 100%;
    max-width: var( --content-max-width );
}

.newsletter .form .form-line .form-input:focus-visible {
    outline: 3px solid var( --color-magenta );
    outline-offset: 5px;
    border-radius: 0px;
}

.newsletter .form .action {
    margin-bottom: 28px;
}

@media ( max-width: 1250px ) {

    .newsletter .title br {
        display: none;
    }
    
}

@media ( max-width: 750px ) {
    
    .newsletter .bar {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
        padding: 20px var( --page-padding-side );
    }
    
    .newsletter .bar .title p + p {
        margin-top: var( --font-normal-lineheight );
    }
    
    .newsletter .bar .close-button {
        height: calc( 15px + 30px + 15px );
    }
    
    .newsletter .form .form-line {
        margin-top: 15px;
        margin-bottom: 15px;
    }
    
    .newsletter .form .form-line .form-input {
        margin-top: 0px;
    }
    
    .newsletter .form .action {
        margin-bottom: 15px;
    }

}



/* ### FOOTER ### */


footer {
    position: relative;
    font-size: var( --font-small-size );
    line-height: var( --font-small-lineheight );
    padding: 20px var( --page-padding-side ) 70px var( --page-padding-side );
}

footer .wp-block-columns {
    display: flex;
    justify-content: space-between;
    gap: var( --page-padding-side );
}

footer .wp-block-image {
    margin-top: 10px;
    background-color: white;
}

footer p + p {
    margin-top: calc( var( --font-small-lineheight ) / 2 );
}

@media ( max-width: 950px ) {

    footer {
        padding: 20px var( --page-padding-side ) 50px var( --page-padding-side );
    }

    footer .wp-block-columns {
        flex-wrap: wrap;
        gap: 20px;
    }
    
    footer .wp-block-columns .wp-block-column.address {
        width: 100%;
    }
    
    footer .wp-block-columns .wp-block-column.menu {
        width: calc( ( 100% - 20px ) / 2 );
        margin-top: 30px;
    }
    
    footer .wp-block-columns .wp-block-column.logo {
        margin-top: 30px;
    }

}



/* ### POPUP ### */


@keyframes popup-fadein {
    from { opacity: 0; scale: 0.9; }
    to { opacity: 1; scale: 1; }
}

@keyframes popup-fadeout {
    from { opacity: 1; scale: 1; }
    to { opacity: 0; scale: 0.9; }
}

@keyframes backdrop-fadein {
    from { background: transparent }
    to { background: rgba( 0 0 0 / 0.8 ) }
}

@keyframes backdrop-fadeout {
    from { background: rgba( 0 0 0 / 0.8 ) }
    to { background: transparent }
}

.popup {
    width: 100%;
    height: 100%;
    background-color: rgba( 0 0 0 / 0.8 );
    animation: popup-fadeout 0.5s forwards;
    transition: display 0.2s allow-discrete, overlay 0.2s allow-discrete;
}

.popup[open] {
    animation: popup-fadein 0.2s forwards;

}

.popup::backdrop {
    background-color: transparent;
    animation: backdrop-fadeout 0.2s forwards;
}

.popup[open]::backdrop {
    animation: backdrop-fadein 0.2s forwards;
}

.popup .wrapper {
    position: absolute;
    inset: 140px;
    margin: auto;
    container-type: size;
}

.popup.video .wrapper iframe {
    display: block;
    background-color: black;
    aspect-ratio: 16 / 9;
    position: absolute;
    inset: 0px;
    margin: auto;
    width: 100%;
    height: auto;
}

@container ( aspect-ratio > 16 / 9 ) {

    .popup.video .wrapper iframe {
        width: auto;
        height: 100%;
    }

}

.popup .close-button {
    position: absolute;
    right: 0px;
    top: 0px;
    width: 140px;
    height: 140px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 100;
}

.popup .close-button svg {
    width: 80px;
    height: auto;
    fill: var( --color-light );
}

@media ( max-width: 750px ) {
    
    .popup .wrapper {
        inset: var( --header-height ) 50px;
    }

    .popup .close-button {
        width: 50px;
        height: var( --header-height );
    }
    
    .popup .close-button svg {
        width: 30px;    
    }
    
}