﻿* {
  -ms-hyphens: auto;
  -webkit-hyphens: auto;
  hyphens: auto;
}
body {
  margin: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  hyphens: auto;
}

code {
  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
    monospace;
}

video {
  width: 100%;
}

img {
  max-width:100%;
}
/**
 * @license
 * MyFonts Webfont Build ID 3615517, 2018-07-27T02:45:46-0400
 * 
 * The fonts listed in this notice are subject to the End User License
 * Agreement(s) entered into by the website owner. All other parties are 
 * explicitly restricted from using the Licensed Webfonts(s).
 * 
 * You may obtain a valid license at the URLs below.
 * 
 * Webfont: AvenirNextLTPro-Bold by Linotype
 * URL: https://www.myfonts.com/fonts/linotype/avenir-next-pro/pro-bold/
 * Copyright: Copyright &#x00A9; 2004 - 2017 Monotype GmbH. All rights reserved.
 * 
 * Webfont: AvenirNextLTPro-BoldIt by Linotype
 * URL: https://www.myfonts.com/fonts/linotype/avenir-next-pro/pro-bold-italic/
 * Copyright: Copyright &#x00A9; 2004 - 2017 Monotype GmbH. All rights reserved.
 * 
 * Webfont: AvenirNextLTPro-Demi by Linotype
 * URL: https://www.myfonts.com/fonts/linotype/avenir-next-pro/pro-demi/
 * Copyright: Copyright &#x00A9; 2004 - 2017 Monotype GmbH. All rights reserved.
 * 
 * Webfont: AvenirNextLTPro-DemiIt by Linotype
 * URL: https://www.myfonts.com/fonts/linotype/avenir-next-pro/pro-demi-italic/
 * Copyright: Copyright &#x00A9; 2004 - 2017 Monotype GmbH. All rights reserved.
 * 
 * Webfont: AvenirNextLTPro-HeavyIt by Linotype
 * URL: https://www.myfonts.com/fonts/linotype/avenir-next-pro/pro-heavy-italic/
 * Copyright: Copyright &#x00A9; 2004 - 2017 Monotype GmbH. All rights reserved.
 * 
 * Webfont: AvenirNextLTPro-Heavy by Linotype
 * URL: https://www.myfonts.com/fonts/linotype/avenir-next-pro/pro-heavy/
 * Copyright: Copyright &#x00A9; 2004 - 2017 Monotype GmbH. All rights reserved.
 * 
 * Webfont: AvenirNextLTPro-It by Linotype
 * URL: https://www.myfonts.com/fonts/linotype/avenir-next-pro/pro-italic/
 * Copyright: Copyright &#x00A9; 2004 - 2017 Monotype GmbH. All rights reserved.
 * 
 * Webfont: AvenirNextLTPro-LightIt by Linotype
 * URL: https://www.myfonts.com/fonts/linotype/avenir-next-pro/pro-light-italic/
 * Copyright: Copyright &#x00A9; 2012 - 2017 Monotype GmbH. All rights reserved.
 * 
 * Webfont: AvenirNextLTPro-Light by Linotype
 * URL: https://www.myfonts.com/fonts/linotype/avenir-next-pro/pro-light/
 * Copyright: Copyright &#x00A9; 2012 - 2017 Monotype GmbH. All rights reserved.
 * 
 * Webfont: AvenirNextLTPro-MediumIt by Linotype
 * URL: https://www.myfonts.com/fonts/linotype/avenir-next-pro/pro-medium-italic/
 * Copyright: Copyright &#x00A9; 2004 - 2017 Monotype GmbH. All rights reserved.
 * 
 * Webfont: AvenirNextLTPro-Regular by Linotype
 * URL: https://www.myfonts.com/fonts/linotype/avenir-next-pro/pro-regular/
 * Copyright: Copyright &#x00A9; 2004 - 2017 Monotype GmbH. All rights reserved.
 * 
 * Webfont: AvenirNextLTPro-Medium by Linotype
 * URL: https://www.myfonts.com/fonts/linotype/avenir-next-pro/pro-medium/
 * Copyright: Copyright &#x00A9; 2004 - 2017 Monotype GmbH. All rights reserved.
 * 
 * Webfont: AvenirNextLTPro-ThinIt by Linotype
 * URL: https://www.myfonts.com/fonts/linotype/avenir-next-pro/pro-thin-italic/
 * Copyright: Copyright &#x00A9; 2012 - 2017 Monotype GmbH. All rights reserved.
 * 
 * Webfont: AvenirNextLTPro-Thin by Linotype
 * URL: https://www.myfonts.com/fonts/linotype/avenir-next-pro/pro-thin/
 * Copyright: Copyright &#x00A9; 2012 - 2017 Monotype GmbH. All rights reserved.
 * 
 * Webfont: AvenirNextLTPro-UltLtIt by Linotype
 * URL: https://www.myfonts.com/fonts/linotype/avenir-next-pro/pro-ultralight-italic/
 * Copyright: Copyright &#x00A9; 2004 - 2017 Monotype GmbH. All rights reserved.
 * 
 * Webfont: AvenirNextLTPro-UltLt by Linotype
 * URL: https://www.myfonts.com/fonts/linotype/avenir-next-pro/pro-ultralight/
 * Copyright: Copyright &#x00A9; 2004 - 2017 Monotype GmbH. All rights reserved.
 * 
 * 
 * License: https://www.myfonts.com/viewlicense?type=web&buildid=3615517
 * Licensed pageviews: 500,000
 * 
 * Â© 2018 MyFonts Inc
*/

@font-face {
  font-family: "AvenirNextLTPro-Bold";
  src: url("../webfonts/372B1D_0_0.eot");
  src: url("../webfonts/372B1D_0_0.eot?#iefix") format("embedded-opentype"),
    url("../webfonts/372B1D_0_0.woff2") format("woff2"),
    url("../webfonts/372B1D_0_0.woff") format("woff"),
    url("../webfonts/372B1D_0_0.ttf") format("truetype");
}

/* in use */
@font-face {
  font-family: "AvenirNextLTPro-Regular";
  src: url("../webfonts/372B1D_A_0.eot");
  src: url("../webfonts/372B1D_A_0.eot?#iefix") format("embedded-opentype"),
    url("../webfonts/372B1D_A_0.woff2") format("woff2"),
    url("../webfonts/372B1D_A_0.woff") format("woff"),
    url("../webfonts/372B1D_A_0.ttf") format("truetype");
}

body {
  background-color: #eeeae5;
  font-family: AvenirNextLTPro-Regular, "Gill Sans", "Gill Sans MT",
    "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
  font-weight: normal;
}
h1,
h2,
h3 {
  font-family: AvenirNextLTPro-Bold, "Gill Sans", "Gill Sans MT", "Myriad Pro",
    "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
  font-weight: normal;
  letter-spacing: -0.025em;
  line-height: 1;
}

section h2 {
  font-size: clamp(1.5em, calc(.03 * var(--container-width)), 2.25em);
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  margin: clamp(1em, calc(.015 * var(--container-width)), 2em) -1.5em clamp(0.75em, calc(.01 * var(--container-width)), 1.25em);
  padding: 0.5em 1.5em;
}
.cards h2 {
  margin: 0 0 0.25em;
  padding: 0;
  border: none;
  font-size: 1.75em;
}
/*h3 {
  margin: 0 0.25em;
}*/
h4 {
  margin: 0;
}
h2 {
  margin-bottom: 0.5em;
}
p, main li {
  line-height: clamp(1.35em, calc(1.2em + (.0135 * var(--container-width))), 1.8em);
}
.lead {
  /*font-size: 1.15em;*/
  padding-bottom: 0;
  /*line-height: 1.4;*/
}
h2 + p {
  margin-top: 0;
}
b {
  font-family: AvenirNextLTPro-Bold, "Gill Sans", "Gill Sans MT", "Myriad Pro",
    "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
  font-weight: normal;
  letter-spacing: -0.025em;
}
a {
  color: inherit;
  text-decoration: underline;
  cursor: pointer;
}
p a:not(.button) {
  color: var(--blue-color);
}

body {
  hyphens: auto;
}
h1 {
  font-size: clamp(1.5em, calc(1em + (.035 * var(--container-width))), 3.5em);
}
h2 {
  font-size: clamp(1.3em, calc(1em + (.0225 * var(--container-width))), 2.25em);
}
h3 {
  font-size: clamp(1.15em, calc(1em + (.01 * var(--container-width))), 2em);
}
p,
h4,
h5,
h6,
main li {
  font-size: clamp(14px, calc(13px + (.008 * var(--container-width))), 1.25em);
}
h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0.5em 0 0.5em;
  letter-spacing: calc(-1 * clamp(0.001em, calc(.1em - 2px), .06em));
}
p + h1,
p + h2,
p + h3,
p + h4 {
  margin-top: 1.5em;
}
p {
  margin: 0 0 1.75em;
  letter-spacing: 0.01em;
}
h1,
h2,
h3,
h4,
h5,
h6,
p {
  max-width: 80ch;
}

figure {
  margin: 0;
}
.button {
  display: inline-block;
}
/*input,
label,
button,
.subnav a,
.button,
select,
textarea {
  padding: 0.6em 0.95em 0.45em;
  border-radius: var(--border-radius);
  border: none;
  font-size: 1em;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
  line-height: 1.1;
}

input[type="text"],
select {
    max-width: 25em;
}*/

body,
html {
  background-color: var(--background-color) !important;
  min-height: 100vh;
  max-width: 100vw;
}

body {
  background: var(--background-color);
}
/* * {
  transition: all 0.2s;
}*/
main {
  --safe-padding-left: calc(2rem + env(safe-area-inset-left));
  --safe-padding-right: calc(2rem + env(safe-area-inset-right));
  --safe-padding-top: calc(1.5rem + env(safe-area-inset-top));
  --safe-padding-bottom: calc(1rem + env(safe-area-inset-bottom));
  padding-top: var(--safe-padding-top);
  padding-right: var(--safe-padding-right);
  padding-bottom: calc(7em + var(--safe-padding-bottom));
  padding-left: var(--safe-padding-left);
  margin: 0 auto;
  position: absolute;
  width: calc(100% - var(--safe-padding-left) - var(--safe-padding-right));
  transition: none;
  max-width: 100vw;
  overflow-x: hidden;
}

main > * {
  max-width: var(--max-width);
  margin: 0 auto;
}
main > header,
main > section,
main > footer {
  margin: 0 auto;
  position: relative;
  z-index: 1;
  /*padding-right: var(--safe-padding-right);
  padding-left: var(--safe-padding-left);*/
}
main > section {
  padding-bottom: 2vmin;
  margin-bottom: 2vmin;
  padding-top: 2vmin;
  margin-top: 2vmin;
}
section.borders {
  padding-bottom: 5vw;
  padding-top: 4vw;
  margin: -1px auto 5vw;
  border-bottom: 1px solid var(--background-off-color);
  border-top: 1px solid var(--background-off-color);
}

.fade-background {
  position: relative;
  left: 50%;
  width: 110vw;
  max-width: none;
  margin: 0 0 -30%;
  z-index: -2;
  padding: 0;
  border-radius: 0;
  transform: translateX(-50%);
  display: flex;
  place-items: center;
  /*filter: blur(2px);*/
  max-height: 60vh;
}
.fade-background img {
  animation: panzoom 20s cubic-bezier(0.1, 0, 0.9, 1);
  filter: saturate(1) brightness(0.9) contrast(0.6);
}
@keyframes panzoom {
  from {
    transform: scale(1.5);
  }
}

.fade-background::after {
  content: " ";
  display: block;
  position: absolute;
  /*background: linear-gradient(
    to bottom,
    transparent -30%,
    rgba(238, 234, 229, 0.8) 50%,
    var(--background-color) 100%
  );*/
  background: linear-gradient(
    to bottom,
    transparent -10%,
    hsla(var(--background-hue), var(--background-sat), var(--background-brightness), 0.5) 40%,
    hsla(var(--background-hue), var(--background-sat), var(--background-brightness), 0.8) 60%,
    var(--background-color) 100%
  );
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
}
.fade-background + .breadcrumb {
  color: var(--text-color);
}

main > h1,
main > header > h1 {
  font-size: clamp(2em, calc(.05 * var(--container-width)), 3em);
  margin-top: 0;
}
a i,
a:not(.iconbutton),
a:not(.iconbutton),
/*button:focus,*/
input[type="button"],
input[type="submit"] {
  transition: transform 0.25s ease-in-out;
}

a:focus i,
a:not(.iconbutton):focus,
a:not(.iconbutton):hover,
/*button:focus,*/
input[type="button"]:focus,
input[type="submit"]:focus {
  outline: none;
  transform: scale(1.05);
}
.button + .button {
  margin-left: 0.5em;
}

article .content,
.post-content {
  font-size: clamp(1em, calc(.0275 * var(--container-width)), 1.3em);
}
article .content p,
.post-content p {
  line-height: 1.8;
}

ul li.active {
  color: red;
}

/* Page Header BG */

main > header {
  border-radius: 0 0 var(--border-radius) var(--border-radius);
}
main > header.negative {
  padding-bottom: 0.001rem; /* weird but gives the margin needed, with zero it doesnt work... */
  background-size: 50000%;
  background-position: 15% 15%;
  color: white;
  min-height: calc(1em + 8vw);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
/*main > header.negative > * {
  mix-blend-mode: difference;
}*/
main > header.negative .breadcrumb {
  font-family: var(--font-bold);
  letter-spacing: 0;
}
main > header.negative,
main > header.bg-image {
  background-color: var(--color);
  color: var(--color-contrast);
  padding-top: var(--safe-padding-top);
  margin-top: calc(-1 * var(--safe-padding-top));
}
main > header.color {
  background-color: var(--color);
  color: white;
}
main > header.color.text-bright-True {
  color: var(--text-color);
}

main > header figure,
main > header figure img {
  border-radius: 0 0 var(--border-radius) var(--border-radius);
}

main > header > figure {
  max-width: 100%;
  max-height: 50vh;
  overflow: hidden;
  margin-bottom: 2rem;
}
main > header > figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}
main > header > figure:first-child {
  margin-top: calc(-1 * var(--safe-padding-top) - 0.5em);
}

header.bg-image {
  min-height: 50vh;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
}

iframe {
  width: 100%;
}

header.bg-image iframe {
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 0 0 2em 2em;
  height: 100%;
  max-height: 50vh;
}

header.negative nav,
header.negative h1,
header.bg-image nav,
header.bg-image h1,
header.negative .breadcrumb,
header.bg-image .breadcrumb {
  color: inherit;
}
header figure.header-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  z-index: -1;
}
header figure.header-bg::after {
  content: " ";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
  background: linear-gradient(to bottom, var(--text-color) 0%, transparent 50%);
}

header figure.header-bg img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  object-position: center;
}

body * {
  animation: fadeIn 0.5s;
}
@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

/*@media (min-width: 50em) {
  main > header {
    margin-bottom: 5vh;
  }
}*/

.enter-transition * {
  animation: enter-transition 0.25s ease-in-out 1;
  -webkit-animation-fill-mode: backwards;
  -moz-animation-fill-mode: backwards;
  -ms-animation-fill-mode: backwards;
  -o-animation-fill-mode: backwards;
  animation-fill-mode: backwards;
}
.enter-transition > header {
  animation: none;
}
.leave-transition * {
  animation: leave-transition 0.25s ease-in-out 1;
  -webkit-animation-fill-mode: forwards;
  -moz-animation-fill-mode: forwards;
  -ms-animation-fill-mode: forwards;
  -o-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}
.enter-transition :nth-child(1),
.leave-transition :nth-child(1) {
  animation-delay: 0s;
}
.enter-transition :nth-child(2),
.leave-transition :nth-child(2) {
  animation-delay: 0.1s;
}
.enter-transition :nth-child(3),
.leave-transition :nth-child(3) {
  animation-delay: 0.2s;
}
.enter-transition :nth-child(4),
.leave-transition :nth-child(4) {
  animation-delay: 0.28s;
}
.enter-transition :nth-child(5),
.leave-transition :nth-child(5) {
  animation-delay: 0.34s;
}
.enter-transition :nth-child(6),
.leave-transition :nth-child(6) {
  animation-delay: 0.4s;
}
.enter-transition :nth-child(7),
.leave-transition :nth-child(7) {
  animation-delay: 0.44s;
}
.enter-transition :nth-child(8),
.leave-transition :nth-child(8) {
  animation-delay: 0.46s;
}
.enter-transition :nth-child(9),
.leave-transition :nth-child(9) {
  animation-delay: 0.48s;
}
.enter-transition :nth-child(10),
.leave-transition :nth-child(10) {
  animation-delay: 0.49s;
}
.enter-transition *,
.leave-transition * {
  animation-delay: 0.5s;
}

@keyframes enter-transition {
  from {
    transform: translateX(10vmin);
    opacity: 0;
  }
}

@keyframes leave-transition {
  to {
    transform: translateX(-10vmin);
    opacity: 0;
  }
}

/* Breadcrumb: */
/*.breadcrumb {
  font-size: 0.7em;
  letter-spacing: 0.05em;
}*/
.breadcrumb ul {
  list-style: none;
  padding: 0;
  line-height: 1;
  margin: 0 0 0.25em;
}
.breadcrumb ul li {
  display: inline-block;
  margin-right: 0.5em;
}
.breadcrumb ul li:after {
  content: ">";
  margin-left: 0.5em;
}
.breadcrumb a {
  color: inherit;
  text-decoration: none;
}
.breadcrumb + h1 {
  margin-top: 0.2em;
}

/* Event Info Streifen */

dl {
  width: 100%;
  display: flex;
  overflow-x: scroll;
  margin: 1.5rem auto;
}

dt,
dd {
  margin: 0;
  /*min-width: 6em;
  margin-right: -6em;*/
}
dt {

  display: inline-block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
dt,
.breadcrumb,
.hint {
  color: var(--text-faded-color);
  font-size: 0.8em;
}
dd {
  /*flex-shrink: 0;
  max-height: 1.2em;
  margin: 1.25em calc(0.5em + 2vw) 2em 0;*/
}
.dlgroup {
  margin-right: clamp(.25em, 1.5vw, 1.5em);
  min-width: min(25vw, 8em);
  max-width:8em;
}

/* Tabs: */

.tabs {
  display: flex;
  /*  list-style: none;
  padding: 0;*/
}
.tabs label {
  background: none;
  color: var(--text-color);
  width: auto !important;
  height: auto !important;
  position: static;
  margin: 0;
  white-space: nowrap;
  padding: 0.5em 1em !important;
}
.tabs label::before {
  content: unset !important;
}
.tabs input[type="radio"]:checked + label {
  background: var(--text-color) !important;
  color: var(--background-color) !important;
}
.tab-content {
  display: none;
}
.tab-content.active {
  display: block;
}
input[name="tabs"] {
  display: none;
}


.fullwidth {
  max-width: none;
  width: auto;
  padding-left: max(
    calc((100% - var(--max-width)) / 2),
    var(--safe-padding-left)
  );
  padding-right: max(
    calc((100% - var(--max-width)) / 2),
    var(--safe-padding-right)
  );
}
@media (max-width: 700px) {
  .fullwidth {
    margin-left: calc(-1 * var(--safe-padding-left));
    margin-right: calc(-1 * var(--safe-padding-right));
  }
}
.edge-to-edge {
  max-width: none;
  width: auto;
  margin-left: calc(-1 * var(--safe-padding-left));
  margin-right: calc(-1 * var(--safe-padding-right));
  padding-left: max(
    calc((100vw - var(--max-width)) / 2),
    var(--safe-padding-left)
  );
  padding-right: max(
    calc((100vw - var(--max-width)) / 2),
    var(--safe-padding-right)
  );
}
.breakout-fullwidth {
  max-width: none;
  margin-left: calc(-1 * (((100vw - 100%) / 2) - var(--safe-padding-left)));
  margin-right: calc(-1 * (((100vw - 100%) / 2) - var(--safe-padding-right)));
}
.breakout-edge-to-edge {
  max-width: none;
  width: auto;
  margin-left: calc(-1 * ((100vw - 100%) / 2));
  margin-right: calc(-1 * ((100vw - 100%) / 2));
  padding-left: max(
    calc((100vw - var(--max-width)) / 2),
    var(--safe-padding-left)
  );
  padding-right: max(
    calc((100vw - var(--max-width)) / 2),
    var(--safe-padding-right)
  );
}
.edge-to-edge.content-fullwidth,
.breakout-edge-to-edge.content-fullwidth {
  padding-left: var(--safe-padding-left);
  padding-right: var(--safe-padding-right);
}

figure {
  margin: 0 auto;
  overflow: hidden;
}
figure img {
  border-radius: var(--border-radius);
  max-width: 100%;
}

.columns {
  display: flex;
  flex-wrap: wrap;
  gap: 1em;
}
.columns > * {
  flex: 1 1 20em;
}

.archive-link {
  display: grid;
  place-items: center;
}
.archive-link a {
  background-color: var(--text-faded-color);
  width: 5em;
  height: 5em;
  border-radius: 50%;
  padding: 0 !important;
  line-height: 5;
}
.archive-link a:hover {
  background-color: var(--background-off-color);
}

table {
  width: 100%;
}



body.gvc-ios-app .hide-in-ios-app {
  display:none;
}
body:not(.gvc-ios-app) .show-only-in-ios-app {
  display:none;
}