/* ==========================================================================
   Header
   ========================================================================== */
.g-header {
	position: fixed; inset: 0 0 auto 0; z-index: 9100;
	height: var(--g-header-h);
	display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
	padding: 0 var(--g-gutter);
	color: var(--wp--preset--color--contrast);
	transition: background-color var(--g-base) var(--g-ease), backdrop-filter var(--g-base) var(--g-ease), transform .5s var(--g-ease);
}
.admin-bar .g-header { top: var(--wp-admin--admin-bar--height, 32px); }
.g-header.is-scrolled {
	background: color-mix(in srgb, var(--wp--preset--color--base) 72%, transparent);
	-webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
.g-header.is-hidden { transform: translateY(-110%); }
html.g-menu-open .g-header { background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; transform: none; }

.g-header__brand { display: inline-flex; align-items: center; gap: .65rem; color: inherit; text-decoration: none; justify-self: start; }
.g-header__logo { width: 26px; height: 26px; color: var(--wp--preset--color--accent); transition: transform .9s var(--g-ease); }
.g-header__brand:hover .g-header__logo { transform: rotate(-180deg); }
.g-header__word { font-family: var(--wp--preset--font-family--display); font-size: var(--wp--preset--font-size--m); letter-spacing: .12em; }

.g-header__nav ul { display: flex; gap: var(--wp--preset--spacing--30); list-style: none; margin: 0; padding: 0; }
.g-header__nav a {
	position: relative; display: block; padding: .5rem 0;
	font-family: var(--wp--preset--font-family--body); font-size: .98rem; font-weight: 500;
	color: color-mix(in srgb, var(--wp--preset--color--contrast) 55%, transparent); text-decoration: none;
	transition: color var(--g-fast) var(--g-ease);
}
.g-header__nav a:hover, .g-header__nav a[aria-current] { color: var(--wp--preset--color--contrast); }
.g-header__nav a[aria-current]::after {
	content: ""; position: absolute; left: 50%; bottom: -.1rem; width: 4px; height: 4px; border-radius: 50%;
	background: var(--wp--preset--color--accent); transform: translateX(-50%);
}

.g-header__tools { justify-self: end; display: flex; align-items: center; gap: var(--wp--preset--spacing--10); }

.g-header__tools .wc-block-mini-cart__button,
.g-header__cart-summary {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	min-height: 42px;
	padding: .4rem .7rem;
	border: 1px solid color-mix(in srgb, currentColor 22%, transparent);
	border-radius: 999px;
	background: transparent;
	color: inherit;
	font: 500 .75rem var(--wp--preset--font-family--mono);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
	text-decoration: none;
}
.g-header__tools .wc-block-mini-cart__button:hover,
.g-header__cart-summary:hover { border-color: currentColor; opacity: 1; }
.g-header__tools .wc-block-mini-cart__tax-label { display: none; }
.g-header__tools .wc-block-mini-cart__quantity-badge { gap: .5rem; }
.g-header__tools .wc-block-mini-cart__badge {
	position: static;
	margin-left: 0;
	transform: none;
}
.g-header__tools .wc-block-mini-cart__badge,
.g-header__cart-count {
	min-width: 1.25rem;
	padding: .15rem .25rem;
	border-radius: 999px;
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--accent-ink);
	text-align: center;
}
html.g-menu-open .g-header__mini-cart,
html.g-menu-open .g-header__cart-summary { visibility: hidden; }

.wc-block-components-drawer.wc-block-mini-cart__drawer {
	background: var(--wp--preset--color--base-2);
	color: var(--wp--preset--color--contrast);
	border-inline-start: 1px solid var(--wp--preset--color--line);
}
.wc-block-mini-cart__drawer .wc-block-mini-cart__title {
	font-family: var(--wp--preset--font-family--display);
}
.wc-block-mini-cart__drawer .wc-block-mini-cart__footer {
	background: var(--wp--preset--color--surface);
}
.wc-block-mini-cart__drawer .wc-block-mini-cart__footer-actions a {
	border: 1px solid currentColor;
	text-decoration: none;
}
.wc-block-mini-cart__drawer .wc-block-mini-cart__footer-checkout,
.wc-block-mini-cart__drawer .wc-block-mini-cart__shopping-button {
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--accent-ink);
}

/* Burger */
.g-burger {
	display: inline-flex; align-items: center; gap: .7rem; padding: .45rem .5rem .45rem .9rem; border-radius: 999px;
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast) 22%, transparent);
	background: transparent; color: inherit; cursor: pointer;
	font-family: var(--wp--preset--font-family--mono); font-size: var(--wp--preset--font-size--s); letter-spacing: .14em; text-transform: uppercase;
	transition: border-color var(--g-fast), background-color var(--g-fast), color var(--g-fast);
}
.g-burger:hover { border-color: var(--wp--preset--color--accent); }
.g-burger__icon { position: relative; width: 26px; height: 26px; border-radius: 50%; background: var(--wp--preset--color--accent); display: block; }
.g-burger__icon i { position: absolute; left: 7px; right: 7px; height: 1.5px; background: var(--wp--preset--color--accent-ink); transition: transform .5s var(--g-ease); }
.g-burger__icon i:nth-child(1) { top: 10px; }
.g-burger__icon i:nth-child(2) { top: 14.5px; }
.g-burger[aria-expanded="true"] .g-burger__icon i:nth-child(1) { transform: translateY(2.25px) rotate(45deg); }
.g-burger[aria-expanded="true"] .g-burger__icon i:nth-child(2) { transform: translateY(-2.25px) rotate(-45deg); }

/* ==========================================================================
   Vollbild-Menü
   ========================================================================== */
.g-menu { position: fixed; inset: 0; z-index: 9050; color: var(--wp--preset--color--contrast); }
.g-menu[hidden] { display: none; }
.g-menu__bg {
	position: absolute; inset: 0;
	background:
		radial-gradient(60% 60% at var(--ox, 90%) var(--oy, 5%), color-mix(in srgb, var(--wp--preset--color--contrast) 6%, transparent), transparent 70%),
		var(--wp--preset--color--base-2);
	clip-path: circle(0 at var(--ox, 90%) var(--oy, 5%));
	transition: clip-path .9s cubic-bezier(.76, 0, .24, 1);
}
.g-menu.is-open .g-menu__bg { clip-path: circle(150% at var(--ox, 90%) var(--oy, 5%)); }
.g-menu.is-closing .g-menu__bg { transition-duration: .6s; }

.g-menu__inner {
	position: relative; height: 100%;
	display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); align-items: end; gap: var(--wp--preset--spacing--40);
	padding: calc(var(--g-header-h) + var(--wp--preset--spacing--40)) var(--g-gutter) var(--wp--preset--spacing--40);
	overflow-y: auto;
	opacity: 0;
	transition: opacity .35s var(--g-ease);
}
.g-menu.is-content-visible .g-menu__inner { opacity: 1; }
.g-menu__nav { min-width: 0; container-type: inline-size; }
.g-menu__nav ol { list-style: none; margin: 0; padding: 0; }
.g-menu__nav li { border-top: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast) 16%, transparent); }
.g-menu__nav li:last-child { border-bottom: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast) 16%, transparent); }
.g-menu__nav a {
	display: grid; grid-template-columns: max-content minmax(0, 1fr); align-items: center;
	gap: var(--wp--preset--spacing--20); padding-block: max(.625rem, var(--wp--preset--spacing--10));
	color: inherit; text-decoration: none;
	font-family: var(--wp--preset--font-family--display); text-transform: uppercase;
	font-size: clamp(1.125rem, 4vw, 2.5rem);
	font-size: clamp(1.125rem, 10cqi, 2.5rem); line-height: 1.2; letter-spacing: -.01em;
}
.g-menu__num { font-family: var(--wp--preset--font-family--mono); font-size: var(--wp--preset--font-size--s); letter-spacing: .1em; color: var(--wp--preset--color--contrast-2); align-self: center; }
.g-menu__nav .g-line {
	min-width: 0; overflow-wrap: anywhere;
	padding: .08em .3em .14em .04em; margin: 0;
}
.g-menu__nav .g-line > span { transform: translateY(105%); transition: transform .5s var(--g-ease), opacity .35s var(--g-ease); }
.g-menu.is-content-visible .g-menu__nav .g-line > span { transform: none; transition-delay: calc(var(--i) * 70ms), 0s; }
.g-menu.is-closing .g-menu__nav .g-line > span { transform: translateY(-105%); transition-duration: .35s; }
/* Schwarz/Weiß: Hover hebt hervor, indem die anderen Einträge zurücktreten */
.g-menu__nav ol:hover a:not(:hover) .g-line > span { opacity: .28; }
.g-menu__nav a[aria-current] .g-menu__num::after { content: " ●"; color: var(--wp--preset--color--contrast); }
.g-menu.is-content-visible .g-menu__nav a:hover .g-line > span { transform: translateX(.15em); transition-delay: 0s; }

.g-menu__aside { display: grid; gap: var(--wp--preset--spacing--30); align-content: end; overflow-wrap: anywhere; opacity: 0; filter: blur(8px); transform: translateY(14px); transition: opacity .5s var(--g-ease), filter .5s var(--g-ease), transform .5s var(--g-ease); }
.g-menu.is-content-visible .g-menu__aside { opacity: 1; filter: none; transform: none; }
.g-menu.is-closing .g-menu__aside { transition-duration: .35s; }
.g-menu__tag { margin: 0; font-size: var(--wp--preset--font-size--m); line-height: 1.35; max-width: 24ch; color: var(--wp--preset--color--contrast-2); }
.g-menu__social { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--wp--preset--spacing--10); }
.g-menu__social a, .g-menu__mail {
	font-family: var(--wp--preset--font-family--mono); font-size: var(--wp--preset--font-size--s); letter-spacing: .1em; text-transform: uppercase;
	color: inherit; text-decoration: none;
}
.g-menu__social a, .g-menu__mail { color: var(--wp--preset--color--contrast-2) !important; transition: color var(--g-fast); }
.g-menu__social a:hover, .g-menu__mail:hover { color: var(--wp--preset--color--contrast) !important; }
.g-menu__social a:hover .g-arrow { transform: translate(2px, -2px); }

@media (prefers-reduced-motion: reduce) {
	.g-menu.is-content-visible .g-menu__nav .g-line > span { transition-delay: 0s; }
}

@media (max-width: 950px) {
	.g-header { grid-template-columns: 1fr auto; }
	.g-header__nav { display: none; }
	.g-header__word { display: none; }
	.g-burger__label { display: none; }
	.g-burger { padding: .35rem; }
	.g-menu__inner { grid-template-columns: minmax(0, 1fr); align-items: start; align-content: space-between; }
}
