.compare-table {
    --compare-table-column-count: 1;
    --compare-table-column-border: 1px solid var(--color-font-light);
    --compare-table-line-height: 1.2;
    --compare-table-details-chevron-size: var(--font-size-m);
    --compare-table-min-width: 640px;

    display: flex;
    flex-direction: column;
    gap: var(--spacing-normal);
    font-family: var(--font-family-text);
    font-size: var(--font-size-normal);
    width: 100%;
    max-width: var(--content-wide-max-width);
    margin-inline: auto;
}

.compare-table[data-column-count] {
    overflow-x: auto;
}

.compare-table[data-column-count="2"] {
    --compare-table-column-count: 2;
}

.compare-table[data-column-count="3"] {
    --compare-table-column-count: 3;
}

.compare-table[data-column-count="4"] {
    --compare-table-column-count: 4;
}

.compare-table__table--no-borders {
    --compare-table-column-border: none;
}

.compare-table__scroll-wrapper {
    min-width: var(--compare-table-min-width);
}

.compare-table__table {
    display: flex;
    flex-direction: column;
    border: var(--compare-table-column-border);
}

.compare-table__no-items {
    margin: 0;
    text-align: center;
}

.compare-table__spinner {
    margin-inline: auto;
}

.compare-table__row {
    display: grid;
    grid-template-columns: 2fr repeat(var(--compare-table-column-count), 3fr);
    width: 100%;
}

.compare-table__table:not(.compare-table__table--no-borders) .compare-table__row:not(.compare-table__header):nth-child(odd) {
    background-color: var(--color-font-o-05);
}

.compare-table__row:not(:last-child) {
    border-bottom: var(--compare-table-column-border);
}

.compare-table__cell:not(:last-child) {
    border-right: var(--compare-table-column-border);
}

.compare-table__header {
    --compare-table-column-border: 1px solid var(--color-primary-o-10);

    background-color: var(--color-primary-light);
}

.compare-table__header-title {
    font-size: var(--font-size-m);
    color: var(--color-primary);
    line-height: var(--compare-table-line-height);
    margin: 0;
    -webkit-hyphens: auto;
            hyphens: auto;
}

.compare-table__cell {
    padding: var(--spacing-normal);
    -webkit-hyphens: auto;
            hyphens: auto;
}

.compare-table__cell > * {
    -webkit-hyphens: auto;
            hyphens: auto;
}

.compare-table__cell > *:first-child{
    margin-top: 0 !important;
}

.compare-table__cell > *:last-child{
    margin-bottom: 0 !important;
}

.compare-table__row-title {
    font-size: var(--acatech-font-size-normal);
    font-weight: var(--font-weight-text-bold);
    margin: 0;
    line-height: var(--compare-table-line-height);
}

.compare-table__text {
    margin: 0;
    line-height: var(--compare-table-line-height);
}

.compare-table__details:not([open]) {
    border-bottom: var(--compare-table-column-border);
}

.compare-table__details-summary {
    font-family: var(--font-family-text);
    font-size: var(--font-size-m);
    color: var(--color-primary);
    line-height: var(--compare-table-line-height);
    margin: 0;
    padding: var(--spacing-l) 0;
    list-style: none;
    position: relative;
    cursor: pointer;
}

.compare-table__details-summary:is(:hover, :focus-visible) {
    color: var(--color-primary-light);
}

.compare-table__details-summary::-webkit-details-marker {
    list-style: none;
}

.compare-table__details-summary::after {
    content: '';
    display: block;
    position: absolute;
    top: var(--spacing-l);
    right: 0;
    background-color: var(--color-primary);
    -webkit-mask-position: center;
            mask-position: center;
    -webkit-mask-size: contain;
            mask-size: contain;
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-image: var(--icon-caret-down);
            mask-image: var(--icon-caret-down);
    height: var(--compare-table-details-chevron-size);
    width: var(--compare-table-details-chevron-size);
}

.compare-table__details-summary:is(:hover, :focus-visible)::after {
    background-color: var(--color-primary-light);
}

.compare-table__details[open] .compare-table__details-summary::after {
    rotate: 180deg;
}

.compare-table__details:not(:has(.compare-table__table > *:first-child)) {
    display: none;
}

.compare-table__cell p.compare-table__link-title {
    margin-top: var(--spacing-l) !important;
    font-weight: var(--font-weight-text-bold);
}