/* =========================================================================
   demo-schreinerei.css — Eigenes Branding für Schreinerei Mustersberg
   Farbschema: warmes Braun #8b6f47 + Off-White + Orange #e85d04
   Wird NACH base/components.css geladen, überschreibt Tokens.
   Überschreibt auch die Demo-Preview-SVGs in der Portfolio-Karte.
   ========================================================================= */

[data-demo="schreinerei"] {
	/* Akzent für Möbel-Holz-Stimmung */
	--c-accent: #8b6f47;
	--c-accent-hover: #725633;
	--c-accent-soft: rgba(139, 111, 71, 0.1);
	--c-fg: #241c14;
	--c-bg: #faf7f2;
	--c-surface: #ffffff;
	--c-border: #241c14;
	--c-border-soft: rgba(139, 111, 71, 0.22);
}

[data-demo="schreinerei"] .site-nav__brand-mark {
	display: none;
}

[data-demo="schreinerei"] .site-nav__brand-logo {
	display: none;
}

[data-demo="schreinerei"] .card {
	border-color: rgba(139, 111, 71, 0.28);
	background: var(--c-surface);
}

[data-demo="schreinerei"] .card__eyebrow {
	color: #8b6f47;
	font-weight: var(--fw-bold);
	letter-spacing: 0.08em;
}

[data-demo="schreinerei"] .trust-pill {
	display: inline-flex;
	align-items: center;
	padding: 0.35rem 0.75rem;
	background: rgba(139, 111, 71, 0.09);
	border: 1px solid rgba(139, 111, 71, 0.32);
	color: #5c452b;
	font-size: var(--fs-small);
	font-weight: var(--fw-bold);
	border-radius: var(--radius);
}

[data-demo="schreinerei"] .filter-btn {
	border: var(--border-w) solid rgba(139, 111, 71, 0.35);
	background: var(--c-surface);
	color: var(--c-fg);
	padding: 0.4rem 0.85rem;
	font-size: var(--fs-small);
	font-weight: var(--fw-bold);
	cursor: pointer;
	border-radius: var(--radius);
	transition: all var(--t-hover);
}

[data-demo="schreinerei"] .filter-btn:hover {
	border-color: #8b6f47;
	color: #8b6f47;
}

[data-demo="schreinerei"] .filter-btn.is-active {
	background: #8b6f47;
	border-color: #8b6f47;
	color: #ffffff;
}

[data-demo="schreinerei"] .btn--accent {
	background: #8b6f47;
	border-color: #8b6f47;
	color: #fafaf7;
}

[data-demo="schreinerei"] .btn--accent:hover,
[data-demo="schreinerei"] .btn--accent:focus-visible {
	background: #725633;
	border-color: #725633;
	color: #fafaf7;
}

[data-demo="schreinerei"] .hero {
	background:
		linear-gradient(
			to bottom,
			rgba(250, 250, 247, 0.82) 20%,
			rgba(250, 250, 247, 0.25) 100%
		),
		url("../../demos/schreinerei-mustersberg/img/Hero.webp") no-repeat center /
		cover;
	border-bottom: var(--border-w-thick) solid #8b6f47;
}

@media (min-width: 768px) {
	[data-demo="schreinerei"] .hero {
		background:
			linear-gradient(
				to right,
				rgba(250, 250, 247, 0.9) 35%,
				rgba(250, 250, 247, 0.15) 100%
			),
			url("../../demos/schreinerei-mustersberg/img/Hero.webp") no-repeat center /
			cover;
	}
}

[data-demo="schreinerei"] .hero__eyebrow {
	color: #8b6f47;
}

[data-demo="schreinerei"] .hero__title {
	color: #2a1f15;
}

[data-demo="schreinerei"] .accent {
	color: #8b6f47;
}

[data-demo="schreinerei"] .card--featured {
	border-color: #8b6f47;
}

[data-demo="schreinerei"] .card__list li::before {
	color: #8b6f47;
}

[data-demo="schreinerei"] .data-table th {
	border-bottom-color: #8b6f47;
}

[data-demo="schreinerei"] .map {
	border-color: #8b6f47;
}

[data-demo="schreinerei"] .site-footer {
	background: #2a1f15;
	color: #fafaf7;
	border-top-color: #8b6f47;
}

[data-demo="schreinerei"] .site-footer a {
	color: #fafaf7;
}

[data-demo="schreinerei"] .site-footer a:hover {
	color: #8b6f47;
}

/* Demo-Banner unten: anderes Braun statt Akzent-Orange */
[data-demo="schreinerei"] .demo-banner {
	background: #8b6f47;
	color: #fafaf7;
}

[data-demo="schreinerei"] .demo-banner a {
	color: #fff;
	text-decoration: underline;
}

/* Hero-Art: Möbel-Silhouetten */
.hero__art {
	margin-top: var(--space-xl);
	border: var(--border-w) solid var(--c-border);
	background: var(--c-surface);
	padding: var(--space-md);
}

.hero__art svg {
	width: 100%;
	height: auto;
	display: block;
}

/* Galerie-Bilder in der Schreinerei-Demo (angepasst für Hochformat) */
[data-demo="schreinerei"] .card img {
	width: 100%;
	height: 280px;
	object-fit: cover;
	display: block;
	transition: transform var(--t-hover);
}

@media (min-width: 768px) {
	[data-demo="schreinerei"] .card img {
		height: 380px;
	}
}

[data-demo="schreinerei"] .card:hover img {
	transform: scale(1.04);
}

/* Burger-Menü-Anker: Section-IDs stoppen unter der Nav, nicht dahinter.
   IDs liegen auf <section>, daher scroll-margin-top direkt darauf. */
[data-demo="schreinerei"] section[id] {
	scroll-margin-top: 80px;
}

/* Burger-Menü: volle Breite klickbar auf Mobile. */
@media (max-width: 767px) {
	[data-demo="schreinerei"] .site-nav__menu-list a {
		display: flex;
		width: 100%;
		padding: var(--space-xs) var(--space-sm);
	}
}