/*
Theme Name: Bilopladning
Theme URI: https://bilopladning.dk
Author: Bilopladning.dk
Description: Custom-kodet tema til Bilopladning.dk - Danmarks sammenlignings- og beslutningsplatform for ladebokse, hjemmeladning og ladeabonnementer.
Version: 1.123.484
Text Domain: bilopladning
Requires PHP: 7.4
*/

/* ============================================================
 * FARVEPALET (CSS-variabler)
 * ============================================================
 * Alle farver styres herfra. Hvis du vil ændre temaets
 * farver senere, er det HER du gør det - ét sted, og det
 * opdaterer hele sitet automatisk.
 * ============================================================
 */
:root {
	/* Primære farver */
	--color-primary-dark: #0B7352;   /* Dyb skovgrøn - header, footer, overskrifter */
	--color-primary: #3EA66E;        /* Frisk grøn - knapper, CTA, links */
	--color-primary-light: #EAF6F0;  /* Lys mintgrøn - badges, sektioner */

	/* Baggrunde */
	--color-bg: #F7F9F8;             /* Hovedbaggrund */
	--color-bg-white: #FFFFFF;       /* Kort, bokse */
	--color-bg-muted: #F1F4F2;       /* Sekundære bokse */

	/* Tekst */
	--color-text: #1A1A1A;           /* Primær tekst */
	--color-text-muted: #5B6B65;     /* Sekundær tekst, labels */
	--color-text-on-primary: #0E2C22; /* Tekst på grønne knapper */
	--color-text-on-dark: #FFFFFF;   /* Tekst på mørk baggrund */
	--color-text-on-dark-muted: #CFE6DC; /* Sekundær tekst på mørk baggrund */

	/* Kanter og afstande */
	--color-border: #E1E7E4;

	/* ------------------------------------------------------------
	 * HJOERNERADIER (Fase 4B) - kun tre plus pilleformen.
	 * Foer: 30 forskellige vaerdier paa 216 steder.
	 * sm = knapper og felter | md = kort og bokse | pill = piller/chips
	 * ------------------------------------------------------------ */
	--radius-sm: 8px;
	--radius-md: 14px;
	--radius-pill: 999px;
	/* Bevaret, saa aeldre regler ikke braekker - peger nu paa de tre */
	--radius-lg: var(--radius-md);

	/* ------------------------------------------------------------
	 * AFSTANDSTRIN (Fase 4B) - alle afstande vaelges herfra.
	 * Foer: 39 forskellige px-vaerdier paa 967 steder.
	 * ------------------------------------------------------------ */
	--space-1: 4px;
	--space-2: 8px;
	--space-3: 12px;
	--space-4: 16px;
	--space-5: 24px;
	--space-6: 32px;
	--space-7: 48px;
	--space-8: 64px;
	--space-9: 96px;

	/* ------------------------------------------------------------
	 * SEKTIONSRYTME (Fase 4B) - lille luft indeni, stor luft imellem.
	 * Dette er kernen: en overskrift skal staa taettere paa sit eget
	 * indhold end paa sektionen ovenover, ellers kan oejet ikke gruppere.
	 * ------------------------------------------------------------ */
	--section-y: clamp(30px, 4.4vw, 48px); /* halv luft - to sektioner giver 60-96px imellem */
	--stack-tight: var(--space-2);          /* overskrift -> undertekst */
	--stack: var(--space-5);                /* overskrift -> indhold */

	/* Sektionsbaand - skifter ved emneskift, ikke hver anden sektion */
	--band-bg: #F2F7F4;

	/* ------------------------------------------------------------
	 * SKRIFTTRIN (Fase 4B) - syv trin der skalerer med skaermen.
	 * Foer: 97 forskellige vaerdier og ingen clamp().
	 * ------------------------------------------------------------ */
	--text-2xs: 0.8125rem;                    /* 13px - husets gulv. Var 11 til 24/9 2026. */
	--text-xs:  0.8125rem;                    /* 13px - husets gulv. Var 12 til 24/9 2026. */
	--text-sm:  0.8125rem;                    /* 13px - hjaelpetekst */
	--text-base: 0.9375rem;                   /* 15px - broedtekst */
	--text-md:  1.0625rem;                    /* 17px - stor broedtekst */
	--text-lg:  1.25rem;                      /* 20px - underoverskrift, samme paa telefon og computer */
	--text-xl:  clamp(1.375rem, 2.4vw, 1.625rem); /* 22 paa telefon, 26 paa computer - afsnitsoverskrift */
	--text-2xl: clamp(1.8rem,  3.6vw, 2.5rem);   /* H1 */

	/* ------------------------------------------------------------
	 * HANDLINGSFARVE (Fase 4B) - orange betyder én ting:
	 * "det her foerer dig til et tilbud hos en udbyder".
	 * Bruges KUN paa affiliate-knapper. Alt andet er groent.
	 * ------------------------------------------------------------ */
	--color-action: #E8622A;
	--color-action-hover: #D0521C;
	--color-action-text: #FFFFFF;

	/* Skygger (brug sparsomt) */
	--shadow-card: 0 1px 3px rgba(0, 0, 0, 0.06);

	/* Typografi */
	--font-display: 'Sora', sans-serif;
	--font-body: 'Inter', sans-serif;

	/* Layout */
	--container-width: 1200px;
}

/* ============================================================
 * RESET & GRUNDLÆGGENDE OPSÆTNING
 * ============================================================
 */
*,
*::before,
*::after {
	box-sizing: border-box;
}

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

body {
	margin: 0;
	font-family: var(--font-body);
	font-size:var(--text-md);
	line-height: 1.6;
	color: var(--color-text);
	background-color: var(--color-bg);
	-webkit-font-smoothing: antialiased;
}

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

a {
	color: var(--color-primary-dark);
	text-decoration: none;
	transition: color 0.15s ease;
}

a:hover {
	color: var(--color-primary);
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-display);
	font-weight: 500;
	color: var(--color-text);
	line-height: 1.25;
	margin: 0 0 0.5em;
}

/* Husets ene sidetitel (24/9 2026): 36 punkter paa computer,
   glidende ned til 28,8 paa telefon. Det er tallet fra det faste
   saet 22. september. Forsiden og de tre vaerktoejer har deres egen
   store overskrift og roeres ikke - de har hver sin egen regel. */
h1 { font-size: clamp(1.8rem, 3.6vw, 2.25rem); line-height: 1.2; }
h2 { font-size:var(--text-xl); }
h3 { font-size:var(--text-lg); }
h4 { font-size:var(--text-md); }

p {
	margin: 0 0 1em;
}

ul, ol {
	margin: 0 0 1em;
	padding-left: 1.5em;
}

/* ============================================================
 * LAYOUT-HJÆLPEKLASSER
 * ============================================================
 */
.container {
	max-width: var(--container-width);
	margin: 0 auto;
	padding: 0 24px;
}

.visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

/* ============================================================
 * KNAPPER
 * ============================================================
 */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	font-family: var(--font-body);
	font-weight: 500;
	font-size:var(--text-base);
	padding: 12px 24px;
	min-height: 44px;
	box-sizing: border-box;
	border-radius: var(--radius-md);
	border: 0.5px solid transparent;
	cursor: pointer;
	transition: transform 0.1s ease, opacity 0.15s ease;
	text-align: center;
	line-height: 1.2;
}

.btn:hover {
	opacity: 0.92;
}

.btn:active {
	transform: scale(0.98);
}

.btn-primary {
	background-color: var(--color-primary);
	color: var(--color-text-on-primary);
}

.btn-primary:hover {
	color: var(--color-text-on-primary);
}

.btn-secondary {
	background-color: transparent;
	border-color: var(--color-border);
	color: var(--color-text);
}

.btn-secondary:hover {
	color: var(--color-text);
	background-color: var(--color-bg-white);
}

.btn-small {
	padding: 8px 16px;
	font-size:var(--text-sm);
}

.btn-block {
	display: flex;
	width: 100%;
}

/* ============================================================
 * BADGES
 * ============================================================
 */
.badge {
	display: inline-block;
	font-size:var(--text-xs);
	font-weight: 500;
	padding: 4px 10px;
	border-radius: var(--radius-sm);
	background-color: var(--color-primary-light);
	color: var(--color-primary-dark);
}

.badge-muted {
	background-color: var(--color-bg-muted);
	color: var(--color-text-muted);
}

/* ============================================================
 * KORT (CARDS)
 * ============================================================
 */
.card {
	background-color: var(--color-bg-white);
	border: 0.5px solid var(--color-border);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-card);
}

/* ============================================================
 * HEADER
 * ============================================================
 */
.site-header {
	background-color: var(--color-primary-dark);
}

.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding: 16px 24px;
	flex-wrap: wrap;
}

.site-logo {
	font-family: var(--font-display);
	font-weight: 500;
	font-size:var(--text-lg);
	color: var(--color-text-on-dark);
	white-space: nowrap;
}

.site-logo span {
	color: var(--color-primary);
}

.main-nav {
	display: flex;
	gap: 24px;
	flex-wrap: wrap;
}

.main-nav a {
	color: var(--color-text-on-dark-muted);
	font-size:var(--text-base);
}

.main-nav a:hover {
	color: var(--color-text-on-dark);
}

.main-nav ul {
	display: flex;
	gap: 24px;
	list-style: none;
	margin: 0;
	padding: 0;
	flex-wrap: wrap;
}

.header-cta {
	white-space: nowrap;
}

.menu-toggle {
	display: none;
	background: none;
	border: none;
	color: var(--color-text-on-dark);
	font-size:var(--text-lg);
	cursor: pointer;
}

/* ============================================================
 * HERO (FORSIDE)
 * ============================================================
 */
.hero {
	text-align: center;
	padding: 56px 24px 40px;
}

.hero h1 {
	max-width: 640px;
	margin: 0 auto 12px;
	font-size:var(--text-2xl);
}

.hero p {
	max-width: 520px;
	margin: 0 auto 24px;
	color: var(--color-text-muted);
	font-size:var(--text-md);
}

.hero-actions {
	display: flex;
	justify-content: center;
	gap: 12px;
	flex-wrap: wrap;
}

/* ============================================================
 * "MEST POPULÆRE" SEKTION
 * ============================================================
 */
.popular-section {
	margin: 0 24px 32px;
	padding: 20px;
}

.popular-section__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 16px;
	flex-wrap: wrap;
}

.popular-section__title {
	font-size:var(--text-base);
	font-weight: 500;
	margin: 0;
}

.popular-section__meta {
	font-size:var(--text-sm);
	color: var(--color-text-muted);
}

.popular-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 12px;
}

.popular-card {
	border-radius: var(--radius-md);
	padding: 14px;
}

.popular-card--featured {
	background-color: var(--color-primary-light);
}

.popular-card--default {
	background-color: var(--color-bg-muted);
}

.popular-card__rank {
	font-size:var(--text-xs);
	font-weight: 500;
	margin-bottom: 4px;
}

.popular-card--featured .popular-card__rank {
	color: var(--color-primary-dark);
}

.popular-card--default .popular-card__rank {
	color: var(--color-text-muted);
}

.popular-card__title {
	font-size:var(--text-base);
	font-weight: 500;
	margin-bottom: 2px;
}

.popular-card__meta {
	font-size:var(--text-sm);
	color: var(--color-text-muted);
	margin-bottom: 10px;
}

/* ============================================================
 * TRUST-BAR
 * ============================================================
 */
.trust-bar {
	display: flex;
	gap: 24px;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	padding: 0 24px 40px;
	font-size:var(--text-sm);
	color: var(--color-text-muted);
}

.trust-bar__item {
	display: flex;
	align-items: center;
	gap: 6px;
}

.trust-bar__dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background-color: var(--color-primary);
	display: inline-block;
}

/* ============================================================
 * PRODUKT-GRID (ARKIV: /ladeboks/)
 * ============================================================
 */
.archive-header {
	padding: 40px 24px 24px;
	text-align: center;
}

/* Layout: filterpanel til venstre, produkter til højre */
.archive-layout {
	display: grid;
	grid-template-columns: 260px 1fr;
	gap: 24px;
	max-width: var(--container-width);
	margin: 0 auto;
	padding: 0 24px 48px;
	align-items: start;
}

/* ============================================================
 * FILTERPANEL
 * ============================================================
 */
.filter-panel {
	padding: 20px;
	display: flex;
	flex-direction: column;
	gap: 20px;
	position: sticky;
	top: 24px;
}

.filter-panel__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.filter-panel__header h3 {
	font-size:var(--text-md);
	margin: 0;
}

.filter-reset {
	background: none;
	border: none;
	color: var(--color-text-muted);
	font-size:var(--text-sm);
	cursor: pointer;
	padding: 0;
	text-decoration: underline;
}

.filter-reset:hover {
	color: var(--color-primary-dark);
}

.filter-group {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.filter-group__title {
	font-size:var(--text-sm);
	font-weight: 600;
	color: var(--color-text);
	margin: 0;
}

.filter-option {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size:var(--text-base);
	cursor: pointer;
	color: var(--color-text);
}

.filter-option input {
	accent-color: var(--color-primary);
	width: 16px;
	height: 16px;
	cursor: pointer;
}

.filter-group--price {
	gap: 10px;
}

.filter-price-inputs {
	display: flex;
	align-items: center;
	gap: 8px;
}

.filter-price-inputs input[type="number"] {
	width: 100%;
	padding: 8px 10px;
	border: 0.5px solid var(--color-border);
	border-radius: var(--radius-sm);
	font-size:var(--text-sm);
	font-family: var(--font-body);
	background-color: var(--color-bg);
}

.filter-price-inputs span {
	color: var(--color-text-muted);
	font-size:var(--text-sm);
}

/* ============================================================
 * KØB/LEJE TOGGLE (animeret, "pille"-stil)
 * ============================================================
 */
.filter-toggle-group {
	position: relative;
	display: flex;
	background-color: var(--color-bg);
	border: 0.5px solid var(--color-border);
	border-radius: var(--radius-md);
	padding: 3px;
	gap: 2px;
}

/* Den glidende, hvide "pille" der animerer mellem Alle/Køb/Leje */
.filter-toggle-indicator {
	position: absolute;
	top: 3px;
	left: 3px;
	width: calc(33.333% - 2px);
	height: calc(100% - 6px);
	background-color: var(--color-bg-white);
	border-radius: var(--radius-sm);
	box-shadow: var(--shadow-card);
	transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
	z-index: 0;
}

.filter-toggle-btn {
	flex: 1;
	position: relative;
	z-index: 1;
	border: none;
	background: none;
	padding: 8px 10px;
	font-family: var(--font-body);
	font-size:var(--text-sm);
	font-weight: 500;
	color: var(--color-text-muted);
	border-radius: var(--radius-sm);
	cursor: pointer;
	transition: color 0.15s ease;
}

.filter-toggle-btn:hover {
	color: var(--color-text);
}

.filter-toggle-btn.is-active {
	color: var(--color-primary-dark);
}

/* ============================================================
 * UDBYDER-WHEEL
 * ============================================================
 * Ét felt der viser ét udbydernavn ad gangen. Navigeres med
 * pil-knapper eller swipe (touch) op/ned.
 */
.udbyder-wheel {
	display: flex;
	align-items: stretch;
	border: 0.5px solid var(--color-border);
	border-radius: var(--radius-md);
	overflow: hidden;
	background-color: var(--color-bg-white);
}

.udbyder-wheel__field {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 10px 8px;
	min-width: 0;
	transition: opacity 0.12s ease, transform 0.12s ease;
}

.udbyder-wheel__logo {
	max-height: 20px;
	max-width: 60px;
	object-fit: contain;
}

.udbyder-wheel__label {
	font-size:var(--text-base);
	font-weight: 500;
	color: var(--color-text);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.udbyder-wheel__arrows {
	display: flex;
	flex-direction: column;
	border-left: 0.5px solid var(--color-border);
}

.udbyder-wheel__arrow {
	border: none;
	background: none;
	width: 36px;
	height: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	color: var(--color-text-muted);
	transition: color 0.15s ease, background-color 0.15s ease;
}

.udbyder-wheel__arrow:first-child {
	border-bottom: 0.5px solid var(--color-border);
}

.udbyder-wheel__arrow:hover {
	color: var(--color-primary-dark);
	background-color: var(--color-bg-muted);
}

/* ============================================================
 * "SE ALLE UDBYDERE" - COLLAPSE TOGGLE
 * ============================================================
 */
.udbyder-collapse-toggle {
	display: flex;
	align-items: center;
	gap: 4px;
	width: 100%;
	border: none;
	background: none;
	padding: 6px 0 0;
	font-family: var(--font-body);
	font-size:var(--text-sm);
	color: var(--color-text-muted);
	cursor: pointer;
	text-align: left;
}

.udbyder-collapse-toggle:hover {
	color: var(--color-primary-dark);
}

.udbyder-collapse-icon {
	transition: transform 0.2s ease;
	flex-shrink: 0;
}

/* ============================================================
 * UDBYDER-BADGES (i "Se alle udbydere"-panelet)
 * ============================================================
 * Multi-select badges. Kan vise et logo + navn, hvis et logo
 * er uploadet under Ladebokse -> Udbyder-logoer.
 */
.filter-badge-group {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 10px;
	padding-top: 10px;
	border-top: 0.5px solid var(--color-border);
}

.filter-badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	border: 0.5px solid var(--color-border);
	background-color: var(--color-bg-white);
	color: var(--color-text);
	font-family: var(--font-body);
	font-size:var(--text-sm);
	font-weight: 500;
	padding: 6px 12px;
	border-radius: var(--radius-sm);
	cursor: pointer;
	transition: border-color 0.15s ease, color 0.15s ease, background-color 0.15s ease;
}

.filter-badge:hover {
	border-color: var(--color-primary);
}

.filter-badge.is-active {
	background-color: var(--color-primary-light);
	border-color: var(--color-primary);
	color: var(--color-primary-dark);
}

.filter-badge__logo {
	max-height: 16px;
	max-width: 40px;
	object-fit: contain;
}

.filter-select {
	width: 100%;
	padding: 10px 12px;
	border: 0.5px solid var(--color-border);
	border-radius: var(--radius-sm);
	font-size:var(--text-base);
	font-family: var(--font-body);
	background-color: var(--color-bg-white);
	color: var(--color-text);
	cursor: pointer;
}

/* Mobil: filterpanel kan foldes ud/sammen */
.filter-toggle {
	display: none;
	width: 100%;
	margin-bottom: 4px;
}

.filter-results-count {
	font-size:var(--text-sm);
	color: var(--color-text-muted);
	margin-bottom: 16px;
}

.no-results-message {
	grid-column: 1 / -1;
	text-align: center;
	padding: 48px 24px;
	color: var(--color-text-muted);
}

/* Sortering over grid */
.archive-toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 16px;
	flex-wrap: wrap;
}

.archive-toolbar .filter-select {
	width: auto;
	min-width: 200px;
}

.product-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: 20px;
}

.product-card {
	padding: 20px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	position: relative;
}

.product-card__badge {
	position: absolute;
	top: 16px;
	right: 16px;
}

.product-card__image {
	width: 100%;
	height: 140px;
	object-fit: contain;
	background-color: var(--color-bg-muted);
	border-radius: var(--radius-sm);
	margin-bottom: 8px;
}

.product-card__brand {
	font-size:var(--text-xs);
	color: var(--color-text-muted);
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.product-card__title {
	font-size:var(--text-md);
	margin: 0;
}

.product-card__specs {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
	font-size:var(--text-sm);
	color: var(--color-text-muted);
	margin: 4px 0;
}

.product-card__price {
	font-size:var(--text-lg);
	font-weight: 500;
	font-feature-settings: "tnum";
	margin: 4px 0 0;
}

.product-card__price-label {
	font-size:var(--text-xs);
	color: var(--color-text-muted);
	font-weight: 400;
}

.product-card__cta {
	margin-top: 8px;
}

/* ============================================================
 * SINGLE LADEBOKS-SIDE
 * ============================================================
 */
.product-single {
	max-width: var(--container-width);
	margin: 0 auto;
	padding: 40px 24px 64px;
	display: grid;
	grid-template-columns: 1fr 360px;
	gap: 40px;
}

.product-single__main {
	min-width: 0;
}

.product-single__image {
	width: 100%;
	background-color: var(--color-bg-white);
	border: 0.5px solid var(--color-border);
	border-radius: var(--radius-md);
	padding: 24px;
	margin-bottom: 24px;
	text-align: center;
}

.product-single__image img {
	max-height: 320px;
	margin: 0 auto;
	object-fit: contain;
}

.product-single__sidebar .card {
	padding: 24px;
	position: sticky;
	top: 24px;
}

.product-single__price {
	font-size:var(--text-xl);
	font-weight: 500;
	font-feature-settings: "tnum";
	margin-bottom: 4px;
}

.product-single__price-label {
	font-size:var(--text-sm);
	color: var(--color-text-muted);
	margin-bottom: 20px;
}

.spec-list {
	list-style: none;
	margin: 0 0 20px;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.spec-list li {
	display: flex;
	justify-content: space-between;
	font-size:var(--text-base);
	border-bottom: 0.5px solid var(--color-border);
	padding-bottom: 8px;
}

.spec-list li:last-child {
	border-bottom: none;
	padding-bottom: 0;
}

.spec-list .spec-label {
	color: var(--color-text-muted);
}

.spec-list .spec-value {
	font-weight: 500;
}

/* ============================================================
 * FOOTER
 * ============================================================
 */
.site-footer {
	background-color: var(--color-primary-dark);
	color: var(--color-text-on-dark-muted);
	margin-top: 48px;
}

.site-footer__inner {
	max-width: var(--container-width);
	margin: 0 auto;
	padding: 40px 24px;
	display: flex;
	flex-wrap: wrap;
	gap: 32px;
	justify-content: space-between;
}

.site-footer__col {
	min-width: 180px;
}

.site-footer__col h4,
.site-footer__col .site-footer__kol-titel {
	color: var(--color-text-on-dark);
	font-size:var(--text-base);
	margin-bottom: 12px;
}

.site-footer__col ul {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
	font-size:var(--text-sm);
}

.site-footer__col a {
	color: var(--color-text-on-dark-muted);
}

.site-footer__col a:hover {
	color: var(--color-text-on-dark);
}

.site-footer__bottom {
	border-top: 0.5px solid rgba(255, 255, 255, 0.12);
	text-align: center;
	font-size:var(--text-sm);
	padding: 16px 24px;
}

/* ============================================================
 * RESPONSIVT (MOBIL)
 * ============================================================
 */
@media (max-width: 800px) {
	.product-single {
		grid-template-columns: 1fr;
	}

	.popular-grid {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 700px) {
	.main-nav {
		display: none;
	}

	.menu-toggle {
		display: block;
	}

	.site-header.is-open .main-nav {
		display: flex;
		width: 100%;
		flex-direction: column;
		gap: 12px;
		padding-top: 12px;
	}

	.site-header.is-open .main-nav ul {
		flex-direction: column;
		gap: 12px;
	}

	.hero h1 {
		font-size:var(--text-xl);
	}

	.trust-bar {
		flex-direction: column;
		gap: 10px;
	}

	/* Filterpanel: stables over produkter, og kan foldes sammen */
	.archive-layout {
		grid-template-columns: 1fr;
	}

	.filter-panel {
		position: static;
		display: none;
	}

	.filter-panel.is-open {
		display: flex;
	}

	.filter-toggle {
		display: block;
	}

	.archive-toolbar {
		flex-direction: column;
		align-items: stretch;
	}

	.archive-toolbar .filter-select {
		width: 100%;
	}
}

/* ── Flueben-indikatorer på produktkort ─────────────────── */
.product-card__indicators {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	margin: 10px 0 4px;
}
.indicator {
	font-size:var(--text-xs);
	font-weight: 600;
	padding: 3px 8px;
	border-radius:var(--radius-pill);
	white-space: nowrap;
}
.indicator--ja {
	background: #eaf6f0;
	color: #0B7352;
	border: 1px solid #b5e0ca;
}
.indicator--nej {
	background: #fafafa;
	color: #bbb;
	text-decoration: line-through;
	font-weight: 400;
	border: 1px solid #eee;
}

/* ── Se mere fane ────────────────────────────────────────── */
.product-card__seemore {
	margin: 8px 0 12px;
	border-top: 1px solid #eee;
	padding-top: 8px;
	position: relative;
	z-index: 10;
}
.seemore-toggle {
	background: none;
	border: none;
	color: #3EA66E;
	font-size:var(--text-xs);
	font-weight: 600;
	cursor: pointer;
	padding: 0;
	display: flex;
	align-items: center;
	gap: 4px;
	position: relative;
	z-index: 10;
}
.seemore-toggle:hover { color: #0B7352; }
.seemore-toggle svg { transition: transform 0.2s; }
.seemore-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.seemore-panel {
	margin-top: 8px;
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.seemore-row {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size:var(--text-xs);
	color: #444;
	line-height: 1.3;
}
.seemore-ikon {
	flex-shrink: 0;
	width: 16px;
	font-size:var(--text-xs);
}
/**
 * ============================================================
 * PRODUKTKORT (assets/produktkort.css)
 * ============================================================
 * Styles til det nye ladeboks-produktkort.
 * Mobilfirst: 100% bredde på mobil, op til 480px max.
 * Bruger temaets CSS-variabler fra :root i style.css.
 * ============================================================
 */

/* ── WRAPPER ─────────────────────────────────────────────── */

.pk-wrap {
	position: relative;
	margin-bottom: 16px;
}

/* ── KAMPAGNE-STRIP (altid synlig når aktiv) ─────────────── */

.pk-strip {
	background: linear-gradient( 90deg, #0B7352 0%, #2E7D5E 100% );
	border-radius: var(--radius-md) var(--radius-md) 0 0;
	padding: 9px 16px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
}

.pk-strip__tekst {
	font-size:var(--text-xs);
	font-weight: 700;
	color: #fff;
	letter-spacing: 0.01em;
}

.pk-strip__spare {
	font-size:var(--text-xs);
	font-weight: 800;
	color: #7FFFB8;
	white-space: nowrap;
	flex-shrink: 0;
}

/* ── SELVE KORTET ────────────────────────────────────────── */

.pk {
	display: flex;
	background: var(--color-bg-white);
	border-radius: var(--radius-md);
	border: 1px solid var(--color-border);
	overflow: hidden;
	box-shadow: 0 1px 4px rgba(0, 0, 0, .06), 0 4px 16px rgba(0, 0, 0, .05);
}

/* Kort med kampagne-strip: runde hjørner kun i bunden */
.pk--med-strip {
	border-radius: 0 0 var(--radius-md) var(--radius-md);
}

/* ── VENSTREKANT ─────────────────────────────────────────── */

.pk__kant {
	flex: 0 0 5px;
}

/* ── KORTETS INDHOLD ─────────────────────────────────────── */

.pk__body {
	flex: 1 1 auto;
	padding: 14px 14px 14px 12px;
	min-width: 0;
}

/* ── HEADER (navn + billede) ─────────────────────────────── */

.pk__header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 10px;
	margin-bottom: 10px;
}

.pk__info {
	flex: 1 1 auto;
	min-width: 0;
}

.pk__navn {
	font-family: var(--font-display);
	font-size:var(--text-md);
	font-weight: 700;
	color: var(--color-text);
	letter-spacing: -0.01em;
	line-height: 1.2;
	margin: 0 0 4px;
}

/* ── TRUSTPILOT ──────────────────────────────────────────── */

.pk-tp {
	display: flex;
	align-items: center;
	gap: 5px;
	margin-bottom: 7px;
}

.pk-tp__stjerner {
	display: flex;
	gap: 1px;
}

.pk-tp__stjerne {
	width: 13px;
	height: 13px;
	border-radius:2px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.pk-tp__score {
	font-size:var(--text-xs);
	font-weight: 700;
	color: var(--color-text);
}

.pk-tp__antal {
	font-size:var(--text-xs);
	color: var(--color-text-muted);
}

.pk-tp__live {
	font-size:var(--text-2xs);
	font-weight: 700;
	color: var(--color-primary);
	background: var(--color-primary-light);
	padding: 2px 5px;
	border-radius:4px;
	letter-spacing: 0.03em;
}

/* ── BADGES ──────────────────────────────────────────────── */

.pk__badges {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	margin-bottom: 10px;
}

.pk-badge {
	font-size:var(--text-2xs);
	font-weight: 600;
	padding: 3px 9px;
	border-radius:var(--radius-sm);
	letter-spacing: 0.02em;
}

.pk-badge--groen {
	background: var(--color-primary-light);
	color: var(--color-primary-dark);
}

.pk-badge--rav {
	background: #FFF3E0;
	color: #9A6020;
}

/* ── PRODUKTBILLEDE ──────────────────────────────────────── */

.pk__foto {
	position: relative;
	width: 68px;
	height: 68px;
	flex-shrink: 0;
	border-radius: var(--radius-md);
	overflow: hidden;
	background: var(--color-bg-muted);
	border: 1px solid var(--color-border);
}

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

.pk__foto-placeholder {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 6px;
}

.pk__foto-placeholder span {
	font-size:var(--text-2xs);
	font-weight: 700;
	color: var(--color-text-muted);
	line-height: 1.3;
	word-break: break-word;
}

/* RIBBON (skrå kampagne-label i hjørnet af billedet) */
.pk__ribbon {
	position: absolute;
	top: 13px;
	right: -20px;
	width: 72px;
	background: rgba(27, 77, 62, 0.82);
	backdrop-filter: blur(2px);
	color: #fff;
	font-size:var(--text-2xs);
	font-weight: 800;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	text-align: center;
	padding: 4px 0;
	transform: rotate(45deg);
	pointer-events: none;
}

/* ── TYPE CHIP ───────────────────────────────────────────── */

.pk-chip {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 3px 10px;
	border-radius:var(--radius-pill);
	font-size:var(--text-2xs);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	margin-bottom: 11px;
}

.chip-groen {
	background: var(--color-primary-light);
	color: var(--color-primary-dark);
}

.chip-rav {
	background: #FFF3E0;
	color: #9A6020;
}

/* ── PRISLINJER ──────────────────────────────────────────── */

.pk__priser {
	border-top: 1px solid var(--color-border);
	padding-top: 2px;
}

.pk-rad {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 7px 0;
	border-bottom: 0.5px solid var(--color-bg-muted);
}

.pk-rad:last-child {
	border-bottom: none;
}

.pk-rad__label {
	font-size:var(--text-sm);
	color: var(--color-text-muted);
	flex-shrink: 0;
}

.pk-rad__vaerdi {
	font-size:var(--text-sm);
	font-weight: 600;
	color: var(--color-text);
	text-align: right;
	display: flex;
	align-items: center;
	gap: 5px;
	flex-wrap: wrap;
	justify-content: flex-end;
}

.pk-rad__note {
	font-size:var(--text-xs);
	color: var(--color-text-muted);
	margin: -4px 0 4px;
	padding: 0;
}

/* ── FARVE-HJÆLPERE ──────────────────────────────────────── */

.pk-groen {
	color: var(--color-primary);
}

.pk-rav {
	color: #C45E00;
}

.pk-bold {
	font-weight: 700;
}

.pk-dimmet {
	color: var(--color-text-muted);
	font-weight: 400;
}

.pk-gennemstreg {
	text-decoration: line-through;
	color: #bbb;
	font-weight: 400;
	font-size:var(--text-xs);
}

/* Lille chip inde i prislinjer */
.pk-chip-lille {
	font-size:var(--text-2xs);
	font-weight: 700;
	padding: 2px 6px;
	border-radius:var(--radius-pill);
}

.pk-chip-lille--rav {
	background: #FFF3E0;
	color: #9A6020;
}

.pk-chip-lille--graa {
	background: var(--color-bg-muted);
	color: var(--color-text-muted);
}

/* ── TOTAL ───────────────────────────────────────────────── */

.pk__total {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	padding: 10px 0 12px;
	border-top: 1.5px solid var(--color-border);
	margin-top: 4px;
	gap: 8px;
}

.pk__total-label {
	font-size:var(--text-2xs);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--color-text-muted);
	display: block;
}

.pk__total-note {
	font-size:var(--text-xs);
	color: var(--color-text-muted);
	margin: 2px 0 0;
}

.pk__total-note--groen {
	color: var(--color-primary);
	font-weight: 600;
}

.pk__total-tal {
	font-family: var(--font-display);
	font-size:var(--text-lg);
	font-weight: 700;
	color: var(--color-text);
	letter-spacing: -0.02em;
	line-height: 1;
}

/* ── CTA KNAP ────────────────────────────────────────────── */

.pk__cta {
	display: block;
	width: 100%;
	padding: 13px 16px;
	border: 0;
	border-radius: var(--radius-md);
	font-family: var(--font-body);
	font-size:var(--text-sm);
	font-weight: 700;
	color: #fff;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	letter-spacing: 0.01em;
	transition: filter 0.12s ease, transform 0.12s ease;
}

.pk__cta:hover {
	filter: brightness(1.08);
	transform: translateY(-1px);
	color: #fff;
}

/* ── MOBIL ───────────────────────────────────────────────── */

@media (max-width: 480px) {
	.pk__navn {
		font-size:var(--text-base);
	}
	.pk__foto {
		width: 58px;
		height: 58px;
	}
	.pk__total-tal {
		font-size:var(--text-lg);
	}
	.pk-strip__tekst {
		font-size:var(--text-xs);
	}
}

/* ── SCROLL-ANIMATION ────────────────────────────────────── */

@keyframes pk-slide-in {
	from {
		opacity: 0;
		transform: translateY(14px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.pk-wrap {
	animation: pk-slide-in 0.45s ease both;
}

.pk-wrap:nth-child(2) { animation-delay: 0.08s; }
.pk-wrap:nth-child(3) { animation-delay: 0.16s; }
.pk-wrap:nth-child(4) { animation-delay: 0.24s; }
.pk-wrap:nth-child(5) { animation-delay: 0.32s; }

/* ── FORSIDE PRODUKTLISTE LAYOUT ─────────────────────────── */
.forside-produkter {
	max-width: 640px;
	margin: 32px auto 24px;
	padding: 0 20px;
	box-sizing: border-box;
}

.forside-produkter__header {
	margin-bottom: 16px;
}

.forside-produkter__titel {
	font-family: var(--font-display);
	font-size:var(--text-lg);
	font-weight: 600;
	color: var(--color-text);
	margin: 0 0 4px;
}

.forside-produkter__meta {
	font-size:var(--text-base);
	color: var(--color-text-muted);
	margin: 0;
}

.forside-produkter__liste {
	display: flex;
	flex-direction: column;
}

/* Fix: pk-wrap skal have korrekt bredde */
.forside-produkter__liste .pk-wrap {
	width: 100%;
	max-width: 100%;
}

.forside-produkter__liste .pk {
	width: 100%;
	box-sizing: border-box;
}

/* ══════════════════════════════════════════════════════════
   MØK GRØN HERO (forsiden)
══════════════════════════════════════════════════════════ */

.hero-mork {
	background: radial-gradient(120% 120% at 50% -10%, #235c49 0%, #0B7352 45%, #143B30 100%);
	padding: 48px 20px 52px;
	text-align: center;
}

.hero-mork__indhold {
	max-width: 640px;
	margin: 0 auto;
}

.hero-mork__badge {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 7px 16px;
	border-radius:var(--radius-pill);
	background: rgba(255,255,255,.10);
	border: 1px solid rgba(255,255,255,.18);
	color: #EAF6F0;
	font-size:var(--text-sm);
	font-weight: 600;
	margin-bottom: 20px;
}

@keyframes hero-puls {
	0%, 100% { box-shadow: 0 0 0 0 rgba(95,211,154,.6); }
	70%       { box-shadow: 0 0 0 7px rgba(95,211,154,0); }
}

.hero-mork__prik {
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: #5FD39A;
	display: inline-block;
	animation: hero-puls 1.8s infinite;
	flex-shrink: 0;
}

.hero-mork__h1 {
	font-family: var(--font-display);
	font-size:var(--text-2xl);
	font-weight: 800;
	color: #fff;
	line-height: 1.12;
	letter-spacing: -0.01em;
	margin: 0 0 14px;
}

.hero-mork__accent {
	color: #5FD39A;
}

.hero-mork__p {
	color: rgba(255,255,255,.78);
	font-size:var(--text-md);
	line-height: 1.5;
	margin: 0 0 28px;
}

.hero-mork__kort {
	background: #fff;
	border-radius:var(--radius-md);
	padding: 18px;
	box-shadow: 0 24px 48px rgba(0,0,0,.28);
	text-align: left;
}

/* Adresse-feltet inde i hero: ingen margin-top */
.hero-mork__kort .adr-hjaelp,
.hero-mork__kort .adr-spring {
	color: #5B6B65;
}

/* ── PRODUCT GRID PÅ LADEBOKS-SIDEN ─────────────────────── */
/* Kortene skal stå i én kolonne på mobil, to på desktop */
.product-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 16px;
}

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

/* Hero mobil */
@media (max-width: 600px) {
	.hero-mork__h1 {
		font-size:var(--text-xl);
	}
	.hero-mork {
		padding: 36px 16px 40px;
	}
}

/* ── HERO MØRK: ekstra energi til kortets indhold ────────── */

/* Kolonner på én linje: felt + knap */
.hero-mork__kort .adr-felt {
	align-items: stretch;
	min-height: 58px;
}

/* Én kolonne på ladeboks-siden */
.product-grid {
	grid-template-columns: 1fr !important;
	max-width: 640px;
	margin: 0 auto;
}

/* ══════════════════════════════════════════════════════════
   PRODUKTKORT REVEAL + LYSER OP (Lag A)
══════════════════════════════════════════════════════════ */

/* Skjult fra start */
#forside-produkter {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity 0.55s ease, transform 0.55s ease;
	pointer-events: none;
}

/* Synlig når motoren når Trin 4 */
#forside-produkter.er-synlig {
	opacity: 1;
	transform: translateY(0);
	pointer-events: auto;
}

/* Fremhævet "Din match"-kort */
.pk-wrap.pk-match {
	position: relative;
}

.pk-wrap.pk-match .pk {
	border: 2.5px solid #3EA66E !important;
	box-shadow: 0 0 0 4px rgba(62,166,110,.15), 0 8px 24px rgba(0,0,0,.10) !important;
}

/* "Vores anbefaling · Dit match"-mærkat */
.pk-match-maerkat {
	display: flex;
	align-items: center;
	gap: 0;
	border-radius:var(--radius-md) var(--radius-md) 0 0;
	overflow: hidden;
}

.pk-match-maerkat__anbefaling {
	background: #E8622A;
	color: #fff;
	font-size:var(--text-xs);
	font-weight: 700;
	padding: 7px 14px;
	letter-spacing: 0.02em;
	flex: 1;
	text-align: center;
}

.pk-match-maerkat__match {
	background: #3EA66E;
	color: #fff;
	font-size:var(--text-xs);
	font-weight: 700;
	padding: 7px 14px;
	letter-spacing: 0.02em;
	flex: 1;
	text-align: center;
}

/* Dæmpede kort */
.pk-wrap.pk-daempet {
	opacity: 0.55;
	transition: opacity 0.35s ease;
}

.pk-wrap.pk-daempet:hover {
	opacity: 0.85;
}

/* ── DISKRET "SE ALLE LADEBOKSE"-LINK I MOTOREN ─────────── */
.motor__se-alle {
	text-align: right;
	margin: 0 0 6px;
	padding: 0 4px;
}

.motor__se-alle a {
	font-size:var(--text-xs);
	color: var(--color-primary-dark);
	opacity: 0.55;
	text-decoration: none;
	letter-spacing: 0.01em;
	transition: opacity 0.15s ease;
}

.motor__se-alle a:hover {
	opacity: 1;
	text-decoration: underline;
}

/* ── PRODUKTKORT SEKVENS-REVEAL ──────────────────────────── */

/* Alle kort skjult fra start */
.pk-wrap.pk-skjult {
	opacity: 0;
	transform: translateY(12px);
	pointer-events: none;
}

/* Match-kortet glider ind */
.pk-wrap.pk-match {
	transition: opacity 0.5s ease, transform 0.5s ease;
	opacity: 1 !important;
	transform: translateY(0) !important;
	pointer-events: auto;
}

/* Andre kort fader ind meget dæmpet bag hinden */
.pk-wrap.pk-daempet {
	transition: opacity 0.4s ease, transform 0.4s ease;
	opacity: 0.25;
	transform: translateY(0) !important;
	pointer-events: auto;
	filter: blur(1px);
}

.pk-wrap.pk-daempet:hover {
	opacity: 0.85;
	filter: none;
	transition: opacity 0.2s ease, filter 0.2s ease;
}

/* ══════════════════════════════════════════════════════════
   SAMMENLIGN-KNAP + HINDE OVER PRODUKTKORT
══════════════════════════════════════════════════════════ */

/* Knappen fader frem under motoren */
.pk-sammenlign-knap {
	display: block;
	width: calc(100% - 40px);
	max-width: 640px;
	margin: 16px auto 0;
	padding: 16px 24px;
	border: 0;
	border-radius:var(--radius-md);
	background: #0B7352;
	color: #fff;
	font-family: var(--font-body);
	font-size:var(--text-md);
	font-weight: 700;
	text-align: center;
	cursor: pointer;
	letter-spacing: .01em;
	opacity: 0;
	transform: translateY(8px);
	animation: pk-knap-ind 0.5s 0s ease forwards;
	transition: background 0.15s ease, transform 0.12s ease;
	box-shadow: 0 4px 16px rgba(27,77,62,.25);
}

@keyframes pk-knap-ind {
	to { opacity: 1; transform: translateY(0); }
}

.pk-sammenlign-knap:hover {
	background: #3EA66E;
	transform: translateY(-2px);
}

.pk-sammenlign-knap--brugt {
	background: var(--color-bg-muted);
	color: var(--color-primary-dark);
	font-size:var(--text-base);
	font-weight: 600;
	box-shadow: none;
}

/* Hinden over produktlisten */
.pk-hinde {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		to bottom,
		rgba(245,248,246,0.65) 0%,
		rgba(245,248,246,0.92) 50%,
		rgba(245,248,246,0.98) 100%
	);
	border-radius: inherit;
	pointer-events: none;
	z-index: 2;
	opacity: 1;
	transition: opacity 0.45s ease;
}

.pk-hinde--fjern {
	opacity: 0;
}

/* Produktsektionen bag hinden */
#forside-produkter {
	border-radius:var(--radius-md);
}

/* ── DISKRET "SKIFT TIL ELBIL"-LINK UNDER MOTOREN ────────── */
.motor-skift-el {
	display: flex;
	align-items: center;
	gap: 12px;
	max-width: 640px;
	margin: 16px auto 32px;
	padding: 16px 18px;
	border-radius:var(--radius-md);
	border: 1.5px dashed var(--color-border);
	background: var(--color-bg-white);
	text-decoration: none;
	transition: border-color 0.15s ease, background 0.15s ease;
}

.motor-skift-el:hover {
	border-color: var(--color-primary);
	background: var(--color-primary-light);
}

.motor-skift-el svg {
	color: var(--color-primary);
	flex-shrink: 0;
}

.motor-skift-el__tekst {
	display: flex;
	flex-direction: column;
	gap: 1px;
}

.motor-skift-el__titel {
	font-size:var(--text-sm);
	font-weight: 600;
	color: var(--color-text);
}

.motor-skift-el__sub {
	font-size:var(--text-xs);
	color: var(--color-text-muted);
}

/* ============================================================
 * HJØRNESTENSSIDE-SKABELON (page-hjornesten.php)
 * Fase 4, Trin 4 - teknisk SEO-fundament, 11/7 2026
 * ============================================================
 */
.hjornesten__brodkrumme {
	padding-top: 18px;
}

.brodkrumme,
.hjornesten__brodkrumme .yoast-breadcrumb {
	font-size:var(--text-sm);
	color: var(--color-text-muted);
	margin: 0 0 8px;
}

.brodkrumme a,
.hjornesten__brodkrumme .yoast-breadcrumb a {
	color: var(--color-text-muted);
	text-decoration: underline;
}

.hjornesten__hero {
	background: var(--color-primary-light);
	padding: 32px 0 36px;
	margin-bottom: 8px;
}

.hjornesten__hero-inner {
	max-width: 820px;
}

/* Den groenne top paa laesesiderne. Stoerrelsen kommer fra husets
   ene sidetitel ovenfor; her staar kun farve og luft. */
.hjornesten__hero h1 {
	color: var(--color-primary-dark);
	margin-bottom: 0.4em;
}

.hjornesten__undertekst {
	font-size:var(--text-md);
	color: var(--color-text-muted);
	max-width: 680px;
	margin: 0;
}

.hjornesten__indhold {
	max-width: 820px;
	padding: 36px 24px 8px;
}

.hjornesten__indhold .entry-content h2 {
	color: var(--color-primary-dark);
	margin-top: 1.4em;
}

.hjornesten__indhold .entry-content h3 {
	margin-top: 1.2em;
}

/* Yoast FAQ/How-to-blokke: tilpasses temaets look, så de ikke
   fremstår som et fremmed plugin-element midt i teksten. */
.hjornesten__indhold .schema-faq,
.hjornesten__indhold .schema-how-to {
	background: var(--color-bg-white);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	padding: 20px 24px;
	margin: 1.6em 0;
}

.hjornesten__indhold .schema-faq-question {
	font-family: var(--font-display);
	color: var(--color-primary-dark);
}

.hjornesten__relaterede {
	max-width: 820px;
	padding: 24px 24px 56px;
	border-top: 1px solid var(--color-border);
	margin-top: 32px;
}

.hjornesten__relaterede h2 {
	font-size:var(--text-lg);
}

.hjornesten__relaterede-liste {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.hjornesten__relateret-link {
	display: inline-block;
	padding: 10px 16px;
	border-radius: var(--radius-sm);
	background: var(--color-bg-muted);
	color: var(--color-primary-dark);
	font-weight: 600;
	font-size:var(--text-base);
	text-decoration: none;
}

.hjornesten__relateret-link:hover {
	background: var(--color-primary-light);
	color: var(--color-primary-dark);
}

@media (max-width: 640px) {
	.hjornesten__hero {
		padding: 24px 0 28px;
	}
	.hjornesten__indhold,
	.hjornesten__relaterede {
		padding-left: 20px;
		padding-right: 20px;
	}
}


/* ============================================================
 * KØBSGUIDE PÅ /ladeboks/ (Trin 5, side 2)
 * Tekst-sektion under sammenligningstabellen.
 * ============================================================ */
.ladeboks-guide {
	padding: 8px 24px 8px;
}
.ladeboks-guide__inner {
	max-width: 820px;
	margin: 0 auto;
}
.ladeboks-guide h2 {
	color: var(--color-primary-dark);
	margin-top: 1.4em;
}
.ladeboks-guide h3 {
	margin-top: 1.2em;
}
.ladeboks-guide p {
	line-height: 1.6;
}

/* ============================================================
 * TRIN 6 (14/7): LOGO, HOVEDMENU (DROPDOWN + BURGER), FOOTER
 * ------------------------------------------------------------
 * Tilføjet samlet i bunden, så den eksisterende, virkende kode
 * ikke røres. Reglerne her extender/overstyrer header-afsnittet
 * længere oppe. Se header.php / footer.php / assets/main.js.
 * ============================================================ */

/* --- Logo (rigtigt SVG) + diskret spin af lyn-mærket ved load --- */
.site-logo { display: inline-flex; align-items: center; line-height: 0; }
/* 25. september 2026 (Henrik): logoet var 276 bredt ved 27 i hoejden.
   Paa en 360 telefon er der 312 at tage af, og logo plus luft plus burger
   var 342, saa logoet broed om og toppen blev 125 hoej i stedet for 74.
   Ved 22 i hoejden er logoet cirka 225, og saa staar det paa een linje. */
.site-logo__svg { height: 22px; width: auto; display: block; }
/* Paa de smalleste telefoner (under 360) er der stadig for lidt plads til
   logo, luft og burger paa een linje. Maalt: 290 noedvendigt mod 272 til
   raadighed. Med mindre kant og mindre luft bliver det 278 mod 288. */
@media (max-width: 359px){
  .site-header__inner{ padding-left:16px; padding-right:16px; gap:12px; }
}
@keyframes bilo-mark-spin {
	0%   { transform: rotate(0deg) scale(1); }
	65%  { transform: rotate(372deg) scale(1.07); }
	100% { transform: rotate(360deg) scale(1); }
}
.site-logo__mark {
	transform-box: fill-box;
	transform-origin: center;
	animation: bilo-mark-spin 1.15s cubic-bezier(0.22, 0.9, 0.3, 1) 0.2s 1 both;
}
@media (prefers-reduced-motion: reduce) {
	.site-logo__mark { animation: none; }
}

/* --- Nav-container: menu + CTA på linje (desktop) --- */
.main-nav { display: flex; align-items: center; gap: 24px; flex-wrap: nowrap; }
.nav-menu {
	display: flex; align-items: center; gap: 22px;
	list-style: none; margin: 0; padding: 0;
}
.nav-menu > li { position: relative; }
.nav-menu > li > a {
	display: inline-flex; align-items: center; gap: 6px;
	color: var(--color-text-on-dark-muted); font-size:var(--text-base);
	padding: 8px 0; white-space: nowrap;
}
.nav-menu > li > a:hover,
.nav-menu > li:focus-within > a { color: var(--color-text-on-dark); }

/* Caret på punkter med undermenu (desktop) */
.menu-item-has-children > a::after {
	content: ""; width: 7px; height: 7px; margin-left: 1px;
	border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
	transform: translateY(-2px) rotate(45deg); transition: transform 0.2s;
}
.nav-menu > li:hover.menu-item-has-children > a::after { transform: translateY(1px) rotate(225deg); }
.submenu-toggle { display: none; }

/* Dropdown (desktop) */
.sub-menu {
	position: absolute; top: 100%; left: -14px; min-width: 214px;
	list-style: none; margin: 0; padding: 6px 0;
	background: var(--color-bg-white); border-radius: var(--radius-md);
	box-shadow: 0 8px 28px rgba(0,0,0,0.14); border: 1px solid var(--color-border);
	display: none; z-index: 60;
}
.nav-menu > li:hover > .sub-menu,
.nav-menu > li:focus-within > .sub-menu { display: block; }
.sub-menu li a {
	display: block; padding: 10px 18px;
	color: var(--color-text); font-size:var(--text-base);
}
.sub-menu li a:hover { background: var(--color-primary-light); color: var(--color-primary-dark); }

/* --- CTA-pille med lyn --- */
.header-cta.btn-primary {
	display: inline-flex; align-items: center; gap: 7px;
	border-radius:var(--radius-pill); white-space: nowrap;
}
.header-cta__bolt {
	width: 14px; height: 14px; display: inline-block; background: currentColor;
	-webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M13 2 4 14h6l-1 8 9-12h-6z'/></svg>") center/contain no-repeat;
	        mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M13 2 4 14h6l-1 8 9-12h-6z'/></svg>") center/contain no-repeat;
}

/* --- Burger-ikon (tre streger -> X) --- */
.menu-toggle {
	display: none; flex-direction: column; justify-content: center; gap: 5px;
	width: 42px; height: 42px; padding: 9px; background: none; border: 0; cursor: pointer;
}
.menu-toggle__bar {
	display: block; width: 100%; height: 2px; border-radius:2px;
	background: var(--color-text-on-dark); transition: transform 0.25s ease, opacity 0.2s ease;
}
.site-header.is-open .menu-toggle__bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.site-header.is-open .menu-toggle__bar:nth-child(2) { opacity: 0; }
.site-header.is-open .menu-toggle__bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ============================================================
 * MOBIL (<= 820px): burger-menu + accordion-dropdowns
 * ============================================================ */
@media (max-width: 820px) {
	.menu-toggle { display: flex; }
	.main-nav { display: none; }
	.site-header.is-open .main-nav {
		display: flex; flex-direction: column; align-items: stretch;
		width: 100%; order: 3; gap: 0; padding-top: 6px;
	}
	.nav-menu { flex-direction: column; align-items: stretch; width: 100%; gap: 0; }
	.nav-menu > li { border-top: 1px solid rgba(255,255,255,0.12); }
	.nav-menu > li > a {
		padding: 15px 4px; font-size:var(--text-md); color: var(--color-text-on-dark);
	}
	.menu-item-has-children > a::after { display: none; }

	.submenu-toggle {
		display: block; position: absolute; top: 0; right: 0;
		width: 56px; height: 52px; background: none; border: 0; cursor: pointer;
	}
	.submenu-toggle::before {
		content: ""; position: absolute; top: 50%; left: 50%;
		width: 9px; height: 9px; margin: -6px 0 0 -5px;
		border-right: 2px solid var(--color-text-on-dark);
		border-bottom: 2px solid var(--color-text-on-dark);
		transform: rotate(45deg); transition: transform 0.2s;
	}
	.menu-item-has-children.is-open > .submenu-toggle::before { transform: rotate(-135deg); margin-top: -2px; }

	.sub-menu {
		position: static; display: none; min-width: 0; padding: 0;
		background: rgba(0,0,0,0.16); border: 0; border-radius:0; box-shadow: none;
	}
	.menu-item-has-children.is-open > .sub-menu { display: block; }
	.sub-menu li a { color: var(--color-text-on-dark-muted); padding: 13px 4px 13px 22px; }
	.sub-menu li a:hover { background: rgba(0,0,0,0.22); color: var(--color-text-on-dark); }

	.header-cta.btn-primary {
		margin: 14px 4px 6px; justify-content: center; padding: 13px 16px;
	}
}

/* ============================================================
 * FOOTER (Trin 6): 4 kolonner + affiliate-disclosure
 * ============================================================ */
.site-footer__logo svg { height: 24px; width: auto; display: block; margin-bottom: 12px; }
.site-footer__intro { font-size:var(--text-sm); max-width: 260px; color: var(--color-text-on-dark-muted); }
.site-footer__col--brand { max-width: 300px; }
.site-footer__col--contact ul { gap: 10px; }
.site-footer__cvr { color: var(--color-text-on-dark-muted); opacity: 0.85; }
.site-footer__disclosure {
	max-width: var(--container-width); margin: 0 auto; padding: 18px 24px 0;
	font-size:var(--text-sm); color: var(--color-text-on-dark-muted); line-height: 1.6;
	border-top: 1px solid rgba(255,255,255,0.12);
}
.site-footer__disclosure strong { color: var(--color-text-on-dark); }

/* Forsidens interne link til /ladeboks/ (Trin 6) */
.hero-mork__link {
	margin: 16px 0 0; font-size:var(--text-base); color: var(--color-text-on-dark-muted);
}
.hero-mork__link a {
	color: var(--color-text-on-dark); text-decoration: underline;
	text-underline-offset: 3px; font-weight: 500;
}
.hero-mork__link a:hover { color: var(--color-primary); }

/* ============================================================
 * FIX 14/7: undermenuer stod åbne på desktop
 * ------------------------------------------------------------
 * En ældre regel (.main-nav ul { display:flex }) havde højere
 * specificitet end .sub-menu { display:none } og tvang begge
 * dropdowns til at være synlige. Reglerne herunder er mere
 * specifikke (ul.sub-menu) og vinder derfor - undermenuer er
 * skjulte som standard, og vises kun ved hover/fokus (desktop)
 * eller når punktet er .is-open (mobil-accordion).
 * ============================================================ */
.main-nav ul.sub-menu { display: none; }
.nav-menu > li:hover > ul.sub-menu,
.nav-menu > li:focus-within > ul.sub-menu { display: block; }

@media (max-width: 820px) {
	.main-nav ul.sub-menu { display: none; }
	.nav-menu > li:hover > ul.sub-menu,
	.nav-menu > li:focus-within > ul.sub-menu { display: none; }
	.menu-item-has-children.is-open > ul.sub-menu { display: block; }
}

/* ============================================================
 * TRIN 6 (14/7, tilføjet): STICKY HEADER + HERO-CUE
 * ------------------------------------------------------------
 * Headeren følger med ned ved scroll, så "Find din ladeboks"-
 * CTA'en altid er ét klik væk. En diskret nedadgående cue i
 * heroen leder øjet fra toppen ned til konverteringsmotoren.
 * ============================================================ */
.site-header {
	position: -webkit-sticky;
	position: sticky;
	top: 0;
	z-index: 100;
	transition: box-shadow 0.2s ease;
}
.site-header.is-scrolled { box-shadow: 0 2px 16px rgba(0, 0, 0, 0.18); }

/* Plads til WordPress admin-bar (kun når man er logget ind) */
.admin-bar .site-header { top: 32px; }
@media screen and (max-width: 782px) { .admin-bar .site-header { top: 46px; } }

/* Anker-mål må ikke gemme sig bag den sticky header */
#find-din-ladeboks, #motoren { scroll-margin-top: 92px; }

/* Nedadgående cue i heroen -> motoren */
.hero-mork__cue {
	display: inline-flex; align-items: center; justify-content: center;
	width: 42px; height: 42px; margin: 20px auto 0; border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, 0.28);
}
.hero-mork__cue:hover { border-color: rgba(255, 255, 255, 0.6); }
.hero-mork__cue-chevron {
	width: 11px; height: 11px;
	border-right: 2px solid var(--color-text-on-dark);
	border-bottom: 2px solid var(--color-text-on-dark);
	transform: translateY(-2px) rotate(45deg);
	animation: bilo-cue-bob 1.7s ease-in-out 0.6s 3;
}
@keyframes bilo-cue-bob {
	0%, 100% { transform: translateY(-3px) rotate(45deg); }
	50%      { transform: translateY(3px) rotate(45deg); }
}
@media (prefers-reduced-motion: reduce) {
	.hero-mork__cue-chevron { animation: none; }
}

/* ============================================================
 * TRIN 6 (14/7, tilføjet): PULS PÅ LYNET I CTA
 * ------------------------------------------------------------
 * Efter logo-spinnet (ca. 1,35s) pumper lynet i "Find din
 * ladeboks"-knappen 3 gange, så øjet fanger konverterings-CTA'en.
 * Starter ved 1,5s, 3 x 0,5s. Respekterer reduceret bevægelse.
 * ============================================================ */
@keyframes bilo-bolt-pulse {
	0%, 100% { transform: scale(1); }
	45%      { transform: scale(1.38); }
}
.header-cta__bolt {
	transform-origin: center;
	animation: bilo-bolt-pulse 0.5s ease-in-out 1.5s 3;
}
@media (prefers-reduced-motion: reduce) {
	.header-cta__bolt { animation: none; }
}

/* ============================================================
 * UDBYDERE-OVERSIGT + UNDERSIDE (Fase 4, Udbydere-redesign)
 * ============================================================ */
.udb-wrap{max-width:var(--container-width);margin:0 auto;padding:0 24px}
.udb-hero{background:linear-gradient(180deg,#123c30,var(--color-primary-dark));color:#fff;padding:30px 0}
.udb-hero__inner{max-width:var(--container-width);margin:0 auto;padding:0 24px}
.udb-hero .brodkrumme,.udb-hero .brodkrumme a{color:#BFE8D3}
.udb-hero h1{font-family:var(--font-display);font-size:var(--text-xl);margin:.3rem 0;font-weight:700;letter-spacing:-.02em}
.udb-hero h1 span{color:#7FD4A9}
.udb-hero p{color:var(--color-text-on-dark-muted);max-width:600px;margin:0}
/* filter-bar */
.fbar{background:#fff;border-radius:var(--radius-md);padding:16px 18px;margin:-24px auto 0;position:relative;z-index:2;box-shadow:0 6px 24px rgba(0,0,0,.07)}
.fbar__lbl{font-size:var(--text-xs);font-weight:600;color:var(--color-text-muted);text-transform:uppercase;letter-spacing:.04em;margin-bottom:8px}
.fbar__div{height:1px;background:var(--color-border);margin:14px 0}
.fbar__wheelrow{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.tseg{display:flex;gap:8px;flex-wrap:wrap}
.ts{display:inline-flex;align-items:center;gap:7px;border:1.5px solid var(--color-border);background:#fff;border-radius:var(--radius-pill);padding:9px 16px;font-size:var(--text-sm);font-weight:600;color:var(--color-text);cursor:pointer;font-family:var(--font-body)}
.ts i{width:9px;height:9px;border-radius:50%;display:inline-block}
.ts--leje i{background:#3EA66E}.ts--kob i{background:#0B7352}.ts--butik i{background:#C8A96E}
.ts--leje{border-color:#BFE3D0}.ts--kob{border-color:#B9CEC6}.ts--butik{border-color:#E7D9BE}
.ts.is-on{background:var(--color-primary-dark);color:#fff;border-color:var(--color-primary-dark)}
.ts.is-on i{outline:2px solid rgba(255,255,255,.5)}
.udb-wheel-go{white-space:nowrap}
.udb-cnt{color:var(--color-text-muted);font-size:var(--text-sm);margin:18px 0 14px}
/* grid + kort */
.udb-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(244px,1fr));gap:14px;align-items:stretch}
.pk-u{background:#fff;display:flex;border-radius:var(--radius-md);border:1px solid var(--color-border);overflow:hidden}
.pk-u__kant{flex:0 0 5px}
.pk-u__body{flex:1;padding:13px 13px 13px 11px;min-width:0;display:flex;flex-direction:column}
.pk-u__row{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:7px}
.pk-u__name{font-family:var(--font-display);font-size:var(--text-base);font-weight:700;margin:0 0 5px;line-height:1.2;color:#1A1A1A}
.pk-u__type{font-size:var(--text-xs);color:var(--color-text-muted)}
.pk-u__img{width:56px;height:56px;flex-shrink:0;border-radius:var(--radius-sm);background:#F1F4F2;border:1px solid var(--color-border);display:flex;align-items:center;justify-content:center;font-size:var(--text-2xs);font-weight:600;color:var(--color-text-muted);text-align:center;overflow:hidden}
.pk-u__img img{width:100%;height:100%;object-fit:cover}
.pk-u__labels{display:flex;gap:5px;flex-wrap:wrap;min-height:4px;margin:2px 0 8px}
.ulab{font-size:var(--text-2xs);font-weight:700;text-transform:uppercase;letter-spacing:.03em;padding:3px 8px;border-radius:var(--radius-pill)}
.ulab--no{background:#F1F4F2;color:var(--color-text-muted)}
.ustars{display:flex;align-items:center;gap:5px;font-size:var(--text-xs);color:var(--color-text-muted);margin-bottom:9px}
.ustars__s{color:#00B67A;font-size:var(--text-sm);letter-spacing:1px}
.ustars--none{color:#B4B2A9}
.pk-u__price{display:flex;justify-content:space-between;align-items:flex-end;padding:9px 0 11px;border-top:1.5px solid var(--color-border);margin-top:auto}
.pk-u__price .k{font-size:var(--text-2xs);font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--color-text-muted)}
.pk-u__price .v{font-family:var(--font-display);font-size:var(--text-lg);font-weight:700;letter-spacing:-.02em;line-height:1}
.pk-u__btns{display:flex;flex-direction:column;gap:7px}
.pk-u__b1{display:block;width:100%;padding:11px;border-radius:var(--radius-sm);font-size:var(--text-sm);font-weight:700;color:#fff;text-align:center}
.pk-u__b2{display:block;width:100%;padding:9px;border-radius:var(--radius-sm);font-size:var(--text-sm);font-weight:600;text-align:center;border:1px solid var(--color-border);color:var(--color-primary-dark)}
.udb-trust{background:var(--color-primary-light);border-radius:var(--radius-md);padding:20px 22px;margin:26px 0;display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.udb-trust__icon{font-size:var(--text-xl)}
.udb-trust b{color:var(--color-primary-dark)}.udb-trust span{color:#40514c;font-size:var(--text-sm)}
/* underside */
.udb-hero--single .uhero-row{display:flex;gap:22px;align-items:flex-start;flex-wrap:wrap;margin-top:12px}
.uhero-logo{width:84px;height:84px;border-radius:var(--radius-md);background:#fff;display:flex;align-items:center;justify-content:center;overflow:hidden;color:var(--color-primary-dark);font-weight:700}
.uhero-logo img{max-width:100%;max-height:100%;object-fit:contain;padding:8px}
.udb-hero--single h1{margin:0 0 6px}
.uhero-stars{display:inline-flex;align-items:center;gap:6px;background:#fff;color:#1A1A1A;border-radius:var(--radius-pill);padding:5px 12px;font-size:var(--text-sm);margin-bottom:8px}
.uhero-stars .s{color:#00B67A;letter-spacing:1px}
.uhero-tags{display:flex;gap:6px;flex-wrap:wrap;margin:6px 0}
.uhero-tags span{font-size:var(--text-xs);background:rgba(255,255,255,.12);color:#EAF6F0;padding:4px 12px;border-radius:var(--radius-pill)}
.uhero-cta{display:inline-block;margin-top:6px;background:var(--color-primary);color:#062b1f;font-weight:700;font-size:var(--text-sm);padding:11px 20px;border-radius:var(--radius-pill)}
.uinfo{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin:-18px 0 0;position:relative;z-index:2}
.uinfo__c{background:#fff;border:1px solid var(--color-border);border-radius:var(--radius-md);padding:12px 15px}
.uinfo__c .k{font-size:var(--text-xs);color:var(--color-text-muted);text-transform:uppercase;letter-spacing:.04em}
.uinfo__c .v{font-size:var(--text-base);font-weight:600;color:var(--color-primary-dark);margin-top:3px}
.udb-h2{font-family:var(--font-display);font-size:var(--text-lg);color:var(--color-primary-dark);margin:28px 0 12px}
.uboks-liste{display:flex;flex-direction:column;gap:10px}
.uboks{background:#fff;border:1px solid var(--color-border);border-radius:var(--radius-md);padding:14px 16px;display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.uboks__nm{font-weight:600;font-size:var(--text-base)}
.uboks__de{color:var(--color-text-muted);font-size:var(--text-sm)}
.uboks__pr{font-family:var(--font-display);font-size:var(--text-md);font-weight:700;color:var(--color-primary);margin-left:auto}
.uboks__go{background:var(--color-primary);color:#062b1f;font-weight:700;font-size:var(--text-sm);padding:10px 15px;border-radius:var(--radius-pill)}
.umotor{background:var(--color-primary-light);border:1px solid #CDE7DA;border-radius:var(--radius-md);padding:22px;display:flex;gap:20px;align-items:center;flex-wrap:wrap;margin:26px 0}
.umotor h3{margin:0 0 4px;color:var(--color-primary-dark);font-family:var(--font-display)}
.umotor p{margin:0;color:#40514c;font-size:var(--text-sm);max-width:440px}
.uom p{color:#40514c;max-width:780px}
@media(max-width:700px){.udb-hero h1{font-size:var(--text-lg)}}

/* ---- Udbydere-oversigt: pudsning (14/7) ---- */
.pk-u__img{background:#fff}
.pk-u__img--logo img{object-fit:contain;padding:7px}
.pk-u__init{font-family:var(--font-display);font-size:var(--text-lg);font-weight:700}
.ulab--aff{background:var(--color-primary-light);color:var(--color-primary-dark)}
.ulab--no{background:transparent;color:#9aa6a1;border:1px solid var(--color-border);font-weight:600}
.ustars__s--empty{color:#D3D1C7}
.ustars--none{font-size:var(--text-xs)}
.pk-u{transition:box-shadow .15s ease,border-color .15s ease}
.pk-u:hover{box-shadow:0 6px 18px rgba(0,0,0,.07);border-color:#CDD8D3}
.pk-u__b2:hover{background:var(--color-bg-muted)}

/* Fix (14/7): udbyder-heroens H1 skal være hvid på mørk bund */
.udb-hero h1{color:#fff}
.udb-hero h1 span{color:#7FD4A9}

/* ---- Udbydere: stærkere CTA (14/7) ---- */
.pk-u__b1{transition:filter .15s ease,transform .12s ease}
.pk-u__b1:hover{filter:brightness(1.07)}
.pk-u__arrow{display:inline-block;transition:transform .15s ease}
.pk-u__b1:hover .pk-u__arrow{transform:translateX(3px)}
.pk-u:hover{transform:translateY(-2px)}

/* ============================================================
 * UDBYDERE (14/7): ensartet orange CTA + støvet type-outline
 * ------------------------------------------------------------
 * Knapperne får én fælles orange klik-farve. Køb/leje/butik-
 * genkendelsen flyttes til kortets kant i en dæmpet, "støvet"
 * type-farve (dybere ved hover), så øjet stadig aflæser typen.
 * Venstre-striben bevares.
 * ============================================================ */
:root{ --cta:#E8622A; --cta-hover:#D0521C;
	--moerk-groen:var(--color-primary-dark);
	--frisk-groen:var(--color-primary);
	--cta-orange:var(--cta); }
.pk-u__b1{ background:var(--cta); color:#fff; }
.pk-u__b1:hover{ background:var(--cta-hover); filter:none; }

/* Støvet type-outline på hele kortet */
.pk-u[data-type="leje"]{ border:1.5px solid #AED0BE; }
.pk-u[data-type="kob"]{ border:1.5px solid #AABFB7; }
.pk-u[data-type="butik"]{ border:1.5px solid #E0CFAD; }
.pk-u[data-type="leje"]:hover{ border-color:#7CBEA0; }
.pk-u[data-type="kob"]:hover{ border-color:#6E9184; }
.pk-u[data-type="butik"]:hover{ border-color:#C8A96E; }

/* ============================================================
 * UDBYDERE (14/7): rent hvidt kort — type-farve kun ved hover
 * ------------------------------------------------------------
 * Ingen venstre-stribe. I hvile: hvidt kort, neutral hårfin kant.
 * Ved hover: kortet løfter sig, og en meget svag, støvet outline
 * i type-farven toner frem sammen med et blødt tonet skær (halo)
 * — ingen hård kant hele vejen rundt, men en delikat karakter.
 * ============================================================ */
.pk-u__body{ padding:13px; }
.pk-u,
.pk-u[data-type="leje"],
.pk-u[data-type="kob"],
.pk-u[data-type="butik"]{ border:1px solid var(--color-border); box-shadow:none; }
.pk-u{ transition:transform .18s ease, box-shadow .22s ease; }
.pk-u:hover{ transform:translateY(-4px); border-color:transparent; box-shadow:0 10px 26px rgba(0,0,0,.06); }
.pk-u[data-type="leje"]:hover{  box-shadow:0 0 0 1.5px #AED0BE, 0 14px 30px rgba(62,166,110,.18); }
.pk-u[data-type="kob"]:hover{   box-shadow:0 0 0 1.5px #AABFB7, 0 14px 30px rgba(27,77,62,.18); }
.pk-u[data-type="butik"]:hover{ box-shadow:0 0 0 1.5px #E0CFAD, 0 14px 30px rgba(200,169,110,.24); }

/* Fix (14/7): hover-outline skal bruge de RIGTIGE, tydelige type-farver
   (samme som filter-prikkerne) — de forrige var for støvede til at ses. */
.pk-u[data-type="leje"]:hover{  box-shadow:0 0 0 2px #3EA66E, 0 14px 30px rgba(62,166,110,.22); }
.pk-u[data-type="kob"]:hover{   box-shadow:0 0 0 2px #0B7352, 0 14px 30px rgba(27,77,62,.20); }
.pk-u[data-type="butik"]:hover{ box-shadow:0 0 0 2px #C8A96E, 0 14px 30px rgba(200,169,110,.30); }

/* Fix (14/7): hover-outline balanceret — mellem det støvede og det fulde (1,5px, halvvejs-tone) */
.pk-u[data-type="leje"]:hover{  box-shadow:0 0 0 1.5px #76BB96, 0 13px 28px rgba(62,166,110,.17); }
.pk-u[data-type="kob"]:hover{   box-shadow:0 0 0 1.5px #62867A, 0 13px 28px rgba(27,77,62,.16); }
.pk-u[data-type="butik"]:hover{ box-shadow:0 0 0 1.5px #D4BC8D, 0 13px 28px rgba(200,169,110,.24); }

/* ---- Trustpilot: diskrete, farvede manuelle stjerner (14/7) ---- */
.tp{ display:inline-flex; align-items:center; gap:6px; }
.tp__stars{ position:relative; display:inline-block; font-size:var(--text-sm); line-height:1; color:#c8c8c8; letter-spacing:1.5px; white-space:nowrap; }
.tp__stars::before{ content:"★★★★★"; }
.tp__fill{ position:absolute; top:0; left:0; height:100%; overflow:hidden; white-space:nowrap; color:var(--tp); letter-spacing:1.5px; }
.tp__fill::before{ content:"★★★★★"; }
.tp__num{ font-size:var(--text-xs); font-weight:600; color:var(--tp); }
.pk-u__tp{ margin:2px 0 9px; }
.uhero-stars .tp__num{ color:var(--tp); }

/* ============================================================
 * UDBYDER-UNDERSIDE (Fase 4) — genopbygget ét udsnit ad gangen
 * UDSNIT 1: hero + quick-facts (eksakte værdier fra udkastet)
 * ============================================================ */
.uu-orange{ background:var(--cta,#E8622A); color:#fff; font-weight:700; font-size:var(--text-base); padding:13px 22px; min-height:44px; box-sizing:border-box; border-radius:var(--radius-pill); display:inline-flex; align-items:center; gap:8px; transition:background .15s; text-decoration:none; }
.uu-orange:hover{ background:var(--cta-hover,#D0521C); color:#fff; }
.uu-orange--lg{ font-size:var(--text-base); padding:13px 22px; }
.uu-ghost{ color:#EAF6F0; font-weight:600; font-size:var(--text-sm); padding:12px 8px; display:inline-flex; align-items:center; gap:6px; text-decoration:none; }
.uu-ghost:hover{ color:#fff; }

.uu-hero{ background:linear-gradient(180deg,#123c30,var(--color-primary-dark,#0B7352)); color:#fff; padding:26px 0 30px; }
.uu-crumb{ font-size:var(--text-sm); color:#BFE8D3; margin-bottom:14px; }
.uu-crumb a{ color:#BFE8D3; text-decoration:none; }
.uu-crumb a:hover{ color:#EAF6F0; }
.uu-hero__grid{ display:grid; grid-template-columns:1fr 300px; gap:26px; align-items:start; }
.uu-hero__logo{ width:80px; height:80px; border-radius:var(--radius-md); background:#fff; display:flex; align-items:center; justify-content:center; font-family:var(--font-display,'Sora'); font-weight:700; color:var(--color-primary-dark,#0B7352); font-size:var(--text-lg); margin-bottom:14px; overflow:hidden; }
.uu-hero__logo img{ max-width:76%; max-height:76%; object-fit:contain; }
/* 24/9 2026: sidetitlen kommer fra husets ene regel (36 paa computer,
   28,8 paa telefon). Her staar kun farve og luft. */
.uu-hero h1{ line-height:1.2; color:#fff; margin:0 0 8px; }
.uu-tags{ display:flex; gap:7px; flex-wrap:wrap; margin:10px 0; }
.uu-tags span{ font-size:var(--text-xs); background:rgba(255,255,255,.12); color:#EAF6F0; padding:5px 12px; border-radius:var(--radius-pill); }
.uu-pitch{ color:#CFE3DB; max-width:520px; margin:8px 0 16px; font-size:var(--text-base); }
.uu-hero__cta{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; }

/* Trustpilot-pille, scoped til heroen (farve fra --tp sat inline af core-funktionen) */
.uu-hero .tp{ display:inline-flex; align-items:center; gap:6px; background:#fff; border-radius:var(--radius-pill); padding:5px 12px; margin-bottom:6px; }
.uu-hero .tp__stars{ position:relative; display:inline-block; font-size:var(--text-sm); line-height:1; color:#c8c8c8; letter-spacing:1.5px; }
.uu-hero .tp__stars::before{ content:"★★★★★"; }
.uu-hero .tp__fill{ position:absolute; top:0; left:0; height:100%; overflow:hidden; white-space:nowrap; color:var(--tp,#72b043); letter-spacing:1.5px; }
.uu-hero .tp__fill::before{ content:"★★★★★"; }
.uu-hero .tp__num{ font-size:var(--text-xs); font-weight:700; color:var(--tp,#72b043); }

.uu-side{ background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.16); border-radius:var(--radius-md); padding:18px; }
.uu-side__k{ font-size:var(--text-xs); color:#BFE8D3; text-transform:uppercase; letter-spacing:.05em; }
.uu-side__v{ font-family:var(--font-display,'Sora'); font-size:var(--text-xl); font-weight:700; margin:2px 0; }
.uu-side__s{ font-size:var(--text-sm); color:#CFE3DB; }
.uu-side .uu-orange{ margin-top:14px; width:100%; justify-content:center; }

.uu-qf{ display:flex; flex-wrap:wrap; gap:10px; margin:-20px 0 0; position:relative; z-index:2; }
.uu-qf__c{ flex:1 1 140px; min-width:140px; background:#fff; border:1px solid var(--color-border,#E1E7E4); border-radius:var(--radius-md); padding:12px 15px; }
.uu-qf__k{ font-size:var(--text-xs); color:var(--color-text-muted,#6B7B76); text-transform:uppercase; letter-spacing:.04em; }
.uu-qf__v{ font-size:var(--text-base); font-weight:600; color:var(--color-primary-dark,#0B7352); margin-top:3px; }

@media (max-width:720px){
	.uu-hero__grid{ grid-template-columns:1fr; }
}

/* UDSNIT 2: motor-hook (mint-boks + adressefelt) */
.uu-sec{ padding:30px 0 0; }
.uu-motor{ background:#EAF6F0; border:1px solid #CDE7DA; border-radius:var(--radius-md); padding:24px; display:flex; gap:22px; align-items:center; flex-wrap:wrap; }
.uu-motor__txt{ flex:1; min-width:260px; }
.uu-motor__txt h3{ color:var(--color-primary-dark,#0B7352); font-family:var(--font-display,'Sora'); font-size:var(--text-lg); margin:0 0 4px; }
.uu-motor__txt p{ margin:0; color:#40514c; font-size:var(--text-base); max-width:420px; }
.uu-motor__in{ flex:1; min-width:260px; display:flex; gap:8px; background:#fff; border:1px solid var(--color-border,#E1E7E4); border-radius:var(--radius-md); padding:6px 6px 6px 18px; align-items:center; }
.uu-motor__in input{ border:0; outline:0; flex:1 1 auto; width:100%; min-width:0; font-size:var(--text-base); background:none; font-family:inherit; color:var(--color-text,#1A1A1A); }
.uu-motor__in button{ flex:0 0 auto; background:var(--color-primary-dark,#0B7352); color:#fff; border:0; font-weight:700; font-size:var(--text-sm); padding:12px 20px; border-radius:var(--radius-pill); cursor:pointer; white-space:nowrap; }
.uu-motor__in button:hover{ background:#123c30; }

/* UDSNIT 3: fordele / ulemper */
/* 24/9 2026: afsnitsoverskrift var 20 og skal vaere 22 paa telefon,
   26 paa computer - samme som resten af huset. */
.uu-sec h2{ font-family:var(--font-display,'Sora'); letter-spacing:-.02em; font-size:var(--text-xl); color:var(--color-primary-dark,#0B7352); margin:0 0 6px; }
.uu-lead{ color:#40514c; max-width:720px; margin:0 0 16px; }
.uu-pc{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.uu-pc__col{ background:#fff; border:1px solid var(--color-border,#E1E7E4); border-radius:var(--radius-md); padding:18px 20px; }
.uu-pc__col h3{ font-family:var(--font-display,'Sora'); font-size:var(--text-md); margin:0 0 10px; display:flex; align-items:center; gap:8px; }
.uu-pc__col--plus h3{ color:#1d9e75; }
.uu-pc__col--minus h3{ color:#b45309; }
.uu-pc__col ul{ margin:0; padding:0; list-style:none; }
.uu-pc__col li{ padding:6px 0 6px 26px; position:relative; font-size:var(--text-base); color:#3a4a45; }
.uu-pc__col--plus li::before{ content:"✓"; position:absolute; left:0; color:#1d9e75; font-weight:700; }
.uu-pc__col--minus li::before{ content:"–"; position:absolute; left:2px; color:#b45309; font-weight:700; }
@media (max-width:820px){ .uu-pc{ grid-template-columns:1fr; } }

/* UDSNIT 4: produktkort (ladebokse) */
.uu-boks{ display:flex; flex-wrap:wrap; gap:14px; }
.uu-pk{ flex:1 1 300px; min-width:280px; background:#fff; border:1px solid var(--color-border,#E1E7E4); border-radius:var(--radius-md); padding:16px; display:flex; flex-direction:column; transition:transform .18s, box-shadow .22s; }
.uu-pk:hover{ transform:translateY(-4px); box-shadow:0 0 0 1.5px #76BB96, 0 14px 30px rgba(62,166,110,.17); }
.uu-pk__top{ display:flex; justify-content:space-between; gap:10px; }
.uu-pk__nm{ font-family:var(--font-display,'Sora'); font-size:var(--text-md); font-weight:700; color:var(--color-text,#1A1A1A); }
.uu-pk__sub{ font-size:var(--text-xs); color:var(--color-text-muted,#6B7B76); }
.uu-pk__img{ width:54px; height:54px; flex:0 0 auto; border-radius:var(--radius-sm); background:#F1F4F2; border:1px solid var(--color-border,#E1E7E4); display:flex; align-items:center; justify-content:center; font-size:var(--text-2xs); color:var(--color-text-muted,#6B7B76); font-weight:600; overflow:hidden; text-align:center; }
.uu-pk__img img{ max-width:100%; max-height:100%; object-fit:contain; }
.uu-pk__rows{ margin:12px 0; border-top:1px solid #F1F4F2; }
.uu-pk__rows > div{ display:flex; justify-content:space-between; align-items:center; padding:6px 0; border-bottom:1px solid #F1F4F2; font-size:var(--text-sm); }
.uu-pk__rows .g{ color:#3EA66E; font-weight:600; }
.uu-pk__rows .a{ color:#9A6020; font-weight:700; font-size:var(--text-xs); background:#FFF3E0; padding:2px 7px; border-radius:var(--radius-pill); }
.uu-pk__price{ display:flex; justify-content:space-between; align-items:flex-end; margin-top:auto; padding:8px 0 12px; }
.uu-pk__price .k{ font-size:var(--text-2xs); font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--color-text-muted,#6B7B76); }
.uu-pk__price .v{ font-family:var(--font-display,'Sora'); font-size:var(--text-lg); font-weight:700; color:var(--color-text,#1A1A1A); }
.uu-pk .uu-orange{ width:100%; justify-content:center; font-size:var(--text-sm); padding:12px; }

/* UDSNIT 5: sammenligningstabel */
.uu-cmp{ background:#fff; border:1px solid var(--color-border,#E1E7E4); border-radius:var(--radius-md); overflow:hidden; }
.uu-cmp table{ width:100%; border-collapse:collapse; }
.uu-cmp th, .uu-cmp td{ padding:13px 18px; text-align:left; font-size:var(--text-sm); border-bottom:1px solid #F1F4F2; }
.uu-cmp th{ background:#EAF6F0; color:var(--color-primary-dark,#0B7352); font-weight:700; font-size:var(--text-xs); text-transform:uppercase; letter-spacing:.04em; }
.uu-cmp td.me{ font-weight:700; color:var(--color-primary-dark,#0B7352); }
.uu-cmp .win{ color:#1d9e75; font-weight:700; }
.uu-cmp tr:last-child th, .uu-cmp tr:last-child td{ border-bottom:0; }
.uu-cmp-link{ margin:10px 0 0; }
.uu-ghost--dark{ color:var(--color-primary-dark,#0B7352); }
.uu-ghost--dark:hover{ color:#123c30; }

/* UDSNIT 6: Om + FAQ */
.uu-om p{ color:#40514c; max-width:760px; }
.uu-faq{ background:#fff; border:1px solid var(--color-border,#E1E7E4); border-radius:var(--radius-md); overflow:hidden; }
.uu-faq details{ border-bottom:1px solid #F1F4F2; }
.uu-faq details:last-child{ border-bottom:0; }
.uu-faq summary{ padding:15px 20px; font-weight:600; cursor:pointer; list-style:none; display:flex; justify-content:space-between; align-items:center; font-size:var(--text-base); color:var(--color-text,#1A1A1A); }
.uu-faq summary::-webkit-details-marker{ display:none; }
.uu-faq summary::after{ content:"+"; color:var(--color-primary,#3EA66E); font-size:var(--text-lg); font-weight:400; line-height:1; }
.uu-faq details[open] summary::after{ content:"–"; }
.uu-faq p{ padding:0 20px 16px; margin:0; color:#40514c; font-size:var(--text-base); }

/* UDSNIT 7: udbyder-hjul */
.uu-wheel{ background:#123c30; border-radius:var(--radius-md); padding:16px 18px; display:flex; gap:14px; align-items:center; flex-wrap:wrap; margin-top:16px; }
.uu-wheel__l{ color:#fff; font-weight:600; flex:1; min-width:170px; }
.uu-wheel__l span{ display:block; color:#BFE8D3; font-weight:400; font-size:var(--text-sm); }
.uu-wheel__spin{ flex:0 0 auto; display:flex; align-items:center; gap:8px; background:#0d2e25; border-radius:var(--radius-pill); padding:6px 8px; }
.uu-wheel__spin button{ background:none; border:0; color:#CFE3DB; font-size:var(--text-lg); cursor:pointer; line-height:1; padding:0 4px; }
.uu-wheel__chip{ background:#fff; color:var(--color-primary-dark,#0B7352); font-weight:600; font-size:var(--text-sm); padding:7px 16px; border-radius:var(--radius-pill); min-width:110px; text-align:center; }
.uu-wheel__go{ flex:0 0 auto; background:var(--color-primary,#3EA66E); color:#062b1f; font-weight:700; font-size:var(--text-sm); padding:9px 16px; min-height:44px; box-sizing:border-box; border-radius:var(--radius-pill); border:0; cursor:pointer; text-decoration:none; display:inline-block; }
.uu-wheel__go:hover{ background:#2f9560; color:#062b1f; }

/* UDSNIT 8: guides + bund-CTA */
.uu-guides{ display:flex; flex-wrap:wrap; gap:14px; }
.uu-gc{ flex:1 1 230px; min-width:220px; background:#fff; border:1px solid var(--color-border,#E1E7E4); border-radius:var(--radius-md); overflow:hidden; text-decoration:none; display:block; }
.uu-gc__img{ height:110px; background:linear-gradient(135deg,#DCEBE3,#EAF6F0); display:flex; align-items:center; justify-content:center; font-size:var(--text-xl); }
.uu-gc__b{ padding:14px 16px; }
.uu-gc__b h3{ font-family:var(--font-display,'Sora'); font-size:var(--text-base); color:var(--color-primary-dark,#0B7352); margin:0 0 4px; }
.uu-gc__b p{ font-size:var(--text-sm); color:var(--color-text-muted,#6B7B76); margin:0; }
.uu-end{ background:var(--color-primary-dark,#0B7352); border-radius:var(--radius-md); padding:26px; text-align:center; color:#fff; margin-top:14px; }
.uu-end h2{ font-family:var(--font-display,'Sora'); color:#fff; font-size:var(--text-lg); margin:0 0 6px; letter-spacing:-.02em; }
.uu-end p{ color:#CFE3DB; margin:0 0 16px; }
.uu-green{ background:var(--color-primary,#3EA66E); color:#062b1f; font-weight:700; padding:13px 24px; border-radius:var(--radius-pill); display:inline-flex; gap:8px; align-items:center; text-decoration:none; }
.uu-green:hover{ background:#2f9560; color:#062b1f; }
.uu-green svg{ display:block; }

/* STICKY MINI-BJÆLKE: fixed, skjult i toppen, glider frem under menuen ved scroll */
.uu-mini{ position:fixed; left:0; right:0; top:0; z-index:95; min-height:59px; display:flex; align-items:center; background:#fff; border-bottom:1px solid var(--color-border,#E1E7E4); box-shadow:0 4px 14px rgba(0,0,0,.06); transform:translateY(-120%); transition:transform .25s ease; will-change:transform; }
.uu-mini.show{ transform:translateY(0); }
.uu-mini__in{ width:100%; max-width:var(--container-width,1200px); margin:0 auto; padding:8px 24px; display:flex; align-items:center; gap:10px; }
.uu-mini__logo{ flex:0 0 auto; width:30px; height:30px; border-radius:var(--radius-sm); background:#fff; border:1px solid var(--color-border,#E1E7E4); display:flex; align-items:center; justify-content:center; font-weight:700; color:var(--color-primary-dark,#0B7352); font-size:var(--text-xs); overflow:hidden; }
.uu-mini__logo img{ max-width:100%; max-height:100%; object-fit:contain; }
.uu-mini b{ font-family:var(--font-display,'Sora'); color:var(--color-primary-dark,#0B7352); }
.uu-mini .uu-orange{ margin-left:auto; flex:0 0 auto; padding:8px 16px; font-size:var(--text-sm); }
.uu-mini .tp{ display:inline-flex; align-items:center; gap:5px; }
.uu-mini .tp__stars{ position:relative; display:inline-block; font-size:var(--text-xs); line-height:1; color:#c8c8c8; letter-spacing:1px; }
.uu-mini .tp__stars::before{ content:"★★★★★"; }
.uu-mini .tp__fill{ position:absolute; top:0; left:0; height:100%; overflow:hidden; white-space:nowrap; color:var(--tp,#72b043); letter-spacing:1px; }
.uu-mini .tp__fill::before{ content:"★★★★★"; }
.uu-mini .tp__num{ font-size:var(--text-xs); font-weight:700; color:var(--tp,#72b043); }

/* ============================================================
 * GUIDES-SIDE (/guides/) — Fase 4, 17/7
 * Hero, hjørnesten, kort-grid + sticky sidebar. Genbruger temaets
 * farvevariabler og samme hover-skær som udbyder-kortene (ingen
 * grøn kant). CWV: faste billed-dimensioner (aspect-ratio 16/9),
 * lazy-load, JS kun på denne side. Mobil-først.
 * ============================================================ */
.gd-hero{ background:linear-gradient(180deg,#123c30,var(--color-primary-dark)); color:#fff; padding:30px 0; }
.gd-hero__inner{ max-width:var(--container-width); margin:0 auto; padding:0 24px; }
.gd-hero .brodkrumme,.gd-hero .brodkrumme a{ color:#BFE8D3; }
/* 24/9 2026: sidetitlen paa guidesoversigten var 20 paa telefon og 26
   paa computer. Den foelger nu husets ene regel: 36 og 28,8. */
.gd-hero h1{ font-family:var(--font-display); margin:.3rem 0; font-weight:700; letter-spacing:-.02em; color:#fff; }
.gd-hero h1 span{ color:#7FD4A9; }
.gd-hero p{ color:var(--color-text-on-dark-muted); max-width:620px; margin:0; }

.gd-wrap{ max-width:var(--container-width); margin:0 auto; padding:0 24px 40px; }
.gd-h2{ font-family:var(--font-display); font-size:var(--text-xl); font-weight:700; color:var(--color-primary-dark); margin:0; letter-spacing:-.01em; }

/* ── Hjørnesten (fastgjort øverst) ─────────────────────────── */
.gd-pillars{ margin:26px 0 8px; }
.gd-pillars .gd-h2{ margin-bottom:14px; }
.gd-pillar-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:14px; }
.gd-pillar{ display:flex; flex-direction:column; background:#fff; border:1px solid var(--color-border); border-radius:var(--radius-md); overflow:hidden; text-decoration:none; color:inherit; transition:transform .18s ease, box-shadow .22s ease, border-color .18s ease; }
.gd-pillar:hover{ transform:translateY(-4px); border-color:transparent; box-shadow:0 0 0 1.5px #AED0BE, 0 14px 30px rgba(62,166,110,.18); }
.gd-pillar__body{ padding:13px 14px 15px; display:flex; flex-direction:column; flex:1; }
/* 27/9 2026 (Henrik, M46/N316): guidekort har titel 20 og tekst 17 overalt, som paa kommune- og udbydersiderne. Var 17 og 13. Kopi i kontrol-27september-2026/foer */
.gd-pillar__title{ font-family:var(--font-display); font-size:20px; font-weight:700; color:var(--color-primary-dark); margin:8px 0 6px; line-height:1.3; }
.gd-pillar__excerpt{ font-size:17px; color:var(--color-text-muted); margin:0 0 12px; line-height:1.5; }
.gd-pillar__go{ margin-top:auto; font-size:var(--text-sm); font-weight:700; color:var(--color-primary); }
.gd-pillar:hover .gd-pillar__go{ color:var(--color-primary-dark); }

/* ── To-spalte-layout med sticky sidebar ───────────────────── */
.gd-layout{ display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:28px; align-items:start; margin-top:24px; }
.gd-main__head{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:14px; }
.gd-count{ color:var(--color-text-muted); font-size:var(--text-sm); white-space:nowrap; }
.gd-admin-note{ background:#FFF7E6; border:1px solid #F0D9A8; color:#6b5720; border-radius:var(--radius-sm); padding:10px 14px; font-size:var(--text-sm); line-height:1.5; margin:0 0 16px; }
.gd-admin-note code{ background:rgba(0,0,0,.06); padding:1px 5px; border-radius:4px; font-size:.9em; }

/* ── Guide-kort ────────────────────────────────────────────── */
.gd-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:16px; align-items:stretch; }
.gd-card{ display:flex; flex-direction:column; background:#fff; border:1px solid var(--color-border); border-radius:var(--radius-md); overflow:hidden; text-decoration:none; color:inherit; transition:transform .18s ease, box-shadow .22s ease, border-color .18s ease; }
.gd-card:hover{ transform:translateY(-4px); border-color:transparent; box-shadow:0 0 0 1.5px #AED0BE, 0 14px 30px rgba(62,166,110,.16); }
.gd-card__media{ position:relative; aspect-ratio:16/9; background:linear-gradient(135deg,#EAF6F0,#D8ECE1); display:flex; align-items:center; justify-content:center; overflow:hidden; }
.gd-card__media img{ width:100%; height:100%; object-fit:cover; display:block; }
.gd-card__ph{ color:var(--color-primary); opacity:.55; }
.gd-card__pin{ position:absolute; top:9px; left:9px; background:var(--color-primary-dark); color:#fff; font-size:var(--text-2xs); font-weight:700; text-transform:uppercase; letter-spacing:.04em; padding:3px 8px; border-radius:var(--radius-pill); }
.gd-card__body{ padding:12px 14px 14px; display:flex; flex-direction:column; flex:1; }
.gd-card__title{ font-family:var(--font-display); font-size:20px; font-weight:700; color:var(--color-primary-dark); margin:8px 0 6px; line-height:1.3; }
.gd-card__excerpt{ font-size:17px; color:var(--color-text-muted); margin:0 0 12px; line-height:1.5; }
.gd-card__meta{ margin-top:auto; font-size:var(--text-xs); font-weight:600; color:var(--color-text-muted); }

/* Emne-chip (mint) */
.gd-chip{ align-self:flex-start; background:var(--color-primary-light); color:var(--color-primary-dark); font-size:var(--text-xs); font-weight:700; text-transform:uppercase; letter-spacing:.03em; padding:3px 9px; border-radius:var(--radius-pill); }
.gd-chip--pillar{ background:#DCEFE6; }

.gd-empty{ color:var(--color-text-muted); font-size:var(--text-base); padding:18px 0; }

/* ── Sidebar ───────────────────────────────────────────────── */
.gd-side{ position:sticky; top:88px; display:flex; flex-direction:column; gap:16px; }
.gd-cta{ background:linear-gradient(160deg,#1f5a48,var(--color-primary-dark)); color:#fff; border-radius:var(--radius-md); padding:18px 18px 20px; }
.gd-cta__eyebrow{ font-size:var(--text-xs); font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:#7FD4A9; }
.gd-cta__title{ font-family:var(--font-display); font-size:var(--text-md); font-weight:700; margin:6px 0 6px; line-height:1.25; }
.gd-cta__text{ font-size:var(--text-sm); color:var(--color-text-on-dark-muted); margin:0 0 14px; line-height:1.5; }
.gd-cta__btn{ width:100%; }

.gd-side__box{ background:#fff; border:1px solid var(--color-border); border-radius:var(--radius-md); padding:15px 16px 16px; }
.gd-side__h{ font-family:var(--font-display); font-size:var(--text-xs); font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--color-text-muted); margin:0 0 12px; }
.gd-emner{ display:flex; flex-wrap:wrap; gap:8px; }
.gd-emne{ border:1.5px solid var(--color-border); background:#fff; border-radius:var(--radius-pill); padding:7px 13px; min-height:44px; box-sizing:border-box; display:inline-flex; align-items:center; font-size:var(--text-sm); font-weight:600; color:var(--color-text); cursor:pointer; font-family:var(--font-body); transition:background .12s ease, border-color .12s ease, color .12s ease; }
.gd-emne:hover{ border-color:#BFE3D0; }
.gd-emne.is-on{ background:var(--color-primary-dark); color:#fff; border-color:var(--color-primary-dark); }

.gd-popular{ list-style:none; margin:0; padding:0; }
.gd-popular li + li{ border-top:1px solid var(--color-border); }
.gd-popular a{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; padding:9px 0; min-height:44px; box-sizing:border-box; text-decoration:none; color:var(--color-text); }
.gd-popular a:hover .gd-popular__t{ color:var(--color-primary); }
.gd-popular__t{ font-size:var(--text-sm); font-weight:600; line-height:1.35; }
.gd-popular__m{ font-size:var(--text-xs); color:var(--color-text-muted); white-space:nowrap; }

.gd-side__trust{ display:flex; gap:10px; align-items:flex-start; background:var(--color-primary-light); border-radius:var(--radius-md); padding:13px 15px; font-size:var(--text-sm); color:#40514c; line-height:1.45; }
.gd-side__trust-icon{ font-size:var(--text-md); flex:0 0 auto; }

/* ── Bund-CTA (konvertering) ───────────────────────────────── */
.gd-bottom{ background:#fff; border:1px solid var(--color-border); border-radius:var(--radius-md); padding:24px 26px; margin:32px 0 6px; display:flex; gap:20px; align-items:center; justify-content:space-between; flex-wrap:wrap; }
.gd-bottom h2{ font-family:var(--font-display); font-size:var(--text-lg); color:var(--color-primary-dark); margin:0 0 4px; }
.gd-bottom p{ color:var(--color-text-muted); font-size:var(--text-base); margin:0; max-width:520px; }
.gd-bottom__btns{ display:flex; gap:10px; flex-wrap:wrap; }

/* ── Responsivt ────────────────────────────────────────────── */
@media(max-width:900px){
	.gd-layout{ grid-template-columns:1fr; gap:22px; }
	.gd-side{ position:static; top:auto; order:-1; }
}
@media(max-width:520px){
	/* 27/9 2026 (N316): med titel 20 og tekst 17 er to kort ved siden af hinanden kun 164 brede, og en titel fylder op til 6 linjer (maalt paa 390). Derfor ét kort i bredden. */
	.gd-pillar-grid{ grid-template-columns:1fr; }
	.gd-bottom{ flex-direction:column; align-items:flex-start; }
}

/* Respektér reduceret bevægelse: fjern kort-løft. */
@media(prefers-reduced-motion:reduce){
	.gd-pillar,.gd-card,.gd-emne{ transition:none; }
	.gd-pillar:hover,.gd-card:hover{ transform:none; }
}

/* Guides sticky mini-CTA: på de smalleste skærme skjules bold-teksten,
   så lyn-mærke + orange CTA står rent (samme uu-mini-udtryk som udbydere). */
@media(max-width:460px){ #gd-mini b, #fh-mini b{ display:none; } }

/* ============================================================
 * PRODUKTKORT (forside + /ladeboks/) — ensrettet med udbyder-oversigten
 * (Fase 4, 19/7). Ingen venstrekant (.pk__kant fjernet); neutral ramme i
 * hvile, type-farvet hover-outline + løft, præcis som .pk-u. Gælder kun
 * kort med data-type (de nye), så andre .pk-brug ikke påvirkes. Motor-
 * match (.pk-match, !important) vinder fortsat over hover.
 * ============================================================ */
.pk-wrap[data-type] .pk{ box-shadow:none; border:1px solid var(--color-border); transition:transform .18s ease, box-shadow .22s ease, border-color .18s ease; }
.pk-wrap[data-type]:hover .pk{ transform:translateY(-4px); border-color:transparent; box-shadow:0 10px 26px rgba(0,0,0,.06); }
.pk-wrap[data-type="leje"]:hover .pk{ box-shadow:0 0 0 1.5px #AED0BE, 0 14px 30px rgba(62,166,110,.18); }
.pk-wrap[data-type="kob"]:hover .pk{ box-shadow:0 0 0 1.5px #AABFB7, 0 14px 30px rgba(27,77,62,.18); }
.pk-wrap[data-type="butik"]:hover .pk{ box-shadow:0 0 0 1.5px #E0CFAD, 0 14px 30px rgba(200,169,110,.24); }
@media(prefers-reduced-motion:reduce){ .pk-wrap[data-type]:hover .pk{ transform:none; } }

/* "Se alle ladebokse"-CTA under produktlisten (intern link + funnel til /ladeboks/) */
.forside-produkter__alle{ display:flex; width:fit-content; align-items:center; gap:4px; margin:16px auto 0; padding:11px 22px; border-radius:var(--radius-pill); border:1.5px solid var(--color-primary); color:var(--color-primary-dark); font-weight:700; font-size:var(--text-base); text-decoration:none; background:#fff; transition:background .15s ease, color .15s ease; }
.forside-produkter__alle:hover{ background:var(--color-primary); color:#fff; }

/* /ladeboks/ → anbefaling-nudge (Fase 4, 19/7): rigtig knap i orange CTA-farve */
.archive-header__cue{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:10px 14px; margin:14px 0 0; }
.archive-header__cue-txt{ font-size:var(--text-base); color:var(--color-text-muted); }
.archive-header__cta{ display:inline-flex; align-items:center; gap:4px; padding:11px 22px; border-radius:var(--radius-pill); background:var(--cta,#E8622A); color:#fff; font-weight:700; font-size:var(--text-base); text-decoration:none; transition:background .15s ease; }
.archive-header__cta:hover{ background:var(--cta-hover,#D0521C); color:#fff; }

/* D-knap-wrapper (altid synlig, uden for den motor-styrede produktsektion) */
.forside-alle-cta{ text-align:center; margin:6px 0 4px; }


/* ============================================================
 * FORSIDE-HERO v2 (Fase 4, bid 1 - 23/7-2026)
 * ============================================================
 * Nummerplade-ledet hero efter godkendt mockup. Alt er scoped
 * med "fh-" praefiks, saa intet kolliderer med motor/adresse.
 * EU-feltets teal (#147a63) er den godkendte plade-farve.
 * Den gamle .hero-mork-sektion er udgaaet paa forsiden (CSS
 * beholdes indtil oprydning i bid 6).
 * ============================================================
 */
.fh {
	background: radial-gradient(120% 120% at 50% -10%, #235c49 0%, var(--moerk-groen, #0B7352) 45%, #143B30 100%);
	color: #fff;
	padding: 46px 0 40px;
}
.fh__wrap { max-width: 1120px; margin: 0 auto; padding: 0 20px; }
.fh__badge {
	display: inline-flex; align-items: center; gap: 8px;
	background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.18);
	color: #CFE6DC; font-size:var(--text-sm); font-weight: 600; padding: 6px 14px; border-radius:var(--radius-pill);
}
.fh__dot { width: 8px; height: 8px; border-radius: 50%; background: #7FD4A9; box-shadow: 0 0 0 4px rgba(127,212,169,.25); }
.fh__h1 { font-family: 'Sora', sans-serif; font-size:var(--text-2xl); font-weight: 700; margin: 16px 0 10px; line-height: 1.1; color: #fff; }
.fh__acc { color: #7FD4A9; }
.fh__sub { color: #CFE6DC; max-width: 560px; font-size:var(--text-md); margin: 0 0 22px; }

.fh__finder {
	background: #fff; border-radius:var(--radius-md); padding: 12px; max-width: 740px;
	box-shadow: 0 12px 36px rgba(0,0,0,.24);
	display: flex; gap: 10px; flex-wrap: wrap; align-items: stretch;
}
.fh__plate {
	flex: 1 1 260px; min-width: 230px; display: flex; align-items: stretch;
	border: 2px solid #111; border-radius:var(--radius-sm); overflow: hidden; background: #fff;
}
.fh__eu {
	background: #147a63; color: #fff; font-weight: 700; font-size:var(--text-sm);
	display: flex; flex-direction: column; align-items: center; justify-content: center;
	padding: 0 9px; line-height: 1.1;
	/* Hel bredde i punkter. Med en broekdel af et punkt blandede browseren
	   groen og hvid i kanten og tegnede en lys lodret streg. */
	flex: 0 0 37px; width: 37px;
}
.fh__stars { color: #ffd200; font-size:var(--text-2xs); }
/* Samme skrift og placeholder som motorens pladefelt (.motor-plade__input),
   saa de to felter ser ens ud: broedtekst-fonten, ikke Sora. */
.fh__platein {
	flex: 1; min-width: 0; border: 0;
	font-family: var(--font-body, 'Inter', sans-serif); font-weight: 700;
	font-size:var(--text-lg); letter-spacing: .12em; text-transform: uppercase;
	padding: 10px 8px 10px 12px; color: var(--color-text, #111); background: #fff;
}
.fh__platein::placeholder {
	color: #C7CDC7;
	font-weight: 700;
	letter-spacing: .14em;
}
.fh__platein:focus { outline: none; }
.fh__lookup {
	border: 0; background: #147a63; color: #fff; padding: 0 15px; cursor: pointer;
	display: flex; align-items: center; justify-content: center; transition: background .15s;
}
.fh__lookup:hover { background: #0f5f4d; }
.fh__loc {
	border: 0; background: #147a63; color: #fff; font-weight: 700; font-size:var(--text-sm);
	padding: 0 16px; border-radius:var(--radius-sm); cursor: pointer;
	display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; transition: background .15s;
}
.fh__loc:hover { background: #0f5f4d; }
.fh__go {
	border: 0; background: var(--cta-orange, #E8622A); color: #fff; font-weight: 700; font-size:var(--text-base);
	padding: 0 22px; border-radius:var(--radius-sm); cursor: pointer;
	display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; transition: background .15s, transform .15s;
}
.fh__go:hover { background: #d4551f; transform: translateY(-1px); }

.fh__hint { margin: 12px 0 0; color: #9FC9B7; font-size:var(--text-base); }
.fh__hint a { color: #fff; text-decoration: underline; text-underline-offset: 2px; }

.fh__stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 24px; max-width: 740px; }
.fh__stat { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); border-radius:var(--radius-md); padding: 14px 12px; text-align: center; }
.fh__num { display: block; font-family: 'Sora', sans-serif; font-weight: 700; font-size:var(--text-lg); color: #fff; }
.fh__lbl { display: block; font-size:var(--text-xs); color: #9FC9B7; text-transform: uppercase; letter-spacing: .04em; margin-top: 4px; }

.fh__trust { display: flex; gap: 22px; flex-wrap: wrap; margin-top: 22px; }
.fh__trust span { display: inline-flex; align-items: center; gap: 8px; color: #CFE6DC; font-size:var(--text-base); }
.fh__tdot { width: 7px; height: 7px; border-radius: 50%; background: #7FD4A9; }

/* Funnel-sektionen under heroen (adresse + motor, uroert indhold) */
.forside-funnel__adresse { max-width: 860px; margin: 0 auto; padding: 26px 20px 0; }

/* Mobil */
@media (max-width: 640px) {
	.fh { padding: 34px 0 30px; }
	.fh__h1 { font-size:var(--text-xl); }
	.fh__plate, .fh__loc, .fh__go { width: 100%; flex: 1 1 100%; }
	.fh__loc, .fh__go { justify-content: center; padding-top: 13px; padding-bottom: 13px; }
	.fh__stats { grid-template-columns: 1fr 1fr; }
}


/* Bid 1.4: adressemodulet vises i heroen (hvidt kort), naar man vaelger
   adresse i stedet for nummerplade. Modulet selv er uroert. */
.fh__adresseslot {
	background: #fff; border-radius:var(--radius-md); padding: 20px 22px; max-width: 740px;
	box-shadow: 0 12px 36px rgba(0,0,0,.24); margin-top: 2px;
}
.fh__adresseslot .adresse { margin: 0; }

/* ============================================================
   INDGANG v4 (Fase 4) - godkendt UX.
   Farvesprog: GROEN = "det her ved vi" (ord, flueben, chips).
               ORANGE = "goer det her" (kun CTA'en).
   ============================================================ */

/* ============================================================
   KOMPAKT HERO (v5.1): heroen skal ikke fylde en hel skaerm.
   Feltet strammes ind til den bredde, en nummerplade faktisk
   kraever, og noegletallene samles paa én linje.
   ============================================================ */
/* Luftrytme maalt paa internetpriser.dk og omregnet til vores skala:
   ~80px over, ~34px under overskrift, ~46px under loeftelinjen,
   ~52px ned til noegletallene, ~78px under. */
.fh { padding: 76px 0 80px; }
.fh__h1 { font-size:var(--text-2xl); margin: 0 0 34px; line-height: 1.12; }
.fh__sub { margin: 0 auto 46px; font-size:var(--text-md); max-width: 680px; line-height: 1.6; }
.fh__badge { display: none; } /* adresser findes ikke laengere i heroen */

/* VIGTIGT: elementer med display uden for [hidden] skal skjules eksplicit,
   ellers vinder display over hidden-attributten (samme faelde som .fh__plate). */
.fh__opslag[hidden], .fh__hint[hidden], .fh__kvit[hidden],
.fh__infoboks[hidden], .fh__ingenboks[hidden] { display: none !important; }

/* Heroen midterstilles, saa den flugter med motoren nedenunder */
.fh__wrap { text-align: center; }
/* (margin saettes i blokken ovenfor - maa ikke gentages her) */
.fh__opslag { justify-content: center; margin-left: auto; margin-right: auto; }
.fh__hint { justify-content: center; }
/* Linjen til dem, der kommer fra Ladeagenten, fordi de allerede har
   bilen. Vises kun paa den vej ind. Henrik, 9. september 2026. */
.fh__velkommen{ max-width:740px; margin:10px 0 0; font-size:var(--text-sm); line-height:1.5;
  color:var(--color-text-on-dark-muted,#CFE6DC); background:rgba(255,255,255,.07);
  border-left:3px solid var(--color-primary-light,#EAF6F0); border-radius:10px; padding:10px 12px; }

.fh__doors { justify-content: center; margin-left: auto; margin-right: auto; }
.fh__stats { justify-content: center; }
.fh__infoboks, .fh__ingenboks { margin-left: auto; margin-right: auto; text-align: left; }
.fh__stoerrelser { justify-content: center; }

/* Det hvide kort hugger om feltet - ikke hele bredden */
.fh__kort {
	background: #fff; border-radius:var(--radius-md); padding: 8px;
	max-width: 400px; margin: 0 auto; box-shadow: 0 10px 28px rgba(0,0,0,.22);
}
.fh__kort .fh__finder { background: none; border-radius:0; padding: 0; max-width: none; box-shadow: none; }
.fh__platein { font-size:var(--text-lg); padding: 11px 8px 11px 12px; }

/* Luppen: pulserer saa laenge feltet er tomt (start her) og skifter til
   CTA-farve, saa snart der er tastet noget (tryk nu). Konstant blink
   ville efter faa sekunder blive laest som stoej. */
.fh__lookup { padding: 0 16px; transition: background .25s; }
.fh__lookup.er-klar { background: var(--cta-orange, #E8622A); }
.fh__lookup.er-klar:hover { background: #d4551f; }
.fh__lookup.er-tom svg { animation: fhLup 1.5s ease-in-out infinite; }
@keyframes fhLup {
	0%, 100% { transform: scale(1); opacity: .9; }
	50%      { transform: scale(1.3); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) { .fh__lookup.er-tom svg { animation: none; } }

.fh__hint { margin: 14px auto 0; font-size:var(--text-base); max-width: 400px; }

/* Udvejen hoerer til feltet - derfor samme bredde og venstre kant.
   Centreret under et centreret felt saa den ud til at svaeve. */
.fh__doors {
	margin: 18px auto 0; max-width: 400px;
	justify-content: flex-start; text-align: left; padding-left: 2px;
}
.fh__door { font-size:var(--text-sm); }

/* Info-ikonet sidder nu i loeftelinjen */
.fh__sub .fh__info { vertical-align: 1px; }

/* Noegletallene som én kompakt stribe i stedet for fire hoeje kort.
   Tillidslinjen er droppet, fordi den gentog de samme tal. */
.fh__stats {
	display: flex; flex-wrap: wrap; gap: 12px; margin-top: 52px; max-width: 100%;
}
.fh__stat {
	display: inline-flex; align-items: baseline; gap: 8px;
	background: rgba(255,255,255,.09); border: 1px solid rgba(255,255,255,.18);
	border-radius:var(--radius-pill); padding: 12px 22px; text-align: left;
}
/* Farven sidder paa TALLET, ikke paa rammen. Orange er sidens
   handlingsfarve og hoerer ikke til paa noget, man ikke kan klikke paa. */
.fh__num { display: inline; font-size:var(--text-lg); color: #7FD4A9; }
.fh__lbl {
	display: inline; margin: 0; font-size:var(--text-base); text-transform: none;
	letter-spacing: 0; color: #C8E2D5;
}
.fh__trust { display: none; }

@media (max-width: 640px) {
	.fh { padding: 44px 0 48px; }
	.fh__kort { max-width: 100%; }
	.fh__h1 { font-size:var(--text-xl); margin-bottom: 24px; }
	.fh__sub { margin-bottom: 30px; font-size:var(--text-md); }
	.fh__hint, .fh__doors { max-width: 100%; }

	/* Paa mobil bliver de fire maerker til et 2x2-gitter i stedet for
	   en lang kolonne nedad. Tekst centreret, saa parrene flugter. */
	.fh__stats {
		display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
		margin-top: 36px;
	}
	.fh__stat {
		display: flex; flex-direction: column; align-items: center; gap: 2px;
		padding: 12px 10px; border-radius:var(--radius-md); text-align: center;
	}
	.fh__num { display: block; font-size:var(--text-lg); }
	.fh__lbl { display: block; font-size:var(--text-xs); line-height: 1.3; }
}

/* De to noegleord i underteksten - groenne, indtil de er fanget */
.fh__ord { color: #7FD4A9; transition: color .4s; }
.fh__ord.er-fanget { color: #fff; }

/* CTA'en: daempet til begge dele er fanget, saa taender den */
.fh__go { background: rgba(232,98,42,.32); color: rgba(255,255,255,.62); transition: background .35s, color .35s, transform .2s; }
.fh__go:hover { background: rgba(232,98,42,.45); transform: none; }
.fh__go.er-klar { background: var(--cta-orange, #E8622A); color: #fff; }
.fh__go.er-klar:hover { background: #d4551f; transform: translateY(-1px); }
.fh__go.taender { transform: scale(1.02); }

/* Adresselinjen inde i kortet */
.fh__adrlinje { border-top: 1px solid var(--color-border, #E1E7E4); margin-top: 12px; padding-top: 12px; }
.fh__adrnote { margin: 0 0 9px; font-size:var(--text-xs); color: var(--color-text-muted, #6B7B76); }
.fh__adrnote.er-afvist { color: #8A3A14; }

/* Udvejen for dem uden elbil endnu */
.fh__ingenboks {
	max-width: 720px; margin: 12px 0 0;
	background: rgba(255,255,255,.09); border: 1px solid rgba(255,255,255,.18);
	border-radius:var(--radius-md); padding: 15px 16px; color: #EAF6F0; font-size:var(--text-sm); line-height: 1.6;
	animation: fhPop .35s cubic-bezier(.2,.7,.3,1);
}
.fh__ingenboks b { color: #fff; display: block; margin-bottom: 5px; font-size:var(--text-base); }
.fh__ingenboks p { margin: 0 0 11px; }
.fh__stoerrelser { display: flex; gap: 8px; flex-wrap: wrap; }
/* Bil-kort med samme ikoner som paa /skift-til-elbil/, saa valget
   genkendes paa den anden side. Lys bund og moerk tekst goer dem
   tydelige INDE i boksen - men ikke orange: orange er sidens
   handlingsfarve og skal blive ved med at vaere ene om det. */
.fh__stoerrelser {
	display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px;
}
.fh__str {
	display: flex; flex-direction: column; align-items: center; gap: 2px;
	text-decoration: none; text-align: center;
	background: #fff; border: 1.5px solid #fff; color: #10352a;
	border-radius:var(--radius-md); padding: 13px 10px; font-family: inherit;
	transition: background .18s, border-color .18s, transform .18s;
}
.fh__str:hover, .fh__str:focus-visible {
	background: #EAF6F0; border-color: #7FD4A9; transform: translateY(-2px);
}
.fh__str-ikon { width: 46px; height: auto; display: block; margin-bottom: 2px; }
.fh__str-navn { font-size:var(--text-sm); font-weight: 600; color: #10352a; }
.fh__str-km   { font-size:var(--text-xs); color: #4A6B5C; }

@media (max-width: 520px) {
	.fh__stoerrelser { grid-template-columns: 1fr; }
	.fh__str { flex-direction: row; justify-content: flex-start; gap: 12px; text-align: left; padding: 11px 14px; }
	.fh__str-ikon { width: 38px; margin: 0; }
	.fh__str-navn, .fh__str-km { display: block; }
}

/* Den diskrete udvej. BEMAERK: bredde, margin og justering saettes i
   den kompakte hero-blok ovenfor - de maa IKKE gentages her, ellers
   overskriver denne regel dem (den staar senere i filen). */
.fh__doors { display: flex; gap: 22px; flex-wrap: wrap; }
.fh__door {
	background: none; border: 0; padding: 0; color: #CFE6DC; font-family: inherit;
	font-size:var(--text-sm); text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
.fh__door:hover { color: #fff; }

/* ---- faelles med v3 nedenfor ---- */

/* Info-ikon ved hjaelpeteksten */
.fh__info {
	width: 19px; height: 19px; border-radius: 50%; margin-left: 7px; vertical-align: -3px;
	background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.3);
	color: #fff; font-family: 'Sora', sans-serif; font-size:var(--text-xs); font-weight: 700;
	line-height: 1; cursor: pointer; padding: 0;
}
.fh__info:hover { background: rgba(255,255,255,.28); }
.fh__hint b { color: #EAF6F0; }
.fh__infoboks {
	max-width: 720px; margin: 12px 0 0;
	background: rgba(255,255,255,.09); border: 1px solid rgba(255,255,255,.18);
	border-radius:var(--radius-md); padding: 14px 16px; color: #EAF6F0; font-size:var(--text-sm); line-height: 1.55;
	animation: fhPop .35s cubic-bezier(.2,.7,.3,1);
}
.fh__infoboks b { color: #fff; display: block; margin-bottom: 5px; }
.fh__infoboks p { margin: 0 0 8px; }
.fh__infoboks p:last-child { margin-bottom: 0; }
@keyframes fhPop { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* Kvitterings-chips: hvad har vi fanget (bil / elpris) */
.fh__kvit { display: flex; flex-wrap: wrap; gap: 9px; max-width: 740px; margin-top: 13px; }
.fh__chip {
	display: inline-flex; align-items: center; gap: 8px;
	background: rgba(127,212,169,.22); border: 1px solid rgba(127,212,169,.65);
	border-radius:var(--radius-pill); padding: 8px 14px; color: #fff; font-size:var(--text-sm); font-weight: 600;
	animation: fhPop .4s cubic-bezier(.2,.7,.3,1);
}
.fh__chip--fejl { background: rgba(232,98,42,.22); border-color: rgba(232,98,42,.7); color: #FFE3D6; }
.fh__chip__ok {
	width: 18px; height: 18px; border-radius: 50%; flex: 0 0 auto;
	background: #3EA66E; color: #fff; font-size:var(--text-xs); font-weight: 700;
	display: flex; align-items: center; justify-content: center;
}
.fh__chip--fejl .fh__chip__ok { background: var(--cta-orange, #E8622A); }

/* "Skriv adressen i stedet" / "Skriv nummerpladen i stedet" */
.fh__skiftfelt { margin: 12px 0 0; max-width: 740px; }
.fh__skiftlink {
	background: none; border: 0; padding: 0; color: #CFE6DC; font-family: inherit;
	font-size:var(--text-sm); text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
.fh__skiftlink:hover { color: #fff; }

/* Adressemodulet i heroens kort. Modulets egen intro/hjaelp/spring er
   skjult, fordi heroen selv har teksten. Modulet er UROERT - kun skjult. */
.fh__adresseslot { background: none; box-shadow: none; padding: 0; border-radius:0; max-width: none; }
.fh__adresseslot .adr-intro,
.fh__adresseslot .adr-hjaelp,
.fh__adresseslot .adr-spring { display: none; }
.fh__adresseslot .adr-felt { margin: 0; }

/* Modulets EGEN afslutning hoerer ikke hjemme i heroen: heroen har selv
   baade CTA og pladefelt. Live-tjek-panelet (.adr-tjek) og resultatet
   (.adr-fundet) BEHOLDES - de er en vaesentlig del af tilliden. */
.fh__adresseslot .adr-fundet__cta,
.fh__adresseslot .adr-fundet__note { display: none; }

/* Naar lokationen bruges, er feltet ikke det vigtige - panelet er. */
.fh__adrlinje.er-lokation .adr-felt { display: none; }

/* Hjaelpetekst: mild ravfarve naar noget mangler.
   Klassen saettes paa selve teksten (#fh-hint-tekst), derfor begge former. */
#fh-hint-tekst.er-mangler,
.fh__hint.er-mangler,
.fh__hint.er-mangler #fh-hint-tekst { color: #F3C08A; }

/* Pulserende ikon paa "Brug lokation", naar DET er naeste skridt.
   Diskret blikfang - uden at konkurrere med den orange CTA. */
.fh__loc.er-naeste svg { animation: fhPuls 1.6s ease-in-out infinite; }
@keyframes fhPuls {
	0%, 100% { transform: scale(1); opacity: 1; }
	50%      { transform: scale(1.28); opacity: .72; }
}
.fh__loc.er-naeste { box-shadow: 0 0 0 0 rgba(127,212,169,.55); animation: fhRing 1.6s ease-out infinite; }
@keyframes fhRing {
	0%   { box-shadow: 0 0 0 0 rgba(127,212,169,.5); }
	70%  { box-shadow: 0 0 0 9px rgba(127,212,169,0); }
	100% { box-shadow: 0 0 0 0 rgba(127,212,169,0); }
}
@media (prefers-reduced-motion: reduce) {
	.fh__loc.er-naeste svg, .fh__loc.er-naeste { animation: none; }
}

/* Skjulte elementer skal vaere vaek: .fh__plate saetter selv display:flex,
   som ellers overtrumfer [hidden]. */
.fh__kort [hidden], .fh__finder [hidden] { display: none !important; }

@media (max-width: 640px) {
	.fh__kvit, .fh__infoboks, .fh__doors, .fh__ingenboks { max-width: 100%; }
	.fh__kort { max-width: 100%; }
}

/* ============================================================
   MOTOR TRIN 1: nummerpladen tegnet som en rigtig dansk plade.
   Motoren skriver selv .motor-bil__plade - vi giver den kun form,
   saa den laeses som identitet ("det er MIN bil") og ikke som
   gentaget tekst. motor.php/motor.js er UROERT.
   ============================================================ */
.motor-bil__plade {
	display: inline-flex; align-items: center;
	border: 2.5px solid #111; border-radius:var(--radius-sm); background: #fff;
	font-family: var(--font-body, 'Inter', sans-serif);
	font-size:var(--text-xl); font-weight: 700; letter-spacing: .14em;
	color: #111; padding: 7px 16px 7px 44px; margin: 0 0 12px;
	position: relative; overflow: hidden; line-height: 1.15;
}
.motor-bil__plade::before {
	content: "DK"; position: absolute; left: 0; top: 0; bottom: 0; width: 34px;
	background: #147a63; color: #fff; font-size:var(--text-2xs); font-weight: 700; letter-spacing: .04em;
	display: flex; align-items: flex-end; justify-content: center; padding-bottom: 5px;
}
.motor-bil__plade::after {
	content: "\2605"; position: absolute; left: 0; top: 7px; width: 34px;
	color: #ffd200; font-size:var(--text-2xs); text-align: center; letter-spacing: 0;
}
@media (max-width: 640px) {
	.motor-bil__plade { font-size:var(--text-lg); padding-left: 40px; }
	.motor-bil__plade::before, .motor-bil__plade::after { width: 30px; }
}

/* ============================================================
   INDGANG v5: heroen tager KUN nummerpladen. Motoren venter,
   indtil bilen er fundet, saa der aldrig staar to pladefelter
   samtidig. Adressen flyttes ned i Trin 2, hvor prisen regnes.
   ============================================================ */

/* Motoren venter (klassen saettes fra JS - uden JS vises alt).
   Naar den kommer frem, glider den blidt ind: kun opacity og transform,
   som browseren kan animere jaevnt. Hoejde-animation paa en stor
   sektion er netop dét, der giver hak. */
.forside-funnel.fh-vent { display: none; }
.forside-funnel.fh-kommer { animation: fhKom .75s cubic-bezier(.22,.7,.28,1) both; will-change: opacity, transform; }
@keyframes fhKom {
	from { opacity: 0; transform: translateY(16px); }
	to   { opacity: 1; transform: none; }
}
.fh__opslag { transition: opacity .45s ease; }
.fh__opslag.er-vaek { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
	.forside-funnel.fh-kommer { animation: none; }
	.fh__opslag { transition: none; }
}

/* Let kvittering paa pladeopslaget - ét opslag, én linje */
.fh__opslag {
	display: flex; align-items: center; gap: 10px; max-width: 940px;
	margin: 12px 0 0; color: #EAF6F0; font-size:var(--text-sm);
	animation: fhPop .3s cubic-bezier(.2,.7,.3,1);
}
.fh__opslag__ikon {
	width: 17px; height: 17px; border-radius: 50%; flex: 0 0 auto;
	border: 2px solid rgba(255,255,255,.3); border-top-color: #7FD4A9;
	animation: fhSnur .7s linear infinite;
	display: flex; align-items: center; justify-content: center;
	font-size:var(--text-2xs); font-weight: 700; color: #fff;
}
.fh__opslag__ikon.er-ok   { border: 0; background: #3EA66E; animation: none; }
.fh__opslag__ikon.er-fejl { border: 0; background: var(--cta-orange, #E8622A); animation: none; }
@keyframes fhSnur { to { transform: rotate(360deg); } }

/* Trin 2's tuck-up bag Trin 1 (margin-top: -34px) sprang foer i nul
   uden overgang - det var det synlige "hak". Nu glider den med. */
.forside-funnel .motor-trin--klap {
	transition: margin-top 1.05s cubic-bezier(.22,.7,.28,1),
	            background-color .8s ease, border-color .8s ease;
}
/* Mens vi glider, styrer JS hoejden praecist - motorens egen
   max-height: 1200px maa ikke overtage midt i bevaegelsen. */
.forside-funnel .motor-trin--klap.fh-glid { animation: none; }
.forside-funnel .motor-trin--klap.fh-glid .motor-trin__krop { overflow: hidden; }
@media (prefers-reduced-motion: reduce) {
	.forside-funnel .motor-trin--klap { transition: none; }
}

/* Adressemodulet, mens det venter paa at blive flyttet ned */
.fh__adresseholder[hidden] { display: none; }

/* Adressen i motorens Trin 2 */
.fh-adr2 { margin: 0 0 18px; }
.fh-adr2__intro {
	margin: 0 0 12px; font-size:var(--text-sm); line-height: 1.6;
	color: var(--color-text-muted, #6B7B76);
}
.fh-adr2__intro b { color: var(--color-text, #1A1A1A); font-weight: 600; }
.fh-adr2 .adr-intro, .fh-adr2 .adr-spring,
.fh-adr2 .adr-fundet__cta, .fh-adr2 .adr-fundet__note { display: none; }
.fh-adr2 .adresse { margin: 0; padding: 0; background: none; box-shadow: none; }

/* Paa den hvide baggrund forsvandt feltet. Nu er det groent toenet med
   tydelig kant, saa man kan SE, at her skal der skrives - og
   lokationsknappen faar CTA-farven, fordi den er den hurtige vej. */
.fh-adr2 .adr-felt__wrap {
	background: #EAF6F0;
	border: 1.5px solid #9FD3B8;
	border-radius:var(--radius-sm);
}
.fh-adr2 .adr-felt__wrap:focus-within {
	border-color: #3EA66E;
	box-shadow: 0 0 0 4px rgba(62,166,110,.16);
}
.fh-adr2 .adr-input { background: transparent; }
.fh-adr2 .adr-input::placeholder { color: #6B8B7B; }
.fh-adr2 .adr-felt__ikon { color: #3EA66E; }

.fh-adr2 .adr-position {
	background: var(--cta-orange, #E8622A);
	border-color: var(--cta-orange, #E8622A);
	color: #fff;
	font-weight: 600;
}
.fh-adr2 .adr-position:hover { background: #d4551f; border-color: #d4551f; color: #fff; }
.fh-adr2 .adr-position svg { stroke: #fff; }

/* Naar elprisen er fanget, traeder KUN det store resultatkort af.
   Feltet BLIVER staaende med adressen i - lokationen er et gaet fra
   browseren, og brugeren skal kunne se og rette den. Tjek-linjen med
   fluebenene bliver ogsaa, for den ER kvitteringen. */
.fh-adr2.er-faerdig .adr-fundet,
.fh-adr2.er-faerdig .fh-adr2__intro { display: none; }

/* Den vigtige advarsel skal traede tydeligere frem, naar adressen
   kom fra lokation - det er dér, den kan vaere upraecis. */
.fh-adr2 .adr-hjaelp {
	display: block; margin: 8px 0 0;
	font-size:var(--text-xs); color: var(--color-text-muted, #6B7B76);
}

/* Kvitteringsbjaelke mellem heroen og motoren: "Det ved vi om dig".
   Moeder brugeren i samme sekund, siden ruller ned. */
.fh-bro {
	display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
	max-width: 860px; margin: 0 auto 18px; padding: 0 20px;
	animation: fhPop .45s cubic-bezier(.2,.7,.3,1);
}
.fh-bro__lbl { font-size:var(--text-sm); color: var(--color-text-muted, #6B7B76); }
.fh-bro__chip {
	display: inline-flex; align-items: center; gap: 8px;
	background: #EAF6F0; border: 1px solid #CFE7DB; border-radius:var(--radius-pill);
	padding: 7px 14px; font-size:var(--text-sm); font-weight: 600; color: #0B7352;
}
.fh-bro__ok {
	width: 17px; height: 17px; border-radius: 50%; flex: 0 0 auto;
	background: #3EA66E; color: #fff; font-size:var(--text-2xs); font-weight: 700;
	display: flex; align-items: center; justify-content: center;
}
@media (max-width: 640px) {
	.fh-bro { gap: 8px; }
	.fh-bro__lbl { flex: 1 1 100%; }
}

/* Elpris-kvittering i motorens Trin 2 (indsat fra forside-hero.js).
   Samme rolle som "Skift bil"-linjen i Trin 1 - bare for prisen. */
.fh-elpris {
	display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
	background: #EAF6F0; border: 1px solid #CFE7DB; border-radius:var(--radius-sm);
	padding: 11px 13px; margin: 0 0 14px; font-size:var(--text-sm); color: #0B7352;
}
.fh-elpris__ok {
	width: 19px; height: 19px; border-radius: 50%; flex: 0 0 auto;
	background: #3EA66E; color: #fff; font-size:var(--text-xs); font-weight: 700;
	display: flex; align-items: center; justify-content: center;
}
.fh-elpris__tekst { flex: 1 1 200px; min-width: 0; }
.fh-elpris__knap {
	background: none; border: 0; padding: 0; cursor: pointer; font-family: inherit;
	color: #147a63; font-weight: 600; font-size:var(--text-sm);
	text-decoration: underline; text-underline-offset: 2px;
}
.fh-elpris__knap:hover { color: #0f5f4d; }
.fh-elpris--mangler { background: #FDF1EA; border-color: #F5D3C1; color: #8A3A14; }
.fh-elpris--mangler .fh-elpris__ok { background: var(--cta-orange, #E8622A); }
.fh-elpris--mangler .fh-elpris__knap { color: #C24E1B; }



/* ============================================================
 * FIX (v1.104.0) - mockup-paletten som SCOPED variabler paa .fsx,
 * saa alle porterede regler slaar op i de rigtige farver/fonts
 * uden at roere temaets egne variabler.
 * ============================================================ */
.fsx{
  --dark:#0B7352; --fresh:#3EA66E; --mint:#EAF6F0; --bg:#F7F9F8;
  --muted:#F1F4F2; --text:#1A1A1A; --tmuted:#5B6B65; --faint:#AEB8B3;
  --border:#E1E7E4; --orange:#E8622A; --orange2:#D0521C; --gold:#C8A96E;
  --sora:'Sora',sans-serif; --inter:'Inter',sans-serif;
}

/* ============================================================
 * FORSIDE-SEKTIONER (Fase 4 - hele forsiden, 23/7-2026)
 * Portet 1:1 fra godkendt forside-mockup.html, scoped under .fsx
 * saa intet kolliderer med motor, adresse eller resten af temaet.
 * ============================================================ */
.fsx h1, .fsx h2, .fsx h3, .fsx .sora{font-family:var(--sora);letter-spacing:-.02em}
.fsx .mock-flag{background:#fff7e6;border-bottom:1px solid #f0d9a8;color:#6b5720;font-size:var(--text-sm);text-align:center;padding:7px 12px}
.fsx .mock-flag b{font-weight:700}
/* HERO */
.fsx .hero{background:radial-gradient(120% 120% at 50% -10%,#235c49 0%,#0B7352 45%,#143B30 100%);color:#fff;padding:46px 0 40px}
.fsx .stat{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:var(--radius-md);padding:14px 12px;text-align:center}
.fsx .stat__num{display:block;font-family:var(--sora);font-weight:700;font-size:var(--text-lg);color:#fff}
.fsx .stat__lbl{display:block;font-size:var(--text-xs);color:#BFE8D3;text-transform:uppercase;letter-spacing:.04em;margin-top:4px}
.fsx .bolt{width:16px;height:16px;display:inline-block}
/* SECTIONS */
section.blk{padding:34px 0}
.fsx .blk__head{display:flex;align-items:baseline;justify-content:space-between;gap:14px;margin-bottom:6px;flex-wrap:wrap}
.fsx .blk h2{font-size:var(--text-lg);font-weight:700;color:var(--dark);margin:0}
.fsx .blk__sub{color:var(--tmuted);font-size:var(--text-base);margin:2px 0 18px}
.fsx .blk__link{color:var(--dark);font-weight:700;text-decoration:none;font-size:var(--text-base);border-bottom:2px solid var(--mint)}
.fsx .blk__link:hover{border-bottom-color:var(--fresh)}
/* PRODUCT CARDS (som .pk-u — ingen venstrekant, hover-outline pr. type) */
.fsx .grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(258px,1fr));gap:16px;align-items:stretch}
.fsx .pk{position:relative;display:flex;flex-direction:column;background:#fff;border:1px solid var(--border);border-radius:var(--radius-md);padding:16px;transition:transform .18s ease,box-shadow .22s ease,border-color .18s ease}
.fsx .pk:hover{transform:translateY(-4px);border-color:transparent}
.fsx .pk[data-type="leje"]:hover{box-shadow:0 0 0 1.5px #AED0BE,0 14px 30px rgba(62,166,110,.18)}
.fsx .pk[data-type="kob"]:hover{box-shadow:0 0 0 1.5px #AABFB7,0 14px 30px rgba(27,77,62,.18)}
.fsx .pk[data-type="butik"]:hover{box-shadow:0 0 0 1.5px #E0CFAD,0 14px 30px rgba(200,169,110,.24)}
.fsx .pk__strip{position:absolute;top:-1px;left:-1px;right:-1px;background:linear-gradient(90deg,#0B7352,#2E7D5E);color:#fff;border-radius:var(--radius-md) var(--radius-md) 0 0;padding:7px 14px;font-size:var(--text-xs);font-weight:700;display:flex;justify-content:space-between}
.fsx .pk__strip .spare{color:#7FFFB8}
.fsx .pk.has-strip{padding-top:44px}
.fsx .pk__top{display:flex;justify-content:space-between;gap:10px;align-items:flex-start}
.fsx .pk__name{font-family:var(--sora);font-size:var(--text-md);font-weight:700;margin:0 0 6px}
.fsx .chips{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:8px}
.fsx .chip{font-size:var(--text-2xs);font-weight:600;padding:3px 9px;border-radius:var(--radius-sm);background:var(--mint);color:var(--dark)}
.fsx .pk__img{width:64px;height:64px;flex-shrink:0;border-radius:var(--radius-sm);background:var(--muted);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;color:var(--tmuted);font-size:var(--text-lg)}
.fsx .type-tag{display:inline-flex;align-items:center;gap:6px;font-size:var(--text-2xs);font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--dark);background:var(--mint);padding:4px 10px;border-radius:var(--radius-pill);align-self:flex-start;margin-bottom:10px}
.fsx .type-tag .b{width:8px;height:8px;border-radius:50%}
.fsx .leje .b{background:var(--fresh)}
.fsx .kob .b{background:var(--dark)}
.fsx .butik .b{background:#C8A96E}
.fsx .tp{display:inline-flex;align-items:center;gap:6px;margin-bottom:10px}
.fsx .tp .stars{color:#00b67a;font-size:var(--text-sm);letter-spacing:1px}
.fsx .tp .num{font-size:var(--text-xs);font-weight:700;color:#00875a}
.fsx .rows{border-top:1px solid var(--border);margin-top:2px}
.fsx .row{display:flex;justify-content:space-between;padding:7px 0;border-bottom:.5px solid var(--muted);font-size:var(--text-sm)}
.fsx .row .k{color:var(--tmuted)}
.fsx .row .v{font-weight:600}
.fsx .row .v.inkl{color:var(--fresh)}
.fsx .price{display:flex;justify-content:space-between;align-items:flex-end;padding:11px 0 12px;border-top:1.5px solid var(--border);margin-top:8px}
.fsx .price .lbl{font-size:var(--text-2xs);font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--tmuted)}
.fsx .price .v{font-family:var(--sora);font-size:var(--text-lg);font-weight:700}
.fsx .pk__btns{display:flex;flex-direction:column;gap:8px;margin-top:auto}
.fsx .btn1{display:block;text-align:center;padding:12px;border-radius:var(--radius-sm);font-weight:700;font-size:var(--text-sm);color:#fff;text-decoration:none;background:var(--orange);transition:background .15s}
.fsx .btn1:hover{background:var(--orange2)}
.fsx .btn2{display:block;text-align:center;padding:10px;border-radius:var(--radius-sm);font-weight:600;font-size:var(--text-sm);text-decoration:none;color:var(--dark);border:1px solid var(--border)}
.fsx .btn2:hover{background:var(--muted)}
.fsx .match-badge{position:absolute;top:-1px;left:-1px;right:-1px;display:flex;border-radius:var(--radius-md) var(--radius-md) 0 0;overflow:hidden;opacity:0;transform:translateY(-6px);transition:.3s}
.fsx .match-badge span{flex:1;text-align:center;font-size:var(--text-xs);font-weight:700;padding:7px;color:#fff}
.fsx .match-badge .a{background:var(--orange)}
.fsx .match-badge .m{background:var(--fresh)}
.fsx .pk.is-match{box-shadow:0 0 0 2.5px var(--fresh),0 10px 26px rgba(0,0,0,.10)!important;border-color:transparent}
.fsx .pk.is-match .match-badge{opacity:1;transform:none}
.fsx .pk.is-match{padding-top:44px}
.fsx .pk.dim{opacity:.62}
/* KAMPAGNE STRIP */
.fsx .kampagner{background:var(--dark);border-radius:var(--radius-md);padding:22px 24px;color:#fff;display:flex;gap:22px;align-items:center;flex-wrap:wrap}
.fsx .kampagner__txt{flex:1;min-width:220px}
.fsx .kampagner__eyebrow{color:#7FD4A9;font-size:var(--text-xs);font-weight:700;text-transform:uppercase;letter-spacing:.06em}
.fsx .kampagner h3{font-size:var(--text-lg);margin:6px 0 4px;color:#fff}
.fsx .kampagner p{margin:0;color:#CFE6DC;font-size:var(--text-base)}
.fsx .kampagner__cards{display:flex;gap:12px;flex-wrap:wrap}
.fsx .kcard{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);border-radius:var(--radius-md);padding:12px 14px;min-width:170px}
.fsx .kcard .kk{font-size:var(--text-xs);color:#CFE6DC}
.fsx .kcard .knavn{font-family:var(--sora);font-weight:700;margin:2px 0 6px}
.fsx .kcard .kpris{font-family:var(--sora);font-size:var(--text-lg);font-weight:700;color:#7FFFB8}
.fsx .kcard .kgl{font-size:var(--text-xs);color:#BFE8D3;text-decoration:line-through}
/* UDBYDERE ROW */
.fsx .udb-row{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px}
.fsx .udb{display:flex;align-items:center;gap:12px;background:#fff;border:1px solid var(--border);border-radius:var(--radius-md);padding:12px 14px;text-decoration:none;color:inherit;transition:box-shadow .18s,transform .18s,border-color .18s}
.fsx .udb:hover{transform:translateY(-3px);border-color:transparent;box-shadow:0 0 0 1.5px #AABFB7,0 12px 26px rgba(27,77,62,.14)}
.fsx .udb__logo{width:42px;height:42px;border-radius:var(--radius-sm);background:var(--mint);color:var(--dark);font-family:var(--sora);font-weight:700;display:flex;align-items:center;justify-content:center}
.fsx .udb__navn{font-weight:700;font-size:var(--text-base)}
.fsx .udb__fra{font-size:var(--text-sm);color:var(--tmuted)}
/* TRYGHED + GUIDES */
.fsx .tryg{background:var(--mint);border-radius:var(--radius-md);padding:24px 26px;display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.fsx .tryg__icon{font-size:var(--text-xl)}
.fsx .tryg b{color:var(--dark)}
.fsx .tryg span{color:#40514c;font-size:var(--text-base)}
.fsx .guides{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px}
.fsx .gcard{background:#fff;border:1px solid var(--border);border-radius:var(--radius-md);overflow:hidden;text-decoration:none;color:inherit;transition:transform .18s,box-shadow .22s,border-color .18s}
.fsx .gcard:hover{transform:translateY(-4px);border-color:transparent;box-shadow:0 0 0 1.5px #AED0BE,0 14px 30px rgba(62,166,110,.16)}
.fsx .gcard__media{aspect-ratio:16/9;background:linear-gradient(135deg,#EAF6F0,#D8ECE1);display:flex;align-items:center;justify-content:center;color:var(--fresh);font-size:var(--text-xl)}
.fsx .gcard__b{padding:13px 14px 15px}
.fsx .gchip{display:inline-block;background:var(--mint);color:var(--dark);font-size:var(--text-xs);font-weight:700;text-transform:uppercase;padding:3px 9px;border-radius:var(--radius-pill)}
.fsx .gcard h4{font-family:var(--sora);color:var(--dark);margin:8px 0 4px;font-size:var(--text-md)}
.fsx .gcard p{margin:0;color:var(--tmuted);font-size:var(--text-sm)}
.fsx .quad{display:grid;grid-template-columns:repeat(auto-fill,minmax(216px,1fr));gap:14px;margin-bottom:26px}
.fsx .qcard{position:relative;background:#fff;border:1px solid var(--border);border-top:4px solid var(--dark);border-radius:var(--radius-md);padding:16px 15px 15px;display:flex;flex-direction:column;transition:transform .18s,box-shadow .22s}
.fsx .qcard:hover{transform:translateY(-4px);box-shadow:0 12px 28px rgba(0,0,0,.08)}
.fsx .qcard--billig{border-top-color:var(--orange)}
.fsx .qcard--anbefalet{border-top-color:var(--fresh)}
.fsx .qcard--leje{border-top-color:#147a63}
.fsx .qcard--binding{border-top-color:#C8A96E}
.fsx .qbadge{align-self:flex-start;font-size:var(--text-2xs);font-weight:700;text-transform:uppercase;letter-spacing:.05em;padding:4px 10px;border-radius:var(--radius-pill);margin-bottom:11px}
.fsx .qbadge--billig{background:#FBEAE3;color:#993C1D}
.fsx .qbadge--anbefalet{background:var(--mint);color:var(--dark)}
.fsx .qbadge--leje{background:#E1F5EE;color:#0F6E56}
.fsx .qbadge--binding{background:#F7EEDD;color:#7a5a1e}
.fsx .qcard__navn{font-family:var(--sora);font-weight:700;font-size:var(--text-md);margin:0 0 4px}
.fsx .qcard__type{font-size:var(--text-xs);color:var(--tmuted);margin-bottom:9px}
.fsx .qcard__tp{font-size:var(--text-xs);color:#00875a;font-weight:700;margin-bottom:10px}
.fsx .qcard__pris{font-family:var(--sora);font-weight:700;font-size:var(--text-lg);margin:auto 0 12px}
.fsx .qcard__pris small{font-size:var(--text-xs);color:var(--tmuted);font-weight:400}
.fsx .qcard__cta{display:block;text-align:center;background:var(--orange);color:#fff;font-weight:700;font-size:var(--text-sm);padding:11px;border-radius:var(--radius-sm);text-decoration:none;transition:background .15s}
.fsx .qcard__cta:hover{background:var(--orange2)}
.fsx .fresh-note{display:inline-flex;align-items:center;gap:7px;font-size:var(--text-sm);color:var(--tmuted)}
.fsx .fresh-dot{width:7px;height:7px;border-radius:50%;background:var(--fresh)}
.fsx .behov{background:var(--muted);border-radius:var(--radius-md);padding:26px;text-align:center}
.fsx .behov h3{font-family:var(--sora);color:var(--dark);font-size:var(--text-lg);margin:0 0 6px}
.fsx .behov p{color:var(--tmuted);margin:0 0 16px;font-size:var(--text-base)}
.fsx .behov-chips{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.fsx .behov-chip{background:#fff;border:1.5px solid var(--border);border-radius:var(--radius-pill);padding:10px 18px;font-weight:600;font-size:var(--text-base);color:var(--dark);text-decoration:none;transition:border-color .15s,background .15s}
.fsx .behov-chip:hover{border-color:var(--fresh);background:var(--mint)}
.fsx .typecards{display:grid;grid-template-columns:repeat(auto-fill,minmax(216px,1fr));gap:14px}
.fsx .tcard{background:#fff;border:1px solid var(--border);border-radius:var(--radius-md);padding:18px;text-decoration:none;color:inherit;transition:transform .18s,box-shadow .22s,border-color .18s;display:flex;flex-direction:column}
.fsx .tcard:hover{transform:translateY(-4px);border-color:transparent;box-shadow:0 12px 28px rgba(0,0,0,.08)}
.fsx .tcard__ic{width:44px;height:44px;border-radius:var(--radius-sm);background:var(--mint);color:var(--dark);display:flex;align-items:center;justify-content:center;font-size:var(--text-lg);margin-bottom:12px}
.fsx .tcard h4{font-family:var(--sora);color:var(--dark);margin:0 0 6px;font-size:var(--text-md)}
.fsx .tcard p{color:var(--tmuted);font-size:var(--text-sm);margin:0 0 12px;line-height:1.5}
.fsx .tcard__pris{font-size:var(--text-sm);color:var(--dark);font-weight:700;margin:auto 0 8px}
.fsx .tcard__go{color:var(--fresh);font-weight:700;font-size:var(--text-base)}
.fsx .tcard:hover .tcard__go{color:var(--dark)}
.fsx .pricegrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px}
.fsx .pricecard{background:var(--muted);border-radius:var(--radius-md);padding:18px 16px;text-align:center;display:flex;flex-direction:column;gap:4px}
.fsx .pricecard__lbl{font-size:var(--text-xs);font-weight:700;color:var(--tmuted);text-transform:uppercase;letter-spacing:.04em}
.fsx .pricecard__val{font-family:var(--sora);font-weight:700;font-size:var(--text-lg);color:var(--dark)}
.fsx .pricecard__val small{font-size:var(--text-xs);color:var(--tmuted);font-weight:400}
.fsx .pricecard__note{font-size:var(--text-xs);color:var(--tmuted)}
.fsx .prisagent{background:linear-gradient(140deg,#1b5544,#0f2f26);border-radius:var(--radius-md);padding:38px;display:flex;gap:38px;align-items:center;flex-wrap:wrap;color:#fff;position:relative;overflow:hidden}
.fsx .prisagent::before{content:"";position:absolute;right:-60px;top:-60px;width:220px;height:220px;border-radius:50%;background:rgba(127,212,169,.07)}
.fsx .prisagent__txt{flex:1;min-width:290px;position:relative;z-index:1}
.fsx .prisagent__eyebrow{display:inline-flex;align-items:center;gap:7px;color:#7FD4A9;font-size:var(--text-xs);font-weight:700;text-transform:uppercase;letter-spacing:.09em;margin-bottom:12px}
.fsx .prisagent__eyebrow::before{content:"";width:22px;height:2px;background:#7FD4A9;border-radius:2px}
.fsx .prisagent h3{font-family:var(--sora);font-size:var(--text-xl);margin:0 0 12px;color:#fff;line-height:1.18;letter-spacing:-.02em}
.fsx .prisagent p{color:#CFE6DC;max-width:460px;margin:0 0 24px;font-size:var(--text-md);line-height:1.6}
.fsx .prisagent__cta{display:inline-flex;align-items:center;gap:8px;background:var(--orange);color:#fff;font-weight:700;font-family:var(--inter);font-size:var(--text-md);padding:16px 30px;border:0;border-radius:var(--radius-md);text-decoration:none;cursor:pointer;transition:background .15s;box-shadow:0 10px 26px rgba(232,98,42,.32)}
.fsx .prisagent__vis{flex:0 0 296px;max-width:100%;position:relative;z-index:1}
.fsx .pmail{background:#fff;border-radius:var(--radius-md);padding:15px;box-shadow:0 20px 44px rgba(0,0,0,.34);transform:rotate(-1.4deg)}
.fsx .pmail__top{display:flex;align-items:center;gap:9px;padding-bottom:11px;border-bottom:1px solid var(--border)}
.fsx .pmail__av{width:28px;height:28px;border-radius:var(--radius-sm);background:var(--dark);color:#fff;font-family:var(--sora);font-weight:700;font-size:var(--text-xs);display:flex;align-items:center;justify-content:center}
.fsx .pmail__from b{font-size:var(--text-xs);color:var(--text);display:block;line-height:1.2}
.fsx .pmail__from span{font-size:var(--text-xs);color:var(--tmuted)}
.fsx .pmail__subj{font-family:var(--sora);font-weight:700;color:var(--dark);font-size:var(--text-base);margin:12px 0 10px;line-height:1.35}
.fsx .pmail__row{display:flex;align-items:center;gap:10px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:10px}
.fsx .pmail__ic{width:32px;height:32px;border-radius:var(--radius-sm);background:var(--mint);color:var(--dark);display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.fsx .pmail__n{font-weight:700;font-size:var(--text-sm);color:var(--text)}
.fsx .pmail__p{font-size:var(--text-xs);color:var(--tmuted)}
.fsx .pmail__p s{color:#b3bdb8}
.fsx .pmail__p b{color:var(--fresh);font-size:var(--text-base)}
.fsx .prisagent__cta:hover{background:var(--orange2)}
.fsx .prisagent__form{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:4px}
.fsx .pa-mail{border:0;border-radius:var(--radius-sm);padding:13px 14px;font-family:var(--inter);font-size:var(--text-base);color:var(--text);background:#fff;min-width:220px;flex:1;max-width:300px}
.fsx .pa-chips{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin:0 0 16px}
.fsx .pa-chip{background:rgba(255,255,255,.08);border:1.5px solid rgba(255,255,255,.2);color:#eafaf2;font-family:var(--inter);font-weight:600;font-size:var(--text-base);padding:9px 16px;border-radius:var(--radius-pill);cursor:pointer;transition:background .15s,border-color .15s,color .15s}
.fsx .pa-chip:hover{border-color:var(--fresh)}
.fsx .pa-chip.on{background:var(--fresh);border-color:var(--fresh);color:#0E2C22}
.fsx .logostrip__title{text-align:center;color:var(--tmuted);font-weight:700;font-size:var(--text-sm);text-transform:uppercase;letter-spacing:.05em;margin:0 0 16px}
.fsx .logostrip{display:flex;flex-wrap:wrap;gap:8px 26px;justify-content:center;align-items:center;padding:14px 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.fsx .logochip{font-family:var(--sora);font-weight:700;color:#8a958f;font-size:var(--text-md);letter-spacing:-.01em}
.fsx .logostrip__note{text-align:center;color:var(--tmuted);font-size:var(--text-sm);margin:14px 0 0}
.fsx .story{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px}
.fsx .spanel{background:#fff;border:1px solid var(--border);border-radius:var(--radius-md);overflow:hidden;opacity:0;transform:translateY(18px);box-shadow:0 6px 20px rgba(20,53,43,.07);transition:box-shadow .22s ease}
.fsx .story.in .spanel{animation:spIn .7s cubic-bezier(.2,.7,.3,1) forwards}
.fsx .story.in .spanel:nth-child(2){animation-delay:.22s}
.fsx .story.in .spanel:nth-child(3){animation-delay:.44s}
.fsx to{opacity:1;transform:none}
.fsx .spanel__art{background:#DCEBE0;padding:0;display:block;line-height:0}
.fsx .spanel__art svg{width:100%;max-width:180px;height:auto}
.fsx .spanel__img{width:100%;height:auto;display:block}
.fsx .spanel__b{padding:16px 18px 19px}
.fsx .spanel__n{font-family:var(--sora);font-size:var(--text-xs);font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--orange)}
.fsx .spanel h4{font-family:var(--sora);color:var(--dark);margin:8px 0 6px;font-size:var(--text-md)}
.fsx .spanel p{color:var(--tmuted);font-size:var(--text-sm);margin:0;line-height:1.55}
.fsx .tangle{animation:wig 2.6s ease-in-out infinite}
.fsx 0%, .fsx 100%{transform:translateX(0)}
.fsx 50%{transform:translateX(2.5px)}
.fsx .spark{transform-origin:center;animation:pulse 2.2s ease-in-out infinite}
.fsx 0%, .fsx 100%{opacity:.55;transform:scale(.94)}
.fsx 50%{opacity:1;transform:scale(1.04)}
.fsx .story__end{text-align:center;margin:22px 0 0;font-family:var(--sora);font-size:var(--text-md);color:var(--dark);font-weight:600}
.fsx .story__end span{color:var(--fresh)}
@media(prefers-reduced-motion:reduce){
.fsx .spanel{opacity:1;transform:none}
.fsx .story.in .spanel{animation:none}
.fsx .tangle, .fsx .spark{animation:none}
}
.fsx .steps{display:grid;grid-template-columns:repeat(auto-fill,minmax(228px,1fr));gap:14px}
.fsx .step3{background:#fff;border:1px solid var(--border);border-radius:var(--radius-md);padding:20px 19px}
.fsx .step3__n{font-family:var(--sora);font-size:var(--text-xs);font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--orange)}
.fsx .step3 h4{font-family:var(--sora);color:var(--dark);margin:9px 0 6px;font-size:var(--text-md)}
.fsx .step3 p{color:var(--tmuted);font-size:var(--text-base);margin:0;line-height:1.55}
.fsx .tcards{display:grid;grid-template-columns:repeat(auto-fill,minmax(215px,1fr));gap:14px}
.fsx .tc{background:#fff;border:1px solid var(--border);border-radius:var(--radius-md);padding:18px}
.fsx .tc__ic{width:34px;height:34px;border-radius:var(--radius-sm);background:var(--mint);color:var(--dark);display:flex;align-items:center;justify-content:center;margin-bottom:11px}
.fsx .tc h4{font-family:var(--sora);color:var(--dark);margin:0 0 6px;font-size:var(--text-md)}
.fsx .tc p{color:var(--tmuted);font-size:var(--text-sm);margin:0;line-height:1.55}
.fsx .gcard{position:relative}
.fsx .gbadge{position:absolute;top:11px;right:11px;font-size:var(--text-2xs);font-weight:700;text-transform:uppercase;letter-spacing:.04em;padding:4px 10px;border-radius:var(--radius-pill);z-index:2}
.fsx .gbadge--nu{background:var(--orange);color:#fff}
.fsx .gbadge--pop{background:var(--dark);color:#fff}
.fsx .gbadge--vt{background:#fff;color:var(--dark);border:1px solid var(--border)}
.fsx .seo{background:#fff;border:1px solid var(--border);border-radius:var(--radius-md);padding:30px 32px}
.fsx .seo h2{font-family:var(--sora);color:var(--dark);font-size:var(--text-lg);margin:0 0 12px}
.fsx .seo h3{font-family:var(--sora);color:var(--dark);font-size:var(--text-md);margin:22px 0 8px}
.fsx .seo p{color:#4c5a54;font-size:var(--text-base);line-height:1.7;margin:0 0 10px}
.fsx .seo ul{color:#4c5a54;font-size:var(--text-base);line-height:1.7;padding-left:20px;margin:0 0 10px}
.fsx .seo a{color:var(--fresh);font-weight:600;text-decoration:none;border-bottom:1px solid var(--mint)}
.fsx .seo a:hover{border-bottom-color:var(--fresh)}
.fsx .faq2{max-width:780px;margin:0 auto}
.fsx .fq2{background:#fff;border:1px solid var(--border);border-radius:var(--radius-md);padding:15px 18px;margin-bottom:10px;cursor:pointer}
.fsx .fq2 h4{margin:0;font-size:var(--text-md);color:var(--dark);display:flex;justify-content:space-between;gap:10px;align-items:center}
.fsx .fq2 .pm{color:var(--fresh);font-size:var(--text-lg);line-height:1}
.fsx .fq2 p{color:#4c5a54;font-size:var(--text-base);margin:10px 0 0;display:none;line-height:1.65}
.fsx .fq2.open p{display:block}
.fsx .bottomcta{background:linear-gradient(140deg,#1b5544,#0f2f26);border-radius:var(--radius-md);padding:46px 30px;text-align:center;color:#fff}
.fsx .bottomcta h2{font-family:var(--sora);font-size:var(--text-xl);margin:0 0 12px;color:#fff;letter-spacing:-.02em}
.fsx .bottomcta p{color:#CFE6DC;max-width:560px;margin:0 auto 26px;font-size:var(--text-md)}
.fsx .bottomcta a{display:inline-flex;align-items:center;gap:8px;background:var(--orange);color:#fff;font-weight:700;font-size:var(--text-md);padding:16px 32px;border-radius:var(--radius-md);text-decoration:none;box-shadow:0 10px 26px rgba(232,98,42,.32)}
.fsx .bottomcta a:hover{background:var(--orange2)}
.fsx .pk-extra{display:none}
.fsx .pk-extra.show{display:flex}
.fsx .pk-lift{transform:translateY(-8px)!important;box-shadow:0 18px 38px rgba(0,0,0,.14)!important;z-index:3!important;transition:transform .45s ease,box-shadow .45s ease}
.fsx .seflere-wrap{text-align:center;margin:20px 0 0}
.fsx .seflere{display:inline-flex;align-items:center;gap:8px;background:#fff;border:1.5px solid var(--dark);color:var(--dark);font-family:var(--inter);font-weight:700;font-size:var(--text-base);padding:12px 24px;border-radius:var(--radius-pill);cursor:pointer;transition:background .15s,color .15s}
.fsx .seflere:hover{background:var(--dark);color:#fff}
.fsx .dealer{background:linear-gradient(115deg,#EFF4F9,#E4EDF5);border:1.5px solid #CBDAE7;border-radius:var(--radius-md);padding:24px 26px;display:flex;gap:20px;align-items:center;flex-wrap:wrap;box-shadow:0 6px 22px rgba(70,110,150,.10)}
.fsx .dealer__ic{width:52px;height:52px;border-radius:50%;background:#4A7FA5;color:#fff;display:flex;align-items:center;justify-content:center;font-size:var(--text-xl);flex:0 0 auto;box-shadow:0 4px 12px rgba(74,127,165,.28)}
.fsx .dealer__body{flex:1;min-width:240px}
.fsx .dealer h3{font-family:var(--sora);color:#254c68;font-size:var(--text-lg);margin:0 0 6px;line-height:1.25}
.fsx .dealer p{color:#4d6273;font-size:var(--text-base);margin:0 0 14px;line-height:1.55}
.fsx .dealer__cta{display:inline-flex;align-items:center;gap:6px;background:var(--dark);color:#fff;font-weight:700;font-size:var(--text-base);padding:10px 18px;border-radius:var(--radius-pill);text-decoration:none;transition:background .15s}
.fsx .dealer__cta:hover{background:#123c30}
.fsx .prisagent__row{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:6px}
.fsx .prisagent__seg{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);border-radius:var(--radius-md);padding:12px 16px;text-align:left;max-width:250px}
.fsx .prisagent__seg b{color:#fff;font-family:var(--sora)}
.fsx .prisagent__seg span{display:block;color:#CFE6DC;font-size:var(--text-sm);margin-top:3px}
/* FOOTER-ish */
.fsx .foot{background:var(--dark);color:#CFE6DC;padding:30px 0;margin-top:20px;font-size:var(--text-base)}

/* fsx-hjaelpere (wrap + FAQ som <details> + illustration) */
.fsx .wrap { max-width: 1120px; margin: 0 auto; padding: 0 20px; }
.fsx details.fq2 summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; }
.fsx details.fq2 summary::-webkit-details-marker { display: none; }
.fsx details.fq2 summary h4 { margin: 0; }
.fsx details.fq2[open] .pm { transform: rotate(45deg); }
.fsx .pm { display: inline-block; transition: transform .15s; }


/* Header: Ladeagent-punkt (godkendt mockup-nav). Peger paa /skift-til-elbil/,
   hvor Ladeagent-tilmeldingen bor, indtil den selvstaendige side kodes. */
.header-ladeagent {
	display: inline-flex; align-items: center; margin-right: 10px;
	border: 1.5px solid var(--cta-orange, #E8622A); color: #fff;
	font-weight: 700; font-size:var(--text-base); padding: 7px 15px; border-radius:var(--radius-pill);
	text-decoration: none; transition: background .15s;
}
.header-ladeagent:hover { background: var(--cta-orange, #E8622A); color: #fff; }
@media (max-width: 520px) { .header-ladeagent { display: none; } }


/* ============================================================
 * PRODUKTKORT v4 (godkendt kort-forslag.html) - scoped .fsx
 * Fast kortbredde, aar-hjul, type-farvet kant paa top-4,
 * diskret "+ Se detaljer" med bloed fade.
 * ============================================================ */
.fsx .seclbl{font-family:var(--sora);font-weight:700;color:var(--dark);font-size:var(--text-md);margin:26px 0 12px}
/* STICKY BAR */
.fsx .cbar{position:sticky;top:12px;z-index:20;background:#fff;border:1px solid var(--border);border-radius:var(--radius-md);padding:11px 16px;display:flex;gap:18px;align-items:center;flex-wrap:wrap;box-shadow:0 6px 22px rgba(20,53,43,.08);margin-bottom:22px}
.fsx .cbar__grp{display:flex;align-items:center;gap:10px}
.fsx .cbar__lbl{font-size:var(--text-xs);font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--tmuted)}
.fsx .cbar__div{width:1px;align-self:stretch;background:var(--border);margin:2px 0}
.fsx .seg{display:inline-flex;background:var(--muted);border-radius:var(--radius-sm);padding:3px}
.fsx .seg button{border:0;background:transparent;font-family:var(--inter);font-weight:700;font-size:var(--text-sm);color:var(--tmuted);padding:7px 13px;border-radius:var(--radius-sm);cursor:pointer;transition:.12s}
.fsx .seg button.on{background:var(--dark);color:#fff}
.fsx .seg button.on[data-t="leje"]{background:#AED0BE;color:#064A35}
.fsx .seg button.on[data-t="kob"]{background:#AABFB7;color:#064A35}
.fsx .seg button.on[data-t="butik"]{background:#E0CFAD;color:#5a4a28}
.fsx .ywheel{display:inline-flex;align-items:stretch;border:1.5px solid var(--border);border-radius:var(--radius-sm);overflow:hidden;background:#fff;user-select:none}
.fsx .ywheel__field{display:flex;align-items:center;justify-content:center;padding:0 15px;font-family:var(--sora);font-weight:700;color:var(--dark);font-size:var(--text-sm);min-width:58px}
.fsx .ywheel__arrows{display:flex;flex-direction:column;border-left:1px solid var(--border)}
.fsx .ywheel__arrow{border:0;background:var(--muted);color:var(--dark);width:30px;flex:1;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0}
.fsx .ywheel__arrow:hover{background:var(--mint)}
.fsx .ywheel__arrow+.ywheel__arrow{border-top:1px solid var(--border)}
/* GRID — fast kort-bredde, venstrestillet: balloner ikke ved få kort */
.fsx .grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,290px));gap:18px;justify-content:start;align-items:stretch}
.fsx .grid.top4{grid-template-columns:repeat(4,1fr);justify-content:stretch}
.fsx .grid.list{grid-template-columns:repeat(3,1fr);justify-content:stretch}
@media(max-width:1000px){.fsx .grid.top4{grid-template-columns:repeat(2,1fr)}.fsx .grid.list{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.fsx .grid.top4,.fsx .grid.list{grid-template-columns:1fr}}
.fsx .pk3{position:relative;background:#fff;border:1px solid var(--border);border-radius:var(--radius-md);padding:22px 18px 20px;display:flex;flex-direction:column;transition:transform .18s ease,box-shadow .22s ease,border-color .18s ease}
.fsx .top4 .pk3[data-type="leje"]{border:1.5px solid #AED0BE}
.fsx .top4 .pk3[data-type="kob"]{border:1.5px solid #AABFB7}
.fsx .top4 .pk3[data-type="butik"]{border:1.5px solid #E0CFAD}
.fsx .top4 .pk3[data-type="leje"]:hover{transform:translateY(-4px);box-shadow:0 0 0 1.5px #AED0BE,0 14px 30px rgba(62,166,110,.20)}
.fsx .top4 .pk3[data-type="kob"]:hover{transform:translateY(-4px);box-shadow:0 0 0 1.5px #AABFB7,0 14px 30px rgba(27,77,62,.20)}
.fsx .top4 .pk3[data-type="butik"]:hover{transform:translateY(-4px);box-shadow:0 0 0 1.5px #E0CFAD,0 14px 30px rgba(200,169,110,.26)}
.fsx .list .pk3:hover{transform:translateY(-4px);border-color:transparent}
.fsx .list .pk3[data-type="leje"]:hover{box-shadow:0 0 0 1.5px #AED0BE,0 14px 30px rgba(62,166,110,.18)}
.fsx .list .pk3[data-type="kob"]:hover{box-shadow:0 0 0 1.5px #AABFB7,0 14px 30px rgba(27,77,62,.18)}
.fsx .list .pk3[data-type="butik"]:hover{box-shadow:0 0 0 1.5px #E0CFAD,0 14px 30px rgba(200,169,110,.24)}
.fsx .pk3__flag{position:absolute;top:0;right:16px;background:var(--dark);color:#fff;font-size:var(--text-2xs);font-weight:700;text-transform:uppercase;letter-spacing:.05em;padding:5px 10px 6px;border-radius:0 0 var(--radius-sm) var(--radius-sm)}
.fsx .pk3__top{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.fsx .pk3__navn{font-family:var(--sora);font-weight:700;font-size:var(--text-md);margin:0;color:var(--dark)}
.fsx .pk3__type{display:inline-flex;align-items:center;gap:6px;font-size:var(--text-xs);font-weight:700;color:var(--dark);background:var(--mint);padding:4px 10px;border-radius:var(--radius-pill);margin-top:6px}
.fsx .pk3__type i{width:8px;height:8px;border-radius:50%}
.fsx .pk3[data-type="leje"] .pk3__type i{background:var(--fresh)}
.fsx .pk3[data-type="kob"] .pk3__type i{background:var(--dark)}
.fsx .pk3[data-type="butik"] .pk3__type i{background:var(--gold)}
.fsx .pk3__img{width:50px;height:50px;flex:0 0 auto;border-radius:var(--radius-sm);background:var(--muted);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;color:var(--tmuted)}
.fsx .pk3__badges{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin:12px 0 0}
.fsx .ulab{font-size:var(--text-2xs);font-weight:700;text-transform:uppercase;letter-spacing:.03em;padding:3px 8px;border-radius:var(--radius-pill)}
.fsx .ulab--aff{background:var(--mint);color:var(--dark)}
.fsx .ulab--no{background:transparent;color:#9aa6a1;border:1px solid var(--border)}
.fsx .pk3__tp{display:inline-flex;align-items:center;gap:5px;font-size:var(--text-xs);font-weight:700}
.fsx .rows{margin:13px 0 0;border-top:1px solid var(--muted);padding-top:5px}
.fsx .rw{display:flex;justify-content:space-between;padding:6px 0;font-size:var(--text-sm);border-bottom:.5px solid var(--muted)}
.fsx .rw:last-child{border-bottom:0}
.fsx .rw .k{color:var(--tmuted)}
.fsx .rw .v{font-weight:600}
.fsx .rw .v.inkl{color:var(--fresh)}
.fsx .rw .v.na{color:#9aa6a1;font-weight:500}
/* detaljer: fader op og lægger sig over den grønne bjælke, meget diskret */
.fsx .details{max-height:0;opacity:0;overflow:hidden;transform:translateY(6px);transition:max-height .44s cubic-bezier(.22,.61,.36,1),opacity .38s ease-out,transform .44s cubic-bezier(.22,.61,.36,1),margin-top .44s cubic-bezier(.22,.61,.36,1)}
.fsx .details.open{max-height:220px;opacity:1;transform:none;margin-top:10px}
.fsx .details .drow{display:flex;justify-content:space-between;padding:4px 0;font-size:var(--text-xs)}
.fsx .details .drow .k{color:var(--tmuted)}
.fsx .details .drow .v{color:#3d4a44;font-weight:600}
.fsx .pk3__foot{margin-top:auto;padding-top:14px}
.fsx .total{display:flex;justify-content:space-between;align-items:center;background:var(--mint);border-radius:var(--radius-sm);padding:11px 14px}
.fsx .total .k{font-size:var(--text-xs);font-weight:600;color:var(--dark)}
.fsx .total .v{font-family:var(--sora);font-weight:700;font-size:var(--text-lg);color:var(--dark)}
.fsx .subprice{font-size:var(--text-xs);color:var(--tmuted);margin:7px 0 0;text-align:right}
.fsx .pk3__btns{margin-top:14px}
.fsx .pk3__b1{display:block;text-align:center;background:var(--orange);color:#fff;font-weight:700;font-size:var(--text-sm);padding:11px;border-radius:var(--radius-sm);text-decoration:none;transition:background .15s}
.fsx .pk3__b1:hover{background:var(--orange2)}
/* fast, næsten usynlig "Se detaljer" i bundkanten */
.fsx .det-toggle{align-self:flex-start;display:inline-flex;align-items:center;gap:5px;margin:5px 0 12px;border:0;background:none;color:var(--faint);font-family:var(--inter);font-size:var(--text-xs);font-weight:600;letter-spacing:.02em;padding:2px 0;cursor:pointer;transition:color .15s}
.fsx .det-toggle:hover{color:var(--tmuted)}
.fsx .det-toggle .pm{font-size:var(--text-sm);line-height:1}
.fsx .grid { margin-top: 4px; }
.fsx .seclbl { font-family: 'Sora', sans-serif; font-weight: 700; color: var(--moerk-groen, #0B7352); font-size:var(--text-md); margin: 26px 0 12px; }



/* FIX A: "Se flere ladebokse"-knap + personalisering (match/dim) */
.fsx .fsx-mere-wrap { text-align: center; margin: 22px 0 0; }
.fsx .fsx-mere {
	display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
	padding: 11px 24px; border-radius:var(--radius-pill); border: 1.5px solid var(--border);
	background: #fff; color: var(--dark); font-family: 'Sora', sans-serif;
	font-weight: 700; font-size:var(--text-base); transition: background .15s, border-color .15s;
}
.fsx .fsx-mere:hover { background: var(--mint); border-color: var(--fresh); }
.fsx .pk3.dim { opacity: .5; filter: saturate(.7); transition: opacity .3s, filter .3s; }
.fsx .pk3.is-match { box-shadow: 0 0 0 2px var(--fresh), 0 14px 34px rgba(62,166,110,.24); transform: translateY(-3px); }


/* FIX E: 3-panel story (mockup) - scoped .fsx */
.fsx .story{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px;margin-top:8px}
.fsx .spanel{background:#fff;border:1px solid var(--border);border-radius:var(--radius-md);overflow:hidden;opacity:0;transform:translateY(18px);box-shadow:0 6px 20px rgba(20,53,43,.07);transition:box-shadow .22s ease}
.fsx .story.in .spanel{animation:fsxSpIn .7s cubic-bezier(.2,.7,.3,1) forwards}
.fsx .story .spanel:hover{box-shadow:0 16px 36px rgba(20,53,43,.14)}
.fsx .story.in .spanel:nth-child(2){animation-delay:.22s}
.fsx .story.in .spanel:nth-child(3){animation-delay:.44s}
.fsx .spanel__art{background:#DCEBE0;padding:0;display:block;line-height:0}
.fsx .spanel__art svg{width:100%;max-width:180px;height:auto}
.fsx .spanel__img{width:100%;height:auto;display:block}
.fsx .spanel__b{padding:16px 18px 19px}
.fsx .spanel__n{font-family:'Sora',sans-serif;font-size:var(--text-xs);font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--orange)}
.fsx .spanel__b h4{font-family:'Sora',sans-serif;color:var(--dark);font-size:var(--text-md);margin:6px 0 8px}
.fsx .spanel p{color:var(--tmuted);font-size:var(--text-sm);margin:0;line-height:1.55}
.fsx .story__end{text-align:center;margin:22px 0 0;font-family:'Sora',sans-serif;font-size:var(--text-md);color:var(--dark);font-weight:600}
.fsx .story__end span{color:var(--fresh)}
.fsx .tangle{animation:fsxWig 2.6s ease-in-out infinite}
.fsx .spark{transform-origin:center;animation:fsxPulse 2.2s ease-in-out infinite}
@keyframes fsxSpIn{to{opacity:1;transform:none}}
@keyframes fsxWig{0%,100%{transform:translateX(0)}50%{transform:translateX(2.5px)}}
@keyframes fsxPulse{0%,100%{opacity:.55;transform:scale(.94)}50%{opacity:1;transform:scale(1.04)}}
@media(prefers-reduced-motion:reduce){.fsx .spanel{opacity:1;transform:none}.fsx .story.in .spanel{animation:none}.fsx .tangle,.fsx .spark{animation:none}}


/* FIX D: skift-til-elbil linker videre til Ladeagenten (i stedet for prisagent-form) */
.skift-el__agent-cta{ display:inline-flex; align-items:center; gap:8px; margin-top:6px; padding:13px 24px; border-radius:var(--radius-pill); background:var(--cta,#E8622A); color:#fff; font-family:var(--font-display,'Sora'); font-weight:700; font-size:var(--text-base); text-decoration:none; transition:background .15s; }
.skift-el__agent-cta:hover{ background:var(--cta-hover,#D0521C); color:#fff; }


/* ============================================================
 * LADEAGENTEN-SIDE (/ladeagenten/) - porteret fra godkendt mockup,
 * alt scoped under .la saa intet laekker til resten af temaet.
 * Backend (tilmelding/mail/cron) er Fase 13 - siden er landing + design.
 * ============================================================ */
.la{--dark:#0B7352;--fresh:#3EA66E;--mint:#EAF6F0;--bg:#F7F9F8;--muted:#F1F4F2;--text:#1A1A1A;--tmuted:#5B6B65;--border:#E1E7E4;--orange:#E8622A;--orange2:#D0521C;--sora:'Sora',sans-serif;--inter:'Inter',sans-serif--sora:'Sora',sans-serif;--inter:'Inter',sans-serif;font-family:var(--inter);color:var(--text)}
.la{margin:0;background:var(--bg);color:var(--text);font-family:var(--inter);line-height:1.55}
.la h1,.la h2,.la h3,.la h4{font-family:var(--sora);letter-spacing:-.02em}
.la .wrap{max-width:1120px;margin:0 auto;padding:0 24px}
.la .lm{font-family:var(--sora);font-weight:600;letter-spacing:-.02em}
.la .lm em{font-style:normal;font-weight:700;color:var(--fresh)}
.la .hide{display:none}
.la .top{background:radial-gradient(120% 130% at 50% -20%,#0F8A63 0%,#0B7352 55%,#064A35 100%);color:#fff;padding:40px 0 96px}
.la .crumb{color:#BFE8D3;font-size:var(--text-base);margin:0 0 14px}
.la .top h1{font-size:var(--text-2xl);margin:0 0 12px;line-height:1.12;font-weight:700}
.la .top p{color:#CFE6DC;max-width:580px;margin:0;font-size:var(--text-md)}
.la .pills{display:flex;gap:8px;flex-wrap:wrap;margin-top:20px}
.la .pill{display:inline-flex;align-items:center;gap:7px;background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.17);color:#e7f4ee;font-size:var(--text-sm);font-weight:600;padding:7px 14px;border-radius:var(--radius-pill)}
.la .pill .d{width:6px;height:6px;border-radius:50%;background:#7FD4A9}
.la .grid{display:grid;grid-template-columns:1.15fr .85fr;gap:28px;align-items:start;padding-bottom:48px;margin-top:-64px;position:relative;z-index:2}
.la .card{background:#fff;border:1px solid var(--border);border-radius:var(--radius-md);padding:30px;box-shadow:0 16px 44px rgba(20,53,43,.12)}
.la .card__kicker{font-size:var(--text-xs);font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--fresh);margin:0 0 5px}
.la .card__h{font-size:var(--text-lg);margin:0 0 26px;color:var(--dark)}
.la .q{margin:0 0 26px}
.la .q__h{display:flex;align-items:center;gap:11px;margin:0 0 6px}
.la .q__n{width:26px;height:26px;border-radius:50%;background:var(--dark);color:#fff;font-family:var(--sora);font-weight:700;font-size:var(--text-sm);display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.la .q__t{font-family:var(--sora);font-weight:700;font-size:var(--text-md);color:var(--dark)}
.la .ind{margin-left:37px}
.la .q__hint{color:var(--tmuted);font-size:var(--text-sm);margin:0 0 13px}
.la .sublbl{font-size:var(--text-xs);font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--tmuted);margin:0 0 7px}
.la .row{display:flex;gap:16px;flex-wrap:wrap;margin-bottom:16px}
.la .hide.hide{display:none}
.la .plate{flex:0 1 210px;min-width:170px;display:flex;border:2px solid #111;border-radius:var(--radius-sm);overflow:hidden;background:#fff}
.la .plate__eu{background:#147a63;color:#fff;font-weight:700;font-size:var(--text-xs);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0 9px;line-height:1.1}
.la .plate__eu small{color:#ffd200;font-size:var(--text-2xs)}
.la .plate input{flex:1;min-width:0;border:0;font-family:var(--sora);font-weight:700;font-size:var(--text-md);letter-spacing:.1em;text-transform:uppercase;padding:12px;color:#111}
.la .plate input:focus{outline:none}
.la .plate button{border:0;background:#147a63;color:#fff;padding:0 15px;cursor:pointer;display:flex;align-items:center}
.la .plate button:hover{background:#0f5f4d}
.la .addr{flex:1;min-width:190px;border:1.5px solid var(--border);border-radius:var(--radius-sm);padding:13px;font-family:var(--inter);font-size:var(--text-base)}
.la .addr:focus{outline:none;border-color:var(--fresh)}
.la .loc{border:0;background:#147a63;color:#fff;font-family:var(--inter);font-weight:700;font-size:var(--text-sm);padding:0 16px;border-radius:var(--radius-sm);cursor:pointer;display:inline-flex;align-items:center;gap:7px;white-space:nowrap;transition:.15s}
.la .loc:hover{background:#0f5f4d}
.la .loc svg{width:15px;height:15px}
.la .found{border:1px solid #CFE7DB;background:var(--mint);border-radius:var(--radius-md);padding:16px 18px;animation:pop .5s cubic-bezier(.2,.7,.3,1)}
.la from{opacity:0;transform:translateY(-10px)}
.la to{opacity:1;transform:none}
.la .fr{display:flex;align-items:center;gap:9px;font-size:var(--text-base);color:#3d4f48;margin-bottom:7px}
.la .fr b{color:var(--dark)}
.la .fr .ok{width:19px;height:19px;border-radius:50%;background:var(--fresh);color:#fff;display:flex;align-items:center;justify-content:center;font-size:var(--text-xs);flex:0 0 auto}
.la .match{background:#fff;border:1px solid #CFE7DB;border-radius:var(--radius-md);padding:14px 15px;margin-top:13px;display:flex;align-items:center;gap:13px;flex-wrap:wrap}
.la .match__ic{width:42px;height:42px;border-radius:var(--radius-sm);background:var(--mint);color:var(--dark);display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.la .match__b{flex:1;min-width:170px}
.la .match__lbl{display:inline-block;background:var(--fresh);color:#06301f;font-size:var(--text-2xs);font-weight:700;text-transform:uppercase;letter-spacing:.06em;padding:3px 9px;border-radius:var(--radius-pill);margin-bottom:6px}
.la .match__t{font-family:var(--sora);font-weight:700;color:var(--dark);font-size:var(--text-md);margin:0}
.la .match__s{color:#4c5a54;font-size:var(--text-sm);margin:3px 0 0}
.la .match__re{color:var(--fresh);font-weight:700;font-size:var(--text-sm);text-decoration:none;white-space:nowrap}
.la .lean{font-size:var(--text-sm);color:var(--tmuted);margin:12px 0 0}
.la .lean a{color:var(--fresh);font-weight:600}
.la .chips{display:flex;gap:8px;flex-wrap:wrap}
.la .chip{background:#fff;border:1.5px solid var(--border);color:var(--text);font-family:var(--inter);font-weight:600;font-size:var(--text-base);padding:10px 16px;border-radius:var(--radius-pill);cursor:pointer;transition:.15s}
.la .chip:hover{border-color:#BFE3D0}
.la .chip.on{background:var(--dark);border-color:var(--dark);color:#fff}
.la .el{display:flex;align-items:center;gap:14px;border:1px solid var(--border);border-radius:var(--radius-md);padding:14px 16px;margin:0 0 26px 37px}
.la .el__t{flex:1;min-width:0}
.la .el__t b{font-family:var(--sora);color:var(--dark);font-size:var(--text-base)}
.la .el__t span{display:block;color:var(--tmuted);font-size:var(--text-sm);margin-top:3px}
.la .sw{position:relative;display:inline-block;width:48px;height:28px;flex:0 0 auto;cursor:pointer}
.la .sw input{display:none}
.la .sw .tr{position:absolute;inset:0;background:#cdd8d3;border-radius:var(--radius-pill);transition:.2s}
.la .sw .kn{position:absolute;top:3px;left:3px;width:22px;height:22px;background:#fff;border-radius:50%;transition:.2s;box-shadow:0 1px 3px rgba(0,0,0,.25)}
.la .sw input:checked ~ .tr{background:var(--fresh)}
.la .sw input:checked ~ .kn{transform:translateX(20px)}
.la .mail{display:flex;gap:10px;flex-wrap:wrap}
.la .mail input{flex:1;min-width:200px;border:1.5px solid var(--border);border-radius:var(--radius-md);padding:14px;font-family:var(--inter);font-size:var(--text-base)}
.la .mail input:focus{outline:none;border-color:var(--fresh)}
.la .go{border:0;background:var(--orange);color:#fff;font-family:var(--inter);font-weight:700;font-size:var(--text-base);padding:14px 24px;border-radius:var(--radius-md);cursor:pointer;white-space:nowrap;transition:.15s;box-shadow:0 6px 18px rgba(232,98,42,.28)}
.la .go:hover{background:var(--orange2)}
.la .fine{color:var(--tmuted);font-size:var(--text-xs);margin:14px 0 0}
.la .fine a{color:var(--fresh)}
.la .side{position:sticky;top:22px}
.la .side__cap{text-align:center;font-size:var(--text-xs);font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--tmuted);margin:0 0 14px}
.la .phone{width:302px;margin:0 auto;background:#064A35;border-radius:36px;padding:11px;box-shadow:0 22px 50px rgba(20,53,43,.28)}
.la .screen{background:#fff;border-radius:var(--radius-md);overflow:hidden}
.la .status{display:flex;justify-content:space-between;align-items:center;padding:11px 18px 7px;font-size:var(--text-xs);font-weight:600;color:#8a958f}
.la .mhead{display:flex;align-items:center;gap:10px;padding:12px 18px;border-top:1px solid var(--muted);border-bottom:1px solid var(--muted)}
.la .mav{width:32px;height:32px;border-radius:var(--radius-sm);background:var(--dark);color:#fff;font-family:var(--sora);font-weight:700;font-size:var(--text-xs);display:flex;align-items:center;justify-content:center}
.la .mfrom b{font-size:var(--text-sm);display:block;color:var(--text)}
.la .mfrom span{font-size:var(--text-xs);color:var(--tmuted)}
.la .mbody{padding:20px 18px 22px}
.la .msubj{font-family:var(--sora);font-weight:700;color:var(--dark);font-size:var(--text-md);margin:0 0 16px;line-height:1.35}
.la .mhi{font-size:var(--text-base);margin:0 0 4px}
.la .mjoke{font-size:var(--text-xs);color:var(--tmuted);margin:0 0 16px;font-style:italic}
.la .mrow{display:flex;align-items:center;gap:12px;border:1px solid var(--border);border-radius:var(--radius-md);padding:13px;margin-bottom:18px}
.la .mic{width:38px;height:38px;border-radius:var(--radius-sm);background:var(--mint);color:var(--dark);display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.la .mn{font-weight:700;font-size:var(--text-base)}
.la .mp{font-size:var(--text-sm);color:var(--tmuted);margin-top:2px}
.la .mp s{color:#b3bdb8}
.la .mp b{color:var(--fresh);font-size:var(--text-md)}
.la .mcta{display:block;text-align:center;background:var(--fresh);color:#06301f;font-weight:700;font-size:var(--text-base);padding:13px;border-radius:var(--radius-sm);text-decoration:none}
.la .mfoot{font-size:var(--text-xs);color:var(--tmuted);text-align:center;margin:16px 0 0}
.la .trust{background:#fff;border:1px solid var(--border);border-radius:var(--radius-md);padding:6px 18px;margin-top:20px}
.la .ti{display:flex;gap:10px;padding:13px 0;border-bottom:1px solid var(--muted);font-size:var(--text-sm);color:#4c5a54;align-items:flex-start}
.la .ti:last-child{border-bottom:0}
.la .ti svg{color:var(--fresh);flex:0 0 auto;margin-top:2px}
.la .ti b{color:var(--dark)}
.la .inline-demo{max-width:760px;margin:0 auto 40px;padding:0 24px}
.la .inline-demo h2{font-size:var(--text-lg);color:var(--dark);margin:0 0 6px}
.la .inline-demo .sub{color:var(--tmuted);font-size:var(--text-base);margin:0 0 16px}
.la .oneline{background:#fff;border:1px solid var(--border);border-radius:var(--radius-md);padding:18px 20px;display:flex;gap:12px;align-items:center;flex-wrap:wrap;box-shadow:0 8px 24px rgba(20,53,43,.07)}
.la .oneline__t{flex:1;min-width:230px}
.la .oneline__t b{font-family:var(--sora);color:var(--dark);display:block;font-size:var(--text-md)}
.la .oneline__t span{color:var(--tmuted);font-size:var(--text-sm)}
.la .oneline input{border:1.5px solid var(--border);border-radius:var(--radius-sm);padding:12px;font-family:var(--inter);font-size:var(--text-base);min-width:160px;flex:1}
.la .oneline input:focus{outline:none;border-color:var(--fresh)}
.la .oneline button{border:0;background:var(--orange);color:#fff;font-weight:700;font-family:var(--inter);font-size:var(--text-base);padding:12px 20px;border-radius:var(--radius-sm);cursor:pointer;white-space:nowrap}
.la .oneline button:hover{background:var(--orange2)}
.la .faq{max-width:720px;margin:0 auto 46px}
.la .faq h2{font-size:var(--text-lg);color:var(--dark);margin:0 0 14px}
.la .fq{background:#fff;border:1px solid var(--border);border-radius:var(--radius-md);padding:15px 18px;margin-bottom:10px;cursor:pointer}
.la .fq h4{margin:0;font-size:var(--text-md);color:var(--dark);display:flex;justify-content:space-between;gap:10px;align-items:center}
.la .fq .pm{color:var(--fresh);font-size:var(--text-lg);line-height:1}
.la .fq p{color:#4c5a54;font-size:var(--text-base);margin:10px 0 0;display:none;line-height:1.6}
.la .fq.open p{display:block}
.la .foot{background:var(--dark);color:#CFE6DC;padding:26px 0;font-size:var(--text-base)}
.la .grid{grid-template-columns:1fr}
.la .side{position:static;margin-top:8px}
.la .top h1{font-size:var(--text-xl)}
.la .card{padding:20px}
.la .ind, .la .el{margin-left:0}
@keyframes pop{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}
@media(max-width:900px){.la .grid{grid-template-columns:1fr}
.la .side{position:static;margin-top:8px}}
@media(max-width:560px){.la .top h1{font-size:var(--text-xl)}
.la .card{padding:20px}
.la .ind, .la .el{margin-left:0}}




/* Forsidetegningens kort: meget svag forhoejning, samme overgang som
   guidekortene lige under. Det groenne skaer bag kortet er fjernet
   23/9 2026 efter Henriks oenske. */
.fsx .story-wrap{ position:relative; max-width:640px; margin:10px auto 0; }

.fsx .story-fig{
	position:relative; z-index:1; margin:0; background:linear-gradient(135deg,#EAF6F0,#D8ECE1); line-height:0;
	border:1px solid rgba(255,255,255,.7); border-radius:var(--radius-md); overflow:hidden;
	box-shadow:0 1px 2px rgba(20,53,43,.05), 0 8px 18px -8px rgba(20,53,43,.14);
	transition:transform .25s ease, box-shadow .25s ease;
}
.fsx .story-fig:hover{ transform:translateY(-4px); box-shadow:0 2px 4px rgba(20,53,43,.06), 0 14px 26px -10px rgba(20,53,43,.20); }
.fsx .story-fig .story-ill{ width:100%; height:auto; display:block; }
@media (max-width:560px){ .fsx .story-wrap{ max-width:100%; } }
@media (prefers-reduced-motion:reduce){ .fsx .story-fig{ transition:none; } .fsx .story-fig:hover{ transform:none; } }


/* FIX: "Se flere" glide-ud-effekt (mockup) + type-farvet filter */
.fsx .pk-extra{display:none}
.fsx .pk-extra.show{display:flex}
.fsx .pk-lift{transform:translateY(-8px)!important;box-shadow:0 18px 38px rgba(0,0,0,.14)!important;z-index:3!important;transition:transform .45s ease,box-shadow .45s ease}


/* ============================================================
 * FASE 4B - STRUKTUR- OG DESIGNFUNDAMENT
 * ============================================================
 * Denne blok ligger BEVIDST sidst i filen, saa den vinder over
 * aeldre regler laengere oppe. (Indfoert efter to fejl, hvor nye
 * regler blev overskrevet af aeldre - se beslutningsloggen 28/7.)
 *
 * Indhold:
 *   1. Sektionsrytme - lille luft indeni, stor luft imellem
 *   2. Sektionsbaand - skifter ved emneskift
 *   3. Én regel for orange
 *   4. Kontrast- og laesbarhedsrettelser
 *   5. Konkrete fejl fra gennemgangen 28/7
 * ============================================================ */

/* ------------------------------------------------------------
 * 1. SEKTIONSRYTME
 * Gestalts naerhedsprincip: ting der staar taet, hoerer sammen.
 * Naar alt har samme afstand, kan oejet ikke gruppere noget.
 * To sektioner giver tilsammen 60-96px imellem sig; en overskrift
 * staar 20-24px fra sit eget indhold. Forholdet er cirka 1:4.
 * ------------------------------------------------------------ */
section.blk,
.udb-hero,
.gd-hero,
.gd-pillars,
.gd-bottom,
.hjornesten__hero,
.hjornesten__indhold,
.hjornesten__relaterede,
.ladeboks-guide,
.la .inline-demo,
.la .faq {
	padding-top: var(--section-y);
	padding-bottom: var(--section-y);
}

/* Sektioner med egen baggrund maa ikke ogsaa have ydre margin,
   ellers braekker baandet. Rytmen kommer fra padding alene. */
.gd-pillars,
.gd-bottom,
.la .inline-demo,
.la .faq {
	margin-top: 0;
	margin-bottom: 0;
}

/* Luft INDENI: overskrift -> undertekst -> indhold */
.fsx .blk__head { margin-bottom: var(--stack-tight); }
.fsx .blk__sub  { margin: 0 0 var(--stack); }
.hjornesten__indhold .entry-content h2 { margin-top: var(--space-7); margin-bottom: var(--stack); }
.hjornesten__indhold .entry-content h3 { margin-top: var(--space-5); margin-bottom: var(--stack-tight); }

/* ------------------------------------------------------------
 * 2. SEKTIONSBAAND
 * Baandet skifter, naar EMNET skifter - ikke hver anden sektion.
 * 15 sektioner i seks omraader: find boksen / hvad koster det /
 * hvem koeber du hos / kan du stole paa os / viden / slut.
 * Otte skiftevise baand ville blive et zebramoenster.
 * ------------------------------------------------------------ */
section.blk--band { background: var(--band-bg); }

/* ------------------------------------------------------------
 * 3. ÉN REGEL FOR ORANGE
 * Orange betyder ÉN ting paa hele sitet: "det her foerer dig til
 * et tilbud hos en udbyder". Det er affiliate-handlingen - den,
 * der tjener penge. Alt andet, der raabte i orange, er daempet,
 * saa farven ikke udvandes.
 *
 * BLIVER ORANGE:  produktkortenes koeb/leje-knapper (.pk3__b1),
 *                 "Gaa til udbyder" paa udbyder-kort og -sider.
 * BLIVER GROENT:  alt der foerer laengere ind paa sitet -
 *                 klaebende bjaelke, Ladeagent-knapper, menu.
 * ------------------------------------------------------------ */

/* Den klaebende mini-bjaelke: intern vej til motoren -> groen */
.uu-mini .uu-orange,
.uu-side .uu-orange {
	background: var(--color-primary-dark);
	color: #fff;
}
.uu-mini .uu-orange:hover,
.uu-side .uu-orange:hover { background: #123c30; color: #fff; }

/* Ladeagent-baandets knap: tilmelding, ikke et tilbud -> groen */
.fsx .prisagent__cta {
	background: var(--color-primary-dark);
	box-shadow: 0 10px 26px rgba(27, 77, 62, .28);
}
.fsx .prisagent__cta:hover { background: #123c30; }

/* "Nu"-badget er en oplysning, ikke en handling -> groen */
.fsx .gbadge--nu { background: var(--color-primary-dark); color: #fff; }

/* Menuens Ladeagent-punkt: et menupunkt, ikke en hovedhandling */
.header-ladeagent {
	border-color: rgba(255,255,255,.45);
	color: #fff;
}
.header-ladeagent:hover { border-color: #fff; background: rgba(255,255,255,.08); }

/* Affiliate-knapperne bekraeftes eksplicit, saa de ikke rammes
   af en fremtidig oprydning i de groenne regler. */
.fsx .pk3__b1,
.uu-pk .uu-orange,
.uboks__go {
	background: var(--color-action);
	color: var(--color-action-text);
}
.fsx .pk3__b1:hover,
.uu-pk .uu-orange:hover,
.uboks__go:hover { background: var(--color-action-hover); color: var(--color-action-text); }

/* ------------------------------------------------------------
 * 4. KONTRAST
 * Ladeagentens H1 stod i naesten sort (#1A1A1A) paa den
 * moerkegroenne hero = 1,80:1. WCAG AA kraever 3:1 for store
 * overskrifter. Baggrunden tegnes af en background-image, saa
 * H1 arvede sidens globale tekstfarve.
 * ------------------------------------------------------------ */
.la .top h1,
.la .top h1 * { color: #fff; }
.la .top .brodkrumme,
.la .top .brodkrumme a { color: var(--color-text-on-dark-muted); }

/* ------------------------------------------------------------
 * 5. KONKRETE FEJL FRA GENNEMGANGEN 28/7
 * ------------------------------------------------------------ */

/* Produktkortenes titler braekkede over én linje i nogle kort og
   to i andre, saa raekken blev ujaevn. Titlen faar nu fast hoejde
   paa to linjer og afkortes med ellipse, hvis den er laengere. */
.fsx .pk3 h3,
.fsx .pk3__navn {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	min-height: 2.6em;
	line-height: 1.3;
}

/* Den klaebende bjaelke maa ikke vise samme knap som menuen.
   Naar menuen er synlig oeverst paa siden, er bjaelken skjult -
   den glider foerst frem ved scroll (styres i main.js). Her
   sikres, at de to aldrig staar med samme opfordring: bjaelkens
   knap er nu groen (se punkt 3), saa der kun er ét orange kald
   paa skaermen ad gangen. */
.uu-mini__in { gap: var(--space-3); }

/* ------------------------------------------------------------
 * 6. UDBYDERE-OVERSIGTEN - ny struktur
 * Siden havde ÉN H1 og derefter ingen overskrifter overhovedet.
 * Griddet er nu en rigtig sektion med H2, og de ni udbyderkorts
 * navne er H3. Udseendet er uaendret - kun strukturen er ny.
 * ------------------------------------------------------------ */
.udb-sek { padding-top: var(--section-y); padding-bottom: var(--section-y); }

.udb-wrap .blk__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--space-3);
	flex-wrap: wrap;
	margin-bottom: var(--stack);
}
.udb-wrap .blk__head h2 {
	font-family: var(--font-display);
	font-size: var(--text-xl);
	font-weight: 700;
	color: var(--color-primary-dark);
	margin: 0;
	letter-spacing: -.02em;
}
.udb-wrap .udb-cnt { color: var(--color-text-muted); font-size: var(--text-sm); }

/* Kortnavnet var et <p> og er nu et <h3> - samme udseende */
h3.pk-u__name { font-size: var(--text-md); font-weight: 700; margin: 0; line-height: 1.25; }

/* Trust-boksens overskrift var et <b> og er nu et <h2> - samme udseende */
.udb-trust__t {
	font-family: var(--font-body);
	font-size: inherit;
	font-weight: 700;
	margin: 0 0 var(--space-1);
	color: inherit;
	display: block;
	letter-spacing: 0;
}

/* Orange kun naar knappen foerer til en udbyder, vi har aftale med.
   Uden aftale foerer den til vores egen underside - altsaa groen. */
.pk-u__b1:not(.pk-u__b1--aff) {
	background: var(--color-primary-dark);
	color: #fff;
	border-color: var(--color-primary-dark);
}
.pk-u__b1:not(.pk-u__b1--aff):hover { background: #123c30; color: #fff; }
.pk-u__b1--aff { background: var(--color-action); color: var(--color-action-text); }
.pk-u__b1--aff:hover { background: var(--color-action-hover); color: var(--color-action-text); }

/* ------------------------------------------------------------
 * 7. EFTERKONTROL - rettelser fundet ved verifikation live
 * ------------------------------------------------------------ */

/* Slut-CTA og /ladeboks/-heroens knap foerer ind i motoren, ikke ud
   til en udbyder. De skal derfor vaere groenne som resten af de
   interne veje - ellers er der to slags orange paa sitet. */
.fsx .bottomcta a,
.archive-header__cta {
	background: var(--color-primary-dark);
	box-shadow: 0 10px 26px rgba(27, 77, 62, .28);
}
.fsx .bottomcta a:hover,
.archive-header__cta:hover { background: #123c30; color: #fff; }

/* Trust-boksen paa udbydere-siden foelger nu samme rytme som de
   oevrige sektioner. */
.udb-trust { padding-top: var(--section-y); padding-bottom: var(--section-y); }

/* ------------------------------------------------------------
 * 8. TO ENS OPFORDRINGER PAA SKAERMEN SAMTIDIG
 * Den klaebende mini-bjaelke og menuens CTA viste begge
 * "Find din ladeboks" paa én gang. To identiske opfordringer
 * faar siden til at virke saelgende frem for raadgivende.
 *
 * Aarsagen: menuen er sticky og viser CTA'en hele tiden paa
 * desktop, saa mini-bjaelken har intet at tilfoeje. PAA MOBIL
 * ligger menuens CTA inde bag burgeren og er ikke synlig -
 * der goer bjaelken netop nytte ("altid ét tap til motoren,
 * staerkest paa mobil", beslutningsloggen 18/7).
 *
 * Derfor: bjaelken vises kun, hvor menuens CTA er skjult.
 * ------------------------------------------------------------ */
@media (min-width: 821px) {
	.uu-mini { display: none !important; }
}

/* ------------------------------------------------------------
 * 9. BILLEDER OG LOGOER PAA FORSIDEN
 * Forsiden viste et tegnet ikon i produktkortene og et bogstav
 * i udbyder-kortene, fordi skabelonen blev skrevet, da der kun
 * fandtes testdata uden billeder. Nu hentes det rigtige billede,
 * med logo og derefter ikon/bogstav som fallback.
 * ------------------------------------------------------------ */
.fsx .pk3__img--foto {
	padding: 0;
	overflow: hidden;
	background: #fff;
	border: 1px solid var(--color-border);
}
.fsx .pk3__img--foto img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
	padding: var(--space-1);
}

/* Logo-striben: rigtige logoer i graatone, farve ved hover */
.fsx .logochip--logo {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: var(--space-2) var(--space-3);
	min-height: 44px;
	background: #fff;
}
.fsx .logochip--logo img {
	max-height: 26px;
	max-width: 110px;
	width: auto;
	height: auto;
	object-fit: contain;
	filter: grayscale(1);
	opacity: .72;
	transition: filter .18s ease, opacity .18s ease;
}
.fsx .logochip--logo:hover img { filter: none; opacity: 1; }

/* "Bedste udbydere"-kortene */
.fsx .udb__logo--img {
	background: #fff;
	border: 1px solid var(--color-border);
	overflow: hidden;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: var(--space-1);
}
.fsx .udb__logo--img img {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
	display: block;
}

/* ============================================================
 * UDBYDER-STATUS: aktiv / karantæne / ophørt (2/8, karantæne-rammen 19/7)
 * ============================================================
 * Ærlig status vises på udbyder-siden (boks med dato + kilde) og
 * på oversigtens kort (mærke). Ved karantæne/ophørt bruges
 * affiliate-linket ikke: alle veje er interne og dermed mørkegrønne
 * — jf. "ÉN REGEL FOR ORANGE" ovenfor.
 * ------------------------------------------------------------ */

/* Statusboksen under heroen på udbyder-siden */
.uu-status { background: #fff; border-radius: var(--radius-md); padding: 16px 20px; margin-top: 22px; border-left: 5px solid #C8A96E; color: var(--color-text, #2A3B35); }
.uu-status--ophoert { border-left-color: #6B7B76; }
.uu-status__t { font-weight: 700; color: var(--color-primary-dark, #0B7352); font-size: var(--text-base); margin: 0 0 4px; }
.uu-status p { margin: 0 0 6px; font-size: var(--text-sm); color: var(--color-text, #2A3B35); }
.uu-status__meta { font-size: var(--text-xs); color: var(--color-text-muted, #6B7B76); }
.uu-status__meta a { color: inherit; text-decoration: underline; }
.uu-status__alt { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; font-weight: 700; font-size: var(--text-sm); color: var(--color-primary-dark, #0B7352); text-decoration: none; }
.uu-status__alt:hover { color: #123c30; text-decoration: underline; }

/* Interne CTA'er i affiliate-knappens ramme: mørkegrøn, aldrig orange.
   Sat med tre klasser, så den vinder over ".uu-pk .uu-orange"-bekræftelsen. */
.uu-orange.uu-cta--intern,
.uu-pk .uu-orange.uu-cta--intern,
.uu-side .uu-orange.uu-cta--intern,
.uu-mini .uu-orange.uu-cta--intern { background: var(--color-primary-dark, #0B7352); color: #fff; }
.uu-orange.uu-cta--intern:hover,
.uu-pk .uu-orange.uu-cta--intern:hover,
.uu-side .uu-orange.uu-cta--intern:hover,
.uu-mini .uu-orange.uu-cta--intern:hover { background: #123c30; color: #fff; }

/* Status-mærke på udbyder-oversigtens kort (dæmpet gylden — en oplysning, ikke en handling) */
.ulab--status { background: #FBF3E2; color: #7a6027; border: 1px solid #E7D4A8; font-weight: 700; }

/* ============================================================
 * PRODUKTKORTETS UDBYDER-GREB (2/8 nat — mockup v5 godkendt)
 * ============================================================
 * Farveregel på kortet: MINT/GRØN = oplysning ("det her ved vi")
 * · ORANGE-FAMILIEN = veje til udbyderen (mættet #E8622A = selve
 * affiliate-knappen, mild #FFF3E0 = "+N"-brikken på billedet)
 * · MØRKEGRØN = interne veje ("Se detaljer" m.m.).
 * Erstatter den tidligere "X har N ladebokse"-bundlinje (fjernet).
 * ------------------------------------------------------------ */

/* Klikbare Trustpilot-stjerner allerøverst på kortet — kun stjerner
   + score, ingen etikette (Henriks beslutning). Fører til udbyder-
   siden, hvor scoren vises i sin fulde sammenhæng. */
.pk-tp { display: inline-flex; margin: -3px 0 5px; text-decoration: none; }
.pk-tp:hover .tp__num { text-decoration: underline; }

/* "+N"-brikken på billedhjørnet: mild orange, intern vej til
   udbyder-siden. Vises kun, når udbyderen har mindst to bokse. */
.plus-brik { position: absolute; bottom: -7px; right: -7px; background: #FFF3E0; color: #9A6020; border: 2px solid #fff; font-size: 11px; font-weight: 800; padding: 3px 8px; border-radius: 999px; text-decoration: none; line-height: 1.2; box-shadow: 0 1px 4px rgba(0,0,0,.12); z-index: 2; }
.plus-brik:hover { background: #FBE8CE; color: #7a4c15; }

/* Forsidens pk3-kort: billedet vokser fra 50 til 100 px i luften,
   som TP-flytningen frigør; wrapperen bærer "+N"-brikken. */
.pk3__imgwrap { position: relative; flex: 0 0 auto; }
.fsx .pk3__img { width: 84px; height: 84px; }

/* Billed-zoom (3/8): billedet vokser let ved hover/berøring — et smule
   mindre grundstørrelse på alle kort, zoom giver nærbilledet på forlangende.
   Respekterer prefers-reduced-motion som alle sitets mikro-animationer. */
.pk-img-zoom { transition: transform .18s ease, box-shadow .18s ease; }
.pk-img-zoom:hover,
.pk-img-zoom:focus-within { transform: scale(1.18); box-shadow: 0 6px 18px rgba(0,0,0,.16); z-index: 3; }
.plus-brik { z-index: 4; }
@media (prefers-reduced-motion: reduce) {
	.pk-img-zoom { transition: none; }
	.pk-img-zoom:hover, .pk-img-zoom:focus-within { transform: none; box-shadow: none; }
}

/* Svar-værdier i kortets rækker: grøn TEKST, ingen boks (2/8 nat).
   Ordene (inkl. · tilvalg · krævet · valgfri · ingen) bærer selv
   betydningen — advarselsfarven på tilvalg/krævet er bevidst udgået. */
.fsx .rw .v.vchip,
.fsx .drow .v.vchip { color: #3EA66E; font-weight: 600; background: none; padding: 0; }

/* ============================================================
 * DE TRE KORTTYPER PÅ /udbydere/ (besluttet 3/8, bygget 4/8)
 * ============================================================
 * Farvereglen står ved magt: ORANGE = en vej UD til en udbyder ·
 * MØRKEGRØN = en intern vej · MINT/GRØN = en oplysning.
 * Oversigtens kort linker nu KUN indad, så der findes ikke længere
 * en orange knap på /udbydere/. Reglen brydes ikke — orange er
 * simpelthen ikke i brug her, og derfor lyver den aldrig.
 *
 *  1) .pk-u--aktiv        aktiv aftale — én mørkegrøn knap ind på undersiden
 *  2) .pk-u--uden_aftale  findes, ingen aftale — pris, emblem, INGEN knap
 *  3) .pk-u--ophoert      opkøbt/ophørt — dæmpet kort, ingen pris
 * ------------------------------------------------------------ */

/* Navnet er nu et link. Det skal ligne overskriften, ikke et link —
   understregningen kommer først ved hover. */
.pk-u__name a { color: inherit; text-decoration: none; }
.pk-u__name a:hover { text-decoration: underline; }

/* --- KORTTYPE 2: findes, men ingen aftale ---------------------- */
/* Emblemet er en OPLYSNING, ikke en handling: dæmpet, uden knapform,
   i den neutrale grå — aldrig i orange- eller grøn-familien. */
.ulab--emblem {
	background: #F1F4F2;
	color: #5D6B66;
	border: 1px solid var(--color-border, #E3E9E6);
	font-weight: 700;
	text-transform: none;
	letter-spacing: 0;
}

/* Vejen videre ligger under kortets indhold — tydeligt adskilt, så
   den ikke læses som en knap PÅ kortet. */
.pk-u__vej {
	border-top: 1px solid var(--color-border, #E3E9E6);
	background: #FAFBFA;
	padding: 10px 13px 11px;
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin-top: auto;
}
.pk-u__vej1 {
	font-size: var(--text-sm, 14px);
	font-weight: 700;
	color: var(--color-primary-dark, #0B7352);
	text-decoration: none;
}
.pk-u__vej1:hover { text-decoration: underline; }
.pk-u__vej1:hover .pk-u__arrow { transform: translateX(3px); }
.pk-u__vej2 {
	font-size: var(--text-xs, 13px);
	color: var(--color-text-muted, #6B7B76);
	text-decoration: none;
}
.pk-u__vej2:hover { color: var(--color-primary-dark, #0B7352); text-decoration: underline; }

/* Kortet skal kunne rumme vej-striben i bunden. */
.pk-u--uden_aftale { flex-direction: column; }
.pk-u--uden_aftale .pk-u__body { flex: 1 1 auto; }

/* --- KORTTYPE 3: opkøbt eller ophørt --------------------------- */
/* Dæmpet, så øjet straks ser, at her er intet at hente. Logoet
   affarves let — men aldrig helt, så udbyderen stadig kan genkendes. */
.pk-u--ophoert { background: #FBFCFB; }
.pk-u--ophoert .pk-u__img img { filter: grayscale(.65); opacity: .82; }
.pk-u--ophoert .pk-u__name a { color: #4A5A54; }
.pk-u--ophoert .pk-u__type { color: #8A968F; }
.pk-u--ophoert .pk-u__b1 { background: #5D6B66; }
.pk-u--ophoert .pk-u__b1:hover { background: #4A5A54; }

/* Status-mærket på et opkøbt kort er gyldent som på undersiden —
   samme signal to steder, så brugeren genkender det. */
.pk-u--ophoert .ulab--status { background: #FBF3E2; color: #7a6027; border: 1px solid #E7D4A8; }

/* --- Undersidens produktkort uden aftale ----------------------- */
.uu-pk__emblem {
	display: inline-block;
	align-self: flex-start;
	background: #F1F4F2;
	color: #5D6B66;
	border: 1px solid var(--color-border, #E3E9E6);
	border-radius: var(--radius-pill, 999px);
	font-size: var(--text-2xs, 11px);
	font-weight: 700;
	padding: 4px 10px;
	margin-bottom: 8px;
}
.uu-pk__vej { display: flex; flex-direction: column; gap: 3px; }
.uu-pk__vej1 { font-size: var(--text-sm, 14px); font-weight: 700; color: var(--color-primary-dark, #0B7352); text-decoration: none; }
.uu-pk__vej1:hover { text-decoration: underline; }
.uu-pk__vej2 { font-size: var(--text-xs, 13px); color: var(--color-text-muted, #6B7B76); text-decoration: none; }
.uu-pk__vej2:hover { color: var(--color-primary-dark, #0B7352); text-decoration: underline; }

/* Statusboksen: opkøbt får den gyldne kant, ophørt beholder den grå
   (allerede sat ovenfor på linje ~4296 — gentages bevidst ikke her,
   så de to regler ikke kan komme til at slås om den samme kant). */
.uu-status--opkoebt { border-left-color: #C8A96E; }
.uu-status__hist { font-size: var(--text-sm, 14px); }
.uu-status__hist a { color: var(--color-primary-dark, #0B7352); text-decoration: underline; }

/* ============================================================
 * /UDBYDERE/ — OVERSIGTEN (bygget 4/8, erstatter det gamle kort)
 * ============================================================
 * Hele blokken har praefikset .uo- og roerer intet af det
 * eksisterende. De gamle .udb-* og .pk-u-regler staar uroert
 * ovenfor, fordi undersiden stadig bruger dele af dem.
 *
 * Farvereglen paa denne side er sat af Henrik 4/8: ALLE knapper
 * er orange. Baade vejen ud til en udbyder og vejen ind paa vores
 * egen underside. Historik-kortene er den eneste undtagelse — de
 * faar en neutral graa knap, saa de ikke konkurrerer.
 *
 * Alt herunder ligger sidst i filen, saa der ikke kan opstaa tvivl
 * om, hvad der vinder. Ingen !important noget sted.
 * ============================================================ */
.uo{--uo-dark:#123C30;--uo-dark2:#0C2C23;--uo-fresh:#3EA66E;--uo-glow:#8FD6AE;
  --uo-cta:#E8622A;--uo-ctah:#D0521C;--uo-ctaglow:rgba(232,98,42,.34);
  --uo-line:#E6EDE9;--uo-linesoft:#F0F4F2;--uo-text:#14201B;--uo-muted:#5B6B65;--uo-muted2:#8A968F;
  --uo-sh1:0 1px 2px rgba(8,30,24,.05),0 8px 24px rgba(8,30,24,.06);
  --uo-sh2:0 2px 4px rgba(8,30,24,.06),0 22px 48px rgba(8,30,24,.14)}
.uo-wrap{max-width:1240px;margin:0 auto;padding:0 28px}

/* ---- HERO ---- */
.uo-hero{position:relative;background:var(--uo-dark2);color:#fff;overflow:hidden;padding:60px 0 128px}
.uo-hero::before{content:"";position:absolute;inset:0;
  background:radial-gradient(760px 380px at 12% -8%, rgba(62,166,110,.30), transparent 62%),
  radial-gradient(620px 340px at 88% 8%, rgba(143,214,174,.15), transparent 60%),
  linear-gradient(180deg,#123C30 0%,#0C2C23 55%,#0A251E 100%)}
.uo-hero::after{content:"";position:absolute;inset:0;opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.045'/%3E%3C/svg%3E")}
.uo-hero__in{position:relative;z-index:2;max-width:760px}
.uo-krumme{font-size:13px;color:#8FB5A5;margin:0 0 20px}
.uo-krumme a{color:#8FB5A5;text-decoration:none}
.uo-hero h1{font-family:var(--font-display);font-size:clamp(34px,4.8vw,54px);line-height:1.05;
  font-weight:600;letter-spacing:-.032em;margin:0 0 18px;color:#fff}
.uo-hero h1 em{font-style:normal;color:var(--uo-glow)}
.uo-lead{font-size:17.5px;line-height:1.62;color:#C6DED3;margin:0 0 32px;max-width:590px}
.uo-tal{display:flex;gap:44px;flex-wrap:wrap}
.uo-tal span{display:block;font-family:var(--font-display);font-size:29px;font-weight:600;
  letter-spacing:-.02em;line-height:1;color:#fff}
.uo-tal small{display:block;font-size:12px;color:#8FB5A5;margin-top:7px;letter-spacing:.04em;
  text-transform:uppercase;font-weight:600}

/* ---- FILTERBAR ---- */
.uo-barholder{margin-top:-70px;position:relative;z-index:4}
.uo-bar{background:rgba(255,255,255,.85);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  border:1px solid rgba(255,255,255,.7);border-radius:20px;padding:16px 18px;
  box-shadow:0 3px 8px rgba(8,30,24,.06), 0 26px 60px rgba(8,30,24,.16);
  display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.uo-filtre{display:flex;gap:6px;flex-wrap:wrap;flex:1;align-items:center}
.uo-filtre button{border:1px solid var(--uo-line);background:#fff;font-family:var(--font-body);
  font-size:12.5px;font-weight:600;color:var(--uo-muted);padding:7px 13px;border-radius:999px;
  cursor:pointer;display:inline-flex;align-items:center;gap:6px;line-height:1;transition:all .16s ease}
.uo-filtre button:hover{border-color:#C7D6CF;color:var(--uo-text)}
.uo-filtre button.on{background:var(--uo-dark);border-color:var(--uo-dark);color:#fff}
.uo-filtre button.on:not(.uo-alle)::after{content:"";width:12px;height:12px;flex:0 0 12px;border-radius:50%;
  background:rgba(255,255,255,.22) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6L6 18M6 6l12 12'/%3E%3C/svg%3E") center/8px no-repeat}
.uo-filtre .uo-alle{font-weight:700}
.uo-skel{width:1px;height:20px;background:var(--uo-line);margin:0 4px}
.uo-tael{font-size:13px;color:var(--uo-muted);white-space:nowrap}
.uo-tael b{color:var(--uo-dark)}

/* ---- LOGOHJUL — kun logoet vises, aldrig navnet ---- */
.uo-hjulrk{display:flex;align-items:center;gap:10px;flex-shrink:0}
.uo-hjullbl{font-size:12px;font-weight:600;color:var(--uo-muted2);letter-spacing:.03em;
  text-transform:uppercase;white-space:nowrap}
.uo-hjul{display:flex;align-items:stretch;border:1px solid var(--uo-line);border-radius:14px;
  overflow:hidden;background:#fff;box-shadow:0 1px 2px rgba(8,30,24,.04)}
.uo-hjul__felt{width:132px;display:flex;align-items:center;justify-content:center;padding:10px 14px;
  min-height:52px;transition:opacity .16s ease,transform .16s ease}
.uo-hjul__felt.skift{opacity:0;transform:translateY(-6px)}
.uo-hjul__logo{max-height:30px;max-width:104px;object-fit:contain;display:block}
.uo-hjul__ord{font-family:var(--font-display);font-weight:600;font-size:14px;color:var(--uo-dark);
  letter-spacing:-.01em;white-space:nowrap}
.uo-hjul__pile{display:flex;flex-direction:column;border-left:1px solid var(--uo-line)}
.uo-hjul__pil{border:0;background:none;width:34px;height:26px;display:flex;align-items:center;
  justify-content:center;cursor:pointer;color:var(--uo-muted2);transition:all .15s ease}
.uo-hjul__pil:first-child{border-bottom:1px solid var(--uo-line)}
.uo-hjul__pil:hover{color:var(--uo-dark);background:var(--uo-linesoft)}
.uo-hjulgo{background:var(--uo-cta);color:#fff;font-weight:600;font-size:13.5px;padding:13px 18px;
  border-radius:13px;white-space:nowrap;display:inline-flex;align-items:center;gap:7px;
  text-decoration:none;box-shadow:0 4px 14px var(--uo-ctaglow);
  transition:background .18s ease,transform .18s ease}
.uo-hjulgo:hover{background:var(--uo-ctah);color:#fff;transform:translateY(-1px)}

/* ---- SEKTION + GITTER (4 pr. raekke) ---- */
.uo-sek{padding:50px 0 0}
.uo-sek__h h2{font-family:var(--font-display);font-size:25px;font-weight:600;letter-spacing:-.022em;margin:0 0 6px}
.uo-sek__h p{margin:0 0 26px;color:var(--uo-muted);font-size:14.5px}
.uo-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
@media(max-width:1100px){.uo-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:840px){.uo-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.uo-grid{grid-template-columns:1fr}}

/* ---- KORTET ---- */
.uo-kort{background:#fff;border-radius:20px;display:flex;flex-direction:column;box-shadow:var(--uo-sh1);
  border:1px solid rgba(230,237,233,.9);overflow:hidden;
  transition:transform .32s cubic-bezier(.2,.7,.3,1),box-shadow .32s cubic-bezier(.2,.7,.3,1),border-color .32s ease}
.uo-kort:hover{transform:translateY(-6px);box-shadow:var(--uo-sh2);border-color:rgba(232,98,42,.26)}
.uo-plade{position:relative;height:146px;display:flex;align-items:center;justify-content:center;
  padding:26px 30px;background:linear-gradient(168deg,#FBFDFC 0%,#F2F8F5 100%)}
.uo-plade::before{content:"";position:absolute;left:50%;top:52%;width:190px;height:190px;
  transform:translate(-50%,-50%);border-radius:50%;
  background:radial-gradient(circle,rgba(232,98,42,.09),transparent 68%);opacity:0;transition:opacity .36s ease}
.uo-kort:hover .uo-plade::before{opacity:1}
.uo-plade img{max-width:100%;max-height:74px;object-fit:contain;position:relative;z-index:1;
  transition:transform .32s cubic-bezier(.2,.7,.3,1)}
.uo-kort:hover .uo-plade img{transform:scale(1.055)}
.uo-ordm{position:relative;z-index:1;font-family:var(--font-display);font-weight:600;font-size:23px;
  letter-spacing:-.02em;color:var(--uo-dark);text-align:center;line-height:1.15}
.uo-krop{padding:20px 22px 22px;display:flex;flex-direction:column;flex:1;border-top:1px solid var(--uo-linesoft)}
.uo-navn{font-family:var(--font-display);font-size:19px;font-weight:600;letter-spacing:-.02em;margin:0 0 7px}
.uo-navn a{color:inherit;text-decoration:none}
.uo-beskriv{font-size:13.6px;line-height:1.55;color:var(--uo-muted);margin:0 0 16px;flex:1}
.uo-em{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 18px;min-height:26px}
.uo-em span{font-size:11.5px;font-weight:600;color:#5F6E68;background:var(--uo-linesoft);
  border:1px solid #E8EEEB;padding:5px 10px;border-radius:999px}

/* ---- ORANGE CTA — alle knapper ---- */
.uo-cta{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;
  background:var(--uo-cta);color:#fff;font-weight:600;font-size:14.5px;padding:14px 18px;
  border-radius:13px;position:relative;overflow:hidden;text-decoration:none;
  transition:background .24s ease,box-shadow .24s ease}
.uo-cta::before{content:"";position:absolute;inset:0;
  background:linear-gradient(120deg,transparent 20%,rgba(255,255,255,.22) 50%,transparent 80%);
  transform:translateX(-110%);transition:transform .62s cubic-bezier(.2,.7,.3,1)}
.uo-kort:hover .uo-cta::before{transform:translateX(110%)}
.uo-kort:hover .uo-cta{background:var(--uo-ctah);color:#fff;box-shadow:0 8px 22px var(--uo-ctaglow)}
.uo-cta svg{width:16px;height:16px;flex:0 0 16px;transition:transform .26s cubic-bezier(.2,.7,.3,1)}
.uo-kort:hover .uo-cta svg{transform:translateX(4px)}

/* ---- SPRINGET FOER HISTORIKKEN ---- */
.uo-spring{position:relative;background:#FBF7EE;color:var(--uo-text);border:1px solid #F0E6D2;
  padding:30px 34px;margin:60px 0 32px;border-radius:20px;display:flex;gap:26px;
  align-items:center;flex-wrap:wrap}
.uo-spring__ikon{width:52px;height:52px;border-radius:15px;flex-shrink:0;background:#F5EAD4;
  border:1px solid #EADCBE;display:flex;align-items:center;justify-content:center}
.uo-spring__ikon svg{stroke:#B5934F}
.uo-spring h3{font-family:var(--font-display);font-size:21px;font-weight:600;letter-spacing:-.02em;
  margin:0 0 7px;color:var(--uo-dark)}
.uo-spring p{margin:0;color:#6E7C73;font-size:14.8px;line-height:1.6;max-width:680px}

/* ---- HISTORIK-KORT ----
   De skal traede tilbage uden at vaere kedelige. Mintgroen er sitets
   oplysnings-farve og passer praecis her: liv uden at love en handling.
   Knappen er neutral graa, saa den ikke konkurrerer med de orange. */
.uo-kort--hist{box-shadow:0 1px 2px rgba(8,30,24,.04)}
.uo-kort--hist:hover{transform:translateY(-4px);
  box-shadow:0 2px 4px rgba(8,30,24,.05),0 16px 32px rgba(62,166,110,.14);border-color:#BFE0CE}
.uo-kort--hist .uo-plade{padding:0;height:124px;align-items:flex-start;justify-content:flex-start;
  background:linear-gradient(150deg,#F1FBF6 0%,#E2F3EA 100%)}
.uo-kort--hist .uo-plade::before{display:none}
.uo-histbg{position:absolute;inset:0;background-size:auto 128%;background-position:right -10px center;
  background-repeat:no-repeat;opacity:.85;transition:transform .5s cubic-bezier(.2,.7,.3,1)}
.uo-kort--hist:hover .uo-histbg{transform:scale(1.05)}
.uo-histslor{position:absolute;inset:0;
  background:linear-gradient(100deg,#EDF8F2 32%,rgba(237,248,242,.6) 64%,rgba(237,248,242,0) 100%)}
.uo-histnavn{position:relative;z-index:2;font-family:var(--font-display);font-weight:600;
  font-size:19.5px;letter-spacing:-.02em;color:var(--uo-dark);line-height:1.2;padding:18px 20px 0}
.uo-histnavn small{display:block;font-family:var(--font-body);font-size:10.5px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:#5D9E7E;margin-bottom:6px}
.uo-kort--hist .uo-krop{background:#fff}
.uo-kort--hist .uo-navn{color:var(--uo-dark)}
.uo-kort--hist .uo-cta{background:#F2F3F4;color:#41474D;border:1px solid #DDE0E3}
.uo-kort--hist .uo-cta::before{background:linear-gradient(120deg,transparent 20%,rgba(0,0,0,.06) 50%,transparent 80%)}
.uo-kort--hist:hover .uo-cta{background:#E8EAEC;color:#2A2F34;box-shadow:0 6px 16px rgba(20,30,40,.12)}
.uo-kort--hist .uo-em span{background:#0E3A2A;border-color:#0E3A2A;color:#9FE3C2}

/* ---- VEJVISER — sidste stop foer footeren ---- */
.uo-vejviser{padding:58px 0 72px}
.uo-vv{position:relative;overflow:hidden;border-radius:30px;background:var(--uo-dark2);color:#fff;
  padding:34px 40px 36px;box-shadow:0 30px 60px rgba(8,30,24,.18)}
.uo-vv::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(680px 320px at 6% -25%, rgba(62,166,110,.32), transparent 62%),
             radial-gradient(560px 320px at 98% 125%, rgba(143,214,174,.13), transparent 60%)}
.uo-vv__h{position:relative;z-index:1;max-width:720px;margin:0 0 22px}
.uo-vv__h h2{font-family:var(--font-display);font-size:25px;font-weight:600;letter-spacing:-.024em;
  margin:0 0 7px;line-height:1.2;color:#fff}
.uo-vv__h p{margin:0;color:#B9D4C8;font-size:14.5px;line-height:1.55}
.uo-vv__veje{position:relative;z-index:1;display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.uo-vej{position:relative;display:flex;flex-direction:column;border-radius:18px;padding:18px 20px;
  background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.12);text-decoration:none;
  transition:background .18s ease,border-color .18s ease,transform .18s ease}
.uo-vej:hover{background:rgba(255,255,255,.10);border-color:rgba(143,214,174,.38);transform:translateY(-3px)}
.uo-vej__ikon{width:36px;height:36px;border-radius:11px;display:flex;align-items:center;
  justify-content:center;background:rgba(143,214,174,.14);border:1px solid rgba(143,214,174,.22);
  color:var(--uo-glow);margin-bottom:12px}
.uo-vej h3{font-family:var(--font-display);font-size:16.5px;font-weight:600;letter-spacing:-.018em;
  margin:0 0 6px;color:#fff}
.uo-vej p{margin:0 0 16px;font-size:13.5px;line-height:1.55;color:#A9C8BA;flex:1}
.uo-vej__k{align-self:flex-start;background:var(--uo-cta);color:#fff;font-weight:600;font-size:13.5px;
  padding:10px 19px;border-radius:999px;display:inline-flex;align-items:center;gap:8px;
  box-shadow:0 8px 22px var(--uo-ctaglow);transition:background .18s ease,transform .18s ease}
.uo-vej__k svg{width:14px;height:14px;flex:0 0 14px}
.uo-vej:hover .uo-vej__k{background:var(--uo-ctah);transform:translateY(-1px)}
@media(max-width:900px){.uo-vv{padding:38px 28px 40px}.uo-vv__veje{grid-template-columns:1fr}}
@media(max-width:820px){.uo-spring{padding:26px 24px}}

/* Logohjulet paa udbyder-undersiden viser nu kun logoet (4/8).
   Chippen skal derfor kunne holde et billede pænt. */
.uu-wheel__chip { display: inline-flex; align-items: center; justify-content: center; min-height: 34px; }
.uu-wheel__chip img { max-height: 22px; max-width: 96px; object-fit: contain; display: block; }

/* ============================================================
 * 1.123.3 — NYT BUND-CTA-DESIGN PÅ UDBYDER-UNDERSIDEN (.uu-end)
 * Blokken står SIDST i filen med samme selektorer som de gamle
 * regler ved linje 2700 — sidste regel vinder. Ingen !important.
 * Godkendt mockup: cta-mockup.html, 6. august 2026.
 * ============================================================ */
.uu-end{ position:relative; overflow:hidden; text-align:center; color:#fff; padding:44px 30px 40px; border-radius:18px;
  background:linear-gradient(135deg,#0B7352 0%,#123528 58%,#0C2A1F 100%); box-shadow:0 14px 38px rgba(12,42,31,.22); margin-top:14px; }
.uu-end::before{ content:""; position:absolute; top:-130px; right:-90px; width:340px; height:340px; border-radius:50%;
  background:radial-gradient(circle,rgba(91,169,123,.35) 0%,rgba(91,169,123,0) 70%); pointer-events:none; }
.uu-end::after{ content:""; position:absolute; bottom:-150px; left:-110px; width:360px; height:360px; border-radius:50%;
  background:radial-gradient(circle,rgba(91,169,123,.22) 0%,rgba(91,169,123,0) 70%); pointer-events:none; }
.uu-end h2{ position:relative; font-size:var(--text-xl); margin:0 0 10px; }
.uu-end .uu-end__p{ position:relative; color:#D9EAE2; margin:0 auto 18px; font-size:17px; max-width:560px; line-height:1.55; }
.uu-end__tjek{ position:relative; display:flex; flex-wrap:wrap; justify-content:center; gap:8px 22px; margin:0 0 24px; padding:0; list-style:none; }
.uu-end__tjek li{ color:#BFDACE; font-size:var(--text-base); display:inline-flex; align-items:center; gap:7px; }
.uu-end__tjek svg{ flex:0 0 15px; }
.uu-end .uu-green{ position:relative; gap:10px; background:#6FC08D; font-size:17px; padding:16px 34px;
  box-shadow:0 8px 24px rgba(111,192,141,.38); transition:transform .18s ease, box-shadow .18s ease, background .18s ease; }
.uu-end .uu-green:hover{ background:#7FCE9C; color:#062b1f; transform:translateY(-2px); box-shadow:0 12px 30px rgba(111,192,141,.5); }
.uu-end .uu-green .uu-green__pil{ transition:transform .18s ease; }
.uu-end .uu-green:hover .uu-green__pil{ transform:translateX(3px); }
.uu-end__note{ position:relative; display:block; margin-top:14px; color:#9FC3B2; font-size:13px; }
@media (max-width:600px){
  .uu-end{ padding:32px 18px 30px; }
  .uu-end__tjek{ flex-direction:column; align-items:center; gap:7px; }
}

/* ============================================================
 * 1.123.4 — NYT PRODUKTKORT (npk) + ÅRSVÆLGER
 * Bruges på /ladeboks/-oversigten og udbyder-undersiderne.
 * Forsidens kort er urørte. Blokken står sidst — sidste regel
 * vinder. Ingen !important. Godkendt mockup: kort-mockup5 +
 * grøn variant 3, 6. august 2026.
 * ============================================================ */
.npk-aarbar{ display:flex; align-items:center; justify-content:space-between; gap:16px; background:#fff; border:1px solid #E6EAE7; border-radius:16px; padding:14px 18px; margin:0 0 20px; box-shadow:0 4px 16px rgba(16,35,26,.05); }
.npk-aarbar__t strong{ font-size:14.5px; display:block; }
.npk-aarbar__t span{ display:block; color:#7C8B82; font-size:12.5px; margin-top:2px; }
.npk-aarbar__wheel{ flex:0 0 auto; }

#product-grid.product-grid{ display:flex; flex-direction:column; gap:18px; }
.uu-boks{ display:flex; flex-direction:column; flex-wrap:nowrap; gap:18px; }

.pk-wrap .npk, .uu-boks .npk{ background:#fff; border:1px solid #E6EAE7; border-radius:20px; padding:14px;
  display:grid; grid-template-columns:96px 1fr 236px; gap:22px; align-items:center;
  box-shadow:0 6px 24px rgba(16,35,26,.06); transition:box-shadow .2s ease, transform .2s ease, border-color .2s ease; }
.npk:hover{ border-color:#BFD2C7; box-shadow:0 14px 36px rgba(16,35,26,.12); transform:translateY(-2px); }
.npk--med-strip{ border-top-left-radius:0; border-top-right-radius:0; }

.npk-img{ position:relative; width:96px; height:96px; margin-left:8px; border-radius:16px; overflow:visible;
  background:linear-gradient(160deg,#F4F6F4 0%,#E9EEEA 100%); border:1px solid #E9EEEA; display:flex; align-items:center; justify-content:center; }
.npk-img img{ width:100%; height:100%; object-fit:cover; border-radius:15px; }
.npk-img__fb{ font-size:11px; font-weight:700; color:#5B6B65; text-align:center; padding:6px; }

.npk-midt{ min-width:0; }
.npk-navn{ display:flex; align-items:center; gap:10px; margin-bottom:5px; flex-wrap:wrap; }
.npk-navn h3{ margin:0; font-family:var(--font-display,'Sora'),sans-serif; font-size:17px; font-weight:700; letter-spacing:-.015em; line-height:1.25; }
.npk-navn h3 a{ color:inherit; text-decoration:none; }
.npk-badge{ font:700 13px/1.25 var(--font-body,'Inter'),sans-serif; letter-spacing:.02em; text-transform:uppercase; padding:1px 8px; border-radius:999px; background:#E4F2EA; color:#17603C; }
.npk-badge--koeb{ background:#E9EDF9; color:#35437F; }
.npk-badge--butik{ background:#F7F0E2; color:#8A6A2C; }
.npk-sub{ color:#7C8B82; font-size:13px; margin-bottom:11px; }
.npk-specs{ display:flex; flex-wrap:wrap; gap:6px 18px; }
.npk-spec{ font-size:13.5px; color:#3C5147; display:inline-flex; align-items:center; gap:7px; font-weight:500; }
.npk-spec svg{ flex:0 0 14px; }
.npk-spec--krav{ color:#9A6420; }

.npk-pris{ background:linear-gradient(160deg,#2E7355 0%,#215C42 100%); border:1px solid #1D5039; border-radius:14px; padding:15px 16px 14px; text-align:center; }
.npk-pris small{ display:block; font:700 13px/1.2 var(--font-body,'Inter'),sans-serif; letter-spacing:.02em; color:#BFE0CE; text-transform:uppercase; margin-bottom:2px; }
.npk-pris strong{ display:block; font-family:var(--font-display,'Sora'),sans-serif; font-size:23px; font-weight:800; letter-spacing:-.03em; color:#fff; font-variant-numeric:tabular-nums; line-height:1.1; }
.npk-pris strong em{ font-style:normal; font-size:13px; color:#A9D2BC; font-weight:600; }
.npk-samlet{ display:inline-block; margin:5px 0 8px; font-size:13px; color:#EAF6EF; background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.22); border-radius:999px; padding:5px 11px; font-variant-numeric:tabular-nums; }
.npk-samlet[hidden]{ display:none; }
/* 24/9 2026 (Henrik): kortets vigtigste knap var 35 punkter hoej med
   tekst paa 13 - den mindste knap paa hele sitet, og den der foerer
   kunden videre til udbyderen. Husets normale knap er 44 med tekst
   paa 15, og det er den, den foelger nu. Maalt: kortet gaar fra 246
   til 252 paa telefon og fra 104 til 110 paa laptop. */
.npk-cta{ display:flex; justify-content:center; align-items:center; gap:8px; width:100%; margin-top:2px; min-height:44px; box-sizing:border-box;
  background:linear-gradient(180deg,#F1712F 0%,#E05A1E 100%); color:#fff; font-weight:700; font-size:var(--text-base); padding:12px 18px; border-radius:999px; text-decoration:none; white-space:nowrap;
  box-shadow:0 5px 14px rgba(224,90,30,.28), inset 0 1px 0 rgba(255,255,255,.28); transition:filter .15s, transform .15s; }
.npk-cta:hover{ filter:brightness(1.06); transform:translateY(-1px); color:#fff; }
.npk-cta--intern{ background:rgba(255,255,255,.1); border:1.5px solid rgba(255,255,255,.55); box-shadow:none; }
.npk-cta--intern:hover{ background:rgba(255,255,255,.18); }
.npk-samlet + .npk-cta{ margin-top:0; }
.npk-pris small + strong + .npk-samlet[hidden] + .npk-cta{ margin-top:12px; }
.npk-emblem{ font:700 13px/1.2 var(--font-body,'Inter'),sans-serif; letter-spacing:.02em; text-transform:uppercase; color:#D9EAE2; margin-bottom:5px; }
.npk-veje{ display:flex; flex-direction:column; gap:7px; }
.npk-veje a{ color:#fff; font-size:13px; font-weight:600; text-decoration:none; }
.npk-veje a:last-child{ color:#BFE0CE; font-weight:500; }
.npk-veje a:hover{ text-decoration:underline; color:#fff; }

@media (max-width:760px){
  .pk-wrap .npk, .uu-boks .npk{ grid-template-columns:72px 1fr; }
  .npk-img{ width:72px; height:72px; margin-left:0; }
  .npk-pris{ grid-column:1 / -1; }
  .npk-aarbar{ flex-direction:column; align-items:flex-start; gap:10px; }
}

/* ============================================================
 * 1.123.5 — JUSTERING AF PRODUKTKORTET (npk)
 * Billedet ¼ større og aldrig beskåret (contain), prisfelt og
 * knap slanket, samlet-pillen ombrydes aldrig. Blokken står
 * sidst — sidste regel vinder. Ingen nye !important.
 * Godkendt mockup: kort-mockup6, 7. august 2026.
 * ============================================================ */
.pk-wrap .npk, .uu-boks .npk{ grid-template-columns:120px 1fr 205px; gap:20px; padding:16px 16px 16px 18px; }
.npk-img{ width:120px; height:120px; }
.npk-img img{ object-fit:contain; padding:8px; background:#F4F6F4; }
.npk-pris{ padding:9px 12px; }
.npk-pris small{ font-size:13px; margin-bottom:1px; }
.npk-pris strong{ font-size:20px; }
.npk-pris strong em{ font-size:13px; }
.npk-samlet{ font-size:13px; padding:2px 8px; margin:3px 0 6px; white-space:nowrap; max-width:100%; overflow:hidden; text-overflow:ellipsis; }
.npk-cta{ font-size:var(--text-base); padding:9px 14px; box-shadow:0 3px 9px rgba(224,90,30,.24), inset 0 1px 0 rgba(255,255,255,.25); }
@media (max-width:760px){
  .pk-wrap .npk, .uu-boks .npk{ grid-template-columns:90px 1fr; }
  .npk-img{ width:90px; height:90px; }
}

/* ============================================================
 * 1.123.7/1.123.8 — ÅRSHJUL I KORTET + KAMPAGNEDESIGN
 * (1.123.6 havde fem årsknapper; endeligt valg blev Forslag
 * A-hjulet, Henrik 7. august 2026. 1.123.8: beløbet ERSTATTER
 * teksten "Samlede udgifter" ved klik — inde i feltet, aldrig
 * udenfor — og mobilrækken fylder hele bredden pænt.)
 * Topbaren er væk. Hvert kort med månedlig betaling har et lille
 * drejehjul i det hvide felt: i hvile står der "3 år" som
 * indikation — ingen pris. Første klik aktiverer hjulet på 1 år
 * og viser den samlede pris; derefter virker op/ned (1-5 år).
 * Valget synkroniseres på tværs af alle kort (aar-total.js).
 * Kort uden månedlig betaling (engangskøb/butik) har ingen
 * årsrække. Kampagne: lys strip med frist og orange "Spar"-mærke
 * + KAMPAGNEPRIS-mærke og gennemstreget førpris i prisfeltet.
 * Godkendte mockups: aar-i-kort-mockup (Forslag A) og
 * endeligt-kort-mockup, 7. august 2026.
 * Blokken står sidst — sidste regel vinder. Ingen nye !important.
 * ============================================================ */
.npk-aarrad{ display:inline-flex; align-items:center; gap:10px; margin-top:11px; max-width:100%;
  background:#F5F8F6; border:1px solid #E2E9E4; border-radius:999px; padding:5px 6px 5px 14px; }
.npk-aarrad__t{ font-size:12.5px; color:#7C8B82; white-space:nowrap; }
.npk-aarrad__t[hidden]{ display:none; }
.npk-aarhjul{ display:inline-flex; align-items:center; gap:6px; background:#fff; border:1px solid #D8E1DA;
  border-radius:999px; padding:3px 6px; flex:0 0 auto; }
.npk-aarhjul__label{ font-size:13px; font-weight:700; color:#215C42; min-width:34px; text-align:center;
  font-variant-numeric:tabular-nums; font-style:normal; }
.npk-aarhjul__pil{ width:20px; height:20px; border:0; border-radius:50%; background:#EAF1EC; color:#215C42;
  display:inline-flex; align-items:center; justify-content:center; cursor:pointer; padding:0; transition:background .15s; }
.npk-aarhjul__pil:hover{ background:#DCE8E0; }
.npk-aarrad .npk-samlet{ margin:0; padding:0; font-size:13px; font-weight:700; color:#215C42;
  background:transparent; border:0; white-space:nowrap; overflow:visible; text-overflow:clip; font-variant-numeric:tabular-nums; }
.npk-aarrad .npk-samlet[hidden]{ display:none; }

.npk-pris .npk-kamp{ display:inline-block; font:700 9.5px/1 var(--font-body,'Inter'),sans-serif; letter-spacing:.09em;
  color:#FFD9A8; background:rgba(224,90,30,.25); border:1px solid rgba(255,180,90,.35); text-transform:uppercase;
  border-radius:999px; padding:4px 9px; margin-bottom:5px; }
.npk-pris .npk-foer{ display:block; font-size:12px; color:#A9D2BC; text-decoration:line-through; margin-bottom:1px; }
.npk-pris strong{ margin-bottom:10px; }

.pk-strip{ background:linear-gradient(90deg,#FDF3E4 0%,#FBEACC 100%); border:1px solid #F0DFC4; border-bottom:0;
  border-radius:20px 20px 0 0; padding:9px 18px; justify-content:flex-start; gap:12px; }
.pk-strip__tekst{ font-size:13.5px; font-weight:700; color:#8A5A17; letter-spacing:0; }
.pk-strip__frist{ font-size:12px; color:#A67C3B; margin-left:auto; white-space:nowrap; }
.pk-strip__spare{ font-size:12px; font-weight:700; color:#fff; background:#E05A1E; border-radius:999px; padding:4px 11px; }

@media (max-width:760px){
  .npk-aarrad{ display:flex; width:100%; justify-content:space-between; gap:8px; padding-left:12px; }
  .npk-aarrad__t{ font-size:12px; }
  .npk-aarrad .npk-samlet{ font-size:12.5px; }
  .pk-strip__tekst{ font-size:12px; }
  .pk-strip__frist{ display:none; }
}

/* ============================================================
 * 1.123.9 — ENS KORTSTØRRELSE: PRÆCIS SOM MOCKUPPET (980 px)
 * Kortene skal være ens under "Alle ladebokse" og på udbyder-
 * undersiderne — samme bredde som det godkendte mockup (980 px),
 * lave og brede med punkterne på én linje.
 * Før: listen var låst til 640 px (gammel max-width fra
 * gitter-tiden), undersiden fyldte 1152 px. Nu: begge 980 px.
 * Arkivets samlede layout udvides tilsvarende, så filteret
 * beholder sin plads (kun på ladeboks-arkivet via body-klasse).
 * Blokken står sidst — sidste regel vinder. Ingen nye !important.
 * ============================================================ */
.post-type-archive-ladeboks .archive-layout{ max-width:1312px; }
#product-grid.product-grid{ max-width:1120px; margin:0; } /* 27/9 2026 (Henrik, N317): var 980 */
.uu-boks{ max-width:980px; }

/* ============================================================
 * 1.123.10 — ANBEFALET-MÆRKE, TRUSTPILOT PÅ UNDERSIDEN,
 * MOBILRETTELSE AF ÅRSHJULET + NEUTRALT NULSTILLINGSPUNKT
 * Anbefalet-mærket (fra det gamle korts ribbon) er tilbage som
 * chip ved siden af Leje/Køb-mærket. Undersidens kort viser nu
 * også Trustpilot-stjerner. På mobil må hjulet ALDRIG stikke
 * uden for det grå felt — rækken må ombrydes, og hjulet rykker
 * så ned på egen linje inde i feltet. Nulstilling: ét klik ned
 * fra 1 år sætter hjulet tilbage til udgangspunktet (aar-total.js).
 * Blokken står sidst — sidste regel vinder. Ingen nye !important.
 * ============================================================ */
.npk-badge--anbefalet{ background:#FFF3DC; color:#8A5A17; }
.npk-aarrad{ flex-wrap:wrap; row-gap:6px; min-width:0; border-radius:22px; }
.npk-aarrad__t, .npk-aarrad .npk-samlet{ min-width:0; }

/* 1.123.12 — INTET HOP VED KLIK PÅ HJULET (Henrik, 8. august
 * 2026): teksten "Samlede udgifter" og beløbet deler samme faste
 * plads i det grå felt, så feltet og hjulet står i PRÆCIS samme
 * størrelse og position i hvile og efter klik — ingen ombrydning
 * frem og tilbage, intet hop. Sidste regel vinder. */
.npk-aarrad__t, .npk-aarrad .npk-samlet{ min-width:106px; display:inline-block;
  font-size:13px; line-height:20px; }
/* Feltet som fritstående flex-boks (ikke inline på tekstens
   grundlinje) — så kan indholdsskiftet aldrig rykke det lodret. */
.npk-aarrad{ display:flex; width:fit-content; }
@media (max-width:760px){
  .npk-aarrad{ width:100%; }
}

/* ============================================================
 * 1.123.13 — UDBYDERSIDEN: LUFT I TOPPEN, LEVENDE ADRESSEFELT
 * OG ÆRLIGT OVERBLIK (Henrik, 8. august 2026)
 * Toppen beholder sin opbygning (Henriks ønske) — den får kun
 * mere luft mellem elementerne. Fact-kortene er urørte. Match-
 * boksen får afstand til toppen. Fordele/ulemper er gentænkt
 * som rådgivning (sand-tone, "!", note og verdikt-bjælke).
 * Blokken står sidst — sidste regel vinder. Ingen nye !important.
 * ============================================================ */

/* — Luft i heroen: samme elementer, roligere rytme — */
.uu-hero__logo{ margin-bottom:22px; }
.uu-hero h1{ margin:10px 0 16px; }
.uu-tags{ margin:0 0 18px; }
.uu-pitch{ margin:0 0 26px; }
.uu-crumb{ margin-bottom:30px; }

/* — Luft mellem toppen (fact-kort) og match-boksen — */
.uu-sec:has(.uu-motor){ padding-top:56px; }

/* — Levende adressefelt: forslagslisten under feltet — */
.uu-motor__in{ position:relative; }
.uu-adr-forslag{ position:absolute; top:calc(100% + 8px); left:0; right:0; z-index:40;
  background:#fff; border:1px solid var(--color-border,#E1E7E4); border-radius:14px;
  box-shadow:0 18px 44px rgba(16,35,26,.14); list-style:none; margin:0; padding:6px; }
.uu-adr-forslag li{ padding:10px 13px; border-radius:9px; cursor:pointer; font-size:var(--text-sm); color:#2E3A35; }
.uu-adr-forslag li:hover, .uu-adr-forslag li.aktiv{ background:#F1F6F3; }

/* — Ærligt overblik — */
.uu-aerlig__maerke{ display:inline-flex; align-items:center; gap:7px; font-size:var(--text-sm); font-weight:800;
  letter-spacing:.04em; text-transform:uppercase; color:#1F7A4D; background:#EAF6F0;
  border:1px solid #D3EADD; border-radius:999px; padding:5px 13px; margin-bottom:12px; }
.uu-pc__col--tjek h3{ color:#8A5A17; }
.uu-pc__col--tjek h3::before{ content:"!"; width:24px; height:24px; border-radius:50%;
  background:#FFF3DC; color:#8A5A17; font-weight:800; font-size:13px;
  display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto; }
.uu-pc__col--tjek li::before{ content:"!"; left:0; top:8px; width:17px; height:17px; border-radius:50%;
  background:#FFF3DC; color:#8A5A17; font-weight:800; font-size:10.5px; line-height:17px; text-align:center; }
.uu-tjek-note{ margin:14px 0 0; background:#F5F8F6; border:1px solid #E2E9E4; border-radius:12px;
  padding:12px 15px; font-size:13px; line-height:1.55; color:#5B6B65; }
.uu-tjek-note b{ color:#0B7352; }

/* — Verdikt-bjælken: ærlig konklusion, der ender i en handling — */
.uu-verdikt{ margin-top:18px; background:#0B7352; color:#fff; border-radius:16px;
  padding:20px 26px; display:flex; align-items:center; gap:22px; flex-wrap:wrap; }
.uu-verdikt__t{ flex:1; min-width:260px; }
.uu-verdikt__t b{ display:block; font-size:var(--text-base); margin-bottom:3px; }
.uu-verdikt__t span{ font-size:var(--text-sm); color:#CFE6DC; line-height:1.5; }
.uu-verdikt__k{ background:#fff; color:#0B7352; font-weight:700; font-size:var(--text-base); border:0;
  border-radius:999px; padding:13px 22px; min-height:44px; cursor:pointer; white-space:nowrap; font-family:inherit; }
.uu-verdikt__k:hover{ background:#EAF6F0; }

/* — 1.123.19: tjek-linjen på udbydersiden (før hop til motoren) — */
.uu-tjekboks{ flex-basis:100%; background:#fff; border:1px solid var(--color-border,#E1E7E4);
  border-radius:14px; padding:16px 18px; margin-top:4px; box-shadow:0 10px 28px rgba(16,35,26,.08); }
.uu-tjekboks__titel{ font-weight:700; color:#0B7352; font-size:var(--text-base); margin-bottom:10px; }
.uu-tjekrad{ display:flex; align-items:center; gap:10px; padding:5px 0; font-size:var(--text-sm); color:#9AA8A1; }
.uu-tjekrad__ikon{ width:18px; height:18px; border-radius:50%; border:2px solid #E2E9E4; flex:0 0 auto;
  display:inline-flex; align-items:center; justify-content:center; font-size:10px; }
.uu-tjekrad--spin{ color:#3A4642; }
.uu-tjekrad--spin .uu-tjekrad__ikon{ border-color:#CDE7DA; border-top-color:#3EA66E; animation:uu-snur .7s linear infinite; }
.uu-tjekrad--ok{ color:#3A4642; }
.uu-tjekrad--ok .uu-tjekrad__ikon{ background:#3EA66E; border-color:#3EA66E; color:#fff; }
.uu-tjekrad--ok .uu-tjekrad__ikon::before{ content:"✓"; font-weight:800; }
.uu-tjekrad__detalje{ color:#7C8B82; font-size:12px; margin-left:2px; }
@keyframes uu-snur{ to{ transform:rotate(360deg); } }

/* — 1.123.27: visuel hjælp videre til nummerpladen på
   anbefalings-siden — mærke, rulning og glød (Henrik, 8/8-26).
   Gløden pulserer et begrænset antal gange og falder så til ro —
   konstant blink bliver hurtigt læst som støj. — */
.uu-naeste{ display:inline-flex; align-items:center; margin-left:12px; background:#E05A1E; color:#fff;
  font-size:11px; font-weight:800; letter-spacing:.07em; text-transform:uppercase;
  border-radius:999px; padding:5px 12px; animation:uu-hop .55s ease 3; }
@keyframes uu-hop{ 50%{ transform:translateY(-3px); } }
.uu-plade-glow{ animation:uu-gloed 1.2s ease-in-out 5; border-radius:14px; }
@keyframes uu-gloed{ 0%,100%{ box-shadow:0 0 0 0 rgba(62,166,110,0); }
  50%{ box-shadow:0 0 0 7px rgba(62,166,110,.28); } }

/* — 1.123.28: MOBIL på anbefalings-siden (Henrik, 8/8-26).
   Trin-hovederne knækkede over flere linjer på smalle skærme
   ("Kørsel og pris" på tre linjer, "Se din ladepris" på to).
   Rettelserne er afgrænset til anbefalings-siden (page-id-97086),
   så forsidens motor ikke røres. — */
@media (max-width:600px){
  .page-id-97086 .motor-trin__bjaelke,
  .page-id-97086 .motor-trin__head{ flex-wrap:nowrap; align-items:center; gap:8px; }
  .page-id-97086 .motor-trin__titel{ font-size:16px; white-space:nowrap; }
  .page-id-97086 .motor-trin__hint{ display:none; }
  .page-id-97086 .uu-naeste{ font-size:10px; padding:4px 9px; margin-left:8px; letter-spacing:.05em; }

  /* 1.123.30 — UDBYDERSIDENS ADRESSEFELT PÅ MOBIL (Henrik, 8/8-26):
     Feltet og "Se anbefaling"-knappen delte den hvide pille side om
     side — feltet endte på 117 px. På mobil stables de nu: felt i
     fuld bredde øverst, knap i fuld bredde under. */
  .uu-motor{ padding:18px 14px; }
  .uu-motor__in{ flex-wrap:wrap; gap:8px; padding:8px; border-radius:16px; }
  .uu-motor__in input{ flex:1 1 100%; min-width:0; padding:10px 8px; }
  .uu-motor__in button{ flex:1 1 100%; padding:13px 0; }

  /* 1.123.29 — MOTOREN SKAL FYLDE MOBILSKÆRMEN UD (Henrik, 8/8-26,
     ca. 85 % af de besøgende er på mobil). Fire lag polstring å 24 px
     i hver side åd 192 px af skærmen: adressefeltet endte på 194 px,
     den fortrykte tekst blev skåret af, og man kunne ikke se, hvad
     man selv skrev. Polstringen strammes lag for lag — kun på denne
     side, kun på mobil. Feltet ender på ~320 px i stedet. */
  .page-id-97086 .container{ padding-left:12px; padding-right:12px; }
  .page-id-97086 #bilopladning-motor{ padding-left:10px; padding-right:10px; }
  .page-id-97086 .motor-trin{ padding-left:14px; padding-right:14px; }
  .page-id-97086 .motor-trin__krop{ padding-left:0; padding-right:0; }
}

/* — 1.123.31 er FJERNET og afløst af 1.123.32 nederst i filen:
   den byggede en ny lup (.uu-ro + uu-lup-puls) i stedet for at
   genbruge forsidens. Se blokken sidst i filen. — */

/* — 1.123.15: personligt lag fra den fælles hukommelse — */
.uu-personlig{ display:inline-block; margin:10px 0 0; background:#EAF6F0; border:1px solid #D3EADD;
  border-radius:12px; padding:10px 15px; font-size:13.5px; line-height:1.5; color:#0B7352; }
.uu-personlig--obs{ background:#FFF3DC; border-color:#F0DFC4; color:#8A5A17; }
.uu-boks .pk-tp{ display:inline-flex; margin-bottom:4px; }
@media (max-width:760px){
  .npk-aarrad{ padding:6px 8px 6px 12px; }
  .npk-aarhjul{ margin-left:auto; }
}

/* ============================================================
 * 1.123.32 — ANBEFALINGS-SIDEN: MOTORENS EGEN ÅBNING + FORSIDENS LUP
 * (Henrik, 8. august 2026. Afløser 1.123.31's lup-blok.)
 * ============================================================
 * Sidste blok i filen. Ingen !important.
 */

/* 1) Trin 2 rummer på DENNE side også adressemodulet, så kroppen
      bliver ca. 1.750 px høj. Motorens egen åbne-regel stopper ved
      max-height:1200px med overflow:hidden — resten ville blive
      klippet af. Vi hæver kun loftet, og kun for netop dette kort;
      motorens mekanik (klassen is-aaben) er ellers urørt.
      overflow:visible er nødvendigt, for at adressemodulets
      forslagsliste kan hænge ud over kortets kant. */
.page-id-97086 #motor-trin-2.is-aaben .motor-trin__krop{
  max-height: none;
  overflow: visible;
}

/* 2) Luppen ved nummerpladen er FORSIDENS lup — samme klasser,
      samme animation (@keyframes fhLup, defineret tidligere i
      filen), samme logik: ikonet pulserer, mens feltet er tomt, og
      knappen bliver orange CTA, når der ER tastet. Konstant blink
      ville efter få sekunder blive læst som støj. */
/* RETTET 1.123.33 (Henrik, 8. august 2026):
   knappen havde border-radius:12px hele vejen rundt. Den sidder inde i
   pladefeltet, som er hvidt med 3 px grøn kant og 9 px hjørner — så den
   orange flade rundede sine hjørner INDE i den hvide flade, og der stod
   fire hvide trekanter tilbage omkring den. Pladefeltets indvendige
   hjørne er 9 − 3 = 6 px; knappen får nu præcis den runding i højre
   side og skarp kant ind mod feltet, så orangen slutter helt tæt. */
.page-id-97086 .motor-plade__sog{
  flex: 0 0 52px;
  border-radius: 0 6px 6px 0;
  transition: background .25s, color .25s;
}

/* Pulsen var scale(1.3) hvert 1,5. sekund uden ende — for kraftig på en
   42 px knap, og et blink der aldrig holder op, bliver læst som støj.
   Nu et roligt åndedrag, der falder til ro af sig selv. */
.page-id-97086 .motor-plade__sog.er-tom svg{ animation: bopLupRo 2.6s ease-in-out 6; }
@keyframes bopLupRo{
  0%,100%{ transform:scale(1);    opacity:.7; }
  50%    { transform:scale(1.09); opacity:1;  }
}

.page-id-97086 .motor-plade__sog.er-klar{ background: var(--cta-orange, #E8622A); color:#fff; border-left-color: rgba(0,0,0,.10); }
.page-id-97086 .motor-plade__sog.er-klar svg{ color:#fff; stroke:#fff; animation:none; }
.page-id-97086 .motor-plade__sog.er-klar:hover{ background:#d4551f; color:#fff; }

@media (prefers-reduced-motion: reduce){
  .page-id-97086 .motor-plade__sog.er-tom svg{ animation: none; }
}

/* Gløden hører til selve pladen, ikke til den fuldbredde-række, pladen
   ligger i — ellers tegnes ringen om hele linjen på brede skærme. */
.motor-plade__felt.uu-plade-glow{ border-radius:9px; }



/* ============================================================
 * 1.123.43 — UDBYDERSIDENS INDGANG (np-motor) + FORSIDENS BLOK
 * (Henrik, 8. august 2026)
 * ============================================================
 * Indgangen er det aftalte element. Forsidens egen blok står
 * nedenunder — ORDRET som på forsiden — men dens eget pladefelt
 * er skjult, for der må ikke stå to pladefelter på siden.
 * Alt andet i blokken (kvittering, motor, rytme) er urørt.
 * ============================================================ */
/* "Har du ingen elbil endnu?" bliver stående — den fører videre til
 * bil-størrelserne og /skift-til-elbil/, og den hører hjemme her.
 * (19/8: kommentaren her var gået i stykker — de to linjer stod uden
 * åbning, så reglen lige under blev smidt væk af browseren. Derfor
 * stod forsidens grønne pladefelt synligt på alle udbydersider.) */
.uu-fh .fh__kort{ display:none; }
.uu-fh{ padding-top:0; }

.np-motor{
  position:relative; overflow:hidden; border-radius:22px;
  background:radial-gradient(115% 135% at 85% 0%,#4C8D74 0%,#3C7962 45%,#2F6353 100%);
  border:1px solid #2C5B4B;
  box-shadow:0 22px 50px -26px rgba(16,50,39,.62), 0 2px 6px rgba(16,50,39,.14);
}
.np-motor__bjaelke{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  padding:14px 32px; background:rgba(0,0,0,.16);
  border-bottom:1px solid rgba(233,247,240,.20);
}
.np-motor__bjaelke span:not(.np-motor__led){
  font-size:11.5px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:#D5EADF;
}
.np-motor__led{
  width:9px; height:9px; border-radius:50%; background:#A8E7C6;
  box-shadow:0 0 10px 2px rgba(168,231,198,.55); animation:npPuls 1.8s ease-in-out infinite;
}
@keyframes npPuls{ 0%,100%{opacity:.4} 50%{opacity:1} }

.np-motor__in{
  display:grid; grid-template-columns:1fr 404px; gap:46px; align-items:center;
  padding:38px 40px 42px;
}
.np-motor__h{
  font-family:var(--font-display); font-size:clamp(1.7rem,3.3vw,2.4rem); font-weight:700;
  color:#fff; margin:0 0 13px; line-height:1.12; letter-spacing:-.026em;
}
.np-motor__h u{ text-decoration:none; color:#A8E7C6; }
.np-motor__p{ margin:0 0 24px; color:#D7EAE1; font-size:var(--text-md); max-width:44ch; }

.np-motor__bar{
  height:8px; border-radius:999px; background:rgba(255,255,255,.18);
  overflow:hidden; max-width:440px; margin-bottom:11px;
}
.np-motor__bar i{
  display:block; height:100%; width:25%; border-radius:999px;
  background:linear-gradient(90deg,#3EA66E,#A8E7C6);
  box-shadow:0 0 12px rgba(62,166,110,.45);
  animation:npLad 5s ease-in-out infinite;
}
@keyframes npLad{ 0%{width:6%} 25%{width:25%} 50%{width:52%} 75%{width:78%} 100%{width:100%} }
.np-motor__trin{
  display:flex; justify-content:space-between; max-width:440px;
  font-size:11.8px; font-weight:700; color:#CBE4D8; letter-spacing:.04em;
}

.np-motor__boks{
  background:#fff; border:1px solid rgba(255,255,255,.5); border-radius:18px; padding:22px;
  box-shadow:0 22px 46px -22px rgba(10,38,29,.65), 0 1px 2px rgba(0,0,0,.08);
}
.np-motor__label{
  display:block; font-size:11.5px; font-weight:800; letter-spacing:.11em;
  text-transform:uppercase; color:var(--color-primary-dark,#0B7352); margin:0 0 11px;
}

.np-plade{
  position:relative; display:flex; align-items:stretch; background:#fff;
  border:3px solid var(--color-primary,#3EA66E); border-radius:10px; overflow:hidden; height:62px;
  box-shadow:0 6px 14px -8px rgba(16,50,39,.45), inset 0 -2px 0 rgba(0,0,0,.05);
  transition:box-shadow .2s ease, transform .2s ease;
}
.np-plade:focus-within{ box-shadow:0 0 0 4px rgba(62,166,110,.28); transform:translateY(-1px); }
.np-plade__eu{
  flex:0 0 42px; background:linear-gradient(180deg,#0B7352,#123C30);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; padding:5px 0;
}
.np-plade__stjerner{
  width:19px; height:19px; background-size:contain; background-repeat:no-repeat; background-position:center;
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Ccircle%20cx='12'%20cy='3'%20r='1.25'%20fill='%23FFCC00'/%3E%3Ccircle%20cx='16'%20cy='4.07'%20r='1.25'%20fill='%23FFCC00'/%3E%3Ccircle%20cx='18.93'%20cy='7'%20r='1.25'%20fill='%23FFCC00'/%3E%3Ccircle%20cx='20'%20cy='11'%20r='1.25'%20fill='%23FFCC00'/%3E%3Ccircle%20cx='18.93'%20cy='15'%20r='1.25'%20fill='%23FFCC00'/%3E%3Ccircle%20cx='16'%20cy='17.93'%20r='1.25'%20fill='%23FFCC00'/%3E%3Ccircle%20cx='12'%20cy='19'%20r='1.25'%20fill='%23FFCC00'/%3E%3Ccircle%20cx='8'%20cy='17.93'%20r='1.25'%20fill='%23FFCC00'/%3E%3Ccircle%20cx='5.07'%20cy='15'%20r='1.25'%20fill='%23FFCC00'/%3E%3Ccircle%20cx='4'%20cy='11'%20r='1.25'%20fill='%23FFCC00'/%3E%3Ccircle%20cx='5.07'%20cy='7'%20r='1.25'%20fill='%23FFCC00'/%3E%3Ccircle%20cx='8'%20cy='4.07'%20r='1.25'%20fill='%23FFCC00'/%3E%3C/svg%3E");
}
.np-plade__dk{ color:#fff; font-weight:800; font-size:9.5px; letter-spacing:.06em; line-height:1; }
.np-plade__input{
  flex:1 1 auto; min-width:0; border:0; background:transparent; font-family:var(--font-body);
  font-size:1.45rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase;
  color:#14231D; padding:0 10px 0 15px;
  text-shadow:0 1px 0 rgba(255,255,255,.9), 0 -1px 0 rgba(0,0,0,.10);
}
.np-plade__input::placeholder{ color:#C3CCC7; font-weight:800; }
.np-plade__input:focus{ outline:0; }

.np-motor__cta{
  margin-top:14px; width:100%; display:inline-flex; align-items:center; justify-content:center; gap:10px;
  background:var(--color-primary,#3EA66E); color:#fff; border:0;
  font-family:var(--font-body); font-weight:800; font-size:var(--text-md); letter-spacing:-.005em;
  padding:17px 24px; border-radius:13px; cursor:pointer;
  box-shadow:0 10px 22px -12px rgba(16,60,42,.75);
  transition:transform .16s cubic-bezier(.34,1.56,.64,1), background .18s ease, box-shadow .18s ease;
}
.np-motor__cta:hover{ transform:translateY(-3px); background:#45B278; box-shadow:0 16px 28px -14px rgba(16,60,42,.8); }
.np-motor__cta:active{ transform:translateY(-1px); }
.np-motor__cta:focus-visible{ outline:3px solid #7ED4A6; outline-offset:3px; }
.np-motor__cta svg{ transition:transform .18s ease; }
.np-motor__cta:hover svg{ transform:translateX(3px); }

.np-motor__mikro{ margin:12px 0 0; font-size:12.6px; color:var(--color-text-muted,#6B7B76); text-align:center; }

/* Når motoren har taget over, træder indgangen af — ét pladefelt ad gangen.
   Vil man skifte bil, sidder knappen inde i motorens trin 1. */
.np-motor[hidden]{ display:none; }

@media (max-width:900px){ .np-motor__in{ grid-template-columns:1fr; gap:26px; padding:28px 22px 32px; } }
@media (max-width:600px){
  .np-motor__bjaelke{ padding:11px 18px; gap:9px; }
  .np-motor__bjaelke span:not(.np-motor__led){ font-size:10px; letter-spacing:.06em; }
  .np-motor__in{ padding:24px 18px 26px; }
  .np-motor__h{ font-size:1.5rem; }
  .np-motor__boks{ padding:18px; }
  .np-motor__trin{ font-size:10.5px; }
  .np-motor__trin span:nth-child(2){ font-size:0; }
  .np-motor__trin span:nth-child(2)::after{ content:"2 · ADR."; font-size:10.5px; }
}
@media (prefers-reduced-motion: reduce){
  .np-motor__led, .np-motor__bar i{ animation:none; }
  .np-motor__bar i{ width:25%; }
}

/* ============================================================
 * 1.123.46 — MOTOREN MÅ ALDRIG VÆRE USYNLIG, FORDI EN ANIMATION
 *            IKKE NÅEDE AT KØRE (9. august 2026)
 * ============================================================
 * MÅLT PÅ TESTSITET, IKKE GÆTTET. På /udbydere/clever/ blev
 * "GH11223" (benzinbil) tastet ind. Otte sekunder senere stod der:
 *
 *   #motoren            display: block      ← motoren er der
 *   #motor-fejl         hidden: false       ← beskeden er sat
 *   #motor-fejl         højde: 41 px        ← den fylder på skærmen
 *   .np-motor           hidden: true        ← indgangen er væk
 *   .forside-funnel     opacity: 0          ← MEN ALT ER USYNLIGT
 *
 * Brugeren ser altså sit indtastningsfelt forsvinde og INTET komme
 * i stedet. Det er præcis det, der er meldt som "der sker ikke noget"
 * og "motoren går ikke videre".
 *
 * ÅRSAGEN er linjen længere oppe i filen:
 *
 *   .forside-funnel.fh-kommer { animation: fhKom .75s ... both; }
 *
 * `both` betyder: brug animationens FØRSTE billede, indtil animationen
 * går i gang. Første billede er opacity: 0. Går animationen aldrig i
 * gang, bliver elementet hængende på opacity 0 for evigt. Og CSS-
 * animationer går netop ikke i gang, når fanen ligger i baggrunden —
 * browseren sætter dem på pause for at spare strøm.
 *
 * Det er FJERDE gang i dette projekt, at en baggrundsfane har stoppet
 * en animation midt i noget, brugeren skulle se: pristælleren stod på
 * 0, adressens procentbjælke stod på 73, og nu hele motoren. De tre
 * første blev lappet i JavaScript. Denne rettes i roden:
 *
 *   EN ANIMATION MÅ PYNTE. DEN MÅ ALDRIG VÆRE DET, DER GØR NOGET
 *   SYNLIGT. Uden fill-mode er elementets normale tilstand fuldt
 *   synligt — kører animationen, glider det pænt ind; kører den ikke,
 *   står det der bare med det samme. Aldrig usynligt.
 *
 * Sidste regel vinder, så denne linje afløser den tidligere. Ingen
 * !important.
 */
.forside-funnel.fh-kommer {
  animation: fhKomKunBevaegelse .75s cubic-bezier(.22,.7,.28,1);
  opacity: 1;
}

/* RETTET IGEN 1.123.47, samme dag, efter en NY måling.
   Det var ikke nok at fjerne `both`. Målt på /udbydere/clever/ med
   1.123.46 inde stod opacity stadig på 0 efter otte sekunder, selv om
   animationen kun varer 0,75 sekund.
   Forklaringen: browseren SÆTTER animationen PÅ PAUSE, når fanen ikke
   er den forreste — den fjerner den ikke. En animation, der står på
   pause i sit første billede, holder elementet på opacity 0 i det
   uendelige. `both` gjorde det værre, men var ikke årsagen.
   Derfor: animationen rører ikke længere opacity overhovedet. Den
   flytter kun elementet 16 px op på plads. Sættes den på pause, står
   motoren der bare — synlig, måske 16 px for lavt i et øjeblik.
   Det er den rigtige måde at fejle på. */
@keyframes fhKomKunBevaegelse {
	from { transform: translateY(16px); }
	to   { transform: none; }
}

/* ============================================================
 * 1.123.48 — MOBILRETTELSERNE SKAL GÆLDE, HVOR MOTOREN ER
 *            (9. august 2026)
 * ============================================================
 * De mobilrettelser, der blev lavet 8. august, blev bundet til
 * .page-id-97086 — altså kun /din-anbefaling/. Dengang var det den
 * eneste side, motoren kørte på.
 *
 * Nu kører den også på udbydernes undersider. Og de sider har slet
 * ingen page-id-klasse, fordi de bygges med en rewrite-regel — kroppen
 * sagde bogstaveligt <body class="blog">, indtil det blev rettet i
 * core 1.17.4. Rettelserne gjaldt derfor ingenting der.
 *
 * De to trin-hoveder, der knækkede over flere linjer på smalle skærme
 * ("Kørsel og pris" på tre linjer), er et problem alle de steder,
 * motoren står. Derfor hænges de nu på motoren selv i stedet for på
 * en side. Så følger de med, uanset hvor motoren sættes ind næste gang.
 *
 * De øvrige regler fra 8. august står urørt. De handler om polstring i
 * .container, som kun findes på anbefalings-siden, og de gør hverken
 * fra eller til andre steder. Målt: intet klippes af i trin 2 på
 * udbyder-siden.
 */
@media (max-width:600px){
  #bilopladning-motor .motor-trin__bjaelke,
  #bilopladning-motor .motor-trin__head{ flex-wrap:nowrap; align-items:center; gap:8px; }
  #bilopladning-motor .motor-trin__titel{ font-size:16px; white-space:nowrap; }
  #bilopladning-motor .motor-trin__hint{ display:none; }
  #bilopladning-motor .uu-naeste{ font-size:10px; padding:4px 9px; margin-left:8px; letter-spacing:.05em; }
}


/* ============================================================
 * 1.123.49 — FORSIDE-ILLUSTRATIONEN FYLDER 150 KB I STEDET FOR 973 KB
 *            (9. august 2026)
 * ============================================================
 * Filen assets/img/forside-illustration-v2.svg var en SVG-ramme
 * med et almindeligt billede pakket indeni. Billedet fyldte 688 KB
 * alene, fordi det var gemt med 255 farver og kornet overflade —
 * den slags fylder meget i PNG.
 *
 * Billedet er omkodet til WebP i kvalitet 90. Malt afvigelse:
 * 0,97 af 255 i gennemsnit pr. farvekanal. Sammenlignet side om
 * side i en rigtig browser: ingen synlig forskel.
 *
 * Originalen er IKKE slettet. Den ligger som
 * forside-illustration-v2.original-996kb.svg.bak i samme mappe.
 *
 * De ni sma lag, animationen bevaeger, er urorte og ligger stadig
 * som PNG. Kun grundbilledet er skiftet.
 *
 * front-page.php giver nu billedet temaets versionsnummer med i
 * adressen, sa browseren henter den nye fil efter hver opdatering.
 *
 * Ingen CSS er aendret. Ingen nye tvangsregler.
 * ============================================================ */


/* ============================================================
 * 1.123.50 — HJØRNESTENS-UNDERSIDER UDEN AT RØRE ADRESSERNE
 *            (9. august 2026)
 * ============================================================
 * Tre sider er nu undersider til /hjemmeladning/:
 * refusion, stroem-til-elbil og elaftale-og-ladeboks.
 *
 * De ligger BEVIDST ikke som 'overordnet side' i WordPress.
 * Det ville lave adressen om til /hjemmeladning/ladeboks-med-
 * refusion/, og den gamle adresse ligger i Google i dag med
 * 85 klik og 6.461 visninger paa 16 maaneder. Den skal beholdes.
 *
 * I stedet staar forholdet i et felt paa siden selv,
 * _bilopladning_hjornesten. Broedkrummen og 'Se ogsaa'-blokken
 * laeser det felt. Adressen er uroert.
 *
 * Broedkrummen skriver nu ogsaa sin egen schema.org-data.
 * Foer laa den opgave hos Yoast, som ikke er installeret — og
 * beslutningen om, hvorvidt det bliver det, er ikke truffet.
 *
 * Ingen CSS er aendret i denne omgang. Ingen nye tvangsregler.
 * ============================================================ */


/* ============================================================
 * 1.123.52 — FORSIDENS KORT LOVER IKKE LAENGERE EN VEJ UD,
 *            DER IKKE FINDES (9. august 2026)
 * ============================================================
 * Da de 12 affiliate-links blev fjernet fra udbydere uden aktiv
 * aftale, kom en gammel forskel frem: /ladeboks/ skifter selv
 * knappen til en intern "Se detaljer", naar der ikke er et link.
 * Det gjorde forsiden ikke — den skrev "Gaa til udbyder" uanset
 * hvad og pegede paa vores egen produktside.
 * Maalt 9. august: 16 af 30 kort paa forsiden.
 *
 * Forsiden foelger nu samme regel. Uden affiliate-link staar der
 * "Se detaljer", knappen er MOERKEGROEN, og rel="nofollow
 * sponsored" er taget af — det er vores egen side.
 *
 * Farvereglen holdes: ORANGE = ud til en udbyder.
 * MOERKEGROEN = en intern vej.
 * ============================================================ */
.fsx .pk3__b1--intern{ background: var(--dark, #0B7352); }
.fsx .pk3__b1--intern:hover{ background:#143B30; }

/* 1.123.54 — knappen paa forsidens kort uden affiliate-link hedder nu
   'Se ladeboksen' i stedet for 'Se detaljer'. Kortet har i forvejen en
   diskret '+ Se detaljer'-knap, der folder specifikationerne ud (besluttet
   24. juli), og de to stod med samme ord to steder paa samme kort.
   Den udfoldende knap er roert ikke. /ladeboks/ beholder 'Se detaljer',
   for der findes udfolderen ikke. */

/* 1.123.55 — EN KNAP, EN FARVE, EN TEKST (9. august 2026, Henriks regel)
   Alle knapper paa produktkort er orange og hedder 'Gaa til udbyder'.
   Har udbyderen en aftale, foerer knappen direkte ud via affiliate-
   linket. Har den ingen aftale, foerer den ind paa udbyderens egen
   underside, hvor brugeren kan sendes videre til en aktiv udbyder.
   Undtagelsen er historik-kortene paa /udbydere/, der forbliver graa.
   Reglen afloeser 1.123.52-54, hvor kort uden aftale var moerkegroenne.
   .fsx .pk3__b1--intern bruges ikke laengere, men staar tilbage i
   filen, saa den kan tages i brug igen uden at skrive den forfra. */

/* 1.123.56 — 'Se udbyder' paa de kort, der foerer ind (Henrik, 9. august).
   Farven er den samme orange, og pladsen er den samme. Kun verbet skifter:
   'Gaa til udbyder' bruges, hvor knappen reelt sender brugeren ud af huset,
   og 'Se udbyder', hvor den foerer ind paa vores egen udbyderside. */

/* 1.123.57 — 'Se udbyder' PAA ALLE produktknapper (Henrik, 9. august).
   Én tekst, uanset om knappen foerer ud til udbyderens egen side eller
   ind paa vores. Ordet passer til begge, og der er ingen regel at huske.
   Gaelder forsiden, /ladeboks/ og det enkelte produkts side.
   Paa produktsiden stod der foer 'Affiliate-link er ikke tilfoejet endnu'
   til brugeren, naar linket manglede — den udviklernote er vaek, og der
   staar nu samme knap ind til udbyderens underside. */

/* 1.123.58 — ALT OM 'VI TJENER IKKE PAA DEM' ER VAEK FRA FORSIDEN
   (Henrik, 9. august — han har bedt om det foer, og det var kommet igen).
   Fjernet fire steder: statusmaerket 'Uvildigt vist' / 'Aftale' paa
   produktkortene, noten under logostriben, tryghedskortet 'Vi viser
   ogsaa dem, vi ikke tjener paa', og halvdelen af SEO-saetningen, der
   lovede, at det staar paa kortet.
   Begrundelse: at skilte med en manglende aftale er en konverterings-
   draeber, og oplysningen svarer ikke paa et spoergsmaal, brugeren har
   stillet. Den lovpligtige markering af kommercielle links staar
   uroert i tryghedskortet 'Saadan tjener vi penge'. */

/* 1.123.59 — VEJEN VIDERE PAA UDBYDERE UDEN AFFILIATE-LINK
   (Henriks tekst, godkendt 9. august).
   Bundfeltet paa udbyder-undersiden faar en anden broedtekst og en
   ekstra knap 'Se alle udbydere', naar udbyderen findes, men vi ikke
   har et affiliate-link. Overskriften er den samme som foer.
   Reglen er selvvedligeholdende: den dag der saettes et link paa
   udbyderen, forsvinder blokken af sig selv og den normale tekst
   kommer tilbage. Ingen omtale af aftaler nogen steder. */
.uu-end__alle{ display:inline-block; margin-left:14px; }
@media (max-width:600px){ .uu-end__alle{ display:block; margin:12px 0 0; } }

/* 1.123.60 — de sidste to 'Gaa til udbyder' rettet til 'Se udbyder'.
   Begge steder er DOED KODE i dag: blokken i page.php koerer kun,
   hvis siden er forsiden, og forsiden bruger front-page.php.
   Abonnement-arkivet har nul indhold. De er rettet alligevel, saa
   reglen ogsaa gaelder, hvis koden en dag tages i brug igen.
   Selve fjernelsen af de doede blokke er sat paa lanceringstjeklisten
   — 200 linjer ud af en skabelon, der ogsaa viser /din-anbefaling/,
   hoerer ikke til sidst paa en arbejdsdag. */

/* 1.123.61 — PAGE.PHP RYDDET (10. august 2026)
   Den doede forside i page.php er taget ud. 199 linjer, der aldrig
   kunne koere: WordPress vaelger front-page.php til forsiden, naar
   den fil findes, og det gor den. Maalt foer fjernelsen — WordPress'
   egen raekkefolge gav front-page.php som vinder.
   Der er ingen ny CSS i denne udgave. Nummeret er hoejnet, fordi der
   er lagt filer op, og fordi browseren ellers bliver ved med at vise
   den gamle style.css.
   Den gamle page.php ligger som page.10aug.bak. */


/* ==========================================================================
   SKRIFTTYPER I TEMAET — 11. august 2026

   Hvorfor: Sora og Inter blev hentet hos Google ved hver sidevisning.
   Det er to fremmede servere, der skal svare, foer det foerste bogstav
   kan tegnes, og hver besoegendes adresse blev sendt med. Filerne
   ligger nu i temaet under assets/fonts/.

   Maalt samme dag: Google leverede fem @font-face-blokke, men kun TO
   filer — begge skrifter er variable, saa alle vaegte bor i samme fil.
   Derfor to filer her og ikke fem. Vaegtene angives som et spaend.

   Kun latin-udsnittet er hentet. Æ, Ø og Å ligger inden for det.
   ========================================================================== */

@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 400 600;
	font-display: swap;
	src: url('assets/fonts/inter-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'Sora';
	font-style: normal;
	font-weight: 500 600;
	font-display: swap;
	src: url('assets/fonts/sora-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ============================================================
 * 19/8 (Henrik): "Hvad tilboed X" - faktaboksen paa ophoerte
 * udbydersider. Redder SEO-vaerdien fra fordele/ulemper uden at
 * overskygge motoren: rolig, sandfarvet boks under historikteksten.
 * ============================================================ */
.uu-dengang{ background:#F7F5EF; border:1px solid #E7E1D2; border-radius:18px; padding:26px 30px; }
.uu-dengang h2{ margin-top:0; }
.uu-dengang__liste{ margin:14px 0 0; padding-left:22px; }
.uu-dengang__liste li{ margin:7px 0; }
.uu-dengang__note{ margin:16px 0 0; color:#6B6455; font-size:.95em; }
/* 19/8 (Henrik): den moerke .fh-flade stod som en tom, groen bjaelke under
 * motoren paa alle udbydersider (kun "Har du ingen elbil endnu?" var i den).
 * I hvile er blokken nu neutral - moerk baggrund og luft kommer foerst paa,
 * naar forloebet reelt starter (uu-adresse.js saetter uu-fh--aktiv). */
.uu-fh:not(.uu-fh--aktiv){ background:none; padding:0 0 6px; }
.uu-fh:not(.uu-fh--aktiv) .fh__door{ color:#40685A; }
.uu-fh.uu-fh--aktiv{ border-radius:22px; }
/* 19/8 aften (Henrik): "Vilkaar og udstyr" - de flyttede filtre samlet i
 * en bloed, sandfarvet ramme i venstre-panelet paa /ladeboks/, saa de
 * laeses som EN gruppe og ikke en lang, flad liste. */
.filter-vilkaar{ background:#F7F9F7; border:1px solid #DFE8E2; border-radius:14px; padding:14px 14px 4px; margin-top:6px; }
.filter-vilkaar__titel{ margin:0 0 12px; font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:#3C544A; }
.filter-vilkaar .filter-group{ margin-bottom:14px; }
.filter-vilkaar .filter-group--sidste{ margin-bottom:8px; }
.filter-vilkaar .filter-select{ width:100%; background:#fff; }
/* ============================================================
   TOPBAREN PAA /ladeboks/  —  1.123.71, 23. august 2026
   ------------------------------------------------------------
   Bygget efter mockup v9 (beslutningslog 16.24) og mobil-laden
   (16.26). Venstre-panelet er nedlagt; reglerne til det staar
   uroert ovenfor, fordi de er billige at lade ligge og dyre at
   fjerne midt i et redesign.

   Alt herunder er praefikset .tbar- eller haengt paa
   body.post-type-archive-ladeboks, saa ingen anden side kan
   rammes. Ingen tvangsregler: blokken staar sidst, og ved samme
   styrke vinder den sidste regel. Tallet 27 i style.css skal
   blive staaende.

   MOBIL: det er den SAMME markup som paa computer. Under 900 px
   bliver baren til en lade, der glider ind fra hoejre og laegger
   sig oven paa siden. 70 procent af brugerne er paa telefon.
   ============================================================ */

/* --- Siden bliver én spalte, naar panelet er vaek --- */
.post-type-archive-ladeboks .archive-layout{ grid-template-columns:1fr; }

/* --- Kortenes eget aarshjul er slukket her: baren styrer aaret --- */
.post-type-archive-ladeboks .npk-aarrad{ display:none; }

/* ============================================================
   1. SELVE BAREN (computer)
   ============================================================ */
.tbar{
  position:sticky; top:0; z-index:120;
  background:#fff; border-bottom:1px solid var(--color-border,#DFE8E2);
  transition:box-shadow .2s ease;
}
.tbar.er-rullet{ box-shadow:0 6px 18px rgba(15,40,30,.10); }
.tbar__in{ max-width:1312px; margin:0 auto; padding:12px 24px 0; }

.tbar__r1{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; padding-bottom:12px; }
.tbar__r2{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding-bottom:12px; }
.tbar__r3{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding-bottom:14px; }

/* --- Alle / Koeb / Leje --- */
.tbar__skifte{ display:flex; background:#F2F7F4; border:1px solid var(--color-border,#DFE8E2); border-radius:999px; padding:3px; }
.tbar__skifte button{
  border:0; background:none; font:inherit; font-size:14px; font-weight:600;
  color:#5C6B63; padding:9px 20px; border-radius:999px; cursor:pointer;
  transition:background .15s ease, color .15s ease; min-height:38px;
}
.tbar__skifte button:hover{ color:#0B7352; }
.tbar__skifte button.er-valgt{ background:#0B7352; color:#fff; }

.tbar__antal{ font-size:13px; color:#5C6B63; }
.tbar__antal b{ color:#0B7352; font-size:15px; }

/* --- Oekonomi: aars-vaelger og ét budgetfelt --- */
.tbar__oko{
  margin-left:auto; display:flex; align-items:center; gap:16px;
  background:#F7F5EF; border:1px solid #E7E1D2; border-radius:14px; padding:9px 15px;
}
.tbar__okotitel{
  font-size:11px; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  color:#8A6A2F; line-height:1.3;
}
.tbar__okotitel small{
  display:block; font-weight:500; text-transform:none; letter-spacing:0;
  color:#A08850; font-size:10.5px;
}
.tbar__aar{ display:flex; background:#fff; border:1px solid #E7E1D2; border-radius:999px; padding:2px; }
.tbar__aar button{
  border:0; background:none; font:inherit; font-size:12.5px; font-weight:600;
  color:#5C6B63; padding:7px 12px; border-radius:999px; cursor:pointer; min-height:32px;
}
.tbar__aar button:hover{ color:#0B7352; }
.tbar__aar button.er-valgt{ background:#0B7352; color:#fff; }

.tbar__budget{ display:flex; flex-direction:column; gap:4px; }
.tbar__budgetrk{ display:flex; align-items:center; gap:4px; }
.tbar__budgetfelt{
  display:flex; align-items:center; background:#fff; border:1px solid #D9D9D9;
  border-radius:9px; padding:9px 13px; min-width:104px; min-height:40px;
  transition:border-color .12s ease, box-shadow .12s ease;
}
.tbar__budgetfelt.er-aktiv{ border-color:#3EA66E; box-shadow:0 0 0 2.5px rgba(62,166,110,.28); }
.tbar__budgetfelt span{ font-size:13.5px; font-weight:500; color:#243B33; white-space:nowrap; }
.tbar__budgetpile{ display:flex; flex-direction:column; background:#fff; border:1px solid #D9D9D9; border-radius:8px; overflow:hidden; }
.tbar__budgetpile button{
  border:0; background:none; cursor:pointer; color:#5C6B63;
  font-size:9px; line-height:1; padding:4px 8px;
}
.tbar__budgetpile button:first-child{ border-bottom:1px solid #EEE; }
.tbar__budgetpile button:hover{ background:#EAF6F0; color:#0B7352; }
.tbar__budgettekst{ font-size:11px; color:#8A6A2F; font-weight:600; }

/* ============================================================
   2. LOGOHJULET
   ============================================================ */
.tbar__hjul{ display:flex; flex-direction:column; align-items:center; gap:3px; position:relative; }
.tbar__hjulrk{
  display:flex; align-items:center; gap:4px; background:#F2F7F4;
  border:1px solid var(--color-border,#DFE8E2); border-radius:999px; padding:3px 6px;
}
.tbar__hjulpil{
  border:0; background:none; cursor:pointer; color:#5C6B63;
  font-size:17px; line-height:1; padding:6px 8px; border-radius:999px; min-width:32px;
}
.tbar__hjulpil:hover{ background:#fff; color:#0B7352; }
.tbar__hjulchip{
  min-width:108px; height:32px; display:flex; align-items:center; justify-content:center;
  background:#fff; border-radius:999px; padding:3px 12px;
  font-size:12.5px; font-weight:800; color:#0B7352;
}
.tbar__hjulchip img{ max-height:22px; max-width:88px; display:block; }
.tbar__hjulalle{
  border:0; background:none; font:inherit; font-size:11px; color:#5C6B63;
  text-decoration:underline; text-underline-offset:2px; cursor:pointer; padding:2px 4px;
}
.tbar__hjulalle:hover{ color:#0B7352; }
.tbar__upanel{
  position:absolute; top:calc(100% + 8px); left:50%; transform:translateX(-50%);
  background:#fff; border:1px solid var(--color-border,#DFE8E2); border-radius:14px;
  box-shadow:0 14px 34px rgba(15,40,30,.14); padding:12px; width:min(420px,92vw);
  display:none; flex-wrap:wrap; gap:6px; z-index:140;
}
.tbar__upanel.er-vist{ display:flex; }
.tbar__ubrik{
  border:1px solid var(--color-border,#DFE8E2); background:#fff; border-radius:10px;
  padding:6px 10px; cursor:pointer; height:40px; display:flex; align-items:center; justify-content:center;
  font-size:12px; color:#0B7352;
}
.tbar__ubrik img{ max-height:20px; max-width:78px; }
.tbar__ubrik:hover{ border-color:#3EA66E; }
.tbar__ubrik.er-valgt{ border-color:#0B7352; background:#EAF6F0; }

/* ============================================================
   3. PILLERNE OG DEN FLADE VALGLINJE
   ============================================================
   Linjen ligger INDE i baren og skubber indholdet ned. Ingen
   svaevende boks, saa der aldrig ligger noget hen over listen.
   ============================================================ */
.tbar__pille{
  border:1px solid var(--color-border,#DFE8E2); background:#fff; border-radius:999px;
  padding:9px 16px; font:inherit; font-size:13.5px; font-weight:600; color:#243B33;
  cursor:pointer; display:inline-flex; align-items:center; gap:7px; min-height:40px;
  transition:border-color .15s ease, background .15s ease, color .15s ease;
}
.tbar__pille:hover{ border-color:#3EA66E; background:#F2F7F4; }
.tbar__pille.er-aaben{ border-color:#3EA66E; background:#EAF6F0; }
.tbar__pille.er-valgt{ background:#0B7352; border-color:#0B7352; color:#fff; }

.tbar__valglinje{ display:none; align-items:center; gap:7px; flex-wrap:wrap; padding:0 0 13px; }
.tbar__valglinje.er-vist{ display:flex; animation:tbarInd .15s ease; }
@keyframes tbarInd{ from{ opacity:0; transform:translateY(-5px); } to{ opacity:1; transform:translateY(0); } }

.tbar__chip{
  border:1px solid transparent; background:#EAF6F0; color:#215E44; border-radius:999px;
  padding:7px 14px; font:inherit; font-size:12.5px; font-weight:600; cursor:pointer;
  display:inline-flex; align-items:center; gap:6px; min-height:34px;
  transition:border-color .13s ease, background .13s ease, color .13s ease;
}
.tbar__chip:hover{ border-color:#3EA66E; }
.tbar__chip.er-valgt{ background:#0B7352; color:#fff; }
.tbar__chip.er-tom{ opacity:.35; cursor:default; }
.tbar__chip--lille{ padding:6px 12px; font-size:12px; min-height:32px; }

.tbar__funktioner{ display:flex; gap:6px; flex-wrap:wrap; align-items:center; }
.tbar__minititel{
  font-size:10.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  color:#5C6B63; margin-right:4px;
}
.tbar__nulstil{
  margin-left:auto; border:0; background:none; font:inherit; font-size:12.5px;
  color:#5C6B63; text-decoration:underline; text-underline-offset:3px; cursor:pointer; padding:8px 4px;
}
.tbar__nulstil:hover{ color:#0B7352; }

/* --- Dine valg --- */
.tbar__dinevalg{ display:none; align-items:center; gap:7px; flex-wrap:wrap; padding:0 0 14px; }
.tbar__dinevalg.er-vist{ display:flex; }
.tbar__valgchip{
  background:#0B7352; color:#fff; border:0; border-radius:999px;
  padding:6px 12px; font:inherit; font-size:12.5px; font-weight:600; cursor:pointer;
  display:inline-flex; align-items:center; gap:7px; min-height:32px;
}
.tbar__valgchip i{
  display:inline-flex; align-items:center; justify-content:center;
  width:16px; height:16px; border-radius:50%; background:rgba(255,255,255,.22);
  font-size:10px; font-style:normal;
}
.tbar__valgchip:hover i{ background:rgba(255,255,255,.4); }

/* ============================================================
   4. KORTENES CHIPS — smaa, lysegroenne og klikbare
   ============================================================ */
.post-type-archive-ladeboks .npk-specs{ gap:5px; }
.post-type-archive-ladeboks .npk-spec{
  background:#EAF6F0; color:#215E44; border:1px solid transparent; border-radius:999px;
  padding:4px 10px; font-size:11.5px; font-weight:600; gap:0;
}
.post-type-archive-ladeboks .npk-spec svg{ display:none; }
.post-type-archive-ladeboks .npk-spec--krav{ background:#FBF4E7; color:#8A6420; }
.post-type-archive-ladeboks .npk-spec--klik{ cursor:pointer; }
.post-type-archive-ladeboks .npk-spec--klik:hover{ border-color:#3EA66E; }
.post-type-archive-ladeboks .npk-spec--klik:focus-visible{ outline:2px solid #3EA66E; outline-offset:2px; }
.post-type-archive-ladeboks .npk-spec.er-valgt{ background:#0B7352; color:#fff; border-color:#0B7352; }

/* ============================================================
   5. MOBIL-LADEN
   ============================================================
   Under 900 px vises siden normalt. En tydelig knap aabner
   filtreringen, som glider ind fra hoejre og laegger sig oven
   paa siden. Nederst staar "Se resultat" fast med tallet, og
   knappen kan aabne laden igen bagefter.
   Knappen er MOERKEGROEN, ikke orange: orange betyder "ud til
   udbyderen" og maa kun staa ét sted ad gangen.
   ============================================================ */
.tbar-cta{ display:none; }
.tbar-skygge{ display:none; }

@media (max-width:900px){

  .tbar-cta{
    display:flex; align-items:center; justify-content:center; gap:10px;
    position:sticky; top:8px; z-index:110;
    width:calc(100% - 32px); margin:12px auto 4px;
    background:#0B7352; color:#fff; border:0; border-radius:999px;
    padding:14px 20px; font:inherit; font-size:15px; font-weight:700;
    cursor:pointer; box-shadow:0 6px 18px rgba(15,40,30,.18); min-height:52px;
  }
  .tbar-cta__tal{
    background:rgba(255,255,255,.2); border-radius:999px;
    padding:2px 10px; font-size:13px; font-weight:700;
  }

  .tbar-skygge{
    display:block; position:fixed; inset:0; z-index:1150;
    background:rgba(12,32,25,.45); opacity:0; pointer-events:none;
    transition:opacity .25s ease;
  }
  .tbar-skygge.er-vist{ opacity:1; pointer-events:auto; }

  .tbar{
    position:fixed; top:0; right:0; bottom:0; left:auto; z-index:1200;
    width:min(420px,92vw); max-width:none;
    background:#fff; border:0; border-left:1px solid var(--color-border,#DFE8E2);
    box-shadow:-14px 0 34px rgba(15,40,30,.18);
    transform:translateX(102%); transition:transform .28s ease;
    display:flex; flex-direction:column; overflow:hidden;
  }
  .tbar.er-aaben{ transform:translateX(0); }

  .tbar__in{
    padding:56px 18px 14px; max-width:none; overflow-y:auto;
    flex:1 1 auto; -webkit-overflow-scrolling:touch;
  }

  .tbar__luk{
    display:flex; align-items:center; justify-content:center;
    position:absolute; top:10px; right:12px; z-index:2;
    width:44px; height:44px; border-radius:50%;
    border:1px solid var(--color-border,#DFE8E2); background:#fff;
    color:#0B7352; font-size:16px; cursor:pointer;
  }

  .tbar__bund{
    display:block; flex:0 0 auto; padding:12px 18px calc(12px + env(safe-area-inset-bottom));
    border-top:1px solid var(--color-border,#DFE8E2); background:#fff;
  }
  .tbar__se{
    width:100%; border:0; border-radius:999px; background:#0B7352; color:#fff;
    font:inherit; font-size:16px; font-weight:700; padding:15px 18px;
    cursor:pointer; min-height:54px;
  }
  .tbar__se span{
    display:inline-block; margin-left:6px; background:rgba(255,255,255,.2);
    border-radius:999px; padding:2px 10px; font-size:14px;
  }

  /* Indholdet stables, saa alt kan naas med tommelfingeren. */
  .tbar__r1,.tbar__r2,.tbar__r3{ flex-direction:column; align-items:stretch; gap:12px; }
  .tbar__oko{ margin-left:0; flex-direction:column; align-items:stretch; gap:12px; }
  .tbar__skifte{ width:100%; }
  .tbar__skifte button{ flex:1 1 0; padding:11px 8px; }
  .tbar__aar{ flex-wrap:wrap; }
  .tbar__aar button{ flex:1 1 30%; }
  .tbar__hjul{ align-items:stretch; }
  .tbar__hjulrk{ justify-content:space-between; }
  .tbar__hjulchip{ flex:1 1 auto; }
  .tbar__upanel{ position:static; transform:none; width:100%; box-shadow:none; margin-top:8px; }
  .tbar__pille{ width:100%; justify-content:space-between; }
  .tbar__valglinje{ padding-left:0; }
  .tbar__nulstil{ margin-left:0; align-self:flex-start; }
  .tbar__antal{ order:-1; }

  body.tbar-laast{ overflow:hidden; }
}

@media (min-width:901px){
  .tbar__luk{ display:none; }
  .tbar__bund{ display:none; }
}

/* ============================================================
   6. UDBYDER-OVERSIGTENS EMBLEMER — halveret 23. august 2026
   ============================================================
   Beslutning 16.24. Emblemerne fyldte mere end teksten paa
   kortet. Skriften gaar fra 11,5 til 10,5 px og polstringen
   fra 5/10 til 2,5/8 px.
   ============================================================ */
.uo-em{ gap:4px; margin:0 0 14px; min-height:20px; }
.uo-em span{ font-size:10.5px; padding:2.5px 8px; }

/* --- Baren og listen skal staa paa samme lodrette linje ---
   Produktlisten har max-width 980 px af hensyn til laesbarheden.
   Uden det herunder stod baren 284 px bredere end kortene, og
   oejet kunne ikke se, at de to hoerer sammen (gestalt: naerhed).
   Tilfoejet 23. august 2026, samme runde som topbaren. */
/* 27/9 2026 (Henrik, M48/N317): listen foelger listebredden 1120 og flugter med bjaelken. Var 980. */
.post-type-archive-ladeboks .archive-layout > div{ width:100%; max-width:1120px; margin-inline:auto; }
.tbar__in{ max-width:1028px; }
/* --- Oekonomi-elementet strammet, saa niveau 1 staar paa én linje ---
   Maalt 23. august: skifte 209 + taeller 86 + oekonomi 665 + to mellemrum
   = 992 px mod de 980, listen har. Kassen faldt derfor ned paa sin egen
   linje og efterlod et tomt felt ved siden af taelleren. Her er der
   hentet 36 px i polstring og mellemrum - ikke i skriftstoerrelse. */
.tbar__r1{ gap:14px; }
.tbar__oko{ gap:12px; padding:9px 13px; }
.tbar__aar button{ padding:7px 10px; }
/* ============================================================
   MOBIL-GENNEMGANG 23. august 2026
   ------------------------------------------------------------
   70 procent af brugerne er paa haandholdte enheder. Alt
   herunder er maalt i en 390 px bred visning, ikke skoennet.
   Der er ikke fjernet noget - kun givet luft og stoerre
   berøringsflader.
   ============================================================ */

/* --- 1. Kortets chips kunne kun staa én pr. linje ---
   Maalt: kortet er et gitter paa 90 px billede + 196 px tekst,
   og en chip fylder 111-124 px. Derfor stod hver chip paa sin
   egen linje, og et kort med tre vilkaar blev tre linjer hoejt.
   Billedet og mellemrummet giver 40 px tilbage til teksten, og
   chippen bliver et hak mindre: nu staar to paa hver linje. */
@media (max-width:560px){
  /* Samme vaelger som de aeldre regler ovenfor - ellers vinder de paa
     styrke, uanset at denne blok staar sidst. Maalt: den gamle regel
     hedder .pk-wrap .npk, .uu-boks .npk. */
  /* 24/9 2026 (Henrik): produktbilledet var 48 punkter bredt, mens
     rummet omkring det var 172 - der stod 124 punkter tomt over og
     under billedet. Maerkaterne flyttes ned UNDER billedet i stedet
     for ved siden af det, saa de ikke laengere skal dele bredden.
     Saa kan billedet blive 110 i stedet for 48, og maerkaterne staar
     stadig to og to paa linje.
     Maalt: kortet gaar fra 227 til 246 punkter i hoejden, og det er
     stadig 34 lavere end foer dagens arbejde. Kun telefon - laptop
     er ikke roert, reglen staar bag 560 punkter. */
  .pk-wrap .npk, .uu-boks .npk{ grid-template-columns:110px 1fr; gap:10px; padding:14px 14px 14px 16px; align-items:start; }
  .pk-wrap .npk-midt, .uu-boks .npk-midt{ display:contents; }
  .pk-wrap .npk-img, .uu-boks .npk-img{ width:110px; height:110px; grid-column:1; grid-row:1 / span 3; align-self:start; }
  .pk-wrap .npk .pk-tp, .uu-boks .npk .pk-tp{ grid-column:2; grid-row:1; }
  .pk-wrap .npk-navn, .uu-boks .npk-navn{ grid-column:2; grid-row:2; }
  .pk-wrap .npk-sub, .uu-boks .npk-sub{ grid-column:2; grid-row:3; }
  .pk-wrap .npk-specs, .uu-boks .npk-specs{ grid-column:1 / -1; grid-row:4; margin-top:6px; }
  .pk-wrap .npk-pris, .uu-boks .npk-pris{ grid-column:1 / -1; grid-row:5; }
  .post-type-archive-ladeboks .npk-specs{ gap:4px; }
  .post-type-archive-ladeboks .npk-spec{ font-size:13px; padding:1px 6px; }
}

/* --- 2. Luft under filtrerings-knappen ---
   Knappen sad klods op ad sorterings-feltet, saa de to lignede
   én blok. Naerhed betyder sammenhoerighed; de to hoerer ikke
   sammen. */
@media (max-width:900px){
  .tbar-cta{ margin-bottom:14px; }
  .post-type-archive-ladeboks .archive-toolbar{ margin-bottom:10px; }
}

/* --- 3. Sidefodens links var 16 px hoeje ---
   Maalt paa 23 links i sidefoden. En finger rammer daarligt
   under 44 px. Linjeafstanden er ikke roert; der er lagt
   polstring til, saa selve traefzonen bliver hoejere. */
@media (max-width:820px){
  .site-footer__kol a,
  .site-footer li a{ display:inline-block; padding:9px 0; line-height:1.25; }
  .site-footer li{ margin-bottom:0; }
}
/* --- 4. Filtrerings-knappen laa oven paa sidehovedet ---
   Maalt: sidehovedet er 74 px hoejt og klaeber med z-index 100.
   Knappen klaebede paa 8 px og blev derfor tegnet hen over
   logoet, naar der blev rullet. Den klaeber nu lige UNDER den
   klaebende header. */
@media (max-width:900px){
  .tbar-cta{ top:82px; }
}

/* ============================================================
   7. MOBIL-RETTELSER - UX-gennemgang 23. august 2026
   ------------------------------------------------------------
   Beslutning 16.26: 70 procent af brugerne er paa telefon.
   Maalt i 390 px viewport paa alle 14 sider. Tre steder knak
   det. Reglerne staar sidst og bruger ingen tvangsregler.
   Tallet 27 i style.css skal blive staaende.
   ============================================================ */

/* --- 7a. Motorens trin 1 paa /udbydere/<udbyder>/ ------------
   Nummerplade-feltet har en indbygget bredde paa 299 px, og
   fordi .np-motor er overflow:hidden blev hoejre side KLIPPET
   af: maalt 428 px indhold i en 390 px skaerm. Feltet faar lov
   at krympe, saa hele boksen holder sig inden for skaermen. */
@media (max-width:600px){
  .np-motor__in > *{ min-width:0; }
  .np-motor__boks{ min-width:0; }
  .np-plade{ min-width:0; }
  .np-plade__input{ flex:1 1 0; width:100%; min-width:0; font-size:1.25rem; letter-spacing:.10em; }
  .np-motor__trin{ flex-wrap:wrap; row-gap:4px; }
}

/* --- 7b. Tabeller i brancheteksten --------------------------
   /hvad-koster-det-at-lade-en-elbil/ har tre tabeller med 4-5
   spalter. Den bredeste maalte 416 px og skubbede hele siden
   sidelaens (scrollWidth 436 mod 390). Tabellen faar sin egen
   vandrette rulning, saa siden selv staar stille. Tallene
   roeres ikke - kun rammen om dem. */
@media (max-width:760px){
  .entry-content table{ display:block; overflow-x:auto; max-width:100%; -webkit-overflow-scrolling:touch; }
}

/* --- 7c. Kortenes chips som tommelfinger-maal ----------------
   Chippen er nu det, man filtrerer med paa telefonen. Den
   maalte 26 px i hoejden; med 6 px polstring bliver den 32 px.
   Kortet vokser 14 px - det er prisen for at kunne ramme. */
@media (max-width:560px){
  .post-type-archive-ladeboks .npk-specs{ gap:6px; }
  .post-type-archive-ladeboks .npk-spec{ padding:6px 10px; }
  .post-type-archive-ladeboks .plus-brik{ padding:6px 10px; }
}


/* ============================================================
   8. TOMMELFINGER-MAAL OG MINI-BAREN - runde 1, 23. august 2026
   ------------------------------------------------------------
   Anden gennemgang af alle sider i 390 px. To ting knak, resten
   var for smaa flader at ramme paa en telefon. Maalet er 32 px,
   den mindste flade en tommelfinger rammer sikkert.
   Alt staar i medieforespoergsler, saa computeren er uroert.
   ============================================================ */

/* --- 8a. Den faste bjaelke nederst paa udbyder-siderne -------
   Raekken var logo + navn + Trustpilot + knap paa én linje uden
   ombrydning: 444 px indhold i en 390 px skaerm. Knappen laa
   29 px uden for hoejre kant, saa pilen og en del af teksten
   var uden for skaermen. Stjernerne i bjaelken slukkes under
   560 px - TALLET bliver staaende, og stjernerne staar stadig
   oeverst paa siden. Intet tal og ingen saetning forsvinder. */
@media (max-width:560px){
  .uu-mini__in{ padding-left:14px; padding-right:14px; gap:8px; }
  .uu-mini__tp .tp__stars{ display:none; }
  .uu-mini__in .uu-orange{ flex:0 1 auto; min-width:0; padding-left:13px; padding-right:13px; }
}

/* --- 8b. Skyderen paa /skift-til-elbil/ ----------------------
   Selve sporet var 6 px hoejt. Feltet faar en usynlig polstring,
   saa der er 32 px at gribe fat i, mens sporet stadig ser tyndt
   ud: background-clip:content-box holder farven i midten. */
@media (max-width:760px){
  .skift-el__km-raekke input[type=range]{
    box-sizing:content-box; padding-top:13px; padding-bottom:13px;
    background-clip:content-box;
  }
}

/* --- 8c. Knapper og pile, der var for smaa -------------------
   Maalt hoejde staar i parentes. Ingen af dem flytter noget paa
   computeren; reglerne gaelder kun under 900 px. */
@media (max-width:900px){
  .ywheel__arrow{ min-width:34px; min-height:34px; }         /* var 13 px */
  .npk-aarhjul__pil{ min-width:32px; min-height:32px; }      /* var 20 px */
  .uu-wheel__spin button{ min-width:44px; min-height:44px; } /* var 18, saa 32, nu 44 (24/9 2026) */
  .seg button{ min-height:32px; }                            /* var 30 px */
  .det-toggle{ min-height:32px; }                            /* var 19 px */
  .fh__info{ min-width:30px; min-height:30px; }              /* var 19 px */
  .fh__door{ min-height:32px; }                              /* var 16 px */
  .loc{ min-height:32px; padding-top:6px; padding-bottom:6px; }  /* var 16 px */
  .pk-tp{ min-height:32px; }                                 /* var 19 px */
  .blk__head .blk__link{ padding-top:4px; padding-bottom:4px; }
  .npk-veje a{ padding-top:6px; padding-bottom:6px; }
  .uu-crumb a{ padding-top:8px; padding-bottom:8px; }
  .brodkrumme a{ display:inline-block; padding-top:8px; padding-bottom:8px; }

  /* Topbarens egne knapper - mine egne, og de var for smaa. */
  .tbar__budgetpile button{ min-height:32px; min-width:38px; font-size:11px; }
  .tbar__hjulpil{ min-height:34px; min-width:36px; }
  .tbar__hjulalle{ min-height:32px; padding-top:7px; padding-bottom:7px; }
  .tbar__budgetrk{ align-items:stretch; }
  .tbar__budgetfelt{ flex:1 1 auto; }
  .tbar__budgetpile{ flex:0 0 auto; }
}


/* ============================================================
   9. TOMMELFINGER-MAAL, RUNDE 2 - 23. august 2026
   ------------------------------------------------------------
   Anden maaling af alle sider fandt fem knapper og to titel-
   links, som runde 1 ikke ramte. Samme maal: 32 px.
   Titel-linket paa et kort er DET, folk trykker paa - det skal
   vaere stort nok, ogsaa naar titlen kun fylder én linje.
   ============================================================ */
@media (max-width:900px){

  /* Udbyder-oversigten */
  .uo-krumme a{ display:inline-block; padding-top:8px; padding-bottom:8px; }  /* var 16 px */
  .uo-filtre button{ min-height:32px; }                                       /* var 29 px */
  .uo-hjul__pil{ min-height:32px; min-width:34px; }                           /* var 26 px */
  .uo-navn a{ display:inline-block; padding-top:5px; padding-bottom:5px; }    /* var 24 px */

  /* Produktkortets titel og plus-brikken */
  .npk-navn h2 a,
  .npk-navn h3 a{ display:inline-block; padding-top:5px; padding-bottom:5px; } /* var 22 px */
  .plus-brik{ min-height:32px; display:inline-flex; align-items:center; justify-content:center; } /* var 23-29 px */
}

/* ------------------------------------------------------------
   BEVIDST IKKE AENDRET: links midt inde i en broedtekst.
   De maaler 21 px, men et link i loebende tekst skal have samme
   linjeafstand som teksten omkring det. Bliver de hoejere,
   springer linjerne fra hinanden, og afsnittet bliver svaerere
   at laese. Retningslinjerne undtager netop den slags links.
   ------------------------------------------------------------ */


/* ============================================================
   10. LAESESTIL PAA TEKSTSIDERNE - proeve, 23. august 2026
   ------------------------------------------------------------
   "Rammen" om teksten. Ikke ét ord er aendret; alt herunder er
   luft, linjelaengde, streger og baggrundsfarver.

   Klasserne bilo-lead og bilo-fakta saettes paa, naar siden
   vises (se functions.php). Det gemte indhold er uroert.

   Koerer kun paa body.bilo-laesestil, som lige nu kun er side
   97132. Ingen anden side kan rammes.
   ============================================================ */

/* --- 1. Linjelaengde og skrift ------------------------------
   Maalt foer: 85 tegn pr. linje. Det behagelige leje er 60-75.
   58ch maaler 69 tegn (ch er bredden af et nul, ikke af et
   gennemsnitligt bogstav - derfor ikke 68 som foerst antaget).
   Skriften er husets ene broedtekst, 17 punkter. Linjeafstanden
   er 1,7, fordi lovens 1,5 er kravet og ikke maalet.
   Samme ord - de knaekker bare et andet sted. */
.bilo-laesestil .hjornesten__indhold{ max-width:800px; }
.bilo-laesestil .entry-content{ font-size:17px; line-height:1.7; }
.bilo-laesestil .entry-content > p,
.bilo-laesestil .entry-content > ul,
.bilo-laesestil .entry-content > ol,
.bilo-laesestil .entry-content > p.bilo-lead,
.bilo-laesestil .entry-content > p.bilo-fakta{ max-width:58ch; }
.bilo-laesestil .entry-content > p{ margin:0 0 24px; }

/* 23/9 2026 (Henrik): ingen linjer med kun ét ord.
   Maalt foer paa /hjemmeladning/: 28 afsnit paa telefon og 9 paa
   laptop sluttede med ét enligt ord paa sidste linje. Browseren
   faar nu lov at flytte et ord ned i forvejen, saa sidste linje
   aldrig staar alene. Overskrifter fordeles jaevnt over deres
   linjer. Aeldre browsere springer reglen over uden skade.
   Maalt efter: 6 paa telefon og 1 paa laptop, og de tilbage er
   enkeltord, der er for lange til at dele linje med noget. */
.bilo-laesestil .entry-content > p,
.bilo-laesestil .entry-content li{ text-wrap:pretty; }
.bilo-laesestil .entry-content > h2,
.bilo-laesestil .entry-content h3,
.hjornesten__hero h1,
.hjornesten__undertekst{ text-wrap:balance; }

/* --- 2. Overskrifterne deler siden i afsnit -----------------
   Gestalt, naerhed: der skal vaere mere luft OVER en overskrift
   end under, saa den hoerer til sin egen tekst og ikke til den
   foregaaende. En tynd streg goer skiftet tydeligt.
   66 punkter over, 8 under. 8 er mindre end de 24 mellem to
   afsnit, og derfor binder overskriften nedad. */
.bilo-laesestil .entry-content > h2{
  margin-top:66px; margin-bottom:8px; padding-top:28px;
  border-top:1px solid #E3EBE6; font-size:26px; line-height:1.25;
}
.bilo-laesestil .entry-content > h2:first-child{
  margin-top:8px; padding-top:0; border-top:0;
}
.bilo-laesestil .entry-content h3{
  font-size:20px; line-height:1.3; margin-top:28px; margin-bottom:8px;
}

/* --- 3. Ledeafsnit -----------------------------------------
   Steder hvor teksten allerede ER en punktopstilling: "Fire ting
   flytter den:" efterfulgt af fire afsnit med hver sin fede
   indledning. De staar taettere sammen og faar en groen streg,
   saa de laeses som ét sammenhaengende saet - gestalt igen.
   Ordene er de samme. */
.bilo-laesestil .entry-content > p.bilo-lead{
  margin:0 0 10px; padding:14px 18px 14px 17px;
  border-left:3px solid #3EA66E; background:#F5FAF7;
  border-radius:0 12px 12px 0;
}
.bilo-laesestil .entry-content > p.bilo-lead strong{ color:#0B7352; }
.bilo-laesestil .entry-content > p.bilo-lead + p:not(.bilo-lead){ margin-top:26px; }
.bilo-laesestil .entry-content > p.bilo-lead + h2{ margin-top:70px; }

/* --- 4. Faktaboksene ---------------------------------------
   Afsnit der kun bestaar af en kursiveret saetning. Teksten
   fremhaever allerede sig selv; her faar den en ramme, saa
   oejet finder den. Kursiven bliver til halvfed, fordi kursiv
   over flere linjer laeses langsommere. */
.bilo-laesestil .entry-content > p.bilo-fakta{
  background:#EAF6F0; border:1px solid #CFE6DA; border-radius:16px;
  padding:20px 24px; margin:30px 0;
}
.bilo-laesestil .entry-content > p.bilo-fakta em{
  font-style:normal; font-weight:600; color:#0B7352;
}

/* --- 5. Tabellerne -----------------------------------------
   Foer: ingen streger og 1 px luft i cellerne - browserens rene
   standard. Nu: markeret hovedraekke, luft, skiftevis sand paa
   raekkerne. TALLENE ER IKKE ROERT, kun rammen om dem. */
.bilo-laesestil .entry-content table{
  width:100%; border-collapse:separate; border-spacing:0; margin:30px 0;
  font-size:17px; border:1px solid #DFE8E2; border-radius:14px; overflow:hidden;
}
.bilo-laesestil .entry-content thead th{
  background:#0B7352; color:#fff; text-align:left; font-weight:700;
  font-size:13px; letter-spacing:.04em; text-transform:uppercase; padding:13px 16px;
}
.bilo-laesestil .entry-content td{ padding:13px 16px; border-top:1px solid #EDF2EF; }
.bilo-laesestil .entry-content tbody tr:nth-child(even) td{ background:#F7F5EF; }
.bilo-laesestil .entry-content tbody td:first-child{ font-weight:600; color:#243B33; }

/* --- 6. Punktopstillinger ----------------------------------
   De faar en sandfarvet plade, saa de staar som ét sæt og ikke
   flyder sammen med broedteksten omkring. */
.bilo-laesestil .entry-content > ul{
  background:#F7F5EF; border:1px solid #EDE6D6; border-radius:14px;
  padding:20px 24px 20px 42px; margin:26px 0;
}
.bilo-laesestil .entry-content li{ margin:0 0 12px; }
.bilo-laesestil .entry-content > ul li:last-child{ margin-bottom:0; }
.bilo-laesestil .entry-content > ul li::marker{ color:#3EA66E; }

/* --- 7. Telefon --------------------------------------------
   Samme rytme, mindre polstring. Tabellen ruller stadig selv
   (regel 7b ovenfor), og den regel skal blive ved med at vinde,
   derfor saettes bredden ikke om her. */
@media (max-width:760px){
  .bilo-laesestil .entry-content > h2{
    margin-top:44px; padding-top:22px; font-size:22px;
  }
  .bilo-laesestil .entry-content > p.bilo-lead{ padding:12px 14px 12px 13px; }
  .bilo-laesestil .entry-content > p.bilo-fakta{ padding:16px 18px; border-radius:14px; }
  .bilo-laesestil .entry-content > ul{ padding:16px 18px 16px 36px; }
  /* 23/9 2026: tabellens hovedraekke var 11,5 og dermed under husets
     gulv paa 13. Rettet til 13. Tabellen ruller selv paa telefon,
     saa den bredere hovedraekke koster ingenting. */
  .bilo-laesestil .entry-content thead th{ font-size:13px; padding:10px 12px; }
  .bilo-laesestil .entry-content td{ padding:10px 12px; }

  /* Tabellen skal kunne trykkes til side med fingeren. Blokken
     ovenfor satte overflow:hidden for at klippe hjoernerne runde,
     og det slog rulningen fra paa telefon. Her vindes den tilbage. */
  .bilo-laesestil .entry-content table{ overflow:auto; }
}

/* ============================================================
   11. LAESESTIL PAA UDBYDERNES UNDERSIDER - 24. august 2026
   ------------------------------------------------------------
   Samme ramme som guiderne, tilpasset undersidernes opbygning.
   Ikke ét ord er aendret - alt herunder er luft, linjelaengde
   og streger.

   Maalt foer paa /udbydere/aura/: 84 tegn pr. linje, og HVER
   overskrift havde nul luft over sig. En overskrift, der
   klaeber til afsnittet foer den, hoerer visuelt til det
   forkerte sted. Gestaltloven om naerhed siger, at det der
   staar taettest sammen, laeses som sammenhoerende.

   Koerer kun paa body.bilo-rute-udbyder. Ingen anden side kan
   rammes.
   ============================================================ */

/* --- Linjelaengde ------------------------------------------
   58ch giver 69 tegn pr. linje maalt i sidens egen skrift.
   Enheden ch er bredden af et nul, som er smallere end et
   gennemsnitligt bogstav - derfor 58 og ikke 70. */
.bilo-rute-udbyder .uu-sec p,
.bilo-rute-udbyder .uu-sec li{ max-width:58ch; }

/* --- Om-afsnittet: samme skrift som guiderne ---------------
   Spalten begraenses, saa overskrift, streg og tekst deler
   samme hoejre kant. Ellers stod en smal tekst under en bred
   streg, og blokken hang ikke sammen. */
.bilo-rute-udbyder /* 24/9 2026: udbydersidens broedtekst var 18 med 1,72, mens resten af
   huset er 17 med 1,7. Nu ens. */
.uu-om{ font-size:17px; line-height:1.7; max-width:720px; }
.bilo-rute-udbyder .uu-om p{ margin:0 0 20px; }
.bilo-rute-udbyder .uu-om > h2{ max-width:none; }

/* --- Sektionerne faar luft og en streg imellem sig ---------
   Stregen ligger paa SEKTIONEN og ikke paa overskriften. Havde
   den ligget paa overskriften, ville den skaere maerkatet
   "Vi laegger det aerligt frem" fra sin egen overskrift. */
.bilo-rute-udbyder .uu-sec + .uu-sec{
  border-top:1px solid #E3EBE6; padding-top:48px; margin-top:44px;
}

/* --- Underoverskrifterne i Om-afsnittet --------------------
   De havde margin-top:0 og klaebede til afsnittet ovenfor. */
.bilo-rute-udbyder .uu-om h3{
  margin-top:40px; margin-bottom:14px; font-size:20px; max-width:58ch;
}
.bilo-rute-udbyder .uu-om h3:first-of-type{ margin-top:26px; }

/* --- Telefon ----------------------------------------------- */
@media (max-width:760px){
  .bilo-rute-udbyder .uu-om{ font-size:17px; line-height:1.7; }
  .bilo-rute-udbyder .uu-sec + .uu-sec{ padding-top:32px; margin-top:28px; }
  .bilo-rute-udbyder .uu-om h3{ margin-top:30px; font-size:19px; }
}


/* ============================================================
   13. TASTATUR OG KONTRAST - 24. august 2026
   ------------------------------------------------------------
   Fundet ved en gennemgang, der ikke var bestilt: der var INGEN
   synlig markering af, hvor tastaturet stod. Flere felter slog
   endda browserens egen markering fra uden at saette noget i
   stedet - blandt andet nummerpladefeltet, som er det foerste,
   en bruger roerer.

   Desuden faldt fem tekstfarver under kravet til laesbarhed
   (WCAG AA, 4,5:1 for almindelig tekst). Maalt paa /ladeboks/.
   ============================================================ */

/* --- 13a. Synlig tastatur-markering -------------------------
   :focus-visible rammer KUN, naar man bruger tastatur - musen
   giver ingen ramme. Derfor aendrer det intet for den, der
   klikker. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible{
  outline:3px solid #0B7352;
  outline-offset:2px;
}

/* Felterne der selv slog markeringen fra. De faar den frisk
   groenne, saa den ses inde i den hvide plade. */
.np-plade__input:focus-visible,
.la .plate input:focus-visible,
.la .addr:focus-visible,
.la .mail input:focus-visible,
.la .oneline input:focus-visible,
.uu-motor__in input:focus-visible{
  outline:3px solid #3EA66E;
  outline-offset:2px;
}

/* Nummerpladefeltet paa forsiden. Markeringen laegges om HELE pladen
   og ikke om selve skrivefeltet. Pladen skjuler alt, der gaar uden for
   den, saa der blev kun tegnet det lodrette stykke af rammen, der laa
   hen over det groenne DK-felt. Det saa ud som en lys lodret streg,
   der dukkede op i samme sekund man klikkede i feltet. */
.fh__platein:focus-visible{ outline:none; }
.fh__plate:focus-within{ outline:3px solid #3EA66E; outline-offset:2px; }

/* Paa de moerke flader ville en moerkegroen ramme forsvinde. */
.site-header a:focus-visible,
.site-header button:focus-visible,
.npk-pris a:focus-visible,
.npk-cta:focus-visible,
.uu-mini a:focus-visible,
.tbar__se:focus-visible,
.site-footer a:focus-visible{
  outline-color:#A8E7C6;
}

/* --- 13b. Kontrast -----------------------------------------
   Tallene er maalt, ikke skoennet. Kravet er 4,5:1. */

/* Trustpilot-tallet: 2,62 -> 5,00. Samme groenne familie. */
.tp__num{ color:#4A7C25; }

/* Kortets underlinje "EWII . Zaptec Go": 3,58 -> 5,62.
   #5C6B63 bruges i forvejen andre steder paa sitet. */
.npk-sub{ color:#5C6B63; }

/* Broedkrummen: 4,21 -> 5,31. */
.brodkrumme,
.brodkrumme a,
.uu-krumme,
.uu-krumme a{ color:#5C6B63; }


/* ============================================================
   14. SPRING TIL INDHOLD - 24. august 2026
   ------------------------------------------------------------
   Linket staar foerst paa siden, men ligger uden for skaermen,
   indtil man rammer det med tabulator-tasten. Bruger man mus,
   ser man det aldrig. En tastaturbruger slipper for at gaa
   gennem hele menuen paa hver eneste side.
   ============================================================ */
.bilo-spring{
  position:absolute; left:-9999px; top:0; z-index:9999;
  background:#0B7352; color:#fff; padding:13px 22px;
  border-radius:0 0 12px 0; font-weight:700; text-decoration:none;
}
.bilo-spring:focus{ left:0; }


/* ============================================================
   15. KORTETS TITEL SOM H2 - 24. august 2026
   ------------------------------------------------------------
   Paa /ladeboks/ er kortene sidens hovedliste og staar direkte
   under h1. Derfor er titlen flyttet fra h3 til h2, saa
   overskrifterne ikke springer et niveau over.
   UDSEENDET skal vaere praecis som foer: samme skrift, samme
   stoerrelse, samme vaegt. Kun niveauet er aendret.
   ============================================================ */
.npk-navn h2{
  margin:0;
  font-family:var(--font-display,'Sora'),sans-serif;
  font-size:17px;
  font-weight:700;
  letter-spacing:-.015em;
  line-height:1.25;
}
.npk-navn h2 a{ color:inherit; text-decoration:none; }


/* ============================================================
   16. TEKSTEN PAA KNAPPERNE - 24. august 2026
   ------------------------------------------------------------
   Hverken den groenne eller den orange farve er aendret. Det er
   TEKSTEN paa dem, der var for lys.

   Groen knap: paletten oeverst i filen har allerede
   --color-text-on-primary: #0E2C22 med kommentaren "Tekst paa
   groenne knapper". Knappen brugte i stedet
   --color-text-on-dark-muted, som er ment til moerk baggrund.
   Med palettens egen farve: 2,32 -> 4,91.

   Orange knap: hvid tekst paa orange gav 2,94. Maalt der hvor
   teksten faktisk sidder (23-77 procent af knappens hoejde)
   giver moerk tekst 4,97 i midten og 4,63 nederst.
   Samme greb som internetpriser.dk bruger paa deres orange.

   Ved museover bliver orangen moerkere, og der skal teksten et
   trin laengere ned for at holde kravet.
   ============================================================ */
/* .main-nav a satte --color-text-on-dark-muted paa ALT i menuen,
   ogsaa knappen. Den regel er staerkere end .btn-primary, og
   derfor slog palettens rigtige farve aldrig igennem. Her
   naevnes menuen med, saa knappen vinder inde i den. */
/* .archive-header__cta er IKKE orange paa /ladeboks/ - den er
   moerkegroen. Moerk tekst gav 1,69 dvs. naesten usynlig. Den
   holder hvid tekst og staar naevnt her, saa den ikke ryger med
   i orange-reglen igen. */
.archive-header__cta,
.fsx .prisagent__cta,
.fsx .bottomcta a,
.fsx .gbadge--nu{ color:#fff; }

/* Samme sag paa motorens knap: hvid paa frisk groen gav 3,05. */
.main-nav .header-cta,
.main-nav a.btn-primary,
.btn-primary,
.header-cta,
.np-motor__cta{ color:#0E2C22; }

.npk-cta,
.uu-orange,
.pk-u__b1,
.fh__go,
.la .go,
.la .oneline button,
.fsx .btn1,
.fsx .pk3__b1,
.fsx .qcard__cta,
.fsx .match-badge .a{ color:#fff; }

.npk-cta:hover,
.uu-orange:hover,
.pk-u__b1:hover,
.fh__go:hover,
.la .go:hover,
.fsx .btn1:hover,
.fsx .pk3__b1:hover,
.fsx .qcard__cta:hover{ color:#fff; }

/* ------------------------------------------------------------
   RULLET TILBAGE 24. august 2026, efter Henriks besked.
   Den orange knap havde hvid tekst, og den farve er laagt fast
   tidligere i projektet (beslutningsloggens afsnit 7). Jeg
   aendrede den til moerk tekst (#14231D) paa eget initiativ,
   fordi hvid paa orange maaler 2,94 mod kravets 4,5. Det var
   ikke min beslutning at traeffe. Teksten er hvid igen.
   Maalingen staar stadig i beslutningsloggen som et punkt,
   Henrik kan tage stilling til - den er ikke rettet vaek.
   ------------------------------------------------------------ */


/* ============================================================
   17. TRUSTPILOT-TALLET - 24. august 2026
   ------------------------------------------------------------
   Henrik: tallet skal vaere moerkegraat eller sort, ikke groent.
   Stjernerne beholder deres egen farve. Blok 13 satte det til
   #4A7C25, som laa i samme groenne familie som stjernerne.
   ============================================================ */
.tp__num{ color:#2A312E; }


/* ============================================================
   18. LADEAGENTENS KNAPPER SOM ORANGE RING - 24. august 2026
   ------------------------------------------------------------
   Henrik: orangen skal ligge som en RING rundt om knappen i
   stedet for at fylde den ud. Baggrunden er reglen om orange:
   fyldt orange betyder 'ud til udbyderen'. Ladeagentens knapper
   peger indad (tilmelding), og de skal derfor baere farven som
   accent, ikke som handlingsfarve.
   Teksten er moerk, fordi hvid tekst paa hvid plade ikke kan
   laeses. Maalt: #14231D paa hvid = 15,3:1.
   ============================================================ */
.la .go,
.la .oneline button{
  background:#fff;
  color:#14231D;
  border:0;
  box-shadow:inset 0 0 0 2px #E8622A;
}
.la .go:hover,
.la .oneline button:hover{
  background:#FFF4EF;
  color:#14231D;
  box-shadow:inset 0 0 0 2px #D0521C;
}

/* ============================================================
   19. KOMMUNESIDERNE (blok 7, 26. august 2026)
   ============================================================
   /kommuner/ og /kommuner/{navn}/. Praefikset er .ko-, og blokken
   ligger sidst, saa den vinder ved samme styrke uden tvangsregler.
   Alle vaerdier er hentet i :root - ingen nye farver, ingen fjerde
   hjoerneradius, ingen nye afstandstrin.
   Mobil foerst: gitteret er én spalte og folder ud ved 720 px.
   ============================================================ */

.ko-hero{
  background:var(--color-primary-dark);
  color:var(--color-text-on-dark);
  padding:var(--section-y) var(--space-4);
}
.ko-hero__inner{max-width:1120px;margin:0 auto;}
.ko-hero .brodkrumme{color:#BFE8D3;margin:0 0 var(--space-3);}
.ko-hero .brodkrumme a{color:#BFE8D3;}
.ko-hero h1{color:var(--color-text-on-dark);margin:0 0 var(--stack-tight);}
.ko-hero h1 span{color:#8FE3B8;}
.ko-hero__lead{color:var(--color-text-on-dark-muted);max-width:58ch;margin:0 0 var(--space-5);}

.ko-cta{
  display:inline-block;
  background:#fff;
  color:#14231D;
  border-radius:var(--radius-sm);
  padding:var(--space-3) var(--space-5);
  text-decoration:none;
  font-weight:600;
  min-height:44px;
  box-shadow:inset 0 0 0 2px #E8622A;
}
.ko-cta:hover{background:#FFF4EF;color:#14231D;}

.ko-tal{display:grid;grid-template-columns:1fr;gap:var(--space-3);margin-top:var(--space-5);}
.ko-tal__kort{background:var(--color-bg-white);border-radius:var(--radius-md);padding:var(--space-4);}
.ko-tal__navn{margin:0;color:var(--color-text-muted);font-size:var(--text-xs,13px);text-transform:uppercase;letter-spacing:.03em;}
.ko-tal__vaerdi{margin:var(--space-1) 0 0;color:var(--color-primary-dark);font-size:clamp(26px,4.6vw,34px);font-weight:700;line-height:1.1;}
.ko-tal__kilde{margin:var(--space-1) 0 0;color:var(--color-text-muted);font-size:var(--text-xs,13px);}

.ko-wrap{max-width:1120px;margin:0 auto;padding:var(--section-y) var(--space-4);}

.ko-blok{margin:0 0 var(--space-8);}
.ko-blok > h2{color:var(--color-primary-dark);margin:0 0 var(--stack);}
.ko-ingress{max-width:58ch;margin:0 0 var(--space-4);}
.ko-note{color:var(--color-text-muted);font-size:var(--text-sm,14px);max-width:58ch;margin:var(--space-4) 0 0;}
.ko-kilde{color:var(--color-text-muted);font-size:var(--text-sm,14px);max-width:58ch;margin:var(--space-4) 0 0;}

.ko-to{display:grid;grid-template-columns:1fr;gap:var(--space-5);}
.ko-fakta{background:var(--color-primary-light);border-radius:var(--radius-md);padding:var(--space-5);}
.ko-fakta h3{margin:0 0 var(--stack-tight);color:var(--color-primary-dark);}
.ko-fakta ul{margin:0 0 var(--space-4);padding-left:1.1em;}
.ko-fakta li{margin:0 0 var(--space-2);}
.ko-fakta--flad{background:var(--color-bg-muted);margin:var(--space-4) 0 0;}
.ko-fakta--flad p{margin:0;max-width:64ch;}

.ko-punkter{margin:0 0 var(--space-4);padding-left:1.1em;max-width:64ch;}
.ko-punkter li{margin:0 0 var(--space-3);}

.ko-tabelramme{overflow-x:auto;margin:var(--space-4) 0;}
.ko-tabel{width:100%;border-collapse:collapse;background:var(--color-bg-white);border-radius:var(--radius-md);}
.ko-tabel caption{text-align:left;color:var(--color-text-muted);font-size:var(--text-sm,14px);padding:0 0 var(--space-2);}
.ko-tabel th,.ko-tabel td{padding:var(--space-3) var(--space-4);border-bottom:1px solid var(--color-border);text-align:left;}
.ko-tabel tr:last-child th,.ko-tabel tr:last-child td{border-bottom:0;}
.ko-tabel td{text-align:right;font-variant-numeric:tabular-nums;}
.ko-tabel tr:nth-child(odd) th,.ko-tabel tr:nth-child(odd) td{background:#F7F5EF;}

.ko-op{display:flex;flex-wrap:wrap;gap:var(--space-2);align-items:center;margin:0 0 var(--space-4);}
.ko-op > span:first-child{color:var(--color-text-muted);font-size:var(--text-sm,14px);}
.ko-pille{
  display:inline-flex;gap:.4em;align-items:center;
  background:var(--color-primary-light);
  color:var(--color-primary-dark);
  border-radius:var(--radius-pill);
  padding:4px 12px;
  font-size:var(--text-sm,14px);
}
.ko-pille--dae{background:var(--color-bg-muted);color:var(--color-text-muted);}

.ko-postnumre{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:var(--space-2);}
.ko-postnumre li{background:var(--color-bg-muted);border-radius:var(--radius-sm);padding:var(--space-2) var(--space-3);}
.ko-postnumre__nr{color:var(--color-primary-dark);font-weight:700;margin-right:.4em;font-variant-numeric:tabular-nums;}

.ko-faq details{background:var(--color-bg-white);border:1px solid var(--color-border);border-radius:var(--radius-md);margin:0 0 var(--space-3);}
.ko-faq summary{cursor:pointer;padding:var(--space-4);font-weight:600;color:var(--color-primary-dark);min-height:44px;}
.ko-faq details[open] summary{border-bottom:1px solid var(--color-border);}
.ko-faq details p{margin:0;padding:var(--space-4);max-width:64ch;}

.ko-naboer{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:var(--space-3);}
.ko-nabo{
  display:block;background:var(--color-bg-white);
  border:1px solid var(--color-border);border-radius:var(--radius-md);
  padding:var(--space-4);text-decoration:none;min-height:44px;
}
.ko-nabo:hover{border-color:var(--color-primary);}
.ko-nabo__navn{display:block;color:var(--color-primary-dark);font-weight:700;}
.ko-nabo__km{display:block;color:var(--color-text-muted);font-size:var(--text-sm,14px);margin-top:2px;}
.ko-tilbage{margin:var(--space-4) 0 0;}

/* 24/9 2026: et link, der staar ALENE paa sin egen linje, skal kunne
   rammes med en tommelfinger. Maalt foer: tre saadanne links paa
   kommunesiden var 21 punkter hoeje. Et link midt inde i en saetning
   er uroert - det er stadig en del af linjen, som aftalt.
   AEldre browsere springer reglen over uden skade. */
.bilo-rute-kommune .ko-blok > p:has(> a:only-child) > a,
.bilo-rute-kommuner .ko-blok > p:has(> a:only-child) > a,
.bilo-rute-kommune .ko-tilbage > a,
.bilo-rute-kommuner .ko-tilbage > a{
  display:inline-flex; align-items:center; min-height:44px;
}

/* --- Oversigten --- */

.ko-soeg{background:var(--color-bg-white);border:1px solid var(--color-border);border-radius:var(--radius-md);padding:var(--space-5);margin:0 0 var(--space-7);}
.ko-soeg__mrk{display:block;font-weight:600;color:var(--color-primary-dark);margin:0 0 var(--space-2);}
.ko-soeg__felt{width:100%;padding:var(--space-3) var(--space-4);border:1px solid var(--color-border);border-radius:var(--radius-sm);font-size:16px;min-height:44px;}
.ko-soeg__svar{margin:var(--space-2) 0 0;color:var(--color-text-muted);font-size:var(--text-sm,14px);min-height:1.4em;}
.ko-soeg__hop{display:flex;flex-wrap:wrap;gap:var(--space-2);align-items:center;margin:var(--space-4) 0 0;}
.ko-soeg__hop > span{color:var(--color-text-muted);font-size:var(--text-sm,14px);}
.ko-soeg__hop a{
  display:inline-flex;gap:.4em;align-items:center;
  background:var(--color-primary-light);color:var(--color-primary-dark);
  border-radius:var(--radius-pill);padding:6px 14px;
  text-decoration:none;font-size:var(--text-sm,14px);min-height:32px;
}
.ko-soeg__hop a:hover{background:#DCEFE5;}
.ko-soeg__hop b{font-variant-numeric:tabular-nums;}

.ko-region{margin:0 0 var(--space-8);}
.ko-region__titel{color:var(--color-primary-dark);display:flex;flex-wrap:wrap;gap:var(--space-3);align-items:baseline;margin:0 0 var(--stack);}
.ko-region__titel span{color:var(--color-text-muted);font-size:var(--text-sm,14px);font-weight:400;}

.ko-gitter{display:grid;grid-template-columns:1fr;gap:var(--space-3);}
.ko-kort{
  display:block;background:var(--color-bg-white);
  border:1px solid var(--color-border);border-radius:var(--radius-md);
  padding:var(--space-4);text-decoration:none;
}
.ko-kort:hover{border-color:var(--color-primary);}
.ko-kort__navn{margin:0 0 var(--space-2);color:var(--color-primary-dark);font-size:var(--text-lg,19px);}
.ko-kort__linje{display:flex;flex-wrap:wrap;gap:var(--space-2);margin:0 0 var(--space-2);}
.ko-kort__lade{margin:0 0 var(--space-3);color:var(--color-text);font-size:var(--text-sm,14px);}
.ko-kort__gaa{color:var(--color-primary-dark);font-weight:600;font-size:var(--text-sm,14px);}

/* --- Guides i bunden, begge sidetyper --- */

.ko-guidegitter{display:grid;grid-template-columns:1fr;gap:var(--space-3);}
.ko-guide{
  display:block;background:var(--color-bg-white);
  border:1px solid var(--color-border);border-radius:var(--radius-md);
  padding:var(--space-5);text-decoration:none;
}
.ko-guide:hover{border-color:var(--color-primary);}
.ko-guide__maerke{
  display:inline-block;background:var(--color-primary-light);
  color:var(--color-primary-dark);border-radius:var(--radius-pill);
  padding:3px 12px;font-size:var(--text-xs,13px);font-weight:700;
  letter-spacing:.03em;text-transform:uppercase;margin:0 0 var(--space-2);
}
.ko-guide__titel{margin:0 0 var(--space-2);color:var(--color-primary-dark);font-size:var(--text-lg,19px);}
.ko-guide__uddrag{margin:0 0 var(--space-3);color:var(--color-text-muted);font-size:var(--text-sm,14px);}
.ko-guide__gaa{color:var(--color-primary);font-weight:600;font-size:var(--text-sm,14px);}

@media (min-width:720px){
  .ko-tal{grid-template-columns:repeat(3,1fr);}
  .ko-to{grid-template-columns:1.4fr 1fr;gap:var(--space-6);}
  .ko-gitter{grid-template-columns:repeat(2,1fr);}
  .ko-guidegitter{grid-template-columns:repeat(2,1fr);}
}

@media (min-width:1000px){
  .ko-gitter{grid-template-columns:repeat(4,1fr);}
  .ko-guidegitter{grid-template-columns:repeat(3,1fr);}
}


/* ---- Kort-info: én målt sætning fremme, resten bag »Info« (28/8) ----
   Ingen nye farver. Der bruges de samme variabler som resten af
   kortet, og knappen har nøjagtig samme diskrete grå som den
   »+ Se detaljer«, der allerede stod der. ---- */
.kortinfo{margin:8px 0 0}
.kortinfo__maalt{margin:0 0 6px;font-size:var(--text-xs);line-height:1.45;color:var(--tmuted)}
.kortinfo__knap{display:inline-flex;align-items:center;gap:5px;border:0;background:none;color:var(--faint);font-family:var(--inter);font-size:var(--text-xs);font-weight:600;letter-spacing:.02em;padding:2px 0;min-height:44px;cursor:pointer;transition:color .15s}
.kortinfo__knap:hover{color:var(--tmuted)}
.kortinfo__pm{font-size:var(--text-sm);line-height:1}
.kortinfo__tekst{max-height:0;opacity:0;overflow:hidden;transition:max-height .44s cubic-bezier(.22,.61,.36,1),opacity .38s ease-out,margin-top .44s cubic-bezier(.22,.61,.36,1)}
.kortinfo__tekst.er-aaben{max-height:900px;opacity:1;margin-top:6px}
.kortinfo__h{margin:0 0 4px;font-size:var(--text-xs);font-weight:700;color:var(--tmuted)}
.kortinfo__tekst p{margin:0 0 6px;font-size:var(--text-xs);line-height:1.5;color:var(--tmuted)}
.kortinfo__tekst p:last-child{margin-bottom:0}


/* ---- Annoncevinduet (30/8) ----------------------------------
   Varer fra en butiks eget produkt-feed, altid mærket som annonce.

   Ingen nye farver: sand, guld og brun er nøjagtig de samme
   værdier, kortene i forvejen bruger til typen »køb i butik«
   (#F7F0E2 / #E0CFAD / #C8A96E / #8A6A2C). Rammen er bevidst
   IKKE grøn — den skal ikke kunne forveksles med et
   sammenligningskort. Ingen tvangsregler. ---- */
.avx{border:1.5px solid #E0CFAD;background:#F7F5EF;border-radius:var(--radius-md);overflow:hidden;margin:var(--space-6) 0 var(--space-5)}
.avx__top{display:flex;align-items:baseline;gap:var(--space-2);flex-wrap:wrap;padding:var(--space-3) var(--space-4) var(--space-2);border-bottom:1px solid #ECE4D4}
.avx__maerkat{font-family:var(--font-body);font-size:var(--text-2xs);font-weight:600;letter-spacing:.07em;text-transform:uppercase;background:#F7F0E2;color:#8A6A2C;border:1px solid #E0CFAD;padding:3px 8px;border-radius:var(--radius-pill);white-space:nowrap}
.avx__h{font-family:var(--font-display);font-size:var(--text-md);font-weight:600;line-height:1.3;margin:0;color:var(--color-text)}
.avx__und{width:100%;margin:var(--space-1) 0 0;font-size:var(--text-sm);line-height:1.5;color:var(--color-text-muted)}
.avx__krop{padding:var(--space-3) var(--space-4) var(--space-4)}
.avx__gruppe{font-family:var(--font-display);font-size:var(--text-xs);font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--color-text-muted);margin:var(--space-3) 0 var(--space-2)}
.avx__gruppe:first-child{margin-top:0}
.avx__net{display:grid;gap:var(--space-2);grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
.avx__vare{display:flex;gap:var(--space-3);align-items:center;background:var(--color-bg-white);border:1px solid var(--color-border);border-radius:var(--radius-sm);padding:var(--space-2);min-height:48px;text-decoration:none;color:inherit;transition:border-color .15s,box-shadow .15s}
.avx__vare:hover,.avx__vare:focus-visible{border-color:#C8A96E;box-shadow:0 8px 20px rgba(200,169,110,.22)}
.avx__bil{flex:0 0 62px;height:62px;display:flex;align-items:center;justify-content:center;background:var(--color-bg-white);border-radius:6px}
.avx__bil img{max-width:100%;max-height:62px;width:auto;height:auto;display:block}
.avx__txt{display:flex;flex-direction:column;gap:2px;min-width:0}
.avx__maerke{font-size:var(--text-2xs);font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--color-text-muted)}
.avx__navn{font-size:var(--text-sm);line-height:1.35;color:var(--color-text)}
.avx__pris{font-family:var(--font-display);font-size:var(--text-base);font-weight:600;line-height:1.3;margin-top:2px;color:var(--color-text)}
.avx__bund{padding:var(--space-3) var(--space-4);border-top:1px solid #ECE4D4;background:#FBF9F4}
.avx__kilde{margin:0;font-size:var(--text-xs);line-height:1.5;color:var(--color-text-muted)}
@media (max-width:520px){
  .avx__net{grid-template-columns:1fr}
  .avx__top,.avx__krop,.avx__bund{padding-left:var(--space-3);padding-right:var(--space-3)}
}


/* ---- Senest opdateret (30/8) ---------------------------------
   Én linje nederst til venstre paa den side, hvor noget automatisk
   har koert. Datoer staar ikke i indholdet laengere. Ingen nye
   farver, ingen tvangsregler. ---- */
.opdateret{max-width:var(--container-width);margin:0 auto;padding:0 20px var(--space-5);font-size:var(--text-xs);line-height:1.5;color:var(--color-text-muted);text-align:left}
@media (max-width:520px){.opdateret{padding-left:14px;padding-right:14px}}


/* ============================================================
   FORSIDENS PRODUKTOMRAADE (blok 1, 30. august 2026)
   Topraekke, svar-elementer, soegebar med logohjul og kortliste.
   Kortet selv er det faelles npk-kort (.pk-wrap .npk) - herunder
   styles kun det, der er NYT paa forsiden. Den gamle fsx-sektions
   regler (.pk3, .cbar, .ywheel m.fl.) ligger stadig i filen og
   ryddes foerst i den samlede CSS-oprydning (roadmap F4).
   ============================================================ */

/* ---- 1) Topraekken: prisfald og kampagner lige nu ---- */
.fstop{ background:#fff; border:1px solid #E6EAE7; border-radius:22px; padding:26px 28px;
  box-shadow:0 6px 24px rgba(16,35,26,.06); }
.fstop h2{ font-family:var(--font-display,'Sora'),sans-serif; font-size:24px; letter-spacing:-.02em; margin:0 0 4px; }
.fstop__sub{ color:#5C6B63; font-size:14px; margin:0 0 18px; }
.fstop__tom{ color:#5C6B63; font-size:14.5px; margin:0; }
.fstop__cards{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:14px; }
.fstop__kort{ border:1px solid #E6EAE7; border-radius:16px; padding:16px 18px; background:#F7FAF8; }
/* 27/9 2026 (Henrik, N315): maerker er 13, husets mindste. Var 10,5. Kopi i kontrol-27september-2026/foer */
.fstop__tag{ display:inline-block; font:700 13px/1 var(--font-body,'Inter'),sans-serif; letter-spacing:.07em;
  text-transform:uppercase; border-radius:999px; padding:5px 10px; margin-bottom:10px; }
.fstop__tag--fald{ background:#E4F2EA; color:#17603C; }
.fstop__tag--kamp{ background:#FDEBDD; color:#A34A12; }
.fstop__linje{ font-size:15.5px; font-weight:600; margin:0; line-height:1.45; }
.fstop__linje b{ font-family:var(--font-display,'Sora'),sans-serif; letter-spacing:-.01em; }
.fstop__pris{ color:#215C42; font-weight:800; font-variant-numeric:tabular-nums; }
.fstop__foer{ color:#7C8B82; text-decoration:line-through; font-weight:500; margin-right:6px; }
.fstop__maalt{ color:#7C8B82; font-size:12.5px; margin:7px 0 0; font-style:italic; }

/* ---- 2) Koeb og Leje som svar ---- */
.fssvar{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:16px; }
.fssvar__el{ background:#fff; border:1px solid #E6EAE7; border-radius:16px; padding:16px 18px;
  display:flex; gap:13px; align-items:flex-start; }
.fssvar__ik{ flex:0 0 38px; height:38px; border-radius:12px; display:flex; align-items:center;
  justify-content:center; background:#E4F2EA; color:#0B7352; }
.fssvar__el h3{ font-family:var(--font-display,'Sora'),sans-serif; font-size:15.5px; margin:0 0 3px; letter-spacing:-.01em; }
.fssvar__el p{ margin:0; color:#5C6B63; font-size:13.5px; }
@media (max-width:700px){ .fssvar{ grid-template-columns:1fr; } }

/* ---- 3) Soegebaren ---- */
.fsb{ background:#fff; border:1px solid #E6EAE7; border-radius:18px; padding:14px 18px;
  box-shadow:0 6px 24px rgba(16,35,26,.06); display:flex; flex-wrap:wrap; gap:12px 22px;
  align-items:center; margin-bottom:18px; }
.fsb__skifte{ display:inline-flex; background:#EFF4F0; border-radius:999px; padding:4px; }
.fsb__skifte button{ border:0; background:none; cursor:pointer; padding:7px 16px; border-radius:999px;
  font-weight:600; font-size:13.5px; color:#5C6B63; font-family:inherit; }
.fsb__skifte button.er-valgt{ background:#0B7352; color:#fff; }
.fsb__antal{ font-size:13.5px; color:#5C6B63; white-space:nowrap; }
.fsb__antal b{ color:#22352C; }
.fsb__grp{ display:flex; align-items:center; gap:10px; }
.fsb__lbl{ font:700 10.5px/1.25 var(--font-body,'Inter'),sans-serif; letter-spacing:.08em;
  text-transform:uppercase; color:#7C8B82; }
.fsb__lbl small{ display:block; font:500 10px/1.2 var(--font-body,'Inter'),sans-serif;
  letter-spacing:0; text-transform:none; color:#9AA8A0; margin-top:2px; }
.fsb__aar{ display:inline-flex; gap:4px; flex-wrap:wrap; }
.fsb__aar button{ border:1px solid #E6EAE7; background:#fff; cursor:pointer; border-radius:999px;
  padding:6px 11px; font-size:12.5px; font-weight:600; color:#5C6B63; font-family:inherit; }
.fsb__aar button.er-valgt{ background:#0B7352; border-color:#0B7352; color:#fff; }
.fsb__budget{ display:flex; flex-direction:column; gap:3px; }
.fsb__budgetrk{ display:flex; align-items:center; gap:6px; }
.fsb__budgetfelt{ border:1px solid #E6EAE7; border-radius:10px; padding:7px 12px; font-weight:700;
  font-size:13.5px; background:#F7FAF8; min-width:92px; text-align:right; font-variant-numeric:tabular-nums; }
.fsb__budgetpile{ display:flex; flex-direction:column; gap:2px; }
.fsb__budgetpile button{ border:1px solid #E6EAE7; background:#fff; cursor:pointer; border-radius:6px;
  width:24px; height:17px; font-size:8px; color:#5C6B63; line-height:1; padding:0; }
.fsb__budgetpile button:hover{ color:#22352C; background:#F7FAF8; }
.fsb__budgettekst{ color:#7C8B82; font-size:11px; }
.fsb__hjulrk{ display:flex; align-items:center; gap:8px; margin-left:auto; }
.fsb__hjullbl{ font:700 10.5px/1 var(--font-body,'Inter'),sans-serif; letter-spacing:.08em;
  text-transform:uppercase; color:#7C8B82; white-space:nowrap; }
.fsb__hjul{ display:flex; align-items:stretch; border:1px solid #E6EAE7; border-radius:14px;
  overflow:hidden; background:#fff; box-shadow:0 1px 2px rgba(8,30,24,.04); }
.fsb__hjul__felt{ width:120px; display:flex; align-items:center; justify-content:center;
  padding:8px 12px; min-height:44px; transition:opacity .16s ease, transform .16s ease; }
.fsb__hjul__felt.skift{ opacity:0; transform:translateY(-6px); }
.fsb__hjul__logo{ max-height:26px; max-width:96px; object-fit:contain; display:block; }
.fsb__hjul__ord{ font-family:var(--font-display,'Sora'),sans-serif; font-weight:600; font-size:12.5px;
  color:#22352C; letter-spacing:-.01em; white-space:nowrap; }
.fsb__hjul__pile{ display:flex; flex-direction:column; border-left:1px solid #E6EAE7; }
.fsb__hjul__pil{ border:0; background:none; width:32px; height:22px; display:flex; align-items:center;
  justify-content:center; cursor:pointer; color:#7C8B82; transition:all .15s ease; padding:0; }
.fsb__hjul__pil:first-child{ border-bottom:1px solid #E6EAE7; }
.fsb__hjul__pil:hover{ color:#22352C; background:#F7FAF8; }
.fsb__hjulgo{ background:linear-gradient(180deg,#F1712F 0%,#E05A1E 100%); color:#fff; font-weight:700;
  font-size:13px; padding:11px 18px; border-radius:999px; white-space:nowrap; text-decoration:none;
  box-shadow:0 4px 12px rgba(224,90,30,.25), inset 0 1px 0 rgba(255,255,255,.28); }
.fsb__hjulgo:hover{ filter:brightness(1.06); color:#fff; }
@media (max-width:900px){ .fsb__hjulrk{ margin-left:0; } }

/* ---- 4) Listen og fold ud/luk ---- */
.fs2-liste{ display:flex; flex-direction:column; gap:6px; }
.fs2-gruppe[hidden]{ display:none; }
.fs2-fold__knap{ display:inline-flex; align-items:center; gap:8px; background:#fff;
  border:1.5px dashed #BFD4C7; color:#215C42; border-radius:999px; padding:8px 16px; font-weight:700;
  font-size:13px; cursor:pointer; margin:-6px 0 12px 132px; font-family:inherit; }
.fs2-fold__knap:hover{ background:#F3F8F5; }
.fs2-fold__knap[aria-expanded="true"]{ border-style:solid; background:#F3F8F5; }
.fs2-fold__pm{ font-weight:800; }
.fs2-fold{ border:1.5px solid #BFD4C7; border-radius:18px; background:#F3F8F5; padding:12px 12px 4px;
  margin:-4px 0 14px; }
.fs2-fold[hidden]{ display:none; }
.fs2-fold .pk-wrap .npk{ box-shadow:none; }
.fs2-fold__luk{ display:inline-flex; align-items:center; gap:6px; background:#fff;
  border:1px solid #E6EAE7; border-radius:999px; padding:7px 15px; font-weight:700; font-size:12.5px;
  color:#5C6B63; cursor:pointer; margin:0 0 10px; font-family:inherit; }
.fs2-fold__luk:hover{ color:#22352C; }
@media (max-width:760px){ .fs2-fold__knap{ margin-left:0; } }

/* ---- Den lysegraa linje som mat glas i det groenne knap-omraade
       (Henriks valg A, 30. august 2026). Ved 1-5 aar i baren viser
       den totalen; ved "Ved opstart" sin egen tekst. ---- */
.npk-pris .npk-glas{ display:flex; align-items:center; justify-content:center; gap:8px;
  border-radius:999px; padding:3px 10px; margin:-4px 0 6px; font-size:13px;
  background:rgba(255,255,255,.13); border:1px solid rgba(255,255,255,.32); color:#DFF0E6;
  font-variant-numeric:tabular-nums; }
.npk-pris .npk-glas[hidden]{ display:none; }


/* ============================================================
   RETTELSE 1 (Henrik, 30. august 2026, aften): paa computeren skal
   "Find din ladeboks" ikke staa fast i menuen paa forsiden. Den
   kommer i stedet som det klaebende felt, der glider ind, naar man
   ruller forbi det groenne felt oeverst - praecis som paa telefonen.
   Reglen laengere oppe (min-width:821px skjuler .uu-mini) gaelder
   stadig alle andre sider; kun forsidens eget felt (#fh-mini)
   undtages, og kun paa forsiden (.home) tages knappen ud af menuen.
   ============================================================ */
/* 25. september 2026 (Henrik): rettelsen fra 30. august er rullet tilbage paa
   computeren. Den klaebende bjaelke med "Find den rigtige ladeboks til din elbil"
   er taget ud af forsiden, fordi filterbjaelken nu klaeber samme sted, og to
   ting kan ikke klaebe oven paa hinanden. Knappen "Find din ladeboks" er tændt
   igen i menuen, hvor den findes i forvejen. Maalt: menuen gaar fra 510 til 698
   af de 1200, den bryder ikke om. Telefonen er uroert - der bliver #fh-mini. */
@media (min-width: 821px){
  .home #fh-mini{ display:none !important; }
}

/* ============================================================
   RETTELSE 2 (Henrik, 30. august 2026, aften): Ladeagent-knappen i
   menuen skal have en ORANGE kant, naar musen foeres over - ikke den
   hvide/groenlige. Saadan var den ogsaa engang (reglen laengere oppe
   med cta-orange); en senere regel skrev den om til hvid. Denne
   staar sidst og vinder derfor.
   ============================================================ */
.header-ladeagent:hover{ border-color: var(--cta-orange, #E8622A); background: rgba(232,98,42,.10); color:#fff; }

/* ============================================================
   RETTELSE 3 (Henrik, 30. august 2026, aften):
   1) Ladeagent-knappens orange ring staar synlig HELE tiden - ikke
      kun ved mus over. Ved mus over fyldes knappen helt orange,
      som den oprindelige regel laengere oppe gjorde. Blikfang.
   2) Menupunkterne paa computeren svarer tydeligere: ved mus over
      faar punktet en pille i faviconets groenne (#3EA66E, baggrunden
      bag det lille lyn), og det punkt man STAAR paa beholder pillen,
      saa man altid kan se, hvor man er. Telefonmenuen er ikke roert.
   ============================================================ */
.header-ladeagent{ border-color: var(--cta-orange, #E8622A); }
.header-ladeagent:hover{ background: var(--cta-orange, #E8622A); border-color: var(--cta-orange, #E8622A); color:#fff; }
@media (min-width: 821px){
  .nav-menu > li > a{ padding:8px 13px; border-radius:999px; transition: background .15s ease, color .15s ease; }
  .nav-menu > li > a:hover,
  .nav-menu > li:focus-within > a{ background:#3EA66E; color:#fff; }
  .nav-menu > li.current-menu-item > a,
  .nav-menu > li.current-menu-ancestor > a,
  .nav-menu > li.current_page_item > a,
  .nav-menu > li.current_page_ancestor > a{ background:#3EA66E; color:#fff; }
}

/* ============================================================
   RETTELSE 3B (Henrik, 30. august 2026, aften) - justering:
   - Ladeagenten: teksten i orange (ringen bliver). Ved mus over
     fyldes knappen stadig orange, og teksten bliver hvid.
   - Menupunkterne: pillen var for kraftig. Ved mus over nu kun et
     blidt groent skaer. Det punkt man staar ved faar INGEN pille -
     kun teksten i den groenne fra lynets baggrund (#3EA66E).
   Disse regler staar sidst og vinder over rettelse 3 ovenfor.
   ============================================================ */
.header-ladeagent{ color: var(--cta-orange, #E8622A); }
.header-ladeagent:hover{ color:#fff; }
@media (min-width: 821px){
  .nav-menu > li > a:hover,
  .nav-menu > li:focus-within > a{ background:rgba(62,166,110,.22); color:#fff; }
  .nav-menu > li.current-menu-item > a,
  .nav-menu > li.current-menu-ancestor > a,
  .nav-menu > li.current_page_item > a,
  .nav-menu > li.current_page_ancestor > a{ background:transparent; color:#3EA66E; }
  .nav-menu > li.current-menu-item > a:hover,
  .nav-menu > li.current-menu-ancestor > a:hover,
  .nav-menu > li.current_page_item > a:hover,
  .nav-menu > li.current_page_ancestor > a:hover{ background:rgba(62,166,110,.14); color:#3EA66E; }
}

/* ============================================================
   RETTELSE 3C (Henrik, 30. august 2026, aften) - som han skrev det:
   - Ladeagenten: orange ring, orange tekst, og knappens baggrund
     bliver ved med at vaere den groenne fra headeren - OGSAA naar
     musen foeres over. Ingen orange fyldning.
   - Menupunkterne: pillen er HELT vaek, ogsaa ved mus over. Ved mus
     over skifter teksten blot til den groenne fra lynets baggrund
     (#3EA66E), og det valgte punkt staar fast i samme groenne.
   Disse regler staar sidst og vinder over 3 og 3B ovenfor.
   ============================================================ */
.header-ladeagent{ color: var(--cta-orange, #E8622A); }
.header-ladeagent:hover{ background:transparent; border-color: var(--cta-orange, #E8622A); color: var(--cta-orange, #E8622A); }
@media (min-width: 821px){
  .nav-menu > li > a{ padding:8px 0; border-radius:0; background:none; }
  .nav-menu > li > a:hover,
  .nav-menu > li:focus-within > a{ background:none; color:#3EA66E; }
  .nav-menu > li.current-menu-item > a,
  .nav-menu > li.current-menu-ancestor > a,
  .nav-menu > li.current_page_item > a,
  .nav-menu > li.current_page_ancestor > a,
  .nav-menu > li.current-menu-item > a:hover,
  .nav-menu > li.current-menu-ancestor > a:hover,
  .nav-menu > li.current_page_item > a:hover,
  .nav-menu > li.current_page_ancestor > a:hover{ background:none; color:#3EA66E; }
}

/* ============================================================
   RETTELSE 3D (Henrik, 30. august 2026, aften) - MAALT denne gang.
   Fejlen i 3-3C: reglen '.main-nav a' er staerkere end
   '.header-ladeagent', saa den orange tekst blev aldrig vist - og
   lynets groenne (#3EA66E) maaler kun 1,9 i kontrast mod headerens
   moerkegroenne (#0B7352), dvs. naesten usynlig. Ren orange maaler 1,7.
   Derfor:
   - Menupunkter: mus over = HVID (maaler 5,9). Det valgte punkt =
     lys udgave af lynets groenne, #A8E7C6 (maaler 4,2), med en tynd
     streg under i lynets groenne #3EA66E. Ingen pille.
   - Ladeagenten: orange ring som foer, tekst i den lyseste orange
     der kan ses paa groent (#FF8A4C, maaler 2,5 - ren #E8622A maaler
     1,7). Baggrunden forbliver headerens groenne, ogsaa ved mus over.
     Selektoren '.main-nav a.header-ladeagent' vinder over menureglen.
   ============================================================ */
.main-nav a.header-ladeagent{ color:#FF8A4C; border-color: var(--cta-orange, #E8622A); }
.main-nav a.header-ladeagent:hover{ color:#FF8A4C; background:transparent; border-color: var(--cta-orange, #E8622A); }
@media (min-width: 821px){
  .main-nav .nav-menu > li > a:hover,
  .main-nav .nav-menu > li:focus-within > a{ color:#fff; background:none; }
  .main-nav .nav-menu > li.current-menu-item > a,
  .main-nav .nav-menu > li.current-menu-ancestor > a,
  .main-nav .nav-menu > li.current_page_item > a,
  .main-nav .nav-menu > li.current_page_ancestor > a,
  .main-nav .nav-menu > li.current-menu-item > a:hover,
  .main-nav .nav-menu > li.current-menu-ancestor > a:hover,
  .main-nav .nav-menu > li.current_page_item > a:hover,
  .main-nav .nav-menu > li.current_page_ancestor > a:hover{
    color:#A8E7C6; background:none;
    text-decoration:underline; text-decoration-color:#3EA66E;
    text-decoration-thickness:2px; text-underline-offset:7px;
  }
}

/* ============================================================
   RETTELSE 3E (Henrik, 30. august 2026, aften) - TGTG-grebet, hans
   valg 1+1: den vigtige knap er FYLDT, ikke en ring, og menuen
   staar i fuld styrke.
   - Ladeagenten: helt fyldt orange, rund, hvid fed tekst. Ved mus
     over en anelse moerkere orange. Kan ikke overses.
   - Menupunkter (computer): ren hvid som grundfarve. Ved mus over
     skifter teksten til den lyse udgave af lynets groenne (#A8E7C6).
     Det VALGTE punkt staar fast i samme groenne med fed - ingen
     streg (3D's understregning slaas fra her), ingen pille.
   ============================================================ */
.main-nav a.header-ladeagent{ background: var(--cta-orange, #E8622A); border-color: var(--cta-orange, #E8622A); color:#fff; }
.main-nav a.header-ladeagent:hover{ background:#D14E1C; border-color:#D14E1C; color:#fff; }
@media (min-width: 821px){
  .main-nav .nav-menu > li > a{ color:#fff; }
  .main-nav .nav-menu > li > a:hover,
  .main-nav .nav-menu > li:focus-within > a{ color:#A8E7C6; background:none; text-shadow:0 0 .5px currentColor; }
  .main-nav .nav-menu > li.current-menu-item > a,
  .main-nav .nav-menu > li.current-menu-ancestor > a,
  .main-nav .nav-menu > li.current_page_item > a,
  .main-nav .nav-menu > li.current_page_ancestor > a,
  .main-nav .nav-menu > li.current-menu-item > a:hover,
  .main-nav .nav-menu > li.current-menu-ancestor > a:hover,
  .main-nav .nav-menu > li.current_page_item > a:hover,
  .main-nav .nav-menu > li.current_page_ancestor > a:hover{
    color:#A8E7C6; background:none; font-weight:700;
    text-decoration:none; text-shadow:none;
  }
}

/* ============================================================
   RETTELSE 4 (Henrik, 30. august 2026, aften): menuens luft og
   placering - taet paa internetpriser-billedet, men ikke ens.
   - Hele toppen samles i en centreret ramme paa 1200 px (samme
     bredde som resten af siden), i stedet for at logo og menu
     skubbes helt ud til hver sin kant paa brede skaerme. Det er
     DET, der gav den store luft.
   - Logo til venstre, menuen og den orange Ladeagent samlet til
     hoejre med rolige mellemrum.
   - Forsidens klaebende "Find din ladeboks"-felt bruger samme
     1200 px-ramme og glider ind lige UNDER menulinjen, saa den
     flugter med resten, naar der rulles.
   Kun computer - telefonen er ikke roert.
   ============================================================ */
@media (min-width: 821px){
  .site-header__inner{ max-width: var(--container-width, 1200px); margin:0 auto; }
  .main-nav{ margin-left:auto; gap:8px; }
  .nav-menu{ gap:28px; margin-right:18px; }
  .main-nav a.header-ladeagent{ margin-right:0; }
}

/* ============================================================
   FINPUDSNING 1 (Henrik, 31. august 2026): forsidens kort var
   blevet for lange. Maalt: paa Alle ladebokse er kortlisten hoejst
   980 px bred; paa forsiden fik den hele rammens 1080 px. Nu har
   forsidens liste PRAECIS samme bredde som paa Alle ladebokse.
   ============================================================ */
/* 27/9 2026 (Henrik, M48/N317): forsidens liste og filterbjaelken (med linjen under, hvor Ryd alt staar)
   foelger listebredden 1120 og flugter i begge sider med Alle ladebokse. Rammen rundt om har 20 luft
   i hver side, saa de to gaar ud over den, naar skaermen er bred nok (fra ca. 1170). Paa smallere
   skaerme og paa telefon er alt som foer: max() holder dem aldrig smallere end rammen. Var 980 og 1080.
   Kopi i kontrol-27september-2026/foer */
@media (min-width:821px){
  .fs2-liste,
  body.har-fsb .fsb,
  body.har-fsb .fsb__over{
    max-width:none;
    box-sizing:border-box;
    width:max(100%, min(1120px, calc(100vw - 50px)));
    margin-left:calc((100% - max(100%, min(1120px, calc(100vw - 50px)))) / 2);
    margin-right:calc((100% - max(100%, min(1120px, calc(100vw - 50px)))) / 2);
  }
}

/* ============================================================
   FINPUDSNING 2 (Henrik, 2. september 2026): ALLE KORT LIGE HOEJE.
   Maalt foer: Alle ladebokse 154 px (184 naar maerkerne gik over to
   linjer), forsiden 182 px paa 14 af 17 kort (glaslinjen + flueben
   over to linjer). Nu: hvert kort er 154 px, uanset hvad det baerer.
   - Maerkerne er de smaa klip fra Alle ladebokse - overalt, og saa
     smaa at de som regel holder sig paa een linje. Gaar de alligevel
     over to, er der plads til det inden for de 154 px.
   - Det groenne prisfelt har fast hoejde (120 px) og samme opbygning
     paa alle kort: overskrift, det store tal, den graa glaslinje,
     knappen. Glaslinjen staar nu paa ALLE kort (koeb: den maanedlige
     betaling, leje: opstartsprisen), saa 'Ved opstart' altid staar
     samme sted. Farver og glasdesign er uroerte.
   Blokken staar sidst - sidste regel vinder. Ingen nye tvangsregler.
   ============================================================ */
.pk-wrap .npk, .uu-boks .npk{ min-height:154px; box-sizing:border-box; }
.pk-wrap .npk .pk-tp, .uu-boks .npk .pk-tp{ display:flex; width:fit-content; line-height:1.15; }
.npk-navn{ margin-bottom:3px; }
.npk-sub{ margin-bottom:3px; line-height:1.2; }
.npk-specs, .post-type-archive-ladeboks .npk-specs{ gap:3px 4px; }
.npk-spec, .post-type-archive-ladeboks .npk-spec{
  background:#EAF6F0; color:#215E44; border:1px solid transparent; border-radius:999px;
  padding:1px 6px; font-size:13px; line-height:1.25; font-weight:600; gap:0; }
.npk-spec svg{ display:none; }
.npk-spec--krav, .post-type-archive-ladeboks .npk-spec--krav{ background:#FBF4E7; color:#8A6420; }
.post-type-archive-ladeboks .npk-spec.er-valgt{ background:#0B7352; color:#fff; border-color:#0B7352; }
.npk-pris{ display:flex; flex-direction:column; justify-content:center; min-height:120px; box-sizing:border-box; padding:9px 12px; }
.npk-pris small{ margin-bottom:2px; }
.npk-pris strong{ margin-bottom:4px; }
.npk-pris .npk-glas{ margin:0 0 3px; padding:1px 9px; font-size:13px; line-height:1.25; }
.npk-cta{ padding:7px 14px; margin-top:0; }
.npk-pris small + strong + .npk-samlet[hidden] + .npk-cta{ margin-top:0; }
/* Udbydersiden: kortet + folden "Se mere om ..." som een blok, folden under kortet (2/9 2026). */
.uu-kort{ display:block; }
.uu-kortfold{ padding:0 0 0 18px; }
.uu-kortfold .kortinfo{ margin-top:2px; }
/* Kort uden aftale (emblem + to veje i stedet for knappen) skal ogsaa holde 154 px:
   emblem og veje pakkes taettere, og prisfeltet faar mindre luft foroven og forneden. */
.npk-pris:has(.npk-emblem){ padding:6px 12px; }
.npk-pris:has(.npk-emblem) strong{ margin-bottom:2px; }
.npk-pris:has(.npk-emblem) .npk-glas{ margin-bottom:2px; }
.npk-pris .npk-emblem{ font-size:13px; line-height:1.2; margin-bottom:3px; }
.npk-pris .npk-veje{ gap:2px; }
.npk-pris .npk-veje a{ font-size:13px; line-height:1.2; padding-top:0; padding-bottom:0; }
/* 3/9 2026 (Henrik): FREMHAEV-maerker - bloed lilla, kontrast 7,4:1 (#4A3F8C paa #EDE9FB). Staar forrest paa kortet, hoejst tre. */
.npk-spec--frem, .post-type-archive-ladeboks .npk-spec--frem{ background:#EDE9FB; color:#4A3F8C; border-color:#DCD5F5; }
/* 3/9 2026 (Henrik): Koeb- og Leje-maerket ved navnet i LYS BLAA med en ring om, saa koeb/leje
   skiller sig ud. Kontrast 7,5:1 (#1F4E79 paa #E3F0FA). Blaa bruges KUN til de to maerker. */
.npk-badge--koeb, .npk-badge--leje{ background:#E3F0FA; color:#1F4E79; border:1px solid #9CC3E6; }


/* 3/9 2026 (Henrik): paa mobil er lup-knappen i nummerpladefeltet paa forsiden ALTID orange - ikke kun naar pladen er tastet. Ingen nye tvangsregler. */
/* 4/9 2026 (Henrik): lup-knappen er groen igen paa mobil - den bliver orange, naar der tastes (er-klar), og lupen pulserer tre gange, naar den skifter. */
/* 4/9 2026 (Henrik): lupen pulserer EN gang, langsomt, naar den bliver orange. Emblemet i forsidens nummerpladefelt faar EU-ringen af stjerner som paa motoren og udbydersiderne - ikke en enkelt stjerne. */
.fh__lookup.er-klar svg { animation: fhLupEn 1.4s ease-in-out 1; }
@keyframes fhLupEn { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.18); } }
.fh__stars { color: transparent; font-size: 0; width: 17px; height: 17px; margin-bottom: 3px; background: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Ccircle%20cx='12'%20cy='3'%20r='1.25'%20fill='%23FFCC00'/%3E%3Ccircle%20cx='16'%20cy='4.07'%20r='1.25'%20fill='%23FFCC00'/%3E%3Ccircle%20cx='18.93'%20cy='7'%20r='1.25'%20fill='%23FFCC00'/%3E%3Ccircle%20cx='20'%20cy='11'%20r='1.25'%20fill='%23FFCC00'/%3E%3Ccircle%20cx='18.93'%20cy='15'%20r='1.25'%20fill='%23FFCC00'/%3E%3Ccircle%20cx='16'%20cy='17.93'%20r='1.25'%20fill='%23FFCC00'/%3E%3Ccircle%20cx='12'%20cy='19'%20r='1.25'%20fill='%23FFCC00'/%3E%3Ccircle%20cx='8'%20cy='17.93'%20r='1.25'%20fill='%23FFCC00'/%3E%3Ccircle%20cx='5.07'%20cy='15'%20r='1.25'%20fill='%23FFCC00'/%3E%3Ccircle%20cx='4'%20cy='11'%20r='1.25'%20fill='%23FFCC00'/%3E%3Ccircle%20cx='5.07'%20cy='7'%20r='1.25'%20fill='%23FFCC00'/%3E%3Ccircle%20cx='8'%20cy='4.07'%20r='1.25'%20fill='%23FFCC00'/%3E%3C/svg%3E") center / contain no-repeat; }


/* 3/9 2026 (Henrik): topraekken paa forsiden er nu to faste kort - Billigst lige nu + Prisfald/Kampagne eller Vores anbefaling. To kolonner ogsaa paa mobil. Ingen nye tvangsregler. */
.fstop__cards--to{ grid-template-columns:1fr 1fr; }\n.fstop__cards--to > :only-child{ grid-column:1 / -1; }
.fstop__kort--link{ display:block; color:inherit; text-decoration:none; transition:transform .15s ease, box-shadow .15s ease; }
.fstop__kort--link:hover{ transform:translateY(-2px); box-shadow:0 8px 22px rgba(16,35,26,.10); color:inherit; }
.fstop__tag--billigst{ background:#EAF6F0; color:#0B7352; }
.fstop__tag--anbef{ background:#E3F0FA; color:#1F4E79; }
.fstop__enh{ color:#5C6B63; font-weight:500; font-size:13px; }
@media (max-width: 560px) {
  .fstop{ padding:18px 16px; }
  .fstop h2{ font-size:20px; }
  .fstop__cards--to{ gap:10px; }
  .fstop__kort{ padding:12px 12px; }
  .fstop__linje{ font-size:14px; }
  .fstop__maalt{ font-size:11.5px; }
}


/* 3/9 2026 (Henrik): de to tilbudskort oeverst hoerer kun til forsiden paa computer - paa mobil er de vaek. Og paa mobil er forsidens klaebende Find din ladeboks ORANGE (Henriks valg, undtagelse fra reglen om groen til interne links). Paa Alle ladebokse er det filter-knappen, der klaeber. Ingen nye tvangsregler. */
@media (max-width: 820px) {
  .home #top { display: none; }
  .home #fh-mini .uu-orange, .home #fh-mini .uu-orange.uu-cta--intern { background: var(--cta, #E8622A); color: #fff; }
  .home #fh-mini .uu-orange:hover { background: var(--cta-hover, #D0521C); color: #fff; }
}


/* 4/9 2026 (Henrik): paa mobil erstattes Koeb/Leje-boksene paa forsiden af to trykbare elementer (billigste kampagne/billigst + mest valgt seneste 7 dage). Paa computer staar Koeb/Leje som foer. Ingen nye tvangsregler. */
.fscta{ display:none; }
@media (max-width: 820px) {
  .home .fssvar{ display:none; }
  .fscta{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:0 0 12px; }
  .fscta__el{ position:relative; display:flex; flex-direction:column; gap:3px; background:#fff; border:1px solid #E6EAE7; border-radius:16px; padding:12px 30px 12px 14px; color:inherit; text-decoration:none; box-shadow:0 6px 24px rgba(16,35,26,.06); }
  .fscta__el:active{ transform:scale(.985); }
  /* 27/9 2026 (Henrik, N315): samme maerke paa telefonen, 13. Var 10. */
.fscta__tag{ font:700 13px/1.2 var(--font-body,'Inter'),sans-serif; letter-spacing:.07em; text-transform:uppercase; color:#0B7352; }
  .fscta__titel{ font-family:var(--font-display,'Sora'),sans-serif; font-weight:700; font-size:13.5px; line-height:1.3; color:#1A1A1A; }
  .fscta__pris{ font-family:var(--font-display,'Sora'),sans-serif; font-weight:800; font-size:18px; color:#215C42; }
  .fscta__note{ font-size:11.5px; color:#5B6B65; line-height:1.3; }
  .fscta__pil{ position:absolute; right:12px; top:50%; transform:translateY(-50%); width:22px; height:22px; border-radius:50%; background:#E8622A; color:#fff; font-size:13px; display:flex; align-items:center; justify-content:center; }
  .fscta__el:only-child{ grid-column:1 / -1; }
}


/* ============================================================
   MOBILDESIGNET PAA FORSIDEN (6. september 2026, TILLAEG 20 afsnit 5,
   godkendt i den klikbare proeve, beslutningslog 16.92 - og rettet samme
   dag efter Henriks tjek paa telefonen: filteret som iPhone-bundplade i
   stedet for glas, hjulene som rigtige iPhone-hjul med graat glasbaand).
   Alt herunder gaelder KUN under 821 px - computeren er uroert.
   - Tallene i det groenne felt taeller op, "Siden 2019" glider ind fra
     venstre uden streg (kun pynt; teksten staar i HTML'en og JS'en
     fjerner klassen igen, saa den aldrig kan ende usynlig).
   - Baren: Alle/Koeb/Leje + groen "Vis filter"; "Vis pris" og udbyderne
     som to iPhone-hjul side om side (tre synlige raekker, graat glasbaand
     om den valgte, valget foelger hjulet).
   - HELE baren klaeber under toppen (header 74 + orange felt 59 = 133 px),
     traeder roligt frem (bloede skygger, 1 s), foerste kort faar et
     roligt lys, 22 px mellem kortene.
   - Den orange "Find din ladeboks" glider ned/op paa 1,2 s.
   - Filteret: hvid bundplade med greb, moerk baggrund bagved, roligt.
     Knappen i bunden siger, hvor mange kort der passer. Ingen linjer,
     der glider, intet der blinker.
   Farver er sidens egne (moerkegroen #0B7352, lyn-groen #A8E7C6,
   orange #E8622A). Ingen nye tvangsregler.
   ============================================================ */
.fsb__filterknap, .fsb__hjulrk2, .fsb__mantal{ display:none; }
.fsb__brud, .fsb__valgte, .fsb__over, .fsb__flin{ display:none; }
.fsg, .fsg-bag{ display:none; }
.fs2-liste .pk-wrap[hidden]{ display:none; }

/* ============================================================
   FORSIDENS FILTERBJAELKE PAA LAPTOP
   Henriks udkast, godkendt 24. september 2026.
   EEN hvid klods i to raekker, der klaeber sig fast under toppen:
     Raekke 1: Alle/Koeb/Leje . OEKONOMI med aarene . beloebsfeltet
               helt ude til hoejre, lodret over Vis filter.
     Raekke 2: udbyderhjulet . de valgte filtre som smaa brikker
               . Vis filter med tallet paa.
   Et tryk paa Vis filter folder en FLAD LINJE ud lige under
   bjaelken. Ingen svaevende boks - samme regel som paa siden
   Alle ladebokse. Antallet af ladebokse staar nu over listen.
   Alt herunder ligger bag 821 px. Telefonen er uroert.
   ============================================================ */
@media (min-width:821px){

  /* --- klodsen --- */
  /* toppen blev 76 hoej, da knappen kom tilbage i menuen (maalt 25/9),
     saa bjaelken klaeber 76 nede og ikke 73. */
  .har-fsb .fsb{ display:flex; flex-wrap:wrap; align-items:center; gap:10px 18px;
    padding:12px 20px; position:sticky; top:var(--top-h, 76px); z-index:60; }
  .har-fsb .fsb.er-aaben{ border-radius:18px 18px 0 0; border-bottom-color:transparent; }
  .har-fsb .fsb__brud{ display:block; flex:0 0 100%; height:0; margin:0; }

  /* --- raekke 1 --- */
  .har-fsb .fsb__skifte{ order:1; align-items:center; }
  .har-fsb .fsb__skifte button{ font-size:15px; min-height:44px; padding:0 18px; }
  .har-fsb .fsb__grp{ order:2; gap:12px; }
  .har-fsb .fsb__lbl{ font-size:13px; }
  .har-fsb .fsb__lbl small{ font-size:13px; }
  .har-fsb .fsb__aar{ gap:8px; flex-wrap:nowrap; }
  .har-fsb .fsb__aar button{ font-size:15px; min-height:44px; padding:0 16px;
    white-space:nowrap; }
  .har-fsb .fsb__budget{ order:3; margin-left:auto; gap:2px; }
  .har-fsb .fsb__budgetfelt{ min-height:44px; display:flex; align-items:center;
    justify-content:center; font-size:15px; box-sizing:border-box; }
  .har-fsb .fsb__budgettekst{ font-size:13px; }
  /* de to smaa pile stables oven paa hinanden. 14/10 2026 (Henrik): hver pil
     er mindst 24 hoej, saa den er nem at ramme (Lighthouse); foer 22. */
  .har-fsb .fsb__budgetpile{ gap:0; }
  .har-fsb .fsb__budgetpile button{ width:26px; height:24px; font-size:11px;
    display:flex; align-items:center; justify-content:center; }

  /* --- raekke 2 --- */
  .har-fsb .fsb__hjulrk{ order:5; margin-left:0; }
  .har-fsb .fsb__hjullbl{ font-size:13px; }
  .har-fsb .fsb__hjul{ width:196px; }
  .har-fsb .fsb__hjul__felt{ width:auto; flex:1; min-width:0; white-space:nowrap;
    overflow:hidden; text-overflow:ellipsis; }
  .har-fsb .fsb__hjulgo{ min-height:44px; display:inline-flex; align-items:center;
    font-size:15px; box-sizing:border-box; }
  /* --- filterlinjen: Henriks filterord som piller, der skubbes sidelaens.
         Vis filter og brikkerne er sat ud af brug her (Henrik 25/9). --- */
  .har-fsb .fsb__filterknap, .har-fsb .fsb__filtertal{ display:none; }
  .har-fsb .fsb__flin{ order:6; flex:1; min-width:0; display:flex;
    align-items:center; gap:8px; }
  .har-fsb .fsb__flinpil{ flex:0 0 auto; width:36px; height:36px;
    border-radius:999px; border:1px solid #E6EAE7; background:#fff;
    color:#0B7352; font-size:16px; line-height:1; cursor:pointer; padding:0;
    display:flex; align-items:center; justify-content:center; }
  .har-fsb .fsb__flinpil:hover{ background:#EAF6F0; }
  .har-fsb .fsb__flinpil[disabled]{ opacity:.3; cursor:default; }
  .har-fsb .fsb__flinrk{ flex:1; min-width:0; display:flex; gap:8px;
    overflow-x:auto; scroll-behavior:smooth; padding:2px 0;
    scrollbar-width:none; }
  .har-fsb .fsb__flinrk::-webkit-scrollbar{ display:none; }
  .har-fsb .fsb__fp{ flex:0 0 auto; display:inline-flex; align-items:center;
    gap:8px; min-height:44px; padding:0 16px 0 8px; border-radius:999px;
    border:1px solid #E6EAE7; background:#fff; color:#1A1A1A;
    font:600 15px/1 var(--font-body,'Inter'),sans-serif; cursor:pointer;
    white-space:nowrap; box-sizing:border-box; }
  .har-fsb .fsb__fp:hover{ background:#EAF6F0; }
  .har-fsb .fsb__fpi{ flex:0 0 auto; width:28px; height:28px;
    border-radius:999px; background:#EAF6F0; display:flex; align-items:center;
    justify-content:center; font-size:14px; }
  .har-fsb .fsb__fpi svg{ width:18px; height:18px; display:block; }
  /* valgt er kun en kant, lagt indad saa pillen ikke skifter bredde */
  .har-fsb .fsb__fp.er-valgt{ background:#fff; border-color:#0B7352;
    color:#0B7352; box-shadow:inset 0 0 0 1px #0B7352; }
  .har-fsb .fsb__fp.er-valgt .fsb__fpi{ background:#EAF6F0; }

  /* --- antallet staar over listen. Sorteringen virker kun paa telefon,
         saa den er skjult her. --- */
  .har-fsb .fsb__over{ display:block; margin:20px 0 12px; }
  .har-fsb .fsb__over .fsg__sek--sort{ display:none; }
  .har-fsb .fsb__antal{ font-size:15px; }

  /* --- glaspladen bruges ikke paa computeren; filtrene staar i linjen --- */
  .har-fsb .fsg{ display:none; }

}

@media (max-width: 820px) {
  /* --- tallene i det groenne felt --- */
  .fh__stat--revne{ overflow:hidden; }
  .fh__skub{ display:block; }
  .fh__skub--ind{ animation:fhSkubInd 1.1s cubic-bezier(.2,.8,.25,1) .15s both; }
  @keyframes fhSkubInd{ 0%{ transform:translateX(-110%); opacity:0; } 30%{ opacity:1; } 100%{ transform:none; opacity:1; } }

  /* --- den orange "Find din ladeboks": 1,2 s ned og op --- */
  /* Henrik 6/9: ingen glidebevaegelse (test mod flimmer paa iPhone) - den er der bare. */
  .home #fh-mini{ transition:none; }

  /* --- baren --- */
  .har-fsb .fsb{ display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:10px 8px;
    padding:8px 12px; border-radius:18px; position:sticky; top:133px; z-index:3;
    transition:box-shadow 1s ease .3s, border-color 1s ease .3s; }
  .har-fsb .fsb.klaebt{ border-color:#BFE0CE; box-shadow:0 14px 34px rgba(11,115,82,.22), 0 2px 6px rgba(16,35,26,.08); }
  .har-fsb .fsb__antal, .har-fsb .fsb__grp, .har-fsb .fsb__budget, .har-fsb .fsb__hjulrk{ display:none; }
  .har-fsb .fsb__skifte{ height:44px; align-items:center; }
  .har-fsb .fsb__skifte button{ padding:0 13px; height:36px; }
  .har-fsb .fsb__filterknap{ display:inline-flex; align-items:center; justify-content:center; gap:6px; height:44px; padding:0 14px;
    border:0; border-radius:999px; background:#0B7352; color:#fff; font-weight:700; font-size:14px; font-family:inherit;
    cursor:pointer; white-space:nowrap; -webkit-tap-highlight-color:transparent; }
  .har-fsb .fsb__filtertal{ display:inline-flex; align-items:center; justify-content:center; min-width:20px; height:20px; padding:0 6px;
    border-radius:999px; background:#fff; color:#0B7352; font-size:11px; font-weight:700; }
  .har-fsb .fsb__filtertal, .har-fsb .fsb__filtertal[hidden]{ display:none; } /* Henrik 6/9: intet tal paa filterknappen */
  /* de to hjul side om side - oeverst i filteret (Henrik 6/9, femte runde) */
  .har-fsb .fsb__hjulrk2{ grid-column:1 / -1; display:grid; grid-template-columns:110px minmax(0,1fr); gap:8px; padding:6px 0 2px; }
  .fsg .fsb__mlbl{ color:#2E4A3F; letter-spacing:.1em; }
  .fsg .fsb__hjulm{ background:rgba(255,255,255,.55); }
  .har-fsb .fsb__hjulblok{ display:flex; flex-direction:column; gap:4px; min-width:0; }
  .har-fsb .fsb__mlbl{ font:700 10.5px/1 var(--font-body,'Inter'),sans-serif; letter-spacing:.08em; text-transform:uppercase; color:#5B6B65; padding-left:2px; }
  .har-fsb .fsb__mantal{ display:none; } /* Henrik 6/9, femte runde: tallet staar paa knappen "Vis N ladebokse" i filteret */
  .har-fsb .fsb__mantal b{ color:#22352C; }
  /* iPhone-hjulet, slank udgave: tre synlige raekker a 28 px i en lys graa rende uden ramme;
     den valgte raekke ligger paa en hvid pille med en let skygge, raekkerne over og under toner ud. */
  .har-fsb .fsb__hjulm{ position:relative; height:84px; border-radius:14px; background:#F1F4F2; box-shadow:inset 0 1px 2px rgba(16,35,26,.06); overflow:hidden; }
  .har-fsb .fsb__hjulm::before, .har-fsb .fsb__hjulm::after{ content:''; position:absolute; left:0; right:0; height:28px; pointer-events:none; z-index:2; }
  .har-fsb .fsb__hjulm::before{ top:0; background:linear-gradient(rgba(241,244,242,.96), rgba(241,244,242,.35)); }
  .har-fsb .fsb__hjulm::after{ bottom:0; background:linear-gradient(rgba(241,244,242,.35), rgba(241,244,242,.96)); }
  .har-fsb .fsb__hjulm__baand{ position:absolute; left:4px; right:4px; top:28px; height:28px; border-radius:10px; background:#fff; box-shadow:0 1px 3px rgba(16,35,26,.12); pointer-events:none; z-index:0; }
  .har-fsb .fsb__hjulm__rul{ position:relative; z-index:1; height:100%; overflow-y:auto; scroll-snap-type:y mandatory; scrollbar-width:none;
    -webkit-overflow-scrolling:touch; overscroll-behavior:contain; padding:28px 0; box-sizing:border-box; }
  .har-fsb .fsb__hjulm__rul::-webkit-scrollbar{ display:none; }
  .har-fsb .fsb__hjulm__rul button{ display:flex; align-items:center; justify-content:center; width:100%; height:28px; scroll-snap-align:center;
    border:0; background:none; cursor:pointer; font-family:inherit; font-weight:700; font-size:12.5px; color:#22352C; padding:0 8px;
    -webkit-tap-highlight-color:transparent; }
  .har-fsb .fsb__hjulm__rul button.er-valgt{ color:#0B7352; }
  .har-fsb .fsb__hjulm__rul button img{ max-height:18px; max-width:90px; object-fit:contain; display:block; }
  .har-fsb .fsb__hjulm__ord{ font-family:var(--font-display,'Sora'),sans-serif; font-weight:700; font-size:12.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

  /* --- listen: 22 px mellem kort, roligt lys paa foerste kort, flad visning --- */
  .home .fs2-liste{ gap:22px; }
  .home .fs2-fold{ margin:-4px 0 0; }
  .home .fs2-fold .pk-wrap + .pk-wrap{ margin-top:22px; }
  .home .fs2-liste--flad .fs2-fold__knap, .home .fs2-liste--flad .fs2-fold__luk{ display:none; }
  .home .fs2-liste--flad .fs2-fold{ border:0; background:none; padding:0; margin:22px 0 0; }
  .home .fs2-liste--flad .fs2-fold .pk-wrap .npk{ box-shadow:0 6px 24px rgba(16,35,26,.06); }
  .home .fs2-liste--flad .fs2-gruppe .pk-wrap[hidden] + .fs2-fold{ margin-top:0; }
  .home .fs2-lys{ animation:fs2Lys 1.6s ease .2s; }
  @keyframes fs2Lys{ 0%{ box-shadow:0 6px 24px rgba(16,35,26,.06); } 35%{ box-shadow:0 0 0 3px #A8E7C6, 0 14px 34px rgba(11,115,82,.22); transform:translateY(-3px); } 100%{ box-shadow:0 6px 24px rgba(16,35,26,.06); transform:none; } }
  /* En finger, der holdes paa skaermen, er ikke en mus: mus-over-loeftet paa kortene
     slaas fra paa beroeringsskaerme, saa kortet ikke sitrer under fingeren. */
  .home .npk:hover, .home .pk-wrap[data-type]:hover .pk{ transform:none; }
  .home .fs2-liste, .har-fsb .fsb{ -webkit-tap-highlight-color:transparent; }
  /* Paa en beroeringsskaerm (ingen mus) er der slet intet mus-over paa kortene og ingen
     glidende overgange paa dem, saa en hvilende finger ikke kan faa dem til at flimre. */
  @media (hover:none){
    .home .npk, .home .pk-wrap[data-type] .pk{ transition:none; }
    .home .npk:hover{ border-color:#E6EAE7; box-shadow:0 6px 24px rgba(16,35,26,.06); }
    .home .pk-wrap[data-type]:hover .pk{ border-color:var(--color-border); box-shadow:none; }
    .home .fs2-liste--flad .fs2-fold .pk-wrap .npk:hover{ box-shadow:0 6px 24px rgba(16,35,26,.06); }
    .home, .home .fs2-liste *{ -webkit-tap-highlight-color:transparent; }
    /* Den orange knap og prislinket paa kortet: ingen lysning/loeft under en hvilende finger. */
    .home .npk-cta, .home .pk-tp{ transition:none; }
    .home .npk-cta:hover{ filter:none; transform:none; }
    .home .fs2-liste .pk-wrap{ animation:none; }
  }

  /* --- filteret: hele skaermen som matteret glas (Henrik 6/9, tredje runde: det foerste
     udseende med den groenne top og de groenne knapper, men tydeligt matteret, komprimeret,
     og siden bagved kan hverken trykkes eller rulles). --- */
  html.fsg-aaben{ overflow:hidden; }
  .fsg-bag{ display:none; }
  .fsg{ position:fixed; inset:0; z-index:120; display:flex; flex-direction:column;
    background:rgba(238,244,240,.82); -webkit-backdrop-filter:blur(22px) saturate(1.15); backdrop-filter:blur(22px) saturate(1.15);
    transform:translateY(100%); transition:transform .32s cubic-bezier(.22,.61,.36,1); touch-action:manipulation; }
  .fsg[hidden]{ display:none; }
  .fsg.vist{ transform:none; }
  .fsg.klar{ transition:none; transform:none; }
  .fsg__hdr{ flex:0 0 74px; height:74px; display:flex; align-items:center; justify-content:space-between; padding:0 18px; background:rgba(11,115,82,.96); }
  .fsg__logo{ display:block; width:275.5px; max-width:calc(100% - 60px); }
  .fsg__logo svg{ width:100%; height:27px; display:block; }
  .fsg__luk{ width:44px; height:44px; margin-right:-10px; border:0; background:none; cursor:pointer; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:6px; padding:0; }
  .fsg__luk span{ display:block; width:24px; height:2px; background:#fff; border-radius:2px; }
  .fsg__luk span:nth-child(1){ transform:translateY(8px) rotate(45deg); }
  .fsg__luk span:nth-child(2){ opacity:0; }
  .fsg__luk span:nth-child(3){ transform:translateY(-8px) rotate(-45deg); }
  .fsg__top{ display:flex; align-items:center; justify-content:space-between; padding:12px 20px 4px; }
  .fsg__top h3{ font-family:var(--font-display,'Sora'),sans-serif; font-size:19px; margin:0; color:#0B3D2C; }
  .fsg__nulstil{ border:0; background:none; cursor:pointer; font-family:inherit; font-size:13.5px; color:#0B7352; text-decoration:underline; padding:6px 0; }
  .fsg__ind{ flex:1; min-height:0; overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; padding:4px 20px 8px; display:grid; grid-template-columns:1fr 1fr; gap:6px 10px; align-content:start; }
  .fsg__sek{ grid-column:1 / -1; display:flex; flex-direction:column; gap:7px; padding:6px 0 4px; }
  .fsg__sek--halv{ grid-column:auto; }
  .fsg__lbl{ font:700 10.5px/1 var(--font-body,'Inter'),sans-serif; letter-spacing:.1em; text-transform:uppercase; color:#2E4A3F; }
  .fsg__v{ display:flex; flex-wrap:wrap; gap:7px; }
  .fsg__v button{ height:38px; padding:0 13px; border-radius:999px; border:1px solid rgba(11,115,82,.7); background:rgba(255,255,255,.88);
    color:#0B3D2C; font-weight:600; font-size:13.5px; font-family:inherit; cursor:pointer; -webkit-tap-highlight-color:transparent; touch-action:manipulation; }
  .fsg__v button.er-valgt{ background:#0B7352; color:#fff; border-color:#0B7352; }
  .fsg__budget{ display:flex; align-items:center; gap:10px; height:44px; padding:0 6px 0 14px; border:1px solid rgba(11,115,82,.7); border-radius:10px; background:rgba(255,255,255,.88); font-size:15px; font-weight:700; color:#0B3D2C; }
  .fsg__budgetnote{ margin-left:auto; font-size:12px; font-weight:500; color:#3C5147; }
  .fsg__budgetpile{ display:flex; gap:6px; }
  .fsg__budgetpile button{ border:1px solid rgba(11,115,82,.5); background:#fff; cursor:pointer; border-radius:8px; width:36px; height:32px; font-size:11px; color:#0B7352; line-height:1; padding:0; touch-action:manipulation; -webkit-tap-highlight-color:transparent; }
  .fsg__fod{ flex:0 0 auto; padding:8px 20px calc(14px + env(safe-area-inset-bottom)); }
  .fsg__vis{ width:100%; height:52px; border:0; border-radius:999px; background:#0B7352; color:#fff; font-weight:700; font-size:16px; font-family:inherit; cursor:pointer; box-shadow:0 8px 24px rgba(11,115,82,.3); touch-action:manipulation; }
  .fsg__vis b{ font-variant-numeric:tabular-nums; margin:0 .25em; }
  /* Et dobbelttryk paa knapper i baren maa ikke zoome siden (iPhone). */
  .har-fsb .fsb, .har-fsb .fsb button{ touch-action:manipulation; }
}

/* ============================================================
   FORSIDENS FILTERBJAELKE PAA TELEFON
   Henriks udkast, godkendt 25. september 2026.
   Linje 1: Alle . Koeb . Leje og logohjulet som glashjul.
   Linje 2: aarshjulet som glashjul og filterlinjen.
   Den groenne Vis filter er ude, og glaspladen bruges ikke mere.
   Sorteringen staar over listen ved siden af antallet.
   Beloebsfeltet bliver paa computeren og er ikke med her.
   ============================================================ */
@media (max-width:820px){

  /* Den klaebende linje med "Find den rigtige ladeboks til din elbil" er taget
     ud paa forsiden (Henrik 25/9). To ting kan ikke klaebe oven paa hinanden,
     og linjen kostede 61 af telefonens 844 punkter. Vejen er der stadig:
     burgermenuen har Find din ladeboks, Skift til elbil og Ladeagenten.
     Burgeren er uaendret hvid. Dette ruller en del af 6. september tilbage. */
  .home #fh-mini{ display:none !important; }

  /* Maalt 25/9: toppen paa telefon er 125 hoej, ikke 74. Logoet er 276 bredt
     og bryder om, saa burgeren falder ned paa en anden linje. De 133, bjaelken
     klaebede ved foer, var regnet som 74 plus den linje, der nu er taget ud,
     og det passede derfor ikke. Bjaelken klaeber nu 125 nede. */
  .har-fsb .fsb{ display:flex; flex-wrap:wrap; align-items:center;
    gap:8px; padding:8px 10px; top:var(--top-h, 125px); }
  .har-fsb .fsb__filterknap{ display:none; }
  .har-fsb .fsg, .har-fsb .fsg-bag{ display:none; }
  .har-fsb .fsb__brud{ display:block; flex:0 0 100%; height:0; margin:0; order:3; }

  /* --- linje 1 --- */
  .har-fsb .fsb__skifte{ order:1; padding:3px; height:auto; }
  /* 25/9 aften (Henrik sagde ja efter udkast): Alle/Koeb/Leje var 38 hoeje,
     under husets 44. Nu 44, og rammen om dem bliver 50. Bjaelken bliver ikke
     hoejere, fordi udbyderhjulet ved siden af er 56. */
  .har-fsb .fsb__skifte button{ min-height:44px; height:44px; padding:0 12px;
    font-size:13px; }

  /* --- de to glashjul --- */
  .har-fsb .fsb__hjulrk2{ display:contents; }
  /* Maalt 25/9: paa en 360 telefon er der 300 at tage af inde i bjaelken.
     Alle/Koeb/Leje er 153, og et fast 150 bredt hjul gav 311, saa hjulet
     faldt ned paa en linje for sig. Udbyderhjulet maa derfor skrumpe. */
  .har-fsb .fsb__hjulblok{ order:4; display:block; min-width:0; flex:0 0 106px; }
  .har-fsb .fsb__hjulblok--udb{ order:2; margin-left:auto;
    flex:1 1 118px; min-width:118px; max-width:150px; }
  .har-fsb .fsb__mlbl{ display:none; }
  .har-fsb .fsb__hjulm{ position:relative; width:100%; height:56px;
    border-radius:14px; background:#E4EAE6;
    box-shadow:inset 0 1px 2px rgba(16,35,26,.12); overflow:hidden; }
  .har-fsb .fsb__hjulm::before, .har-fsb .fsb__hjulm::after{ height:15px; }
  .har-fsb .fsb__hjulm::before{
    background:linear-gradient(rgba(228,234,230,.97), rgba(228,234,230,.28)); }
  .har-fsb .fsb__hjulm::after{
    background:linear-gradient(rgba(228,234,230,.28), rgba(228,234,230,.97)); }
  .har-fsb .fsb__hjulm__baand{ left:4px; right:4px; top:14px; height:28px;
    border-radius:9px; background:#EFF4F0; border:1px solid #CFE6DC;
    box-shadow:none; box-sizing:border-box; }
  .har-fsb .fsb__hjulm__rul{ padding:14px 0; }
  /* 25/9 aften (Henrik sagde ja efter udkast): teksten i begge glashjul var
     12,5, under husets gulv paa 13. Kun skriften er rettet; hjulene, raekkerne
     paa 28 og glasset er urørte. */
  .har-fsb .fsb__hjulm__rul button, .har-fsb .fsb__hjulm__ord{ font-size:13px; }

  /* --- linje 2: filterlinjen. Pilene svaever paa enderne, saa de ikke
         stjaeler bredde. Maalt: sat ved siden af skar de linjen fra 328
         til 256 punkter, og saa var der kun een pille at se paa. --- */
  .har-fsb .fsb__flin{ order:5; position:relative; display:flex; align-items:center;
    flex:1; min-width:0; gap:0; }
  .har-fsb .fsb__flinrk{ flex:1; min-width:0; display:flex; gap:6px;
    overflow-x:auto; scroll-behavior:smooth; padding:2px 0;
    scrollbar-width:none; }
  .har-fsb .fsb__flinrk::-webkit-scrollbar{ display:none; }
  .har-fsb .fsb__fp{ flex:0 0 auto; display:inline-flex; align-items:center;
    min-height:44px; padding:0 12px; border-radius:999px;
    border:1px solid #E6EAE7; background:#fff; color:#1A1A1A;
    font:600 13px/1 var(--font-body,'Inter'),sans-serif; cursor:pointer;
    white-space:nowrap; box-sizing:border-box; }
  .har-fsb .fsb__fpi{ display:none; }
  .har-fsb .fsb__fp.er-valgt{ background:#fff; border-color:#0B7352; color:#0B7352;
    box-shadow:inset 0 0 0 1px #0B7352; }
  .har-fsb .fsb__flinpil{ position:absolute; z-index:2; top:50%;
    transform:translateY(-50%); width:30px; height:30px; padding:0;
    border-radius:999px; border:1px solid #E6EAE7; color:#0B7352;
    font-size:15px; line-height:1; cursor:pointer; display:flex;
    align-items:center; justify-content:center;
    background:rgba(255,255,255,.96);
    box-shadow:0 2px 10px rgba(16,35,26,.22); }
  .har-fsb .fsb__flinpil[data-flin="-1"]{ left:-2px; }
  .har-fsb .fsb__flinpil[data-flin="1"]{ right:-2px; }
  /* 25/9 aften (Henrik sagde ja efter udkast): pilen ser ud som foer, 30 bred,
     men fingeren kan nu ramme den i en usynlig flade paa 44. Den slukkede pil
     tager ikke imod tryk, fordi den arver pointer-events:none. */
  .har-fsb .fsb__flinpil::before{ content:''; position:absolute; inset:-7px;
    border-radius:50%; }
  /* naar der ikke er mere at rulle, forsvinder pilen helt. Paa telefonen
     ligger den oven paa en pille, og en halvgennemsigtig pil oven paa
     et ord er rod. */
  .har-fsb .fsb__flinpil[disabled]{ opacity:0; pointer-events:none; }

  /* --- antallet og sorteringen over listen --- */
  .har-fsb .fsb__over{ display:block; margin:6px 0 12px; }
  .har-fsb .fsb__over .fsb__antal{ display:block; font-size:15px; margin:0 0 8px; }
  .har-fsb .fsb__over .fsg__sek--sort{ display:block; padding:0; gap:0; }
  .har-fsb .fsb__over .fsg__lbl{ display:none; }
  .har-fsb .fsb__over .fsg__v{ display:flex; flex-wrap:nowrap; gap:6px;
    overflow-x:auto; scrollbar-width:none; padding:2px 0; }
  .har-fsb .fsb__over .fsg__v::-webkit-scrollbar{ display:none; }
  .har-fsb .fsb__over .fsg__v button{ flex:0 0 auto; min-height:38px; padding:0 14px;
    border-radius:999px; border:1px solid #E6EAE7; background:#fff;
    color:#1A1A1A; font:600 13px/1 var(--font-body,'Inter'),sans-serif;
    cursor:pointer; }
  .har-fsb .fsb__over .fsg__v button.er-valgt{ background:#fff; border-color:#0B7352;
    color:#0B7352; box-shadow:inset 0 0 0 1px #0B7352; }
}
/* ============================================================
   ALLE LADEBOKSE HAR FAAET FORSIDENS FILTERBJAELKE (Henrik 25/9 2026, aften)
   ------------------------------------------------------------
   "Bjaelkerne skal foelges ad." Alle bjaelkens regler hed foer
   ".home ..." og gjaldt kun forsiden. De hedder nu ".har-fsb ...", og
   klassen saettes paa baade forsiden og Alle ladebokse, saa en rettelse
   slaar igennem begge steder. Her staar kun det, Alle ladebokse har ud
   over forsiden: rammen om bjaelken og knappen Nulstil alt.
   ============================================================ */
.fsb-arkiv{ margin:8px 0 0; }
/* Kassen gaar hele listen ned, saa bjaelken kan klaebe. .fsx og .wrap om bjaelken
   giver kun farverne videre og har ingen kasse selv. Bjaelken og linjen under den
   faar forsidens bredde: 1080, og 20 luft i hver side paa telefon. */
.fsb-arkiv > .fsx, .fsb-arkiv > .fsx > .wrap{ display:contents; }
.fsb-arkiv > .fsx > .wrap > .fsb, .fsb-arkiv > .fsx > .wrap > .fsb__over{
  width:max(min(1080px, calc(100% - 40px)), min(1120px, calc(100% - 50px))); margin-left:auto; margin-right:auto; box-sizing:border-box; }
/* 27/9 2026 (Henrik, M48/N317): bjaelken og linjen under den foelger nu listebredden 1120, naar
   skaermen er bred nok (fra ca. 1170). Paa smallere skaerme og telefon er bredden som foer. */
/* Ryd alt paa computeren (Henrik 25/9 aften; teksten "Ryd alt" er hans).
   Knappen staar i linjen lige under bjaelken sammen med antallet, og hele linjen
   klaeber med bjaelken paa begge sider. Linjen har sidens egen baggrund, saa
   kortene glider ind under den - knappen ligger aldrig oven paa et kort, heller
   ikke paa en smal computer, hvor listen fylder hele bredden (maalt ved 900).
   En knap, der hang frit under bjaelken, blev proevet og forkastet samme aften:
   den gik ind over kortene paa Alle ladebokse og ved 900 paa begge sider.
   Telefonen er uroert: Alle ladebokse har Ryd alt i linjen som foer. */
.fsb__nulstil--laptop{ display:none; }
@media (min-width:821px){
  .fsb__nulstil--laptop{ display:inline-flex; align-items:center; }
  .har-fsb .fsb__over{ display:flex; align-items:center; justify-content:space-between; gap:12px;
    position:sticky; top:calc(var(--top-h, 76px) + var(--fsb-h, 161px)); z-index:59;
    background:#F7F9F8; padding-top:6px; padding-bottom:6px; }
}
.fsb-arkiv .fsb__over{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.fsb__nulstil{ min-height:44px; padding:0 16px; border:1px solid #E6EAE7; border-radius:999px;
  background:#fff; color:#0B7352; font-family:inherit; font-weight:600; font-size:15px;
  line-height:1; cursor:pointer; }
.fsb__nulstil:hover{ background:#EAF6F0; }

@media (prefers-reduced-motion: reduce) {
  .fh__skub--ind, .fs2-lys{ animation:none; }
  .fsg, .fsg-bag, .home #fh-mini, .har-fsb .fsb{ transition:none; }
}


/* ============================================================
   MENUEN PAA MOBIL - Henriks beslutning 7. september 2026 (N159)
   ------------------------------------------------------------
   Syv punkter og en orange knap, aabnet som en HEL SKAERM med
   logo og kryds, i stedet for en klap der skubber siden ned.
   Prisindeks blev under Guides efter maaling 7. sept.: nul af de
   415 egne soegeord indeholder ordet, og ingen side paa sitet
   linker til den. LAPTOP ER UROERT - alt nyt ligger bag 820 px,
   og de tre nye punkter er skjult paa alle andre bredder.
   ============================================================ */
.bilo-mobilpunkt{ display:none; }

@media (max-width:820px){
  .bilo-mobilpunkt{ display:block; }

  /* Menuen fylder hele skaermen, saa den ikke skubber siden ned */
  .site-header.is-open{ position:fixed; inset:0; z-index:1000; height:100dvh; overflow-y:auto; background:var(--color-primary-dark); }
  .admin-bar .site-header.is-open{ top:46px; height:calc(100dvh - 46px); }
  .site-header.is-open .site-header__inner{ align-items:flex-start; padding-bottom:18px; }
  body.bilo-menu-aaben{ overflow:hidden; }

  /* Punkterne: stoerre og tydeligere, som i den godkendte proeve */
  .site-header.is-open .nav-menu > li > a{ font-family:var(--font-display,inherit); font-size:21px; font-weight:700; line-height:1.2; padding:9px 4px; color:#fff; }
  .site-header.is-open .nav-menu > li.bilo-fremh > a{ color:#A8E7C6; }

  /* Det punkt, man staar paa, staar i den lyse groenne - samme farve og
     vaegt som paa laptop. Uden den regel vandt reglen ovenfor, og intet
     punkt var markeret paa mobil (maalt 7. sept.). */
  .site-header.is-open .nav-menu > li.current-menu-item > a,
  .site-header.is-open .nav-menu > li.current-menu-ancestor > a,
  .site-header.is-open .nav-menu > li.current_page_item > a,
  .site-header.is-open .nav-menu > li.current_page_ancestor > a{ color:#A8E7C6; background:none; }
  .site-header.is-open .nav-menu > li.bilo-fremh > a::after{ content:'\2726'; font-size:14px; margin-left:8px; }

  /* Ladeagenten staar som menupunkt her, ikke som knap ved siden af */
  .site-header.is-open .header-ladeagent{ display:none; }

  /* Den orange knap nederst */
  .site-header.is-open .header-cta.btn-primary{ background:var(--cta-orange,#E8622A); border-color:var(--cta-orange,#E8622A); color:#fff; border-radius:999px; font-size:16px; font-weight:700; margin:22px 4px 6px; padding:15px 16px; }
  .site-header.is-open .header-cta.btn-primary:hover{ background:#D14E1C; border-color:#D14E1C; color:#fff; }
}

/* Skift til elbil er nu ogsaa sit eget punkt paa mobil (7. sept. 2026).
   Paa laptop findes siden KUN under Guides, saa Guides skal stadig staa
   markeret dér - men ikke paa mobil, hvor to punkter ellers lyste paa
   samme tid. Derfor baeres markeringen af en egen klasse, som kun
   gaelder over 820 px. Samme farve og vaegt som den almindelige
   markering ovenfor. */
@media (min-width: 821px){
  .main-nav .nav-menu > li.bilo-guides-skift > a,
  .main-nav .nav-menu > li.bilo-guides-skift > a:hover{ color:#A8E7C6; background:none; font-weight:700; text-decoration:none; text-shadow:none; }
}


/* ============================================================
   DE TRE HANDLINGSFELTER I MENUEN PAA TELEFONEN
   Henriks beslutning 7. september 2026.
   ------------------------------------------------------------
   Trappen: den handling, der tjener penge, staar oeverst, stoerst
   og orange. De to andre staar under i faldende vaegt. Hvert felt
   siger med sin lille linje, hvad man faar ved at trykke.
   Udklappen paa Ladebokse og Guides er slaaet fra paa telefonen:
   begge punkter foerer nu til deres egen side, hvor filterbaren
   og guide-oversigten goer det samme som undermenuen gjorde.
   LAPTOP ER UROERT. Alt herunder ligger bag 820 px.
   ============================================================ */
.bilo-cta{ display:none; }

@media (max-width:820px){
  .site-header.is-open .bilo-cta{ display:flex; flex-direction:column; gap:8px; margin:14px 4px 4px; }

  .bilo-cta__f{ display:flex; align-items:center; gap:12px; border-radius:14px; text-decoration:none; }
  .bilo-cta__ik{ width:34px; height:34px; border-radius:9px; display:flex; align-items:center; justify-content:center; flex:none; }
  .bilo-cta__tx{ flex:1; min-width:0; display:block; }
  .bilo-cta__t{ display:block; font-family:var(--font-display,inherit); font-weight:800; line-height:1.15; }
  .bilo-cta__s{ display:block; line-height:1.32; margin-top:3px; }
  .bilo-cta__x{ display:block; line-height:1.3; margin-top:5px; font-weight:700; }
  .bilo-cta__pil{ font-size:19px; font-weight:800; flex:none; opacity:.85; line-height:1; }

  /* 1. Find din ladeboks: den ene handling, der ikke skal vaelges imellem */
  .bilo-cta__f--find{ background:var(--cta-orange,#E8622A); color:#fff; padding:13px 16px; box-shadow:0 5px 16px rgba(232,98,42,.32); }
  .bilo-cta__f--find .bilo-cta__ik{ background:rgba(255,255,255,.22); }
  .bilo-cta__f--find .bilo-cta__t{ font-size:17px; }
  .bilo-cta__f--find .bilo-cta__s{ font-size:12.5px; }
  .site-header.is-open .bilo-cta__f--find .bilo-cta__s{ color:#fff; }

  /* 2. Skift til elbil */
  .bilo-cta__f--skift{ background:#fff; color:#123A2C; padding:11px 16px; }
  .bilo-cta__f--skift .bilo-cta__ik{ background:#E4F4EA; color:#0B7352; }
  .bilo-cta__f--skift .bilo-cta__t{ font-size:15.5px; }
  .bilo-cta__f--skift .bilo-cta__s{ font-size:12px; color:#4E6B5E; }
  .bilo-cta__f--skift .bilo-cta__x{ font-size:12px; color:#1F7A55; }

  /* 3. Ladeagenten */
  /* MAALT 7. sept.: feltet maalte 1,33 mod menuens egen groenne og kunne
     naesten ikke ses som et felt. Bunden er nu moerkere (2,33) og ringen er
     den lyse groenne (4,16), saa feltet lyser op. Ringen foelger husets egen
     regel fra 24. august: fyldt orange = ud til udbyderen, ring = peger indad.
     Ladeagenten peger indad. */
  .bilo-cta__f--agent{ background:#043524; color:#fff; padding:11px 16px; border:2px solid #A8E7C6; }
  .bilo-cta__f--agent .bilo-cta__ik{ background:rgba(168,231,198,.18); color:#A8E7C6; }
  .bilo-cta__f--agent .bilo-cta__t{ font-size:15px; color:#A8E7C6; }
  .bilo-cta__f--agent .bilo-cta__s{ font-size:11.5px; color:#CFE6DC; }

  /* ------------------------------------------------------------
     MAALT 7. SEPTEMBER: overskrifterne i felterne blev farvet af en
     gammel regel for alle links i menuen (.main-nav a), som er
     staerkere end feltets egen farve. Overskriften i det hvide felt
     maalte 1,31 i kontrast og kunne naesten ikke laeses, og i det
     orange 2,58. Farven saettes derfor her med tilstraekkelig vaegt,
     og den er efterprovet paa siden bagefter. Samme laere som med
     Ladeagentens orange tekst 30. august.
     ------------------------------------------------------------ */
  .site-header.is-open .bilo-cta__f--find,
  .site-header.is-open .bilo-cta__f--find .bilo-cta__t,
  .site-header.is-open .bilo-cta__f--find .bilo-cta__pil{ color:#fff; }
  .site-header.is-open .bilo-cta__f--skift,
  .site-header.is-open .bilo-cta__f--skift .bilo-cta__t,
  .site-header.is-open .bilo-cta__f--skift .bilo-cta__pil{ color:#123A2C; }
  .site-header.is-open .bilo-cta__f--agent .bilo-cta__t,
  .site-header.is-open .bilo-cta__f--agent .bilo-cta__pil{ color:#A8E7C6; }

  /* Knappen og Ladeagent-linket er nu felter og staar ikke to gange */
  .site-header.is-open .header-cta{ display:none; }

  /* Udklappen er vaek: et klik paa Ladebokse og Guides aabner selve siden */
  .site-header.is-open .nav-menu > li.menu-item-has-children > .submenu-toggle{ display:none; }
  .site-header.is-open .nav-menu > li.menu-item-has-children > .sub-menu{ display:none; }
}

/* ------------------------------------------------------------
   LAVE SKAERME (7. september 2026)
   Maalt: paa en telefon med 620 px synlig hoejde manglede der 53 px,
   foer det nederste felt kunne ses uden at rulle. Luften strammes
   derfor en tand mere, men KUN naar skaermen er lav. Trykfladen
   holder sig paa 38 px, godt over kravet paa 32 px, og skriften
   roeres ikke. Laeren fra 6.-7. september staar ved magt: maal den
   synlige hoejde, foer du goer noget mindre.
   ------------------------------------------------------------ */
@media (max-width:820px) and (max-height:700px){
  .site-header.is-open .nav-menu > li > a{ padding:6px 4px; }
  .site-header.is-open .site-header__inner{ padding-bottom:4px; }
  .site-header.is-open .bilo-cta{ margin:7px 4px 0; gap:5px; }
  .site-header.is-open .bilo-cta__f--find{ padding:11px 16px; }
  .site-header.is-open .bilo-cta__f--skift,
  .site-header.is-open .bilo-cta__f--agent{ padding:9px 16px; }
}

/* ------------------------------------------------------------
   FINISHEN PAA MENUEN (Henriks oenske 7. september 2026)
   ------------------------------------------------------------
   To ting, og begge hoerer KUN til det oejeblik, menuen aabner:
   1) punkterne og de tre felter folder sig ind efter hinanden
      nedefra, 45 millisekunder mellem hver.
   2) ét enkelt glimt gaar hen over den orange knap, saa oejet
      lander paa den handling, der betyder mest.
   Bevaegelsen haenger paa klassen bilo-anim, som scriptet slukker
   efter ét sekund. Sker der noget uventet, staar alt paa plads
   alligevel: en animation maa aldrig vaere det, der goer noget
   synligt. Og der er ingen mus-over og ingen overgange paa noget,
   en finger kan hvile paa (laeren fra 6. september).
   ------------------------------------------------------------ */
@media (max-width:820px){
  @keyframes bilo-menu-ind{
    from{ opacity:0; transform:translateY(9px); }
    to{ opacity:1; transform:none; }
  }
  @keyframes bilo-glimt{
    from{ transform:translateX(-140%) skewX(-14deg); }
    to{ transform:translateX(420%) skewX(-14deg); }
  }
  .site-header.is-open.bilo-anim .nav-menu > li,
  .site-header.is-open.bilo-anim .bilo-cta__f{
    animation:bilo-menu-ind .34s cubic-bezier(.22,.61,.36,1) backwards;
  }
  .site-header.is-open.bilo-anim .nav-menu > li:nth-child(1){ animation-delay:.02s; }
  .site-header.is-open.bilo-anim .nav-menu > li:nth-child(2){ animation-delay:.065s; }
  .site-header.is-open.bilo-anim .nav-menu > li:nth-child(3){ animation-delay:.11s; }
  .site-header.is-open.bilo-anim .nav-menu > li:nth-child(4){ animation-delay:.155s; }
  .site-header.is-open.bilo-anim .nav-menu > li:nth-child(5){ animation-delay:.2s; }
  .site-header.is-open.bilo-anim .bilo-cta__f--find{ animation-delay:.26s; }
  .site-header.is-open.bilo-anim .bilo-cta__f--skift{ animation-delay:.305s; }
  .site-header.is-open.bilo-anim .bilo-cta__f--agent{ animation-delay:.35s; }

  /* Glimtet over den orange knap. Det ligger i et lag, der ikke kan
     trykkes paa, og det findes kun, mens bilo-anim er sat. */
  .site-header.is-open .bilo-cta__f--find{ position:relative; overflow:hidden; }
  .site-header.is-open.bilo-anim .bilo-cta__f--find::after{
    content:''; position:absolute; top:-10%; bottom:-10%; left:0; width:34%;
    background:linear-gradient(100deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.30) 50%, rgba(255,255,255,0) 100%);
    pointer-events:none;
    animation:bilo-glimt .85s ease-out .58s backwards;
  }

  /* Har man bedt telefonen om mindre bevaegelse, sker der ingenting. */
  @media (prefers-reduced-motion:reduce){
    .site-header.is-open.bilo-anim .nav-menu > li,
    .site-header.is-open.bilo-anim .bilo-cta__f{ animation:none; }
    .site-header.is-open.bilo-anim .bilo-cta__f--find::after{ display:none; }
  }
}

/* ==========================================================
 * LADEAGENTEN - ADRESSEFORSLAG
 * Listen med adresseforslag, der lander under feltet, og den
 * lille roede linje, naar et opslag ikke kan svare.
 * ========================================================== */
.la .adrboks{position:relative;flex:1;min-width:190px}
.la .adrboks .addr{width:100%;min-width:0}
.la .adrliste{position:absolute;left:0;right:0;top:calc(100% + 5px);z-index:40;margin:0;padding:6px;list-style:none;background:#fff;border:1px solid #CFE7DB;border-radius:var(--radius-md);box-shadow:0 12px 28px rgba(11,58,44,.16);max-height:264px;overflow-y:auto}
.la .adrliste li{padding:10px 12px;border-radius:var(--radius-sm);font-family:var(--inter);font-size:var(--text-base);color:#123A2C;cursor:pointer}
.la .adrliste li:hover{background:#EAF7F0}
.la .opslagfejl{margin:-6px 0 14px;font-family:var(--inter);font-size:var(--text-sm);color:#B4472A}
/* ==========================================================
 * LADEAGENTEN - SAMME KANTER SOM RESTEN AF SIDEN
 * Maalt 8. september 2026: kortet og tillidsfeltet begynder
 * 24 px inde, mens sporgsmaalene begyndte helt ude ved kanten
 * (0 px). Her faar de samme kant. Paa telefon staar knapperne
 * i hver sin fulde bredde i stedet for at brakke skaevt om.
 * ========================================================== */
.la .faq{padding-left:24px;padding-right:24px}

@media(max-width:560px){
  .la .faq{padding-left:20px;padding-right:20px}
  .la .mail{flex-direction:column;align-items:stretch}
  .la .mail input{min-width:0;width:100%}
  .la .go{width:100%}
  .la #blokNy .row .loc{flex:1 1 100%;justify-content:center;min-height:48px}
  .la .plate{flex:1 1 100%}
  .la .adrboks{flex:1 1 100%}
}
/* Lille maerkat ved kanten af telefonbilledet. Henriks beslutning 8. september 2026. */
.la .phone__eks{width:302px;margin:6px auto 0;text-align:right;font-family:var(--inter);font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#5F7A6D}

/* ============================================================
 * 21. SEPTEMBER 2026 - DEN SLANKE BJAELKE PAA ALLE LADEBOKSE
 * ============================================================
 * HVAD: Alle ladebokse faar paa telefon samme slanke, klaebende
 * bjaelke som forsiden: Alle/Koeb/Leje til venstre og en groen
 * »Filtrer ladebokse« til hoejre.
 *
 * HVORFOR: Henriks oenske (N149). Maalt 21. september i 390
 * punkters bredde: forsidens bjaelke er 62 hoej og klaeber 74
 * punkter under toppen. Alle ladebokse havde en groen knap i fuld
 * bredde, 358 gange 53, som ikke klaebede, og Koeb/Leje laa inde i
 * selve filteret, hvor man foerst saa det efter et tryk.
 *
 * HVEM: Henriks beslutning. Bygget 21. september 2026.
 *
 * Tallene herunder er taget fra forsidens egen bjaelke, saa de to
 * sider ikke kan skride fra hinanden. Der er ikke opfundet en
 * eneste ny farve eller stoerrelse.
 *
 * Kun telefon. Computer er uroert.
 * ============================================================ */
@media (max-width: 820px) {

	.lbb {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-between;
		gap: 8px;
		background: #fff;
		border: 1px solid #E6EAE7;
		border-radius: 18px;
		/* MAALT 21. september: paa en smal telefon (360) fylder skiftet
		   166 og knappen 161, i alt 335 med mellemrummet. Med 12 punkters
		   luft i siden var der kun 334 indvendigt, og baren braekkede om
		   i to linjer paa det ene punkt. Med 10 er der 338. */
		padding: 8px 10px;
		box-shadow: 0 6px 24px rgba(16,35,26,.06);
		margin: 0 0 18px;
		position: sticky;
		top: 74px;
		z-index: 3;
	}

	.lbb .tbar__skifte {
		flex: 0 0 auto;
		width: auto;
		display: inline-flex;
		background: #EFF4F0;
		border-radius: 999px;
		padding: 4px;
	}

	.lbb .tbar__skifte button {
		flex: 0 0 auto;
		border: 0;
		background: none;
		cursor: pointer;
		padding: 7px 13px;
		border-radius: 999px;
		font-weight: 600;
		font-size: 13.5px;
		color: #5C6B63;
		font-family: inherit;
	}

	.lbb .tbar__skifte button.er-valgt {
		background: #0B7352;
		color: #fff;
	}

	.lbb .tbar-cta {
		flex: 0 0 auto;
		/* Knappen var selv klaebende og laa oeven paa logoet. Nu er det
		   baren, der klaeber, og knappen sidder stille inde i den. */
		position: static;
		top: auto;
		z-index: auto;
		min-height: 44px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: 6px;
		height: 44px;
		width: auto;
		margin: 0;
		padding: 0 12px;
		border: 0;
		border-radius: 999px;
		background: #0B7352;
		color: #fff;
		font-weight: 700;
		font-size: 14px;
		font-family: inherit;
		cursor: pointer;
		white-space: nowrap;
		-webkit-tap-highlight-color: transparent;
	}

	/* Tallet i knappen tages ud paa telefonen. MAALT 21. september:
	   med tallet fylder knappen 203 og skiftet 166, i alt 377, mens
	   der kun er 364 indvendigt - saa braekkede baren om i to linjer
	   og var ikke laengere slank. Uden tallet fylder de to dele 343.
	   Antallet staar i forvejen tre andre steder paa skaermen: i
	   overskriften, inde i filteret og paa »Se resultat«.
	   Forsiden goer det samme med sit eget tal. */
	.lbb .tbar-cta__tal { display: none; }

}

/* ============================================================
   FASE 3 — KOMMUNESIDEN BYGGET EFTER SKABELONEN (25. september 2026)
   ------------------------------------------------------------
   HVAD: de 98 kommunesider får skabelonens opbygning: byskiltet og en
         faktabjælke med de tre nøgletal som første afsnit (tallet først,
         navnet under), et søjlediagram af kommunens egne boligtal i stedet
         for tabellen, afsnit med 96/60 imellem, overskrift 26/22 med 8
         under, løbende tekst i læsebredden 720, indhold i listebredden 1120.
         Guidekortene nederst får guidesoversigtens mål (titel 20, linje 17).
   HVORFOR: skabelonen »Kommuneside« fra 22. september er godkendt (fase 1).
   HVEM: Henrik, 25. september 2026: byg siderne efter skabelonerne, i ét stræk.
   FARVER: ingen nye på det, der fandtes i forvejen. Byskiltets røde kant
         #C8102E er skabelonens egen og står kun på skiltet. Søjlerne er
         frisk grøn #3EA66E, som skabelonen siger.
   OGSÅ: brødkrummens links i toppen af guidesoversigten og kommunesiden
         kan nu rammes i 44, som skabelonen siger. Målt før: 16 og 37.
   LAG: telefonen til og med 820, computeren fra 821.
   Sikkerhedskopi: uploads/kontrol-25september-2026/foer12/
   ============================================================ */
@media (max-width:820px){
  .ko-hero .brodkrumme a{ display:inline-flex; align-items:center; min-height:44px; }
  .ko-hero .brodkrumme{ margin:0; }

  .bilo-rute-kommune .ko-wrap{ max-width:none; padding:0 16px 60px; }
  .bilo-rute-kommune .ko-blok{ margin:0; padding:60px 0 0; }
  .bilo-rute-kommune .ko-blok > h2{ font-size:22px; line-height:1.25; margin:0 0 8px; }
  .bilo-rute-kommune .ko-ingress,
  .bilo-rute-kommune .ko-blok > p,
  .bilo-rute-kommune .ko-to > div > p:not(.ko-kilde){ font-size:17px; line-height:1.5;
    max-width:720px; margin:0 0 24px; }
  .bilo-rute-kommune .ko-note,
  .bilo-rute-kommune .ko-kilde{ font-size:13px; line-height:1.5; max-width:720px; margin:24px 0 0; }

  .bilo-rute-kommune .ko-kende{ display:grid; grid-template-columns:1fr; gap:24px; }
  .ko-skilt{ display:flex; align-items:center; justify-content:center; aspect-ratio:2/1;
    width:100%; max-width:240px; box-sizing:border-box; background:#fff;
    border:5px solid #C8102E; border-radius:6px; padding:16px; text-align:center; }
  .ko-skilt span{ font:600 22px/1.2 var(--font-display),sans-serif; color:#1A1A1A;
    text-transform:uppercase; letter-spacing:.02em; overflow-wrap:anywhere; }
  .bilo-rute-kommune .ko-tal{ display:grid; grid-template-columns:1fr; gap:24px; margin:0;
    background:#EAF6F0; border:1px solid #E1E7E4; border-radius:16px; padding:24px; }
  .bilo-rute-kommune .ko-tal__kort{ background:none; border-radius:0; padding:0; }
  .bilo-rute-kommune .ko-tal__vaerdi{ font:600 22px/1.1 var(--font-display),sans-serif;
    color:#0B7352; margin:0; font-variant-numeric:tabular-nums; }
  .bilo-rute-kommune .ko-tal__navn{ font-size:13px; line-height:1.5; text-transform:none;
    letter-spacing:0; color:#5B6B65; margin:8px 0 0; }
  .bilo-rute-kommune .ko-tal__kilde{ font-size:13px; line-height:1.5; color:#5B6B65; margin:0; }

  .bilo-rute-kommune .ko-to{ display:grid; grid-template-columns:1fr; gap:24px; }
  .ko-soejler{ margin:0; background:#EAF6F0; border:1px solid #E1E7E4;
    border-radius:16px; padding:24px; }
  .ko-soejler__titel{ font:600 20px/1.3 var(--font-display),sans-serif; color:#1A1A1A;
    margin:0 0 8px; }
  .ko-soejler__felt{ display:grid; grid-auto-flow:column; grid-auto-columns:1fr; gap:12px; }
  .ko-soejle{ display:flex; flex-direction:column; min-width:0; }
  .ko-soejle__top{ height:176px; display:flex; flex-direction:column; justify-content:flex-end; }
  .ko-soejle__tal{ font:600 15px/1.2 var(--font-body),sans-serif; color:#1A1A1A;
    font-variant-numeric:tabular-nums; margin:0 0 8px; text-align:center; }
  .ko-soejle__bar{ display:block; background:#3EA66E; border-radius:6px 6px 0 0; min-height:2px; }
  .ko-soejle__navn{ font-size:13px; line-height:1.4; color:#5B6B65; text-align:center;
    margin:8px 0 0; hyphens:auto; }
  .ko-soejler__ialt{ font-size:13px; line-height:1.5; color:#5B6B65; margin:24px 0 0; }
  .ko-soejler__ialt b{ color:#1A1A1A; font-variant-numeric:tabular-nums; }

  .bilo-rute-kommune .ko-fakta{ border-radius:16px; padding:24px; }
  .bilo-rute-kommune .ko-fakta h3{ font-size:20px; line-height:1.3; margin:0 0 8px; }
  .bilo-rute-kommune .ko-fakta ul{ margin:0 0 24px; }
  .bilo-rute-kommune .ko-fakta li{ font-size:17px; line-height:1.5; margin:0 0 12px; }
  .bilo-rute-kommune .ko-fakta p a{ display:inline-flex; align-items:center; min-height:44px; }
  .bilo-rute-kommune .ko-fakta--flad{ margin:24px 0 0; }
  .bilo-rute-kommune .ko-fakta--flad p{ font-size:17px; line-height:1.5; max-width:720px; }
  .bilo-rute-kommune .ko-punkter{ max-width:720px; margin:0 0 24px; }
  .bilo-rute-kommune .ko-punkter li{ font-size:17px; line-height:1.5; margin:0 0 12px; }
  .bilo-rute-kommune .ko-faq details{ border-radius:16px; margin:0 0 12px; }
  .bilo-rute-kommune .ko-naboer{ gap:12px; }
  .bilo-rute-kommune .ko-nabo{ border-radius:16px; }

  .ko-guidegitter{ gap:24px; }
  .ko-guide{ border-radius:16px; padding:24px; }
  .ko-guide__titel{ font:600 20px/1.3 var(--font-display),sans-serif; color:#0B7352; margin:0 0 8px; }
  .ko-guide__uddrag{ font-size:17px; line-height:1.5; color:#1A1A1A; margin:0 0 8px; }
  .ko-guide__gaa{ font-size:15px; }
}
@media (min-width:600px) and (max-width:820px){
  .bilo-rute-kommune .ko-tal{ grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media (min-width:821px){
  .ko-hero .brodkrumme a{ display:inline-flex; align-items:center; min-height:44px; }
  .ko-hero .brodkrumme{ margin:0; }

  .bilo-rute-kommune .ko-wrap{ max-width:1168px; padding:0 24px 96px; }
  .bilo-rute-kommune .ko-blok{ margin:0; padding:96px 0 0; }
  .bilo-rute-kommune .ko-blok > h2{ font-size:26px; line-height:1.25; margin:0 0 8px; }
  .bilo-rute-kommune .ko-ingress,
  .bilo-rute-kommune .ko-blok > p,
  .bilo-rute-kommune .ko-to > div > p:not(.ko-kilde){ font-size:17px; line-height:1.5;
    max-width:720px; margin:0 0 24px; }
  .bilo-rute-kommune .ko-note,
  .bilo-rute-kommune .ko-kilde{ font-size:13px; line-height:1.5; max-width:720px; margin:24px 0 0; }

  .bilo-rute-kommune .ko-kende{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,2fr);
    gap:24px; align-items:center; }
  .ko-skilt{ display:flex; align-items:center; justify-content:center; aspect-ratio:2/1;
    width:100%; box-sizing:border-box; background:#fff;
    border:5px solid #C8102E; border-radius:6px; padding:16px; text-align:center; }
  .ko-skilt span{ font:600 26px/1.2 var(--font-display),sans-serif; color:#1A1A1A;
    text-transform:uppercase; letter-spacing:.02em; overflow-wrap:anywhere; }
  .bilo-rute-kommune .ko-tal{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
    gap:24px; margin:0; background:#EAF6F0; border:1px solid #E1E7E4;
    border-radius:16px; padding:24px; }
  .bilo-rute-kommune .ko-tal__kort{ background:none; border-radius:0; padding:0; }
  .bilo-rute-kommune .ko-tal__vaerdi{ font:600 26px/1.1 var(--font-display),sans-serif;
    color:#0B7352; margin:0; font-variant-numeric:tabular-nums; }
  .bilo-rute-kommune .ko-tal__navn{ font-size:13px; line-height:1.5; text-transform:none;
    letter-spacing:0; color:#5B6B65; margin:8px 0 0; }
  .bilo-rute-kommune .ko-tal__kilde{ font-size:13px; line-height:1.5; color:#5B6B65; margin:0; }

  .bilo-rute-kommune .ko-to{ display:grid; grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);
    gap:24px; align-items:start; }
  .ko-soejler{ margin:0; background:#EAF6F0; border:1px solid #E1E7E4;
    border-radius:16px; padding:24px; }
  .ko-soejler__titel{ font:600 20px/1.3 var(--font-display),sans-serif; color:#1A1A1A;
    margin:0 0 8px; }
  .ko-soejler__felt{ display:grid; grid-auto-flow:column; grid-auto-columns:1fr; gap:24px; }
  .ko-soejle{ display:flex; flex-direction:column; min-width:0; }
  .ko-soejle__top{ height:176px; display:flex; flex-direction:column; justify-content:flex-end; }
  .ko-soejle__tal{ font:600 15px/1.2 var(--font-body),sans-serif; color:#1A1A1A;
    font-variant-numeric:tabular-nums; margin:0 0 8px; text-align:center; }
  .ko-soejle__bar{ display:block; background:#3EA66E; border-radius:6px 6px 0 0; min-height:2px; }
  .ko-soejle__navn{ font-size:13px; line-height:1.4; color:#5B6B65; text-align:center; margin:8px 0 0; }
  .ko-soejler__ialt{ font-size:13px; line-height:1.5; color:#5B6B65; margin:24px 0 0; }
  .ko-soejler__ialt b{ color:#1A1A1A; font-variant-numeric:tabular-nums; }

  .bilo-rute-kommune .ko-fakta{ border-radius:16px; padding:24px; }
  .bilo-rute-kommune .ko-fakta h3{ font-size:20px; line-height:1.3; margin:0 0 8px; }
  .bilo-rute-kommune .ko-fakta ul{ margin:0 0 24px; }
  .bilo-rute-kommune .ko-fakta li{ font-size:17px; line-height:1.5; margin:0 0 12px; }
  .bilo-rute-kommune .ko-fakta p a{ display:inline-flex; align-items:center; min-height:44px; }
  .bilo-rute-kommune .ko-fakta--flad{ margin:24px 0 0; }
  .bilo-rute-kommune .ko-fakta--flad p{ font-size:17px; line-height:1.5; max-width:720px; }
  .bilo-rute-kommune .ko-punkter{ max-width:720px; margin:0 0 24px; }
  .bilo-rute-kommune .ko-punkter li{ font-size:17px; line-height:1.5; margin:0 0 12px; }
  .bilo-rute-kommune .ko-faq details{ border-radius:16px; margin:0 0 12px; }
  .bilo-rute-kommune .ko-naboer{ gap:12px; }
  .bilo-rute-kommune .ko-nabo{ border-radius:16px; }

  .ko-guidegitter{ gap:24px; }
  .ko-guide{ border-radius:16px; padding:24px; }
  .ko-guide__titel{ font:600 20px/1.3 var(--font-display),sans-serif; color:#0B7352; margin:0 0 8px; }
  .ko-guide__uddrag{ font-size:17px; line-height:1.5; color:#1A1A1A; margin:0 0 8px; }
  .ko-guide__gaa{ font-size:15px; }
}

/* ============================================================
   FASE 3 — UDBYDERSIDEN BYGGET EFTER SKABELONEN (25. september 2026)
   ------------------------------------------------------------
   HVAD: de 27 udbydersider får skabelonens ramme: indhold i listebredden
         1120, der flugter med toppen · de seks korte fakta under toppen står
         som én faktabjælke på lys bund, som på kommunesiden · 96 punkter
         mellem afsnittene på computer og 60 på telefon, stregen imellem
         bliver stående midt i luften · guidekortene i bunden får
         guidesoversigtens mål (titel 20, linje 17) · brødkrummen og de
         to små pile ved udbyderhjulet kan rammes i 44 på computeren
         (pilene var det allerede på telefon) · underoverskrifterne i
         Om-afsnittet er 20 på telefon, hvor de var 19.
   HVORFOR: skabelonen »Udbyderside« fra 22. september er godkendt (fase 1).
         Målt før på /udbydere/ok/: indholdet var 1152 bredt, luften mellem
         afsnittene svingede mellem 30 og 92, faktakortene stod som seks
         hvide kort halvt oven på toppen, brødkrummen var 16 høj og pilene 20.
   IKKE RØRT: produktkortene, priserne, knapperne ud til udbyderen, den
         faste bjælke med »Gå til ...« og motoren inde på siden. Farverne er
         sidens egne. Trustpilot-linjen på kortene er 15 høj på computer;
         den sidder i produktkortet og er ikke rettet.
   HVEM: Henrik, 25. september 2026: byg siderne efter skabelonerne, i ét stræk.
   LAG: telefonen til og med 820, computeren fra 821. Kun body.bilo-rute-udbyder.
   Sikkerhedskopi: uploads/kontrol-25september-2026/foer13/
   ============================================================ */
@media (max-width:820px){
  .bilo-rute-udbyder .udb-wrap{ padding-left:16px; padding-right:16px; }
  .bilo-rute-udbyder .uu-qf{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
    gap:24px 16px; margin:60px 0 0; background:#EAF6F0; border:1px solid #E1E7E4;
    border-radius:16px; padding:24px; }
  .bilo-rute-udbyder .uu-qf__c{ min-width:0; background:none; border:0; border-radius:0; padding:0; }
  .bilo-rute-udbyder .uu-qf__k{ font-size:13px; line-height:1.5; }
  .bilo-rute-udbyder .uu-qf__v{ font-size:15px; line-height:1.4; margin-top:8px; }
  .bilo-rute-udbyder .uu-sec{ padding-top:60px; }
  .bilo-rute-udbyder .uu-sec + .uu-sec{ margin-top:30px; padding-top:30px; }
  .bilo-rute-udbyder .uu-sec h2{ margin:0 0 8px; }
  .bilo-rute-udbyder .uu-om h3{ font-size:20px; margin-top:28px; margin-bottom:8px; }
  .bilo-rute-udbyder .uu-crumb a{ display:inline-flex; align-items:center; min-height:44px;
    padding-top:0; padding-bottom:0; }
  .bilo-rute-udbyder .uu-crumb{ margin-bottom:16px; }
  .bilo-rute-udbyder .uu-guides{ gap:24px; }
  .bilo-rute-udbyder .uu-gc{ border-radius:16px; }
  .bilo-rute-udbyder .uu-gc__b{ padding:24px; }
  .bilo-rute-udbyder .uu-gc__b h3{ font-size:20px; line-height:1.3; margin:0 0 8px; }
  .bilo-rute-udbyder .uu-gc__b p{ font-size:17px; line-height:1.5; color:#1A1A1A; }
}
@media (min-width:821px){
  .bilo-rute-udbyder .udb-wrap{ max-width:1168px; }
  .bilo-rute-udbyder .uu-qf{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
    gap:24px; margin:96px 0 0; background:#EAF6F0; border:1px solid #E1E7E4;
    border-radius:16px; padding:24px; }
  .bilo-rute-udbyder .uu-qf__c{ min-width:0; background:none; border:0; border-radius:0; padding:0; }
  .bilo-rute-udbyder .uu-qf__k{ font-size:13px; line-height:1.5; }
  .bilo-rute-udbyder .uu-qf__v{ font-size:15px; line-height:1.4; margin-top:8px; }
  .bilo-rute-udbyder .uu-sec{ padding-top:96px; }
  .bilo-rute-udbyder .uu-sec + .uu-sec{ margin-top:48px; padding-top:48px; }
  .bilo-rute-udbyder .uu-sec h2{ margin:0 0 8px; }
  .bilo-rute-udbyder .uu-crumb a{ display:inline-flex; align-items:center; min-height:44px; }
  .bilo-rute-udbyder .uu-crumb{ margin-bottom:16px; }
  .bilo-rute-udbyder .uu-wheel__spin button{ position:relative; }
  .bilo-rute-udbyder .uu-wheel__spin button::before{ content:''; position:absolute;
    left:50%; top:50%; width:44px; height:44px; transform:translate(-50%,-50%); }
  .bilo-rute-udbyder .uu-guides{ gap:24px; }
  .bilo-rute-udbyder .uu-gc{ border-radius:16px; }
  .bilo-rute-udbyder .uu-gc__b{ padding:24px; }
  .bilo-rute-udbyder .uu-gc__b h3{ font-size:20px; line-height:1.3; margin:0 0 8px; }
  .bilo-rute-udbyder .uu-gc__b p{ font-size:17px; line-height:1.5; color:#1A1A1A; }
}

/* ============================================================
   FASE 3 — LADEBOKSSIDEN BYGGET EFTER SKABELONEN (25. september 2026)
   ------------------------------------------------------------
   HVAD: de 32 ladebokssider får skabelonens opbygning: en top med
         brødkrumme, mærke og overskrift som på de andre sidetyper; boksen
         og prisen side om side i listebredden 1120 (under hinanden på
         telefon); prisen som det store tal 40/34; »Annonce« før knappen;
         knappen ud til udbyderen orange, knappen ind mørkegrøn; nederst én
         plade med Find din ladeboks. Luft 96/60 mellem afsnittene.
   HVORFOR: skabelonen »Ladebokssside« fra 22. september er godkendt (fase 1).
         Målt før: siden havde ingen top og ingen brødkrumme, indholdet stod
         i 752, knappen ud til udbyderen var grøn og stod uden »Annonce«.
   FARVER: ingen nye. Toppen bruger guidesoversigtens og udbydersidens grønne
         forløb; orange og mørkegrøn er husets egne knapper.
   HVEM: Henrik, 25. september 2026: byg siderne efter skabelonerne, i ét stræk.
   LAG: telefonen til og med 820, computeren fra 821. Klasserne .lb- findes
         kun på ladebokssiderne.
   Sikkerhedskopi: uploads/kontrol-25september-2026/foer14/
   ============================================================ */
@media (max-width:820px){
  .lb-top{ background:linear-gradient(180deg,#123c30,#0B7352); color:#fff; padding:var(--section-y) 16px; }
  .lb-top__inner{ max-width:1120px; margin:0 auto; }
  .lb-top .brodkrumme{ margin:0; color:#BFE8D3; font-size:13px; }
  .lb-top .brodkrumme a{ color:#BFE8D3; display:inline-flex; align-items:center; min-height:44px; }
  .lb-top__maerke{ margin:0 0 8px; font-size:13px; line-height:1.5; color:#BFE8D3;
    text-transform:uppercase; letter-spacing:.04em; }
  .lb-top h1{ color:#fff; margin:0; }
  .lb-wrap{ max-width:none; margin:0 auto; padding:0 16px 60px; box-sizing:border-box; }
  .lb-hoved{ display:grid; grid-template-columns:1fr; gap:24px; align-items:start; padding-top:60px; }
  .lb-billede{ background:#fff; border:1px solid #E1E7E4; border-radius:16px; padding:24px; }
  .lb-billede img{ display:block; max-width:100%; height:auto; max-height:280px; width:auto; margin:0 auto; }
  .lb-kort{ background:#fff; border:1px solid #E1E7E4; border-radius:16px; padding:24px; }
  .lb-kort__anbefalet{ display:inline-block; margin:0 0 16px; }
  .lb-kort__pris{ font:600 34px/1.1 var(--font-display),sans-serif; color:#1A1A1A; margin:0;
    font-variant-numeric:tabular-nums; letter-spacing:-.02em; }
  .lb-kort__prisnavn,
  .lb-kort__maalt{ font-size:13px; line-height:1.5; color:#5B6B65; margin:8px 0 0; }
  .lb-kort__annonce{ font-size:13px; line-height:1.5; color:#5B6B65; margin:24px 0 8px; }
  .lb-kort__knap{ display:flex; width:100%; justify-content:center; align-items:center;
    min-height:48px; box-sizing:border-box; text-decoration:none; }
  .lb-kort__knap.uu-cta--intern{ margin-top:24px; }
  .lb-kort__spec{ margin:24px 0 0; }
  .lb-tekst{ max-width:720px; padding-top:60px; font-size:17px; line-height:1.5; }
  .lb-ind{ padding-top:60px; }
  .lb-ind__plade{ background:#EAF6F0; border:1px solid #E1E7E4; border-radius:16px; padding:24px; }
  .lb-ind__titel{ font:600 20px/1.3 var(--font-display),sans-serif; color:#1A1A1A; margin:0 0 16px; }
  .lb-ind__knap{ min-height:44px; }
}
@media (min-width:821px){
  .lb-top{ background:linear-gradient(180deg,#123c30,#0B7352); color:#fff; padding:var(--section-y) 24px; }
  .lb-top__inner{ max-width:1120px; margin:0 auto; }
  .lb-top .brodkrumme{ margin:0; color:#BFE8D3; font-size:13px; }
  .lb-top .brodkrumme a{ color:#BFE8D3; display:inline-flex; align-items:center; min-height:44px; }
  .lb-top__maerke{ margin:0 0 8px; font-size:13px; line-height:1.5; color:#BFE8D3;
    text-transform:uppercase; letter-spacing:.04em; }
  .lb-top h1{ color:#fff; margin:0; }
  .lb-wrap{ max-width:1168px; margin:0 auto; padding:0 24px 96px; box-sizing:border-box; }
  .lb-hoved{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:24px; align-items:start; padding-top:96px; }
  .lb-billede{ background:#fff; border:1px solid #E1E7E4; border-radius:16px; padding:24px; }
  .lb-billede img{ display:block; max-width:100%; height:auto; max-height:420px; width:auto; margin:0 auto; }
  .lb-kort{ background:#fff; border:1px solid #E1E7E4; border-radius:16px; padding:24px; }
  .lb-kort__anbefalet{ display:inline-block; margin:0 0 16px; }
  .lb-kort__pris{ font:600 40px/1.1 var(--font-display),sans-serif; color:#1A1A1A; margin:0;
    font-variant-numeric:tabular-nums; letter-spacing:-.02em; }
  .lb-kort__prisnavn,
  .lb-kort__maalt{ font-size:13px; line-height:1.5; color:#5B6B65; margin:8px 0 0; }
  .lb-kort__annonce{ font-size:13px; line-height:1.5; color:#5B6B65; margin:24px 0 8px; }
  .lb-kort__knap{ display:flex; width:100%; justify-content:center; align-items:center;
    min-height:48px; box-sizing:border-box; text-decoration:none; }
  .lb-kort__knap.uu-cta--intern{ margin-top:24px; }
  .lb-kort__spec{ margin:24px 0 0; }
  .lb-tekst{ max-width:720px; padding-top:96px; font-size:17px; line-height:1.5; }
  .lb-ind{ padding-top:96px; }
  .lb-ind__plade{ background:#EAF6F0; border:1px solid #E1E7E4; border-radius:16px; padding:24px; }
  .lb-ind__titel{ font:600 20px/1.3 var(--font-display),sans-serif; color:#1A1A1A; margin:0 0 16px; }
  .lb-ind__knap{ min-height:44px; }
}

/* ============================================================
   26. SEPTEMBER 2026 (Henrik): GUIDESOVERSIGTEN PAA TELEFON
   Sidespalten med emnefilteret og »Mest læste« vises kun paa computeren.
   Paa telefonen er den taget ud; den klaebende knap Find din ladeboks bliver.
   Sikkerhedskopi: uploads/kontrol-25september-2026/foer16/
   ============================================================ */
@media (max-width:820px){
  .gd-layout .gd-side{ display:none; }
}

/* ============================================================
   ANNONCEVINDUET (N319) · 27. september 2026
   ============================================================
   Bygget efter udkastet og Henriks afgoerelser 27/9 sen aften
   (beslutningsloggen 27. sep. DEL3, afsnit 2). Hoejst et vindue pr.
   side. Vinduet er 320 bredt paa computer og fylder hele bredden paa
   telefon. Annoncekortet paa forsiden ligner aldrig et produktkort:
   ingen knap i hoejre side og ingen orange knap. Kun husets farver i
   vores egen del. Maerker 13, knapper 15, broedtekst 17, intet under 13.
   De gamle .avx-regler hoerer til vinduet fra 30/8 og rammer nu ingenting.
   ============================================================ */

/* --- Faelles for alle skaerme (telefonen foerst) --- */
.avv{ box-sizing:border-box; width:100%; background:#fff; border:1px solid #E6EAE7;
  border-radius:14px; padding:18px; margin:24px 0; color:#1A1A1A; }
.avv .avv__vare[hidden], .avv [data-avv-valg][hidden]{ display:none; }
.avv__mk{ display:inline-block; font:700 13px/1 var(--font-body,'Inter'),sans-serif;
  letter-spacing:.05em; text-transform:uppercase; color:#5F6F6A; background:#EFF4F0;
  border-radius:999px; padding:6px 10px; margin:0 0 12px; }
.avv__h{ font-family:var(--font-display,'Sora'),sans-serif; font-size:20px; line-height:1.3;
  font-weight:700; color:#0B7352; margin:0 0 8px; }
.avv__t{ font-size:17px; line-height:1.5; margin:0 0 16px; color:#1A1A1A; }

/* Butikkens varer */
.avv__varer{ display:flex; flex-direction:column; gap:12px; margin:12px 0 0; }
.avv__vare{ display:flex; gap:12px; align-items:center; min-height:44px; padding:10px;
  border:1px solid #E6EAE7; border-radius:8px; background:#fff; text-decoration:none; color:#1A1A1A; }
.avv__vare:hover, .avv__vare:focus-visible{ border-color:#3EA66E; }
.avv__vbil{ flex:0 0 64px; height:64px; display:flex; align-items:center; justify-content:center; }
.avv__vbil img{ max-width:64px; max-height:64px; width:auto; height:auto; display:block; }
.avv__vtxt{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.avv__vmk{ font-size:13px; line-height:1.3; letter-spacing:.04em; text-transform:uppercase; color:#5F6F6A; }
.avv__vnavn{ font-size:15px; line-height:1.4; }
.avv__vpris{ font-family:var(--font-display,'Sora'),sans-serif; font-size:17px; font-weight:700; line-height:1.3; margin-top:2px; }
.avv__mere{ display:inline-flex; align-items:center; min-height:44px; margin:12px 0 0;
  font-size:15px; font-weight:700; color:#0B7352; text-decoration:none; }
.avv__mere:hover{ text-decoration:underline; }

/* Vores egen opfordring (intet maerke, det er vores eget) */
.avv__knap{ display:inline-flex; align-items:center; justify-content:center; min-height:44px;
  padding:10px 18px; border-radius:999px; background:#0B7352; color:#fff; font-size:15px;
  font-weight:700; text-decoration:none; }
.avv__knap:hover, .avv__knap:focus-visible{ background:#064A35; color:#fff; }

/* --- En solgt annonce: fem designs. Hele feltet er et link. --- */
.avv:has(.avv-a:not([hidden])){ padding:0; overflow:hidden; border:0; background:transparent; }
.avv-a{ position:relative; display:flex; flex-direction:column; text-decoration:none; color:#1A1A1A;
  border-radius:14px; overflow:hidden; border:1px solid #E6EAE7; background:#fff; }
.avv-a .avv__mk{ position:absolute; top:12px; left:12px; margin:0; z-index:2; background:rgba(255,255,255,.94); }
.avv-a__bil{ display:block; }
.avv-a__bil img{ display:block; width:100%; height:100%; object-fit:cover; }
.avv-a__txt{ display:flex; flex-direction:column; gap:6px; padding:18px; }
.avv-a__h{ font-family:var(--font-display,'Sora'),sans-serif; font-size:20px; line-height:1.3; font-weight:700; color:#0B7352; }
.avv-a__t{ font-size:17px; line-height:1.5; }
.avv-a__knap{ align-self:flex-start; display:inline-flex; align-items:center; min-height:44px;
  margin-top:6px; font-size:15px; font-weight:700; color:#0B7352; }
.avv-a:hover .avv-a__h, .avv-a:focus-visible .avv-a__h{ text-decoration:underline; }

/* Design 1: billedet i hele feltet, tekst og hvid knap paa en moerk skygge */
.avv-d1{ min-height:320px; justify-content:flex-end; border:0; background:#0B7352; }
.avv-d1 .avv-a__bil{ position:absolute; inset:0; }
.avv-d1 .avv-a__txt{ position:relative; z-index:1; background:linear-gradient(0deg, rgba(8,30,22,.88) 0%, rgba(8,30,22,.72) 70%, rgba(8,30,22,0) 100%); padding-top:48px; }
.avv-d1 .avv-a__h, .avv-d1 .avv-a__t{ color:#fff; }
.avv-d1 .avv-a__knap{ background:#fff; color:#0B7352; border-radius:999px; padding:10px 18px; }

/* Design 2: billedet oeverst, hvidt baand med overskrift, tekst og et link */
.avv-d2 .avv-a__bil{ aspect-ratio:16/9; }

/* Design 3: sandfarvet felt med tekst og knap, billedet ved siden af */
.avv-d3{ background:#F7F5EF; border-color:#E6EAE7; }
.avv-d3 .avv-a__bil{ aspect-ratio:16/9; }
.avv-d3 .avv-a__knap{ background:#fff; border:2px solid #0B7352; border-radius:999px; padding:8px 16px; }

/* Design 4: annoncoerens faerdige annonce fylder det hele */
.avv-d4{ border:0; }
.avv-d4 .avv-a__bil img{ height:auto; }
.avv-a__se{ position:absolute; right:12px; bottom:12px; z-index:2; display:inline-flex; align-items:center;
  min-height:44px; padding:0 16px; border-radius:999px; background:rgba(255,255,255,.94);
  font-size:15px; font-weight:700; color:#0B7352; }

/* Design 5: uden billede, logo, overskrift, tekst og et link paa lys groen bund */
.avv-d5{ background:#EAF6F0; border-color:#CFE6DC; }
.avv-d5 .avv-a__logo{ display:block; padding:18px 18px 0; }
.avv-d5 .avv-a__logo img{ display:block; max-height:40px; max-width:160px; width:auto; height:auto; }
.avv-d5 .avv-a__txt{ padding-top:12px; }
.avv-d5:has(.avv__mk) .avv-a__logo{ padding-top:52px; }
.avv-d5:not(:has(.avv-a__logo)):has(.avv__mk) .avv-a__txt{ padding-top:52px; }
.avv-d2 .avv-a__txt, .avv-d3 .avv-a__txt{ padding-top:16px; }

/* --- Pladserne --- */
/* Guidesoversigten: i sidespalten paa computer, efter »Start her« paa telefon */
.avv-kun-telefon .avv{ margin:0 0 32px; }
.gd-side .avv{ margin:0; }

/* Siderne om ladekabel og ladebrik: i teksten, efter prisafsnittet */
.avv--kabel{ max-width:720px; }

/* Udbydersider og kommunesider: ved siden af afsnittet paa computer */
.avv-to > .avv{ margin:24px 0 0; }

/* Forsidens annoncekort mellem produktkortene */
.avv--kort{ margin:0 0 22px; }

@media (min-width:821px){
  .avv-kun-telefon{ display:none; }

  /* Guidesoversigten: sidespalten klaeber. Er den hoejere end skaermen,
     saetter et lille script toppen, saa knappen i vinduet altid kan ses
     paa en mindre baerbar, uden at noget fjernes. */

  /* Udbydersider og kommunesider: teksten til venstre, vinduet til hoejre */
  .avv-to{ display:grid; grid-template-columns:minmax(0,1fr) 320px; column-gap:80px; align-items:start; }
  .avv-to > .avv{ margin:0; grid-column:2; grid-row:1; }
  .avv-to > .avv-to__tekst{ grid-column:1; grid-row:1; min-width:0; }
  /* Udbydersidens »Om …« er 720 bredt; med vinduet ved siden af faar afsnittet listebredden 1120, og teksten bliver ved med at vaere 720. */
  .bilo-rute-udbyder .uu-om.avv-to{ max-width:1120px; }

  /* Forsidens topfelter: vinduet som tredje felt */
  .fstop__cards.fstop__cards--tre{ grid-template-columns:minmax(0,1fr) minmax(0,1fr) 320px; }
  .fstop__cards--tre > .avv{ margin:0; grid-row:span 2; }

  /* Annoncekortet: aflangt, i listens bredde, foelger kortenes linjer */
  .avv--kort .avv-a{ flex-direction:row; min-height:165px; }
  .avv--kort .avv-a__txt{ flex:1; justify-content:center; padding:20px 24px; }
  .avv--kort .avv-d1{ min-height:186px; justify-content:flex-start; align-items:stretch; }
  .avv--kort .avv-d1 .avv-a__txt{ max-width:520px; justify-content:center; padding:52px 28px 24px;
    background:linear-gradient(90deg, rgba(8,30,22,.9) 0%, rgba(8,30,22,.75) 70%, rgba(8,30,22,0) 100%); }
  .avv--kort .avv-d2{ flex-direction:column; }
  .avv--kort .avv-d2 .avv-a__bil{ aspect-ratio:auto; height:110px; }
  .avv--kort .avv-d2 .avv-a__txt{ flex-direction:row; flex-wrap:wrap; align-items:baseline; column-gap:16px; padding:14px 24px 12px; }
  .avv--kort .avv-d2 .avv-a__t{ flex:1 1 300px; }
  .avv--kort .avv-d3{ flex-direction:row; }
  .avv--kort .avv-d3 .avv-a__bil{ order:2; flex:0 0 40%; aspect-ratio:auto; }
  .avv--kort .avv-d3 .avv-a__txt{ padding-top:52px; }
  .avv--kort .avv-d4 .avv-a__bil{ width:100%; height:154px; }
  .avv--kort .avv-d4 .avv-a__bil img{ height:100%; }
  .avv--kort .avv-d5{ flex-direction:row; align-items:center; }
  .avv--kort .avv-d5 .avv-a__logo{ padding:24px 0 24px 24px; flex:0 0 auto; }
  .avv--kort .avv-d5 .avv-a__txt{ padding-top:24px; }
  .avv--kort .avv-d5:has(.avv__mk) .avv-a__logo{ padding-top:52px; }
}
@media (max-width:820px){
  .fstop__cards--tre > .avv{ display:none; }
}

/* ============================================================
 * FORSIDEN: »DERFOR KAN DU STOLE PÅ RESULTATET« (28/9 2026, Henrik: ret det, så det ser pænt ud)
 * Efter at pengekortet blev fjernet, stod de to kort til venstre under en overskrift i midten.
 * På computer står kortene nu i midten, højst 340 brede. Telefonen er urørt.
 * ============================================================ */
@media (min-width:821px){
  .fsx .tcards{ grid-template-columns:repeat(auto-fit, minmax(215px, 340px)); justify-content:center; }
}

/* ============================================================
 * ANNONCEVINDUET: BLADRE I VARERNE (28/9 2026, Henrik godkendte udkastet, N330)
 * To runde pile under varerne og »Side 1 af 8 · 24 varer« imellem. Pilene rammes i 44.
 * På første og sidste side er den ene pil dæmpet (samme farver, kun gennemsigtig).
 * Gælder alle skærme. Ingen nye farver.
 * ============================================================ */
.avv-bl{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:12px; }
.avv-bl__pil{ width:44px; height:44px; flex:0 0 44px; padding:0; border-radius:50%; border:1px solid #0B7352; background:#fff; color:#0B7352; font:inherit; font-size:22px; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center; }
.avv-bl__pil:disabled{ opacity:.35; cursor:default; }
.avv-bl__tal{ font-size:13px; color:#5B6B65; text-align:center; }

/* ============================================================
 * 28/9 2026 (Henrik, N331 til N335): FEM RETTELSER
 * 1. Computer: udbyderhjulet med »Hop til«/»Udbyder«, pile og »Vis« er skjult paa forsiden og Alle
 *    ladebokse. I stedet staar telefonens glashjul med logoerne, og det virker som paa telefonen:
 *    listen viser kun den valgte udbyders ladebokse (afloeser »hop til« fra 25/9). Samme glas og farver
 *    som telefonens hjul, ingen nye farver.
 * 2. Telefon, forsiden: de tre sorteringsknapper under bjaelken er skjult.
 * 3. Telefon, Alle ladebokse: rullelisten »Anbefalede foerst« er skjult. Listen staar som fra start.
 * 4. Telefon, burgermenuen: en streg og luft mellem Guides og de tre vaerktoejer.
 * 5. Computer: Guides i menuen aabner ikke laengere en liste; et klik gaar til guidesoversigten.
 * Intet er fjernet fra filerne; det kan slaas til igen ved at tage blokken ud.
 * ============================================================ */
@media (min-width:821px){
  .har-fsb .fsb__hjulrk{ display:none; }
  .har-fsb .fsb__hjulrk2{ display:block; order:5; flex:0 0 auto; width:auto; padding:0; }
  .har-fsb .fsb__hjulrk2 > .fsb__hjulblok:not(.fsb__hjulblok--udb){ display:none; }
  .har-fsb .fsb__hjulrk2 .fsb__mlbl{ display:none; }
  .har-fsb .fsb__hjulblok--udb { display:flex; align-items:center; gap:8px; }
  /* N338 (Henrik 28/9): pilene er de samme som ved »Hvad maa ladeboksen koste«; udseendet kommer derfra. */
  .har-fsb .fsb__udbpil:disabled{ opacity:.35; cursor:default; }
  .har-fsb .fsb__hjulblok--udb .fsb__hjulm{ position:relative; width:196px; flex:0 0 196px; height:56px; border-radius:14px; background:#E4EAE6; box-shadow:inset 0 1px 2px rgba(16,35,26,.12); overflow:hidden; }
  .har-fsb .fsb__hjulblok--udb .fsb__hjulm::before, .har-fsb .fsb__hjulblok--udb .fsb__hjulm::after{ content:''; position:absolute; left:0; right:0; height:15px; pointer-events:none; z-index:2; }
  .har-fsb .fsb__hjulblok--udb .fsb__hjulm::before{ top:0; background:linear-gradient(rgba(228,234,230,.97), rgba(228,234,230,.28)); }
  .har-fsb .fsb__hjulblok--udb .fsb__hjulm::after{ bottom:0; background:linear-gradient(rgba(228,234,230,.28), rgba(228,234,230,.97)); }
  .har-fsb .fsb__hjulblok--udb .fsb__hjulm__baand{ position:absolute; left:4px; right:4px; top:14px; height:28px; border-radius:9px; background:#EFF4F0; border:1px solid #CFE6DC; box-sizing:border-box; pointer-events:none; z-index:0; }
  .har-fsb .fsb__hjulblok--udb .fsb__hjulm__rul{ position:relative; z-index:1; height:100%; overflow-y:auto; scroll-snap-type:y mandatory; scrollbar-width:none; overscroll-behavior:contain; padding:14px 0; box-sizing:border-box; }
  .har-fsb .fsb__hjulblok--udb .fsb__hjulm__rul::-webkit-scrollbar{ display:none; }
  .har-fsb .fsb__hjulblok--udb .fsb__hjulm__rul button{ display:flex; align-items:center; justify-content:center; width:100%; height:28px; scroll-snap-align:center; border:0; background:none; cursor:pointer; font-family:inherit; font-weight:700; font-size:13px; color:#22352C; padding:0 8px; }
  .har-fsb .fsb__hjulblok--udb .fsb__hjulm__rul button.er-valgt{ color:#0B7352; }
  .har-fsb .fsb__hjulblok--udb .fsb__hjulm__rul button img{ max-height:18px; max-width:90px; object-fit:contain; display:block; }
  .har-fsb .fsb__hjulblok--udb .fsb__hjulm__ord{ font-family:var(--font-display,'Sora'),sans-serif; font-weight:700; font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .nav-menu > li:has(> a[href$="/guides/"]) > ul.sub-menu{ display:none; }
  .nav-menu > li:has(> a[href$="/guides/"]) > a::after{ display:none; }
}
@media (max-width:820px){
  .fsb__udbpile{ display:none; }
  .har-fsb .fsb__over .fsg__sek.fsg__sek--sort{ display:none; }
  .archive-toolbar{ display:none; }
  .main-nav .bilo-cta{ border-top:1px solid #E6EAE7; margin-top:16px; padding-top:20px; }
}

/* 29. september 2026 (N339): overskriften i det grønne felt på udbydersiderne. Den almindelige
   regel for afsnitsoverskrifter (.uu-sec h2) gav den mørkegrøn farve på mørkegrøn bund, så den
   ikke kunne læses på de 27 udbydersider. Den skal være hvid som i resten af feltet. */
.uu-sec .np-motor__h {
	color: #fff;
}

/* 29. september 2026 (N351): tekstsiderne. Brødkrummen stod ca. 200 punkter længere til venstre
   end overskriften og teksten, fordi den fulgte sidens fulde bredde. Nu følger brødkrummen og
   overskriften samme bredde som teksten, så de tre flugter. På telefon får de samme kant som
   teksten (20). Ingen ord er rørt. */
.hjornesten > .hjornesten__brodkrumme,
.hjornesten__hero-inner {
	max-width: 820px;
}
.bilo-laesestil .hjornesten > .hjornesten__brodkrumme,
.bilo-laesestil .hjornesten__hero-inner {
	max-width: 800px;
}
@media (max-width: 820px) {
	.hjornesten > .hjornesten__brodkrumme,
	.hjornesten__hero-inner {
		padding-left: 20px;
		padding-right: 20px;
	}
}
/* Et fedt ledeafsnit, der står lige over en punktliste (fx »Fordele ved at købe en ladeboks:«),
   er listens overskrift. Det stod i sin egen grønne boks 26 punkter fra listen og så ud som noget
   for sig. Nu står det uden boks tæt over listen, så de læses som én ting (nærhed). */
.bilo-laesestil .entry-content > p.bilo-lead:has(+ ul),
.bilo-laesestil .entry-content > p.bilo-lead:has(+ ol) {
	background: none;
	border-left: 0;
	padding: 0;
	margin: 26px 0 8px;
}
.bilo-laesestil .entry-content > p.bilo-lead + ul,
.bilo-laesestil .entry-content > p.bilo-lead + ol {
	margin-top: 0;
}

/* 29. september 2026 (N344): guidekortene på udbydersiderne er nu samme kort som på
   guidesoversigten og kommunesiderne. Rækken er fleksibel, så kortet får samme bredde som før. */
.uu-guides > .gd-card {
	flex: 1 1 230px;
	min-width: 220px;
}

/* 29. september 2026 (N349): produktkortene på udbydersiderne skal være ens med Alle ladebokse
   (reglen fra 1.123.9). Alle ladebokse blev 1120 i N317 den 27/9; udbydersiderne stod stadig på
   980 og var smallere end resten af siden. Nu 1120 begge steder. */
.uu-boks {
	max-width: 1120px;
}

/* 29. september 2026 (N352): kommunesiderne.
   1) »Find din bil« stod i midten af siden, mens al anden tekst står til venstre. På computer
      står feltet nu til venstre og flugter med overskriften over det.
   2) Linket »Se alle ladebokse« over feltet var 13 punkter og kun 16 højt at ramme. Nu husets
      lille tekst (15), understreget som andre links, og 44 højt at ramme. Ordene er de samme.
   3) Spørgsmål og svar havde browserens lille trekant; forsiden og udbydersiderne har + og –.
      Nu det samme her. */
@media (min-width: 821px) {
	.ko-blok > .motor {
		margin-left: 0;
		margin-right: auto;
		padding-left: 0;
		padding-right: 0;
	}
}
.ko-blok .motor__se-alle a,
.entry-content .motor__se-alle a {
	display: inline-block;
	font-size: 15px;
	line-height: 20px;
	padding: 12px 0;
	text-decoration: underline;
	opacity: 1;
}
.ko-faq summary {
	list-style: none;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
}
.ko-faq summary::-webkit-details-marker {
	display: none;
}
.ko-faq summary::after {
	content: "+";
	color: var(--color-primary);
	font-size: var(--text-lg);
	font-weight: 400;
	line-height: 1;
}
.ko-faq details[open] summary::after {
	content: "–";
}

/* 29. september 2026 (N350): forsiden på computer.
   1) Feltet »Prisfald og tilbud lige nu« og de to felter Køb og Leje stod 20 punkter længere inde
      end filterbjælken og listen under dem. De får nu samme bredde og kant som bjælken (samme
      regel som bjælken fik 27/9, så de også følges ad på en smal computer).
   2) Mellem prisfeltet og Køb/Leje var der et tomt hul på ca. 120. Nu 64, inden for husets
      luft mellem to afsnit. Kun computer; telefonen er urørt. */
@media (min-width: 821px) {
	.fstop,
	.fssvar {
		max-width: none;
		box-sizing: border-box;
		width: max(100%, min(1120px, calc(100vw - 50px)));
		margin-left: calc((100% - max(100%, min(1120px, calc(100vw - 50px)))) / 2);
		margin-right: calc((100% - max(100%, min(1120px, calc(100vw - 50px)))) / 2);
	}
	section.blk:has(> .wrap > .fstop) {
		padding-bottom: 16px;
	}
}

/* 29. september 2026 (N350, N345): forsiden, »Køb, leje eller køb i butik?«.
   Tre kort stod i et gitter til fire, så den højre fjerdedel stod tom. På computer nu tre lige
   brede kort. Kortenes tekst og pris var 13; nu husets lille tekst 15. »Se køb-priser →« stod i
   lysegrøn (3,05 mod hvid, kravet er 4,5); nu husets mørkegrønne #0B7352. Ordene er de samme. */
@media (min-width: 821px) {
	.fsx .typecards {
		grid-template-columns: repeat(3, 1fr);
	}
}
.fsx .typecards p,
.fsx .typecards .tcard__pris {
	font-size: 15px;
}
.fsx .typecards .tcard__go {
	color: #0B7352;
}

/* 29. september 2026 (N350): logorækken på forsiden. Logoer, der er næsten kvadratiske (EWII,
   Evify, Elgiganten, Wattoo), blev kun 26 høje og kunne ikke læses, fordi alle logoer var låst til
   26 i højden. Nu må et logo blive 40 højt; de brede logoer er stadig begrænset af bredden 110
   og ser ud som før. Gråtone og farve ved mus over er urørt. */
.fsx .logochip--logo img {
	max-height: 40px;
}

/* 29. september 2026 (N355): små trykflader. Kravet er 44 at ramme med en finger. Hvert sted her
   får en usynlig trykflade: luften omkring linket gøres større, men intet flytter sig, og intet
   ser anderledes ud. Burgeren går fra 42 til 44.
   Logoet i toppen (22) · burgeren (42) · brødkrummen (16 til 37) · mail og telefon på Kontakt (21)
   · »Se alternativet« på ophørte udbydere (21) · linket til Zaptec Go på Modeller (26). */
.site-header .site-logo {
	padding-top: 11px;
	padding-bottom: 11px;
	margin-top: -11px;
	margin-bottom: -11px;
}
.site-header .menu-toggle {
	min-width: 44px;
	min-height: 44px;
}
.brodkrumme a,
.yoast-breadcrumb a,
.crumb a {
	padding-top: 14px;
	padding-bottom: 14px;
}
.entry-content li > a[href^="mailto:"],
.entry-content li > a[href^="tel:"],
.mv-kort__navn a {
	padding-top: 12px;
	padding-bottom: 12px;
}
.uu-status__alt {
	display: inline-block;
	padding-top: 12px;
	padding-bottom: 12px;
	margin-top: -12px;
	margin-bottom: -12px;
}

/* 29. september 2026 (N345): farver under læsbarhedskravet (4,5), rettet til husets farver.
   · »Det taler for …«, fluebenene og vinderen i sammenligningen på udbydersiderne stod i en
     fremmed grøn #1D9E75 (3,39). Nu husets mørkegrønne #0B7352.
   · Trustpilot-tallet stod i stjernernes lysegrønne (2,62). Reglen fra 24/8 er mørkegrå #2A312E.
     Stjernerne beholder Trustpilots farver.
   · De små grå tekster i filterbjælken (#7C8B82 3,58 og #9AA8A0 2,48) får husets dæmpede
     tekstfarve. Den måler 4,45 og hører under N262, som Henrik afgør; ændres den, følger
     disse tekster med. */
.uu-pc__col--plus h3,
.uu-pc__col--plus li::before,
.uu-cmp .win {
	color: #0B7352;
}
.uu-hero .tp__num,
.uu-mini .tp__num {
	color: #2A312E;
}
.fsb__lbl,
.fsb__lbl small,
.fsb__budgettekst,
.fsb__hjullbl {
	color: var(--color-text-muted);
}

/* 29. september 2026 (N346): den blå boks på forsiden (»Siger du ofte ja til et godt tilbud …«) var
   den eneste blå flade på hele siden. Den får husets farver: lys grøn bund #EAF6F0, kant #CFE6DC,
   overskrift og ikon i mørkegrøn #0B7352 og brødtekst i #1A1A1A. Knappen er urørt. Ordene er de samme. */
.fsx .dealer {
	background: #EAF6F0;
	border-color: #CFE6DC;
	box-shadow: 0 6px 22px rgba(11, 115, 82, .08);
}
.fsx .dealer__ic {
	background: #0B7352;
	box-shadow: 0 4px 12px rgba(11, 115, 82, .22);
}
.fsx .dealer h3 {
	color: #0B7352;
}
.fsx .dealer p {
	color: #1A1A1A;
}

/* 29. september 2026 (N341): udbyderoversigten løftet til husets faste størrelser fra 22/9
   (sidens overskrift 28,8/36 · afsnitsoverskrift 22/26 · underoverskrift 20 · brødtekst 17 ·
   knapper 15 · mærkater og småt 13 · trykflader 44). Siden brugte 16 størrelser, ned til 10,5.
   Kun størrelser og trykflader er rørt. Farverne, de orange knapper og logohjulet med
   Alle/Køb/Leje er Henriks valg og står som før. Ingen ord er rørt. */
.uo-hero h1 {
	font-size: clamp(1.8rem, 3.6vw, 2.25rem);
	line-height: 1.2;
}
.uo-lead,
.uo-sek__h p,
.uo-beskriv,
.uo-spring p,
.uo-vv__h p,
.uo-vej p {
	font-size: 17px;
}
.uo-tal span {
	font-size: 26px;
}
.uo-tal small,
.uo-hjullbl,
.uo-histnavn small,
.uo-em span {
	font-size: 13px;
}
.uo-filtre button,
.uo-hjul__ord,
.uo-hjulgo,
.uo-cta,
.uo-vej__k {
	font-size: 15px;
}
.uo-filtre button,
.uo-hjulgo,
.uo-cta,
.uo-vej__k,
.uo-hjul__pil {
	min-height: 44px;
}
.uo-hjul__pil {
	min-width: 44px;
}
.uo-sek__h h2,
.uo-vv__h h2 {
	font-size: 26px;
}
.uo-navn,
.uo-histnavn,
.uo-spring h3,
.uo-vej h3 {
	font-size: 20px;
}
.uo-krumme a {
	padding-top: 14px;
	padding-bottom: 14px;
}
/* Bredden: siden var 1184 bred indenfor kanterne; husets listebredde er 1120 som på de andre sider. */
.uo-wrap {
	max-width: 1176px;
}
/* Udbydernavnet på kortet er et link; på telefon var det 35 højt. Nu 44 at ramme, uden at kortet flytter sig. */
@media (max-width: 900px) {
	.uo-navn a {
		padding-top: 10px;
		padding-bottom: 10px;
		margin-top: -5px;
		margin-bottom: -5px;
	}
}
@media (max-width: 820px) {
	.uo-sek__h h2,
	.uo-vv__h h2,
	.uo-tal span {
		font-size: 22px;
	}
}

/* 29. september 2026 (N363, Henriks valg: udkast 1): topmenuen på computer.
   Ladeagenten er taget ud af topmenuen; den tilbydes til sidst i anbefalingen. »Find din ladeboks«
   er husets orange med hvid skrift, samme orange som knapperne på telefonen, og mørkere orange ved
   mus over som de andre orange knapper. Kun computer; telefonens top og burgermenu er urørt. */
@media (min-width: 821px) {
	.site-header .header-ladeagent {
		display: none;
	}
	.site-header .header-cta.btn-primary {
		background: #E8622A;
		border-color: #E8622A;
		color: #fff;
	}
	.site-header .header-cta.btn-primary:hover {
		background: #D14E1C;
		border-color: #D14E1C;
		color: #fff;
	}
}

/* 29. september 2026: den orange ring om nummerpladefeltet blev prøvet og fravalgt af Henrik samme dag. I stedet bliver luppen orange, så snart markøren står i feltet (forside-hero.js). */

/* 29. september 2026 (N359, Henriks ja): Ladeagentens store overskrift på computer var 26, mindre end
   forsiden og Skift til elbil (40), som har samme mørke top. Nu 40 som de to andre værktøjer. Kun
   computer; på telefon står værktøjet oven på siden. Ordene er de samme. */
@media (min-width: 821px) {
	.la .top h1 {
		font-size: 40px;
		line-height: 1.12;
	}
}

/* 29. september 2026 (N365): siden »Vores tre værktøjer«. Samme top som tekstsiderne, men i
   listebredden 1120, så de tre værktøjer står som kort side om side på computer og under hinanden
   på telefon. Find din ladeboks er orange, fordi den er hovedværktøjet. Titel 20, tekst 17, knaptekst 15. */
.hjornesten--bred > .hjornesten__brodkrumme,
.hjornesten--bred .hjornesten__hero-inner,
.hjornesten--bred .hjornesten__indhold {
	max-width: 1168px;
}
.vk-intro {
	font-size: 17px;
	line-height: 1.6;
	max-width: 62ch;
	margin: 0 0 28px;
}
.vk-kort {
	display: grid;
	grid-template-columns: 1fr;
	gap: 16px;
	margin: 0 0 24px;
}
@media (min-width: 821px) {
	.vk-kort {
		grid-template-columns: repeat(3, 1fr);
		gap: 24px;
	}
}
.entry-content a.vk-k {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 24px;
	border-radius: 16px;
	border: 1px solid #E6EAE7;
	background: #fff;
	color: #1A1A1A;
	text-decoration: none;
	transition: transform .18s ease, box-shadow .22s ease;
}
.entry-content a.vk-k:hover {
	transform: translateY(-3px);
	box-shadow: 0 12px 28px rgba(11, 115, 82, .12);
}
.vk-ik {
	width: 44px;
	height: 44px;
	border-radius: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #EAF6F0;
	color: #0B7352;
}
.entry-content .vk-k h2 {
	font-size: 20px;
	line-height: 1.3;
	margin: 6px 0 0;
	color: #0B7352;
}
.entry-content .vk-k p {
	font-size: 17px;
	line-height: 1.55;
	margin: 0;
	max-width: none;
}
.vk-gaa {
	margin-top: auto;
	padding-top: 8px;
	font-size: 15px;
	font-weight: 700;
	color: #0B7352;
}
/* Hvid tekst på orange kan ikke læses som løbende tekst (3,38). Derfor er alle tre kort hvide, og
   Find din ladeboks får en orange kant og en orange knap nederst, så hovedværktøjet stadig skiller sig ud. */
.entry-content a.vk-k--find {
	border: 2px solid #E8622A;
}
.vk-k--find .vk-ik {
	background: #FFF3E0;
	color: #E8622A;
}
.vk-k--find .vk-gaa {
	align-self: flex-start;
	background: #E8622A;
	color: #fff;
	border-radius: 999px;
	padding: 12px 20px;
	min-height: 44px;
	box-sizing: border-box;
	margin-top: auto;
}
@media (prefers-reduced-motion: reduce) {
	.entry-content a.vk-k,
	.entry-content a.vk-k:hover {
		transition: none;
		transform: none;
	}
}

/* 29. september 2026 (N366, Henrik): to faner i højre kant på forsiden, kun på brede computere
   (1200 og op). En halv dråbe med en pil står fast i kanten hele tiden og skifter kun farve efter baggrunden.
   Et klik henter hvid "Skift til elbil" og grøn "Ladeagenten" frem (lodret tekst, hviler halvt ude i kanten);
   et klik mere skubber dem ud igen. Styres af main.js. Afløser pilen og panelet ved den orange knap (N365). */
.bilo-faner {
	display: none;
}
@media (min-width: 1200px) {
	.bilo-faner {
		display: flex;
		flex-direction: column;
		align-items: flex-end;
		gap: 14px;
		position: fixed;
		top: 110px;
		right: 0;
		z-index: 60;
		padding-top: 58px; /* plads til dråben med pilen over fanerne */
		pointer-events: none; /* den tomme kasse må ikke tage klik fra siden bagved */
	}
	.bilo-fane {
		pointer-events: auto;
		display: flex;
		align-items: center;
		gap: 10px;
		writing-mode: vertical-rl;
		padding: 20px 34px 20px 14px;
		border-radius: 18px 0 0 18px;
		font-size: 15px;
		font-weight: 700;
		line-height: 1;
		text-decoration: none;
		box-shadow: -6px 8px 22px rgba(8, 30, 24, .28);
		transform: translateX(110%);
		visibility: hidden;
		transition: transform 1s cubic-bezier(.2, .7, .2, 1), visibility 0s linear 1s;
	}
	.bilo-fane svg {
		transform: rotate(90deg);
		flex: 0 0 auto;
	}
	.bilo-fane--skift {
		background: #fff;
		color: #123A2C;
	}
	.bilo-fane--skift svg {
		color: #0B7352;
	}
	.bilo-fane--agent {
		background: #123A2C;
		color: #fff;
		border: 1.5px solid rgba(255, 255, 255, .55);
		border-right: 0;
	}
	.bilo-faner.er-inde .bilo-fane {
		visibility: visible;
		transform: translateX(26px); /* hviler halvt ude i kanten */
		transition: transform 1s cubic-bezier(.2, .7, .2, 1), visibility 0s;
	}
	.bilo-faner.er-inde .bilo-fane:hover,
	.bilo-faner.er-inde .bilo-fane:focus-visible {
		transform: translateX(0);
	}
	/* Pilen i en halv dråbe ude fra kanten (Henrik valgte forslag C den 29/9). Dråben står fast hele
	   tiden; brugeren henter selv fanerne frem med et klik. Hvid dråbe med grøn pil på den grønne top, grøn dråbe med hvid
	   pil på den hvide baggrund (klassen paa-lys sættes af main.js). Trykfladen er 44 bred. */
	.bilo-fane-pind,
	.bilo-fane-pil {
		display: none;
		pointer-events: auto;
		position: absolute;
		right: 0;
	}
	.bilo-faner.med-pil .bilo-fane-pil {
		display: flex;
		align-items: center;
		justify-content: flex-end;
		top: 0;
		width: 44px;
		height: 46px;
		padding: 0 7px 0 0;
		border: 0;
		background: transparent;
		color: #0B7352;
		cursor: pointer;
	}
	.bilo-fane-pil::before {
		content: "";
		position: absolute;
		top: 0;
		right: 0;
		width: 30px;
		height: 46px;
		border-radius: 23px 0 0 23px;
		background: #fff;
		box-shadow: 0 3px 10px rgba(8, 30, 24, .18);
	}
	.bilo-fane-pil svg {
		position: relative;
		width: 16px;
		height: 16px;
		transition: transform .3s ease;
	}
	.bilo-faner.er-inde .bilo-fane-pil svg {
		transform: rotate(180deg); /* peger op, når fanerne er inde */
	}
	.bilo-faner.paa-lys .bilo-fane-pil {
		color: #fff;
	}
	.bilo-faner.paa-lys .bilo-fane-pil::before {
		background: #0B7352;
	}
	.bilo-faner.er-rolig .bilo-fane,
	.bilo-faner.er-rolig .bilo-fane-pil svg {
		transition: none;
	}
}

/* 29. september 2026 (N365): sidefoden har fået kolonnen Værktøjer og har nu seks kolonner. På en bred
   computer står de i én række, så Kontakt ikke falder ned på en linje for sig. Smallere skærme og
   telefon er som før. */
@media (min-width: 1100px) {
	.site-footer__inner {
		display: grid;
		grid-template-columns: minmax(250px, 1.6fr) repeat(5, minmax(0, 1fr));
		gap: 32px;
	}
	.site-footer__inner > .site-footer__col {
		min-width: 0;
	}
}

/* 29. september 2026 (N365): »Start her« på guidesoversigten havde tre kort, efter at Skift til elbil
   blev flyttet til Værktøjer.
   29. september 2026 (N367, Henrik): kortet »Vores tre værktøjer« står nu som det fjerde kort, så der er
   fire igen. På computer fra 1100 står de fire lige brede i én række; mellem 821 og 1099 står de to og to,
   så intet kort står alene på en linje. Telefonen er som før (ét i bredden). */
@media (min-width: 821px) {
	.gd-pillar-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}
@media (min-width: 1100px) {
	.gd-pillar-grid {
		grid-template-columns: repeat(4, 1fr);
	}
}

/* 29. september 2026 (N368, Henrik godkendte ordene samme dag): de lange tekster på siden »Vores tre
   værktøjer« (/vaerktoejer/). Én sektion pr. værktøj under de tre kort, i samme rækkefølge som kortene.
   Læsebredde 720 og samme læseregler som tekstsiderne: afsnitsoverskrift 26/22 i Sora og mørkegrøn,
   underoverskrift 20, brødtekst 17 med linjeafstand 1,7 og linjen låst til cirka 70 tegn, 24 mellem
   afsnit, punktlister på sandfarvet plade med 12 mellem punkterne. 96/60 mellem de tre sektioner med
   stregen i midten. Knappen til sidst er husets knap, 44 høj med tekst 15: orange ved Find din ladeboks
   (opfordring til handling, som kortet øverst), mørkegrøn ved de to andre (vej længere ind på siden).
   Ingen tvangsregler. Teksten står i sidens eget indhold, ikke her. */
.entry-content .vk-tekst {
	max-width: 720px;
}
.entry-content .vk-tekst .vk-afsnit {
	margin-top: 30px;
	padding-top: 30px;
	border-top: 1px solid #E3EBE6;
}
.entry-content .vk-tekst h2 {
	font-family: Sora, sans-serif;
	font-size: 22px;
	font-weight: 500;
	line-height: 1.25;
	color: #0B7352;
	margin: 0 0 8px;
	padding: 0;
	border: 0;
}
.entry-content .vk-tekst h3 {
	font-family: Sora, sans-serif;
	font-size: 20px;
	font-weight: 500;
	line-height: 1.3;
	color: #1A1A1A;
	margin: 28px 0 8px;
}
.entry-content .vk-tekst p {
	font-size: 17px;
	line-height: 1.7;
	max-width: 622px;
	margin: 0 0 24px;
}
.entry-content .vk-tekst p strong {
	color: #0B7352;
	font-weight: 700;
}
.entry-content .vk-tekst ul {
	max-width: 622px;
	margin: 0 0 24px;
	padding: 20px 24px 20px 42px;
	background: #F7F5EF;
	border-radius: 14px;
}
.entry-content .vk-tekst li {
	font-size: 17px;
	line-height: 1.7;
	margin: 0 0 12px;
}
.entry-content .vk-tekst li:last-child {
	margin-bottom: 0;
}
.entry-content .vk-tekst .vk-knap-linje {
	margin: 32px 0 0;
}
.entry-content .vk-tekst a.vk-knap {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0 22px;
	border-radius: 999px;
	background: #0B7352;
	color: #FFFFFF;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
}
.entry-content .vk-tekst a.vk-knap--find {
	background: #E8622A;
}
@media (min-width: 821px) {
	.entry-content .vk-tekst .vk-afsnit {
		margin-top: 48px;
		padding-top: 48px;
	}
	.entry-content .vk-tekst h2 {
		font-size: 26px;
	}
	.entry-content .vk-tekst a.vk-knap--find:hover {
		background: #D14E1C;
	}
}

/* =====================================================================
   BILLEDER INDE I TEKSTEN (30. september 2026, N372/N373)
   Hvad: fotos inde i guiderne står i læsebredden (højst 720), 16:9, med husets
   hjørne 14 og 24 luft over og under, som alt andet inde i et afsnit.
   Den sandfarvede bund ses kun, mens billedet hentes, og de faste mål gør, at
   siden ikke hopper. Gælder telefon og computer ens, derfor intet lag.
   Hvorfor: Henrik 30/9: ingen store billeder i toppen af guiderne; billeder på
   guidekortene og inde i teksten, højst ét pr. afsnit, alle med samme lys og
   farvetone. Udkastet på Hjemmeladning godkendt af Henrik 30/9 (»ja«).
   Sikkerhedskopi: uploads/kontrol-30september-2026/foer/style.css
   ===================================================================== */
.entry-content figure.bilo-foto {
	margin: 24px 0;
	padding: 0;
	max-width: 58ch; /* samme bredde som teksten, rettet 30/9 efter Henriks »det skal se paent ud«. Foer: 720px. Sikkerhedskopi: foer/style-foer-billedbredde.css */
}
.entry-content figure.bilo-foto img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	border-radius: 14px;
	background: #F7F5EF;
}
/* Billedtekst under et foto (30/9-2026): kun hvor licensen kraever fotografens navn (lynladerne ved Karlslunde). Det med smaat: 13, daempet farve, 8 over. Sikkerhedskopi: foer/style-foer-billedtekst.css */
.entry-content figure.bilo-foto figcaption {
	margin-top: 8px;
	font-size: 13px;
	line-height: 1.5;
	color: #5B6B65;
}

/* =====================================================================
   GUIDEKORTENE LØFTER SIG FRA SIDEN (1. oktober 2026, Henriks valg A)
   Hvad: kanten om guidekortene er husets mintgrønne (#CFE6DC) i stedet for den lyse grå,
   og kortet har en blød grøn skygge under sig.
   Hvorfor: Henrik så på telefon, at kortene flød ud i sidens bund. Målt 1/10: hvid kortbund mod
   sidens bund 1,06, kanten 1,19. Skyggen viser, hvor kortet slutter. Gælder alle skærme og alle
   steder, guidekortet bruges (ét guidekort overalt). Hover-reglerne står urørt og vinder stadig.
   Sikkerhedskopi: uploads/kontrol-30september-2026/foer/style-foer-kortskygge-1oktober.css
   ===================================================================== */
.gd-card,
.gd-pillar {
	border-color: #CFE6DC;
	box-shadow: 0 1px 3px rgba(11, 115, 82, .08), 0 10px 28px rgba(11, 115, 82, .16);
}

/* GUIDEKORTENE FÅR MERE LUFT (1. oktober 2026, Henrik): 24 mellem kortene i begge rækker, husets mål for
   luft inde i et afsnit. Før: 14 (Start her) og 16 (listen). Kolonnerne er de samme som før.
   Sikkerhedskopi: uploads/kontrol-30september-2026/foer/style-foer-kortafstand-1oktober.css */
.gd-grid,
.gd-pillar-grid {
	gap: 24px;
}

/* ============================================================
   KOMMUNESIDEN, NYT UDSEENDE (1. oktober 2026, sen aften, N377)
   ------------------------------------------------------------
   HVAD: vores eget kommuneskilt med kommunens form i toppen, paa
         computer lidt skraat oven paa et lille kort med de offentlige
         ladepunkter; seks talkort i stedet for byskiltet og
         faktabjaelken; bjaelker i stedet for soejler; sammenligningen
         med hele landet. Paa telefon staar kun skiltet i toppen, og
         kortet staar oeverst i afsnittet om offentlige ladepunkter.
   HVORFOR: Henriks godkendte udkast 1. oktober 2026 (»Done der var den,
         lige præcis« og »Det hele er perfekt«). Teksterne godkendt 1/10.
   HVEM: Henrik. Udkastet ligger i Henriks mappe under Claude outputs/
         kommunesider-1oktober2026 og er kopieret med disse undtagelser:
         tekst er mindst 13 (husets gulv; udkastet havde 11, 12 og 14),
         tal og etiketter bruger husets trin (22/26, 15, 13), og de
         indre hjoerner er 8 i stedet for 10 (huset har tre radier).
   FARVER: udkastets egne. Ingen tvangsregler.
   LAG: telefonen til og med 820, computeren fra 821.
   Sikkerhedskopi: uploads/kontrol-1oktober-2026/foer/
   ============================================================ */
.ko-skilt2{ display:inline-block; background:#fff; border-radius:14px; padding:6px;
  box-shadow:0 12px 30px rgba(0,0,0,.25); max-width:100%; box-sizing:border-box; }
.ko-skilt2__i{ display:flex; align-items:center; gap:14px; border:2.5px solid #0B7352;
  border-radius:8px; padding:12px 20px 12px 14px; }
.ko-skilt2__form{ width:64px; height:64px; flex:none; display:flex; align-items:center;
  justify-content:center; background:#EAF6F0; border-radius:8px; }
.ko-skilt__form{ width:58px; height:58px; display:block; }
.ko-skilt__form path{ fill:#0B7352; stroke:none; }
.ko-skilt2__t{ display:flex; flex-direction:column; line-height:1.1; min-width:0; }
.ko-skilt2__t small{ font:600 13px/1.3 var(--font-body),sans-serif; letter-spacing:.18em;
  text-transform:uppercase; color:#4A5A55; }
.ko-skilt2__t b{ font:600 28px/1.15 var(--font-display),sans-serif; color:#1A1A1A;
  letter-spacing:.01em; overflow-wrap:normal; hyphens:manual; }
.ko-skilt2--lang .ko-skilt2__t b{ font-size:22px; }

.ko-lk{ margin:0; background:#fff; border-radius:14px; padding:12px 12px 10px; color:#1A1A1A;
  box-shadow:0 12px 30px rgba(0,0,0,.22); box-sizing:border-box; }
.ko-lk__h{ display:flex; justify-content:space-between; align-items:baseline; gap:12px;
  font-size:13px; line-height:1.3; letter-spacing:.06em; text-transform:uppercase; color:#4A5A55; }
.ko-lk__h b{ font:600 20px/1.2 var(--font-display),sans-serif; color:#0B7352; letter-spacing:0; }
.ko-lk__f{ display:flex; flex-wrap:wrap; gap:6px 14px; font-size:13px; line-height:1.4;
  color:#33413C; margin-top:4px; }
.ko-lk__f i{ display:inline-block; width:9px; height:9px; border-radius:50%; margin-right:5px; }
.ko-lk__pn{ background:#3EA66E; }
.ko-lk__ph{ background:#0B7352; box-shadow:0 0 0 2px #fff,0 0 0 3px #0B7352; }
.ko-lk__kilde{ font-size:13px; line-height:1.5; color:#5B6B65; margin:6px 0 0; }
.ko-lkort{ display:block; width:100%; height:auto; }
.ko-lkort__nabo{ fill:#F3F6F4; stroke:#C9D6D0; stroke-width:1; stroke-dasharray:3 3; }
.ko-lkort__navn{ font:600 18.5px var(--font-body),sans-serif; fill:#8A9A95; text-anchor:middle;
  letter-spacing:.08em; }
.ko-lkort__kommune{ fill:#E2F2EA; stroke:#0B7352; stroke-width:2; stroke-linejoin:round; }
.ko-lkort__n{ fill:#3EA66E; fill-opacity:.8; stroke:#fff; stroke-width:1.2; }
.ko-lkort__h{ fill:#0B7352; stroke:#fff; stroke-width:2; }
.ko-lkort__lyn{ fill:#fff; }

.ko-fl{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.ko-fl__t{ background:#fff; border:1px solid #CFE6DC; border-radius:14px; padding:14px;
  display:flex; flex-direction:column; gap:2px; min-width:0; }
.ko-fl__i{ width:36px; height:36px; border-radius:8px; background:#EAF6F0; color:#0B7352;
  display:flex; align-items:center; justify-content:center; margin-bottom:6px; }
.ko-ik{ width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.8;
  stroke-linecap:round; stroke-linejoin:round; }
.ko-fl__t b{ font:600 22px/1.15 var(--font-display),sans-serif; color:#0B7352;
  font-variant-numeric:tabular-nums; }
.ko-fl__n{ font-size:15px; line-height:1.35; color:#4A5A55; }
.ko-fl__ekstra{ font-size:13px; line-height:1.4; color:#5B6B65; }

.ko-bb,.ko-sml-kasse{ background:#fff; border:1px solid #CFE6DC; border-radius:14px; padding:20px;
  box-shadow:0 1px 3px rgba(11,115,82,.06); box-sizing:border-box; }
.ko-bb{ margin:24px 0 0; }
.ko-bb__r{ display:grid; grid-template-columns:minmax(0,1fr) 64px;
  grid-template-areas:"n n" "s b"; align-items:center; gap:4px 10px; margin:0 0 12px; }
.ko-bb__n{ grid-area:n; font-size:15px; line-height:1.35; color:#1A1A1A; }
.ko-bb__s,.ko-sml__s{ display:block; height:10px; background:#EEF3F0; border-radius:999px; overflow:hidden; }
.ko-bb__s{ grid-area:s; }
.ko-bb__s i,.ko-sml__s i{ display:block; height:100%; background:#3EA66E; border-radius:999px; }
.ko-bb__r b{ grid-area:b; text-align:right; font-size:15px; font-weight:600;
  font-variant-numeric:tabular-nums; }
.ko-bb .ko-soejler__ialt{ font-size:13px; line-height:1.5; color:#5B6B65; margin:16px 0 0; }
.ko-bb .ko-soejler__ialt b{ color:#1A1A1A; font-variant-numeric:tabular-nums; }

.ko-sml-kasse{ max-width:720px; }
.ko-sml{ margin:0 0 24px; }
.ko-sml__l{ font-size:15px; line-height:1.35; color:#4A5A55; margin:0 0 8px; }
.ko-sml__r{ display:grid; grid-template-columns:minmax(0,120px) minmax(0,1fr) 64px;
  align-items:center; gap:10px; font-size:15px; line-height:1.35; margin:4px 0; }
.ko-sml__n{ overflow-wrap:anywhere; }
.ko-sml__r b{ text-align:right; font-variant-numeric:tabular-nums; }
.ko-sml__r--dk{ color:#5B6B65; }
.ko-sml__r--dk .ko-sml__s i{ background:#AFC3BA; }
.ko-sml-kasse .ko-kilde{ margin:0; }

@media (max-width:820px){
  .ko-hero__inner--skilt{ display:grid; grid-template-columns:minmax(0,1fr); gap:24px; }
  .ko-kombi{ display:flex; flex-direction:column; align-items:flex-start; gap:16px; }
  .ko-lk--top{ display:none; }
  .ko-lk--tlf{ border:1px solid #CFE6DC; box-shadow:0 1px 3px rgba(11,115,82,.08),0 10px 28px rgba(11,115,82,.16);
    margin:0 0 24px; }
  .bilo-rute-kommune .ko-fl-blok .ko-note,
  .bilo-rute-kommune .ko-fl-blok .ko-kilde{ margin:12px 0 0; }
}
@media (min-width:821px){
  .ko-hero__inner--skilt{ display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);
    gap:24px; align-items:center; }
  .ko-hero__hoejre{ display:flex; justify-content:flex-end; }
  .ko-kombi{ display:flex; flex-direction:column; align-items:flex-end; gap:16px; width:100%; max-width:440px; }
  .ko-skilt2{ transform:rotate(-2deg); }
  .ko-skilt2__form{ width:84px; height:84px; }
  .ko-skilt__form{ width:76px; height:76px; }
  .ko-skilt2__t b{ font-size:34px; }
  .ko-skilt2--lang .ko-skilt2__t b{ font-size:26px; }
  .ko-kombi .ko-skilt2{ margin-right:40px; margin-bottom:-36px; position:relative; z-index:2; }
  .ko-lk--top{ width:100%; max-width:380px; padding-top:34px; align-self:flex-end; }
  .ko-lk--tlf{ display:none; }
  .ko-fl{ grid-template-columns:repeat(6,minmax(0,1fr)); }
  .ko-fl__t b{ font-size:26px; }
  .bilo-rute-kommune .ko-fl-blok .ko-note,
  .bilo-rute-kommune .ko-fl-blok .ko-kilde{ margin:12px 0 0; }
  .ko-bb{ max-width:720px; }
  .ko-bb__r{ grid-template-columns:220px minmax(0,1fr) 64px; grid-template-areas:"n s b"; gap:10px; margin:0 0 10px; }
}

/* Kommunesiden: noten og kilden under talkortene i husets lille trin (13), 1. oktober 2026 */
.bilo-rute-kommune .ko-fl-blok .ko-note,
.bilo-rute-kommune .ko-fl-blok .ko-kilde{ font-size:13px; line-height:1.5; }

/* ============================================================
   KOMMUNEOVERSIGTEN, NYT UDSEENDE (1. oktober 2026, sen aften, N378)
   ------------------------------------------------------------
   HVAD: et Danmarkskort i toppen farvet i fem groenne trin efter
         egen grund, soegefelt og tre noegletal ved siden af, en
         »Hop til«-bjaelke der klaeber med »Sortér:«, og rolige
         kommunekort. Paa telefon 5 pr. region og »Vis alle«.
   HVORFOR: Henriks godkendte udkast 1. oktober 2026 (»Det hele er perfekt«).
   HVEM: Henrik. Udkastet ligger i Henriks mappe under Claude outputs/
         kommunesider-1oktober2026 (oversigt.css) og er kopieret med disse
         undtagelser: tekst er mindst 13 (udkastet havde 11, 12 og 14),
         navnet paa kortene er 20 (husets trin, udkastet havde 18), og
         hjoernerne er husets 8, 14 og pille.
   FARVER: udkastets egne. Ingen tvangsregler.
   LAG: telefonen til og med 820, computeren fra 821.
   Sikkerhedskopi: uploads/kontrol-1oktober-2026/foer/
   ============================================================ */
.kov-hero{ display:grid; grid-template-columns:minmax(0,1fr); gap:24px; }
.kov-soeg{ margin:0 0 4px; max-width:520px; }
.kov-soeg__mrk{ display:block; font-size:15px; line-height:1.4; font-weight:600; color:#fff; margin:0 0 8px; }
.kov-soeg__felt{ display:flex; align-items:center; gap:10px; background:#fff; color:#5B6B65;
  border-radius:14px; padding:0 16px; box-shadow:0 10px 28px rgba(0,0,0,.18); }
.kov-soeg__felt .ko-ik{ width:20px; height:20px; flex:none; }
.kov-soeg__felt input{ flex:1; min-width:0; border:0; outline:0; background:transparent; font:400 17px/1.3 var(--font-body),sans-serif;
  color:#1A1A1A; min-height:52px; padding:0; -webkit-appearance:none; appearance:none; }
.kov-soeg__felt:focus-within{ box-shadow:0 0 0 3px #8FE3B8,0 10px 28px rgba(0,0,0,.18); }
.kov-soeg__svar{ margin:8px 0 0; min-height:1.5em; font-size:15px; line-height:1.5; color:#BFE8D3; }
.kov-tal{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin:12px 0 0; max-width:560px; }
.kov-tal > div{ border-left:2px solid rgba(255,255,255,.3); padding-left:12px; min-width:0; }
.kov-tal b{ display:block; font:600 20px/1.2 var(--font-display),sans-serif; color:#fff; font-variant-numeric:tabular-nums; }
.kov-tal span{ display:block; font-size:13px; line-height:1.35; color:#BFE8D3; margin:4px 0 0; }
.kov-tal small{ display:block; font-size:13px; line-height:1.35; color:#BFE8D3; opacity:.85; }

.kov-dkboks{ margin:0; background:#fff; border-radius:14px; padding:14px; color:#1A1A1A;
  box-shadow:0 1px 3px rgba(11,115,82,.08),0 10px 28px rgba(0,0,0,.18); }
.kov-dk{ display:block; width:100%; height:auto; }
.kov-dk path{ stroke:#fff; stroke-width:.7; stroke-linejoin:round; }
.kov-dk a:hover path{ stroke:#1A1A1A; stroke-width:1.4; }
.kov-dk .kov-dk__ramme{ fill:none; stroke:#CFE6DC; stroke-width:1; }
.kov-c1{ fill:#E3F2EA; background:#E3F2EA; } .kov-c2{ fill:#B9DFCB; background:#B9DFCB; }
.kov-c3{ fill:#7FC4A0; background:#7FC4A0; } .kov-c4{ fill:#3EA66E; background:#3EA66E; }
.kov-c5{ fill:#0B7352; background:#0B7352; }
.kov-dk__leg{ display:flex; flex-wrap:wrap; align-items:center; gap:4px 12px; font-size:13px; line-height:1.4; color:#33413C; margin-top:8px; }
.kov-dk__sk{ display:flex; flex-direction:column; gap:2px; }
.kov-dk__trin{ display:flex; gap:2px; } .kov-dk__trin i{ width:34px; height:10px; border-radius:999px; display:block; }
.kov-dk__tal{ display:flex; justify-content:space-between; gap:12px; font-size:13px; color:#5B6B65; width:178px; }
.kov-dk__kilde{ margin:6px 0 0; font-size:13px; line-height:1.5; color:#5B6B65; }

.kov-hop{ position:sticky; top:0; z-index:90; background:#F7F9F8; border-bottom:1px solid #DCE6E1; }
.kov-hop__i{ max-width:1168px; margin:0 auto; display:flex; gap:8px; align-items:center; padding:8px 16px;
  overflow-x:auto; white-space:nowrap; scrollbar-width:none; }
.kov-hop__i::-webkit-scrollbar{ display:none; }
.kov-hop__l{ font-size:13px; letter-spacing:.06em; text-transform:uppercase; color:#5B6B65; margin-right:4px; }
.kov-chip{ display:inline-flex; align-items:center; min-height:44px; box-sizing:border-box; font-size:15px; border:1px solid #CFE6DC;
  background:#fff; border-radius:999px; padding:0 14px; color:#1A1A1A; text-decoration:none; }
.kov-chip small{ font-size:13px; color:#5B6B65; margin-left:6px; }
.kov-chip:hover{ border-color:#0B7352; }
.kov-chip--paa{ background:#0B7352; border-color:#0B7352; color:#fff; } .kov-chip--paa small{ color:#BFE8D3; }
.kov-sorter{ margin-left:auto; padding-left:8px; display:inline-flex; align-items:center; gap:6px; font-size:15px; color:#4A5A55; }
.kov-sorter select{ min-height:44px; font:600 15px var(--font-body),sans-serif; color:#0B7352; background:#fff;
  border:1px solid #CFE6DC; border-radius:8px; padding:0 8px; }

.bilo-rute-kommuner .kov-wrap{ padding-top:0; }
.kov-reg{ padding:32px 0 8px; scroll-margin-top:var(--kov-top,140px); }
.kov-reg__titel{ font-size:22px; line-height:1.25; color:#0B7352; margin:0 0 16px; display:flex; flex-wrap:wrap; gap:4px 10px; align-items:baseline; }
.kov-reg__titel span{ font:400 15px var(--font-body),sans-serif; color:#5B6B65; }
.kov-gitter{ display:grid; grid-template-columns:minmax(0,1fr); gap:12px; }
.kov-k{ display:grid; gap:8px; background:#fff; border:1px solid #CFE6DC; border-radius:14px; padding:14px 16px;
  text-decoration:none; color:#1A1A1A; box-shadow:0 1px 3px rgba(11,115,82,.06); min-width:0; align-content:start; }
.kov-k:hover{ border-color:#0B7352; }
.kov-k[hidden]{ display:none; }
.kov-k__h{ display:flex; flex-wrap:wrap; align-items:center; gap:4px 8px; min-width:0; }
.kov-k h3{ flex:0 1 auto; min-width:0; margin:0; font:600 20px/1.25 var(--font-display),sans-serif; color:#0B7352; overflow-wrap:normal; }
.kov-dk2{ flex:none; margin-left:auto; font-size:13px; line-height:1.4; font-weight:600; color:#4A5A55; background:#F0F3F1; border-radius:999px; padding:1px 8px; }
.kov-bdg{ flex:none; white-space:nowrap; font-size:13px; line-height:1.4; font-weight:600; color:#0B7352; background:#EAF6F0; border-radius:999px; padding:1px 8px; }
.kov-k__eg{ display:grid; grid-template-columns:84px minmax(0,1fr) 44px; align-items:center; gap:8px; font-size:13px; line-height:1.4; color:#4A5A55; }
.kov-k__eg b{ color:#1A1A1A; text-align:right; font-size:15px; font-variant-numeric:tabular-nums; white-space:nowrap; }
.kov-bj{ height:8px; background:#EEF3F0; border-radius:999px; overflow:hidden; display:block; }
.kov-bj i{ display:block; height:100%; border-radius:999px; background:#3EA66E; }
.kov-k__lp{ margin:0; font-size:13px; line-height:1.6; color:#4A5A55; }
.kov-k__lp .ko-ik{ width:15px; height:15px; color:#0B7352; vertical-align:-2px; margin-right:4px; }
.kov-k__lp b{ color:#1A1A1A; font-size:15px; font-variant-numeric:tabular-nums; }
.kov-sep{ margin:0 2px; color:#AFC3BA; }
.kov-nw{ white-space:nowrap; }
.kov-flere{ display:block; width:100%; min-height:44px; margin-top:12px; border:1px dashed #9FCDB5; background:#fff; color:#0B7352;
  border-radius:14px; padding:10px 12px; font:600 15px var(--font-body),sans-serif; cursor:pointer; }
.kov-flere:hover{ border-style:solid; }

@media (max-width:820px){
  .kov-gitter .kov-k:nth-child(n+6){ display:none; }
  .kov-reg--alle .kov-gitter .kov-k:nth-child(n+6),
  .kov-soeger .kov-gitter .kov-k:nth-child(n+6){ display:grid; }
  .kov-reg--alle .kov-gitter .kov-k[hidden],
  .kov-soeger .kov-gitter .kov-k[hidden]{ display:none; }
  .kov-soeger .kov-flere{ display:none; }
  .kov-tal{ grid-template-columns:minmax(0,.85fr) minmax(0,1fr) minmax(0,1.15fr); gap:8px; }
  .kov-tal > div{ padding-left:8px; } .kov-tal b{ font-size:17px; white-space:nowrap; }
}
@media (min-width:821px){
  .kov-hero{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:56px; align-items:center; }
  .kov-hop__i{ padding:8px 24px; }
  .kov-reg{ padding:40px 0 8px; }
  .kov-reg__titel{ font-size:26px; }
  .kov-gitter{ grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; }
  .kov-k{ box-shadow:0 1px 3px rgba(11,115,82,.08),0 8px 22px rgba(11,115,82,.10); }
  .kov-flere{ display:none; }
}

/* ============================================================
   KOMMUNESIDEN, TEKSTOPSAETNING (2. oktober 2026)
   ------------------------------------------------------------
   HVAD: al loebende tekst 17 med linjeafstand 1,6 og hoejst 58 tegn
         pr. linje (som guiderne). 16 luft mellem afsnit og under
         overskrifter, 12 mellem punkter i lister. Kilder og noter
         altid 13 i moerkere graa (#4A5A55, kontrast ca. 7 paa siden)
         taet under det, de hoerer til. Kun én slags farvet kasse
         (mintgroen); den graa kasse om ladepunkter er nu mintgroen.
   HVORFOR: Henrik 2/10: teksterne var for ustruktureret sat op
         (linjelaengde op til 90 tegn, svag graa under kravet til
         webtilgaengelighed, seks forskellige afstande, fem baggrunde).
   HVEM: Henrik godkendte udkastet 2/10 (»ja den er godkendt«).
   Ingen tvangsregler. Sikkerhedskopi: uploads/kontrol-2oktober-2026/foer/
   ============================================================ */
html body.bilo-rute-kommune .ko-wrap{
  --t-tekst:#1A1A1A; --t-lille:#4A5A55; --t-maal:58ch; --t-luft:16px;
}
/* Al loebende tekst: 17 med linjeafstand 1,6 og hoejst 58 tegn pr. linje */
html body.bilo-rute-kommune .ko-wrap .ko-blok > p:not(.ko-note):not(.ko-kilde),
html body.bilo-rute-kommune .ko-wrap .ko-ingress,
html body.bilo-rute-kommune .ko-wrap .ko-op,
html body.bilo-rute-kommune .ko-wrap .ko-to > div > p:not(.ko-kilde),
html body.bilo-rute-kommune .ko-wrap .ko-fakta p,
html body.bilo-rute-kommune .ko-wrap .ko-faq details > p,
html body.bilo-rute-kommune .ko-wrap li{
  font-size:17px; line-height:1.6; color:var(--t-tekst); max-width:var(--t-maal);
}
html body.bilo-rute-kommune .ko-wrap .ko-blok > p:not(.ko-note):not(.ko-kilde),
html body.bilo-rute-kommune .ko-wrap .ko-ingress,
html body.bilo-rute-kommune .ko-wrap .ko-op,
html body.bilo-rute-kommune .ko-wrap .ko-to > div > p:not(.ko-kilde),
html body.bilo-rute-kommune .ko-wrap .ko-fakta p{ margin:0 0 var(--t-luft); }

/* Overskrift: 16 luft under, saa den tydeligt hoerer til teksten */
html body.bilo-rute-kommune .ko-wrap .ko-blok > h2{ margin:0 0 16px; max-width:var(--t-maal); }
html body.bilo-rute-kommune .ko-wrap .ko-fakta h3{ margin:0 0 12px; }

/* Lister flugter med teksten, 12 mellem punkterne, 16 efter listen */
html body.bilo-rute-kommune .ko-wrap ul:not(.ko-postnumre){ padding-left:20px; margin:0 0 var(--t-luft); max-width:var(--t-maal); }
html body.bilo-rute-kommune .ko-wrap ul:not(.ko-postnumre) li{ margin:0 0 12px; padding-left:2px; }
html body.bilo-rute-kommune .ko-wrap ul:not(.ko-postnumre) li:last-child{ margin-bottom:0; }

/* Kilder og noter: altid lille (13), moerkere graa saa de kan laeses, 12 under det de hoerer til */
html body.bilo-rute-kommune .ko-wrap .ko-kilde,
html body.bilo-rute-kommune .ko-wrap .ko-note{
  font-size:13px; line-height:1.5; color:var(--t-lille); max-width:600px; margin:12px 0 0;
}
html body.bilo-rute-kommune .ko-wrap .ko-blok > .ko-note{ margin:0 0 var(--t-luft); }

/* Kasser: kun to slags. Hvid til tal og svar, mintgroen til »det betyder for dig«. Samme indre luft. */
html body.bilo-rute-kommune .ko-wrap .ko-fakta,
html body.bilo-rute-kommune .ko-wrap .ko-fakta--flad{
  background:#EAF6F0; border:1px solid #CFE6DC; border-radius:14px; padding:20px; margin:24px 0 0; max-width:calc(var(--t-maal) + 42px);
}
html body.bilo-rute-kommune .ko-wrap .ko-fakta > :last-child{ margin-bottom:0; }
html body.bilo-rute-kommune .ko-wrap .ko-fakta p > a{ display:inline-flex; align-items:center; min-height:44px; font-weight:600; }
html body.bilo-rute-kommune .ko-wrap .ko-fakta--flad + .ko-kilde{ margin-top:12px; }

/* Spoergsmaal og svar: samme luft rundt om svaret som i kasserne */
html body.bilo-rute-kommune .ko-wrap .ko-faq details > p{ padding:16px 20px 20px; margin:0; }
html body.bilo-rute-kommune .ko-wrap .ko-faq summary{ padding:16px 20px; line-height:1.4; }

@media (min-width:821px){
  html body.bilo-rute-kommune .ko-wrap .ko-fakta,
  html body.bilo-rute-kommune .ko-wrap .ko-fakta--flad{ padding:24px; }
  html body.bilo-rute-kommune .ko-wrap .ko-faq details{ max-width:calc(var(--t-maal) + 42px); }
}
html body.bilo-rute-kommune .ko-wrap .ko-fakta p:last-child, html body.bilo-rute-kommune .ko-wrap .ko-fakta ul:last-child{ margin-bottom:0; }
html body.bilo-rute-kommune .ko-wrap .ko-to .ko-fakta{ margin-top:0; }

/* 3. oktober 2026 (Henrik: »Har du ikke elbil endnu?« flagrede til hoejre uden tilknytning).
   Paa computer stod motoren til venstre (N352), men linket under den stod stadig i midten af
   afsnittet. Nu flugter det med motoren, har samme bredde og staar 12 under den.
   Sikkerhedskopi: uploads/kontrol-2oktober-2026/foer/style-foer-skiftel-3oktober.css */
@media (min-width: 821px) {
	.ko-blok > .motor-skift-el {
		max-width: 720px;
		margin: 12px auto 32px 0;
	}
}


/* ============================================================
   KOMMUNESIDEN BYGGER ET BEHOV OP (3. oktober 2026)
   ------------------------------------------------------------
   HVAD: Danmarkskortet i toppen med feltet »Find din kommune« og
         »Brug min lokation«, linket »Spring direkte til anbefalingen«,
         flere og flere koerer elbil, hvor mange deles om en lader,
         hvad vaelger andre, skyderen med besparelsen og anbefalingen
         til sidst. Det lille kort med ladepunkterne staar nu ogsaa
         nede ved ladepunkterne paa computer.
   HVORFOR: Henrik 3/10: siden skal bygge et behov op og slutte med
         anbefalingen. Udkastene godkendt 3/10 (»yes perfekt«, »yep«).
   Ingen tvangsregler. Telefon foerst, computer fra 821.
   Sikkerhedskopi: uploads/kontrol-2oktober-2026/foer/
   ============================================================ */

/* Toppen: et roligt link i stedet for knappen */
.ko-hero .ko-spring{ display:inline-flex; align-items:center; gap:6px; min-height:44px; color:#fff; font-size:15px; font-weight:600; text-decoration:underline; text-underline-offset:3px; }
.ko-hero .ko-spring:hover{ color:#BFE8D3; }

/* Danmarkskortet */
.ko-kombi .ko-dk{ width:100%; }
.ko-dk__kort{ position:relative; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.18); border-radius:14px; padding:12px; }
.ko-dk__svg{ display:block; width:100%; height:auto; }
.ko-dk__k{ fill:rgba(255,255,255,.16); stroke:rgba(255,255,255,.42); stroke-width:.6; stroke-linejoin:round; transition:fill .15s; }
.ko-dk__svg a:hover .ko-dk__k, .ko-dk__svg a:focus .ko-dk__k{ fill:rgba(255,255,255,.38); }
.ko-dk__k.is-her{ fill:#E8622A; stroke:#fff; stroke-width:1.2; }
.ko-dk__ramme{ fill:none; stroke:rgba(255,255,255,.35); stroke-width:1; }
.ko-dk__navn{ position:absolute; transform:translate(-50%, calc(-100% - 12px)); background:#fff; color:#1A1A1A; font-size:13px; font-weight:700; line-height:1.2; padding:5px 10px; border-radius:999px; white-space:nowrap; pointer-events:none; box-shadow:0 4px 12px rgba(0,0,0,.18); }
.ko-dk__navn::after{ content:""; position:absolute; left:50%; top:100%; width:2px; height:10px; margin-left:-1px; background:#fff; }
.ko-dk__navn--v{ transform:translate(calc(-100% + 14px), calc(-100% - 12px)); }
.ko-dk__navn--v::after{ left:auto; right:13px; }
.ko-dk__navn--h{ transform:translate(-14px, calc(-100% - 12px)); }
.ko-dk__navn--h::after{ left:13px; }
.ko-dk__hj{ font-size:13px; line-height:1.5; color:rgba(255,255,255,.88); margin:8px 0 16px; }

/* Find din kommune */
.ko-find{ margin:0; }
.ko-find__l{ display:block; font-size:15px; font-weight:600; color:#fff; margin:0 0 8px; }
.ko-find__r{ display:flex; gap:8px; }
.ko-find__felt{ flex:1 1 auto; min-width:0; min-height:48px; box-sizing:border-box; padding:10px 14px; font-size:17px; color:#1A1A1A; background:#fff; border:2px solid transparent; border-radius:8px; }
.ko-find__felt:focus{ outline:none; border-color:#8FE3B8; }
.ko-find__vis{ flex:0 0 auto; min-height:48px; padding:0 18px; border:0; border-radius:8px; background:#E8622A; color:#fff; font-size:15px; font-weight:700; cursor:pointer; }
.ko-find__vis:hover{ background:#D0521C; }
.ko-find__lok{ display:inline-flex; align-items:center; gap:8px; min-height:44px; margin:12px 0 0; padding:8px 16px; background:transparent; color:#fff; border:1.5px solid rgba(255,255,255,.6); border-radius:999px; font-size:15px; font-weight:600; cursor:pointer; }
.ko-find__lok:hover{ background:rgba(255,255,255,.1); }
.ko-find__lok[hidden]{ display:none; }
.ko-find__besked{ font-size:13px; line-height:1.5; color:#fff; margin:8px 0 0; }
.ko-find__besked:empty{ display:none; }

/* Flere og flere koerer elbil */
.ko-eb__kort{ background:#fff; border:1px solid #E1E7E4; border-radius:14px; padding:20px; max-width:560px; box-sizing:border-box; }
html body.bilo-rute-kommune .ko-wrap .ko-eb__kort p{ margin:0; max-width:none; }
.ko-eb__tal{ display:flex; align-items:baseline; flex-wrap:wrap; gap:4px 10px; }
.ko-eb__tal b{ font-family:var(--font-display),sans-serif; font-size:34px; line-height:1.1; color:#0B7352; }
.ko-eb__tal span{ font-size:15px; color:#4A5A55; }
html body.bilo-rute-kommune .ko-wrap .ko-eb__pille{ display:inline-flex; gap:4px; margin:10px 0 0; padding:4px 10px; border-radius:999px; background:#EAF6F0; color:#0B7352; font-size:13px; font-weight:700; }
.ko-eb__soejler{ display:grid; grid-template-columns:1fr 1fr; gap:24px; margin:20px 0 0; }
.ko-eb__s{ display:flex; flex-direction:column; align-items:center; justify-content:flex-end; gap:6px; height:200px; }
.ko-eb__s b{ font-size:15px; font-weight:700; color:#1A1A1A; }
.ko-eb__s i{ display:block; width:100%; max-width:120px; background:#3EA66E; border-radius:8px 8px 0 0; }
.ko-eb__s--foer i{ background:#C6E3D3; }
.ko-eb__s span{ font-size:13px; color:#4A5A55; }

/* Hvor mange deles om en lader */
.ko-pl__to{ display:grid; grid-template-columns:1fr 1fr; gap:12px; max-width:560px; margin:0 0 12px; }
.ko-pl__k{ display:flex; flex-direction:column; align-items:center; text-align:center; background:#fff; border:1px solid #E1E7E4; border-radius:14px; padding:16px 12px; }
.ko-pl__k--her{ background:#EAF6F0; border:2px solid #0B7352; }
.ko-pl__n{ font-size:13px; color:#4A5A55; }
.ko-pl__k b{ font-family:var(--font-display),sans-serif; font-size:34px; line-height:1.2; color:#0B7352; margin:4px 0; }
.ko-pl__t{ font-size:13px; line-height:1.4; color:#4A5A55; }
.ko-pl__biler{ display:flex; flex-wrap:wrap; justify-content:center; gap:4px; margin:12px 0 0; }
.ko-pl__biler i{ display:block; width:14px; height:7px; background:#3EA66E; border-radius:4px 4px 2px 2px; }
.ko-pl__biler em{ font-style:normal; font-size:13px; line-height:7px; color:#4A5A55; }

/* Hvad vaelger andre elbilister */
html body.bilo-rute-kommune .ko-wrap .ko-an__huse{ display:flex; gap:12px; margin:0 0 16px; }
.ko-an__huse svg{ width:40px; height:36px; fill:#3EA66E; }
.ko-an__svag svg{ fill:#C6E3D3; }
html body.bilo-rute-kommune .ko-wrap ul.ko-an__kort{ list-style:none; padding:0; margin:0 0 12px; display:grid; gap:12px; max-width:560px; }
html body.bilo-rute-kommune .ko-wrap ul.ko-an__kort > li{ display:flex; gap:12px; align-items:flex-start; margin:0; padding:16px; background:#fff; border:1px solid #E1E7E4; border-radius:14px; }
.ko-an__kort strong{ display:block; }
.ko-an__i{ flex:0 0 36px; width:36px; height:36px; display:flex; align-items:center; justify-content:center; background:#EAF6F0; border-radius:8px; }
.ko-an__i svg{ width:20px; height:20px; fill:none; stroke:#0B7352; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }

/* Skyderen */
.ko-sk__boks{ background:var(--color-primary-dark); color:#fff; border-radius:14px; padding:20px; max-width:560px; box-sizing:border-box; }
.ko-sk__valg{ display:inline-flex; gap:4px; padding:4px; background:rgba(255,255,255,.12); border-radius:999px; margin:0 0 16px; }
.ko-sk__o{ min-height:40px; padding:8px 16px; border:0; border-radius:999px; background:transparent; color:#fff; font-size:15px; font-weight:600; cursor:pointer; }
.ko-sk__o.is-valgt{ background:#fff; color:#0B7352; }
.ko-sk__km{ display:flex; justify-content:space-between; align-items:baseline; gap:12px; font-size:15px; font-weight:600; }
.ko-sk__km b{ font-size:22px; }
.ko-sk__slider{ display:block; width:100%; min-height:44px; margin:4px 0 12px; accent-color:#E8622A; cursor:pointer; }
.ko-sk__r{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.3fr) auto; align-items:center; gap:10px; font-size:13px; margin:0 0 8px; }
.ko-sk__s{ display:block; }
.ko-sk__s i{ display:block; height:12px; border-radius:999px; min-width:6px; }
.ko-sk__i--fos{ background:#F2A65A; }
.ko-sk__i--el{ background:#9FD9B6; }
.ko-sk__r b{ font-size:15px; text-align:right; font-variant-numeric:tabular-nums; }
.ko-sk__res{ background:#fff; color:#1A1A1A; border-radius:14px; padding:20px; margin:16px 0 0; text-align:center; }
html body.bilo-rute-kommune .ko-wrap .ko-sk__res p{ margin:0; max-width:none; }
.ko-sk__lille{ font-size:13px; color:#4A5A55; }
html body.bilo-rute-kommune .ko-wrap .ko-sk__spar{ font-family:var(--font-display),sans-serif; font-size:34px; line-height:1.2; font-weight:700; color:#0B7352; margin:2px 0; }
.ko-sk__eks{ display:flex; align-items:center; gap:12px; text-align:left; margin:16px 0 0; padding:12px; background:#FFF4EF; border:1.5px dashed #F2B79B; border-radius:14px; }
.ko-sk__eks[hidden]{ display:none; }
.ko-sk__eksi{ flex:0 0 40px; width:40px; height:40px; border-radius:50%; background:#E8622A; display:flex; align-items:center; justify-content:center; }
.ko-sk__eksi svg{ width:22px; height:22px; fill:none; stroke:#fff; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.ko-sk__eks small{ display:block; font-size:13px; color:#4A5A55; }
.ko-sk__eks b{ display:block; font-size:17px; line-height:1.35; }
html body.bilo-rute-kommune .ko-wrap .ko-sk__flere{ font-size:15px; line-height:1.5; text-align:left; margin:12px 0 0; }
.ko-sk__flere[hidden]{ display:none; }
.ko-sk__flere b{ color:#0B7352; }
.ko-sk__note{ font-size:13px; line-height:1.5; color:rgba(255,255,255,.9); margin:16px 0 0; }

@media (min-width:821px){
  .ko-kombi .ko-dk__kort{ padding-top:44px; }
  .ko-dk__navn{ font-size:13px; }
  /* Det lille kort ved ladepunkterne vises nu ogsaa paa computer */
  .ko-lp-blok .ko-lk--tlf{ display:block; max-width:440px; margin:0 0 24px; border:1px solid #CFE6DC; box-shadow:0 1px 3px rgba(11,115,82,.08),0 10px 28px rgba(11,115,82,.16); }
  .ko-sk__boks{ padding:24px; }
}

/* ============================================================
   KOMMUNESIDEN: TOPPEN MEGET MINDRE (3. oktober 2026, N386)
   ------------------------------------------------------------
   HVAD: telefon: kommuneskiltet og et lille Danmarkskort side om side,
         »Find din kommune« lige under og »Brug min lokation« paa samme
         linje som feltets overskrift. Et tryk paa det lille kort aabner
         kortet over hele skaermen (laget .ko-kl): foerste tryk zoomer
         ind og viser navnene, andet tryk vaelger kommunen, knappen
         nederst foerer videre. Computer: feltet staar under teksten til
         venstre, kortet er mindre til hoejre med skiltet paa skraa
         ovenpaa. Ingen ord, farver eller raekkefoelge er aendret paa
         siden; ordene i kortlaget er godkendt af Henrik.
   HVORFOR: Henrik 3/10: »Hover fylder jo hele siden nu«. Toppen var
         1.097 hoej paa telefon og 925 paa computer; nu ca. 570 og 560.
         Kortlaget, fordi 76 af 97 kommuner er mindre end en finger paa
         et kort i fuld telefonbredde (Henrik: »yes god ide«).
   HVEM: Henrik. Udkastene ligger i Henriks mappe under Claude outputs/
         kommuneside-toppen-3oktober2026.
   Ingen tvangsregler, ingen nye farver. Telefon til og med 820,
   computer fra 821.
   Sikkerhedskopi: uploads/kontrol-3oktober-2026/foer/
   ============================================================ */
.ko-dk__lup{ display:none; }
.ko-kl[hidden]{ display:none; }
html.ko-kl-aaben, html.ko-kl-aaben body{ overflow:hidden; }

@media (max-width:820px){
  .ko-hero{ padding:24px 16px; }
  .ko-hero__inner--skilt{ gap:16px; }
  .ko-hero .ko-hero__lead{ margin:0 0 8px; }
  .ko-hero__hoejre .ko-kombi{ display:grid; grid-template-columns:minmax(0,1fr) 104px; gap:16px; align-items:center; }
  .ko-kombi .ko-dk{ display:contents; }
  .ko-kombi .ko-skilt2{ grid-column:1; grid-row:1; justify-self:start; }
  .ko-kombi .ko-skilt2__i{ gap:10px; }
  .ko-kombi .ko-skilt2__form{ width:48px; height:48px; }
  .ko-kombi .ko-skilt2__t small{ white-space:nowrap; }
  .ko-kombi .ko-skilt2__t b{ font-size:22px; }
  .ko-kombi .ko-skilt2--lang .ko-skilt2__t b{ font-size:20px; }
  .ko-kombi .ko-dk__kort{ grid-column:2; grid-row:1; padding:6px; cursor:pointer; }
  .ko-kombi .ko-dk__svg{ pointer-events:none; }
  .ko-kombi .ko-dk__k.is-her{ stroke:#E8622A; stroke-width:16; }
  .ko-kombi .ko-dk__navn,
  .ko-kombi .ko-dk__hj{ display:none; }
  .ko-kombi .ko-dk__lup{ display:flex; align-items:center; justify-content:center; position:absolute; right:4px; bottom:4px; width:26px; height:26px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.25); }
  .ko-kombi .ko-find{ grid-column:1 / -1; grid-row:2; display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; column-gap:8px; }
  .ko-kombi .ko-find__l{ grid-column:1; grid-row:1; margin:0; }
  .ko-kombi .ko-find__lok{ grid-column:2; grid-row:1; margin:0; padding:0 4px; border:0; background:none; text-decoration:underline; text-underline-offset:3px; }
  .ko-kombi .ko-find__lok:hover{ background:none; color:#BFE8D3; }
  .ko-kombi .ko-find__r,
  .ko-kombi .ko-find__besked{ grid-column:1 / -1; }
  .ko-kombi .ko-find__r{ grid-row:2; }
}
@media (max-width:374px){
  .ko-hero__hoejre .ko-kombi{ grid-template-columns:minmax(0,1fr) 88px; gap:12px; }
}

/* Kortet over hele skaermen (kun telefon) */
.ko-kl{ position:fixed; inset:0; z-index:100000; display:flex; flex-direction:column; background:#0B7352; color:#fff; }
.ko-kl__top{ display:flex; align-items:center; justify-content:space-between; gap:8px; padding:16px 8px 8px 16px; }
.ko-kl .ko-kl__h{ margin:0; font-size:20px; line-height:1.2; color:#fff; }
.ko-kl__luk{ flex:none; width:44px; height:44px; border:0; background:none; color:#fff; font-size:28px; line-height:1; cursor:pointer; }
.ko-kl .ko-kl__hj{ margin:0 16px 8px; font-size:15px; line-height:1.5; color:#fff; }
.ko-kl__vin{ flex:1 1 auto; position:relative; overflow:hidden; margin:0 8px; border-radius:14px; background:rgba(255,255,255,.07); touch-action:none; }
.ko-kl__kort{ position:absolute; left:0; top:0; }
.ko-kl__svg{ display:block; max-width:none; }
.ko-kl__svg a:focus{ outline:none; }
.ko-kl__svg .ko-dk__k{ stroke:rgba(255,255,255,.6); stroke-width:1.2px; vector-effect:non-scaling-stroke; }
.ko-kl__svg .ko-dk__k.is-her{ stroke:#E8622A; stroke-width:4px; }
.ko-kl__svg .ko-dk__k.is-valgt{ fill:#fff; }
.ko-kl__navne text{ fill:#fff; stroke:#0B7352; paint-order:stroke; font-weight:600; text-anchor:middle; dominant-baseline:middle; pointer-events:none; }
.ko-kl__bund{ display:flex; align-items:center; gap:8px; padding:16px 16px 24px; }
.ko-kl__ud{ flex:none; min-height:44px; padding:0 16px; border:1.5px solid rgba(255,255,255,.6); border-radius:999px; background:none; color:#fff; font-size:15px; font-weight:600; cursor:pointer; }
.ko-kl__ud[hidden]{ display:none; }
.ko-kl__ga{ flex:1 1 auto; min-height:48px; padding:0 16px; border:0; border-radius:999px; background:#fff; color:#0B7352; font-size:15px; font-weight:700; cursor:pointer; }
.ko-kl__ga[disabled]{ opacity:.55; cursor:default; }
@media (min-width:821px){ .ko-kl{ display:none; } }

@media (min-width:821px){
  .ko-hero{ padding:48px 24px; }
  .ko-hero__inner--skilt{ grid-template-columns:minmax(0,1fr) 360px; column-gap:64px; row-gap:0; align-items:start; }
  .ko-hero__hoejre,
  .ko-hero__hoejre .ko-kombi,
  .ko-kombi .ko-dk{ display:contents; }
  .ko-hero__inner--skilt .ko-hero__tekst{ grid-column:1; grid-row:1; align-self:end; }
  .ko-kombi .ko-find{ grid-column:1; grid-row:2; align-self:start; max-width:440px; margin:24px 0 0; display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; column-gap:8px; }
  .ko-kombi .ko-find__l{ grid-column:1; grid-row:1; margin:0; }
  .ko-kombi .ko-find__lok{ grid-column:2; grid-row:1; margin:0; padding:0 4px; border:0; background:none; text-decoration:underline; text-underline-offset:3px; }
  .ko-kombi .ko-find__lok:hover{ background:none; color:#BFE8D3; }
  .ko-kombi .ko-find__r,
  .ko-kombi .ko-find__besked{ grid-column:1 / -1; }
  .ko-kombi .ko-find__r{ grid-row:2; }
  .ko-kombi .ko-skilt2{ grid-column:2; grid-row:1; align-self:start; justify-self:start; margin:0 0 0 -24px; position:relative; z-index:2; transform:rotate(-3deg) scale(.82); transform-origin:left top; }
  .ko-kombi .ko-dk__kort{ grid-column:2; grid-row:1 / span 2; margin:40px 0 0; padding:12px; }
  .ko-kombi .ko-dk__hj{ grid-column:2; grid-row:3; margin:8px 0 0; }
}

/* ============================================================
   KOMMUNESIDEN: FORSLAG UNDER »FIND DIN KOMMUNE« (3. oktober 2026)
   ------------------------------------------------------------
   HVAD: en liste med op til seks kommuner under feltet, mens man
         skriver. Samme udseende som forslagene under adressefeltet
         i motoren (hvid, rund, skygge, lys groen ved det valgte).
   HVORFOR: Henrik 3/10: »Naar man skriver sin kommune skal den komme
         op med forslag i forhold til de bogstaver man skriver«.
   Ingen tvangsregler, ingen nye farver.
   Sikkerhedskopi: uploads/kontrol-3oktober-2026/foer/
   ============================================================ */
.ko-find__r{ position:relative; }
.ko-find__forslag{ position:absolute; top:calc(100% + 8px); left:0; right:0; z-index:40; margin:0; padding:6px; list-style:none; background:#fff; border:1px solid #E1E7E4; border-radius:14px; box-shadow:0 18px 44px rgba(16,35,26,.14); }
.ko-find__forslag[hidden]{ display:none; }
.ko-find__forslag li{ display:flex; align-items:center; min-height:44px; padding:0 13px; border-radius:8px; cursor:pointer; font-size:17px; color:#1A1A1A; }
.ko-find__forslag li:hover,
.ko-find__forslag li.aktiv{ background:#F1F6F3; }

/* ============================================================
   KOMMUNESIDEN: EN FAST OPBYGNING (3. oktober 2026, N387)
   ------------------------------------------------------------
   HVAD: alle hvide kort ens (mintgroen kant, samme bloede skygge som
         guidekortene, hjoerne 14). Kun kommunens eget kort er mintgroent
         med groen kant. Svarboksene er mintgroen flade. Soejler og
         bjaelker: kommunen frisk groen, sammenligning graagroen. Een graa
         til smaa tekster (#4A5A55). Skyderen bruger kun husets farver.
         Computer fra 1000: teksten til venstre, billedet til hoejre.
         Anbefalingen staar paa et moerkegroent baand i hele bredden, og
         nummerpladefeltet gloeder fem gange, naar det kommer frem.
   HVORFOR: Henrik 3/10: »fodboldbane, hvor graesset har en forkert farve
         ... der skal noget mere samling over det« og »kig ekstra paa
         nummerpladefeltet ... lidt ekstra blikfang«. Maalt: 14 baggrunde,
         10 tekstfarver, 9 hjoerner paa een side.
   HVEM: Henrik (»ja goer det«). Udkastet ligger i Henriks mappe under
         Claude outputs/kommuneside-opbygning-3oktober2026.
   Motoren, elektriker-blokken og guidekortene er ikke roert.
   Ingen tvangsregler. Kun husets farver.
   Sikkerhedskopi: uploads/kontrol-3oktober-2026/foer/
   ============================================================ */
.ko-fl__t, .ko-eb__kort, .ko-pl__k, .ko-bb, .ko-sml-kasse,
.ko-wrap .ko-an__kort > li, .ko-lk.ko-lk--tlf, .ko-nabo, .ko-wrap details{
  background:#fff; border:1px solid #CFE6DC; border-radius:14px;
  box-shadow:0 1px 3px rgba(11,115,82,.08),0 10px 28px rgba(11,115,82,.16); }
html body.bilo-rute-kommune .ko-wrap ul.ko-an__kort > li{ border:1px solid #CFE6DC; box-shadow:0 1px 3px rgba(11,115,82,.08),0 10px 28px rgba(11,115,82,.16); }
.ko-pl__k.ko-pl__k--her{ background:#EAF6F0; border:2px solid #0B7352; }
.ko-fakta, .ko-fakta.ko-fakta--flad{ background:#EAF6F0; border:1px solid #CFE6DC; border-radius:14px; box-shadow:none; }
.ko-eb__s--foer i{ background:#AFC3BA; }
.ko-fl__ekstra, .ko-soejler__ialt, .ko-sml__n, .ko-sml__r--dk, .ko-eb__tal span, .ko-pl__n, .ko-pl__t,
.ko-sk__lille, .ko-sk__eks small, .ko-pl__biler em, .ko-eb__s span{ color:#4A5A55; }
.ko-sk__i--fos{ background:rgba(255,255,255,.55); }
.ko-sk__i--el{ background:#8FE3B8; }
.ko-sk__slider{ accent-color:#8FE3B8; }
.ko-sk__eks{ background:#EAF6F0; border:0; }
.ko-sk__eksi{ background:#0B7352; }
.ko-wrap .ko-blok h2{ margin:0 0 16px; }
.ko-wrap .ko-blok .ko-ingress{ margin:0 0 24px; }
.ko-wrap .ko-blok .ko-kilde, .ko-wrap .ko-blok .ko-note{ margin-top:16px; }

/* Anbefalingen: et groent baand i hele bredden */
.ko-wrap .ko-blok.ko-anbef{ border-image:linear-gradient(#0B7352 0 0) fill 0 / / 0 100vmax; margin-top:60px; padding-top:48px; padding-bottom:48px; }
html body.bilo-rute-kommune .ko-wrap .ko-blok.ko-anbef > h2{ color:#fff; }
html body.bilo-rute-kommune .ko-wrap .ko-blok.ko-anbef > p.ko-ingress{ color:rgba(255,255,255,.92); }
html body.bilo-rute-kommune .ko-wrap .ko-blok.ko-anbef > p.ko-note{ color:rgba(255,255,255,.88); }
.ko-anbef .motor__se-alle a{ color:#fff; }
.ko-wrap .ko-blok.ko-anbef .motor-trin{ box-shadow:0 10px 30px rgba(0,0,0,.25); border-color:transparent; }
@media (min-width:821px){ .ko-wrap .ko-blok.ko-anbef{ margin-top:96px; padding-top:64px; padding-bottom:64px; } }

/* Computer: teksten til venstre, billedet til hoejre */
@media (min-width:1000px){
  .ko-wrap .ko-blok.ko-eb, .ko-wrap .ko-blok.ko-pl, .ko-wrap .ko-blok.ko-an, .ko-wrap .ko-blok.ko-sk{
    display:grid; grid-template-columns:minmax(0,1fr) 520px; grid-template-rows:auto 1fr; column-gap:64px; align-items:start; }
  .ko-wrap .ko-blok.ko-eb > *, .ko-wrap .ko-blok.ko-pl > *, .ko-wrap .ko-blok.ko-an > *, .ko-wrap .ko-blok.ko-sk > *{ grid-column:2; }
  .ko-wrap .ko-blok.ko-eb > h2, .ko-wrap .ko-blok.ko-pl > h2, .ko-wrap .ko-blok.ko-an > h2, .ko-wrap .ko-blok.ko-sk > h2{ grid-column:1; grid-row:1; }
  .ko-wrap .ko-blok.ko-eb > .ko-ingress, .ko-wrap .ko-blok.ko-pl > .ko-ingress, .ko-wrap .ko-blok.ko-sk > .ko-ingress{ grid-column:1; grid-row:2; }
  .ko-wrap .ko-blok.ko-an{ grid-template-rows:auto auto 1fr; }
  .ko-wrap .ko-blok.ko-an > .ko-an__huse{ grid-column:1; grid-row:2; }
  .ko-wrap .ko-blok.ko-an > .ko-ingress{ grid-column:1; grid-row:3; }
  .ko-wrap .ko-eb__kort, .ko-wrap .ko-pl__to, .ko-wrap .ko-sk__boks{ grid-row:1 / 3; max-width:none; }
  .ko-wrap .ko-blok.ko-an > .ko-an__kort{ grid-row:1 / 4; max-width:none; }
  .ko-wrap .ko-blok.ko-lp-blok{ display:grid; grid-template-columns:minmax(0,1fr) 520px; column-gap:64px; align-items:start; }
  .ko-wrap .ko-blok.ko-lp-blok > *{ grid-column:1; }
  .ko-wrap .ko-blok.ko-lp-blok > .ko-lk{ grid-column:2; grid-row:1 / span 8; max-width:none; margin:0; }
}


/* ============================================================
   SKYDEREN: EN TING MAN HAR BRUG FOR, OG EN TING DER ER RART AT HAVE
   (3. oktober 2026, N389)
   ------------------------------------------------------------
   HVAD: under feltet »Det svarer til, på 1 år« staar »eller det samme
         som« og en ting, der er rart at have. »Paa 2 aar« og »Paa 3 aar«
         staar hver paa sin linje.
   HVORFOR: Henrik 3/10: den foerste ting er en must have, den anden en
         nice to have, ved alle (»præcis«).
   Ingen tvangsregler, ingen nye farver.
   ============================================================ */
html body.bilo-rute-kommune .ko-wrap .ko-sk__res .ko-sk__eller{ margin:8px 0 0; font-size:15px; line-height:1.5; text-align:left; }
html body.bilo-rute-kommune .ko-wrap .ko-sk__res .ko-sk__flere{ margin:24px 0 0; }

/* ============================================================
   SKYDEREN SOM ET BREDT FELT (3. oktober 2026, N394)
   ------------------------------------------------------------
   HVAD: 1 aar staar fremhaevet uden kasse under en tynd streg fra start.
         2 og 3 aar staar i hver sin lille kasse og glider frem, foerst
         naar man har trukket i skyderen og sluppet den. Computer fra
         1000: hele afsnittet er eet bredt moerkegroent felt med tekst,
         valg, skyder og bjaelker til venstre og resultatet til hoejre.
   HVORFOR: Henrik 3/10: skyderen var hoej og alene til hoejre, og
         teksten stod alene til venstre (»ja saadan goer vi«).
   Ingen tvangsregler, ingen nye farver. Erstatter de to linjer for
   2 og 3 aar i blokken N389 lige ovenfor.
   ============================================================ */
html body.bilo-rute-kommune .ko-wrap .ko-sk__res > .ko-sk__eks{ display:block; background:none; margin:20px 0 0; padding:20px 0 0; border-top:1px solid #CFE6DC; border-radius:0; text-align:center; }
html body.bilo-rute-kommune .ko-wrap .ko-sk__res > .ko-sk__eks[hidden]{ display:none; }
.ko-sk__res > .ko-sk__eks .ko-sk__eksi{ display:none; }
html body.bilo-rute-kommune .ko-wrap .ko-sk__res > .ko-sk__eks small{ font-size:15px; color:#4A5A55; }
html body.bilo-rute-kommune .ko-wrap .ko-sk__res > .ko-sk__eks b{ font-size:24px; line-height:1.25; color:#0B7352; margin-top:4px; }
html body.bilo-rute-kommune .ko-wrap .ko-sk__res > .ko-sk__eller{ text-align:center; margin:6px 0 0; }
html body.bilo-rute-kommune .ko-wrap .ko-sk__res .ko-sk__flere{ margin:16px 0 0; transition:opacity .4s ease, transform .4s ease; }
.ko-sk__flere.ko-sk__ind{ opacity:0; transform:translateY(8px); }
.ko-sk__aar + .ko-sk__aar{ margin-top:16px; }
html body.bilo-rute-kommune .ko-wrap .ko-sk__flere .ko-sk__eks{ margin:0; }
html body.bilo-rute-kommune .ko-wrap .ko-sk__flere .ko-sk__eks b{ color:#1A1A1A; }
@media (prefers-reduced-motion:reduce){
  html body.bilo-rute-kommune .ko-wrap .ko-sk__res .ko-sk__flere{ transition:none; }
}
@media (min-width:1000px){
  html body.bilo-rute-kommune .ko-wrap .ko-blok.ko-sk{ display:grid; grid-template-columns:minmax(0,1fr) 460px; grid-template-rows:auto auto auto auto auto auto 1fr; column-gap:48px; row-gap:0; align-items:start; background:#0B7352; color:#fff; border-radius:14px; padding:40px; margin-top:96px; }
  html body.bilo-rute-kommune .ko-wrap .ko-blok.ko-sk > h2{ grid-column:1; grid-row:1; color:#fff; }
  html body.bilo-rute-kommune .ko-wrap .ko-blok.ko-sk > p.ko-ingress{ grid-column:1; grid-row:2; color:#fff; margin:0 0 24px; }
  html body.bilo-rute-kommune .ko-wrap .ko-blok.ko-sk .ko-sk__boks{ display:contents; }
  .ko-sk .ko-sk__valg{ grid-column:1; grid-row:3; }
  .ko-sk .ko-sk__km{ grid-column:1; grid-row:4; margin-top:24px; }
  .ko-sk .ko-sk__slider{ grid-column:1; grid-row:5; }
  .ko-sk .ko-sk__bj{ grid-column:1; grid-row:6; }
  html body.bilo-rute-kommune .ko-wrap .ko-blok.ko-sk .ko-sk__note{ grid-column:1; grid-row:7; margin-top:24px; }
  html body.bilo-rute-kommune .ko-wrap .ko-blok.ko-sk .ko-sk__res{ grid-column:2; grid-row:1 / span 7; margin:0; }
}

/* ============================================================
   MAANEDENS BILLEDE (3. oktober 2026, N395)
   ------------------------------------------------------------
   HVAD: et billede med en bil eller en elbil, der lader, ved
         »sammenlignet med hele landet«. Siden skifter selv billede
         den 1. i hver maaned (12 billeder fra Unsplash).
         Telefon: under kortet. Computer fra 1000: til hoejre for
         kortet, lige saa hoejt som kortet.
   HVORFOR: Henrik 3/10: meget luft paa computer, og siden manglede
         et billede, der bryder tekst og tal.
   Ingen tvangsregler, ingen nye farver.
   ============================================================ */
.ko-mb{ margin:24px 0 0; }
.ko-mb img{ display:block; width:100%; height:auto; aspect-ratio:3 / 2; object-fit:cover; border-radius:14px; }
@media (min-width:1000px){
  html body.bilo-rute-kommune .ko-wrap .ko-blok.ko-sml-blok{ display:grid; grid-template-columns:minmax(0,1fr) 400px; column-gap:32px; align-items:stretch; }
  .ko-sml-blok > h2{ grid-column:1 / -1; }
  .ko-sml-blok > .ko-sml-kasse{ grid-column:1; }
  html body.bilo-rute-kommune .ko-wrap .ko-sml-blok > .ko-mb{ grid-column:2; margin:0; position:relative; min-height:240px; }
  .ko-sml-blok > .ko-mb img{ position:absolute; inset:0; height:100%; aspect-ratio:auto; }
}

/* ============================================================
   KOMMUNESIDEN: HVIDE KORT PAA GROEN BUND (3. oktober 2026, N396)
   ------------------------------------------------------------
   HVAD: hele kommunesiden har toppens groenne farve (#0B7352) som
         baggrund. Hvert afsnit er et hvidt kort (hjoerne 14, bloed
         skygge), 24 mellem kortene (telefon 16), een spalte paa 1.000
         paa computer. Talkortene oeverst staar direkte paa bunden.
         Skyderen og anbefalingen staar i en moerkere groen (#08573E).
         Kortene inde i afsnittene har ingen skygge.
   HVORFOR: Henrik 3/10: »siden er alt for tam«. Maalt mod
         internetpriser.dk: hvide kort paa hvid bund flyder sammen, og
         96 luft over hvert afsnit gjorde siden tom. Henrik saa
         udkastet: »ja for fanden, det giver en forskel«.
   Kun paa kommunesiderne (body.bilo-rute-kommune). Ingen tvangsregler.
   Sikkerhedskopi: uploads/kontrol-3oktober-2026/foer/
   ============================================================ */
html body.bilo-rute-kommune{ background:#0B7352; }
html body.bilo-rute-kommune main{ background:#0B7352; }
html body.bilo-rute-kommune .ko-hero{ padding-bottom:8px; }
html body.bilo-rute-kommune .ko-wrap{ max-width:1000px; margin:0 auto; padding:16px 16px 48px; background:none; }
html body.bilo-rute-kommune .ko-wrap .ko-blok{ background:#fff; border-radius:14px; padding:32px; margin:24px 0 0; box-shadow:0 10px 28px rgba(0,0,0,.18); }
html body.bilo-rute-kommune .ko-wrap .ko-blok.ko-fl-blok{ background:none; box-shadow:none; padding:0; margin-top:8px; }
html body.bilo-rute-kommune .ko-wrap .ko-fl-blok .ko-note,
html body.bilo-rute-kommune .ko-wrap .ko-fl-blok .ko-kilde{ color:rgba(255,255,255,.85); }
html body.bilo-rute-kommune .ko-wrap .ko-blok .ko-eb__kort,
html body.bilo-rute-kommune .ko-wrap .ko-blok .ko-pl__k,
html body.bilo-rute-kommune .ko-wrap .ko-blok .ko-bb,
html body.bilo-rute-kommune .ko-wrap .ko-blok .ko-sml-kasse,
html body.bilo-rute-kommune .ko-wrap .ko-blok .ko-an__kort > li,
html body.bilo-rute-kommune .ko-wrap .ko-blok .ko-lk,
html body.bilo-rute-kommune .ko-wrap .ko-blok .ko-nabo{ box-shadow:none; }
html body.bilo-rute-kommune .ko-wrap .ko-blok.ko-sk{ background:#08573E; box-shadow:0 10px 28px rgba(0,0,0,.22); }
html body.bilo-rute-kommune .ko-wrap .ko-blok.ko-anbef{ background:#08573E; border-image:none; padding:32px; border-radius:14px; }
@media (min-width:1000px){
  html body.bilo-rute-kommune .ko-wrap .ko-blok.ko-sk{ margin-top:24px; padding:32px; grid-template-columns:minmax(0,1fr) 420px; column-gap:32px; }
  html body.bilo-rute-kommune .ko-wrap .ko-blok.ko-eb,
  html body.bilo-rute-kommune .ko-wrap .ko-blok.ko-pl,
  html body.bilo-rute-kommune .ko-wrap .ko-blok.ko-an,
  html body.bilo-rute-kommune .ko-wrap .ko-blok.ko-lp-blok{ grid-template-columns:minmax(0,1fr) 440px; column-gap:32px; }
  html body.bilo-rute-kommune .ko-wrap .ko-blok.ko-sml-blok{ grid-template-columns:minmax(0,1fr) 340px; }
}
@media (max-width:820px){
  html body.bilo-rute-kommune .ko-wrap{ padding:8px 12px 32px; }
  html body.bilo-rute-kommune .ko-wrap .ko-blok{ padding:20px 16px; margin-top:16px; }
  html body.bilo-rute-kommune .ko-wrap .ko-blok.ko-fl-blok{ padding:0; }
  html body.bilo-rute-kommune .ko-wrap .ko-blok.ko-anbef{ padding:24px 16px; }
}

/* ============================================================
   TOPMENUEN: LADEBOKSE UDEN LISTE (3. oktober 2026 aften)
   ------------------------------------------------------------
   HVAD: paa computer aabner Ladebokse i menuen ikke laengere en
         liste; et klik gaar til Alle ladebokse, som Guides (28/9).
   HVORFOR: Henrik 3/10: det var den eneste menu med en liste, og
         Alle, Koeb og Leje staar i forvejen oeverst paa forsiden og
         Alle ladebokse. De tre links staar stadig i sidefoden.
   Telefonen er uaendret. Ingen tvangsregler.
   Sikkerhedskopi: uploads/kontrol-3oktober-2026/foer/
   ============================================================ */
@media (min-width:821px){
  .nav-menu > li:has(> a[href$="/ladeboks/"]) > ul.sub-menu{ display:none; }
  .nav-menu > li:has(> a[href$="/ladeboks/"]) > a::after{ display:none; }
}


/* ============================================================
   TOPPEN: ET ENS UDTRYK, MELLEMVEJEN (3. oktober 2026 aften, N401)
   ------------------------------------------------------------
   HVAD: toppen paa forsiden, kommunesiderne og kommuneoversigten,
         Prisindeks, udbyderoversigten, udbydernes egne sider og
         guidesoversigten har samme udtryk: udbyderoversigtens to
         bloede lysskaer og svage struktur, og en overgang fra moerk
         (#123C30, #0C2C23 ved 35 %) til husets groenne #0B7352
         forneden. Paa groen bund glider toppen over i bunden.
   HVORFOR: Henrik 3/10: toppen var forskellig paa fem maader. Han
         saa A, B og mellemvejen paa de rigtige sider og valgte:
         »vi tager helt sikker mellemvejen den er flot«.
   IKKE MED: Ladeagenten (Henriks godkendte top), Skift til elbil og
         siderne med lys top. Menulinjen er uaendret.
   Ingen tvangsregler. Sikkerhedskopi: uploads/kontrol-3oktober-2026/foer/
   ============================================================ */
html body :is(header.fh, .ko-hero, .uo-hero, .uu-hero, .gd-hero){
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.0225'/%3E%3C/svg%3E"),
    radial-gradient(760px 380px at 12% -8%, rgba(62,166,110,.3), rgba(0,0,0,0) 62%),
    radial-gradient(620px 340px at 88% 8%, rgba(143,214,174,.15), rgba(0,0,0,0) 60%),
    linear-gradient(#123C30 0%, #0C2C23 35%, #0B7352 100%);
}
html body .uo-hero::before, html body .uo-hero::after{ background:none; }

/* ============================================================
   UDBYDEROVERSIGTEN: DE TRE SMAA ORD UNDER TALLENE (3. oktober 2026 aften, N402)
   HVAD: »Udbydere«, »Paa markedet« og »Historik« faar samme lyse farve som de andre
         smaa tekster i toppen (#C6DED3 i stedet for #8FB5A5).
   HVORFOR: i den nye top maalte de 3,92 mod kravet 4,5. Henrik: »ja«.
   Ingen tvangsregler. Sikkerhedskopi: uploads/kontrol-3oktober-2026/foer/
   ============================================================ */
html body .uo-hero .uo-tal small{ color:#C6DED3; }


/* ============================================================
   FORSIDEN: LYS GROEN BUND OG HVIDE KORT (3. oktober 2026 aften, N397)
   ------------------------------------------------------------
   HVAD: forsidens bund er #DCEEE5 (to skridt moerkere end husets
         lyse groenne, ny nuance godkendt af Henrik). Hvert afsnit er
         et hvidt kort med guidekortenes udseende (mintgroen kant,
         hjoerne 14, groen skygge), 24 mellem kortene (telefon 16).
         Filterbjaelken og listen staar direkte paa bunden i 1.120.
         »Prisfald og tilbud« faar samme kant og hjoerne som de andre.
         Ladeagenten og »Klar til at finde din ladeboks?« staar som de
         moerke kort, de er. »Det ved vi om dig:« er husets groenne.
   HVORFOR: Henriks farveplan 3/10: forsiden lys, men med kontrast.
         Han saa tre nuancer i udkastet og valgte to skridt moerkere
         (»vi vil jo gerne have noget kontrast«) og den groenne
         tekst (»ja goer det«). Maalt: alle tekster paa bunden over 4,5.
   Kun forsiden (body.home). Ingen tvangsregler.
   Sikkerhedskopi: uploads/kontrol-3oktober-2026/foer/
   ============================================================ */
html body.home{ background:#DCEEE5; }
html body.home main{ background:#DCEEE5; }
html body.home main section.blk{ background:none; padding:12px 0; }
html body.home main section.blk:first-of-type{ padding-top:24px; }
html body.home main section.blk:last-of-type{ padding-bottom:48px; }
html body.home main section.blk > .wrap{ background:#fff; border:1px solid #CFE6DC; border-radius:14px; padding:32px; box-shadow:0 1px 3px rgba(11,115,82,.08), 0 10px 28px rgba(11,115,82,.16); box-sizing:border-box; }
html body.home main section#ladebokse.blk{ padding:12px 0; }
html body.home main section#ladebokse > .wrap{ background:none; border:0; box-shadow:none; padding:0; }
html body.home main #ladebokse .fsb__over{ background:#DCEEE5; }
html body.home main section.blk > .wrap:has(> .fstop),
html body.home main section.blk > .wrap:has(> .prisagent),
html body.home main section.blk > .wrap:has(> .bottomcta){ background:none; border:0; box-shadow:none; padding:0; }
html body.home main .fstop{ border:1px solid #CFE6DC; border-radius:14px; box-shadow:0 1px 3px rgba(11,115,82,.08), 0 10px 28px rgba(11,115,82,.16); }
html body.home main .prisagent, html body.home main .bottomcta{ box-shadow:0 10px 28px rgba(11,115,82,.22); }
html body.home .fh-bro__lbl{ color:#0B7352; }
@media (max-width:820px){
  html body.home main section.blk{ padding:8px 0; }
  html body.home main section.blk > .wrap{ padding:20px 16px; margin:0 12px; width:auto; }
  html body.home main section#ladebokse.blk{ padding:8px 0; }
  html body.home main section#ladebokse > .wrap{ margin:0; padding:0 16px; }
}

/* ============================================================
   FORSIDEN: BILLEDER PAA »GUIDES OG VAERKTOEJER« (3. oktober 2026 aften)
   HVAD: de fire kort viser guidens eget kortbillede (hjemmeladning,
         ladeabonnement) og skaermbilledet af vaerktoejet (Find din
         ladeboks, Ladeagenten) i stedet for et lille tegn.
   HVORFOR: Henrik 3/10: kortene nederst paa forsiden manglede billeder.
         Billederne er dem, der allerede er godkendt (guidekort 1/10,
         skaermbilleder af vaerktoejerne 1/10). Ingen tekst er aendret.
   Ingen tvangsregler. Sikkerhedskopi: uploads/kontrol-3oktober-2026/foer/
   ============================================================ */
html body.home .gcard__media img{ display:block; width:100%; height:100%; object-fit:cover; }

/* ============================================================
   ALLE LADEBOKSE: LYS GROEN BUND OG TRE HVIDE KASSER (N397)
   Hvad: samme lyse groenne bund som forsiden (#DCEEE5). Den lange
   tekst under produktkortene deles i tre hvide kasser ved sine egne
   overskrifter (delingen sker i archive-ladeboks.php), og
   »Relaterede« faar samme hvide kasse. Teksten under overskriften
   og den lille graa saetning til sidst faar graa #5B6B65 (4,66 paa
   bunden, 5,62 paa hvid; foer 3,69 og 4,45). Ingen ord aendret.
   Hvem: Henriks valg 3. oktober 2026 efter udkast paa siden.
   Backup: uploads/kontrol-3oktober-2026/foer/style-foer-ladebokse-3oktober.css
   ============================================================ */
html body.post-type-archive-ladeboks{ background:#DCEEE5; }
html body.post-type-archive-ladeboks main{ background:#DCEEE5; padding-bottom:48px; }
html body.post-type-archive-ladeboks .fsb__over{ background:#DCEEE5; }
html body.post-type-archive-ladeboks .archive-header{ --color-text-muted:#5B6B65; } /* teksten har sin farve skrevet direkte paa, via denne variabel */
html body.post-type-archive-ladeboks .ladeboks-guide{ --color-text-muted:#5B6B65; }
html body.post-type-archive-ladeboks .ladeboks-guide.container{ background:none; border:0; box-shadow:none; padding:0; margin-top:24px; margin-bottom:0; box-sizing:border-box; }
html body.post-type-archive-ladeboks .ladeboks-guide .lg-kasse,
html body.post-type-archive-ladeboks .hjornesten__relaterede.container{ background:#fff; border:1px solid #CFE6DC; border-radius:14px; padding:32px; box-shadow:0 1px 3px rgba(11,115,82,.08), 0 10px 28px rgba(11,115,82,.16); box-sizing:border-box; margin-bottom:16px; }
html body.post-type-archive-ladeboks .hjornesten__relaterede.container{ margin-top:24px; }
html body.post-type-archive-ladeboks .lg-kasse > :first-child{ margin-top:0; }
@media (max-width:820px){
  html body.post-type-archive-ladeboks .ladeboks-guide.container,
  html body.post-type-archive-ladeboks .hjornesten__relaterede.container{ margin-left:12px; margin-right:12px; width:auto; }
  html body.post-type-archive-ladeboks .ladeboks-guide .lg-kasse,
  html body.post-type-archive-ladeboks .hjornesten__relaterede.container{ padding:20px 16px; }
}

/* ============================================================
   PRODUKTKORT OG SOEGEBJAELKE: GROEN KANT OG SKYGGE (N397)
   Hvad: produktkortene og soegebjaelken paa forsiden og Alle ladebokse
   faar samme groenne kant (#CFE6DC) og groenne skygge som de hvide
   kort og tekstkasser, saa alle hvide flader ligner hinanden. Foer:
   graa kant #E6EAE7 og svag graa skygge. Hjoernerne er uaendrede
   (kortene 20, soegebjaelken 18), det er deres godkendte udseende.
   Hvem: Henrik 3. oktober 2026 (»proev bare det du anbefaler«).
   Backup: uploads/kontrol-3oktober-2026/foer/style-foer-kantskygge-3oktober.css
   ============================================================ */
html :is(body.home, body.post-type-archive-ladeboks) .npk,
html :is(body.home, body.post-type-archive-ladeboks) .fsb{ border:1px solid #B9DCCB; box-shadow:0 2px 6px rgba(11,115,82,.10), 0 14px 34px rgba(11,115,82,.22); }
/* Kraftigere skygge (Henrik 3/10: »vi tager den kraftigere skygge«): kant #B9DCCB og skygge 0 2px 6px 10 % + 0 14px 34px 22 %. Foer: #CFE6DC og 8 % + 16 %. Backup: foer/style-foer-kraftigskygge-3oktober.css */

/* ============================================================
   UDBYDERNES EGNE SIDER: LYS GROEN BUND OG HVIDE KASSER (N397)
   Hvad: samme greb som forsiden og Alle ladebokse. Bund #DCEEE5.
   Tekstafsnittene (Hvem passer, Om udbyderen, Ofte stillede
   spoergsmaal, Guides) og faktaboksen oeverst bliver hvide kasser med
   groen kant #CFE6DC og groen skygge. Afsnittet med produktkort,
   nummerplade-boksen, »Se en anden udbyders ladebokse« og den moerke
   boks til sidst staar direkte paa bunden som foer. Produktkortene
   faar den kraftigere skygge (kant #B9DCCB). Ingen tekst aendret.
   Siderne kendes paa deres top (uu-hero), da de ikke har egen klasse.
   Hvem: Henrik 3. oktober 2026 (»den er fin« til udkastet med hvid
   faktaboks).
   Backup: uploads/kontrol-3oktober-2026/foer/style-foer-udbydere-3oktober.css
   ============================================================ */
html body:has(main > section.uu-hero){ background:#DCEEE5; }
html body:has(main > section.uu-hero) main{ background:#DCEEE5; padding-bottom:48px; }
html body:has(main > section.uu-hero) .udb-wrap > .uu-sec,
html body:has(main > section.uu-hero) .udb-wrap > .uu-qf{ margin-top:24px; padding:32px; background:#fff; border:1px solid #CFE6DC; border-radius:14px; box-shadow:0 1px 3px rgba(11,115,82,.08), 0 10px 28px rgba(11,115,82,.16); box-sizing:border-box; }
html body:has(main > section.uu-hero) .udb-wrap > .uu-qf{ padding:24px; }
html body:has(main > section.uu-hero) .udb-wrap > .uu-sec:is(#uu-bokse, :has(> .np-motor), :has(> .uu-wheel), :has(> .uu-end)){ background:none; border:0; box-shadow:none; padding:0; }
html body:has(main > section.uu-hero) .udb-wrap > .uu-sec > :first-child{ margin-top:0; }
html body:has(main > section.uu-hero) .udb-wrap > .uu-sec.uu-om{ max-width:none; } /* »Om …«-kassen var 720 bred og stod skaevt til venstre (Henrik 4/10). Kassen fylder nu bredden; teksten beholder sin laesebredde. */
@media (min-width:821px){ html body:has(main > section.uu-hero) .udb-wrap > .uu-sec.uu-om{ column-count:2; column-gap:48px; } html body:has(main > section.uu-hero) .udb-wrap > .uu-sec.uu-om > h2{ column-span:all; } html body:has(main > section.uu-hero) .udb-wrap > .uu-sec.uu-om > *{ max-width:none; break-inside:avoid; } } /* »Om …« i to spalter paa computer (Henrik 4/10: »er 2 spalter ikke paenest«). Telefon: én spalte. Backup: foer/style-foer-om-spalter-4oktober.css */
html body:has(main > section.uu-hero) .npk{ border:1px solid #B9DCCB; box-shadow:0 2px 6px rgba(11,115,82,.10), 0 14px 34px rgba(11,115,82,.22); }
@media (max-width:820px){
  html body:has(main > section.uu-hero) .udb-wrap > .uu-sec{ padding:20px 16px; margin-top:16px; }
  html body:has(main > section.uu-hero) .udb-wrap > .uu-sec:is(#uu-bokse, :has(> .np-motor), :has(> .uu-wheel), :has(> .uu-end)){ padding:0; }
}

/* ============================================================
   UDBYDERSIDERNE: FIRE TRIN MED TEGN I NUMMERPLADE-BOKSEN (N409)
   Hvad: den loebende bjaelke og BIL/ADRESSE/BOLIG/SVAR er skiftet ud
   med motorens egne fire trin (Find din bil, Koersel og pris, Din
   bolig, Din anbefaling), hver med et lille tegn i en rund cirkel,
   bundet sammen af en tynd linje. Trin 1 fremhaevet. Intet bevaeger
   sig. Hvid tekst (de gamle lyse ord maalte ned til 2,91).
   Hvem: Henrik 4. oktober 2026 (»yep den laver vi«) efter udkast.
   Backup: uploads/kontrol-3oktober-2026/foer/style-foer-trin-4oktober.css
   ============================================================ */
.np-motor .np-trin{ list-style:none; margin:24px 0 0; padding:0; display:grid; grid-template-columns:repeat(4,1fr); gap:8px; max-width:480px; position:relative; }
.np-motor .np-trin::before{ content:""; position:absolute; left:12.5%; right:12.5%; top:21px; height:2px; background:rgba(255,255,255,.28); }
.np-motor .np-trin__t{ position:relative; display:flex; flex-direction:column; align-items:center; text-align:center; gap:4px; margin:0; padding:0; }
.np-motor .np-trin__ikon{ width:44px; height:44px; border-radius:50%; display:grid; place-items:center; background:#24584A; border:1px solid rgba(255,255,255,.3); color:#fff; margin-bottom:4px; box-sizing:border-box; }
.np-motor .np-trin__t--nu .np-trin__ikon{ background:#8FD6AE; border-color:#8FD6AE; color:#0C2C23; box-shadow:0 0 0 4px rgba(143,214,174,.25); }
.np-motor .np-trin__nr{ font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:#fff; opacity:.9; }
.np-motor .np-trin__navn{ font-size:13px; font-weight:600; line-height:1.25; color:#fff; }
@media (max-width:420px){ .np-motor .np-trin__navn{ font-size:12px; } .np-motor .np-trin__ikon{ width:40px; height:40px; } .np-motor .np-trin::before{ top:19px; } }

/* ============================================================
   GUIDESIDERNE: LYS GROEN BUND OG HVID KASSE (N397)
   Hvad: de 15 guides, der bruger guide-skabelonen (Hjemmeladning,
   Ladeabonnement, Installation, Daek, Installatoerer m.fl.), faar
   bund #DCEEE5. Toppen staar direkte paa bunden (den lyse stribe er
   vaek). Selve guiden staar i een hvid kasse med groen kant #CFE6DC
   og groen skygge; »Se ogsaa« faar sin egen hvide kasse. Den graa
   tekst under overskriften faar #5B6B65 (4,66 paa bunden; foer #6B7B76,
   3,69 paa bunden og 4,01 paa den gamle stribe). Ingen ord aendret.
   Ikke med: de korte svarsider (fx Leje eller koeb) og Vores tre
   vaerktoejer, som har andre skabeloner.
   Hvem: Henrik 4. oktober 2026 (»den er godkendt«) efter udkast.
   Backup: uploads/kontrol-3oktober-2026/foer/style-foer-guides-4oktober.css
   ============================================================ */
html body.page-template-page-hjornesten{ background:#DCEEE5; }
html body.page-template-page-hjornesten main{ background:#DCEEE5; }
html body.page-template-page-hjornesten .hjornesten{ padding-bottom:48px; }
html body.page-template-page-hjornesten .hjornesten__hero{ background:none; --color-text-muted:#5B6B65; }
html body.page-template-page-hjornesten .hjornesten__hero p{ color:#5B6B65; }
html body.page-template-page-hjornesten .hjornesten__indhold.container{ background:#fff; border:1px solid #CFE6DC; border-radius:14px; box-shadow:0 1px 3px rgba(11,115,82,.08), 0 10px 28px rgba(11,115,82,.16); padding:40px; max-width:848px; box-sizing:border-box; margin-top:8px; }
html body.page-template-page-hjornesten .hjornesten__relaterede.container{ background:#fff; border:1px solid #CFE6DC; border-radius:14px; box-shadow:0 1px 3px rgba(11,115,82,.08), 0 10px 28px rgba(11,115,82,.16); padding:28px 32px; max-width:848px; box-sizing:border-box; margin-top:24px; }
@media (max-width:820px){
  html body.page-template-page-hjornesten .hjornesten__indhold.container,
  html body.page-template-page-hjornesten .hjornesten__relaterede.container{ padding:24px 16px; margin-left:12px; margin-right:12px; width:auto; }
}

/* ============================================================
   »BLIV KLOG PÅ« OG DE FIRE SVARSIDER PAA GROEN BUND (N412)
   Hvad: paa guidesoversigten staar de fire korte svarsider i
   deres egen gruppe »Bliv klog på« paa en moerkegroen flade
   (samme groenne som toppen) under »Start her«. Selve svarsiderne
   faar groen bund #0B7352 som kommunesiderne; deres kort faar
   kommunekortenes udseende (ingen kant, hjoerne 14, skygge), og
   den loese tekst ligger i hvide kort (sv-tekstkort, se
   svarside.php). Ingen ord og ingen adresser aendret.
   Hvem: Henrik 4. oktober 2026 (»rigtig fin«) efter udkast.
   Backup: uploads/kontrol-3oktober-2026/foer/style-foer-klog-4oktober.css
   ============================================================ */
.gd-klog{ margin:40px 0 8px; padding:28px; border-radius:14px; color:#fff; background:radial-gradient(760px 380px at 12% -8%, rgba(62,166,110,.3), rgba(0,0,0,0) 62%), linear-gradient(#123C30 0%, #0C2C23 35%, #0B7352 100%); box-shadow:0 10px 28px rgba(0,0,0,.18); }
.gd-klog .gd-h2{ color:#fff; margin-top:0; }
.gd-klog__grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.gd-klog .gd-card{ background:#fff; }
@media (max-width:820px){ .gd-klog{ padding:20px 16px; } .gd-klog__grid{ grid-template-columns:1fr 1fr; gap:12px; } }
@media (max-width:420px){ .gd-klog__grid{ grid-template-columns:1fr; } }
html body.bilo-rute-svarside{ background:#0B7352; }
html body.bilo-rute-svarside main{ background:#0B7352; padding-bottom:48px; }
html body.bilo-rute-svarside .sv-svar,
html body.bilo-rute-svarside .sv-tabelramme,
html body.bilo-rute-svarside .sv-agent,
html body.bilo-rute-svarside .sv-to > *{ border:0; border-radius:14px; box-shadow:0 10px 28px rgba(0,0,0,.18); }
html body.bilo-rute-svarside .sv-tekstkort{ background:#fff; border-radius:14px; box-shadow:0 10px 28px rgba(0,0,0,.18); padding:24px 28px; margin:16px 0; }
html body.bilo-rute-svarside .sv-tekstkort > :first-child{ margin-top:0; }
html body.bilo-rute-svarside .sv-tekstkort > :last-child{ margin-bottom:0; }
@media (max-width:820px){ html body.bilo-rute-svarside .sv-tekstkort{ padding:18px 16px; } }



/* ============================================================
   DE GROENNE SIDER: MOERK TOP OG MOERK SIDEFOD SOM RAMME (4. oktober 2026, N414)
   ------------------------------------------------------------
   HVAD: paa de fire korte svarsider er menulinjen uaendret (husets
         groenne), toppen forbliver moerk helt ned (mellemvejen, men slutter i
         #0C2C23 i stedet for at glide over i #0B7352), og sidefoden er
         moerkegroen #0C2C23. Siden staar som et groent felt mellem en
         moerk top og en moerk bund.
   HVORFOR: Henrik 4/10: toppen, siden og sidefoden var samme groenne
         farve og flod sammen. Han saa fire udgaver paa Leje eller koeb
         og valgte »Moerk top og bund« med den almindelige menulinje
         (rettet samme dag; foerst bygget med moerk menulinje ved en
         misforstaaelse). Maalt: sidefodens tekst
         11,43 og 15,00 paa #0C2C23.
   HVOR: kun body.bilo-rute-svarside. De lyse sider er uroerte. De
         oevrige groenne sider faar det samme, naar de bygges (N397).
   Ingen tvangsregler. Sikkerhedskopi: uploads/kontrol-3oktober-2026/foer/
   ============================================================ */
html body.bilo-rute-svarside .ko-hero{
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.0225'/%3E%3C/svg%3E"),
    radial-gradient(760px 380px at 12% -8%, rgba(62,166,110,.3), rgba(0,0,0,0) 62%),
    radial-gradient(620px 340px at 88% 8%, rgba(143,214,174,.15), rgba(0,0,0,0) 60%),
    linear-gradient(#123C30 0%, #0C2C23 35%, #0C2C23 100%);
}
html body.bilo-rute-svarside footer.site-footer{ background:#0C2C23; }



/* ============================================================
   UDBYDEROVERSIGTEN PAA GROEN BUND MED MOERK RAMME (4. oktober 2026, N397)
   ------------------------------------------------------------
   HVAD: bund #0B7352 som svarsiderne. Toppen forbliver moerk og
         slutter i #0C2C23, sidefoden #0C2C23, menulinjen uaendret.
         Udbyderkortene hvide uden tynd kant, med skyggen
         0 10px 28px rgba(0,0,0,.18). Overskriften over kortene hvid
         (5,85), teksten under #DCEEE5 (4,85). Filterbjaelken helt
         hvid. Boksen »Tidligere udbydere« hvid i stedet for lys gul.
         Den moerke vejviser nederst er uaendret.
   HVORFOR: Henriks farveplan; samme ramme som svarsiderne (N414).
         Henrik saa udkastet »Groen bund« og sagde »ja«.
   Kun body.bilo-rute-udbydere. Ingen tvangsregler.
   Sikkerhedskopi: uploads/kontrol-3oktober-2026/foer/
   ============================================================ */
html body.bilo-rute-udbydere{ background:#0B7352; }
html body.bilo-rute-udbydere main{ background:#0B7352; }
html body.bilo-rute-udbydere .uo-hero{
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.0225'/%3E%3C/svg%3E"),
    radial-gradient(760px 380px at 12% -8%, rgba(62,166,110,.3), rgba(0,0,0,0) 62%),
    radial-gradient(620px 340px at 88% 8%, rgba(143,214,174,.15), rgba(0,0,0,0) 60%),
    linear-gradient(#123C30 0%, #0C2C23 35%, #0C2C23 100%);
}
html body.bilo-rute-udbydere footer.site-footer{ background:#0C2C23; }
html body.bilo-rute-udbydere .uo-bar{ background:#fff; border-color:#fff; }
html body.bilo-rute-udbydere .uo-sek__h h2{ color:#fff; }
html body.bilo-rute-udbydere .uo-sek__h p{ color:#DCEEE5; }
html body.bilo-rute-udbydere .uo-kort{ border:0; box-shadow:0 10px 28px rgba(0,0,0,.18); }
html body.bilo-rute-udbydere .uo-spring{ background:#fff; border:0; box-shadow:0 10px 28px rgba(0,0,0,.18); }



/* ============================================================
   KOMMUNERNE: GROEN BUND, MOERK RAMME OG KOMMUNEKORT MED OMRIDS (4. oktober 2026, N397)
   ------------------------------------------------------------
   HVAD: kommuneoversigten faar bund #0B7352 og samme ramme som de
         andre groenne sider: toppen forbliver moerk og slutter i
         #0C2C23, sidefoden #0C2C23, menulinjen uaendret. Hver region
         og de to afsnit nederst staar i en hvid kasse som paa
         kommunesiderne (hjoerne 14, 32 indeni, telefon 24/16).
         »Hop til«-bjaelken hvid. Kommunekortene faar produktkortenes
         groenne kant #B9DCCB og kraftige groenne skygge og kommunens
         omrids som et lille tegn (22 px) foran navnet.
         De 98 kommunesider havde allerede groen bund og faar kun
         rammen: moerk top og sidefod #0C2C23.
   HVORFOR: Henriks farveplan. Han saa udkastet og valgte
         »+ kant og omrids ved navnet« (assistentens raad).
   Ingen tvangsregler. Sikkerhedskopi: uploads/kontrol-3oktober-2026/foer/
   ============================================================ */
html body.bilo-rute-kommuner, html body.bilo-rute-kommuner main{ background:#0B7352; }
html body.bilo-rute-kommuner .ko-hero, html body.bilo-rute-kommune .ko-hero{
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.0225'/%3E%3C/svg%3E"),
    radial-gradient(760px 380px at 12% -8%, rgba(62,166,110,.3), rgba(0,0,0,0) 62%),
    radial-gradient(620px 340px at 88% 8%, rgba(143,214,174,.15), rgba(0,0,0,0) 60%),
    linear-gradient(#123C30 0%, #0C2C23 35%, #0C2C23 100%);
}
html body.bilo-rute-kommuner footer.site-footer, html body.bilo-rute-kommune footer.site-footer{ background:#0C2C23; }
html body.bilo-rute-kommuner .kov-hop{ background:#fff; border-bottom:0; }
html body.bilo-rute-kommuner .kov-wrap{ padding-bottom:48px; }
html body.bilo-rute-kommuner .kov-reg, html body.bilo-rute-kommuner .kov-wrap > .ko-blok{ background:#fff; border-radius:14px; padding:32px; margin-top:24px; box-shadow:0 10px 28px rgba(0,0,0,.18); }
html body.bilo-rute-kommuner .kov-k{ border:1px solid #B9DCCB; box-shadow:0 2px 6px rgba(11,115,82,.10), 0 14px 34px rgba(11,115,82,.22); }
html body.bilo-rute-kommuner .kov-k__h h3{ display:flex; align-items:center; }
html body.bilo-rute-kommuner .kov-k__form{ flex:none; width:22px; height:22px; margin-right:8px; }
html body.bilo-rute-kommuner .kov-k__form path{ fill:#CFE6DC; stroke:#0B7352; stroke-width:1.4; stroke-linejoin:round; vector-effect:non-scaling-stroke; }
@media (max-width:720px){
  html body.bilo-rute-kommuner .kov-reg, html body.bilo-rute-kommuner .kov-wrap > .ko-blok{ padding:24px 16px; margin-top:16px; }
}



/* ============================================================
   GUIDESOVERSIGTEN PAA GROEN BUND MED MOERK RAMME (4. oktober 2026, N397)
   ------------------------------------------------------------
   HVAD: bund #0B7352. Toppen forbliver moerk og slutter i #0C2C23,
         sidefoden #0C2C23, menulinjen uaendret. »Bliv klog på«
         beholder sit udseende, men slutter ogsaa i #0C2C23, saa den
         ikke flyder ud i bunden. Overskrifterne »Start her« og »Alle
         guides« hvide (5,85), antallet og »Ingen guides ...« #DCEEE5
         (4,85). Kortene, filterboksene og »Klar til at
         sammenligne?« uden tynd kant, med skyggen
         0 10px 28px rgba(0,0,0,.18).
   HVORFOR: Henriks farveplan. Han saa »Kortene direkte paa groent«
         og »Afsnittene i hvide kasser« og sagde »ja goer som du
         anbefaler« (kortene direkte paa groent: tre kort i bredden).
   Kun body.bilo-rute-guides. Ingen tvangsregler.
   Sikkerhedskopi: uploads/kontrol-3oktober-2026/foer/
   ============================================================ */
html body.bilo-rute-guides, html body.bilo-rute-guides main{ background:#0B7352; }
html body.bilo-rute-guides .gd-hero{
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.0225'/%3E%3C/svg%3E"),
    radial-gradient(760px 380px at 12% -8%, rgba(62,166,110,.3), rgba(0,0,0,0) 62%),
    radial-gradient(620px 340px at 88% 8%, rgba(143,214,174,.15), rgba(0,0,0,0) 60%),
    linear-gradient(#123C30 0%, #0C2C23 35%, #0C2C23 100%);
}
html body.bilo-rute-guides .gd-klog{ background:radial-gradient(760px 380px at 12% -8%, rgba(62,166,110,.3), rgba(0,0,0,0) 62%), linear-gradient(#123C30 0%, #0C2C23 35%, #0C2C23 100%); }
html body.bilo-rute-guides footer.site-footer{ background:#0C2C23; }
html body.bilo-rute-guides .gd-wrap{ padding-bottom:48px; }
html body.bilo-rute-guides .gd-pillars > .gd-h2, html body.bilo-rute-guides .gd-main__head .gd-h2{ color:#fff; }
html body.bilo-rute-guides .gd-main__head .gd-count, html body.bilo-rute-guides .gd-empty{ color:#DCEEE5; }
html body.bilo-rute-guides .gd-pillar, html body.bilo-rute-guides .gd-grid .gd-card, html body.bilo-rute-guides .gd-side__box, html body.bilo-rute-guides .gd-bottom{ border:0; box-shadow:0 10px 28px rgba(0,0,0,.18); }



/* ============================================================
   PRISINDEKS, LADEAGENTEN, SKIFT TIL ELBIL OG VORES TRE VAERKTOEJER
   PAA GROEN BUND MED MOERK RAMME (4. oktober 2026, N397 og N403)
   ------------------------------------------------------------
   HVAD: bund #0B7352 og samme ramme som de andre groenne sider:
         toppen er mellemvejen og slutter i #0C2C23, sidefoden
         #0C2C23, menulinjen uaendret. Ladeagenten, Skift til elbil og
         Vores tre vaerktoejer faar mellemvejens top i stedet for deres
         egen (Henrik: »begge have ny top som de andre«). Paa Skift til
         elbil og Vores tre vaerktoejer staar broedkrummen paa en moerk
         stribe i hele bredden (#123C30), saa den flyder sammen med
         toppen. Hvide kort, tabeller, paneler og spoergsmaal uden tynd
         kant, med skyggen 0 10px 28px rgba(0,0,0,.18). Overskrifter paa
         bunden hvide (5,85), smaa tekster paa bunden #DCEEE5 (4,85),
         broedkrummer #BFE8D3. Vores tre vaerktoejers tre lange afsnit
         staar i hvide kasser, 720 brede og midt paa siden. Den orange
         kant paa »Vores anbefaling« og »Find din ladeboks« bevares.
   HVORFOR: Henrik 4/10: »Lav nu paa en gang prisindeks, vores 3
         vaerktoejer, Ladeagenten og Skift til elbil i en og samme
         omgang, som du ville anbefale det«; han godkender alle fire
         bagefter.
   Siderne findes paa deres eget indhold (ikke sidenummer), saa det
   ogsaa virker, naar siderne flyttes. Ingen tvangsregler.
   Sikkerhedskopi: uploads/kontrol-3oktober-2026/foer/
   ============================================================ */
/* Prisindeks */
html body.bilo-rute-prisindeks, html body.bilo-rute-prisindeks main{ background:#0B7352; }
html body.bilo-rute-prisindeks .ko-hero{ background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.0225'/%3E%3C/svg%3E"),
    radial-gradient(760px 380px at 12% -8%, rgba(62,166,110,.3), rgba(0,0,0,0) 62%),
    radial-gradient(620px 340px at 88% 8%, rgba(143,214,174,.15), rgba(0,0,0,0) 60%),
    linear-gradient(#123C30 0%, #0C2C23 35%, #0C2C23 100%); }
html body.bilo-rute-prisindeks footer.site-footer{ background:#0C2C23; }
html body.bilo-rute-prisindeks .pi-wrap{ padding-bottom:48px; }
html body.bilo-rute-prisindeks .pi-afsnit > h2{ color:#fff; }
html body.bilo-rute-prisindeks .pi-tile, html body.bilo-rute-prisindeks .pi-tabelramme, html body.bilo-rute-prisindeks .pi-metode{ border:0; box-shadow:0 10px 28px rgba(0,0,0,.18); }
/* Ladeagenten */
html body:has(div.la > header.top), html body:has(div.la > header.top) main, html body:has(div.la > header.top) div.la:not(.sm-lag){ background:#0B7352; }
html body:has(div.la > header.top) div.la > header.top{ background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.0225'/%3E%3C/svg%3E"),
    radial-gradient(760px 380px at 12% -8%, rgba(62,166,110,.3), rgba(0,0,0,0) 62%),
    radial-gradient(620px 340px at 88% 8%, rgba(143,214,174,.15), rgba(0,0,0,0) 60%),
    linear-gradient(#123C30 0%, #0C2C23 35%, #0C2C23 100%); }
html body:has(div.la > header.top) footer.site-footer{ background:#0C2C23; }
html body:has(div.la > header.top) .card, html body:has(div.la > header.top) .trust, html body:has(div.la > header.top) .fq{ border:0; box-shadow:0 10px 28px rgba(0,0,0,.18); }
html body:has(div.la > header.top) .side__cap, html body:has(div.la > header.top) .phone__eks{ color:#DCEEE5; }
html body:has(div.la > header.top) section.faq > h2{ color:#fff; }
/* Skift til elbil */
html body:has(.skift-el), html body:has(.skift-el) main{ background:#0B7352; }
html body:has(.skift-el) .hjornesten__brodkrumme{ padding-bottom:8px; background:#123C30; box-shadow:0 0 0 100vmax #123C30; clip-path:inset(0 -100vmax); }
html body:has(.skift-el) .hjornesten__brodkrumme .brodkrumme, html body:has(.skift-el) .hjornesten__brodkrumme .brodkrumme a{ color:#BFE8D3; }
html body:has(.skift-el) .hjornesten__brodkrumme .brodkrumme{ margin-bottom:0; }
html body:has(.skift-el) .hero-mork--skift{ background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.0225'/%3E%3C/svg%3E"),
    radial-gradient(760px 380px at 12% -8%, rgba(62,166,110,.3), rgba(0,0,0,0) 62%),
    radial-gradient(620px 340px at 88% 8%, rgba(143,214,174,.15), rgba(0,0,0,0) 60%),
    linear-gradient(#123C30 0%, #0C2C23 35%, #0C2C23 100%); }
html body:has(.skift-el) footer.site-footer{ background:#0C2C23; }
html body:has(.skift-el) .skift-el{ padding-bottom:48px; }
html body:has(.skift-el) .skift-el__akt{ border-top-color:rgba(255,255,255,.18); }
html body:has(.skift-el) .skift-el__akt-nr, html body:has(.skift-el) .skift-el__akt-lead{ color:#DCEEE5; }
html body:has(.skift-el) .skift-el__akt-h{ color:#fff; }
html body:has(.skift-el) .skift-el__panel{ border-color:transparent; box-shadow:0 10px 28px rgba(0,0,0,.18); }
html body:has(.skift-el) .skift-el__panel--anbefal{ border-color:#DC6B1A; }
html body:has(.skift-el) .hjornesten__relaterede.container{ background:#fff; border:0; border-radius:14px; padding:28px 32px; margin-bottom:48px; box-shadow:0 10px 28px rgba(0,0,0,.18); }
/* Vores tre vaerktoejer */
html body:has(.vk-kort), html body:has(.vk-kort) main{ background:#0B7352; }
html body:has(.vk-kort) .hjornesten__brodkrumme{ padding-bottom:8px; background:#123C30; box-shadow:0 0 0 100vmax #123C30; clip-path:inset(0 -100vmax); }
html body:has(.vk-kort) .hjornesten__brodkrumme .brodkrumme, html body:has(.vk-kort) .hjornesten__brodkrumme .brodkrumme a{ color:#BFE8D3; }
html body:has(.vk-kort) .hjornesten__brodkrumme .brodkrumme{ margin-bottom:0; }
html body:has(.vk-kort) .hjornesten__hero{ background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.0225'/%3E%3C/svg%3E"),
    radial-gradient(760px 380px at 12% -8%, rgba(62,166,110,.3), rgba(0,0,0,0) 62%),
    radial-gradient(620px 340px at 88% 8%, rgba(143,214,174,.15), rgba(0,0,0,0) 60%),
    linear-gradient(#123C30 0%, #0C2C23 35%, #0C2C23 100%); }
html body:has(.vk-kort) .hjornesten__hero h1{ color:#fff; }
html body:has(.vk-kort) footer.site-footer{ background:#0C2C23; }
html body:has(.vk-kort) .vk-intro{ color:#fff; }
html body:has(.vk-kort) .vk-k{ border-color:transparent; box-shadow:0 10px 28px rgba(0,0,0,.18); }
html body:has(.vk-kort) .vk-k--find{ border-color:#E8622A; }
html body:has(.vk-kort) .vk-tekst{ width:auto; max-width:720px; margin-left:auto; margin-right:auto; }
html body:has(.vk-kort) .vk-afsnit{ box-sizing:border-box; background:#fff; border:0; border-radius:14px; padding:40px; margin-top:24px; box-shadow:0 10px 28px rgba(0,0,0,.18); }
html body:has(.vk-kort) .hjornesten__indhold{ padding-bottom:48px; }
@media (max-width:720px){
  html body:has(.skift-el) .hjornesten__relaterede.container{ padding:24px 16px; margin-left:12px; margin-right:12px; }
  html body:has(.vk-kort) .vk-afsnit{ padding:24px 16px; }
}



/* ============================================================
   FORSIDEN: MOTORENS TRINKORT MED PRODUKTKORTENES KANT OG SKYGGE (4. oktober 2026, N415)
   HVAD: naar motoren »Find din ladeboks« aabner paa forsiden, faar
         trinkortene samme groenne kant #B9DCCB og kraftige groenne
         skygge som produktkortene. Kun forsiden; motorens egne filer
         er ikke roert, og kommune- og udbydersiderne er uaendrede.
   HVORFOR: trinkortene havde kun en meget tynd graa kant paa den
         lyse groenne bund. Assistentens forslag; Henrik: »ja goer det«.
   Ingen tvangsregler. Sikkerhedskopi: uploads/kontrol-3oktober-2026/foer/
   ============================================================ */
html body.home .motor .motor-trin{ border:1px solid #B9DCCB; box-shadow:0 2px 6px rgba(11,115,82,.10), 0 14px 34px rgba(11,115,82,.22); }



/* ============================================================
   SKIFT TIL ELBIL OG VORES TRE VAERKTOEJER: BROEDKRUMMEN INDE I TOPPEN (4. oktober 2026, N416)
   HVAD: broedkrummen stod paa en flad moerk stribe over toppen og
         saa ud som en bjaelke for sig. Nu er striben gennemsigtig og
         70 hoej paa alle bredder (linkene 44 hoeje), og toppen er
         trukket 70 op bag den, saa toppens lysskaer og struktur
         gaar helt op til menulinjen. Toppens luft over badge/overskrift
         er 32 som foer.
   HVORFOR: Henrik 4/10: »skift til elbil ... har vist en groen
         bjaelke der ikke er saa heldig«.
   Ingen tvangsregler. Sikkerhedskopi: uploads/kontrol-3oktober-2026/foer/
   ============================================================ */
html body:has(.skift-el) .hjornesten__brodkrumme{ position:relative; z-index:1; height:70px; box-sizing:border-box; padding-top:13px; padding-bottom:13px; background:none; box-shadow:none; clip-path:none; }
html body:has(.skift-el) .hjornesten__brodkrumme .brodkrumme{ display:flex; flex-wrap:wrap; align-items:center; gap:0 4px; min-height:44px; margin:0; }
html body:has(.skift-el) .hjornesten__brodkrumme .brodkrumme a{ display:inline-flex; align-items:center; min-height:44px; padding-top:0; padding-bottom:0; }
html body:has(.skift-el) .hero-mork--skift{ margin-top:-70px; padding-top:102px; }
html body:has(.vk-kort) .hjornesten__brodkrumme{ position:relative; z-index:1; height:70px; box-sizing:border-box; padding-top:13px; padding-bottom:13px; background:none; box-shadow:none; clip-path:none; }
html body:has(.vk-kort) .hjornesten__brodkrumme .brodkrumme{ display:flex; flex-wrap:wrap; align-items:center; gap:0 4px; min-height:44px; margin:0; }
html body:has(.vk-kort) .hjornesten__brodkrumme .brodkrumme a{ display:inline-flex; align-items:center; min-height:44px; padding-top:0; padding-bottom:0; }
html body:has(.vk-kort) .hjornesten__hero{ margin-top:-70px; padding-top:102px; }



/* ============================================================
   DRAABEN MED PILEN OGSAA PAA LADEAGENTEN OG SKIFT TIL ELBIL (4. oktober 2026, N417)
   HVAD: draaben i hoejre kant (kun computere fra 1200) staar nu ogsaa
         paa Ladeagenten og Skift til elbil og viser de to andre
         vaerktoejer. Ny fane »Find din ladeboks« (til forsidens
         nummerpladefelt): hvid som »Skift til elbil«, med husets
         orange lyn. Styres af main.js.
   HVORFOR: Henrik 4/10: paa de to sider var der ingen vej tilbage
         undtagen browserens pil.
   Ingen tvangsregler. Sikkerhedskopi: uploads/kontrol-3oktober-2026/foer/
   ============================================================ */
.bilo-fane--find{ background:#fff; color:#123A2C; }
.bilo-fane--find svg{ color:#E8622A; }


/* ============================================================
   LANGE TEKSTER: SVARET FØRST, »PÅ DENNE SIDE« OG FOLD-UD-AFSNIT (N390)
   ------------------------------------------------------------
   Henrik 4. oktober 2026 overlod arbejdet til assistenten: lange
   sider skal kunne overskues, så folk ikke mister overblikket.
   INGEN ord er ændret. Markup laves af inc/lange-tekster.php, når
   siden vises (11 lange guides, Vores tre værktøjer og FAQ'en på
   Alle ladebokse), og står direkte i front-page.php (forsidens tekst
   »Sammenlign ladebokse og find den rigtige til din elbil«).
   - Svarboksen er mintgrøn: husets farve for »her står dit svar«.
   - Fold-linjerne har samme udseende som forsidens »Ofte stillede
     spørgsmål« (hvid, tynd kant, plus i den friske grønne), så det
     samme ser ens ud overalt. Plusset tegnes her (summary::after).
   - »På denne side« er foldet sammen på telefon og åben på computer.
   Ingen tvangsregler; reglerne vinder på vægt. Ingen nye farver.
   Sikkerhedskopi: uploads/kontrol-4oktober-2026/foer/
   ============================================================ */
.entry-content .lt-svar,
.lg-kasse .lt-svar{ background:#EAF6F0; border:1px solid #CFE6DC; border-radius:14px; padding:20px 24px; margin:0 0 24px; }
.hjornesten__indhold .entry-content .lt-svar > h2{ margin-top:0; margin-bottom:8px; font-size:22px; line-height:1.25; }
.hjornesten__indhold .entry-content .lt-svar > :last-child{ margin-bottom:0; }
.entry-content .lt-svar table{ background:#fff; }

.entry-content .lt-toc{ background:#fff; border:1px solid #CFE6DC; border-radius:14px; margin:0 0 28px; }
.entry-content .lt-toc > summary{ list-style:none; cursor:pointer; min-height:44px; display:flex; align-items:center; gap:8px; padding:6px 20px; font-family:var(--sora, Sora, sans-serif); font-weight:700; font-size:17px; color:#0B7352; }
.entry-content .lt-toc > summary::-webkit-details-marker{ display:none; }
.entry-content .lt-toc .lt-toc__antal{ font-family:inherit; font-weight:400; font-size:15px; color:#5B6B65; }
.entry-content .lt-toc > summary::after{ margin-left:auto; }
.entry-content .lt-toc ol{ margin:0; padding:0 20px 12px 40px; }
.entry-content .lt-toc li{ margin:0; font-size:15px; line-height:1.4; break-inside:avoid; }
.entry-content .lt-toc li a{ display:block; padding:12px 0; color:#0B7352; text-decoration:none; }
.entry-content .lt-toc li a:hover{ text-decoration:underline; }

.entry-content details.lt-fold,
.lg-kasse details.lt-fold,
.fsx .seo details.lt-fold{ background:#fff; border:1px solid var(--border, #E6EAE7); border-radius:var(--radius-md, 14px); padding:15px 18px; margin:24px 0 10px; }
.entry-content details.lt-fold + details.lt-fold,
.lg-kasse details.lt-fold + details.lt-fold,
.fsx .seo details.lt-fold + details.lt-fold{ margin-top:0; }
.entry-content details.lt-fold > summary,
.lg-kasse details.lt-fold > summary,
.fsx .seo details.lt-fold > summary{ list-style:none; cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:12px; min-height:44px; }
.entry-content details.lt-fold > summary::-webkit-details-marker,
.lg-kasse details.lt-fold > summary::-webkit-details-marker,
.fsx .seo details.lt-fold > summary::-webkit-details-marker{ display:none; }
.entry-content details.lt-fold > summary > :is(h2,h3),
.lg-kasse details.lt-fold > summary > :is(h2,h3),
.fsx .seo details.lt-fold > summary > :is(h2,h3){ margin:0; padding:0; border:0; font-size:20px; line-height:1.3; color:#0B7352; }
/* Forsiden: samme sorte overskrift som "Ofte stillede spoergsmaal" lige under. */
.fsx .seo details.lt-fold > summary > :is(h2,h3){ color:#1A1A1A; }
.entry-content details.lt-fold > .lt-fold__ind,
.lg-kasse details.lt-fold > .lt-fold__ind,
.fsx .seo details.lt-fold > .lt-fold__ind{ padding-top:8px; }
.entry-content details.lt-fold > .lt-fold__ind > :last-child,
.lg-kasse details.lt-fold > .lt-fold__ind > :last-child,
.fsx .seo details.lt-fold > .lt-fold__ind > :last-child{ margin-bottom:0; }
.entry-content :is(details.lt-fold, details.lt-toc) > summary::after,
.lg-kasse details.lt-fold > summary::after,
.fsx .seo details.lt-fold > summary::after{ content:"+"; display:inline-block; flex:0 0 auto; font-weight:400; color:var(--fresh, #3EA66E); font-size:20px; line-height:1; transition:transform .15s; }
.entry-content :is(details.lt-fold, details.lt-toc)[open] > summary::after,
.lg-kasse details.lt-fold[open] > summary::after,
.fsx .seo details.lt-fold[open] > summary::after{ transform:rotate(45deg); }
.entry-content :is(h2,h3)[id^="afsnit-"],
.lg-kasse :is(h2,h3)[id^="afsnit-"]{ scroll-margin-top:96px; }
@media (prefers-reduced-motion: reduce){
	.entry-content summary::after, .lg-kasse summary::after, .fsx .seo summary::after{ transition:none; }
}
@media (min-width:821px){
	.entry-content .lt-toc ol{ columns:2; column-gap:32px; }
}
@media (max-width:820px){
	.entry-content .lt-svar, .lg-kasse .lt-svar{ padding:14px 12px; }
	.entry-content .lt-toc > summary{ padding:6px 16px; }
	.entry-content .lt-toc ol{ padding:0 16px 8px 36px; }
	.entry-content details.lt-fold, .lg-kasse details.lt-fold, .fsx .seo details.lt-fold{ padding:12px 14px; }
}


/* ============================================================
   4. OKTOBER 2026 (N399, Henrik): SIDEFODEN MED ALLE GUIDES
   Henriks valg »Foldet, to spalter«. Telefon (til 820): hver gruppe er en fold-linje med plus, som
   »Ofte stillede spørgsmål«; en åbnet gruppe viser linkene i to spalter; Kontakt står åben. Computer
   (fra 821): logo og tekst øverst, grupperne under (tre i bredden til 1099, seks fra 1100); grupperne
   står altid åbne. Under Guides står de fire hjørnesten fremme og resten under »Alle guides« med plus.
   Ingen nye farver. Gammel udgave i kontrol-4oktober-2026/foer.
   ============================================================ */
.site-footer details.sf-fold > summary,
.site-footer details.sf-alle > summary{ list-style:none; }
.site-footer details.sf-fold > summary::-webkit-details-marker,
.site-footer details.sf-alle > summary::-webkit-details-marker{ display:none; }
html:root .site-footer details.sf-alle > summary{ cursor:pointer; display:flex; align-items:center; gap:10px; min-height:44px; font-weight:700; color:var(--color-text-on-dark); }
html:root .site-footer details.sf-alle > summary::after{ content:"+"; font-size:20px; line-height:1; transition:transform .15s; }
html:root .site-footer details.sf-alle[open] > summary::after{ transform:rotate(45deg); }
html:root .site-footer details.sf-alle > ul{ margin:0 0 8px; }
@media (max-width: 820px){
	html:root .site-footer .site-footer__inner{ display:block; }
	html:root .site-footer .site-footer__inner > .site-footer__col{ width:auto; min-width:0; max-width:none; margin:0; }
	html:root .site-footer .site-footer__inner > .site-footer__col--brand{ margin:0 0 20px; }
	html:root .site-footer details.sf-fold{ border-top:1px solid rgba(255,255,255,.18); }
	html:root .site-footer .site-footer__col:has(+ .site-footer__col--contact) details.sf-fold{ border-bottom:1px solid rgba(255,255,255,.18); }
	html:root .site-footer details.sf-fold > summary{ cursor:pointer; display:flex; justify-content:space-between; align-items:center; min-height:52px; }
	html:root .site-footer details.sf-fold > summary .site-footer__kol-titel{ margin:0; }
	html:root .site-footer details.sf-fold > summary::after{ content:"+"; color:var(--color-text-on-dark); font-size:20px; line-height:1; transition:transform .15s; }
	html:root .site-footer details.sf-fold[open] > summary::after{ transform:rotate(45deg); }
	html:root .site-footer details.sf-fold ul,
	html:root .site-footer .site-footer__col--contact ul{ display:grid; grid-template-columns:1fr 1fr; column-gap:16px; row-gap:0; margin:0 0 12px; padding:0; }
	html:root .site-footer .site-footer__col ul li{ width:auto; min-width:0; margin:0; }
	html:root .site-footer .site-footer__col ul a{ display:flex; align-items:center; min-height:44px; padding:0; font-size:15px; }
	html:root .site-footer .site-footer__inner > .site-footer__col--contact{ margin-top:20px; }
	html:root .site-footer .site-footer__cvr{ display:flex; align-items:center; min-height:44px; }
}
@media (min-width: 821px){
	html:root .site-footer .site-footer__inner{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); column-gap:28px; row-gap:24px; align-items:start; }
	html:root .site-footer .site-footer__inner > .site-footer__col{ min-width:0; max-width:none; margin:0; }
	html:root .site-footer .site-footer__inner > .site-footer__col--brand{ grid-column:1 / -1; display:flex; align-items:center; gap:28px; }
	html:root .site-footer .site-footer__col--brand .site-footer__intro{ margin:0; max-width:520px; }
	html:root .site-footer details.sf-fold > summary{ display:block; pointer-events:none; cursor:default; }
	html:root .site-footer details.sf-fold > summary .site-footer__kol-titel{ display:block; }
}
@media (min-width: 1100px){
	html:root .site-footer .site-footer__inner{ grid-template-columns:repeat(6, minmax(0, 1fr)); }
}


/* ============================================================
   4. OKTOBER 2026 (N422, Henrik): ANBEFALINGEN - ORANGE KNAPPER OG NYT MAERKE
   Henriks ord: knappen ved »Værsgo! Her er din anbefaling.« og »Gå til udbyder« skal være orange,
   og »Vores anbefaling« må derfor ikke være orange. Henriks valg: B, sidefodens skovgrønne #0C2C23
   med mint #8FD6AE (læsbarhed 8,9). Knapperne får produktkortenes orange. Gælder alle udbydere,
   fordi det er den samme anbefaling overalt. På telefon er »Se tilbud« allerede orange; den
   orange kant og det orange skær om mærket bliver mintgrønne. »Billigst« og fordelsmærket er urørte.
   ============================================================ */
@keyframes biloAandeMint {
	0%   { box-shadow: 0 0 0 0 rgba(143, 214, 174, 0); }
	50%  { box-shadow: 0 0 14px 3px rgba(143, 214, 174, 0.55); }
	100% { box-shadow: 0 0 0 0 rgba(143, 214, 174, 0); }
}
html:root body .motor-kort__badge:not(.motor-kort__badge--billigst):not(.motor-kort__badge--fordel) {
	background-color: #0C2C23;
	color: #8FD6AE;
}
@media (min-width: 821px) {
	html:root body .motor-kort__cta,
	html:root body .motor-slut__cta {
		background: linear-gradient(180deg, #F1712F 0%, #E05A1E 100%);
		color: #FFFFFF;
		border: 0;
		box-shadow: 0 3px 9px rgba(224, 90, 30, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.25);
		font-weight: 700;
	}
	html:root body .motor-kort__cta:hover,
	html:root body .motor-slut__cta:hover {
		background: linear-gradient(180deg, #F1712F 0%, #E05A1E 100%);
		color: #FFFFFF;
		filter: brightness(0.96);
	}
}
@media (max-width: 820px) {
	html:root body .forside-funnel.mm .motor-kort__badge:not(.motor-kort__badge--billigst):not(.motor-kort__badge--fordel),
	html:root body #motoren.forside-funnel.mm #motor-trin-4 .motor-kort__badge:not(.motor-kort__badge--billigst):not(.motor-kort__badge--fordel) {
		background-color: #0C2C23;
		color: #8FD6AE;
		border-color: #8FD6AE;
		animation-name: biloAandeMint;
	}
}


/* ============================================================
   4. OKTOBER 2026 (N423, Henrik): ET NUMMERPLADEFELT
   Henriks ord: alle nummerpladefelter skal være forsidens felt med dets funktioner (fx den
   orange lup ved indtastning), og alle åbner samme forløb som motoren på forsiden. Udkastet
   godkendt 4/10 (»ok«).
   - Guider, kommunesider og Din anbefaling: motorens eget felt får forsidens udseende (sort
     kant, grønt EU-felt, grøn lup, der bliver orange, når der står noget i feltet). På telefon
     er luften i motorens kasse mindsket, så hele pladen kan stå. Motoren står i forsidens ramme
     (inc/motor-indgang.php), så den folder sig ud oven på siden på telefon.
   - Udbydersider og butiksbokse: forsidens felt i stedet for »Din nummerplade«-feltet; luppen
     gør det, knappen »Se anbefaling« gjorde.
   - Ladeagenten: samme udseende, egen funktion (Henriks ja).
   - Den grønne bjælke (N411): forsidens skjulte blok på udbydersiderne står kun frem, mens den
     har noget at vise (opslag, besked, adresse eller bilstørrelser). Ellers er den væk.
   Ingen nye farver. Gammel udgave i kontrol-4oktober-2026/foer.
   ============================================================ */

/* Motorens eget felt (ikke inde i telefonlaget). */
html:root body .bilo-motorside:not(.er-vist) #motor-trin-1 .motor-plade { display: flex; }
html:root body .bilo-motorside:not(.er-vist) #motor-trin-1 .motor-plade__felt {
	width: 100%; max-width: none; height: auto; min-height: 51px; flex: 1 1 auto;
	border: 2px solid #111; border-radius: var(--radius-sm); background: #fff; box-shadow: none; overflow: hidden;
}
html:root body .bilo-motorside:not(.er-vist) #motor-trin-1 .motor-plade__felt:focus-within { box-shadow: none; outline: 3px solid #3EA66E; outline-offset: 2px; }
html:root body .bilo-motorside:not(.er-vist) #motor-trin-1 .motor-plade__eu {
	flex: 0 0 37px; width: 37px; padding: 0 9px; box-sizing: border-box; background: #147a63; gap: 3px; justify-content: center; border-radius: 0;
}
html:root body .bilo-motorside:not(.er-vist) #motor-trin-1 .motor-plade__stjerner { width: 17px; height: 17px; }
html:root body .bilo-motorside:not(.er-vist) #motor-trin-1 .motor-plade__dk { font-size: var(--text-sm); font-weight: 700; letter-spacing: normal; line-height: 1.1; }
html:root body .bilo-motorside:not(.er-vist) #motor-trin-1 .motor-plade__input {
	font-family: var(--font-body, 'Inter', sans-serif); font-weight: 700; font-size: var(--text-lg);
	letter-spacing: .12em; padding: 11px 8px 11px 12px; color: var(--color-text, #111);
}
html:root body .bilo-motorside:not(.er-vist) #motor-trin-1 .motor-plade__sog {
	flex: 0 0 auto; height: auto; align-self: stretch; padding: 0 16px; border: 0; background: #147a63; color: #fff; transition: background .25s;
}
html:root body .bilo-motorside:not(.er-vist) #motor-trin-1 .motor-plade__sog svg { stroke: #fff; }
html:root body .bilo-motorside:not(.er-vist) #motor-trin-1 .motor-plade__sog:hover { background: #0f5f4d; color: #fff; }
html:root body .bilo-motorside:not(.er-vist) #motor-trin-1 .motor-plade__sog.er-klar,
html:root body .bilo-motorside:not(.er-vist) #motor-trin-1 .motor-plade:has(.motor-plade__input:not(:placeholder-shown)) .motor-plade__sog { background: #E8622A; }
html:root body .bilo-motorside:not(.er-vist) #motor-trin-1 .motor-plade__sog.er-klar:hover,
html:root body .bilo-motorside:not(.er-vist) #motor-trin-1 .motor-plade:has(.motor-plade__input:not(:placeholder-shown)) .motor-plade__sog:hover { background: #d4551f; }
@media (max-width: 820px) {
	html:root body .bilo-motorside:not(.er-vist) #bilopladning-motor { padding-left: 12px; padding-right: 12px; }
	html:root body .bilo-motorside:not(.er-vist) #motor-trin-1 { padding-left: 16px; padding-right: 16px; }
}

/* Udbydersiderne og butiksboksene: forsidens felt i indgangen. */
html:root body .np-motor .bilo-np-plade { min-width: 0; width: 100%; flex: 1 1 auto; box-sizing: border-box; }
html:root body .np-motor .bilo-np-plade .fh__platein { min-width: 0; }
html:root body .np-motor .bilo-np-plade:has(.fh__platein:not(:placeholder-shown)) .fh__lookup { background: var(--cta-orange, #E8622A); }
html:root body .np-motor .bilo-np-plade:has(.fh__platein:not(:placeholder-shown)) .fh__lookup:hover { background: #d4551f; }
html:root body .np-motor .bilo-np-plade .fh__lookup { min-height: 47px; }

/* Ladeagenten: samme udseende som forsidens felt. */
html:root body .la .plate__eu { flex: 0 0 37px; width: 37px; box-sizing: border-box; font-size: var(--text-sm); }
html:root body .la .plate__eu small { color: transparent; font-size: 0; width: 17px; height: 17px; margin-bottom: 3px; background: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Ccircle%20cx='12'%20cy='3'%20r='1.25'%20fill='%23FFCC00'/%3E%3Ccircle%20cx='16'%20cy='4.07'%20r='1.25'%20fill='%23FFCC00'/%3E%3Ccircle%20cx='18.93'%20cy='7'%20r='1.25'%20fill='%23FFCC00'/%3E%3Ccircle%20cx='20'%20cy='11'%20r='1.25'%20fill='%23FFCC00'/%3E%3Ccircle%20cx='18.93'%20cy='15'%20r='1.25'%20fill='%23FFCC00'/%3E%3Ccircle%20cx='16'%20cy='17.93'%20r='1.25'%20fill='%23FFCC00'/%3E%3Ccircle%20cx='12'%20cy='19'%20r='1.25'%20fill='%23FFCC00'/%3E%3Ccircle%20cx='8'%20cy='17.93'%20r='1.25'%20fill='%23FFCC00'/%3E%3Ccircle%20cx='5.07'%20cy='15'%20r='1.25'%20fill='%23FFCC00'/%3E%3Ccircle%20cx='4'%20cy='11'%20r='1.25'%20fill='%23FFCC00'/%3E%3Ccircle%20cx='5.07'%20cy='7'%20r='1.25'%20fill='%23FFCC00'/%3E%3Ccircle%20cx='8'%20cy='4.07'%20r='1.25'%20fill='%23FFCC00'/%3E%3C/svg%3E") center / contain no-repeat; display: block; }
html:root body .la .plate input { font-family: var(--font-body, 'Inter', sans-serif); font-size: var(--text-lg); letter-spacing: .12em; padding: 11px 8px 11px 12px; }
html:root body .la .plate input::placeholder { color: #C7CDC7; font-weight: 700; letter-spacing: .14em; }
html:root body .la .plate button { padding: 0 16px; transition: background .25s; }
html:root body .la .plate:has(input:not(:placeholder-shown)) button { background: var(--cta-orange, #E8622A); }
html:root body .la .plate:has(input:not(:placeholder-shown)) button:hover { background: #d4551f; }

/* Den grønne bjælke (N411). */
html:root body .uu-fh.uu-fh--aktiv:not(:has(.fh__opslag:not([hidden]))):not(:has(.fh__hint:not([hidden]))):not(:has(.fh__kvit:not([hidden]):not(:empty))):not(:has(.fh__ingenboks:not([hidden]))):not(:has(.fh__adresseholder:not([hidden]))) { display: none; }

/* 4. OKTOBER 2026: SKYDERENS OVERSKRIFT OG TEKST HVIDE PAA ALLE SKAERME (kommunesiderne).
   Hvorfor: paa telefon og under 1000 i bredden stod "Hvad sparer du ved at skifte til elbil?" groen (#0B7352)
   og teksten under sort (#1A1A1A) paa skyderens moerkegroenne flade #08573E (maalt 1,47 og 2,02; kravet er 4,5).
   Den hvide fra computeren (fra 1000) gaelder nu alle bredder: 8,6. Ingen ny farve, ingen ord aendret.
   Henrik 4/10: "ja". Ingen tvungne regler. */
html body.bilo-rute-kommune .ko-wrap .ko-blok.ko-sk > h2,
html body.bilo-rute-kommune .ko-wrap .ko-blok.ko-sk > p.ko-ingress{ color:#fff; }

/* 4. OKTOBER 2026: TEKSTERNE PAA FORSIDEN OG ALLE LADEBOKSE I GUIDERNES LAESESTIL.
   Hvorfor: maalt mod guiderne (17, linjeafstand 1,7, hoejst ca. 73 tegn pr. linje, overskrift 26 med luft og tynd streg).
   Forsidens tekst nederst og svarene i Ofte stillede spoergsmaal var 15 med ca. 130 tegn pr. linje; Alle ladebokse
   havde 1,6 og ca. 89 tegn og overskrifter uden luft og streg. Ingen ord, ingen nye farver. Henrik 4/10: "ja"
   (udkastet tekster-udkast.html, udgaven "Som guiderne"). Ingen tvungne regler. */
html:root body .blk .seo > h2{font-family:Sora,sans-serif;font-weight:500;font-size:22px;line-height:1.25;color:#0B7352;margin:0 0 8px}
html:root body .blk .seo p, html:root body .blk .seo .lt-fold__ind p, html:root body .blk .seo li, html:root body .faq2 .fq2 > p{font-size:17px;line-height:1.7}
html:root body .lg-kasse p, html:root body .lg-kasse li, html:root body .lg-kasse .lt-fold__ind p{line-height:1.7}
html:root body .lg-kasse > h2:not(:first-child){margin-top:44px;padding-top:28px;border-top:1px solid #E3EBE6}
@media (min-width:821px){
html:root body .blk .seo > h2{font-size:26px}
html:root body .blk .seo > p, html:root body .blk .seo .lt-fold__ind p, html:root body .blk .seo ul, html:root body .faq2 .fq2 > p, html:root body .lg-kasse > p, html:root body .lg-kasse > ul, html:root body .lg-kasse > ol, html:root body .lg-kasse .lt-fold__ind p{max-width:622px}
html:root body .lg-kasse > h2:not(:first-child){margin-top:66px}
}
/* 4. OKTOBER 2026: UDBYDERSIDERNE - ORANGE KNAPPER I DET SIDSTE FELT OG I DEN KLAEBENDE BJAELKE.
   Henrik 4/10: "Find din ladeboks" i det sidste felt foer sidefoden bliver orange paa alle 27 sider; i den klaebende
   bjaelke (kun telefon) bliver kun knappen "Gaa til ..." orange (de 7 sider, hvor den foerer ud til udbyderen).
   Henrik: "Alle knapper med teksten Kun Gaa til" (udgaven "Kun Gaa til" i orange-udbyder-udkast.html).
   Afloeser for de 7 knapper den gamle regel fra august (klaebende bjaelke = groen), jf. Henriks regel 27/9 om orange som
   CTA-farve. Knapperne, der foerer ind paa siden (Se ...s ladebokse, Se alternativet), forbliver groenne.
   Samme orange og hvide tekst som "Gaa til" oeverst paa siden. Ingen ord, ingen tvungne regler. */
html:root body .uu-end .uu-green{background:var(--cta,#E8622A);color:#fff;box-shadow:0 8px 24px rgba(232,98,42,.35)}
html:root body .uu-end .uu-green:hover{background:#d4551f;color:#fff}
html:root body .uu-mini .uu-orange:not(.uu-cta--intern){background:var(--cta,#E8622A);color:#fff}
html:root body .uu-mini .uu-orange:not(.uu-cta--intern):hover{background:#d4551f;color:#fff}

/* 4. OKTOBER 2026: FORSIDENS KOERENDE LOGOBAELTE OG ENS LOGOER I LOGOHJULENE.
   Henrik 4/10: logofeltet erstattet af et koerende baelte med alle 27 udbydere, i farver; ophoerte i
   graat. Logoerne er skaaret taet (uploads/logoer-ens/) og faar samme flade, ogsaa i logohjulene i
   soegebjaelken (forsiden, Alle ladebokse) og paa Udbydere. "Bedste udbydere" fjernet.
   Udkast: logoer-udkast.html. Henrik: "ja gor det". Ingen nye farver, ingen tvungne regler. */
html:root body .bb-baelte{position:relative;overflow:hidden;padding:14px 0;border-top:1px solid #E1E7E4;border-bottom:1px solid #E1E7E4;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 40px,#000 calc(100% - 40px),transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 40px,#000 calc(100% - 40px),transparent 100%)}
html:root body .bb-spor{display:flex;gap:26px;width:max-content;animation:bb-loeb var(--bb-tid,60s) linear infinite}
html:root body .bb-baelte:hover .bb-spor,html:root body .bb-baelte:focus-within .bb-spor,html:root body .bb-baelte.bb-stop .bb-spor{animation-play-state:paused}
html:root body .bb-logo{flex:0 0 auto;display:flex;align-items:center;justify-content:center;width:144px;height:60px;background:#fff;border-radius:8px;text-decoration:none}
html:root body .bb-logo img{width:120px;height:44px;object-fit:contain;transition:transform .2s}
html:root body .bb-logo:hover img,html:root body .bb-logo:focus-visible img{transform:scale(1.06)}
html:root body .bb-logo:focus-visible{outline:2px solid #0B7352;outline-offset:2px}
@keyframes bb-loeb{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (max-width:820px){html:root body .bb-spor{gap:14px}html:root body .bb-logo{width:118px;height:52px}html:root body .bb-logo img{width:100px;height:38px}}
@media (prefers-reduced-motion:reduce){html:root body .bb-spor{animation:none}html:root body .bb-baelte{overflow-x:auto}}
html:root body .bb-logo--ophoert img{filter:grayscale(1);opacity:.55}
html:root body .bb-logo--ophoert:hover img,html:root body .bb-logo--ophoert:focus-visible img{filter:grayscale(1);opacity:.75}
html:root body .bb-ord{font:600 15px Inter,sans-serif;color:#0B7352;white-space:nowrap}
/* Logoerne i taet beskaaret udgave (uploads/logoer-ens/), samme flade for alle, saa de ser lige store ud. */
html:root body .bb-logo img[src*="/logoer-ens/aura.webp"]{width:111px;height:27px;max-width:none;max-height:none;object-fit:contain}
html:root body .bb-logo img[src*="/logoer-ens/clever.webp"]{width:124px;height:23px;max-width:none;max-height:none;object-fit:contain}
html:root body .bb-logo img[src*="/logoer-ens/dcc-energi.webp"]{width:76px;height:39px;max-width:none;max-height:none;object-fit:contain}
html:root body .bb-logo img[src*="/logoer-ens/evdk.webp"]{width:98px;height:31px;max-width:none;max-height:none;object-fit:contain}
html:root body .bb-logo img[src*="/logoer-ens/ewii.webp"]{width:82px;height:37px;max-width:none;max-height:none;object-fit:contain}
html:root body .bb-logo img[src*="/logoer-ens/elgiganten.webp"]{width:114px;height:26px;max-width:none;max-height:none;object-fit:contain}
html:root body .bb-logo img[src*="/logoer-ens/evify.webp"]{width:84px;height:36px;max-width:none;max-height:none;object-fit:contain}
html:root body .bb-logo img[src*="/logoer-ens/greenbow.webp"]{width:124px;height:22px;max-width:none;max-height:none;object-fit:contain}
html:root body .bb-logo img[src*="/logoer-ens/looad.webp"]{width:119px;height:25px;max-width:none;max-height:none;object-fit:contain}
html:root body .bb-logo img[src*="/logoer-ens/modstroem.webp"]{width:124px;height:18px;max-width:none;max-height:none;object-fit:contain}
html:root body .bb-logo img[src*="/logoer-ens/nrgi-zapp.webp"]{width:98px;height:31px;max-width:none;max-height:none;object-fit:contain}
html:root body .bb-logo img[src*="/logoer-ens/norlys.webp"]{width:124px;height:24px;max-width:none;max-height:none;object-fit:contain}
html:root body .bb-logo img[src*="/logoer-ens/ok.webp"]{width:85px;height:35px;max-width:none;max-height:none;object-fit:contain}
html:root body .bb-logo img[src*="/logoer-ens/proshop.webp"]{width:124px;height:10px;max-width:none;max-height:none;object-fit:contain}
html:root body .bb-logo img[src*="/logoer-ens/verdo.webp"]{width:124px;height:24px;max-width:none;max-height:none;object-fit:contain}
html:root body .bb-logo img[src*="/logoer-ens/wattoo.webp"]{width:124px;height:16px;max-width:none;max-height:none;object-fit:contain}
html:root body .bb-logo img[src*="/logoer-ens/aabenlyst.webp"]{width:121px;height:25px;max-width:none;max-height:none;object-fit:contain}
html:root body .bb-logo img[src*="/logoer-ens/e-on.webp"]{width:100px;height:30px;max-width:none;max-height:none;object-fit:contain}
html:root body .bb-logo img[src*="/logoer-ens/evbiler.webp"]{width:78px;height:38px;max-width:none;max-height:none;object-fit:contain}
html:root body .bb-logo img[src*="/logoer-ens/ecocharging.webp"]{width:108px;height:28px;max-width:none;max-height:none;object-fit:contain}
html:root body .bb-logo img[src*="/logoer-ens/homecharge.webp"]{width:124px;height:18px;max-width:none;max-height:none;object-fit:contain}
html:root body .bb-logo img[src*="/logoer-ens/ladop.webp"]{width:112px;height:27px;max-width:none;max-height:none;object-fit:contain}
html:root body .bb-logo img[src*="/logoer-ens/nettopower.webp"]{width:124px;height:18px;max-width:none;max-height:none;object-fit:contain}
html:root body .bb-logo img[src*="/logoer-ens/power-fuel.webp"]{width:124px;height:14px;max-width:none;max-height:none;object-fit:contain}
html:root body .bb-logo img[src*="/logoer-ens/sperto.webp"]{width:104px;height:29px;max-width:none;max-height:none;object-fit:contain}
html:root body .bb-logo img[src*="/logoer-ens/the-charger.webp"]{width:69px;height:44px;max-width:none;max-height:none;object-fit:contain}
html:root body .bb-logo img[src*="/logoer-ens/zapp-mobility.webp"]{width:113px;height:27px;max-width:none;max-height:none;object-fit:contain}
@media (max-width:820px){html:root body .bb-logo img[src*="/logoer-ens/aura.webp"]{width:90px;height:22px;max-width:none;max-height:none;object-fit:contain}
html:root body .bb-logo img[src*="/logoer-ens/clever.webp"]{width:98px;height:18px;max-width:none;max-height:none;object-fit:contain}
html:root body .bb-logo img[src*="/logoer-ens/dcc-energi.webp"]{width:62px;height:32px;max-width:none;max-height:none;object-fit:contain}
html:root body .bb-logo img[src*="/logoer-ens/evdk.webp"]{width:80px;height:25px;max-width:none;max-height:none;object-fit:contain}
html:root body .bb-logo img[src*="/logoer-ens/ewii.webp"]{width:67px;height:30px;max-width:none;max-height:none;object-fit:contain}
html:root body .bb-logo img[src*="/logoer-ens/elgiganten.webp"]{width:93px;height:22px;max-width:none;max-height:none;object-fit:contain}
html:root body .bb-logo img[src*="/logoer-ens/evify.webp"]{width:68px;height:29px;max-width:none;max-height:none;object-fit:contain}
html:root body .bb-logo img[src*="/logoer-ens/greenbow.webp"]{width:98px;height:17px;max-width:none;max-height:none;object-fit:contain}
html:root body .bb-logo img[src*="/logoer-ens/looad.webp"]{width:97px;height:21px;max-width:none;max-height:none;object-fit:contain}
html:root body .bb-logo img[src*="/logoer-ens/modstroem.webp"]{width:98px;height:14px;max-width:none;max-height:none;object-fit:contain}
html:root body .bb-logo img[src*="/logoer-ens/nrgi-zapp.webp"]{width:80px;height:25px;max-width:none;max-height:none;object-fit:contain}
html:root body .bb-logo img[src*="/logoer-ens/norlys.webp"]{width:98px;height:19px;max-width:none;max-height:none;object-fit:contain}
html:root body .bb-logo img[src*="/logoer-ens/ok.webp"]{width:69px;height:29px;max-width:none;max-height:none;object-fit:contain}
html:root body .bb-logo img[src*="/logoer-ens/proshop.webp"]{width:98px;height:8px;max-width:none;max-height:none;object-fit:contain}
html:root body .bb-logo img[src*="/logoer-ens/verdo.webp"]{width:98px;height:19px;max-width:none;max-height:none;object-fit:contain}
html:root body .bb-logo img[src*="/logoer-ens/wattoo.webp"]{width:98px;height:13px;max-width:none;max-height:none;object-fit:contain}
html:root body .bb-logo img[src*="/logoer-ens/aabenlyst.webp"]{width:98px;height:20px;max-width:none;max-height:none;object-fit:contain}
html:root body .bb-logo img[src*="/logoer-ens/e-on.webp"]{width:82px;height:24px;max-width:none;max-height:none;object-fit:contain}
html:root body .bb-logo img[src*="/logoer-ens/evbiler.webp"]{width:64px;height:31px;max-width:none;max-height:none;object-fit:contain}
html:root body .bb-logo img[src*="/logoer-ens/ecocharging.webp"]{width:89px;height:23px;max-width:none;max-height:none;object-fit:contain}
html:root body .bb-logo img[src*="/logoer-ens/homecharge.webp"]{width:98px;height:14px;max-width:none;max-height:none;object-fit:contain}
html:root body .bb-logo img[src*="/logoer-ens/ladop.webp"]{width:92px;height:22px;max-width:none;max-height:none;object-fit:contain}
html:root body .bb-logo img[src*="/logoer-ens/nettopower.webp"]{width:98px;height:14px;max-width:none;max-height:none;object-fit:contain}
html:root body .bb-logo img[src*="/logoer-ens/power-fuel.webp"]{width:98px;height:11px;max-width:none;max-height:none;object-fit:contain}
html:root body .bb-logo img[src*="/logoer-ens/sperto.webp"]{width:85px;height:24px;max-width:none;max-height:none;object-fit:contain}
html:root body .bb-logo img[src*="/logoer-ens/the-charger.webp"]{width:54px;height:34px;max-width:none;max-height:none;object-fit:contain}
html:root body .bb-logo img[src*="/logoer-ens/zapp-mobility.webp"]{width:92px;height:22px;max-width:none;max-height:none;object-fit:contain}
}
html:root body .fsb__hjulm img[src*="/logoer-ens/aura.webp"],html:root body .fsb__hjul__logo[src*="/logoer-ens/aura.webp"]{width:64px;height:16px;max-width:none;max-height:none;object-fit:contain}
html:root body .fsb__hjulm img[src*="/logoer-ens/clever.webp"],html:root body .fsb__hjul__logo[src*="/logoer-ens/clever.webp"]{width:74px;height:14px;max-width:none;max-height:none;object-fit:contain}
html:root body .fsb__hjulm img[src*="/logoer-ens/dcc-energi.webp"],html:root body .fsb__hjul__logo[src*="/logoer-ens/dcc-energi.webp"]{width:44px;height:23px;max-width:none;max-height:none;object-fit:contain}
html:root body .fsb__hjulm img[src*="/logoer-ens/evdk.webp"],html:root body .fsb__hjul__logo[src*="/logoer-ens/evdk.webp"]{width:57px;height:18px;max-width:none;max-height:none;object-fit:contain}
html:root body .fsb__hjulm img[src*="/logoer-ens/ewii.webp"],html:root body .fsb__hjul__logo[src*="/logoer-ens/ewii.webp"]{width:47px;height:21px;max-width:none;max-height:none;object-fit:contain}
html:root body .fsb__hjulm img[src*="/logoer-ens/elgiganten.webp"],html:root body .fsb__hjul__logo[src*="/logoer-ens/elgiganten.webp"]{width:66px;height:15px;max-width:none;max-height:none;object-fit:contain}
html:root body .fsb__hjulm img[src*="/logoer-ens/evify.webp"],html:root body .fsb__hjul__logo[src*="/logoer-ens/evify.webp"]{width:48px;height:21px;max-width:none;max-height:none;object-fit:contain}
html:root body .fsb__hjulm img[src*="/logoer-ens/greenbow.webp"],html:root body .fsb__hjul__logo[src*="/logoer-ens/greenbow.webp"]{width:75px;height:13px;max-width:none;max-height:none;object-fit:contain}
html:root body .fsb__hjulm img[src*="/logoer-ens/looad.webp"],html:root body .fsb__hjul__logo[src*="/logoer-ens/looad.webp"]{width:69px;height:15px;max-width:none;max-height:none;object-fit:contain}
html:root body .fsb__hjulm img[src*="/logoer-ens/modstroem.webp"],html:root body .fsb__hjul__logo[src*="/logoer-ens/modstroem.webp"]{width:82px;height:12px;max-width:none;max-height:none;object-fit:contain}
html:root body .fsb__hjulm img[src*="/logoer-ens/nrgi-zapp.webp"],html:root body .fsb__hjul__logo[src*="/logoer-ens/nrgi-zapp.webp"]{width:56px;height:18px;max-width:none;max-height:none;object-fit:contain}
html:root body .fsb__hjulm img[src*="/logoer-ens/norlys.webp"],html:root body .fsb__hjul__logo[src*="/logoer-ens/norlys.webp"]{width:72px;height:14px;max-width:none;max-height:none;object-fit:contain}
html:root body .fsb__hjulm img[src*="/logoer-ens/ok.webp"],html:root body .fsb__hjul__logo[src*="/logoer-ens/ok.webp"]{width:49px;height:20px;max-width:none;max-height:none;object-fit:contain}
html:root body .fsb__hjulm img[src*="/logoer-ens/proshop.webp"],html:root body .fsb__hjul__logo[src*="/logoer-ens/proshop.webp"]{width:88px;height:7px;max-width:none;max-height:none;object-fit:contain}
html:root body .fsb__hjulm img[src*="/logoer-ens/verdo.webp"],html:root body .fsb__hjul__logo[src*="/logoer-ens/verdo.webp"]{width:72px;height:14px;max-width:none;max-height:none;object-fit:contain}
html:root body .fsb__hjulm img[src*="/logoer-ens/wattoo.webp"],html:root body .fsb__hjul__logo[src*="/logoer-ens/wattoo.webp"]{width:87px;height:11px;max-width:none;max-height:none;object-fit:contain}
html:root body .fsb__hjulm img[src*="/logoer-ens/aabenlyst.webp"],html:root body .fsb__hjul__logo[src*="/logoer-ens/aabenlyst.webp"]{width:70px;height:14px;max-width:none;max-height:none;object-fit:contain}
html:root body .fsb__hjulm img[src*="/logoer-ens/e-on.webp"],html:root body .fsb__hjul__logo[src*="/logoer-ens/e-on.webp"]{width:58px;height:17px;max-width:none;max-height:none;object-fit:contain}
html:root body .fsb__hjulm img[src*="/logoer-ens/evbiler.webp"],html:root body .fsb__hjul__logo[src*="/logoer-ens/evbiler.webp"]{width:45px;height:22px;max-width:none;max-height:none;object-fit:contain}
html:root body .fsb__hjulm img[src*="/logoer-ens/ecocharging.webp"],html:root body .fsb__hjul__logo[src*="/logoer-ens/ecocharging.webp"]{width:63px;height:16px;max-width:none;max-height:none;object-fit:contain}
html:root body .fsb__hjulm img[src*="/logoer-ens/homecharge.webp"],html:root body .fsb__hjul__logo[src*="/logoer-ens/homecharge.webp"]{width:83px;height:12px;max-width:none;max-height:none;object-fit:contain}
html:root body .fsb__hjulm img[src*="/logoer-ens/ladop.webp"],html:root body .fsb__hjul__logo[src*="/logoer-ens/ladop.webp"]{width:65px;height:15px;max-width:none;max-height:none;object-fit:contain}
html:root body .fsb__hjulm img[src*="/logoer-ens/nettopower.webp"],html:root body .fsb__hjul__logo[src*="/logoer-ens/nettopower.webp"]{width:84px;height:12px;max-width:none;max-height:none;object-fit:contain}
html:root body .fsb__hjulm img[src*="/logoer-ens/power-fuel.webp"],html:root body .fsb__hjul__logo[src*="/logoer-ens/power-fuel.webp"]{width:88px;height:10px;max-width:none;max-height:none;object-fit:contain}
html:root body .fsb__hjulm img[src*="/logoer-ens/sperto.webp"],html:root body .fsb__hjul__logo[src*="/logoer-ens/sperto.webp"]{width:60px;height:17px;max-width:none;max-height:none;object-fit:contain}
html:root body .fsb__hjulm img[src*="/logoer-ens/the-charger.webp"],html:root body .fsb__hjul__logo[src*="/logoer-ens/the-charger.webp"]{width:38px;height:24px;max-width:none;max-height:none;object-fit:contain}
html:root body .fsb__hjulm img[src*="/logoer-ens/zapp-mobility.webp"],html:root body .fsb__hjul__logo[src*="/logoer-ens/zapp-mobility.webp"]{width:65px;height:15px;max-width:none;max-height:none;object-fit:contain}
html:root body .uo-hjul__logo[src*="/logoer-ens/aura.webp"]{width:69px;height:17px;max-width:none;max-height:none;object-fit:contain}
html:root body .uo-hjul__logo[src*="/logoer-ens/clever.webp"]{width:79px;height:14px;max-width:none;max-height:none;object-fit:contain}
html:root body .uo-hjul__logo[src*="/logoer-ens/dcc-energi.webp"]{width:47px;height:24px;max-width:none;max-height:none;object-fit:contain}
html:root body .uo-hjul__logo[src*="/logoer-ens/evdk.webp"]{width:61px;height:19px;max-width:none;max-height:none;object-fit:contain}
html:root body .uo-hjul__logo[src*="/logoer-ens/ewii.webp"]{width:51px;height:23px;max-width:none;max-height:none;object-fit:contain}
html:root body .uo-hjul__logo[src*="/logoer-ens/elgiganten.webp"]{width:70px;height:16px;max-width:none;max-height:none;object-fit:contain}
html:root body .uo-hjul__logo[src*="/logoer-ens/evify.webp"]{width:52px;height:22px;max-width:none;max-height:none;object-fit:contain}
html:root body .uo-hjul__logo[src*="/logoer-ens/greenbow.webp"]{width:81px;height:14px;max-width:none;max-height:none;object-fit:contain}
html:root body .uo-hjul__logo[src*="/logoer-ens/looad.webp"]{width:74px;height:16px;max-width:none;max-height:none;object-fit:contain}
html:root body .uo-hjul__logo[src*="/logoer-ens/modstroem.webp"]{width:88px;height:13px;max-width:none;max-height:none;object-fit:contain}
html:root body .uo-hjul__logo[src*="/logoer-ens/nrgi-zapp.webp"]{width:61px;height:19px;max-width:none;max-height:none;object-fit:contain}
html:root body .uo-hjul__logo[src*="/logoer-ens/norlys.webp"]{width:78px;height:15px;max-width:none;max-height:none;object-fit:contain}
html:root body .uo-hjul__logo[src*="/logoer-ens/ok.webp"]{width:52px;height:22px;max-width:none;max-height:none;object-fit:contain}
html:root body .uo-hjul__logo[src*="/logoer-ens/proshop.webp"]{width:104px;height:8px;max-width:none;max-height:none;object-fit:contain}
html:root body .uo-hjul__logo[src*="/logoer-ens/verdo.webp"]{width:77px;height:15px;max-width:none;max-height:none;object-fit:contain}
html:root body .uo-hjul__logo[src*="/logoer-ens/wattoo.webp"]{width:93px;height:12px;max-width:none;max-height:none;object-fit:contain}
html:root body .uo-hjul__logo[src*="/logoer-ens/aabenlyst.webp"]{width:75px;height:15px;max-width:none;max-height:none;object-fit:contain}
html:root body .uo-hjul__logo[src*="/logoer-ens/e-on.webp"]{width:62px;height:19px;max-width:none;max-height:none;object-fit:contain}
html:root body .uo-hjul__logo[src*="/logoer-ens/evbiler.webp"]{width:48px;height:24px;max-width:none;max-height:none;object-fit:contain}
html:root body .uo-hjul__logo[src*="/logoer-ens/ecocharging.webp"]{width:67px;height:17px;max-width:none;max-height:none;object-fit:contain}
html:root body .uo-hjul__logo[src*="/logoer-ens/homecharge.webp"]{width:89px;height:13px;max-width:none;max-height:none;object-fit:contain}
html:root body .uo-hjul__logo[src*="/logoer-ens/ladop.webp"]{width:69px;height:17px;max-width:none;max-height:none;object-fit:contain}
html:root body .uo-hjul__logo[src*="/logoer-ens/nettopower.webp"]{width:90px;height:13px;max-width:none;max-height:none;object-fit:contain}
html:root body .uo-hjul__logo[src*="/logoer-ens/power-fuel.webp"]{width:101px;height:11px;max-width:none;max-height:none;object-fit:contain}
html:root body .uo-hjul__logo[src*="/logoer-ens/sperto.webp"]{width:65px;height:18px;max-width:none;max-height:none;object-fit:contain}
html:root body .uo-hjul__logo[src*="/logoer-ens/the-charger.webp"]{width:41px;height:26px;max-width:none;max-height:none;object-fit:contain}
html:root body .uo-hjul__logo[src*="/logoer-ens/zapp-mobility.webp"]{width:70px;height:16px;max-width:none;max-height:none;object-fit:contain}

/* ===================================================================
   5. OKTOBER 2026: MODSTROEM - LILLE ELEMENT "LADEBOKS OG ELAFTALE SAMLET"
   Kun paa Modstroems udbyderside, lige under kortet. Henrik godkendte tekst
   og orange knap 5/10 (samme udbyder, saa to orange knapper er i orden her).
   Ingen tvangsregler.
   =================================================================== */
.uu-mse{display:flex;gap:16px;align-items:flex-start;background:#fff;border:1px solid #B9DCCB;border-radius:14px;padding:20px;margin-top:16px;box-shadow:0 6px 18px rgba(11,115,82,.10)}
.uu-mse__billede{flex:none;width:70px}
.uu-mse__billede img{width:70px;height:auto;display:block}
.uu-mse__tekst{min-width:0}
.uu-mse__maerkat{font-size:13px;font-weight:600;color:#0B7352;text-transform:uppercase;letter-spacing:.04em}
.uu-mse .uu-mse__h{margin:4px 0 6px;font-family:Sora,sans-serif;font-size:20px;line-height:1.3;font-weight:600;color:#14231d}
.uu-mse__pris{margin:0 0 8px;font-size:17px;font-weight:600;color:#14231d}
.uu-mse__p{margin:0 0 10px;font-size:17px;line-height:1.6;color:#2A312E}
.uu-mse__raad{margin:0 0 14px;font-size:15px;line-height:1.5;color:#2A312E;background:#EAF6F0;border-radius:8px;padding:10px 12px}
.uu-mse__knap{display:inline-flex;align-items:center;min-height:44px;box-sizing:border-box;background:var(--cta,#E8622A);color:#fff;font-size:16px;font-weight:600;padding:12px 20px;border-radius:8px;text-decoration:none}
.uu-mse__knap:hover,.uu-mse__knap:focus-visible{background:#d4551f;color:#fff}
@media (max-width:820px){
	.uu-mse{padding:16px;gap:12px}
	.uu-mse__billede{width:52px}
	.uu-mse__billede img{width:52px}
}

/* ===================================================================
   6. OKTOBER 2026: FORSIDENS "+N" PAA BILLEDET SOM PAA ALLE LADEBOKSE
   Henrik: "+" skal se ud som paa Alle ladebokse. Den store knap
   "+ Se 1 mere fra ..." under kortet skjules; "+N" paa billedet (lagt
   ind af forside-liste.js) folder ud som foer (Henriks valg "Folder ud").
   Samme udseende som .plus-brik. Ingen tvangsregler.
   =================================================================== */
.fs2-plus{ font-family:inherit; cursor:pointer; }
.fs2-plus[aria-expanded="true"]{ background:#FBE8CE; color:#7a4c15; }
.home .fs2-gruppe > .fs2-fold__knap{ display:none; }
.home .fs2-liste--flad .fs2-plus{ display:none; }


/* 8. OKTOBER 2026 (Henrik): "+N" for den anden slags (koeb/leje), naar der er filtreret. Samme udseende som de andre "+N". */
.fs2-andet{font-family:inherit;cursor:pointer}
.fs2-andet[aria-expanded="true"]{background:#FBE8CE;color:#7a4c15}


/* 8. OKTOBER 2026 (Henrik): UDKAST 2 - paa forsiden og Alle ladebokse.
   1) Tillaegget staar i en lille boks med bloede hjoerner og groen ring,
      altid paa egen linje under udbyderens navn.
   2) Telefon: Koeb/Leje er en lille diskret pille i kortets oeverste hoejre
      hjoerne, i de samme lyse farver som den gamle pille. Intet baand, intet buk.
      Laptop: Koeb/Leje staar som foer ved navnet, intet i hjoernet. */
.npk-navn .npk-tillaeg{display:inline-block;color:var(--color-primary-dark);background:var(--color-primary-light);border:1.5px solid var(--color-primary);border-radius:var(--radius-sm);padding:2px 9px;font-size:14px;font-weight:600;line-height:1.35}
.npk-navn .npk-tlbrud{flex-basis:100%;height:0}
.npk.npk--hjorne{position:relative}
.npk-hjorne{display:none}
/* 8/10 2026 (Henrik): tillaegget tættere paa navnet, saa de hoerer sammen. */
.npk--hjorne .npk-navn{row-gap:2px}
/* 8/10 2026 (Henrik): telefon - koeb/leje som et lille skraat hjoernebaand i
   pillens stoerrelse og lyse farver (lidt stoerre end pillen). */
@media (max-width:820px){
.npk-hjorne{display:block;position:absolute;top:-4px;right:-4px;width:60px;height:60px;overflow:hidden;z-index:3;pointer-events:none}
.npk-hjorne::before,.npk-hjorne::after{content:"";position:absolute;display:block;z-index:-1;border:2px solid #AEB9E3;border-top-color:transparent;border-right-color:transparent}
.npk-hjorne::before{top:0;left:0}
.npk-hjorne::after{bottom:0;right:0}
.npk-hjorne span{position:absolute;display:block;width:86px;left:-8px;top:13px;padding:2px 0;transform:rotate(45deg);text-align:center;font:700 11.5px/1.3 var(--font-body,'Inter'),sans-serif;letter-spacing:.04em;text-transform:uppercase;background:#E9EDF9;color:#35437F;box-shadow:0 1px 3px rgba(0,0,0,.10)}
.npk-hjorne--leje span{background:#E4F2EA;color:#17603C}
.npk-hjorne--leje::before,.npk-hjorne--leje::after{border-color:#A9D3BB;border-top-color:transparent;border-right-color:transparent}
.npk--hjorne .npk-navn .npk-badge--koeb,.npk--hjorne .npk-navn .npk-badge--leje,.npk--hjorne .npk-navn .npk-badge--butik{display:none}
}


/* 8. OKTOBER 2026 (Henrik): kortets eget hjoernebaand - slaas til pr. kort
   ("Hjoernebaand" paa kortet og i editoren), egen tekst og farve. Kun laptop,
   paa forsiden og Alle ladebokse. Telefonens hjoerne bruges af koeb/leje. */
.npk-baand{display:none}
@media (min-width:821px){
.npk-baand{display:block;position:absolute;top:-5px;right:-5px;width:74px;height:74px;overflow:hidden;pointer-events:none;z-index:4}
.npk-baand::before,.npk-baand::after{content:"";position:absolute;display:block;z-index:-1;border:3px solid var(--bm);border-top-color:transparent;border-right-color:transparent}
.npk-baand::before{top:0;left:0}
.npk-baand::after{bottom:0;right:0}
.npk-baand span{position:absolute;display:block;width:106px;left:-8px;top:15px;padding:4px 0;transform:rotate(45deg);background:var(--bf);color:#fff;font:700 11px/1.2 var(--font-body,'Inter'),sans-serif;letter-spacing:.06em;text-transform:uppercase;text-align:center;box-shadow:0 2px 6px rgba(0,0,0,.16)}
}
.npk-baand--groen{--bf:#17603C;--bm:#0E3F27}
.npk-baand--blaa{--bf:#35437F;--bm:#232D57}
.npk-baand--orange{--bf:#E05A1E;--bm:#A63F12}
.npk-baand--roed{--bf:#B42318;--bm:#7A1710}
.npk-baand--guld{--bf:#B07A1E;--bm:#7A5212}


/* 8/10 2026 (Henrik): laptop - mere luft mellem udbyderens navn, tillaegsboksen og pillerne. Telefonen er uroert. */
@media (min-width:821px){.npk--hjorne .npk-navn{row-gap:2px;margin-bottom:12px}}

/* 8/10 2026 (Henrik): kortets smaa maerker (+N og koeb/leje-label) maa ikke glide hen over filterbjaelken, naar man ruller. Kortet holder dem inde i sig selv. */
.npk.npk--hjorne{isolation:isolate}


/* 8. OKTOBER 2026 (Henrik): UDKAST - udbyderens logo i stedet for navnet paa
   kortet (forsiden og Alle ladebokse). Raekkefoelge: logo, tillaegsboks,
   Trustpilot-stjerner. Logoet staar i en fast lav ramme, saa alle kort er rolige. */
.npk-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.npk-navn .npk-logo{display:block;height:30px;width:auto;max-width:150px;object-fit:contain;object-position:left center}
.npk-tp-under{margin-top:2px;margin-bottom:6px}
.npk-tp-under .pk-tp{margin:0}
@media (max-width:820px){
.npk-navn .npk-logo{height:26px;max-width:140px}
}

/* 8/10 2026 (Henrik, logo-udkast): paa mobil staar logo, tillaegskasse og stjerner i den raekkefoelge til hoejre for billedet. */
@media (max-width:560px){.pk-wrap .npk-navn:has(.npk-logo),.uu-boks .npk-navn:has(.npk-logo){grid-row:1;grid-column:2}.pk-wrap .npk-tp-under,.uu-boks .npk-tp-under{grid-row:2;grid-column:2;margin-top:-4px}}

/* 9/10 2026 (Henrik): ens stoerrelse paa logoerne. Hoejden regnes ud for hvert logo ud fra dets form; mobil er lidt mindre. */
.npk-navn .npk-logo[style]{height:var(--lh,30px);max-width:150px}
@media (max-width:820px){.npk-navn .npk-logo[style]{height:calc(var(--lh,30px) * .87);max-width:140px}}

/* 9/10 2026 (Henrik, udkast): logoboksen oeverst paa udbydersiden er aflang, saa brede logoer ikke bliver smaa. */
.uu-hero__logo.uu-hero__logo--bred{width:fit-content;min-width:80px;max-width:100%;padding:0 18px}
.uu-hero__logo--bred img{max-width:none;max-height:none}

/* 10/10 2026 (Henrik, udkast): butikkens varer midt paa butikkernes sider (Wattoo, Proshop), vandret i stedet for kolonnen til hoejre. */
.uu-butikfeed .avv{ margin:0; padding:22px; }
.uu-butikfeed .avv__butik{ text-align:center; }
.uu-butikfeed .avv__h{ font-size:22px; }
.uu-butikfeed .avv__varer{ display:grid; grid-template-columns:1fr; gap:12px; text-align:left; }
@media (min-width:821px){
  .uu-butikfeed .avv__varer{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
  .uu-butikfeed .avv__vare{ flex-direction:column; align-items:center; justify-content:flex-start; text-align:center; padding:18px 14px; }
  .uu-butikfeed .avv__vbil{ flex:0 0 auto; width:120px; height:120px; }
  .uu-butikfeed .avv__vbil img{ max-width:120px; max-height:120px; }
  .uu-butikfeed .avv__vtxt{ align-items:center; }
}

/* 10/10 2026 (Henrik, udkast): installationskassen og farvede piller paa forsiden og Alle ladebokse. */
.npk-navn .npk-inst{ display:inline-block; background:#E8F0FB; color:#1F4F99; border:1.5px solid #A9C1EA; border-radius:var(--radius-sm,6px); padding:3px 10px; font-size:15px; font-weight:600; line-height:1.3; }
.npk .npk-specs .npk-spec--k-app:not(.er-valgt){ background:#EEE9FB; color:#4B3A8F; }
.npk .npk-specs .npk-spec--k-smart:not(.er-valgt){ background:#E6F1FB; color:#1F5C99; }
.npk .npk-specs .npk-spec--k-kabel:not(.er-valgt){ background:#FDEFE3; color:#8A4B12; }
.npk .npk-specs .npk-spec--k-brik:not(.er-valgt){ background:#F9E8F1; color:#8C2F62; }
.npk .npk-specs .npk-spec--k-skift:not(.er-valgt){ background:#E3F3F3; color:#1E6767; }
.npk .npk-specs .npk-spec--k-service:not(.er-valgt){ background:#EAF6EE; color:#1D6B3F; }
.npk .npk-specs .npk-spec--k-spar:not(.er-valgt){ background:#FFF1C2; color:#6E5200; }
.npk .npk-specs .npk-spec--k-el:not(.er-valgt), .npk .npk-specs .npk-spec--k-inst:not(.er-valgt){ background:#EEF1F4; color:#3A4650; }
.npk .npk-specs .npk-spec--k-kw:not(.er-valgt){ background:#fff; color:#0B7352; border:1.5px solid #0B7352; font-weight:700; gap:4px; } /* 11/10 2026 (Henrik, N478): hvid bund, groen tekst og lyn, groen kant (foer: fyldt groen med hvid tekst) */
.npk .npk-specs .npk-spec--k-kw .npk-lyn{ display:inline-block; flex:0 0 13px; }
/* 11/10 2026 (Henrik, N478): "Elaftale, kraeves" beholder sandfarven, men faar en kant i sin egen tone og lidt moerkere tekst,
   saa den ligner de andre piller (foer: ingen synlig kant og tekst #8A6420 = 4,89). Kun forsiden og Alle ladebokse.
   Henrik proevede rosa og valgte assistentens anbefaling. */
.npk.npk--hjorne .npk-specs .npk-spec--krav:not(.er-valgt){ border:1px solid #E8D3A8; color:#74510F; }
@media (min-width:821px){
  .npk .npk-specs{ gap:7px; }
  .npk .npk-specs .npk-spec{ font-size:14px; padding:4px 11px; }
  .npk .npk-specs .npk-spec--k-kw{ font-size:15px; padding:3.5px 12.5px; }
}

/* 11/10 2026 (Henrik, N484): "tilpas raekken ... nogle af kortene gaar ikke helt ud til deres magen".
   Maalt: paa laptop stod udbyderens andet kort af samme slags inde i en graa ramme med "Luk igen",
   14 px smallere i hver side end de andre kort og med 26/83 px afstand i stedet for 22 px.
   Mobilen var allerede flad (blokken under 820 px). Nu faar laptop det samme: ingen ramme,
   ingen "Luk igen", samme bredde, samme skygge og 22 px mellem alle kort. */
@media (min-width: 821px) {
  .home .fs2-liste--flad .fs2-fold__luk{ display:none; }
  .home .fs2-liste--flad .fs2-fold{ border:0; border-radius:0; background:none; padding:6px 0 0; margin:0; }
  .home .fs2-liste--flad .fs2-fold .pk-wrap{ margin-bottom:22px; }
  .home .fs2-liste--flad .fs2-fold .pk-wrap:last-of-type{ margin-bottom:16px; }
  .home .fs2-liste--flad .fs2-gruppe .pk-wrap[hidden] + .fs2-fold{ margin-top:0; }
  .home .fs2-liste--flad .fs2-fold .pk-wrap .npk{ box-shadow:0 2px 6px rgba(11,115,82,.10), 0 14px 34px rgba(11,115,82,.22); }
}

/* ============================================================
   11/10 2026 (Henrik, N483 + N486): LISTEN DELT I "MED ELAFTALE" OG "UDEN ELAFTALE"
   ------------------------------------------------------------
   Forsiden og Alle ladebokse bruger de samme regler (Henrik: "samme opsaetning
   som forsiden"). Skiltet: husets overskriftsskrift og moerkegroenne, hvid tekst
   (5,85), hjoerne 8. Ingen ny farve, ingen tvangsregler. Flyttet hertil fra
   forsidens egen fil, saa det kun staar eet sted.
   ============================================================ */
.fs2-sek{display:flex;flex-direction:column;gap:inherit}
.fs2-sek[hidden]{display:none}
#fs2-liste .fs2-sek__hoved,#product-grid .fs2-sek__hoved{margin:10px 2px 8px}
#fs2-liste .fs2-sek--uden .fs2-sek__hoved,#product-grid .fs2-sek--uden .fs2-sek__hoved{margin-top:4px}
#fs2-liste .fs2-sek__t,#product-grid .fs2-sek__t{display:inline-block;align-self:flex-start;font-family:'Sora',sans-serif;font-weight:600;font-size:17px;line-height:1.2;color:#fff;background:#0B7352;border-radius:8px;padding:9px 16px;margin:0;letter-spacing:0}
.fs2-sek-behov{margin:18px 0 22px}
@media (min-width:821px){#fs2-liste .fs2-sek__t,#product-grid .fs2-sek__t{font-size:20px;padding:10px 20px}}
/* Alle ladebokse faar samme luft som forsiden (maalt 11/10: kort til kort 34 mod forsidens 22 paa computer
   og 38 paa telefon; paa telefon stod bjaelken og listen 20 og 24 fra kanten mod husets 16). */
#product-grid.product-grid{gap:22px}
@media (min-width:821px){#product-grid.product-grid{gap:6px}}
@media (max-width:820px){.fsb-arkiv .archive-layout{padding-left:16px;padding-right:16px}.fsb-arkiv #fsb,.fsb-arkiv > .fsx > .wrap > .fsb__over{width:auto;margin-left:16px;margin-right:16px}}

/* 11/10 2026: Henrik vil have »Find din ladeboks« øverst på Alle ladebokse orange på telefonen,
   som knappen i toppen. Husets orange og samme mørkere orange ved tryk. Samme dag: også på laptop, og uden skygge (Henrik). */
.archive-header__cta{background:#E8622A;color:#fff;box-shadow:none}.archive-header__cta:hover{background:#D14E1C;color:#fff}

/* 11/10 2026: »Få din personlige anbefaling« nederst på Alle ladebokse er orange (Henrik), som knappen øverst på siden.
   Hvid tekst, ingen skygge, mørkere orange ved tryk. Kun på Alle ladebokse. */
.post-type-archive-ladeboks .cta-blok .btn-primary{background:#E8622A;border-color:#E8622A;color:#fff;box-shadow:none}.post-type-archive-ladeboks .cta-blok .btn-primary:hover{background:#D14E1C;border-color:#D14E1C;color:#fff}

/* 11/10 2026: »Hvad koster en ladeboks?« er taget af forsiden på telefonen, så siden bliver kortere (Henrik).
   Indholdet står stadig i siden og på laptop. */
@media (max-width:820px){.fsx section.blk:has(> .wrap > .pricegrid){display:none}}

/* 11/10 2026: »Find din ladeboks« nederst på forsiden er orange (Henrik), som knappen øverst på Alle ladebokse:
   hvid tekst, ingen skygge, mørkere orange ved tryk. Telefon og laptop. */
.fsx .bottomcta a{background:#E8622A;color:#fff;box-shadow:none}.fsx .bottomcta a:hover{background:#D14E1C;color:#fff}

/* 11/10 2026: »Hvad skal boksen kunne?« på telefonen (Henrik valgte udkast B med husets lyse mint):
   pillerne står to og to i tre rækker, så feltet er ca. 280 højt i stedet for 473. Mindst 44 høje.
   Gælder forsiden og Alle ladebokse. Ord og links er urørte. Boksen bag pillerne er hvid (Henrik). */
@media (max-width:820px){.fs2-sek-behov .fsx .behov,.fs2-sek-behov .behov{padding:18px 12px;background:#fff;box-shadow:0 4px 14px rgba(11,115,82,.08)}.fs2-sek-behov .behov p{margin-bottom:12px}.fs2-sek-behov .behov-chips{display:grid;grid-template-columns:1fr 1fr;gap:8px}.fs2-sek-behov .behov-chip{display:flex;align-items:center;justify-content:center;text-align:center;min-height:44px;padding:6px 8px;font-size:14px;line-height:18px;border-radius:22px;background:#EAF6F0;border-color:#CDE8D9;color:#0B7352}}

/* 11/10 2026: »Køb, leje eller køb i butik?« på telefonen (Henrik valgte udkast B): hvert kort er én række, man trykker på.
   Ikon i mint cirkel, overskrift og pris ved siden af, teksten under og en grøn pil i en cirkel til højre.
   »Se køb-priser« osv. står stadig i siden til skærmlæsere, men vises som pilen. Henrik sagde ja. */
@media (max-width:820px){
.fsx .typecards{gap:10px}
.fsx .typecards .tcard{position:relative;display:grid;grid-template-columns:44px 1fr;column-gap:12px;row-gap:2px;padding:14px 58px 14px 14px;border:1.5px solid #CDE8D9;border-radius:16px;background:#fff;box-shadow:0 4px 14px rgba(11,115,82,.08)}
.fsx .typecards .tcard__ic{grid-column:1;grid-row:1 / span 2;width:44px;height:44px;border-radius:50%;background:#EAF6F0;margin:0}
.fsx .typecards .tcard h3{grid-column:2;grid-row:1;margin:0;font-size:17px}
.fsx .typecards .tcard .tcard__pris{grid-column:2;grid-row:2;margin:0;color:#0B7352;font-weight:700;font-size:14px}
.fsx .typecards .tcard p{grid-column:1 / -1;grid-row:3;margin:8px 0 0;font-size:14px;line-height:1.45;color:#5B6B66}
.fsx .typecards .tcard .tcard__go{position:absolute;right:12px;top:50%;transform:translateY(-50%);width:36px;height:36px;border-radius:50%;background:#0B7352;color:transparent;font-size:0;overflow:hidden;margin:0}
.fsx .typecards .tcard .tcard__go::after{content:"\2192";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#fff;font-size:18px}
.fsx .typecards .tcard:hover{transform:none}
}

/* 11/10 2026 · BOKSEN »SAMME BOKS, FORSKELLIG PRIS« PÅ ALLE LADEBOKSE (Henrik, valg B for Modeller).
   Mørkegrøn efter Henriks ja (undtagelse fra reglen om hvide tekstkasser). Husets egne farver: bund #0B7352,
   overskrift og link hvide, tekst #DCEEE5 (4,85 mod bunden). Samme bredde og sidemargen som kortene. */
.bilo-modboks{max-width:1120px;margin:8px auto 40px;padding:0 16px;box-sizing:border-box}
.bilo-modboks__k{background:#0B7352;border-radius:14px;box-shadow:0 10px 28px rgba(0,0,0,.18);padding:20px 22px}
.bilo-modboks__h{font-family:var(--font-display);font-weight:600;font-size:20px;line-height:1.3;color:#fff;margin:0 0 6px}
.bilo-modboks__t{font-size:16px;line-height:1.55;color:#DCEEE5;margin:0 0 10px}
.bilo-modboks__a{display:inline-block;padding:11px 0;font-size:16px;font-weight:600;line-height:1.4;color:#fff;text-decoration:none}
.bilo-modboks__a:hover{text-decoration:underline}
.bilo-modboks__a:focus-visible{outline:2px solid #fff;outline-offset:3px;border-radius:4px}
@media (min-width:821px){.bilo-modboks{padding:0}}

/* 11/10 2026 · DEN DÆMPEDE GRÅ (Henrik, valg A): #6B7B76 (4,45 på hvid) er skiftet til husets egen grå #5B6B65
   (ca. 5,6 på hvid) i alle tekstfarver og i variablerne for dæmpet tekst, også i adressefeltet og motorens
   telefonlag. Kanten, der brugte samme farve, og reserveværdierne inde i var() er urørte.
   Kopier i kontrol-11oktober-2026/foer/ (-foer-graa-11okt). */

/* 11/10 2026 · MODELSIDERNE I HUSETS FARVER (Henrik: »yes det er godkendt«). Zaptec Go-siden og oversigten over
   modeller får den lysegrønne bund som siderne med produktkort; toppen samles i et hvidt kort, »Billigst ved køb« står
   mørkegrønt, tabellerne får mørkegrøn overskriftsrække, »Se udbyder« bliver en knap med grøn kant (vores egen side,
   derfor ikke orange). Kun husets farver. Ingen ord ændret. Kopi: kontrol-11oktober-2026/foer/style.css-foer-modelsider-11okt.txt */
body.bilo-rute-model,body.bilo-rute-modeller{background:#DCEEE5}
body.bilo-rute-model .mo-top{background:#fff;border:1px solid #CFE6DC;border-radius:14px;box-shadow:0 1px 3px rgba(11,115,82,.08),0 10px 28px rgba(11,115,82,.16);padding:20px}
body.bilo-rute-model .mo-billede{background:#EAF6F0;border-color:#CDE8D9}
body.bilo-rute-model .mo-tal{margin:0}
body.bilo-rute-model .mo-tal__kort{background:#EAF6F0;border-color:#CDE8D9;border-radius:12px}
body.bilo-rute-model .mo-tal__kort:first-child{background:#0B7352;border-color:#0B7352}
body.bilo-rute-model .mo-tal__kort:first-child .mo-tal__navn,body.bilo-rute-model .mo-tal__kort:first-child .mo-tal__hvem{color:#DCEEE5}
body.bilo-rute-model .mo-tal__kort:first-child .mo-tal__stor{color:#fff}
@media (min-width:821px){body.bilo-rute-model .mo-tal{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}}
@media (max-width:820px){body.bilo-rute-model .mo-top{padding:14px}body.bilo-rute-model .mo-billede{display:flex;align-items:center;justify-content:center;padding:10px}body.bilo-rute-model .mo-billede img{max-height:150px;width:auto}body.bilo-rute-model .mo-tal{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}body.bilo-rute-model .mo-tal__kort{padding:12px}}
@media (min-width:641px){body.bilo-rute-model .mo-tabelboks{border-color:#CFE6DC;border-radius:14px;box-shadow:0 1px 3px rgba(11,115,82,.08),0 10px 28px rgba(11,115,82,.16)}}
body.bilo-rute-model .mo-tabel thead th{background:#0B7352;color:#fff}
@media (max-width:640px){body.bilo-rute-model .mo-tabel tr{border-color:#CFE6DC;box-shadow:0 1px 3px rgba(11,115,82,.08)}body.bilo-rute-model .mo-tabel tr.mo-billigst{border-color:#0B7352}}
body.bilo-rute-model .mo-selink{display:inline-flex;align-items:center;min-height:44px;line-height:1.2;padding:0 16px;border:1.5px solid #0B7352;border-radius:999px;color:#0B7352;font-weight:600;text-decoration:none;white-space:nowrap}
body.bilo-rute-model .mo-selink:hover{background:#EAF6F0}
body.bilo-rute-model .mo-punkter li{background:#fff;border-color:#CFE6DC;border-left:4px solid #0B7352;box-shadow:0 1px 3px rgba(11,115,82,.08)}
body.bilo-rute-model .mo-aerlig{background:#EAF6F0;border-color:#CDE8D9;border-radius:14px}
body.bilo-rute-model .mo-knap:not(.mo-knap--linje){background:#0B7352;border-color:#0B7352;color:#fff;font-weight:600}
body.bilo-rute-model .mo-knap:not(.mo-knap--linje):hover{background:#08573E;border-color:#08573E;color:#fff}
body.bilo-rute-modeller .mv-kort__et{border-color:#CFE6DC;border-radius:14px;box-shadow:0 1px 3px rgba(11,115,82,.08),0 10px 28px rgba(11,115,82,.16)}

/* 11/10 2026 · ØKONOMI-GRUPPEN I FILTERBJÆLKEN (Henrik: ja, forsiden og Alle ladebokse). »Økonomi« og knapperne
   Ved opstart / 1-5 år får en lys mint baggrund, så de ses som én gruppe som Alle/Køb/Leje. Beløbsfeltet er ikke med.
   Kun laptop; på telefon vises gruppen ikke i bjælken. Kopi: foer/style.css-foer-oekonomi-11okt.txt */
@media (min-width:821px){.fsb .fsb__grp{background:#EAF6F0;border:1px solid #CDE8D9;border-radius:999px;padding:4px 6px 4px 18px}}

/* ============================================================
   12. OKTOBER 2026 (skemaets punkt 12, N260): LADEAGENTENS HOVEDKNAP
   Henriks ja 12/10: knappen »Ja tak, hold øje« er fyldt orange med
   hvid tekst og uden skygge, som de andre vigtige knapper (orange er
   CTA-farven, afgjort 27/9). Afløser ringen fra blok 18 (24/8) for
   denne knap. ».oneline«-knappen er urørt. Telefonens udgave var
   allerede fyldt orange.
   ============================================================ */
.la .go{ background:#E8622A; color:#fff; box-shadow:none; }
.la .go:hover{ background:#D14E1C; color:#fff; box-shadow:none; }

/* ============================================================
   12. OKTOBER 2026 (skemaets punkt 13, N326): NOTEN PÅ TELEFON
   Henriks ja 12/10: den lille tekst under »Billigst lige nu« /
   kampagnekortet (fx »Slutter om 3 dage«, »af klikkene gik til«) løftes
   fra 11,5 til husets mindste, 13. Kun telefonens lag.
   ============================================================ */
@media (max-width: 820px) {
  .fscta__note{ font-size:13px; }
}

/* ============================================================
   12. OKTOBER 2026 (skemaets punkt 14a, 14d, 14e, N496): LAPTOP-UDGAVEN
   AF TELEFONÆNDRINGERNE FRA 11/10. Henriks ja 12/10. Kun fra 821.
   14a: »Se tilbud« under »Se også« i anbefalingen er orange som på
        telefon (fører ud af huset).
   14d: »Hvad skal boksen kunne?«: valgene i husets lyse mint på hvid
        boks, som på telefon. Pillerne står stadig på række på laptop.
   14e: »Køb, leje eller køb i butik?«: tre rene rækker med ikon i mint
        cirkel, overskrift og pris, teksten under og grøn pil til højre,
        som på telefon. Ordene står stadig i siden til skærmlæsere.
   14b er ikke bygget: laptop har ingen videre-knap. 14c: Henriks nej.
   ============================================================ */
@media (min-width: 821px) {
  .motor-ogsaa .motor-alt .motor-alt__link{ display:inline-block; padding:0 16px; height:38px; line-height:38px; border-radius:999px; background:#E8622A; color:#fff; }
  .motor-ogsaa .motor-alt .motor-alt__link:hover,
  .motor-ogsaa .motor-alt .motor-alt__link:focus-visible{ background:#D14E1C; color:#fff; }

  .fs2-sek-behov .fsx .behov, .fs2-sek-behov .behov{ background:#fff; box-shadow:0 4px 14px rgba(11,115,82,.08); }
  .fs2-sek-behov .behov-chip{ background:#EAF6F0; border-color:#CDE8D9; color:#0B7352; }
  .fs2-sek-behov .behov-chip:hover{ background:#DCEEE5; border-color:#9FD3B8; color:#0B7352; }

  .fsx .typecards{ grid-template-columns:1fr; gap:12px; }
  .fsx .typecards .tcard{ position:relative; display:grid; grid-template-columns:44px 1fr; column-gap:14px; row-gap:2px; padding:16px 70px 16px 18px; border:1.5px solid #CDE8D9; border-radius:16px; background:#fff; box-shadow:0 4px 14px rgba(11,115,82,.08); }
  .fsx .typecards .tcard__ic{ grid-column:1; grid-row:1 / span 2; width:44px; height:44px; border-radius:50%; background:#EAF6F0; margin:0; }
  .fsx .typecards .tcard h3{ grid-column:2; grid-row:1; margin:0; font-size:18px; }
  .fsx .typecards .tcard .tcard__pris{ grid-column:2; grid-row:2; margin:0; color:#0B7352; font-weight:700; font-size:15px; }
  .fsx .typecards .tcard p{ grid-column:2; grid-row:3; margin:6px 0 0; font-size:15px; line-height:1.5; color:#5B6B66; }
  .fsx .typecards .tcard .tcard__go{ position:absolute; right:16px; top:50%; transform:translateY(-50%); width:40px; height:40px; border-radius:50%; background:#0B7352; color:transparent; font-size:0; overflow:hidden; margin:0; }
  .fsx .typecards .tcard .tcard__go::after{ content:"\2192"; position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:#fff; font-size:19px; }
  .fsx .typecards .tcard:hover{ transform:none; border-color:#9FD3B8; box-shadow:0 8px 22px rgba(11,115,82,.12); }
}

/* ============================================================
   12. OKTOBER 2026 (skemaets punkt 16, N413): »LÆS MERE« I »SE OGSÅ« PÅ GUIDERNE
   Lille linje under listen med de fire korte svarsider. Husets lille
   tekst 15, grønne links. Trykflade mindst 44 høj på telefon.
   ============================================================ */
.hjornesten__laesmere{ margin:18px 0 0; font-size:15px; line-height:1.6; color:#5B6B65; }
.hjornesten__laesmere-lbl{ font-weight:700; color:#0B7352; }
.hjornesten__laesmere a{ color:#0B7352; font-weight:600; text-decoration:underline; text-underline-offset:3px; }
.hjornesten__laesmere a:hover{ color:#064A35; }
.hjornesten__laesmere-sep{ margin:0 6px; color:#5B6B65; }
@media (max-width: 820px) {
  .hjornesten__laesmere-sep{ display:none; }
  .hjornesten__laesmere-lbl{ display:block; }
  .hjornesten__laesmere a{ display:flex; align-items:center; min-height:44px; }
}

/* ============================================================
   12. OKTOBER 2026 (skemaets punkt 14b, N501): VEJEN VIDERE I MOTOREN PÅ LAPTOP
   Henriks idé og ja 12/10: laptop har ingen videre-knap; vejen videre er
   bjælkens hjørne (»Vælg boligtype«, »Se resultatet«). Det gøres tydeligt
   som telefonens videre-knap: lysegrøn pille, mørk tekst, orange cirkel med
   pilen. Kun når trinnet er lukket, og kun fra 821. Ingen nye ord.
   ============================================================ */
@media (min-width: 821px) {
  html .motor .motor-trin--klap:not(.is-aaben) .motor-trin__hint{ background:#9BE7BC; color:#0E2C22; font-weight:700; font-size:15px; line-height:1.2; padding:10px 46px 10px 18px; border-radius:999px; box-shadow:0 0 0 4px rgba(155,231,188,.25); }
  html .motor .motor-trin--klap:not(.is-aaben) .motor-trin__pil{ width:30px; height:30px; padding:6px; margin-left:-46px; border-radius:50%; background:#E8622A; color:#fff; position:relative; z-index:1; box-sizing:border-box; }
  html .motor .motor-trin--klap:not(.is-aaben) .motor-trin__bjaelke:hover .motor-trin__hint{ background:#86DDAE; }
}

/* ===========================================================
   LINKS I BROEDTEKSTEN FAAR EN STREG UNDER (14. oktober 2026, Henrik)
   Lighthouse: links midt i en tekst maa ikke kun kendes paa farven.
   Gaelder kun almindelige links i afsnit inde i sidens indhold;
   knapper og kort (links med en klasse) er ikke roert, og farven er
   den samme som foer.
   =========================================================== */
main p a:not([class]) {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 2px;
}

/* ===========================================================
   UDBYDERE UDEN PARTNERLINK (14. oktober 2026, Henrik)
   »Tjek dit match« er orange, og luppen i pladefeltet bliver
   orange, naar knappen er trykket (uu-adresse.js).
   =========================================================== */
.uu-verdikt__k--orange { background: var(--cta, #E8622A); color: #fff; }
.uu-verdikt__k--orange:hover { background: var(--cta-hover, #D0521C); }
.fh__lookup.uu-lup-orange { background: var(--cta-orange, #E8622A); }
.fh__lookup.uu-lup-orange:hover { background: #d4551f; }
/* 14/10 2026 kl. 20.36 (Henrik): »Find dit bedste match« som lys orange tekst i stedet for en knap.
   #FFB27A er valgt, fordi husets orange kun giver kontrast 1,9 paa den moerkegroenne boks; denne giver ca. 3,5 til 4,5. */
.npk-match { display: block; width: 100%; background: none; border: 0; padding: 4px 0; margin: 4px 0 2px; font-family: inherit; font-size: 14px; font-weight: 700; color: #FFB27A; cursor: pointer; text-align: center; }
.npk-match:hover { text-decoration: underline; }

/* 14/10 2026 (Henrik 23.26, udkast 4): forsidens to topkort »Billigst lige nu« og »Faldet i pris« som produktkort.
   Hvid glidende over i husets mint, boksens billede paa hvid plade, prisen i den moerkegroenne boks som paa produktkortene.
   Hele kortet er et link ind til udbyderens side hos os; knappen er derfor groen/hvid, ikke orange. Kun computer (#top er skjult paa telefon). Ingen tvangsregler. */
.fstop .fstop__cards{ gap:24px; }
.fstop a.fsk{ display:grid; grid-template-columns:96px minmax(0,1fr) 172px; gap:16px; align-items:center; padding:16px; border:1px solid #B9DCCB; border-radius:20px;
  background:linear-gradient(100deg, #FFFFFF 0%, #F4FAF7 30%, #DCEEE5 72%, #C7E6D6 100%);
  box-shadow:0 2px 6px rgba(11,115,82,.10), 0 14px 34px rgba(11,115,82,.22); color:#1c2b26; text-decoration:none; transition:transform .2s ease, box-shadow .2s ease; }
.fstop a.fsk:hover, .fstop a.fsk:focus-visible{ transform:translateY(-3px); box-shadow:0 4px 10px rgba(11,115,82,.12), 0 20px 40px rgba(11,115,82,.26); color:#1c2b26; }
.fsk__img{ width:96px; height:110px; border-radius:14px; background:#fff; box-shadow:0 4px 12px rgba(11,115,82,.12); display:flex; align-items:center; justify-content:center; }
.fsk__img img{ max-height:96px; max-width:82px; width:auto; height:auto; object-fit:contain; }
.fsk__tekst{ display:flex; flex-direction:column; align-items:flex-start; min-width:0; }
.fsk__tag{ display:inline-block; font:700 13px/1 var(--font-display,'Sora'),sans-serif; letter-spacing:.06em; text-transform:uppercase; color:#0B7352; background:#fff; border:1px solid #B9DCCB; padding:7px 10px; border-radius:999px; }
.fsk__navn{ font:700 17px/1.3 var(--font-display,'Sora'),sans-serif; letter-spacing:-.01em; margin-top:10px; color:#1c2b26; }
.fsk__under{ font:500 14px/1.35 var(--font-body,'Inter'),sans-serif; color:#2E6B4F; margin-top:4px; }
.fsk__panel{ align-self:stretch; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:6px; border-radius:14px; padding:14px 12px 12px; text-align:center; color:#fff;
  background:linear-gradient(160deg, #2E6B4F, #0B7352 55%, #0C2C23); }
.fsk__lbl{ font:600 13px/1 var(--font-body,'Inter'),sans-serif; letter-spacing:.08em; text-transform:uppercase; color:#DCEEE5; }
.fsk__foer{ font:500 15px/1 var(--font-body,'Inter'),sans-serif; color:#BFE8D3; text-decoration:line-through; }
.fsk__pris{ font:800 28px/1 var(--font-display,'Sora'),sans-serif; color:#fff; font-variant-numeric:tabular-nums; white-space:nowrap; }
.fsk__cta{ margin-top:6px; display:inline-flex; align-items:center; justify-content:center; min-height:40px; padding:0 12px; border:1.5px solid rgba(255,255,255,.85); border-radius:999px;
  font:700 15px/1 var(--font-display,'Sora'),sans-serif; color:#fff; white-space:nowrap; transition:background .2s ease, color .2s ease; }
.fstop a.fsk:hover .fsk__cta, .fstop a.fsk:focus-visible .fsk__cta{ background:#fff; color:#0B7352; }
/* Med annoncevinduet som tredje felt er kortene smallere: prisboksen lægger sig under teksten. */
.fstop__cards--tre a.fsk{ grid-template-columns:80px minmax(0,1fr); }
.fstop__cards--tre .fsk__img{ width:80px; height:92px; }
.fstop__cards--tre .fsk__panel{ grid-column:1 / -1; }

/* ==========================================================================
   15. OKTOBER 2026 (Henrik, udkast C): SIDEFODEN MED KUN DET NOEDVENDIGE
   12 links i tre spalter (Kontakt, Genveje, Om sitet) plus logo og tekst.
   Telefon: logo oeverst, Genveje og Om sitet side om side, Kontakt nederst paa
   en linje. Computer (fra 821): fire spalter. Trykflader 44 paa telefon.
   Ingen nye farver, ingen tvungne regler. Gammel udgave i kontrol-15oktober-2026/foer.
   ========================================================================== */
.sfn .sfn-inner{display:grid;grid-template-columns:1fr 1fr;gap:24px 20px;max-width:1200px;margin:0 auto;padding:32px 16px 20px;box-sizing:border-box}
.sfn .sfn-brand{grid-column:1/-1}
.sfn .sfn-brand .site-footer__logo{display:block}
.sfn .sfn-brand svg{width:200px;height:auto;display:block}
.sfn .site-footer__intro{margin:12px 0 0;max-width:440px}
.sfn .site-footer__kol-titel{color:#fff;font-size:15px;font-weight:700;margin:0;line-height:1.3}
.sfn .sfn-kontakt{grid-column:1/-1;order:5}
.sfn ul{list-style:none;margin:6px 0 0;padding:0}
.sfn li{margin:0}
.sfn li a{display:inline-flex;align-items:center;min-height:44px;font-size:15px;color:#CFE6DC;text-decoration:none}
.sfn li a:hover{color:#fff;text-decoration:underline}
.sfn .site-footer__cvr{min-height:44px;display:flex;align-items:center;font-size:15px;color:#CFE6DC}
.sfn .sfn-kontakt ul{display:flex;flex-wrap:wrap;column-gap:22px}
@media (min-width:821px){
.sfn .sfn-inner{grid-template-columns:1.7fr 1fr 1fr 1fr;gap:28px 40px;padding:44px 24px 32px}
.sfn .sfn-brand{grid-column:auto}
.sfn .sfn-kontakt{grid-column:auto;order:0}
.sfn .sfn-kontakt ul{display:block}
.sfn li a,.sfn .site-footer__cvr{min-height:34px}
}

/* ==========================================================================
   15. OKTOBER 2026 (Henrik): OM BILOPLADNING.DK SKREVET OM
   Boksen »Kort fortalt« i afsnittet om penge og kortet »Hvem står bag«.
   Kun husets farver, radier og tekststørrelser (17 fed navn, 15 det små).
   Luft: 8 under overskriften, 26 til teksten efter, samme bredde som teksten (58ch).\n   Ingen tvungne regler. Billedet (klassen om-person__billede) sættes ind,
   når Henrik sender det. Gammel udgave i kontrol-15oktober-2026/om-side-test/foer.
   ========================================================================== */
.bilo-laesestil .entry-content .om-kort-fortalt{background:var(--color-primary-light);border-left:4px solid var(--color-primary-dark);border-radius:var(--radius-md);padding:16px 20px;margin:8px 0 26px;max-width:58ch;box-sizing:border-box}
.bilo-laesestil .entry-content .om-kort-fortalt p{margin:0}
.bilo-laesestil .entry-content .om-kort-fortalt p.om-kort-fortalt__t{font-weight:700;color:var(--color-primary-dark);font-size:15px;margin:0 0 4px}
.bilo-laesestil .entry-content .om-person{display:flex;gap:20px;align-items:flex-start;background:var(--color-bg-white);border:1px solid var(--color-border);border-radius:var(--radius-md);padding:20px;margin-top:8px;max-width:58ch;box-sizing:border-box}
.bilo-laesestil .entry-content .om-person__billede{flex:0 0 120px;width:120px;height:120px;border-radius:50%;object-fit:cover}
.bilo-laesestil .entry-content .om-person__tekst p{margin:0 0 12px}
.bilo-laesestil .entry-content .om-person__tekst p:last-child{margin:0}
.bilo-laesestil .entry-content .om-person__tekst p.om-person__navn{font-weight:700;font-size:17px;color:var(--color-text);margin:0}
.bilo-laesestil .entry-content .om-person__tekst p.om-person__rolle{color:var(--color-text-muted);font-size:15px;margin:0 0 12px}
@media (max-width:820px){.bilo-laesestil .entry-content .om-person{flex-direction:column}}