/* Admin Styles: Passe nach Bedarf an */
/* Stelle sicher, dass jedes Item 33,333 % der Gesamtbreite belegt */

/* Wrapper clearfix */
.neos-ps-wrapper {
display: flex;
  flex-wrap: wrap;
  /* Abstand zwischen den Items: hier das Gap einstellen */
  gap: 1.5em;
  margin: 0;
  padding: 0;
  /* SVG Fallback-Farbe für die Lilie */
  --overlay-color: #ede9ea;
}

/* Items: Float und feste Breite entfernen, durch Flex-Basis ersetzen */
.neos-ps-wrapper .neos-ps-item {
  position:relative;

  box-sizing: border-box;
  /* Du kannst die alte Padding-Logik beibehalten oder in den Gap verlagern */
  padding: 0 0 0 0;

  /* Damit Bild, Überschrift und Link sich vertikal aufspannen */
  display: flex;
  flex-direction: column;
}
/* Mobilanpassung */
/* Desktop (ab 1025px): 3 Spalten */
.neos-ps-wrapper .neos-ps-item {
  /* Flexbox-Regeln: drei Spalten */
  flex: 0 0 calc(33.333% - 1.5em);
}

/* Tablet (bis 1024px): 2 Spalten */
@media (max-width: 1024px) {
  .neos-ps-wrapper .neos-ps-item {
    flex: 0 0 calc(50% - 1.5em) !important;
    max-width: calc(50% - 1.5em) !important;
  }
}

/* Mobil (bis 767px): 1 Spalte */
@media (max-width: 767px) {
  .neos-ps-wrapper .neos-ps-item {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }
}

/* Thumbnail-Container und Overlay-Grundlage */
.neos-ps-wrapper .neos-ps-thumbnail,
.neos-ps-wrapper .neos-ps-thumbnail .neos-ps-overlay {
  position: relative;  /* Container für absolutes Positionieren */
  width: 100%;         /* 100 % der .neos-ps-item (also 33,333 % des Wrappers) */
  height: 200px;       /* feste Höhe */
  overflow: hidden;    /* statt hidden */
}

/* Bild füllt den Container komplett */
.neos-ps-wrapper .neos-ps-thumbnail .neos-ps-thumb-img {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Overlay deckt Thumbnail komplett ab */
.neos-ps-wrapper .neos-ps-thumbnail .neos-ps-overlay {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 10;
  margin: 0; /*6px 0 0 0;*/
}

/* Logo füllt das Overlay und sitzt unten rechts */
.neos-ps-wrapper .neos-ps-thumbnail .neos-ps-logo {
  position: absolute;
  bottom: 0;
  left: -0;
  width: auto;
  max-width: auto;
  transform: translateX(100%);  /* ganz rechts außerhalb starten */
  opacity: 0;                   /* komplett unsichtbar */
  pointer-events: none;
  z-index: 11;
  filter: brightness(0) saturate(100%);
}
/* Auf das Inline-SVG-Container anwenden: */
.neos-ps-overlay-icon {
  position: absolute;
  bottom: 0;
  left: 0;
  width: auto;         /* volle Breite des SVG nutzen */
  max-width: auto;     /* nicht größer ziehen */
  pointer-events: none;
  color: var(--overlay-color);
  z-index: 11;
  transform: none;     /* kein zusätzliches translate */
}

/* SVG selbst auf 100% Breite skalieren und currentColor nutzen */
.neos-ps-overlay-icon svg {
  display: block;
  width: 100%;
  height: auto;
  fill: currentColor !important;
}

/* Ein kleiner Reset für Titel, Excerpt & Link-Abstände */
.neos-ps-wrapper .neos-ps-item h2,
.neos-ps-wrapper .neos-ps-item .excerpt,
.neos-ps-wrapper .neos-ps-item a {
  margin: 0 0 0.5em;
}

/* Kategorie-Link stylen. Da der mal fehlen kann (z.B. Portfolio bei Expertise > Real Estate), nehme ich hier den Bottom-Abstand weg und gebe ihn direkt der H2 darunter, die es auf jeden Fall gibt. */
.neos-ps-wrapper article .neos-ps-category {
    margin: 1em 0 0 0 !important;
    margin: 1lh 0 0 0 !important;
}

/* H2 in der Box stylen */
.neos-ps-wrapper article.neos-ps-item h2 {
    font-size: 22px !important;
    /* Wenn die Kategorie leer ist → Abstand für den Titel oben setzen, sonst klebt der oben am Bild dran */
    margin: 0.7em 0 0.82em 0 !important;
    margin: 0.7lh 0 0.82lh 0 !important; /* 0.82 × line-height */
}

/* Clear-Element am Ende, damit die Hintergrundfarbe nicht weiter läuft */
.neos-ps-clear {
  clear: both;
  width: 100%;
  height: 0;
  margin: 0;
  padding: 0;
}

/* macht die Background-Farbe der Code-Block-Section transparent */
.featuredinsightssection {
  /*background-color: transparent !important;*/
  background-color: #ede9ea !important;
}

/* Animationen der Elemente */
/* Ausblendung + Verschiebung als Ausgangszustand */
.neos-ps-item {
  opacity: 0;
  transform: translateY(100px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.neos-ps-item.in-view {
  opacity: 1;
  transform: translateY(0);
}

/* Nach wie vor Verzögerungen je Item */
.neos-ps-item:nth-child(1).in-view { transition-delay:   0ms; }
.neos-ps-item:nth-child(2).in-view { transition-delay: 350ms; }
.neos-ps-item:nth-child(3).in-view { transition-delay: 700ms; }

/* Animation für das Logo, also SVG-Overlay der Lilie */
/* 1) Logo initial nach rechts geschoben */
.neos-ps-wrapper .neos-ps-logo {
  transform: translateX(100%);
}

/* 2) Keyframes: vom rechts-außen/transparent zum richtigen Platz/opaque */
@keyframes logoSlideIn {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

/* 3) Auf die drei Items verteilt: Animation mit Delay,
      das dem Ende der Container-Fade-In-Animation entspricht.
      Container-Dauer: 0.6s (600ms), plus 
      Item-Delay 1: 0ms → Logo-Delay: 600ms
      Item-Delay 2: 350ms → Logo-Delay: 950ms
      Item-Delay 3: 700ms → Logo-Delay: 1300ms */
.neos-ps-wrapper .neos-ps-item:nth-child(1).in-view .neos-ps-logo {
  animation: logoSlideIn 0.5s ease-out 600ms forwards;
}
.neos-ps-wrapper .neos-ps-item:nth-child(2).in-view .neos-ps-logo {
  animation: logoSlideIn 0.5s ease-out 950ms forwards;
}
.neos-ps-wrapper .neos-ps-item:nth-child(3).in-view .neos-ps-logo {
  animation: logoSlideIn 0.5s ease-out 1300ms forwards;
}