/* general */
.gahli-base-contents {
    display: contents;
}

.hidden {
    display: none!important;
}

/* random form */
.random_form_bild {
    position: relative;
    min-height: 180px;
}

.random_form_bild, .random_form_bild_inside img {
    border-radius: 48% 52% 73% 27% / 31% 40% 60% 69%;
    overflow: hidden;
}

.random_form_bild:has(img) img {
    object-fit: cover;
    width: 100%;
    max-width: unset;
    height: 100%;
    margin: 0;
    object-position: center;
    position: absolute;
}

.random_form_bild:has(figure) figure, figure.random_form_bild {
    width: 100%;
    height: 100%;
}

/* page change overlay */
#gahli-animation-overlay {
    position: fixed;
    top: -50%;
    left: -50%;
    transform: translate(0%, 0px);
    transform: translateX(-100%);
    width: 200%;
    height: 200%;
    background: white;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 999999;
    border-radius: 32% 68% 71% 29% / 38% 26% 74% 62%;
}

/* lottie */
.gahli_animation_lottie {
    width: 100%;
    max-width: 250px;
    aspect-ratio: 1;
    background: #ebebeb;
    transition: 1s;
    border-radius: 42% 58% 32% 68% / 39% 64% 36% 61%;
    overflow: hidden;
}

/* loading elements */
.gahli-base-loading {
    display: grid;
    grid-template-columns: 40px auto;
    grid-template-rows: 40px;
    align-items: center;
    gap: 20px;

    p {
        margin: 10px auto;
    }
}

.gahli-base-loading::before,
.gahli-base-loading::after {
    aspect-ratio: 1;
    content: "";
    grid-area: 1/1;
    border: 6px solid;
    border-radius: 50%;
    border-color: black black #0000 #0000;
    mix-blend-mode: darken;
    animation: gahliLoadingAnimation 1s infinite linear;
}

.gahli-base-loading::after {
    border-color: #0000 #0000 black black;
    animation-direction: reverse;
    animation: gahliLoadingAnimation 3s infinite linear;
}

@keyframes gahliLoadingAnimation{ 
    100% { transform: rotate(1turn) }
}

.gahli-base-loading-card {
    position: relative;
    overflow: hidden;
}

.gahli-base-loading-card > * {
    opacity: 0.7;
    transition: opacity 0.3s;
}

.gahli-base-loading-card::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(
        110deg,
        transparent 20%,
        color-mix(in srgb, currentColor 5%, transparent) 40%,
        color-mix(in srgb, currentColor 9%, transparent) 50%,
        color-mix(in srgb, currentColor 5%, transparent) 60%,
        transparent 80%
    );
    width: 200%;
	transform: translateX(-100%);
	animation: gahli-card-loading-shimmer 1.5s ease-in-out infinite;
	pointer-events: none;
}

@keyframes gahli-card-loading-shimmer {
	100% {
		transform: translateX(100%);
	}
}

@media (prefers-reduced-motion: reduce) {
	.gahli-base-loading-card::after {
		animation: none;
		opacity: 0.5;
	}
}

/* Lagerdraht */
.gahli-lagerdraht {
    height: 90px;
	cursor: pointer;
	transition: transform .8s cubic-bezier(.18,.89,.33,1.11), .3s;
    overflow: hidden;
}

.gahli-lagerdraht:not(.open) > div > *:not(h1, h2, h3, h4) {
	opacity: 0;
}

.gahli-lagerdraht:not(.open):hover {
    transform: scale(1.02) !important;
}

.gahli-lagerdraht > div > * {
	transition: .8s cubic-bezier(.18,.89,.33,1.11), .3s;
}

.gahli-lagerdraht h1, .gahli-lagerdraht  h2, .gahli-lagerdraht h3, .gahli-lagerdraht h4 {
    max-width: 100%;
    white-space: nowrap;
    word-wrap: break-word;
    text-overflow: ellipsis;
    overflow: hidden;
}

.gahli-lagerdraht > div:empty {
    display: none;
}

.gahli-lagerdraht.open h1, .gahli-lagerdraht.open  h2, .gahli-lagerdraht.open h3, .gahli-lagerdraht.open h4 {
    white-space: unset;
}

@media only screen and (max-width: 780px) {
    .gahli-lagerdraht {
        flex-direction: column;
    }
}