:root {
  --orange: #f27200;
  --blue: #0d4c7a;
  --white: #ffffff;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: #efe2cf url("assets/images/general/sieb-home/testdruck-hintergrund.jpeg") center center / cover no-repeat;
  color: var(--orange);
  font-family: "lores-12", "lores-15", "lores-9-wide", monospace;
  overflow: hidden;
}

button {
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  padding: 0;
  cursor: pointer;
}

.home {
  width: 100vw;
  height: 100vh;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: #efe2cf url("assets/images/general/sieb-home/testdruck-hintergrund.jpeg") center center / cover no-repeat;
}

.home-stage {
  position: relative;
  width: min(100vw, calc(100vh * 1536 / 1024));
  aspect-ratio: 1536 / 1024;
}

.home-layer {
  position: absolute;
  z-index: 1;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  pointer-events: none;
  user-select: none;
}

.click-layer {
  position: absolute;
  inset: 0;
  z-index: 3;
}

.hotspot {
  position: absolute;
  display: block;
  overflow: visible;
  color: transparent;
}

.hotspot-art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
  opacity: 0;
  transition: opacity 0.16s ease;
  pointer-events: none;
  user-select: none;
}

.hotspot-label {
  position: absolute;
  left: 50%;
  top: calc(100% + 0.55rem);
  z-index: 3;
  width: max-content;
  max-width: 18rem;
  color: var(--orange);
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%) translateY(0.25rem);
  transition: opacity 0.16s ease, transform 0.16s ease;
  font-size: clamp(0.9rem, 1.15vw, 1.25rem);
  line-height: 1.1;
  text-align: center;
  text-indent: 0;
  white-space: normal;
}

.hotspot:hover .hotspot-art,
.hotspot:focus-visible .hotspot-art,
.hotspot.is-hovered .hotspot-art {
  opacity: 1;
}

.hotspot:hover .hotspot-label,
.hotspot:focus-visible .hotspot-label,
.hotspot.is-hovered .hotspot-label {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.hotspot:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 3px;
}

.about { left: 11.33%; top: 20.9%; width: 7.03%; height: 2.54%; }
.testdrucke { left: 27.08%; top: 21.09%; width: 7.55%; height: 2.44%; }
.eisbrecher { left: 28.13%; top: 26.17%; width: 15.63%; height: 15.63%; }
.obstwiesenfestival { left: 45.96%; top: 22.07%; width: 9.77%; height: 19.82%; }
.kdlounge { left: 59.9%; top: 22.07%; width: 13.28%; height: 19.92%; }
.stopmotion { left: 74.09%; top: 23.83%; width: 16.34%; height: 18.16%; }
.klimakoepfe { left: 26.69%; top: 44.63%; width: 16.8%; height: 15.14%; }
.buehne { left: 42.71%; top: 43.75%; width: 16.67%; height: 18.75%; }
.reykjavik { left: 60.81%; top: 43.36%; width: 11.2%; height: 19.73%; }
.mathematik { left: 73.44%; top: 45.12%; width: 17.06%; height: 14.65%; }
.name-hotspot { left: 11.2%; top: 63.48%; width: 36.85%; height: 18.75%; }

.overlay {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: none;
  overflow: hidden;
  background: var(--white);
  color: var(--orange);
}

.overlay.active { display: block; }




.close {
  position: absolute;
  right: 2rem;
  top: 1.7rem;
  z-index: 5;
  font-size: 2rem;
}

.project-page {
  width: 100vw;
  height: 100vh;
  position: relative;
  overflow: hidden;
}

.project-title-small {
  position: absolute;
  left: 2rem;
  top: 1.8rem;
  z-index: 4;
  margin: 0;
  font-size: clamp(1rem, 1.5vw, 1.4rem);
  font-weight: 400;
}

.print-layer {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  overflow: hidden;
  opacity: 1;
  transition: opacity 0.45s ease;
}

.print-stage {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(100vw, calc(100vh * 1536 / 1024));
  aspect-ratio: 1536 / 1024;
  transform: translate(-50%, -50%);
}

.print-mark {
  position: absolute;
  object-fit: fill;
  mix-blend-mode: multiply;
  filter: saturate(1.1);
}

.print-about { left: 11.33%; top: 20.9%; width: 7.03%; height: 2.54%; opacity: 0.72; pointer-events: auto; cursor: pointer; }
.print-testdrucke { left: 27.08%; top: 21.09%; width: 7.55%; height: 2.44%; opacity: 0.58; pointer-events: auto; cursor: pointer; }
.print-name { left: 12.4%; top: 63.85%; width: 34.2%; height: 17.5%; opacity: 0.32; }
.print-project { opacity: 0.82; }
.print-project.eisbrecher { left: 28.13%; top: 26.17%; width: 15.63%; height: 15.63%; }
.print-project.obstwiesenfestival { left: 45.96%; top: 22.07%; width: 9.77%; height: 19.82%; }
.print-project.kdlounge { left: 59.9%; top: 22.07%; width: 13.28%; height: 19.92%; }
.print-project.stopmotion { left: 74.09%; top: 23.83%; width: 16.34%; height: 18.16%; }
.print-project.klimakoepfe { left: 26.69%; top: 44.63%; width: 16.8%; height: 15.14%; }
.print-project.buehne { left: 42.71%; top: 43.75%; width: 16.67%; height: 18.75%; }
.print-project.reykjavik { left: 60.81%; top: 43.36%; width: 11.2%; height: 19.73%; }
.print-project.mathematik { left: 73.44%; top: 45.12%; width: 17.06%; height: 14.65%; }

.media-row {
  position: relative;
  z-index: 1;
  height: 100vh;
  display: flex;
  gap: 2rem;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  padding: 6rem 7vw 5rem 7vw;
}


.overlay.full-height-media .media-row {
  height: 100vh;
  padding: 0;
  gap: 0;
  scroll-snap-type: none;
}

.overlay.full-height-media .media-item {
  height: 100vh;
  max-width: none;
  scroll-snap-align: none;
}

.overlay.full-height-media .media-item img {
  height: 100vh;
  width: auto;
  max-width: none;
}
.about-media {
  height: 100vh;
  max-width: none;
  scroll-snap-align: none;
}

.about-page {
  width: calc(100vh * 5.04);
  min-width: 3400px;
  height: 100vh;
  display: grid;
  grid-template-columns: 47vh 38vh 58vh 96vh 53vh 54vh;
  gap: 10vh;
  align-items: start;
  padding: 10vh 8vh 8vh 8vh;
  background: var(--white);
  color: var(--orange);
  font-family: "lores-12", "lores-15", "lores-9-wide", monospace;
  font-size: clamp(0.72rem, 1.18vh, 1rem);
  line-height: 1.25;
  letter-spacing: 0;
}

.about-page h3 {
  margin: 0 0 2.5vh 0;
  font-size: 1.05em;
  font-weight: 700;
}

.about-page p {
  margin: 0 0 2.4vh 0;
}

.about-page strong {
  font-weight: 700;
}

.about-portrait {
  width: 100%;
  height: 82vh;
  object-fit: cover;
  display: block;
}

.about-block {
  margin: 0 0 9vh 0;
}

.about-row {
  display: grid;
  grid-template-columns: 12vh 1fr;
  gap: 2vh;
  margin-bottom: 0.45vh;
}

.about-row .year,
.about-label {
  font-weight: 700;
}

.about-list-row {
  display: grid;
  grid-template-columns: 17vh 1fr;
  gap: 2vh;
  margin-bottom: 2.2vh;
}


.description-text-line {
  display: inline;
  background: rgba(255, 255, 255, 0.88);
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  padding: 0.08em 0.18em;
}

.description-credit {
  font-size: 0.78em;
  line-height: 1.25;
}

.scroll-hint {
  position: absolute;
  right: 2rem;
  bottom: 1.45rem;
  z-index: 6;
  color: var(--orange);
  font-family: "lores-12", "lores-15", "lores-9-wide", monospace;
  font-size: clamp(2rem, 4vw, 4.5rem);
  font-weight: 400;
  line-height: 1;
  pointer-events: none;
  opacity: 0.92;
  animation: scrollHintPulse 1.5s ease-in-out infinite;
}

@keyframes scrollHintPulse {
  0%, 100% { transform: translateX(0); opacity: 0.72; }
  50% { transform: translateX(0.35rem); opacity: 1; }
}

.overlay.hide-scroll-hint .scroll-hint {
  display: none;
}


@media (hover: none), (pointer: coarse) {
  .hotspot:hover .hotspot-art,
  .hotspot:hover .hotspot-label,
  .hotspot:focus-visible .hotspot-art,
  .hotspot:focus-visible .hotspot-label {
    opacity: 0;
  }

  .hotspot:active .hotspot-art,
  .hotspot.is-touching .hotspot-art {
    opacity: 1;
  }

  .archive-list button:hover,
  .archive-list button:focus-visible {
    transform: none;
    text-decoration: none;
  }

  .archive-list button:active {
    transform: translateX(0.35rem);
    text-decoration: underline;
    text-underline-offset: 0.16em;
  }
}

@media (max-width: 800px) {
  .scroll-hint {
    right: 1.2rem;
    bottom: 1rem;
  }
}

.overlay.full-height-media .description-wrap {
  display: none;
}

.overlay.full-height-media .project-title-small {
  display: block;
}

.overlay.full-height-media .print-layer {
  display: block;
}

.media-row::-webkit-scrollbar {
  height: 6px;
}

.media-row::-webkit-scrollbar-thumb {
  background: var(--orange);
}

.media-item {
  flex: 0 0 auto;
  height: calc(100vh - 11rem);
  max-width: 80vw;
  scroll-snap-align: center;
}

.media-item.about-media {
  width: auto;
  max-width: none;
}

.media-item.book-media {
  max-width: 88vw;
}

.media-item img,
.media-item video {
  height: 100%;
  width: auto;
  max-width: 80vw;
  object-fit: contain;
  display: block;
}

.archive-list {
  height: 100%;
  min-width: min(86vw, 980px);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-content: start;
  align-items: start;
  column-gap: clamp(2rem, 6vw, 6rem);
  color: var(--orange);
  font-size: clamp(0.95rem, 1.45vw, 1.75rem);
  line-height: 1.08;
}

.archive-column {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.18rem;
}

.archive-list button {
  color: var(--orange);
  text-align: left;
}

.archive-list button {
  transition: opacity 0.16s ease, transform 0.16s ease;
}

.archive-list button:hover,
.archive-list button:focus-visible {
  opacity: 1;
  transform: translateX(0.35rem);
  text-decoration: underline;
  text-underline-offset: 0.16em;
}

.link-card {
  height: 100%;
  width: min(70vw, 620px);
  display: grid;
  place-items: center;
  color: var(--orange);
  text-decoration: none;
  font-size: clamp(2rem, 7vw, 7rem);
  line-height: 0.95;
  text-align: center;
}

.link-card:hover {
  opacity: 0.65;
}



.upbook-viewer {
  height: 100%;
  width: min(72vw, 760px);
  display: grid;
  grid-template-rows: 1fr auto;
  gap: 0.75rem;
  color: var(--orange);
}

.upbook-page {
  min-height: 0;
  display: grid;
  place-items: center;
  background: #fff;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  perspective: 1200px;
}

.upbook-page img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.upbook-page.turn-up img {
  animation: turnUp 0.42s ease;
  transform-origin: center top;
}

.upbook-page.turn-down img {
  animation: turnDown 0.42s ease;
  transform-origin: center bottom;
}

.upbook-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  font-size: clamp(0.9rem, 1vw, 1.1rem);
}

.upbook-controls button {
  color: var(--orange);
}

.upbook-controls button:disabled {
  opacity: 0.25;
  cursor: default;
}

@keyframes turnUp {
  0% { transform: translateY(0) rotateX(0deg); opacity: 1; }
  50% { transform: translateY(-8%) rotateX(-38deg); opacity: 0.62; }
  100% { transform: translateY(0) rotateX(0deg); opacity: 1; }
}

@keyframes turnDown {
  0% { transform: translateY(0) rotateX(0deg); opacity: 1; }
  50% { transform: translateY(8%) rotateX(38deg); opacity: 0.62; }
  100% { transform: translateY(0) rotateX(0deg); opacity: 1; }
}

.presentation-viewer {
  height: 100%;
  width: min(84vw, 980px);
  display: grid;
  grid-template-rows: 1fr auto;
  gap: 0.75rem;
  color: var(--orange);
}

.presentation-slide {
  min-height: 0;
  display: grid;
  place-items: center;
  background: #fff;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.presentation-slide img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.presentation-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  font-size: clamp(0.9rem, 1vw, 1.1rem);
}

.presentation-controls button {
  color: var(--orange);
}

.presentation-controls button:disabled {
  opacity: 0.25;
  cursor: default;
}

.book-viewer {
  height: 100%;
  width: min(84vw, 980px);
  display: grid;
  grid-template-rows: 1fr auto;
  gap: 0.75rem;
  color: var(--orange);
}


.book-viewer.square-book {
  width: min(84vw, calc((100vh - 12rem) * 2 + 0.35rem));
}

.book-viewer.square-book .book-spread {
  align-items: center;
}

.book-viewer.square-book .book-page {
  aspect-ratio: 1 / 1;
  height: auto;
  max-height: 100%;
}

.book-viewer.square-book .book-spread.single-page {
  grid-template-columns: minmax(0, min(76vh, 72vw));
}

.book-spread {
  position: relative;
  min-height: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.35rem;
  perspective: 1400px;
}

.book-spread.single-page {
  grid-template-columns: minmax(0, 0.52fr);
  justify-content: center;
}

.book-page {
  min-width: 0;
  height: 100%;
  background: #fff;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.book-page img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.book-spread.turn-next .book-page-right {
  animation: turnNext 0.42s ease;
  transform-origin: left center;
}

.book-spread.turn-prev .book-page-left {
  animation: turnPrev 0.42s ease;
  transform-origin: right center;
}

.book-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  font-size: clamp(0.9rem, 1vw, 1.1rem);
}

.book-controls button {
  color: var(--orange);
}

.book-controls button:disabled {
  opacity: 0.25;
  cursor: default;
}

@keyframes turnNext {
  0% { transform: rotateY(0deg); opacity: 1; }
  50% { transform: rotateY(-58deg); opacity: 0.64; }
  100% { transform: rotateY(0deg); opacity: 1; }
}

@keyframes turnPrev {
  0% { transform: rotateY(0deg); opacity: 1; }
  50% { transform: rotateY(58deg); opacity: 0.64; }
  100% { transform: rotateY(0deg); opacity: 1; }
}

.description-wrap {
  display: block;
  position: absolute;
  left: 2rem;
  bottom: 1.8rem;
  z-index: 6;
}

.description-trigger {
  font-size: clamp(1rem, 1.4vw, 1.3rem);
}

.description-box {
  position: absolute;
  left: 0;
  bottom: 2.4rem;
  width: min(520px, calc(100vw - 4rem));
  color: var(--orange);
  opacity: 0;
  pointer-events: none;
  transform: translateY(10px);
  transition: opacity 0.25s ease, transform 0.25s ease;
  font-size: clamp(1rem, 1.25vw, 1.2rem);
  line-height: 1.35;
}

.description-trigger:hover + .description-box,
.description-wrap.is-hovered .description-box {
  opacity: 1;
  transform: translateY(0);
}

.overlay.hide-description .description-wrap {
  display: none;
}



.mobile-home-layer {
  display: none;
}

@media (max-width: 700px) and (orientation: portrait) {
  .home-stage {
    width: min(100vw, calc(100vh * 1024 / 1536));
    aspect-ratio: 1024 / 1536;
  }

  .home-stage > .home-layer:not(.mobile-home-layer) {
    display: none;
  }

  .mobile-home-layer {
    display: block;
  }

  .hotspot-label {
    display: none;
  }

  .hotspot:hover .hotspot-art {
    opacity: 0;
  }

  .hotspot:active .hotspot-art,
  .hotspot.is-touching .hotspot-art {
    opacity: 1;
  }

  .about { left: 13.67%; top: 9.44%; width: 15.63%; height: 2.93%; }
  .testdrucke { left: 34.18%; top: 9.44%; width: 20.99%; height: 2.93%; }
  .eisbrecher { left: 32.71%; top: 16.28%; width: 26.86%; height: 11.07%; }
  .obstwiesenfestival { left: 64.45%; top: 13.67%; width: 15.14%; height: 13.67%; }
  .kdlounge { left: 35.64%; top: 29.30%; width: 20.51%; height: 13.67%; }
  .stopmotion { left: 58.59%; top: 30.27%; width: 27.34%; height: 12.70%; }
  .klimakoepfe { left: 32.71%; top: 45.90%; width: 26.37%; height: 10.09%; }
  .buehne { left: 59.08%; top: 45.25%; width: 25.88%; height: 12.70%; }
  .reykjavik { left: 37.11%; top: 58.92%; width: 17.09%; height: 8.46%; }
  .mathematik { left: 58.11%; top: 60.22%; width: 26.37%; height: 12.37%; }
  .name-hotspot { left: 13.67%; top: 77.15%; width: 59.57%; height: 12.04%; }

  .about .hotspot-art { content: url("assets/images/general/sieb-home/mobile/about.png"); }
  .testdrucke .hotspot-art { content: url("assets/images/general/sieb-home/mobile/testdrucke.png"); }
  .eisbrecher .hotspot-art { content: url("assets/images/general/sieb-home/mobile/eisbrecher.png"); }
  .obstwiesenfestival .hotspot-art { content: url("assets/images/general/sieb-home/mobile/obstwiesenfestival.png"); }
  .kdlounge .hotspot-art { content: url("assets/images/general/sieb-home/mobile/kdlounge.png"); }
  .stopmotion .hotspot-art { content: url("assets/images/general/sieb-home/mobile/stopmotion.png"); }
  .klimakoepfe .hotspot-art { content: url("assets/images/general/sieb-home/mobile/klimakoepfe.png"); }
  .buehne .hotspot-art { content: url("assets/images/general/sieb-home/mobile/buehne.png"); }
  .reykjavik .hotspot-art { content: url("assets/images/general/sieb-home/mobile/reykjavik.png"); }
  .mathematik .hotspot-art { content: url("assets/images/general/sieb-home/mobile/mathematik.png"); }
  .name-hotspot .hotspot-art { content: url("assets/images/general/sieb-home/mobile/name.png"); }

  .print-stage {
    width: min(100vw, calc(100vh * 1024 / 1536));
    aspect-ratio: 1024 / 1536;
  }

  .print-about { left: 13.67%; top: 9.44%; width: 15.63%; height: 2.93%; opacity: 1; }
  .print-testdrucke { left: 34.18%; top: 9.44%; width: 20.99%; height: 2.93%; opacity: 1; }
  .print-name { left: 13.67%; top: 77.15%; width: 59.57%; height: 12.04%; opacity: 1; }
  .print-project { opacity: 1; }
  .print-project.eisbrecher { left: 32.71%; top: 16.28%; width: 26.86%; height: 11.07%; }
  .print-project.obstwiesenfestival { left: 64.45%; top: 13.67%; width: 15.14%; height: 13.67%; }
  .print-project.kdlounge { left: 35.64%; top: 29.30%; width: 20.51%; height: 13.67%; }
  .print-project.stopmotion { left: 58.59%; top: 30.27%; width: 27.34%; height: 12.70%; }
  .print-project.klimakoepfe { left: 32.71%; top: 45.90%; width: 26.37%; height: 10.09%; }
  .print-project.buehne { left: 59.08%; top: 45.25%; width: 25.88%; height: 12.70%; }
  .print-project.reykjavik { left: 37.11%; top: 58.92%; width: 17.09%; height: 8.46%; }
  .print-project.mathematik { left: 58.11%; top: 60.22%; width: 26.37%; height: 12.37%; }

  .print-about { content: url("assets/images/general/sieb-home/mobile/print/about.png"); }
  .print-testdrucke { content: url("assets/images/general/sieb-home/mobile/print/testdrucke.png"); }
  .print-name { content: url("assets/images/general/sieb-home/mobile/print/name.png"); }
  .print-project.eisbrecher { content: url("assets/images/general/sieb-home/mobile/print/eisbrecher.png"); }
  .print-project.obstwiesenfestival { content: url("assets/images/general/sieb-home/mobile/print/obstwiesenfestival.png"); }
  .print-project.kdlounge { content: url("assets/images/general/sieb-home/mobile/print/kdlounge.png"); }
  .print-project.stopmotion { content: url("assets/images/general/sieb-home/mobile/print/stopmotion.png"); }
  .print-project.klimakoepfe { content: url("assets/images/general/sieb-home/mobile/print/klimakoepfe.png"); }
  .print-project.buehne { content: url("assets/images/general/sieb-home/mobile/print/buehne.png"); }
  .print-project.reykjavik { content: url("assets/images/general/sieb-home/mobile/print/reykjavik.png"); }
  .print-project.mathematik { content: url("assets/images/general/sieb-home/mobile/print/mathematik.png"); }



  .archive-list {
    min-width: min(82vw, 420px);
    grid-template-columns: 1fr;
    row-gap: 0.18rem;
    font-size: clamp(1rem, 5vw, 1.35rem);
  }

  .archive-column {
    gap: 0.18rem;
  }

  .archive-list button:hover,
  .archive-list button:focus-visible {
    transform: none;
    text-decoration: none;
  }

  .archive-list button:active,
  .archive-list button.is-pressing {
    transform: translateX(0.35rem);
    text-decoration: underline;
    text-underline-offset: 0.16em;
  }
  .description-trigger:hover + .description-box {
    opacity: 0;
    transform: translateY(10px);
  }

  .description-wrap.is-hovered .description-box {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 800px) {
  .hotspot-label {
    font-size: 0.75rem;
    max-width: 11rem;
  }

  .media-row {
    padding: 5rem 1.2rem 5rem;
  }

  .media-item,
  .media-item img,
  .media-item video {
    max-width: 90vw;
  }

  .project-title-small,
  .description-wrap {
    left: 1.2rem;
  }
}