:root {
  --color-bg:      #f9f9f9;

  --color-about:   var(--color-bg);
  --color-detail:  var(--color-bg);
  --color-text:    #1d1d1d;

  --ton-schwach:   color-mix(in srgb, var(--color-text) 10%, transparent);

  --gross-grund:   rgba(18, 18, 20, 0.9);
  --gross-text:    #f4f1ec;
  --bar-h:         var(--letter-d);

  --pad:           0.75rem;

  --ui-size:       clamp(0.8125rem, 0.72rem + 0.38vw, 0.9375rem);

  --body-size:     1.0625rem;
  --caption-size:  var(--body-size);
  --caption-lh:    1.35;

  --caption-line:  calc(var(--caption-size) * var(--caption-lh));
  --caption-gap:   8px;

  --list-gap:      2.5rem;

  --caption-space: calc(0.6rem + 4 * var(--caption-line));

  --bild-max-h:    35dvh;
  --letter-d:      1.875rem;
  --ui-lh:         1.35;

  --ui-tracking:   0.025em;
  --ui-pad-v:      0.55rem;

  --header-h:      calc(var(--ui-size) * var(--ui-lh) + 2 * var(--ui-pad-v));

  --footer-h-base: calc(1 * var(--ui-size) * var(--ui-lh) + 2 * var(--ui-pad-v));
  --footer-h:      max(var(--footer-h-base), var(--footer-h-content, 0px));

  --intro-push-basis: max(
    50dvh,
    calc(var(--logo-w) * var(--logo-ar-h) / var(--logo-ar-w) + 3.25rem)
  );

  --intro-push:    max(var(--intro-push-basis), var(--intro-push-gemessen, 0px));

  --logo-w:        calc(100vw - 2 * var(--pad));

  --logo-ar-w:     284.447266;
  --logo-ar-h:      81.827148;

  --ease-soft:     cubic-bezier(0.62, 0.02, 0.20, 1);
  --ease-fade:     cubic-bezier(0.38, 0.02, 0.28, 1);

  --grid-w:  calc(100vw - 2 * var(--pad));
  --col:     calc(var(--grid-w) / 9);

  --gc1: var(--col);
  --gc2: calc(var(--col) * 2);
  --gc3: calc(var(--grid-w) / 3);
  --gc4: calc(var(--grid-w) / 2);
  --gc5: calc(var(--grid-w) * 2 / 3);
  --gc6: var(--grid-w);

  --g0: var(--pad);
  --g1: calc(var(--pad) + var(--gc1));
  --g2: calc(var(--pad) + var(--gc2));
  --g3: calc(var(--pad) + var(--gc3));
  --g4: calc(var(--pad) + var(--gc4));
  --g5: calc(var(--pad) + var(--gc5));
  --g6: calc(var(--pad) + var(--gc6));

  --grid-inset: 0.8rem;

  --hit-d:      2.75rem;

  --mitte-y: calc((var(--header-h) + 100dvh - var(--footer-h)) / 2);
}

body.dark {
  --color-bg:      #16161a;

  --color-about:   var(--color-bg);
  --color-detail:  var(--color-bg);
  --color-text:    #f4f1ec;
  --ton-schwach:   color-mix(in srgb, var(--color-text) 16%, transparent);
}

@font-face {
  font-family: 'KleischLL';
  src: url('fonts/KleischLLWeb-Regular.woff2') format('woff2'),
       url('fonts/KleischLLWeb-Regular.woff') format('woff');
  font-display: swap;
}
@font-face {
  font-family: 'RobotoFlex';
  src: url('fonts/RobotoFlex-latin-var.woff2') format('woff2'),
       url('fonts/RobotoFlex-VariableFont_GRAD,XOPQ,XTRA,YOPQ,YTAS,YTDE,YTFI,YTLC,YTUC,opsz,slnt,wdth,wght.ttf') format('truetype');
  font-weight: 100 1000;
  font-stretch: 25% 151%;
  font-display: swap;
}

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  cursor: none !important;
}
html {
  font-size: 100%;

  overscroll-behavior-y: none;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body {
  font-family: 'RobotoFlex', Arial, sans-serif;
  font-size: 1rem;
  line-height: 1.4;
  font-variation-settings: 'wdth' 80, 'wght' 400;
  letter-spacing: var(--ui-tracking);

  font-kerning: normal;
  font-variant-ligatures: common-ligatures contextual;
  font-optical-sizing: auto;
  background: var(--color-bg);
  color: var(--color-text);
  overflow: hidden;
  height: 100dvh;
  user-select: text;
}

body.dark {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

::selection {
  background: var(--color-text);
  color: var(--color-bg);
}
::-moz-selection {
  background: var(--color-text);
  color: var(--color-bg);
}

button,
.footer-top,
.project-item {
  user-select: none;
}

button {
  font-family: inherit;
  font-variation-settings: inherit;
  letter-spacing: inherit;
  color: inherit;
}
::-webkit-scrollbar {
  display: none;
}

.intro-hero {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  min-height: var(--intro-push);
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  z-index: 80;
  transition: opacity 0.85s var(--ease-fade);
}
.intro-hero.is-visible {
  opacity: 1;
}
.intro-hero-inner {
  overflow: hidden;
  min-height: 0;

  padding: var(--pad) var(--pad) 0;
}
.intro-logo {
  display: block;
  width: var(--logo-w);
  max-width: 100%;
  height: auto;

  aspect-ratio: var(--logo-ar-w) / var(--logo-ar-h);
}

.intro-logo--dunkel {
  display: none;
}
body.dark .intro-logo--hell {
  display: none;
}
body.dark .intro-logo--dunkel {
  display: block;
}

.intro-slogan {
  margin-top: 1.75rem;
  font-size: var(--ui-size);
  line-height: var(--ui-lh);
}

.intro-slogan[hidden] {
  display: none;
}

body.intro-done .intro-hero {
  visibility: hidden;
  transition:
    opacity 0.85s var(--ease-fade),
    visibility 0s linear 0.85s;
}
body.hero-offen .intro-hero {
  visibility: visible;
  opacity: 1;
  transition:
    opacity 0.85s var(--ease-fade),
    visibility 0s linear 0s;
}

body.hero-offen .site-header,
body.hero-offen .site-footer {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s var(--ease-fade);
}

body.hero-offen .project-info {
  opacity: 0 !important;
  transition: opacity 0.5s var(--ease-fade);
}

body.hero-schliesst .project-info {
  transition: opacity 0.5s var(--ease-fade) 0.5s;
}

body.hero-schliesst .bar-axis-line::before,
body.hero-schliesst .bar-axis-line::after {
  transition: height 0.55s var(--ease-soft);
}

body.hero-offen .project-item.is-active .project-img {
  filter: grayscale(100%);
  opacity: 0.3;
}

body.hero-offen .bar--filter {
  transform: translateY(var(--intro-push));
}

body.hero-offen .projects-list {
  pointer-events: none;
}

body.hero-offen .projects-main {
  overflow: hidden;
  scroll-snap-type: none;
  touch-action: none;
}

body.hero-nachlauf .projects-main {
  overflow: hidden;
  scroll-snap-type: none;
  touch-action: none;
}

.site-header {
  position: sticky;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--ui-pad-v) var(--pad);
  background: var(--color-bg);
  z-index: 100;
  font-size: var(--ui-size);
  line-height: var(--ui-lh);
}
.site-header::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: var(--pad);
  right: var(--pad);
  height: 1px;
  background: var(--color-text);

  transform-origin: left center;
  transition: transform 0.95s var(--ease-soft);
}
.site-header {
  transition:
    transform 1.15s var(--ease-soft),
    opacity 0.5s var(--ease-fade);
}

.site-footer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--footer-h);
  overflow: hidden;

  background: transparent;
  background-color: transparent;

  z-index: 100;

  transition:
    height 0.7s var(--ease-soft),
    transform 0.7s var(--ease-soft),
    background-color 0.5s ease,
    opacity 0.5s var(--ease-fade);
}

.site-footer.is-open {
  height: calc(100dvh - var(--header-h));

  background: var(--color-about);
}
.site-footer.is-open::before {
  opacity: 0;
  transition: opacity 0.4s ease;
}

.site-footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: var(--pad);
  right: var(--pad);
  height: 1px;
  background: var(--color-text);
  transform-origin: left center;
  transition: transform 0.95s var(--ease-soft);
}

.footer-top {
  position: relative;

  display: flex;
  justify-content: space-between;
  align-items: flex-start;

  padding: var(--ui-pad-v) var(--pad);

  padding-right: calc(2 * var(--pad) + var(--letter-d));

  font-size: var(--ui-size);
  line-height: var(--ui-lh);

  z-index: 2;
}

@media (hover: hover) {
  .footer-top {
    transition:
      background-color 0.25s ease,
      color 0.25s ease;
  }

  .footer-top:hover,
  .site-footer.is-open .footer-top:hover {
    background: var(--color-text);
    color: var(--color-bg);
  }
}

.footer-label {
  transition: opacity 0.3s var(--ease-fade);
}
.site-footer.is-open .footer-label {
  opacity: 0;
}

.footer-contact {
  font-style: normal;
  font-family: 'RobotoFlex', sans-serif;
  font-variation-settings: 'wdth' 80, 'wght' 400;
  font-size: var(--ui-size);
  line-height: var(--ui-lh);
  margin-bottom: 2rem;
}

.info-zeile {
  display: block;
}

.footer-contact a {
  color: inherit;
  text-decoration: none;
  pointer-events: none;
}

.footer-btn {
  background: none;
  border: none;

  font-family: 'KleischLL', serif;
  font-size: 0.9375rem;
  line-height: 1;
  letter-spacing: normal;

  color: inherit;

  display: flex;
  align-items: center;
  justify-content: center;
}

.footer-btn-arrow {
  display: inline-block;
  transition: transform 0.4s var(--ease-soft);
}
.site-footer.is-open .footer-btn-arrow {
  transform: rotate(180deg);
}

.footer-about {
  position: absolute;
  inset: var(--footer-h) 0 0 0;

  overflow-y: auto;
  overflow-x: hidden;
  touch-action: pan-y pinch-zoom;
  overscroll-behavior-y: contain;

  padding: 0.75rem var(--pad) 4rem;

  opacity: 0;
  transition: opacity 0.4s ease;
}
.site-footer.is-open .footer-about {
  opacity: 1;
}

.about-text {
  font-family: 'KleischLL', serif;
  letter-spacing: normal;
  font-size: var(--body-size);
  line-height: 1.5;
  padding-top: 1.5rem;
}

.about-img {
  display: block;
  width: 100%;
  height: auto;
}

.about-impressum {
  font-family: 'RobotoFlex', sans-serif;
  font-variation-settings: 'wdth' 80, 'wght' 400;
  font-size: var(--ui-size);
  line-height: var(--ui-lh);
  padding-top: 2rem;
}

.about-caption {
  font-family: 'RobotoFlex', sans-serif;
  font-variation-settings: 'wdth' 80, 'wght' 400;
  font-size: var(--ui-size);
  line-height: var(--ui-lh);
  padding-top: 0.5rem;
}

.projects-main {
  position: fixed;
  inset: 0;
  overflow-y: scroll;
  overflow-x: hidden;
  touch-action: pan-y pinch-zoom;
  overscroll-behavior-y: none;
  scroll-snap-type: y mandatory;

  scroll-padding-top: calc(var(--header-h) + var(--pad) / 2 + var(--bar-h));
  scroll-padding-bottom: calc(var(--footer-h) + var(--pad) / 2 + var(--bar-h));
  scrollbar-width: none;
}
.projects-main::-webkit-scrollbar {
  display: none;
}

.bar {
  position: relative;
  height: var(--bar-h);
  margin: 0 var(--pad);
  z-index: 60;
  overflow: visible;
}
.bar--filter {
  position: sticky;
  top: calc(var(--header-h) + var(--pad) / 2);
  margin-top: calc(var(--pad) / 2);

  transition:
    transform 0.55s var(--ease-soft),
    opacity 0.7s var(--ease-fade);
}
.bar--sort {
  position: sticky;
  bottom: calc(var(--footer-h) + var(--pad) / 2);
  transition: opacity 0.7s var(--ease-fade);
}

.bar-axis {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.bar-axis-line {
  position: absolute;
  top: 0;
  height: 1px;
  background: transparent;

  transition:
    left  0.7s var(--ease-soft),
    right 0.7s var(--ease-soft);
}
.bar-axis-line::before,
.bar-axis-line::after {
  content: '';
  position: absolute;
  top: 0;
  width: 1px;

  height: var(--tick-h, var(--letter-d));
  background: var(--color-text);
  transition: height 0.9s var(--ease-soft);
}
.bar-axis-line::before { content: none; }
.bar-axis-line::after  { right: 0; }

.bar--filter .bar-axis-line::after {
  top: calc(var(--pad) / -2 - 1px);
  height: calc(var(--tick-h, var(--letter-d)) + var(--pad) / 2 + 1px);
}
.bar--sort .bar-axis-line::after {
  height: calc(var(--tick-h, var(--letter-d)) + var(--pad) / 2 + 1px);
}

.bar--sort .bar-axis-line::before {
  content: '';
  top: auto;
  bottom: 0;
  right: 0;
  height: var(--tick-h-up, 0px);
}

body.intro .bar-axis-line::before,
body.intro .bar-axis-line::after {
  transition: height 0.75s var(--ease-soft);
}

.bar-letters {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.bar-letter {
  position: absolute;
  top: 0;
  width: var(--letter-d);
  height: var(--letter-d);
  border-radius: 50%;
  border: none;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'KleischLL', serif;
  letter-spacing: normal;
  font-size: 0.9375rem;
  line-height: 1;
  color: var(--color-text);
  pointer-events: none;
  opacity: 0;
  transform: scale(0.4);
  transition:
    left      0.7s  var(--ease-soft),
    opacity   0.3s  var(--ease-fade),
    transform 0.4s  var(--ease-soft),
    background-color 0.25s ease,
    color     0.25s ease;
}
.bar-letter.is-selected {
  background: var(--color-text);
  color: var(--color-bg);
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
}
.bar.is-open .bar-letter {
  pointer-events: auto;
  opacity: 1;
  transform: scale(1);
}
.bar.is-open .bar-letter:not(.is-selected):hover {
  background: var(--ton-schwach);
}

.bar-dropdown {
  position: absolute;
  left: 0;
  width: fit-content;
  pointer-events: none;
  transition: clip-path 0.34s var(--ease-soft);
  display: grid;
  grid-template-rows: repeat(3, auto);
  grid-auto-flow: column;
  grid-auto-columns: max-content;
  align-items: start;
  column-gap: calc(var(--pad) * 2);
}

.bar-dropdown--down {
  top: 100%;
  padding: 0.7rem 0 0.9rem;
  clip-path: inset(0 0 100% 0);
}
.bar-dropdown--up {
  bottom: 100%;
  padding: 0.9rem 0 0.7rem;
  clip-path: inset(100% 0 0 0);
}
.bar.is-open .bar-dropdown {
  clip-path: inset(0 0 0 0);
  pointer-events: auto;
  transition: clip-path 0.6s var(--ease-soft);
}

.dropdown-item {
  display: block;
  width: auto;
  background: none;
  border: none;
  font-family: 'RobotoFlex', sans-serif;
  font-variation-settings: 'wdth' 80, 'wght' 400;
  font-size: var(--ui-size);
  line-height: var(--ui-lh);
  text-align: left;
  padding: 0.15rem 0;
  color: var(--color-text);
  opacity: 0.3;
  transition: opacity 0.2s ease;
}
.dropdown-item.is-selected { opacity: 1; }
.dropdown-item:hover:not(.is-selected) { opacity: 0.6; }

.bar.no-transition .bar-letter,
.bar.no-transition .bar-axis-line,
.bar.no-transition .bar-dropdown {
  transition: none !important;
}

.projects-list {
  display: flex;
  flex-direction: column;
  gap: var(--list-gap);

  padding-top: calc(50dvh - var(--header-h) - var(--bar-h));
  padding-bottom: calc(50dvh - var(--footer-h) - var(--bar-h));
}

.project-item {
  position: relative;
  display: block;
  padding: 0 var(--pad) var(--caption-space);

  pointer-events: none;
}
.project-item.is-active {
  pointer-events: auto;
}

body.hero-offen .project-item.is-active {
  pointer-events: none;
}

.project-img {
  display: block;
  width: auto;
  height: auto;
  max-height: var(--bild-max-h);
  max-width: 100%;

  object-fit: contain;
  filter: grayscale(100%);
  opacity: 0.3;
  scroll-snap-align: center;
  transition: filter 0.55s var(--ease-fade), opacity 0.55s var(--ease-fade);
}
.project-item.is-active .project-img {
  filter: grayscale(0%);
  opacity: 1;
}

.project-item.intro-pending .project-img,
.project-item.intro-pending .project-info {
  opacity: 0 !important;
}

.project-info {
  position: absolute;
  top: calc(100% - var(--caption-space));
  left: var(--pad);
  right: var(--pad);
  height: calc(var(--caption-space) + var(--list-gap));
  display: flex;
  flex-direction: column;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.55s var(--ease-fade);
}
.project-item.is-active .project-info {
  opacity: 1;
}

body.bar-offen .project-info {
  opacity: 0 !important;
  transition: opacity 0.25s var(--ease-fade);
}
.project-info-zeile1,
.project-info-zeile2 {
  position: relative;
  font-family: 'KleischLL', serif;
  letter-spacing: normal;

  font-size: var(--caption-size);
  line-height: var(--caption-lh);
  transition:
    margin-left  0.5s var(--ease-soft),
    margin-right 0.5s var(--ease-soft);
}

.caption-links {
  text-align: right;
}

.project-info-zeile1 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
}

.project-info-zeile2 {
  margin-top: 0;
}

.project-index {
  position: absolute;
  left: 0;
  font-family: 'RobotoFlex', sans-serif;

  font-variation-settings: 'wdth' 80, 'wght' 400;
  font-size: var(--ui-size);
  line-height: var(--caption-line);
  white-space: nowrap;
}
.project-title {
  font-family: 'KleischLL', serif;
  letter-spacing: normal;
  font-size: var(--caption-size);
  line-height: var(--caption-lh);
}

.about-panel {
  position: fixed;
  top: var(--header-h);
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--color-about);
  z-index: 90;
  transform: translateY(100%);
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  overflow-y: auto;
  padding: 2rem var(--pad);
}
.about-panel.is-open {
  transform: translateY(0);
}

.theme-btn {
  position: fixed;
  z-index: 110;
  right: var(--pad);

  bottom: calc((var(--footer-h) - var(--letter-d)) / 2);

  width: auto;
  height: var(--letter-d);
  padding: 0;
  border: none;
  background: none;
  color: var(--color-text);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'RobotoFlex', sans-serif;
  font-variation-settings: 'wdth' 80, 'wght' 400;
  font-size: var(--ui-size);
  line-height: 1;
  letter-spacing: var(--ui-tracking);
  transition:
    border-color 0.25s ease,
    color 0.25s ease,
    bottom 0.5s var(--ease-soft),
    opacity 0.4s var(--ease-fade);
}

body.footer-open .theme-btn {
  bottom: calc(
    100dvh - var(--header-h) - var(--footer-h) +
      (var(--footer-h) - var(--letter-d)) / 2
  );
}

body.detail-open .theme-btn {
  top: calc(
    var(--header-h) + var(--pad) / 2 + (var(--bar-h) - var(--letter-d)) / 2
  );
  bottom: auto;
}

body.intro .theme-btn,
body.hero-offen .theme-btn {
  opacity: 0;
  pointer-events: none;
}

.theme-btn::after,
.gross-btn::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 0;
  width: var(--hit-d);
  height: var(--hit-d);
  transform: translateY(-50%);
}

.cursor-circle {
  position: fixed;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #fff;
  mix-blend-mode: difference;
  pointer-events: none;
  z-index: 10000;
  transform: translate(-50%, -50%);
  transition: opacity 0.2s;
}

.cursor-pfeil {
  position: fixed;
  z-index: 10000;
  pointer-events: none;
  transform: translate(-50%, -50%);

  font-family: 'KleischLL', serif;
  font-size: 0.9375rem;
  line-height: 1;
  letter-spacing: normal;
  color: #fff;
  mix-blend-mode: difference;
  opacity: 0;
  transition: opacity 0.2s var(--ease-fade);
}
.cursor-pfeil.is-sichtbar {
  opacity: 1;
}

@media (pointer: coarse) {
  .cursor-circle,
  .cursor-pfeil {
    display: none;
  }
}

.detail-panel {
  position: fixed;

  inset: var(--header-h) 0 0 0;

  overflow-x: hidden;
  touch-action: pan-y pinch-zoom;
  z-index: 95;
  background: var(--color-detail);
  display: flex;
  flex-direction: column;
  opacity: 0;
  pointer-events: none;

  visibility: hidden;
  transition:
    opacity 0.4s ease,
    visibility 0s linear 0.4s;
}
.detail-panel.is-open {
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
  transition:
    opacity 0.4s ease,
    visibility 0s linear 0s;
}

body.footer-open .projects-list,
body.footer-open .bar--filter,
body.footer-open .bar--sort {
  opacity: 0.08;
  transition: opacity 0.4s ease;
}
body.footer-open .projects-main {
  pointer-events: none;
}

body.detail-open .projects-list,
body.detail-open .bar--filter,
body.detail-open .bar--sort {
  opacity: 0.08;
  transition: opacity 0.4s ease;
}
body.detail-open .projects-main {
  pointer-events: none;
}

body.detail-open .site-header {
  background: var(--color-detail);
  transition: background-color 0.4s ease;
}
body.detail-open .site-footer {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.detail-top {
  flex-shrink: 0;
}

.detail-head {
  position: relative;
}

.detail-nav {
  padding: calc(var(--pad) / 2) var(--pad) 0;
  display: flex;
  align-items: center;
}

.circle-btn {
  position: relative;
  width: var(--letter-d);
  height: var(--letter-d);
  border-radius: 50%;
  border: none;
  background: var(--color-text);
  color: var(--color-bg);
  flex-shrink: 0;
}
.btn-from-char,
.btn-arrow {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'KleischLL', serif;
  letter-spacing: normal;
  font-size: 0.9375rem;
  line-height: 1;
  transition: opacity 0.35s ease 0.1s;
}
.btn-from-char { opacity: 1; }
.btn-arrow     { opacity: 0; }
.detail-panel.is-open .btn-from-char { opacity: 0; }
.detail-panel.is-open .btn-arrow     { opacity: 1; }

.detail-vline {
  position: absolute;

  top: 0;
  bottom: 0;
  left: var(--g1);
  width: 1px;
  background: var(--color-text);
}

.detail-title {
  font-family: 'KleischLL', serif;
  letter-spacing: normal;
  font-size: var(--body-size);
  font-weight: normal;
  line-height: 1.3;
  padding: var(--pad) var(--pad) 0 calc(var(--g1) + var(--grid-inset));
}

.detail-meta {
  padding: calc(var(--pad) / 4) var(--pad) calc(var(--pad) / 2);
  font-family: 'RobotoFlex', sans-serif;
  font-variation-settings: 'wdth' 80, 'wght' 400;
  font-size: var(--ui-size);
  line-height: var(--ui-lh);
}

.detail-scroll {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  touch-action: pan-y pinch-zoom;
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: var(--pad);
}
.detail-scroll::-webkit-scrollbar { display: none; }

.media-kopf {
  display: flex;
  align-items: baseline;

  padding: var(--pad) var(--pad) 0.5rem;
}

.about-media .media-kopf {
  padding-left: 0;
  padding-right: 0;
}

.gross-btn {
  position: relative;
  background: none;
  border: none;
  padding: 0;
  color: var(--color-text);
  font-family: 'RobotoFlex', sans-serif;
  font-variation-settings: 'wdth' 80, 'wght' 400;
  font-size: var(--ui-size);
  line-height: var(--ui-lh);
  letter-spacing: var(--ui-tracking);
  flex-shrink: 0;

  margin-left: auto;
}

.carousel-nums {
  display: flex;
  gap: 0.6rem;
  align-items: center;
}
.carousel-num {
  background: none;
  border: none;
  font-family: 'RobotoFlex', sans-serif;
  font-variation-settings: 'wdth' 80, 'wght' 400;
  font-size: var(--ui-size);
  line-height: var(--ui-lh);
  color: var(--color-text);
  padding: 0;
  opacity: 0.35;
  transition: opacity 0.2s ease;
}

.carousel-num.is-active {
  opacity: 1;
}

.carousel-stage {
  width: 100%;
  padding: 0 var(--pad);
}

.carousel-img {
  display: block;
  width: 100%;
  height: auto;
  transition: opacity 0.25s ease;
}
.carousel-img.is-fading { opacity: 0; }

.detail-caption-row {
  padding: 0.5rem var(--pad) 0;
  font-family: 'RobotoFlex', sans-serif;
  font-variation-settings: 'wdth' 80, 'wght' 400;
  font-size: var(--ui-size);
  line-height: var(--ui-lh);
}

.detail-caption {
  line-height: var(--ui-lh);
}

.detail-body {
  font-family: 'KleischLL', serif;
  letter-spacing: normal;
  font-size: var(--body-size);
  line-height: 1.5;
  padding: 1.5rem var(--pad) 0 calc(var(--g1) + var(--grid-inset));
}

.text-link {
  color: inherit;
  text-decoration: none;
  opacity: 0.35;
  transition: opacity 0.2s ease;
}
.text-link:hover {
  opacity: 1;
}

.detail-body,
.about-text {
  -webkit-hyphens: auto;
  hyphens: auto;

  -webkit-hyphenate-limit-lines: 3;
  -ms-hyphenate-limit-lines: 3;
  hyphenate-limit-lines: 3;

  hyphenate-limit-chars: 6 3 3;
  -webkit-hyphenate-limit-before: 3;
  -webkit-hyphenate-limit-after: 3;

  overflow-wrap: break-word;
}

.detail-meta,
.footer-contact,
.about-impressum,
.detail-caption,
.about-caption {
  -webkit-hyphens: manual;
  hyphens: manual;
  overflow-wrap: break-word;
}

@media (min-width: 900px) {
  :root {
    --pad: 1rem;
  }
}

@media (min-width: 900px), (min-width: 560px) and (max-height: 560px) {
  :root {
    --body-size:    clamp(1.125rem, 1.37vw, 2.25rem);

    --logo-w:       calc(var(--gc5) - var(--gc1) / 2);
  }

  .bar::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: calc(var(--bar-h) * -1);
    bottom: calc(var(--bar-h) * -1);
  }

  .site-header {
    display: grid;
    grid-template-columns: var(--gc5) 1fr;
  }
  .header-right {
    text-align: left;
  }

  .theme-btn,
  body.footer-open .theme-btn,
  body.detail-open .theme-btn {
    top: calc((var(--header-h) - var(--letter-d)) / 2);
    bottom: auto;
  }

  .footer-top {
    padding-right: var(--pad);
  }

  .project-item {
    padding-left: var(--g5);

    padding-bottom: 0;
  }

  :root {
    --list-gap: var(--pad);
  }

  .project-info {
    position: fixed;
    top: var(--mitte-y);
    transform: translateY(-50%);
    left: var(--pad);
    right: calc(var(--pad) + var(--gc3));
    height: auto;
  }

  .detail-panel,
  .footer-about {
    --spalten: var(--gc4) calc(var(--gc5) - var(--gc4)) var(--gc3);
  }

  .detail-panel {
    display: grid;
    grid-template-columns: var(--spalten);
    grid-template-rows: auto auto 1fr;
    align-content: start;
    padding: 0 var(--pad) 3rem;
    overflow-y: auto;
    scrollbar-width: none;
  }
  .detail-panel::-webkit-scrollbar { display: none; }

  .detail-top,
  .detail-scroll {
    display: contents;
  }

  .detail-head  { grid-area: 1 / 1 / 2 / 2; }
  .detail-meta  { grid-area: 2 / 1 / 3 / 2; }
  .detail-body  { grid-area: 3 / 1 / 4 / 2; }
  .detail-media { grid-area: 2 / 3 / 4 / 4; align-self: start; }

  .detail-meta {
    padding-top: var(--pad);

    max-width: max(var(--gc2), min(22rem, 100%));
  }

  .detail-caption-row,
  .about-caption {
    max-width: max(calc(var(--gc3) / 2), min(20rem, 100%));
  }

  .lightbox .detail-caption-row,
  .lightbox .about-caption {
    max-width: max(var(--gc3), min(40rem, 100%));
  }

  .detail-panel {
    overflow: hidden;
  }
  .detail-body {
    overflow-y: auto;
    overflow-x: hidden;
    touch-action: pan-y pinch-zoom;

    min-height: 0;
    scrollbar-width: none;
    padding-bottom: 2rem;
  }
  .detail-body::-webkit-scrollbar {
    display: none;
  }

  .detail-nav,
  .detail-meta,
  .media-kopf,
  .carousel-stage,
  .detail-caption-row {
    padding-left: 0;
    padding-right: 0;
  }
  .detail-title,
  .detail-body {
    padding-right: 0;
    padding-left: calc(var(--gc1) + var(--grid-inset));
  }
  .detail-vline {
    left: var(--gc1);
  }

  .carousel-img {
    width: auto;
    max-width: 100%;
    max-height: 55dvh;
  }

  .about-img {
    width: auto;
    max-width: 100%;
    max-height: min(38dvh, calc(100dvh - 35rem));
  }

  .footer-about {
    display: grid;
    grid-template-columns: var(--spalten);
    grid-template-rows: auto 1fr;
    align-content: start;
  }
  .about-head  { grid-area: 1 / 1 / 2 / 2; }
  .about-text  { grid-area: 2 / 1 / 3 / 2; }

  .about-media {
    grid-area: 2 / 3 / 3 / 4;
    align-self: start;
    min-height: 0;
  }

  .about-impressum {
    position: absolute;
    right: var(--pad);
    bottom: 4rem;
    width: var(--gc3);
    padding-top: 0;
  }

  .footer-about {
    overflow: hidden;
  }
  .about-text {
    overflow-y: auto;
    overflow-x: hidden;
    touch-action: pan-y pinch-zoom;

    min-height: 0;
    scrollbar-width: none;
    padding-bottom: 2rem;
  }
  .about-text::-webkit-scrollbar {
    display: none;
  }

  .about-text {
    padding-left: calc(var(--gc1) + var(--grid-inset));

    padding-top: 0;
  }

  .footer-top {
    display: grid;
    grid-template-columns: var(--gc5) 1fr;
  }
  .footer-btn {
    justify-self: start;
  }
}

.grid-overlay {
  position: fixed;
  top: 0;
  bottom: 0;
  left: var(--pad);
  right: var(--pad);
  display: grid;
  grid-template-columns:
    var(--col) var(--col) var(--col)
    calc(var(--grid-w) / 6) calc(var(--grid-w) / 6)
    var(--gc3);
  pointer-events: none;
  z-index: 9999;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s var(--ease-fade), visibility 0.2s;
}
.grid-overlay.is-visible {
  opacity: 1;
  visibility: visible;
}
.grid-overlay span {
  border-left: 1px solid rgba(200, 30, 60, 0.35);
  background: rgba(200, 30, 60, 0.04);
}
.grid-overlay span:last-child {
  border-right: 1px solid rgba(200, 30, 60, 0.35);
}

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--gross-grund);
  opacity: 0;
  pointer-events: none;

  visibility: hidden;
  transition:
    opacity 0.35s var(--ease-fade),
    visibility 0s linear 0.35s;
}
.lightbox.is-open {
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
  transition:
    opacity 0.35s var(--ease-fade),
    visibility 0s linear 0s;
}

.lightbox .media-kopf,
.lightbox .detail-caption-row,
.lightbox .about-caption,
.lightbox .carousel-stage,
.lightbox .gross-btn,
.lightbox .carousel-num {
  color: var(--gross-text);
  padding-left: 0;
  padding-right: 0;
}
.lightbox .media-kopf {
  padding-top: 0;
  padding-bottom: 0.5rem;
}

.lightbox .carousel-img,
.lightbox .about-img {
  width: auto;
  height: auto;
  max-width: 82vw;
  max-height: 76dvh;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}
.lightbox .detail-media,
.lightbox .about-media {
  display: block;
  width: 100%;
}

body.intro .header-left,
body.intro .header-right {
  clip-path: inset(0 100% 0 0);
}
body.intro .bar--filter,
body.intro .bar--sort,
body.intro .projects-list,
body.intro .site-footer {
  opacity: 0;
}

body.intro .site-header::after,
body.intro .site-footer::before {
  transform: scaleX(0);
}
body.intro.linien-ausgezogen .site-header::after,
body.intro.linien-ausgezogen .site-footer::before {
  transform: scaleX(1);
}

body.intro .projects-main {
  overflow: hidden;
  scroll-snap-type: none;
  touch-action: none;
}

body.intro .site-header,
body.intro .bar--filter {
  transform: translateY(var(--intro-push));
}

body.intro .bar--filter {
  transition:
    transform 1.15s var(--ease-soft),
    opacity 0.7s var(--ease-fade);
}
body.intro.intro-collapsed .site-header,
body.intro.intro-collapsed .bar--filter {
  transform: translateY(0);
}

body.no-intro-transition .site-header,
body.no-intro-transition .bar--filter {
  transition: none !important;
}

body.intro .bar-letter {
  transition:
    left      0.95s var(--ease-soft),
    opacity   0.55s var(--ease-fade),
    transform 0.7s  var(--ease-soft),
    background-color 0.3s ease,
    color     0.3s ease;
}
body.intro .bar-axis-line {
  transition:
    left  0.95s var(--ease-soft),
    right 0.95s var(--ease-soft);
}
body.intro .bar-dropdown,
body.intro .bar.is-open .bar-dropdown {
  transition: clip-path 0.8s var(--ease-soft);
}
body.intro .projects-list {
  transition: opacity 0.85s var(--ease-fade);
}
body.intro .project-img {
  transition: opacity 0.85s var(--ease-fade);
}
body.intro .project-info {
  transition: opacity 0.7s var(--ease-fade);
}

body.intro .header-left {
  transition: clip-path 0.9s var(--ease-soft);
}
body.intro .header-right {
  transition: clip-path 0.9s var(--ease-soft) 0.18s;
}
body.intro .site-footer {
  transition: opacity 0.8s var(--ease-fade);
}

body.ohne-uebergang .bar-axis-line,
body.ohne-uebergang .bar-axis-line::before,
body.ohne-uebergang .bar-axis-line::after,
body.ohne-uebergang .bar-letter,
body.ohne-uebergang .project-info-zeile1,
body.ohne-uebergang .project-info-zeile2 {
  transition: none;
}

@media (min-width: 900px) and (max-width: 1366px),
       (min-width: 560px) and (max-height: 560px) {
  .detail-meta {
    max-width: 100%;
  }
  .detail-caption-row,
  .about-caption {
    max-width: 100%;
  }

  .detail-media,
  .about-media {
    grid-row: 1 / -1;
  }

  .detail-media .media-kopf,
  .about-media .media-kopf {
    padding-top: var(--ui-pad-v);
  }

  .lightbox .carousel-img,
  .lightbox .about-img {
    max-width: 72vw;
    max-height: 64dvh;
  }
}

@media (min-width: 560px) and (max-height: 560px) {
  :root {
    --body-size: 1rem;

    --logo-w: min(
      var(--gc4),
      calc(30dvh * var(--logo-ar-w) / var(--logo-ar-h))
    );
  }

  body.intro .bar-dropdown {
    display: none;
  }

  :root {
    --bild-max-h: 52dvh;
  }

  .carousel-img {
    max-height: 46dvh;
  }

  .about-img {
    width: auto;
    max-width: 100%;
    max-height: 34dvh;
  }

  body.bar-offen .projects-list {
    opacity: 0.08;
    transition: opacity 0.25s var(--ease-fade);
  }

  .detail-panel,
  .footer-about {
    overflow-y: auto;
  }

  .detail-panel {
    grid-template-rows: auto auto auto;
  }
  .footer-about {
    grid-template-rows: auto auto auto;
  }

  .detail-body,
  .about-text {
    overflow: visible;
    min-height: auto;
  }
  .detail-media,
  .about-media {
    position: sticky;
    top: 0;
  }

  .footer-contact {
    margin-bottom: 1rem;
  }

  .about-impressum {
    position: static;
    grid-area: 3 / 1 / 4 / 2;
    width: auto;
    padding-top: 2rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}