#koebsproces-overview {
    background-image: url('/global/images/natur_hvor_der_kan_ligge_et_hus.webp');
    background-position-x: center;
    background-position-y: top;
    background-size: cover;
    padding-bottom: var(--section-padding-y);
}

.subtitle-icon {
    width:var(--subtitle-icon-size);
    height:var(--subtitle-icon-size);
    display:block;
    position:absolute;
    transform:translate(calc(var(--section-padding-x-big) * 1), calc(var(--subtitle-icon-size) / -2 - calc(var(--step-line-width) / 2)));
}

.subtitle-icons {
    display:block;
    position:absolute;
    transform:translate(calc(var(--section-padding-x-big) * 1), calc(var(--subtitle-icon-size) / -2 - calc(var(--step-line-width) / 2)));
}

.subtitle-icons step-icon {
    width:var(--subtitle-icon-size);
    height:var(--subtitle-icon-size);
}
/*
.subtitle-icons a {
     opacity:0.5;
}*/

step-top-section {
    display:block;
    margin-top: calc(var(--subtitle-icon-size) / 2);
}

text-and-image {
    display:flex;
    justify-content: space-between;
}


text-and-image text-data {
    max-width: var(--max-width-text);
}

text-and-image img {
    max-height:50vh;
    min-width: 33%;
    object-fit: contain;
}

.step-main-section h3:first-of-type{
    padding-top:0;
}
.step-main-section h3:last-of-type{
    padding-bottom:0;
}

.koebsproces_float_image {
    display: block;
    float:right;
    width:20vw;
}

step-top-section rounded-box {
    margin-top: calc(var(--section-padding-y) / 4);
}

#top {
    background-color: var(--top-bg-color) !important;
}

foldable-box {
    display: block;
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transform: translateY(-0.5rem);
    transition: max-height 320ms ease, opacity 240ms ease, transform 280ms ease;
    will-change: max-height, opacity, transform;
    pointer-events: none;
}

foldable-box.expanded {
    display: block;
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

read-more {
    user-select: none;
}

read-more.read-more-toggle {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    margin-top: 0.5rem;
    width: fit-content;
    padding: 0.35rem 0.65rem;
    border: 1px solid color-mix(in srgb, currentColor 20%, transparent);
    border-radius: 999px;
    background: color-mix(in srgb, currentColor 6%, transparent);
    color: var(--link-color);
    cursor: pointer;
    font-weight: 500;
    line-height: 1.2;
    transition: color 180ms ease, background-color 180ms ease, border-color 180ms ease;
}

read-more.read-more-toggle:hover {
    color: var(--link-hover-color);
    background: color-mix(in srgb, var(--link-color) 10%, transparent);
    border-color: color-mix(in srgb, var(--link-color) 35%, transparent);
}

read-more.read-more-toggle:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 3px;
}

read-more.read-more-toggle::after {
    content: "";
    width: 0.45rem;
    height: 0.45rem;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-1px) rotate(45deg);
    transition: transform 220ms ease;
}

read-more.read-more-toggle.expanded::after {
    transform: translateY(1px) rotate(-135deg);
}

@media (prefers-reduced-motion: reduce) {
    foldable-box {
        transition: none;
    }

    read-more.read-more-toggle,
    read-more.read-more-toggle::after {
        transition: none;
    }
}