@charset "UTF-8";
/*!
 * Copyright 2023 Fruitcake W+P AG, Worb
 * https://fruitcake.ch
 *
 * Uses modern CSS reset
 * https://github.com/hankchizljaw/modern-css-reset

 * Uses slick carousel
 * https://github.com/kenwheeler/slick
 */
/* –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
/* 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 {
  --header-height: calc(var(--h1-fs) + (var(--blu) * 2));
}

/* –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
/* Global */
/* –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
.section {
  position: relative;
  z-index: 200;
}
.section .title {
  text-transform: uppercase;
}
.section .background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -100;
}
.section.blocker {
  margin-top: calc(var(--vh) * 100 - var(--header-height));
}

/* –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
/* Typography */
/* –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
/* –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
/* Selecta // Medium */
@font-face {
  font-family: "Selecta";
  src: url("fonts/selecta_medium.woff2") format("woff2"), url("fonts/selecta_medium.woff") format("woff");
  font-style: normal;
  font-weight: 500;
}
:root {
  --selecta: "Selecta", Helvetica Neue, Helvetica, Arial, sans-serif;
  --p-lh: var(--blu);
  --p-fs: calc(var(--p-lh) * 0.8333333333);
  --h1-lh: calc(var(--blu) * 6);
  --h1-fs: calc(var(--h1-lh) * 1);
  --h1-max: calc(var(--h1-lh) * 14);
}

*, *::before, *::after {
  font-family: var(--selecta), "Times New Roman";
  font-weight: 100;
  color: white;
  letter-spacing: 0.01em;
}

p, .p, h2, .h2 {
  font-size: var(--p-fs);
  line-height: var(--p-lh);
}

h2, .h2 {
  text-transform: uppercase;
}

h1, .h1 {
  font-size: var(--h1-fs);
  line-height: var(--h1-lh);
}
h1 *, .h1 * {
  font-size: var(--h1-fs);
  line-height: var(--h1-lh);
}

.type_setter {
  padding: var(--blu);
}

a:hover {
  opacity: 0.7;
}

/* –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
/* Header */
/* –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
.section.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: calc(var(--vh) * 100);
  z-index: 100;
  padding-bottom: var(--header-height);
  background: #fe4b00;
}
.section.header .info, .section.header .slogan {
  position: absolute;
  left: 0;
  width: 100%;
  text-align: center;
  padding: var(--blu);
}
.section.header .info {
  top: 0;
  white-space: nowrap;
}
.section.header .slogan {
  bottom: var(--header-height);
}
.section.header .logo {
  position: absolute;
  top: calc(50% - var(--header-height) * 0.5);
  left: 50%;
  transform: translate(-50%, -50%);
  width: 70%;
}

.dither {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 300;
  pointer-events: none;
  mix-blend-mode: lighten;
}

/* –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
/* Programm */
/* –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
.section.programm {
  background: #3f8fb0;
}
.section.programm .title {
  padding: var(--blu);
  width: 100%;
  text-align: center;
  line-height: 1em;
}
.section.programm .event {
  width: 100%;
  text-align: center;
  margin-top: var(--h1-lh);
  position: relative;
}
.section.programm .event h1 {
  padding: 0 var(--blu);
  max-width: var(--h1-max);
  left: 50%;
  position: relative;
  transform: translateX(-50%);
}
.section.programm .event img {
  --side: calc(var(--blu) * 25);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: var(--side);
  height: var(--side);
  object-fit: contain;
  pointer-events: none;
  z-index: -100;
}
.section.programm .event:not(:hover) img {
  display: none;
}
.section.programm .archive {
  padding: var(--h1-lh) calc(var(--blu) * 4) calc(var(--blu) * 4) calc(var(--blu) * 4);
  text-align: center;
}
.section.programm .archive span:not(:last-child)::after {
  content: " •";
  display: inline-block;
  margin-left: calc(var(--blu) * 0.2);
}

/* –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
/* Info */
/* –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
.section.info {
  background: #fef454;
}
.section.info .h1 {
  text-align: center;
  padding: var(--h1-lh) var(--blu);
  max-width: var(--h1-max);
  left: 50%;
  position: relative;
  transform: translateX(-50%);
}

/* –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
/* Events */
/* –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
.section.events {
  background: #178db3;
  height: calc(var(--vh) * 100);
  display: grid;
  grid-template-rows: max-content auto;
}
.section.events .header {
  width: 100%;
  text-align: center;
  padding: var(--blu);
}
.section.events .header.center {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
.section.events .info {
  width: 100%;
  text-align: center;
  justify-content: center;
  display: flex;
  flex-direction: column;
}

/* –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
/* Gallery */
/* –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
.section.gallery {
  height: calc(var(--vh) * 100);
  z-index: 400;
}
.section.gallery .image_container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  overflow: scroll;
  cursor: pointer;
}
.section.gallery .image_container img {
  height: 100%;
  display: block;
  float: left;
}

/* –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
/* Contact */
/* –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
.section.contact {
  height: calc(var(--vh) * 100);
  background: #f00039;
}
.section.contact .title {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  text-align: center;
  padding: var(--blu);
}
.section.contact .info {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  transform: translate(-50%, -50%);
  max-width: calc(var(--p-lh) * 10);
  text-align: center;
}
.section.contact .footer {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  text-align: center;
  padding: var(--blu);
}

@media all and (max-width: 35em) {
  /* –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
  /* 1 / Mobile / XS / */
  /* –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
  :root {
    --media: XS_Mobile;
    --blu: 8px;
    --p-lh: calc(var(--blu) * 2);
  }
}
@media all and (min-width: 35em) {
  /* –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
  /* 2 / Tablet / S / */
  /* –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
  :root {
    --media: S_Tablet;
    --blu: 12px;
  }
  .section.header .info br {
    display: none;
  }
}
@media all and (min-width: 55em) {
  /* –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
  /* 3 / Laptop and Tablet / M / */
  /* –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
  :root {
    --media: M_Tablet_Laptop;
    --blu: 16px;
  }
}
@media all and (min-width: 75em) {
  /* –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
  /* 4 / Laptop / L / */
  /* –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
  :root {
    --media: L_Laptop_Desktop;
    --blu: 20px;
  }
}
@media all and (min-width: 120em) {
  /* –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
  /* 5 / Desktop / XL / */
  /* –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
  :root {
    --media: XL_Desktop;
    --blu: 24px;
  }
}
.touchevents {
  /* –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
  /* 0 / Touchscreen / T / */
  /* –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
}
.touchevents :root {
  --media: T_Touchscreen;
}

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