/* styles cdrb 2016
======================== */
html,
body {
width:100%;
height:100.1%;
background-color:#f7f1f1;
}

* {
  font-family: 'Open Sans', sans-serif;
  color:#4D4A4B;
}

/* Startseite
=============*/
#start {
  display:block;
  position:relative;
  top:0;
  margin:40px 40px 0 40px;
  width:calc(100% - 80px);
  padding:0;
  height:auto;
  background-color:#ddd6d4;
}
#start div.logobox {
  position:relative;
  display:block;
  margin:auto;
}
@media screen and (min-width: 1240px) {
  #start div.logobox {
    width:1240px;
    height:560px;
  }
}

@media screen and (max-width: 1239px) {
  #start div.logobox {
    width:952px;
    height:430px;
  }
}

#start img.logo {
  width:100%;
  height:auto;
}

/* Header
=========*/
header {
  display:block;
  position:relative;
  top:0;
  margin:auto;
  width:972px;
  padding:0 12px 0 12px;
  height:160px;
  background-color:#f7f1f1;
}

#logo {
  margin:60px 0px 0px 0px;
  width:514px;
  height:auto;
}

/* Menü
=======*/
#menu {
	font-size:26px;
	margin-top:32px;
	float:right;
	position:relative;
	z-index:1000;
}

#menu a {
	color:#A79C94;
	text-decoration:none;
}


#menu a span {
	color:#4D4A4B;
}

#start #menu {
  position:absolute;
}
@media screen and (min-width: 1240px) {
  #start #menu {
    left:822px;
    font-size:65px;
    top:100px;
  }
}

@media screen and (max-width: 1239px) {
  #start #menu {
    left:629px;
    font-size:50px;
    top:70px;
  }
}

#start #menu ul li a {
  color:#fff;
}

#start #menu ul li ul a {
  padding: 0.5em 1em;
}

nav ul {
	padding:0px;
	list-style-type:none;
}

nav ul ul {
	list-style-type:none;
	display:none;
	padding-right:20px;
	width:210px;
	position:absolute;
	top:32px;
	right:16px;
	z-index:auto; /* Ausblendung des Untermenüs */
	font-size:0em; /* Ausblendung des Untermenüs */
}

@media screen and (min-width: 1240px) {
  #start #menu ul ul {
    top:82px;
    padding-right:130px;
    width:200px;
    font-size:20px;
  }
}
@media screen and (max-width: 1239px) {
  #start #menu nav ul ul {
    top:65px;
    padding-right:105px;
    width:200px;
    font-size:20px;
  }
}
nav ul li:hover ul,
nav ul li:active ul {
	list-style-type:none;
	display:inline-block;
	z-index:auto; /* Einblendung des Untermenüs */
	font-size:20px; /* Einblendung des Untermenüs */
}

nav ul ul li {
    margin: 0;
    border:0;
}
nav ul li:hover ul li,
nav ul li:active ul li {
  border-bottom:1px solid #bfb7b5;
}

#start nav ul li ul li {
  border-bottom:1px solid #bfb7b5;
}

nav ul ul a {
	display:block;
    padding: 0.7em 1em;
    text-align:left;
    text-decoration: none; 
    background-color: rgba(255, 255, 255, .94);
	transition: background-color .25s ease-in;
}

nav ul ul a:focus,
nav ul ul a:hover,
nav ul ul a:active {    
    background-color: rgba(215, 0, 54, 1);
	transition: background-color 0.01s;
}

#menu ul ul a:focus span,
#menu ul ul a:hover span,
#menu ul ul a:active span {
	color:#FFFFFF;
}

/* Topboxen
===========*/
#topbox {
  display:block;
  position:relative;
  width:972px;
  padding:0 12px 0 12px;
  margin:0 auto 45px auto;
}

#topbox aside {
  display:block;
  float:left;
  margin:0px 12px 0px 0px;
  padding:32px 16px 32px 16px;
  width:202px;
  height:170px;
  background-color:#bfb7b5;
}
#topbox aside:last-child {
  margin-right:0px;
}

#topbox aside.zentriert {
  text-align:center;
}

#topbox aside div {
  line-height:150%;
  font-size:20px;
  font-weight:600;
  color:#fff;
}  
#topbox aside div h1 {
  margin:0 0 20px 0;
  padding:0;
  font-size:20px;
  color:#d50b3d;
}

#topbox aside a.play {
  margin:-32px -16px -32px -16px;
  padding-top:32px;
  display:block;
  width:234px;
  height:202px;
  background:url("/images/play.png") 50% 180px no-repeat #bfb7b5;
  transition: background-color .25s ease-in,color .25s ease-in;
  font-size:20px;
  font-weight:700;
  color:#d50b3d;
  text-decoration:none;
}
#topbox aside a.play:hover,
#topbox aside a.play:active {
  background-color:#d50b3d;
  transition: background-color .05s ease-in,color .05s ease-in;
  color:#fff;
}

#conbox {
  display:block;
  position:relative;
  width:972px;
  padding:0 12px 0 12px;
  margin:0 auto 45px auto;
}

#conbox aside {
  display:block;
  float:left;
  margin:0px 12px 0px 0px;
  padding:32px 20px 32px 20px;
  width:276px;
  height:252px;
  background-color:#bfb7b5;
  line-height:150%;
  font-size:20px;
  font-weight:400;
  color:#fff;
}

#conbox aside:first-child {
  background-color:#d50b3d;
  color:#fff;
}

#conbox aside:last-child {
  margin-right:0px;
  width:600px;
}

#conbox aside:first-child h2 {
  margin-top:0px;
  font-weight:700;
  font-size:20px;
  color:#fff;
}

#conbox aside:last-child h2 {
  margin:0px;
  font-weight:700;
  font-size:20px;
  color:#4D4A4B;
}
#conbox aside:last-child address {
  font-style:normal;
}

#conbox aside a.play:hover,
#conbox aside a.play:active,
#conbox aside a.selected {
  background-color:#d50b3d;
  color:#fff;
  transition: background-color .05s ease-in,color .05s ease-in;
}

/* content
==========*/
#content,
#basics {
  display:block;
  position:relative;
  margin:auto;
  width:972px;
  padding:0 12px 0 12px;
}

#showroom,
#showroom_detail,
#macher {
  display:block;
  position:relative;
  width:984px;
  margin:0 auto 0 auto;
  padding-left:12px;
}

/* Showroom-Boxen
=================*/
#showroom div.box {
  display:block;
  background-color:#fff;
  height:316px;
  margin:0 12px 12px 0;
  float:left;
  width:316px;
  overflow:hidden;
}
#showroom div.doppelx {
  width:644px;
}
#showroom div.doppely {
  height:644px;
}

#showroom div section {
  width:100%;
  height:100%;
  position:relative;
}
#showroom div img {
  width:100%;
  height:100%;
}
#showroom div section div {
  position:absolute;
  display:table;
  top:0;
  left:0;
  width:92.1%;
  height:100%;
  padding:0 4% 0 4%;
  background-color:transparent;
  color:transparent;
  transition: background-color .25s ease-in,color .5s ease-in;
  font-size:0;
}
#showroom div section div:hover {
  background-color:rgba(213,0,54,.90);
  transition: background-color .05s ease-in,color .05s ease-in;
}

#showroom div section div a {
  text-decoration:none;
  display:table-cell;
  vertical-align:middle;
  text-align:center;
  color:transparent;
  transition: color .25s ease-in;
}
  
#showroom div section div:hover a {
  color:#bfb7b5;
  font-size:24px;
  transition: color .5s ease-in;

}  
#showroom div section div a h2 {
  color:transparent;
}

#showroom div section div:hover a h2 {
  color:#bfb7b5;
  font-weight:700;
  font-size:24px;
  margin:0 0 20px 0;
  transition: color .5s ease-in;
} 

#showroom_detail div.box {
  display:table;
  margin:0 12px 12px 0;
  float:left;
  width:480px;
  height:auto;
  line-height:0;
}

#showroom_detail div.doppelx {
  width:972px;
}

#showroom_detail div.rechts {
  float:right;
}

#showroom_detail div.text {
  height:320px;
}

#showroom_detail div.doppely {
  height:652px;
}

#showroom_detail div.box div {
  display:table-cell;
  padding:0 20px 0 40px;
  vertical-align:middle;
  text-align:left;
  color:#fff;
  line-height:150%;
  font-size:24px;
}

#showroom_detail div.box div h2,
#showroom_detail div.box div a {
  font-weight:700;
  font-size:24px;
  margin:0 0 20px 0;
  text-decoration:none;
  color:#fff;
}

#showroom_detail div.box div a:hover {
  text-decoration:underline;
}

#showroom_detail div.box div h2 span {
  color:#fff;
  font-weight:400;
}
#showroom_detail div.box div strong {
  color:#fff;
  font-weight:700;
}

#content div.box,
#basics div.box {
  display:block;
  background-color:#fff;
  float:left;
  padding:20px;
  font-size:20px;
  margin-bottom:45px;
  width:932px;
}

#content div.box:last-child,
#basics div.box:last-child {
  margin-bottom:0;
}

#content div.box h1,
#basics div.box h1 {
  font-size:24px;
  color:#d50b3d;
}

#content div.box h2,
#basics div.box h2 {
  font-size:20px;
  color:#d50b3d;
}

#content div.box a {
  font-weight:700;
  text-decoration:none;
  color:#4d4a4b;
}
#content div.box a:hover {
  color:#d50b3d;
}

#macher div.box {
  display:block;
  background-color:#fff;
  float:left;
  padding:20px;
  width:932px;
  font-size:20px;
  margin-bottom:45px;
}

#macher figure {
  display:block;
  background-color:#fff;
  margin:0 12px 12px 0;
  float:left;
  width:316px;
  height:580px;
}
#macher figure span {
  padding:16px;
  display:block;
  font-size:20px;
}

#macher figure span h2 {
  font-size:20px;
  color:#d50b3d;
  margin:0;
  padding:0;
}
  
.clearfix:after {
    content: ".";
    clear: both;
    display: block;
    visibility: hidden;
    height: 0px;
}

#content div.box address {
  font-style:normal;
}

.backlink {
  clear:both;
  display:block;
  width:28px;
  height:28px;
  background:url("/images/backlink.png") top left no-repeat;
  margin:0 auto 0 auto;
}

.uplink {
  clear:both;
  display:block;
  width:28px;
  height:28px;
  background:url("/images/uplink.png") top left no-repeat;
  margin:0 auto 0 auto;
}
p, div, span, aside, section {
  -moz-hyphens: auto;
  -o-hyphens: auto;
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto;
}

*.nohyphens {
  -moz-hyphens: none;
  -o-hyphens: none;
  -webkit-hyphens: none;
  -ms-hyphens: none;
  hyphens: none;
}

/* Footer
=========*/
footer {
  position:relative;
  width:972px;
  padding:24px 12px 24px 12px;
  margin:0 auto 0 auto;
  font-size:12px;
}

body.start footer {
  width:1240px;
  margin-left:28px;
}
  
 footer img.facebook {
   float:left;
   margin:-6px 12px 0px 0px;
}

footer a {
  color:#4d4a4b;
  text-decoration:none;
}
footer a:hover {
  color:#d50b3d;
}