:root {
	/*FONTS*/
	--font-family-heading: var(--ff-heading, 'Sofia Sans Condensed');
	--font-family-text: var(--ff-text, 'Sofia Sans');
	--font-weight-text: var(--fw-text, 400);
	--font-weight-heading: var(--fw-heading, 900);

    --body-text-size: 1rem; 

	--headline-xs:  clamp(calc(var(--body-text-size) * 1.1),  2.5vw, calc(var(--body-text-size) * 1.9));
	--headline-s:   clamp(calc(var(--body-text-size) * 1.3),  3vw,   calc(var(--body-text-size) * 2.3));
	--headline-m:   clamp(calc(var(--body-text-size) * 1.55), 3.8vw, calc(var(--body-text-size) * 2.8));
	--headline-l:   clamp(calc(var(--body-text-size) * 1.8),  4.8vw, calc(var(--body-text-size) * 3.3));
	--headline-xl:  clamp(calc(var(--body-text-size) * 2.2),  6vw,   calc(var(--body-text-size) * 4));
	--headline-xxl: clamp(calc(var(--body-text-size) * 2.7),  8vw,   calc(var(--body-text-size) * 4.6));


	transition-behavior: allow-discrete;
	interpolate-size: allow-keywords;

    --accent: var(--theme-accent, hsla(204, 100%, 50%, 1));
    --on-accent: var(--theme-on-accent, hsla(0,0%,100%,1));

    --color-link: var(--foreground-100);

	--inner-max-width: var(--max-width, 1200px);

}



/* ---------------------------------------------
   Spacing Utilities
   ---------------------------------------------
   mb-* : margin-bottom
   mt-* : margin-top
   ml-* : margin-left
   mr-* : margin-right
   m-*  : margin (all sides)
   p-*  : padding (all sides)
--------------------------------------------- */

/* Basiswert für spacing (1 Einheit = 0.5rem) */
:root {
    --spacing-unit: 1rem;
}

/* Margin Bottom */
.mb-1 { margin-bottom: calc(var(--spacing-unit) * 1); }
.mb-2 { margin-bottom: calc(var(--spacing-unit) * 2); }
.mb-3 { margin-bottom: calc(var(--spacing-unit) * 3); }
.mb-4 { margin-bottom: calc(var(--spacing-unit) * 4); }
.mb-5 { margin-bottom: calc(var(--spacing-unit) * 5); }
.mb-6 { margin-bottom: calc(var(--spacing-unit) * 6); }
.mb-7 { margin-bottom: calc(var(--spacing-unit) * 7); }
.mb-8 { margin-bottom: calc(var(--spacing-unit) * 8); }


/* Margin Top */
.mt-1 { margin-top: calc(var(--spacing-unit) * 1); }
.mt-2 { margin-top: calc(var(--spacing-unit) * 2); }
.mt-3 { margin-top: calc(var(--spacing-unit) * 3); }
.mt-4 { margin-top: calc(var(--spacing-unit) * 4); }
.mt-5 { margin-top: calc(var(--spacing-unit) * 5); }
.mt-6 { margin-top: calc(var(--spacing-unit) * 6); }
.mt-7 { margin-top: calc(var(--spacing-unit) * 7); }
.mt-8 { margin-top: calc(var(--spacing-unit) * 8); }


/* Margin Left */
.ml-1 { margin-left: calc(var(--spacing-unit) * 1); }
.ml-2 { margin-left: calc(var(--spacing-unit) * 2); }
.ml-3 { margin-left: calc(var(--spacing-unit) * 3); }
.ml-4 { margin-left: calc(var(--spacing-unit) * 4); }
.ml-5 { margin-left: calc(var(--spacing-unit) * 5); }
.ml-6 { margin-left: calc(var(--spacing-unit) * 6); }
.ml-7 { margin-left: calc(var(--spacing-unit) * 7); }
.ml-8 { margin-left: calc(var(--spacing-unit) * 8); }


/* Margin Right */
.mr-1 { margin-right: calc(var(--spacing-unit) * 1); }
.mr-2 { margin-right: calc(var(--spacing-unit) * 2); }
.mr-3 { margin-right: calc(var(--spacing-unit) * 3); }
.mr-4 { margin-right: calc(var(--spacing-unit) * 4); }
.mr-5 { margin-right: calc(var(--spacing-unit) * 5); }
.mr-6 { margin-right: calc(var(--spacing-unit) * 6); }
.mr-7 { margin-right: calc(var(--spacing-unit) * 7); }
.mr-8 { margin-right: calc(var(--spacing-unit) * 8); }


/* Margin all sides */
.m-1 { margin: calc(var(--spacing-unit) * 1); }
.m-2 { margin: calc(var(--spacing-unit) * 2); }
.m-3 { margin: calc(var(--spacing-unit) * 3); }
.m-4 { margin: calc(var(--spacing-unit) * 4); }
.m-5 { margin: calc(var(--spacing-unit) * 5); }
.m-6 { margin: calc(var(--spacing-unit) * 6); }
.m-7 { margin: calc(var(--spacing-unit) * 7); }
.m-8 { margin: calc(var(--spacing-unit) * 8); }


/* Padding all sides */
.p-1 { padding: calc(var(--spacing-unit) * 1); }
.p-2 { padding: calc(var(--spacing-unit) * 2); }
.p-3 { padding: calc(var(--spacing-unit) * 3); }
.p-4 { padding: calc(var(--spacing-unit) * 4); }
.p-5 { padding: calc(var(--spacing-unit) * 5); }
.p-6 { padding: calc(var(--spacing-unit) * 6); }
.p-7 { padding: calc(var(--spacing-unit) * 7); }
.p-8 { padding: calc(var(--spacing-unit) * 8); }


/* Padding Top */
.pt-1 { padding-top: calc(var(--spacing-unit) * 1); }
.pt-2 { padding-top: calc(var(--spacing-unit) * 2); }
.pt-3 { padding-top: calc(var(--spacing-unit) * 3); }
.pt-4 { padding-top: calc(var(--spacing-unit) * 4); }
.pt-5 { padding-top: calc(var(--spacing-unit) * 5); }
.pt-6 { padding-top: calc(var(--spacing-unit) * 6); }
.pt-7 { padding-top: calc(var(--spacing-unit) * 7); }
.pt-8 { padding-top: calc(var(--spacing-unit) * 8); }


/* Padding Bottom */
.pb-1 { padding-bottom: calc(var(--spacing-unit) * 1); }
.pb-2 { padding-bottom: calc(var(--spacing-unit) * 2); }
.pb-3 { padding-bottom: calc(var(--spacing-unit) * 3); }
.pb-4 { padding-bottom: calc(var(--spacing-unit) * 4); }
.pb-5 { padding-bottom: calc(var(--spacing-unit) * 5); }
.pb-6 { padding-bottom: calc(var(--spacing-unit) * 6); }
.pb-7 { padding-bottom: calc(var(--spacing-unit) * 7); }
.pb-8 { padding-bottom: calc(var(--spacing-unit) * 8); }


/* Padding Left */
.pl-1 { padding-left: calc(var(--spacing-unit) * 1); }
.pl-2 { padding-left: calc(var(--spacing-unit) * 2); }
.pl-3 { padding-left: calc(var(--spacing-unit) * 3); }
.pl-4 { padding-left: calc(var(--spacing-unit) * 4); }
.pl-5 { padding-left: calc(var(--spacing-unit) * 5); }
.pl-6 { padding-left: calc(var(--spacing-unit) * 6); }
.pl-7 { padding-left: calc(var(--spacing-unit) * 7); }
.pl-8 { padding-left: calc(var(--spacing-unit) * 8); }


/* Padding Right */
.pr-1 { padding-right: calc(var(--spacing-unit) * 1); }
.pr-2 { padding-right: calc(var(--spacing-unit) * 2); }
.pr-3 { padding-right: calc(var(--spacing-unit) * 3); }
.pr-4 { padding-right: calc(var(--spacing-unit) * 4); }
.pr-5 { padding-right: calc(var(--spacing-unit) * 5); }
.pr-6 { padding-right: calc(var(--spacing-unit) * 6); }
.pr-7 { padding-right: calc(var(--spacing-unit) * 7); }
.pr-8 { padding-right: calc(var(--spacing-unit) * 8); }