/* #### Generated By: http://www.cufonfonts.com #### */


    @font-face {
    font-family: 'HK Grotesk';
    font-style: normal;
    font-weight: 300;
    src: local('HK Grotesk Light'), url('fonts_custom/HKGrotesk-Light.woff') format('woff');
    }

    

    @font-face {
    font-family: 'HK Grotesk';
    font-style: italic;
    font-weight: 300;
    src: local('HK Grotesk Light Italic'), url('fonts_custom/HKGrotesk-LightItalic.woff') format('woff');
    }


    @font-face {
    font-family: 'HK Grotesk';
    font-style: normal;
    font-weight: 400;
    src: local('HK Grotesk Regular'), url('fonts_custom/HKGrotesk-Regular.woff') format('woff');
    }
    

    @font-face {
    font-family: 'HK Grotesk';
    font-style: italic;
    font-weight: 400;
    src: local('HK Grotesk Italic'), url('fonts_custom/HKGrotesk-Italic.woff') format('woff');
    }


    @font-face {
    font-family: 'HK Grotesk';
    font-style: normal;
    font-weight: 500;
    src: local('HK Grotesk Medium'), url('fonts_custom/HKGrotesk-Medium.woff') format('woff');
    }
    

    @font-face {
    font-family: 'HK Grotesk Medium';
    font-style: italic;
    font-weight: 500;
    src: local('HK Grotesk Medium Italic'), url('fonts_custom/HKGrotesk-MediumItalic.woff') format('woff');
    }

    

    @font-face {
    font-family: 'HK Grotesk';
    font-style: normal;
    font-weight: 600;
    src: local('HK Grotesk SemiBold'), url('fonts_custom/HKGrotesk-SemiBold.woff') format('woff');
    }

    

    @font-face {
    font-family: 'HK Grotesk';
    font-style: italic;
    font-weight: 600;
    src: local('HK Grotesk SemiBold Italic'), url('fonts_custom/HKGrotesk-SemiBoldItalic.woff') format('woff');
    }


    @font-face {
    font-family: 'HK Grotesk';
    font-style: normal;
    font-weight: 700;
    src: local('HK Grotesk Bold'), url('fonts_custom/HKGrotesk-Bold.woff') format('woff');
    }

    

    @font-face {
    font-family: 'HK Grotesk';
    font-style: italic;
    font-weight: 700;
    src: local('HK Grotesk Bold Italic'), url('fonts_custom/HKGrotesk-BoldItalic.woff') format('woff');
    }



:root {
    --beige-hintergrund: #FFF5F2;
    --blau-hintergrund: #0C2666;
	--dunkelblau-hintergrund: #071F58;
	--rot-hintergrund: #F23112;
	
	
	--rot-schrift: #F23112;
	--blau-schrift: #072980;
	--hellblau-schrift: #BFD5FF;
	
	--primary-color: #0076c6;
		

}




body {
  font-family: "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 16px;
  background-color: #ffffff;
  color: #46484a; 
  line-height: 1.5rem; 

  }

  
html {
    font-family: sans-serif;
    line-height: 1.15;
    -webkit-text-size-adjust: 100%;
    font-size: 18px;
} 
  
  
@media (min-width: 1200px) {
  .container {
    max-width: 1340px;
  }
}  





a {
  color: #59a0d7;
  color: var(--rot-hintergrund);
  }


h1, h2, h3, h4 {
  font-family: "HK Grotesk", Helvetica, Arial, sans-serif;
  margin-bottom: 0.75rem;
  }


h1 {
  font-size: 3rem;
  font-weight: 600;
  line-height: 3rem; 
  }

h2 {
  font-size: 1.9rem;
  font-weight: 500;
  line-height: 2.25rem; 
  }

h3 {
  font-size: 1.4;
  font-weight: 500; 
  }

h4 {
  font-size: 1rem;
  font-weight: 700;
  text-transform: uppercase;
  }

p, li {
  color: #696b6e;
  color: #1d1e20;
  font-size: .9rem; 
    hyphens: auto;
  }
  

ul {
  padding-left: 1em
  }

.divider {
  display: block;
  width: 6rem;
  height: 0.3rem;
  background-color: #dfe1e5;
  margin: 2rem auto; }

.form-control-custom {
  border: 0.1rem solid #dfe1e5;
  width: 100%;
  padding: 1rem;
  font-size: .9rem;
  color: #696b6e;
  border-radius: .3rem; 
  border-radius: 0;
	background: var(--blau-hintergrund);
	color: white !important;
  
  }

.form-control-custom:focus {
  border: 0.1rem solid #59a0d7;
  outline: none; }

.emphasis {
  font-family: Georgia, Times, 'Times New Roman';
  font-style: italic;
  color: #59a0d7; }

.constrain-width {
  max-width: 45rem;
  margin: 0 auto; }

.rounded-corners {
  border-radius: .3rem; }

.pill-btn {
  border-radius: 499rem !important; }

.justify-center {
  display: flex;
  align-items: center;
  justify-content: center; }

.alt-background {
  background: #f7f7f8; }

.bg-primary {
  background-color: #59a0d7 !important; }

.bg-secondary {
  background-color: #46484a !important; }

.social {
  margin: 0 auto;
  padding: 0; }

.social li {
  display: inline-block; }

.social li a {
  display: block;
  width: 2.2rem;
  height: 2.2rem;
  margin: .4rem .1rem;
  text-align: center;
  text-decoration: none;
  background: #fff;
  color: #696b6e;
  border: 0.1rem solid #dfe1e5;
  border-radius: 499rem;
  line-height: 1.5;
  font-size: 1.4rem; }

.social li a:hover {
  color: #59a0d7;
  border-color: #59a0d7; }

.btn-primary, .btn-outline-primary, .btn-secondary, .btn-outline-secondary, .btn-white, .btn-outline-white, .btn-success, .btn-outline-success, .btn-info, .btn-outline-info, .btn-warning, .btn-outline-warning, .btn-danger, .btn-outline-danger {
  font-size: .75rem;
  text-transform: uppercase;
  font-weight: 700;
  border-radius: 0; }

.btn-outline-primary, .btn-outline-secondary, .btn-outline-white, .btn-outline-success, .btn-outline-info, .btn-outline-warning, .btn-outline-danger {
  border-width: 0.15rem; }

.btn-lg {
  padding: 1.1rem 2.5rem;
  font-size: .9rem; }

.btn-primary, .btn-primary:hover, .btn-primary:focus, .btn-primary:active {
  border: none; 
  background-color: var(--rot-hintergrund);
  }

.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
  background-color: #4089c1;
  border-color: #4089c1; }

.btn-outline-primary, .btn-outline-primary:visited {
  color: #59a0d7;
  border-color: #59a0d7;
  background: none; }

.btn-outline-primary:hover, .btn-outline-primary:focus, .btn-outline-primary:active {
  background-color: #59a0d7;
  border-color: #59a0d7;
  color: #fff; }

.btn-secondary {
  border-color: #696b6e;
  background-color: #696b6e;
  color: #fff; }

.btn-secondary:hover, .btn-secondary:focus, .btn-secondary:active {
  border-color: #46484a;
  background-color: #46484a;
  color: #fff; }

.btn-outline-secondary, .btn-outline-secondary:visited {
  color: #696b6e;
  border-color: #696b6e;
  background: none; }

.btn-outline-secondary:hover, .btn-outline-secondary:focus, .btn-outline-secondary:active {
  border-color: #696b6e;
  background: #696b6e;
  color: #fff; }

.btn-white {
  border-color: #fff;
  background-color: #fff;
  color: #46484a; }

.btn-white:hover, .btn-white:focus, .btn-white:active {
  border-color: #dfe1e5;
  background-color: #dfe1e5;
  color: #46484a; }

.btn-outline-white, .btn-outline-white:visited {
  background: none;
  color: #fff;
  border-color: #fff; }

.btn-outline-white:hover, .btn-outline-white:focus, .btn-outline-white:active {
  color: #46484a;
  background: #fff; }

.link-white, link-white:visited {
  font-size: .75rem;
  text-transform: uppercase;
  font-weight: 700;
  border-radius: .3rem;
  border: 0;
  color: #fff; }

.link-white:hover, .link-white:focus, .link-white:active {
  color: #dfe1e5 !important; }

.navbar-custom {
  background: white;
  padding: 2rem 0; }

a.navbar-brand, a.logo {
  font-family: "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;
  width: 385px; 
  font-size: 2rem;
  font-weight: bold;
  margin-top: 0; }
  
.navbar-logo img, 
.navbar-brand img {
  width: 100% }  
  
  
a.navbar-brand, a.logo {
  font-family: "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: #fff !important;
  font-size: 2rem;
  font-weight: bold;
  margin-top: 0; }

  

a.logo:hover, a.logo:active, a.logo:focus {
  text-decoration: none; }

li.nav-item .btn {
  margin-top: .2rem;
  margin-left: .4rem; }
li.nav-item .btn-white {
  color: #46484a; }

.nav-link {
    display: block;
    padding: 0.5rem 0 0.5rem 1.5rem;
    margin-left: 1.5rem;
    color: var(--rot-hintergrund);
}

.navbar-toggler {
    padding: 0.25rem 0.75rem;
    font-size: 1.25rem;
    background-color: var(--rot-hintergrund);
    border: none;
    border-radius: 0;
	width: 60px;
}

.navbar-toggler img {
    width: 100%;
	height:auto;
}

.navbar-toggler-icon {
    width: 100%%;
    height: 1.5em;
	  background-image: url("../icons_custom/nav-icon.png");
  background-size: contain;
  background-repeat: no-repeat;
}



@media screen and (max-width: 600px) {
.navbar-expand-lg > .container, .navbar-expand-lg > .container-fluid {
  padding-right: 15px;
  padding-left: 15px;
}

a.navbar-brand, a.logo {
  width: 280px;
}


}


/*  Helferklassen  */

.pr-5, .px-5 {
    padding-right: 4.5rem !important;
}

/*  Abstaende horizontal  */

/* 2 Zeilenhoehen */
.pr-2z {
    padding-right: 3rem !important;
}
/* 3 Zeilenhoehen */
.pr-3z {
    padding-right: 4.5rem !important;
}

/*  Abstaende vertikal  */
.m-bottom-1z {
    margin-bottom: 1.5rem !important;
}

.m-bottom-1_5z {
    margin-bottom: 2.25rem !important;
}

.m-bottom-2z {
    margin-bottom: 3rem !important;
}


/* vertikal zentrieren */
.vert-center {
    display: flex;
    align-items: center;
}



/*  Startseite Elemente in Sections  */

.section-teaser-rot {
    background: var(--rot-hintergrund);
    display: table;
    color: white;
    padding: 0.4rem 1rem;
    font-size: 1.3rem !important;
    font-family: "Hk Grotesk";
}

.section-teaser-weiss {
    color: white;
    padding: 0;
    font-size: 1.3rem;
    font-family: "Hk Grotesk";
	line-height: 2.25rem;
}


.dekoelement-rechteck-vertikal {
    text-align: center;
	width: 0.75rem;
    height: 3rem;
    background-color: var(--rot-hintergrund);
	margin: 0 auto 1.5rem auto;
	margin: 2.25rem auto 3rem auto;
}





.content-1, .content-2, .content-4 {
  background: #fff;
  padding-bottom: 0.1rem; }
  
  .content-1 .container, .content-2 .container, .content-4 .container, .ueber-uns .container, .ueber-uns .container, .introblock-1 .container 
  .ueber-uns .container {
    margin: 5rem auto; }
  .content-1 .full-width, .content-2 .full-width, .content-4 .full-width {
    width: 100%; }



/*  Block hohes Bild links - Content zweisprachig rechts  */

.content-4 {
	padding: 3rem 0 3rem 0;
	background-color: var(--beige-hintergrund);
	}
.content-4 h2 {
    color: var(--blau-schrift);
}


/*  einfaches Textelement auf hellem Hintergrund  */

.einfacher-text {
	padding: 1.5rem 0 6rem 0;
	background-color: var(--beige-hintergrund);
	}
.einfacher-text h2 {
    color: var(--blau-schrift);
}


/*  Block website-pakete  */

.website-pakete {
	padding: 3rem 0 3rem 0;
	background-color: var(--beige-hintergrund);
	}

.website-pakete {
    color: var(--blau-schrift);
}

.website-pakete .lead {
    font-size: 19px;
	font-weight: 400;
}

.website-pakete ul li {
list-style: outside url('List-dot_rot_schmal.svg');
}

.website-pakete ul li {
    margin-bottom: 0.75rem;
}


/*  Startseite Header mit Bild  */

.cover-2, .bildheader_start {
	background-color: var(--blau-hintergrund);
	background-size: cover;
	min-height: 50rem;
	height: auto;
	border-radius: 0;
	width: 100%;
	color: #fff;
	/* padding-top: 1rem;*/ 
  }
  
  
 
  
  
.bildheader_start p.teaser {
	font-size: 19px;
    margin: 1.5rem auto;
    color: rgba(255, 255, 255, 0.85); 
	}
	
.bildheader_start_inner {
    background: url("../arch_images/Virtual-Tour_Headerbild_Wohnung_1.jpg") no-repeat center center;
    background-size: cover;
	  
    display: table;
    height: 100%;
    min-height: 44rem;
    margin: 0 auto; 
	transform: translate(0, 4rem);
	}
	

.bildheader_start_dekoelement {
	width: 0.5rem;
	height: 3rem;
	background-color:  var(--rot-hintergrund);
	}
	
	
/*	.bildheader_start_dekoelement {
    width: 0.5rem;
    height: 3rem;
    background-color: var(--rot-hintergrund);
    position: absolute;
    top: -1.5rem;
} */

.bildheader_start_dekoelement {
    width: 0.75rem;
    height: 3rem;
    background-color: var(--rot-hintergrund);
    transform: translatey(-3rem);
	margin-bottom: -1.5rem;
}


.textblock-overlay a {
    color: white;
	font-size: 19px;
}
	
.textblock-overlay {
    background-color: hsla(225, 28%, 30%, 0.7);
    color: cover;
    display: table;
    padding: 1.5rem 3rem 1.5rem 2.25rem;
	margin-left: 2.25rem;
	}
	
.textblock-overlay h1 {
    font-size: 32px;
    font-weight: 500;
    line-height: 2.25rem;
	}


@media screen and (max-width: 600px) {

.textblock-overlay {
  margin-left: 0;
}

.pr-3z {
  padding-right: 1.5rem !important;
}

}




/*  Startseite Einleitung  */


.introblock-1 {
    background-color: var(--beige-hintergrund);
	padding-top: 12rem;
	padding-bottom: 6rem;
}

 
.introblock-1 h2 {
    margin-top: 1.5rem;
    color: var(--blau-schrift);
}


.bild-mit-overlay {
    position: relative;
	font-size: 26px;
	color: white;
}



.bild-mit-overlay p {
    font-size: 20px;
    color: white;
    line-height: 2.25rem;
}

.bild-mit-overlay img {
    width: 100%;
    height: auto;
}

.bild-overlay {
    position: absolute;
    bottom: -24px;
    left: -33px;
    width: 179px;
    height: 180px;
    padding: 31px 10px;
    background-color: var(--rot-hintergrund);
    text-align: center;
}

.bild-overlay::before {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 0 31px 34px;
    border-color: transparent transparent var(--rot-hintergrund) transparent;
    position: absolute;
    top: -29px;
    content: "";
    right: 0;
}

	.features-technik {
  background-color: var(--beige-hintergrund);
  padding: 5rem 0; 
  padding: 6rem 0 0 0;}
   
   .features-technik h4 {
    margin-top: 2rem;
    color: #fff; 
	color: var(--blau-hintergrund);
	line-height: 1.5rem;}  
  

	
.features-technik h2 {
    margin-top: 1.5rem;
    color: var(--blau-schrift);
	}
	
.features-technik p.lead {
    color: #a0a0a0; }
	
.features-technik .col-feature {
    padding-top: 2rem;
    padding-bottom: 2rem; }

.features-technik .col-feature p {
      color: #333333; }
	  
	
.feature-1-number {
    background-color: red;
	background-color: var(--rot-hintergrund);
    display: table;
    font-size: 40px;
    padding: 0.4rem 2rem 0.0rem 3rem;
	padding: 0.4rem 0 0 0;
    height: auto;
    margin-bottom: 2rem;
}	

.feature-1-number img{
    width: 4rem;
	height: auto;
}	


/*  Startseite Live-Demos  */

.demo-tours {
	padding: 6rem 0 7.5rem 0;
	background-color: var(--blau-hintergrund);
	color: white;
}

.demo-tours .lead {
    color: white;
}

.row-demo-tours {
    padding: 0 3rem;
}

.col-demo-tours {
    position: relative;
	overflow: hidden;
	margin-bottom: 1.5rem;
}

.demo-tour-hover-overlay {
    width: calc(100% - 30px);
    height: 100%;
    background: black;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0.2;
    z-index: 100;
    margin: 0 15px;
	display: none;
}

.demo-tour-hover-overlay:hover {
    opacity: 0.0;
}


.demo-tours a {
	transition: all 2.3s ease-in-out 0s;
}



.demo-tour-link:hover img {
transform: scale(1.2);
transition: all 0.9s ease-in-out 0s;
}


.demo-tour-titel {
    background-color: var(--rot-hintergrund);
    color: white;
    padding: 1rem 1rem;
    width: 70%;
    position: absolute;
    bottom: 5%;
    left: 15%;
	z-index: 200;
}

.demo-tour-titel p {
    color: white;
	margin-bottom: 0.25rem;
}

.demo-tour-ansicht {
    width: 100%;
}

@media screen and (max-width: 1400px) {
.demo-tour-titel p {
    display: none;
}

.demo-tour-titel h4 {
    margin-bottom: 0.25rem;
}

}




/*  Startseite Ueber uns  */

.ueber-uns {
    background-color: var(--blau-hintergrund);
	color: white;
	padding: 2.25rem 0 3rem 0;
}

.ueber-uns p {
	color: white;
}


.ueber-uns-trenner {
  margin-top: 6rem;
margin-bottom: 0;
border: 0;
  border-top-color: currentcolor;
  border-top-style: none;
  border-top-width: 0px;
border-top: 4px dotted hsla(220,20%,90%,0.5);
}


.ueber-uns .container {
  margin-bottom: 0;
}


.introblock-text {
    background-color: var(--blau-hintergrund);
	padding-top: 9rem;
	padding-bottom: 9rem;
	color: white;
}

 
.introblock-text h2 {
    margin-bottom: 1.5rem;
    color: white;
}

.introblock-text h4 {
    margin-bottom: 1.5rem;
    color: var(--hellblau-schrift);
	text-transform:none;
	font-size: 1.42rem;
}


.introblock-text ul {
    list-style: outside url('List-dot_rot.svg');
}

.introblock-text li {
    margin-bottom: 1.5rem;
    color: white;
}

.introblock-text p {
	color: white;
	font-size: 1.12rem;
}



.legal-text {
    background-color: var(--dunkelblau-hintergrund);
	padding-top: 6rem;
	padding-bottom: 6rem;
	color: white;
}


.legal-text h3 {
	padding-top: 2.25rem;
	font-size: 1.58rem;
}


.legal-text p, .legal-text li {
	color: white;
}

 /*  Call to action Formate  */


.cta-2 {
  color: #46484a;
  padding: 5rem 0; }
  .cta-2 p {
    color: #696b6e; }
  .cta-2 form.subscribe {
    max-width: 40rem;
    margin: 0 auto; }
  .cta-2 .btn {
    width: 100%; }

.cta-4 {
  background: #2b2d34 url(../images/cover-bg-3.jpg) center;
  background: #2b2d34;
  background-size: cover;
  color: #fff;
  padding: 5rem 0;
  min-height: 50rem; }
  .cta-4 p {
    color: rgba(255, 255, 255, 0.75); }
  .cta-4 .form-control-custom {
    border: none;
    background: rgba(255, 255, 255, 0.2);
    color: #fff; }
  .cta-4 .form-control-custom:focus {
    border: none;
    background: rgba(255, 255, 255, 0.3);
    color: #fff; }


/*  Kontakt Formate  */

.contact-1 {
  padding: 0 0 5rem 0;
  padding: 6rem 0 3rem 0;
  background-color: var(--beige-hintergrund);
  }
  
  
  .contact-2 {
  padding: 0 0 5rem 0;
  padding: 6rem 0 3rem 0;
  background-color: var(--blau-hintergrund);
  }
  .contact-1 .contact-details, .contact-2 .contact-details {
    padding-bottom: 1.5rem; 
	}
	
  .contact-1 h3, .contact-2 h3 {
    margin-bottom: 0; 
	}
	
	

 /*  Google Map Formate  */	

#map {
  height: 800px;
  width: 100%; 
  overflow: hidden;}
  
  
  
  
/*  Folgeseiten   */ 
  
.bilderblock-beige {
  background-color: var(--beige-hintergrund);
  padding-top: 2rem;
  padding-bottom: 9rem;
}  
  
.bilderblock-beige img {
  width: 100%;
  height: auto;
}  

.screenshot-bu {
  margin-bottom: 2rem;
}
  
  
/*  Footer Formate  */	 
  
.nav-footer {
  list-style: none;
  float: right; }
  .nav-footer li {
    float: left;
    margin-top: .5rem; }  


.footer-brand {
  font-family: "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: #fff !important;
  font-size: 2rem;
  font-weight: bold;
  margin-top: 0;
}


.footer-4 {
  background-color: var(--blau-hintergrund);
  width: 100%;
  color: #fff;
  padding-top: 4rem;
  padding-bottom: .5rem; }
  
  .footer-4 .container-fluid {
    padding: 0; }
	
  .footer-4 .divider {
    background: #46484a;
    width: 100%;
    height: .1rem;
    margin: 2rem 0 1.5rem 0; }
	
  .footer-4 ul.nav-footer {
    float: left !important;
    padding: 0;
    width: 100%; }
	
    .footer-4 ul.nav-footer li {
      display: block;
      float: left;
      margin-top: .5rem;
      width: 100%; }
	  
    .footer-4 ul.nav-footer .nav-link {
      color: #a0a0a0;
	  color: var(--hellblau-schrift);
      padding: 0; }
	  
    .footer-4 ul.nav-footer .nav-link:hover {
      color: #59a0d7; }
	  
  .footer-4 .copyright {
    color: #a0a0a0; }
	
	.footer-4 .nav-link {
    padding-left: 0;
    margin-left: 0 !important;
}



@media screen and (max-width: 768px) {
.col-ueber-uns {
    margin-bottom: 3rem;
}
}


@media screen and (max-width: 768px) {
    .footer-4 .nav-footer {
    width: auto;
    display: inline; } 
	  
	.bild-overlay {
    position: absolute;
    bottom: -3rem;
    left: 1.5rem;
    width: 179px;
    height: 180px;
    padding: 31px 10px;
    background-color: var(--rot-hintergrund);
    text-align: center;
}
	  
	  
}



@media screen and (max-width: 768px) {
  .nav-footer {
    width: 100%;
    padding: 0;
    display: flex;
    justify-content: center; } 
}


.btn.vb-custom-btn1 {
  background-color: var(--rot-hintergrund);
  color: white;
  background-image: url("../icons_custom/link_extern_1.png");
  background-size: 70px auto;
  background-position: 1rem 1rem;
  background-repeat: no-repeat;
  padding: 1rem 1rem 1rem 6rem;
  border-radius: 0;
  white-space: normal;
  text-align: left;
  max-width: 320px;
  
}