/* Layout, site frame, nav, footer, section wrappers. */

.gw-body { min-height: 100vh; display: flex; flex-direction: column; }
.gw-main { flex: 1 0 auto; }

/* Section padding helpers, match the JSX inline padding ('80px 56px') */
.gw-section {
	padding: var(--gw-pad-section-y) var(--gw-pad-section-x);
}
.gw-section--narrow { padding: 60px var(--gw-pad-section-x); }
.gw-section--wide   { padding: 100px var(--gw-pad-section-x); }

.gw-section--cream  { background: var(--gw-cream); border-top: 1px solid var(--gw-hairline); }
.gw-section--surface{ background: var(--gw-surface); }
.gw-section--forest { background: var(--gw-forest-soft); color: #f3eedf; }
.gw-section--forest .gw-muted { color: rgba(243,238,223,0.7); }
.gw-section--forest .gw-kicker { color: var(--gw-sage); }
.gw-section--forest h1, .gw-section--forest h2, .gw-section--forest h3 { color: #f3eedf; }
.gw-section--forest a:hover { color: var(--gw-sage); }

/* Site header, sticky top nav.
   Horizontal padding lives on the header (full-width bar), while .gw-nav is
   the centered content box (max-width = content). This way the brand and the
   right-side CTAs align horizontally with the section content below. */
.gw-site-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: var(--gw-bg);
	border-bottom: 1px solid var(--gw-hairline);
	padding: 0 var(--gw-pad-section-x);
}
.gw-nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding: 22px 0;
	max-width: var(--gw-max-content);
	margin: 0 auto;
}
/* Custom logo (Customizer → Site Identity → Logo) replaces the round "g" mark. */
.gw-nav__logo {
	display: block;
	max-height: 44px;
	width: auto;
}
.gw-nav__brand--has-logo .gw-nav__mark { display: none; }
.gw-nav__brand { display: flex; align-items: center; gap: 12px; }
.gw-nav__mark {
	width: 34px; height: 34px;
	border-radius: var(--gw-radius-pill);
	background: var(--gw-forest);
	color: var(--gw-cream);
	display: flex; align-items: center; justify-content: center;
	font-family: var(--gw-font-serif);
	font-size: 17px; font-style: italic; font-weight: 500;
}
.gw-nav__title {
	font-family: var(--gw-font-serif);
	font-size: 16px;
	font-weight: 500;
	letter-spacing: -0.01em;
	color: var(--gw-ink);
	display: block;
	line-height: 1.1;
}
.gw-nav__subtitle {
	font-size: 11px;
	color: var(--gw-muted);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	display: block;
	margin-top: 2px;
}
.gw-nav__links {
	display: flex; gap: 32px;
	list-style: none; margin: 0; padding: 0;
	font-size: 13px;
}
.gw-nav__links a {
	color: var(--gw-ink);
	padding-bottom: 4px;
	border-bottom: 1.5px solid transparent;
	transition: border-color .15s, color .15s;
}
.gw-nav__links .current-menu-item > a,
.gw-nav__links .current-menu-parent > a,
.gw-nav__links a[aria-current="page"] {
	color: var(--gw-accent-deep);
	font-weight: 600;
	border-bottom-color: var(--gw-accent-deep);
}
.gw-nav__cta { display: flex; align-items: center; gap: 16px; }
.gw-nav__phone { font-size: 12px; color: var(--gw-muted); }

/* Mobile menu toggle, hidden on desktop */
.gw-nav__toggle {
	display: none;
	background: none; border: 0; padding: 8px;
	color: var(--gw-ink);
	cursor: pointer;
}

/* Animated burger → X (3 spans) */
.gw-burger {
	position: relative;
	display: inline-block;
	width: 22px;
	height: 16px;
}
.gw-burger > span {
	position: absolute;
	left: 0;
	right: 0;
	height: 1.5px;
	background: currentColor;
	transition: transform .2s ease, opacity .15s ease, top .2s ease;
}
.gw-burger > span:nth-child(1) { top: 1px; }
.gw-burger > span:nth-child(2) { top: 7.5px; }
.gw-burger > span:nth-child(3) { top: 14px; }
.gw-nav.is-open .gw-burger > span:nth-child(1) { top: 7.5px; transform: rotate(45deg); }
.gw-nav.is-open .gw-burger > span:nth-child(2) { opacity: 0; }
.gw-nav.is-open .gw-burger > span:nth-child(3) { top: 7.5px; transform: rotate(-45deg); }

@media (max-width: 900px) {
	.gw-site-header { padding: 0 20px; }
	.gw-nav {
		padding: 14px 0;
		flex-wrap: wrap;
		gap: 12px;
		justify-content: space-between;
	}
	/* Hide brand block on mobile, Termin button takes its place on the left. */
	.gw-nav__brand { display: none; }
	/* Nav-menu container has no role on mobile until opened; just used to host the list. */
	.gw-nav__nav { order: 99; flex-basis: 100%; }
	.gw-nav__subtitle, .gw-nav__phone { display: none; }
	.gw-nav__toggle { display: inline-flex; align-items: center; justify-content: center; }
	.gw-nav__cta {
		display: contents; /* let .gw-btn and .gw-nav__toggle sit directly on the nav flex */
	}
	.gw-nav__cta > .gw-btn { order: 1; flex: 0 0 auto; }   /* Termin buchen on the left */
	.gw-nav__toggle       { order: 2; margin-left: auto; } /* Burger on the right */

	/* Menu list, hidden by default, full-width items when open. */
	.gw-nav__links {
		list-style: none;
		margin: 0;
		padding: 0;
		flex-direction: column;
		gap: 0;
		border-top: 1px solid var(--gw-hairline);
		display: none;
	}
	.gw-nav.is-open .gw-nav__links { display: flex; }
	.gw-nav__links li { display: block; width: 100%; }
	.gw-nav__links a {
		display: block;
		width: 100%;
		padding: 18px 4px;
		font-size: 16px;
		border: 0;
		border-bottom: 1px solid var(--gw-hairline);
	}
	.gw-nav__links li:last-child a { border-bottom: 0; }
	.gw-nav__links .current-menu-item > a,
	.gw-nav__links .current-menu-parent > a,
	.gw-nav__links a[aria-current="page"] {
		border-bottom: 1px solid var(--gw-hairline);
		color: var(--gw-accent-deep);
	}
}

/* Footer */
.gw-site-footer {
	background: rgb(35, 33, 28);
	color: #cdd5c8;
	padding: 60px var(--gw-pad-section-x) 32px;
	margin-top: 0;
}
.gw-footer__grid {
	max-width: var(--gw-max-content);
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1.4fr repeat(3, 1fr);
	gap: 48px;
}
.gw-footer__brand .gw-nav__title { color: #f3eedf; }
.gw-footer__title {
	font-size: 11px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--gw-sage);
	margin-bottom: 12px;
}
.gw-footer__list {
	list-style: none; margin: 0; padding: 0;
	display: flex; flex-direction: column; gap: 8px;
	font-size: 13px;
	line-height: 1.5;
}
.gw-footer__list a:hover { color: var(--gw-sage); }
.gw-footer__bottom {
	max-width: var(--gw-max-content);
	margin: 40px auto 0;
	padding-top: 24px;
	border-top: 1px solid rgba(243,238,223,0.15);
	display: flex; justify-content: space-between;
	flex-wrap: wrap; gap: 12px;
	font-size: 11px;
	color: rgba(243,238,223,0.6);
}
@media (max-width: 900px) {
	.gw-footer__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
	.gw-footer__grid { grid-template-columns: 1fr; }
}

/* General responsive padding for sections */
@media (max-width: 900px) {
	.gw-section,
	.gw-section--narrow,
	.gw-section--wide {
		padding-left: 24px;
		padding-right: 24px;
	}
	:root {
		--gw-pad-section-y: 56px;
	}
}