:root {
	--primary-company--color: #678cb1;
}

/*--------------------------------------
  Lokale Schriftart einbinden: Mulish
---------------------------------------*/
@font-face {
	font-family: 'Mulish';
	/* Name, der später in CSS verwendet wird */
	src: url('../../sources/fonts/Mulish/Mulish-VariableFont_wght.ttf') format('truetype');
	/* Pfad zur lokalen Font-Datei */
	font-weight: 100 900;
	/* Variable Font: Gewicht von 100 bis 900 verfügbar */
	font-style: normal;
	/* Normale Schriftart, keine Italic-Variante */
	font-display: swap;
}

@font-face {
	font-family: 'Mulish';
	src: url('../../sources/fonts/Mulish/Mulish-VariableFont_wght.ttf') format('truetype');
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Mulish';
	src: url('../../sources/fonts/Mulish/Mulish-Italic-VariableFont_wght.ttf') format('truetype');
	font-weight: 100 900;
	font-style: italic;
	font-display: swap;
}

/*--------------------------------------
  Root-Variablen und Body-Font setzen
---------------------------------------*/
:root,
[data-bs-theme="light"] {
	/* Standard und Bootstrap Light-Theme */
	--bs-font-sans-serif: 'Mulish', sans-serif;
	/* Bootstrap-Sans-Serif auf Mulish setzen */
	--bs-body-font-family: var(--bs-font-sans-serif);
	/* Body-Font-Familie übernimmt Mulish */
	--bs-body-font-size: 1.375rem;
	/* Root-Font-Size setzen, entspricht 22px */
}

/* ===============================
   Globale Font & Grund-Setup
   =============================== */

html {
	hyphens: auto;
	/* automatische Silbentrennung */
	overflow-wrap: break-word;
	/* lange Wörter umbrechen */
	word-wrap: break-word;
	/* Fallback für alte Browser */
}

h2,
h3,
h3.card-title {
	color: var(--primary-company--color);
	font-weight: 700;
}

h1 {
	color: var(--primary-company--color);
	font-weight: 700;
	font-size: 2rem;
}

h1#hero-heading {
	font-weight: 700;
	font-size: 1.7rem;
}

h2,
h3 {
	color: var(--primary-company--color);
	font-size: 1.7rem;
}

p.lead {
	font-size: 1.5625rem;
}

h3.card-title {}

.btn {
	border-color: #000;
	border-radius: 15px;
}

a,
.video_subline {
	color: var(--primary-company--color);
}

a.btn {
	color: #000;
}

a.btn:hover {
	border-color: var(--primary-company--color);
	background-color: var(--primary-company--color);
}

.topnavigation ul.navbar-nav li.active,
ul.navbar-nav li:hover {
	text-decoration: underline;
}

.topnavigation a.topnavi-fs-1 {
	font-size: 3rem;
}

.justbeforewayfinder {
	padding-left: 3rem;
}

#contentarea p {
	margin-bottom: 0.8rem;
}

.carousel-item img {
	aspect-ratio: 16 / 9;
	/* z. B. 16:9, kannst auch 4/3 wählen */
}

.featured-image {
	width: 100%;
	aspect-ratio: 3 / 4;
	background-size: cover;
	background-position: center;
	position: relative;
	/* wichtig für das ::after-Overlay */
	overflow: hidden;
	transition: filter 0.4s ease, transform 0.4s ease;
}

/* Farbüberlagerung */
.featured-image::after {
	content: "";
	position: absolute;
	inset: 0;
	background-color: var(--primary-company--color);
	mix-blend-mode: color;
	/* sorgt für Einfärbung statt Überdeckung */
	opacity: 1;
	transition: opacity 0.4s ease;
	pointer-events: none;
	/* klickt nicht in den Overlay rein */
}

/* Beim Hover oder Fokus: Overlay ausblenden */
a:hover .featured-image::after,
a:focus-visible .featured-image::after {
	opacity: 0;
}


.card-bg {
	width: 100%;
	aspect-ratio: 4 / 3;
	/* Einheitliche Höhe für alle Karten */
	background-size: cover;
	/* Bild füllt den Container */
	background-position: center;
	border-radius: 0.25rem;
	/* optional wie Card */
}

@media (min-width: 992px) {
	#navMenu .addressandbutton {
		background-color: #A5BEE4;
		color: #fff;
		padding: 2rem;
	}

	#navMenu .addressandbutton a,
	#navMenu .addressandbutton address {
		color: #fff;
	}

	#navMenu .col-lg-8 {
		background-color: #fff;
		padding: 2rem 3rem;
	}
}

/* Unterhalb von sm: volle Breite */
@media (max-width: 767.98px) {
	.container.content-container-sm {
		max-width: 100%;
	}

	.carousel-item a img {
		aspect-ratio: 4/3 !important;
	}

	p.contactaddress {
		display: none;
	}
}

/* ===============================
   Footer
   =============================== */
footer,
footer *,
.copyright {
	font-size: 1.25rem;
}

footer {
	background-color: #a5bee4;
}

footer .contactblock {
	white-space: nowrap;
	flex-shrink: 1;
}

.copyright-background-stripe {
	height: 100px;
	width: 100%;
	background-color: #a5bee4;
	position: absolute;
	top: 0;
	left: 0;
	transform: translateY(-50%);
	z-index: 0;
}


/* Standard: keine Border */
@media (max-width: 991.98px) {
	.border-lg-end {
		border-right: none !important;
	}

	.topnavigation a.topnavi-fs-1 {
		font-size: 1.75rem;
	}

	.justbeforewayfinder {
		padding-left: 0rem;
	}
}

/* Ab lg: Border sichtbar */
@media (min-width: 992px) {
	.border-lg-end {
		border-right: 1px solid #212529 !important;
		/* oder deine Wunschfarbe */
	}
}


/* Desktop: Dropdowns links neben Navi */
@media (min-width: 992px) {

	/* lg */
	.navbar-nav {
		position: relative;
		/* Referenz für absolute Dropdowns innerhalb des li */
	}

	/* Submenu positionieren */
	.navbar-nav .dropdown-menu {
		position: absolute;
		/* innerhalb des li bleiben */
		top: 0;
		/* obere Kante des li */
		right: 100%;
		/* links vom li */
		left: auto;
		transform: translateX(-15px);
		/* optional: 15px Abstand */
		max-width: calc(100% - 1rem);
		/* nicht über Overlay-Rand hinaus */
	}

	/* Submenu sichtbar beim Click (Bootstrap 5 steuert .show) */
	.navbar-nav .dropdown.show>.dropdown-menu {
		display: block;
	}
}

/* Mobil: Standard Bootstrap Verhalten */
@media (max-width: 991.98px) {
	.navbar-nav .dropdown-menu {
		position: static;
		transform: none;
	}
}

/* ===============================
   Optional: kleine Styling-Feinheiten
   =============================== */
#navMenu .navbar-nav li>a {
	cursor: pointer;
}

#navMenu .navbar-nav li>ul.dropdown-menu li a {
	white-space: nowrap;
	/* verhindert Umbrechungen */
}

.displaynone {
	display: none;
}


/* ===============================
   Scroll Box
   =============================== */

/* Nur Scrollbalken verstecken */
.scroll-row::-webkit-scrollbar {
	display: none;
}

.scroll-row {
	-ms-overflow-style: none;
	/* IE & Edge */
	scrollbar-width: none;
	/* Firefox */
}

.scroll-row article {
	/* width:508px; */
	width: calc(50% - 14px);
}

@media (max-width: 767.98px) {
	.scroll-row article {
		width: 85%;
	}
}


/**NMS Swipe Slider**/
[data-slider="true"],
[data-slider="true"]::parent {
	position: relative;
}

.data-slider-wrapper {
	position: relative;
}

.data-slider-wrapper .overlay-slider-box.left-box,
.data-slider-wrapper .overlay-slider-box.right-box {
	position: absolute;
	background-color: transparent;
	z-index: 10;
	top: calc(50% - 12.5px);
	font-weight: 700;
	font-size: 5rem;
	font-family: monospace, monospace;
	color: var(--primary-company--color);
	text-shadow:
		1px 0 rgba(209, 226, 244, 0.95),
		0 1px rgba(209, 226, 244, 0.95),
		-1px 0 rgba(209, 226, 244, 0.95),
		0 -1px rgba(209, 226, 244, 0.95),
		1px 1px rgba(209, 226, 244, 0.95),
		1px -1px rgba(209, 226, 244, 0.95),
		-1px 1px rgba(209, 226, 244, 0.95),
		-1px -1px rgba(209, 226, 244, 0.95);
	display: none;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}


.data-slider-wrapper .left-box,
.data-slider-wrapper .right-box {
	display: none;
}

.data-slider-wrapper .left-box:focus,
.data-slider-wrapper .right-box:focus {
	outline: none;
}

.data-slider-wrapper:hover .left-box.active {
	left: 12px;
	display: flex;
}


.data-slider-wrapper:hover .right-box.active {
	display: flex;
	right: 12px;
}


@media (max-width: 992px) {

	.data-slider-wrapper .overlay-slider-box.swipeHint-box:not(.swipeHintHide) {
		position: absolute;
		bottom: 25%;
		left: 0;
		width: 50px;
		height: 50px;
		z-index: 1000;
		display: block;
		background-image: url('../img/446287_finger_gesture_hand_interactive_left_icon.svg');
		background-size: cover;
		opacity: 0.95;
		animation: swipeHintSlide 2s ease-in-out 2 forwards, swipeHintHide 6s linear 2 forwards;
	}

	.data-slider-wrapper .left-box,
	.data-slider-wrapper .right-box {
		display: none !important;
	}
}

@keyframes swipeHintSlide {
	0% {
		left: calc(50% + 50px);
		opacity: 0;
	}

	30% {
		left: calc(50% - 50px);
		opacity: 1;
	}

	70% {
		left: 0;
		opacity: 1;
	}

	100% {
		left: 0px;
		opacity: 0;
	}
}

@keyframes swipeHintHide {
	0% {
		visibility: visible;
	}

	100% {
		visibility: hidden;
		opacity: 0;
	}
}


/*** NMS Load More ***/
[loadmore="true"] article:not(.show, .loadmore, .showPrep) {
	display: none;
}

article.showPrep {
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.35s ease, visibility 0.35s ease;
}

article.show {
	opacity: 1;
	visibility: visible;
	transition: opacity 0.6s ease, visibility 0.6s ease;
}


@keyframes bounceUp {

	0%,
	100% {
		transform: translateY(0) rotate(270deg);
	}

	50% {
		transform: translateY(-10px) rotate(270deg);
	}
}

[loadmore="true"] .scrollUp {
	z-index: 10;
	font-weight: 700;
	font-size: 5rem;
	font-family: monospace, monospace;
	color: var(--primary-company--color);
	text-shadow:
		1px 0 rgba(209, 226, 244, 0.95),
		0 1px rgba(209, 226, 244, 0.95),
		-1px 0 rgba(209, 226, 244, 0.95),
		0 -1px rgba(209, 226, 244, 0.95),
		1px 1px rgba(209, 226, 244, 0.95),
		1px -1px rgba(209, 226, 244, 0.95),
		-1px 1px rgba(209, 226, 244, 0.95),
		-1px -1px rgba(209, 226, 244, 0.95);
	cursor: pointer;
	width: auto;
	transform: rotate(270deg);
	animation: bounceUp 0.6s ease forwards;
}


/** fixed Nav **/
@keyframes slideDown {
	0% {
		transform: translateY(-100%);
		opacity: 0;
	}

	100% {
		transform: translateY(0);
		opacity: 1;
	}
}

@keyframes slideUp {
	0% {
		transform: translateY(0);
		opacity: 1;
	}

	100% {
		transform: translateY(-100%);
		opacity: 0;
	}
}

.nav-slide-down {
	animation: slideDown 0.3s forwards;
}

.nav-slide-up {
	animation: slideUp 0.3s forwards;
}

[aria-label="Hauptnavigation"] img.fixed {
	display: none;
}

[aria-label="Hauptnavigation"].fixed-top img.static {
	display: none;
}

[aria-label="Hauptnavigation"].fixed-top img.fixed {
	display: block;
}




[loadmorefilter="true"] .tag-link {
  display: inline-block;
  padding: 5px 25px;
  font-size: 1rem;
  border-radius: 24px;
  background-color: transparent;
  border: 2px solid var(--primary-company--color);
  color: var(--primary-company--color);
  text-decoration: none;
  transition: background-color 0.3s, color 0.3s, transform 0.1s, box-shadow 0.1s;
  box-shadow: 0px 4px 10px -6px rgba(0, 0, 0, 0.5);
}
[loadmorefilter="true"] .tag-link.active,
[loadmorefilter="true"] .tag-link:hover,
[loadmorefilter="true"] .tag-link:focus-visible:not(.active) {
  background-color: var(--primary-company--color);
  color: white;
}



[loadmorefilter="true"] .tag-link:hover,
[loadmorefilter="true"] .tag-link:focus-visible:not(.active) {
  transform: translateY(2px);
  box-shadow: 0px 1px 4px -2px rgba(0, 0, 0, 0.7);
  transition-timing-function: ease-in-out;
}

[loadmorefilter="true"] .tag-link:active:not(.active) {
  transform: translateY(4px);
  box-shadow: 0px 0px 2px -1px rgba(0, 0, 0, 0.9);
}


.loadmore .btn-primary {
  padding: 8px 30px;
  font-size: 1rem;
  border-radius: 24px;
  border: 2px solid var(--primary-company--color);
  background-color: transparent;
  color: var(--primary-company--color);
  box-shadow: 0px 4px 10px -6px rgba(0, 0, 0, 0.5);
  transition: background-color 0.3s, color 0.3s, transform 0.1s, box-shadow 0.1s;
}

.hidden.loadmore .btn-primary {
	display:none;
}

.loadmore .btn-primary:hover:not(:disabled),
.loadmore .btn-primary:focus-visible:not(:disabled) {
  background-color: var(--primary-company--color);
  color: white;
  outline: none;
  transform: translateY(2px);
  box-shadow: 0px 1px 4px -2px rgba(0, 0, 0, 0.7);
  transition-timing-function: ease-in-out;
}

.loadmore .btn-primary:active:not(:disabled) {
  transform: translateY(4px);
  box-shadow: 0px 0px 2px -1px rgba(0, 0, 0, 0.9);
}


/*** Main Navigation Logo fixe 4 swipe js***/
.navbar-brand {
	display:inline-block;
}