/* ============================================================
   Header & Navigation
   Eigenständige Implementierung (ohne getwid-base Abhängigkeit)
   ============================================================ */

/* --- Pseudo-Element aus getwid-base deaktivieren --- */
.primary-menu-wrapper::after {
	display: none !important;
}

/* --- Header-Grundstruktur --- */
.masthead-fixed {
	background: var(--basic-color-4); /* weiß – Standard */
	position: relative;
	z-index: 100;
	border-bottom: 2px solid var(--basic-color-5);
}

@media (max-width: 991px) {
	/* Mobil: grüner Header */
	.masthead-fixed {
		background: var(--basic-color-1);
		border-bottom: none;
	}
}

@media (min-width: 992px) {
	.masthead-fixed {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 2000; /* über dem Such-Modal (1100) */
	}

	body {
		margin-top: 5.5rem;
	}

	#vp-header-overlay {
		margin-top: 5.5rem;
	}
}

#masthead.site-header {
	max-width: var(--vp-max-width);
	margin: 0 auto;
	padding: 0.875rem 2.5rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
}

/* --- Logo --- */
.site-branding {
	display: flex;
	align-items: center;
	flex: 0 0 auto;
}

.custom-logo-link {
	display: block;
	line-height: 0;
}

#masthead.site-header img.custom-logo {
	max-width: 150px;
	height: auto;
}

.site-title {
	margin: 0;
	font-size: 1rem;
	color: var(--basic-color-1);
}

@media (max-width: 991px) {
	.site-title { color: var(--basic-color-4); }
}

.site-title a {
	color: inherit;
	text-decoration: none;
}

.site-description {
	display: none;
}

/* --- Hamburger-Button (mobil) --- */
.menu-toggle {
	display: block;
	background: transparent;
	border: none;
	cursor: pointer;
	color: var(--basic-color-1);
	font-size: 1.5rem;
	padding: 0.5rem;
	line-height: 1;
}

.menu-toggle .icon-cross { display: none; }
.menu-toggle[aria-expanded="true"] .icon-cross { display: block; }
.menu-toggle[aria-expanded="true"] .icon-menu  { display: none; }

@media (min-width: 992px) {
	.menu-toggle { display: none; }
}

/* Grüner Mobil-Header: Logo + Hamburger müssen hell sein, sonst grün-auf-grün = unsichtbar.
   (Diese Regeln stehen NACH der Basis-Definition, damit die Farbe gewinnt.) */
@media (max-width: 991px) {
	.menu-toggle {
		color: var(--basic-color-4);
		position: relative;
		z-index: 1000; /* über dem Vollbild-Overlay (z-index 999), damit das „X" klickbar bleibt */
	}
	#masthead.site-header img.custom-logo {
		filter: brightness(0) invert(1); /* einfarbiges Logo → weiß */
	}
}

/* --- Haupt-Navigation --- */
.main-navigation-wrapper {
	display: flex;
	align-items: center;
	flex: 1 1 auto;
	justify-content: flex-end;
}

/* Mobil: Navigation versteckt bis toggled */
.primary-menu-wrapper {
	width: 100%;
}

.main-navigation:not(.toggled) .primary-menu-wrapper {
	display: none;
}

@media (min-width: 992px) {
	.main-navigation .primary-menu-wrapper,
	.main-navigation:not(.toggled) .primary-menu-wrapper {
		display: block;
	}
}

/* Mobil: Navigation über Vollbild */
@media (max-width: 991px) {
	.main-navigation.toggled .primary-menu-wrapper {
		display: block;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: var(--basic-color-1);
		z-index: 999;
		padding: 5rem 2rem 2rem;
		overflow-y: auto;
	}
}

/* --- Menü-Liste --- */
.primary-menu {
	display: flex;
	align-items: center;
	list-style: none;
	margin: 0;
	padding: 0;
	gap: 0;
}

@media (max-width: 991px) {
	.primary-menu {
		flex-direction: column;
		align-items: flex-start;
		gap: 0;
	}
}

.primary-menu > li > a {
	display: block;
	padding: 0.5rem 0.2rem 0.5rem 0.875rem;
	color: var(--basic-color-1);
	text-decoration: none;
	font-size: 0.9375rem;
	font-weight: 700;
	white-space: nowrap;
	transition: color 0.2s;
}

@media (max-width: 991px) {
	.primary-menu > li > a { color: var(--basic-color-4); }
}

.primary-menu > li > a:hover,
.primary-menu > li.current-menu-item > a {
	color: var(--basic-color-2);
}

/* --- Dropdown-Toggle-Button (Pfeil nach unten) --- */
.dropdown-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	border: none;
	cursor: pointer;
	padding: 0.4rem 0.2rem 0.4rem 0.15rem;
	color: inherit;
	vertical-align: middle;
	transition: transform 0.2s;
}

.dropdown-toggle.toggled-on {
	transform: rotate(180deg);
}

@media (min-width: 992px) {
	.dropdown-toggle {
		color: var(--basic-color-1);
	}
}

@media (max-width: 991px) {
	.dropdown-toggle {
		color: var(--basic-color-4);
		padding: 0.5rem;
	}
}

/* --- Sub-Menü (Dropdown) --- */
.primary-menu li {
	position: relative;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
}

/* Link und Pfeil auf einer Linie */
.primary-menu > li > a,
.primary-menu > li > .dropdown-toggle {
	flex: 0 0 auto;
}

.primary-menu .sub-menu {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 220px;
	background: #fff;
	list-style: none;
	margin: 0;
	padding: 1rem 0;
	z-index: 100;
	border-top: 2px solid var(--basic-color-5);
	box-shadow: 2px 5px 43px 0 rgba(138, 164, 181, 0.28);
}

.primary-menu li:hover > .sub-menu,
.primary-menu li:focus-within > .sub-menu,
.primary-menu .sub-menu.toggled-on {
	display: block;
}

.primary-menu .sub-menu a {
	display: block;
	padding: 0.45rem 1.25rem;
	color: var(--basic-color-3);
	text-decoration: none;
	font-size: 0.9rem;
	font-weight: 400;
	white-space: nowrap;
	transition: color 0.15s, padding-left 0.15s;
}

.primary-menu .sub-menu a:hover {
	color: var(--basic-color-1);
	padding-left: 1.6rem;
}

@media (max-width: 991px) {
	.primary-menu .sub-menu {
		position: static;
		background: rgba(255,255,255,.08);
		box-shadow: none;
		padding: 0;
		top: auto;
		flex-basis: 100%; /* eigene Zeile unter Link + Pfeil, nicht daneben (li ist Flexbox mit Umbruch) */
	}

	.primary-menu .sub-menu a {
		color: var(--basic-color-4);
		padding: 0.4rem 1rem 0.4rem 2rem;
	}

	.primary-menu .sub-menu a:hover {
		padding-left: 2.2rem;
		color: var(--basic-color-2);
	}

	/* Mobil öffnet nur der Pfeil. :focus-within muss mit aus: Chromium fokussiert den angetippten Pfeil, nach dem
	   Schließen klappte das Untermenü beim nächsten Tipp (Hover wandert weg, Fokus bleibt) wieder auf, schob den
	   nächsten Pfeil nach unten, und der Tipp traf einen Link darin — jedes zweite Untermenü blieb zu. */
	.primary-menu li:hover > .sub-menu,
	.primary-menu li:focus-within > .sub-menu {
		display: none;
	}

	/* Gleich schwer wie die :hover-Regel darüber und später — sonst bleibt das per Pfeil
	   geöffnete Untermenü zu, weil das angetippte li im Hover-Zustand ist. Das Skript
	   (js/functions.js) setzt toggled-on am .sub-menu, nicht am li. */
	.primary-menu li.toggled-on > .sub-menu,
	.primary-menu li > .sub-menu.toggled-on {
		display: block;
	}
}

/* --- Mobile Suchformular: nur auf Mobilgeräten sichtbar --- */
.mobile-search-form-wrapper {
	display: none;
}

@media (max-width: 991px) {
	.mobile-search-form-wrapper {
		display: block;
		padding: 1rem 0;
	}
}

/* --- Suche Toggle (nur Desktop) --- */
.search-toggle {
	display: none;
	background: transparent;
	border: none;
	cursor: pointer;
	color: var(--basic-color-1); /* grün auf weißem Desktop-Header */
	font-size: 1.25rem;
	padding: 0.5rem;
	margin-left: 0.5rem;
}

@media (min-width: 992px) {
	.search-toggle { display: block; }
}

.search-toggle:hover { color: var(--basic-color-2); }

/* --- Verwaltung im Header (nur Admins/Redakteure/Autoren) --- */
.vp-admin-menu {
	display: inline-flex;
	align-items: center;
	color: var(--basic-color-1);
	padding: 0.5rem;
	margin-left: 0.25rem;
	line-height: 0;
}
.vp-admin-menu:hover { color: var(--basic-color-2); }

/* --- Warenkorb im Header (rechts, immer sichtbar) --- */
.vp-cart-menu {
	position: relative;
	display: inline-flex;
	align-items: center;
	color: var(--basic-color-1);
	padding: 0.5rem;
	margin-left: 0.25rem;
	line-height: 0;
}
.vp-cart-menu:hover { color: var(--basic-color-2); }
.vp-cart-count {
	position: absolute;
	top: 0;
	right: 0;
	min-width: 1.1rem;
	height: 1.1rem;
	padding: 0 0.2rem;
	box-sizing: border-box;
	background: var(--basic-color-1);
	color: #fff;
	border-radius: 0.55rem;
	font-size: 0.7rem;
	font-weight: 700;
	line-height: 1.1rem;
	text-align: center;
}

/* --- Such-Modal ---
   Kreisanimation: startet als Punkt am Suchbutton (oben rechts)
   und expandiert nach links-unten über den ganzen Bildschirm.
   Ursprung: calc(100% - 2.5rem) = x-Position des Suchbuttons
             2.5rem               = y-Position (Mitte der Header-Leiste)
   ----------------------------------------------------------------- */
.search-modal {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1100;
	background: rgba(242, 249, 253, 0.98);
	padding: 2rem;
	/* Startpunkt: Kreis mit Radius 0 am Suchbutton */
	clip-path: circle(0% at calc(100% - 2.5rem) 2.5rem);
	pointer-events: none;
	transition: clip-path 0.65s cubic-bezier(0.4, 0, 0.2, 1);
}

.search-modal.opened {
	/* Kreis wächst bis er alles abdeckt */
	clip-path: circle(150% at calc(100% - 2.5rem) 2.5rem);
	pointer-events: auto;
}

/* Formular-Wrapper: zentriert, volle Höhe, fade-in mit Verzögerung */
.search-modal .search-form-wrapper {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	opacity: 0;
	transition: opacity 0.15s ease;
}

.search-modal.opened .search-form-wrapper {
	opacity: 1;
	transition: opacity 0.4s ease 0.4s;
}

/* Das Formular selbst – kein Border */
.search-modal .search-form {
	border: 0;
	padding: 0 3rem;
	width: 100%;
	max-width: 900px;
}

.search-modal .search-form label {
	margin: 0;
	display: block;
}

/* Submit-Button ausblenden – Suche via Enter */
.search-modal .search-form .search-submit {
	display: none;
}

/* Label als Flex-Container: Input + Clear-Button nebeneinander */
.search-modal .search-form label {
	display: flex;
	align-items: center;
	gap: 0;
}

/* Großes, transparentes Eingabefeld */
.search-modal .search-form .search-field {
	background: transparent;
	border: 0;
	outline: none;
	width: 100%;
	font-family: var(--font-2);
	font-size: 3.25rem;
	color: var(--basic-color-3);
	padding: 0;
	line-height: 1.2;
	text-align: center;
}

.search-modal .search-form .search-field::placeholder {
	color: rgba(93, 75, 23, 0.4);
	opacity: 1;
}

.search-modal .search-form .search-field:focus::placeholder {
	opacity: 0.5;
}

/* Nativen Browser-Clear-Button des input[type=search] verstecken */
.search-modal .search-field::-webkit-search-cancel-button,
.search-modal .search-field::-webkit-search-decoration {
	-webkit-appearance: none;
	appearance: none;
}

/* Clear-Button: löscht Sucheingabe, standardmäßig versteckt */
.search-modal .search-clear {
	display: none;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: calc(5rem - 6px);
	height: calc(5rem - 6px);
	margin-left: 1rem;
	background: var(--basic-color-3);
	border: none;
	border-radius: 50%;
	cursor: pointer;
	color: var(--basic-color-4);
	font-family: var(--font-2);
	font-size: 3.25rem;
	font-weight: 400;
	line-height: 1;
	transition: background 0.2s, transform 0.15s;
}

.search-modal .search-clear:hover {
	background: #c0392b;
	transform: scale(1.08);
}