/* ContentStock Foundation: Typography */
:root {
	--cs-font-family-base: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	--cs-font-size-base: 1rem;
	--cs-line-height-base: 1.6;
	--cs-line-height-heading: 1.2;
}

:where(body) {
	font-family: var(--cs-font-family-base);
	font-size: var(--cs-font-size-base);
	line-height: var(--cs-line-height-base);
}

:where(.cs-module--headline) {
	margin: 0;
	font-family: inherit;
	font-weight: 700;
	line-height: var(--cs-line-height-heading);
	overflow-wrap: anywhere;
}

:where(h1.cs-module--headline) {
	font-size: clamp(2rem, 1.75rem + 1.25vw, 3rem);
}

:where(h2.cs-module--headline) {
	font-size: clamp(1.75rem, 1.55rem + 1vw, 2.4rem);
}

:where(h3.cs-module--headline) {
	font-size: clamp(1.5rem, 1.38rem + .6vw, 1.9rem);
}

:where(h4.cs-module--headline) {
	font-size: 1.25rem;
}

:where(h5.cs-module--headline) {
	font-size: 1.125rem;
}

:where(h6.cs-module--headline) {
	font-size: 1rem;
}

:where(.cs-module--text) {
	line-height: var(--cs-line-height-base);
	overflow-wrap: anywhere;
}

:where(.cs-module--text) :where(p, ul, ol) {
	margin-block: 0 1em;
}

:where(.cs-module--text) :where(ul, ol) {
	padding-inline-start: 1.5em;
}

:where(.cs-module--text) :where(li + li) {
	margin-block-start: .25em;
}

:where(.cs-module--text) > :first-child {
	margin-block-start: 0;
}

:where(.cs-module--text) > :last-child {
	margin-block-end: 0;
}

:where(.cs-module--text) :where(a), :where(a.cs-module--anchor) {
	text-underline-offset: .15em;
}

:where(a[href], button, input, textarea, select, summary, [tabindex]:not([tabindex="-1"])):focus-visible {
	outline: 2px solid Highlight;
	outline-offset: 2px;
}

/* Formular-Auswahlelemente in der Projektfarbe (ohne Spezifitaet, damit Projekt-CSS gewinnt). */
:where(input[type="checkbox"], input[type="radio"]) {
	accent-color: var(--cs-color-primary, auto);
}