@charset "UTF-8";

html {
	scroll-behavior: smooth;
	scroll-padding-top: 135px; /* Desktop */
	}

@media (max-width: 1024px) {
	html {scroll-padding-top: 80px; /* Tablet */ }
	}

@media (max-width: 300px) {
	html { scroll-padding-top: 62px; /* Small phones */}
	}


/*********************************/
/* Breadcrumb */
/*********************************/

.breadcrumb {
	  position: fixed;
	  top: 135px;
      width: 100%;      
      padding: 5px 18px;
  	  font-size: 13px;
	  background: #fff; 
	  z-index: 2;
    }

    .breadcrumb a {
      text-decoration: none;
  	  color: #717376; 
	  font-weight: 400;
    }

    .breadcrumb a:hover {
		color: #000; 
        text-decoration: underline;
		text-underline-offset: 0.2em; 
		text-decoration-thickness: 1px;
    } 
	.breadcrumb .active {
  	  color: #717376; 
	  margin: 0;
    } 
    .breadcrumb .icon1 {
      font-size: 12px;
	  vertical-align: 6%;
      }  
 	.breadcrumb .icon2 {
      font-size: 10px;
      }  
    .breadcrumb span {
      color: #737373; 
		margin: 0 -4px;
      }

@media screen and (max-width: 1024px) { /* Hamburger */
	.breadcrumb { top: 80px; }
	}
@media screen and (max-width: 300px) { /* Hamburger */
	.breadcrumb { top: 62px; }
	}


/*********************************/
/* SECTIONS*/
/*********************************/
section {								
      height: auto; 
	  width: 100%;
	  padding: 30px 0 0 0;
    }
    #branding {  }
    #order { }
    #coupon {  }
    #sew {  }


/*********************************/
/* CONTAINER */
/*********************************/

.top-container { 
	display: flex;
	width: 100%; max-width: 1440px;
	margin: 20px auto;
	padding: 0 18px;
	justify-content: center;
	flex-wrap: wrap;
}	
	.top-container > div { 
		width: auto;
		margin: 0 5%;
		padding: 10px 0;
		text-align: center;
	}

@media screen and (max-width: 1024px) {	/* linksbuendig */
.top-container { 
	margin: 0 auto;
	padding: 0 18px;
	}	
}

@media screen and (max-width: 450px) {	/* linksbuendig */
	.top-container > div { 
		text-align: left; margin: 0;
		}
	}


/*********************************/
/*** Bereiche ***/
/*********************************/
.brand-wrapper { 
	display: flex;
	margin: 0 auto;
}

.brandbox {
	display: flex;
	flex-wrap: nowrap;
	width: 100%; 
	max-width: 1440px; 
	margin: 0 auto;
	align-content: stretch;	
	align-items: center;
	padding: 0 18px; 
	}

.abb1, .abb2  {
	width: 50%;
	height: auto;
	margin: 0;
	padding: 0;
	}
	.servpic1 {
		background-image:url('images/beflockung_1.jpg');
		background-repeat: no-repeat; 
		background-size: cover; 
		background-position: top;
		height: 700px;
		}

	.servpic2 {
		background-image:url('images/bestellservice.jpg');
		background-repeat: no-repeat; 
		background-size: cover; 
		background-position: bottom;
		height: 800px;
		}

	.servpic3 {
		background-image:url('images/gutschein.jpg');
		background-repeat: no-repeat; 
		background-size: cover; 
		background-position: bottom;
		height: 700px;
		}

	.servpic4 {
		background-image:url('images/naeharbeiten.jpg');
		background-repeat: no-repeat; 
		background-size: cover; 
		background-position: bottom;
		height: 800px;
		}

.wortlaut1, .wortlaut2  {  
	width: 50%; height: auto;
	padding: 0 30px;
	color: #1D255B;
	}

@media screen and (max-width: 1440px) { /* maxwidth */
	.brandbox {
	padding: 0; 
	}
	.brandbox {
	align-content: flex-start;	
	align-items: center;
	}
	.servpic1 {		
		background-image:url('images/beflockung_1.jpg');
		background-position: center;
		height: 800px;
		}
	.servpic4 {
		height: 950px;
		}
	
	.servpic2,
	.servpic3{
		height: 700px;
		}

}

@media screen and (max-width: 1024px) { /* Hamburger */
	.brandbox {
		align-content: stretch;	
		align-items: flex-start; 
	}
	.servpic1 {
		background-image:url('images/beflockung_2.jpg');
		background-position: center;
		height: 950px;
		}
	.servpic2 {
		height: 730px;
		}	
	.servpic3 {
		height: 580px;
		}
	.servpic4 {
		height: 730px;
		}
	.wortlaut1, .wortlaut2  {  
	padding: 20px 30px 30px 30px;
	}
}

@media only screen and (max-width: 768px) {
	.brandbox {
		flex-wrap: wrap;
		width: 100%; 
		margin: 30px auto;
	}
	.brandbox:first-of-type { 
		margin: 0 auto 20px auto;
	}
	.servpic1 {
		background-image:url('images/beflockung_4.jpg');
		background-position: bottom;
		height: 600px;
		}

	.servpic2,
	.servpic3,
	.servpic4 {
		background-position: top;
		height: 600px;
		}

	.abb1, .wortlaut1 {
		width: 100%; margin-bottom: 5px;
	}
	.abb2 {
		order: 1;
	    width: 100%; margin-bottom: 5px;
  	}
	.wortlaut2 {
		order: 2;
    	width: 100%; margin-bottom: 5px;
  		}
	
	.wortlaut1, .wortlaut2  {  
		padding: 0 18px;
		}
	}

@media screen and (max-width: 450px) { /* linksbuendig */
	.servpic1,
	.servpic2,
	.servpic3,
	.servpic4 {
		height: 400px;
		}
}

@media screen and (max-width: 300px) { /* linksbuendig */
	.servpic1,
	.servpic2,
	.servpic3,
	.servpic4 {
		max-height: 300px;
		height: 75vh;
		}
}



/*********************************/
/* GALERIE */
/*********************************/

.flexbox_gal { /* container */
	width: 100%;
	max-width: 1440px;
	margin: 0 auto;
	flex-wrap: wrap; /* Umbruch */
	gap: 2.5%;
	justify-content: space-between;
	padding: 20px 18px;
	
	flex-direction: row;
	display: flex;
	}

	.flex-item-gallery { /* 3 Spalten Leistung */
	  width: 31.65%;
	  margin: 1.1% 0;
	}

@media screen and ( max-width: 1440px) {	
	.flexbox_gal { /* container */
		gap: 1%;
		padding: 20px 0;

		flex-direction: row;
		display: flex;
		}

		.flex-item-gallery { /* 3 Spalten Leistung */
		  width: 32%;
		  margin: 2% 0 auto 0;
		}
	}
@media screen and ( max-width: 768px) {	
	.flex-item-gallery {
	  width: 100%; 
	  margin:10px auto; 
	flex-direction: column;
	}	
	.flex-item-gallery {
	  width: 100%;
	  margin: 0.8% 18px; 
	}
}