@charset "UTF-8";
@font-face {
  font-family: "Woodman";
  font-style: normal;
  font-weight: 400;
  src: local(""), url("/fonts/Woodman-Regular.woff2") format("woff2");
}
@font-face {
  font-family: "Woodman";
  font-style: normal;
  font-weight: 700;
  src: local(""), url("/fonts/Woodman-Heavy.woff2") format("woff2");
}
@property --_w {
  syntax: "<length>";
  inherits: true;
  initial-value: 100vw;
}
@property --_h {
  syntax: "<length>";
  inherits: true;
  initial-value: 100vh;
}
:root {
  view-transition-name: none;
  --w: tan(atan2(var(--_w),1px));
  --h: tan(atan2(var(--_h),1px));
  --mx: 90em;
  --fill: 1em;
  --fillv: 1.5em;
  --mrgn: 1.4em;
  --grfxw: var(--fill);
  --gap: 1em;
  --gap_l: 2em;
  --fs: clamp(0.875rem, 0.8182rem + 0.2841vw, 100%);
  --fs_m: clamp(1.125rem, 1.0179rem + 0.5357vw, 1.5rem);
  --fs_l: clamp(1.5rem, 1.2143rem + 1.4286vw, 2.5rem);
  --lh: 1.4;
  --beige: #FEF4E8;
  --green: #00A8B7;
  --brown: #3B0000;
}

@media screen {
  html {
    height: 100%;
    box-sizing: border-box;
    -ms-text-size-adjust: 100%;
    -moz-text-size-adjust: none;
    -webkit-text-size-adjust: none;
    text-size-adjust: none;
    line-height: 1.15;
    scroll-behavior: smooth;
  }
  *, *::before, *::after {
    box-sizing: inherit;
  }
  ::view-transition {
    pointer-events: none;
  }
  body {
    max-width: var(--mx);
    min-height: 100%;
    margin: 0 auto;
    padding: 0;
    color: var(--brown);
    font-family: "Woodman", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
    font-size: var(--fs);
    line-height: 1.4;
    background-color: var(--beige);
  }
  h1, h2, h3, h4, h5, h6 {
    overflow-wrap: break-word;
    text-wrap: balance;
  }
  h1 {
    max-width: 32ch;
    margin: 1em 0 0 0;
    font-size: var(--fs_l);
    text-transform: uppercase;
    line-height: 1;
    hyphens: auto;
  }
  h1 span {
    color: var(--green);
  }
  h2 {
    margin: 1.5em 0 0.5em;
    font-size: var(--fs_m);
    text-transform: uppercase;
    line-height: 1.125;
  }
  h1 + h2 {
    margin-top: 1em;
  }
  h2 em {
    font-style: normal;
    color: var(--green);
  }
  h3, h4, h5, h6 {
    margin: 1em 0 0;
    font-size: 100%;
  }
  h3 {
    color: var(--green);
    font-size: 112.5%;
    text-transform: uppercase;
    line-height: 1.125;
  }
  h3 + * {
    margin-top: 0;
  }
  h4 {
    color: var(--green);
  }
  h4 + *, h5 + * {
    margin-top: 0;
  }
  p {
    overflow-wrap: break-word;
    text-wrap: pretty;
  }
  a {
    color: inherit;
    background-color: transparent;
  }
  b, strong {
    font-weight: bolder;
  }
  img {
    max-width: 100%;
    height: auto;
    border: 0;
    -ms-interpolation-mode: bicubic;
  }
  img:not([alt]) {
    filter: grayscale(100%);
  }
  svg {
    max-width: 100%;
    height: auto;
  }
  svg:not(:root) {
    overflow: hidden;
  }
  video, picture, canvas, iframe, object {
    display: block;
    max-width: 100%;
    height: auto;
  }
  figure {
    margin-left: auto;
    margin-right: auto;
  }
  figure img {
    vertical-align: top;
  }
  hr {
    height: 0;
    margin: var(--fillv) auto;
    color: inherit;
    border: none;
    border-top: 1px solid;
    border-bottom: 1px solid;
  }
  hr + * {
    margin-top: 0;
  }
  blockquote {
    margin-inline: 0;
  }
  blockquote em {
    font-style: normal;
    font-weight: bold;
  }
  *:focus:not(:focus-visible) {
    outline: none;
  }
  *:focus-visible {
    outline: 2px solid var(--beige);
    box-shadow: 0 0 0 1px var(--);
    outline-offset: 2px;
  }
  input, button, textarea, select {
    font: inherit;
  }
  button,
  ::file-selector-button {
    inline-size: fit-content;
    touch-action: manipulation;
    user-select: none;
  }
  button, input, optgroup, select, textarea {
    font: inherit;
    line-height: 1.15;
    margin: 0;
  }
  textarea {
    resize: vertical;
  }
  button, input {
    overflow: visible;
  }
  button, select {
    text-transform: none;
  }
  button, [type=button], [type=reset], [type=submit] {
    -webkit-appearance: button;
  }
  button::-moz-focus-inner, [type=button]::-moz-focus-inner, [type=reset]::-moz-focus-inner, [type=submit]::-moz-focus-inner {
    border-style: none;
    padding: 0;
  }
  button:-moz-focusring, [type=button]:-moz-focusring, [type=reset]:-moz-focusring, [type=submit]:-moz-focusring {
    outline: 1px dotted ButtonText;
  }
  fieldset {
    padding: 0;
    margin: 0;
    border: none;
  }
  button, summary {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  }
  [hidden] {
    display: none;
  }
  .visually_hidden, .vh {
    position: absolute;
    clip: rect(0 0 0 0);
    overflow: hidden;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
  }
  .container > *:first-child, footer > *:first-child, .columns > * > *:first-child, main > *:first-child {
    margin-block-start: 0;
  }
  .container > *:last-child, footer > *:last-child, .columns > * > *:last-child, main > *:last-child {
    margin-block-end: 0;
  }
  /* BODY */
  body {
    position: relative;
  }
  body > * {
    padding-inline: var(--fill);
  }
  .grfx {
    opacity: 0;
    position: absolute;
    z-index: -1;
    top: 6em;
    bottom: 0;
    width: var(--grfxw);
    padding-inline: 0;
    background-repeat: repeat-y;
    background-position: center top;
    background-size: 60% auto;
  }
  .grfx.lft {
    left: 0;
    background-image: url("/assets/bg_l.jpg");
  }
  .grfx.rght {
    right: 0;
    background-image: url("/assets/bg_r.jpg");
  }
  /* HEADER */
  header {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    padding-block: 0.5em;
    line-height: 1;
    color: var(--beige);
    background-color: var(--green);
    border-image: conic-gradient(var(--green) 0 0) fill 0//0 100vw;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  header img {
    vertical-align: bottom;
  }
  #logo {
    display: block;
    width: 20em;
    max-width: 62%;
    margin: 0;
    font-size: 100%;
  }
  #navicon {
    --nbar: .25em;
    --ndist: .4em;
    display: none;
    cursor: pointer;
    height: calc(1.4em + 9px);
    margin: 0 0 0 auto;
    padding: 0;
    width: 2em;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    font: inherit;
    background: transparent;
    border: 0;
  }
  #navicon span, #navicon span:before, #navicon span:after {
    height: var(--nbar);
    width: 2em;
    background: var(--beige);
    border-radius: 999em;
    transition-timing-function: ease-in-out;
  }
  #navicon span {
    position: relative;
    display: inline-block;
    transition-duration: 0.1s, 0.1s;
    transition-delay: 0, 0;
    transition-property: background, width;
  }
  #navicon span:before, #navicon span:after {
    content: "";
    position: absolute;
    left: 0;
    transition-duration: 0.1s, 0.1s, 0.2s, 0.1s;
    transition-delay: 0.1s, 0, 0, 0;
  }
  #navicon span:before {
    top: calc((var(--ndist) + var(--nbar)) * -1);
    transition-property: top, transform, background, width;
  }
  #navicon span:after {
    bottom: calc((var(--ndist) + var(--nbar)) * -1);
    transition-property: bottom, transform, background, width;
  }
  #navicon[aria-expanded=true] span {
    background-color: transparent;
  }
  #navicon[aria-expanded=true] span:before, #navicon[aria-expanded=true] span:after {
    transition-delay: 0, 0.1s;
  }
  #navicon[aria-expanded=true] span:before {
    top: 0;
    transform: rotate(45deg);
  }
  #navicon[aria-expanded=true] span:after {
    bottom: 0;
    transform: rotate(-45deg);
  }
  /* NAV */
  nav ul {
    margin: 0;
    padding: 0;
  }
  nav li {
    list-style-type: none;
  }
  nav li::before {
    content: "​"; /* add zero-width space */
    position: absolute;
  }
  nav a {
    display: block;
    text-decoration: none;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    line-height: 1;
    white-space: nowrap;
    transition: color 0.2s;
  }
  nav a:hover {
    color: var(--brown);
  }
  nav [aria-current] {
    color: var(--brown);
  }
  #menu {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 1em;
  }
  #menu > li:last-child {
    flex-shrink: 0;
  }
  #menu svg {
    display: inline-block;
    width: 2em;
    height: 2em;
  }
  .js header {
    position: sticky;
    top: 0;
  }
  .js #navicon {
    display: flex;
  }
  .js #menu {
    position: absolute;
    z-index: 10;
    display: block;
    top: 100%;
    left: -80%;
    width: 100%;
    margin: 0;
    padding: 1em 0;
    background: var(--green);
    box-shadow: 0 3px 4px rgba(0, 0, 0, 0.3);
    opacity: 1;
    transform: translate(-100%, 0);
    transition: transform 0.25s 0s, opacity 0.25s 0.25s, left 0s 0.25s;
  }
  .js #menu a {
    display: block;
    text-align: right;
    padding: 0.5em var(--fill);
    text-decoration: none;
  }
  .js #menu > li:last-child {
    margin-top: var(--mrgn);
  }
  .js #navicon[aria-expanded=true] + #menu {
    z-index: 10;
    opacity: 1;
    transform: translate(0%, 0);
    transition: transform 0.25s 0s, opacity 0.25s 0s, left 0s 0s;
    left: 0;
  }
  /* MAIN */
  main {
    padding-block: var(--fillv);
  }
  #keyvisual {
    margin-bottom: var(--fillv);
  }
  #keyvisual img {
    display: block;
  }
  .intro h1:before {
    content: "Quantenschaum präsentiert";
    display: block;
    margin-block-end: 0.5em;
    font-size: 62%;
  }
  .intro img {
    display: block;
    margin-top: 3em;
    width: 75%;
  }
  .timetable h4 {
    margin-block: 0;
  }
  .timetable p {
    margin-block: 0;
  }
  .columns {
    margin-block: var(--mrgn);
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap_l);
  }
  .columns > * {
    flex-grow: 1;
  }
  .columns aside {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--gap);
  }
  .strip {
    --icnt: 3;
    --igap: var(--gap);
    display: flex;
    justify-content: space-between;
    margin-block: var(--fillv);
    padding: 0;
    list-style: none;
  }
  .strip > * {
    width: calc((100% - var(--igap) * (var(--icnt) - 1)) / var(--icnt));
  }
  .strip img {
    display: block;
  }
  #history article {
    margin-block: var(--fillv);
  }
  #history article + article {
    padding-block-start: var(--fillv);
    border-top: 2px solid;
  }
  #history h2 {
    margin-top: 0;
  }
  #history h2 span {
    display: block;
    color: var(--green);
  }
  #program {
    margin-block: var(--fillv);
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--gap);
  }
  #program figure {
    margin: 0 0 1em;
  }
  #program h3 {
    margin: 0;
    color: var(--brown);
  }
  #program h3 + * {
    margin-top: 0.5em;
  }
  #program a {
    color: var(--green);
    font-weight: bold;
  }
  /* FOOTER */
  footer {
    position: sticky;
    top: 100vh;
    padding-block: calc(var(--mrgn) * 2);
    color: var(--beige);
    text-align: center;
    background-color: var(--brown);
    border-image: conic-gradient(var(--brown) 0 0) fill 0//0 100vw;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  footer a {
    text-decoration: none;
  }
  .logos {
    margin: var(--mrgn) 0;
    padding: 0;
    list-style: none;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 1em 2em;
  }
  .logos img {
    width: auto;
    height: calc(var(--mrgn) * 1.5);
  }
}
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
@media (prefers-reduced-motion: reduce) and (prefers-reduced-motion: no-preference) {
  html {
    interpolate-size: allow-keywords;
  }
}
@media only screen and (min-width: 24em) {
  :root {
    --mq: "24";
    --ndist: .5em;
  }
}
@media only screen and (min-width: 35em) {
  :root {
    --mq: "35";
  }
}
@media only screen and (min-width: 40em) {
  :root {
    --mq: "40";
    --fillv: 2em;
    --gap: 1.5em;
  }
  .columns {
    display: flex;
    flex-wrap: nowrap;
  }
  .columns > *:first-child {
    flex: 0 0 56%;
  }
  .columns > *:last-child {
    flex: 0 0 calc(44% - var(--gap_l));
  }
  .columns aside {
    display: block;
  }
  .columns aside img {
    margin-block-end: var(--mrgn);
  }
  #program {
    grid-template-columns: 1fr 1fr;
  }
}
@media only screen and (min-width: 46em) {
  :root {
    --mq: "46";
    --fill: 10vw;
  }
  header {
    padding-inline: 2vw;
  }
  .grfx {
    opacity: 1;
  }
}
@media only screen and (min-width: 56em) {
  :root {
    --mq: "56";
  }
  .js header {
    position: relative;
    flex-wrap: nowrap;
  }
  .js #navicon {
    display: none;
  }
  .js #menu {
    position: relative;
    top: initial;
    left: initial;
    width: initial;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 1em;
    box-shadow: none;
    transform: translate(0, 0);
  }
  .js #menu a {
    display: block;
    text-align: left;
    padding: 0;
  }
  .js #menu > li:last-child {
    margin-top: 0;
  }
  .js #navicon[aria-expanded=true] + #menu {
    z-index: 10;
    opacity: 1;
    transform: translate(0%, 0);
    transition: transform 0.25s 0s, opacity 0.25s 0s, left 0s 0s;
  }
}
@media only screen and (min-width: 64em) {
  :root {
    --mq: "64";
    --fill: 9em;
  }
}
@media only screen and (min-width: 68em) {
  :root {
    --mq: "68";
    --fill: 10em;
  }
}
@media only screen and (min-width: 80em) {
  :root {
    --mq: "> 80";
    --fill: 12em;
    --fillv: var(--gap);
    --gap: 2em;
    --gap_l: 6em;
  }
  header {
    padding-block: 0.75em;
    padding-inline: var(--fill);
  }
  .js #menu {
    gap: 1.5em;
  }
  .logos {
    margin: calc(var(--mrgn) * 2) 0;
  }
  .logos img {
    height: calc(var(--mrgn) * 2);
  }
}
@media print {
  * {
    color: #000 !important;
    text-shadow: none !important;
    background-color: transparent !important;
  }
  body {
    margin: 1cm;
    font: 12pt/1.2 "Helvetica Neue", sans-serif;
  }
  h1 {
    font-size: 125%;
  }
  h2 {
    font-size: 112.5%;
  }
  h3, h4, h5, h6 {
    font-size: 100%;
    margin: 0;
  }
  h2, h3 {
    page-break-after: avoid;
  }
  p, h2, h3 {
    orphans: 3;
    widows: 3;
  }
  ul, ol {
    page-break-inside: avoid;
  }
  li {
    margin: 0 0 0 1em;
    padding: 0;
  }
  a, a:visited {
    text-decoration: underline;
  }
  img {
    max-width: 100% !important;
    height: auto;
    page-break-inside: avoid;
  }
  pre, blockquote {
    padding: 1em;
    border: 1px solid #999;
    page-break-inside: avoid;
  }
  hr {
    margin: 2em 0;
    border: 0;
    border-bottom: 1px solid #000;
  }
  table {
    page-break-inside: auto;
  }
  tr {
    page-break-inside: avoid;
    page-break-after: auto;
  }
  thead {
    display: table-header-group;
  }
  tfoot {
    display: table-footer-group;
  }
  /*
  #divs {
  display : none;
  }
  */
}
.dev body:before {
  content: var(--mq);
  position: fixed;
  z-index: 1000;
  bottom: 10px;
  left: 10px;
  padding: 0.5em 2em;
  color: #fff;
  background: rgba(0, 0, 0, 0.7);
  -webkit-font-smoothing: antialiased;
}
.dev body:after {
  content: counter(w) "x" counter(h);
  counter-reset: h var(--h) w var(--w);
  position: fixed;
  z-index: 1000;
  bottom: 10px;
  right: 10px;
  padding: 0.5em 2em;
  font-size: 75%;
  color: #fff;
  background: rgba(0, 0, 0, 0.7);
  -webkit-font-smoothing: antialiased;
}