:root {
  --strip-count: 5;
  --anim-duration: 12s;
  --text-color: #ffffff;
  --font: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  min-height: 100%;
  background: #0b0b0c;
  overflow-x: hidden;
  overscroll-behavior-y: contain;   /* verhindert Pull-to-Refresh: sonst
                                        lädt der Browser beim Herunterziehen
                                        am oberen Rand die ganze Seite neu
                                        und alle offenen Reiter klappen zu */
}

body {
  font-family: var(--font);
  color: var(--text-color);
}

.poster {
  position: relative;   /* normaler Dokumentfluss statt fixed: scrollt
                            zusammen mit Titel, Datum und Logo ganz
                            regulär mit dem Rest der Seite mit */
  width: 100%;
  height: 100vh;
  height: calc(var(--vh, 1vh) * 100);
  height: 100dvh;
  overflow: hidden;
  background: #000;
}

/* ---------- Hintergrund: volles Bild, etwas dunkler ---------- */

.bg-full {
  position: absolute;
  inset: 0;
  background-image: url('images/poster.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 38% 38%;
  filter: brightness(0.4) saturate(0.9);
}

/* ---------- 5 gleich große, responsive Streifen mit Überschlag-Rotation ---------- */

.strips {
  position: absolute;
  inset: 0;
  display: flex;
  width: 100%;
  height: 100%;
}

.strip {
  position: relative;
  flex: 1 1 0;
  height: 100%;
  overflow: hidden;
}

.strip-img {
  position: absolute;
  inset: 0;
  background-image: url('images/poster.jpg');
  background-repeat: no-repeat;
  background-size: 500% auto;
  background-position-x: calc(var(--i) * 25%);
  background-position-y: 38%;

  transform-origin: 50% 50%;
  backface-visibility: visible;

  animation-name: overturn;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  will-change: transform;
}

@keyframes overturn {
  from { transform: rotateX(0deg);   }
  to   { transform: rotateX(360deg); }
}

.strip:nth-child(1) .strip-img { animation-duration: 26s; }
.strip:nth-child(2) .strip-img { animation-duration: 16s; }
.strip:nth-child(3) .strip-img { animation-duration: 10s; }
.strip:nth-child(4) .strip-img { animation-duration: 6s;  }
.strip:nth-child(5) .strip-img { animation-duration: 4s;  }

@media (prefers-reduced-motion: reduce) {
  .strip-img { animation: none; transform: rotateX(0deg); }
}

.strip-glow {
  position: absolute;
  left: 0;
  right: 0;
  height: 50%;
  pointer-events: none;
  mix-blend-mode: screen;
  filter: blur(3px);
  animation-iteration-count: infinite;
}

.strip-glow--up {
  bottom: 50%;
  top: auto;
  transform-origin: bottom center;
  background: linear-gradient(
    to top,
    rgba(255,255,255,0.95) 0%,
    rgba(255,255,255,0.25) 55%,
    transparent 100%
  );
  animation-name: glow-grow;
}

.strip-glow--down {
  top: 50%;
  bottom: auto;
  transform-origin: top center;
  background: linear-gradient(
    to bottom,
    rgba(255,255,255,0.95) 0%,
    rgba(255,255,255,0.25) 55%,
    transparent 100%
  );
  animation-name: glow-grow;
}

@keyframes glow-grow {
  0%, 100% { transform: scaleY(0);   opacity: 0; }
  45%      { transform: scaleY(0.15); opacity: 0.5; }
  50%      { transform: scaleY(1);   opacity: 1; }
  55%      { transform: scaleY(0.15); opacity: 0.5; }
}

.strip:nth-child(1) .strip-glow { animation-duration: 26s; animation-timing-function: linear; }
.strip:nth-child(2) .strip-glow { animation-duration: 16s; animation-timing-function: linear; }
.strip:nth-child(3) .strip-glow { animation-duration: 10s; animation-timing-function: linear; }
.strip:nth-child(4) .strip-glow { animation-duration: 6s;  animation-timing-function: linear; }
.strip:nth-child(5) .strip-glow { animation-duration: 4s;  animation-timing-function: linear; }

@media (prefers-reduced-motion: reduce) {
  .strip-glow { animation: none; opacity: 0; }
}

.light-line {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 5px;
  transform: translateY(-50%);
  background: #ffffff;
  box-shadow:
    0 0 16px 3px   rgba(255,255,255,1),
    0 0 40px 12px  rgba(255,255,255,0.8),
    0 0 90px 26px  rgba(255,255,255,0.55),
    0 0 160px 46px rgba(255,255,255,0.3);
  pointer-events: none;
}

.scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom,
      rgba(0,0,0,0.55) 0%,
      rgba(0,0,0,0.05) 22%,
      rgba(0,0,0,0.05) 55%,
      rgba(0,0,0,0.35) 78%,
      rgba(0,0,0,0.75) 100%);
  pointer-events: none;
}

/* ---------------------- zentrierte Typografie (Hero) ---------------------- */

.content {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 6vh 6vw 2.2vh;
  pointer-events: none;
}

.title {
  margin: 3vh 0 0;
  font-weight: 800;
  font-size: clamp(2.4rem, 11vw, 3.4rem);
  line-height: 0.95;
  letter-spacing: -0.01em;
  text-transform: lowercase;
}

.info {
  margin-top: auto;
  margin-bottom: 9vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3em;
}

.dates {
  margin: 0.5em 0 1.4em;
  font-weight: 700;
  font-size: clamp(0.95rem, 4vw, 1.15rem);
  letter-spacing: 0.01em;
}

.logo {
  display: flex;
  justify-content: center;
}

.logo-mark {
  width: 128px;
  height: auto;
}

@media (min-width: 640px) {
  .title { font-size: clamp(3rem, 7vw, 4.5rem); }
  .dates { font-size: clamp(1.1rem, 2.6vw, 1.3rem); }
  .logo-mark { width: 150px; }
}

@media (min-width: 1024px) {
  .poster {
    max-width: 900px;
    margin: 0 auto;
  }
  .menu-inner { max-width: 900px; margin: 0 auto; }
}

/* ============================================================
   Scroll-Hinweis unten im Poster (verschwindet beim Scrollen)
   ============================================================ */

.scroll-hint {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 2.2vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  color: rgba(255,255,255,0.8);
  font-size: 0.65rem;
  letter-spacing: 0.12em;
  text-transform: lowercase;
  pointer-events: none;
  animation: hint-bob 2.2s ease-in-out infinite;
  transition: opacity 0.4s ease;
}

body.is-scrolled .scroll-hint {
  opacity: 0;
}

@keyframes hint-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(6px); }
}

@media (prefers-reduced-motion: reduce) {
  .scroll-hint { animation: none; }
}

/* ============================================================
   Reiter-Menü: liegt TRANSPARENT auf dem fixen Hintergrundfoto
   (kein Blur/dunkles Panel mehr — der Screenshot zeigt den
   Text direkt auf dem Foto, wie im Hero darüber)
   ============================================================ */

.panel {
  position: relative;
  z-index: 2;
}

.menu-panel {
  padding: 4vh 0 6vh;
}

.menu-inner {
  padding: 0 6vw;
}

/* -------- Sprachumschalter -------- */

.lang-toggle {
  display: inline-flex;
  gap: 6px;
  padding: 4px;
  margin-bottom: 4vh;
  border: 1px solid rgba(255,255,255,0.4);
  border-radius: 999px;
}

.lang-btn {
  appearance: none;
  border: none;
  background: transparent;
  color: rgba(255,255,255,0.7);
  font-family: var(--font);
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  padding: 0.45em 1.1em;
  border-radius: 999px;
  cursor: pointer;
}

.lang-btn.is-active {
  background: #fff;
  color: #0b0b0c;
}

/* -------- gemeinsame Reiter-Grundstruktur -------- */

.menu-item {
  border-bottom: 1px solid rgba(255,255,255,0.55);
  transition: background 0.35s ease;
}

.menu-item + .menu-item {
  margin-top: 0;
}

/* Kontext-Reiter (Arbeit / Historie / Künstler): transparent im
   Ruhezustand, bekommen die Blurriness erst beim Öffnen — im
   Unterschied zum Veranstaltungen-Kasten, der sie durchgehend hat. */
.menu-item.is-open:not(.menu-item--events) {
  backdrop-filter: blur(24px) saturate(140%);
  -webkit-backdrop-filter: blur(24px) saturate(140%);
  background: rgba(10,10,12,0.55);
  padding: 0 1.1em;
  margin: 0 -1.1em;
  border-radius: 4px;
}

.menu-trigger {
  appearance: none;
  display: block;
  width: 100%;
  padding: 0.9em 0;
  border: none;
  background: transparent;
  color: #fff;
  font-family: var(--font);
  text-align: left;
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: -0.005em;
  cursor: pointer;
  transition: font-size 0.3s ease, padding 0.3s ease;
}

.menu-trigger:focus-visible {
  outline: 2px solid rgba(255,255,255,0.6);
  outline-offset: 4px;
}

/* Reiter-Titel wird beim Öffnen zur Überschrift des Blocks — die
   Schreibweise bleibt dabei genau so, wie sie im Markup steht (keine
   erzwungene Kleinschreibung mehr). */
.menu-item.is-open > .menu-trigger {
  font-size: clamp(1.5rem, 6.5vw, 2rem);
  padding-top: 1.1em;
}

/* Höhenanimation ohne JS-Messung */
.menu-body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.45s ease;
}

.menu-item.is-open .menu-body {
  grid-template-rows: 1fr;
}

.menu-body > .menu-body-inner {
  overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
  .menu-body { transition: none; }
  .menu-trigger { transition: none; }
}

.menu-text p {
  margin: 0 0 1.2em;
  font-size: 1rem;
  line-height: 1.6;
  font-weight: 400;
  color: rgba(255,255,255,0.92);
  max-width: 62ch;
}

.menu-text p:last-child {
  margin-bottom: 0;
}

.menu-text em {
  font-style: normal;
  font-weight: 700;
}

.menu-sub {
  font-weight: 700;
  color: rgba(255,255,255,0.75) !important;
}

.menu-year {
  margin: 1.6em 0 0.5em;
  font-weight: 800;
  font-size: 1rem;
  letter-spacing: 0.02em;
  color: #fff;
}

.menu-text > .menu-year:first-child {
  margin-top: 0;
}

.menu-body-inner > .menu-text {
  padding-bottom: 1.6em;
}

/* -------- Bildoption A: Einzelbild mit Bildunterschrift -------- */

.menu-figure {
  margin: 0 0 1.8em;
}

.menu-figure img {
  display: block;
  width: 100%;
  max-height: 50vh;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 4px;
  background: rgba(255,255,255,0.08);
}

.menu-figure--portrait img {
  aspect-ratio: 3 / 4;
  object-position: center top;
}

.menu-figure figcaption {
  margin-top: 0.6em;
  font-size: 0.78rem;
  line-height: 1.5;
  color: rgba(255,255,255,0.6);
  max-width: 62ch;
}

/* -------- Bildoption B: Galerie zum horizontalen Swipen -------- */

.menu-gallery {
  display: flex;
  gap: 0.9em;
  margin: 0 0 1.8em;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.menu-gallery::-webkit-scrollbar {
  display: none;
}

.menu-gallery figure {
  flex: 0 0 auto;
  width: 50vw;
  max-width: 240px;
  margin: 0;
  scroll-snap-align: start;
}

.menu-gallery img {
  display: block;
  width: 100%;
  max-height: 42vh;
  aspect-ratio: 3 / 4;   /* Standard: hochformatig, wie die vorhandenen Fotos */
  object-fit: cover;
  border-radius: 4px;
  background: rgba(255,255,255,0.08);
}

.menu-gallery figcaption {
  margin-top: 0.6em;
  font-size: 0.78rem;
  line-height: 1.5;
  color: rgba(255,255,255,0.6);
}

@media (min-width: 640px) {
  .menu-gallery figure { width: 34vw; }
}

@media (min-width: 1024px) {
  .menu-gallery figure { width: 220px; }
}

/* ============================================================
   Eigenständige Galerie-Komponente MIT gemeinsamer Bildunterschrift
   (z. B. „Aufbau"): bewusst komplett losgelöst von .menu-gallery,
   damit sich die Regeln nicht überschneiden. Nur .gallery-shared-track
   ist der horizontal scrollende Flex-Container mit den Bildern —
   die Unterschrift steht als eigenes Element fix darunter.
   ============================================================ */

.gallery-shared {
  margin: 0 0 1.8em;
}

.gallery-shared-track {
  display: flex;
  gap: 0.9em;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.gallery-shared-track::-webkit-scrollbar {
  display: none;
}

.gallery-shared-track figure {
  flex: 0 0 auto;
  width: 50vw;
  max-width: 240px;
  margin: 0;
  scroll-snap-align: start;
}

.gallery-shared-track img {
  display: block;
  width: 100%;
  max-height: 42vh;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: 4px;
  background: rgba(255,255,255,0.08);
}

.gallery-shared-caption {
  margin: 0.6em 0 0;
  font-size: 0.78rem;
  line-height: 1.5;
  color: rgba(255,255,255,0.6);
}

@media (min-width: 640px) {
  .gallery-shared-track figure { width: 34vw; }
}

@media (min-width: 1024px) {
  .gallery-shared-track figure { width: 220px; }
}

/* ============================================================
   Reiter 1 (Veranstaltungen): eigener Kasten, öffnet bis zu
   einer Maximalhöhe und scrollt danach INNERHALB des Kastens
   ============================================================ */

.menu-item--events {
  display: flex;
  flex-direction: column-reverse;   /* Trigger bleibt unten im Quelltext,
                                        der Inhalt legt sich beim Öffnen
                                        oberhalb davon an — der Kasten
                                        öffnet sich also nach oben statt
                                        nach unten */
  border: 1.5px solid rgba(255,255,255,0.85);
  border-radius: 4px;
  margin-bottom: 4vh;
  padding: 0 1.1em;

  /* Blurriness durchgehend sichtbar, unabhängig vom offen/zu-Zustand */
  backdrop-filter: blur(24px) saturate(140%);
  -webkit-backdrop-filter: blur(24px) saturate(140%);
  background: rgba(10,10,12,0.55);
}

.menu-item--events .menu-trigger--boxed {
  font-size: 1.05rem;
  padding: 1em 0;
}

.menu-item--events.is-open > .menu-trigger--boxed {
  font-size: 1.05rem;      /* bleibt Kasten-Titel, wird NICHT zur großen Überschrift */
  text-transform: none;
}

/* Der Innenscroll wird NICHT mehr über die grid-template-rows-Technik
   der übrigen Reiter gesteuert (dabei blieb der Inhalt technisch
   scrollbar, auch wenn der Kasten optisch zu war — Ursache für die
   „Phantom“-Scrollbar im geschlossenen Zustand). Stattdessen steuert
   ausschließlich max-height auf .menu-body-inner das Auf-/Zuklappen;
   im geschlossenen Zustand ist max-height 0 UND overflow hidden, der
   Inhalt ist also wirklich nicht scrollbar. */
.menu-item--events .menu-body--scroll {
  display: block;
}

.menu-item--events .menu-body-inner {
  max-height: 0;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  padding-top: 0;
  padding-bottom: 0;
  transition: max-height 0.45s ease;
}

.menu-item--events.is-open .menu-body-inner {
  max-height: min(52vh, 460px);
  overflow-y: auto;
  overscroll-behavior: contain;   /* Scrollen bleibt in der Box, statt
                                      auf die Seite überzugehen und dort
                                      ein Pull-to-Refresh auszulösen */
  padding-top: 1em;
  padding-bottom: 1.4em;
}

@media (prefers-reduced-motion: reduce) {
  .menu-item--events .menu-body-inner { transition: none; }
}

/* -------- Event-Liste -------- */

.event-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.event {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.6em;
  padding: 1.6em 0;
  border-top: 1px solid rgba(255,255,255,0.25);
}

.event:first-child {
  border-top: none;
  padding-top: 0.4em;
}

.event-when {
  display: flex;
  gap: 0.8em;
  font-weight: 700;
  font-size: 0.9rem;
  color: rgba(255,255,255,0.7);
  letter-spacing: 0.02em;
}

.event-what {
  font-weight: 700;
  font-size: 1.1rem;
}

.event-meta {
  margin: 0;
  font-size: 0.85rem;
  color: rgba(255,255,255,0.65);
}

.ig-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  margin-top: 0.3em;
  color: rgba(255,255,255,0.85);
  font-size: 0.8rem;
  font-weight: 700;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease, color 0.2s ease;
}

.ig-link:hover,
.ig-link:focus-visible {
  color: #fff;
  border-bottom-color: rgba(255,255,255,0.6);
  outline: none;
}

.ics-btn {
  appearance: none;
  margin-top: 0.4em;
  padding: 0.65em 1.2em;
  border: 1px solid rgba(255,255,255,0.5);
  border-radius: 999px;
  background: transparent;
  color: #fff;
  font-family: var(--font);
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}

.ics-btn:hover,
.ics-btn:focus-visible {
  background: #fff;
  color: #0b0b0c;
  outline: none;
}

.event-note {
  margin: 2em 0 0;
  font-size: 0.75rem;
  color: rgba(255,255,255,0.55);
}

/* -------- Quellenhinweis (z. B. KINDL signs) -------- */

.source-credit {
  margin: 1.6em 0 0;
  font-size: 0.8rem;
  line-height: 1.5;
  color: rgba(255,255,255,0.55);
  max-width: 62ch;
}

.source-credit em {
  font-style: normal;
  font-weight: 700;
  color: rgba(255,255,255,0.7);
}

.source-credit .footer-link {
  font-size: 0.8rem;
}

/* -------- Sponsor-Credit (Carhartt WIP) -------- */

.sponsor-credit {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.8em;
  margin-top: 1.2em;
  font-size: 0.75rem;
  color: rgba(255,255,255,0.55);
}

.sponsor-badge {
  display: inline-flex;
  align-items: center;
  background: #fff;
  border-radius: 8px;
  padding: 0.5em 0.9em;
  line-height: 0;
}

.sponsor-badge img {
  height: 16px;
  width: auto;
  display: block;
}

/* -------- Fußzeile: Impressum links, Adresse/Anfahrt rechts --------
   Kein eigener border-top mehr hier: die border-bottom-Linie des
   letzten Reiters ("Der Künstler") übernimmt jetzt direkt die Funktion
   der Trennlinie zum Footer, statt einer zweiten, doppelten Linie. */

.footer-links {
  margin: 0;
  padding-top: 3.5vh;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1em;
  flex-wrap: wrap;
}

.footer-link {
  color: rgba(255,255,255,0.75);
  font-size: 0.85rem;
  font-weight: 700;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease, color 0.2s ease;
}

.footer-link:hover,
.footer-link:focus-visible {
  color: #fff;
  border-bottom-color: rgba(255,255,255,0.6);
  outline: none;
}

.footer-link--address {
  text-align: right;
}

/* ============================================================
   Unterseite (z. B. Anfahrt / Impressum): schlichte dunkle Seite
   ohne Poster-Animation, gleiche Typografie wie das Reiter-Menü
   ============================================================ */

body.is-subpage {
  background: #0b0b0c;
}

.subpage {
  min-height: 100vh;
  min-height: 100dvh;
}

.subpage-inner {
  max-width: 640px;
  margin: 0 auto;
  padding: 6vh 6vw 8vh;
}

.back-link {
  display: inline-block;
  margin-bottom: 3vh;
  color: rgba(255,255,255,0.75);
  font-size: 0.85rem;
  font-weight: 700;
  text-decoration: none;
}

.back-link:hover,
.back-link:focus-visible {
  color: #fff;
}

.subpage-title {
  margin: 0 0 4vh;
  font-weight: 800;
  font-size: clamp(1.8rem, 8vw, 2.6rem);
  text-transform: lowercase;
  letter-spacing: -0.01em;
  color: #fff;
}

.subpage-heading {
  margin: 3.5vh 0 1.4vh;
  font-weight: 800;
  font-size: clamp(1.2rem, 5vw, 1.5rem);
  text-transform: lowercase;
  letter-spacing: -0.01em;
  color: #fff;
}

.subpage .menu-text p {
  color: rgba(255,255,255,0.9);
}

.map-link {
  display: inline-block;
  margin: 0.4em 0 1em;
  padding: 0.65em 1.2em;
  border: 1px solid rgba(255,255,255,0.5);
  border-radius: 999px;
  color: #fff;
  font-size: 0.85rem;
  font-weight: 700;
  text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease;
}

.map-link:hover,
.map-link:focus-visible {
  background: #fff;
  color: #0b0b0c;
}

/* ============================================================
   PDF-Galerie: hochkantige Karten zum Swipen, jede mit eigener
   Unterschrift (= Dateiname). Eigenständige Komponente, bewusst
   ohne Überschneidung mit .menu-gallery / .gallery-shared.
   ============================================================ */

.pdf-gallery {
  margin: 0 0 1.8em;
}

.pdf-gallery-track {
  display: flex;
  gap: 0.9em;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.pdf-gallery-track::-webkit-scrollbar {
  display: none;
}

.pdf-gallery-track figure {
  flex: 0 0 auto;
  width: 30vw;
  max-width: 150px;
  margin: 0;
  scroll-snap-align: start;
}

.pdf-card {
  appearance: none;
  display: block;
  width: 100%;
  max-height: 32vh;
  aspect-ratio: 3 / 4;
  border: 1px solid rgba(255,255,255,0.35);
  border-radius: 4px;
  background: rgba(255,255,255,0.06);
  overflow: hidden;
  cursor: pointer;
  padding: 0;
  transition: border-color 0.2s ease;
}

.pdf-card:hover,
.pdf-card:focus-visible {
  border-color: rgba(255,255,255,0.85);
  outline: none;
}

.pdf-card img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

.pdf-gallery-track figcaption {
  margin-top: 0.6em;
  font-size: 0.75rem;
  line-height: 1.4;
  color: rgba(255,255,255,0.6);
  word-break: break-word;
}

@media (min-width: 640px) {
  .pdf-gallery-track figure { width: 18vw; }
}

@media (min-width: 1024px) {
  .pdf-gallery-track figure { width: 140px; max-width: none; }
}

/* -------- PDF-Ansicht: Overlay, nur zum Betrachten --------
   Hinweis: #toolbar=0&navpanes=0 blendet in unterstützten Browsern
   (v. a. Chrome) die Download-/Druck-Werkzeugleiste des eingebauten
   PDF-Viewers aus. Ein vollständiges Verhindern von Textauswahl,
   Kopieren oder Herunterladen ist browserseitig NICHT zuverlässig
   möglich — wer will, kommt über Browser-Bordmittel trotzdem an die
   Datei. Für echten Kopierschutz wäre ein serverseitiges Wasserzeichen
   oder ein eigener PDF-Renderer nötig. */

.pdf-viewer {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4vh 4vw;
}

.pdf-viewer[hidden] {
  display: none;
}

.pdf-viewer-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(6,6,7,0.86);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.pdf-viewer-panel {
  position: relative;
  width: 100%;
  max-width: 720px;
  height: 100%;
  max-height: 88vh;
  background: #171718;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}

.pdf-viewer-frame {
  width: 100%;
  height: 100%;
  border: none;
  display: block;
}

.pdf-viewer-close {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 1;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 999px;
  background: rgba(10,10,12,0.75);
  color: #fff;
  cursor: pointer;
}

.pdf-viewer-close:hover,
.pdf-viewer-close:focus-visible {
  background: rgba(10,10,12,0.95);
  outline: none;
}

.pdf-viewer-fallback {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 1;
  padding: 0.5em 0.9em;
  border-radius: 999px;
  background: rgba(10,10,12,0.75);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  text-decoration: none;
  transition: background 0.2s ease;
}

.pdf-viewer-fallback:hover,
.pdf-viewer-fallback:focus-visible {
  background: rgba(10,10,12,0.95);
  outline: none;
}

body.pdf-viewer-open {
  overflow: hidden;
}