@import url("https://fonts.googleapis.com/css2?family=Syne:wght@400;700;800&display=swap");
html {
  box-sizing: border-box; }

*, *:before, *:after {
  box-sizing: inherit; }

body {
  padding: 0;
  margin: 0;
  font-size: 17px; }

img:not(.logo) {
  background: var(--secondary-900); }

.column-layout {
  --h-spacing: 0.5em; }
  @media (min-width: 720px) {
    .column-layout {
      --h-spacing: 2.5em; } }
  .column-layout main > p {
    text-align: center;
    margin-left: 4em;
    margin-right: 4em;
    line-height: 1.5em; }
  .column-layout h1 {
    margin-block-start: 2em; }

.content-block {
  max-width: 960px;
  margin: 0 auto; }
  .content-block.middle {
    width: 720px;
    max-width: calc(100vw - 2 * var(--h-spacing) - 15px);
    text-align: center; }
  .content-block:not(:first-child) {
    margin-block-start: 4rem; }
  .content-block .logo {
    max-height: 320px;
    max-width: 100%; }

@media (hover: none) {
  .display-hoverable {
    display: none; } }

@media (hover: hover) {
  .display-non-hoverable {
    display: none; } }

body {
  font-family: Syne, Open-Sans, sans-serif;
  color: var(--neutral-200);
  --cursor-pointer: url("/images/list-kurzor.png") 10 0; }

:is(body, a) {
  cursor: var(--cursor-pointer), auto; }

nav.brand {
  font-family: Syne, sans-serif; }

h1 {
  font-family: Syne, sans-serif;
  font-weight: 800;
  font-size: 1.7rem; }
  h1 + .subtitle {
    font-size: 1.7em;
    margin-block-start: -0.75em; }

h2 {
  font-family: Syne, sans-serif;
  font-weight: 800;
  font-size: 1.4rem; }
  h2 + .subtitle {
    font-size: 1em;
    margin-block-start: -1.15em;
    margin-block-end: 0.5em; }

p {
  line-height: 1.5; }

.subtitle {
  font-size: 1.5em; }

.editions h2:not(:first-child) {
  margin-block-start: 2.5em; }
  @media (min-width: 720px) {
    .editions h2:not(:first-child) {
      margin-block-start: 4em; } }

body {
  --primary-0: black;
  --primary-100: #061713;
  --primary-200: #0c2e26;
  --primary-300: #114638;
  --primary-400: #175d4b;
  --primary: #1d745e;
  --primary-600: #4a907e;
  --primary-700: #77ac9e;
  --primary-800: #a5c7bf;
  --primary-900: #d2e3df;
  --primary-1000: white;
  --secondary-0: black;
  --secondary-100: #321d1d;
  --secondary-200: #643a3a;
  --secondary-300: #955758;
  --secondary-400: #c77475;
  --secondary: #f99192;
  --secondary-600: #faa7a8;
  --secondary-700: #fbbdbe;
  --secondary-800: #fdd3d3;
  --secondary-900: #fee9e9;
  --secondary-1000: white;
  --neutral-0: black;
  --neutral-100: #1b1b1b;
  --neutral-200: #363636;
  --neutral-300: #525252;
  --neutral-400: #6d6d6d;
  --neutral: #888;
  --neutral-600: #a0a0a0;
  --neutral-700: #b8b8b8;
  --neutral-800: #cfcfcf;
  --neutral-900: #e7e7e7;
  --neutral-1000: white; }

.navbar {
  --burger-btn-size: 2.5em;
  position: sticky;
  top: 0;
  z-index: 50;
  padding: 1.5em var(--h-spacing) 0.5em;
  margin-bottom: 1em;
  min-height: 2em;
  display: grid;
  grid-template-columns: auto 1fr var(--burger-btn-size);
  gap: 0.5em;
  place-items: center;
  background: var(--neutral-1000);
  box-shadow: 0 0 0.5em 0.5em var(--neutral-1000); }
  @media (max-width: 719px) {
    .navbar {
      grid-template-rows: auto 1fr; } }
  @media (min-width: 720px) {
    .navbar {
      grid-template-columns: 1fr auto 1fr; } }
  @media (max-height: 400px), (max-width: 719px) {
    .navbar {
      padding-top: 0.5em;
      gap: 0.25em 0.5em; } }
  .navbar .nav-group {
    place-self: center stretch;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    gap: 0.5em; }
    @media (max-width: 719px) {
      .navbar .nav-group {
        display: none; } }
  .navbar nav.link {
    position: relative;
    font-weight: bold; }
    .navbar nav.link:after, .navbar nav.link:before {
      position: absolute;
      top: calc(50% - 3px);
      display: block;
      content: '';
      width: 6px;
      height: 6px;
      opacity: 0;
      transition: all 0.3s ease; }
    .navbar nav.link:before {
      left: 0;
      border-left: 3px solid var(--neutral-0);
      border-top-left-radius: 3px;
      border-bottom-left-radius: 3px; }
    .navbar nav.link:after {
      right: 0;
      border-right: 3px solid var(--neutral-0);
      border-top-right-radius: 3px;
      border-bottom-right-radius: 3px; }
    .navbar nav.link:hover:before {
      opacity: 1;
      left: -6px; }
    .navbar nav.link:hover:after {
      opacity: 1;
      right: -6px; }
  .navbar nav a {
    text-decoration: none;
    color: var(--neutral-0); }
  .navbar nav.active a {
    color: var(--primary);
    text-decoration: underline; }
  .navbar .brand {
    height: 100%;
    font-weight: 800;
    font-size: 2em; }
    .navbar .brand img {
      max-height: 100%; }
    @media (max-width: 719px) {
      .navbar .brand {
        grid-row: 1;
        grid-column: 2;
        font-size: 1.5em; } }

[id] {
  scroll-margin-block-start: 96px; }

@media (min-width: 720px) {
  .hamburger {
    display: none; } }

.sidenav {
  z-index: 100;
  position: fixed;
  top: calc(35vh - 10em);
  right: var(--h-spacing);
  font-size: 0.8rem;
  writing-mode: tb;
  display: flex;
  gap: 0.25em; }
  .sidenav nav {
    transition: all 0.3s;
    transition-delay: calc(var(--order, 0) * 60ms); }
  .sidenav .link {
    --bg-color: var(--neutral-1000);
    --fg-color: var(--neutral-0);
    display: grid;
    place-content: center;
    border: 1px solid var(--fg-color);
    border-radius: 1em;
    background: var(--bg-color); }
    .sidenav .link a {
      display: block;
      padding: 1.25em 0.5em;
      color: var(--fg-color);
      text-decoration: none;
      font-weight: bold;
      transition: inherit; }
    .sidenav .link.active {
      --bg-color: var(--neutral-0);
      --fg-color: var(--neutral-1000); }
  .sidenav .brand img {
    width: 2.8em; }

body:not(.sidenav-visible) .sidenav {
  pointer-events: none; }
  body:not(.sidenav-visible) .sidenav nav {
    opacity: 0; }

footer {
  padding: 2em var(--h-spacing);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2em; }
  footer .brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5em;
    color: var(--primary);
    font-weight: bold; }
    footer .brand a {
      color: inherit; }
    @media (max-width: 719px) {
      footer .brand {
        font-size: 0.8em; } }
  footer .logo {
    background: unset;
    height: 4em;
    width: auto; }
  footer .copyrigt {
    font-size: 0.75em;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5em 1.5em;
    font-weight: bold; }
    footer .copyrigt .party {
      text-align: center; }
      footer .copyrigt .party a {
        color: inherit;
        text-decoration: none; }
        footer .copyrigt .party a:hover {
          color: var(--primary);
          text-decoration: underline; }
    footer .copyrigt .separator {
      display: none;
      margin: 0 0.5em; }

.btn {
  --col-primary: var(--neutral-0);
  --col-complementary: var(--neutral-1000);
  display: inline-grid;
  place-items: center;
  padding: 0.125em 1.25em;
  border-radius: 2em;
  border: 1px solid var(--col-primary);
  text-decoration: none;
  line-height: inherit;
  font: inherit;
  color: var(--col-primary);
  background: var(--col-complementary);
  transition: background .25s ease, color .25s ease, border .25s ease; }
  .btn.primary {
    --col-primary: #1d745e; }
  .btn:not(.disabled):not(.disabled) {
    cursor: var(--cursor-pointer); }
  .btn.inv-hig:hover {
    color: var(--col-complementary);
    background: var(--col-primary); }

.btn-inverse {
  --col-primary: var(--neutral-1000);
  --col-complementary: var(--neutral-0); }

.hamburger .menu-toggle {
  width: var(--burger-btn-size);
  height: var(--burger-btn-size);
  padding: 0.325em;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  background: var(--neutral-1000);
  border: none; }
  .hamburger .menu-toggle i {
    background: var(--neutral);
    block-size: 2px;
    inline-size: 100%;
    transition: all 0.25s ease; }

.hamburger .menu {
  position: absolute;
  top: 2.6em;
  left: 1em;
  inline-size: 200px;
  background: var(--neutral-1000);
  box-shadow: 1px 1px 4px 2px var(--neutral-700);
  padding: 0.5em 1em;
  transition: opacity 0.25s ease; }
  .hamburger .menu nav a {
    display: block;
    padding: 0.25em 0;
    text-decoration: none;
    font-weight: bold;
    color: var(--neutral-0); }
    .hamburger .menu nav a:hover {
      color: var(--primary); }

.hamburger:focus-within .menu-toggle i {
  background: var(--primary); }
  .hamburger:focus-within .menu-toggle i:first-child {
    transform: translateY(0.5em) rotate(0.125turn);
    transform-origin: 50% 50%; }
  .hamburger:focus-within .menu-toggle i:nth-child(2) {
    opacity: 0; }
  .hamburger:focus-within .menu-toggle i:last-child {
    transform: translateY(-0.5em) rotate(-0.125turn);
    transform-origin: 50% 50%; }

.hamburger:not(:focus-within) .menu {
  opacity: 0;
  pointer-events: none; }

.image-gallery {
  block-size: 70vw;
  max-block-size: 55vh;
  display: grid;
  place-content: stretch; }
  @media (max-height: 400px) {
    .image-gallery {
      max-block-size: 80vh; } }
  .image-gallery > * {
    grid-column: 1;
    grid-row: 1; }
  .image-gallery .items {
    flex: 1;
    display: flex;
    gap: 1em;
    overflow-x: scroll;
    -ms-overflow-style: none;
    /* Internet Explorer 10+ */
    scrollbar-width: none;
    /* Firefox */
    overscroll-behavior-x: contain;
    scroll-snap-type: inline mandatory; }
    .image-gallery .items::-webkit-scrollbar {
      display: none;
      /* Safari and Chrome */ }
  .image-gallery .item {
    flex: 1 0 100%;
    scroll-snap-align: start;
    background: var(--img);
    background-position: center;
    background-size: cover; }
  .image-gallery .positioner {
    z-index: 1;
    place-self: end center;
    margin: 0.25em;
    display: flex;
    gap: 0.1em; }
    .image-gallery .positioner .peg {
      padding: 0.25em;
      --color: var(--neutral-1000); }
      .image-gallery .positioner .peg.active {
        --color: var(--secondary); }
      .image-gallery .positioner .peg .body {
        width: 0.8em;
        height: 0.8em;
        border-radius: 50%;
        background: var(--color);
        transition: background 0.1s; }
      .image-gallery .positioner .peg:not(.active) .body {
        border: 1px solid var(--secondary-700); }

.text-primary {
  color: #1d745e; }

.text-secondary {
  color: #f99192; }

.detail-prompt.active {
  display: none; }

.detail-prompt:not(.active) ~ .detail-content {
  display: none; }

.timeline {
  display: grid;
  grid-template-rows: 1fr auto;
  place-items: center; }
  .timeline .legend {
    display: flex;
    gap: 0.25em 1.5em;
    justify-content: center; }
    @media (max-width: 719px) {
      .timeline .legend {
        flex-direction: column; } }
    .timeline .legend .item {
      display: flex;
      align-items: center; }
      .timeline .legend .item:before {
        display: block;
        content: '';
        margin-right: 0.75em;
        width: 2.5em;
        height: 0.3em;
        border-radius: 0.5em;
        background: var(--color); }
  .timeline .timeline-help-text {
    margin: 0; }
  .timeline .graph {
    margin-top: 2em;
    position: relative;
    place-self: stretch;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1em;
    overflow: hidden; }
    .timeline .graph > .year {
      font-size: 2em;
      font-weight: bold; }
    .timeline .graph .image-content {
      --axis-stretch: -1rem;
      display: grid;
      inline-size: 65%; }
      .timeline .graph .image-content > * {
        grid-column: 1;
        grid-row: 1; }
      .timeline .graph .image-content > img {
        background-color: unset;
        width: 100%;
        height: auto; }
      .timeline .graph .image-content .axis {
        place-self: stretch center;
        margin-block-start: var(--axis-stretch);
        margin-block-end: var(--axis-stretch);
        border-left: 4px dashed var(--neutral-300);
        border-right: 7px solid transparent; }
        @media (max-width: 719px) {
          .timeline .graph .image-content .axis {
            border-left-width: 2px;
            border-right-width: 4px; } }
  .timeline .image-roll-container {
    position: absolute;
    align-self: center;
    top: 24.5%;
    z-index: -1;
    width: 100%;
    display: grid;
    place-items: stretch; }
    .timeline .image-roll-container > * {
      grid-row: 1;
      grid-column: 1; }
    .timeline .image-roll-container.fade::before, .timeline .image-roll-container.fade::after {
      grid-row: 1;
      grid-column: 1;
      z-index: 1;
      pointer-events: none;
      place-self: start;
      display: block;
      content: '';
      height: 100%;
      width: 10%;
      background: linear-gradient(var(--gradient-angle, 90deg), white 20%, rgba(255, 255, 255, 0) 100%); }
    .timeline .image-roll-container.fade::after {
      --gradient-angle: 270deg;
      place-self: end; }
  .timeline .image-roll {
    --size: clamp(3em, 20vw, 5.5em);
    height: var(--size);
    overflow: hidden; }
    .timeline .image-roll .stack {
      display: inline-grid;
      height: 100%; }
      .timeline .image-roll .stack:not(:first-child) {
        margin-inline-start: calc(-0.25 * var(--size)); }
    .timeline .image-roll .image {
      grid-row: 1;
      grid-column: 1;
      background: none; }
      .timeline .image-roll .image:first-child {
        height: var(--size);
        width: auto; }
      .timeline .image-roll .image:last-child {
        height: calc(var(--size) * 0.4);
        width: auto;
        place-self: end start; }
  .timeline .markers {
    --default-img-size: 4rem;
    position: relative; }
  .timeline .marker {
    --line-width: 4em;
    --line-c: 1;
    --total-offset: calc(50% + var(--offset));
    --total-line-width: max(calc(var(--line-width) * var(--line-c)), 1em);
    --label-offset: calc(var(--total-line-width) + 0.25em);
    position: absolute;
    top: var(--top); }
    @media (max-width: 719px) {
      .timeline .marker {
        --line-c: 0.25; }
        .timeline .marker[style*="--line-width-sm"] {
          --line-width: var(--line-width-sm) !important;
          --line-c: 1; } }
    .timeline .marker[data-placement="right"] {
      left: var(--total-offset); }
      .timeline .marker[data-placement="right"] .header .label {
        left: var(--label-offset); }
    .timeline .marker[data-placement="left"], .timeline .marker .header.label {
      right: var(--total-offset); }
      .timeline .marker[data-placement="left"] .header .label, .timeline .marker .header.label .header .label {
        right: var(--label-offset); }
    .timeline .marker[data-placement="right"] .header:before, .timeline .marker[data-placement="left"] .header:after {
      display: block;
      content: '';
      width: var(--total-line-width);
      border-bottom: 2px dotted var(--secondary);
      z-index: 1; }
    .timeline .marker .header {
      display: flex;
      align-items: center;
      gap: 0.5em; }
    .timeline .marker .label {
      position: absolute;
      font-weight: bold;
      padding: 0.25em 0.125em;
      white-space: nowrap;
      background: rgba(255, 255, 255, 0.85);
      box-shadow: rgba(255, 255, 255, 0.85) 0 0 2px 2px;
      border-radius: 0.25em;
      transition: color 0.25s; }
      .timeline .marker .label:hover, .timeline .marker .label:focus-within {
        color: var(--primary); }
      .timeline .marker .label .image {
        position: absolute; }
    @media (max-width: 719px) {
      .timeline .marker:not(.replace-label) .images {
        display: none; } }
    .timeline .marker .content {
      display: none; }
  @media (min-width: 720px) {
    .timeline .marker-pictures .header {
      color: var(--primary);
      pointer-events: none; } }

:is(.history-tooltip-content, .timeline .marker) .image {
  background: unset;
  height: var(--size, var(--default-img-size));
  width: auto; }
  @media (min-width: 720px) {
    :is(.history-tooltip-content, .timeline .marker) .image[style*="--size-md"] {
      height: var(--size-md); } }

.history-tooltip-content {
  --default-img-size: 8rem;
  padding: 0.75em; }
  .history-tooltip-content .caption {
    color: var(--primary);
    font-weight: bold; }
  .history-tooltip-content .images {
    margin: 1em 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.25em; }
  .history-tooltip-content > *:last-child {
    margin-bottom: 0; }
  .history-tooltip-content > *:first-child {
    margin-top: 0; }
  @media (min-width: 720px) {
    .history-tooltip-content.images-blown-out .images {
      display: none; } }
  .history-tooltip-content.wide-tooltip {
    min-width: 80vw; }

.tippy-box[data-theme~='koprivald'] {
  background-color: var(--neutral-1000);
  color: var(--neutral-0);
  border: 1px solid var(--primary);
  border-radius: 1em; }
  .tippy-box[data-theme~='koprivald'][data-placement^='top'] > .tippy-arrow::before {
    bottom: -8px;
    border-top-color: var(--primary); }
  .tippy-box[data-theme~='koprivald'][data-placement^='bottom'] > .tippy-arrow::before {
    top: -8px;
    border-bottom-color: var(--primary); }
  .tippy-box[data-theme~='koprivald'][data-placement^='left'] > .tippy-arrow::before {
    border-left-color: var(--primary); }
  .tippy-box[data-theme~='koprivald'][data-placement^='right'] > .tippy-arrow::before {
    border-right-color: var(--primary); }

.project-authors {
  display: flex;
  flex-wrap: wrap;
  gap: 1em 0; }
  .project-authors .author {
    flex: 1 1 300px;
    display: grid;
    grid-template-rows: 1fr auto;
    gap: 2em; }
    .project-authors .author .name {
      font-family: Syne, sans-serif;
      font-weight: 800;
      font-size: 1.6rem; }
    .project-authors .author .role {
      color: var(--primary); }
    .project-authors .author .bio {
      padding: 0 var(--h-spacing);
      font-size: 1.2rem;
      line-height: 1.5;
      text-align: center; }
    .project-authors .author .contact-links {
      margin-top: 1em;
      display: flex;
      flex-direction: column;
      gap: 0.5em; }
      .project-authors .author .contact-links a {
        color: var(--neutral-0);
        font-size: 0.9em; }
    .project-authors .author .picture {
      width: 100%;
      padding-bottom: 100%;
      background: var(--pic);
      background-size: contain;
      background-repeat: no-repeat; }

.project-block {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto 1fr;
  grid-auto-flow: dense;
  gap: 0.5em;
  background-color: var(--secondary-900);
  text-align: left; }
  .project-block h2 {
    font-size: 2.2rem;
    margin: 0.5em 0; }
  .project-block .preview {
    background: var(--img-preview);
    background-position: center top;
    background-size: cover;
    background-repeat: no-repeat; }
  .project-block :is(.header, .intro) {
    text-align: center; }
    @media (min-width: 720px) {
      .project-block :is(.header, .intro) {
        padding: 0 var(--h-spacing); } }
  @media (max-width: 719px) {
    .project-block > * {
      grid-column: 1; }
    .project-block > .preview {
      grid-row: 1 / span 2;
      width: 100%;
      height: auto;
      filter: contrast(0.4) brightness(1.4);
      z-index: 1; }
    .project-block > .header {
      grid-row: 1;
      z-index: 2;
      padding: 2em 2em 0; }
    .project-block > .intro {
      grid-row: 2;
      z-index: 2;
      padding: 0 2em 2em; } }
  @media (min-width: 720px) {
    .project-block {
      grid-template-columns: 33% 1fr; }
      .project-block > .header {
        margin-top: 4px;
        grid-column: 2;
        grid-row: 1; }
      .project-block > .preview {
        grid-row: span 2;
        background-position: center; } }

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