/* Lightbox overlay — matches the site's dark palette; controls live in #cv-menu. */
.lb-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--cv-bg, #121521) 88%, black);
  backdrop-filter: blur(6px);
}
.lb-overlay[hidden] { display: none; }
body.lb-open,
body.cv-chronik-lightbox-overlay { overflow: hidden; }

.lb-stage {
  max-width: 92vw;
  max-height: 82vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.lb-media {
  max-width: 92vw;
  max-height: 82vh;
  width: auto;
  height: auto;
  object-fit: contain;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.5);
  background: #000;
}
.lb-audio {
  position: absolute;
  width: 0;
  height: 0;
  opacity: 0;
  pointer-events: none;
}

.lb-audio-player {
  position: relative;
  width: min(92vw, 720px);
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  background: transparent;
  box-shadow: none;
}

.lb-audio-wave-wrap {
  position: relative;
  width: 100%;
}

.lb-audio-wave {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  background: var(--cv-preview-bg, #2a3038);
  cursor: pointer;
  touch-action: none;
  border-radius: 0;
}

.lb-audio-wave:focus-visible {
  outline: 1px solid var(--cv-warm-gold, #c9a84c);
  outline-offset: 2px;
}

.lb-audio-player.is-scrubbing .lb-audio-wave {
  cursor: ew-resize;
}

.lb-audio-scrub-tip {
  position: absolute;
  top: 0.55rem;
  left: 0;
  transform: translateX(-50%);
  z-index: 2;
  padding: 0.12rem 0.4rem;
  font: 11px/1.2 var(--cv-font-family, monospace);
  font-variant-numeric: tabular-nums;
  color: var(--cv-bg, #121521);
  background: var(--cv-warm-gold, #c9a84c);
  pointer-events: none;
  white-space: nowrap;
}

.lb-audio-scrub-tip[hidden] {
  display: none !important;
}

.lb-audio-filename {
  position: absolute;
  left: 0.65rem;
  right: 0.65rem;
  bottom: 0.5rem;
  z-index: 1;
  font: 12px/1.3 var(--cv-font-family, monospace);
  color: #e8eef4;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.75);
  word-break: break-word;
  pointer-events: none;
}

.lb-audio-controls {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  min-height: 1.6rem;
  font: 12px/1.3 var(--cv-font-family, monospace);
  color: var(--cv-text-light, #9aa7b4);
}

.lb-audio-play {
  appearance: none;
  margin: 0;
  padding: 0.15rem 0.55rem 0.2rem;
  border: 1px solid color-mix(in srgb, var(--cv-link-media, #7d93a6) 55%, transparent);
  background: transparent;
  color: var(--cv-link-media, #7d93a6);
  font: inherit;
  letter-spacing: 0.02em;
  cursor: pointer;
  min-width: 2.4rem;
  text-align: center;
}

.lb-audio-play:hover,
.lb-audio-play.is-playing {
  color: var(--cv-warm-gold, #c9a84c);
  border-color: color-mix(in srgb, var(--cv-warm-gold, #c9a84c) 65%, transparent);
}

.lb-audio-play:focus-visible {
  outline: 1px solid var(--cv-warm-gold, #c9a84c);
  outline-offset: 2px;
}

.lb-audio-time {
  font-variant-numeric: tabular-nums;
  color: var(--cv-text-light, #9aa7b4);
}

.lb-audio-sep {
  opacity: 0.55;
}

.lb-caption {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.55em;
  padding: 0 1rem;
  text-align: center;
  font: 12px/1.4 var(--cv-font-family, monospace);
  color: var(--cv-text-light, #9aa7b4);
  pointer-events: none;
}

.lb-caption-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lb-caption-download {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: inherit;
  text-decoration: none;
  pointer-events: auto;
}

.lb-caption-download:hover,
.lb-caption-download:focus-visible {
  color: var(--cv-link-hover, #c5d0db);
}

.lb-caption-download-icon {
  width: 14px;
  height: 14px;
  display: block;
}

/* --- Thumbs-Katalog (feature/lightbox-thumbs-katalog; toggle LB_THUMBS_KATALOG in lightbox.js) --- */
.lb-overlay--katalog {
  align-items: stretch;
  justify-content: stretch;
}

.lb-stage--katalog {
  max-width: none;
  max-height: none;
  width: 100%;
  height: 100%;
  align-items: stretch;
  justify-content: flex-start;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  /* Same horizontal inset as .cv-menu-focus so dossier lines up with project title */
  padding:
    calc(var(--cv-menu-height, 2.4rem) + 1.25rem)
    var(--cv-page-padding, 28px)
    3.5rem;
  box-sizing: border-box;
}

.lb-katalog {
  width: 100%;
  max-width: none;
  margin: 0;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  text-align: left;
}

.lb-katalog-dossier {
  max-width: 42rem;
  font: 13px/1.55 var(--cv-font-family, monospace);
  color: var(--cv-text-light, #9aa7b4);
  pointer-events: auto;
}

.lb-katalog-dossier-title {
  display: none;
}

html.cv-mobile-layout .lb-katalog-dossier-title {
  display: inline;
  color: var(--cv-link, #7ec8e3);
  font-weight: 500;
  letter-spacing: 0.02em;
}

.lb-katalog-dossier a {
  color: var(--cv-link, #7ec8e3);
  text-decoration: none;
}

.lb-katalog-dossier a:hover,
.lb-katalog-dossier a:focus-visible {
  color: var(--cv-link-hover, #c5d0db);
}

.lb-katalog-masonry {
  column-width: 11.5rem;
  column-gap: 0.65rem;
}

.lb-katalog-tile {
  display: block;
  width: 100%;
  margin: 0 0 0.65rem;
  padding: 0;
  border: 0;
  background: transparent;
  break-inside: avoid;
  position: relative;
  cursor: pointer;
  overflow: hidden;
  color: inherit;
  text-align: left;
}

.lb-katalog-tile:focus-visible {
  outline: 1px solid var(--cv-link, #7ec8e3);
  outline-offset: 2px;
}

.lb-katalog-frame {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  background: var(--cv-preview-bg, #2a3038);
  pointer-events: none;
}

.lb-katalog-tile--video .lb-katalog-frame {
  aspect-ratio: 16 / 9;
}

.lb-katalog-tile.is-loaded .lb-katalog-frame {
  display: none;
}

.lb-katalog-thumb {
  display: block;
  width: 100%;
  height: auto;
  vertical-align: top;
  object-fit: cover;
  background: #000;
  pointer-events: none;
  opacity: 0;
  transition: opacity 180ms ease;
}

.lb-katalog-tile.is-loading .lb-katalog-thumb {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.lb-katalog-tile.is-loaded .lb-katalog-thumb {
  position: static;
  height: auto;
  opacity: 1;
}

.lb-katalog-tile--video .lb-katalog-thumb {
  aspect-ratio: 16 / 9;
  object-fit: cover;
  width: 100%;
  height: auto;
}

.lb-katalog-tile-badge {
  position: absolute;
  right: 0.4rem;
  bottom: 0.35rem;
  font-size: 0.7rem;
  line-height: 1;
  opacity: 0;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7);
  pointer-events: none;
  transition: opacity 180ms ease;
}

.lb-katalog-tile.is-loaded .lb-katalog-tile-badge {
  opacity: 0.85;
}

@media (prefers-reduced-motion: reduce) {
  .lb-katalog-thumb,
  .lb-katalog-tile-badge {
    transition: none;
  }
}

.lb-katalog-tile--audio,
.lb-katalog-tile--text {
  min-height: 0;
  padding: 0;
  display: block;
  background: transparent;
}

.lb-katalog-tile--audio .lb-katalog-frame,
.lb-katalog-tile--text .lb-katalog-frame {
  aspect-ratio: 16 / 9;
}

.lb-katalog-tile--audio .lb-katalog-wave,
.lb-katalog-tile--text .lb-katalog-textlines {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: var(--cv-preview-bg, #2a3038);
}

.lb-katalog-tile--audio.is-loading .lb-katalog-wave,
.lb-katalog-tile--text.is-loading .lb-katalog-textlines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
}

.lb-katalog-tile--audio.is-loaded .lb-katalog-wave,
.lb-katalog-tile--text.is-loaded .lb-katalog-textlines {
  position: static;
  opacity: 1;
}

.lb-katalog-file-label,
.lb-katalog-audio-label {
  position: absolute;
  left: 0.55rem;
  right: 0.55rem;
  bottom: 0.45rem;
  z-index: 1;
  font: 11px/1.3 var(--cv-font-family, monospace);
  color: #e8eef4;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.75);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
}

.lb-text-viewer {
  position: relative;
  box-sizing: border-box;
  width: min(92vw, 640px);
  height: min(82vh, 560px);
  display: flex;
  flex-direction: column;
  background: var(--cv-preview-bg, #2a3038);
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.5);
}

.lb-text-viewer--pdf {
  width: min(92vw, 860px);
  height: min(82vh, 920px);
}

.lb-text-pdf {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  background: #1a1e24;
}

.lb-text-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  padding: 1.1rem 1.15rem 2.6rem;
}

.lb-text-body {
  margin: 0;
  white-space: pre-wrap;
  word-break: break-word;
  font: 13px/1.45 var(--cv-font-family, monospace);
  color: var(--cv-warm-gold, #c9a84c);
  background: transparent;
}

.lb-text-body.is-loading {
  white-space: nowrap;
  font-size: 1.1rem;
  line-height: 1;
}

.lb-text-body:focus-visible {
  outline: 1px solid var(--cv-link-media, #7d93a6);
  outline-offset: 2px;
}

.lb-text-filename {
  position: absolute;
  left: 0.75rem;
  right: 0.75rem;
  bottom: 0.55rem;
  z-index: 1;
  font: 12px/1.3 var(--cv-font-family, monospace);
  color: #e8eef4;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.75);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
}

@media (max-width: 720px) {
  .lb-stage--katalog {
    padding-block:
      calc(var(--cv-menu-height, 2.4rem) + 0.85rem)
      3.25rem;
  }

  .lb-katalog-masonry {
    column-width: 9.5rem;
    column-gap: 0.5rem;
  }

  .lb-katalog-tile {
    margin-bottom: 0.5rem;
  }
}

/* Legacy overlay buttons — navigation is in the top menu bar. */
.lb-btn { display: none !important; }

/* Shuffle timer — 2px gold bar just under the top menu divider */
.cv-menu-shuffle-progress {
  position: fixed;
  top: var(--cv-menu-height);
  left: 0;
  right: 0;
  height: 2px;
  z-index: 221;
  pointer-events: none;
  overflow: hidden;
  background: transparent;
}

.cv-menu-shuffle-progress[hidden] {
  display: none !important;
}

.cv-menu-shuffle-progress-bar {
  width: 100%;
  height: 100%;
  background: var(--cv-warm-gold, #c9a84c);
  transform: scaleX(0);
  transform-origin: left center;
  will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
  .cv-menu-shuffle-progress-bar {
    transition: none !important;
  }
}


/* Kopf keeps its raw whitespace so the name is drawn diagonally (ASCII art).
   #cv-content itself is white-space:normal, which would otherwise collapse it. */
#cv-kopf { white-space: pre; }

#cv-kopf a[data-lightbox] { cursor: pointer; }

/* --- Preloader: while loading, only the Kopf shows; content fades in ---- */
#cv-markdown { transition: opacity 0.5s ease; }
body.cv-preloading #cv-markdown {
  opacity: 0;
  pointer-events: none;
  /* Keep remote media (proxied via PHP) from racing module loads for FDs. */
  content-visibility: hidden;
}

/* "LOADING" + CLI spinners under the Kopf while loading */
.cv-loading-hint { display: none; }
body.cv-preloading .cv-loading-hint {
  display: block;
  margin-top: var(--cv-line-height, 1.4em);
  color: var(--cv-text-light, #9aa7b4);
  font-family: var(--cv-font-family, 'Source Code Pro', monospace);
  font-size: var(--cv-font-size, 14px);
  line-height: var(--cv-line-height, 1.4em);
  letter-spacing: 0.04em;
}
.cv-loading-label::after {
  content: ' ';
}
.cv-loading-spinners {
  display: inline;
  /* Source Code Pro lacks Braille/block glyphs — use system mono that has them. */
  font-family: Menlo, Monaco, Consolas, 'DejaVu Sans Mono', 'Liberation Mono', monospace;
  letter-spacing: 0;
}
.cv-loading-spin {
  display: inline-block;
  width: 1.1ch;
  text-align: center;
  vertical-align: baseline;
}
.cv-loading-spin + .cv-loading-spin {
  margin-left: 0.55em;
}

/* Overflow reveal: slide truncated lines so the end is visible on hover. */
#cv-content .cv-line.is-overflow .cv-line-inner,
.cv-panel-pre .cv-line.is-overflow .cv-line-inner {
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

#cv-content #cv-markdown.is-category-overview-layout .cv-chronik-item:has(.cv-category-overview-project-year).is-overflow .cv-category-overview-title-slide {
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

@media (prefers-reduced-motion: reduce) {
  /* Spinner JS is skipped; static first frames remain. */
}