@charset "UTF-8";
/* –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
/* Reset */
/* –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
html {
  box-sizing: border-box;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-tap-highlight-color: transparent;
}

*, *::before, *::after {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-tap-highlight-color: transparent;
  box-sizing: inherit;
  margin: 0;
  padding: 0;
  user-select: none;
}

button, textarea, input, select, a {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-tap-highlight-color: transparent;
  -webkit-tap-highlight-color: transparent;
}

i {
  font-style: unset;
}

b {
  font-weight: unset;
}

a {
  text-decoration: none;
}

/* –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
/* Roots */
/* –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
:root {
  --unica: "Unica", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --blu: 17px;
  --black: #4C4C4C;
  --gray: #E0E0E0;
  --yellow: #E5FF4F;
  --purple: #C7BBDD;
  --underline: 1px;
  --h-lh: calc(var(--blu) * 2);
  --h-fs: calc(var(--h-lh) * 1);
  --h-fw: 400;
  --s-lh: calc(var(--blu) * 1.5);
  --s-fs: calc(var(--s-lh) * 1);
  --s-fw: 400;
  --p-lh: calc(var(--blu) * 1);
  --p-fs: calc(var(--p-lh) * 0.85);
  --p-fw: 500;
  --n-lh: calc(var(--blu) * 0.5);
  --n-fs: calc(var(--n-lh) * 0.85);
  --n-fw: 500;
  --padding: calc(var(--blu) + var(--h-lh) - (var(--h-lh) * 0.3) + var(--blu));
}

/* –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
/* Global */
/* –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
body {
  padding: var(--blu);
}

#grid {
  pointer-events: none;
}
#grid.hide {
  display: none;
}

#margin-tester {
  pointer-events: none;
  position: fixed;
  display: block;
  width: calc(100% - var(--blu) * 2);
  height: calc(100% - var(--blu) * 2);
  top: var(--blu);
  left: var(--blu);
  background: red;
  opacity: 0.1;
  z-index: 900;
}

#margin-inner-tester {
  pointer-events: none;
  display: block;
  position: fixed;
  width: 100%;
  height: calc(100% - var(--padding) * 2);
  background: magenta;
  top: var(--padding);
  left: 0;
  z-index: 900;
  opacity: 0.1;
}

#split-tester {
  pointer-events: none;
}
#split-tester div {
  position: fixed;
  display: block;
  width: 100%;
  height: 50%;
  z-index: 900;
  opacity: 0.1;
}
#split-tester div:nth-child(1) {
  left: 0;
  top: 0;
  background: yellow;
}
#split-tester div:nth-child(2) {
  left: 0;
  bottom: 0;
  background: blue;
}
#split-tester div:nth-child(3) {
  width: 100%;
  height: calc(var(--blu) * 2);
  background: green;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}

.noScroll .scrollElement {
  overflow: hidden !important;
}

.claim {
  text-indent: 0 !important;
}
.claim p {
  text-indent: 0 !important;
}

.contact navigation .claim {
  display: none;
}
.contact typography #projectContainer .innerContainer.left a:hover, .contact typography #projectContainer .innerContainer.left a:focus {
  color: var(--gray);
}

.nowrap {
  hyphens: none !important;
}

#signatur {
  font-size: var(--n-fs);
  line-height: var(--n-lh);
  font-weight: var(--n-fw);
  transform: rotate(-90deg) translate(-50%, -50%);
  position: fixed;
  left: calc(var(--blu) * 0.5);
  top: 50%;
  transform-origin: top left;
  display: block;
  z-index: 400;
}
#signatur:hover, #signatur:focus {
  background: var(--yellow);
}

body:not(.contact) #signatur {
  opacity: 0;
  pointer-events: none;
}

/* Navigation */
/* –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
navigation {
  position: absolute;
  z-index: 200;
}
navigation a {
  position: fixed;
  white-space: nowrap;
}
navigation .top {
  top: calc(var(--blu) - var(--h-lh) * 0.02);
}
navigation .bottom {
  bottom: calc(var(--blu) - var(--h-lh) * 0.25);
}
navigation .left {
  left: calc(var(--blu) - var(--h-lh) * 0.09);
}
navigation .right {
  right: calc(var(--blu) - var(--h-lh) * 0.09);
}
navigation .center {
  left: 50%;
  transform: translateX(-50%);
}
navigation.invert a {
  color: var(--gray);
}
navigation.invert a:hover, navigation.invert a:focus {
  color: var(--black) !important;
}
navigation.invert a.active {
  pointer-events: none;
  color: var(--black) !important;
}
navigation .claim {
  position: fixed;
  top: 50%;
  left: 50%;
  text-align: center;
  transform: translate(-50%, calc(-100% - var(--p-lh) * 1.8));
  width: calc(var(--blu) * 15);
}

/* Graphics */
/* –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
graphics {
  position: fixed;
  mix-blend-mode: soft-light;
  pointer-events: none;
  z-index: 300;
}
graphics div {
  display: block;
  position: fixed;
  width: 100%;
  height: 50%;
  background-repeat: no-repeat !important;
  background-size: cover !important;
  background-position: center !important;
}
graphics div.sharp {
  top: 0;
  left: 0;
}
graphics div.soft {
  bottom: 0;
  left: 0;
}

/* Typography */
/* –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
typography {
  position: relative;
  z-index: 100;
}

#projectsContainer {
  position: fixed;
  top: var(--padding);
  left: 0;
  width: 100%;
  height: calc(100% - var(--padding) * 2);
  padding-left: var(--blu);
  padding-right: var(--blu);
  overflow-x: hidden;
}
#projectsContainer .projectGrid {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  grid-gap: calc(var(--blu) * 2);
}
#projectsContainer .projectGrid .gridCell {
  width: 100%;
}
#projectsContainer .projectGrid .gridCell h1 {
  text-overflow: ellipsis;
}
#projectsContainer .projectGrid .gridCell h6 {
  max-width: calc(var(--s-lh) * 16);
}
#projectsContainer .projectGrid .gridCell:hover * {
  color: var(--gray);
}

#projectContainer {
  position: fixed;
  width: 100%;
  height: calc(100% - var(--padding) * 2);
  padding-left: var(--blu);
  padding-right: var(--blu);
  top: var(--padding);
  left: 0;
}
#projectContainer .innerContainer {
  min-height: 50%;
}
#projectContainer .innerContainer.left {
  position: relative;
  padding-bottom: var(--blu);
}
#projectContainer .innerContainer.left h2 {
  position: absolute;
  bottom: var(--blu);
  hyphens: auto;
}
#projectContainer .innerContainer.right {
  padding-top: var(--blu);
  padding-bottom: var(--blu);
}
#projectContainer.images .innerContainer.left, #projectContainer.images .innerContainer.right {
  padding-right: calc(var(--blu) * 2);
}
#projectContainer.images .innerContainer.left h2 {
  padding-right: calc(var(--blu) * 2);
}

.scrollElement {
  overflow-y: scroll;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* Internet Explorer and Edge */
}
.scrollElement::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Opera */
}
.scrollElement::before, .scrollElement::after {
  content: "";
  display: block;
  position: fixed;
  width: 100%;
  height: 2px;
  left: 0;
  background: var(--gray);
}
.scrollElement::before {
  top: var(--padding);
}
.scrollElement::after {
  bottom: var(--padding);
}
.scrollElement:not(.topOverflow)::before {
  display: none;
}
.scrollElement:not(.bottomOverflow)::after {
  display: none;
}

/* Images */
/* –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
images #imageContainer {
  position: fixed;
  z-index: 400;
  background: var(--gray);
  width: 100%;
  height: calc(100% - var(--padding) * 2);
  top: var(--padding);
  left: 0;
  transition-property: left;
  transition-timing-function: ease-out;
  transition-duration: 0.5s;
}
images #imageContainer:not(.open) {
  left: calc(100% - var(--blu) * 2);
}
images #imageContainer:not(.open).loader {
  left: 100%;
}
images #imageContainer:not(.open) .close {
  pointer-events: none;
  --padding: calc(var(--blu) * 2);
  left: calc(100% - var(--blu) * 1);
  bottom: calc(var(--blu) + var(--h-lh) - var(--h-lh) * 0.3 + var(--blu));
}
images #imageContainer:not(.open) .close::before, images #imageContainer:not(.open) .close::after {
  height: calc(var(--h-lh) * 0.07);
  width: 50%;
}
images #imageContainer:not(.open) .close::before {
  --translate: translate(-60%, 170%);
}
images #imageContainer:not(.open) .close::after {
  --translate: translate(-60%, -270%);
}
images #imageContainer:not(.open) .naviPad {
  cursor: pointer !important;
}
images #imageContainer.singeImage.open .naviPad {
  cursor: default !important;
}
images #imageContainer .close {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: var(--padding);
  height: var(--padding);
  background: var(--yellow);
  cursor: pointer;
  transition-property: left, width, height, bottom;
  transition-timing-function: ease-out;
  transition-duration: 0.5s;
  z-index: 100;
}
images #imageContainer .close::before, images #imageContainer .close::after {
  --translate: translate(-50%, -50%);
  --rotate: rotate(0deg);
  content: "";
  display: block;
  width: 100%;
  height: calc(var(--h-lh) * 0.11);
  background: var(--black);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: var(--translate) var(--rotate);
  transition-property: transform, width, height;
  transition-timing-function: ease-out;
  transition-duration: 0.5s;
  z-index: 100;
}
images #imageContainer .close::before {
  --rotate: rotate(45deg);
}
images #imageContainer .close::after {
  --rotate: rotate(-45deg);
}
images #imageContainer .close:hover::before, images #imageContainer .close:hover::after {
  width: 90%;
}
images #imageContainer .naviPad {
  position: absolute;
  width: 50%;
  height: 100%;
  top: 0;
  z-index: 100;
  opacity: 0;
}
images #imageContainer .naviPad.previous {
  background: red;
  left: 0;
  cursor: w-resize;
}
images #imageContainer .naviPad.next {
  background: green;
  right: 0;
  cursor: e-resize;
}
images #imageContainer .galleryIndicator {
  user-select: none;
  pointer-events: none;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  text-align: center;
  z-index: 100;
}
images #imageContainer .galleryIndicator .indicatorItem {
  display: inline-block;
  color: var(--black);
}
images #imageContainer .galleryIndicator .indicatorItem.active {
  color: var(--gray);
}
images #imageContainer img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: none;
}
images #imageContainer img.active, images #imageContainer img.next, images #imageContainer img.previous {
  display: unset;
}
images #imageContainer img.next, images #imageContainer img.previous {
  opacity: 0;
  pointer-events: none;
}

img.focus {
  object-position: 0 0;
}

/* –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
/* Typo */
/* –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
/* Unica 77 */
/* –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
@font-face {
  font-family: "Unica";
  src: url("fonts/Unica77LL-Regular.woff2") format("woff2"), url("fonts/Unica77LL-Regular.woff") format("woff");
  font-style: normal;
  font-weight: 400;
}
@font-face {
  font-family: "Unica";
  src: url("fonts/Unica77LL-Regular-Italic.woff2") format("woff2"), url("fonts/Unica77LL-Regular-Italic.woff") format("woff");
  font-style: italic;
  font-weight: 400;
}
@font-face {
  font-family: "Unica";
  src: url("fonts/Unica77LL-Medium.woff2") format("woff2"), url("fonts/Unica77LL-Medium.woff") format("woff");
  font-style: normal;
  font-weight: 500;
}
@font-face {
  font-family: "Unica";
  src: url("fonts/Unica77LL-Medium-Italic.woff2") format("woff2"), url("fonts/Unica77LL-Medium-Italic.woff") format("woff");
  font-style: italic;
  font-weight: 500;
}
*, *::before, *::after {
  font-family: var(--unica);
  font-size: var(--p-fs);
  line-height: var(--p-lh);
  font-weight: var(--p-fw);
  color: var(--black);
}

.h1, h1,
.h2, h2,
.h3, h3,
.h4, h4,
.h5, h5,
.h6, h6 {
  font-size: var(--h-fs);
  line-height: var(--h-lh);
  font-weight: var(--h-fw);
}
.h1.caps, h1.caps,
.h2.caps, h2.caps,
.h3.caps, h3.caps,
.h4.caps, h4.caps,
.h5.caps, h5.caps,
.h6.caps, h6.caps {
  text-transform: uppercase;
}
.h1.space, h1.space,
.h2.space, h2.space,
.h3.space, h3.space,
.h4.space, h4.space,
.h5.space, h5.space,
.h6.space, h6.space {
  padding-bottom: var(--h-lh);
}
.h1 em, h1 em,
.h2 em, h2 em,
.h3 em, h3 em,
.h4 em, h4 em,
.h5 em, h5 em,
.h6 em, h6 em {
  font-style: italic;
}
.h1.link:hover, .h1.link:focus, .h1.active:hover, .h1.active:focus, h1.link:hover, h1.link:focus, h1.active:hover, h1.active:focus,
.h2.link:hover,
.h2.link:focus,
.h2.active:hover,
.h2.active:focus, h2.link:hover, h2.link:focus, h2.active:hover, h2.active:focus,
.h3.link:hover,
.h3.link:focus,
.h3.active:hover,
.h3.active:focus, h3.link:hover, h3.link:focus, h3.active:hover, h3.active:focus,
.h4.link:hover,
.h4.link:focus,
.h4.active:hover,
.h4.active:focus, h4.link:hover, h4.link:focus, h4.active:hover, h4.active:focus,
.h5.link:hover,
.h5.link:focus,
.h5.active:hover,
.h5.active:focus, h5.link:hover, h5.link:focus, h5.active:hover, h5.active:focus,
.h6.link:hover,
.h6.link:focus,
.h6.active:hover,
.h6.active:focus, h6.link:hover, h6.link:focus, h6.active:hover, h6.active:focus {
  color: var(--gray);
}

.h6, h6 {
  font-size: var(--s-fs);
  line-height: var(--s-lh);
  font-weight: var(--s-fw);
}

.p, p {
  font-size: var(--p-fs);
  line-height: var(--p-lh);
  font-weight: var(--p-fw);
}
.p:not(:first-child, .space), p:not(:first-child, .space) {
  text-indent: calc(var(--blu) * 2);
  margin-top: var(--p-lh);
}
.p.caps, p.caps {
  text-transform: uppercase;
}
.p.space, p.space {
  padding-bottom: var(--p-lh);
}
.p em, p em {
  font-style: italic;
}
.p a, .p .a, p a, p .a {
  display: inline-block;
  white-space: nowrap;
  position: relative;
  text-indent: 0;
}
.p a::after, .p .a::after, p a::after, p .a::after {
  content: "";
  display: block;
  background: var(--black);
  position: absolute;
  bottom: calc(0px - var(--underline) * 0.2);
  left: 0;
  width: 100%;
  height: var(--underline);
}
.p a::before, .p .a::before, p a::before, p .a::before {
  content: "";
  display: block;
  background: var(--yellow);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  mix-blend-mode: soft-light;
}
.p a:hover::after, .p a:focus::after, .p .a:hover::after, .p .a:focus::after, p a:hover::after, p a:focus::after, p .a:hover::after, p .a:focus::after {
  opacity: 0;
}
.p a:hover::before, .p a:focus::before, .p .a:hover::before, .p .a:focus::before, p a:hover::before, p a:focus::before, p .a:hover::before, p .a:focus::before {
  opacity: 1;
}

ol, ul {
  list-style: none;
  padding-left: 0;
  padding-top: var(--p-lh);
  padding-bottom: var(--p-lh);
}
ol li, ul li {
  position: relative;
  padding-left: calc(var(--blu) * 2);
  padding-bottom: calc(var(--blu) * 0.5);
}
ol li::before, ul li::before {
  content: "•";
  position: absolute;
  display: block;
  left: 0;
}
ol.space, ul.space {
  padding-bottom: var(--p-lh);
}

ol {
  counter-reset: list-counter;
}
ol li {
  counter-increment: list-counter;
}
ol li::before {
  content: counter(list-counter);
}

blockquote {
  position: relative;
  padding-left: calc(var(--blu) * 2);
}
blockquote:not(:first-child) {
  margin-top: var(--p-lh);
}
blockquote::before {
  content: "«";
  display: block;
  position: absolute;
  left: 0;
  top: 0;
}
blockquote::after {
  content: "»";
  display: block;
  position: absolute;
  right: 0;
  bottom: 0;
}

@media all and (max-width: 35em) {
  /* –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
  /* 01 / Mobile */
  /* –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
  :root {
    --media: _00_Mobile;
  }
}
@media all and (min-width: 55em) {
  /* –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
  /* 02 / Tablet */
  /* –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
  :root {
    --media: _02_Tablet;
    --blu: 20px;
    --h-lh: calc(var(--blu) * 2.17);
    --s-lh: calc(var(--blu) * 1.54);
  }
  images #imageContainer:not(.open) .close::before {
    --translate: translate(-60%, 150%);
  }
  images #imageContainer:not(.open) .close::after {
    --translate: translate(-60%, -250%);
  }
}
@media all and (min-width: 75em) {
  /* –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
  /* 03 / Tablet-Laptop */
  /* –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
  :root {
    --media: _03_Tablet_Laptop;
    --blu: 24px;
    --h-lh: calc(var(--blu) * 2.33);
    --s-lh: calc(var(--blu) * 1.58);
    --underline: 2px;
  }
  images #imageContainer:not(.open) .close::before {
    --translate: translate(-60%, 140%);
  }
  images #imageContainer:not(.open) .close::after {
    --translate: translate(-60%, -240%);
  }
}
@media all and (min-width: 85em) {
  /* –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
  /* 04 / Laptop */
  /* –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
  :root {
    --media: _04_Laptop;
    --blu: 27px;
    --h-lh: calc(var(--blu) * 2.50);
    --s-lh: calc(var(--blu) * 1.63);
  }
  images #imageContainer:not(.open) .close::before {
    --translate: translate(-60%, 120%);
  }
  images #imageContainer:not(.open) .close::after {
    --translate: translate(-60%, -220%);
  }
}
@media all and (min-width: 120em) {
  /* –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
  /* 05 / Desktop */
  /* –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
  :root {
    --media: _05_Desktop;
    --blu: 30px;
    --h-lh: calc(var(--blu) * 2.67);
    --s-lh: calc(var(--blu) * 1.67);
    --underline: 3px;
  }
  images #imageContainer:not(.open) .close::before {
    --translate: translate(-60%, 110%);
  }
  images #imageContainer:not(.open) .close::after {
    --translate: translate(-60%, -210%);
  }
}
@supports (-webkit-hyphens: none) {
  /* –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
  /* 00 / Safari Only */
  /* –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
}
@media (orientation: landscape) {
  /* –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
  /* Landscape */
  /* –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
  #split-tester div {
    width: 50%;
    height: 100%;
  }
  #split-tester div:nth-child(1) {
    top: 0;
    left: 0;
  }
  #split-tester div:nth-child(2) {
    top: 0;
    right: 0;
    left: unset;
    bottom: unset;
  }
  #split-tester div:nth-child(3) {
    height: 100%;
    width: calc(var(--blu) * 2);
    top: 0;
    left: 50%;
    transform: translateX(-50%);
  }
  /* Navigation */
  /* –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
  navigation .claim {
    top: unset;
    bottom: calc(var(--blu) - var(--p-lh) * 0.55);
    line-height: calc(var(--p-lh) * 1.2);
    transform: translate(-50%, 0);
  }
  /* Graphics */
  /* –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
  graphics div {
    width: 50%;
    height: 100%;
  }
  graphics div.soft {
    left: unset;
    right: 0;
  }
  /* Typography */
  /* –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
  #projectsContainer .projectGrid {
    grid-template-columns: repeat(2, 1fr);
  }
  #projectContainer .innerContainer {
    height: 100%;
  }
  #projectContainer .innerContainer.left, #projectContainer .innerContainer.right {
    width: 50%;
    position: absolute;
    top: 0;
    padding: 0 var(--blu);
  }
  #projectContainer .innerContainer.left {
    left: 0;
    overflow: hidden;
  }
  #projectContainer .innerContainer.left h1, #projectContainer .innerContainer.left h2 {
    left: calc(var(--blu) - var(--h-lh) * 0.09);
  }
  #projectContainer .innerContainer.left h2 {
    bottom: 0;
  }
  #projectContainer .innerContainer.right {
    right: 0;
  }
  #projectContainer .innerContainer.right::before, #projectContainer .innerContainer.right::after {
    width: 50%;
    left: 50%;
  }
  #projectContainer.images .innerContainer.left h2 {
    padding-right: var(--blu);
  }
  #projectContainer.images .innerContainer.right {
    padding-right: calc(var(--blu) * 3);
  }
  /* Images */
  /* –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
  images #imageContainer {
    width: 50%;
    left: 50%;
  }
  images #imageContainer .close {
    bottom: 50% !important;
    transform: translate(-100%, 50%);
  }
  images #imageContainer:not(.open).loader .close {
    left: calc(100% + var(--blu) * 2);
  }
  images #imageContainer:not(.open) .close {
    left: 100%;
  }
}
@media (orientation: portrait) {
  /* –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
  /* Portrait */
  /* –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
  .contact navigation .claim,
  .projects navigation .claim,
  .project navigation .claim {
    display: none;
  }
}

/*# sourceMappingURL=main-compiled.css.map */