@font-face {
  font-family: "Haas";
  src:
    url("../assets/fonts/neue_haas.woff2") format("woff2"),
    url("../assets/fonts/neue_haas.woff") format("woff");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

:root {
  --page-height: 100vh;
  --stable-vh: 100vh;
  --bg: #fdfdfd;
  --text: #f00;
  --muted: rgba(255, 0, 0, 0.58);
  --rule-border-width: 0.1rem;
  --rule-border: var(--rule-border-width) solid currentColor;
  --ui-font-size: 11px;
  --ui-control-radius: 2em;
  --ui-control-padding: 0.05em 0.5em 0;
  --details-pill-width: 2.6em;
  --details-pill-dot-size: 0.16em;
  --details-pill-dot-gap: 0.18em;
  --details-pill-mark-width: 0.84em;
  --overlay-blur: 10px;
  --overlay-opacity-duration: 1.28s;
  --overlay-filter-duration: 1.35s;
  --overlay-transition-easing: cubic-bezier(0.365, 0.220, 0.000, 0.995);
  --header-offset: 7px;
  --ui-hit-padding: var(--header-offset);
  --ui-width: 350px;
  --ui-column-width: calc(var(--ui-width) - 14px);
  --nav-thumb-height: 6.3636363636em; /* 70px / 11px */
  --hover-thumb-height: var(--nav-thumb-height);
  --mobile-thumb-width: 4.5454545455em; /* 50px / 11px */
  --widest-nav-thumb-width: 0px;
  --tallest-nav-thumb-height: 0px;
}

@supports (height: 100dvh) {
  :root { --page-height: 100dvh; }
}

@supports (height: 100svh) {
  :root { --stable-vh: 100svh; }
}

/* CSS circle button: the SVG contains only the tightly cropped arrow; the circle is this wrapper border. */
.circle-button-frame {
  --circle-button-arrow-offset-x: 0em;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: var(--site-menu-toggle-height, 1.5em);
  height: var(--site-menu-toggle-height, 1.5em);
  box-sizing: border-box;
  border: var(--rule-border-width) solid currentColor;
  border-radius: var(--ui-control-radius);
  color: inherit;
  line-height: 0;
  overflow: visible;
}

.circle-button-arrow-svg--next {
  --circle-button-arrow-offset-x: 0.05em;
}

.circle-button-arrow-svg--prev {
  --circle-button-arrow-offset-x: -0.05em;
}

.circle-button-arrow-svg {
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  width: auto;
  height: 0.5em;
  overflow: visible;
  pointer-events: none;
  transform: translate(calc(-50% + var(--circle-button-arrow-offset-x, 0em)), -50%);
  transform-origin: center;
}

.circle-button-arrow-svg path {
  fill: none;
  stroke: currentColor;
  stroke-width: var(--rule-border-width);
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Shared description indicator: three dots when closed, a minus when open. */
.details-pill {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  flex: 0 0 auto;
  gap: var(--details-pill-dot-gap);
  height: 1em;
  width: 2em;
  /*
  width: var(--details-pill-width);
  height: var(--site-menu-toggle-height, 1.5em);
  min-height: var(--site-menu-toggle-height, 1.5em);
  */
  box-sizing: border-box;
  margin: 0;
  padding: var(--ui-control-padding);
  border: var(--rule-border);
  border-radius: var(--ui-control-radius);
  color: inherit;
  line-height: 0;
  opacity: 1;
  pointer-events: none;
  transition: none;
}

.details-pill::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  width: var(--details-pill-mark-width);
  height: var(--rule-border-width);
  border-radius: 999px;
  background: currentColor;
  opacity: 0;
  transform: translate(-50%, -50%);
  transition: none;
}

.details-pill[hidden] {
  display: none !important;
}

.details-pill-dot {
  display: block;
  flex: 0 0 auto;
  width: var(--details-pill-dot-size);
  height: var(--details-pill-dot-size);
  border-radius: 50%;
  background: currentColor;
  opacity: 1;
  transition: none;
}

[aria-expanded="true"] > .project-gallery-info-row .details-pill-dot,
[aria-expanded="true"] > .project-page-info-row .details-pill-dot,
[aria-expanded="true"] > .archive-active-info-row .details-pill-dot,
.is-details-open .details-pill-dot {
  opacity: 0;
}

[aria-expanded="true"] > .project-gallery-info-row .details-pill::before,
[aria-expanded="true"] > .project-page-info-row .details-pill::before,
[aria-expanded="true"] > .archive-active-info-row .details-pill::before,
.is-details-open .details-pill::before {
  opacity: 1;
}

@keyframes ui-sharp-blink {
  0%, 49.999% { opacity: 1; }
  50%, 100% { opacity: 0; }
}

* { box-sizing: border-box; }

::selection {
  background: transparent;
  color: var(--text);
}

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


html,
body {
  width: 100%;
  height: var(--page-height);
  min-height: var(--page-height);
  margin: 0;
  padding: 0;
  overflow: hidden;
  background: var(--bg);
  color: var(--text);
  font-family: "Haas", Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: var(--ui-font-size);
}

button,
a {
  color: inherit;
  -webkit-tap-highlight-color: transparent;
}




img,
video {
  color: transparent;
}

.app img.is-media-broken,
.app video.is-media-broken {
  opacity: 0;
}

button {
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  text-align: inherit;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

button:active,
button:focus,
a:active,
a:focus {
  background: transparent;
}


/* is-resizing intentionally disabled.
html.is-resizing *,
html.is-resizing *::before,
html.is-resizing *::after {
  transition: none !important;
  animation: none !important;
}
*/

@media (max-width: 700px) {
  html,
  body {
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  html::-webkit-scrollbar,
  body::-webkit-scrollbar { display: none; }
}

.seo-heading {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Prevent any first-paint flash before the shared intro has established
   its true opacity: 0 state. The class is added synchronously in <head>
   and released by startPageIntro after the hidden state has been painted. */
html.is-intro-priming .app {
  visibility: hidden !important;
}

.app {
  position: relative;
  width: 100vw;
  height: var(--page-height);
  min-height: var(--page-height);
  overflow: hidden;
  isolation: isolate;
  background: var(--bg);
  opacity: 1;
  transition: none;
  --about-shift: 0px;
}
/* Page intro visibility is opt-in: content remains hidden until
   body.is-page-visible is added. Opacity transitions stay disabled initially
   so Safari cannot animate a stale visible state during page setup. */
.app .gallery-stream-stage,
.app .archive-stage,
.app .about-page-stage,
.app .imprint-page-main {
  opacity: 0;
  pointer-events: none;
  transition: none;
}

body.is-opacity-transitions-enabled .app .gallery-stream-stage,
body.is-opacity-transitions-enabled .app .archive-stage,
body.is-opacity-transitions-enabled .app .about-page-stage,
body.is-opacity-transitions-enabled .app .imprint-page-main {
  transition: opacity 1.28s cubic-bezier(0.365, 0.220, 0.000, 0.995);
}

body.is-page-visible .app .gallery-stream-stage,
body.is-page-visible .app .archive-stage,
body.is-page-visible .app .about-page-stage,
body.is-page-visible .app .imprint-page-main {
  opacity: 1;
}

body.is-page-interactive .app .gallery-stream-stage,
body.is-page-interactive .app .archive-stage,
body.is-page-interactive .app .about-page-stage,
body.is-page-interactive .app .imprint-page-main {
  pointer-events: auto;
}

body:not(.is-page-visible) .app .gallery-stream-stage,
body:not(.is-page-visible) .app .archive-stage,
body:not(.is-page-visible) .app .about-page-stage,
body:not(.is-page-visible) .app .imprint-page-main {
  opacity: 0;
  pointer-events: none;
}
body[data-page="selected"] .app .gallery-stream-stage,
body[data-page="corporate"] .app .gallery-stream-stage,
body[data-page="archive"] .app .archive-stage {
  opacity: 1;
  transition: none;
}

/* About and imprint keep their page shells visible; their text columns and
   poster-ready videos perform the actual intro reveal independently. */
body[data-page="about"] .app .about-page-stage,
body[data-page="imprint"] .app .imprint-page-main {
  opacity: 1;
  transition: none;
}


body:not(.is-page-interactive) .app .gallery-stream-stage,
body:not(.is-page-interactive) .app .archive-stage,
body:not(.is-page-interactive) .app .about-page-stage,
body:not(.is-page-interactive) .app .imprint-page-main {
  pointer-events: none;
}

body:not(.is-page-interactive) .app * {
  cursor: default !important;
}



body:not(.is-page-interactive) * {
  cursor: default !important;
}