{##########################################}
{#### lichtline GmbH ######################}
{#### it@lichtline.com ####################}
{##########################################}

{##########################################}
{#### CSS Code ############################}
{##########################################}

/* Bildliste ohne Aufzählungszeichen */
.image-gallery_list {
    list-style-type: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    width: 100%;
}

/* Listenelemente nebeneinander */
.image-gallery_listelement {
    display: inline-block;
    position: relative; 
    margin: 0px;
}

/* Bild und Caption vertikal ausrichten */
.image-gallery_figure {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    position: relative;
    margin: 0px;
}

/* Bildgröße */
.image-gallery_image {
    height: auto;
    display: block;
}

/* Caption */
figcaption.image-gallery_caption {
    pointer-events: none;
    position: absolute;
    border-radius: 35px;
    padding: 8px 12px;
    text-align: center;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
    min-width: fit-content;
    width: auto;
    white-space: normal;
    z-index: 10;
}

figcaption.image-gallery_caption.below {
    top: 120%; 
    left: 50%;
    transform: translateX(-50%);
}

figcaption.image-gallery_caption.above {
    bottom: 120%; 
    left: 50%;
    transform: translateX(-50%);
}

figcaption.image-gallery_caption.left {
    top: 50%;
    right: 130%; /* Positioniert die Caption links vom Bild */
    transform: translateY(-50%);
}

figcaption.image-gallery_caption.right {
    top: 50%;
    left: 130%; /* Positioniert die Caption rechts vom Bild */
    transform: translateY(-50%);
}

/* Caption beim Hover einblenden */
li.image-gallery_listelement:hover .image-gallery_caption,
li.image-gallery_listelement:focus .image-gallery_caption,
li.image-gallery_listelement:active .image-gallery_caption {
    opacity: 1;
}

figcaption.image-gallery_caption::after{
    content: '';
	position: absolute;
	width: 0;
	height: 0;
    pointer-events: none;
}

figcaption.image-gallery_caption.right::after{
	left: 5px;
	top: 50%;
    border-right-width: 10px;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
	border-left: 0;
	margin-top: -10px;
	margin-left: -10px;
}

figcaption.image-gallery_caption.left::after{
	right: 5px;
	top: 50%;
    border-left-width: 10px;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
	border-right: 0;
	margin-top: -10px;
	margin-right: -10px;
}

figcaption.image-gallery_caption.above::after{
	bottom: 5px;
    left: 50%;
    border-bottom-width: 10px;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
	border-bottom: 0;
	margin-bottom: -10px;
	margin-left: -10px;
}

figcaption.image-gallery_caption.below::after{
	top: 5px;
    left: 50%;
    border-top-width: 10px;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
	border-top: 0;
	margin-top: -10px;
	margin-left: -10px;
}