@charset "UTF-8";
/* –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
/* Global Resets */
/* –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
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;
}

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 {
  --blu: 8px;
  --opa: 0.6;
}

/* –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
/* Global */
/* –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
body {
  max-width: 100vw;
  overflow-x: hidden;
}

/* –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
/* Typography */
/* –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
/* –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
/* PP Editorial New // Ultralight */
@font-face {
  font-family: "Editorial";
  src: url("fonts/PPEditorialNew-Ultralight.woff2") format("woff2"), url("fonts/PPEditorialNew-Ultralight.woff") format("woff");
  font-style: normal;
  font-weight: 100;
}
@font-face {
  font-family: "Editorial";
  src: url("fonts/PPEditorialNew-UltralightItalic.woff2") format("woff2"), url("fonts/PPEditorialNew-UltralightItalic.woff") format("woff");
  font-style: italic;
  font-weight: 100;
}
/* –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
/* PP Pangram Sans // Narrow Semi-bold */
@font-face {
  font-family: "Pangram";
  src: url("fonts/PPPangramSans-NarrowSemibold.woff2") format("woff2"), url("fonts/PPPangramSans-NarrowSemibold.woff") format("woff");
  font-style: normal;
  font-weight: 600;
}
@font-face {
  font-family: "Pangram";
  src: url("fonts/PPPangramSans-NarrowSemiboldItalic.woff2") format("woff2"), url("fonts/PPPangramSans-NarrowSemiboldItalic.woff") format("woff");
  font-style: italic;
  font-weight: 600;
}
:root {
  --editorial: "Editorial", Bodoni MT, Didot, Didot LT STD, Hoefler Text, Garamond, Times New Roman, serif;
  --pangram: "Pangram", Arial Narrow, Arial, sans-serif;
  --h6-lh: calc(var(--blu) * 2.5);
  --h6-fs: calc(var(--h6-lh) * 0.8571428571);
  --h6-fw: 600;
  --p-lh: calc(var(--blu) * 4.5);
  --p-fs: calc(var(--p-lh) * 0.8793103448);
  --p-fw: 100;
  --h1-lh: 35.5vw;
  --h1-fs: calc(var(--h1-lh) * 1.1328125);
  --h1-fw: 100;
}

h6, .h6 {
  font-family: var(--pangram);
  line-height: var(--h6-lh);
  font-size: var(--h6-fs);
  font-weight: var(--h6-fw);
  text-transform: uppercase;
}

p, .p {
  font-family: var(--editorial);
  line-height: var(--p-lh);
  font-size: var(--p-fs);
  font-weight: var(--p-fw);
}

h1, .h1 {
  font-family: var(--editorial);
  line-height: var(--h1-lh);
  font-size: var(--h1-fs);
  font-weight: var(--p-fw);
}

/* –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
/* Links */
a:link, a:visited, a:hover, a:active, a:focus {
  color: inherit;
}
a:hover, a:active, a:focus {
  opacity: var(--opa);
}

p a, .p a {
  position: relative;
}
p a::after, .p a::after {
  --pad: calc(var(--blu) * 4);
  content: "";
  display: block;
  position: absolute;
  width: calc(100% + var(--pad) * 0.2);
  height: 2px;
  bottom: 11%;
  left: calc(0px - var(--pad) * 0.1);
  pointer-events: none;
  background: black;
}
p a:link, p a:visited, .p a:link, .p a:visited {
  color: black;
}
p a:hover, p a:active, p a:focus, .p a:hover, .p a:active, .p a:focus {
  color: black;
  opacity: var(--opa);
}
p a:hover::after, p a:active::after, p a:focus::after, .p a:hover::after, .p a:active::after, .p a:focus::after {
  visibility: hidden;
}

/* –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
/* Header */
/* –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
header,
.footer .imprint {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background: black;
  padding: calc(var(--blu) * 1);
  z-index: 800;
  transition-property: width;
  transition-duration: 0.5s;
  transition-timing-function: ease-out;
}
header .h6,
.footer .imprint .h6 {
  color: white;
  padding-right: calc(var(--blu) * 1.5);
  white-space: nowrap;
}

header {
  cursor: pointer;
}

[view=slid] header {
  width: calc(100% - var(--blu) * 4.5);
}

/* –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
/* Navigation */
/* –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
nav .nav_btn {
  --transDur: 2s;
  --transFun: ease-in-out;
  display: flex;
  justify-content: center;
  cursor: pointer;
  position: fixed;
  background: black;
  color: white;
  padding: calc(var(--blu) * 1) calc(var(--blu) * 2);
  border-radius: 100vw;
  overflow: hidden;
  max-width: 150px;
  text-align: center;
  z-index: 900;
}
nav .nav_btn::after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  box-shadow: inset 0 0 calc(var(--blu) * 0.5) calc(var(--blu) * 1) black;
}
nav .nav_btn .h6 {
  display: none;
  overflow: visible;
  transform: translateY(7%);
}
nav .nav_btn .h6 .long {
  display: none;
}
nav .nav_btn:hover .h6 {
  opacity: var(--opa);
}
nav .nav_btn:hover .h6 .long {
  display: unset;
}
nav .nav_btn:hover .h6 .short {
  display: none;
}

.nav_next {
  position: fixed;
  z-index: 900;
  display: none;
  justify-content: center;
  cursor: pointer;
  background: black;
  color: white;
  padding: calc(var(--blu) * 1) calc(var(--blu) * 2);
  border-radius: 100vw;
  overflow: hidden;
  max-width: 150px;
  text-align: center;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.nav_next .h6 {
  display: block;
  overflow: visible;
  transform: translateY(7%);
}

[view=star] nav .nav_btn {
  opacity: 0;
  max-width: calc(var(--blu) * 4.5);
  color: black;
}

[view=init] nav .nav_btn {
  transition-property: bottom, right, max-width, color;
  transition-duration: var(--transDur);
  transition-timing-function: var(--transFun);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
[view=init] nav .nav_btn .init {
  display: block;
}

[view=slid]:not(.proxy) *, [view=slid]:not(.proxy) *::after, [view=slid]:not(.proxy) *::before {
  cursor: none !important;
}
[view=slid]:not(.proxy) .nav_next {
  display: flex;
}
[view=slid] nav .nav_btn .slid {
  display: block;
}

[view=gale] nav .nav_btn .gale {
  display: block;
}

[view=slid] nav .nav_btn, [view=gale] nav .nav_btn {
  transition-property: bottom, right, translate;
  transition-duration: 0.5s;
  transition-timing-function: ease-out;
  bottom: 0 !important;
  right: 0 !important;
}
[view=slid] nav .nav_btn:not(:hover), [view=gale] nav .nav_btn:not(:hover) {
  width: calc(var(--blu) * 4.5);
}

/* –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
/* Main */
/* –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
main {
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  overflow-x: hidden;
  overflow-y: scroll;
  padding-top: calc(var(--header) + var(--h1-fs) * 0.065 + var(--blu) * 2);
  max-width: 100vw;
}

.barni {
  margin-left: calc(var(--blu) * 1);
}

.vorwort {
  padding: 0 calc(var(--blu) * 1);
}

.cv {
  padding: 0 calc(var(--blu) * 1);
}
.cv .group {
  margin-top: calc(var(--p-lh) * 1);
}
.cv .group .marker {
  --side: calc(var(--blu) * 4.5);
  display: inline-block;
  width: var(--side);
  height: var(--side);
  background: black;
  transform: translateY(7%);
  border-radius: 100vw;
}
.cv .group .item {
  display: grid;
  grid-template-columns: calc(var(--p-lh) * 2.25) auto;
}
.cv .group .item a::after {
  display: none;
}

.info_tit {
  position: fixed;
  height: calc(var(--header) - var(--blu) * 1);
  max-width: 100vw;
  top: 0;
  right: calc(var(--blu) * 4.5);
  padding: calc(var(--blu) * 1);
  padding-left: calc(var(--blu) * 7.5);
  z-index: 800;
  color: white;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgb(0, 0, 0) 33%);
}

.info_cont {
  position: fixed;
  top: 0;
  left: 0;
  background: black;
  color: white;
  padding: calc(var(--blu) * 1);
  padding-top: calc(var(--blu) * 1 + var(--header));
  width: calc(100% - var(--blu) * 4.5);
  transform: translateY(-100%);
  transition-property: transform;
  transition-duration: 0.5s;
  transition-timing-function: ease-out;
  z-index: 700;
}
.info_cont a {
  color: white !important;
}
.info_cont a::after {
  background: white;
}

.projekte {
  display: none;
}
.projekte .info_btn {
  --side: calc(var(--blu) * 4.5);
  cursor: pointer;
  position: fixed;
  visibility: hidden;
  top: 0;
  right: calc(0px - var(--side));
  width: var(--side);
  height: var(--side);
  background: black;
  color: white;
  border-radius: 100vw;
  padding: calc(var(--blu) * 1);
  text-align: center;
  z-index: 700;
  transition-property: right;
  transition-duration: 0.5s;
  transition-timing-function: ease-out;
}
.projekte .info_btn h6 {
  text-transform: none;
  pointer-events: none;
}
.projekte .info_btn:hover h6 {
  opacity: var(--opa);
}
.projekte .info_tit,
.projekte .info_cont {
  display: none;
}
.projekte .project {
  padding-bottom: 500vh;
}
.projekte .project.active .info_btn {
  visibility: visible;
}
.projekte .project img {
  display: none;
}
.projekte .project img.landscape {
  height: 100%;
  max-width: 100vw;
  object-fit: contain;
}
.projekte .project img.portrait, .projekte .project img.square {
  height: 100%;
}
.projekte[status=open] .info_btn {
  right: 0;
}

.index {
  display: none;
}

.index_titles .info_btn {
  --side: calc(var(--blu) * 4.5);
  display: block;
  cursor: pointer;
  position: fixed;
  top: 0;
  right: calc(0px - var(--side));
  width: var(--side);
  height: var(--side);
  background: black;
  color: white;
  border-radius: 100vw;
  padding: calc(var(--blu) * 1);
  text-align: center;
  transition-property: right;
  transition-duration: 0.5s;
  transition-timing-function: ease-out;
}
.index_titles .info_btn h6 {
  text-transform: none;
  pointer-events: none;
}
.index_titles .project {
  display: none;
}

[view=slid] .main {
  pointer-events: none;
}
[view=slid] .projekte {
  display: unset;
}
[view=slid] .projekte .project.active .info_btn,
[view=slid] .projekte .project.active .info_tit,
[view=slid] .projekte .project.active .info_cont {
  display: block;
}
[view=slid] .projekte .project img {
  cursor: pointer;
  position: absolute;
}
[view=slid] .projekte .project img.show {
  display: block;
}
[view=slid] .projekte .project[status=info] .info_cont {
  transform: translateY(0);
}

[view=gale] .index {
  --rows: 3;
  display: grid;
  position: fixed;
  padding-top: calc(var(--header) - 1px);
  grid-template-columns: repeat(var(--rows), 1fr);
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow-y: scroll;
}
[view=gale] .index .image {
  height: calc(100vw / var(--rows) / 3 * 4);
  cursor: pointer;
}
[view=gale] .index .image img {
  width: 100%;
}
[view=gale] .index .image img.portrait {
  height: 100%;
  object-fit: cover;
  object-position: center;
}
[view=gale] .index .image .info_crop {
  display: block;
  transform: translateY(-100%);
  transition: transform ease-out 0.5s;
}
[view=gale] .index .image.active .info_crop {
  transform: translateY(0%);
}
[view=gale] .index .info_crop {
  display: none;
}
[view=gale] .index .info_crop {
  position: fixed;
  overflow: hidden;
  top: calc(var(--header) - 1px);
  left: 0;
  width: 100%;
}
[view=gale] .index .info_crop .info_cont {
  position: relative;
  top: 0;
  left: 0;
  padding-top: calc(var(--blu) * 1);
  transform: translateY(0);
}
[view=gale].show_index header {
  width: calc(100% - var(--blu) * 4.5);
}
[view=gale].show_index .index_titles .info_btn {
  right: 0;
}
[view=gale].show_index .index_titles .project {
  display: unset;
}
[view=gale].show_index .index_titles .project:not(.active) {
  display: none;
}

/* –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
/* Navigation */
/* –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
.news_container {
  --pad: calc(var(--blu) * 1);
}
.news_container .news {
  position: fixed;
  bottom: var(--pad);
  left: var(--pad);
  color: white;
}
.news_container .news .header {
  width: fit-content;
  background: black;
  padding: calc(var(--blu) * 1) calc(var(--blu) * 2);
  border-radius: 100vw;
}
.news_container .news .header h6 {
  transform: translateY(7%);
}
.news_container .news .item {
  margin-top: calc(var(--blu) * 2);
}
.news_container .news .item p {
  display: block;
  width: fit-content;
  padding: calc(var(--blu) * 1.15) calc(var(--blu) * 2) calc(var(--blu) * 0.85) calc(var(--blu) * 2);
  margin-top: calc(0px - var(--blu) * 1);
  background: black;
  border-radius: 100vw;
  font-family: var(--pangram);
  line-height: var(--h6-lh);
  font-size: var(--h6-fs);
  font-weight: var(--h6-fw);
  text-transform: uppercase;
}
.news_container .news .item p a {
  color: white;
}
.news_container .news .item p a::after {
  display: none;
}
.news_container .news .item p:last-of-type {
  display: inline-block;
}
.news_container .news .item .close {
  --side: calc(var(--blu) * 4.5);
  position: relative;
  display: inline-block;
  background: black;
  width: var(--side);
  height: var(--side);
  vertical-align: bottom;
  margin-top: calc(0px - var(--blu) * 1);
  border-radius: 100vw;
  cursor: pointer;
}
.news_container .news .item .close .icon::before, .news_container .news .item .close .icon::after {
  --rotation: 0deg;
  content: "";
  display: block;
  background: white;
  height: 45%;
  width: calc(var(--blu) * 0.25);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(var(--rotation));
}
.news_container .news .item .close .icon::before {
  --rotation: 45deg;
}
.news_container .news .item .close .icon::after {
  --rotation: -45deg;
}
.news_container .news .item .close:hover .icon {
  opacity: var(--opa);
}
.news_container .open {
  --side: calc(var(--blu) * 4.5);
  position: fixed;
  bottom: var(--pad);
  left: var(--pad);
  background: black;
  color: white;
  width: var(--side);
  height: var(--side);
  border-radius: 100vw;
  cursor: pointer;
}
.news_container .open h6 {
  display: block;
  width: fit-content;
  top: 50%;
  left: 50%;
  position: absolute;
  transform: translate(-51%, -48%);
}
.news_container .open:hover h6 {
  opacity: var(--opa);
}
.news_container.open .open {
  display: none;
}
.news_container:not(.open) .news {
  display: none;
}

/* –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
/* Footer */
/* –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
.footer {
  position: relative;
  margin-top: calc(var(--p-lh) * 1);
  z-index: -100;
}
.footer .portrait img {
  width: 100%;
  display: block;
}
.footer .imprint {
  position: relative;
}
.footer .imprint * {
  color: white;
  font-family: var(--pangram);
  line-height: var(--h6-lh);
  font-size: var(--h6-fs);
  font-weight: var(--h6-fw);
  text-transform: uppercase;
}
.footer .imprint *::after {
  display: none;
}

@media all and (max-width: 35em) {
  /* –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
  /* 1 / Mobile / XS / */
  /* –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
  :root {
    --media: XS_Mobile;
  }
}
@media all and (min-width: 35em) {
  /* –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
  /* 2 / Tablet / S / */
  /* –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
  :root {
    --media: S_Tablet;
    --blu: 9px;
    --h1-lh: 18.5vw;
  }
  [view=gale] .index {
    --rows: 4;
  }
}
@media all and (min-width: 55em) {
  /* –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
  /* 3 / Laptop and Tablet / M / */
  /* –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
  :root {
    --media: M_Tablet_Laptop;
    --blu: 10px;
    --p-lh: calc(var(--blu) * 5);
  }
  [view=gale] .index {
    --rows: 5;
  }
}
@media all and (min-width: 75em) {
  /* –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
  /* 4 / Laptop / L / */
  /* –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
  :root {
    --media: L_Laptop_Desktop;
    --blu: 11px;
  }
  [view=gale] .index {
    --rows: 6;
  }
}
@media all and (min-width: 120em) {
  /* –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
  /* 5 / Desktop / XL / */
  /* –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
  :root {
    --media: XL_Desktop;
    --blu: 12px;
  }
  [view=gale] .index {
    --rows: 7;
  }
}
.touchevents {
  /* –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
  /* 0 / Touchscreen / T / */
  /* –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
}
.touchevents :root {
  --media: T_Touchscreen;
}

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