@charset "utf-8";
/* CSS Document */

:root {
	--maxWidth: clamp(37rem, 11rem + 70vW, 120rem);
	--maxInsetWidth: calc(100vW - 3rem);
	--maxFormWidth: clamp(26rem, 2rem + 50vW, 60rem);
	--spot-color: rgb(134, 40, 115);
	--spot-color-extralight: rgb(210, 184, 205);
	--spot-color-light: rgb(176, 58, 153);
	--spot-color-dark: rgb(102, 28, 86);
	--text-color: #5b5953;
	--text-color-light: #fff;
	--text-color-highlight: #452998;
	--font: 1rem/1.4 "Roboto", sans-serif;
	--dark-grey: #43423f;
	--light-grey: #f2f2f0;
	--background: #fff;
	--box-shadow: 2px 5px 14px -6px rgba(0, 0, 0, 0.80);
	--box-shadow-light: 2px 5px 10px -6px rgba(0, 0, 0, 0.60);
	--bold: 700;
	--regular: 300;
	--headerHeight: 4.8rem;
}


html #header{
	box-shadow: inset 0 0 1000vH 10vH rgba(45, 8, 37, 0.23), var(--box-shadow) !important;
}


html {
	background-color: var(--dark-grey);
	color: var(--text-color-light);
	overflow: auto;
	font: var(--font);
	font-size: clamp(14px, 10px + 0.5vw, 32px);
	font-weight: var(--regular);
}

html,
body {
	min-height: 100%;
	position: relative;
	min-width: 280px;
	padding: 0;
	margin: 0;
}

body.blurred #header,
body.blurred #main,
body.blurred #footer {
	filter: blur(6px);
}

img {
	max-width: 100%;
}

a {
	transition: color 0.25s ease-in-out !important;
	text-decoration: none;
	text-shadow: -1px -1px 1px rgba(0, 0, 0, 0.1), 1px 1px 1px rgba(255, 255, 255, 0.9);
	font-weight: 500;
	color: var(--spot-color-dark);
	z-index: 2;
	position: relative;
}

a:hover {
	color: var(--text-color-highlight);
}

h1,
h2,
h3,
h4 {
	color: var(--spot-color);
	font-weight: var(--bold);
	margin-top: 2rem;
	clear: both;
}

h1 {
	font-size: clamp(1.3rem, 1.05rem + 0.95vw, 2rem);
}

h2 {
	font-size: clamp(1.2rem, 1.00rem + 0.60vw, 1.6rem);
}

h3 {
	font-size: clamp(1.1rem, 0.95rem + 0.50vw, 1.3rem);
	color: var(--text-color);
	text-align: center;
}

h4 {
	font-size: 1.1rem;
	font-weight: var(--regular);
	color: var(--text-color);
}


.mediumitle {
	font-size: clamp(1.1rem, 0.95rem + 0.50vw, 1.3rem);
	text-align: left;
	margin-bottom: 0.2rem;
}

.mediumitle+p {
	margin-top: 0.2rem;
}

ul {
	margin-left: 1rem;
	padding: 0;
}

ul.no-list {
	padding: 0;
	margin: 0;
	list-style: none;
}

.row.flex {
	display: flex;
	flex-wrap: wrap;
}

.row li,
.boxrow li {
	margin: 0.3rem 0;
}

.row p {
	text-align: justify;
	/* hyphens: auto; */
}

.centered,
.row.centered,
.row.centered>* {
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}

strong {
	font-weight: var(--bold);
}

ol {
	padding-left: 1rem;
}

/* 
	FRAME
*/

#header {
	position: fixed;
	width: max(100vW, 280px);
	top: 0;
	left: 0;
	z-index: 1000;
	background-color: var(--spot-color);
	background-image: url(/img/header.jpg);
	background-size: cover;
	background-position: center;
	box-shadow: var(--box-shadow);
}

#head {
	max-width: var(--maxWidth);
	margin: 0 auto;
	padding: 0.8rem 0.5rem;
	box-sizing: border-box;
	display: flex;
	height: var(--headerHeight);
	align-items: center;
}

#head h1 {
	margin: 0;
	line-height: 1.3rem;
}

#websitetitle_text {
	display: flex;
	padding-left: 0.5rem;
	font-weight: var(--regular);
	text-shadow: 2px 2px 3px var(--spot-color-dark), 1px 1px 1px var(--spot-color-dark), -2px -2px 3px var(--spot-color-light), -1px -1px 1px var(--spot-color-light);
	font-weight: 400;
	flex-direction: column;
	height: 2.2em;
	justify-content: space-between;
}

#websitetitle_small {
	font-size: 0.7em;
	font-weight: var(--regular);
	line-height: 1em;
}

#mainlogo {
	height: 2.6rem;
}


@media (max-width: 370px) {
	#head h1 {
		font-size: 14px;
	}

	:root {
		--headerHeight: 4.4rem;
	}
	h4.sub br{
		display: none;
	}
	h4.sub{float: none;}
}
@media (max-width: 340px) {
	#head h1 {
		font-size: 13.5px;
	}
	:root {
		--headerHeight: 4.4rem;
	}
}

@media (max-width: 310px) {
	#head h1 {
		font-size: 13px;
	}

	:root {
		--headerHeight: 4rem;
	}
}

@media (max-width: 280px) {
	#head h1 {
		font-size: 12px;
	}

	:root {
		--headerHeight: 3.6rem;
	}
}

@media (max-width: 800px) {
	#navline{
		display: flex;
  		flex-direction: column;
	}
	#flexgrow, #impressumlink, #policylink, #accessibilitylink {
		display: block !important;
	}
	#flexgrow {
		flex-grow: 1;
		border-bottom: 2px dotted var(--light-grey);
	  }
	  #footer a {
		min-height: 2.2rem;
	  }
}

@media (max-width: 450px) {
	.boxrow::after{display: none;}
}

#head h1 a {
	margin: 0;
	display: flex;
	align-items: center;
	color: var(--text-color-light);
	text-shadow: none;
}

#main {
	max-width: var(--maxWidth);
	margin: 0 auto;
	background: var(--background);
	color: var(--text-color);
	padding-top: var(--headerHeight);
	border-radius: 0 0 0.5rem 0.5rem;
	padding-bottom: 3rem;
	min-height: calc(100vH - 11rem);
}

#navline {
	position: fixed;
	width: max(100vW, 280px);
	max-width: 480px;
	bottom: 0;
	left: 0;
	padding: 0;
	margin: 0;
	transition: transform 0.4s;
	background: var(--background);
	top: var(--headerHeight);
	overflow: auto;
	overflow-x: hidden;
	list-style: none;
	transform: translateX(-100%);
	box-shadow: var(--box-shadow);
}

#navline ul {
	list-style: none;
}

#navline.open {
	transform: translateX(0);
}

#navline a {
	border-bottom: 2px dotted var(--light-grey);
	width: 100%;
	display: block;
	padding: 0.5rem;
	color: var(--text-color);
	text-shadow: none;
	text-align: left;
	line-height: calc((100vH - var(--headerHeight)) /24);
}

#navline li[data-hasSub]>a {
	pointer-events: none;
	font-style: italic;
}

#navline li li a {
	border-left: 2px dotted var(--light-grey);
}

#navline a::before {
	display: block;
	content: attr(bold);
	font-weight: bold;
	height: 0;
	overflow: hidden;
	visibility: hidden;
	white-space: nowrap;
}

#navline a:hover,
#navline a:active {
	color: var(--text-color-highlight);
	font-weight: var(--bold);
	text-shadow: -1px -1px 1px rgba(0, 0, 0, 0.1), 1px 1px 1px rgba(255, 255, 255, 0.9);
}

#navline .active>a {
	color: var(--text-color-highlight);
	font-weight: var(--bold);
}

#navline a i {
	font-size: 0.8em;
	width: 0.8em;
	transform: translateY(-1px);
}

#burger {
	position: fixed;
	background-color: var(--spot-color);
	text-shadow: none;
	color: var(--text-color-light);
	display: flex;
	flex-direction: column;
	border-radius: 0 0 0 0.5rem;
	padding: 0 1rem;
	box-shadow: 0 0 8px rgba(0, 0, 0, 0.8);
	top: 0;
	left: max(100vW, 280px);
	;
	transform: translateX(-100%);
	font-size: 0.8rem;
	z-index: 2;
	height: calc(var(--headerHeight) + 0.5rem);
	display: flex;
	align-items: center;
	justify-content: center;
}

#burger i {
	display: block;
	font-size: 2.2rem;
	margin: 0px auto;
}

#navline ul .logout a {
	color: rgb(215, 5, 5) !important;
	font-weight: var(--bold);
	border-radius: 0 0 0.5rem 0.5rem;
}

#footer {
	color: var(--light-grey);
	font-weight: 400;
	text-shadow: 1px 1px 3px rgb(0, 0, 0), -1px -1px 3px rgba(255, 255, 255, 0.3);
}

#footer a {
	color: var(--text-color-light);
	text-shadow: 1px 1px 3px rgb(0, 0, 0), -1px -1px 3px rgba(255, 255, 255, 0.3);
}

#footer a:hover,
#footer a:active {
	color: var(--spot-color-light);
}



@media (min-width: 380px) {
	#head {
		padding: 0.5rem 1rem;
	}

	#mainlogo {
		height: 2.8rem;
	}

	#burger {
		font-size: 0.9rem;
	}

	:root {
		--maxInsetWidth: clamp(min(100vW - 3rem, 34rem), 5rem + 66vW, 100rem);
	}
}

@media (min-width: 480px) {
	#head {
		padding: 0.5rem 1.2rem;
	}

	#mainlogo {
		height: 3rem;
	}

	#burger {
		font-size: 0.95rem;
	}
}

@media (min-width: 580px) {
	#mainlogo {
		height: 3.2rem;
	}
}

@media (min-width: 680px) {
	#head {
		padding: 0.5rem 1.4rem;
	}

	#mainlogo {
		height: 3.4rem;
	}

	#burger {
		font-size: 1rem;
	}

	html,
	body {
		overflow-x: hidden;
	}
}

@media (min-width: 800px) {

	:root {
		--headerHeight: unset
	}

	#websitetitle_text {
		flex-direction: row;
		gap: 1rem;
		align-items: end;
		height: 1.3rem;
		padding-left: 1rem;
		font-size: 1.4rem;
	}

	html,
	body {
		overflow: visible;
	}

	#main {
		padding-top: 6.8rem;
		padding-bottom: 3rem;
	}

	#head {
		padding: 0 1rem;
		padding-top: 0.6rem;
		display: block;
	}

	#burger {
		display: none;
	}

	#navline {
		position: relative;
		left: auto;
		transition: none;
		transform: none;
		width: 100%;
		display: flex;
		background: none;
		top: auto;
		bottom: auto;
		overflow: visible;
		font-size: clamp(0.85rem, 0.4rem + 0.95vw, 1rem);
		box-shadow: none;
		max-width: var(--maxWidth);
		box-sizing: border-box;
	}

	#navline>li {
		flex-grow: 1;
		position: relative;
	}

	#navline li[data-hasSub]>a {
		pointer-events: all;
		font-style: normal;
	}

	#navline a {
		color: var(--text-color-light) !important;
		border: 0px none !important;
		text-shadow: none !important;
		font-weight: 300;
		padding: 0.5rem 0.3rem;
		display: block;
		width: 100%;
		box-sizing: border-box;
		text-align: center;
	}

	#navline>li>a {
		padding-bottom: 1em;
	}

	#navline>li[data-hasSub]>a::after {
		content: "";
		position: absolute;
		width: 1px;
		height: 1px;
		border: 4px solid transparent;
		border-left-color: var(--text-color-light);
		top: 1.2em;
		margin-left: 0.4rem;
		transform-origin: calc(50% - 3px) 50%;
		transition: all 0.25s;
		transform: translateY(-50%);
	}

	#navline>li[data-hasSub]:hover>a::after {
		transform: translateY(-50%) rotate(90deg);
	}

	#navline>li[data-hasSub]:hover>a {
		font-weight: var(--bold);
	}

	#navline>li[data-hasSub].active>a .navline_subline {
		position: absolute;
		text-align: center;
		left: 0em;
		right: 0;
		margin-top: 2.5em;
		overflow: visible;
		font-size: 0.7em;
		font-weight: var(--regular);
		top: 0;
		z-index: 10;
		color: #fff;
		visibility: visible;
		height: auto;
		white-space: pre;
		;
	}

	#navline>li[data-hasSub]>a {
		padding-right: 0.8rem;
	}

	#navline>li:first-child>a {
		text-align: left;
	}

	#navline>li:last-child>a {
		text-align: right;
	}

	#navline ul {
		display: block;
		position: absolute;
		left: 50%;
		z-index: 10;
		transform: translateX(-50%) scale(0.5, 0);
		transition: transform 0.2s;
		transform-origin: 50% 0;
		background-color: var(--background);
		padding: 0;
		margin: 0;
		margin-top: -1px;
		border-radius: 0 0 0.5rem 0.5rem;
		box-shadow: var(--box-shadow);
		border-top: 1px solid var(--spot-color);
	}

	#navline li:hover ul,
	#navline li.hover ul,
	#navline li:focus-within ul {
		transform: translateX(-50%) scale(1);
	}

	#navline ul a {
		color: var(--spot-color-dark) !important;
	}

	#servicemenu ul li:nth-child(7) {
		border-top: 2px dotted var(--text-color);
	}

	.big {
		max-width: 45%;
	}


}
@media (min-width: 880px) {
	#websitetitle_text {
		font-size: 1.5rem;
	}
}

@media (min-width: 920px) {
	#websitetitle_text {
		font-size: 1.6rem;
	}
}
@media (min-width: 1100px) {
	:root {
		--headerHeight: unset
	}

	.big {
		max-width: 38%;
	}

	:root {
		--maxInsetWidth: clamp(28rem, 2rem + 62vW, 90rem);
	}

	#navline>li[data-hasSub]>a::after {
		border-width: 5px;
		top: 0.9em;
	}

	#navline>li[data-hasSub].active>a .navline_subline {
		margin-top: 2em;
	}

	#navline>li>a {
		padding-bottom: 1em;
	}

	#main {
		padding-top: 6.3rem;
		padding-bottom: 5rem;
	}

	#head {
		padding: 0;
		padding-top: 0.6rem;
	}

	#navline {
		padding-left: 5.75rem;
		padding-top: 0.8rem;
	}

	#navline a {
		padding-top: 0.2rem;
	}

	#mainlogo {
		height: 2.3rem;
		transform: scale(2);
		transform-origin: 0 0;
	}

	#websitetitle_text {
		padding-left: 3.6rem;
		transform: translateY(0.2rem);
		height: 1.7rem;
		font-size: 1.7rem;
		line-height: 1em;
	}
}








#slider-wrapper {
	overflow: hidden;
}

.startnav {
	position: absolute;
	width: 100%;
	margin: 0px auto;
	color: #fff;
	margin-top: -3rem;
	padding: 0;
	text-align: center;
	z-index: 20;
}

.startnav li {
	display: inline-block;
	padding: 1em;
	list-style: none;
	font-size: 10px;
}

.startnav a {
	text-shadow: none;
	color: rgba(255, 255, 255, 0.3);
}

.startnav:hover a {
	color: rgba(255, 255, 255, 0.65);
}

.startnav:hover a:hover {
	color: rgba(255, 255, 255, 9);
}


.row,
.boxrow {
	margin: 1.5rem auto;
	margin-bottom: 0.5rem;
	max-width: var(--maxInsetWidth);
}

.row::after,
.boxrow:after {
	content: "";
	clear: both;
	display: block;
}

.boxrow {
	display: flex;
	gap: clamp(0.5rem, 1vW, 1rem);
	flex-wrap: wrap;
	position: relative;
	justify-content: center;
}


.boxrow>* {
	position: relative;
	flex-basis: 200px;
	flex-grow: 1;
	min-width: min(200px, 70%);
}

#footer {
	text-align: center;
	outline: 2.5rem solid var(--dark-grey);
	margin-top: 2.5rem;
	margin-bottom: 2.5rem;

}

#footer>div {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	flex-basis: 100%;
}

#footer>div:nth-child(3),
#footer>div:nth-child(2) {
	margin-top: 0.5rem;
}


@media (min-width: 450px) {

	.boxrow>* {
		flex-basis: calc(50% - clamp(0.25rem, 0.5vW, 0.5rem));
		flex-grow: 1;
		min-width: unset;
	}

	#footer div:nth-child(1) {
		text-align: center;
		flex-basis: 100%;
	}

	#footer div:nth-child(2) {
		text-align: left;
		flex-basis: 45%;
	}

	#footer div:nth-child(3) {
		text-align: right !important;
		flex-basis: 45%;
	}

}

@media (min-width: 750px) {

	.boxrow>* {
		flex-basis: 26%;
		flex-grow: 1;
		max-width: 40%;
		hyphens: auto;
	}

	#footer {
		width: calc(var(--maxWidth) - 3rem);
		max-width: unset;
		flex-wrap: nowrap;
	}

	#footer>div {
		max-width: 100%
	}

	;

	#footer div:nth-child(1) {
		text-align: left;
		flex-basis: 37%;
	}

	#footer div:nth-child(2) {
		text-align: center;
		margin-top: 0;
	}

	#footer div:nth-child(3) {
		text-align: right;
		margin-top: 0;
	}
}

@media (min-width: 900px) {

	#footer {
		margin-left: auto;
		margin-right: auto;
		max-width: var(--maxInsetWidth);
		box-sizing: border-box;
	}

	.box:first-child {
		border-radius: 0 0 0 0.5rem;
	}

	.box:last-child {
		border-radius: 0 0 0.5rem 0;
	}
}

@media (min-width: 1400px) {
	#footer div:nth-child(1) {
		text-align: left;
		flex-basis: 45%;
	}
}

p {
	line-height: 1.5em;
	margin-top: 0.7rem;
	margin-bottom: 0.7rem;
}

.box {
	box-shadow: var(--box-shadow);
	display: block !important;
	padding-bottom: 1rem;
}

.box h4 {
	background: var(--spot-color);
	color: var(--text-color-light);
	margin: 0;
	padding: 0.4rem 1rem;
	font-weight: var(--bold);
}

.box p,
.box ul {
	padding: 0 1rem;
}

@media (min-width: 1200px) {

	.box p,
	.box ul {
		padding: 0 1.5rem;
	}
}

@media (min-width: 1800px) {

	.box p,
	.box ul {
		padding: 0 2rem;
	}
}


.box>img:first-of-type {
	max-height: 9em;
	width: 100%;
	object-fit: cover;
}


#maintitle p {
	font-weight: 400;
	letter-spacing: 1px;
	margin-top: 0.8em;
}



.parallax {
	height: min(15rem, 35vH);
	perspective: 100vw;
	overflow: hidden;
	margin: 0;
	box-shadow: none !important;
}

.parallax_content {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	perspective: 100%;
	margin: 0;
	padding: 0;
}

.parallax figcaption {
	position: absolute;
	bottom: 0;
	max-width: 100%;
	text-align: left;
	padding: 0.3rem 2rem;
}

.parallax figcaption:empty {
	display: none;
}


a figure figcaption {
	text-shadow: 1px 1px 3px rgb(0, 0, 0), -1px -1px 3px rgba(255, 255, 255, 0.3);
}

figure {
	padding: 0;
	margin: 0;
}

a figure::before {
	content: "\f360";
	font: var(--fa-font-solid);
	color: var(--text-color);
	background: none;
	position: absolute;
	top: 0;
	right: 0;
	line-height: 1em;
	width: 1em;
	height: 1em;
	text-align: center;
	text-shadow: none;
	opacity: 0.2;
}

a:hover figure {
	box-shadow: 2px 3px 12px -1px var(--spot-color-dark);
}

a:hover figure::before {
	opacity: 0.6;
}

.right {
	float: right;
	margin-left: 1.5rem;
	margin-bottom: 1.5rem;
	margin-right: 0rem;
}

.left {
	float: left;
	margin-right: 1.5rem;
	margin-bottom: 1rem;
	margin-left: 0;
}

.clearfix::after {
	display: block;
	height: 1px;
	content: "";
	clear: both;
	margin-bottom: 3rem;
}

.small {
	max-width: 12em;
	/*max-height: 12em;*/
}

.medium {
	max-width: 33%;
	/* max-height: 30vH; */
}

.big {
	max-width: 50%;
}

@media (max-width: 600px) {
	.small {
		max-width: 30%;
	}

	.medium {
		max-width: 40%;
	}

	.big {
		max-width: 50%;
	}
}

@media (max-width: 450px) {
	.small {
		max-width: 40%;
	}

	.medium {
		max-width: 45%;
	}

	.big {
		max-width: 50%;
	}
}


.ccd-panel-desc img {
	height: 13.5rem;
	max-height: unset;

}

.shadow {
	box-shadow: var(--box-shadow);
}

.shadow-light {
	box-shadow: var(--box-shadow-light);
}

.sub {
	float: left;
	margin: 0;
	margin-right: 0.7rem;
	color: var(--spot-color);
	clear: both;
}

h4.sub {
	border-bottom: 2px dotted var(--light-grey);
	font-weight: var(--bold);
	font-size: 1em;
	margin-bottom: -2px;
}

.sub.absolute {
	z-index: 1;
	margin: 0 auto;
	width: 100%;
	text-align: center;
	margin-top: 0.5rem;
}

figure {
	box-shadow: var(--box-shadow);
	margin-top: 0;
	position: relative;
}

figure img {
	display: block;
}

figcaption {
	background-color: var(--spot-color);
	color: var(--text-color-light);
	margin: 0;
	padding: 0.2rem 0.5rem;
	text-align: center;
	font-size: 0.9em;
}


.isScrollTriggered {
	transform: translateY(20vH);
	opacity: 0;
	transition: transform 0.4s ease-out;
}

.isScrollTriggered.isVisible {
	transform: translateY(0);
	opacity: 1;
}









button,
input[type='submit'],
a.button {
	padding: 0.3rem 1rem;
	color: var(--text-color);
	font: var(--font);
	font-size: 1em;
	border-radius: 0.5rem;
	border: 2px solid var(--text-color);
	background: var(--light-grey);
	font-weight: bold !important;
	text-shadow: none !important;
}

button:hover,
input[type='submit']:hover,
a.button:hover {
	border: 2px solid var(--text-color);
	background: var(--text-color);
	color: var(--text-color-light) !important;
	font-weight: bold !important;
	text-shadow: none !important;
}

button.active,
button:active,
input[type='submit']:active,
a.button.active,
a.button:active {
	border: 2px solid var(--spot-color-dark);
	background: var(--spot-color);
	color: var(--text-color-light) !important;
	font-weight: var(--bold);
}

html body button[disabled],
input[disabled],
a.button[disabled] {
	opacity: 0.3;
	pointer-events: none;
}

form:invalid input[type='submit'] {
	pointer-events: none;
	opacity: 0.3;
}


input,
select,
textarea {
	display: block;
	border: 2px solid var(--text-color);
	border-radius: 0.5rem;
	padding: 0.2rem 1rem;
	font: var(--font);
	color: var(--text-color) !important;
	-moz-appearance: none;
	-webkit-appearance: none;
	-o-appearance: none;
	-ms-appearance: none;
	appearance: none;
	background-color: var(--background-color);
	width: 100%;
	text-align: center;
	box-sizing: border-box;
	max-width: 30rem;
	margin: 0.5rem auto;
	font-weight: var(--regular);
	position: relative;
}









#lighboxback {
	backdrop-filter: blur(5px);
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 1rem;
	box-sizing: border-box;
	z-index: 3000;
	display: flex;
	justify-content: center;
	align-items: center;
	cursor: pointer;
	background-color: rgba(255, 255, 255, 0.3);
}

#lighboxback::before {
	content: "\f1ce";
	position: absolute;
	width: auto;
	height: auto;
	font: var(--fa-font-solid);
	font-size: 3rem;
	color: var(--spot-color);
	animation-name: fa-spin;
	animation-duration: var(--fa-animation-duration, 2s);
	animation-iteration-count: var(--fa-animation-iteration-count, infinite);
	animation-timing-function: var(--fa-animation-timing, linear);
	z-index: 1;
	opacity: 0.8 !important;
}

#lighboxback #lightboxclose {
	width: 3rem;
	height: 3rem;
	display: block;
	top: 0.5rem;
	right: 0.5rem;
	position: fixed;
	z-index: 1;
	opacity: 0.7;
	transform: none;
	box-shadow: none;
	cursor: pointer;
	background: none;
}

#lighboxback #lightboxclose::before {
	content: "\f410";
	width: auto;
	height: auto;
	font: var(--fa-font-solid);
	font-size: 3rem;
	color: var(--spot-color);
}

#lighboxback #lightboxclose:hover {
	opacity: 1 !important;
}

#lighboxback>* {
	transition: all 0.5s;
	transform: translateY(200%) scale(1.5, 0.7);
	transform-origin: center top;
	max-width: 100%;
	max-height: 100%;
	opacity: 0;
	box-shadow: var(--box-shadow);
	z-index: 5;
	cursor: default;
	background-color: #fff;
}

.lightbox_ready {
	opacity: 1 !important;
	transform: none !important;
}

#lightboxmessage {
	background-color: var(--background);
	box-shadow: var(--box-shadow);
	color: var(--spot-color);
	padding: 1rem;
	font-weight: 500;
	height: 2rem;
	display: flex;
	align-items: center;
}


.contenttable,
.contenttable td,
.contenttable th {
	text-align: left !important;
}

.contenttable td,
.contenttable th {
	border-bottom: 1px dotted var(--light-grey);
	box-sizing: border-box;
	padding: 0.3rem 0.5rem;
}

.contenttable th {
	padding-top: 1rem;
	;
}

.contenttable tbody tr:first-of-type th {
	padding-top: 0rem;
}


.contenttable tr:hover td {
	background-color: rgba(0, 0, 0, 0.07) !important;
}

.contenttable {
	max-width: var(--maxInsetWidth);
	margin: 0 auto;
	box-shadow: var(--box-shadow);
	padding: 1rem 3rem;
	box-sizing: border-box;
	width: 100%;
}

table.contenttable {
	padding: 1rem;
}

.contenttable td:last-child {
	text-align: right !important;
}

.contenttable tr:nth-child(2n) td {
	background-color: rgba(0, 0, 0, 0.02);
}

.tableheadline {
	font-weight: var(--bold);
	font-size: 1rem;
	color: var(--spot-color);
	max-width: var(--maxInsetWidth);
	margin: 0 auto;
	text-align: left !important;
	padding: 0 1rem;
	padding-bottom: 0.5rem;
	box-sizing: border-box;
	text-align: center !important;
	box-sizing: border-box;
}

ul.contenttable {
	box-sizing: border-box;
	border: 0px none;
	padding: 1rem 3rem;
}

ul.contenttable li {
	margin: 1rem 0;
}

.contenttable>h3:first-child {
	margin-top: 0.5rem;
}



#scannerrow>div {
	position: absolute;
	width: 100%;
	display: flex;
	transition: all 0.5s;
	flex-wrap: wrap;
}

#scannerstarter_1 {
	position: relative !important;
	transform: translateX(0%);
}

#scannerrow {
	position: relative;
	overflow: hidden;
}

#scannerrow img {
	margin: 0 auto;
	margin-top: -1em;
}

#scannerstarter_2 {
	transform: translateX(100%);
}

#scannerstarter_3 {
	transform: translateX(200%);
}

#scannerrow[scannerpos="2"] #scannerstarter_1 {
	transform: translateX(-100%);
}

#scannerrow[scannerpos="2"] #scannerstarter_2 {
	transform: translateX(0%);
}

#scannerrow[scannerpos="2"] #scannerstarter_3 {
	transform: translateX(100%);
}

#scannerrow[scannerpos="3"] #scannerstarter_1 {
	transform: translateX(-200%);
}

#scannerrow[scannerpos="3"] #scannerstarter_2 {
	transform: translateX(-100%);
}

#scannerrow[scannerpos="3"] #scannerstarter_3 {
	transform: translateX(0%);
}

#scannertable {
	border-collapse: collapse;
	max-width: var(--maxInsetWidth) !important;
}

#scannertable[scannerpos="1"] tr>*:nth-child(2) {
	box-shadow: inset 0 0 1000px rgba(0, 0, 0, 0.05);
	font-weight: var(--bold);
}

#scannertable[scannerpos="2"] tr>*:nth-child(3) {
	box-shadow: inset 0 0 1000px rgba(0, 0, 0, 0.05);
	font-weight: var(--bold);
}

#scannertable[scannerpos="3"] tr>*:nth-child(4) {
	box-shadow: inset 0 0 1000px rgba(0, 0, 0, 0.05);
	font-weight: var(--bold);
}

#scannertable[scannerpos="1"] th:nth-child(2) {
	color: var(--spot-color);
}

#scannertable[scannerpos="2"] th:nth-child(3) {
	color: var(--spot-color);
}

#scannertable[scannerpos="3"] th:nth-child(4) {
	color: var(--spot-color);
}

#scannertable[scannerpos="1"] tr>*:nth-child(3),
#scannertable[scannerpos="1"] tr>*:nth-child(4) {
	cursor: pointer;
}

#scannertable[scannerpos="2"] tr>*:nth-child(2),
#scannertable[scannerpos="2"] tr>*:nth-child(4) {
	cursor: pointer;
}

#scannertable[scannerpos="3"] tr>*:nth-child(2),
#scannertable[scannerpos="3"] tr>*:nth-child(3) {
	cursor: pointer;
}


#scannertable * {
	text-align: left !important;
}

#scannertable th,
#scannertable td {
	padding: 0.5rem;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: calc((100vW - 3rem) * 0.25);
}

#scannerbuttons {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

#scannerbuttons::after {
	display: none;
}

#scannerbuttons button {
	margin: 0.25rem 0 !important;
	min-width: 9.7rem;
	flex-grow: 1;
}



#privacyOverlay {
	position: fixed;
	top: 0;
	left: 0;
	width: max(100vW, 280px);
	height: 100vH;
	backdrop-filter: blur(3px);
	z-index: 1000;
	display: flex;
	justify-content: center;
	align-items: center;
	background: rgba(0, 0, 0, 0.3);
}

#privacyDisplay {
	background: var(--background);
	box-shadow: var(--box-shadow);
	transform: translateY(200%) scale(2, 0.7);
	opacity: 0;
	transition: all 0.25s;
}

.privacyready #privacyDisplay {
	transform: none;
	opacity: 1;
}

.stop-scrolling {
	height: 100%;
	overflow: hidden;
}


.privacytitle {
	background: var(--spot-color);
	padding: 0.3rem 1rem;
	font-weight: bold;
}

#privacyIframe {
	min-width: 100%;
	border: 0px none;
}

.privacybuttons {
	padding: 0.5rem;
	display: flex;
	justify-content: center;
	padding-top: 0;
	gap: 0.5rem;
}

#privacy_okay {
	background: var(--spot-color);
	font-weight: var(--bold);
	color: var(--text-color-light);
	border-color: var(--spot-color-dark);
}

#privacy_okay:hover {
	background: var(--spot-color-dark);
}



.row.columns-2 {
	display: flex;
	justify-content: stretch;
	gap: 3rem;
	flex-wrap: wrap;
}

.row.columns-2>* {
	flex-basis: 50%;
	flex-shrink: 1;
	flex-grow: 1;

	max-width: calc(50% - 2rem);
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: stretch;
}

.impressum {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.impressum p {
	margin: 0;
}

#lightboxpopup {
	text-align: center !important;
	font-weight: var(--bold);
	color: var(--text-color);
	padding: 1rem;
	min-width: 320px;
	min-height: 200px;
	padding-bottom: 2rem;
	box-sizing: border-box;
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	border-top: 5px solid var(--spot-color);
}

#lightboxpopup .success {
	color: rgb(31, 137, 6);
}

#lightboxpopup .error {
	color: rgb(219, 44, 44)
}

#lightboxpopup .warning {
	color: rgb(196, 120, 21)
}

#popclose {
	bottom: 0.5rem;
	position: absolute;
	padding: 0.1rem 1rem;
}

#inline_privacy,
#privacyIframe {
	max-width: min(95vW, var(--maxInsetWidth));
	max-height: 80vH;
	overflow: auto;
	color: var(--text-color);
	margin: 0 2rem;
	margin-bottom: 0.5rem;
	padding-top: 0.5rem;
	width: max(100vW, 280px);
	height: 100vH;
}

#privacyIframe {
	margin: 0;
}

#resetpwdmail {
	padding: 1rem;
	font-weight: var(--bold)
}



.impressum {
	flex-basis: 27% !important;
}

.loginrow.contentLayersmail {
	max-width: unset;
}

.ccd-panel-desc p {
	margin-left: 5rem;
}


#copytitlemain {
	display: block !important;
	font-weight: var(--bold);
}

#copytitlesub {
	display: block !important;
	font-size: 0.645em;
}

#copytitlemain,
#copytitlesub {
	text-align: inherit !important;
}

.impressum-1 * {
	margin-top: 0 !important;
}

.impressum-2 div * {
	margin-top: 0 !important;
	text-align: left !important;
}


@media (max-width: 680px) {
	.impressum-1, .impressum-2 {
		max-width: unset !important;
		flex-basis: 100% !important;;
	}
}

sup {
	vertical-align: top;
	top: -0.15em;
	position: relative;
  }


  .privacy_impressum_box{
	margin-top: 1.5rem;
	margin-bottom: 1.5rem;
  }
  .privacy_impressum {
	margin: 0.4rem 0;
  }


  body.fullwidth #main {
	max-width: unset !important;
	padding-bottom: 0;
	min-height: calc(100vH - 6.3rem);
	position: relative;
	display: flex;
	flex-direction: column;
  }

  #load {
	position: absolute;
	left: calc(50% - 2rem);
	top: calc(50% - 2rem);
	display: block;
	font-size: 4rem;
	z-index: -1;
  }