/* ---------- Gemeinsame Standard-Variablen ---------- */
:root {
  --tan4-half: 0.0349634;
  --container-width: calc(min(100vw, var(--content-max-width)) - 2 * var(--block-margin));
  --galerie-offset-1: calc(var(--picture-spacing) + var(--tan4-half) * var(--container-width));
  --galerie-offset-2: calc(var(--target-height) + 2 * var(--picture-spacing) + var(--tan4-half) * var(--container-width));
}

/* ---------- Desktop / große Breite ---------- */
@media (min-width: 769px) {
  :root {
    --picture-spacing: 25px;
    --target-height: 250px;

    --width-landscape: 375px;
    --height-landscape: 276px;
    --clip-landscape: 26px;

    --width-square: 250px;
    --height-square: 268px;
    --clip-square: 18px;

    --width-portrait: 166px;
    --height-portrait: 262px;
    --clip-portrait: 12px;
  }
}

/* ---------- Mobile / kleine Breite ---------- */
@media (max-width: 768px),
       (max-height: 800px) {
  :root {
    --picture-spacing: 15px;
    --target-height: 150px;

    --width-landscape: 225px;
    --height-landscape: 166px;
    --clip-landscape: 16px;

    --width-square: 150px;
    --height-square: 160px;
    --clip-square: 10.5px;

    --width-portrait: 100px;
    --height-portrait: 157px;
    --clip-portrait: 7px;
  }
}


.lazyblock-galerie {
  height: 100%;
}

.galerie-section {
  position: relative;
  height: calc(2 * var(--target-height) + 4 * var(--picture-spacing) + 2 * var(--tan4-half) * var(--container-width));
  display: flex;
  align-items: center;
  margin: 5vh calc(-1 * var(--fade-width));
  padding: 0 var(--fade-width);
  overflow: hidden;
}
@media (min-width: 769px) and (max-height: 800px) {
        .galerie-section{
          margin-top: -15vh;
        }
       }

.galerie-rotated {
  position: absolute;
  width: 100%;
  height: 100%;
  transform: rotate(calc(-1 * var(--rotation)));
  transform-origin: center center;
}

.galerie-container {
  display: flex;
  gap: var(--picture-spacing);
  position: absolute;
  left: 0;
  align-items: center;
}

.galerie-1 { 
  top: var(--galerie-offset-1);
  transform: translateX(9px);
}

.galerie-2 { 
  top: var(--galerie-offset-2);
}

.parallelogram {
  flex-shrink: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: rotate(var(--rotation));
}

.parallelogram.landscape {
  width: var(--width-landscape);
  height: var(--height-landscape);
  clip-path: polygon(
    0 var(--clip-landscape),
    100% 0,
    100% calc(100% - var(--clip-landscape)),
    0 100%
  );
}

.parallelogram.square {
  width: var(--width-square);
  height: var(--height-square);
  clip-path: polygon(
    0 var(--clip-square),
    100% 0,
    100% calc(100% - var(--clip-square)),
    0 100%
  );
}

.parallelogram.portrait {
  width: var(--width-portrait);
  height: var(--height-portrait);
  clip-path: polygon(
    0 var(--clip-portrait),
    100% 0,
    100% calc(100% - var(--clip-portrait)),
    0 100%
  );
}

.parallelogram img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.glightbox {
  transition: opacity 0.3s ease, transform 0.2s ease;
}

.glightbox:hover {
  opacity: 0.8;
  transform: translateX(-5px) translateY(2px);
}