.elementor-791 .elementor-element.elementor-element-6d996d1b{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-791 .elementor-element.elementor-element-38ab3db2{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-791 .elementor-element.elementor-element-729ce8b9{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}@media(max-width:1024px){.elementor-791 .elementor-element.elementor-element-6d996d1b{--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}}/* Start custom CSS for html, class: .elementor-element-5f064b98 */.collage-arrow {
  width: 1em !important;   /* relativ zur Textgröße */
  height: auto; /* Proportionen beibehalten */
  display: inline-block;
}




/* --------------------------
   Grundlegendes Grid-Layout
--------------------------- */
.image-collage {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 40px;
  align-items: start;
}

/* --------------------------
   Collage Items (Startzustand)
--------------------------- */
.collage-item {
  display: block;
  text-decoration: none;
  color: inherit;
  position: relative;
  overflow: hidden;
  width: 100%;

  opacity: 0;
  transform: translateY(50px); /* Start weiter unten */
  transition: opacity 1s ease, transform 1s ease;
}

/* Aktiv: fade + slide nach oben */
.collage-item.visible {
  opacity: 1;
  transform: translateY(0);
}

/* --------------------------
   Bilder
--------------------------- */
.collage-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}

.collage-item:hover img {
  transform: scale(1.05);
}

/* --------------------------
   Collage Text
--------------------------- */
.collage-text {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  font-size: clamp(1.25rem, 2.1vw, 2.5rem);
  color: #1E1E1E;
  font-family: "Cervo Neue", sans-serif;
  font-weight: 500;
  font-style: italic;
  letter-spacing: 0.02em;
  position: relative;
  z-index: 2;
  background: #F8F8F8;
  padding: 2px 6px;
  justify-content: flex-start;
}

.collage-item:hover .collage-text {
  color: #1E1E1E;
}

.collage-text img {
  width: 16px;
  height: auto;
}

/* Text rechtsbündig nur für das 1. Bild */
.image-collage a:nth-child(1) .collage-text {
  justify-content: flex-end;
}

/* --------------------------
   Layout-Versatz
--------------------------- */
.image-collage a:nth-child(1) {
  grid-column: 1 / span 5;
  grid-row: 1;
}
.image-collage a:nth-child(2) {
  grid-column: 4 / span 4;
  grid-row: 2;
}
.image-collage a:nth-child(3) {
  grid-column: 9 / span 3;
  grid-row: 1;
}

/* --------------------------
   Responsive Breakpoints
--------------------------- */
@media (max-width: 1024px) {
  .image-collage {
    grid-template-columns: repeat(6, 1fr);
  }

  .image-collage a {
    grid-column: auto / span 3 !important;
    grid-row: auto !important;
  }
}

@media (max-width: 768px) {
  .image-collage {
    grid-template-columns: 1fr;
  }

  .image-collage a {
    grid-column: auto !important;
    margin-bottom: 30px;
  }
}
/* Im Elementor-Editor: Animation deaktivieren */
.elementor-editor-active .collage-item {
  opacity: 1 !important;
  transform: none !important;
}/* End custom CSS */