/* -----------------------------------------
   Promo-Element: Container zentrieren & Style
----------------------------------------- */
.promo-element {
  max-width: 1200px;           /* oder Wunsch-Breite */
  margin: 2rem auto;           /* oben/unten 2rem, links/rechts auto */
  padding: 2rem;               /* Innenabstand */
  background-color: #f7f1e5;   /* Dein Beige */
  border-radius: 1rem;
}

/* -----------------------------------------
   Promo-Element: Bilder proportional & überlappend
----------------------------------------- */
.promo-images-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  gap: 0;                      /* kein zusätzlicher Abstand */
}

.promo-images-wrapper .promo-image-1 img,
.promo-images-wrapper .promo-image-2 img {
  width: auto !important;
  max-width: 45%;              /* jeweils max 45% Breite des Containers */
  height: auto !important;
  display: block;
}

.promo-image-1 {
  position: relative;
  z-index: 1;
  margin-right: -20%;          /* überlappt das zweite Bild */
}

.promo-image-2 {
  position: relative;
  z-index: 2;
  margin-left: -20%;           /* überlappt das erste Bild */
}

/* -----------------------------------------
   Promo-Element: Button als Pill-Shape mit Hover
----------------------------------------- */
.promo-element .wp-block-button .wp-block-button__link {
  display: inline-block;
  padding: 0.75rem 2rem;          /* 12px oben/unten, 32px links/rechts */
  background-color: #ffd500;      /* kräftiges Gelb */
  color: #ffffff;                 /* weißer Text */
  font-weight: 600;
  font-size: 1rem;
  border-radius: 9999px;          /* Pill-Shape */
  text-decoration: none;
  transition: background-color .2s ease, box-shadow .2s ease;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

/* -----------------------------------------
   Promo-Element: Button Hover mit !important
----------------------------------------- */
.promo-element .wp-block-button .wp-block-button__link:hover {
  background-color: #e6c000 !important;      /* override inline style */
  box-shadow: 0 6px 12px rgba(0,0,0,0.15) !important;
}

/* optional auch für den Fokus-Zustand */
.promo-element .wp-block-button .wp-block-button__link:focus {
  outline: none;
  background-color: #e6c000 !important;
  box-shadow: 0 6px 12px rgba(0,0,0,0.15) !important;
}

/* -----------------------------------------
   Promo-Element: Mobile Layout via Flex-Column
----------------------------------------- */
@media (max-width: 768px) {
  /* 1. Container: flex in Column, Padding & Margin */
  .promo-element {
    display: flex !important;
    flex-direction: column !important;
    padding: 1.5rem 1rem !important;
    margin: 1.5rem auto !important;
  }

  /* 2. Bilder-Wrapper: oben, volle Breite */
  .promo-element .promo-images-wrapper {
    order: 1;
    width: 100% !important;
    margin-bottom: 2rem !important;
    display: block !important;
  }

  /* 3. Figures im Wrapper: 100% Breite */
  .promo-element .promo-images-wrapper figure {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 1.5rem 0 !important;
  }

  /* 4. Text-Block: unter Bilder-Wrapper */
  .promo-element > .wp-block-group:not(.promo-images-wrapper) {
    order: 2;
    width: 100% !important;
    margin-top: 0 !important;
    display: block !important;
  }

  /* 5. Button-Zeile: zentrieren */
  .promo-element .wp-block-buttons {
    order: 3;
    display: flex !important;
    justify-content: center !important;
    margin-top: 1rem !important;
  }

/* 6. Ganz enger Rand rundum (5px) */
  .promo-element {
    margin: 5px !important;
    padding: 1rem !important; /* etwas weniger innen */
  }

  /* 7. Weniger Abstand nach dem Bild */
  .promo-element .promo-images-wrapper {
    margin-bottom: 0.75rem !important;
  }

  /* 8. Intro-Text (erster Absatz) dichter ran an die Überschrift */
  .promo-element > .wp-block-group:not(.promo-images-wrapper) p:first-of-type {
    margin-bottom: 0.25rem !important;
  }

  /* 9. Überschrift selbst etwas kleinerer Abstand darüber und darunter */
  .promo-element > .wp-block-group:not(.promo-images-wrapper) h1 {
    margin: 0.25rem 0 !important;
  }

  /* 10. Abstand vor dem Button reduzieren */
  .promo-element .wp-block-buttons {
    margin-top: 0.5rem !important;
  }
}

/* — Promo-Box wie Hero — */
.latest-posts-slider.promo-element {
  max-width: 1200px;
  margin: 2rem auto;
  padding: 2rem;
  background-color: #f7f1e5;
  border-radius: 1rem;
}

/* — Slides Wrapper: immer horizontal scrollen — */
.latest-posts-slider .slides {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 1rem;
}

/* — Einzelne Kachel — */
.latest-posts-slider .slide {
  flex: 0 0 calc(33.333% - 1rem);
  background: #ffffff;
  padding: 10px;
  border-radius: 0.75rem;
  box-shadow: 0 4px 8px rgba(0,0,0,0.05);
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
}

/* — Scharfes 200×100-Bild mit srcset — */
.latest-posts-slider .slide-img {
  width: 200px;
  height: 100px;
  object-fit: cover;
  margin: 0 auto 1rem;
}

/* — Titel & Auszug — */
.latest-posts-slider .slide h3 {
  font-size: 1.25rem;
  margin: 0 0 .5rem;
}
.latest-posts-slider .slide p {
  flex: 1;
  margin: 0 0 1rem;
}

/* — Button als Pill — */
.latest-posts-slider .slide-button {
  display: inline-block;
  max-width: 200px;
  margin: 0 auto;
  padding: .5rem 1rem;
  background-color: #32373c;
  color: #ffffff;
  text-align: center;
  text-decoration: none;
  border-radius: 9999px;
}

/* — Mobile: Kacheln untereinander — */
@media (max-width: 768px) {
  .latest-posts-slider .slide {
    flex: 0 0 100%;
  }
}