.dev-wrapper.inner {
	position:relative; 
	padding:10px; 
	margin:5px 0;
	border:1px dashed red;
}
.dev-wrapper.inner a.dev-link {
	bottom:0;
	top:auto; 
	right:0; 	
}

.je-image-grid {
  --gap: 1.5rem;
  --min-col: 240px;

  display: grid;
  grid-template-columns: repeat(
    auto-fit,
    minmax(var(--min-col), 1fr)
  );
  gap: var(--gap);
}
.je-image-grid a {
	text-decoration:none !important;
	color:rgb(33, 37, 41);	
}
.je-image-grid.je-overlay a .imageDesc.je-text-dark *, .je-image-grid.je-overlay .imageDesc.je-text-dark *,
.je-image-grid.je-overlay-2 a .imageDesc.je-text-dark *, .je-image-grid.je-overlay-2 .imageDesc.je-text-dark * {
	color:#FFF !important;	
}

.je-image-grid a .imageDesc.je-text-light *, .je-image-grid .imageDesc.je-text-light * {
	color:#FFF !important;	
}
.je-image-grid .imageDesc.je-text-left * { text-align:left; }
.je-image-grid .imageDesc.je-text-center * { text-align:center; }
.je-image-grid .imageDesc.je-text-right * { text-align:right; }

.je-image-grid.je-overlay .imageDesc *, .je-image-grid.je-overlay-2 .imageDesc * { text-align:center; }

.je-grid-item {
  overflow: hidden;
  border-radius: var(--radius, 0);
}
.je-image-grid.default .je-grid-item img {
  border-radius: var(--radius, 0);
}
.je-grid-item.je-shadow {
  	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.je-card-1 .je-grid-item, .je-card-2 .je-grid-item {
	background-color:var(--je-grid-item-bg);
}
.je-card-1 .imageDesc {
	padding:0 10px 10px 10px;	
}
.je-card-2 .je-grid-item {
	padding:10px;	
}
.je-grid-image {
  width: 100%;
  height: auto;
  display: block;
}

.je-grid-image.link {
  transition: transform .3s ease;
}

.je-grid-image.link:hover {
  transform: scale(1.02);
}

.je-image-grid.is-masonry {
  display: block; /* Grid komplett aus */
  column-width: var(--min-col);
  column-gap: var(--gap);
}

.je-image-grid.is-masonry .je-grid-item {
  break-inside: avoid;
  -webkit-column-break-inside: avoid;

  display: inline-block;
  width: 100%;
  margin-bottom: var(--gap);
}
.je-image-grid:not(.is-masonry) .je-grid-media {
  aspect-ratio: var(--ratio, 4 / 3);
  overflow: hidden;
  width: 100%;
}

.je-image-grid:not(.is-masonry) .je-grid-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.je-image-grid.is-masonry .je-grid-media {
  aspect-ratio: auto;
}

.je-image-grid.is-masonry .je-grid-image {
  height: auto;
  object-fit: contain; /* oder unset */
}

.je-grid-title {
  font-size: calc(var(--je-title-size, 14) * 1px);
  margin-top: .3rem;
  margin-bottom:0;
}

.je-grid-desc {
  font-size: calc(var(--je-desc-size, 10) * 1px );
  margin:0;
}
pre.masonry span {display:none;}

/* ==== Overlay 1 ==== */

.je-overlay .je-grid-image.link:hover {
  transform: none;
}
.je-overlay .je-grid-item {
  position: relative;
  overflow: hidden;
}
.je-overlay .je-grid-item::before {
  content: "";
  position: absolute;
  inset: 0;

  background: rgba(0, 0, 0, 0.45);
  opacity: 0;

  transition: opacity .3s ease;
  z-index: 2;
}
.je-overlay .je-grid-item .imageDesc {
  position: absolute;
  inset: 0;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  text-align: center;
  padding: 1rem;

  color: #fff;

  opacity: 0;
  transform: translateY(10px);
  transition: opacity .3s ease, transform .3s ease;

  z-index: 3;
  pointer-events: none;
}
.je-overlay .je-grid-item:hover::before {
  opacity: 1;
}

.je-overlay .je-grid-item:hover .imageDesc {
  opacity: 1;
  transform: translateY(0);
}
.je-overlay .je-grid-title {
  margin: 0 0 .25rem;
  font-size: calc(var(--je-title-size, 14) * 1px );
}

.je-overlay .je-grid-desc {
  margin: 0;
  font-size: calc(var(--je-desc-size, 10) * 1px );
  opacity: .9;
}
.je-overlay .je-grid-item::before, 
.je-overlay .je-grid-item .imageDesc {
  pointer-events: none; 
}

@media (hover: none) {
.je-overlay .je-grid-item::before,
.je-overlay .je-grid-item .imageDesc {
    opacity: 1;
    transform: none;
  }
}

/* ==== Overlay 2 ==== */

.je-overlay-2 .je-grid-image.link:hover {
  transform: none;
}
 .je-grid-item {
  position: relative;
  overflow: hidden;
}

.je-overlay-2 .je-grid-item::before {
  content: "";
  position: absolute;
  inset: 0;

  background: linear-gradient(to top, var(--vg-card-overlay-bg, rgba(0,0,0,0.8)), transparent, transparent);
  opacity: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 1.5rem;
  pointer-events: none;
  transition: opacity .3s ease;
  z-index: 2;
}
.je-overlay-2 .je-grid-item .imageDesc {
  position: absolute;
  inset: 0;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;

  text-align: center;
  padding: 1.5rem;

  color: #fff;

  opacity: 0;
  transform: translateY(10px);
  transition: opacity .3s ease, transform .3s ease;

  z-index: 3;
  pointer-events: none;
}
.je-overlay-2 .je-grid-item:hover::before {
  opacity: 1;
}

.je-overlay-2 .je-grid-item:hover .imageDesc {
  opacity: 1;
  transform: translateY(0);
}
.je-overlay-2 .je-grid-title {
  margin: 0 0 .25rem;
  font-size: calc(var(--je-title-size, 14) * 1px );
}

.je-overlay-2 .je-grid-desc {
  margin: 0;
  font-size: calc(var(--je-desc-size, 10) * 1px );
  opacity: .9;
}
.je-overlay-2 .je-grid-item::before, 
.je-overlay-2 .je-grid-item .imageDesc {
  pointer-events: none; 
}

@media (hover: none) {
.je-overlay-2 .je-grid-item::before,
.je-overlay-2 .je-grid-item .imageDesc {
    opacity: 1;
    transform: none;
  }
}



/* ==== Lightbox ==== */

.modal.dark { 
	background: rgba(0,0,0,0.8); 
}
.modal.light { 
	background: rgba(255,255,255,0.8); 
}
.je-lightbox-body {
  max-height: 100vh;
  max-width: 100vw;

  display: flex;
  align-items: center;
  justify-content: center;

  overflow: hidden;
}

.je-lightbox-wrapper {
  max-height: 100%;
  max-width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.je-lightbox-img {
	max-width: 80vw;
	max-height: 80vh;
	width: auto;
	height: auto;
	object-fit: contain;
	cursor: default;
}
.je-image-grid .modal-dialog {
  	margin-top: 25px !important;
	max-width:100% !important;
}
#jeImageModal {
  	cursor: zoom-out;
}

.je-lightbox-wrapper {
  position: relative;
  display: inline-block;
}

.je-lightbox-caption {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 1rem;
  pointer-events: none;
}
.dark .je-lightbox-caption {
	color:#fff;
}
.light .je-lightbox-caption {
	color:rgb(33, 37, 41);
}

.je-lightbox-caption .je-grid-title {
  margin: 0 0 .25rem;
  font-size: var(--je-modal-title-size, 14);
}

.je-lightbox-caption .je-grid-desc {
  margin: 0;
  font-size: var(--je-modal-desc-size, 10);
}

/* Nav */

.je-lightbox-nav {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: 0;
  cursor: pointer;
  opacity: .7;
  z-index: 10;
  margin-top:-3px;
}
.je-lightbox-nav:hover {
  opacity: 1;
}

.je-lightbox-prev {
  left: 30px;
}
.je-lightbox-next {
  right: 30px;
}
.dark .je-lightbox-prev svg, .dark .je-lightbox-next svg {
  stroke: #FFF;
}
.light .je-lightbox-prev svg, .light .je-lightbox-next svg {
  stroke: rgb(33, 37, 41);
}
.je-lightbox-img {
  opacity: 1;
  transition: opacity .35s ease;
}

.je-lightbox-img.is-fading {
  opacity: 0;
}

/*===== Pre ===== */

.dev-wrapper pre {
  display: block;
  margin-top: 0;
  bottom: 26px;
  overflow: auto;
  font-size: 0.875em;
  position: absolute;
  background: yellow;
  padding: 6px 10px;
  right: 2px;
  max-width: 90vw;              
  overflow: auto;
  white-space: pre-wrap;        /* erlaubt Umbruch */
  word-break: break-word;       /* bricht lange Wörter */
  overflow-wrap: anywhere;  
  border-radius: 4px;
  opacity: 0;
  visibility: hidden;
  transition: opacity .2s ease;
}
.dev-wrapper pre.is-visible {
  opacity: 1;
  visibility: visible;
}