/* =============================================================
   Dachdeckerei Kappes — 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-weight:700;
	font-size:clamp(1.0625rem, 1rem + 0.25vw, 1.25rem);
	color:var(--schiefer);
	letter-spacing:-0.005em;
}
.logo-amp{color:var(--terrakotta-deep);}
.logo-inline.ist-invertiert .logo-schrift{color:var(--terrakotta-tint);}
.logo-inline.ist-invertiert .logo-amp{color:var(--terrakotta);}

/* ---------- Demo-Hinweis ----------
   Bewusst dezent: kleine Schrift, gedeckte Farben, keine Sticky-Position —
   scrollt normal mit weg, drängt sich nicht in den Vordergrund. */
.demo-banner{
	background:var(--schiefer-tint);
	color:var(--text-soft);
	font-size:0.8125rem;
	text-align:center;
	padding-block:8px;
}
.demo-banner a{color:var(--schiefer); font-weight:600; text-decoration:underline;}
.demo-banner a:hover{color:var(--terrakotta-deep);}

/* ---------- header ----------
   Bewusst über die ID #site-header statt den bloßen Tag-Namen
   angesprochen: "header" als Element-Selektor träfe sonst auch die
   semantischen <header>-Blöcke innerhalb von Artikeln und Rechtstexten
   (single.php, inc/legal-page.php) und würde deren Titelblock ebenfalls
   sticky machen — das führte genau zu dem Overlay-Effekt beim Scrollen. */
#site-header{
	position:sticky; top:0; z-index:50;
	background:rgba(246,243,236,0.96);
	backdrop-filter:blur(6px);
	border-bottom:var(--kontur) solid var(--schiefer);
	transition:box-shadow var(--dauer) var(--ease);
}

/* Lesefortschritt: schmale Leiste am unteren Rand des Headers.
   width wird per JS gesetzt, siehe assets/js/interactions.js. */
.scroll-progress{
	position:absolute; left:0; bottom:-1px; height:2px; width:0%;
	background:var(--terrakotta);
}
@media (prefers-reduced-motion:reduce){
	.scroll-progress{transition:none;}
}
#site-header.ist-gescrollt{
	box-shadow:0 4px 0 0 rgba(27,29,33,0.06);
}

#site-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;
}

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

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

.nav-cta{
	background:var(--terrakotta); color:var(--creme);
	padding:10px 18px; border:2px solid var(--schiefer);
	font-size:14px; font-weight:800; text-transform:uppercase; letter-spacing:0.02em;
	text-decoration:none; white-space:nowrap;
	box-shadow:3px 3px 0 var(--schiefer);
	transition:background var(--dauer) var(--ease), transform var(--dauer) var(--ease), box-shadow var(--dauer) var(--ease);
}
.nav-cta:hover{background:var(--terrakotta-deep); transform:translate(3px,3px); box-shadow:0 0 0 var(--schiefer);}

/* ---------- burger button ---------- */
.burger{
	display:none;
	align-items:center; justify-content:center;
	width:42px; height:42px; flex-shrink:0;
	background:none; border:2px solid transparent;
	color:var(--schiefer); cursor:pointer;
	transition:border-color .15s;
	-webkit-tap-highlight-color:transparent;
}
.burger:hover{border-color:var(--schiefer);}
.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,
#site-header nav ul a:focus-visible,
.nav-cta:focus-visible{
	outline:2px solid var(--terrakotta); 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;}

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

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

@media (max-width:400px){
	#site-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 */
#site-header nav ul a{position:relative;}
#site-header nav ul a::after{
	content:'';
	position:absolute; left:0; right:0; bottom:-7px;
	height:2px; border-radius:2px;
	background:var(--terrakotta);
	transform:scaleX(0); transform-origin:center;
	transition:transform .2s ease;
}
#site-header nav ul a:hover::after{transform:scaleX(0.4);}
#site-header nav ul li.current-menu-item > a,
#site-header nav ul li.current_page_item > a,
#site-header nav ul li.current-menu-ancestor > a,
#site-header nav ul li.current_page_ancestor > a{
	color:var(--schiefer); font-weight:600;
}
#site-header nav ul li.current-menu-item > a::after,
#site-header nav ul li.current_page_item > a::after,
#site-header nav ul li.current-menu-ancestor > a::after,
#site-header nav ul li.current_page_ancestor > a::after{
	transform:scaleX(1);
}

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

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

/* ---------- breadcrumbs ---------- */
.breadcrumbs{padding-block:16px;}
.breadcrumbs ol{
	list-style:none; display:flex; flex-wrap:wrap;
	font-size:0.8125rem; color:var(--text-mute);
}
.breadcrumbs li{display:flex; align-items:center;}
.breadcrumbs li:not(:last-child)::after{
	content:'/'; margin-inline:8px; color:var(--line-strong);
}
.breadcrumbs a{text-decoration:none; color:var(--text-mute); transition:color .15s;}
.breadcrumbs a:hover{color:var(--schiefer);}
.breadcrumbs li[aria-current="page"] span{color:var(--text-soft); font-weight:600;}

/* ---------- footer ---------- */
footer{
	padding-block:clamp(48px, 6vw, 72px) clamp(24px, 3vw, 36px);
	border-top:var(--kontur) solid var(--schiefer);
	background:var(--schiefer-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(--schiefer);}
.footer-spalten-titel{
	font-weight:700; font-size:0.8125rem;
	letter-spacing:0.05em; text-transform:uppercase; color:var(--schiefer);
	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-copyright{margin-left:auto;}
.footer-demo-hinweis{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-copyright{margin-left:0;}
}