/* ================================================================
   GRT Header
   ================================================================ */

.grt-header {
	background: transparent;
	width: 100%;
	max-width: 100vw;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 100;
	transition: background 0.2s ease, box-shadow 0.2s ease;
}

.admin-bar .grt-header {
	top: 32px;
}

.grt-header.is-scrolled {
	background: var(--color-white, #fff);
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

@media (prefers-reduced-motion: reduce) {
	.grt-header { transition: none; }
}

.grt-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-block: 0.75rem;
	padding-inline: var(--space-dkt-60, 3.75rem);
}

@media (max-width: 768px) {
	.grt-header__inner {
		padding-inline: var(--space-mbl-24, 1.5rem);
	}
}

/* ── Logo link ──────────────────────────────────────────────── */

.grt-header__logo-link {
	display: block;
	flex-shrink: 0;
	line-height: 0;
}

.grt-header__logo-link svg {
	width: auto;
	height: 3.625rem; /* 58px */
	display: block;
}

/* ── Logo colour variants ───────────────────────────────────── */

/* Red variant: red shapes, white text */
.grt-logo--red {
	color: var(--color-brand-red, #e40521);
}
.grt-logo--red .grt-logo__text {
	fill: white;
}

/* White variant: white shapes, red text */
.grt-logo--white {
	color: white;
}
.grt-logo--white .grt-logo__text {
	fill: var(--color-brand-red, #e40521);
}

.grt-header__logo-link.grt-logo--white:hover {
	color: white;
	opacity: 0.75;
}

.grt-header__logo-link:focus-visible {
	outline: 2px solid var(--color-brand-red, #e40521);
	outline-offset: 3px;
	border-radius: 4px;
}

/* ── Hamburger toggle ───────────────────────────────────────── */

.grt-header__menu-toggle {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 3.375rem;
	height: 3.375rem;
	background: var(--color-brand-red, #e40521);
	border: none;
	border-radius: 0.5rem;
	cursor: pointer;
	padding: 0;
	transition: background 0.15s ease;
}

.grt-header__menu-toggle:hover {
	background: var(--color-red-dark, #c0021a);
}

.grt-header__menu-toggle:focus-visible {
	outline: 2px solid var(--color-brand-red, #e40521);
	outline-offset: 3px;
	border-radius: 0.5rem;
}

@media (prefers-reduced-motion: reduce) {
	.grt-header__menu-toggle { transition: none; }
}

.grt-header__hamburger-icon {
	display: block;
	width: 1.75rem;  /* 28px — proportional crop of 54px viewBox */
	height: 1.75rem;
	color: var(--color-white, #fff);
}

/* ── Hide hamburger on desktop ──────────────────────────────── */

@media (min-width: 64rem) {
	.grt-header__menu-toggle { display: none; }
}

/* ================================================================
   GRT Desktop Navigation
   ================================================================ */

.grt-desktop-nav {
	display: none;
}

@media (min-width: 64rem) {
	.grt-desktop-nav {
		display: block;
	}
}

/* ── Pill container ─────────────────────────────────────────── */

.grt-desktop-nav__list {
	list-style: none;
	margin: 0;
	padding: 0.5rem; /* 8px */
	display: flex;
	align-items: center;
	gap: 0.4375rem; /* 7px */
	background: var(--color-white, #fff);
	border-radius: 0.5rem;
	box-shadow: 0 2px 14px rgba(0, 0, 0, 0.05);
}

/* ── Nav items ──────────────────────────────────────────────── */

.grt-desktop-nav__item {
	display: flex;
	align-items: center;
	position: relative;
}

/* ── Shared link / button styles ────────────────────────────── */

.grt-desktop-nav__link,
.grt-desktop-nav__btn {
	display: inline-flex;
	align-items: center;
	gap: 0.75rem;
	height: 2.625rem; /* 42px */
	padding: 0 1.75rem; /* 0 28px */
	border-radius: 4px;
	border: 1px solid transparent;
	background: transparent;
	color: var(--color-brand-red, #e40521);
	font-family: var(--font-family-ui, 'Familjen Grotesk', sans-serif);
	font-weight: var(--font-weight-medium, 500);
	font-size: 1.125rem;
	letter-spacing: 0.05625rem;
	line-height: 1.3;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
}

.grt-desktop-nav__link:hover span,
.grt-desktop-nav__btn:hover span,
.grt-desktop-nav__link:focus-visible span,
.grt-desktop-nav__btn:focus-visible span {
	text-decoration: underline;
	text-decoration-skip-ink: none;
	text-decoration-thickness: 10%;
}

.grt-desktop-nav__link:focus-visible,
.grt-desktop-nav__btn:focus-visible {
	outline: none;
}

/* ── Chevron-only toggle: compact, no text ──────────────────── */

.grt-desktop-nav__btn {
	padding-inline: 0.5rem;
	gap: 0;
}

/* Tighten right padding on the link when followed by a chevron toggle */
.grt-desktop-nav__item:has(.grt-desktop-nav__btn) .grt-desktop-nav__link {
	padding-right: 0.5rem;
}

/* ── Open state ────────────────────────────────────────────── */

.grt-desktop-nav__btn[aria-expanded="true"] {
	border: 1px solid var(--color-brand-red, #e40521);
}

/* ── Dropdown panel ─────────────────────────────────────────── */

.grt-desktop-nav__submenu {
	position: absolute;
	top: calc(100% + 1.4375rem); /* 23px */
	left: 0;
	z-index: 10;
	list-style: none;
	margin: 0;
	padding: 1.125rem 1.5rem; /* 18px 24px */
	min-width: 23.4375rem; /* 375px */
	background: var(--color-white, #fff);
	border-radius: 0.75rem; /* 12px */
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
	display: flex;
	flex-direction: column;
	gap: 0.5rem; /* 8px */
}

.grt-desktop-nav__submenu[hidden] {
	display: none;
}

.grt-desktop-nav__sublink {
	display: block;
	padding: 0.625rem 0; /* 10px 0 */
	color: var(--color-black, #000);
	font-family: var(--font-family-ui, 'Familjen Grotesk', sans-serif);
	font-weight: var(--font-weight-regular, 400);
	font-size: 1.125rem;
	letter-spacing: 0.05625rem;
	line-height: 1.3;
	text-decoration: none;
	white-space: nowrap;
}

.grt-desktop-nav__sublink:hover,
.grt-desktop-nav__sublink:focus-visible {
	text-decoration: underline;
	text-decoration-skip-ink: none;
	text-decoration-thickness: 10%;
}

.grt-desktop-nav__sublink:focus-visible {
	outline: none;
}

/* ── Dropdown chevron ───────────────────────────────────────── */

.grt-desktop-nav__chevron {
	flex-shrink: 0;
	width: 0.6875rem; /* 11px */
	height: auto;
	transition: transform 0.2s ease;
}

.grt-desktop-nav__btn[aria-expanded="true"] .grt-desktop-nav__chevron {
	transform: rotate(180deg);
}

@media (prefers-reduced-motion: reduce) {
	.grt-desktop-nav__chevron { transition: none; }
}

/* ── Icon classes (same pattern as mobile nav) ──────────────── */

.grt-desktop-nav__link.grt-nav-icon-plus::before,
.grt-desktop-nav__link.grt-nav-icon-person::before {
	content: '';
	display: inline-block;
	flex-shrink: 0;
	background-color: currentColor;
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
}

.grt-desktop-nav__link.grt-nav-icon-plus::before {
	width: 10px;
	height: 10px;
	-webkit-mask-image: url('../assets/img/icon-nav-plus.svg');
	mask-image: url('../assets/img/icon-nav-plus.svg');
}

.grt-desktop-nav__link.grt-nav-icon-person::before {
	width: 14px;
	height: 14px;
	-webkit-mask-image: url('../assets/img/icon-nav-person.svg');
	mask-image: url('../assets/img/icon-nav-person.svg');
}


/* ================================================================
   GRT Mobile Navigation Overlay
   ================================================================ */

.grt-mobile-nav {
	max-width: 100vw;
	position: fixed;
	inset: 0;
	z-index: 200;
	background: var(--color-white, #fff);
	display: none;
	overflow: hidden;
}

.grt-mobile-nav.is-open {
	display: block;
}

/* Never show mobile nav on desktop, regardless of JS state */
@media (min-width: 64rem) {
	.grt-mobile-nav { display: none !important; }
}

/* ── Close button ───────────────────────────────────────────── */

.grt-mobile-nav__close {
	position: absolute;
	top: 0.75rem;
	right: 1.5rem;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 3.375rem;
	height: 3.375rem;
	background: var(--color-brand-red, #e40521);
	border: none;
	border-radius: 0.5rem;
	color: var(--color-white, #fff);
	cursor: pointer;
	padding: 0.625rem; /* inset so X doesn't touch edges */
	z-index: 1;
	transition: background 0.15s ease;
}

.grt-mobile-nav__close-icon {
	display: block;
	width: 100%;
	height: 100%;
}

.grt-mobile-nav__close:hover {
	background: var(--color-red-dark, #c0021a);
}

.grt-mobile-nav__close:focus-visible {
	outline: 2px solid var(--color-brand-red, #e40521);
	outline-offset: 3px;
	border-radius: 0.5rem;
}

@media (prefers-reduced-motion: reduce) {
	.grt-mobile-nav__close { transition: none; }
}

/* ── Logo / home link ───────────────────────────────────────── */

.grt-mobile-nav__logo-link {
	position: absolute;
	top: 0.75rem;
	left: 1.5rem;
	display: block;
	line-height: 0;
	z-index: 1;
}

.grt-mobile-nav__logo-link svg {
	width: auto;
	height: 3.625rem; /* 58px — matches desktop header logo */
	display: block;
}

.grt-mobile-nav__logo-link:focus-visible {
	outline: 2px solid var(--color-brand-red, #e40521);
	outline-offset: 3px;
	border-radius: 4px;
}

/* ── Scrollable inner ───────────────────────────────────────── */

.grt-mobile-nav__inner {
	height: 100%;
	overflow-y: auto;
	scrollbar-gutter: stable; /* reserve scrollbar space so opening a dropdown can't narrow the content */
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 6.6rem 1.5rem 3rem; /* 90px top clears close btn */
	gap: 2rem;
}

/* ── Primary nav list ───────────────────────────────────────── */

.grt-mobile-nav__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1.5rem;
	width: 14rem;
}

.grt-mobile-nav__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
}

/* ── Parent row: link + chevron toggle side by side ─────────── */

.grt-mobile-nav__parent-row {
	display: flex;
	align-items: stretch;
	justify-content: center;
	gap: 0.5rem;
	width: 100%;
}

.grt-mobile-nav__parent-row .grt-mobile-nav__dropdown-toggle {
	padding: 0;
	width: 3.25rem;
	flex-shrink: 0;
}

.grt-mobile-nav__parent-row .grt-mobile-nav__link {
	flex: 1 1 auto;
	width: auto;
}

/* ── Dropdown toggle (items with children) ──────────────────── */

.grt-mobile-nav__dropdown-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.75rem;
	padding: 1.0625rem 1.75rem; /* 17px 28px */
	border: 1.5px solid var(--color-brand-red, #e40521);
	border-radius: 4px;
	background: none;
	color: var(--color-brand-red, #e40521);
	font-family: var(--font-family-ui, 'Familjen Grotesk', sans-serif);
	font-weight: var(--font-weight-medium, 500);
	font-size: 1.125rem; /* 18px */
	letter-spacing: 0.05625rem; /* 0.9px */
	line-height: 1.3;
	cursor: pointer;
	white-space: nowrap;
}

.grt-mobile-nav__dropdown-toggle[aria-expanded="true"] {
	border-color: var(--color-red-dark, #c0021a);
	color: var(--color-red-dark, #c0021a);
}

.grt-mobile-nav__dropdown-toggle:focus-visible {
	outline: 2px solid var(--color-brand-red, #e40521);
	outline-offset: 3px;
	border-radius: 4px;
}

.grt-mobile-nav__chevron {
	flex-shrink: 0;
	width: 0.75rem;  /* 12px — matches viewBox width */
	height: auto;
	transition: transform 0.2s ease;
}

.grt-mobile-nav__dropdown-toggle[aria-expanded="true"] .grt-mobile-nav__chevron {
	transform: rotate(180deg);
}

@media (prefers-reduced-motion: reduce) {
	.grt-mobile-nav__chevron { transition: none; }
}

/* ── Submenu ────────────────────────────────────────────────── */

.grt-mobile-nav__submenu {
	list-style: none;
	margin: 0;
	padding: 2rem 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2rem;
	width: fit-content;
	max-width: 100vw;
}

.grt-mobile-nav__submenu[hidden] {
	display: none;
}

.grt-mobile-nav__subitem {
	display: flex;
	justify-content: center;
	width: 80vw;
}

.grt-mobile-nav__sublink {
	color: var(--color-brand-red, #e40521);
	font-family: var(--font-family-ui, 'Familjen Grotesk', sans-serif);
	font-weight: var(--font-weight-regular, 400);
	font-size: 1.125rem;
	letter-spacing: 0.05625rem;
	line-height: 1.3;
	text-decoration: none;
	text-align: center;
}

.grt-mobile-nav__sublink:hover {
	text-decoration: underline;
}

.grt-mobile-nav__sublink:focus-visible {
	outline: 2px solid var(--color-brand-red, #e40521);
	outline-offset: 3px;
	border-radius: 2px;
}

/* ── Regular nav links (leaf items) ────────────────────────── */

.grt-mobile-nav__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.75rem;
	width: 100%;
	box-sizing: border-box;
	padding: 1.0625rem 1.75rem;
	border: 1.5px solid var(--color-brand-red, #e40521);
	border-radius: 4px;
	color: var(--color-brand-red, #e40521);
	font-family: var(--font-family-ui, 'Familjen Grotesk', sans-serif);
	font-weight: var(--font-weight-medium, 500);
	font-size: 1.125rem;
	letter-spacing: 0.05625rem;
	line-height: 1.3;
	text-decoration: none;
	white-space: nowrap;
}

.grt-mobile-nav__link:hover {
	background: rgba(228, 5, 33, 0.05);
}

.grt-mobile-nav__link:focus-visible {
	outline: 2px solid var(--color-brand-red, #e40521);
	outline-offset: 3px;
	border-radius: 4px;
}

.grt-mobile-nav__link-icon {
	flex-shrink: 0;
}

/* ── Social icons (shared partial, mobile nav context) ─────── */

.grt-mobile-nav .grt-footer__social {
	justify-content: center;
	gap: 0.5rem;
}

.grt-mobile-nav .grt-footer__social-icon {
	width: 3.375rem;
	height: 3.375rem;
}

.grt-mobile-nav .grt-footer__social-icon a {
	color: var(--color-brand-red, #e40521);
}


/* ── Legal nav ──────────────────────────────────────────────── */

.grt-mobile-nav__legal-nav {
	margin-top: auto; /* push to bottom */
}

.grt-mobile-nav__legal-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.75rem;
}

.grt-mobile-nav__legal-list li a {
	color: var(--color-brand-red, #e40521);
	font-family: var(--font-family-ui, 'Familjen Grotesk', sans-serif);
	font-weight: var(--font-weight-medium, 500);
	font-size: 1.125rem;
	letter-spacing: 0.05625rem;
	text-decoration: underline;
	text-decoration-skip-ink: none;
}

.grt-mobile-nav__legal-list li a:focus-visible {
	outline: 2px solid var(--color-brand-red, #e40521);
	outline-offset: 3px;
	border-radius: 2px;
}

/* ================================================================
   Mobile nav — icon classes
   Add these as CSS Classes on individual menu items in
   Appearance > Menus to display an icon before the link text.
   Both classes target the <a> element rendered by the walker.

   Usage:
     .grt-mobile-nav__link.grt-nav-icon-plus   → "Partner werden" (+ icon)
     .grt-mobile-nav__link.grt-nav-icon-person  → "Kontakt" (person icon)

   Icon files: assets/img/icon-nav-plus.svg
               assets/img/icon-nav-person.svg

   Recommended pattern using CSS mask-image (follows currentColor):

   .grt-mobile-nav__link.grt-nav-icon-plus::before,
   .grt-mobile-nav__link.grt-nav-icon-person::before {
     content: '';
     display: inline-block;
     flex-shrink: 0;
     background-color: currentColor;
     -webkit-mask-size: contain;
     mask-size: contain;
     -webkit-mask-repeat: no-repeat;
     mask-repeat: no-repeat;
     -webkit-mask-position: center;
     mask-position: center;
   }

   .grt-mobile-nav__link.grt-nav-icon-plus::before {
     width: 10px; height: 10px;
     -webkit-mask-image: url('../assets/img/icon-nav-plus.svg');
     mask-image: url('../assets/img/icon-nav-plus.svg');
   }

   .grt-mobile-nav__link.grt-nav-icon-person::before {
     width: 14px; height: 14px;
     -webkit-mask-image: url('../assets/img/icon-nav-person.svg');
     mask-image: url('../assets/img/icon-nav-person.svg');
   }
   ================================================================ */

.grt-mobile-nav__link.grt-nav-icon-plus::before,
.grt-mobile-nav__link.grt-nav-icon-person::before {
	content: '';
	display: inline-block;
	flex-shrink: 0;
	background-color: currentColor;
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
}

.grt-mobile-nav__link.grt-nav-icon-plus::before {
	width: 10px;
	height: 10px;
	-webkit-mask-image: url('../assets/img/icon-nav-plus.svg');
	mask-image: url('../assets/img/icon-nav-plus.svg');
}

.grt-mobile-nav__link.grt-nav-icon-person::before {
	width: 14px;
	height: 14px;
	-webkit-mask-image: url('../assets/img/icon-nav-person.svg');
	mask-image: url('../assets/img/icon-nav-person.svg');
}

/* ================================================================
   Narrow desktop — tighter nav (1024px–1150px)
   ================================================================ */

@media (min-width: 64rem) and (max-width: 71.875rem) {
	.grt-header__inner {
		padding-inline: 1rem;
	}

	.grt-desktop-nav__list {
		gap: 0;
		padding: 0.5rem 0.25rem;
	}

	.grt-desktop-nav__link,
	.grt-desktop-nav__btn {
		padding-inline: 0.75rem;
	}
}