/* ============================================================
   lightbox.css – Generische, wiederverwendbare Lightbox (SSOT)
   ------------------------------------------------------------
   EINE Lightbox für die ganze Website. Ursprünglich aus der /einblicke/
   Galerie extrahiert und entkoppelt (.bm-lightbox-*), damit sie auf JEDER
   Seite per `data-lightbox`-Trigger + Overlay-Partial + lightbox.js läuft
   (Galerie, Kontakt-Portraits, künftige Seiten).

   Verwendung:
     1. Overlay einmal rendern:  {% import 'partials/lightbox.html.jinja' … %}
                                 {{ lightbox_overlay(page.lang) }}
     2. Trigger auszeichnen:     <button data-lightbox data-lightbox-group="x">
                                   <img …>                       ← Thumbnail
                                   <span data-lightbox-full>…</span>  ← Hi-Res <picture>
                                   <span data-lightbox-meta>…</span>  ← Rich-HTML (optional)
                                 </button>
                                 – ODER simple Textmeta via
                                   data-lightbox-title / -caption / -badge
     3. CSS + JS einbinden:      lightbox.css (head_extra) + lightbox.js (scripts_extra)

   Bühne (--lightbox-*) und Rahmen = SSOT in variables.css.
   ============================================================ */

/* ── Trigger-Affordanz: „hier öffnet ein Tap/Klick etwas" (SSOT) ─────────────
   EIN Badge-Rezept für JEDEN `data-lightbox`-Trigger — Galerie-Kachel,
   Kontakt-Portrait, Spec-Shot, Maschinen-Karte. Vorher lag dasselbe Rezept
   VIER MAL hand-kopiert in vier Stylesheets, und genau eine Kopie war
   abgedriftet: `.contact-person-card__zoom` (main.css) stand unter
   `@media (hover: none)` auf `display: none` — auf dem Smartphone signalisierte
   an den Kontaktkarten also NICHTS mehr, dass sie sich antippen lassen
   (gemeldet 2026-08-04, wortgleicher Befund wie zuvor auf /einblicke/).
   Deshalb liegt die Regel jetzt an EINER Stelle: eine fünfte Fläche erbt das
   Verhalten, statt es abzuschreiben — und kann es nicht halb abschreiben.

   Warum HIER: dieses Stylesheet ist die SSOT dafür, wie ein Trigger ausgezeichnet
   wird, und build_site setzt `_needs_lightbox` datengetrieben auf JEDER Seite,
   die einen Trigger rendert. Ein Badge ohne lightbox.css kann es also nicht geben.

   Pro Fläche variiert nur die GEOMETRIE, und zwar über Tokens statt über eine
   zweite Kopie der Regel:  --media-zoom-size · --media-zoom-icon-size ·
   --media-zoom-inset · --media-zoom-layer.
   Die Shared-Regel deklariert diese Tokens BEWUSST NICHT (nur `var(…, default)`):
   sie wird nach main.css/contact-cta.css/service-detail.css geladen, würde sie
   die Tokens selbst setzen, gewänne bei gleicher Spezifität die Ladereihenfolge
   gegen die Komponenten-Absicht — und der Verlierer wäre still.

   Touch (`hover: none`): das Badge steht DAUERHAFT. Dort gibt es kein Hover, das
   eine Affordanz aufdecken könnte — das Badge ist die einzige Anzeige.
   Bewacht von tests/styling/test_touch_affordance_ssot.py. */
.media-zoom-badge {
  position: absolute;
  top: var(--media-zoom-inset, var(--space-2));
  right: var(--media-zoom-inset, var(--space-2));
  z-index: var(--media-zoom-layer, 2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--media-zoom-size, 2rem);
  height: var(--media-zoom-size, 2rem);
  padding: 0;
  border-radius: var(--badge-radius);
  color: var(--on-dark-text-high);
  background: var(--scrim-media-chip-strong);
  backdrop-filter: blur(var(--blur-sm));
  border: 1px solid var(--on-dark-border-strong);
  /* Deko-Span: darf den Tap NICHT abfangen — der Trigger liegt darunter. */
  pointer-events: none;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity var(--glow-speed) ease, transform var(--glow-speed) ease,
              background var(--glow-speed) ease, color var(--glow-speed) ease;
}

/* …außer das Badge IST der Trigger (Maschinen-Hub: <button data-lightbox>).
   Element+Klasse (0,1,1) schlägt die Grundregel unabhängig davon, in welcher
   Reihenfolge die Komponenten-Stylesheets geladen werden. */
button.media-zoom-badge,
a.media-zoom-badge {
  pointer-events: auto;
  cursor: zoom-in;
}

.media-zoom-badge svg {
  width: var(--media-zoom-icon-size, 1rem);
  height: var(--media-zoom-icon-size, 1rem);
}

/* Aufdecken am Trigger: `[data-lightbox]` ist die gemeinsame Auszeichnung —
   keine Fläche braucht dafür noch eine eigene Regel. Hover gegated, weil auf
   Touch der Finger der Scroll ist (test_hover_touch_gating.py); Tastatur über
   :focus-visible, und `:not([data-focus-quiet])` hält den WebKit-Fix aus der
   Galerie intakt (Skript-Fokus der Lightbox darf den Ring nicht zünden). */
@media (hover: hover) {
  [data-lightbox]:hover .media-zoom-badge,
  button.media-zoom-badge[data-lightbox]:hover {
    opacity: 1;
    transform: none;
  }
}

[data-lightbox]:focus-visible:not([data-focus-quiet]) .media-zoom-badge,
button.media-zoom-badge[data-lightbox]:focus-visible:not([data-focus-quiet]) {
  opacity: 1;
  transform: none;
}

@media (hover: none) {
  .media-zoom-badge {
    opacity: 1;
    transform: none;
  }
}

/* Reduced Motion: das Badge darf weiter ERSCHEINEN (es ist die Affordanz, kein
   Schmuck) — nur das Hereinschieben entfällt. Es einzublenden ist die Information,
   die 4px Weg sind die Animation. */
@media (prefers-reduced-motion: reduce) {
  .media-zoom-badge {
    transform: none;
    transition: opacity var(--glow-speed) ease;
  }
}

/* Druck: eine Affordanz für eine Geste, die es auf Papier nicht gibt — der dunkle
   Chip läge nur über dem Foto. Gleiche Familie wie die Chrome-Ausblendung im
   @media-print-Block von main.css, hier aber bei der Komponente, die sie besitzt. */
@media print {
  .media-zoom-badge {
    display: none !important;
  }
}

body.bm-lightbox-open {
  overflow: hidden;
}

.bm-lightbox {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: none;

  /* Bühnen-BREITE = Höhen-Budget × Seitenverhältnis. Bewusst HIER abgeleitet und
     nicht in variables.css: `.is-rich-meta` (unten) überschreibt
     --lightbox-stage-h auf DIESEM Element. Ein var() INNERHALB einer Custom
     Property wird beim DEKLARIERENDEN Element ersetzt — auf :root abgeleitet
     würde die Breite also den :root-Wert einbacken und die Kontakt-Variante
     stillschweigend ignorieren. */
  --lightbox-stage-w: calc(var(--lightbox-stage-h) *
                           var(--lightbox-aspect-w) / var(--lightbox-aspect-h));
}

.bm-lightbox.is-open {
  display: grid;
  place-items: center;
}

.bm-lightbox-backdrop {
  position: absolute;
  inset: 0;
  background: rgb(var(--c-scrim) / 0.7);
  backdrop-filter: blur(var(--blur-md)) saturate(0.9);
}

.bm-lightbox-panel {
  position: relative;
  z-index: 2;
  /* Das Panel umschließt die Bühne exakt, damit die Pfeile die BILDKANTE treffen
     statt an einer festen Box zu kleben — die Breite wird dafür aber BERECHNET,
     nicht vom Inhalt erfragt.
     Vorher stand hier `width: max-content`. Die einzige nennenswerte Breite im
     Inhalt entstand rückwärts (feste Bühnen-HÖHE → aspect-ratio → Breite).
     WebKit (Safari/iOS) speist eine so transferierte Breite NICHT in den
     max-content-Beitrag ein; übrig blieb nur die Meta mit `width: 0` → das Panel
     kollabierte auf sein Padding und `max-width: 100%` presste die Bühne auf 0 px
     bei voller Höhe: der senkrechte Streifen. Jetzt fließt die Größe top-down aus
     denselben Tokens — keine Zirkularität, keine Engine-Annahme. */
  width: calc(var(--lightbox-stage-w)
              + 2 * var(--lightbox-frame-pad)
              + 2 * var(--lightbox-panel-pad));
  max-width: min(97vw, var(--lightbox-max-w));
  max-height: 96vh;
  padding: var(--lightbox-panel-pad);
}

.bm-lightbox-figure {
  margin: 0 auto;
  display: grid;
  gap: var(--space-3);
  width: 100%;
  max-width: 100%;
  background: linear-gradient(180deg, rgb(var(--c-scrim) / 0.84), rgb(var(--c-scrim) / 0.92));
  border: 1px solid var(--lightbox-frame-border);
  border-radius: var(--lightbox-frame-radius);
  padding: var(--lightbox-frame-pad);
  box-shadow: var(--lightbox-frame-shadow);
}

/* Uniform stage: EVERY image gets the exact same 3:2 box, sized as large as fits.
   object-fit keeps the image fully visible and consistently sized; portraits
   pillarbox cleanly. Alle Bilder sind gleich groß (uniform), unabhängig von der
   Meta-Textmenge — der Kontext (Galerie vs. Kontakt) setzt --lightbox-stage-h,
   die Kontakt-Variante (.is-rich-meta, unten) reserviert mehr Platz für die
   größere Visitenkarten-Meta, bleibt aber selbst wieder fix = uniform. */
.bm-lightbox-picture-wrap {
  /* Breite kommt vom (jetzt definiten) Rahmen, die HÖHE folgt über das
     Seitenverhältnis. Genau diese Richtung — außen nach innen — beherrscht jede
     Engine; die frühere Gegenrichtung (feste Höhe → Breite → max-content des
     Panels) tat es nicht (siehe .bm-lightbox-panel). */
  width: 100%;
  aspect-ratio: var(--lightbox-aspect);
  position: relative;
  background: rgb(var(--c-scrim) / 0.94);
  border-radius: var(--lightbox-img-radius);
  overflow: hidden;
}

/* Loading spinner overlay */
.bm-lightbox-picture-wrap::after {
  content: "";
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgb(var(--c-scrim) / 0.4);
  backdrop-filter: blur(var(--blur-xs));
  z-index: 2;
}

.bm-lightbox-picture-wrap.is-loading::after {
  display: flex;
  animation: bm-lightbox-spinner-pulse 1.8s ease-in-out infinite;
}

@keyframes bm-lightbox-spinner-pulse {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 1; }
}

/* Loading spinner dot indicator.
   Zentrierung über `inset: 0; margin: auto` statt über die Flex-Ausrichtung der
   Bühne: die Static Position eines absolut positionierten Kindes aus
   align-/justify-content herzuleiten ist genau wieder eine Engine-Annahme (und
   die Bühne ist jetzt ohnehin kein Flex-Container mehr). `margin:auto` zentriert
   eine Box bekannter Größe deterministisch und lässt `transform` frei — die
   Bounce-Animation skaliert weiter. */
.bm-lightbox-picture-wrap.is-loading::before {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: rgb(var(--c-red-light) / 0.8);
  z-index: 3;
  box-shadow: 0 0 24px rgb(var(--c-red-light) / 0.5);
  animation: bm-lightbox-spinner-bounce 0.8s ease-in-out infinite;
}

@keyframes bm-lightbox-spinner-bounce {
  0%, 100% { transform: scale(1); opacity: 0.8; }
  50% { transform: scale(1.3); opacity: 1; }
}

.bm-lightbox-picture-wrap picture {
  display: contents;
}

/* Bühneninhalt füllt die Bühne DETERMINISTISCH über inset:0 statt über eine
   Prozent-Höhe. Eine %-Höhe müsste sich gegen eine Elternhöhe auflösen, die
   selbst erst aus `aspect-ratio` entsteht — wieder eine Engine-Annahme, und
   genau diese Klasse Annahme war die Ursache des Streifen-Bugs. inset:0 braucht
   keine. Gilt für <picture>-Bilder (picture ist display:contents), das von
   lightbox.js erzeugte Fallback-<img> und den Monogramm-Platzhalter. */
.bm-lightbox-picture-wrap > img,
.bm-lightbox-picture-wrap picture > img,
.bm-lightbox-picture-wrap .bm-lightbox-monogram {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.bm-lightbox-picture-wrap img {
  display: block;
  object-fit: contain;
  border-radius: var(--lightbox-img-radius);
  opacity: 0;
  transition: opacity 320ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.bm-lightbox-picture-wrap.is-loaded img,
.bm-lightbox-picture-wrap.is-loaded .bm-lightbox-img {
  opacity: 1;
}

/* Monogramm-Platzhalter auf der Bühne (Personen ohne Foto → wie ein echtes Bild
   behandelt): füllt die 3:2-Bühne in Markenoptik, große Initialen. */
.bm-lightbox-monogram {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: var(--font-weight-bold);
  font-size: clamp(4rem, 22vh, 10rem);
  letter-spacing: var(--tracking-snug);
  line-height: 1;
  color: var(--color-accent-text);
  background:
    radial-gradient(120% 120% at 30% 20%, rgb(var(--c-ember) / 0.18), transparent 60%),
    var(--color-bg-alt);
}

/* ── Meta-Bereich (Counter + per-Item-Body) ──────────────────────────────── */
.bm-lightbox-meta {
  display: grid;
  gap: var(--space-2);
  color: var(--on-dark-text);
  /* Kein `width: 0; min-width: 100%` mehr: dieser Kniff existierte nur, damit eine
     lange Bildunterschrift den max-content-Rahmen nicht breiter zog als das Bild.
     Der Rahmen ist jetzt unabhängig vom Inhalt bemessen (siehe
     .bm-lightbox-panel) — die Meta kann also einfach die Spalte füllen. `min-width:0`
     erlaubt dem Grid-Item, unter seine Wortbreite zu schrumpfen, statt die Spalte
     aufzudrücken. */
  min-width: 0;
}

.bm-lightbox-counter {
  justify-self: start;
  font-size: var(--text-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--on-dark-text-soft);
}

/* Per-Item-Inhalt: von der Engine gefüllt – entweder Text (title/caption/badge)
   oder geklontes Rich-HTML (data-lightbox-meta, z. B. Kontakt-Visitenkarte). */
.bm-lightbox-body {
  display: grid;
  gap: var(--space-1);
}

/* ── Text-Meta (Galerie: badge / title / caption) ────────────────────────── */
.bm-lightbox-title,
.bm-lightbox-caption {
  overflow-wrap: anywhere;
  /* Bounded line count keeps the meta block's height predictable, so the stage
     budget (--lightbox-stage-h) reliably fits stage + caption inside 96vh. */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  -webkit-line-clamp: 2;
}

.bm-lightbox-badge {
  justify-self: start;
  font-size: var(--text-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  padding: 0.28rem 0.58rem;
  border-radius: var(--badge-radius);
  border: 1px solid var(--on-dark-border-glass);
  background: var(--on-dark-surface-glass);
}

.bm-lightbox-title {
  font-size: var(--text-base);
  line-height: 1.35;
}

.bm-lightbox-caption {
  font-size: var(--text-sm);
  color: var(--on-dark-text-soft);
}

/* ── Rich-Meta (Kontakt-Visitenkarte im Popup) ───────────────────────────────
   Dezent-edel: dunkler Frame. Abteilungs-Tag = grünes SSOT-Status-Chip
   (status-tag--open, pulsierender Punkt) → signalisiert „erreichbarer
   Ansprechpartner" (statt aggressivem Rot). Teaser mit SSOT-Icon qualifiziert
   den Anrufer vor → weniger Fehlanrufe. */
/* Kontakt-Popup: eigene, FESTE (uniforme) Bühnenhöhe. Reserviert mehr Platz als
   die Galerie für die größere Visitenkarten-Meta (Tag/Name/Rolle/Teaser/Pills),
   damit nichts abgeschnitten wird — bleibt aber selbst fix, also alle Bilder
   gleich groß. Die Engine (lightbox.js) setzt .is-rich-meta bei Rich-HTML-Meta. */
.bm-lightbox.is-rich-meta {
  --lightbox-stage-h: min(
    72vh,
    calc(96vh - 19rem),
    calc((97vw - 3rem) * var(--lightbox-aspect-h) / var(--lightbox-aspect-w)),
    calc(var(--lightbox-max-w) * var(--lightbox-aspect-h) / var(--lightbox-aspect-w))
  );
}

.bm-lightbox-contact {
  display: grid;
  gap: var(--space-2);
}

/* Grünes Status-Chip (SSOT .status-tag--open) im Grid links andocken statt
   auf volle Breite zu strecken. Nur Layout — Optik kommt aus main.css. */
.bm-lightbox-contact .status-tag {
  justify-self: start;
}

.bm-lightbox-contact__name {
  font-size: var(--text-xl);
  font-weight: var(--font-weight-semibold);
  line-height: 1.2;
  color: var(--on-dark-text);
}

.bm-lightbox-contact__role {
  font-size: var(--text-sm);
  font-weight: var(--font-weight-medium);
  color: var(--on-dark-text-soft);
  margin-top: calc(-1 * var(--space-1));
}

/* Teaser: kurzer Qualifizierungs-Satz, geführt von einem SSOT-Icon. */
.bm-lightbox-contact__teaser {
  display: flex;
  align-items: flex-start;
  gap: 0.55em;
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--on-dark-text-high);
  max-width: 46ch;
}
/* IMMER exakt 2 Zeilen: clamp deckelt nach oben, min-height reserviert nach unten
   (auch bei 1-zeiligem Teaser). Da alle übrigen Felder (Tag/Name/Rolle/Pills)
   konstant hoch sind, wird damit die Meta – und somit das GANZE Popup-Fenster –
   für jede Person exakt gleich groß. */
.bm-lightbox-contact__teaser > span {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 3em; /* 2 Zeilen × line-height 1.5 */
}
.bm-lightbox-contact__teaser-icon {
  width: 1.05rem;
  height: 1.05rem;
  flex-shrink: 0;
  margin-top: 0.14em;
  color: var(--color-success);
}

.bm-lightbox-contact__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-1);
}

/* Pill-Buttons: Telefon = primäre rote CTA (B2B-Anrufer), E-Mail = Glas-Pill. */
.bm-lightbox-contact__link {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-size: var(--text-sm);
  font-weight: var(--font-weight-semibold);
  padding: 0.55rem 0.9rem;
  border-radius: var(--badge-pill-radius);
  text-decoration: none;
  transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}
.bm-lightbox-contact__link svg {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
}

.bm-lightbox-contact__link--phone {
  color: var(--on-dark-text);
  background: var(--color-accent);
  border: 1px solid transparent;
}
.bm-lightbox-contact__link--phone:hover,
.bm-lightbox-contact__link--phone:focus-visible {
  background: var(--color-accent-light);
}

.bm-lightbox-contact__link--email {
  color: var(--on-dark-text);
  background: var(--on-dark-surface-glass);
  border: 1px solid var(--on-dark-border-glass);
}
.bm-lightbox-contact__link--email:hover,
.bm-lightbox-contact__link--email:focus-visible {
  background: rgb(var(--c-red-light) / 0.24);
  border-color: var(--on-dark-border-bright);
  color: var(--on-dark-text);
}

/* ── Schließen ───────────────────────────────────────────────────────────── */
.bm-lightbox-close {
  position: absolute;
  top: -0.4rem;
  right: -0.4rem;
  width: 2.45rem;
  height: 2.45rem;
  z-index: 3;
  border-radius: var(--radius-full);
  background: rgb(var(--c-scrim) / 0.84);
  border: 1px solid var(--on-dark-border-glass);
  box-shadow: 0 8px 24px rgb(var(--c-black) / 0.4);
  color: var(--on-dark-text);
}

.bm-lightbox-close span,
.bm-lightbox-close span::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 14px;
  height: 2px;
  background: currentColor;
  transform: translate(-50%, -50%) rotate(45deg);
  border-radius: 2px;
}

.bm-lightbox-close span::before {
  transform: translate(-50%, -50%) rotate(-90deg);
}

.bm-lightbox-close:hover,
.bm-lightbox-close:focus-visible {
  background: rgb(var(--c-red-light) / 0.26);
  border-color: var(--on-dark-border-bright);
}

/* Der Schliessen-Knopf sitzt bewusst auf der Panel-ECKE (top/right: -0.4rem).
   Der globale Fokusring (3 px Kontur + 3 px Offset) landete damit AUSSERHALB des
   Panels und malte über den Seitenkopf — gemessen 6,4 px Überstand nach oben und
   rechts. Innenliegender Ring: gleich gut sichtbar, aber immer im Knopf. */
.bm-lightbox-close:focus-visible {
  outline-offset: -3px;
}

/* Beim Öffnen per Finger/Maus setzt lightbox.js den Fokus per Skript in den
   Dialog; WebKit zeigt dafür sonst den Tastatur-Fokusring. Optik aus, Fokus
   bleibt (a11y) — dieselbe Mechanik wie bei den Galerie-Kacheln. */
.bm-lightbox-close[data-focus-quiet]:focus-visible {
  outline: none;
}

/* ── Blättern (prev/next) ────────────────────────────────────────────────── */
.bm-lightbox-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 2.7rem;
  height: 2.7rem;
  z-index: 3;
  border-radius: var(--radius-full);
  border: 1px solid var(--on-dark-border-glass);
  background: rgb(var(--c-scrim) / 0.78);
  color: var(--on-dark-text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 24px rgb(var(--c-black) / 0.35);
  transition: transform var(--transition-fast), background var(--transition-fast), border-color var(--transition-fast);
}

.bm-lightbox-nav--prev { left: -0.25rem; }
.bm-lightbox-nav--next { right: -0.25rem; }

/* Farbe/Rahmen dürfen ungegatet bleiben — sie verrücken nichts. Das 1-px-Anheben
   ist GEOMETRIE und gehört hinter das Hover-Gate: auf Touch klebt :hover nach dem
   Tap am Knopf, und der bliebe dann dauerhaft verschoben stehen
   (test_hover_touch_gating.py). Tastatur (:focus-visible) hebt weiter. */
.bm-lightbox-nav:hover,
.bm-lightbox-nav:focus-visible {
  background: rgb(var(--c-red-light) / 0.3);
  border-color: var(--on-dark-border-bright);
}

@media (hover: hover) {
  .bm-lightbox-nav:hover {
    transform: translateY(calc(-50% - 1px));
  }
}

.bm-lightbox-nav:focus-visible {
  transform: translateY(calc(-50% - 1px));
}

.bm-lightbox-nav:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* ── Mobil ───────────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
  /* Nur das Polster-Token drehen — Panelbreite UND Padding rechnen beide damit,
     können also nicht auseinanderlaufen. */
  .bm-lightbox {
    --lightbox-panel-pad: var(--space-2);
  }

  .bm-lightbox-panel {
    max-width: 96vw;
  }

  .bm-lightbox-nav {
    width: 2.35rem;
    height: 2.35rem;
  }

  .bm-lightbox-nav--prev { left: -0.15rem; }
  .bm-lightbox-nav--next { right: -0.15rem; }

  .bm-lightbox-title {
    font-size: var(--text-sm);
  }
}