html, body {
	overscroll-behavior: none;
}

body {
	margin: 0;
	height: 100vh;
}

#heizig {
	color: black;
	cursor: pointer;
	--marker: 4vw;
	height: calc(100% - var(--marker) * 2);
	width: calc(100% - var(--marker) * 2);
	padding: var(--marker);
}

#heizig.okok {
	--front: indigo;
	color: orangered;
	background: linear-gradient(180deg, var(--front) 20%, currentColor 80%);
}

#heizig.okok > div {
	background: linear-gradient(0deg, var(--front), currentColor 90%);
}

#heizig.okok > div > div:nth-child(2n + 2) {
	background: linear-gradient(180deg, var(--front), currentColor 90%);
}

#heizig > div {
	display: flex;
	height: calc(100% - var(--marker));
	border-bottom: var(--marker) solid;
}

#heizig > div > div {
	height: calc(100% - var(--marker) * 1.75);
	width: 50%;
	border-left: var(--marker) solid;
	border-top: var(--marker) solid;
}

#heizig > div > div:nth-child(2n + 1) {
	border-left: var(--marker) solid;
	height: calc(100% - var(--marker) * 1.75);
}

#heizig > div > div:nth-child(2n + 2) {
	border-top: none;
	border-bottom: var(--marker) solid;
	border-right: none;
}

#heizig > div > div:last-child {
	width: 0;
}

#heizig > div > div:first-child,
#heizig > div > div:last-child {
	height: 100%;
}