/*@import url('https://fonts.googleapis.com/css2?family=Abel:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;1,400&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;1,400&display=swap');*/

@font-face {
	font-family: 'Heron';
	font-weight: 400;
	font-style: normal;
	font-display:swap;
	src: url("/fonts/HeronSans-Light.woff2") format('woff2');
  }

@font-face {
	font-family: 'Heron';
	font-weight: 700;
	font-style: normal;
	font-display:swap;
	src: url("/fonts/HeronSans-Regular.woff2") format('woff2');
  }

  @font-face {
	font-family: 'Antique Olive Compact bold';
	font-weight: 700;
	font-style: normal;
	font-display:swap;
	src: url("/fonts/Antique Olive Std Compact.woff2") format('woff2');
  }

* {
	font-weight: 400;
	box-sizing: border-box;
	font-family: "Heron";
}


.promo1{
	font-weight: 700;
	box-sizing: border-box;
	font-family: "Antique Olive Compact bold";
	text-shadow: 2px 2px 8px #222;

}

	.promo{
		font-weight: 700;
		box-sizing: border-box;
		font-family: "Antique Olive Compact bold";
	}


body{
	@apply bg-[url('/images/pattern.png')] bg-repeat bg-fixed  max-w-[1920px] mx-auto border-gray-200 border-[1px] min-w-[320px]
}


/*ARTICLE*/

article {
	@apply px-6 py-6 w-full relative bg-white min-h-screen;

	hr {@apply mb-4 mt-4;}

	h1 {@apply text-4xl font-normal mb-2;}
	h2 {@apply text-2xl font-normal mb-2;}
	h3 {@apply text-xl font-normal mb-2;}
	
	a {@apply text-blue-700 font-medium text-lg;}
	
}

/*SIDEBARS*/

/*BOXES*/
.box{
	@apply 	rounded-none
			lg:rounded-lg lg:shadow-box lg:ring-1 lg:ring-gray-300
			xl:rounded-xl 
			 
}

.card{
	h2		{@apply text-lg font-bold text-box-heading leading-6}
	hr		{@apply my-2}
	p		{@apply text-lg}
	a		{@apply text-lg}

}

/*SIDEBAR-LEFT*/

/*NAVIGATION*/

.nav-element{@apply relative block cursor-pointer}

.nav-element:not(:first-child){@apply border-gray-200 border-t-[1px]}

.no-dropdown, .no-dropdown:hover{@apply text-black no-underline}

.nav-element:hover > .nav-element-child{ 
    	@apply 		!bg-primary !text-white cursor-pointer
}

.nav-element:hover > .nav-element-child .no-dropdown{ 
	@apply 		!bg-primary !text-white cursor-pointer 
}

.nav-element:hover > .dropdown-content{ 
	@apply 			lg:visible lg:opacity-100 lg:block lg:ml-[2px]
}

.nav-element:hover:first-child > .nav-element-child{
    	@apply 		!rounded-none
					lg:!rounded-tl-xl lg:!rounded-tr-none
}

.nav-element:hover:last-child > .nav-element-child{
    	@apply 		!rounded-none
					xl:!rounded-b-xl
}

.nav-element-child{
		@apply  	px-6 py-3 w-full justify-start text-sm  bg-white flex !no-underline text-black
					xl:text-lg
}

.dropdown-content{
		@apply		!relative z-[1] !p-0 !scale-100 hidden
					lg:!absolute lg:min-w-max lg:p-2 lg:shadow-lg lg:!top-0 lg:ring-gray-300 lg:ring-1;
	
li 		{@apply 	text-sm  bg-white flex
					xl:text-lg}

li a	{@apply 	w-full text-sm px-6 py-3 rounded-none no-underline text-white hover:text-white bg-secondary
					lg:px-4 lg:bg-[#efefef] lg:text-black lg:hover:bg-secondary		
	   				xl:text-lg}

li:not(:first-child)	{@apply		!border-gray-200 !border-t-[1px]}
}

.verbrauchsausweis li:nth-child(5), .bedarfsausweis li:nth-child(5){
		@apply 		!border-primary !border-t-[1px]
}

#hamburger{
	@apply my-1;
	span 				{@apply  block h-[3px] w-6 bg-white !transition-all}
	span:nth-child(2)	{@apply my-1}
}

.hamburger-swing-0{@apply origin-left rotate-45 -translate-y-[1.5px]  !transition-all duration-500}
.hamburger-swing-1{@apply origin-center opacity-0 !transition-all}
.hamburger-swing-2{@apply origin-left -rotate-45 translate-y-[1.5px] !transition-all duration-500}

.show-dropdown-content{@apply block !visible !opacity-100 lg:!invisible}
.dd-symbol{ @apply absolute right-[20px] rotate-0 transition-all duration-300 origin-center md:transition-none}
.dd-symbol-clone{ @apply absolute right-[20px] lg:text-primary}
.rotate-symbol{@apply rotate-[90deg] transition-all duration-300 origin-center lg:rotate-0 md:transition-none}



/*NAVIGATION-ANIMATION*/

/*SIDEBAR-RIGHT*/

/*FOOTER*/