/*

    EHH
    
    Design: BOROS
    Entwicklung: Leon Klaßen—www.leonklassen.com
    
    2024

*/



html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}

ol, ul {
    list-style: none;
}

b,strong {
    font-weight: bold;
}

i,em {
    font-style: italic;
}



/* fonts ——————————————————————————————————————————————————————————————————————————————————————————————— */


@font-face {
    font-family:'ABCArizonaFlare';
    font-style: normal;
    font-weight: normal;
    src: url('fonts/ABCArizonaFlare/ABCArizonaFlare-Light.woff2') format('woff2'),
        url('fonts/ABCArizonaFlare/ABCArizonaFlare-Light.woff') format('woff'),
        url('fonts/ABCArizonaFlare/ABCArizonaFlare-Light.otf') format('opentype');
}

@font-face {
    font-family:'ABCArizonaFlare';
    font-style: italic;
    font-weight: normal;
    src: url('fonts/ABCArizonaFlare/ABCArizonaFlare-LightItalic.woff2') format('woff2'),
        url('fonts/ABCArizonaFlare/ABCArizonaFlare-LightItalic.woff') format('woff'),
        url('fonts/ABCArizonaFlare/ABCArizonaFlare-LightItalic.otf') format('opentype');
}

@font-face {
    font-family:'ABCArizonaFlare';
    font-style: normal;
    font-weight: bold;
    src: url('fonts/ABCArizonaFlare/ABCArizonaFlare-Medium.woff2') format('woff2'),
        url('fonts/ABCArizonaFlare/ABCArizonaFlare-Medium.woff') format('woff'),
        url('fonts/ABCArizonaFlare/ABCArizonaFlare-Medium.otf') format('opentype');
}

@font-face {
    font-family:'ABCArizonaFlare';
    font-style: italic;
    font-weight: bold;
    src: url('fonts/ABCArizonaFlare/ABCArizonaFlare-MediumItalic.woff2') format('woff2'),
        url('fonts/ABCArizonaFlare/ABCArizonaFlare-MediumItalic.woff') format('woff'),
        url('fonts/ABCArizonaFlare/ABCArizonaFlare-MediumItalic.otf') format('opentype');
}



/* vars ——————————————————————————————————————————————————————————————————————————————————————————— */


:root {

    --color-background: #FFFFFA;

    --color-red: #F5AF9B;
    --color-orange: #EDC591;
    --color-yellow: #FFF5C3;
    --color-blue: #D5E9F5;
    --color-purple: #DCD2F0;
    --color-green: #DCEBD2;
    --color-gray: #D2D2D7;

    --color-button: #EFEFEF;
    --color-button-hover: #BABABA;
 
    --font-small-size: 1.25rem;
    --font-small-lineheight: 1.2em; 
    --font-normal-size: 1.56rem;
    --font-normal-lineheight: 1.2em;
    --font-medium-size: 1.875rem;
    --font-medium-lineheight: 1.2em;
    --font-large-size: 2.8125rem;
    --font-large-lineheight: 1.11em;
    --font-title-size: 4.0625rem;
    --font-title-lineheight: 1.07em;

    --spacing-margin: 25px;
    --spacing-margin-minusgutter: 15px;
    --spacing-gutter: 20px;
    --spacing-gutter-half: 10px;

    --page-max-width: 1500px;

}


@media only screen and ( max-width: 950px ) {

    :root {
    
        --font-small-size: 0.6875rem;
        --font-small-lineheight: 1.18em; 
        --font-normal-size: 0.9375rem;
        --font-normal-lineheight: 1.2em;
        --font-medium-size: 0.9375rem;
        --font-medium-lineheight: 1.2em;
        --font-large-size: 1.5rem;
        --font-large-lineheight: 1.16em;
        --font-title-size: 2.1875rem;
        --font-title-lineheight: 0.85em;
    
        --spacing-margin: 20px;
        --spacing-margin-minusgutter: 10px;
        --spacing-gutter: 15px;
        --spacing-gutter-half: 7.5px;
        
        --page-max-width: 1500px;

    }

}



/* allgemein ——————————————————————————————————————————————————————————————————————————————————————————— */


body {
    margin: 0px;
    padding: 0px;
    font-size: var( --font-normal-size );
    line-height: var( --font-normal-lineheight );
    font-family: 'ABCArizonaFlare', 'Helvetica Neue', sans-serif;
    background-color: var( --color-background );
    color: black;
    cursor: default;
    -webkit-user-select: text; 
    -moz-user-select: text; 
    -ms-user-select: text; 
    user-select: text;
    font-weight: normal;
    min-height:100%;
    height: 100%;
    width: 100%;
}

::selection {
    background: black;
    color: var( --color-background );
}

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

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

a:hover {

}

strong {
    font-weight: bold;
    font-style: normal;
}

em {
    font-style: italic;
}

body.colored.red {
    background-color: var( --color-red );
}

body.colored.orange {
    background-color: var( --color-orange );
}

body.colored.yellow {
    background-color: var( --color-yellow );
}

body.colored.blue {
    background-color: var( --color-blue );
}

body.colored.purple {
    background-color: var( --color-purple );
}

body.colored.green {
    background-color: var( --color-green );
}

body.colored.gray {
    background-color: var( --color-gray );
}



/* header ————————————————————————————————————————————————————————————————————————————————————————— */


header {
    position: fixed;
    z-index: 99999999;
    height: 150px;
    left: 0px;
    width: 100%;
    display: flex;
    justify-content: space-between;
}

header.scrolled {
    pointer-events: none;
}

header a.logolink {
    width: 280px;
    display: block;
    pointer-events: all;
}

header.scrolled a.logolink {
    width: 10vw;
}

header h2 {
    color: transparent;
    height: 150px;
    position: relative;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
}

header h2::before,
header h2::after {
    content: "";
    position: absolute;
    left: 0px;
    top: 0px;
    width: 280px;
    height: 100%;
    background-size: auto 90px;
    background-repeat: no-repeat;
    background-position: var( --spacing-margin ) 35px;
    transition: opacity .3s;
    pointer-events: none;
}

header h2::before {
    background-image: url( 'graphics/EHH_Logo_RGB_Black_trimmed.svg' );
}

header h2::after {
    background-image: url( 'graphics/EHH_Logo_RGB_Black_trimmed_small.svg' );
    opacity: 0;
}

header.scrolled h2::before {
    opacity: 0;
}

header.scrolled h2::after {
    opacity: 1;
}

header nav.static {
    pointer-events: all;    
}

header nav.static ul {
    display: flex;
    gap: 32px;
    padding-top: 35px;
    padding-left: var( --spacing-margin );
    padding-right: var( --spacing-margin );
    white-space: nowrap;
}

header nav.static ul li {
    background-color: var( --color-button );
    height: 44px;
    border-radius: 22px;
    cursor: pointer;
}

header nav.static ul li:hover {
    background-color: var( --color-button-hover );
}

header nav.static ul li a {
    display: block;
    height: 100%;
}

header nav.static ul li button {
    display: block;
    height: 100%;
    background-color: transparent;
    color: inherit;
    font: inherit;
    border: none;
    padding-left: var( --spacing-gutter );
    padding-right: var( --spacing-gutter );
    cursor: pointer;
}

header nav.static ul li p {
    padding-top: 8px;
    padding-left: var( --spacing-gutter );
    padding-right: var( --spacing-gutter );
}

header nav.dynamic {
    position: fixed;
    z-index: 99999991;
    background-color: var( --color-button );
    right: 0px;
    top: 0px;
    height: 100%;
    width: 100%;
    max-width: 544px;
    overflow: hidden;
    box-sizing: border-box;
    padding-left: 50px;
    padding-right: var( --spacing-margin );
    display: flex;
    flex-direction: column;
    padding-bottom: 50px;
    transition: opacity .3s;
    pointer-events: all;
}

header nav.dynamic.hidden {
    opacity: 0;
    pointer-events: none;
}

header nav.dynamic .top {
    display: flex;
    justify-content: flex-end;
    flex-grow: 0;
    flex-shrink: 0;
}

header nav.dynamic .top .close {
    background-color: var( --color-button );
    height: 44px;
    border-radius: 22px;
    cursor: pointer;
    box-sizing: border-box;
    /*padding-top: 8px;*/
    padding-left: var( --spacing-gutter );
    padding-right: var( --spacing-gutter );
    margin-top: 35px;
    margin-bottom: 35px;
    border: none;
    font: inherit;
}

header nav.dynamic .top .close:hover {
    background-color: var( --color-button-hover );
}

header nav.dynamic .mid {
    flex-grow: 1;
    flex-shrink: 1;
    overflow: hidden;
    overflow-y: auto;
}

header nav.dynamic .mid ul .menu-item {
    position: relative;
    font-size: var( --font-large-size );
    line-height: var( --font-large-lineheight );
}

header nav.dynamic .mid ul .menu-item a {
    display: block;
    width: 100%;
}

header nav.dynamic .mid ul .menu-item.menu-item-has-children::before {
    content: "";
    display: block;
    position: absolute;
    width: 20px;
    height: 26px;
    right: 0px;
    top: 12px;
    background-image: url( 'graphics/arrow_foldout.svg' );
    background-repeat: no-repeat;
    background-size: 100% auto;
    pointer-events: none;
    transition: transform .3s;
}

header nav.dynamic .mid ul .menu-item.menu-item-has-children.extended::before {
    transform: rotateZ( 180deg );
}

header nav.dynamic .mid ul .sub-menu {
    box-sizing: border-box;
    padding-left: 66px;
    overflow: hidden;
    height: 0px;
    transition: height .3s;
}

header nav.dynamic .mid ul .menu-item.extended .sub-menu {

}

header nav.dynamic .mid ul .sub-menu .menu-item {
    font-size: var( --font-normal-size );
    line-height: var( --font-normal-lineheight );
    padding-top: 3px;
    padding-bottom: 3px;
}

header nav.dynamic .mid ul .sub-menu .menu-item:first-child {
    margin-top: 10px;
}

header nav.dynamic .mid ul .sub-menu .menu-item:last-child {
    margin-bottom: 10px;
}

header nav.dynamic .mid ul .sub-menu .menu-item a {
    text-decoration: underline;
}

header nav.dynamic .bottom {
    display: flex;
    gap: var( --spacing-gutter );
    flex-grow: 0;
    flex-shrink: 0;
    padding-top: 50px;
}

header nav.dynamic .bottom .half {
    width: 50%;
}

header nav.dynamic .bottom a {
    text-decoration: underline;
}

header .nav_back {
    position: fixed;
    z-index: 99999990;
    width: 100%;
    height: 100%;
    left: 0px;
    top: 0px;
    pointer-events: all;
}

header .nav_back.hidden {
    display: none;
}


@media only screen and ( max-width: 950px ) {

    header nav.static ul {
        gap: 10px;
    }
    
    header nav.static ul li {
        height: 30px;
        border-radius: 15px;
    }
    
    header nav.static ul li p {
        padding-top: 6px;
    }
    
    header nav.dynamic {
        padding-left: var( --spacing-margin );
        padding-right: var( --spacing-margin );
    }
    
    header nav.dynamic .top .close {
        height: 30px;
        border-radius: 15px;
        padding-top: 6px;
    }
    
    header nav.dynamic .mid ul .menu-item.menu-item-has-children::before {
        height: 20px;
        width: 15px;    
        top: 4px;
    }
    
    header nav.dynamic .mid ul .sub-menu {
        padding-left: 30px;
    }
    
}


@media only screen and ( max-width: 550px ) {
    
    header {
        height: 60px;
        background-color: var( --color-background );
        box-shadow: 0px 0px 2px rgba(0,0,0,0.16);
        z-index: 99999990;
    }
    
    body.colored.red header {
        background-color: var( --color-red );
    }
    
    body.colored.orange header {
        background-color: var( --color-orange );
    }
    
    body.colored.yellow header {
        background-color: var( --color-yellow );
    }
    
    body.colored.blue header {
        background-color: var( --color-blue );
    }
    
    body.colored.purple header {
        background-color: var( --color-purple );
    }
    
    body.colored.green header {
        background-color: var( --color-green );
    }
    
    body.colored.gray header {
        background-color: var( --color-gray );
    }
    
    header h2 {
        height: 60px;
    }
    
    header h2::before, 
    header h2::after {
        background-size: auto 40px;
        background-position: var( --spacing-margin ) 10px;
    }
    
    header nav.static ul {
        padding-top: 10px;
    }
    
    header nav.dynamic .top .close {
        margin-top: 10px;
    }
    
}


@media (prefers-reduced-motion) {

    header nav.dynamic .mid ul .sub-menu {
        transition: none;
    }

}



/* intro ————————————————————————————————————————————————————————————————————————————————————————— */


.intro {
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    z-index: 99999999;    
    background-color: var( --color-background );
    cursor: pointer;
}

.intro dotlottie-player {
    display: block;
    width: 100%;
    height: 100%;
}



/* page ————————————————————————————————————————————————————————————————————————————————————————— */


/* ### general ### */


.page {
    box-sizing: border-box;
    padding-top: 235px;
    padding-bottom: 250px;
    padding-left: var( --spacing-margin-minusgutter );    
    padding-right: var( --spacing-margin-minusgutter ); 
    overflow: hidden;
}

.page h1 {
    box-sizing: border-box;
    padding-left: var( --spacing-gutter-half );    
    padding-right: var( --spacing-gutter-half );
    width: 80%;
    margin-left: 10%;   
    font-size: var( --font-title-size );
    line-height: var( --font-title-lineheight );
    margin-bottom: 120px;
}

.page h3 {
    box-sizing: border-box;
    padding-left: var( --spacing-gutter-half );    
    padding-right: var( --spacing-gutter-half );
    width: 80%;
    margin-left: 10%;   
    font-size: var( --font-large-size );
    line-height: var( --font-large-lineheight );
    scroll-margin-top: 60px;
}

.page h4 {
    box-sizing: border-box;
    padding-left: var( --spacing-gutter-half );    
    padding-right: var( --spacing-gutter-half );
    width: 80%;
    margin-left: 10%;   
    font-size: var( --font-normal-size );
    line-height: var( --font-normal-lineheight );
    margin-bottom: 120px;
}

.page h1:has( + h4 ) {
    margin-bottom: 15px;
}

.page p {
    box-sizing: border-box;
    padding-left: var( --spacing-gutter-half );    
    padding-right: var( --spacing-gutter-half );
    width: 80%;
    margin-left: 10%;   
    font-size: var( --font-large-size );
    line-height: var( --font-large-lineheight );
}

.page p.has-small-font-size {
    width: 60%;
    font-size: var( --font-normal-size );
    line-height: var( --font-normal-lineheight );
}

.page p a {
    text-decoration: underline;
}

.page .wp-block-list {
    box-sizing: border-box;
    padding-left: var( --spacing-gutter-half );    
    padding-right: var( --spacing-gutter-half );
    width: 60%;
    margin-left: 10%;   
    font-size: var( --font-normal-size );
    line-height: var( --font-normal-lineheight );
}

.page ul.wp-block-list {
    list-style: disc;
}

.page ol.wp-block-list {
    list-style: number;
}

.page ul.wp-block-list li {
    margin-left: 1em;
}

.page ol.wp-block-list li {
    margin-left: 1.5em;
}


@media only screen and ( max-width: 950px ) {

    .page {
        padding-bottom: 120px;
    }
    
    .page h1,
    .page h4 {
        margin-bottom: 60px;
    }
    
    .page ul.wp-block-list li {
        margin-left: 1.15em;
    }
    
    .page ol.wp-block-list li {
        margin-left: 1.5em;
    }

}


@media only screen and ( max-width: 550px ) {

    .page {
        padding-top: 100px;    
        padding-bottom: 120px;
    }
    
    .page h1,
    .page h3,
    .page h4,
    .page p { 
        width: 100%;
        margin-left: 0px;
    }
    
    .page h3 {
        scroll-margin-top: 100px;
    }
    
    .page p.has-small-font-size {
        width: 100%;
    }
    
    .page .wp-block-list {
        width: 100%;
        margin-left: 0%;   
    }
    
}


@media only screen and ( min-width: 1500px ) {
    
    .page {
        padding-left: calc( ( ( 100vw - var( --page-max-width ) ) / 2 + var( --spacing-margin-minusgutter ) ) );
        padding-right: calc( ( ( 100vw - var( --page-max-width ) ) / 2 + var( --spacing-margin-minusgutter ) ) );
    }

}


/* ### buttons ### */


.page .wp-block-buttons {
    box-sizing: border-box;
    padding-left: var( --spacing-gutter-half );    
    padding-right: var( --spacing-gutter-half );
    width: 80%;
    margin-left: 10%; 
    display: flex;  
    gap: var( --spacing-gutter );
    flex-wrap: wrap;
}

.page .wp-block-buttons .wp-block-button {
    height: 58px;
    border-radius: 29px;
    box-sizing: border-box;
    padding-left: 30px;
    padding-right: 30px;
    padding-top: 14px;
    background-color: var( --color-button );
    cursor: pointer;
}

.page .wp-block-buttons .wp-block-button:has( a ) {
    padding-left: 0px;
    padding-right: 0px;
    padding-top: 0px;
}

.page .wp-block-buttons .wp-block-button a {
    box-sizing: border-box;
    display: block;
    height: 100%;
    padding-left: 30px;
    padding-right: 30px;
    padding-top: 14px;
}

.page .wp-block-buttons .wp-block-button:hover {
    background-color: var( --color-button-hover );
}


@media only screen and ( max-width: 950px ) {
    
    .page .wp-block-buttons .wp-block-button {
        height: 30px;
        padding-top: 6px;
        border-radius: 15px;
        padding-left: var( --spacing-gutter );
        padding-right: var( --spacing-gutter );
    }
    
    .page .wp-block-buttons .wp-block-button:has( a ) {
        padding-left: 0px;
        padding-right: 0px;
        padding-top: 0px;
    }
    
    .page .wp-block-buttons .wp-block-button a {
        padding-left: var( --spacing-gutter );
        padding-right: var( --spacing-gutter );
        padding-top: 6px;
    }

}


@media only screen and ( max-width: 550px ) {

    .page .wp-block-buttons {
        width: 100%;
        margin-left: 0px;
        gap: 10px;
    }
    
    .page .wp-block-buttons .wp-block-button {
        height: 30px;
        padding-top: 6px;
        border-radius: 15px;
        padding-left: var( --spacing-gutter );
        padding-right: var( --spacing-gutter );
    }
    
    .page .wp-block-buttons .wp-block-button:has( a ) {
        padding-left: 0px;
        padding-right: 0px;
        padding-top: 0px;
    }
    
    .page .wp-block-buttons .wp-block-button a {
        padding-left: var( --spacing-gutter );
        padding-right: var( --spacing-gutter );
        padding-top: 6px;
    }

}


/* ### image ### */


.page .wp-block-image {
    box-sizing: border-box;
    padding-left: var( --spacing-gutter-half );    
    padding-right: var( --spacing-gutter-half );
    width: 80%;
    margin-left: 10%;
}

.page .wp-block-image.vertical {
    width: 50%;    
}

.page .wp-block-image img {
    display: block;
    padding: 0px;
    margin: 0px;    
    width: 100% !important;
    height: auto !important;
}

.page .wp-block-image figcaption {
    font-size: var( --font-small-size );
    line-height: var( --font-small-lineheight );
    margin-top: 15px;
}


@media only screen and ( max-width: 550px ) {

    .page .wp-block-image,
    .page .wp-block-image.vertical {
        width: 100%;
        margin-left: 0px;
    }

}


/* ### gallery ### */


.page .wp-block-gallery {
    box-sizing: border-box;
    width: 100%;
    overflow: hidden;
    padding-left: var( --spacing-margin-minusgutter );    
    padding-right: var( --spacing-margin-minusgutter ); 
    margin-left: calc( var( --spacing-margin-minusgutter ) * -1 );
    width: calc( 100% + var( --spacing-margin-minusgutter ) * 2 );
    -webkit-user-select: none; 
    -moz-user-select: none; 
    -ms-user-select: none; 
    user-select: none;
    display: none;
}

.page .wp-block-gallery .wrapper {
    position: relative;
    width: 80%;
    margin-left: 10%;
    padding-top: 75px;
}

.page .wp-block-gallery .wrapper .strip {
    display: flex;
    transition: transform .3s;
}

.page .wp-block-gallery .wrapper .strip .wp-block-image {
    width: 100%;
    margin-left: 0px;
    
}

.page .wp-block-gallery .wrapper .strip .wp-block-image img {
    pointer-events: none;
    -webkit-user-select: none; 
    -moz-user-select: none; 
    -ms-user-select: none; 
    user-select: none;
    aspect-ratio: 3 / 2 !important;
    object-fit: cover;
}

.page .wp-block-gallery .wrapper .strip .wp-block-image figcaption {
    -webkit-user-select: text; 
    -moz-user-select: text; 
    -ms-user-select: text; 
    user-select: text;
}


@media only screen and ( max-width: 950px ) {

    .page .wp-block-gallery .wrapper {
        padding-top: 50px;
    }

}


@media only screen and ( max-width: 550px ) {

    .page .wp-block-gallery .wrapper {
        width: 90%;
        margin-left: 0px;
    }

}


@media only screen and ( min-width: 1500px ) {
    
    .page .wp-block-gallery {
        width: 100vw;
        margin-left: calc( ( ( 100vw - var( --page-max-width ) ) / 2 + var( --spacing-margin-minusgutter ) ) * -1 );
    }
    
    .page .wp-block-gallery .wrapper {
        width: calc( ( var( --page-max-width ) - var( --spacing-margin-minusgutter ) * 2 ) * 0.8 );
        margin-left: auto;
        margin-right: auto;
    }

}


@media (prefers-reduced-motion) {

    .page .wp-block-gallery .wrapper .strip {
        transition: none;
    }
    
}



/* ### map ### */


.page .map {
    position: relative;
    width: 100%;
    margin-left: calc( var( --spacing-margin-minusgutter ) * -1 );
    width: calc( 100% + var( --spacing-margin-minusgutter ) * 2 );
    height: 1400px;    
    background-color: transparent;
    overflow: hidden;
    background-color: var( --color-button );
}

.page .map .leaflet-control-attribution {
    background-color: transparent;
    color: black;
    padding: 0px;
    padding-left: var( --spacing-margin );
    padding-right: var( --spacing-margin );
    padding-bottom: var( --spacing-gutter );
    font-size: var( --font-small-size );
    line-height: var( --font-small-lineheight );
    font-family: 'ABCArizonaFlare', 'Helvetica Neue', sans-serif;
    font-style: italic;
    display: none;
}

.page .map .leaflet-control-attribution a {
    color: inherit;
}

.page .map .leaflet-control-attribution a .leaflet-attribution-flag {
    display: none !important;
}

.page .map .leaflet-control-attribution span {
    display: none;
}

.page .map .leaflet-left .leaflet-control {
    margin-left: var( --spacing-margin );    
    margin-left: calc( var( --spacing-margin-minusgutter ) + ( 100vw - var( --spacing-margin-minusgutter ) * 2 ) * 0.1 + var( --spacing-gutter-half ) );   
}

.page .map .leaflet-top .leaflet-control {
    margin-top: var( --spacing-gutter );
}

.page .map .leaflet-control-zoom {
    border: none;
    display: flex;
    gap: var( --spacing-gutter );
}

.page .map .leaflet-control-zoom a:first-child,
.page .map .leaflet-control-zoom a:last-child,
.page .map .leaflet-control-zoom a,
.page .map .leaflet-bar a.leaflet-disabled {
    background-color: var( --color-button-hover );
    color: black;
    height: 44px;
    width: 44px;
    border-radius: 22px;
    border-top-left-radius: 22px;
    border-top-right-radius: 22px;
    border-bottom-left-radius: 22px;
    border-bottom-right-radius: 22px;
    border-bottom: none;
    cursor: pointer;
    font-size: var( --font-normal-size );
    line-height: var( --font-normal-lineheight );
    font-family: 'ABCArizonaFlare', 'Helvetica Neue', sans-serif;
    padding-top: 5px;
    box-sizing: border-box;
    text-align: center;
}

.page .map .leaflet-bar a.leaflet-disabled {
    opacity: 0.3;
    cursor: default;
}

.page .map .leaflet-interactive {
    cursor: grab;
}

.page .map .marker .circle {
    position: absolute;
    left: 0px;
    top: 0px;
    right: 0px;
    bottom: 0px;
    margin-left: auto;
    margin-top: auto;
    margin-right: auto;
    margin-bottom: auto;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-color: black;    
    cursor: pointer;
    box-sizing: border-box;
}

.page .map .marker .circle .label {
    position: absolute;
    left: 10px;
    bottom: 30px;
    transform: translate3d( -50%, 0px, 0 );
    pointer-events: none;
    /*opacity: 0;*/
    visibility: hidden;
    width: 300px;
}

.page .map .marker .circle.active .label {
    visibility: visible;
    pointer-events: all;
}

.page .map .marker .circle .label .wrapper {
    position: relative;
    box-sizing: border-box;
    padding: var( --spacing-gutter );
    width: 100%;
    background-color: black;
    color: white;
    font-size: var( --font-small-size );
    line-height: var( --font-small-lineheight );
    font-family: 'ABCArizonaFlare', 'Helvetica Neue', sans-serif;
    text-align: center;
    transition: left .3s, right .3s;
    cursor: default;
}

.page .map .marker .circle .label .wrapper .country {
    font-size: var( --font-medium-size );
    line-height: var( --font-medium-lineheight );
}

.page .map .marker .circle .label .wrapper .name {
    margin-top: 5px;
    color: var( --color-button-hover );
}

.page .map .marker .circle .label .wrapper .name a {
    color: inherit;
}


@media only screen and ( max-width: 950px ) {

    .page .map {
        height: 1000px;
    }
    
    .page .map .leaflet-control-zoom a:first-child,
    .page .map .leaflet-control-zoom a:last-child,
    .page .map .leaflet-control-zoom a {
        background-color: var( --color-button-hover );
        height: 30px;
        width: 30px;
        border-radius: 15px;
        border-top-left-radius: 15px;
        border-top-right-radius: 15px;
        border-bottom-left-radius: 15px;
        border-bottom-right-radius: 15px;
    }
    
    .page .map .marker .circle { 
        width: 80%;
        height: 80%;
    }
    
}


@media only screen and ( max-width: 550px ) {

    .page .map {
        position: relative;
        width: calc( 100% - var( --spacing-gutter ) );
        margin-left: 0px;
        margin-left: var( --spacing-gutter-half );
        height: 450px;    
        background-color: var( --color-button );
        box-sizing: border-box;
        border: 1px solid black;
    }
    
    .page .map .leaflet-control-attribution {
        padding-left: 10px;
        padding-right: 10px;
        padding-bottom: 10px;
    }
    
    .page .map .leaflet-control-zoom {
        display: flex;
        gap: 10px;
    }

    .page .map .leaflet-left .leaflet-control {
        margin-left: 10px;
    }
    
    .page .map .leaflet-top .leaflet-control {
        margin-top: 10px;
    }

}


@media only screen and ( min-width: 1500px ) {
    
    .page .map {
        width: 100vw;
        margin-left: calc( ( ( 100vw - var( --page-max-width ) ) / 2 + var( --spacing-margin-minusgutter ) ) * -1 );
    }
    
}


/* ### tiles ### */


.page .tiles {
    box-sizing: border-box;
    width: 100%;
    overflow: hidden;
    padding-left: var( --spacing-margin-minusgutter );    
    padding-right: var( --spacing-margin-minusgutter ); 
    margin-left: calc( var( --spacing-margin-minusgutter ) * -1 );
    width: calc( 100% + var( --spacing-margin-minusgutter ) * 2 );
    margin-top: 200px;
}

.page .tiles h3 {
    width: auto;
    margin-right: max( 120px, 10% );
}

.page .tiles .wrapper {
    position: relative;
    width: 80%;
    margin-left: 10%;
    padding-top: 30px;
    -webkit-user-select: none; 
    -moz-user-select: none; 
    -ms-user-select: none; 
    user-select: none;
}

.page .tiles .wrapper .strip {
    display: flex;
    transition: transform .3s;
    align-items: stretch;
}

.page .tiles .wrapper .strip .element {
    box-sizing: border-box;
    padding-left: var( --spacing-gutter-half );    
    padding-right: var( --spacing-gutter-half ); 
}

.page .tiles .wrapper .strip .element .tile {
    background-color: yellow;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    padding-left: var( --spacing-gutter );
    padding-right: var( --spacing-gutter );
    height: 100%;
    min-height: calc( 100vw * 0.4 / 3 * 2 );
}

.page .tiles .wrapper .strip .element .tile.red {
    background-color: var( --color-red );
}

.page .tiles .wrapper .strip .element .tile.orange {
    background-color: var( --color-orange );
}

.page .tiles .wrapper .strip .element .tile.yellow {
    background-color: var( --color-yellow );
}

.page .tiles .wrapper .strip .element .tile.blue {
    background-color: var( --color-blue );
}

.page .tiles .wrapper .strip .element .tile.purple {
    background-color: var( --color-purple );
}

.page .tiles .wrapper .strip .element .tile.green {
    background-color: var( --color-green );
}

.page .tiles .wrapper .strip .element .tile.gray {
    background-color: var( --color-gray );
}

body.colored .page .tiles .wrapper .strip .element .tile.red,
body.colored .page .tiles .wrapper .strip .element .tile.orange,
body.colored .page .tiles .wrapper .strip .element .tile.yellow,
body.colored .page .tiles .wrapper .strip .element .tile.blue,
body.colored .page .tiles .wrapper .strip .element .tile.purple,
body.colored .page .tiles .wrapper .strip .element .tile.green,
body.colored .page .tiles .wrapper .strip .element .tile.gray {
    background-color: var( --color-background );
}

.page .tiles .wrapper .strip .element .tile p {
    width: 100%;
    margin-left: 0px;
    padding-left: 0px;
    padding-right: 0px;
}

.page .tiles .wrapper .strip .element .tile .categories,
.page .tiles .wrapper .strip .element .tile .date,
.page .tiles .wrapper .strip .element .tile .place {
    flex-grow: 0;
    flex-shrink: 0; 
}

.page .tiles .wrapper .strip .element .tile .categories {
    font-size: var( --font-small-size );
    line-height: var( --font-small-lineheight );
    margin-top: 16px;
}

.page .tiles .wrapper .strip .element .tile .title_wrapper {
    overflow: hidden;
    flex-grow: 1;
    flex-shrink: 1;
}

.page .tiles .wrapper .strip .element .tile h4.title {
    font-size: var( --font-large-size );
    line-height: var( --font-large-lineheight );
    margin-top: 10px;
    padding-left: 0px;
    padding-right: 0px;
    margin-left: 0px;
    width: 100%;
    margin-bottom: 0px;
}

.page .tiles .wrapper .strip .element .tile .subtitle {
    margin-top: 10px;
}

.page .tiles .wrapper .strip .element .tile .place {
    font-size: var( --font-normal-size );
    line-height: var( --font-normal-lineheight );
    margin-top: 10px;
    margin-bottom: 23px;
}


@media only screen and ( max-width: 950px ) {

    .page .tiles {
        margin-top: 80px;
    }
        
    .page .tiles h3 {
        margin-right: max( 90px, 10% );
    }

}


@media only screen and ( max-width: 550px ) {
    
    .page .tiles .wrapper {
        width: 90%;
        margin-left: 0px;
        padding-top: 22px;
    }
    
    .page .tiles .wrapper .strip .element .tile {
        min-height: calc( 100vw * 0.9 / 3 * 2 );
    }
    
}


@media only screen and ( min-width: 1500px ) {
    
    .page .tiles {
        width: 100vw;
        margin-left: calc( ( ( 100vw - var( --page-max-width ) ) / 2 + var( --spacing-margin-minusgutter ) ) * -1 );
    }
    
    .page .tiles h3 {
        width: calc( ( var( --page-max-width ) - var( --spacing-margin-minusgutter ) * 2 ) * 0.8 );
        margin-left: auto;
        margin-right: auto;
    }
    
    .page .tiles .wrapper {
        width: calc( ( var( --page-max-width ) - var( --spacing-margin-minusgutter ) * 2 ) * 0.8 );
        margin-left: auto;
        margin-right: auto;
    }
    
    .page .tiles .wrapper .strip .element .tile {
        min-height: calc( var( --page-max-width ) * 0.4 / 3 * 2 );
    }
    
}


@media (prefers-reduced-motion) {

    .page .tiles .wrapper .strip {
        transition: none;
    }
    
}



/* ### details ### */


.page .wp-block-details {
    box-sizing: border-box;
    width: calc( 80% - var( --spacing-gutter ) );
    margin-left: calc( 10% + var( --spacing-gutter-half ) );   
    border-top: 1px solid black;
    border-bottom: 1px solid black;
    margin-top: 120px;
    scroll-margin-top: 150px;
}

.page .wp-block-details + .wp-block-details {
    border-top: 0px;
    margin-top: 0px;
}

.page .wp-block-details .wp-block-details {
    margin-top: 0px;
    width: 87.5%;
    margin-left: 12.5%;
}

.page .wp-block-details .wp-block-details:last-child {
    border-bottom: 0px;
}

.page .wp-block-details summary {
    position: relative;
    font-size: var( --font-large-size );
    line-height: var( --font-large-lineheight );
    padding-top: 14px;
    padding-bottom: 14px;
    list-style: none;
    cursor: pointer;
    padding-right: calc( 20px + var( --spacing-gutter ) );
}

.page .wp-block-details summary::-webkit-details-marker {
    display: none;
}

.page .wp-block-details summary::before {
    content: "";
    display: block;
    position: absolute;
    width: 20px;
    height: 26px;
    right: 0px;
    top: 27px;
    background-image: url( 'graphics/arrow_foldout.svg' );
    background-repeat: no-repeat;
    background-size: 100% auto;
    transition: transform .3s;
}

.page .wp-block-details[open] > summary::before {
    transform: rotateZ( 180deg );
}

.page .wp-block-details[open].closing > summary::before {
    transform: rotateZ( 0deg );
}

.page .wp-block-details summary span {
    font-size: var( --font-normal-size );
    line-height: var( --font-normal-lineheight );
}

.page .wp-block-details .wrapper {
    overflow: hidden;    
    height: 0px;
    transition: height .3s;
    display: block;
}

.page .wp-block-details p,
.page .wp-block-details ol,
.page .wp-block-details ul {
    width: 75%;
    margin-left: 0px;
    padding-left: 0px;    
    padding-right: 0px;
    font-size: var( --font-normal-size );
    line-height: var( --font-normal-lineheight );
}

.page .wp-block-details p a {
    text-decoration: underline;
    position: relative;
    padding-left: 25px;
}

.page .wp-block-details p a::before {
    content: "→";
    display: block;
    position: absolute;
    top: 0px;
    left: 0px;
}

.page .wp-block-details .wp-block-columns {
    display: flex;
    gap: var( --spacing-gutter );
}

.page .wp-block-details .wp-block-columns p {
    width: 100%;
}

.page .wp-block-details .wp-block-columns .wp-block-image {
    padding-left: 0px;
    padding-right: 0px;
    width: 100%;
    margin-left: 0px;
}

.page .wp-block-details .wp-block-columns .wp-block-column:first-child {
    flex-basis: 75%;
}

.page .wp-block-details .wp-block-columns .wp-block-column:last-child {
    flex-basis: 25%;
}

.page .wp-block-details .association {
    display: flex;
    gap: var( --spacing-gutter );
}

.page .wp-block-details .association h4 {
    flex-basis: 37.5%;
    font-weight: bold;
    margin-left: 0px;
    width: auto;
    padding-left: 0px;
    padding-right: 0px;
}

.page .wp-block-details .association .wp-block-columns {
    flex-basis: 62.5%;
    display: flex;
    gap: var( --spacing-gutter );
}

.page .wp-block-details .association .wp-block-columns .wp-block-column:first-child {
    flex-basis: 60%;
}

.page .wp-block-details .association .wp-block-columns .wp-block-column:last-child {
    flex-basis: 40%;
    padding-left: 50px;
}

.page .wp-block-details .association .wp-block-columns .wp-block-column:last-child img {
    max-width: 200px;
}


@media only screen and ( max-width: 950px ) {
    
    .page .wp-block-details {
        margin-top: 60px;
    }
    
    .page .wp-block-details summary::before {
        width: 15px;
        height: 20px;
        top: 17px;
    }
    
    .page .wp-block-details p a {
        padding-left: 15px;
    }
    
    .page .wp-block-details .wp-block-columns {
        flex-wrap: wrap;
    }
    
    .page .wp-block-details .wp-block-columns .wp-block-column img {
        max-width: 200px;
    }
    
    .page .wp-block-details .wp-block-columns .wp-block-column:first-child,
    .page .wp-block-details .wp-block-columns .wp-block-column:last-child {
        flex-basis: 100%;
    }
    
    .page .wp-block-details .association {
        flex-direction: column;
    }
    
    .page .wp-block-details .association h4 {
        padding-left: 0px;
        padding-right: 0px;
        margin-bottom: 0px;
    }
    
    .page .wp-block-details .association .wp-block-columns {
        flex-direction: column;
    }

    .page .wp-block-details .association .wp-block-columns .wp-block-column:last-child {
        padding-left: 0px;
    }
    
}


@media only screen and ( max-width: 550px ) {

    .page .wp-block-details {
        width: calc( 100% - var( --spacing-gutter ) );
        margin-left: var( --spacing-gutter-half );   
        margin-top: 60px;
    }
    
    .page .wp-block-details p
    .page .wp-block-details ol,
    .page .wp-block-details ul {
        width: 100%;
    }
    
}


@media (prefers-reduced-motion) {

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

}



/* ### pastevents ### */


.page .pastevents {
    margin-top: 200px;
    scroll-margin-top: 60px;
}

.page .pastevents .filter {
    box-sizing: border-box;
    padding-left: var( --spacing-gutter-half );
    padding-right: var( --spacing-gutter-half );
    width: 80%;
    margin-left: 10%;
    display: flex;
    gap: var( --spacing-gutter );
    margin-top: 50px;
    flex-wrap: wrap;
}

.page .pastevents .filter li {

}

.page .pastevents .filter li button {
    height: 44px;
    border-radius: 22px;
    box-sizing: border-box;
    padding-left: 30px;
    padding-right: 30px;
    background-color: var( --color-button );
    cursor: pointer;
    font: inherit;
    color: inhert;
    border: none;
}

.page .pastevents .filter li button:hover,
.page .pastevents .filter li.active button {
    background-color: var( --color-button-hover );
}

.page .pastevents .grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    width: 90%;
    margin-left: 10%;
    row-gap: 50px;
    padding-top: 50px;
    transition: opacity .3s;
}

.page .pastevents .grid.faded {
    opacity: 0;
}

.page .pastevents .grid .element {
    padding-left: var( --spacing-gutter-half );
    padding-right: var( --spacing-gutter-half );
    display: none;
}

.page .pastevents .grid .element.visible_filter.visible_loaded {
    display: block;
}

.page .pastevents .grid .element .tile {
    position: relative;
    aspect-ratio: 3 / 2;
}

.page .pastevents .grid .element .tile.red {
    background-color: var( --color-red );
}

.page .pastevents .grid .element .tile.orange {
    background-color: var( --color-orange );
}

.page .pastevents .grid .element .tile.yellow {
    background-color: var( --color-yellow );
}

.page .pastevents .grid .element .tile.blue {
    background-color: var( --color-blue );
}

.page .pastevents .grid .element .tile.purple {
    background-color: var( --color-purple );
}

.page .pastevents .grid .element .tile.green {
    background-color: var( --color-green );
}

.page .pastevents .grid .element .tile.gray {
    background-color: var( --color-gray );
}

body.colored .page .pastevents .grid .element .tile.red,
body.colored .page .pastevents .grid .element .tile.orange,
body.colored .page .pastevents .grid .element .tile.yellow,
body.colored .page .pastevents .grid .element .tile.blue,
body.colored .page .pastevents .grid .element .tile.purple,
body.colored .page .pastevents .grid .element .tile.green,
body.colored .page .pastevents .grid .element .tile.gray {
    background-color: var( --color-background );
}

.page .pastevents .grid .element .tile img {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.page .pastevents .grid .element .meta p {
    width: 100%;
    margin-left: 0px;
    padding-left: 0px;
    padding-right: 0px;
}

.page .pastevents .grid .element .meta h4.title {
    font-size: var( --font-medium-size );
    line-height: var( --font-medium-lineheight );
    margin-top: 15px;
    padding-left: 0px;
    padding-right: 0px;
    width: 100%;
    margin-left: 0px;
    margin-bottom: 0px;
}

.page .pastevents .grid .element .meta .date_place {
    font-size: var( --font-normal-size );
    line-height: var( --font-normal-lineheight );
    margin-top: 10px;
}

.page .pastevents .loadmore {
    box-sizing: border-box;
    padding-left: var( --spacing-gutter-half );
    padding-right: var( --spacing-gutter-half );
    width: 80%;
    margin-left: 10%;
    display: flex;
    gap: var( --spacing-gutter );
    margin-top: 50px;
    flex-wrap: wrap;
}

.page .pastevents .loadmore.allloaded {
    display: none;
}

.page .pastevents .loadmore button {
    height: 44px;
    border-radius: 22px;
    box-sizing: border-box;
    padding: 0px;
    padding-left: 30px;
    padding-right: 30px;
    background-color: var( --color-button );
    cursor: pointer;
    font: inherit;
    border: none;
}

.page .pastevents .loadmore button:hover {
    background-color: var( --color-button-hover );
}


@media only screen and ( max-width: 950px ) {

    .page .pastevents {
        margin-top: 80px;    
    }
    
    .page .pastevents .filter {
        gap: 10px;
    }
    
    .page .pastevents .filter li button {
        height: 30px;
        border-radius: 15px;
        padding-left: var( --spacing-gutter );
        padding-right: var( --spacing-gutter );
    }
    
    .page .pastevents .loadmore {
        width: 100%;
        margin-left: 0px;
    }
    
    .page .pastevents .loadmore button {
        height: 30px;
        border-radius: 15px;
        padding-left: var( --spacing-gutter );
        padding-right: var( --spacing-gutter );
    }
    
}


@media only screen and ( max-width: 550px ) {
    
    .page .pastevents .filter,
    .page .pastevents .grid {
        width: 100%;
        margin-left: 0px;
    }
    
    .page .pastevents .grid {
        grid-template-columns: 1fr 1fr;
        padding-top: 20px;
    }
    
    .page .pastevents .grid .element .meta .date_place {
        font-size: var( --font-small-size );
        line-height: var( --font-small-lineheight );
    }
    
}


/* ### pattern: board + board-member ### */


.page .wp-block-group.board {
    box-sizing: border-box;
    width: 100%;
    padding-left: var( --spacing-margin-minusgutter );    
    padding-right: var( --spacing-margin-minusgutter ); 
    margin-left: calc( var( --spacing-margin-minusgutter ) * -1 );
    width: calc( 100% + var( --spacing-margin-minusgutter ) * 2 );
    -webkit-user-select: none; 
    -moz-user-select: none; 
    -ms-user-select: none; 
    user-select: none;
}

.page .wp-block-group.board p,
.page .wp-block-group.board .wp-block-image {
    width: 100%;
    margin-left: 0px;
    padding-left: 0px;
    padding-right: 0px;
}

.page .wp-block-group.board .wp-block-image img {
    aspect-ratio: 1 / 1;
    object-fit: cover;
}

.page .wp-block-group.board p {
    font-size: var( --font-normal-size );
    line-height: var( --font-normal-lineheight );
}

.page .wp-block-group.board h4 {
    margin-top: 10px;
    padding-left: 0px;
    padding-right: 0px;
    margin-left: 0px;
    width: 100%;
    margin-bottom: 0px;
}

.page .wp-block-group.board h5 {
    font-style: italic;
}

.page .wp-block-group.board a {
    text-decoration: underline;
    position: relative;
    padding-left: 25px;
}

.page .wp-block-group.board a::before {
    content: "→";
    display: block;
    position: absolute;
    top: 0px;
    left: 0px;
}

.page .wp-block-group.board .wrapper {
    position: relative;
    width: 80%;
    margin-left: 10%;
    padding-top: 30px;
}

.page .wp-block-group.board .wrapper .strip {
    display: flex;
    transition: transform .3s;
}

.page .wp-block-group.board .wrapper .strip .wp-block-group.board-member {
    position: relative;
    box-sizing: border-box;
    padding-left: var( --spacing-gutter-half );
    padding-right: var( --spacing-gutter-half );
    cursor: pointer;
}

.page .wp-block-group.board .wrapper .strip .wp-block-group.board-member:has( .popup.empty ) {
    cursor: default;
    pointer-events: none;
}

.page .wp-block-group.board .wrapper .strip .wp-block-group.board-member .popup {
    position: absolute;
    left: var( --spacing-gutter-half );
    right: var( --spacing-gutter-half );
    top: 0px;
    bottom: 0px;
    width: auto;
    height: auto;
    background-color: var( --color-button );
    flex-direction: column;
    display: none;
}

.page .wp-block-group.board .wrapper .strip .wp-block-group.board-member .popup .close {
    font-size: var( --font-medium-size );
    line-height: var( --font-medium-lineheight );
    text-align: right;
    cursor: pointer;
    box-sizing: border-box;
    padding: var( --spacing-gutter );
    padding-top: 40px;
    padding-bottom: 20px;
}

.page .wp-block-group.board .wrapper .strip .wp-block-group.board-member .popup .wp-block-group__inner-container {
    box-sizing: border-box;
    padding: var( --spacing-gutter );
    overflow: hidden;
    overflow-y: auto;
    cursor: default;
    margin-right: var( --spacing-gutter );
}

.page .wp-block-group.board .wrapper .strip .wp-block-group.board-member .popup .wp-block-group__inner-container::-webkit-scrollbar {
    width: 8px;
}

.page .wp-block-group.board .wrapper .strip .wp-block-group.board-member .popup .wp-block-group__inner-container::-webkit-scrollbar-track {
    background: #BABABA;
    border-radius: 4px;
}

.page .wp-block-group.board .wrapper .strip .wp-block-group.board-member .popup .wp-block-group__inner-container::-webkit-scrollbar-thumb {
    background: black;
    border-radius: 4px;
}

.page .wp-block-group.board .wrapper .strip .wp-block-group.board-member .popup .wp-block-group__inner-container::-webkit-scrollbar-button {
    display: block;
    height: var( --spacing-gutter );
    background: transparent;
}

.page .wp-block-group.board .wrapper .strip .wp-block-group.board-member .popup .wp-block-group__inner-container::-webkit-scrollbar-button:vertical:start:increment,
.page .wp-block-group.board .wrapper .strip .wp-block-group.board-member .popup .wp-block-group__inner-container::-webkit-scrollbar-button:vertical:end:decrement,
.page .wp-block-group.board .wrapper .strip .wp-block-group.board-member .popup .wp-block-group__inner-container::-webkit-scrollbar-button:horizontal:start:increment, 
.page .wp-block-group.board .wrapper .strip .wp-block-group.board-member .popup .wp-block-group__inner-container::-webkit-scrollbar-button:horizontal:end:decrement {
    display: none;
}

.page .wp-block-group.board .wrapper .strip .wp-block-group.board-member .popup p {
    font-size: var( --font-small-size );
    line-height: var( --font-small-lineheight );
}

.page .wp-block-group.board .wrapper .strip .wp-block-group.board-member.popupvisible .popup {
    display: flex;
}


@media only screen and ( max-width: 550px ) {

    .page .wp-block-group.board a {
        padding-left: 15px;    
    }
    
    .page .wp-block-group.board .wrapper {
        width: 90%;
        margin-left: 0px;
        padding-top: 20px;
    }

    .page .wp-block-group.board .wrapper .strip .wp-block-group.board-member .popup p {
        font-size: var( --font-normal-size );
        line-height: var( --font-normal-lineheight );
    }

}


@media (prefers-reduced-motion) {

    .page .wp-block-group.board .wrapper .strip {
        transition: none;
    }
    
}


/* ### pattern: team-member ### */


.page .wp-block-group.team-member {
    box-sizing: border-box;
    width: 80%;
    margin-left: 10%;   
    margin-top: 100px;
}

.page .wp-block-group.team-member p,
.page .wp-block-group.team-member .wp-block-image {
    width: 100%;
    margin-left: 0px;
    padding-left: 0px;
    padding-right: 0px;
}

.page .wp-block-group.team-member p {
    font-size: var( --font-normal-size );
    line-height: var( --font-normal-lineheight );
}

.page .wp-block-group.team-member h4 {
    padding-left: 0px;
    padding-right: 0px;
    margin-left: 0px;
    width: 100%;
    margin-bottom: 0px;
}

.page .wp-block-group.team-member h5 {
    font-style: italic;
    margin-bottom: 20px;
}

.page .wp-block-group.team-member a {
    text-decoration: underline;
    position: relative;
    padding-left: 25px;
    display: block;
    width: fit-content;
    margin-top: 15px;
}

.page .wp-block-group.team-member a::before {
    content: "→";
    display: block;
    position: absolute;
    top: 0px;
    left: 0px;
}

.page .wp-block-group.team-member .wp-block-columns {
    display: flex;
    gap: 12.5%;
}

.page .wp-block-group.team-member .wp-block-columns .wp-block-column {
    box-sizing: border-box;
    padding-left: var( --spacing-gutter-half );
    padding-right: var( --spacing-gutter-half );
}

.page .wp-block-group.team-member .wp-block-columns .wp-block-column:first-child {
    flex-basis: 25%;
}

.page .wp-block-group.team-member .wp-block-columns .wp-block-column:last-child {
    flex-basis: 62.5%;
}


@media only screen and ( max-width: 550px ) {

    .page .wp-block-group.team-member {
        width: 100%;
        margin-left: 0px;
        margin-top: 60px;
    }
    
    .page .wp-block-group.team-member a {
        padding-left: 15px;
    }
    
    .page .wp-block-group.team-member .wp-block-columns {
        flex-direction: column;
        gap: 10px;
    }
    
    .page .wp-block-group.team-member .wp-block-columns .wp-block-column:first-child {
        width: 50%;
    }
    
}


/* ### pattern: job ### */


.page .wp-block-group.job .wp-block-details {
    width: calc( 90% - var( --spacing-gutter ) );
    margin-top: 0px;
}

.page .wp-block-group.job .wp-block-details .wp-block-columns {
    gap: 11.11111111%;
}

.page .wp-block-group.job .wp-block-details .wp-block-columns .wp-block-column:first-child {
    flex-basis: 55.55555555%;
}

.page .wp-block-group.job .wp-block-details .wp-block-columns .wp-block-column:last-child {
    flex-basis: 44.44444444%;
}

.page .wp-block-group.job .wp-block-details h5 {
    font-size: var( --font-small-size );
    line-height: var( --font-small-lineheight );
}

.page .wp-block-group.job .wp-block-details a {
    text-decoration: underline;
}


@media only screen and ( max-width: 550px ) {

    .page .wp-block-group.job .wp-block-details {
        width: calc( 100% - var( --spacing-gutter ) );
    }
    
    .page .wp-block-group.job .wp-block-details .wp-block-columns {
        gap: 0px;
        flex-direction: column;
    }
    
    .page .wp-block-group.job .wp-block-details .wp-block-columns .wp-block-column:first-child {
        flex-basis: 0px;
    }
    
    .page .wp-block-group.job .wp-block-details .wp-block-columns .wp-block-column:last-child {
        flex-basis: 0px;
    }


}



/* ### gallery + tiles + board arrows ### */


.page .wp-block-gallery .wrapper .arrows,
.page .tiles .wrapper .arrows,
.page .wp-block-group.board .wrapper .arrows {
    background-color: var( --color-button );
    position: absolute;
    top: 0px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-image: url( 'graphics/arrow_foldout.svg' );
    background-repeat: no-repeat;
    background-size: 16px auto;
    background-position: center center;
    cursor: pointer;
    border: none;
}

.page .tiles .wrapper .arrows,
.page .wp-block-group.board .wrapper .arrows { 
    top: -45px;
}

.page .wp-block-gallery .wrapper .arrows:hover,
.page .tiles .wrapper .arrows:hover,
.page .wp-block-group.board .wrapper .arrows:hover {
    background-color: var( --color-button-hover );
}

.page .wp-block-gallery .wrapper .arrows.disabled,
.page .tiles .wrapper .arrows.disabled,
.page .wp-block-group.board .wrapper .arrows.disabled {
    pointer-events: none;
    opacity: 0.5;
}

.page .wp-block-gallery .wrapper .arrows.left,
.page .tiles .wrapper .arrows.left,
.page .wp-block-group.board .wrapper .arrows.left {
    right: calc( 12.5% * -1 + 10px + var( --spacing-gutter ) + 40px );
    transform: rotateZ( 90deg );
}

.page .wp-block-gallery .wrapper .arrows.right,
.page .tiles .wrapper .arrows.right,
.page .wp-block-group.board .wrapper .arrows.right {
    right: calc( 12.5% * -1 + 10px );
    transform: rotateZ( -90deg );
}

.page .wp-block-gallery .wrapper .reload {
    background-color: var( --color-button );
    position: absolute;
    top: 0px;
    left: var( --spacing-gutter-half );
    width: auto;
    height: 44px;
    border-radius: 22px;
    cursor: pointer;
    box-sizing: border-box;
    padding-left: var( --spacing-gutter );
    padding-right: var( --spacing-gutter );
    cursor: pointer;
    font: inherit;
    color: inherit;
    border: none;
}

.page .wp-block-gallery .wrapper .reload:hover {
    background-color: var( --color-button-hover );
}


@media only screen and ( max-width: 950px ) {

    .page .wp-block-gallery .wrapper .arrows,
    .page .tiles .wrapper .arrows,
    .page .wp-block-group.board .wrapper .arrows {
        width: 30px;
        height: 30px;
        background-size: 12px auto;
    }
    
    .page .tiles .wrapper .arrows,
    .page .wp-block-group.board .wrapper .arrows { 
        top: -28px;
    }
    
    .page .wp-block-gallery .wrapper .arrows.left, 
    .page .tiles .wrapper .arrows.left, 
    .page .wp-block-group.board .wrapper .arrows.left {
        right: calc( 12.5% * -1 + 5px + var( --spacing-gutter ) + 30px );
    }
    
    .page .wp-block-gallery .wrapper .reload {
        height: 30px;
    }

}



/* page margins ——————————————————————————————————————————————————————————————————————————————————— */


.page > * + * {
    margin-top: 60px;
}

.page p + p,
.page p + h3,
.page h3 + p,
.page ul + p,
.page ol + p {
    margin-top: var( --font-large-lineheight );
}

.page h1 + h4 {
    margin-top: 0px;
}

.page p + h5 {
    margin-top: 20px;
}

.page p.has-small-font-size + p.has-small-font-size,
.page .wp-block-details p + p,
.page .wp-block-list li,
.page ul + p.has-small-font-size,
.page ol + p.has-small-font-size {
    margin-top: var( --font-normal-lineheight );
}

.page p + .wp-block-buttons,
.page h3 + .wp-block-details,
.page h3 + .wp-block-group.job,
.page p + .wp-block-group.job,
.page .wp-block-buttons + .wp-block-buttons {
    margin-top: 60px;
}

.page .wp-block-buttons + .wp-block-buttons {
    margin-top: var( --spacing-gutter );
}

.page .wp-block-details summary + p,
.page .wp-block-details .wrapper p:first-child,
.page .wp-block-details .wrapper h4:first-child,
.page .wp-block-details .wrapper h5:first-child,
.page .wp-block-details .wrapper .wp-block-image:first-child {
    margin-top: 20px;
}

.page .wp-block-details p + .association {
    margin-top: 60px;
}

.page .wp-block-details p:last-child,
.page .wp-block-details ol:last-child,
.page .wp-block-details ul:last-child,
.page .wp-block-details .wrapper p:last-child,
.page .wp-block-details .wrapper .wp-block-image:last-child {
    margin-bottom: 60px;
}

.page .wp-block-buttons + p,
.page .wp-block-buttons + .wp-block-image,
.page .wp-block-buttons + .wp-block-gallery,
.page .wp-block-buttons + h3,
.page p + .wp-block-image,
.page .wp-block-image + p,
.page p + .wp-block-gallery,
.page .wp-block-gallery + p,
.page p + h3,
.page .wp-block-details + h3,
.page .wp-block-group + h3,
.page .wp-block-buttons + .map,
.page .tiles + .map,
.page ul + h3,
.page ol + h3 {
    margin-top: 120px;
}

.page .tiles + h3 {
    margin-top: 200px;
}


@media only screen and ( max-width: 950px ) {

    .page p + .wp-block-buttons,
    .page h3 + .wp-block-details,
    .page h3 + .wp-block-group.job,
    .page p + .wp-block-group.job {
        margin-top: 30px;
    }
    
    .page .wp-block-details summary + p,
    .page .wp-block-details .wrapper p:first-child,
    .page .wp-block-details .wrapper h4:first-child,
    .page .wp-block-details .wrapper h5:first-child,
    .page .wp-block-details .wrapper .wp-block-image:first-child {
        margin-top: 0px;
    }
    
    .page .wp-block-details p:last-child,
    .page .wp-block-details ol:last-child,
    .page .wp-block-details ul:last-child,
    .page .wp-block-details .wrapper p:last-child {
        margin-bottom: 14px;
    }

    .page .wp-block-buttons + p,
    .page .wp-block-buttons + .wp-block-image,
    .page .wp-block-buttons + .wp-block-gallery,
    .page .wp-block-buttons + h3,
    .page p + .wp-block-image,
    .page .wp-block-image + p,
    .page p + .wp-block-gallery,
    .page .wp-block-gallery + p,
    .page p + h3,
    .page .wp-block-details + h3,
    .page .wp-block-group + h3,
    .page .wp-block-buttons + .map,
    .page .tiles + .map,
    .page ul + h3,
    .page ol + h3 {
        margin-top: 60px;
    }

    .page p + h3,
    .page .wp-block-details + h3,
    .page .wp-block-group + h3,
    .page .tiles + .map {
        margin-top: 80px;
    }
    
    .page .tiles + h3 {
        margin-top: 80px;
    }
    
}



/* footer ————————————————————————————————————————————————————————————————————————————————————————— */


footer {
    box-sizing: border-box;
    padding-left: var( --spacing-margin );    
    padding-right: var( --spacing-margin );  
}

footer .area {
    border-top: 1px solid black;
    display: flex;
    gap: var( --spacing-gutter );
    padding-top: 50px;
    padding-bottom: 50px;
}

footer .area .left,
footer .area .mid {
    width: 40%;
}

footer .area .right {
    width: 20%;
}

footer a {
    text-decoration: underline;
}

footer button {
    font: inherit;
    background-color: transparent;
    color: inherit;
    border: none;
    text-decoration: underline;
    cursor: pointer;
}

footer .area.newsletter h3 {
    font-size: var( --font-large-size );
    line-height: var( --font-large-lineheight );
    margin-top: -5px;
}

footer .area.newsletter .modal {
    width: calc( 60% + var( --spacing-gutter ) );
    display: none;
}

footer .area.newsletter .modal .submitted,
footer .area.newsletter .modal .failed,
footer .area.newsletter .modal .duplicate {
    display: none;
}

footer .area.newsletter .modal .title_wrapper {
    display: flex;
    gap: var( --spacing-gutter );
    justify-content: space-between;
}

footer .area.newsletter .modal input {
    display: block;
    font: inherit;
    background-color: transparent;
    margin: 0px;
    padding: 0px;
    border: none;
    outline: none;
    border-bottom: 1px solid black;
    width: 100%;
    padding-top: 10px;
    padding-bottom: 10px;
    margin-top: 20px;
    border-radius: 0px;
}

footer .area.newsletter .modal button {
    height: 44px;
    border-radius: 22px;
    box-sizing: border-box;
    padding: 0px;
    padding-left: 30px;
    padding-right: 30px;
    background-color: var( --color-button );
    cursor: pointer;
    font: inherit;
    border: none;
    color: black;
    text-decoration: none;
}

footer .area.newsletter .modal button:hover {
    background-color: var( --color-button-hover );
}

footer .area.newsletter .submit_wrapper p {
    font-size: var( --font-small-size );
    line-height: var( --font-small-lineheight );
    padding-top: 30px;
    padding-bottom: 30px;
    width: 60%;
}

footer .area.newsletter.modalactive .modal {
    display: block;
}

footer .area.newsletter.modalactive .mid,
footer .area.newsletter.modalactive .right {
    display: none;
}

footer .area.contact .right {
    display: flex;
    gap: var( --spacing-gutter );
}

footer .area.contact img {
    display: block;
    padding: 0px;
    margin: 0px;
    width: 25px;
    height: 25px;
}

footer .area.sponsors .mid,
footer .area.partners .mid {
    width: 40%;
}

footer .area.sponsors .mid {
    display: flex;
    flex-direction: column;
    gap: 50px;
}

footer .area.sponsors .mid .wp-block-image {
    position: relative;
    width: 100%;
}

footer .area.sponsors .mid .wp-block-image img {
    display: block;
    padding: 0px;
    margin: 0px;
    width: 40%;
    height: auto;
}

footer .area.partners .mid p {
    width: 75%;
}


@media only screen and ( max-width: 950px ) {

    footer .area.newsletter .modal button {
        height: 30px;
        border-radius: 15px;
        padding-left: var( --spacing-gutter );
        padding-right: var( --spacing-gutter );
    }
    
}


@media only screen and ( max-width: 550px ) {

    footer .area { 
        flex-direction: column;
        padding-top: 20px;
        padding-bottom: 20px;
        gap: 20px;
    }
    
    footer .area .left,
    footer .area .mid,
    footer .area .right,
    footer .area.sponsors .mid,
    footer .area.partners .mid {
        width: 100%;
    }
    
    footer .area.newsletter .modal {
        width: 100%;
    }
    
    footer .area.newsletter .submit_wrapper p,
    footer .area.partners .mid p {
        width: 100%;
    }
    
}