/* Showroom-Galerie (Neuaufbau, /galerie.html) – nach SHOWROOM-SPEZIFIKATION.md.
   Vollbild-Raum-Mockup als Hintergrund (wechselt mit der Station), Station 0 = Intro
   (Wortmarke links, Willkommen + Mini-Anleitung rechts), danach alle Werke (erst verfügbar,
   dann verkauft mit „vergeben"-Siegel). Animationen: reine CSS-Transitions, gesteuert von
   src/scripts/showroom2.ts (KEIN GSAP). Sichtbarkeits-Wahrheit liegt pro Element ausschließlich
   in den Klassen .ist/.aus/.von/.geht – keine Inline-Styles für Sichtbarkeit (Spezifikation §6).
   Hintergrund-Wechsel: schlicht (Crossfade + leichtes Gleiten in Blätter-Richtung, --sr2-dir).
   Geladen nur auf galerie.astro (?v=2 – bei CSS-Änderungen hochzählen). */

.sr2 {
  /* Kein Scrollen im Showroom: die Bühne füllt den Viewport abzüglich Header
     (Höhe setzt showroom2.ts dynamisch, siehe --sr2-header-h) */
  /* Der Showroom ist immer ein DUNKLER Kontext (halbdunkle Panels auf Foto-Mockups):
     Akzent-/Hover-/Flächenfarben fest auf die Dark-Theme-Werte setzen, damit Gold/Grün
     auch im hellen Theme lesbar bleibt (styles.css hellt sie sonst nur im Dark Mode auf). */
  --farbe-akzent: #d9b66c;
  --farbe-hover: #9ec487;
  --farbe-hintergrund: #1d1a32;
}

.sr2-buehne {
  position: relative;
  width: 100%;
  height: calc(100svh - var(--sr2-header-h, 110px));
  overflow: hidden;
}

/* Wrapper um Kulisse + Gemälde + Zähler/Fortschritt/Umschalter/Pfeile (siehe showroom.astro).
   Auf Desktop reine Passthrough-Box (100% Breite/Höhe, kein eigener z-index → keine neue
   Stacking-Order, verhält sich exakt wie vorher ohne Wrapper). Erst im Mobile-Block unten
   wird daraus eine kurze, sticky Zone – siehe dort. */
.sr2-bild-zone {
  position: relative;
  width: 100%;
  height: 100%;
}

/* ---------- Szenen-Hintergrund (schlichter Crossfade + leichtes Gleiten) ---------- */

.sr2-hg {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0;
  transform: translateX(0);
  transition: opacity 1.6s ease, transform 1.6s ease;
}

.sr2-hg.ist { opacity: 1; }

/* Startposition der hereinkommenden Szene (Transitions aus, wird sofort wieder entfernt).
   Bewusst ENTGEGENGESETZT und schwächer als der Bild-Versatz (.sr2-werk.von: 60px in
   --sr2-dir-Richtung) – die Kulisse "hinkt" leicht hinterher, das ergibt einen echten
   Tiefeneindruck (Parallax) zwischen Wand/Natur und Gemälde statt beide gleich zu bewegen. */
.sr2-hg.von {
  opacity: 0;
  transform: translateX(calc(var(--sr2-dir, 1) * -2%));
  transition: none;
}

/* Astro rendert <picture> um das <img> – beide Ebenen füllen die Fläche */
.sr2-hg picture {
  display: block;
  width: 100%;
  height: 100%;
}

.sr2-hg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Sanfte Ken-Burns-Drift – macht aus dem sonst komplett statischen Foto ein leises
   "Atmen": zoomt sacht rein und wieder raus, mit einer Spur Rotation, endlos in Schleife
   (gleiche Idee wie KenBurnsHero.astro auf der Startseite). Läuft auf dem <img>, nicht auf
   .sr2-hg selbst, damit sie die Opacity-Transition der Szene nicht stört. will-change +
   eigene Compositing-Ebene (translateZ(0)) gegen das ruckelige/stufige Skalieren großer
   Vollbild-Fotos. WICHTIG: läuft AUF ALLEN Hintergründen durchgehend (nicht nur .ist) –
   sonst stoppt/springt die Animation genau in dem Moment, in dem ein Hintergrund per
   Crossfade aus-/eingeblendet wird (fühlte sich wie ein Ruck an). */
@keyframes sr2-kenburns {
  0% { transform: scale(1) rotate(0deg); }
  50% { transform: scale(1.06) rotate(.5deg); }
  100% { transform: scale(1) rotate(0deg); }
}

.sr2-hg img {
  animation: sr2-kenburns 24s ease-in-out infinite;
  will-change: transform;
  transform: translateZ(0);
  backface-visibility: hidden;
}

/* Dezente Vignette über allen Kulissen (Indoor wie Outdoor): lenkt den Blick zur Bildmitte,
   wie eine sanfte Galerie-Beleuchtung – unabhängig vom Outdoor-Tint, der zusätzlich dazukommt. */
.sr2-vignette {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at 45% 50%, rgba(0, 0, 0, 0) 45%, rgba(0, 0, 0, .32) 100%);
}

/* ---------- Werk-Slides (Gemälde an der Wand) ---------- */

.sr2-slides {
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* Sichtbarkeit nur per Klassen: .ist (aktuell), .von (Startposition hereinkommend,
   transitionslos), .geht (hereausgehend). visibility mit Verzögerung, damit das
   Ausblenden erst nach dem Fade greift. */
.sr2-werk {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateX(0);
  transition:
    opacity 1.4s ease,
    transform 1.4s ease,
    visibility 0s linear 1.4s;
}

.sr2-werk.ist {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
  transition:
    opacity 1.4s ease,
    transform 1.4s ease,
    visibility 0s;
}

.sr2-werk.von {
  opacity: 0;
  visibility: visible;
  transform: translateX(calc(var(--sr2-dir, 1) * 60px));
  transition: none;
}

.sr2-werk.geht {
  opacity: 0;
  transform: translateX(calc(var(--sr2-dir, 1) * -60px));
}

/* Positionierung (Zentrierung über translate) liegt auf .sr2-wand-pos – NICHT auf .sr2-wand,
   damit die Wechsel-Transforms auf .sr2-werk nicht mit der Zentrierung kollidieren.
   EINHEITLICH für alle Werke: gleiche HÖHE, Breite ergibt sich aus dem Seitenverhältnis. */
.sr2-wand-pos {
  position: absolute;
  left: 33%;
  top: 46%;
  transform: translate(-50%, -50%);
  height: min(80%, 700px);
}

/* Rahmen als „Milchglas" – exakt dieselbe Optik wie das Info-Panel (.sr2-panel):
   gleiche Fläche/Blur, für Indoor UND Outdoor identisch (früher hatte Indoor einen
   starren cremefarbenen Rahmen, das war optisch inkonsistent zur Outdoor-Karte). */
.sr2-wand {
  display: block;
  box-sizing: border-box;
  height: 100%;
  padding: 16px;
  border: 0;
  border-radius: 6px;
  background: rgba(29, 26, 50, .45);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 24px 48px rgba(0, 0, 0, .55);
  cursor: pointer;
  transition: box-shadow .35s ease, background .35s ease;
}

.sr2-wand:hover,
.sr2-wand:focus-visible {
  background: rgba(29, 26, 50, .55);
  box-shadow: 0 30px 56px rgba(0, 0, 0, .6);
}

/* <picture> (Astros Wrapper um <img>) übernimmt nur noch das Zuschneiden – dank
   overflow:hidden bleibt der Hover-Zoom innerhalb des Rahmens geclippt, statt über
   ihn hinauszuwachsen (gleiche Technik wie die Karten-Bilder in der Masonry-Galerie,
   siehe .gal-bild in galerie.css). */
.sr2-wand picture {
  display: inline-block;
  height: 100%;
  overflow: hidden;
}

.sr2-wand img {
  width: auto;
  height: 100%;
  display: block;
  transition: transform .5s ease, filter .3s ease;
}

/* Dezentes Abdunkeln, solange die Hover-Lupe aktiv ist (nur Desktop/Maus – Klasse wird
   ausschließlich in showroom2.ts bei der Lupen-Logik gesetzt). Zum Zurückbauen: diese
   Regel + die drei "sr2-wand--verdunkelt"-Stellen in showroom2.ts entfernen. */
.sr2-wand--verdunkelt img {
  filter: brightness(.85);
}

/* Hover: Gemälde zoomt leicht innerhalb des Rahmens – bewusst dezent, keine echte
   3D-Wirkung. Der Rahmen selbst hebt sich per Schatten hervor (s.o.). */
.sr2-wand:hover img,
.sr2-wand:focus-visible img {
  transform: scale(1.12) rotate(-1.2deg);
}

/* ---------- Outdoor-Modus: dunkler Tint über der Naturkulisse ---------- */
/* Die Naturkulissen haben keine freie Fläche zum Einsetzen (anders als die Wand-Mockups) –
   damit die (jetzt identische) Milchglas-Karte klar hervorsticht, wird die Kulisse
   dahinter im Outdoor-Modus zusätzlich abgedunkelt. */
.sr2-outdoor-tint {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: rgba(10, 12, 8, 0);
  transition: background 1.2s ease;
  pointer-events: none;
}

.sr2-buehne[data-modus="outdoor"] .sr2-outdoor-tint {
  background: rgba(10, 12, 8, .4);
}

/* ---------- Indoor/Outdoor-Umschalter ---------- */

.sr2-modus-toggle {
  position: absolute;
  z-index: 2;
  top: 1.2rem;
  right: 1.2rem;
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .5rem .9rem;
  border: 0;
  border-radius: 20px;
  background: rgba(29, 26, 50, .45);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: rgba(248, 246, 242, .9);
  cursor: pointer;
  transition: background .2s ease, color .2s ease;
}

.sr2-modus-toggle:hover {
  background: rgba(29, 26, 50, .65);
  color: var(--farbe-hover);
}

.sr2-modus-label {
  font-family: 'source', monospace;
  font-size: 12px;
  letter-spacing: 1px;
  text-transform: uppercase;
}

/* Zeigt das ZIEL des nächsten Klicks, nicht den aktuellen Modus (wie das Label
   daneben, siehe modusLabelSetzen in showroom2.ts): bei aktivem Indoor also das
   Outdoor-Icon (Einladung zum Wechsel) und umgekehrt. */
.sr2-modus-ico-outdoor { display: none; }
.sr2-buehne[data-modus="indoor"] .sr2-modus-ico-indoor { display: none; }
.sr2-buehne[data-modus="indoor"] .sr2-modus-ico-outdoor { display: block; }

/* ---------- Hover-Lupe (Pinselstruktur, nur Maus/Trackpad) ---------- */

.sr2-lupe {
  position: fixed;
  z-index: 5;
  width: 260px;
  height: 260px;
  border-radius: 50%;
  border: 3px solid rgba(248, 246, 242, .9);
  box-shadow: 0 12px 32px rgba(0, 0, 0, .5), inset 0 0 0 1px rgba(29, 26, 50, .15);
  background-repeat: no-repeat;
  background-size: 320%;
  opacity: 0;
  /* Deutlich sichtbares Wachsen von klein auf volle Größe beim Erscheinen (nicht nur
     ein leichtes Aufblenden) – ease-out-quint für einen knackigen, nicht wabbeligen Pop. */
  transform: scale(.3);
  pointer-events: none;
  transition: opacity .2s ease, transform .3s cubic-bezier(0.16, 1, 0.3, 1);
}

.sr2-lupe.ist {
  opacity: 1;
  transform: scale(1);
}

/* Auf Touch-Geräten/schmalen Screens bewusst aus (kein Hover, Panel/Bild liegen eng) */
@media (max-width: 700px), (hover: none) {
  .sr2-lupe { display: none; }
}

/* ---------- Werk-Infos (rechte Spalte, wie Werk-Detailseite, Spezifikation §3) ---------- */

.sr2-panel {
  position: absolute;
  z-index: 1;
  left: 58%;
  top: 46%;
  transform: translateY(-50%);
  /* Etwas breiter als vorher (mehr Platz für den Text, weniger Umbruch/Kürzung) –
     aber nie so breit, dass es mit der rechten Zähler/Fortschritt-Spalte + dem
     Weiter-Pfeil kollidiert (deren reservierter Platz: ~220px, siehe .sr2-orientierung).
     Auf breiten Monitoren greift weiterhin der 520px-Deckel wie vorher. */
  width: min(36%, 520px, calc(42% - 220px));
  max-height: 78svh;
  /* Scrollbar unsichtbar (blitzte sonst kurz während der Wechsel-Animation auf,
     wenn der neue Inhalt die Höhe ändert); scrollen bleibt trotzdem möglich */
  overflow-y: auto;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* altes Edge/IE */
  padding: 1.75rem 2rem;
  background: rgba(29, 26, 50, .45);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: 6px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, .25);
  opacity: 1;
  transition: opacity .4s ease;
}

/* Webkit/Blink: Scrollbar des Info-Panels ebenfalls unsichtbar */
.sr2-panel::-webkit-scrollbar { display: none; }

.sr2-panel.aus {
  opacity: 0;
  transition-duration: .35s;
}

/* Text-Blöcke: EIN-Transition mit Stagger (Versatz über :nth-child, je 100 ms,
   Spezifikation §4). Beim Ausblenden (.sr2-text-aus) gilt Versatz 0 – alles fader gemeinsam. */
.sr2-zeile {
  opacity: 1;
  transform: translateX(0);
  transition: opacity .8s ease, transform .8s ease;
}

.sr2-panel > .sr2-zeile:nth-child(2) { transition-delay: .1s; }
.sr2-panel > .sr2-zeile:nth-child(3) { transition-delay: .2s; }
.sr2-panel > .sr2-zeile:nth-child(4) { transition-delay: .3s; }
.sr2-panel > .sr2-zeile:nth-child(5) { transition-delay: .4s; }
.sr2-panel > .sr2-zeile:nth-child(6) { transition-delay: .5s; }
.sr2-panel > .sr2-zeile:nth-child(7) { transition-delay: .6s; }
.sr2-panel > .sr2-zeile:nth-child(8) { transition-delay: .7s; }
.sr2-panel > .sr2-zeile:nth-child(9) { transition-delay: .8s; }

.sr2-panel.sr2-text-aus > .sr2-zeile {
  opacity: 0;
  transform: translateX(calc(var(--sr2-dir, 1) * 36px));
  transition-delay: 0s;
  transition-duration: .35s;
}

/* Titel wie .ed-text h2 (Detailseite) */
.sr2-panel h2 {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 600;
  font-size: var(--schrift-szene-titel, 34px);
  line-height: 1.05;
  letter-spacing: .2px;
  /* Farbe wie zuvor die entfernte "Monique Fischer"-Unterzeile (.sr2-sub) – der Name
     wiederholte sich auf jeder Werk-Station, die Akzentfarbe bleibt am Titel. */
  color: var(--farbe-hover);
  margin: 0;
}

/* Subline wie .ed-detail-sub: Parisienne-Script, gold */
.sr2-sub {
  font-family: 'Parisienne', 'ava', cursive;
  font-size: 28px;
  line-height: 1.2;
  color: var(--farbe-hover);
  margin: 6px 0 0;
}

/* Beschreibung wie .ed-detail-desc */
.sr2-beschreibung {
  font-size: 18px;
  line-height: 1.8;
  color: rgba(248, 246, 242, .92);
  margin: 20px 0 0;
}

/* Spec-Liste wie .ed-specs/.ed-spec, Linien/Farben aufgehellt */
.sr2-specs {
  margin: 24px 0 0;
  padding: 0;
  border-top: 1px solid rgba(248, 246, 242, .15);
}

.sr2-spec {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 11px 0;
  border-bottom: 1px solid rgba(248, 246, 242, .15);
}

.sr2-spec dt {
  font-family: 'source', monospace;
  font-size: 12px;
  letter-spacing: 1px;
  /* KEIN uppercase: Browser wandeln ß dabei in SS um („Maße" → „MASSE") */
  color: var(--farbe-hover);
  margin: 0;
}

.sr2-spec dd {
  font-size: 15px;
  color: #f8f6f2;
  margin: 0;
  text-align: right;
}

/* ---------- Zähler ("Werk 1 von n") + Fortschritt: rechte Spalte ---------- */
/* Vorher oben zentriert über der GANZEN Bühne – auf schmaleren Desktop-Fenstern
   (Laptop statt großer Monitor) überlappte das mit Bild/Panel, die für breite
   Bühnen ausgelegt sind. Jetzt eine schmale Spalte zwischen Panel und dem
   Weiter-Pfeil, vertikal zentriert; der Fortschritt läuft als vertikaler
   Balken von unten nach oben (siehe .sr2-fortschritt-fuellung). */
.sr2-orientierung {
  position: absolute;
  z-index: 2; /* über .sr2-panel (z-index:1) – das Textfeld kann je nach
                 Beschreibungslänge unterschiedlich hoch werden und in diesen
                 Bereich reichen; Zähler/Balken sollen dann trotzdem sichtbar bleiben */
  top: 50%;
  right: 84px; /* Weiter-Pfeil (.sr2-nav, 48px) + Abstand */
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

.sr2-zaehler {
  margin: 0;
  padding: .5rem .8rem;
  border-radius: 6px;
  background: rgba(29, 26, 50, .45);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  font-family: 'source', monospace;
  font-size: 13px;
  letter-spacing: .5px;
  color: rgba(248, 246, 242, .85);
  text-shadow: 0 1px 4px rgba(0, 0, 0, .7);
  white-space: nowrap;
}

/* Fortschrittsleiste: zeigt die Position in der Ausstellung (0% im Intro, 100%
   beim letzten Werk) – Orientierung beim Blättern, ohne bei 30+ Werken auf
   einzelne Punkte pro Werk angewiesen zu sein. Vertikal, Füllung wächst von
   unten nach oben (justify-content: flex-end hält die Füllung am unteren Rand,
   ihre eigene Höhe wächst von dort aus aufwärts). */
.sr2-fortschritt {
  width: 6px;
  height: 60vh;
  /* Klein statt proportional (war 3px bei 6px Breite = halb rund) – ein größerer
     Radius kappt die Füllung unten zu einer schmalen Spitze, solange sie noch
     kurz ist (sichtbar erst ab einigen Pixeln volle Breite). */
  border-radius: 1px;
  background: rgba(29, 26, 50, .55);
  box-shadow: 0 1px 4px rgba(0, 0, 0, .35);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.sr2-fortschritt-fuellung {
  display: block;
  /* Desktop: Breite bleibt fix, nur die Höhe folgt --fortschritt (siehe
     fortschrittSetzen in showroom2.ts). Mobile dreht das unten um. */
  width: 100%;
  height: var(--fortschritt, 0%);
  min-height: 4px; /* auch bei "Werk 1 von 31" (≈3%) noch als Punkt erkennbar */
  background: var(--farbe-hover);
  box-shadow: 0 0 6px rgba(158, 196, 135, .8);
  transition: height .5s ease;
}

/* ---------- Footer-Links als Text-Overlay (globaler Footer ist hier ausgeblendet) ---------- */

.sr2-fuss {
  position: absolute;
  z-index: 1;
  left: 50%;
  transform: translateX(-50%);
  bottom: 1rem;
  display: flex;
  align-items: center;
  gap: 2rem;
  margin: 0;
  padding: .8rem 1.6rem;
  border-radius: 6px;
  /* Dunkle halbtransparente Fläche wie das Info-Panel (.sr2-panel) –
     Inhalt/Typo 1:1 wie der Footer der Hauptseite (.ed-foot) */
  background: rgba(29, 26, 50, .45);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.sr2-fuss-links {
  display: flex;
  gap: 1.2rem;
  align-items: baseline;
  flex-wrap: wrap;
}

.sr2-fuss a {
  font-family: 'source', monospace;
  font-size: 15px;
  letter-spacing: .5px;
  color: rgba(248, 246, 242, .85);
  text-decoration: none;
  transition: color .2s ease;
}

.sr2-fuss a:hover { color: var(--farbe-hover); }

.sr2-fuss-sep { color: rgba(248, 246, 242, .35); }

/* „Kontakt aufnehmen" – Cormorant italic, Akzent-Gold (wie .ed-foot-contact) */
.sr2-fuss-kontakt {
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-style: italic;
  font-size: 22px !important;
  letter-spacing: 0 !important;
  color: var(--farbe-akzent) !important;
  white-space: nowrap;
}

.sr2-fuss-kontakt:hover { color: var(--farbe-hover) !important; }

@media (max-width: 700px) {
  /* Mobile: Links zentriert umbrechen (Zähler bleibt gestapelt darüber, wie Desktop) */
  .sr2-fuss {
    justify-content: center;
    flex-wrap: wrap;
    gap: .5rem 1rem;
    width: max-content;
    max-width: 92vw;
  }
}

/* ---------- Nav-Pfeile (Look der Detailseiten-Floating-Arrows, Spezifikation §2) ---------- */

.sr2-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 48px;
  height: 80px;
  border: 0;
  background: rgba(29, 26, 50, .45);
  color: #fff;
  font-size: 22px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .2s ease, color .2s ease;
}

.sr2-nav:hover {
  background: var(--farbe-hover, #c9a24b);
  color: var(--farbe-dunkel, #1d1a32);
}

.sr2-zurueck { left: 0; border-radius: 0 4px 4px 0; }
.sr2-vor { right: 0; border-radius: 4px 0 0 4px; }

/* ---------- Lightbox (nativer <dialog>, serverseitig gerendert) ---------- */

.sr2-lb {
  border: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  background: rgba(0, 0, 0, .9);
}

.sr2-lb::backdrop { background: transparent; }

.sr2-lb-buehne {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.sr2-lb-slide {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transform: translateX(0);
  transition:
    opacity .7s ease,
    transform .7s ease,
    visibility 0s linear .7s;
}

.sr2-lb-slide.ist {
  opacity: 1;
  visibility: visible;
  transition:
    opacity .7s ease,
    transform .7s ease,
    visibility 0s;
}

.sr2-lb-slide.von {
  opacity: 0;
  visibility: visible;
  transform: translateX(calc(var(--sr2-dir, 1) * 60px));
  transition: none;
}

.sr2-lb-slide.geht {
  opacity: 0;
  transform: translateX(calc(var(--sr2-dir, 1) * -60px));
}

.sr2-lb-slide img {
  /* Höhe ist der Treiber: Hoch- und Querformate bekommen dieselbe Bildhöhe,
     Breite ergibt sich aus dem Seitenverhältnis (max-width als Sicherung) */
  height: 75vh;
  width: auto;
  max-width: 92vw;
  max-height: 92vh;
}

.sr2-lb-schliessen {
  position: absolute;
  top: 1rem;
  right: 1rem;
  z-index: 3;
  border: 0;
  background: none;
  color: #fff;
  font-size: 2rem;
  cursor: pointer;
}

/* Gleicher eckiger Look wie überall sonst (Showroom-Bühne .sr2-nav, Galerie-Lightbox
   .lightbox-nav in artwork-detail.css) – war zuvor rund und dadurch inkonsistent. */
.sr2-lb-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 52px;
  height: 80px;
  border: 0;
  border-radius: 4px;
  background: rgba(255, 255, 255, .12);
  color: #fff;
  font-size: 26px;
  cursor: pointer;
  transition: background .2s ease, color .2s ease;
}

.sr2-lb-nav:hover {
  background: var(--farbe-hover);
  color: var(--farbe-dunkel);
}

.sr2-lb-zurueck { left: 1rem; }
.sr2-lb-vor { right: 1rem; }

.sr2-lb-zaehler {
  position: absolute;
  bottom: 1rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  margin: 0;
  color: #fff;
  font-size: .95rem;
}

/* ---------- Intro-Station (Station 0) ---------- */

/* Wortmarke auf der Wand (statt Gemälde): gleiche Position/Fläche wie .sr2-wand-pos,
   dekorativ (nicht klickbar, kein Zoom). Dunkle halbtransparente Fläche dahinter
   (wie Info-Panel), damit der Schriftzug auf jedem Mockup lesbar bleibt. */
.sr2-wortmarke {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 2rem 3rem;
  text-align: center;
  user-select: none;
  background: rgba(29, 26, 50, .4);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: 6px;
}

.sr2-wortmarke-titel {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 600;
  font-size: clamp(40px, 5.2vw, 76px);
  line-height: 1.05;
  letter-spacing: .5px;
  color: #f8f6f2;
  text-shadow: 0 2px 22px rgba(0, 0, 0, .45);
}

.sr2-wortmarke-sub {
  font-family: 'source', monospace;
  font-size: 13px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--farbe-hover);
  margin-top: 14px;
  text-shadow: 0 1px 10px rgba(0, 0, 0, .5);
}

/* Zeile über der Mini-Anleitung */
.sr2-anleitung-titel {
  font-family: 'source', monospace;
  font-size: 12px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: rgba(248, 246, 242, .75);
  margin: 26px 0 0;
}

/* Mini-Anleitung: gleiches dl-Layout wie die Spec-Liste; Icons in den Wert-Zellen */
.sr2-anleitung { margin-top: 10px; }

.sr2-anleitung dd {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #f8f6f2;
}

/* Mausrad: Punkt wandert auf/ab */
.sr2-maus-punkt {
  animation: sr2-mausrad 1.8s ease-in-out infinite;
}

@keyframes sr2-mausrad {
  0%, 100% { transform: translateY(0); opacity: 1; }
  50% { transform: translateY(9px); opacity: .35; }
}

/* Pfeiltasten: sanft abwechselnd pulsierend */
.sr2-taste {
  display: inline-block;
  font-size: 17px;
  animation: sr2-taste-puls 2.2s ease-in-out infinite;
}

.sr2-taste:last-child { animation-delay: 1.1s; }

@keyframes sr2-taste-puls {
  0%, 100% { opacity: .35; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.25); }
}

/* Klick-Icon: Ring expandiert und verblasst */
.sr2-klick-ring {
  transform-origin: 12px 12px;
  animation: sr2-klick-ring 1.8s ease-out infinite;
}

@keyframes sr2-klick-ring {
  0% { transform: scale(.4); opacity: 1; }
  70%, 100% { transform: scale(1.6); opacity: 0; }
}

/* Link im Schaukasten-Text (Intro-Beschreibung) auf dem dunklen Panel */
.sr2-beschreibung a {
  color: var(--farbe-hover);
  text-decoration: none;
  border-bottom: 1px solid rgba(201, 162, 75, .5);
  transition: color .2s ease, border-color .2s ease;
}

.sr2-beschreibung a:hover {
  color: #f8f6f2;
  border-color: #f8f6f2;
}

/* ---------- Mobile (≤700 px): echte scrollbare Seite statt Vollbild-Bühne ---------- */
/* Vorher war .sr2-buehne fest auf Viewport-Höhe mit overflow:hidden – auf Mobile ließ
   sich dadurch NICHTS scrollen: der Panel-Text musste in seiner eigenen kleinen Box
   gescrollt werden, der Footer war unerreichbar, und ein Wisch über den Rand hinaus löste
   den Browser-„Pull-to-refresh" aus (kein Platz für die Seite selbst, sich zu bewegen).
   Jetzt: .sr2-bild-zone (Kulisse + Gemälde + Zähler/Fortschritt/Umschalter/Pfeile) bleibt
   als KURZE, sticky Zone oben stehen (bleibt beim Scrollen sichtbar, wie ein Bild an der
   Wand); Panel und Footer sind normaler, fließender Seiteninhalt darunter – die Seite
   selbst scrollt (kein Pull-to-refresh mehr, kompletter Text ohne Innen-Scroll sichtbar,
   Footer wandert mit). */
@media (max-width: 700px) {
  .sr2-buehne {
    height: auto;
    min-height: calc(100svh - var(--sr2-header-h, 110px));
    overflow: visible;
  }

  .sr2-bild-zone {
    position: sticky;
    /* direkt unter dem (ebenfalls sticky) Seiten-Header, nicht dahinter */
    top: var(--sr2-header-h, 110px);
    height: 46vh;
    min-height: 260px;
    max-height: 380px;
    overflow: hidden;
    /* Bewusst NIEDRIGER als .sr2-panel/.sr2-fuss (z-index:1): der Text soll beim Scrollen
       über das stehenbleibende Bild gleiten (mit seinem eigenen Milchglas-Blur darüber),
       nicht umgekehrt – gefällt optisch besser als Text hinter dem Bild verschwinden zu
       lassen. */
    z-index: 0;
  }

  /* Gemälde weiter unten in der (jetzt kürzeren) Bild-Zone zentriert, damit es nicht mit
     Zähler/Fortschrittsleiste/Umschalter oben in der Zone kollidiert. */
  .sr2-wand-pos {
    left: 50%;
    top: 62%;
    width: auto;
    height: min(60%, 300px);
  }

  .sr2-panel {
    position: static;
    left: auto;
    right: auto;
    top: auto;
    bottom: auto;
    transform: none;
    width: auto;
    max-height: none;
    overflow: visible;
    margin: 1.25rem 4% 0;
    padding: 1.1rem 1.25rem;
  }

  .sr2-panel h2 { font-size: 26px; }

  .sr2-sub { font-size: 23px; }

  .sr2-beschreibung { font-size: 16px; margin-top: 14px; }

  .sr2-specs { margin-top: 16px; }

  .sr2-spec { padding: 8px 0; }

  .sr2-spec dd { font-size: 14px; }

  .sr2-nav {
    width: 36px;
    height: 60px;
    font-size: 20px;
  }

  /* Zähler + Fortschritt: auf Mobile bleibt es bei der ursprünglichen horizontalen
     Anordnung oben in der (kurzen) Bild-Zone – die rechte Spalte des Desktop-Layouts
     (siehe oben) passt hier nicht, dafür ist zu wenig Breite. */
  .sr2-orientierung {
    top: 1.2rem;
    right: auto;
    left: 50%;
    transform: translateX(-50%);
    flex-direction: column;
    gap: .6rem;
  }

  .sr2-fortschritt {
    width: min(70vw, 260px);
    height: 4px;
    flex-direction: row;
    justify-content: flex-start;
  }

  .sr2-fortschritt-fuellung {
    width: var(--fortschritt, 0%);
    height: 100%;
    min-width: 4px;
    min-height: 0;
    transition: width .5s ease;
  }

  /* Footer: normaler Seiteninhalt nach dem Panel, statt fest am unteren Bühnenrand –
     scrollt jetzt mit (siehe Kommentar oben). */
  .sr2-fuss {
    position: static;
    left: auto;
    bottom: auto;
    transform: none;
    margin: 1.5rem auto 2rem;
  }

  /* Lightbox: feste Höhe (75vh) + gedeckelte Breite (92vw) zusammen verzerrten das Bild
     auf schmalen Screens (Seitenverhältnis passte nicht mehr zusammen). Höhe jetzt frei
     (auto) – der Browser wählt selbst die einschränkende Dimension, seitenverhältnis-
     treu. 80vh statt 92vh lässt oben/unten Platz für Schließen-Button und Zähler. */
  .sr2-lb-slide img {
    height: auto;
    width: auto;
    max-width: 92vw;
    max-height: 80vh;
  }

  .sr2-lb-nav {
    width: 40px;
    height: 64px;
    font-size: 20px;
  }
}

/* ---------- Reduced Motion: alle Animationen Dauer 0, sofortiger Wechsel ---------- */

@media (prefers-reduced-motion: reduce) {
  .sr2-hg,
  .sr2-werk,
  .sr2-panel,
  .sr2-zeile,
  .sr2-lb-slide,
  .sr2-nav,
  .sr2-wand img {
    transition: none !important;
  }

  /* Anleitung-Icons + Ken-Burns-Drift der Hintergründe: aus */
  .sr2-maus-punkt,
  .sr2-taste,
  .sr2-klick-ring,
  .sr2-hg img {
    animation: none !important;
  }
}