/* browser egalisieren */
html, body, body div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  vertical-align: baseline;
}
html {
    overflow: hidden;
    overflow-y: scroll;
	-webkit-text-size-adjust:100%;
	-ms-text-size-adjust:100%;
}
:focus {
	outline:none;
}
table {
	border-collapse:collapse;
	border-spacing:0;
}
td {
	vertical-align: top;
}
sup {
	font-size:11px;
	vertical-align:top;
	padding-left:3px;
	padding-right:3px;
}
*, *:before, *:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
/* schriften
-------------------------------------------------------------- */
@font-face {
    font-family: 'OpenSansLight';
    src: url('bb-schriften/OpenSans-Light-webfont.eot');
    src: url('bb-schriften/OpenSans-Light-webfont.eot?#iefix') format('embedded-opentype'),
         url('bb-schriften/OpenSans-Light-webfont.woff') format('woff'),
         url('bb-schriften/OpenSans-Light-webfont.ttf') format('truetype'),
         url('bb-schriften/OpenSans-Light-webfont.svg#OpenSansLight') format('svg');
    font-weight: normal;
    font-style: normal;

}
@font-face {
    font-family: 'OpenSansSemibold';
    src: url('bb-schriften/OpenSans-Semibold-webfont.eot');
    src: url('bb-schriften/OpenSans-Semibold-webfont.eot?#iefix') format('embedded-opentype'),
         url('bb-schriften/OpenSans-Semibold-webfont.woff') format('woff'),
         url('bb-schriften/OpenSans-Semibold-webfont.ttf') format('truetype'),
         url('bb-schriften/OpenSans-Semibold-webfont.svg#OpenSansSemibold') format('svg');
    font-weight: normal;
    font-style: normal;

}
@font-face {
    font-family: 'OpenSansExtrabold';
    src: url('bb-schriften/OpenSans-ExtraBold-webfont.eot');
    src: url('bb-schriften/OpenSans-ExtraBold-webfont.eot?#iefix') format('embedded-opentype'),
         url('bb-schriften/OpenSans-ExtraBold-webfont.woff') format('woff'),
         url('bb-schriften/OpenSans-ExtraBold-webfont.ttf') format('truetype'),
         url('bb-schriften/OpenSans-ExtraBold-webfont.svg#OpenSansExtrabold') format('svg');
    font-weight: normal;
    font-style: normal;

}
@font-face {
    font-family: 'TheinhardtHeavy';
    src:url('bb-schriften/TheinhardtHeavy.woff') format('woff'),
        url('bb-schriften/TheinhardtHeavy.woff2') format('woff2'),
        url('bb-schriften/TheinhardtHeavy.eot'),
        url('bb-schriften/TheinhardtHeavy.eot?#iefix') format('embedded-opentype'),
        url('bb-schriften/TheinhardtHeavy.otf') format('truetype');

    font-weight: normal;
    font-style: normal;
    font-display: swap;
}



:root {
	color-scheme: light only !important;
	interpolate-size: allow-keywords;/* fuer aufklapptexte */
}

html, body {
	margin:0px;
	padding:0px;
	text-align:center;
	font-size:clamp(14px, 2vw, 18px);/* = 1rem */
	line-height:1.4rem;
	font-family:OpenSansLight,sans-serif;
}

.kopfzeile {
	color:rgb(255,255,255);
	background:rgb(115,24,82);
	padding:40px 0px 40px 0px;
	text-align:left;
}
.kopfzeile-innen {
	width:900px;
	margin-right:auto;
	margin-left:auto;
	display:grid;
	grid-template-columns:1fr 2fr;
}

.kopfzeile-innen a {
	text-decoration:none;
	width:200px;
	height:140px;
	display:block;
	background:url(bb-images/logo-stopp-rassismus.png);
	background-size:100% auto;
	background-repeat:no-repeat;
}
.kopfzeile-innen p {
	font:33px/36px TheinhardtHeavy, sans-serif;
	padding-top:26px;
}
/*zentrierter container*/
.konsole {
	position:relative;
	width:900px;
	margin-right:auto;
	margin-left:auto;
	display:block;
	text-align:left;
	padding:3.86rem 0px 4.56rem 0px;
}

.fusszeile {
	text-align:center;
	font-size:0.8rem;
	line-height:1.1rem;
	color:rgb(255,255,255);
	background:rgb(115,24,82);
	padding:2.22rem 0px 4.44rem 0px;
}

/* bilder
----------------------------------------------------------- */
.inhalt img {
	vertical-align:bottom;
	max-width:100%;
	height:auto;
}
.inhalt img.mittelgross {
	width:35rem;
	max-width:80%;
}



/* video inkl. responsive
------------------------------------------------------------ */
.video-container {
	position: relative;
	padding-bottom: 56.25%;
	/*padding-top: 30px; weglassen? */
	height: 0;
	overflow: hidden;
	margin-top:1.3rem;
	margin-bottom:1.3rem;
	width:100%;
}

.video-container iframe,  
.video-container object,  
.video-container embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

/* textformate 
------------------------------------------------------------ */
h1 {
	font:2.6rem/2.8rem OpenSansExtrabold, sans-serif;
	font-weight:normal;
	margin-top:0px;
	margin-bottom:3.3rem;
	color:rgb(115,24,82);
}
h2 {
	font:1rem/1.1rem OpenSansExtrabold, sans-serif;
	font-weight:normal;
	margin-top:0x;
	margin-bottom:0.67rem;
	color:rgb(115,24,82);
}	
h4 {
	font:1rem/1.2rem OpenSansSemibold, sans-serif;
	font-weight:normal;
	margin-top:2.6rem;
	margin-bottom:1.3rem;
	max-width:80%;
	color:rgb(115,24,82);
}

.veranstaltungen h2 {
	font:1.6rem/2rem OpenSansExtrabold, sans-serif;
	font-weight:normal;
	margin-bottom:1.3rem;
}
.veranstaltungen h3 {
	font:1rem/1.2rem OpenSansSemibold, sans-serif;
	font-weight:normal;
	color:rgb(115,24,82);
	margin-top:2.1rem;
	margin-bottom:1.3rem;
}
.veranstaltungen h2 + h3 {
	margin-top:0rem;

}
.veranstaltungen h3.ueberzeile {
	font:1rem/1.2rem OpenSansSemibold, sans-serif;
	font-weight:normal;
	color:rgb(115,24,82);
	margin-top:3.2rem;
	margin-bottom:0;
}
.veranstaltungen h3.kurz {
	margin-top:0px;
}
.veranstaltungen h2.abstandoben {
	margin-top:3.2rem;
}
.veranstaltungen img.hochformat {
	width:60%;
	height:auto;
	vertical-align:bottom;
	margin-top:1rem;
}
p {
	font-size:1rem;
	line-height:1.4rem;
	margin-bottom:1.3rem;
}
.fusszeile p {
	margin-bottom:0;
}
ul {
	font-size:1rem;
	line-height:1.4rem;
	margin-bottom:1.3rem;
	margin-left:16px;
}
ul li {
	margin-bottom:0.67rem;
}
ol {
	font-size:1rem;
	line-height:1.4rem;
	margin-bottom:1.3rem;
	margin-left:36px;
}

b, strong {
	font-family:OpenSansSemibold;
	font-weight:normal;
}



a {
	color:#000;
	text-decoration:none;
	border-bottom:1px solid #000;
}
a:hover, a:active, a:focus {
	color:#999;
	border-bottom:1px solid #999;
}
.kopfzeile a, .kopfzeile a:hover, .kopfzeile a:active, .kopfzeile a:focus {
	border:0;
} 
.fusszeile a {
	color:#fff;
	border-bottom:1px solid #fff;
}
.fusszeile a:hover, .fusszeile a:active, .fusszeile a:focus {
	color:#bbb;
	border-bottom:1px solid #bbb;
}



@supports (hyphens: auto) or (-ms-hyphens: auto) or (-moz-hyphens: auto) or (-webkit-hyphens: auto) {
	p {
		/*safari*/
		-webkit-hyphens: auto;
		-webkit-hyphenate-limit-before: 3;
		-webkit-hyphenate-limit-after: 3;
		-webkit-hyphenate-limit-chars: 4 2 2;
		-webkit-hyphenate-limit-lines: 3;
		-webkit-hyphenate-limit-last: always;
		-webkit-hyphenate-limit-zone: 8%;
		
		/*firefox*/
		-moz-hyphens: auto;
		-moz-hyphenate-limit-chars: 4 2 2;
		-moz-hyphenate-limit-lines: 3;
		-moz-hyphenate-limit-last: always;
		-moz-hyphenate-limit-zone: 8%;
		
		/*ie 10, edge*/
		-ms-hyphens: auto;
		-ms-hyphenate-limit-chars: 4 2 2;
		-ms-hyphenate-limit-lines: 3;
		-ms-hyphenate-limit-last: always;
		-ms-hyphenate-limit-zone: 8%;
		
		/*normal*/
		hyphens: auto;
		hyphenate-limit-chars: 4 2 2;
		hyphenate-limit-lines: 3;
		hyphenate-limit-last: always;
		hyphenate-limit-zone: 8%;
	}
}

/* responsive
------------------------------------------------------------ */

@media only screen and (max-width: 1000px) {
	.kopfzeile-innen,
	.konsole {
		width:90vw;
	}
	.kopfzeile {
		padding:4vw 0px 4vw 0px;
	}
	.kopfzeile-innen a {
		width:20vw;
		height:14vw;
	}
	.kopfzeile-innen p {
		font-size:3.2vw;
		line-height:3.6vw;
		padding-top:2.6vw;
	}

	@supports (hyphens: auto) or (-ms-hyphens: auto) or (-moz-hyphens: auto) or (-webkit-hyphens: auto) {
		h4 {
			/*safari*/
			-webkit-hyphens: auto;
			-webkit-hyphenate-limit-before: 3;
			-webkit-hyphenate-limit-after: 3;
			-webkit-hyphenate-limit-chars: 4 2 2;
			-webkit-hyphenate-limit-lines: 3;
			-webkit-hyphenate-limit-last: always;
			-webkit-hyphenate-limit-zone: 8%;
			
			/*firefox*/
			-moz-hyphens: auto;
			-moz-hyphenate-limit-chars: 4 2 2;
			-moz-hyphenate-limit-lines: 3;
			-moz-hyphenate-limit-last: always;
			-moz-hyphenate-limit-zone: 8%;
			
			/*ie 10, edge*/
			-ms-hyphens: auto;
			-ms-hyphenate-limit-chars: 4 2 2;
			-ms-hyphenate-limit-lines: 3;
			-ms-hyphenate-limit-last: always;
			-ms-hyphenate-limit-zone: 8%;
			
			/*normal*/
			hyphens: auto;
			hyphenate-limit-chars: 4 2 2;
			hyphenate-limit-lines: 3;
			hyphenate-limit-last: always;
			hyphenate-limit-zone: 8%;
		}
	}
}	


@media only screen and (max-width: 650px) {
	h4 {
		max-width:100%;
	}
}