:root {
}

html {
	scroll-behavior: smooth;
	font-size: 18px;
}

/*** Global Layout ***/

/*** hero ***/
#hero .vid-with-overlay {
	display: grid
}
#hero .vid-with-overlay > div {
	grid-area: 1 / 1
}
#hero .vid-with-overlay > div:first-of-type {
	z-index: 1
}
#hero .vid-with-overlay .hero-image-overlay {
	width: 100%;
	container: hero-image / inline-size;
	display: grid;
	z-index: 2
}
#hero .vid-with-overlay .hero-image-overlay > img {
	max-width: 75cqi;
}
@media (min-width: 576px) { /* sm */
	#hero .vid-with-overlay .hero-image-overlay > img {
		max-width: 66cqi;
	}
}
@media (min-width: 768px) { /* md */
	#hero .vid-with-overlay .hero-image-overlay > img {
		max-width: 50cqi;
	}
}
#hero .hero-title-overlay {
	place-self: end center;
	width: 100%;
	padding: 1.5rem 0 1rem 0;
	text-align: center;
	color: white;
	background-color: rgba(0,0,0,.5);
	z-index: 3;
}


/*** headline ***/
.display-title p.subline, .main-headline p.subline {
	font-size: 1.67rem;
}

/*** Menue ***/
.navbar-toggler:focus {
	box-shadow: unset;
}
.menu-button {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	row-gap: 7px;
}

.menu-button-line,
.menu-button::before,
.menu-button::after {
	content: "";
	width: 32px;
	height: 3px;
	background-color: #333333;
	transition: transform 0.3s, opacity 0.3s;
}

.menu-button.is-opened .menu-button-line {
	opacity: 0;
}

.menu-button.is-opened::before {
	transform: translateY(10px) rotate(45deg);
}

.menu-button.is-opened::after {
	transform: translateY(-10px) rotate(-45deg);
}

/**** Kontent ****/
section p {
	word-break: break-word;
	hyphens: auto;
	text-wrap-style: pretty;
}
/**** Subpage-Teaser ****/
.subpage-teaser .card-body {
	display: grid
}
.subpage-teaser .card-body > div {
	grid-area: 1 / 1
}
.subpage-teaser .card-body .title-overlay {
	place-self: end center;
	width: 100%;
	padding: 1.5rem 0 1rem 0;
	text-align: center;
	color: white;
	background-color: rgba(0,0,0,.5);
	z-index: 3;
}

/**** Loader Animation
*********************************/
#loader {
	opacity: 0;
	pointer-events: none;
}
.js-enabled #loader {
	width: 100vw;
	height: 100vh;
	position: fixed;
	z-index: 999999;
	left: 0;
	top: 0;
	background-color: rgba(255,255,255,1);
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 1;
	visibility: visible;
	transition: opacity 0.6s ease, visibility 0.6s ease;
}
.js-enabled #loader.hidden {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}
.sk-chase {
	width: 80px;
	height: 80px;
	position: relative;
	animation: sk-chase 2.5s infinite linear both;
}
.sk-chase-dot {
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0; 
	animation: sk-chase-dot 2.0s infinite ease-in-out both; 
}
.sk-chase-dot:before {
	content: '';
	display: block;
	width: 25%;
	height: 25%;
	background-color: silver;
	border-radius: 100%;
	animation: sk-chase-dot-before 2.0s infinite ease-in-out both; 
}
.sk-chase-dot:nth-child(1) { animation-delay: -1.1s; }
.sk-chase-dot:nth-child(2) { animation-delay: -1.0s; }
.sk-chase-dot:nth-child(3) { animation-delay: -0.9s; }
.sk-chase-dot:nth-child(4) { animation-delay: -0.8s; }
.sk-chase-dot:nth-child(5) { animation-delay: -0.7s; }
.sk-chase-dot:nth-child(6) { animation-delay: -0.6s; }
.sk-chase-dot:nth-child(7) { animation-delay: -0.5s; }
.sk-chase-dot:nth-child(8) { animation-delay: -0.4s; }
.sk-chase-dot:nth-child(1):before { animation-delay: -1.1s; background-color: #000; }
.sk-chase-dot:nth-child(2):before { animation-delay: -1.0s; background-color: #333; }
.sk-chase-dot:nth-child(3):before { animation-delay: -0.9s; background-color: #666; }
.sk-chase-dot:nth-child(4):before { animation-delay: -0.8s; background-color: #999; }
.sk-chase-dot:nth-child(5):before { animation-delay: -0.7s; background-color: #bbb; }
.sk-chase-dot:nth-child(6):before { animation-delay: -0.6s; background-color: #ccc; }
.sk-chase-dot:nth-child(7):before { animation-delay: -0.5s; background-color: #ddd; }
.sk-chase-dot:nth-child(8):before { animation-delay: -0.4s; background-color: #eee; }

@keyframes sk-chase {
	100% { transform: rotate(360deg); } 
}
@keyframes sk-chase-dot {
	80%, 100% { transform: rotate(360deg); } 
}
@keyframes sk-chase-dot-before {
	50% {
		transform: scale(0.4); 
	} 100%, 0% {
		transform: scale(1); 
	} 
}
/**** action on scroll animations (trig.js) ****/
.js-enabled .fadeInUp {
	opacity: 0;
	transform: translate3d(0, 10vh, 0);
	visibility: hidden;
	transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 1.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.js-enabled .fadeInUp.trig {
	opacity: 1;
	transform: translate3d(0, 0, 0);
	opacity: clamp(25%, calc(var(--trig) + 100%), 100%);
	visibility: visible;
}
.subpage-teaser .card-body > .trig {
	width: 100%;
	height: 100%;
	overflow: hidden;
}
.subpage-teaser .card-body > .trig > div {
	transform: scale(1.2) translate3d(0px, clamp(-20px, var(--trig-px), 20px), clamp(-20px, calc(var(--trig-px) / 2), 20px));
	opacity: clamp(25%, calc(var(--trig) + 100%), 100%);
}

/**** Media Queries
*********************************/

@media (min-width: 576px) { /* sm */

}

@media (min-width: 768px) { /* md */
	.column-flow-sub-module > div {
		column-width: 20rem;
		column-gap: var(--bs-gutter-x);
	}
	.column-flow-sub-module > div {
		& h1, h2, h3, h4, h5 {
			column-span: all;
		}
	}

	@media (min-width: 992px) { /* lg */

	}

	@media (min-width: 1200px) { /* xl */

	}

	@media (min-width: 1400px) { /* xxl */

	}