/* ==========================================================================
   Design tokens
   Extracted from the real reference scrape (outputs/reutter-steinmetz.de/),
   specifically wp-content/uploads/thegem/css/custom-tQxkdLmE.css (the theme
   customizer's generated CSS) — not invented. Source theme there is "TheGem"
   (WPBakery-based, commercial) with the "Slider Revolution" and "LayerSlider"
   plugins for the hero; we don't own that CSS/JS, so these tokens are
   reimplemented as clean custom properties instead of copying TheGem's
   proprietary class names (thegem-*, vc_*, wpb_*).

   Font-family: 'Open Sans' is the confirmed heading font (h1/h2/menu rules in
   the customizer CSS). No explicit body font-family rule was found in the
   mirrored customizer CSS, so 'Open Sans' is used throughout for consistency
   (it is the most prominently loaded Google Font on the reference) rather
   than guessing at the decorative alternates also loaded (Indie Flower,
   Oswald, Montserrat) which are evidently used only for special accents.
   ========================================================================== */

:root {
	/* Colors */
	--color-primary: #a48361;   /* confirmed dominant brand color (59 occurrences) */
	--color-text: #333333;
	--color-heading: #2b2b2b;
	--color-muted: #929292;     /* found in customizer CSS as a secondary text tone */
	--color-border: #e0e0e0;
	--color-bg: #ffffff;
	--color-bg-alt: #f0f3f2;    /* confirmed page background tone from customizer CSS */
	--color-footer-bg: #2b2b2b;
	--color-footer-text: #cccccc;

	/* Typography */
	--font-body: 'Open Sans', sans-serif;
	--font-heading: 'Open Sans', sans-serif;
	--font-size-body: 16px;
	--line-height-body: 1.7;
	--font-size-h1: 42px;
	--font-size-h2: 32px;
	--font-size-h3: 24px;
	--font-size-h4: 20px;

	/* Layout */
	--container-width: 1170px;
	--header-height: 90px;
}

@media (max-width: 767px) {
	:root {
		--font-size-h1: 30px;
		--font-size-h2: 26px;
		--font-size-h3: 20px;
		--font-size-h4: 18px;
	}
}

/* ==========================================================================
   Base
   ========================================================================== */

*,
*::before,
*::after {
	box-sizing: border-box;
}

body {
	margin: 0;
	background-color: var(--color-bg);
	color: var(--color-text);
	font-family: var(--font-body);
	font-size: var(--font-size-body);
	line-height: var(--line-height-body);
	font-weight: 400;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-heading);
	font-weight: 600;
	color: var(--color-heading);
	margin: 0 0 20px;
	line-height: 1.3;
}

h1 { font-size: var(--font-size-h1); }
h2 { font-size: var(--font-size-h2); }
h3 { font-size: var(--font-size-h3); }
h4 { font-size: var(--font-size-h4); }

a {
	color: var(--color-primary);
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
}

img {
	max-width: 100%;
	height: auto;
	display: block;
}

.container {
	max-width: var(--container-width);
	margin: 0 auto;
	padding: 0 24px;
}

.section {
	padding: 60px 0;
}

.section--alt {
	background-color: var(--color-bg-alt);
}

blockquote {
	border-left: 3px solid var(--color-primary);
	margin: 24px 0;
	padding: 4px 0 4px 20px;
	font-style: italic;
	color: var(--color-heading);
}

/* ==========================================================================
   Buttons
   ========================================================================== */

.btn {
	display: inline-block;
	background-color: var(--color-primary);
	color: #ffffff;
	font-family: var(--font-heading);
	font-weight: 600;
	font-size: 15px;
	padding: 14px 32px;
	border: 0;
	border-radius: 2px;
	cursor: pointer;
	text-decoration: none;
	letter-spacing: 0.5px;
}

.btn:hover {
	background-color: #8a6c4d;
	text-decoration: none;
}

.btn-group {
	display: flex;
	gap: 16px;
	flex-wrap: wrap;
}

/* ==========================================================================
   Site header
   ========================================================================== */

.site-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 20px;
	max-width: var(--container-width);
	margin: 0 auto;
	padding: 20px 24px;
	min-height: var(--header-height);
}

.site-logo img {
	height: 56px;
	width: auto;
}

.main-nav ul {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.main-nav a {
	display: inline-block;
	padding: 10px 16px;
	color: var(--color-heading);
	font-family: var(--font-heading);
	font-weight: 600;
	font-size: 14px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	text-decoration: none;
}

.main-nav a:hover,
.main-nav a:focus {
	color: var(--color-primary);
}

/* ==========================================================================
   Hero (Startseite)
   ========================================================================== */

.hero {
	position: relative;
	min-height: 480px;
	display: flex;
	align-items: center;
	background-size: cover;
	background-position: center;
	color: #ffffff;
}

.hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.42);
}

.hero-content {
	position: relative;
	z-index: 1;
	max-width: var(--container-width);
	margin: 0 auto;
	padding: 60px 24px;
}

.hero-content h1,
.hero-content p {
	color: #ffffff;
}

.hero-signature {
	font-style: italic;
	color: #f0f0f0;
}

/* ==========================================================================
   Site content
   ========================================================================== */

.site-content {
	max-width: var(--container-width);
	margin: 0 auto;
	padding: 60px 24px;
}

.site-content--legal {
	max-width: 780px;
}

.site-content--legal h2 {
	margin-top: 40px;
}

.site-content--legal h3 {
	margin-top: 28px;
}

/* Teaser grid (Startseite: 3 Leistungs-Kacheln) */

.teaser-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 32px;
	margin-top: 40px;
}

.teaser-card {
	padding: 32px;
	background-color: var(--color-bg-alt);
	border-top: 3px solid var(--color-primary);
}

.teaser-card h3 {
	margin-bottom: 12px;
}

/* Leistungen-Seite */

.leistungen-section {
	margin-bottom: 60px;
	padding-top: 20px;
	border-top: 1px solid var(--color-border);
}

.leistungen-section ul {
	padding-left: 20px;
}

.leistungen-section li {
	margin-bottom: 8px;
}

/* Firmengeschichte (Über uns) */

.firmengeschichte {
	list-style: none;
	margin: 0;
	padding: 0;
}

.firmengeschichte li {
	padding: 20px 0;
	border-bottom: 1px solid var(--color-border);
}

.firmengeschichte .jahr {
	font-family: var(--font-heading);
	font-weight: 700;
	color: var(--color-primary);
	font-size: 20px;
	display: block;
	margin-bottom: 6px;
}

/* ==========================================================================
   Referenzen-Galerie
   ========================================================================== */

.referenzen-filter {
	display: flex;
	gap: 12px;
	margin-bottom: 32px;
	flex-wrap: wrap;
}

.referenzen-filter a {
	padding: 8px 18px;
	border: 1px solid var(--color-border);
	color: var(--color-heading);
	font-size: 14px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.referenzen-filter a.active,
.referenzen-filter a:hover {
	background-color: var(--color-primary);
	border-color: var(--color-primary);
	color: #ffffff;
	text-decoration: none;
}

.referenzen-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 24px;
}

.referenzen-item {
	position: relative;
	overflow: hidden;
}

.referenzen-item img {
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
}

.referenzen-item .kategorie {
	position: absolute;
	bottom: 12px;
	left: 12px;
	background-color: rgba(0, 0, 0, 0.6);
	color: #ffffff;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	padding: 4px 10px;
}

/* ==========================================================================
   Formulare (Kontakt, Katalog anfordern)
   ========================================================================== */

.form-group {
	margin-bottom: 20px;
}

.form-group label {
	display: block;
	margin-bottom: 6px;
	font-weight: 600;
}

.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="tel"],
.form-group textarea,
.form-group select {
	width: 100%;
	padding: 12px 14px;
	border: 1px solid var(--color-border);
	font-family: var(--font-body);
	font-size: 15px;
}

.contact-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 48px;
}

.contact-info h3 {
	margin-top: 24px;
}

.contact-info h3:first-child {
	margin-top: 0;
}

/* ==========================================================================
   Site footer
   ========================================================================== */

.site-footer {
	background-color: var(--color-footer-bg);
	color: var(--color-footer-text);
	padding: 40px 24px;
	margin-top: 60px;
}

.site-footer-inner {
	max-width: var(--container-width);
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 20px;
}

.site-footer a {
	color: var(--color-footer-text);
}

.site-footer a:hover {
	color: var(--color-primary);
}

.site-footer-nav ul {
	display: flex;
	gap: 20px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.site-footer-copyright {
	width: 100%;
	margin-top: 20px;
	padding-top: 20px;
	border-top: 1px solid rgba(255, 255, 255, 0.15);
	font-size: 13px;
	color: #999999;
}