/* Type */
@font-face {
  font-family: BFFormular;
  src: url(../fonts/formular-regular.ttf);
  font-weight: normal;
}
@font-face {
  font-family: BFFormular;
  src: url(../fonts/formular-medium.ttf);
  font-weight: bold;
}
@font-face {
  font-family: BFFormularMono;
  src: url(../fonts/formular-mono.ttf);
  font-weight: normal;
}

/* Vars */
:root{
  --marginsize: 1rem;

  --tablecolor: #BEBEBE;
  --tableheight: 2.25rem;
  --tablepadding: .5em;
  --linkcolor: #0500FF;
  --tabledark: #848484;

  --descolor: white;
  --djcolor: white;
  --tchcolor: white;
  --desperc: 0%;
  --djperc: 0%;
  --tchperc: 0%;

  --desx;
  --desy;
  --djx;
  --djy;
  --tchx;
  --tchy;
}



/* Core Stuff */
* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
body {
    font-size: 1rem;
    line-height: 1.2;
    font-family: BFFormular;
}



/* Menu */
nav{
  position: fixed;
  z-index: 1001;
  bottom: 0;
  width: 100%;
  background: white;
  border-top: 1px solid var(--tablecolor);
  height: var(--tableheight);
  padding: 0 var(--marginsize);
  display: flex;
  justify-content: flex-start;
}
nav > *{
  border-right: 1px solid var(--tablecolor);
  height: 100%;
  display: flex;
  align-items: center;
  color: black;
  padding: 0 var(--marginsize);
}
nav > *:first-child{
  padding-left: 0;
}
nav a{
  color: black;
  text-decoration: none;
  font-weight: bold;
  white-space: nowrap;
}
nav .main-menu{
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
  border: none;
}
nav .main-menu li{
  padding: 0;
  height: 100%;
  display: flex;
  align-items: center;
  border-right: 1px solid var(--tablecolor);
}
nav .main-menu button{
  padding: 0 var(--marginsize);
  width: 100%;
  height: 100%;
  background: white;
  border: 0;
}
nav .main-menu button:hover{
  background: var(--tablecolor);
}
nav .main-menu li.active button{
  background: var(--tabledark);
}
nav .audio{
  overflow: hidden;
  background: #ECFF72;
}
nav .audio::before{
  content: " ";
  background:url("../images/speaker.svg") no-repeat;
  background-position: left center;
  width: 1em;
  height: .8em;
}
nav .audio.playing::before{
  background:url("../images/speakeron.svg") no-repeat;
  width: 1em;
}
nav .audio iframe{
  position: fixed;
  left: 0;
  top: 200vh;
}
nav .now{
  font-family: BFFormularMono;
  border-right: none;
  overflow: hidden;
  flex: 1;
  padding-left: 0;
}
nav .now .showing, nav .now .playing{
  padding-left: var(--marginsize);
  padding-right: .5em;
  z-index: 2;
  white-space: nowrap;
  background: white;
}
nav.default .now .display{
  white-space: nowrap;
  width: max-content;
  /* show the marquee just outside the paragraph */
  will-change: transform;
  animation: marquee 10s linear infinite;
}
nav.default .now:hover .display {
  animation-play-state: paused
}
@keyframes marquee {
  0% { transform: translate(0, 0); }
  100% { transform: translate(-100%, 0); }
}



/* Pie Charts */
.pie-chart {
  background:
    radial-gradient(
      circle closest-side,
      transparent 100%,
      white 0
    ),
    conic-gradient(
      var(--descolor) 0,
      var(--descolor) var(--desperc),
      var(--djcolor) 0,
      var(--djcolor) var(--djperc),
      var(--tchcolor) 0,
      var(--tchcolor) var(--tchperc)
  );
  position: relative;
  width: 100%;
  min-height: 100%;
  margin: 0;
  overflow: hidden;
  border-radius: 100%;
}



/* content top */
.main-content{
  --circlesize: 16em;
  --circlespeed: 25s;
  height: 100vh;
  /* enable vh fix */
  height: calc(100vh - var(--vh-offset, 0px) - var(--tableheight));
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}



/* pie chart main page */
.main-content .pie-chart-container{
  position: relative;
  padding: 4em;
  width: 100%;
  height: 100%;
  max-width: calc(var(--circlesize) * 2);
  max-height: calc(var(--circlesize) * 2);
  margin: var(--marginsize);
  animation: spincw var(--circlespeed) infinite linear;
}
.main-content .pie-chart{
  transform: rotate(90deg);
}
.main-content .pie-chart-label{
  position: absolute;
  transform: translate(-50%, -50%);
  transform-origin: center;
  top: 0;
  left: 0;
  animation: spinccw var(--circlespeed) infinite linear;
  left: calc( var(--specificx) * var(--circlesize) + var(--circlesize));
  top: calc( var(--specificy) * var(--circlesize) + var(--circlesize));
}
.main-content .pie-chart-label.des{
  --specificx: var(--desx);
  --specificy: var(--desy);
}
.main-content .pie-chart-label.dj{
  --specificx: var(--djx);
  --specificy: var(--djy);
}
.main-content .pie-chart-label.tch{
  --specificx: var(--tchx);
  --specificy: var(--tchy);
}
@keyframes spincw {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
@keyframes spinccw {
  from {
    transform: translate(-50%, -50%) rotate(360deg);
  }
  to {
    transform: translate(-50%, -50%) rotate(0deg);
  }
}



/* all tables */
.main-table{
  list-style: none;
  padding: 0 var(--marginsize);
  margin: 0;
  font-size: .75em;
  color: var(--tabledark);
  display: none;
}
.main-table.active{
  display: flex;
  flex-direction: column;
}
.main-table a{
  color: var(--linkcolor);
}
.main-table .table-header{
  color: black;
}
.main-table .table-content:hover{
  background: black;
  color: white;
}
.main-table .table-content:hover a{
  color: white;
}
.main-table .row{
  border-top: 1px solid var(--tablecolor);
}
.main-table .description-title{
  height: var(--tableheight);
  display: flex;
  align-items: center;
  color: black;
  padding: 0 .5em;
}
.main-table .description{
  line-height: calc(var(--tableheight) + 1px);
  padding: 1px .5em 0 .5em;
  background-size: 100% calc(var(--tableheight) + 1px);
  background-image:
    linear-gradient(to bottom, var(--tablecolor) 1px, transparent 1px);
  border-top: none;
}
.main-table .description p{
  margin: 0;
  margin-bottom: calc( var(--tableheight) + 1px );
}
.main-table .description p:last-of-type{
  margin: 0;
  margin-bottom: -1px;
}
.main-table .row ul{
  list-style: none;
  height: var(--tableheight);
  padding: 0;
  margin: 0;
  display: flex;
  align-items: center;
}
.main-table .row li{
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 0;
  display: flex;
  align-items: center;
  padding: var(--tablepadding);
  height: 100%;
  border-right: 1px solid var(--tablecolor);

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.main-table .row li:last-of-type{
  border-right: none;
}
.main-table .row li.emotion{
  justify-content: flex-end;
}
.main-table .row .diagram{
  --descolor: white;
  --djcolor: white;
  --tchcolor: white;
  flex-grow: revert;
  flex-shrink: revert;
  flex-basis: revert;
  width: 3em;
}
.main-table .pie-chart{
  border: 1px solid var(--tablecolor);
  border-radius: 100%;
}
.main-table .des .pie-chart{
  --descolor: #B18AFF;
}
.main-table .dj .pie-chart{
  --djcolor: #EDFF72;
}
.main-table .tch .pie-chart{
  --tchcolor: #9B7849;
}
.main-table .row span{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
}
.main-table img{
  max-height: 100%;
  margin-right: .25em;
}
.main-table progress{
  direction: rtl;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border: none;
  height: 2em;
  background: none;
  width: 100%;
}
.main-table progress::-webkit-progress-bar{
  background: none;
}
.main-table progress::-webkit-progress-value{
  background-color: var(--tabledark);
  border-radius: .2em;
}
.main-table progress::-moz-progress-bar{
  background-color: var(--tabledark);
  border-radius: .2em;
}
.main-table .emotion-counter{
  color: white;
  position: absolute;
  margin-right: .5em;
}
.main-table .counter{
  height: var(--tableheight);
  padding: var(--tablepadding);
  border-top: 1px solid var(--tablecolor);
  display: flex;
  align-items: center;
}
.main-table .counter span:last-of-type{
  color: black;
  margin-left: .25em;
}
.table-header .selected{
  /* font-weight: bold; */
}
.table-header .selected.asc::after, .table-header .selected.desc::after{
  content: " ";
  background:url("../images/arrow.svg") no-repeat;
  background-position: center;
  width: .8em;
  height: .8em;
  transform: rotate(90deg);
}
.table-header .selected.desc::after{
  transform: rotate(-90deg);
}



/* Tables specific styling */
.main-table.works .images{
  flex-grow: revert;
  flex-shrink: revert;
  flex-basis: revert;
  min-width: calc(12em + 2px);
}
.main-table.works .images .plus{
  width: 2em;
  height: 2em;
  border: 1px solid var(--tablecolor);
  color: black;
  display: flex;
  justify-content: center;
  align-items: center;
}
.main-table.works .table-content:hover .images .plus{
  color: white;
}
.main-table.works .title{
  flex-grow: 3;
}
.main-table.works .link{
  flex-grow: 2;
}
.main-table.works .table-content{
  cursor: pointer;
}

/* Project table */
.main-table.project{
  display: flex;
  flex-direction: column;
}
.main-table.project .table-content{
  cursor: revert;
}



.main-table.images.active{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-content: flex-start;
  align-items: flex-start;
}
.main-table.images li{
  padding: 1em;
  border-top: 1px solid var(--tablecolor);
}
.main-table.images li img{
  width: calc((100vw - var(--scrollbar-width) - 2rem) / 7 - 2em);
  margin: 0;
}
.main-table.images li:nth-last-of-type(2){
  flex-grow: 1;
}

.main-table.images .counter{
  width: 100%;
}
.main-table.images a.image-link:hover{
  opacity: .5;
}



/* Footer */
.footer{
  font-size: .75em;
  color: var(--tabledark);
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
  padding: 0 var(--marginsize);
  margin-top: calc(var(--marginsize) * -1);
  margin-bottom: calc(var(--tableheight) + 2px);
}
.footer *{
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
.footer .imprint-link{
  flex: 1;
  border-top: 1px solid var(--tablecolor);
  height: var(--tableheight);
  margin-right: 1em;
  color: black;
}
.footer .emoji{
  font-size: 4em;
}


/* Project Pages */
.swiper-slide{
  object-fit: contain;
  padding: calc(var(--marginsize) / 2);
}
/* Video Embed */
.videoWrapper {
  position: relative;
  width: 100%;
  height: 100%;
}
.videoWrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
/* extra slider navigation */
.extra.custom-swiper-button-prev, .extra.custom-swiper-button-next{
  height: calc(100% - 2.25em);
  width: 10vw;
  top: 0;
  z-index: 2;
  cursor: pointer;
  position: absolute;
  /* background: red; */
}
.extra.custom-swiper-button-next{
  right: 0;
}
.navigation button{
  background: white;
  border: none;
  padding: 0;
}
.navigation button::after{
  display: block;
  content: " ";
  background:url("../images/arrow.svg") no-repeat;
  background-position: center;
  width: .8em;
  height: .8em;
  margin-right: 1em;
}
.navigation button.custom-swiper-button-next::after{
  transform: rotate(180deg);
  margin-right: 0;
  margin-left: 1em;
}

.row.now{
  font-family: monospace;
  font-size: 1rem;
  height: auto;
  min-height: var(--tableheight);
  color: black;
  display: flex;
  align-items: center;
  display: none;
}
.row.now *{
  padding: .5em 0 .5em calc(.5em * .75);
  white-space: revert!important;
  overflow: revert!important;
  text-overflow: revert!important;
}

/* Project Menu */
nav .back a {
  font-weight: revert;
}
nav .back::before {
  display: block;
  content: " ";
  background:url("../images/arrow.svg") no-repeat;
  background-position: center;
  width: .8em;
  height: .8em;
  margin-right: .5em;
}
nav .audio {
  display: none;
}
nav.project .now {
  border-right: 1px solid var(--tablecolor);
  flex: revert;
}
nav.project .now .display {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}




/* breakpoints */
@media (max-width:1800px) {
  /* works table */
  .main-table.works .tag{
    display: none;
  }
}
@media (max-width:1600px) {
  /* works table */
  .main-table.works .size{
    display: none;
  }
}
@media (max-width:1400px) {
  /* works table */
  .main-table.works .link{
    display: none;
  }
  .main-table.images li img {
    width: calc((100vw - var(--scrollbar-width) - 2rem) / 6 - 2em);
  }
}
@media (max-width:1200px) {
  /* works table */
  .main-table.works .what{
    display: none;
  }
  .main-table.images li img {
    width: calc((100vw - var(--scrollbar-width) - 2rem) / 5 - 2em);
  }
}
@media (max-width:1100px) {
  /* works table */
  .main-table.works .emotion{
    display: none;
  }
}
@media (max-width:1000px) {
  /* menu */
  nav .now .playing{
    display: none;
  }
  /* image table */
  .main-table.images li img {
    width: calc((100vw - var(--scrollbar-width) - 2rem) / 4 - 2em);
  }
  /* works table */
  .main-table.works .location{
    display: none;
  }
  /* Project Pages */
  nav.project .now{
    display: none;
  }
  .now.row{
    display: flex;
    width: 100%;
  }
  .project.description-title{
    display: none;
  }
  /* Project Table */
  .main-table.works.project{
    flex-direction: row;
    flex-wrap: wrap;
  }
  .main-table.works.project .location{
    display: flex;
  }
  .main-table.works.project .emotion{
    display: flex;
  }
  .main-table.works.project .what{
    display: flex;
  }
  .main-table.works.project .link{
    display: flex;
  }
  .main-table.works.project .size{
    display: flex;
  }
  .main-table.works.project .tag{
    display: flex;
  }
  .main-table.works.project .row.table-content{
    flex: 1;
    width: 1px;
  }
  .main-table.works.project .table-content:hover{
    background: white;
    color: inherit;
  }
  .main-table.works.project .table-content:hover .plus{
    color: black;
  }
  .main-table.works.project .table-content:hover a{
    color: var(--linkcolor);
  }
  .main-table.works.project .row ul{
    flex-direction: column;
    height: auto;
  }
  .main-table.works.project .row li{
    height: var(--tableheight);
    flex-shrink: 0;
    flex-basis: revert;
    width: 100%;
    min-width: 0;
    border-bottom: 1px solid var(--tablecolor);
  }
  .main-table.works.project .row.table-content li{
    border-right: 0;
    justify-content: flex-end;
  }
  .main-table.works.project .row.table-header li{
    padding-right: 1em;
  }
  .main-table.works.project .table-content span{
    text-align: right;
  }
  .main-table.works.project .plus{
    flex-basis: revert;
    flex-grow: revert;
  }
  .main-table.works.project .table-header .diagram{
    border-right: 1px solid var(--tablecolor);
  }
  .main-table.works.project .diagram .pie-chart{
    width: 2em;
    height: 2em;
  }
  .main-table.works.project .counter{
    width: 100%;
    border-top: 0;
  }
}
@media (max-width:900px) {
  /* works table */
  .main-table.works .year{
    display: none;
  }
  .main-table.works.project .year{
    display: flex;
  }
}
@media (max-width:800px) {
  /* main pie chart */
  .main-content .pie-chart-label{
    left: calc( var(--specificx) * var(--circlesize) / 2 + var(--circlesize) );
    top: calc( var(--specificy) * var(--circlesize) / 2 + var(--circlesize) );
  }
  /* works table */
  .main-table.works .with{
    display: none;
  }
  .main-table.works.project .with{
    display: flex;
  }
  /* about table */
  .main-table.about .who{
    display: none;
  }
  .main-table.about .what{
    flex-grow: 2;
  }
  .main-table.about .where{
    flex-grow: 3;
  }
  /* contact table */
  .main-table.contact .for{
    display: none;
  }
  /* images */
  .main-table.images li img {
    width: calc((100vw - var(--scrollbar-width) - 2rem) / 3 - 2em);
  }
  /* Project Pages/Menu */
  nav{
    padding-right: 0;
  }
  nav.default .now{
    display: none;
  }
  nav.project .main-menu li:last-of-type{
    border-right: 0;
  }
  nav .logo{
    padding-left: 0;
    flex: 1;
  }
  nav.project .back, nav.project .navigation{
    position: fixed;
    bottom: var(--tableheight);
    left: 0;
    height: var(--tableheight);
    padding-left: var(--marginsize);
    width: 50vw;
    border-top: 1px solid var(--tablecolor);
    background: white;
    display: flex;
    justify-content: center;
  }
  nav.project .main-menu{
    z-index: 1001;
  }
  nav.project .back{
    left: 0;
  }
  nav.project .navigation{
    left: 50vw;
    border-right: 0;
  }
  .footer.project{
    margin-bottom: calc( 2 * var(--tableheight) );
  }
  .main-content.swiper{
    height: calc(100vh - var(--vh-offset, 0px) - 3 *var(--tableheight));
  }


}
/* Proper Mobile */
@media (max-width:600px) {
  /* Menu */
  nav.default a{
    flex: 1;
  }
  nav .main-menu{
    position: absolute;
    right: 0;
    bottom: -1px;
    border: none;
    height: auto;
    flex-direction: column;
  }
  nav .main-menu li{
    width: 100%;
    border: none;
    border-top: 1px solid var(--tablecolor);
    border-left: 1px solid var(--tablecolor);
    cursor: pointer;
    display: none;
  }
  nav .main-menu li.active{
    display: flex;
    color: white;
  }
  nav .main-menu li.expanded{
    display: flex;
  }
  nav .main-menu li.active button::after{
    display: inline-block;
    content: " ";
    background:url("../images/arrowwhite.svg") no-repeat;
    background-position: center;
    width: .8em;
    height: .8em;
    margin-left: .5em;
    transform: rotate(-90deg);
  }
  nav .main-menu li.active.expanded button::after{
    transform: rotate(90deg);
  }
  nav .main-menu button{
    height: calc( var(--tableheight) + 1px);
    height: var(--tableheight);
  }
  nav .audio{
    display: none;
  }
  /* main pie chart */
  .main-content .pie-chart-container{
    width: calc(100vw - 2 * var(--marginsize));
    height: calc(100vw - 2 * var(--marginsize));
    padding: 0;
  }
  .main-content .pie-chart-label{
    left: calc( var(--specificx) * (66vw - 2rem) / 2 + (100vw - 2rem) / 2);
    top: calc( var(--specificy) * (66vw - 2rem) / 2 + (100vw - 2rem) / 2);
  }
  /* works table */
  .main-table.works .for{
    display: none;
  }
  .main-table.works.project .for{
    display: flex;
  }
  /* contact table */
  .main-table.contact .what{
    display: none;
  }
  .main-table.contact .link{
    flex-grow: 2;
  }
  /* image table */
  .main-table.images li img {
    width: calc((100vw - var(--scrollbar-width) - 2rem) / 2 - 2em);
  }
}
@media (max-width:500px) {
  /* works table */
  .main-table.works .images{
    display: none;
  }
  .main-table.works.project .images{
    display: flex;
  }
  /* about table */
  .main-table.about .diagram{
    display: none;
  }
  .main-table.about .where{
    border-right: none;
  }
}
@media (max-width:350px) {
  /* about table */
  .main-table.about .when{
    display: none;
  }
  .main-table.about .what{
    flex-grow: 1;
  }
  /* contact table */
  .main-table.contact .who{
    display: none;
  }
}