:root {
	--content-width:100vw;
	--content-width:calc(100vh/9*16);
	--content-height:100vh;
	--color-main:#DA0004;
	--bs-primary-rgb: 218,0,4;
}

html,body{
	font-family:'Palfinger';
	background:#CCCCCC;
	display: flex;
	align-items: center;
	justify-content: center;
	height:100vh;
	width:100vw;
	overflow:hidden;
}

main{
	position:relative;
	background-color:#FFFFFF;
	background-image:url('/images/layout/Hintergrund.jpg');
	background-size:cover;
	background-repeat:no-repeat;
	background-position:center center;
}

#home{
	position:relative;
	display:block;
	width:var(--content-width);
	height:var(--content-height);
	background-image:url('/images/layout/Hintergrund_Home.jpg');
	background-size:cover;
	background-repeat:no-repeat;
	background-position:center center;
}

#home > img{
	position:absolute;
	display:block;
	width:32%;
	left:34%;
	top:10%;
}

#page{
	position:relative;
	display:block;
	width:var(--content-width);
	height:var(--content-height);
	padding:calc(15.7 * var(--content-height)/100) calc(2.8 * var(--content-width)/100) 0 calc(8.8 * var(--content-width)/100);
	
}

#nav_main{
	position:relative;
	display:block;
	width:50%;
	z-index:20;
	height:var(--content-height);
	background-image:url('/images/layout/bg_menu.png');
	background-size:contain;
	background-repeat:no-repeat;
	background-position:right center;
	padding-right:calc(8.8 * var(--content-width)/100);
	padding-top:calc(10 * var(--content-height)/100);
}

#nav_image{
	position:absolute;
	display:block;
	width:50%;
	left:50%;
	top:0;
	height:var(--content-height);
	background-image:url('/images/layout/Bild_Navigation.jpg');
	background-size:contain;
	background-repeat:no-repeat;
	background-position:right center;
}

h1{
	position:relative;
	z-index:20;
	text-transform:uppercase;
	font-weight:900;
	font-size:calc(9.3 * var(--content-height)/100);
}

#logo{
	position:absolute;
	z-index:100;
	width:calc(13.2 * var(--content-width)/100);
	top:calc(4.9 * var(--content-height)/100);
	left:calc(8.8 * var(--content-width)/100);
}
#logo:hover{
	opacity:0.65;
}

#nav_main a{
	position:relative;
	display:flex;
	flex-direction: row;
	align-items: center;
	background-color:#EDECE9;
	color:#000000;
	text-decoration:none;
	font-size:calc(2.1 * var(--content-width)/100);
	text-transform:uppercase;
	line-height:1;
	padding:calc(1.7 * var(--content-height)/100) calc(1.5 * var(--content-width)/100);
	margin-bottom:calc(2.5 * var(--content-height)/100);
}

#nav_main a:hover{
	background-color:var(--color-main);
	color:#FFFFFF;
}

#nav_main a .nr{
	margin-right:calc(1.2 * var(--content-width)/100);
	font-weight:700;
}

#nav_main a .text{
	font-weight:600;
}

#backlink{
	position:absolute;
	z-index:30;
	display:flex;
	flex-direction: row;
	align-items: center;
	right:calc(2.8 * var(--content-width)/100);
	bottom:calc(5 * var(--content-height)/100);
	text-decoration:none;
	text-transform:uppercase;
	font-weight:400;
	font-size:calc(2.3 * var(--content-height)/100);
	padding:calc(0 * var(--content-height)/100) calc(1 * var(--content-width)/100);
	background-color:#EDECE9;
	color:#000000;
}
#backlink:hover{
	background-color:var(--color-main);
	color:#FFFFFF;
}

#content{
	position:relative;
	z-index:20;
}

#content h2{
	margin-left:calc(6 * var(--content-width)/100*(-1));
	font-size:calc(6 * var(--content-height)/100);
	text-transform:uppercase;
	font-weight:700;
	line-height:1;
	display:flex;
	flex-direction: row;
	align-items: center;
	white-space:nowrap;
}
#content h2 .text{
	font-size:70%;
}

#watermark{
	position:absolute;
	z-index:5;
	color:#F1F1F1;
	font-weight:700;
	line-height:1;
	letter-spacing:calc(-1.5 * var(--content-width)/100);
	font-size:calc(50 * var(--content-height)/100);
	left:calc(7 * var(--content-width)/100);
	bottom:calc(6 * var(--content-height)/100);
}

#content_blocks{
	margin-top:calc(6 * var(--content-height)/100);
}

#content_blocks h3{
	position:relative;
	z-index:1;
	background-color:#DCD9D3;
	color:#000000;
	font-size:calc(2.3 * var(--content-height)/100);
	text-transform:uppercase;
	line-height:1;
	padding:calc(1 * var(--content-height)/100) 0 calc(1 * var(--content-height)/100) calc(1.7 * var(--content-width)/100);
	font-weight:600;
	margin-bottom:calc(1.9 * var(--content-width)/100);
}
#content_blocks h3::before{
	content:'';
	position:absolute;
	left:0;
	top:0;
	height:100%;
	width:calc(0.25 * var(--content-width)/100);
	background-color:var(--color-main);
}
#content_blocks h3::after{
	content:'';
	position:absolute;
	left:0;
	top:50%;
	height:50%;
	width:calc(0.5 * var(--content-width)/100);
	background-color:var(--color-main);
}

#content_blocks .contentblock{
	margin-bottom:calc(1 * var(--content-height)/100);
}

#content_blocks .contentblock .items{
	position:relative;
	padding:0 0 calc(0.8 * var(--content-width)/100) 0;
}

#content_blocks .contentblock .items .item{
	display:inline-block;
	background-color:#FFFFFF;
	border:2px solid #DCD9D3;
	line-height:1;
	padding:calc(0.6 * var(--content-height)/100) calc(0.9 * var(--content-width)/100);
	margin-bottom:calc(1.8 * var(--content-height)/100);
	cursor:pointer;
	font-weight:400;
	font-size:calc(1.65 * var(--content-height)/100);
	text-decoration:none;
	color:#000000;
}
#content_blocks .contentblock .items .item:hover{
	background-color:#DCD9D3;
}

#content_blocks .contentblock .items.per_inline{
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	margin:0 calc(0.5 * var(--content-width)/100*-1);
}
#content_blocks .contentblock .items.per_inline > div,
#content_blocks .contentblock .items.per_inline_2 > div{
	display:block;
	padding:0 calc(0.5 * var(--content-width)/100);
}
#content_blocks .contentblock .items.per_inline .item,
#content_blocks .contentblock .items.per_inline_2 .item{
	display:block;
}

#content_blocks .contentblock .items.per_inline_2{
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	margin:0 calc(0.5 * var(--content-width)/100*-1);
}

#lightbox{
	position:relative;
	left:0;
	top:0;
	z-index:1000;
	display:block;
	width:var(--content-width);
	height:var(--content-height);
	padding:calc(4.5 * var(--content-height)/100) calc(3 * var(--content-width)/100) calc(4.5 * var(--content-height)/100) calc(6 * var(--content-width)/100);
}
#lightbox > div{
	position:relative;
	height:100%;
	width:100%;
	background-color:#EDECE9;
	display: flex;
	align-items: center;
	justify-content: center;
}

#lightbox .close{
	position:absolute;
	display: flex;
	align-items: center;
	justify-content: center;
	right:calc(1.5 * var(--content-width)/100);
	top:calc(3 * var(--content-height)/100);
	width:calc(3.5 * var(--content-width)/100);
	height:calc(3.5 * var(--content-width)/100);
	background-color:#FFFFFF;
	color:#000000;
	line-height:1;
	text-decoration:none;
	font-size:calc(3 * var(--content-width)/100);
	z-index:1000;
}
#lightbox .close:hover{
	color:#FFFFFF;
	background-color: var(--color-main);
}

#lightbox video{
	width:calc(80 * var(--content-width)/100);
	height:calc(80 * var(--content-height)/100);
}

#lightbox .title{
	position:absolute;
	left:calc(1 * var(--content-width)/100);
	top:calc(1 * var(--content-height)/100);
	text-transform:uppercase;
	font-size:calc(1.5 * var(--content-width)/100);
}

#lightbox #carousel_container{
	width:100%;
	padding:calc(0.5 * var(--content-height)/100) calc(1 * var(--content-width)/100) 0 calc(1 * var(--content-width)/100);
	height:calc(76 * var(--content-height)/100);
	/*margin-top:calc(3 * var(--content-height)/100);*/
	display:flex;
}

#lightbox.zoom .carousel-item .col{
	overflow:scroll;
}
#lightbox.zoom img.h-100{
	height:auto !important;
	width:80% !important;
}

#carousel_container .carousel{
	width: 0;
	flex-basis: 100%;
}

.carousel-item img{
	height:calc(80 * var(--content-height)/100);
	margin:0 auto;
}
.carousel-item img.zoom{
	cursor:zoom-in;
}

.carousel-control-next, .carousel-control-prev{
	opacity:1;
	width:8%;
}

.carousel-control-next-icon, .carousel-control-prev-icon{
	width:calc(4 * var(--content-width)/100);
	height:calc(4 * var(--content-width)/100);
	filter: invert(100%);
	background-image:none;
	filter:none;
}

.carousel-control-prev-icon::before, .carousel-control-next-icon::before{
	position:relative;
	color:#000000;
	font-size:calc(7 * var(--content-height)/100);
	top:calc(-2.5 * var(--content-height)/100);
}
.carousel-control-prev-icon:hover::before, .carousel-control-next-icon:hover::before{
	color: var(--color-main);
}
.carousel-control-prev-icon::before{
	content:'←';
}
.carousel-control-next-icon::before{
	content:'→';
}

.carousel-indicators{
	margin-left:auto;
	margin-right:auto;
}

.carousel-indicators-numbers{
	bottom:calc(8.2 * var(--content-height)/100*-1);
}
.carousel-indicators-numbers > *{
	text-indent: 0 !important;
	margin: 0 2px;
	width: calc(2.2 * var(--content-width)/100) !important;
	height: calc(2.2 * var(--content-width)/100) !important;
	border: none;
	line-height: calc(2 * var(--content-width)/100) !important;
	color:#000000;
	background-color: #FFFFFF !important;
	transition: all 0.25s ease;
	font-weight:600;
	font-size:calc(1.8 * var(--content-height)/100);
	opacity:1 !important;
}
.carousel-indicators-numbers > *.active, .carousel-indicators-numbers > *:hover{
	background-color: var(--color-main) !important;
	color: #FFFFFF;
}

.g-5, .gx-5 {
	--bs-gutter-x: calc(5 * var(--content-width)/100);
}

.carousel-indicators.pages{
	margin:0;
	position:absolute;
	right:auto;
	z-index:30;
	left:calc(8.8 * var(--content-width)/100);
	bottom:calc(5 * var(--content-height)/100);
}

.carousel-indicators.pages button{
	display:block;
	width:calc(2.4 * var(--content-width)/100);
	height:calc(2.4 * var(--content-width)/100);
	background-color:#EDECE9;
	color:#000000;
	text-indent:unset;
	border:none;
	opacity:1;
	font-size:calc(2.3 * var(--content-height)/100);
	margin-left:0;
	margin-right:calc(0.5 * var(--content-width)/100);
	font-weight:400;
}
.carousel-indicators.pages button.active, .carousel-indicators.pages button:hover{
	background-color: var(--color-main);
	color:#FFFFFF;
}

.we_href{
	width:100%;
}