/* bildstelle Lightbox, der eine Baustein.
   ---------------------------------------------------------------------------
   Gehoert zu bildstelle-lightbox.js. Beide zusammen sind der Standard fuer
   JEDE Bildergalerie. Nicht kopieren, nicht nachbauen, einbinden.

   Warum es diese Datei gibt: bis 2026-08-27 hatte jede Seite ihre eigene
   Lightbox, und jede konnte etwas anderes. Die eine hatte Mausrad, die andere
   Pinch-Zoom, die dritte nichts davon. Roman musste jedes Mal nachfassen.
   Seitdem gilt: Faehigkeiten kommen dazu, sie fallen nie weg.

   Voraussetzung: bildstelle-tokens.css ist vorher eingebunden. Fehlt es,
   greifen die Rueckfallwerte in var(...).
*/

.bs-lb{
  position:fixed; inset:0; z-index:9000;
  display:none; place-items:center;
  background:rgba(4,14,18,.94);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  opacity:0; transition:opacity .18s ease;
  touch-action:none;                 /* eigene Gesten, kein Browser-Zoom */
  overscroll-behavior:contain;       /* kein Weiterscrollen der Seite dahinter */
}
.bs-lb.auf{ display:grid; opacity:1 }

/* Die Buehne traegt das Bild und faengt die Gesten ab. */
.bs-lb-buehne{
  position:relative; width:100%; height:100%; box-sizing:border-box;
  display:grid; place-items:center; overflow:hidden;
  /* Oben Platz fuer Zaehler und Schliessen, unten fuer Motiv-Streifen UND
     Fusszeile. Der Platz ist IMMER reserviert, auch ohne Streifen: so ist
     jedes Bild gleich gross. Roman 2026-09-17: "Hauptbilder mit Thumbnails
     sind kleiner als ohne, bitte angleichen, auf jeden Fall groesser". */
  padding:40px 0 150px;
}

/* Frueher: mit Streifen max-height 58vh, ohne 76vh. Dadurch waren Bilder mit
   Varianten sichtbar kleiner. Ersetzt durch den festen Platz in .bs-lb-buehne. */

.bs-lb-bild{
  max-width:min(1280px,94vw); max-height:calc(100vh - 190px);   /* = Buehne minus padding */
  max-height:calc(100dvh - 190px);  /* dvh: sonst schneidet die iOS-Adressleiste unten ab (2026-09-25) */
  object-fit:contain; border-radius:var(--bs-radius,12px);
  box-shadow:0 24px 70px rgba(0,0,0,.55);
  transform-origin:0 0;
  will-change:transform,opacity;
  user-select:none; -webkit-user-drag:none;
}
/* Der Wechsel: das alte Bild geht zur Seite und blendet aus, das neue kommt
   von der Gegenseite herein. Die Richtung setzt das Skript. */
.bs-lb-bild.geht-links { opacity:0; transform:translateX(-38px) }
.bs-lb-bild.geht-rechts{ opacity:0; transform:translateX(38px) }
.bs-lb-bild.kommt{ transition:opacity .26s ease, transform .26s cubic-bezier(.16,1,.3,1) }

/* Beim Zoomen darf das Bild groesser als die Buehne werden. */
.bs-lb.gezoomt .bs-lb-bild{ max-width:none; max-height:none; cursor:grab }
/* Gezoomt rechnet das Skript die Lage selbst (translate ab der Buehnen-Ecke).
   Ohne absolute Lage zentriert das Grid das Bild zusaetzlich, der Versatz
   zaehlt doppelt und das Bild springt beim ersten Zoomschritt nach rechts
   unten. Roman 2026-09-17: "wird groesser, aber nicht zentriert". */
.bs-lb.gezoomt .bs-lb-bild{ position:absolute; left:0; top:0 }
.bs-lb.gezoomt.zieht .bs-lb-bild{ cursor:grabbing }

/* ---------------------------------------------------------------- Bedienung */
.bs-lb-knopf{
  position:absolute; border:0; cursor:pointer; color:#eef2f1;
  background:rgba(255,255,255,.10); border-radius:50%;
  display:grid; place-items:center; width:44px; height:44px;
  font-size:20px; line-height:1; transition:background .15s;
}
.bs-lb-knopf:hover{ background:rgba(255,255,255,.22) }
.bs-lb-knopf:focus-visible{ outline:2px solid var(--bs-green,#2cfe99); outline-offset:2px }
.bs-lb-zu  { top:18px; right:18px }
.bs-lb-vor { right:18px; top:50%; transform:translateY(-50%) }
.bs-lb-zur { left:18px;  top:50%; transform:translateY(-50%) }
.bs-lb-einzeln .bs-lb-vor,
.bs-lb-einzeln .bs-lb-zur{ display:none }

.bs-lb-zahl{
  position:absolute; top:22px; left:22px; font-size:12.5px; color:#9db2bb;
  font-variant-numeric:tabular-nums;
}

/* Werkzeuge unten rechts: einpassen, kleiner, groesser. */
.bs-lb-werkzeug{
  position:absolute; bottom:18px; right:18px; display:flex; gap:6px; z-index:2;
}
.bs-lb-werkzeug .bs-lb-knopf{ position:static; width:38px; height:38px; font-size:16px }

/* ------------------------------------------------------------------- Fusszeile */
.bs-lb-fuss{
  position:absolute; left:0; right:0; bottom:0;
  width:min(1280px,94vw); margin:0 auto; padding:16px 2px 22px; color:#eef2f1;
  display:grid; grid-template-columns:1fr auto; gap:18px; align-items:end;
  pointer-events:none;                /* nur die Kinder sind anklickbar */
}
.bs-lb-fuss > *{ pointer-events:auto }
.bs-lb-titel{ margin:0 0 3px; font-size:16px; font-weight:700 }
.bs-lb-meta { margin:0; font-size:13px; color:#9db2bb }
.bs-lb-quelle{
  display:inline-flex; align-items:center; gap:7px; white-space:nowrap;
  background:var(--bs-green,#2cfe99); color:var(--bs-on-green,#051922);
  text-decoration:none; font-weight:700; font-size:13.5px;
  padding:9px 17px; border-radius:var(--bs-radius-pill,999px);
}
.bs-lb-quelle:hover{ filter:brightness(1.08) }
/* Ohne quelle() setzt das Skript hidden. display:inline-flex oben schlaegt das
   hidden-Attribut, dann stand ein leerer gruener Knopf da (2026-09-17 gesehen). */
.bs-lb-quelle[hidden]{ display:none }
/* Punkt 23: Quelle plus weitere Links nebeneinander, rechtsbuendig an der Fusszeile */
.bs-lb-links{ display:flex; flex-wrap:wrap; gap:8px; justify-content:flex-end }

/* Die vertieften Motive: eine Streifenleiste, mittig und knapp unter dem
   Bild (Roman, 2026-08-28: "zentriert, knapp unter dem eigentlichen Bild").
   Die Oberkante setzt das Skript aus der Bildunterkante (streifenSetzen),
   weil das Bild in der Buehne zentriert ist und seine Hoehe je Motiv
   wechselt. "safe center" statt center ist Absicht: bei 49 Motiven schiebt
   center die Reihe ueber beide Raender hinaus und die ersten Knoepfe sind
   links im Nichts (2026-08-27 gemessen); darum der innere Block unten. */
.bs-lb-streifen{
  position:absolute; left:0; right:0; top:auto; bottom:86px; z-index:3;
  display:flex; overflow-x:auto; padding:0 18px 6px; scrollbar-width:none;
}
/* Innen ein Block mit margin:auto: schmaler als die Buehne steht er mittig,
   breiter laeuft er von links los und scrollt. Braucht kein "safe center",
   das aeltere Browser nicht kennen (Roman sah den Streifen links, 2026-08-28). */
.bs-lb-streifen-innen{ display:flex; gap:8px; flex-wrap:nowrap; margin:0 auto; flex:none }
.bs-lb-streifen::-webkit-scrollbar{ display:none }
.bs-lb-streifen[hidden]{ display:none }
.bs-lb-streifen button{
  flex:none; width:62px; height:44px; padding:0; cursor:pointer;
  border:2px solid transparent; border-radius:7px; overflow:hidden;
  background:rgba(255,255,255,.08);
}
.bs-lb-streifen button[aria-pressed="true"]{ border-color:var(--bs-green,#2cfe99) }
.bs-lb-streifen img{ width:100%; height:100%; object-fit:cover; display:block }
/* Punkt 22, seit 2026-10-15, fuer alle Seiten: gezoomt tritt der Streifen zurueck. Vorher lag er
   vor dem vergroesserten Bild (Roman: "wenn ich das Bild groesser mache, liegen die Thumbnails davor"). */
.bs-lb-streifen{ transition:opacity .2s }
.bs-lb.gezoomt .bs-lb-streifen{ opacity:0; pointer-events:none }
/* Punkt 21 (streifenUnten): zweizeilig, fest ueber der Fusszeile, die Buehne haelt den Platz frei,
   damit das eingepasste Bild nie darunter liegt. */
.bs-lb-streifen-unten .bs-lb-buehne{ padding:40px 0 232px }
.bs-lb-streifen-unten .bs-lb-bild{ max-height:calc(100vh - 272px); max-height:calc(100dvh - 272px) }
.bs-lb-streifen-unten .bs-lb-streifen{ top:auto; bottom:92px }
.bs-lb-streifen-unten .bs-lb-streifen-innen{ display:grid; grid-template-rows:repeat(2,44px); grid-auto-flow:column; grid-auto-columns:62px; gap:6px 8px }

/* ---------------------------------------------------------------- Handy */
@media (max-width:720px){
  .bs-lb-buehne{ padding:48px 0 190px }
  .bs-lb-bild{ max-width:96vw; max-height:calc(100vh - 238px); max-height:calc(100dvh - 238px) }
  .bs-lb-knopf{ width:44px; height:44px }   /* Tippziel 44 px (2026-09-25, vorher 38) */
  .bs-lb-werkzeug .bs-lb-knopf{ width:44px; height:44px }
  /* rechts Platz fuer die drei Zoom-Knoepfe, sonst liegen sie auf den Angaben (2026-09-17 gesehen) */
  .bs-lb-fuss{ grid-template-columns:1fr; gap:10px; padding-bottom:16px; padding-right:160px; box-sizing:border-box }
  .bs-lb-links{ justify-content:flex-start; gap:6px }
  .bs-lb-links .bs-lb-quelle{ padding:8px 13px; font-size:12.5px }
  .bs-lb-fuss{ padding-right:176px }
  .bs-lb-streifen{ bottom:120px }
  .bs-lb-streifen-unten .bs-lb-buehne{ padding:48px 0 268px }
  .bs-lb-streifen-unten .bs-lb-bild{ max-height:calc(100vh - 316px); max-height:calc(100dvh - 316px) }
  .bs-lb-streifen-unten .bs-lb-streifen{ bottom:116px }
  /* Der Greifer zeigt, dass man die Ansicht nach unten wegziehen kann. */
  .bs-lb-greifer{
    position:absolute; top:9px; left:50%; transform:translateX(-50%);
    width:44px; height:4px; border-radius:99px; background:rgba(255,255,255,.34);
  }
}
.bs-lb-greifer{ display:none }
@media (max-width:720px){ .bs-lb-greifer{ display:block } }

/* Nur fuer Screenreader sichtbar (Text im Symbol-Knopf) */
.bs-lb-sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap }

/* Der i-Knopf gibt es nur mit vollbild. [hidden] braucht die eigene Regel, weil
   .bs-lb-knopf display:grid setzt und das hidden-Attribut sonst verliert. */
.bs-lb-info-knopf[hidden]{ display:none }
/* Gilt fuer JEDEN Knopf der Ansicht (2026-10-30, Magics-Galerie): der Stift-Knopf (Punkt 24) bekam
   ohne markieren zwar hidden, stand aber trotzdem unten rechts, weil display:grid das Attribut schlug.
   Seit 2026-10-26 sah so jede Seite ohne Markieren einen Stift. Eine Regel fuer alle statt je Knopf. */
.bs-lb-knopf[hidden]{ display:none }
.bs-lb-info-knopf svg{ width:20px; height:20px }
.bs-lb-info-knopf .i-zu{ display:none }
.bs-lb.info-offen .bs-lb-info-knopf .i-info{ display:none }
.bs-lb.info-offen .bs-lb-info-knopf .i-zu{ display:block }

/* ===================================================================
   VOLLBILD (Einstellung vollbild:true, Punkte 14 bis 17, seit 2026-09-25)
   Erster Einsatz: Tunnel-Galerie am Handy. Roman: "das gehoert fullscreen
   aufbereitet", Titel und Pills hinter einen i-Knopf, Ansehen nur als Symbol.
   Spezifikation: Web-Effekt-Lab/_effekte/tunnel-galerie/mobil-fokus-spec-2026-09-25.md
   =================================================================== */
.bs-lb-vollbild{ background:rgb(4,14,18); backdrop-filter:none; -webkit-backdrop-filter:none }
.bs-lb-vollbild .bs-lb-buehne{ padding:0 }
.bs-lb-vollbild .bs-lb-bild{
  max-width:100vw; max-height:100vh; max-height:100dvh;
  border-radius:0; box-shadow:none;
}
/* Knoepfe liegen auf dem Motiv, deshalb eine dunkle Platte (10 % Weiss verschwindet auf hellen Bildern) */
.bs-lb-vollbild .bs-lb-knopf{
  width:44px; height:44px; background:rgba(4,14,18,.6); border:1px solid rgba(255,255,255,.18);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
}
.bs-lb-vollbild .bs-lb-knopf:hover{ background:rgba(4,14,18,.82) }
.bs-lb-vollbild .bs-lb-zu{ top:calc(16px + env(safe-area-inset-top)); right:calc(16px + env(safe-area-inset-right)) }
.bs-lb-vollbild .bs-lb-zahl{
  top:calc(24px + env(safe-area-inset-top)); left:calc(16px + env(safe-area-inset-left));
  padding:5px 10px; border-radius:99px; background:rgba(4,14,18,.6); line-height:18px;
}
.bs-lb-vollbild .bs-lb-greifer{ top:calc(8px + env(safe-area-inset-top)) }
.bs-lb-vollbild .bs-lb-info-knopf{ left:calc(16px + env(safe-area-inset-left)); bottom:calc(16px + env(safe-area-inset-bottom)); z-index:6 }
/* Die Fusszeile traegt im Vollbild nur noch den Quellen-Knopf als Symbol, unten rechts */
.bs-lb-vollbild .bs-lb-fuss{
  left:auto; right:calc(16px + env(safe-area-inset-right)); bottom:calc(16px + env(safe-area-inset-bottom));
  width:auto; margin:0; padding:0; display:block;
}
.bs-lb-vollbild .bs-lb-fuss > div:not(.bs-lb-links){ display:none }
.bs-lb-vollbild .bs-lb-quelle{
  width:44px; height:44px; padding:0; justify-content:center; border-radius:50%;
  background:rgba(4,14,18,.6); color:#eef2f1; border:1px solid rgba(255,255,255,.18);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
}
.bs-lb-vollbild .bs-lb-quelle svg{ width:20px; height:20px }
.bs-lb-vollbild .bs-lb-streifen{
  top:auto; bottom:calc(16px + env(safe-area-inset-bottom)); left:72px; right:72px; padding:0;
}
.bs-lb-vollbild .bs-lb-werkzeug{ bottom:calc(76px + env(safe-area-inset-bottom)); right:calc(16px + env(safe-area-inset-right)) }
/* Am Touch-Geraet: Pfeile und Zoom-Knoepfe unsichtbar, Wischen, zwei Finger und
   Doppeltipp ersetzen sie. Fuer Tastatur und Screenreader bleiben sie bedienbar
   (Faehigkeiten fallen nie weg), mit sichtbarem Fokus tauchen sie auf. */
@media (pointer:coarse){
  .bs-lb-vollbild .bs-lb-vor:not(:focus-visible),
  .bs-lb-vollbild .bs-lb-zur:not(:focus-visible),
  .bs-lb-vollbild .bs-lb-werkzeug:not(:focus-within){ opacity:0; pointer-events:none }
}
/* Einmal sanft pulsieren, damit der i-Knopf beim ersten Oeffnen auffaellt */
.bs-lb-info-knopf.pulsiert{ animation:bs-lb-puls 1.2s ease 2 }
@keyframes bs-lb-puls{ 0%{ box-shadow:0 0 0 0 rgba(44,254,153,.55) } 100%{ box-shadow:0 0 0 14px rgba(44,254,153,0) } }

/* Info offen: Abdunklung ueber dem Bild, Kasten unten links, alles andere weg */
.bs-lb-info{
  position:absolute; inset:0; z-index:5; background:rgba(4,14,18,.88);
  display:flex; align-items:flex-end; box-sizing:border-box; overflow-y:auto;
  padding:16px calc(16px + env(safe-area-inset-right)) calc(84px + env(safe-area-inset-bottom)) calc(16px + env(safe-area-inset-left));
  animation:bs-lb-info-ein .18s ease;
}
.bs-lb-info[hidden]{ display:none }
@keyframes bs-lb-info-ein{ from{ opacity:0 } to{ opacity:1 } }
.bs-lb-info-kasten{ width:88%; max-height:calc(100vh - 140px); max-height:calc(100dvh - 140px); overflow-y:auto; color:#eef2f1; outline:none }
.bs-lb-info-kasten h2{ margin:0; font-size:20px; line-height:1.35; font-weight:400; letter-spacing:-.01em; color:#eef2f1 }
.bs-lb-info-pills{ list-style:none; margin:14px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:6px }
.bs-lb-info-pills:empty{ display:none }
.bs-lb-info-pills li > *{
  display:inline-block; font-size:12px; line-height:16px; padding:4px 10px;
  border:1px solid rgba(255,255,255,.45); border-radius:var(--bs-radius-pill,999px);
  color:#eef2f1; text-decoration:none;
}
.bs-lb-info-link{
  margin-top:22px; display:inline-flex; align-items:center; gap:8px; height:44px; padding:0 20px;
  border-radius:var(--bs-radius-pill,999px); background:var(--bs-green,#2cfe99); color:var(--bs-on-green,#051922);
  font-size:15px; font-weight:500; text-decoration:none;
}
.bs-lb-info-link svg{ width:18px; height:18px }
.bs-lb-info-link[hidden]{ display:none }
.bs-lb.info-offen .bs-lb-zu, .bs-lb.info-offen .bs-lb-zahl, .bs-lb.info-offen .bs-lb-greifer,
.bs-lb.info-offen .bs-lb-fuss, .bs-lb.info-offen .bs-lb-streifen, .bs-lb.info-offen .bs-lb-vor,
.bs-lb.info-offen .bs-lb-zur, .bs-lb.info-offen .bs-lb-werkzeug{ visibility:hidden }

@media (prefers-reduced-motion:reduce){
  .bs-lb, .bs-lb-bild, .bs-lb-bild.kommt{ transition:none !important }
  .bs-lb-info, .bs-lb-info-knopf.pulsiert{ animation:none !important }
}

/* --------------------------------------------------------- Markieren (Punkt 24)
   Seit 2026-10-26 (Coke-Video, Roman: Stift mit Farben und Stärken, Kommentare).
   Die Leinwand liegt genau über dem Bild, die Leiste oben mittig. */
.bs-lb-mal{ position:absolute; z-index:1; cursor:crosshair; touch-action:none; border-radius:var(--bs-radius,12px) }
.bs-lb-mal[hidden], .bs-lb-stift[hidden]{ display:none }
.bs-lb-malt #bsLbStiftKnopf{ background:var(--bs-green,#2cfe99); color:#04120e }
.bs-lb-stift{
  position:absolute; bottom:56px; left:50%; transform:translateX(-50%); z-index:3;   /* unten im freien Platz der Bühne, nicht über dem Bild */
  display:flex; flex-wrap:wrap; gap:8px 14px; align-items:center; justify-content:center;
  max-width:calc(100vw - 140px); padding:8px 12px; border-radius:14px;
  background:rgba(4,14,18,.86); color:#eef2f1; font-size:13px;
}
.bs-lb-stift-reihe{ display:flex; gap:6px; align-items:center }
.bs-lb-stift button{
  border:0; cursor:pointer; font:inherit; color:#eef2f1; background:rgba(255,255,255,.10);
  border-radius:999px; padding:6px 11px; min-height:30px;
}
.bs-lb-stift button:hover{ background:rgba(255,255,255,.22) }
.bs-lb-stift button.aktiv{ outline:2px solid var(--bs-green,#2cfe99); outline-offset:1px }
.bs-lb-stift button.haupt{ background:var(--bs-green,#2cfe99); color:#04120e; font-weight:600 }
.bs-lb-stift .farbe{ width:26px; height:26px; min-height:0; padding:0; border:2px solid rgba(255,255,255,.5) }
.bs-lb-stift-stand{ color:#9db2bb; font-size:12px }

/* Abzeichen in der Uebersicht (markierAbzeichen, seit 2026-10-26): welche Kachel markiert
   oder kommentiert ist. Gelb = Striche, Cyan = Kommentare, beide wenn beides da ist. */
.bs-lb-abz{ position:absolute; top:6px; left:6px; display:flex; flex-wrap:wrap; gap:4px; pointer-events:none; z-index:1 }
.bs-lb-abz span{ font:600 11px/1.2 system-ui,sans-serif; padding:3px 7px; border-radius:999px; color:#111 }
.bs-lb-abz-strich{ background:#ffd400 }
.bs-lb-abz-notiz{ background:#00e5ff }
.bs-lb-hat-markierung img{ outline:3px solid #ffd400; outline-offset:-3px }
/* Ausserhalb des Markier-Modus: Markierungen leise sichtbar, nicht anklickbar; gezoomt ausgeblendet,
   weil die Leinwand dem vergroesserten Bild nicht folgt (Roman 2026-10-26). */
.bs-lb-mal.leise{ opacity:.5; pointer-events:none; cursor:default }
.bs-lb.gezoomt .bs-lb-mal.leise{ display:none }