so wie Jens es will

src/style/global.css

@@ -0,0 +1,159 @@
+/*@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
+			xl:rounded-xl lg:shadow-box lg:ring-1 lg:ring-gray-300 
+}
+
+.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]}
+
+.nav-element:hover > .nav-element-child{ 
+    	@apply 		!bg-primary !text-white cursor-pointer
+}
+
+.nav-element:hover > .dropdown-content{ 
+	@apply 			lg:visible lg:opacity-100 lg:block
+}
+
+.nav-element:hover:first-child > .nav-element-child{
+    	@apply 		!rounded-none
+					xl:!rounded-tl-xl xl:!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*/
+
+
+