/* =========================================================
   Animation Wave für Nav-link
========================================================= */
#mainNav a.nav-link {
	position: relative;
	display: block;
	padding: 10px 30px;
	/* border: 2px solid #00aeff; */
	color: var(--color-nav-link);
	text-decoration: none;
	overflow: hidden;
	text-transform: uppercase;
}
/* =========================================================
   Text innerhalb des Nav-Links
========================================================= */
#mainNav a.nav-link span {
	position: relative;
	z-index: 1;
	transition: 1s;
}
/* =========================================================
   Textfarbe bei Hover und geöffnetem Dropdown
========================================================= */
#mainNav a.nav-link:hover span,
#mainNav a.nav-link:focus span,
#mainNav a.nav-link.show span,
#mainNav .nav-item:hover > a.nav-link span,
#mainNav .nav-item:focus-within > a.nav-link span {
	color: #fff;
}
/* =========================================================
   Farbiger Wellen-Hintergrund
========================================================= */
#mainNav a.nav-link .wave {
	position: absolute;
	top: calc(100% + 22px);
	left: 0;

	width: 100%;
	height: 100%;

	background: #EE6401;
	transition: 0.7s;
}


/* =========================================================
   Welle bei Hover und geöffnetem Dropdown einblenden
========================================================= */

#mainNav a.nav-link:hover .wave,
#mainNav a.nav-link:focus .wave,
#mainNav a.nav-link.show .wave,
#mainNav .nav-item:hover > a.nav-link .wave,
#mainNav .nav-item:focus-within > a.nav-link .wave {
	top: 0;
  border-radius: 3px 3px 0px 0px;
}


/* =========================================================
   Animierte Wellenkante
========================================================= */

#mainNav a.nav-link .wave::before {
	content: "";
	position: absolute;
	top: -22px;
	left: 0;

	width: 100%;
	height: 22px;

	background: url("../images/background/wave.png");
	animation: animate 0.5s linear infinite;
}


/* =========================================================
   Bewegung des Wellenbildes
========================================================= */

@keyframes animate {

	0% {
		background-position-x: 0;
		background-position-y: -22px;
	}

	100% {
		background-position-x: 118px;
		background-position-y: -22px;
	}
}


/* =========================================================
   Dropdown-Pfeil
========================================================= */

#mainNav .nav-item.dropdown > .dropdown-toggle::after {
	display: inline-block;
	margin-left: 0.45em;
	vertical-align: 0.15em;
	content: "";

	border-top: 0.3em solid currentColor;
	border-right: 0.3em solid transparent;
	border-bottom: 0;
	border-left: 0.3em solid transparent;

	transform: rotate(0deg);
	transform-origin: center;

	transition:
		transform 0.25s ease,
		border-top-color 0.25s ease;
}


/* =========================================================
   Farbe bleibt bei geöffnetem Dropdown erhalten (Pfeil)
========================================================= */

#mainNav .nav-item.dropdown > .dropdown-toggle:hover::after,
#mainNav .nav-item.dropdown > .dropdown-toggle:focus::after,
#mainNav .nav-item.dropdown > .dropdown-toggle.show::after,
#mainNav .nav-item.dropdown:hover > .dropdown-toggle::after,
#mainNav .nav-item.dropdown:focus-within > .dropdown-toggle::after {
	border-top-color: #fff;
}






/* =========================================================
   Dropdown Pfeil animieren
========================================================= */

/* =========================================================
   Dropdown-Pfeil
========================================================= */

#mainNav .nav-item.dropdown > .dropdown-toggle::after {
	display: inline-block;
	margin-left: 0.45em;
	vertical-align: 0.15em;
	content: "";

	border-top: 0.3em solid currentColor;
	border-right: 0.3em solid transparent;
	border-bottom: 0;
	border-left: 0.3em solid transparent;

	transform: rotate(0deg);
	transform-origin: center;

	transition:
		transform 0.25s ease,
		border-top-color 0.25s ease;
}


/* =========================================================
   Farbe bleibt bei geöffnetem Dropdown erhalten
========================================================= */

#mainNav .nav-item.dropdown > .dropdown-toggle:hover::after,
#mainNav .nav-item.dropdown > .dropdown-toggle:focus::after,
#mainNav .nav-item.dropdown > .dropdown-toggle.show::after,
#mainNav .nav-item.dropdown:hover > .dropdown-toggle::after,
#mainNav .nav-item.dropdown:focus-within > .dropdown-toggle::after {
	border-top-color: #fff;
}


/* =========================================================
   Pfeil bei geöffnetem Dropdown drehen
========================================================= */

#mainNav .nav-item.dropdown > .dropdown-toggle.show::after,
#mainNav .nav-item.dropdown:hover > .dropdown-toggle::after,
#mainNav .nav-item.dropdown:focus-within > .dropdown-toggle::after {
	transform: rotate(180deg);
}






/* ==========================================
   Extra Small (0px - 575.98px)
   ========================================== */
@media (max-width: 575.98px) {

    .navbar-nav .nav-link{
        font-size: 0.95rem !important;
    }

}


/* ==========================================
   Small (576px - 767.98px)
   ========================================== */
@media (min-width: 576px) and (max-width: 767.98px) {

    .navbar-nav .nav-link{
        font-size: 1rem !important;
    }

}


/* ==========================================
   Medium (768px - 991.98px)
   ========================================== */
@media (min-width: 768px) and (max-width: 991.98px) {

    .navbar-nav .nav-link{
        font-size: 1.02rem !important;
    }

}


/* ==========================================
   Large (992px - 1199.98px)
   ========================================== */
@media (min-width: 992px) and (max-width: 1199.98px) {

    .navbar-nav .nav-link{
        font-size: 1.05rem !important;
    }

}


/* ==========================================
   Extra Large (1200px - 1399.98px)
   ========================================== */
@media (min-width: 1200px) and (max-width: 1399.98px) {

    .navbar-nav .nav-link{
        font-size: 1.1rem !important;
    }

}
/* ==========================================
   Extra Extra Large (ab 1400px)
   ========================================== */
@media (min-width: 1400px) {

    .navbar-nav .nav-link{
        font-size: 1.15rem !important;
    }

}