/* site.css - kreditkortsexpert.se / kredittkortekspert.no (byte-ens på begge sites).
   Design "testbladets tabel": en resultattabel som i et forbrugerblad. Hvid grund, blæk, ét rødt segl ("Expertens val"), én tæt tabel,
   smaragd kun på "Ansök nu/Søk nå". Kontrakt: kreditkortsexpert.se/.impeccable/surfaces/site-index-php.md */

/* ---------- Skrift: Archivo (variabel, latin), selvhostet ---------- */
@font-face {
	font-family: "Archivo";
	src: url("/fonts/archivo-latin.woff2") format("woff2");
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
	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;
}
/* Reserve med samme bredde, så teksten ikke flytter sig, når Archivo er hentet */
@font-face {
	font-family: "Archivo Fallback";
	src: local("Arial"), local("Helvetica Neue"), local("Helvetica");
	size-adjust: 101%;
	ascent-override: 87%;
	descent-override: 21%;
	line-gap-override: 0%;
}
@font-face {
	font-family: "Archivo Fallback Tung";
	src: local("Arial Bold"), local("Arial-BoldMT"), local("Helvetica Neue Bold");
	font-weight: 700 900;
	size-adjust: 112%;
	ascent-override: 78%;
	descent-override: 19%;
	line-gap-override: 0%;
}

/* ---------- Tokens ---------- */
:root {
	--bg: #FFFFFF;
	--ink: #111827;
	--ink-2: #2A3343;
	--mute: #5B6478;
	--line: #E4E8EF;
	--line-strong: #8C95A6;
	--band: #F3F5F8;
	--red: #C8102E;
	--act: #0FA36B;
	--act-hover: #0C9160;
	--act-press: #0A7F54;
	--foot-text: #C9CFDA;

	--font: "Archivo", "Archivo Fallback", system-ui, -apple-system, "Segoe UI", sans-serif;
	--font-tung: "Archivo", "Archivo Fallback Tung", system-ui, -apple-system, "Segoe UI", sans-serif;

	--wrap: 1240px;
	--gutter: 16px;
	--r-sm: 4px;
	--r: 6px;
	--r-lg: 10px;
	--ease: cubic-bezier(0.16, 1, 0.3, 1);
	color-scheme: light;
}
@media (min-width: 640px) { :root { --gutter: 24px; } }
@media (min-width: 1024px) { :root { --gutter: 32px; } }

/* ---------- Grund ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	scroll-padding-top: 24px;
}
body {
	margin: 0;
	background: var(--bg);
	color: var(--ink);
	font-family: var(--font);
	font-size: 16px;
	font-weight: 500;
	line-height: 1.55;
	font-synthesis: none;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	caret-color: var(--ink);
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	min-height: 100dvh;
}
main { flex: 1 0 auto; }
::selection { background: var(--ink); color: #fff; }
img, svg { display: block; max-width: 100%; }
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; }
a { color: inherit; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: var(--r-sm); }
.kk-dold {
	position: absolute !important;
	width: 1px; height: 1px;
	margin: -1px; padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}
.kk-ikon { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.kk-wrap {
	width: 100%;
	max-width: calc(var(--wrap) + 2 * var(--gutter));
	margin-inline: auto;
	padding-inline: var(--gutter);
}

.kk-hopp {
	position: absolute;
	left: var(--gutter);
	top: -100px;
	z-index: 10;
	padding: 10px 14px;
	background: var(--ink);
	color: #fff;
	font-weight: 700;
	text-decoration: none;
	border-radius: var(--r);
}
.kk-hopp:focus { top: 12px; }

/* ---------- Header: logo, menu, 3 px sort linje ---------- */
.kk-head { border-bottom: 3px solid var(--ink); background: var(--bg); }
.kk-head__in {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	min-height: 60px;
}
.kk-logo { display: inline-flex; align-items: center; flex: 0 1 calc(100% - 120px); min-width: 0; min-height: 44px; border-radius: var(--r-sm); }
.kk-logo img { width: auto; height: auto; max-width: 100%; max-height: 15px; }
.kk-menyknapp {
	display: inline-flex;
	flex: none;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	margin-right: -8px;
	padding: 0 8px;
	background: none;
	border: 0;
	border-radius: var(--r);
	font-size: 15px;
	font-weight: 700;
	cursor: pointer;
}
.kk-menyknapp .kk-ikon { width: 20px; height: 20px; }
.kk-nav ul { list-style: none; }
.kk-nav a {
	display: flex;
	align-items: center;
	min-height: 44px;
	color: var(--mute);
	font-size: 15px;
	font-weight: 600;
	text-decoration: none;
	transition: color .15s ease;
}
.kk-nav a:hover { color: var(--ink); }
.kk-nav a[aria-current="page"] { color: var(--ink); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 8px; }

@media (max-width: 899.98px) {
	.kk-head__in { flex-wrap: wrap; }
	.js .kk-nav { display: none; }
	.js.kk-meny-aaben .kk-nav { display: block; }
	.kk-nav { flex-basis: 100%; padding-bottom: 8px; }
	.kk-nav li + li { border-top: 1px solid var(--line); }
	.kk-nav a { font-size: 16px; color: var(--ink); }
	.no-js .kk-menyknapp { display: none; }
	.no-js .kk-nav ul { display: flex; gap: 20px; overflow-x: auto; scrollbar-width: none; }
	.no-js .kk-nav li + li { border: 0; }
	.no-js .kk-nav a { white-space: nowrap; }
}
@media (min-width: 900px) {
	.kk-head__in { min-height: 72px; gap: 24px; }
	.kk-logo { flex: none; }
	.kk-logo img { max-height: 20px; }
	.kk-menyknapp { display: none; }
	.kk-nav ul { display: flex; gap: 28px; }
}

/* ---------- Toppen af listesiderne: H1, stempel, seglet ---------- */
.kk-topp { padding-top: 24px; padding-bottom: 20px; }
.kk-topp h1, .kk-las h1 {
	font-family: var(--font-tung);
	font-size: clamp(32px, 22px + 2.4vw, 50px);
	font-weight: 900;
	line-height: 1.04;
	letter-spacing: -0.02em;
	text-wrap: balance;
}
.kk-topp h1 { max-width: 28ch; }
.kk-stampel {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	margin-top: 14px;
	color: var(--mute);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.06em;
	line-height: 1.4;
	text-transform: uppercase;
}
.kk-stampel { margin-left: -22px; clip-path: inset(0 0 0 22px); }
.kk-stampel > * { margin-left: 22px; }
.kk-stampel__antal { position: relative; white-space: nowrap; }
.kk-granskad + .kk-stampel__antal::before { content: "·"; position: absolute; left: -15px; }
@media (max-width: 479.98px) { .kk-stampel { font-size: 12px; letter-spacing: 0.04em; } }

.kk-smulor { margin-bottom: 14px; }
.kk-smulor ol { display: flex; flex-wrap: wrap; list-style: none; font-size: 14px; color: var(--mute); }
.kk-smulor li + li::before { content: "/"; margin: 0 8px; color: var(--line-strong); }
.kk-smulor a { color: var(--mute); text-underline-offset: 3px; }
.kk-smulor a:hover { color: var(--ink); }
.kk-smulor [aria-current] { color: var(--ink); }

/* Seglet: "Expertens val <år>" med sidens vinder efter betyg (link til rækken) */
.kk-sigill {
	display: flex;
	align-items: stretch;
	margin-top: 18px;
	color: var(--ink);
	text-decoration: none;
	border: 1px solid var(--line);
	border-radius: var(--r);
	overflow: hidden;
}
.kk-sigill__mark {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 8px 12px;
	background: var(--red);
	color: #fff;
	line-height: 1.05;
	text-align: center;
}
.kk-sigill__topp { font-size: 11px; font-weight: 900; letter-spacing: 0.08em; text-transform: uppercase; }
.kk-sigill__ar { font-family: var(--font-tung); font-size: 20px; font-weight: 900; font-variant-numeric: tabular-nums; }
.kk-sigill__kort { display: flex; flex-direction: column; justify-content: center; gap: 2px; padding: 8px 14px; min-width: 0; }
.kk-sigill__namn { font-size: 15px; font-weight: 800; line-height: 1.25; }
.kk-sigill__betyg { font-size: 13px; color: var(--mute); font-variant-numeric: tabular-nums; }
.kk-sigill:hover .kk-sigill__namn { text-decoration: underline; text-underline-offset: 3px; }

@media (min-width: 768px) {
	.kk-topp { padding-top: 40px; padding-bottom: 28px; }
	.kk-topp--sigill { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 40px; }
	/* Seglet: rundt mærke som i et forbrugerblad */
	.kk-sigill {
		flex-direction: column;
		align-items: center;
		justify-content: center;
		width: 156px;
		height: 156px;
		margin: 0;
		padding: 18px 14px;
		background: var(--red);
		color: #fff;
		border: 0;
		border-radius: 50%;
		box-shadow: inset 0 0 0 5px var(--red), inset 0 0 0 6.5px rgba(255, 255, 255, .55);
		text-align: center;
		transform: rotate(-6deg);
	}
	.kk-sigill__mark { padding: 0; background: none; }
	.kk-sigill__topp { max-width: 13ch; font-size: 11px; letter-spacing: 0.06em; line-height: 1.15; }
	.kk-sigill__ar { font-size: 30px; letter-spacing: -0.01em; }
	.kk-sigill__kort { align-items: center; padding: 6px 0 0; margin-top: 6px; border-top: 1.5px solid rgba(255, 255, 255, .55); }
	.kk-sigill__namn { font-size: 12.5px; max-width: 13ch; }
	.kk-sigill__betyg { font-size: 12px; color: #fff; opacity: .92; }
	.kk-sigill:hover .kk-sigill__namn { text-decoration-thickness: 1.5px; }
	.kk-sigill:focus-visible { outline-offset: 4px; border-radius: 50%; }
}
@media (min-width: 1024px) { .kk-sigill { width: 168px; height: 168px; } }

/* ---------- Kortbilleder (kortets forside, beskåret fra det kvadratiske billede) ---------- */
.kk-bild {
	flex: none;
	width: 64px;
	height: 41px;
	object-fit: cover;
	object-position: 50% 50%;
	border-radius: 3px;
	background: var(--band);
}

/* ---------- Værktøjslinje: chips, antal, sortering ---------- */
.kk-lista { padding-top: 4px; }
.kk-verktyg { display: flex; flex-direction: column; gap: 12px; margin-bottom: 14px; }
.kk-filter ul {
	list-style: none;
	display: flex;
	gap: 8px;
	margin-inline: calc(-1 * var(--gutter));
	padding: 2px var(--gutter);
	overflow-x: auto;
	scrollbar-width: none;
}
.kk-filter ul::-webkit-scrollbar { display: none; }
.kk-chip {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0 16px;
	border: 1px solid var(--line);
	border-radius: 999px;
	background: var(--bg);
	color: var(--ink);
	font-size: 15px;
	font-weight: 600;
	white-space: nowrap;
	text-decoration: none;
	transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}
.kk-chip:hover { border-color: var(--ink); }
.kk-chip[aria-current] { background: var(--ink); border-color: var(--ink); color: #fff; }
.kk-chip:active { transform: translateY(1px); }

.kk-verktyg__hoger { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.kk-antal { color: var(--mute); font-size: 14px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.kk-sortera { display: flex; align-items: center; gap: 10px; }
.kk-sortera label { color: var(--mute); font-size: 14px; white-space: nowrap; }
.kk-select { position: relative; display: inline-flex; }
.kk-select select {
	appearance: none;
	-webkit-appearance: none;
	min-height: 44px;
	padding: 0 38px 0 14px;
	border: 1px solid var(--line-strong);
	border-radius: var(--r);
	background: var(--bg);
	color: var(--ink);
	font: inherit;
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
}
.kk-select select:hover { border-color: var(--ink); }
.kk-select .kk-ikon { position: absolute; right: 12px; top: 50%; margin-top: -8px; pointer-events: none; }
.kk-knapp-sek {
	min-height: 44px;
	padding: 0 14px;
	border: 1px solid var(--ink);
	border-radius: var(--r);
	background: var(--bg);
	font-weight: 700;
	cursor: pointer;
}
@media (max-width: 479.98px) {
	.kk-sortera label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
}
@media (min-width: 900px) {
	.kk-verktyg { flex-direction: row; align-items: center; justify-content: space-between; gap: 24px; }
	.kk-filter ul { margin: 0; padding: 0; flex-wrap: wrap; overflow: visible; }
	.kk-verktyg__hoger { gap: 24px; }
}

/* ---------- Tabellen (desktop) ---------- */
.kk-tabellram { position: relative; }
.kk-jmf {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	font-variant-numeric: tabular-nums;
}
.kk-h {
	padding: 0 12px 10px;
	border-bottom: 2px solid var(--ink);
	color: var(--mute);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	line-height: 1.3;
	text-align: left;
	text-transform: uppercase;
	vertical-align: bottom;
	white-space: nowrap;
}
.kk-h--kort { width: 38%; padding-left: 0; }
.kk-h--tal { text-align: right; }
.kk-h--ansok { width: 1%; }
.kk-sortlank {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	color: inherit;
	text-decoration: none;
	letter-spacing: inherit;
	border-radius: var(--r-sm);
}
.kk-sortlank:hover { color: var(--ink); }
/* Trykflade min. 44 px uden at gøre overskriftsrækken højere */
.kk-sortlank, .kk-detaljknapp { position: relative; }
.kk-sortlank::after { content: ""; position: absolute; inset: -14px -6px; }
.kk-detaljknapp::after { content: ""; position: absolute; inset: -6px -6px; }
.kk-sortlank .kk-ikon { width: 12px; height: 12px; stroke-width: 2.2; }
.kk-sortlank .kk-ikon--sort { opacity: .45; }
.kk-sortlank .kk-ikon--sort-op, .kk-sortlank .kk-ikon--sort-ned { display: none; }
th[aria-sort="ascending"] .kk-sortlank, th[aria-sort="descending"] .kk-sortlank { color: var(--ink); }
th[aria-sort="ascending"] .kk-ikon--sort, th[aria-sort="descending"] .kk-ikon--sort { display: none; }
th[aria-sort="ascending"] .kk-ikon--sort-op, th[aria-sort="descending"] .kk-ikon--sort-ned { display: block; }

.kk-c {
	padding: 16px 12px;
	border-bottom: 1px solid var(--line);
	text-align: right;
	vertical-align: middle;
	font-weight: 500;
}
.kk-c--kort { padding-left: 0; text-align: left; }
.kk-etikett { display: none; }
.kk-tal { font-size: 17px; font-weight: 700; white-space: nowrap; }
.kk-tal small { font-size: 13px; font-weight: 500; color: var(--mute); }
.kk-tal--betyg { font-family: var(--font-tung); font-size: 22px; font-weight: 900; letter-spacing: -0.01em; }
.kk-av { margin-left: 2px; color: var(--mute); font-size: 13px; }

.kk-kort {
	display: flex;
	align-items: center;
	min-height: 44px;
	gap: 14px;
	color: var(--ink);
	text-decoration: none;
	border-radius: var(--r-sm);
}
.kk-kort__namn { font-size: 16px; font-weight: 700; line-height: 1.3; }
.kk-kort:hover .kk-kort__namn { text-decoration: underline; text-underline-offset: 3px; }
.kk-markar { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 0 78px; }
.kk-markar li {
	padding: 3px 6px;
	border: 1px solid var(--line);
	border-radius: var(--r-sm);
	background: var(--bg);
	color: var(--ink-2);
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.04em;
	line-height: 1.2;
	text-transform: uppercase;
	white-space: nowrap;
}
.kk-markar .kk-markar__segl { background: var(--red); border-color: var(--red); color: #fff; }

/* "Ansök nu": den eneste grønne flade */
.kk-c--ansok { width: 1%; padding-right: 0; text-align: center; }
.kk-ansok {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 164px;
	min-height: 48px;
	padding: 0 20px;
	border-radius: var(--r);
	background: var(--act);
	color: #fff;
	font-size: 19px;
	font-weight: 800;
	letter-spacing: -0.005em;
	white-space: nowrap;
	text-decoration: none;
	transition: background-color .15s ease, transform .1s ease;
}
.kk-ansok:hover { background: var(--act-hover); }
.kk-ansok:active { background: var(--act-press); transform: translateY(1px); }
.kk-ansok__under { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 4px; }
.kk-annons { color: var(--mute); font-size: 12px; white-space: nowrap; }
.kk-detaljknapp {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	min-height: 32px;
	padding: 0 2px;
	background: none;
	border: 0;
	border-radius: var(--r-sm);
	color: var(--ink);
	font-size: 14px;
	font-weight: 700;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
	cursor: pointer;
	white-space: nowrap;
}
.kk-detaljknapp:hover { text-decoration-thickness: 2px; }
.kk-detaljknapp .kk-ikon { width: 14px; height: 14px; transition: transform .25s var(--ease); }
.kk-detaljknapp[aria-expanded="true"] .kk-ikon { transform: rotate(180deg); }
.no-js .kk-detaljknapp { display: none; }
@media (pointer: coarse) { .kk-detaljknapp { min-height: 44px; } }

/* Vinderrækken: tonet bånd + rødt mærke; rækken markeres kort, når man hopper til den */
.kk-rad--vinnare .kk-c, .kk-rad--vinnare .kk-rad__detalj > td { background: var(--band); }
.kk-rad--fundet .kk-c { animation: kk-fundet 1.6s var(--ease); }
@keyframes kk-fundet { 0%, 35% { box-shadow: inset 0 0 0 9999px rgba(17, 24, 39, .06); } 100% { box-shadow: inset 0 0 0 9999px rgba(17, 24, 39, 0); } }

/* Detaljerækken: folder ud med højde-animation (grid 0fr -> 1fr) */
.kk-rad__detalj > td { padding: 0; border: 0; }
.kk-detalj { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .3s var(--ease); }
.kk-detalj__in { min-height: 0; overflow: hidden; visibility: hidden; transition: visibility 0s .3s; }
.kk-rad.is-open .kk-detalj, .no-js .kk-detalj { grid-template-rows: 1fr; }
.kk-rad.is-open .kk-detalj__in, .no-js .kk-detalj__in { visibility: visible; transition: visibility 0s 0s; }
.kk-rad.is-open .kk-rad__detalj > td, .no-js .kk-rad__detalj > td { border-bottom: 1px solid var(--line); }
.kk-rad.is-open .kk-rad__huvud .kk-c { border-bottom-color: transparent; }
.kk-detalj__in > * { margin: 0; }
.kk-detalj__in {
	display: grid;
	gap: 20px 32px;
	padding: 0 0 0 78px;
	font-size: 15px;
	line-height: 1.55;
	color: var(--ink-2);
}
.kk-rad.is-open .kk-detalj__in, .no-js .kk-detalj__in { padding-top: 4px; padding-bottom: 24px; }
@media (min-width: 900px) {
	.kk-detalj__in { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.15fr); }
	.kk-detalj__in--tva { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); }
}

.kk-bockar { list-style: none; display: grid; gap: 8px; }
.kk-bockar li { display: flex; gap: 10px; font-weight: 600; color: var(--ink); }
.kk-bockar .kk-ikon { margin-top: 3px; width: 16px; height: 16px; stroke-width: 2.4; }
.kk-bockar small { display: block; margin-top: 2px; font-size: 13.5px; font-weight: 500; color: var(--mute); line-height: 1.45; }
.kk-fakta { display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin-top: 16px; border-top: 1px solid var(--line); }
.kk-fakta > div { padding: 8px 0; border-bottom: 1px solid var(--line); }
.kk-fakta > div:nth-child(odd) { padding-right: 12px; }
.kk-fakta dt { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--mute); }
.kk-fakta dd { font-size: 15px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.kk-exempel { font-size: 14px; line-height: 1.55; }
.kk-fakta + .kk-exempel, .kk-bockar + .kk-exempel { margin-top: 14px; }
.kk-exempel strong { color: var(--ink); }
.kk-varning {
	display: flex;
	gap: 10px;
	margin-top: 14px;
	padding: 12px 14px;
	background: var(--bg);
	border: 1px solid var(--line);
	border-radius: var(--r);
	font-size: 13.5px;
	line-height: 1.5;
	color: var(--ink-2);
}
.kk-varning .kk-ikon { margin-top: 2px; width: 18px; height: 18px; color: var(--ink); }
.kk-varning strong { color: var(--ink); }
.kk-detalj__rubrik { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--mute); }
.kk-detalj__om p + p, .kk-detalj__rubrik + p { margin-top: 4px; }
.kk-detalj__om a { color: var(--ink); text-underline-offset: 3px; }

.kk-tom { padding: 32px 0; color: var(--mute); text-align: center; border-bottom: 1px solid var(--line); }
.kk-efter { display: grid; gap: 14px; padding: 16px 0 0; }
.kk-efter .kk-varning { margin-top: 0; max-width: 64ch; background: var(--band); }
.kk-ersattning { color: var(--mute); font-size: 13px; line-height: 1.5; max-width: 75ch; }

/* Tablet: rigtig tabel, sidelæns rul i rammen, fast første kolonne */
@media (min-width: 768px) and (max-width: 1099.98px) {
	.kk-tabellram { overflow-x: auto; scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }
	.kk-jmf { min-width: 980px; }
	.kk-c--kort, .kk-h--kort { position: sticky; left: 0; z-index: 1; background: var(--bg); box-shadow: 1px 0 0 var(--line); }
	.kk-rad--vinnare .kk-c--kort { background: var(--band); }
	.kk-c--kort { min-width: 250px; }
	.kk-detalj__in { padding-left: 0; }
}

/* ---------- Mobil (< 768): samme DOM som stablede rækkeblokke ---------- */
@media (max-width: 767.98px) {
	.kk-jmf, .kk-jmf tbody, .kk-jmf tr, .kk-jmf th, .kk-jmf td { display: block; }
	.kk-jmf thead { display: none; }
	.kk-jmf { border-top: 2px solid var(--ink); }
	.kk-rad { border-bottom: 1px solid var(--line); }
	.kk-rad--vinnare { margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); background: var(--band); }
	.kk-rad--vinnare .kk-c, .kk-rad--vinnare .kk-rad__detalj > td { background: none; }
	.kk-rad__huvud {
		position: relative;
		display: grid !important;
		grid-template-columns: 1fr 1fr;
		gap: 14px 16px;
		padding: 18px 0;
	}
	.kk-c { padding: 0; border: 0; text-align: left; }
	.kk-c--kort { grid-column: 1 / -1; padding-right: 76px; }
	.kk-kort { gap: 12px; }
	.kk-bild { width: 56px; height: 36px; }
	.kk-kort__namn { font-size: 17px; }
	.kk-markar { margin: 8px -76px 0 68px; }
	.kk-c--betyg { position: absolute; top: 18px; right: 0; text-align: right; }
	.kk-c--betyg .kk-etikett { margin-bottom: 0; }
	.kk-etikett {
		display: block;
		margin-bottom: 2px;
		color: var(--mute);
		font-size: 11px;
		font-weight: 700;
		letter-spacing: 0.08em;
		line-height: 1.3;
		text-transform: uppercase;
	}
	.kk-c--tal { padding-top: 10px; border-top: 1px solid var(--line); }
	.kk-c--tal .kk-tal { font-size: 17px; }
	.kk-c--ansok { grid-column: 1 / -1; width: auto; padding-top: 2px; }
	.kk-ansok { width: 100%; min-height: 52px; }
	.kk-ansok__under { margin-top: 2px; }
	.kk-detaljknapp { min-height: 44px; }
	.kk-rad.is-open .kk-rad__detalj > td, .no-js .kk-rad__detalj > td { border-bottom: 0; }
	.kk-detalj__in { padding-left: 0; }
	.kk-rad.is-open .kk-detalj__in, .no-js .kk-detalj__in { padding-top: 0; padding-bottom: 20px; }
	.kk-fakta { margin-top: 14px; }
}

/* ---------- Read-flade: guider, brødtekst under tabellen, om oss, privatliv ---------- */
.kk-las { padding: 48px 0 72px; }
.kk-lista + .kk-las { margin-top: 40px; border-top: 1px solid var(--line); }
.kk-las--sida { padding-top: 32px; }
.kk-las__spalt { max-width: 860px; margin-inline: auto; font-size: 17px; line-height: 1.65; color: var(--ink-2); overflow-wrap: break-word; }
/* Prosa i 60ch (612 px = 60ch ved 17 px Archivo, fast mål så alle elementer flugter), centreret i målet;
   tabeller og FAQ bruger hele målet (860 px) */
.kk-las__spalt > * { max-width: 612px; margin-inline: auto; }
.kk-las__spalt > .kk-tabell-ram, .kk-las__spalt > .kk-faq { max-width: none; }
/* Læsesidernes stempel har kun datoen (ingen "· N kort"), så punkt-tricket i .kk-stampel slås fra */
.kk-las__spalt > .kk-stampel { clip-path: none; }
.kk-las__spalt > .kk-stampel > * { margin-left: 0; }
.kk-las__spalt > * + * { margin-top: 18px; }
.kk-las h1 { color: var(--ink); }
.kk-las h1 + .kk-stampel { margin-top: 14px; }
.kk-las__spalt h2 {
	margin-top: 52px;
	color: var(--ink);
	font-family: var(--font-tung);
	font-size: clamp(24px, 20px + 1vw, 30px);
	font-weight: 900;
	line-height: 1.15;
	letter-spacing: -0.015em;
	text-wrap: balance;
}
.kk-las__spalt h3 { margin-top: 36px; color: var(--ink); font-size: 20px; font-weight: 800; line-height: 1.25; letter-spacing: -0.01em; }
.kk-las__spalt h2 + *, .kk-las__spalt h3 + * { margin-top: 10px; }
.kk-ingress { color: var(--ink); font-size: 19px; line-height: 1.55; }
@media (min-width: 768px) { .kk-ingress { font-size: 20px; } }
.kk-las__spalt > .kk-ingress { margin-top: 20px; }
.kk-las__spalt > .kk-ingress:first-child { margin-top: 0; }
.kk-las__spalt a { color: var(--ink); text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: var(--line-strong); transition: text-decoration-color .15s ease; }
.kk-las__spalt a:hover { text-decoration-color: var(--ink); text-decoration-thickness: 2px; }
.kk-las__spalt strong { color: var(--ink); font-weight: 700; }
.kk-las__spalt > ul:not([class]) { list-style: none; display: grid; gap: 8px; }
.kk-las__spalt > ul:not([class]) > li { position: relative; padding-left: 22px; }
.kk-las__spalt > ul:not([class]) > li::before { content: ""; position: absolute; left: 2px; top: 0.72em; width: 7px; height: 7px; background: var(--ink); }

/* Nummererede tjeklister */
.kk-checklista, .kk-las__spalt > ol:not([class]) { list-style: none; counter-reset: kk-nr; display: grid; gap: 12px; }
.kk-checklista > li, .kk-las__spalt > ol:not([class]) > li { position: relative; counter-increment: kk-nr; min-height: 30px; padding: 3px 0 0 46px; }
.kk-checklista > li::before, .kk-las__spalt > ol:not([class]) > li::before {
	content: counter(kk-nr);
	position: absolute;
	left: 0; top: 0;
	display: grid;
	place-items: center;
	width: 30px; height: 30px;
	border: 1.5px solid var(--ink);
	border-radius: var(--r-sm);
	color: var(--ink);
	font-size: 14px;
	font-weight: 800;
	font-variant-numeric: tabular-nums;
	line-height: 1;
}

/* Små tabeludsnit: én linje pr. celle, sidelæns rul i rammen, fast første kolonne */
.kk-tabell-ram { overflow-x: auto; margin-top: 24px; scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }
.kk-las__spalt > .kk-tabell-ram + .kk-tabell-ram { margin-top: 32px; }
.kk-tabell { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 15px; font-variant-numeric: tabular-nums; }
.kk-tabell caption { padding-bottom: 8px; color: var(--ink); font-size: 15px; font-weight: 800; text-align: left; }
.kk-tabell th, .kk-tabell td { padding: 10px 14px 10px 0; border-bottom: 1px solid var(--line); text-align: left; white-space: nowrap; }
.kk-tabell thead th { padding-top: 0; border-bottom: 2px solid var(--ink); color: var(--mute); font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; vertical-align: bottom; }
.kk-tabell tbody th { color: var(--ink); font-weight: 700; }
.kk-tabell td { color: var(--ink); }
@media (max-width: 1023.98px) {
	.kk-tabell th:first-child, .kk-tabell td:first-child { position: sticky; left: 0; background: var(--bg); box-shadow: 1px 0 0 var(--line); }
	.kk-tabell th:nth-child(2), .kk-tabell td:nth-child(2) { padding-left: 14px; }
}

/* FAQ */
.kk-faq { margin-top: 56px; }
.kk-las__spalt > .kk-faq { margin-top: 56px; }
.kk-faq h2 { margin-top: 0; margin-bottom: 14px; }
.kk-fraga { border-top: 1px solid var(--line); }
.kk-fraga:first-of-type { border-top: 2px solid var(--ink); }
.kk-fraga:last-of-type { border-bottom: 1px solid var(--line); }
.kk-fraga summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	min-height: 60px;
	padding: 14px 0;
	color: var(--ink);
	font-size: 17px;
	font-weight: 700;
	line-height: 1.35;
	list-style: none;
	cursor: pointer;
}
.kk-fraga summary::-webkit-details-marker { display: none; }
.kk-fraga summary:hover span { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.kk-fraga summary:focus-visible { outline-offset: -2px; }
.kk-ikon--plus { width: 18px; height: 18px; }
.kk-plus-v { transform-origin: 8px 8px; transition: transform .3s var(--ease); }
.kk-fraga[open] .kk-plus-v { transform: scaleY(0); }
.kk-svar { padding: 0 40px 20px 0; color: var(--ink-2); font-size: 16px; }
@supports (interpolate-size: allow-keywords) {
	.kk-fraga { interpolate-size: allow-keywords; }
	.kk-fraga::details-content { height: 0; overflow: clip; transition: height .3s var(--ease), content-visibility .3s allow-discrete; }
	.kk-fraga[open]::details-content { height: auto; }
}

/* Privatliv: dataansvarlig (navn/adresse som SVG) */
.kk-dataansvarlig svg { display: inline-block; max-width: none; }

/* 404 */
.kk-adress { word-break: break-all; }
.kk-404-lankar { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.kk-knapp-blak {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0 20px;
	border-radius: 999px;
	background: var(--ink);
	color: #fff;
	font-size: 15px;
	font-weight: 700;
	text-decoration: none;
}
.kk-las__spalt .kk-knapp-blak, .kk-las__spalt .kk-chip { text-decoration: none; color: inherit; }
.kk-las__spalt .kk-knapp-blak { color: #fff; }
.kk-knapp-blak:hover { background: #000; }

/* ---------- Footer (mørk) ---------- */
.kk-fot { background: var(--ink); color: var(--foot-text); padding: 48px 0 28px; font-size: 15px; }
.kk-fot :focus-visible { outline-color: #fff; }
.kk-fot__grid { display: grid; gap: 32px 24px; grid-template-columns: 1fr 1fr; }
.kk-fot__brand { grid-column: 1 / -1; }
.kk-fot__logo { display: inline-flex; min-height: 44px; align-items: center; border-radius: var(--r-sm); }
.kk-fot__logo img { width: auto; height: 18px; }
.kk-fot__brand p { margin-top: 10px; max-width: 44ch; line-height: 1.55; }
.kk-fot__rubrik { margin-bottom: 8px; color: #8C95A6; font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.kk-fot ul { list-style: none; }
.kk-fot li a { display: inline-flex; align-items: center; min-height: 44px; color: #fff; text-decoration: none; }
.kk-fot li a:hover { text-decoration: underline; text-underline-offset: 3px; }
.kk-fot__kontakt li { min-height: 44px; display: flex; align-items: center; }
.kk-fot__kontakt li a { overflow-wrap: anywhere; }
.kk-fot__bas { display: grid; gap: 6px; margin-top: 36px; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, .12); font-size: 13px; line-height: 1.5; }
.kk-fot__bas p:last-child { max-width: 80ch; }
@media (min-width: 900px) {
	.kk-fot { padding-top: 64px; }
	.kk-fot__grid { grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 0.9fr)) minmax(0, 1.3fr); }
	.kk-fot__brand { grid-column: auto; padding-right: 24px; }
}
@media (max-width: 899.98px) { .kk-fot__kol:last-child { grid-column: 1 / -1; } }

/* ---------- Ingen bevægelse ---------- */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; transition-delay: 0s !important; scroll-behavior: auto !important; }
	.kk-sigill { transform: none; }
}

@media print {
	.kk-head, .kk-verktyg, .kk-fot, .kk-detaljknapp { display: none; }
	.kk-detalj { grid-template-rows: 1fr; }
	.kk-detalj__in { visibility: visible; }
}

/* Ingen enlige ord på sidste linje */
.kk-las__spalt p, .kk-las__spalt li, .kk-varning p, .kk-ersattning, .kk-svar p, .kk-fot__brand p { text-wrap: pretty; }
