/*
Theme Name: kunstverein-wagenhalle 
Description: Ein modernes Wordpress-Theme für Kunstverein Wagenhalle e.V. 
Author: Studio Tillack Knöll, Design Practice 
Author URI: https://www.studiotillackknoell.com 
Text Domain: kvwh 
Version: 1.0
*/

.is-hidden {
    display: none !important;
}


#overlay__loader.black svg * {
	fill: var(--col-black);
} 

#overlay__loader.blue svg * {
	fill: var(--col-blue);
} 

#overlay__loader.yellow svg * {
	fill: var(--col-yellow);
} 

#overlay__loader.grey svg * {
	fill: var(--col-grey);
} 

#overlay__loader.lightgrey svg * {
	fill: var(--col-lightgrey);
} 

#overlay__loader.rose svg * {
	fill: var(--col-rose);
} 

#overlay__loader {
	display: block !important;
	transition: opacity .25s ease;
	opacity: 1;
	position: fixed;
	top: 0;
	left: 0;
	height: 100vh;
	width: 100vw;
	z-index: 999999;
} 

	#overlay__loader svg {
		height: 100%;
		width: 100%;
	} 

#overlay__loader.is-hidden {
	display: block !important;
	opacity: 0;
	pointer-events: none;
}

body, html {
    position: relative;
    min-height: 100vh;
    width: 100%;
    height: 100%;
    transition: .2s ease all;
}

body {
    opacity: 0;
}

body.is-visible {
    opacity: 1;
    transition: .2s ease all;
}

body.is-fixed {
    pointer-events: none;
    overflow: hidden;
}

main {
    opacity: 0;
    min-height: 100vh;
    transition: var(--transition-duration) var(--transition-function) opacity;
}

main.is-visible {
    opacity: 1;
}

#elem__kuenstlerinnen--disziplinen {
    display: flex;
    align-content: center;
    justify-content: center;
    padding: calc( 5 * var(--var-gutter));
}

#aside__events--scope {
    padding: calc( 5 * var(--var-gutter));
}

#elem__kuenstlerinnen--disziplinen #elem__kuenstlerinnen--disziplinen--inner {
    background: var(--col-lightgrey);
    border-radius: var(--var-radius);
    padding: calc( 0.75 * var(--var-padding)) var(--var-padding) var(--var-padding) var(--var-padding);
    pointer-events: none;
    text-align: center;
}

.events__filter--period,
.events__filter--categories {
    background: var(--col-lightgrey);
    border-radius: var(--var-radius);
    padding: calc(0.75 * var(--var-padding)) var(--var-padding) var(--var-padding) var(--var-padding);
    pointer-events: none;
    text-align: center;
}

.kuenstlerinnen__disziplinen--inner--button {
    padding: calc( 0.75 * var(--var-padding)) var(--var-padding) var(--var-padding) var(--var-padding);
}

#elem__kuenstlerinnen--disziplinen #elem__kuenstlerinnen--disziplinen--inner .is-selected,
#aside__events--scope #events__scope--inner .is-selected {
    background: var(--col-yellow);
    border-radius: var(--var-radius);
}

#aside__events--scope #events__scope--inner .event__scope--inner--button {
    padding: calc( 0.5 * var(--var-padding)) var(--var-padding); 

}

.kuenstlerinnen__disziplinen--inner--button--reset {
    padding: calc( 0.5 * var(--var-padding)) var(--var-padding); 
    border-radius: var(--var-radius);
    border: 1px solid var(--col-black);
}

#elem__kuenstlerinnen--disziplinen #elem__kuenstlerinnen--disziplinen--inner a,
#aside__events--scope #events__scope--inner a {
    cursor: pointer;
    pointer-events: all;
    color: var(--col-black);
    text-decoration: none;
}

aside#aside__events,
nav#nav__main {
    top: -100vh;
    height: 100vh;
    width: 100vw;
    position: fixed;
    z-index: 100;
    /* transform: translate3d(0px, -100vh, 0px); */
    transition: var(--transition-duration) var(--transition-function) all;
    background: var(--col-white);
    padding: 60px var(--var-gutter) var(--var-gutter) var(--var-gutter);
    overflow-y: scroll;
    opacity: 0;
    pointer-events: all;
}

    nav#nav__main {
        z-index: 110;
    }

    aside#aside__events.is-active,
    nav#nav__main.is-active {
        opacity: 1;
        top: 0vh;
        position: fixed;
    }


    nav#nav__main > ul {
        list-style: none;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(3, 1fr);
        gap: var(--var-gutter);
        padding: 0px;
    }

        @media (max-width: 1024px) {
            nav#nav__main > ul {
                grid-template-columns: repeat(2, 1fr);
                grid-template-rows: auto;

            }
        }

        @media (max-width: 768px) {
            nav#nav__main > ul {
                grid-template-columns: repeat(1, 1fr);
            }
        }

    nav#nav__main ul > li {
        list-style: none;
        padding: var(--var-gutter);
        border-radius: var(--var-radius);
    }

        nav#nav__main ul > li:nth-of-type(1):not(nav#nav__main ul > li > ul > li) {
            background-color: rgb(0, 82, 255);        
        }

        nav#nav__main ul > li:nth-of-type(2):not(nav#nav__main ul > li > ul > li) {
            background-color: rgb(0, 253, 175);        
        }

        nav#nav__main ul > li:nth-of-type(3):not(nav#nav__main ul > li > ul > li) {
            background-color: rgb(255, 209, 217);        
        }

        nav#nav__main ul > li:nth-of-type(4):not(nav#nav__main ul > li > ul > li) {
            background-color: rgb(255, 128, 0);        
        }

        nav#nav__main ul > li:nth-of-type(5):not(nav#nav__main ul > li > ul > li) {
            background-color: rgb(242, 220, 198);        
        }

        nav#nav__main ul > li:nth-of-type(6):not(nav#nav__main ul > li > ul > li) {
            background-color: rgb(255, 246, 134);        
        }

        nav#nav__main ul > li:nth-of-type(7):not(nav#nav__main ul > li > ul > li) {
            background-color: rgb(122, 229, 216);        
        }

        nav#nav__main ul > li:nth-of-type(8):not(nav#nav__main ul > li > ul > li) {
            background-color: rgb(255, 157, 255);        
        }

        nav#nav__main ul > li:nth-of-type(9):not(nav#nav__main ul > li > ul > li) {
            background-color: rgb(255, 152, 152);        
        }

    nav#nav__main ul > li > ul {
        display: flex;
        flex-direction: column;
        padding-left: 10px;
        border-left: 5px solid var(--col-black);
    }

    nav#nav__main ul > li > ul > li {
        padding: 0px;
    }

    #header__navigation .menu li {
        list-style: none;
    }

    #header__navigation .menu li a {
        width: 36px;
        height: 36px;
        background-repeat: no-repeat;
        display: block;
    }

    #header__navigation--intl a {
        background: url('../img/icon__english.svg');
    }

    #header__navigation--calendar a {
        background: url('../img/icon__calendar.svg');
    }

    #header__navigation--burger a {
        background: url('../img/icon__menu.svg');
    }    

    #header__navigation--search a {
        background: url('../img/icon__srch.svg');
    }    

    .single-event #header__navigation--calendar,
    .post-type-archive-event #header__navigation--calendar {
        display: none;
    }

#header,
footer {
    padding: var(--var-gutter);
}

    header {
        position: fixed;
        width: 100%;
        top: 0;
        height: 60px;
        background-color: var(--col-white);
        z-index: 120;
        pointer-events: all;
    }

    footer {
        display: grid;
        grid: auto / repeat(4, 1fr);
        gap: var(--var-gutter);
    }

    #footer__newsletter,
    #footer__press {
        grid-column: span 2;
    }

    #footer__branding {
        grid-column: span 4;
    }

#header__branding,
#footer__branding {
    display: flex;
    flex-direction: row;
}

    #header__branding--inner {
        flex: 4;
    }
    #header__navigation {
        flex: 1;
    }

    #header__branding--inner span {
        pointer-events: none;
    }

    #header__branding--inner .mobile {
        display: none;
    }

    @media (max-width: 900px) {
        #header__branding--inner .desktop {
            display: none;
        }

        #header__branding--inner .mobile {
            display: block;
        }
    }

    #nav__footer ul, 
    #header__navigation ul {
        display: flex;
        flex-direction: row;
        justify-content: flex-end;
        gap: var(--var-gutter);
    }

        @media (max-width: 1024px) {
            #nav__footer ul {
                display: flex;
                flex-wrap: wrap;
                justify-content: flex-start;
            }

            footer {
                display: flex;
                flex-direction: column;
            }


        }

    #nav__footer ul li a {
        background-color: var(--col-grey);
        border-radius: var(--var-radius);
        display: inline-block;
        padding: var(--var-gutter);
        text-decoration: none;
    }

    #nav__footer ul li a:hover {
        background-color: var(--col-lightgrey);
    }

    .grid__masonry {
        /* padding: 0 var(--var-gutter); */
        display: grid;
        grid-gap: var(--var-gutter);
        grid-template-columns: repeat(auto-fill, minmax(calc( 25vw - calc( 2 * var(--var-gutter) ) ), 1fr));
        grid-auto-rows: 0;
        transition: .2s all ease;
    }

    .grid__masonry--element.is-wichtig .section__copy.is-container {
        background-color: rgb(255, 246, 134);
    }

    .grid__masonry--element--trigger {
        pointer-events: all;
    }

        .grid__masonry--element--trigger a {
            text-decoration: none;
        }

        .grid__masonry--element--trigger picture,
        .grid__masonry--element--trigger picture img {
            width: auto;
        }

    .grid__masonry--element--trigger > * {
        pointer-events: none;
    }


    .grid__masonry--element[data-category="pinned"] .grid__masonry--element--content {
        background-color: var(--col-rose);
        padding: var(--var-padding);
        border-radius: var(--var-radius);
    }

    [data-category="pinned"] .is-container {
        background: none;
    }

    @media (max-width: 1280px) {
        .grid__masonry {
            grid-template-columns: repeat(auto-fill, minmax(calc( 33.333333333vw - calc( 2 * var(--var-gutter) ) ), 1fr));
        }
    }

    @media (max-width: 1024px) {
        .grid__masonry {
            grid-template-columns: repeat(auto-fill, minmax(calc( 50vw - calc( 2 * var(--var-gutter) ) ), 1fr));
        }
    }


    @media (max-width: 768px) {
        .grid__masonry {
            grid-template-columns: repeat(auto-fill, minmax(calc( 100vw - calc( 2 * var(--var-gutter) ) ), 1fr));
        }
    }

    .grid__masonry--element.wide {
        grid-column-end: span 3;
        transition: .2s all ease;

    }

    .grid__masonry--element {
        border-top: var(--var-border) solid var(--col-black);
        padding-top: calc( 1 * var(--var-gutter) );
        transition: .2s all ease;

    }

    .grid__masonry--element .section__galerie:not([data-category="pinned"] .section__galerie) {
        padding-top: calc( 1 * var(--var-gutter) );
    }

    .grid__masonry--element .section__galerie img {
        border-radius: var(--var-radius);
    }

    .grid__masonry--element.elem__kuenstlerinnen--trigger {
        cursor: pointer;
        pointer-events: all;
    }

    /* .elem__kuenstlerinnen .grid__masonry--element--content {
        pointer-events: none;
    } */

    .grid__masonry--element.elem__kuenstlerinnen picture {
        padding-bottom: calc( 0.66 * var(--var-gutter) );

    }

    .elem__kuenstlerinnen {
        background-color: var(--col-grey);
        cursor: pointer;
    }

    .elem__kuenstlerinnen.has-content-hidden {
        background-color: var(--col-white);
        transition: .25s ease all;
    }

    .elem__kuenstlerinnen.has-content-hidden .grid__masonry--element--details {
        height: 0;
        overflow: hidden;
        transition: height .2s ease;
    }

    .elem__kuenstlerinnen .grid__masonry--element--details {
        height: auto;
    }

    .kuenstlerinnen__detail--infos {
        display: grid;
        grid-template-columns: 1fr 1fr;
        column-gap: var(--var-gutter);
        padding: calc( 2* var(--var-gutter)) 0;
    }

    .grid__masonry--element--loader {
        display: none;
    }

    .is-loading .grid__masonry--element--loader {
        display: block;
    }

    /* @media (max-width: 1280px) {
        .grid__masonry {
            grid-template-columns: repeat(3, 1fr);   
        }
    }

    @media (max-width: 1024px) {
        .grid__masonry {
            grid-template-columns: repeat(2, 1fr);   
        }
    }

    @media (max-width: 768px) {
        .grid__masonry {
            grid-template-columns: repeat(1, 1fr);   
        }
    } */

.is-container {
    padding: var(--var-padding);
    background: var(--col-grey);
    border-radius: var(--var-radius);
}

    .grid__masonry--element[data-category="pinned"] .section__copy.is-container {
        padding: 0px;
    }

main {
    margin-top: 60px;
    padding: var(--var-gutter) var(--var-gutter) 0 var(--var-gutter) ;
}

.article__news {
    background: var(--col-grey);
    padding: var(--var-padding);
    border-radius: var(--var-radius);
}

    .article__news section.section__copy.is-container {
        padding: 0px;
    }

    .article__news section.section__copy:first-of-type {
        padding-top: var(--var-padding);
    }

.article__news + .article__news {
    margin-top: var(--var-padding);
}

@media (min-width: 769px) {
    .article__news,
    section {
        max-width: 80vw;
    }
}

section + section {
    padding-top: var(--var-padding);
}

section + section.is-container:not(.grid__masonry--element section) {
    margin-top: var(--var-gutter);
}

.section__headline:not(:first-of-type) {
    padding-top: calc( 8 * var(--var-padding) );
}

.section__dreispalter {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: var(--var-gutter);
}

    .section__dreispalter div {
        background: var(--col-grey);
        padding: var(--var-padding);
        border-radius: var(--var-radius);
    }

    @media (max-width: 1024px) {
        .section__dreispalter {
            grid-template-columns: 1fr 1fr;
        }
    }

    @media (max-width: 786px) {
        .section__dreispalter {
            grid-template-columns: 1fr;
        }
    }



.event__single--load,
div.kalender__month, 
.kalender__month tr {
    display: flex;
    flex-direction: row;
}

    .event__single[data-category="extern"],
    .event__single--preview[data-category="extern"],
    .event__single--preview[data-category="extern"] a {
        background: var(--col-lightgrey);
        color: var(--col-darkgrey);
    }

    .event__single--load {
        padding-bottom: calc( 0.5 * var(--var-gutter) );
    }

.kalender__month--name {
    flex: 1;
}

.kalender__month--content {
    flex: 11;
}

    .kalender__month,
    .kalender__month--content table {
        width: 100%;
    }

/* #events__wrapper table tr:hover {
    background: var(--col-lightgrey);
} */

table.event__single:not(.single-event table.event__single) {
    pointer-events: all;
    cursor: pointer;
}

/* table.event__single tbody,
table.event__single tr {
    pointer-events: none;
} */

tr.event__single--preview {
    display: flex;
    flex-direction: row;
    border-top: 2px solid var(--col-black);
    padding: calc( 0.65 * var(--var-gutter) ) 0 calc( 0.5 * var(--var-gutter) ) 0;
    gap: var(--var-gutter);
}

[data-category="extern"] tr.event__single--preview,
tr.event__single--preview[data-category="extern"] {
    border-top: 2px solid var(--col-darkgrey); 
}

.event__single--detail--content table {
    display: flex;
    flex-direction: row; 
    color: var(--col-black);
    /* padding: calc( 0.5 * var(--var-gutter) ); */
}

.event__single--detail--content table tr {
    gap: var(--var-gutter);
}

.event__single--detail--content {
    padding-bottom: var(--var-gutter);
}

.spacer--2,
.event__single--detail--content table td.event__single--date,
tr.event__single--preview td.event__single--date {
        flex: 2;
        display: flex;
        flex-direction: row;
        
    }
    
    td.event__single--date .event__single--date--content,
    td.event__single--date .event__single--date--tags {
        flex: 1;
    }

    .event__single--date--tags div {
        display: none;
    }

    .event__current .current,
    [data-category="intern"] .intern {
        display: block;
    }

    .event__single--date--tags .intern  span {
        color: var(--col-rose);
        padding: 2px 9px;
        border-radius: 15px;
        border: 1px solid var(--col-rose);
    }

    .event__single--date--tags .current span {
        color: var(--col-blue);
        padding: 2px 9px;
        border-radius: 15px;
        border: 1px solid var(--col-blue);
    }

    [data-category="extern"] .event__single--date--tags .current span {
        opacity: .5;
    }

.spacer--6,
.event__single--detail--content table td.event__single--content,
tr.event__single--preview td.event__single--title {
        flex: 6;
    }

    .event__single--title a {
        text-decoration: none;
        pointer-events: none;
        user-select: all;
    }

.spacer--3,
.event__single--detail--content table td.event__single--image,
tr.event__single--preview td.event__single--meta {
        flex: 3;
    }

.event__single--date,
.event__single--date--end,
.event__single--meta--entry {
    display: block;
}

.has-both .event__single--date::after {
    content: "- ";
}

@media (max-width: 1024px) {
    tr.event__single--preview {
        flex-direction: column;
        padding: calc( 0.5 * var(--var-gutter) 0);

    }

    .kalender__month tr {
        flex-direction: column;
    }

    .event__single--date,
    .event__single--date--end {
        display: inline-block;
    }
}

#orte {
    display: flex;
}

    @media (max-width: 1024px) {
        #orte {
            flex-direction: column;
        }
    }

#orte__map {
    flex: 2;
    position: relative;
}

#orte__legende {
    flex: 1;
}

.img {
    position: absolute;
}

#tags {
    position: absolute;
    width: 100%;
    height: 100%;
}

.img-tag {
    position: absolute;
}

.img-tag .indicator {
	display: block;
    position: absolute;
    content: '';
    width: 26px;
    height: 26px;
    background: #073189;
    left: -12px;
    top: 50%;
    border-radius: 50%;
    z-index: 101;
    transform: translateY(-50%);
	text-align: center;
	color: white;
}

.img-tag .indicator .number {
	padding-top: 6px;
	display: inline-block;
}

.img-tag .label {
	position: relative;
	background: white;
	padding: 10px 12px 10px 20px;
	border: 1px solid #073189;
	opacity: 0;
	transition: opacity 0.15s ease-in-out;
	pointer-events: none;
	z-index: 10;
	color: #073189;
}

.img-tag:hover .label {
	opacity: 1;
	pointer-events: auto;
}

#orte__legende a {
    display: block;
}

input {
    -webkit-appearance: none;
	-webkit-border-radius: none;
}

.wpcf7 textarea,
.wpcf7 input[type="url"], 
.wpcf7 input[type="email"], 
.wpcf7 input[type="tel"],
.wpcf7 input[type="text"],
.wpcf7 input[type="submit"],
.wpcf7 input[type="checkbox"],
.wpcf7 select {
	border: 2px solid black;
}

.wpcf7 input[type="checkbox"] {
	appearance: none;
	background-color: #fff;
	margin: 0;
	font: inherit;
	color: currentColor;
	width: 1.15em;
	height: 1.15em;
	border-radius: 0.15em;
	transform: translateY(-0.075em);
	display: grid;
	place-content: center;
	display: inline-block
}

.wpcf7 input[type="checkbox"]::before {
	content: "";
	width: 0.65em;
	height: 0.65em;
	transform: scale(0);
	transition: 120ms transform ease-in-out;
	box-shadow: inset 1em 1em var(--form-control-color);
  }

.wpcf7-checkbox {
	display: block;
}

.wpcf7 input[type="checkbox"]:checked {
	background: black;
}

.wpcf7-checkbox .wpcf7-list-item {
	margin: 0px;
}
  
.wpcf7 input[type="submit"] {
	padding: 0px 5px;
}

.wpcf7 p {
	margin-bottom: 20px;
}

.swiper-slide {
    background: transparent !important;
}

.embed-container {
    position: relative;
    padding-bottom: 56.25%;
    width: 100%;
    height: 0;
    overflow: hidden;
    max-width: 100%;
    height: auto;
  }

  .embed-container iframe,
  .embed-container object,
  .embed-container embed {
    position: absolute;
    top: 13%;
    width: 100%;
    height: 75%;
  }

.section__table {
    display: flex;
    flex-direction: column;
}

    .section__table--row {
        display: flex;
        flex-direction: row;
        gap: var(--var-gutter);
        border-bottom: solid 2px black;
        padding: calc(.5* var(--var-gutter)) 0;
    }

    .section__table .section__table--row:last-of-type,
    .section__aufzahlung .section__table--row:last-of-type {
        border-bottom: none;
        padding-bottom: 0px;
    }

    .section__table--cell {
        flex: 1;
    }

    .section__aufzahlung p::before {
        content: '•';
        margin-right: 10px;
        display: inline-block;
    }

    @media (max-width: 768px) {
        .section__table--row {
            display: flex;
            flex-direction: column;
            gap: 0px;
        }

        .section__table {
            gap: var(--var-gutter);
        }
    }

#aside__artists {
    width: 100vw;
    height: 100vh;
    top: 0%;
    position: fixed;
    display: none;
    pointer-events: none;
    transition: all var(--timing-duration) var(--timing-function);
    background: white;
    overflow-x: hidden;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
    backdrop-filter: blur(0px) opacity(0);
    -webkit-backdrop-filter: blur(4px) opacity(0);
    opacity: 0;
}

    #aside__artists.is-visible {
        display: flex;
        top: 0%;
        pointer-events: all;
        z-index: 60;
        padding-top: 74px;
        background: rgba(255, 255, 255, .5);
        backdrop-filter: blur(4px) opacity(1);
        -webkit-backdrop-filter: blur(4px) opacity(1);
        justify-content: center;
        opacity: 1;
    }

#aside__artist {
    background: white;   
    min-height: calc(100vh - 89px);
    padding: 20px 10px 0px 10px;
    box-shadow: 0px 0px 10px rgba(75, 75, 75, .25);
    overflow-y: scroll;
}

#aside__artists__inner {
    display: flex;
    flex-direction: column;
    gap: var(--gap);
    position: relative;
    transition: top var(--timing-duration) var(--timing-function);
    max-width: 1280px;
    width: 66vw;
    border-top-left-radius: var(--border-radius);
    border-top-right-radius: var(--border-radius);
    bottom: 0%;
}

    @media(max-width: 1024px) {
        #aside__artists__inner {
            width: calc(100vw - 40px);
        }
    }

    #aside__artists.is-visible #focus__inner {
        top: 0%;
    }

#button__close {
    width: 68px;
    background: var(--col-grey);
    border-radius: var(--var-radius);
    display: flex;
    cursor: pointer;
    pointer-events: all;
}

    #button__close svg {
        padding: var(--var-padding);
        pointer-events: none;
    }

.has-hover:hover {
    box-shadow: 0px 0px 10px rgba(75, 75, 75, .65);
}

.section__hl_single {
    display: flex;
    gap: var(--var-gutter);
}

.section__hl_single h1 {
    height: 68px;
    width: calc(100% - 68px - var(--var-gutter));
    padding: var(--var-padding);
    background: var(--col-grey);
    border-radius: var(--var-radius);
}

.swiper-button-prev, .swiper-button-next {
    width: 32px !important;
    height: 32px !important;
    background: white !important;
    border-radius: 16px;
    mix-blend-mode: difference;
    color: black !important;
}


    .swiper-button-prev::after, 
    .swiper-button-next::after {
        content: '';
    }

.swiper-button-prev, .swiper-rtl .swiper-button-next {
    left: var(--swiper-navigation-sides-offset, 10px);
    right: auto;
}

.swiper-button-next, .swiper-rtl .swiper-button-prev {
    right: var(--swiper-navigation-sides-offset, 10px);
    left: auto;
}

/***
* Search
*
*/

#aside__search {
    z-index: 30;
    position: fixed;
    width: 100vw;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: var(--col-modal);
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transition: var(--transition-duration) ease all;
    backdrop-filter: blur(5px);

}

    #aside__search.is-visible {
        visibility: visible;
        opacity: 1;
        pointer-events: all;
    }

    input[type="search" i]::-webkit-search-cancel-button,
    #aside__search::-webkit-search-cancel-button{
        position: absolute;
        right: 10px;
        height: 48px;
        width: 48px;
        border-radius: 20px;
        background: white;
        padding-top: 0px;
        -webkit-appearance: none;
        background-image: url(../img/button__cancel.svg);
        background-position: center center;
        background-repeat: no-repeat;
        background-size: 38px;
        cursor: pointer;
    }

#kvwh_search {
    background-size: 40px;
    width: 50vw;
    z-index: 2;
    padding: 20px;
    border: 2px solid var(--col-blue);
    border-radius: 8px;
}

#kvwh_search__results {
    background-color: var(--col-grey);
    width: 50vw;
    padding: 20px;
    border-radius: 10px;
    height: auto;
    visibility: hidden;
    margin-top: 10px;
    transition: height var(--transition-duration) var(--transition-function);
}

    @media (max-width: 1280px) {
        #kvwh_search__results,
        #kvwh_search {
            background-size: 40px;
            width: 66vw;
            z-index: 2;
        }

        input[type="search" i]::-webkit-search-cancel-button,
        #aside__search::-webkit-search-cancel-button {
            top: 27px;
            right: 94px;
        }
    }


    @media (max-width: 1023px) {
        #kvwh_search__results,
        #kvwh_search {
            width: 75vw;
        }

        input[type="search" i]::-webkit-search-cancel-button,
        #aside__search::-webkit-search-cancel-button {
            top: 18px;
            right: 94px;
        }            
    }

    @media (max-width: 768px) {
        #kvwh_search__results,
        #kvwh_search {
            width: calc(100vw - 40px);
        }

        input[type="search" i]::-webkit-search-cancel-button, 
        #aside__search::-webkit-search-cancel-button {
            top: 10px;
            right: 64px;
        }
    }

#kvwh_search__results.is-visible {
    visibility: visible;
    display: block;
    overflow-y: scroll;
    max-height: calc(100vh - 280px);
}

#kvwh_search__results .search-result {
    border-bottom: 2px solid var(--col-white);
    padding: 8px 0 10px 0;
}

#kvwh_search__results .search-result.none {
    padding: 0px 0px 10px 0px;
}

#kvwh_search__results .search-result a {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    transition: color var(--transition-duration) var(--transition-function);
}

#kvwh_search__results .search-result a:hover {
    color: var(--col-red);
}

#kvwh_search__results .search-result:last-of-type {
    border-bottom: none;
    padding-bottom: 0px;
}

.article__permalink {
    margin-top: var(--var-padding);
}

.section__galerie.is-big:not(.grid__masonry--element .section__galerie) {
    width: 80vw;
}

.section__galerie.is-medium:not(.grid__masonry--element .section__galerie) {
    width: 50vw;
}

.section__galerie.is-small:not(.grid__masonry--element .section__galerie) {
    width: 25vw;
}

    @media (max-width: 1280px) {
        .section__galerie.is-big:not(.grid__masonry--element .section__galerie) {
            width: 80vw;
        }
        
        .section__galerie.is-medium:not(.grid__masonry--element .section__galerie) {
            width: 60vw;
        }
        
        .section__galerie.is-small:not(.grid__masonry--element .section__galerie) {
            width: 40vw;
        }       
    }

    @media (max-width: 1024px) {
        .section__galerie.is-big:not(.grid__masonry--element .section__galerie) {
            width: 100%;
        }
        
        .section__galerie.is-medium:not(.grid__masonry--element .section__galerie) {
            width: 75vw;
        }
        
        .section__galerie.is-small:not(.grid__masonry--element .section__galerie) {
            width: 50vw;
        }       
    }

    @media (max-width: 768px) {
        .section__galerie.is-big:not(.grid__masonry--element .section__galerie),
        .section__galerie.is-medium:not(.grid__masonry--element .section__galerie) {
            width: 100%;
        }
        
        .section__galerie.is-small:not(.grid__masonry--element .section__galerie) {
            width: 75vw;
        }       
    }
/* PJAX transition ---------------------------------------------------------
 * During a page swap, the <main> opacity transition is the single reveal.
 * Disable nested viewport/stagger transitions while the loader is active so
 * the new page cannot flash or continue animating after the cover disappears.
 */
body.is-pjax-loading main article,
body.is-pjax-loading main section:not(#aside__artists__inner section),
body.is-pjax-loading main section:not(#aside__artists__inner section) > *,
body.is-pjax-loading main section:not(#aside__artists__inner section) > * > * > * {
    transition-delay: 0s !important;
    transition-duration: 0s !important;
}

/* PJAX 2.0.4: loader and main are animated by the Web Animations API.
 * Suppress their CSS transitions while JS owns the visual state. */
#overlay__loader.is-pjax-controlled,
main.is-pjax-controlled {
    transition: none !important;
    will-change: opacity;
}

/* Event archive filters + incremental archive pagination */
#aside__events--scope #events__scope--inner {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: calc(0.5 * var(--var-padding));
    justify-content: space-between;
}

.events__filter--period,
.events__filter--categories {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: calc(0.25 * var(--var-padding));
}

#aside__events--scope .event__category--button,
#aside__events--scope .event__filter--reset {
    padding: calc(0.5 * var(--var-padding)) var(--var-padding);
}

#aside__events--scope .event__filter--reset {
    border: 1px solid var(--col-black);
    border-radius: var(--var-radius);
}

.events__pagination {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--var-padding);
    padding: calc(2 * var(--var-gutter)) 0 var(--var-gutter);
}

.events__pagination--more {
    appearance: none;
    background: var(--col-lightgrey);
    border: 0;
    border-radius: var(--var-radius);
    cursor: pointer;
    font: inherit;
    padding: calc(0.5 * var(--var-padding)) var(--var-padding);
}

.events__pagination--sentinel {
    width: 100%;
    height: 1px;
}

.events__empty {
    text-align: center;
    padding: calc(2 * var(--var-gutter)) var(--var-gutter);
}