:root {
  --blue-black: #182d43;
  --blue-dark: #315983;
  --blue-lite: #8FABDB;
    --white: #ffffff;
    --black: #000000;
    --Font: Helvetica, Arial, Verdana, sans-serif;
    --Logo-height: 91px;
    --WelcomeImages: 100px;
    --FontSize_small: 0.8em;
    --FontSize_medium_small: 1.0em; 
    --FontSize_medium: 1.2em;
    --FontSize_large: 1.5em;
    --FontSize_xlarge: 2.0em;
    --FontSize_xxlarge: 2.5em;

  }


body    { background-color: var(--blue-dark); color: var(--white); font-family: var(--Font); margin: 0;}
h1      { font-size: var(--FontSize_xlarge);}
a       { text-decoration: none; color: var(--white);}

.block_blue-lite  { background-color: var(--blue-lite);}
.svg_Logo         { width: auto; height: var(--Logo-height);}

#div_Welcome          { position: relative; height: 700px; align-items: center;}
#div_Welcome_Logo     { position: absolute; top: 1%; left: 1%; background-color: var(--white); width: 150px ; height:var(--Logo-height);}

#div_Welcome_Text     { float: left ; width: 50%; margin: 120px 0 0 0; text-align: center;}
.Welcome_Text         { font-size: var(--FontSize_medium); line-height: 1.5em; margin: 0 50px;}
.Welcome_Button       { width: 270px; height: 50px; background-color: var(--white); font-size: var(--FontSize_medium_small); text-align: center; line-height: 50px; margin: 40px auto 0 auto; border-radius: 3px;}
.Welcome_Button a     { color: var(--black); text-transform: uppercase}

#div_Welcome_Images   { float: right; width: 50%; background-color: var(--blue-black);height: 700px;}
#Bauleitung_Images01  { width: 49%; float: left; height: 245px; margin: 6px 1% 0 0; background-image: url("../images/planning-3536758_1280.jpg"); background-position: center; background-size: cover; opacity: 0.75;}
#Bauleitung_Images02  { width: 49%; float: right; height: 280px; margin: 6px 0 0 1%; background-image: url("../images/engineer-4925118_1280.jpg"); background-position: center; background-size: cover;opacity: 0.75;}
#Bauleitung_Images03  { width: 49%; float: left; height: 270px; margin: 6px 1% 0 0; background-image: url("../images/architect-3979490_1280.jpg"); background-position: center; background-size: cover;opacity: 0.75;}
#Bauleitung_Images04  { width: 49%; float: right; height: 270px; margin: 6px 0 0 1%; background-image: url("../images/planning-3536753_1280.jpg"); background-position: center; background-size: cover;opacity: 0.75;}
#Bauleitung_Images05  { width: 49%; float: left; height: 160px; margin: 6px 1% 0 0; background-image: url("../images/pexels-kampus-8729966.jpg"); background-position: center; background-size: cover;opacity: 0.75;}
#Bauleitung_Images06  { width: 49%; float: right; height: 125px; margin: 6px 0 0 1% ;background-image: url("../images/meeting-2189800_1280.jpg"); background-position: center; background-size: cover;opacity: 0.75;}

#div_Planung                    { min-height: 100px; ; height: 500px;}
#div_Planung_Header             { margin: 0 0 0 30px;}
#div_Planung_Text_Container     { width: 50%; float: right;}
#div_Planung_Text_Container div { margin-left: 8%;}
#div_Planung_Text_Container h1  { margin: 40px 0 0 8%;}
#div_Planung_Images             { width: 50%; float: left; height: 500px; background-image: url("../images/planning-3536758_1280.jpg"); background-position: center; background-size: cover; opacity: 0.85;}

#div_Beratung                     { min-height: 100px; height: 500px}
#div_Beratung_Text_Container      {  width: 50%; float: left;}
#div_Beratung_Text_Container div  { margin-left: 8%;}
#div_Beratung_Text_Container h1   { margin: 40px 0 0 8%;}
#div_Beratung_Images              { width: 50%; float: right;height: 500px; background-image: url("../images/engineer-4925118_1280.jpg"); background-position: center; background-size: cover;opacity: 0.85;} 

#div_Bauleitung                     { min-height: 100px; height: 500px;}
#div_Bauleitung_Text_Container      { width: 50%; float: right;}
#div_Bauleitung_Text_Container div  { margin-left: 8%;}
#div_Bauleitung_Text_Container h1     { margin: 40px 0 0 8%;}
#div_Bauleitung_Images              { width: 50%; float: left;height: 500px; background-image: url("../images/architect-3979490_1280.jpg"); background-position: center; background-size: cover;opacity: 0.85;}

#div_Kontakt                    { height: 500px;}
#div_Kontakt_Text_Container     { width: 50%; float: left;}
#div_Kontakt_Text_Container div     { margin-left: 12.5%;}
#div_Kontakt_Text_Container h1     { margin: 40px 0 0 8%;}
#div_Kontakt_Images   { width: 50%; float: right; height: 500px; background-image: url("../images/meeting-2189800_1280.jpg"); background-position: center; background-size: cover;opacity: 0.85;}


.Welcome_Text_Header { display: block;  font-size: var(--FontSize_large);  margin-block-start: 0.83em;  margin-block-end: 0.83em;  margin-inline-start: 0px;  margin-inline-end: 0px;  font-weight: bold;  unicode-bidi: isolate;  margin: 0 20px 20px 20px;}

.Text_Header      { margin: 40px 0 30px 0; font-size: var(--FontSize_large); font-weight: 700;}
.Text             { width: 85%;  font-size: var(--FontSize_medium) ; line-height: 1.5em;}
.Text_Kontakt     { margin: 1.5em 0 0 5%; }
.Text_Kontakt a   { color: #26e200;}


#div_Footer                 { height: 60px; background-color: var(--blue-black);}
#div_Impressum              { padding: 1em 2em; margin-top: 50px; width: 70%; text-align: left; margin-right: auto; margin-left: auto;color: var(--white); background-color: var(--blue-black);}
#div_ImpressumLink          { cursor: pointer; float: left; margin: 0.5em 5em; color: var(--white); font-size: 1.1em;}
#div_Impressum_CloseButton  { width: 100%; text-align: right;}
.svg_Impressum_CloseButton  { width: 50px;}

#div_KontaktLink           { cursor: pointer; float: left; margin: 0.5em 5em; color: var(--white); font-size: 1.1em;}

#div_FooterTextCopyright   { float: right; margin: 0.5em 5em; color: var(--white); font-size: 1.1em;}
.svg_Impressum_CloseButton {  width: 50px;}




@media only screen and (min-device-width: 320px)  and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2)  and (orientation: portrait) 
{
   
}

@media only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape) 
{

}


@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 1) 
{

}

/* Landscape Tablets */
@media only screen and (min-device-width: 768px)and (max-device-width: 1024px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 1) 
{

}


@media (max-width: 375px) and (orientation: portrait)  
{
 
} 


@media (max-width: 560px) and (orientation: portrait)  
{
 
} 

@media (max-width: 500px) and (orientation: landscape)  
{
   

}