/*!
pw demo
(c) 2022 webdecker
author: i.decker, www.webdecker.de
date: 2022-07-19
*/

/* -------------------------------------- */
/* Basics, reset */
/* -------------------------------------- */
body { padding: 0; margin: 0; }

div,h1,h2,h3,h4,h5,h6,p,blockquote,pre,code,ol,ul,li,dl,dt,dd,figure,table,th,td,form,fieldset,legend,input,textarea { margin: 0; padding: 0; }
table { border-spacing: 0; border-collapse: collapse; }
caption, th, td { text-align: left; vertical-align: top; }
abbr, acronym { font-variant: normal; border-bottom: 1px dotted #666; cursor:help; }
blockquote, q { quotes: none; }
fieldset, img { border:0; }
sup { vertical-align: super; }
sub { vertical-align: sub; }
del { text-decoration: line-through; }
ins { text-decoration: none; }
hr { border: 0; border-top: 1px solid #888888; }

div, section, aside, nav, fieldset, header, footer, figcaption, figure, main, article, ul, ol, h1, h2, h3, h4, h5, audio, video, iframe { display: block; position: relative; box-sizing: border-box; }
li { position: relative; box-sizing: border-box; }
p { display: block; position: relative; padding-bottom: 12px; }

img { max-width: 100%; height: auto; }
img.align_left { max-width: 50%; display: block; float: left; margin-right: 24px; margin-bottom: 24px; }
img.align_right { max-width: 50%; display: block; float: right; margin-left: 24px; margin-bottom: 24px; }
img.w25 { max-width: 25%; }
img.w33 { max-width: 33%; }
img.w50 { max-width: 50%; }

figure { max-width: 100%; z-index: 2; }
figure img { display: block; }
figure.align_top {  margin: 0 0 24px 0; }
figure.align_right { float: right; margin: 0 0 24px 24px; width: 20%; }
figure.align_left { float: left; margin: 0 24px 24px 0; width: 20%; }
figure.align_below { margin: 12px 0 0 0; }
figure.align_background { position: absolute; top: 0; left: 0; max-width: none; }
figure.align_background img { width: 100%; max-width: none; }

p.align_left { max-width: 50%; display: block; float: left; margin-right: 24px; margin-bottom: 24px; }
p.align_right { max-width: 50%; display: block; float: right; margin-left: 24px; margin-bottom: 24px; }
p.w25 { max-width: 25%; }
p.w33 { max-width: 33%; }
p.w50 { max-width: 50%; }
p.figure { color: #888; font-size: 74%; line-height: 125%; z-index: 2; }
p { z-index: 1; }

.clear, .clearfix { clear: both; display: block; }

body#top .invisible { position: absolute; height: 1px; width: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(100%); white-space: nowrap; }
body#top .invisible:focus { position: relative; display: block; height: auto; width: auto; clip: auto; clip-path: none; background: #000; color: #fff; }

body#top .mobile { display: none; }
body#top .nomobile { display: block; }
body#top .printblock { display: none; }
body#top .printinline { display: none; }
body#top .screenblock { display: block; }
body#top .screeninline { display: inline; }


/* -------------------------------------- */
/* Fonts */
/* -------------------------------------- */
body, h1, h2, h3, h4, textarea, select, option, input, button
	{ font-family: 'Barlow Condensed', Verdana, Arial, sans-serif; font-weight: normal; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body { font-weight: normal; font-size: 18px; line-height: 26px;   }

input, button { font-size: 100%; line-height: 140%; }
textarea, select, option { font-size: 100%; line-height: 140%; }

h1 { font-size: 189.5%; line-height: 133%; margin: 0 0 12px 0; padding-bottom: 0; font-weight: normal; }
h2 { font-size: 158%; line-height: 130%; margin: 0 0 12px 0; padding-bottom: 0; font-weight: normal; }
h3 { font-size: 126%; line-height: 130%; margin: 0 0 12px 0; padding-bottom: 0; font-weight: normal; }
h4 { font-size: 116%; line-height: 130%; margin: 0 0 12px 0; padding-bottom: 0; font-weight: normal; }

.page_video h1 { text-transform: uppercase; }

a { text-decoration: none; display: inline; }
a img { transition: all 0.5s ease; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; }
a:hover { text-decoration: none; }
a:hover img { opacity: 0.4; }
a:focus img { opacity: 0.4; }

#pdfs a:hover img { opacity: 0.6; }
#pdfs a:focus img { opacity: 0.6; }

figcaption { font-size: 14px; line-height: 20px; padding-top: 8px; }

footer { font-size: 16px; line-height: 22px; }


/* -------------------------------------- */
/* Layout */
/* -------------------------------------- */

/* widths */
	.w, #container > .inside, #footer > .inside
		{ width: 100%; max-width: 1200px; margin-left: auto; margin-right: auto; }
	#main > .inside,
	#banner > .inside,
	#links > .inside,
	#foot > .inside { padding-left: 100px; padding-right: 100px; }
	
	.page_video #container > .inside
		{ width: 100%; max-width: none; }

@media screen and (max-width: 1240px) {
	.w, #container > .inside,  #footer > .inside
		{ max-width: none; }
	#main > .inside,
	#banner > .inside,
	#links > .inside,
	#foot > .inside { padding-left: 42px; padding-right: 42px; }
	
	#banner .top { margin-left: -32px; margin-right: -32px; }
	#banner .bottom { margin-left: -32px; margin-right: -32px; }
	
	.page_video #main > .inside
		{ padding-left: 24px; padding-right: 24px; }
}

@media screen and (max-width: 640px) {
	.page_video #main > .inside
		{ padding-left: 12px; padding-right: 12px; }
}

/*
@media screen and (max-width: 1240px) {
	.w, #container > .inside,  #footer > .inside
		{ max-width: 1000px; }
}

@media screen and (max-width: 1040px) {
	.w, #container > .inside,  #footer > .inside
		{ max-width: 800px; }
}
@media screen and (max-width: 840px) {
	.w, #container > .inside,  #footer > .inside
		{ max-width: 600px; }
}
@media screen and (max-width: 740px) {
}
@media screen and (max-width: 640px) {
	.w, #container > .inside,  #footer > .inside
		{ max-width: 400px; }
}
@media screen and (max-width: 440px) {
	.w, #container > .inside,  #footer > .inside
		{ max-width: 300px; }
}
*/

/* main */
#main { width: 100%; }

/* clear after containers */
#container > .inside:after, #footer > .inside:after, #main > .inside:after, #sidebar > .inside:after, .w:after, #container .ce:after
	{ display: block; clear: both; content: ""; font-size: 0; line-height: 0; height: 0; }

/* main / basic layout */
body { min-width: 320px; }
	body.page_video { min-width: 280px; }
#wrapper { width: 100%; overflow: hidden; }
#header { z-index: 1000; }
#container { clear: both; z-index: 1; }
	#main { padding-top: 24px; z-index: 100; }
	.page_video  #main { padding-bottom: 24px; }
#header { }
	#header > .inside:after { display: block; clear: both; content: ""; font-size: 0; line-height: 0; height: 0; }
	#header > .inside { overflow: hidden; }
	#header #hi { margin-right: -10px; }

#footer { clear: both; z-index: 0; padding-top: 24px; padding-bottom: 32px; z-index: 10; }
	#footer .imprint { text-align: right; }


/* Header media queries */
@media screen and (max-width: 1040px) {
	/* 800 */
}
@media screen and (max-width: 840px) {
	/* 600 */
	
	/* breakpoint menu, "mobile" */
	body#top .mobile { display: block; }
	body#top .nomobile { display: none; }
}
@media screen and (max-width: 740px) {
}
@media screen and (max-width: 640px) {
	/* 400 */
}
@media screen and (max-width: 440px) {
	/* 300 */
}


/* -------------------------------------- */
/* Wrappers */
/* -------------------------------------- */

/* Columns */

#wrapper div.cols  { overflow: hidden; }
#wrapper div.cols > .inside { margin-left: -12px; margin-right: -12px; }
#wrapper div.cols.empty > .inside { margin-left: 0; margin-right: 0; }
#wrapper div.cols > .inside:after { display: block; clear: both; content: ""; font-size: 0; line-height: 0; }
#wrapper div.cols > .inside > div { float: left;  margin: 0 12px 24px 12px; overflow: hidden;  }
#wrapper div.cols > .inside > div:after { display: none; }

#wrapper div.cols.col2 > .inside > div:nth-child(odd) { clear: both; }
#wrapper div.cols.col21 > .inside > div:nth-child(odd) { clear: both; }
#wrapper div.cols.col12 > .inside > div:nth-child(odd) { clear: both; }
#wrapper div.cols.col3 > .inside > div:nth-child(3n+1) { clear: both; }
#wrapper div.cols.col4 > .inside > div:nth-child(4n+1) { clear: both; }
#wrapper div.cols.col5 > .inside > div:nth-child(5n+1) { clear: both; }
#wrapper div.cols.col6 > .inside > div:nth-child(6n+1) { clear: both; }

#wrapper div.cols.col2 > .inside > div { width: calc(50% - 24px);  }
#wrapper div.cols.col12 > .inside > div:nth-child(odd) { width: calc(33.33% - 24px);  }
#wrapper div.cols.col12 > .inside > div:nth-child(even) { width: calc(66.66% - 24px);  }
#wrapper div.cols.col21 > .inside > div:nth-child(odd) { width: calc(66.66% - 24px);  }
#wrapper div.cols.col21 > .inside > div:nth-child(even) { width: calc(33.33% - 24px);  }
#wrapper div.cols.col3 > .inside > div { width: calc(33.3% - 24px);  }
#wrapper div.cols.col4 > .inside > div { width: calc(25% - 24px);  }
#wrapper div.cols.col5 > .inside > div { width: calc(20% - 24px);  }
#wrapper div.cols.col6 > .inside > div { width: calc(16.66% - 24px);  }

/*
#wrapper div#videos > .inside { margin-right: -32px; }
@media screen and (max-width: 1040px) {
	#wrapper div#videos > .inside { margin-right: -22px; }
}
*/
#wrapper div#videos .item a { display: block; overflow: hidden; }
/*
#wrapper div#videos .item img { max-width: 100%; }
*/

.equal > .inside { display: flex; flex-wrap: wrap; align-items: stretch; justify-content: flex-start; margin: 0 -12px 0 -12px; } 

@media screen and (max-width: 840px) {
	#wrapper div.cols.col3 > .inside > div { width: calc(100% - 24px); }
	
	#wrapper div.cols.col4 > .inside > div { width: calc(50% - 24px);  }
	#wrapper div.cols.col4 > .inside > div:nth-child(odd) { clear: both; }

	#wrapper div.cols.col5 > .inside > div { width: calc(50% - 24px); }
	#wrapper div.cols.col5 > .inside > div:nth-child(5n+1) { clear: none; }
	#wrapper div.cols.col5 > .inside > div:nth-child(odd) { clear: both; }
	
	#wrapper div.cols.col6 > .inside > div { width: calc(33.33% - 24px);  }
	#wrapper div.cols.col6 > .inside > div:nth-child(3n+1) { clear: both; }
}

@media screen and (max-width: 640px) {
	
	#wrapper div.cols.col2 > .inside > div { width: calc(100% - 24px); }
	#wrapper div.cols.col4 > .inside > div { width: calc(100% - 24px); }
	#wrapper div.cols.col6 > .inside > div { width: calc(50% - 24px);  }
	#wrapper div.cols.col6 > .inside > div:nth-child(3n+1) { clear: none; }
	#wrapper div.cols.col6 > .inside > div:nth-child(odd) { clear: both; }
	
	#wrapper div.cols.col21 > .inside > div:nth-child(odd) { width: calc(100% - 24px); clear: both; }
	#wrapper div.cols.col21 > .inside > div:nth-child(even) { width: 50%; float: right;  }

	#wrapper div.cols.col12 > .inside > div:nth-child(odd) { width: 50%;  }
	#wrapper div.cols.col12 > .inside > div:nth-child(even) { width: calc(100% - 24px); clear: both; }

	#videos a { display: block; text-align: center; }
}


/* -------------------------------------- */
/* Lists */
/* -------------------------------------- */
ul { margin-top: 12px; margin-bottom: 12px;  }
li { margin-left: 24px; }
ul ul { margin-top: 8px; margin-bottom: 8px; list-style: disc; }

/*
#header ul { list-style-type: none; margin: 0; padding: 0; }
#header ul:after { content: ''; display: block; clear: both; position: relative; height: 0px; font-size: 0px; line-height: 0px; }
#header li { float: left; margin: 0; padding: 0; }

#footer ul { overflow: hidden; list-style-type: none; margin: 0; padding: 0;  }
#footer ul:after { content: ''; display: block; clear: both; position: relative; height: 0px; font-size: 0px; line-height: 0px; }
#footer li { display: inline-block; margin: 0; padding: 0; }
*/




/* -------------------------------------- */
/* Colors */
/* -------------------------------------- */
/*
a:focus span { text-decoration: underline; }
*/
*:focus { text-decoration: underline; }
textarea:focus, input:focus, button:focus, button span:focus { text-decoration: none; }


body, #footer { background: #333; color: #000; }
	body.page_video { background: #9e0c0f; color: #fff; }
#footer { } 
#header { }

#main, #banner { background: #9e0c0f; color: #fff; }
#links { background: #fff; color: #000; }

a { color: #aaa; }
	#footer a { color: #fff; }
	
a:hover { color: #000; }

#footer a:hover
	{ color: #9e0c0f; }
	

/* misc */
figcaption { color: #999999; }
/*
.grey { color: #999999; }
.colored { background: #ccccdd; }
.dark { background: #888888; }
	.dark > * { color: #ffffff; }
.gloomy { background: #444444; }
	.gloomy > * { color: #ffffff; }
.light { background: #eeeeee; }
.white { background: #fff; }
.transwhite { background: rgba(255,255,255,0.7); }
.highlight { color: #ff8800; }

#wrapper div.lightfont { color: #ffffff; }
#wrapper div.darkfont { color: #555555; }

.meta { color: #aaaaaa; }
*/





/* -------------------------------------- */
/* Content elements */
/* -------------------------------------- */

/* -------------------------------------- */
/* Misc CEs */
/* -------------------------------------- */

/* Styling */
#wrapper .block { display: block; }

/*
#wrapper .padded { padding: 32px; }
#wrapper .ptop { padding-top: 32px; }
#wrapper .pbottom { padding-bottom: 32px; }
#wrapper .pleft { padding-left : 32px; }
#wrapper .pright { padding-right: 32px; }
#wrapper .mtop { margin-top: 32px; }
#wrapper .mbottom { margin-bottom: 32px; }
#wrapper .nombottom { margin-bottom: 0; }
#wrapper .margin { margin-top: 32px; margin-bottom: 32px; }
#wrapper .centered { text-align: center; }
#wrapper .indent { padding-left: 10%; padding-right: 10%;  }
#wrapper .text_right { text-align: right; }
#wrapper .text_left { text-align: left; }
#wrapper div.cols2 > .inside > .content, #wrapper p.cols2 { column-count: 2; column-gap: 48px; }
*/

#top #wrapper .beberlin .item { margin-bottom: 0; }
#wrapper .beberlin img { display: inline-block; }
#wrapper .beberlin .promoted img { width: 85%; max-width: 250px; }
#wrapper .beberlin .bepromoted img { width: 80%; }
#wrapper .beberlin .promoted { text-align: right; }

@media screen and (max-width: 840px) {
	#wrapper div.beberlin.cols.col2 > .inside > div { width: calc(100% - 24px); }
	#wrapper .beberlin .promoted { text-align: left; padding-top: 12px; padding-bottom: 12px; }
	#wrapper .beberlin .promoted img { width: 65%; margin-left: 16px; }  /*  min-width: 360px;   */
	#wrapper .beberlin .bepromoted img { width: 60%; min-width: 360px; }
}
@media screen and (max-width: 440px) {
	#wrapper .beberlin .promoted img { display: block; width: 100%; min-width: 0; }
	#wrapper .beberlin .bepromoted img { display: block; width: 100%; min-width: 0; }
}


#infohl { width: 100%; max-width: 350px; }

#pdfs { padding-bottom: 150px; }



/* video, audio */
audio { width: 100%; height: auto; min-height: 48px; outline: none; }
video { width: 100%; height: auto; background: transparent; outline: none; }
video[poster] { width: 100%; height: auto; }

video { }
.page_video div.videos { padding-top: 24px; }
.page_video div.video { max-width: 900px; margin: 0 auto; margin-bottom: 24px; } 
.page_video div.video > img { position: absolute; display: block; }
.page_video div.video > img.vtl { top: -30px; left: -30px; }
.page_video div.video > img.vtr { top: -30px; right: -30px; }
.page_video div.video > img.vbl { bottom: -30px; left: -30px; }
.page_video div.video > img.vbr { bottom: -30px; right: -30px; }


.page_video div.video > img.vbg { 
	position: absolute;
	top: -4.2%;
	left: -2.2%;
	width: 104.0%;
	max-width: none;
}


/*
.ce_video { overflow: hidden; }
.ce_video .player { width: 100%; height: 0; padding-bottom: 56.1%; }
.ce_video .starter { position: absolute; top: 0; left: 0; width: 100%; height: 100%; cursor: pointer; }
.ce_video .starter span { position: absolute; top: 50%; left: 50%; width: 100px; height: 100px; margin-left: -50px; margin-top: -50px; font-size: 100px; line-height: 100px; text-align: center; }
.ce_video iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.ce_video .content { padding-top: 12px; }
*/

div.agree { width: 100%; }
p.agree:hover { opacity: 0.8; cursor: pointer; }

.ce_youtube div.template { width: 100%; max-width: 800px; margin: 0 auto; }
.ce_youtube div.template > .inside { padding-bottom: 56.1%; }
.ce_youtube div.template > .inside > iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

#lb_s { padding: 5px !important; }

@media screen and (max-width: 840px) {
	.ce_youtube div.template { max-width: 500px; }
}

/* -------------------------------------- */
/* Media queries */
/* -------------------------------------- */
@media screen and (max-width: 1040px) {

}

@media screen and (max-width: 840px) {
	/*
	figure.align_left { width: 50%; }
	figure.align_right { width: 50%; }
	
	img.align_left { max-width: 50%; }
	img.align_right { max-width: 50%; }
	
	p.align_left { max-width: 50%; }
	p.align_right { max-width: 50%; }
	*/
}

@media screen and (max-width: 740px) {

}


@media screen and (max-width: 640px) {
	/*
	#wrapper .indent { padding-left: 5%; padding-right: 5%;  }
	
	figure.align_left { width: auto; display: block; float: none; margin-right: 0;  }
	figure.align_right { width: auto; display: block; float: none; margin-left: 0;  }

	img.align_left { max-width: 100%; display: block; float: none; margin-right: 0; }
	img.align_right { max-width: 100%; display: block; float: none; margin-left: 0; }
	
	p.align_left { max-width: 100%; display: block; float: none; margin-right: 0;  }
	p.align_right { max-width: 100%; display: block; float: none; margin-left: 0;  }
	
	*/
}

@media screen and (max-width: 440px) {


}



/* -------------------------------------- */
/* Print version */
/* -------------------------------------- */
@media print {
	body { font-size: 13px; line-height: 18px; color: #000; }
	#footer a { color: #000; }
	
	#footer .imprint { display: none; }
	
	#pdfs { padding-bottom: 0; }
	
	video { display: none; }
	
	body #wrapper .printblock { display: block; }
	body #wrapper .printinline { display: inline-block; }
	body #wrapper .screenblock { display: none; }
	body #wrapper .screeninline { display: none; }
	
	#banner { padding-top: 30px; overflow: hidden; }
	#bannerbg { position: absolute; top: 0; left: 0; width: 100%; height: 300px; }
	#bannerbg img { display: block; width: 100%; height: 300px; }

	#infohl { max-width: 40%; }
}
