/*

    Sammlung Wemhöner
    
    Design: BOROS
    Entwicklung: Leon Klaßen—www.leonklassen.com
    
    2025–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: bold;
}

i, em {
    font-style: italic;
}

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



/* ### FONTS ### */


@font-face {
    font-family: 'YetGrotesk';
    font-style: normal;
    font-weight: normal;
    src: url( 'fonts/YetGrotesk/for-yetgroteskweb-regular.woff2' ) format( 'woff2' );
}

@font-face {
    font-family: 'YetGrotesk';
    font-style: italic;
    font-weight: normal;
    src: url( 'fonts/YetGrotesk/for-yetgroteskweb-italic.woff2' ) format( 'woff2' );
}

@font-face {
    font-family: 'YetGrotesk';
    font-style: normal;
    font-weight: bold;
    src: url( 'fonts/YetGrotesk/for-yetgroteskweb-bold.woff2' ) format( 'woff2' );
}

@font-face {
    font-family: 'YetGrotesk';
    font-style: italic;
    font-weight: bold;
    src: url( 'fonts/YetGrotesk/for-yetgroteskweb-bolditalic.woff2' ) format( 'woff2' );
}

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

@font-face {
    font-family: 'Teodor';
    font-style: italic;
    font-weight: normal;
    src: url( 'fonts/Teodor/Teodor-RegularItalic.woff2' ) format( 'woff2' );
}

@font-face {
    font-family: 'Teodor';
    font-style: normal;
    font-weight: bold;
    src: url( 'fonts/Teodor/Teodor-Bold.woff2' ) format( 'woff2' );
}

@font-face {
    font-family: 'Teodor';
    font-style: italic;
    font-weight: bold;
    src: url( 'fonts/Teodor/Teodor-BoldItalic.woff2' ) format( 'woff2' );
}



/* ### VARS ### */


:root {

    --color-dark: #000000;
    --color-light: #ffffff;
        
    --font-extrasmall-size: 1.25rem;
    --font-extrasmall-lineheight: 1em;
    
    --font-small-size: 1.5625rem;
    --font-small-lineheight: 1em;
    
    --font-normal-size: 1.875rem;
    --font-normal-lineheight: 1.15em;

    --font-large-size: 3.125rem;
    --font-large-lineheight: 1.2em;
    --font-large-lineheight-reduced: 1em;

    --font-extralarge-size: 6.125rem;
    --font-extralarge-lineheight: 1.1em;
    --font-extralarge-lineheight-reduced: 1em;
    
    --margin-large: 150px;
    --margin-extralarge: 200px;

    --padding-side: 40px;
    
}


@media ( max-width: 950px ) {
    
    :root {
    
        --font-small-size: 1rem;
        --font-small-lineheight: 1em;
        
        --font-normal-size: 1.25rem;
        --font-normal-lineheight: 1.25em;
    
        --font-large-size: 1.5625rem;
        --font-large-lineheight: 1.15em;
        --font-large-lineheight-reduced: 1em;
    
        --font-extralarge-size: 1.5625rem;
        --font-extralarge-lineheight: 1.15em;
        --font-extralarge-lineheight-reduced: 1em;
        
        --margin-large: 100px;
        --margin-extralarge: 100px;

        --padding-side: 20px;
    
    }
    
}



/* ### GENERAL ### */


body {
    margin: 0px;
    padding: 0px;
    font-size: var( --font-normal-size );
    line-height: var( --font-normal-lineheight );
    font-family: 'YetGrotesk', sans-serif;
    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-weight: bold;
}

em {
    font-style: italic;
}

button:focus-visible,
a:focus-visible,
*[tabindex = "0"]:focus-visible {
    outline: 3px solid blue;
    outline-offset: 3px;
    border-radius: 5px;
}



/* ### COMPONENT ### */


button.component-button,
a.component-button {
    display: inline-block;
    font-family: 'Teodor', serif;
    position: relative;
    cursor: pointer;
    padding-right: 59px;
    transition: filter .4s;
}

button.component-button.download,
a.component-button.download {
    padding-right: 52px;
}

@media (hover: hover) {

    button.component-button:hover,
    a.component-button:hover {
        filter: blur( 3px );
    }

}

@media (hover: hover) and (prefers-contrast: more) {

    button.component-button:hover,
    a.component-button:hover {
        filter: none;
    }

}

@media (hover: hover) {
    
    body.mode-highcontrast button.component-button:hover,
    body.mode-highcontrast a.component-button:hover {
        filter: none;
    }

}

button.component-button::after,
a.component-button::after {
    content: "→";
    display: block;
    position: absolute;
    width: 44px;
    top: -4px;
    right: 0px;
    font-size: 3.75rem;
}

button.component-button.download::after,
a.component-button.download::after {
    content: "↓";
    width: 32px;
}

p.component-badge {
    font-family: 'YetGrotesk', sans-serif !important;
    font-size: var( --font-small-size );
    line-height: var( --font-small-lineheight );
    border: 1px solid var( --color-dark );
    padding: 10px 15px 10px 15px;
    border-radius: 15px;
    width: fit-content;
}


@media ( max-width: 950px ) {

    button.component-button::after,
    a.component-button::after {
        font-size: 2rem;
        top: -2px;
    }
    
    p.component-badge {
        padding: 5px 15px 5px 15px;
        border-radius: 12px;
    }
    
}



/* ### HEADER ### */


header {
    position: fixed;
    z-index: 100;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100px;    
    backdrop-filter: blur( 3px );
    background-color: #BDBDBD80;
    display: flex;
    gap: var( --padding-side );
    justify-content: flex-end;
    padding-left: var( --padding-side );
    padding-right: var( --padding-side );
    transition: backdrop-filter .4s, background-color .4s;
}

@media (prefers-contrast: more) {

    header {
        background-color: white;
    }

}

body.mode-highcontrast header {
    background-color: white;
}

/*header.admin {
    top: 32px;
}*/

header.light {
    backdrop-filter: none;
    background-color: transparent;
}

header .logolink {
    display: block;
    position: absolute;
    left: var( --padding-side );
    width: auto;
    height: 56px;
    top: 22px;
}

header .logo {
    display: block;
    position: relative;
    width: auto;
    height: 100%;
    transition: opacity .4s;
}

header.light .logo {
    opacity: 0;
}

header.can-morph .logo {
    transition: filter .4s;
    filter: invert();
}

@media (prefers-contrast: more) {

    header.can-morph .logo {
        filter: none;
    }

}

body.mode-highcontrast header.can-morph .logo {
    filter: none;
}

header.can-morph:not( .light ) .logo {
    filter: none;
}

header.light.morph .logo {
    opacity: 1;
}

header .menu-button,
header .portal-button {
    width: fit-content;
    color: var( --color-dark );
    right: var( --padding-side );
    margin-top: 10px;
    margin-bottom: 10px;
    text-transform: uppercase;
    cursor: pointer;
    transition: color .4s;
}

header .portal-button {
    display: flex;
    align-items: center;
}

header.light .menu-button,
header.light .portal-button {
    color: var( --color-light );
}

@media (prefers-contrast: more) {

    header.light .menu-button,
    header.light .portal-button {
        color: var( --color-dark );
    }

}

body.mode-highcontrast header.light .menu-button,
body.mode-highcontrast header.light .portal-button {
    color: var( --color-dark );
}

nav.main-menu {
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    z-index: 110;
    background: linear-gradient( #ebebebb3, #C4C4C4E5 );
    backdrop-filter: blur( 20px );
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    opacity: 0;
    transition: opacity .4s;
}

@media (prefers-contrast: more) {

    nav.main-menu {
        background: var( --color-dark );
        backdrop-filter: none;
    }

}

body.mode-highcontrast nav.main-menu {
    background: var( --color-dark );
    backdrop-filter: none;
}

nav.main-menu.visible {
    opacity: 1;
}

nav.main-menu .bar {
    position: relative;
    display: flex;
    align-items: center;
    height: 100px;
    margin-bottom: auto;
    padding: 0px var( --padding-side );
    gap: 30px;
    color: var( --color-light );
    text-transform: uppercase;
    flex-shrink: 0;
    padding-right: calc( var( --padding-side ) + 45px + var( --padding-side ) );
}

nav.main-menu .bar .logolink {
    display: block;
    margin-right: 45px;
}

nav.main-menu .bar .logo {
    display: block;
    width: auto;
    height: 56px;
}

nav.main-menu .language-menu {
    display: flex;
    gap: 10px;
    align-items: center;
}

nav.main-menu .language-menu .language-button.active {
    padding-top: 3px;
    border-bottom: 3px solid var( --color-light );
}

nav.main-menu .secundary-menu {
    display: flex;
    gap: 30px;
}

nav.main-menu .contrast-button {
    position: relative;
    text-transform: uppercase;
    padding-right: 75px;
    cursor: pointer;
}

nav.main-menu .contrast-button::after {
    content: "";
    display: block;
    position: absolute;
    right: 0px;
    top: 0px;
    width: 65px;
    height: 34px;
    border: 3px solid var( --color-light );
    border-radius: 100vw;
}

nav.main-menu .contrast-button::before {
    content: "";
    display: block;
    position: absolute;
    right: 37px;
    top: 6px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background-color: var( --color-light );
    transition: right .4s;
}

@media ( prefers-reduced-motion ) {

    nav.main-menu .contrast-button::before {
        transition: none;
    }

}

nav.main-menu .contrast-button[aria-pressed="true"]::before {
    right: 6px;
}

nav.main-menu .close-button {
    position: absolute;
    right: var( --padding-side );
    top: 24px;
    width: 45px;
    height: 45px;
    cursor: pointer;
    z-index: 10;
}

nav.main-menu .close-button::before,
nav.main-menu .close-button::after {
    content: "";
    display: block;
    position: absolute;
    left: 0px;
    top: 21px;
    width: 100%;
    height: 3px;
    background-color: var( --color-light );
}

nav.main-menu .close-button::before {
    rotate: 45deg;
}

nav.main-menu .close-button::after {
    rotate: -45deg;
}

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

nav.main-menu .menu-wrapper ul.primary-menu {
    padding: 50px var( --padding-side ) 50px var( --padding-side );
}

nav.main-menu .menu-wrapper ul {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

nav.main-menu .menu-wrapper ul li {
    font-size: 6.25rem;
    line-height: 1em;
    text-transform: uppercase;
    color: var( --color-light );
}

nav.main-menu.world .menu-wrapper ul.primary-menu > li {
    display: none;
}

nav.main-menu.world.hasenheide-13 .menu-wrapper ul.primary-menu > li.hasenheide-13,
nav.main-menu.world.schaudepot .menu-wrapper ul.primary-menu > li.schaudepot,
nav.main-menu.world.sammlung .menu-wrapper ul.primary-menu > li.sammlung,
nav.main-menu.world.wemhoener-collection .menu-wrapper ul.primary-menu > li.sammlung {
    display: block;
}

nav.main-menu .menu-wrapper ul li.only-mobile {
    display: none;
}

nav.main-menu.world .menu-wrapper ul.primary-menu > li > a {
    display: none;
}

nav.main-menu .menu-wrapper ul li a {
    transition: filter .4s;
}

@media (hover: hover) {

    nav.main-menu .menu-wrapper ul li a:hover {
        filter: blur( 2px );
    }

}

@media (hover: hover) and (prefers-contrast: more) {

    nav.main-menu .menu-wrapper ul li a:hover {
        filter: none;
    }

}

@media (hover: hover) {
    
    body.mode-highcontrast nav.main-menu .menu-wrapper ul li a:hover {
        filter: none;
    }

}

nav.main-menu.world .menu-wrapper ul.primary-menu ul.sub-menu ul.sub-menu {
    margin-top: 10px;    
    display: none;
}

nav.main-menu.world .menu-wrapper ul.primary-menu ul.sub-menu ul.sub-menu.extended {
    display: flex;
}

nav.main-menu.world .menu-wrapper ul.primary-menu ul.sub-menu ul.sub-menu li {
    font-size: var( --font-normal-size );
    line-height: var( --font-normal-lineheight );   
}

nav.main-menu .mobile-wrapper {
    display: none;
    overflow: hidden;
    padding: 50px var( --padding-side ) 50px var( --padding-side );
    color: var( --color-light );
    text-transform: uppercase;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    flex-shrink: 0;
}

@media ( max-width: 1000px ) {

    nav.main-menu .bar .secundary-menu {
        display: none;
    }

    nav.main-menu .bar .contrast-button {
        display: none;
    }
    
    nav.main-menu .bar .language-menu {
        display: none;
    }
    
    nav.main-menu .mobile-wrapper {
        display: flex;
    }
    
    nav.main-menu .menu-wrapper ul li {
        font-size: var( --font-large-size );
        line-height: var( --font-large-lineheight );    
    }
    
}

@media ( max-width: 950px ) {

    nav.main-menu .language-menu .language-button.active {
        border-bottom-width: 2px;
    }
    
    nav.main-menu .contrast-button {
        padding-right: 55px;
    }
    
    nav.main-menu .contrast-button::after {
        width: 45px;
        height: 24px;
        border: 2px solid var( --color-light );
    }
    
    nav.main-menu .contrast-button::before {
        right: 25px;
        top: 4px;
        width: 16px;
        height: 16px;
    }
    
    nav.main-menu .contrast-button[aria-pressed="true"]::before {
        right: 4px;
    }
    
}

@media ( max-width: 550px ) {

    header .portal-button {
        display: none;
    }
    
    nav.main-menu .menu-wrapper ul li.only-mobile,
    nav.main-menu .menu-wrapper ul li.only-mobile a {
        display: block !important;
    }
        
}



/* ### MAIN ### */


main:not( :has( section.hero, section.portal ) ) {
    padding-top: 100px;
}



/* ### PORTAL ### */


section.portal {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
}

section.portal .tile {
    position: relative;
    width: 50%;
    aspect-ratio: 1;
    overflow: hidden;
    max-height: 66svh;
}

section.portal .tile.large {
    width: 100%;
    aspect-ratio: 2 / 1;
}

section.portal .tile.large::after {
    /* block the click in the top 2/3ds */
    content: "";
    display: block;
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 60%;
}

section.portal .tile .background-image {
    position: absolute;
    inset: 0px;
    aspect-ratio: 1;
    width: 100%;
    height: auto;
    object-fit: cover;
}

section.portal .tile.large .background-image {
    aspect-ratio: 2 / 1;
}

section.portal .tile a {
    display: block;
    aspect-ratio: 1;
    width: 100%;
    height: auto;
    max-height: 66svh;
    backdrop-filter: brightness( 90% ) blur( 3px );
    transition: backdrop-filter .4s;
}

@media (hover: none) {
    
    section.portal .tile a {
        backdrop-filter: brightness( 90% );
    }
}

section.portal .tile a:focus-visible {
    outline-offset: -6px;
}

section.portal .tile.large a {
    aspect-ratio: 2 / 1;
}

@media (hover: hover) {

    section.portal .tile a:hover {
        backdrop-filter: brightness( 90% );
    }

}

@media (prefers-contrast: more) {
    
    section.portal .tile a {
        backdrop-filter: brightness( 30% ) blur( 3px );
    }

}

body.mode-highcontrast section.portal .tile a {
    backdrop-filter: brightness( 30% ) blur( 3px );
}

@media (hover: hover) and (prefers-contrast: more) {

    section.portal .tile a:hover {
        backdrop-filter: brightness( 30% );
    }

}

@media (hover: hover) {

    body.mode-highcontrast section.portal .tile a:hover {
        backdrop-filter: brightness( 30% );
    }

}

section.portal .tile a::before {
    content: "→";
    display: block;
    position: absolute;
    font-family: 'Teodor', serif;
    right: 6%;
    top: calc( 3% - 0.18em );
    font-size: 9.375rem;
    line-height: 1em;
    color: var( --color-light );
    opacity: 0;
    transition: opacity .4s;
}

section.portal .tile.large a::before {
    top: auto;
    bottom: 2.5%;
    right: 3%;
}

@media (hover: hover) {

    section.portal .tile a:hover::before {
        opacity: 1;
    }

}

section.portal .tile a:focus-visible::before {
    opacity: 1;
}

section.portal .tile .logo {
    display: block;
    position: absolute;
    left: 6%;
    top: 4.5%;
    height: 23.5%;
    transition: opacity .4s;
}

section.portal .tile.large .logo {
    left: 3%;
    top: auto;
    bottom: 6%;
    height: 62%;
}

@media (hover: hover) {

    section.portal .tile a:hover .logo {
        opacity: 0;
    }

}

section.portal .tile a:focus-visible .logo {
    opacity: 0;
}

section.portal .tile h2 {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    font-family: 'Teodor', serif;
    font-size: var( --font-large-size );
    line-height: var( --font-large-lineheight );
    color: var( --color-light );
    padding: 3% calc( 6% + 105px + 35px ) 0px 6%;
    text-wrap: balance;
    opacity: 0;
    transition: opacity .4s;
}

section.portal .tile.large h2 {
    top: auto;
    bottom: 0px;
    padding: 0px calc( 3% + 105px + 35px ) 2.5% 3%;
}

@media (hover: hover) {
    
    section.portal .tile a:hover h2 {
        opacity: 1;
    }

}

section.portal .tile a:focus-visible h2 {
    opacity: 1;
}

@media ( max-width: 550px ) {

    section.portal .tile {
        width: 100%;
        aspect-ratio: 2 / 1;
    }

    section.portal .tile.large {
        width: 100%;
        aspect-ratio: 1 / 1.5;
    }
    
    section.portal .tile .background-image,
    section.portal .tile a {
        aspect-ratio: 2 / 1;
    }
    
    section.portal .tile.large .background-image,
    section.portal .tile.large a {
        aspect-ratio: 1 / 1.5;
    }

    section.portal .tile .logo {
        left: 6%;
        top: auto;
        bottom: 12%;
        height: 35%;
    }
    
    section.portal .tile.large .logo {
        left: 6%;
        top: auto;
        bottom: 4%;
        height: 20%;
    }

}



/* ### HERO ### */


section.hero {
    position: relative;
    background-size: cover;
    background-position: center center;   
    width: 100%;
    height: auto;
}

section.hero .background-image {
    display: block;
    position: relative;
    width: 100%;
    height: 100svh;
    max-height: 1000px;
    object-fit: cover;
}

section.hero.reduced .background-image {
    height: auto;
    max-height: unset;
    aspect-ratio: 2 / 1 !important;
}

section.hero .logo {
    display: block;
    position: absolute;
    left: var( --padding-side );
    top: auto;
    bottom: 50px;
    width: auto;
    height: calc( 100vw / 1.33 / 2.36 );
}

.page.sammlung section.hero .logo,
.page.wemhoener-collection section.hero .logo {
    height: auto;
    width: calc( 100% - var( --padding-side ) - var( --padding-side ) );
}

section.hero .back-button {
    position: absolute;
    left: calc( var( --padding-side ) - 5px );
    top: 10px;
    width: 100px;
    height: 100px;
    z-index: 105;
}

section.hero .back-button::after {
    content: "←";
    display: block;
    position: absolute;
    font-family: 'Teodor', serif;
    font-size: 9.375rem;
    line-height: 1em;
    color: var( --color-light );
    top: -34px;
    pointer-events: none;
}


@media ( max-width: 550px ) {

    section.hero .background-image {
        max-height: 66svh;   
    }
    
    section.hero.reduced .background-image {
        aspect-ratio: 3 / 4 !important;
    }

}



/* ### PAGE ### */


section.page {
    margin-top: var( --margin-large );
    margin-bottom: var( --margin-large );
}

section.page:first-child {
    margin-top: 50px;
}

section.page:has( .intro:first-child ) {
    margin-top: 100px;
}

section.page:has( aside.newsletter:last-child ) {
    margin-bottom: 0px;
}

section.page.exhibition,
section.page.event,
section.page.publication {
    margin-top: 40px;
}

section.page > * {
    margin-left: var( --padding-side );
    margin-right: var( --padding-side );
}



/* ### PAGE: HEADLINE ### */


section.page h1 {
    font-size: var( --font-normal-size );
    line-height: var( --font-normal-lineheight );
    margin-bottom: 50px;
    text-transform: uppercase;
}

section.page.exhibition h1,
section.page.event h1,
section.page.publication h1 {
    font-size: var( --font-extralarge-size );
    line-height: var( --font-extralarge-lineheight );
    text-transform: none;
}

section.page h2 {
    font-size: var( --font-large-size );
    line-height: var( --font-large-lineheight );
    margin-top: var( --margin-large );
    margin-bottom: 50px;
}

@media ( max-width: 550px ) {

    section.page h1 {
        margin-bottom: 40px;
    }
    
    section.page h2 {
        margin-bottom: 40px;
    }

}



/* ### PAGE: PARAGRAPH ### */


section.page p {
    font-family: 'Teodor', serif;
}

section.page p:not( :first-child ) {
    margin-top: var( --font-normal-lineheight );
}

section.page p:not( :last-child ) {
    margin-bottom: var( --font-normal-lineheight );
}

section.page p.has-large-font-size {
    font-size: var( --font-large-size );
    line-height: var( --font-large-lineheight );
}

section.page p.date {
    font-family: 'Teodor', serif;
    font-size: var( --font-large-size );
    line-height: var( --font-large-lineheight );
    margin-bottom: 0px;
}

section.page p strong {
    font-family: 'YetGrotesk', sans-serif;
    font-weight: normal;
}

section.page p a:not( .component-button ) {
    text-decoration: underline;
}



/* ### PAGE: TABLE ### */


section.page .wp-block-table {
    font-family: 'Teodor', serif;
}

section.page .wp-block-table:not( :first-child ) {
    margin-top: var( --font-normal-lineheight );
}

section.page .wp-block-table:not( :last-child ) {
    margin-bottom: var( --font-normal-lineheight );
}

section.page .wp-block-table tr {
    display: flex;
    gap: 40px;
}

section.page .wp-block-table tr + tr {
    margin-top: 25px;
}

section.page .wp-block-table tr td:first-child {
    text-wrap: nowrap;
    min-width: 100px;
}



/* ### PAGE: COLUMNS ### */


section.page .wp-block-columns {
    display: flex;
    gap: 10px;
}

section.page.presse .wp-block-columns {
    gap: 20px;
}

section.page .wp-block-columns .wp-block-column {
    flex-basis: 0;
    flex-grow: 1;
    margin-bottom: -50px;
}

section.page .wp-block-columns .wp-block-column .container {
    position: sticky;
    padding-bottom: 50px;
}

section.page.exhibition .wp-block-columns:not( .shifted-columns ) .wp-block-column:first-child .container,
section.page.event .wp-block-columns:not( .shifted-columns ) .wp-block-column:first-child .container,
section.page.publication .wp-block-columns:not( .shifted-columns ) .wp-block-column:first-child .container {
    padding-right: 100px;
}

section.page .wp-block-columns .wp-block-column.metadata strong {
    font-family: 'YetGrotesk', sans-serif;
    text-transform: uppercase;
    font-weight: normal;
    font-size: 1.5625rem;
    line-height: 1em;
}

section.page.presse p + .wp-block-columns {
    margin-top: var( --margin-large );
}

section.page.presse .wp-block-columns:has( + p ) {
    margin-bottom: var( --margin-large );
}

section.page .wp-block-columns.shifted-columns .wp-block-column:nth-child( 1 ) {
    margin-top: 50px;
}

section.page .wp-block-columns.shifted-columns .wp-block-column:nth-child( 2 ) {
    margin-top: 100px;
}

section.page .wp-block-columns.shifted-columns .wp-block-column:nth-child( 4 ) {
    margin-top: 150px;
}


@media ( max-width: 800px ) {

    section.page .wp-block-columns:not( .shifted-columns ) {
        flex-direction: column;
        gap: 60px;
    }
    
    section.page.exhibition .wp-block-columns:not( .shifted-columns ) .wp-block-column:first-child .container,
    section.page.event .wp-block-columns:not( .shifted-columns ) .wp-block-column:first-child .container,
    section.page.publication .wp-block-columns:not( .shifted-columns ) .wp-block-column:first-child .container {
        padding-right: 0px;
    }
    
    section.page .wp-block-columns.shifted-columns {
        flex-wrap: wrap;    
    }
    
    section.page .wp-block-columns.shifted-columns .wp-block-column {
        min-width: calc( 50% - 10px );
    }
    
    section.page .wp-block-columns.shifted-columns .wp-block-column:nth-child( 1 ) {
        margin-top: 0px;
    }
    
    section.page .wp-block-columns.shifted-columns .wp-block-column:nth-child( 2 ) {
        margin-top: 50px;
    }
    
    section.page .wp-block-columns.shifted-columns .wp-block-column:nth-child( 3 ),
    section.page .wp-block-columns.shifted-columns .wp-block-column:nth-child( 4 ) {
        margin-top: 40px;
    }
    
}



/* ### PAGE: IMAGE ### */


section.page .wp-block-image {
    position: relative;    
}

section.page .wp-block-image:not( :first-child ) {
    margin-top: 40px;
}

section.page .wp-block-image:not( :last-child ) {
    margin-bottom: 40px;
}

section.page .wp-block-image:not( :has( figcaption ) ) + .wp-block-image {
    margin-top: 10px;
}

section.page .wp-block-image:not( :has( figcaption ) ):has( + .wp-block-image ) {
    margin-bottom: 10px;
}

section.page h2.wp-block-heading + .wp-block-image {
    margin-top: 50px;
}

section.page .wp-block-image figcaption {
    font-size: var( --font-extrasmall-size );
    line-height: var( --font-extrasmall-lineheight );
    font-family: 'Teodor', serif;
    margin-top: 10px;
    -moz-text-size-adjust: none;
    -webkit-text-size-adjust: none;
    text-size-adjust: none;
}

section.page .wp-block-image .caption-download-wrapper {
    display: flex;
    gap: 20px;
    justify-content: space-between;
    margin-top: 40px;
}

section.page .wp-block-image .caption-download-wrapper figcaption {
    margin-top: 0px;
}

section.page .wp-block-image .caption-download-wrapper .component-button.download {
    margin-top: 10px;
}

section.page .wp-block-image img {
    display: block;
    width: 100%;
    height: auto;
}

section.page div.wp-block-image {
    display: flex; 
}

section.page div.wp-block-image figure {
    width: 66.666666%;
}

section.page div.wp-block-image figure.alignright {
    margin-left: auto;
    padding-left: 5px;
}

section.page div.wp-block-image figure.alignleft {
    margin-right: auto;
    padding-right: 5px;
}

section.page .wp-block-cover,
section.page .wp-block-image.cover {
    margin-left: 0px;
    margin-right: 0px;    
}

section.page .wp-block-cover img,
section.page .wp-block-image.cover img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 2 / 1;
    object-fit: cover;
}

section.page .wp-block-image a {
    display: block;
}

section.page .wp-block-image:has( a:not( .component-button ) )::before {
    content: "";
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    background: linear-gradient( transparent, rgba( 0, 0, 0, 0.15 ) );
    z-index: 1;
    opacity: 0;
    transition: opacity .4s;
    pointer-events: none;
}

@media (hover: hover) {
    
    section.page .wp-block-image:has( a:hover )::before {
        opacity: 1;
    }

}

section.page .wp-block-image:has( a:not( .component-button ) )::after {
    content: "→";
    display: block;
    position: absolute;
    font-family: 'Teodor', serif;
    left: 35px;
    bottom: 10px;
    font-size: 9.375rem;
    line-height: 1em;
    color: var( --color-light );
    z-index: 2;
    translate: 0px 50px;
    opacity: 0;
    transition: opacity .4s, translate .4s;
    pointer-events: none;
}

@media ( prefers-reduced-motion ) {

    section.page .wp-block-image:has( a:not( .component-button ) )::after {
        transition: opacity .4s;
    }

}

@media (hover: hover) {

    section.page .wp-block-image:has( a:hover )::after {
        opacity: 1;
        translate: none;
    }

}

@media ( max-width: 550px ) {
    
    section.page div.wp-block-image figure {
        width: 100%;
        padding-left: 0px !important;
        padding-right: 0px !important;
    }
    
    section.page h2.wp-block-heading + .wp-block-image {
        margin-top: 40px;   
    }

}



/* ### PAGE: GALLERY ### */


section.page .wp-block-gallery {
    position: relative;    
    overflow: hidden;
    margin-left: 0px;
    margin-right: 0px;
}

section.page .wp-block-gallery:not( :first-child ) {
    margin-top: var( --margin-extralarge );
}

section.page .wp-block-gallery:not( :last-child ) {
    margin-bottom: var( --margin-extralarge );
}

section.page .wp-block-gallery .wrapper {
    margin-left: var( --padding-side );
    margin-right: var( --padding-side );
    padding-top: 84px;
    --largest-ratio: 1;
}

section.page .wp-block-gallery .strip {
    display: flex;
    gap: 20px;
    width: fit-content;
    transition: transform .4s;
}

@media ( prefers-reduced-motion ) {

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

}

section.page .wp-block-gallery .strip figure {
    margin-top: 0px;
    margin-bottom: 0px;
    width: min-content;
}

section.page .wp-block-gallery .strip figure img {
    height: min( 35vw, calc( ( 100vw - ( var( --padding-side ) * 2 ) ) / var( --largest-ratio ) ) );
    width: auto;    
    aspect-ratio: auto;
}

section.page .wp-block-gallery .wrapper .arrows {
    width: 44px;
    position: absolute;
    height: 44px;
    top: 0px;
    right: var( --padding-side );
    font-family: 'Teodor', serif;
    font-size: 3.75rem;
    cursor: pointer;
    transition: opacity .5s;
}

section.page .wp-block-gallery .wrapper .arrows.left {
    right: calc( var( --padding-side ) + 59px );
}

section.page .wp-block-gallery .wrapper .arrows::before {
    display: block;
    position: absolute;
    top: 2px;
    left: 0px;
    width: 100%;
    text-align: center;
}

section.page .wp-block-gallery .wrapper .arrows.right::before {
    content: "→";
}

section.page .wp-block-gallery .wrapper .arrows.left::before {
    content: "←";
}

section.page .wp-block-gallery .wrapper .arrows.disabled {
    opacity: 0.1;
}

@media (prefers-contrast: more) {

    section.page .wp-block-gallery .wrapper .arrows.disabled {
        opacity: 0;
    }

}

body.mode-highcontrast section.page .wp-block-gallery .wrapper .arrows.disabled {
    opacity: 0;
}

@media ( max-width: 550px ) {

    /*section.page .wp-block-gallery .wrapper {
        margin-left: 0px;
    }*/
        
    section.page .wp-block-gallery .wrapper .arrows {
        right: auto;
        left: var( --padding-side );
    }
    
    section.page .wp-block-gallery .wrapper .arrows.right {
        left: calc( var( --padding-side ) + 59px );
    }

    section.page .wp-block-gallery .strip {
        gap: 10px;
    }
    
    section.page .wp-block-gallery .strip figure img {
        height: min( 100vw, calc( ( 100vw - ( var( --padding-side ) * 2 ) ) / var( --largest-ratio ) ) );
    }
    
}


/* ### PAGE: VIDEO ### */


section.page .wp-block-video {
    position: relative;
    margin-left: 0px;
    margin-right: 0px;
}

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

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

section.page h2.wp-block-heading + .wp-block-video {
    margin-top: 50px;
}

section.page .wp-block-video video {
    display: block;
    width: 100%;
    height: auto;
}



/* ### PAGE: EMBED ### */


section.page .wp-block-embed {
    position: relative;
    margin-left: 0px;
    margin-right: 0px;
}

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

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

section.page h2.wp-block-heading + .wp-block-embed {
    margin-top: 50px;
}

section.page .wp-block-embed .wp-block-embed__wrapper {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
}

section.page .wp-block-embed iframe {
    position: absolute;
    inset: 0px;
    width: 100%;
    height: 100%;
}



/* ### PAGE: INTRO ### */


section.page .intro {
    position: relative;
    width: 100%;
    min-height: 100vh;
    /*max-height: 1000px;*/
    margin-top: 100px;
    margin-bottom: 100px;
    margin-left: 0px;
    margin-right: 0px;
}

section.page .intro div {
    position: sticky;
    top: 200px;
    margin-top: 0px;
    padding: 0px 100px 0px var( --padding-side );
    font-family: 'Teodor', serif;
    font-size: var( --font-large-size );
    line-height: var( --font-large-lineheight );
}

section.page .intro div p + p {
    margin-top: var( --font-large-lineheight );
}


@media ( max-width: 550px ) {

    section.page .intro div { 
        padding: 0px var( --padding-side ) 0px var( --padding-side );
    }
    
}



/* ### PAGE: FULLSIZE EXHIBITIONS ### */


section.page .fullsize-exhibitions {
    margin-top: var( --margin-extralarge );
    margin-bottom: var( --margin-extralarge );
    margin-left: 0px;
    margin-right: 0px;
}

section.page h1 + .fullsize-exhibitions {
    margin-top: 100px;
}

section.page .fullsize-exhibitions h3 {
    font-size: var( --font-large-size );
    line-height: var( --font-large-lineheight );
    padding-left: 5px;
    padding-right: 5px;
    margin-bottom: 30px;
    padding: 0px var( --padding-side ) 0px var( --padding-side );
}

section.page .fullsize-exhibitions li.exhibition-tile .heroimage .heroimage {
    aspect-ratio: 2 / 1;
}

section.page .fullsize-exhibitions li.exhibition-tile .info {
    padding: 0px var( --padding-side ) 0px var( --padding-side );
}

section.page .fullsize-exhibitions:has( + .component-button ) {
    margin-bottom: 30px;
}


@media ( max-width: 550px ) {

    section.page .fullsize-exhibitions li.exhibition-tile .heroimage .heroimage {
        aspect-ratio: 1 / 1;
    }

}



/* ### PAGE: SLIDE TILES ### */


section.page .slide-tiles {
    padding: 0px calc( var( --padding-side ) - 5px ) 0px calc( var( --padding-side ) - 5px );
    overflow: hidden;
    margin-top: var( --margin-extralarge );
    margin-bottom: var( --margin-extralarge );
    margin-left: 0px;
    margin-right: 0px;
}

section.page h1 + .slide-tiles {
    margin-top: 100px;
}

section.page .slide-tiles.publications {
    padding: 0px;
}

section.page .slide-tiles h3 {
    font-size: var( --font-large-size );
    line-height: var( --font-large-lineheight );
    padding-left: 5px;
    padding-right: 5px;
    margin-bottom: 30px;
}

section.page .slide-tiles.publications h3 {
    padding-left: var( --padding-side );
    padding-right: var( --padding-side );
}

section.page .slide-tiles .wrapper {
    position: relative;
    width: 100%;
}

section.page .slide-tiles .wrapper .arrows {
    width: 44px;
    position: absolute;
    height: 44px;
    top: -82px;
    right: 5px;
    font-family: 'Teodor', serif;
    font-size: 3.75rem;
    cursor: pointer;
    transition: opacity .5s;
}

section.page .slide-tiles.publications .wrapper .arrows {
    right: var( --padding-side );
}

section.page .slide-tiles .wrapper .arrows.left {
    right: 64px;
}

section.page .slide-tiles.publications .wrapper .arrows.left {
    right: calc( var( --padding-side ) + 59px );
}

section.page .slide-tiles .wrapper .arrows::before {
    display: block;
    position: absolute;
    top: 2px;
    left: 0px;
    width: 100%;
    text-align: center;
}

section.page .slide-tiles .wrapper .arrows.right::before {
    content: "→";
}

section.page .slide-tiles .wrapper .arrows.left::before {
    content: "←";
}

section.page .slide-tiles .wrapper .arrows.disabled {
    opacity: 0.1;
}

@media (prefers-contrast: more) {

    section.page .slide-tiles .wrapper .arrows.disabled {
        opacity: 0;
    }

}

body.mode-highcontrast section.page .slide-tiles .wrapper .arrows.disabled {
    opacity: 0;
}

section.page .slide-tiles .wrapper .strip {
    display: flex;
    transition: transform .5s;
}

@media ( prefers-reduced-motion ) {

    section.page .slide-tiles .wrapper .strip {
        transition: none;
    }

}

section.page .slide-tiles.publications .wrapper .strip {
    width: fit-content;
}

section.page .slide-tiles .wrapper .strip li {
    padding-left: 5px;
    padding-right: 5px;
}

section.page .slide-tiles.publications .wrapper .strip li {
    flex-basis: 0;
    padding-left: var( --padding-side );
    padding-right: var( --padding-side );
}

section.page .slide-tiles:has( + .component-button ) {
    margin-bottom: 30px;
}

@media ( max-width: 950px ) {
    
    section.page .slide-tiles .wrapper .arrows {
        top: -64px;
    }
    
}

@media ( max-width: 550px ) {

    section.page .slide-tiles .wrapper {
        padding-top: 74px;
    }
    
    section.page .slide-tiles .wrapper .arrows {
        top: 0px;    
    }
    
    section.page .slide-tiles .wrapper .arrows.left {
        right: auto;
        left: 0px;
    }
    
    section.page .slide-tiles .wrapper .arrows.right {
        right: auto;
        left: calc( 59px + 0px );
    }
    
    section.page .slide-tiles.publications .wrapper .arrows.left {
        right: auto;
        left: var( --padding-side );
    }
    
    section.page .slide-tiles.publications .wrapper .arrows.right {
        right: auto;
        left: calc( 59px + var( --padding-side ) );
    }

}



/* ### PAGE: GRID TILES ### */


section.page .grid-tiles {
    padding: 0px var( --padding-side ) 0px var( --padding-side );
    overflow: hidden;
    margin-top: var( --margin-extralarge );
    margin-bottom: var( --margin-extralarge );
    margin-left: 0px;
    margin-right: 0px;
}

section.page .grid-tiles.publications {
    padding: 0px;
    overflow: visible;
}

section.page h1 + .grid-tiles {
    margin-top: 100px;
}

section.page .grid-tiles h3 {
    font-size: var( --font-large-size );
    line-height: var( --font-large-lineheight );
    margin-bottom: 30px;
}

section.page .grid-tiles ul {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 20px;
    row-gap: 100px;
}

section.page .grid-tiles.publications ul {
    display: flex;
    flex-wrap: wrap;
    column-gap: 0px;
}

section.page .grid-tiles.publications ul li {
    width: min-content;
    padding-left: var( --padding-side );
    padding-right: var( --padding-side );
}


@media ( max-width: 800px ) {

    section.page .grid-tiles ul {
        grid-template-columns: 1fr;
    }

}

@media ( max-width: 550px ) {

    section.page .grid-tiles.publications ul {
        flex-direction: column;
    }

    section.page .grid-tiles.publications ul li {
        width: 100%;
    }
    
    section.page .grid-tiles.publications ul li.publication-tile .mockup img {
        height: auto;
        width: 100%;
    }
    
    section.page h1 + .grid-tiles {
        margin-top: 40px;
    }

}



/* ### PAGE: EXHIBITION TILE ### */


section.page li.exhibition-tile a {
    display: block;
}

section.page li.exhibition-tile .heroimage {
    position: relative;
    width: 100%;
    overflow: hidden;
}

section.page li.exhibition-tile .heroimage .heroimage {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

section.page li.exhibition-tile .heroimage .logo {
    position: absolute;
    top: 35px;
    left: 35px;
    width: auto;
    height: 70px;
    z-index: 2;
}

section.page li.exhibition-tile.image-mode-light .heroimage .logo {
    filter: invert();
}

section.page li.exhibition-tile .heroimage::before {
    content: "";
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    background: linear-gradient( transparent, rgba( 0, 0, 0, 0.2 ) );
    z-index: 1;
    opacity: 0;
    transition: opacity .4s;
}

section.page li.exhibition-tile.image-mode-light .heroimage::before {
    background: linear-gradient( transparent, rgba( 255, 255, 255, 0.25 ) );
}

@media (hover: hover) {

    section.page li.exhibition-tile a:hover .heroimage::before {
        opacity: 1;
    }

}

section.page li.exhibition-tile a:focus-visible .heroimage::before {
    opacity: 1;
}

section.page li.exhibition-tile .heroimage::after {
    content: "→";
    display: block;
    position: absolute;
    font-family: 'Teodor', serif;
    left: 35px;
    bottom: 10px;
    font-size: 9.375rem;
    line-height: 1em;
    color: var( --color-light );
    z-index: 2;
    translate: 0px 50px;
    opacity: 0;
    transition: opacity .4s, translate .4s;
}

@media ( prefers-reduced-motion ) {

    section.page li.exhibition-tile .heroimage::after {
        transition: opacity .4s;
    }

}

section.page li.exhibition-tile.image-mode-light .heroimage::after {
    color: var( --color-dark );
}

@media (hover: hover) {

    section.page li.exhibition-tile a:hover .heroimage::after {
        opacity: 1;
        translate: none;
    }

}

section.page li.exhibition-tile .info .type {
    margin-top: 25px;
}

section.page li.exhibition-tile .info .date {
    font-family: 'Teodor', serif;
    font-size: var( --font-normal-size );
    line-height: var( --font-normal-lineheight );
    margin-top: 25px;
}

section.page li.exhibition-tile .info .title {
    font-size: var( --font-large-size );
    line-height: var( --font-large-lineheight-reduced );
    margin-top: 10px;
    text-wrap: balance;
    padding-bottom: 5px;
}

section.page li.exhibition-tile .info .subtitle {
    font-size: var( --font-normal-size );
    line-height: var( --font-normal-lineheight );
    margin-top: 10px;
    text-wrap: balance;
    padding-bottom: 5px;
}


@media ( max-width: 550px ) {

    section.page li.exhibition-tile .heroimage .heroimage {
        aspect-ratio: 1 / 1;
    }
        
    section.page li.exhibition-tile .heroimage .logo {
        top: 15px;
        left: 15px;
        height: 45px;
    }

}



/* ### PAGE: PUBLICATION TILE ### */


section.page li.publication-tile .mockup {
    position: relative;
    width: 100%;
}

section.page li.publication-tile .mockup img {
    display: block;
    width: auto;
    height: 35vw;
    box-shadow: -1px 1px 20px 1px #00000026;
}

section.page li.publication-tile .info {
    padding-left: 20px;
    padding-right: 20px;
}

section.page li.publication-tile .info .date {
    font-family: 'Teodor', serif;
    font-size: var( --font-small-size );
    line-height: var( --font-small-lineheight );
    margin-top: 25px;
}

section.page li.publication-tile .info .title {
    font-size: var( --font-normal-size );
    line-height: var( --font-normal-lineheight-reduced );
    margin-top: 10px;
    text-wrap: balance;
    padding-bottom: 5px;
}


@media ( max-width: 550px ) {

    section.page li.publication-tile .mockup img {
        height: 250px;
    }
    
    section.page .slide-tiles li.publication-tile .mockup img {
        height: min( 100vw, calc( ( 100vw - ( var( --padding-side ) * 2 ) ) / var( --largest-ratio ) ) );
    }
    
}



/* ### PAGE: NEWSLETTER ### */


section.page aside.newsletter {
    position: relative;
    width: 100%;
    background-color: #E6E6E6;
    margin-left: 0px;
    margin-right: 0px;
}

section.page aside.newsletter:not( :first-child ) {
    margin-top: var( --margin-extralarge );
}

section.page aside.newsletter:not( :last-child ) {
    margin-bottom: var( --margin-extralarge );
}

section.page .pagelink + aside.newsletter {
    margin-top: 0px;
}

section.page aside.newsletter .content {
    position: relative;
    width: 100%;
}

section.page aside.newsletter .content {
    padding: 50px 0px 50px 0px;
}

section.page aside.newsletter .content.abovefold {
    display: flex;
}

section.page aside.newsletter .content.abovefold > * {
    padding-left: var( --padding-side );
    padding-right: var( --padding-side );
}

section.page aside.newsletter .content.abovefold > .headline {
    width: 25%;
}

section.page aside.newsletter .content.abovefold > .tagline {
    flex-grow: 1;
}

section.page aside.newsletter .content.fold {
    padding-top: 0px;
}

section.page aside.newsletter.folded .content.fold {
    display: none;
}

section.page aside.newsletter h3,
section.page .newsletter.fullsize h3 {
    text-transform: uppercase;
}

section.page aside.newsletter p,
section.page .newsletter.fullsize p {
    font-family: 'Teodor', serif;
    font-size: var( --font-normal-size );
    line-height: var( --font-normal-lineheight );
    margin-top: 0px;
    margin-bottom: 0px;
}

section.page aside.newsletter p.notice,
section.page .newsletter.fullsize p.notice {
    font-size: var( --font-extrasmall-size );
    line-height: var( --font-extrasmall-lineheight );
}

section.page aside.newsletter .subscribe,
section.page .newsletter.fullsize .subscribe {
    margin-left: auto;
}

section.page aside.newsletter form,
section.page aside.newsletter .response-message {
    padding-left: var( --padding-side );
    padding-right: var( --padding-side );
    margin-left: 25%;
}

section.page .newsletter.fullsize form,
section.page .newsletter.fullsize .response-message {
    max-width: 920px;
}

section.page aside.newsletter form .row,
section.page .newsletter.fullsize form .row {
    position: relative;
    width: 100%;
    display: flex;
    gap: var( --padding-side );
}

section.page aside.newsletter form .row:not( :first-child ),
section.page .newsletter.fullsize form .row:not( :first-child ) {
    margin-top: 50px;
}

section.page aside.newsletter form .row:not( :last-child ),
section.page .newsletter.fullsize form .row:not( :last-child ) {
    margin-bottom: 50px;
}

section.page aside.newsletter form .input-wrapper,
section.page .newsletter.fullsize form .input-wrapper {
    width: 100%;
}

section.page aside.newsletter form .radio-wrapper,
section.page .newsletter.fullsize form .radio-wrapper {
    position: relative;
    width: 100%;
    padding-left: 50px;
}

section.page aside.newsletter form input,
section.page .newsletter.fullsize form input {
    font: inherit;
    font-family: 'Teodor', serif;
    background-color: transparent;
    border-bottom: 1px solid var( --color-dark );
    display: block;
    width: 100%;
}

section.page aside.newsletter form input::placeholder,
section.page .newsletter.fullsize form input::placeholder {
    color: var( --color-dark );
}

section.page aside.newsletter form input[type="checkbox"],
section.page .newsletter.fullsize form input[type="checkbox"] {
    appearance: none;
    background-color: transparent;
    margin: 0;
    position: absolute;
    width: 35px;
    height: 35px;
    left: 0px;
    top: -5px;
    border-bottom: none;
}

section.page aside.newsletter form input[type="checkbox"]::before,
section.page .newsletter.fullsize form input[type="checkbox"]::before {
    content: "";
    display: block;
    position: absolute;
    left: 0px;
    top: 0px;
    width: 35px;
    height: 35px;
    border: 1px solid var( --color-dark );
    border-radius: 50%;
}

section.page aside.newsletter form input[type="checkbox"]:checked::before,
section.page .newsletter.fullsize form input[type="checkbox"]:checked::before {
    background-color: var( --color-dark );
}

section.page aside.newsletter form .policy,
section.page .newsletter.fullsize form .policy {
    font-family: 'Teodor', serif;
    font-size: var( --font-small-size );
    line-height: var( --font-small-lineheight );
}

section.page aside.newsletter form p,
section.page .newsletter.fullsize form p {
    font-family: 'Teodor', serif;
    font-size: var( --font-small-size );
    line-height: var( --font-small-lineheight );
}

section.page aside.newsletter form p:not( :first-child ),
section.page .newsletter.fullsize form p:not( :first-child ) {
    margin-top: 50px;
}

section.page aside.newsletter form p:not( :last-child ),
section.page .newsletter.fullsize form p:not( :last-child ) {
    margin-bottom: 50px;
}

section.page .newsletter .response-message {
    font-family: 'Teodor', serif;
    font-size: var( --font-extrasmall-size );
    line-height: var( --font-extrasmall-lineheight );
}

section.page aside.newsletter .action,
section.page .newsletter.fullsize .action {
    position: relative;
}

section.page aside.newsletter .subscribe-button {
    display: none;
}

section.page aside.newsletter.folded .subscribe-button {
    display: block;
}

section.page aside.newsletter .close-button {
    position: absolute;
    right: var( --padding-side );
    top: -5px;
    width: 45px;
    height: 45px;
    cursor: pointer;
}

section.page aside.newsletter .close-button::before, 
section.page aside.newsletter .close-button::after {
    content: "";
    display: block;
    position: absolute;
    left: 0px;
    top: 21px;
    width: 100%;
    height: 3px;
    background-color: var( --color-dark );
}

section.page aside.newsletter .close-button::before {
    rotate: 45deg;
}

section.page aside.newsletter .close-button::after {
    rotate: -45deg;
}

section.page aside.newsletter.folded .close-button {
    display: none;
}


@media ( max-width: 800px ) {

    section.page aside.newsletter {

    }
    
    section.page aside.newsletter .content {
        padding-top: 35px;
        padding-bottom: 35px;
    }
    
    section.page aside.newsletter .content.abovefold {
        flex-direction: column;
        gap: 0px;
    }
    
    section.page aside.newsletter .action {
        position: static;
    }
    
    section.page aside.newsletter .content.abovefold > .headline {
        width: 100%;
    }
    
    section.page aside.newsletter .content.abovefold > .action {
        margin-top: 30px;
    }

    section.page aside.newsletter .close-button {
        top: 29px;
        width: 35px;
        height: 35px;
    }
    
    section.page aside.newsletter .close-button::before, 
    section.page aside.newsletter .close-button::after {
        top: 17px;
        height: 1px;
    }
    
    section.page aside.newsletter form {
        margin-left: 0px;
    }
    
    section.page aside.newsletter form .radio-wrapper {
        padding-left: 40px;
    }
    
    section.page aside.newsletter form input[type="checkbox"] {
        width: 25px;
        height: 25px;
    }
    
    section.page aside.newsletter form input[type="checkbox"]::before {
        width: 25px;
        height: 25px;
    }
    
}



/* ### PAGE: PAGELINK ### */


section.page .pagelink {
    border-top: 1px solid var( --color-dark );
    border-bottom: 1px solid var( --color-dark );
    margin-left: 0px;
    margin-right: 0px;
}

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

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

section.page .pagelink + .pagelink {
    margin-top: 0px;
}

section.page .pagelink:has( + .pagelink ) {
    margin-bottom: 0px;
    border-bottom: none;
}

section.page .pagelink:has( + .newsletter ) {
    border-bottom: none;
    margin-bottom: 0px;
}

section.page .pagelink a {
    display: block;
    position: relative;
    padding: 50px calc( var( --padding-side ) + 59px ) 50px var( --padding-side );
    text-transform: uppercase;
    display: flex;
    gap: 50px;
    transition: filter .4s;
}

@media (hover: hover) {

    section.page .pagelink a:hover {
        filter: blur( 3px );
    }

}

@media (hover: hover) and (prefers-contrast: more) {

    section.page .pagelink a:hover {
        filter: none;
    }

}

@media (hover: hover) {
    
    body.mode-highcontrast section.page .pagelink a:hover {
        filter: none;
    }

}

section.page .pagelink a::after {
    content: "Mehr erfahren";
    font-family: 'Teodor', serif;
    margin-left: auto;
    text-transform: none;
}

section.page .pagelink a::before {
    content: "→";
    display: block;
    position: absolute;
    width: 44px;
    top: 46px;
    right: var( --padding-side );
    font-family: 'Teodor', serif;
    font-size: 3.75rem;
}



/* ### PAGE: FILE ### */


section.page .wp-block-file {
    position: relative;
    font-family: 'Teodor', serif;
    padding-bottom: 15px;
    border-bottom: 1px solid var( --color-dark );
    display: flex;
}

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

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

section.page .wp-block-file:has( + .wp-block-file ) {
    margin-bottom: 50px;
}

section.page .wp-block-file + .wp-block-file {
    margin-top: 50px;
}

section.page .wp-block-file a:first-child {
    flex-grow: 1;
    transition: filter .4s;
}

section.page .wp-block-file .wp-block-file__button {
    padding-right: 52px;
    transition: filter .4s;
}

section.page .wp-block-file .wp-block-file__button::after {
    content: "↓";
    display: block;
    position: absolute;
    width: 32px;
    top: 0px;
    right: 0px;
    font-family: 'Teodor', serif;
    font-size: 3.75rem;
}

@media (hover: hover) {

    section.page .wp-block-file:has( a:hover ) a {
        filter: blur( 3px );
    }

}

@media (hover: hover) and (prefers-contrast: more) {

    section.page .wp-block-file:has( a:hover ) a {
        filter: none;
    }

}

@media (hover: hover) {
    
    body.mode-highcontrast section.page .wp-block-file:has( a:hover ) a {
        filter: none;
    }

}



/* ### PAGE: DETAILS ### */


section.page .wp-block-details {
    border-top: 1px solid var( --color-dark );
    border-bottom: 1px solid var( --color-dark );
    margin-left: 0px;
    margin-right: 0px;
}

section.page .wp-block-details:not( :first-child ) {
    margin-top: 50px;
}

section.page .wp-block-details:not( :last-child ) {
    margin-bottom: 50px;
}

section.page .wp-block-details:has( + .wp-block-details ) {
    margin-bottom: 0px;
}

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

section.page .wp-block-details > * {
    margin-left: var( --padding-side );
    margin-right: var( --padding-side );
}

section.page .wp-block-details summary {
    list-style: none;
    cursor: pointer;
    text-transform: uppercase;
    padding-top: 50px;
    padding-bottom: 50px;
}

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

@media ( prefers-reduced-motion ) {

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

section.page .wp-block-details .wrapper > *:last-child {
    margin-bottom: 50px;
}



/* PAGE: LEIHGABE */


section.page .leihgabe {
    position: relative;
}

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

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

section.page .leihgabe .info .city {
    margin-bottom: 20px;
}

section.page .leihgabe .info .date {
    font-size: var( --font-normal-size );
    line-height: var( --font-normal-lineheight );
    margin-top: 0px;
    margin-bottom: 0px;
}

section.page .leihgabe .info .title {
    margin-top: 0px;
    margin-bottom: 0px;
}

section.page .leihgabe .info .place {
    font-family: 'YetGrotesk', sans-serif;
    margin-top: 0px;
    margin-bottom: 0px;
}

section.page .leihgabe .wp-block-gallery {
    margin-left: calc( var( --padding-side ) * -1 );
    margin-right: calc( var( --padding-side ) * -1 );
    margin-top: 30px;
    margin-bottom: 0px;
}



/* ### FOOTER ### */


footer {
    display: flex;  
    padding: 70px 0px 70px 0px;
    border-top: 1px solid var( --color-dark );
    text-transform: uppercase;
}

footer nav {
    padding: 0px var( --padding-side ) 0px var( --padding-side );
}

footer nav.left {
    width: 25%;
}

footer nav.center {
    flex-grow: 1;
}

footer ul {
    display: flex;
    flex-direction: column;
    gap: 33px;
}

main:has( section.page aside.newsletter:last-child ) + footer {
    border-top: none;
}

footer a,
footer button {
    transition: filter .4s;
}

footer button {
    text-transform: uppercase;
    cursor: pointer;
}

@media (hover: hover) {

    footer a:hover,
    footer button:hover {
        filter: blur( 3px );
    }

}

@media (hover: hover) and (prefers-contrast: more) {

    footer a:hover,
    footer button:hover {
        filter: none;
    }

}

@media (hover: hover) {
    
    body.mode-highcontrast footer a:hover,
    body.mode-highcontrast footer button:hover {
        filter: none;
    }

}


@media ( max-width: 550px ) {
    
    footer {
        padding: 20px var( --padding-side ) 100px var( --padding-side );
        flex-direction: column;
        gap: 30px;
    }
    
    footer nav {
        padding: 0px;
    }
    
    footer nav.left {
        width: 100%;
    }

    footer ul {
        gap: 0px;
    }
    
}



/* ### INSTAGRAM ### */


.popup-instagram {
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    z-index: 9999991;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity .4s;
}

.popup-instagram.visible {
    opacity: 1;
    pointer-events: all;
}

.popup-instagram .back {
    position: absolute;
    inset: 0px;
    width: 100%;
    height: 100%;
    background-color: var( --color-dark );
    opacity: .5;
}

@media (prefers-contrast: more) {

    .popup-instagram .back {
        opacity: 0.9;
    }

}
    
body.mode-highcontrast .popup-instagram .back {
    opacity: 0.9;
}

.popup-instagram .popup {
    width: 100%;
    height: auto;
    max-width: 860px;
    z-index: 9999992;
    padding: 130px 100px 120px 100px;
    border-radius: 50px;
    backdrop-filter: blur( 40px ) brightness( 90% );
}

@media (prefers-contrast: more) {

    .popup-instagram .popup {
        background-color: var( --color-dark );
        backdrop-filter: none;
    }

}
    
body.mode-highcontrast .popup-instagram .popup {
    background-color: var( --color-dark );
    backdrop-filter: none;
}

.popup-instagram .popup .wp-block-columns {
    display: flex;
    gap: 150px;
}

.popup-instagram .popup .wp-block-columns img {
    display: block;
    width: 100%;
    height: auto;
}

.popup-instagram .popup .close-button {
    position: absolute;
    right: 30px;
    top: 30px;
    width: 45px;
    height: 45px;
    cursor: pointer;
}

.popup-instagram .popup .close-button::before,
.popup-instagram .popup .close-button::after {
    content: "";
    display: block;
    position: absolute;
    left: 0px;
    top: 21px;
    width: 100%;
    height: 3px;
    background-color: var( --color-light );
}

.popup-instagram .popup .close-button::before {
    rotate: 45deg;
}

.popup-instagram .popup .close-button::after {
    rotate: -45deg;
}


@media ( max-width: 550px ) {

    .popup-instagram .popup {
        padding: 120px 30px 100px 30px;
    }
    
    .popup-instagram .popup .wp-block-columns {
        gap: 30px;
    }
    
}