.mira_content_d1-layout {
    --inactive-bg: transparent;
    --active-bg: var(--primary-jade);
    --icon-inactive: var(--secondary-blue);
    --icon-active: #ffffff;
    --progress-bg: rgba(255, 255, 255, 0.2);
    --progress-thumb: #ffffff;

    --foldout-duration: 300ms;
}

.mira_content_d1-layout .content > .pk-heading {
	margin-bottom: max(2rem, calc(3 * var(--su)));
}

.mira_content_d1-layout .item-container {
    gap:max(1.5rem, calc(1.5 * var(--su)));
}

.mira_content_d1-layout .buttons {
    display: flex;
    place-items: end;
    align-items: end;
    justify-content: end;
}

.mira_content_d1-layout .items {
    display: flex;
    flex-direction: column;
	justify-content: space-between;
	height: 100%;
    gap: max(1rem, calc(1 * var(--su)));
}

.mira_content_d1-layout .items .item {
    cursor: pointer;
    padding: max(1.5rem, calc(2 * var(--su)));
    background-color: var(--inactive-bg);
    border: 1px solid var(--deep-pine-10);
    transition: background-color var(--foldout-duration) ease-in-out;
}

.mira_content_d1-layout .item .progress-bar {
    height: 1px;
    width: 100%;
    background-color: var(--progress-bg);
}

.mira_content_d1-layout .item .progress-bar .progress {
    background-color: var(--progress-thumb);
    height: 1px;
    width: 30%;
}

.mira_content_d1-layout .item.active {
    background-color: var(--active-bg);
    color: #ffffff;
}

.mira_content_d1-layout .item .item-title {
    display: flex;
    align-items: center;
    gap: max(0.75rem, calc(1.5 * var(--su)));
    color: inherit;
	font-weight: 800;
    margin-bottom: 0;
}
.mira_content_d1-layout .item:not(.active) .item-title {
	color: var(--secondary-blue);
}

.mira_content_d1-layout .item .content {
    display: grid;
    grid-template-rows: 0fr;
    transition:
        grid-template-rows var(--foldout-duration) ease-in-out,
        margin-top var(--foldout-duration) ease-in-out;
}

.mira_content_d1-layout .item .content-wrapper {
    overflow: hidden;
    transition: margin-bottom var(--foldout-duration) ease-in-out;
}

.mira_content_d1-layout .item .content-wrapper p {
    margin-bottom: max(1rem, calc(2 * var(--su)));
}

.mira_content_d1-layout .item .dienst-icon {
	display: flex;
	align-items: center;
	justify-content: center;
    width: 1.25em;
    height: 1.25em;
	padding: max(0.5rem, calc(0.5 * var(--su)));
    background-color: var(--icon-inactive);
    transition: background-color var(--foldout-duration) ease-in-out;
}
.mira_content_d1-layout .item .dienst-icon svg {
    fill: #ffffff;
    height: auto;
}
.mira_content_d1-layout .item.active .dienst-icon svg {
    fill: var(--primary-jade);
}

.mira_content_d1-layout .item.active .dienst-icon {
    background-color: var(--icon-active);
}

.mira_content_d1-layout .item.active .content {
    margin-top: max(1rem, calc(2 * var(--su)));
    grid-template-rows: 1fr;
}

.mira_content_d1-layout .item .content .pk-button-group {
    margin-block: max(1rem, calc(2 * var(--su)));
}

.mira_content_d1-layout .images {
    display: grid;
    grid-template-areas: "stack";
    height: 100%;
    overflow: clip;
}

.mira_content_d1-layout .images a {
	position: relative;
	display: block;
	grid-area: stack;
    transition: opacity var(--foldout-duration) ease-in-out;
}
.mira_content_d1-layout .images a::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(75deg, rgba(1, 35, 80, 0.30) -5.82%, rgba(1, 35, 80, 0.00) 100%);
	pointer-events: none;
	z-index: 2;
	transition: opacity 0.3s ease;
}
.mira_content_d1-layout .images a:hover::before {
	opacity: 0.5;
}
.mira_content_d1-layout .images a img {
	position: relative;
	z-index: 1;
	width: 100%;
    height: 100%;
    object-fit: cover;
    aspect-ratio: 1;
}
.mira_content_d1-layout .images a .content-wrapper {
	position: absolute;
	bottom: 0; 
	left: 0;
	z-index: 3;
	padding: max(1.5rem, calc(2.5 * var(--su)));
	color: #ffffff;
}
.mira_content_d1-layout .images a .pk-heading {
	color: inherit;
}
.mira_content_d1-layout .images a .categories {
	display: flex;
	flex-wrap: wrap;
	gap: max(0.5rem, calc(0.5 * var(--su)));
	margin-bottom: max(0.75rem, calc(1.125 * var(--su)));
}
.mira_content_d1-layout .images a .kennis-label {
    background-color: #ffffff;
	color: var(--deep-pine-100);
}

@media only screen and (max-width: 992px) {
    .mira_content_d1-layout .buttons {
        place-items: start;
        align-items: start;
        justify-content: start;
        margin-top: max(1rem, calc(2 * var(--su)));
    }
}