* {
  -webkit-box-sizing: border-box; 
  -moz-box-sizing: border-box; 
  box-sizing: border-box; 
  -moz-osx-font-smoothing: grayscale; 
  -webkit-font-smoothing: antialiased; 
  -moz-font-smoothing: antialiased; 
  font-smoothing: antialiased; 
  -moz-osx-font-smoothing: grayscale;
}

@font-face {
  font-family: 'maxiRound';
  src: url('../fonts/ABCMaxiRound-Light.woff') format('woff'),
      url('../fonts/ABCMaxiRound-Light.woff2') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'trabis';
  src: url('../fonts/aa-trabis-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

html {
  min-height: 0vw;
  text-size-adjust: 100%;
  height: 100%;
  overflow: hidden;
}

@media screen and (min-width: 700px)  {
  html {
    font-size: calc(4px + .9vw);
  }
}
@media screen and (max-width: 699px)  {
  html {
    font-size: calc(4px + .75vw);
  }
}


@media screen and (min-width: 700px)  {
  :root {
    --text-size: 1.25rem;
    --text-line-height: 1.15; /* 1.076; */
    --title-size: 3.1vw;
    --title-letter-spacing: calc( -1 * var(--title-size) / 38.75);
    --title-word-spacing: calc(var(--title-size) * 0.04);
    --title-line-height: 0.95;
    --note-size: calc(0.7 * var(--text-size));
    --note-line-height: 1.25;
    --column-gap: 1.5vw;
    --row-gap: .8vw;
    --border-thickness: .09vw;
  }
}

@media screen and (max-width: 699px)  {
  :root {
    --text-size: 2.2rem; /* 2 */
    --text-line-height: 1.2;
    --title-size: 9vw;
    --title-letter-spacing: calc( -1 * var(--title-size) / 38.75);
    --title-word-spacing: calc(var(--title-size) * 0.04);
    --title-line-height: 0.95;
    --note-size: var(--text-size);
    --note-line-height: var(--text-line-height);
    --column-gap: 4.2vw;
    --row-gap: 2.5vw;
    --border-thickness: .15rem;
    
  }
}

body {
  height: 100%;
  margin: 0;
  padding: 0;
  font-family: 'trabis', monospace;
  font-size: var(--text-size);
  line-height: var(--text-line-height);
  font-feature-settings: 'liga' on, 'dlig' on;
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
  padding: 0 var(--column-gap) 0 var(--column-gap);
}

img {
  width: 100%;
  display: block;
}

a {
  color: #000;
  text-decoration: none;
}

p:first-child {
  margin-top: 0 !important;
}

p:last-child {
  margin-bottom: 0 !important;
}

h1, h2, h3, h4, h5 {
  margin: 0;
  padding: 0;
  font-weight: normal;
}

h1 {
  font-family: "maxiRound", monospace;
}

.view {
  scroll-snap-align: start;
}

section {
  position: relative;
}

.empty-space {
  padding: 0;
  height: 100dvh;
}

.contact {
  display: grid;
  padding-bottom: var(--row-gap);
}

.contact a:hover {
  text-decoration: underline;
}

.contact-item#langswitcher {
  display: grid;
  text-transform: lowercase;
}

.billboard {
  width: 100%;
  user-select: none;
  flex-shrink: 1;
  position: relative;
}

.billboard.bottom {
  padding-bottom: var(--row-gap);
  position: sticky;
  top: 0;
  z-index: 50;
}

.billboard-filter {
  position: absolute;
  width: 0;
  height: 0;
}

.billboard .data {
  display: none;
}

.billboard-scale {
  width: 100%;
  display: grid;
  border-right: var(--border-thickness) solid #000;
}

.billboard-scale-cell {
  border-top: var(--border-thickness) solid #000;
  border-left: var(--border-thickness) solid #000;
}

.billboard-scale-cell:nth-child(odd) {
  background-color: #000;
}

.billboard-grid {
  display: grid;
  grid-template-columns: repeat(46, 1fr);
  border-right: var(--border-thickness) solid #000;
  background-color: #FFF;
}

.billboard.top .billboard-grid {
  border-top: var(--border-thickness) solid #000;
}

.billboard-grid-cell {
  aspect-ratio: 1.43;
  border-bottom: var(--border-thickness) solid #000;
  border-left: var(--border-thickness) solid #000;
}

.billboard-text {
  position: absolute;
  font-family: "maxiRound", monospace;
  font-size: var(--title-size);
  line-height: var(--title-line-height);
  letter-spacing: var(--title-letter-spacing);
  word-spacing: var(--title-word-spacing);
  filter: url(#outline);
}

.billboard-text#logo {
  cursor: pointer;
}

.button-infos {
  background: #FFF;
	color: inherit;
	border: none;
	padding: 0;
	font: inherit;
	cursor: pointer;
	outline: inherit;
  appearance: none;
  position: absolute;
  bottom:0;
  border: var(--border-thickness) solid #000;
  border-radius: calc(var(--text-size) * var(--text-line-height));
  cursor: pointer;
}

.headline {
  padding: 0 var(--column-gap) var(--column-gap) 0;
}

.headline p {
  margin: 0;
}

.infos {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  font-size: var(--note-size);
  line-height: var(--note-line-height);
}

.infos h2 {
  font-size: var(--note-size);
  line-height: var(--note-line-height);
}

.infos a {
  text-decoration: underline;
}
.infos a:hover {
  text-decoration: none;
}

.infos .main-text {
  font-size: var(--text-size);
  line-height: var(--text-line-height);
}
.infos .main-text p {
  margin: var(--column-gap) 0 var(--column-gap) 0;
}

.infos .three-columns#credits {
  width: 100%;
  flex-grow: 1;
  margin-top: calc(4 * var(--column-gap));
}

.infos .portrait {
  height: auto;
  display: block;
}

@media screen and (min-width: 700px)  {

  .contact {
    grid-template-columns: 25fr 17fr 4fr;
  }

  .contact-item#mail {
    display: grid;
    grid-template-columns: 13fr 12fr;
  }

  .contact-item#mail .contact-item-cell {
    display: grid;
    grid-template-columns: 5fr 5fr 2fr 1fr;
  }

  .contact-item#langswitcher {
    grid-template-columns: 3fr 1fr;
  }

  .billboard-scale {
    height: .8vw;
    grid-template-columns: 0.5fr 0.5fr 1fr 3fr 5fr 0.5fr 0.5fr 1fr 3fr 5fr 0.5fr 0.5fr 1fr 3fr 5fr 0.5fr 0.5fr 1fr 3fr 5fr 0.5fr 0.5fr 1fr 3fr 1fr;
  }
  
  .billboard-grid {
    grid-template-columns: repeat(46, 1fr);
  }

  .billboard-text#logo {
    right: 3.5vw;
    bottom: 3.5vw;
  }
  
  .billboard-text#billboard {
    top: 2.7vw;
    left: 1vw;
    width: 75%;
  }
  
  .billboard-text p {
    margin: 1.5vw 0 1.5vw 0;
  }

  .button-infos {
    left: 50%;
    padding: .3rem .7rem .5rem .7rem;
    transform: translateY(calc(100% + .3rem));
  }

  .headline {
    width: 50%;
  }

  .infos {
    padding: 0 calc(50% + var(--column-gap)) var(--column-gap) 0;
  }

  .infos h2 {
    margin: calc(2 * var(--column-gap)) 0 calc(var(--note-size) * var(--note-line-height)) 0;
  }

  .infos .two-columns {
    columns: 2;
    column-gap: var(--column-gap);
  }
  
  .infos .two-columns p {
    break-inside: avoid;
    break-after: always;
  }

  .infos .portrait {
    position: absolute;
    bottom: var(--column-gap);
    right: 0;
    width: calc( 11 / 46 * 100%);
  }

  .infos .three-columns#credits {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    align-items: end;
    column-gap: var(--column-gap);
  }
  
  
}


@media screen and (max-width: 699px)  {
  
  .contact {
    grid-template-columns: 10fr 5fr;
  }

  .contact-item#langswitcher {
    grid-template-columns: 2fr 8fr;
  }

  .billboard-scale {
    height: 3vw;
    grid-template-columns: 0.5fr 0.5fr 1fr 3fr 5fr 0.5fr 0.5fr 1fr 3fr;
  }
  
  .billboard-scale-cell, .billboard-grid-cell{
    display: none;
  }

  .billboard-scale-cell:nth-child(-n+9) {
    display: block;
  }

  .billboard-grid {
    grid-template-columns: repeat(15, 1fr);
  }

  .billboard.top .billboard-grid .billboard-grid-cell:nth-child(-n+270) {
    display: block;
  }

  .billboard.bottom .billboard-grid .billboard-grid-cell:nth-child(-n+75) {
    display: block;
  }

  .billboard-text#logo {
    right: 10vw;
    bottom: 9.6vw;
  }
  
  .billboard-text#billboard {
    top: 8.5vw;
    padding: 0 var(--column-gap) 0 var(--column-gap);
  }
  
  .billboard-text p {
    margin: 4.3vw 0 4.3vw 0;
  }

  .button-infos {
    right: 0;
    padding: .6rem 1.2rem .9rem 1.2rem;
    transform: translateY(calc(100% + .35rem));
  }

  .headline {
    width: calc(-8rem + 100%);
  }

  .infos {
    padding: 0 0 var(--column-gap) 0;
  }

  .infos h2 {
    margin: calc(3 * var(--column-gap)) 0 calc(var(--note-size) * var(--note-line-height)) 0;
  }

  .infos .portrait {
    width: 100%;
    position: relative;
    margin-top: calc(2 * var(--column-gap));
  }

  .infos .three-columns#credits div {
    margin-bottom: calc(var(--note-size) * var(--note-line-height));
  }

  .infos .three-columns#credits div:last-child{
    margin-bottom: 0;
  }
  
}

@media (hover: hover) {
  .button-infos:hover {
    color: #FFF;
    background-color: #000;
  }
}