@import url('https://fonts.googleapis.com/css2?family=Blinker:wght@100;200;300;400;600;700;800;900&family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Roboto:wght@100;300;400;500;700;900&display=swap');
@import url(header.css);
@import url(formular.css);
@import url(footer.css);
@import url(pages.css);

:root {
	/* h1 */
	--font_01: 200 clamp(2.6rem, 3.5vw, 3.6rem)/1 "Blinker", sans-serif;
	--font_02: 300 2.8rem/1 "Blinker", sans-serif;
	/* h2 */
	--font_03: 200 clamp(1.8rem, 2vw, 2.5rem)/1 "Blinker", sans-serif;
	--font_04: 300 2rem/1 "Blinker", sans-serif;
	/* h4 */
	--font_08: 500 max(1.7rem, 3.5vw)/1.2 "Roboto", sans-serif;
	--font_09: 600 max(1.7rem, 3.5vw)/1.2 "Roboto", sans-serif;
	/* h5 */
	--font_10: 300 max(1rem, 1vw)/1.3 "Roboto", sans-serif;
	--font_11: 300 max(1rem, .65vw)/1.3 "Roboto", sans-serif;
	/* p */
	--font_14: 200 clamp(.9rem, 1.2vw, 1.3rem)/1.1 "Roboto", sans-serif;
	--font_15: 300 1rem/1.3 "Roboto", sans-serif;
	--font_16: 300 .95rem/1.2 "Roboto", sans-serif;

	--font_17: 500 .89rem/1.1 "Open Sans", sans-serif;
	--font_18: 800 1.2rem/1.1 "Open Sans", sans-serif;
	--font_19: 800 1.4rem/1.1 "Open Sans", sans-serif;
	--font_20: 800 1.8rem/1 "Open Sans", sans-serif;
}

*,
::before,
::after {
	box-sizing: border-box;
}

html {
	height: 100%;
	font-size: 100%;
	/* Verhindert unkontrolliertes Hochskalieren der Schrift beim Drehen Font Inflation */
	-webkit-text-size-adjust: 100%;
	-moz-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

body {
	display: grid;
	grid-template-rows: 1fr auto;
	grid-template-columns: 1fr;
	margin: 0 auto;
	padding: clamp(10vw, 11vw, 12vw) 0 0 0;
	max-width: 3840px;
	height: 100%;
	/* background: black url(../img/bg_header.png) center top/contain no-repeat; */
	background-color: black;
	background-image: url(../img/bg_header.png), url('../img/bg_content.jpg');
	background-position: left top;
	background-repeat: no-repeat, repeat;
	background-size: contain;
}

@media (width <=1920px) {
	body {
		background-image: url(../img/bg_header_1920.png), url('../img/bg_content.jpg');
		padding: clamp(12.5vw, 13.5vw, 14.5vw) 0 0 0;
	}
}

@media (width <=1280px) {
	body {
		background-image: url(../img/bg_header_1280.png), url('../img/bg_content.jpg');
		padding: clamp(15vw, 16vw, 17vw) 0 0 0;
	}
}

@media (width <=1024px) {
	body {
		background-image: url(../img/bg_header_1024.png), url('../img/bg_content.jpg');
		padding: clamp(39vw, 40vw, 41vw) 0 0 0;
	}
}

main {
	grid-row: 1 / 2;
	grid-column: 1 / 2;
	display: grid;
	align-content: start;
	justify-content: center;
	height: 100%;
	padding-bottom: 2rem;
}

a {
	text-decoration: none;
	border: none;
	outline: none;
}

img {
	width: 100%;
	height: auto;
	display: block;
}

/* #region TYPOGRAPHY */

h1 {
	font: 300 2.8rem/1 "Blinker", sans-serif;
	color: white;
	margin: 0;
	padding: 0;
}

h2 {
	font: 300 2rem/1 "Blinker", sans-serif;
	color: white;
	margin: 0;
	padding: 0;
}

h4 {
	font: 800 1.8rem/1 "Open Sans", sans-serif;
	margin: 0;
	padding: 0;
}

h5 {
	font: 800 1.4rem/1.1 "Open Sans", sans-serif;
	margin: 0;
	padding: 0;
}

p {
	font: 300 1rem/1.3 "Roboto", sans-serif;
	color: white;
	margin: 0;
	padding: 0;
}

@media (width <=1280px) {
	p {
		font: 300 1rem/1.2 "Roboto", sans-serif;
	}
}

/* #endregion */

/* #region hgroup */

hgroup {
	display: grid;
	width: 100%;
	margin: 0;
	height: clamp(12vw, 13vw, 14vw);
}

@media (width <=1280px) {
	hgroup {
		height: clamp(24vw, 25vw, 26vw);
	}
}

hgroup div {
	display: grid;
}

hgroup p {
	margin: 1vw 0 0 0;
}

hgroup p a {
	color: whitesmoke;
	text-decoration: none;
}

hgroup p a:hover {
	color: crimson !important;
}

hgroup p a:visited {
	color: whitesmoke;
}

/*txt-block links*/
hgroup.hgroup_a {
	grid-template-columns: 30vw 1fr;
	align-items: center;
	padding: 0 0 0 .5rem;
}

hgroup.hgroup_a div {
	grid-column: 1;
	justify-items: left;
}

hgroup.hgroup_a div h1 {
	font: var(--font_02);
	text-shadow: 2px 2px 6px rgba(71, 71, 71, 0.47);
}

hgroup.hgroup_a div p {
	text-align: center;
	margin: .5vw 0 0 0;
}

@media (width <=1280px) {
	hgroup.hgroup_a {
		grid-template-columns: 1fr;
		grid-template-rows: 1fr auto;
		padding: 0;
	}

	hgroup.hgroup_a div {
		grid-row: 2;
	}

	hgroup.hgroup_a div h1 {
		font: var(--font_04);
		padding: 0 .5rem;
	}
}

@media (width <=1280px) and (orientation: landscape) {
	hgroup.hgroup_a {
		grid-template-columns: 36vw 1fr;
		grid-template-rows: 1fr;
	}

	hgroup.hgroup_a div {
		grid-column: 1;
		grid-row: 1;
	}

	hgroup.hgroup_a div h1 {
		padding: 0 0 0 .5rem;
	}
}

/*txt-block rechts*/
hgroup.hgroup_c {
	grid-template-columns: 1fr 30vw;
	justify-items: center;
	align-items: center;
	padding: 0 .5rem 0 0;
}

hgroup.hgroup_c div {
	grid-column: 2;
}

hgroup.hgroup_c div h1 {
	font: var(--font_02);
	text-shadow: 2px 2px 6px rgba(71, 71, 71, 0.47);
	text-align: center;
}

hgroup.hgroup_c div p {
	text-align: center;
}

@media (width <=1280px) {
	hgroup.hgroup_c {
		grid-template-columns: 1fr;
		grid-template-rows: 1fr auto;
		padding: 0;
	}

	hgroup.hgroup_c div {
		grid-column: 1;
		grid-row: 2;
	}

	hgroup.hgroup_c div h1 {
		font: var(--font_04);
	}
}

@media (width <=1280px) and (orientation: landscape) {
	hgroup.hgroup_c {
		grid-template-columns: 1fr 40vw;
		grid-template-rows: 1fr;
		padding: 0 .5rem 0 0;
	}

	hgroup.hgroup_c div {
		grid-column: 2;
		grid-row: 1;
	}
}

/*txt-block zentriert unt*/
hgroup.hgroup_b {
	grid-template-columns: 1fr;
	justify-items: center;
	align-items: end;
	padding-left: 1vw;
}

hgroup.hgroup_b h1 {
	font: 800 max(3rem, 5vw)/.9 "Blinker", sans-serif;
	text-shadow: 2px 2px 6px rgba(71, 71, 71, 0.47);
	text-align: center;
	margin-bottom: .5rem;
}

hgroup.hgroup_b p {
	margin-top: .5rem;
	text-align: center;
}

/*txt-block 2x zentriert*/
hgroup.hgroup_d {
	grid-template-columns: 1fr;
	justify-items: center;
	align-items: end;
	padding-bottom: 2vw;
}

hgroup.hgroup_d div h1 {
	font: 800 clamp(2.2rem, 3.2vw, 3.8rem)/1 "Blinker", sans-serif;
	text-shadow: 2px 2px 6px rgba(71, 71, 71, 0.47);
}

@media (width <=1280px) {
	hgroup.hgroup_d {
		align-items: end;
	}
}

/* #endregion */

/* #region content */

.content {
	margin: .25rem .5rem;
}

.content1x {
	max-width: 1250px;
	width: 96%;
	margin: .25rem auto;
}

.content3x {
	display: grid;
	gap: .5rem;
	margin: .25rem .5rem;
}

.content3x.var_a {
	grid-template-columns: 15vw 1fr 15vw;
}

.content3x.var_b {
	grid-template-columns: 22vw 1fr 22vw;
}

.content3x.var_c {
	grid-template-columns: 20vw 1fr 14vw;
}

.content3x aside.li {
	grid-column: 1;
}

.content3x article {
	grid-column: 2;
}

.content3x aside.re {
	grid-column: 3;
}

.content3x aside {
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: 1fr;
	justify-items: center;
	align-items: end;
	gap: .5rem;
}

.content h1, .content1x h1, .content3x article h1 {
	font: var(--font_01);
	text-align: center;
	padding: .5rem 0;
}

.content h2, .content1x h2, .content3x article h2 {
	font: var(--font_03);
	text-align: left;
	padding: 0 .5rem .25rem .5rem;
}

.content p, .content1x p, .content3x article p {
	font: var(--font_14);
	color: white;
	padding: 0 .5rem;
}

.content p a, .content1x p a, .content3x article p a {
	color: white;
	text-decoration: none;
}

.content p a:hover, .content1x p a:hover, .content3x article p a:hover {
	color: yellow !important;
}

.content1x p a:visited, .content3x article p a:visited {
	color: white;
}

.bg_content {
	border-radius: 8px;
	padding: 1rem;
	background: url(../img/bg_content.png) center top/contain repeat;
}

.bg_content h1 {
	padding: 0 0 .5rem 0;
}

.bg_content h2 {
	padding: 0 0 .25rem 0;
}

.bg_content p {
	padding: 0;
}

/* bild im txt */
.bild_re {
	float: right;
	width: clamp(12rem, 12vw, 14rem);
	height: auto;
	border-radius: 8px;
	margin: .5rem 0 .25rem .5rem;
}

.nav_orientierung {
	font: var(--font_16);
	text-align: center;
	white-space: nowrap;
	color: whitesmoke;
	display: block;
	width: min-content;
	margin: 0 auto .5rem auto;
}

.nav_orientierung a {
	text-decoration: none;
	color: whitesmoke;
	border-radius: 4px;
	padding: .2rem .25rem;
}

.nav_orientierung a:hover {
	background: orange;
}

@media (width <=1920px) {
	.content3x.var_a {
		grid-template-columns: 19vw 1fr 19vw;
	}
}

@media (width <=1440px) {
	.content3x.var_a {
		grid-template-columns: 25vw 1fr 25vw;
	}
}

@media (width <=1280px) {
	.content1x {
		max-width: auto;
		width: auto;
	}

	.content, .content1x, .content3x {
		margin: 0 max(.5rem, env(safe-area-inset-right)) .5rem max(.5rem, env(safe-area-inset-left));
	}

	.content h1, .content1x h1, .content3x article h1 {
		font: var(--font_02);
		padding: 0 0 .5rem 0;
	}

	.content h2, .content1x h2, .content3x article h2 {
		font: var(--font_04);
	}

	.content p, .content1x p, .content3x article p {
		font: var(--font_15);
	}

	.content3x.var_a, .content3x.var_b, .content3x.var_c {
		grid-template-columns: 1fr 1fr;
		grid-template-rows: auto auto;
	}

	.content3x.var_a article, .content3x.var_b article, .content3x.var_c article {
		grid-column: 1 / 3;
		grid-row: 1 / 2;
	}

	.content3x.var_a aside.li, .content3x.var_b aside.li, .content3x.var_c aside.li {
		grid-column: 1 / 2;
		grid-row: 2 / 3;
	}

	.content3x.var_a aside.re, .content3x.var_b aside.re, .content3x.var_c aside.re {
		grid-column: 2 / 3;
		grid-row: 2 / 3;
	}
}

@media (width <=1024px) {
	.content3x.var_a, .content3x.var_b, .content3x.var_c {
		grid-template-columns: 1fr;
		grid-template-rows: auto auto auto;
	}

	.content3x.var_a article, .content3x.var_b article, .content3x.var_c article {
		grid-column: 1;
		grid-row: 1 / 2;
	}

	.content3x.var_a aside.li, .content3x.var_b aside.li, .content3x.var_c aside.li {
		grid-column: 1;
		grid-row: 2 / 3;
	}

	.content3x.var_a aside.re, .content3x.var_b aside.re, .content3x.var_c aside.re {
		grid-column: 1;
		grid-row: 3 / 4;
	}
}

/* #endregion */

/* #region box_cards */

.box_cards {
	--card-max-width: 100%;
	--card-min-width: 200px;
	gap: .5rem;
}

.box_cards.is-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(var(--card-min-width), 1fr));
}

.box_cards.is-flex {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

.box_cards.max700 {
	--card-max-width: 700px;
	--card-min-width: 450px;
}

.box_cards.max450 {
	--card-max-width: 450px;
	--card-min-width: 400px;
}

.box_cards.max360 {
	--card-max-width: 360px;
	--card-min-width: 280px;
}

.box_cards.max260 {
	--card-max-width: 260px;
	--card-min-width: 210px;
}

.box_cards figure {
	flex: 1 1 0%;
	max-width: var(--card-max-width);
	min-width: var(--card-min-width);
	justify-self: center;
	margin: 0;
	border-radius: 8px;
	overflow: hidden;
	background: transparent;
	box-shadow: rgba(148, 147, 147, 0.148) 0px 1px 2px 0px;
}

.box_cards figure img {
	width: 100%;
	height: auto;
	display: block;
}

.box_cards figure.vertikal {
	background: rgb(138, 138, 138);
	transition: all 0.25s ease;
}

.box_cards figure.vertikal a {
	text-decoration: none;
}

.box_cards figure.vertikal figcaption {
	padding: .25rem .25rem .4rem .4rem;
}

.box_cards figure.vertikal:hover {
	background: rgb(23, 44, 53);
}

.box_cards figure.overlay {
	position: relative;
	max-height: min-content;
}

.box_cards figure.overlay * {
	transition: all 0.25s ease;
}

.box_cards figure.overlay:hover img {
	transform: scale(1.1);
}

.box_cards figure.overlay figcaption {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: 1fr;
	align-items: end;
	max-height: min-content;
	background: linear-gradient(0deg,
			rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0) 100%);
}

.box_cards figure.overlay figcaption h5 {
	font: var(--font_18);
	color: white;
	text-shadow: 2px 2px 6px rgba(65, 64, 64, 0.742);
	padding: 0 .3rem 0 .5rem;
}

.box_cards figure.overlay figcaption p {
	font: var(--font_17);
	text-align: left;
	color: white;
	padding: .15rem .3rem .3rem .5rem;
}

.box_cards figure.overlay figcaption span {
	height: .5rem;
}

.box_cards .filler {
	flex: 1 1 0%;
	max-width: var(--card-max-width);
	min-width: var(--card-min-width);
	visibility: hidden;
	height: 0;
	margin: 0;
	padding: 0;
}

.box_cards a.card_content {
	border-radius: 4px;
	overflow: hidden;
	background: rgb(138, 138, 138);
	box-shadow: rgba(84, 84, 84, 0.158) 0px 1px 2px 0px;
	transition: all 0.25s ease;
	text-decoration: none;
}

.box_cards .card_horizontal {
	display: grid;
	grid-template-columns: auto auto;
	justify-content: start;
	align-items: start;
	border-radius: 4px;
	overflow: hidden;
	background: rgb(138, 138, 138);
	box-shadow: rgba(84, 84, 84, 0.158) 0px 1px 2px 0px;
	transition: all 0.25s ease;
	text-decoration: none;
}

.box_cards .card_horizontal:hover, .box_cards a.card_content:hover {
	background: rgb(23, 44, 53);
	box-shadow: rgb(175, 1, 244) 0px 0px 4px 0px;
}

.box_cards .card_horizontal img {
	width: 150px;
	height: auto;
	object-fit: cover;
}

.box_cards .card_horizontal div, .box_cards .card_content {
	padding: .25rem .25rem .4rem .5rem;
}

.box_cards .card_horizontal h4, .box_cards .card_content h4 {
	font: var(--font_20);
	color: white;
	margin-bottom: .2rem;
}

.box_cards .card_horizontal h5, .box_cards .card_content h5, .box_cards figure.vertikal a figcaption h5 {
	font: var(--font_19);
	color: white;
	margin-bottom: .125rem;
}

.box_cards .card_horizontal p, .box_cards .card_content p, .box_cards figure.vertikal a figcaption p {
	font: var(--font_17);
	text-align: left;
	color: white;
	padding: 0;
}

@media (width <=768px) {
	.box_cards.max260, .box_cards.max360, .box_cards.max450, .box_cards.max700 {
		--card-min-width: 100%;
	}

	.box_cards .card_horizontal {
		grid-template-columns: auto;
		grid-template-rows: auto auto;
	}

	.box_cards .card_horizontal img {
		width: 100%;
		height: auto;
		object-fit: cover;
	}
}

/* #endregion */

/* #region liste */

.liste {
	margin: 1rem 0 .5rem 2rem;
	padding: 0;
}

.liste li {
	color: white;
	padding: .25rem 0;
}

.liste li::marker {
	content: "✦";
	color: lightgrey;
}

.liste li.ohne::marker {
	content: " ";
}

.liste li p a {
	text-align: left;
	text-decoration: none;
}

/* #endregion */

/* #region nav responsive unten */

.nav_responsive {
	display: none;
}

@media (width <=768px) {
	.nav_responsive {
		display: grid;
		grid-template-rows: repeat(9, auto);
		grid-template-columns: 1fr;
		gap: .25rem;
		margin: 0 4%;
	}

	.nav_responsive a {
		font: var(--font_15);
		color: white;
		text-decoration: none;
		text-align: center;
		background: gray;
		padding: .5rem 1rem;
		border-radius: 4px;
		transition: all 0.3s ease;
	}

	.nav_responsive a:hover {
		color: black !important;
		background: greenyellow;
		border-radius: 12px;
	}

	.nav_responsive a.active {
		color: yellow;
		cursor: default;
		pointer-events: none;
	}
}

/* #endregion */

/* #region accordion */
.accordion {
	overflow: hidden;
}

.accordion p {
	max-height: 0;
	overflow: hidden;
	transition: all 0.4s ease-in-out;
	font: 300 1rem/0 "Roboto", sans-serif;
	color: transparent;
	margin: 0;
}

.accordion p.open {
	max-height: 900px;
	font: var(--font_15);
	color: white;
	margin-bottom: .5rem;
}

.accordion p.open a {
	color: white;
}

.accordion p.open a:hover {
	text-decoration: underline;
}

.accordion h2 {
	font: var(--font_04);
	padding: 0 0 .25rem 0;
	cursor: pointer;
	user-select: none;
}

/* #endregion */