/* =============================================================
   Kanzlei Cremer & Thelen — header & footer
   Requires base.css to be loaded first.
   ============================================================= */

/* ---------- shared: Wortmarke ---------- */
.brand{
	display:flex; align-items:center; gap:10px;
	text-decoration:none; color:inherit; white-space:nowrap;
}
.logo-inline{display:flex; align-items:center; gap:10px;}
.logo-inline .mark{width:36px; height:36px; display:block; flex-shrink:0;}
.logo-schrift{
	font-family:'Fraunces', serif; font-weight:600;
	font-size:clamp(1.0625rem, 1rem + 0.25vw, 1.25rem);
	color:var(--navy);
	letter-spacing:-0.005em;
}
.logo-amp{color:var(--gold-deep); font-style:italic;}
.logo-inline.ist-invertiert .logo-schrift{color:var(--gold-tint);}
.logo-inline.ist-invertiert .logo-amp{color:var(--gold);}

/* ---------- header ---------- */
header{
	position:sticky; top:0; z-index:50;
	background:rgba(250,247,242,0.92);
	backdrop-filter:blur(10px);
	border-bottom:1px solid transparent;
	transition:box-shadow var(--dauer) var(--ease), border-color var(--dauer) var(--ease);
}
header.ist-gescrollt{
	box-shadow:var(--shadow-sm);
	border-bottom-color:var(--line);
}

header nav{
	width:100%;
	max-width:var(--wrap-max);
	margin-inline:auto;
	padding:16px var(--gutter);
	display:flex; align-items:center; justify-content:space-between; gap:16px;
}

header nav ul{list-style:none; display:flex; gap:clamp(18px, 2.5vw, 32px); font-size:15px;}
header nav ul a{text-decoration:none; color:var(--text-soft); transition:color .15s;}
header nav ul a:hover{color:var(--navy);}

.nav-right{display:flex; align-items:center; gap:10px;}

.nav-cta{
	background:var(--navy); color:var(--gold-tint);
	padding:10px 20px; border-radius:999px;
	font-size:14px; font-weight:600; text-decoration:none; white-space:nowrap;
	transition:background var(--dauer) var(--ease), transform var(--dauer) var(--ease);
}
.nav-cta:hover{background:var(--navy-deep); transform:translateY(-1px);}

/* ---------- burger button ---------- */
.burger{
	display:none;
	align-items:center; justify-content:center;
	width:42px; height:42px; flex-shrink:0;
	background:none; border:none; border-radius:9px;
	color:var(--navy); cursor:pointer;
	transition:background .15s;
	-webkit-tap-highlight-color:transparent;
}
.burger:hover{background:var(--navy-tint);}
.burger svg{width:23px; height:23px; display:block;}
.burger .icon-close{display:none;}
.burger[aria-expanded="true"] .icon-open{display:none;}
.burger[aria-expanded="true"] .icon-close{display:block;}

.burger:focus-visible,
.brand:focus-visible,
header nav ul a:focus-visible,
.nav-cta:focus-visible{
	outline:2px solid var(--gold); outline-offset:3px; border-radius:4px;
}

/* ---------- mobile menu ---------- */
@media (max-width:860px){
	.burger{display:flex;}

	/* Der volle Textbutton sprengt auf schmalen Viewports die Zeile und
	   schiebt den Burger aus dem sichtbaren Bereich. Der CTA bleibt im
	   Seiteninhalt selbst erreichbar (Hero-Button, Schluss-CTA am
	   Seitenende) — dort auch prominenter als ein Header-Link. */
	.nav-cta{display:none;}

	header nav ul{
		display:none;
		position:absolute; top:100%; left:0; right:0;
		flex-direction:column; gap:0;
		background:rgba(250,247,242,0.98);
		backdrop-filter:blur(10px);
		border-bottom:1px solid var(--line);
		padding:4px var(--gutter) 16px;
	}
	header nav ul[data-open="true"]{display:flex;}

	header nav ul li + li{border-top:1px solid var(--line);}
	header nav ul a{display:block; padding:15px 2px; font-size:16px; color:var(--navy);}
}

@media (max-width:400px){
	header nav{padding:14px var(--gutter);}
	.logo-inline .mark{width:30px; height:30px;}
	.nav-cta{padding:9px 14px; font-size:13px;}
	.burger{width:38px; height:38px;}
}

/* Aktiver Menüpunkt */
header nav ul a{position:relative;}
header nav ul a::after{
	content:'';
	position:absolute; left:0; right:0; bottom:-7px;
	height:2px; border-radius:2px;
	background:var(--gold);
	transform:scaleX(0); transform-origin:center;
	transition:transform .2s ease;
}
header nav ul a:hover::after{transform:scaleX(0.4);}
header nav ul li.current-menu-item > a,
header nav ul li.current_page_item > a,
header nav ul li.current-menu-ancestor > a,
header nav ul li.current_page_ancestor > a{
	color:var(--navy); font-weight:600;
}
header nav ul li.current-menu-item > a::after,
header nav ul li.current_page_item > a::after,
header nav ul li.current-menu-ancestor > a::after,
header nav ul li.current_page_ancestor > a::after{
	transform:scaleX(1);
}

@media (prefers-reduced-motion:reduce){
	header nav ul a::after{transition:none;}
}

@media (max-width:860px){
	header nav ul a::after{content:none;}
	header nav ul li.current-menu-item > a,
	header nav ul li.current_page_item > a,
	header nav ul li.current-menu-ancestor > a,
	header nav ul li.current_page_ancestor > a{
		background:var(--gold-tint);
		margin-inline:calc(var(--gutter) * -1);
		padding-inline:var(--gutter);
		box-shadow:inset 3px 0 0 var(--gold);
	}
}

/* ---------- footer ---------- */
footer{
	padding-block:clamp(48px, 6vw, 72px) clamp(24px, 3vw, 36px);
	border-top:1px solid var(--line);
	background:var(--navy-tint);
}

.footer-inner{
	display:grid;
	grid-template-columns:1.4fr 1fr 1fr;
	gap:clamp(28px, 4vw, 56px);
	padding-bottom:clamp(28px, 4vw, 40px);
	border-bottom:1px solid var(--line);
}

.footer-marke .brand{margin-bottom:12px;}
.footer-claim{color:var(--text-soft); font-size:0.9375rem; max-width:32ch;}

.footer-spalte{display:flex; flex-direction:column; gap:10px;}
.footer-spalte a,
.footer-spalte span{font-size:0.9375rem; color:var(--text-soft); text-decoration:none;}
.footer-spalte a:hover{color:var(--navy);}
.footer-spalten-titel{
	font-family:'Inter', sans-serif; font-weight:700; font-size:0.8125rem;
	letter-spacing:0.05em; text-transform:uppercase; color:var(--navy);
	margin-bottom:4px;
}

.footer-legal{
	display:flex; flex-wrap:wrap; align-items:center; gap:clamp(12px, 2vw, 22px);
	padding-top:20px;
	font-size:13px; color:var(--text-mute);
}
.footer-legal a{text-decoration:none;}
.footer-legal a:hover{color:var(--text-soft);}
.footer-demo-hinweis{
	margin-left:auto;
	font-style:italic;
}

@media (max-width:860px){
	.footer-inner{grid-template-columns:1fr 1fr;}
	.footer-marke{grid-column:1 / -1;}
}

@media (max-width:560px){
	.footer-inner{grid-template-columns:1fr;}
	.footer-legal{flex-direction:column; align-items:flex-start;}
	.footer-demo-hinweis{margin-left:0;}
}