/* CSS Document */

.kk-top-placeholder {
	height:116px;
}
@media (min-width: 992px) {
	.kk-top-placeholder {
		height:188px;
	}
}

.kk-block {
	position:relative;
}

.kk-block .kk-next-previous {
	position:fixed;
	top:var(--navi-height-mobile);
	left:0px;
	width:100%;
	height:50px;
	z-index:11;

	display:flex;
	justify-content:center; /* x */
	align-items:center; /* y */

	text-align:center;
	background-color:var(--color-body);
}

.kk-block .kk-next-previous::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 2px;
	background: linear-gradient(to right, transparent 0%, var(--color-primary) 15%, var(--color-primary) 85%, transparent 100%);

	margin-bottom:0px;
}

body.is-admin .kk-block .kk-next-previous {
	top:calc( var(--navi-height-mobile) + var(--is-admin) );
}
@media (min-width: 992px) {
	.kk-block .kk-next-previous {
		top:var(--navi-height-desktop);
	}

	body.is-admin .kk-block .kk-next-previous {
		top:calc( var(--navi-height-desktop) + var(--is-admin) );
	}
}

.kk-block .kk-next-previous .previous,
.kk-block .kk-next-previous .next {
	font-size:32px;
	line-height:1.2;
}

.kk-block .kk-next-previous a,
.kk-block .kk-next-previous a:link,
.kk-block .kk-next-previous a:visited,
.kk-block .kk-next-previous a:focus,
.kk-block .kk-next-previous a:hover,
.kk-block .kk-next-previous a:active {
	text-decoration:none !important;
	background-color:transparent !important;
	color:#ffffff !important;
}

.kk-block .kk-next-previous a:focus,
.kk-block .kk-next-previous a:hover {
	color:var(--color-primary) !important;
}

.kk-block .kk-next-previous .previous {
	position:absolute;
	left:12px;
	top:-2px;
}
.kk-block .kk-next-previous .next {
	position:absolute;
	right:14px;
	top:-2px;
}

.kk-block .kk-next-previous h1 {
	display:block;
	margin:0px 0px 0px 0px;
	padding:0px;

	line-height:1;
	font-size:32px;
	letter-spacing:3px;
}
@media (min-width: 992px) {
	.kk-block .kk-next-previous h1 {
		font-size:30px;
		line-height:1;
	}
}

/* =========================================================================== */

.kk-block h2,
.kk-block .h2 {
	position: sticky;
	top:calc( var(--navi-height-mobile) + 50px );
	z-index: 10;

	width:100%;
	height:50px !important;

	overflow:hidden;
	margin-bottom:0px !important;

	display:flex;
	justify-content:center;
	align-items:center;
	text-align:center;
/*		justify-content: space-between;*/

	font-size:26px;
	line-height:1;
	letter-spacing:3px;

	background:-moz-linear-gradient(to right, transparent 0%, var(--color-primary) 15%, var(--color-primary) 85%, transparent 100%);
	background:-webkit-linear-gradient(to right, transparent 0%, var(--color-primary) 15%, var(--color-primary) 85%, transparent 100%);
	background:-webkit-gradient(linear, 100% 0, 0 0, from(transparent), color-stop(0.15, var(--color-primary)), color-stop(0.85, var(--color-primary)), to(transparent));
	background:-o-linear-gradient(to right, transparent 0%, var(--color-primary) 15%, var(--color-primary) 85%, transparent 100%);
	background:var(--color-body) linear-gradient(to right, transparent 0%, var(--color-primary) 15%, var(--color-primary) 85%, transparent 100%);

	border-top:2px solid var(--color-body);
	border-bottom:2px solid var(--color-body);
}

.kk-block h2 .kk-title {
	flex-grow: 1;
	text-align: center; /* Auf 'left' ändern, wenn der Text linksbündig sein soll */
}

body.is-admin .kk-block h2,
body.is-admin .kk-block .h2 {
	top:calc( var(--navi-height-mobile) + 50px + var(--is-admin) );		
}
@media (min-width: 992px) {
	.kk-block h2,
	.kk-block .h2 {
		top:calc( var(--navi-height-desktop) + 50px );
		font-size:32px;
	}
	body.is-admin .kk-block h2,
	body.is-admin .kk-block .h2 {
		top:calc( var(--navi-height-desktop) + 50px + var(--is-admin) );
	}
}

.kk-h2-block {
	margin-top:30px;
}

.kk-h2-top-placeholder {
	margin-top:30px;
}


.kk-block h3,
.kk-block .h3 {
	position: sticky;
	top:calc( var(--navi-height-mobile) + 100px );
	z-index: 9;

	width:100%;
	height:50px !important;

	overflow:hidden;
	margin-bottom:0px !important;

	display:flex;
	justify-content:center;
	align-items:center;

	font-size:24px;
	line-height:1;
	letter-spacing:3px;

	background-color:var(--color-body);
}
.kk-block h3::after,
.kk-block .h3::after {
	content: '';
	position: absolute;
	z-index:2;
	bottom: 0px;
	left: 0;
	width: 100%;
	height: 3px;
	background:var(--color-body) linear-gradient(to right, transparent 0%, var(--color-primary) 15%, var(--color-primary) 85%, transparent 100%);
}	


body.is-admin .kk-block h3,
body.is-admin .kk-block .h3 {
	top:calc( var(--navi-height-mobile) + 100px + var(--is-admin) );		
}
@media (min-width: 992px) {
	.kk-block h3,
	.kk-block .h3 {
		top:calc( var(--navi-height-desktop) + 100px );
		font-size:32px;
	}
	body.is-admin .kk-block h3,
	body.is-admin .kk-block .h3 {
		top:calc( var(--navi-height-desktop) + 100px + var(--is-admin) );
	}
}

.kk-h3-top-placeholder {
	margin-top:30px;
}
.kk-h3-bottom-placeholder {
	margin-top:15px;
}

/* ---------------- */

.kk-arrow {
	text-decoration: none;
	padding:0px;

	transition: background-color 0.2s, color 0.2s;
	cursor: pointer;
	user-select: none;

	font-size:32px;
	line-height:1;

	text-decoration:none !important;
	
	height:50px !important;
	display:flex;
	justify-content:center;
	align-items:center;
}
.kk-arrow:hover {
	color: var(--color-primary);
}

.kk-arrow-placeholder {
	width: 28px;
	display: inline-block;
}

/* Bei Bookmarks Header mitrechnen, vor allem für Fixed-Header sinnvoll (jedem Anker diese Klasse mitgeben) und natürlich den Top-Wert auf die Header Größe(n) anpassen */
.kk-anchor { 
	display:block;
	position:relative;
	top:-118px;
	visibility:hidden;
}
body.is-admin .kk-anchor {
	top:calc( -118px - var(--is-admin) );
}
@media (min-width: 768px) {
	.kk-anchor { 
		top:-188px;
	}
	body.is-admin .kk-anchor {
		top:calc( -188px - var(--is-admin) );
	}
}

/* =========================================================================== */

.kk-bottom-next,
.kk-bottom-prev {
	padding-top:50px;
	display:flex;
	justify-content:right; /* x */
	align-items:center; /* y */
}
.kk-bottom-prev {
	justify-content:left; /* x */
}
.kk-bottom-next a,
.kk-bottom-prev a {
	padding:15px 30px 15px 30px;

	color:var(--color-primary-text);
	background-color:var(--color-primary);

	border:2px solid transparent;
	border-radius:30px;

	transition:all .5s;
}
.kk-bottom-next a:hover,
.kk-bottom-next a:focus,
.kk-bottom-prev a:hover,
.kk-bottom-prev a:focus {
	color:var(--color-primary);
	background-color:var(--color-primary-text);

	border:2px solid var(--color-primary);
}




/* =========================================================================== */

.kk-img {
	aspect-ratio: 3 / 2;
	width: 100%;
	height: auto;
	margin-bottom:15px;
	object-fit: cover;
	overflow: hidden;

	border:2px solid var(--color-primary);
	border-radius: 16px;
}

.img-h4 {
	position:relative;
	text-align:center;
	overflow:hidden;
	border-radius: 18px;
	margin:0px;
}
.img-h4 h4 {
	position:absolute;
	top:0px !important;
	width:100%;
	text-align:center;
	z-index:1;

	color:var(--color-primary-text);
	background-color:var(--color-primary);

	margin:0px;
	padding:4px 0px 4px 0px;
	font-size:16px;
	line-height:1;
	opacity:.75;
	transition:all .75s;
}
.img-h4:hover h4 {
	opacity:1;
}
@media (min-width: 992px) {
	.img-h4 h4 {
		font-size:24px;
	}
}
/* -------------------------- */

/* Checkbox als Image */
.kk-check-image {
	position:relative;
	margin-bottom:30px;
	text-align:center;
	overflow:hidden;

	border:2px solid var(--color-primary);
	border-radius: 16px;
}
.kk-check-image h4 {
	position:absolute;
	top:0px !important;
	left:0px !important;
	width:100%;
	text-align:center;

	color:var(--color-primary-text);
	background-color:var(--color-primary);

	margin:0px;
	padding:4px 0px 4px 0px;
	font-size:18px;
	line-height:1;
	opacity:.75;
	transition:all .75s;
}
@media (min-width: 992px) {
	.kk-check-image h4 {
		font-size:24px;
	}
}
.kk-check-image:hover h4 {
	opacity:1;
}
.kk-check-image img {
	aspect-ratio: 3 / 2;
	width: 100%;
	height: auto;
	object-fit: cover;
	overflow: hidden;
}

.kk-check-image img.orig {
	aspect-ratio:auto;
	min-height:160px;
	object-fit: cover;
	overflow: hidden;
}

.kk-check-image input[type="checkbox"] {
	display:none;
}
.kk-check-image label {
	cursor:pointer;
}
.kk-check-image input[type="checkbox"]:checked+label:before {
	content:"\f058";

	font-family:'Font Awesome 5 Free';
	font-weight:900;
	font-size:64px;

	position:absolute;
	top:80px;
	left:0px;
	z-index: 2;

	width:100%;
	height:100%;
	color:var(--color-primary);
}

/* Checkbox als Box */
.kk-check-box {
	position:relative;
	display:inline-block;
	margin:0px 15px 15px 0px;
	text-align:center;
	overflow:hidden;

	border:2px solid var(--color-primary);
	border-radius: 16px;
}
@media (min-width: 992px) {
	.kk-check-box {
		margin:0px 30px 30px 0px;
	}
}

.kk-check-box h4 {
	position:absolute;
	top:0px !important;
	left:0px !important;
	width:100%;
	text-align:center;

	color:var(--color-primary-text);
	background-color:var(--color-primary);

	margin:0px;
	padding:4px 0px 4px 0px;
	font-size:18px;
	line-height:1;
	opacity:.75;
	transition:all .75s;
}
@media (min-width: 992px) {
	.kk-check-box h4 {
		font-size:24px;
	}
}
.kk-check-box:hover h4 {
	opacity:1;
}

.kk-check-box input[type="checkbox"] {
	display:none;
}
.kk-check-box label {
	background-color:transparent !important;
	width:160px;
	height:160px;

	cursor:pointer;
}
.kk-check-box input[type="checkbox"]:checked+label:before {
	content:"\f058";

	font-family:'Font Awesome 5 Free';
	font-weight:900;
	font-size:64px;

	position:absolute;
	top:80px;
	left:0px;
	z-index: 2;

	width:100%;
	height:100%;
	color:var(--color-primary);
}

/* Radiobuttons als Image */
.kk-radio-image {
	position:relative;
	margin-bottom:30px;
	text-align:center;
	overflow:hidden;

	border:2px solid var(--color-primary);
	border-radius: 16px;
}
.kk-radio-image h4 {
	position:absolute;
	top:0px !important;
	left:0px !important;
	width:100%;
	text-align:center;

	color:var(--color-primary-text);
	background-color:var(--color-primary);

	margin:0px;
	padding:4px 0px 4px 0px;
	font-size:18px;
	line-height:1;
	opacity:.75;
	transition:all .75s;
}
@media (min-width: 992px) {
	.kk-radio-image h4 {
		font-size:24px;
	}
}
.kk-radio-image:hover h4 {
	opacity:1;
}
.kk-radio-image img {
	aspect-ratio: 3 / 2;
	width: 100%;
	height: auto;
	object-fit: cover;
	overflow: hidden;
}

.kk-radio-image img.orig {
	aspect-ratio:auto;
	min-height:160px;
	object-fit: cover;
	overflow: hidden;
}

.kk-radio-image input[type="radio"] {
	display:none;
}
.kk-radio-image label {
	cursor:pointer;
}
.kk-radio-image input[type="radio"]:checked+label:before {
	content:"\f058";

	font-family:'Font Awesome 5 Free';
	font-weight:900;
	font-size:64px;

	position:absolute;
	top:80px;
	left:0px;
	z-index: 2;

	width:100%;
	height:100%;
	color:var(--color-primary);
}

/* =========================================================================== */

.kk-reset .kk-reset-button button {
	position:fixed;
	left:0px;
	right:auto;
	bottom:0px;
	z-index:100;

	width:auto;
	height:40px;
	padding:0px 6px 0px 6px;
	margin:0px;

	display:flex;
	justify-content:center; /* x */
	align-items:center; /* y */

	color:#FFFFFF;
	background-color:#6c757d;
	opacity:.8;

	border:none;
	border-top:1px solid var(--color-primary);
	border-right:1px solid var(--color-primary);

	transition:all .4s;
}
.kk-reset .kk-reset-button-symbol {
	font-size:18px;
	line-height:1;
	margin-right:10px;
}
.kk-reset .kk-reset-button-text {
	font-size:14px;
	line-height:1.2;
}
@media (min-width: 992px) {
	.kk-reset .kk-reset-button button {
		left:auto;
		right:30px;
		bottom:160px;
	
		width:120px;
		height:120px;
		padding:0px;

		flex-direction: column;

		border:1px solid var(--color-primary);
		border-radius:50%;

		color:var(--color-secondary-text);
		background-color:var(--color-secondary);

		border-top:1px solid var(--color-primary);
	}

	.kk-reset .kk-reset-button button:hover {
		color:var(--color-primary-text);
		background-color:var(--color-primary);

		border:1px solid var(--color-secondary);
	}

	.kk-reset .kk-reset-button-symbol {
		font-size:32px;
		line-height:1;
		margin-bottom:10px;
		margin-right:0px;
	}
	.kk-reset .kk-reset-button-text {
		font-size:14px;
		line-height:1.2;
	}
}

.kk-reset-button,
.kk-reset .kk-send-button {
	display:none;
}

.kk-reset .kk-reset-button {
	display:flex;
}

#kk-captcha-error,
#kk-error {
	font-weight:bold;
}

.fehler-grundriss {
	display:none;
	font-weight:bold;
}

/* =========================================================================== */

#scrollup {
	bottom: 70px;
}