* {
margin: 0;
padding: 0;
}

body {
background-color: #F8FBFC;
color: #433c20;
font-family: Verdana, sans-serif;
font-size: 100.01%;
text-align: center;
margin: 8% auto;
}

#content {
position: relative;
width: 53em;
margin: 0px auto;
text-align: left;
}

img.index {
width: 53em;
height: 21em; 
background-color: #fa5229;
border-top: 1px solid #373116;
border-bottom: 1px solid #373116;
}


#leistungen,
#kontakt,
#referenzen,
#impressum, 
#standort,
#ansprechpartner,
#kundenliste {
position: absolute;
top: 1.65em;
left: 0;
width: 53em;
height: 21em;
border-top: 1px solid #373116;
border-bottom: 1px solid #373116;
}
#agentur { background-color: #fa5229; }
#leistungen { background-color: #b1dbfb; }
#kontakt { background-color: #f99b1c; }
#kundenliste { background-color: #DEDBD0; }

#kundenauflistung {
position: absolute;
top: 37em;
left: 0;
font-size: 70%;
line-height: 1.5em;
}

#listenfenster {
overflow: auto;
float: right;
margin: 0;
padding: 1em 2.5em 0em 0;
width: 22em;
height: 20em;
text-align: right;
}

div.blende_oben {
position: absolute;
top: 0; 
right: 2em;
background-color: #DEDBD0;
width: 30em;
height: .9em;
}

div.blende_unten {
position: absolute;
bottom: 0em; 
right: 2em;
background-color: #DEDBD0;
width: 30em;
height: .9em;
}

#auswahl {
width: 53em;
height: 21em;
border-top: 1px solid #373116;
border-bottom: 1px solid #373116;
}

#inhalt_text {
position: absolute;
top: 4.5em;
left: .625em;
width: 50em;
}
#impressum_text {
position: absolute;
top: 2.5em;
left: .625em;
width: 50em;
z-index: 1000;
}
#impressum_text a {
color: #433c20;
text-decoration: none;
}

#wer_was {
position: absolute;
top: 60px;
left: 20px;
}

.partnertext_c {
position: absolute;
bottom: .6em;
left: .8em;
color: white;
font-weight: bold;
}
.partnertext {
position: absolute;
bottom: .6em;
right: .8em;
color: white;
font-weight: bold;
text-align: right;
}
.partnertext_c p.abstand,
.partnertext p.abstand {
margin-bottom: .8em;
}

#kontakttext {
position: absolute;
top: 5em;
right: 1.2em;
text-align: right;
}


.standort_text {
position: absolute;
right: 4em;
top: 14em;
font-weight: bold;
width: 16.3em;
z-index: 1000;
}
.standort_text p.right {
float: right;
} 
.standort_text p.left {
float: left;
text-align: right;
/* margin-top: 5em; */
} 

h1.prolog {
font-size: 80%;
color: #53482e;
}
h2.kontakt {
font-size: 70%;
margin-bottom: 2.7em;
letter-spacing: .05em;
}
h3.kontakt {
font-size: 70%;
font-weight: normal;
margin-bottom: 2.7em;
line-height: 2.3em;
letter-spacing: .05em;
}
h4 {
font-size: 70%;
letter-spacing: .05em;
color: #433c20;
}

#die_liste p {
margin-bottom: 1.6em;
color: #433c20;
}

p {
font-size: 70%;
line-height: 1.4em;
}

#inhalt_text p {
font-size: 70%;
line-height: 1.4em;
margin-bottom: .9em;
color: #fff;
}

#inhalt_text p.braun {
font-size: 70%;
line-height: 1.4em;
margin-bottom: .9em;
color: #433c20;
}

h1.inhalt_text {
font-size: 70%;
margin-bottom: 2em;
}

h1.agentur_text {
font-size: 70%;
margin-bottom: 2em;
color: #fff;
}

h1.impressum {
font-size: 70%;
margin: 2em 0 1em 0;
}

#impressum_text p {
font-size: 55%;
line-height: 1.5em;
margin-bottom: .6em;
}

span.konzeption-abstand {
margin-left: .9em;
}

span.normal {
font-weight: normal;
/* color: #53482e; */
}

p.fotograf,
a:link.fotograf,
a:visited.fotograf {
position: absolute;
bottom: .5em;
right: .5em;
font-size: 60%;
color: #433c20;
text-decoration: none;
}

a:hover.fotograf {
text-decoration: underline;
}




/* ab hier:

Listenformatierungen


 */
#inhalt_text ul {
list-style: none;
font-size: 70%;
margin: 1.5em;
line-height: 1.6em;  
}

#inhalt_text a {
color: #433c20;
text-decoration: none;
}


/* ab hier:

die Kundenverlinkung

 */
a:link.kundenverlinkung, a:visited.kundenverlinkung {
color: #6c6751;
text-decoration: none;
font-size: 70%;
font-weight: normal;
}
a:hover.kundenverlinkung {
font-weight: normal;
color: #433c20;
}

/* ab hier:

Bildformatierungen


 */

img {
border: 0;
} 

#braun_grafikdesign {
width: 53em;
height: 1.25em;
margin: 0 0 .4em 0;
} 

img.right {
float: right;
width: 35em; 
height: 21em;
}
img.left {
float: left;
width: 18em; 
height: 21em;
}
img.ganz {
position: absolute;
top: 0;
left: 0;
width: 53em;
height: 21em;
}

img.index {
width: 53em;
height: 21em;
}






/* ab hier:

die Haupt-Navigation


 */


ul#bottom_nav { 
position: absolute;
top: 33em;
left: 0em;
list-style: none;
font-size: 70%;
line-height: 1.3em;
font-weight: bold; 
}
ul#bottom_nav li { 
display: inline;
border-right: 1px solid #c2b7a6;
padding: 0 .7em;
float: left;
}

ul#bottom_nav li.ohne_rand {
border: none;
color: #433c20;
}

li a:link, li a:visited {
color: #AF9F89;
text-decoration: none;
}
li a:hover,
li a:link.aktiv, li a:visited.aktiv, li a:hover.aktiv {
color: #433c20;
}



ul#bottom_nav ul.unterpunkte_leistungen,
ul#bottom_nav ul.unterpunkte_leistungen_sichtbar {
position: absolute;
top: 1.3em; 
left: 0em;
width: 35em;
display: inline;
}

ul#bottom_nav ul.unterpunkte_referenzen,
ul#bottom_nav ul.unterpunkte_referenzen_sichtbar {
position: absolute;
top: 1.3em; 
left: 8.5em;
width: 35em;
}

ul#bottom_nav ul.unterpunkte_kontakt,
ul#bottom_nav ul.unterpunkte_kontakt_sichtbar {
position: absolute;
top: 1.3em; 
left: 17.3em;
width: 35em;
}
ul#bottom_nav ul.unterpunkte_kontakt2,
ul#bottom_nav ul.unterpunkte_kontakt_sichtbar2 {
position: absolute;
top: 2.6em; 
left: 17.3em;
width: 43em;
}


ul#bottom_nav ul.unterpunkte_leistungen,
ul#bottom_nav ul.unterpunkte_referenzen,
ul#bottom_nav ul.unterpunkte_kontakt,
ul#bottom_nav ul.unterpunkte_kontakt2 {
display: none;
} 

ul#bottom_nav li:hover ul.unterpunkte_leistungen,
ul#bottom_nav li:hover ul.unterpunkte_referenzen,
ul#bottom_nav li:hover ul.unterpunkte_kontakt,
ul#bottom_nav li:hover ul.unterpunkte_kontakt2 {
display: inline; 
}


a:link.hellblau, a:visited.hellblau,
a:link.ziegel, a:visited.ziegel,
a:link.orange, a:visited.orange,
a:link.gruen, a:visited.gruen,
a:link.ocker, a:visited.ocker { color: #af9f89; }

.hellblau, li.hellblau, a:hover.hellblau { color: #66ccff; }
.ziegel, li.ziegel, a:hover.ziegel { color: #ff6633; }
.orange, li.orange, a:hover.orange { color: #ff9900; }
.gruen,li.gruen, a:hover.gruen { color: #B7C922; }
.ocker, li.ocker, a:hover.ocker { color: #c6a400; }













/* ab hier:

die Kundenauflistung


 */


/* die Farbvariationen Referenzen: */
#kundenauflistung,
#kundenauflistung a,
#listenfenster,
#listenfenster a {
color: #988874;
text-decoration: none;
}
#kundenauflistung a:hover,
#listenfenster a:hover {
color: #433c20;
}
   
.aktiv { 
color: #433c20;
}


#inhalt_text a:link.agentur, 
#inhalt_text a:visited.agentur {
letter-spacing: .1em;
color: white;
text-decoration: none;
border-bottom: 1px dotted #fff;
}



/* ab hier: 

transparente referenzen-rollover-bilder 

*/

img#trias { position: absolute; left: .5em; top: 0; width: 8.9em; height: 8em; }
img#reichardt { position: absolute; left: 0px; top: 6.4em; width: 7em; height: 8em; }
img#meissner { position: absolute; left: 1.5em; bottom: 0em; width: 8.4em; height: 6em; }
img#oktogon { position: absolute; left: 6.9em; top: 3.9em; width: 8.9em; height: 6.8em; }
img#beaufort { position: absolute; left: 10.5em; top: 11.5em; width: 8.7em; height: 8em; }
img#dialog { position: absolute; left: 16.6em; top: .7em; width: 8em; height: 6em; }
img#fairy { position: absolute; left: 20em; top: 5.4em; width: 8.9em; height: 8em; }
img#tour { position: absolute; left: 19em; bottom: 0em; width: 6em; height: 6em; }
img#goedecke { position: absolute; left: 27.5em; top: 0; width: 8.9em; height: 8em; }
img#frub { position: absolute; left: 26.2em; top: 10em; width: 9.2em; height: 9em; }
img#kom { position: absolute; left: 35em; top: 5em; width: 5.3em; height: 9em; }
img#dmp { position: absolute; left: 41em; top: 0; width: 7.7em; height: 5.5em; }
img#frisch { position: absolute; left: 40.4em; top: 5em; width: 7.4em; height: 6.6em; }
img#golf { position: absolute; left: 38.4em; bottom: .9em; width: 6em; height: 6em; }
img#human { position: absolute; right: 0; top: 3.8em; width: 5em; height: 5.5em; }
img#wh { position: absolute; right: 0; bottom: 0; width: 8em; height: 8.8em; }



/* ab hier:

REFERENZEN-rollovertexte


*/

.trias_span a span.erlaeuterung, .reichardt_span a span.erlaeuterung, .meissner_span a span.erlaeuterung, .oktogon_span a span.erlaeuterung, 
.beaufort_span a span.erlaeuterung, .dialog_span a span.erlaeuterung, .fairy_span a span.erlaeuterung, .tour_span a span.erlaeuterung,
.goedecke_span a span.erlaeuterung, .frub_span a span.erlaeuterung, .kom_span a span.erlaeuterung, .dmp_span a span.erlaeuterung, 
.frisch_span a span.erlaeuterung, .golf_span a span.erlaeuterung, .human_span a span.erlaeuterung, .wh_span a span.erlaeuterung {
display: none;
} 

.trias_span a:hover,
.reichardt_span a:hover,
.meissner_span a:hover,
.oktogon_span a:hover,
.beaufort_span a:hover,
.dialog_span a:hover,
.fairy_span a:hover,
.tour_span a:hover,
.goedecke_span a:hover,
.frub_span a:hover,
.kom_span a:hover,
.dmp_span a:hover,
.frisch_span a:hover,
.golf_span a:hover,
.human_span a:hover,
.wh_span a:hover {
cursor: pointer;
text-decoration: none;
}

a:hover span.erlaeuterung {
position: absolute;
color: #433c20;
background-color: white;
font-size: 80%;
padding: .9em;
width: auto;
height: auto;
display: block;
border: 1px solid #696969;
}

a:hover span.erlaeuterung b {
font-size: 70%;
line-height: 1.4em;
}

.trias_span a:hover span.erlaeuterung { left: .5em; top: 2.6em;  } 

.reichardt_span a:hover span.erlaeuterung { left: .5em; top: 11em; } 

.meissner_span a:hover span.erlaeuterung { left: 1.5em; bottom: 1.7em; }

.oktogon_span a:hover span.erlaeuterung { left: 8em; top: 8em; }

.beaufort_span a:hover span.erlaeuterung { left: 12em; top: 18em; }

.dialog_span a:hover span.erlaeuterung { left: 20em; top: 4em; }

.fairy_span a:hover span.erlaeuterung { left: 24em; top: 11em; }

.tour_span a:hover span.erlaeuterung { left: 22em; bottom: 2.8em; }

.goedecke_span a:hover span.erlaeuterung { left: 32em; top: 3.5em; }

.frub_span a:hover span.erlaeuterung { left: 30.8em; top: 16em; }

.kom_span a:hover span.erlaeuterung { left: 40em; top: 10em; }

.dmp_span a:hover span.erlaeuterung { left: 51.3em; top: 1.7em; }

.frisch_span a:hover span.erlaeuterung { left: 47.3em; top: 9em; }

.golf_span a:hover span.erlaeuterung { left: 46em; top: 19em; }

.human_span a:hover span.erlaeuterung { right: .5em; top: 6em; }

.wh_span a:hover span.erlaeuterung { right: .5em; bottom: 4em; }