/* BASIC STYLESHEET for www.HTML5.com */
/* author: ideenwerft GmbH */
/* author site: www.ideenwerft.com
/* copyright 2013 */
/* version: 0.1 */
/* date: may 2013 */

/*		FARBEN 
*		grau: #f4f4f4
*		rot: #cc071e
*/

/*		CONTENT: 
*		layout
*		basic styles 
*		navigations
*		content elements
*     	other
*     	extensions
*     	jQuery fancybox
*/

/* passion-one-regular - latin */
@font-face {
  font-family: 'Passion One';
  font-style: normal;
  font-weight: 400;
  src: url('../Fonts/passion-one-v8-latin-regular.eot'); /* IE9 Compat Modes */
  src: local('Passion One Regular'), local('PassionOne-Regular'),
       url('../Fonts/passion-one-v8-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../Fonts/passion-one-v8-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../Fonts/passion-one-v8-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../Fonts/passion-one-v8-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../Fonts/passion-one-v8-latin-regular.svg#PassionOne') format('svg'); /* Legacy iOS */
}
 
/* =HTML5 HACK & RESET ======================== */
* {padding:0px;margin:0px;}
header, section, footer, aside, nav, article {
    display: block;
}


/* =LAYOUT ======================== */
body {text-align:left;font-size:16px;font-family:arial,verdana,Sans-Serif;color:#494949;background:#ffffff;}
.wrap {
	position:relative;
	width:1100px;
	margin:0 auto;
	clear:both;
}
#wrap {
	width:100%;
}
#wrap > header {
    height:120px;
    width:1100px;
    margin:0 auto;
}
#logo {position:absolute;top:25px;height:95px;width:236px;background:url("../Img/bbox-logo.png") no-repeat;text-indent:-999px;}
#content {
    padding:50px 0px;
    margin:0 auto;
}
.start #content {
    padding-top:30px;
}
.layout-1col section#content {
    width:1110px;
}
.keyvisual {
    margin-bottom: 40px;
}

.fullwidth {
    background: #f3f3f3;
    margin-top: 3rem;
    margin-bottom: 3rem;
    padding: 3rem;
}

/* =BASIC STYLES ======================== */
.small {font-size: 0.9em;}
.xsmall {font-size: 0.8em;}
.red, .error {color:#c00;}
.grey {color:#999;}
.clear {clear:both;}
.italic {font-style:italic;}
.hide {display:none;}
.align-center {text-align:center;}
.align-right {text-align:right;}
.align-justify {text-align:justify;}
.align-left {text-align:left;}
.note {font-size:0.9em;font-style:italic;color:#999;}
/* links */
a.button:link, a.button:visited,
.btn, .button {display:inline-block;width:auto;margin-top:20px;color:#fff !important;padding:6px 12px;text-decoration:none;font-size:16px;
background: #cc071e; /* Old browsers */
background: -moz-linear-gradient(top,  #cc071e 0%, #ab091c 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#cc071e), color-stop(100%,#ab091c)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #cc071e 0%,#ab091c 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #cc071e 0%,#ab091c 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #cc071e 0%,#ab091c 100%); /* IE10+ */
background: linear-gradient(to bottom,  #cc071e 0%,#ab091c 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cc071e', endColorstr='#ab091c',GradientType=0 ); /* IE6-9 */
}
.btn-primary {
	border: none;
}
.button a:hover, .button a:focus {background:#b8081d;}
a.download:link, a.download:visited {display:inline-block;width:150px;height:30px;background:url("../Img/download-button.png");text-indent:-9999px;}
a.download:hover, a.download:focus {}
a:link, a:visited {color:#cc071e;text-decoration:none;}
a:hover, a:focus {color:#ab091c;}
:active, :focus {outline:0;}

/* skip link - sichtbar beim navigieren per tastatur */
#skip a, #skip a:hover, #skip a:visited {position:absolute;left:0px;top:-500px;width:1px;height:1px;overflow:hidden;}
#skip a:active, #skip a:focus {position:static;width:auto;height:auto;} 
/* anker-tags für interne links nach oben setzen*/
a.anchor {position:absolute;margin-top:-35px;}
/* text */
p,h1,h1,h3,h4,h5 {}
p {    
    margin-bottom: 15px;
    line-height: 22px;
}
h1 {font-family: 'Passion One', cursive;font-size:36px;font-weight:normal;color:#363636;margin-bottom:10px;}
h2 {font-family: 'Passion One', cursive;margin:30px 0 20px;padding-bottom:5px;font-size:26px;color:#cc071e;font-weight:normal;border-bottom:1px solid #666666;}
.start #content h2 {margin-top:5px;}
h3 {
    margin:5px 0 10px;
    font-size: 20px;
    font-weight: bold;
}
h4 {margin:-10px 0 10px;font-size:17px;font-weight:normal;color:#aaaaaa;}
/* other */
ul {list-style:disc;margin:0 0 10px 20px;line-height:1.5em;}
ol {list-style:decimal;margin:0 0 10px 20px;line-height:1.5em;}
#content .csc-textpic-imagewrap ul, #content .csc-textpic-imagewrap ol {margin-left:0px;}
blockquote {
    padding:0 0 0 40px;
    position: relative;
}
blockquote p {
    color:#666;
    font-style:italic;
}
blockquote cite {
    color:#888;
    font-style:italic;
}
blockquote:before {
    position: absolute;
    left: 10px;
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    font-family: "Font Awesome 5 Free"; 
    font-weight: 900; 
    content: "\f10e";    
}






table {font-size: 1em;border-collapse:collapse;border-spacing:0;}
table th, table td {vertical-align:top;}
#content .contenttable tr:nth-child(odd) {background:#eaeaea;}
#content .contenttable tr:nth-child(even) {background:#f6f6f6;}
#content table td {padding:5px 10px;}
#content .csc-textpic-image table tr,
.wrap table tr.odd,
.wrap table tr.even {background:none;}
#content .csc-textpic-image table td {padding:0;}

/* achtung: tabellen brauchen weiterhin 'cellspacing="0"' im markup! */
table p {padding:0;margin:0;}
hr, hr.linie-davor,  hr.linie-danach {clear:both;background-color:#adadad;color:#adadad;border:#adadad;height:1px;margin:10px 0;}
address, caption, cite, code, dfn, var {font-style:normal;font-weight:normal;}
caption, th {text-align:left;}
fieldset {border:none;}
input, textarea, select {border:1px solid #ccc;font-size:1em;padding:2px;color:#336699;}
input:focus, textarea:focus {background-color:#f3f3f3;}
img {
    border:0;
    color:#C00;
}
.ce-border img, 
.ce-border iframe,
.keyvisual img {
    border: 2px solid #ddd;
    padding: 4px;
}
.ce-gallery figcaption {
	margin-top: 8px;
	font-size: 0.9em;
    line-height: 1.2em;
	color: #666;
}
header span.date {
	float:right;
	margin-top: -50px;
	color: #777;
}

.iframewrap {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    padding-top: 25px;
    height: 0;
	margin-bottom: 50px;
}
.iframewrap iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}

/* =NAVIGATION ======================== */
nav {float:right;margin-top:30px;}
nav li {list-style:none;float:left;font-size:17px;}
nav li a:link, nav li a:visited {text-decoration:none;padding:6px 9px;color:#000000;}
nav li a:hover, nav li a:focus {background:#cc071e;color:#ffffff;}

/* current */
nav li.cur {background:#cc071e;color:#ffffff;padding:3px 12px;position:relative;top:-3px;}
nav li.cur a:link, nav li.cur a:visited {padding:0px;color:#fff;}

#slogan {position:relative;display:inline-block;top:35px;height:25px;width:510px;float:right;background:url("../Img/slogan-ext.png") no-repeat;clear:both;}

/* =CONTENT ELEMENTS ======================== */
#gallery {width:290px;height:200px;float:right;padding:2px;margin-left:100px;border:1px solid #cccccc;background:url("../Img/bbox-back.jpg") no-repeat scroll 5px 5px transparent;}


.box-2col {width:400px;display:inline-block;}
.box-left {float:left;clear:both;}
.box-right {float:right;}
#content .box {margin:20px 0px;}
aside .box {margin-bottom:20px;}

footer .wrap:first-child  ul {margin:0px;}
footer .wrap:first-child ul li {padding-left:30px;padding-bottom:15px;background:url("../Img/checkmark.png") no-repeat scroll 0 5px transparent;list-style:none;line-height:20px;}

.kontakt table {width:415px;margin:20px 0px;font-size:14px;}
.kontakt table th, table td {padding:2px 0px;}

.csc-textpic-above .csc-textpic-imagewrap {margin-bottom:10px;}



/* =FOOTER ======================== */
footer {
	border-top:1px solid #d1d1d1;
	clear:both;
	padding-top:5px;
	background:#F4F4F4;
}
footer .wrap:last-child  {
    border-top:1px solid #666666;
    padding:15px 0px 0px 20px;
    height: 50px;
}

footer .wrap:first-child {
	padding:10px 0px 40px;
	background:#f4f4f4;
	clear:both;
	overflow:hidden;
}
footer .copy {display:inline-block;float:left;font-size:14px;}
.copy a:link, .copy a:visited {color:#333333;}
.copy a:hover, .copy a:focus {color:#ab091c;}
footer .musthave {float:right;font-size:14px;}
footer .musthave li.first {border-right:1px solid #494949;}
footer .musthave li {list-style:none;float:left;}
.musthave li a:link, .musthave li a:visited {text-decoration:none;padding:6px 12px;color:#494949;}
.musthave li a:hover, .musthave li a:focus {color:#333333;}
#rad {background:url("../Img/rad.png") no-repeat scroll 0 0 transparent;width:45px;height:25px;position:absolute;left:20px;bottom:50px;}

/* =OTHER ======================== */
#content .csc-form-element-submit input {display:inline-block;width:auto;color:#fff;padding:6px 12px;text-decoration:none;font-size:14px;
background: #cc071e; /* Old browsers */
background: -moz-linear-gradient(top,  #cc071e 0%, #ab091c 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#cc071e), color-stop(100%,#ab091c)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #cc071e 0%,#ab091c 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #cc071e 0%,#ab091c 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #cc071e 0%,#ab091c 100%); /* IE10+ */
background: linear-gradient(to bottom,  #cc071e 0%,#ab091c 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cc071e', endColorstr='#ab091c',GradientType=0 ); /* IE6-9 */}

#content .csc-form-element-submit input:hover, 
#content .csc-form-element-submit input:focus {cursor:pointer;}


/* =EXTENSIONS ======================== */
/* POWERMAIL */
.tx-powermail .container-fluid {
	padding: 0;
	margin-top: 30px;
}
div.tx-powermail fieldset {margin-bottom:15px;background: #f3f3f3;;padding:30px 15px 15px;}
div.tx-powermail h3,
div.tx-powermail legend {
	display:none;
}
div.tx-powermail div.powermail_fieldwrap {margin-bottom:10px;}
div.tx-powermail label.control-label {
	display:block;width:150px;float:left;font-weight:bold;line-height:30px;
}
div.tx-powermail input,
div.tx-powermail textarea {   
	max-width: 500px;
}


span.powermail_mandatory, .powermail_message_error {color:#c00;}
input.validate, input.powermail-field-error {background:red;}
ul.powermail_message_error {list-style:none;margin-left:0;}