@charset "UTF-8";

@media all {
	.header-block__wrapper {
		position: relative;
	}

	.header-block__wrapper video {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	.header-block__wrapper .header-block__video-container {
		height: calc(100vh - 75px);
		/* svh ist die tatsächliche verfügbare Viewheight
		 * -> wichtig für mobile Geräte, da u.a. die Adressleiste nicht in der normalen vh ausgeschlossen ist
		 * -> wird aber noch nicht in jeder aktuellen Browserversion unterstützt, deshalb Fallback auf eine durch Javascript ermittelte Höhe
		 */
		height: calc(100svh - 75px); /* IntelliJ CSS Syntax Error ignorieren! */
		height: calc((var(--vh) * 100) - 75px);
	}

	.header-block__wrapper .header-block__skip {
		position: absolute;
		bottom: 9px;
		width: 100%;
		text-align: center;
		z-index: 1;
	}

	.header-block__wrapper .header-block__skip button {
		border: none;
		background-color: transparent;
		color: var(--primary-color);
		cursor: pointer;
		display: none;
	}

	.header-block__wrapper .header-block__skip button.active {
		display: inline-block;
	}

	.header-block__wrapper .header-block__controls, .videobanner .videobanner_controls {
		position: relative;
	}

	.header-block__wrapper .header-block__controls button, .videobanner .videobanner_controls button {
		position: absolute;
		right: 0;
		bottom: 10px;
		border: none;
		background-color: transparent;
		color: var(--primary-color);
		cursor: pointer;
		z-index: 2;
	}

	.header-block__wrapper .header-block__infobox {
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		display: flex;
		justify-content: end;
		flex-wrap: wrap;
		flex-direction: column;
		padding: 30px 30px 40px;
	}

	.header-block__wrapper .header-block__infobox > * {
		max-width: 45%;
	}

	.header-block__wrapper .header-block__infobox p.small,
	.header-block__wrapper .header-block__infobox h2.small {
		padding: 10px;
		display: inline-block;
		margin-top: 0 !important;
		margin-bottom: 7px;
	}

	.header-block__wrapper .header-block__infobox > .info_cat > p {
		color: var(--bs-white);
		background-color: var(--font-color);
	}

	.header-block__wrapper .header-block__infobox > .info_title > h2 {
		color: var(--primary-color);
		background-color: var(--bs-white);
	}

	.header-block__wrapper .header-block__infobox > .info_text,
	.header-block__wrapper .header-block__infobox > .info_text a {
		color: var(--bs-white) !important;
		background-color: var(--primary-color);
	}

	.header-block__wrapper .header-block__infobox > .info_text {
		padding: 10px;
		margin-bottom: 10px;
	}

	.header-block__wrapper .header-block__infobox > .info_text a.last {
		display: flex;
		justify-content: end;
	}

	.header-block__wrapper .header-block__infobox > .info_text svg {
		height: 1rem;
		width: 1rem;
		fill: var(--bs-white) !important;
	}
}

@media (min-width: 1200px) {
	.header-block__wrapper .header-block__video-container {
		height: calc(100vh - 120px);
	}
}

@media (max-width: 767px) {
	.header-block__wrapper .header-block__infobox > * {
		max-width: 100%;
	}

	.header-block__wrapper .header-block__infobox.hide {
		display: none !important;
	}

	.header-block__wrapper .header-block__infobox:not(.hide) {
		display: flex;
	}
}