.faq_sidebar-layout {
    --transition-duration: 300ms;
    --accordion-bg: rgba(255, 255, 255, 0.6);
    --accordion-active-bg: #fff;
    --icon-bg: var(--tertiary-coral);
    padding-block: max(4rem, calc(8.75 * var(--su)));
    background: var(--ex-lucht);
}

/* Section head */
.faq_sidebar-layout .pk-section-head {
    margin-bottom: max(2rem, calc(3 * var(--su)));
}

.faq_sidebar-layout .pk-section-head .pk-heading {
    margin-bottom: max(1rem, calc(1 * var(--su)));
    color: var(--ex-grey-blue);
    font-size: var(--scaling-h2);
}

/* Sidebar */
.faq_sidebar-layout .sidebar-col {
    position: relative;
}

.faq_sidebar-layout .pk-sidebar_card {
    position: sticky;
    top: max(5rem, calc(8 * var(--su)));
    color: var(--ex-white);
    padding: max(2rem, calc(2 * var(--su)));
    border-radius: max(1rem, calc(1 * var(--su)));
    background: var(--ex-grey-blue);
}

.faq_sidebar-layout .pk-sidebar_avatar {
    position: relative;
    width: max(4rem, calc(4 * var(--su)));
    height: max(4rem, calc(4 * var(--su)));
    margin-bottom: max(1.25rem, calc(1.25 * var(--su)));
    border-radius: 999px;
    overflow: visible;
}

.faq_sidebar-layout .pk-sidebar_avatar img {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 999px;
    object-fit: cover;
}

.faq_sidebar-layout .pk-sidebar_avatar-badge {
    position: absolute;
    top: -0.25rem;
    right: -0.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: max(1.5rem, calc(1.5 * var(--su)));
    height: max(1.5rem, calc(1.5 * var(--su)));
    border-radius: 999px;
    background: #4c5465;
}

.faq_sidebar-layout .pk-sidebar_avatar-badge svg {
    width: max(0.5rem, calc(0.5 * var(--su)));
    height: max(0.5rem, calc(0.5 * var(--su)));
}

.faq_sidebar-layout .pk-sidebar_title {
    margin: 0 0 max(0.75rem, calc(0.75 * var(--su)));
    color: var(--ex-white);
    font-size: var(--scaling-h4);
    font-weight: 500;
    line-height: 1.3;
}

.faq_sidebar-layout .pk-sidebar_text {
    margin: 0 0 max(1.5rem, calc(1.5 * var(--su)));
    font-size: var(--desktop-body-sm);
    line-height: 1.6;
}

.faq_sidebar-layout .pk-cta-link {
    display: inline-flex;
    align-items: center;
    gap: max(0.5rem, calc(0.5 * var(--su)));
    color: var(--ex-grey-blue);
    text-decoration: none;
}

.faq_sidebar-layout .pk-cta-link::after {
    content: "\e5e1";
    font-family: "Material Symbols Outlined";
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: max(1.75rem, calc(1.75 * var(--su)));
    height: max(1.75rem, calc(1.75 * var(--su)));
    font-size: max(0.7rem, calc(0.7 * var(--su)));
    border: 1px solid var(--ex-border);
    border-radius: 999px;
    transition:
        border-color 0.2s ease,
        transform 0.2s ease;
}

.faq_sidebar-layout .pk-cta-link:hover::after {
    border-color: var(--ex-grey-blue);
    transform: translateX(3px);
}

/* White variant inside the dark sidebar card */
.faq_sidebar-layout .pk-sidebar_card .pk-cta-link {
    color: var(--ex-white);
}

.faq_sidebar-layout .pk-sidebar_card .pk-cta-link::after {
    border-color: rgba(255, 255, 255, 0.4);
}

.faq_sidebar-layout .pk-sidebar_card .pk-cta-link:hover::after {
    border-color: var(--ex-white);
}

.faq_sidebar-layout .pk-sidebar_illu {
    margin-top: max(1rem, calc(1 * var(--su)));
    margin-left: auto;
}

.faq_sidebar-layout .pk-accordion {
    display: flex;
    flex-direction: column;
    gap: max(1rem, calc(1 * var(--su)));
    padding-block: max(1.5rem, calc(2 * var(--su)));
    padding-inline: max(1.5rem, calc(3.5 * var(--su)));
    border-radius: max(1rem, calc(1.5 * var(--su)));
    background: var(--ex-white);
    overflow: hidden;
}

.faq_sidebar-layout .pk-accordion-item {
    /* padding-block: max(1.5rem, calc(2 * var(--su))); */
    transition: background-color var(--transition-duration) ease-in-out;
}

.faq_sidebar-layout .pk-accordion-item-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-block: max(1rem, calc(1 * var(--su)));
    cursor: pointer;
    border-bottom: 1px solid rgba(var(--ex-grey-blue-rgb), 0.2);
}

.faq_sidebar-layout .pk-accordion-title {
    margin-bottom: 0;
    display: flex;
    align-items: center;
    gap: max(1rem, calc(1 * var(--su)));
    font-size: var(--scaling-h6);
}

.faq_sidebar-layout .pk-accordion-title span {
    font-size: 1em;
}

.faq_sidebar-layout .pk-accordion-icon {
	display: flex;
	justify-content: center;
	align-items: center;
    width: max(2rem, calc(2 * var(--su)));
    height: max(2rem, calc(2 * var(--su)));
	color: var(--ex-red);
	padding: max(.5rem, calc(.5 * var(--su)));
    border-radius: 999px;
	border: 1px solid var(--ex-grey-blue-10);
    transition: rotate var(--transition-duration) ease-out;
}

.faq_sidebar-layout .pk-accordion-item.active .pk-accordion-icon {
    rotate: 180deg;
}

.faq_sidebar-layout .pk-accordion-icon span {
    font-size: max(1rem, calc(1 * var(--su)));
    line-height: 1;
}

.faq_sidebar-layout .pk-accordion-item.active .pk-accordion-icon {
    color: var(--ex-white);
	border: 1px solid rgba(var(--ex-red-rgb), 0.6);
    background: var(--ex-red);
}

.faq_sidebar-layout .pk-accordion-item.active {
    background-color: var(--accordion-active-bg);
}

.faq_sidebar-layout .pk-accordion-item .pk-accordion-item-content {
    display: grid;
    opacity: 0;
    padding-right: max(2rem, calc(4.5 * var(--su)));
    padding-top: 0;
    grid-template-rows: 0fr;
    transition:
        grid-template-rows var(--transition-duration) ease-in-out,
        opacity var(--transition-duration) ease-in-out,
        padding-top var(--transition-duration) ease-in-out;
}

.faq_sidebar-layout .pk-accordion-item .pk-accordion-content-wrapper {
    line-height: 1.5;
    overflow: hidden;
}

.faq_sidebar-layout .pk-accordion-punten {
    display: flex;
    flex-wrap: wrap;
    gap: max(0.75rem, calc(0.75 * var(--su)));
    margin-top: max(1rem, calc(1 * var(--su)));
    margin-bottom: 0;
    padding: 0;
    list-style: none;
}

.faq_sidebar-layout .pk-accordion-punt {
    display: flex;
    align-items: center;
    gap: max(0.5rem, calc(0.5 * var(--su)));
    padding-block: max(0.625rem, calc(0.625 * var(--su)));
    padding-inline: max(1rem, calc(1 * var(--su)));
	margin-bottom: 0;
    border: 1px solid var(--ex-border);
    border-radius: max(0.5rem, calc(0.5 * var(--su)));
    font-size: var(--desktop-body-xs);
    color: var(--ex-grey-blue);
}

.faq_sidebar-layout .pk-accordion-punt::before {
    font-family: "Material Symbols Outlined";
    content: "\e5ca";
    flex-shrink: 0;
    font-size: max(0.875rem, calc(0.875 * var(--su)));
    color: var(--ex-grey-blue);
}

.faq_sidebar-layout .pk-accordion-item.active .pk-accordion-item-content {
    opacity: 1;
    grid-template-rows: 1fr;
    padding-top: max(1rem, calc(1 * var(--su)));
}

@media (max-width: 767px) {
	.faq_sidebar-layout .pk-grid-container{
		gap: max(1.5rem, calc(2 * var(--su)));
	}

	.faq_sidebar-layout .pk-accordion-item.active .pk-accordion-item-content {
		padding-inline: 0;
	}
}