/* CSS von Kreativ Geflecht */

/* ======================================== HEADER ======================================== */ 
.site-header { 
	width: 100%; 
	background: #f3eee8; 
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.25);
} 

.header-inner { 
	width: 100%; 
	min-height: 92px; 
	display: flex; 
	align-items: center; 
	justify-content: space-between; 
	padding: 0 7%; 
	box-sizing: border-box; 
} 


/* ======================================== LOGO ======================================== */ 
.site-branding {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.site-logo-link {
    display: block;
    line-height: 0;
}

.site-branding .site-logo {
    display: block;
    width: 200px;
    height: auto;
    max-width: 200px;
}


/* ======================================== NAVIGATION ======================================== */ 
.main-navigation { margin-left: auto; } 

.main-menu { 
	display: flex; 
	align-items: center; 
	gap: 42px; 
	margin: 0; 
	padding: 0; 
	list-style: none; 
} 

.main-menu li { 
	position: relative; 
	margin: 0; 
	padding: 0; 
} 

.main-menu a { 
	position: relative; 
	display: block; 
	padding: 34px 2px 17px; 
	color: #303536; 
	font-family: Arial, Helvetica, sans-serif; 
	font-size: 14px; 
	font-weight: 600; 
	line-height: 1; 
	text-decoration: none; 
	transition: color 0.2s ease, opacity 0.2s ease; 
} 

/* Hover */ 
.main-menu a:hover { color: #c58d45; } 

/* ======================================== KONTAKT ALS AKTIVER MENÜPUNKT ======================================== */ 
.main-menu .menu-item-46 > a::after { 
	content: ""; 
	position: absolute; 
	left: 0; 
	right: 0; 
	bottom: 8px; 
	height: 2px; 
	background: #c58d45; 
} 

/* ======================================== TABLET ======================================== */ 
@media (max-width: 900px) { 
	.header-inner { 
		padding-left: 30px; 
		padding-right: 30px; 
	} 
	
	.site-branding .custom-logo { width: 190px; } 
	.main-menu { gap: 25px; } 
} 

/* ======================================== MOBILE ======================================== */ 
@media (max-width: 768px) { 
.header-inner { min-height: 75px; padding: 12px 20px; } 
.site-branding .custom-logo { width: 175px; } 
.main-navigation { display: none; } 
}


@media (max-width: 767px) {
  .wp-block-group .is-layout-grid {
    height: auto;
    min-height: 0;
    flex-direction: column;
  }

  .wp-block-group .is-vertical {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    bottom: auto;
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
  }

  img {
    max-width: 100%;
    height: auto;
  }
}

/* ======================================== MAIN ======================================== */ 
body{
    background-color: #f3eee8;
}

main{
    padding-top: 4px;
}