/* ----------------------------------------------------- */
/* CODE
/* The Anderen • July 2026
/* ----------------------------------------------------- */

*, *:before, *:after {
  margin: 0;
  padding: 0;
  border: 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

@font-face {
  font-family: "Eliza";
  src: url("../fonts/Eliza-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: "Eliza";
  src: url("../fonts/Eliza-RegularItalic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
}
@font-face {
  font-family: "Eliza";
  src: url("../fonts/Eliza-Semibold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
}
@font-face {
  font-family: "Eliza";
  src: url("../fonts/Eliza-SemiboldItalic.woff2") format("woff2");
  font-weight: 700;
  font-style: italic;
}
@font-face {
  font-family: "Eliza Mono";
  src: url("../fonts/ElizaMono-Regular.woff") format("woff"),
  url("../fonts/ElizaMono-Regular.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Jost";
  src: url("../fonts/Jost-VF.woff2") format("woff2");
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}


/* ------------------------------------------------------------------- */
/* !$ Base */
/* ------------------------------------------------------------------- */

:root {
  --padding: clamp(20px, calc(20px + 10 * ((100vw - 420px) / 1200)), 30px);
  --text-size: clamp(15px, calc(15px + 9 * ((100vw - 420px) / 1200)), 24px);
  --line-height: 1.25;
  --space: calc(var(--text-size)*var(--line-height));
  --space-S: calc(var(--space)*0.8);
  --space-L: calc(var(--space)*4);
  --icon-size: calc(var(--text-size)*2);
  --button-width: calc(var(--padding) + var(--icon-size));
  --col-light: #fafafa;
  --col-main: #DFA84F;
  --ratio: calc(2000 / 2500);
  --opacity-light: 0.3;
  --opacity-dark: 0.6;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}
/* Fallback for browsers that don't support clamp */
@supports not (padding: clamp(1px, 1vw, 1px)) {
  :root {
    --padding: 20px;
    --text-size: 15px;
  }
}

::selection {background: rgba(0,0,0,0.99); color: var(--col-light);}
::-moz-selection {background: rgba(0,0,0,0.99); color: var(--col-light);}

html {
  -webkit-text-size-adjust: 100%;
}
body {
  font-family: "Eliza", serif;
  font-weight: normal;
  font-feature-settings: "liga", "dlig", "kern" 1;
  font-kerning: normal;
  -webkit-tap-highlight-color: transparent;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-synthesis: none;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.sr-only-focusable:not(:focus):not(:focus-within) {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

svg {
  overflow: visible;
}
img {
  width: 100%;
  height: auto;
  vertical-align: bottom;
}
figure {
  position: relative;
  display: block;
  width: 100%;
}
picture {
  display: block;
  overflow: hidden;
  position: relative;
  padding-bottom: calc(var(--ratio) * 100%);
  background-color: rgba(0,0,0,0.1);
}
picture img {
  position: absolute;
  object-fit: cover;
  object-position: center;
  width: 100%;
  height: 100%;
}
figcaption {
  margin-top: calc(var(--space)/6);
}


/* ------------------------------------------------------------------- */
/* !$ Link */
/* ------------------------------------------------------------------- */

*:focus, *:focus-visible {
  outline: none;
}

a {
  color: currentcolor;
  opacity: 1;
  text-decoration: none;
  position: relative;
}

.text a {
  text-decoration: underline;
  text-decoration-thickness: from-font;
  word-wrap: break-word;
  text-underline-offset: calc(var(--text-size)*0.1);
}

.nav .is-current a {
  opacity: var(--opacity-dark);
}
.nav-quick a,
.nav li.is-building a {
  opacity: 1;
}
.nav .is-current a[aria-current] {
  pointer-events: none;
  color: var(--nav-color, currentColor);
}

.nav a,
button {
  transform: translateZ(0);
  transition: color 0.6s var(--ease), opacity 0.6s var(--ease);
}
.copyright,
.nav-secondary a,
.nav-languages a,
button[aria-pressed="false"] {
  opacity: var(--opacity-light);
}

.link, .link-to,
.quick-filter, #btn-filter, .filter-item, .filter-reset {
  position: relative;
  transition: color 0.6s var(--ease), opacity 0.6s var(--ease);
}


.cta {
  border: 1px solid;
  border-radius: var(--text-size);
  padding: calc(var(--text-size)/3) var(--text-size);
}



/* ------------------------------------------------------------------- */
/* !$ Text */
/* ------------------------------------------------------------------- */

.serif {
  font-family: 'Eliza', serif;
}
.sans {
  font-family: 'Jost', sans-serif;
}
.mono {
  font-family: "Eliza Mono", monospace;
}


body {
  font-size: var(--text-size);
  line-height: var(--line-height);
}
.text-XXL {
  font-size: calc(var(--text-size)*4);
  line-height: calc(var(--line-height)*0.66);
  letter-spacing: calc(var(--text-size)*0.2 * -1);
}
.events-wrapper[data-view="list"] .text-XXL,
.text-XL, h1 {
  font-size: calc(var(--text-size)*2);
  line-height: calc(var(--line-height)*0.8);
  letter-spacing: calc(var(--text-size)*0.06 * -1);
}
.text-L {
  font-size: calc(var(--text-size)*1.5);
  line-height: calc(var(--line-height)*0.8);
  letter-spacing: calc(var(--text-size)*0.03 * -1);
}
.text-M, h2 {
  font-size: var(--text-size);
}
.text-N {
  font-size: var(--text-size);
}
.text-S, h3 {
  font-family: 'Jost', sans-serif;
  font-size: calc(var(--text-size)*0.8);
  font-weight: 550;
  line-height: calc(var(--line-height)*0.9);
  letter-spacing: calc(var(--text-size)*0.02);
}
.text-XS, h4 {
  font-family: 'Jost', sans-serif;
  font-size: calc(var(--text-size)*0.6);
  font-weight: 650;
  letter-spacing: calc(var(--text-size)*0.04);
}

.text {
  max-width: 900px;
}

.text-S.mono {
  font-family: "Eliza Mono", monospace;
  font-weight: normal;
}

.regular {
  font-weight: normal;
}

em {
  font-style: italic;
}
strong, .bold, h2 {
  font-weight: 700;
}
.uppercase {
  text-transform: uppercase;
}

.text h3 + p,
.text h3 + ul,
.text h3 + ol {
  margin-top: var(--space);
}
.text > *:first-child {
  margin-top: 0;
}
.text p + p,
.text p + ul, .text ul + p,
.text p + ol, .text ol + p {
  margin-top: var(--space);
}

.text h1,
.heading h1 {
  margin-bottom: calc(var(--space)*2);
  text-wrap: pretty;
}

.text h2 {
  font-size: var(--text-size);
  margin-top: calc(var(--space)/3*6);
  margin-bottom: var(--space);
  font-weight: bold;
  border-top: 1px solid;
  padding-top: calc(var(--space)/3);
}
.text h3 {
 margin-top: calc(var(--space)*2);
}

.text {
  counter-reset: k-ol k-alpha;
}
.text ul,
.text ol {
  list-style: none;
  padding-left: 0;
}
.text ul li,
.text ol li {
  position: relative;
  padding-left: calc(var(--text-size) * 2);
}
.text ul li::before,
.text ol li::before {
  position: absolute;
  left: 0;
  top: 0;
}

.text ul li::before {
  content: '—';
}

.text ol:not(.ol-alpha) > li {
  counter-increment: k-ol;
}
.text ol:not(.ol-alpha) > li::before {
  content: counter(k-ol) ".";
}

.text ol.ol-alpha > li {
  counter-increment: k-alpha;
}
.text ol.ol-alpha > li::before {
  content: counter(k-alpha, lower-alpha) ".";
}

blockquote {
  margin: calc(var(--space)*2) 0;
  padding-left: calc(var(--space)*2);
}
blockquote:first-child {
  margin-top: 0;
}
blockquote:last-child {
  margin-bottom: 0;
}

h1.title, h2.title, h3.title {
  text-wrap: balance;
}

.block-title,
.section-title {
  margin-bottom: var(--space);
}
.page-title {
  text-wrap: balance;
  margin-bottom: var(--space-L);
}

.block.document {
  display: flex;
  flex-direction: column;
  gap: calc(var(--space)/2);
  text-wrap: balance;
}
.file-info {
  margin-top: calc(var(--space)/6);
  opacity: var(--opacity-light);
  display: block;
}

/* ------------------------------------------------------------------- */
/* !$ Container */
/* ------------------------------------------------------------------- */

html {
  scroll-behavior: smooth;
}
section {
  position: relative;
  scroll-margin-top: calc(var(--padding) + var(--space)/2 + 1px);
}

body {
  position: relative;
  margin: 0 auto;
  width: 100%;
  background-color: #EEF1E9;
  padding-left: calc(var(--button-width));
}
.page-main,
.page-footer {
  color: var(--main-color, currentColor);
  position: relative;
}

.scroll-container {
  overflow-y: scroll;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
}
.scroll-container.horizontal {
  overflow-y: hidden;
  overflow-x: scroll;
}
.no-select, .icon {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.no-drag, .icon, .btn img, .dot img {
  -webkit-user-drag: none;
  -khtml-user-drag: none;
  -moz-user-drag: none;
  -o-user-drag: none;
  user-drag: none;
}


.section {
  margin-bottom: var(--space-L);
  padding-left: var(--padding);
  padding-right: var(--padding);
}
.section:last-child {
  margin-bottom: 0;
}
.section.header {
  padding-top: var(--space);
}
.section.header h1 {
  text-align: center;
}

.chapter-container,
.nav-chapter {
  margin-top: var(--space-L);
}


.block {
  margin-bottom: var(--space);
}
.block:last-child {
  margin-bottom: 0;
}

.hero {
  margin-bottom: 0;
}
.intro {
  padding-top: var(--padding);
  padding-bottom: var(--padding);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin-bottom: var(--space);
}



/* ------------------------------------------------------------------- */
/* !$ Header */
/* ------------------------------------------------------------------- */

.page-header {

}

#sidebar {
  position: fixed;
  left: 0;
  top: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  width: var(--button-width);
  height: 100%;
  background-color: var(--col-light);
  transition: background-color 0.3s var(--ease);
  z-index: 99;
}
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 2;
  background: var(--col-main);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.6s var(--ease);
}
body:has(#menu.is-visible)::before,
body:has(#filter.is-visible)::before {
  opacity: 0.3;
  transition-duration: 0.2s;
}

/* safari transparent bars hack */
/* .bg-bleed {
  position: absolute;
  width: var(--button-width);
  right: 0;
  z-index: 2;
  will-change: transform;
}
.bg-bleed.top {
  top: 0;
  height: 100%;
  background-color: var(--col-light);
  transform-origin: top;
}
.bg-bleed.bottom {
  bottom: 0;
  height: 25vh;
  background-color: var(--col-light);
  transform-origin: bottom;
} */

.nav-quick ul,
#btn-menu {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  padding: var(--padding) calc(var(--padding)/2);
}
.nav-quick .is-home {
  margin-bottom: var(--padding);
}
.nav-quick .is-home a {
  display: inline-block;
}
.nav-quick .is-home a ellipse {
  transition: stroke 0.6s var(--ease);
}

#btn-menu {
  flex: 1;
  justify-content: space-between;
  gap: var(--padding);
  padding-top: 0;
}
.btn-text {
  writing-mode: vertical-rl;
}

.icon {
  width: var(--icon-size);
  display: inline-block;
  vertical-align: top;
}

/* hamburger to X animation */
#btn-menu .icon-menu .line-move {
  transform-box: view-box;
  transform-origin: 50% 50%;
  translate: 0 0;
  transition: translate 0.45s var(--ease) 0.45s;
}
#btn-menu .icon-menu .line {
  transform-box: fill-box;
  transform-origin: center;
  rotate: 0deg;
  opacity: 1;
  transform: scale(1);
  transition:
    rotate 0.45s var(--ease),
    scale 0.3s var(--ease) 0.45s;
}
#btn-menu.is-active .icon-menu .line-move {
  transition: translate 0.2s var(--ease);
}
#btn-menu.is-active .icon-menu .line {
  transition:
    rotate 0.45s var(--ease) 0.45s,
    scale 0.3s ease;
}
#btn-menu.is-active .line-top-move {
  translate: 0 44.44%;
}
#btn-menu.is-active .line-bottom-move {
  translate: 0 -44.44%;
}
#btn-menu.is-active .line-top {
  rotate: 45deg;
}
#btn-menu.is-active .line-bottom {
  rotate: -45deg;
}

#menu {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: var(--col-light);
  padding: var(--padding) var(--padding) var(--padding) calc(var(--button-width) + var(--padding));
  transform: translateX(-100%);
  transition: transform 0.45s var(--ease);
  will-change: transform;
  z-index: 6;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
#menu.is-visible {
  transform: translateX(0);
}

.nav li {
  margin-bottom: calc(var(--space)/4);
}
.nav li:last-child {
  margin-bottom: 0;
}

.nav-main {
  margin-top: calc(var(--icon-size)/4*5 + var(--padding));
  margin-bottom: var(--space-L);
}
.menu-container .nav-languages {
  position: absolute;
  left: 0;
  top: 0;
}
.nav-legal a {
  opacity: var(--opacity-light);
}
.nav-languages ul {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--space)/4) calc(var(--padding)/2);
  align-items: start;
  justify-content: start;
}
.nav-languages li {
  margin-bottom: 0;
}
.contact {
  margin-bottom: calc(var(--space)*2);
}
.site-name {
  margin-bottom: calc(var(--space)/4);
  max-width: 300px;
  text-wrap: pretty;
}
.copyright {
  white-space: nowrap;
}

.outer-wrapper {
  position: relative;
}
.wrapper {
  display: flex;
  gap: var(--padding);
  align-items: start;
  justify-content: start;
}
.wrapper.stretched {
  justify-content: space-between;
}
.nav-wrapper {
  margin-top: var(--space);
}






/* ------------------------------------------------------------------- */
/* !$ Homepage */
/* ------------------------------------------------------------------- */

.hero {
  position: relative;
  min-height: 90vh;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  text-align: center;
}
.today {
  position: absolute;
  top: var(--space);
  right: var(--padding);
  display: flex;
  align-items: baseline;
  gap: calc(var(--text-size)/3);
  text-align: right;
}
.today .dot {
  width: calc(var(--text-size)*0.75*0.6);
  height: calc(var(--text-size)*0.75*0.6);
  animation: blink 2s ease-in-out infinite;
}
.today-item {
  color: var(--item-color, currentColor);
}

@keyframes blink {
  0%,
  30% {
    opacity: 1;
  }
  40%,
  60% {
    opacity: 0;
  }
  70%,
  100% {
    opacity: 1;
  }
}

.building-title {
  color: var(--item-color, currentColor);
}
.building-visuals {
}
.building-visual {
  position: absolute;
  pointer-events: none;
}
.building-silhouette {
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
}
.building-hitarea {
  pointer-events: visiblePainted;
}
.building-visual:nth-child(1) {
  top: var(--space);
  left: var(--padding);
  width: 40vmin;
}
.building-visual:nth-child(2) {
  bottom: var(--space);
  right: var(--padding);
  width: 75vmin;
}

.building-details {
  display: contents;
}
.building-details li {
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  z-index: 10;
  transition:
    opacity 0.25s ease,
    visibility 0s linear 0.25s;
}
.building-visual:nth-child(1) .building-details li {
  left: 0;
  top: 0;
}
.building-visual:nth-child(2) .building-details li {
  right: 0;
  bottom: 0;
}
.building-details li.is-active {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}
.building-details img {
  display: block;
  width: 100%;
  height: 100%;
  max-height: calc(100vh - var(--space) * 2);
  object-fit: contain;
}


.tagline {
  text-wrap: balance;
  margin-left: 0;
}


.overview {
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  margin-left: auto;
  margin-right: 0;
}
.overview-item {
  position: relative;
}
.overview-image {
  aspect-ratio: 4 / 5;
  overflow: hidden;
}
.overview-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.overview-info {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  text-align: center;
  color: var(--col-light);
  gap: var(--space);
  background-color: rgba(0,0,0,0.2);
  padding: var(--padding);
}
.overview-buildings {
  position: absolute;
  bottom: calc(var(--space)/2);
  right: calc(var(--padding)/2);
  display: flex;
  gap: calc(var(--padding)/2);
}

.spaces-list {
  display: flex;
  gap: calc(var(--padding)/2);
}
.spaces-list li {
  width: 25%;
  text-align: center;
}
.template-space .spaces-list li {
  width: 33.33%;
}
.spaces-list figure {
  aspect-ratio: 59.4 / 69.5;
  overflow: hidden;
  border-radius: 100%;
  margin-bottom: calc(var(--space)/2);
}
.spaces-list img {
  height: 100%;
  object-fit: cover;
}
.spaces-list .fact {
  margin-bottom: 0;
  margin-top: calc(var(--space)/3);
}

/* ------------------------------------------------------------------- */
/* !$ Event Item */
/* ------------------------------------------------------------------- */

.link-item {
  display: inline-block;
  padding-top: calc(var(--space)/2);
  padding-bottom: calc(var(--space)/2);
  width: 100%;
  height: 100%;
  transition: color 0.6s var(--ease);
}
.event-item.is-active .link-item {
  color: var(--item-color, currentColor);
}
.event-item[data-event-status="cancelled"].is-active .link-item {
  color: currentColor;
}

.events-wrapper[data-view="grid"] .link-item {
  padding-left: 0;
  padding-right: 0;
}

.event-item[data-event-status="cancelled"] .link-item {
  opacity: var(--opacity-light);
}
.event-item[data-event-status="cancelled"] .dot {
  background-color: currentColor;
}
.event-item[data-event-status="cancelled"] .status {
  margin-top: var(--space);
  text-align: right;
}

.building-abbr {
  display: inline-flex;
  align-items: baseline;
  gap: calc(var(--text-size)/3);
}
.dot {
  display: inline-block;
  width: calc(var(--text-size)*0.75);
  height: calc(var(--text-size)*0.75);
  border-radius: 50%;
  background-color: var(--item-color, currentColor);
}

.event-title {
  margin-top: var(--space);
  text-wrap: pretty;
}
.date {
  text-align: right;
}

.link-to {
  margin-top: var(--space);
  display: inline-block;
  opacity: var(--opacity-light);
}


#event-dialog {
  position: fixed;
  left: calc(50% + var(--button-width)/2);
  top: 50%;
  transform: translate(-50%, -50%);
  padding: var(--padding);
  color: var(--col-light);
  background-color: var(--item-color, #000);
  width: calc((100% - var(--button-width) - var(--padding)*2)/3*2);
}
#event-dialog.status-cancelled {
  background-color: grey;
}
#event-dialog.status-cancelled .scheduled,
#event-dialog.status-cancelled .time,
#event-dialog.status-rescheduled .scheduled {
  text-decoration: line-through;
  opacity: var(--opacity-light);
}

.wrapper.details {
  margin-top: var(--space);
  align-items: baseline;
}
.tags-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--space)/3);
}
.tag-item.lang {
  opacity: var(--opacity-light);
}
#event-dialog .status {
  opacity: var(--opacity-light);
}

.wrapper.grid {
  display: grid;
  gap: 0;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
  border-top: 1px solid currentColor;
  margin-top: var(--space);
}
.wrapper.grid .inner-wrapper {
  padding-top: calc(var(--space)*2);
}
.wrapper.grid .general {
  padding-right: calc(var(--padding)/2);
}
.wrapper.grid .entry {
  border-left: 1px solid currentColor;
  padding-left: calc(var(--padding)/2);
}
.wrapper.grid .inner-wrapper:only-child {
  grid-column: 1 / -1;
  padding-left: 0;
  border-left: 0;
  padding-right: 0;
}

.info-title {
  margin-bottom: calc(var(--space)/3);
}


/* ------------------------------------------------------------------- */
/* !$ Events */
/* ------------------------------------------------------------------- */

.view-switch {
  display: flex;
  align-items: center;
  gap: calc(var(--padding)/2);
}
.view-switch button {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}
.view-switch .icon {
  width: calc(var(--text-size)*1.05);
  transform: translateY(5%);
}
.view-switch button span {
  display: inline-block;
  max-width: 0;
  overflow: hidden;
  opacity: 0;
  white-space: nowrap;
  transition:
    max-width 0.25s ease,
    opacity 0.12s ease,
    margin-left 0.25s ease;
}

.view-switch button[aria-pressed="false"] {
  opacity: var(--opacity-dark);
}
.view-switch button[aria-pressed="true"] {
  opacity: 1;
}

.events-wrapper {
  position: relative;
  display: grid;
  border-top: 1px solid currentColor;
}
.events-wrapper::after {
  content: '';
  position: absolute;
  width: 100%;
  bottom: 0;
  border-bottom: 1px solid currentColor;
}
.events-wrapper[data-view="grid"] {
  grid-template-columns: repeat(1, minmax(0, 1fr));
}
.events-wrapper[data-view="grid"] .event-item {
  border-bottom: 1px solid currentColor;
}

.month {
  margin-bottom: calc(var(--space)*2);
}
.month-title {
  position: -webkit-sticky;
  position: sticky;
  top: var(--padding);
  z-index: 1;
  display: inline-block;
  padding: calc(var(--space)/6) 0;
  margin-bottom: calc(var(--space)/6*5);
  transition: padding 0.3s var(--ease), background 0.3s var(--ease);
}
.month-title.is-sticky {
  background-color: var(--col-light);
  padding: calc(var(--space)/6) calc(var(--space)/2);
}
.month .events-wrapper {

}

.events-wrapper[data-view="list"] .event-item {
  border-bottom: 1px solid currentColor;
}
.events-wrapper[data-view="list"] .link-item {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: var(--padding);
  align-items: center;
}
.events-wrapper[data-view="list"] .wrapper:first-child {
  grid-column: 1 / 2;
}
.events-wrapper[data-view="list"] .event-title {
  grid-column: 2 / 5;
  margin-top: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.events-wrapper[data-view="list"] .organizer {
  grid-column: 5 / 9;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-right: calc(var(--text-size)*3);
}
.events-wrapper[data-view="list"] .building-abbr {
  position: absolute;
  right: 0;
  top: calc(var(--space)*0.8/2 + var(--padding)/2);
}
.events-wrapper[data-view="list"] .status {
  display: none;
}


.controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.quick-filters {
  display: flex;
  align-items: baseline;
  gap: calc(var(--space)/3);
}
.quick-filter,
#btn-filter {
  opacity: var(--opacity-dark);
}
.quick-filter.is-active,
#btn-filter.is-active {
  opacity: 1;
}

.filter-container {
  position: fixed;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  padding: var(--padding);
  color: var(--col-light);
  background-color: #000;
  transform: translateX(100%);
  transition: transform 0.45s var(--ease);
  will-change: transform;
  z-index: 100;
}
.filter-container.is-visible {
  transform: translateY(0);
}
.filter-container .btn-close,
.filter-container .filter-reset {
  position: absolute;
  top: var(--padding);
}
.filter-container .btn-close {
  right: var(--padding);
}
.filter-container .filter-reset {
  left: var(--padding);
}

.filter-container .accordion-item.is-active .accordion-itemContent {
  margin-top: 0;
  margin-bottom: var(--space);
}

.filter-groups {
  margin-top: var(--space);
}
.filter-list {
  text-wrap: balance;
}
.filter-list.building {
  margin-top: calc(var(--icon-size)/4*5 + var(--padding));
  margin-bottom: calc(var(--space)*2);
}
.filter-list li {
  margin-bottom: calc(var(--space) / 4);
}
.filter-list li:last-child {
  margin-bottom: 0;
}
.filter-item {
  opacity: var(--opacity-dark);
}
.filter-item.is-active {
  opacity: 1;
}
.is-disabled {
  pointer-events: none;
  opacity: var(--opacity-light);
}
.filter-reset {
  opacity: var(--opacity-dark);
}

.events-pagination {
  display: flex;
  gap: var(--padding);
  justify-content: end;
}


/* ------------------------------------------------------------------- */
/* !$ Filter chips */
/* ------------------------------------------------------------------- */

.events-active-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--padding);
  margin-bottom: var(--space);
}

.chips-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--space) / 3);
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--text-size) / 3);
  padding: calc(var(--text-size) / 4) calc(var(--text-size) / 2);
  border: 1px solid currentColor;
  border-radius: var(--text-size);
  line-height: 1;
  white-space: nowrap;
  transition:
    color 0.3s var(--ease),
    background-color 0.3s var(--ease),
    opacity 0.3s var(--ease);
}
.chip-icon {
  width: calc(var(--text-size) * 0.5);
  height: calc(var(--text-size) * 0.5);
  flex: 0 0 auto;
}
.events-active-toolbar .filter-reset {
  flex: 0 0 auto;
  opacity: var(--opacity-light);
}



/* ------------------------------------------------------------------- */
/* !$ Building */
/* ------------------------------------------------------------------- */

.template-building .hero {
  padding: 0;
  height: 50vmax;
  min-height: inherit;
  overflow: hidden;
}
.template-building .hero figure {
  height: 100%;
}
.template-building .hero img {
  height: 100%;
  object-fit: cover;
}

.template-building .rendering {
  width: 50%;
  margin-left: auto;
}

.nav-chapter {
  display: none;
}
.nav-chapter li {
  border-top: 1px solid currentColor;
  margin-bottom: 0;
}
.nav-chapter li:last-child {
  border-bottom: 1px solid currentColor;
}
.nav-chapter a {
  display: block;
  padding-top: calc(var(--space)/2);
  padding-bottom: calc(var(--space)/2);
}

.fact {
  margin-bottom: calc(var(--space)/3);
}
.fact.length,
.fact.width,
.fact.height {
  display: inline-block;
  vertical-align: top;
  margin-right: calc(var(--space)/2);
  white-space: nowrap;
}

.floorplan {
  margin-left: 40%;
}
.floorplan figure {

}

.section.details .block {
  margin-bottom: calc(var(--space)*2);
  max-width: 900px;
}
.section.details .block-title {
  margin-bottom: calc(var(--space)/2);
}
.section.details h3 + p, .section.details h3 + ul {
  margin-top: calc(var(--space)/2);
}

.section.details .list li:first-child {
  border-top: 1px solid;
}
.section.details .list li {
  border-bottom: 1px solid;
  padding: calc(var(--space)/6) 0;
}
.section.details .list li::before {
  content: '';
}


/* ------------------------------------------------------------------- */
/* !$ Space */
/* ------------------------------------------------------------------- */

.template-space {
  background-color: #F0F0F1;
}
.template-space .hero {
  height: 100vmin;
  min-height: inherit;
  max-height: 100vh;
  padding: var(--padding);
}
.template-space .hero:before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: 0.1;
  background-color: var(--main-color, currentColor);
}
.template-space .hero figure {
  height: 100%;
}
.template-space .hero img {
  height: 100%;
  object-fit: contain;
}

.template-space .links {
  position: absolute;
  right: 0;
  top: calc(var(--space)*0.1);
  display: inline-flex;
  align-items: baseline;
  gap: calc(var(--padding)/2);
}


/* ------------------------------------------------------------------- */
/* !$ Person */
/* ------------------------------------------------------------------- */


.template-home .team .section-title,
.template-jobs .team .section-title {
  margin-bottom: 0;
}
.section-title.inner-wrapper {
  align-items: baseline;
  justify-content: start;
  gap: calc(var(--space)/3);
}

.template-about-item .intro .image,
.template-about-support .intro .image {
  position: relative;
}
.template-about-item .intro .image::before,
.template-about-support .intro .image::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 25%;
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 220, 0.2),
    rgba(255, 255, 220, 0)
  );
  z-index: 2;
}

.section.related.books .section-title,
.section.related.books .item-book .title {
  padding: 0 var(--padding);
}
.section.related .item-book .cover {
  display: block;
  margin-bottom: calc(var(--space)/3*2);
}
.section.related .item-book .title,
.section.related .item-publication .title {
  font-size: var(--text-size);
  text-wrap: pretty;
}
.section.related .item-book .title time,
.section.related .item-publication .title time {
  font-size: var(--text-size);
  font-weight: normal;
  letter-spacing: inherit;
  display: inline-block;
  width: calc(var(--text-size)*3);
  vertical-align: top;
}
.section.related .item-book .title span,
.section.related .item-publication .title span {
  display: inline-block;
  width: calc(100% - var(--text-size)*3);
  vertical-align: top;
}

.section.related.books .list,
.section.related.publications .list,
.section.related.publications .expand-itemContent {
  display: flex;
  flex-direction: column;
}
.section.related.books .list {
  gap: var(--space);
}
.section.related.publications .list,
.section.related.publications .expand-itemContent {
  gap: calc(var(--space)/3);
}


/* ------------------------------------------------------------------- */
/* !$ Expertise */
/* ------------------------------------------------------------------- */

.item-expertise {
  margin: var(--space) 0;
}
.item-expertise:first-child {
  margin-top: 0;
}
.item-expertise:last-child {
  margin-bottom: 0;
}
.excerpt {
  margin: calc(var(--space)/3) 0;
  text-wrap: balance;
}
.item-expertise .link {
  opacity: var(--opacity-light);
}

.list.expertise li {
  display: flex;
  margin-bottom: calc(var(--space)/6);
}
.list.expertise li:last-child {
  margin-bottom: 0;
}


/* ------------------------------------------------------------------- */
/* !$ Accordion */
/* ------------------------------------------------------------------- */


.accordion-item,
.expand-item {
  position: relative;
}

.accordion-item:first-child {
  border-top: 1px solid;
}
.accordion-item {
  border-bottom: 1px solid;
}

.accordion-itemTitle,
.expand-itemTitle {
  cursor: pointer;
  transition: opacity 0.6s var(--ease), color 0.6s var(--ease);
}
.accordion-itemTitle {
  position: relative;
  padding: calc(var(--space) / 3) 0;
}
.accordion-itemTitle.text-S {
  padding: calc(var(--space)/3*2) 0;
}
.expand-itemTitle {
  display: inline-block;
  opacity: var(--opacity-light);
}


.accordion-itemTitle .title,
.accordion-itemTitle .toggle-icon {
  position: relative;
  z-index: 1;
}

.accordion-itemContent,
.expand-itemContent {
  position: relative;
  height: 0;
  overflow: hidden;
  transition: margin-top 0.6s var(--ease), margin-top 0.6s var(--ease);
}
.accordion-itemContent .block {
  padding-left: 0;
  padding-right: 0;
}

/* .accordion-item.is-active > .accordion-itemContent,
.expand-item.is-active > .expand-itemContent {
  height: auto;
} */

.accordion-item.is-active .accordion-itemContent {
  margin-top: calc(var(--text-size) * 1.25 / 2);
  margin-bottom: calc(var(--text-size) * 1.25 * 2);
}
.expand-item.is-active .expand-itemContent {
  margin-bottom: calc(var(--text-size) * 1.25);
}

.accordion-itemTitle.has-icon {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--padding);
  width: 100%;
}
.toggle-icon {
  width: var(--icon-size);
}
.knowledge-filter-toggle .toggle-icon {
  width: var(--text-size);
  margin-left: calc(var(--padding)/2);
}


/* ------------------------------------------------------------------- */
/* !$ Swiper */
/* ------------------------------------------------------------------- */

.swiper {
  width: 100%;
  --swiper-theme-color: #000;
  position: relative;
  padding: 0;
}
.swiper-wrapper {

}
.swiper-prev,
.swiper-next {
  position: absolute;
  bottom: 0;
  z-index: 12;
  cursor: pointer;
}
.swiper-prev {
  right: calc(var(--padding)*2);
}
.swiper-next {
  right: var(--padding);
}
.swiper-button-disabled {
  opacity: 0.2;
}


/* ------------------------------------------------------------------- */
/* !$ Player */
/* ------------------------------------------------------------------- */

.media-container {
  overflow: hidden;
  position: relative;
  padding-bottom: 56.25%;
}
.media-container:before {
  content: '';
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  background-color: rgba(0,0,0,0.1);
  opacity: 0.2;
}
.media-container media-controller {
  position: absolute;
}

media-controller {
  width: 100%;
  --media-background-color: transparent;
  --media-primary-color: var(--col-light);
  --media-control-background:transparent;
  --media-control-hover-background: transparent;
  --media-object-fit: contain;
  vertical-align: bottom;
}
mux-video {
  outline: none;
}

media-control-bar {
  --media-font-family: 'OVRLast';
  --media-font-weight: normal;
  --media-font-size: var(--text-size);
  --media-control-height: var(--space);
  width: 100%;
  flex-wrap: wrap;
  justify-content: space-between;
}
media-controller[aria-label="video player"] media-control-bar {
  position: absolute;
  left: 0;
  bottom: 0;
  align-items: center;
}
media-controller[aria-label="audio player"] media-control-bar {
  align-items: end;
}

media-control-bar .button-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
}
media-controller[aria-label="video player"] media-control-bar .button-wrapper {
  padding: 0 var(--padding) var(--padding) var(--padding);
}

media-time-range {
  --media-range-padding: 0;
  --media-time-range-buffered-color: rgba(0,0,0,0.15);
  --media-range-track-background: rgba(0,0,0,0.15);
  --media-range-track-height: calc(var(--text-size)/4);
  --media-range-thumb-width: 0;
  --media-range-thumb-height: calc(var(--text-size)/4);
  --media-range-thumb-border-radius: 0;
  width: 100%;
  margin-bottom: var(--padding);
}

media-control-bar media-play-button {
  margin-right: calc(var(--padding)/2);
}
media-time-display,
media-duration-display {
  font-variant-numeric: tabular-nums;
}
media-mute-button {
  margin-left: calc(var(--padding)/2);
}


/* ------------------------------------------------------------------- */
/* !$ Timeline */
/* ------------------------------------------------------------------- */

.block + .block.timeline {
  margin-top: calc(var(--space)*2);
}

.list.timeline li {
  border-top: 1px solid currentColor;
}
.list.timeline .title {
 margin-top: calc(var(--space)/2);
}
.list.timeline .content {
 margin: calc(var(--space)/2) 0 var(--space) 0;
}


/* ------------------------------------------------------------------- */
/* !$ Contact */
/* ------------------------------------------------------------------- */

.template-contact .page-header,
.template-contact .page-main,
.template-contact .page-footer {
  --col-3: var(--col-2);
}

.intro .text {
  text-wrap: pretty;
}

.section.contact {
  margin-bottom: var(--space-L);
}
.intro .contact {
  margin-bottom: 0;
}
.intro .nav-social {
  margin-top: var(--space);
}

.template-contact .text a {
  text-decoration: none;
}
.template-contact .text ul li,
.template-contact .text ol li {
  padding-left: 0;
}
.template-contact .text ul li::before,
.template-contact .text ol li::before {
  content: '';
}


/* ------------------------------------------------------------------- */
/* !$ Footer */
/* ------------------------------------------------------------------- */

.page-footer {
  padding: var(--padding);
  margin-top: var(--space-L);
}

.kurhaus-symbol {
  width: calc(var(--text-size)*10);
  margin-bottom: var(--space);
}

.nav-admin {
  position: fixed;
  bottom: calc(var(--padding)*2);
  left: 50%;
  z-index: 999;
  transform: translateX(-50%);
  display: flex;
  gap: var(--padding);
}
.nav-admin a {
  display: inline-block;
  background-color: #FAED73;
  padding: calc(var(--padding)/3) var(--padding);
  transition: color 0.6s var(--ease), background 0.6s var(--ease);
}

/* ------------------------------------------------------------------- */
/* !$ Error */
/* ------------------------------------------------------------------- */

.template-error {
}




/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* !$ ~~~~~~~~~~ Media Queries */
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

@media screen and (max-device-width: 736px){

body{
  -webkit-text-size-adjust: none;
}

}


/* ------------------------------------------------------------------- */
/* !$ screen > 440px */
/* ------------------------------------------------------------------- */

@media all and (min-width: 440px) {

:root {
}




}


/* ------------------------------------------------------------------- */
/* !$ screen > 640px */
/* ------------------------------------------------------------------- */

@media all and (min-width: 640px) {


.events-wrapper[data-view="grid"] {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.events-wrapper[data-view="grid"] .event-item:nth-child(odd) {
  border-right: 1px solid currentColor;
}

.events-wrapper[data-view="grid"] .link-item {
  padding-left: calc(var(--padding)/2);
  padding-right: calc(var(--padding)/2);
}
.events-wrapper[data-view="grid"] .event-item:nth-child(odd) .link-item {
  padding-left: 0;
}
.events-wrapper[data-view="grid"] .event-item:nth-child(even) .link-item {
  padding-right: 0;
}



}


/* ------------------------------------------------------------------- */
/* !$ screen > 720px */
/* ------------------------------------------------------------------- */

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

#menu, #filter {
  width: 66.66%;
}

.nav-legal ul {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--space)/4) calc(var(--padding)/2);
  align-items: start;
  justify-content: start;
}
.nav-legal li {
  margin-bottom: 0;
}

body:not(.template-building) .events-wrapper[data-view="grid"] {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
body:not(.template-building) .events-wrapper[data-view="grid"] .event-item:nth-child(odd) {
  border-right: none;
}
body:not(.template-building) .events-wrapper[data-view="grid"] .event-item:nth-child(3n + 1),
body:not(.template-building) .events-wrapper[data-view="grid"] .event-item:nth-child(3n + 2) {
  border-right: 1px solid currentColor;
}

body:not(.template-building) .events-wrapper[data-view="grid"] .event-item:nth-child(odd) .link-item {
  padding-left: calc(var(--padding) / 2);
}
body:not(.template-building) .events-wrapper[data-view="grid"] .event-item:nth-child(even) .link-item {
  padding-right: calc(var(--padding) / 2);
}
body:not(.template-building) .events-wrapper[data-view="grid"] .event-item:nth-child(3n + 1) .link-item {
  padding-left: 0;
}
body:not(.template-building) .events-wrapper[data-view="grid"] .event-item:nth-child(3n) .link-item {
  padding-right: 0;
}


.template-building .hero {
  height: 100vh;
}
.template-building .section-wrapper,
.template-space .section-wrapper {
  display: flex;
  flex-direction: row-reverse;
}
.template-building .section-wrapper .section,
.template-space .section-wrapper .section {
  flex: 1;
}

.template-building .rendering {
  width: calc(100%/6*4);
  transform: translateX(50%);
}

/* .template-building .events-wrapper[data-view="grid"] {
  grid-template-columns: repeat(2, minmax(0, 1fr));
} */

/* .overview {
  width: calc(100%/3*2);
} */

.chapter-container,
.nav-chapter {
  display: inline-block;
  vertical-align: top;
}
.chapter-container {
  width: calc(100%/3*2);
}
.chapter-container .chapter {
  padding-right: calc(var(--padding)/2);
}
.nav-chapter {
  width: calc(100%/3);
  position: -webkit-sticky;
  position: sticky;
  top: var(--padding);
  padding-left: calc(var(--padding)/2);
}

.list.timeline li {
  display: flex;
  align-items: baseline;
}
.list.timeline .title {
 width: calc(100%/3);
 margin-bottom: var(--space);
}
.list.timeline .content {
 width: calc(100%/3*2);
}



}



/* ------------------------------------------------------------------- */
/* !$ screen > 1000px */
/* ------------------------------------------------------------------- */

@media all and (min-width: 1000px) {

#menu, #filter {
  width: 50%;
}

}


/* ------------------------------------------------------------------- */
/* !$ screen > 1200px */
/* ------------------------------------------------------------------- */

@media all and (min-width: 1200px) {




}




/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* !$ ~~~~~~~~~~ Hover */
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

@media (hover: hover) {

.nav a:hover {
  color: var(--nav-color, currentColor);
  opacity: var(--opacity-dark);
  transition-duration: 0.2s;
}
.nav-quick a:hover,
.nav li.is-building a:hover {
  opacity: 1;
}

button:hover {
  transition-duration: 0.2s;
}

.nav-quick .is-home a:hover ellipse {
  stroke: var(--col-main);
  transition-duration: 0.2s;
}

.link:hover,
.link-to:hover {
  opacity: var(--opacity-dark);
  transition-duration: 0.2s;
}
.link-item:hover {
  color: var(--item-color, currentColor);
  transition-duration: 0.2s;
}
.event-item[data-event-status="cancelled"] .link-item:hover {
  color: currentColor;
}

#btn-menu:hover {
  color: var(--col-main);
}
#btn-menu:hover .icon-menu g {
  stroke: var(--col-main);
}

.chip:hover {
  color: #000;
  background-color: var(--col-light);
  transition-duration: 0.2s;
}

.quick-filter:hover, #btn-filter:hover,
.filter-item:hover, .filter-reset:hover {
  opacity: 1;
  transition-duration: 0.2s;
}

.view-switch button:hover {
  opacity: 1;
  transition-duration: 0.2s;
}

@media all and (min-width: 720px) {
  .view-switch button:hover span {
    opacity: 1;
    color: var(--col-3);
    max-width: 200px;
    margin-left: calc(var(--space)/3);
  }
  .view-switch {
    justify-content: start;
  }
}

}


@media (prefers-reduced-motion: reduce) {
  .today .dot {
    animation: none;
  }
}