/* Sicherstellen, dass die Listenelemente keine Aufzählungszeichen haben */
/* Wichtig: Überschreibe alle Browser-Standard-Styles für li-Elemente */
.sil-item {
  --sil-text-pad-x: 12px;
  --sil-text-pad-top: 12px;
  --sil-text-pad-bottom: 12px;
  --sil-text-gap: 8px;
  list-style: none !important;
  list-style-type: none !important;
  border: 1px solid #5a5a5a;
  border-radius: 5px;
  padding: 0 !important;
  margin: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  box-sizing: border-box;
  background-color: #2d2d2d;
  color: #ffffff;
  display: flex;
  flex-direction: column;
  line-height: 1.35;
  min-width: 0;
  max-width: 100%;
}

/* Stelle sicher, dass Bilder keine Margin haben und als Block-Elemente dargestellt werden */
.sil-item img {
  margin: 0 !important;
  padding: 0 !important;
  display: block;
  vertical-align: top;
  max-width: 100%;
  border: none;
  outline: none;
  aspect-ratio: 1200 / 600;
  object-fit: cover;
  object-position: center;
}

/* Separate Regel für generierte Screenshot/OG-Bilder */
.sil-item .sil-image {
  width: 100%;
  height: 100%;
  aspect-ratio: 1200 / 600;
  object-fit: cover;
  object-position: center;
}

/* Stelle sicher, dass Links keine Margin haben und als Block-Elemente dargestellt werden */
.sil-item > a {
  margin: 0 !important;
  padding: 0 !important;
  display: block;
  line-height: 0;
  text-decoration: none;
  border: none;
  outline: none;
  width: 100%;
  aspect-ratio: 1200 / 600;
  overflow: hidden;
  flex: 0 0 auto;
}

.sil-item > a > .sil-image {
  width: 100%;
  height: 100% !important;
}

/* Custom heading (title attribute) – top + sides, no bottom gap */
.sil-item .sil-heading {
  margin: 0 !important;
  padding: var(--sil-text-pad-top) var(--sil-text-pad-x) 0 var(--sil-text-pad-x) !important;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  max-width: 100%;
}

/* Page title below image */
.sil-item h3 {
  margin: var(--sil-text-gap) 0 0 0 !important;
  padding: 0 var(--sil-text-pad-x) 0 var(--sil-text-pad-x) !important;
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* First text block directly under image (no custom h2) */
.sil-item > a + h3 {
  margin-top: var(--sil-text-pad-top) !important;
}

.sil-item h3 a {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #e09900;
}

.sil-item p {
  margin: var(--sil-text-gap) 0 0 0 !important;
  padding: 0 var(--sil-text-pad-x) 0 var(--sil-text-pad-x) !important;
  line-height: 1.5;
}

/* URL-Link mit Ellipsis wenn zu lang */
.sil-item p.sil-link {
  margin-top: var(--sil-text-gap) !important;
  margin-bottom: 0 !important;
  padding: 0 var(--sil-text-pad-x) var(--sil-text-pad-bottom) var(--sil-text-pad-x) !important;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
  box-sizing: border-box;
  line-height: 1.5;
}

/* Description as last visible block (no link line) */
.sil-item p:not(.sil-link):last-child {
  padding-bottom: var(--sil-text-pad-bottom) !important;
}

/* Only title + description, no link */
.sil-item h3:last-child {
  padding-bottom: var(--sil-text-pad-bottom) !important;
}

/* Only custom heading, no image/text below */
.sil-item .sil-heading:only-child {
  padding-bottom: var(--sil-text-pad-bottom) !important;
}

.sil-item p.sil-link a {
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: top;
  color: #bbbbbb;
}

/* Container für die Bilder mit festem Seitenverhältnis */
.sil-img-container {
  position: relative;
  overflow: hidden;
  width: 100%;
  aspect-ratio: 1200 / 600;
}

/* Beide Bilder werden absolut positioniert, sodass sie den Container ausfüllen */
.sil-img-container .sil-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: opacity 0.3s ease;
}

/* Standard: Main-Image sichtbar, Screenshot unsichtbar */
.sil-img-container .main-image {
  opacity: 1;
  z-index: 1;
}

.sil-img-container .screenshot-image {
  opacity: 0;
  z-index: 2;
}

/* Beim Hover: Main-Image ausblenden, Screenshot einblenden */
.sil-item > a:hover .sil-img-container .main-image,
.sil-img-container:hover .main-image {
  opacity: 0;
}

.sil-item > a:hover .sil-img-container .screenshot-image,
.sil-img-container:hover .screenshot-image {
  opacity: 1;
}

/* Divi/Theme: ul/li padding & bullets inside gallery/carousel (not content lists) */
#left-area .dirschl-lp-gallery-wrapper ul,
#left-area .dirschl-lp-gallery-wrapper ul li,
#left-area .seo-carousel-wrapper ul,
#left-area .seo-carousel-wrapper ul li,
.entry-content .dirschl-lp-gallery-wrapper ul,
.entry-content .dirschl-lp-gallery-wrapper ul li,
.entry-content .seo-carousel-wrapper ul,
.entry-content .seo-carousel-wrapper ul li,
.et-l--body .dirschl-lp-gallery-wrapper ul,
.et-l--body .dirschl-lp-gallery-wrapper ul li,
.et-l--body .seo-carousel-wrapper ul,
.et-l--body .seo-carousel-wrapper ul li,
.et-l--footer .dirschl-lp-gallery-wrapper ul,
.et-l--footer .dirschl-lp-gallery-wrapper ul li,
.et-l--footer .seo-carousel-wrapper ul,
.et-l--footer .seo-carousel-wrapper ul li,
.et-l--header .dirschl-lp-gallery-wrapper ul,
.et-l--header .dirschl-lp-gallery-wrapper ul li,
.et-l--header .seo-carousel-wrapper ul,
.et-l--header .seo-carousel-wrapper ul li,
.et_pb_text .dirschl-lp-gallery-wrapper ul,
.et_pb_text .seo-carousel-wrapper ul,
.et_pb_code_inner .dirschl-lp-gallery-wrapper ul,
.et_pb_code_inner .seo-carousel-wrapper ul {
  list-style: none !important;
  list-style-type: none !important;
  padding: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  padding-bottom: 0 !important;
  margin-left: 0 !important;
}

.dirschl-lp-gallery-wrapper .dirschl-lp-gallery-grid .sil-item,
.seo-carousel-wrapper .seo-carousel-track .sil-item {
  /* Card padding stays on .sil-item; only cancel Divi list indent */
  margin-left: 0 !important;
}