/* Header-Hintergrund Astra */
/* URL muss mit background-image in functions-header.php ks_preload_lcp_header_image übereinstimmen */
.site-header{
   background-image:url("https://kleine-stiche.de/wp-content/uploads/2026/05/kleine-stiche-header-textilkunst-scaled.webp");
   background-size: cover;
   background-position: right bottom;
   background-repeat: no-repeat;
   height: 280px ;
}
/*Header hintergrund niedriger bei mobile und tablet*/
@media (max-width: 921px) {
	.site-header{ 
		height:240px;
	}
}

/**
* Menü anpassen was über die oberfläche nicht geht
*/

/*Auf Hover eine kleine linie unter die hauptmenü punkte*/
/*.ast-mobile-header-wrap  li:hover, durch neues aufwändiges css ersetzt*/
.ast-builder-menu-1 .main-header-menu > li:hover,
.ast-builder-menu-1 .sub-menu > li:hover {
	border-bottom:1px solid #95A09E73;
}
.ast-mobile-header-wrap li{
	border-bottom:1px solid rgba(245, 247, 246, 0.51);
}
.ast-builder-menu-1 .main-header-menu > li,
.ast-builder-menu-1 .sub-menu > li {
	border-bottom:1px solid transparent;
}


@media (max-width: 921px) {
	/*funktioniert für alle anderen normalen li ohne submenü im Mobilmenü */
	.ast-mobile-header-wrap .menu-link{
		position: relative;
	}
	.ast-mobile-header-wrap .menu-link::after {
		content: "";
		position: absolute;
		left: 0;
		bottom: -1px;
		width: 0;
		height: 1px;
		background: rgba(120,150,145,0.7);
		transition: width 0.25s ease;
	}

	.ast-mobile-header-wrap .menu-link:hover::after {
		width: 100%;
	}


	/*Zusammgeklapptes Submenü im Mobilmenü*/
	.ast-mobile-header-wrap .menu-item-has-children:not(.ast-submenu-expanded){
		position: relative;
	}

	.ast-mobile-header-wrap .menu-item-has-children:not(.ast-submenu-expanded)::after {
		content: "";
		position: absolute;
		left: 0;
		bottom: 0px;
		width: 0;
		height: 1px;
		background: rgba(120,150,145,0.7);
		transition: width 0.25s ease;
	}

	.ast-mobile-header-wrap .menu-item-has-children:not(.ast-submenu-expanded):hover::after {
		width: 100%;
	}
	/*Aufgeklapptes Submenü im mobilmenü*/
	.ast-mobile-header-wrap .menu-item-has-children.ast-submenu-expanded {
		position: relative;
	}

	.ast-mobile-header-wrap .menu-item-has-children.ast-submenu-expanded::after {
		content: "";
		position: absolute;
		left: 0;
		top: 48px; /* ggf. anpassen */
		width: 0;
		height: 1px;
		background: rgba(120,150,145,0.7);
		transition: width 0.25s ease;
	}

	.ast-mobile-header-wrap .menu-item-has-children.ast-submenu-expanded:hover::after {
		width: 100%;
	}
}



/* kein Rahmen um den Menupunkt nach klick*/
.main-header-menu .menu-link:focus,
.main-header-menu .menu-link:active {
    outline: none !important;
    box-shadow: none !important;
}


/*Untermenü stylen
/*Farbe gleicher wert wie im canvasmenü*/
.sub-menu{
	background: rgba(245, 247, 246, 0.51) !important; 
	backdrop-filter: blur(8px);
	border-radius:5px;
}

/*Hintergrund image im mobile sub menü entfernen*/
.ast-mobile-header-content {
    background: transparent !important;
	backdrop-filter:blur(8px);
	border-width:0px;
}
/*doppelt blur und farbe durch normales submenü verhindern!*/
.ast-mobile-header-wrap .sub-menu {
	backdrop-filter: none !important;
	background: transparent !important;
}



/*arrow im mobil submenü weg und etwas mehr eirücken.*/
.ast-header-break-point .main-navigation .sub-menu .menu-item .menu-link{
	padding-left:50px;
} 
.ast-mobile-header-wrap .sub-menu  span.ast-icon.icon-arrow{ 
	display:none !important;
}


/**
 * Logo in die mitte der unteren schrift.
 */
.site-logo-img {
	display: flex;
    flex-direction: column;
    align-items: center;
}



/* Breadcrumb style war mal im header ist jetz immer überhalb des Titels  */
.ast-breadcrumbs li span{
    font-size: 13px !important;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.ast-breadcrumbs .trail-items li::after {
    content: "•";
    margin: 0 5px;
    font-size: 15px;
}
.ast-breadcrumbs-wrapper{
	padding-bottom:10px;
}