/* Carfix forsideseksjoner. Farger fra Zephyr-temaet, med Carfix-verdier som reserve.
   Overskrifter bruker .cfx.cfx for å slå temaets fargeskjema-regler. */

/* Verdiene står på :root, ikke på .cfx. Toppfeltet er ikke en seksjon og har
   ikke den klassen; lå verdiene der, ville hver var(--cfx-…) i headeren vært
   tom, og alle calc()-er med dem falle bort uten et eneste varsel. */
:root {
	--cfx-skala: 0.85;
	--cfx-gronn: var(--color-content-primary, #2b452f);
	--cfx-gronn-lys: var(--color-content-link, #607f65);
	--cfx-gul: var(--color-content-secondary, #fff100);
	--cfx-gul-mork: var(--color-alt-content-secondary, #ede001);
	--cfx-knapp-tekst: #314431;
	--cfx-tekst: var(--color-content-text, #333);
	--cfx-tittel: var(--color-content-heading, #1a1a1a);
	--cfx-kant: var(--color-content-border, #ece9e1);
	/* Kortkanten måles mot seksjonsbunnen, ikke mot hvitt. Temaets kant gir
	   1,15:1 der, og kortet flyter sammen med bakgrunnen. Denne gir 1,78:1. */
	--cfx-kant-kort: #c4bdaa;
	/* De lyse seksjonene veksler mellom disse to. Temaets #f5f5f5 er kjølig grå
	   og lå 1,036:1 fra vår varme #faf9f6 — overgangen var ikke til å se. Denne
	   er varm som resten av paletten og gir 1,133:1, et bånd man ser. */
	--cfx-flate: #eeebe1;
	--cfx-flate-lys: #faf9f6;
	--cfx-morkt: #1f2a20;
	--cfx-radius: 14px;
	--cfx-bredde: 1440px;
	--cfx-dempet: #5c5c5c;
	--cfx-apen: #2e8b40;
	--cfx-stengt: #c0392b;
}

/* Temaet setter rotstørrelsen til 21 px over 750 px og 16 px under. Med samme
   skala ble brødteksten 13–14 px på telefon, og småteksten 10–11 px. Under
   temaets grense er skalaen 1, så telefonen får 16 px brødtekst. (28. oktober
   2026) */
@media (max-width: 750px) {
	:root { --cfx-skala: 1; }
	/* Toppfeltet har ikke plass til mer: med skala 1 ble menyknappen skjøvet
	   30 px utenfor skjermen. Det beholder den gamle størrelsen. */
	.cfx-topp { --cfx-skala: 0.85; }
	/* Menyen ligger inne i toppfeltet, men skal ha telefonens skala. */
	.cfx-topp .cfx-meny { --cfx-skala: 1; }
}

/* Temaet setter overflow-x: hidden på body, men ikke på html, så siden kunne
   rulles 30–40 px sidelengs på PC: en fullbredderad i temaet og en skjult
   tooltip stakk utenfor. clip, ikke hidden – hidden gjør html til en
   rullbeholder, og da slutter det klebrige toppfeltet å klebe. */
html {
	overflow-x: clip;
}
/* Samme på body: med temaets hidden ble body en rullbeholder som aldri
   ruller, og ingenting inni kunne klebe – sidespalten i artiklene sto stille
   (28. oktober 2026). */
html body {
	overflow-x: clip;
}

/* Temaet gir alle lister 2,5 rem innrykk – 40 px på telefon, mer enn
   avstanden til skjermkanten. «body ul» veier akkurat nok til å slå temaets
   «ul», men ikke lister med egen klasse. */
body ul {
	margin-inline-start: 0.5rem;
}

.cfx {
	scroll-margin-top: calc(var(--header-height, 80px) + calc(var(--cfx-skala) * 1rem));
	box-sizing: border-box;
	padding: clamp(calc(var(--cfx-skala) * 2rem), 3.6vw, calc(var(--cfx-skala) * 3.25rem)) clamp(calc(var(--cfx-skala) * 1rem), 3vw, calc(var(--cfx-skala) * 2.5rem));
	font-family: inherit;
	color: var(--cfx-tekst);
}

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

.cfx.cfx > * {
	max-width: var(--cfx-bredde);
	margin-inline: auto;
}

/* I seksjonene med to spalter er barna grid-celler. Auto-marginer der ville
   krympe cellene til innholdet, så de nullstilles. Selve rutenettet holdes
   innenfor innholdsbredden med sidepadding, slik at bakgrunnen går i full
   bredde mens innholdet ligger på linje med headeren. */
.cfx.cfx-hero > *,
.cfx.cfx-tillit > *,
.cfx.cfx-kampanje > *,
.cfx.cfx-nio > *,
.cfx.cfx-faq > *,
.cfx.cfx-verksted > *,
.cfx.cfx-tjenesteside > *,
.cfx.cfx-priser > *,
.cfx.cfx-verksted-kontakt > *,
.cfx.cfx-bedrift > * {
	max-width: none;
	margin-inline: 0;
}

.cfx-hero,
.cfx-tillit,
.cfx-kampanje,
.cfx-nio,
.cfx-faq {
	padding-inline: max(clamp(calc(var(--cfx-skala) * 1rem), 4vw, calc(var(--cfx-skala) * 3rem)), (100% - var(--cfx-bredde)) / 2);
}

/* Temaet setter marginer på lister; seksjonene styrer avstandene selv.
   Bare blokkmarginene nullstilles, så midtstillingen over består. */
.cfx :where(ul, ol, li) {
	margin-block: 0;
	list-style: none;
}

.cfx.cfx > ul,
.cfx.cfx > ol,
.cfx.cfx ul ul {
	padding: 0;
}

.cfx.cfx li { margin-inline: 0; }

.cfx.cfx li::before { content: none; }

.cfx :where(p) {
	margin: 0;
	padding: 0;
}

.cfx :where(ul, ol) {
	margin: 0;
	padding: 0;
	list-style: none;
}

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

.cfx-ikon {
	width: calc(var(--cfx-skala) * 1.5rem);
	height: calc(var(--cfx-skala) * 1.5rem);
}

.cfx-pil {
	width: 1.1em;
	height: 1.1em;
	flex: none;
}

/* Knapper og lenker */
.cfx .cfx-knapp:active { transform: translateY(1px); }

.cfx .cfx-knapp,
.cfx-topp .cfx-knapp,
.cfx-meny .cfx-knapp,
.cfx-bunn .cfx-knapp {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: calc(var(--cfx-skala) * 0.5rem);
	min-height: calc(var(--cfx-skala) * 2.75rem);
	padding: 0 calc(var(--cfx-skala) * 1.25rem);
	border: 1px solid transparent;
	border-radius: 8px;
	font-weight: 700;
	font-size: calc(var(--cfx-skala) * 1rem);
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.15s, color 0.15s, border-color 0.15s, box-shadow 0.15s, transform 0.1s;
}

/* Den gule knappen har en mørkegrønn kant. Uten den flyter gulflaten rett ut
   i bakgrunnen i kanten, og knappen har ingen form. */
.cfx .cfx-knapp--gul,
.cfx-topp .cfx-knapp--gul,
.cfx-meny .cfx-knapp--gul,
.cfx-bunn .cfx-knapp--gul {
	background: var(--cfx-gul);
	border-color: var(--cfx-gronn);
	color: var(--cfx-knapp-tekst);
}

.cfx .cfx-knapp--gul:hover,
.cfx-topp .cfx-knapp--gul:hover,
.cfx-meny .cfx-knapp--gul:hover,
.cfx-bunn .cfx-knapp--gul:hover {
	/* Temaets «mørke» gul er #ede001 mot #fff100 — ingen ser forskjellen, og
	   glansen var lys gul på lys bunn. Nå mørknes gulen for seg selv, uten
	   grønnstikk: fargen er hele effekten, ingen skygge og ingen løft. */
	background: color-mix(in srgb, var(--cfx-gul) 88%, #000);
	border-color: var(--cfx-gronn);
	color: var(--cfx-knapp-tekst);
}
.cfx .cfx-knapp--gronn { background: var(--cfx-gronn); color: #fff; }
.cfx .cfx-knapp--gronn:hover {
	background: var(--cfx-gronn-lys);
	color: #fff;
	box-shadow: 0 0 0 3px rgba(96, 127, 101, 0.3);
}
.cfx .cfx-knapp--hvit { background: #fff; border-color: var(--cfx-gronn); color: var(--cfx-gronn); }
/* #eef1ec lå 1,14:1 fra hvitt — ingen ser den endringen. */
.cfx .cfx-knapp--hvit:hover {
	background: #ccd6c9;
	border-color: var(--cfx-gronn);
	color: var(--cfx-gronn);
}
.cfx .cfx-knapp--ramme { background: transparent; border-color: currentColor; color: inherit; }
.cfx .cfx-knapp--ramme:hover { background: rgba(255, 255, 255, 0.12); color: inherit; }

/* Megamenyen ligger utenfor .cfx, så den trenger å nevnes her. Uten den
   manglet mellomrommet mellom teksten og pilen. */
.cfx .cfx-lenke,
.cfx-meny .cfx-lenke {
	display: inline-flex;
	align-items: center;
	gap: calc(var(--cfx-skala) * 0.4rem);
	color: var(--cfx-gronn);
	font-size: calc(var(--cfx-skala) * 1rem);
	font-weight: 600;
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: color 0.15s, border-color 0.15s;
}

.cfx .cfx-lenke:hover,
.cfx-meny .cfx-lenke:hover {
	color: var(--cfx-gronn-lys);
	border-bottom-color: currentColor;
}

/* Temaet understreker lenker i innholdet på enkelte sidetyper, og vant over
   text-decoration: none over. Da sto temaets strek og vår egen ramme under
   hverandre ved hover. Klassen gjentas for å få vekt nok. */
.cfx .cfx-lenke.cfx-lenke,
.cfx-meny .cfx-lenke.cfx-lenke { text-decoration: none; }

.cfx .cfx-lenke .cfx-pil,
.cfx-meny .cfx-lenke .cfx-pil { transition: transform 0.15s; }
.cfx .cfx-lenke:hover .cfx-pil,
.cfx-meny .cfx-lenke:hover .cfx-pil { transform: translateX(3px); }

/* Lenken til høyre i seksjonshodet vises som en rolig omrissknapp. */
.cfx-hode .cfx-lenke,
.cfx-snarveier__hode .cfx-lenke {
	flex: none;
	white-space: nowrap;
	padding: calc(var(--cfx-skala) * 0.5rem) calc(var(--cfx-skala) * 1rem);
	border: 1px solid var(--cfx-kant);
	border-radius: 999px;
	background: #fff;
}

.cfx-hode .cfx-lenke:hover,
.cfx-snarveier__hode .cfx-lenke:hover {
	border-color: var(--cfx-gronn);
	background: var(--cfx-gronn);
	color: #fff;
}

.cfx-snarveier__hode .cfx-lenke {
	background: transparent;
	border-color: rgba(255, 255, 255, 0.3);
}

.cfx-snarveier__hode .cfx-lenke:hover {
	background: var(--cfx-gul);
	border-color: var(--cfx-gul);
	color: var(--cfx-knapp-tekst);
}
.cfx .cfx-lenke--gul { color: var(--cfx-gul); }
.cfx .cfx-lenke--gul:hover { color: #fff; }

.cfx-kicker {
	font-size: calc(var(--cfx-skala) * 0.85rem);
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--cfx-gul);
}

.cfx-kicker--gronn { color: var(--cfx-gronn); }

.cfx-merke {
	display: inline-flex;
	align-items: center;
	padding: calc(var(--cfx-skala) * 0.2rem) calc(var(--cfx-skala) * 0.65rem);
	border: 1px solid currentColor;
	border-radius: 999px;
	font-size: calc(var(--cfx-skala) * 0.72rem);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--cfx-gul);
}

.cfx-merke--bilde {
	position: absolute;
	top: calc(var(--cfx-skala) * 0.75rem);
	left: calc(var(--cfx-skala) * 0.75rem);
	padding: calc(var(--cfx-skala) * 0.25rem) calc(var(--cfx-skala) * 0.7rem);
	border-color: transparent;
	background: rgba(20, 28, 21, 0.78);
	color: var(--cfx-gul);
	backdrop-filter: blur(4px);
}

.cfx-merke--lys {
	padding: calc(var(--cfx-skala) * 0.25rem) calc(var(--cfx-skala) * 0.7rem);
	border-color: rgba(43, 69, 47, 0.35);
	background: rgba(43, 69, 47, 0.06);
	color: var(--cfx-gronn);
}

/* Mobil: lenken står ved siden av tittelen, ikke under, og midt på
   tittellinjen. Ingressen går under begge (29. oktober 2026). */
@media (max-width: 600px) {
	.cfx .cfx-hode {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		column-gap: calc(var(--cfx-skala) * 1rem);
		align-items: center;
	}
	.cfx .cfx-hode > div { display: contents; }
	.cfx .cfx-hode__tittel { grid-column: 1; grid-row: 1; }
	.cfx .cfx-hode__ingress { grid-column: 1 / -1; grid-row: 2; }
	.cfx .cfx-hode .cfx-lenke {
		grid-column: 2;
		grid-row: 1;
		padding: calc(var(--cfx-skala) * 0.3rem) calc(var(--cfx-skala) * 0.75rem);
		font-size: calc(var(--cfx-skala) * 0.85rem);
	}
}

/* Seksjonshode */
.cfx-hode {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: calc(var(--cfx-skala) * 1rem) calc(var(--cfx-skala) * 2rem);
	flex-wrap: wrap;
	margin-bottom: calc(var(--cfx-skala) * 2rem);
}

.cfx.cfx .cfx-hode__tittel {
	margin: 0;
	padding: 0;
	font-size: clamp(calc(var(--cfx-skala) * 1.5rem), 2.4vw, calc(var(--cfx-skala) * 2rem));
	line-height: 1.15;
	color: var(--cfx-tittel);
}

.cfx .cfx-hode__ingress {
	margin-top: calc(var(--cfx-skala) * 0.6rem);
	max-width: 46ch;
	font-size: calc(var(--cfx-skala) * 1.05rem);
	line-height: 1.5;
	color: var(--cfx-tekst);
}

/* ---------------------------------------------------------------------------
 * Hero
 * ------------------------------------------------------------------------- */

.cfx-hero {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
	gap: clamp(calc(var(--cfx-skala) * 1.5rem), 4vw, calc(var(--cfx-skala) * 3.5rem));
	align-items: center;
	padding-block: clamp(calc(var(--cfx-skala) * 2.25rem), 3.6vw, calc(var(--cfx-skala) * 3.5rem));
	background: var(--cfx-gronn);
	color: #fff;
}

.cfx-hero > * { max-width: none; }

.cfx-hero__innhold {
	order: -1;
	width: 100%;
}

.cfx.cfx .cfx-hero__tittel {
	margin: calc(var(--cfx-skala) * 0.75rem) 0 0;
	padding: 0;
	font-size: clamp(calc(var(--cfx-skala) * 1.75rem), 3.1vw, calc(var(--cfx-skala) * 2.6rem));
	line-height: 1.08;
	color: #fff;
	text-wrap: balance;
}

.cfx .cfx-hero__ingress {
	margin-top: calc(var(--cfx-skala) * 1rem);
	max-width: 44ch;
	font-size: calc(var(--cfx-skala) * 1.3rem);
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.88);
}

.cfx-vurdering {
	display: flex;
	align-items: center;
	gap: calc(var(--cfx-skala) * 0.6rem);
	margin-top: calc(var(--cfx-skala) * 1.75rem);
	font-size: calc(var(--cfx-skala) * 1rem);
	line-height: 1.3;
	color: rgba(255, 255, 255, 0.9);
}

.cfx-stjerner {
	color: var(--cfx-gul);
	font-size: calc(var(--cfx-skala) * 1.05rem);
	line-height: 1;
	letter-spacing: 0.12em;
}

.cfx-stjerner__delvis { opacity: 0.45; }

/* Mobil: én knapp til /verksteder/ i stedet for velgeren (forside.php). */
.cfx .cfx-hero__mobilknapp { display: none; }
@media (max-width: 600px) {
	.cfx-hero .cfx-velger { display: none; }
	.cfx .cfx-hero__mobilknapp {
		display: block;
		margin-block: calc(var(--cfx-skala) * 1.5rem) 0;
	}
	.cfx .cfx-hero__mobilknapp .cfx-knapp { width: 100%; justify-content: center; }
}

.cfx-velger {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: calc(var(--cfx-skala) * 0.8rem);
	margin-top: calc(var(--cfx-skala) * 1.75rem);
	padding: calc(var(--cfx-skala) * 1.1rem);
	background: #fff;
	border-radius: var(--cfx-radius);
	box-shadow: 0 18px 40px -18px rgba(0, 0, 0, 0.5);
}

.cfx-velger__felt label {
	display: block;
	margin-bottom: calc(var(--cfx-skala) * 0.35rem);
	font-size: calc(var(--cfx-skala) * 0.9rem);
	font-weight: 700;
	color: var(--cfx-tittel);
}

.cfx .cfx-velger select {
	width: 100%;
	height: calc(var(--cfx-skala) * 2.8rem);
	padding: 0 calc(var(--cfx-skala) * 2.1rem) 0 calc(var(--cfx-skala) * 0.85rem);
	border: 1px solid var(--cfx-kant);
	border-radius: 8px;
	background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232b452f' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right calc(var(--cfx-skala) * 0.7rem) center / calc(var(--cfx-skala) * 1.1rem);
	color: var(--cfx-tittel);
	font-family: inherit;
	font-size: calc(var(--cfx-skala) * 1rem);
	appearance: none;
}

.cfx .cfx-velger select:focus-visible {
	outline: 3px solid var(--cfx-gronn);
	outline-offset: 2px;
}


.cfx-velger__status:empty { display: none; }

/* Formen på beskjeden står lenger nede, der den tas ut av boksen. */

.cfx-hero__media {
	position: relative;
	align-self: stretch;
	min-height: 320px;
	border-radius: var(--cfx-radius);
	overflow: hidden;
}

.cfx-hero__media img {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity 1.2s ease;
}

.cfx-hero__media img:first-child {
	position: relative;
	inset: auto;
}

/* Tynn linje nederst som viser når neste bilde kommer. */
.cfx-hero__fremdrift {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 4px;
	background: rgba(0, 0, 0, 0.3);
	overflow: hidden;
}

.cfx-hero__fremdrift-linje {
	display: block;
	height: 100%;
	background: var(--cfx-gul);
	transform-origin: left center;
	transform: scaleX(0);
}

.cfx-hero__fremdrift-linje.er-i-gang {
	animation: cfx-fremdrift var(--cfx-intervall, 6s) linear forwards;
}

@keyframes cfx-fremdrift {
	from { transform: scaleX(0); }
	to { transform: scaleX(1); }
}

@media (prefers-reduced-motion: reduce) {
	.cfx-hero__fremdrift { display: none; }
}

.cfx-hero__media img.er-synlig { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
	.cfx-hero__media img { transition: none; }
}

/* ---------------------------------------------------------------------------
 * Snarveier
 * ------------------------------------------------------------------------- */

.cfx-snarveier {
	background: var(--cfx-morkt);
	color: #fff;
	padding-block: clamp(calc(var(--cfx-skala) * 2rem), 3.4vw, calc(var(--cfx-skala) * 3rem));
}

.cfx-snarveier .cfx-kicker {
	color: rgba(255, 255, 255, 0.75);
}

.cfx-snarveier .cfx-lenke--gul {
	color: rgba(255, 255, 255, 0.85);
}

/* Hover fyller knappen gul, så teksten må være mørk. Den gamle regelen her
   satte den gul, og da forsvant den i fyllet. */
.cfx-snarveier .cfx-lenke--gul:hover,
.cfx-snarveier .cfx-lenke--gul:focus-visible {
	background: var(--cfx-gul);
	border-color: var(--cfx-gul);
	color: var(--cfx-knapp-tekst);
}

.cfx-snarveier__hode {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: calc(var(--cfx-skala) * 0.75rem) calc(var(--cfx-skala) * 1.5rem);
	flex-wrap: wrap;
	margin-bottom: calc(var(--cfx-skala) * 1.5rem);
	padding-bottom: calc(var(--cfx-skala) * 1rem);
	border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}

/* Pris og tid i stedet for ingress: kortere kort, og det er disse to tallene
   folk leter etter. */
/* ---------------------------------------------------------------------------
 * Verksteder
 * ------------------------------------------------------------------------- */

.cfx-verksteder { background: var(--cfx-flate); }

.cfx-verksteder__verktoy {
	display: flex;
	align-items: center;
	gap: calc(var(--cfx-skala) * 0.75rem) calc(var(--cfx-skala) * 1.25rem);
	flex-wrap: wrap;
	margin-bottom: calc(var(--cfx-skala) * 1.75rem);
}

.cfx-verksteder__tid {
	font-size: calc(var(--cfx-skala) * 0.95rem);
	color: #5c5c5c;
}



.cfx-verksteder__verktoy .cfx-knapp { min-height: calc(var(--cfx-skala) * 2.75rem); }

.cfx-verksteder__status:empty { display: none; }

.cfx-verksteder__status {
	font-weight: 600;
	color: var(--cfx-gronn);
}

/* Den felles åpningstiden trer tilbake når et verksted er funnet. */
.cfx-verksteder.har-naermest .cfx-verksteder__tid {
	display: none;
}

.cfx-verksteder__regioner {
	columns: 4 calc(var(--cfx-skala) * 16rem);
	column-gap: calc(var(--cfx-skala) * 1rem);
}

.cfx-verksteder__regioner .cfx-region {
	break-inside: avoid;
	margin-bottom: calc(var(--cfx-skala) * 1rem);
}

.cfx-region {
	padding: calc(var(--cfx-skala) * 1.25rem) calc(var(--cfx-skala) * 1.3rem) calc(var(--cfx-skala) * 1.3rem);
	background: #fff;
	border: 1px solid var(--cfx-kant);
	border-radius: var(--cfx-radius);
}

.cfx-region__region {
	margin-bottom: calc(var(--cfx-skala) * 0.25rem);
	padding-bottom: calc(var(--cfx-skala) * 0.9rem);
	border-bottom: 1px solid var(--cfx-kant);
	font-size: calc(var(--cfx-skala) * 0.78rem);
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--cfx-gronn);
}

.cfx.cfx .cfx-region ul { padding: 0; }

.cfx.cfx .cfx-region li {
	position: relative;
	display: block;
	padding: calc(var(--cfx-skala) * 0.7rem) 0;
	border-bottom: 1px solid var(--cfx-kant);
}

.cfx.cfx .cfx-region li::before {
	content: "";
	position: absolute;
	inset: 0 calc(var(--cfx-skala) * -0.6rem);
	z-index: 0;
	border-radius: 8px;
	opacity: 0;
	transition: opacity 0.12s;
}

.cfx.cfx .cfx-region li > * { position: relative; z-index: 1; }



.cfx-region__rad {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: calc(var(--cfx-skala) * 0.75rem);
}

.cfx-region__tid {
	display: block;
	margin-top: calc(var(--cfx-skala) * 0.1rem);
	font-size: calc(var(--cfx-skala) * 0.85rem);
	color: #6d6d6d;
}

.cfx.cfx .cfx-region li:last-child { border-bottom: 0; }

.cfx.cfx .cfx-region li.er-naermest::before {
	opacity: 1;
	background: #f1f6f1;
	box-shadow: inset 0 0 0 1.5px var(--cfx-gronn-lys);
}

.cfx.cfx .cfx-region li.er-naermest { border-bottom-color: transparent; }

/* «Ditt verksted» eller «Nærmest deg» på kanten over raden. Raden får
   litt luft over seg, så merket ikke legger seg over raden før. */
.cfx.cfx .cfx-region li.er-naermest { margin-top: calc(var(--cfx-skala) * 0.9rem); }

.cfx.cfx .cfx-region li > .cfx-region__merke {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;
	transform: translateY(-50%);
	padding: calc(var(--cfx-skala) * 0.15rem) calc(var(--cfx-skala) * 0.6rem);
	border-radius: 999px;
	background: var(--cfx-gronn);
	color: #fff;
	font-size: calc(var(--cfx-skala) * 0.7rem);
	font-weight: 700;
	letter-spacing: 0.06em;
	line-height: 1.4;
	text-transform: uppercase;
	white-space: nowrap;
}

/* «Time samme dag» eller «Carfix ringer deg» hos akkurat dette verkstedet. */
.cfx .cfx-region__pris {
	display: block;
	margin-top: calc(var(--cfx-skala) * 0.3rem);
	font-size: calc(var(--cfx-skala) * 0.95rem);
	font-weight: 600;
	color: var(--cfx-gronn);
}

.cfx .cfx-region__sted {
	font-size: calc(var(--cfx-skala) * 1rem);
	font-weight: 600;
	color: var(--cfx-tittel);
	text-decoration: none;
}

.cfx a.cfx-region__sted:hover { color: var(--cfx-gronn); text-decoration: underline; }
.cfx-tjenesteside-verksteder.cfx .cfx-region__sted:hover { color: var(--cfx-tittel); text-decoration: none; }

.cfx.cfx .cfx-region li:hover::before {
	opacity: 1;
	background: #f4f7f4;
	box-shadow: inset 0 0 0 1px var(--cfx-kant);
}

.cfx .cfx-region__tlf {
	flex: none;
	display: inline-flex;
	align-items: center;
	gap: calc(var(--cfx-skala) * 0.35rem);
	font-size: calc(var(--cfx-skala) * 0.95rem);
	font-weight: 400;
	white-space: nowrap;
	color: #5c5c5c;
	text-decoration: none;
}
.cfx .cfx-region__tlf .cfx-ikon {
	flex: none;
	width: calc(var(--cfx-skala) * 1rem);
	height: calc(var(--cfx-skala) * 1rem);
}
.cfx .cfx-region__tlf:hover { text-decoration: underline; }

/* ---------------------------------------------------------------------------
 * Tjenester
 * ------------------------------------------------------------------------- */

.cfx-tjenester,
.cfx-rad {
	background: var(--cfx-flate-lys);
}

.cfx-tjenester__kort,
.cfx-rad__liste {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: calc(var(--cfx-skala) * 1rem);
}

.cfx-kort {
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid #ddd9cd;
	border-radius: var(--cfx-radius);
	overflow: hidden;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), 0 10px 24px -16px rgba(0, 0, 0, 0.35);
	transition: box-shadow 0.15s, transform 0.15s;
}

.cfx-kort:hover {
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06), 0 16px 32px -18px rgba(0, 0, 0, 0.45);
	transform: translateY(-2px);
}

.cfx-kort__media {
	position: relative;
	display: block;
	aspect-ratio: 16 / 9;
	background: var(--cfx-flate);
}

.cfx-kort__innhold {
	display: flex;
	flex-direction: column;
	gap: calc(var(--cfx-skala) * 0.6rem);
	padding: calc(var(--cfx-skala) * 1.15rem) calc(var(--cfx-skala) * 1.25rem) calc(var(--cfx-skala) * 1.3rem);
	flex: 1;
}

.cfx.cfx .cfx-kort__tittel {
	margin: 0;
	padding: 0;
	font-size: calc(var(--cfx-skala) * 1.2rem);
	line-height: 1.2;
	color: var(--cfx-tittel);
}

.cfx .cfx-kort__tittel a {
	color: inherit;
	text-decoration: none;
}

.cfx .cfx-kort__tittel a:hover { color: var(--cfx-gronn); }

.cfx-kort__tekst {
	font-size: calc(var(--cfx-skala) * 0.97rem);
	line-height: 1.5;
}

.cfx-kort__fakta {
	display: flex;
	align-items: center;
	gap: calc(var(--cfx-skala) * 0.75rem);
	flex-wrap: wrap;
	margin-top: calc(var(--cfx-skala) * 0.5rem);
	padding-top: calc(var(--cfx-skala) * 1.1rem);
	border-top: 1px solid var(--cfx-kant);
	font-size: calc(var(--cfx-skala) * 0.95rem);
}

.cfx-kort__pris { font-weight: 700; color: var(--cfx-tittel); }

.cfx-kort__handling {
	display: flex;
	align-items: center;
	gap: calc(var(--cfx-skala) * 1.25rem);
	flex-wrap: wrap;
	margin-top: auto;
	padding-top: calc(var(--cfx-skala) * 1.1rem);
}

/* Kortene flyter og pakker seg, så en kategori med ett punkt ikke blir
   stående alene i en høy, tom boks. Samme grep som i megamenyen. */
.cfx-tjenester__lister {
	columns: 3;
	column-gap: calc(var(--cfx-skala) * 1.25rem);
	margin-top: calc(var(--cfx-skala) * 1.5rem);
}

.cfx-tjenester__lister .cfx-liste {
	break-inside: avoid;
	margin-bottom: calc(var(--cfx-skala) * 1.25rem);
}

.cfx-liste {
	padding: calc(var(--cfx-skala) * 1.1rem) calc(var(--cfx-skala) * 1.25rem);
	background: #fff;
	border: 1px solid #ddd9cd;
	border-radius: var(--cfx-radius);
}

.cfx-liste__navn {
	margin-bottom: calc(var(--cfx-skala) * 0.4rem);
	font-size: calc(var(--cfx-skala) * 0.78rem);
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--cfx-gronn);
}

.cfx .cfx-liste li a {
	display: flex;
	align-items: center;
	gap: calc(var(--cfx-skala) * 0.75rem);
	margin-inline: calc(var(--cfx-skala) * -0.6rem);
	padding: calc(var(--cfx-skala) * 0.55rem) calc(var(--cfx-skala) * 0.6rem);
	border-radius: 8px;
	box-shadow: inset 0 -1px 0 var(--cfx-kant);
	color: var(--cfx-tittel);
	font-weight: 400;
	text-decoration: none;
	transition: background-color 0.12s, color 0.12s;
}

.cfx .cfx-liste li:last-child a { box-shadow: none; }

.cfx .cfx-liste li a:hover {
	background: var(--cfx-gronn);
	color: #fff;
	box-shadow: none;
}

.cfx .cfx-liste li a:hover .cfx-pil { transform: translateX(3px); }

.cfx .cfx-liste .cfx-pil { transition: transform 0.15s; }

/* Ikonet og navnet hører sammen og står inntil hverandre; pilen i andre
   enden. Navnet sto før til høyre, fordi raden var bygget rundt en pris som
   nå er borte. */
.cfx .cfx-liste__navnet {
	display: flex;
	align-items: center;
	gap: calc(var(--cfx-skala) * 0.65rem);
	min-width: 0;
	margin-right: auto;
}

/* Samme gule merke som tjenesten har i menyen og i snarveiene. */
.cfx .cfx-liste__ikon {
	display: grid;
	place-items: center;
	flex: 0 0 auto;
	width: calc(var(--cfx-skala) * 1.7rem);
	height: calc(var(--cfx-skala) * 1.7rem);
	border-radius: 50%;
	background: var(--cfx-gul);
	color: var(--cfx-knapp-tekst);
}

.cfx .cfx-liste__ikon .cfx-ikon { width: 58%; height: 58%; }

/* Merket beholder fargen når raden får grønn bunn. */
.cfx .cfx-liste li a:hover .cfx-liste__ikon {
	background: var(--cfx-gul);
	color: var(--cfx-knapp-tekst);
}

/* ---------------------------------------------------------------------------
 * Tillit
 * ------------------------------------------------------------------------- */

.cfx-tillit {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
	gap: clamp(calc(var(--cfx-skala) * 1.5rem), 4vw, calc(var(--cfx-skala) * 3rem));
	align-items: start;
	background: var(--cfx-flate);
}

.cfx-tillit > * { max-width: none; }

.cfx.cfx .cfx-tillit__tittel {
	margin: 0;
	padding: 0;
	font-size: clamp(calc(var(--cfx-skala) * 1.5rem), 2.4vw, calc(var(--cfx-skala) * 2rem));
	line-height: 1.15;
	color: var(--cfx-tittel);
}

.cfx .cfx-tillit__ingress {
	margin-top: calc(var(--cfx-skala) * 0.75rem);
	max-width: 44ch;
	font-size: calc(var(--cfx-skala) * 1.05rem);
	line-height: 1.5;
}

.cfx-tillit__score {
	display: flex;
	align-items: baseline;
	gap: calc(var(--cfx-skala) * 0.75rem);
	margin-top: calc(var(--cfx-skala) * 1.5rem);
	flex-wrap: wrap;
}

.cfx-tillit__tall {
	font-size: clamp(calc(var(--cfx-skala) * 2.1rem), 3.8vw, calc(var(--cfx-skala) * 2.9rem));
	font-weight: 700;
	line-height: 1;
	color: var(--cfx-tittel);
}

.cfx-tillit__handling {
	display: flex;
	gap: calc(var(--cfx-skala) * 0.75rem);
	flex-wrap: wrap;
	margin-top: calc(var(--cfx-skala) * 2rem);
}

.cfx-fordeler {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: calc(var(--cfx-skala) * 0.9rem);
}

.cfx-fordeler li {
	display: flex;
	align-items: center;
	gap: calc(var(--cfx-skala) * 0.75rem);
	padding: calc(var(--cfx-skala) * 0.7rem) calc(var(--cfx-skala) * 0.9rem);
	background: #fff;
	border: 1px solid var(--cfx-kant);
	border-radius: 10px;
	color: var(--cfx-tittel);
}

.cfx-fordeler__nr {
	display: grid;
	place-items: center;
	width: calc(var(--cfx-skala) * 2.25rem);
	height: calc(var(--cfx-skala) * 2.25rem);
	flex: none;
	border-radius: 8px;
	background: var(--cfx-gronn);
	color: var(--cfx-gul);
	font-size: calc(var(--cfx-skala) * 0.95rem);
}

/* ---------------------------------------------------------------------------
 * Kampanje
 * ------------------------------------------------------------------------- */

.cfx-kampanje {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
	gap: clamp(calc(var(--cfx-skala) * 1.5rem), 4vw, calc(var(--cfx-skala) * 4rem));
	align-items: center;
	background: var(--cfx-morkt);
	color: #fff;
}

.cfx-kampanje > * { max-width: none; }

.cfx-kampanje__media {
	aspect-ratio: 16 / 10;
	max-height: 440px;
	border-radius: var(--cfx-radius);
	overflow: hidden;
}

.cfx.cfx .cfx-kampanje__tittel {
	margin: calc(var(--cfx-skala) * 0.5rem) 0 0;
	padding: 0;
	font-size: clamp(calc(var(--cfx-skala) * 1.5rem), 2.6vw, calc(var(--cfx-skala) * 2.1rem));
	line-height: 1.15;
	color: #fff;
}

.cfx .cfx-kampanje__tekst {
	margin-top: calc(var(--cfx-skala) * 1rem);
	max-width: 48ch;
	font-size: clamp(calc(var(--cfx-skala) * 1.05rem), 1.1vw, calc(var(--cfx-skala) * 1.2rem));
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.88);
}

.cfx-kampanje__handling {
	display: flex;
	gap: calc(var(--cfx-skala) * 0.75rem);
	flex-wrap: wrap;
	margin-top: calc(var(--cfx-skala) * 1.5rem);
}

.cfx-kampanje__handling .cfx-knapp--ramme { color: var(--cfx-gul); }

/* ---------------------------------------------------------------------------
 * NIO og bedrift
 * ------------------------------------------------------------------------- */

.cfx-nio {
	display: grid;
	grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr);
	gap: clamp(calc(var(--cfx-skala) * 1.5rem), 4vw, calc(var(--cfx-skala) * 4rem));
	align-items: center;
	background: var(--cfx-flate-lys);
}

.cfx-nio > * { max-width: none; }

.cfx.cfx .cfx-nio__tittel {
	margin: calc(var(--cfx-skala) * 0.5rem) 0 0;
	padding: 0;
	font-size: clamp(calc(var(--cfx-skala) * 1.5rem), 2.4vw, calc(var(--cfx-skala) * 2rem));
	line-height: 1.15;
	color: var(--cfx-tittel);
}

.cfx .cfx-nio__tekst {
	margin: calc(var(--cfx-skala) * 1rem) 0 calc(var(--cfx-skala) * 1.75rem);
	max-width: 46ch;
	font-size: clamp(calc(var(--cfx-skala) * 1.05rem), 1.1vw, calc(var(--cfx-skala) * 1.2rem));
	line-height: 1.5;
}

.cfx-nio__media {
	aspect-ratio: 16 / 10;
	max-height: 420px;
	border-radius: var(--cfx-radius);
	overflow: hidden;
}

/* Tre spalter: navnet, teksten, knappen. Med teksten samlet til venstre og
   knappen i ytterkanten sto det et tomrom på en halv kortbredde mellom dem.
   Nå fyller ingressen mellomrommet, og linjelengden holder seg lesbar. */
.cfx-bedrift {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto auto;
	align-items: center;
	gap: calc(var(--cfx-skala) * 1.5rem) calc(var(--cfx-skala) * 2.5rem);
	max-width: var(--cfx-bredde);
	margin-inline: auto;
	margin-block: clamp(calc(var(--cfx-skala) * 2.5rem), 5vw, calc(var(--cfx-skala) * 4rem));
	padding: clamp(calc(var(--cfx-skala) * 1.5rem), 3vw, calc(var(--cfx-skala) * 2.25rem)) clamp(calc(var(--cfx-skala) * 1.25rem), 3vw, calc(var(--cfx-skala) * 2.25rem));
	background: var(--cfx-flate);
	border-radius: var(--cfx-radius);
}

.cfx-bedrift > * { max-width: none; }

.cfx.cfx .cfx-bedrift__tittel {
	margin: calc(var(--cfx-skala) * 0.4rem) 0 0;
	padding: 0;
	font-size: clamp(calc(var(--cfx-skala) * 1.5rem), 2.6vw, calc(var(--cfx-skala) * 2rem));
	line-height: 1.2;
	color: var(--cfx-tittel);
}

/* Skillestrek i stedet for luft: de to delene hører sammen, men sier hver sin
   ting. */
.cfx .cfx-bedrift__tekst {
	margin-block: 0;
	padding-left: calc(var(--cfx-skala) * 2.5rem);
	border-left: 1px solid var(--cfx-kant);
	max-width: 66ch;
	line-height: 1.5;
}

.cfx-bedrift__navn { min-width: 0; }

/* Under denne bredden er det ikke plass til tre spalter ved siden av
   hverandre. Da stables de, og streken flytter seg over teksten. */
@media (max-width: 1100px) {
	.cfx-bedrift {
		grid-template-columns: minmax(0, 1fr);
		justify-items: start;
		gap: calc(var(--cfx-skala) * 1.1rem);
	}
	.cfx .cfx-bedrift__tekst {
		padding-left: 0;
		border-left: 0;
		max-width: 60ch;
	}
}

/* ---------------------------------------------------------------------------
 * FAQ
 * ------------------------------------------------------------------------- */

.cfx-faq {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
	gap: clamp(calc(var(--cfx-skala) * 1.5rem), 4vw, calc(var(--cfx-skala) * 3rem));
	align-items: start;
	background: var(--cfx-flate);
}

.cfx-faq > * { max-width: none; }

.cfx.cfx .cfx-faq__tittel {
	margin: 0 0 calc(var(--cfx-skala) * 1.25rem);
	padding: 0;
	font-size: clamp(calc(var(--cfx-skala) * 1.5rem), 2.4vw, calc(var(--cfx-skala) * 2rem));
	line-height: 1.15;
	color: var(--cfx-tittel);
}

.cfx-faq__kontakt {
	padding: calc(var(--cfx-skala) * 1.25rem) calc(var(--cfx-skala) * 1.4rem);
	background: #fff;
	border: 1px solid var(--cfx-kant);
	border-radius: var(--cfx-radius);
	line-height: 1.5;
}

.cfx-faq__kontakt-tittel {
	margin-bottom: calc(var(--cfx-skala) * 0.35rem);
	font-weight: 600;
	color: var(--cfx-tittel);
}

.cfx-faq__handling {
	display: flex;
	gap: calc(var(--cfx-skala) * 0.75rem);
	flex-wrap: wrap;
	margin-top: calc(var(--cfx-skala) * 1rem);
}

.cfx-faq__handling .cfx-knapp--ramme { color: var(--cfx-gronn); }

.cfx-faq__punkt {
	margin-bottom: calc(var(--cfx-skala) * 0.6rem);
	padding: calc(var(--cfx-skala) * 0.9rem) calc(var(--cfx-skala) * 1.1rem);
	background: #fff;
	border: 1px solid var(--cfx-kant);
	border-radius: 10px;
	transition: border-color 0.15s, box-shadow 0.15s;
}

.cfx-faq__punkt:hover {
	border-color: var(--cfx-gronn-lys);
}

.cfx-faq__punkt[open] {
	border-color: var(--cfx-gronn-lys);
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), 0 12px 26px -20px rgba(0, 0, 0, 0.5);
}

.cfx-faq__punkt summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: calc(var(--cfx-skala) * 1rem);
	cursor: pointer;
	font-size: calc(var(--cfx-skala) * 1.02rem);
	font-weight: 600;
	color: var(--cfx-tittel);
	list-style: none;
}

.cfx-faq__punkt summary::-webkit-details-marker { display: none; }

.cfx-faq__punkt summary:hover { color: var(--cfx-gronn); }

.cfx-faq__punkt summary::after {
	content: "";
	width: calc(var(--cfx-skala) * 0.55rem);
	height: calc(var(--cfx-skala) * 0.55rem);
	flex: none;
	border-right: 1px solid var(--cfx-gronn);
	border-bottom: 1px solid var(--cfx-gronn);
	transform: translateY(-2px) rotate(45deg);
	transition: transform 0.15s;
}

.cfx-faq__punkt[open] summary::after { transform: translateY(2px) rotate(-135deg); }

.cfx-faq__punkt p {
	margin-top: calc(var(--cfx-skala) * 0.65rem);
	padding-top: calc(var(--cfx-skala) * 0.65rem);
	max-width: 70ch;
	border-top: 1px solid var(--cfx-kant);
	font-size: calc(var(--cfx-skala) * 0.97rem);
	line-height: 1.55;
	color: #55605a;
}

.cfx-faq__punkt[open] summary + p {
	animation: cfx-fade 0.3s ease both;
}

@keyframes cfx-fade {
	from { opacity: 0; transform: translateY(-4px); }
	to { opacity: 1; transform: none; }
}

.cfx-faq__mer { margin-top: calc(var(--cfx-skala) * 1.25rem); }

/* ---------------------------------------------------------------------------
 * Mindre skjermer
 * ------------------------------------------------------------------------- */

@media (max-width: 1100px) {
	.cfx-tjenester__kort,
	.cfx-rad__liste,
	.cfx-tjenester__lister { columns: 2; }
}

@media (max-width: 900px) {
	.cfx-hero,
	.cfx-tillit,
	.cfx-kampanje,
	.cfx-nio,
	.cfx-faq { grid-template-columns: 1fr; }

	.cfx-hero__media { min-height: 220px; max-height: 320px; }
	.cfx-nio__media { order: -1; }
}

@media (max-width: 680px) {
	.cfx-tjenester__kort,
	.cfx-rad__liste,
	.cfx-fordeler { grid-template-columns: 1fr; }

	.cfx-tjenester__lister { columns: 1; }

	/* Bare de store handlingene tar full bredde – knappene i kortene forblir små. */
	.cfx .cfx-velger__knapp,
	.cfx-kampanje__handling .cfx-knapp,
	.cfx-faq__handling .cfx-knapp,
	.cfx-tillit__handling .cfx-knapp,
	.cfx-bedrift .cfx-knapp { width: 100%; }
}


/* ---------------------------------------------------------------------------
 * Verkstedside og tjenesteside
 * ------------------------------------------------------------------------- */

.cfx-brodsmuler + .cfx-verksted,
.cfx-brodsmuler + .cfx-tjenesteside {
	padding-top: calc(var(--cfx-skala) * 1.5rem);
}

.cfx-verksted,
.cfx-tjenesteside {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
	gap: clamp(1.5rem, 4vw, 3rem);
	align-items: center;
	padding-inline: max(clamp(calc(var(--cfx-skala) * 1rem), 4vw, calc(var(--cfx-skala) * 3rem)), (100% - var(--cfx-bredde)) / 2);
	background: var(--cfx-gronn);
	color: #fff;
}

.cfx-verksted > *,
.cfx-tjenesteside > * {
	max-width: none;
	margin-inline: 0;
}

.cfx.cfx .cfx-verksted__tittel,
.cfx.cfx .cfx-tjenesteside__tittel {
	margin: calc(var(--cfx-skala) * 0.6rem) 0 0;
	padding: 0;
	font-size: calc(var(--cfx-skala) * clamp(1.9rem, 3.4vw, 2.8rem));
	line-height: 1.1;
	color: #fff;
}

.cfx .cfx-verksted__ingress,
.cfx .cfx-tjenesteside__ingress {
	margin-top: calc(var(--cfx-skala) * 0.9rem);
	/* 46ch ga fire korte linjer der spalten hadde plass til tre. */
	max-width: 62ch;
	font-size: calc(var(--cfx-skala) * 1.05rem);
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.88);
}

.cfx-verksted__handling,
.cfx-tjenesteside__handling {
	display: flex;
	align-items: center;
	gap: calc(var(--cfx-skala) * 0.75rem) calc(var(--cfx-skala) * 1.25rem);
	flex-wrap: wrap;
	margin-top: calc(var(--cfx-skala) * 1.5rem);
}

.cfx-verksted__handling .cfx-lenke,
.cfx-tjenesteside__handling .cfx-lenke { color: var(--cfx-gul); }

.cfx-verksted__media,
.cfx-tjenesteside__media {
	aspect-ratio: 16 / 10;
	max-height: 420px;
	border-radius: var(--cfx-radius);
	overflow: hidden;
}

/* Tjenestelisten på verkstedsiden */
/* Fakta og FAQ står på hvitt. Lysbeige lå 1,053:1 fra hvitt — man så ikke
   at seksjonen skiftet. Det mørkere båndet gir 1,19:1 mot begge. */
.cfx-verksted-tjenester { background: var(--cfx-flate); }

.cfx .cfx-tjenesterad {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr));
	align-items: start;
	gap: calc(var(--cfx-skala) * 0.75rem);
}

.cfx .cfx-tjenesterad li {
	display: grid;
	grid-template-columns: auto 1fr;
	align-items: center;
	gap: calc(var(--cfx-skala) * 0.35rem) calc(var(--cfx-skala) * 0.9rem);
	padding: calc(var(--cfx-skala) * 1rem) calc(var(--cfx-skala) * 1.15rem);
	background: #fff;
	border: 1px solid var(--cfx-kant-kort);
	border-radius: 10px;
	transition: border-color 0.15s;
}

.cfx .cfx-tjenesterad li:hover { border-color: var(--cfx-gronn-lys); }

.cfx-tjenesterad__ikon { grid-row: 1 / span 2; }

.cfx-tjenesterad li .cfx-merke { flex: none; }

.cfx-tjenesterad__pris { white-space: nowrap; }



.cfx-tjenesterad__ikon {
	display: grid;
	place-items: center;
	width: calc(var(--cfx-skala) * 2.5rem);
	height: calc(var(--cfx-skala) * 2.5rem);
	flex: none;
	border-radius: 50%;
	background: var(--cfx-gul);
	color: var(--cfx-knapp-tekst);
}

.cfx-tjenesterad__navn {
	display: flex;
	flex-direction: column;
	grid-column: 2;
}

.cfx .cfx-tjenesterad__navn a {
	font-size: calc(var(--cfx-skala) * 1.05rem);
	font-weight: 600;
	color: var(--cfx-tittel);
	text-decoration: none;
}

.cfx .cfx-tjenesterad__navn a:hover { color: var(--cfx-gronn); text-decoration: underline; }

.cfx-tjenesterad__navn small {
	font-size: calc(var(--cfx-skala) * 0.9rem);
	color: #6d6d6d;
}

.cfx-tjenesterad__pris { font-weight: 700; color: var(--cfx-tittel); }

/* Verkstedvalg på tjenestesiden */
.cfx-tjenesteside-verksteder { background: var(--cfx-flate); }

@media (max-width: 900px) {
	.cfx-verksted,
	.cfx-tjenesteside { grid-template-columns: 1fr; }

	.cfx-verksted__media,
	.cfx-tjenesteside__media { order: -1; max-height: 260px; }
}

/* Merkelappen står på mørk bunn i toppen av tjenestesiden. */
.cfx-tjenesteside .cfx-merke--lys {
	border-color: rgba(255, 255, 255, 0.4);
	background: rgba(255, 255, 255, 0.1);
	color: #fff;
}

/* Verkstedsmalen har en egen tittelrad over innholdet. Når vår toppseksjon
   er i bruk, dubliserer den tittelen, så den skjules. */
body:has(.cfx-verksted) #verksted-header {
	display: none;
}

/* Fakta-kort i toppen av tjenestesiden */
.cfx .cfx-faktakort {
	display: flex;
	flex-wrap: wrap;
	gap: calc(var(--cfx-skala) * 0.75rem);
	margin-top: calc(var(--cfx-skala) * 1.5rem);
}

.cfx .cfx-faktakort li {
	display: flex;
	flex-direction: column;
	gap: calc(var(--cfx-skala) * 0.3rem);
	min-width: calc(var(--cfx-skala) * 9rem);
	padding: calc(var(--cfx-skala) * 0.85rem) calc(var(--cfx-skala) * 1rem);
	border: 1px solid rgba(255, 255, 255, 0.22);
	border-radius: 10px;
	background: rgba(0, 0, 0, 0.15);
}

.cfx-faktakort__merkelapp {
	font-size: calc(var(--cfx-skala) * 0.72rem);
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--cfx-gul);
}

.cfx-faktakort__verdi {
	font-size: calc(var(--cfx-skala) * 1.1rem);
	font-weight: 700;
	line-height: 1.25;
	color: #fff;
}


/* Dette er inkludert */
.cfx-inkludert { background: #fff; }

.cfx .cfx-inkludert__liste {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr));
	gap: calc(var(--cfx-skala) * 1rem);
	margin-top: calc(var(--cfx-skala) * 1.5rem);
}

.cfx .cfx-inkludert__liste li {
	display: grid;
	grid-template-columns: auto 1fr;
	align-items: center;
	align-content: start;
	gap: calc(var(--cfx-skala) * 0.6rem) calc(var(--cfx-skala) * 0.75rem);
	padding: calc(var(--cfx-skala) * 1.2rem) calc(var(--cfx-skala) * 1.3rem);
	background: var(--cfx-flate-lys);
	border: 1px solid var(--cfx-kant);
	border-radius: var(--cfx-radius);
}

.cfx-inkludert__ikon {
	display: grid;
	place-items: center;
	width: calc(var(--cfx-skala) * 2.2rem);
	height: calc(var(--cfx-skala) * 2.2rem);
	border-radius: 50%;
	background: var(--cfx-morkt);
	color: var(--cfx-gul);
}

.cfx-inkludert__tekst { grid-column: 1 / -1; }

.cfx-inkludert__tittel {
	font-weight: 700;
	color: var(--cfx-tittel);
}

.cfx-inkludert__tekst {
	font-size: calc(var(--cfx-skala) * 0.95rem);
	line-height: 1.5;
	color: #55605a;
}

/* Priser */
.cfx-priser {
	display: grid;
	grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
	gap: clamp(1.5rem, 4vw, 3rem);
	align-items: start;
	background: var(--cfx-flate);
	padding-inline: max(clamp(calc(var(--cfx-skala) * 1rem), 4vw, calc(var(--cfx-skala) * 3rem)), (100% - var(--cfx-bredde)) / 2);
}

.cfx-priser > * { max-width: none; margin-inline: 0; }

.cfx .cfx-priser__hode { min-width: 0; }

.cfx .cfx-priser__tekst {
	margin-block: calc(var(--cfx-skala) * 0.75rem) 0;
	max-width: 42ch;
	line-height: 1.55;
}

.cfx.cfx .cfx-prisliste {
	background: #fff;
	border: 1px solid var(--cfx-kant);
	border-radius: var(--cfx-radius);
	padding: calc(var(--cfx-skala) * 0.5rem) calc(var(--cfx-skala) * 1.25rem);
}

.cfx .cfx-prisliste li {
	display: flex;
	align-items: baseline;
	gap: calc(var(--cfx-skala) * 1rem);
	padding: calc(var(--cfx-skala) * 0.85rem) 0;
	border-bottom: 1px solid var(--cfx-kant);
}

.cfx .cfx-prisliste li:last-child { border-bottom: 0; }

.cfx-prisliste__navn { flex: 1; color: var(--cfx-tittel); }

.cfx-prisliste__tid {
	font-size: calc(var(--cfx-skala) * 0.9rem);
	color: #6d6d6d;
	white-space: nowrap;
}

.cfx-prisliste__pris {
	font-weight: 700;
	color: var(--cfx-tittel);
	white-space: nowrap;
}

/* Prisene som kort (28. oktober 2026). Før sto overskriften alene i venstre
   spalte og en smal tabell i høyre, og seksjonen så tilfeldig ut. Nå står
   overskriften og forbeholdet øverst over hele bredden, og hver prisrad er
   et kort: hva det gjelder øverst, prisen stort under. Rutenettet tar fire i
   bredden på PC og ett på telefon. */
.cfx.cfx.cfx-priser {
	display: block;
}
/* Forbeholdet står rett under overskriften, ikke ute til høyre – det hører
   til den. */
.cfx.cfx .cfx-priser__hode {
	display: flex;
	flex-direction: column;
	gap: calc(var(--cfx-skala) * 0.5rem);
	margin-block-end: calc(var(--cfx-skala) * 1.5rem);
}
.cfx.cfx .cfx-priser__tekst {
	margin-block: 0;
	max-width: 52ch;
	color: var(--cfx-dempet);
}
.cfx.cfx.cfx .cfx-prisliste {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
	gap: calc(var(--cfx-skala) * 1rem);
	margin: 0;
	padding: 0;
	background: none;
	border: 0;
	border-radius: 0;
	list-style: none;
}
.cfx.cfx.cfx .cfx-prisliste li {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: calc(var(--cfx-skala) * 0.5rem);
	padding: calc(var(--cfx-skala) * 1.4rem) calc(var(--cfx-skala) * 1.5rem);
	border: 1px solid var(--cfx-kant);
	border-radius: var(--cfx-radius);
	background: #fff;
}
.cfx.cfx.cfx .cfx-prisliste li:last-child { border-bottom: 1px solid var(--cfx-kant); }
.cfx.cfx .cfx-prisliste__navn {
	flex: 0 0 auto;
	font-size: max(15px, calc(var(--cfx-skala) * 0.95rem));
	color: var(--cfx-tekst);
}
.cfx.cfx .cfx-prisliste__pris {
	order: 2;
	margin-block-start: auto;
	font-size: calc(var(--cfx-skala) * 1.6rem);
	line-height: 1.15;
	white-space: normal;
	color: var(--cfx-gronn);
}
.cfx.cfx .cfx-prisliste__tid { order: 3; }


/* Infokort nederst */
.cfx-infokort { background: var(--cfx-flate); }

.cfx .cfx-infokort__liste {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr));
	gap: calc(var(--cfx-skala) * 1rem);
	margin-top: calc(var(--cfx-skala) * 1.5rem);
}

.cfx .cfx-infokort__liste li {
	display: flex;
	flex-direction: column;
	gap: calc(var(--cfx-skala) * 0.4rem);
	padding: calc(var(--cfx-skala) * 1.1rem) calc(var(--cfx-skala) * 1.25rem);
	background: var(--cfx-morkt);
	border-radius: var(--cfx-radius);
	color: #fff;
}

.cfx-infokort__tittel { font-weight: 700; }

.cfx-infokort__tekst {
	font-size: calc(var(--cfx-skala) * 0.95rem);
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.82);
}

.cfx .cfx-infokort__kilde {
	margin-top: calc(var(--cfx-skala) * 1rem);
	font-size: calc(var(--cfx-skala) * 0.85rem);
	color: #6d6d6d;
}

@media (max-width: 900px) {
	.cfx-priser { grid-template-columns: 1fr; }
}

/* Temaer: det som hører til tjenesten uten å være en egen tjeneste.
   Vinterdekk og sommerdekk under dekkskift. Annethvert bilde bytter side. */
.cfx-temaer { background: #fff; }

.cfx-temaer__liste {
	display: grid;
	gap: clamp(calc(var(--cfx-skala) * 2.25rem), 4.5vw, calc(var(--cfx-skala) * 4rem));
}

.cfx-tema {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr);
	align-items: center;
	gap: clamp(1.5rem, 4vw, 3.5rem);
	/* Gamle adresser som /vinterdekk/ lander her med anker, under toppfeltet. */
	scroll-margin-top: calc(var(--cfx-topp-hoyde, var(--header-height, 80px)) + calc(var(--cfx-skala) * 1.5rem));
}

.cfx-tema:nth-child(even) { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr); }
.cfx-tema:nth-child(even) .cfx-tema__media { order: -1; }
.cfx-tema--uten-bilde { grid-template-columns: minmax(0, 1fr); }

.cfx-tema__innhold { max-width: 62ch; }

.cfx .cfx-tema__tekst p {
	margin-block: calc(var(--cfx-skala) * 0.9rem) 0;
	font-size: calc(var(--cfx-skala) * 1.05rem);
	line-height: 1.6;
}

.cfx .cfx-tema__handling {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: calc(var(--cfx-skala) * 0.9rem) calc(var(--cfx-skala) * 1.5rem);
	margin-block: calc(var(--cfx-skala) * 1.5rem) 0;
}

.cfx-tema__media {
	aspect-ratio: 3 / 2;
	border-radius: var(--cfx-radius);
	overflow: hidden;
	background: var(--cfx-flate);
}

@media (max-width: 900px) {
	.cfx-tema,
	.cfx-tema:nth-child(even) { grid-template-columns: minmax(0, 1fr); }
	.cfx-tema .cfx-tema__media { order: -1; aspect-ratio: 16 / 9; }
}

/* Brødsmuler: samme grønne flate som toppen under, så de henger sammen. */
.cfx-brodsmuler {
	padding-block: calc(var(--cfx-skala) * 0.9rem) 0;
	background: var(--cfx-gronn);
	color: rgba(255, 255, 255, 0.75);
}

.cfx.cfx-brodsmuler ol,
.cfx-brodsmuler.cfx ol {
	display: flex;
	flex-wrap: wrap;
	gap: calc(var(--cfx-skala) * 0.5rem);
	font-size: calc(var(--cfx-skala) * 0.9rem);
	color: #6d6d6d;
}

.cfx.cfx-brodsmuler li,
.cfx-brodsmuler.cfx li { display: inline-flex; align-items: center; }

.cfx.cfx-brodsmuler li + li::before,
.cfx-brodsmuler.cfx li + li::before {
	content: "›";
	margin-right: calc(var(--cfx-skala) * 0.5rem);
	color: rgba(255, 255, 255, 0.45);
}

.cfx.cfx-brodsmuler a,
.cfx-brodsmuler.cfx a { color: rgba(255, 255, 255, 0.75); text-decoration: none; }

.cfx.cfx-brodsmuler a:hover,
.cfx-brodsmuler.cfx a:hover { color: var(--cfx-gul); text-decoration: underline; }

.cfx.cfx-brodsmuler li[aria-current] { color: #fff; }

/* Status i verkstedtoppen */
.cfx .cfx-verksted__status {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: calc(var(--cfx-skala) * 0.5rem) calc(var(--cfx-skala) * 1.25rem);
	margin-top: calc(var(--cfx-skala) * 0.9rem);
	font-size: calc(var(--cfx-skala) * 0.98rem);
	color: rgba(255, 255, 255, 0.85);
}

/* Faktakortene under toppen */
.cfx-verksted-fakta { background: #fff; padding-block: calc(var(--cfx-skala) * 2rem); }

.cfx .cfx-faktaliste {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr));
	gap: calc(var(--cfx-skala) * 1rem);
}

.cfx .cfx-faktaliste li {
	position: relative;
	display: grid;
	grid-template-columns: auto 1fr;
	grid-auto-rows: min-content;
	align-items: center;
	align-content: start;
	gap: calc(var(--cfx-skala) * 0.6rem) calc(var(--cfx-skala) * 0.75rem);
	padding: calc(var(--cfx-skala) * 1.2rem) calc(var(--cfx-skala) * 1.3rem);
	background: var(--cfx-flate-lys);
	border: 1px solid var(--cfx-kant);
	border-radius: var(--cfx-radius);
	line-height: 1.45;
}

.cfx-faktaliste__ikon {
	display: grid;
	place-items: center;
	width: calc(var(--cfx-skala) * 2.2rem);
	height: calc(var(--cfx-skala) * 2.2rem);
	border-radius: 50%;
	background: var(--cfx-morkt);
	color: var(--cfx-gul);
}

/* Tittelen står ved siden av ikonet, innholdet under begge. */
.cfx-faktaliste__tittel { align-self: center; }

.cfx .cfx-faktaliste li > :not(.cfx-faktaliste__ikon):not(.cfx-faktaliste__tittel) {
	grid-column: 1 / -1;
	align-self: start;
}

/* Innholdet starter på samme høyde i alle kortene. */
.cfx .cfx-faktaliste li > :not(.cfx-faktaliste__ikon):not(.cfx-faktaliste__tittel):first-of-type {
	margin-top: calc(var(--cfx-skala) * 0.35rem);
}

.cfx-faktaliste__tittel {
	font-size: calc(var(--cfx-skala) * 1.05rem);
	font-weight: 700;
	color: var(--cfx-tittel);
}

.cfx .cfx-faktaliste a { color: var(--cfx-tittel); text-decoration: none; }
.cfx .cfx-faktaliste a:hover { color: var(--cfx-gronn); text-decoration: underline; }

/* Om verkstedet og avslutning */
.cfx-verksted-om { background: #fff; }

.cfx-verksted-om__tekst.cfx {
	margin-top: calc(var(--cfx-skala) * 0.75rem);
	max-width: 70ch;
	font-size: calc(var(--cfx-skala) * 1.05rem);
	line-height: 1.6;
}

.cfx-verksted-kontakt {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: calc(var(--cfx-skala) * 1.5rem);
	background: var(--cfx-morkt);
	color: #fff;
	padding-inline: max(clamp(calc(var(--cfx-skala) * 1rem), 4vw, calc(var(--cfx-skala) * 3rem)), (100% - var(--cfx-bredde)) / 2);
}

.cfx-verksted-kontakt > * { max-width: none; margin-inline: 0; }

.cfx-verksted-kontakt.cfx.cfx .cfx-hode__tittel { color: #fff; }

.cfx-verksted-kontakt__tekst.cfx {
	margin-top: calc(var(--cfx-skala) * 0.5rem);
	margin-inline: auto;
	max-width: 52ch;
	color: rgba(255, 255, 255, 0.85);
}

.cfx-verksted-kontakt__handling {
	display: flex;
	justify-content: center;
	gap: calc(var(--cfx-skala) * 0.75rem);
	flex-wrap: wrap;
}

.cfx-verksted-kontakt__handling .cfx-knapp--ramme { color: var(--cfx-gul); }


/* Seksjonene stables ut fra sin egen bredde, ikke skjermbredden. Det gjør at
   de også fungerer i maler med sidemeny. */
@container (max-width: 900px) {
	.cfx-hero,
	.cfx-tillit,
	.cfx-kampanje,
	.cfx-nio,
	.cfx-faq,
	.cfx-verksted,
	.cfx-tjenesteside,
	.cfx-priser {
		grid-template-columns: 1fr;
	}

	.cfx-hero__media,
	.cfx-verksted__media,
	.cfx-tjenesteside__media {
		order: -1;
		max-height: 260px;
	}
	.cfx-tjenester__kort,
	.cfx-rad__liste,
	.cfx-tjenester__lister { columns: 2; }
}

@container (max-width: 620px) {
	.cfx-tjenester__kort,
	.cfx-rad__liste,
	.cfx-fordeler { grid-template-columns: 1fr; }

	.cfx-tjenester__lister { columns: 1; }
}

/* Tjenestene på verkstedsiden som utvidbare rader */
/* min(…, 100%) i stedet for et fast minstemål: uten den kan ikke sporet
   krympe under 420 px, og raden stikker utenfor skjermen på en telefon. */
.cfx .cfx-tjenesterad { grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr)); }

.cfx .cfx-tjenesterad li {
	display: block;
	padding: 0;
	overflow: hidden;
}

/* Én linje lukket: ikon, navn, pil og «På dagen». Pris og tid står i det
   åpne innholdet — lukket er listen en oversikt over hva verkstedet gjør.
   Alle radene har da like mange linjer, og kortene blir like høye. Før vokste
   de med merket, og «Mer om tjenesten» tok en tredje linje for å si det
   pilen allerede sier. */
.cfx .cfx-utvid > summary {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	gap: calc(var(--cfx-skala) * 0.3rem) calc(var(--cfx-skala) * 0.8rem);
	padding: calc(var(--cfx-skala) * 0.85rem) calc(var(--cfx-skala) * 1.15rem);
	cursor: pointer;
	list-style: none;
}

.cfx .cfx-utvid .cfx-tjenesterad__ikon { grid-area: 1 / 1; }

.cfx .cfx-utvid .cfx-tjenesterad__navn { grid-area: 1 / 2; }

/* Pris og tid øverst i det åpne innholdet, som to tall med hver sin etikett
   i stedet for to løse ord på en linje. */
.cfx .cfx-utvid__innhold .cfx-tjenesterad__fakta {
	display: flex;
	flex-wrap: wrap;
	gap: calc(var(--cfx-skala) * 0.5rem) calc(var(--cfx-skala) * 1.4rem);
	margin-block: 0 calc(var(--cfx-skala) * 0.85rem);
	padding-bottom: calc(var(--cfx-skala) * 0.85rem);
	border-bottom: 1px solid var(--cfx-kant);
}

.cfx .cfx-utvid__innhold .cfx-tjenesterad__fakta > span {
	display: flex;
	flex-direction: column;
	gap: calc(var(--cfx-skala) * 0.1rem);
	font-size: calc(var(--cfx-skala) * 1.05rem);
	font-weight: 600;
	color: var(--cfx-tittel);
}

.cfx .cfx-utvid__innhold .cfx-tjenesterad__fakta > span::before {
	content: attr(data-etikett);
	font-size: calc(var(--cfx-skala) * 0.75rem);
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--cfx-dempet);
}

.cfx .cfx-utvid__innhold .cfx-tjenesterad__tid { font-weight: 500; }

/* Merket står før pilen, som er lengst til høyre. Lå det sammen med pris og
   tid, ble linje to høyere på de radene som har det, og kortene ulike. */
.cfx .cfx-utvid > summary .cfx-merke {
	grid-area: 1 / 3;
	flex: 0 0 auto;
}

.cfx-tjenesterad__tid {
	font-size: calc(var(--cfx-skala) * 0.92rem);
	color: #6d6d6d;
}

.cfx .cfx-utvid > summary::-webkit-details-marker { display: none; }

.cfx .cfx-utvid > summary::after {
	content: "";
	grid-area: 1 / 4;
	width: calc(var(--cfx-skala) * 0.5rem);
	height: calc(var(--cfx-skala) * 0.5rem);
	border-right: 1px solid var(--cfx-gronn);
	border-bottom: 1px solid var(--cfx-gronn);
	transform: translateY(-2px) rotate(45deg);
	transition: transform 0.15s;
}

.cfx .cfx-utvid[open] > summary::after { transform: translateY(2px) rotate(-135deg); }

.cfx .cfx-utvid .cfx-tjenesterad__navn {
	flex: 0 1 auto;
	min-width: 0;
	font-size: calc(var(--cfx-skala) * 1.05rem);
	font-weight: 600;
	color: var(--cfx-tittel);
}

.cfx-utvid__innhold {
	padding: 0 calc(var(--cfx-skala) * 1.15rem) calc(var(--cfx-skala) * 1.1rem);
}

.cfx .cfx-utvid__innhold p {
	margin-top: calc(var(--cfx-skala) * 0.35rem);
	padding-top: calc(var(--cfx-skala) * 0.75rem);
	border-top: 1px solid var(--cfx-kant);
	font-size: calc(var(--cfx-skala) * 0.97rem);
	line-height: 1.55;
	color: #55605a;
}

.cfx .cfx-utvid__handling {
	display: flex;
	align-items: center;
	gap: calc(var(--cfx-skala) * 1rem);
	flex-wrap: wrap;
	margin-top: calc(var(--cfx-skala) * 0.9rem);
	padding-top: 0;
	border-top: 0;
}

.cfx .cfx-utvid__handling .cfx-knapp {
	min-height: calc(var(--cfx-skala) * 2.4rem);
	padding-inline: calc(var(--cfx-skala) * 1.1rem);
}

/* Naboverksteder */
.cfx-verksted-faq { background: #fff; }
.cfx-naboer { background: var(--cfx-flate); }

.cfx .cfx-naboer__liste {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
	gap: calc(var(--cfx-skala) * 1rem);
	margin-top: calc(var(--cfx-skala) * 1.25rem);
}

.cfx .cfx-naboer__liste a {
	display: flex;
	flex-direction: column;
	gap: calc(var(--cfx-skala) * 0.3rem);
	height: 100%;
	padding: calc(var(--cfx-skala) * 1.15rem) calc(var(--cfx-skala) * 1.25rem);
	background: #fff;
	border: 1px solid var(--cfx-kant);
	border-radius: var(--cfx-radius);
	text-decoration: none;
	transition: border-color 0.15s;
}

.cfx .cfx-naboer__liste a:hover { border-color: var(--cfx-gronn-lys); }

.cfx-naboer__navn {
	font-size: calc(var(--cfx-skala) * 1.1rem);
	font-weight: 600;
	color: var(--cfx-tittel);
}

.cfx-naboer__adresse {
	font-size: calc(var(--cfx-skala) * 0.95rem);
	color: #6d6d6d;
}

.cfx-naboer__liste .cfx-lenke { margin-top: calc(var(--cfx-skala) * 0.5rem); }

/* Jevn rytme mellom seksjonene: naboflater med samme farge får ikke dobbel luft */
.cfx + .cfx { margin-top: 0; }

.cfx-verksted-faq + .cfx-naboer,
.cfx-verksted-fakta + .cfx-verksted-tjenester { padding-top: calc(var(--cfx-skala) * 2.5rem); }

/* «Åpne alle» over tjenestene: tekst med vinklene i en liten hvit sirkel,
   til venstre over rutenettet. Ikke en pille til ved siden av «Alle
   tjenester» – to like knapper i hjørnet konkurrerte. Samme størrelse og
   vekt (600) som lenkene i seksjonshodet. Vinklene snur når alt er åpent. */
.cfx .cfx-tjenesterad__alle {
	margin-block: 0 calc(var(--cfx-skala) * 0.9rem);
}
.cfx .cfx-apne-alle {
	display: inline-flex;
	align-items: center;
	gap: calc(var(--cfx-skala) * 0.6rem);
	min-height: 44px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--cfx-gronn);
	font: inherit;
	font-size: calc(var(--cfx-skala) * 1rem);
	font-weight: 600;
	line-height: 1.2;
	cursor: pointer;
}
.cfx .cfx-apne-alle[hidden] { display: none; }
.cfx-apne-alle__pil {
	order: -1;
	box-sizing: border-box;
	width: 2em;
	height: 2em;
	padding: 0.45em;
	border: 1px solid var(--cfx-kant-kort);
	border-radius: 50%;
	background: #fff;
	transition: transform 0.2s ease, border-color 0.15s ease;
}
.cfx .cfx-apne-alle:hover .cfx-apne-alle__pil,
.cfx .cfx-apne-alle:focus-visible .cfx-apne-alle__pil { border-color: var(--cfx-gronn); }
/* Bare med mus: på telefon ble streken stående etter et trykk. */
@media (hover: hover) {
	.cfx .cfx-apne-alle:hover [data-cfx-apne-tekst] { text-decoration: underline; text-underline-offset: 0.2em; }
}
.cfx .cfx-apne-alle:focus-visible { outline: 2px solid var(--cfx-gronn); outline-offset: 4px; border-radius: 6px; }
.cfx-apne-alle[aria-expanded="true"] .cfx-apne-alle__pil { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) {
	.cfx-apne-alle__pil { transition: none; }
}


/* Skjemaet har samme beige bunn som verkstedlisten foran seg. Med full
   luft i begge ble det dobbelt så langt mellom dem som ellers (28. oktober
   2026). Seksjonene ligger side om side, så + treffer. */
.cfx-tjenesteside-verksteder + .cfx-foresporsel.cfx,
.cfx-verksted-tjenester + .cfx-foresporsel.cfx {
	padding-top: 0;
}

/* Lenker på mørk bunn skal lysne, ikke mørkne, ved hover. */
.cfx-verksted .cfx-lenke:hover,
.cfx-tjenesteside .cfx-lenke:hover,
.cfx-kampanje .cfx-lenke:hover,
.cfx-verksted-kontakt .cfx-lenke:hover,
.cfx-hero .cfx-lenke:hover {
	color: #fff;
	border-bottom-color: currentColor;
}

/* Overskrifter og avsnitt som ligger rett i en seksjon skal midtstilles som
   resten av innholdet. Egne margin-regler slo ut auto-margin fra .cfx.cfx > *. */
.cfx.cfx > h2[class],
.cfx.cfx > h3[class],
.cfx.cfx > h4[class],
.cfx.cfx > p[class] {
	margin-inline: auto;
	width: 100%;
}

/* Seksjoner som selv er flex eller grid skal beholde sin egen plassering. */
.cfx-verksted-kontakt.cfx.cfx > p[class],
.cfx-bedrift.cfx.cfx > p[class],
.cfx-hero.cfx.cfx > p[class],
.cfx-priser.cfx.cfx > p[class] {
	width: auto;
	margin-inline: 0;
}

/* Verkstedvalget på tjenestesidene: gruppert per region, én kompakt rad hver */
/* Områdesidene har få verksteder, så der ligger de ved siden av hverandre
   i full bredde. Tjenestesidene lister alle elleve og beholder spaltene. */
/* Har man valgt ett sted, står bare én gruppe igjen, og en smal spalte med
   alt under hverandre sløser bort bredden. Da legges verkstedene ved siden av
   hverandre – samme form som områdesidene bruker hele tiden. */
.cfx-tjenesteside-verksteder--bredt .cfx-verksteder__regioner,
.cfx-tjenesteside-verksteder.har-sted .cfx-verksteder__regioner {
	columns: auto;
	column-count: 1;
	display: grid;
	grid-template-columns: 1fr;
	gap: calc(var(--cfx-skala) * 1rem);
}

.cfx-tjenesteside-verksteder--bredt .cfx-region ul,
.cfx-tjenesteside-verksteder.har-sted .cfx-region ul {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
	gap: calc(var(--cfx-skala) * 0.9rem);
}

/* Spalten er smal, så raden brytes: navn, status og telefon på én linje,
   pris og knapp på neste. Før lå alt på én linje, og navnefeltet krympet til
   null fordi flex: 1 med min-width: 0 lot det forsvinne helt. */
.cfx.cfx-tjenesteside-verksteder.cfx .cfx-region li,
.cfx-tjenesteside-verksteder.cfx.cfx .cfx-region li {
	display: flex;
	flex-wrap: wrap;
	align-content: start;
	align-items: center;
	gap: calc(var(--cfx-skala) * 0.4rem) calc(var(--cfx-skala) * 0.75rem);
}

.cfx-tjenesteside-verksteder--bredt.cfx.cfx .cfx-region li,
.cfx-tjenesteside-verksteder.har-sted.cfx.cfx .cfx-region li {
	padding: calc(var(--cfx-skala) * 0.9rem);
	border: 1px solid var(--cfx-kant);
	border-bottom: 1px solid var(--cfx-kant);
	border-radius: calc(var(--cfx-radius) * 0.6);
	background: #fff;
}


.cfx-tjenesteside-verksteder .cfx-region__handling { display: flex; }


/* FAQ: hele kortet er klikkbart, og listen får en lesbar bredde */
.cfx-verksted-faq .cfx-faq__liste,
.cfx-tjeneste-faq .cfx-faq__liste {
	max-width: calc(var(--cfx-skala) * 44rem);
	margin-inline: auto;
}

.cfx-tjeneste-faq { background: #fff; }

.cfx .cfx-faq__punkt {
	padding: 0;
}

.cfx .cfx-faq__punkt summary {
	padding: calc(var(--cfx-skala) * 0.95rem) calc(var(--cfx-skala) * 1.1rem);
}

.cfx .cfx-faq__punkt > p {
	margin: 0 calc(var(--cfx-skala) * 1.1rem);
	padding: calc(var(--cfx-skala) * 0.85rem) 0 calc(var(--cfx-skala) * 1.05rem);
	border-top: 1px solid var(--cfx-kant);
}

.cfx .cfx-faq__punkt[open] summary {
	padding-bottom: calc(var(--cfx-skala) * 0.6rem);
}

/* Luft under seksjonsoverskrifter som står alene */
.cfx.cfx > h2[class] {
	margin-bottom: calc(var(--cfx-skala) * 1.25rem);
}

/* Hele nabokortet er lenken, så «Se verkstedet» trenger ingen egen strek. */
.cfx .cfx-naboer__liste a:hover .cfx-lenke {
	border-bottom-color: transparent;
	color: var(--cfx-gronn-lys);
}

.cfx .cfx-naboer__liste a:hover .cfx-pil { transform: translateX(3px); }

/* Lenker og knapper skal bare dekke sin egen tekst, ikke hele bredden. */
.cfx .cfx-lenke,
.cfx .cfx-knapp,
.cfx .cfx-region__sted,
.cfx .cfx-region__tlf,
.cfx .cfx-naboer__navn,
.cfx .cfx-kort__tittel a,
.cfx .cfx-tjenesterad__navn a {
	width: fit-content;
	max-width: 100%;
}

/* Unntak: knappene som med vilje går i full bredde på mobil. */
@media (max-width: 680px) {
	.cfx .cfx-velger__knapp,
	.cfx-kampanje__handling .cfx-knapp,
	.cfx-faq__handling .cfx-knapp,
	.cfx-tillit__handling .cfx-knapp,
	.cfx-bedrift .cfx-knapp,
	.cfx-verksted__handling .cfx-knapp,
	.cfx-tjenesteside__handling .cfx-knapp { width: 100%; }
}

.cfx .cfx-faktaliste a { width: fit-content; max-width: 100%; }

.cfx .cfx-faktaliste li > :not(.cfx-faktaliste__ikon):not(.cfx-faktaliste__tittel) {
	font-size: calc(var(--cfx-skala) * 0.95rem);
	color: #55605a;
}

/* FAQ-seksjonene har smalere innhold, og overskriften følger samme bredde. */
.cfx-verksted-faq.cfx.cfx > .cfx-hode__tittel,
.cfx-tjeneste-faq.cfx.cfx > .cfx-hode__tittel {
	max-width: calc(var(--cfx-skala) * 44rem);
	text-align: center;
}

/* Malens rad legger på egen luft over og under. Seksjonene styrer selv. */
body:has(.cfx-verksted) #verksted.l-section,
body:has(.cfx-tjenesteside) #tjeneste.l-section {
	padding-block: 0;
}

body:has(.cfx-verksted) #verksted.l-section > .l-section-h,
body:has(.cfx-tjenesteside) #tjeneste.l-section > .l-section-h {
	padding-block: 0;
	max-width: none;
}

/* Bilkonto-blokken: innholdet beholder innholdsbredden, men den grønne
   flaten går helt ut til kanten. */
.l-section.carfix-bilkonto {
	background: var(--color-content-primary, #2b452f);
}

.l-section.carfix-bilkonto > .l-section-overlay { display: none; }

/* Innholdet står smalere enn resten, så blokken ikke virker overdimensjonert. */
.l-section.carfix-bilkonto > .l-section-h {
	max-width: calc(var(--cfx-skala, 0.85) * 66rem);
	margin-inline: auto;
}

/* Naboseksjonen ligger etter en mørk seksjon og trenger litt mer luft over. */
.cfx-naboer {
	padding-top: calc(var(--cfx-skala) * 3rem);
}

/* Malens rader rundt seksjonene skal ikke legge på egen luft. */
.l-section:has(> .l-section-h .cfx) {
	padding-block: 0;
}

.l-section:has(> .l-section-h .cfx) > .l-section-h {
	padding-block: 0;
	max-width: none;
}

/* Slik foregår det */
.cfx-steg { background: var(--cfx-flate); }

.cfx .cfx-steg__liste {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
	gap: calc(var(--cfx-skala) * 1rem);
}

.cfx .cfx-steg__liste li {
	display: grid;
	grid-template-columns: auto 1fr;
	align-items: center;
	align-content: start;
	gap: calc(var(--cfx-skala) * 0.6rem) calc(var(--cfx-skala) * 0.85rem);
	padding: calc(var(--cfx-skala) * 1.2rem) calc(var(--cfx-skala) * 1.3rem);
	background: #fff;
	border: 1px solid var(--cfx-kant);
	border-radius: var(--cfx-radius);
}

.cfx-steg__nr {
	display: grid;
	place-items: center;
	width: calc(var(--cfx-skala) * 2.2rem);
	height: calc(var(--cfx-skala) * 2.2rem);
	border-radius: 8px;
	background: var(--cfx-gronn);
	color: var(--cfx-gul);
	font-size: calc(var(--cfx-skala) * 0.95rem);
	font-weight: 700;
}

.cfx-steg__tittel { font-weight: 700; color: var(--cfx-tittel); }

.cfx-steg__tekst {
	grid-column: 1 / -1;
	font-size: calc(var(--cfx-skala) * 0.95rem);
	line-height: 1.5;
	color: #55605a;
}

.cfx .cfx-steg__merknad {
	margin-top: calc(var(--cfx-skala) * 1rem);
	font-size: calc(var(--cfx-skala) * 0.9rem);
	color: #6d6d6d;
}

/* Footeren har hvit bunnfarge, som ga en hvit stripe over den grønne delen. */
.l-footer { background: var(--color-content-primary, #2b452f); }

.cfx .cfx-faktaliste a {
	color: var(--cfx-gronn);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.cfx .cfx-naboer__mer {
	display: flex;
	justify-content: center;
	margin-top: calc(var(--cfx-skala) * 1.5rem);
}

.cfx-naboer__mer .cfx-knapp:hover .cfx-pil { transform: translateX(3px); }
.cfx-naboer__mer .cfx-pil { transition: transform 0.15s; }


/* Verkstedvelgeren på tjenestesidene: navn, telefon og knapp på én linje. */
.cfx-tjenesteside-verksteder .cfx-region__rad {
	flex: 1 1 100%;
	display: flex;
	align-items: center;
	/* Navnet til venstre, åpent/stengt til høyre. */
	justify-content: space-between;
	gap: calc(var(--cfx-skala) * 0.5rem);
	min-width: 0;
}

.cfx-tjenesteside-verksteder .cfx-region__tlf {
	white-space: nowrap;
	flex: 0 1 100%;
	margin-right: auto;
}

.cfx-tjenesteside-verksteder .cfx-region__sted {
	flex: 0 1 auto;
	min-width: 0;
}


.cfx .cfx-naboer__liste {
	grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr));
}


/* Lokal tekst */
.cfx-lokaltekst { background: #fff; }

.cfx .cfx-lokaltekst__innhold p {
	max-width: 58ch;
	margin-block: 0 calc(var(--cfx-skala) * 0.9rem);
	font-size: calc(var(--cfx-skala) * 1.05rem);
	line-height: 1.7;
}
.cfx .cfx-lokaltekst__innhold p:last-child { margin-bottom: 0; }

/* Teksten står inntil en strek, så den leses som en avdeling for seg
   og ikke som et avsnitt som flyter i tomrommet. */
.cfx-lokaltekst__innhold {
	padding-left: clamp(1rem, 2vw, 1.75rem);
	border-left: 1px solid var(--cfx-kant);
}
.cfx-lokaltekst .cfx-hode__tittel { margin-top: 0; }

/* Den lokale teksten står ved siden av et bilde fra verkstedet. */
.cfx-lokaltekst {
	display: grid;
	grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
	gap: clamp(1.5rem, 5vw, 4rem);
	align-items: start;
	padding-inline: max(clamp(calc(var(--cfx-skala) * 1rem), 4vw, calc(var(--cfx-skala) * 3rem)), (100% - var(--cfx-bredde)) / 2);
}

.cfx.cfx-lokaltekst > * { max-width: none; margin-inline: 0; }

@container (max-width: 900px) {
	.cfx-lokaltekst { grid-template-columns: 1fr; }
	.cfx-lokaltekst__innhold { padding-left: 0; border-left: 0; }
}

/* Mobil: trekkspillraden skal ikke stikke utenfor, og alle knapper skal være
   store nok å treffe med tommelen. */
@media (max-width: 680px) {
	/* På telefon får ikke alt plass på én linje. Navnet og pilen står øverst,
	   pris, tid og merket på linjen under — to linjer, ikke fire. */
	.cfx .cfx-utvid > summary { row-gap: calc(var(--cfx-skala) * 0.35rem); }

	.cfx .cfx-utvid .cfx-tjenesterad__navn { flex: 1 1 auto; }


	.cfx .cfx-knapp { min-height: 44px; }
	.cfx .cfx-region__tlf,
	.cfx .cfx-lenke { min-height: 24px; }
}

/* «Sjekk bilen din» skal følge samme bredde, skala og hjørner som seksjonene. */
.cfx-widget .cfsb {
	--cfsb-radius: 10px;
	padding-inline: max(clamp(calc(0.85 * 1rem), 4vw, calc(0.85 * 3rem)), (100% - 1440px) / 2);
	padding-block: clamp(2rem, 3.6vw, 3.25rem);
}

.cfx-widget .cfsb__inner,
.cfx-widget .cfsb__result {
	max-width: none;
}

.cfx-widget .cfsb__title {
	font-size: clamp(1.4rem, 2.2vw, 1.85rem);
}

.cfx-widget .cfsb__lead {
	font-size: 0.95rem;
}

.cfx-widget .cfsb__card {
	border-radius: 14px;
}

/* ===========================================================================
   Verkstedoversikt
   Siden på /verksteder/ som erstatter kartsøket. Listen bygges av
   verkstedsidene og grupperes på by. Filtrene skjuler rader i nettleseren.
   ======================================================================== */

.cfx-oversikt {
	background: var(--cfx-flate);
}

/* Overskrift og ingress til venstre, filteret ved siden av – ikke under, så
   filteret er synlig uten å rulle. */
.cfx .cfx-oversikt__topp {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	align-items: center;
	gap: calc(var(--cfx-skala) * 1.5rem) calc(var(--cfx-skala) * 2.5rem);
}

.cfx .cfx-oversikt__intro {
	display: flex;
	flex-direction: column;
	gap: calc(var(--cfx-skala) * 0.75rem);
}

.cfx.cfx .cfx-oversikt__tittel {
	margin: 0;
	font-size: clamp(calc(var(--cfx-skala) * 1.9rem), 3.4vw, calc(var(--cfx-skala) * 2.9rem));
	line-height: 1.1;
	color: var(--cfx-tittel);
}

.cfx .cfx-oversikt__ingress {
	/* Ingen egen breddebegrensning: spalten i rutenettet holder allerede
	   linjelengden nede. */
	max-width: none;
	margin: 0;
	font-size: calc(var(--cfx-skala) * 1.125rem);
	line-height: 1.55;
}

@media (max-width: 900px) {
	.cfx .cfx-oversikt__topp {
		grid-template-columns: 1fr;
	}
}

/* Filterrad. Grønn flate så den skiller seg fra den lyse bunnen – hvit boks
   på #eeebe1 var nesten usynlig. Flex og ikke grid: med to nedtrekkslister
   i et tre-spalters rutenett stod den tredje spalten tom til høyre. */
.cfx .cfx-oversikt__filter {
	display: flex;
	flex-wrap: wrap;
	align-items: end;
	gap: calc(var(--cfx-skala) * 0.9rem);
	margin: 0;
	padding: calc(var(--cfx-skala) * 1.5rem);
	border-radius: var(--cfx-radius);
	background: var(--cfx-gronn);
	box-shadow: 0 12px 32px -16px rgba(31, 42, 32, 0.55);
}

.cfx .cfx-oversikt__filter .cfx-felt > span {
	color: #fff;
}

.cfx .cfx-oversikt__filter .cfx-felt select {
	border-color: transparent;
}

/* Grønn ring forsvinner mot grønn bunn. */
.cfx .cfx-oversikt__filter .cfx-felt select:focus-visible {
	outline-color: var(--cfx-gul);
}

.cfx .cfx-oversikt__knapper {
	display: flex;
	flex-wrap: wrap;
	flex-basis: 100%;
	gap: calc(var(--cfx-skala) * 0.5rem);
}

/* Veier tyngre enn .cfx-oversikt .cfx-knapp--ramme, som er laget for hvit flate. */
.cfx-oversikt .cfx-oversikt__filter .cfx-knapp--ramme {
	border-color: #fff;
	color: #fff;
}

.cfx-oversikt .cfx-oversikt__filter .cfx-knapp--ramme:hover,
.cfx-oversikt .cfx-oversikt__filter .cfx-knapp--ramme:focus-visible {
	background: #fff;
	border-color: #fff;
	color: var(--cfx-gronn);
	box-shadow: none;
}

.cfx-oversikt .cfx-oversikt__filter .cfx-knapp--gul:hover,
.cfx-oversikt .cfx-oversikt__filter .cfx-knapp--gul:focus-visible {
	box-shadow: 0 0 0 3px rgba(255, 241, 0, 0.3);
}

.cfx .cfx-oversikt__knapper .cfx-knapp {
	flex: 1 1 auto;
}

/* På mobil velger man by. «Finn nærmeste» ved siden av ble et ekstra valg
   som sjelden ga noe – telefonen må først dele posisjon (29. oktober 2026). */
@media (max-width: 600px) {
	.cfx .cfx-oversikt__knapper [data-cfx-posisjon],
	.cfx .cfx-verksteder__verktoy [data-cfx-posisjon] { display: none; }
	/* Kartet er lite nyttig på telefon – listen med by og telefon er raskere.
	   Uten knappene trengs ikke raden (29. oktober 2026). */
	.cfx .cfx-oversikt__knapper [data-cfx-kartknapp],
	.cfx .cfx-oversikt__knapper { display: none; }
}

.cfx .cfx-felt {
	display: flex;
	flex-direction: column;
	gap: calc(var(--cfx-skala) * 0.3rem);
	flex: 1 1 12rem;
	min-width: 10rem;
}

.cfx .cfx-felt > span {
	font-size: calc(var(--cfx-skala) * 0.875rem);
	font-weight: 600;
	color: var(--cfx-tittel);
}

/* Samme pil som i verkstedvelgeren på forsiden, i stedet for nettleserens egen. */
.cfx .cfx-felt select {
	width: 100%;
	height: 44px;
	padding: 0 calc(var(--cfx-skala) * 2.1rem) 0 calc(var(--cfx-skala) * 0.85rem);
	line-height: 1;
	border: 1px solid var(--cfx-kant);
	border-radius: 10px;
	background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232b452f' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right calc(var(--cfx-skala) * 0.8rem) center / calc(var(--cfx-skala) * 1.1rem);
	color: var(--cfx-tittel);
	font-family: inherit;
	font-size: calc(var(--cfx-skala) * 1rem);
	appearance: none;
}

.cfx .cfx-felt select:focus-visible {
	outline: 3px solid var(--cfx-gronn);
	outline-offset: 2px;
}


/* Antall treff, med nullstilling ved siden av når et filter er i bruk. */
.cfx .cfx-oversikt__teller {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: calc(var(--cfx-skala) * 0.3rem) calc(var(--cfx-skala) * 0.9rem);
	margin-top: calc(var(--cfx-skala) * 1.5rem);
	font-size: calc(var(--cfx-skala) * 0.9375rem);
	font-weight: 600;
	color: var(--cfx-gronn);
}

.cfx .cfx-nullstill {
	padding: 0;
	border: 0;
	background: none;
	color: var(--cfx-tekst);
	font: inherit;
	font-weight: 500;
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}

.cfx .cfx-nullstill:hover {
	color: var(--cfx-gronn);
}

.cfx .cfx-nullstill[hidden] {
	display: none;
}

/* Kart */
.cfx .cfx-oversikt__kart[hidden] {
	display: none;
}

.cfx .cfx-oversikt__kart {
	height: clamp(15rem, 26vw, 22rem);
	margin-top: calc(var(--cfx-skala) * 1rem);
	border: 1px solid var(--cfx-kant);
	border-radius: var(--cfx-radius);
	overflow: hidden;
	background: #e8eae5;
}

/* Leaflet gir kartlagene z-index opptil 1000, og kartet la seg over
   toppfeltet (z-index 100) når man rullet. isolation holder tallene inne i
   kartet, så toppfeltet alltid ligger øverst – uten å løfte det til 1001. */
.leaflet-container {
	isolation: isolate;
}

/* «Hold ⌘ og rull for å zoome» – legger seg over kartet når noen ruller
   uten tasten, og forsvinner igjen. Klikk går rett gjennom. */
.leaflet-container .cfx-kart-hint {
	position: absolute;
	inset: 0;
	z-index: 1000;
	display: grid;
	place-items: center;
	padding: 1rem;
	background: rgba(31, 42, 32, 0.55);
	color: #fff;
	font-size: calc(var(--cfx-skala) * 1.1rem);
	font-weight: 600;
	text-align: center;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.2s ease;
}
.leaflet-container .cfx-kart-hint.er-synlig { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
	.leaflet-container .cfx-kart-hint { transition: none; }
}

.cfx .cfx-oversikt__kart .leaflet-container {
	font: inherit;
}

.cfx-markor span {
	display: block;
	width: 18px;
	height: 18px;
	margin: 4px;
	border: 3px solid var(--cfx-gronn, #2b452f);
	border-radius: 50% 50% 50% 0;
	transform: rotate(-45deg);
	background: var(--cfx-gul, #fff100);
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
}

/* Kortene: ett rutenett for alle verkstedene, byen som merkelapp på kortet.
   Oppbygningen følger det folk spør om i rekkefølge: hvor er det, er det åpent,
   hva heter det, hvordan når jeg dem, hva gjør jeg nå. */
.cfx .cfx-oversikt__liste {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr));
	gap: calc(var(--cfx-skala) * 0.85rem);
	margin-block: calc(var(--cfx-skala) * 1.25rem) 0;
	padding: 0;
	list-style: none;
}

.cfx .cfx-oversikt__rad {
	display: flex;
	flex-direction: column;
	padding: calc(var(--cfx-skala) * 1.1rem);
	border: 1px solid var(--cfx-kant);
	border-radius: var(--cfx-radius);
	background: #fff;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

/* Filtrene skjuler med klasse, ikke hidden – radene har display:flex. */
.cfx .cfx-oversikt__rad.er-skjult {
	display: none;
}

.cfx .cfx-oversikt__rad:hover {
	border-color: var(--cfx-gronn-lys);
}

.cfx .cfx-oversikt__rad.er-naermest {
	position: relative;
	border-color: var(--cfx-gronn);
	box-shadow: 0 0 0 2px var(--cfx-gronn);
}

/* By til venstre, åpent/stengt i høyre hjørne. Statusen er det eneste på
   kortet som endrer seg i løpet av dagen, så den står for seg selv. */
.cfx .cfx-oversikt__topplinje {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: calc(var(--cfx-skala) * 0.5rem);
	margin: 0 0 calc(var(--cfx-skala) * 0.7rem);
	min-height: calc(var(--cfx-skala) * 1.5rem);
}

.cfx .cfx-oversikt__by {
	font-size: calc(var(--cfx-skala) * 0.75rem);
	font-weight: 700;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--cfx-gronn-lys);
}

.cfx.cfx .cfx-oversikt__navn {
	margin: 0 0 calc(var(--cfx-skala) * 0.3rem);
	font-size: calc(var(--cfx-skala) * 1.25rem);
	line-height: 1.2;
	color: var(--cfx-tittel);
}

.cfx .cfx-oversikt__navn a {
	color: inherit;
	text-decoration: none;
}

.cfx .cfx-oversikt__navn a:hover {
	text-decoration: underline;
}

/* Adresse og åpningstid er oppslagsinformasjon: tett, dempet, lett å hoppe
   over for den som allerede vet hvor verkstedet ligger. */
.cfx .cfx-oversikt__adresse,
.cfx .cfx-oversikt__tid {
	margin: 0;
	font-size: calc(var(--cfx-skala) * 0.9375rem);
	line-height: 1.5;
	color: var(--cfx-tekst);
}

.cfx .cfx-oversikt__tid {
	opacity: 0.72;
}

.cfx .cfx-merkerad {
	display: flex;
	flex-wrap: wrap;
	gap: calc(var(--cfx-skala) * 0.35rem);
	/* margin-block, ikke margin: raden står som direkte barn av seksjonen
	   på verkstedsiden, og `margin: … 0 0` slo ut margin-inline: auto. */
	margin-block: calc(var(--cfx-skala) * 0.55rem) 0;
	padding: 0;
	list-style: none;
}

.cfx .cfx-merkerad--stor {
	margin-block-start: calc(var(--cfx-skala) * 1.25rem);
}

/* Under hårstreken: det som er greit å vite, men ikke det man kom for.
   Åpent/stengt hører hjemme her, ikke blant hovedopplysningene. */
.cfx .cfx-oversikt__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: calc(var(--cfx-skala) * 0.4rem) calc(var(--cfx-skala) * 1.25rem);
	margin: calc(var(--cfx-skala) * 0.9rem) 0 0;
	padding-top: calc(var(--cfx-skala) * 0.75rem);
	border-top: 1px solid var(--cfx-kant);
	font-size: calc(var(--cfx-skala) * 0.9375rem);
}

.cfx .cfx-oversikt__tlf {
	display: inline-flex;
	align-items: center;
	gap: calc(var(--cfx-skala) * 0.4rem);
	width: fit-content;
	color: var(--cfx-tittel);
	font-weight: 600;
	text-decoration: none;
}

.cfx .cfx-oversikt__tlf:hover {
	color: var(--cfx-gronn);
	text-decoration: underline;
}

.cfx .cfx-oversikt__tlf .cfx-ikon {
	flex: 0 0 auto;
	width: calc(var(--cfx-skala) * 1.05rem);
	height: calc(var(--cfx-skala) * 1.05rem);
	color: var(--cfx-gronn-lys);
}

/* Telefon og veibeskrivelse i hver sin ende av samme rad: to måter å nå fram
   på, på samme nivå. Begge holder tekstbredden, så understrekingen ikke
   strekker seg over kortet. */
.cfx .cfx-oversikt__meta .cfx-lenke {
	width: fit-content;
	font-size: calc(var(--cfx-skala) * 0.875rem);
}

.cfx .cfx-oversikt__handling {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: calc(var(--cfx-skala) * 0.45rem);
	margin-top: auto;
	padding-top: calc(var(--cfx-skala) * 0.9rem);
}

.cfx .cfx-oversikt__handling .cfx-knapp {
	flex: 1 1 auto;
}

/* «Nærmest deg» eller «Ditt verksted» på kanten øverst på kortet i
   verkstedoversikten. Den tar ingen plass, så kortet står i linje med
   naboene på samme rad. */
.cfx .cfx-oversikt__merke {
	position: absolute;
	top: 0;
	left: calc(var(--cfx-skala) * 1.1rem);
	transform: translateY(-50%);
	white-space: nowrap;
	padding: calc(var(--cfx-skala) * 0.2rem) calc(var(--cfx-skala) * 0.7rem);
	border-radius: 999px;
	background: var(--cfx-gronn);
	color: #fff;
	font-size: calc(var(--cfx-skala) * 0.75rem);
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

@media (max-width: 680px) {
	.cfx .cfx-oversikt__filter .cfx-felt {
		flex-basis: 100%;
	}

	.cfx .cfx-oversikt__handling .cfx-knapp {
		flex: 1 1 auto;
	}
}

/* ===========================================================================
   Åpent eller stengt
   Ett merke, brukt på forsiden, i oversikten, på verkstedsiden og i
   verkstedvelgeren. Grønn prikk når det er åpent, rød når det er stengt.
   Peker eller tabber du deg til den, står det når verkstedet åpner igjen.
   ======================================================================== */

.cfx .cfx-status,
.cfx-topp .cfx-status {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: calc(var(--cfx-skala) * 0.4rem);
	flex: 0 0 auto;
	cursor: help;
	font-size: calc(var(--cfx-skala) * 0.9375rem);
	line-height: 1.3;
	color: var(--cfx-stengt);
}

.cfx .cfx-status.er-apent,
.cfx-topp .cfx-status.er-apent {
	color: var(--cfx-apen);
}

.cfx .cfx-status__prikk,
.cfx-topp .cfx-status__prikk {
	flex: 0 0 auto;
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: currentColor;
}

/* Pulsen viser at det gjelder akkurat nå, ikke en fast åpningstid. */
.cfx .cfx-status.er-apent .cfx-status__prikk,
.cfx-topp .cfx-status.er-apent .cfx-status__prikk {
	box-shadow: 0 0 0 0 rgba(46, 139, 64, 0.5);
	animation: cfx-puls 2.4s ease-out infinite;
}

@keyframes cfx-puls {
	70% { box-shadow: 0 0 0 7px rgba(46, 139, 64, 0); }
	100% { box-shadow: 0 0 0 0 rgba(46, 139, 64, 0); }
}

@media (prefers-reduced-motion: reduce) {
	.cfx .cfx-status.er-apent .cfx-status__prikk { animation: none; }
}

.cfx .cfx-status__tekst {
	font-weight: 600;
}

/* Uten pekeren å holde over finnes ingen boble. På berøringsskjerm står
   detaljen derfor ved prikken, dempet – «Åpner i morgen kl. 07:30»
   (29. oktober 2026). Teksten kommer fra cfx_status(). */
.cfx .cfx-status__beroring { display: none; }
@media (hover: none) {
	.cfx .cfx-status__beroring {
		display: inline;
		font-size: calc(var(--cfx-skala) * 0.8rem);
		font-weight: 400;
		color: var(--cfx-tekst-dempet, #6b6b6b);
	}
}
/* På smal skjerm får detaljen egen linje under navnet, så navn og nummer
   ikke brytes. */
@media (hover: none) and (max-width: 600px) {
	.cfx-verksteder.cfx.cfx .cfx-region__rad { flex-wrap: wrap; row-gap: calc(var(--cfx-skala) * 0.15rem); }
	.cfx-verksteder.cfx.cfx .cfx-region__rad > .cfx-status { order: 10; flex-basis: 100%; }
}

/* Boblen er en delt komponent: statusmerket og adressen bruker den samme. */
.cfx .cfx-boble,
.cfx-topp .cfx-boble {
	position: absolute;
	bottom: calc(100% + 0.6rem);
	left: 0;
	z-index: 5;
	width: max-content;
	max-width: 16rem;
	padding: calc(var(--cfx-skala) * 0.5rem) calc(var(--cfx-skala) * 0.7rem);
	border-radius: 8px;
	background: var(--cfx-morkt);
	color: #fff;
	font-size: calc(var(--cfx-skala) * 0.875rem);
	font-weight: 400;
	line-height: 1.4;
	text-align: left;
	opacity: 0;
	visibility: hidden;
	transform: translateY(4px);
	transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
	pointer-events: none;
}

.cfx .cfx-boble::after {
	content: "";
	position: absolute;
	top: 100%;
	left: calc(var(--cfx-skala) * 0.8rem);
	border: 5px solid transparent;
	border-top-color: var(--cfx-morkt);
}

.cfx .cfx-status:hover .cfx-boble,
.cfx .cfx-status:focus-visible .cfx-boble,
.cfx .cfx-medboble:hover .cfx-boble,
.cfx .cfx-medboble:focus-visible .cfx-boble {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.cfx .cfx-status:focus-visible {
	outline: 3px solid var(--cfx-gronn);
	outline-offset: 3px;
	border-radius: 4px;
}

/* På mørk bakgrunn trenger boblen en annen flate. */
.cfx-snarveier .cfx-boble,
.cfx-verksteder .cfx-boble {
	background: #fff;
	color: var(--cfx-tekst);
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
}

.cfx-snarveier .cfx-boble::after,
.cfx-verksteder .cfx-boble::after {
	border-top-color: #fff;
}

/* I verkstedlisten står merket mellom navnet og telefonnummeret. */
.cfx .cfx-region__rad .cfx-status {
	margin-inline: calc(var(--cfx-skala) * 0.1rem) auto;
}

/* På verkstedsiden står det med tekst, foran adressen. */
.cfx .cfx-verksted__status .cfx-status {
	font-size: calc(var(--cfx-skala) * 1rem);
}

/* Beskjed om posisjon står rett under filterboksen, der knappen som utløser
   den er. Telleren over listen holder seg til antall treff. */
.cfx .cfx-oversikt__verktoy {
	display: flex;
	flex-direction: column;
	gap: calc(var(--cfx-skala) * 0.6rem);
}

.cfx .cfx-oversikt__melding {
	margin: 0;
	padding-inline: calc(var(--cfx-skala) * 0.2rem);
	font-size: calc(var(--cfx-skala) * 0.9375rem);
	line-height: 1.45;
	color: var(--cfx-gronn);
}

.cfx .cfx-oversikt__melding[hidden] {
	display: none;
}

/* Statusen som pille, der den skal leses på avstand – øverst på kortene i
   verkstedoversikten. Fargen bærer beskjeden, teksten bekrefter den. */
/* Prikken bærer fargen, teksten holder seg nøytral. En hel rød pille drar for
   mye oppmerksomhet til noe som bare er en opplysning. */
.cfx .cfx-status--pille {
	gap: calc(var(--cfx-skala) * 0.35rem);
	font-size: calc(var(--cfx-skala) * 0.75rem);
	color: var(--cfx-tekst);
	opacity: 0.7;
}

.cfx .cfx-status--pille .cfx-status__tekst {
	font-weight: 500;
}

.cfx .cfx-status--pille .cfx-status__prikk {
	width: 7px;
	height: 7px;
	background: var(--cfx-stengt);
}

.cfx .cfx-status--pille.er-apent .cfx-status__prikk {
	background: var(--cfx-apen);
}

.cfx .cfx-status--pille:hover,
.cfx .cfx-status--pille:focus-visible {
	opacity: 1;
}

/* Pillen står i høyre kant, så boblen må peke dit i stedet for mot venstre. */
.cfx .cfx-status--pille .cfx-boble {
	left: auto;
	right: 0;
}

.cfx .cfx-status--pille .cfx-boble::after {
	left: auto;
	right: calc(var(--cfx-skala) * 0.8rem);
}

/* Stedet er det som skiller kortene fra hverandre; «Carfix» er likt på alle
   elleve. Derfor bærer stedsnavnet vekten, og kjedenavnet står lett over. */
/* Klikkflaten følger teksten. Som flex-barn ville lenken ellers strukket seg
   over hele kortet, og man kunne treffe den langt til høyre for navnet. */
.cfx .cfx-oversikt__navn a {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: calc(var(--cfx-skala) * 0.05rem);
	width: fit-content;
	max-width: 100%;
}

.cfx .cfx-oversikt__kjede {
	font-size: calc(var(--cfx-skala) * 0.8125rem);
	font-weight: 500;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--cfx-tekst);
	opacity: 0.6;
}

.cfx .cfx-oversikt__sted {
	font-size: calc(var(--cfx-skala) * 1.4rem);
	font-weight: 700;
	line-height: 1.15;
}

/* ---------------------------------------------------------------------------
   Åpningstider, hover og fokus på kortene
   ------------------------------------------------------------------------ */

/* Dagene og klokkeslettet som to biter på samme linje. Øyet tar én porsjon om
   gangen i stedet for å lese «Mandag - Fredag 07:30 til 16:00» i ett strekk. */
.cfx .cfx-oversikt__tid {
	display: flex;
	flex-direction: column;
	gap: calc(var(--cfx-skala) * 0.1rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

.cfx .cfx-oversikt__tid li {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: calc(var(--cfx-skala) * 0.1rem) calc(var(--cfx-skala) * 0.6rem);
	font-size: calc(var(--cfx-skala) * 0.9375rem);
	line-height: 1.5;
}

.cfx .cfx-oversikt__dager {
	min-width: 9.5em;
	color: var(--cfx-tekst);
	opacity: 0.62;
}

.cfx .cfx-oversikt__klokke {
	color: var(--cfx-tekst);
	font-variant-numeric: tabular-nums;
}

/* Adresse og åpningstid: ikon til venstre, tekst til høyre, full farge.
   Erstatter den dempede utgaven over (28. oktober 2026). */
.cfx .cfx-oversikt__fakta {
	display: grid;
	gap: calc(var(--cfx-skala) * 0.55rem);
	margin-block: calc(var(--cfx-skala) * 0.6rem) 0;
}
.cfx .cfx-oversikt__adresse,
.cfx .cfx-oversikt__apning {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: start;
	gap: calc(var(--cfx-skala) * 0.6rem);
	margin: 0;
	font-size: calc(var(--cfx-skala) * 0.9375rem);
	line-height: 1.45;
	color: var(--cfx-tekst);
}
.cfx .cfx-oversikt__fakta .cfx-ikon {
	width: calc(var(--cfx-skala) * 1.1rem);
	height: calc(var(--cfx-skala) * 1.1rem);
	margin-top: 0.15em;
	color: var(--cfx-gronn-lys);
}
.cfx .cfx-oversikt__linje { display: block; }
.cfx .cfx-oversikt__fakta .cfx-oversikt__tid { opacity: 1; }
.cfx .cfx-oversikt__fakta .cfx-oversikt__tid li { font-size: inherit; line-height: inherit; }
.cfx .cfx-oversikt__fakta .cfx-oversikt__dager {
	min-width: 0;
	opacity: 1;
	color: var(--cfx-dempet);
}
.cfx .cfx-oversikt__fakta .cfx-oversikt__klokke { font-weight: 600; }

/* Telefon og veibeskrivelse er begge lenker og skal oppføre seg likt: samme
   fargeskift og samme understreking. Før hadde den ene text-decoration og den
   andre en bunnkant. */
.cfx .cfx-oversikt__tlf {
	border-bottom: 1px solid transparent;
	transition: color 0.15s, border-color 0.15s;
}

.cfx .cfx-oversikt__tlf:hover,
.cfx .cfx-oversikt__tlf:focus-visible {
	color: var(--cfx-gronn-lys);
	border-bottom-color: currentColor;
	text-decoration: none;
}

.cfx .cfx-oversikt__tlf:hover .cfx-ikon {
	color: currentColor;
}

/* «Om verkstedet» og «Se på kart» står på hvit flate. Rammeknappens vanlige
   hover er en lys tone, som blir usynlig der – her fylles den i stedet. */
.cfx-oversikt .cfx-knapp--ramme {
	border-color: var(--cfx-gronn);
	color: var(--cfx-gronn);
}

.cfx-oversikt .cfx-knapp--ramme:hover,
.cfx-oversikt .cfx-knapp--ramme:focus-visible {
	background: var(--cfx-gronn);
	border-color: var(--cfx-gronn);
	color: #fff;
	box-shadow: 0 0 0 3px rgba(96, 127, 101, 0.3);
}

.cfx-oversikt .cfx-knapp--gul:hover,
.cfx-oversikt .cfx-knapp--gul:focus-visible {
	box-shadow: 0 0 0 3px rgba(96, 127, 101, 0.35);
}

.cfx-oversikt .cfx-knapp:focus-visible {
	outline: 3px solid var(--cfx-gronn);
	outline-offset: 2px;
}

/* ===========================================================================
   Ringeliste
   Telefonnumrene i «Ring oss»-popupen, hentet fra verkstedsidene. Erstattet
   fire TablePress-tabeller og elleve harkodede butikk-ID-er.
   ======================================================================== */

.cfx-ringeliste {
	padding: clamp(calc(var(--cfx-skala) * 1.25rem), 3vw, calc(var(--cfx-skala) * 2rem));
}

.cfx.cfx .cfx-ringeliste__tittel {
	margin: 0 0 calc(var(--cfx-skala) * 1rem);
	font-size: calc(var(--cfx-skala) * 1.5rem);
	line-height: 1.2;
	color: var(--cfx-tittel);
}

.cfx .cfx-ringeliste__byer {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
	gap: calc(var(--cfx-skala) * 1.25rem) calc(var(--cfx-skala) * 2rem);
}

.cfx .cfx-ringeliste__bynavn {
	margin: 0 0 calc(var(--cfx-skala) * 0.45rem);
	padding-bottom: calc(var(--cfx-skala) * 0.35rem);
	border-bottom: 1px solid var(--cfx-kant);
	font-size: calc(var(--cfx-skala) * 0.75rem);
	font-weight: 700;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--cfx-gronn-lys);
}

.cfx .cfx-ringeliste__by ul {
	display: flex;
	flex-direction: column;
	gap: calc(var(--cfx-skala) * 0.35rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

.cfx .cfx-ringeliste__by li {
	display: flex;
	align-items: center;
	gap: calc(var(--cfx-skala) * 0.5rem);
	font-size: calc(var(--cfx-skala) * 1rem);
	line-height: 1.4;
}

.cfx .cfx-ringeliste__navn {
	color: var(--cfx-tittel);
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: color 0.15s, border-color 0.15s;
}

.cfx .cfx-ringeliste__navn:hover {
	color: var(--cfx-gronn);
	border-bottom-color: currentColor;
}

/* Nummeret skyves ut til høyre, så kolonnen er lett å skanne nedover. */
.cfx .cfx-ringeliste__tlf {
	margin-left: auto;
	color: var(--cfx-tittel);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: color 0.15s, border-color 0.15s;
}

.cfx .cfx-ringeliste__tlf:hover {
	color: var(--cfx-gronn);
	border-bottom-color: currentColor;
}

/* Faktakortene: hver opplysning er sin egen linje i stedet for prosa med
   lenker inni. Da brekker ingenting midt i «e-post» eller «Se veibeskrivelse». */
.cfx .cfx-faktaliste__tekst {
	line-height: 1.5;
}

.cfx .cfx-faktaliste__tekst p {
	margin: 0;
}

/* Fasilitetene: et lite bånd under faktakortene, i samme flate, ramme og
   runding som kortene, og bare så bredt som innholdet – midtstilt. Punkter
   mellom, uten ikoner og uten etikett; listen har aria-label for
   skjermlesere (valgt 28. oktober 2026). Dobbel .cfx og >, fordi
   «.cfx.cfx > ul { padding: 0 }» ellers tar paddingen. margin-block, ikke
   margin, så margin-inline: auto fra .cfx.cfx > * midtstiller den. */
.cfx.cfx > .cfx-fasiliteter {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	width: fit-content;
	row-gap: calc(var(--cfx-skala) * 0.3rem);
	margin-block: calc(var(--cfx-skala) * 1.1rem) 0;
	padding: calc(var(--cfx-skala) * 0.7rem) calc(var(--cfx-skala) * 1.6rem);
	list-style: none;
	background: var(--cfx-flate-lys);
	border: 1px solid var(--cfx-kant);
	border-radius: 999px;
}
.cfx .cfx-fasiliteter li {
	display: inline-flex;
	align-items: center;
	font-size: calc(var(--cfx-skala) * 0.95rem);
	font-weight: 600;
	color: var(--cfx-tittel);
}
.cfx .cfx-fasiliteter li + li::before {
	content: "·";
	margin-inline: calc(var(--cfx-skala) * 0.8rem);
	color: var(--cfx-kant-kort);
	font-weight: 700;
}
/* På telefon brytes linjen, og et punkt først på en linje ser feil ut.
   Der er det bare luft mellom, og båndet har vanlige hjørner. */
@media (max-width: 750px) {
	.cfx.cfx > .cfx-fasiliteter {
		column-gap: calc(var(--cfx-skala) * 1.2rem);
		border-radius: var(--cfx-radius);
	}
	.cfx .cfx-fasiliteter li + li::before { content: none; }
}

/* Temaet understreker lenker i brødtekst og vinner over text-decoration:
   none her. Vår egen ramme under teksten kom på toppen av den, så lenken fikk
   to streker ved hover. Vi bruker understrekingen i stedet for å kjempe mot
   den: lys i hvile, full farge når man peker. */
.cfx .cfx-faktaliste__lenke {
	color: var(--cfx-tittel);
	font-weight: 600;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);
	text-underline-offset: 0.22em;
	border-bottom: 0;
	overflow-wrap: anywhere;
	transition: color 0.15s, text-decoration-color 0.15s;
}

.cfx .cfx-faktaliste__lenke:hover,
.cfx .cfx-faktaliste__lenke:focus-visible {
	color: var(--cfx-gronn);
	text-decoration-color: currentColor;
}

.cfx .cfx-faktaliste .cfx-lenke {
	width: fit-content;
	margin-top: calc(var(--cfx-skala) * 0.15rem);
	font-size: calc(var(--cfx-skala) * 0.9375rem);
}

/* Lenken står i teksten, ikke på egen linje. «e‑post» har hardt bindestrek,
   så ordet ikke kan deles, og e-postadressen får lov til å brekke i stedet. */
.cfx .cfx-faktaliste__lenke {
	display: inline;
	overflow-wrap: anywhere;
}

/* Snarveiflisene: navnet på samme linje som ikonet, merket til høyre. */
/* Adressen på verkstedsiden: egen linje, og selve adressen er veien til
   veibeskrivelsen. Boblen forteller hva som skjer om man trykker. */
.cfx .cfx-verksted__adresse {
	margin: calc(var(--cfx-skala) * 0.5rem) 0 0;
}

.cfx .cfx-medboble {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: calc(var(--cfx-skala) * 0.45rem);
	width: fit-content;
	max-width: 100%;
	color: inherit;
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: color 0.15s, border-color 0.15s;
}

.cfx .cfx-medboble .cfx-ikon {
	flex: 0 0 auto;
	width: calc(var(--cfx-skala) * 1.05rem);
	height: calc(var(--cfx-skala) * 1.05rem);
	opacity: 0.8;
}

.cfx .cfx-medboble:hover,
.cfx .cfx-medboble:focus-visible {
	border-bottom-color: currentColor;
}

.cfx .cfx-medboble:focus-visible {
	outline: 3px solid currentColor;
	outline-offset: 4px;
	border-radius: 2px;
}

/* ===========================================================================
   Tjenesteoversikt
   Siden på /verkstedstjenester/ og /dekk-og-felg/. Bygget av tjenestesidene,
   så pris og tid aldri kan komme ut av takt med dem.
   ======================================================================== */

.cfx-tjenesteoversikt {
	background: var(--cfx-flate);
}

/* Teksten er det viktigste her, ikke bildet. Derfor et liggende kort med lite
   bilde til venstre: flere tjenester per rad, og navnet og beskrivelsen får
   plassen. */
.cfx .cfx-tjenesteoversikt__liste {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 30rem), 1fr));
	gap: calc(var(--cfx-skala) * 1rem);
	margin-block: calc(var(--cfx-skala) * 1.25rem) 0;
	padding: 0;
	list-style: none;
}

/* Hele kortet er inngangen til tjenesten. Tittelen er lenken, og et belegg
   over kortet gjør resten klikkbart uten å legge en ekstra lenke i koden. */
.cfx .cfx-tjenestekort {
	position: relative;
	display: flex;
	gap: calc(var(--cfx-skala) * 1.1rem);
	overflow: hidden;
	padding: calc(var(--cfx-skala) * 1.1rem);
	border: 1px solid var(--cfx-kant);
	border-radius: var(--cfx-radius);
	background: #fff;
	transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.cfx .cfx-tjenestekort:hover {
	border-color: var(--cfx-gronn-lys);
	box-shadow: 0 6px 18px rgba(31, 42, 32, 0.1);
	transform: translateY(-2px);
}

.cfx .cfx-tjenestekort:focus-within {
	border-color: var(--cfx-gronn);
	box-shadow: 0 0 0 3px rgba(96, 127, 101, 0.3);
}

/* Belegget må ligge over søsknene sine. Uten z-index males beskrivelsen og
   lenken over det, fordi de kommer etter tittelen i dokumentet – og da er
   bare toppen av kortet klikkbar. */
.cfx .cfx-tjenestekort__tittel a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

.cfx .cfx-tjenestekort__media {
	position: relative;
	z-index: 2;
}

.cfx .cfx-tjenestekort__media {
	flex: 0 0 auto;
	display: block;
	width: calc(var(--cfx-skala) * 12rem);
	align-self: flex-start;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border-radius: 10px;
}

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

.cfx .cfx-tjenestekort__innhold {
	display: flex;
	flex-direction: column;
	gap: calc(var(--cfx-skala) * 0.35rem);
	flex: 1 1 auto;
	min-width: 0;
}

.cfx.cfx .cfx-tjenestekort__tittel {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: calc(var(--cfx-skala) * 0.2rem) calc(var(--cfx-skala) * 0.5rem);
	margin: 0;
	font-size: calc(var(--cfx-skala) * 1.25rem);
	font-weight: 700;
	line-height: 1.25;
	min-height: calc(var(--cfx-skala) * 1.25rem * 1.25 * 2);
	color: var(--cfx-tittel);
}

.cfx .cfx-tjenestekort__tittel a {
	width: fit-content;
	color: inherit;
	text-decoration: none;
}

.cfx .cfx-tjenestekort__tittel a:hover {
	text-decoration: underline;
}

.cfx .cfx-tjenestekort__tekst {
	position: relative;
	z-index: 2;
	pointer-events: none;
	display: -webkit-box;
	-webkit-line-clamp: 4;
	-webkit-box-orient: vertical;
	overflow: hidden;
	margin: 0;
	font-size: calc(var(--cfx-skala) * 0.9375rem);
	line-height: 1.5;
	color: var(--cfx-tekst);
	opacity: 0.78;
}




.cfx .cfx-tjenestekort__handling {
	margin: 0;
	margin-top: auto;
	padding-top: calc(var(--cfx-skala) * 0.6rem);
}

.cfx .cfx-tjenestekort__handling .cfx-lenke {
	position: relative;
	z-index: 2;
	pointer-events: none;
}

.cfx .cfx-tjenestekort:hover .cfx-lenke {
	color: var(--cfx-gronn);
	border-bottom-color: currentColor;
}

.cfx .cfx-tjenestekort:hover .cfx-lenke .cfx-pil {
	transform: translateX(3px);
}

/* Kortene i en rad er like høye; innholdet skal likevel ligge øverst. */
.cfx .cfx-tjenestekort__innhold {
	justify-content: flex-start;
}

.cfx .cfx-tjenestekort__handling .cfx-lenke {
	width: fit-content;
	font-size: calc(var(--cfx-skala) * 0.9375rem);
}

/* På den mørke toppseksjonen bærer ikke rød og grønn tekst nok kontrast.
   Pillen får en flate å stå på, og prikken beholder fargen. */
.cfx-verksted .cfx-status--pille,
.cfx-tjenesteside .cfx-status--pille {
	padding: calc(var(--cfx-skala) * 0.35rem) calc(var(--cfx-skala) * 0.8rem);
	border: 1px solid rgba(255, 255, 255, 0.28);
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.16);
	font-size: calc(var(--cfx-skala) * 0.85rem);
	opacity: 1;
}

/* Teksten sto i åpen-grønn på mørk grønn bunn og var nesten ikke til å lese
   – 1,4:1. Fargen kom fra .cfx .cfx-status.er-apent, som veier tyngre enn
   .cfx-verksted .cfx-status--pille. Her gjentas er-apent, så vekten holder.
   Prikken beholder fargen; det er den som bærer beskjeden. */
.cfx-verksted .cfx-status--pille,
.cfx-verksted .cfx-status--pille.er-apent,
.cfx-verksted .cfx-status--pille.er-apent .cfx-status__tekst,
.cfx-verksted .cfx-status--pille .cfx-status__tekst,
.cfx-tjenesteside .cfx-status--pille,
.cfx-tjenesteside .cfx-status--pille.er-apent,
.cfx-tjenesteside .cfx-status--pille.er-apent .cfx-status__tekst,
.cfx-tjenesteside .cfx-status--pille .cfx-status__tekst {
	color: #fff;
	font-weight: 600;
}

/* Prikken er liten på mørk bunn, så den lysnes litt for å bli synlig. */
.cfx-verksted .cfx-status--pille.er-apent .cfx-status__prikk,
.cfx-tjenesteside .cfx-status--pille.er-apent .cfx-status__prikk {
	background: #6fd37f;
	width: 8px;
	height: 8px;
}

.cfx-verksted .cfx-status--pille .cfx-status__prikk,
.cfx-tjenesteside .cfx-status--pille .cfx-status__prikk {
	width: 8px;
	height: 8px;
	background: #e8846f;
}

.cfx-verksted .cfx-status--pille:hover,
.cfx-verksted .cfx-status--pille:focus-visible,
.cfx-tjenesteside .cfx-status--pille:hover,
.cfx-tjenesteside .cfx-status--pille:focus-visible {
	background: rgba(255, 255, 255, 0.26);
	border-color: rgba(255, 255, 255, 0.45);
}

/* Boblen står på mørk flate her, så den trenger lys bakgrunn. */
.cfx-verksted .cfx-boble,
.cfx-tjenesteside .cfx-boble {
	background: #fff;
	color: var(--cfx-tekst);
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
}

.cfx-verksted .cfx-boble::after,
.cfx-tjenesteside .cfx-boble::after {
	border-top-color: #fff;
}

/* Kategorifilter på tjenesteoversikten. Få valg, så knapper framfor nedtrekk. */
.cfx .cfx-kategorifilter {
	display: flex;
	flex-wrap: wrap;
	gap: calc(var(--cfx-skala) * 0.5rem);
	margin-top: calc(var(--cfx-skala) * 1.75rem);
}

.cfx .cfx-kategori {
	min-height: 40px;
	padding: calc(var(--cfx-skala) * 0.45rem) calc(var(--cfx-skala) * 1rem);
	border: 1px solid var(--cfx-kant);
	border-radius: 999px;
	background: #fff;
	color: var(--cfx-tekst);
	font: inherit;
	font-size: calc(var(--cfx-skala) * 0.9375rem);
	font-weight: 600;
	cursor: pointer;
	transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}

.cfx .cfx-kategori:hover {
	border-color: var(--cfx-gronn-lys);
	color: var(--cfx-gronn);
}

.cfx .cfx-kategori.er-valgt {
	background: var(--cfx-gronn);
	border-color: var(--cfx-gronn);
	color: #fff;
}

.cfx .cfx-kategori:focus-visible {
	outline: 3px solid var(--cfx-gronn);
	outline-offset: 2px;
}

.cfx .cfx-tjenestekort.er-skjult {
	display: none;
}


/* ===========================================================================
   Toppseksjon på tjenesteoversikten
   Samme todeling som forsiden: tekst til venstre, verkstedvelger til høyre.
   Den som vet hva de trenger kan bestille herfra uten å lese listen.
   ======================================================================== */

.cfx-tjenestehero {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: clamp(calc(var(--cfx-skala) * 1.5rem), 4vw, calc(var(--cfx-skala) * 3rem));
	align-items: center;
	background: var(--cfx-gronn);
	color: #fff;
	padding-inline: max(clamp(calc(var(--cfx-skala) * 1rem), 4vw, calc(var(--cfx-skala) * 3rem)), (100% - var(--cfx-bredde)) / 2);
}

.cfx.cfx-tjenestehero > * {
	max-width: none;
	margin-inline: 0;
}

.cfx.cfx .cfx-tjenestehero__tittel {
	margin: 0;
	font-size: clamp(calc(var(--cfx-skala) * 2rem), 4vw, calc(var(--cfx-skala) * 3rem));
	line-height: 1.1;
	color: #fff;
}

.cfx .cfx-tjenestehero__ingress {
	margin: calc(var(--cfx-skala) * 0.75rem) 0 0;
	max-width: 62ch;
	font-size: calc(var(--cfx-skala) * 1.125rem);
	line-height: 1.55;
	color: rgba(255, 255, 255, 0.88);
}

.cfx .cfx-tjenestehero__punkter {
	display: flex;
	flex-wrap: wrap;
	gap: calc(var(--cfx-skala) * 0.5rem) calc(var(--cfx-skala) * 1.5rem);
	margin: calc(var(--cfx-skala) * 1.25rem) 0 0;
	padding: 0;
	list-style: none;
	font-size: calc(var(--cfx-skala) * 0.9375rem);
}

.cfx .cfx-tjenestehero__punkter li {
	display: inline-flex;
	align-items: center;
	gap: calc(var(--cfx-skala) * 0.45rem);
	color: rgba(255, 255, 255, 0.9);
}

.cfx .cfx-tjenestehero__punkter .cfx-ikon {
	width: calc(var(--cfx-skala) * 1.1rem);
	height: calc(var(--cfx-skala) * 1.1rem);
	color: var(--cfx-gul);
}


/* Toppseksjonen deles i to så snart den har noe ved siden av teksten. */
.cfx-tjenestehero:has(.cfx-tjenestehero__tillegg) {
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

@media (max-width: 900px) {
	.cfx-tjenestehero:has(.cfx-tjenestehero__tillegg) {
		grid-template-columns: 1fr;
		align-items: start;
	}
}

/* ---- Aktuelt nå -------------------------------------------------------- */

.cfx .cfx-sesong__liste {
	display: grid;
	gap: calc(var(--cfx-skala) * 0.5rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

.cfx .cfx-sesong__liste a {
	display: flex;
	align-items: center;
	gap: calc(var(--cfx-skala) * 0.85rem);
	padding: calc(var(--cfx-skala) * 0.6rem);
	border-radius: var(--cfx-radius);
	background: rgba(255, 255, 255, 0.07);
	border: 1px solid rgba(255, 255, 255, 0.16);
	color: #fff;
	text-decoration: none;
	transition: background-color 0.15s, border-color 0.15s;
}

.cfx .cfx-sesong__liste a:hover,
.cfx .cfx-sesong__liste a:focus-visible {
	background: rgba(255, 255, 255, 0.14);
	border-color: var(--cfx-gul);
	color: #fff;
}

.cfx .cfx-sesong__liste img {
	flex: 0 0 auto;
	width: calc(var(--cfx-skala) * 4.5rem);
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: 8px;
}

.cfx .cfx-sesong__innhold {
	display: flex;
	flex-direction: column;
	gap: calc(var(--cfx-skala) * 0.1rem);
	flex: 1 1 auto;
	min-width: 0;
}

.cfx .cfx-sesong__navn {
	font-size: calc(var(--cfx-skala) * 1rem);
	font-weight: 700;
}

.cfx .cfx-sesong__tekst {
	font-size: calc(var(--cfx-skala) * 0.875rem);
	color: rgba(255, 255, 255, 0.82);
	line-height: 1.4;
}

.cfx .cfx-sesong__liste .cfx-pil {
	flex: 0 0 auto;
	color: var(--cfx-gul);
	transition: transform 0.15s;
}

.cfx .cfx-sesong__liste a:hover .cfx-pil {
	transform: translateX(3px);
}

/* Widgeten i toppseksjonen skal fylle sin halvdel uten egen bakgrunn. */
.cfx-tjenestehero .cfx-widget .cfsb {
	padding: 0;
	background: transparent;
}

/* ---------------------------------------------------------------------------
   Full bredde uten overflow
   WPBakery gir raden negative sidemarger (−16 px) som normalt nøytraliseres av
   kolonnens padding. På rader satt til full bredde finnes ikke den paddingen,
   så raden stikker 32 px utenfor viewporten. Det gir en hvit stripe langs
   høyre kant og vannrett rulling på alle sidene våre.
   ------------------------------------------------------------------------ */

.l-section-h > .g-cols.vc_row:has(.cfx) {
	margin-inline: 0;
}

.l-section-h > .g-cols.vc_row:has(.cfx) > .wpb_column > .vc_column-inner {
	padding-inline: 0;
}

/* ---- Adresse og minikart i verkstedvelgeren ---------------------------- */
.cfx-region__adresse {
	flex: 0 1 100%;
	font-size: calc(var(--cfx-skala) * 0.9rem);
	color: var(--cfx-dempet);
	text-decoration: none;
	line-height: 1.4;
}
.cfx-region__adresse:hover,
.cfx-region__adresse:focus-visible { color: var(--cfx-gronn); }

/* Kartknappen sto nederst, under hele listen, og ble ikke sett. Nå står den
   i verktøyraden, og kartet åpner seg rett under den – over listen. */
.cfx-verksteder__minikart {
	height: calc(var(--cfx-skala) * 22rem);
	margin-bottom: calc(var(--cfx-skala) * 1.75rem);
	border: 1px solid var(--cfx-kant);
	border-radius: var(--cfx-radius);
	overflow: hidden;
}
.cfx-verksteder__minikart .leaflet-container { font: inherit; }

/* ---- Tjenesterader: navnet er det man leter etter ---------------------- */
/* Både navn og pris sto i halvfet, og prisen arvet kortets store
   grunnstørrelse. Da konkurrerte de, og ingen av dem vant. Navnet får
   fokus; pris og tid er opplysninger man leser etterpå. */
.cfx .cfx-tjenesterad__navn a,
.cfx .cfx-utvid .cfx-tjenesterad__navn {
	font-size: calc(var(--cfx-skala) * 1.1rem);
	font-weight: 700;
}

.cfx .cfx-tjenesterad__pris {
	font-size: calc(var(--cfx-skala) * 0.95rem);
	font-weight: 500;
	color: #4a4a4a;
}

.cfx .cfx-tjenesterad__tid {
	font-size: calc(var(--cfx-skala) * 0.95rem);
	font-weight: 400;
}

/* ---- Tjenesterader: strammere kort ------------------------------------ */
/* Teksten var for stor, pilen lå på samme linje som «Mer om tjenesten»
   langt nede i kortet, og det åpne feltet hadde to streker over hverandre. */
.cfx .cfx-utvid .cfx-tjenesterad__navn {
	font-size: calc(var(--cfx-skala) * 1rem);
	line-height: 1.3;
}
.cfx .cfx-tjenesterad__pris,
.cfx .cfx-tjenesterad__tid {
	font-size: calc(var(--cfx-skala) * 0.88rem);
}

.cfx .cfx-utvid > summary {
	gap: calc(var(--cfx-skala) * 0.3rem) calc(var(--cfx-skala) * 0.85rem);
	padding: calc(var(--cfx-skala) * 0.85rem) calc(var(--cfx-skala) * 1.05rem);
}

/* Pilen hører til tittelen, ikke til bunnen av kortet. */
.cfx .cfx-utvid > summary::after {
	grid-row: 1;
	grid-column: 4;
	align-self: center;
}

/* Én strek mellom hodet og det som felles ut, ikke to. */
.cfx .cfx-utvid__innhold {
	padding: calc(var(--cfx-skala) * 0.9rem) calc(var(--cfx-skala) * 1.05rem) calc(var(--cfx-skala) * 1.05rem);
	border-top: 1px solid var(--cfx-kant);
}
.cfx .cfx-utvid__innhold p {
	margin-top: 0;
	padding-top: 0;
	border-top: 0;
	font-size: calc(var(--cfx-skala) * 0.92rem);
}
.cfx .cfx-utvid__handling {
	gap: calc(var(--cfx-skala) * 0.75rem);
	margin-top: calc(var(--cfx-skala) * 1.4rem);
}
.cfx .cfx-utvid__handling .cfx-knapp {
	min-height: calc(var(--cfx-skala) * 2.2rem);
	font-size: calc(var(--cfx-skala) * 0.9rem);
}

/* To knapper side om side, som i verkstedvelgeren. Før var «Les mer» en
   lenke som brøt over to linjer med pilen hengende for seg selv ytterst. */
/* max-content som utgangspunkt: får ikke begge plass, legger den andre seg
   under. Med auto krympet «Les mer om tilstandsrapport» under teksten sin, og
   teksten stakk ut av knappen på telefon (28. oktober 2026). */
.cfx .cfx-utvid__handling .cfx-knapp {
	flex: 1 1 max-content;
	max-width: 100%;
	white-space: normal;
	justify-content: center;
	min-height: calc(var(--cfx-skala) * 2.2rem);
	padding-inline: calc(var(--cfx-skala) * 0.9rem);
	font-size: calc(var(--cfx-skala) * 0.88rem);
	text-align: center;
}

/* Postnummer og sted på egen linje under gateadressen. Lenken er inline-flex
   (den bærer tooltipen), så barna må stables eksplisitt. */
.cfx .cfx-region__adresse {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0;
	width: fit-content;
	max-width: 100%;
}
.cfx-region__gate,
.cfx-region__post { display: block; }

/* To likeverdige valg: se verkstedet, eller bestill med en gang. De står på
   hver sin side av raden så de ikke leses som én lang knapperekke. */
.cfx-tjenesteside-verksteder .cfx-region__handling {
	flex: 1 1 100%;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: calc(var(--cfx-skala) * 0.6rem);
	margin-left: 0;
	margin-top: calc(var(--cfx-skala) * 0.2rem);
}
/* Kortet er 298 px på det smaleste. Med samme sideluft som ellers ble paret
   17 px for bredt, og de to la seg under hverandre som to tunge flater. Høyden
   er den samme som alle andre knapper — bare luften på sidene gir etter. */
.cfx-tjenesteside-verksteder .cfx-region__handling .cfx-knapp {
	flex: 1 1 0;
	min-width: 0;
	padding-inline: calc(var(--cfx-skala) * 0.8rem);
	/* Temaet krymper rotskriften på smale skjermer, og 0,88rem ble 12 px.
	   Gulvet står i piksler, ikke rem — et rem-gulv vokser med rotskriften
	   og gjorde etiketten større enn resten på brede skjermer. */
	font-size: max(13px, calc(var(--cfx-skala) * 0.88rem));
	white-space: nowrap;
}

/* ---- Verkstedvelgeren: roligere hover ---------------------------------- */
/* Kortet skal ikke reagere på pekeren — bare knappene. */
.cfx.cfx-tjenesteside-verksteder.cfx .cfx-region li:hover::before { opacity: 0; }
.cfx-tjenesteside-verksteder .cfx-region li:hover { border-color: var(--cfx-kant); }


/* ---- Verkstedvelgeren: samme plassering som verkstedoversikten --------- */
/* Status til høyre på navnelinjen, telefon med ikon på egen linje – slik
   kortene på /verksteder/ allerede gjør det. */
.cfx-tjenesteside-verksteder .cfx-region__rad .cfx-status--pille {
	flex: 0 0 auto;
	margin-left: auto;
}

.cfx-tjenesteside-verksteder.cfx .cfx-region__tlf {
	flex: 0 1 100%;
	width: fit-content;
	max-width: 100%;
	margin-left: 0;
	margin-right: auto;
	font-size: calc(var(--cfx-skala) * 0.9rem);
	color: var(--cfx-tekst);
	text-decoration: none;
}
.cfx-tjenesteside-verksteder.cfx .cfx-region__tlf .cfx-ikon {
	width: calc(var(--cfx-skala) * 1rem);
	height: calc(var(--cfx-skala) * 1rem);
}

/* Telefonnummeret er en ren lenke – ingen strek under, bare farge ved hover. */
.cfx-tjenesteside-verksteder.cfx .cfx-region__tlf {
	display: inline-flex;
	align-items: center;
	gap: calc(var(--cfx-skala) * 0.55rem);
	border-bottom: 0;
}
.cfx-tjenesteside-verksteder.cfx .cfx-region__tlf .cfx-ikon { flex: 0 0 auto; }
.cfx-tjenesteside-verksteder.cfx .cfx-region__tlf:hover,
.cfx-tjenesteside-verksteder.cfx .cfx-region__tlf:focus-visible {
	color: var(--cfx-gronn);
	border-bottom: 0;
	text-decoration: none;
}

/* ---- Verkstedvelgeren: telefon og ro i kortene ------------------------- */
/* Ikonet arvet 1,5 rem fra .cfx-ikon og la seg inntil sifrene. */
.cfx-tjenesteside-verksteder.cfx .cfx-region__tlf .cfx-ikon {
	width: calc(var(--cfx-skala) * 1.05rem);
	height: calc(var(--cfx-skala) * 1.05rem);
	flex: 0 0 auto;
	color: var(--cfx-gronn-lys);
}
.cfx-tjenesteside-verksteder.cfx .cfx-region__tlf:hover .cfx-ikon { color: currentColor; }

/* Ingen strek under nummeret, og ingen flate som lyser opp bak kortet. */
.cfx-tjenesteside-verksteder.cfx .cfx-region__tlf:hover,
.cfx-tjenesteside-verksteder.cfx .cfx-region__tlf:focus-visible {
	color: var(--cfx-gronn);
	text-decoration: none;
	border-bottom: 0;
}
/* Kortet er et rutenett med én kolonne, ikke flex med flex-basis 100 %:
   da strakte telefon- og e-postlenken seg over hele kortet, og hele bredden
   var klikkflate. Nå følger lenkene teksten. Navnelinjen, adressen og
   knappene får full bredde. (28. oktober 2026) */
.cfx.cfx-tjenesteside-verksteder.cfx .cfx-region li,
.cfx-tjenesteside-verksteder.cfx.cfx .cfx-region li {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	justify-items: start;
}
.cfx-tjenesteside-verksteder.cfx.cfx .cfx-region li > .cfx-region__rad,
.cfx-tjenesteside-verksteder.cfx.cfx .cfx-region li > .cfx-region__adresse,
.cfx-tjenesteside-verksteder.cfx.cfx .cfx-region li > .cfx-region__handling {
	justify-self: stretch;
}
/* 0,9 rem ganger skalaen ble 12 px – for smått til et telefonnummer man
   skal lese av. Aldri under 15 px. */
.cfx-tjenesteside-verksteder.cfx.cfx .cfx-region__tlf,
.cfx-tjenesteside-verksteder.cfx.cfx .cfx-region__adresse {
	font-size: max(15px, calc(var(--cfx-skala) * 0.95rem));
}

/* Fargeskiftet alene var for svakt til å se. Lenken eier understrekingen
   selv: usynlig i hvile, tydelig ved hover – ikke temaets strek, og ingen
   border-bottom i tillegg. Gjelder også verkstedoversikten. */
.cfx-tjenesteside-verksteder.cfx .cfx-region__tlf > span,
.cfx-verksteder.cfx .cfx-region__tlf > span {
	text-decoration: underline;
	text-decoration-thickness: 1.5px;
	text-underline-offset: 0.22em;
	text-decoration-color: transparent;
	transition: text-decoration-color 0.15s ease, color 0.15s ease;
}
.cfx-tjenesteside-verksteder.cfx .cfx-region__tlf:hover > span,
.cfx-tjenesteside-verksteder.cfx .cfx-region__tlf:focus-visible > span,
.cfx-verksteder.cfx .cfx-region__tlf:hover > span,
.cfx-verksteder.cfx .cfx-region__tlf:focus-visible > span {
	color: var(--cfx-gronn);
	text-decoration-color: currentColor;
}
.cfx-tjenesteside-verksteder.cfx .cfx-region__tlf:hover .cfx-ikon,
.cfx-verksteder.cfx .cfx-region__tlf:hover .cfx-ikon {
	color: var(--cfx-gronn);
}

.cfx.cfx-tjenesteside-verksteder.cfx .cfx-region li::before,
.cfx.cfx-tjenesteside-verksteder.cfx .cfx-region li:hover::before {
	content: none;
	opacity: 0;
	background: none;
	box-shadow: none;
}

/* ---- Hover på knapper -------------------------------------------------- */
/* Rammeknappen hadde rgba(255,255,255,.12) som hover. På de lyse flatene
   våre var den usynlig. Her fylles knappen med sin egen tekstfarge tonet
   ned, så effekten virker både på hvitt og på mørk bunn. */
.cfx .cfx-knapp {
	transition: background-color 0.14s, color 0.14s, box-shadow 0.14s, border-color 0.14s, transform 0.14s;
}

.cfx .cfx-knapp--ramme:hover,
.cfx .cfx-knapp--ramme:focus-visible {
	background: color-mix(in srgb, currentColor 14%, transparent);
	border-color: currentColor;
	color: inherit;
	box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 18%, transparent);
}

.cfx .cfx-knapp--gul:hover,
.cfx .cfx-knapp--gul:focus-visible {
	background: color-mix(in srgb, var(--cfx-gul) 88%, #000);
	border-color: var(--cfx-gronn);
	color: var(--cfx-knapp-tekst);
}

.cfx .cfx-knapp--gronn:hover,
.cfx .cfx-knapp--gronn:focus-visible {
	background: var(--cfx-gronn-lys);
	color: #fff;
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--cfx-gronn) 35%, transparent);
}

.cfx .cfx-knapp:active { transform: translateY(1px); }

@media (prefers-reduced-motion: reduce) {
	.cfx .cfx-knapp { transition: none; }
	.cfx .cfx-knapp:active { transform: none; }
}

/* Mer luft mellom ingressen og knappene i det utfelte tjenestefeltet. */
/* Elementselektoren i «.cfx .cfx-utvid__innhold p» veier tyngre enn en ren
   klasse, så marginen må settes på p-en selv for å slå gjennom. */
.cfx .cfx-utvid__innhold p.cfx-utvid__handling {
	margin-top: 15px;
}

/* Kategoriknappene fikk bare en fargeendring. Nå fylles de også, som de
   andre knappene våre. */
.cfx .cfx-kategori:hover {
	background: color-mix(in srgb, var(--cfx-gronn) 10%, #fff);
	border-color: var(--cfx-gronn);
	color: var(--cfx-gronn);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--cfx-gronn) 15%, transparent);
}
.cfx .cfx-kategori.er-valgt:hover {
	background: var(--cfx-gronn-lys);
	border-color: var(--cfx-gronn-lys);
	color: #fff;
}

/* ---- Verkstedvelgeren: status helt til høyre --------------------------- */
/* Navnet tar slakken i raden, så statusen havner inntil høyre kant
   uavhengig av margin-reglene lenger oppe i filen. */
.cfx-tjenesteside-verksteder.cfx .cfx-region__rad .cfx-region__sted {
	flex: 1 1 auto;
	min-width: 0;
}
.cfx-tjenesteside-verksteder.cfx .cfx-region__rad .cfx-status {
	flex: 0 0 auto;
	margin-inline-start: auto;
}

/* ---- Hover på knapper: farge, ikke ring -------------------------------- */
.cfx .cfx-knapp--ramme:hover,
.cfx .cfx-knapp--ramme:focus-visible {
	background: var(--cfx-gronn);
	border-color: var(--cfx-gronn);
	color: #fff;
	box-shadow: none;
}
.cfx .cfx-knapp--gul:hover,
.cfx .cfx-knapp--gul:focus-visible {
	background: color-mix(in srgb, var(--cfx-gul) 88%, #000);
	border-color: var(--cfx-gronn);
	color: var(--cfx-knapp-tekst);
}
.cfx .cfx-knapp--gronn:hover,
.cfx .cfx-knapp--gronn:focus-visible {
	background: var(--cfx-gronn-lys);
	color: #fff;
	box-shadow: none;
}
.cfx .cfx-kategori:hover {
	background: var(--cfx-gronn);
	border-color: var(--cfx-gronn);
	color: #fff;
	box-shadow: none;
}
.cfx .cfx-kategori.er-valgt:hover {
	background: var(--cfx-gronn-lys);
	border-color: var(--cfx-gronn-lys);
	color: #fff;
}

/* Tastaturfokus beholder sin egen ring, ellers forsvinner den. */
.cfx .cfx-knapp:focus-visible,
.cfx .cfx-kategori:focus-visible {
	outline: 3px solid var(--cfx-gronn);
	outline-offset: 2px;
}

/* ---- Verkstedvelgeren: adresse og telefon i samme rytme ---------------- */
/* Begge opplysningene står med ikon, like langt inn, med jevn avstand.
   Før lå adressen tett inntil navnet og langt fra telefonnummeret. */
.cfx-tjenesteside-verksteder.cfx .cfx-region__rad {
	margin-bottom: calc(var(--cfx-skala) * 0.55rem);
}

.cfx-tjenesteside-verksteder.cfx .cfx-region__adresse,
.cfx-tjenesteside-verksteder.cfx .cfx-region__tlf {
	display: flex;
	/* En eldre regel setter column på adressen; den gjelder bare linjene nå. */
	flex-direction: row;
	align-items: flex-start;
	gap: calc(var(--cfx-skala) * 0.55rem);
	flex: 0 1 100%;
	margin: 0 auto 0 0;
	font-size: calc(var(--cfx-skala) * 0.9rem);
	line-height: 1.45;
}

.cfx-tjenesteside-verksteder.cfx .cfx-region__tlf {
	align-items: center;
	margin-top: calc(var(--cfx-skala) * 0.35rem);
}

.cfx-tjenesteside-verksteder.cfx .cfx-region__adresse .cfx-ikon,
.cfx-tjenesteside-verksteder.cfx .cfx-region__tlf .cfx-ikon {
	flex: 0 0 auto;
	width: calc(var(--cfx-skala) * 1.05rem);
	height: calc(var(--cfx-skala) * 1.05rem);
	color: var(--cfx-gronn-lys);
}
.cfx-tjenesteside-verksteder.cfx .cfx-region__adresse .cfx-ikon {
	margin-top: calc(var(--cfx-skala) * 0.15rem);
}

.cfx-tjenesteside-verksteder.cfx .cfx-region__linjer {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.cfx-tjenesteside-verksteder.cfx .cfx-region__handling {
	margin-top: calc(var(--cfx-skala) * 0.85rem);
}

/* ---- Kampanje på tjenestesiden ---------------------------------------- */
/* Kampanjer hadde egne sider før. Nå står de her, i en ramme som skiller
   seg fra resten uten å overdøve tjenesteinformasjonen rundt. */
.cfx-kampanjefelt { background: var(--cfx-flate); }

.cfx-kampanjefelt__kort {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr);
	align-items: center;
	gap: clamp(1.5rem, 4vw, 3rem);
	padding: calc(var(--cfx-skala) * 1.75rem);
	border: 1px solid var(--cfx-gul);
	border-radius: var(--cfx-radius);
	background: #fff;
}

/* Uten bilde ville teksten strekke seg over hele bredden og bli uleselig. */
.cfx-kampanjefelt__kort--uten-bilde { grid-template-columns: minmax(0, 1fr); }
.cfx-kampanjefelt__kort--uten-bilde .cfx-kampanjefelt__tekstdel { max-width: 62ch; }

.cfx-kampanjefelt__media {
	align-self: stretch;
	min-height: calc(var(--cfx-skala) * 14rem);
	border-radius: calc(var(--cfx-radius) * 0.7);
	overflow: hidden;
}
.cfx .cfx-kampanjefelt__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Dager igjen gjør gyldigheten konkret uten å rope. */
.cfx-kampanjefelt__nedtelling {
	display: inline-block;
	margin-left: calc(var(--cfx-skala) * 0.6rem);
	padding: calc(var(--cfx-skala) * 0.15rem) calc(var(--cfx-skala) * 0.6rem);
	border-radius: 999px;
	background: var(--cfx-gul);
	color: var(--cfx-knapp-tekst);
	letter-spacing: 0.04em;
}

.cfx .cfx-kampanjefelt__handling {
	display: flex;
	flex-wrap: wrap;
	gap: calc(var(--cfx-skala) * 0.75rem);
}

@media (max-width: 760px) {
	.cfx-kampanjefelt__kort { grid-template-columns: minmax(0, 1fr); }
	.cfx-kampanjefelt__media { order: -1; min-height: calc(var(--cfx-skala) * 11rem); }
}

.cfx .cfx-kampanjefelt__merke {
	margin-block: 0 calc(var(--cfx-skala) * 0.5rem);
	font-size: calc(var(--cfx-skala) * 0.75rem);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--cfx-gronn);
}

.cfx .cfx-kampanjefelt__tittel {
	margin-block: 0;
	font-size: calc(var(--cfx-skala) * 1.6rem);
	line-height: 1.15;
	text-wrap: balance;
}

.cfx .cfx-kampanjefelt__tekst {
	margin-block: calc(var(--cfx-skala) * 0.6rem) 0;
	max-width: 60ch;
	font-size: calc(var(--cfx-skala) * 1.05rem);
	line-height: 1.6;
}

.cfx .cfx-kampanjefelt__pris {
	margin-block: calc(var(--cfx-skala) * 0.9rem) 0;
	font-size: calc(var(--cfx-skala) * 1.5rem);
	font-weight: 700;
	color: var(--cfx-tittel);
}

.cfx .cfx-kampanjefelt__handling {
	margin-block: calc(var(--cfx-skala) * 1.1rem) 0;
}

.cfx .cfx-kampanjefelt__vilkar {
	margin-block: calc(var(--cfx-skala) * 0.9rem) 0;
	max-width: 70ch;
	font-size: calc(var(--cfx-skala) * 0.85rem);
	color: var(--cfx-dempet);
}



/* ---- «Finn ditt verksted» på forsiden ---------------------------------- */
/* Multi-kolonne fordeler områdene jevnt nedover uten hullene et grid
   etterlater når kortene er ulikt høye. */
.cfx-verksteder .cfx-verksteder__regioner {
	columns: 4 calc(var(--cfx-skala) * 15rem);
	column-gap: calc(var(--cfx-skala) * 1rem);
}
.cfx-verksteder .cfx-verksteder__regioner .cfx-region {
	break-inside: avoid;
	margin-bottom: calc(var(--cfx-skala) * 1rem);
}

.cfx-verksteder.cfx .cfx-region li {
	display: block;
	padding: calc(var(--cfx-skala) * 0.7rem) 0;
}

.cfx-verksteder .cfx-region__rad {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: calc(var(--cfx-skala) * 0.5rem);
	min-width: 0;
}
.cfx-verksteder .cfx-region__sted {
	flex: 0 1 auto;
	min-width: 0;
	font-size: calc(var(--cfx-skala) * 1rem);
	font-weight: 600;
	color: var(--cfx-tittel);
}
.cfx-verksteder.cfx .cfx-region__tlf {
	margin-left: auto;
	font-size: calc(var(--cfx-skala) * 0.9rem);
	white-space: nowrap;
	color: #5c5c5c;
	text-decoration: none;
}
.cfx-verksteder.cfx .cfx-region__tlf:hover { color: var(--cfx-gronn); text-decoration: none; }


/* Med peker holder listen seg kort. Knappene kommer fram når pekeren er
   innenfor hele områdekortet, ikke rad for rad: da folder kortet seg ut én
   gang i stedet for å hoppe for hver rad man passerer. */

/* På mobil finnes ingen hover. Da er hele raden trykkflaten, og knappen
   legger seg usynlig over den i stedet for å ta en egen linje. */
@media (max-width: 640px) {
	.cfx-verksteder .cfx-verksteder__regioner { columns: auto; column-count: 1; }

	.cfx-verksteder.cfx.cfx .cfx-region li { position: relative; }

	/* Pilen viser at raden fører videre. */
	.cfx-verksteder .cfx-region__rad::after {
		content: "›";
		flex: 0 0 auto;
		margin-left: calc(var(--cfx-skala) * 0.3rem);
		color: var(--cfx-gronn);
		font-size: calc(var(--cfx-skala) * 1.3rem);
		line-height: 1;
	}

	/* Telefonnummeret skal fortsatt kunne trykkes for seg. */
	.cfx-verksteder .cfx-region__tlf { position: relative; z-index: 2; }
}


/* «Sjekk bilen din» inne i kampanjefeltet, der bildet ellers ville stått. */
.cfx-kampanjefelt__widget {
	align-self: center;
	min-width: 0;
}
.cfx-kampanjefelt__widget .cfx-widget { margin: 0; }

/* Widgeten har skarpe hjørner fra før. Inne i kampanjekortet skal den følge
   den samme avrundingen som resten. */
.cfx-kampanjefelt__widget,
.cfx-kampanjefelt__widget .cfx-widget,
.cfx-kampanjefelt__widget .cfx-widget > * {
	border-radius: calc(var(--cfx-radius) * 0.7);
	overflow: hidden;
}

/* ---- Kampanje i toppseksjonen ------------------------------------------ */
/* Går det en kampanje, skal det synes før man ruller. Et klistremerke på
   bildet, og en pille over overskriften for sider uten bilde. */
.cfx .cfx-kampanjemerke {
	display: inline-flex;
	align-items: center;
	gap: calc(var(--cfx-skala) * 0.6rem);
	width: fit-content;
	max-width: 100%;
	margin-bottom: calc(var(--cfx-skala) * 0.9rem);
	padding: calc(var(--cfx-skala) * 0.4rem) calc(var(--cfx-skala) * 0.9rem);
	border-radius: 999px;
	background: var(--cfx-gul);
	color: var(--cfx-knapp-tekst);
	font-size: calc(var(--cfx-skala) * 0.85rem);
	text-decoration: none;
	transition: transform 0.14s, box-shadow 0.14s;
}
.cfx .cfx-kampanjemerke:hover,
.cfx .cfx-kampanjemerke:focus-visible {
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.22);
	color: var(--cfx-knapp-tekst);
	text-decoration: none;
}
.cfx .cfx-kampanjemerke__ord {
	font-size: calc(var(--cfx-skala) * 0.72rem);
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}
.cfx .cfx-kampanjemerke__tekst { font-weight: 600; }

.cfx-tjenesteside__media { position: relative; }

.cfx .cfx-klistremerke {
	position: absolute;
	top: calc(var(--cfx-skala) * -0.75rem);
	right: calc(var(--cfx-skala) * -0.75rem);
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: calc(var(--cfx-skala) * 0.1rem);
	width: calc(var(--cfx-skala) * 8rem);
	height: calc(var(--cfx-skala) * 8rem);
	padding: calc(var(--cfx-skala) * 0.9rem);
	border-radius: 50%;
	background: var(--cfx-gul);
	color: var(--cfx-knapp-tekst);
	text-align: center;
	text-decoration: none;
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.28);
	transform: rotate(-8deg);
	transition: transform 0.16s;
}
.cfx .cfx-klistremerke:hover,
.cfx .cfx-klistremerke:focus-visible {
	transform: rotate(-8deg) scale(1.05);
	color: var(--cfx-knapp-tekst);
	text-decoration: none;
}
.cfx .cfx-klistremerke__topp {
	font-size: calc(var(--cfx-skala) * 0.68rem);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}
.cfx .cfx-klistremerke__verdi {
	max-width: 100%;
	font-size: calc(var(--cfx-skala) * 0.95rem);
	font-weight: 700;
	line-height: 1.1;
	text-wrap: balance;
	overflow-wrap: anywhere;
}
.cfx .cfx-klistremerke__bunn {
	font-size: calc(var(--cfx-skala) * 0.68rem);
	opacity: 0.75;
}

/* Har siden bilde, holder klistremerket. Da trengs ikke pillen i tillegg. */
.cfx-tjenesteside--kampanje:has(.cfx-klistremerke) .cfx-kampanjemerke { display: none; }

@media (prefers-reduced-motion: reduce) {
	.cfx .cfx-kampanjemerke,
	.cfx .cfx-klistremerke { transition: none; }
}

@media (max-width: 760px) {
	.cfx .cfx-klistremerke {
		top: calc(var(--cfx-skala) * -0.4rem);
		right: calc(var(--cfx-skala) * -0.4rem);
		width: calc(var(--cfx-skala) * 6rem);
		height: calc(var(--cfx-skala) * 6rem);
	}
}

/* Merknaden står på mørk bunn i toppseksjonen, der grå tekst ble uleselig.
   Her får den en egen flate og lesbar farge. */
.cfx-tjenesteside.cfx .cfx-steg__merknad {
	display: block;
	max-width: 62ch;
	margin-top: calc(var(--cfx-skala) * 1rem);
	padding: calc(var(--cfx-skala) * 0.75rem) calc(var(--cfx-skala) * 1rem);
	border-left: 3px solid var(--cfx-gul);
	border-radius: 0 8px 8px 0;
	background: rgba(255, 255, 255, 0.08);
	color: #e8ece9;
	font-size: calc(var(--cfx-skala) * 0.9rem);
	line-height: 1.55;
}

/* Når widgeten har hentet et svar, trenger den hele bredden. Resultatet er
   mye bredere enn det tomme skjemaet, og i den smale spalten ble det klemt
   sammen til uleselige kolonner. */
.cfx-kampanjefelt__kort:has(.cfsb--has-result) {
	grid-template-columns: minmax(0, 1fr);
}
.cfx-kampanjefelt__kort:has(.cfsb--has-result) .cfx-kampanjefelt__tekstdel {
	max-width: 62ch;
}
.cfx-kampanjefelt__kort:has(.cfsb--has-result) .cfx-kampanjefelt__widget {
	grid-column: 1 / -1;
}

/* Klistremerket skal henge utenfor bildet, så hele sirkelen synes. Da kan
   ikke bildekassen klippe – avrundingen flyttes til bildet selv. */
.cfx-tjenesteside__media {
	overflow: visible;
	border-radius: 0;
}
.cfx .cfx-tjenesteside__media img {
	border-radius: var(--cfx-radius);
}

.cfx .cfx-klistremerke {
	top: calc(var(--cfx-skala) * -2.75rem);
	right: calc(var(--cfx-skala) * -2.75rem);
	width: calc(var(--cfx-skala) * 14rem);
	height: calc(var(--cfx-skala) * 14rem);
	gap: calc(var(--cfx-skala) * 0.25rem);
	padding: calc(var(--cfx-skala) * 1.4rem);
	border: calc(var(--cfx-skala) * 0.3rem) solid var(--cfx-morkt);
}
.cfx .cfx-klistremerke__topp { font-size: calc(var(--cfx-skala) * 1.05rem); }
.cfx .cfx-klistremerke__verdi { font-size: calc(var(--cfx-skala) * 2.2rem); }
.cfx .cfx-klistremerke__bunn { font-size: calc(var(--cfx-skala) * 0.95rem); opacity: 0.8; }

@media (max-width: 760px) {
	.cfx .cfx-klistremerke {
		top: calc(var(--cfx-skala) * -1.75rem);
		/* Lenger ut, og den skrå kanten gikk utenfor skjermen på 390 px. */
		right: calc(var(--cfx-skala) * -0.25rem);
		width: calc(var(--cfx-skala) * 10rem);
		height: calc(var(--cfx-skala) * 10rem);
		padding: calc(var(--cfx-skala) * 1rem);
	}
	.cfx .cfx-klistremerke__verdi { font-size: calc(var(--cfx-skala) * 1.6rem); }
	.cfx .cfx-klistremerke__topp { font-size: calc(var(--cfx-skala) * 0.8rem); }
	.cfx .cfx-klistremerke__bunn { font-size: calc(var(--cfx-skala) * 0.75rem); }
}


/* ---- Bestillingsskjemaet i toppen på mobil ----------------------------- */
/* To felter i full høyde pluss en stor knapp skjøv bildet langt ned. Her er
   feltene strammere og etiketten står på én linje med feltet. */
@media (max-width: 640px) {
	.cfx-hero .cfx-velger {
		gap: calc(var(--cfx-skala) * 0.55rem);
		margin-top: calc(var(--cfx-skala) * 1.25rem);
		padding: calc(var(--cfx-skala) * 0.9rem);
	}

	.cfx-hero .cfx-velger__felt label {
		margin-bottom: calc(var(--cfx-skala) * 0.2rem);
		font-size: calc(var(--cfx-skala) * 0.8rem);
	}

	.cfx.cfx .cfx-hero .cfx-velger select {
		height: calc(var(--cfx-skala) * 2.5rem);
		font-size: calc(var(--cfx-skala) * 0.95rem);
	}

	.cfx-hero .cfx-velger__knapp {
		margin-top: calc(var(--cfx-skala) * 0.15rem);
	}


}

/* ---- Toppseksjonen på forsiden ----------------------------------------- */
/* Knappen og de to lenkene står på én linje nederst i kortet, og skal se like
   ut i alt annet enn fyllfargen. Selektorene tar med .cfx foran, ellers taper
   de mot regler lenger nede i filen med samme vekt. */
.cfx-velger__handling {
	grid-column: 1 / -1;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: calc(var(--cfx-skala) * 0.6rem);
}

.cfx .cfx-velger__handling .cfx-knapp {
	flex: 0 0 auto;
	border: 1px solid var(--cfx-gronn);
	color: var(--cfx-knapp-tekst);
	font-weight: 700;
	letter-spacing: 0;
	line-height: 1.2;
}

.cfx .cfx-velger__handling .cfx-velger__lenke {
	background: transparent;
}

.cfx .cfx-velger__handling .cfx-velger__lenke:hover,
.cfx .cfx-velger__handling .cfx-velger__lenke:focus-visible {
	background: var(--cfx-gronn);
	border-color: var(--cfx-gronn);
	color: #fff;
}

/* Hover satte bare border-color: var(--cfx-gronn) — som er knappens hvilende
   kant. Den gjorde altså ingenting. Nå arver den den gule knappens hover. */
.cfx .cfx-velger__handling .cfx-velger__knapp:hover,
.cfx .cfx-velger__handling .cfx-velger__knapp:focus-visible {
	background: color-mix(in srgb, var(--cfx-gul) 88%, #000);
	border-color: var(--cfx-gronn);
}


/* Skjemaet var skjult på mobil, med tre knapper i stedet. Det hadde to felter
   og en knapp i full høyde og fylte skjermen. Nå er det ett nedtrekk og to
   knapper, og det får plass – så knappene som sto i stedet er borte. */

/* «På dagen» står på tjenestesiden og i tjenesteoversikten. I snarveiene
   stjeler den plass fra navnet uten å si noe nytt. */
/* Tekst bare for skjermlesere. Temaet har en egen klasse, men vi setter vår
   egen så seksjonene virker uansett hvilket tema som ligger under. */
.cfx .screen-reader-text,
.cfx-topp .screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* Nedtrekket sto med 1 px i lys grå og forsvant mot det hvite kortet.
   Her følger det knappene under: samme grønntone, samme tykkelse. */
.cfx .cfx-velger select {
	border: 1px solid var(--cfx-gronn);
}
.cfx .cfx-velger select:hover {
	border-color: var(--cfx-gronn-lys);
}

/* «Aktuelt i oktober» sto som en vanlig overskrift midt blant annen tekst.
   Den er en merkelapp på seksjonen, så den får samme form som «På dagen». */
.cfx .cfx-sesong__tittel {
	display: block;
	margin-block: 0 calc(var(--cfx-skala) * 0.9rem);
	font-size: calc(var(--cfx-skala) * 0.85rem);
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--cfx-gul);
}

/* På lys bunn ville gult forsvinne. */
.cfx-aktuelt--lyst .cfx-sesong__tittel,
.cfx-tjenesteoversikt .cfx-sesong__tittel { color: var(--cfx-gronn); }

/* ---- Snarveiene: kort med bilde og glasstripe --------------------------- */
/* Pillene sa bare navnet. Et utvalg på seks skal løftes fram, og bildet gjør
   valget gjenkjennelig før man har lest noe.

   De seks fotoene er tatt på seks verksteder i seks lysforhold. En grønn tone
   over alle sammen gjør raden til én flate i stedet for seks, og navnet står
   på en frostet stripe nederst – bildet skinner gjennom, teksten leses
   likevel. Ikonet er det samme gule merket som tjenesten har ellers på
   nettstedet. */
.cfx .cfx-snarveier__liste {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(calc(var(--cfx-skala) * 10.5rem), 1fr));
	gap: calc(var(--cfx-skala) * 1rem);
	margin-block: calc(var(--cfx-skala) * 1.25rem) 0;
	padding: 0;
	list-style: none;
}

.cfx .cfx-snarvei {
	position: relative;
	display: block;
	aspect-ratio: 4 / 5;
	border-radius: 16px;
	/* Samme tone som glasstripen. Rundingen på kortet og rundingen på stripen
	   traff hverandre et halvt piksel på skrå, og kortets egen bakgrunn lyste
	   gjennom som en lysere kant langs bunnen. Nå er det ingen forskjell å se
	   selv om den gjør det. Flaten er også det man ser om bildet mangler. */
	background: rgb(18, 34, 21);
	color: #fff;
	text-decoration: none;
	isolation: isolate;
	transition: transform 0.35s cubic-bezier(0.32, 0.72, 0, 1), box-shadow 0.35s ease;
}

/* Kortet man peker på løftes fram: det stiger litt, får skygge, og den grønne
   tonen letter så fotoet får sine egne farger tilbake. */
.cfx .cfx-snarvei:hover,
.cfx .cfx-snarvei:focus-visible {
	transform: translateY(-4px);
	box-shadow: 0 18px 34px -16px rgba(0, 0, 0, 0.65);
}

/* Bildet og den grønne tonen klippes her. Glasstripen ligger utenfor, så
   uskarpheten slipper å måle seg mot en runding den ikke kan følge. */
.cfx .cfx-snarvei__media {
	position: absolute;
	inset: 0;
	display: block;
	overflow: hidden;
	border-radius: 16px;
}

.cfx img.cfx-snarvei__bilde {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition:
		transform 0.55s cubic-bezier(0.32, 0.72, 0, 1),
		filter 0.35s ease;
}

/* Den grønne tonen binder de seks fotoene sammen – de er tatt på seks
   verksteder i seks lysforhold. Den er lett (18 %); på 42 % så bildene
   gjennomsiktige ut, og uten den poppet de for mye. Mørkest nederst, der
   glasstripen møter fotoet, så overgangen ikke blir en kant. */
.cfx .cfx-snarvei__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(to top, rgba(18, 34, 21, 0.7) 0%, rgba(18, 34, 21, 0) 48%),
		linear-gradient(to bottom, rgba(43, 69, 47, 0.18), rgba(43, 69, 47, 0.18));
	transition: opacity 0.3s ease;
	pointer-events: none;
}

.cfx .cfx-snarvei:hover img.cfx-snarvei__bilde,
.cfx .cfx-snarvei:focus-visible img.cfx-snarvei__bilde {
	transform: scale(1.1);
	filter: saturate(1.15) contrast(1.05);
}

.cfx .cfx-snarvei:hover .cfx-snarvei__media::after,
.cfx .cfx-snarvei:focus-visible .cfx-snarvei__media::after { opacity: 0.6; }

/* Glasstripen. backdrop-filter gjør den gjennomsiktig og uskarp på én gang;
   nettlesere uten den får en tett flate i stedet, så teksten aldri havner på
   et motiv den ikke kan leses mot. */
/* Stripen går fra kant til kant nederst og følger kortets runding. En smalere
   stripe inni kortet ble en ramme til inne i en ramme.

   Fargen er mørk, ikke lys. En lys frost tok farge fra motivet under og
   gjorde den hvite teksten vanskelig å lese på de lyseste bildene. */
.cfx .cfx-snarvei__glass {
	position: absolute;
	inset: auto 0 0 0;
	z-index: 1;
	display: flex;
	flex-direction: column;
	/* Plass til to linjer navn. «Oljeskift på bil» brøt om og ga ett kort en
	   høyere stripe enn de fem andre. */
	min-height: calc(var(--cfx-skala) * 3.6rem);
	padding: calc(var(--cfx-skala) * 0.65rem) calc(var(--cfx-skala) * 0.85rem);
	/* Egen runding, lik kortets. Lot vi kortet klippe stripen, klippet det
	   ikke uskarpheten med, og det ble en lys rand langs kurven. */
	border-radius: 0 0 16px 16px;
	background: rgba(43, 69, 47, 0.8);
	backdrop-filter: blur(16px) saturate(1.25);
	-webkit-backdrop-filter: blur(16px) saturate(1.25);
	transition:
		background-color 0.3s ease,
		backdrop-filter 0.3s ease,
		-webkit-backdrop-filter 0.3s ease;
}

.cfx .cfx-snarvei__rad {
	display: flex;
	align-items: center;
	gap: calc(var(--cfx-skala) * 0.55rem);
	min-height: calc(var(--cfx-skala) * 2.3rem);
}

/* Teksten kommer bare der det finnes en peker å oppdage den med. På en
   telefon ville den enten stått alltid eller aldri vært å finne. */
.cfx .cfx-snarvei__tekst {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	max-height: 0;
	margin-top: 0;
	font-size: calc(var(--cfx-skala) * 0.82rem);
	font-weight: 400;
	line-height: 1.4;
	color: rgba(255, 255, 255, 0.88);
	opacity: 0;
	transition: max-height 0.3s ease, opacity 0.25s ease, margin-top 0.3s ease;
}

@media (hover: hover) and (pointer: fine) {
	.cfx .cfx-snarvei:hover .cfx-snarvei__tekst,
	.cfx .cfx-snarvei:focus-visible .cfx-snarvei__tekst {
		max-height: calc(var(--cfx-skala) * 3.6rem);
		margin-top: calc(var(--cfx-skala) * 0.5rem);
		opacity: 1;
	}
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.cfx .cfx-snarvei__glass { background: rgba(43, 69, 47, 0.95); }
}

/* Ved hover letter fargen og uskarpheten tar over. Bildet er synlig gjennom
   glasset, men så utvisket at teksten står klart – brightness i filteret
   demper motivet uten å legge en flate over det. Tonen er Carfix-grønn i
   begge tilstandene, så stripen ikke skifter farge mens den åpner seg. */
.cfx .cfx-snarvei:hover .cfx-snarvei__glass,
.cfx .cfx-snarvei:focus-visible .cfx-snarvei__glass {
	background: rgba(43, 69, 47, 0.52);
	backdrop-filter: blur(26px) saturate(1.3) brightness(0.72);
	-webkit-backdrop-filter: blur(26px) saturate(1.3) brightness(0.72);
}

/* Uskarpheten alene kan ikke garantere kontrast mot et hvitt motiv.
   Skyggen bak bokstavene gjør det, og synes ikke på mørk bunn. */
.cfx .cfx-snarvei__navn,
.cfx .cfx-snarvei__tekst { text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5); }

.cfx .cfx-snarvei:hover .cfx-snarvei__navn,
.cfx .cfx-snarvei:focus-visible .cfx-snarvei__navn { color: var(--cfx-gul); }

.cfx .cfx-snarvei__ikon {
	display: grid;
	place-items: center;
	flex: 0 0 auto;
	width: calc(var(--cfx-skala) * 1.9rem);
	height: calc(var(--cfx-skala) * 1.9rem);
	border-radius: 50%;
	background: var(--cfx-gul);
	color: var(--cfx-knapp-tekst);
}

.cfx .cfx-snarvei__ikon .cfx-ikon {
	width: 58%;
	height: 58%;
}

.cfx .cfx-snarvei__navn {
	flex: 1 1 auto;
	min-width: 0;
	font-size: calc(var(--cfx-skala) * 0.95rem);
	font-weight: 700;
	line-height: 1.25;
}

/* Pilen ligger klar i kanten og kommer fram når man peker. */
.cfx .cfx-snarvei__glass .cfx-pil {
	flex: 0 0 auto;
	opacity: 0;
	transform: translateX(-5px);
	transition: opacity 0.25s ease, transform 0.25s ease;
}

.cfx .cfx-snarvei:hover .cfx-pil,
.cfx .cfx-snarvei:focus-visible .cfx-pil {
	opacity: 1;
	transform: none;
}

.cfx .cfx-snarvei:focus-visible {
	outline: 3px solid var(--cfx-gul);
	outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
	.cfx .cfx-snarvei,
	.cfx img.cfx-snarvei__bilde,
	.cfx .cfx-snarvei__media::after,
	.cfx .cfx-snarvei__glass,
	.cfx .cfx-snarvei__tekst,
	.cfx .cfx-snarvei__glass .cfx-pil { transition: none; }
}

/* To i bredden på telefon, og litt lavere kort så seks av dem ikke drar
   siden i langdrag. */
@media (max-width: 640px) {
	.cfx .cfx-snarveier__liste {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: calc(var(--cfx-skala) * 0.8rem);
	}
	.cfx .cfx-snarvei { aspect-ratio: 1 / 1; }
	/* Oddetall kort: det siste står ikke alene, men fyller begge kolonnene,
	   like høyt som de andre (29. oktober 2026). */
	.cfx .cfx-snarveier__liste { grid-auto-rows: 1fr; }
	.cfx .cfx-snarveier__liste > :last-child:nth-child(odd) { grid-column: 1 / -1; }
	.cfx .cfx-snarveier__liste > :last-child:nth-child(odd) .cfx-snarvei { aspect-ratio: auto; height: 100%; }
	.cfx .cfx-snarvei__navn { font-size: calc(var(--cfx-skala) * 0.9rem); }
	.cfx .cfx-snarvei__glass .cfx-pil { display: none; }
	.cfx .cfx-snarvei__tekst { display: none; }
}


/* Hele raden er trykkflaten: lenken ligger usynlig over den. Navnet slipper
   å konkurrere med en lenketekst under seg, og pekeren viser hva som skjer. */
.cfx-verksteder.cfx.cfx .cfx-region li {
	position: relative;
	border-radius: 8px;
	transition: background-color 0.2s ease;
}

/* `.cfx.cfx .cfx-region li > *` gir alle barna position: relative og veier
   tyngre enn en vanlig klasseselektor. Derfor nevnes både li og barnet her –
   ellers blir dekket liggende som et punkt på 0 × 0, og raden er ikke
   klikkbar i det hele tatt. */
.cfx-verksteder.cfx.cfx .cfx-region li > .cfx-region__gaa {
	position: absolute;
	inset: 0;
	z-index: 1;
	border-radius: inherit;
	cursor: pointer;
}

.cfx-verksteder.cfx.cfx .cfx-region li:hover,
.cfx-verksteder.cfx.cfx .cfx-region li:focus-within {
	background: rgba(43, 69, 47, 0.06);
}

/* Pilen viser at raden fører videre. */
.cfx-verksteder .cfx-region__rad::after {
	content: "›";
	flex: 0 0 auto;
	margin-left: calc(var(--cfx-skala) * 0.3rem);
	color: var(--cfx-gronn);
	font-size: calc(var(--cfx-skala) * 1.35rem);
	line-height: 1;
	transition: transform 0.2s ease;
}
.cfx-verksteder.cfx.cfx .cfx-region li:hover .cfx-region__rad::after {
	transform: translateX(3px);
}

/* Telefonnummeret skal kunne trykkes for seg, over dekket. */
/* Med peker er nummeret bare en opplysning: dekket ligger over, og alt i
   raden fører til verkstedsiden. På berøring kan man ikke peke for å se hva
   som skjer, så der spør vi i stedet – se valgkortet i skriptet. */
.cfx-verksteder.cfx.cfx .cfx-region li > .cfx-region__tlf {
	position: relative;
	z-index: 0;
	pointer-events: none;
}

/* Prikken med åpningstid ligger over dekket, ellers får den aldri pekeren,
   og boblen med «Åpent til 16:00» vises ikke. Raden løftes over dekket, men
   slipper pekeren gjennom, så resten av raden fortsatt går til verkstedet. */
.cfx-verksteder.cfx.cfx .cfx-region li > .cfx-region__rad {
	z-index: 2;
	pointer-events: none;
}
.cfx-verksteder.cfx.cfx .cfx-region .cfx-region__rad > .cfx-status {
	pointer-events: auto;
}

.cfx-verksteder.cfx.cfx .cfx-region li > .cfx-region__gaa:focus-visible {
	outline: 3px solid var(--cfx-gronn);
	outline-offset: -3px;
}

@media (prefers-reduced-motion: reduce) {
	.cfx-verksteder.cfx.cfx .cfx-region li,
	.cfx-verksteder .cfx-region__rad::after { transition: none; }
}

/* ---- Kontaktopplysningene i verkstedvelgeren ---------------------------
   Tjenestevalget tok den høyre halvdelen av kortet uten å gi noe tilbake.
   Nå står kortet smalt til man har valgt verksted. Da vokser det mot høyre og
   viser adressen, åpningstiden, telefonnummeret og veien til verkstedsiden.

   Veksten er en overgang på sporbredden, ikke et hopp. Begge tilstandene har
   to spor – det høyre er null bredt når ingenting er valgt – ellers har
   nettleseren ingenting å regne mellom, og boksen bytter bredde i ett sprang.

   Høyden er den samme i begge tilstandene, og panelet har fast bredde. Da ser
   kortet likt ut uansett hvilket verksted man velger: Søgne mangler
   åpningstider, og uten faste mål ville kortet krympe på det ene valget. */
.cfx .cfx-velger {
	position: relative;
	width: fit-content;
	max-width: 100%;
	align-content: start;
	grid-template-columns:
		fit-content(calc(var(--cfx-skala) * 22rem))
		minmax(0, 0rem);
	column-gap: 0;
	transition:
		grid-template-columns 620ms cubic-bezier(0.32, 0.72, 0, 1),
		column-gap 620ms cubic-bezier(0.32, 0.72, 0, 1);
}

/* Venstre spalte er så bred som knappene trenger, og ikke bredere. Da følger
   bredden teksten i knappene, og ingen må regne om et mål her om teksten
   endres. fit-content setter taket: blir en knappetekst urimelig lang,
   stopper spalten på 22rem og teksten brytes i knappen i stedet for at kortet
   sprenger toppseksjonen.

   Målet er det samme i begge tilstandene. Ga venstre spalte fra seg plass til
   panelet, krympet listen og knappene i det man valgte verksted. */
.cfx .cfx-velger.har-kort {
	grid-template-columns:
		fit-content(calc(var(--cfx-skala) * 22rem))
		minmax(0, calc(var(--cfx-skala) * 16rem));
	column-gap: calc(var(--cfx-skala) * 0.8rem);
}

/* Teksten i toppfeltets knapper står på én linje. «Bestill time» brakk i to
   da søkefeltet kom inn ved siden av. */
.cfx-topp .cfx-knapp { white-space: nowrap; }

/* Knappene skal stå ved siden av hverandre uansett hvor bred spalten blir.
   Er det trangt, krymper de i stedet for å brekke om på hver sin linje. */
.cfx .cfx-velger__handling {
	flex-wrap: nowrap;
}

.cfx .cfx-velger__handling .cfx-knapp {
	flex: 0 1 auto;
	min-width: 0;
	justify-content: center;
	padding-inline: calc(var(--cfx-skala) * 0.9rem);
}

/* Listen, knappene og statuslinjen er én spalte. Lå knappene i sin egen rad i
   skjemaets rutenett, falt de ned på linje med bunnen av panelet til høyre i
   stedet for å stå rett under nedtrekket. */
.cfx-velger__venstre {
	display: flex;
	flex-direction: column;
	gap: calc(var(--cfx-skala) * 0.8rem);
	align-self: start;
	min-width: 0;
}

/* Bare knappene skal bestemme bredden. Nedtrekket er like bredt som det
   lengste verkstednavnet og ville dratt spalten ut. Null bredde pluss full
   minstebredde holder det utenfor regnestykket og lar det fylle resultatet. */
.cfx-velger__felt {
	width: 0;
	min-width: 100%;
}

/* Beskjeden fra posisjonssøket står under kortet, på den mørke bunnen. Inne i
   kortet dyttet den knappene nedover, og boksen vokste i det den kom. */
.cfx .cfx-velger__status {
	position: absolute;
	top: calc(100% + var(--cfx-skala) * 0.6rem);
	left: 0;
	width: max-content;
	max-width: 100%;
	margin: 0;
	color: var(--cfx-gul);
	font-size: calc(var(--cfx-skala) * 0.95rem);
	font-weight: 600;
	line-height: 1.4;
}

@media (prefers-reduced-motion: reduce) {
	.cfx .cfx-velger,
	.cfx-velger__kontakt { transition: none; }
}

/* Panelet klippes av sporet mens det vokser. Streken mot listen tones inn,
   ellers står det en løs strek i kanten på et kort uten innhold. */
.cfx-velger__kontakt {
	align-self: start;
	min-width: 0;
	height: 0;
	overflow: hidden;
	padding-left: calc(var(--cfx-skala) * 1.1rem);
	border-left: 1px solid transparent;
	transition:
		height 620ms cubic-bezier(0.32, 0.72, 0, 1),
		border-color 620ms ease;
}

/* Fast høyde, ikke innholdets. Søgne mangler åpningstider, og uten målet her
   ville kortet krympe på det ene valget. Høyden er også det nettleseren
   regner mellom når kortet vokser. */
.cfx-velger.har-kort .cfx-velger__kontakt {
	height: calc(var(--cfx-skala) * 8.7rem);
	border-left-color: var(--cfx-kant);
}

/* Fast bredde, så teksten ikke brytes om mens kortet vokser. */
.cfx-velger__kort {
	display: none;
	width: calc(var(--cfx-skala) * 14.9rem);
}

.cfx-velger__kort.er-synlig { display: block; }

/* Opplysningene kommer etter kanten, ikke sammen med den: de tones inn fra
   venstre mens panelet åpner seg, en linje om gangen. Animasjonen ligger på
   linjene og ikke på kortet, fordi en transform på kortet ville gjort det til
   utgangspunkt for statusmerket og flyttet merket ut av hjørnet. */
@keyframes cfx-velger-inn {
	from {
		opacity: 0;
		transform: translateX(calc(var(--cfx-skala) * -0.9rem));
	}
	to {
		opacity: 1;
		transform: none;
	}
}

.cfx-velger__kort.er-synlig > * {
	animation: cfx-velger-inn 440ms cubic-bezier(0.32, 0.72, 0, 1) 140ms both;
}

.cfx-velger__kort.er-synlig > :nth-child(2) { animation-delay: 200ms; }
.cfx-velger__kort.er-synlig > :nth-child(3) { animation-delay: 260ms; }
.cfx-velger__kort.er-synlig > :nth-child(4) { animation-delay: 320ms; }
.cfx-velger__kort.er-synlig > :nth-child(5) { animation-delay: 380ms; }

@media (prefers-reduced-motion: reduce) {
	.cfx-velger__kort.er-synlig > * { animation: none; }
}

.cfx .cfx-velger__linje {
	display: grid;
	grid-template-columns: auto 1fr;
	align-items: start;
	gap: calc(var(--cfx-skala) * 0.5rem);
	margin-block: 0 calc(var(--cfx-skala) * 0.45rem);
	font-size: calc(var(--cfx-skala) * 0.9rem);
	line-height: 1.4;
	color: var(--cfx-tekst);
}

.cfx .cfx-velger__linje .cfx-ikon {
	width: calc(var(--cfx-skala) * 1.05rem);
	height: calc(var(--cfx-skala) * 1.05rem);
	margin-top: 0.15em;
	color: var(--cfx-gronn);
}

/* Telefonnummeret er det ene i opplysningene man trykker på. Resten er tekst. */
.cfx .cfx-velger__linje a {
	width: fit-content;
	color: var(--cfx-tittel);
	font-weight: 700;
	text-decoration: none;
}

.cfx .cfx-velger__linje a:hover,
.cfx .cfx-velger__linje a:focus-visible {
	color: var(--cfx-gronn);
	text-decoration: underline;
}

/* Statusmerket står i hjørnet øverst til høyre på hele kortet, ikke i
   teksten. Det hører til verkstedet som helhet, ikke til en av linjene.

   Det er plassert mot skjemaet, ikke mot panelet. Panelet klipper det som går
   utenfor mens kortet vokser, og boblen over merket ville blitt klippet med.
   Et absolutt plassert element klippes bare av forfedre som også er dets
   utgangspunkt, og panelet er ikke det – skjemaet er. */
.cfx-velger__kort .cfx-status {
	position: absolute;
	top: calc(var(--cfx-skala) * 1.1rem);
	right: calc(var(--cfx-skala) * 1.1rem);
	z-index: 3;
}

/* Boblen skal over alt annet i kortet, også over nedtrekket ved siden av. */
.cfx-velger__kort .cfx-status .cfx-boble { z-index: 20; }

.cfx .cfx-velger__gaa {
	margin-block: calc(var(--cfx-skala) * 0.6rem) 0;
	font-size: calc(var(--cfx-skala) * 0.9rem);
}

/* Lenker i toppseksjonen står på mørk bunn og lysner til hvitt ved hover.
   Denne står på det hvite kortet og ble usynlig av den regelen. */
.cfx-hero .cfx-velger__gaa:hover,
.cfx-hero .cfx-velger__gaa:focus-visible {
	color: var(--cfx-gronn-lys);
	border-bottom-color: currentColor;
}

/* Under denne bredden har toppseksjonen ikke plass til to spalter, og panelet
   ville blitt klippet. Da står opplysningene under listen i stedet, med en
   strek over seg i stedet for ved siden av. */
@media (max-width: 1400px) {
	.cfx .cfx-velger,
	.cfx .cfx-velger.har-kort {
		width: auto;
		grid-template-columns: minmax(0, 1fr);
		column-gap: 0;
	}

	.cfx-velger__kontakt {
		display: none;
		height: auto;
		padding-left: 0;
		border-left: 0;
	}

	.cfx-velger.har-kort .cfx-velger__kontakt {
		display: block;
		height: auto;
		padding-top: calc(var(--cfx-skala) * 0.9rem);
		border-top: 1px solid var(--cfx-kant);
	}

	.cfx-velger__kort { width: auto; }

	/* Knappene deler linjen likt. Den gule tok full bredde her fra en eldre
	   regel, og skjøv den andre ut av kortet. */
	.cfx .cfx-velger__handling .cfx-knapp {
		flex: 1 1 0;
		width: auto;
	}

	/* Merket står i hjørnet av kortet også her, men kortet er nå hele bredden. */
	.cfx-velger__kort .cfx-status {
		position: static;
		margin-bottom: calc(var(--cfx-skala) * 0.5rem);
	}
}

/* ---- Avslutningen ------------------------------------------------------ */
/* «Betal når det passer – Carfix Bilkonto» var siste seksjon før footeren på
   tjeneste- og områdesidene. En side skal ikke slutte på et tilbud om
   finansiering. Denne står etter den og peker videre. */
/* Mørk, ikke samme grønn som Bilkonto rett over. Ellers smelter de to
   seksjonene sammen til én lang flate. */
.cfx-avslutning.cfx {
	padding-block: calc(var(--cfx-skala) * 5rem);
	background: var(--cfx-morkt);
	color: #fff;
}

/* Midtstilt. Dette er veien videre, ikke en opplysning ved siden av noe
   annet, og da skal den stå midt i bildet. */
.cfx .cfx-avslutning__rad {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: calc(var(--cfx-skala) * 1.5rem);
	text-align: center;
}

.cfx .cfx-avslutning__tekst {
	min-width: 0;
	max-width: calc(var(--cfx-skala) * 34rem);
}

.cfx .cfx-avslutning__tittel {
	margin-block: 0 calc(var(--cfx-skala) * 0.5rem);
	font-size: calc(var(--cfx-skala) * 1.75rem);
	line-height: 1.2;
	color: #fff;
}

.cfx .cfx-avslutning__ingress {
	margin-block: 0;
	font-size: calc(var(--cfx-skala) * 1.05rem);
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.85);
}

.cfx .cfx-avslutning__handling {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: calc(var(--cfx-skala) * 0.7rem);
	margin-block: 0;
}


/* Telefonnummeret står med ikon og skal leses som en knapp, ikke en lenke. */
.cfx .cfx-avslutning__handling .cfx-knapp--ramme {
	gap: calc(var(--cfx-skala) * 0.5rem);
	border-color: rgba(255, 255, 255, 0.5);
	color: #fff;
}

.cfx .cfx-avslutning__handling .cfx-knapp--ramme:hover,
.cfx .cfx-avslutning__handling .cfx-knapp--ramme:focus-visible {
	background: var(--cfx-gul);
	border-color: var(--cfx-gul);
	color: var(--cfx-knapp-tekst);
}

.cfx .cfx-avslutning__handling .cfx-ikon {
	width: calc(var(--cfx-skala) * 1.1rem);
	height: calc(var(--cfx-skala) * 1.1rem);
}

@media (max-width: 680px) {
	.cfx-avslutning.cfx { padding-block: calc(var(--cfx-skala) * 3.25rem); }
	.cfx .cfx-avslutning__handling .cfx-knapp { flex: 1 1 100%; justify-content: center; }
}


/* ---- Stedsfilter i verkstedvelgeren ------------------------------------ */
/* Elleve verksteder i én liste er mye å lese når man bare skal finne sitt
   eget sted. Knappene viser hvor mange som ligger hvert sted, så man vet hva
   man får før man trykker. */
.cfx .cfx-verksteder__steder {
	display: flex;
	flex-wrap: wrap;
	gap: calc(var(--cfx-skala) * 0.5rem);
	margin-bottom: calc(var(--cfx-skala) * 1.25rem);
}

.cfx .cfx-sted {
	display: inline-flex;
	align-items: center;
	gap: calc(var(--cfx-skala) * 0.45rem);
	min-height: calc(var(--cfx-skala) * 2.4rem);
	padding: calc(var(--cfx-skala) * 0.35rem) calc(var(--cfx-skala) * 0.9rem);
	border: 1px solid var(--cfx-kant);
	border-radius: 999px;
	background: #fff;
	color: var(--cfx-tittel);
	font-family: inherit;
	font-size: calc(var(--cfx-skala) * 0.95rem);
	font-weight: 600;
	cursor: pointer;
	transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.cfx .cfx-sted__tall {
	font-size: calc(var(--cfx-skala) * 0.8rem);
	font-weight: 500;
	color: var(--cfx-dempet);
}

.cfx .cfx-sted:hover,
.cfx .cfx-sted:focus-visible {
	border-color: var(--cfx-gronn);
	background: color-mix(in srgb, var(--cfx-gronn) 8%, #fff);
}

.cfx .cfx-sted.er-valgt {
	border-color: var(--cfx-gronn);
	background: var(--cfx-gronn);
	color: #fff;
}

.cfx .cfx-sted.er-valgt .cfx-sted__tall { color: rgba(255, 255, 255, 0.75); }

.cfx .cfx-sted:focus-visible {
	outline: 3px solid var(--cfx-gronn);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	.cfx .cfx-sted { transition: none; }
}

/* =========================================================================
 * Toppfeltet
 * =========================================================================
 * Temaets header er 80 px høy med en logo på 130×100 som ikke får plass, to
 * knapper på 55 px, og hele menyen bak en hamburger også på bred skjerm.
 *
 * Her er det én meny. Ikke tre nedtrekk man må åpne og lukke seg fram
 * gjennom, men ett panel som viser hele tilbudet i ett blikk: tjenestene
 * gruppert slik kunden tenker, verkstedene gruppert på by, og resten.
 *
 * Menyen bygges av tjeneste- og verkstedsidene. Den kan ikke skille lag med
 * dem, slik de håndskrevne menyene gjorde.
 */
.cfx-topp {
	position: sticky;
	top: 0;
	z-index: 100;
	background: var(--cfx-gronn);
	color: #fff;
	font-size: calc(var(--cfx-skala) * 1rem);
}

/* Med menyen åpen legger siden seg i bakgrunnen: resten blir uskarp og
   dempet, så blikket blir i menyen. Headeren står utenfor filteret, ellers
   ville den blitt uskarp sammen med resten. */
body:has(.cfx-meny:not([hidden])) .l-canvas > *:not(.cfx-topp),
body:has(.cfx-meny:not([hidden])) .l-footer {
	filter: blur(4px);
	transition: filter 0.3s ease;
	pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
	body:has(.cfx-meny:not([hidden])) .l-canvas > *:not(.cfx-topp),
	body:has(.cfx-meny:not([hidden])) .l-footer { transition: none; }
}

/* Temaets eget toppfelt skjules når vårt står der. Temaets header er
   position: fixed, og temaet kompenserer med padding-top på første seksjon,
   like høy som --header-height. Vår ligger i flyten, så den paddingen ble et
   hvitt gap under headeren. Null den ut, og la vår egen høyde styre hvor
   langt ned en ankerlenke skal hoppe. */
body:has(.cfx-topp) .l-header { display: none; }

body:has(.cfx-topp) {
	--header-height: 0px;
	--cfx-topp-hoyde: calc(var(--cfx-skala) * 5.6rem);
	--cfx-topp-knapp: calc(var(--cfx-skala) * 2.7rem);
}

body:has(.cfx-topp) .cfx {
	scroll-margin-top: calc(var(--cfx-topp-hoyde) + calc(var(--cfx-skala) * 1rem));
}

.cfx-topp__rad {
	display: flex;
	align-items: center;
	gap: calc(var(--cfx-skala) * 1.25rem);
	height: var(--cfx-topp-hoyde);
	/* Samme regnestykke som seksjonene bruker, og ingen max-width i tillegg:
	   med begge deler ble innholdsbredden 1440 px minus paddingen, og
	   toppfeltet sto 72 px smalere enn resten av siden. */
	padding-inline: max(clamp(calc(var(--cfx-skala) * 1rem), 4vw, calc(var(--cfx-skala) * 3rem)), (100% - var(--cfx-bredde)) / 2);
}

/* Logoen er merkevaren og skal leses på avstand. Temaets 100 px sprengte
   raden; 38 px står støtt i et felt på 75. */
.cfx-topp__logo {
	display: flex;
	align-items: center;
	flex: 0 0 auto;
	margin-right: auto;
	color: var(--cfx-gul);
	font-size: calc(var(--cfx-skala) * 1.5rem);
	font-weight: 800;
	letter-spacing: 0.02em;
	text-decoration: none;
}

.cfx-topp__logo img {
	display: block;
	/* --cfx-logo er høyden hele logoflaten får. En ny logo vises hel. */
	--cfx-logo: calc(var(--cfx-skala) * 5.2rem);
	width: auto;
	height: var(--cfx-logo);
	/* Samme utbretting som temaets logo hadde: fra en strek i midten til hel
	   bredde. Den er verdt å beholde. */
	animation: cfx-brett-ut 0.6s cubic-bezier(0.32, 0.72, 0, 1) both;
}

/* carfix-logo_v2.svg har luft i selve filen: tegneflaten er 150 × 86, men
   ordmerket ligger fra y 20 til 41, i øvre halvdel, og hang høyt over
   knappene. Vi viser et vindu på 32 av 86 rundt ordmerket, i samme størrelse.
   Klassen settes i header.php bare for akkurat den filen, så en ny logo ikke
   beskjæres etter disse målene. (28. oktober 2026) */
.cfx-topp__logo img.cfx-topp__logo--utsnitt {
	width: calc(var(--cfx-logo) * 150 / 86);
	height: calc(var(--cfx-logo) * 32 / 86);
	object-fit: cover;
	object-position: 50% 26.3%;
}

@keyframes cfx-brett-ut {
	from { opacity: 0; transform: scaleX(0.01); }
	to   { opacity: 1; transform: scaleX(1); }
}

@media (prefers-reduced-motion: reduce) {
	.cfx-topp__logo img { animation: none; }
}

/* ---- Menyknappen -------------------------------------------------------- */
.cfx-topp__knapp {
	display: inline-flex;
	align-items: center;
	gap: calc(var(--cfx-skala) * 0.6rem);
	height: var(--cfx-topp-knapp);
	padding: 0 calc(var(--cfx-skala) * 1rem);
	border: 1px solid rgba(255, 255, 255, 0.3);
	border-radius: 999px;
	background: transparent;
	color: #fff;
	font-family: inherit;
	font-size: calc(var(--cfx-skala) * 1rem);
	font-weight: 700;
	line-height: 1;
	cursor: pointer;
	transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.cfx-topp__knapp:hover,
.cfx-topp__knapp[aria-expanded="true"] {
	background: rgba(255, 255, 255, 0.14);
	border-color: rgba(255, 255, 255, 0.5);
}

.cfx-topp__knapp:focus-visible {
	outline: 3px solid var(--cfx-gul);
	outline-offset: 2px;
}

/* Tre streker som blir et kryss når menyen står åpen. */
.cfx-topp__strek {
	position: relative;
	display: block;
	width: calc(var(--cfx-skala) * 1.15rem);
	height: 2px;
	background: currentColor;
	border-radius: 2px;
	transition: background-color 0.2s ease;
}

.cfx-topp__strek::before,
.cfx-topp__strek::after {
	content: "";
	position: absolute;
	left: 0;
	width: 100%;
	height: 2px;
	background: currentColor;
	border-radius: 2px;
	transition: transform 0.2s ease;
}

.cfx-topp__strek::before { top: -6px; }
.cfx-topp__strek::after { top: 6px; }

.cfx-topp__knapp[aria-expanded="true"] .cfx-topp__strek { background: transparent; }
.cfx-topp__knapp[aria-expanded="true"] .cfx-topp__strek::before { transform: translateY(6px) rotate(45deg); }
.cfx-topp__knapp[aria-expanded="true"] .cfx-topp__strek::after { transform: translateY(-6px) rotate(-45deg); }

/* ---- Telefon og bestilling ---------------------------------------------- */
.cfx-topp__handling {
	display: flex;
	align-items: center;
	gap: calc(var(--cfx-skala) * 0.9rem);
	flex: 0 0 auto;
}

/* Søket lå i temaets header og forsvant med den. Her er det et vanlig felt
   mot WordPress sitt eget søk, ikke en popup man må finne fram til. */
.cfx-topp__sok {
	position: relative;
	display: flex;
	align-items: center;
	flex: 0 1 calc(var(--cfx-skala) * 11rem);
	min-width: calc(var(--cfx-skala) * 6.5rem);
}

.cfx-topp__sok .cfx-ikon {
	position: absolute;
	left: calc(var(--cfx-skala) * 0.7rem);
	width: calc(var(--cfx-skala) * 1.05rem);
	height: calc(var(--cfx-skala) * 1.05rem);
	color: rgba(255, 255, 255, 0.7);
	pointer-events: none;
}

.cfx-topp__sok input {
	width: 100%;
	box-sizing: border-box;
	height: var(--cfx-topp-knapp);
	/* Temaet setter min-height på alle inputfelter, og den vant over høyden
	   her – søkefeltet ble åtte piksler høyere enn knappene ved siden av. */
	min-height: 0;
	line-height: 1;
	padding: 0 calc(var(--cfx-skala) * 0.8rem) 0 calc(var(--cfx-skala) * 2.2rem);
	border: 1px solid rgba(255, 255, 255, 0.3);
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.1);
	color: #fff;
	font-family: inherit;
	font-size: calc(var(--cfx-skala) * 0.95rem);
	transition: background-color 0.18s ease, border-color 0.18s ease;
}

.cfx-topp__sok input::placeholder { color: rgba(255, 255, 255, 0.65); }

/* Teksten man skriver skal være hvit, ikke temaets mørke inputfarge.
   Klassen gjentas for å få vekt nok. */
.cfx-topp .cfx-topp__sok input.cfx-topp__sokfelt { color: #fff; }

/* Nettleserens eget kryss er blått og passer ikke. Vi tegner vårt eget i
   samme hvitt som resten, og det vises bare når feltet har tekst. */
.cfx-topp__sok input::-webkit-search-cancel-button {
	-webkit-appearance: none;
	appearance: none;
	width: calc(var(--cfx-skala) * 0.9rem);
	height: calc(var(--cfx-skala) * 0.9rem);
	background: rgba(255, 255, 255, 0.75);
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E") center / contain no-repeat;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E") center / contain no-repeat;
	cursor: pointer;
}

.cfx-topp__sok input::-webkit-search-cancel-button:hover { background: #fff; }

.cfx-topp__sok input:hover,
.cfx-topp__sok input:focus {
	background: rgba(255, 255, 255, 0.16);
	border-color: rgba(255, 255, 255, 0.55);
}

.cfx-topp__sok input:focus-visible {
	outline: 3px solid var(--cfx-gul);
	outline-offset: 2px;
}

/* Telefonnummeret som knapp, ved siden av bestillingsknappen. */
.cfx-topp .cfx-topp__ring {
	gap: calc(var(--cfx-skala) * 0.45rem);
	border: 1px solid rgba(255, 255, 255, 0.35);
	background: transparent;
	color: #fff;
	white-space: nowrap;
}

.cfx-topp .cfx-topp__ring .cfx-ikon {
	width: calc(var(--cfx-skala) * 1.05rem);
	height: calc(var(--cfx-skala) * 1.05rem);
	color: var(--cfx-gul);
}

.cfx-topp .cfx-topp__ring:hover,
.cfx-topp .cfx-topp__ring:focus-visible {
	background: rgba(255, 255, 255, 0.14);
	border-color: rgba(255, 255, 255, 0.6);
}

/* Søkefeltet, menyknappen og de to knappene er like høye. Inputen regnet
   rammen utenom høyden sin og ble åtte piksler høyere enn resten. */
.cfx-topp .cfx-topp__ring,
.cfx-topp .cfx-topp__bestill {
	height: var(--cfx-topp-knapp);
	min-height: 0;
	padding-inline: calc(var(--cfx-skala) * 1.1rem);
	font-size: calc(var(--cfx-skala) * 1rem);
}

/* ---- Megamenyen --------------------------------------------------------- */
/* Alt i ett panel. Faner ble prøvd og forkastet: det som ligger bak en fane
   er det noen aldri finner.
   Tjenestene er det folk kommer for, så de tar bredden. Verkstedene er elleve
   navn uten mening før man vet hvor man er, så de får én lenke til oversikten
   der man kan søke og filtrere. Da får hele menyen plass på én skjerm. */
.cfx-meny {
	position: absolute;
	inset: 100% 0 auto 0;
	background: #fff;
	color: var(--cfx-tekst);
	box-shadow: 0 28px 56px -28px rgba(0, 0, 0, 0.5);
}

.cfx-meny__rad {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: calc(var(--cfx-skala) * 3rem);
	padding: calc(var(--cfx-skala) * 1.75rem) max(clamp(calc(var(--cfx-skala) * 1rem), 4vw, calc(var(--cfx-skala) * 3rem)), (100% - var(--cfx-bredde)) / 2) calc(var(--cfx-skala) * 1.75rem);
}

.cfx-meny__hode {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: calc(var(--cfx-skala) * 1rem);
	margin-bottom: calc(var(--cfx-skala) * 1.1rem);
	padding-bottom: calc(var(--cfx-skala) * 0.6rem);
	border-bottom: 1px solid var(--cfx-gronn);
}

.cfx-meny__hode h2 {
	margin: 0;
	padding: 0;
	font-size: calc(var(--cfx-skala) * 1.15rem);
	font-weight: 800;
	line-height: 1.2;
	color: var(--cfx-tittel);
}

/* Lenken i hodet står ved siden av overskriften og hører til den: samme
   svarte farge og vekt, ikke den lyse grønne lenkefargen. */
.cfx-meny .cfx-meny__hode .cfx-lenke {
	font-size: calc(var(--cfx-skala) * 0.9rem);
	font-weight: 700;
	color: var(--cfx-tittel);
}

.cfx-meny .cfx-meny__hode .cfx-lenke:hover,
.cfx-meny .cfx-meny__hode .cfx-lenke:focus-visible { color: var(--cfx-gronn); }

/* Spalter som flyter, ikke et rutenett. I fire like spalter sto «Kontroll»
   med to punkter ved siden av «Dekk og felg» med seks, og raden ble like høy
   som den høyeste – et tomrom på fire linjer under de korte listene.
   Her fyller gruppene etter hverandre og pakker seg, så «For bedrift» legger
   seg under «Kontroll» i stedet for å stå alene i en spalte. */
.cfx-meny__spalter {
	columns: 2;
	column-gap: calc(var(--cfx-skala) * 2rem);
}

.cfx-meny__gruppe {
	break-inside: avoid;
	margin-bottom: calc(var(--cfx-skala) * 1.25rem);
}

.cfx-meny__gruppe:last-child { margin-bottom: 0; }


.cfx-meny__tittel {
	margin-block: 0 calc(var(--cfx-skala) * 0.5rem);
	padding-bottom: calc(var(--cfx-skala) * 0.4rem);
	border-bottom: 1px solid var(--cfx-kant);
	font-size: calc(var(--cfx-skala) * 0.75rem);
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--cfx-gronn);
}

.cfx-meny ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Alle punktene fyller spalten, så klikkflaten er den samme enten navnet er
   «Felger» eller «Oljeskift på bil». Spalten er en drøy tredjedel av menyen,
   ikke hele bredden – det var dét som gjorde at halve menyen lyste opp. */
.cfx-meny__spalter ul { width: 100%; }

.cfx-meny__spalter li a {
	width: 100%;
	white-space: nowrap;
}

/* Klikkflaten følger teksten, ikke spalten. Strakk den seg over hele
   spaltebredden, lyste halve menyen opp når pekeren var i nærheten – og det
   var lett å treffe noe annet enn det man siktet på. */
.cfx-meny__spalter a,
.cfx-meny__om ul a {
	display: inline-flex;
	width: fit-content;
	max-width: 100%;
	align-items: center;
	gap: calc(var(--cfx-skala) * 0.55rem);
	/* Litt å gå på til høyre for teksten, så man ikke må treffe bokstavene
	   nøyaktig – men ikke hele spaltebredden, som lyste opp halve menyen. */
	padding: calc(var(--cfx-skala) * 0.4rem) calc(var(--cfx-skala) * 1.5rem) calc(var(--cfx-skala) * 0.4rem) calc(var(--cfx-skala) * 0.5rem);
	margin-inline: calc(var(--cfx-skala) * -0.5rem) calc(var(--cfx-skala) * -1.5rem);
	border-radius: 8px;
	color: var(--cfx-tittel);
	font-weight: 600;
	line-height: 1.3;
	text-decoration: none;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.cfx-meny__spalter a:hover,
.cfx-meny__spalter a:focus-visible,
.cfx-meny__om ul a:hover,
.cfx-meny__om ul a:focus-visible {
	background: color-mix(in srgb, var(--cfx-gronn) 8%, #fff);
	color: var(--cfx-gronn);
}

.cfx-meny__ikon {
	display: grid;
	place-items: center;
	flex: 0 0 auto;
	width: calc(var(--cfx-skala) * 1.6rem);
	height: calc(var(--cfx-skala) * 1.6rem);
	border-radius: 50%;
	background: var(--cfx-gul);
	color: var(--cfx-knapp-tekst);
}

.cfx-meny__ikon .cfx-ikon { width: 58%; height: 58%; }

/* ---- Den smale spalten -------------------------------------------------- */
.cfx-meny__side {
	display: flex;
	flex-direction: column;
	gap: calc(var(--cfx-skala) * 1.5rem);
	padding-left: calc(var(--cfx-skala) * 2.5rem);
	border-left: 1px solid var(--cfx-kant);
}

/* Verkstedene som én vei videre, ikke elleve navn. Oversikten har søk,
   filter og kart; menyen skal bare peke dit. */
.cfx-meny__verksteder {
	display: flex;
	align-items: center;
	gap: calc(var(--cfx-skala) * 1rem);
	padding: calc(var(--cfx-skala) * 1.1rem);
	border: 1px solid var(--cfx-kant);
	border-radius: 12px;
	background: var(--cfx-flate);
	color: var(--cfx-tittel);
	text-decoration: none;
	transition: background-color 0.15s ease, border-color 0.15s ease;
}

.cfx-meny__verksteder:hover,
.cfx-meny__verksteder:focus-visible {
	border-color: var(--cfx-gronn);
	background: color-mix(in srgb, var(--cfx-gronn) 8%, #fff);
}

.cfx-meny__ikon--stort {
	width: calc(var(--cfx-skala) * 2.8rem);
	height: calc(var(--cfx-skala) * 2.8rem);
}

.cfx-meny__verkstedtekst {
	display: flex;
	flex-direction: column;
	gap: calc(var(--cfx-skala) * 0.1rem);
	min-width: 0;
	margin-right: auto;
}

.cfx-meny__verkstednavn {
	font-size: calc(var(--cfx-skala) * 1.05rem);
	font-weight: 700;
	line-height: 1.2;
}

.cfx-meny__verksteder small {
	font-size: calc(var(--cfx-skala) * 0.8rem);
	font-weight: 500;
	line-height: 1.35;
	color: var(--cfx-dempet);
}

.cfx-meny__fanepil {
	flex: 0 0 auto;
	width: calc(var(--cfx-skala) * 1.15rem);
	height: calc(var(--cfx-skala) * 1.15rem);
	color: var(--cfx-dempet);
	transition: transform 0.15s ease, color 0.15s ease;
}

.cfx-meny__verksteder:hover .cfx-meny__fanepil,
.cfx-meny__verksteder:focus-visible .cfx-meny__fanepil {
	color: var(--cfx-gronn);
	transform: translateX(3px);
}

.cfx-meny__om ul {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: calc(var(--cfx-skala) * 0.15rem) calc(var(--cfx-skala) * 1.5rem);
}

/* Alle punktene like brede. «FAQ» fikk ellers en klikkflate på tre bokstaver
   mens «Håndverkertjenesteloven» fikk hele cellen. */
.cfx-meny__om ul a {
	width: 100%;
	font-size: calc(var(--cfx-skala) * 1rem);
}

.cfx-meny__handling {
	display: flex;
	gap: calc(var(--cfx-skala) * 0.6rem);
	margin-block: 0;
	padding-top: calc(var(--cfx-skala) * 0.5rem);
}

.cfx-meny__handling .cfx-knapp {
	flex: 1 1 0;
	min-width: 0;
	justify-content: center;
	min-height: calc(var(--cfx-skala) * 2.8rem);
	white-space: nowrap;
}

/* Telefonnummeret er en knapp her, ikke en lenke under en knapp: de to er
   likeverdige veier videre. */
.cfx-meny .cfx-meny__ring {
	gap: calc(var(--cfx-skala) * 0.45rem);
	border-color: var(--cfx-gronn);
	color: var(--cfx-gronn);
}

.cfx-meny .cfx-meny__ring:hover,
.cfx-meny .cfx-meny__ring:focus-visible {
	background: var(--cfx-gronn);
	border-color: var(--cfx-gronn);
	color: #fff;
}

.cfx-meny__ring .cfx-ikon {
	width: calc(var(--cfx-skala) * 1.05rem);
	height: calc(var(--cfx-skala) * 1.05rem);
}

/* ---- Smalere skjermer --------------------------------------------------- */
@media (max-width: 1100px) {
	/* dvh: på telefon er 100vh høyere enn det som synes når adressefeltet står
	   fremme, og knappene nederst havnet under kanten. */
	.cfx-meny { max-height: calc(100dvh - var(--cfx-topp-hoyde)); overflow-y: auto; overscroll-behavior: contain; }

	.cfx-meny__rad {
		--cfx-meny-luft: clamp(calc(var(--cfx-skala) * 1rem), 4vw, calc(var(--cfx-skala) * 3rem));
		grid-template-columns: minmax(0, 1fr);
		gap: calc(var(--cfx-skala) * 1.5rem);
		padding-bottom: 0;
	}

	/* Rekkefølgen på telefon (28. oktober 2026): «Finn ditt verksted» først,
	   så tjenestene og «Om Carfix», og «Bestill time» og telefonen klistret
	   nederst. Sidekolonnen løses opp med display: contents, så delene kan
	   ordnes enkeltvis – HTML-en er den samme som på PC. */
	.cfx-meny__side { display: contents; }
	.cfx-meny__verksteder { order: -1; }
	.cfx-meny__tjenester { order: 0; }
	/* «Håndverkertjenesteloven» fikk ikke plass i to spalter på 320 px, og
	   menyen kunne rulles 26 px sidelengs. Spaltene følger nå bredden, som
	   tjenestene, og et for langt ord brytes heller enn å stikke ut. */
	.cfx-meny__om ul {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(min(100%, 12rem), 1fr));
		columns: auto;
	}
	.cfx-meny__om ul a { overflow-wrap: break-word; }
	.cfx-meny__om {
		order: 1;
		padding-top: calc(var(--cfx-skala) * 1.5rem);
		border-top: 1px solid var(--cfx-kant);
	}

	/* Klistret til bunnen av menyen, i full bredde. Toningen over viser at
	   det er mer å rulle til, så menyen ikke ser ferdig ut på første skjerm. */
	.cfx-meny__handling {
		order: 2;
		position: sticky;
		bottom: 0;
		z-index: 2;
		margin-inline: calc(var(--cfx-meny-luft) * -1);
		padding: calc(var(--cfx-skala) * 0.85rem) var(--cfx-meny-luft) max(calc(var(--cfx-skala) * 0.85rem), env(safe-area-inset-bottom));
		background: #fff;
		border-top: 1px solid var(--cfx-kant);
	}
	.cfx-meny__handling::before {
		content: "";
		position: absolute;
		inset: auto 0 100% 0;
		height: calc(var(--cfx-skala) * 2.5rem);
		background: linear-gradient(to top, #fff, rgba(255, 255, 255, 0));
		pointer-events: none;
	}

	.cfx-meny__spalter { columns: 1; }
	.cfx-meny__handling { margin-top: 0; }

	/* Hver kategori er et lyst panel, og tjenestene står i et rutenett som
	   fyller bredden. Kolonnebredden er i rem, så den følger tekststørrelsen:
	   to spalter på en vanlig telefon, én på 320 px eller med forstørret
	   tekst. Ingenting skjules. */
	.cfx-meny__gruppe {
		margin-bottom: calc(var(--cfx-skala) * 0.75rem);
		padding: calc(var(--cfx-skala) * 0.9rem) calc(var(--cfx-skala) * 1rem);
		border-radius: calc(var(--cfx-radius) * 0.7);
		background: var(--cfx-flate-lys);
		border: 1px solid var(--cfx-kant);
	}

	.cfx-meny__gruppe > ul {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(min(100%, 9.5rem), 1fr));
		gap: calc(var(--cfx-skala) * 0.25rem) calc(var(--cfx-skala) * 1rem);
	}
}

@media (max-width: 620px) {
	.cfx-topp__rad { gap: calc(var(--cfx-skala) * 0.75rem); }
	.cfx-topp__sok { display: none; }
	.cfx-topp__ring span { display: none; }
	.cfx-topp__knappetekst { display: none; }
	.cfx-topp__knapp { padding-inline: calc(var(--cfx-skala) * 0.8rem); }
	.cfx-topp .cfx-topp__bestill { padding-inline: calc(var(--cfx-skala) * 0.9rem); }
	.cfx-meny__spalter { columns: 1; }

	/* Tre knapper med tre former – 48 px avlang, 52 × 48 og en oval på
	   39 × 43 – så urolig ut. Nå samme høyde og samme hjørner, og telefon og
	   meny er kvadrater. 44 px er minste trykkflate Apple anbefaler. */
	/* --cfx-topp-knapp er høyden alle tre allerede leser. Dobbel klasse, fordi
	   den generelle knappregelen (min-height 48 px) står lenger ned. */
	.cfx-topp { --cfx-topp-knapp: 44px; }
	.cfx-topp.cfx-topp .cfx-topp__bestill,
	.cfx-topp.cfx-topp .cfx-topp__ring,
	.cfx-topp.cfx-topp .cfx-topp__knapp {
		box-sizing: border-box;
		height: var(--cfx-topp-knapp);
		min-height: 0;
		border-radius: 8px;
	}
	.cfx-topp.cfx-topp .cfx-topp__ring,
	.cfx-topp.cfx-topp .cfx-topp__knapp {
		width: var(--cfx-topp-knapp);
		padding: 0;
		justify-content: center;
	}
}

/* Små telefoner (iPhone SE, 320 px): logo, «Bestill time», telefon og meny
   var 38 px for brede, og menyknappen lå utenfor skjermen. Mindre logo og
   tettere knapper. */
@media (max-width: 380px) {
	.cfx-topp__logo img { --cfx-logo: calc(var(--cfx-skala) * 3.6rem); }
	.cfx-topp__rad { gap: calc(var(--cfx-skala) * 0.5rem); }
	.cfx-topp__handling { gap: calc(var(--cfx-skala) * 0.45rem); }
	.cfx-topp .cfx-topp__bestill { padding-inline: calc(var(--cfx-skala) * 0.7rem); }
}

@media (prefers-reduced-motion: reduce) {
	.cfx-topp__knapp,
	.cfx-topp__strek,
	.cfx-topp__strek::before,
	.cfx-topp__strek::after,
	.cfx-meny__verksteder,
	.cfx-meny__fanepil,
	.cfx-meny__spalter a,
	.cfx-meny__om ul a { transition: none; }
}


/* ---- Valg på berøring --------------------------------------------------- */
/* En rad fører to steder: til verkstedsiden eller til telefonen. Med peker
   skiller hover de to fra hverandre; med finger gjør den ikke det. Da spør vi
   i stedet for å gjette. */
.cfx-valg[open] {
	/* Festet til bunnen, ikke en fullskjerm med kortet nederst: på iPhone
	   endres 100 % høyde mens verktøylinjen flytter seg, og kortet sto først
	   midt på skjermen før det gled ned (30. oktober 2026). */
	position: fixed;
	inset: auto 0 0;
	z-index: 200;
	display: block;
	width: 100%;
	max-width: none;
	height: auto;
	max-height: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
}

.cfx-valg::backdrop { background: rgba(14, 24, 16, 0.5); }

.cfx-valg__kort {
	width: 100%;
	padding: calc(var(--cfx-skala) * 1.25rem) clamp(calc(var(--cfx-skala) * 1rem), 5vw, calc(var(--cfx-skala) * 2rem)) calc(var(--cfx-skala) * 1.5rem);
	border-radius: 16px 16px 0 0;
	padding-bottom: calc(var(--cfx-skala) * 1.5rem + env(safe-area-inset-bottom));
	background: #fff;
}

@keyframes cfx-valg-opp {
	from { transform: translateY(100%); }
	to   { transform: none; }
}

.cfx-valg__tittel {
	margin-block: 0 calc(var(--cfx-skala) * 1rem);
	font-size: calc(var(--cfx-skala) * 1.1rem);
	font-weight: 800;
	color: var(--cfx-tittel);
}

.cfx-valg__knapper {
	display: flex;
	flex-direction: column;
	gap: calc(var(--cfx-skala) * 0.6rem);
}

.cfx-valg .cfx-knapp {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: calc(var(--cfx-skala) * 0.5rem);
	width: 100%;
	min-height: calc(var(--cfx-skala) * 3rem);
	padding: 0 calc(var(--cfx-skala) * 1.25rem);
	border: 1px solid transparent;
	border-radius: 8px;
	font-family: inherit;
	font-size: calc(var(--cfx-skala) * 1rem);
	font-weight: 700;
	text-decoration: none;
	cursor: pointer;
}

.cfx-valg .cfx-knapp--gul { background: var(--cfx-gul); color: var(--cfx-knapp-tekst); }

.cfx-valg .cfx-knapp--ramme {
	background: transparent;
	border-color: var(--cfx-gronn);
	color: var(--cfx-gronn);
}

.cfx-valg__avbryt {
	width: 100%;
	margin-top: calc(var(--cfx-skala) * 0.3rem);
	padding: calc(var(--cfx-skala) * 0.7rem);
	border: 0;
	background: transparent;
	color: var(--cfx-dempet);
	font-family: inherit;
	font-size: calc(var(--cfx-skala) * 0.95rem);
	cursor: pointer;
}

@media (prefers-reduced-motion: reduce) {
	.cfx-valg__kort { animation: none; }
}

/* ---------------------------------------------------------------------------
 * Hero-knappene snur fargene ved hover
 *
 * Fargen alene var endringen, men den var for liten til å merkes: #fff100 mot
 * en litt mørkere gul sier ingenting på et halvt sekund. Her bytter knappen
 * plass på flate og tekst i stedet. Kanten holder formen, så knappen ikke
 * forsvinner i den mørkegrønne heroen når flaten blir grønn.
 *
 * Gjelder bare heroene. Lenger ned på siden skal knappene oppføre seg rolig.
 * ------------------------------------------------------------------------- */

.cfx .cfx-verksted__handling .cfx-knapp--gul:hover,
.cfx .cfx-verksted__handling .cfx-knapp--gul:focus-visible,
.cfx .cfx-tjenesteside__handling .cfx-knapp--gul:hover,
.cfx .cfx-tjenesteside__handling .cfx-knapp--gul:focus-visible,
.cfx .cfx-velger__handling .cfx-velger__knapp:hover,
.cfx .cfx-velger__handling .cfx-velger__knapp:focus-visible {
	background: var(--cfx-gronn);
	border-color: var(--cfx-gul);
	color: var(--cfx-gul);
}

.cfx .cfx-verksted__handling .cfx-knapp--hvit:hover,
.cfx .cfx-verksted__handling .cfx-knapp--hvit:focus-visible,
.cfx .cfx-tjenesteside__handling .cfx-knapp--hvit:hover,
.cfx .cfx-tjenesteside__handling .cfx-knapp--hvit:focus-visible {
	background: var(--cfx-gronn);
	border-color: #fff;
	color: #fff;
}

/* «Få tilbud» er en ramme i hvilen, og fylles hvit ved hover. */
.cfx .cfx-verksted__handling .cfx-knapp--ramme:hover,
.cfx .cfx-verksted__handling .cfx-knapp--ramme:focus-visible,
.cfx .cfx-tjenesteside__handling .cfx-knapp--ramme:hover,
.cfx .cfx-tjenesteside__handling .cfx-knapp--ramme:focus-visible {
	background: #fff;
	border-color: #fff;
	color: var(--cfx-gronn);
}

/* «Se alle verksteder» står på det hvite kortet i forsideheroen, og snudde
   allerede. Den beholder sin egen regel lenger opp. */

/* ---------------------------------------------------------------------------
 * Én knappestørrelse
 *
 * Målt på tvers av sidene sto knappene i fem høyder: 39, 48, 49, 54 og 55 px.
 * Ulik padding på heroens knapper, mindre skrift i tjenestekortene, og temaets
 * egne knapper i de gjenbrukbare blokkene med sitt eget mål. Ingen av
 * forskjellene betydde noe – de var bare ikke satt ett sted.
 *
 * Her settes målet én gang, sist i arket, så det vinner over alt som kom før.
 * ------------------------------------------------------------------------- */

/* Temaet setter `font-size: 21px` på `[type="submit"]`, og en knapp som er et
   skjemafelt ble dermed 57 px mens naboen sto på 48. Derfor står den med
   elementnavn her: én selektor må veie tyngre enn temaets. */
.cfx .cfx-knapp,
.cfx-topp .cfx-knapp,
.cfx-meny .cfx-knapp,
.cfx-bunn .cfx-knapp,
.cfx-bunn .cfx-knapp,
.cfx .cfx-velger__knapp,
.cfx .cfx-velger__lenke,
.cfx .cfx-utvid__handling .cfx-knapp,
.cfx .cfx-verksteder__verktoy .cfx-knapp,
.cfx .cfx-tjenesteside__handling .cfx-knapp,
.cfx .cfx-verksted__handling .cfx-knapp,
.cfx button.cfx-knapp[type="submit"],
.cfx input.cfx-knapp[type="submit"] {
	min-height: 48px;
	padding-inline: calc(var(--cfx-skala) * 1.3rem);
	border-radius: 8px;
	font-size: calc(var(--cfx-skala) * 1rem);
	line-height: 1.2;
}

/* Temaets knapper i de gjenbrukbare blokkene – «Les mer og søk» i Bilkonto og
   tilsvarende. De ligger utenfor .cfx, så de må nevnes for seg. */
.l-canvas .w-btn,
.l-footer .w-btn,
.l-canvas a.us-btn {
	min-height: 48px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0 calc(var(--cfx-skala) * 1.3rem);
	border-radius: 8px;
	font-size: calc(var(--cfx-skala) * 1rem);
	font-weight: 700;
	line-height: 1.2;
}

/* Tommelen trenger 44 px. Det har alle nå, så mobilregelen er ikke lenger
   et unntak – den står igjen bare for knapper utenfor .cfx-knapp. */

/* ---------------------------------------------------------------------------
 * Bunnfeltet
 *
 * Innholdet bygges i includes/footer.php av de samme dataene som sidene. Den
 * nederste raden – årstall og byrå – er fortsatt den gjenbrukbare blokken i
 * us-core, og den stilles nederst i denne delen.
 *
 * Temaet gir `.l-footer` margin-top -105px og seksjonen inni +105px. De
 * opphever hverandre på sidenivå, men inne i det grønne feltet ble de 105
 * piksler tomrom før første linje.
 * ------------------------------------------------------------------------- */

.l-footer { margin-top: 0 !important; }

.l-footer > .l-section { margin-top: 0 !important; }

.cfx-bunn {
	padding-block: clamp(2.5rem, 5vw, 4rem);
	background: var(--cfx-gronn);
	color: rgba(255, 255, 255, 0.82);
	font-size: calc(var(--cfx-skala) * 1rem);
	line-height: 1.6;
}

.cfx-bunn__inn {
	max-width: var(--cfx-bredde);
	margin-inline: auto;
	padding-inline: clamp(1rem, 4vw, 2.5rem);
}

/* ---- Toppen: hvem vi er, og hva man gjør herfra ------------------------- */

.cfx-bunn__hode {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: calc(var(--cfx-skala) * 1.5rem);
	padding-bottom: calc(var(--cfx-skala) * 2rem);
	border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}

.cfx-bunn__merke { max-width: 46ch; }

.cfx-bunn__logo { display: inline-block; }

.cfx-bunn__logo img {
	display: block;
	width: auto;
	/* Logoen har luft i selve SVG-en: motivet fyller under halve høyden. Derfor
	   er boksen høyere enn ordmerket ser ut til å trenge, og luften trekkes inn
	   igjen med negativ margin. Samme grep som i toppfeltet. */
	height: calc(var(--cfx-skala) * 3.2rem);
	margin-block: calc(var(--cfx-skala) * -0.9rem);
}

.cfx-bunn__ord {
	margin-block: calc(var(--cfx-skala) * 0.6rem) 0;
	color: rgba(255, 255, 255, 0.78);
}

.cfx-bunn__handling {
	display: flex;
	flex-wrap: wrap;
	gap: calc(var(--cfx-skala) * 0.6rem);
	margin-block: 0;
}

/* Knappen med ramme står på mørk bunn her, så den eier sin egen farge. */
.cfx-bunn .cfx-knapp--ramme {
	border-color: rgba(255, 255, 255, 0.45);
	color: #fff;
}

.cfx-bunn .cfx-knapp--ramme:hover,
.cfx-bunn .cfx-knapp--ramme:focus-visible {
	background: #fff;
	border-color: #fff;
	color: var(--cfx-gronn);
}

.cfx-bunn .cfx-knapp svg { width: 1.1em; height: 1.1em; }

/* ---- Spaltene ----------------------------------------------------------- */

/* Tjenestespalten holder fjorten punkter i to kolonner og trenger plassen.
   Verkstedspalten holder ni korte ord. */
.cfx-bunn__spalter {
	display: grid;
	grid-template-columns: 1.9fr 1.35fr 0.9fr 1.05fr;
	gap: clamp(1.5rem, 3vw, 3rem);
	padding-block: calc(var(--cfx-skala) * 2.25rem);
}

.cfx-bunn__tittel {
	margin-block: 0 calc(var(--cfx-skala) * 1rem);
	color: var(--cfx-gul);
	font-size: calc(var(--cfx-skala) * 0.8rem);
	font-weight: 700;
	letter-spacing: 0.09em;
	text-transform: uppercase;
}

.cfx-bunn__undertittel {
	margin-block: 0 calc(var(--cfx-skala) * 0.35rem);
	color: rgba(255, 255, 255, 0.55);
	font-size: calc(var(--cfx-skala) * 0.82rem);
	font-weight: 600;
}

.cfx-bunn__liste {
	margin: 0 0 calc(var(--cfx-skala) * 1.1rem);
	padding: 0;
	list-style: none;
}

/* Én rytme i alle spaltene. Lenken fyller raden, så klikkflaten følger den
   og ikke bare bokstavene. */
.cfx-bunn__liste li {
	margin: 0;
	padding: 0;
}

.cfx-bunn__liste li > a {
	display: flex;
	align-items: center;
	min-height: calc(var(--cfx-skala) * 2.1rem);
	line-height: 1.3;
}

.cfx-bunn a {
	color: rgba(255, 255, 255, 0.82);
	text-decoration: none;
	transition: color 0.15s;
}

/* Temaet setter understreking på lenker i innhold og vinner over vår. To
   klasser gir vekten tilbake – se «Fellen nummer tre» i CLAUDE.md. */
.cfx-bunn .cfx-bunn__liste a:hover,
.cfx-bunn .cfx-bunn__liste a:focus-visible,
.cfx-bunn .cfx-bunn__smalenker a:hover {
	color: var(--cfx-gul);
	text-decoration: none;
}

/* Verkstedene i to kolonner. */
.cfx-bunn__liste--verksteder { columns: 2; column-gap: 1rem; }
.cfx-bunn__liste--verksteder li { break-inside: avoid; }

/* Tjenestene forsiden fremhever står litt tyngre, så listen har en inngang. */
.cfx-bunn__liste li.er-valgt a { color: #fff; font-weight: 600; }

/* Tjenestespalten er bred og deler seg i flytende grupper, så «For bedrift»
   med sine to punkter ikke blir stående alene i en spalte. */
.cfx-bunn__grupper {
	columns: 2;
	column-gap: calc(var(--cfx-skala) * 1.5rem);
}

.cfx-bunn__gruppe {
	break-inside: avoid;
	margin-bottom: calc(var(--cfx-skala) * 1.25rem);
}

/* Siste liste i en gruppe trenger ikke luft under. */
.cfx-bunn__gruppe .cfx-bunn__liste:last-child { margin-bottom: 0; }



.cfx-bunn__mer { margin-block: 0; }

.cfx-bunn .cfx-lenke { color: #fff; }
.cfx-bunn .cfx-lenke:hover { color: var(--cfx-gul); }

/* ---- Kontakt ------------------------------------------------------------ */

.cfx-bunn__liste--fakta li {
	display: flex;
	align-items: flex-start;
	gap: calc(var(--cfx-skala) * 0.6rem);
	margin-bottom: calc(var(--cfx-skala) * 0.7rem);
	line-height: 1.5;
}

.cfx-bunn__liste--fakta li > a {
	display: inline;
	min-height: 0;
}

.cfx-bunn__liste--fakta svg {
	flex: 0 0 auto;
	width: calc(var(--cfx-skala) * 1.1rem);
	height: calc(var(--cfx-skala) * 1.1rem);
	margin-top: 0.2em;
	color: var(--cfx-gul);
}


.cfx-bunn__smatt {
	margin-block: 0 calc(var(--cfx-skala) * 1rem);
	color: rgba(255, 255, 255, 0.55);
	font-size: calc(var(--cfx-skala) * 0.88rem);
}

.cfx-bunn__sosialt {
	display: flex;
	gap: calc(var(--cfx-skala) * 0.6rem);
	margin-block: 0;
}

.cfx-bunn__sosialt a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	line-height: 0;
	border: 1px solid rgba(255, 255, 255, 0.28);
	border-radius: 50%;
	color: #fff;
	transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}

.cfx-bunn__sosialt a:hover {
	background: var(--cfx-gul);
	border-color: var(--cfx-gul);
	color: var(--cfx-gronn);
}

/* ---- Foten, over byrålinjen -------------------------------------------- */

.cfx-bunn__fot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: calc(var(--cfx-skala) * 0.75rem);
	padding-top: calc(var(--cfx-skala) * 1.5rem);
	border-top: 1px solid rgba(255, 255, 255, 0.14);
	color: rgba(255, 255, 255, 0.55);
	font-size: calc(var(--cfx-skala) * 0.88rem);
}

.cfx-bunn__orgnr,
.cfx-bunn__smalenker { margin-block: 0; }

/* «Alle verksteder» under verkstedlisten: litt høyere klikkflate, den var
   22 px på telefon. */
.cfx-bunn .cfx-lenke { padding-block: calc(var(--cfx-skala) * 0.3rem); }

/* Flex, så lenkene står på én linje og ikke brytes hver for seg. */
.cfx-bunn__smalenker {
	display: flex;
	flex-wrap: wrap;
	gap: calc(var(--cfx-skala) * 0.4rem) calc(var(--cfx-skala) * 1.1rem);
}

/* På telefon under hverandre og venstrestilt, som resten av bunnen. Den
   nederste raden får luft til høyre, så til-toppen-knappen ikke dekker
   AG-merket. */
@media (max-width: 600px) {
	.cfx-bunn__fot { flex-direction: column; align-items: flex-start; }
	.l-footer > .l-section.color_footer-top { padding-inline-end: 4.5rem; }
	.l-footer > .l-section.color_footer-top p { font-size: 11px; letter-spacing: 0.02em; }
}

/* ---- Den nederste raden, fra den gjenbrukbare blokken ------------------- */

.l-footer > .l-section.color_footer-top {
	padding-block: calc(var(--cfx-skala) * 0.9rem);
	background: var(--cfx-morkt);
}

.l-footer .color_footer-top,
.l-footer .color_footer-top a { color: rgba(255, 255, 255, 0.5); }
.l-footer .color_footer-top a:hover { color: #fff; }

/* ---- Smale skjermer ----------------------------------------------------- */

@media (max-width: 1100px) {
	.cfx-bunn__spalter { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 680px) {
	.cfx-bunn__spalter { grid-template-columns: 1fr; }
	.cfx-bunn__hode { align-items: flex-start; }
	.cfx-bunn__handling { width: 100%; }
	.cfx-bunn__handling > * { flex: 1 1 10rem; }
}

/* Tjenestekortene på verkstedsiden er like smale som verkstedkortene på
   tjenestesiden, og fikk samme problem: to knapper i full bredde under
   hverandre ble to tunge flater. Samme løsning — høyden holdes, luften på
   sidene og skriften gir etter. */
.cfx .cfx-utvid__handling {
	display: flex;
	flex-wrap: wrap;
	gap: calc(var(--cfx-skala) * 0.6rem);
}

.cfx .cfx-utvid__handling .cfx-knapp {
	/* Ingen flex: 1 1 0 og nowrap her lenger: knappene delte linjen likt og
	   kunne ikke brytes, og «Les mer om tilstandsrapport» stakk ut. Bredden
	   styres av regelen med max-content lenger opp (28. oktober 2026). */
	padding-inline: calc(var(--cfx-skala) * 0.8rem);
	/* Temaet krymper rotskriften på smale skjermer, og 0,88rem ble 12 px.
	   Gulvet står i piksler, ikke rem — et rem-gulv vokser med rotskriften
	   og gjorde etiketten større enn resten på brede skjermer. */
	font-size: max(13px, calc(var(--cfx-skala) * 0.88rem));
}

/* ---- Inn i synsfeltet --------------------------------------------------- */
/* Klassen settes av carfix.js, aldri i markupen. Uten skript finnes den ikke,
   og da er ingenting skjult. Skriptet setter den bare på det som ligger under
   skjermkanten, så det som alt vises røres ikke.

   Animasjonen har bare en fra-tilstand. Den ender i elementets egne verdier,
   og legger seg derfor ikke oppå en transform eller gjennomsiktighet elementet
   har fra før. «backwards» holder elementet i fra-tilstanden mens det venter
   på tur, og slipper det helt når animasjonen er over. */
.cfx > .cfx-inn:not(.er-inne) {
	opacity: 0;
}

.cfx > .cfx-inn.er-inne {
	animation: cfx-inn 700ms cubic-bezier(0.32, 0.72, 0, 1) backwards;
}

.cfx > .cfx-inn--2.er-inne { animation-delay: 90ms; }
.cfx > .cfx-inn--3.er-inne { animation-delay: 180ms; }
.cfx > .cfx-inn--4.er-inne { animation-delay: 270ms; }

@keyframes cfx-inn {
	from {
		opacity: 0;
		transform: translateY(calc(var(--cfx-skala) * 1.75rem));
	}
}

/* Skriptet sjekker det samme før det gjør noe. Denne står her for den som slår
   på innstillingen mens siden er åpen, og for utskrift — en side som skrives ut
   uten å være rullet gjennom skal ikke ha blanke felt. */
@media (prefers-reduced-motion: reduce), print {
	.cfx > .cfx-inn.cfx-inn {
		opacity: 1;
		animation: none;
	}
}

/* ---- Toppseksjonen ved lasting ------------------------------------------ */
/* Ren CSS, ikke skript: toppen er på skjermen før carfix.js rekker å kjøre, og
   skulle skriptet skjule den først, ville den blinke. Animasjonen har bare en
   fra-tilstand og ender i elementets egne verdier, så uten støtte for
   animasjon står alt der med en gang.

   Elementene kommer fra hver sin kant i hvert sitt tempo. Retning og avstand
   settes med variabler per element, og én keyframe leser dem. Selektorene er
   holdt lettere enn `.cfx > .cfx-inn.er-inne`: på mobil ligger tekstspalten
   ofte under skjermkanten, og da skal rulleanimasjonen vinne over denne. */
.cfx-hero__innhold > *,
.cfx-verksted__innhold > *,
.cfx-tjenesteside__innhold > *,
.cfx-tjenestehero__innhold > *,
.cfx-oversikt__intro > *,
.cfx-hero__media,
.cfx-verksted__media,
.cfx-tjenesteside__media,
.cfx-tjenestehero__tillegg,
.cfx-oversikt__verktoy {
	animation: cfx-topp-inn var(--cfx-inn-tid, 700ms) cubic-bezier(0.32, 0.72, 0, 1) var(--cfx-inn-vent, 0ms) backwards;
}

/* Fire slag som går i ring: raskt fra venstre, tungt nedenfra, middels fra
   høyre, raskt nedenfra. */
:is(.cfx-hero__innhold, .cfx-verksted__innhold, .cfx-tjenesteside__innhold, .cfx-tjenestehero__innhold, .cfx-oversikt__intro) > :nth-child(4n + 1) {
	--cfx-inn-x: calc(var(--cfx-skala) * -2.5rem);
	--cfx-inn-tid: 520ms;
}

:is(.cfx-hero__innhold, .cfx-verksted__innhold, .cfx-tjenesteside__innhold, .cfx-tjenestehero__innhold, .cfx-oversikt__intro) > :nth-child(4n + 2) {
	--cfx-inn-y: calc(var(--cfx-skala) * 3.5rem);
	--cfx-inn-tid: 1000ms;
}

:is(.cfx-hero__innhold, .cfx-verksted__innhold, .cfx-tjenesteside__innhold, .cfx-tjenestehero__innhold, .cfx-oversikt__intro) > :nth-child(4n + 3) {
	--cfx-inn-x: calc(var(--cfx-skala) * 2.5rem);
	--cfx-inn-tid: 760ms;
}

:is(.cfx-hero__innhold, .cfx-verksted__innhold, .cfx-tjenesteside__innhold, .cfx-tjenestehero__innhold, .cfx-oversikt__intro) > :nth-child(4n) {
	--cfx-inn-y: calc(var(--cfx-skala) * 1.75rem);
	--cfx-inn-tid: 560ms;
}

:is(.cfx-hero__innhold, .cfx-verksted__innhold, .cfx-tjenesteside__innhold, .cfx-tjenestehero__innhold, .cfx-oversikt__intro) > :nth-child(2) { --cfx-inn-vent: 60ms; }
:is(.cfx-hero__innhold, .cfx-verksted__innhold, .cfx-tjenesteside__innhold, .cfx-tjenestehero__innhold, .cfx-oversikt__intro) > :nth-child(3) { --cfx-inn-vent: 180ms; }
:is(.cfx-hero__innhold, .cfx-verksted__innhold, .cfx-tjenesteside__innhold, .cfx-tjenestehero__innhold, .cfx-oversikt__intro) > :nth-child(4) { --cfx-inn-vent: 260ms; }
:is(.cfx-hero__innhold, .cfx-verksted__innhold, .cfx-tjenesteside__innhold, .cfx-tjenestehero__innhold, .cfx-oversikt__intro) > :nth-child(5) { --cfx-inn-vent: 340ms; }
:is(.cfx-hero__innhold, .cfx-verksted__innhold, .cfx-tjenesteside__innhold, .cfx-tjenestehero__innhold, .cfx-oversikt__intro) > :nth-child(6) { --cfx-inn-vent: 420ms; }
:is(.cfx-hero__innhold, .cfx-verksted__innhold, .cfx-tjenesteside__innhold, .cfx-tjenestehero__innhold, .cfx-oversikt__intro) > :nth-child(n + 7) { --cfx-inn-vent: 500ms; }

/* Bildet er det tyngste elementet og får den lengste veien: inn fra motsatt
   side av teksten, litt forminsket, mens motivet inni zoomer ut. */
.cfx-hero__media,
.cfx-verksted__media,
.cfx-tjenesteside__media,
.cfx-tjenestehero__tillegg,
.cfx-oversikt__verktoy {
	--cfx-inn-x: calc(var(--cfx-skala) * 5rem);
	--cfx-inn-skala: 0.94;
	--cfx-inn-tid: 1200ms;
	--cfx-inn-vent: 120ms;
}

.cfx-hero__media img,
.cfx-verksted__media img {
	animation: cfx-topp-zoom 1800ms cubic-bezier(0.32, 0.72, 0, 1) backwards;
}

/* Klistremerket smeller på til slutt, med litt overskyting. */
.cfx-tjenesteside__media .cfx-klistremerke {
	animation: cfx-topp-smell 620ms cubic-bezier(0.34, 1.56, 0.64, 1) 900ms backwards;
}

@keyframes cfx-topp-inn {
	from {
		opacity: 0;
		transform: translate(var(--cfx-inn-x, 0), var(--cfx-inn-y, 0)) scale(var(--cfx-inn-skala, 1));
	}
}

@keyframes cfx-topp-zoom {
	from { transform: scale(1.14); }
}

@keyframes cfx-topp-smell {
	from {
		opacity: 0;
		transform: rotate(-38deg) scale(0.3);
	}
}

/* Stablet på smal skjerm er det ikke plass til sidelengs bevegelse: et element
   som starter til høyre for skjermkanten gir vannrett rulling mens det står
   der. Alt kommer nedenfra, i ulikt tempo. */
@media (max-width: 900px) {
	/* :nth-child(n) treffer alle, og veier like tungt som reglene over. */
	:is(.cfx-hero__innhold, .cfx-verksted__innhold, .cfx-tjenesteside__innhold, .cfx-tjenestehero__innhold, .cfx-oversikt__intro) > :nth-child(n),
	.cfx-hero__media,
	.cfx-verksted__media,
	.cfx-tjenesteside__media,
	.cfx-tjenestehero__tillegg,
	.cfx-oversikt__verktoy {
		--cfx-inn-x: 0;
	}

	:is(.cfx-hero__innhold, .cfx-verksted__innhold, .cfx-tjenesteside__innhold, .cfx-tjenestehero__innhold, .cfx-oversikt__intro) > :nth-child(odd) {
		--cfx-inn-y: calc(var(--cfx-skala) * 1.25rem);
	}

	.cfx-hero__media,
	.cfx-verksted__media,
	.cfx-tjenesteside__media,
	.cfx-tjenestehero__tillegg,
	.cfx-oversikt__verktoy {
		--cfx-inn-y: calc(var(--cfx-skala) * 2.5rem);
	}
}

@media (prefers-reduced-motion: reduce), print {
	.cfx-hero__innhold > *,
	.cfx-verksted__innhold > *,
	.cfx-tjenesteside__innhold > *,
	.cfx-tjenestehero__innhold > *,
	.cfx-oversikt__intro > *,
	.cfx-hero__media,
	.cfx-verksted__media,
	.cfx-tjenesteside__media,
	.cfx-tjenestehero__tillegg,
	.cfx-oversikt__verktoy,
	.cfx-hero__media img,
	.cfx-verksted__media img,
	.cfx-tjenesteside__media .cfx-klistremerke {
		animation: none;
	}
}

/* ===========================================================================
   Forespørsel
   For tjenester verkstedet utfører, men som ikke kan bestilles i Auto-Plus.
   Lukket er det et grønt tilbud med en gul knapp; åpent er det skjemaet,
   delt i tre bolker med to felt i bredden der de hører sammen.
   ======================================================================== */
.cfx-foresporsel.cfx { background: var(--cfx-flate); }

/* Ingen overflow: hidden her – den ville stoppet det klebrige sidepanelet.
   Hjørnene rundes på toppfeltet i stedet. */
.cfx-foresporsel.cfx > .cfx-foresporsel__boks {
	margin-block: 0;
	border-radius: var(--cfx-radius);
	background: #fff;
	box-shadow: 0 12px 32px -18px rgba(31, 42, 32, 0.45);
}

/* Lukket: grønn flate, ikon, spørsmål og knapp. */
.cfx .cfx-foresporsel__tittel {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: calc(var(--cfx-skala) * 1.25rem);
	padding: calc(var(--cfx-skala) * 1.6rem) calc(var(--cfx-skala) * 1.8rem);
	border-radius: var(--cfx-radius);
	background: var(--cfx-gronn);
	color: #fff;
	cursor: pointer;
	list-style: none;
}

.cfx .cfx-foresporsel__boks[open] .cfx-foresporsel__tittel { border-radius: var(--cfx-radius) var(--cfx-radius) 0 0; }

.cfx .cfx-foresporsel__tittel::-webkit-details-marker { display: none; }

.cfx .cfx-foresporsel__ikon {
	display: grid;
	place-items: center;
	width: calc(var(--cfx-skala) * 3.4rem);
	height: calc(var(--cfx-skala) * 3.4rem);
	border-radius: 50%;
	background: var(--cfx-gul);
	color: var(--cfx-gronn);
}

.cfx .cfx-foresporsel__ikon .cfx-ikon {
	width: 46%;
	height: 46%;
}

.cfx .cfx-foresporsel__tekst {
	display: grid;
	gap: calc(var(--cfx-skala) * 0.3rem);
}

.cfx .cfx-foresporsel__overskrift {
	font-size: calc(var(--cfx-skala) * 1.45rem);
	font-weight: 700;
	line-height: 1.2;
}

.cfx .cfx-foresporsel__undertittel {
	font-size: calc(var(--cfx-skala) * 1rem);
	color: rgba(255, 255, 255, 0.85);
}

.cfx .cfx-foresporsel__knapp {
	padding: calc(var(--cfx-skala) * 0.75rem) calc(var(--cfx-skala) * 1.4rem);
	border-radius: 10px;
	background: var(--cfx-gul);
	color: var(--cfx-knapp-tekst);
	font-weight: 700;
	white-space: nowrap;
	transition: background 0.15s;
}

.cfx .cfx-foresporsel__tittel:hover .cfx-foresporsel__knapp {
	background: color-mix(in srgb, var(--cfx-gul) 88%, #000);
}

.cfx .cfx-foresporsel__tittel:focus-visible {
	outline: 3px solid var(--cfx-gul);
	outline-offset: -3px;
}

.cfx .cfx-foresporsel__knapp .er-apen,
.cfx .cfx-foresporsel__boks[open] .cfx-foresporsel__knapp .er-lukket { display: none; }
.cfx .cfx-foresporsel__boks[open] .cfx-foresporsel__knapp .er-apen { display: inline; }

/* Åpen: knappen blir en stille «Lukk». */
.cfx .cfx-foresporsel__boks[open] .cfx-foresporsel__knapp {
	background: transparent;
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.6);
	color: #fff;
}

@media (max-width: 680px) {
	.cfx .cfx-foresporsel__tittel {
		grid-template-columns: auto 1fr;
		padding: calc(var(--cfx-skala) * 1.3rem);
	}
	.cfx .cfx-foresporsel__knapp {
		grid-column: 1 / -1;
		text-align: center;
	}
}

/* Åpen: forklaring til venstre, skjema til høyre. */
.cfx .cfx-foresporsel__innhold {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 2.2fr);
	gap: calc(var(--cfx-skala) * 2.5rem);
	padding: calc(var(--cfx-skala) * 2rem) calc(var(--cfx-skala) * 1.8rem) calc(var(--cfx-skala) * 2.2rem);
}

@media (max-width: 900px) {
	.cfx .cfx-foresporsel__innhold {
		grid-template-columns: 1fr;
		gap: calc(var(--cfx-skala) * 1.5rem);
	}
	/* Under skjemaet, ikke over: øverst så «Slik går det til» ut som selve
	   innholdet, og man skjønte ikke at skjemaet kom under (29. oktober 2026). */
	.cfx .cfx-foresporsel__side { position: static; order: 2; }
}

/* Sidepanelet følger med når skjemaet rulles, under toppfeltet. */
.cfx .cfx-foresporsel__side {
	position: sticky;
	top: calc(var(--cfx-topp-hoyde, 5rem) + 1.5rem);
	align-self: start;
	padding: calc(var(--cfx-skala) * 1.4rem);
	border-radius: 12px;
	background: var(--cfx-flate-lys);
	box-shadow: inset 0 0 0 1px var(--cfx-kant);
}

.cfx .cfx-foresporsel__sidetittel {
	margin: 0 0 calc(var(--cfx-skala) * 1rem);
	font-size: calc(var(--cfx-skala) * 1.15rem);
	font-weight: 700;
	color: var(--cfx-tittel);
}

.cfx.cfx .cfx-foresporsel__steg {
	display: grid;
	gap: calc(var(--cfx-skala) * 0.9rem);
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: steg;
}

.cfx.cfx .cfx-foresporsel__steg li {
	display: grid;
	grid-template-columns: calc(var(--cfx-skala) * 1.9rem) 1fr;
	gap: 0 calc(var(--cfx-skala) * 0.75rem);
	margin: 0;
	counter-increment: steg;
}

.cfx .cfx-foresporsel__steg li::before {
	content: counter(steg);
	grid-row: span 2;
	width: calc(var(--cfx-skala) * 1.9rem);
	height: calc(var(--cfx-skala) * 1.9rem);
	border-radius: 50%;
	background: var(--cfx-gronn);
	color: #fff;
	font-size: calc(var(--cfx-skala) * 0.9rem);
	font-weight: 700;
	line-height: calc(var(--cfx-skala) * 1.9rem);
	text-align: center;
}

.cfx .cfx-foresporsel__steg strong { color: var(--cfx-tittel); }

.cfx .cfx-foresporsel__steg span {
	font-size: calc(var(--cfx-skala) * 0.95rem);
	color: var(--cfx-dempet);
}


/* Nummeret på egen linje under «Haster det?». */
.cfx .cfx-foresporsel__ring {
	display: grid;
	gap: calc(var(--cfx-skala) * 0.2rem);
	margin: calc(var(--cfx-skala) * 1.4rem) 0 0;
	padding-block-start: calc(var(--cfx-skala) * 1.2rem);
	border-block-start: 1px solid var(--cfx-kant);
	font-weight: 600;
	color: var(--cfx-tittel);
}

.cfx .cfx-foresporsel__ring a {
	display: inline-flex;
	align-items: center;
	gap: calc(var(--cfx-skala) * 0.35rem);
	width: fit-content;
	color: var(--cfx-gronn);
	text-decoration-color: rgba(43, 69, 47, 0.35);
	text-underline-offset: 3px;
}

.cfx .cfx-foresporsel__ring .cfx-ikon {
	width: 1em;
	height: 1em;
}

.cfx .cfx-foresporsel__skjema { min-width: 0; }

/* «Kan bestilles direkte» når valgt tjeneste finnes i Auto-Plus. */
/* Teksten til venstre, lenken som en liten knapp til høyre. Ingen stripe i
   kanten – den så ut som en hvilken som helst ferdigmal. */
.cfx .cfx-foresporsel__direkte {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: calc(var(--cfx-skala) * 0.5rem) 1rem;
	margin-block: 0 calc(var(--cfx-skala) * 0.75rem);
	padding: calc(var(--cfx-skala) * 0.6rem) calc(var(--cfx-skala) * 0.6rem) calc(var(--cfx-skala) * 0.6rem) calc(var(--cfx-skala) * 1.1rem);
	border: 1px solid #d5e3d5;
	border-radius: 999px;
	background: #f2f7f2;
	font-weight: 600;
	color: var(--cfx-tittel);
}

.cfx .cfx-foresporsel__direkte[hidden] { display: none; }

.cfx.cfx .cfx-foresporsel__direkte a {
	flex: 0 0 auto;
	padding: calc(var(--cfx-skala) * 0.45rem) calc(var(--cfx-skala) * 1rem);
	border-radius: 999px;
	background: var(--cfx-gronn);
	color: #fff;
	text-decoration: none;
	white-space: nowrap;
}

.cfx.cfx .cfx-foresporsel__direkte a:hover,
.cfx.cfx .cfx-foresporsel__direkte a:focus-visible {
	background: var(--cfx-gul);
	color: var(--cfx-knapp-tekst);
}

/* På smal skjerm blir pillen en vanlig boks, så teksten kan bryte. */
@media (max-width: 600px) {
	.cfx .cfx-foresporsel__direkte { border-radius: var(--cfx-radius); padding: calc(var(--cfx-skala) * 0.8rem) calc(var(--cfx-skala) * 1rem); }
}



/* EU-fristen nærmer seg: forslag om å bestille EU-kontroll også. */
.cfx .cfx-foresporsel__eu {
	display: grid;
	gap: calc(var(--cfx-skala) * 0.6rem);
	margin-top: calc(var(--cfx-skala) * 0.75rem);
	padding: calc(var(--cfx-skala) * 1rem) calc(var(--cfx-skala) * 1.1rem);
	border-radius: 10px;
	background: #fffbd1;
	box-shadow: inset 0 0 0 1px #ede001;
}

.cfx .cfx-foresporsel__eu[hidden] { display: none; }

.cfx .cfx-foresporsel__eu p {
	margin: 0;
	font-weight: 600;
	color: var(--cfx-tittel);
}

.cfx .cfx-foresporsel__eu-valg {
	display: flex;
	flex-wrap: wrap;
	gap: calc(var(--cfx-skala) * 0.5rem);
}

.cfx .cfx-foresporsel__eu .cfx-knapp {
	min-height: calc(var(--cfx-skala) * 2.6rem);
	font-size: calc(var(--cfx-skala) * 0.95rem);
}

.cfx .cfx-foresporsel__takk {
	margin: 0;
	padding: calc(var(--cfx-skala) * 1.2rem) calc(var(--cfx-skala) * 1.4rem);
	border-radius: 10px;
	background: #eef4ee;
	color: var(--cfx-gronn);
}

/* --- Gravity Forms --------------------------------------------------- */
/* Skjemaet bruker den gamle markupen uten Gravity Forms sitt rutenett, så
   «halv bredde» fra feltinnstillingene gjør vi selv: to spalter, og alt
   som ikke er halvt går over begge. */
.cfx-foresporsel .gform_wrapper ul.gform_fields,
.cfx-foresporsel .gform_wrapper .gform_fields {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: calc(var(--cfx-skala) * 1.1rem) calc(var(--cfx-skala) * 1.2rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

.cfx-foresporsel .gform_wrapper .gfield {
	grid-column: 1 / -1;
	margin: 0;
	padding: 0;
	max-width: none;
}

.cfx-foresporsel .gform_wrapper .gfield.gfield--width-half { grid-column: auto; }
.cfx-foresporsel .gform_wrapper .gfield.gform_hidden { display: none; }

@media (max-width: 680px) {
	.cfx-foresporsel .gform_wrapper .gfield.gfield--width-half { grid-column: 1 / -1; }
}

/* Bare ett valg: feltet vises som et svar – «Valgt tjeneste» med hake – i
   stedet for en nedtrekksliste. Grønt, så det skiller seg fra feltene kunden
   skal fylle ut. */
.cfx-foresporsel .gform_wrapper .gfield.cfx-sk-fast select {
	appearance: none;
	-webkit-appearance: none;
	border-color: var(--cfx-gronn-lys);
	border-style: solid;
	background: #eef3ec url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232b452f' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") no-repeat calc(var(--cfx-skala) * 1rem) center / calc(var(--cfx-skala) * 1.3rem);
	padding-left: calc(var(--cfx-skala) * 2.9rem);
	box-shadow: none;
	font-weight: 700;
	color: var(--cfx-gronn);
	pointer-events: none;
}

/* Fast tekst trenger ingen stjerne – det er ingenting å fylle ut. */
.cfx-foresporsel .gform_wrapper .gfield.cfx-sk-fast .gfield_required { display: none; }

/* Pilen kommer fra temaet, som et ::after på beholderen. */
.cfx-foresporsel .gform_wrapper .gfield.cfx-sk-fast .ginput_container_select::after { display: none; }

/* Ønsket dag: feltet med en kalender-ikon til høyre, og kalenderen under. */
.cfx-foresporsel .gform_wrapper .cfx-sk-dato .ginput_container { position: relative; }

.cfx-foresporsel.cfx-foresporsel.cfx-foresporsel .gform_wrapper .cfx-sk-dato input:not([type="radio"]):not([type="checkbox"]):not([type="submit"]) {
	padding-right: calc(var(--cfx-skala) * 2.8rem);
	background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232b452f' stroke-width='1.8' stroke-linecap='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4'/%3E%3C/svg%3E") no-repeat right calc(var(--cfx-skala) * 0.9rem) center / calc(var(--cfx-skala) * 1.25rem);
	cursor: pointer;
}

/* Skrevet inn en dag som ikke går: beskjeden under feltet, før kunden sender. */
.cfx-foresporsel .gform_wrapper .cfx-sk-dato__feil {
	margin-block: calc(var(--cfx-skala) * 0.4rem) 0;
	font-size: calc(var(--cfx-skala) * 0.95rem);
	color: var(--cfx-stengt);
}
.cfx-foresporsel.cfx-foresporsel.cfx-foresporsel .gform_wrapper .cfx-sk-dato input[aria-invalid="true"]:not([type="radio"]):not([type="checkbox"]):not([type="submit"]) {
	border-color: var(--cfx-stengt);
}

.cfx-kalender {
	position: absolute;
	top: calc(100% + 6px);
	left: 0;
	z-index: 20;
	width: min(20rem, 100%);
	min-width: 17rem;
	padding: calc(var(--cfx-skala) * 1rem);
	border-radius: 12px;
	background: #fff;
	box-shadow: 0 18px 40px -16px rgba(31, 42, 32, 0.45), 0 0 0 1px var(--cfx-kant);
	font-family: inherit;
}

.cfx-kalender[hidden] { display: none; }

.cfx-kalender__hode {
	display: grid;
	grid-template-columns: 2.4rem 1fr 2.4rem;
	align-items: center;
	margin-bottom: calc(var(--cfx-skala) * 0.6rem);
}

.cfx-kalender__tittel {
	text-align: center;
	font-weight: 700;
	text-transform: capitalize;
	color: var(--cfx-tittel);
}

.cfx .cfx-kalender__pil {
	width: 2.4rem;
	height: 2.4rem;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--cfx-gronn);
	font-size: 1.5rem;
	line-height: 1;
	cursor: pointer;
}

.cfx .cfx-kalender__pil:hover:not(:disabled) { background: #eef4ee; }
.cfx .cfx-kalender__pil:disabled { opacity: 0.25; cursor: default; }

.cfx-kalender__dager {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 2px;
}

.cfx-kalender__ukedag {
	padding-bottom: calc(var(--cfx-skala) * 0.35rem);
	text-align: center;
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
	color: var(--cfx-dempet);
}

.cfx .cfx-kalender__dag {
	aspect-ratio: 1;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--cfx-tittel);
	font-family: inherit;
	font-size: 0.95rem;
	font-weight: 600;
	cursor: pointer;
}

.cfx .cfx-kalender__dag:hover:not(:disabled) { background: #eef4ee; }
.cfx .cfx-kalender__dag:focus-visible { outline: 2px solid var(--cfx-gronn); outline-offset: 1px; }
.cfx .cfx-kalender__dag:disabled { color: #c4c4c4; font-weight: 400; cursor: default; }
.cfx .cfx-kalender__dag.er-helg:disabled { text-decoration: line-through; text-decoration-color: #ddd; }
.cfx .cfx-kalender__dag.er-idag { box-shadow: inset 0 0 0 1.5px var(--cfx-gronn-lys); }

.cfx .cfx-kalender__dag.er-valgt,
.cfx .cfx-kalender__dag.er-valgt:hover {
	background: var(--cfx-gronn);
	color: #fff;
}

.cfx-kalender__fot {
	margin: calc(var(--cfx-skala) * 0.6rem) 0 0;
	font-size: 0.8rem;
	color: var(--cfx-dempet);
}

/* Bolkene: overskrift med strek over. */
.cfx-foresporsel .gform_wrapper .gsection {
	margin-top: calc(var(--cfx-skala) * 1.2rem);
	padding: calc(var(--cfx-skala) * 1.2rem) 0 0;
	border-top: 1px solid var(--cfx-kant);
	border-bottom: 0;
}

.cfx-foresporsel .gform_wrapper .gfield:first-child.gsection {
	margin-top: calc(var(--cfx-skala) * 0.5rem);
}

.cfx-foresporsel .gform_wrapper .gsection_title {
	margin: 0;
	font-size: calc(var(--cfx-skala) * 1.2rem);
	font-weight: 700;
	color: var(--cfx-tittel);
}

.cfx-foresporsel .gform_wrapper .gsection_description {
	padding: 0;
	margin-top: calc(var(--cfx-skala) * 0.2rem);
	font-size: calc(var(--cfx-skala) * 0.9rem);
	color: var(--cfx-dempet);
}

/* Doble klasser: Gravity Forms sin legacy-regel har seks :not() og ville
   ellers satt sin egen luft og ramme. */
.cfx-foresporsel.cfx-foresporsel.cfx-foresporsel .gform_wrapper input:not([type="radio"]):not([type="checkbox"]):not([type="submit"]),
.cfx-foresporsel .gform_wrapper select,
.cfx-foresporsel .gform_wrapper textarea {
	width: 100%;
	min-height: 48px;
	padding: 0 calc(var(--cfx-skala) * 0.95rem);
	border: 1px solid var(--cfx-kant-kort);
	border-radius: 10px;
	background-color: #fff;
	font-family: inherit;
	font-size: calc(var(--cfx-skala) * 1.05rem);
	color: var(--cfx-tittel);
	transition: border-color 0.12s, box-shadow 0.12s;
}

/* Alle feltene er 56 px høye, som tekstfeltene. Nedtrekkslisten var 48 og
   skiltet 68, og to felt side om side sto i hver sin høyde (28. oktober
   2026). Skiltet: 52 px felt + 2 × 2 px ramme på beholderen = 56. */
.cfx-foresporsel .gform_wrapper select {
	min-height: 56px;
}

.cfx-foresporsel .gform_wrapper input:focus,
.cfx-foresporsel .gform_wrapper select:focus,
.cfx-foresporsel .gform_wrapper textarea:focus {
	border-color: var(--cfx-gronn);
	box-shadow: 0 0 0 3px rgba(43, 69, 47, 0.18);
	outline: none;
}

.cfx-foresporsel .gform_wrapper textarea {
	min-height: 5.5rem;
	padding-block: calc(var(--cfx-skala) * 0.7rem);
}

/* Registreringsnummeret som et norsk skilt: blå stripe med flagg og N til
   venstre, svart ramme, store bokstaver. Stripen er et pseudoelement på
   feltets beholder, så Gravity Forms sin markup står urørt. */
.cfx-foresporsel .gform_wrapper .cfx-sk-regnr .ginput_container {
	position: relative;
	/* Rammen sitter på beholderen, ikke feltet, og klipper stripen. Før lå
	   stripen inne i feltets ramme, og hjørnene møttes ikke – en hvit flik i
	   kanten oppe og nede til venstre. */
	overflow: hidden;
	border: 2px solid #111;
	border-radius: 10px;
	background: #fff;
}

.cfx-foresporsel .gform_wrapper .cfx-sk-regnr .ginput_container:focus-within {
	box-shadow: 0 0 0 3px rgba(43, 69, 47, 0.25);
}

.cfx-foresporsel .gform_wrapper .cfx-sk-regnr .ginput_container::before {
	content: "N";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	z-index: 1;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	width: calc(var(--cfx-skala) * 2.4rem);
	padding-bottom: calc(var(--cfx-skala) * 0.35rem);
	background: #0b3d91 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 16'%3E%3Crect width='22' height='16' fill='%23ba0c2f'/%3E%3Cpath d='M6 0h4v16H6zM0 6h22v4H0z' fill='%23fff'/%3E%3Cpath d='M7 0h2v16H7zM0 7h22v2H0z' fill='%2300205b'/%3E%3C/svg%3E") no-repeat center calc(var(--cfx-skala) * 0.45rem) / calc(var(--cfx-skala) * 1.35rem) auto;
	color: #fff;
	font-size: calc(var(--cfx-skala) * 0.85rem);
	font-weight: 700;
	pointer-events: none;
}

/* Gravity Forms sin egen feltregel har seks :not() og vant over denne, så
   luften til venstre for stripen forsvant og «AB» havnet bak den. Doble
   klasser og de samme :not() gir oss vekten tilbake. */
.cfx-foresporsel.cfx-foresporsel .gform_wrapper .gfield.cfx-sk-regnr.cfx-sk-regnr input[type="text"]:not([type="radio"]):not([type="checkbox"]):not([type="submit"]) {
	height: 52px;
	min-height: 52px;
	padding-left: calc(var(--cfx-skala) * 4rem);
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	font-size: calc(var(--cfx-skala) * 1.35rem);
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: #111;
}

.cfx-foresporsel .gform_wrapper .gfield.cfx-sk-regnr input[type="text"]::placeholder {
	color: #b5b5b5;
	font-weight: 600;
}

/* Det som mangler av skiltet, i grått bak teksten. Settes av carfix.js. */
.cfx-foresporsel .gform_wrapper .cfx-sk-regnr__spor {
	position: absolute;
	inset: 0;
	z-index: 0;
	display: flex;
	align-items: center;
	white-space: pre;
	text-transform: uppercase;
	pointer-events: none;
}

.cfx-foresporsel .gform_wrapper .cfx-sk-regnr__skrevet { color: transparent; }
.cfx-foresporsel .gform_wrapper .cfx-sk-regnr__rest { color: #c4c4c4; font-weight: 600; }

/* Feltet over sporet, med gjennomsiktig bunn, så sporet synes. */
.cfx-foresporsel .gform_wrapper .cfx-sk-regnr input { position: relative; z-index: 1; }

/* Bilen fra oppslaget, i høyre spalte ved siden av skiltet. */
.cfx-foresporsel .gform_wrapper .cfx-sk-bilkort {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: calc(var(--cfx-skala) * 0.2rem);
	margin-top: calc(var(--cfx-skala) * 0.6rem);
	padding: calc(var(--cfx-skala) * 0.8rem) calc(var(--cfx-skala) * 1.1rem);
	border-radius: 10px;
	background: var(--cfx-flate-lys);
	box-shadow: inset 0 0 0 1px var(--cfx-kant);
	list-style: none;
}

.cfx-foresporsel .gform_wrapper .cfx-sk-bilkort.er-funnet {
	background: #eef4ee;
	box-shadow: inset 0 0 0 1px #c9dccb;
}

.cfx-foresporsel .gform_wrapper .cfx-sk-bilkort.er-feil {
	background: #fff8e5;
	box-shadow: inset 0 0 0 1px #f0d88a;
}

.cfx-foresporsel .gform_wrapper .cfx-sk-bilkort.er-soker { padding-left: calc(var(--cfx-skala) * 3.2rem); }

.cfx-sk-bilkort__snurr {
	position: absolute;
	left: calc(var(--cfx-skala) * 1.1rem);
	top: 50%;
	width: calc(var(--cfx-skala) * 1.3rem);
	height: calc(var(--cfx-skala) * 1.3rem);
	margin-top: calc(var(--cfx-skala) * -0.65rem);
	border: 2px solid var(--cfx-kant-kort);
	border-top-color: var(--cfx-gronn);
	border-radius: 50%;
	animation: cfx-sk-snurr 0.8s linear infinite;
}

@keyframes cfx-sk-snurr { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
	.cfx-sk-bilkort__snurr { animation: none; }
}

.cfx-sk-bilkort__merke {
	font-size: calc(var(--cfx-skala) * 0.75rem);
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--cfx-gronn);
}

.cfx-sk-bilkort__tittel {
	font-size: calc(var(--cfx-skala) * 1.1rem);
	line-height: 1.25;
	color: var(--cfx-tittel);
}

.cfx-sk-bilkort__linje {
	font-size: calc(var(--cfx-skala) * 0.9rem);
	color: var(--cfx-dempet);
}

.cfx-sk-bilkort__eu {
	width: fit-content;
	margin-top: calc(var(--cfx-skala) * 0.3rem);
	padding: calc(var(--cfx-skala) * 0.15rem) calc(var(--cfx-skala) * 0.6rem);
	border-radius: 999px;
	font-size: calc(var(--cfx-skala) * 0.85rem);
	font-weight: 600;
}

.cfx-sk-bilkort__eu.er-ok { background: #fff; color: var(--cfx-gronn); }
.cfx-sk-bilkort__eu.er-snart { background: var(--cfx-gul); color: var(--cfx-knapp-tekst); }
.cfx-sk-bilkort__eu.er-utlopt { background: var(--cfx-stengt); color: #fff; }

/* Kortet over hele bredden: bilen til venstre, EU-fristen til høyre.
   Et EU-forslag legger seg under, over hele bredden. */
.cfx-foresporsel .gform_wrapper .cfx-sk-bilkort.er-funnet {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	column-gap: calc(var(--cfx-skala) * 1.5rem);
}

.cfx-sk-bilkort.er-funnet > :not(.cfx-sk-bilkort__eu):not(.cfx-foresporsel__eu):not(.cfx-sk-bilfakta) { grid-column: 1; }

.cfx-sk-bilkort.er-funnet > .cfx-sk-bilkort__eu {
	grid-column: 2;
	grid-row: 1 / span 3;
	justify-self: end;
	margin: 0;
	font-size: calc(var(--cfx-skala) * 0.95rem);
	padding: calc(var(--cfx-skala) * 0.4rem) calc(var(--cfx-skala) * 0.9rem);
}

.cfx-sk-bilkort .cfx-foresporsel__eu {
	grid-column: 1 / -1;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: calc(var(--cfx-skala) * 0.75rem) calc(var(--cfx-skala) * 1.25rem);
	margin-top: calc(var(--cfx-skala) * 0.9rem);
}

.cfx-sk-bilkort .cfx-foresporsel__eu p {
	flex: 1 1 16rem;
	font-size: calc(var(--cfx-skala) * 1rem);
}

/* «Se mer om bilen» – lukket til kunden åpner den. */
.cfx-sk-bilkort .cfx-sk-bilfakta {
	grid-column: 1 / -1;
	margin-top: calc(var(--cfx-skala) * 0.6rem);
}

.cfx-sk-bilkort .cfx-sk-bilfakta summary {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	width: fit-content;
	font-size: calc(var(--cfx-skala) * 0.95rem);
	font-weight: 700;
	color: var(--cfx-gronn);
	cursor: pointer;
	list-style: none;
}

.cfx-sk-bilkort .cfx-sk-bilfakta summary::-webkit-details-marker { display: none; }

.cfx-sk-bilkort .cfx-sk-bilfakta summary::after {
	content: "";
	width: 0.45em;
	height: 0.45em;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: translateY(-0.15em) rotate(45deg);
	transition: transform 0.15s;
}

.cfx-sk-bilkort .cfx-sk-bilfakta[open] summary::after { transform: translateY(0.1em) rotate(-135deg); }

.cfx-sk-bilkort .cfx-sk-bilfakta summary:hover { text-decoration: underline; }

.cfx-sk-bilkort .cfx-sk-bilfakta dl {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
	gap: calc(var(--cfx-skala) * 0.5rem);
	margin: calc(var(--cfx-skala) * 0.7rem) 0 0;
}

.cfx-sk-bilkort .cfx-sk-bilfakta dl > div {
	padding: calc(var(--cfx-skala) * 0.55rem) calc(var(--cfx-skala) * 0.75rem);
	border-radius: 8px;
	background: rgba(255, 255, 255, 0.75);
}

.cfx-sk-bilkort .cfx-sk-bilfakta dt {
	font-size: calc(var(--cfx-skala) * 0.8rem);
	color: var(--cfx-dempet);
}

.cfx-sk-bilkort .cfx-sk-bilfakta dd {
	margin: 0;
	font-weight: 700;
	color: var(--cfx-tittel);
}

.cfx-sk-bilkort .cfx-sk-bilfakta__kilde {
	margin: calc(var(--cfx-skala) * 0.5rem) 0 0;
	font-size: calc(var(--cfx-skala) * 0.8rem);
	color: var(--cfx-dempet);
}

@media (prefers-reduced-motion: reduce) {
	.cfx-sk-bilkort .cfx-sk-bilfakta summary::after { transition: none; }
}

@media (max-width: 680px) {
	.cfx-foresporsel .gform_wrapper .cfx-sk-bilkort.er-funnet { grid-template-columns: 1fr; }
	.cfx-sk-bilkort.er-funnet > .cfx-sk-bilkort__eu {
		grid-column: 1;
		grid-row: auto;
		justify-self: start;
		margin-top: calc(var(--cfx-skala) * 0.4rem);
	}
}

/* Tid på dagen som tre knapper ved siden av hverandre. Samme knapper for
   «Noe mer samtidig?», der man kan velge flere. */
.cfx-foresporsel .gform_wrapper .cfx-sk-piller .gfield_checkbox,
.cfx-foresporsel .gform_wrapper .cfx-sk-piller .gfield_radio {
	display: flex;
	flex-wrap: wrap;
	gap: calc(var(--cfx-skala) * 0.5rem);
}

.cfx-foresporsel .gform_wrapper .cfx-sk-piller .gchoice {
	position: relative;
	margin: 0;
}

.cfx-foresporsel .gform_wrapper .cfx-sk-piller input[type="checkbox"],
.cfx-foresporsel .gform_wrapper .cfx-sk-piller input[type="radio"] {
	position: absolute;
	opacity: 0;
}

.cfx-foresporsel .gform_wrapper .cfx-sk-piller .gchoice label {
	width: auto;
	max-width: none;
	display: inline-flex;
	align-items: center;
	min-height: 48px;
	margin: 0;
	padding: 0 calc(var(--cfx-skala) * 1.1rem);
	border: 1px solid var(--cfx-kant-kort);
	border-radius: 999px;
	background: #fff;
	font-weight: 600;
	color: var(--cfx-tittel);
	cursor: pointer;
}

.cfx-foresporsel .gform_wrapper .cfx-sk-piller .gchoice input:checked + label {
	border-color: var(--cfx-gronn);
	background: var(--cfx-gronn);
	color: #fff;
}

/* Avkrysset får et hakemerke, så det er tydelig at flere kan velges. */
.cfx-foresporsel .gform_wrapper .cfx-sk-flere .gchoice label::before {
	content: "+";
	margin-right: 0.4rem;
	font-weight: 700;
	color: var(--cfx-gronn);
}

.cfx-foresporsel .gform_wrapper .cfx-sk-flere .gchoice input:checked + label::before {
	content: "✓";
	color: #fff;
}

.cfx-foresporsel .gform_wrapper .cfx-sk-flere .gchoice[hidden] { display: none; }

.cfx-foresporsel .gform_wrapper .cfx-sk-flere .gchoice label { min-height: 40px; }

.cfx-foresporsel .gform_wrapper .cfx-sk-piller input:focus-visible + label {
	outline: 3px solid var(--cfx-gronn);
	outline-offset: 2px;
}

.cfx-foresporsel .gform_wrapper .gform_footer {
	margin-top: calc(var(--cfx-skala) * 1.4rem);
	padding: 0;
}

.cfx-foresporsel .gform_wrapper .gform_footer input[type="submit"],
.cfx-foresporsel .gform_wrapper .gform_footer button {
	min-height: calc(var(--cfx-skala) * 3.4rem);
	padding: 0 calc(var(--cfx-skala) * 2.2rem);
	border: 1px solid var(--cfx-gronn);
	border-radius: 10px;
	background: var(--cfx-gul);
	color: var(--cfx-knapp-tekst);
	font-family: inherit;
	font-size: calc(var(--cfx-skala) * 1.1rem);
	font-weight: 700;
	cursor: pointer;
}

.cfx-foresporsel .gform_wrapper .gform_footer input[type="submit"]:hover,
.cfx-foresporsel .gform_wrapper .gform_footer button:hover {
	background: color-mix(in srgb, var(--cfx-gul) 88%, #000);
}

@media (max-width: 680px) {
	.cfx-foresporsel .gform_wrapper .gform_footer input[type="submit"],
	.cfx-foresporsel .gform_wrapper .gform_footer button { width: 100%; }
}

/* Måling: klikk på ikonet eller teksten inne i en knapp skal telle som klikk
   på knappen. Ellers ser GTM ikonet, og triggere som «Click Classes contains
   cta_bestill-time» treffer ikke. */
[class*="cta_"] > * { pointer-events: none; }

/* -------------------------------------------------------------------------
 * Velg verksted – vinduet bak «Bestill time» på tjenestesiden
 * ------------------------------------------------------------------------- */

.cfx-velg.cfx {
	/* Temaet gir <dialog> egen margin, og vinduet la seg i toppen. */
	position: fixed;
	inset: 0;
	margin: auto;
	width: min(1080px, calc(100vw - 32px));
	max-height: calc(100vh - 32px);
	padding: 0;
	border: 0;
	border-radius: var(--cfx-radius);
	background: #fff;
	color: var(--cfx-tittel);
	box-shadow: 0 24px 64px rgba(0, 0, 0, 0.3);
}

.cfx-velg.cfx::backdrop { background: rgba(20, 30, 22, 0.6); }

/* .cfx > * gir max-width og margin-inline: auto. Her skal barna fylle boksen. */
.cfx-velg.cfx > * { max-width: none; }

.cfx .cfx-velg__hode {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 1rem;
	padding: calc(var(--cfx-skala) * 1.5rem) calc(var(--cfx-skala) * 1.5rem) calc(var(--cfx-skala) * 1rem);
	border-bottom: 1px solid #ece9e1;
}

.cfx .cfx-velg__tittel {
	margin-block: 0;
	font-size: calc(var(--cfx-skala) * 1.5rem);
	color: var(--cfx-tittel);
}

.cfx .cfx-velg__ingress {
	margin-block: calc(var(--cfx-skala) * 0.3rem) 0;
	color: var(--cfx-dempet);
}

.cfx .cfx-velg__lukk {
	flex: 0 0 auto;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 1px solid #ece9e1;
	border-radius: 50%;
	background: #fff;
	font-size: 1.5rem;
	line-height: 1;
	color: var(--cfx-tittel);
	cursor: pointer;
}

.cfx .cfx-velg__lukk:hover,
.cfx .cfx-velg__lukk:focus-visible { background: #f3f1ea; }

/* Alle elleve verkstedene skal synes uten å rulle. Gruppert på by, som
   kortene på siden, fire byer i bredden. Hele flisen er lenken – ingen knapp
   som kan forveksles med naboens. */
.cfx .cfx-velg__grupper {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: calc(var(--cfx-skala) * 1.25rem) calc(var(--cfx-skala) * 0.75rem);
	padding: calc(var(--cfx-skala) * 1.25rem) calc(var(--cfx-skala) * 1.5rem) calc(var(--cfx-skala) * 1.5rem);
}

.cfx.cfx .cfx-velg__by {
	margin-block: 0 calc(var(--cfx-skala) * 0.5rem);
	font-size: calc(var(--cfx-skala) * 0.75rem);
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--cfx-gronn);
}

.cfx.cfx .cfx-velg__liste {
	display: grid;
	/* Uten fast spor ble listen like bred som den lengste flisen, og
	   Bergen-flisene stakk inn i Stord-kolonnen. */
	grid-template-columns: minmax(0, 1fr);
	gap: calc(var(--cfx-skala) * 0.5rem);
	margin-block: 0;
	padding: 0;
	list-style: none;
}

.cfx.cfx .cfx-velg__liste li { margin: 0; }

/* «Andre steder» har mange fliser, så den tar to kolonner i bredden. */
.cfx .cfx-velg__gruppe--andre { grid-column: span 2; }
.cfx.cfx .cfx-velg__gruppe--andre .cfx-velg__liste { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.cfx .cfx-velg__sted {
	display: block;
	font-size: calc(var(--cfx-skala) * 0.85rem);
	font-weight: 400;
	color: var(--cfx-dempet);
}

.cfx.cfx .cfx-velg__flis {
	display: flex;
	align-items: center;
	gap: calc(var(--cfx-skala) * 0.5rem);
	height: 100%;
	padding: calc(var(--cfx-skala) * 0.9rem) calc(var(--cfx-skala) * 1rem);
	border: 1px solid #e2ded3;
	border-radius: var(--cfx-radius);
	background: #faf9f6;
	color: var(--cfx-tittel);
	text-decoration: none;
	transition: border-color 0.15s, background-color 0.15s;
}

.cfx.cfx .cfx-velg__flis:hover,
.cfx.cfx .cfx-velg__flis:focus-visible {
	border-color: var(--cfx-gronn);
	background: #fff;
	text-decoration: none;
}

.cfx.cfx .cfx-velg__flis:focus-visible { outline: 3px solid var(--cfx-gul); outline-offset: 2px; }

.cfx .cfx-velg__navn {
	flex: 1 1 auto;
	min-width: 0;
	font-size: calc(var(--cfx-skala) * 1.1rem);
	font-weight: 700;
	color: var(--cfx-tittel);
}

.cfx .cfx-velg__merk {
	display: block;
	width: fit-content;
	margin-block-start: 0.3rem;
	padding: 0.1rem 0.5rem;
	border-radius: 999px;
	background: #ece9e1;
	font-size: calc(var(--cfx-skala) * 0.8rem);
	font-weight: 600;
	color: var(--cfx-dempet);
}

/* Fullt nå: ingen lenke. Flisen og knappen står dempet, uten hover. */
.cfx.cfx .cfx-velg__flis.er-fullt,
.cfx.cfx .cfx-velg__flis.er-fullt:hover {
	border-color: #e2ded3;
	background: #f1efe9;
	cursor: default;
}
.cfx.cfx .cfx-velg__flis.er-fullt .cfx-velg__navn { color: var(--cfx-dempet); }

.cfx.cfx .cfx-knapp.er-fullt,
.cfx.cfx .cfx-knapp.er-fullt:hover {
	background: #ece9e1;
	border-color: #ece9e1;
	color: var(--cfx-dempet);
	box-shadow: none;
	transform: none;
	cursor: default;
}

.cfx .cfx-velg__flis .cfx-pil {
	flex: 0 0 auto;
	color: var(--cfx-gronn);
	opacity: 0.5;
	transition: transform 0.15s, opacity 0.15s;
}

.cfx .cfx-velg__flis:hover .cfx-pil,
.cfx .cfx-velg__flis:focus-visible .cfx-pil { opacity: 1; transform: translateX(3px); }

@media (prefers-reduced-motion: reduce) {
	.cfx .cfx-velg__flis .cfx-pil { transition: none; }
}

@media (max-width: 760px) {
	.cfx .cfx-velg__grupper { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Mobil: vinduet legger seg nederst som et ark, og verkstedene står to
   og to, så alle elleve får plass uten å rulle på en vanlig telefon. */
@media (max-width: 560px) {
	.cfx-velg.cfx {
		inset: auto 0 0 0;
		width: 100%;
		max-width: 100%;
		max-height: calc(100dvh - 24px);
		margin: 0;
		border-radius: var(--cfx-radius) var(--cfx-radius) 0 0;
	}

	.cfx .cfx-velg__hode { padding: 1rem 1rem 0.75rem; }
	.cfx .cfx-velg__tittel { font-size: 1.25rem; }
	.cfx .cfx-velg__ingress { display: none; }
	.cfx .cfx-velg__lukk { width: 36px; height: 36px; }

	.cfx .cfx-velg__grupper {
		grid-template-columns: 1fr;
		gap: 0.85rem;
		padding: 0.85rem 1rem calc(1rem + env(safe-area-inset-bottom, 0px));
	}

	.cfx .cfx-velg__gruppe--andre { grid-column: auto; }
	.cfx.cfx .cfx-velg__by { margin-block-end: 0.35rem; }
	.cfx.cfx .cfx-velg__liste,
	.cfx.cfx .cfx-velg__gruppe--andre .cfx-velg__liste { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.4rem; }

	.cfx.cfx .cfx-velg__flis { padding: 0.5rem 0.7rem; }
	.cfx .cfx-velg__navn { font-size: 0.95rem; }
	.cfx .cfx-velg__sted { font-size: 0.8rem; }
	.cfx .cfx-velg__flis .cfx-pil { width: 16px; height: 16px; }
}

/* Navnet på verkstedkortene er lenken til verkstedet nå. */
.cfx-tjenesteside-verksteder.cfx a.cfx-region__sted:hover,
.cfx-tjenesteside-verksteder.cfx a.cfx-region__sted:focus-visible {
	color: var(--cfx-gronn);
	text-decoration: underline;
}

/* ---- Takkesiden (/takk/) ----------------------------------------------- */
/* Én side for alle forespørsler. Rolig og kort: hva som skjer nå, og veien
   videre. margin-block, ikke margin, så innholdsbredden holder. */
.cfx.cfx-takk {
	padding-block: calc(var(--cfx-skala) * 5rem);
	background: var(--cfx-flate);
}
.cfx .cfx-takk__tittel {
	margin-block: calc(var(--cfx-skala) * 0.5rem) calc(var(--cfx-skala) * 1rem);
	font-size: calc(var(--cfx-skala) * 2.6rem);
	line-height: 1.15;
	color: var(--cfx-tittel);
}
.cfx .cfx-takk__tekst {
	max-width: 40em;
	margin-block: 0 calc(var(--cfx-skala) * 0.75rem);
	font-size: calc(var(--cfx-skala) * 1.1rem);
	line-height: 1.55;
}
.cfx .cfx-takk__tekst a { font-weight: 700; color: var(--cfx-gronn); }
.cfx .cfx-takk__handling {
	display: flex;
	flex-wrap: wrap;
	gap: calc(var(--cfx-skala) * 0.75rem);
	margin-block: calc(var(--cfx-skala) * 1.75rem) 0;
}

/* ---- Firmaavtalesiden ---------------------------------------------------- */
/* Verkstedene som rutenett av kort, uten bestillingsknapp: «Be om
   firmaavtale» velger verkstedet i skjemaet. */
.cfx.cfx-fa-verksteder { background: var(--cfx-flate); }
.cfx .cfx-fa-verksteder__liste {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
	gap: calc(var(--cfx-skala) * 1rem);
	margin-block: calc(var(--cfx-skala) * 1.5rem) 0;
	padding: 0;
	list-style: none;
}
.cfx .cfx-fa-verksted {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: calc(var(--cfx-skala) * 0.35rem);
	padding: calc(var(--cfx-skala) * 1.2rem);
	border: 1px solid var(--cfx-kant);
	border-radius: var(--cfx-radius);
	background: #fff;
}
.cfx .cfx-fa-verksted__by {
	font-size: calc(var(--cfx-skala) * 0.75rem);
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--cfx-gronn);
}
.cfx .cfx-fa-verksted__navn {
	font-size: calc(var(--cfx-skala) * 1.15rem);
	font-weight: 700;
	color: var(--cfx-tittel);
	text-decoration-color: transparent;
}
.cfx .cfx-fa-verksted__navn:hover { text-decoration-color: currentColor; }
.cfx .cfx-fa-verksted__adresse { font-size: max(15px, calc(var(--cfx-skala) * 0.95rem)); }
.cfx .cfx-fa-verksted__tlf {
	display: inline-flex;
	align-items: center;
	gap: calc(var(--cfx-skala) * 0.45rem);
	width: fit-content;
	font-size: max(15px, calc(var(--cfx-skala) * 0.95rem));
	color: var(--cfx-tekst);
}
.cfx .cfx-fa-verksted__tlf .cfx-ikon { width: 1.05em; height: 1.05em; color: var(--cfx-gronn-lys); }
/* Knappen nederst i kortet. Bare margin over – padding her dyttet teksten
   ned i knappen. */
.cfx .cfx-fa-verksted__knapp.cfx-knapp { margin-block-start: auto; }
.cfx .cfx-fa-verksted__tlf { margin-block-end: calc(var(--cfx-skala) * 0.75rem); }

/* «Råd for bedrifter»: én sak alene står uten skillelinjen under, som
   på «Råd og aktuelt» skiller den fra listen. */
.cfx .cfx-aktuelt__forst.er-alene {
	margin-block-end: 0;
	padding-block-end: 0;
	border-bottom: 0;
}

/* Firmaavtaleskjemaet står åpent, i samme boks som forespørselsskjemaet.
   Topplinjen er ingen knapp her. */
.cfx .cfx-foresporsel__tittel.er-fast {
	grid-template-columns: auto 1fr;
	border-radius: var(--cfx-radius) var(--cfx-radius) 0 0;
	cursor: default;
}
.cfx .cfx-foresporsel__tittel.er-fast h2 { margin: 0; color: inherit; }
.cfx-fa-skjema .gform_required_legend { display: none; }

/* ---- Artikler (innlegg i Aktuelt) ----------------------------------------- */
/* Temaets artikkelmal har et toppbilde som parallakse: bildet var låst til
   vinduet (background-attachment: fixed), så toppfeltet dekket toppen av
   bildet og hodene ble kuttet. Seksjonen var også 708 px høy, og tittelen
   havnet under folden. Nå følger bildet seksjonen, er lavere, og står litt
   over midten. Tittelen får en størrelse som passer på telefon – på 446 px
   bredde gikk «vinterdekksesongen» utenfor kanten. (28. oktober 2026) */
.single-post .l-section.with_img {
	min-height: 0;
	height: clamp(220px, 38vw, 520px);
}
/* Toppbildet står innenfor innholdsbredden med runde hjørner, som bildene
   ellers på nettsiden – ikke kant til kant med luft rundt tittelen under.
   Samme sidebredde og sideluft som seksjonene våre. (28. oktober 2026) */
.single-post .l-section.with_img {
	width: min(var(--cfx-bredde), 100% - 2 * clamp(calc(var(--cfx-skala) * 1rem), 4vw, calc(var(--cfx-skala) * 3rem)));
	height: clamp(220px, 34vw, 480px);
	margin: clamp(1rem, 3vw, 2.5rem) auto 0;
	border-radius: var(--cfx-radius);
	isolation: isolate;
}
.single-post .l-section.with_img {
	overflow: hidden;
}
/* Egen, roligere parallakse (carfix.js): bildet er 20 % høyere enn seksjonen
   og glir saktere enn siden, men alltid innenfor seksjonen – aldri under
   toppfeltet. Uten skript eller med «reduser bevegelse» står det stille. */
.single-post .l-section.with_img > .l-section-img {
	top: -10% !important;
	bottom: auto !important;
	height: 120% !important;
	background-attachment: scroll !important;
	/* Fokuspunktet på bildet (feltet «Carfix: Fokuspunkt» i mediebiblioteket),
	   satt som --cfx-fokus i wp_head. Uten satt punkt: midten. */
	background-position: var(--cfx-fokus, 50% 50%) !important;
	transform: translate3d(0, var(--cfx-parallakse, 0px), 0) !important;
	will-change: transform;
}
@media (prefers-reduced-motion: reduce) {
	.single-post .l-section.with_img > .l-section-img { transform: none !important; }
}
.single-post h1.post_title {
	overflow-wrap: break-word;
	hyphens: auto;
}
/* Ingen kategori-merkelapp inne i saken (28. oktober 2026). Den står på
   oversikten /om-carfix/aktuelt/. Datoen står igjen. */
.single-post .w-post-elm.post_taxonomy { display: none; }

@media (max-width: 750px) {
	/* Temaets sideluft i artiklene er 1,5 rem på telefon. Bildet følger den,
	   så det står kant i kant med tittelen. */
	.single-post .l-section.with_img { width: calc(100% - 3rem); }
	.single-post h1.post_title {
		font-size: clamp(1.8rem, 7.6vw, 2.6rem);
		line-height: 1.15;
	}
}

/* ---- Råd og aktuelt (/om-carfix/aktuelt/) ------------------------------ */
.cfx.cfx-aktuelt { padding-block: calc(var(--cfx-skala) * 3.5rem) calc(var(--cfx-skala) * 4.5rem); }
.cfx .cfx-aktuelt__hode { margin-block-end: calc(var(--cfx-skala) * 2rem); }
.cfx .cfx-aktuelt__tittel {
	margin-block: 0 calc(var(--cfx-skala) * 0.6rem);
	font-size: clamp(1.9rem, 4.5vw, calc(var(--cfx-skala) * 3rem));
	line-height: 1.1;
	color: var(--cfx-tittel);
}
.cfx .cfx-aktuelt__ingress {
	max-width: 46ch;
	margin-block: 0;
	font-size: calc(var(--cfx-skala) * 1.15rem);
	color: var(--cfx-dempet);
}
.cfx .cfx-aktuelt__meta {
	margin-block: 0 calc(var(--cfx-skala) * 0.4rem);
	font-size: calc(var(--cfx-skala) * 0.85rem);
	font-weight: 600;
	letter-spacing: 0.02em;
	color: var(--cfx-gronn-lys);
}
/* Den nyeste: bilde til venstre, tekst til høyre. Under hverandre på telefon. */
.cfx .cfx-aktuelt__forst {
	display: grid;
	grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
	gap: calc(var(--cfx-skala) * 2.5rem);
	align-items: center;
	margin-block-end: calc(var(--cfx-skala) * 2.5rem);
	padding-block-end: calc(var(--cfx-skala) * 2.5rem);
	border-bottom: 1px solid var(--cfx-kant);
}
.cfx .cfx-aktuelt__forst-media {
	display: block;
	overflow: hidden;
	aspect-ratio: 16 / 10;
	border-radius: var(--cfx-radius);
}
.cfx .cfx-aktuelt__forst-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.4s ease;
}
.cfx .cfx-aktuelt__forst:hover .cfx-aktuelt__forst-media img { transform: scale(1.03); }
.cfx .cfx-aktuelt__forst-tittel {
	margin-block: 0 calc(var(--cfx-skala) * 0.75rem);
	font-size: clamp(1.5rem, 3vw, calc(var(--cfx-skala) * 2.2rem));
	line-height: 1.15;
}
.cfx .cfx-aktuelt__forst-tittel a { color: var(--cfx-tittel); text-decoration-color: transparent; }
.cfx .cfx-aktuelt__forst-tittel a:hover { text-decoration-color: currentColor; }
.cfx .cfx-aktuelt__forst-tekst { margin-block: 0 calc(var(--cfx-skala) * 1.25rem); line-height: 1.55; }
.cfx .cfx-aktuelt__liste { row-gap: calc(var(--cfx-skala) * 2rem); }
.cfx .cfx-aktuelt__liste .cfx-kort__tittel { font-size: calc(var(--cfx-skala) * 1.2rem); }
/* Samme bildeflate på alle kortene, uansett bildets format. */
.cfx .cfx-aktuelt__liste .cfx-kort__media {
	display: block;
	aspect-ratio: 16 / 10;
	overflow: hidden;
}
.cfx .cfx-aktuelt__liste .cfx-kort__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.cfx .cfx-aktuelt__liste li[hidden] { display: none; }
.cfx .cfx-aktuelt__flere { display: flex; justify-content: center; margin-block: calc(var(--cfx-skala) * 2.5rem) 0; }
@media (max-width: 900px) {
	.cfx .cfx-aktuelt__forst { grid-template-columns: minmax(0, 1fr); gap: calc(var(--cfx-skala) * 1.25rem); }
}
@media (max-width: 750px) {
	.cfx .cfx-aktuelt__liste { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
	.cfx .cfx-aktuelt__forst-media img { transition: none; }
}


/* ---- Artikkelinnholdet (WPBakery i innlegg) --------------------------------
   Sakene er bygget i WPBakery: en hovedspalte (2/3) med tekst og nummererte
   mellomtitler, og ofte en sidespalte (1/3) med tips, knapper og logoer. Her
   får de samme skrift, luft og knapper som resten av nettsiden, uten at
   innholdet endres. (28. oktober 2026) */
.single-post .w-post-elm.post_content {
	color: var(--cfx-tekst);
}
.single-post .w-post-elm.post_content .wpb_text_column {
	font-size: calc(var(--cfx-skala) * 1.125rem);
	line-height: 1.7;
}
.single-post .w-post-elm.post_content :is(.vc_col-sm-8, .vc_col-sm-12) .wpb_text_column {
	max-width: 50em;
}
.single-post .w-post-elm.post_content .wpb_text_column p { margin-block: 0 1.1em; }
.single-post .w-post-elm.post_content :is(h2, h3) {
	margin-block: 2.2em 0.6em;
	font-size: calc(var(--cfx-skala) * 1.55rem);
	line-height: 1.25;
	color: var(--cfx-tittel);
}
.single-post .w-post-elm.post_content .wpb_text_column > .wpb_wrapper > :is(h2, h3):first-child { margin-block-start: 0; }
.single-post .w-post-elm.post_content ul { margin-inline-start: 1.25em; }
.single-post .w-post-elm.post_content li::marker { color: var(--cfx-gronn); }
.single-post .w-post-elm.post_content .wpb_text_column a:not(.w-btn) {
	color: var(--cfx-gronn);
	font-weight: 600;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
	overflow-wrap: anywhere;
}
.single-post .w-post-elm.post_content img { border-radius: calc(var(--cfx-radius) * 0.6); }

/* Sidespalten – en 1/3-spalte rett etter en 2/3-spalte, slik de fleste
   sakene er bygget – blir et kort som står mens man leser (PC). Tre like
   1/3-spalter er ikke en sidespalte og røres ikke. Redaktøren trenger ikke
   gjøre noe: oppsettet i WPBakery bestemmer utseendet. */
@media (min-width: 1025px) {
	/* Kortet klebes, ikke vc_column-inner: den er like høy som raden og har
	   ingenting å flytte seg i. carfix.js slår det av når kortet er for høyt
	   til å få plass under toppfeltet – da ville bunnen aldri vist. */
	.single-post .w-post-elm.post_content .vc_col-sm-8 + .vc_col-sm-4 > .vc_column-inner > .wpb_wrapper {
		position: sticky;
		top: calc(var(--cfx-topp-hoyde, 5rem) + 1.5rem);
	}
	.single-post .w-post-elm.post_content .vc_col-sm-8 + .vc_col-sm-4 > .vc_column-inner > .wpb_wrapper.er-hoy { position: static; }
}
.single-post .w-post-elm.post_content .vc_col-sm-8 + .vc_col-sm-4 > .vc_column-inner > .wpb_wrapper {
	padding: calc(var(--cfx-skala) * 1.75rem);
	border: 1px solid var(--cfx-kant);
	border-radius: var(--cfx-radius);
	background: var(--cfx-flate-lys);
}
.single-post .w-post-elm.post_content .vc_col-sm-8 + .vc_col-sm-4 .wpb_text_column {
	font-size: calc(var(--cfx-skala) * 1rem);
	line-height: 1.6;
}
.single-post .w-post-elm.post_content .vc_col-sm-8 + .vc_col-sm-4 :is(h2, h3) {
	margin-block: 1.6em 0.5em;
	font-size: calc(var(--cfx-skala) * 1.3rem);
}
/* Bilder i sidespalten: merkelogoer blir små og grå, alt annet står i full
   bredde. En logo kjennes på formen – minst 2,2 ganger så bred som høy –
   og får klassen cfx-logo i data.php. Filtypen sa ingenting: dekkbildene
   er også PNG. */
.single-post .w-post-elm.post_content .vc_col-sm-8 + .vc_col-sm-4 .w-image img {
	width: 100%;
	height: auto;
	border-radius: calc(var(--cfx-radius) * 0.6);
}
.single-post .w-post-elm.post_content .vc_col-sm-8 + .vc_col-sm-4 .w-image img.cfx-logo {
	max-width: 140px;
	max-height: 48px;
	width: auto;
	object-fit: contain;
	border-radius: 0;
	filter: grayscale(1);
	opacity: 0.7;
}
.single-post .w-post-elm.post_content .vc_col-sm-8 + .vc_col-sm-4 .w-image { margin-block: 0.5rem; }

/* Temaets knapper i sakene, med nettsidens form og vekt. */
.single-post .w-post-elm.post_content .w-btn {
	min-height: 48px;
	padding-inline: calc(var(--cfx-skala) * 1.4rem);
	border-radius: 8px;
	font-size: calc(var(--cfx-skala) * 1rem);
	font-weight: 700;
	line-height: 1.2;
}
.single-post .w-post-elm.post_content .w-btn-wrapper { margin-block: 1.25rem; }

/* Datoen under tittelen: dempet, uten kategori-merket. */
.single-post .w-post-elm.post_date { color: var(--cfx-dempet); font-size: calc(var(--cfx-skala) * 1rem); }

/* Mellomrom i sakene. Hovedteksten er begrenset til 68 tegn, men spalten var
   fortsatt 2/3 av bredden, så det ble et tomt felt før sidespalten. Rader med
   2/3 + 1/3 blir et rutenett: tekstbredde, fast luft, sidespalte. Temaets
   avstandselementer (us_separator) og overskriftenes marg la seg oppå
   hverandre og ga 130 px mellom avsnittene – nå er de mindre. */
@media (min-width: 1025px) {
	.single-post .w-post-elm.post_content .g-cols:has(> .vc_col-sm-8 + .vc_col-sm-4) {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 20rem);
		justify-content: start;
		column-gap: clamp(2.5rem, 4vw, 3.5rem);
		margin-inline: 0;
	}
	.single-post .w-post-elm.post_content .g-cols:has(> .vc_col-sm-8 + .vc_col-sm-4) > .wpb_column {
		width: auto;
		max-width: none;
		padding-inline: 0;
	}
	/* Temaets luft mellom spaltene sitter i vc_column-inner og er motvirket
	   av negativ marg på raden. Rutenettet har sin egen luft, så begge tas
	   bort – ellers sto teksten 31 px inn fra tittelen. */
	.single-post .w-post-elm.post_content .g-cols:has(> .vc_col-sm-8 + .vc_col-sm-4) > .wpb_column > .vc_column-inner {
		padding-inline: 0;
	}
}
.single-post .w-post-elm.post_content .w-separator {
	height: calc(var(--cfx-skala) * 1.25rem) !important;
	margin: 0 !important;
}
.single-post .w-post-elm.post_content :is(h2, h3) { margin-block-start: 1.6em; }
.single-post .w-post-elm.post_content .vc_col-sm-8 + .vc_col-sm-4 :is(h2, h3) { margin-block-start: 1.2em; }
.single-post .w-post-elm.post_content .wpb_text_column p:empty,
.single-post .w-post-elm.post_content .wpb_text_column p:has(> br:only-child) { display: none; }

/* Ingen tom luft øverst og nederst i sidespalte-kortet: temaets avstands-
   elementer og overskriftens marg i kantene tas bort. */
.single-post .w-post-elm.post_content .vc_col-sm-8 + .vc_col-sm-4 > .vc_column-inner > .wpb_wrapper > .w-separator:is(:first-child, :last-child) { display: none; }
.single-post .w-post-elm.post_content .vc_col-sm-8 + .vc_col-sm-4 > .vc_column-inner > .wpb_wrapper > :first-child,
.single-post .w-post-elm.post_content .vc_col-sm-8 + .vc_col-sm-4 > .vc_column-inner > .wpb_wrapper > :not(.w-separator):first-of-type :is(h2, h3):first-child { margin-block-start: 0; }
.single-post .w-post-elm.post_content .vc_col-sm-8 + .vc_col-sm-4 > .vc_column-inner > .wpb_wrapper > :last-child { margin-block-end: 0; }


/* Tom sidespalte (finnes i noen saker): ingen kort, ingen tom boks. */
.single-post .w-post-elm.post_content .vc_col-sm-8 + .vc_col-sm-4 > .vc_column-inner > .wpb_wrapper:not(:has(img, a, h2, h3, h4, li, p:not(:empty))) {
	padding: 0;
	border: 0;
	background: none;
}

/* Bunnen av sakene. Temaets seksjonsluft la seg oppå malens, og det ble
   190 px tomrom før bunnfeltet – 280 px der en sak hadde en tom rad til
   slutt. Tomme rader skjules, og den siste raden har ingen luft under seg;
   avstanden til bunnfeltet kommer fra malen alene. */
.single-post .w-post-elm.post_content > .l-section:not(:has(img, iframe, h2, h3, h4, li, a, .w-grid, p:not(:empty))) {
	display: none;
}
.single-post .w-post-elm.post_content > .l-section {
	padding-block-end: 0;
}
.single-post .w-post-elm.post_content .wpb_column:last-child .wpb_wrapper > .w-separator:last-child { display: none; }

/* Artiklene er smalere enn resten av nettsiden: 1 120 px, som akkurat er
   tekstbredden, luften og sidespalten. Toppbildet, tittelen og
   innholdet står på samme kanter. Før sto det mye tomrom til høyre på brede
   skjermer. (28. oktober 2026) */
.single-post {
	--cfx-artikkelbredde: 1120px;
}
.single-post .l-main .l-section > .l-section-h {
	max-width: var(--cfx-artikkelbredde);
}
/* Toppbildet står på de samme kantene som tittelen: artikkelbredden, eller
   skjermen minus temaets sideluft (2,5 rem på PC, 1,5 rem på telefon). */
.single-post .l-section.with_img {
	width: min(var(--cfx-artikkelbredde), 100% - 5rem);
}
@media (max-width: 1024px) {
	.single-post .l-section.with_img { width: calc(100% - 3rem); }
}
@media (min-width: 1025px) {
	.single-post .w-post-elm.post_content .g-cols:has(> .vc_col-sm-8 + .vc_col-sm-4) {
		justify-content: space-between;
	}
}


/* Lysboks for bildene i artiklene (carfix.js). Knappen rundt bildet er
   usynlig; bare markøren og fokusringen viser at bildet kan åpnes. */
.cfx-lysboks__apne {
	display: block;
	padding: 0;
	border: 0;
	background: none;
	cursor: zoom-in;
	border-radius: inherit;
}
.cfx-lysboks__apne:focus-visible { outline: 3px solid var(--cfx-gronn); outline-offset: 3px; }
.cfx-lysboks {
	max-width: none;
	max-height: none;
	width: 100%;
	height: 100%;
	padding: clamp(1rem, 4vw, 3rem);
	border: 0;
	background: rgb(10 20 15 / 0.82);
	place-items: center;
	cursor: zoom-out;
}
.cfx-lysboks[open] { display: grid; }
.cfx-lysboks::backdrop { background: rgb(10 20 15 / 0.88); }
.cfx-lysboks img {
	max-width: 100%;
	max-height: calc(100dvh - 2 * clamp(1rem, 4vw, 3rem));
	width: auto;
	height: auto;
	border-radius: 12px;
	/* Hvit bunn: flere av bildene er gjennomsiktige PNG-er (dekkslitasje på
	   hjulstilling) og forsvant mot den mørke bakgrunnen. */
	background: #fff;
	cursor: default;
}
.cfx-lysboks__lukk {
	position: fixed;
	inset-block-start: 1rem;
	inset-inline-end: 1rem;
	width: 44px;
	height: 44px;
	border: 0;
	border-radius: 50%;
	background: #fff;
	color: #111;
	font-size: 1.75rem;
	line-height: 1;
	cursor: pointer;
}

/* «Spørsmål og svar» i artiklene ([carfix_sporsmal]): står i tekstspalten,
   uten seksjonens egen sideluft og bakgrunn, så kantene følger teksten. */
.single-post .cfx-artikkel-faq.cfx {
	padding: 0;
	/* Luft under også: spørsmålene står ofte sist i artikkelen, og den siste
	   raden har ingen luft under seg (se «Bunnen av sakene»). */
	margin-block: calc(var(--cfx-skala) * 3rem) calc(var(--cfx-skala) * 6rem);
	background: none;
}
.single-post .cfx-artikkel-faq.cfx > * { max-width: none; margin-inline: 0; }
.single-post .cfx-artikkel-faq .cfx-hode__tittel { margin-block: 0 calc(var(--cfx-skala) * 1rem); }
.single-post .cfx-artikkel-faq .cfx-faq__liste { display: grid; gap: calc(var(--cfx-skala) * 0.5rem); }

/* To tekstblokker etter hverandre: luft mellom dem, som mellom avsnitt med
   mellomtittel. */
.single-post .w-post-elm.post_content .wpb_text_column + .wpb_text_column { margin-block-start: calc(var(--cfx-skala) * 1.5rem); }
/* Artiklene står på hvit bunn, så hvite spørsmålskort forsvant. Kortene får
   sandfargen fra resten av nettsiden og tettere luft. */
.single-post .cfx-artikkel-faq .cfx-faq__punkt {
	margin: 0;
	background: var(--cfx-flate);
	border-color: transparent;
}
.single-post .cfx-artikkel-faq .cfx-faq__punkt[open] { background: #fff; border-color: var(--cfx-kant); }

/* Luft mellom toppbildet og tittelen. */
.single-post .l-section.with_img { margin-block-end: calc(var(--cfx-skala) * 1.5rem); }

/* «Dette hjelper vi deg med» på mobil: bare listen. De tre fremhevede står
   allerede i den, og tre store kort først gjorde seksjonen lang før man så
   hva Carfix gjør. Ingressen om «mest populære» gjelder da ikke
   (29. oktober 2026). */
@media (max-width: 600px) {
	.cfx-tjenester.cfx .cfx-tjenester__kort,
	.cfx-tjenester.cfx .cfx-hode__ingress { display: none; }
}

/* «Finn ditt verksted» på mobil: én statuslinje over listen når alle står
   likt (forside.php), og områdene samlet i ett kort med tettere rader.
   Elleve like «Åpner i morgen kl. 07:30» sa det samme elleve ganger
   (29. oktober 2026). */
.cfx-verksteder__na { display: none; }
@media (max-width: 640px) {
	.cfx-verksteder.cfx .cfx-verksteder__na {
		display: flex;
		align-items: center;
		gap: calc(var(--cfx-skala) * 0.5rem);
		flex-basis: 100%;
		margin: 0;
		font-weight: 600;
		color: var(--cfx-stengt);
	}
	.cfx-verksteder.cfx .cfx-verksteder__na.er-apent { color: var(--cfx-apen); }
	.cfx-verksteder.cfx .cfx-verksteder__na .cfx-status__prikk {
		flex: none;
		width: 9px;
		height: 9px;
		border-radius: 50%;
		background: currentColor;
	}
	.cfx-verksteder.cfx .cfx-verksteder__na > span:last-child { color: var(--cfx-tekst); font-weight: 400; }
	.cfx-verksteder.har-lik-status.cfx .cfx-region__rad > .cfx-status { display: none; }

	.cfx-verksteder.cfx .cfx-verksteder__regioner {
		padding: calc(var(--cfx-skala) * 0.4rem) calc(var(--cfx-skala) * 1.1rem);
		background: #fff;
		border: 1px solid var(--cfx-kant);
		border-radius: var(--cfx-radius);
	}
	.cfx-verksteder.cfx .cfx-verksteder__regioner .cfx-region {
		margin: 0;
		padding: calc(var(--cfx-skala) * 0.9rem) 0 calc(var(--cfx-skala) * 0.2rem);
		background: none;
		border: 0;
		border-radius: 0;
	}
	.cfx-verksteder.cfx .cfx-region__region { padding-bottom: calc(var(--cfx-skala) * 0.5rem); }
	.cfx-verksteder.cfx.cfx .cfx-region li { padding-block: calc(var(--cfx-skala) * 0.55rem); }
	.cfx-verksteder.cfx.cfx .cfx-region:last-child li:last-child { border-bottom: 0; }

	/* Forsiden: regionnavnene (Bergen, Sogn …) så ut som lenker de ikke var,
	   og tok like mye plass som verkstedene (30. oktober 2026). Nå står
	   regionen lite og grått etter verkstedet: «Åsane Bergen». */
	.home .cfx-verksteder.cfx .cfx-region__region { display: none; }
	.home .cfx-verksteder.cfx .cfx-region__omrade {
		display: inline;
		margin-inline-start: 0.35em;
		font-size: 0.78em;
		font-weight: 400;
		color: var(--cfx-dempet);
	}
	.home .cfx-verksteder.cfx .cfx-verksteder__regioner .cfx-region { padding: 0; }
	.home .cfx-verksteder.cfx.cfx .cfx-region li { border-bottom: 1px solid var(--cfx-kant); }
	.home .cfx-verksteder.cfx.cfx .cfx-region:last-child li:last-child { border-bottom: 0; }
}

/* «Råd fra verkstedet» på forsiden, mobil: liggende kort – bildet til
   venstre, tittel og lenke til høyre. Tre stående kort tok nesten tre
   skjermhøyder (29. oktober 2026). */
@media (max-width: 600px) {
	.cfx-rad.cfx .cfx-rad__liste:not(.cfx-aktuelt__liste) { gap: calc(var(--cfx-skala) * 0.75rem); }
	.cfx-rad.cfx .cfx-rad__liste:not(.cfx-aktuelt__liste) .cfx-kort { flex-direction: row; align-items: stretch; }
	.cfx-rad.cfx .cfx-rad__liste:not(.cfx-aktuelt__liste) .cfx-kort__media {
		flex: 0 0 34%;
		aspect-ratio: auto;
		min-height: calc(var(--cfx-skala) * 7rem);
	}
	.cfx-rad.cfx .cfx-rad__liste:not(.cfx-aktuelt__liste) .cfx-kort__media img {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
	.cfx-rad.cfx .cfx-rad__liste:not(.cfx-aktuelt__liste) .cfx-kort__innhold {
		justify-content: space-between;
		gap: calc(var(--cfx-skala) * 0.4rem);
		padding: calc(var(--cfx-skala) * 0.85rem) calc(var(--cfx-skala) * 0.9rem);
	}
	.cfx-rad.cfx .cfx-rad__liste:not(.cfx-aktuelt__liste) .cfx-kort__tittel { font-size: calc(var(--cfx-skala) * 1rem); line-height: 1.3; }
	.cfx-rad.cfx .cfx-rad__liste:not(.cfx-aktuelt__liste) .cfx-kort__tekst { display: none; }
	.cfx-rad.cfx .cfx-rad__liste:not(.cfx-aktuelt__liste) .cfx-kort__handling { margin: 0; font-size: calc(var(--cfx-skala) * 0.85rem); }
	/* «Les mer» som vanlig tekst nederst i kortet. */
	.cfx-rad.cfx .cfx-rad__liste:not(.cfx-aktuelt__liste) .cfx-kort__handling { margin-top: auto; }
}

/* Tjenestekortene på /verkstedstjenester/ og /dekk-og-felg/, mobil: bildet
   tok over halve kortet, og teksten fikk 110 px å bryte i (29. oktober 2026). */
@media (max-width: 600px) {
	.cfx .cfx-tjenestekort {
		gap: calc(var(--cfx-skala) * 0.9rem);
		padding: calc(var(--cfx-skala) * 0.9rem);
	}
	/* Bildet fyller kortets høyde, også når tittelen går over flere linjer. */
	.cfx .cfx-tjenestekort__media {
		width: 28%;
		align-self: stretch;
		aspect-ratio: auto;
		min-height: calc(var(--cfx-skala) * 5.5rem);
	}
	/* Bare overskriften: ingressen gjorde listen med tolv tjenester lang. */
	.cfx .cfx-tjenestekort__tekst { display: none; }
	.cfx .cfx-tjenestekort { align-items: stretch; }
	.cfx .cfx-tjenestekort__innhold { gap: calc(var(--cfx-skala) * 0.5rem); }
	/* «Gå til …» som vanlig tekst nederst i kortet. */
	.cfx .cfx-tjenestekort__handling { margin-top: auto; }
	.cfx .cfx-tjenestekort__handling .cfx-lenke { font-size: calc(var(--cfx-skala) * 1rem); }
	/* Tittelen var 20 px mot lenkens 13,6 px i et kort på 360 px, og holdt av
	   plass til to linjer også når den hadde én. */
	.cfx.cfx .cfx-tjenestekort__tittel { font-size: calc(var(--cfx-skala) * 1.1rem); min-height: 0; }
}

/* Vanlige spørsmål på mobil: spørsmålene først, «Fant du ikke svaret?» under
   dem. Øverst dyttet boksen spørsmålene ned under folden (29. oktober 2026). */
@media (max-width: 900px) {
	.cfx-faq.cfx { display: grid; }
	.cfx-faq.cfx .cfx-faq__venstre { display: contents; }
	.cfx-faq.cfx .cfx-faq__tittel { order: 1; }
	.cfx-faq.cfx .cfx-faq__liste { order: 2; }
	.cfx-faq.cfx .cfx-faq__kontakt { order: 3; }
}

/* Skjemaet i «Få pris eller be om time» og «Be om firmaavtale»: den første
   seksjonen trenger ikke streken og luften som skiller den fra en seksjon
   over. Sammen med innpakningens marg ble det 90 px tomrom over «Hva skal
   gjøres?» (29. oktober 2026). */
.cfx-foresporsel .cfx-foresporsel__skjema .gform_wrapper { margin-top: 0; }
/* :first-child traff ikke: skjulte felt ligger først i listen. */
.cfx-foresporsel.cfx .cfx-foresporsel__skjema .gform_fields > .gsection:nth-child(1 of .gsection) {
	margin-top: 0;
	/* Gravity Forms setter padding med !important. */
	padding-top: 0 !important;
	border-top: 0;
}

/* Artikkelkortene («Råd fra verkstedet», aktuelt, firmaavtale): hele kortet
   er trykkflaten. Tittellenken dekker kortet usynlig, som i tjenestekortene
   (29. oktober 2026). */
.cfx-rad__liste .cfx-kort { position: relative; }
.cfx-rad__liste .cfx-kort__tittel a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

/* Verkstedvelgeren på /verksteder/: knappene i samme kolonner og med samme
   mellomrom som nedtrekkene over, så kantene står på linje (29. oktober 2026). */
.cfx .cfx-oversikt__filter .cfx-oversikt__knapper {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
	gap: calc(var(--cfx-skala) * 0.9rem);
}
.cfx .cfx-oversikt__filter .cfx-oversikt__knapper .cfx-knapp { width: 100%; max-width: none; }

/* Verksted uten naboer innen 50 km (elementer.php, «naboer»). */
/* Ingen egen max-width: .cfx.cfx > * midtstiller da avsnittet (fellen i CLAUDE.md). */
.cfx .cfx-naboer__ingress {
	margin-block: calc(var(--cfx-skala) * -0.5rem) calc(var(--cfx-skala) * 1.5rem);
	color: var(--cfx-tekst);
}
.cfx-naboer.er-alene.cfx .cfx-naboer__mer {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: calc(var(--cfx-skala) * 0.75rem) calc(var(--cfx-skala) * 1.5rem);
}

/* ---- Søkeresultatene (sok.php) ------------------------------------------ */
.cfx-sok.cfx { padding-block: calc(var(--cfx-skala) * 3rem); }
.cfx-sok__topp { display: grid; gap: calc(var(--cfx-skala) * 1rem); margin-bottom: calc(var(--cfx-skala) * 2rem); }
.cfx.cfx .cfx-sok__tittel {
	margin: 0;
	font-size: clamp(calc(var(--cfx-skala) * 1.8rem), 3.2vw, calc(var(--cfx-skala) * 2.6rem));
	line-height: 1.15;
	text-wrap: balance;
	color: var(--cfx-tittel);
}
.cfx .cfx-sok__skjema { display: flex; gap: calc(var(--cfx-skala) * 0.6rem); max-width: 40rem; }
.cfx .cfx-sok__skjema input {
	flex: 1 1 auto;
	min-width: 0;
	min-height: calc(var(--cfx-skala) * 2.9rem);
	padding: 0 calc(var(--cfx-skala) * 1rem);
	border: 1px solid var(--cfx-kant);
	border-radius: 10px;
	background: #fff;
	font: inherit;
}
.cfx .cfx-sok__antall { margin: 0; color: #5c5c5c; }
.cfx .cfx-sok__tomt { display: grid; gap: calc(var(--cfx-skala) * 1rem); }
.cfx .cfx-sok__snarveier { display: flex; flex-wrap: wrap; gap: calc(var(--cfx-skala) * 0.75rem); margin: 0; }

.cfx .cfx-sok__gruppe { margin-top: calc(var(--cfx-skala) * 2rem); }
.cfx.cfx .cfx-sok__gruppetittel {
	display: flex;
	align-items: center;
	gap: calc(var(--cfx-skala) * 0.5rem);
	margin: 0 0 calc(var(--cfx-skala) * 0.75rem);
	font-size: calc(var(--cfx-skala) * 0.85rem);
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--cfx-gronn);
}
.cfx .cfx-sok__gruppetittel span {
	padding: 0 calc(var(--cfx-skala) * 0.5rem);
	border-radius: 999px;
	background: var(--cfx-flate);
	letter-spacing: 0;
}
.cfx.cfx .cfx-sok__liste {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, calc(var(--cfx-skala) * 22rem)), 1fr));
	gap: calc(var(--cfx-skala) * 0.75rem);
	margin: 0;
	padding: 0;
	list-style: none;
}
.cfx .cfx-sok__treff {
	position: relative;
	display: flex;
	gap: calc(var(--cfx-skala) * 0.9rem);
	padding: calc(var(--cfx-skala) * 1rem) calc(var(--cfx-skala) * 1.1rem);
	border: 1px solid var(--cfx-kant);
	border-radius: var(--cfx-radius);
	background: #fff;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.cfx .cfx-sok__treff:hover { border-color: var(--cfx-gronn-lys); box-shadow: 0 6px 18px rgba(31, 42, 32, 0.1); }
.cfx .cfx-sok__ikon {
	flex: none;
	display: grid;
	place-items: center;
	width: calc(var(--cfx-skala) * 2.4rem);
	height: calc(var(--cfx-skala) * 2.4rem);
	border-radius: 50%;
	background: var(--cfx-gul);
	color: var(--cfx-gronn);
}
.cfx .cfx-sok__ikon .cfx-ikon { width: 55%; height: 55%; }
.cfx .cfx-sok__tekst { display: flex; flex-direction: column; gap: calc(var(--cfx-skala) * 0.25rem); min-width: 0; }
.cfx .cfx-sok__navn {
	font-weight: 700;
	font-size: calc(var(--cfx-skala) * 1.05rem);
	color: var(--cfx-tittel);
	text-decoration: none;
}
/* Hele kortet er trykkflaten; telefonen ligger over. */
.cfx .cfx-sok__navn::after { content: ""; position: absolute; inset: 0; }
.cfx .cfx-sok__tlf { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 0.3rem; color: #5c5c5c; text-decoration: none; }
.cfx .cfx-sok__tlf .cfx-ikon { width: 1em; height: 1em; }
.cfx .cfx-sok__meta,
.cfx .cfx-sok__dato { font-size: calc(var(--cfx-skala) * 0.9rem); color: #5c5c5c; }
.cfx .cfx-sok__linje { display: flex; flex-wrap: wrap; align-items: center; gap: calc(var(--cfx-skala) * 0.4rem) calc(var(--cfx-skala) * 1rem); }
.cfx .cfx-sok__pris { font-weight: 700; color: var(--cfx-gronn); font-size: calc(var(--cfx-skala) * 0.95rem); }

/* ---- «Bilverksted i Bergen» (sted.php) ---------------------------------- */
.cfx-sted.cfx { background: var(--cfx-gronn); color: #fff; padding-block: calc(var(--cfx-skala) * 3.5rem); }
.cfx .cfx-sted__topp { display: grid; gap: calc(var(--cfx-skala) * 1rem); align-content: center; }
/* Med bilde: tekst til venstre, bilde til høyre, som tjenestesidene. */
.cfx-sted.har-bilde.cfx .cfx-sted__rad {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
	gap: calc(var(--cfx-skala) * 3rem);
	align-items: center;
}
.cfx .cfx-sted__bilde { position: relative; margin-block: 0; border-radius: var(--cfx-radius); overflow: hidden; aspect-ratio: 4 / 3; }
/* Krysstoning mellom verkstedene, som forsiden. Uten skript vises det første. */
.cfx .cfx-sted__bilde img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	transition: opacity 1.2s ease;
}
.cfx .cfx-sted__bilde img.er-synlig { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .cfx .cfx-sted__bilde img { transition: none; } }
@media (max-width: 900px) {
	.cfx-sted.har-bilde.cfx .cfx-sted__rad { grid-template-columns: minmax(0, 1fr); gap: calc(var(--cfx-skala) * 1.75rem); }
	.cfx .cfx-sted__bilde { aspect-ratio: 16 / 9; }
}
.cfx .cfx-sted__kortbilde {
	display: block;
	margin: calc(var(--cfx-skala) * -1.4rem) calc(var(--cfx-skala) * -1.4rem) calc(var(--cfx-skala) * 0.5rem);
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-radius: var(--cfx-radius) var(--cfx-radius) 0 0;
	background: var(--cfx-flate);
}
.cfx .cfx-sted__kortbilde img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cfx.cfx .cfx-sted__tittel {
	margin: 0;
	font-size: clamp(calc(var(--cfx-skala) * 2.2rem), 4.5vw, calc(var(--cfx-skala) * 3.6rem));
	line-height: 1.05;
	text-wrap: balance;
	color: #fff;
}
.cfx .cfx-sted__ingress { margin: 0; font-size: calc(var(--cfx-skala) * 1.2rem); line-height: 1.5; color: rgba(255, 255, 255, 0.88); }
.cfx .cfx-sted__handling { display: flex; flex-wrap: wrap; gap: calc(var(--cfx-skala) * 0.75rem); margin: calc(var(--cfx-skala) * 0.5rem) 0 0; }
.cfx-sted.cfx .cfx-knapp--ramme { color: #fff; border-color: rgba(255, 255, 255, 0.5); background: transparent; }
.cfx-sted.cfx .cfx-knapp--ramme:hover { background: #fff; color: var(--cfx-gronn); }
.cfx-sted.cfx .cfx-knapp .cfx-ikon { width: 1.1em; height: 1.1em; }

.cfx-sted-verksteder.cfx { padding-block: calc(var(--cfx-skala) * 3rem) calc(var(--cfx-skala) * 1rem); }
.cfx.cfx .cfx-sted__liste {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, calc(var(--cfx-skala) * 18rem)), 1fr));
	gap: calc(var(--cfx-skala) * 1rem);
	/* margin-block, ikke margin: .cfx.cfx > * holder listen i innholdsbredden
	   med margin-inline: auto (fellen i CLAUDE.md). */
	margin-block: 0;
	padding: 0;
	list-style: none;
}
.cfx .cfx-sted__kort {
	display: flex;
	flex-direction: column;
	gap: calc(var(--cfx-skala) * 0.5rem);
	padding: calc(var(--cfx-skala) * 1.4rem);
	border: 1px solid var(--cfx-kant);
	border-radius: var(--cfx-radius);
	background: #fff;
}
.cfx.cfx .cfx-sted__navn { margin: 0; font-size: calc(var(--cfx-skala) * 1.3rem); }
.cfx .cfx-sted__navn a { color: var(--cfx-tittel); text-decoration: none; }
.cfx .cfx-sted__navn a:hover { color: var(--cfx-gronn); }
.cfx .cfx-sted__adresse { margin: 0; color: #5c5c5c; }
.cfx .cfx-sted__linje { display: flex; flex-wrap: wrap; align-items: center; gap: calc(var(--cfx-skala) * 0.4rem) calc(var(--cfx-skala) * 1.2rem); margin: 0; }
.cfx .cfx-sted__tlf { display: inline-flex; align-items: center; gap: 0.35rem; color: var(--cfx-tekst); text-decoration: none; }
.cfx .cfx-sted__tlf .cfx-ikon { width: 1em; height: 1em; }
.cfx .cfx-sted__knapper { display: flex; flex-wrap: wrap; align-items: center; gap: calc(var(--cfx-skala) * 0.75rem) calc(var(--cfx-skala) * 1.25rem); margin: auto 0 0; padding-top: calc(var(--cfx-skala) * 0.5rem); }

.cfx-sted-tjenester.cfx { padding-block: calc(var(--cfx-skala) * 2.5rem); }
.cfx.cfx .cfx-sted__tjenesteliste {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, calc(var(--cfx-skala) * 19rem)), 1fr));
	gap: calc(var(--cfx-skala) * 0.6rem);
	margin-block: 0;
	padding: 0;
	list-style: none;
}
.cfx .cfx-sted__tjenesteliste a {
	display: flex;
	align-items: center;
	gap: calc(var(--cfx-skala) * 0.8rem);
	padding: calc(var(--cfx-skala) * 0.75rem) calc(var(--cfx-skala) * 1rem);
	border: 1px solid var(--cfx-kant);
	border-radius: 12px;
	background: #fff;
	color: var(--cfx-tittel);
	text-decoration: none;
	transition: border-color 0.2s ease;
}
.cfx .cfx-sted__tjenesteliste a:hover { border-color: var(--cfx-gronn-lys); }
.cfx .cfx-sted__ikon {
	flex: none;
	display: grid;
	place-items: center;
	width: calc(var(--cfx-skala) * 2.2rem);
	height: calc(var(--cfx-skala) * 2.2rem);
	border-radius: 50%;
	background: var(--cfx-gul);
}
.cfx .cfx-sted__ikon .cfx-ikon { width: 55%; height: 55%; }
.cfx .cfx-sted__tjeneste { flex: 1 1 auto; font-weight: 600; }
.cfx .cfx-sted__pris { white-space: nowrap; font-weight: 700; color: var(--cfx-gronn); font-size: calc(var(--cfx-skala) * 0.95rem); }

.cfx-sted-lokal.cfx { padding-block: calc(var(--cfx-skala) * 1rem) calc(var(--cfx-skala) * 3.5rem); }
.cfx-sted-lokal.cfx p { font-size: calc(var(--cfx-skala) * 1.1rem); line-height: 1.6; }

/* ---- 404 med «Fri bane» (fant-ikke.php, spill.js) ------------------------ */
.cfx-404.cfx { background: var(--cfx-gronn); color: #fff; padding-block: calc(var(--cfx-skala) * 4rem) calc(var(--cfx-skala) * 3rem); }
.cfx .cfx-404__rad {
	display: grid;
	width: 100%;
	/* Fast bredde på spillet: med «auto» målte kolonnen den lange
	   hjelpeteksten og ble 680 px. Teksten tar resten. */
	grid-template-columns: minmax(0, 1fr) 480px;
	gap: calc(var(--cfx-skala) * 3rem);
	align-items: center;
}
@media (max-width: 900px) { .cfx .cfx-404__rad { grid-template-columns: minmax(0, 1fr); } }
.cfx .cfx-404__topp { display: grid; gap: calc(var(--cfx-skala) * 1.1rem); }
.cfx.cfx .cfx-404__tittel { margin: 0; font-size: clamp(calc(var(--cfx-skala) * 2.2rem), 5vw, calc(var(--cfx-skala) * 3.6rem)); line-height: 1.05; text-wrap: balance; color: #fff; }
.cfx .cfx-404__ingress { margin: 0; font-size: calc(var(--cfx-skala) * 1.2rem); line-height: 1.5; color: rgba(255, 255, 255, 0.88); }
.cfx-404.cfx .cfx-sok__skjema input { border-color: transparent; }
.cfx.cfx .cfx-404__veier { display: flex; flex-wrap: wrap; gap: calc(var(--cfx-skala) * 0.6rem); margin: calc(var(--cfx-skala) * 0.5rem) 0 0; padding: 0; list-style: none; }
.cfx .cfx-404__veier a {
	display: inline-flex;
	align-items: center;
	gap: calc(var(--cfx-skala) * 0.5rem);
	padding: calc(var(--cfx-skala) * 0.55rem) calc(var(--cfx-skala) * 1rem);
	border: 1px solid rgba(255, 255, 255, 0.35);
	border-radius: 999px;
	color: #fff;
	font-weight: 600;
	text-decoration: none;
}
.cfx .cfx-404__veier a:hover { background: var(--cfx-gul); border-color: var(--cfx-gul); color: var(--cfx-gronn); }
.cfx .cfx-404__veier .cfx-ikon { width: 1.1em; height: 1.1em; }

.cfx .cfx-spill { display: grid; gap: calc(var(--cfx-skala) * 0.75rem); width: min(100%, 480px); justify-self: end; }
@media (max-width: 900px) { .cfx .cfx-spill { justify-self: start; } }
.cfx.cfx .cfx-spill__hjelp {
	display: grid;
	gap: 0.2rem;
	margin: 0;
	padding: 0;
	list-style: none;
	font-family: "Courier New", Courier, ui-monospace, monospace;
	font-size: calc(var(--cfx-skala) * 0.9rem);
	line-height: 1.5;
	letter-spacing: 0.01em;
	color: rgba(255, 255, 255, 0.8);
}
.cfx .cfx-spill__hjelp span { display: inline-block; min-width: 7ch; color: var(--cfx-gul); }
.cfx .cfx-spill__mobil { display: none; }
@media (hover: none) and (pointer: coarse) {
	.cfx .cfx-spill__pc { display: none; }
	.cfx .cfx-spill__mobil { display: list-item; }
}
.cfx .cfx-spill__vaer { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.4rem; }
.cfx .cfx-spill__vaer button {
	padding: 0.35rem 0.9rem;
	border: 1px solid rgba(255, 255, 255, 0.4);
	border-radius: 999px;
	background: transparent;
	color: #fff;
	font: inherit;
	font-weight: 600;
	cursor: pointer;
}
.cfx .cfx-spill__vaer button:hover { border-color: #fff; }
.cfx .cfx-spill__vaer button[aria-pressed="true"] { background: var(--cfx-gul); border-color: var(--cfx-gul); color: var(--cfx-gronn); }
.cfx .cfx-spill__ramme {
	position: relative;
	width: 100%;
	border-radius: var(--cfx-radius);
	overflow: hidden;
	border: 3px solid #1b2a1d;
	box-shadow: 0 12px 32px -16px rgba(0, 0, 0, 0.6);
}
.cfx .cfx-spill__lerret { display: block; width: 100%; height: auto; touch-action: manipulation; cursor: pointer; }
.cfx .cfx-spill__lag {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: calc(var(--cfx-skala) * 0.8rem);
	padding: 1.5rem;
	background: rgba(31, 42, 32, 0.78);
	color: #fff;
	text-align: center;
}
.cfx .cfx-spill__lag[hidden] { display: none; }
.cfx .cfx-spill__melding { margin: 0; font-size: calc(var(--cfx-skala) * 1.5rem); font-weight: 700; }
.cfx .cfx-spill__poeng { margin: 0; color: rgba(255, 255, 255, 0.8); }
.cfx .cfx-spill__verksted { color: var(--cfx-gul); }
.cfx .cfx-spill__teller {
	right: 0.8rem;
	position: absolute;
	top: 0.6rem;
	margin: 0;
	padding: 0.2rem 0.6rem;
	border-radius: 999px;
	background: rgba(0, 0, 0, 0.45);
	color: #fff;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.cfx .cfx-spill__verksted[hidden] { display: none; }
.cfx .cfx-spill__ramme.er-i-gang .cfx-spill__lerret { touch-action: none; }

/* ---- Ringevinduet på mobil (header.php, carfix.js) ----------------------- */
.cfx-ring {
	position: fixed;
	inset: auto 0 0;
	width: 100%;
	max-width: 100%;
	margin: 0;
	padding: 1.75rem 1.25rem calc(1.5rem + env(safe-area-inset-bottom));
	border: 0;
	border-radius: 18px 18px 0 0;
	background: var(--cfx-gronn, #2b452f);
	color: #fff;
	text-align: center;
	font-family: inherit;
	box-sizing: border-box;
}
.cfx-ring[open] { display: grid; gap: 0.6rem; justify-items: center; align-content: start; }
/* Nettleserens egen regel for dialog:modal (top: 0; bottom: 0) veier mer enn
   én klasse, og i WebKit (Safari, Brave på iPhone) strakk vinduet seg over
   hele skjermen (30. oktober 2026). Dobbel klasse og [open] veier mer. */
.cfx-ring.cfx-ring[open] {
	top: auto;
	bottom: 0;
	left: 0;
	right: 0;
	height: auto;
	max-height: calc(100% - 2rem);
	margin: 0;
}
.cfx-ring::backdrop { background: rgba(15, 22, 16, 0.55); }
.cfx-ring .cfx-ring__etikett { margin: 0; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--cfx-gul, #ffe500); }
.cfx-ring .cfx-ring__nummer { margin: 0; font-size: 2.2rem; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
/* Vinduet ligger utenfor .cfx-seksjonene, så knappen får stilen sin her. */
.cfx-ring .cfx-ring__ring.cfx-ring__ring {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	width: 100%;
	max-width: 22rem;
	min-height: 52px;
	margin-block-start: 0.5rem;
	border-radius: 10px;
	background: var(--cfx-gul, #ffe500);
	color: var(--cfx-gronn, #2b452f);
	font-size: 1.15rem;
	font-weight: 700;
	text-decoration: none;
	opacity: 1;
}
.cfx-ring .cfx-ring__ring .cfx-ikon { width: 1.1em; height: 1.1em; }
.cfx-ring .cfx-ring__verksted.cfx-ring__verksted { color: rgba(255, 255, 255, 0.85); font-size: 0.95rem; text-decoration-color: rgba(255, 255, 255, 0.35); }
.cfx-ring .cfx-ring__lukk {
	position: absolute;
	top: 0.6rem;
	right: 0.6rem;
	width: 44px;
	height: 44px;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.1);
	color: #fff;
	font-size: 1.6rem;
	line-height: 1;
	cursor: pointer;
}

/* Regionen etter verkstednavnet vises bare på mobil på forsiden. */
.cfx-region__omrade { display: none; }
.cfx-valg:focus { outline: none; }