@font-face {
    font-family: 'Raleway';
    src: url('fonts/Raleway-Bold.eot');
    src: url('fonts/Raleway-Bold.eot?#iefix') format('embedded-opentype'),
        url('fonts/Raleway-Bold.woff2') format('woff2'),
        url('fonts/Raleway-Bold.woff') format('woff'),
        url('fonts/Raleway-Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Raleway';
    src: url('fonts/Raleway-BlackItalic.eot');
    src: url('fonts/Raleway-BlackItalic.eot?#iefix') format('embedded-opentype'),
        url('fonts/Raleway-BlackItalic.woff2') format('woff2'),
        url('fonts/Raleway-BlackItalic.woff') format('woff'),
        url('fonts/Raleway-BlackItalic.ttf') format('truetype');
    font-weight: 900;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Raleway';
    src: url('fonts/Raleway-Black.eot');
    src: url('fonts/Raleway-Black.eot?#iefix') format('embedded-opentype'),
        url('fonts/Raleway-Black.woff2') format('woff2'),
        url('fonts/Raleway-Black.woff') format('woff'),
        url('fonts/Raleway-Black.ttf') format('truetype');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Raleway';
    src: url('fonts/Raleway-BoldItalic.eot');
    src: url('fonts/Raleway-BoldItalic.eot?#iefix') format('embedded-opentype'),
        url('fonts/Raleway-BoldItalic.woff2') format('woff2'),
        url('fonts/Raleway-BoldItalic.woff') format('woff'),
        url('fonts/Raleway-BoldItalic.ttf') format('truetype');
    font-weight: bold;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Raleway';
    src: url('fonts/Raleway-ExtraLight.eot');
    src: url('fonts/Raleway-ExtraLight.eot?#iefix') format('embedded-opentype'),
        url('fonts/Raleway-ExtraLight.woff2') format('woff2'),
        url('fonts/Raleway-ExtraLight.woff') format('woff'),
        url('fonts/Raleway-ExtraLight.ttf') format('truetype');
    font-weight: 200;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Raleway';
    src: url('fonts/Raleway-Light.eot');
    src: url('fonts/Raleway-Light.eot?#iefix') format('embedded-opentype'),
        url('fonts/Raleway-Light.woff2') format('woff2'),
        url('fonts/Raleway-Light.woff') format('woff'),
        url('fonts/Raleway-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Raleway';
    src: url('fonts/Raleway-ExtraLightItalic.eot');
    src: url('fonts/Raleway-ExtraLightItalic.eot?#iefix') format('embedded-opentype'),
        url('fonts/Raleway-ExtraLightItalic.woff2') format('woff2'),
        url('fonts/Raleway-ExtraLightItalic.woff') format('woff'),
        url('fonts/Raleway-ExtraLightItalic.ttf') format('truetype');
    font-weight: 200;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Raleway';
    src: url('fonts/Raleway-Regular.eot');
    src: url('fonts/Raleway-Regular.eot?#iefix') format('embedded-opentype'),
        url('fonts/Raleway-Regular.woff2') format('woff2'),
        url('fonts/Raleway-Regular.woff') format('woff'),
        url('fonts/Raleway-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}



@font-face {
    font-family: 'Raleway';
    src: url('fonts/Raleway-Medium.eot');
    src: url('fonts/Raleway-Medium.eot?#iefix') format('embedded-opentype'),
        url('fonts/Raleway-Medium.woff2') format('woff2'),
        url('fonts/Raleway-Medium.woff') format('woff'),
        url('fonts/Raleway-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Raleway';
    src: url('fonts/Raleway-Thin.eot');
    src: url('fonts/Raleway-Thin.eot?#iefix') format('embedded-opentype'),
        url('fonts/Raleway-Thin.woff2') format('woff2'),
        url('fonts/Raleway-Thin.woff') format('woff'),
        url('fonts/Raleway-Thin.ttf') format('truetype');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Raleway';
    src: url('fonts/Raleway-SemiBold.eot');
    src: url('fonts/Raleway-SemiBold.eot?#iefix') format('embedded-opentype'),
        url('fonts/Raleway-SemiBold.woff2') format('woff2'),
        url('fonts/Raleway-SemiBold.woff') format('woff'),
        url('fonts/Raleway-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Raleway';
    src: url('fonts/Raleway-Thin_1.eot');
    src: url('fonts/Raleway-Thin_1.eot?#iefix') format('embedded-opentype'),
        url('fonts/Raleway-Thin_1.woff2') format('woff2'),
        url('fonts/Raleway-Thin_1.woff') format('woff'),
        url('fonts/Raleway-Thin_1.ttf') format('truetype');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}


html{
padding: 0px; 
margin: 0px; 
width: 100%; 
height: 100%; 
}
body{
padding: 0px; 
margin: 0px; 
width: 100%; 
height: 100%; 
font-family: 'Raleway', Arial, sans-serif;
font-size: 1.0em; 
hyphens: auto; 
}
a:link, a:visited{color:#000000; text-decoration: none; font-weight: 500; }
a:hover, a:focus{color:#888888;text-decoration: underline;}

/*NAVIGATION*/
#kopfzeile{width: 80%; height: 60px; margin: 0px; padding: 0px 10% 0px 10%; text-align: right; background-color: #384767;}
#kopfzeile a{
text-decoration: none; 
color: #FFFFFF; 
text-transform: uppercase; 
line-height: 60px; 
}
#header img.kanzleiheader{
width: 16.6%; 
height: auto; 
display: inline-block; 
padding: 0px; 
margin: 0px; 
float: left; 
}


#nav{
position: relative;
top: 0px;  
width: 100%; 
min-height: 50px; 
padding: 0px; 
margin: 0px; 
border: 0px solid #FF0000; 
display: block; 
float: left; 
z-index: 30; 
}
#nav ul{
padding: 0px 0px 0px 0px;
position: relative; 
margin: 0px 10% 0px 0%;
height: 60px; 
border: 0px solid #999999;
border-radius: 0px; 
display: inline-block; 
max-height: 80px;
list-style:none;
transition: all 1.0s ease-in-out;
float: right; 
}
#nav li{
color: #000000;
float: left;

padding: 10px 0px 10px 0px;
margin: 0px 0px 0px 0px;
text-align: center;
height: 40px;
transition: all 1.0s ease-in-out; 
border-radius: 0px; 
border: 0px solid #999999;
}
#nav li.last{
}

#nav li a{
text-decoration: none;
color: #000000;
display: block; 
height: 40px; 
line-height: 40px; 
margin: 0px; 
padding: 0px 0px 0px 20px; 
font-size: 0.9em;
transition: all 0.4s ease-in-out; 
text-align: right;
white-space: nowrap; 
font-weight: 500;
text-transform: uppercase; 
}

#nav li a:hover, #nav li a:focus{
font-weight: 500;
}

#nav li.haschild{
}

#nav ul.subnav{
display: none; 
transition: all 1.5s ease-in-out;
width: 0px; 
height: 0px; 
max-height: 0px; 
max-width: 0px; 
border-radius: 0px; 
border-bottom: 0px solid #FFFFFF; 
background-color: #384767; 
}
#nav ul.subnav.ausgeklappt{
display: inline-block; 
max-height: 500px; 
min-width: 220px; 
width: auto; 
height: auto; 
position: absolute; 
right: -10%; 
float: right; 
}
#nav ul.subnav.ausgeklappt li{
display: block; 
float: left; 
max-height: 50px; 
width: 100%; 
border-radius: 0px; 
border-left: 0px solid #FF0000; 
border-right: 0px solid #FF0000; 
border-top: 0px solid #FF0000; 
border-bottom: 1px solid #FFFFFF; 
}
#nav ul.subnav.ausgeklappt li.last{
border-bottom: 0px solid #FFFFFF; 
}

#nav ul.subnav.ausgeklappt li a{
text-align: left; 
display: block; 
color: #FFFFFF; 
font-size: 0.8em; 
padding: 0px 0px 0px 10px; 
}
#nav ul.subnav.ausgeklappt li a:hover, #nav ul.subnav.ausgeklappt li a:focus{
font-weight: 300;
}


/*BOXLAYOUT*/
.boxlinks{}
.boxmitte{}
.boxrechts{}

/*NURAUFDERSTARTSEITE*/
#header{
width: 100%; 
height: auto; 
padding: 0px 0px 0px 0px; 
margin: 0px; 
z-index: 1; 
background-color: #f8f8f8;
display: inline-block; 
}
#headerbox{
width: 80%; 
margin: 0px; 
padding: 0px 10% 0px 10%; 

}
.headline, .subheadline{
width: 80%; 
height: auto; 
display: block; 
text-align: center; 
border: 0px solid #FF0000; 
float: left; 
background-color: #FFFFFF; 
font-weight: 300; 
}
.headline.kanzlei{font-size: 1.6em; margin: 0px 10% 0px 10%;  text-transform: uppercase; padding: 20px 0px 0px 0px; }
.subheadline.kanzlei{font-size: 0.8em; color: #999999; margin: 0px 10% 50px 10%; padding: 10px 0px 10px 0px; }




#teaser{
width: 80%; 
height: auto; 
display: block; 
margin: 0px 10% 50px 10%; 
border: 0px solid #FF0000; 
float: left; 
}
.teaserheadline{font-size: 1.8em; margin: 0px 10% 0px 10%;  text-transform: uppercase; padding: 20px 0px 0px 0px; font-weight: 500; }
.teasersubheadline{font-size: 1.0em; color: #888888; margin: 0px 10% 50px 10%; padding: 10px 0px 10px 0px; font-weight: 300; }
.startteaser{
width: 30%; 
max-width: 30%; 
height: auto; 
display: inline-block; 
padding: 0px 3% 0px 0px; 
margin: 0px; 
float: left; 
}
.teaserbox{
border: 0px solid #FF0000; 
display: inline-block; 
text-align: center; 
font-size: 0.8em; 
min-height: 520px; 
width: 100%; 
position: relative; 
padding: 0px; 
margin: 0px 0px 40px 0px; 
}
.teaserbox img{
border: 1px solid #999999; 
padding: 10px; 
width: calc(100% - 22px); 
}
.teaserbox b{
width: 100%; 
float: left; 
padding: 30px 0px 30px 0px; 
margin: 0px; 
display: block; 
font-weight: 700; 
font-size: 1.5em; 
color: #384767; 
text-transform: uppercase; 
}
.teaserbox span.mehr{
width: 100%; 
display: block; 
padding: 30px 0px 30px 0px; 
margin: 0px; 

}
.teaserbox span.mehr a{
padding: 10px 20px 10px 20px; 
margin: 0px; 
color: #FFFFFF; 
background-color: #384767; 
text-align: center; 
text-decoration: none; 
text-transform: uppercase; 
font-weight: 700; 
}

#schachbrett{width: 100%; height: auto; display: block; padding: 0px 10% 80px 10%; border: 0px solid #FF0000; float: left; display: block; background-color: #f5f5f5; margin: 0px; }
.chessheadline{font-size: 1.8em; margin: 0px;  text-transform: uppercase; padding: 20px 0px 0px 0px; font-weight: 500; text-align: center; }
.chesssubheadline{font-size: 1.0em; color: #888888; margin: 0px; padding: 10px 0px 10px 0px; font-weight: 300; text-align: center; }

#schachbrett td{width: 20%; min-height: 230px; }
.einsbox,.zweibox,.dreibox,.vierbox,.fuenfbox,.sechsbox,.siebenbox,.achtbox,.neunbox,.zehnbox{margin: 0px 2px 2px 0px; color: #888888; border: 0px solid #FF0000; background-color: #FFFFFF; font-size: 0.8em; }

#schachbrett td img{padding: 0px; margin: 0px; float: left; width: 100%; height: auto; }
#schachbrett td a{text-decoration: none; color: #000000; padding: 20px 0px 0px 0px; display: block; }

.einsbox, .dreibox, .siebenbox, .neunbox{padding: 0px; }

.zweibox,.vierbox,.sechsbox,.achtbox{padding: 0px 20px 0px 20px; }

.fuenfbox, .fuenfbox a, .zehnbox, .zehnbox a{background-color: #384767;color: #FFFFFF !important; text-decoration: none; text-align: center; padding: 0px 0px 0px 0px !important; text-transform: uppercase; }

div#trustus{
width: 80%; 
margin: 30px 10% 40px 10%; 
padding: 0px; 
display: inline-block; 
}

div.vertrauen{
width: 40%; 
float: left; 
display: inline-block; 
margin: 0px; 
color: #888888; 
}
div.vertrauen.first{padding: 0px 0px 0px 0px; }
div.vertrauen.second{padding: 0px 0px 0px 10%; border-left: 1px solid #999999; }

div.vertrauen b{
width: 100%; 
float: left; 
display: inline-block; 
font-size: 1.6em; 
color: #000000; 
font-weight: 500; 
}
div.vertrauen span.mehr{
width: 100%; 
display: block; 
padding: 30px 0px 30px 0px; 
margin: 0px; 
}
div.vertrauen span.mehr a{
padding: 10px 20px 10px 20px; 
margin: 0px; 
color: #FFFFFF; 
background-color: #384767; 
text-align: center; 
text-decoration: none; 
text-transform: uppercase; 
font-weight: 700; 
}


/*FOOTER*/
#footer{
background-color: #384767; 
width: 80%; 
padding: 40px 10% 40px 10%; 
margin: 0px; 
color: #FFFFFF; 
font-weight: 300; 
font-size: 0.8em; 
line-height: 1.8em; 
display: inline-block; 
}
#footer b{font-weight: 500; padding: 20px 0px 0px 0px; width: 100%; display: block; text-transform: uppercase; }
#footer a{color: #FFFFFF; text-decoration: none; }
#footer a:hover, #footer a:focus{color: #CCCC99; text-decoration: underline; }
#foolinks,#foomitte,#foobilder,#foorechts{width: 22%; float: left; margin-right: 3%; }
img.foobild{width: 40%; float: left; border: 0px solid #FF0000; padding: 0px 10px 10px 0px; }
#foobilder{padding: 20px 0px 0px 0px;}
#copyright{height: 80px; text-align: center; text-transform: uppercase; line-height: 80px; background-color: #f8f8f8;}


#wortwolke{
float: right; 
display: inline-block; 
width: 22%; 
margin: 0px 10% 0px 0px; 
padding: 0px; 
border: 0px solid #FF0000; 
line-height: 1.8em; 
font-size: 0.9em; 
color: #666666; 
font-weight: 300; 
}
#wortwolke h4{
font-weight: 500; 
color: #000000; 
}
#wortwolke a{
text-decoration: none; 
color: #666666; 
}

img.profilbild{
width: 33%; 
float: left; 
padding: 0px; 
}
img.profilbild:nth-child(odd){
margin: 0px 0px 30px 0px; 
}
img.profilbild:nth-child(even){
margin-left: 10px; 
margin-right: calc(34% - 10px);
margin-top:0px;
margin-bottom: 30px; 
}

#kontaktbox {
width: 50%; 
margin: 0px; 
padding: 0px 5% 50px 10%; 
display: block; 
float: left; 
color: #666666; 
border: 0px solid #FF0000; 
}
#kontaktbox .ma_box{
width: 100%; 
}

#kontaktbox img{
display: block; 
width: 30%; 
margin: 0px 70% 0px 0px; 
padding: 0px; 
float: left; 
}

.ma_box.vdheyde .neutral, .ma_box.vdheyde .pfeifferx, 
.ma_box.ppfeiffer .neutral, .ma_box.ppfeiffer .vdheydex,
.ma_box.alutz .vdheydex{
display: none; 
}

.ma_box .hidecontact{display: none; }
#kontaktbox .ma_box .hidecontact{
display: block; 
margin: 30px 0px 0px 0px; 
padding: 0px; 
}
.ma_box .hidecontact a{
color: #000000; 
text-decoration: none; 
}

#teamtext.impressum{
color: #888888; 
font-weight: 300; 
}
#teamtext.impressum h3{color: #000000;}
#teamtext.impressum b{color: #000000; }
h3{font-weight: 500; }

#teamtext{
width: 50%; 
margin: 0px; 
padding: 0px 5% 50px 10%; 
display: block; 
float: left; 
color: #666666; 
border: 0px solid #FF0000; 
}

.minheight #teamtext{
min-height: 500px; 
}

#teamtext a{
color: #000000; 
text-decoration: none; 
}
div#teambox{
width: 52%; 
margin: 0px; 
padding: 0px 0% 0px 10%; 
display: flex; 
flex-direction: row; 
flex-wrap: wrap; 
justify-content: flex-start; 
align-items: stretch; 
border: 0px solid #FF0000; 
}

.ma_box{
flex-grow: 1; 
width: 30%; 
float: left; 
display: inline-block; 
hyphens: auto; 
font-size: 0.8em; 
line-height: 2.0em; 
}
.ma_box:nth-child(even){
margin: 0px 0px 50px 5%; 
padding: 0px 0px 0px 5%; 
border-left: 1px solid #CCCCCC; 
}
.ma_box:nth-child(odd){
margin: 0px 0px 50px 0%; 
padding: 0px 0px 0px 0%; 
border-left: 0px solid #CCCCCC; 
}

.ma_box h3{
font-size: 1.5em; 
padding: 0px; 
margin: 0px; 
width: 100%; 
float: left; 
}

.ma_box img{
width: 65%; 
height: auto; 
padding: 0px 35% 0px 0px; 
margin: 0px; 
display: block; 
float: left; 
}
.pmitarbeiter{
display: block; 
float: left; 
width: 100%; 
height: auto; 
margin: 0px 0px 20px 0px; 
padding: 0px 0px 0px 0px; 
}

@media screen and (min-width: 768px) and (max-width: 1024px) { 

#nav ul{
margin: 0px 2% 0px 2%;
float: left; 
display: block; 
}
#nav li{padding: 3px 0px 3px 0px;}
#nav li a{padding: 0px 0px 0px 12px; font-size: 0.9em;}
div#teambox, div#wortwolke, div#teamtext{
width: 90%; 
padding: 0px 5% 50px 5%; 
margin: 0px; 
border: 0px solid #FF0000;  
float: left; 
}

.ma_box{
width: 90%; 
}
.ma_box:nth-child(2n), .ma_box:nth-child(2n+1){
border-left: 0px solid #CCCCCC;
border-top: 1px solid #CCCCCC; 
margin: 0px 0px 0px 0px;
padding: 30px 0px 30px 0px;
}
.ma_box img{
width: 30%; 
padding: 0px 70% 0px 0px;
}
#footer{
display: flex; 
flex-direction: row; 
flex-wrap: wrap; 
justify-content: flex-start; 
align-items: stretch; 
}
#foolinks, #foomitte, #foobilder, #foorechts{
width: 44%;
}

#copyright{
font-size: 0.8em; 
}

}

@media screen and (min-width: 300px) and (max-width: 767px) {
.teaserbox{
margin: 0px 0px 20px 0px;
min-height: 400px;
}
table#schachbrett{
display: block; 
width: 100%; 
}
table#schachbrett tr{
display: block; 
width: 100%; 
padding: 0px; 
margin: 0px; 
}
table#schachbrett td {
min-width: auto;
min-height: auto;
width: 44%; 
height:150px; 
float: left; 
padding: 10px 2% 10px 2%; 
margin: 10px 0px 0px 0px;
}
table#schachbrett td img{
width: auto; 
height: 100%; 
float: right; 
}
table#schachbrett td.uppercase{
padding: 10px 2% 10px 2% !important;  
}
table#schachbrett td.chessheadline,  table#schachbrett td.chesssubheadline{
width: 100%; 
height: auto; 
padding: 10px 2% 10px 2%;
margin: 10px 0px 10px 0px; 
}
div.vertrauen{
font-size: 0.8em; 
}

#headerbox {
padding: 150px 10% 0px 10%;
}
#kopfzeile{
position: absolute; 
top: 50px; 
}
#nav{
width: 100%;
font-size: 1.0em;
/*border:1px solid #FF0000;*/
padding: 0px 0px 0px 0px;
margin: 0px 0px 50px 0px;
z-index: 10;
position: fixed; 
top: 0px; 
height: 50px;
overflow: hidden; 
background-color: #DFDFDF;
}
#nav ul {
display: inline-block;
width: calc(100% - 20px);
padding: 50px 10px 10px 10px;
margin: 0px;
background-image: url("images/hamburgermenul.png");
background-position: right 10px;
background-repeat: no-repeat;
background-size: 48px 30px;
}
#nav.open ul ul{
background-image: none; 
}

#nav.open li {
width: 90%;
height: 30px;
margin: 0px 5% 0px 5%;
border-top: 1px solid #999999;
border-radius: 0px;
font-size: 1.0em;
text-align: left;
line-height: 30px;
}
#nav li a{
text-align: left;
}


#nav li:nth-child(1){
border-top: 0px solid #999999;
}
#texte{
margin: 0px 10px 60px 0px;
border: 0px solid #FF0000;
font-size: 3.0em;
}

#nav.open li {
transition: none;
}
#nav.open {
height:680px;

}
#nav.open ul.subnav{
display: block; 
border: 0px solid #FF0000; 
position: absolute; 
left: 5%; 
float: left; 
height: auto; 
max-height: 5000px;
max-width: 80%;
padding: 0px 5% 10px 5%;
transition: none;
}
#nav.open ul.subnav, #nav.open ul.subnav.ausgeklappt{
background-color: #FFFFFF; 
width: 100%; 
}
#nav.open ul.subnav.ausgeklappt li{


}
#nav.open ul.subnav.ausgeklappt li.last{ 
}
#nav.open ul.subnav.ausgeklappt li a{
color: #888888; 
border-bottom: 1px solid #999999; 
text-align: left; 
display: block; 
font-size: 0.9em; 
padding: 0px 0px 0px 20px; 
}
#nav.open ul.subnav.ausgeklappt li a:hover, #nav ul.subnav.ausgeklappt li a:focus{
font-weight: 300;
}



div#teambox, div#wortwolke, div#teamtext{
width: 90%; 
padding: 0px 5% 0px 5%; 
margin: 0px; 
border: 0px solid #FF0000;  
}
div#teamtext{
padding: 150px 5% 20px 5%; 
border-bottom: 1px solid #CCCCCC;  
}
div#wortwolke{
padding: 0px 5% 50px 5%; 
border-bottom: 1px solid #CCCCCC;  
margin: 0px 0px 50px 0px; 
}

#kontaktbox{
width: 90%; 
padding: 150px 0px 0px 0px; 
margin: 0px 5% 0px 5%; 
}
.ma_box{
width: 90%; 
font-size: 1.0em; 
}
.ma_box:nth-child(2n), .ma_box:nth-child(2n+1){
border-left: 0px solid #CCCCCC;
border-bottom: 1px solid #CCCCCC; 
margin: 0px 0px 30px 0px;
padding: 0px 0px 0px 0px;
}
.ma_box img{
width: 30%; 
padding: 0px 70% 0px 0px;
}
#footer{
display: flex; 
flex-direction: row; 
flex-wrap: wrap; 
justify-content: flex-start; 
align-items: stretch; 
}
#foolinks, #foomitte, #foobilder, #foorechts{
width: 88%;
border-top: 1px solid #999999; 
padding: 10px 0px 10px 0px;
}
#foolinks{border-top: 0px solid #999999; }

#copyright{
font-size: 0.8em; 
}

}