/* ==========================================================================
   KnowListic · Öffentlicher Header
   Wird ausschließlich für nicht eingeloggte Besucher geladen.
   ========================================================================== */

.wachapp-public-header {
	position: relative;
	z-index: 1030;
	background:
		linear-gradient(135deg, rgba(var(--bs-body-bg-rgb), 0.98), rgba(var(--bs-tertiary-bg-rgb), 0.94));
	box-shadow: 0 0.7rem 2rem rgba(0, 0, 0, 0.06);
	backdrop-filter: blur(18px);
	-webkit-backdrop-filter: blur(18px);
}

.wachapp-public-header::after {
	position: absolute;
	right: 0;
	bottom: -1px;
	left: 0;
	height: 1px;
	background: linear-gradient(90deg, transparent, rgba(var(--bs-primary-rgb), 0.42), rgba(var(--bs-info-rgb), 0.32), transparent);
	content: "";
	pointer-events: none;
}

.wachapp-public-brand {
	min-width: 0;
	color: var(--bs-body-color);
	text-decoration: none;
}

.wachapp-public-brand:hover,
.wachapp-public-brand:focus-visible {
	color: var(--bs-body-color);
}

.wachapp-public-brand-mark {
	display: inline-grid;
	flex: 0 0 auto;
	width: 2.75rem;
	height: 2.75rem;
	overflow: hidden;
	border: 1px solid rgba(var(--bs-primary-rgb), 0.24);
	border-radius: 0.95rem;
	color: var(--bs-primary-text-emphasis);
	background:
		linear-gradient(145deg, rgba(var(--bs-primary-rgb), 0.2), rgba(var(--bs-info-rgb), 0.18));
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.22),
		0 0.75rem 1.8rem rgba(var(--bs-primary-rgb), 0.12);
	font-size: 1.25rem;
	place-items: center;
}

.wachapp-public-brand-mark img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.wachapp-public-brand-copy {
	display: flex;
	min-width: 0;
	flex-direction: column;
	line-height: 1.1;
}

.wachapp-public-brand-copy strong {
	font-size: 1rem;
	letter-spacing: -0.015em;
}

.wachapp-public-brand-copy small {
	margin-top: 0.25rem;
	color: var(--bs-secondary-color);
	font-size: 0.68rem;
	font-weight: 650;
	white-space: nowrap;
}

.wachapp-public-nav-link {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.62rem 0.78rem !important;
	border: 1px solid transparent;
	border-radius: 0.85rem;
	color: var(--bs-secondary-color);
	font-size: 0.84rem;
	font-weight: 700;
	transition:
		color 0.18s ease,
		background-color 0.18s ease,
		border-color 0.18s ease,
		transform 0.18s ease;
}

.wachapp-public-nav-link i {
	font-size: 0.9rem;
}

.wachapp-public-nav-link:hover,
.wachapp-public-nav-link:focus-visible,
.wachapp-public-nav-link.is-active {
	border-color: rgba(var(--bs-primary-rgb), 0.16);
	color: var(--bs-body-color);
	background: rgba(var(--bs-primary-rgb), 0.08);
	transform: translateY(-1px);
}

.wachapp-public-nav-link.is-active {
	color: var(--bs-primary-text-emphasis);
}

.wachapp-public-nav-badge {
	padding: 0.2rem 0.38rem;
	border-radius: 999px;
	color: #fff;
	background: linear-gradient(135deg, var(--bs-primary), var(--bs-info));
	font-size: 0.54rem;
	font-weight: 850;
	letter-spacing: 0.06em;
	line-height: 1;
	text-transform: uppercase;
}

.wachapp-public-login,
.wachapp-public-menu-button {
	min-height: 2.65rem;
	border-radius: 0.85rem;
	font-weight: 750;
}

.wachapp-public-login {
	box-shadow: 0 0.75rem 1.8rem rgba(var(--bs-primary-rgb), 0.18);
}

.wachapp-public-menu-button {
	min-width: 2.65rem;
}

.wachapp-public-offcanvas {
	--bs-offcanvas-width: min(94vw, 430px);
	display: flex;
	height: 100vh;
	height: 100dvh;
	max-height: 100vh;
	max-height: 100dvh;
	flex-direction: column;
	overflow: hidden;
}

html.wachapp-public-offcanvas-open,
body.wachapp-public-offcanvas-open {
	overflow: hidden !important;
	overscroll-behavior: none;
}

.wachapp-public-offcanvas .offcanvas-header {
	flex: 0 0 auto;
}

.wachapp-public-offcanvas-body {
	min-width: 0;
	min-height: 0;
	flex: 1 1 auto;
	overflow-x: hidden !important;
	overflow-y: auto !important;
	overscroll-behavior-x: none;
	overscroll-behavior-y: contain;
	-webkit-overflow-scrolling: touch;
	scrollbar-gutter: stable;
}

.wachapp-public-offcanvas-hero,
.wachapp-public-offcanvas-nav,
.wachapp-public-offcanvas-actions {
	flex: 0 0 auto;
}

.wachapp-public-offcanvas-nav {
	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
	padding-inline-start: max(1rem, var(--safe-area-inset-left, env(safe-area-inset-left, 0px))) !important;
	padding-inline-end: max(1.25rem, calc(1rem + var(--safe-area-inset-right, env(safe-area-inset-right, 0px)))) !important;
}

.wachapp-public-offcanvas-link {
	box-sizing: border-box;
	width: 100%;
	min-width: 0;
}

.wachapp-public-offcanvas-actions {
	box-sizing: border-box;
	width: 100%;
	padding-right: max(1rem, calc(1rem + var(--safe-area-inset-right, env(safe-area-inset-right, 0px)))) !important;
	padding-bottom: max(1rem, var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px))) !important;
	padding-left: max(1rem, var(--safe-area-inset-left, env(safe-area-inset-left, 0px))) !important;
}

.wachapp-public-offcanvas .offcanvas-header {
	padding: 1.25rem;
	background:
		linear-gradient(145deg, rgba(var(--bs-primary-rgb), 0.08), rgba(var(--bs-info-rgb), 0.04));
}

.wachapp-public-offcanvas-kicker {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	margin-bottom: 0.45rem;
	color: var(--bs-primary-text-emphasis);
	font-size: 0.68rem;
	font-weight: 850;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.wachapp-public-offcanvas-hero {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	padding: 1.35rem;
	border: 1px solid rgba(255, 255, 255, 0.13);
	border-radius: 1.4rem;
	color: #fff;
	background:
		linear-gradient(145deg, rgba(16, 24, 48, 0.97), rgba(44, 35, 96, 0.94));
	box-shadow: 0 1.15rem 2.8rem rgba(0, 0, 0, 0.2);
}

.wachapp-public-offcanvas-hero-glow {
	position: absolute;
	z-index: -1;
	top: -4rem;
	right: -3rem;
	width: 11rem;
	height: 11rem;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(118, 240, 155, 0.48), rgba(93, 105, 255, 0.22) 48%, transparent 72%);
	filter: blur(10px);
}

.wachapp-public-offcanvas-hero-icon {
	display: grid;
	width: 2.7rem;
	height: 2.7rem;
	margin-bottom: 1rem;
	border: 1px solid rgba(255, 255, 255, 0.18);
	border-radius: 0.9rem;
	color: #0e1728;
	background: linear-gradient(135deg, #f8e86c, #67efb0);
	box-shadow: 0 0.75rem 1.8rem rgba(70, 224, 145, 0.22);
	font-size: 1.15rem;
	place-items: center;
}

.wachapp-public-offcanvas-hero p:last-child {
	color: rgba(255, 255, 255, 0.72);
	line-height: 1.55;
}

.wachapp-public-offcanvas-nav {
	display: grid;
	gap: 0.55rem;
}

.wachapp-public-offcanvas-link {
	display: flex;
	align-items: center;
	gap: 0.9rem;
	padding: 0.85rem;
	border: 1px solid rgba(var(--bs-body-color-rgb), 0.1);
	border-radius: 1rem;
	color: var(--bs-body-color);
	background: rgba(var(--bs-tertiary-bg-rgb), 0.58);
	text-decoration: none;
	transition:
		transform 0.18s ease,
		border-color 0.18s ease,
		background-color 0.18s ease,
		box-shadow 0.18s ease;
}

.wachapp-public-offcanvas-link:hover,
.wachapp-public-offcanvas-link:focus-visible,
.wachapp-public-offcanvas-link.is-active {
	border-color: rgba(var(--bs-primary-rgb), 0.32);
	color: var(--bs-body-color);
	background: rgba(var(--bs-primary-rgb), 0.09);
	box-shadow: 0 0.8rem 1.8rem rgba(var(--bs-primary-rgb), 0.08);
	transform: translateX(0.18rem);
}

.wachapp-public-offcanvas-link-icon {
	display: grid;
	flex: 0 0 auto;
	width: 2.55rem;
	height: 2.55rem;
	border-radius: 0.85rem;
	color: var(--bs-primary-text-emphasis);
	background: linear-gradient(145deg, rgba(var(--bs-primary-rgb), 0.16), rgba(var(--bs-info-rgb), 0.12));
	font-size: 1.05rem;
	place-items: center;
}

.wachapp-public-offcanvas-link-copy {
	min-width: 0;
	overflow: hidden;
}

.wachapp-public-offcanvas-link-copy > .d-flex {
	min-width: 0;
}

.wachapp-public-offcanvas-link small {
	display: block;
	margin-top: 0.18rem;
	overflow: hidden;
	color: var(--bs-secondary-color);
	font-size: 0.7rem;
	line-height: 1.35;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.wachapp-public-offcanvas-link-arrow {
	flex: 0 0 auto;
	margin-left: auto;
	color: var(--bs-secondary-color);
	font-size: 0.8rem;
}

@media (max-width: 1199.98px) {
	.wachapp-public-brand-copy small {
		display: none;
	}

	.wachapp-public-nav-link {
		padding-inline: 0.58rem !important;
		font-size: 0.78rem;
	}
}

@media (max-width: 575.98px) {
	.wachapp-public-brand {
		gap: 0.65rem !important;
	}

	.wachapp-public-brand-mark {
		width: 2.45rem;
		height: 2.45rem;
		border-radius: 0.8rem;
	}

	.wachapp-public-brand-copy strong {
		font-size: 0.9rem;
	}

}



@media (prefers-reduced-motion: reduce) {
	.wachapp-public-nav-link,
	.wachapp-public-offcanvas-link {
		transition: none;
	}
}