/*
 * Theme Name: Nou 23
 * Author: rays.agency
 * Text Domain: nou
*/
@import url('reset.css');
@import url('static/components.css');
@import url('static/lite-yt-embed.css');

@font-face {
    font-family: "HH";
    src: url("fonts/HoustonHead-Bold.woff2") format('woff2');
    font-style: normal;
    font-weight: 700;
    size-adjust: 101%;
}

@font-face {
    font-family: "HH";
    src: url("fonts/HoustonHead-Roman.woff2") format('woff2');
    font-style: normal;
    font-weight: 400;
    size-adjust: 101%;
}

@font-face {
    font-family: "Peridot";
    src: url("fonts/Peridot-PE-Variable.ttf") format('truetype-variations');
    font-style: normal;
    font-weight: 100 950;
}


:root {
    --bg: rgb(251,245,245);
    --bg2: rgb(250, 236, 231);
    --bg3: rgb(233, 233, 233);
    --bgalt: rgb(15,11,11);
    --text: rgb(77, 66, 66);
    --text2: rgb(103, 103, 103);
    --text3: rgb( 160, 160, 160 );
    --text4: rgb(222, 222, 222);
    --htext: rgb(36,37,47);
    --acc1: rgb( 238, 39, 55 );
    --acc2: #ff6900;
    --acc3: rgb( 126, 178, 221 );
    --acc4: #445E93;
    --tacc1: 238, 39, 55;
    --tacc3: 126, 178, 221;
    --bshadow: rgba(0, 0, 0, 0.14) 0px 2px 2px 0px, rgba(0, 0, 0, 0.12) 0px 3px 1px -2px, rgba(0, 0, 0, 0.2) 0px 1px 5px 0px;
    --softshadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.10), 0px 8px 10px 1px rgba(0, 0, 0, 0.10);
    --font1: "Peridot", sans-serif;
    --font2: "HH", serif;
    --mdist: 3.5rem;
    --rad: 2.8rem;
    --logoAR: 1.005;
}


.cs-inv {
    --bg: rgb(15,11,11);
    --text: rgb(233, 233, 233);
    --htext: rgb(255,255,255);
}

html {
    font-size: clamp(0.938rem, 0.882rem + 0.28vw, 1.125rem);
    line-height: 1.4;
}

body {
    background-color: var(--bg);
    color: var(--text);
    /*cursor: none;*/
    font-family: var(--font1);
    font-feature-settings: "ss01";
    font-weight: 500;
    hyphens: auto;
    -webkit-hyphens: auto;
    overflow-x: hidden;
}

body.mobile, body.tablet {
    cursor: unset;
}

body.home,
body.raum { background-color: var(--bgalt); }

html, body {
    min-height: 100%;
    padding:0;
    margin:0;
}

canvas {
    bottom:0;
    left:0;
    pointer-events: none;
    position: fixed;
    right:0;
    top:0;
    z-index: -1;
}

.map canvas,
.raum canvas { z-index: unset; }

/*.masthead, .logo { display:none !important;}*/

@media (orientation:landscape) {
    canvas {
        right: var(--mdist);
        width: calc( 100% - var(--mdist) );
    }
}

:focus-visible {
    outline: 2px solid var(--acc3);
}

i, em {
    font-variation-settings: "wght" 450, "ital" 1;
}

.xdebug-var-dump {
    position:relative;
    z-index: 10000;
}

.xdebug-error span {
    font-size: 0.764rem !important;
}

.letter[data-char=T] + .letter[data-char=a],
.letter[data-char=W] + .letter[data-char=o],
.letter[data-char=W] + .letter[data-char=ü],
.letter[data-char=U] + .letter[data-char=p],
.char[data-char=T] + .char[data-char=a],
.char[data-char=U] + .char[data-char=p],
.char[data-char=F] + .char[data-char=u] {
    margin-left: -0.07em;
}

.letter[data-char=T] + .letter[data-char=e],
.letter[data-char=W] + .letter[data-char=e],
.char[data-char=T] + .char[data-char=e],
.char[data-char=W] + .char[data-char=e],
.char[data-char=W] + .char[data-char=o] {
    margin-left: -0.11em;
}

.word[data-word="Workshops"] { letter-spacing: -0.02em; }

.screen-reader-text,
.visually-hidden {
    clip: rect(1px, 1px, 1px, 1px);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}

.screen-reader-text:focus,
.visually-hidden:focus {
    clip: auto;
    height: auto;
    overflow: auto;
    position: absolute;
    width: auto;
}

a, a:hover, a:visited {
    color: var(--acc1);
    opacity: 1;
    transition: all 0.2s cubic-bezier(.22,.61,.36,1);
    word-break: break-word;
}

a:hover, a:focus,
.teacher:hover, .teacher:focus,
.event .title:hover, .event .title:focus {
    color: var(--acc1);
    opacity: 0.7;
}

.event .title,
a.teacher {
    color: var(--text);
}


nav a, nav a:hover, nav a:visited {
    color: var(--htext);
    text-decoration:none;
}

strong { font-weight: 800; }

h1, h2, h3, h4 {
    color: var(--htext);
    font-family: var(--font2);
    letter-spacing: normal;
    text-wrap: balance;
}

h1 > a, h2 > a, h3 > a, h4 > a,
h1 > a:visited, h2 > a:visited, h3 > a:visited, h4 > a:visited {
    color: var(--htext);
    text-decoration: none;
    transition: color 0.3s;
}

h1 > a:hover, h2 > a:hover, h3 > a:hover, h4 > a:hover {
    color: var(--acc1);
}

h1 {
    font-size: 4.236rem;
    line-height: 4.2rem;
    margin:0;
    padding: 2.8rem 0;
    font-weight: 700;
}

/*.single h1, */.page-topical h1 { opacity:0; }

h2 {
    font-size: 1.618rem;
    font-weight: 700;
    line-height: 1.75rem;
    margin: 1.4rem 0;
}

h3 {
    font-size: 1.236rem;
    font-weight: 700;
    line-height: 1.4rem;
    margin: 1.4rem 0 0.7rem;
}

h4 {
    font-family: var(--font1);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.4rem;
    margin: 0 0 0.7rem;
}




.content :where(ul),
.single-content :where(ul) {
    list-style-type: disc;
    margin: 1.4rem 0;
    padding: 0 0 0 1.05rem;
}

.content :where(ol),
.single-content :where(ol){
    counter-reset: numlist;
    list-style-type: none;
    margin: 1.4rem 0;
    padding: 0 0 0 1.75rem;
}

.content :where(li),
.single-content :where(li) {
    display: list-item;
    padding: 0;
}

.content :where(li) + li,
.single-content :where(li) + li { margin-top: 0.7rem; }

.content :where(ol li),
.single-content :where(ol li) {
    counter-increment: num-list;
    position: relative;
}

.content :where(ol) li::before,
.single-content :where(ol) li::before {
    background-color: var(--acc1);
    color: #fff;
    border-radius: 100%;
    content: counter(num-list);
    display:flex;
    flex-direction: column;
    font-size: 0.764rem;
    font-weight:700;
    font-variant-numeric: tabular-nums;
    height: 1.4rem;
    justify-content: center;
    left: -1.75rem;
    line-height: 1;
    position: absolute;
    text-align: center;
    top:0.175rem;
    width: 1.4rem;
}

.no-list {
    list-style:none;
    padding-left: 0;
}


.no-list li + li { margin-top: 0; }

ul li::marker {
    content: normal;
}

ol li::marker {
    content: normal;
    font-family: var(--font3);
    font-feature-settings: normal;
}


dl, dt, dd { margin:0; }

dl + h4 { margin-top: 1.4rem; }

dt, dd { display: inline; }

.single-content dl {
    & dt, & dd {
        display: block;
    }
    & dt { font-weight: 700; }
    & dd + dt { margin-top: 0.7rem; }
}

p { margin: 0; }

article p + p,
article p + ul,
article p + ol,
article ul + p,
article ol + p,
article p + h4 { margin-top: 1.4rem; }

blockquote {
    font-family: var(--font3);
    font-size: 1.618rem;
    font-feature-settings: normal;
    font-weight: 300;
    line-height: 2.1rem;
    margin: 0;
    quotes: "“" "”" "‘" "’";
    text-align: center;
}

.desc blockquote { margin: 1.4rem; }

cite {
    display: block;
    font-family: var(--font1);
    font-size: 1rem;
    font-style: normal;
    line-height: 1.4rem;
    margin-top: 1.4rem;
}

details summary { display: flex; }

img {
    height: 100%;
    object-fit: cover;
    vertical-align: middle;
    width: 100%;
}

img.circle {
    aspect-ratio: 1;
    border-radius: 100%;
}

.portrait img {
    height: unset;
    position:absolute;
    transform: translateY(-15%);
}

figure {
    margin:0;
}

figure.pic { overflow:hidden; }

picture { display:block; height: 100%; }

figcaption {
    color: var(--text2);
    font-size: 0.618rem;
    line-height: 0.7rem;
    margin: 0.35rem 0;
}

figcaption ion-icon[name='camera'] {
    vertical-align: -0.15em;
}

figure .photographer {
    bottom: 0.35rem;
    color: #fff;
    font-size: 0.618rem;
    margin: 0;
    mix-blend-mode: difference;
    opacity: 1;
    position:absolute;
    right: 0.7rem;
    text-transform: capitalize;
}

video { width: 100%; }

video.portrait {
    max-height: 90vh;
    width: auto;
}

lite-youtube {
    contain: unset !important;
    display:block !important;
}

lite-youtube figure {
    overflow:hidden;
    position:absolute;
    width:100%;
}

lite-youtube figcaption {}

lite-youtube img {
    aspect-ratio: 16/9;
}

ion-icon {
    --ionicon-stroke-width: 32px;
}

.meta ion-icon {
    height: 1.4rem;
    padding-right: 0.7rem;
    vertical-align: bottom;
}

button,
.btn,
.btn:visited {
    align-items: center;
    align-self: flex-end;
    background-color: var(--acc1);
    border: none;
    border-radius: var(--rad);
    color: var(--bg);
    cursor: pointer;
    display:inline-flex;
    font-family: var(--font1);
    font-size: 0.764rem;
    font-variant-numeric: oldstyle-nums;
    font-weight: 700;
    justify-content: center;
    letter-spacing: 0.05em;
    line-height: 1;
    overflow:hidden;
    padding: 0.7rem 1.05rem;
    position: relative;
    text-align: center;
    transition: all 0.3s ease;
}

button ion-icon,
.btn ion-icon {
    margin-left: 0.35rem;
    position: relative;
}


.button ion-icon[name="caret-forward-outline"],
.btn ion-icon[name="caret-forward-outline"] { top: 0; }

.button ion-icon[name="bag-check"],
.btn ion-icon[name="bag-check"] { top: -0.15em; }

.btn.circle {
    background-color: var(--acc1);
    border-radius: 100%;
    color: #fff;
    font-weight: 700;
    height: 7rem;
    justify-content: center;
    min-width: unset;
    transform: rotate(15deg);
    width: 7rem;
}

button.text,
.btn.text {
    align-self:flex-start;
    background: none;
    border-radius: unset;
    color: var(--acc1);
    font-size: 1rem;
    font-variant-caps: unset;
    min-width: 0;
    padding:0;
    text-decoration: underline;
}

button:hover,
button:focus,
.btn:hover,
.btn:focus {
    /*background-color: rgb( var(--tacc1), 0.8);*/
    color: var(--bg);
    opacity: 0.8;
}

.btn.text:hover,
.btn.text:focus,
button.text:hover,
button.text:focus {
    background: none;
    color: rgb( var(--tacc1), 0.8);
}

button[disabled],
button[disabled]:hover,
button[disable]:focus {
    background-color: var(--bg);
    color: var(--text3);
    pointer-events: none;
}

.nou-footer button { color: var(--bg); }

button .small,
.btn .small {
    font-size: 0.618rem;
}

/** For gallery on space page **/
button.img-button {
    border: none;
    display: block;
    overflow: visible;
    min-width: unset;
    padding: 0;
}

button.img-button .name {
    display: block;
    padding: 0.175rem 0;
}

p + .btn, p + button { margin-top: 1.4rem; }


address { font-style:normal; }

span[itemprop="streetAddress"] {
    display:block;
}

.mc4wp-form { padding: 1.4rem 0 0; }

.mc4wp-form-fields { display:flex; flex-direction: column; }


lite-youtube > button.lty-playbtn {
    background:none; /* add your own svg in html */
    filter:none;
    height: auto;
    min-width: 0;
    overflow: visible;
    padding:0;
    transition: none;
    width: 3.5rem;
}

lite-youtube .play-triangle { fill: #fff; }

button.lty-playbtn > .ripple { color: #fff; }

.date, .time, .amount, .fee {
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.03rem;
}

.overlay {
    background-color: rgb( 0, 0, 0, 0.5);
    bottom: 0;
    display: none;
    left:0;
    opacity: 0;
    right:0;
    pointer-events: none;
    position: fixed;
    top:0;
    z-index: 1;
}


/*****************************************
-------------- Layout -------------
******************************************/


#header {
    background-color: #fff;
    margin:0;
}

.home #header,
.raum #header { background-color: var(--bgalt); }

#content {
    --ctMargin: 0.7rem;
    margin: 0 var(--ctMargin);
    position:relative;
}

#content,
.wrapper,
.content-wrapper,
article {
    overflow-x: unset;
}

/**
 * Site Header
 */

.masthead {
    align-items: center;
    display: flex;
    gap: 0;
    left:0;
    position: fixed;
    top:0;
    width: 100vw;
    z-index: 3;
}

@media (orientation: landscape) {
    .masthead {
        display: flex;
        flex-direction: column;
        height: 100%;
        left: auto;
        right:0;
        width: var(--mdist);
    }
}

@media (orientation: landscape) and (pointer: coarse) {
    .masthead { left: calc(100vw - var(--mdist)); } /* 'auto' doesn't work on tablet */
}


.nav-main {
    background-color: #fff;
    flex-grow: 1;
}

.home .nav-main,
.raum .nav-main { opacity:0; }

@media (orientation: landscape) {
    .nav-main {
        height: 100%;
        order: 2;
        padding-top: 1.4rem;
        width: 100%;
    }
}

.quick-links {
    align-items: center;
    display: flex;
    gap: 0.7rem;
    height: var(--mdist);
    justify-content: space-between;
    margin-left: 0.35rem;
}

.quick-links .menu-item  {
    height:0;
    transform: scale(0);
    visibility: hidden;
    width:0;
}

.quick-links .home,
.quick-links .important {
    height: unset;
    transform: unset;
    visibility: visible;
    width: unset;
}

.quick-links .home {
    --height: 3.15rem;
    clip-path: polygon(0% 0%,3.4rem 0%,3.4rem 3.5rem,0% 100%);
    font-size: 0;
}

.quick-links .important a {
    background-color: var(--acc1);
    color: var(--bg);
    border-radius: unset;
    display: block;
    font-size: 1rem;
    font-variant-caps: unset;
    height: var(--mdist);
    line-height: 1;
    min-width: unset;
    padding: 1.25rem 1.05rem;
}

.quick-links ion-icon {
    display: none;
}

.quick-links .home svg {
    height: var(--height);
    width: calc( var(--height) * var(--logoAR) );
}

@media (min-width: 720px) {
    .quick-links .menu-item  {
        height: unset;
        padding: 0 0.35rem;
        position: relative;
        transform: unset;
        visibility: visible;
        width: unset;
    }

    .quick-links .important {
        margin: 0 0 0 auto;
        padding:0;
    }

    .quick-links .menu-item::before {
        background-color: var(--text);
        bottom: calc( -1.125rem + 1px );
        content: '';
        height: 1px;
        left: -0.35rem;
        position: absolute;
        transition: transform 400ms cubic-bezier(1,0,.25,.995);
        transform: scaleX(0);
        transform-origin: left bottom 0px;
        width: calc( 100% + 0.7rem);
    }

    .quick-links .menu-item.important::before { background-color: var(--bg); }

    .quick-links .menu-item:hover::before,
    .quick-links .menu-item:focus::before {
        transform: scaleX(1);
    }
}

@media (orientation: landscape) {
    .menu-toggle { order: 1; }

    .quick-links {
        flex-direction: column;
        gap: 1.4rem;
        height: 100%;
        margin: 0;
    }

    .quick-links .menu-item {
        padding:0;
        writing-mode: vertical-rl;
    }

    .quick-links .home {
        clip-path: unset;
        font-size: 1rem;
    }

    .quick-links .important {
        height: unset;
        margin-bottom:0;
        margin-top: auto;
    }

    .quick-links a {
        align-items: center;
        display: flex;
        gap: 0.35rem;
    }

    .quick-links .home a {
        --height: 1.618rem;
        width: var(--height);
    }

    .quick-links .important a {
        align-items: center;
        display: flex;
        height: 8.4rem;
        justify-content: center;
        padding: 0;
        width: var(--mdist);
    }

    .quick-links ion-icon {
        display: inline-block;
        font-size: 1.618rem;
        --ionicon-stroke-width: 20px;
    }

}

.menu-toggle,
.menu-toggle:hover {
    align-self: center;
    background-color: var(--htext);
    border-radius: unset;
    color: var(--bg);
    flex-shrink: 0;
    font-size: 2rem;
    height: var(--mdist);
    min-width: unset;
    padding: 0;
    width: var(--mdist);
}

.menu-toggle svg {
    stroke: var(--bg);
    stroke-width: 10;
    width: 100%;
}

#full-menu {
    bottom: 0;
    color: var(--bg);
    display: grid;
    gap: 0.175rem;
    grid-template-rows: auto auto 8.225rem;
    left:0;
    margin-top: var(--mdist);
    overflow-x: hidden;
    overflow-y: visible;
    padding: 0.175rem;
    position: fixed;
    visibility: hidden;
    top:0;
    width: 100vw;
    z-index:5;
}

#full-menu a {
    color: var(--bg);
}

#full-menu .current-menu-item { opacity: 0.7; }

.primary-links,
.secondary-links,
.special-link {
    background-color: var(--htext);
    border-radius: 0.35rem;
    padding: 0.7rem;
    transform-origin: 100% 0 0px;
    width: 100%;
}
/*
[aria-expanded=true] .primary-links,
[aria-expanded=true] .secondary-links,
[aria-expanded=true] .special-link { transform-origin: 100% 100% 0px; }*/

.secondary-links {
    display: grid;
    gap: 0.35rem 0.7rem;
    grid-auto-rows: min-content;
    grid-template-columns: repeat(2, 1fr);
}

.special-link {
    background-color: var(--acc1);
}

.primary-links a,
.special-link a {
    font-size: 1.618rem;
}



article section > div + div { margin-top: 1.4rem; }

/*.content-wrapper { margin-bottom: -100vh; }*/

#footer {
    background-color: var(--bgalt);
    color: rgba(255,255,255,0.7);
    overflow: hidden;
    position: relative;
    width: 100vw;
}

.home #footer,
.raum #footer {
    background-color: transparent;
    margin-left:0;
}

#footer a,
#footer a:visited {
    text-decoration:none;
}

.nou-footer {
    display: grid;
    gap: 1.4rem 0.7rem;
    grid-template-columns: repeat(2, 1fr);
    padding: 1.4rem 0.7rem;
}

.nou-footer .logo {
    height: 2.8rem;
}

.nou-footer .logo svg {
    height: 2.8rem;
    width: calc( 2.8rem * var(--logoAR) );
}

.nou-footer .legal a,
.nou-footer .offers a,
.nou-footer input + label {
    color: #fff;
}

.nou-footer h2 {
    color: var(--bg);
    font-family: var(--font1);
    font-size: 1.236rem;
    line-height: 1.4rem;
    margin: 0 0 0.7rem;
}

.nou-footer li + li { margin-top: 0.35rem; }

.nou-footer .credits li { margin:0; }

.nou-footer div + div {
    border-top: 1px solid;
    padding-top: 1.4rem;
}

.nou-footer .signup,
.nou-footer .owner,
.nou-footer .credits { grid-column: span 2; }

.nou-footer .mc4wp-form { padding:0; }

.nou-footer .mc4wp-form p { margin-bottom: 1.4rem; }

@media (min-width: 720px) {
    .nou-footer {
        gap: 1.4rem 2.8rem;
        grid-template-columns: repeat(4, 1fr);
    }

    .nou-footer div + div { border: none; }

    .nou-footer .owner {
        grid-column: span 2;
        order: 4;
    }

    .nou-footer .credits {
        align-self: end;
        grid-column: span 2;
        order: 5;
    }
}







/**
 * Single
 */


.single #footer { left: -0.7rem; }

article header { position:relative; }

article section { position:relative; }

.single-views {
    display: grid;
    gap: 0.35rem;
    height: calc( 100vh - var(--mdist) );
    overflow: hidden;
    overscroll-behavior: contain;
    padding: 0.35rem;
    position: fixed;
    top: var(--mdist);
    width: 100vw;
    z-index: -1;
}

.single-views .back {
    border-radius: 0.35rem;
    font-size: 1rem;
    font-variant-caps: unset;
    grid-row: 1;
    height: 7rem;
    position: sticky;
    top: 0;
    width: 100%;
}

.single-views .views-wrap {
    display: grid;
    overflow-x: hidden;
    overflow-y: scroll;
}

.single article,
.single-views article {
    display: grid;
    gap: 0.175rem;
    grid-auto-rows: min-content;
}

.single article {
    gap: 1.4rem;
    padding-bottom: 2.8rem;
}

.single .bg-poster {
    height: 100%;
    left: 0;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: -1;
}

.single .post-type-team .bg-poster img { object-position: center 20%; }

@media (orientation: landscape) {
    .single article > * {
        margin-left: auto;
        margin-right: auto;
        min-width: calc( 768px - 2.8rem );
        width: calc( 50vw - var(--mdist) );
    }
}

.single-views article {
    display: none;
    grid-column: 1;
    grid-row: 1;
    margin: auto;
    min-height: calc( 100vh - var(--mdist) );
    width: calc( 100vw - 0.7rem);
}

@supports( height: 100svh ) {
    .single-views {
        height: calc( 100svh - var(--mdist) );
    }

    .single-views article {
        min-height: calc( 100svh - var(--mdist) );
    }
}

.single .article-header,
.single-views .article-header {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.single .article-header { margin-top: 4.2rem; }

.single .article-header .poster,
.single-views .poster { position:relative; }

.single .article-header,
.single article section,
.single-views .article-header,
.single-views article section {
    background-color: var(--bg);
    border-radius: 0.35rem;
    padding: 0.7rem;
}

.event-title,
.post-title {
    hyphens: auto;
    order: 3;
    overflow-wrap: anywhere;
    padding: 0 0 2.8rem;
    text-align: center;
}

.poster + .event-title,
.poster + .post-title {
    padding: 2.8rem 0;
}

.single-views .event-title,
.single-views .post-title {
    font-size: 3.236rem;
    line-height: 3.5rem;
}

.event-video,
.post-video,
.event-image,
.post-image {
    margin-top: 1.4rem;
    order: 1;
}

.event-image img,
.post-image img {
    aspect-ratio: 3/2;
}

.event-teachers,
.video-teachers,
.product-desc {
    font-family: var(--font1);
    line-height: 1.75rem;
    margin: 0;
    padding: 2.8rem 0 0.7rem;
    order: 2;
    text-align: center;
}

.event-teachers .images,
.video-teachers .images {
    display: flex;
    justify-content: center;
    margin-bottom: 1.4rem;
}

.event-teachers figure,
.video-teachers figure,
.teacher-placeholder {
    border-radius: 100%;
    height: 2.8rem;
    margin-right: 0.35rem;
    overflow: hidden;
    width: 2.8rem;
}

.event-teachers img,
.video-teachers img {
    /*object-position: center -15%;
    scale: 3;*/
}

.teacher-placeholder {
    align-items: center;
    background-color: var(--text3);
    color: var(--bg);
    display: flex;
    font-size: 1rem;
    flex-direction: column;
    justify-content: center;
    line-height: 1em;
}

.article-header .info,
.event-info {
    display: flex;
    gap: 1.4rem;
    justify-content: center;
    order: 4;
    text-align: center;
}

.article-header .info > * { flex: 1; }

.event-schedule {
    font-variant-numeric: tabular-nums;
}

.event-venue button {
    line-height: 1.4rem;
}

.event-map {
    display:none;
    order: 5;
}

.event-map .mapboxgl-map { margin-top: 0.7rem; }

.event-part + .event-part { margin-top: 0.35rem; }

.event-part .date {
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    letter-spacing: -0.03em;
}

.event-occ {
    display: grid;
    gap: 0 0.35rem;
    grid-template-columns: min-content auto;
}

.events-with .event-occ {
    grid-template-columns: 40% auto;
}

.event-occ .date { grid-column: 1; }

.event-occ .person,
.event-occ .fee,
.event-occ .name { align-self: end; grid-column: 2; }

@media (min-width: 720px) {
    .event-part > * {
        display: flex;
        gap: 1.4rem;

        & .part-title { font-weight: 700; }
    }
}

.single-views .event-price-reg {
    padding-bottom: 2.8rem;
}

.article-header .poster img { aspect-ratio: 1/1; }


.single .photographer {
    bottom: 0.35rem;
    right: 0.35rem;
}

h3:has(+ .event-pricing) {
    margin: 0 0 0.7rem;
}

.event-pricing {
    --min-width: 100px;
    --max-width: 300px;
    --gap: 1.4rem;
    --cols: max(1, 5);
    display: grid;
    /*grid-auto-rows: 1fr;*/
    grid-template-columns: repeat(auto-fit, minmax(max(var(--min-width), calc((100% - var(--gap) * (var(--cols) - 1)) / var(--cols))), 1fr));
    gap: var(--gap);
}

.event-pricing .offer {
    max-width: min(var(--max-width), 100%);
}

.offer h4 {
    font-family: var(--font1);
    font-size: 0.764rem;
    font-weight: 700;
    line-height: 1.12rem;
    margin:0;
}

.offer.free { width: 100%; }

.offer.pricing {
    margin-bottom: 0.7rem;
}

.offer .prices {
    padding-bottom: 0.35rem;
}

.offer .price {
    display: flex;
    flex-flow: row wrap;
}

.offer .price-min-max::after {
    font-weight: 700;
    order: 2;
}

.offer .label {
    display: block;
    font-size: 0.764rem;
    order: 3;
    width: 100%;
}

.offer .amount {
    font-weight: 700;
    order: 1;
}

.offer + .help-text { width: 100%; }



.stats { font-variant-numeric: tabular-nums; }


.meta .schedule, .substitution-dates { font-variant-numeric: tabular-nums; }

.substitution-dates .datelist { padding-left: 0; }

.details .datelist .occ {
    font-variant-numeric: tabular-nums;
    padding-left: 5ch;
    position: relative;
}

.details .datelist .occ:before {
    background: none;
    content: attr(data-date);
    left:0;
    position: absolute;
    top:0;
}

.dropdown .details .events .event:last-of-type {
    border-bottom: none;
    padding-bottom: 2.45rem;
}

.dropdown .schedule .events { list-style-type: circle; }

.datelist .special-fee { display:block;  }

.datelist .teachers .has_subs { display:none !important; }

.location { padding-bottom: 1.4rem; }

.map {
    aspect-ratio: 1;
    position:relative;
    width: 100%;
}

/*.map:before {
    content: "";
    display: block;
    padding-top: 100%;
}*/

.map > div {
    bottom:0;
    left:0;
    position:absolute;
    right:0;
    top:0;
}

@media(min-width: 720px) {
    .map { aspect-ratio: 16/9; }

    .sidebar .map { aspect-ratio: 1; }
}

.share-buttons {
    align-items: baseline;
    display: flex;
    flex-flow: row wrap;
    gap: 1.75rem;
    justify-content: center;
    margin-top: 2.8rem;
}

:where(.share-buttons) button,
:where(.share-buttons) .btn {
    border-radius: 100%;
    display: grid;
    font-weight: 700;
    height: 3.5rem;
    overflow: visible;
    margin-bottom: 2.8rem;
    position: relative;
    min-width: 0;
    width: 3.5rem;
}

:where(.share-buttons) button::after,
:where(.share-buttons) .btn::after {
    color: var(--text);
    content: attr(data-label);
    font-size: 0.764rem;
    font-variant-caps: normal;
    left: -0.7rem;
    line-height: calc(1.4rem * 0.67);
    position: absolute;
    text-align: center;
    top: 4.2rem;
    width: 4.9rem;
}

:where(.share-buttons) button .label,
:where(.share-buttons) .btn .label {
    height: 1px;
    opacity: 0;
    position: absolute;
    scale: 0;
    visibility: hidden;
    width: 1px;
    z-index: -1;
}

:where(.share-buttons) button ion-icon,
:where(.share-buttons) .btn ion-icon {
    align-self: center;
    font-size: 1.236rem;
    justify-self: center;
    margin: 0;
}

.link-copy { background-color: var(--text3); }
.link-share { background-color: var(--acc3); }

.no-registration {
    font-weight: 700;
    margin-bottom: 2.8rem;
    text-align: center;
    width: 100%;
}

.single-views .checkout {
    padding: 0.7rem 1.4rem;
}

.product-features {
    border-bottom: 1px solid;
    padding-bottom: 1.4rem;
}

.product-features .feature {
    padding-left: 1.4rem;
    position: relative;
}

.product-features .feature + .feature { margin-top: 0.35rem; }

.product-features .feature::before {
    background: url(./img/checkmark.svg) left center /cover no-repeat;
    content: "";
    height: 1rem;
    left: 0;
    position: absolute;
    top: 0.175rem;
    width: 1rem;
}

.order-form {
    --gap: 1.4rem;
    display: grid;
    gap: var(--gap);
    place-items: start stretch;
    position: relative;
}

.finalise {
    background-color: var(--bg);
    border: 1px solid var(--text);
    color: var(--text);
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    margin-top: 1.4rem;
    padding: 0.7rem;
    position: relative;
}

.finalise .legend {
    padding:0;
}

.finalise .back {
    font-size: 0.764rem;
    height: unset;
    line-height: 1.05rem;
    padding: 0.175rem 0;
}

.finalise a,
.finalise a:hover,
.cb-field a,
.cb-field a:hover { color: var(--acc1); }


.pricing-options .help-text ion-icon { font-size: 1rem; }

.pricing-options .pricing-option-custom {
    display: flex;
    flex-flow: row wrap;
    gap: 0.7rem;
}

.pricing-option-custom .help-text { width: 100%; }

.delivery-option label span {
    padding-left: var(--cbPad);
    display: block;
    font-size: 0.764rem;
}

.delivery-option .single-option + label span {
    padding-left:0;
}

.delivery-option + .delivery-option { margin-top: 0.35rem; }

.data-customer { width: 100%; }

.data-customer .fields {
    --cols: max( 1, 2 );
    --gap: 0.7rem;
    --min-width: 200px;
    --max-width: 1000px;
    display: grid;
    grid-auto-flow: dense;
    grid-auto-rows: 1fr;
    grid-gap: 0 var(--gap);
    grid-template-columns: repeat(auto-fill, minmax(max(var(--min-width), calc((100% - var(--gap) * (var(--cols) - 1)) / var(--cols))), 1fr));
    place-items: start stretch;
}

.input-field.field-address,
.input-field.field-address_2,
.input-field.field-city,
.input-field.field-postcode { display:none; }


.data-customer .legend,
.field-email { grid-column: 1/-1; }

.data-customer > * { max-width: min(var(--max-width), 100%); }



.bestellung .article-header .title,
.error404 .article-header .title {
    font-size: 2rem;
    line-height: 2.1rem;
    padding: 0;
}

.order-title {
    color: var(--htext);
    font-family: var(--font1);
    font-size: 1.236rem;
    font-weight: 700;
    line-height: 1.4rem;
    margin-top: 0;
}

.order-details {
    display: grid;
    gap: 1.4rem;
    margin: 2.8rem 0;
}

.order-details .poster { grid-column: 1; }

.order-details img {
    height: unset;
}

/**
 * Pages
 */


article.home { margin: 0 0.7rem; }

@media (orientation: landscape) {
    article.home { margin: 0 1.4rem; }
}

.hero > * {
    /*width: 100%;*/
}

.post-type-page .article-header {
    grid-area: title;
}

.hero .subhead, .hero .title, .filters {
    opacity: 0;
    transform: translateY(-3.5rem);
}

.hero .logo {
    --height: 2.8rem;
    display: none;
    opacity: 0;
    position: absolute;
    visibility: hidden;

    & svg {
        height: var(--height);
        width: calc( var(--height) * var(--logoAR) );
    }
}


@media (orientation: landscape) {
    .hero .logo { display: block; }
    .hero .logo svg {
        --height: 5.6rem;
    }
}



.article-header .title-wrap { padding-top: var(--mdist); }

.article-header .title {
    padding: 1.4rem 0.7rem;
}

.hero .title-wrap {
    backdrop-filter: blur(1rem);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    height: calc( 66.67vh + 3.5rem );
    left: 0;
    mix-blend-mode: lighten;
    padding:0;
    position: relative;
    z-index: 1;
}

.with-filters .title-wrap { margin-bottom:0; }

.hero .title-wrap::before {
    background-color: var(--bg);
    content: '';
    height: calc( 100% + 3.5rem );
    position: absolute;
    top:0;
    transition: height 1.4s cubic-bezier(.22,1,.36,1) .2s;
    width: 100%;
}

.hasLoaded .hero .title-wrap::before {
    height: 100%;
}

.hero .subhead {
    font-size: 2rem;
    line-height: 2.1rem;
    margin: 1.4rem 0.7rem;
    position: absolute;
    text-wrap: balance;
    top: 3.5rem;
    z-index: 1;
}

.hero .cover {
    height: 100vh;
    left:0;
    overflow: hidden;
    position: fixed;
    top:0;
    width: 100%;
}

@supports( height: 100svh ) {
    .hero .cover { height: 100svh; }
}

.dance .hero .cover { opacity:0; }

.hero .cover img { transform: scale(1.5); }

.hero .photographer {
    color: var(--bg);
    mix-blend-mode: unset;
}

@media (orientation: landscape) {
    article:not(.home) .hero .photographer { right: calc(var(--mdist) + 0.35rem); }
}

.home .article-header {
    align-items: baseline;
    display: grid;
    gap: 2.8rem;
    grid-template-columns: 1fr;
}

.home:not(.space) .hero .title-wrap {
    background-color: transparent;
    backdrop-filter: none;
    grid-row: 3;
    height: 1px;
    left:0;
    mix-blend-mode: normal;
    top:0;
    transform: scale(0);
    visibility: hidden;
    width: 1px;
}

.space .hero .title-wrap {
    background-color: transparent;
    backdrop-filter: none;
    grid-row: 1;
    height: unset;
    margin: 5.6rem 0 0;
    mix-blend-mode: normal;
}

.home .title-wrap::before { background-color: transparent; }

.home:not(.space) .title-wrap h1 {
    height: 1px;
    visibility: hidden;
    width: 1px;
}

.space .title-wrap h1 {
    color: #fff;
    margin:0;
    padding:0;
}

.home .hero .subhead {
    color: var(--bg);
    grid-row: 1;
    margin: 5.6rem 0 0;
    position: relative;
    top: unset;
}

.space .hero .subhead {
    grid-row: 2;
    margin:0;
}

.home .cover {
    grid-row: 2;
    height: unset;
    left: unset;
    overflow: hidden;
    position: relative;
    top: unset;
    width: 100%;
}

.home .cover img { aspect-ratio: 16/9; }

.hero-grid-wrap {
    grid-column: 1/-1;
    grid-row: 3;
}

.hero-grid-images {
    display: grid;
    gap: 0;
    grid-auto-flow: dense;
    grid-auto-rows: auto;
    grid-template-columns: repeat(8, 1fr);
}

.hero-grid-img,
.hero-grid-img:hover {
    --c: 1;
    --r: 1;
    --s: 4;
    align-self: unset;
    background: none;
    border-radius: unset;
    color: var(--bg);
    display: block;
    font-size: 1rem;
    font-variant-caps: unset;
    grid-column: var(--c) / span var(--s);
    grid-row: var(--r);
    min-width: 0;
    overflow: visible;
    padding:0;
    position: relative;
    transition: all 800ms cubic-bezier(0.61, 1, 0.88, 1);
}

.hero-grid-img:focus {
    background-color: transparent;
}

.hero-grid-img:nth-child(2) { --r: 2; --c: 5; --s: 3; }
.hero-grid-img:nth-child(3) { --r: 3; --c: 3; --s: 2; }
.hero-grid-img:nth-child(4) { --r: 4; --c: 1; --s: 2; }
.hero-grid-img:nth-child(5) { --r: 5; --c: 3; --s: 5; }
.hero-grid-img:nth-child(6) { --r: 6; --c: 2; --s: 1; }
.hero-grid-img:nth-child(7) { --r: 7; --c: 3; --s: 3; }
.hero-grid-img:nth-child(8) { --r: 8; --c: 6; --s: 2; }
.hero-grid-img:nth-child(9) { --r: 9; --c: 1; --s: 5; }
.hero-grid-img:nth-child(10) { --r: 10; --c: 6; --s: 3; }
.hero-grid-img:nth-child(11) { --r: 11; --c: 4; --s: 2; }
.hero-grid-img:nth-child(12) { --r: 12; --c: 1; --s: 3; }
.hero-grid-img:nth-child(13) { --r: 13; --c: 4; --s: 5; }

.hero-grid-img picture {
    overflow: hidden;
    position: relative;
    width: 100%;
    /*will-change: transform;*/
}

.hero-grid-img img {
    aspect-ratio: 3/2;
    max-block-size: unset;
    max-inline-size: unset;
    opacity: 0;
    position: relative;
    /*will-change: transform;*/
}

.hero-grid-img figcaption {
    color: var(--bg);
    padding: 0.175rem 0.35rem;
}

.hero-grid-img ion-icon {
    font-size: 1.618rem;
    position: absolute;
    right: 0;
    rotate: 45deg;
    top: 0;
    z-index: 1;
}

.hero-grid-img.right ion-icon {
    left: 0;
    right: auto;
}

.hero-grid-nav {
    left: 0;
    opacity: 0;
    position: fixed;
    text-align: center;
    top: calc( 50vh + (100vw / 3 * 2 - 1.4rem) * 0.5);
    width: 100vw;
    z-index: 2;
}

.hero-grid-nav .image-title {
    color: var(--bg);
    font-family: var(--font2);
    font-size: 2.618rem;
    font-weight: 700;
    line-height: 2.8rem;
    margin: 1.4rem 0 0;
}


@media (orientation: landscape) {
    .home .article-header {
        grid-template-columns: 2fr 1fr;
    }

    .home .title-wrap {
        grid-column: 1;
        grid-row: 2;
    }

    .hero-grid-nav {
        bottom: 2.8rem;
        top: unset;
    }

    .hero-grid-nav .image-title {
        font-size: 4.236rem;
        line-height: 4.9rem;
    }

}

.page #content,
.error404 #content { margin:0; }

.hero ~ .content,
.page .sidebar {
    background-color: var(--bg);
    padding: 1.4rem 0.7rem;
}

.page .content {
    background-color: var(--bg);
    padding: 1.4rem 1.4rem 1.4rem 0.7rem;
}

.page .post-type-page {
    display: grid;
    gap: 0;
    grid-template-areas: 'title' 'sidebar' 'content';
}

.page .with-filters {
    align-items: start;
    grid-template-areas: 'title' 'sidebar' 'filters' 'content';
}

.page .content {
    align-self: start;
    grid-area: content;
}

.page .content.full-width {
    grid-column: 1/-1;
    padding: 0.7rem;
}

.page .sidebar {
    grid-area: sidebar;

}

.hero + .sidebar,
.filters + .sidebar,
.hero + .full-width.content {
    margin-top: calc( 100vh - 2.8rem );
}

@supports( height: 100svh ) {
    .hero + .sidebar,
    .filters + .sidebar,
    .hero + .full-width.content {
        margin-top: calc( 100svh - 2.8rem );
    }
}

.page .page-video,
.error404 .page-video {
    margin: 1.4rem 0 2.8rem;
}

.filters {
    align-self: start;
    background-color: var(--bg);
    grid-area: filters;
    padding: 2.8rem 0.7rem 0.7rem;
    width: 100dvw;
}

.filters.multi .button-group {
    display: none;
}

@media (pointer: fine) and (min-width: 1025px) {
    .filters.multi .button-group,
    .filters.simple .button-group {
        display: flex;
        flex-flow: row wrap;
        overflow-x: initial;
    }

    .filters.multi .button-group ~ .button-group { margin-top: 0.7rem; }

    .filters.multi select { display: none; }
}


.filters .date-setters {
    /*flex-shrink: 0;*/
    display: none;
    margin: 0;
}

@media not (pointer: fine) {
    .filters .date-setters {
        display: flex;
    }
}


.filter-result { margin-bottom: 1.4rem; }


@media (orientation: landscape) {
    .filters {
        background-color: #fff;
        box-shadow: var(--softshadow);
        border-radius: 0.35rem;
        margin: 0 0 0 0.7rem;
        padding: 0.7rem;
        position: sticky;
        top:0;
        width: 100%;
        z-index: 2;
    }
}

.sidebar .photos { display: none; }

.page .nou-footer { margin:0; }


.fps {
    color: var(--bg);
    display: grid;
    gap: 1.4rem;
    margin: 7rem auto 0;
    max-width: 1200px;
    width: 100%;
}

.dance .fps:first-of-type { margin-top: 4.2rem; }

.raum .fps { margin-top: 25vh; }

.fps:last-child { margin-bottom: 75vh; }
.raum .fps:last-child { margin-bottom: 25vh; }

@supports ( height: 100svh ) {
    .raum .fps { margin-top: 25svh; }
    .fps:last-child { margin-bottom: 75svh; }
    .raum .fps:last-child { margin-bottom: 25svh; }
}

@media (orientation: landscape) {
    .fps {
        gap: 1.4rem 2.8rem;
        margin-top: 14rem;
    }

    .fps:nth-of-type(even) {
        margin-left:0;
    }

    .dance .fps:first-of-type { margin-top: 7rem; }

    .dance .fps:last-child { margin-bottom: 50vh; }
}

.fps h2 {
    align-self: start;
    color: #fff;
    font-size: 3.236rem;
    grid-column: 1/-1;
    hyphens: auto;
    -webkit-hyphens: auto;
    line-height: 3.5rem;
    margin:0;
    max-width: 25ch;
}

.fps h3 {
    align-self: start;
    color: #fff;
    font-family: var(--font1);
    font-size: 1.618rem;
    line-height: 1.75rem;
}

.fps p,
.fps .btn { place-self: start; }

.fps div + div { margin-top: 0; }

:where(.fps) input[type=checkbox] + label,
:where(.fps) .input-field label,
.fps .help-text {
    color: var(--bg);
}

.fps input[type=text],
.fps input[type=email],
.fps textarea {
    background-color: var(--htext);
}

.fps #simple-contact-form-wrap { margin:0; }

#claim h2 { grid-column: 1;}

.claim-text .scrollto {
    display: block;
    margin-top: 1.4rem;
}

#questions {
    grid-template-areas: "img" "title" "text" "list" "img2";
    grid-template-columns: 1fr;
}

#venue {
    grid-template-areas: "img" "title" "list" "img2";
    grid-template-columns: 1fr;
}

#contact {
    grid-template-areas: "img" "title" "text" "list";
    grid-template-columns: 1fr;
}

#questions h2,
#venue h2,
#contact h2 {
    align-self: end;
    grid-area: title;
}

#questions figure:first-of-type,
#venue figure {
    grid-area: img;
}

#questions figure:first-of-type img {
    aspect-ratio: 2/3;
}

#venue .map {
    aspect-ratio: 1;
    margin:0;
}

#questions figure:first-of-type img { object-position: 70% 50%; }

#questions figure:last-of-type,
#venue .map {
    align-self: start;
    grid-area: img2;
}

#questions p,
#contact ip { grid-area: text; }

#questions .dropdown,
#venue .venue-desc,
#contact *>:last-child { grid-area: list; }

#contact figure {
    align-self: start;
    border-radius: 100%;
    overflow: hidden;
    width: 50%;
}

#contact img {
    aspect-ratio: 1;
    object-position: 70% 50%;
    scale: 1.2;
}

.fps .event-lists {
    display: grid;
    gap: 1.4rem;
    grid-template-columns: 1fr;
}

.list-header {
    display: grid;
    gap: 0.7rem;
    grid-template-areas: "img title" "img text" "img cfa";
}

.list-header h3 {
    grid-area: title;
    hyphens: manual;
    margin: 0;
}

.list-header .btn {
    align-self: center;
    grid-area: cfa;
    margin:0;
}

.list-header p { grid-area: text; }

.list-header figure { grid-area: img; }

#concept img { aspect-ratio: 2/3; }

#references { margin-top: 5.6rem; }

.clients {
    align-items: end;
    display: grid;
    gap: 2.8rem;
    grid-auto-flow: dense;
    grid-template-columns: repeat(2, 1fr);
    justify-content: center;
}

.clients h3 { width: 100%; }

.clients #ernstbusch,
.clients #svg6 { grid-column: span 2; }

.clients path,
.clients polygon {
    display: unset;
    fill: var(--bg);
}

@media (min-width: 720px) {

    .fps { width: 100%; }

    #claim {
        align-items: start;
        grid-template-columns: repeat(2, 1fr);
    }

    #claim .claim-title {
        justify-self: right;
        margin: 0 0 0 auto;
        max-width: 12ch;
    }

    .claim-text {
        justify-self: left;
        max-width: 35ch;
    }

    .claim-cfa {
        grid-column: 1/-1;
        margin: 0 auto;
    }

    #questions,
    #venue {
        grid-template-areas: "title img" "text text" "img2 list";
        grid-template-columns: repeat(2, 1fr);
    }

    #venue {
        grid-template-areas: "title img" "img2 list";
        grid-template-columns: repeat(2, 1fr);
    }

    #concept {
        grid-template-areas: "title img text" "video video text";
        grid-template-columns: repeat(3, 1fr);
    }

    #concept h2 { align-self: end; grid-area: title; }
    #concept figure { grid-area: img; }
    #concept video { grid-area: video; }
    #concept .about { grid-area: text; }

    #contact {
        grid-template-areas: "title img" "text list";
        grid-template-columns: repeat(2, 1fr);
    }

    #questions figure:first-of-type {
        margin: 0 auto;
        width: 50%;
    }

    .clients { grid-template-columns: repeat(6, 1fr); }
}

@media (orientation: landscape) and (min-width: 720px) {

    .fps h2 {
        hyphens: manual;
        -webkit-hyphens: manual;
    }

    .fps .event-lists {
        gap: 2.8rem;
        grid-template-columns: repeat(3, 1fr);
    }

    .list-header {
        grid-template-areas: "img" "title" "text" "cfa";
    }

    .event-list:nth-child(even) .list-header {
        gap: 1.4rem;
        grid-template-areas: "title" "text" "cfa" "img" ;
    }
}







.kontakt .dropdown { margin: 1.4rem 0; }

.kontakt .dropdown > .details {
    border: none !important;
    padding: 0.7rem 0;
}

.kontakt .dropdown .summary {
    font-feature-settings: normal;
    font-variant-caps: unset;
    padding-bottom:0;
}


.kontakt .desc { margin-top: 2.8rem; }

.page h1 {
    font-size: 6.854rem;
    line-height: 7rem;
    padding:0;
    position: relative;
    width: 100%;
}

@media (min-width: 1024px) {
    .page h1 {
        font-size: 8.472rem;
        line-height: 8.75rem;
    }
}

.page .sidebar > aside + *,
.page .sidebar > div + * {
    margin-top: 1.4rem;
}

.page .sidebar button { margin-top: 0; }

.page .sidebar .mc4wp-form h2 { display: none; }



.summary .tags {
    font-size: 0.764em;
    color: var(--htext);
    order:3;
}


.postdate,
.teaser .teachers {
    font-family: var(--font1);
    font-size: 1rem;
    line-height: 1.4;
    font-weight: 400;
}

.single .teachers .has_subs {
    display: inline-block;
    font-size: 1.236rem;
    line-height: 1.4rem;
    position:relative;
    top: 0;
}

.teacher {
    display: inline-block;
    position:relative;
    text-decoration:underline;
    z-index: 1;
}

.teacher:hover, .teacher:visited { text-decoration:underline; }

.teacher .name { display:block; }

.teacher:hover {
/*    color: var(--bg);
    opacity: 1;*/
}

.postdate {
    display:block;
    font-size: 0.764rem;
    margin: 0.35rem 0 0;
}

.tag {
    background-color: var(--acc3);
    border-radius: 1.4rem;
    color: #fff;
    display: inline-block;
    font-family: var(--font1);
    font-feature-settings: "kern";
    font-size: 0.764rem;
    font-weight: 400;
    height: 1;
    hyphens:none;
    letter-spacing: 0.03em;
    line-height: 1;
    padding: 0.175rem 0.35rem;
    vertical-align: 0.0855rem;
    white-space: nowrap;
}

.category, .mode, .levels, .series {
    font-variant-caps: all-small-caps;
    font-weight:700;
    position: absolute;
    top: 1.4rem;
}

.question { font-weight:700; }

.date-simple-filters .input-field {
    padding-bottom: 0.7rem;
}


.itemlist {
    padding: 0;
    width: 100%;
}

.day { width: 100%; }

.itemlist .item {
    padding: 1.4rem 0;
    width: 100%;
}

.itemlist .item.preview { padding-bottom: 2.8rem; }

.itemlist.filterable .item,
.calendar .day > * { opacity:0; }


.itemlist .weekday,
.single .itemlist .weekday {
    border-bottom: 1px solid;
    border-top: 1px solid;
    color: var(--acc1);
    margin: 0;
}

.itemlist .weekday {
    background-color: rgb(var(--tacc1), 0.1);
    font-family: var(--font1);
    font-size: 1rem;
    font-weight: 400;
    padding: 0.35rem 0 0.35rem 0.35rem;
    position: relative;
}

.itemlist .events { margin:0; }

.list-item + .list-item {
    border-top: 1px solid var(--text3);
}

.itemlist .list-item:last-child,
.calendar .list-item:last-child {
    /*border-bottom: 1px solid var(--text3);*/
}

.itemlist .event.empty {
    display:block;
    padding: 0.7rem 0.35rem 2.8rem;
}

.list-item > a {
    display: grid;
    gap: 1.4rem 0.7rem;
    grid-template-columns: 2fr 1fr;
    grid-template-areas: "title pic" "info info";
    justify-items: start;
    margin: 0;
    overflow: hidden;
    padding: 0.7rem 0.35rem 2.8rem;
    position:relative;
    text-align: left;
    text-decoration: none;
    transition: color 0.3s;
    width: 100%;
}

.fps .list-item a {
    padding-left: 0;
    padding-right:0;
}

.week .list-item > a,
.day .list-item > a {
    grid-template-columns: unset;
    grid-template-areas: "title" "info";
}


.list-item > a:hover { opacity:1; }

.list-item > a::before {
    background-color: var(--acc1);
    content: '';
    height: 100%;
    position: absolute;
    transform: scaleY(0);
    transform-origin: center bottom 0;
    transition: transform 600ms cubic-bezier(.19,1,.22,1);
    width: 100%;
    z-index: -1;
}

.list-item > a:hover::before {
    transform: scaleY(1);
    transition: transform 400ms cubic-bezier(1,0,.25,.995);
}

.list-item .title-wrap {
    color: var(--text);
    display: flex;
    flex-direction: column;
    grid-area: title;
}

.list-item .info {
    color: var(--text2);
    grid-area: info;
    width: 100%;
}

.list-item .title-wrap > *,
.list-item .info > * { pointer-events:none; }

.list-item > a:hover .title,
.list-item > a:hover .subtitle,
.list-item > a:hover .info { color: var(--bg); }

.list-item .title {
    align-items: center;
    font-family: var(--font1);
    font-size: 1.618rem;
    font-weight:700;
    line-height: 1.75rem;
    margin:0;
    order: 2;
    text-decoration: none;
}

.list-item .title ion-icon {
    padding-left: 0.175rem;
    transform: rotate(45deg);
    transition: transform 600ms cubic-bezier(.19,1,.22,1);
    vertical-align: -0.2em;
}

.list-item .subtitle {
    color: var(--text2);
    font-family: var(--font1);
    font-variant-numeric: tabular-nums;
    font-weight: 400;
    margin:0 0 0.35rem;
    order: 1;
}

.list-item .subtitle.time { justify-self: start; }

.list-item .info-item {
    display: grid;
    font-size: 0.764rem;
    gap: 0 1.4rem;
    grid-template-columns: 1fr 4fr;
}

.list-item .info-item + .info-item {
    border-top: 1px solid;
    margin-top: 0.35rem;
    padding: 0.35rem 0 0;
}

.info-item dt {
    grid-column: 1;
}

.info-item dd {
    grid-column: 2;
}

.info-item .person { display: block; }

.item .teachers,
.event .teachers,
.item .postdate {display:block;}


.item .teaser {
    margin-top: 0;
    position: relative;
}

.news .item.with-media .teaser,
.preview.video {margin-top: 0.7rem;}

.item .title {
    font-family: var(--font2);
    font-size: 1.236rem;
    font-weight: 700;
    line-height: 1.4rem;
    text-decoration: none;
    transition: color 0.3s;
    width:100%;
}

.item .title > a { text-decoration:none; }

.item.preview .title { margin:0 0 1.4rem; }

.item.preview.with-media .title { margin-top: -1.4rem; }

.item .read-more {
    display: flex;
    justify-content: flex-end;
    transform: translateY(-100%);
}

.item.preview .meta { padding-top: 0.7rem; }

.item.preview .postdate {
    display: inline-block;
    font-size: 1rem;
}

.item.preview .btn {
    background-color: var(--bg);
    color: var(--htext);
}

.video .teaser .title {
    margin:0;
    padding: 0.7rem 0;
}

.video .teaser .teachers {
    font-size: 0.764rem;
    padding-top: 0.7rem;
}

.itemlist.masonry .grid-sizer, .itemlist.masonry .gutter-sizer {margin:0;padding:0;}
.itemlist.masonry .item.gutter-sizer {width:0;}

.item.preview .tags { margin-top: 0.7rem; }


.item figure {
    height:0;
    overflow:hidden;
    padding-bottom: 56.25%;
    position:relative;
}

/*.video picture:before {
    content:'';
    display: block;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    position: absolute;
    pointer-events: none;
    z-index: 2;
    background: radial-gradient(circle,#cdc9c442 40%,#221f21 100%);
    mix-blend-mode: soft-light;
}*/


.video img,
.video image {
    filter: contrast(0.9) brightness(1.2) saturate(0.9);
}

.item img { position:absolute; }

.item img.emoji { position:static; }



.video .poster {
    aspect-ratio: 16/9;
    background-color: var(--bg3);
    height: 100%;
    padding-bottom:0;
    width: 100%;
}

.video > a,
.video > a:hover,
.video .title-wrap a,
.video .title-wrap a:hover {
    color: #fff;
    text-decoration: none;
}

.video .img-wrap {
    display: block;
    position: relative;
}

.video .img-wrap svg {
    height: 100%;
    overflow: visible;
    position: absolute;
    width: 100%;
}

.video .img-wrap img {
    aspect-ratio: 16/9;
    position:static;
}

/*.video .img-wrap .has-cover img { transform: none; }*/

.video .title-wrap {
    color: #fff;
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 0.7rem 0 0.7rem 0.7rem;
    position: absolute;
    top:0;
    width: 125%;
    z-index: 1;
}

.single-video figcaption { display:none; }

.video .title-wrap .title {
    font-family: var(--font2);
    font-size: 1rem;
    hyphens: manual;
    margin: 0.7rem 0 0;
    padding:0;
}

.video .title-wrap .series {
    color: var(--text);
    display: block;
    font-size: 0.764rem;
    font-weight: 400;
    line-height: 1.12rem;
    margin: 0;
    position: relative;
    top:0;
}

.video .title-wrap .teachers {
    font-size: 0.764rem;
    margin: auto 0 0;
}

.video .title-wrap .teachers::before { content: "mit "; }

.video .title-wrap .hover-reveal {
    height: 5.6rem;
    width: 5.6rem;
}

@media (pointer: fine) {

    .list-item .title ion-icon {
        bottom:0;
        position: absolute;
        right:0;
        transform: rotate(45deg) translateX(-100%) translateY(calc(100% + 2.1rem));
    }

    .list-item a:hover .title ion-icon {
        transform: rotate(45deg) translateX(0) translateY(0);
        transition: transform 400ms cubic-bezier(1,0,.25,.995);
    }

}

@media (min-width: 720px) {
    .itemlist .list-item > a {
        align-items: baseline;
        grid-template-columns: 1fr 3fr 3fr;
        grid-template-areas: "title info" "photo info";
    }

    .day .list-item > a {
        gap: 1.4rem;
        grid-template-columns: repeat(2, 1fr);
        grid-template-areas: "title info";
    }

    .list-item .photo-mobile {
        align-self: center;
        max-width: 4.2rem;
    }


    .itemlist.masonry .grid-sizer { display:block !important; }
    .itemlist.masonry .item.gutter-sizer { display:block !important; width:1.4rem;}

    .itemlist.masonry .item {
        display: block;
        margin-bottom: 0;
        width: calc(50% - 0.7rem);
    }
}

.hint {
    font-size: 0.764rem;
    grid-column: 1/-1;
    padding-bottom: 0.35rem;
    width: 100%;
}

.hint-cards { padding-bottom:0; }



.faq .item {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding:0 0 1.4rem;
}

.question {
    display: inline-block;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.4rem;
    /*width: calc(50% - 0.7rem); for tablet and wider */
    width: 100%;
}

.question > * { margin:0; }

.question + .answer { margin-top: 0; }

.content .answer {
    margin:0;
    width: 100%;
    /*width: calc(50% - 0.7rem); for tablet and wider */
}

.answer .tags {
    font-size: 0.764rem;
    font-style: italic;
    font-variant-caps: all-small-caps;
    font-weight: 700;
    padding-top: 0.7rem;
}

.ticket {
    border-top: 1px solid var(--text2);
    display: flex;
    flex-flow: row wrap;
    gap: 0 0.35rem;
    justify-content: space-between;
    margin-top: 0.7rem;
    padding-top: 0.7rem;
}

.ticket:last-child {
    border-bottom: 1px solid var(--text2);
    margin-bottom: 2.1rem;
    padding-bottom: 0.7rem;
}

.ticket .price {
    font-variant-numeric: tabular-nums;
    order:2;
}

.ticket .name { order:1; }

.tickets-legend { text-align: right; }

.tickets-legend,
.ticket .price,
.ticket .name {
    font-weight: 700;
}

.tickets-legend .min,
.price .min { color: var(--acc3); }

.conditions {
    color: var(--text2);
    order: 3;
    width: 100%;
}



.packages {
    --min-width: 11.2rem;
    --max-width: 1000px;
    --gap: 1.4rem;
    --cols: max(2, 6);
    display: grid;
    grid-auto-flow: dense;
    grid-auto-rows: 1fr;
    grid-gap: var(--gap);
    grid-template-columns: repeat(auto-fill, minmax(max(var(--min-width), calc((100% - var(--gap) * (var(--cols) - 1)) / var(--cols))), 1fr));
    padding: 0 0 2.8rem;
    place-items: start stretch;
}

.package {
    border: 1px solid var(--text2);
    display: flex;
    flex-direction: column;
    max-width: min(var(--max-width), 100%);
    padding: 0.7rem;
    position: relative;
}

.package + .package { margin:0; }

.package > a { color: var(--text); }

.package .btn { color: var(--bg); }

.package-title {
    color: var(--bgalt);
    font-family: var(--font1);
    font-feature-settings: "c2sc", "smcp";
    font-size: 1.236rem;
    hyphens: manual;
    letter-spacing: 0.03em;
    line-height: 1.4rem;
    margin: 1.4rem 0 0.35rem;
    text-align: center;
}

.limited .package-title { color: var(--acc1); }

.package-audience {
    font-size: 0.764rem;
    line-height: 1.05rem;
    padding-bottom: 0.35rem;
    text-align: center;
}

.package-limit {
    background: var(--acc1);
    color: var(--bg);
    font-feature-settings: "c2sc", "smcp";
    font-size: 0.764rem;
    font-weight: 700;
    margin: 0.7rem 0 0;
    padding: 0 0.35rem;
    position: absolute;
    right:0;
    top: 0;
    text-align: center;
}

.package-pricing {
    margin: 0.7rem 0 1.4rem;
}

.price-option {
    text-align: center;
}

.price-option .label,
.price-option .amount {
    display: inline;
}


.price-min {
    align-items: center;
    display: flex;
    justify-content: center;
    padding-bottom: calc( 3.5rem - 3.236 );
}

.price-min .label {
    font-weight: 700;
    padding-right: 0.175rem;
    /*margin-top: 0.7rem;*/
}


.price-min .amount {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1;
}

.price-min::after,
.price-fixed::after {
    content: "\20AC";
    font-size: 1rem;
    font-weight: 700;
    order: 2;
    padding-left: 0.175rem;
}

.price-rec {
    font-size: 0.764rem;
    line-height: 1.05rem;
    padding-top: 0.35rem;
}

.price-rec::after {
    content: "\2009\20AC";
    font-size: 0.764rem;
}

.price-min-max::after {
    content: "\20AC";
    padding-left: 0.175rem;
}

.package-features {
    font-size: 0.764rem;
    line-height: 1.05rem;
    list-style: none;
    margin: 0 0 1.4rem;
    padding: 0;
}

.package .feature {
    padding-left: 1.05rem;
    position: relative;
}

.package .feature + .feature { margin-top: 0.35rem; }

.package .feature::before {
    background: url(./img/checkmark.svg) left center /cover no-repeat;
    content: "";
    height: 0.764rem;
    left: 0;
    position: absolute;
    top: 0.175rem;
    width: 0.764rem;
}

.btn.purchase {
    align-self: center;
}

.regdate { display:block; }
.regdate { display:block; }


.outlined {
    color: transparent;
    font-size: 3.236rem;
    font-weight: 700;
    hyphens: manual;
    line-height: 3.5rem;
    -webkit-text-stroke: 1px var(--text);
}


.gallery-item {
    align-items: start;
    border-bottom: 1px solid var(--text3);
    display: grid;
    grid-gap: 0.7rem 1.4rem;
    grid-template-areas: "title title" "text text" "meta meta" ;
    grid-template-columns: 1fr 2fr;
    padding-bottom: 2.8rem;
    position: relative;

    & > a {
        align-items: end;
        display: flex;
        grid-area: title;
    }

    &.latest .title {
        color: var(--acc3);
    }
}

.gallery-item + .gallery-item { margin-top: 2.8rem; }

.gallery-item:last-of-type { margin-bottom: 4.2rem; }

.gallery-item a:hover { opacity:1; }

.gallery-item .poster {
    order: 2;
    width: 40%;
}

.gallery-item img {
    aspect-ratio: 1/1;
    border-radius: 100%;
}

.gallery-item .title {
    color: var(--acc1);
    font-family: var(--font1);
    font-size: 2rem;
    grid-area: title;
    line-height: 2.1rem;
    margin: 0 1.4rem 0 0;
    order: 1;
    padding: 0;
    width: 100%;
}

.gallery-item.cfa .title {
    color: var(--htext);
    font-size: 1.618rem;
    line-height: 1.75rem;
}

.gallery-item.cfa .title a { color: var(--acc1); }

.gallery-item .tag {
    margin-left: 0.35rem;
    vertical-align: 0.25em;
}

.gallery-item .teaser {
    grid-area: text;
    position: relative;
}

.gallery-item .meta {
    display: flex;
    grid-area: meta;
    justify-content: flex-start;
    margin: 0;
    width: 100%;
}

.gallery-item .teachers,
.gallery-item .categories {
    align-self: end;
    color: var(--htext);
    display: inline;
    font-family: var(--font1);
    font-size: 0.764em;
    font-weight: 700;
    line-height: 1rem;
    padding-bottom: 0;
}



.gallery-item .teachers a { color: var(--htext); }

.gallery-item .teachers .name {
    padding-bottom: 1px;
}

.gallery-item .teacher { display: inline; }

.gallery-item .date {
    align-self: end;
    color: var(--htext);
    display: inline;
    font-family: var(--font1);
    font-size: 2rem;
    font-weight: 700;
    line-height: 2.1rem;
    padding-right: 1.4rem;
    position: relative;
    top: 0.175rem;
}

.gallery-item .date-period {
    align-items: last baseline;
    display: flex;
    flex-flow: row wrap;
}

.gallery-item .date-period:has(.days + .days) {
    letter-spacing: 0.03em;
}

.gallery-item .date-period .days {
    font-size: 0.764rem;
    font-weight: 800;
    line-height: 0.8rem;
    padding: 0 0.35rem 0.35rem 0;
    text-align: right;
}

.gallery-item .date-period .days + .days {
    text-align: left;
    width: 100%;
}

.gallery-item .month,
.date-simple {
    font-weight: 600;
}

.gallery-item .date-period-small {
    display: flex;
    font-size: 0.764rem;
    font-weight: 800;
    flex-direction: column;
    font-size: 1rem;
    line-height: 0.8rem;
    padding: 0 0.35rem 0.175rem 0;
    text-align: right;
}

@media (min-width: 720px) {
    .gallery-item {
        grid-template-columns: 2fr 2fr 1fr;
        grid-template-areas: "title title img" "text text img" "meta meta img";
    }

    .gallery-item > a {
        display: contents;
        grid-area: unset;
    }

    .gallery-item .title {
        grid-area: title;
        transition: all 300ms ease-in-out;
    }

    .gallery-item .poster {
        grid-area: img;
        width: 100%;
    }
}

@media (orientation: landscape) and (pointer: fine) {
    .gallery-item {
        align-items: last baseline;
        grid-template-columns: minmax(11ch, 1fr) 5fr 1fr;
        grid-template-areas: "date title teachers" "... text ...";
    }

    .gallery-item > a {
        display: block;
        grid-area: title;
    }

    .gallery-item .title {
        font-family: var(--font2);
        font-size: 3.236rem;
        hyphens: auto;
        line-height: 3.5rem;
        letter-spacing: normal;
        margin: 0;
        transition: color 300ms ease-in-out;
    }

    .gallery-item .reveal:hover .title { color: var(--bg); }
    .gallery-item.cfa > a:hover .title { color: var(--htext); }

    .gallery-item > .reveal .hover-reveal {
        height: unset;
        max-width: 500px;
        width: 50vw;
    }

    .gallery-item .teaser {
        font-size: 0.764rem;
        max-width: 70ch;
        padding-top: 0.7rem;
    }

    .gallery-item .meta {
        display: contents;
        grid-area: unset;
    }

    .gallery-item .teachers {
        grid-area: teachers;
        padding-bottom: 0.35rem;
    }

    .gallery-item .teachers .name {
        display: block;
    }

    .gallery-item .date {
        grid-area: date;
        padding-bottom: 0.35rem;
        padding-right:0;
        top: 0;
    }
}


.slide .caption {
    display:block;
    color: #fff;
    font-family: var(--font2);
    font-size: 2.618rem;
    font-weight: 700;
    line-height: 2.8rem;
    padding: 0 1.4rem;
    text-align: right;
}

.slide .count { font-size: 1.236rem; }

.slide .copyright { text-transform: capitalize; }

.scf-website3dhhsy3 {
    height:0;
    opacity:0;
    overflow: hidden;
    width:0;
    z-index:-1;
}

.scf-submit { margin-top: 1.4rem; }


.ticker {
    /*box-sizing: content-box;*/
    align-items: baseline;
    display: flex;
    flex-flow: row wrap;
    gap: 2.8rem;
    justify-content: space-between;
    margin: 0 1.4rem;
    /*padding-right: 100%;*/

}

/* For initial load fade-in */
.hero .subhead, .dance .cover, .hero .title, .filters, .fps { opacity:0; }