/* ==========================================================================
   header-footer.css: Sticky-Navbar mit Verdichtung, Burger-Drawer, Footer
   ========================================================================== */

.site-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: transparent;
	transition: background-color var(--duration-ui) var(--ease-out), box-shadow var(--duration-ui) var(--ease-out), padding var(--duration-ui) var(--ease-out);
	padding-block: 1.35rem;
}
.site-header.is-scrolled {
	background: var(--primary);
	box-shadow: var(--shadow-md);
	padding-block: 0.7rem;
}
.home .site-header { background: var(--primary); } /* Startseite hat dunkles Hero direkt darunter: konsistenter Kontrast von Anfang an */

.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; }

.site-branding { display: flex; align-items: center; gap: 0.75rem; color: var(--surface); }
.site-branding img { max-height: 44px; width: auto; }
.brand-name { font-family: var(--font-display); font-weight: 600; font-size: 1.2rem; color: var(--surface); }
.brand-tagline { display: block; font-family: var(--font-body); font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); margin-top: 0.1rem; }

.primary-nav { display: none; }
.primary-nav ul { display: flex; align-items: center; gap: clamp(1.3rem, 2vw, 2.2rem); }
.primary-nav a {
	color: var(--surface);
	font-weight: 500;
	font-size: 0.98rem;
	padding-block: 0.4rem;
	position: relative;
}
.primary-nav a::after {
	content: "";
	position: absolute; left: 0; right: 100%; bottom: -2px;
	height: 2px; background: var(--accent);
	transition: right var(--duration-ui) var(--ease-out);
}
.primary-nav a:hover::after, .primary-nav a:focus-visible::after, .primary-nav li.current-menu-item a::after { right: 0; }

/* Dropdown für Leistungen-Unterseiten (Desktop) */
.primary-nav li.menu-item-has-children { position: relative; }
.primary-nav .sub-menu {
	position: absolute; top: 100%; left: 0; z-index: 50;
	min-width: 240px;
	background: var(--primary);
	box-shadow: var(--shadow-md);
	padding: 0.5rem;
	opacity: 0; visibility: hidden; transform: translateY(6px);
	transition: opacity var(--duration-ui) var(--ease-out), transform var(--duration-ui) var(--ease-out), visibility var(--duration-ui);
}
.primary-nav li.menu-item-has-children:hover > .sub-menu,
.primary-nav li.menu-item-has-children:focus-within > .sub-menu {
	opacity: 1; visibility: visible; transform: translateY(0);
}
.primary-nav .sub-menu li { width: 100%; }
.primary-nav .sub-menu a { display: block; padding: 0.7rem 0.9rem; font-size: 0.92rem; }
.primary-nav .sub-menu a::after { display: none; }
.primary-nav .sub-menu a:hover { color: var(--clay); }

/* Mobile-Drawer: Unterpunkte immer sichtbar, eingerückt */
.mobile-drawer .sub-menu { padding-left: 1rem; }
.mobile-drawer .sub-menu a { font-size: 1rem; opacity: 0.85; }

.header-cta { display: none; }

.burger-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px; height: 46px;
	color: var(--surface);
	border-radius: var(--radius);
}
.burger-toggle .icon-close { display: none; }
.burger-toggle[aria-expanded="true"] .icon-menu { display: none; }
.burger-toggle[aria-expanded="true"] .icon-close { display: block; }

.mobile-drawer {
	position: fixed; inset: 0 0 0 auto; z-index: 200;
	width: min(86vw, 380px); height: 100%;
	background: var(--primary); color: var(--surface);
	padding: 1.75rem 1.75rem 2.5rem;
	transform: translateX(100%);
	transition: transform var(--duration-ui) var(--ease-out);
	overflow-y: auto;
	display: flex; flex-direction: column; gap: 2rem;
}
.mobile-drawer.is-open { transform: translateX(0); }
.mobile-drawer-head { display: flex; align-items: center; justify-content: space-between; }
.mobile-drawer ul { display: flex; flex-direction: column; gap: 0.25rem; }
.mobile-drawer a {
	display: block; padding: 0.9rem 0.2rem; font-size: 1.15rem; font-weight: 500;
	border-bottom: 1px solid oklch(97% 0.006 90 / 0.12);
	min-height: 44px;
}
.mobile-drawer .contact-line { color: oklch(97% 0.006 90 / 0.85); margin-top: 0.25rem; }

.drawer-backdrop {
	position: fixed; inset: 0; z-index: 190;
	background: oklch(15% 0.01 250 / 0.55);
	opacity: 0; pointer-events: none;
	transition: opacity var(--duration-ui) var(--ease-out);
}
.drawer-backdrop.is-open { opacity: 1; pointer-events: auto; }

@media (min-width: 900px) {
	.primary-nav { display: block; }
	.header-cta { display: inline-flex; }
	.burger-toggle { display: none; }
}

/* ---------- Kontaktzeilen (Icon dezent neben Text, nie größer als die Zeile) ---------- */
.contact-line { display: flex; align-items: center; gap: 0.6rem; }
.contact-line .icon { flex-shrink: 0; color: var(--accent); }

/* ---------- Footer ---------- */
.site-footer { background: var(--primary); color: oklch(97% 0.006 90 / 0.82); }
.footer-top { padding-block: clamp(3rem, 6vw, 5rem); border-bottom: 1px solid oklch(97% 0.006 90 / 0.12); }
.footer-grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1.1fr; gap: clamp(2rem, 4vw, 3rem); }
.footer-brand .brand-name { font-size: 1.4rem; }
.footer-brand p { margin-top: 1rem; max-width: 34ch; color: oklch(97% 0.006 90 / 0.68); }
.footer-heading { font-family: var(--font-body); font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); margin-bottom: 1.1rem; }
.footer-col ul { display: flex; flex-direction: column; gap: 0.6rem; }
.footer-col a:hover { color: var(--surface); }
.footer-col .contact-line { align-items: flex-start; }
.footer-bottom { padding-block: 1.4rem; display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; justify-content: space-between; font-size: 0.85rem; color: oklch(97% 0.006 90 / 0.55); }
.footer-bottom ul { display: flex; gap: 1.4rem; flex-wrap: wrap; }

@media (max-width: 900px) {
	.footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
	.footer-grid { grid-template-columns: 1fr; gap: 2.2rem; }
	.footer-bottom { flex-direction: column; align-items: flex-start; }
}