/**
 * DK Synstjek.
 *
 * Alt er scopet under .dk-syn og .dk-syn-side, fordi temaet ellers slår
 * igennem med text-transform på overskrifter og meget store h2'er.
 *
 * Farver: mørke toner til tekst (kontrast), lyse toner kun som baggrund.
 * Grafens farver følger dataviz-paletten — tal og labels bærer aldrig
 * seriefarven, og status vises altid med ikon plus tekst, aldrig farve alene.
 */

.dk-syn,
.dk-syn-side {
	--dk-ink: #16212b;
	--dk-ink-2: #4a5b68;
	--dk-muted: #7a8b97;
	--dk-line: #dde5ec;
	--dk-grid: #e8eef3;
	--dk-bg: #f5f8fb;
	--dk-blue: #1a5fb4;
	--dk-blue-dark: #16509a;
	--dk-dark: #16212b;

	--dk-green: #1a7f4b;
	--dk-green-bg: #e7f6ee;
	--dk-green-line: #b5e2c9;
	--dk-amber: #955c00;
	--dk-amber-bg: #fdf3e0;
	--dk-amber-line: #f0d5a2;
	--dk-red: #b3261e;
	--dk-red-bg: #fdecea;
	--dk-red-line: #f3c2be;

	--dk-serie: #2a78d6;
	--dk-kritisk: #d03b3b;

	color: var(--dk-ink);
}

/* ==========================================================
   SIDEN — nulstiller temaets typografi i vores eget område
   ========================================================== */

/* Siden koerer paa Astras "page builder"-skabelon (samme som /bilsyn/), altsaa
   fuld bredde uden temaets boks. Derfor saetter vi selv baandene og kolonnen:
   .dk-baand gaar kant til kant, .dk-indhold er laeselinjen indeni. */
/* font-size/line-height nulstilles her og saettes paa boernene. Ellers laver
   linjeskiftene MELLEM baandene tomme linjebokse — det gav en 28 px graa
   stribe under heroen. */
.dk-syn-side {
	margin: 0;
	font-size: 0;
	line-height: 0;
}
.dk-indhold, .dk-syn { font-size: 17px; line-height: 1.65; }
.dk-indhold { max-width: 760px; margin: 0 auto; padding: 0 20px; }
.dk-baand { width: 100%; padding: 52px 0; }
.dk-baand.er-lys { background: var(--dk-bg); }
.dk-baand.er-hvid { background: #fff; }
.dk-baand.er-moerk {
	background: linear-gradient(180deg, #10243d 0%, #0b1826 100%);
	padding: 56px 0;
}

/* afsluttende tilbud */
.dk-slut { text-align: center; }
.dk-syn-side .dk-baand.er-moerk h2 { color: #fff; font-size: 30px; margin: 0 0 12px; }
.dk-syn-side .dk-baand.er-moerk p { color: rgba(255,255,255,.78); }
.dk-syn-side .dk-slut > p:first-of-type { max-width: 560px; margin: 0 auto 24px; font-size: 17.5px; }
.dk-slut-knapper { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin: 0 0 16px !important; }
.dk-syn-side .dk-knap {
	display: inline-flex; align-items: center; justify-content: center;
	background: #fff; color: #10243d !important; text-decoration: none;
	font-weight: 700; font-size: 16.5px; padding: 15px 26px; border-radius: 10px;
	border: 2px solid #fff; transition: background .15s, color .15s;
}
.dk-syn-side .dk-knap:hover { background: #dce9f8; }
.dk-syn-side .dk-knap.er-tom { background: transparent; color: #fff !important; border-color: rgba(255,255,255,.4); }
.dk-syn-side .dk-knap.er-tom:hover { background: rgba(255,255,255,.1); }
.dk-syn-side .dk-slut-note { font-size: 14.5px !important; color: rgba(255,255,255,.55) !important; margin: 0 !important; }
.dk-baand > .dk-indhold > :first-child { margin-top: 0; }
.dk-syn-side p { font-size: 17px; line-height: 1.65; margin: 0 0 1.1em; color: var(--dk-ink); }
.dk-syn-side h2,
.dk-syn-side h3 { text-transform: none; letter-spacing: -0.01em; color: var(--dk-ink); }
.dk-syn-side h2 { font-size: 27px; line-height: 1.25; margin: 2.4em 0 0.7em; font-weight: 700; }
.dk-syn-side h3 { font-size: 19px; line-height: 1.35; margin: 1.6em 0 0.4em; font-weight: 700; }
.dk-syn-side > h2:first-child { margin-top: 1.2em; }
.dk-syn-side a { color: var(--dk-blue); }

/* manchet */
.dk-syn-side .dk-manchet {
	font-size: 19px;
	line-height: 1.55;
	color: var(--dk-ink-2);
	margin: 0 0 1.6em;
}

/* ==========================================================
   FORMULAR
   ========================================================== */

.dk-syn { max-width: 760px; margin: 0 auto 2.2em; padding: 0 20px; box-sizing: border-box; }
.dk-syn.has-hero { max-width: none; margin: 0; padding: 0; }

/* ==========================================================
   HERO — moerkt baand i fuld bredde
   Temaets header er transparent paa denne skabelon, saa den ligger
   OVEN PAA heroen. Derfor den store topmargen: uden den forsvinder
   overskriften ind under menuen.
   ========================================================== */

.dk-syn__hero {
	width: 100%;
	padding: 172px 20px 66px;
	box-sizing: border-box;
	background:
		radial-gradient(120% 130% at 50% -20%, #1d3f6b 0%, rgba(29,63,107,0) 62%),
		linear-gradient(180deg, #0f2136 0%, #0b1826 100%);
	position: relative;
	overflow: hidden;
}
/* Svage vejstriber. Rent dekorativt, koster ingen billedhentning. */
.dk-syn__hero:after {
	content: ""; position: absolute; inset: 0; pointer-events: none;
	background-image: repeating-linear-gradient(115deg,
		rgba(255,255,255,.028) 0 2px, rgba(255,255,255,0) 2px 46px);
}
.dk-syn__hero-in { position: relative; z-index: 1; max-width: 700px; margin: 0 auto; text-align: center; }

.dk-syn .dk-syn__hero-tit {
	color: #fff; font-size: 46px; line-height: 1.1; font-weight: 800;
	letter-spacing: -1.2px; margin: 0 0 14px; text-transform: none;
}
.dk-syn .dk-syn__hero-lead {
	color: rgba(255,255,255,.76); font-size: 18.5px; line-height: 1.55;
	margin: 0 auto 26px; max-width: 560px;
}

.dk-syn__trust {
	list-style: none; margin: 18px 0 0; padding: 0;
	display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 22px;
}
.dk-syn__trust li {
	display: flex; align-items: center; gap: 7px; margin: 0;
	color: rgba(255,255,255,.72); font-size: 14.5px; font-weight: 600;
}
.dk-syn__trust svg { width: 15px; height: 15px; color: #4fc98a; flex: 0 0 15px; }

/* Resultatet lander paa et lyst baand, saa det er tydeligt adskilt fra heroen. */
.dk-syn__out-wrap { width: 100%; }
.dk-syn.har-svar .dk-syn__out-wrap {
	background: var(--dk-bg); border-bottom: 1px solid var(--dk-line);
	padding: 34px 20px 44px; box-sizing: border-box;
}
.dk-syn.har-svar .dk-syn__out { max-width: 760px; margin: 0 auto; }

.dk-syn__form { display: flex; gap: 10px; flex-wrap: wrap; }
.dk-syn__plate { position: relative; flex: 1 1 260px; min-width: 200px; }
.dk-syn__plate:before {
	content: "DK";
	position: absolute; left: 0; top: 0; bottom: 0; width: 38px;
	background: #0b3b8c; color: #fff; font-size: 11px; font-weight: 700;
	display: flex; align-items: flex-end; justify-content: center;
	padding-bottom: 9px; border-radius: 10px 0 0 10px; letter-spacing: .5px;
}
.dk-syn__plate input {
	width: 100%; padding: 18px 14px 18px 52px;
	font-size: 22px; font-weight: 700; letter-spacing: 3px; text-transform: uppercase;
	border: 2px solid #c4d3e0; border-radius: 10px; background: #fff;
	font-family: inherit; box-sizing: border-box; color: var(--dk-ink);
}
.dk-syn__plate input::placeholder { color: #9fb0bd; font-weight: 600; letter-spacing: 2px; }
.dk-syn__plate input:focus { outline: 0; border-color: var(--dk-blue); box-shadow: 0 0 0 3px rgba(26,95,180,.15); }
.dk-syn__form button {
	background: var(--dk-blue); color: #fff; border: 0; border-radius: 10px;
	padding: 18px 30px; font-size: 17px; font-weight: 700; cursor: pointer;
	font-family: inherit; transition: background .15s;
}
.dk-syn__form button:hover { background: var(--dk-blue-dark); }
.dk-syn .dk-syn__hint { font-size: 13.5px; color: var(--dk-muted); margin: 10px 0 0; }

/* Formularen i heroen: hvidt felt paa moerk bund, stoerre og med loeft. */
.dk-syn__hero .dk-syn__form {
	max-width: 560px; margin: 0 auto; gap: 12px;
	background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.13);
	border-radius: 16px; padding: 12px;
	backdrop-filter: blur(2px);
}
.dk-syn__hero .dk-syn__plate input {
	border-color: transparent; font-size: 24px; padding: 19px 14px 19px 56px;
	box-shadow: 0 1px 2px rgba(0,0,0,.18);
}
.dk-syn__hero .dk-syn__plate input:focus {
	border-color: #6aa9f0; box-shadow: 0 0 0 3px rgba(106,169,240,.35);
}
.dk-syn__hero .dk-syn__form button {
	background: #2a78d6; padding: 19px 32px; font-size: 17.5px;
	box-shadow: 0 2px 10px rgba(0,0,0,.25);
}
.dk-syn__hero .dk-syn__form button:hover { background: #1f66bd; }
.dk-syn .dk-syn__loading { color: var(--dk-muted); padding: 20px 0; }

.dk-syn__out { margin-top: 28px; }

/* ==========================================================
   STATUSKORT — sidens vigtigste element
   ========================================================== */

.dk-syn__status {
	border-radius: 16px; padding: 30px 24px; text-align: center;
	border: 1px solid; margin: 0 0 14px;
}
.dk-syn__status.is-green { background: var(--dk-green-bg); border-color: var(--dk-green-line); }
.dk-syn__status.is-amber { background: var(--dk-amber-bg); border-color: var(--dk-amber-line); }
.dk-syn__status.is-red   { background: var(--dk-red-bg);   border-color: var(--dk-red-line); }

.dk-syn__status-ikon { width: 40px; height: 40px; margin: 0 auto 10px; display: block; }
.dk-syn .dk-syn__lab { font-size: 15px; font-weight: 700; margin: 0 0 2px; letter-spacing: .2px; }
.dk-syn .dk-syn__big { font-size: 52px; font-weight: 800; letter-spacing: -2px; line-height: 1.05; margin: 0; }
.dk-syn .dk-syn__clock { font-size: 16px; font-weight: 600; margin: 8px 0 0; font-variant-numeric: tabular-nums; opacity: .85; }
.dk-syn .dk-syn__date { font-size: 15.5px; color: var(--dk-ink); margin: 14px 0 0; }
.dk-syn .dk-syn__status.is-green .dk-syn__lab, .dk-syn__status.is-green .dk-syn__big, .dk-syn__status.is-green .dk-syn__clock { color: var(--dk-green); }
.dk-syn .dk-syn__status.is-amber .dk-syn__lab, .dk-syn__status.is-amber .dk-syn__big, .dk-syn__status.is-amber .dk-syn__clock { color: var(--dk-amber); }
.dk-syn .dk-syn__status.is-red   .dk-syn__lab, .dk-syn__status.is-red   .dk-syn__big, .dk-syn__status.is-red   .dk-syn__clock { color: var(--dk-red); }

/* ==========================================================
   NØGLETAL
   ========================================================== */

.dk-syn__tiles {
	/* To ad gangen. Temaets indholdskolonne er ~620 px bred, og fire fliser
	   dér giver ~145 px hver — for lidt til "529.378 km" på én linje. */
	display: grid; grid-template-columns: 1fr 1fr;
	gap: 12px; margin: 0 0 26px;
}
.dk-syn__tile {
	background: #fff; border: 1px solid var(--dk-line); border-radius: 12px;
	padding: 15px 16px; display: flex; gap: 12px; align-items: flex-start;
}
.dk-syn__tile-ic {
	flex: 0 0 38px; width: 38px; height: 38px; border-radius: 10px;
	background: rgba(26,95,180,.09); display: flex; align-items: center; justify-content: center;
}
.dk-syn__tile-ic svg { width: 20px; height: 20px; }
.dk-syn__tile > span:last-child { display: block; min-width: 0; }
.dk-syn .dk-syn__tile-lab {
	display: block;
	font-size: 11.5px; text-transform: uppercase; letter-spacing: .5px;
	color: var(--dk-muted); font-weight: 700; margin: 0 0 3px; line-height: 1.2;
}
.dk-syn .dk-syn__tile-val { display: block; font-size: 20px; font-weight: 700; line-height: 1.15; margin: 0; color: var(--dk-ink); }
.dk-syn .dk-syn__tile-sub { display: block; font-size: 12.5px; color: var(--dk-muted); margin: 3px 0 0; line-height: 1.3; }

/* ==========================================================
   AFSNIT
   ========================================================== */

.dk-syn .dk-syn__h {
	font-size: 13px; text-transform: uppercase; letter-spacing: .7px;
	color: var(--dk-muted); font-weight: 700; margin: 30px 0 12px;
	display: flex; align-items: center; gap: 9px;
}
.dk-syn__h:after { content: ""; flex: 1; height: 1px; background: var(--dk-line); }
.dk-syn__est {
	font-size: 10.5px; font-weight: 700; background: #eef2f6; color: var(--dk-muted);
	padding: 3px 7px; border-radius: 20px; letter-spacing: .4px; text-transform: none;
}

/* ==========================================================
   GRAF — kilometerstand over tid
   ========================================================== */

.dk-syn__chart {
	background: #fff; border: 1px solid var(--dk-line); border-radius: 12px;
	padding: 18px 16px 12px; margin: 0 0 14px;
}
.dk-syn__chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.dk-syn .dk-syn__chart-tit { font-size: 15px; font-weight: 700; margin: 0 0 2px; color: var(--dk-ink); }
.dk-syn .dk-syn__chart-sub { font-size: 13px; color: var(--dk-muted); margin: 0 0 14px; }
/* SVG'en skaleres ned i sin viewBox, så akseteksten skal sættes op i
   brugerenheder for at lande på ~11 px på skærmen. Telefon skalerer hårdest. */
.dk-syn__chart text { font-family: inherit; font-variant-numeric: tabular-nums; font-size: 14px; }
@media (max-width: 600px) {
	.dk-syn__chart text { font-size: 20px; }
}

/* ==========================================================
   TIDSLINJE — hvert punkt bærer sin egen skinne
   ========================================================== */

.dk-syn__tl { margin: 0 0 8px; }
.dk-syn__post { position: relative; padding: 0 0 20px 30px; break-inside: avoid; }
.dk-syn__post:before {
	content: ""; position: absolute; left: 6px; top: 12px; bottom: -6px;
	width: 2px; background: var(--dk-line);
}
.dk-syn__post:last-child:before { display: none; }
.dk-syn__post:after {
	content: ""; position: absolute; left: 0; top: 7px;
	width: 14px; height: 14px; border-radius: 50%;
	border: 3px solid #fff; background: var(--dk-muted);
}
.dk-syn__post.is-ok:after  { background: var(--dk-green); }
.dk-syn__post.is-no:after  { background: var(--dk-red); }
.dk-syn__post.is-mid:after { background: var(--dk-amber); }

.dk-syn__post details { border: 0; }
.dk-syn__post summary {
	list-style: none; cursor: pointer; display: flex; align-items: baseline;
	gap: 10px; flex-wrap: wrap;
}
.dk-syn__post summary::-webkit-details-marker { display: none; }
.dk-syn__post-dato { font-weight: 700; font-size: 16px; color: var(--dk-ink); }
.dk-syn__post-res { font-size: 13.5px; font-weight: 700; }
.dk-syn__post.is-ok .dk-syn__post-res { color: var(--dk-green); }
.dk-syn__post.is-no .dk-syn__post-res { color: var(--dk-red); }
.dk-syn__post.is-mid .dk-syn__post-res { color: var(--dk-amber); }
.dk-syn .dk-syn__post-sub { font-size: 13.5px; color: var(--dk-muted); margin: 2px 0 0; width: 100%; }
.dk-syn__post-mere { font-size: 13px; color: var(--dk-blue); font-weight: 600; }
.dk-syn__post details[open] .dk-syn__post-mere { color: var(--dk-muted); }
.dk-syn .dk-syn__post-krop { margin: 10px 0 0; font-size: 14.5px; }
.dk-syn .dk-syn__post-krop a { font-weight: 600; }

@media (min-width: 700px) {
	.dk-syn__tl.is-lang { column-count: 2; column-gap: 46px; }
}

/* "Vis de N ældre syn" — resten af historikken bag ét klik */
.dk-syn__mere { margin: 0 0 8px; }
.dk-syn__mere > summary {
	list-style: none; cursor: pointer; display: inline-flex; align-items: center;
	gap: 8px; font-size: 14.5px; font-weight: 600; color: var(--dk-blue);
	border: 1px solid var(--dk-line); background: #fff;
	padding: 10px 16px; border-radius: 24px;
}
.dk-syn__mere > summary::-webkit-details-marker { display: none; }
.dk-syn__mere > summary:hover { background: #f4f8fc; border-color: #cfdcea; }
.dk-syn__mere > summary:after {
	content: ""; width: 7px; height: 7px; margin-top: -4px;
	border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
	transform: rotate(45deg);
}
.dk-syn__mere[open] > summary:after { margin-top: 2px; transform: rotate(-135deg); }
.dk-syn__mere[open] > summary { margin-bottom: 18px; }

/* ==========================================================
   PILLER OG BESKEDER
   ========================================================== */

.dk-syn__pill {
	display: inline-flex; align-items: center; gap: 6px;
	padding: 4px 11px; border-radius: 20px; font-size: 13.5px; font-weight: 700;
}
.dk-syn__pill:before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.dk-syn__pill.is-ok { background: var(--dk-green-bg); color: var(--dk-green); }
.dk-syn__pill.is-no { background: var(--dk-red-bg); color: var(--dk-red); }
.dk-syn__pill.is-amber,
/* "Betinget godkendt" er hverken groent eller roedt. Foer blev det vist som
   et rent Godkendt med groen prik. Set paa BE11787 07.08.2026. */
.dk-syn__pill.is-mid { background: var(--dk-amber-bg); color: var(--dk-amber); }

.dk-syn .dk-syn__note { font-size: 13.5px; color: var(--dk-muted); margin: 0 0 24px; }

.dk-syn__info {
	background: #eef4fb; border: 1px solid #cfe0f2; border-left: 4px solid var(--dk-blue);
	border-radius: 10px; padding: 15px 17px; margin: 0 0 22px; font-size: 15px;
	color: var(--dk-ink); display: flex; gap: 11px; align-items: flex-start;
}
.dk-syn__info svg { flex: 0 0 19px; width: 19px; height: 19px; margin-top: 1px; }

.dk-syn__msg {
	background: var(--dk-bg); border: 1px solid var(--dk-line); border-radius: 12px;
	padding: 22px 24px; margin: 0 0 20px;
}
.dk-syn .dk-syn__msg p { margin: 0 0 6px; font-size: 16px; }
.dk-syn .dk-syn__msg p:last-child { margin: 0; color: var(--dk-ink-2); font-size: 15px; }
/* Bilen kan ikke godkendes, og omsyn er ikke muligt. Set paa ZK33416
   07.08.2026. Den besked skal ikke ligne en fodnote. */
.dk-syn__msg.is-red { background: #fdf2f2; border-color: #e6b8b8; }
.dk-syn .dk-syn__msg.is-red p:first-child strong { color: #a32020; }

/* --- Hvilken bil drejer det sig om --- */
.dk-syn__bil {
	display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px;
	margin: 0 0 18px; padding: 0 2px;
}
.dk-syn__bil-ikon { width: 38px; height: 30px; color: var(--dk-blue); flex: 0 0 auto; }
.dk-syn__bil-ikon svg { width: 100%; height: 100%; display: block; }
.dk-syn__bil-plade {
	font-weight: 800; letter-spacing: 2px; font-size: 14px; color: #123a6b;
	background: #fff; border: 2px solid #123a6b; border-radius: 6px;
	padding: 5px 10px 4px; line-height: 1;
}
.dk-syn__bil-navn { font-weight: 700; font-size: 16px; color: var(--dk-ink); }
.dk-syn__bil-navn:empty { display: none; }
.dk-syn__bil-fakta { font-size: 14px; color: var(--dk-muted); }
@media (max-width: 480px) {
	.dk-syn__bil { gap: 8px 10px; }
	.dk-syn__bil-navn { font-size: 15px; }
	.dk-syn__bil-fakta { font-size: 13px; width: 100%; }
}

/* --- Tjeklisten ved bilen --- */
.dk-tjek { margin: 26px 0 0; }
.dk-tjek-liste { display: grid; gap: 14px; }
.dk-tjek-punkt {
	display: grid; grid-template-columns: 76px 1fr; gap: 18px;
	background: #fff; border: 1px solid var(--dk-line); border-radius: 14px;
	padding: 20px 22px; align-items: start; transition: border-color .15s, background .15s;
}
.dk-tjek-punkt.er-klar { border-color: #bfe0c8; background: #f6fbf7; }
.dk-tjek-punkt.er-fejl { border-color: #e6b8b8; background: var(--dk-red-bg); }
.dk-tjek-anim { width: 76px; height: 76px; color: var(--dk-blue); }
.dk-tjek-anim svg { width: 100%; height: 100%; display: block; }
.dk-tjek-punkt.er-fejl .dk-tjek-anim { color: var(--dk-red); }
.dk-syn .dk-tjek-krop h3 { margin: 2px 0 8px; font-size: 17px; font-weight: 800; display: flex; align-items: center; gap: 10px; }
.dk-tjek-nr {
	display: inline-flex; align-items: center; justify-content: center;
	width: 24px; height: 24px; border-radius: 50%; background: var(--dk-bg);
	color: var(--dk-blue); font-size: 12px; font-weight: 800; flex: 0 0 auto;
}
.dk-syn .dk-tjek-krop p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--dk-ink-2); }
.dk-tjek-film:empty { display: none; }
.dk-tjek-svar { display: flex; flex-wrap: wrap; gap: 10px; margin: 14px 0 0; }
.dk-tjek-knap {
	font: inherit; font-size: 14px; font-weight: 700; cursor: pointer;
	border: 1px solid var(--dk-line); background: #fff; color: var(--dk-ink-2);
	border-radius: 999px; padding: 9px 16px;
}
.dk-tjek-knap:hover { border-color: #b9c6d2; }
.dk-tjek-knap.er-ok.er-valgt { background: var(--dk-green-bg); border-color: #bfe0c8; color: var(--dk-green); }
.dk-tjek-knap.er-fejl.er-valgt { background: #fff; border-color: var(--dk-red); color: var(--dk-red); }
.dk-tjek-slut {
	margin: 18px 0 0; background: var(--dk-bg); border-radius: 14px; padding: 22px 24px;
}
.dk-tjek-slut[data-tom] { background: none; padding: 14px 0 0; }
.dk-syn .dk-tjek-status { margin: 0; font-size: 14px; color: var(--dk-muted); }
.dk-syn .dk-tjek-h { margin: 0 0 6px; font-size: 18px; font-weight: 800; }
.dk-syn .dk-tjek-slut p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--dk-ink-2); }
.dk-syn .dk-tjek-cta { margin: 16px 0 0; }
.dk-tjek-kilde { margin: 14px 0 0; font-size: 13px; color: var(--dk-muted); }

@media (max-width: 560px) {
	.dk-tjek-punkt { grid-template-columns: 56px 1fr; gap: 14px; padding: 18px; }
	.dk-tjek-anim { width: 56px; height: 56px; }
}

/* Animationerne. Alt kan slaas fra. */
@keyframes dkBlink { 0%,45% { opacity: 1 } 50%,95% { opacity: .12 } }
@keyframes dkStraale { 0%,40% { opacity: 0 } 55%,90% { opacity: 1 } }
@keyframes dkSlid { 0% { transform: scaleY(1) } 100% { transform: scaleY(.34) } }
@keyframes dkLampe { 0%,30% { opacity: .15 } 45%,100% { opacity: 1 } }
@keyframes dkDryp { 0% { transform: translateY(-6px); opacity: 0 } 25% { opacity: 1 } 70% { transform: translateY(14px); opacity: 1 } 80%,100% { opacity: 0 } }
@keyframes dkPlet { 0%,60% { transform: scale(.4); opacity: .1 } 85%,100% { transform: scale(1); opacity: .35 } }
@keyframes dkBoelge { 0%,20% { opacity: 0 } 40%,100% { opacity: 1 } }

.dk-tjek-anim.er-blink .a1 { animation: dkBlink 1.6s infinite; }
.dk-tjek-anim.er-blink .a2 { animation: dkStraale 1.6s infinite; }
.dk-tjek-anim.er-daek .a1 { transform-origin: 50% 100%; animation: dkSlid 3.2s ease-in-out infinite alternate; }
.dk-tjek-anim.er-daek .a2 { animation: dkBlink 3.2s infinite; }
.dk-tjek-anim.er-lampe .a1 { animation: dkLampe 2.6s infinite; }
.dk-tjek-anim.er-lampe .a2 { animation: dkBlink 1.1s infinite; }
.dk-tjek-anim.er-draabe .a1 { animation: dkDryp 2.4s infinite; }
.dk-tjek-anim.er-draabe .a2 { transform-origin: 50% 100%; animation: dkPlet 2.4s infinite; }
.dk-tjek-anim.er-lyd .a1 { animation: dkBoelge 1.8s infinite; }
.dk-tjek-anim.er-lyd .a2 { animation: dkBoelge 1.8s infinite .3s; }

@media (prefers-reduced-motion: reduce) {
	.dk-tjek-anim * { animation: none !important; }
}

/* --- Hvad betyder resultatet (beslutningskort) --- */
.dk-trae { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; margin: 26px 0 0; }
.dk-trae-kort { background: #fff; border: 1px solid var(--dk-line); border-radius: 14px; padding: 20px 20px 18px; border-top: 5px solid var(--dk-line); }
.dk-trae-kort.er-ok  { border-top-color: var(--dk-green); }
.dk-trae-kort.er-mid { border-top-color: var(--dk-amber); }
.dk-trae-kort.er-no  { border-top-color: var(--dk-red); }
.dk-trae-kort h3 { margin: 0 0 14px; font-size: 17px; font-weight: 800; line-height: 1.25; }
.dk-trae-kort dl { margin: 0; }
.dk-trae-kort dt { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--dk-muted); margin: 12px 0 3px; }
.dk-trae-kort dt:first-child { margin-top: 0; }
.dk-trae-kort dd { margin: 0; font-size: 15px; line-height: 1.45; color: var(--dk-ink-2); }
.dk-trae-kort .dk-trae-note { margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--dk-line); font-size: 13px; color: var(--dk-muted); }
.dk-trae-slut { margin: 18px 0 0; font-size: 13px; color: var(--dk-muted); }

/* --- Synsrapporten felt for felt --- */
.dk-rap { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin: 26px 0 0; align-items: start; }
.dk-rap-ark { background: #fff; border: 1px solid var(--dk-line); border-radius: 14px; padding: 18px; }
.dk-rap .dk-rap-titel { margin: 0 0 14px; font-weight: 800; font-size: 15px; text-transform: uppercase; letter-spacing: .6px; }
.dk-rap-felt {
	display: grid; grid-template-columns: 26px 1fr; gap: 4px 10px; width: 100%;
	text-align: left; background: none; border: 0; border-top: 1px solid var(--dk-line);
	padding: 11px 8px; cursor: pointer; border-radius: 8px; font: inherit;
}
.dk-rap-felt:hover { background: var(--dk-bg); }
.dk-rap-felt.er-valgt { background: #eaf2fb; }
.dk-rap-nr {
	grid-row: span 2; display: inline-flex; align-items: center; justify-content: center;
	width: 24px; height: 24px; border-radius: 50%; background: var(--dk-blue); color: #fff;
	font-size: 12px; font-weight: 800; flex: 0 0 auto;
}
.dk-rap-navn { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: var(--dk-muted); }
.dk-rap-v { font-size: 14px; color: var(--dk-ink); line-height: 1.4; }
.dk-rap-forklar { position: sticky; top: 100px; }
.dk-rap-tekst { display: none; background: var(--dk-bg); border-radius: 14px; padding: 20px 22px; }
.dk-rap-tekst.er-valgt { display: block; }
.dk-rap .dk-rap-h { margin: 0 0 8px; font-weight: 800; font-size: 16px; display: flex; align-items: center; gap: 10px; }
.dk-rap-tekst p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--dk-ink-2); }
.dk-rap-slut { margin: 16px 0 0; font-size: 13px; color: var(--dk-muted); }

@media (max-width: 820px) {
	.dk-rap { grid-template-columns: 1fr; }
	.dk-rap-forklar { position: static; }
}

/* --- Boedeoptrapningen med to spor ---
   Nummer to paa Necips liste 08.08.2026. Tre kolonner paa desktop: uge, "kom
   ikke til syn", "kom men ikke godkendt". Under 800 px stables sporene, og hver
   raekke faar sine egne etiketter — en vandret tidslinje med syv trin bliver
   ulaeselig paa en telefon. */
.dk-boed { margin: 26px 0 0; }
.dk-boed-hoved, .dk-boed-raekke {
	display: grid; grid-template-columns: 96px 1fr 1fr; gap: 0 20px;
	align-items: start;
}
.dk-boed-hoved { padding: 0 0 10px; border-bottom: 2px solid var(--dk-line); }
.dk-boed-hoved b { font-size: 14px; }
.dk-boed-raekke { padding: 16px 0; border-bottom: 1px solid var(--dk-line); }
.dk-boed-uge {
	font-weight: 800; font-size: 14px; color: var(--dk-ink);
	text-transform: uppercase; letter-spacing: .4px; padding-top: 1px;
}
.dk-boed-sp { font-size: 15px; line-height: 1.5; color: var(--dk-ink-2); }
.dk-boed-sp b { color: var(--dk-ink); font-weight: 700; }
.dk-boed-lab { display: none; }
.dk-boed-ingen { color: var(--dk-muted); font-style: italic; }

.dk-boed-raekke.er-boede-a .er-a b,
.dk-boed-raekke.er-boede-begge .dk-boed-sp b { color: var(--dk-red); }
.dk-boed-raekke.er-boede-a,
.dk-boed-raekke.er-boede-begge { background: var(--dk-red-bg); }
.dk-boed-raekke.er-boede-a .dk-boed-uge,
.dk-boed-raekke.er-boede-begge .dk-boed-uge { color: var(--dk-red); }
.dk-boed-raekke.er-boede-a, .dk-boed-raekke.er-boede-begge,
.dk-boed-raekke.er-slut { padding-left: 14px; padding-right: 14px; border-radius: 10px; }
.dk-boed-raekke.er-slut { background: #f2f5f8; }
.dk-boed .dk-boed-note { margin: 18px 0 0; font-size: 13px; color: var(--dk-muted); }

@media (max-width: 800px) {
	.dk-boed-hoved { display: none; }
	.dk-boed-raekke { grid-template-columns: 1fr; gap: 10px; padding: 18px 14px; }
	.dk-boed-lab {
		display: block; font-style: normal; font-size: 12px; font-weight: 700;
		text-transform: uppercase; letter-spacing: .5px; color: var(--dk-muted);
		margin: 0 0 3px;
	}
	.dk-boed-raekke { border-radius: 10px; border-bottom: 0; background: #f7f9fb; margin: 0 0 10px; }
	.dk-boed-raekke.er-boede-a, .dk-boed-raekke.er-boede-begge { background: var(--dk-red-bg); }
}

/* --- To frister paa én tidslinje --- */
.dk-spor {
	position: relative; background: #fff; border: 1px solid var(--dk-line);
	border-radius: 14px; padding: 22px 24px 20px; margin: 0 0 20px;
}
.dk-syn .dk-spor-h { margin: 0 0 26px; font-weight: 700; font-size: 16px; }
.dk-spor-nu {
	/* Startede paa 56px og loeb hen over overskriften. Set 08.08.2026. */
	position: absolute; top: 74px; bottom: 96px; width: 0;
	border-left: 2px dashed #b9c6d2; margin-left: 24px;
}
.dk-spor-nu span {
	position: absolute; top: -20px; left: 0; transform: translateX(-50%);
	font-size: 12px; color: var(--dk-muted); background: #fff; padding: 0 6px;
	white-space: nowrap;
}
.dk-spor-bane { margin: 0 0 48px; }
.dk-spor-bane:last-of-type { margin-bottom: 52px; }
/* Hvid baggrund bag teksten, saa "i dag"-linjen ikke loeber tvaers gennem
   bogstaverne. Set 08.08.2026. */
.dk-syn .dk-spor-navn {
	margin: 0 0 10px; font-size: 14px; display: inline-block;
	position: relative; background: #fff; padding-right: 10px;
}
.dk-syn .dk-spor-navn b { font-weight: 700; }
.dk-syn .dk-spor-navn span { color: var(--dk-muted); }
.dk-spor-linje {
	position: relative; height: 6px; border-radius: 3px; background: var(--dk-line);
}
.dk-spor-fyld { position: absolute; left: 0; top: 0; height: 100%; border-radius: 3px; }
.dk-spor-bane.er-omsyn .dk-spor-fyld { background: var(--dk-amber); }
.dk-spor-bane.er-syn   .dk-spor-fyld { background: var(--dk-blue); }
.dk-spor-bane.er-forbi .dk-spor-fyld { background: var(--dk-red); }
.dk-spor-flag { position: absolute; top: -5px; transform: translateX(-50%); text-align: center; }
.dk-spor-flag:before {
	content: ""; display: block; width: 16px; height: 16px; border-radius: 50%;
	margin: 0 auto; background: #fff; border: 4px solid currentColor;
}
.dk-spor-bane.er-omsyn .dk-spor-flag { color: var(--dk-amber); }
.dk-spor-bane.er-syn   .dk-spor-flag { color: var(--dk-blue); }
.dk-spor-bane.er-forbi .dk-spor-flag { color: var(--dk-red); }
.dk-spor-dato {
	display: block; margin-top: 7px; font-weight: 700; font-size: 14px;
	color: var(--dk-ink); white-space: nowrap; background: #fff; padding: 0 6px;
}
.dk-spor-dage {
	display: block; font-size: 12px; color: var(--dk-muted); white-space: nowrap;
	background: #fff; padding: 0 6px;
}
.dk-syn .dk-spor-note { margin: 22px 0 0; font-size: 13px; color: var(--dk-muted); }

/* Flag helt ude i kanten skal ikke skaeres af. */
.dk-spor-bane.er-hoejre .dk-spor-flag { transform: none; right: 0; left: auto !important; text-align: right; }
.dk-spor-bane.er-hoejre .dk-spor-flag:before { margin: 0 4px 0 auto; }
.dk-spor-bane.er-venstre .dk-spor-flag { transform: none; text-align: left; }
.dk-spor-bane.er-venstre .dk-spor-flag:before { margin: 0 auto 0 0; }

@media (max-width: 560px) {
	.dk-spor { padding: 20px 16px 18px; }
	.dk-spor-dato { font-size: 13px; }
	.dk-spor-dage { font-size: 11px; }
	.dk-spor-nu { margin-left: 16px; }
}

.dk-syn__anm {
	background: #fff; border: 1px solid var(--dk-line); border-radius: 14px;
	padding: 20px 22px; margin: 0 0 20px;
}
.dk-syn .dk-syn__anm-h { margin: 0 0 12px; font-weight: 700; font-size: 16px; }
.dk-syn .dk-syn__anm ul { margin: 0; padding: 0; list-style: none; }
.dk-syn .dk-syn__anm li {
	display: flex; gap: 12px; align-items: flex-start; justify-content: space-between;
	padding: 10px 0; border-top: 1px solid var(--dk-line); font-size: 15px;
	line-height: 1.45; color: var(--dk-ink-2);
}
.dk-syn .dk-syn__anm li:first-child { border-top: 0; }
.dk-syn .dk-syn__anm li .dk-syn__pill { flex: 0 0 auto; }
.dk-syn .dk-syn__anm-note { margin: 12px 0 0; font-size: 13px; color: var(--dk-muted); }
.dk-syn .dk-syn__anm-igen {
	margin: 16px 0 0; padding: 14px 16px; background: var(--dk-amber-bg);
	border-radius: 10px; font-size: 15px; line-height: 1.5; color: var(--dk-ink);
}
.dk-syn .dk-syn__anm-igen strong { color: var(--dk-amber); }
.dk-syn .dk-syn__anm-igen span { color: var(--dk-ink-2); }
.dk-syn .dk-syn__anm-igen + .dk-syn__anm-note { margin-top: 8px; }

.dk-syn__pdf { margin: 12px 0 26px; }
.dk-syn__pdf a {
	display: inline-flex; align-items: center; gap: 9px; font-weight: 700;
	color: var(--dk-blue); text-decoration: none; border: 1px solid #c4d3e0;
	border-radius: 10px; padding: 12px 18px; font-size: 15px; background: #fff;
}
.dk-syn__pdf a:hover { border-color: var(--dk-blue); background: var(--dk-bg); }
.dk-syn__pdf svg { width: 17px; height: 17px; }

/* ==========================================================
   TILBUD
   ========================================================== */

.dk-syn__cta {
	background: var(--dk-dark); color: #fff; border-radius: 16px;
	padding: 26px 26px 24px; margin: 26px 0 8px;
}
.dk-syn .dk-syn__cta h3 { color: #fff; font-size: 21px; margin: 0 0 8px; font-weight: 700; line-height: 1.3; }
.dk-syn .dk-syn__cta p { color: #c8d6e0; margin: 0 0 18px; font-size: 15.5px; line-height: 1.55; }
.dk-syn__btn {
	display: inline-block; background: #fff; color: var(--dk-dark); text-decoration: none;
	font-weight: 700; padding: 14px 26px; border-radius: 10px; font-size: 16px;
}
.dk-syn__btn:hover { background: #eef4fb; color: var(--dk-dark); }
.dk-syn .dk-syn__cta-tlf { font-size: 14px; color: #9fb4c2; margin: 14px 0 0; }
.dk-syn .dk-syn__cta-tlf a { color: #fff; font-weight: 600; }

/* knappen er nu en <button>, ikke et link — den folder felterne ud */
button.dk-syn__btn { border: 0; cursor: pointer; font-family: inherit; }
button.dk-syn__btn.er-aaben { background: #d7e5f5; }

/* [hidden] skal slaa vores egne display-regler. Ellers bliver felterne
   staaende efter en vellykket indsendelse. */
.dk-syn [hidden] { display: none !important; }

/* mini-formular: to felter, fordi pladen kender vi allerede */
.dk-syn__bud {
	margin: 16px 0 0; background: rgba(255,255,255,.07);
	border: 1px solid rgba(255,255,255,.14); border-radius: 12px; padding: 16px;
}
.dk-syn .dk-syn__bud-tit {
	color: #fff; font-weight: 700; font-size: 15.5px; margin: 0 0 12px !important;
}
.dk-syn__bud-rk { display: flex; flex-wrap: wrap; gap: 10px; }
.dk-syn__bud-rk input {
	flex: 1 1 190px; min-width: 0; padding: 14px 14px; font-size: 16px;
	border: 1px solid #cfdbe6; border-radius: 9px; background: #fff;
	font-family: inherit; color: var(--dk-ink); box-sizing: border-box;
}
.dk-syn__bud-rk input::placeholder { color: #93a5b3; }
.dk-syn__bud-rk input:focus {
	outline: 0; border-color: #6aa9f0; box-shadow: 0 0 0 3px rgba(106,169,240,.3);
}
.dk-syn__bud-send {
	flex: 0 0 auto; background: #2a78d6; color: #fff; border: 0; border-radius: 9px;
	padding: 14px 24px; font-size: 16px; font-weight: 700; cursor: pointer;
	font-family: inherit; transition: background .15s;
}
.dk-syn__bud-send:hover { background: #1f66bd; }
.dk-syn__bud-send:disabled { background: #4a6f9c; opacity: .7; cursor: default; }
.dk-syn__bud-plade {
	text-transform: uppercase; letter-spacing: 2px; font-weight: 700;
	flex: 0 1 170px;
}
.dk-syn .dk-syn__bud-note { font-size: 13px !important; color: #8fa5b5; margin: 12px 0 0 !important; }

/* samme boks, men i sidens moerke slutbaand — den ligger uden for .dk-syn */
.dk-syn-slutbud { text-align: center; }
.dk-syn-slutbud .dk-syn__bud {
	margin: 4px auto 0; max-width: 620px; text-align: left;
	background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14);
	border-radius: 12px; padding: 16px;
}
.dk-syn-slutbud [hidden] { display: none !important; }
.dk-syn-side .dk-syn-slutbud .dk-syn__bud-tit {
	color: #fff !important; font-weight: 700; font-size: 15.5px; margin: 0 0 12px !important;
}
.dk-syn-slutbud .dk-syn__bud-rk { display: flex; flex-wrap: wrap; gap: 10px; }
.dk-syn-slutbud .dk-syn__bud-rk input {
	flex: 1 1 180px; min-width: 0; padding: 14px; font-size: 16px;
	border: 1px solid #cfdbe6; border-radius: 9px; background: #fff;
	font-family: inherit; color: var(--dk-ink); box-sizing: border-box;
}
.dk-syn-slutbud .dk-syn__bud-rk .dk-syn__bud-plade { flex: 0 1 200px; }
/* placeholderen "Nummerplade" blev klippet af sporafstanden */
.dk-syn__bud-plade::placeholder { letter-spacing: .5px; font-weight: 600; }
.dk-syn-slutbud .dk-syn__bud-send {
	flex: 0 0 auto; background: #2a78d6; color: #fff; border: 0; border-radius: 9px;
	padding: 14px 24px; font-size: 16px; font-weight: 700; cursor: pointer; font-family: inherit;
}
.dk-syn-slutbud .dk-syn__bud-send:hover { background: #1f66bd; }
.dk-syn-side .dk-syn-slutbud .dk-syn__bud-note {
	font-size: 13px !important; color: rgba(255,255,255,.55) !important; margin: 12px 0 0 !important;
}
.dk-syn-side .dk-syn-slutbud .dk-syn__bud-svar { margin: 12px 0 0 !important; font-size: 15px !important; }
.dk-syn-side .dk-syn-slutbud .dk-syn__bud-svar:empty { display: none; }
.dk-syn-side .dk-syn-slutbud .dk-syn__bud-svar.er-fejl { color: #ffb4ad !important; }
.dk-syn-side .dk-syn-slutbud .dk-syn__bud-svar.er-ok { color: #8ee0b0 !important; font-weight: 600; }
.dk-syn-side .dk-syn-slutbud button.dk-knap { cursor: pointer; font-family: inherit; }
.dk-syn-side .dk-syn-slutbud button.dk-knap.er-aaben { background: #dce9f8; }
.dk-syn .dk-syn__bud-svar { margin: 12px 0 0 !important; font-size: 15px !important; }
.dk-syn .dk-syn__bud-svar:empty { display: none; }
.dk-syn .dk-syn__bud-svar.er-fejl { color: #ffb4ad !important; }
.dk-syn .dk-syn__bud-svar.er-ok { color: #8ee0b0 !important; font-weight: 600; }

/* ==========================================================
   SIDENS EGNE BLOKKE
   ========================================================== */

/* trin-for-trin konsekvens */
.dk-trin { list-style: none; padding: 0; margin: 0 0 2em; counter-reset: t; }
.dk-trin li {
	position: relative; padding: 0 0 22px 88px; break-inside: avoid;
}
.dk-trin li:before {
	content: ""; position: absolute; left: 34px; top: 34px; bottom: -4px;
	width: 2px; background: var(--dk-line);
}
.dk-trin li:last-child:before { display: none; }
.dk-syn-side .dk-trin li .dk-trin-nr {
	position: absolute; left: 0; top: 2px; min-width: 44px; max-width: 72px; padding: 6px 8px;
	border-radius: 20px; display: inline-flex; align-items: center; justify-content: center;
	font-size: 11px; font-weight: 800; line-height: 1.15; letter-spacing: .2px;
	background: var(--dk-bg); color: var(--dk-ink-2); border: 1.5px solid var(--dk-line);
	text-align: center; box-sizing: border-box; white-space: nowrap;
}
.dk-trin li.er-boede .dk-trin-nr { background: var(--dk-red-bg); border-color: var(--dk-red-line); color: var(--dk-red); }
.dk-trin li.er-slut .dk-trin-nr { background: var(--dk-red); border-color: var(--dk-red); color: #fff; }
.dk-syn-side .dk-trin b { display: block; font-size: 17px; margin: 4px 0 2px; }
.dk-syn-side .dk-trin span { font-size: 15.5px; color: var(--dk-ink-2); line-height: 1.5; }
.dk-trin .dk-belob { color: var(--dk-red); font-weight: 700; }

/* fakta-striber */
.dk-fakta {
	display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 12px; margin: 0 0 2.2em;
}
.dk-fakta div {
	background: var(--dk-bg); border: 1px solid var(--dk-line);
	border-radius: 12px; padding: 16px 17px;
}
.dk-syn-side .dk-fakta b { display: block; font-size: 23px; font-weight: 800; color: var(--dk-ink); line-height: 1.1; }
.dk-syn-side .dk-fakta span { display: block; font-size: 13.5px; color: var(--dk-ink-2); margin-top: 5px; line-height: 1.35; }

/* FAQ */
.dk-faq { margin: 0 0 2em; }
.dk-faq details {
	border-bottom: 1px solid var(--dk-line); padding: 4px 0;
}
.dk-syn-side .dk-faq summary {
	list-style: none; cursor: pointer; font-weight: 700; font-size: 17.5px;
	padding: 16px 34px 16px 0; position: relative; color: var(--dk-ink); line-height: 1.4;
}
.dk-faq summary::-webkit-details-marker { display: none; }
.dk-faq summary:after {
	content: ""; position: absolute; right: 6px; top: 50%; width: 10px; height: 10px;
	border-right: 2px solid var(--dk-blue); border-bottom: 2px solid var(--dk-blue);
	transform: translateY(-70%) rotate(45deg); transition: transform .18s;
}
.dk-faq details[open] summary:after { transform: translateY(-30%) rotate(225deg); }
.dk-syn-side .dk-faq details > p { margin: 0 0 14px; }
.dk-syn-side .dk-faq details > p:first-of-type { font-weight: 600; }

.dk-syn-side .dk-kilde { font-size: 14px; color: var(--dk-muted); border-top: 1px solid var(--dk-line); padding-top: 18px; }

/* ==========================================================
   MOBIL
   ========================================================== */

@media (max-width: 600px) {
	.dk-syn-side { font-size: 16.5px; }
	.dk-syn-side h2 { font-size: 23px; }
	.dk-syn-side h3 { font-size: 18px; }
	.dk-syn .dk-syn__big { font-size: 40px; letter-spacing: -1.5px; }
	/* "1 år og 10 måneder" fylder tre gange saa meget som "55 dage" og
	   braekkede i to linjer paa 390 px. Set 07.08.2026. */
	.dk-syn .dk-syn__big.er-lang { font-size: 30px; letter-spacing: -1px; }
	.dk-syn__status { padding: 24px 18px; }
	.dk-syn__form button { width: 100%; }
	.dk-syn__tiles { grid-template-columns: 1fr 1fr; gap: 10px; }
	.dk-syn__tile { padding: 13px; flex-direction: column; gap: 8px; }
	.dk-syn .dk-syn__tile-val { font-size: 17px; }
	.dk-syn__cta { padding: 22px 20px; }
	.dk-syn__bud-rk input, .dk-syn__bud-send { flex: 1 1 100%; }
	button.dk-syn__btn { width: 100%; }
	/* slutbaandet har egne, mere specifikke regler — de skal slaas her,
	   ellers staar nummerpladefeltet og sendeknappen som smalle stumper */
	.dk-syn-slutbud .dk-syn__bud-rk input,
	.dk-syn-slutbud .dk-syn__bud-rk .dk-syn__bud-plade,
	.dk-syn-slutbud .dk-syn__bud-send { flex: 1 1 100%; }
	.dk-syn-side .dk-slut-knapper { flex-direction: column; }
	.dk-syn-side .dk-slut-knapper .dk-knap { width: 100%; }
	.dk-syn__hero { padding: 128px 18px 48px; }
	.dk-syn .dk-syn__hero-tit { font-size: 31px; letter-spacing: -.8px; }
	.dk-syn .dk-syn__hero-lead { font-size: 16.5px; margin-bottom: 22px; }
	.dk-syn__hero .dk-syn__form { padding: 10px; border-radius: 14px; }
	.dk-syn__hero .dk-syn__plate input { font-size: 21px; padding: 16px 12px 16px 50px; }
	.dk-syn__trust { gap: 8px 16px; }
	.dk-syn__trust li { font-size: 13.5px; }
	.dk-baand { padding: 38px 0; }
	/* På telefon er der ikke plads til en pille som "15 UGER" ved siden af
	   overskriften — den lægges over i stedet for at støde ind i teksten. */
	.dk-trin li { padding: 0 0 20px 16px; }
	.dk-trin li:before { left: 0; top: 28px; bottom: -2px; }
	.dk-syn-side .dk-trin li .dk-trin-nr {
		position: static; min-width: 0; margin: 0 0 7px; padding: 5px 11px;
	}
	.dk-syn-side .dk-trin b { margin-top: 0; }
	.dk-syn-side .dk-faq summary { font-size: 16.5px; }
}

/* --- Tidslinje for ét koeretoej ----------------------------------------
   Sporet giver fornemmelsen "hvor langt er jeg", listen giver datoerne.
   Delt op med vilje: fire flag oven paa hinanden i ét spor kolliderer paa
   350 px, og datoen er det, folk skal kunne laese. Se tidslinje() i
   dk-syn.js for hvorfor beloeb bevidst ikke staar her. */
.dk-tid {
	margin: 22px 0 4px;
	padding: 18px 16px 6px;
	background: #fff;
	border: 1px solid var(--dk-line);
	border-radius: 14px;
}
.dk-tid-h {
	margin: 0 0 2px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--dk-muted);
}
.dk-tid-spor {
	position: relative;
	height: 12px;
	margin: 62px 10px 74px;
	border-radius: 999px;
	background: var(--dk-grid);
}
.dk-tid-fyld {
	position: absolute;
	inset: 0 auto 0 0;
	border-radius: 999px;
	background: var(--dk-blue);
	opacity: 0.85;
}
/* Zonen efter fristen. Skraveret og ikke bare roed: det er ikke en
   maaling, det er et omraade man ikke skal befinde sig i. */
.dk-tid-efter {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	border-radius: 0 999px 999px 0;
	background: repeating-linear-gradient(
		135deg, var(--dk-red-bg) 0 6px, var(--dk-red-line) 6px 12px );
}
/* Det stykke, bilen er over tiden. Solidt roedt oven paa skraveringen, saa
   det er tydeligt, hvor langt inde i den forkerte zone man er. */
.dk-tid-over {
	position: absolute;
	top: 0;
	bottom: 0;
	background: var(--dk-red);
	opacity: 0.9;
}
/* --- Ikon-markoerer paa selve sporet ---
   Hver markoer er en lille tap ned fra linjen og et ikon under den. De
   haenger under sporet, fordi bilen staar ovenpaa.

   .er-lav saettes af bindTid() i dk-syn.js, naar to markoerer ligger for
   taet: saa rykker den ene en raekke ned i stedet for at ligge oven i den
   anden. Indkaldelsen er altid kun 8 uger foer fristen, saa paa en kort
   skaerm sker det jaevnligt. */
.dk-tid-punkt {
	position: absolute;
	top: 100%;
	transform: translateX(-50%);
	display: flex;
	flex-direction: column;
	align-items: center;
}
.dk-tid-punkt.er-lav { margin-top: 26px; }
/* Tappen skal vaere synlig nok til at binde ikonet til linjen. Med
   --dk-line saa ikonerne ud til at svaeve frit under sporet. */
.dk-tid-tap {
	display: block;
	width: 2px;
	height: 9px;
	border-radius: 1px;
	background: #b9c8d5;
}
.dk-tid-punkt.er-lav .dk-tid-tap { height: 35px; }
.dk-tid-bad--spor {
	width: 22px;
	height: 22px;
	box-shadow: 0 0 0 3px #fff;
}
.dk-tid-bad--spor svg { width: 13px; height: 13px; }
.dk-tid-punkt.er-sidst .dk-tid-bad { background: var(--dk-green); }
.dk-tid-punkt.er-brev  .dk-tid-bad { background: var(--dk-amber); }
.dk-tid-punkt.er-frist .dk-tid-bad { background: var(--dk-red); }
.dk-tid-punkt.er-efter .dk-tid-bad { background: #8d3d38; }
/* "i dag" staar OVER bilen, og bilen parkerer paa den stiplede linje.
   Under sporet er der nu ikoner, saa der er ikke plads dernede. */
.dk-tid-nu {
	position: absolute;
	top: -40px;
	bottom: 2px;
	width: 0;
	border-left: 2px dashed var(--dk-ink);
}
.dk-tid-nu span {
	position: absolute;
	top: -8px;
	left: 0;
	transform: translateX(-50%);
	padding: 1px 7px;
	border-radius: 999px;
	background: var(--dk-ink);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	white-space: nowrap;
}
.dk-tid-nu.er-venstre span { transform: none; }
.dk-tid-nu.er-hoejre span  { transform: translateX(-100%); }

.dk-tid-liste { list-style: none; margin: 0; padding: 0; }
.dk-tid-liste li {
	position: relative;
	display: grid;
	grid-template-columns: 34px 104px 1fr;
	grid-template-areas:
		'bad dato navn'
		'bad dato note';
	gap: 2px 14px;
	padding: 0 0 18px;
	font-size: 15px;
}
/* Den lodrette streg mellem punkterne. Sidste punkt har ingen efterfoelger,
   saa der skal ikke gaa en streg ud i ingenting. */
.dk-tid-liste li::after {
	content: '';
	position: absolute;
	left: 13px;
	top: 30px;
	bottom: 0;
	border-left: 1px solid var(--dk-line);
}
.dk-tid-liste li:last-child::after { display: none; }

/* --- Ikonet i markoeren ---
   En farvet prik siger kun "her sker noget". Fluebenet, brevet, uret og
   forbudsskiltet siger HVAD der sker. Se tidIkon() i dk-syn.js. */
.dk-tid-bad {
	grid-area: bad;
	align-self: start;
	width: 27px;
	height: 27px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: var(--dk-blue);
	color: #fff;
}
.dk-tid.er-anim .dk-tid-bad {
	animation: dk-bad-ind 0.45s cubic-bezier(0.2, 1.3, 0.4, 1) both;
	animation-delay: calc(var(--i, 0) * 150ms);
}
.dk-tid-bad svg {
	display: block;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.7;
	stroke-linecap: round;
	stroke-linejoin: round;
}
.dk-tid-liste li.er-sidst .dk-tid-bad { background: var(--dk-green); }
.dk-tid-liste li.er-brev  .dk-tid-bad { background: var(--dk-amber); }
.dk-tid-liste li.er-frist .dk-tid-bad { background: var(--dk-red); }
.dk-tid-liste li.er-efter .dk-tid-bad { background: #8d3d38; }

/* Fluebenet og forbudsstregen tegnes op i stedet for bare at dukke op. 24
   er rigeligt til at daekke begge streger. */
.dk-tid.er-anim .dk-tid-tegn {
	stroke-dasharray: 24;
	stroke-dashoffset: 24;
	animation: dk-tegn 0.5s ease-out forwards;
	animation-delay: calc(var(--i, 0) * 150ms + 0.25s);
}
.dk-tid.er-anim .dk-tid-flap {
	transform-box: fill-box;
	transform-origin: 50% 0;
	animation: dk-flap 0.5s ease-out both;
	animation-delay: calc(var(--i, 0) * 150ms + 0.2s);
}
/* Viseren gaar én runde. Uret siger "der er en frist", ikke "her koerer et
   ur i det uendelige" — derfor kun én. */
.dk-tid.er-anim .dk-tid-viser {
	transform-box: fill-box;
	transform-origin: 0 0;
	animation: dk-viser 0.9s ease-in-out both;
	animation-delay: calc(var(--i, 0) * 150ms + 0.2s);
}
@keyframes dk-bad-ind {
	from { opacity: 0; transform: scale(0.3); }
	to   { opacity: 1; transform: scale(1); }
}
@keyframes dk-tegn {
	to { stroke-dashoffset: 0; }
}
@keyframes dk-flap {
	from { transform: scaleY(0); }
	to   { transform: scaleY(1); }
}
@keyframes dk-viser {
	from { transform: rotate(-300deg); }
	to   { transform: rotate(0deg); }
}
@media (prefers-reduced-motion: reduce) {
	.dk-tid-bad, .dk-tid-tegn, .dk-tid-flap, .dk-tid-viser {
		animation: none;
		opacity: 1;
		transform: none;
		stroke-dashoffset: 0;
	}
}
.dk-tid-liste li > b {
	grid-area: dato;
	font-variant-numeric: tabular-nums;
	color: var(--dk-ink);
	white-space: nowrap;
}
.dk-tid-navn { grid-area: navn; font-weight: 600; color: var(--dk-ink); }
.dk-tid-note {
	grid-area: note;
	font-size: 13.5px;
	line-height: 1.5;
	color: var(--dk-muted);
}
.dk-tid-liste li.er-passeret > b,
.dk-tid-liste li.er-passeret .dk-tid-navn { color: var(--dk-ink-2); }
@media (max-width: 560px) {
	.dk-tid-liste li {
		grid-template-columns: 34px 1fr;
		grid-template-areas: 'bad dato' 'bad navn' 'bad note';
		gap: 1px 12px;
	}
	.dk-tid-liste li > b { font-size: 13px; color: var(--dk-muted); }
}


/* --- Bevaegelse: kun naar den faktisk kan koere ------------------------
   ALLE animationer her ligger bag klassen .er-anim, som JavaScript saetter
   paa efter render. Grunden er en fejl, jeg selv lavede foerst:

   Ikonerne startede paa opacity 0 og blev synlige, naar animationen loeb
   faerdig. Men 08.08.2026 maalte jeg document.timeline.currentTime paa
   siden, og den stod bomstille — hele dokumentets animationsur var frosset.
   Resultatet var fire markoerer med opacity 0. Usynlige. Indholdet hang paa,
   at en animation naaede at blive faerdig.

   Nu er den rigtige tilstand ogsaa standardtilstanden: uden .er-anim staar
   bilen paa sin plads og ikonerne er synlige. Animationen er noget, der
   laegges ovenpaa, hvis browseren kan finde ud af det.

   --- Den lille bil paa sporet ------------------------------------------
   Bilen koerer ind fra sporets start og hen til i dag, én gang, naar
   resultatet tegnes. Hjulene ruller imens og staar stille bagefter — de
   ruller kun, saa laenge bilen faktisk bevaeger sig.

   Se bilIkon() og tidslinje() i dk-syn.js. */
.dk-tid-bil {
	position: absolute;
	bottom: 5px;
	left: var(--dk-maal);
	margin-left: -26px;
	line-height: 0;
	pointer-events: none;
}
.dk-tid.er-anim .dk-tid-bil {
	animation: dk-tid-koer 1.6s cubic-bezier(0.22, 0.85, 0.3, 1) both;
}
.dk-tid-bil svg { display: block; overflow: visible; }
.dk-tid-krop { fill: var(--dk-blue); }
.dk-tid-rude { fill: #fff; opacity: 0.92; }
.dk-tid-hjul > circle:first-child { fill: var(--dk-ink); }
.dk-tid-nav { fill: #fff; }
.dk-tid-eger {
	stroke: #fff;
	stroke-width: 1.1;
	opacity: 0.75;
}
/* fill-box, ellers drejer hjulet om SVG'ets hjoerne og flyver ud af bilen. */
.dk-tid-hjul {
	transform-box: fill-box;
	transform-origin: 50% 50%;
}
.dk-tid.er-anim .dk-tid-hjul { animation: dk-tid-rul 0.5s linear 3; }
/* Hoppet. Punktet skaleres op forbi 1 og falder tilbage — det er det, der
   goer det levende i stedet for bare at dukke op. Tidspunktet (--t) er sat
   pr. punkt i dk-syn.js, saa bilen "vaekker" dem paa sin vej. */
.dk-tid.er-anim .dk-tid-punkt .dk-tid-bad {
	animation: dk-punkt-hop 0.55s cubic-bezier(0.3, 1.7, 0.4, 1) both;
	animation-delay: var(--t, 0s);
}
.dk-tid.er-anim .dk-tid-punkt .dk-tid-tap {
	animation: dk-tap-ned 0.3s ease-out both;
	animation-delay: var(--t, 0s);
	transform-origin: 50% 0;
}
@keyframes dk-punkt-hop {
	0%   { opacity: 0; transform: scale(0.2) translateY(-10px); }
	65%  { opacity: 1; transform: scale(1.25) translateY(0); }
	100% { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes dk-tap-ned {
	from { transform: scaleY(0); }
	to   { transform: scaleY(1); }
}
@keyframes dk-tid-koer {
	from { left: 0; }
	to   { left: var(--dk-maal); }
}
@keyframes dk-tid-rul {
	to { transform: rotate(360deg); }
}
@media (max-width: 560px) {
	.dk-tid-bil svg { width: 42px; height: 23px; }
	.dk-tid-bil { margin-left: -21px; }
	.dk-tid-bad--spor { width: 20px; height: 20px; }
	.dk-tid-bad--spor svg { width: 12px; height: 12px; }
}
/* Bevaegelse er ikke gratis for alle. Bilen bliver staaende paa sin plads. */
@media (prefers-reduced-motion: reduce) {
	.dk-tid-bil,
	.dk-tid-hjul,
	.dk-tid-punkt .dk-tid-bad,
	.dk-tid-punkt .dk-tid-tap { animation: none; }
}

/* Maerkat i bilinjen. Nu kun brugt til "Afmeldt": bilen behandles ellers
   praecis som enhver anden, saa maerkatet er det eneste, der skiller den ud.
   Necip 08.08.2026. */
.dk-syn__mrk {
	flex: 0 0 auto;
	padding: 2px 9px;
	border-radius: 999px;
	background: var(--dk-amber-bg);
	border: 1px solid var(--dk-amber-line);
	color: var(--dk-amber);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.02em;
	white-space: nowrap;
}