/* ==========================================================================
   Websmarty – Schwebende Kopfleiste, Mega-Menü, Mobile-Navigation
   ========================================================================== */

.site-header {
	position: sticky;
	top: var(--header-gap);
	z-index: var(--z-header);
	height: var(--header-h);
	margin-top: var(--header-gap);
}

/* Sanfter Verlauf hinter der Leiste: Inhalt verschwindet beim Scrollen ruhig */
.site-header::before {
	content: "";
	position: absolute;
	inset: calc(var(--header-gap) * -1 - var(--admin-bar, 0px)) 0 calc(var(--s-4) * -1);
	z-index: -1;
	background: linear-gradient(180deg, var(--c-bg) 55%, transparent);
	pointer-events: none;
	opacity: 0;
	transition: opacity var(--dur-base) ease;
}

.site-header.is-scrolled::before {
	opacity: 1;
}

/* Die Leiste schwebt mit Abstand zum Rand – kein am Rand klebender Balken */
.site-header__bar {
	display: flex;
	align-items: center;
	gap: var(--s-3);
	height: var(--header-h);
	padding-inline: var(--s-5) var(--s-2);
	border: 1px solid var(--c-line-strong);
	border-radius: var(--r-pill);
	background: var(--c-bg-raised);
	box-shadow: inset 0 1px 0 var(--c-highlight);
	transition: box-shadow var(--dur-base) ease, border-color var(--dur-base) ease;
}

.site-header.is-scrolled .site-header__bar,
.site-header.is-mega-open .site-header__bar {
	border-color: var(--c-line-hover);
	box-shadow: var(--shadow-float);
}

/* Unsichtbarer Messpunkt für den Scroll-Zustand (IntersectionObserver) */
.header-sentinel {
	position: absolute;
	top: 0;
	left: 0;
	width: 1px;
	height: 24px;
	pointer-events: none;
}

/* Logo / Wortmarke -------------------------------------------------------- */

.brand {
	display: inline-flex;
	align-items: center;
	min-height: 2.75rem;
	margin-right: auto;
	color: var(--c-text);
	text-decoration: none;
	border-radius: var(--r-xs);
}

.brand img,
.brand .custom-logo {
	width: auto;
	max-height: 1.875rem;
}

/* Wortmarke <websmarty>: Klammern grün, „web“ normal, „smarty“ fett */
.brand__word {
	display: inline-flex;
	align-items: center;
	font-family: var(--ff-display);
	font-size: 1.375rem;
	font-weight: 400;
	letter-spacing: 0;
	line-height: 1;
	white-space: nowrap;
}

/* Klammern größer als die Schrift, gemessen auf die Mitte der Kleinbuchstaben gesetzt
   (Klammerhöhe = x-Höhe, Mitte = Mitte des ganzen Worts) */
.brand__tag {
	color: var(--c-accent);
	font-size: 1.4em;
	font-weight: 600;
	line-height: 1;
	transform: translateY(0.075em);
}

.brand__tag:last-child {
	margin-left: 0.02em;
}

.brand__smarty {
	font-weight: 800;
}

/* Desktop-Navigation ------------------------------------------------------ */

.primary-nav {
	display: none;
}

.nav-list {
	display: flex;
	align-items: center;
	gap: 2px;
}

.nav-link {
	display: inline-flex;
	align-items: center;
	gap: 0.35em;
	min-height: 2.5rem;
	padding: 0.5rem 0.9rem;
	border-radius: var(--r-pill);
	color: var(--c-text-2);
	font-size: var(--fs-sm);
	font-weight: 500;
	text-decoration: none;
	white-space: nowrap;
	transition: color var(--dur-fast) ease, background-color var(--dur-fast) ease;
}

.nav-link[aria-current="page"],
.nav-link.is-current {
	color: var(--c-text);
}

.nav-link .icon {
	--icon-size: 1rem;
	transition: transform var(--dur-base) var(--ease-out);
}

.nav-link[aria-expanded="true"] {
	color: var(--c-text);
	background: var(--c-surface-2);
}

.nav-link[aria-expanded="true"] .icon {
	transform: rotate(180deg);
}

@media (hover: hover) and (pointer: fine) {
	.nav-link:hover {
		color: var(--c-text);
		background: var(--c-surface);
	}
}

/* Aktionen rechts --------------------------------------------------------- */

.site-header__actions {
	display: flex;
	align-items: center;
	gap: var(--s-1);
}

.header-phone {
	display: none;
	align-items: center;
	gap: 0.5em;
	min-height: 2.5rem;
	padding: 0.5rem 0.8rem;
	border-radius: var(--r-pill);
	color: var(--c-text-2);
	font-size: var(--fs-sm);
	font-weight: 500;
	font-variant-numeric: tabular-nums;
	text-decoration: none;
	transition: color var(--dur-fast) ease;
}

.header-phone .icon {
	--icon-size: 1.05rem;
	color: var(--c-accent);
}

@media (hover: hover) and (pointer: fine) {
	.header-phone:hover {
		color: var(--c-text);
	}
}

.header-cta {
	display: none;
	min-height: 2.75rem;
	padding: 0.55em 1.2em;
}

/* Burger: zwei Linien, die per transform zum X werden */
.burger {
	position: relative;
	display: grid;
	place-items: center;
	width: 2.75rem;
	height: 2.75rem;
	border-radius: 50%;
	color: var(--c-text);
	-webkit-tap-highlight-color: transparent;
}

.burger__line {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 1.125rem;
	height: 1.5px;
	margin: -0.75px 0 0 -0.5625rem;
	border-radius: 2px;
	background: currentColor;
	transition: transform var(--dur-base) var(--ease-out);
}

.burger__line:first-child {
	transform: translateY(-3.5px);
}

.burger__line:nth-child(2) {
	transform: translateY(3.5px);
}

.burger[aria-expanded="true"] .burger__line:first-child {
	transform: rotate(45deg);
}

.burger[aria-expanded="true"] .burger__line:nth-child(2) {
	transform: rotate(-45deg);
}

@media (min-width: 30em) {
	.header-cta {
		display: inline-flex;
	}
}

@media (min-width: 80em) {
	.primary-nav {
		display: block;
	}

	.brand {
		margin-right: var(--s-5);
	}

	.site-header__actions {
		margin-left: auto;
	}

	.burger {
		display: none;
	}
}

/* Desktop: sieben Menüpunkte, daher etwas engere Abstände; Telefon als rundes Symbol
   (die Nummer steht für Screenreader im Link, sichtbar im Mobilmenü, Footer und auf der Kontaktseite) */
@media (min-width: 80em) {
	.nav-link {
		padding-inline: 0.65rem;
	}

	.header-phone {
		display: inline-flex;
		justify-content: center;
		width: 2.5rem;
		padding: 0;
		border: 1px solid var(--c-line-strong);
		transition: color var(--dur-fast) ease, border-color var(--dur-fast) ease;
	}

	.header-phone > span {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}
}

@media (min-width: 80em) and (hover: hover) and (pointer: fine) {
	.header-phone:hover {
		border-color: var(--c-line-hover);
	}
}

/* Mega-Menü --------------------------------------------------------------- */

.mega {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	padding-top: var(--s-2); /* Hover-Brücke zwischen Leiste und Panel */
	visibility: hidden;
	opacity: 0;
	transform: translateY(-6px);
	transform-origin: top center;
	transition:
		opacity 140ms ease,
		transform 140ms var(--ease-out),
		visibility 0s linear 140ms;
}

.has-mega.is-open .mega {
	visibility: visible;
	opacity: 1;
	transform: none;
	transition:
		opacity 200ms var(--ease-out),
		transform 220ms var(--ease-out),
		visibility 0s;
}

/* Wechsel zwischen zwei offenen Menüs: ohne erneuten Auftritt */
.site-header.is-nav-switch .primary-nav .mega,
.site-header.is-nav-switch .primary-nav .dropdown {
	transition: none;
}

.mega__shell {
	--bezel-r: var(--r-xl);
	box-shadow: var(--shadow-pop);
	background: var(--c-bg-raised);
}

.mega__panel {
	max-height: calc(100dvh - var(--header-h) - var(--header-gap) * 2 - 1.5rem);
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: var(--s-8);
	background: var(--c-bg-raised);
}

.mega__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.mega__col {
	display: grid;
	align-content: start;
	gap: var(--s-6);
	padding-inline: var(--s-5);
}

.mega__col:first-child {
	padding-left: 0;
}

.mega__col:last-child {
	padding-right: 0;
}

.mega__col + .mega__col {
	border-left: 1px solid var(--c-line);
}

.mega__heading {
	margin-bottom: var(--s-2);
	color: var(--c-text-3);
	font-size: var(--fs-xs);
	font-weight: 550;
}

.mega__heading a {
	text-decoration: none;
}

.mega__list {
	display: grid;
	gap: 2px;
}

.mega-link {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: var(--s-3);
	align-items: start;
	margin-inline: -0.625rem;
	padding: 0.625rem;
	border-radius: var(--r-md);
	text-decoration: none;
	transition: background-color var(--dur-fast) ease;
}

.mega-link__title {
	display: block;
	color: var(--c-text);
	font-size: var(--fs-sm);
	font-weight: 550;
	line-height: 1.35;
}

.mega-link__desc {
	display: block;
	margin-top: 2px;
	color: var(--c-text-3);
	font-size: var(--fs-xs);
	line-height: 1.45;
}

.mega-link[aria-current="page"] .mega-link__title {
	color: var(--c-accent);
}

@media (hover: hover) and (pointer: fine) {
	.mega-link:hover {
		background: var(--c-surface);
	}

	.mega-link:hover .icon-tile {
		border-color: var(--c-accent-line);
	}

	.mega-link:hover .mega-link__desc {
		color: var(--c-text-2);
	}
}

.mega-feature {
	display: grid;
	gap: var(--s-3);
	padding: var(--s-5);
	border: 1px solid var(--c-accent-line);
	border-radius: var(--r-lg);
	background:
		radial-gradient(120% 90% at 100% 0%, var(--c-accent-glow), transparent 60%),
		var(--c-surface);
}

.mega-feature__title {
	font-family: var(--ff-display);
	font-size: var(--fs-h5);
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: -0.015em;
}

.mega-feature__text {
	color: var(--c-text-2);
	font-size: var(--fs-xs);
	line-height: 1.55;
}

.mega-feature .btn {
	justify-self: start;
	min-height: 2.75rem;
	font-size: var(--fs-xs);
}

.mega-feature .btn__icon {
	width: 1.875rem;
	height: 1.875rem;
}

.mega-feature__note {
	color: var(--c-text-3);
	font-size: var(--fs-xs);
}

.mega__footer {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--s-3) var(--s-6);
	margin-top: var(--s-6);
	padding-top: var(--s-5);
	border-top: 1px solid var(--c-line);
	color: var(--c-text-3);
	font-size: var(--fs-xs);
}

.mega__footer-meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s-2) var(--s-6);
}

.mega__footer-meta span,
.mega__footer-meta a {
	display: inline-flex;
	align-items: center;
	gap: 0.45em;
	text-decoration: none;
	font-variant-numeric: tabular-nums;
}

.mega__footer-meta .icon {
	--icon-size: 1rem;
	color: var(--c-accent);
}

/* Kompaktes Dropdown (z. B. „Webdesign“), verankert am Menüpunkt ---------- */

.has-dropdown {
	position: relative;
}

.dropdown {
	position: absolute;
	top: calc(100% + (var(--header-h) - 2.5rem) / 2 - 2px);
	left: -0.75rem;
	width: 21rem;
	padding-top: var(--s-2); /* Hover-Brücke */
	visibility: hidden;
	opacity: 0;
	transform: translateY(-4px) scale(0.98);
	transform-origin: top left;
	transition:
		opacity 140ms ease,
		transform 140ms var(--ease-out),
		visibility 0s linear 140ms;
}

.has-dropdown.is-open .dropdown {
	visibility: visible;
	opacity: 1;
	transform: none;
	transition:
		opacity 180ms var(--ease-out),
		transform 200ms var(--ease-out),
		visibility 0s;
}

.dropdown__shell {
	--bezel-r: var(--r-lg);
	background: var(--c-bg-raised);
	box-shadow: var(--shadow-pop);
}

.dropdown__panel {
	padding: var(--s-3) var(--s-4);
	background: var(--c-bg-raised);
}

.dropdown .mega-link {
	margin-inline: -0.5rem;
}

/* Abdunklung der Seite bei offenem Mega-Menü ------------------------------ */

.page-dim {
	position: fixed;
	inset: 0;
	z-index: var(--z-dim);
	background: var(--c-overlay);
	opacity: 0;
	visibility: hidden;
	transition: opacity var(--dur-base) ease, visibility 0s linear var(--dur-base);
}

.page-dim.is-visible {
	opacity: 1;
	visibility: visible;
	transition: opacity var(--dur-base) ease, visibility 0s;
}

/* Mobile-Navigation (Vollbild unter der Leiste) --------------------------- */

.drawer {
	position: fixed;
	inset: 0;
	z-index: var(--z-drawer);
	display: flex;
	flex-direction: column;
	padding-top: calc(var(--header-h) + var(--header-gap) * 2);
	overflow-y: auto;
	overscroll-behavior: contain;
	background: var(--c-bg);
	opacity: 0;
	transition: opacity 180ms ease;
}

.drawer[hidden] {
	display: none;
}

.drawer.is-open {
	opacity: 1;
	transition: opacity 240ms var(--ease-out);
}

.drawer__inner {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: var(--s-8);
	padding-block: var(--s-4) var(--s-8);
}

/* Gestaffelter Auftritt der Menüpunkte */
.drawer-nav > li,
.drawer__foot {
	opacity: 0;
	transform: translateY(12px);
	transition: opacity 200ms ease, transform 200ms var(--ease-out);
}

.drawer.is-open .drawer-nav > li,
.drawer.is-open .drawer__foot {
	opacity: 1;
	transform: none;
	transition: opacity 360ms var(--ease-out), transform 420ms var(--ease-drawer);
}

.drawer.is-open .drawer-nav > li:nth-child(1) { transition-delay: 40ms; }
.drawer.is-open .drawer-nav > li:nth-child(2) { transition-delay: 80ms; }
.drawer.is-open .drawer-nav > li:nth-child(3) { transition-delay: 120ms; }
.drawer.is-open .drawer-nav > li:nth-child(4) { transition-delay: 160ms; }
.drawer.is-open .drawer-nav > li:nth-child(5) { transition-delay: 200ms; }
.drawer.is-open .drawer__foot { transition-delay: 220ms; }

.drawer-nav > li {
	border-bottom: 1px solid var(--c-line);
}

.drawer-link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	min-height: 3.5rem;
	padding-block: var(--s-3);
	color: var(--c-text);
	font-size: var(--fs-h4);
	font-weight: 500;
	font-family: var(--ff-display);
	letter-spacing: -0.02em;
	text-align: left;
	text-decoration: none;
}

.drawer-link[aria-current="page"] {
	color: var(--c-accent);
}

.drawer-link .icon {
	--icon-size: 1.25rem;
	color: var(--c-text-2);
	transition: transform var(--dur-base) var(--ease-out);
}

.drawer-link[aria-expanded="true"] .icon {
	transform: rotate(180deg);
}

/* Untermenü: klappt ohne Höhenanimation auf, Inhalt blendet ein */
.drawer-sub {
	display: none;
}

.drawer-sub.is-open {
	display: block;
}

.drawer-sub.is-open .drawer-sub__content {
	animation: ws-answer 240ms var(--ease-out);
}

.drawer-sub__content {
	display: grid;
	gap: var(--s-6);
	padding-bottom: var(--s-6);
}

.drawer-group__heading {
	margin-bottom: var(--s-1);
	color: var(--c-text-3);
	font-size: var(--fs-xs);
	font-weight: 550;
}

.drawer-group__list a {
	display: flex;
	align-items: center;
	gap: var(--s-3);
	min-height: 2.75rem;
	color: var(--c-text-2);
	font-size: var(--fs-base);
	text-decoration: none;
}

.drawer-group__list a[aria-current="page"] {
	color: var(--c-accent);
}

.drawer-group__list .icon {
	--icon-size: 1.15rem;
	color: var(--c-accent);
}

.drawer-sub__all {
	padding-top: var(--s-1);
}

.drawer__foot {
	display: grid;
	gap: var(--s-4);
	margin-top: auto;
}

.drawer__foot .cta-note {
	margin-top: 0;
}

.drawer__contact {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s-2) var(--s-5);
	color: var(--c-text-2);
	font-size: var(--fs-sm);
	font-variant-numeric: tabular-nums;
}

.drawer__contact a {
	display: inline-flex;
	align-items: center;
	gap: 0.45em;
	min-height: 2.75rem;
	text-decoration: none;
}

.drawer__contact .icon {
	--icon-size: 1.05rem;
	color: var(--c-accent);
}

@media (min-width: 80em) {
	.drawer {
		display: none !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	.mega,
	.has-mega.is-open .mega,
	.dropdown,
	.has-dropdown.is-open .dropdown,
	.drawer-nav > li,
	.drawer__foot,
	.drawer.is-open .drawer-nav > li,
	.drawer.is-open .drawer__foot {
		transform: none;
	}

	.drawer.is-open .drawer-nav > li,
	.drawer.is-open .drawer__foot {
		transition-delay: 0ms;
	}

	.drawer-sub.is-open .drawer-sub__content {
		animation-name: ws-fade;
		animation-duration: 160ms;
	}
}

/* Eingeloggt: Platz für die WordPress-Adminleiste ------------------------- */

.admin-bar {
	--admin-bar: 32px;
}

@media (max-width: 782px) {
	.admin-bar {
		--admin-bar: 46px;
	}
}

.admin-bar .site-header {
	top: calc(var(--header-gap) + var(--admin-bar));
}

.admin-bar .drawer {
	top: var(--admin-bar);
}