/* ─────────────────────────────────────────────────────────────────
   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. */
.lt-gal--mauer .lt-gal__raster{display:block;column-gap:14px}
.lt-gal--mauer .lt-gal__raster > *{width:100%}
.lt-gal--mauer .lt-gal__raster[data-spalten="2"]{column-count:2}
.lt-gal--mauer .lt-gal__raster[data-spalten="3"]{column-count:3}
.lt-gal--mauer .lt-gal__raster[data-spalten="4"]{column-count:4}
.lt-gal--mauer .lt-gal__kachel{
  break-inside:avoid;margin-bottom:14px;width:100%}
.lt-gal--mauer .lt-gal__kachel img{width:100%;height:auto;display:block}

/* ── 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. */
.lt-gal__unterschrift{display:none}

@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[data-spalten="3"],
  .lt-gal--mauer .lt-gal__raster[data-spalten="4"]{column-count:2}
}
@media(max-width:560px){
  .lt-gal__raster > *{width:100% !important}
  .lt-gal--mauer .lt-gal__raster{column-count:1 !important}
  .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}
}


/* ── 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;
}