/* =========================================================================
   bmh — design tokens
   Values verified directly against the Figma file (key 0NJAQQj62Qm6uGR4ceIdrQ),
   not estimated. Only ONE commercial font is actually used in the design
   (Univers LT Std, weight 400, everywhere) — an initial read of the Über
   mich paragraph's top-level text style suggested a second font ("Pais",
   bold), but the node's character-level styleOverrideTable showed that
   was misleading: the rendered text is plain Univers 400 throughout, with
   four phrases recolored (not re-fonted) — see bmh_highlight_keywords()
   in inc/setup.php. Font stack below is a placeholder until Carlos
   provides the licensed Univers LT Std webfont files (see assets/fonts/).
   ========================================================================= */

:root {
	/* Colors — verified per-node fills, no Figma "styles" existed to pull from. */
	--color-text: #000000;
	--color-bg: #ffffff;
	--color-accent-tan: #c1baa4;   /* "no-photo" Projekte tile fill, site-title, Über mich keyword highlights */
	--color-accent-beige: #dad6c8; /* header headline */
	--color-logo-light: #e9e7df;

	/* Font — placeholder (system stack) until the licensed file is provided. */
	--font-display: 'Univers LT Std', Arial, Helvetica, sans-serif;

	/* Fluid type scale, named by the Figma pixel size they replace.
	   clamp() avoids hard jumps at breakpoints — see responsive notes below. */
	--fs-90: clamp(2.5rem, 1rem + 6vw, 5.625rem);
	--fs-52: clamp(2rem, 1rem + 4vw, 3.25rem);
	--fs-34: clamp(1.5rem, 1rem + 2vw, 2.125rem);
	--fs-21: clamp(1.125rem, 0.9rem + 1vw, 1.3125rem);
	--fs-15: clamp(0.875rem, 0.75rem + 0.5vw, 0.9375rem);

	--container-max: 1440px;
	--gutter: clamp(1rem, 3vw, 3rem);
}

/* =========================================================================
   Reset
   ========================================================================= */

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

html {
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	color: var(--color-text);
	/* Correction: an earlier pass read three #D9D9D9 rectangles in the
	   Figma JSON as a page-wide grey background. Rendering the actual
	   frame via Figma's image export (not just its node data) showed
	   those rectangles are fully obscured placeholder/scaffolding shapes
	   sitting behind photos and text — the real page is white throughout. */
	background: var(--color-bg);
	font-family: var(--font-display);
	font-size: var(--fs-21);
	line-height: 1.5;
}

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

a {
	color: inherit;
}

.container {
	max-width: var(--container-max);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

/* =========================================================================
   Header / Hero
   Flexbox: this is a 1D layout (logo + title on one side, nav on the
   other), not a grid — see plan notes on Flexbox vs. Grid usage.
   ========================================================================= */

.site-header {
	/* Verified in Figma: logo (y=50), title (y=46), and all three nav
	   items (y=48) are top-aligned within 4px of each other — not
	   vertically centered against each other as align-items: center
	   did. The 48px gap from the page's own top edge to this content is
	   also real (not arbitrary padding) — 48px ≈ 3rem. */
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 1.5rem;
	padding-top: 3rem;
	padding-bottom: 1.5rem;
}

.site-branding {
	/* Verified in Figma: title text starts at y=46, logo at y=50 — top
	   aligned (the text is even a hair above the logo's own top edge),
	   not vertically centered against the taller logo as this was. */
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
}

.site-branding img {
	width: 120px;
	height: 120px;
}

@media (max-width: 639px) {
	.site-branding img {
		width: 60px;
		height: 60px;
	}
}

.site-title {
	/* Figma's title is a fixed 21px two-line label (see header-hero.php's
	   line-break split) — a fluid clamp() made it look undersized next to
	   the (now correctly 120px) logo, so this stays fixed rather than
	   shrinking with the viewport like the larger heading text does. */
	font-size: 21px;
	line-height: 1.38;
	color: var(--color-accent-tan);
	text-decoration: none;
}

.primary-nav ul {
	display: flex;
	flex-wrap: wrap;
	/* Measured directly from Figma: 206px gap between nav items at the
	   1440px reference width — 206/1440 ≈ 14.3vw reaches that value right
	   at the reference width instead of needing a much wider viewport
	   (an earlier 10vw coefficient left this visibly too tight). */
	gap: clamp(1.5rem, 14.3vw, 12.875rem);
	list-style: none;
	margin: 0;
	padding: 0;
}

.primary-nav a {
	font-size: var(--fs-21);
	text-decoration: none;
}

/* Headline — static (verified: Figma has no animation/interaction data
   on this node at all), oversized and cropped at the container edge on
   purpose. white-space: pre preserves the literal 4-space gaps between
   words in the source text — HTML would otherwise collapse them, which
   is why this got misread as an animated ticker in an earlier pass. */
.headline {
	position: relative;
	overflow: hidden;
	/* No content sets an explicit height here — reserve one so the
	   absolutely positioned text below (which no longer contributes to
	   normal flow) still gets vertical space equal to a real line. */
	height: calc(var(--fs-90) * 1.2 + clamp(1rem, 4vw, 3rem) * 2);
}

/* Figma's text box starts at x=-157px relative to the 1440px frame —
   already scrolled past its own left edge, so the visible crop begins
   mid-word ("...hung Statik...", missing "Pla"). Two earlier attempts
   (text-indent, then a negative margin on an inline-block) both had no
   visible clipping effect in testing — negative margins/indents on a
   normal-flow child don't reliably get clipped by an ancestor's
   overflow: hidden across browsers. Absolute positioning does: it's
   fully out of flow, so `left` can place it wherever needed and the
   ancestor's overflow: hidden clips it exactly like any other
   out-of-flow content. -157/90 ≈ -1.744em keeps the proportional
   offset as the font-size scales fluidly. */
.headline__text {
	position: absolute;
	top: 50%;
	left: -1.744em;
	transform: translateY(-50%);
	white-space: pre;
	font-size: var(--fs-90);
	color: var(--color-accent-beige);
}

/* =========================================================================
   Hero image banner — Flexbox (two images side by side, stack on mobile).
   ========================================================================= */

.hero-banner {
	display: flex;
	gap: 0;
}

.hero-banner__link {
	position: relative;
	flex: 1 1 50%;
	display: block;
	text-decoration: none;
}

.hero-banner__link img {
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	display: block;
}

/* Mirrors the Figma prototype's ON_HOVER interaction on each hero image —
   the 52px label only exists in Figma's hover-state frames, so it's
   hidden by default and revealed on hover/focus here. Verified position
   in that overlay frame: (50px, 873px) inside a 720x480 image starting
   at (0, 480) — bottom-left with a 50px left inset (same convention as
   the logo/heading margins elsewhere), ~35px from the bottom, not
   centered. */
.hero-banner__label {
	/* Verified against the actual overlay text node (not assumed from
	   its bounding-box height, which was a wrong 52px guess): real size
	   is 34px, color #F5F5F5, and there is no darkening scrim in Figma —
	   just the label over the image's own existing tone. */
	position: absolute;
	inset: 0;
	display: flex;
	align-items: flex-end;
	justify-content: flex-start;
	padding: 0 0 35px 50px;
	font-size: var(--fs-34);
	color: #f5f5f5;
	opacity: 0;
	transition: opacity 0.2s ease;
}

.hero-banner__link:hover .hero-banner__label,
.hero-banner__link:focus-visible .hero-banner__label {
	opacity: 1;
}

@media (max-width: 639px) {
	.hero-banner {
		flex-direction: column;
	}
}

/* =========================================================================
   Über mich
   ========================================================================= */

.section-ueber-mich {
	padding-block: clamp(2rem, 6vw, 5rem);
}

.section-ueber-mich p {
	font-family: var(--font-display);
	font-weight: 400;
	font-size: var(--fs-34);
	line-height: 1.4;
	max-width: 65ch;
	margin: 0;
}

/* Service-keyword highlights within the Über mich paragraph — see
   bmh_highlight_keywords() in inc/setup.php. */
.text-accent {
	color: var(--color-accent-tan);
}

/* =========================================================================
   Projekte
   Flexbox for the section's own two-column shell (sidebar + grid area —
   that's a 1D split), CSS Grid for the tile grid itself, which is a real
   2D layout (3x4 fixed tiles in the Figma source).
   ========================================================================= */

.section-projekte {
	/* Background now comes from body — this section isn't a distinct
	   grey "card," it's part of one continuous grey page background
	   that also covers the hero/Über-mich and Kontakt/footer regions. */
	padding-block: clamp(2rem, 6vw, 5rem);
}

.projekte {
	display: flex;
	flex-wrap: wrap;
	gap: clamp(1.5rem, 4vw, 3rem);
}

.projekte__sidebar {
	flex: 1 1 300px;
	max-width: 360px;
}

.projekte__sidebar h2 {
	font-size: var(--fs-34);
	font-weight: 400;
	/* Figma has ~74px between this heading and the list start (two blank
	   lines at the list's own 25px line-height) — fluid to stay
	   consistent with the rest of the type scale rather than a fixed px
	   value, compressing proportionally on smaller screens. */
	margin-block-end: clamp(2rem, 4vw, 4.5rem);
}

.projekte__sidebar-list {
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: var(--fs-15);
}

.projekte__sidebar-list li {
	padding-block: 0.25rem;
}

.projekte__grid {
	flex: 3 1 720px;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 0;
}

@media (max-width: 1023px) {
	.projekte__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 639px) {
	.projekte__grid {
		grid-template-columns: 1fr;
	}
}

.tile {
	position: relative;
	aspect-ratio: 3 / 2;
	overflow: hidden;
}

.tile img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* The Figma-verified "no photo" treatment for a projekt with no featured
   image — an actual designed state (flat tan fill + white label), not a
   generic placeholder box. See template-parts/projekt-tile.php. */
.tile--no-photo {
	/* Verified identically across all 3 instances in Figma: the label
	   sits (20px, 17px) from the tile's top-left corner, not centered. */
	background: var(--color-accent-tan);
	display: flex;
	align-items: flex-start;
	justify-content: flex-start;
	padding: 17px 20px;
}

.tile--no-photo .tile__label {
	color: #fff;
	font-size: var(--fs-21);
}

/* =========================================================================
   Kontakt — Flexbox (stacks naturally; phone/email are real links).
   ========================================================================= */

.section-kontakt {
	padding-block: clamp(2rem, 6vw, 5rem);
}

.section-kontakt h2 {
	font-size: var(--fs-34);
	font-weight: 400;
	/* Figma has ~65px between this heading and the address block —
	   same fluid approach as the Projekte sidebar heading above. */
	margin-block-end: clamp(2rem, 3.5vw, 4rem);
}

.kontakt-details {
	display: flex;
	flex-direction: column;
	/* Gap between the two groups (address vs. contact) reproduces
	   Figma's literal blank line; each group's own lines sit tighter. */
	gap: 1.5rem;
	/* Figma's address text is 15px, not 21px; font-style: normal
	   overrides the browser default UA stylesheet, which italicizes the
	   <address> element unless told otherwise (not a Figma-derived
	   style — Figma reports this text as regular/non-italic). */
	font-size: var(--fs-15);
	font-style: normal;
}

.kontakt-details__group {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
}

.kontakt-details a {
	text-decoration: none;
}

/* =========================================================================
   Generic page content (Impressum, Datenschutzerklärung).
   ========================================================================= */

.page-content {
	padding-block: clamp(2rem, 6vw, 3rem);
}

/* =========================================================================
   Footer — Flexbox, wraps/stacks at small sizes.
   ========================================================================= */

.site-footer {
	display: flex;
	justify-content: flex-end;
	padding-block: 2rem;
}

.footer-legal-nav ul {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.5rem;
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: var(--fs-15);
}

.footer-legal-nav a {
	text-decoration: none;
}