body, html{
	scrollbar-gutter: stable;
}

#main {
	overflow-x: clip;
} 

#matchgame {
	width: 100%;
	overflow: visible;
	z-index: 1;
	margin: 0;
	padding: 0;
	max-width: initial;
	min-height: calc(100vh - 235px);
	padding-bottom: var(--gaplg);

	display: flex;
	flex-direction: column;
	justify-content: center;
}

#board {
	height: 474px;
	position: relative;
}

#board::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(255,255,255,0) no-repeat center 95%;
	background-image: url('/fileadmin/editors-projects/match/swipe-hint.svg');
	pointer-events: none;
	z-index: 2;
	opacity: 0;
	transition: opacity 0.3s ease-in;
}
.hint #board::after {
	opacity: 1;
}

.card,
#results div {
	width: 844px;
	height: 474px;
	position: absolute;
	top: 50%;
	left: 50%;
	border-radius: 1%;
	box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.1);
	transform: translateX(-50%) translateY(-50%) scale(0.95);
	background-color: #FFF;
	overflow: clip;
}
.card:last-child,
#results div{
	transform: translateX(-50%) translateY(-50%) scale(1);
}
.card {
	cursor: grab;
}

.card img {
	/* filter: grayscale(1); */
	opacity: 0.4;
	pointer-events: none;
	max-width: 100%;
	height: auto;
}

.card:last-child img,
#results img {
	/* filter: grayscale(0); */
	opacity: 1;
	transition: filter 2s ease-in-out, opacity 2s ease-in-out;
	max-width: 100%;
	height: auto;
}
#results div {
	background-color: transparent;
	border-radius: 0;
	box-shadow: none;
	opacity: 0;
	transition: opacity 1s ease-in-out;
}
#results div.act {
	opacity: 1;
}



.anicard .card:last-child {
	transition: transform 700ms ease-in !important;
}
.cardRight .card:last-child {
	transform: translateX(calc(-50% + 70vw) ) translateY(-30%) rotateZ(70deg) !important;
}
.cardLeft .card:last-child {
	transform: translateX(calc(-50% + -70vw) ) translateY(-30%) rotateZ(-70deg) !important;
}

#pagination {
	position: absolute;
	margin: 0 auto;
	width: 100%;
	max-width: 844px;
	display: flex;
	justify-content: end;
	gap: 0.5em;
	z-index: -1;
}
#pagination div {
	width: 1em;
	height: 1em;
	border-radius: 1em;
	border: 1px solid #666;
	background-color: transparent;
	transform: background-color 0.3s ease-in-out;
}
[data-round='1'] #pagination div:not( :nth-child(1) ~ div),
[data-round='2'] #pagination div:not( :nth-child(2) ~ div),
[data-round='3'] #pagination div:not( :nth-child(3) ~ div),
[data-round='4'] #pagination div:not( :nth-child(4) ~ div),
[data-round='5'] #pagination div:not( :nth-child(5) ~ div),
[data-round='6'] #pagination div:not( :nth-child(6) ~ div) {
	background-color: #666;

}

#matchinterface {
	display: flex;
    justify-content: center;
	flex-wrap: wrap;
	gap: 2em;
	padding-top: 2em;
}

#matchinterface > img {
	cursor: pointer;
	transition: transform 0.3s ease-out;
}
#matchinterface > img:hover {
	transform: scale(1.1);
}


.anicard #matchinterface > img {
	transition: opacity 1s ease-in-out;
	opacity: 0.3;
	pointer-events: none;
	user-select: none;
}
.done #matchinterface > img{ 
	display: none;
}

#feedback {
	width: 100%;
	pointer-events: none;
}

#feedback div {
	position: absolute;
	left: 50%;
	top: 55%;
	opacity: 0;

	margin-left: -10em;
	width: 20em;
}
@keyframes leftright {
	0%,100% {
		transform: translateX(10%);
	}
	50% {
		transform: translateX(-10%);
	}
}

#feedback img {
	width: 100%;
	height: auto;
	animation: leftright 900ms ease-in-out 0s infinite;
}

@keyframes moveup {
	0% {
		transform: translateY(0) scale(0.5);
		opacity: 0;
	}
	30%, 70% {
		opacity: 1;
	}
	100% {
		transform: translateY(-40em) scale(1.5);
		opacity: 0;
	}
}

.liked #icon-yes {
	animation: moveup 1500ms ease-in 0s 1;
}
.disliked #icon-no {
	animation: moveup 1500ms ease-in 0s 1;
}

#butt-more {
	display: none;
}
.done #butt-more {
	display: block;
}
#butt-more a {
	display: block;
	text-decoration: none;
	padding-bottom: 3em;
	background: url('../img/arrow-down.svg') no-repeat center bottom;
	background-size: 23px 23px;
	font-weight: bold;
}


@keyframes slideincrop {
	from {
		right: -19em;
	}
	to {
		right: -3em;
	}
	
}
#butt-cta {
	cursor: pointer;
	position: fixed;
	right: -19em;
	bottom: 2em;
	transition: transform 0.3s ease-out, right 1s ease-out;
	animation: slideincrop 1s ease-in-out 5s 1 both;
	z-index: 2;
}
#butt-cta:hover {
	transform: scale(1);
}

#butt-cta,
#c4570 .ce-gallery {
	scale: 0.9;
	transform-origin: right center;
}




.imgswitch img:nth-child(even) {
	display: none;
}


@media screen AND (max-width: 640px){
	.imgswitch img:nth-child(odd) {
		display: none;
	}
	.imgswitch img:nth-child(even) {
		display: block;
	}

	.card,
	#results div {
		width: 400px;
		max-width: calc(100vw - 4em);
		max-height: 550px;
		height: auto;
	}
	#board {
    	height: min(55em , calc(100vw / 44 * 55) );
	}

	#board::after {
		background-size: min(66%, 300px) auto;
		background-position: center 25%;
	}

	#pagination {
	    max-width: 44em;
		padding-inline: 2em;
		box-sizing: border-box;
		margin-top: -1.5em;
	}

	#c4440 h1,
	#c4440 .ce-bodytext {
    	padding-bottom: 0;
	}
	#butt-cta,
	#c4570 .ce-gallery {
        scale: 0.7;
        transform-origin: right center;
	}

	#cont #c4570 .ce-gallery {
		left: auto;
		right: 0;
	}


	.ce-intext.ce-nowrap .ce-gallery {
		float: right;
		max-width: 66%;
		margin-right: calc(var(--gap) * -1);
		padding-bottom: var(--gaplg);
	}

	.ce-intext.ce-nowrap .ce-bodytext {
		clear: both;
	} 
}

@media screen AND (max-width: 400px){

	.ce-intext.ce-nowrap .ce-gallery {
		float: none;
		max-width: calc(100% + 2 * var(--gap));
		margin-inline: calc(var(--gap) * -1);
	}
}

/* --- cta behind form --- */
#c4448,
#c4570 {
	z-index: 3;
	border-left: calc((100vw - 1450px) / 2) solid #fff;
	border-right: calc((100vw - 1450px) / 2) solid #fff;
	box-sizing: content-box;
	max-width: calc(1450px - 2 * var(--gaplg));
}
#footer{
	z-index: 3;
	position: relative;
	background-color: #fff;
}


/* --- form help ---- */
#c4570 {
    overflow: visible;
}
#c4570 .ce-gallery {
	position: absolute;
    top: -24em;
    left: calc(50% + 50vw - 19.5em);
	width: 182px;
    overflow: visible;
}

/* ---- Overlay ---- */

#c4447 {
	position: fixed;
	top:0;
	left: 0;
	width: 100%;
	max-width: initial;
	height: 100svh;
	background: url('../img/close.svg') no-repeat rgba(255, 255, 255, 0.8);
	background-position: calc(100% - 2em) 2em ;
	z-index: 10;
	pointer-events: none;
	cursor: pointer;
	opacity: 0;
	transition: opacity 0.3s ease-in-out;
}
#c4447 .ce-column{
	height: 100svh;
	display: flex;
    justify-content: center;
	align-items: center;
	float: none;
}
#c4447 img{
	max-height: 80svh;
	transform: scale(0.5);
	transition: transform 0.3s ease-in-out;
}
#c4447 .ce-gallery {
	float: none;
	margin: auto 2em;
}

.intro #c4447 {
	pointer-events: all;
	opacity: 1;
}
.intro #c4447 img {
	transform: scale(1);
}


#all.intro  {
	overflow: clip;
	height: 100vh;
}


/* ---- Haupttitel ---- */

#c4440 {
	margin-bottom: 0;
	padding-left: var(--gaplg);
}

/* ---- Zahlentitel ---- */
#c4562 header {
	padding-left: var(--gaplg);
}
#c4562 header > * {
	margin: 0 var(--colw);
}

/* titeltext */
#c4566 > .ce-textpic p {
    font-size: var(--txt);
}

/* ---- Pillen ---- */
.frame ol{
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	margin-left: 0;
	gap: 2em;
	padding: 1em 0 !important;
}
.frame ol li {
	background-color: #fff;
	border: 1px solid #666;
	border-radius: 3em;
	padding: 0.5em 1em 0.3em 3em;
	background: no-repeat 1em center #FFF;
	margin-left: 0;
}

.frame-box ol li {
	border: 0 none;
}
.frame-box ol li:nth-child(1) {
		background-image: url('../img/icon-finanz.svg');
}

.frame-box ol li:nth-child(2) {
	background-image: url('../img/icon-fair.svg');
}
.frame-box ol li:nth-child(3) {
	background-image: url('../img/icon-offen.svg');
}

.frame-layout-0 ol li {
	background-image: url('../img/icon-rendite.svg');
}
.frame-layout-1 ol li {
	background-image: url('../img/icon-lebensraum.svg');
}


/* ---- Abstände ---- */

.frame {
	padding-bottom: 0;
	margin-bottom: calc( var(--gaplg) * 3 );
}
.frame-box:has(+ .frame-box) {
	margin-bottom: 0;
}
#footer .frame {
	margin-bottom: 0;
}

#cont {
    padding-bottom: 0;
}

#main .frame-layout-1.frame-default .ce-below .ce-gallery {
	margin-top: 3em;
}

@media (max-width: 1030px) {
    .frame {
		margin-bottom: calc( var(--gaplg) * 6 );
	}
	#metanav {
        display: block;
    }
	.navtoggle {
		display: none;
	}
}