/* Planlos am Plektrum – Gitarrentraining-Navigation
 * Desktop: Gitarrentraining-Menü an der GeneratePress-Hauptnavigation.
 * Mobil: öffentliche GeneratePress-Navigation oben, PAP-Sticky-Navigation unten.
 */

@property --pap-nav-position {
	syntax: "<percentage>";
	inherits: true;
	initial-value: 10%;
}

.pap-gitarrentraining-headernav {
	display: none;
}

body.pap-gitarrentraining-desktopmenue-verfuegbar.pap-gp-desktop-navigation
	.main-navigation
	.main-nav:not(.pap-gitarrentraining-headernav) {
	display: none;
}

body.pap-gitarrentraining-desktopmenue-verfuegbar.pap-gp-desktop-navigation
	.main-navigation
	.pap-gitarrentraining-headernav {
	display: block;
}

.pap-werkzeug-navigation-mobil {
	display: none;
}

body.pap-gitarrentraining-bereich.pap-gp-mobile-navigation
	.pap-werkzeug-navigation-mobil {
	position: fixed;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 1000;
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	height: calc(70px + env(safe-area-inset-bottom));
	margin-bottom: 0 !important;
	padding: 0 0 env(safe-area-inset-bottom);
}

.pap-werkzeug-navigation-mobil::before {
	position: absolute;
	inset: 0;
	z-index: -1;
	border-top: 1px solid #3d4b5a;
	background: #25303b;
	content: "";
}

.pap-werkzeug-navigation-mobil.has-active::before {
	-webkit-mask: radial-gradient(circle 32px at var(--pap-nav-position) 0, transparent 31px, #000 32px);
	mask: radial-gradient(circle 32px at var(--pap-nav-position) 0, transparent 31px, #000 32px);
}

.pap-werkzeug-navigation-mobil.has-active::after {
	position: absolute;
	top: -28px;
	left: var(--pap-nav-position);
	z-index: -1;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: #25303b;
	content: "";
	transform: translateX(-50%);
}

.pap-werkzeug-navigation-mobil.has-active.is-position-animiert::before,
.pap-werkzeug-navigation-mobil.has-active.is-position-animiert::after {
	transition: --pap-nav-position 280ms cubic-bezier(0.4, 0, 0.2, 1);
}

.pap-werkzeug-navigation-mobil__punkt {
	position: relative;
	display: block;
	height: 80px;
	min-width: 0;
	padding: 0;
	color: #999;
	color: rgb(194, 194, 194);
	color: var(--pap-dunkel-text);
	font-size: 14px;
	font-weight: 500;
	line-height: 1;
	text-align: center;
	text-decoration: none;
}

.pap-werkzeug-navigation-mobil__punkt.is-inaktiv {
	cursor: default;
}

.pap-werkzeug-navigation-mobil a.pap-werkzeug-navigation-mobil__punkt:hover,
.pap-werkzeug-navigation-mobil a.pap-werkzeug-navigation-mobil__punkt:focus,
.pap-werkzeug-navigation-mobil a.pap-werkzeug-navigation-mobil__punkt:active {
	color: var(--accent);
}

.pap-werkzeug-navigation-mobil a.pap-werkzeug-navigation-mobil__punkt:not(.is-active):hover .pap-werkzeug-navigation-mobil__icon,
.pap-werkzeug-navigation-mobil a.pap-werkzeug-navigation-mobil__punkt:not(.is-active):hover .pap-werkzeug-navigation-mobil__label,
.pap-werkzeug-navigation-mobil a.pap-werkzeug-navigation-mobil__punkt:not(.is-active):focus .pap-werkzeug-navigation-mobil__icon,
.pap-werkzeug-navigation-mobil a.pap-werkzeug-navigation-mobil__punkt:not(.is-active):focus .pap-werkzeug-navigation-mobil__label,
.pap-werkzeug-navigation-mobil a.pap-werkzeug-navigation-mobil__punkt:not(.is-active):active .pap-werkzeug-navigation-mobil__icon,
.pap-werkzeug-navigation-mobil a.pap-werkzeug-navigation-mobil__punkt:not(.is-active):active .pap-werkzeug-navigation-mobil__label {
	color: var(--accent);
}

.pap-werkzeug-navigation-mobil__icon {
	position: absolute;
	top: 10px;
	left: 50%;
	display: grid;
	place-items: center;
	width: 24px;
	height: 24px;
	font-size: 24px;
	line-height: 24px;
	transform: translateX(-50%);
	color: var(--pap-petrol-200);
}

.pap-werkzeug-navigation-mobil__label {
	position: absolute;
	top: 40px;
	left: 0;
	width: 100%;
	/*color: var(--pap-petrol-200);*/
}

.pap-werkzeug-navigation-mobil__punkt.is-active {
	color: var(--accent);
	font-weight: 500;
}

.pap-werkzeug-navigation-mobil__punkt.is-active .pap-werkzeug-navigation-mobil__icon {
	top: -28px;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: transparent;
	color: #de9061;
	font-size: 27px;
	line-height: 56px;
}

.pap-werkzeug-navigation-mobil__punkt.is-active .pap-werkzeug-navigation-mobil__label {
	top: 35px;
	color: #de9061;
}

.pap-werkzeug-navigation-mobil.is-position-animiert
	.pap-werkzeug-navigation-mobil__punkt.is-active
	.pap-werkzeug-navigation-mobil__icon {
	animation: pap-navigation-icon-zum-ziel 280ms
		cubic-bezier(0.4, 0, 0.2, 1) both;
}

.pap-werkzeug-navigation-mobil.is-position-animiert
	.pap-werkzeug-navigation-mobil__punkt.is-active
	.pap-werkzeug-navigation-mobil__label {
	animation: pap-navigation-label-zum-ziel 280ms
		cubic-bezier(0.4, 0, 0.2, 1) both;
}

.pap-werkzeug-navigation-mobil__punkt:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
	border-radius: 10px;
}

body.pap-gitarrentraining-bereich.pap-gp-mobile-navigation:has(.pap-werkzeug-navigation-mobil) {
	padding-bottom: calc(70px + env(safe-area-inset-bottom));
}

@keyframes pap-navigation-icon-zum-ziel {
	0%,
	45% {
		top: 10px;
		width: 24px;
		height: 24px;
		color: rgb(194, 194, 194);
		font-size: 24px;
		line-height: 24px;
	}

	100% {
		top: -28px;
		width: 56px;
		height: 56px;
		color: #de9061;
		font-size: 27px;
		line-height: 56px;
	}
}

@keyframes pap-navigation-label-zum-ziel {
	0%,
	45% {
		top: 40px;
		color: rgb(194, 194, 194);
	}

	100% {
		top: 35px;
		color: #de9061;
	}
}

@media (prefers-reduced-motion: reduce) {
	.pap-werkzeug-navigation-mobil.has-active.is-position-animiert::before,
	.pap-werkzeug-navigation-mobil.has-active.is-position-animiert::after {
		transition: none;
	}

	.pap-werkzeug-navigation-mobil.is-position-animiert
		.pap-werkzeug-navigation-mobil__punkt.is-active
		.pap-werkzeug-navigation-mobil__icon,
	.pap-werkzeug-navigation-mobil.is-position-animiert
		.pap-werkzeug-navigation-mobil__punkt.is-active
		.pap-werkzeug-navigation-mobil__label {
		animation: none;
	}
}