/*
 * Mobilsiden 2026 - hovedstylesheet.
 * Ingen build-step: skriv CSS her og bump MS2026_VERSION i functions.php.
 * Designtokens stammer fra kravspec ("Det store overblik") og mockups.
 */

/* ---------- Tokens ---------- */

@font-face {
	font-family: 'Hanken Grotesk';
	src: url('../fonts/HankenGrotesk-VariableFont_wght.woff2') format('woff2-variations');
	font-weight: 100 900;
	font-display: swap;
}

:root {
	/* Farver */
	--color-brand: #DF170C;
	--color-ink: #1A1C1D;
	--color-ink-soft: #202222;
	--color-muted: #4B5563;
	--color-rose-border: #E8BDB6;
	--color-card-border: #EFDFDB;
	/* Kravspec siger #9C8A87, men den fejler WCAG AA på småtekst (3,0-3,3:1
	   mod hvid/grå). Mørkere variant i samme varme gråtone (4,8-5,2:1).
	   OBS: bevidst designafvigelse - vendes med Lasse/Daniel. */
	--color-crumb: #756A66;
	--color-footer-link: #5E3F3A;
	--color-hover-gray: #F3F4F6;
	--color-rank: #F2DEDD;
	--color-image-bg: #F3F3F4;
	--color-white: #FFFFFF;

	/* Typografi */
	--font-sans: 'Hanken Grotesk', system-ui, -apple-system, sans-serif;

	/* Effekter */
	--shadow-card: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
	--shadow-popup: 0 20px 25px -5px #0000001a;
	--radius-card: 0.625rem;
	--radius-popup: 0.75rem;
	--radius-hover: 0.375rem;

	/* Gradient til artikelkort (16:9-billede i 16:12-ramme, roed bund til teasertekst) */
	--article-gradient: linear-gradient(to top, rgba(223, 23, 12, 1) 0%, rgba(223, 23, 12, 0.8) 20%, rgba(223, 23, 12, 0.3) 50%, transparent 100%);

	/* Layout */
	--content-width: 760px;
	--wide-width: 1200px;
	--header-height: 56px;
}

/* ---------- Basis ---------- */

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

html { scroll-behavior: smooth; }

body {
	margin: 0;
	font-family: var(--font-sans);
	color: var(--color-ink);
	background: var(--color-white);
	-webkit-font-smoothing: antialiased;
}

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

/* Mockup: lys grå sidebaggrund på oversigtssider, så hvide kort/widgets står frem */
body.blog,
body.archive,
body.search,
body.elm-screen { background: #F6F7F8; }

a { color: inherit; }

.only-desktop { display: none; }
@media (min-width: 900px) { .only-desktop { display: block; } }

/* In-article-annoncen var floated og lagde sig HEN OVER blok-elementer som
   INDHOLD-boksen (blokke ombryder ikke floats). Mockups viser in-article-
   annoncer som centrerede bånd - så det gør vi. */
.in-article-ad { margin: 1.5rem auto; text-align: center; }
.in-article-ad .an-unit { display: inline-block; }

.screen-reader-text {
	position: absolute;
	width: 1px; height: 1px;
	margin: -1px; padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	border: 0;
}

/* ---------- Header ---------- */

.site-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: var(--color-white);
	border-bottom: 1px solid var(--color-rose-border);
	box-shadow: 0 2px 4px rgb(0 0 0 / 0.04);
	transition: transform 0.25s ease;
}

/* Skjules ved scroll ned, vises ved scroll op (main.js toggler klassen) */
.site-header.is-hidden { transform: translateY(-100%); }

.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	max-width: var(--wide-width);
	margin: 0 auto;
	padding: 0.5rem 1rem;
	min-height: var(--header-height);
}

.site-header__logo {
	display: inline-flex;
	align-items: center;
	/* Trello #39: hold wordmarket lodret centreret i baren (så det ikke står skævt). */
	line-height: 1;
	font-weight: 900;
	font-size: 1.5rem;
	letter-spacing: -1px;
	color: var(--color-brand);
	text-decoration: none;
}

.site-header__burger,
.site-header__search-toggle,
.mobile-menu__close {
	appearance: none;
	background: none;
	border: 0;
	padding: 0.5rem;
	cursor: pointer;
	color: var(--color-ink);
}

.burger-bar {
	display: block;
	width: 22px;
	height: 2px;
	margin: 5px 0;
	background: var(--color-ink);
}

/* Desktopmenu */
.site-header__nav { display: none; }

.primary-menu {
	display: flex;
	gap: 1.5rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.primary-menu > li > a {
	text-decoration: none;
	text-transform: uppercase;
	font-size: 0.8125rem;
	font-weight: 700;
	color: var(--color-ink);
}

.primary-menu > li > a:hover { color: var(--color-brand); }

/* Lille ned-chevron på topniveau-punkter med dropdown (som i desktop-mockup) */
.primary-menu > li.menu-item-has-children > a::after {
	content: '';
	display: inline-block;
	width: 6px;
	height: 6px;
	margin-left: 0.375rem;
	vertical-align: 2px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg);
}

/* Dropdown (fase 1: mega-menu m. sloeret baggrund udenfor) */
.primary-menu .sub-menu {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	width: max-content;
	background: var(--color-white);
	box-shadow: var(--shadow-popup);
	border: 1px solid #E5E7EB;
	border-radius: var(--radius-popup);
	padding: 2rem;
	z-index: 60;
	list-style: none;
}

.primary-menu li { position: relative; }
.primary-menu li:hover > .sub-menu,
.primary-menu li:focus-within > .sub-menu { display: block; }

.primary-menu .sub-menu a {
	display: flex;
	align-items: center;
	gap: 0.625rem;
	padding: 0.5rem 0.75rem;
	color: var(--color-muted);
	font-size: 0.875rem;
	font-weight: 500;
	text-decoration: none;
	border-radius: var(--radius-hover);
}

.primary-menu .sub-menu a:hover { background: var(--color-hover-gray); }

@media (min-width: 900px) {
	.site-header__nav { display: block; }
	.site-header__burger { display: none; }
}

/* ---------- Mobilmenu (glider ind fra venstre) ---------- */

.mobile-menu {
	position: fixed;
	inset: 0 auto 0 0;
	width: 80%;
	max-width: 360px;
	background: var(--color-white);
	z-index: 210;
	transform: translateX(-100%);
	transition: transform 0.25s ease;
	overflow-y: auto;
	padding: 1rem 1.25rem;
}

.mobile-menu.is-open { transform: translateX(0); }

.mobile-menu__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	border-bottom: 1px solid var(--color-rose-border);
	padding-bottom: 0.75rem;
}

.mobile-menu__title {
	margin: 0;
	font-weight: 900;
	font-size: 1.375rem;
	color: var(--color-brand);
}

.mobile-menu__title span {
	display: block;
	font-weight: 700;
	font-size: 0.6875rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--color-crumb);
}

.mobile-menu__close { font-size: 1.75rem; line-height: 1; }

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

.mobile-menu__list > li {
	border-bottom: 1px solid var(--color-hover-gray);
}

.mobile-menu__list > li > a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 1.125rem 0.25rem;
	text-decoration: none;
	text-transform: uppercase;
	font-weight: 800;
	font-size: 0.9375rem;
	color: var(--color-ink);
}

.mobile-menu__list > li > a:hover,
.mobile-menu__list > li > a:active {
	background: var(--color-hover-gray);
	color: var(--color-brand);
}

/* Chevron ">" paa punkter med undermenu; roterer 90 grader naar udfoldet */
.mobile-menu__list > li.menu-item-has-children > a::after {
	content: '';
	width: 8px;
	height: 8px;
	flex: none;
	margin-right: 0.375rem;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(-45deg);
	transition: transform 0.2s ease;
}

.mobile-menu__list > li.is-expanded > a { color: var(--color-brand); }

.mobile-menu__list > li.is-expanded > a::after { transform: rotate(45deg); }

.mobile-menu__list .sub-menu {
	display: none;
	list-style: none;
	margin: 0;
	padding: 0 0 0.75rem;
	background: var(--color-hover-gray);
}

.mobile-menu__list > li.is-expanded > .sub-menu { display: block; }

.mobile-menu__list .sub-menu a {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.75rem 1rem;
	text-decoration: none;
	font-size: 0.9375rem;
	color: var(--color-ink);
}

.mobile-menu__list .sub-menu a:hover { color: var(--color-brand); }

.mobile-menu__cta {
	display: block;
	margin: 1.5rem 0 1rem;
	padding: 0.875rem 1rem;
	background: var(--color-brand);
	color: var(--color-white);
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
	font-weight: 800;
	font-size: 0.875rem;
	letter-spacing: 0.08em;
	border-radius: var(--radius-card);
}

/* Røde ikoner foran undermenupunkter (kravspec: color #df170c, ~1.125rem) */
.menu-icon {
	display: inline-flex;
	flex: none;
	color: var(--color-brand);
}

.menu-icon .icon { display: block; }

.menu-backdrop {
	position: fixed;
	inset: 0;
	background: rgb(0 0 0 / 0.45);
	backdrop-filter: blur(2px);
	z-index: 200;
}

/* Sløring/mørk baggrund under headeren mens en desktop-dropdown er åben.
   Ligger UNDER headeren (z-index 100) så menuen forbliver klikbar. */
.nav-backdrop {
	position: fixed;
	inset: 0;
	background: rgb(0 0 0 / 0.25);
	backdrop-filter: blur(2px);
	z-index: 90;
	pointer-events: none;
}

/* Trello #82: mens søgefeltet er åbent, fanger backdrop'en klik (så baggrundens
   links ikke kan rammes); et klik lukker søgningen via main.js. */
body.search-open .nav-backdrop { pointer-events: auto; }

/* ---------- Soegeoverlay ---------- */

.search-overlay {
	padding: 0.75rem 1rem 1rem;
	background: var(--color-white);
}

.search-form {
	display: flex;
	align-items: center;
	gap: 0.625rem;
	max-width: var(--content-width);
	margin: 0 auto;
	background: var(--color-hover-gray);
	border-radius: var(--radius-card);
	padding: 0.375rem 0.875rem;
	box-shadow: var(--shadow-card);
}

.search-form__icon { flex: none; color: var(--color-muted); }

.search-form__label { flex: 1; display: block; }

.search-form__input {
	width: 100%;
	border: 0;
	background: none;
	font: inherit;
	font-size: 1rem;
	color: var(--color-ink);
	padding: 0.625rem 0;
	outline: none;
}

.search-form__input::placeholder { color: var(--color-muted); }

.search-form__close {
	appearance: none;
	flex: none;
	border: 0;
	background: none;
	cursor: pointer;
	color: var(--color-ink);
	padding: 0.375rem;
}

/* Uden for overlayet (fx 404-side) er der intet at lukke - skjul krydset */
.error-404 .search-form__close { display: none; }

/* ---------- Indholdsfeed / artikelkort ---------- */

.site-main {
	max-width: var(--wide-width);
	margin: 0 auto;
	padding: 1rem;
}

.content-feed {
	display: grid;
	/* minmax(0, 1fr): klem kolonnen til container-bredden, så et for bredt
	   grid-item (fx en indskudt annonce) ikke sprænger kolonnen og gør ALLE
	   forsidebokse for brede på mobil (redaktionens bug: manglende højremargin). */
	grid-template-columns: minmax(0, 1fr);
	gap: 1.5rem;
	max-width: var(--content-width);
	margin: 0 auto;
}

/* Forsidens højrespalte findes kun på desktop - på mobil ligger widgets i feedet */
.front-sidebar { display: none; }

/* Desktop-forside (interim): hero i fuld bredde, kort parvis i 2 kolonner,
   widgets/nyhedsbrev som fuldbredde-bånd, midterste annonce som kort i
   griddet (som i desktop-mockup). DOM-rækkefølgen er mobilens; her
   omarrangeres med order. Den endelige desktop-mockup (fast sidebar)
   implementeres i en senere iteration. */
@media (min-width: 1000px) {
	/* Forside-layout: feed til venstre, fast 340px højrespalte (mockup).
	   Feedet beholder sin interne 2-kolonne-rytme i venstrespalten. */
	.front-layout {
		max-width: var(--wide-width);
		margin: 0 auto;
		display: grid;
		grid-template-columns: minmax(0, 1fr) 340px;
		gap: 3rem;
		align-items: start;
	}

	.front-sidebar {
		display: grid;
		gap: 1.5rem;
		align-content: start;
	}

	.front-sidebar .mentioned-cars { margin: 0; max-width: none; }

	/* Nyhedsbrevstilmeldingen ligger i højrespalten på desktop */
	.content-feed--front > .newsletter { display: none; }

	/* Arkiver/søgning/forfatterside i samme layout: venstrespaltens feed
	   fylder spalten med kort parvis; paginering m.m. i fuld bredde */
	.front-main { min-width: 0; }

	.front-layout .content-feed {
		grid-template-columns: 1fr 1fr;
		max-width: none;
		align-items: start;
	}

	.front-layout .content-feed > .pagination-nav,
	.front-layout .content-feed > .author-posts-title,
	.front-layout .content-feed > p,
	.front-layout .content-feed > form {
		grid-column: 1 / -1;
	}

	.front-main .archive-header,
	.front-main .author-card,
	.front-main .breadcrumbs--author { max-width: none; }

	/* Fuldbredde-bånd */
	.content-feed--front > .article-card:first-of-type,
	.content-feed--front > .ad-slot,
	.content-feed--front > .numbered-widget,
	.content-feed--front > .newsletter,
	.content-feed--front > .pagination-nav {
		grid-column: 1 / -1;
	}

	/* Rækkefølge: hero, annonce, kort 2+3, Seneste nyt, kort 4+5,
	   Vi anbefaler, kort 6 + annonce-kort, annonce, nyhedsbrev, paginering */
	.content-feed--front > .article-card:nth-of-type(1) { order: 1; }
	.content-feed--front > div.ad-slot:nth-of-type(1) { order: 2; }
	.content-feed--front > .article-card:nth-of-type(2) { order: 3; }
	.content-feed--front > .article-card:nth-of-type(3) { order: 4; }
	.content-feed--front > section.numbered-widget:nth-of-type(1) { order: 5; }
	.content-feed--front > .article-card:nth-of-type(4) { order: 6; }
	.content-feed--front > .article-card:nth-of-type(5) { order: 7; }
	.content-feed--front > section.numbered-widget:nth-of-type(2) { order: 8; }
	.content-feed--front > .article-card:nth-of-type(6) { order: 9; }

	.content-feed--front > div.ad-slot:nth-of-type(2) {
		order: 10;
		grid-column: auto; /* annonce-kort i griddet, ikke bånd */
		align-self: stretch;
		display: grid;
		align-content: center;
	}

	.content-feed--front > div.ad-slot:nth-of-type(3) { order: 11; }
	.content-feed--front > .newsletter { order: 12; }
	.content-feed--front > .pagination-nav { order: 13; }

	.content-feed--front > .article-card:first-of-type .article-card__title {
		font-size: 2rem;
	}

	/* To deterministisk lige store kolonner (server-side split) - CSS columns
	   balancerede på højde og gav skæve delinger ved lange titler */
	.content-feed--front > .numbered-widget .numbered-widget__cols {
		display: grid;
		grid-template-columns: 1fr 1fr;
		column-gap: 2.5rem;
		align-items: start;
	}

	.content-feed--front > .numbered-widget .numbered-widget__cols .numbered-widget__list + .numbered-widget__list .numbered-widget__item:first-child {
		border-top: 0;
	}
}

.article-card {
	border-radius: var(--radius-card);
	box-shadow: var(--shadow-card);
	overflow: hidden;
	background: var(--color-brand);
}

/* Mockup: hele kortet ER billedet (16:12-beskæring), gradient + tekst ligger
   OVENPÅ forneden. Kortet er flex med aspect-ratio som foretrukken højde -
   lange titler/teasere strækker det nedad, og billedet dækker stadig (cover). */
.article-card__link {
	text-decoration: none;
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	aspect-ratio: 16 / 12;
}

.article-card__media {
	position: absolute;
	inset: 0;
	overflow: hidden;
}

.article-card__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.article-card__gradient {
	position: absolute;
	inset: 0;
	background: var(--article-gradient);
}

/* Trello #60: gaussisk sløring bag teksten forneden - øger læsbarheden af den
   hvide tekst. Tones ind fra omkring midten mod bunden via en maske. Små kort:
   nederste halvdel; det store fremhævede kort: nederste tredjedel. */
.article-card__media::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 55%;
	backdrop-filter: blur(7px);
	-webkit-backdrop-filter: blur(7px);
	-webkit-mask-image: linear-gradient( to bottom, transparent, #000 70% );
	mask-image: linear-gradient( to bottom, transparent, #000 70% );
	pointer-events: none;
}
.content-feed--front > .article-card:first-of-type .article-card__media::after {
	height: 38%;
}

.article-card__badge {
	position: absolute;
	top: 0.875rem;
	left: 0.875rem;
	background: var(--color-white);
	color: var(--color-brand);
	font-size: 0.6875rem;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding: 0.25rem 0.5rem;
	border-radius: 0.25rem;
}

.article-card__body {
	position: relative; /* over den absolut positionerede media/gradient */
	padding: 4.5rem 1rem 1rem; /* toppadding sikrer gradienten bag teksten */
	color: var(--color-white);
	/* Læsbarhed på overskrifter over den røde gradient (Trello). */
	text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.4);
}

.article-card__title {
	margin: 0 0 0.375rem;
	font-size: 1.375rem;
	font-weight: 800;
	line-height: 1.2;
	/* Maks. 3 linjer, så titlen ikke skubbes op over gradienten. */
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.article-card__teaser {
	margin: 0 0 0.5rem;
	font-size: 0.875rem;
	opacity: 0.95;
	/* Begræns teaserhøjden, så titlen bliver på den røde gradient (Trello). */
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.article-card__time {
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	/* Fuld hvid: 90 % opacity på den røde gradient gav 4,18:1 (AA kræver 4,5) */
}

/* Fastgjort-markering: pin-ikon før tidsstemplet (Trello #93). */
.article-card__meta { display: flex; align-items: center; gap: 0.375rem; margin: 0; }
.article-card__pin { display: inline-flex; color: #fff; }
.article-card__pin svg { width: 17px; height: 17px; stroke-width: 2.3; }

/* ---------- Annonceplads ---------- */

.ad-slot {
	text-align: center;
	margin: 0.25rem 0;
}

.ad-slot__label {
	display: block;
	font-size: 0.625rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--color-crumb);
	margin-bottom: 0.25rem;
}

/* Trello #50: reservér bannerhøjden bag pladsen (CLS) + svag placeholder-flade. */
.ad-slot .an-unit {
	min-height: var(--ad-h, 4rem);
	background: #f3f3f3;
}
/* Enheder der kun fyldes på ét breakpoint - skjul på det andet, så der ikke
   reserveres et tomt hul. Desktop-grænse følger .only-desktop (900px). */
.ad-slot--only-mobile { display: none; }
.ad-slot--only-desktop { display: none; }
@media (max-width: 899px) { .ad-slot--only-mobile { display: block; } }
@media (min-width: 900px) { .ad-slot--only-desktop { display: block; } }

/* Leaderboard-placeringer (Trello #9/#11): fuld bredde over indholdet og
   mellem sidetal og footer. */
.ad-slot--leaderboard { width: 100%; margin: 1.5rem 0; }
.ad-slot--leaderboard.ad-slot--top { margin-top: 0.5rem; }

/* Synlig placeholder indtil AdNordics leverer et leaderboard-unit-id. */
.ad-slot--placeholder {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.25rem;
	min-height: 90px;
	border: 1px dashed var(--color-rose-border);
	border-radius: var(--radius-card);
	background: repeating-linear-gradient( 45deg, #fbfbfb, #fbfbfb 12px, #f3f3f3 12px, #f3f3f3 24px );
}
.ad-slot--placeholder .ad-slot__label { margin-bottom: 0; }
.ad-slot__ph-note { font-size: 0.8125rem; color: var(--color-muted); }

/* ---------- Nummereret widget (Seneste nyt / Vi anbefaler / Mest læste) ---------- */

.numbered-widget {
	background: var(--color-white);
	border: 1px solid var(--color-rose-border);
	border-radius: var(--radius-card);
	box-shadow: var(--shadow-card);
	padding: 1rem;
}

.numbered-widget__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
}

.numbered-widget__title {
	margin: 0 0 0.25rem;
	text-transform: uppercase;
	font-weight: 900;
	font-size: 1.125rem;
	line-height: 1.75rem;
	color: var(--color-ink);
}

.numbered-widget__more {
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-brand);
	text-decoration: none;
	border-bottom: 2px solid var(--color-brand);
	padding-bottom: 0.125rem;
	flex: none;
}

.numbered-widget__list {
	list-style: none;
	margin: 0;
	padding: 0;
	counter-reset: ms-widget;
}

.numbered-widget__item {
	counter-increment: ms-widget;
	border-top: 1px solid var(--color-hover-gray);
}

.numbered-widget__item:first-child { border-top: 0; }

/* Tallet står til venstre; titel + tidsstempel stables lodret (Trello:
   udgivelsestidspunkter rykkes ned under titlen). */
.numbered-widget__item > a {
	display: block;
	position: relative;
	padding: 0.75rem 0 0.75rem 2.625rem;
	text-decoration: none;
}

/* Store kursive tal i #F2DEDD (kravspec) */
.numbered-widget__item > a::before {
	content: counter(ms-widget) '.';
	position: absolute;
	left: 0;
	top: 0.75rem;
	font-style: italic;
	font-weight: 900;
	font-size: 1.75rem;
	line-height: 1;
	color: var(--color-rank);
}

.numbered-widget__link-title {
	display: block;
	font-weight: 700;
	font-size: 0.875rem;
	color: var(--color-ink);
}

.numbered-widget__item > a:hover .numbered-widget__link-title { color: var(--color-brand); }

.numbered-widget__time {
	display: block;
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-crumb);
	margin-top: 0.25rem;
}

/* Mobil: de splittede lister skal ligne ÉN liste (skillelinje mellem dem) */
.numbered-widget__cols .numbered-widget__list + .numbered-widget__list .numbered-widget__item:first-child {
	border-top: 1px solid var(--color-hover-gray);
}

/* ---------- Nyhedsbrev ---------- */

.newsletter {
	background: var(--color-brand);
	color: var(--color-white);
	border-radius: var(--radius-card);
	box-shadow: var(--shadow-card);
	padding: 2rem 1.5rem;
	text-align: center;
}

.newsletter__icon { display: inline-flex; }
.newsletter__icon .icon { width: 32px; height: 32px; }

.newsletter__title {
	margin: 0.5rem 0;
	font-weight: 900;
	font-size: 1.375rem;
}

.newsletter__text {
	margin: 0 auto 1.25rem;
	font-size: 0.9375rem;
	max-width: 34ch;
	opacity: 0.95;
}

.newsletter__form {
	display: grid;
	gap: 0.625rem;
	max-width: 22rem;
	margin: 0 auto;
}

.newsletter__input {
	border: 0;
	border-radius: var(--radius-card);
	padding: 0.875rem 1.125rem;
	font: inherit;
	font-size: 0.9375rem;
	color: var(--color-ink);
	background: var(--color-white);
}

.newsletter__submit {
	appearance: none;
	border: 0;
	cursor: pointer;
	background: var(--color-white);
	color: var(--color-brand);
	font-weight: 800;
	font-size: 0.875rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding: 0.875rem 1rem;
	border-radius: var(--radius-card);
	box-shadow: var(--shadow-card);
}

.newsletter__notice { font-weight: 700; }

/* ---------- Breadcrumbs ---------- */

.breadcrumbs {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--color-crumb);
	margin: 0.5rem 0 1rem;
}

.breadcrumbs a { color: var(--color-crumb); text-decoration: none; }
.breadcrumbs a:hover { color: var(--color-brand); }

.breadcrumbs__sep { color: var(--color-crumb); }

.breadcrumbs__sep .icon {
	width: 11px;
	height: 11px;
	vertical-align: -1px;
	margin: 0 0.125rem;
}

/* ---------- Artikelside ---------- */

/* Mobil: artikel og sidebar under hinanden i læsebredde. Desktop: to
   kolonner med fast højrespalte (mockup: Desktop artikel.png). */
.single-layout {
	max-width: var(--content-width);
	margin: 0 auto;
}

.single-article {
	max-width: var(--content-width);
	margin: 0 auto;
}

.single-article__sidebar {
	display: grid;
	gap: 1.5rem;
	align-content: start;
	margin-top: 2.5rem;
}

.single-article__sidebar .mentioned-cars { margin: 0; max-width: none; }

@media (min-width: 1000px) {
	.single-layout {
		max-width: var(--wide-width);
		display: grid;
		grid-template-columns: minmax(0, 1fr) 340px;
		gap: 3rem;
		align-items: start;
	}

	.single-article__sidebar { margin-top: 0; }
}

.single-article__title {
	font-size: 1.75rem;
	font-weight: 900;
	line-height: 1.15;
	margin: 0.5rem 0 1rem;
}

.single-article__lead {
	font-size: 1.1875rem;
	/* Trello #83: strammere linjeafstand i manchetten. */
	line-height: 1.35;
	/* Trello #53: manchet/teaser i artikler er fed. */
	font-weight: 700;
	color: var(--color-ink-soft);
	margin: 0.25rem 0 0.75rem;
}

.single-article__meta {
	display: flex;
	align-items: center;
	gap: 0.625rem;
	margin-bottom: 1rem;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--color-crumb);
}

.single-article__avatar { border-radius: 50%; }

.byline { font-style: normal; display: inline; }
.byline a { color: var(--color-ink); text-decoration: none; }
.byline a:hover { color: var(--color-brand); }

.single-article__hero { margin: 0 0 1.5rem; position: relative; /* kategori-badge (genbruger kortets) */ }
.single-article__hero img { border-radius: var(--radius-card); display: block; box-shadow: var(--shadow-card); /* Trello #68: samme skygge som øvrige bokse. */ }
.single-article__hero figcaption {
	font-size: 0.8125rem;
	color: var(--color-muted);
	padding-top: 0.5rem;
}

.single-article__content {
	font-size: 1.0625rem;
	line-height: 1.65;
	color: var(--color-ink-soft);
}

/* Trello #45: links i artikelbrødtekst er røde som default - ingen underline
   eller fed skrift (understregning kun ved hover for genkendelighed). */
.single-article__content a {
	color: var(--color-brand);
	text-decoration: none;
	font-weight: inherit;
}
.single-article__content a:hover,
.single-article__content a:focus-visible { text-decoration: underline; }

/* Trello #68: billeder inde i artikler får samme radius + skygge som de øvrige
   bokse på sitet. */
.single-article__content img {
	border-radius: var(--radius-card);
	box-shadow: var(--shadow-card);
}

/* Gamle artiklers inline-justerede billeder (alignright/alignleft fra den
   klassiske editor) flød ud over spaltebredden og efterlod akavede tomrum. */
.single-article__content img.alignright,
.single-article__content .alignright {
	float: right;
	max-width: 50%;
	height: auto;
	margin: 0.25rem 0 1rem 1.5rem;
}

.single-article__content img.alignleft,
.single-article__content .alignleft {
	float: left;
	max-width: 50%;
	height: auto;
	margin: 0.25rem 1.5rem 1rem 0;
}

@media (max-width: 600px) {
	.single-article__content img.alignright,
	.single-article__content .alignright,
	.single-article__content img.alignleft,
	.single-article__content .alignleft {
		float: none;
		max-width: 100%;
		margin: 1rem 0;
	}
}

/* Gamle indlejrede afspillere m.fl. har faste width-attributter (fx 670) -
   uden dette flyder de ud over artikelbredden på mobil. */
.single-article__content iframe,
.single-article__content object,
.single-article__content embed,
.single-article__content video {
	max-width: 100%;
}

/* Klassiske [caption]-shortcodes udskriver inline width (fx "width: 2560px")
   på figuren - uden dette flyder billedet ud over artikelbredden. */
.single-article__content .wp-caption {
	width: auto !important;
	max-width: 100%;
	margin-left: 0;
	margin-right: 0;
}

.single-article__content .wp-caption img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--radius-card);
}

.single-article__content .wp-caption-text {
	font-size: 0.8125rem;
	color: var(--color-crumb);
	margin-top: 0.375rem;
}

.single-article__content h2,
.single-article__content h3 {
	font-weight: 800;
	line-height: 1.25;
}

/* Indholdsfortegnelse */
.toc {
	background: var(--color-white);
	border: 1px solid var(--color-rose-border);
	border-radius: var(--radius-card);
	box-shadow: var(--shadow-card);
	padding: 1rem 1.25rem;
	margin: 1.5rem 0;
	clear: both; /* værn mod floats (gamle alignright-billeder m.m.) */
}

.toc__title {
	margin: 0 0 0.5rem;
	text-transform: uppercase;
	font-weight: 900;
	font-size: 0.875rem;
	letter-spacing: 0.1em;
	color: var(--color-ink);
}

.toc__list {
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: 0.9375rem;
}

.toc__item a {
	display: flex;
	gap: 0.5rem;
	padding: 0.3125rem 0;
	color: var(--color-ink-soft);
	text-decoration: none;
	font-weight: 600;
}

.toc__item a:hover { color: var(--color-brand); }
.toc__item a:hover .toc__text { text-decoration: underline; }

/* Nummer i fast gutter, så overskrifterne starter samme sted uanset niveau
   (Trello #26). Kun h2 er fed. */
.toc__num {
	flex: none;
	min-width: 2.25rem;
	color: var(--color-muted);
	font-variant-numeric: tabular-nums;
}
.toc__item--h2 .toc__text { font-weight: 700; }
.toc__item--h3 .toc__text { font-weight: 400; }

/* Skiftevis hvid/lysegrå baggrund pr. RÆKKE uanset overskriftsniveau
   (Trello #26). Negativ margin + padding trækker striberne ud til kanterne. */
.toc__item {
	margin: 0 -1.25rem;
	padding: 0 1.25rem;
}
.toc__item--b { background: #F8F9FA; }

/* ---------- Afstemninger (WP-Polls) — Trello #25 ---------- */
/* Kortet: når spørgsmålet vises som overskrift, wrappes alt i .poll-card, og
   selve .wp-polls (som WP-Polls' AJAX overskriver) mister sit eget kort-look. */
.poll-card,
.wp-polls {
	max-width: var(--content-width);
	margin: 1.5rem auto;
	background: var(--color-white);
	border: 1px solid var(--color-rose-border);
	border-radius: var(--radius-card);
	box-shadow: var(--shadow-card);
	padding: 1.25rem 1.5rem;
	clear: both;
	font-size: 0.9375rem;
}
.poll-card .wp-polls {
	max-width: none;
	margin: 0;
	padding: 0;
	border: 0;
	box-shadow: none;
	background: none;
}

.wp-polls p { margin: 0 0 0.75rem; }
.wp-polls strong { font-weight: 800; }

/* Overskrift = spørgsmålet (Trello #25). WP-Polls gentager selv spørgsmålet
   som første afsnit inde i afstemningen — det skjules når vi har overskriften. */
.poll__q {
	margin: 0 0 0.875rem;
	font-weight: 900;
	font-size: 1.0625rem;
	line-height: 1.35;
	color: var(--color-ink);
}
/* Uden overskrift (fx widget-afstemninger): style spørgsmåls-afsnittet. */
.wp-polls .poll-inner > p:first-child,
.wp-polls-form > p:first-child {
	font-weight: 900;
	font-size: 1.0625rem;
	line-height: 1.35;
	color: var(--color-ink);
}
/* Med overskrift skjules det gentagne spørgsmål (højere specificitet vinder). */
.poll-card .wp-polls .poll-inner > p:first-child { display: none; }

.wp-polls-ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

/* Skiftevis hvid/lysegrå række pr. svarmulighed (Trello #25). */
.wp-polls-ul li {
	margin: 0;
	padding: 0.5rem 0.625rem;
	line-height: 1.4;
	border-radius: var(--radius-hover);
}
.wp-polls-ul li:nth-child(odd) { background: #F8F9FA; }

/* Afstemnings-tilstand: radio + label på samme linje (input og label er
   søskende i li'et, så vi holder dem inline i stedet for at flexe label'en). */
.wp-polls-ul input[type="radio"] {
	margin: 0 0.5rem 0 0;
	accent-color: var(--color-brand);
	vertical-align: -0.1em;
}
.wp-polls-ul label { cursor: pointer; }

/* Resultat-tilstand (Trello #25): svar til venstre, "% (N stemmer)" til højre,
   fuld-bredde bjælke (lys track + rød fyld) nedenunder. Scopet til li'er med en
   .pollbar, så afstemnings-tilstanden (radio + label) ikke påvirkes. */
.wp-polls-ul li:has(.pollbar) {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: baseline;
	gap: 0.15rem 1rem;
	padding-bottom: 1rem;
}
.wp-polls-ul li small {
	color: var(--color-muted);
	font-size: 0.8125rem;
	font-weight: 400;
	white-space: nowrap;
}
/* Lys track bag bjælken. */
.wp-polls-ul li:has(.pollbar)::before {
	content: "";
	position: absolute;
	left: 0.625rem;
	right: 0.625rem;
	bottom: 0.35rem;
	height: 6px;
	border-radius: 999px;
	background: rgba(223, 23, 12, 0.14);
}
/* Rød fyld (pollbar, width: X% sat inline af WP-Polls). */
.wp-polls .pollbar {
	position: absolute;
	left: 0.625rem;
	bottom: 0.35rem;
	height: 6px;
	min-width: 2px;
	max-width: calc(100% - 1.25rem);
	background: var(--color-brand);
	border: 0;
	border-radius: 999px;
}

/* Knap-række: rød "Afgiv stemme" + hvid "Se resultat" side om side, ens højde
   (Trello #25). WP-Polls lægger dem i hver sit <p> efter svarlisten. */
.wp-polls-ans > p,
.wp-polls-ans > p.text-center {
	display: inline-block;
	margin: 0.875rem 0.5rem 0 0;
	text-align: left;
	vertical-align: middle;
}

/* Stem-knap (rød pille). Gennemsigtig 1px-kant, så højden matcher "Se resultat". */
.wp-polls input.Buttons,
.wp-polls-form input[type="button"],
.wp-polls-form input[type="submit"] {
	background: var(--color-brand);
	color: var(--color-white);
	border: 1px solid var(--color-brand);
	border-radius: 999px;
	padding: 0.5rem 1.375rem;
	font-weight: 800;
	font-size: 0.875rem;
	line-height: 1.2;
	cursor: pointer;
	transition: background-color 0.15s;
}
.wp-polls input.Buttons:hover,
.wp-polls-form input[type="button"]:hover,
.wp-polls-form input[type="submit"]:hover { background: #b3130a; border-color: #b3130a; }

/* "Se resultat" (hvid pille, rød kant). */
.wp-polls-ans > p.text-center a {
	display: inline-block;
	padding: 0.5rem 1.375rem;
	border: 1px solid var(--color-brand);
	border-radius: 999px;
	background: var(--color-white);
	color: var(--color-brand);
	font-weight: 800;
	font-size: 0.875rem;
	line-height: 1.2;
	text-decoration: none;
	transition: background-color 0.15s;
}
.wp-polls-ans > p.text-center a:hover { background: #F8F9FA; text-decoration: none; }

/* Øvrige links i afstemningen (fx tilbage-til-afstemning i resultat-visning). */
.wp-polls a {
	color: var(--color-brand);
	font-weight: 700;
	text-decoration: none;
}
.wp-polls a:hover { text-decoration: underline; }

/* Ankerlinks skal ikke lande under den sticky header */
.single-article__content h2,
.single-article__content h3,
.elm-rangebox__title,
.elm-spec-group__title { scroll-margin-top: calc(var(--header-height) + 1rem); }

.single-article__content blockquote {
	border-left: 4px solid var(--color-brand);
	margin: 1.5rem 0;
	padding: 0.5rem 0 0.5rem 1.25rem;
	font-weight: 600;
}

/* Tekniske specifikationer-tabel (mockup: rød headerrække) */
.single-article__content table {
	width: 100%;
	border-collapse: collapse;
	margin: 1.5rem 0;
	font-size: 0.9375rem;
	border-radius: var(--radius-card);
	overflow: hidden;
	box-shadow: var(--shadow-card);
}

.single-article__content table th,
.single-article__content table thead td,
.single-article__content table > tbody:first-child > tr:first-child > td {
	background: var(--color-brand);
	color: var(--color-white);
	font-weight: 800;
	text-align: left;
	padding: 0.625rem 0.875rem;
	/* Løftet header m. skygge ned over første række (Trello #44). z-index løfter
	   header-cellerne op OVER de ugennemsigtige body-celler, ellers males skyggen
	   væk af rækken nedenunder. */
	position: relative;
	z-index: 3;
	box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.22);
}

.single-article__content table td {
	padding: 0.625rem 0.875rem;
	border-bottom: 1px solid var(--color-card-border);
}

.single-article__content table tbody tr:nth-child(even) td { background: #fbf7f6; }

/* Trello #44: brede tabeller scroller vandret (main.js pakker dem i .table-wrap >
   .table-scroll) med sticky 1. kolonne + scroll-skygge. Lodret centreret tekst. */
.single-article__content .table-wrap {
	position: relative;
	margin: 1.5rem 0;
	/* Rundede hjørner + kort-skygge flyttet hertil (fra .table-scroll), så
	   scroll-skyggerne (::before/::after) klippes til de rundede hjørner og ikke
	   giver en hård kant i hjørnerne (Trello #44). Et elements egen box-shadow
	   klippes ikke af dets overflow, så kort-skyggen vises stadig udenfor. */
	border-radius: var(--radius-card);
	overflow: hidden;
	box-shadow: var(--shadow-card);
}
.single-article__content .table-scroll {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}
.single-article__content .table-scroll table { margin: 0; border-radius: 0; box-shadow: none; overflow: visible; }

.single-article__content table td,
.single-article__content table th { vertical-align: middle; }

/* Sticky 1. kolonne - ugennemsigtig baggrund, så scrollet indhold ikke ses igennem,
   + højre-kant så der er en synlig grænse mod det scrollede indhold (Trello #44). */
.single-article__content .table-scroll table th:first-child,
.single-article__content .table-scroll table td:first-child { position: sticky; left: 0; }
.single-article__content .table-scroll table td:first-child {
	background: var(--color-white);
	z-index: 2;
	border-right: 1px solid var(--color-card-border);
}
/* Header-hjørnet (klæbende + header) skal ligge over header-cellerne (z:3) og de
   klæbende body-celler; lys kant på den røde baggrund. */
.single-article__content .table-scroll table th:first-child {
	z-index: 4;
	border-right: 1px solid rgba(255, 255, 255, 0.28);
}
.single-article__content .table-scroll table tbody tr:nth-child(even) td:first-child { background: #fbf7f6; }

/* Scroll-indikator (Trello #44): blød udtoning i HØJRE kant, der kun vises, når
   der faktisk er mere at scrolle til. Den tidligere venstre-skygge er fjernet -
   den lå hen over den klæbende 1. kolonne (som aldrig scroller) og læste som en
   tynd mørk streg i kanten (Lasse-feedback 2026-08-03). Blødere/bredere gradient,
   så det ligner en udtoning og ikke en streg. */
.single-article__content .table-wrap::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	right: 0;
	width: 48px;
	background: linear-gradient(to left, rgba(0, 0, 0, 0.10), rgba(0, 0, 0, 0));
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.2s;
	z-index: 2;
}
.single-article__content .table-wrap.has-scroll-right::after { opacity: 1; }

/* "Læs også"-kort for interne artikel-embeds (Trello #43). */
.read-also {
	display: flex;
	align-items: center;
	gap: 1.25rem;
	margin: 1.75rem 0;
	padding: 1rem;
	background: var(--color-hover-gray);
	border: 1px solid transparent;
	border-radius: var(--radius-card);
	text-decoration: none;
	transition: background 0.15s, box-shadow 0.15s, border-color 0.15s;
}
/* Trello #84: ingen rød underline ved klik/hover; i stedet rød tekst + rød kant
   på hele boksen. (Overstyrer den globale røde content-link-underline.) */
.read-also,
.read-also:hover,
.read-also:focus,
.read-also:focus-visible,
.read-also:active { text-decoration: none; }
.read-also:hover,
.read-also:focus-visible,
.read-also:active {
	background: var(--color-white);
	border-color: var(--color-brand);
	box-shadow: var(--shadow-card);
}
.read-also:hover .read-also__title,
.read-also:focus-visible .read-also__title,
.read-also:active .read-also__title { color: var(--color-brand); }
.read-also__media {
	flex: none;
	width: 128px;
	aspect-ratio: 16 / 10;
	border-radius: var(--radius-hover);
	overflow: hidden;
	background: #e5e7eb;
}
.read-also__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.read-also__body { display: flex; flex-direction: column; gap: 0.35rem; min-width: 0; }
.read-also__label {
	font-size: 0.75rem;
	font-weight: 900;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--color-brand);
}
.read-also__title {
	font-size: 1.25rem;
	font-weight: 800;
	line-height: 1.25;
	color: var(--color-ink);
}
@media (max-width: 480px) {
	.read-also { gap: 0.875rem; padding: 0.875rem; }
	.read-also__media { width: 96px; }
	.read-also__title { font-size: 1.0625rem; }
}

/* Tabeller bredere end skærmen skal scrolle, ikke sprænge layoutet */
.single-article__content {
	overflow-wrap: break-word;
}

/* "Læs også"-boks (shortcode [laes_ogsaa]) */
.read-also {
	margin: 1.5rem 0;
}

.read-also__link {
	display: flex;
	align-items: center;
	gap: 0.875rem;
	background: var(--color-white);
	border: 1px solid var(--color-rose-border);
	border-left: 4px solid var(--color-brand);
	border-radius: var(--radius-card);
	box-shadow: var(--shadow-card);
	padding: 0.875rem 1rem;
	text-decoration: none;
}

.read-also__icon,
.read-also__chevron {
	display: inline-flex;
	flex: none;
	color: var(--color-brand);
}

.read-also__body { flex: 1; min-width: 0; }

.read-also__label {
	display: block;
	font-size: 0.6875rem;
	font-weight: 800;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--color-brand);
}

.read-also__title {
	display: block;
	font-weight: 700;
	font-size: 0.9375rem;
	color: var(--color-ink);
}

.read-also__link:hover .read-also__title { color: var(--color-brand); }

/* Galleri: horisontal swipe m. scroll-snap i stedet for lightbox (kravspec).
   Endeligt galleridesign er ikke besluttet (evt. Modula) - dette er basis. */
.single-article__content .gallery {
	display: flex;
	gap: 0.75rem;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	margin: 1.5rem 0;
	padding-bottom: 0.5rem;
}

.single-article__content .gallery .gallery-item {
	flex: 0 0 85%;
	max-width: 85%;
	margin: 0;
	scroll-snap-align: center;
}

.single-article__content .gallery img {
	width: 100%;
	height: auto;
	border-radius: var(--radius-card);
	display: block;
}

.single-article__content .gallery .gallery-caption {
	font-size: 0.8125rem;
	color: var(--color-muted);
	padding-top: 0.375rem;
}

/* YouTube-facade (lazy embed) */
.yt-facade {
	position: relative;
	aspect-ratio: 16 / 9;
	background: #000;
	border-radius: var(--radius-card);
	overflow: hidden;
	cursor: pointer;
	margin: 1.5rem 0;
}

.yt-facade__thumb {
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0.85;
}

.yt-facade__play {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	background: none;
	border: 0;
	cursor: pointer;
	padding: 0;
}

.yt-facade:hover .yt-facade__play svg path:first-child { fill: var(--color-brand); }

.yt-facade__iframe {
	width: 100%;
	height: 100%;
	border: 0;
}

/* ---------- Arkiv/forfatter ---------- */

.archive-header__title {
	font-size: 1.625rem;
	font-weight: 900;
	/* Strammere luft ned til beskrivelsen (redaktionens feedback). */
	margin: 0 0 0.375rem;
}

/* Kategori-/arkiv-beskrivelsen (brødtekst) arvede h1'ens store, fede stil, fordi
   .archive-header-containeren selv fik font-size/weight - den er nu fjernet fra
   den regel, og beskrivelsen sættes eksplicit som brødtekst. */
.archive-header__description {
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.6;
	color: var(--color-muted);
	margin: 0 0 1.5rem;
}
.archive-header__description p { margin: 0 0 1rem; }
.archive-header__description p:last-child { margin-bottom: 0; }

/* Resultattæller under søge-h1 + tom-tilstand (Trello: manglende tekst ved søgning) */
.archive-header__count {
	margin: 0.25rem 0 1.5rem;
	font-size: 0.9375rem;
	font-weight: 500;
	color: var(--color-muted);
}

.content-feed__empty {
	font-size: 1rem;
	color: var(--color-muted);
}

/* Forfatterside: hvidt profilkort (mockup: Desktop forfatterside.png) */
.breadcrumbs--author {
	max-width: var(--content-width);
	margin: 0.5rem auto 1rem;
}

.author-card {
	max-width: var(--content-width);
	margin: 0 auto 2.5rem;
	background: var(--color-white);
	border: 1px solid var(--color-card-border);
	border-radius: var(--radius-card);
	box-shadow: var(--shadow-card);
	padding: 1.5rem;
	/* Trello #64: header (avatar + navn) øverst, tekst i fuld bredde nedenunder. */
	text-align: center;
}

.author-card__header {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1rem;
}

.author-card__body { min-width: 0; margin-top: 1.25rem; }

@media (min-width: 700px) {
	.author-card { padding: 2rem; text-align: left; }
	.author-card__header { flex-direction: row; align-items: center; gap: 2rem; }
	.author-card__body { margin-top: 1.5rem; }
}

.author-card__avatar {
	border-radius: 50%;
	flex: none;
}

.author-card__intro { min-width: 0; }

.author-card__name {
	font-size: 1.625rem;
	font-weight: 900;
	margin: 0;
}

.author-card__role {
	margin: 0.25rem 0 0.75rem;
	font-size: 0.75rem;
	font-weight: 800;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--color-brand);
}

.author-card__bio {
	font-size: 1rem;
	line-height: 1.6;
	color: var(--color-ink-soft);
}

.author-card__bio img { border-radius: var(--radius-card); }

.author-card__contact {
	margin-top: 1.25rem;
	padding-top: 1.25rem;
	border-top: 1px solid var(--color-hover-gray);
}

.author-card__contact-title {
	font-size: 1rem;
	font-weight: 800;
	margin: 0 0 0.375rem;
}

.author-card__contact p {
	margin: 0 0 0.75rem;
	font-size: 0.9375rem;
	color: var(--color-ink-soft);
}

.author-card__links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.5rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

@media (min-width: 700px) {
	.author-card__links { justify-content: flex-start; }
}

.author-card__links a {
	display: inline-block;
	padding: 0.375rem 0.875rem;
	border: 1px solid var(--color-card-border);
	border-radius: 999px;
	font-size: 0.8125rem;
	font-weight: 700;
	color: var(--color-ink);
	text-decoration: none;
}

.author-card__links a:hover {
	border-color: var(--color-brand);
	color: var(--color-brand);
}

/* Brandfarvede SoMe-knapper (Trello: farver og ikoner i SoMe-knapper).
   Hvid skrift, farvet fyld, kant kun ved hover. Ikoner tilføjes, når de
   transparente ikonfiler er lagt ind i temaet. Telefon = "som nu". */
.author-card__links .author-card__link--linkedin,
.author-card__links .author-card__link--facebook,
.author-card__links .author-card__link--mail,
.author-card__links .author-card__link--threads {
	border-color: transparent;
	color: var(--color-white);
}

.author-card__links .author-card__link--linkedin { background: #3070AC; }
.author-card__links .author-card__link--facebook { background: #2962D8; }
.author-card__links .author-card__link--mail     { background: #CD3322; }
.author-card__links .author-card__link--threads  { background: #000000; }

/* Hvide ikoner (transparente PNG'er) foran teksten. */
.author-card__links .author-card__link--linkedin::before,
.author-card__links .author-card__link--facebook::before,
.author-card__links .author-card__link--threads::before,
.author-card__links .author-card__link--mail::before {
	content: "";
	display: inline-block;
	width: 1.25em;
	height: 1em;
	margin-right: 0.4em;
	vertical-align: -0.14em;
	background: center / contain no-repeat;
}

/* Google-CTA'er mellem byline og hero: Følg + Foretrukken kilde (Trello #14).
   Lyse standardpiller (ikke sort badge) med Googles 4-farvede G-logo. */
.ms-google-cta {
	display: flex;
	flex-wrap: wrap;
	/* Trello #14: midterjusteret under artikelbilledet. */
	justify-content: center;
	gap: 0.625rem;
	margin: 1.25rem 0;
}

.ms-google-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 16px;
	font-family: Roboto, "Segoe UI", Arial, sans-serif;
	font-size: 0.875rem;
	font-weight: 500;
	line-height: 1;
	color: #3c4043;
	background: #fff;
	border: 1px solid #dadce0;
	border-radius: 999px;
	text-decoration: none;
	transition: background-color .15s, box-shadow .15s, border-color .15s;
}

.ms-google-btn:hover {
	background: #f7f8f8;
	border-color: #d2d3d6;
	box-shadow: 0 1px 2px rgba(60, 64, 67, .3), 0 1px 3px 1px rgba(60, 64, 67, .15);
}

.ms-google-btn:focus-visible { outline: 2px solid #4285f4; outline-offset: 2px; }

.ms-google-btn__g { display: inline-flex; width: 18px; height: 18px; flex: 0 0 18px; }

.author-card__links .author-card__link--linkedin::before { background-image: url(../img/social/linkedin.png); }
.author-card__links .author-card__link--facebook::before { background-image: url(../img/social/facebook.png); }
.author-card__links .author-card__link--threads::before  { background-image: url(../img/social/threads.png); }
.author-card__links .author-card__link--mail::before     { background-image: url(../img/social/mail.png); }

.author-card__links .author-card__link--linkedin:hover { color: var(--color-white); border-color: #3A6395; }
.author-card__links .author-card__link--facebook:hover { color: var(--color-white); border-color: #3256BA; }
.author-card__links .author-card__link--mail:hover     { color: var(--color-white); border-color: #A83A28; }
.author-card__links .author-card__link--threads:hover  { color: var(--color-white); border-color: #000000; }

.author-posts-title {
	text-transform: uppercase;
	font-weight: 900;
	font-size: 1.125rem;
	margin: 0 0 0.25rem;
}

.single-article__role { white-space: nowrap; }
/* Trello #79: navn + titel side om side på desktop; titlen UNDER navnet på mobil. */
.single-article__author { display: flex; align-items: center; gap: 0.625rem; }
@media (max-width: 640px) {
	.single-article__author { flex-direction: column; align-items: flex-start; gap: 0.15rem; }
}
.single-article__meta-sep { color: var(--color-rose-border); }

/* ---------- Paginering ---------- */

.pagination-nav .nav-links {
	display: flex;
	gap: 0.5rem;
	justify-content: center;
	align-items: center;
}

.pagination-nav .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.25rem;
	height: 2.25rem;
	padding: 0 0.5rem;
	border: 1px solid var(--color-card-border);
	border-radius: var(--radius-hover);
	text-decoration: none;
	font-weight: 700;
	font-size: 0.875rem;
	color: var(--color-ink);
	background: var(--color-white);
}

.pagination-nav .page-numbers.current {
	background: var(--color-brand);
	border-color: var(--color-brand);
	color: var(--color-white);
}

.pagination-nav .page-numbers.prev,
.pagination-nav .page-numbers.next { color: var(--color-brand); font-size: 1.125rem; }

/* ---------- Elbilmatch ---------- */

.elm-front {
	max-width: var(--wide-width);
	margin: 0 auto;
}

/* Taksonomi-arkiver (elbilmatch-arkiv.php): genbruger forsidens hero/toolbar/grid.
   Intro-teksten er brødtekst, ikke ét kort lead. */
.elm-arkiv .elm-hero__lead { max-width: 70ch; }

/* Undersider af /elbilmatch/ (elbilmatch-side.php): redaktionelt indhold m.
   Bootstrap-shortcodes - nyt chrome, artikel-typografi og fuld sidebredde
   til shortcode-griddet. */
.elm-side {
	max-width: var(--wide-width);
	margin: 0 auto;
}

.elm-side__content {
	font-size: 1.0625rem;
	line-height: 1.65;
	color: var(--color-ink-soft);
}

.elm-side__content > p,
.elm-side__content > h2,
.elm-side__content > h3,
.elm-side__content > ul,
.elm-side__content > ol {
	max-width: var(--content-width);
}

.elm-side__content h2,
.elm-side__content h3 { font-weight: 800; line-height: 1.25; }

.elm-side__content a { color: var(--color-brand); }

/* Shortcode-tabellerne ([kommende] m.fl.) i artikel-tabellernes stil */
.elm-side__content table {
	width: 100%;
	border-collapse: collapse;
	margin: 1.5rem 0;
	font-size: 0.9375rem;
	border-radius: var(--radius-card);
	overflow: hidden;
	box-shadow: var(--shadow-card);
	background: var(--color-white);
}

/* Header-række: th/thead - og første td-række KUN i tabeller uden thead
   (tbody:first-child er kun sand når ingen thead går forud) */
.elm-side__content table th,
.elm-side__content table thead td,
.elm-side__content table > tbody:first-child > tr:first-child > td {
	background: var(--color-brand);
	color: var(--color-white);
	font-weight: 800;
	text-align: left;
	padding: 0.625rem 0.875rem;
}

.elm-side__content table > tbody:first-child > tr:first-child > td a,
.elm-side__content table th a { color: var(--color-white); }

.elm-side__content table td {
	padding: 0.625rem 0.875rem;
	border-bottom: 1px solid var(--color-card-border);
}

.elm-side__content table tbody tr:nth-child(even) td { background: #fbf7f6; }

/* Mockup: venstrestillet hero ("Find din næste elbil") - centreret på mobil */
.elm-hero { text-align: center; padding: 1rem 0 1.5rem; }
/* Trello #97: sammenlign-hero er venstrejusteret også på mobil (som på pc). */
.elm-hero--start { text-align: left; }
/* Trello #126: på Elbilmatch-siderne (forside + sammenlign) fylder lead-teksten
   indholdsbredden - den generelle 52ch-læsebredde gjorde den smallere end resten
   af siden. */
.elm-hero--start .elm-hero__lead,
.elm-front .elm-hero__lead { max-width: none; }

.elm-hero__title {
	font-size: 2rem;
	font-weight: 900;
	margin: 0 0 0.375rem;
}

.elm-hero__lead {
	max-width: 52ch;
	margin: 0 auto 1.25rem;
	color: var(--color-muted);
}

.elm-hero__ctas {
	display: flex;
	flex-direction: column;
	gap: 0.625rem;
	max-width: 24rem;
	margin: 0 auto;
}

@media (min-width: 800px) {
	.elm-hero { text-align: left; }
	.elm-hero__lead { margin: 0 0 1.25rem; }
	.elm-hero__ctas { flex-direction: row; justify-content: flex-start; max-width: none; margin: 0; }
}

.elm-cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding: 0.75rem 1.25rem;
	background: var(--color-brand);
	color: var(--color-white);
	border-radius: var(--radius-card);
	font-weight: 800;
	font-size: 0.875rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	text-decoration: none;
	box-shadow: var(--shadow-card);
}

.elm-cta--coming {
	background: var(--color-hover-gray);
	color: var(--color-muted);
	cursor: default;
}

.elm-cta--coming em {
	font-style: normal;
	font-size: 0.625rem;
	font-weight: 700;
	background: var(--color-white);
	border-radius: 999px;
	padding: 0.125rem 0.5rem;
}

.elm-divider {
	border: 0;
	border-top: 1px solid var(--color-rose-border);
	margin: 0 0 1rem;
}

.elm-toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem 1rem;
	margin-bottom: 1rem;
}

/* Sortér-knap + modal (mockup: "Desktop Elbilmatch forside + sortering") */
/* Trello #113: ens UI med filtre-knappen - samme pille-form, vægt og versaler,
   så de to knapper (Sortér / Filtre) ser ens ud. */
.elm-toolbar__sortbtn {
	margin-left: auto;
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	font: inherit;
	font-size: 0.8125rem;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	padding: 0.5rem 1rem;
	border: 1px solid var(--color-card-border);
	border-radius: 999px;
	background: var(--color-white);
	color: var(--color-ink);
	cursor: pointer;
}
.elm-toolbar__sortbtn[aria-expanded='true'] {
	border-color: var(--color-brand);
	color: var(--color-brand);
}

.elm-sort-modal {
	position: fixed;
	inset: 0;
	z-index: 300;
	background: rgb(0 0 0 / 0.35);
	backdrop-filter: blur(2px);
	display: grid;
	/* Trello #34: centreret både vandret og lodret (var "start center" = høj oppe). */
	place-items: center;
	overflow-y: auto;
	padding: 2rem 1rem;
}

/* display: grid ovenfor ville ellers overtrumfe hidden-attributten,
   så den skjulte modal lå usynligt HEN OVER siden og åd alle klik */
.elm-sort-modal[hidden] { display: none; }

body.modal-open { overflow: hidden; }

.elm-sort-modal__box {
	background: var(--color-white);
	border-radius: var(--radius-popup);
	box-shadow: var(--shadow-popup);
	max-width: 1080px;
	width: 100%;
	padding: 1.5rem;
}

.elm-sort-modal__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: 1rem;
}

.elm-sort-modal__title {
	font-size: 1.25rem;
	font-weight: 900;
	margin: 0;
}

.elm-sort-modal__close {
	border: 0;
	background: none;
	font-size: 1.5rem;
	line-height: 1;
	color: var(--color-brand);
	cursor: pointer;
}

.elm-sort-modal__groups {
	/* Trello #51: kolonne-layout balancerer grupperne (fylder kolonnerne jævnt)
	   i stedet for grid-celler med skæve rækkehøjder. */
	columns: 170px;
	column-gap: 2rem;
}
.elm-sort-modal__group { break-inside: avoid; margin: 0 0 1.5rem; }
/* Trello #51: på mobil er der plads til to kolonner (170px-auto-kolonnerne faldt
   til én under ~452px). Tving to kolonner for mindst mulig scroll; lange
   sorteringer må gerne fylde to linjer (ikon top-justeret ved ombrydning). */
@media (max-width: 560px) {
	.elm-sort-modal__groups { columns: 2; column-gap: 1.25rem; }
	.elm-sort-modal__opt { align-items: flex-start; }
}

.elm-sort-modal__group-title {
	font-size: 0.75rem;
	/* Trello #51: fed + sort (#000) i stedet for grå. */
	font-weight: 900;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #000000;
	margin: 0 0 0.5rem;
}

.elm-sort-modal__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.elm-sort-modal__opt {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	/* Trello #51: strammere linjeafstand. */
	padding: 0.2rem 0.5rem;
	margin-left: -0.5rem;
	border-radius: var(--radius-hover);
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--color-ink);
	text-decoration: none;
}
/* Trello #51: placeholder-/uploadet ikon til venstre for sorteringen. */
.elm-sort-modal__icon { flex: none; display: inline-flex; width: 18px; height: 18px; }
.elm-sort-modal__icon img { width: 100%; height: 100%; object-fit: contain; }
.elm-sort-modal__icon--placeholder { border-radius: 4px; background: var(--color-hover-gray); box-shadow: inset 0 0 0 1px var(--color-card-border); }

.elm-sort-modal__opt:hover { background: var(--color-hover-gray); }

.elm-sort-modal__opt.is-active {
	background: var(--color-rank);
	color: var(--color-brand);
	font-weight: 800;
}

.elm-toolbar__toggle {
	display: inline-flex;
	border: 1px solid var(--color-card-border);
	border-radius: 999px;
	overflow: hidden;
}

.elm-toggle__opt {
	padding: 0.5rem 1rem;
	font-size: 0.8125rem;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	text-decoration: none;
	color: var(--color-muted);
	background: var(--color-white);
}

.elm-toggle__opt.is-active {
	background: var(--color-brand);
	color: var(--color-white);
}

.elm-toolbar__filters {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	font: inherit;
	font-size: 0.8125rem;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	padding: 0.5rem 1rem;
	border: 1px solid var(--color-card-border);
	border-radius: 999px;
	background: var(--color-white);
	color: var(--color-ink);
	cursor: pointer;
}

.elm-toolbar__filters[aria-expanded='true'] {
	border-color: var(--color-brand);
	color: var(--color-brand);
}

.elm-filter-count {
	background: var(--color-brand);
	color: var(--color-white);
	border-radius: 999px;
	font-size: 0.6875rem;
	min-width: 1.125rem;
	height: 1.125rem;
	display: inline-grid;
	place-items: center;
	padding: 0 0.25rem;
}

.elm-toolbar__clear {
	font-size: 0.75rem;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-brand);
	text-decoration: none;
}

/* Filterpanel */
.elm-filter-panel[hidden] { display: none; }

.elm-filter-panel {
	background: var(--color-white);
	border: 1px solid var(--color-rose-border);
	border-radius: var(--radius-card);
	box-shadow: var(--shadow-popup);
	padding: 1.25rem;
	margin-bottom: 1.25rem;
	display: grid;
	gap: 1.5rem;
}

/* Trello #54: filter-panelet er nu selve modal-boksen (deler .elm-sort-modal-
   rammen med sorteringen). Fast header/handlinger, scrollende sektionsområde. */
.elm-filter-modal .elm-filter-panel {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
	max-height: calc(100vh - 4rem);
	margin-bottom: 0;
}
.elm-filter-modal__body {
	overflow-y: auto;
	display: grid;
	gap: 1.5rem;
}

/* Nummererede sektioner (mockup: "1. GENERELT" ...) */
.elm-filter-section__title {
	color: var(--color-brand);
	font-size: 0.9375rem;
	font-weight: 900;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	margin: 0 0 0.75rem;
	border-bottom: 1px solid var(--color-hover-gray);
	padding-bottom: 0.5rem;
}

.elm-filter-section__items {
	display: grid;
	gap: 1.25rem 2rem;
}

@media (min-width: 800px) {
	.elm-filter-section__items { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 1100px) {
	.elm-filter-section__items { grid-template-columns: repeat(4, 1fr); }
}

.elm-facet { border: 0; margin: 0; padding: 0; min-width: 0; }

.elm-facet__title {
	font-size: 0.75rem;
	font-weight: 900;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--color-brand);
	padding: 0;
	margin-bottom: 0.5rem;
}

.elm-facet__options {
	/* Trello #108: ingen intern scroll - mærke-facetten (der før havde 48
	   checkboxe) er nu fliser, så de resterende facetter (biltype m.fl.) er korte
	   og vises i fuld højde. */
	display: grid;
	gap: 0.125rem;
}

.elm-facet__option {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.25rem 0.375rem;
	border-radius: var(--radius-hover);
	font-size: 0.9375rem;
	cursor: pointer;
}

.elm-facet__option:hover { background: var(--color-hover-gray); }

.elm-facet__option input { accent-color: var(--color-brand); }

.elm-facet__count {
	margin-left: auto;
	font-size: 0.75rem;
	color: var(--color-crumb);
}

/* Trello #108: mærke-filter som logo-fliser (mockup). */
.elm-facet--brands {
	border: 0;
	margin: 0;
	padding: 0;
	/* Fyld hele sektionsbredden (ellers klemmes 48 fliser ind i én 1/4-kolonne
	   og bryder filter-gridet). Øvrige facetter flyder i rækken nedenunder. */
	grid-column: 1 / -1;
}
.elm-facet__title--brands { display: flex; align-items: center; gap: 0.6rem; width: 100%; }
.elm-facet__count-badge { font-weight: 600; color: var(--color-muted); }
.elm-facet__selectall {
	margin-left: auto;
	border: 0;
	background: none;
	padding: 0;
	color: var(--color-brand);
	font-weight: 800;
	font-size: 0.75rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	cursor: pointer;
}
.elm-facet__selectall:hover { text-decoration: underline; }
.elm-brand-grid {
	display: grid;
	/* Fyld bredden med så mange kolonner der er plads til (kompakt i stedet for
	   en høj smal kolonne); responsivt uden media queries. */
	grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
	gap: 0.6rem;
	margin-top: 0.75rem;
}
.elm-brand-tile {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.4rem;
	padding: 0.85rem 0.4rem;
	border: 1px solid var(--color-card-border);
	border-radius: var(--radius-card);
	background: var(--color-white);
	cursor: pointer;
	text-align: center;
	transition: border-color 0.12s, background 0.12s, box-shadow 0.12s;
}
.elm-brand-tile input { position: absolute; opacity: 0; pointer-events: none; }
.elm-brand-tile__logo { display: flex; align-items: center; justify-content: center; height: 30px; }
.elm-brand-tile__logo img { max-height: 30px; max-width: 56px; width: auto; height: auto; object-fit: contain; }
.elm-brand-tile__name { font-size: 0.8125rem; font-weight: 700; color: var(--color-ink); line-height: 1.15; }
.elm-brand-tile:hover { border-color: var(--color-muted); }
.elm-brand-tile:focus-within { box-shadow: 0 0 0 2px var(--color-brand); }
/* Valgt flise: rød baggrund, hvid tekst, sort SVG-logo vendt til hvidt.
   Klasse (JS-styret) frem for :has(:checked), som ikke re-maler pålideligt ved
   dynamisk checkbox-skift i alle browsere. */
.elm-brand-tile.is-selected { background: var(--color-brand); border-color: var(--color-brand); }
.elm-brand-tile.is-selected .elm-brand-tile__name { color: #fff; }
.elm-brand-tile.is-selected .elm-brand-tile__logo img { filter: brightness(0) invert(1); }

/* Range-filtre (pris, rækkevidde, hk ... fra wp_elbilmatch_index).
   Mockup-layout: talfelter m. enhed inde i feltet, slider nedenunder. */
.elm-range__slider {
	position: relative;
	height: 1.5rem;
	margin: 0.5rem 0.5rem 0;
}

.elm-range__track {
	position: absolute;
	inset: 0.625rem -0.5rem 0;
	height: 0.25rem;
	border-radius: 999px;
	background: var(--color-hover-gray);
}

.elm-range__fill {
	position: absolute;
	top: 0;
	bottom: 0;
	border-radius: 999px;
	background: var(--color-brand);
}

/* To overlejrede native sliders; kun håndtagene tager pointer-events */
.elm-range__slider input[type="range"] {
	position: absolute;
	inset: 0 -0.5rem;
	width: calc(100% + 1rem);
	margin: 0;
	appearance: none;
	-webkit-appearance: none;
	background: none;
	pointer-events: none;
}

.elm-range__slider input[type="range"]::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	pointer-events: auto;
	width: 1.25rem;
	height: 1.25rem;
	margin-top: 0.125rem;
	border-radius: 50%;
	background: var(--color-white);
	border: 2px solid var(--color-brand);
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
	cursor: grab;
}

.elm-range__slider input[type="range"]::-moz-range-thumb {
	pointer-events: auto;
	width: 1.25rem;
	height: 1.25rem;
	border-radius: 50%;
	background: var(--color-white);
	border: 2px solid var(--color-brand);
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
	cursor: grab;
}

.elm-range__values {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.elm-range__dash { color: var(--color-crumb); }

.elm-range__field {
	flex: 1;
	display: flex;
	align-items: center;
	min-width: 0;
	border: 1px solid #e5e7eb;
	border-radius: var(--radius-hover);
	background: var(--color-white);
	padding-right: 0.5rem;
}

.elm-range__field:focus-within {
	outline: 2px solid var(--color-brand);
	outline-offset: -1px;
}

.elm-range__field input {
	width: 100%;
	min-width: 0;
	padding: 0.5rem 0.25rem 0.5rem 0.5rem;
	border: 0;
	background: none;
	font: inherit;
	/* 7-cifrede priser (2.700.000) skal kunne stå i feltet uden at klippes */
	font-size: 0.8125rem;
	font-variant-numeric: tabular-nums;
}

.elm-range__field input:focus { outline: none; }

.elm-range__suffix {
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--color-crumb);
	white-space: nowrap;
}

/* Modelsøgning i toolbaren (mockup: "Søg efter bilmodel...") */
.elm-toolbar__search {
	flex-basis: 100%;
	display: flex;
	align-items: center;
	gap: 0.5rem;
	background: var(--color-white);
	border: 1px solid var(--color-rose-border);
	border-radius: 999px;
	padding: 0.375rem 1rem;
}

.elm-toolbar__search svg {
	width: 1.125rem;
	height: 1.125rem;
	color: var(--color-crumb);
	flex-shrink: 0;
}

.elm-toolbar__search input[type="search"] {
	flex: 1;
	min-width: 0;
	border: 0;
	background: none;
	font: inherit;
	font-size: 0.9375rem;
	padding: 0.25rem 0;
}

.elm-toolbar__search input[type="search"]:focus { outline: none; }

/* Søgefeltet ligger i heroens CTA-række (mockup): fuld bredde på mobil,
   fylder resten af rækken på desktop */
.elm-hero__search { flex-basis: auto; }

@media (min-width: 800px) {
	.elm-hero__search { flex: 1; min-width: 16rem; }
}

.elm-filter-panel__actions {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	border-top: 1px solid var(--color-hover-gray);
	padding-top: 1rem;
}

.elm-filter-panel__clear {
	font-size: 0.8125rem;
	font-weight: 800;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--color-brand);
	text-decoration: none;
}

.elm-filter-panel__apply {
	appearance: none;
	border: 0;
	cursor: pointer;
	background: var(--color-brand);
	color: var(--color-white);
	font-weight: 800;
	font-size: 0.875rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	padding: 0.75rem 1.5rem;
	border-radius: var(--radius-card);
}

/* Sammenligning */
/* ---------- Sammenlign elbiler (Trello #22) ---------- */
.elm-compare {
	--elm-cols: minmax(8rem, 1.3fr) minmax(0, 1fr) minmax(0, 1fr);
	background: var(--color-white);
	border: 1px solid var(--color-rose-border);
	border-radius: var(--radius-card);
	box-shadow: var(--shadow-card);
	padding: 1.25rem 1.5rem 0.5rem;
}

/* Trello #97: fjern den hvide boks på mobil, så der er mere plads til teksten. */
@media (max-width: 640px) {
	.elm-compare {
		background: none;
		border: 0;
		border-radius: 0;
		box-shadow: none;
		padding: 0;
	}
}

/* Bil-pladser: tom venstrekolonne + to slots over værdikolonnerne. */
.elm-compare__slots {
	display: grid;
	grid-template-columns: var(--elm-cols);
	gap: 0 1rem;
	/* Trello #100: top-justeret, så billede + søgefelt står i samme højde i begge
	   kolonner - også når det ene bilnavn fylder to linjer. */
	align-items: start;
	padding: 0.5rem 0 1.25rem;
}

.elm-compare__slot { text-align: center; min-width: 0; }

.elm-compare__slot-media {
	position: relative;
	height: 8.5rem;
	background: var(--color-image-bg);
	border-radius: var(--radius-hover);
	padding: 0.75rem 1rem;
	box-sizing: border-box;
	margin-bottom: 0.75rem;
}
.elm-compare__slot-media img { width: 100%; height: 100%; object-fit: contain; display: block; mix-blend-mode: multiply; }
.elm-compare__slot-placeholder { opacity: 0.6; }
/* Trello #100: mindre polstring på mobil, så bilbilledet fylder mere af boksen. */
@media (max-width: 640px) {
	.elm-compare__slot-media { height: 7rem; padding: 0.25rem 0.4rem; }
}

/* Søge-/mærkevælger. */
.elm-compare__picker { position: relative; }

.elm-compare__picker .elm-compare__search-input {
	width: 100%;
	font: inherit;
	font-size: 0.875rem;
	padding: 0.5rem 2.25rem 0.5rem 2.25rem;
	border: 1px solid var(--color-card-border);
	border-radius: 999px;
	background: var(--color-white);
	color: var(--color-ink);
	box-sizing: border-box;
}
.elm-compare__search-input:focus { outline: 2px solid var(--color-brand); outline-offset: 1px; }

.elm-compare__search-icon {
	position: absolute;
	left: 0.75rem;
	top: 50%;
	transform: translateY(-50%);
	color: var(--color-crumb);
	pointer-events: none;
	display: inline-flex;
}
.elm-compare__search-icon .icon { width: 16px; height: 16px; }

.elm-compare__search-list {
	position: absolute;
	right: 0.4rem;
	top: 50%;
	transform: translateY(-50%);
	display: inline-flex;
	padding: 0.25rem;
	border: 0;
	background: none;
	color: var(--color-brand);
	cursor: pointer;
}
.elm-compare__search-list .icon { width: 18px; height: 18px; }

.elm-compare__slot-label {
	display: block;
	margin-top: 0.5rem;
	/* Reserver plads til to linjer, så begge slots er lige høje (Trello #100). */
	min-height: 2.35rem;
	font-weight: 800;
	font-size: 0.9375rem;
	color: inherit;
	text-decoration: none;
}
a.elm-compare__slot-label:hover,
a.elm-compare__slot-media:hover { text-decoration: none; }
a.elm-compare__slot-label:hover { color: var(--color-brand); }
a.elm-compare__slot-media { display: block; text-decoration: none; }

/* Vælger-dropdown. */
.elm-compare__dropdown {
	position: absolute;
	z-index: 20;
	top: calc(100% + 0.375rem);
	left: 0;
	/* Bredt popover (spænder over begge bil-kolonner, som i mockup). */
	width: calc(200% + 1rem);
	max-width: calc(100vw - 2rem);
	max-height: 24rem;
	overflow-y: auto;
	background: var(--color-white);
	border: 1px solid var(--color-card-border);
	border-radius: var(--radius-hover);
	box-shadow: 0 0.75rem 2rem rgba(0, 0, 0, 0.18);
	padding: 1rem 1.25rem;
	text-align: left;
}
/* Højre plads: popover'et forankres til højre, så det ikke løber ud. */
.elm-compare__picker[data-slot="bil2"] .elm-compare__dropdown { left: auto; right: 0; }

/* Trello #22: på mobil var popover'et for kompakt. Gør det til et bundark, der
   fylder fuld skærmbredde og det meste af højden (mere bredde + mere højde). */
@media (max-width: 640px) {
	.elm-compare__dropdown,
	.elm-compare__picker[data-slot="bil2"] .elm-compare__dropdown {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		top: auto;
		width: auto;
		max-width: none;
		/* Trello #100: fylder ca. 2/3, ikke hele skærmen, så der er et mørkt område
		   i toppen at klikke på for at lukke; ekstra bundpolstring, så webpushr-
		   knappen ikke dækker for det nederste indhold. */
		max-height: 65vh;
		border-radius: var(--radius-card) var(--radius-card) 0 0;
		box-shadow: 0 -0.5rem 2rem rgba(0, 0, 0, 0.28);
		padding: 1.25rem 1.25rem calc(3.5rem + env(safe-area-inset-bottom));
	}
}
.elm-compare__dd-hint { margin: 0 0 0.5rem; font-size: 0.75rem; color: var(--color-muted); }
.elm-compare__dd-title { margin: 0.25rem 0 0.5rem; font-size: 0.6875rem; font-weight: 900; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-brand); }
.elm-compare__dd-empty { margin: 0.5rem 0; color: var(--color-muted); font-size: 0.875rem; }

.elm-compare__brands { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0.5rem; }
@media (max-width: 640px) { .elm-compare__brands { grid-template-columns: repeat(3, 1fr); } }
.elm-compare__brand {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.25rem;
	padding: 0.5rem 0.25rem;
	border: 1px solid var(--color-hover-gray);
	border-radius: var(--radius-hover);
	background: var(--color-white);
	cursor: pointer;
	font: inherit;
	font-size: 0.6875rem;
	color: var(--color-ink);
	text-align: center;
}
.elm-compare__brand:hover { border-color: var(--color-brand); }
.elm-compare__brand-logo { height: 22px; display: inline-flex; align-items: center; }
.elm-compare__brand-logo img { max-height: 22px; max-width: 40px; width: auto; height: auto; }
.elm-compare__brand-initial {
	width: 24px; height: 24px; border-radius: 999px;
	display: inline-flex; align-items: center; justify-content: center;
	background: var(--color-image-bg); font-weight: 900; color: var(--color-ink);
}
.elm-compare__brand-name { line-height: 1.2; }

.elm-compare__dd-back {
	border: 0; background: none; cursor: pointer; font: inherit; font-size: 0.8125rem;
	font-weight: 700; color: var(--color-brand); padding: 0 0 0.5rem;
}
.elm-compare__results { list-style: none; margin: 0; padding: 0; }
.elm-compare__result {
	display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
	width: 100%; text-align: left; border: 0; background: none;
	padding: 0.625rem 0.5rem; border-radius: var(--radius-hover); cursor: pointer;
	font: inherit; font-size: 0.9375rem; color: var(--color-ink);
	border-bottom: 1px solid var(--color-hover-gray);
}
.elm-compare__results li:last-child .elm-compare__result { border-bottom: 0; }
.elm-compare__result:hover { background: var(--color-hover-gray); }
.elm-compare__result-name { font-weight: 700; }
.elm-compare__result:hover .elm-compare__result-name { color: var(--color-brand); }
.elm-compare__hl { color: var(--color-brand); }
.elm-compare__result-meta {
	flex: none; text-align: right; display: flex; flex-direction: column;
	font-size: 0.75rem; line-height: 1.35; color: var(--color-muted);
}
.elm-compare__result--variant { font-weight: 700; }

/* Sammenfoldelige spec-grupper. Trello #22: ingen grå linje over grupperne;
   rækkerne indrammes i stedet af en rød (rose) kant som på produktsiderne. */
.elm-compare__group { margin-bottom: 1rem; }

.elm-compare__group-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	padding: 0.875rem 0;
	border: 0;
	background: none;
	cursor: pointer;
	font: inherit;
}
.elm-compare__group-title {
	font-size: 0.8125rem;
	font-weight: 900;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--color-brand);
}
.elm-compare__group-head .icon { width: 18px; height: 18px; color: var(--color-brand); transition: transform 0.15s; }
.elm-compare__group.is-collapsed .elm-compare__group-head .icon { transform: rotate(-90deg); }
.elm-compare__group.is-collapsed .elm-compare__group-body { display: none; }

.elm-compare__group-body {
	border: 1px solid var(--color-rose-border);
	border-radius: var(--radius-card);
	overflow: hidden;
}

.elm-compare__row {
	display: grid;
	grid-template-columns: var(--elm-cols);
	gap: 0 1rem;
	padding: 0.5rem 0.625rem;
	border-radius: var(--radius-hover);
	font-size: 0.875rem;
	/* Trello #107: midterjustér, så label + korte værdier centreres når en anden
	   celle i rækken (fx "AC opladning"-værdien) ombrydes til to linjer. */
	align-items: center;
}
.elm-compare__row:nth-child(odd) { background: #F8F9FA; }
.elm-compare__row-label { font-weight: 700; color: var(--color-ink); min-width: 0; }
.elm-compare__row-val { color: var(--color-ink-soft); min-width: 0; overflow-wrap: anywhere; }

.elm-compare__hint {
	text-align: center;
	color: var(--color-muted);
	padding: 1.5rem 0 2.5rem;
}

/* Fremhævet sorteringsværdi på kortet (kravspec: rød tonet boks) */
.car-card__highlight {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0 0 0.875rem;
	padding: 0.375rem 0.625rem;
	background: #df170c0d;
	border: 1px solid #df170c1a;
	border-radius: 10px;
	color: var(--color-ink);
	font-size: 0.875rem;
	line-height: 1.25rem;
}

.car-card__highlight .icon { color: var(--color-brand); flex: none; }

.car-card__highlight strong { font-weight: 700; }

.elm-toolbar__count {
	margin: 0;
	font-size: 0.75rem;
	font-weight: 800;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--color-ink);
}

.elm-grid {
	display: grid;
	gap: 1.25rem;
	grid-template-columns: 1fr;
}

@media (min-width: 640px) { .elm-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .elm-grid { grid-template-columns: repeat(3, 1fr); } }

/* Bilkort */
.car-card {
	background: var(--color-white);
	border: 1px solid var(--color-card-border);
	border-radius: var(--radius-card);
	box-shadow: var(--shadow-card);
	overflow: hidden;
}

.car-card__link { display: block; text-decoration: none; color: var(--color-ink-soft); }

.car-card__media {
	position: relative;
	background: var(--color-image-bg);
	padding: 1.25rem 1.5rem;
	/* Ens højde på alle bilkort (Trello): fast højde + billedet centreres. */
	height: 9.5rem;
	box-sizing: border-box;
}

.car-card__media img { width: 100%; height: 100%; object-fit: contain; display: block; mix-blend-mode: multiply; }

.car-card__rating {
	position: absolute;
	top: 0.75rem;
	left: 0.75rem;
	background: var(--color-brand);
	color: var(--color-white);
	font-weight: 800;
	font-size: 0.8125rem;
	padding: 0.25rem 0.625rem;
	border-radius: 999px;
	z-index: 1;
}

.car-card__body { padding: 1rem 1.25rem 1.25rem; }

.car-card__title { margin: 0; font-size: 1.25rem; font-weight: 800; color: var(--color-ink); }

.car-card__subtitle {
	margin: 0.125rem 0 0.875rem;
	font-size: 0.875rem;
	color: var(--color-muted);
}

.car-card__specs {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.75rem;
	margin: 0 0 0.875rem;
}

.car-card__spec dt {
	font-size: 0.6875rem;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-crumb);
}

.car-card__spec dd { margin: 0.125rem 0 0; font-weight: 700; font-size: 0.9375rem; }

.car-card__pricing {
	border-top: 1px solid var(--color-card-border);
	padding-top: 0.75rem;
}

.car-card__price-label {
	display: block;
	font-size: 0.6875rem;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-crumb);
}

.car-card__price {
	font-size: 1.25rem;
	font-weight: 900;
	color: var(--color-brand);
}

/* ---------- Footer ---------- */

.site-footer {
	margin-top: 3rem;
	background: var(--color-hover-gray);
	padding: 2.5rem 1rem 1.5rem;
}

.site-footer__inner {
	display: grid;
	gap: 2rem 1.5rem;
	grid-template-columns: 1fr 1fr;
	max-width: var(--wide-width);
	margin: 0 auto;
}

@media (min-width: 700px) {
	.site-footer__inner { grid-template-columns: repeat(4, 1fr); }
}

.site-footer__brand { text-align: center; grid-column: 1 / -1; }

@media (min-width: 700px) {
	.site-footer__brand { grid-column: auto; }
}

.site-footer__logo {
	font-weight: 900;
	/* Trello #39: større footer-logo. Mobil ~1,5x det tidligere 1,25rem. */
	font-size: 1.875rem;
	letter-spacing: -1px;
	color: var(--color-brand);
	text-decoration: none;
}
@media (min-width: 700px) {
	/* Desktop: ~40px højt logo. */
	.site-footer__logo { font-size: 2.25rem; }
}

.site-footer__tagline {
	font-size: 0.875rem;
	color: var(--color-muted);
}

.site-footer__heading {
	color: var(--color-ink);
	text-transform: uppercase;
	letter-spacing: 0.1em;
	font-weight: 900;
	font-size: 14px;
	margin: 0 0 0.625rem;
}

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

.site-footer__menu a {
	display: block;
	padding: 0.25rem 0;
	color: var(--color-footer-link);
	font-size: 15px;
	text-decoration: none;
}

.site-footer__menu a:hover { color: var(--color-brand); }

.site-footer__copyright {
	text-align: center;
	font-size: 0.75rem;
	color: var(--color-muted);
	margin: 2rem 0 0;
}

/* ---------- 404 ---------- */

.error-404 {
	max-width: var(--content-width);
	margin: 2rem auto;
	text-align: center;
}

/* Tip om fejl i data */
.elm-tip {
	text-align: center;
	margin: 2rem 0 1rem;
}

.elm-tip a {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.875rem;
	font-weight: 700;
	color: var(--color-muted);
	text-decoration: none;
}

.elm-tip a:hover { color: var(--color-brand); }
.elm-tip .icon { color: var(--color-brand); }

/* SEO/intro-tekst under bilkortene på elbilmatch-forsiden (Trello #78). */
.elm-front__text {
	max-width: 48rem;
	margin: 2.5rem auto 0;
	padding: 0 1rem;
	color: var(--color-ink);
	line-height: 1.7;
}
.elm-front__text h2 {
	font-size: 1.375rem;
	font-weight: 900;
	margin: 1.75rem 0 0.5rem;
}
.elm-front__text h3 { font-size: 1.125rem; font-weight: 800; margin: 1.5rem 0 0.4rem; }
.elm-front__text p { margin: 0 0 1rem; }
.elm-front__text a { color: var(--color-brand); }
.elm-front__text ul,
.elm-front__text ol { margin: 0 0 1rem 1.25rem; }
.elm-front__text li { margin: 0 0 0.35rem; }

/* ---------- Elbilmatch-quiz ---------- */

.elm-quiz { max-width: var(--wide-width); margin: 0 auto; }

/* Rød progress bar (kravspec) */
.elm-quiz__progress {
	height: 6px;
	background: var(--color-hover-gray);
	border-radius: 999px;
	overflow: hidden;
	margin-bottom: 1.5rem;
}

.elm-quiz__progress span {
	display: block;
	height: 100%;
	width: 0;
	background: var(--color-brand);
	transition: width 0.3s ease;
}

.elm-quiz__layout {
	display: grid;
	gap: 1.5rem;
	align-items: start;
}

@media (min-width: 900px) {
	.elm-quiz__layout { grid-template-columns: 2fr 1fr; }
}

.elm-quiz__q {
	border: 1px solid var(--color-rose-border);
	border-radius: var(--radius-card);
	box-shadow: var(--shadow-card);
	background: var(--color-white);
	padding: 1.5rem;
	margin: 0;
}

.elm-quiz__q legend {
	font-weight: 900;
	font-size: 1.125rem;
	padding: 0 0.25rem;
}

.elm-quiz__opts { display: grid; gap: 0.375rem; margin: 1rem 0; }

.elm-quiz__opt {
	display: flex;
	align-items: center;
	gap: 0.625rem;
	padding: 0.625rem 0.75rem;
	border: 1px solid var(--color-card-border);
	border-radius: var(--radius-hover);
	cursor: pointer;
	font-size: 0.9375rem;
}

.elm-quiz__opt:hover { background: var(--color-hover-gray); }

.elm-quiz__opt input,
.elm-quiz__weight input { accent-color: var(--color-brand); }

.elm-quiz__weights {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem;
	font-size: 0.8125rem;
	color: var(--color-muted);
	margin-bottom: 1.25rem;
}

.elm-quiz__weight { display: inline-flex; align-items: center; gap: 0.25rem; cursor: pointer; }

.elm-quiz__next {
	appearance: none;
	border: 0;
	cursor: pointer;
	background: var(--color-brand);
	color: var(--color-white);
	font-weight: 800;
	font-size: 0.875rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	padding: 0.75rem 1.5rem;
	border-radius: var(--radius-card);
}

.elm-quiz__nav { display: flex; justify-content: space-between; margin-top: 0.75rem; }

.elm-quiz__back,
.elm-quiz__skip {
	appearance: none;
	border: 0;
	background: none;
	cursor: pointer;
	font-size: 0.8125rem;
	font-weight: 700;
	color: var(--color-muted);
	text-decoration: underline;
}

/* Live top-3 med langsomt blinkende grøn prik (kravspec) */
.elm-quiz__live {
	background: var(--color-white);
	border: 1px solid var(--color-card-border);
	border-radius: var(--radius-card);
	box-shadow: var(--shadow-card);
	padding: 1rem 1.25rem;
}

.elm-quiz__live-title {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.8125rem;
	font-weight: 900;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	margin: 0 0 0.5rem;
}

.elm-quiz__live-dot {
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: #22c55e;
	animation: elm-pulse 2.4s ease-in-out infinite;
}

@keyframes elm-pulse {
	0%, 100% { opacity: 1; }
	50% { opacity: 0.25; }
}

.elm-quiz__live-list { list-style: none; margin: 0; padding: 0; counter-reset: quiztop; }

.elm-quiz__live-list li {
	counter-increment: quiztop;
	display: flex;
	align-items: baseline;
	gap: 0.625rem;
	padding: 0.5rem 0;
	border-top: 1px solid var(--color-hover-gray);
}

.elm-quiz__live-list li::before {
	content: counter(quiztop) '.';
	font-style: italic;
	font-weight: 900;
	color: var(--color-rank);
	font-size: 1.25rem;
}

.elm-quiz__live-list a {
	text-decoration: none;
	font-weight: 700;
	font-size: 0.9375rem;
	color: var(--color-ink);
}

.elm-quiz__live-pct { margin-left: auto; font-weight: 800; color: var(--color-brand); font-size: 0.875rem; }

/* Resultatboks på elbilmatch-forsiden (grå boks, kravspec) */
.elm-quiz-result {
	position: relative;
	background: var(--color-hover-gray);
	border: 1px solid var(--color-card-border);
	border-radius: var(--radius-card);
	padding: 1.25rem 2.5rem 1.25rem 1.25rem;
	margin-bottom: 1.25rem;
}

.elm-quiz-result__close {
	position: absolute;
	top: 0.5rem;
	right: 0.5rem;
	appearance: none;
	border: 0;
	background: none;
	cursor: pointer;
	font-size: 1.5rem;
	line-height: 1;
	color: var(--color-muted);
}

.elm-quiz-result__title {
	margin: 0 0 0.25rem;
	font-size: 1rem;
	font-weight: 900;
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

.elm-quiz-result__text { margin: 0 0 0.75rem; font-size: 0.9375rem; }

.elm-quiz-result__modes {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	font-size: 0.875rem;
	font-weight: 700;
	margin-bottom: 0.5rem;
}

.elm-quiz-result__modes input { accent-color: var(--color-brand); }

.elm-quiz-result__actions a {
	font-size: 0.8125rem;
	font-weight: 800;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--color-brand);
	text-decoration: none;
}

/* Grå match-etiket på bilkort efter quiz (kravspec) */
.car-card__match {
	position: absolute;
	top: 0.75rem;
	right: 0.75rem;
	background: var(--color-ink);
	color: var(--color-white);
	font-weight: 800;
	font-size: 0.75rem;
	padding: 0.25rem 0.625rem;
	border-radius: 999px;
	opacity: 0.85;
	z-index: 1;
}

/* "Omtalte elbiler" i artiklens sidebar */
.mentioned-cars {
	max-width: var(--content-width);
	margin: 1.5rem auto;
	background: var(--color-white);
	border: 1px solid var(--color-rose-border);
	border-radius: var(--radius-card);
	box-shadow: var(--shadow-card);
	padding: 1rem 1.25rem;
}

/* Hoved med "Se alle" som diskret rød tekst i højre hjørne (samme type som
   "Seneste nyt"-boksen). */
.mentioned-cars__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: 0.5rem;
}

.mentioned-cars__title {
	margin: 0;
	text-transform: uppercase;
	font-weight: 900;
	font-size: 1rem;
	letter-spacing: 0.06em;
}

.mentioned-cars__more {
	flex: none;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-brand);
	text-decoration: none;
	border-bottom: 2px solid var(--color-brand);
	padding-bottom: 0.125rem;
}

/* Zebra-striber i stedet for grå billedbaggrund (Trello: samme grå som
   Elbilmatch-tabellerne). */
.mentioned-cars__item {
	display: flex;
	align-items: center;
	gap: 0.875rem;
	padding: 0.5rem 0.625rem;
	border-radius: var(--radius-hover);
	text-decoration: none;
	color: var(--color-ink);
}

.mentioned-cars__item:nth-of-type(even) { background: #F8F9FA; }

.mentioned-cars__media {
	flex: none;
	width: 5.5rem;
	overflow: hidden;
}

.mentioned-cars__media img { display: block; width: 100%; height: auto; mix-blend-mode: multiply; }

.mentioned-cars__body { min-width: 0; }
.mentioned-cars__body strong { display: block; font-size: 0.9375rem; }

.mentioned-cars__sub { display: block; font-size: 0.75rem; color: var(--color-muted); }

/* Antal varianter på sin egen linje (Trello). */
.mentioned-cars__variants { display: block; font-size: 0.75rem; color: var(--color-muted); }

.mentioned-cars__rating {
	margin-left: auto;
	flex: none;
	background: var(--color-brand);
	color: var(--color-white);
	font-weight: 800;
	font-size: 0.75rem;
	padding: 0.25rem 0.5rem;
	border-radius: 999px;
}

/* Desktop: søgefelt direkte i headeren (mockup); mobil bruger overlay-ikonet */
.site-header__search-inline { display: none; }

@media (min-width: 1100px) {
	.site-header__search-inline { display: block; width: 240px; flex: none; }
	.site-header__search-toggle { display: none; }

	.site-header__search-inline .search-form {
		box-shadow: none;
		padding: 0.125rem 0.75rem;
	}

	.site-header__search-inline .search-form__input {
		padding: 0.375rem 0;
		font-size: 0.875rem;
	}

	.site-header__search-inline .search-form__close { display: none; }
}

/*--------------------------------------------------------------
Elbilmatch produktside
--------------------------------------------------------------*/
.elm-product {
	max-width: 42rem;
	margin: 0 auto;
	/* Trello #115: ingen vandret padding her - .site-main giver allerede 1rem
	   kant. Ekstra 1rem gav produktsiderne dobbelt så bred margin som forsiden
	   og resten af sitet. Kun bund-padding beholdes. */
	padding: 0 0 2rem;
}

/* Trello #110: produktside får samme højre sidebar som artikler (nederst på
   mobil). Indholdssøjlen beholder sin 42rem-bredde; sidebar 340px ved siden. */
.elm-product-layout {
	max-width: var(--content-width);
	margin: 0 auto;
}
.elm-product__sidebar {
	display: grid;
	gap: 1.5rem;
	align-content: start;
	margin-top: 2.5rem;
}
@media (min-width: 1000px) {
	.elm-product-layout {
		max-width: var(--wide-width);
		display: grid;
		grid-template-columns: minmax(0, 42rem) 340px;
		gap: 3rem;
		align-items: start;
		justify-content: center;
	}
	.elm-product { margin-left: 0; margin-right: 0; }
	.elm-product__sidebar { margin-top: 0; }
}

/* Trello #110: alternativ-kortene er smallere - mindre overskrifter, mindre
   luft og specs på én linje (label + værdi), så "Rækkevidde 220-322 km" ikke
   ombrydes til to linjer. */
.elm-product__alternatives .car-card__title { font-size: 1.0625rem; }
.elm-product__alternatives .car-card__body { padding: 0.875rem 1rem 1rem; }
.elm-product__alternatives .car-card__specs { grid-template-columns: 1fr; gap: 0.25rem; }
.elm-product__alternatives .car-card__spec {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 0.5rem;
}
.elm-product__alternatives .car-card__spec dd { margin: 0; white-space: nowrap; }

@media (min-width: 900px) {
	.elm-product { max-width: 46rem; }
}

.elm-product__gallery {
	display: flex;
	/* Trello #72: undgå at slides strækkes til det højeste (fx portræt-)billede,
	   hvilket gav enorm tom plads under de lave billeder. */
	align-items: flex-start;
	gap: 0.75rem;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	margin: 0 -1rem 1.25rem;
	padding: 0 1rem;
}

.elm-product__gallery .gallery-swipe__item {
	flex: 0 0 88%;
	/* Ensartet gallerihøjde uanset billedernes format (Trello #72). */
	aspect-ratio: 3 / 2;
	margin: 0;
	scroll-snap-align: center;
	border-radius: var(--radius-card);
	overflow: hidden;
	background: #f3f3f4;
}

.elm-product__gallery img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.elm-product__title {
	font-size: 2rem;
	font-weight: 900;
	letter-spacing: -0.02em;
	margin: 0 0 0.25rem;
}

.elm-product__subtitle {
	color: var(--color-crumb);
	margin: 0 0 0.75rem;
}

/* Trello #72: produktside-galleri (ét stort billede + 3 miniaturer -> lightbox). */
.elm-gallery { margin: 0.75rem 0 1.25rem; }
.elm-gallery__main {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 10;
	padding: 0;
	border: 0;
	background: var(--color-image-bg);
	border-radius: var(--radius-card);
	overflow: hidden;
	cursor: zoom-in;
	position: relative;
}
.elm-gallery__main img { width: 100%; height: 100%; object-fit: cover; display: block; }
.elm-gallery__main .car-card__rating { position: absolute; top: 0.75rem; left: 0.75rem; z-index: 1; }
.elm-gallery__thumbs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.625rem; margin-top: 0.625rem; }
.elm-gallery__thumb {
	position: relative;
	aspect-ratio: 3 / 2;
	padding: 0;
	border: 0;
	background: var(--color-image-bg);
	border-radius: var(--radius-hover);
	overflow: hidden;
	cursor: pointer;
}
.elm-gallery__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.elm-gallery__thumb.has-more img { filter: brightness(0.5); }
.elm-gallery__more { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font-weight: 800; font-size: 1.125rem; }

/* Fremhævede specs som ikon-firkanter (2x2 mobil / 1x4 desktop). */
.elm-product__specs-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.75rem; margin: 0 0 1.5rem; }
@media (min-width: 640px) { .elm-product__specs-grid { grid-template-columns: repeat(4, 1fr); } }
.elm-spec-box {
	display: flex;
	align-items: center;
	gap: 0.625rem;
	padding: 0.75rem 0.875rem;
	background: var(--color-white);
	border: 1px solid var(--color-card-border);
	border-radius: var(--radius-card);
}
.elm-spec-box__icon { flex: none; color: var(--color-brand); display: inline-flex; }
.elm-spec-box__icon svg { width: 22px; height: 22px; }
.elm-spec-box__body { display: flex; flex-direction: column; min-width: 0; }
.elm-spec-box__label { font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-muted); }
.elm-spec-box__value { font-weight: 800; color: var(--color-ink); }

/* Lightbox til produktside-galleriet. */
.elm-lightbox {
	position: fixed;
	inset: 0;
	/* Over den klæbende header (100) og læse-progress-baren (100000), så lightboxen
	   er fuldt modal (Trello #101). */
	z-index: 100001;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(0, 0, 0, 0.9);
	padding: 1rem;
}
.elm-lightbox[hidden] { display: none; }
.elm-lightbox__img { max-width: 92vw; max-height: 86vh; object-fit: contain; border-radius: var(--radius-hover); }
.elm-lightbox__close,
.elm-lightbox__nav {
	position: absolute;
	background: rgba(255, 255, 255, 0.14);
	color: #fff;
	border: 0;
	cursor: pointer;
	border-radius: 999px;
	display: grid;
	place-items: center;
	line-height: 1;
}
.elm-lightbox__close { top: 1rem; right: 1rem; width: 2.75rem; height: 2.75rem; font-size: 1.75rem; }
.elm-lightbox__nav { top: 50%; transform: translateY(-50%); width: 3rem; height: 3rem; font-size: 2rem; }
.elm-lightbox__prev { left: 1rem; }
.elm-lightbox__next { right: 1rem; }
/* Trello #101: enkeltstående billeder har kun ét billede - skjul pile + tæller.
   (display:grid ovenfor vinder ellers over hidden-attributten.) */
.elm-lightbox__nav[hidden] { display: none; }
.elm-lightbox__close:hover,
.elm-lightbox__nav:hover { background: rgba(255, 255, 255, 0.28); }
.elm-lightbox__count { position: absolute; bottom: 1.25rem; left: 50%; transform: translateX(-50%); color: #fff; font-size: 0.875rem; opacity: 0.85; }
@media (max-width: 640px) {
	.elm-lightbox__nav { width: 2.5rem; height: 2.5rem; font-size: 1.75rem; }
	.elm-lightbox__prev { left: 0.5rem; }
	.elm-lightbox__next { right: 0.5rem; }
}

.elm-product__flag {
	display: inline-block;
	background: var(--color-count-rose);
	color: var(--color-brand);
	font-weight: 800;
	font-size: 0.8125rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	padding: 0.25rem 0.75rem;
	border-radius: 999px;
}

.elm-product__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0.75rem 0 1.25rem;
}

.elm-chip {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	background: var(--color-white);
	border: 1px solid var(--color-rose-border);
	border-radius: 999px;
	padding: 0.375rem 0.875rem;
	font-size: 0.875rem;
	font-weight: 700;
}

.elm-chip svg { width: 1em; height: 1em; color: var(--color-brand); }

.elm-chip--score {
	background: var(--color-brand);
	border-color: var(--color-brand);
	color: var(--color-white);
}

.elm-chip--price { color: var(--color-brand); }

.elm-product__descr { margin-bottom: 1.5rem; }

/* Rækkevidde-boks */
.elm-rangebox {
	background: var(--color-white);
	border: 1px solid var(--color-rose-border);
	border-radius: var(--radius-card);
	padding: 1.25rem;
	margin-bottom: 2rem;
}

.elm-rangebox__title { margin: 0 0 0.375rem; font-size: 1.375rem; font-weight: 900; }

.elm-rangebox__lead { color: var(--color-crumb); font-size: 0.9375rem; margin: 0 0 1rem; }

.elm-rangebox__modes { display: flex; gap: 0.5rem; margin-bottom: 1.25rem; }

.elm-rangebox__mode {
	appearance: none;
	cursor: pointer;
	border: 1px solid var(--color-rose-border);
	background: var(--color-white);
	color: var(--color-text);
	font: inherit;
	font-size: 0.875rem;
	font-weight: 700;
	padding: 0.5rem 1rem;
	border-radius: 999px;
}

.elm-rangebox__mode.is-active {
	background: var(--color-brand);
	border-color: var(--color-brand);
	color: var(--color-white);
}

.elm-rangebox__row { margin-bottom: 1rem; }

.elm-rangebox__label { font-weight: 700; font-size: 0.9375rem; }

.elm-rangebox__km { float: right; color: var(--color-brand); }

.elm-rangebox__bar {
	display: block;
	clear: both;
	height: 0.625rem;
	border-radius: 999px;
	background: var(--color-hover-gray);
	margin-top: 0.375rem;
	overflow: hidden;
}

.elm-rangebox__bar span {
	display: block;
	height: 100%;
	border-radius: 999px;
	background: var(--color-brand);
}

/* Trello #29/#128: rød = Blandet kørsel, grå = Bykørsel. */
.elm-rangebox__row--blandet .elm-rangebox__bar span { background: var(--color-brand); }
.elm-rangebox__row--by .elm-rangebox__bar span { background: #6c6f73; }

.elm-rangebox[data-active-mode="sommer"] [data-range-row="vinter"],
.elm-rangebox[data-active-mode="vinter"] [data-range-row="sommer"] { display: none; }

.elm-rangebox__note {
	font-style: italic;
	color: var(--color-crumb);
	font-size: 0.8125rem;
	text-align: center;
	margin: 0.75rem 0 0;
}

/* Variant-pills */
.elm-variant-pills { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.75rem 0; }

.elm-pill {
	display: inline-block;
	border: 1px solid var(--color-rose-border);
	background: var(--color-white);
	color: var(--color-text);
	border-radius: 999px;
	padding: 0.5rem 1.125rem;
	font-size: 0.9375rem;
	font-weight: 700;
	text-decoration: none;
}

.elm-pill.is-active {
	background: var(--color-brand);
	border-color: var(--color-brand);
	color: var(--color-white);
}

.elm-pill--compare { display: inline-block; margin: 0.25rem 0 1rem; }

/* Spec-grupper m. gauges */
.elm-spec-group__title {
	color: var(--color-brand);
	font-size: 0.8125rem;
	font-weight: 900;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	margin: 1.5rem 0 0.5rem;
	/* Trello #106: plads til skjul/vis-knappen i højre side. */
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
}
/* Trello #106: rød skjul/vis-knap på spec-gruppe-overskrifter. */
.elm-spec-group__toggle {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.75rem;
	height: 1.75rem;
	padding: 0;
	border: 0;
	background: none;
	color: var(--color-brand);
	cursor: pointer;
}
.elm-spec-group__toggle .icon { width: 20px; height: 20px; transition: transform 0.15s; }
.elm-spec-group__title.is-collapsed .elm-spec-group__toggle .icon { transform: rotate(-90deg); }
.elm-spec-group__title.is-collapsed + .elm-spec-group { display: none; }

.elm-spec-group {
	background: var(--color-white);
	border: 1px solid var(--color-rose-border);
	border-radius: var(--radius-card);
	margin: 0;
	overflow: hidden;
}

.spec-row { padding: 0.875rem 1rem; }

/* Lysere zebra end hover-gray: rød værditekst på #F3F4F6 gav 4,47:1 (AA: 4,5) */
.spec-row:nth-child(even) { background: #f8f9fa; }

.spec-row__label { font-weight: 700; }

.spec-row__value { margin: 0; text-align: right; }

/* Trello #106: tekst-værdi-rækker på én linje - label venstre, værdi højre.
   Float-varianten droppede værdien ned på linje 2, så rækkerne blev ~70px høje
   med unødig spildplads. Gauge-rækker (label over akse) røres ikke. */
.spec-row:has(.spec-row__value) {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 1rem;
}

.spec-row__gauge {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: 0.75rem;
	/* Plads til værdien, der ligger under prikken (Trello #36). Strammet ind, så
	   der ikke er unødig luft ned til næste række (Trello #77). */
	margin: 0.5rem 0 0;
	padding-bottom: 1.4rem;
}

/* Gauge-rækker har værdien liggende under sig; trim rækkens bundpolstring, så
   afstanden ned til næste spec-række matcher mockup'en (Trello #77). */
.spec-row:has(.spec-row__gauge) { padding-bottom: 0.5rem; }

.spec-gauge__min,
.spec-gauge__max { font-size: 0.8125rem; color: var(--color-crumb); white-space: nowrap; }
.spec-gauge__unit { font-size: 0.9em; }
@media (max-width: 600px) {
	/* På mobil udelades enheder på min/max for at spare plads (Trello #36). */
	.spec-gauge__unit { display: none; }
}

.spec-gauge__track {
	position: relative;
	height: 0.375rem;
	border-radius: 999px;
	background: #e5e7eb;
	overflow: visible;
}

.spec-gauge__dot {
	position: absolute;
	top: 50%;
	width: 0.875rem;
	height: 0.875rem;
	border-radius: 50%;
	background: var(--color-brand);
	transform: translate(-50%, -50%);
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}

/* Værdien følger prikkens x-position (left sættes inline i % og finjusteres/
   klampes i px af main.js). En smule mindre tal + tættere på prikken (Trello #36). */
.spec-gauge__value {
	position: absolute;
	top: calc(100% + 0.4rem);
	left: 50%;
	transform: translateX(-50%);
	white-space: nowrap;
	font-size: 0.8125rem;
	font-weight: 800;
	color: var(--color-brand);
}

/* Nyheder + alternativer */
.elm-product__news h2,
.elm-product__alternatives h2 {
	font-size: 1.5rem;
	font-weight: 900;
	margin: 2rem 0 0.5rem;
}

.elm-product__news .numbered-widget__head { display: none; }

.elm-product__news-all { text-align: center; margin: 1.25rem 0 0; }

.elm-cta--solid {
	background: var(--color-brand);
	color: var(--color-white);
	border-radius: 999px;
	padding: 0.75rem 1.5rem;
	font-weight: 800;
	text-decoration: none;
	display: inline-block;
}

.elm-product__alternatives .elm-grid { margin-top: 1rem; }

/* ---------- Læse-progressbar (Trello #40) ---------- */
.reading-progress {
	position: fixed;
	top: 0;
	left: 0;
	height: 3px;
	width: 0;
	background: var(--color-brand);
	/* Skal ligge OVER alle fixed top-bjælker (WP-adminbjælke z 99999 + staging-
	   bjælken z 99998), så den altid ses – også for indloggede reviewere. En 3px
	   streg i toppen er fin oven på bjælkerne, og korrekt for udloggede (Trello #40). */
	z-index: 100000;
	pointer-events: none;
	will-change: width;
}

/* ---------- "Vil du skrive for Mobilsiden?"-boks (Trello #41) ---------- */
.write-cta {
	background: var(--color-white);
	border: 1px solid var(--color-rose-border);
	border-radius: var(--radius-card);
	box-shadow: var(--shadow-card);
	padding: 1.25rem 1.5rem;
	margin-top: 1.5rem;
	text-align: center;
}
.write-cta__title {
	margin: 0 0 0.5rem;
	font-size: 1.0625rem;
	font-weight: 900;
	color: var(--color-ink);
}
.write-cta__text {
	margin: 0 0 0.875rem;
	font-size: 0.9375rem;
	line-height: 1.45;
	color: var(--color-ink-soft);
}
.write-cta__link {
	display: inline-block;
	padding: 0.5rem 1.375rem;
	border-radius: 999px;
	background: var(--color-brand);
	color: var(--color-white);
	font-weight: 800;
	font-size: 0.875rem;
	text-decoration: none;
}
.write-cta__link:hover { background: #b3130a; }

/* --------------------------------------------------------------
Consent-popup (ConsentManager, Trello #137)
Bureauets CMP renderes i sidens DOM (#cmpbox m.fl.), så temaet kan style den.
Målet er Lasses mockup (Elgiganten-look med Mobilsiden-branding): rød
header-bjælke med MOBILSIDEN, hvidt afrundet kort, rød overskrift, pille-
knapper (grå afvis / grøn acceptér) og rødt "administrer"-link. Tekstfeltet
scroller i sig selv, så toggles + knapper altid er synlige uden at scrolle
hele boksen. Tekster/sprog (OFF/ON, Til/Fra) styres i CMP'ens dashboard og
kan ikke ændres herfra.
-------------------------------------------------------------- */
#cmpbox2.cmpboxBG {
	background: rgba(0, 0, 0, 0.45) !important;
	backdrop-filter: blur(2px);
}

#cmpbox.cmpbox {
	border-radius: 1rem !important;
	overflow: hidden !important;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3) !important;
	max-width: 560px !important;
	width: calc(100vw - 2rem) !important;
	max-height: calc(100vh - 2rem) !important;
	border: 0 !important;
	font-family: inherit;
}

/* Rød header-bjælke med wordmark (som mockup). CMP'ens eget logo skjules. */
#cmpbox .cmpboxinner::before {
	content: "MOBILSIDEN";
	display: block;
	background: var(--color-brand);
	color: var(--color-white);
	font-weight: 900;
	font-size: 1.375rem;
	letter-spacing: 0.03em;
	text-align: center;
	padding: 0.875rem 1rem;
}
#cmpbox .cmplogo { display: none !important; }

#cmpbox .cmpboxcontent { padding: 1.25rem 1.5rem 0.5rem !important; }

/* Rød, fed overskrift som mockup'ens "Vi bruger cookies". */
#cmpbox .cmpboxhl {
	color: var(--color-brand) !important;
	font-size: 1.25rem !important;
	font-weight: 800 !important;
	margin: 0 0 0.625rem !important;
	text-align: left !important;
}

/* Brødtekst: scroller selv, så toggles/knapper altid kan ses. */
#cmpbox .cmpboxtxt {
	font-size: 0.875rem !important;
	line-height: 1.55 !important;
	color: var(--color-muted) !important;
	max-height: 26vh;
	overflow-y: auto;
	text-align: left !important;
	padding-right: 0.5rem;
}
#cmpbox .cmpboxtxt a { color: var(--color-brand) !important; }

/* Formåls-toggles: luftig række med tynd skillelinje over. */
#cmpbox .cmpboxwelcomeprps {
	border-top: 1px solid var(--color-card-border);
	margin-top: 0.875rem !important;
	padding-top: 0.875rem !important;
}
#cmpbox .cmpwelcomeprpstxt {
	font-size: 0.8125rem !important;
	color: var(--color-ink) !important;
}
/* Toggle-rækkerne fyldte kun ~240px (CMP'ens faste tekstbredde) - stræk dem
   til kortets fulde bredde. Høj specificitet nødvendig for at slå CMP'ens CSS. */
#cmpbox.cmpstyleroot .cmpboxwelcomeprps .cmpwelcomeprps {
	width: 100% !important;
	max-width: none !important;
	align-items: center;
}
#cmpbox.cmpstyleroot .cmpboxwelcomeprps .cmpwelcomeprpstxt {
	width: auto !important;
	max-width: none !important;
	flex: 1 1 auto !important;
}

/* Knapper: piller som mockup - grå "afvis/gem" + grøn "acceptér alle". */
#cmpbox .cmpboxbtns {
	border-top: 1px solid var(--color-card-border);
	margin-top: 0.875rem !important;
	padding: 1rem 1.5rem 1.25rem !important;
	display: flex !important;
	flex-wrap: wrap;
	gap: 0.75rem;
	justify-content: center;
	align-items: center;
}
#cmpbox #cmpwelcomebtnsave,
#cmpbox #cmpwelcomebtnyes {
	flex: 1 1 40%;
	display: inline-flex !important;
	justify-content: center;
	align-items: center;
	border-radius: 999px !important;
	padding: 0.75rem 1.25rem !important;
	font-weight: 700 !important;
	font-size: 0.9375rem !important;
	cursor: pointer;
	border: 0 !important;
	text-align: center;
}
#cmpbox #cmpwelcomebtnsave { background: #c2c7cc !important; }
#cmpbox #cmpwelcomebtnsave:hover { background: #aeb4ba !important; }
#cmpbox #cmpwelcomebtnyes { background: #3d7d3f !important; }
#cmpbox #cmpwelcomebtnyes:hover { background: #356e37 !important; }
#cmpbox #cmpwelcomebtnsave,
#cmpbox #cmpwelcomebtnsave * ,
#cmpbox #cmpwelcomebtnyes,
#cmpbox #cmpwelcomebtnyes * { color: #fff !important; fill: #fff !important; }

/* CMP'ens indre <a>-knap har sin egen (blå) baggrund + ikon - neutraliseres,
   så pillen udenom er selve knappen (som i mockup'en, uden ikoner). */
#cmpbox #cmpwelcomebtnsave a.cmpboxbtn,
#cmpbox #cmpwelcomebtnyes a.cmpboxbtn {
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
	padding: 0 !important;
	margin: 0 !important;
	width: 100% !important;
	display: inline-flex !important;
	justify-content: center;
	align-items: center;
}
#cmpbox #cmpwelcomebtnsave svg,
#cmpbox #cmpwelcomebtnyes svg { display: none !important; }

/* "Administrer cookies"-linket: rødt og centreret under knapperne. */
#cmpbox .cmpmore {
	flex: 1 1 100%;
	text-align: center !important;
	font-size: 0.875rem !important;
}
#cmpbox .cmpmore,
#cmpbox .cmpmore a,
#cmpbox .cmpmore * { color: var(--color-brand) !important; font-weight: 700; }

/* "Customize your choice"-laget (cmpfullscreen): lå klistret i øverste venstre
   hjørne - centreres som kort ligesom welcome-laget, og footeren får samme
   stil (grøn pille-gem-knap + rødt tilbage-link). */
#cmpbox.cmpstyleroot.cmpbox.cmpfullscreen {
	left: 50% !important;
	top: 50% !important;
	right: auto !important;
	bottom: auto !important;
	transform: translate(-50%, -50%) !important;
	max-height: calc(100vh - 4rem) !important;
	border-radius: 1rem !important;
}
#cmpbox a.cmpboxbtnyescustomchoices {
	background: #3d7d3f !important;
	color: #fff !important;
	border-radius: 999px !important;
	padding: 0.75rem 1.5rem !important;
	font-weight: 700 !important;
	border: 0 !important;
	box-shadow: none !important;
}
#cmpbox a.cmpboxbtnyescustomchoices:hover { background: #356e37 !important; }
#cmpbox .cmpmorelink { color: var(--color-brand) !important; font-weight: 700 !important; }

/* Mobil: luft hele vejen rundt om boksen + knapper i fuld bredde (mockup).
   CMP'en centrerer selv med translate(-50%,-50%) og låser boksens højde på
   mobil (det gav den "for brede"/afklippede boks) - vi beholder centreringen,
   klemmer bredden og slår højdelåsen fra, så alt indhold kan ses. Kun
   welcome-laget (cmpboxWelcomeGDPR) får auto-højde; indstillingslaget beholder
   CMP'ens egen scroll. Ekstra bundluft så "powered by"-badgen ikke overlapper. */
@media (max-width: 640px) {
	#cmpbox.cmpstyleroot.cmpbox {
		left: 50% !important;
		right: auto !important;
		top: 50% !important;
		bottom: auto !important;
		transform: translate(-50%, -50%) !important;
		width: calc(100vw - 2rem) !important;
		max-width: calc(100vw - 2rem) !important;
		max-height: calc(100vh - 4rem) !important;
		overflow-y: auto !important;
	}
	#cmpbox.cmpstyleroot.cmpbox.cmpboxWelcomeGDPR { height: auto !important; }
	#cmpbox.cmpstyleroot.cmpbox.cmpboxWelcomeGDPR .cmpboxinner,
	#cmpbox.cmpstyleroot.cmpbox.cmpboxWelcomeGDPR #cmpboxcontent {
		height: auto !important;
		min-height: 0 !important;
		max-height: none !important;
	}
	#cmpbox #cmpwelcomebtnsave,
	#cmpbox #cmpwelcomebtnyes { flex: 1 1 100%; }
	#cmpbox .cmpboxbtns { padding-bottom: 2.25rem !important; }
}