:root {
	--aktiv:					#233b51;
	--beruf:					#aa96ab;
	--gold:						#fcdda6;
	--gruen:					#b0b483;
	--rot:						#dd3530;
	--sand:						#f6f4f0;
	--schule:					#c28978;
	--spenden:				#034844;
	--studium:				#88b7ca;
	--text:						#27303a;
	--text-light:			#27303abd;
	--weiss:					#fff;
	--grey: 					#667085;
	--grey-light:			#f0f2f7;
	--input-border:		#d0d5dd;
	--grau: 					#e7e7e7;

	--border-radius: 0;
	--input-border-radius: 0.5rem;

	--base-error:			#dd3530;

	/* Typography */
	--outfit:				"Outfit",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Segoe UI,Roboto,Oxygen,sans-serif;

	/* Mobile font sizes */
	--h-large: 							700 2.5rem/1.2 var(--outfit);	/* 40px */
	--h-medium: 						700 1.875rem/1.2 var(--outfit);		/* 30px */
	--h-small: 							700 1.75rem/1.2 var(--outfit);	/* 28px */
	--h-smaller: 						500 1.5rem/1.2 var(--outfit);	/* 24px */

	--body-large-regular:		400 1.25rem/1.6 var(--outfit);	/* 20px */
	--body-large-medium:		500 1.25rem/1.6 var(--outfit);
	--body-large-bold:			700 1.25rem/1.6 var(--outfit);

	--body-default-regular:	400 1rem/1.6 var(--outfit);	/* 16px */
	--body-default-bold:		700 1rem/1.6 var(--outfit);

	--body-small-regular:		400 1rem/1.6 var(--outfit);	/* 16px */
	--body-small-bold:			700 1rem/1.6 var(--outfit);

	--body-mini-regular:		400 1rem/1.6 var(--outfit);			/* 16px */
	--body-mini-bold:				600 1rem/1.6 var(--outfit);

	--quote: 								400 1.25rem/1.6 var(--outfit);	/* 20px */

	--body-tiny-regular:		400 0.875rem/1.6 var(--outfit);			/* 14px */
	--body-tiny-bold:				700 0.875rem/1.6 var(--outfit);

	--component-gap: 2rem;
	--component-gap--small: 1rem;
	--component-gap--medium: 3rem;
	--component-gap--large: 4rem;
	--component-gap--xlarge: 6rem;

}

@media(min-width: 50em) {
	:root {

		--h-large: 							700 3.75rem/1.2 var(--outfit);	/* 60px */
		--h-medium: 						700 2.5rem/1.2 var(--outfit);		/* 40px */
		--h-small: 							700 1.75rem/1.2 var(--outfit);	/* 28px */
		--h-smaller: 						500 1.5rem/1.2 var(--outfit);	/* 24px */

		--body-large-regular:		400 1.5rem/1.6 var(--outfit);	/* 20px */
		--body-large-medium:		500 1.5rem/1.6 var(--outfit);
		--body-large-bold:			700 1.5rem/1.6 var(--outfit);

		--body-default-regular:	400 1.25rem/1.6 var(--outfit);	/* 20px */
		--body-default-bold:		700 1.25rem/1.6 var(--outfit);

		--body-small-regular:		400 1.125rem/1.6 var(--outfit);	/* 18px */
		--body-small-bold:			700 1.125rem/1.6 var(--outfit);

		--body-mini-regular:		400 1rem/1.6 var(--outfit);			/* 16px */
		--body-mini-bold:				700 1rem/1.6 var(--outfit);

		--quote: 								400 1.5rem/1.6 var(--outfit);	/* 24px */

	}
}


html {
	font-size: 1rem;
	line-height: 1.6;
	color: var(--text);
	background-color: var(--sand);
}

body {
	position: relative;
	font: var(--body-small-regular);
	overflow-x: hidden;
}

@media(min-width: 43em) {
	main {
		margin-top: 1.3em;
	}
}

/* ----------------------------------------------------------------------------------- */

.h-large {
	margin: 0 0 0.5em;
	font: var(--h-large);
}

h2,
.h-medium {
	margin: 0 0 0.5em;
	font: var(--h-medium);
}

.h-small {
	margin: 0 0 0.5em;
	font: var(--h-small);
}

.h-smaller {
	margin: 0 0 0.5em;
	font: var(--h-smaller);
}


/* ----------------------------------------------------------------------------------- */

/* Wrappers */

.page-wrapper {
	margin: auto;
	max-width: 90rem; /* 1440px */
	overflow: hidden;
}

.content-wrapper {
	margin: auto;
	padding: 0 1rem;
	max-width: 73.75rem; /* 1180px */
}

/*
@media(min-width: 73.75em) {
	.content-wrapper {
		padding: 0;
	}
}
 */

.content-wrapper--narrow {
	margin: auto;
	padding: 0 1rem;
	max-width: 61.25rem; /* 980px */
}

@media(min-width: 59.25em) {
	.content-wrapper--narrow {
		padding: 0;
	}
}

.content-wrapper-cards {
	margin: auto;
	padding: 0;
	max-width: 73.75rem; /* 1180px */
}

/*
@media(min-width: 73.75em) {
	.content-wrapper-cards {
		padding: 1rem;
	}
}
 */

.block-writer p,
.block-writer ul,
.block-writer ol,
.block-writer h2,
.block-writer h3,
.block-writer h4 {
	max-width: 55rem; /* 880px */
}

.text-wrapper--centered {
	margin-bottom: 2rem;
	padding: 0 1rem;
}

@media(min-width: 48em) {
	.text-wrapper--centered {
		margin-right: auto;
		margin-left: auto;
		padding: 0;
		max-width: 48rem;
		text-align: center;
	}
}

.text-centered {
	text-align: center;
}

/* wrapper modifications */

.block-downloads.content-wrapper {
	/* padding: 0; */
}


/* Blocks */

[class^="block-"] {

}

[class^="block-"] [class^="block-"] {
	margin-bottom: 0;
}

.block-margin {
	margin-top: 4rem;
	margin-bottom: 4rem;
}

.block-padding {
	padding-top: 4rem;
	padding-bottom: 4rem;
}

.block-padding-bottom {
	padding-bottom: 4rem;
}

.block-writer + .block-writer {
	margin-top: -2rem !important;
}

/* /Blocks */

.section-tint,
.section-tint--default {
	background-color: var(--gruen);
}

.section-tint--gruen {
	background-color: var(--gruen);
}

.section-tint--weiss {
	background-color: var(--weiss);
}

.section-tint--grau {
	background-color: var(--grau);
}

.section-tint--sand {
	background-color: var(--sand);
}

.section-tint--gold {
	background-color: var(--gold);
}

.section-tint--schule {
	background-color: var(--schule);
}

.section-tint--beruf {
	background-color: var(--beruf);
}

.section-tint--studium {
	background-color: var(--studium);
}

.section-tint--spenden {
	background-color: var(--spenden);
}


/* end wrapper elements */
/* ----------------------------------------------------------------------------------- */

a {
	color: var(--aktiv);
	text-decoration: underline;
	text-underline-offset: 0.125em;
}

a[target="_blank"] {
	padding-right: 1.2rem;
	background-image: url(/assets/images/icon-ext.svg);
	background-size: 0.7em;
	background-position: right 6px;
	background-repeat: no-repeat;
	text-decoration: underline;
}

figure a[target="_blank"],
a[target="_blank"]:has(img) {
	padding-right: 0;
	background-image: none;
}

a:not(.button):hover,
a:not(.button):focus-visible {
	color: var(--rot);
	text-decoration-style: wavy;
	outline: 0;
}

a[href*="#skip-"] {
	position: absolute;
	top: 0;
	right: 100%;
}

a[href="#skip-main"]:focus {
	right: auto;
}

a[href="#skip-gruppensuche"]:focus {
	right: auto;
}

[class*="section-tint"]:not(.section-tint--weiss) a:not(.button):hover,
[class*="section-tint"]:not(.section-tint--weiss) a:not(.button):focus-visible {
	color: var(--weiss);
	text-decoration-style: wavy;
	outline: 0;
}

.link-icon-carat {
	padding-right: 1rem;
	background-image: url(/assets/images/icon-angle-right.svg);
	background-size: 0.5em;
	background-position: right;
	background-repeat: no-repeat;
	text-decoration: underline;
}

.link-icon-download {
	padding-right: 1.5rem;
	background-image: url(/assets/images/icon-download--blue.svg);
	background-size: 1.1em;
	background-position: right;
	background-repeat: no-repeat;
	text-decoration: underline;
}

a.link-icon-download:hover {
	background-image: url(/assets/images/icon-download--white.svg) !important;
}

.link-icon-mail {
	padding-right: 1.5rem;
	background-image: url(/assets/images/icon-mail.svg);
	background-size: 0.8em;
	background-position: right 6px;
	background-repeat: no-repeat;
	text-decoration: underline;
}

.link-icon-ext {
	padding-right: 1.3rem;
	background-image: url(/assets/images/icon-ext.svg);
	background-size: 0.7em;
	background-position: right 5px;
	background-repeat: no-repeat;
	text-decoration: underline;
}




h1 {
	font: var(--h-large);
}

h2 {
	font: var(--h-medium);
}

h3 {
	font: var(--h-small);
}

h4,
h5,
h6 {
	font: var(--h-small);
}

/* Remove margins from p elements within li */
ul li p,
ol li p {
	margin-top: 0;
	margin-bottom: 0;
}

/* Add margin in case more than one p element is within li */
ul li p + p,
ol li p + p {
	margin-top: 1rem;
}

/* Common utilities */

.is-fixed {
	position: fixed;
}

[hidden="true"],
.is-hidden,
.hidden {
	display: none !important;
}

.visuallyhidden {
	border: 0;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px !important;
	white-space: nowrap;
}

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
	clip: auto;
	clip-path: none;
	height: auto;
	margin: 0;
	overflow: visible;
	position: static;
	width: auto;
	white-space: inherit;
}

.clipped {
	position: absolute;
	clip: rect(0 0 0 0);
	width: 0 !important;
	height: 0 !important;
	overflow: hidden;
}