@scope (.bf-bp) {
	/**
	 * Boligpriser ([bf_boligpriser]) — hub / region / kommune.
	 *
	 * Uses the theme design tokens from style.css (--ink, --paper, --paper-warm, --coral, --line,
	 * --stone, Instrument Serif / Inter). The boligtype toggle is pure CSS: the root .bf-bp carries
	 * data-boligtype, and the rules at the bottom reveal the matching .bf-bp-val / .bf-bp-type-pane.
	 */

	/* The theme loads these fonts but does NOT expose them as CSS variables, so define them here —
	   otherwise every var(--font-mono)/var(--font-serif) below silently falls back to the body font. */
	:scope {
		--font-serif: "Instrument Serif", Georgia, serif;
		--font-sans: "Inter", system-ui, -apple-system, sans-serif;
		--font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
		--card: #fffcf4;
		--sand: #E8E0D1;
		--red: #D9472B;
		--coral-soft: #FFDED5;
		font-family: var(--font-sans), sans-serif; color: var(--ink);
	}
	:scope * { box-sizing: border-box; }
	:scope .fs-wrap { max-width: 1200px; margin: 0 auto; padding: 0 40px; width: 100%; }
	:scope h1, :scope h2, :scope h3 { font-family: var(--font-serif, "Instrument Serif", Georgia, serif), serif; font-weight: 400; margin: 0; line-height: 1.08; }
	:scope em { font-style: italic; color: var(--coral); }
	:scope a { color: inherit; text-decoration: none; }

	.bf-bp-h1 { font-size: clamp(40px, 5.5vw, 68px); }
	.bf-bp-h2 { font-size: clamp(32px, 4vw, 44px); margin-bottom: 8px; }
	/* ---- eyebrow design system: one base + size/colour modifiers, reused across every section ----
	   base = section eyebrow (11px, stone). Modifiers: --sm/--xs size, --coral/--mist/--mist-light/--ink colour. */
	.bf-bp-eyebrow { font-family: var(--font-mono), monospace; font-style: normal; text-transform: uppercase; font-size: 11px; letter-spacing: .08em; color: var(--stone); }
	.bf-bp-eyebrow--sm { font-size: 10px; }
	.bf-bp-eyebrow--xs { font-size: 9px; }
	.bf-bp-eyebrow--coral { color: var(--coral); }
	.bf-bp-eyebrow--mist { color: var(--mist, #9FB8B3); }
	.bf-bp-eyebrow--mist-light { color: var(--mist-light, #D1DDD9); }
	.bf-bp-eyebrow--ink { color: var(--ink); }

	/* ---- card system: the recurring bordered panel; radius/padding stay per-component ---- */
	.bf-bp-card { background: var(--card, #FFFCF4); border: 1px solid var(--line); }
	.bf-bp-card--white { background: #fff; }

	/* ---- section-head system: the "heading beside intro" two-column grid ---- */
	.bf-bp-head { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: start; }

	/* ---- button colour system: bg + text + hover per variant; each button keeps its own size/shape ---- */
	.bf-bp-btn--coral { background: var(--coral); color: #fff; }
	.bf-bp-btn--coral:hover { background: var(--coral-hover, #E85A40); }
	.bf-bp-btn--ink { background: var(--ink); color: #fff; }
	.bf-bp-btn--ink:hover { background: var(--ink-deep, #07272C); }
	.bf-bp-btn--outline { background: transparent; color: var(--ink); border: 1px solid var(--ink); }
	.bf-bp-btn--outline:hover { background: var(--paper-warm); }
	.bf-bp-btn--ghost { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.7); }
	.bf-bp-btn--ghost:hover { border-color: #fff; background: rgba(255,255,255,.08); }

	/* ---- number/display system: the serif figures (prices, stats, card titles) ---- */
	.bf-bp-num { font-family: var(--font-serif), serif; }

	/* ---- body/prose text: muted paragraph; --sm/--xs size, --light on dark sections ---- */
	.bf-bp-prose { font-size: 16px; line-height: 1.65; color: var(--stone); }
	.bf-bp-prose--sm { font-size: 15px; }
	.bf-bp-prose--xs { font-size: 14px; }
	.bf-bp-prose--light { color: var(--mist-light, #D1DDD9); }
	.bf-bp-sektion-intro { max-width: 640px; margin: 0 0 24px; }

	/* ---- section rhythm + backgrounds (region-table section + legacy; still unscoped) ---- */
	.bf-bp-tabel-sektion { background: var(--paper); padding: 88px 0; }
	.bf-bp-andre { background: var(--paper-warm); padding: 72px 0; }

	/* ---- breadcrumbs ---- */
	.bf-bp-krumme { font-family: var(--font-mono), monospace; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--mist, #9FB8B3); display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 28px; }
	.bf-bp-krumme a:hover { color: var(--coral); }
	.bf-bp-krumme span[aria-current] { color: #fff; }
	.bf-bp-krumme-sep { opacity: .5; }
	.bf-bp-nu .bf-bp-krumme, .bf-bp-alle .bf-bp-krumme { color: var(--stone); }

	/* ---- hero ---- */
	@scope (.bf-bp-hero) {
		:scope { background: var(--ink); color: #fff; padding: 36px 0 104px; }
		:scope .bf-bp-h2, :scope h1 { color: #fff; }
		:scope em { color: var(--coral); }
		.bf-bp-hero-grid { display: grid; grid-template-columns: 524fr 575fr; gap: 64px; align-items: center; }
		.bf-bp-hero-tekst { display: flex; flex-direction: column; gap: 28px; min-width: 0; }
		:scope .bf-bp-h1 { font-size: clamp(44px, 5.2vw, 68px); line-height: 1.05; color: #fff; }
		.bf-bp-hero-intro { color: rgba(255,255,255,.88); margin: 0; }

		/* search */
		.bf-bp-sog { position: relative; display: flex; align-items: center; gap: 12px; background: #fff; border-radius: 8px; padding: 6px 6px 6px 18px; }
		.bf-bp-sog-resultater { position: absolute; z-index: 30; top: calc(100% + 8px); left: 0; right: 0; padding: 6px; background: #fff; border-radius: 10px; box-shadow: 0 12px 30px rgba(11,59,54,.22); max-height: 340px; overflow: auto; }
		.bf-bp-sog-resultater[hidden] { display: none; }
		.bf-bp-sog-resultater .bf-bp-sog-item { display: block; padding: 11px 14px; border-radius: 7px; color: var(--ink); font-size: 15px; text-decoration: none; cursor: pointer; }
		.bf-bp-sog-resultater .bf-bp-sog-item:hover, .bf-bp-sog-resultater .bf-bp-sog-item.is-active { background: var(--paper-warm, #F1ECDE); color: var(--ink); }
		.bf-bp-sog-ikon { display: flex; color: #6b6f70; flex-shrink: 0; }
		.bf-bp-sog-input { flex: 1; min-width: 0; border: 0; background: transparent; font-size: 15px; color: var(--ink); font-family: inherit; }
		.bf-bp-sog-input::placeholder { color: #6b6f70; }
		.bf-bp-sog-input:focus { outline: none; }
		.bf-bp-sog-knap { flex-shrink: 0; border: 0; font-size: 14px; font-weight: 500; font-family: inherit; padding: 13px 22px; border-radius: 6px; cursor: pointer; transition: background .15s; }

		/* shortcuts */
		.bf-bp-genveje { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; font-size: 13px; margin: 0; }
		.bf-bp-genveje-lbl { color: rgba(209,221,217,.8); }
		.bf-bp-genveje a { color: #fff; font-weight: 500; text-decoration: underline; text-underline-offset: 2px; }
		.bf-bp-genveje a:hover { color: var(--coral); }

		/* Denmark map */
		.bf-bp-hero-kort { min-width: 0; }
		.bf-bp-kort { position: relative; background: #fffcf4; border-radius: 10px; padding: 24px 27px; }
		.bf-bp-kort svg.bf-kort { width: 100%; height: auto; display: block; overflow: visible; }
		.bf-bp-kort a[data-region] { cursor: pointer; }
		.bf-bp-kort a[data-region] .r { transition: fill .12s; }
		/* Override the inlined map SVG's own \3c style>.r{fill:…}. Literal coral (not var()) keeps the fill
		   robust on the SVG <path>; !important guarantees it beats the embedded rule. */
		.bf-bp-kort a[data-region]:hover .r, .bf-bp-kort a[data-region].is-active .r { fill: #FF6B50 !important; }
		.bf-bp-kort-tip { position: absolute; z-index: 3; pointer-events: none; display: flex; flex-direction: column; gap: 4px; background: var(--ink); border-radius: 8px; padding: 12px 14px; white-space: nowrap; box-shadow: 0 6px 18px rgba(11,59,54,.25); transform: translate(-50%, 12px); }
		.bf-bp-kort-tip[hidden] { display: none; }
		.bf-bp-kort-tip-navn { font-family: var(--font-mono), monospace; font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: #d1ddd9; }
		.bf-bp-kort-tip-pris { display: flex; align-items: baseline; gap: 5px; line-height: 1; }
		.bf-bp-kort-tip-pris b { font-weight: 400; font-size: 28px; color: #fff; }
		.bf-bp-kort-tip-pris i { font-style: normal; font-size: 14px; color: #d1ddd9; }
		.bf-bp-kort-tip-yoy { font-size: 12px; color: rgba(255,255,255,.9); }

		/* region kr/m² cards */
		.bf-bp-region-rk { margin-top: 36px; }
		.bf-bp-mono-eyebrow { margin: 0 0 14px; }
		.bf-bp-region-kort { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
		.bf-bp-region-kort-item { display: flex; flex-direction: column; gap: 14px; background: rgba(255,255,255,.05); border-radius: 10px; padding: 18px 20px; transition: background .12s; }
		.bf-bp-region-kort-item:hover, .bf-bp-region-kort-item.is-active { background: rgba(255,255,255,.12); }
		.bf-bp-region-kort-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
		.bf-bp-region-kort-navn { display: flex; flex-direction: column; gap: 2px; font-size: 15px; font-weight: 500; color: #fff; }
		.bf-bp-region-kort-navn small { font-size: 13px; font-weight: 400; color: rgba(209,221,217,.8); }
		.bf-bp-region-kort-chevron { color: rgba(255,255,255,.45); font-size: 16px; line-height: 1; transition: color .12s; }
		.bf-bp-region-kort-item:hover .bf-bp-region-kort-chevron, .bf-bp-region-kort-item.is-active .bf-bp-region-kort-chevron { color: var(--coral); }
		.bf-bp-region-kort-pris { display: flex; align-items: baseline; gap: 5px; }
		.bf-bp-region-kort-pris b { font-weight: 400; font-size: 26px; color: #fff; }
		.bf-bp-region-kort-pris i { font-style: normal; font-size: 13px; color: #d1ddd9; }

		@media (max-width: 991px) {
			.bf-bp-hero-grid { grid-template-columns: 1fr; gap: 40px; }
			/* the hero's tall 104px bottom pad is the main culprit for headroom above the next section */
			:scope { padding-bottom: 56px; }
			.bf-bp-hero-priser { max-width: 460px; }
			/* stacked hero: the Denmark map goes full width */
			.bf-bp-hero-kort { max-width: none; }
			/* region kr/m² cards collapse to a divided row list: navn/kommuner left, pris + chevron right */
			.bf-bp-region-rk .bf-bp-region-kort { grid-template-columns: 1fr; gap: 0; }
			.bf-bp-region-rk .bf-bp-region-kort-item { flex-direction: row; align-items: center; gap: 12px; background: transparent; border-radius: 0; padding: 18px 0; border-top: 1px solid rgba(255,255,255,.12); }
			.bf-bp-region-rk .bf-bp-region-kort-item:hover, .bf-bp-region-rk .bf-bp-region-kort-item.is-active { background: transparent; }
			.bf-bp-region-rk .bf-bp-region-kort-item:last-child { border-bottom: 1px solid rgba(255,255,255,.12); }
			.bf-bp-region-rk .bf-bp-region-kort-top { display: contents; }
			.bf-bp-region-rk .bf-bp-region-kort-navn { order: 0; flex: 1; }
			.bf-bp-region-rk .bf-bp-region-kort-pris { order: 1; }
			.bf-bp-region-rk .bf-bp-region-kort-chevron { order: 2; }
			/* footer data line centred in the stacked hero */
			:scope .bf-bp-datalinje { text-align: center; }
		}
		@media (max-width: 767px) {
			:scope { padding: 24px 0 56px; }
			.bf-bp-hero-kort { max-width: none; }
		}
	}

	.bf-bp-datalinje { font-size: 13px; color: rgba(209,221,217,.85); margin-top: 36px; }
	.bf-bp-datalinje a { color: #fff; text-decoration: underline; text-underline-offset: 2px; }
	.bf-bp-datalinje a:hover { color: var(--coral); }
	.bf-bp-nu .bf-bp-datalinje, .bf-bp-tabel-sektion .bf-bp-datalinje { color: var(--stone); }

	/* ---- boligtype tabs (shared base) ---- */
	.bf-bp-typer { display: inline-flex; gap: 0; padding: 3px; background: var(--sand, #E8E0D1); border: 0; border-radius: 9px; margin-bottom: 28px; }
	.bf-bp-type { border: 0; background: transparent; padding: 9px 16px; border-radius: 7px; font: inherit; font-size: 14px; line-height: 16px; color: var(--stone); cursor: pointer; transition: background .15s, color .15s; }
	@media (max-width: 360px) { .bf-bp-type { padding: 9px 8px; font-size: 13px; } } /* three tabs must fit a 320px screen */
	.bf-bp-type.is-active { background: var(--ink); color: #fff; font-family: var(--font-sans), sans-serif; font-weight: 500; }
	/* hero-specific tab colours */
	@scope (.bf-bp-hero) {
		:scope .bf-bp-typer { background: rgba(255,255,255,.08); }
		:scope .bf-bp-type { color: var(--mist-light, #D1DDD9); }
	}

	/* shared trend-arrow base (used across nu / udvikling / barometer / hero / kvm / nabo) */
	.bf-bp-arrow { flex-shrink: 0; }

	/* ---- "Boligmarkedet lige nu" ---- */
	@scope (.bf-bp-nu) {
		:scope { background: var(--paper); padding: 88px 0; }
		:scope .fs-wrap { display: flex; flex-direction: column; gap: 24px; }
		.bf-bp-nu-header { display: flex; gap: 72px; align-items: flex-end; margin-bottom: 16px; }
		.bf-bp-nu-header .bf-bp-h2 { width: 540px; flex-shrink: 0; }
		.bf-bp-nu-intro { flex: 1; margin: 0; }

		/* the three selector fields */
		.bf-bp-nu-vaelger { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
		.bf-bp-nu-felt { display: flex; flex-direction: column; gap: 10px; height: 141px; text-align: left; border-radius: 10px; padding: 20px; cursor: pointer; font-family: inherit; transition: border-color .12s; }
		.bf-bp-nu-felt.is-active { border: 2px solid var(--ink); padding: 19px; }
		.bf-bp-nu-felt:hover { border-color: var(--ink); }
		.bf-bp-nu-felt-eyebrow { flex: 1; font-family: var(--font-mono), monospace; font-size: 10px; letter-spacing: 0.06em; color: var(--stone); }
		.bf-bp-nu-felt-pris { display: flex; align-items: baseline; gap: 5px; }
		.bf-bp-nu-felt-pris b { font-weight: 400; font-size: 40px; color: var(--ink); }
		.bf-bp-nu-felt-pris i { font-style: normal; font-size: 18px; color: var(--stone); }
		.bf-bp-nu-felt-yoy { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--stone); }

		/* ranking lists (the pane itself is shown as display:block by the toggle rule) */
		.bf-bp-rang-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
		/* Four cards are too narrow for the kommune names on small laptops / tablets in landscape: 2 × 2. */
		@media (min-width: 992px) and (max-width: 1199px) { .bf-bp-rang-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
		.bf-bp-rang { display: flex; flex-direction: column; border-radius: 10px; padding: 22px 22px 14px; }
		.bf-bp-rang-hd { display: flex; flex-direction: column; gap: 4px; padding-bottom: 12px; }
		.bf-bp-rang-titel { font-weight: 400; font-size: 22px; color: var(--ink); margin: 0; line-height: 1.1; }
		.bf-bp-rang-eyebrow { margin: 0; }
		.bf-bp-rang-row { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-top: 1px solid var(--line); font-size: 14px; color: var(--ink); }
		.bf-bp-rang-nr { flex-shrink: 0; width: 12px; font-size: 18px; color: var(--coral); }
		.bf-bp-rang-navn { flex: 1; min-width: 0; font-weight: 500; font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
		.bf-bp-rang-val { flex-shrink: 0; font-size: 14px; white-space: nowrap; }
		.bf-bp-rang-chevron { flex-shrink: 0; color: var(--stone); font-size: 15px; line-height: 1; transition: color .12s; }
		a.bf-bp-rang-row:hover { color: var(--coral); }
		a.bf-bp-rang-row:hover .bf-bp-rang-navn { color: var(--coral); }
		a.bf-bp-rang-row:hover .bf-bp-rang-chevron { color: var(--coral); }
		.bf-bp-rang-tom { margin: 0; padding: 14px 0; border-top: 1px solid var(--line); font-size: 14px; color: var(--stone); }

		/* salgstid + afslag */
		.bf-bp-nu-bund { margin-top: 24px; display: flex; gap: 50px; padding: 22px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
		.bf-bp-nu-stat { display: flex; align-items: center; gap: 20px; }
		.bf-bp-nu-stat-tal { display: flex; align-items: baseline; gap: 5px; }
		.bf-bp-nu-stat-tal b { font-weight: 400; font-size: 34px; color: var(--ink); }
		.bf-bp-nu-stat-tal i { font-style: normal; font-size: 17px; color: var(--stone); }
		.bf-bp-nu-stat-txt { display: flex; flex-direction: column; gap: 5px; font-size: 13px; color: var(--stone); }
		/* SALGSTID/AFSLAG labels stay muted stone — not the general coral `:scope em` emphasis */
		.bf-bp-nu-stat-txt em { font-family: var(--font-mono), monospace; font-style: normal; font-size: 10px; letter-spacing: 0.06em; color: var(--stone, #6B6F70); }

		@media (max-width: 991px) {
			:scope { padding-top: 48px; }
			/* intro drops under the heading instead of sitting beside it */
			.bf-bp-nu-header { flex-direction: column; align-items: flex-start; gap: 16px; }
			.bf-bp-nu-header .bf-bp-h2 { width: auto; }
			/* the three boligtype boxes: let height grow so padding holds once the unit wraps */
			.bf-bp-nu-felt { height: auto; }
			.bf-bp-nu-felt-pris { flex-wrap: wrap; }
			.bf-bp-nu-felt-pris b { font-size: 28px; }
			.bf-bp-nu-felt-eyebrow { font-size: 9px; }
			.bf-bp-nu-felt-yoy-lbl { display: none; }
			/* ranking cards scroll sideways; each is at least 350px, or the screen width if narrower */
			.bf-bp-rang-grid { grid-template-columns: repeat(4, minmax(min(350px, 100%), 1fr)); overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
		}
		@media (max-width: 767px) {
			:scope { padding: 56px 0; }
			.bf-bp-nu-kort, .bf-bp-nu-bund { grid-template-columns: 1fr; }
		}
		@media (max-width: 450px) {
			/* each salgstid/afslag stat stacks: EM label on top, the number in the middle, sub-text at the bottom */
			.bf-bp-nu-stat { flex-direction: column; align-items: flex-start; gap: 6px; }
			.bf-bp-nu-stat-txt { display: contents; }
			.bf-bp-nu-stat em { order: 0; }
			.bf-bp-nu-stat-tal { order: 1; }
			.bf-bp-nu-stat-sub { order: 2; }
		}
		@media (max-width: 400px) {
			/* the three boligtype boxes stack on top of each other on very narrow screens, a touch smaller */
			.bf-bp-nu-vaelger { grid-template-columns: 1fr; gap: 12px; }
			.bf-bp-nu-felt { gap: 6px; padding: 14px 16px; }
			.bf-bp-nu-felt.is-active { padding: 13px 15px; }
			.bf-bp-nu-felt-pris b { font-size: 24px; }
			.bf-bp-nu-felt-pris i { font-size: 15px; }
		}
	}

	/* ---- price development graph (region/kommune single-line chart) ---- */
	.bf-bp-graf { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 24px; }
	.bf-bp-ingen { color: var(--stone); font-size: 14px; }
	.bf-bp-kilde { font-size: 12px; color: var(--stone); margin: 0; }

	/* ---- prisudvikling (hub): two-line chart card ---- */
	@scope (.bf-bp-udvikling) {
		:scope { background: var(--paper-warm); padding: 88px 0; }
		.bf-bp-udv-head { display: grid; grid-template-columns: 500px minmax(0, 1fr); justify-content: space-between; gap: 72px; align-items: start; margin-bottom: 36px; }
		.bf-bp-udv-head .bf-bp-h2 { margin: 0; }
		/* "Danmark" in this heading is plain text — no coral, no italic (overrides the general `:scope em`) */
		.bf-bp-udv-head .bf-bp-h2 em { color: inherit; font-style: normal; }
		.bf-bp-udv-head-tekst { min-width: 0; }
		.bf-bp-udv-head-tekst p { font-size: 16px; line-height: 1.65; color: var(--stone); margin: 4px 0 0; }

		.bf-bp-udv-card { border-radius: 16px; padding: 32px; }
		/* card title + full-width divider: clear breathing room above AND below the line.
		   .bf-bp-udv-card prefix beats the `:scope h3 { margin: 0 }` reset so margin-bottom sticks. */
		.bf-bp-udv-card .bf-bp-udv-titel { font-size: 24px; color: var(--ink); margin: 0 0 28px; padding-bottom: 24px; border-bottom: 1px solid var(--line); }

		.bf-bp-udv-controls { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; flex-wrap: wrap; margin-bottom: 22px; }
		/* flex-start keeps each pill group its own content width (no empty space beside the type row) */
		.bf-bp-udv-tabs { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
		.bf-bp-udv-tabs .bf-bp-typer { margin-bottom: 0; }
		/* In the card the active tab is dark green (per Figma), not coral. */
		.bf-bp-udv-card .bf-bp-type.is-active { background: var(--ink); color: #fff; }

		.bf-bp-udv-stat { width: 340px; max-width: 100%; background: var(--paper-warm); border-radius: 9px; padding: 14px 18px; }
		.bf-bp-udv-stat .bf-bp-range-pane { gap: 10px; }
		.bf-bp-udv-stat-lbl { flex: 0 0 auto; width: 176px; font-size: 13px; line-height: 1.45; color: var(--stone); }
		.bf-bp-udv-stat-val { margin-left: auto; display: flex; align-items: center; gap: 8px; font-size: 32px; line-height: 1; white-space: nowrap; }
		.bf-bp-udv-stat-val.is-up { color: var(--green, #2E7D61); }
		.bf-bp-udv-stat-val.is-down { color: var(--red, #D9472B); }
		.bf-bp-udv-stat-val.is-flat { color: var(--stone); }
		.bf-bp-udv-stat-val .bf-bp-arrow { width: 18px; height: 12px; }

		.bf-bp-udv-legend { display: flex; flex-wrap: wrap; gap: 26px; margin: 30px 0 0; font-size: 13px; color: var(--ink); }
		.bf-bp-udv-leg { display: inline-flex; align-items: center; gap: 8px; }
		.bf-bp-udv-leg::before { content: ""; display: inline-block; }
		.bf-bp-udv-leg--udbud::before { width: 20px; height: 0; border-top: 2px solid var(--mist, #9FB8B3); }
		.bf-bp-udv-leg--handel::before { width: 20px; height: 0; border-top: 3px solid var(--ink); }
		.bf-bp-udv-leg--afslag::before { width: 20px; height: 10px; border-radius: 2px; background: var(--coral-soft, #FFDED5); }

		.bf-bp-udv-plot { position: relative; margin-top: 30px; }
		.bf-bp-udv-plot svg { display: block; width: 100%; height: auto; }

		/* always parked in the bottom-right corner so it stays off the lines; min-width keeps the value rows on one line */
		.bf-bp-udv-tip { position: absolute; right: 3%; bottom: 10%; min-width: 264px; display: flex; flex-direction: column; gap: 4px; background: var(--ink); color: #fff; border-radius: 10px; padding: 12px 14px; font-size: 12px; pointer-events: none; z-index: 3; box-shadow: 0 10px 30px rgba(0,0,0,.22); }
		/* only show on SVG hover — the `hidden` attr (toggled by the JS) must beat the display:flex above */
		.bf-bp-udv-tip[hidden] { display: none; }
		.bf-bp-udv-tip-p { font-family: var(--font-mono), monospace; font-size: 11px; letter-spacing: 0.05em; color: var(--mist-light, #D1DDD9); }
		.bf-bp-udv-tip-row { display: flex; justify-content: space-between; gap: 18px; white-space: nowrap; }
		.bf-bp-udv-tip-row em { font-style: normal; color: var(--mist-light, #D1DDD9); }
		.bf-bp-udv-tip-row b { font-weight: 600; white-space: nowrap; }

		.bf-bp-udv-foot { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 30px; }
		/* outline "light" action: sans-medium, normal case, 8px rounded box with an ink border (Figma 592:2) */
		.bf-bp-udv-tabel-knap { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 13px 22px; font-family: var(--font-sans), sans-serif; font-size: 14px; font-weight: 500; border-radius: 8px; cursor: pointer; transition: background .18s; }
		.bf-bp-udv-foot .bf-bp-kilde { font-family: var(--font-mono), monospace; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; }

		.bf-bp-udv-tabel-wrap { position: relative; margin-top: 20px; max-height: 420px; overflow: auto; border: 1px solid var(--line); border-radius: 12px; }
		.bf-bp-udv-tabel { width: 100%; border-collapse: collapse; font-size: 14px; }
		.bf-bp-udv-tabel th, .bf-bp-udv-tabel td { padding: 10px 16px; text-align: right; border-bottom: 1px solid var(--line); white-space: nowrap; }
		.bf-bp-udv-tabel thead th { position: sticky; top: 0; background: var(--input-bg, #FFFCF4); font-family: var(--font-sans), sans-serif; font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: var(--stone); font-weight: 600; }
		.bf-bp-udv-tabel th:first-child, .bf-bp-udv-tabel td:first-child { text-align: left; }
		.bf-bp-udv-tabel tbody th[scope="row"] { font-weight: 500; color: var(--ink); }
		.bf-bp-udv-tabel tbody tr:hover { background: var(--paper-warm); }

		@media (max-width: 991px) {
			.bf-bp-udv-head { grid-template-columns: minmax(0, 1fr); gap: 16px; }
			.bf-bp-udv-head .bf-bp-h2 { max-width: none; }
			.bf-bp-udv-controls { flex-direction: column; }
		}
		/* Narrow phones: the card's 32px padding leaves too little room for the tab rows and the stat box. */
		@media (max-width: 450px) {
			.bf-bp-udv-card { padding: 24px 16px; }
			.bf-bp-udv-tabs, .bf-bp-udv-tabs .bf-bp-typer { max-width: 100%; }
			.bf-bp-udv-tabs .bf-bp-type { padding: 9px 10px; font-size: 13px; }
			.bf-bp-udv-stat-lbl { flex: 1 1 0; width: auto; min-width: 0; }
			.bf-bp-udv-stat-val { font-size: 28px; }
		}
		@media (max-width: 767px) { :scope { padding: 56px 0; } }
	}

	/* ---- region tal row ---- */
	.bf-bp-region-tal { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; margin: 24px 0 12px; }

	/* ---- "alle 98 kommuner" ---- */
	@scope (.bf-bp-alle) {
		:scope { background: var(--paper); padding: 88px 0; }
		/* the kommune grid is one cream card with vertical dividers between the five regions */
		.bf-bp-alle-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; background: #FFFCF4; border: 1px solid #D6D1C4; border-radius: 10px; padding: 22px 28px; }
		.bf-bp-alle-kol { padding: 0 22px; }
		.bf-bp-alle-kol:first-child { padding-left: 0; }
		.bf-bp-alle-kol:last-child { padding-right: 0; }
		.bf-bp-alle-kol + .bf-bp-alle-kol { border-left: 1px solid var(--line, #D6D1C4); }
		h3.bf-bp-alle-region{ font-size: 24px; margin-bottom: 10px; }
		.bf-bp-alle-region a:hover { color: var(--coral); }
		.bf-bp-alle-region-meta { font-size: 12px; color: var(--stone); }
		/* :scope beats the general `:scope a { text-decoration: none }` so the underline sticks */
		:scope a.bf-bp-alle-region-link { display: inline-block; margin: 0 0 14px; font-family: var(--font-sans), sans-serif; font-size: 14px; font-weight: 500; text-decoration: underline; text-underline-offset: 2px; color: var(--ink, #0B3B36); }
		.bf-bp-alle-kommuner { list-style: none; margin: 0; padding: 0; }
		/* rows read like a table: a divider above every kommune, incl. the first — but not under the last */
		.bf-bp-alle-kommuner li { padding: 5px 0; border-top: 1px solid var(--line, #D6D1C4); }
		.bf-bp-alle-kommuner li a { display: flex; justify-content: space-between; gap: 8px; padding: 0; font-size: 14px; }
		.bf-bp-alle-navn { font-weight: 500; }
		/* kommune without a price for the active boligtype → muted name */
		.bf-bp-alle-navn .bf-bp-alle-navn-tom { color: #6B6F70; }
		.bf-bp-alle-kommuner li a:hover, .bf-bp-alle-kommuner li a:hover .bf-bp-alle-pris { color: var(--coral); }
		.bf-bp-alle-pris { color: var(--stone); white-space: nowrap; }
		.bf-bp-alle-tom { color: var(--stone); margin-top: 24px; }

		@media (max-width: 991px) {
			/* keep the five-region card intact and let it scroll sideways instead of reflowing */
			.bf-bp-alle-grid { grid-template-columns: repeat(5, minmax(150px, 1fr)); overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
		}
		@media (max-width: 767px) { :scope { padding: 56px 0; } }
	}

	/* ---- region table ---- */
	.bf-bp-tabel { width: 100%; border-collapse: collapse; font-size: 14px; border-radius: 12px; overflow: hidden; }
	.bf-bp-tabel th, .bf-bp-tabel td { padding: 12px 16px; text-align: left; border-bottom: 1px solid var(--line); }
	.bf-bp-tabel thead th { font-family: var(--font-sans), sans-serif; font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: var(--stone); font-weight: 600; cursor: pointer; user-select: none; }
	.bf-bp-tabel thead th:hover { color: var(--coral); }
	.bf-bp-tabel thead th.is-sorted { color: var(--coral); }
	.bf-bp-tabel .num { text-align: right; }
	.bf-bp-tabel tbody tr:hover { background: var(--paper-warm); }
	.bf-bp-tabel tbody th[scope="row"] { font-weight: 500; }
	.bf-bp-tabel tbody th a:hover { color: var(--coral); }

	/* ---- nabo list ---- */
	.bf-bp-nabo-liste { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 4px; }
	.bf-bp-nabo-liste li a { display: flex; justify-content: space-between; gap: 8px; padding: 10px 12px; border-radius: 8px; font-size: 14px; border: 1px solid transparent; }
	.bf-bp-nabo-liste li a:hover { border-color: var(--line); background: #fff; color: var(--coral); }
	.bf-bp-tilbage { margin-top: 24px; font-size: 15px; }
	.bf-bp-tilbage a:hover { color: var(--coral); }

	/* ---- CTA (EstimatCTA · Figma 558:315): centered serif heading + site-wide address search ---- */
	@scope (.bf-bp-cta) {
		:scope { background: var(--paper-warm); padding: 84px 0; text-align: center; }
		.bf-bp-cta-inner { display: flex; flex-direction: column; align-items: center; }
		/* :scope beats the general `:scope h2 { margin: 0 }` reset so the bottom margin sticks */
		:scope .bf-bp-cta-titel { font-size: clamp(32px, 4vw, 48px); margin: 0 0 36px; max-width: min(90%, 550px); text-wrap: balance; }
		.bf-bp-cta-sog { width: 100%; display: flex; justify-content: center; }
		/* buildHeroSearch() forces the mount to display:block inline, so centre the form itself (480px per design) */
		:scope .bf-hero-search-form { max-width: 480px; margin-inline: auto; }
		.bf-bp-cta-sub { margin: 20px 0 0; }
	}
	/* generic pill button — shared (CTA + the kommune page's estimat link), stays general */
	.bf-bp-knap { display: inline-block; padding: 14px 28px; border-radius: 999px; font-size: 15px; font-weight: 500; }

	/* ---- FAQ (Figma 558:331): dark section, centered eyebrow + title, 880px centred accordion ---- */
	@scope (.bf-bp-faq) {
		:scope { background: var(--ink); color: #fff; padding: 72px 0; }
		.bf-bp-faq-inner { text-align: center; }
		.bf-bp-faq-eyebrow { display: inline-flex; align-items: center; justify-content: center; margin: 0 0 16px; }
		.bf-bp-faq-eyebrow::before { content: ""; width: 22px; margin-right: 9px; border-top: 1px solid currentColor; }
		/* :scope beats the general `:scope h2 { margin: 0 }` reset so the bottom margin sticks */
		:scope .bf-bp-faq-titel { color: #fff; font-size: clamp(32px, 4vw, 44px); margin: 0 0 40px; }
		:scope em { color: var(--coral); font-style: italic; }
		.bf-bp-faq-liste { max-width: 880px; margin: 0 auto; text-align: left; border-top: 1px solid rgba(209,221,217,.2); }
		.bf-bp-faq-row { border-bottom: 1px solid rgba(209,221,217,.2); }
		.bf-bp-faq-row summary { cursor: pointer; display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; padding: 21px 0; font-family: var(--font-serif), serif; font-size: 24px; line-height: 1.25; color: #fff; list-style: none; }
		.bf-bp-faq-row summary::-webkit-details-marker { display: none; }
		.bf-bp-faq-sp { flex: 1; }
		.bf-bp-faq-ikon { position: relative; flex: none; width: 27px; height: 27px; margin-top: 3px; border: 1px solid var(--mist-light, #D1DDD9); border-radius: 50%; transition: transform .18s ease; }
		.bf-bp-faq-ikon::before, .bf-bp-faq-ikon::after { content: ""; position: absolute; top: 50%; left: 50%; background: var(--coral); }
		.bf-bp-faq-ikon::before { width: 11px; height: 2px; transform: translate(-50%, -50%); }
		.bf-bp-faq-ikon::after { width: 2px; height: 11px; transform: translate(-50%, -50%); }
		.bf-bp-faq-row[open] .bf-bp-faq-ikon { transform: rotate(45deg); } /* + rotates into × */
		.bf-bp-faq-svar { padding: 0 45px 24px 0; max-width: 680px; }
	}

	/* ---- Region: sortable kommune table (gennemsnit row pinned in the head) ---- */
	.bf-bp-alle-head { margin-bottom: 28px; }
	.bf-bp-alle-head .bf-bp-sektion-intro { margin: 6px 0 0; }
	/* the whole table card is one uniform cream surface — no separate header fill */
	/* position: relative makes the wrap the containing block for the absolutely positioned .bf-bp-sr in the
	   last header cell — otherwise that 1px span escapes the clip and widens the whole page on phones. */
	.bf-bp-kom-tabel-wrap { position: relative; border-radius: 12px; overflow: hidden; }
	.bf-bp-kom-tabel { width: 100%; border-collapse: collapse; font-size: 14px; }
	.bf-bp-kom-tabel th, .bf-bp-kom-tabel td { padding: 13px 16px; text-align: right; border-bottom: 1px solid var(--line); white-space: nowrap; }
	.bf-bp-kom-tabel thead th[data-sort] { padding: 0; }
	.bf-bp-kom-tabel thead th[data-sort] button { width: 100%; display: inline-flex; gap: 6px; align-items: center; justify-content: flex-end; padding: 14px 16px 12px; border: 0; background: transparent; cursor: pointer; font-family: var(--font-mono), monospace; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--stone); }
	.bf-bp-kom-tabel thead th[data-sort]:first-child button { justify-content: flex-start; padding-left: 28px; }
	/* roomier side insets on the edge columns, matching the Figma table (~28px gutters) */
	.bf-bp-kom-tabel th:first-child, .bf-bp-kom-tabel td:first-child { padding-left: 28px; text-align: left; }
	.bf-bp-kom-tabel th:last-child, .bf-bp-kom-tabel td:last-child { padding-right: 28px; }
	.bf-bp-kom-tabel thead th[data-sort] button:hover { color: var(--ink); }
	.bf-bp-kom-tabel thead th.is-sorted button { color: var(--ink); } /* active sort column label reads in ink */
	.bf-bp-kom-tabel thead th .bf-bp-kom-sort::after { content: "\2195"; opacity: .45; } /* ↕ */
	.bf-bp-kom-tabel thead th.is-sorted .bf-bp-kom-sort::after { opacity: 1; color: var(--ink); }
	.bf-bp-kom-tabel thead th.is-sorted[aria-sort="descending"] .bf-bp-kom-sort::after { content: "\2193"; } /* ↓ */
	.bf-bp-kom-tabel thead th.is-sorted[aria-sort="ascending"] .bf-bp-kom-sort::after { content: "\2191"; } /* ↑ */
	.bf-bp-kom-tabel td:nth-child(2) { font-family: var(--font-serif), serif; font-size: 22px; }
	.bf-bp-kom-tabel tbody th[scope="row"] { font-weight: 500; color: var(--ink); }
	.bf-bp-kom-tabel tbody th[scope="row"] a { color: var(--ink); }
	.bf-bp-kom-tabel tbody tr { cursor: pointer; } /* whole row is clickable (JS follows the row link) */
	.bf-bp-kom-tabel tbody tr:hover { background: var(--paper-warm); }
	.bf-bp-kom-gns { background: #EDEAE3; }
	.bf-bp-kom-gns th[scope="row"] { font-weight: 600; }
	.bf-bp-kom-gns td:nth-child(2) { font-family: var(--font-serif), serif; font-size: 22px; font-weight: 500; }
	.bf-bp-kom-gns th, .bf-bp-kom-gns td { border-bottom: 2px solid var(--line); }
	/* change cells: the % text stays ink; only the arrow carries the colour */
	.bf-bp-kom-tabel .bf-bp-trend-cell { display: inline-flex; gap: 7px; align-items: center; justify-content: flex-end; color: var(--ink); }
	.bf-bp-kom-tabel .bf-bp-arrow { width: 12px; height: 12px; }
	/* row-link chevron — grey on every row, coral ONLY on the hovered row */
	.bf-bp-kom-tabel .bf-bp-kom-chevron { display: inline-block; color: var(--mist, #9FB8B3); font-size: 18px; line-height: 1; transition: color .15s; }
	.bf-bp-kom-tabel tbody tr:hover .bf-bp-kom-chevron { color: var(--coral); }
	.bf-bp-tabel-kilde { margin: 0; padding: 16px 28px; border-top: 1px solid var(--line); color: var(--stone); font-size: 13px; }
	.bf-bp-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

	/* ---- Kommune: kvadratmeterpris cards (one per boligtype, all shown) ---- */
	.bf-bp-kvm { padding: 88px 0; }
	.bf-bp-kvm-kort { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-bottom: 20px; }
	.bf-bp-kvm-felt { display: flex; flex-direction: column; gap: 12px; border-radius: 12px; padding: 24px; }
	.bf-bp-kvm-pris { display: flex; align-items: baseline; gap: 6px; }
	.bf-bp-kvm-pris b { font-weight: 400; font-size: 40px; color: var(--ink); }
	.bf-bp-kvm-pris i { font-style: normal; font-size: 14px; color: var(--stone); }
	.bf-bp-kvm-yoy { font-size: 13px; display: inline-flex; align-items: center; gap: 6px; color: var(--stone); }
	.bf-bp-kvm-yoy.is-up { color: var(--green, #2E7D61); }
	.bf-bp-kvm-yoy.is-down { color: var(--coral-deep, #FF5535); }
	.bf-bp-kvm-noegletal { display: flex; gap: 24px; margin: 4px 0 0; padding-top: 14px; border-top: 1px solid var(--line); }
	.bf-bp-kvm-noegletal div { display: flex; flex-direction: column; gap: 3px; }
	.bf-bp-kvm-noegletal dt { font-family: var(--font-mono), monospace; font-size: 10px; letter-spacing: .04em; text-transform: uppercase; color: var(--stone); }
	.bf-bp-kvm-noegletal dd { margin: 0; font-size: 16px; color: var(--ink); }

	/* ---- Kommune: beregner "Hvad koster et hus i …?" (Figma 414:73) ---- */
	@scope (.bf-bp-beregner-sek) {
		:scope { padding: 88px 0; background: var(--paper); }
		:scope .bf-bp-alle-head { margin-bottom: 36px; }
		.bf-bp-bereg { display: grid; grid-template-columns: 440px 1fr; border-radius: 16px; overflow: hidden; }
		.bf-bp-bereg-valg { padding: 32px; display: flex; flex-direction: column; gap: 22px; border-right: 1px solid var(--line); }
		.bf-bp-bereg-felt { display: flex; flex-direction: column; gap: 11px; }
		.bf-bp-bereg-tabs { display: flex; gap: 0; padding: 3px; background: var(--sand, #E8E0D1); border-radius: 9px; }
		.bf-bp-bereg-tab { flex: 1 1 0; min-width: 0; border: 0; background: transparent; padding: 9px 8px; border-radius: 7px; font: inherit; font-size: 13px; line-height: 16px; color: var(--stone); cursor: pointer; white-space: nowrap; text-align: center; transition: background .15s, color .15s; }
		.bf-bp-bereg-tab.is-active { background: var(--ink); color: #fff; font-weight: 500; }
		.bf-bp-bereg-select-wrap { position: relative; }
		.bf-bp-bereg-select { width: 100%; appearance: none; -webkit-appearance: none; background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 13px 42px 13px 16px; font: inherit; font-size: 15px; color: var(--ink); cursor: pointer; }
		.bf-bp-bereg-select-wrap::after { content: ""; position: absolute; right: 18px; top: 50%; width: 9px; height: 9px; margin-top: -6px; border-right: 2px solid var(--stone); border-bottom: 2px solid var(--stone); transform: rotate(45deg); pointer-events: none; }
		.bf-bp-bereg-areal-top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
		.bf-bp-bereg-areal-val { font-size: 26px; color: var(--ink); line-height: 1; }
		/* Slider: mørkegrøn (ink) udfyldning + hvid thumb på lys sand-track, som i Figma (ikke coral).
		   Webkit har ingen progress-pseudo, så den udfyldte del tegnes med en gradient styret af --bf-fill
		   (sat server-side og opdateret i boligpriser.js); Firefox bruger ::-moz-range-progress. */
		/* --bf-fill (track fill %, 0–100) is set inline per-slider by boligpriser.js; declare a default so it resolves */
		.bf-bp-bereg-slider { --bf-fill: 0%; -webkit-appearance: none; appearance: none; width: 100%; height: 16px; background: transparent; margin: 6px 0 2px; cursor: pointer; }
		.bf-bp-bereg-slider::-webkit-slider-runnable-track { height: 3px; border-radius: 3px; background: linear-gradient(to right, var(--ink) var(--bf-fill, 0%), var(--sand, #E8E0D1) var(--bf-fill, 0%)); }
		.bf-bp-bereg-slider::-moz-range-track { height: 3px; border-radius: 3px; background: var(--sand, #E8E0D1); }
		.bf-bp-bereg-slider::-moz-range-progress { height: 3px; border-radius: 3px; background: var(--ink); }
		.bf-bp-bereg-slider::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 16px; margin-top: -6.5px; border-radius: 50%; background: #fff; border: 2px solid var(--ink); box-shadow: 0 1px 2px rgba(11, 59, 54, .18); }
		.bf-bp-bereg-slider::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 2px solid var(--ink); box-shadow: 0 1px 2px rgba(11, 59, 54, .18); }
		.bf-bp-bereg-slider:focus-visible { outline: none; }
		.bf-bp-bereg-slider:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px rgba(11, 59, 54, .15); }
		.bf-bp-bereg-slider:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 4px rgba(11, 59, 54, .15); }
		.bf-bp-bereg-scale { display: flex; justify-content: space-between; }
		.bf-bp-bereg-resultat { padding: 48px; display: flex; flex-direction: column; align-items: flex-start; }
		.bf-bp-bereg-res-lbl { font-size: 15px; color: var(--stone); margin-bottom: 14px; }
		.bf-bp-bereg-res-pris { font-size: clamp(44px, 5.5vw, 72px); color: var(--ink); line-height: 1; margin-bottom: 20px; }
		.bf-bp-bereg-res-note { max-width: 560px; margin: 0 0 28px; }
		:scope .bf-bp-bereg-res-knap { display: inline-flex; align-items: center; gap: 8px; border-radius: 7px; padding: 14px 22px; font-size: 15px; font-weight: 500; text-decoration: none; transition: background .15s; }

		@media (max-width: 991px) {
			.bf-bp-bereg { grid-template-columns: 1fr; }
			.bf-bp-bereg-valg { border-right: 0; border-bottom: 1px solid var(--line); }
			.bf-bp-bereg-resultat { padding: 32px; }
		}
	}

	/* ---- Kommune: "Hvordan er husene i …?" (Figma 481:2) ---- */
	@scope (.bf-bp-husene) {
		:scope { padding: 88px 0; background: var(--paper-warm); }
		.bf-bp-husene-kort { border-radius: 16px; padding: 40px; }
		.bf-bp-husene-grid { display: grid; grid-template-columns: 400px 1fr; gap: 64px; align-items: start; }
		.bf-bp-husene-nogletal { display: flex; flex-direction: column; }
		.bf-bp-husene-stat-navn { font-size: 15px; font-weight: 500; color: var(--ink); }
		.bf-bp-husene-stat-sub { font-size: 13px; line-height: 1.45; color: var(--stone); }
		.bf-bp-husene-stat { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 20px 0; border-top: 1px solid var(--line); }
		.bf-bp-husene-nogletal > :first-child { border-top: 0; padding-top: 0; }
		.bf-bp-husene-stat-txt { display: flex; flex-direction: column; gap: 5px; }
		.bf-bp-husene-stat-val { font-size: 34px; line-height: 1; color: var(--ink); white-space: nowrap; }
		.bf-bp-husene-stat-val i { font-style: normal; font-size: 17px; color: var(--stone); margin-left: 3px; }

		/* opvarmning: stablet søjle + signaturforklaring */
		.bf-bp-husene-opvarm { padding: 20px 0; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 14px; }
		.bf-bp-husene-bar { display: flex; height: 14px; border-radius: 7px; overflow: hidden; gap: 2px; background: var(--paper-warm); }
		.bf-bp-husene-seg { height: 100%; min-width: 0; }
		.bf-bp-husene-seg:nth-child(1), .bf-bp-husene-leg:nth-child(1) i { background: var(--ink); }
		.bf-bp-husene-seg:nth-child(2), .bf-bp-husene-leg:nth-child(2) i { background: var(--green, #2E7D61); }
		.bf-bp-husene-seg:nth-child(3), .bf-bp-husene-leg:nth-child(3) i { background: var(--mist, #9FB8B3); }
		.bf-bp-husene-seg:nth-child(4), .bf-bp-husene-leg:nth-child(4) i { background: var(--sand, #E8E0D1); }
		.bf-bp-husene-seg:nth-child(5), .bf-bp-husene-leg:nth-child(5) i { background: var(--line); }
		.bf-bp-husene-legend { display: flex; flex-wrap: wrap; gap: 8px 18px; }
		.bf-bp-husene-leg { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: var(--stone); }
		.bf-bp-husene-leg i { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }

		/* byggeår: søjlediagram */
		.bf-bp-husene-byggeaar { display: flex; flex-direction: column; gap: 28px; }
		.bf-bp-husene-bars { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; align-items: end; }
		.bf-bp-husene-col { display: flex; flex-direction: column; align-items: center; }
		.bf-bp-husene-track { height: 260px; width: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; overflow: visible; }
		.bf-bp-husene-col-pct { font-size: 13px; color: var(--stone); margin-bottom: 8px; }
		.bf-bp-husene-soejle { width: 100%; max-width: 92px; background: var(--sand, #E8E0D1); border-radius: 6px 6px 0 0; min-height: 4px; }
		.bf-bp-husene-col.is-top .bf-bp-husene-soejle { background: var(--ink); }
		.bf-bp-husene-col.is-top .bf-bp-husene-col-pct { color: var(--ink); font-weight: 600; }
		.bf-bp-husene-col-aar { font-size: 13px; color: var(--stone); margin-top: 14px; text-align: center; line-height: 1.3; }
		:scope .bf-bp-tabel-kilde { margin: 28px 0 0; }

		@media (max-width: 991px) {
			.bf-bp-husene-grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
		}
		@media (max-width: 450px) {
			.bf-bp-husene-bars { gap: 6px; }
			.bf-bp-husene-col-pct, .bf-bp-husene-col-aar { font-size: 11px; }
		}
	}

	/* ---- Kommune: "… og nabokommunerne" (Figma 415:77) ---- */
	@scope (.bf-bp-nabo) {
		:scope { padding: 88px 0; background: var(--paper); }
		.bf-bp-nabo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
		.bf-bp-nabo-kort { display: flex; flex-direction: column; border-radius: 14px; padding: 28px 30px; }
		.bf-bp-nabo-kort.is-current { border-color: var(--ink); }
		.bf-bp-nabo-navn { font-size: 24px; font-weight: 400; color: var(--ink); margin: 0 0 14px; }
		.bf-bp-nabo-pris { margin: 0 0 20px; display: flex; align-items: baseline; gap: 6px; }
		.bf-bp-nabo-pris b { font-family: var(--font-serif), serif; font-weight: 400; font-size: 36px; line-height: 1; color: var(--ink); }
		.bf-bp-nabo-pris i { font-style: normal; font-size: 13px; color: var(--stone); }
		.bf-bp-nabo-tal { margin: 0 0 24px; display: flex; flex-direction: column; }
		.bf-bp-nabo-rk { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 0; border-top: 1px solid var(--line); }
		.bf-bp-nabo-rk:first-child { border-top: 0; }
		.bf-bp-nabo-rk dt { font-size: 14px; color: var(--stone); margin: 0; }
		.bf-bp-nabo-rk dd { font-size: 14px; color: var(--ink); margin: 0; font-variant-numeric: tabular-nums; }
		.bf-bp-nabo-rk dd.is-up { color: var(--green, #2E7D61); }
		.bf-bp-nabo-rk dd.is-down { color: var(--coral); }
		.bf-bp-nabo-kort .bf-bp-nabo-knap { margin-top: auto; display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: 7px; padding: 13px 18px; font-size: 14px; font-weight: 500; text-decoration: none; transition: background .15s; }
		.bf-bp-nabo-her { margin-top: auto; display: inline-flex; align-items: center; justify-content: center; background: var(--paper-warm, #F1ECDE); color: var(--stone); border-radius: 7px; padding: 13px 18px; font-size: 14px; }

		@media (max-width: 991px) { .bf-bp-nabo-grid { grid-template-columns: repeat(2, 1fr); } }
		@media (max-width: 767px) { .bf-bp-nabo-grid { grid-template-columns: 1fr; } }
	}

	/* ---- Region hero: kommune map (colour tiers carried in the SVG's own \3c style>) + hero display cards ---- */
	@scope (.bf-bp-hero) {
		.bf-bp-kort .k { cursor: pointer; transition: fill .12s, stroke .12s; }
		.bf-bp-kort a[data-navn]:hover .k, .bf-bp-kort a[data-navn].is-active .k, .bf-bp-kort a[data-navn]:focus .k { stroke: var(--coral); stroke-width: 16; }
		.bf-bp-kort a[data-navn]:focus { outline: none; }
		/* legend lives INSIDE the white map card, below the map (dark text on cream) */
		.bf-bp-kort-legend { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; margin-top: 14px; color: var(--stone); font-size: 12px; }
		.bf-bp-kort-legend-lbl { font-family: var(--font-mono), monospace; font-size: 10px; letter-spacing: .06em; color: var(--stone); }
		.bf-bp-kort-legend-item { display: inline-flex; gap: 6px; align-items: center; }
		.bf-bp-kort-legend-item i { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
		.bf-bp-kort-legend-item i.b0 { background: #DEDBD3; }
		.bf-bp-kort-legend-item i.b1 { background: #D3E0D9; }
		.bf-bp-kort-legend-item i.b2 { background: #A9C4BA; }
		.bf-bp-kort-legend-item i.b3 { background: #77A094; }
		.bf-bp-kort-legend-item i.b4 { background: #3E6F65; }
		.bf-bp-kort-legend-item i.b5 { background: #0B3B36; }

		/* boligtype display cards (inside the dark hero) */
		.bf-bp-hero-typer { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 44px; }
		@media (max-width: 991px) { .bf-bp-hero-typer { grid-template-columns: 1fr; } }
		.bf-bp-hero-felt { display: flex; flex-direction: column; gap: 10px; padding: 20px 22px; border: 1px solid rgba(255,255,255,.12); border-radius: 10px; background: rgba(255,255,255,.04); }
		.bf-bp-hero-felt-navn { font-size: 14px; color: #fff; }
		/* "SENESTE ÅR" label is a fixed muted colour — NOT green/red by trend direction */
		.bf-bp-hero-felt-seneste { display: inline-flex; gap: 6px; align-items: center; }
		.bf-bp-hero-felt-pris { display: flex; align-items: baseline; gap: 6px; }
		.bf-bp-hero-felt-pris b { font-weight: 400; font-size: 26px; color: #fff; }
		.bf-bp-hero-felt-pris i { font-style: normal; font-size: 13px; color: var(--mist-light, #D1DDD9); }
	}

	/* ---- Kommune hero: left-column buttons + right-column kr/m² price card (Figma 411:21) ---- */
	/* references the .bf-bp-kommune root modifier, so it stays general (outer scope) */
	:scope.bf-bp-kommune .bf-bp-hero-grid { align-items: start; }
	@scope (.bf-bp-hero) {
		.bf-bp-hero-knapper { display: flex; flex-wrap: wrap; gap: 12px; margin: 0; }
		.bf-bp-hero-knap { display: inline-flex; align-items: center; padding: 15px 28px; border-radius: 8px; font-size: 14px; font-weight: 500; line-height: 1; }
		.bf-bp-hero-tekst .bf-bp-datalinje { margin-top: 0; }

		.bf-bp-hero-priser { align-self: stretch; background: var(--card, #fffcf4); border-radius: 10px; padding: 30px 30px 26px; min-width: 0; }
		.bf-bp-hero-pris-row { display: flex; flex-direction: column; gap: 6px; padding: 18px 0; border-bottom: 1px solid var(--line, #D6D1C4); }
		.bf-bp-hero-pris-row:first-child { padding-top: 0; }
		.bf-bp-hero-pris-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
		.bf-bp-hero-pris-navn { font-size: 14px; font-weight: 500; color: var(--ink, #0B3B36); }
		.bf-bp-hero-pris-seneste { display: inline-flex; align-items: center; gap: 7px; }
		.bf-bp-hero-pris-lbl { font-family: var(--font-mono), monospace; font-size: 11px; letter-spacing: 0.04em; color: var(--stone, #6B6F70); }
		.bf-bp-hero-pris-pct { font-family: var(--font-mono), monospace; font-size: 11px; font-weight: 500; letter-spacing: 0.04em; color: var(--ink, #0B3B36); }
		.bf-bp-hero-pris-seneste .bf-bp-arrow { width: 14px; height: 10px; }
		.bf-bp-hero-pris-tal { display: flex; align-items: baseline; gap: 6px; }
		.bf-bp-hero-pris-tal b { font-weight: 400; font-size: 40px; line-height: 1; color: var(--ink, #0B3B36); }
		.bf-bp-hero-pris-tal i { font-style: normal; font-size: 20px; color: var(--stone, #6B6F70); }
		.bf-bp-hero-pris-knap { padding-top: 20px; }
		.bf-bp-hero-pris-knap a { display: block; text-align: center; background: var(--ink, #0B3B36); color: var(--card, #fffcf4); padding: 14px; border-radius: 8px; font-size: 14px; font-weight: 500; transition: background .15s; }
		.bf-bp-hero-pris-knap a:hover { background: #0f4a43; }
	}

	/* ---- Kommune: "på siden" chip navigation (Figma 411:61) ---- */
	@scope (.bf-bp-km-nav) {
		:scope { background: #163D37; border-top: 1px solid rgba(209,221,217,.15); border-bottom: 1px solid rgba(209,221,217,.15); padding: 13px 0; }
		.bf-bp-km-nav-inner { display: flex; align-items: center; gap: 10px; overflow-x: auto; scrollbar-width: none; }
		.bf-bp-km-nav-inner::-webkit-scrollbar { display: none; }
		.bf-bp-km-nav-lbl { font-family: var(--font-mono), monospace; font-size: 10px; letter-spacing: 1px; color: var(--mist, #9FB8B3); white-space: nowrap; }
		:scope .bf-bp-km-chip { border: 1px solid rgba(255,255,255,.7); border-radius: 999px; padding: 7px 13px; font-size: 13px; color: #fff; white-space: nowrap; transition: background .12s, border-color .12s; }
		:scope .bf-bp-km-chip:hover { border-color: #fff; background: rgba(255,255,255,.08); }
	}
	/* anchor scroll-offsets for the chip targets (live on other sections) — general */
	#bf-bp-udvikling, #bf-bp-faq, #bf-bp-barometer { scroll-margin-top: 24px; }

	/* ---- Kommune: markedsbarometer (købers/sælgers marked, Figma 414:2) ---- */
	@scope (.bf-bp-barometer) {
		:scope { background: var(--paper); padding: 88px 0; }
		.bf-bp-bar-head { margin-bottom: 36px; }
		.bf-bp-bar-head .bf-bp-h2 { margin: 0; }
		.bf-bp-bar-head-tekst .bf-bp-bar-pane { margin: 0; }
		/* local boligtype panes — driven by the section's own data-bar-type, not the global data-boligtype */
		.bf-bp-bar-pane { display: none; }
		:scope[data-bar-type="hus"] .bf-bp-bar-pane[data-type="hus"], :scope[data-bar-type="ejerlejlighed"] .bf-bp-bar-pane[data-type="ejerlejlighed"] { display: block; }

		.bf-bp-bar-card { border-radius: 16px; padding: 32px; }
		.bf-bp-bar-tabs { margin-bottom: 26px; }
		.bf-bp-bar-dom { font-weight: 400; font-size: clamp(26px, 3vw, 34px); line-height: 1.1; margin: 0 0 12px; }
		.bf-bp-bar-dom em { font-style: italic; color: var(--coral); }
		.bf-bp-bar-forklaring { max-width: 780px; margin: 0 0 28px; padding-bottom: 28px; border-bottom: 1px solid var(--line); }

		.bf-bp-bar-body { display: grid; grid-template-columns: 420fr 660fr; gap: 28px; align-items: start; }
		.bf-bp-bar-stats { display: flex; flex-direction: column; gap: 14px; }
		.bf-bp-bar-stat { border-radius: 12px; padding: 18px 20px; }
		.bf-bp-bar-stat-navn { display: flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 500; color: var(--ink); padding-bottom: 14px; border-bottom: 1px solid var(--line); }
		.bf-bp-bar-stat-info { font-style: normal; font-size: 12px; color: var(--mist, #9FB8B3); }
		.bf-bp-bar-stat-grid { display: grid; grid-template-columns: 1.25fr 1fr 1fr; gap: 12px; align-items: end; margin-top: 16px; }
		.bf-bp-bar-stat-lbl { display: block; font-family: var(--font-mono), monospace; font-size: 10px; letter-spacing: 0.05em; color: var(--stone); margin-bottom: 5px; }
		.bf-bp-bar-stat-nu .bf-bp-bar-stat-val { display: inline-flex; align-items: baseline; gap: 5px; }
		.bf-bp-bar-stat-nu .bf-bp-bar-stat-val b { font-weight: 400; font-size: 30px; color: var(--ink); }
		.bf-bp-bar-stat-nu .bf-bp-bar-stat-val i { font-style: normal; font-size: 14px; color: var(--stone); }
		.bf-bp-bar-stat-nu .bf-bp-arrow { width: 12px; height: 12px; align-self: center; }
		.bf-bp-bar-stat-col > span:last-child { font-size: 15px; color: var(--stone); }

		.bf-bp-bar-graf { position: relative; border-radius: 12px; padding: 0; overflow: hidden; }
		.bf-bp-bar-graf svg { display: block; width: 100%; height: auto; }
		.bf-bp-bar-tip { position: absolute; top: 16px; right: 16px; z-index: 4; pointer-events: none; display: flex; flex-direction: column; gap: 5px; min-width: 190px; background: var(--ink); color: #fff; border-radius: 8px; padding: 12px 14px; box-shadow: 0 10px 28px rgba(11,59,54,.28); }
		.bf-bp-bar-tip[hidden] { display: none; }
		.bf-bp-bar-tip-head { display: flex; gap: 5px; font-family: var(--font-mono), monospace; font-size: 10px; letter-spacing: 0.05em; text-transform: uppercase; color: #d1ddd9; }
		.bf-bp-bar-tip-zone::before { content: "· "; }
		.bf-bp-bar-tip-row { display: flex; justify-content: space-between; gap: 18px; font-size: 13px; }
		.bf-bp-bar-tip-row em { font-style: normal; color: #d1ddd9; }
		.bf-bp-bar-tip-row b { font-weight: 500; }

		.bf-bp-bar-kilde { margin: 28px 0 0; padding-top: 24px; border-top: 1px solid var(--line); color: var(--stone); font-size: 13px; line-height: 1.6; max-width: 920px; }
		:scope .bf-bp-bar-kilde a { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; white-space: nowrap; }
		:scope .bf-bp-bar-kilde a:hover { color: var(--coral); }

		@media (max-width: 991px) {
			.bf-bp-bar-head { grid-template-columns: 1fr; gap: 16px; }
			.bf-bp-bar-body { grid-template-columns: minmax(0, 1fr); }
		}
		@media (max-width: 450px) { .bf-bp-bar-card { padding: 24px 16px; } }
	}

	/* ---- Kommune: postnummer-tabel (Figma 415:2) ---- */
	@scope (.bf-bp-postnr) {
		:scope { background: var(--paper-warm); padding: 88px 0; }
		.bf-bp-postnr-tabel tbody tr { cursor: default; } /* ingen række-links i V1 */
		.bf-bp-postnr-tabel tbody tr.bf-bp-postnr-faa, .bf-bp-postnr-tabel tbody tr.bf-bp-postnr-faa th[scope="row"] { color: var(--stone); }
		/* Tættere rækker end den delte kom-tabel, så postnummertabellen matcher Figmas rytme (den store
		   serif-pris' linjehøjde oppustede ellers rækkerne). Kun tbody — headeren bevarer sin sort-knap. */
		.bf-bp-postnr-tabel tbody th, .bf-bp-postnr-tabel tbody td { padding-top: 10px; padding-bottom: 10px; line-height: 1.3; }
	}
	/* anchor scroll-offset (on the postnr section) — general, with the other anchors */
	#bf-bp-postnumre { scroll-margin-top: 24px; }

	/* ---- Region: "Boligpriser i de andre regioner" cards (with mist map cut-out) ---- */
	@scope (.bf-bp-andre-reg) {
		:scope { padding: 88px 0; }
		.bf-bp-andre-reg-head { margin-bottom: 8px; }
		.bf-bp-andre-reg-head .bf-bp-sektion-intro { margin: 6px 0 0; }
		.bf-bp-andre-reg-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 24px; }
		.bf-bp-andre-reg-kort { display: flex; flex-direction: column; border-radius: 12px; padding: 24px; transition: border-color .12s, transform .12s; }
		.bf-bp-andre-reg-kort:hover { border-color: var(--stone); transform: translateY(-2px); }
		.bf-bp-andre-reg-kort-map { display: flex; justify-content: center; align-items: center; height: 150px; margin-bottom: 14px; }
		.bf-bp-andre-reg-kort-map svg { width: 100%; height: 100%; max-height: 150px; display: block; }
		.bf-bp-andre-reg-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
		.bf-bp-andre-reg-navn { font-size: 22px; color: var(--ink); }
		.bf-bp-andre-reg-chevron { color: var(--stone); font-size: 18px; line-height: 1; }
		.bf-bp-andre-reg-kort:hover .bf-bp-andre-reg-chevron { color: var(--coral); }
		.bf-bp-andre-reg-pris { display: flex; align-items: baseline; gap: 5px; margin: 8px 0 6px; }
		.bf-bp-andre-reg-pris b { font-weight: 400; font-size: 30px; color: var(--ink); }
		.bf-bp-andre-reg-pris i { font-style: normal; font-size: 13px; color: var(--stone); }
		.bf-bp-andre-reg-kort small { font-size: 13px; color: var(--stone); }

		@media (max-width: 991px) {
			.bf-bp-andre-reg-grid { grid-template-columns: repeat(2, 1fr); }
			.bf-bp-andre-reg-head { grid-template-columns: 1fr; gap: 16px; }
		}
		@media (max-width: 767px) { .bf-bp-andre-reg-grid { grid-template-columns: 1fr; } }
	}

	/* ---- Region hero map container (dark hero, not the light hub card) ---- */
	@scope (.bf-bp-hero) {
		:scope .bf-bp-kort { background: var(--card, #FFFCF4); border: 0; padding: 20px 22px; }
	}

	/* ---- "Læs mere om, hvordan vi arbejder" ---- */
	@scope (.bf-bp-laesmere) {
		:scope { padding: 88px 0; background: var(--paper-warm, #F1ECDE); }
		.bf-bp-laesmere-eyebrow { margin: 0 0 12px; }
		.bf-bp-laesmere-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 32px; }
		.bf-bp-laesmere-kort { display: flex; flex-direction: column; gap: 10px; border-radius: 12px; padding: 20px 20px 28px; transition: border-color .12s, transform .12s; }
		.bf-bp-laesmere-kort:hover { border-color: var(--stone); transform: translateY(-2px); }
		.bf-bp-laesmere-titel { font-size: 24px; color: var(--ink); margin: 2px 0 4px; }
		.bf-bp-laesmere-tekst { margin: 0; }
		.bf-bp-laesmere-link { margin-top: auto; padding-top: 10px; color: var(--coral); font-size: 14px; font-weight: 500; }

		/* illustration frame */
		.bf-bp-laesmere-figur { display: flex; align-items: center; justify-content: center; height: 196px; margin-bottom: 18px; padding: 20px; border-radius: 10px; background: var(--paper, #F7F4EE); }
		.bf-bp-lm-figur { width: 100%; }

		/* 1. forhandlings-diagram */
		.bf-bp-lm-diagram { display: flex; flex-direction: column; align-items: center; gap: 14px; }
		.bf-bp-lm-dia-top { display: flex; align-items: center; gap: 10px; }
		.bf-bp-lm-person { display: flex; flex-direction: column; align-items: center; gap: 4px; color: var(--ink); }
		.bf-bp-lm-person em { font-style: normal; font-family: var(--font-mono), monospace; font-size: 9px; letter-spacing: .06em; text-transform: uppercase; color: var(--stone); }
		.bf-bp-lm-dia-link { width: 70px; height: 1px; border-top: 1px dashed var(--line); }
		.bf-bp-lm-dia-bund { display: flex; align-items: center; gap: 10px; }
		.bf-bp-lm-box { padding: 9px 12px; border-radius: 6px; white-space: nowrap; }
		.bf-bp-lm-box--dark { background: var(--ink); border-color: var(--ink); color: #fff; }
		.bf-bp-lm-arrows { color: var(--coral); font-size: 16px; }

		/* 2 + 3. boks (regneeksempel / kilder) */
		.bf-bp-lm-boks { display: flex; flex-direction: column; gap: 8px; width: 100%; padding: 14px 16px; border-radius: 8px; }
		.bf-bp-lm-boks-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 2px; }
		.bf-bp-lm-badge { padding: 3px 7px; border-radius: 999px; background: var(--coral); color: #fff; white-space: nowrap; }
		.bf-bp-lm-badge--dark { background: var(--ink); }
		.bf-bp-lm-line { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; font-size: 11px; color: var(--stone); }
		.bf-bp-lm-line b { color: var(--ink); font-weight: 500; }
		.bf-bp-lm-line--afslag { padding-top: 7px; border-top: 1px solid var(--line); color: var(--coral); }
		.bf-bp-lm-line--afslag b { color: var(--coral); }
		.bf-bp-lm-honorar { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 4px; padding: 8px 10px; border-radius: 5px; background: var(--ink); color: #fff; font-family: var(--font-mono), monospace; font-size: 9px; letter-spacing: .03em; text-transform: uppercase; }
		.bf-bp-lm-honorar b { font-family: var(--font-sans), sans-serif; font-size: 12px; }
		.bf-bp-lm-kilder { display: flex; flex-direction: column; gap: 6px; }
		.bf-bp-lm-kilde { display: grid; grid-template-columns: auto 1fr; gap: 2px 8px; align-items: baseline; }
		.bf-bp-lm-kilde i { grid-row: span 2; width: 6px; height: 6px; border-radius: 50%; background: var(--coral); align-self: center; }
		.bf-bp-lm-kilde b { font-size: 11px; color: var(--ink); font-weight: 500; }
		.bf-bp-lm-kilde > span { grid-column: 2; font-family: var(--font-mono), monospace; font-size: 9px; letter-spacing: .03em; color: var(--stone); }

		@media (max-width: 991px) { .bf-bp-laesmere-grid { grid-template-columns: minmax(0, 1fr); } }
		/* Narrow three-column cards (small laptops / tablets in landscape) and the narrowest phones: tighten the
		   illustration so its nowrap boxes fit the card instead of forcing the column (and the page) wider. */
		@media (min-width: 992px) and (max-width: 1199px), (max-width: 360px) {
			.bf-bp-laesmere-figur { padding: 20px 8px; overflow: hidden; }
			.bf-bp-lm-dia-bund { gap: 6px; }
			.bf-bp-lm-box { padding: 9px 6px; }
		}
	}

	/* ======================================================================
	   Boligtype toggle (pure CSS) — reveal the value matching data-boligtype
	   ====================================================================== */
	.bf-bp-val { display: none; }
	:scope[data-boligtype="hus"] .bf-bp-val[data-type="hus"], :scope[data-boligtype="ejerlejlighed"] .bf-bp-val[data-type="ejerlejlighed"], :scope[data-boligtype="fritidshus"] .bf-bp-val[data-type="fritidshus"] { display: inline; }

	.bf-bp-type-pane { display: none; }
	:scope[data-boligtype="hus"] .bf-bp-type-pane[data-type="hus"], :scope[data-boligtype="ejerlejlighed"] .bf-bp-type-pane[data-type="ejerlejlighed"], :scope[data-boligtype="fritidshus"] .bf-bp-type-pane[data-type="fritidshus"] { display: block; }

	/* Time-range toggle (prisudvikling) — nested inside the boligtype panes above. */
	.bf-bp-range-pane { display: none; }
	:scope[data-range="5"] .bf-bp-range-pane[data-range="5"], :scope[data-range="10"] .bf-bp-range-pane[data-range="10"], :scope[data-range="2004"] .bf-bp-range-pane[data-range="2004"], :scope[data-range="1992"] .bf-bp-range-pane[data-range="1992"] { display: block; }
	/* prisudvikling's stat row lays out the active range pane as a flex row (references the root data-range, so it lives here, not in @scope .bf-bp-udvikling) */
	:scope[data-range="5"] .bf-bp-udv-stat .bf-bp-range-pane[data-range="5"], :scope[data-range="10"] .bf-bp-udv-stat .bf-bp-range-pane[data-range="10"], :scope[data-range="2004"] .bf-bp-udv-stat .bf-bp-range-pane[data-range="2004"], :scope[data-range="1992"] .bf-bp-udv-stat .bf-bp-range-pane[data-range="1992"] { display: flex; align-items: center; gap: 10px; }

	/* trend colours */
	.bf-bp-val.is-up { color: var(--green, #2E7D61); }
	.bf-bp-val.is-down { color: var(--coral-deep, #FF5535); }

	/* ---- responsive ---- */
	@media (max-width: 991px) {
		.bf-bp-andre .bf-bp-region-kort { grid-template-columns: repeat(2, 1fr); }
		.bf-bp-alle-head { grid-template-columns: 1fr; gap: 16px; }
		.bf-bp-kvm-kort { grid-template-columns: 1fr; }
	}

	@media (max-width: 767px) {
		:scope .fs-wrap { padding: 0 20px; }
		.bf-bp-tabel-sektion { padding: 56px 0; }
		.bf-bp-andre .bf-bp-region-kort { grid-template-columns: 1fr; }
		.bf-bp-kom-tabel-wrap { overflow-x: auto; }
		.bf-bp-kom-tabel { min-width: 640px; }
		.bf-bp-tabel { position: relative; display: block; overflow-x: auto; white-space: nowrap; }
	}

}