:root {
    --opg-gallery-fade-transition: opacity .4s ease-out;
    --opg-gallery-slide-transition: transform .4s ease-out;
    --opg-thumb-min-width: calc(50% - .25rem);
    --opg-thumb-max-width: calc(50% - .25rem);
}

.onepager-box {
    display: grid;
    gap: 1.25em;
}

.onepager-quicklinks {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: .5em 1em;
}

.grp .onepager-list > h2.hide {
    max-height: 1px;
    margin: 0;
    padding: 0;
    overflow: hidden;
    clip: rect(0,0,0,0);
    clip-path: polygon(0 0,0 0,0 0,0 0);
}

.onepager-item {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-auto-flow: dense;
    gap: 1.25em;
}

.onepager-item:not(:last-child) {
    margin-bottom: 2.5em;
}

.onepager-item-gallery .cst-image-type-floorplan {
    width: 100%;
    height: 100%;
    background-color: #fff;
    object-fit: contain;
    aspect-ratio: var(--_onepager-gallery-ratio);
}

.onepager-item-gallery-fade {
    position: relative;
}

.onepager-item-gallery-fade img {
    transition: var(--opg-gallery-fade-transition);
    cursor: zoom-in;
}

.onepager-item-gallery-fade picture:not(:first-child) img {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0;
    pointer-events: none;
}

s:target ~ .onepager-item-gallery-fade img {
    opacity: 0;
    pointer-events: none;
}

.onepager-item-thumbs {
    position: relative;
}

.onepager-item-thumb {
    transition: var(--opg-gallery-slide-transition);
}

.onepager-item-thumbs-slide.purecss-slider {
    display: block;
    overflow-x: hidden;
    margin-top: .5rem;
}

.touchevents .onepager-item-thumbs-slide .purecss-slider-slides {
    scroll-snap-type: x mandatory;
}

.onepager-item-thumbs-slide .purecss-slider-slides {
    display: flex;
    overflow: hidden;
}

.touchevents .onepager-item-thumbs-slide .purecss-slider-slides {
    overflow-x: auto;
}

.onepager-item-thumbs-slide .purecss-slider-slides > * {
    min-width: var(--opg-thumb-min-width);
    max-width: var(--opg-thumb-max-width);
    margin-right: .5rem;
    scroll-snap-align: start;
}

.onepager-item-thumbs-slide .purecss-slider-slides > *:last-child {
    margin-right: 0;
}

.onepager-item-thumbs .purecss-prevnext {
    position: unset;
    pointer-events: none;
}

.onepager-item-thumbs .purecss-prevnext > div {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    display: flex;
    justify-content: space-between;
    transform: translateY(-50%);
}

.touchevents .onepager-item-thumbs .purecss-prevnext {
    pointer-events: none;
    opacity: .7;
}

.onepager-item-thumbs .purecss-prevnext > div:not(:first-child) a,
s:target ~ .onepager-item-thumbs .purecss-prevnext > div a {
    visibility: hidden;
    pointer-events: none;
}

.onepager-item-thumbs .purecss-prevnext a {
    opacity: 1;
}

.onepager-item-accordion {
    background: var(--template-color-white);
}

.no-touchevents .onepager-item-thumbs .purecss-prevnext a {
    pointer-events: auto;
}

.onepager-item-actions {
	display: flex;
	flex-wrap: wrap;
	gap: .5em 1em;
}

@media (max-width: 960px) {
    .onepager-item-headline,
    .onepager-item-teaser,
    .onepager-item-gallery {
        order: -1;
    }

    .onepager-item-accordion {
        order: 1;
    }

    .onepager-item-headline,
    .onepager-item-teaser,
    .onepager-item-description,
    .onepager-item-gallery,
    .onepager-item-meta,
    .onepager-item-price,
    .cst-button-accordion,
    .onepager-item-accordion {
        grid-column: -1/1;
    }

	.onepager-item-box {
		display: contents;
	}
}

@media (min-width: 961px) {
    .onepager-item {
        grid-template-columns: 1fr 1fr 1fr 1fr;
        grid-template-areas: 
            "opgheadline opgheadline opggal opggal"
            "opgteaser opgteaser opggal opggal"
            "opgdesc opgdesc opggal opggal"
            "opgmeta opgmeta opggal opggal"
            "opgrequest opgbook opggal opggal"
            "ogpacchl ogpacchl opggal opggal"
            "opgacc opgacc opgacc opgacc";
    }

	.onepager-item-cssmode-box {
		grid-template-columns: 1fr 1fr;
		grid-template-areas: initial;
		gap: 0;
	}

	.onepager-item-box {
		padding: 40px;
	}

	.onepager-item-box-right {
		padding: 0;
	}

	:where(.onepager-item-box) :is(
		.onepager-item-teaser, 
		.onepager-item-description, 
		.onepager-item-meta, 
		.onepager-item-actions
	) {
		margin-block: 1em;
	}

    .onepager-item-headline {grid-area: opgheadline;}
    .onepager-item-teaser {grid-area: opgteaser;}
    .onepager-item-description {grid-area: opgdesc;}
    .onepager-item-meta {grid-area: opgmeta;}
    .onepager-item .cst-requestform {grid-area: opgrequest;}
    .onepager-item .cst-bookform {grid-area: opgbook;}
    .onepager-item-gallery {grid-area: opggal;}
    .cst-button-accordion {grid-area: ogpacchl;}
    .onepager-item-accordion {grid-area: opgacc}
}