:root { --white: #f1edeb; --pink: #ff00ff; --green: #48bd8d; --lila: #8200ff; --orange: #ff6700; --black: #000 }

html { font-family: VG5000; background: var(--white); font-size: 16pt; line-height: 30pt }
body { margin: 0 }

a { color: var(--black); }
a:hover { color: var(--pink) }
h1, h2, h3, h4, h5 { margin: 0 }
figure { margin: 0 }

h1, .text-40 { font-size: 40pt; line-height: 57pt; font-weight: normal }
h2, .text-30 { font-size: 30pt; line-height: 29.5pt,;font-weight: normal }
h3, .text-22 { font-size: 22pt; line-height: 29.5pt,;font-weight: normal }
h4, .text-16 { font-size: 16pt; line-height: 29.5pt,;font-weight: normal }
h5, .text-12 { font-size: 12pt; line-height: 15pt; font-weight: normal }

.uppercase { text-transform: uppercase }

.block { display: block !important }
.flex { display: flex !important }

.grid { display: grid; grid-template-columns: repeat(12, 1fr); grid-template-rows: auto; gap: 22pt }
.grid > .column { grid-column: span var(--span) }
.grid > .column:has(> .align-self-center) { display: grid }
.grid img { width: 100%; max-width: 100% }

.border-top { border-top: 1px solid var(--black) }

.leading-none { line-height: 1 }

.font-kobata { font-family: Kobata !important; font-weight: normal }
.font-vg5000 { font-family: VG5000 !important }

.text-center { text-align: center }
.align-self-center { align-self: center }

code { font-family: Kobata !important; font-weight: normal }

.bg-white-white, .bg-white-pink, .bg-white-green, .bg-white-lila, .bg-white-orange, .bg-white-black { background-color: var(--white) }
.bg-pink-white, .bg-pink-pink, .bg-pink-green, .bg-pink-lila, .bg-pink-orange, .bg-pink-black { background-color: var(--pink) }
.bg-green-white, .bg-green-pink, .bg-green-green, .bg-green-lila, .bg-green-orange, .bg-green-black { background-color: var(--green) }
.bg-lila-white, .bg-lila-pink, .bg-lila-green, .bg-lila-lila, .bg-lila-orange, .bg-lila-black { background-color: var(--lila) }
.bg-orange-white, .bg-orange-pink, .bg-orange-green, .bg-orange-lila, .bg-orange-orange, .bg-orange-black { background-color: var(--orange) }
.bg-black-white, .bg-black-pink, .bg-black-green, .bg-black-lila, .bg-black-orange, .bg-black-black { background-color: var(--black) }

.bg-white-white, .bg-pink-white, .bg-green-white, .bg-lila-white, .bg-orange-white, .bg-black-white { background-image: url("/assets/grid/white.png") }
.bg-white-pink, .bg-pink-pink, .bg-green-pink, .bg-lila-pink, .bg-orange-pink, .bg-black-pink { background-image: url("/assets/grid/pink.png") }
.bg-white-green, .bg-pink-green, .bg-green-green, .bg-lila-green, .bg-orange-green, .bg-black-green { background-image: url("/assets/grid/green.png") }
.bg-white-lila, .bg-pink-lila, .bg-green-lila, .bg-lila-lila, .bg-orange-lila, .bg-black-lila { background-image: url("/assets/grid/lila.png") }
.bg-white-orange, .bg-pink-orange, .bg-green-orange, .bg-lila-orange, .bg-orange-orange, .bg-black-orange { background-image: url("/assets/grid/orange.png") }
.bg-white-black, .bg-pink-black, .bg-green-black, .bg-lila-black, .bg-orange-black, .bg-black-black { background-image: url("/assets/grid/black.png") }

@media (min-resolution: 2x) {
  .bg-white-white, .bg-pink-white, .bg-green-white, .bg-lila-white, .bg-orange-white, .bg-black-white { background-image: url("/assets/grid/white@2x.png"); background-size: 105px 78px }
  .bg-white-pink, .bg-pink-pink, .bg-green-pink, .bg-lila-pink, .bg-orange-pink, .bg-black-pink { background-image: url("/assets/grid/pink@2x.png"); background-size: 105px 78px }
  .bg-white-green, .bg-pink-green, .bg-green-green, .bg-lila-green, .bg-orange-green, .bg-black-green { background-image: url("/assets/grid/green@2x.png"); background-size: 105px 78px }
  .bg-white-lila, .bg-pink-lila, .bg-green-lila, .bg-lila-lila, .bg-orange-lila, .bg-black-lila { background-image: url("/assets/grid/lila@2x.png"); background-size: 105px 78px }
  .bg-white-orange, .bg-pink-orange, .bg-green-orange, .bg-lila-orange, .bg-orange-orange, .bg-black-orange { background-image: url("/assets/grid/orange@2x.png"); background-size: 105px 78px }
  .bg-white-black, .bg-pink-black, .bg-green-black, .bg-lila-black, .bg-orange-black, .bg-black-black { background-image: url("/assets/grid/black@2x.png"); background-size: 105px 78px }
}

.container { padding: 22pt }

.link { text-decoration: none; color: var(--black) }
.link:hover { color: var(--lila) }

.no-button { border: none; background: transparent; margin: 0; padding: 0 }
.no-button:hover { cursor: pointer }

.embed .iframe { display: none }
.embed .iframe.active { padding:56.25% 0 0 0; position:relative }
.embed .iframe.active iframe { position:absolute; top:0; left:0; width:100%; height:100% }
.embed div { position: relative; }
.embed video { width: 100%; }
.embeded-iframe { border: none; width: 100% }

.siema { position: relative; transition: height .2s }
.siema button { position: absolute; top: 50%; background: #fff; color: var(--blue); border: none; font-size: 1rem; margin: 0; opacity: 0; transition: opacity .5s }
.siema button:hover { cursor: pointer; }
.siema:hover button { opacity: 1 }
.siema button.prev { left: 0; }
.siema button.next { right: 0; }
.siema img { width: 100%; object-fit: contain }

.calendar-entry { display: grid; grid-template-columns: 199pt 508pt }

.menu-button { display: none; width: 47px; height: 48px; flex-direction: column; justify-content: center; box-sizing: content-box }
.menu-button div { width: 47px; height: 7px; background: var(--black) }
.menu-button:hover { color: var(--lila) }
.menu-button:hover div { background: var(--lila) }

#menu-container { max-width: 498px; position: absolute; left: 0; top: 0; bottom: 0; pointer-events: none; }
#menu-container button, #menu-container a { pointer-events: initial }
nav { display: none }
nav { height: 100%; padding-top: 89pt !important; justify-content: space-between; flex-direction: column; box-sizing: border-box; }
nav > div { margin-left: -2px }

#lang-switch { position: absolute; top: -3px; right: 0 }

footer { background: var(--white) }

.headline { padding-left: 179pt }
.content-footer { display:flex; justify-content: space-between }
.content-footer-socials { display: flex; justify-content: space-between; align-items: center; width: 439px; }

@media (max-width: 750px) {
  footer { font-size: 22pt !important; letter-spacing: 0 !important; padding: 11pt !important }
  .headline { padding-left: 79pt }
  .headline h4 { max-width: calc(100dvw - 22pt - 37pt - 37pt - 37pt - 22pt) }
  .content-footer { flex-direction: column; }
  .content-footer-socials { width: 100% }
  .calendar-entry { grid-template-columns: 1fr }

  .project-list { text-align: center; }
  .project-list a, .project-list span { display: block }

  .grid { display: block; }
  .siema button { font-size: 12px; opacity: 1 }
  video { width: 100%; }
}

.embed-btn { display:block; position:absolute !important; top:0; right:0; bottom:0; left:0; z-index:1; background-position:50%; background-size: 15.5% auto; background-repeat:no-repeat; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13 8'%3E%3Crect fill='rgba(0,0,0,.65)' width='13' height='8' rx='1' ry='1'/%3E%3Cpolygon fill='%23fff' points='5 6 9 4 5 2'/%3E%3C/svg%3E") }
.embed-btn:hover { cursor: pointer; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13 8'%3E%3Crect fill='%231AB7EA' width='13' height='8' rx='1' ry='1'/%3E%3Cpolygon fill='%23fff' points='5 6 9 4 5 2'/%3E%3C/svg%3E") }
.embed-btn.yt { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 68 48'%3E%3Cpath fill='%23212121' fill-opacity='.8' d='M66.52,7.74c-0.78-2.93-2.49-5.41-5.42-6.19C55.79,.13,34,0,34,0S12.21,.13,6.9,1.55 C3.97,2.33,2.27,4.81,1.48,7.74C0.06,13.05,0,24,0,24s0.06,10.95,1.48,16.26c0.78,2.93,2.49,5.41,5.42,6.19 C12.21,47.87,34,48,34,48s21.79-0.13,27.1-1.55c2.93-0.78,4.64-3.26,5.42-6.19C67.94,34.95,68,24,68,24S67.94,13.05,66.52,7.74z'/%3E%3Cpath fill='%23fff' d='m45 24-18-10v20'/%3E%3C/svg%3E") }
.embed-btn.yt:hover { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 68 48'%3E%3Cpath fill='red' d='M66.52,7.74c-0.78-2.93-2.49-5.41-5.42-6.19C55.79,.13,34,0,34,0S12.21,.13,6.9,1.55 C3.97,2.33,2.27,4.81,1.48,7.74C0.06,13.05,0,24,0,24s0.06,10.95,1.48,16.26c0.78,2.93,2.49,5.41,5.42,6.19 C12.21,47.87,34,48,34,48s21.79-0.13,27.1-1.55c2.93-0.78,4.64-3.26,5.42-6.19C67.94,34.95,68,24,68,24S67.94,13.05,66.52,7.74z'/%3E%3Cpath fill='%23fff' d='m45 24-18-10v20'/%3E%3C/svg%3E") }
