/* ─────────────────────────────────────────────────────────────────
   Galerie
   ───────────────────────────────────────────────────────────────── */

.lt-gal{padding:64px 0}
.lt-gal__kopf{margin-bottom:32px;max-width:44rem}
.lt-gal__titel{font-family:var(--schrift_titel);
  font-size:clamp(1.6rem,3vw,2.4rem);line-height:1.15;margin:0}
.lt-gal__sub{margin:.5em 0 0;font-size:1.05rem;line-height:1.6;
  color:color-mix(in srgb, var(--text) 72%, transparent)}

:where(.lt-gal.lt-block--aus-mitte) .lt-gal__kopf{margin-inline:auto;
  text-align:center}
:where(.lt-gal.lt-block--aus-rechts) .lt-gal__kopf{margin-left:auto;
  text-align:right}

/* ── Raster ───────────────────────────────────────────────────
   Alle Bilder auf dasselbe Format beschnitten - das ist der
   Unterschied zum Mauerwerk. Eine Reihe aus Hoch- und Querformaten
   sieht ungeordnet aus, auch wenn jedes Bild für sich gut ist. */
/* Flex statt Grid - damit eine unvollständige Zeile mittig steht.

   Bei fünf Bildern in vier Spalten klebte das fünfte allein links.
   Grid richtet Spalten aus, nicht Elemente; justify-content hilft
   dort nicht, weil 1fr-Spalten den Platz aufbrauchen.

   Dieselbe Lösung wie bei den Karten. */
.lt-gal__raster{display:flex;flex-wrap:wrap;justify-content:center;gap:14px}
.lt-gal__raster > *{flex:0 1 auto}
.lt-gal__raster[data-spalten="2"] > *{width:calc((100% - 14px) / 2)}
.lt-gal__raster[data-spalten="3"] > *{width:calc((100% - 28px) / 3)}
.lt-gal__raster[data-spalten="4"] > *{width:calc((100% - 42px) / 4)}

.lt-gal--raster .lt-gal__kachel img{width:100%;height:100%;object-fit:cover}
.lt-gal--raster [data-format="1-1"]  .lt-gal__kachel{aspect-ratio:1/1}
.lt-gal--raster [data-format="4-3"]  .lt-gal__kachel{aspect-ratio:4/3}
.lt-gal--raster [data-format="3-4"]  .lt-gal__kachel{aspect-ratio:3/4}
.lt-gal--raster [data-format="16-9"] .lt-gal__kachel{aspect-ratio:16/9}

/* ── Mauerwerk ────────────────────────────────────────────────
   Spalten statt Raster: Die Bilder behalten ihr Format und füllen
   die Spalten von oben nach unten.

   CSS-Spalten und nicht Grid, weil Grid für ungleiche Höhen entweder
   Lücken lässt oder eine Zeile pro Bild braucht. */
/* Mauerwerk bleibt bei CSS-Spalten - dort füllen die Bilder von oben
   nach unten, und eine "unvollständige Zeile" gibt es gar nicht. */
/* Jetzt bündige Reihen statt CSS-Spalten: Bei wenigen Bildern
   endeten die Spalten unterschiedlich hoch und unten blieb viel leer.
   Jede Reihe füllt die volle Breite, die Bilder behalten ihr Format.
   Ohne Skript trägt flex mit dem Seitenverhältnis (--r) schon fast. */
.lt-gal--mauer .lt-gal__raster{display:flex;flex-wrap:wrap;gap:14px;--zh:260px}
.lt-gal--mauer .lt-gal__raster[data-spalten="2"]{--zh:340px}
.lt-gal--mauer .lt-gal__raster[data-spalten="4"]{--zh:210px}
.lt-gal--mauer .lt-gal__kachel{margin:0;width:auto;
  flex:var(--r,1.33) 1 calc(var(--r,1.33) * var(--zh))}
.lt-gal--mauer .lt-gal__kachel img{width:100%;height:auto;aspect-ratio:var(--r,auto);object-fit:cover;display:block}
.lt-gal--mauer.lt-gal--bereit .lt-gal__kachel{flex:none}
.lt-gal--mauer .lt-gal__unterschrift{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ── Eine Kachel ──────────────────────────────────────────────
   Ein Knopf, kein Bild in einem Link: Er öffnet keinen neuen Ort,
   sondern ein Fenster - dafür ist der Knopf das richtige Element,
   und die Tastatur erreicht ihn ohne Zutun. */
.lt-gal__kachel{
  position:relative;display:block;padding:0;overflow:hidden;
  border:0;cursor:zoom-in;background:var(--flaeche);
  border-radius:var(--radius);
  transition:transform .2s ease-out, box-shadow .2s ease-out;
}
.lt-gal__kachel img{display:block;transition:transform .35s ease-out}
.lt-gal__kachel:hover{box-shadow:var(--schatten, 0 8px 24px rgba(15,20,28,.14))}
.lt-gal__kachel:hover img{transform:scale(1.04)}
.lt-gal__kachel:focus-visible{outline:3px solid var(--akzent);outline-offset:3px}

/* Keine Unterschrift auf der Kachel.

   Sie lag als Verlauf über dem Bild und verdeckte genau den Teil, den
   man bei einem Referenzfoto sehen will - das untere Drittel. Bei
   zwölf Kacheln ergab das zwölf dunkle Streifen.

   Im Lichtkasten steht sie weiterhin, dort ist Platz und man sieht
   das Bild in Ruhe. */
/* Jetzt UNTER dem Bild statt darüber: nichts wird verdeckt, und
   Werktitel/Jahr bleiben lesbar (Künstler-Websites brauchen sie). */
.lt-gal__unterschrift{display:block;padding:9px 12px 11px;text-align:left;
  font-size:.84rem;line-height:1.4;font-weight:600;color:var(--text);
  background:var(--flaeche)}

/* ── Hinweis „Vergrößern“ beim Überfahren ─────────────────────
   Leichte Abdunklung, mittig Lupe + Wort. Die Unterschrift liegt
   darüber (z-index), damit sie lesbar bleibt. */
.lt-gal__zoom{position:absolute;inset:0;z-index:1;display:flex;
  align-items:center;justify-content:center;pointer-events:none;
  background:rgba(10,12,16,.38);opacity:0;transition:opacity .2s ease-out}
.lt-gal__zoom-in{display:inline-flex;align-items:center;gap:7px;
  padding:7px 13px 7px 10px;border-radius:999px;
  background:rgba(255,255,255,.94);color:#1b1f26;
  font-size:.8rem;font-weight:600;line-height:1;letter-spacing:.01em;
  box-shadow:0 4px 14px rgba(0,0,0,.22);
  transform:translateY(6px) scale(.96);transition:transform .2s ease-out}
.lt-gal__zoom svg{width:17px;height:17px;flex:none}
.lt-gal__kachel:hover .lt-gal__zoom,
.lt-gal__kachel:focus-visible .lt-gal__zoom{opacity:1}
.lt-gal__kachel:hover .lt-gal__zoom-in,
.lt-gal__kachel:focus-visible .lt-gal__zoom-in{transform:none}
.lt-gal__unterschrift{position:relative;z-index:2}

/* Touch: kein Überfahren - dauerhaft eine kleine Lupe in der Ecke. */
@media(hover:none){
  .lt-gal__zoom{opacity:1;background:none;align-items:flex-start;
    justify-content:flex-end;padding:8px}
  .lt-gal__zoom-in{padding:6px;transform:none;background:rgba(255,255,255,.88)}
  .lt-gal__zoom-text{display:none}
  .lt-gal__zoom svg{width:15px;height:15px}
}

/* ── Volle Breite ─────────────────────────────────────────────
   Randlos, ohne Fugen: Das Raster steht außerhalb von .lt-wrap, die
   Bilder stoßen aneinander und an beide Ränder. Das Skript macht
   jede Reihe - auch die letzte - exakt bündig. */
.lt-gal--voll{padding:0}
.lt-gal--voll .lt-gal__kopf{padding:64px 0 32px;margin-bottom:0}
.lt-gal--voll .lt-gal__raster{gap:0;width:100%}
.lt-gal--voll .lt-gal__kachel{border-radius:0;box-shadow:none !important}
.lt-gal--voll .lt-gal__kachel:hover img{transform:scale(1.03)}
.lt-gal--voll .lt-gal__unterschrift{position:absolute;left:0;right:0;bottom:0;
  background:linear-gradient(transparent,rgba(0,0,0,.6));color:#fff;
  padding:22px 12px 9px}

@media(max-width:900px){
  .lt-gal__raster[data-spalten="3"] > *,
  .lt-gal__raster[data-spalten="4"] > *{width:calc((100% - 14px) / 2)}
  .lt-gal--mauer .lt-gal__raster{--zh:200px !important}
}
@media(max-width:560px){
  .lt-gal:not(.lt-gal--mauer) .lt-gal__raster > *{width:100% !important}
  .lt-gal--mauer .lt-gal__raster{--zh:150px !important;gap:10px}
  .lt-gal--voll .lt-gal__raster{gap:0}
  .lt-gal--voll .lt-gal__kopf{padding:44px 0 24px}
  .lt-gal{padding:44px 0}
}

/* Mehrere Vergleiche im Raster - dieselbe Spaltenlogik wie bei den
   Bildern, deshalb dieselbe Klasse am Behälter. */
.lt-gal--vergleich .lt-gal__raster[data-spalten="1"] > *{width:100%}

.lt-vgl-el{margin:0;display:flex;flex-direction:column;gap:9px}
.lt-vgl__titel{font-size:.92rem;font-weight:600;line-height:1.4;
  color:color-mix(in srgb, var(--text) 82%, transparent)}
:where(.lt-gal.lt-block--aus-mitte) .lt-vgl__titel{text-align:center}
:where(.lt-gal.lt-block--aus-rechts) .lt-vgl__titel{text-align:right}

/* ── Vorher / Nachher ─────────────────────────────────────────
   Zwei Bilder übereinander; das obere wird per clip-path
   beschnitten. --pos setzt das Skript beim Ziehen.

   clip-path statt width: Ein schmaleres Bild würde gestaucht, hier
   bleibt es an seinem Platz und wird nur abgeschnitten. */
.lt-vgl{
  position:relative;overflow:hidden;
  border-radius:var(--radius);
  box-shadow:var(--schatten, 0 8px 24px rgba(15,20,28,.14));
  --pos:90%;
}
.lt-vgl img{display:block;width:100%;height:auto}
.lt-vgl__unten{position:relative;z-index:0}
.lt-vgl__oben{
  position:absolute;inset:0;z-index:1;
  clip-path:inset(0 calc(100% - var(--pos)) 0 0);
}
.lt-vgl__oben img{height:100%;object-fit:cover}

.lt-vgl__kante{
  position:absolute;top:0;bottom:0;left:var(--pos);z-index:2;
  width:2px;margin-left:-1px;background:#fff;
  box-shadow:0 0 0 1px rgba(0,0,0,.2);
  pointer-events:none;
}
/* Der Griff sitzt auf der Kante - er zeigt, dass man ziehen kann.

   Mit zwei Pfeilen darin: Ein leerer weißer Kreis sieht aus wie ein
   Knopf, den man DRÜCKT. Erst die Pfeile sagen, dass es seitwärts
   geht.

   Als Hintergrundbild statt als SVG im Markup: Der Griff ist reine
   Gestaltung, und ein Vorleseprogramm soll ihn nicht als Bild
   ankündigen - der Regler darunter ist das, was zählt. */
.lt-vgl__kante::after{
  content:'';position:absolute;top:50%;left:50%;
  width:38px;height:38px;margin:-19px 0 0 -19px;
  border-radius:50%;background:#fff;
  box-shadow:0 2px 10px rgba(0,0,0,.3);

  /* In EINER Zeile - die Fortsetzung mit Backslash nimmt die
     Einrückung der Folgezeile mit in die Adresse, und dann ist die
     Zeichnung ungültig. Genau daran fehlte das Zeichen. */
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231b1f26' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 6 4 12 9 18'/%3E%3Cpolyline points='15 6 20 12 15 18'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:center;
  background-size:19px 19px;
}

/* Beim Ziehen etwas kleiner - eine Rückmeldung, dass man ihn
   erwischt hat. */
.lt-vgl:active .lt-vgl__kante::after{transform:scale(.94)}

/* Der Regler liegt unsichtbar über dem ganzen Bild - so zieht man
   überall, nicht nur am Griff. */
.lt-vgl__regler{
  position:absolute;inset:0;z-index:3;
  width:100%;height:100%;margin:0;
  opacity:0;cursor:ew-resize;
}
.lt-vgl__regler:focus-visible{opacity:1;outline:3px solid var(--akzent)}

.lt-vgl__marke{
  position:absolute;top:14px;z-index:2;
  padding:5px 11px;border-radius:20px;
  font-size:.7rem;font-weight:700;letter-spacing:.04em;
  text-transform:uppercase;
  background:rgba(0,0,0,.55);color:#fff;
  pointer-events:none;
}
.lt-vgl__marke--v{left:14px}
.lt-vgl__marke--n{right:14px}

/* ── Lichtkasten ──────────────────────────────────────────────
   Ein Bild groß über der Seite. */
.lt-lk{
  position:fixed;inset:0;z-index:9500;
  display:flex;align-items:center;justify-content:center;
  padding:32px;
  background:rgba(8,10,14,.92);
  opacity:0;visibility:hidden;transition:opacity .2s;
}
.lt-lk.auf{opacity:1;visibility:visible}
/* Platz für die Unterschrift einrechnen: Ohne das reicht das Bild
   bis unten und der Text liegt darauf. */
.lt-lk img{
  max-width:100%;max-height:calc(100vh - 190px);
  border-radius:var(--radius);
  box-shadow:0 30px 80px rgba(0,0,0,.6);
}

/* Die Unterschrift steht UNTER dem Bild, nicht darauf - und mit
   deutlichem Abstand: Klebt sie am Rand, liest sie sich wie ein Teil
   des Bildes. */
.lt-lk__titel{
  position:absolute;left:0;right:0;bottom:34px;
  text-align:center;color:rgba(255,255,255,.86);
  font-size:.92rem;line-height:1.5;padding:0 72px;
  max-width:52rem;margin-inline:auto;
}
/* Leer? Dann keine Lücke - ein Bild ohne Beschriftung soll mittig
   stehen, nicht nach oben gerückt. */
.lt-lk__titel:empty{display:none}
.lt-lk.ohne-titel img{max-height:calc(100vh - 120px)}
.lt-lk__zu,.lt-lk__pfeil{
  position:absolute;display:flex;align-items:center;justify-content:center;
  width:46px;height:46px;border:0;cursor:pointer;
  border-radius:50%;background:rgba(255,255,255,.12);color:#fff;
  font-size:1.4rem;line-height:1;
}
.lt-lk__zu:hover,.lt-lk__pfeil:hover{background:rgba(255,255,255,.22)}
.lt-lk__zu{top:20px;right:20px}
.lt-lk__pfeil--vor{right:20px;top:50%;margin-top:-23px}
.lt-lk__pfeil--zurueck{left:20px;top:50%;margin-top:-23px}

@media(max-width:560px){
  .lt-lk{padding:14px}
  .lt-lk__pfeil{width:40px;height:40px}
  .lt-lk__pfeil--vor{right:10px}
  .lt-lk__pfeil--zurueck{left:10px}
}

@media(prefers-reduced-motion:reduce){
  .lt-gal__kachel,.lt-gal__kachel img,.lt-lk{transition:none}
  .lt-gal__kachel:hover img{transform:none}
  .lt-gal__zoom,.lt-gal__zoom-in{transition:none}
}


/* ── Unvollständiger Vorher/Nachher-Vergleich ────────────────────
   Der Baustein steht mit [hidden] in der Seite - ein Besucher sieht
   nichts. Im Editorrahmen wird er sichtbar, damit man merkt, warum
   an dieser Stelle nichts erscheint.

   Erkannt an der Adresse: Der Editor hängt ?cmsvorschau=1 an, und ein
   winziges Skript setzt daraufhin die Klasse. Ohne die Klasse bleibt
   es bei [hidden]. */
html.lt-vorschau .lt-gal--leer[hidden]{
  display:block;
  padding:28px 0;
}
html.lt-vorschau .lt-gal--leer p{
  margin:0;
  padding:16px 20px;
  border-radius:var(--radius);
  border:1px dashed color-mix(in srgb, var(--akzent) 45%, transparent);
  background:color-mix(in srgb, var(--akzent) 7%, transparent);
  font-size:.92rem;
  text-align:center;
}