:root{
  --gap: 0px; /* RUNDE (Nutzer-Rueckmeldung): kein Pixelabstand mehr im Raster */
  --bg: #000; /* RUNDE (Nutzer-Rueckmeldung): reines Schwarz statt Anthrazit, passend zur Grossansicht */
  --ink: #f5f5f5; /* helle Schrift fuer dunklen Hintergrund */
  --bar-h: 30px; /* Hoehe der schwarzen Icon-Schutzleiste unten im Viewer - RUNDE 4 (Nutzer-Rueckmeldung): von 24 auf 30px vergroessert, damit das (gleichzeitig leicht verkleinerte) Info-Icon oben/unten wieder sichtbaren Abstand hat */
}
*{ box-sizing: border-box; }
html,body{
  margin:0; padding:0;
  background: var(--bg);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;
}

/* ---------- Zurueck-Link (Sicherheitsnetz, siehe HTML-Kommentar) ---------- */
/* RUNDE 3 (Nutzer-Rueckmeldung): auch in der mobilen Balken-Variante nur
   noch das Pfeil-Icon, kein "tricky triet"-Text mehr - einheitliche
   Formsprache in beiden Varianten. Die Kopfzeile bleibt hier zusaetzlich
   permanent am oberen Bildschirmrand fixiert (verschwindet beim Scrollen
   nicht mehr) - gewohntere App-/Browser-Konvention fuer einen
   permanenten Zurueck-Button. #grid bekommt dafuer einen passenden
   oberen Abstand, inkl. env(safe-area-inset-top) fuer Geraete mit
   Notch/Dynamic Island, damit nichts unter der Leiste verschwindet.

   RUNDE 2 (Nutzer-Rueckmeldung): auf breiten Fenstern gibt es genug
   schwarzen Freiraum links des Rasters, dass der Link dort als reines
   Pfeil-Icon (ohne Text/Pille) schweben kann - dezenter und ruhiger als
   die vorherige Textpille. "tricky triet" bleibt als Text-Inhalt des
   Links im DOM erhalten (aria-label uebernimmt sowieso die zugaengliche
   Bezeichnung, siehe HTML), wird hier aber IMMER unsichtbar gemacht
   (font-size:0/color:transparent) und stattdessen durch ein 16x22px
   grafisches Pfeil-Dreieck ersetzt (::before, per clip-path - gleiche
   Technik/Formsprache wie .nav-btn in der Grossansicht). Position auf
   breiten Fenstern: fix 30px vom oberen Fensterrand, und fix 30px von
   der linken Rasterkante entfernt (= Kundenvorgabe). Die Rasterkante
   liegt bei zentriertem Grid (max-width:935px, margin:0 auto) bei
   50vw - 467.5px; "right" (Abstand vom Icon zur RECHTEN Fensterkante)
   ergibt sich daraus als 100vw - (50vw - 467.5px - 30px) = 50vw + 497.5px. */
.back-link{
  position:fixed; top:30px; right: calc(50vw + 497.5px); z-index:50;
  display:flex; align-items:center; justify-content:center;
  width:11px; height:15px;
  color:transparent;
  font-size:0;
  text-decoration:none;
  opacity:.75;
}
.back-link:hover{ opacity:1; }
.back-link::before{
  content:"";
  display:block;
  width:11px; height:15px;
  background:#fff;
  clip-path: polygon(100% 0%, 100% 100%, 0% 50%);
}

/* RUNDE 2 (Nutzer-Rueckmeldung): der feste 30px-Abstand zur Rasterkante
   ist absichtlich groesser als das geforderte Mindestmass - der wirklich
   knappe Abstand ist der zum BILDSCHIRMRAND, der mit schrumpfendem
   Fenster immer kleiner wird, waehrend die Rasterkante konstant 30px
   entfernt bleibt. Schwellenwert so berechnet, dass dieser
   Bildschirmrand-Abstand nie unter die geforderten 20px faellt:
   noetiger freier Bereich = 30px (Rasterabstand) + 16px (Pfeilbreite)
   + 20px (Mindestabstand zum Bildschirmrand) = 66px. Freier
   Schwarzbereich = (Fensterbreite - 935px)/2 (Grid max-width);
   66px <= (vw-935px)/2  =>  vw >= 935 + 132 = 1067px. Unterhalb dieser
   Schwelle (inkl. dem Bereich, wo das Raster bereits randfuellend ist)
   wechselt der Link stattdessen in die fixierte Kopfzeile ueber dem
   Raster (RUNDE 3: siehe Kommentar oben). */
@media (max-width: 1066px){
  .back-link{
    top:0; left:0; right:auto;
    width:100%; height:auto;
    justify-content:flex-start;
    padding: 16px;
    padding-top: calc(16px + env(safe-area-inset-top));
    background:#000;
    opacity:1;
  }
  /* 54px = 16px+16px Balken-Padding + 22px Pfeil-Hoehe (siehe .back-link
     oben) - haelt das Raster exakt unter der fixierten Kopfzeile frei. */
  #grid{
    margin-top: calc(54px + env(safe-area-inset-top));
  }
}

/* ---------- Grid ---------- */
.grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap);
  max-width: 935px;
  margin: 0 auto;
}
.cell{
  position:relative;
  aspect-ratio: 1 / 1;
  overflow:hidden;
  background:#141414; /* dunkler Platzhalter (Ladezustand), dezent erkennbar auf reinem Schwarz */
  cursor:pointer;
}
.cell img{
  width:100%; height:100%;
  object-fit:cover;
  display:block;
  user-select:none;
  -webkit-user-drag:none;
  transition: transform .45s cubic-bezier(.2,.7,.3,1), filter .45s ease;
}
.cell .icon{
  position:absolute;
  top:6px; right:6px;
  width:16px; height:16px;
  filter: drop-shadow(0 0 1.5px rgba(0,0,0,.85)) drop-shadow(0 0 3px rgba(0,0,0,.5));
  pointer-events:none;
  transition: opacity .3s ease;
}

/* Sehr dezente Hover-Animation, NUR auf Geraeten mit echtem Maus-Hover (Desktop) */
@media (hover:hover) and (pointer:fine){
  .cell:hover img{
    transform: scale(1.035);
    filter: brightness(1.04);
  }
}

/* ---------- Viewer ---------- */
.viewer{
  position:fixed; inset:0;
  background:#000;
  display:none;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  z-index:1000;
}
.viewer.open{ display:flex; }

.slides-viewport{
  width:100%; height:100%;
  overflow:hidden;
  position:relative;
}
.slides-track{
  display:flex;
  height:100%;
  transition: transform .28s ease;
  will-change: transform;
  touch-action: none; /* verhindert, dass der Browser das Swipe-Gesture nach dem ersten Mal an die native Seiten-Navigation/Scroll abgibt */
}
.slides-track.dragging{ transition:none; }
.slide{
  flex:0 0 100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
}
.slide img, .slide video{
  max-width:100%;
  max-height:100%;
  width:auto; height:auto;
  object-fit:contain;
  user-select:none;
  -webkit-user-drag:none;
  /* Zusaetzlich zu touch-action:none auf .slides-track: manche mobilen
     Browser behandeln Touch-Gesten auf <video>/<img>-Kindelementen nicht
     konsequent wie auf dem Elternelement, deshalb hier explizit wiederholt -
     verhindert, dass das Wischen zwischen Slides nach dem 2. Slide steckenbleibt. */
  touch-action: none;
}

/* RUNDE 4 (Nutzer-Rueckmeldung): X grafisch konstruiert (zwei gekreuzte
   Balken per ::before/::after) statt Schriftzeichen "×" - dadurch exakt
   positionierbar/zentrierbar, statt von Font-Metriken abzuhaengen. Farbe
   jetzt einheitlich mit Pfeilen/Ton-Icon (#b0b0b0, vorher weiss).
   Ausrichtung: die 36px breite Buttonflaeche sitzt bei right:18px, ihr
   Mittelpunkt liegt also 18+18=36px von der rechten Bildschirmkante
   entfernt - exakt derselbe Abstand wie bei .nav-next weiter unten
   (14px Rand + 22px halbe Buttonbreite = 36px), sodass X und Pfeil nach
   rechts auf derselben vertikalen Linie liegen (Kundenvorgabe, per
   Vergleichslayout mit farbiger Hilfslinie gezeigt). */
.close-btn{
  position:absolute; top:10px; right:18px;
  z-index:1010;
  width:36px; height:36px;
  display:flex; align-items:center; justify-content:center;
  background:none; border:none;
  cursor:pointer;
  padding:0;
  opacity:.85;
}
.close-btn:hover{ opacity:1; }
.close-btn::before, .close-btn::after{
  content:"";
  position:absolute;
  width:16px; height:2px;
  background:#b0b0b0;
}
.close-btn::before{ transform: rotate(45deg); }
.close-btn::after{ transform: rotate(-45deg); }

/* RUNDE 4 (Nutzer-Rueckmeldung): statt rechteckiger Flaeche mit
   abgerundeten Ecken (nur zur Bildschirmkante hin eckig) jetzt runde,
   von der Kante abgeruecke Flaechen (wie im Vergleichslayout) - 44x44px
   Kreis (border-radius:50%), 14px Rand zur jeweiligen Bildschirmkante
   (= derselbe Randwert wie beim X oben). Mittelpunkt-Abstand zur Kante:
   14 + 22 (halbe Breite) = 36px - identisch mit .close-btn oben, siehe
   Kommentar dort. */
.nav-btn{
  position:absolute; top:50%; transform:translateY(-50%);
  z-index:1010;
  background: rgba(0,0,0,.25);
  border:none;
  width:44px; height:44px;
  border-radius:50%;
  cursor:pointer;
  opacity:.7;
  display:flex; align-items:center; justify-content:center;
}
.nav-btn:hover{ opacity:1; }
.nav-prev{ left:14px; }
.nav-next{ right:14px; }
/* RUNDE (Nutzer-Rueckmeldung): statt der duennen "<"/">"-Schriftzeichen jetzt
   echte ausgefuellte Dreiecke - dezent und klein (11x15px), rein aus CSS
   (::before + clip-path) statt zusaetzlicher SVG-Markup-Aenderungen im
   HTML. RUNDE 4: Farbe auf #b0b0b0 vereinheitlicht (vorher weiss), wie
   X und Ton-Icon. */
.nav-btn::before{
  content:"";
  display:block;
  width:11px; height:15px;
  background:#b0b0b0;
}
.nav-prev::before{ clip-path: polygon(100% 0%, 100% 100%, 0% 50%); }
.nav-next::before{ clip-path: polygon(0% 0%, 0% 100%, 100% 50%); }
/* RUNDE (Nutzer-Rueckmeldung): Pfeil nur zeigen, wenn in diese Richtung
   auch ein weiterer Slide existiert - am ersten Slide fehlt der linke, am
   letzten der rechte Pfeil. Wird in app.js (positionTrack) per Klasse
   "nav-hidden" gesetzt/entfernt, abhaengig von currentSlide. */
.nav-btn.nav-hidden{ visibility:hidden; pointer-events:none; }
.viewer.single-slide .nav-btn,
.viewer.single-slide .dots{ display:none; }

.dots{
  position:absolute;
  bottom: calc(var(--bar-h) + env(safe-area-inset-bottom) + 12px); left:50%; transform:translateX(-50%);
  display:flex; gap:6px;
  z-index:1010;
}
.dot{
  width:5px; height:5px;
  border-radius:50%;
  background: rgba(255,255,255,.35);
}
.dot.active{ background: rgba(255,255,255,.95); }

/* Transparentes Feld ueber Video-Slides: faengt Zeiger-Events ab, bevor
   sie das <video>-Element erreichen und dort ggf. von nativen mobilen
   Video-Gestenerkennern (Doppeltipp-Vollbild etc.) uebernommen werden
   koennten. Muss ueber dem Video liegen (hoeherer z-index), aber unter
   der unteren Leiste, damit deren Icons weiterhin klickbar bleiben. */
.touch-shield{
  position:absolute; inset:0;
  z-index:2;
  background:transparent;
  touch-action:none;
  -webkit-touch-callout:none;
}

/* Schmale, komplett schwarze Leiste am unteren Rand des Viewers - dient als
   fester "Schutzbereich" fuer die Info- und Ton-Icons. Bei Videos/Bildern,
   die den Viewer wegen ihres Formats ohnehin nicht randfuellend ausfuellen,
   liegt sie unsichtbar auf dem schwarzen Hintergrund; bei randfuellenden
   Hochformat-Bildern verhindert sie, dass die Icons mit hellen/weissen
   Bildinhalten kollidieren oder darin untergehen. Liegt fest in der Viewer-
   Chrome (nicht im Slides-Track), bewegt sich also nicht beim Wischen. */
.bottom-bar{
  position:absolute; left:0; right:0; bottom:0;
  /* Die Icon-Reihe selbst bleibt immer exakt --bar-h hoch; auf Geraeten mit
     unterem Safe-Area-Inset (z.B. Home-Button-lose iPhones) verlaengert
     sich die schwarze Flaeche zusaetzlich nach unten, statt die Icon-Reihe
     zusammenzudruecken. */
  height: calc(var(--bar-h) + env(safe-area-inset-bottom));
  background:#000;
  z-index:1010;
  display:none;
}
.bottom-bar.shown{ display:block; }

.mute-btn, .caption-btn{
  position:absolute; top:0; height: var(--bar-h);
  display:flex; align-items:center; justify-content:center;
  background:none; border:none;
  color:#b0b0b0; /* RUNDE 4 (Nutzer-Rueckmeldung): einheitlich mit X/Pfeilen (vorher weiss) */
  cursor:pointer;
  padding:0;
}
.mute-btn{
  right:10px;
  width:26px;
  display:none;
}
.mute-btn.shown{ display:flex; }
.mute-btn svg{ width:19px; height:19px; display:block; }

.caption-btn{
  left:14px;
  width:20px;
  opacity:.9;
  display:none;
}
/* RUNDE 3 (Nutzer-Rueckmeldung): finale, vom Kunden selbst gestaltete
   Info-Icon-Vorlage (info-button.svg) 1:1 uebernommen, statt der
   vorherigen Naeherung (Kreis-Umriss + Punkt + Steg) - passt jetzt im
   Stil besser zu den anderen grafisch konstruierten Icons (kein
   Kreis-Rahmen mehr). Nur width gesetzt, height:auto uebernimmt das
   Original-Seitenverhaeltnis aus dem viewBox (25.879 x 39.939) exakt.
   Groesse (14px) aus einer Vergleichs-Vorlage des Kunden abgeleitet, die
   das Icon im Verhaeltnis zum Pfeil-Icon der Lightbox-Navigation
   (.nav-btn, 11x15px) zeigt. */
/* RUNDE 4 (Nutzer-Rueckmeldung): Icon war zu gross fuer die Leiste (kein
   Abstand mehr oben/unten) - von 14px auf 11px verkleinert (zusaetzlich
   zur oben vergroesserten --bar-h). */
.caption-btn svg{ width:auto; height:15px; display:block; }
.caption-btn.shown{ display:flex; }

.caption-panel{
  position:absolute;
  left:0; right:0; bottom: calc(var(--bar-h) + env(safe-area-inset-bottom));
  max-height:45%;
  overflow-y:auto;
  background: rgba(0,0,0,.72);
  color:#fff;
  font-size:13px;
  line-height:1.5;
  padding:0 16px;
  max-width:600px;
  margin:0 auto;
  transform: translateY(100%);
  transition: transform .22s ease;
  z-index:1008;
  white-space: pre-wrap;
}
.caption-panel.shown{
  transform: translateY(0);
  padding:14px 16px;
}

/* RUNDE 4: die vormalige Verkleinerung auf kleinen Screens (font-size)
   entfaellt - das X ist jetzt grafisch konstruiert (feste Pixelgroesse,
   nicht mehr fontabhaengig), siehe .close-btn oben. */

/* Mobile: keine Pfeile einblenden, Navigation nur per Swipe.
   "Mobil" = kein echter Hover verfuegbar (Touch-Geraet), unabhaengig von der Fensterbreite. */
@media (hover:none), (pointer:coarse){
  .nav-btn{ display:none; }
}