/* Engravous — "Über uns" page (page-ueber-uns.php).
   Loaded after tokens.css / base.css / layout.css. Layout containers (.eg-container)
   and the kicker (.eg-kicker) come from base.css; everything below is page-specific.
   Values are the mockup's inline values (isAbout screen), colors via tokens only. */

.eg-about {
	/* Mockup body copy uses #4a5a58 (not a token): shared --eg-muted if base.css defines it,
	   otherwise the same text/bg mix the front page uses, so both pages match. */
	--eg-about-muted: var(--eg-muted, color-mix(in srgb, var(--color-text) 78%, var(--color-bg)));
	/* Mockup dark panel #293636: shared --eg-dark from layout.css (always loaded), else darkest neutral. */
	--eg-about-dark: var(--eg-dark, var(--color-neutral-900));
	/* The mockup's rgba(245,234,216,x) tints on the dark panel, derived from --color-bg. */
	--eg-about-on-dark: color-mix(in srgb, var(--color-bg) 80%, transparent);
	--eg-about-on-dark-line: color-mix(in srgb, var(--color-bg) 40%, transparent);
}

/* Kicker typography as in the mockup; identical to base.css .eg-kicker, scoped here so the
   page keeps its look even if that file loads late. Per-section margins are set below. */
.eg-about .eg-kicker {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.32em;
	text-transform: uppercase;
	color: var(--color-accent-700);
}

/* ── shared image block ─────────────────────────────────────────────────── */
.eg-about-media {
	position: relative;
	overflow: hidden;
	border-radius: var(--radius-lg);
	background: var(--color-surface);
}
.eg-about-media--banner { height: 500px; }
.eg-about-media--portrait { aspect-ratio: 4 / 5; }
.eg-about-media--wide { aspect-ratio: 3 / 2; }
.eg-about-media__img,
.eg-about-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* ── intro ──────────────────────────────────────────────────────────────── */
.eg-about-intro { padding: 96px 0 80px; }
.eg-about-intro__inner { max-width: 888px; } /* mockup: section max-width 1000px incl. 56px side padding */
.eg-about-intro .eg-kicker { margin-bottom: 26px; }
.eg-about-intro__title {
	font-size: 58px;
	line-height: 1.05;
	margin: 0 0 28px;
	max-width: 17ch;
}
.eg-about-intro__lead {
	font-size: 20px;
	line-height: 1.6;
	color: var(--eg-about-muted);
	max-width: 56ch;
	margin: 0;
}
.eg-about-editor {
	margin-top: 28px;
	max-width: 58ch;
	font-size: 17px;
	line-height: 1.75;
	color: var(--eg-about-muted);
}
.eg-about-editor p { margin: 0 0 18px; }
.eg-about-editor > :last-child { margin-bottom: 0; }
.eg-about-editor h2,
.eg-about-editor h3 { color: var(--color-text); margin: 32px 0 12px; }
.eg-about-editor h2 { font-size: 30px; }
.eg-about-editor h3 { font-size: 22px; }
.eg-about-editor img { border-radius: var(--radius-md); }

/* ── banner image ───────────────────────────────────────────────────────── */
.eg-about-banner { padding: 0 0 88px; }

/* ── story ──────────────────────────────────────────────────────────────── */
.eg-about-story { padding: 0 0 96px; }
.eg-about-story__grid {
	display: grid;
	grid-template-columns: 0.85fr 1.15fr;
	gap: 72px;
}
.eg-about-story__media,
.eg-about-story__body { min-width: 0; }
.eg-about-story__caption {
	font-size: 12px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--color-neutral-700);
	margin-top: 16px;
}
.eg-about-story__title {
	font-size: 38px;
	margin: 0 0 24px;
	max-width: 19ch;
}
.eg-about-story__text {
	font-size: 17px;
	line-height: 1.75;
	color: var(--eg-about-muted);
	margin: 0 0 18px;
	max-width: 58ch;
}
.eg-about-story__text--last { margin-bottom: 32px; }

.eg-about-stats {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
	padding: 30px 0 0;
	margin: 0;
	list-style: none;
	border-top: 1px solid var(--color-divider);
}
.eg-about-stats--4 { grid-template-columns: repeat(4, 1fr); }
.eg-about-stats--3 { grid-template-columns: repeat(3, 1fr); }
.eg-about-stats--2 { grid-template-columns: repeat(2, 1fr); }
.eg-about-stats--1 { grid-template-columns: 1fr; }
.eg-about-stat { min-width: 0; }
.eg-about-stat__num {
	font-family: var(--font-heading);
	font-weight: var(--font-heading-weight);
	font-size: 34px;
	line-height: 1;
}
.eg-about-stat__label {
	font-size: 13px;
	color: var(--color-neutral-700);
	margin-top: 8px;
}

/* ── process / four steps ───────────────────────────────────────────────── */
.eg-about-process {
	background: var(--color-surface);
	padding: 88px 0;
}
.eg-about-process .eg-kicker { margin-bottom: 14px; }
.eg-about-process__title {
	font-size: 40px;
	margin: 0 0 48px;
	max-width: 22ch;
}
.eg-about-steps {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 32px;
	list-style: none;
	margin: 0;
	padding: 0;
}
.eg-about-step { min-width: 0; }
.eg-about-step__no {
	width: 52px;
	height: 52px;
	border-radius: 999px;
	border: 2.75px solid var(--color-accent);
	display: grid;
	place-items: center;
	font-family: var(--font-heading);
	font-weight: var(--font-heading-weight);
	font-size: 19px;
	color: var(--color-accent-700);
	margin-bottom: 20px;
}
.eg-about-step__title {
	font-family: var(--font-heading);
	font-weight: var(--font-heading-weight);
	font-size: 21px;
	line-height: 1.12;
	margin: 0 0 10px;
}
.eg-about-step__body {
	font-size: 15px;
	line-height: 1.7;
	color: var(--eg-about-muted);
	margin: 0;
}

/* ── material ───────────────────────────────────────────────────────────── */
.eg-about-material { padding: 88px 0; }
.eg-about-material__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 64px;
	align-items: center;
}
.eg-about-material__body,
.eg-about-material__media { min-width: 0; }
.eg-about-material__title {
	font-size: 36px;
	margin: 0 0 20px;
	max-width: 18ch;
}
.eg-about-material__text {
	font-size: 17px;
	line-height: 1.75;
	color: var(--eg-about-muted);
	max-width: 50ch;
	margin: 0 0 22px;
}
.eg-about-tags {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
}
.eg-about-tags .eg-about-tag {
	padding: 8px 18px;
	font-size: 13px;
}

/* ── closing CTA ────────────────────────────────────────────────────────── */
.eg-about-cta { padding: 0 0 88px; }
.eg-about-cta__box {
	background: var(--eg-about-dark);
	border-radius: calc(var(--radius-lg) * 1.15);
	padding: 64px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 56px;
}
.eg-about-cta__copy { min-width: 0; }
.eg-about-cta__title {
	font-size: 36px;
	margin: 0 0 12px;
	color: var(--color-bg);
	max-width: 18ch;
}
.eg-about-cta__text {
	font-size: 17px;
	line-height: 1.65;
	color: var(--eg-about-on-dark);
	margin: 0;
	max-width: 48ch;
}
.eg-about-cta__actions {
	display: flex;
	gap: 12px;
	flex: none;
}
.eg-about-cta__btn { font-size: 15px; }
.eg-about-cta__btn--primary {
	background: var(--color-accent);
	color: var(--color-bg);
	padding: 15px 30px;
}
.eg-about-cta__btn--primary:hover { color: var(--color-bg); }
.eg-about-cta__btn--secondary {
	color: var(--color-bg);
	border-color: var(--eg-about-on-dark-line);
	padding: 15px 28px;
}
.eg-about-cta__btn--secondary:hover {
	color: var(--color-bg);
	background: color-mix(in srgb, var(--color-bg) 10%, transparent);
}
.eg-about-cta__btn--secondary:active {
	background: color-mix(in srgb, var(--color-bg) 18%, transparent);
}

/* ── responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
	.eg-about-intro { padding: 80px 0 64px; }
	.eg-about-intro__title { font-size: 48px; }
	.eg-about-media--banner { height: 400px; }
	.eg-about-story__grid { gap: 48px; }
	.eg-about-story__title { font-size: 34px; }
	.eg-about-process__title,
	.eg-about-material__title,
	.eg-about-cta__title { font-size: 34px; }
	.eg-about-steps { grid-template-columns: repeat(2, 1fr); gap: 40px 32px; }
	.eg-about-material__grid { gap: 40px; }
	.eg-about-cta__box { padding: 48px; gap: 40px; }
}

@media (max-width: 900px) {
	.eg-about-story__grid,
	.eg-about-material__grid { grid-template-columns: 1fr; }
	.eg-about-story__media { max-width: 480px; }
	.eg-about-material__media { order: -1; }
	.eg-about-cta__box {
		flex-direction: column;
		align-items: flex-start;
	}
}

@media (max-width: 720px) {
	.eg-about-intro { padding: 56px 0 44px; }
	.eg-about-intro .eg-kicker { margin-bottom: 18px; }
	.eg-about-intro__title { font-size: 38px; margin-bottom: 20px; }
	.eg-about-intro__lead { font-size: 18px; }
	.eg-about-banner { padding-bottom: 56px; }
	.eg-about-media--banner { height: 280px; }
	.eg-about-story { padding-bottom: 64px; }
	.eg-about-story__title { font-size: 30px; }
	.eg-about-stats--4,
	.eg-about-stats--3 { grid-template-columns: repeat(2, 1fr); }
	.eg-about-stat__num { font-size: 30px; }
	.eg-about-process,
	.eg-about-material { padding: 64px 0; }
	.eg-about-process__title { margin-bottom: 36px; }
	.eg-about-process__title,
	.eg-about-material__title,
	.eg-about-cta__title { font-size: 30px; }
	.eg-about-steps { grid-template-columns: 1fr; gap: 32px; }
	.eg-about-cta { padding-bottom: 64px; }
	.eg-about-cta__box { padding: 36px 24px; gap: 28px; border-radius: var(--radius-lg); }
	.eg-about-cta__actions { flex-wrap: wrap; }
}