/* NoPrime-temaets grundstilarter. Sandwich: mørk top, hvid midte, mørk bund. */

:root {
	--ink:   #1C1C1E;
	--line:  #E4E1DA;
	--mut:   #6E6E73;
	--wash:  #FAF9F6;
	--flade: #F4F2ED;

	/* Monokromt. Accenten er blæk på lyst og hvid på mørkt, så den
	   samme regel virker begge steder uden undtagelser. */
	--accent:       #28282B;
	--accent-tekst: #fff;

	/* Den eneste kulør på sitet. Bruges kun til at fremhæve den
	   anbefalede pakke, så den står alene som blikfang. */
	--fremhaev:       #F0B429;
	--fremhaev-tekst: #28282B;

	/* Divisionernes egne farver, taget fra coverne. Guld er accenten,
	   grøn betyder gratis eller inkluderet. Til tekst bruges de mørkere
	   varianter, ellers rækker kontrasten ikke på hvid baggrund. */
	--gul:        #BD8201;
	--gul-tekst:  #8A5F00;
	--groen:      #026503;
	--groen-lys:  #F0F5EF;

	/* Lodret luft. Én skala, så alle sektioner får samme rytme. */
	--luft:       104px;
	--luft-lille: 40px;
}

.np-bund,
.np-bundbjaelke {
	--accent:       #fff;
	--accent-tekst: #1C1C1E;
}

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

[hidden] {
	display: none !important;
}

body {
	margin: 0;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	font-family: Poppins, system-ui, sans-serif;
	font-size: 16px;
	line-height: 1.6;
	color: var(--ink);
	background: #fff;
}

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

a {
	color: inherit;
}

:focus-visible {
	outline: 3px solid var(--accent);
	outline-offset: 2px;
}

/* Stjernerne følger accenten, ikke guld. */
.np-hero-stjerner {
	color: var(--accent);
}

.np-indre {
	max-width: 960px;
	margin: 0 auto;
	padding: 0 20px;
}

/* Mærkater og knaptekst i Poppins versaler. */
.np-maerkat,
.np-knap {
	font-family: Poppins, system-ui, sans-serif;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

/* Sidehovedet: lyst med en hårfin streg under. */
/* Kvitteringen efter login. Ligger nederst i sidehovedet, saa den skubber
   siden ned én gang i stedet for at laegge sig oven paa indholdet. Groen,
   fordi den samme farve betyder "du har adgang" andre steder paa sitet.
   Vises kun én gang — se npm_lige_logget_ind(). */
.np-loginbesked {
	background: var(--groen-lys);
	border-top: 1px solid var(--line);
}

.np-loginbesked-tekst {
	margin: 0;
	padding: 10px 0;
	color: var(--groen);
	font-size: 0.95rem;
}

.np-loginbesked-tekst strong {
	font-weight: 700;
}

.np-top {
	background: var(--wash);
	color: var(--ink);
	border-bottom: 1px solid var(--line);
}

.np-top-raekke {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding-top: 16px;
	padding-bottom: 16px;
}

.np-logo {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	font-family: Poppins, system-ui, sans-serif;
	font-weight: 700;
	font-size: 1.5rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--ink);
	text-decoration: none;
}

/* N-mærket. Højden styrer, bredden følger med af sig selv. */
.np-logo-maerke {
	height: 30px;
	width: auto;
	display: block;
}

@media (max-width: 600px) {
	.np-logo {
		font-size: 1.25rem;
		gap: 9px;
	}

	.np-logo-maerke {
		height: 24px;
	}
}

.np-nav {
	display: flex;
	gap: 20px;
}

.np-nav a {
	color: var(--ink);
	text-decoration: none;
	font-family: Poppins, system-ui, sans-serif;
	font-weight: 600;
	font-size: 1.05rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.np-nav a:hover {
	text-decoration: underline;
}

/* Midten. Vokser, så sidefoden altid står i bunden. */
.np-midte {
	background: #fff;
	padding: var(--luft) 0;
	flex: 1 0 auto;
}

/* Den mørke bund. */
.np-bund {
	background: var(--ink);
	color: #fff;
	padding: 67px 0 91px;
}

@media (max-width: 780px) {
	.np-bund {
		padding: 53px 0 144px;
	}
}

.np-bund-navn {
	font-family: Poppins, system-ui, sans-serif;
	font-weight: 700;
	font-size: 1.3rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	margin: 0 0 4px;
}

.np-bund-tekst {
	margin: 0;
	color: rgba(255, 255, 255, 0.7);
}

/* Knapper. Accenten vender selv om efter baggrunden. */
.np-knap {
	display: inline-block;
	background: var(--accent);
	color: var(--accent-tekst);
	border: 0;
	border-radius: 6px;
	padding: 14px 28px;
	font-size: 1.1rem;
	text-decoration: none;
	cursor: pointer;
}

.np-knap:hover {
	filter: brightness(0.92);
}

@media (max-width: 600px) {
	.np-knap {
		display: block;
		width: 100%;
		text-align: center;
	}
}

/* Overskrifter og mærkater. */
.np-sektionsmaerkat {
	color: var(--gul-tekst);
	font-size: 0.82rem;
	letter-spacing: 0.09em;
	margin: 0 0 10px;
}

.np-sidetitel {
	font-family: Poppins, system-ui, sans-serif;
	font-weight: 700;
	font-size: clamp(1.7rem, 4vw, 2.4rem);
	text-transform: uppercase;
	letter-spacing: 0.005em;
	line-height: 1.1;
	margin: 0 0 var(--luft-lille);
}

/* Afspilleren. */
.np-afspiller {
	margin-bottom: 32px;
}

.np-ramme {
	position: relative;
	aspect-ratio: 16 / 9;
	background: var(--ink);
	border-radius: 10px;
	overflow: hidden;
}

.np-ramme-billede {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0.55;
}

.np-iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.np-play {
	position: absolute;
	inset: 0;
	margin: auto;
	width: auto;
	height: 46px;
	display: flex;
	align-items: center;
	gap: 10px;
	background: #fff;
	color: var(--ink);
	border: 0;
	border-radius: 999px;
	padding: 0 22px;
	font-family: Poppins, system-ui, sans-serif;
	font-weight: 700;
	font-size: 0.92rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	cursor: pointer;
	max-width: max-content;
}

.np-play-ikon {
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 7px 0 7px 11px;
	border-color: transparent transparent transparent currentColor;
}

.np-besked {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-end;
	gap: 8px;
	text-align: center;
	padding: 24px 24px 28px;
	background: linear-gradient(
		to top,
		rgba(12, 12, 14, 0.94) 0%,
		rgba(12, 12, 14, 0.82) 34%,
		rgba(12, 12, 14, 0.35) 68%,
		rgba(12, 12, 14, 0.08) 100%
	);
	color: #fff;
}

.np-besked[hidden] {
	display: none;
}

.np-play[hidden] {
	display: none;
}

/* Beskeden ligger over alt andet i rammen. */
.np-besked {
	z-index: 4;
}

.np-besked-tekst {
	margin: 0;
	font-size: 1.1rem;
}

.np-besked-handling {
	margin: 8px 0 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
}

.np-besked-login {
	color: #fff;
}

.np-afspiller-info {
	padding-top: 16px;
}

.np-aktiv-nr {
	color: var(--accent);
	margin: 0;
	font-size: 1rem;
}

.np-aktiv-titel {
	font-family: Poppins, system-ui, sans-serif;
	font-weight: 700;
	font-size: 1.7rem;
	text-transform: uppercase;
	margin: 2px 0 4px;
	line-height: 1.15;
}

.np-aktiv-dato {
	color: var(--mut);
	margin: 0 0 8px;
}

.np-aktiv-noter {
	max-width: 640px;
}

/* Søgefeltet. */
.np-soeg {
	margin-bottom: 16px;
}

.np-soegefelt {
	width: 100%;
	max-width: 420px;
	padding: 12px 14px;
	font: inherit;
	border: 1px solid var(--line);
	border-radius: 8px;
	background: var(--wash);
}

.np-soeg-status {
	color: var(--mut);
	font-size: 0.9rem;
	margin: 6px 0 0;
	min-height: 1.2em;
}

/* Listen. */
.np-liste {
	list-style: none;
	margin: 0;
	padding: 0;
	border-top: 1px solid var(--line);
}

.np-punkt {
	border-bottom: 1px solid var(--line);
}

.np-raekke {
	display: flex;
	align-items: center;
	gap: 16px;
	width: 100%;
	padding: 14px 8px;
	background: none;
	border: 0;
	text-align: left;
	font: inherit;
	color: inherit;
	cursor: pointer;
	/* Kortene er links nu, og et link streger sig selv under. */
	text-decoration: none;
}

.np-raekke:hover {
	background: var(--wash);
}

.np-punkt.np-er-aktiv .np-raekke {
	box-shadow: inset 4px 0 0 var(--accent);
	background: var(--wash);
}

.np-raekke-nr {
	color: var(--mut);
	font-size: 1.1rem;
	min-width: 44px;
	white-space: nowrap;
}

.np-punkt.np-er-aktiv .np-raekke-nr {
	color: var(--accent);
}

.np-raekke-midt {
	display: flex;
	flex-direction: column;
	gap: 2px;
	flex: 1;
	min-width: 0;
}

.np-raekke-titel {
	font-weight: 600;
}

.np-raekke-meta {
	color: var(--mut);
	font-size: 0.9rem;
}

.np-badge {
	background: var(--groen);
	color: #fff;
	font-family: Poppins, system-ui, sans-serif;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	font-size: 0.85rem;
	padding: 3px 10px;
	border-radius: 999px;
	flex-shrink: 0;
}

@media (max-width: 600px) {
	.np-raekke {
		gap: 10px;
	}

	.np-raekke-nr {
		min-width: 34px;
	}

	.np-play {
		padding: 0 18px;
		height: 40px;
		font-size: 0.82rem;
	}
}

/* Forsidens hero: lys og luftig, med videoen som eneste tunge element. */
.np-hero {
	background: var(--wash);
	color: var(--ink);
	padding: 88px 0 96px;
}

.np-hero .np-indre {
	display: grid;
	grid-template-columns: 1.1fr 1fr;
	gap: 40px;
	align-items: center;
}

.np-hero-overskrift {
	font-family: Poppins, system-ui, sans-serif;
	font-weight: 700;
	font-size: clamp(2rem, 4.6vw, 3rem);
	text-transform: uppercase;
	letter-spacing: 0.005em;
	line-height: 1.05;
	margin: 0 0 12px;
}

.np-hero-underrubrik {
	color: var(--mut);
	font-size: 1.1rem;
	margin: 0 0 24px;
	max-width: 480px;
}

.np-hero-gratismaerkat {
	color: #fff;
	background: var(--groen);
	display: inline-block;
	padding: 4px 12px;
	border-radius: 4px;
	font-size: 0.95rem;
	margin: 0 0 10px;
}

.np-hero-gratistitel {
	color: var(--ink);
	margin: 10px 0 0;
	font-weight: 600;
}

.np-hero .np-ramme {
	background: var(--ink);
	box-shadow: 0 18px 40px rgba(0, 0, 0, 0.13);
}

/* Talstriben. */
.np-talstribe {
	list-style: none;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 0;
	margin: 0 0 var(--luft);
	padding: 0;
	border-top: 1px solid var(--line);
	border-bottom: 1px solid var(--line);
}

.np-talstribe li {
	padding: 32px 24px 30px;
	border-left: 1px solid var(--line);
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 6px;
}

.np-talstribe li:first-child {
	border-left: 0;
}

.np-tal {
	font-family: Poppins, system-ui, sans-serif;
	font-weight: 700;
	font-size: 2.6rem;
	line-height: 1;
	letter-spacing: -0.01em;
}

.np-tal-tekst {
	color: var(--mut);
	font-size: 0.92rem;
}

/* Låste rækker på forsiden. */
.np-raekke-laast {
	text-decoration: none;
}

.np-laas {
	width: 14px;
	height: 12px;
	border: 2px solid var(--mut);
	border-radius: 3px;
	position: relative;
	flex-shrink: 0;
	margin-top: 6px;
}

.np-laas::before {
	content: "";
	position: absolute;
	left: 1px;
	top: -8px;
	width: 8px;
	height: 8px;
	border: 2px solid var(--mut);
	border-bottom: 0;
	border-radius: 5px 5px 0 0;
}

/* Aaben haengelaas: boejlen er skubbet til hoejre, saa den kun hviler paa
   det ene ben — laasen er lukket op. Vises naar medlemmet har adgang, i
   stedet for slet ingenting, saa raekken ser ens ud for alle og det er
   tydeligt at afsnittet er laast op. */
.np-laas-aaben::before {
	left: 8px;
	top: -11px;
	height: 11px;
	border-right: 0;
	border-radius: 5px 0 0 0;
}

/* Taktikbordet i hero'en. Samme format som afspilleren nedenfor, men helt
   sin egen — den maa ikke dele id'er med medlemmets afspiller. */
.np-taktik {
	position: relative;
	aspect-ratio: 16 / 9;
	background: var(--ink);
	border-radius: 10px;
	overflow: hidden;
}

.np-taktik-billede {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.np-taktik iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

/* Velkomsten efter flytningen. Lille kort midt paa skaermen — den skal
   laeses og lukkes, ikke overses, men den fylder ikke hele siden. */
.np-velkomst {
	position: fixed;
	inset: 0;
	z-index: 200;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	background: rgba(28, 28, 30, 0.45);
}

.np-velkomst-kort {
	background: var(--wash);
	border-radius: 18px;
	padding: 28px 30px 26px;
	max-width: 380px;
	width: 100%;
	box-shadow: 0 18px 50px rgba(28, 28, 30, 0.22);
}

.np-velkomst-maerkat {
	color: var(--gul-tekst);
	margin-bottom: 10px;
}

.np-velkomst-titel {
	font-family: Poppins, system-ui, sans-serif;
	font-weight: 700;
	font-size: 1.35rem;
	line-height: 1.2;
	margin: 0 0 10px;
}

.np-velkomst-tekst {
	margin: 0 0 20px;
	color: var(--mut);
	line-height: 1.55;
}

.np-velkomst-handling {
	margin: 0;
	display: flex;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
}

.np-velkomst-luk {
	background: none;
	border: 0;
	padding: 0;
	color: var(--mut);
	font: inherit;
	cursor: pointer;
	text-decoration: underline;
}

.np-velkomst-luk:hover {
	color: var(--ink);
}

/* ---------- Proevetilbuddet ---------- */

/* Hero'en er moerk, hvor resten af sitet er lyst. Med vilje: siden skal
   foeles som et tilbud og ikke som endnu en underside. */
.np-tilbudhero {
	background: var(--ink);
	color: #fff;
	padding: clamp(48px, 7vw, 88px) 0 clamp(56px, 8vw, 96px);
	overflow: hidden;
}

.np-tilbudhero-indre {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 48px;
	align-items: center;
}

.np-tilbudhero-maerkat {
	color: var(--fremhaev);
	margin-bottom: 14px;
}

.np-tilbudhero-titel {
	font-family: Poppins, system-ui, sans-serif;
	font-weight: 700;
	font-size: clamp(2.1rem, 5.4vw, 3.6rem);
	text-transform: uppercase;
	line-height: 1.03;
	margin: 0 0 26px;
	max-width: 15ch;
}

/* Prisen er blikfanget. Alt andet paa siden er mindre end den. */
.np-tilbudhero-pris {
	margin: 0;
	display: flex;
	align-items: baseline;
	gap: 12px;
	flex-wrap: wrap;
}

.np-tilbudhero-tal {
	font-family: Poppins, system-ui, sans-serif;
	font-weight: 700;
	font-size: clamp(3.2rem, 9vw, 5.2rem);
	line-height: 1;
	color: var(--fremhaev);
}

.np-tilbudhero-periode {
	font-size: 1.1rem;
	color: rgba(255, 255, 255, 0.72);
}

/* Prisen bagefter staar i almindelig laesestoerrelse, ikke gemt af vejen.
   En pris man skal lede efter, laeses som en faelde. */
.np-tilbudhero-efter {
	margin: 12px 0 0;
	color: rgba(255, 255, 255, 0.78);
	line-height: 1.55;
}

.np-tilbudhero-handling {
	margin: 28px 0 0;
	display: flex;
	align-items: center;
	gap: 22px;
	flex-wrap: wrap;
}

.np-tilbudhero .np-tilbud-cta {
	background: var(--fremhaev);
	color: var(--fremhaev-tekst);
	border-color: var(--fremhaev);
	font-size: 1.02rem;
	padding: 14px 26px;
}

.np-tilbudhero .np-tilbud-cta:hover {
	background: #fff;
	border-color: #fff;
}

.np-tilbudhero-vurdering {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: rgba(255, 255, 255, 0.78);
	font-size: 0.95rem;
}

.np-tilbudhero-vurdering .np-hero-stjerner {
	color: var(--fremhaev);
}

.np-tilbudhero-tal-lille {
	font-weight: 700;
	color: #fff;
}

.np-tilbudhero-punkter {
	list-style: none;
	margin: 30px 0 0;
	padding: 0;
	display: grid;
	gap: 9px;
}

.np-tilbudhero-punkter li {
	position: relative;
	padding-left: 26px;
	color: rgba(255, 255, 255, 0.86);
	line-height: 1.5;
}

.np-tilbudhero-punkter li::before {
	content: "";
	position: absolute;
	left: 2px;
	top: 9px;
	width: 8px;
	height: 8px;
	border-radius: 999px;
	background: var(--fremhaev);
}

/* Coverne beviser hvad man faar. De ligger som en vifte, saa de laeses som
   én ting og ikke som tre knapper man skal vaelge imellem. */
.np-tilbudhero-covers {
	display: flex;
	align-items: center;
}

.np-tilbudhero-cover {
	width: clamp(110px, 13vw, 178px);
	height: auto;
	border-radius: 14px;
	box-shadow: 0 18px 44px rgba(0, 0, 0, 0.42);
}

.np-tilbudhero-cover + .np-tilbudhero-cover {
	margin-left: clamp(-58px, -5vw, -34px);
}

/* --- Resten af siden --- */

/* Hoer-foer-du-koeber. Afspilleren til venstre, hvad man hoerer til hoejre —
   saa ligner det et afsnit og ikke en reklame. */
.np-tilbud-lyt {
	margin-bottom: var(--luft);
}

.np-tilbud-lyt-indhold {
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
	gap: 34px 44px;
	align-items: center;
}

.np-tilbud-lyt-titel {
	font-family: Poppins, system-ui, sans-serif;
	font-weight: 700;
	font-size: clamp(1.25rem, 2.6vw, 1.7rem);
	line-height: 1.2;
	margin: 6px 0 12px;
}

.np-tilbud-lyt-noter {
	margin: 0 0 16px;
	color: var(--mut);
	line-height: 1.6;
}

.np-tilbud-lyt-under {
	margin: 0;
	font-weight: 600;
}

/* Tre stemmer ved siden af hinanden. */
.np-tilbud-citater {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 28px;
}

.np-tilbud-citat-kort {
	background: var(--flade);
	border-radius: 16px;
	padding: 24px 24px 20px;
}

.np-tilbud-citat {
	margin: 0 0 var(--luft);
	padding: 0;
	border: 0;
	text-align: left;
}

.np-tilbud-citat .np-sektionsmaerkat {
	margin-bottom: 18px;
}

.np-tilbud-citat-tekst {
	margin: 0;
	max-width: none;
	font-family: Poppins, system-ui, sans-serif;
	font-size: 1.02rem;
	line-height: 1.5;
}

.np-tilbud-citat-navn {
	margin: 14px 0 0;
	color: var(--mut);
	font-size: 0.95rem;
}

@media (max-width: 900px) {
	.np-tilbud-lyt-indhold {
		grid-template-columns: 1fr;
	}

	.np-tilbud-citater {
		grid-template-columns: 1fr;
	}
}

.np-tilbud-hvad {
	margin-bottom: var(--luft);
}

.np-tilbud-liste {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 30px;
}

.np-tilbud-liste strong {
	display: block;
	font-family: Poppins, system-ui, sans-serif;
	font-size: 1.08rem;
	margin-bottom: 6px;
}

.np-tilbud-liste span {
	color: var(--mut);
	line-height: 1.55;
}

.np-tilbud-citat {
	margin: 0 0 var(--luft);
	padding: 34px 0;
	border-top: 1px solid var(--line);
	border-bottom: 1px solid var(--line);
	text-align: center;
}

.np-tilbud-citat-tekst {
	margin: 0 auto;
	max-width: 46ch;
	font-family: Poppins, system-ui, sans-serif;
	font-size: clamp(1.15rem, 2.4vw, 1.55rem);
	line-height: 1.4;
}

.np-tilbud-citat-navn {
	margin: 14px 0 0;
	color: var(--mut);
}

.np-tilbud-vaerter {
	margin-bottom: var(--luft);
}

/* Paa proevesiden staar vaerterne midt paa siden. Resten af sitet har dem
   venstrestillet i en laesespalte; her er de et blikfang, ikke en liste man
   laeser sig igennem. Overskriften foelger med, ellers ser den forskudt ud. */
.np-tilbud-vaerter {
	text-align: center;
	/* Polstring og ikke margin: sektionens bundmargin bliver nulstillet et
	   andet sted, og en margin kan desuden kollapse mod naboen. Uden det her
	   sidder vaertskortene klods op ad den groenne bane nedenunder. */
	padding-bottom: var(--luft);
}

.np-tilbud-vaerter .np-vaertgitter {
	justify-content: center;
}

.np-tilbud-slut {
	padding: var(--luft) 0 0;
	text-align: center;
}

.np-tilbud-slut-titel {
	font-family: Poppins, system-ui, sans-serif;
	font-weight: 700;
	font-size: clamp(1.7rem, 4vw, 2.6rem);
	text-transform: uppercase;
	line-height: 1.08;
	margin: 0 0 10px;
}

.np-tilbud-slut-tekst {
	margin: 0;
	color: var(--mut);
}

.np-tilbud-slut .np-tilbud-handling {
	margin: 26px 0 0;
	justify-content: center;
}

.np-tilbud-handling {
	display: flex;
	align-items: center;
	gap: 20px;
	flex-wrap: wrap;
}

.np-tilbud-login {
	color: var(--mut);
}

.np-tilbud-fakta {
	margin: var(--luft-lille) auto 0;
	max-width: 640px;
	display: grid;
	gap: 18px;
	text-align: left;
}

.np-tilbud-fakta dt {
	font-weight: 600;
	margin-bottom: 4px;
}

.np-tilbud-fakta dd {
	margin: 0;
	color: var(--mut);
	line-height: 1.55;
}

@media (max-width: 900px) {
	.np-tilbudhero-indre {
		grid-template-columns: 1fr;
		gap: 36px;
	}

	.np-tilbudhero-covers {
		justify-content: flex-start;
	}

	.np-tilbud-liste {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 600px) {
	.np-tilbud-liste {
		grid-template-columns: 1fr;
	}
}

.np-liste-mere {
	margin: 16px 0 0;
}

.np-mellemtitel {
	margin-bottom: var(--luft-lille);
}

/* Prissektionen: dæmpet flade, så de hvide kort træder frem. */
.np-moerk-bund {
	background: var(--flade);
	color: var(--ink);
	padding: var(--luft) 0;
}

.np-moerk-bund .np-indre {
	display: grid;
	grid-template-columns: 1fr 1.2fr;
	gap: 48px;
	align-items: start;
}

.np-tilbud {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: 12px;
	padding: 28px;
}

.np-tilbud-maerkat {
	color: var(--accent);
	margin: 0 0 4px;
	font-size: 1rem;
}

.np-tilbud-pris {
	font-family: Poppins, system-ui, sans-serif;
	font-weight: 700;
	font-size: 2rem;
	text-transform: uppercase;
	margin: 0 0 12px;
	line-height: 1.1;
}

.np-tilbud-punkter {
	list-style: none;
	margin: 0 0 20px;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.np-tilbud-punkter li {
	padding-left: 24px;
	position: relative;
}

.np-tilbud-punkter li::before {
	content: "\2713";
	position: absolute;
	left: 0;
	color: var(--accent);
	font-weight: 700;
}

/* Medlemmets genveje. */
/* Medlemmernes top: nyeste afsnit til venstre, inputformularen ved siden af.
   Videoen faar den bredeste spalte — den skal kunne ses, og formularen er
   smallere af natur. Under 900px falder de tilbage under hinanden, ellers
   bliver afspilleren for lille til at se noget paa. */
/* Luft mellem medlemmernes top og talstriben nedenunder. Striben har kun
   bundmargin og en streg foroven, saa uden det her lagde stregen sig klods
   op ad "Gaa til arkivet". */
.np-medlemstop {
	margin-bottom: var(--luft-lille);
}

/* Hoejre spalte: formularen med "Gaa til arkivet" under sig. Knappen laa
   foer under afspilleren, hvor den efterlod et tomt felt til hoejre. */
.np-medlemstop-side {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

/* Knappen staar alene under formularen. Den tager resten af spaltens
   hoejde og centreres baade vandret og lodret i det felt, saa den ikke
   klaeber til hjoernet under kortet. */
.np-medlemstop-side .np-medlem-genveje {
	flex: 1;
	align-self: stretch;
	align-items: center;
	justify-content: center;
	margin-top: 0;
}

.np-medlemstop-kolonner {
	display: grid;
	grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
	gap: 32px;
	align-items: stretch;
}

/* Formularen staar som kort i sin egen spalte og skal fylde den ud.
   Uden for gridet beholder den sin egen bredde. */
.np-medlemstop-side > .np-input {
	margin: 0;
}

.np-medlemstop-kolonner .np-input-indre {
	max-width: none;
}

@media (max-width: 900px) {
	.np-medlemstop-kolonner {
		grid-template-columns: 1fr;
	}

	.np-medlemstop-side > .np-input {
		margin-top: var(--luft);
	}

	/* Under hinanden er der ingen overskydende hoejde at centrere i, saa
	   knappen falder tilbage til venstre med almindelig luft over. */
	.np-medlemstop-side .np-medlem-genveje {
		flex: none;
		justify-content: flex-start;
		margin-top: 24px;
	}
}

.np-medlem-genveje {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
	margin-top: 24px;
}

.np-knap-daempet {
	background: transparent;
	color: var(--ink);
	border: 2px solid var(--line);
}

/* Fastgjort bundbjælke der glider op efter scroll. */
.np-bundbjaelke {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	background: var(--ink);
	color: #fff;
	border-top: 1px solid rgba(255, 255, 255, 0.15);
	transform: translateY(100%);
	transition: transform 0.25s ease;
	z-index: 50;
}

.np-bundbjaelke.np-er-synlig {
	transform: translateY(0);
}

.np-bundbjaelke-raekke {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding-top: 12px;
	padding-bottom: 12px;
}

.np-bundbjaelke-tekst {
	margin: 0;
	font-weight: 600;
}

@media (max-width: 800px) {
	.np-hero .np-indre,
	.np-moerk-bund .np-indre {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 600px) {
	.np-talstribe {
		grid-template-columns: 1fr;
	}

	.np-talstribe li {
		padding: 22px 0;
		border-left: 0;
		border-top: 1px solid var(--line);
	}

	.np-talstribe li:first-child {
		border-top: 0;
	}

	.np-bundbjaelke-raekke {
		flex-direction: column;
		align-items: stretch;
		text-align: center;
	}

	.np-bundbjaelke-tekst {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* ---------- Podcastsiden ---------- */

/* Boksen der sender lytteren videre til deres egen app. */
.np-forbind {
	background: var(--wash);
	border: 1px solid var(--line);
	border-radius: 12px;
	padding: 20px 24px;
	margin: 24px 0 32px;
}

.np-forbind-ikoner {
	display: flex;
	gap: 12px;
	margin-bottom: 12px;
}

.np-forbind-ikon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: 999px;
	background: #fff;
	border: 1px solid var(--line);
	color: var(--ink);
}

.np-forbind-overskrift {
	margin: 0;
	font-weight: 600;
}

.np-forbind-tekst {
	margin: 4px 0 16px;
	color: var(--mut);
}

.np-forbind-knap {
	margin: 0;
}

.np-podcast-beskrivelse {
	color: var(--mut);
	max-width: 60ch;
}

/* Afsnittene som gitter med to spalter. */
.np-gitter {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: 40px;
	border-top: 0;
}

.np-kort {
	position: relative;
	padding-bottom: 40px;
}

.np-kort-knap {
	align-items: flex-start;
	padding: 16px 8px 4px;
	gap: 14px;
}

.np-kort-billede {
	width: 56px;
	height: 56px;
	border-radius: 8px;
	object-fit: cover;
	flex-shrink: 0;
}

.np-kort-billede-tom {
	display: block;
	background: var(--wash);
	border: 1px solid var(--line);
}

.np-kort-tekst {
	display: flex;
	flex-direction: column;
	gap: 4px;
	flex: 1;
	min-width: 0;
}

.np-kort-titel {
	font-weight: 600;
	line-height: 1.3;
}

.np-kort-meta {
	color: var(--mut);
	font-size: 0.9rem;
}

/* Plusmærket der markerer at afsnittet hører til medlemskabet. */
.np-kort-plus {
	flex-shrink: 0;
	width: 20px;
	height: 20px;
	border-radius: 5px;
	background: var(--accent);
	color: var(--accent-tekst);
	font-weight: 700;
	line-height: 20px;
	text-align: center;
	font-size: 0.95rem;
}

.np-kort-badge {
	align-self: flex-start;
}

.np-kort-uddrag {
	margin: 0 8px;
	color: var(--mut);
	font-size: 0.95rem;
}

.np-kort-laas {
	position: absolute;
	right: 8px;
	bottom: 14px;
	margin-top: 0;
}

.np-punkt.np-er-aktiv .np-kort-knap {
	box-shadow: inset 4px 0 0 var(--accent);
	background: var(--wash);
}

@media (max-width: 700px) {
	.np-gitter {
		grid-template-columns: 1fr;
	}

	.np-kort {
		padding-bottom: 34px;
	}
}

/* ---------- Oversigten over podcasts ---------- */

/* Banderole i toppen, så siden har vægt fra første skærm. */
.np-arkivhero {
	background: var(--wash);
	color: var(--ink);
	padding: 64px 0 72px;
	border-bottom: 1px solid var(--line);
}

.np-arkivhero-maerkat {
	margin-bottom: 10px;
}

.np-arkivhero-titel {
	font-family: Poppins, system-ui, sans-serif;
	font-weight: 700;
	font-size: clamp(2.2rem, 5vw, 3.4rem);
	text-transform: uppercase;
	letter-spacing: 0.005em;
	line-height: 1.05;
	margin: 0 0 12px;
}

.np-arkivhero-under {
	margin: 0;
	color: var(--mut);
	font-size: 1.15rem;
}

/* Arkivet: de tre podcasts side om side. Hver spalte er kortet i
   rækkens farve øverst og de nyeste afsnit nedenunder — hele arkivet
   på ét skærmbillede i stedet for tre bånd under hinanden. */
.np-arkiv .np-indre {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 44px 32px;
	align-items: stretch;
}

/* Sektionen om hver podcast lader sine to dele — kortet og de nyeste
   afsnit — blive selvstændige felter i gitteret. Så havner alle tre
   kort i samme række og bliver lige høje, uanset hvor lang
   beskrivelsen er, og "Seneste afsnit" starter i samme højde. */
.np-podcastraekke {
	display: contents;
}

/* Uden faste rækker fylder gitteret bare felterne i den rækkefølge de
   står: kort, liste, kort — og så havner de i forskellige rækker.
   Kortene hører til række ét, listerne til række to. */
.np-podcastraekke-kort {
	grid-row: 1;
}

.np-podcastraekke-nyeste {
	grid-row: 2;
}

.np-podcastraekke-kort {
	display: flex;
	flex-direction: column;
	background: color-mix(in srgb, var(--show, var(--gul)) 6%, var(--wash));
	border: 1px solid color-mix(in srgb, var(--show, var(--gul)) 18%, var(--line));
	border-radius: 18px;
	padding: 18px;
}

/* Beskrivelsen tager den plads der er tilovers, så knappen står i
   bunden af alle tre kort i stedet for lige under teksten. */
.np-podcastraekke-beskrivelse {
	flex: 1 1 auto;
}

.np-podcastraekke-knap {
	margin-top: auto;
}

.np-podcastraekke-cover {
	display: block;
	border-radius: 12px;
	overflow: hidden;
	margin-bottom: 16px;
	transition: transform 0.22s ease, box-shadow 0.22s ease;
}

.np-podcastraekke-cover:hover {
	transform: translateY(-3px);
	box-shadow: 0 12px 26px rgba(0, 0, 0, 0.16);
}

.np-podcastraekke-cover img,
.np-podcastraekke-cover .np-kort-billede-tom {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
}

.np-podcastraekke-navn {
	margin: 0 0 2px;
	font-family: Poppins, system-ui, sans-serif;
	font-weight: 700;
	font-size: 1.3rem;
	text-transform: uppercase;
	letter-spacing: 0.005em;
	line-height: 1.15;
}

.np-podcastraekke-navn a {
	text-decoration: none;
}

.np-podcastraekke-navn a:hover {
	text-decoration: underline;
	text-underline-offset: 4px;
}

.np-podcastraekke-tal {
	margin: 0 0 12px;
	color: var(--mut);
	font-size: 0.88rem;
}

.np-podcastraekke-beskrivelse {
	margin: 0 0 14px;
	color: var(--mut);
	font-size: 0.92rem;
	line-height: 1.5;
}

.np-podcastraekke-knap {
	display: block;
	text-align: center;
	padding: 11px 18px;
	font-size: 0.9rem;
}

/* De nyeste afsnit under kortet. */
.np-podcastraekke-nyeste {
	margin-top: 20px;
}

.np-podcastraekke-nyeste .np-sektionsmaerkat {
	margin-bottom: 6px;
}

.np-podcastraekke-liste {
	list-style: none;
	margin: 0;
	padding: 0;
	border-top: 1px solid var(--line);
}

.np-nyeste {
	border-bottom: 1px solid var(--line);
}

.np-nyeste-link {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 3px 12px;
	align-items: center;
	padding: 13px 8px 13px 4px;
	text-decoration: none;
	border-radius: 8px;
	transition: background 0.15s ease, transform 0.15s ease;
}

.np-nyeste-link:hover {
	background: color-mix(in srgb, var(--show, var(--gul)) 5%, #fff);
	transform: translateX(3px);
}

.np-nyeste-dato {
	grid-column: 1 / -1;
	color: color-mix(in srgb, var(--show, var(--gul)) 78%, #1C1C1E);
	font-family: Poppins, system-ui, sans-serif;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	font-size: 0.72rem;
}

.np-nyeste-titel {
	font-weight: 600;
	font-size: 0.94rem;
	line-height: 1.35;
	min-width: 0;
}

.np-nyeste-meta {
	display: flex;
	align-items: center;
	gap: 10px;
	color: var(--mut);
	font-size: 0.82rem;
}

.np-nyeste-meta .np-laas {
	margin-top: 0;
}

@media (max-width: 1000px) {
	.np-arkiv .np-indre {
		grid-template-columns: 1fr;
		gap: 44px;
	}

	/* Raekkerne skal slippes fri igen. Paa desktop er kortene laast til
	   raekke 1 og listerne til raekke 2, saa de tre kort staar ved siden af
	   hinanden og bliver lige hoeje. Bliver den laasning staaende her, kan
	   tre kort ikke vaere i én kolonne — gitteret opfinder saa tre
	   implicitte kolonner, og siden flyder ud over skaermen.
	   Med auto falder de i dokumentets orden: kort, liste, kort, liste. */
	.np-podcastraekke-kort,
	.np-podcastraekke-nyeste {
		grid-row: auto;
	}

	.np-podcastraekke-kort {
		display: grid;
		grid-template-columns: 96px minmax(0, 1fr);
		gap: 6px 16px;
		align-items: center;
		padding: 14px;
	}

	.np-podcastraekke-cover {
		grid-row: 1 / span 3;
		margin: 0;
	}

	.np-podcastraekke-beskrivelse {
		display: none;
	}

	.np-podcastraekke-tal {
		margin: 0;
	}

	.np-podcastraekke-knap {
		grid-column: 2;
		justify-self: start;
		padding: 8px 14px;
		font-size: 0.82rem;
	}
}

/* ---------- Forsidens salgssider ---------- */

.np-hero-maerkat {
	display: inline-block;
	color: var(--mut);
	font-size: 0.82rem;
	letter-spacing: 0.12em;
	margin: 0 0 14px;
}

.np-hero-rytme {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	color: var(--ink);
	font-weight: 600;
	margin: 0 0 28px;
}

.np-hero-handling {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
}

.np-hero-fra {
	margin: 0;
	color: var(--mut);
	font-size: 0.95rem;
}

/* De tre shows. */
.np-shows,
.np-fordele,
.np-seneste {
	margin-bottom: var(--luft);
}

.np-showgitter {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px;
	max-width: 760px;
}

@media (max-width: 620px) {
	.np-showgitter {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 16px;
	}
}

.np-show-link {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 14px;
	border: 1px solid var(--line);
	border-radius: 14px;
	text-decoration: none;
	height: 100%;
	transition: border-color 0.15s ease, transform 0.15s ease;
}

.np-show-link:hover {
	border-color: var(--ink);
	transform: translateY(-2px);
}

.np-show-billede {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: 10px;
}

.np-show-navn {
	font-family: Poppins, system-ui, sans-serif;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	font-size: 1.15rem;
	line-height: 1.1;
}

.np-show-antal {
	color: var(--mut);
	font-size: 0.9rem;
}

/* Fordelene ved medlemskabet. */
.np-fordelsliste {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 14px 28px;
}

.np-fordelsliste li {
	position: relative;
	padding-left: 30px;
	font-size: 1.05rem;
}

.np-fordelsliste li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 7px;
	width: 16px;
	height: 9px;
	border-left: 3px solid var(--accent);
	border-bottom: 3px solid var(--accent);
	transform: rotate(-45deg);
}

/* ---------- Priserne ---------- */

#priser .np-indre {
	grid-template-columns: 1fr;
	gap: 56px;
}

.np-priser-titel {
	font-family: Poppins, system-ui, sans-serif;
	font-weight: 700;
	font-size: clamp(1.7rem, 4vw, 2.3rem);
	text-transform: uppercase;
	letter-spacing: 0.005em;
	line-height: 1.1;
	margin: 0 0 32px;
}

.np-pakker {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-template-rows: auto 1fr;
	gap: 20px;
}

.np-pakke {
	position: relative;
	background: #fff;
	--accent:       #1C1C1E;
	--accent-tekst: #fff;
	color: var(--ink);
	border-radius: 12px;
	overflow: hidden;
	display: grid;
	grid-row: span 2;
	grid-template-rows: subgrid;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.07);
}

/* Uden subgrid holder en fast hoejde paa hovedet kortene i sync. */
@supports not (grid-template-rows: subgrid) {
	.np-pakke {
		display: flex;
		flex-direction: column;
		grid-row: auto;
	}

	.np-pakke-top {
		min-height: 128px;
	}
}

.np-pakke.np-er-fremhaevet {
	outline: 3px solid var(--fremhaev);
	outline-offset: 0;
}

/* Strimmel i fuld bredde øverst, så den aldrig lægger sig hen over navnet. */
.np-pakke-anbefalet {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	background: var(--fremhaev);
	color: var(--fremhaev-tekst);
	font-family: Poppins, system-ui, sans-serif;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	font-size: 0.78rem;
	line-height: 1.4;
	padding: 5px 12px;
	text-align: center;
	margin: 0;
	z-index: 1;
}

/* Alle kort holder plads fri til strimlen, så hovederne flugter
   uanset hvilket kort der er fremhævet. */
.np-pakke-top {
	background: #3A3A3D;
	color: #fff;
	padding: 42px 18px 18px;
	text-align: center;
}

.np-pakke-navn {
	font-family: Poppins, system-ui, sans-serif;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	font-size: 1.7rem;
	line-height: 1.1;
	margin: 0 0 6px;
}

.np-pakke-linje {
	margin: 0;
	font-size: 0.85rem;
	color: rgba(255, 255, 255, 0.75);
	line-height: 1.4;
}

.np-pakke-krop {
	padding: 26px 18px 22px;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	min-height: 0;
}

.np-pakke-pris {
	font-family: Poppins, system-ui, sans-serif;
	font-weight: 700;
	line-height: 1;
	margin: 0;
	display: flex;
	align-items: baseline;
	justify-content: center;
	gap: 2px;
}

.np-pakke-tal {
	font-size: 3.4rem;
	letter-spacing: -0.01em;
}

.np-pakke-kr {
	font-size: 1.3rem;
}

.np-pakke-pr {
	margin: 0;
	color: var(--mut);
	font-size: 0.9rem;
}

.np-pakke-spar {
	margin: 10px 0 0;
	color: var(--accent);
	font-family: Poppins, system-ui, sans-serif;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

/* auto skubber knappen til bunden, så alle fire flugter uanset om
   kortet har en spar-linje eller ej. */
.np-pakke-knap {
	margin-top: auto;
	padding-top: 12px;
	padding-bottom: 12px;
	width: 100%;
	text-align: center;
}

.np-pakke-spar + .np-pakke-knap,
.np-pakke-pr + .np-pakke-knap {
	margin-top: auto;
}

.np-priser-fod {
	margin: 24px 0 0;
	color: var(--mut);
	font-size: 0.95rem;
}

@media (max-width: 900px) {
	.np-pakker {
		grid-template-columns: repeat(2, 1fr);
		grid-template-rows: repeat(2, auto 1fr);
	}
}

@media (max-width: 520px) {
	.np-pakker {
		grid-template-columns: 1fr;
		grid-template-rows: repeat(4, auto 1fr);
	}

	.np-pakke-knap {
		display: block;
	}
}

/* ---------- Bredere layout på desktop ---------- */

/* Indholdet får mere luft på store skærme, og afspilleren bryder ud
   af spalten i begge sider, så den fylder ca. en tredjedel mere end
   resten. Den er sidens hovedperson og må godt tage plads. */
@media (min-width: 1100px) {
	.np-indre {
		max-width: 1180px;
	}

	.np-midte > .np-indre > .np-afspiller,
	.np-midte > .np-indre > .np-forbind,
	.np-midte > .np-indre > .np-noter {
		width: 110%;
		margin-left: -5%;
		margin-right: -5%;
	}

	/* Teksten følger spalten, ikke den brede videoramme. */
	.np-midte > .np-indre > .np-afspiller .np-aktiv-hoved {
		width: calc(100% / 1.1);
		margin-left: auto;
		margin-right: auto;
	}
}

@media (min-width: 1500px) {
	.np-indre {
		max-width: 1440px;
	}
}

/* Afsnittets nummer, titel og dato står over videoen. */
.np-aktiv-hoved {
	margin-bottom: 18px;
}

.np-aktiv-hoved .np-aktiv-dato {
	margin-bottom: 0;
}

/* Noterne står under forbindelsesboksen. */
.np-midte > .np-indre > .np-aktiv-noter {
	margin-bottom: 36px;
}

/* ---------- Ugeplan, fordele og udtalelser ---------- */

.np-ugeplan,
.np-udtalelser {
	margin-bottom: var(--luft);
}

/* Ugeplanen: én kolonne pr. udgivelsesdag, med et rødt spor i toppen. */
.np-ugeliste {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.np-ugedag-link {
	display: grid;
	grid-template-columns: 72px 1fr auto;
	gap: 22px;
	align-items: center;
	padding: 14px 20px 14px 14px;
	border: 1px solid var(--line);
	border-radius: 14px;
	text-decoration: none;
	background: #fff;
	transition: border-color 0.16s ease, transform 0.16s ease, box-shadow 0.16s ease;
}

a.np-ugedag-link:hover {
	border-color: var(--ink);
	transform: translateX(4px);
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.07);
}

.np-ugedag-billede {
	width: 72px;
	height: 72px;
	border-radius: 10px;
	object-fit: cover;
	display: block;
}

.np-ugedag-midt {
	display: grid;
	grid-template-columns: 110px 1fr;
	grid-template-rows: auto auto;
	column-gap: 20px;
	align-items: baseline;
	min-width: 0;
}

/* Dagen står som en rolig etiket til venstre for titlen. */
.np-ugedag-dag {
	grid-row: 1 / span 2;
	align-self: center;
	color: var(--gul-tekst);
	font-family: Poppins, system-ui, sans-serif;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-size: 0.78rem;
	color: var(--mut);
	border-right: 1px solid var(--line);
	padding-right: 20px;
	height: 100%;
	display: flex;
	align-items: center;
}

.np-ugedag-titel {
	font-family: Poppins, system-ui, sans-serif;
	font-weight: 700;
	font-size: 1.2rem;
	text-transform: uppercase;
	letter-spacing: 0.005em;
	line-height: 1.2;
}

.np-ugedag-tekst {
	grid-column: 2;
	color: var(--mut);
	font-size: 0.96rem;
	line-height: 1.45;
}

.np-ugedag-pil {
	font-size: 1.3rem;
	color: var(--ink);
	transition: transform 0.16s ease;
}

a.np-ugedag-link:hover .np-ugedag-pil {
	transform: translateX(4px);
}

@media (max-width: 760px) {
	.np-ugedag-link {
		grid-template-columns: 56px 1fr;
		gap: 14px;
		padding: 12px;
	}

	.np-ugedag-billede {
		width: 56px;
		height: 56px;
	}

	.np-ugedag-midt {
		grid-template-columns: 1fr;
		row-gap: 2px;
	}

	.np-ugedag-dag {
		grid-row: auto;
		border-right: 0;
		padding-right: 0;
		height: auto;
	}

	.np-ugedag-tekst {
		grid-column: 1;
	}

	.np-ugedag-pil {
		display: none;
	}
}

/* Fordelene: overskrift til venstre, fordelene som 2x2 til højre.
   Fire smalle spalter pressede teksten ned i tre linjer og efterlod
   et dødt felt ved siden af overskriften. To spalter giver hver
   fordel dobbelt bredde og fylder panelet ud. */
.np-fordelspanel {
	background: #fff;
	color: var(--ink);
	border: 1px solid var(--line);
	border-radius: 22px;
	padding: 56px 52px;
	display: grid;
	grid-template-columns: minmax(240px, 320px) 1fr;
	gap: 56px;
	align-items: start;
}

.np-fordelspanel-hoved {
	margin: 0;
}

.np-fordelspanel-titel {
	font-family: Poppins, system-ui, sans-serif;
	font-weight: 700;
	font-size: clamp(1.6rem, 3vw, 2.1rem);
	text-transform: uppercase;
	letter-spacing: 0.005em;
	line-height: 1.1;
	margin: 0;
}

.np-fordelsgitter {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	column-gap: 44px;
	row-gap: 36px;
}

.np-fordel {
	padding-top: 20px;
	border-top: 1px solid var(--line);
	border-left: 0;
}

.np-fordel-ikon {
	display: block;
	color: var(--ink);
	line-height: 0;
	margin-bottom: 16px;
}

.np-fordel-ikon .np-ikon {
	width: 30px;
	height: 30px;
	display: block;
}

.np-fordel-titel {
	margin: 0 0 8px;
	font-family: Poppins, system-ui, sans-serif;
	font-weight: 700;
	font-size: 1.12rem;
	line-height: 1.25;
}

.np-fordel-tekst {
	margin: 0;
	color: var(--mut);
	font-size: 0.97rem;
	line-height: 1.55;
	max-width: 42ch;
}

@media (max-width: 1000px) {
	.np-fordelspanel {
		grid-template-columns: 1fr;
		gap: 36px;
		padding: 40px 32px;
	}
}

@media (max-width: 620px) {
	.np-fordelspanel {
		padding: 32px 24px;
		border-radius: 16px;
	}

	.np-fordelsgitter {
		grid-template-columns: 1fr;
		row-gap: 28px;
	}
}

/* Udtalelser: tre ad gangen, uden kasser. Et stort anførselstegn
   sætter tonen, citatet bærer sig selv, og navnet står roligt under. */
.np-udtalelsesspor {
	position: relative;
}

.np-udtalelsesgitter {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 44px 40px;
}

/* Uden JavaScript vises alle grupper under hinanden. Rotationen
   slås først til når scriptet har markeret sporet. */
.np-udtalelsesgitter + .np-udtalelsesgitter {
	margin-top: 44px;
}

.np-udtalelsesspor.np-roterer .np-udtalelsesgitter {
	display: none;
	margin-top: 0;
}

.np-udtalelsesspor.np-roterer .np-udtalelsesgitter.np-er-aktiv {
	display: grid;
	animation: np-ind 0.5s cubic-bezier(0.22, 0.61, 0.36, 1) backwards;
}

.np-udtalelse {
	display: flex;
	flex-direction: column;
}

.np-udtalelse-citat {
	position: relative;
	margin: 0 0 16px;
	padding-top: 34px;
	font-size: 1.02rem;
	line-height: 1.6;
}

/* Anførselstegnet står som et grafisk element over citatet. */
.np-udtalelse-citat::before {
	color: var(--gul);
	content: "\201C";
	position: absolute;
	top: -8px;
	left: -4px;
	font-family: Poppins, system-ui, sans-serif;
	font-weight: 700;
	font-size: 3.4rem;
	line-height: 1;
	color: var(--line);
}

.np-udtalelse-citat::after {
	content: none;
}

.np-udtalelse-navn {
	margin: auto 0 0;
	font-family: Poppins, system-ui, sans-serif;
	font-weight: 700;
	font-size: 0.78rem;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	color: var(--mut);
}

/* Prikkerne under. */
.np-udtalelsesprikker {
	display: flex;
	gap: 2px;
	margin-top: 34px;
}

/* Knappen er trykfladen, stregen er pseudo-elementet. Sætter man
   baggrunden på selve knappen, farves hele fladen — og en genvej som
   background nulstiller samtidig background-clip. */
.np-prik {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 30px;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
}

.np-prik::before {
	content: "";
	display: block;
	width: 22px;
	height: 3px;
	border-radius: 999px;
	background: var(--line);
	transition: background 0.2s ease, width 0.2s ease;
}

.np-prik:hover::before {
	background: var(--mut);
}

.np-prik.np-er-aktiv::before {
	background: var(--gul);
	width: 32px;
}

@media (max-width: 900px) {
	.np-udtalelsesgitter {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 36px 32px;
	}
}

@media (max-width: 620px) {
	.np-udtalelsesgitter {
		grid-template-columns: 1fr;
		gap: 32px;
	}
}

/* Vurderingen i hero. */
.np-hero-vurdering {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 22px;
}

.np-hero-stjerner {
	letter-spacing: 0.08em;
}

.np-hero-vurderingstal {
	font-weight: 700;
}

.np-hero-vurderingkilde {
	color: var(--mut);
	font-size: 0.95rem;
}

/* FAQ'en står nu alene på forsiden, da priserne er flyttet i sidefoden. */
.np-faq-sektion {
	background: #fff;
	padding: var(--luft) 0;
}



/* Luften skaleres ned på mindre skærme. */
@media (max-width: 900px) {
	:root {
		--luft:       72px;
		--luft-lille: 30px;
	}
}

@media (max-width: 600px) {
	:root {
		--luft:       56px;
		--luft-lille: 24px;
	}
}

/* Den sidste sektion i midten dobler ellers luften op mod containerens
   egen bundpadding, og efterlader et stort tomt felt før priserne. */
.np-midte > .np-indre > section:last-child {
	margin-bottom: 0;
}

/* ---------- Værterne ---------- */

/* Med få værter må gruppen ikke strækkes ud over hele bredden — så
   bliver der mere luft end mennesker. Gitteret har et loft, og
   billederne fylder hele deres spalte, så ansigterne bærer sektionen. */
.np-vaerter {
	margin-bottom: var(--luft);
}

.np-vaertgitter {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(170px, 215px));
	justify-content: start;
	gap: 32px 22px;
}

@media (max-width: 900px) {
	.np-vaertgitter {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 32px 24px;
	}
}

/* Spillerkort i samlekort-stil: marmoreret bund, ordmærke i toppen,
   portrættet toner ud forneden, og nummer, navn og rolle spatieret
   nederst. Alt er tegnet i CSS — billederne er almindelige portrætter. */
.np-vaert {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	align-items: center;
	text-align: center;
	aspect-ratio: 5 / 9;
	padding: 0 14px 42px;
	border-radius: 14px;
	overflow: hidden;
	color: var(--ink);
	transition: transform 0.25s ease, box-shadow 0.25s ease;

	/* Marmoren: lag af bløde forløb i varme gråtoner med gyldne årer. */
	background:
		radial-gradient(120% 80% at 12% 8%, rgba(240, 180, 41, 0.20) 0%, rgba(240, 180, 41, 0) 42%),
		radial-gradient(90% 70% at 88% 22%, rgba(28, 28, 30, 0.16) 0%, rgba(28, 28, 30, 0) 46%),
		radial-gradient(140% 90% at 78% 92%, rgba(240, 180, 41, 0.14) 0%, rgba(240, 180, 41, 0) 40%),
		radial-gradient(100% 60% at 20% 78%, rgba(28, 28, 30, 0.12) 0%, rgba(28, 28, 30, 0) 44%),
		linear-gradient(155deg, #FCFBF8 0%, #F1EEE7 38%, #E7E3D9 62%, #F7F5F0 100%);
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
}

.np-vaert:hover {
	transform: translateY(-5px);
	box-shadow: 0 18px 38px rgba(0, 0, 0, 0.18);
}

/* Ordmærket øverst, som hos de rigtige kort: udhulet og spatieret. */
.np-vaert::before {
	content: "NOPRIME";
	position: absolute;
	top: 13px;
	left: 0;
	right: 0;
	z-index: 3;
	font-family: Poppins, system-ui, sans-serif;
	font-weight: 800;
	font-size: 0.82rem;
	letter-spacing: 0.34em;
	text-indent: 0.34em;
	color: transparent;
	-webkit-text-stroke: 1px rgba(28, 28, 30, 0.28);
	opacity: 0.9;
}

/* Portrættet toner ud forneden, så det smelter ind i marmoren. */
.np-vaert-billede {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 60%;
	z-index: 2;
	width: 100%;
	margin: 0;
	border-radius: 0;
	object-fit: cover;
	object-position: center 22%;
	-webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 64%, rgba(0, 0, 0, 0.5) 82%, transparent 100%);
	mask-image: linear-gradient(to bottom, #000 0%, #000 64%, rgba(0, 0, 0, 0.5) 82%, transparent 100%);
	transition: transform 0.45s ease;
}

.np-vaert:hover .np-vaert-billede {
	transform: scale(1.04);
}

.np-vaert-initialer {
	display: flex;
	align-items: center;
	justify-content: center;
	background: none;
	border: 0;
	color: rgba(28, 28, 30, 0.16);
	font-family: Poppins, system-ui, sans-serif;
	font-weight: 800;
	font-size: 3.2rem;
}

.np-vaert-navn,
.np-vaert-rolle,
.np-vaert-tekst {
	position: relative;
	z-index: 4;
}

.np-vaert-navn {
	margin: 0 0 6px;
	padding-top: 6px;
	border-top: 1px solid rgba(28, 28, 30, 0.18);
	font-family: Poppins, system-ui, sans-serif;
	font-weight: 700;
	font-size: 0.9rem;
	text-transform: uppercase;
	letter-spacing: 0.09em;
	text-indent: 0.09em;
	line-height: 1.25;
	align-self: stretch;
	text-shadow: 0 1px 3px rgba(252, 251, 248, 0.85);
}

.np-vaert-rolle {
	margin: 0;
	color: var(--gul-tekst);
	font-family: Poppins, system-ui, sans-serif;
	font-weight: 600;
	font-size: 0.68rem;
	text-transform: uppercase;
	letter-spacing: 0.15em;
	text-indent: 0.15em;
	text-shadow: 0 1px 3px rgba(252, 251, 248, 0.85);
}

.np-vaert-tekst {
	margin: 9px 0 0;
	color: var(--ink);
	opacity: 0.72;
	font-size: 0.86rem;
	line-height: 1.45;
	min-height: calc(0.86rem * 1.45 * 3);
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

@media (max-width: 900px) {
	.np-vaertgitter {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 32px 24px;
	}
}

@media (max-width: 620px) {
	.np-vaertgitter {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 20px 14px;
	}

	.np-vaert {
		padding: 0 12px 16px;
	}

	.np-vaert::after {
		font-size: 3rem;
		bottom: 46px;
	}

	.np-vaert-navn {
		font-size: 0.82rem;
		letter-spacing: 0.08em;
		text-indent: 0.08em;
	}

	.np-vaert-tekst {
		font-size: 0.78rem;
		min-height: calc(0.78rem * 1.45 * 3);
	}
}

/* Mærkatet: en vandret bjælke i fuld bredde lige over navnet. Et
   skråbånd hen over hjørnet så bedre ud, men den synlige længde er
   kun godt 100 px, og så bliver teksten ulæselig. Her er der plads. */
.np-vaert-maerkat {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 4;
	width: auto;
	margin: 0;
	padding: 7px 8px;
	background: var(--ink);
	color: #fff;
	text-align: center;
	font-family: Poppins, system-ui, sans-serif;
	font-weight: 700;
	font-size: 0.66rem;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	text-indent: 0.12em;
	line-height: 1.3;
}

/* ---------- Standpunktet ---------- */

/* Bred erklæring på dæmpet flade. Ingen kasser, ingen ikoner — teksten
   skal stå alene, ellers ligner en holdning bare endnu en feature. */
.np-standpunkt {
	background: var(--groen-lys);
	padding: var(--luft) 0;
}

.np-standpunkt-maerkat {
	margin-bottom: 14px;
}

.np-standpunkt-titel {
	font-family: Poppins, system-ui, sans-serif;
	font-weight: 700;
	font-size: clamp(1.9rem, 4.4vw, 3rem);
	text-transform: uppercase;
	letter-spacing: 0.005em;
	line-height: 1.05;
	margin: 0 0 24px;
	max-width: 18ch;
}

.np-standpunkt-tekst {
	margin: 0;
	font-size: 1.15rem;
	line-height: 1.6;
	color: var(--mut);
	max-width: 60ch;
}

/* ---------- Liv ---------- */

/* Indholdet er synligt som udgangspunkt. Scriptet tilføjer kun en
   klasse der AFSPILLER en indtoning — den skjuler ikke noget. Fejler
   JavaScript, eller er fanen i baggrunden, står siden der bare. */
@media (prefers-reduced-motion: no-preference) {
	html.np-liv .np-liv-emne.np-liv-vis {
		animation: np-ind 0.55s cubic-bezier(0.22, 0.61, 0.36, 1) backwards;
	}
}

@keyframes np-ind {
	from {
		opacity: 0;
		transform: translateY(18px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

/* Afspilleren må gerne reagere når man nærmer sig knappen. */
.np-play {
	transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.np-ramme:hover .np-play {
	transform: scale(1.04);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}

.np-play:active {
	transform: scale(0.98);
}

/* Coveret bag afspilleren trækker sig langsomt tættere på. */
.np-ramme-billede {
	transition: transform 0.6s ease, opacity 0.3s ease;
}

.np-ramme:hover .np-ramme-billede {
	transform: scale(1.03);
}

/* Knapper og prispakker giver et lille svar på berøring. */
.np-knap {
	transition: filter 0.16s ease, transform 0.16s ease;
}

.np-knap:active {
	transform: translateY(1px);
}

.np-pakke {
	transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.np-pakke:hover {
	transform: translateY(-3px);
	box-shadow: 0 12px 28px rgba(0, 0, 0, 0.1);
}

/* Prikken i hero pulserer stille, så toppen ikke står helt død. */
/* ---------- Sidefodens links ---------- */

.np-bund-raekke {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 24px 40px;
}

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

.np-bund-nav a {
	color: rgba(255, 255, 255, 0.72);
	text-decoration: none;
	font-size: 0.92rem;
}

.np-bund-nav a:hover {
	color: #fff;
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* ---------- Kontaktsiden ---------- */

.np-kontakt {
	display: grid;
	grid-template-columns: 1.5fr 1fr;
	gap: 56px;
	align-items: start;
}

.np-formular {
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.np-felt-raekke {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 18px;
}

.np-felt {
	display: flex;
	flex-direction: column;
	gap: 7px;
	margin: 0;
}

.np-felt label {
	font-family: Poppins, system-ui, sans-serif;
	font-weight: 600;
	font-size: 0.86rem;
	text-transform: uppercase;
	letter-spacing: 0.07em;
	color: var(--mut);
}

.np-paakraevet {
	color: var(--ink);
}

.np-felt input,
.np-felt textarea {
	width: 100%;
	padding: 13px 15px;
	font: inherit;
	color: var(--ink);
	background: var(--wash);
	border: 1px solid var(--line);
	border-radius: 10px;
	transition: border-color 0.15s ease, background 0.15s ease;
}

.np-felt input:focus,
.np-felt textarea:focus {
	background: #fff;
	border-color: var(--ink);
	outline: none;
}

.np-felt textarea {
	resize: vertical;
	min-height: 150px;
}

/* Fælden skal være væk for mennesker, men findes for robotter. */
.np-faelde {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.np-formular-handling {
	display: flex;
	align-items: center;
	gap: 18px;
	flex-wrap: wrap;
	margin: 6px 0 0;
}

.np-formular-note {
	color: var(--mut);
	font-size: 0.86rem;
}

.np-fejlbesked {
	margin: 0 0 22px;
	padding: 14px 18px;
	background: var(--wash);
	border: 1px solid var(--line);
	border-left: 3px solid var(--ink);
	border-radius: 8px;
}

/* Kvitteringen efter afsendelse. */
.np-kvittering {
	padding: 34px 30px;
	background: var(--wash);
	border: 1px solid var(--line);
	border-radius: 16px;
}

.np-kvittering-flueben {
	display: block;
	width: 22px;
	height: 12px;
	border-left: 3px solid var(--ink);
	border-bottom: 3px solid var(--ink);
	transform: rotate(-45deg);
	margin: 0 0 22px 4px;
}

.np-kvittering-titel {
	margin: 0 0 8px;
	font-family: Poppins, system-ui, sans-serif;
	font-weight: 700;
	font-size: 1.4rem;
	text-transform: uppercase;
	letter-spacing: 0.01em;
}

.np-kvittering p {
	margin: 0;
	color: var(--mut);
}

.np-kontakt-side {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.np-kontaktkort {
	padding: 26px 24px;
	background: var(--flade);
	border-radius: 14px;
}

.np-kontaktkort-titel {
	margin: 0 0 10px;
	font-family: Poppins, system-ui, sans-serif;
	font-weight: 700;
	font-size: 1.05rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.np-kontaktkort p {
	margin: 0 0 12px;
}

.np-kontaktkort p:last-child {
	margin-bottom: 0;
}

.np-kontaktkort-tekst {
	color: var(--mut);
	font-size: 0.94rem;
}

.np-kontakt-mail {
	font-weight: 600;
	text-underline-offset: 3px;
}

@media (max-width: 860px) {
	.np-kontakt {
		grid-template-columns: 1fr;
		gap: 40px;
	}
}

@media (max-width: 560px) {
	.np-felt-raekke {
		grid-template-columns: 1fr;
	}
}

/* ---------- Om os ---------- */

.np-om-manifest,
.np-om-shows {
	margin-bottom: var(--luft);
}

.np-om-lead {
	margin: 0 0 40px;
	font-size: clamp(1.2rem, 2.4vw, 1.5rem);
	line-height: 1.5;
	max-width: 46ch;
}

.np-om-spalter {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 40px;
}

.np-om-titel {
	margin: 0 0 10px;
	font-family: Poppins, system-ui, sans-serif;
	font-weight: 700;
	font-size: 1.2rem;
	text-transform: uppercase;
	letter-spacing: 0.02em;
}

.np-om-spalter p {
	margin: 0;
	color: var(--mut);
}

.np-om-tekst {
	max-width: 68ch;
	margin-bottom: var(--luft);
}

.np-om-raekker {
	list-style: none;
	margin: 0;
	padding: 0;
	border-top: 1px solid var(--line);
}

.np-om-raekker li {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 20px;
	padding: 18px 4px;
	border-bottom: 1px solid var(--line);
	font-family: Poppins, system-ui, sans-serif;
	font-weight: 700;
	font-size: 1.2rem;
	text-transform: uppercase;
	letter-spacing: 0.01em;
}

.np-om-raekker a {
	text-decoration: none;
}

.np-om-raekker a:hover {
	text-decoration: underline;
	text-underline-offset: 4px;
}

.np-om-raekker span {
	font-family: Poppins, system-ui, sans-serif;
	font-weight: 400;
	font-size: 0.88rem;
	text-transform: none;
	letter-spacing: 0;
	color: var(--mut);
}

.np-standpunkt-handling {
	margin: 28px 0 0;
}

@media (max-width: 700px) {
	.np-om-spalter {
		grid-template-columns: 1fr;
		gap: 28px;
	}
}

/* ---------- Tekstsider ---------- */

/* Smal spalte. Over cirka 70 tegn pr. linje mister øjet sporet, og
   det er dét der gør en betingelsesside anstrengende at læse. */
.np-artikel {
	max-width: 68ch;
	font-size: 1.03rem;
	line-height: 1.7;
}

.np-artikel > *:first-child {
	margin-top: 0;
}

.np-artikel p {
	margin: 0 0 1.1em;
}

/* Første afsnit fungerer som manchet. */
.np-artikel > p:first-of-type {
	font-size: 1.2rem;
	line-height: 1.6;
	color: var(--ink);
	margin-bottom: 1.6em;
}

.np-artikel h2,
.np-artikel h3,
.np-artikel h4 {
	font-family: Poppins, system-ui, sans-serif;
	font-weight: 700;
	line-height: 1.25;
	margin: 2.2em 0 0.6em;
	scroll-margin-top: 24px;
}

.np-artikel h2 {
	font-size: 1.5rem;
	text-transform: uppercase;
	letter-spacing: 0.01em;
}

.np-artikel h3 {
	font-size: 1.18rem;
}

.np-artikel h4 {
	font-size: 1.02rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--mut);
}

.np-artikel h3 strong,
.np-artikel h2 strong,
.np-artikel h4 strong {
	font-weight: inherit;
}

.np-artikel ul,
.np-artikel ol {
	margin: 0 0 1.2em;
	padding-left: 1.3em;
}

.np-artikel li {
	margin-bottom: 0.45em;
}

.np-artikel li::marker {
	color: var(--mut);
}

.np-artikel a {
	color: var(--ink);
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
}

.np-artikel a:hover {
	text-decoration-thickness: 2px;
}

/* Adskillerne bliver til luft frem for en streg tværs over. */
.np-artikel hr {
	height: 0;
	border: 0;
	border-top: 1px solid var(--line);
	margin: 2.4em 0;
	width: 64px;
}

.np-artikel blockquote {
	margin: 1.6em 0;
	padding-left: 20px;
	border-left: 3px solid var(--line);
	color: var(--mut);
}

.np-artikel table {
	width: 100%;
	border-collapse: collapse;
	margin: 0 0 1.4em;
	font-size: 0.95rem;
}

.np-artikel th,
.np-artikel td {
	text-align: left;
	padding: 10px 12px;
	border-bottom: 1px solid var(--line);
}

.np-artikel img {
	border-radius: 12px;
}

.np-artikel-opdateret {
	max-width: 68ch;
	margin: 48px 0 0;
	padding-top: 20px;
	border-top: 1px solid var(--line);
	color: var(--mut);
	font-size: 0.88rem;
}

/* ---------- Reklametallet der bliver til et standpunkt ---------- */

.np-tal-skifter {
	position: relative;
}

.np-tal-skifter .np-tal,
.np-tal-skifter .np-tal-tekst {
	transition: opacity 0.45s ease, transform 0.45s ease;
}

.np-tal-skifter.np-er-skiftet .np-tal,
.np-tal-skifter.np-er-skiftet .np-tal-tekst {
	opacity: 0;
	transform: translateY(-8px);
}

/* Udsagnet ligger i samme felt og tones ind når tallet er væk. */
.np-tal-udsagn {
	position: absolute;
	left: 24px;
	right: 24px;
	top: 32px;
	bottom: 30px;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	opacity: 0;
	transform: translateY(8px);
	transition: opacity 0.45s ease 0.2s, transform 0.45s ease 0.2s;
	pointer-events: none;
	font-family: Poppins, system-ui, sans-serif;
	font-weight: 700;
	font-size: 1.15rem;
	line-height: 1.2;
	text-transform: uppercase;
	letter-spacing: 0.005em;
}

.np-tal-skifter.np-er-skiftet .np-tal-udsagn {
	opacity: 1;
	transform: none;
}

@media (max-width: 600px) {
	.np-tal-udsagn {
		left: 16px;
		right: 16px;
		top: 22px;
		bottom: 22px;
		font-size: 1rem;
	}
}

/* ---------- Mobilmenu ---------- */

/* Knappen findes kun når scriptet har slået menuen til, og kun på
   små skærme. Uden JavaScript står linkene som de altid har gjort. */
.np-menuknap {
	display: none;
	position: relative;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	color: var(--ink);
}

.np-menuknap-streger,
.np-menuknap-streger::before,
.np-menuknap-streger::after {
	position: absolute;
	left: 11px;
	width: 22px;
	height: 2px;
	background: currentColor;
	border-radius: 2px;
	transition: transform 0.22s ease, opacity 0.16s ease;
}

.np-menuknap-streger {
	top: 21px;
}

.np-menuknap-streger::before,
.np-menuknap-streger::after {
	content: "";
	left: 0;
}

.np-menuknap-streger::before {
	top: -7px;
}

.np-menuknap-streger::after {
	top: 7px;
}

/* Åben: stregerne bliver til et kryds. */
.np-menu-aaben .np-menuknap-streger {
	background: transparent;
}

.np-menu-aaben .np-menuknap-streger::before {
	transform: translateY(7px) rotate(45deg);
}

.np-menu-aaben .np-menuknap-streger::after {
	transform: translateY(-7px) rotate(-45deg);
}

@media (max-width: 780px) {
	.np-top.np-har-menuknap .np-menuknap {
		display: block;
	}

	.np-top.np-har-menuknap .np-top-raekke {
		flex-wrap: nowrap;
	}

	.np-top.np-har-menuknap .np-nav {
		position: absolute;
		left: 0;
		right: 0;
		top: 100%;
		z-index: 40;
		flex-direction: column;
		gap: 0;
		background: var(--wash);
		border-bottom: 1px solid var(--line);
		box-shadow: 0 14px 28px rgba(0, 0, 0, 0.08);
		max-height: 0;
		overflow: hidden;
		transition: max-height 0.25s ease;
	}

	.np-top.np-har-menuknap.np-menu-aaben .np-nav {
		max-height: 60vh;
	}

	.np-top.np-har-menuknap .np-nav a {
		padding: 16px 20px;
		border-top: 1px solid var(--line);
		font-size: 1rem;
	}

	.np-top {
		position: relative;
	}
}

/* ---------- Trykflader på berøringsskærme ---------- */

.np-udtalelsesprikker {
	margin-top: 26px;
	margin-left: -9px;
}

@media (max-width: 780px) {
	/* Sidefodens links står tæt. På mobil får de plads til en finger. */
	.np-bund-nav ul {
		gap: 0;
		flex-direction: column;
	}

	.np-bund-nav a {
		display: block;
		padding: 11px 0;
	}

	.np-liste-mere a,
	.np-podcastraekke-navn a {
		display: inline-block;
		padding: 8px 0;
	}

	/* Sidehovedet må ikke blive højere end nødvendigt. */
	.np-top-raekke {
		padding-top: 10px;
		padding-bottom: 10px;
	}
}

/* ---------- Mærket i standpunktet ---------- */

.np-standpunkt .np-indre {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 40px;
	align-items: center;
}

.np-standpunkt-tekstblok {
	min-width: 0;
}

/* Mærket står stort og næsten gennemsigtigt til højre og driver
   langsommere end siden, når man scroller. Scriptet sætter --np-drift;
   uden JavaScript står det bare stille. */
.np-standpunkt-maerke {
	justify-self: center;
	transform: translate3d(0, var(--np-drift, 0px), 0);
	will-change: transform;
}

.np-standpunkt-maerke img {
	display: block;
	width: clamp(150px, 20vw, 260px);
	height: auto;
	opacity: 0.08;
}

/* På mobil falder de to spalter sammen, og mærket ville lande som en
   løsrevet grafik i sin egen blok. Det bliver et vandmærke i hjørnet
   i stedet — så beholder sektionen sit mærke uden at bruge en halv
   skærm på det. */
@media (max-width: 820px) {
	.np-standpunkt .np-indre {
		position: relative;
		grid-template-columns: 1fr;
		gap: 28px;
	}

	.np-standpunkt-tekstblok {
		position: relative;
		z-index: 1;
	}

	.np-standpunkt-maerke {
		position: absolute;
		top: 50%;
		left: 50%;
		justify-self: auto;
		margin: 0;
		pointer-events: none;
		/* Centreringen skal ind i selve transformen, ellers overskriver den
		   driften fra scriptet og maerket holder op med at bevaege sig. */
		transform: translate3d(-50%, calc(-50% + var(--np-drift, 0px)), 0);
	}

	.np-standpunkt-maerke img {
		width: 132px;
		opacity: 0.06;
	}
}

/* ---------- Sådan lytter du ---------- */

.np-saadan {
	margin-bottom: var(--luft);
}

.np-trin {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 36px;
	counter-reset: trin;
}

.np-trin-punkt {
	padding-top: 22px;
	border-top: 2px solid var(--gul);
}

.np-trin-nr {
	display: block;
	color: var(--gul-tekst);
	font-family: Poppins, system-ui, sans-serif;
	font-weight: 800;
	font-size: 2.4rem;
	line-height: 1;
	margin-bottom: 12px;
}

.np-trin-titel {
	margin: 0 0 8px;
	font-family: Poppins, system-ui, sans-serif;
	font-weight: 700;
	font-size: 1.12rem;
	line-height: 1.25;
}

.np-trin-tekst {
	margin: 0;
	color: var(--mut);
	font-size: 0.97rem;
	line-height: 1.55;
}

.np-saadan-apps {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-top: 34px;
	padding-top: 22px;
	border-top: 1px solid var(--line);
	color: var(--mut);
}

.np-saadan-apps p {
	margin: 0;
	font-size: 0.94rem;
}

.np-saadan-ikon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 999px;
	border: 1px solid var(--line);
	color: var(--ink);
	flex-shrink: 0;
}

@media (max-width: 760px) {
	.np-trin {
		grid-template-columns: 1fr;
		gap: 26px;
	}

	.np-saadan-apps {
		align-items: flex-start;
		flex-wrap: wrap;
	}
}

/* ---------- Log ind som knap i menuen ---------- */

.np-nav a.np-nav-knap {
	padding: 8px 18px;
	border: 1.5px solid var(--ink);
	border-radius: 999px;
	line-height: 1.2;
}

.np-nav a.np-nav-knap:hover {
	background: var(--ink);
	color: var(--wash);
	text-decoration: none;
}

.np-top-raekke .np-nav {
	align-items: center;
}

@media (max-width: 780px) {
	.np-top.np-har-menuknap .np-nav a.np-nav-knap {
		border: 0;
		border-top: 1px solid var(--line);
		border-radius: 0;
		padding: 16px 20px;
	}

	.np-top.np-har-menuknap .np-nav a.np-nav-knap:hover {
		background: none;
		color: var(--ink);
	}
}

/* ---------- Log ind uden for mobilmenuen ---------- */

/* På desktop står log ind i menuen. På mobil ville den ligge gemt bag
   hamburgeren, og et medlem der kommer tilbage skal kunne se den med
   det samme — derfor et selvstændigt link ved siden af knappen. */
.np-mobil-login {
	display: none;
	margin-left: auto;
	margin-right: 6px;
	padding: 8px 16px;
	border: 1.5px solid var(--ink);
	border-radius: 999px;
	color: var(--ink);
	text-decoration: none;
	font-family: Poppins, system-ui, sans-serif;
	font-weight: 600;
	font-size: 0.86rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	white-space: nowrap;
}

@media (max-width: 780px) {
	.np-top.np-har-menuknap .np-mobil-login {
		display: inline-block;
	}

	/* Så står den ikke to gange. */
	.np-top.np-har-menuknap .np-nav a.np-nav-knap,
	.np-top.np-har-menuknap .np-nav a[href*="memberful"],
	.np-top.np-har-menuknap .np-nav a[href*="profile.php"] {
		display: none;
	}
}

@media (max-width: 400px) {
	.np-mobil-login {
		padding: 7px 12px;
		font-size: 0.78rem;
	}
}

/* ---------- Trinene som diasshow ---------- */

/* Uden JavaScript står de tre trin side om side som almindelige
   spalter. Klassen np-show gør dem til slides — ét ad gangen, stort. */
.np-trin.np-show {
	position: relative;
	display: block;
	min-height: 210px;
	padding: 0;
	border-top: 2px solid var(--line);
	overflow: hidden;
}

.np-trin.np-show .np-trin-punkt {
	position: absolute;
	inset: 0;
	display: grid;
	grid-template-columns: auto 1fr;
	align-content: start;
	column-gap: 30px;
	padding: 26px 0 0;
	border: 0;
	opacity: 0;
	visibility: hidden;
	transform: translateX(38px);
	transition: opacity 0.42s ease, transform 0.42s cubic-bezier(0.22, 0.61, 0.36, 1), visibility 0s linear 0.42s;
}

.np-trin.np-show .np-trin-punkt.np-er-aktiv {
	opacity: 1;
	visibility: visible;
	transform: none;
	transition: opacity 0.42s ease, transform 0.42s cubic-bezier(0.22, 0.61, 0.36, 1), visibility 0s;
}

/* Tallet er slidets ansigt. Det ruller på plads når man skifter. */
.np-trin.np-show .np-trin-nr {
	grid-row: 1 / span 2;
	margin: 0;
	font-size: clamp(4rem, 7vw, 6rem);
	line-height: 0.82;
	color: var(--gul);
	transform-origin: 50% 60%;
}

.np-trin.np-show .np-trin-punkt.np-er-aktiv .np-trin-nr {
	animation: np-tal-rul 0.6s cubic-bezier(0.22, 0.61, 0.36, 1) backwards;
}

@keyframes np-tal-rul {
	from {
		opacity: 0;
		transform: translateY(26px) rotateX(-70deg);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

.np-trin.np-show .np-trin-titel {
	align-self: end;
	margin: 0 0 6px;
	font-size: clamp(1.3rem, 2.6vw, 1.8rem);
	text-transform: uppercase;
	letter-spacing: 0.005em;
}

.np-trin.np-show .np-trin-tekst {
	align-self: start;
	max-width: 46ch;
	font-size: 1.02rem;
}

/* Betjening: streger man kan trykke på, plus tælleren. */
.np-trinstyring {
	display: none;
	align-items: center;
	gap: 16px;
	margin-top: 18px;
}

.np-trin.np-show ~ .np-trinstyring {
	display: flex;
}

.np-trinstyring-spor {
	display: flex;
	gap: 2px;
}

.np-trintal {
	font-family: Poppins, system-ui, sans-serif;
	font-weight: 700;
	font-size: 0.82rem;
	letter-spacing: 0.1em;
	color: var(--mut);
}

@media (max-width: 760px) {
	.np-trin.np-show {
		min-height: 250px;
	}

	.np-trin.np-show .np-trin-punkt {
		grid-template-columns: 1fr;
		row-gap: 4px;
		align-content: center;
	}

	.np-trin.np-show .np-trin-nr {
		grid-row: auto;
		font-size: 4rem;
	}
}

/* ---------- Telefonen ved siden af trinene ---------- */

/* Scenen findes kun når diasshowet kører — ellers står trinene som
   almindelige spalter, og en telefon ved siden af giver ingen mening. */
/* To spalter der flugter foroven. Telefonen er ikke laengere lagt
   oven paa en tom kasse, saa teksten skal ikke centreres i tomrum. */
.np-saadan-krop {
	display: block;
}

.np-saadan-venstre {
	min-width: 0;
}

.np-trin-scene {
	display: none;
}

@media (min-width: 901px) {
	.np-saadan-krop:has(.np-trin.np-show) {
		display: grid;
		grid-template-columns: minmax(0, 1fr) 250px;
		column-gap: 56px;
		align-items: stretch;
	}

	.np-saadan-krop:has(.np-trin.np-show) .np-saadan-venstre {
		display: flex;
		flex-direction: column;
		justify-content: center;
		min-height: 470px;
		padding: 34px 38px;
		background: var(--wash);
		border: 1px solid var(--line);
		border-radius: 20px;
	}

	/* Stregen over trinene er overfloedig inde i en boks. */
	.np-saadan-krop:has(.np-trin.np-show) .np-trin.np-show {
		border-top: 0;
		min-height: 200px;
	}

	.np-saadan-krop:has(.np-trin.np-show) .np-trin-scene {
		display: block;
	}
}

.np-trin.np-show {
	min-height: 232px;
}

.np-telefon {
	position: relative;
	width: 250px;
	height: 470px;
	padding: 12px;
	border-radius: 34px;
	background: var(--ink);
	box-shadow: 0 24px 50px rgba(0, 0, 0, 0.22);
}

.np-telefon-hak {
	position: absolute;
	top: 12px;
	left: 50%;
	transform: translateX(-50%);
	width: 84px;
	height: 20px;
	border-radius: 0 0 12px 12px;
	background: var(--ink);
	z-index: 3;
}

.np-telefon-skaerm {
	position: relative;
	height: 100%;
	border-radius: 24px;
	background: #fff;
	overflow: hidden;
}

/* Skærmbillederne skifter i takt med trinene. */
.np-scene {
	position: absolute;
	inset: 0;
	padding: 34px 18px 18px;
	display: flex;
	flex-direction: column;
	opacity: 0;
	visibility: hidden;
	transform: translateY(14px) scale(0.98);
	transition: opacity 0.45s ease, transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1), visibility 0s linear 0.45s;
}

.np-scene.np-er-aktiv {
	opacity: 1;
	visibility: visible;
	transform: none;
	transition: opacity 0.45s ease, transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1), visibility 0s;
}

.np-scene-etiket {
	margin: 0 0 14px;
	font-family: Poppins, system-ui, sans-serif;
	font-weight: 700;
	font-size: 0.64rem;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	color: var(--gul-tekst);
}

/* Skærm 1: pakken. */
.np-scene-pakke {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	margin: auto 0;
	padding: 0 0 16px;
	border: 1px solid var(--line);
	border-radius: 14px;
	overflow: hidden;
}

.np-scene-pakke-top {
	width: 100%;
	padding: 5px 0;
	background: var(--fremhaev);
	color: var(--fremhaev-tekst);
	font-family: Poppins, system-ui, sans-serif;
	font-weight: 700;
	font-size: 0.56rem;
	text-transform: uppercase;
	letter-spacing: 0.1em;
}

.np-scene-pakke-navn {
	margin-top: 14px;
	font-family: Poppins, system-ui, sans-serif;
	font-weight: 700;
	font-size: 0.82rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

.np-scene-pakke-pris {
	font-family: Poppins, system-ui, sans-serif;
	font-weight: 800;
	font-size: 2.6rem;
	line-height: 1.1;
}

.np-scene-pakke-pris small {
	font-size: 0.9rem;
	margin-left: 2px;
}

.np-scene-pakke-pr {
	color: var(--mut);
	font-size: 0.7rem;
	margin-bottom: 14px;
}

.np-scene-knap {
	padding: 9px 30px;
	border-radius: 6px;
	background: var(--ink);
	color: #fff;
	font-family: Poppins, system-ui, sans-serif;
	font-weight: 700;
	font-size: 0.7rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

/* Skærm 2: feedet i en podcast-app. */
.np-scene-liste {
	list-style: none;
	margin: 0;
	padding: 0;
}

.np-scene-liste li {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 9px 0;
	border-bottom: 1px solid var(--line);
}

.np-scene-liste img {
	width: 44px;
	height: 44px;
	border-radius: 7px;
	object-fit: cover;
	flex-shrink: 0;
}

.np-scene-liste span {
	display: flex;
	flex-direction: column;
	min-width: 0;
	flex: 1;
}

.np-scene-liste strong {
	font-size: 0.76rem;
	line-height: 1.2;
}

.np-scene-liste em {
	font-style: normal;
	font-size: 0.66rem;
	color: var(--mut);
}

/* Hentepilen ved hvert afsnit. */
.np-scene-hent {
	flex: none;
	width: 16px;
	height: 16px;
	border-radius: 999px;
	border: 1.5px solid var(--groen);
	position: relative;
}

.np-scene-hent::before {
	content: "";
	position: absolute;
	left: 5px;
	top: 3px;
	width: 4px;
	height: 4px;
	border-right: 1.5px solid var(--groen);
	border-bottom: 1.5px solid var(--groen);
	transform: rotate(45deg);
}

/* Skærm 3: videoen. */
.np-scene-video {
	position: relative;
	border-radius: 10px;
	overflow: hidden;
	aspect-ratio: 16 / 10;
	background: var(--ink);
}

.np-scene-video img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0.8;
}

.np-scene-play {
	position: absolute;
	inset: 0;
	margin: auto;
	width: 42px;
	height: 42px;
	border-radius: 999px;
	background: #fff;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.np-scene-play::before {
	content: "";
	position: absolute;
	inset: 0;
	margin: auto;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 7px 0 7px 11px;
	border-color: transparent transparent transparent var(--ink);
	transform: translateX(2px);
}

.np-scene-videotitel {
	margin: 12px 0 0;
	font-size: 0.74rem;
	font-weight: 600;
	line-height: 1.35;
}

@media (max-width: 900px) {
	.np-trin.np-show {
		min-height: 250px;
	}
}

/* Hængelås på rammen når afsnittet er spærret. */
.np-ramme.np-er-laast::before {
	content: "";
	position: absolute;
	top: 14px;
	right: 14px;
	z-index: 3;
	width: 30px;
	height: 30px;
	border-radius: 999px;
	background: rgba(12, 12, 14, 0.62);
	backdrop-filter: blur(4px);
}

.np-ramme.np-er-laast::after {
	content: "";
	position: absolute;
	top: 23px;
	right: 23px;
	z-index: 4;
	width: 12px;
	height: 10px;
	border: 2px solid #fff;
	border-radius: 2px;
}

.np-ramme.np-er-laast .np-play {
	background: rgba(255, 255, 255, 0.92);
}

/* ---------- Podcastsidens hoved ---------- */

/* --show sættes på elementet ud fra podcastens egen farve, så hver
   række får sin identitet uden at der skal skrives CSS pr. podcast. */
.np-showhero {
	position: relative;
	padding: 56px 0 60px;
	background:
		linear-gradient(180deg, color-mix(in srgb, var(--show) 14%, transparent) 0%, transparent 100%),
		var(--wash);
	border-bottom: 1px solid var(--line);
	overflow: hidden;
}

/* Et bredt farvebånd i toppen, som en klubfarve. */
.np-showhero::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 5px;
	background: var(--show);
}

.np-showhero-indre {
	display: grid;
	grid-template-columns: 148px 1fr;
	gap: 32px;
	align-items: center;
}

.np-showhero-cover {
	width: 148px;
	height: 148px;
	border-radius: 16px;
	object-fit: cover;
	box-shadow: 0 10px 28px rgba(0, 0, 0, 0.16);
}

.np-showhero-maerkat {
	margin: 0 0 8px;
	color: color-mix(in srgb, var(--show) 78%, #1C1C1E);
	font-size: 0.8rem;
	letter-spacing: 0.14em;
}

.np-showhero-titel {
	margin: 0 0 10px;
	font-family: Poppins, system-ui, sans-serif;
	font-weight: 700;
	font-size: clamp(2rem, 4.6vw, 3rem);
	text-transform: uppercase;
	letter-spacing: 0.005em;
	line-height: 1.05;
}

.np-showhero-fakta {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 18px;
	margin: 0;
	color: var(--mut);
	font-size: 0.95rem;
}

.np-showhero-fakta span + span::before {
	content: "·";
	margin-right: 18px;
	color: var(--line);
}

.np-showhero .np-podcast-beskrivelse {
	margin-top: 12px;
}

/* Farven går igen i selve listen. */
.np-showside .np-aktiv-nr {
	color: color-mix(in srgb, var(--show) 78%, #1C1C1E);
}

.np-showside .np-kort-plus {
	background: var(--show);
	color: #fff;
}

.np-showside .np-punkt.np-er-aktiv .np-kort-knap {
	box-shadow: inset 4px 0 0 var(--show);
	background: color-mix(in srgb, var(--show) 6%, #fff);
}

.np-showside .np-kort-knap:hover {
	background: color-mix(in srgb, var(--show) 5%, #fff);
}

.np-showside .np-forbind {
	border-color: color-mix(in srgb, var(--show) 22%, var(--line));
	background: color-mix(in srgb, var(--show) 4%, var(--wash));
}

.np-showside .np-soegefelt:focus {
	border-color: var(--show);
	outline: none;
}

@media (max-width: 700px) {
	.np-showhero {
		padding: 36px 0 40px;
	}

	.np-showhero-indre {
		grid-template-columns: 92px 1fr;
		gap: 20px;
	}

	.np-showhero-cover {
		width: 92px;
		height: 92px;
		border-radius: 12px;
	}
}

/* ---------- Cookiebanneret ---------- */

.np-cookiebanner {
	position: fixed;
	left: 16px;
	right: 16px;
	bottom: 16px;
	z-index: 90;
	display: flex;
	justify-content: center;
	pointer-events: none;
}

.np-cookiebanner-kort {
	pointer-events: auto;
	max-width: 640px;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: 16px;
	padding: 24px 26px;
	box-shadow: 0 18px 44px rgba(0, 0, 0, 0.18);
}

.np-cookiebanner-titel {
	margin: 0 0 8px;
	font-family: Poppins, system-ui, sans-serif;
	font-weight: 700;
	font-size: 1.05rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.np-cookiebanner-tekst {
	margin: 0 0 16px;
	font-size: 0.94rem;
	line-height: 1.55;
	color: var(--mut);
}

.np-cookiebanner-tekst a {
	color: var(--ink);
	text-underline-offset: 3px;
}

.np-cookievalg {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin: 0 0 16px;
	padding: 14px 16px;
	background: var(--wash);
	border: 1px solid var(--line);
	border-radius: 10px;
}

.np-cookievalg-punkt {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	font-size: 0.9rem;
	line-height: 1.45;
	cursor: pointer;
}

.np-cookievalg-punkt input {
	margin-top: 3px;
	accent-color: var(--ink);
}

/* Afvis og tillad skal veje lige tungt — det er et lovkrav, ikke
   en smagssag. Begge er derfor primærknapper. */
.np-cookiebanner-knapper {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.np-cookiebanner-knapper .np-knap {
	padding: 11px 20px;
	font-size: 0.92rem;
}

/* Genåbningsknappen i sidefoden ligner de andre links. */
.np-cookie-genaabn {
	padding: 0;
	border: 0;
	background: none;
	color: rgba(255, 255, 255, 0.72);
	font: inherit;
	font-size: 0.92rem;
	cursor: pointer;
}

.np-cookie-genaabn:hover {
	color: #fff;
	text-decoration: underline;
	text-underline-offset: 3px;
}

@media (max-width: 780px) {
	.np-cookie-genaabn {
		display: block;
		padding: 11px 0;
	}
}

@media (max-width: 560px) {
	.np-cookiebanner {
		left: 10px;
		right: 10px;
		bottom: 10px;
	}

	.np-cookiebanner-kort {
		padding: 20px;
	}

	.np-cookiebanner-knapper .np-knap {
		flex: 1 1 100%;
		text-align: center;
	}
}

/* ---------- Afsnitsnoterne ---------- */

.np-noter {
	margin: 8px 0 44px;
	padding-top: 28px;
	border-top: 1px solid var(--line);
}

.np-noter-titel {
	margin: 0 0 14px;
	font-family: Poppins, system-ui, sans-serif;
	font-weight: 700;
	font-size: 1.3rem;
	text-transform: uppercase;
	letter-spacing: 0.01em;
}

.np-noter .np-aktiv-noter {
	max-width: 68ch;
	line-height: 1.7;
}

.np-noter .np-aktiv-noter ul,
.np-noter .np-aktiv-noter ol {
	padding-left: 1.3em;
}

.np-noter .np-aktiv-noter li {
	margin-bottom: 0.4em;
}

.np-noter .np-aktiv-noter li::marker {
	color: var(--show, var(--gul));
}

/* ---------- Mørkt showhoved ---------- */

/* Rækker med mørk farve — 1. Division er sort — får hele hovedet i
   mørkt med hvid tekst. Tonet ned blev sort bare til grå baggrund. */
.np-showhero-moerk {
	background:
		radial-gradient(120% 150% at 85% 0%, color-mix(in srgb, var(--show) 40%, #34343A) 0%, transparent 60%),
		linear-gradient(170deg, #232327 0%, #151517 100%);
	color: #fff;
	border-bottom: 0;
}

.np-showhero-moerk::before {
	background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.35) 50%, transparent 100%);
}

.np-showhero-moerk .np-showhero-maerkat {
	color: rgba(255, 255, 255, 0.55);
}

.np-showhero-moerk .np-showhero-fakta {
	color: rgba(255, 255, 255, 0.65);
}

.np-showhero-moerk .np-showhero-fakta span + span::before {
	color: rgba(255, 255, 255, 0.25);
}

.np-showhero-moerk .np-podcast-beskrivelse {
	color: rgba(255, 255, 255, 0.7);
}

.np-showhero-moerk .np-showhero-cover {
	box-shadow: 0 14px 36px rgba(0, 0, 0, 0.5);
}

/* ---------- Faktakortet ved noterne ---------- */

.np-noter {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 300px;
	gap: 48px;
	align-items: start;
}

/* Uden noter fylder kortet naturligt fra venstre. */
.np-noter:has(#np-noter-tekst[hidden]) {
	grid-template-columns: 340px;
}

.np-faktakort {
	background: color-mix(in srgb, var(--show, var(--gul)) 5%, var(--wash));
	border: 1px solid color-mix(in srgb, var(--show, var(--gul)) 18%, var(--line));
	border-radius: 14px;
	padding: 24px;
}

.np-faktakort-titel {
	margin: 0 0 14px;
	font-family: Poppins, system-ui, sans-serif;
	font-weight: 700;
	font-size: 0.95rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

.np-fakta {
	margin: 0 0 18px;
}

.np-fakta > div {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	padding: 9px 0;
	border-bottom: 1px solid var(--line);
	font-size: 0.92rem;
}

.np-fakta dt {
	color: var(--mut);
}

.np-fakta dd {
	margin: 0;
	font-weight: 600;
	text-align: right;
}

.np-del-knap {
	width: 100%;
	text-align: center;
	padding: 11px 14px;
	font-size: 0.85rem;
}

.np-faktakort-apps {
	margin: 14px 0 0;
	font-size: 0.88rem;
	color: var(--mut);
}

.np-faktakort-apps a {
	color: var(--ink);
	text-underline-offset: 3px;
	margin-left: 6px;
}

@media (max-width: 820px) {
	.np-noter {
		grid-template-columns: 1fr;
		gap: 28px;
	}

	.np-noter:has(#np-noter-tekst[hidden]) {
		grid-template-columns: 1fr;
	}
}

/* ---------- Hent flere afsnit ---------- */

.np-gitter:not(.np-viser-alle) .np-punkt.np-senere {
	display: none;
}

.np-hent-flere {
	display: block;
	margin: 28px auto 0;
	padding: 12px 28px;
	font-size: 0.92rem;
}

/* ---------- Spring til indhold ---------- */

.np-spring {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 200;
	padding: 13px 22px;
	background: var(--ink);
	color: #fff;
	text-decoration: none;
	font-family: Poppins, system-ui, sans-serif;
	font-weight: 600;
	border-radius: 0 0 10px 0;
}

.np-spring:focus {
	left: 0;
}

/* ---------- Spinner på Afspil ---------- */

.np-ramme.np-henter .np-play-ikon {
	display: none;
}

.np-ramme.np-henter .np-play::before {
	content: "";
	width: 18px;
	height: 18px;
	border: 3px solid rgba(28, 28, 30, 0.25);
	border-top-color: var(--ink);
	border-radius: 999px;
	animation: np-spin 0.7s linear infinite;
}

@keyframes np-spin {
	to {
		transform: rotate(360deg);
	}
}

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

.np-404-handling {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

/* ---------- Værtkortet kan åbnes ---------- */

.np-vaert {
	cursor: pointer;
}

.np-vaertdialog {
	width: min(92vw, 420px);
	border: 0;
	border-radius: 18px;
	padding: 0;
	overflow: hidden;
	box-shadow: 0 30px 70px rgba(0, 0, 0, 0.35);
}

.np-vaertdialog::backdrop {
	background: rgba(12, 12, 14, 0.55);
	backdrop-filter: blur(3px);
}

.np-vaertdialog[open] {
	animation: np-ind 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.np-vaertdialog-billede {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	object-position: center 20%;
}

.np-vaertdialog-krop {
	padding: 22px 26px 26px;
}

.np-vaertdialog-rolle {
	margin: 0 0 2px;
	color: var(--gul-tekst);
	font-family: Poppins, system-ui, sans-serif;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	font-size: 0.72rem;
}

.np-vaertdialog-navn {
	margin: 0 0 10px;
	font-family: Poppins, system-ui, sans-serif;
	font-weight: 700;
	font-size: 1.4rem;
	text-transform: uppercase;
	letter-spacing: 0.01em;
	line-height: 1.15;
}

.np-vaertdialog-maerkat {
	display: inline-block;
	margin: 0 0 12px;
	padding: 4px 12px;
	background: var(--ink);
	color: #fff;
	border-radius: 6px;
	font-family: Poppins, system-ui, sans-serif;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-size: 0.66rem;
}

.np-vaertdialog-tekst {
	margin: 0;
	color: var(--mut);
	line-height: 1.65;
}

.np-vaertdialog-luk {
	position: absolute;
	top: 12px;
	right: 12px;
	width: 38px;
	height: 38px;
	border: 0;
	border-radius: 999px;
	background: rgba(12, 12, 14, 0.55);
	color: #fff;
	font-size: 1.3rem;
	line-height: 1;
	cursor: pointer;
	backdrop-filter: blur(3px);
}

.np-vaertdialog-luk:hover {
	background: rgba(12, 12, 14, 0.8);
}

/* ---------- Rejsen: 3. Række blev til NoPrime ---------- */

.np-rejse {
	margin: 0 0 var(--luft-lille);
}

.np-rejse-trin {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0;
}

.np-rejse-punkt {
	position: relative;
	padding: 28px 0 28px 34px;
	border-bottom: 1px solid var(--line);
}

.np-rejse-punkt:first-child {
	border-top: 1px solid var(--line);
}

/* Stregen der binder trinnene sammen, og prikken der markerer hvert af dem. */
.np-rejse-punkt::before {
	content: "";
	position: absolute;
	left: 5px;
	top: 0;
	bottom: 0;
	width: 1px;
	background: var(--line);
}

.np-rejse-punkt:first-child::before {
	top: 34px;
}

.np-rejse-punkt:last-child::before {
	bottom: auto;
	height: 34px;
}

.np-rejse-punkt::after {
	content: "";
	position: absolute;
	left: 0;
	top: 31px;
	width: 11px;
	height: 11px;
	border-radius: 50%;
	background: var(--wash);
	border: 1px solid var(--ink);
}

/* Det sidste trin er nutiden — den fyldes ud, så øjet lander der. */
.np-rejse-punkt:last-child::after {
	background: var(--ink);
}

.np-rejse-etiket {
	margin: 0 0 6px;
	font-family: Poppins, system-ui, sans-serif;
	font-size: 0.78rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--mut);
}

.np-rejse-titel {
	margin: 0 0 10px;
	font-family: Poppins, system-ui, sans-serif;
	font-weight: 700;
	font-size: clamp(1.25rem, 2.6vw, 1.7rem);
	line-height: 1.2;
}

.np-rejse-punkt p:last-child {
	margin: 0;
	max-width: 62ch;
	color: var(--mut);
	line-height: 1.6;
}

.np-rejse-medlem {
	margin: var(--luft-lille) 0 0;
	padding: 36px;
	background: var(--flade);
	border-radius: 18px;
}

.np-rejse-medlem-lead {
	margin: 0 0 28px;
	max-width: 52ch;
	line-height: 1.6;
}

.np-rejse-loefter {
	list-style: none;
	margin: 0 0 28px;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 20px;
}

.np-rejse-loefter li {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding-top: 16px;
	border-top: 2px solid var(--ink);
	font-size: 0.95rem;
	color: var(--mut);
}

.np-rejse-loefte-titel {
	font-family: Poppins, system-ui, sans-serif;
	font-weight: 700;
	font-size: 1.05rem;
	color: var(--ink);
}

.np-rejse-handling {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 20px;
	margin: 0;
}

.np-rejse-link {
	font-family: Poppins, system-ui, sans-serif;
	font-weight: 600;
	font-size: 0.95rem;
	color: var(--ink);
	text-underline-offset: 4px;
}

@media (max-width: 640px) {
	.np-rejse-medlem {
		padding: 24px;
	}
}

/* ---------- Bloggen: oversigten ---------- */

.np-blogkort-link {
	display: block;
	color: inherit;
	text-decoration: none;
}

.np-blogkort-billede {
	display: block;
	overflow: hidden;
	border-radius: 14px;
	background: var(--flade);
	aspect-ratio: 16 / 9;
}

.np-blogkort-billede img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.np-blogkort-link:hover .np-blogkort-billede img {
	transform: scale(1.04);
}

.np-blogkort-billede-tom {
	aspect-ratio: 16 / 9;
}

.np-blogkort-tekst {
	display: block;
	padding-top: 18px;
}

.np-blogkort-meta {
	display: block;
	margin-bottom: 8px;
	font-family: Poppins, system-ui, sans-serif;
	font-size: 0.78rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--mut);
}

.np-blogkort-titel {
	display: block;
	margin-bottom: 10px;
	font-family: Poppins, system-ui, sans-serif;
	font-weight: 700;
	font-size: 1.35rem;
	line-height: 1.2;
	text-wrap: balance;
}

.np-blogkort-link:hover .np-blogkort-titel {
	text-decoration: underline;
	text-underline-offset: 5px;
}

.np-blogkort-uddrag {
	display: block;
	color: var(--mut);
	line-height: 1.6;
	font-size: 0.98rem;
}

.np-blogkort-stor {
	margin-bottom: var(--luft-lille);
	padding-bottom: var(--luft-lille);
	border-bottom: 1px solid var(--line);
}

.np-blogkort-stor .np-blogkort-link {
	display: grid;
	grid-template-columns: 1.15fr 1fr;
	align-items: center;
	gap: 40px;
}

.np-blogkort-stor .np-blogkort-billede {
	aspect-ratio: 3 / 2;
	border-radius: 18px;
}

.np-blogkort-stor .np-blogkort-tekst {
	padding-top: 0;
}

.np-blogkort-stor .np-blogkort-titel {
	font-size: clamp(1.8rem, 3.4vw, 2.6rem);
	margin-bottom: 14px;
}

.np-blogkort-stor .np-blogkort-uddrag {
	font-size: 1.08rem;
}

.np-blogkort-mere {
	display: inline-block;
	margin-top: 18px;
	font-family: Poppins, system-ui, sans-serif;
	font-weight: 700;
	font-size: 0.9rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	border-bottom: 2px solid var(--ink);
	padding-bottom: 3px;
}

.np-bloggitter {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 44px 32px;
}

.np-blogsider {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: var(--luft-lille);
	padding-top: 28px;
	border-top: 1px solid var(--line);
	font-family: Poppins, system-ui, sans-serif;
	font-weight: 600;
	font-size: 0.95rem;
}

.np-blogsider .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 42px;
	padding: 9px 14px;
	border: 1px solid var(--line);
	border-radius: 999px;
	text-decoration: none;
	color: var(--ink);
}

.np-blogsider .page-numbers:hover {
	border-color: var(--ink);
}

.np-blogsider .page-numbers.current {
	background: var(--accent);
	border-color: var(--accent);
	color: var(--accent-tekst);
}

@media (max-width: 800px) {
	.np-blogkort-stor .np-blogkort-link {
		grid-template-columns: 1fr;
		gap: 20px;
	}
}

/* ---------- Bloggen: artiklen ---------- */

/* Læsestregen i toppen. Tynd nok til at være en detalje, ikke en widget. */
.np-laesestreg {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	z-index: 60;
	pointer-events: none;
}

.np-laesestreg span {
	display: block;
	height: 100%;
	width: 0;
	background: var(--ink);
	transition: width 0.1s linear;
}

/* Åbningen fylder skærmen. Det er dét der gør forskellen på en side
   man skimmer og en man sætter sig ned i. */
.np-artikelhero-billede {
	position: relative;
	display: flex;
	align-items: flex-end;
	min-height: clamp(520px, 88vh, 900px);
	overflow: hidden;
	background: #0C0C0E;
}

.np-artikelhero-foto {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transform: scale(1.06);
	animation: np-hero-naer 14s ease-out forwards;
}

@keyframes np-hero-naer {
	to { transform: scale(1); }
}

.np-artikelhero-slor {
	position: absolute;
	inset: 0;
	background:
		linear-gradient(to top, rgba(12, 12, 14, 0.94) 0%, rgba(12, 12, 14, 0.72) 30%, rgba(12, 12, 14, 0.18) 66%, rgba(12, 12, 14, 0.35) 100%);
}

.np-artikelhero-indhold {
	position: relative;
	padding-top: 120px;
	padding-bottom: 150px;
	color: #fff;
}

.np-artikelhero-kicker {
	display: inline-block;
	margin: 0 0 22px;
	padding: 7px 14px;
	border: 1px solid rgba(255, 255, 255, 0.5);
	border-radius: 999px;
	font-family: Poppins, system-ui, sans-serif;
	font-size: 0.72rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	color: #fff;
}

.np-artikelhero-titel {
	margin: 0 0 26px;
	max-width: 16ch;
	font-family: Poppins, system-ui, sans-serif;
	font-weight: 700;
	font-size: clamp(2.6rem, 7.2vw, 5.6rem);
	line-height: 0.98;
	letter-spacing: -0.025em;
	text-wrap: balance;
}

.np-artikelhero-fakta {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 0;
	margin: 0;
	padding: 0;
	font-family: Poppins, system-ui, sans-serif;
	font-size: 0.85rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: rgba(255, 255, 255, 0.9);
}

.np-artikelhero-fakta li {
	padding: 0 18px;
	border-left: 1px solid rgba(255, 255, 255, 0.35);
}

.np-artikelhero-fakta li:first-child {
	padding-left: 0;
	border-left: 0;
}

/* Den lille streg der siger: der er mere længere nede. */
.np-artikelhero-rul {
	position: absolute;
	left: 50%;
	bottom: 34px;
	width: 1px;
	height: 54px;
	background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.85));
	animation: np-rul 2.4s ease-in-out infinite;
}

@keyframes np-rul {
	0%, 100% { opacity: 0.25; transform: translateY(-8px); }
	50%      { opacity: 1;    transform: translateY(0); }
}

.np-artikelhero-ren {
	padding: 130px 0 60px;
	background: var(--wash);
}

.np-artikelhero-ren .np-artikelhero-kicker {
	border-color: var(--ink);
	color: var(--ink);
}

.np-artikelhero-ren .np-artikelhero-fakta {
	color: var(--mut);
}

.np-artikelhero-ren .np-artikelhero-fakta li {
	border-left-color: var(--line);
}

/* Brødteksten ligger ind over billedets underkant som et ark papir. */
.np-artikel-ark {
	position: relative;
	z-index: 2;
	background: #fff;
	padding: 64px 0 var(--luft-lille);
}

.np-indlaeg-med-billede .np-artikel-ark {
	margin-top: -90px;
	border-radius: 28px 28px 0 0;
	padding-top: 72px;
}

.np-artikel-tekst {
	max-width: 40rem;
	font-size: 1.18rem;
	line-height: 1.8;
}

/* Manchet. Første afsnit skal læses, ikke skimmes. */
.np-artikel-tekst > p:first-of-type {
	font-family: Poppins, system-ui, sans-serif;
	font-size: clamp(1.3rem, 2.2vw, 1.6rem);
	font-weight: 500;
	line-height: 1.45;
	letter-spacing: -0.01em;
	color: var(--ink);
	margin-bottom: 1.5em;
}

/* Initialen. Ét bogstav der siger "her begynder det". */
.np-artikel-tekst > p:first-of-type::first-letter {
	float: left;
	font-family: Poppins, system-ui, sans-serif;
	font-weight: 700;
	font-size: 4.4em;
	line-height: 0.78;
	margin: 0.06em 0.09em 0 0;
}

.np-artikel-tekst p {
	margin: 0 0 1.4em;
}

.np-artikel-tekst h2 {
	position: relative;
	margin: 2.4em 0 0.7em;
	padding-top: 30px;
	border-top: 1px solid var(--line);
	font-family: Poppins, system-ui, sans-serif;
	font-weight: 700;
	font-size: clamp(1.7rem, 3.4vw, 2.4rem);
	line-height: 1.1;
	letter-spacing: -0.02em;
	text-wrap: balance;
}

.np-artikel-tekst h3 {
	margin: 1.9em 0 0.5em;
	font-family: Poppins, system-ui, sans-serif;
	font-weight: 700;
	font-size: 1.3rem;
	line-height: 1.25;
}

.np-artikel-tekst ul,
.np-artikel-tekst ol {
	margin: 0 0 1.4em;
	padding-left: 1.3em;
}

.np-artikel-tekst li {
	margin-bottom: 0.55em;
}

.np-artikel-tekst a {
	text-underline-offset: 3px;
}

/* Citatet er artiklens pause: sort blok, stor type. */
.np-artikel-tekst blockquote {
	position: relative;
	margin: 2.6em 0;
	padding: 56px clamp(26px, 4vw, 54px);
	border-radius: 22px;
	background: var(--ink);
	color: #fff;
	font-family: Poppins, system-ui, sans-serif;
	font-weight: 700;
	font-size: clamp(1.5rem, 3.6vw, 2.5rem);
	line-height: 1.18;
	letter-spacing: -0.02em;
	text-wrap: balance;
}

.np-artikel-tekst blockquote p {
	margin: 0 0 0.35em;
	max-width: 22ch;
}

.np-artikel-tekst blockquote p:last-child {
	margin-bottom: 0;
}

.np-artikel-tekst blockquote cite {
	display: block;
	font-size: 0.9rem;
	font-weight: 500;
	font-style: normal;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.7);
}

/* Billeder i teksten er bredere end spalten — de skal have luft. */
.np-artikel-tekst img,
.np-artikel-tekst figure {
	max-width: 100%;
	height: auto;
	border-radius: 16px;
}

.np-artikel-tekst figure,
.np-artikel-tekst .wp-block-image {
	width: 100%;
	margin: 2.4em 0;
}

.np-artikel-tekst figcaption {
	margin-top: 12px;
	font-family: Poppins, system-ui, sans-serif;
	font-size: 0.85rem;
	line-height: 1.5;
	letter-spacing: 0.02em;
	color: var(--mut);
	text-align: center;
}

.np-artikel-bund {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 20px;
	max-width: 40rem;
	margin: var(--luft-lille) 0 0;
	padding-top: 34px;
	border-top: 1px solid var(--line);
}

.np-artikel-naboer {
	display: block;
	padding: 22px;
	border: 1px solid var(--line);
	border-radius: 16px;
	text-decoration: none;
	color: inherit;
	transition: border-color 0.2s ease, transform 0.2s ease;
}

.np-artikel-naboer:hover {
	border-color: var(--ink);
	transform: translateY(-2px);
}

.np-artikel-nabo-etiket {
	display: block;
	margin-bottom: 6px;
	font-family: Poppins, system-ui, sans-serif;
	font-size: 0.72rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var(--mut);
}

.np-artikel-nabo-titel {
	display: block;
	font-family: Poppins, system-ui, sans-serif;
	font-weight: 700;
	font-size: 1.05rem;
	line-height: 1.25;
}


@media (max-width: 700px) {
	.np-artikelhero-indhold {
		padding-top: 90px;
		padding-bottom: 110px;
	}

	.np-indlaeg-med-billede .np-artikel-ark {
		margin-top: -60px;
		border-radius: 20px 20px 0 0;
	}

	.np-artikel-tekst blockquote {
		padding: 44px 24px;
	}
}

/* Respektér at nogen har slået bevægelse fra i systemet. */
@media (prefers-reduced-motion: reduce) {
	.np-artikelhero-foto,
	.np-artikelhero-rul {
		animation: none;
	}

	.np-artikelhero-foto {
		transform: none;
	}
}

/* ---------- Artiklen: gitter med sidespalte ---------- */

/* Bredere end .np-indre, fordi der nu skal være plads til to spalter.
   Er der ikke plads, falder sidespalten ned under teksten. */
.np-artikel-indre {
	max-width: 1180px;
	margin: 0 auto;
	padding: 0 20px;
}

.np-artikel-gitter {
	display: grid;
	grid-template-columns: minmax(0, 40rem) 290px;
	justify-content: center;
	gap: 60px;
	align-items: start;
}

.np-artikel-spalte {
	min-width: 0;
}

/* Sidespalten følger med ned, men stopper når artiklen slutter. */
.np-artikel-side {
	position: sticky;
	top: 28px;
}

.np-sideblok {
	padding: 26px;
	background: var(--flade);
	border-radius: 20px;
}

.np-sideblok-maerkat {
	margin: 0 0 18px;
}

.np-sideliste {
	list-style: none;
	margin: 0 0 20px;
	padding: 0;
}

.np-sideliste li + li {
	margin-top: 4px;
	padding-top: 16px;
	border-top: 1px solid var(--line);
}

.np-sidekort {
	position: relative;
	display: flex;
	align-items: center;
	gap: 13px;
	padding: 8px 0;
	text-decoration: none;
	color: inherit;
}

.np-sidekort-billede {
	flex: 0 0 56px;
	width: 56px;
	height: 56px;
	border-radius: 10px;
	object-fit: cover;
	background: var(--line);
}

.np-sidekort-tekst {
	display: block;
	min-width: 0;
}

.np-sidekort-titel {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	font-family: Poppins, system-ui, sans-serif;
	font-weight: 600;
	font-size: 0.94rem;
	line-height: 1.3;
}

.np-sidekort:hover .np-sidekort-titel {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.np-sidekort-meta {
	display: block;
	margin-top: 5px;
	font-family: Poppins, system-ui, sans-serif;
	font-size: 0.78rem;
	color: var(--mut);
}

.np-sidekort-badge {
	position: absolute;
	right: 0;
	top: 8px;
}

.np-sideblok-alle {
	display: inline-block;
	font-family: Poppins, system-ui, sans-serif;
	font-weight: 700;
	font-size: 0.82rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	text-decoration: none;
	border-bottom: 2px solid var(--ink);
	padding-bottom: 3px;
}

/* Afsnitsblokken findes to steder i HTML: i sidespalten og inde i
   teksten. Serveren kan ikke vide hvor bred skærmen er, så CSS afgør
   hvilken af dem der vises — aldrig begge. */
.np-afsnitboks-plads {
	display: none;
}

/* Under 1100px er der ikke plads til en sidespalte. Så forsvinder den,
   og blokken inde i teksten træder i stedet. */
@media (max-width: 1100px) {
	.np-artikel-gitter {
		grid-template-columns: minmax(0, 40rem);
		gap: 44px;
	}

	.np-artikel-side {
		display: none;
	}

	.np-afsnitboks-plads {
		display: block;
		margin: 2.8em 0;
	}
}

/* ---------- Artiklen: gitter med sidespalte ---------- */

/* Bredere end .np-indre, fordi der nu skal være plads til to spalter.
   Er der ikke plads, falder sidespalten ned under teksten. */
.np-artikel-indre {
	max-width: 1180px;
	margin: 0 auto;
	padding: 0 20px;
}

.np-artikel-gitter {
	display: grid;
	grid-template-columns: minmax(0, 40rem) 290px;
	justify-content: center;
	gap: 60px;
	align-items: start;
}

.np-artikel-spalte {
	min-width: 0;
}

/* Sidespalten følger med ned, men stopper når artiklen slutter. */
.np-artikel-side {
	position: sticky;
	top: 28px;
}

.np-sideblok {
	padding: 26px;
	background: var(--flade);
	border-radius: 20px;
}

.np-sideblok-maerkat {
	margin: 0 0 18px;
}

.np-sideliste {
	list-style: none;
	margin: 0 0 20px;
	padding: 0;
}

.np-sideliste li + li {
	margin-top: 4px;
	padding-top: 16px;
	border-top: 1px solid var(--line);
}

.np-sidekort {
	position: relative;
	display: flex;
	align-items: center;
	gap: 13px;
	padding: 8px 0;
	text-decoration: none;
	color: inherit;
}

.np-sidekort-billede {
	flex: 0 0 56px;
	width: 56px;
	height: 56px;
	border-radius: 10px;
	object-fit: cover;
	background: var(--line);
}

.np-sidekort-tekst {
	display: block;
	min-width: 0;
}

.np-sidekort-titel {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	font-family: Poppins, system-ui, sans-serif;
	font-weight: 600;
	font-size: 0.94rem;
	line-height: 1.3;
}

.np-sidekort:hover .np-sidekort-titel {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.np-sidekort-meta {
	display: block;
	margin-top: 5px;
	font-family: Poppins, system-ui, sans-serif;
	font-size: 0.78rem;
	color: var(--mut);
}

.np-sidekort-badge {
	position: absolute;
	right: 0;
	top: 8px;
}

.np-sideblok-alle {
	display: inline-block;
	font-family: Poppins, system-ui, sans-serif;
	font-weight: 700;
	font-size: 0.82rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	text-decoration: none;
	border-bottom: 2px solid var(--ink);
	padding-bottom: 3px;
}

/* Afsnitsblokken findes to steder i HTML: i sidespalten og inde i
   teksten. Serveren kan ikke vide hvor bred skærmen er, så CSS afgør
   hvilken af dem der vises — aldrig begge. */
.np-afsnitboks-plads {
	display: none;
}

/* Under 1100px er der ikke plads til en sidespalte. Så forsvinder den,
   og blokken inde i teksten træder i stedet. */
@media (max-width: 1100px) {
	.np-artikel-gitter {
		grid-template-columns: minmax(0, 40rem);
		gap: 44px;
	}

	.np-artikel-side {
		display: none;
	}

	.np-afsnitboks-plads {
		display: block;
		margin: 2.8em 0;
	}
}

/* ---------- Artiklen: medlemsboksen ---------- */

/* Mørk, fordi den skal skille sig ud fra både teksten og den lyse
   afsnitsblok — uden at råbe. Det er sitets eneste salgsflade her. */
.np-medlemsboks {
	padding: 26px 24px 28px;
	background: var(--ink);
	color: #fff;
	border-radius: 20px;
}

.np-medlemsboks-maerkat {
	margin: 0 0 14px;
	color: rgba(255, 255, 255, 0.72);
}

.np-medlemsboks-titel {
	margin: 0 0 6px;
	font-family: Poppins, system-ui, sans-serif;
	font-weight: 700;
	font-size: 1.28rem;
	line-height: 1.15;
	text-wrap: balance;
}

.np-medlemsboks-pris {
	margin: 0 0 18px;
	font-family: Poppins, system-ui, sans-serif;
	font-size: 0.92rem;
	color: rgba(255, 255, 255, 0.72);
}

.np-medlemsboks-tekst {
	margin: 0 0 22px;
	font-size: 0.96rem;
	line-height: 1.55;
	color: rgba(255, 255, 255, 0.86);
}

.np-medlemsboks-punkter {
	list-style: none;
	margin: 0 0 22px;
	padding: 0;
	font-size: 0.92rem;
	line-height: 1.4;
	color: rgba(255, 255, 255, 0.9);
}

.np-medlemsboks-punkter li {
	position: relative;
	padding-left: 22px;
	margin-bottom: 11px;
}

/* Fluebenet tegnes i CSS, så boksen ikke skal hente et ikon. */
.np-medlemsboks-punkter li::before {
	content: "";
	position: absolute;
	left: 1px;
	top: 4px;
	width: 10px;
	height: 6px;
	border-left: 2px solid #fff;
	border-bottom: 2px solid #fff;
	transform: rotate(-45deg);
}

.np-medlemsboks-knap {
	display: block;
	width: 100%;
	text-align: center;
	background: #fff;
	color: var(--ink);
	border-color: #fff;
}

.np-medlemsboks-knap:hover {
	background: rgba(255, 255, 255, 0.88);
}

.np-medlemsboks-login {
	margin: 16px 0 0;
	font-size: 0.85rem;
	text-align: center;
	color: rgba(255, 255, 255, 0.68);
}

.np-medlemsboks-login a {
	color: #fff;
	text-underline-offset: 3px;
}

/* ---------- Medlemsboksen i artiklen ---------- */

.np-medlemsboks-plads {
	margin: 3em 0;
}

/* Teksten til venstre, handlingen til højre, begge lodret centreret.
   N-mærket ligger svagt bagved som en tekstur — ikke som en illustration. */
.np-medlemsboks {
	position: relative;
	padding: 36px 40px;
	overflow: hidden;
	background: var(--ink);
	color: #fff;
	border-radius: 24px;
}

.np-medlemsboks-maerke {
	position: absolute;
	right: -34px;
	bottom: -70px;
	width: 210px;
	height: auto;
	opacity: 0.05;
	filter: invert(1);
	pointer-events: none;
}

.np-medlemsboks-tekstblok {
	position: relative;
	min-width: 0;
}

.np-medlemsboks-maerkat {
	margin: 0 0 14px;
	color: var(--fremhaev);
}

.np-medlemsboks-titel {
	margin: 0 0 12px;
	font-family: Poppins, system-ui, sans-serif;
	font-weight: 700;
	font-size: clamp(1.45rem, 2.6vw, 1.95rem);
	line-height: 1.08;
	letter-spacing: -0.015em;
	text-wrap: balance;
}

.np-medlemsboks-tekst {
	margin: 0;
	max-width: 54ch;
	font-size: 0.98rem;
	line-height: 1.55;
	color: rgba(255, 255, 255, 0.72);
}

/* Handlingen er en række under teksten: pris og knap til venstre,
   login skubbet helt ud til højre. */
.np-medlemsboks-handling {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px 22px;
	margin-top: 28px;
	padding-top: 24px;
	border-top: 1px solid rgba(255, 255, 255, 0.16);
}

.np-medlemsboks-pris {
	margin: 0;
	font-family: Poppins, system-ui, sans-serif;
	font-size: 1.35rem;
	font-weight: 700;
	line-height: 1.1;
}

.np-medlemsboks-knap {
	display: inline-block;
	width: auto;
	background: #fff;
	color: var(--ink);
	border-color: #fff;
	white-space: nowrap;
}

.np-medlemsboks-knap:hover {
	background: var(--fremhaev);
	border-color: var(--fremhaev);
	color: var(--fremhaev-tekst);
}

.np-medlemsboks-login {
	margin: 0 0 0 auto;
	font-size: 0.86rem;
	color: rgba(255, 255, 255, 0.6);
}

.np-medlemsboks-login a {
	color: #fff;
	text-underline-offset: 3px;
}

@media (max-width: 620px) {
	.np-medlemsboks {
		padding: 28px 24px;
	}

	.np-medlemsboks-knap {
		display: block;
		width: 100%;
		text-align: center;
	}

	.np-medlemsboks-login {
		margin: 0;
		width: 100%;
		text-align: center;
	}

	.np-medlemsboks-maerke {
		width: 150px;
		bottom: -50px;
		right: -26px;
	}
}

/* ---------- Blogfiltret ---------- */

.np-blogfilter {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0 0 var(--luft-lille);
	padding-bottom: 28px;
	border-bottom: 1px solid var(--line);
}

.np-filterchip {
	display: inline-flex;
	align-items: center;
	padding: 9px 18px;
	border: 1px solid var(--line);
	border-radius: 999px;
	font-family: Poppins, system-ui, sans-serif;
	font-weight: 600;
	font-size: 0.88rem;
	letter-spacing: 0.01em;
	text-decoration: none;
	color: var(--ink);
	transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.np-filterchip:hover {
	border-color: var(--ink);
}

.np-filterchip-aktiv {
	background: var(--accent);
	border-color: var(--accent);
	color: var(--accent-tekst);
}

/* ---------- Indskudte blokke inde i brødteksten ---------- */

/* Medlemsboksen og afsnitsblokken står inde i .np-artikel-tekst, og
   dens regler for p, ul og li er mere specifikke end blokkenes egne
   klasser. Her får blokkene deres eget udseende tilbage. */

.np-medlemsboks .np-medlemsboks-maerkat {
	margin: 0 0 14px;
}

.np-medlemsboks .np-medlemsboks-titel {
	margin: 0 0 12px;
}

.np-medlemsboks .np-medlemsboks-tekst {
	margin: 0;
}

.np-medlemsboks .np-medlemsboks-pris {
	margin: 0;
}

.np-medlemsboks .np-medlemsboks-login {
	margin: 0 0 0 auto;
}

.np-afsnitboks-plads .np-sideblok-maerkat {
	margin: 0 0 18px;
}

.np-afsnitboks-plads .np-sideliste {
	margin: 0 0 20px;
	padding-left: 0;
	list-style: none;
}

.np-afsnitboks-plads .np-sideliste li {
	margin-bottom: 0;
}

.np-afsnitboks-plads .np-sideliste li + li {
	margin-top: 4px;
	padding-top: 16px;
}

@media (max-width: 620px) {
	.np-medlemsboks .np-medlemsboks-login {
		margin: 0;
	}
}

/* ---------- Spørgsmål og svar ---------- */

.np-faq-sektion .np-faq {
	display: grid;
	grid-template-columns: 280px minmax(0, 1fr);
	gap: 48px;
	align-items: start;
}

.np-faq-intro {
	position: sticky;
	top: 28px;
	padding-top: 4px;
}

.np-faq-titel {
	margin: 0 0 14px;
	font-family: Poppins, system-ui, sans-serif;
	font-weight: 700;
	font-size: clamp(1.6rem, 3vw, 2.1rem);
	line-height: 1.08;
	letter-spacing: -0.015em;
	text-wrap: balance;
}

.np-faq-hjaelp {
	margin: 0;
	font-size: 0.95rem;
	line-height: 1.5;
	color: var(--mut);
	text-wrap: balance;
}

.np-faq-hjaelp a {
	color: var(--ink);
	font-weight: 600;
	white-space: nowrap;
	text-underline-offset: 4px;
}

/* Hvert spørgsmål er et kort med bund under sig. Hårstreger tværs over
   en bred spalte bliver til luft; kort holder sammen på det. Bredden
   har et loft, så linjerne kan læses og plusset ikke ender langt væk. */
.np-faq-liste {
	display: grid;
	gap: 12px;
	max-width: 680px;
}

.np-faq-punkt {
	background: var(--flade);
	border: 1px solid transparent;
	border-radius: 14px;
	transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.np-faq-punkt:hover {
	background: #EFECE5;
}

/* Det åbne kort løftes op på hvid, så det står frem for de lukkede. */
.np-faq-punkt[open] {
	background: #fff;
	border-color: var(--line);
	box-shadow: 0 8px 26px rgba(28, 28, 30, 0.07);
}

.np-faq-punkt[open]:hover {
	background: #fff;
}

.np-faq-punkt summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	padding: 24px 26px;
	cursor: pointer;
	list-style: none;
	border-radius: 14px;
}

.np-faq-punkt summary::-webkit-details-marker {
	display: none;
}

/* Fokusringen tegnes selv, og kun når der tastes rundt — ikke ved klik. */
.np-faq-punkt summary:focus {
	outline: none;
}

.np-faq-punkt summary:focus-visible {
	outline: 2px solid var(--ink);
	outline-offset: 2px;
}

.np-faq-spoergsmaal {
	font-family: Poppins, system-ui, sans-serif;
	font-weight: 600;
	font-size: 1.05rem;
	line-height: 1.35;
}

/* Plusset bliver til et minus når svaret er åbent. */
.np-faq-tegn {
	position: relative;
	flex: 0 0 16px;
	width: 16px;
	height: 16px;
	color: var(--mut);
	transition: color 0.2s ease, transform 0.25s ease;
}

.np-faq-punkt[open] .np-faq-tegn {
	color: var(--ink);
	transform: rotate(180deg);
}

.np-faq-tegn::before,
.np-faq-tegn::after {
	content: "";
	position: absolute;
	background: currentColor;
	transition: transform 0.25s ease;
}

.np-faq-tegn::before {
	left: 0;
	top: 7px;
	width: 16px;
	height: 2px;
}

.np-faq-tegn::after {
	left: 7px;
	top: 0;
	width: 2px;
	height: 16px;
}

.np-faq-punkt[open] .np-faq-tegn::after {
	transform: scaleY(0);
}

.np-faq-svar {
	padding: 0 26px 26px;
	animation: np-faq-ind 0.24s ease;
}

.np-faq-svar p {
	margin: 0;
	max-width: 58ch;
	font-size: 0.98rem;
	line-height: 1.65;
	color: var(--mut);
}

@keyframes np-faq-ind {
	from { opacity: 0; transform: translateY(-4px); }
	to   { opacity: 1; transform: none; }
}

@media (max-width: 900px) {
	.np-faq-sektion .np-faq {
		grid-template-columns: 1fr;
		gap: 26px;
	}

	.np-faq-intro {
		position: static;
	}

	.np-faq-liste {
		max-width: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.np-faq-svar {
		animation: none;
	}

	.np-faq-tegn,
	.np-faq-tegn::before,
	.np-faq-tegn::after {
		transition: none;
	}
}

/* ---------- Medlemmernes input ---------- */

.np-input {
	margin: var(--luft) 0 0;
}

.np-input-indre {
	max-width: 640px;
	padding: 34px 36px 36px;
	background: var(--flade);
	border-radius: 22px;
}

.np-input-titel {
	margin: 0 0 10px;
	font-family: Poppins, system-ui, sans-serif;
	font-weight: 700;
	font-size: clamp(1.5rem, 3vw, 2rem);
	line-height: 1.1;
	letter-spacing: -0.015em;
}

.np-input-lead {
	margin: 0 0 26px;
	max-width: 52ch;
	line-height: 1.6;
	color: var(--mut);
}

.np-input-kvittering {
	margin: 0 0 22px;
	padding: 14px 18px;
	border-radius: 12px;
	font-size: 0.95rem;
	line-height: 1.5;
}

.np-input-kvittering-ok {
	background: var(--groen-lys);
	color: var(--groen);
}

.np-input-kvittering-fejl {
	background: #FBF0EE;
	color: #8A2A1B;
}

.np-input-felt {
	margin: 0 0 18px;
}

.np-input-felt label {
	display: block;
	margin-bottom: 7px;
	font-family: Poppins, system-ui, sans-serif;
	font-weight: 600;
	font-size: 0.9rem;
}

.np-input-felt select,
.np-input-felt textarea {
	width: 100%;
	padding: 13px 15px;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: 12px;
	font-family: inherit;
	font-size: 1rem;
	line-height: 1.5;
	color: var(--ink);
}

.np-input-felt textarea {
	resize: vertical;
	min-height: 130px;
}

.np-input-felt select:focus-visible,
.np-input-felt textarea:focus-visible {
	outline: 2px solid var(--ink);
	outline-offset: 1px;
	border-color: var(--ink);
}

/* Fælden må ikke kunne ses eller rammes med tastaturet. */
.np-input-faelde {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.np-input-handling {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px 18px;
	margin: 24px 0 0;
}

.np-input-afsender {
	font-size: 0.86rem;
	color: var(--mut);
}

@media (max-width: 600px) {
	.np-input-indre {
		padding: 26px 22px 28px;
	}
}

/* ---------- Vores podcasts ---------- */

.np-showliste {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 26px;
}

/* Coveret til venstre, teksten til højre. Farven kommer fra --show, som
   skabelonen sætter pr. podcast, så hver række har sin egen tone. */
.np-showkort {
	display: grid;
	grid-template-columns: 200px minmax(0, 1fr);
	gap: 32px;
	align-items: start;
	padding: 28px;
	background: var(--flade);
	border-radius: 22px;
	border-left: 4px solid var(--show, var(--ink));
}

.np-showkort-cover {
	display: block;
	overflow: hidden;
	border-radius: 14px;
	aspect-ratio: 1 / 1;
	background: var(--line);
}

.np-showkort-cover img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.np-showkort-cover:hover img {
	transform: scale(1.04);
}

.np-showkort-meta {
	margin: 0 0 10px;
	font-family: Poppins, system-ui, sans-serif;
	font-size: 0.78rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--mut);
}

.np-showkort-titel {
	margin: 0 0 12px;
	font-family: Poppins, system-ui, sans-serif;
	font-weight: 700;
	font-size: clamp(1.5rem, 3vw, 2.1rem);
	line-height: 1.08;
	letter-spacing: -0.015em;
}

.np-showkort-titel a {
	color: inherit;
	text-decoration: none;
}

.np-showkort-titel a:hover {
	text-decoration: underline;
	text-underline-offset: 5px;
}

/* Første afsnit i beskrivelsen er slaglinjen og må fylde lidt mere. */
.np-showkort-beskrivelse p:first-child {
	font-family: Poppins, system-ui, sans-serif;
	font-weight: 600;
	font-size: 1.06rem;
	color: var(--ink);
	margin: 0 0 10px;
}

.np-showkort-beskrivelse p {
	margin: 0 0 12px;
	max-width: 62ch;
	line-height: 1.6;
	color: var(--mut);
}

.np-showkort-handling {
	margin: 18px 0 0;
}

.np-showliste-cta {
	margin-top: var(--luft-lille);
	padding-top: 34px;
	border-top: 1px solid var(--line);
	text-align: center;
}

.np-showliste-cta-titel {
	margin: 0 0 10px;
	font-family: Poppins, system-ui, sans-serif;
	font-weight: 700;
	font-size: clamp(1.4rem, 2.8vw, 1.9rem);
	line-height: 1.1;
}

.np-showliste-cta-tekst {
	margin: 0 auto 22px;
	max-width: 46ch;
	line-height: 1.6;
	color: var(--mut);
}

@media (max-width: 720px) {
	.np-showkort {
		grid-template-columns: 1fr;
		gap: 20px;
		padding: 22px;
	}

	.np-showkort-cover {
		max-width: 160px;
	}
}

/* I to-spalte-layoutet må udbruddet kun gå til venstre. Går det også
   mod højre, lægger afspiller og forbind sig ind under afsnitslisten. */
@media (min-width: 1080px) {
	.np-showarkiv > .np-indre > .np-afspiller,
	.np-showarkiv > .np-indre > .np-forbind,
	.np-showarkiv > .np-indre > .np-noter {
		width: 108%;
		margin-left: -8%;
		margin-right: 0;
	}
}

/* ---------- Divisionsarkivet: overblik ved ankomsten ---------- */

/* Problemet er ikke afspilleren, men at man lander på den alene.
   Afspiller, app-links og noter fyldte hele bredden, så afsnittene lå
   langt nede, og man kunne ikke se hvad siden indeholdt. På brede
   skærme står listen derfor ved siden af og følger med ned. */
@media (min-width: 1080px) {
	.np-showarkiv > .np-indre {
		display: grid;
		grid-template-columns: minmax(0, 1fr) 400px;
		gap: 26px 48px;
		align-items: start;
		max-width: 1300px;
	}

	.np-showarkiv > .np-indre > .np-afspiller,
	.np-showarkiv > .np-indre > .np-forbind,
	.np-showarkiv > .np-indre > .np-noter {
		grid-column: 1;
	}

	/* Hele spalten hører til række ét, så listen starter i samme højde
	   som afspilleren i stedet for at vente på den. */
	.np-afsnitspalte {
		grid-column: 2;
		grid-row: 1 / span 3;
		position: sticky;
		top: 16px;
		display: flex;
		flex-direction: column;
		max-height: calc(100vh - 32px);
	}

	.np-afsnitspalte .np-soeg {
		margin: 0 0 12px;
		flex: 0 0 auto;
	}

	/* I sidespalten er der kun plads til én kolonne kort. */
	.np-afsnitspalte .np-liste.np-gitter {
		grid-template-columns: minmax(0, 1fr);
		column-gap: 0;
		margin: 0;
		min-height: 0;
		overflow-y: auto;
		overscroll-behavior: contain;
		padding-right: 6px;
	}

	/* Diskret rulleskakt, så den ikke stjæler opmærksomhed. */
	.np-afsnitspalte .np-liste::-webkit-scrollbar {
		width: 8px;
	}

	.np-afsnitspalte .np-liste::-webkit-scrollbar-thumb {
		background: var(--line);
		border-radius: 999px;
	}

	.np-afsnitspalte .np-liste::-webkit-scrollbar-track {
		background: transparent;
	}
}