/* Recreated after asset loss (2026-09-06); original custom overrides could not be recovered. */

/* The logo image (110px, set inline in the markup) is taller than the
   template's default 60px header row. On screens wide enough for the
   full nav (tablet/desktop) give the header more room and scale the logo
   down a bit, so both fit inside the header's own background instead of
   the logo/nav overflowing into the hero section below and the nav
   ending up bottom-aligned against that seam instead of centered. */
@media (min-width: 768px) {
	#sp-header {
		height: 96px;
	}

	#sp-header .logo,
	#sp-header .logo-image {
		height: 72px;
	}
}

/* On narrow screens the template caps #sp-header at 60px/50px; scale the
   logo down to match so it no longer overlaps the content below it. */
@media (max-width: 767.98px) {
	#sp-header .logo,
	#sp-header .logo-image {
		height: 60px;
	}
}

@media (max-width: 575.98px) {
	#sp-header .logo,
	#sp-header .logo-image {
		height: 50px;
	}
}

/* ---------------------------------------------------------------- */
/* Offcanvas (burger) menu                                           */
/* ---------------------------------------------------------------- */

/* The dimmed backdrop is positioned relative to #sp-header, which is
   only ~50-60px tall, so it only ever darkens a thin strip at the top
   instead of the page behind the slide-in panel. Anchor it to the
   viewport like the panel itself. */
.offcanvas-overlay {
	position: fixed;
}

.offcanvas-menu {
	box-shadow: -8px 0 30px rgba(0, 0, 0, 0.2);
}

/* The panel reuses the desktop mega-menu markup/classes
   (ul.sp-megamenu-parent, li.sp-menu-item), which are styled for a
   horizontal top bar (float:right, inline-block items) and wrap into a
   ragged, hard-to-read block once dropped into the slide-in panel.
   Re-lay it out as a clean vertical list. */
.offcanvas-menu .sp-megamenu-parent {
	display: flex;
	flex-direction: column;
	float: none;
	width: 100%;
	margin: 0;
	padding: 0;
}

.offcanvas-menu .sp-megamenu-parent > li {
	display: block;
	width: 100%;
	border-bottom: 1px solid rgba(37, 37, 37, 0.08);
}

.offcanvas-menu .sp-megamenu-parent > li > a {
	display: block;
	width: 100%;
	padding: 14px 0;
	line-height: 1.3;
	font-size: 18px;
	font-weight: 600;
	color: #252525;
}

.offcanvas-menu .sp-megamenu-parent > li.active > a {
	color: #33526f;
}

/* Felix / Theresa / Susanne are flattened children of "Community" in
   this list; indent and de-emphasize them so the hierarchy still reads
   without the nested dropdown markup used on desktop. */
.offcanvas-menu .sp-megamenu-parent > li:nth-child(n + 5) {
	border-bottom: none;
	padding-left: 12px;
}

.offcanvas-menu .sp-megamenu-parent > li:nth-child(5) {
	margin-top: 2px;
}

.offcanvas-menu .sp-megamenu-parent > li:nth-child(n + 5) > a {
	padding: 8px 0;
	font-size: 15px;
	font-weight: 400;
	opacity: 0.75;
}

/* The close ("x") link doesn't carry the template's .close-offcanvas
   class, so it renders unstyled and inline with the first menu item. */
#offcanvas-close {
	position: absolute;
	top: 18px;
	right: 18px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	font-size: 22px;
	line-height: 1;
	color: #252525;
	background: rgba(37, 37, 37, 0.06);
	transition: background-color 0.2s ease;
}

#offcanvas-close:hover {
	background: rgba(37, 37, 37, 0.12);
}

.offcanvas-menu .offcanvas-inner {
	padding-top: 70px;
}

#cookie-consent {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 9999;
	display: flex;
	justify-content: center;
	padding: 16px;
	transform: translateY(120%);
	transition: transform .3s ease;
	pointer-events: none;
}
#cookie-consent.cookie-consent--visible {
	transform: translateY(0);
	pointer-events: auto;
}
.cookie-consent__card {
	max-width: 640px;
	width: 100%;
	background: #223027;
	color: #fff;
	border-radius: 10px;
	padding: 18px 22px;
	box-shadow: 0 6px 24px rgba(0,0,0,.25);
	display: flex;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
}
.cookie-consent__icon { font-size: 24px; }
.cookie-consent__text { flex: 1 1 260px; margin: 0; font-size: 14px; line-height: 1.5; }
.cookie-consent__text a { color: #b7d6a8; text-decoration: underline; }
.cookie-consent__actions { display: flex; gap: 10px; }
.cookie-consent__actions button {
	border: none;
	border-radius: 6px;
	padding: 8px 16px;
	font-size: 14px;
	cursor: pointer;
}
.cookie-consent__reject { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.4) !important; }
.cookie-consent__accept { background: #7a8b6f; color: #fff; }